:root{
  --bigc-green:#9ad338;
  --bigc-green-soft:#c7e99e;
  --bigc-green-pale:#eaf6d8;
  --bigc-red:#e31b23;
  --bigc-yellow:#ffd34f;
  --ink:#123821;
  --ink-soft:#496652;
  --cream:#fffdf5;
  --paper:#ffffff;
  --line:rgba(18,56,33,.12);
  --shadow:0 24px 60px rgba(20,56,30,.17);
  --product-accent:#7faf3c;
  --product-soft:#dcebb9;
  --font-thai:"Noto Sans Thai",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --text-xs:12px;
  --text-sm:14px;
  --text-md:17px;
  --text-lg:19px;
  --text-xl:21px;
  --text-2xl:27px;
  --text-hero:clamp(42px,10.5vw,48px);
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;
  --weight-extrabold:800;
  font-family:var(--font-thai);
  color:var(--ink);
  background:#4c7654;
  font-synthesis:none;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#4c7654}
body{display:grid;place-items:center;overflow-x:hidden}
button,input,select{font:inherit}
button,label{touch-action:manipulation}
button{cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.48}
img{display:block;max-width:100%}
svg{width:1.25em;height:1.25em;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
[hidden]{display:none!important}
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

.app-frame{
  position:relative;
  width:min(100%,460px);
  min-height:100svh;
  background:var(--cream);
  overflow:hidden;
  isolation:isolate;
}

.screen{
  position:relative;
  min-height:100svh;
  width:100%;
  overflow-x:hidden;
  animation:screen-enter .42s cubic-bezier(.22,.85,.28,1) both;
}

@keyframes screen-enter{
  from{opacity:0;transform:translateY(10px) scale(.995)}
  to{opacity:1;transform:none}
}

/* Shared header */
.app-header{
  min-height:60px;
  padding:10px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:relative;
  z-index:20;
}

.brand-lockup{display:flex;align-items:center;gap:9px;color:inherit;text-decoration:none}
.brand-lockup img{width:38px;height:38px;border-radius:11px;object-fit:cover;box-shadow:0 6px 14px rgba(42,89,21,.16)}
.brand-lockup span{display:flex;flex-direction:column;line-height:1}
.brand-lockup strong{font-size:14px;letter-spacing:.055em;font-weight:950}
.brand-lockup small{margin-top:5px;font-size:12px;letter-spacing:.16em;font-weight:850;opacity:.62}
.brand-lockup--light{color:#fff}
.brand-lockup--light img{box-shadow:0 6px 18px rgba(0,0,0,.2)}

.header-actions{display:flex;align-items:center;gap:8px}
.live-status{height:26px;display:inline-flex;align-items:center;gap:6px;padding:0 9px;border-radius:99px;background:rgba(255,255,255,.54);border:1px solid rgba(255,255,255,.58);font-size:12px;font-weight:950;letter-spacing:.08em;color:#27551e;backdrop-filter:blur(12px)}
.live-status i{width:7px;height:7px;border-radius:50%;background:var(--bigc-green);box-shadow:0 0 0 4px rgba(154,211,56,.18)}
.live-status.demo i{background:var(--bigc-yellow)}
.icon-button,.round-button{
  width:38px;height:38px;border:0;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.58);color:var(--ink);backdrop-filter:blur(12px)
}
.icon-button svg,.round-button svg{width:19px;height:19px}
.reminder-button{position:relative}
.reminder-button>span{position:absolute;top:-2px;right:-2px;min-width:17px;height:17px;padding:0 4px;border-radius:99px;background:var(--bigc-red);color:#fff;font-size:12px;font-weight:950;display:grid;place-items:center;border:2px solid #b8df98}

/* Welcome */
.welcome-screen{
  display:flex;
  flex-direction:column;
  background:
    radial-gradient(circle at 88% 8%,rgba(255,255,255,.46),transparent 26%),
    radial-gradient(circle at 6% 54%,rgba(255,211,79,.27),transparent 28%),
    linear-gradient(155deg,#bce4ae 0%,#93cf91 52%,#70b77d 100%);
}
.welcome-screen::before{content:"";position:absolute;width:280px;height:280px;border-radius:50%;right:-180px;top:145px;border:1px solid rgba(255,255,255,.3);box-shadow:0 0 0 32px rgba(255,255,255,.05),0 0 0 76px rgba(255,255,255,.04);pointer-events:none}
.app-header--welcome{flex:0 0 auto}

.welcome-hero{position:relative;flex:1;min-height:290px;padding:18px 20px 0;overflow:hidden}
.welcome-copy{position:relative;z-index:5;max-width:86%}
.eyebrow{margin:0 0 9px;font-size:12px;font-weight:950;letter-spacing:.19em;color:#2f603a}
.welcome-copy h1{margin:0;font-size:clamp(30px,9.5vw,44px);line-height:.94;letter-spacing:-.052em;font-weight:950;color:#fff;text-shadow:0 7px 18px rgba(34,83,47,.12)}
.welcome-copy h1 span{display:block;color:#fff}
.welcome-copy h1 em{display:block;margin-top:3px;font-size:.84em;line-height:1.05;font-style:normal;color:#174729;letter-spacing:-.045em}
.welcome-copy>p:last-child{width:78%;max-width:310px;margin:13px 0 0;font-size:14px;line-height:1.48;color:#285337;font-weight:650}

.welcome-character-area{position:absolute;right:0;bottom:-9px;width:58%;height:78%;display:flex;align-items:flex-end;justify-content:center;z-index:3;pointer-events:none}
.welcome-character{position:relative;z-index:3;width:94%;height:94%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 24px 18px rgba(34,83,47,.22));transform-origin:50% 92%}
.character-floor{position:absolute;z-index:1;bottom:2%;width:58%;height:11%;border-radius:50%;background:rgba(30,82,42,.18);filter:blur(12px)}
.hero-halo{position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.32);z-index:0}
.hero-halo--one{width:190px;height:190px;right:0;bottom:5%}
.hero-halo--two{width:145px;height:145px;right:22px;bottom:10%;box-shadow:inset 0 0 50px rgba(255,255,255,.12)}
.character-speech{position:absolute;top:22%;right:58px;z-index:6;width:128px;max-width:128px;padding:9px 11px;border-radius:15px 15px 3px 15px;background:#fff;color:#245334;font-size:12px;line-height:1.35;font-weight:850;box-shadow:0 10px 30px rgba(39,83,44,.13);transform:rotate(2deg);overflow-wrap:anywhere;text-align:center}

.picker-dock{
  position:relative;
  z-index:10;
  flex:0 0 auto;
  padding:15px 16px calc(15px + env(safe-area-inset-bottom));
  border-radius:29px 29px 0 0;
  background:rgba(255,253,247,.94);
  box-shadow:0 -14px 42px rgba(38,79,42,.13);
  backdrop-filter:blur(18px);
}
.picker-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-bottom:10px}
.picker-heading>div{min-width:0}
.picker-heading span{display:block;font-size:12px;font-weight:950;letter-spacing:.15em;color:#7b8e7d}
.picker-heading h2{margin:3px 0 0;font-size:18px;line-height:1.15;letter-spacing:-.025em}
.picker-heading>strong{max-width:120px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:6px 9px;border-radius:99px;background:var(--product-soft);color:#2e5b2c;font-size:12px}
.product-picker{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin-bottom:12px}
.product-choice{position:relative;min-width:0;height:78px;padding:5px 3px 6px;border:1px solid rgba(18,56,33,.08);border-radius:16px;background:#f6f8ef;color:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:space-between;transition:transform .2s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease}
.product-choice:active{transform:scale(.95)}
.product-choice.active{background:#fff;border:2px solid var(--bigc-green);box-shadow:0 8px 18px rgba(78,123,34,.14);transform:translateY(-2px)}
.product-choice-media{width:48px;height:50px;display:flex;align-items:flex-end;justify-content:center;position:relative}
.product-choice-media::after{content:"";position:absolute;bottom:0;width:32px;height:7px;border-radius:50%;background:rgba(39,75,39,.12);filter:blur(3px)}
.product-choice img{position:relative;z-index:2;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 5px 4px rgba(31,70,35,.14))}
.product-choice strong{width:100%;font-size:12px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.product-choice-check{position:absolute;right:4px;top:4px;width:15px;height:15px;border-radius:50%;background:var(--bigc-green);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:950;opacity:0;transform:scale(.4);transition:.2s ease}
.product-choice.active .product-choice-check{opacity:1;transform:scale(1)}

.primary-action{width:100%;min-height:62px;border:0;border-radius:19px;background:var(--bigc-red);color:#fff;padding:10px 12px;display:grid;grid-template-columns:42px 1fr 22px;align-items:center;gap:9px;text-align:left;box-shadow:0 14px 28px rgba(227,27,35,.22);transition:transform .18s ease,box-shadow .18s ease}
.primary-action:active{transform:scale(.985);box-shadow:0 8px 18px rgba(227,27,35,.18)}
.action-icon{width:40px;height:40px;border-radius:13px;background:rgba(255,255,255,.18);display:grid;place-items:center}
.action-icon svg{width:21px;height:21px}
.primary-action span:nth-child(2){display:block;min-width:0}
.primary-action strong{display:block;font-size:13px;line-height:1.25}
.primary-action small{display:block;margin-top:3px;font-size:12px;color:rgba(255,255,255,.78)}
.primary-action>b{font-size:19px;text-align:right}

/* Camera screen */
.scan-screen{display:flex;flex-direction:column;background:#0d2b1d;color:#fff;overflow:hidden}
.scan-header{height:60px;flex:0 0 auto;padding:9px 13px;display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:8px;background:#123623;position:relative;z-index:20}
.round-button--glass{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.12)}
.scan-product-title{display:flex;align-items:center;gap:8px;min-width:0}
.scan-product-title img{width:35px;height:35px;object-fit:contain;filter:drop-shadow(0 4px 4px rgba(0,0,0,.22))}
.scan-product-title span{min-width:0;display:flex;flex-direction:column}
.scan-product-title small{font-size:12px;color:#9eb6a7}
.scan-product-title strong{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.camera-live-chip{height:25px;padding:0 8px;border-radius:99px;background:rgba(154,211,56,.14);border:1px solid rgba(154,211,56,.22);display:flex;align-items:center;gap:5px;font-size:12px;font-weight:950;color:#d8ffa4}
.camera-live-chip i{width:6px;height:6px;border-radius:50%;background:var(--bigc-green);box-shadow:0 0 0 4px rgba(154,211,56,.12)}

.camera-viewport{position:relative;flex:1;min-height:0;overflow:hidden;background:radial-gradient(circle at 50% 35%,#2e5f43,#0d2b1d 64%)}
.camera-viewport video,.captured-preview{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.camera-fallback{position:absolute;inset:0;z-index:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 42%,rgba(97,155,91,.45),transparent 34%),linear-gradient(180deg,#1e4b34,#0d2b1d)}
.camera-fallback-glow{position:absolute;width:230px;height:230px;border-radius:50%;background:rgba(183,224,135,.12);border:1px solid rgba(255,255,255,.09);box-shadow:0 0 0 32px rgba(255,255,255,.025)}
.scan-character{position:relative;width:47%;height:48%;object-fit:contain;filter:drop-shadow(0 22px 17px rgba(0,0,0,.29));z-index:2}
.camera-fallback p{position:relative;z-index:2;margin:8px 0 0;font-size:12px;color:#bdd0c2}
.camera-vignette{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(2,15,8,.2),transparent 23%,transparent 55%,rgba(2,15,8,.76) 100%),radial-gradient(circle,transparent 42%,rgba(0,0,0,.16) 100%)}
.capture-flash{position:absolute;inset:0;z-index:30;background:#fff;animation:capture-flash .32s ease-out both}
@keyframes capture-flash{0%{opacity:0}20%{opacity:.9}100%{opacity:0}}
.scan-instruction{position:absolute;z-index:10;top:14px;left:50%;transform:translateX(-50%);width:max-content;max-width:82%;padding:8px 12px;border-radius:14px;background:rgba(6,28,16,.55);backdrop-filter:blur(12px);text-align:center}
.scan-instruction strong{display:block;font-size:12px}.scan-instruction small{display:block;margin-top:2px;font-size:12px;color:#c6d8ca}
.smart-frame{position:absolute;z-index:7;left:11%;right:11%;top:15%;bottom:30%;pointer-events:none}
.frame-corner{position:absolute;width:43px;height:43px;border-color:var(--bigc-yellow);border-style:solid;filter:drop-shadow(0 3px 3px rgba(0,0,0,.22))}
.frame-corner--tl{top:0;left:0;border-width:3px 0 0 3px;border-radius:13px 0 0 0}
.frame-corner--tr{top:0;right:0;border-width:3px 3px 0 0;border-radius:0 13px 0 0}
.frame-corner--bl{bottom:0;left:0;border-width:0 0 3px 3px;border-radius:0 0 0 13px}
.frame-corner--br{bottom:0;right:0;border-width:0 3px 3px 0;border-radius:0 0 13px 0}
.frame-target{position:absolute;left:50%;top:18%;width:40px;height:40px;border:2px dashed rgba(255,211,79,.86);border-radius:50%;transform:translateX(-50%);animation:target-pulse 2s ease-in-out infinite}
.frame-target::before{content:"";position:absolute;inset:12px;border-radius:50%;background:var(--bigc-red);box-shadow:0 0 0 4px rgba(227,27,35,.25)}
@keyframes target-pulse{50%{transform:translateX(-50%) scale(1.08);opacity:.72}}
.camera-hints{position:absolute;z-index:9;left:10%;right:10%;top:17%;display:flex;justify-content:space-between;gap:5px;pointer-events:none}
.camera-hints span{padding:6px 8px;border-radius:99px;background:rgba(13,55,36,.83);color:#fff;font-size:12px;font-weight:850;box-shadow:0 8px 18px rgba(0,0,0,.16)}
.camera-hints i{font-style:normal;color:var(--bigc-yellow);margin-right:3px}
.scan-assistant{position:absolute;z-index:11;left:14px;bottom:112px;display:flex;align-items:flex-end;gap:7px;max-width:76%}
.scan-assistant img{width:46px;height:54px;object-fit:contain;filter:drop-shadow(0 6px 5px rgba(0,0,0,.25))}
.scan-assistant p{margin:0 0 8px;padding:9px 11px;border-radius:15px 15px 15px 3px;background:#fff;color:#244b33;font-size:12px;line-height:1.35;font-weight:750;box-shadow:0 12px 25px rgba(0,0,0,.18)}
.camera-controls{position:absolute;z-index:12;left:0;right:0;bottom:29px;display:grid;grid-template-columns:48px 82px 48px;justify-content:center;align-items:center;gap:17px}
.control-button{width:46px;height:46px;border:0;border-radius:15px;display:grid;place-items:center;color:#fff}
.control-button--glass{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(12px)}
.control-button svg{width:21px;height:21px}.control-button input,.error-actions input{display:none}
.shutter-button{width:78px;height:78px;border:3px solid rgba(255,255,255,.93);border-radius:50%;padding:5px;background:rgba(255,255,255,.1);display:grid;place-items:center;box-shadow:0 12px 30px rgba(0,0,0,.26);transition:transform .16s ease}
.shutter-button:active{transform:scale(.92)}
.shutter-button>span{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;background:#fff}
.shutter-button>span>i{display:block;width:48px;height:48px;border-radius:50%;background:var(--bigc-red)}
.shutter-button--open>span{background:var(--bigc-red);color:#fff}.shutter-button svg{width:26px;height:26px}
.control-spacer{display:block;width:46px;height:46px}
.camera-control-label{position:absolute;z-index:12;left:50%;bottom:12px;transform:translateX(-50%);margin:0;width:max-content;max-width:70%;font-size:12px;color:#c1d2c5;text-align:center}
.privacy-note{position:absolute;z-index:10;right:10px;bottom:9px;font-size:12px;color:rgba(255,255,255,.5)}
.camera-error{position:absolute;z-index:40;left:20px;right:20px;top:50%;transform:translateY(-50%);padding:19px;border-radius:22px;background:rgba(255,253,247,.96);color:var(--ink);text-align:center;box-shadow:0 25px 60px rgba(0,0,0,.35);backdrop-filter:blur(18px)}
.error-symbol{width:38px;height:38px;margin:0 auto 10px;border-radius:50%;display:grid;place-items:center;background:#ffe2e2;color:var(--bigc-red);font-weight:950}
.camera-error strong{font-size:15px}.camera-error p{margin:5px auto 14px;max-width:260px;font-size:12px;line-height:1.5;color:#647567}
.error-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.error-actions button,.error-actions label{min-height:42px;border:0;border-radius:13px;display:grid;place-items:center;font-size:12px;font-weight:850}.error-actions button{background:var(--bigc-red);color:#fff}.error-actions label{background:#edf2e7;color:var(--ink)}

/* Analysis screen */
.analysis-screen{display:flex;flex-direction:column;padding:0 18px calc(20px + env(safe-area-inset-bottom));background:radial-gradient(circle at 50% 36%,#2c6245 0,#133c29 48%,#0f2e20 100%);color:#fff;overflow-y:auto}
.analysis-header{height:58px;flex:0 0 auto;display:flex;align-items:center;justify-content:space-between}
.text-button{border:0;background:none;padding:9px;font-size:12px;font-weight:800}.text-button--light{color:#c8dbcc}
.analysis-copy{text-align:center;padding-top:10px}
.analysis-copy>p{margin:0 0 7px;font-size:12px;font-weight:950;letter-spacing:.18em;color:#bce27c}
.analysis-copy h1{margin:0;font-size:27px;line-height:1.12;letter-spacing:-.04em}
.analysis-copy>span{display:inline-flex;margin-top:9px;padding:6px 10px;border-radius:99px;background:rgba(255,255,255,.08);font-size:12px;color:#d7e5da}
.analysis-visual{position:relative;flex:0 0 230px;margin:5px auto 0;width:250px;display:grid;place-items:center}
.analysis-character{position:relative;z-index:4;width:69%;height:82%;object-fit:contain;filter:drop-shadow(0 20px 16px rgba(0,0,0,.32))}
.analysis-orbit{position:absolute;border-radius:50%;border:1px solid rgba(196,230,143,.2)}
.orbit-one{width:205px;height:205px;animation:orbit-spin 8s linear infinite}.orbit-two{width:155px;height:155px;border-style:dashed;animation:orbit-spin 5.5s linear infinite reverse}
@keyframes orbit-spin{to{transform:rotate(360deg)}}
.analysis-scan-line{position:absolute;z-index:6;left:20%;right:20%;height:2px;top:28%;background:linear-gradient(90deg,transparent,#d8ff6b 25%,#fff 50%,#d8ff6b 75%,transparent);box-shadow:0 0 14px #b6e348;animation:analysis-scan 2.3s ease-in-out infinite}
@keyframes analysis-scan{0%,100%{transform:translateY(0);opacity:.35}50%{transform:translateY(112px);opacity:1}}
.analysis-lens{position:absolute;z-index:7;right:27px;top:58px;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--bigc-yellow);color:#163a25;box-shadow:0 12px 24px rgba(0,0,0,.24);animation:lens-float 2.6s ease-in-out infinite}
.analysis-lens svg{width:23px;height:23px}@keyframes lens-float{50%{transform:translateY(-6px) rotate(4deg)}}
.analysis-card{flex:0 0 auto;padding:15px 15px 12px;border-radius:22px;background:#fff;color:var(--ink);box-shadow:0 24px 50px rgba(0,0,0,.2)}
.analysis-progress{height:5px;border-radius:99px;background:#e5ebdf;overflow:hidden;margin-bottom:12px}.analysis-progress span{display:block;width:8%;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--bigc-green),#66a72b);transition:width .45s ease}
.analysis-steps{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px}
.analysis-steps li{display:grid;grid-template-columns:22px 1fr;align-items:center;gap:8px;opacity:.36;transition:opacity .25s ease,transform .25s ease}
.analysis-steps li i{width:20px;height:20px;border:2px solid #d8dfd2;border-radius:50%;position:relative}
.analysis-steps li span{display:flex;flex-direction:column}.analysis-steps li strong{font-size:12px}.analysis-steps li small{font-size:12px;color:#879487;margin-top:2px}
.analysis-steps li.active{opacity:1;transform:translateX(2px)}.analysis-steps li.active i{border-color:var(--bigc-yellow);border-top-color:var(--bigc-green);animation:mini-spin .8s linear infinite}
.analysis-steps li.done{opacity:1}.analysis-steps li.done i{border-color:var(--bigc-green);background:var(--bigc-green)}.analysis-steps li.done i::after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-style:normal;font-size:12px;font-weight:950}
@keyframes mini-spin{to{transform:rotate(360deg)}}
.analysis-fact{margin-top:11px;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08);font-size:12px;line-height:1.5;color:#c9d9cc;text-align:center}
.analysis-error{margin-top:10px;padding:14px;border-radius:18px;background:#fff;color:var(--ink);text-align:center}.analysis-error strong{font-size:14px}.analysis-error p{font-size:12px;color:#647567}.analysis-error>div{display:grid;grid-template-columns:1fr 1fr;gap:8px}.analysis-error button{min-height:41px;border:0;border-radius:12px;font-size:12px;font-weight:850}.analysis-error button:first-child{background:var(--bigc-red);color:#fff}.analysis-error button:last-child{background:#edf2e7;color:var(--ink)}

/* Result */
.result-screen{padding-bottom:calc(22px + env(safe-area-inset-bottom));background:radial-gradient(circle at 90% 3%,rgba(154,211,56,.22),transparent 27%),linear-gradient(180deg,#fff6bf 0%,#fffdf3 45%,#f7f9ef 100%);overflow-y:auto}
.result-header{display:grid;grid-template-columns:40px 1fr 40px;gap:8px;text-align:center}
.result-product-heading{display:flex;flex-direction:column;min-width:0}.result-product-heading small{font-size:12px;color:#849083}.result-product-heading strong{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.result-score-area{text-align:center;padding:9px 18px 0}
.result-score-area>p{margin:0;font-size:12px;font-weight:900;letter-spacing:.15em;color:#7b8979}
.score-number{display:flex;justify-content:center;align-items:flex-end;line-height:.8;margin-top:4px}.score-number strong{font-size:80px;letter-spacing:-.07em;font-weight:500;color:#2e5039}.score-number span{font-size:14px;color:#7d8b7b;margin:0 0 8px 5px}
.result-score-area>small{display:block;margin-top:8px;font-size:12px;color:#849083}
.timing-chip{width:max-content;max-width:90%;margin:13px auto 0;padding:8px 13px;border-radius:99px;background:var(--product-soft);color:#3c6d2c;display:flex;align-items:center;gap:7px;font-size:12px}.timing-chip i{width:13px;height:13px;border-radius:50%;background:var(--bigc-yellow);box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.result-date{display:flex;flex-direction:column;margin-top:12px}.result-date span{font-size:12px;letter-spacing:.09em;color:#879486}.result-date strong{font-size:17px;margin-top:3px}
.result-character-area{position:relative;height:207px;display:grid;place-items:center;margin-top:-2px;overflow:hidden}
.result-character-glow{position:absolute;width:170px;height:170px;border-radius:50%;background:var(--product-soft);filter:blur(2px);box-shadow:0 0 0 28px rgba(255,255,255,.22)}
.result-character{position:relative;z-index:2;width:46%;height:92%;object-fit:contain;filter:drop-shadow(0 20px 13px rgba(44,76,44,.22));transform-origin:50% 92%}
.result-message-card{margin:-6px 16px 0;padding:15px 16px;border-radius:21px;background:#fff;text-align:center;box-shadow:0 14px 34px rgba(43,74,41,.09);border:1px solid rgba(18,56,33,.07)}
.result-message-card>span{display:inline-flex;padding:5px 8px;border-radius:99px;background:var(--product-soft);font-size:12px;font-weight:950;letter-spacing:.08em;color:#426436}
.result-message-card h2{margin:7px 0 3px;font-size:22px;letter-spacing:-.03em}.result-message-card p{margin:0;font-size:12px;line-height:1.55;color:#5e705f}
.result-actions{padding:11px 16px 0;display:flex;flex-direction:column;gap:8px}
.primary-result-action{min-height:57px;border:0;border-radius:17px;padding:9px 12px;background:#285a3b;color:#fff;display:grid;grid-template-columns:36px 1fr;align-items:center;gap:9px;text-align:left;box-shadow:0 12px 25px rgba(40,90,59,.17)}
.primary-result-action>svg{width:22px;height:22px;justify-self:center}.primary-result-action span{display:flex;flex-direction:column}.primary-result-action strong{font-size:12px}.primary-result-action small{font-size:12px;color:#c9dccd;margin-top:2px}
.secondary-result-action{height:46px;border:1px solid rgba(18,56,33,.14);border-radius:15px;background:rgba(255,255,255,.62);color:#356046;font-size:12px;font-weight:850}
.stage-map-card{margin:12px 16px 0;padding:14px;border-radius:21px;background:#fff;border:1px solid rgba(18,56,33,.07);box-shadow:0 11px 28px rgba(43,74,41,.06)}
.stage-map-card header{display:flex;align-items:flex-end;justify-content:space-between;gap:8px}.stage-map-card header small{display:block;font-size:12px;font-weight:900;letter-spacing:.13em;color:#849083}.stage-map-card header h3{margin:3px 0 0;font-size:16px}.stage-map-card header button{border:0;background:none;color:#4d7844;font-size:12px;font-weight:850;padding:5px}
.stage-map{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin-top:14px;position:relative}.stage-map::before{content:"";position:absolute;left:8%;right:8%;top:13px;height:2px;background:#e4e9df}
.stage-map-step{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}.stage-map-step i{width:27px;height:27px;border-radius:50%;background:#e8ece5;border:4px solid #fff;box-shadow:0 0 0 1px #dce3d9;display:grid;place-items:center;font-style:normal;font-size:12px;font-weight:900;color:#849083}.stage-map-step span{font-size:12px;line-height:1.2;color:#849083}.stage-map-step.active i{background:var(--product-accent);color:#fff;box-shadow:0 0 0 4px var(--product-soft)}.stage-map-step.active span{color:var(--ink);font-weight:850}
.active-stage-summary{margin-top:12px;padding:10px 11px;border-radius:13px;background:#f5f7f1;display:grid;grid-template-columns:34px 1fr;gap:9px;align-items:center}.active-stage-summary b{width:32px;height:32px;border-radius:10px;background:var(--product-soft);display:grid;place-items:center;font-size:12px;color:#315c30}.active-stage-summary span{display:flex;flex-direction:column}.active-stage-summary strong{font-size:12px}.active-stage-summary small{font-size:12px;line-height:1.4;color:#778577;margin-top:2px}
.result-details{margin:10px 16px 0;border:1px solid rgba(18,56,33,.08);border-radius:18px;background:#fff;overflow:hidden}.result-details summary{list-style:none;padding:13px;display:grid;grid-template-columns:32px 1fr 18px;align-items:center;gap:8px;cursor:pointer}.result-details summary::-webkit-details-marker{display:none}.result-details summary>span{width:30px;height:30px;border-radius:10px;background:#e9f5d6;display:grid;place-items:center;font-size:12px;font-weight:950;color:#4a742f}.result-details summary strong{font-size:12px}.result-details summary b{font-size:17px;color:#839083}.result-details[open] summary b{transform:rotate(45deg)}.result-details ul{list-style:none;padding:0 13px 13px;margin:0;display:flex;flex-direction:column;gap:7px}.result-details li{padding:9px 10px;border-radius:11px;background:#f5f7f1;font-size:12px;line-height:1.45;color:#617162}.result-details li::before{content:"✓";color:#6a9d2b;font-weight:950;margin-right:6px}
.safety-note{margin:10px 22px 0;font-size:12px;line-height:1.45;text-align:center;color:#879486}

/* Reminders */
.reminders-screen{padding-bottom:calc(18px + env(safe-area-inset-bottom));background:linear-gradient(160deg,#ffe58c 0%,#fff2ba 38%,#f8f8ee 100%);overflow-y:auto}
.reminders-header{display:grid;grid-template-columns:40px 1fr 40px;text-align:center}.reminders-header>div{display:flex;flex-direction:column}.reminders-header small{font-size:12px;letter-spacing:.12em;color:#877640;font-weight:900}.reminders-header strong{font-size:12px;margin-top:2px}
.reminders-hero{padding:20px 20px 10px}.reminders-hero p{margin:0 0 6px;font-size:12px;font-weight:900;letter-spacing:.14em;color:#7c6d39}.reminders-hero h1{margin:0;font-size:36px;line-height:.96;letter-spacing:-.055em}.reminders-hero h1 em{font-style:normal;color:#447332}
.reminders-list{padding:9px 16px;display:flex;flex-direction:column;gap:9px}
.reminder-empty{padding:28px 18px;border-radius:23px;background:rgba(255,255,255,.72);text-align:center}.reminder-empty img{width:115px;height:125px;margin:0 auto;object-fit:contain;filter:drop-shadow(0 15px 12px rgba(79,76,35,.15))}.reminder-empty h2{font-size:18px;margin:8px 0 4px}.reminder-empty p{font-size:12px;line-height:1.5;color:#7d7c63;margin:0}
.reminder-card{display:grid;grid-template-columns:58px 1fr auto;gap:10px;align-items:center;padding:11px;border-radius:18px;background:#fff;box-shadow:0 9px 24px rgba(95,82,31,.08)}.reminder-card-character{width:56px;height:56px;border-radius:15px;background:var(--card-soft,#eff6dc);display:grid;place-items:center;overflow:hidden}.reminder-card-character img{width:88%;height:88%;object-fit:contain}.reminder-card-copy{display:flex;flex-direction:column;min-width:0}.reminder-card-copy small{font-size:12px;color:#8d8a72}.reminder-card-copy strong{font-size:12px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.reminder-card-copy span{font-size:12px;color:#64725f;margin-top:4px}.reminder-card button{width:31px;height:31px;border:0;border-radius:10px;background:#f4f4eb;color:#7b8376;display:grid;place-items:center}.reminder-card button svg{width:15px;height:15px}
.reminders-start{margin:7px 16px 0;width:calc(100% - 32px)}

/* Sheets / overlays */
.sheet-layer{position:absolute;inset:0;z-index:100;display:flex;align-items:flex-end}
.sheet-scrim{position:absolute;inset:0;border:0;background:rgba(8,27,16,.48);backdrop-filter:blur(3px)}
.bottom-sheet{position:relative;z-index:2;width:100%;max-height:91%;overflow-y:auto;padding:10px 18px calc(18px + env(safe-area-inset-bottom));border-radius:28px 28px 0 0;background:var(--cream);text-align:center;box-shadow:0 -18px 60px rgba(5,25,13,.25);animation:sheet-up .38s cubic-bezier(.2,.85,.25,1) both}
@keyframes sheet-up{from{transform:translateY(100%)}to{transform:none}}
.sheet-handle{display:block;width:42px;height:4px;border-radius:99px;background:#d5ddd1;margin:0 auto 13px}
.sheet-character-wrap{width:92px;height:94px;margin:0 auto 5px;display:grid;place-items:center}.sheet-character-wrap img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 10px 8px rgba(55,83,46,.17))}
.sheet-kicker{display:block;font-size:12px;font-weight:950;letter-spacing:.15em;color:#7d8b7a}.bottom-sheet h2{margin:5px 0 4px;font-size:22px}.bottom-sheet>p{margin:0 auto 14px;max-width:300px;font-size:12px;line-height:1.5;color:#718071}
.date-field{display:block;text-align:left;margin:0 0 10px;padding:10px 12px;border:1px solid #dfe5da;border-radius:15px;background:#fff}.date-field span{display:block;font-size:12px;color:#7c897b;margin-bottom:5px}.date-field input{width:100%;border:0;outline:0;background:transparent;color:var(--ink);font-size:13px;font-weight:800}
.sheet-primary,.sheet-secondary,.sheet-close{width:100%;min-height:45px;border-radius:14px;font-size:12px;font-weight:850}.sheet-primary{border:0;background:var(--bigc-red);color:#fff}.sheet-secondary{margin-top:8px;border:1px solid rgba(18,56,33,.13);background:#fff;color:#376145}.sheet-close{margin-top:5px;border:0;background:none;color:#849083}
.journey-sheet{text-align:left}.journey-sheet>.sheet-kicker,.journey-sheet>h2{text-align:center}.journey-list{display:flex;flex-direction:column;gap:8px;margin:15px 0 4px}.journey-row{display:grid;grid-template-columns:35px 52px 1fr;gap:9px;align-items:center;padding:9px;border:1px solid #e3e8df;border-radius:16px;background:#fff}.journey-row.active{border:2px solid var(--row-accent);background:var(--row-soft);box-shadow:0 9px 22px rgba(43,76,40,.08)}.journey-row-number{width:33px;height:33px;border-radius:11px;background:var(--row-soft);color:var(--row-accent);display:grid;place-items:center;font-size:12px;font-weight:950}.journey-row img{width:49px;height:53px;object-fit:contain}.journey-row-copy{display:flex;flex-direction:column}.journey-row-copy small{font-size:12px;font-weight:900;letter-spacing:.08em;color:#7e8a7c}.journey-row-copy strong{font-size:12px;margin-top:2px}.journey-row-copy p{margin:3px 0 0;font-size:12px;line-height:1.4;color:#697969}
.toast{position:absolute;z-index:120;left:50%;bottom:24px;transform:translateX(-50%);min-width:180px;max-width:88%;padding:10px 13px;border-radius:15px;background:#173c28;color:#fff;display:flex;align-items:center;gap:9px;box-shadow:0 16px 40px rgba(0,0,0,.27);animation:toast-in .3s ease both}.toast span{width:25px;height:25px;border-radius:50%;display:grid;place-items:center;background:var(--bigc-green);font-size:12px;font-weight:950}.toast p{margin:0;font-size:12px;font-weight:800}@keyframes toast-in{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}
.bootstrap-error{position:absolute;z-index:200;inset:20px;top:50%;height:max-content;transform:translateY(-50%);padding:20px;border-radius:22px;background:#fff;text-align:center;box-shadow:var(--shadow)}.bootstrap-error strong{font-size:16px}.bootstrap-error p{font-size:12px;color:#687768}

/* Product motion */
.motion-avocado{animation:avocado-idle 3.1s ease-in-out infinite}
.motion-banana{animation:banana-idle 2.6s ease-in-out infinite}
.motion-tomato{animation:tomato-idle 2.8s ease-in-out infinite}
.motion-apple{animation:apple-idle 2.7s ease-in-out infinite}
.motion-carrot{animation:carrot-idle 3s ease-in-out infinite}
@keyframes avocado-idle{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-7px) rotate(1.8deg)}}
@keyframes banana-idle{0%,100%{transform:translateY(0) rotate(-2deg)}35%{transform:translateY(-8px) rotate(2deg)}70%{transform:translateY(-2px) rotate(-1deg)}}
@keyframes tomato-idle{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-5px) scale(1.025)}}
@keyframes apple-idle{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-6px) rotate(2.5deg)}}
@keyframes carrot-idle{0%,100%{transform:translateY(0) rotate(0)}45%{transform:translateY(-8px) rotate(-1.5deg)}70%{transform:translateY(-2px) rotate(1deg)}}

/* Result emotion classes */
.result-character.stage-0{filter:grayscale(.12) saturate(.82) drop-shadow(0 20px 13px rgba(44,76,44,.2));animation-duration:4.4s}
.result-character.stage-1{animation-duration:3.4s}
.result-character.stage-2{animation:celebrate 1.7s ease-in-out infinite}
.result-character.stage-3{animation:sway-soft 3.2s ease-in-out infinite}
.result-character.stage-4{filter:saturate(.72) brightness(.9) drop-shadow(0 20px 13px rgba(44,76,44,.18));animation:droop 3.8s ease-in-out infinite}
@keyframes celebrate{0%,100%{transform:translateY(0) rotate(0)}35%{transform:translateY(-10px) rotate(-2deg)}65%{transform:translateY(-4px) rotate(2deg)}}
@keyframes sway-soft{0%,100%{transform:rotate(-1.2deg)}50%{transform:rotate(1.5deg) translateY(-3px)}}
@keyframes droop{0%,100%{transform:rotate(-1deg) translateY(1px)}50%{transform:rotate(2deg) translateY(5px)}}

/* Responsive */
@media(max-height:700px){
  .welcome-hero{min-height:245px;padding-top:10px}
  .welcome-copy h1{font-size:30px}
  .welcome-copy>p:last-child{margin-top:9px;font-size:12px;line-height:1.42}
  .character-speech{top:19%;right:52px;font-size:12px;width:122px;max-width:122px}
  .picker-dock{padding-top:11px;padding-bottom:calc(10px + env(safe-area-inset-bottom))}
  .product-choice{height:67px}.product-choice-media{height:42px;width:42px}.primary-action{min-height:56px}
  .analysis-visual{flex-basis:185px}.analysis-card{padding-top:12px}.analysis-copy h1{font-size:23px}
}

@media(max-width:370px){
  .welcome-copy h1{font-size:29px}
  .welcome-copy>p:last-child{width:78%;font-size:12px}
  .product-picker{gap:4px}.product-choice{border-radius:14px}.product-choice strong{font-size:12px}
  .picker-heading h2{font-size:16px}
  .camera-hints span{font-size:12px;padding:5px 6px}
  .scan-assistant{max-width:82%}
}

@media(min-width:620px){
  body{padding:20px;background:radial-gradient(circle at 50% 20%,#709d75,#395d42 72%)}
  .app-frame{min-height:780px;height:min(920px,calc(100vh - 40px));border-radius:34px;box-shadow:0 40px 100px rgba(0,0,0,.32)}
  .screen{min-height:100%;height:100%;overflow-y:auto}
  .welcome-hero{min-height:310px}
  .scan-screen{overflow:hidden}.camera-viewport{min-height:0}
  .sheet-layer,.toast,.bootstrap-error{position:absolute}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}
}

/* v0.4.1 copy hierarchy + strict validation states */
.live-status.offline{background:rgba(255,255,255,.55);color:#8d4b3f}
.live-status.offline i{background:#d95a47;box-shadow:0 0 0 4px rgba(217,90,71,.12)}
.analysis-error[data-error-code="PRODUCT_MISMATCH"],
.analysis-error[data-error-code="IMAGE_NOT_USABLE"],
.analysis-error[data-error-code="PRODUCT_UNCERTAIN"],
.analysis-error[data-error-code="ASSESSMENT_UNCERTAIN"]{border-color:rgba(227,27,35,.22);background:#fff7f5}
.analysis-error button[hidden]{display:none!important}
@media(max-width:390px){
  .welcome-copy h1{font-size:28px}
  .welcome-copy h1 em{font-size:.82em}
  .welcome-copy>p:last-child{font-size:12px;line-height:1.42;width:80%}
}

/* v0.4.1 verification UI */
.analysis-error>small{
  display:block;
  margin:7px auto 10px;
  max-width:310px;
  font-size:12px;
  line-height:1.45;
  color:#768476;
}
.match-verified-chip{
  width:max-content;
  max-width:90%;
  margin:9px auto 0;
  min-height:28px;
  padding:5px 10px 5px 6px;
  border:1px solid rgba(36,92,49,.11);
  border-radius:999px;
  background:rgba(255,255,255,.65);
  color:#315f3d;
  display:flex;
  align-items:center;
  gap:7px;
  box-shadow:0 7px 18px rgba(44,86,43,.05);
}
.match-verified-chip span{
  width:18px;height:18px;border-radius:50%;display:grid;place-items:center;
  background:var(--bigc-green);color:#173b24;font-size:12px;font-weight:950;
}
.match-verified-chip strong{font-size:12px;line-height:1.25}

/* v0.8.1 — camera quality, multi-angle capture, and honest visual-estimation result */
.capture-progress{display:inline-flex;margin-top:6px;padding:4px 8px;border-radius:99px;background:var(--bigc-yellow);color:#173b27;font-size:12px;font-weight:950;letter-spacing:.04em}
.camera-hints span{display:inline-flex;align-items:center;gap:3px;transition:background .2s ease,opacity .2s ease,transform .2s ease}
.camera-hints span b{font:inherit;font-weight:850;white-space:nowrap}
.camera-hints span[data-state="good"]{background:rgba(37,104,62,.92);box-shadow:0 0 0 1px rgba(176,231,91,.32),0 8px 18px rgba(0,0,0,.16)}
.camera-hints span[data-state="good"] i{color:#cfff6b}
.camera-hints span[data-state="warn"]{background:rgba(151,54,34,.9);transform:translateY(-1px)}
.camera-hints span[data-state="warn"] i{color:#ffe36d}
.camera-hints span[data-state="checking"]{opacity:.72}
.camera-hints span[data-state="neutral"]{background:rgba(13,55,36,.76)}
.visual-assessment-area{padding-top:12px}
.visual-stage-title{display:flex;flex-direction:column;align-items:center;margin-top:6px}
.visual-stage-title strong{font-size:42px;line-height:1.02;letter-spacing:-.055em;color:#244c35;font-weight:900}
.visual-stage-title span{margin-top:5px;font-size:12px;letter-spacing:.14em;font-weight:950;color:var(--product-accent)}
.confidence-row{display:flex;align-items:center;justify-content:space-between;max-width:255px;margin:12px auto 5px;font-size:12px;color:#657466}
.confidence-row strong{font-size:14px;color:#244c35}
.confidence-track{width:min(255px,78%);height:7px;margin:0 auto 4px;border-radius:99px;background:#e4e9df;overflow:hidden}
.confidence-track span{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--product-accent),var(--bigc-green));transition:width .6s ease}
.physical-check{margin-top:8px!important;padding:8px 10px;border-radius:12px;background:#f3f6ef;color:#435a48!important;font-size:12px!important;line-height:1.45!important}
.match-verified-chip{width:max-content;max-width:92%;margin:10px auto 0;padding:7px 10px;border-radius:99px;background:rgba(255,255,255,.7);border:1px solid rgba(35,76,53,.1);display:flex;align-items:center;gap:6px;font-size:12px;color:#355d42}
.match-verified-chip span{width:16px;height:16px;border-radius:50%;display:grid;place-items:center;background:var(--bigc-green);color:#fff;font-weight:950}
@media(max-width:380px){
  .camera-hints{left:7%;right:7%;gap:3px}
  .camera-hints span{padding:5px 5px;font-size:12px}
  .visual-stage-title strong{font-size:36px}
}


/* v0.8.1 — Typography & Mobile Readability refinement
   Scope: visual hierarchy, speech bubble, responsive text and spacing only.
   Camera, scan, AI and API behavior are intentionally unchanged. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font-family:var(--font-thai);font-size:var(--text-md);line-height:1.5;font-weight:400}

/* Header */
.app-header{min-height:70px;padding:10px 14px}
.brand-lockup{gap:12px}
.brand-lockup img{width:44px;height:44px;border-radius:13px;box-shadow:0 8px 20px rgba(42,89,21,.18)}
.brand-lockup strong{font-size:clamp(20px,5vw,22px);line-height:1.15;font-weight:800;letter-spacing:.04em;white-space:nowrap}
.brand-lockup small{margin-top:5px;font-size:12px;line-height:1.3;font-weight:600;letter-spacing:.12em;opacity:.68}
.header-actions{gap:7px}
.live-status{height:32px;gap:7px;padding:0 11px;font-size:12px;line-height:1;font-weight:700;letter-spacing:.06em;border-width:1.5px}
.live-status i{width:9px;height:9px;box-shadow:0 0 0 5px rgba(154,211,56,.18)}
.icon-button,.round-button{width:42px;height:42px}
.icon-button svg,.round-button svg{width:22px;height:22px}

/* Welcome hero — same structure, stronger hierarchy */
.welcome-screen{background:
  radial-gradient(circle at 88% 5%,rgba(255,255,255,.62),transparent 27%),
  radial-gradient(circle at 2% 58%,rgba(255,226,111,.22),transparent 27%),
  linear-gradient(155deg,#dcf2c9 0%,#b8e2aa 40%,#78be82 100%)}
.welcome-screen::before{width:360px;height:360px;right:-230px;top:170px;border-color:rgba(255,255,255,.46);box-shadow:0 0 0 42px rgba(255,255,255,.055),0 0 0 96px rgba(255,255,255,.04)}
.welcome-hero{min-height:clamp(320px,48svh,408px);padding:22px 20px 0}
.welcome-copy{max-width:100%}
.eyebrow{margin:0 0 10px;font-size:12px;line-height:1.3;font-weight:700;letter-spacing:.16em;color:#35663d}
.welcome-copy h1{margin:0;font-size:var(--text-hero);line-height:1.08;font-weight:800;letter-spacing:-.025em;text-shadow:0 5px 16px rgba(34,83,47,.09)}
.welcome-copy h1 span{color:#fff}
.welcome-copy h1 em{margin-top:0;font-size:.93em;line-height:1.1;font-weight:800;letter-spacing:-.025em;color:#287d23}
.welcome-copy>p:last-child{width:min(72%,300px);max-width:none;margin:16px 0 0;font-size:clamp(18px,4.5vw,20px);line-height:1.5;font-weight:500;color:#244b31}

.welcome-character-area{right:-3%;bottom:-22px;width:61%;height:67%}
.welcome-character{width:100%;height:100%;filter:drop-shadow(0 25px 20px rgba(34,83,47,.24))}
.character-floor{bottom:1%;width:66%;height:10%;filter:blur(13px)}
.hero-halo--one{width:225px;height:225px;right:-24px;bottom:3%}
.hero-halo--two{width:170px;height:170px;right:4px;bottom:9%}
.character-speech{
  top:42%;right:auto;left:-86px;width:188px;max-width:188px;padding:15px 17px 16px;
  border-radius:25px 25px 7px 25px;background:rgba(255,255,255,.96);color:#204b30;
  font-size:16px;line-height:1.4;font-weight:600;letter-spacing:-.01em;
  box-shadow:0 16px 38px rgba(39,83,44,.17),inset 0 0 0 1px rgba(255,255,255,.8);
  transform:rotate(-1.2deg);overflow-wrap:normal;text-align:center;white-space:normal
}
.character-speech::after{content:"";position:absolute;right:-18px;bottom:17px;width:32px;height:28px;background:#fff;clip-path:polygon(0 0,100% 45%,0 100%);filter:drop-shadow(5px 5px 5px rgba(39,83,44,.07))}
.character-speech span,.character-speech strong{position:relative;z-index:1;display:block}
.character-speech strong{margin:2px 0;color:#287d23;font-size:19px;line-height:1.35;font-weight:700}

/* Product selector */
.picker-dock{padding:16px 16px calc(16px + env(safe-area-inset-bottom));border-radius:32px 32px 0 0;background:rgba(255,254,249,.97);box-shadow:0 -16px 46px rgba(38,79,42,.15)}
.picker-heading{align-items:flex-start;margin-bottom:12px}
.picker-heading span{font-size:12px;line-height:1.3;font-weight:700;letter-spacing:.14em;color:#66816b}
.picker-heading h2{margin:6px 0 0;font-size:clamp(25px,6.5vw,28px);line-height:1.25;font-weight:700;letter-spacing:-.02em}
.picker-heading>strong{display:none}
.product-picker{gap:7px;margin-bottom:14px}
.product-choice{height:92px;padding:6px 3px 7px;border-radius:18px;background:#fbfcf7;justify-content:flex-start;gap:3px}
.product-choice.active{border-width:2px;box-shadow:0 10px 22px rgba(78,123,34,.15);transform:translateY(-2px)}
.product-choice-media{width:49px;height:51px;flex:0 0 auto}
.product-choice-media::after{width:38px;height:8px}
.product-choice strong{display:grid;place-items:center;width:100%;min-height:32px;padding:0 1px;font-size:14px;line-height:1.2;font-weight:600;white-space:normal;overflow:visible;text-overflow:clip;text-align:center;overflow-wrap:anywhere}
.product-choice.active strong{font-weight:700}
.product-choice-check{right:5px;top:5px;width:21px;height:21px;font-size:12px}
.primary-action{min-height:74px;padding:10px 14px;grid-template-columns:48px 1fr 26px;gap:11px;border-radius:22px;box-shadow:0 16px 34px rgba(227,27,35,.24)}
.action-icon{width:48px;height:48px;border-radius:15px}
.action-icon svg{width:26px;height:26px}
.primary-action strong{font-size:20px;line-height:1.2;font-weight:700}
.primary-action small{margin-top:4px;font-size:14px;line-height:1.35;font-weight:500;color:rgba(255,255,255,.84)}
.primary-action>b{font-size:26px}

/* Readability across existing camera / AI / result flow */
.scan-header{height:72px;padding:10px 15px;grid-template-columns:48px 1fr auto}
.scan-product-title small{font-size:12px;line-height:1.3}
.scan-product-title strong{font-size:15px;line-height:1.3}
.camera-live-chip{height:31px;font-size:12px;padding:0 10px}
.scan-instruction{padding:10px 14px;border-radius:17px}
.scan-instruction strong{font-size:17px;line-height:1.25}
.scan-instruction small{font-size:12px;line-height:1.4}
.capture-progress{font-size:12px;padding:5px 9px}
.camera-hints{left:5%;right:5%;gap:5px}
.camera-hints span{justify-content:center;min-width:0;padding:7px 8px;font-size:12px;line-height:1.2}
.scan-assistant{max-width:86%}
.scan-assistant p{font-size:14px;line-height:1.45;font-weight:600;padding:11px 13px}
.camera-control-label{font-size:14px;line-height:1.3}
.privacy-note{max-width:150px;font-size:12px;line-height:1.3;text-align:right}
.camera-fallback p{font-size:14px}
.camera-error p,.error-actions button,.error-actions label{font-size:14px}
.text-button{font-size:14px}

.analysis-copy>p{font-size:12px;line-height:1.3}
.analysis-copy h1{font-size:clamp(29px,7.5vw,34px);line-height:1.18}
.analysis-copy>span{font-size:14px}
.analysis-steps li{grid-template-columns:28px 1fr;gap:10px}
.analysis-steps li i{width:25px;height:25px}
.analysis-steps li strong{font-size:15px;line-height:1.3}
.analysis-steps li small{font-size:12px;line-height:1.35}
.analysis-fact{font-size:13px;line-height:1.55}
.analysis-error strong{font-size:18px}.analysis-error p,.analysis-error>small{font-size:14px;line-height:1.5}.analysis-error button{font-size:14px}

.result-product-heading small,.result-score-area>p,.result-score-area>small,.result-date span,.result-message-card>span,.stage-map-card header small,.result-details summary>span,.safety-note{font-size:12px}
.result-product-heading strong{font-size:15px}
.result-message-card p,.result-details li,.active-stage-summary small{font-size:14px;line-height:1.5}
.primary-result-action strong{font-size:17px}.primary-result-action small{font-size:14px}.secondary-result-action{font-size:15px}
.stage-map-card header button{font-size:14px}.stage-map-step i{font-size:12px}.stage-map-step span{font-size:12px;line-height:1.25}
.active-stage-summary strong{font-size:14px}.result-details summary strong{font-size:15px}
.physical-check,.match-verified-chip,.match-verified-chip strong,.confidence-row{font-size:12px!important}

.reminders-header small,.reminders-hero p,.reminder-card-copy small,.sheet-kicker,.date-field span,.journey-row-copy small{font-size:12px}
.reminders-header strong{font-size:15px}.reminder-empty p,.reminder-card-copy span,.bottom-sheet>p,.journey-row-copy p,.toast p,.bootstrap-error p{font-size:14px;line-height:1.5}
.reminder-card-copy strong,.journey-row-copy strong{font-size:15px}.sheet-primary,.sheet-secondary,.sheet-close{font-size:14px}.date-field input{font-size:17px}

/* Responsive: preserve hierarchy without clipping Thai glyphs */
@media(max-height:700px){
  .app-header{min-height:64px;padding-top:8px;padding-bottom:8px}
  .brand-lockup img{width:42px;height:42px}.brand-lockup strong{font-size:19px}.brand-lockup small{font-size:12px}
  .live-status{height:34px;font-size:12px}.icon-button,.round-button{width:42px;height:42px}
  .welcome-hero{min-height:318px;padding-top:14px}
  .welcome-copy h1{font-size:42px}.welcome-copy>p:last-child{margin-top:12px;font-size:18px;line-height:1.45}
  .character-speech{top:39%;left:-72px;width:174px;max-width:174px;padding:13px 15px;font-size:15px}
  .character-speech strong{font-size:17px}
  .picker-dock{padding-top:14px;padding-bottom:calc(14px + env(safe-area-inset-bottom))}
  .picker-heading{margin-bottom:10px}.picker-heading h2{font-size:25px}
  .product-picker{margin-bottom:12px}.product-choice{height:88px;padding-top:5px}.product-choice-media{height:49px;width:49px}.product-choice strong{font-size:14px;min-height:28px}
  .primary-action{min-height:70px}.action-icon{width:46px;height:46px}.primary-action strong{font-size:19px}.primary-action small{font-size:14px}
}
@media(max-width:360px){
  .app-header{padding-left:12px;padding-right:12px}.brand-lockup{gap:8px}.brand-lockup img{width:42px;height:42px}.brand-lockup strong{font-size:18px}.brand-lockup small{font-size:12px;letter-spacing:.08em}
  .header-actions{gap:6px}.live-status{padding:0 9px;font-size:12px}.icon-button{width:42px;height:42px}
  .welcome-hero{padding-left:16px;padding-right:16px}.welcome-copy h1{font-size:42px}.welcome-copy>p:last-child{font-size:18px;width:82%}
  .character-speech{left:-64px;width:164px;max-width:164px;font-size:15px}.character-speech strong{font-size:17px}
  .picker-dock{padding-left:14px;padding-right:14px}.picker-heading h2{font-size:25px}
  .product-picker{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 1px 7px;gap:7px}.product-picker::-webkit-scrollbar{display:none}
  .product-choice{flex:0 0 76px;scroll-snap-align:start}.product-choice strong{font-size:14px}
}
@media(min-width:620px){
  .app-frame{width:min(100%,480px)}
  .welcome-copy h1{font-size:48px}.welcome-copy>p:last-child{font-size:20px}
}

/* v0.8.1 mobile fit polish */
.header-actions{gap:7px}
@media(max-width:410px){
  .brand-lockup{gap:9px}
  .brand-lockup strong{font-size:20px}
  .brand-lockup small{font-size:12px;letter-spacing:.08em}
  .welcome-copy>p:last-child{width:75%}
  .picker-heading>strong{font-size:13px;padding:7px 10px}
}

/* v0.8.1 final fit calibration for common iPhone widths */
@media(max-width:410px){
  .app-header{padding-left:13px;padding-right:13px}
  .brand-lockup{gap:8px}
  .brand-lockup strong{font-size:20px}
  .brand-lockup small{font-size:12px;letter-spacing:.075em}
  .welcome-copy>p:last-child{width:70%}
  .welcome-character-area{right:-5%;width:60%;height:65%;bottom:-24px}
  .character-speech{top:43%;left:-82px;width:180px;max-width:180px}
  .picker-heading h2{font-size:25px}
  .product-choice strong{font-size:13px}
}

/* ========================================================================== */
/* v0.8.1 — MOBILE LAYOUT FIT, VIEWPORT LOCK & CLEAN PAGE END                 */
/* Based on FRESH_SCAN_MOBILE_LAYOUT_LOCK_BRIEF.md. Functional flow unchanged. */
/* ========================================================================== */
html{
  width:100%;
  height:100%;
  overflow:hidden;
  background:#4c7654;
}
body{
  width:100%;
  height:100%;
  min-height:100dvh;
  padding:0;
  overflow:hidden;
  overscroll-behavior-y:none;
}
.app-frame{
  width:min(100%,460px);
  height:100dvh;
  min-height:100dvh;
  max-height:100dvh;
  overflow:hidden;
}
.screen{
  width:100%;
  height:100%;
  min-height:0;
  max-height:100%;
}
.welcome-screen{
  display:flex;
  flex-direction:column;
  height:100%;
  min-height:0;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior-y:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.welcome-screen::-webkit-scrollbar{display:none}
.app-header--welcome{flex:0 0 auto}
.welcome-hero{
  position:relative;
  flex:1 0 auto;
  min-height:clamp(360px,48dvh,460px);
  padding:20px 20px 24px;
  overflow:hidden;
}
.welcome-copy{
  position:relative;
  z-index:5;
  max-width:100%;
}
.welcome-copy h1{
  max-width:100%;
  margin:0;
  font-size:clamp(38px,9.2vw,44px);
  line-height:1.06;
  font-weight:800;
  letter-spacing:-.02em;
}
.welcome-copy h1 em{
  margin-top:0;
  font-size:.91em;
  line-height:1.08;
  font-weight:800;
  letter-spacing:-.02em;
}
.welcome-copy>p:last-child{
  width:68%;
  max-width:285px;
  margin:15px 0 0;
  font-size:clamp(17px,4.3vw,19px);
  line-height:1.45;
  font-weight:500;
}
.welcome-character-area{
  right:4%;
  bottom:8px;
  width:clamp(180px,42vw,230px);
  height:clamp(220px,49vw,278px);
}
.welcome-character{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center bottom;
}
.character-floor{
  bottom:1%;
  width:62%;
  height:8%;
}
.hero-halo--one{width:205px;height:205px;right:-34px;bottom:4%}
.hero-halo--two{width:154px;height:154px;right:-4px;bottom:10%}
.character-speech{
  top:24%;
  right:auto;
  left:-52%;
  width:min(46vw,180px);
  max-width:180px;
  padding:12px 14px 13px;
  border-radius:23px 23px 7px 23px;
  font-size:14px;
  line-height:1.35;
  font-weight:600;
  transform:rotate(-1deg);
}
.character-speech strong{
  margin:2px 0;
  font-size:16px;
  line-height:1.3;
  font-weight:700;
}
.character-speech::after{
  right:-15px;
  bottom:15px;
  width:27px;
  height:24px;
}
.picker-dock{
  flex:0 0 auto;
  margin-top:8px;
  padding:24px 20px calc(20px + env(safe-area-inset-bottom));
  border-radius:30px 30px 0 0;
}
.picker-heading{margin-bottom:14px}
.product-picker{margin-bottom:0}
.primary-action{
  margin-top:16px;
  margin-bottom:0;
}

/* Short mobile viewports may scroll, but the page still ends immediately after CTA. */
@media(max-height:700px){
  .app-header{min-height:58px;padding-top:7px;padding-bottom:7px}
  .brand-lockup img{width:38px;height:38px}
  .brand-lockup strong{font-size:18px}
  .brand-lockup small{font-size:12px}
  .live-status{height:30px}
  .icon-button,.round-button{width:38px;height:38px}
  .welcome-hero{
    flex:0 0 auto;
    min-height:300px;
    padding:14px 16px 16px;
  }
  .welcome-copy h1{font-size:38px;line-height:1.04}
  .welcome-copy>p:last-child{width:67%;margin-top:11px;font-size:17px;line-height:1.4}
  .welcome-character-area{right:3%;bottom:4px;width:172px;height:208px}
  .character-speech{top:24%;left:-48%;width:158px;max-width:158px;padding:10px 12px;font-size:14px}
  .character-speech strong{font-size:15px}
  .picker-dock{margin-top:0;padding:16px 14px calc(14px + env(safe-area-inset-bottom))}
  .picker-heading{margin-bottom:10px}
  .picker-heading h2{font-size:24px;line-height:1.22}
  .product-picker{margin-bottom:0}
  .product-choice{height:82px}
  .product-choice-media{width:45px;height:47px}
  .primary-action{min-height:66px;margin-top:12px}
  .action-icon{width:44px;height:44px}
  .primary-action strong{font-size:18px}
  .primary-action small{font-size:13px}
}

@media(max-width:360px){
  .welcome-hero{padding-left:15px;padding-right:15px}
  .welcome-copy h1{font-size:38px}
  .welcome-copy>p:last-child{width:72%;font-size:17px}
  .welcome-character-area{right:2%;width:174px;height:218px}
  .character-speech{left:-46%;width:152px;max-width:152px;padding:10px 11px}
  .picker-dock{padding-left:14px;padding-right:14px}
}

@media(min-width:620px){
  body{padding:20px}
  .app-frame{
    width:min(100%,480px);
    height:min(920px,calc(100dvh - 40px));
    min-height:0;
    max-height:calc(100dvh - 40px);
  }
  .screen{height:100%;min-height:0;max-height:100%}
  .welcome-copy h1{font-size:44px}
  .welcome-copy>p:last-child{font-size:19px}
}

@supports not (height:100dvh){
  body{min-height:100vh}
  .app-frame{height:100vh;min-height:100vh;max-height:100vh}
  @media(min-width:620px){
    .app-frame{height:min(920px,calc(100vh - 40px));min-height:0;max-height:calc(100vh - 40px)}
  }
}


/* v0.8.1 visual-balance calibration after real 390×650 / 390×844 render QA */
.character-speech{
  top:28%;
  left:-82%;
  width:min(41vw,158px);
  max-width:158px;
  padding:11px 13px 12px;
}
.picker-dock{margin-top:0}

@media(max-height:700px){
  .welcome-hero{
    flex:1 0 300px;
    min-height:300px;
  }
  .welcome-copy>p:last-child{
    width:56%;
    max-width:220px;
  }
  .welcome-character-area{
    right:2%;
    bottom:3px;
    width:160px;
    height:190px;
  }
  .character-speech{
    top:35%;
    left:-82%;
    width:148px;
    max-width:148px;
    padding:10px 11px;
  }
}

@media(max-width:360px) and (max-height:700px){
  .welcome-copy>p:last-child{width:55%;font-size:16px}
  .welcome-character-area{right:1%;width:152px;height:184px}
  .character-speech{top:36%;left:-82%;width:138px;max-width:138px;font-size:13px}
  .character-speech strong{font-size:14px}
}


/* v0.8.1 — animated picker resilience */
.product-picker{
  display:grid !important;
  visibility:visible !important;
  opacity:1 !important;
  min-height:82px;
}
.product-picker[data-hydration="server-fallback"] .product-choice{
  animation-fill-mode:both;
}
.product-choice-media img{
  display:block;
  visibility:visible;
  opacity:1;
  will-change:transform;
}
.product-choice:nth-child(1) .product-choice-media{animation:picker-arrive .36s ease-out .02s both}
.product-choice:nth-child(2) .product-choice-media{animation:picker-arrive .36s ease-out .07s both}
.product-choice:nth-child(3) .product-choice-media{animation:picker-arrive .36s ease-out .12s both}
.product-choice:nth-child(4) .product-choice-media{animation:picker-arrive .36s ease-out .17s both}
.product-choice:nth-child(5) .product-choice-media{animation:picker-arrive .36s ease-out .22s both}
@keyframes picker-arrive{from{opacity:0;transform:translateY(8px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-height:700px){
  .product-picker{min-height:82px;display:grid !important}
  .picker-dock{overflow:visible}
}
@media(prefers-reduced-motion:reduce){
  .product-choice-media,.product-choice-media img{animation:none!important}
}

@media(max-width:340px){
  .product-picker{
    display:flex !important;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    min-height:92px;
    padding-bottom:4px;
  }
  .product-choice{flex:0 0 76px;scroll-snap-align:start}
}

/* v0.8.1 — FRESH MATCH EXTENSION
   Central product-stage mapping, front-end filtering only, no additional AI call. */
.fresh-match-card{
  margin:14px 16px calc(22px + env(safe-area-inset-bottom));
  padding:20px;
  border:1px solid rgba(23,51,37,.08);
  border-radius:28px;
  background:linear-gradient(150deg,#fffef9 0%,#f7faef 100%);
  box-shadow:0 14px 34px rgba(25,64,38,.09);
  color:#173325;
}
.fresh-match-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.fresh-match-heading small{display:block;margin-bottom:4px;font-size:12px;line-height:1.3;font-weight:800;letter-spacing:.14em;color:#6c8467}
.fresh-match-heading h3{margin:0;font-size:clamp(22px,5.8vw,27px);line-height:1.2;font-weight:800;letter-spacing:-.025em}
.fresh-match-timing{flex:0 0 auto;max-width:120px;padding:8px 11px;border-radius:999px;background:#eaf5d3;color:#4a741c;font-size:12px;line-height:1.2;font-weight:800;text-align:center}
.fresh-match-headline{margin:13px 0 0;font-size:18px;line-height:1.45;font-weight:650;color:#2d5632}
.fresh-match-subheadline{margin:4px 0 0;font-size:14px;line-height:1.5;font-weight:500;color:#667763}
.fresh-match-safety{display:grid;grid-template-columns:38px 1fr;gap:10px;align-items:flex-start;margin-top:14px;padding:13px;border-radius:18px;background:#fff3d6;border:1px solid #f1d78a}
.fresh-match-safety>span{width:34px;height:34px;border-radius:12px;display:grid;place-content:center;background:#ffd45e;color:#624c00;font-size:18px;font-weight:900}
.fresh-match-safety strong{display:block;font-size:14px;line-height:1.35}
.fresh-match-safety p{margin:3px 0 0;font-size:12px;line-height:1.45;color:#70633c}
.fresh-match-safety[data-state="caution"]{background:#f4f8e9;border-color:#d8e5b8}
.fresh-match-safety[data-state="caution"]>span{background:#91c82e;color:#173325}
.fresh-match-safety[data-state="caution"] p{color:#52644f}
.fresh-match-safety[data-state="blocked"]{background:#fff0f0;border-color:#edb9bc}
.fresh-match-safety[data-state="blocked"]>span{background:#e31b23;color:#fff}
.fresh-match-safety[data-state="blocked"] p{color:#854e50}
.fresh-match-content{margin-top:15px}
.fresh-match-hero-recipe{min-height:150px}
.fresh-recipe-card{display:flex;align-items:center;gap:12px;border:1px solid #e3e9dc;border-radius:20px;background:#fff;padding:13px;box-shadow:0 7px 18px rgba(28,56,26,.05)}
.fresh-recipe-card.hero{min-height:148px;padding:18px;background:linear-gradient(135deg,#173e29 0%,#2c6639 100%);border-color:transparent;color:#fff;box-shadow:0 14px 28px rgba(20,65,34,.18)}
.fresh-recipe-emoji{flex:0 0 auto;width:58px;height:58px;border-radius:19px;display:grid;place-content:center;background:#eff6df;font-size:31px}
.fresh-recipe-card.hero .fresh-recipe-emoji{width:76px;height:76px;border-radius:24px;background:rgba(255,255,255,.14);font-size:41px;box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.fresh-recipe-copy{min-width:0;display:flex;flex-direction:column;gap:3px}
.fresh-recipe-copy>strong{font-size:15px;line-height:1.3;font-weight:750}
.fresh-recipe-card.hero .fresh-recipe-copy>strong{font-size:21px;line-height:1.25}
.fresh-recipe-stars{font-size:12px;line-height:1.3;color:#f2bc25;letter-spacing:.03em}
.fresh-recipe-stars small{font-size:12px;color:#6d7d6b;letter-spacing:0}
.fresh-recipe-card.hero .fresh-recipe-stars small{color:#dce7d8}
.fresh-recipe-copy p{margin:2px 0 0;font-size:12px;line-height:1.45;color:#7c8a79}
.fresh-recipe-card.hero .fresh-recipe-copy p{color:#dce8dc}
.fresh-match-mini-recipes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:9px}
.fresh-match-mini-recipes .fresh-recipe-card{min-height:112px;display:flex;flex-direction:column;align-items:flex-start;gap:7px}
.fresh-match-mini-recipes .fresh-recipe-emoji{width:42px;height:42px;border-radius:14px;font-size:23px}
.fresh-match-mini-recipes .fresh-recipe-copy>strong{font-size:14px}
.fresh-match-more{width:100%;margin-top:10px;border:1px solid #d6dfcf;border-radius:15px;background:#f6f8f1;color:#31552e;padding:12px 14px;font-size:14px;font-weight:750}
.fresh-match-more:active{transform:scale(.99)}
.fresh-match-filter-block{margin-top:17px}
.fresh-match-filter-block>strong{display:block;margin-bottom:9px;font-size:16px;line-height:1.35}
.fresh-match-filters{display:flex;gap:7px;overflow-x:auto;padding:1px 1px 5px;scrollbar-width:none;overscroll-behavior-x:contain}
.fresh-match-filters::-webkit-scrollbar{display:none}
.fresh-match-filters button{flex:0 0 auto;min-height:38px;border:1px solid #dfe5d8;border-radius:999px;background:#fff;color:#557052;padding:8px 12px;font-size:12px;font-weight:700;white-space:nowrap}
.fresh-match-filters button.active,.fresh-match-filters button[aria-pressed="true"]{border-color:#8bc525;background:#ecf7d8;color:#3f6f17;box-shadow:0 4px 12px rgba(103,151,24,.12)}
.fresh-guru-tip{display:grid;grid-template-columns:40px 1fr;gap:10px;align-items:flex-start;margin-top:17px;padding:14px;border-radius:20px;background:linear-gradient(145deg,#f0f7df,#e5f1cf);border:1px solid #d8e6c3}
.fresh-guru-tip>span{width:38px;height:38px;border-radius:13px;display:grid;place-content:center;background:#fff;font-size:20px;box-shadow:0 4px 12px rgba(30,65,27,.07)}
.fresh-guru-tip small{display:block;font-size:12px;line-height:1.3;font-weight:850;letter-spacing:.11em;color:#608231}
.fresh-guru-tip p{margin:3px 0 0;font-size:14px;line-height:1.5;font-weight:550;color:#294d2b}
.fresh-match-empty{min-height:128px;padding:20px;border:1px dashed #d8dfd1;border-radius:20px;background:#fafbf7;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.fresh-match-empty>span{font-size:30px}.fresh-match-empty strong{font-size:15px;margin-top:7px}.fresh-match-empty p{margin:4px 0 0;font-size:12px;color:#7b8879}
.fresh-match-sheet{max-height:min(82dvh,760px);overflow-y:auto}
.fresh-match-sheet>p{margin:7px 0 13px;font-size:14px;line-height:1.5;color:#6f7c6c}
.fresh-match-all-recipes{display:grid;gap:9px;margin-top:10px}
.fresh-match-all-recipes .fresh-recipe-card.sheet{min-height:88px}
.sheet-filters{margin-bottom:6px}

@media(max-width:360px){
  .fresh-match-card{margin-left:12px;margin-right:12px;padding:16px;border-radius:24px}
  .fresh-match-heading h3{font-size:21px}
  .fresh-match-headline{font-size:17px}
  .fresh-recipe-card.hero{min-height:136px;padding:15px}
  .fresh-recipe-card.hero .fresh-recipe-emoji{width:66px;height:66px;font-size:36px}
  .fresh-recipe-card.hero .fresh-recipe-copy>strong{font-size:18px}
  .fresh-match-mini-recipes{grid-template-columns:1fr}
  .fresh-match-mini-recipes .fresh-recipe-card{min-height:82px;flex-direction:row;align-items:center}
}

@media(prefers-reduced-motion:reduce){
  .fresh-match-more{transition:none}
}
.fresh-match-summary{margin:4px 0 0;font-size:14px;line-height:1.5;color:#71806e}