:root{
  --cream:#F8F2E1; --cream-2:#F1E9D3; --ocre:#D1B740; --ocre-dark:#B3943A;
  --charcoal:#36353A; --green:#9ECB89; --rose:#CFAA9B; --white:#FFFFFF; --radius:14px;
  --danger:#a33a2e; --ok-bg:rgba(158,203,137,0.35); --ok-fg:#3c5c33; --ko-bg:rgba(207,170,155,0.4); --ko-fg:#7a4636;
  font-family:'Inter Variable','Inter',system-ui,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --cream:#221F17; --cream-2:#2A261C; --white:#2E2A20; --charcoal:#F2EDE0; --danger:#f08a7c; --ok-fg:#b9e0a8; --ko-fg:#f0c2b2; color-scheme:dark; }
}
:root[data-theme="dark"]{ --cream:#221F17; --cream-2:#2A261C; --white:#2E2A20; --charcoal:#F2EDE0; --danger:#f08a7c; --ok-fg:#b9e0a8; --ko-fg:#f0c2b2; color-scheme:dark; }
*{box-sizing:border-box;}
[hidden]{display:none !important;}
body{margin:0;background:var(--cream);color:var(--charcoal);}
h1,h2,h3,.display{font-family:'Bricolage Grotesque Variable','Bricolage Grotesque',sans-serif;font-weight:700;letter-spacing:-0.01em;}
button{font-family:inherit;cursor:pointer;color:inherit;}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--ocre-dark);outline-offset:2px;}
img,svg{max-width:100%;}
img{-webkit-user-drag:none;user-select:none;}

.brand{display:flex;align-items:center;gap:10px;}
.brand svg{width:34px;height:34px;flex-shrink:0;}
.brand-name{font-size:1.05rem;font-weight:700;line-height:1;}
.brand-sub{font-size:0.68rem;letter-spacing:0.06em;color:var(--ocre-dark);font-weight:600;}

.badges{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0;}
.badge{font-size:0.68rem;font-weight:700;padding:4px 9px;border-radius:999px;line-height:1.3;}
.badge-allergen{background:rgba(207,170,155,0.45);color:var(--ko-fg);}
.badge-traces{background:rgba(207,170,155,0.22);color:var(--ko-fg);font-size:0.62rem;padding:3px 7px;}
.badge-supplement{background:rgba(158,203,137,0.45);color:var(--ok-fg);}

.primary-btn{border:none;background:var(--charcoal);color:var(--cream);border-radius:999px;padding:13px 18px;font-weight:700;font-size:0.95rem;width:100%;}
.primary-btn:disabled{opacity:0.4;cursor:not-allowed;}
.ghost-btn{border:1.5px solid rgba(128,128,128,0.4);background:transparent;color:var(--charcoal);border-radius:999px;padding:10px 16px;font-weight:600;font-size:0.85rem;}

.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.45);display:none;align-items:center;justify-content:center;z-index:80;padding:16px;}
.modal-overlay.show{display:flex;}
.modal{background:var(--cream);border-radius:18px;width:min(460px,100%);max-height:90vh;overflow-y:auto;padding:24px;}
.modal.wide{width:min(640px,100%);}
.modal h2{margin:0 0 6px;font-size:1.3rem;}
.modal p.sub{margin:0 0 18px;font-size:0.86rem;opacity:0.75;}
.field{display:flex;flex-direction:column;gap:5px;margin-bottom:14px;}
.field label{font-size:0.78rem;font-weight:600;opacity:0.8;}
.field input,.field select,.field textarea{padding:10px 12px;border-radius:10px;border:1px solid rgba(128,128,128,0.4);font-family:inherit;font-size:0.95rem;background:var(--white);color:var(--charcoal);}
.note-box{background:var(--cream-2);border-radius:12px;padding:12px 14px;font-size:0.84rem;line-height:1.5;margin-bottom:16px;}

.toast{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--charcoal);color:var(--cream);padding:22px 28px;border-radius:16px;font-size:1.02rem;font-weight:700;z-index:200;box-shadow:0 12px 36px rgba(0,0,0,0.35);max-width:min(90vw,380px);text-align:center;line-height:1.4;transition:opacity .4s;pointer-events:none;}
.empty{opacity:0.6;font-size:0.9rem;padding:20px 0;}