:root{
  --bg:#EDE3D3;
  --bg-2:#E3D5BE;
  --surface:#FFFBF3;
  --surface-2:#F7EEDC;
  --text:#241710;
  --muted:#7A6552;
  --accent:#C77A12;
  --accent-ink:#5B3A08;
  --accent2:#7C2238;
  --accent2-ink:#F5DCC8;
  --line:rgba(36,23,16,0.12);
  --shadow:0 1px 2px rgba(36,23,16,0.06), 0 8px 24px rgba(36,23,16,0.08);
  --good:#3C6E4E;
  --warn:#9A5B12;
  --radius:18px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#181110; --bg-2:#1F1613; --surface:#241A16; --surface-2:#2C201A;
    --text:#F3E6D6; --muted:#B9A48E; --accent:#EFA939; --accent-ink:#2A1B04;
    --accent2:#C24D68; --accent2-ink:#2A0F16; --line:rgba(243,230,214,0.12);
    --shadow:0 1px 2px rgba(0,0,0,0.3), 0 8px 28px rgba(0,0,0,0.45); --good:#6FA97F; --warn:#E0A94D;
  }
}
:root[data-theme="dark"]{
  --bg:#181110; --bg-2:#1F1613; --surface:#241A16; --surface-2:#2C201A;
  --text:#F3E6D6; --muted:#B9A48E; --accent:#EFA939; --accent-ink:#2A1B04;
  --accent2:#C24D68; --accent2-ink:#2A0F16; --line:rgba(243,230,214,0.12);
  --shadow:0 1px 2px rgba(0,0,0,0.3), 0 8px 28px rgba(0,0,0,0.45); --good:#6FA97F; --warn:#E0A94D;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  background:radial-gradient(1200px 500px at 10% -10%, var(--bg-2), transparent 60%), var(--bg);
  color:var(--text);
  font-family:"Work Sans", -apple-system, "Segoe UI", sans-serif;
  padding-inline:16px;
  padding-bottom:calc(48px + env(safe-area-inset-bottom,0px));
  padding-top:env(safe-area-inset-top,0px);
}
h1,h2,h3{font-family:"Fraunces", Georgia, serif; margin:0;}
.wrap{max-width:560px; margin:0 auto;}

.eyebrow{
  font-size:11px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--accent-ink); background:color-mix(in srgb, var(--accent) 22%, transparent);
  display:inline-block; padding:4px 10px; border-radius:999px; font-weight:600;
  border:1px solid color-mix(in srgb, var(--accent) 45%, transparent);
}
.app-header{padding-top:24px; padding-bottom:8px;}
.header-row{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-top:12px;}
h1{font-size:30px; font-weight:600; line-height:1.05; text-wrap:balance;}
h1 em{font-style:italic; color:var(--accent-ink); background:linear-gradient(to top, color-mix(in srgb, var(--accent) 35%, transparent) 0 38%, transparent 38%);}
.sub{color:var(--muted); font-size:15px; margin-top:8px; line-height:1.5; max-width:48ch;}

.link-btn{
  background:none; border:1px solid var(--line); color:var(--muted);
  border-radius:999px; padding:6px 12px; font:inherit; font-size:12px; cursor:pointer; white-space:nowrap;
  text-decoration:none; display:inline-block;
}
.header-actions{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}

.status-banner{
  margin-top:14px; padding:10px 14px; border-radius:12px; font-size:13px;
  background:color-mix(in srgb, var(--warn) 18%, transparent);
  border:1px solid color-mix(in srgb, var(--warn) 45%, transparent);
  color:var(--text);
}

.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow);}

.composer{padding:16px; margin-top:20px;}
.field-label{font-size:12px; font-weight:600; letter-spacing:0.04em; color:var(--muted); text-transform:uppercase; margin-bottom:8px; display:block;}
textarea, input[type="text"], input[type="password"]{
  width:100%; background:var(--surface-2); border:1px solid var(--line); border-radius:12px;
  padding:12px 14px; font:inherit; font-size:16px; color:var(--text); font-family:"Work Sans", sans-serif;
}
textarea{min-height:84px; resize:vertical;}
textarea:focus, input:focus, select:focus{outline:2px solid var(--accent); outline-offset:1px;}

