:root{
  --bg:#efeee2; --bg2:#fffef9; --card:#fffef9; --card2:#f3f1e6;
  --line:#e7e3d2; --txt:#1c2415; --mut:#6f7560; --mut2:#9aa088;
  --bad:#e23b3b; --poor:#f08418; --good:#46c93a; --great:#16a34a;
  --accent:#7bbf2a; --accent2:#4e9e1f;
  --shadow:0 12px 40px rgba(0,0,0,.45);
  --r:20px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
body{
  font-family:'Plus Jakarta Sans','Inter',system-ui,sans-serif;
  background:var(--bg); color:var(--txt);
  overscroll-behavior:none; -webkit-font-smoothing:antialiased;
}
.app{max-width:480px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column;position:relative;background:radial-gradient(140% 80% at 50% -10%,#fbfbf2 0%,var(--bg) 55%)}
html:not(.sv-native-ok) .app{visibility:hidden;pointer-events:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
.hidden{display:none!important}

/* ---------- Top bar ---------- */
.topbar{display:flex;align-items:center;gap:10px;padding:calc(env(safe-area-inset-top, 0px) + 4px) 18px 8px;position:fixed;top:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;z-index:20;background:rgba(233,241,214,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(170,190,140,.45)}
.logo{display:flex;align-items:center;gap:5px;font-weight:800;letter-spacing:-.5px;font-size:28px}
.logo-txt{display:flex;flex-direction:column;line-height:1.05;margin-left:-10px}
.logo-txt small{display:inline-flex;align-items:center;gap:4px;align-self:flex-start;margin-top:9px;padding:4.5px 12px;border-radius:999px;font-size:10.5px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:#6d4e0a;background:linear-gradient(160deg,#f9e7a8,#e5b854 60%,#d9a83e);box-shadow:0 2px 8px rgba(190,145,50,.45), inset 0 1px 0 rgba(255,255,255,.55);animation:goldPulse 1.4s ease-in-out infinite;cursor:pointer}
@keyframes goldPulse{0%,100%{filter:brightness(1);box-shadow:0 2px 8px rgba(190,145,50,.45), inset 0 1px 0 rgba(255,255,255,.55)}50%{filter:brightness(1.16);box-shadow:0 2px 16px rgba(244,196,72,.8), inset 0 1px 0 rgba(255,255,255,.55)}}
@keyframes topBlink{0%,100%{opacity:1}50%{opacity:.32}}
.pref-btn{display:flex;flex-direction:column;align-items:center;gap:4px;background:none;border:none;color:var(--mut);max-width:80px;cursor:pointer;padding:2px}
.pref-btn svg{width:23px;height:23px}
.pref-btn small{font-size:9px;font-weight:800;line-height:1.1;text-align:center;color:#3f7d22;text-transform:uppercase;letter-spacing:.3px}
.pref-btn:active{opacity:.6}
.logo .mark{display:block;flex:0 0 auto}
.logo .mark img{height:70px;width:auto;display:block}
.logo-txt > span{color:#f4650f}
.logo span b{color:#3f8d22}
.topbar .spacer{flex:1}
.icon-btn{width:40px;height:40px;border-radius:12px;background:var(--card);display:grid;place-items:center;color:var(--mut);border:1px solid var(--line)}
.icon-btn:active{transform:scale(.93)}

/* ---------- Views ---------- */
.view{position:fixed;top:0;left:0;right:0;bottom:calc(64px + max(env(safe-area-inset-bottom, 0px), 10px));overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;display:flex;flex-direction:column;padding:calc(env(safe-area-inset-top, 0px) + 96px) 18px 28px;animation:fade .25s ease;z-index:1}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- Home / hero ---------- */
.hero{text-align:center;padding:18px 6px 8px}
.hero h1{font-size:30px;line-height:1.08;letter-spacing:-1px;font-weight:800;margin-bottom:8px;
  background:linear-gradient(160deg,#e8bc4e 0%,#c9962e 30%,#f4d878 52%,#c9962e 74%,#a87f2c 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#c9962e;
  filter:drop-shadow(0 1px 1px rgba(120,85,20,.25))}
.hero p{color:var(--mut);font-size:15px;line-height:1.5;max-width:320px;margin:0 auto}
.scan-cta{margin:26px auto 6px;width:100%;display:flex;flex-direction:column;gap:12px}
.btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:17px;border-radius:16px;font-weight:700;font-size:16px;transition:transform .08s}
.btn:active{transform:scale(.975)}
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#04140a;box-shadow:0 10px 26px rgba(123,191,42,.32)}
.btn-ghost{background:var(--card);border:1px solid var(--line);color:var(--txt)}
.btn svg{width:20px;height:20px}

.tiers{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:24px}
.tier{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px;display:flex;align-items:center;gap:11px}
.dot{width:14px;height:14px;border-radius:50%;flex-shrink:0;box-shadow:0 0 12px currentColor}
.tier b{font-size:14px;display:block}
.tier small{color:var(--mut);font-size:11.5px}
.tier{cursor:pointer;min-height:44px;-webkit-tap-highlight-color:transparent;transition:border-color .18s ease,box-shadow .18s ease}
.tier[aria-expanded="true"]{border-color:#d9b23a;box-shadow:0 0 10px rgba(217,178,58,.35)}
#tierDim{position:fixed;inset:0;background:rgba(18,24,12,.30);z-index:60;opacity:0;transition:opacity .18s ease}
#tierDim.on{opacity:1}
.tier-pop{position:fixed;z-index:61;width:min(252px,calc(100vw - 36px));background:#fff;border:1.5px solid #d9b23a;border-radius:18px;padding:14px 17px;
  box-shadow:0 0 16px rgba(217,178,58,.32),0 10px 26px rgba(0,0,0,.16)}
.tier-pop b{display:block;font-size:15.5px;font-weight:800;margin-bottom:3px}
.tier-pop p{margin:0;font-size:13px;color:#26301f;line-height:1.45;font-weight:500}
.tier-pop .tp-arrow{position:absolute;width:13px;height:13px;background:#fff;transform:rotate(45deg)}
.tier-pop.tp-below .tp-arrow{top:-7.5px;border-left:1.5px solid #d9b23a;border-top:1.5px solid #d9b23a}
.tier-pop.tp-above .tp-arrow{bottom:-7.5px;border-right:1.5px solid #d9b23a;border-bottom:1.5px solid #d9b23a}
.tier-pop.pop-in{animation:tierPopIn .2s ease both}
.tier-pop.pop-out{animation:tierPopOut .16s ease both}
@keyframes tierPopIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
@keyframes tierPopOut{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.97)}}
@media (prefers-reduced-motion:reduce){.tier-pop.pop-in,.tier-pop.pop-out{animation:none}#tierDim{transition:none}}
.tier-strip-wrap{position:relative;margin:16px 0 2px;padding-top:84px}
.tier-strip{display:flex;gap:8px;justify-content:center}
.ts-chip{flex:1;max-width:96px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:9px 4px 8px;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;min-height:44px;
  opacity:.18;transition:opacity .3s ease,border-color .2s ease,box-shadow .2s ease;-webkit-tap-highlight-color:transparent}
.ts-chip .dot{width:11px;height:11px;border-radius:50%}
.ts-chip b{font-size:10.5px;font-weight:800;line-height:1}
.ts-chip small{font-size:9px;color:var(--mut)}
.ts-chip.on{opacity:1;border-color:#d9b23a;box-shadow:0 0 10px rgba(217,178,58,.35)}
.ts-bubble{position:absolute;top:0;left:0;z-index:5;width:min(242px,86%);background:#fff;border:1.5px solid #d9b23a;border-radius:16px;padding:11px 15px;
  box-shadow:0 0 14px rgba(217,178,58,.3),0 8px 20px rgba(0,0,0,.14)}
.ts-bubble b{font-size:14px;font-weight:800;display:block;margin-bottom:2px}
.ts-bubble p{font-size:12px;color:#26301f;margin:0;line-height:1.42;font-weight:500}
.ts-bubble .tp-arrow{position:absolute;bottom:-7.5px;width:13px;height:13px;background:#fff;transform:rotate(45deg);border-right:1.5px solid #d9b23a;border-bottom:1.5px solid #d9b23a}
.ts-bubble.pop-in{animation:tierPopIn .2s ease both}
@media (prefers-reduced-motion:reduce){.ts-bubble.pop-in{animation:none}.ts-chip{transition:none}}

/* Type polish (Cursor ship-both lock, 2026-08-11): quieter section labels with a short
   gold hairline; tighter vertical rhythm below the fold. */
.section-title{font-size:10.5px;text-transform:uppercase;letter-spacing:.14em;color:var(--mut2);font-weight:700;margin:16px 4px 8px}
.section-title::after{content:"";display:block;width:28px;height:2px;margin-top:5px;border-radius:2px;background:linear-gradient(90deg,#c9a227,rgba(201,162,39,0))}

/* ---------- History ---------- */
.hist-item{display:flex;align-items:center;gap:13px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:11px 13px;margin-bottom:9px}
.hist-item:active{background:var(--card2)}
.hist-thumb{width:46px;height:46px;border-radius:11px;background:var(--card2);object-fit:contain;flex-shrink:0;border:1px solid var(--line)}
.hist-info{flex:1;min-width:0}
.hist-info b{font-size:14.5px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hist-info small{color:var(--mut);font-size:12px}
.score-chip{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-weight:800;font-size:16px;flex-shrink:0;color:#04140a}
.empty{text-align:center;color:var(--mut2);padding:34px 20px;font-size:14px}

/* ---------- Scanner ---------- */
#scanView{padding:0;position:relative;background:#000}
#reader{width:100%;height:100dvh}
#reader video{object-fit:cover!important;width:100%!important;height:100dvh!important}
.scan-overlay{position:absolute;inset:0;pointer-events:none;display:flex;flex-direction:column;align-items:center;justify-content:center}
.scan-frame{width:84%;max-width:340px;aspect-ratio:2/1;border-radius:18px;position:relative}
.scan-frame::before,.scan-frame::after,.scan-frame .c3,.scan-frame .c4{content:"";position:absolute;width:34px;height:34px;border:3px solid var(--accent);border-radius:4px}
.scan-frame::before{top:-2px;left:-2px;border-right:none;border-bottom:none}
.scan-frame::after{top:-2px;right:-2px;border-left:none;border-bottom:none}
.scan-frame .c3{bottom:-2px;left:-2px;border-right:none;border-top:none}
.scan-frame .c4{bottom:-2px;right:-2px;border-left:none;border-top:none}
.laser{position:absolute;left:6%;right:6%;height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent);box-shadow:0 0 12px var(--accent);animation:scan 2.2s ease-in-out infinite}
@keyframes scan{0%,100%{top:8%}50%{top:90%}}
.scan-hint{position:absolute;bottom:120px;left:0;right:0;text-align:center;color:#fff;font-size:14px;text-shadow:0 2px 8px #000;padding:0 30px}
.scan-actions{position:absolute;bottom:34px;left:0;right:0;display:flex;gap:12px;justify-content:center;padding:0 24px;pointer-events:auto}
.scan-back{position:absolute;top:16px;left:16px;pointer-events:auto;z-index:5}

/* ---------- Manual entry ---------- */
.field{display:flex;gap:9px;margin-top:14px}
.field input{flex:1;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:15px;color:var(--txt);font-size:16px;font-family:inherit;outline:none}
.field input:focus{border-color:var(--accent)}
.field button{padding:0 20px;border-radius:14px;background:var(--accent);color:#04140a;font-weight:700}

/* ---------- Result ---------- */
.result-hero{display:flex;flex-direction:column;align-items:center;text-align:center;padding:14px 0 6px}
.prod-img{width:120px;height:120px;border-radius:20px;object-fit:contain;background:#fff;padding:8px;border:1px solid var(--line);margin-bottom:14px}
.prod-mono{display:grid;place-items:center;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;font-size:40px;font-weight:800;letter-spacing:-1px;padding:0;border:none}
.prod-name{font-size:21px;font-weight:800;line-height:1.18;letter-spacing:-.4px;max-width:340px}
.prod-brand{color:var(--mut);font-size:14px;margin-top:3px;text-transform:capitalize}

.gauge{margin:22px auto 6px;width:170px;height:170px;position:relative}
.gauge svg{transform:rotate(-90deg)}
.gauge .num{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.gauge .num b{font-size:46px;font-weight:800;line-height:1}
.gauge .num small{color:var(--mut);font-size:12px;letter-spacing:.5px}
.verdict{display:inline-flex;align-items:center;gap:9px;font-weight:800;font-size:19px;padding:9px 20px;border-radius:30px;margin:8px auto 4px}

.breakdown{margin-top:22px}
.bd-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:4px 16px;margin-bottom:14px}
.bd-row{display:flex;align-items:flex-start;gap:11px;padding:11px 0;border-bottom:1px solid var(--line)}
.bd-row:last-child{border-bottom:none}
.bd-icn{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex-shrink:0;font-size:15px}
.bd-icn.pos{background:rgba(22,163,74,.13);color:var(--great)}
.bd-icn.neg{background:rgba(226,59,59,.13);color:var(--bad)}
.bd-icn.neu{background:rgba(154,160,136,.16);color:var(--mut)}
.bd-txt{flex:1}
.bd-txt b{font-size:15px;font-weight:700;letter-spacing:-.25px;display:block}
.bd-txt small{color:var(--mut);font-size:12.5px;line-height:1.42;display:block;margin-top:2px}
.bd-tag{font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;white-space:nowrap}

.pref-row{display:flex;align-items:center;justify-content:space-between;padding:15px 0;border-bottom:1px solid var(--line)}
.pref-row:last-child{border-bottom:none}
.pref-row b{font-weight:500;font-size:15px}
.switch{width:50px;height:30px;border-radius:30px;background:var(--card2);border:1px solid var(--line);position:relative;transition:.2s;flex-shrink:0}
.switch span{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:.2s}
.switch.on{background:var(--accent);border-color:var(--accent)}
.switch.on span{left:23px}
.pref-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.pref-badge{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;padding:7px 12px;border-radius:30px}
.pref-badge svg{width:14px;height:14px}
.allergy-banner{background:rgba(226,59,59,.09);border:1.5px solid rgba(226,59,59,.4);border-radius:14px;padding:13px 16px;margin:14px 0 4px;font-size:14.5px;line-height:1.45;color:var(--bad)}
.allergy-banner div{font-size:12px;color:var(--mut);margin-top:5px;font-weight:500}
/* Why box = the score story: eyebrow, Fraunces tier title + tabular score head, body,
   link, separated legal. Tier color carried by data-tier — the top ring/pill untouched. */
.why-box{background:linear-gradient(180deg,var(--bg2) 0%,var(--card2) 100%);border:1px solid var(--line);border-radius:16px;padding:13px 14px 11px;margin-top:12px;font-size:14.5px;line-height:1.5;color:#353c2e}
.why-eyebrow{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent2);margin-bottom:5px}
.why-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.why-t{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:24px;letter-spacing:-.45px;line-height:1;color:var(--txt)}
.why-n{font-variant-numeric:tabular-nums;font-size:12px;font-weight:700;white-space:nowrap;color:var(--mut)}
.why-body{margin-top:8px;font-size:14.5px;line-height:1.5;font-weight:500;color:#353c2e}
.why-box[data-tier="Bad"]{border-color:rgba(226,59,59,.35)}
.why-box[data-tier="Bad"] .why-t,.why-box[data-tier="Bad"] .why-eyebrow{color:var(--bad)}
.why-box[data-tier="Bad"] .why-n{color:#a32626}
.why-box[data-tier="Poor"]{border-color:rgba(240,132,24,.35)}
.why-box[data-tier="Poor"] .why-t,.why-box[data-tier="Poor"] .why-eyebrow{color:var(--poor)}
.why-box[data-tier="Poor"] .why-n{color:#a05708}
.why-box[data-tier="Good"]{border-color:rgba(70,201,58,.35)}
.why-box[data-tier="Good"] .why-t,.why-box[data-tier="Good"] .why-eyebrow{color:var(--good)}
.why-box[data-tier="Good"] .why-n{color:#2e7d1d}
/* Excellent = gold + dark green, never flat good-green (Boss + Cursor lock) */
.why-box[data-tier="Excellent"]{border-color:rgba(232,185,60,.45);background:radial-gradient(90% 60% at 100% 0%,rgba(244,196,72,.18),transparent 50%),linear-gradient(180deg,#fffcf6 0%,#f5f1e4 100%);box-shadow:0 1px 0 rgba(255,255,255,.95) inset,0 8px 20px rgba(40,50,20,.04),0 0 0 1px rgba(232,185,60,.2)}
.why-box[data-tier="Excellent"] .why-eyebrow{color:var(--great)}
.why-box[data-tier="Excellent"] .why-t{background:linear-gradient(160deg,#2fbf62 6%,#16a34a 45%,#0e7a35 78%,#c9a227 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.why-box[data-tier="Excellent"] .why-n{color:#0e7a35}
.why-box[data-tier="Excellent"] .why-n::before{content:"★ ";color:#f4c448}
.why-box b{color:var(--txt)}
.ing-row{display:flex;align-items:flex-start;gap:11px;padding:11px 0;border-bottom:1px solid var(--line)}
.ing-row:last-child{border-bottom:none}
.ing-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;margin-top:6px}
.ing-body{flex:1;min-width:0}
.ing-name{font-size:14px;text-transform:capitalize;line-height:1.35;display:block}
.ing-name em{color:var(--mut2);font-style:normal;font-size:12px}
.ing-row.bad .ing-name{font-weight:600}
.ing-why{display:block;font-size:12.5px;color:var(--bad);margin-top:2px;line-height:1.4}
.add-detail{margin:2px 0 12px 42px;border-left:2px solid var(--line);padding-left:13px}
.add-item{display:flex;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line);cursor:pointer}
.add-item:last-child{border-bottom:none}
.add-item:active{opacity:.6}
.add-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.add-body{flex:1;min-width:0}
.add-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.add-head b{font-size:13.5px;font-weight:600}
.add-tag{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.3px}
.add-fn{display:block;color:var(--mut2);font-size:11.5px;margin-top:1px}
.add-chev{color:var(--mut2);font-size:20px;flex-shrink:0}
/* additive detail bottom sheet */
.sheet-wrap{position:fixed;inset:0;z-index:120;background:rgba(20,26,16,.45);display:none;align-items:flex-end;justify-content:center}
.sheet-wrap.show{display:flex;animation:fade .2s ease}
.sheet{width:100%;max-width:480px;background:var(--bg2);border-radius:24px 24px 0 0;padding:10px 20px calc(28px + env(safe-area-inset-bottom));box-shadow:0 -10px 40px rgba(0,0,0,.25);animation:sheetup .28s cubic-bezier(.22,1,.36,1)}
@keyframes sheetup{from{transform:translateY(100%)}to{transform:none}}
.sheet-grab{width:40px;height:4px;border-radius:4px;background:var(--line);margin:4px auto 12px}
.sheet-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.sheet-top b{font-size:13px;text-transform:uppercase;letter-spacing:1px;color:var(--mut2)}
.sheet-x{width:36px;height:36px;border-radius:50%;background:var(--card2);color:var(--mut);font-size:14px}
.amHead{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.amDot{width:14px;height:14px;border-radius:50%;flex-shrink:0}
.amHead b{font-size:18px;font-weight:800;letter-spacing:-.3px}
.amFn{font-size:12.5px;color:var(--mut);margin-top:1px}
.amTag{margin-left:auto;font-size:11px;font-weight:800;padding:5px 11px;border-radius:20px;white-space:nowrap}
.amWhy{font-size:14.5px;line-height:1.55;color:var(--txt)}
.amNote{margin-top:14px;background:rgba(226,59,59,.1);color:var(--bad);font-size:13px;font-weight:600;padding:11px 13px;border-radius:12px;line-height:1.4}
.amSrc{margin-top:14px;color:var(--mut2);font-size:11.5px;line-height:1.4}
/* buy links */
.buy-row{display:flex;gap:10px}
.buy-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;border-radius:14px;font-weight:700;font-size:14px;text-decoration:none}
.buy-btn svg{width:18px;height:18px}
.buy-amz{background:linear-gradient(135deg,#ff9a2e,#f47b14);color:#1a0f02;box-shadow:0 6px 16px rgba(244,123,20,.32)}
.buy-web{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#04140a;box-shadow:0 6px 16px rgba(123,191,42,.3)}
.buy-btn:active{transform:scale(.97)}
/* top rated */
.topseg{display:flex;gap:4px;background:var(--card2);border:1px solid var(--line);border-radius:14px;padding:4px;margin:0 0 16px}
.topseg-b{flex:1;padding:11px 3px;border-radius:10px;font-weight:700;font-size:12.5px;letter-spacing:-.2px;color:var(--mut);white-space:nowrap}
.topseg-b.on{background:var(--bg2);color:var(--accent2);box-shadow:0 2px 8px rgba(0,0,0,.07)}
.tcat{display:flex;align-items:center;gap:13px;background:var(--card);border:1px solid var(--line);border-radius:15px;padding:11px 14px;margin-bottom:9px;cursor:pointer}
.tcat:active{transform:scale(.99)}
.tcat-ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;flex-shrink:0;color:#fff}
.tcat-ic svg{width:25px;height:25px;stroke-width:1.9}
.tcat-im{width:54px;height:54px;border-radius:13px;overflow:hidden;flex-shrink:0;display:grid;place-items:center;border:1px solid var(--line)}
.tcat-im img{width:100%;height:100%;object-fit:cover;display:block}
.tcat-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.tcat-tx b{font-size:15px;font-weight:700;line-height:1.25}
.tcat-tx small{color:var(--mut2);font-size:11.5px;line-height:1.3}
.tcat{padding:13px 14px;border-radius:17px}
.tcat b{flex:1;font-size:15px;font-weight:600}
.tcat .chev{color:var(--mut2);font-size:20px}
.trank{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:15px;padding:11px 12px;margin-bottom:9px;cursor:pointer}
.trank:active{transform:scale(.99)}
.trank-n{font-size:17px;font-weight:800;color:var(--mut2);min-width:20px;text-align:center;flex-shrink:0}
.trank-img{width:50px;height:50px;border-radius:11px;object-fit:contain;background:#fff;border:1px solid var(--line);flex-shrink:0}
.trank-mono{display:grid;place-items:center;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;font-size:17px;font-weight:800;border:none}
.hist-mono{display:grid;place-items:center;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;font-size:15px;font-weight:800}
.trank-info{flex:1;min-width:0}
.trank-info b{font-size:14.5px;display:block;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.trank-info small{color:var(--mut);font-size:12px}
.trank-score{display:flex;flex-direction:column;align-items:center;flex-shrink:0}
.trank-chip{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-weight:800;font-size:15px;color:#fff}
.trank-tier{font-size:8.5px;margin-top:2px;font-weight:700;text-transform:uppercase;letter-spacing:.3px}
.row-chev{color:var(--mut2);font-size:15px;width:14px;text-align:center;flex-shrink:0;margin-left:2px}
.nbar-wrap{padding:4px 14px 14px 42px}
.nbar{margin-top:6px}
.nbar-scale{position:relative;margin-top:24px}
.nbar-track{display:flex;height:7px;border-radius:5px;overflow:hidden}
.nbar-track>span{flex:1}
/* The value pin: number bubble + pointer, sitting ABOVE the bar. It lives outside
   .nbar-track because that element clips its children — the old triangle was drawn
   inside it and was never visible on a phone. */
.nbar-mark{position:absolute;bottom:6px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:1px;pointer-events:none;z-index:2}
.nbar-pin{width:12px;height:12px;border-radius:50%;background:#2a3324;border:2.5px solid var(--bg2);box-shadow:0 1px 4px rgba(0,0,0,.28)}
.nbar-mark i{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid #2a3324}
.nbar-ticks{display:flex;justify-content:space-between;font-size:10px;color:var(--mut2);margin-top:5px;font-variant-numeric:tabular-nums}
.nbar-rec{font-size:12px;color:var(--mut);margin-top:9px;line-height:1.4}
.nutri-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-top:6px}
.nutri{background:var(--card2);border-radius:12px;padding:11px 13px}
.nutri small{color:var(--mut);font-size:11px;display:block}
.nutri b{font-size:16px}

.disclaimer{color:var(--mut2);font-size:11.5px;line-height:1.5;text-align:center;margin:24px 8px 0;padding-top:18px;border-top:1px solid var(--line)}
.disclaimer a{color:var(--mut)}

/* ---------- Loading / states ---------- */
.loader{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:70px 0;color:var(--mut)}
.spin{width:46px;height:46px;border:4px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:rot 1s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}
.alt-loading{display:flex;align-items:center;gap:12px;color:var(--mut);font-size:13.5px;padding:14px 16px;background:var(--card);border:1px solid var(--line);border-radius:14px}
.alt-empty{color:var(--mut);font-size:13.5px;line-height:1.5;padding:14px 16px;background:var(--card);border:1px solid var(--line);border-radius:14px}
.fav-btn.on{color:var(--accent);border-color:var(--accent)}
.fav-btn.on svg path{fill:var(--accent)}
.acct-card{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px}
.acct-avatar{width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));display:grid;place-items:center;font-weight:800;font-size:22px;color:#04140a;flex-shrink:0}
.acct-list{margin-top:14px;background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.acct-row{display:flex;justify-content:space-between;align-items:center;width:100%;padding:15px 16px;border-bottom:1px solid var(--line);font-size:15px;font-weight:500;color:var(--txt)}
.acct-row:last-child{border-bottom:none}
.acct-row:active{background:var(--card2)}
.acct-row .chev{color:var(--mut2);font-size:20px}
.add-photos{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:6px}
.photo-slot{position:relative;aspect-ratio:1;border:2px dashed var(--line);border-radius:16px;background-size:cover;background-position:center;display:grid;place-items:center;cursor:pointer;overflow:hidden;background-color:var(--card)}
.photo-slot.filled{border-style:solid}
.ph-inner{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  color:var(--mut);text-align:center;padding:8px;width:100%;height:100%;
  background-size:cover;background-position:center}
/* Numbered so the ORDER is obvious, and sized so the side of the package is the thing you read
   first — the old "＋ / Front photo" gave equal weight to a plus sign and the instruction. */
.ph-step{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:var(--accent);color:#fff;font-size:13px;font-weight:800;line-height:1;margin-bottom:2px}
.ph-title{font-size:11.5px;font-weight:800;letter-spacing:.04em;color:var(--txt);line-height:1.25}
.ph-hint{font-size:10.5px;line-height:1.3;color:var(--mut2)}
/* Once filled, the tile still names its side — two look-alike photos with no labels is exactly
   how a front shot ends up in the ingredients slot unnoticed. */
.ph-badge{position:absolute;left:8px;bottom:8px;padding:4px 8px;border-radius:8px;
  background:rgba(0,0,0,.66);color:#fff;font-size:9.5px;font-weight:800;letter-spacing:.08em}
.add-photo-step{margin:10px 0 0;font-size:12.5px;line-height:1.45;color:var(--mut);text-align:center}
.add-photo-step.next{color:#8a5a12;font-weight:600}
.add-photo-step.done{color:var(--accent-d,#1a9e5f);font-weight:600}
.add-area{width:100%;margin-top:12px;min-height:110px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;color:var(--txt);font-family:inherit;font-size:15px;line-height:1.5;resize:vertical;outline:none}
.add-area:focus{border-color:var(--accent)}
/* Nutrition read from the label photo, shown for confirmation before it becomes a public score.
   Rendered only when a panel was actually found — never an empty form asking to be filled in. */
.add-nutri{margin-top:12px;padding:14px;background:var(--card);border:1px solid var(--line);border-radius:14px}
.an-head{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--mut2);margin-bottom:10px}
.an-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:9px}
.an-cell{display:flex;flex-direction:column;gap:4px;font-size:11px;font-weight:700;
  letter-spacing:.03em;text-transform:uppercase;color:var(--mut2)}
.an-cell input{min-height:44px;padding:9px 11px;border:1px solid var(--line);border-radius:11px;
  background:var(--card2);color:var(--txt);font-family:inherit;font-size:15px;outline:none}
.an-cell input:focus{border-color:var(--accent)}
.an-note{margin:10px 0 0;font-size:12px;line-height:1.45;color:var(--mut)}
.seg{display:flex;gap:8px;margin-top:12px}
.seg-b{flex:1;padding:12px;border-radius:12px;background:var(--card);border:1px solid var(--line);color:var(--mut);font-weight:600;font-size:14px}
.seg-b.on{background:var(--accent);border-color:var(--accent);color:#04140a}
.notfound{text-align:center;padding:50px 20px}
.notfound .big{font-size:54px;margin-bottom:10px}
.notfound h3{font-size:20px;margin-bottom:8px}
.notfound p{color:var(--mut);font-size:14px;line-height:1.5;margin-bottom:20px}

/* ---------- Bottom nav ---------- */
/* Luxury green gradient nav — gold-rimmed floating pill (Boss's reference #5) */
.nav{position:fixed;bottom:max(env(safe-area-inset-bottom, 0px), 10px);left:50%;transform:translateX(-50%);width:calc(100% - 24px);max-width:450px;display:flex;align-items:center;border-radius:999px;padding:3px 8px;z-index:30;border:1.5px solid transparent;
  background:
    radial-gradient(130% 170% at 50% -40%, rgba(120,175,60,.30) 0%, rgba(36,55,21,0) 55%) padding-box,
    linear-gradient(180deg,rgba(34,51,15,.80),rgba(43,67,26,.80) 45%,rgba(24,38,16,.84)) padding-box,
    linear-gradient(160deg,#f2d78a,#c89a3e 38%,#f7e3a1 62%,#a87f2c) border-box;
  backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);
  box-shadow:0 10px 26px rgba(8,16,4,.35), inset 0 1px 0 rgba(255,255,255,.09);
  transition:opacity .3s ease, transform .3s ease}
.nav.nav-hide{opacity:0;transform:translateX(-50%) translateY(140%);pointer-events:none}
.nav button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:#c9d0c1;font-size:9px;font-weight:600;position:relative;padding:3px 0 4px;min-height:44px;z-index:1;overflow:hidden;border-radius:14px}
.nav button svg{width:21px;height:21px;transition:transform .18s ease;
  filter:drop-shadow(0 2px 2.5px rgba(0,0,0,.55)) drop-shadow(0 -0.5px 0.5px rgba(255,255,255,.28))}
.nav button:active svg{transform:scale(.88)}
.nav button.active{color:#a5e34b}
.nav button.active svg{transform:translateY(-2px) scale(1.18);
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.6)) drop-shadow(0 0 7px rgba(150,225,70,.65))}
.nav button.active::after{content:"";position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:20px;height:3px;border-radius:3px;background:#8fd82f}
.nav .scan-fab{flex:0 0 auto;margin:0 14px;transform:none;position:relative;overflow:visible}
.nav .scan-fab .ring{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;color:#132408;border:2.5px solid transparent;
  background:
    radial-gradient(circle at 33% 24%, #96d054 0%, #55852a 46%, #23390e 100%) padding-box,
    linear-gradient(160deg,#f6dd92,#c1913a 45%,#f7e3a1 75%,#a87f2c) border-box;
  box-shadow:0 0 0 3px rgba(140,220,60,.15), 0 0 16px 4px rgba(140,220,60,.32), inset 0 2px 3px rgba(255,255,255,.3), inset 0 -2px 4px rgba(0,0,0,.35)}
.nav .scan-fab .ring svg{filter:drop-shadow(0 2px 2px rgba(0,0,0,.4))}
.nav .scan-fab:active .ring{transform:scale(.93)}
.nav .scan-fab .ring{transition:transform .15s ease}
.nav .scan-fab svg{width:22px;height:22px}

/* accessibility: respect users who turn off motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}


/* ---- custom native scanner (camera renders BEHIND the webview) ---- */
html.sv-scanning, html.sv-scanning body{background:transparent !important}
body.sv-scanning > :not(#svScanOverlay){visibility:hidden !important}
#svScanOverlay{position:fixed;inset:0;z-index:9985;display:flex;flex-direction:column;align-items:center;justify-content:space-between;visibility:visible}
#svScanOverlay .top{margin-top:calc(env(safe-area-inset-top,0px) + 30px);text-align:center}
#svScanOverlay .t1{color:#fff;font-weight:800;font-size:25px;letter-spacing:-.4px;text-shadow:0 2px 14px rgba(0,0,0,.6)}
#svScanOverlay .t2{color:rgba(255,255,255,.88);font-size:13px;font-weight:600;margin-top:5px;text-shadow:0 1px 8px rgba(0,0,0,.55)}
#svScanOverlay .win{position:relative;width:86vw;max-width:380px;aspect-ratio:1.9/1}
#svScanOverlay .ck{position:absolute;width:40px;height:40px;border:4px solid #7bdf3f;filter:drop-shadow(0 1px 6px rgba(0,0,0,.45))}
#svScanOverlay .ck.tl{top:0;left:0;border-right:0;border-bottom:0;border-radius:10px 0 0 0}
#svScanOverlay .ck.tr{top:0;right:0;border-left:0;border-bottom:0;border-radius:0 10px 0 0}
#svScanOverlay .ck.bl{bottom:0;left:0;border-right:0;border-top:0;border-radius:0 0 0 10px}
#svScanOverlay .ck.br{bottom:0;right:0;border-left:0;border-top:0;border-radius:0 0 10px 0}
#svScanOverlay .beam{position:absolute;left:6%;right:6%;top:12%;height:2.5px;border-radius:3px;background:linear-gradient(90deg,transparent,#8dff4a 18%,#eaffd8 50%,#8dff4a 82%,transparent);box-shadow:0 0 14px 3px rgba(125,223,63,.55);animation:svBeam 1.6s ease-in-out infinite alternate}
@keyframes svBeam{from{top:10%}to{top:88%}}
#svScanOverlay .coach{min-height:40px;display:flex;align-items:center;justify-content:center;margin-top:-8px}
#svScanOverlay .coach.on{background:rgba(0,0,0,.55);backdrop-filter:blur(6px);color:#fff;font-size:13.5px;font-weight:600;padding:10px 18px;border-radius:999px;animation:fade .3s ease;max-width:86vw;text-align:center}
#svScanOverlay .coach b{color:#a5f16b}
#svScanOverlay .bottom{margin-bottom:calc(env(safe-area-inset-bottom,0px) + 34px);display:flex;flex-direction:column;align-items:center;gap:14px}
#svScanOverlay .torch{width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.16);backdrop-filter:blur(6px);color:#fff;font-size:22px;border:1px solid rgba(255,255,255,.35)}
#svScanOverlay .cancel{background:rgba(255,255,255,.94);color:#1c2415;font-weight:800;font-size:15px;padding:13px 44px;border-radius:999px;box-shadow:0 8px 22px rgba(0,0,0,.3)}


/* iOS native: Capacitor contentInset:"always" already pushes the webview below the
   status bar. env(safe-area-inset-top) is STILL non-zero there, so keeping it doubles
   the top gap. Platform class (set once at boot) strips only the TOP safe-area on iOS.
   Android + web stay full-bleed and keep env(). */

/* Instagram-style tap glow — blooms from the exact touch point */
.nav .tapglow{position:absolute;width:18px;height:18px;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle, #ffe89a 0%, rgba(250,200,80,.85) 35%, rgba(230,170,50,.4) 60%, transparent 75%);
  box-shadow:0 0 18px 6px rgba(255,205,80,.55);
  transform:translate(-50%,-50%) scale(1);animation:tapGlow .85s ease-out forwards}
@keyframes tapGlow{0%{opacity:1;transform:translate(-50%,-50%) scale(1)}55%{opacity:.85}100%{opacity:0;transform:translate(-50%,-50%) scale(14)}}

/* toast */
.toast{position:fixed;bottom:96px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--card2);border:1px solid var(--line);color:var(--txt);padding:12px 18px;border-radius:30px;font-size:13.5px;font-weight:600;opacity:0;transition:.3s;z-index:99999;box-shadow:var(--shadow);pointer-events:none;max-width:90%}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---- trial gate (first-open screen) — one-screen fit, no scroll ---- */
#trialGate{overscroll-behavior:none}
@media (max-height:779px){ #trialGate{overflow-y:auto !important;justify-content:flex-start !important} }
.gate-hero{display:grid;grid-template-columns:1fr auto;gap:8px;width:100%;max-width:400px;align-items:start;text-align:left}
.gate-brand{display:flex;flex-direction:column;align-items:flex-start}
.gate-leaf{width:36px;height:31px;color:var(--accent2)}
.gate-mark2{width:44px;height:44px;border-radius:11px;box-shadow:0 6px 16px rgba(78,158,31,.18)}
.gate-word{margin-top:4px;font-weight:800;font-size:12.5px;letter-spacing:3px;color:#22301c}
.gate-tag{color:var(--mut);font-size:10.5px;margin-top:1px}
.gate-h1{font-family:'Fraunces',Georgia,serif;font-weight:700;font-size:clamp(23px,7vw,30px);line-height:1.12;letter-spacing:-.4px;color:#22301c;margin:14px 0 0}
.gate-h1 em{font-style:italic;color:#4e8d2f}
.gate-sub{color:var(--mut);font-size:12.5px;line-height:1.55;margin:10px 0 0;max-width:205px}
.gate-proof{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,254,.55);border:1px solid rgba(210,214,190,.6);border-radius:999px;padding:3px 11px 3px 4px;margin-top:10px;backdrop-filter:blur(4px)}
.gate-avs{display:flex}
.gate-avs img{width:21px;height:21px;border-radius:50%;border:1.5px solid #fff;object-fit:cover;margin-left:-6px}
.gate-avs img:first-child{margin-left:0}
.gate-proof small{display:block;color:#4a5442;font-weight:600;font-size:10.5px;line-height:1.35;text-align:left;white-space:nowrap}
.gate-phwrap{position:relative;justify-self:end;margin-top:0}
.gate-glow{position:absolute;inset:0;border-radius:50%;background:radial-gradient(closest-side,rgba(190,225,150,.5),transparent 72%)}
.gate-sprig{position:absolute;right:0;bottom:20px;width:48px;height:72px;color:#7fae52;opacity:.85;transform:rotate(12deg)}
.gate-phimg{position:relative;width:clamp(150px,min(42vw,21dvh),192px);height:auto;display:block;filter:drop-shadow(0 14px 24px rgba(20,40,20,.24))}
.gate-feats{display:flex;gap:0;align-self:stretch;min-width:0;max-width:100%;overflow-x:auto;background:var(--card);border:1px solid var(--line);border-radius:15px;margin-top:8px;padding:9px 2px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.gate-feats::-webkit-scrollbar{display:none}
.gf{flex:0 0 100px;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 7px;border-right:1px solid var(--line)}
.gf:last-child{border-right:0}
.gf i{width:35px;height:35px;border-radius:50%;background:rgba(123,191,42,.13);color:var(--accent2);display:flex;align-items:center;justify-content:center}
.gf i svg{width:15px;height:15px}
.gf b{font-size:11px;margin-top:6px;color:var(--txt);line-height:1.2}
.gf span{font-size:10px;color:var(--mut);line-height:1.3;margin-top:2px}
.gate-chev{margin:2px 0;color:#a9bd8a;font-size:12px;line-height:1}
.gate-offer{background:var(--card);border:1px solid var(--line);border-radius:20px;box-shadow:0 14px 34px rgba(20,40,20,.08);padding:16px 16px;width:100%;max-width:385px}
.go-eyebrow{font-size:10.5px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:#4e8d2f}
.go-big{font-family:'Fraunces',Georgia,serif;font-weight:700;font-size:clamp(23px,6.6vw,28px);color:#3f8d22;margin-top:4px;letter-spacing:-.3px;display:flex;align-items:center;justify-content:center;gap:7px}
.go-big svg{width:15px;height:15px;color:#7bbf2a;flex:none}
.go-then{font-size:18px;color:var(--txt);margin-top:6px;font-weight:700}
.go-then b{font-weight:800}
.go-mo{display:flex;align-items:center;justify-content:center;gap:9px;font-size:13px;font-weight:600;color:var(--mut);margin-top:3px}
.go-mo b{color:#3f8d22;font-weight:800}
.go-mo:before,.go-mo:after{content:"";height:1px;width:30px;background:var(--line)}
.go-mo b{color:#3f8d22}
.gate-cta{max-width:100%;margin-top:12px;font-size:15.5px;padding:15px 18px;min-height:50px;position:relative;background:linear-gradient(135deg,#57a626,#3e7b1f);box-shadow:0 10px 22px rgba(63,125,34,.32)}
.cta-arr{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;font-size:14px;line-height:1}
.gate-offer .btn-ghost{margin-top:8px !important;padding:13px 18px;font-size:14.5px;min-height:46px}
.gate-trust{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px;font-size:10px;font-weight:700;color:var(--mut)}
.gate-trust span{display:flex;align-items:center;gap:3px}
.gate-trust em{font-style:normal;width:13px;height:13px;border-radius:50%;background:rgba(123,191,42,.16);color:#3f8d22;display:inline-flex;align-items:center;justify-content:center;font-size:7.5px}
.gate-legal{color:var(--mut);font-size:9.5px;line-height:1.5;max-width:360px;margin-top:6px}

#splash{position:fixed;inset:0;z-index:200;background:
  radial-gradient(90% 60% at 85% 10%,rgba(244,101,15,.10),transparent 55%),
  radial-gradient(100% 70% at 10% 95%,rgba(123,191,42,.14),transparent 50%),
  #fff;display:flex;align-items:center;justify-content:center;transition:opacity .45s ease}
.sv-web-fallback{width:min(380px,calc(100% - 36px));text-align:center;color:#1c2415;font-family:'Plus Jakarta Sans',system-ui,sans-serif}
.sv-wf-visual{position:relative;height:210px;margin:0 auto 8px;display:flex;align-items:center;justify-content:center}
.sv-wf-glow{position:absolute;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(123,191,42,.3) 0%,rgba(244,101,15,.08) 45%,transparent 70%);animation:svWfPulse 5.5s ease-in-out infinite}
.sv-wf-phone{position:relative;z-index:2;width:118px;background:#0e1318;border-radius:22px;padding:6px;box-shadow:0 24px 48px rgba(20,40,20,.28),0 0 0 1px #232a31;transform:rotate(-2deg);animation:svWfFloat 6s ease-in-out infinite}
.sv-wf-phone img{display:block;width:100%;height:auto;border-radius:17px}
.sv-wf-chip{position:absolute;z-index:3;right:8%;bottom:18%;display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.95);border:1px solid #e6ebe0;border-radius:12px;padding:8px 10px;box-shadow:0 10px 24px rgba(20,40,20,.12);animation:svWfChip 5.2s ease-in-out infinite}
.sv-wf-chip b{display:block;font-size:12.5px;font-weight:800;color:#0f1a12;line-height:1.1}
.sv-wf-chip small{display:block;font-size:10.5px;font-weight:600;color:#6f7560;margin-top:1px}
.sv-wf-ring{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800;font-size:12px;background:linear-gradient(145deg,#7bbf2a,#3c7d16);flex:0 0 auto}
.sv-wf-mark{width:44px;height:44px;border-radius:12px;margin:4px auto 10px;display:block}
.sv-web-fallback h1{font-size:26px;font-weight:800;letter-spacing:-.5px;margin-bottom:8px;color:#0f1a12}
.sv-web-fallback p{color:#6f7560;line-height:1.55;margin-bottom:20px;font-size:14.5px}
.sv-web-fallback a{display:flex;min-height:48px;align-items:center;justify-content:center;margin:10px 0;border-radius:13px;background:#11181d;color:#fff;font-weight:800;text-decoration:none}
.sv-web-fallback a.sv-wf-and{background:linear-gradient(135deg,#57a626,#3e7b1f)}
.sv-web-fallback a.sv-wf-site{background:transparent;color:#6f7560;min-height:40px;font-weight:600;font-size:13.5px;margin-top:4px}
@keyframes svWfFloat{0%,100%{transform:rotate(-2deg) translateY(0)}50%{transform:rotate(-2deg) translateY(-8px)}}
@keyframes svWfPulse{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.08);opacity:1}}
@keyframes svWfChip{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@media (prefers-reduced-motion:reduce){.sv-wf-phone,.sv-wf-glow,.sv-wf-chip{animation:none}}
.splash-stage{position:relative;width:64%;max-width:300px;animation:scPop .55s cubic-bezier(.22,1,.36,1) both}
.splash-logo{width:100%;display:block}
/* green scan line sweeps down over the logo */
.splash-scan{position:absolute;left:-7%;right:-7%;top:0;height:5px;border-radius:6px;
  background:linear-gradient(90deg,rgba(46,201,90,0),#2ecb5a 30%,#5fe07e 50%,#2ecb5a 70%,rgba(46,201,90,0));
  box-shadow:0 0 22px 5px rgba(46,201,90,.65);opacity:0;animation:scScan 1.05s ease-in-out .45s forwards}
.sc-cnr{position:absolute;width:20px;height:20px;border:3px solid #2ecb5a;opacity:0;animation:scCnr .3s ease .35s forwards}
.sc-cnr.tl{top:-8px;left:-8px;border-right:0;border-bottom:0;border-radius:4px 0 0 0}
.sc-cnr.tr{top:-8px;right:-8px;border-left:0;border-bottom:0;border-radius:0 4px 0 0}
.sc-cnr.bl{bottom:-8px;left:-8px;border-right:0;border-top:0;border-radius:0 0 0 4px}
.sc-cnr.br{bottom:-8px;right:-8px;border-left:0;border-top:0;border-radius:0 0 4px 0}
.splash-stage.boom{animation:scBoom .5s cubic-bezier(.5,0,.7,0) forwards}
@keyframes scPop{0%{opacity:0;transform:scale(.84)}100%{opacity:1;transform:scale(1)}}
@keyframes scScan{0%{top:-2%;opacity:0}12%{opacity:1}88%{opacity:1}100%{top:101%;opacity:0}}
@keyframes scCnr{from{opacity:0}to{opacity:.9}}
@keyframes scBoom{0%{transform:scale(1)}55%{transform:scale(.94)}100%{transform:scale(1.7);opacity:0}}

/* ---- C2: dynamic color allowlists (TIERS / additive levels / statuses) ---- */
.ta-c.ta-c.ta-c{text-align:center}
[data-tier-fg="excellent"]{color:#16a34a}[data-tier-fg="good"]{color:#46c93a}[data-tier-fg="poor"]{color:#f08418}[data-tier-fg="bad"]{color:#e23b3b}
[data-tier-bg="excellent"]{background:#16a34a}[data-tier-bg="good"]{background:#46c93a}[data-tier-bg="poor"]{background:#f08418}[data-tier-bg="bad"]{background:#e23b3b}
.verdict[data-tier="excellent"]{color:#16a34a;background:rgba(22,163,74,.13)}
.verdict[data-tier="good"]{color:#46c93a;background:rgba(70,201,58,.13)}
.verdict[data-tier="poor"]{color:#f08418;background:rgba(240,132,24,.13)}
.verdict[data-tier="bad"]{color:#e23b3b;background:rgba(226,59,59,.13)}
.verdict[data-tier="excellent"] .dot{color:#16a34a;background:#16a34a}
.verdict[data-tier="good"] .dot{color:#46c93a;background:#46c93a}
.verdict[data-tier="poor"] .dot{color:#f08418;background:#f08418}
.verdict[data-tier="bad"] .dot{color:#e23b3b;background:#e23b3b}
.bd-row.row-mid{align-items:center}.bd-row.row-click{cursor:pointer}
.bd-icn[data-lv="good"]{background:rgba(22,163,74,.13);color:#16a34a}
.bd-icn[data-lv="mid"]{background:rgba(240,132,24,.14);color:#f08418}
.bd-icn[data-lv="bad"]{background:rgba(226,59,59,.13);color:#e23b3b}
.dot.dot-lv{width:11px;height:11px}
.dot-lv[data-lv="good"]{background:#16a34a;color:#16a34a}
.dot-lv[data-lv="mid"]{background:#f08418;color:#f08418}
.dot-lv[data-lv="bad"]{background:#e23b3b;color:#e23b3b}
.amDot[data-lv],.add-dot[data-lv]{background:#c79a16}
.amDot[data-lv="high"],.add-dot[data-lv="high"]{background:#e23b3b}
.amDot[data-lv="moderate"],.add-dot[data-lv="moderate"]{background:#f08418}
.amTag[data-lv],.add-tag[data-lv]{color:#c79a16}
.amTag[data-lv="high"],.add-tag[data-lv="high"]{color:#e23b3b}
.amTag[data-lv="moderate"],.add-tag[data-lv="moderate"]{color:#f08418}
.amTag[data-lv]{background:rgba(199,154,22,.14)}
.amTag[data-lv="high"]{background:rgba(226,59,59,.14)}
.amTag[data-lv="moderate"]{background:rgba(240,132,24,.14)}
.pref-badge[data-st]{color:#9aa088;background:rgba(154,160,136,.16)}
.pref-badge[data-st="ok"]{color:#16a34a;background:rgba(22,163,74,.12)}
.pref-badge[data-st="warn"]{color:#e23b3b;background:rgba(226,59,59,.12)}
.pref-badge[data-st="may"]{color:#f08418;background:rgba(240,132,24,.12)}
.pref-badge[data-st="facility"]{color:#8a7a45;background:rgba(138,122,69,.12)}
.gdot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:9px;flex:none;background:#9aa088}
.gdot[data-g="ok"]{background:#16a34a}.gdot[data-g="mid"]{background:#f08418}.gdot[data-g="warn"]{background:#e23b3b}
.ing-dot[data-risk="high"]{background:var(--bad)}.ing-dot[data-risk="med"]{background:var(--poor)}.ing-dot[data-risk="none"]{background:var(--mut2)}
.bd-tag[data-kind="pos"]{color:var(--great);background:rgba(22,163,74,.14)}
.bd-tag[data-kind="neg"]{color:var(--bad);background:rgba(226,59,59,.14)}
.bd-tag[data-kind="neu"]{color:var(--mut);background:rgba(154,160,136,.14)}
.ov-demo.ov-demo.ov-demo{position:fixed;inset:0;z-index:180;background:radial-gradient(140% 80% at 50% -10%,#fbfbf2 0%,var(--bg) 55%);display:flex;flex-direction:column;justify-content:center;align-items:center;padding:32px 26px;text-align:center;animation:fade .3s ease}

.sup-chip{display:inline-block;font-size:12.5px;font-weight:600;padding:6px 10px;border-radius:9px;margin:3px 6px 3px 0}
.sup-chip[data-lv="verified"]{color:#16a34a;background:rgba(22,163,74,.13)}
.sup-chip[data-lv="claimed"]{color:#8a4a05;background:rgba(240,132,24,.14)}
.sup-chip[data-lv="none"]{color:#6b7060;background:rgba(154,160,136,.16)}
.sup-chip[data-lv="ev_strong"]{color:#1e5f8a;background:rgba(58,130,180,.14)}
.sup-chip[data-lv="ev_limited"]{color:#7a6a1f;background:rgba(196,170,60,.18)}

.ov-webgate.ov-webgate.ov-webgate{position:fixed;inset:0;z-index:9995;background:rgba(20,30,16,.45);display:flex;align-items:flex-end;justify-content:center}
.ov-camsheet.ov-camsheet.ov-camsheet{position:fixed;inset:0;background:rgba(10,14,8,.72);z-index:99998;display:flex;align-items:flex-end;justify-content:center}

.ov-gate.ov-gate.ov-gate{position:fixed;inset:0;z-index:9990;background:radial-gradient(140% 80% at 50% -10%,#fbfbf2 0%,var(--bg) 55%);display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:calc(env(safe-area-inset-top, 0px) + 10px) 20px calc(env(safe-area-inset-bottom, 0px) + 10px);text-align:center;overflow:hidden;height:100dvh}

/* Account, above the gate. Must out-stack .ov-gate (9990) or it is invisible — that was
   the bug. Opaque, because the offer behind it must not read through the form. */
.ov-gauth.ov-gauth.ov-gauth{position:fixed;inset:0;z-index:9995;background:var(--bg);display:flex;flex-direction:column;height:100dvh;padding:env(safe-area-inset-top, 0px) 0 0}
.ov-gauth .ga-bar{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:6px 10px;border-bottom:1px solid var(--line);background:var(--bg)}
/* .btn is width:100% — left alone the back arrow eats the bar and pushes the title off. */
.ov-gauth .ga-back{flex:0 0 44px;width:44px;min-width:44px;height:44px;padding:0;font-size:26px;line-height:1}
.ov-gauth .ga-title{flex:1 1 auto;min-width:0;text-align:center;font-size:16px}
.ov-gauth .ga-spacer{flex:0 0 44px;width:44px}
.ov-gauth .ga-body{flex:1 1 auto;min-width:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:0 18px}
.ov-gauth .ga-foot{flex:0 0 auto;padding:10px 18px calc(10px + env(safe-area-inset-bottom, 0px));border-top:1px solid var(--line);background:var(--bg)}
/* #accountView is a .view: fixed, offset for the app's topbar and bottom nav, neither of
   which exists in here. Inside the sheet it is plain flow content and .ga-body scrolls. */
#accountView[data-gate-auth]{position:static;inset:auto;bottom:auto;z-index:auto;overflow:visible;padding:6px 0 18px;animation:none}
#accountView[data-gate-auth] .hero{display:none}          /* the sheet's own bar titles it */
/* Most of these rows navigate to views that live UNDER the gate, so showing them here
   would be a row that looks live and goes nowhere. But hiding the WHOLE list also hid
   Delete account, and Apple 5.1.1(v) requires in-app account deletion to be reachable —
   for a gated user this sheet is the only screen they have. So hide the navigating rows
   and keep the two that genuinely work from here (.gate-ok): Delete and Help, whose
   overlay is stacked above the gate below. */
#accountView[data-gate-auth] .acct-row:not(.gate-ok){display:none}
/* "Registering is optional" is correct on the normal Account screen and a contradiction
   here, where they were just told an account is required to start the trial. */
#accountView[data-gate-auth] .acct-optional-note{display:none}
.ov-gauth .ga-why{margin:14px 2px 2px;font-size:14px;line-height:1.5;color:var(--mut);text-align:center}

/* ABOVE the trial gate (9990) and above the gate account sheet (.ov-gauth, 9995).
   At its old z-index of 220 this opened invisibly underneath the gate: the tap worked,
   the sheet rendered, and the user saw nothing happen. Numbers are pinned in tests. */
.ov-help.ov-help.ov-help{position:fixed;inset:0;z-index:10000;background:rgba(28,36,21,.45);display:flex;align-items:flex-end;justify-content:center}

.ta-copy.ta-copy.ta-copy{position:fixed;opacity:0}

/* ---- C2 bulk: former inline style attributes (verbatim declarations) ---- */
.sv2-1.sv2-1.sv2-1{cursor:pointer}
.sv2-2.sv2-2.sv2-2{width:44px;height:44px;object-fit:contain;border-radius:50%;box-shadow:0 3px 10px rgba(160,120,40,.25)}
.sv2-3.sv2-3.sv2-3{color:var(--great);background:var(--great)}
.sv2-4.sv2-4.sv2-4{color:var(--good);background:var(--good)}
.sv2-5.sv2-5.sv2-5{color:var(--poor);background:var(--poor)}
.sv2-6.sv2-6.sv2-6{color:var(--bad);background:var(--bad)}
.sv2-7.sv2-7.sv2-7{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.sv2-8.sv2-8.sv2-8{width:auto;padding:13px 22px}
.sv2-9.sv2-9.sv2-9{padding-top:6px}
.sv2-10.sv2-10.sv2-10{font-size:24px}
.sv2-11.sv2-11.sv2-11{display:flex;justify-content:space-between;align-items:center;margin:2px 0 10px}
.sv2-12.sv2-12.sv2-12{display:flex;gap:10px}
.sv2-13.sv2-13.sv2-13{margin:2px 0 10px}
.sv2-14.sv2-14.sv2-14{padding:2px 6px 4px;text-align:left}
.sv2-15.sv2-15.sv2-15{margin:6px 0 0}
.sv2-16.sv2-16.sv2-16{padding:6px 6px 2px;text-align:left;display:flex;justify-content:space-between;align-items:flex-end}
.sv2-17.sv2-17.sv2-17{color:var(--mut);font-size:13px;font-weight:600}
.sv2-18.sv2-18.sv2-18{padding:6px 6px 2px;text-align:left}
.sv2-19.sv2-19.sv2-19{padding:6px 6px 10px;text-align:left}
.sv2-20.sv2-20.sv2-20{font-size:26px}
.sv2-21.sv2-21.sv2-21{margin:2px 0 8px}
.sv2-22.sv2-22.sv2-22{font-size:27px;font-weight:800;letter-spacing:-.8px;margin:0 4px 12px}
.sv2-23.sv2-23.sv2-23{text-align:center}
.sv2-24.sv2-24.sv2-24{font-size:40px;line-height:1;margin-top:6px}
.sv2-25.sv2-25.sv2-25{font-size:20px;letter-spacing:-.4px;display:block;margin-top:10px}
.sv2-26.sv2-26.sv2-26{color:var(--mut);font-size:14px;line-height:1.55;margin:8px auto 18px;max-width:300px}
.sv2-27.sv2-27.sv2-27{margin-top:10px}
.sv2-28.sv2-28.sv2-28{margin-top:14px;color:var(--mut2);font-size:13px;font-weight:600}
.sv2-44.sv2-44.sv2-44{font-size:16px}
.sv2-45.sv2-45.sv2-45{color:var(--mut);font-size:13px;margin-top:2px}
.sv2-46.sv2-46.sv2-46{padding:13px 14px;margin-top:12px;display:flex;gap:10px;align-items:center}
.sv2-47.sv2-47.sv2-47{font-size:19px}
.sv2-48.sv2-48.sv2-48{flex:1;min-width:0}
.sv2-49.sv2-49.sv2-49{font-size:13.5px}
.sv2-50.sv2-50.sv2-50{color:var(--mut);font-size:12px;line-height:1.4}
.sv2-51.sv2-51.sv2-51{padding:8px 12px;font-size:13px;flex:none}
.sv2-52.sv2-52.sv2-52{padding:18px;margin-top:14px;text-align:center}
.sv2-53.sv2-53.sv2-53{font-size:30px}
.sv2-54.sv2-54.sv2-54{font-size:17px;display:block;margin-top:4px}
.sv2-55.sv2-55.sv2-55{color:var(--accent);font-weight:700;font-size:15px;margin-top:6px}
.sv2-56.sv2-56.sv2-56{color:var(--mut);font-size:13px;line-height:1.5;margin:8px 0 14px}
.sv2-57.sv2-57.sv2-57{color:var(--mut2);font-size:11px;margin-top:8px}
.sv2-58.sv2-58.sv2-58{color:var(--mut2);font-size:10px;line-height:1.5;margin-top:10px;text-align:left}
.sv2-59.sv2-59.sv2-59{margin-top:8px;text-align:center;font-size:11px}
.sv2-60.sv2-60.sv2-60{color:var(--mut)}
.sv2-61.sv2-61.sv2-61{color:var(--mut2)}
.sv2-62.sv2-62.sv2-62{padding:16px;margin-top:14px}
.sv2-63.sv2-63.sv2-63{font-size:15px}
.sv2-64.sv2-64.sv2-64{color:var(--mut);font-size:13px;margin:6px 0 12px}
.sv2-65.sv2-65.sv2-65{margin-top:8px}
.sv2-66.sv2-66.sv2-66{color:#e23b3b}
.sv2-40.sv2-40.sv2-40{margin-top:16px}
.sv2-67.sv2-67.sv2-67{padding:18px;text-align:center}
.sv2-68.sv2-68.sv2-68{padding:16px}
.sv2-69.sv2-69.sv2-69{padding:16px;text-align:center;margin-top:14px}
.sv2-70.sv2-70.sv2-70{font-size:14px}
.sv2-71.sv2-71.sv2-71{color:var(--mut);font-size:12.5px;line-height:1.5;margin:6px 0 0}
.sv2-72.sv2-72.sv2-72{margin:12px 0 4px}
.sv2-34.sv2-34.sv2-34{margin-top:18px}
.sv2-73.sv2-73.sv2-73{padding:16px;text-align:center;margin-bottom:16px}
.sv2-74.sv2-74.sv2-74{color:var(--mut);font-size:13px;line-height:1.5;margin:6px 0 0}
.sv2-75.sv2-75.sv2-75{margin-bottom:4px}
.sv2-76.sv2-76.sv2-76{background:var(--card,#fffef9);width:100%;max-width:520px;border-radius:18px 18px 0 0;padding:18px 18px calc(18px + env(safe-area-inset-bottom))}
.sv2-77.sv2-77.sv2-77{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.sv2-78.sv2-78.sv2-78{padding:6px 12px}
.sv2-79.sv2-79.sv2-79{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:10px;font:inherit;background:#fff;color:inherit}
.sv2-80.sv2-80.sv2-80{width:100%}
.sv2-81.sv2-81.sv2-81{width:100%;margin-top:8px}
.sv2-33.sv2-33.sv2-33{margin-top:14px}
.sv2-82.sv2-82.sv2-82{margin-top:6px}
.sv2-83.sv2-83.sv2-83{color:var(--mut2);font-size:11.5px;line-height:1.5;margin-top:12px}
.sv2-84.sv2-84.sv2-84{font-weight:600;font-size:10.5px;color:var(--mut2);text-transform:none;letter-spacing:0}
.sv2-86.sv2-86.sv2-86{transition:stroke-dashoffset 1s cubic-bezier(.22,1,.36,1)}
.sv2-87.sv2-87.sv2-87{background:rgba(240,132,24,.12);border-color:rgba(240,132,24,.4);color:#8a4a05}
.sv2-88.sv2-88.sv2-88{padding:14px 16px;margin-top:12px}
.sv2-89.sv2-89.sv2-89{font-size:13px;letter-spacing:.6px;color:var(--mut);text-transform:uppercase}
.sv2-90.sv2-90.sv2-90{display:flex;align-items:center;font-size:13.5px;color:var(--txt);padding:5px 0}
.sv2-91.sv2-91.sv2-91{font-size:11px;color:var(--mut2);margin-top:8px}
.sv2-92.sv2-92.sv2-92{padding:6px 14px}
.sv2-93.sv2-93.sv2-93{padding:14px 16px;color:var(--mut);font-size:13.5px;line-height:1.55}
.sv2-36.sv2-36.sv2-36{background:var(--great)}
.sv2-94.sv2-94.sv2-94{text-align:center;margin-top:5px}
.sv2-95.sv2-95.sv2-95{display:inline-block;font-size:11.5px;font-weight:600;line-height:1.3;color:var(--mut);background:rgba(154,160,136,.14);padding:5px 11px;border-radius:999px}
.sv2-96.sv2-96.sv2-96{display:inline-block;margin-top:6px;font-size:11px;font-weight:800;color:#8a4a05;background:rgba(240,132,24,.14);padding:3px 10px;border-radius:8px}
.sv2-37.sv2-37.sv2-37{background:var(--good)}
.sv2-38.sv2-38.sv2-38{background:var(--poor)}
.sv2-39.sv2-39.sv2-39{background:var(--bad)}
.sv2-97.sv2-97.sv2-97{display:inline-block;margin-top:8px;color:var(--accent2);font-weight:700;font-size:12.5px;white-space:nowrap;border-bottom:1.5px solid rgba(22,163,74,.4);padding-bottom:1px}
.sv2-98.sv2-98.sv2-98{margin-top:10px;padding-top:9px;border-top:1px solid rgba(28,36,21,.08);font-size:10.5px;line-height:1.45;color:var(--mut2)}
.sv2-99.sv2-99.sv2-99{color:var(--mut);text-decoration:underline}
/* P0-2: inline "Report this score" note form (replaces native prompt()) */
.sv-hide{display:none}
.screp{display:inline-flex;gap:6px;align-items:center;margin-top:6px;max-width:100%}
.screp-in{flex:1;min-width:0;padding:8px 10px;font-size:13px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--txt)}
.screp-btn{padding:8px 14px;font-size:13px;font-weight:600;border:0;border-radius:8px;background:var(--txt);color:var(--card);cursor:pointer}
.screp-btn:disabled{opacity:.55}
.sv2-100.sv2-100.sv2-100{width:24px;height:24px;border-width:3px}
.sv2-101.sv2-101.sv2-101{margin-top:14px;padding:15px 16px;display:flex;align-items:center;gap:12px}
.sv2-102.sv2-102.sv2-102{font-size:24px;line-height:1}
.sv2-103.sv2-103.sv2-103{font-size:14px;display:block;line-height:1.3}
.sv2-104.sv2-104.sv2-104{color:var(--mut);font-size:12px}
.sv2-105.sv2-105.sv2-105{width:auto;padding:10px 14px;font-size:13px;flex-shrink:0}
/* Nutrient threshold bars start collapsed; tapping the row toggles .open (P0-1: the old
   triple-specificity hide beat toggleBar's inline style, leaving a chevron that did nothing). */
.sv2-43{display:none}
.sv2-43.open{display:block}
.sv2-106.sv2-106.sv2-106{font-weight:600}
.sv2-107.sv2-107.sv2-107{font-size:14px;margin-right:9px;white-space:nowrap}
.sv2-108.sv2-108.sv2-108{background:#16a34a}
.sv2-109.sv2-109.sv2-109{background:#46c93a}
.sv2-110.sv2-110.sv2-110{background:#f08418}
.sv2-111.sv2-111.sv2-111{background:#e23b3b}
.sv2-112.sv2-112.sv2-112{color:var(--mut);font-size:12.5px;line-height:1.5;margin:0 0 10px}
.sv2-113.sv2-113.sv2-113{font-size:12.5px;line-height:1.5;margin:10px 2px 0;min-height:0}
.sv2-114.sv2-114.sv2-114{color:var(--mut2);font-size:11.5px;line-height:1.55;margin-top:12px}
.sv2-115.sv2-115.sv2-115{color:var(--mut2);font-size:11.5px;line-height:1.5;margin:14px 4px 0}
.sv2-116.sv2-116.sv2-116{width:88px;height:88px;border-radius:22px;box-shadow:0 14px 34px rgba(78,158,31,.22)}
.sv2-117.sv2-117.sv2-117{font-size:26px;letter-spacing:-.6px;margin-top:18px}
.sv2-118.sv2-118.sv2-118{color:var(--mut);font-size:15px;line-height:1.55;max-width:310px;margin-top:10px}
.sv2-119.sv2-119.sv2-119{max-width:320px;margin-top:24px}
.sv2-120.sv2-120.sv2-120{max-width:320px;margin-top:10px}
.sv2-121.sv2-121.sv2-121{margin-top:12px;padding:12px}
.sv2-122.sv2-122.sv2-122{color:var(--mut2);font-size:12px;margin:-6px 4px 10px}
.sv2-123.sv2-123.sv2-123{color:var(--accent2);font-weight:700}
.sv2-124.sv2-124.sv2-124{color:#f08418;font-weight:700}
.sv2-125.sv2-125.sv2-125{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
/* Alternatives-row buy control. Was 10.5px / 3px padding ≈ a 19px tap target on the
   app's HIGHEST-intent surface (the user just learned their product rates badly and
   is looking at a better one). Enlarged to a real thumb target and labelled with its
   destination. The ::after expands the hit area sideways and DOWNWARD only — never
   upward, where it would sit under the score chip and steal taps meant for the row. */
.sv2-126.sv2-126.sv2-126{display:inline-flex;align-items:center;justify-content:center;
  position:relative;min-height:34px;font-size:12px;font-weight:800;color:#8a4a05;
  background:rgba(240,132,24,.18);padding:7px 11px;border-radius:10px;text-decoration:none;
  white-space:nowrap}
.sv2-126.sv2-126.sv2-126::after{content:"";position:absolute;top:-2px;right:-8px;bottom:-8px;left:-8px}
.sv2-126.sv2-126.sv2-126:active{background:rgba(240,132,24,.3)}
.sv2-127.sv2-127.sv2-127{padding:2px 16px}
.sv2-128.sv2-128.sv2-128{color:var(--mut2);font-size:12px;line-height:1.5;margin:14px 4px}
.sv2-129.sv2-129.sv2-129{margin-top:16px;color:var(--mut);font-size:13.5px;font-weight:600}
.sv2-130.sv2-130.sv2-130{margin:4px 0 0;font-size:10.5px}
.sv2-131.sv2-131.sv2-131{display:block;font-size:10.5px;font-weight:700;letter-spacing:.1em;color:var(--mut);text-transform:uppercase;margin-top:10px}
.sv2-132.sv2-132.sv2-132{font-size:13px;color:var(--mut);margin-top:5px}
.sv2-133.sv2-133.sv2-133{font-size:12.5px;color:var(--mut);margin-top:2px}
.sv2-134.sv2-134.sv2-134{font-size:11.5px;color:var(--mut2);margin-top:2px}
.sv2-135.sv2-135.sv2-135{margin-top:7px;font-size:13px;color:var(--txt)}
.sv2-136.sv2-136.sv2-136{font-size:12.5px;color:var(--mut);margin-top:3px}
.sv2-137.sv2-137.sv2-137{font-size:12px;color:var(--accent2);font-weight:600}
.sv2-138.sv2-138.sv2-138{margin-top:7px}
.sv2-139.sv2-139.sv2-139{font-size:11.5px;color:var(--mut2);margin-top:4px}
.sv2-140.sv2-140.sv2-140{font-size:12.5px;color:var(--mut);margin-top:3px;font-style:italic}
.sv2-141.sv2-141.sv2-141{font-size:11.5px;color:var(--mut2);margin-top:3px}
.sv2-142.sv2-142.sv2-142{padding:12px 14px}
.sv2-143.sv2-143.sv2-143{font-size:14px;line-height:1.45;font-weight:500;color:#353c2e;margin-top:-2px}
.sv2-144.sv2-144.sv2-144{font-size:11.5px;color:var(--mut2);margin-top:12px;border-top:1px solid rgba(0,0,0,.06);padding-top:9px}
.sv2-145.sv2-145.sv2-145{color:var(--accent2);font-weight:600}
.sv2-146.sv2-146.sv2-146{background:var(--card);border-radius:22px 22px 0 0;padding:18px 22px calc(env(safe-area-inset-bottom,0px) + 26px);max-width:430px;width:100%;text-align:center;box-shadow:0 -18px 44px rgba(20,40,20,.2)}
.wg-visual{position:relative;height:168px;margin:0 auto 6px;display:flex;align-items:center;justify-content:center}
.wg-glow{position:absolute;width:170px;height:170px;border-radius:50%;background:radial-gradient(circle,rgba(123,191,42,.28) 0%,rgba(244,101,15,.08) 45%,transparent 70%)}
.wg-phone{position:relative;z-index:2;width:96px;background:#0e1318;border-radius:18px;padding:5px;box-shadow:0 18px 36px rgba(20,40,20,.24),0 0 0 1px #232a31;transform:rotate(-2deg)}
.wg-phone img{display:block;width:100%;height:auto;border-radius:14px}
.wg-chip{position:absolute;z-index:3;right:10%;bottom:12%;display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.96);border:1px solid var(--line);border-radius:12px;padding:8px 10px;box-shadow:0 10px 22px rgba(20,40,20,.12)}
.wg-chip b{display:block;font-size:12px;font-weight:800;color:var(--navy);line-height:1.1}
.wg-chip small{display:block;font-size:10px;font-weight:600;color:var(--mut);margin-top:1px}
.wg-ring{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800;font-size:11.5px;background:linear-gradient(145deg,#7bbf2a,#3c7d16);flex:0 0 auto}
.sv2-147.sv2-147.sv2-147{width:44px;height:44px;border-radius:12px}
.sv2-148.sv2-148.sv2-148{display:block;font-size:19px;margin-top:10px;letter-spacing:-.3px}
.sv2-149.sv2-149.sv2-149{color:var(--mut);font-size:13.5px;line-height:1.55;margin-top:8px}
.sv2-150.sv2-150.sv2-150{display:flex;gap:10px;justify-content:center;margin-top:16px;flex-wrap:wrap}
.sv2-151.sv2-151.sv2-151{background:#11181d;color:#fff;font-weight:800;font-size:14px;padding:13px 20px;border-radius:12px;text-decoration:none}
.sv2-152.sv2-152.sv2-152{margin-top:14px;color:var(--mut);font-size:13px;font-weight:600}
.sv2-153.sv2-153.sv2-153{background:#f4f8ec;border-radius:22px 22px 0 0;padding:26px 22px calc(26px + env(safe-area-inset-bottom));width:100%;max-width:480px;text-align:center}
.sv2-154.sv2-154.sv2-154{font-size:34px}
.sv2-155.sv2-155.sv2-155{font-weight:800;font-size:17px;color:#1d2a12;margin:8px 0 4px}
.sv2-156.sv2-156.sv2-156{font-size:13px;color:#5a6a4a;margin-bottom:16px}
.sv2-157.sv2-157.sv2-157{display:block;width:100%;padding:14px;border-radius:14px;border:0;background:#e8871e;color:#fff;font-weight:800;font-size:15px}
.sv2-158.sv2-158.sv2-158{display:block;width:100%;padding:12px;border:0;background:none;color:#5a6a4a;font-weight:600;font-size:13px;margin-top:4px}

/* ---------- AUDIO: one-touch mute + audio settings ---------- */
/* Thumb-reachable mute, pinned above the bottom nav. Lives inside #resultView so
   it disappears with the view; always honours the safe-area inset (never a JS probe). */
/* Gold, transparent, visually small — the 44px box is touch target only, no chrome. */
/* Owner-placed 2026-07-30: moved from the bottom-right float to just under the
   share/favourite row, where Boss marked it. The old bottom anchor sat ON TOP of the
   "Bad" tier card in the rating strip — the mute overlapped real content.
   Absolute (not fixed) inside the scrolling .view, so it can never collide with the
   tier strip or the bottom nav again. Offset = the view's own top padding + the
   40px action row + its 2px/10px margins, so it lands level with the product image
   and stays right-aligned with the star button (both 18px from the edge). */
.audio-fab{position:absolute;right:18px;
  top:calc(env(safe-area-inset-top, 0px) + 96px + 52px);
  width:44px;height:44px;display:grid;place-items:center;z-index:29;
  background:transparent;border:none;box-shadow:none;color:#c89a3e;
  transition:transform .15s ease,color .2s ease,opacity .2s ease}
.audio-fab svg{width:20px;height:20px;filter:drop-shadow(0 1px 1px rgba(255,255,255,.7))}
.audio-fab:active{transform:scale(.88)}
.audio-fab.off{color:#a89a72;opacity:.72}

/* Audio entry point — top-right of the Home hero, where the owner marked it
   (2026-07-29). Absolutely positioned so it costs the hero ZERO layout height and
   the headline/copy keep their exact position. The topbar is untouched, so the
   112px-topbar clearance problem (Cursor MAJOR #1) no longer exists at all. */
#homeView .hero{position:relative}
.home-audio-btn{position:absolute;top:2px;right:0;width:44px;height:44px;
  display:grid;place-items:center;background:none;border:none;padding:0;cursor:pointer;
  color:#c89a3e;z-index:2}
.home-audio-btn svg{width:26px;height:26px;filter:drop-shadow(0 1px 1px rgba(255,255,255,.7))}
.home-audio-btn:active{opacity:.6}
/* Sound off: the glyph is already HALF the icon (cone, no waves) — dimming makes the
   state unmistakable without adding any chrome around it. */
.home-audio-btn.off{color:#a89a72;opacity:.72}

#svScanOverlay .scan-tools{display:flex;align-items:center;gap:16px}
#svScanOverlay .scan-mute{display:grid;place-items:center}
#svScanOverlay .scan-mute svg{width:24px;height:24px}
#svScanOverlay .scan-mute.off{background:rgba(0,0,0,.34);color:rgba(255,255,255,.62)}

.aud-seg{display:flex;gap:8px;padding:4px 0}
.aud-seg-b{flex:1;min-height:44px;padding:11px 8px;border-radius:14px;background:var(--card2);
  border:1px solid var(--line);color:var(--mut);font-size:14px;font-weight:600;transition:.18s}
.aud-seg-b:active{transform:scale(.97)}
.aud-seg-b.on{background:var(--accent);border-color:var(--accent);color:#122008;font-weight:800}
.aud-preview{margin-top:18px;width:100%}
.aud-note{margin-top:14px;padding:12px 14px;border-radius:14px;background:rgba(240,132,24,.12);
  border:1px solid rgba(240,132,24,.28);color:#8a5a12;font-size:13px;line-height:1.5}

/* Amazon Associates disclosure — must stay legible (not a hidden micro-label):
   13px, normal weight, muted-but-readable, sits under the buy buttons. */
.buy-disc{margin:10px 4px 0;font-size:13px;line-height:1.45;color:var(--mut);font-weight:500}

/* Off-market DSLD label: the score is real but the formulation is discontinued. Stated
   plainly rather than passed off as the current product. */
.prod-offmarket{margin:10px auto 0;max-width:34ch;padding:9px 12px;border-radius:12px;
  background:rgba(240,132,24,.12);border:1px solid rgba(240,132,24,.3);
  color:#8a5a12;font-size:12.5px;line-height:1.45;font-weight:600}

/* "Identified but unrated": the provider knows the product, no label exists yet. Shows the
   real photo/name/brand in place of the generic 🔍, and deliberately carries NO score UI. */
.nf-ident{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:16px}
.nf-thumb{width:84px;height:84px;border-radius:18px;object-fit:cover;background:var(--card2);
  border:1px solid var(--line)}
.nf-mono{display:grid;place-items:center;background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#fff;font-size:28px;font-weight:800;border:none}
.nf-id-name{margin-top:4px;font-size:16px;font-weight:700;line-height:1.3;max-width:30ch;
  overflow-wrap:anywhere}
.nf-id-brand{font-size:13px;color:var(--mut);font-weight:600}

/* Daily photo-read limit fallback on the not-found / identified-unrated screens. Rendered
   ONLY while the account is actually out of photo reads, so the normal screen stays
   photo-only. Reads as a calm aside, not an error: nothing has gone wrong, there is just a
   second way through. The margin-bottom:0 override beats `.notfound p`, whose 20px would
   otherwise push the button away from the sentence explaining it. */
.nf-limit{margin:18px auto 0;max-width:34ch;padding:14px 16px;border-radius:14px;
  background:var(--card2);border:1px solid var(--line);text-align:center}
.nf-limit-msg{font-size:13.5px;line-height:1.5;color:var(--mut);margin:0 0 12px}
.notfound .nf-limit-msg{margin-bottom:12px}
.nf-limit .btn{width:100%;margin:0}

/* Retry-the-same-photo button inside the OCR status line. Shown only for failures that
   were NOT the photo's fault (timeout, upstream error), so the user never re-shoots. */
.ocr-retry{display:inline-flex;align-items:center;min-height:34px;margin-left:8px;
  padding:6px 12px;border-radius:10px;font-size:12.5px;font-weight:700}

/* ---- Post-trial onboarding (js/onboard.js) --------------------------------
   Two pages: a tactile product cart, then the account form. Presentation only:
   the purchase gate, account calls and RevenueCat identity flow remain in JS. */
.ov-onb.ov-onb.ov-onb{position:fixed;inset:0;z-index:9995;display:flex;flex-direction:column;justify-content:center;align-items:center;height:100dvh;padding:calc(env(safe-area-inset-top,0px) + 14px) 18px calc(env(safe-area-inset-bottom,0px) + 16px);overflow:hidden;background:radial-gradient(circle at 50% 10%,#fbfef6 0,#eef8e3 48%,#dfeed0 100%)}
.ov-onb.onb-white.onb-white{background:radial-gradient(circle at 50% 10%,#fbfef6 0,#eef8e3 48%,#dfeed0 100%)}
.ov-onb.onb-white{overflow-y:auto;overscroll-behavior:contain}
.ov-onb::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.28;background-image:radial-gradient(rgba(28,53,35,.16) 1px,transparent 1px);background-size:22px 22px;mask-image:linear-gradient(#000,transparent 78%)}
.onb-white::before{background:radial-gradient(circle at 8% 12%,rgba(240,116,15,.2),transparent 24%),radial-gradient(circle at 92% 82%,rgba(123,191,42,.24),transparent 28%),linear-gradient(135deg,#fbfef6,#e8f4dc);opacity:1;mask-image:none}
.onb-deck{position:relative;width:100%;max-width:860px;perspective:1400px;perspective-origin:50% 44%}
.onb-card{position:relative;width:100%;text-align:center;transform-origin:50% 60%;animation:onbIn .5s cubic-bezier(.18,.86,.28,1) both}
.onb-card-cart{max-width:560px;margin:auto}
.onb-card.onb-out{animation:onbOut .5s cubic-bezier(.5,.02,.72,.4) both}
@keyframes onbIn{from{opacity:0;transform:translate3d(42%,0,-240px) rotateY(-22deg) scale(.92)}to{opacity:1;transform:none}}
@keyframes onbOut{from{opacity:1;transform:none}to{opacity:0;transform:translate3d(-46%,0,-200px) rotateY(20deg) scale(.9)}}

.onb-brandline{display:inline-flex;align-items:center;gap:8px;min-height:32px;margin-bottom:2px;padding:5px 11px 5px 7px;border:1px solid rgba(42,70,38,.13);border-radius:999px;background:rgba(255,254,248,.72);box-shadow:0 8px 24px rgba(42,70,38,.08);color:#426d28;font-size:10px;font-weight:800;letter-spacing:.13em;text-transform:uppercase}
.onb-brandline img{width:24px;height:24px;object-fit:contain}
.onb-tag{display:inline-block;margin:8px 0 9px;padding:6px 14px;border-radius:999px;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#e0680a;background:#fff4e8;border:1px solid #ffcda0}
.onb-h{font-size:25px;line-height:1.2;margin:0 0 8px;color:#8d6c12;text-wrap:balance;letter-spacing:-.025em}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .onb-h{background:linear-gradient(135deg,#e0bd57 0,#c9a338 32%,#8d6c12 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
}
.onb-h-sm{font-size:27px;margin:5px 0 8px}
.onb-p{max-width:480px;margin:0 auto 5px;color:var(--mut);font-size:14px;line-height:1.5;text-wrap:pretty}

/* Page one: the entire stage is a real push/tap button. */
.onb-stage{position:relative;display:grid;place-items:center;width:100%;height:min(52vh,390px);min-height:300px;margin:2px 0 0;padding:0;overflow:hidden;border:1px solid rgba(42,70,38,.12);border-radius:32px;background:linear-gradient(155deg,rgba(252,255,249,.96),rgba(230,243,219,.88));box-shadow:0 28px 70px rgba(52,74,40,.16),inset 0 1px rgba(255,255,255,.9);cursor:grab;touch-action:pan-y;transform-style:preserve-3d;-webkit-user-select:none;user-select:none}
.onb-stage:active{cursor:grabbing}
.onb-stage:focus-visible{outline:3px solid var(--accent2);outline-offset:4px;border-radius:32px}
.onb-scene,.onb-scene>*{position:absolute;pointer-events:none}
.onb-scene{z-index:0;inset:0}
.onb-spotlight{inset:-10% 8% 15%;background:radial-gradient(ellipse at 50% 34%,rgba(255,255,255,.98),rgba(255,253,229,.42) 38%,transparent 70%)}
.onb-orbit{left:50%;top:47%;border-style:solid;border-radius:50%;transform:translate(-50%,-50%) rotateX(68deg) rotateZ(-12deg)}
.onb-orbit-a{width:78%;height:54%;border-width:18px;border-color:rgba(123,191,42,.2);animation:onbOrbit 12s linear infinite}
.onb-orbit-b{width:58%;height:76%;border-width:9px;border-color:rgba(240,116,15,.2);transform:translate(-50%,-50%) rotateX(65deg) rotateZ(68deg);animation:onbOrbitB 10s linear infinite}
.onb-orb{border-radius:50%;box-shadow:inset -12px -14px 22px rgba(35,50,24,.15),0 15px 28px rgba(52,74,40,.14)}
.onb-orb-green{width:62px;height:62px;left:7%;top:20%;background:linear-gradient(145deg,#b5e56e,#5da321)}
.onb-orb-orange{width:42px;height:42px;right:8%;top:11%;background:linear-gradient(145deg,#ffbd61,#ed6909)}
.onb-pedestal{left:8%;right:8%;bottom:6%;height:72px;border-radius:50%;background:linear-gradient(180deg,#a9de78,#5da321);box-shadow:0 23px 30px rgba(60,110,25,.24);transform:rotateX(68deg)}
@keyframes onbOrbit{to{transform:translate(-50%,-50%) rotateX(68deg) rotateZ(348deg)}}
@keyframes onbOrbitB{to{transform:translate(-50%,-50%) rotateX(65deg) rotateZ(-292deg)}}
.onb-hero{position:relative;z-index:3;width:min(82%,380px);height:auto;pointer-events:none;-webkit-user-drag:none;filter:drop-shadow(0 24px 24px rgba(60,52,20,.25));animation:onbFloat 6.5s ease-in-out infinite;transition:transform .45s cubic-bezier(.2,.9,.3,1);will-change:transform}
.onb-hero.onb-pushing{animation:none;transition:none}
@keyframes onbFloat{0%,100%{transform:translate3d(0,2px,18px) rotateY(-4deg)}50%{transform:translate3d(0,-9px,36px) rotateY(4deg)}}
.onb-glow{position:absolute;z-index:2;bottom:11%;width:58%;height:27px;border-radius:50%;background:radial-gradient(ellipse at center,rgba(56,65,28,.32),rgba(120,104,40,0) 70%);animation:onbGlow 6.5s ease-in-out infinite}
@keyframes onbGlow{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(.84);opacity:.5}}
.onb-scan-beam{position:absolute;z-index:4;left:17%;right:17%;top:22%;height:2px;background:linear-gradient(90deg,transparent,#9de158 18%,#fff 50%,#f47a16 82%,transparent);box-shadow:0 0 14px rgba(123,191,42,.55);animation:onbScan 4.6s ease-in-out infinite}
@keyframes onbScan{0%,15%{opacity:0;transform:translateY(0)}30%,70%{opacity:.8}85%,100%{opacity:0;transform:translateY(190px)}}
.onb-chip{position:absolute;z-index:5;display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:6px 10px;border:1px solid rgba(44,67,35,.13);border-radius:999px;background:rgba(255,254,248,.92);box-shadow:0 10px 22px rgba(42,64,36,.13);color:#294126;font-size:10px;font-weight:800;letter-spacing:.02em}
.onb-chip i{width:7px;height:7px;border-radius:50%;background:var(--accent)}
.onb-chip-food{left:5%;top:18%;transform:rotate(-5deg)}
.onb-chip-skin{right:4%;top:35%;transform:rotate(4deg)}
.onb-chip-skin i{background:#f47a16}
.onb-chip-supp{left:9%;bottom:15%;transform:rotate(3deg)}
.onb-track{position:absolute;z-index:5;bottom:4%;left:8%;right:8%;height:2px;border-radius:2px;background:linear-gradient(90deg,rgba(123,191,42,0),rgba(123,191,42,.4) 22%,rgba(240,116,15,.45) 78%,rgba(240,116,15,0))}
.onb-push-hint{display:flex;align-items:center;justify-content:center;gap:9px;margin:6px 0 0;color:#a25a10;font-size:14px;font-weight:800;letter-spacing:.01em}
.onb-push-arrows{display:inline-flex;gap:1px}
.onb-push-arrows i{font-style:normal;font-size:21px;line-height:1;color:#f0740f;animation:onbArrow 1.5s ease-in-out infinite}
.onb-push-arrows i:nth-child(2){animation-delay:.16s}
.onb-push-arrows i:nth-child(3){animation-delay:.32s}
@keyframes onbArrow{0%,100%{opacity:.25;transform:translateX(0)}50%{opacity:1;transform:translateX(4px)}}

/* Page two: product-scene bridge plus a keyboard-safe account panel. */
.onb-card-form{display:grid;grid-template-columns:minmax(260px,.82fr) minmax(360px,1.18fr);align-items:center;gap:0;max-width:800px;margin:auto;text-align:center;border:1px solid rgba(42,70,38,.13);border-radius:34px;background:rgba(255,254,248,.84);box-shadow:0 34px 90px rgba(42,70,38,.19);overflow:hidden}
.onb-account-scene{position:relative;align-self:stretch;min-height:570px;overflow:hidden;background:radial-gradient(circle at 48% 36%,#fbfef6 0,#e7f4d9 52%,#cae4ab 100%)}
.onb-account-scene::before{content:"";position:absolute;left:-25%;right:-25%;bottom:-11%;height:38%;border-radius:50%;background:linear-gradient(180deg,#a9de78,#5da321);box-shadow:0 28px 40px rgba(60,110,25,.25);transform:rotateX(65deg)}
.onb-account-scene img{position:absolute;z-index:3;width:118%;height:auto;left:-9%;top:17%;filter:drop-shadow(0 26px 26px rgba(52,64,32,.24));animation:onbBridge 6s ease-in-out infinite}
.onb-account-orbit{position:absolute;left:50%;top:40%;width:300px;height:300px;border:24px solid rgba(123,191,42,.28);border-radius:50%;transform:translate(-50%,-50%) rotateX(68deg);animation:onbOrbit 12s linear infinite}
.onb-account-orb{position:absolute;right:8%;top:9%;width:52px;height:52px;border-radius:50%;background:linear-gradient(145deg,#ffbc5d,#ec690a);box-shadow:inset -10px -12px 18px rgba(110,50,5,.18),0 16px 26px rgba(108,64,20,.18);animation:onbOrb 5s ease-in-out infinite}
.onb-account-label{position:absolute;z-index:4;left:50%;bottom:8%;transform:translateX(-50%);white-space:nowrap;padding:8px 13px;border-radius:999px;background:rgba(255,254,248,.9);color:#365c26;font-size:9px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;box-shadow:0 8px 20px rgba(42,70,38,.12)}
@keyframes onbBridge{50%{transform:translateY(-8px) rotateY(4deg)}}
@keyframes onbOrb{50%{transform:translateY(12px) scale(.92)}}
.onb-account-panel{position:relative;z-index:5;padding:34px 34px 26px;background:rgba(255,254,249,.94);backdrop-filter:blur(10px)}
.onb-mark{display:grid;place-items:center;margin:0 auto 6px}
.onb-mark span{position:relative;display:block;width:46px;height:46px;border-radius:15px;background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 10px 22px rgba(78,158,31,.3)}
.onb-mark span::after{content:"";position:absolute;inset:13px 12px;border:3px solid #fff;border-left:none;border-right:none;border-radius:2px}
.onb-account-eyebrow{color:#4e8528;font-size:9.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.onb-form{display:flex;flex-direction:column;gap:0;text-align:left;margin-top:5px}
.onb-white .field{margin-top:10px}
.onb-white .field input{min-width:0;min-height:48px;background:#fff;border-color:#dce8cd;box-shadow:0 5px 16px rgba(42,70,38,.04)}
.onb-white .field input:focus{border-color:var(--accent2);box-shadow:0 0 0 3px rgba(123,191,42,.16)}
.onb-white .btn-ghost{min-height:48px;background:#fff;border-color:#e5d5a4}
.onb-err{min-height:18px;margin:6px 0 0;color:#b3261e;font-size:13px;line-height:1.35}
.onb-dots{display:flex;gap:7px;justify-content:center;margin:14px 0 0}
.onb-dots i{display:block;width:7px;height:7px;border-radius:50%;background:var(--line);transition:width .3s,background .3s}
.onb-dots i.on{width:22px;border-radius:4px;background:linear-gradient(135deg,var(--accent),#f08418)}
.onb-white .onb-dots i{background:#d9ebc7}
.onb-white .onb-dots i.on{background:linear-gradient(135deg,var(--accent),#f08418)}
.onb-next{display:inline-flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:48px;margin-top:9px;background:linear-gradient(115deg,#ff9f22 0,#f0740f 40%,#6db32a 100%);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.2);box-shadow:0 12px 26px rgba(190,118,22,.3)}
.onb-next:focus-visible,.onb-alt:focus-visible,.onb-escape .lnk:focus-visible{outline:3px solid var(--accent2);outline-offset:3px}
.onb-alt{width:100%;min-height:48px;margin-top:8px;color:#8d6c12;border-color:#e5d5a4;font-weight:800}
.onb-escape{margin:8px 0 0;text-align:center}
.onb-escape .lnk{min-height:44px;padding:9px;background:none;border:none;color:var(--mut);font:600 12px/1.35 inherit;text-decoration:underline;cursor:pointer}

@media (max-width:700px){
  .onb-deck{max-width:500px}
  .onb-card-form{display:block;max-width:430px;border-radius:28px;overflow:visible}
  .onb-account-scene{min-height:152px;border-radius:28px 28px 0 0}
  .onb-account-scene img{width:54%;left:23%;top:-17%}
  .onb-account-scene::before{bottom:-30%;height:70%}
  .onb-account-orbit{top:48%;width:220px;height:150px;border-width:15px}
  .onb-account-orb{width:38px;height:38px;right:12%;top:12%}
  .onb-account-label{bottom:9%}
  .onb-account-panel{padding:22px 22px 20px;border-radius:0 0 28px 28px}
}
@media (max-width:380px){
  .ov-onb.ov-onb.ov-onb{padding-left:12px;padding-right:12px}
  .onb-stage{height:350px;min-height:280px;border-radius:26px}
  .onb-hero{width:94%}
  .onb-chip{padding:5px 8px;font-size:9px}
  .onb-chip-food{left:3%}.onb-chip-skin{right:2%}.onb-chip-supp{left:4%}
  .onb-h{font-size:22px}.onb-p{font-size:13px}
  .onb-account-panel{padding:19px 16px 16px}
  .onb-h-sm{font-size:23px}
}
/* Short screens scroll on the account page; page-one art compacts without losing copy. */
@media (max-height:760px){
  .onb-stage{height:min(43vh,320px);min-height:250px}
  .onb-h{font-size:22px}
  .onb-tag{margin-top:5px}
  .onb-white.onb-white{justify-content:flex-start}
  .onb-white .onb-deck{margin:auto 0}
  .onb-card-form{transform:scale(.94)}
}
@media (max-height:620px){
  .onb-stage{height:235px;min-height:235px}
  .onb-brandline{display:none}
  .onb-card-form{transform:none}
  .onb-account-scene{min-height:110px}
  .onb-account-panel{padding-top:15px}
  .onb-mark{display:none}
}
@media (prefers-reduced-motion: reduce){
  .onb-card,.onb-card.onb-out{animation:none;opacity:1;transform:none}
  .onb-hero,.onb-glow,.onb-push-arrows i,.onb-orbit,.onb-scan-beam,.onb-account-scene img,.onb-account-orbit,.onb-account-orb{animation:none}
  .onb-hero{transition:none}
}

/* ---- Why this score: evidence for cosmetics & supplements (js/app-main.js) ----
   Citrus Cream only: cream/white surfaces, green for the brand, orange reserved for
   concern and score impact, navy-green text. No purple, no dashboard chrome. */
.wc-summary{line-height:1.6;color:var(--txt)}
.wc-driver{border:1px solid #f3c893;background:linear-gradient(180deg,#fffdf6,#fff7ea);border-radius:20px;padding:16px 16px 14px}
.wc-driver-h{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#a25a10}
.wc-driver-name{font-size:20px;font-weight:800;letter-spacing:-.3px;color:#1c2415;margin:6px 0 8px;text-wrap:balance}
.wc-driver-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:10px}
.wc-impact{font-size:12.5px;font-weight:700;color:#a25a10}
.wc-driver-why{margin:0;font-size:14.5px;line-height:1.55;color:var(--mut)}
.wc-sole{margin:10px 0 0;padding:9px 11px;border-radius:12px;background:#fff3e6;border:1px solid #ffcfa3;color:#8a4a06;font-size:13.5px;line-height:1.5}
.wc-grade-line{margin-top:10px;font-size:12px;font-weight:700;color:var(--mut2)}

.wc-chip{display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;font-size:11.5px;font-weight:800;letter-spacing:.02em;white-space:nowrap}
.cl-high{background:#fdecec;color:#a32020;border:1px solid #f3b9b9}
.cl-mod{background:#fff3e6;color:#8a4a06;border:1px solid #ffcfa3}
.cl-low{background:#f0f7e6;color:#3f7d18;border:1px solid #cfe6b0}
.cl-unc{background:#f2f2ea;color:#6f7560;border:1px solid #ded9c6}

.wc-item{padding:0;overflow:hidden}
.wc-head{display:flex;align-items:center;gap:9px;width:100%;min-height:52px;padding:12px 14px;background:none;border:none;text-align:left;font-family:inherit;cursor:pointer}
.wc-head:focus-visible{outline:3px solid var(--accent2);outline-offset:-3px;border-radius:18px}
.wc-name{font-weight:700;font-size:14.5px;color:var(--txt);flex:1 1 auto;min-width:0}
.wc-fn{font-size:12px;color:var(--mut2);white-space:nowrap}
.wc-caret{font-size:19px;color:var(--mut2);transition:transform .18s;flex:0 0 auto}
.wc-head.is-open .wc-caret{transform:rotate(90deg)}
.wc-body{padding:0 14px 14px;border-top:1px solid var(--line)}
.wc-ev{margin-top:10px}
.wc-ev-row{display:flex;flex-direction:column;gap:2px;margin-top:10px}
.wc-ev-row span{font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--mut2)}
.wc-ev-row b{font-weight:500;font-size:14px;line-height:1.55;color:var(--txt)}
.wc-ev-meta{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.wc-ev-meta span{font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:999px;background:#f2f4ec;color:#4f5b3f;border:1px solid var(--line)}
.wc-grade{background:#eaf4dc!important;color:#3f7d18!important;border-color:#cfe6b0!important}
.wc-src{display:inline-flex;align-items:center;min-height:44px;margin-top:10px;font-weight:800;font-size:14px;color:#3f7d18;text-decoration:underline}
.wc-src-off{color:var(--mut2);text-decoration:none}
.wc-noev{margin-top:10px;padding:11px 12px;border-radius:14px;background:#f7f7ef;border:1px dashed #ded9c6;color:var(--mut);font-size:13.5px;line-height:1.55}
.wc-noev b{color:var(--txt)}

.wc-limits{font-size:13.5px;line-height:1.6;color:var(--mut)}
.wc-limits-h{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--mut2);margin-bottom:8px}
.wc-limits ul{margin:0;padding-left:18px}
.wc-limits li{margin-bottom:7px}
.wc-limits b{color:var(--txt)}

/* Provisional (no ingredient list) state */
.verdict-prov{background:#f2f4ec;color:#4f5b3f;border:1px solid var(--line)}
.verdict-prov .dot{background:var(--mut2)}
.prov-note{text-align:center;margin-top:6px;font-size:13px;font-weight:700;color:var(--mut)}
/* OTC drug result — active-ingredient card (svDrugCardHTML). Blue-tinted, unlike any score
   tier color: the medicine is informational, and must never read as a good/bad verdict. */
.add-progress{margin:10px 0}
.ap-bar{height:6px;border-radius:4px;background:var(--line);overflow:hidden}
.ap-fill{display:block;height:100%;background:linear-gradient(90deg,#7bbf2a,#4e9e1f);transition:width .4s}
.ap-steps{display:flex;flex-wrap:wrap;gap:6px 12px;margin-top:7px;font-size:12px;color:var(--mut2)}
.ap-step.on{color:#2e7d32;font-weight:700}
.ap-count{margin-top:3px;font-size:11.5px;font-weight:800;color:var(--mut)}
.add-detected{margin-top:6px;font-size:12.5px;font-weight:800;color:#3d5878}
.ap-ready{box-shadow:0 0 0 3px rgba(123,191,42,.35);animation:apPulse 1.2s ease-in-out 2}
@keyframes apPulse{50%{transform:scale(1.02)}}
.del-local{font-size:12.5px;color:#c62828;text-decoration:underline}
.mpr-line{font-size:12.5px;line-height:1.5;color:var(--mut);margin:8px 0;padding:8px 12px;border-radius:10px;background:var(--card);border:1px solid var(--line)}
.mpr-ok{color:#2e7d32;border-color:#cfe6b0}
.mpr-review{color:#8a6a1f;background:#f6efdc;border-color:#e2d3a8}
.mpr-line a{color:var(--mut);text-decoration:underline}
.drug-card{padding:14px 16px;border-color:#c9d8e8;background:linear-gradient(180deg,#fafcff,#f0f5fa)}
.drug-h{font-size:13px;font-weight:800;letter-spacing:.2px;text-transform:uppercase;color:#3d5878}
.drug-purpose{text-transform:none;letter-spacing:0;font-weight:700;color:var(--mut)}
.drug-active{margin-top:7px;font-size:16.5px;font-weight:800;letter-spacing:-.2px;color:var(--txt)}
.drug-active-missing{font-size:14px;font-weight:600;color:var(--mut)}
.drug-ndc{margin-top:8px;font-size:12px;font-weight:700;color:var(--mut2)}
.drug-note{margin:10px 0 2px;font-size:13.5px;line-height:1.55;color:var(--mut)}
.drug-note b{color:var(--txt)}
.drug-note-src{margin-top:6px;padding-top:8px;border-top:1px solid var(--line);font-size:12.5px}
.drug-note-src a{color:#3d5878;font-weight:700}

.wn-card{border:1px solid #cfe6b0;background:linear-gradient(180deg,#fbfef6,#f2f8ea);border-radius:22px;padding:18px 16px}
.wn-title{font-size:19px;font-weight:800;letter-spacing:-.3px;color:#1c2415;text-wrap:balance}
.wn-body{margin:8px 0 14px;font-size:14.5px;line-height:1.6;color:var(--mut)}
.wn-actions{display:flex;flex-direction:column;gap:9px}
.wn-btn{min-height:48px;width:100%}
.wn-sig{margin-top:16px;padding-top:13px;border-top:1px solid var(--line)}
.wn-sig-h{font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--mut2);margin-bottom:7px}
.wn-sig-row{font-size:14px;color:var(--txt);padding:3px 0}
.wn-sig-note{margin-top:8px;font-size:12.5px;line-height:1.5;color:var(--mut2)}
@media (prefers-reduced-motion:reduce){.wc-caret{transition:none}}

/* ---- Account deletion (js/account.js) ----
   Rendered inline in the account body, not as an overlay, so it works identically on the
   normal Account screen and inside the gate account sheet — where a gated user has no
   other route to Delete. Orange, not red: this is a serious action, not an error state. */
.del-card{border:1px solid #f3c893;background:linear-gradient(180deg,#fffdf6,#fff7ea);border-radius:20px;padding:18px 16px}
.del-title{font-size:18px;font-weight:800;letter-spacing:-.2px;color:#1c2415;text-wrap:balance}
.del-body{margin:8px 0 14px;font-size:14px;line-height:1.55;color:var(--mut)}
.del-step{margin:0 0 4px;font-size:14px;font-weight:700;color:#8a4a06}
.del-err{min-height:18px;margin:6px 0 2px;color:#b3261e;font-size:13px;line-height:1.4}
.del-btn{width:100%;min-height:48px;margin-top:9px}

/* ---- Email verification by 6-digit code (js/account.js) ----
   The code is the fast path, so it gets the room: a wide monospace field with generous
   letter-spacing reads back at a glance, which is what makes a mistyped digit obvious. */
.vfy-card{border:1px solid #cfe6b0;background:linear-gradient(180deg,#fbfef6,#f2f8ea);border-radius:20px;padding:16px}
.vfy-head{display:flex;gap:11px;align-items:flex-start}
.vfy-title{font-size:15px;font-weight:800;color:#1c2415}
.vfy-sub{margin-top:2px;font-size:13px;line-height:1.5;color:var(--mut)}
.vfy-row{display:flex;gap:9px;margin-top:13px}
.vfy-input{flex:1 1 auto;min-width:0;min-height:52px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;
  background:#fff;color:var(--txt);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:24px;font-weight:700;letter-spacing:8px;text-align:center;outline:none}
.vfy-input:focus{border-color:var(--accent2);box-shadow:0 0 0 3px rgba(123,191,42,.16)}
.vfy-input::placeholder{color:#c3c9b4;letter-spacing:8px}
/* width:auto is load-bearing. .btn sets width:100%, and with flex:0 0 auto that 100%
   becomes the flex BASIS while flex-shrink:0 refuses to give any of it back — so this
   button demanded the whole row and the code input beside it collapsed to a sliver.
   Third time this shape has shipped (see .ov-gauth .ga-back). Guarded in tests now. */
.vfy-paste{flex:0 0 auto;width:auto;min-width:88px;min-height:52px;padding:0 18px;font-weight:800}
.vfy-err{min-height:18px;margin:7px 2px 0;color:#b3261e;font-size:13px;line-height:1.4}
.vfy-actions{display:flex;gap:9px;margin-top:8px}
.vfy-go{flex:1 1 auto;min-height:48px}
.vfy-send{flex:0 0 auto;width:auto;min-width:120px;min-height:48px;padding:0 16px}
/* Stacked below 380px: here full width IS right, because the buttons are no longer
   competing with a sibling for the same row. */
@media (max-width:380px){.vfy-actions{flex-direction:column}.vfy-send{width:100%}.vfy-go{width:100%}}

/* ---------- Ingredients screen (Option 4: search + filter) ----------
   Boss-approved mockup: design/option-4-search-filter.png
   Full-bleed rows on the cream ground, a colour rail per row, tinted rows for the
   two levels that matter, and a summary bar that stays put while you scroll. */
#ingView{padding-left:0;padding-right:0}
.ing-top{display:flex;align-items:center;gap:8px;padding:0 18px 10px}
.ing-back{flex:0 0 40px;width:40px}
.ing-h1{flex:1 1 auto;min-width:0;text-align:center;font-size:27px;font-weight:800;letter-spacing:-.6px;color:#14411f}
.ing-info{flex:0 0 40px;width:40px;color:#14411f;border-color:transparent;background:transparent}

/* Head is sticky so search and the chips stay reachable in a 60-ingredient list. */
#ingHead{position:sticky;top:0;z-index:4;padding:2px 18px 12px;background:linear-gradient(180deg,var(--bg) 78%,rgba(239,238,226,0))}
.ing-srch{display:flex;align-items:center;gap:10px;background:var(--card);border:1.5px solid var(--line);border-radius:999px;padding:0 18px;min-height:52px}
.ing-srch svg{flex:0 0 20px;width:20px;height:20px;color:var(--mut2)}
.ing-srch input{flex:1 1 auto;min-width:0;border:none;background:none;outline:none;font:600 16px/1 inherit;color:var(--txt);padding:14px 0}
.ing-srch input::placeholder{color:var(--mut2);font-weight:600}
.ing-srch input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}

.ing-chips{display:flex;gap:10px;margin-top:12px}
/* width:auto — .ing-chip is not a .btn, but the same flex-basis trap is one shared
   class away, and these must size to their own text. See tests/e2e-layout.mjs. */
.ing-chip{flex:1 1 auto;width:auto;min-height:44px;padding:0 10px;border-radius:999px;
  background:var(--card);border:1.5px solid #1f4d2a;color:#14411f;
  font:800 15px/1 inherit;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.ing-chip b{font-weight:800;opacity:.62;font-size:13px}
.ing-chip.on{background:#14411f;border-color:#14411f;color:#fff}
.ing-chip.on b{opacity:.72}
.ing-chip.flag{border-color:var(--bad);color:var(--bad)}
.ing-chip.flag.on{background:var(--bad);border-color:var(--bad);color:#fff}

.ing-sec{background:var(--card2);color:var(--mut);text-transform:uppercase;
  font:700 10.5px/1 inherit;letter-spacing:.14em;padding:8px 12px;border-top:1px solid var(--line)}
.ing-sec.neg{color:#cf2f2f}
.ing-sec.pos{color:#177a34}
.ing-others{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;
  min-height:40px;padding:0 12px;background:var(--card2);border-top:1px solid var(--line);
  color:var(--mut);font:700 13px/1 inherit;text-align:left}
.ing-w{border-bottom:1px solid var(--line);background:var(--bg2)}
.ing-w[data-lvl="high"]{background:#fdf0ef}
.ing-w[data-lvl="mod"],.ing-w[data-lvl="low"]{background:#fdf7ec}
.ing-r{display:flex;align-items:center;gap:8px;width:100%;min-height:38px;padding:6px 12px 6px 0;text-align:left}
.ing-r[disabled]{cursor:default}
.ing-rail{flex:0 0 3px;width:3px;align-self:stretch;margin:5px 9px 5px 0;border-radius:0 3px 3px 0;background:var(--great)}
.ing-w[data-lvl="high"] .ing-rail{background:var(--bad)}
.ing-w[data-lvl="mod"] .ing-rail,.ing-w[data-lvl="low"] .ing-rail{background:var(--poor)}
.ing-r-b{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
.ing-r-n{font-size:13.5px;font-weight:700;letter-spacing:-.15px;color:var(--txt);line-height:1.25}
.ing-r-n em{font-style:normal;font-weight:700;color:var(--mut2);font-size:13px}
.ing-r-f{font-size:13.5px;font-weight:600;color:var(--mut)}
.ing-r-k{flex:0 0 auto;display:inline-flex;align-items:center;gap:4px;font:600 9.5px/1 inherit;
  letter-spacing:.05em;text-transform:uppercase;color:#177a34;white-space:nowrap}
.ing-k-dot{width:5px;height:5px;border-radius:50%;background:currentColor;flex:0 0 5px}
.ing-w[data-lvl="high"] .ing-r-k{color:#cf2f2f}
.ing-w[data-lvl="mod"] .ing-r-k,.ing-w[data-lvl="low"] .ing-r-k{color:#b96a05}
.ing-r-cv{flex:0 0 12px;width:12px;text-align:right;color:var(--mut2);font-size:15px;line-height:1;opacity:.6}
.ing-r.is-open .ing-r-cv{transform:rotate(90deg)}
.ing-d{padding:2px 18px 16px}
.ing-empty{padding:34px 18px;text-align:center;color:var(--mut);font-weight:600}
.ing-note{padding:16px 18px 4px;color:var(--mut2);font-size:12.5px;line-height:1.5}

.ing-sum{position:sticky;bottom:0;margin-top:auto;padding:10px 18px calc(env(safe-area-inset-bottom, 0px) + 4px);
  background:linear-gradient(0deg,var(--bg) 72%,rgba(239,238,226,0))}
.ing-sum-b{display:flex;align-items:center;gap:12px;
  background:var(--card);border:1px solid var(--line);border-radius:18px;padding:11px 16px;
  box-shadow:0 6px 22px rgba(60,70,40,.10)}
.ing-sum-leaf{flex:0 0 42px;width:42px;height:42px;border-radius:50%;background:#e4efdb;
  color:#2f7a34;display:grid;place-items:center}
.ing-sum-leaf svg{width:22px;height:22px}
.ing-sum-t{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.ing-sum-b b{font-size:16px;font-weight:800}
.ing-sum-t>span{font-size:13.5px;font-weight:700;color:var(--mut)}
.ing-sum-more{flex:0 0 auto;width:auto;font-size:14px;font-weight:800;color:#14411f;text-decoration:none;white-space:nowrap}
.ing-sum-f{font-style:normal;color:var(--bad)}
.ing-sum-c{font-style:normal;color:var(--great)}

/* The pull-out: the full list slides in from the right like a drawer. */
#ingView{animation:svIngPull .28s cubic-bezier(.32,.72,.35,1)}
@keyframes svIngPull{from{transform:translateX(26%);opacity:.4}to{transform:translateX(0);opacity:1}}
@media (prefers-reduced-motion: reduce){#ingView{animation:none}}

/* Inline preview on the result screen — same rows, no expansion. */
.ing-inline{padding:0;overflow:hidden}
.ing-inline .ing-w:first-child,.ing-inline .ing-sec:first-child{border-top:none}
.ing-inline.has-flag{border-color:rgba(226,59,59,.4)}
.ing-inline .ing-r{min-height:38px}
.ing-inline-more{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;
  min-height:52px;padding:0 16px;background:var(--card2);border-top:1px solid var(--line);
  color:#14411f;font:800 14.5px/1 inherit}
.ing-inline.has-flag .ing-inline-more{color:#cf2f2f}

/* Entry point on the result screen. */
.ing-entry{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:15px 16px}
.ing-entry.has-flag{border-color:rgba(226,59,59,.4)}
.ing-entry-b{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:4px}
.ing-entry-b b{font-size:16px;font-weight:800}
.ing-entry-s{font-size:13px;font-weight:600;color:var(--mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ing-entry.has-flag .ing-entry-s{color:#cf2f2f}
.ing-entry-cv{flex:0 0 auto;color:var(--mut2);font-size:22px;line-height:1}

/* Refresh sits top-right of the Top Rated list, opposite Back. */
.top-refresh{position:absolute;top:calc(env(safe-area-inset-top, 0px) + 98px);right:18px;color:#14411f}
.top-stale{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 12px;
  padding:11px 14px;border-radius:12px;background:#f6efdc;border:1px solid #e2d5ae;
  color:#7a621d;font-size:13px;font-weight:600;line-height:1.4}
.top-stale button{flex:0 0 auto;width:auto;min-height:34px;padding:0 12px;border-radius:999px;
  background:#14411f;color:#fff;font:800 13px/1 inherit}

/* ---------- In-app document reader (terms / privacy on native) ---------- */
.ov-doc{position:fixed;inset:0;z-index:10002;background:var(--bg);display:flex;flex-direction:column}
.ov-doc-bar{display:flex;align-items:center;gap:12px;padding:calc(env(safe-area-inset-top, 0px) + 10px) 16px 10px;border-bottom:1px solid var(--line);background:var(--bg2)}
.ov-doc-bar b{font-size:17px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ov-doc-body{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:18px 18px calc(env(safe-area-inset-bottom, 0px) + 24px);font-size:15px;line-height:1.65}
.ov-doc-body h1,.ov-doc-body h2,.ov-doc-body h3{margin:18px 0 8px;line-height:1.25}
.ov-doc-body p,.ov-doc-body li{margin:0 0 10px;color:var(--txt)}
.ov-doc-body a{color:#2f7a34;text-decoration:underline}
.ov-doc-body img{max-width:100%}

/* ---------- Excellent = a shining gold star (Boss 2026-08-01) ----------
   The other three tiers keep their colour dots; Excellent gets a gold star with a
   living shine — a slow glow breath on the star and a twinkling spark at its shoulder.
   Pure CSS on the existing .dot spans (home tier card, result verdict pill, result
   tier strip), so every surface upgrades at once and CSP stays untouched. */
.tier[data-tier="excellent"] .dot,
.verdict[data-tier="excellent"] .dot,
.ts-chip[data-tier="excellent"] .dot{
  position:relative;background:none!important;border-radius:0;box-shadow:none;
  width:30px;height:30px;overflow:visible}
/* Boss 2026-08-01 (rev): BIGGER star, DARK GREEN body so it stands off the cream
   background, with the sparkle in gold. */
.tier[data-tier="excellent"] .dot::before,
.verdict[data-tier="excellent"] .dot::before,
.ts-chip[data-tier="excellent"] .dot::before{
  content:'★';position:absolute;inset:0;display:grid;place-items:center;
  font-size:29px;line-height:1;
  /* THE tier green — same #16a34a the Excellent dot always was — so it reads green,
     not black, at star size. */
  /* Green AND gold in the star itself: green crown melting into a gold base, with the
     shine sweep in warm gold — built to pop off the cream background. */
  /* ALL-GREEN body; the gold lives as an outline tracing the star shape (text-stroke)
     plus the glow and the sparks — green star, circled in gold. */
  background:
    linear-gradient(115deg, transparent 42%, rgba(240,255,244,.9) 49%, rgba(255,252,235,.9) 51%, transparent 58%) 0 0/260% 100% no-repeat,
    linear-gradient(160deg, #2fbf62 6%, #16a34a 55%, #0e7a35 100%);
  -webkit-text-stroke:1.6px #e8b93c;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 5px rgba(244,196,72,.85));
  animation:svStarShine 2.2s ease-in-out infinite, svStarSweep 2.6s ease-in-out infinite}
.tier[data-tier="excellent"] .dot::after,
.verdict[data-tier="excellent"] .dot::after,
.ts-chip[data-tier="excellent"] .dot::after{
  /* Gold sparks AROUND the star: the visible glyph rides top-right, and its
     text-shadows clone it gold at the other shoulders, so the star sits in a ring of
     sparkle rather than wearing a single pin. */
  content:'✦';position:absolute;top:-7px;right:-8px;font-size:14px;color:#f4c448;
  text-shadow:
    -26px 4px 0 rgba(244,196,72,.9),
    -20px 22px 0 rgba(255,214,90,.75),
    2px 26px 0 rgba(244,196,72,.65),
    0 0 8px rgba(255,214,90,.95);
  animation:svStarSpark 2.2s ease-in-out infinite}
@keyframes svStarShine{
  0%,100%{filter:drop-shadow(0 0 3px rgba(244,196,72,.5))}
  50%{filter:drop-shadow(0 0 10px rgba(255,214,90,.95))}}
@keyframes svStarSweep{
  0%,18%{background-position:120% 0, 0 0}
  55%,100%{background-position:-20% 0, 0 0}}
@keyframes svStarSpark{
  0%,100%{opacity:.35;transform:scale(.85) rotate(0deg)}
  40%{opacity:1;transform:scale(1.12) rotate(14deg)}
  70%{opacity:.55;transform:scale(.95) rotate(22deg)}}
@media (prefers-reduced-motion: reduce){
  .tier[data-tier="excellent"] .dot::before,.verdict[data-tier="excellent"] .dot::before,.ts-chip[data-tier="excellent"] .dot::before,
  .tier[data-tier="excellent"] .dot::after,.verdict[data-tier="excellent"] .dot::after,.ts-chip[data-tier="excellent"] .dot::after{animation:none}
  .tier[data-tier="excellent"] .dot::after{opacity:.9}}

/* Lookalike suggestions on the identified-but-unrated screen. */
.lk-head{margin-top:26px;font-size:13px;text-transform:uppercase;letter-spacing:1.2px;color:var(--mut2);font-weight:700;text-align:left}
.lk-note{font-size:12.5px;color:var(--mut);text-align:left;margin:6px 0 10px;line-height:1.5}
.lk-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--card);
  border:1px solid var(--line);border-radius:14px;padding:11px 14px;margin-bottom:10px;min-height:56px}
.lk-img{width:40px;height:40px;border-radius:9px;object-fit:cover;flex:0 0 40px}
.lk-b{flex:1 1 auto;min-width:0}
.lk-b b{display:block;font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lk-b small{color:var(--mut);font-size:12px}
.lk-cv{flex:0 0 auto;color:var(--mut2);font-size:20px}

/* Play Subscriptions policy: dismiss must be clearly visible (44px, high contrast) */
.gate-x{position:absolute;top:calc(env(safe-area-inset-top,0px) + 12px);right:14px;width:44px;height:44px;border-radius:50%;background:#fff;border:1.5px solid #c9d2c2;color:#1c2415;font-size:19px;font-weight:700;line-height:1;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 10px rgba(20,40,20,.16);z-index:3;cursor:pointer}
.gate-x:active{transform:scale(.96)}
.gate-req{font-size:13.5px;font-weight:700;color:#3a4230;margin:10px 0 2px}
.gate-locked{max-width:400px;margin:auto;display:flex;flex-direction:column;align-items:center;gap:12px;padding:24px}
.gate-locked .gl-icon{font-size:44px}
.gate-locked h2{font-size:21px;font-weight:800;color:#1e2733;line-height:1.25}
.gate-locked p{font-size:15px;color:#3a4230;line-height:1.55}