:root {
  --bg:#e9f0e9; --paper:#f8f9f5; --white:#fff;
  --ink:#16382b; --dark:#102d21; --green:#17764a; --green-dark:#135e3d;
  --mint:#dcf1df; --soft:#eff5ed; --grey:#61796b; --line:#dbe5da;
  --danger:#9f4b32; --shadow:0 20px 70px rgba(14,48,28,.13);
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--ink); font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,sans-serif; }
button,input { font:inherit; }
button { -webkit-tap-highlight-color: transparent; cursor:pointer; }
button:focus-visible, input:focus-visible, summary:focus-visible, a:focus-visible { outline:3px solid #6bbd90; outline-offset:3px; }
[hidden] { display:none!important; }
.layout { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:38px; gap:clamp(55px,6vw,110px); }
.intro { max-width:400px; }
.intro-eyebrow { font-size:11px; font-weight:800; letter-spacing:2.2px; display:flex; align-items:center; gap:9px; color:var(--green); }
.pulse { width:8px; height:8px; background:#2fbd78; border-radius:100%; box-shadow:0 0 0 5px #2fbd7820; }
.intro h1 { font-size:clamp(46px,4.7vw,68px); line-height:1.03; letter-spacing:-3.5px; margin:22px 0 24px; font-weight:800; }
.intro h1 em { font-style:normal; color:var(--green); }
.intro p { font-size:16px; line-height:1.75; color:#627a6a; }
.intro-points { display:flex; flex-direction:column; gap:13px; margin-top:27px; font-size:14px; font-weight:700; }
.intro .intro-footer { color:#8da294; font-size:12px; margin-top:46px; }
.app-shell { flex:none; width:min(100%,410px); height:min(850px,calc(100dvh - 68px)); min-height:620px; position:relative; display:flex; flex-direction:column; border-radius:34px; background:var(--paper); box-shadow:var(--shadow); border:6px solid #d5e1d3; overflow:hidden; }
.app-header { flex:none; display:flex; justify-content:space-between; gap:12px; align-items:center; padding:26px 23px 17px; background:var(--paper); z-index:2; }
.brand-block { display:flex; align-items:center; gap:10px; }
.brand-mark { width:40px; height:40px; border-radius:13px; color:#fff; background:var(--green); display:grid; place-items:center; transform:rotate(-4deg); }
.brand-mark svg { transform:rotate(4deg); }
.brand-name { font-size:25px; font-weight:900; letter-spacing:-1.35px; line-height:1; }
.brand-name span { color:var(--green); }
.brand-caption { color:#92a499; font-size:10px; font-weight:650; letter-spacing:.2px; margin-top:5px; }
.location-chip { border:1px solid #d9eadc; background:#e9f4e9; border-radius:100px; padding:9px 10px; font-size:12px; font-weight:800; color:var(--green-dark); display:flex; align-items:center; gap:7px; }
.location-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:#4fb672; }
.app-main { position:relative; flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; }
.view { display:none; padding:8px 22px 24px; min-height:100%; }
.view.active { display:block; }
.eyebrow { font-size:10px; font-weight:900; color:#83a291; letter-spacing:1.5px; margin:0 0 8px; }
.page-titleline { margin:0 0 19px; }
h2 { font-size:26px; line-height:1.18; letter-spacing:-.9px; margin:0; font-weight:850; }
.camera-card { background:#fff; border-radius:24px; overflow:hidden; box-shadow:0 8px 27px rgba(13,44,31,.09); border:1px solid #e7eee7; }
.camera-canvas { height:clamp(245px,42vh,355px); background:radial-gradient(circle at 50% 45%,#31553e 0%,#17352a 45%,#0b1e1c 100%); position:relative; isolation:isolate; overflow:hidden; }
.camera-canvas::before { content:''; width:400px; height:400px; border-radius:50%; border:1px solid #ffffff10; position:absolute; top:-100px; left:calc(50% - 200px); pointer-events:none; }
.camera-reader { position:absolute; inset:0; z-index:1; overflow:hidden; }
.camera-reader video { width:100%!important; height:100%!important; object-fit:cover!important; border-radius:0!important; }
.camera-reader > div { height:100%!important; width:100%!important; }
.camera-reader canvas { display:none!important; }
.camera-idle { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0; color:#fff; z-index:2; }
.camera-idle .camera-orb { width:112px; height:112px; background:linear-gradient(150deg,#527a5b,#2e5947); display:grid; place-items:center; border-radius:32px; color:#c7f8d6; border:1px solid #a2dda65c; box-shadow:0 12px 50px #071e1288; }
.camera-idle h3 { margin:19px 0 8px; font-weight:800; font-size:20px; letter-spacing:-.5px; }
.camera-idle p { font-size:12px; text-align:center; color:#c4dace; line-height:1.6; margin:0; }
.live-indicator { position:absolute; top:14px; left:14px; z-index:6; color:#e7ffed; background:#142e26cb; border:1px solid #d4f3d64a; font-size:10px; letter-spacing:1.1px; font-weight:800; padding:9px 12px; border-radius:40px; display:flex; align-items:center; gap:9px; }
.live-dot { width:7px; height:7px; border-radius:50%; background:#6bf5a6; box-shadow:0 0 0 3px #71ec9a2b; }
.scan-target { position:absolute; left:calc(50% - min(37%,147px)); width:min(74%,294px); top:50%; transform:translateY(-50%); height:138px; z-index:4; border-radius:15px; border:2px solid #bbffd1; box-shadow:0 0 0 900px rgba(5,18,12,.28),inset 0 0 22px #0d2b1533; pointer-events:none; }
.scan-target::before,.scan-target::after { content:''; position:absolute; width:29px; height:29px; border-color:#86f5ab; border-style:solid; }
.scan-target::before { top:-3px;left:-3px;border-width:4px 0 0 4px;border-radius:14px 0 0 0; }
.scan-target::after { bottom:-3px;right:-3px;border-width:0 4px 4px 0;border-radius:0 0 14px 0; }
.scan-line { position:absolute; left:11px; right:11px; height:2px; background:#76f4a5; top:50%; box-shadow:0 0 17px #9dffc8; animation:scan 2.3s ease-in-out infinite alternate; }
.target-caption { position:absolute; bottom:-31px; left:0; right:0; text-align:center; font-size:10px; letter-spacing:1px; font-weight:800; color:#d4ffdf; }
.scan-hint { position:absolute; bottom:13px; left:15px; right:15px; z-index:4; font-size:12px; color:#f0fff3; text-align:center; text-shadow:0 1px 4px #000; }
@keyframes scan { from { transform:translateY(-44px); } to { transform:translateY(44px); } }
.camera-controls { padding:17px 17px 18px; text-align:center; }
.camera-state { color:var(--grey); font-size:12px; font-weight:700; margin:0 0 11px; min-height:17px; }
.main-button { display:flex; align-items:center; justify-content:center; gap:10px; background:var(--green); color:#fff; border:0; border-radius:14px; padding:14px 17px; font-size:15px; font-weight:800; width:100%; min-height:49px; box-shadow:0 8px 21px #0a754d24; }
.main-button:disabled { opacity:.65; cursor:wait; }
.main-button svg { width:21px; height:21px; }
.stop-button { color:var(--green-dark); background:#eaf4e9; border:1px solid #cce6d0; border-radius:14px; padding:13px; width:100%; font-size:15px; font-weight:800; min-height:46px; }
.privacy-note { font-size:11px; line-height:1.55; color:#83988b; margin:12px 0 0; }
.tip-card { display:flex; gap:12px; padding:16px; margin:16px 0 0; border-radius:17px; background:#eaf2e8; }
.tip-icon { width:34px; height:34px; border-radius:11px; flex:none; background:#d4ead5; color:#15724e; display:grid; place-items:center; font-weight:bold; font-size:22px; }
.tip-card strong { font-size:13px; }
.tip-card p { font-size:12px; line-height:1.52; margin:4px 0 0; color:#6e8675; }
.text-button { font-weight:800; color:var(--green); padding:0; border:0; background:none; text-decoration:underline; }
.manual-code { margin-top:13px; border-bottom:1px solid #dae4d9; padding:9px 4px 16px; }
.manual-code summary { font-size:12px; font-weight:760; color:#617a6b; list-style:none; cursor:pointer; display:flex; justify-content:space-between; }
.manual-code summary::-webkit-details-marker { display:none; }
.manual-code[open] summary span { transform:rotate(180deg); }
.code-form { padding-top:17px; }
.code-form label { display:block; font-size:12px; color:var(--grey); margin-bottom:6px; }
.form-row { display:flex; gap:7px; }
.form-row input { min-width:0; flex:1; padding:13px 10px; border:1px solid #ccdccc; border-radius:10px; background:#fff; font-size:16px; }
.small-action { flex:none; border:0; background:var(--green); color:#fff; font-weight:800; border-radius:10px; padding:0 15px; }
.field-error { font-size:12px; color:#a73d25; margin:8px 0 0; }
.foot-explainer { color:#8ca193; font-size:11px; line-height:1.6; text-align:center; margin:15px 8px 4px; }
.bottom-nav { flex:none; height:73px; background:#fff; border-top:1px solid #e6eee6; display:flex; justify-content:center; gap:18px; padding:6px 17px max(8px,env(safe-area-inset-bottom)); z-index:4; }
.nav-item { flex:1; max-width:145px; border:0; border-radius:15px; background:transparent; color:#85988b; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:4px; font-size:11px; font-weight:800; }
.nav-item.active { color:var(--green); background:#eef7ed; }
.search-box { display:flex; gap:9px; align-items:center; background:#fff; border:1px solid #dce8db; border-radius:16px; padding:4px 13px; color:#8aa395; box-shadow:0 2px 12px #18552d08; }
.search-box input { font-size:16px; color:var(--ink); padding:13px 0; border:0; outline:none; min-width:0; flex:1; background:transparent; }
.search-box input::placeholder { color:#a1b1a6; }
.search-shortcut { width:24px; text-align:center; background:#eff6ef; border-radius:7px; padding:3px; }
.quick-search { padding-top:27px; }
.list-heading,.results-bar { letter-spacing:1px; color:#83a295; font-size:10px; font-weight:850; }
.quick-buttons { margin-top:12px; display:flex; flex-wrap:wrap; gap:8px; }
.quick-button { border:1px solid #dce9dd; border-radius:11px; padding:9px 12px; color:#305342; font-size:12px; font-weight:750; background:#fff; }
.results-bar { display:flex; justify-content:space-between; align-items:center; padding:23px 3px 11px; }
.search-results { display:flex; flex-direction:column; }
.search-item { border:1px solid #e2eae0; width:100%; background:#fff; margin-bottom:8px; border-radius:14px; display:flex; align-items:center; gap:11px; padding:14px 12px; text-align:left; }
.fraction-symbol { width:39px; height:39px; border-radius:12px; flex:none; display:grid; place-items:center; background:var(--tint,#eaf4e9); color:var(--fraction-color,#17764a); font-weight:850; font-size:19px; }
.search-item-text { display:flex; flex-direction:column; gap:5px; flex:1; min-width:0; }
.search-item-title { font-size:13px; font-weight:780; color:var(--ink); }
.search-item-subtitle { color:#86a092; font-size:11px; }
.search-item-arrow { color:#9fb1a6; font-size:24px; line-height:1; }
.empty-state { text-align:center; margin:23px 0; color:#708b79; padding:24px 10px; line-height:1.6; font-size:14px; }
.loading { text-align:center; font-size:12px; color:#8aa497; }
.result-head { display:flex; justify-content:space-between; align-items:center; margin:2px 0 25px; }
.back-button { display:flex; align-items:center; border:0; background:transparent; color:#456b56; font-size:13px; font-weight:820; gap:3px; padding:8px 3px; }
.result-region { letter-spacing:1px; font-size:10px; color:#96aa9d; font-weight:850; }
.result-kicker { font-size:10px; letter-spacing:1.3px; color:#2a9460; font-weight:850; margin-bottom:8px; }
.result-content h2 { font-size:30px; margin:0 0 19px; overflow-wrap:anywhere; }
.answer-card { --fraction-color:#17764a; --tint:#e4f3e8; background:#fff; padding:22px 18px; border:1px solid #e4ece3; border-radius:23px; text-align:center; box-shadow:0 7px 20px #144b2910; }
.answer-icon { width:68px; height:68px; border-radius:21px; margin:auto auto 14px; background:var(--tint); color:var(--fraction-color); display:grid; place-items:center; font-size:34px; font-weight:800; }
.answer-overline { font-weight:850; color:#89a394; letter-spacing:1.5px; font-size:10px; }
.answer-main { font-size:25px; font-weight:900; letter-spacing:-.7px; line-height:1.2; color:var(--fraction-color); margin:7px 0 9px; }
.answer-container { font-size:12px; line-height:1.6; color:#73917d; max-width:260px; margin:0 auto; }
.info-card { border:1px solid #e1e8df; border-radius:17px; background:#fff; padding:17px; margin-top:12px; }
.info-card.info-warning { background:#fff9f1; border-color:#f3e4cf; }
.info-title { font-size:10px; letter-spacing:1.2px; color:#538363; font-weight:900; margin-bottom:8px; }
.info-warning .info-title { color:#aa772d; }
.info-body { font-size:13px; color:#5e7767; line-height:1.65; }
.source-link,.external-link { display:flex; align-items:center; gap:7px; text-decoration:none; margin:19px 0; color:var(--green); font-weight:800; font-size:12px; }
.action-space { display:flex; flex-direction:column; gap:9px; margin-top:19px; }
.secondary-action { width:100%; border:1px solid #cce4cf; color:#176542; background:#e7f3e8; border-radius:14px; padding:13px; font-size:14px; font-weight:800; }
.product-details { border:1px solid #dce8dd; padding:17px; background:#fff; border-radius:17px; margin:11px 0 15px; }
.product-meta { font-size:11px; color:#819788; line-height:1.55; margin-top:6px; }
.choice-title { font-size:13px; font-weight:850; margin:22px 0 9px; }
.choice-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.choice-button { text-align:left; border:1px solid #dde8dd; border-radius:14px; padding:14px 11px; background:#fff; min-height:81px; display:flex; flex-direction:column; justify-content:space-between; }
.choice-button .choice-icon { font-size:22px; }
.choice-button .choice-label { font-size:12px; font-weight:850; color:#315845; }
.muted-callout { color:#7f9687; line-height:1.55; font-size:12px; margin:17px 2px; }
#aboutView h2 { margin-bottom:24px; }
.about-section { border-bottom:1px solid #dfe8dd; padding:17px 0; }
.about-section strong { font-size:14px; }
.about-section p { margin:7px 0; line-height:1.65; color:#728a79; font-size:12px; }
.version-label { margin-top:30px; color:#a1b4a5; font-size:11px; }
@media (max-width:800px) {
  body { background:var(--paper); }
  .layout { padding:0; display:block; min-height:100dvh; }
  .intro { display:none; }
  .app-shell { border:0; border-radius:0; width:100%; max-width:none; height:100dvh; min-height:0; box-shadow:none; }
  .app-header { padding:calc(env(safe-area-inset-top) + 17px) 20px 18px; }
  .view { padding:7px 20px 22px; }
  .camera-canvas { height:clamp(240px,41svh,420px); }
  .bottom-nav { height:calc(68px + env(safe-area-inset-bottom)); padding-bottom:max(7px,env(safe-area-inset-bottom)); }
}
@media (max-width:360px) { .app-header { padding-left:15px; padding-right:15px; } .view { padding-left:15px; padding-right:15px; } h2 { font-size:24px; } .camera-canvas { height:240px; } }
@media (prefers-reduced-motion:reduce) { .scan-line { animation:none; } }

/* 0.4: visible camera diagnostics; ZXing is loaded from version-pinned CDN. */
.camera-diagnostic { color:#536b5e; background:#f1f6f1; border-radius:9px; font-size:11px; line-height:1.5; margin:12px 0 0; padding:8px; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
#scanVideo { display:block; position:absolute; width:100%; height:100%; inset:0; object-fit:cover; background:#071e14; }