:root{
  /* palette */
  --bg:#F4D68C;
  --surface:#FFFDF7;
  --ink:#402924;
  --ink-soft:#8C7A6E;
  --onbg-soft:#6E4A3B;
  --line:rgba(64,41,36,0.14);
  --line-strong:rgba(64,41,36,0.32);
  --olive:#8A8420;
  --sky:#5876A8;
  --ketchup:#C1450F;
  --focus:#5876A8;
  --panel-shadow: 0 1px 2px rgba(64,41,36,0.08), 0 24px 48px -28px rgba(64,41,36,0.45);

  /* fixed olive results panel (deliberate single-tone block, both themes) */
  --olive-bg:#5B5716;
  --olive-bg-raise:#67621B;
  --olive-ink:#F8F2DE;
  --olive-ink-soft:rgba(248,242,222,0.68);
  --olive-line:rgba(248,242,222,0.20);
  --olive-good:#F4D68C;

  /* spacing scale (4px base) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px;

  /* type scale */
  --tx-xs:11px; --tx-sm:13px; --tx-base:15px; --tx-md:17px;
  --tx-lg:22px; --tx-xl:30px; --tx-hero:38px;

  --radius:3px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#211712;
    --surface:#2A1E19;
    --ink:#F2E9DE;
    --ink-soft:#AB9686;
    --onbg-soft:#AB9686;
    --line:rgba(242,233,222,0.14);
    --line-strong:rgba(242,233,222,0.34);
    --olive:#C3BD52;
    --sky:#9AB4DE;
    --ketchup:#E37744;
    --focus:#9AB4DE;
    --panel-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 24px 48px -28px rgba(0,0,0,0.6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --bg:#211712;
  --surface:#2A1E19;
  --ink:#F2E9DE;
  --ink-soft:#AB9686;
  --onbg-soft:#AB9686;
  --line:rgba(242,233,222,0.14);
  --line-strong:rgba(242,233,222,0.34);
  --olive:#C3BD52;
  --sky:#9AB4DE;
  --ketchup:#E37744;
  --focus:#9AB4DE;
  --panel-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 24px 48px -28px rgba(0,0,0,0.6);
  color-scheme: dark;
}

*{ box-sizing:border-box; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Work Sans', ui-sans-serif, system-ui, sans-serif;
  font-weight:400;
  padding-inline:var(--sp-4);
  padding-block: calc(var(--sp-6) + env(safe-area-inset-top, 0px)) calc(var(--sp-7) + env(safe-area-inset-bottom, 0px));
  display:flex;
  flex-direction:column;
  align-items:center;
}
img{ max-width:100%; }
.wrap{ width:100%; max-width:800px; display:flex; flex-direction:column; gap:var(--sp-5); }

header{ display:flex; flex-direction:column; gap:var(--sp-2); }
.header-top{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); }
.eyebrow{
  font-size:var(--tx-xs); letter-spacing:.14em; text-transform:uppercase;
  color:var(--onbg-soft); font-weight:500;
}
.theme-toggle{
  font-family:'Work Sans', sans-serif;
  font-size:var(--tx-xs); letter-spacing:.06em; text-transform:uppercase; font-weight:500;
  color:var(--onbg-soft);
  background:transparent;
  border:1px solid var(--line-strong);
  border-radius:999px;
  padding:5px 12px;
  cursor:pointer;
  flex:none;
}
.theme-toggle:hover{ color:var(--ink); border-color:var(--ink); }
.theme-toggle:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
h1{
  font-weight:300;
  font-size:clamp(30px, 6vw, var(--tx-xl));
  line-height:1.15;
  margin:0;
  text-wrap:balance;
}
.panel{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--panel-shadow);
  display:grid;
  grid-template-columns:1fr 320px;
  overflow:hidden;
}
.col-form{ padding:var(--sp-6); display:flex; flex-direction:column; gap:var(--sp-6); min-width:0; }
.col-result{
  padding:var(--sp-6);
  display:flex; flex-direction:column; gap:var(--sp-5); min-width:0;
  background:var(--olive-bg); color:var(--olive-ink);
}

@media (max-width:660px){
  .panel{ grid-template-columns:1fr; }
  .col-form, .col-result{ padding:var(--sp-5); }
}