.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px;}
.chip{font-size:13px; padding:7px 12px; border-radius:999px; background:var(--surface-2); border:1px solid var(--line); color:var(--text); cursor:pointer; font-family:inherit;}
.chip:active{transform:scale(0.97);}

.row{display:flex; gap:10px; margin-top:14px;}
select{flex:1; background:var(--surface-2); border:1px solid var(--line); border-radius:10px; padding:9px 10px; font:inherit; font-size:13px; color:var(--text);}

button.primary{
  margin-top:16px; width:100%; background:var(--accent); color:var(--accent-ink);
  border:none; border-radius:12px; padding:14px 16px; font-family:"Work Sans", sans-serif;
  font-weight:700; font-size:15.5px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px;
  box-shadow:0 6px 16px color-mix(in srgb, var(--accent) 45%, transparent);
}
button.primary:disabled{opacity:0.6; cursor:default; box-shadow:none;}

.spinner{width:16px; height:16px; border-radius:50%; border:2px solid color-mix(in srgb, var(--accent-ink) 30%, transparent); border-top-color:var(--accent-ink); animation:spin 0.8s linear infinite; display:inline-block; vertical-align:-2px; margin-right:8px;}
@keyframes spin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion: reduce){.spinner{animation-duration:2s;}}

.results-block{margin-top:22px; display:flex; flex-direction:column; gap:14px;}
.results-block h2{font-size:12px; text-transform:uppercase; letter-spacing:0.06em; color:var(--muted); font-weight:600; margin:0 0 2px 2px;}

.result-intro{padding:14px 16px; font-size:14.5px; color:var(--muted); line-height:1.5;}
.result-intro strong{color:var(--text);}

.spice-card{padding:16px; display:flex; flex-direction:column; gap:8px;}
.spice-head{display:flex; align-items:baseline; justify-content:space-between; gap:10px;}
.spice-name{font-family:"Fraunces", serif; font-weight:600; font-size:19px;}
.spice-role{font-size:11px; text-transform:uppercase; letter-spacing:0.06em; font-weight:600; color:var(--accent2-ink); background:color-mix(in srgb, var(--accent2) 20%, transparent); border:1px solid color-mix(in srgb, var(--accent2) 40%, transparent); padding:3px 9px; border-radius:999px; white-space:nowrap;}
.spice-why{font-size:14.5px; line-height:1.5; color:var(--text);}
.spice-meta{display:flex; gap:14px; flex-wrap:wrap; font-size:13px; color:var(--muted); border-top:1px solid var(--line); padding-top:10px;}
.spice-meta b{color:var(--text); font-weight:600;}

.service-line{padding:14px 16px; border-left:3px solid var(--good); background:var(--surface);}
.service-line .lbl{font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color:var(--good); font-weight:700; margin-bottom:4px;}
.service-line p{margin:0; font-size:14.5px; font-style:italic; line-height:1.5;}

.error-box{padding:14px 16px; border-left:3px solid var(--accent2); font-size:14px; color:var(--text); border-radius:12px; background:var(--surface); border:1px solid var(--line);}

.history{margin-top:30px;}
.history h2{font-size:13px; text-transform:uppercase; letter-spacing:0.06em; color:var(--muted); font-weight:600; margin-bottom:10px;}
.hist-item{padding:11px 14px; font-size:13.5px; color:var(--text); border:1px solid var(--line); border-radius:12px; margin-bottom:8px; background:var(--surface); cursor:pointer; display:flex; justify-content:space-between; gap:10px;}
.hist-item span.q{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1;}
.hist-item span.t{color:var(--muted); font-size:11.5px; white-space:nowrap;}

/* Auth pages */
.auth-body{display:flex; align-items:center; justify-content:center; min-height:100%;}
.auth-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:28px 24px; max-width:360px; width:100%;}
.auth-form{display:flex; flex-direction:column; gap:10px; margin-top:16px;}