:root{
  --bg:#FBF7EC; --card:#fffdf8; --ink:#22301f; --muted:#6f7867; --line:#ebe5d6;
  --sage:#97B482; --sage-dark:#5E8A50; --brand:#3F6B3F; --sage-bg:#EAF0DE;
  --green:#2f9e5b; --green-bg:#e4f5ea; --amber:#c98a07; --amber-bg:#fdf3dc;
  --red:#d6453d; --red-bg:#fde7e5; --gray:#7d8790; --gray-bg:#eef0f2; --accent:#4F7D45;
  --purple:#6b5bd2; --purple-bg:#eeebfb;
  --radius:18px; --shadow:0 1px 2px rgba(20,40,30,.06),0 6px 20px rgba(20,40,30,.06);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.45 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-text-size-adjust:100%}
button,input,select,textarea{font:inherit;color:inherit}
[hidden]{display:none!important}
.topbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:calc(env(safe-area-inset-top) + 10px) 16px 10px;background:rgba(251,247,236,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.brand{display:flex;align-items:center;gap:8px;font:700 19px/1 ui-rounded,"SF Pro Rounded","Nunito","Varela Round",system-ui,-apple-system,sans-serif;letter-spacing:-.005em;color:var(--brand);margin-right:auto}
#backBtn:not([hidden])+.brand{margin-left:4px}
.logo{width:30px;height:40px;display:block}
.icon-btn{border:0;background:var(--card);width:40px;height:40px;border-radius:12px;display:grid;place-items:center;box-shadow:var(--shadow);cursor:pointer}
.view{max-width:520px;margin:0 auto;padding:6px 16px calc(env(safe-area-inset-bottom) + 32px)}
.hero h1{color:var(--ink);font-size:30px;line-height:1.1;letter-spacing:-.02em;margin:10px 0 6px}
.hero p{margin:0 0 18px;color:var(--muted)}
.scan-card{display:flex;align-items:center;gap:16px;padding:22px 20px;border-radius:24px;background:linear-gradient(135deg,#86A872,#4F7D45);color:#fff;box-shadow:0 10px 28px rgba(79,125,69,.30);cursor:pointer}
.scan-icon{display:grid;place-items:center;width:60px;height:60px;border-radius:18px;background:rgba(255,255,255,.18)}
.scan-text strong{display:block;font-size:20px}
.scan-text small{opacity:.85;font-size:14px}
.link-btn{display:block;text-align:center;color:var(--accent);font-weight:600;padding:12px;cursor:pointer}
.ocr-status{display:flex;gap:12px;align-items:center;background:var(--card);border-radius:var(--radius);padding:14px 16px;margin:4px 0 12px;box-shadow:var(--shadow)}
.ocr-status>div:last-child{flex:1}
.progress{height:6px;background:var(--gray-bg);border-radius:6px;margin-top:6px;overflow:hidden}
#ocrBar{height:100%;width:0;background:var(--sage-dark);transition:width .2s}
.spinner{width:22px;height:22px;border-radius:50%;border:3px solid var(--sage-bg);border-top-color:var(--sage-dark);animation:spin 0.9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.photo-preview{display:block;width:100%;max-height:180px;object-fit:cover;border-radius:var(--radius);margin-bottom:12px}
.card{background:var(--card);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);margin:12px 0}
.card-head{display:flex;justify-content:space-between;align-items:center}
.card h2{font-size:17px;margin:0}
textarea{width:100%;margin:10px 0 12px;border:1.5px solid var(--line);border-radius:14px;padding:12px;font-size:16px;resize:vertical;background:#fffefa;min-height:130px}
textarea:focus,.search:focus,.note-input:focus{outline:none;border-color:var(--sage)}
.primary-btn{width:100%;border:0;border-radius:14px;padding:15px;background:var(--brand);color:#fff;font-weight:700;font-size:17px;cursor:pointer}
.primary-btn.ghost{background:var(--card);color:var(--ink);box-shadow:var(--shadow);margin-top:8px}
.chip-btn{border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 12px;font-size:14px;font-weight:600;cursor:pointer}
.text-btn{display:block;margin:4px auto;border:0;background:none;color:var(--accent);font-weight:600;padding:10px;cursor:pointer}
.hint{color:var(--muted);font-size:14px;margin:6px 0}
.center{text-align:center}
.privacy-note{color:var(--muted);font-size:13px;text-align:center;margin:14px 8px}
.verdict{border-radius:26px;padding:22px 20px;margin:8px 0 12px;display:flex;gap:16px;align-items:center;box-shadow:var(--shadow)}
.verdict .v-icon{flex:none;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;font-size:32px;font-weight:800;color:#fff}
.verdict h1{margin:0;font-size:30px;letter-spacing:-.02em;line-height:1.1}
.verdict p{margin:4px 0 0;font-size:15px}
.verdict.good{background:var(--green-bg)} .verdict.good .v-icon{background:var(--green)} .verdict.good h1{color:#1d6e3e}
.verdict.ok{background:var(--amber-bg)} .verdict.ok .v-icon{background:var(--amber)} .verdict.ok h1{color:#8a5d00}
.verdict.bad{background:var(--red-bg)} .verdict.bad .v-icon{background:var(--red)} .verdict.bad h1{color:#a3271f}
.verdict.unsure,.verdict.none{background:var(--gray-bg)} .verdict.unsure .v-icon,.verdict.none .v-icon{background:var(--gray)}
.counts{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:4px}
.count{flex:1;min-width:70px;background:var(--card);border-radius:14px;padding:8px 10px;box-shadow:var(--shadow);text-align:center}
.count b{display:block;font-size:20px}
.count span{font-size:12px;color:var(--muted)}
.count.clean b{color:var(--green)} .count.caution b{color:var(--amber)} .count.avoid b{color:var(--red)} .count.unknown b{color:var(--gray)}
.ing-list{list-style:none;margin:8px 0;padding:0}
.ing{background:var(--card);border-radius:16px;margin:8px 0;box-shadow:var(--shadow);overflow:hidden}
.ing.child{margin-left:18px}
.ing.group-head{background:transparent;box-shadow:none;margin:14px 0 2px;padding:0 4px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.ing-row{display:flex;width:100%;align-items:center;gap:12px;border:0;background:none;text-align:left;padding:13px 14px;cursor:pointer}
.ing-main{flex:1;min-width:0}
.ing-name{display:block;font-weight:650;text-transform:capitalize}
.ing-sub{display:flex;gap:6px;flex-wrap:wrap;align-items:center;font-size:13px;color:var(--muted);margin-top:1px}
.chev{color:#b4bcb6;font-size:24px;transition:transform .2s}
.ing.open .chev{transform:rotate(90deg)}
.badge{flex:none;min-width:70px;text-align:center;border-radius:999px;padding:4px 8px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.03em}
.badge.clean{background:var(--green-bg);color:#1d6e3e} .badge.caution{background:var(--amber-bg);color:#8a5d00}
.badge.avoid{background:var(--red-bg);color:#a3271f} .badge.unknown{background:var(--gray-bg);color:#59626a}
.tag{display:inline-flex;align-items:center;gap:3px;border-radius:6px;padding:1px 6px;font-size:11.5px;font-weight:700}
.tag.mine{background:var(--purple-bg);color:var(--purple)}
.tag.mixed{background:#eef3fb;color:#3c6aa8}
.tag.fuzzy{background:var(--gray-bg);color:#59626a}
.ing-detail{padding:0 14px 14px;border-top:1px solid var(--line)}
.ing-detail p{margin:10px 0}
.meta{font-size:13px;color:var(--muted)}
.mixed-box{background:#f2f6fc;border-radius:12px;padding:10px 12px;font-size:14px;margin:10px 0}
.mixed-box b{color:#3c6aa8}
.my-box{background:#faf9ff;border:1px solid #e4e0fb;border-radius:14px;padding:12px;margin-top:10px}
.my-box h3{margin:0 0 8px;font-size:14px;color:var(--purple)}
.seg{display:flex;gap:6px}
.seg button{flex:1;border:1.5px solid var(--line);background:#fff;border-radius:12px;padding:9px 4px;font-weight:700;font-size:14px;cursor:pointer}
.seg button.sel.clean{background:var(--green);border-color:var(--green);color:#fff}
.seg button.sel.caution{background:var(--amber);border-color:var(--amber);color:#fff}
.seg button.sel.avoid{background:var(--red);border-color:var(--red);color:#fff}
.note-input{width:100%;margin-top:10px;border:1.5px solid var(--line);border-radius:12px;padding:10px;font-size:16px;background:#fff}
.my-actions{display:flex;justify-content:space-between;align-items:center;margin-top:8px;gap:8px}
.my-actions .meta{flex:1}
.my-note{font-style:italic;color:var(--purple);font-size:13px}
.raw p{font-size:14px;color:var(--muted);word-break:break-word}
.raw summary{font-weight:600;cursor:pointer}
.page-title{font-size:28px;letter-spacing:-.02em;margin:10px 0 4px}
.section-title{font-size:18px;margin:26px 0 6px}
.search{width:100%;border:1.5px solid var(--line);border-radius:14px;padding:12px 14px;font-size:16px;background:#fff;-webkit-appearance:none}
.empty{color:var(--muted);font-size:14px;text-align:center;padding:14px;background:var(--card);border-radius:16px}
.row{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:15px}
.row select{border:1.5px solid var(--line);border-radius:10px;padding:6px 10px;background:#fff}
.danger-zone{text-align:center}
.danger-zone .chip-btn{color:var(--red);border-color:#f3c7c3}
.toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 20px);transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 16px;border-radius:999px;font-size:14px;z-index:20;box-shadow:var(--shadow)}
.list-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:6px}
.list-head .hint{flex:1;margin:0;font-size:13px}
.mini-seg{display:flex;background:var(--gray-bg);border-radius:10px;padding:2px;flex:none}
.mini-seg button{border:0;background:none;border-radius:8px;padding:5px 8px;font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer}
.mini-seg button.sel{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.tagline{display:inline-block;margin:12px 0 0;padding:5px 11px;border-radius:999px;background:var(--sage-bg);color:var(--brand);font-size:13.5px;font-weight:700;letter-spacing:.01em}
.hero .tagline+h1{margin-top:10px}