.field{ display:flex; flex-direction:column; gap:var(--sp-2); }
label{
  font-size:var(--tx-xs); letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-soft); font-weight:500;
}
.input-unit{ position:relative; display:flex; align-items:baseline; border-bottom:1.5px solid var(--line-strong); }
.input-unit span{ font-size:var(--tx-sm); color:var(--ink-soft); }
.input-unit.suffix{ flex-direction:row-reverse; justify-content:flex-end; }
input[type="number"]{
  flex:1; min-width:0; width:100%;
  font-variant-numeric: tabular-nums;
  font-size:var(--tx-md);
  font-weight:500;
  color:var(--ink);
  background:transparent;
  border:0;
  padding:var(--sp-2) var(--sp-1);
}
.input-unit:focus-within{ border-bottom-color:var(--focus); }
input:focus-visible{ outline:none; }
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button{ margin:0; }

select{
  width:100%;
  font-family:'Work Sans', sans-serif; font-size:var(--tx-sm); font-weight:400;
  color:var(--ink);
  background:transparent;
  border:0; border-bottom:1.5px solid var(--line-strong);
  border-radius:0;
  padding:var(--sp-2) var(--sp-1);
  cursor:pointer;
}
select:focus-visible{ outline:none; border-bottom-color:var(--focus); }
.preset-hint{ font-size:var(--tx-xs); color:var(--ink-soft); line-height:1.5; margin-top:var(--sp-1); }

.options-label{ display:flex; flex-direction:column; gap:var(--sp-1); }
.options-label .hint{ font-size:var(--tx-xs); color:var(--ink-soft); text-transform:none; letter-spacing:0; font-weight:400; }
.option-list{ display:flex; flex-direction:column; }
.option-row{ display:grid; grid-template-columns:52px 1fr 1fr; gap:var(--sp-3); align-items:end; padding-block:var(--sp-3); border-top:1px solid var(--line); }
.option-row:first-of-type{ border-top:0; }
.option-name{ font-size:var(--tx-sm); color:var(--ink-soft); padding-bottom:var(--sp-2); }
@media (max-width:420px){ .option-row{ grid-template-columns:1fr 1fr; } .option-name{ grid-column:1/-1; padding-bottom:0; } }

.stub-kicker{
  font-size:var(--tx-xs); letter-spacing:.1em; text-transform:uppercase; color:var(--olive-ink-soft); font-weight:500;
}
.stub-note{ font-size:var(--tx-xs); color:var(--olive-ink-soft); line-height:1.5; margin-top:calc(var(--sp-1) * -1); }
.best-callout{ font-size:var(--tx-base); font-weight:500; line-height:1.5; min-height:44px; }
.best-callout .amount{ font-variant-numeric:tabular-nums; }

.result-list{ display:flex; flex-direction:column; }
.result-row{
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:var(--sp-3);
  padding-block:var(--sp-3); border-top:1px solid var(--olive-line);
}
.result-row:first-of-type{ border-top:0; }
.result-row.is-best{ background:var(--olive-bg-raise); margin-inline:calc(var(--sp-3) * -1); padding-inline:var(--sp-3); border-radius:var(--radius); border-top-color:transparent; }
.result-name{ display:flex; align-items:flex-start; gap:var(--sp-2); min-width:0; }
.result-name .dot{ width:7px; height:7px; border-radius:50%; background:var(--olive-ink); flex:none; margin-top:6px; }
.result-text{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.result-label{ font-size:var(--tx-sm); font-weight:500; }
.result-sub{ font-size:var(--tx-xs); color:var(--olive-ink-soft); font-variant-numeric:tabular-nums; }
.result-cpp{ font-size:var(--tx-md); font-weight:500; font-variant-numeric:tabular-nums; text-align:right; }
.result-cpp small{ font-size:var(--tx-xs); font-weight:400; color:var(--olive-ink-soft); margin-left:2px; }
.best-tag{ font-size:var(--tx-xs); color:var(--olive-good); font-weight:500; letter-spacing:.04em; text-transform:uppercase; }

footer{ font-size:var(--tx-xs); line-height:1.7; color:var(--onbg-soft); max-width:800px; }