:root {
  --bg: #0b1020;
  --panel: rgba(255,255,255,.08);
  --panel-2: rgba(255,255,255,.12);
  --text: #f8fafc;
  --muted: #b8c1d1;
  --accent: #f5c542;
  --accent-2: #ff8a3d;
  --danger: #ffb4b4;
  --border: rgba(255,255,255,.14);
  --shadow: 0 24px 70px rgba(0,0,0,.28);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at top right, rgba(245,197,66,.16), transparent 25%),
    radial-gradient(circle at top left, rgba(255,138,61,.14), transparent 28%),
    var(--bg);
  color: var(--text);
  min-height: 100vh;
}
.shell { width: min(1100px, 92vw); margin: 0 auto; padding: 56px 0 72px; }
.hero { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:28px; }
.eyebrow { margin:0 0 10px; color:var(--accent); font-weight:800; letter-spacing:.16em; font-size:.8rem; }
h1 { margin:0; font-size:clamp(2rem, 5vw, 4rem); line-height:1.02; max-width:780px; }
.lead { color:var(--muted); max-width:760px; font-size:1.05rem; line-height:1.7; }
.badge { border:1px solid var(--border); background:var(--panel); border-radius:999px; padding:10px 14px; color:var(--muted); white-space:nowrap; }
.grid { display:grid; grid-template-columns: 1fr 1fr; gap:22px; }
.card { background:var(--panel); border:1px solid var(--border); border-radius:24px; box-shadow:var(--shadow); backdrop-filter:blur(14px); }
.form-card, .results-card { padding:26px; }
h2 { margin-top:0; }
label { display:block; color:var(--muted); font-size:.92rem; margin:18px 0; }
input, select {
  width:100%; margin-top:8px; border-radius:14px; border:1px solid var(--border); background:#11172a; color:var(--text); padding:13px 14px; font-size:1rem;
}
input[type="range"] { padding:0; accent-color:var(--accent); }
.field-row.two { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.range-line { display:flex; justify-content:space-between; gap:16px; margin-top:8px; font-size:.82rem; }
.range-line strong { color:var(--text); }
button { width:100%; border:0; border-radius:16px; padding:15px 18px; font-weight:800; font-size:1rem; cursor:pointer; color:#141414; background:linear-gradient(135deg,var(--accent),var(--accent-2)); margin-top:6px; }
.note { color:var(--muted); font-size:.82rem; line-height:1.5; }
.metrics { display:grid; gap:14px; }
.metric { background:var(--panel-2); border:1px solid var(--border); border-radius:18px; padding:18px; display:grid; grid-template-columns:1fr auto; align-items:end; }
.metric span { color:var(--muted); }
.metric strong { font-size:2rem; line-height:1; }
.metric small { grid-column:2; color:var(--muted); margin-top:4px; text-align:right; }
.metric.highlight { border-color:rgba(245,197,66,.55); box-shadow: inset 0 0 0 1px rgba(245,197,66,.08); }
.summary, .warning { margin-top:18px; border-radius:16px; padding:16px; line-height:1.6; }
.summary { background:rgba(255,255,255,.06); color:var(--muted); }
.warning { background:rgba(255,92,92,.12); color:var(--danger); border:1px solid rgba(255,92,92,.25); }
.hidden { display:none; }
.explainer { margin-top:22px; padding:26px; }
.explain-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.explain-grid article { background:rgba(255,255,255,.05); border:1px solid var(--border); border-radius:18px; padding:18px; }
.explain-grid h3 { margin-top:0; }
.explain-grid p, .disclaimer { color:var(--muted); line-height:1.6; }
.disclaimer { margin-bottom:0; padding-top:8px; }
@media (max-width: 820px) {
  .hero { align-items:flex-start; flex-direction:column; }
  .grid { grid-template-columns:1fr; }
  .explain-grid { grid-template-columns:1fr; }
}
@media (max-width: 520px) {
  .shell { padding-top:34px; }
  .field-row.two { grid-template-columns:1fr; gap:0; }
  .form-card, .results-card, .explainer { padding:20px; }
}

.meal-plan { margin-top:22px; padding:26px; }
.meal-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:20px 0; }
.meal { padding:20px; border:1px solid var(--border); border-radius:18px; background:rgba(255,255,255,.04); }
.meal h3 { margin:0 0 8px; }
.meal ul { padding-left:20px; line-height:1.8; }
.meal small,.cost-footer small { display:block; color:var(--muted); line-height:1.5; }
.meal-toggle { display:flex; align-items:center; gap:12px; }
.meal-toggle input { width:20px; height:20px; margin:0; accent-color:var(--accent); }
.cost-footer { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:22px 0 8px; border-top:1px solid var(--border); margin-top:24px; }
.cost-footer strong { color:var(--accent); font-size:2rem; white-space:nowrap; }
a { color:var(--accent); } summary { cursor:pointer; padding:12px 0; font-weight:700; }
.table-wrap { overflow-x:auto; } table { width:100%; border-collapse:collapse; font-size:.88rem; }
th,td { padding:12px 8px; border-bottom:1px solid var(--border); text-align:left; }
.shopping-item { padding:12px 0; border-bottom:1px solid var(--border); line-height:1.6; }
:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
@media(max-width:650px) { .meal-grid { grid-template-columns:1fr; } .meal-plan { padding:20px; } .cost-footer { align-items:flex-start; flex-direction:column; } }
.topbar {display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:40px;}
.logo-frame {position:relative;width:320px;max-width:60%;aspect-ratio:1577/315;overflow:hidden;flex-shrink:0;}
.logo-frame img {position:absolute;width:127.584%;max-width:none;left:-13.824%;top:-172.698%;height:auto;}
.topbar label {margin:0;max-width:180px;}
fieldset {border:1px solid var(--border);border-radius:16px;padding:8px 16px;}
legend {color:var(--muted);padding:0 8px;}
.eat-options {display:flex;flex-wrap:wrap;gap:8px 24px;}
.disclaimer {border-left:3px solid var(--accent);padding:12px 16px;background:rgba(245,197,66,.06);}
@media(max-width:520px){.topbar{gap:12px}.topbar select{font-size:.85rem;padding:10px}.logo-frame{width:220px;max-width:55%}}