@import url('https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@500;600;700&family=IBM+Plex+Sans+Thai:wght@400;500;600;700&display=swap');

/* ---------------------------------------------------------------------------
   Tokens. Every colour on the page comes from here so the dark theme is one
   block of overrides instead of a second stylesheet.
   ------------------------------------------------------------------------ */
:root{
  --font:'IBM Plex Sans Thai',system-ui,Tahoma,sans-serif;
  --display:'Bai Jamjuree','IBM Plex Sans Thai',system-ui,sans-serif;
  --bg:#f4f2ec;--paper:#fff;--paper-2:#faf9f5;--ink:#18211e;--muted:#646f69;--faint:#8b948f;
  --line:#e7e3d9;--line-strong:#d6d1c4;
  --field:#fff;--field-line:#d9d4c8;--field-focus:#2f7d62;
  --brand:#0f2e27;--brand-2:#174a3d;--brand-3:#1f6150;
  --accent:#c6ef7a;--accent-ink:#1d3a12;
  --soft:#eef5e2;--soft-line:#d5e5bd;--soft-ink:#2f5a26;
  --gold:#e9b949;--gold-soft:#fff4d6;
  --warn-bg:#fdf3e2;--warn-line:#efd6a8;--warn-ink:#7a531c;
  --bad:#b8553a;--bad-bg:#fff1ea;
  --radius:18px;--radius-sm:12px;
  --shadow:0 1px 2px #1a2a2410,0 12px 32px -18px #1a2a2440;
  --shadow-lg:0 2px 4px #0b1f1a1a,0 24px 48px -24px #0b1f1a66;
  color-scheme:light;font-family:var(--font);color:var(--ink);font-size:16px;font-synthesis:none;
  -webkit-font-smoothing:antialiased;
}
@media(prefers-color-scheme:dark){
  :root{
    --bg:#0b100e;--paper:#131a17;--paper-2:#18201d;--ink:#e8efea;--muted:#98a59e;--faint:#76827c;
    --line:#232d29;--line-strong:#303c37;
    --field:#0f1513;--field-line:#2d3934;--field-focus:#8fd46a;
    --soft:#1b2a1c;--soft-line:#2e4430;--soft-ink:#c8e79b;
    --gold-soft:#2b2412;
    --warn-bg:#2a2216;--warn-line:#4a3b22;--warn-ink:#e7c78f;
    --bad:#e08d6c;--bad-bg:#2c1c16;
    --shadow:0 1px 2px #0006,0 14px 34px -20px #000c;
    --shadow-lg:0 2px 4px #0008,0 28px 56px -26px #000;
    color-scheme:dark;
  }
}

/* ---- Base ---------------------------------------------------------------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--bg);line-height:1.6}
button,input,select{font:inherit;color:inherit}
button,a,input,select,summary{-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--field-focus);outline-offset:3px;border-radius:6px}
code{font-family:ui-monospace,'Cascadia Code',Consolas,monospace;font-size:.92em}
h1,h2,h3{font-family:var(--display);margin:0}
.skip{position:fixed;left:12px;top:-100px;z-index:200;background:var(--accent);color:var(--accent-ink);padding:10px 14px;border-radius:10px;font-weight:700}
.skip:focus{top:12px}
.muted{color:var(--muted)}

/* ---- Header -------------------------------------------------------------- */
.site-header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line);color:var(--ink)}
.header-inner{max-width:1320px;margin:0 auto;padding:0 28px;height:64px;display:flex;align-items:center;gap:28px}
.brand{display:flex;align-items:center;gap:11px;flex-shrink:0}
.gem{width:30px;height:30px;filter:drop-shadow(0 4px 8px #2f8f6b40)}
.brand-text{font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:.2px;line-height:1.15}
.brand-text small{display:block;font-family:var(--font);font-weight:500;font-size:11px;letter-spacing:.4px;color:var(--muted)}
.site-header nav{display:flex;gap:4px;margin-left:auto}
.nav-item{display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;font-size:14px;font-weight:500;color:var(--muted);transition:background .15s,color .15s}
.nav-glyph{font-size:15px;line-height:1;opacity:.8}
.nav-item:hover{background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.nav-item.active{background:var(--brand);color:var(--accent);font-weight:700;box-shadow:none}
.nav-item.active .nav-glyph{opacity:1}
.save-status{font-size:12px;color:var(--muted);white-space:nowrap}

/* ---- Hero ---------------------------------------------------------------- */
.hero{position:relative;overflow:hidden;color:#eaf3ee;width:calc(100% - 56px);max-width:1264px;margin:20px auto 0;border-radius:28px;box-shadow:var(--shadow-lg);
  background:
    radial-gradient(700px 380px at 88% 8%,#3fae7a38,transparent 70%),
    radial-gradient(520px 320px at 8% 100%,#c6ef7a1f,transparent 70%),
    linear-gradient(180deg,var(--brand) 0%,#123a31 100%)}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(#ffffff0a 1px,transparent 1px),linear-gradient(90deg,#ffffff0a 1px,transparent 1px);
  background-size:44px 44px;mask-image:linear-gradient(180deg,#000,transparent 85%);-webkit-mask-image:linear-gradient(180deg,#000,transparent 85%)}
.hero-inner{position:relative;padding:28px 32px;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:32px;align-items:start}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:#bfe38c;background:#ffffff0d;border:1px solid #ffffff1a;padding:6px 12px;border-radius:999px}
.eyebrow-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px #c6ef7a33}
h1{font-size:clamp(34px,4.4vw,56px);font-weight:700;line-height:1.18;letter-spacing:-.5px;margin:20px 0 16px;color:#fff}
h1 .accent{background:linear-gradient(95deg,#e3ff9e,#8fdc8a 60%,#58c4a0);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-copy>p{font-size:16px;line-height:1.8;color:#b8cdc3;max-width:470px;margin:0}
.hero-meta{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:12px;font-size:13px;color:#9fb8ad}
.hero-meta a{color:#d7f0b0;text-decoration:underline;text-decoration-color:#d7f0b066;text-underline-offset:4px}
.hero-meta a:hover{text-decoration-color:currentColor}

/* Quick-start card, sitting on the hero */
.quickstart{background:#ffffff08;border:1px solid #ffffff14;border-radius:14px;padding:16px 18px}
.quickstart-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.quickstart-head h2{font-size:14px;font-weight:600;color:#d7e6dd}
.quickstart .text-button{color:#b6cdc2}
.quickstart .text-button:hover{color:#fff}
.quickstart-toggle{min-height:32px}
.quickstart-collapsed{padding-top:10px;padding-bottom:10px;align-self:end}
.quickstart-steps{list-style:none;margin:8px 0 0;padding:0;display:grid}
.quickstart-steps li{display:flex;gap:12px;align-items:baseline;padding:8px 0;border-top:1px solid #ffffff10}
.quickstart-steps li>div{display:flex;flex-wrap:wrap;gap:0 10px;align-items:baseline;min-width:0}
.quickstart-steps b{font-size:14px;font-weight:600;color:#fff}
.quickstart-steps p{margin:0;font-size:13px;line-height:1.6;color:#a9c1b6}
.quickstart-steps a{color:#d7f0b0;text-decoration:underline;text-decoration-color:#d7f0b066;text-underline-offset:3px;font-weight:600}
.quickstart-steps a:hover{text-decoration-color:currentColor}
.qs-no{flex:0 0 22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;border:1px solid #c6ef7a66;color:var(--accent);font-family:var(--display);font-weight:700;font-size:12px;line-height:1;transform:translateY(2px)}
.glossary{margin-top:6px;border-top:1px solid #ffffff10}
.glossary summary{min-height:44px;padding:0 2px;color:#b6cdc2;font-size:13px;font-weight:500}
.glossary summary>span{transition:transform .2s}
.glossary[open] summary>span{transform:rotate(45deg)}
.glossary dl{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px;margin:2px 0 8px}
.glossary dl>div{background:#ffffff08;border:1px solid #ffffff10;border-radius:var(--radius-sm);padding:10px 12px}
.glossary dt{font-weight:700;font-size:13px;color:#fff}
.glossary dd{margin:3px 0 0;font-size:12.5px;line-height:1.6;color:#a9c1b6}

/* ---- Layout -------------------------------------------------------------- */
main{position:relative;max-width:1320px;margin:28px auto 0;padding:0 28px}
.workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start}
.controls-column,.results-column{display:grid;gap:20px;min-width:0}
.panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow);min-width:0}
.prices-panel,.recipe-panel{margin-top:24px}
.section-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}
.section-heading>div{min-width:0}
h2{font-size:19px;font-weight:700;line-height:1.4;display:flex;align-items:center;gap:12px;letter-spacing:-.1px}
.step-no{font-family:var(--display);font-size:13px;font-weight:700;color:var(--accent-ink);background:var(--accent);width:32px;height:32px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.meta{font-size:12.5px;color:var(--faint)}
.section-description{font-size:13.5px;color:var(--muted);line-height:1.7;margin:8px 0 0}
.field-hint{font-size:12.5px;color:var(--muted);line-height:1.7;margin:10px 0 0}
.section-actions{display:flex;align-items:center;gap:14px;flex-shrink:0}
.text-button{border:0;background:none;color:var(--muted);font-size:13px;padding:6px 0;text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:4px}
.text-button:hover{color:var(--ink);text-decoration-color:currentColor}
/* Secondary actions (reset / clear / undo): outlined, never filled like the primary path. */
.section-actions .text-button{min-height:34px;padding:5px 12px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--paper-2);color:var(--ink);font-size:13px;font-weight:600;text-decoration:none}
.section-actions .text-button:hover{background:var(--paper);border-color:var(--field-focus)}
/* Primary path: one filled action in the hero, one quiet text link at the end of 01. */
.first-run-start,.first-run-result{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:700}
.first-run-start{margin-top:18px;padding:10px 18px;border-radius:var(--radius-sm);background:var(--accent);color:var(--accent-ink);font-size:15px;box-shadow:0 10px 22px -12px #c6ef7acc;transition:background .15s}
.first-run-start:hover{background:#d4f58f}
.first-run-result{margin-top:10px;padding:8px 0;font-size:13.5px;color:var(--soft-ink);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--soft-ink) 40%,transparent);text-underline-offset:4px}
.first-run-result:hover{text-decoration-color:currentColor}
.hero :focus-visible{outline-color:#d7f0b0}
.tag{font-size:12px;font-weight:600;background:var(--soft);color:var(--soft-ink);padding:5px 11px;border-radius:999px;white-space:nowrap}
.local-badge{font-size:12px;color:var(--muted);white-space:nowrap}

/* ---- Inputs -------------------------------------------------------------- */
label,.field-label{font-size:14px;font-weight:600;color:var(--ink)}
.field-label small{font-weight:400;color:var(--faint);margin-left:6px;font-size:12.5px}
select,input{width:100%;min-width:0;height:46px;padding:10px 14px;border:1px solid var(--field-line);border-radius:12px;background:var(--field);font-size:15px;font-variant-numeric:tabular-nums;transition:border-color .15s,box-shadow .15s}
select{appearance:none;-webkit-appearance:none;padding-right:40px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238b948f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center}
input:hover,select:hover{border-color:var(--line-strong)}
input:focus,select:focus{outline:none;border-color:var(--field-focus);box-shadow:0 0 0 4px color-mix(in srgb,var(--field-focus) 22%,transparent)}
input::placeholder{color:var(--faint)}
input::-webkit-inner-spin-button{opacity:.35}
.input-invalid{border-color:var(--bad)!important;background:var(--bad-bg)!important}
label select,.input-unit{display:block;margin-top:8px}
.input-unit{position:relative}
.input-unit input{padding-right:48px}
.input-unit span{position:absolute;right:16px;top:50%;transform:translateY(-50%);color:var(--faint);font-size:13px;pointer-events:none}

/* ---- 01 Target ------------------------------------------------------------ */
.reform-guide{background:var(--soft);border:1px solid var(--soft-line);border-radius:var(--radius-sm);padding:14px 16px;margin:0 0 22px;font-size:13.5px;line-height:1.8;color:var(--ink);overflow-wrap:anywhere}
.reform-guide a{color:var(--soft-ink);font-weight:600;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--soft-ink) 40%,transparent);text-underline-offset:4px}
.reform-guide a:hover{text-decoration-color:currentColor}
.reform-guide small{display:block;color:var(--muted);margin-top:4px;font-size:12.5px}
.reform-guide p{margin:6px 0}
.reform-guide code{white-space:nowrap}
.segmented{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:10px 0 24px}
.segmented button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:14px 6px 12px;border:1.5px solid var(--line);border-radius:14px;background:var(--paper-2);color:var(--muted);font-size:14px;font-weight:600;transition:border-color .15s,background .15s,color .15s,transform .15s,box-shadow .15s}
.segmented button .item-icon{width:32px;height:32px;flex-basis:32px;transition:transform .2s}
.segmented button:hover{border-color:var(--line-strong);color:var(--ink);transform:translateY(-1px)}
.segmented button:hover .item-icon{transform:scale(1.08)}
.segmented button[aria-pressed=true]{border-color:var(--field-focus);background:var(--soft);color:var(--soft-ink);box-shadow:0 0 0 3px color-mix(in srgb,var(--field-focus) 18%,transparent)}
.target-fields{display:grid;grid-template-columns:1.3fr 1fr;gap:16px}
.target-panel{border-color:color-mix(in srgb,var(--field-focus) 40%,var(--line));box-shadow:var(--shadow),0 0 0 3px color-mix(in srgb,var(--field-focus) 9%,transparent)}
.target-panel>.section-heading{margin-bottom:10px}
.target-panel .step-no{box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 40%,transparent)}
.target-panel .segmented{margin-bottom:20px}
.target-fields select,.target-fields input{height:48px}
.first-run-cue{margin:0 0 18px}
.target-panel>.reform-guide{background:none;border:0;border-radius:0;padding:0;margin:14px 0 0;font-size:13px;line-height:1.7;color:var(--muted)}
.target-panel>.reform-guide a{white-space:nowrap}
/* Optional inputs: lighter container, smaller labels, explicit ไม่บังคับ badge. */
.optional-block{margin-top:22px;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--paper-2)}
.optional-block label,.optional-block .field-label{font-size:13px;font-weight:600;color:var(--muted)}
.optional-block .field-label small,.route-label small{margin-left:8px;padding:1px 8px;border:1px solid var(--line-strong);border-radius:999px;background:var(--paper);font-size:11.5px;font-weight:600;color:var(--muted)}
.optional-block .section-description{font-size:12.5px;line-height:1.6;margin:4px 0 12px}
.optional-block input,.optional-block select{height:40px;font-size:14px}
.reform-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.reform-fields input{margin-top:6px}
.route-label{display:block;margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.optional-block .field-hint{margin:8px 0 0;font-size:12px;line-height:1.6}

/* ---- 02 Inventory -------------------------------------------------------- */
.inventory-panel>.section-heading{margin-bottom:0}
.inventory-group-label{font-size:11.5px;color:var(--faint);letter-spacing:1.2px;font-weight:700;margin:24px 0 10px;display:flex;align-items:center;gap:10px}
.inventory-group-label::after{content:"";flex:1;height:1px;background:var(--line)}
.inventory-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.inventory-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.inventory-grid>div{display:flex;flex-direction:column;gap:8px;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--paper-2);transition:border-color .15s}
.inventory-grid>div:focus-within{border-color:var(--field-focus)}
.inventory-grid>div>input{margin-top:auto;height:42px;padding:8px 12px;background:var(--field)}
.inventory-item-label{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-height:28px;font-size:13.5px;line-height:1.35}
.inventory-grid:not(.two) .inventory-item-label{flex-direction:column;align-items:flex-start}
.inventory-note{display:flex;gap:8px;font-size:12.5px;color:var(--muted);border-top:1px solid var(--line);margin-top:22px;padding-top:16px;line-height:1.6}

/* ---- Total card ---------------------------------------------------------- */
.total-card{position:relative;overflow:hidden;border-radius:var(--radius);padding:26px 28px 0;color:#eaf3ee;box-shadow:var(--shadow-lg);border:1px solid #ffffff12;
  background:
    radial-gradient(420px 240px at 100% 0%,#58c4a033,transparent 70%),
    radial-gradient(360px 220px at 0% 100%,#e9b94922,transparent 70%),
    linear-gradient(160deg,#133d33,var(--brand) 70%)}
.total-card>*{position:relative;z-index:1}
.total-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.tiny-tag{font-size:12px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase}
.total-card .tiny-tag{color:#c6ef7a}
.live-dot{font-size:12px;color:#a9c4b6;display:flex;align-items:center;gap:7px}
.live-dot::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 #c6ef7a88;animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 #c6ef7a88}70%{box-shadow:0 0 0 8px #c6ef7a00}100%{box-shadow:0 0 0 0 #c6ef7a00}}
.example-banner{margin:14px 0 0;padding:8px 12px;border-radius:var(--radius-sm);background:#ffffff0a;border:1px solid #ffffff1a;color:#cfe0d6;font-size:12.5px;line-height:1.6}
.example-banner b{color:#d7f0b0}
.example-banner[hidden],.price-warning[hidden]{display:none}
.target-name{display:flex;align-items:center;gap:12px;font-size:13.5px;color:#b8cdc3;margin-top:16px}
.target-item-icon{display:flex;align-items:center;justify-content:center;width:48px;height:48px;flex:0 0 48px;background:#ffffff10;border:1px solid #ffffff1f;border-radius:14px}
.target-item-icon .item-icon{width:30px;height:30px;flex-basis:30px}
.total-label{font-size:15px;font-weight:600;margin-top:20px;color:#dbe9e1}
.total-number{font-family:var(--display);font-size:clamp(40px,4.2vw,60px);font-weight:700;letter-spacing:-1px;line-height:1.15;font-variant-numeric:tabular-nums;margin:4px 0 0;color:#fff;overflow-wrap:anywhere}
.currency{font-size:.5em;color:var(--gold);font-weight:700;margin-left:2px}
.unit-cost{font-size:13px;color:#b0c8bc;margin-top:6px}
.cost-breakdown{display:flex;align-items:center;gap:14px;margin-top:20px;padding:16px 0}
.cost-breakdown>div{flex:1;min-width:0;background:#ffffff0a;border:1px solid #ffffff12;border-radius:14px;padding:12px 14px}
.cost-breakdown div>span{display:block;font-size:12px;color:#a9c1b6;line-height:1.5}
.cost-breakdown strong{display:block;font-family:var(--display);font-size:18px;margin-top:4px;font-weight:700;font-variant-numeric:tabular-nums;color:#fff;overflow-wrap:anywhere}
.plus{color:#6f9383;font-size:18px}
.reform-cost-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:0 0 16px;font-size:12.5px;color:#a9c1b6}
.reform-cost-row strong{font-size:15px;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.reform-cost-row[hidden]{display:none}
.savings{background:#0000002e;margin:0 -28px;padding:13px 28px;color:#cfe6b0;font-size:12.5px;line-height:1.6;border-top:1px solid #ffffff10}
.savings:empty{display:none}
.price-warning{display:flex;align-items:center;gap:8px;margin:0 -28px;padding:12px 28px;background:#e9b94914;color:#ffe0a1;font-size:13px;font-weight:500;line-height:1.5;border-top:1px solid #e9b9432e;text-decoration:underline;text-decoration-color:#ffe0a166;text-underline-offset:4px;transition:background .15s}
.price-warning:hover{background:#e9b94926}

/* ---- Advanced (folded) --------------------------------------------------- */
details{border:0}
summary{display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer;list-style:none;font-size:14px;font-weight:600}
summary::-webkit-details-marker{display:none}
.advanced-details>summary{padding:16px 20px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);transition:border-color .15s}
.advanced-details>summary:hover{border-color:var(--line-strong)}
.advanced-details>summary b{display:block;font-size:15px}
.advanced-details>summary small{display:block;color:var(--muted);font-size:12.5px;font-weight:400;margin-top:2px}
.advanced-details>summary>span[aria-hidden],.recipe-panel details>summary>span,.price-group-folded>summary>span[aria-hidden]{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;flex-shrink:0;border-radius:50%;background:var(--paper-2);border:1px solid var(--line);color:var(--muted);font-size:14px;transition:transform .2s}
.advanced-details[open]>summary>span[aria-hidden],.recipe-panel details[open]>summary>span,.price-group-folded[open]>summary>span[aria-hidden]{transform:rotate(45deg)}
.advanced-details[open]>summary{margin-bottom:16px}
.advanced-details>.panel+.mini-stats{margin-top:16px}
.route-comparison h2{font-size:17px}
.route-comparison-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:18px}
.route-option{padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--paper-2);min-width:0}
.route-option:first-child{grid-column:1/-1}
.route-option h3{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14.5px;font-weight:700;margin:0 0 8px}
.route-price{font-family:var(--display);font-size:clamp(19px,1.7vw,25px);font-weight:700;color:var(--brand-3);overflow-wrap:anywhere}
.route-option p{font-size:13px;line-height:1.7;margin:10px 0}
.route-option small{font-size:12.5px;color:var(--muted);line-height:1.7}
.route-option small a{text-decoration:underline;text-underline-offset:3px}
.route-option .copy-item{overflow-wrap:anywhere}
.route-best{border-color:var(--field-focus);background:var(--soft);box-shadow:0 0 0 3px color-mix(in srgb,var(--field-focus) 14%,transparent)}
.route-badge{font-family:var(--font);font-size:11px;font-weight:700;background:var(--brand);color:var(--accent);padding:3px 10px;border-radius:999px;white-space:nowrap}
.route-reform-note[hidden]{display:none}
.mini-stats{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.mini-stat{padding:20px}
.mini-stat>span{font-size:13px;color:var(--muted);display:block}
.mini-stat strong{font-family:var(--display);font-size:30px;font-weight:700;display:block;margin:6px 0 4px;letter-spacing:-.4px}
.mini-stat strong em{font-family:var(--font);font-size:13px;font-style:normal;color:var(--faint);font-weight:400;letter-spacing:0}
.mini-stat small{font-size:12px;color:var(--muted);line-height:1.6;display:block}
.shadow-split{margin-top:10px;padding-top:10px;border-top:1px solid var(--line);display:grid;gap:5px;font-size:12.5px}
.shadow-split div{display:flex;justify-content:space-between;gap:12px;color:var(--muted)}
.shadow-split b{font-variant-numeric:tabular-nums;color:var(--ink)}
.shadow-split[hidden]{display:none}

/* ---- Shopping list ------------------------------------------------------- */
.shopping-panel .section-heading{margin-bottom:8px}
.stock-plan{background:var(--soft);border:1px solid var(--soft-line);border-radius:14px;padding:14px 16px;margin-bottom:20px}
.stock-plan[hidden]{display:none}
.stock-plan-heading{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;font-size:14px;font-weight:700;color:var(--soft-ink);margin-bottom:8px}
.stock-plan-heading a{font-size:12.5px;font-weight:500;text-decoration:underline;text-underline-offset:3px}
.stock-plan-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 0;font-size:13.5px}
.stock-plan-row strong{white-space:nowrap}
.shopping-row{display:flex;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.shopping-row:last-child{border-bottom:0}
.item-glyph{display:flex;width:44px;height:44px;align-items:center;justify-content:center;border-radius:12px;background:var(--paper-2);border:1px solid var(--line);flex-shrink:0}
.item-glyph .item-icon{width:28px;height:28px;flex-basis:28px}
.shopping-item{flex:1;min-width:0}
.shopping-item b{display:block;font-size:14.5px;font-weight:600}
.shopping-item small{color:var(--muted);font-size:12.5px}
.shopping-amount{text-align:right}
.shopping-amount strong{font-family:var(--display);font-size:17px;font-weight:700;display:block;white-space:nowrap}
.shopping-amount small{font-size:12.5px;color:var(--muted);white-space:nowrap}
.shopping-foot{font-size:12.5px;color:var(--muted);margin-top:14px;padding-top:14px;border-top:1px dashed var(--line-strong)}
.empty-message{font-size:14.5px;line-height:1.8;color:var(--soft-ink);background:var(--soft);border-radius:12px;padding:14px 16px}

/* ---- 03 Prices ----------------------------------------------------------- */
.price-advisory{margin:0 0 18px;padding:2px 0 2px 12px;border-left:3px solid color-mix(in srgb,var(--gold) 75%,transparent);font-size:13px;line-height:1.7;color:var(--warn-ink)}
.prices-panel>.section-heading{margin-bottom:12px}
.prices-layout{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:28px;align-items:start}
.price-table-head,.price-row{display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:16px;align-items:center}
.price-table-head{font-size:12px;font-weight:600;color:var(--muted);background:var(--paper-2);border:1px solid var(--line);padding:10px 14px;border-radius:var(--radius-sm)}
.price-table-head span:last-child{text-align:right}
.price-group+.price-group{margin-top:18px}
.price-group-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:14px 14px 8px;border-bottom:1px solid var(--line)}
.price-group-label{font-size:11.5px;letter-spacing:1.2px;font-weight:700;color:var(--faint)}
.price-group-head small{font-size:12px;color:var(--faint)}
.price-group-folded>summary{padding:0;align-items:center}
.price-group-folded>summary>.price-group-head{flex:1}
.price-group-folded>summary>span[aria-hidden]{margin-right:10px}
.price-row{position:relative;padding:10px 14px;border-bottom:1px solid var(--line);min-height:60px;border-radius:10px;transition:background .15s}
.price-row:hover{background:var(--paper-2)}
.price-row .item-label{line-height:1.5}
.price-row input{text-align:right;height:40px;padding:6px 12px;font-size:14px}
.price-row-planned{background:color-mix(in srgb,var(--soft) 70%,transparent)}
.price-row-planned:hover{background:var(--soft)}
.price-plan-tag{position:absolute;right:14px;bottom:2px;font-size:10.5px;font-weight:700;line-height:1.5;background:var(--accent);color:var(--accent-ink);border-radius:999px;padding:0 8px;white-space:nowrap;pointer-events:none}
.price-plan-tag[hidden]{display:none}
.price-off{background:var(--paper-2);color:var(--faint)}
.price-row-off .item-label{opacity:.55}
.price-row-off::after{content:'ไม่ซื้อ';position:absolute;right:14px;bottom:2px;font-size:10.5px;line-height:1.5;color:var(--faint);pointer-events:none}
.compare-card{background:var(--paper-2);border:1px solid var(--line);border-radius:14px;padding:22px;position:sticky;top:84px}
.compare-heading>span{display:block;font-family:var(--display);font-size:17px;font-weight:700;margin-bottom:12px}
.compare-block+.compare-block{margin-top:20px;padding-top:20px;border-top:1px solid var(--line)}
.compare-block-head{display:flex;align-items:center;gap:10px;font-size:14.5px}
.comparison-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.comparison-row small{display:block;color:var(--muted);font-size:12px;margin-top:3px}
.comparison-row strong{white-space:nowrap;font-family:var(--display);font-size:16px}
.compare-verdict{font-size:13.5px;line-height:1.7;padding:12px 14px;background:var(--soft);color:var(--soft-ink);border-radius:12px;margin-top:16px}
.compare-verdict:empty{display:none}
.compare-verdict-loud{background:var(--warn-bg);color:var(--warn-ink);border:1px solid var(--warn-line)}
.compare-note{font-size:12px;color:var(--muted);line-height:1.7;margin:16px 0 0}

/* ---- 04 Recipe ----------------------------------------------------------- */
.recipe-panel>.reform-guide{background:var(--paper-2);border-color:var(--line);margin:16px 0 0;padding:14px 16px}
.guide-steps{margin:8px 0 0;padding-left:20px;display:grid;gap:8px;font-size:13.5px;line-height:1.8}
.guide-steps b{font-weight:700}
.guide-steps+a{display:inline-block;margin-top:14px}
.guide-warn{background:var(--warn-bg);border:1px solid var(--warn-line);border-radius:var(--radius-sm);padding:10px 12px;margin:10px 0 0;font-size:12.5px;line-height:1.8;color:var(--warn-ink)}
.guide-warn code{background:none;padding:0}
.copy-command{display:inline-flex;align-items:center;gap:8px;vertical-align:baseline;border:1px solid var(--line-strong);border-radius:8px;background:var(--paper);padding:3px 4px 3px 10px;margin:2px 0;font:inherit;color:var(--ink);cursor:copy;text-align:left;max-width:100%;transition:border-color .15s,background .15s}
.copy-command:hover{border-color:var(--field-focus);background:var(--soft)}
.copy-command code{font-size:13px;overflow-wrap:anywhere}
.copy-command-hint{font-size:11px;font-weight:600;color:var(--muted);background:var(--paper-2);border-radius:6px;padding:1px 8px;flex-shrink:0}
.copy-command:hover .copy-command-hint{background:var(--accent);color:var(--accent-ink)}
#recipe-steps{margin-top:16px;display:grid;gap:10px;counter-reset:step}
.recipe-step{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:16px;align-items:center;padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:var(--paper-2);transition:border-color .15s}
.recipe-step:hover{border-color:var(--line-strong)}
.recipe-order{font-family:var(--display);font-size:16px;font-weight:700;color:var(--accent-ink);width:40px;height:40px;background:var(--accent);border-radius:12px;display:flex;align-items:center;justify-content:center}
.recipe-title{font-size:15px;font-weight:600}
.recipe-title small{display:block;color:var(--muted);font-weight:400;font-size:12.5px;margin-top:6px;line-height:1.75}
.recipe-materials{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:6px;color:var(--ink);font-size:13.5px}
.recipe-materials>span{display:inline-flex;align-items:center;gap:6px}
.recipe-materials>span[aria-hidden]{color:var(--faint)}
.recipe-sources{display:block;color:var(--soft-ink);margin-bottom:3px}
.recipe-fee{text-align:right;font-family:var(--display);font-size:17px;font-weight:700;white-space:nowrap}
.recipe-fee small{display:block;font-family:var(--font);font-size:12px;font-weight:400;color:var(--muted);margin-top:3px}
.recipe-fee-free{font-family:var(--font);font-size:13.5px;font-weight:600;color:var(--soft-ink)}
.npc-menu-no{display:inline-block;font-size:11.5px;font-weight:700;background:var(--soft);color:var(--soft-ink);border-radius:6px;padding:1px 8px;white-space:nowrap}
.npc-menu-en{color:var(--faint);font-size:12px}
.recipe-panel details{margin-top:14px;border-top:1px solid var(--line)}
.recipe-panel details>summary{padding:16px 0 4px;font-size:14px;color:var(--muted)}
.formula-content{font-size:13.5px;line-height:1.9;color:var(--muted)}
.formula-content b{color:var(--ink)}
.formula-content a,.recipe-panel .reform-guide>a{color:var(--soft-ink);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.npc-dialog{border:1px solid var(--line);border-radius:12px;padding:12px 16px;margin:12px 0;background:var(--paper-2)}
.npc-dialog>b{font-size:12.5px;color:var(--faint);letter-spacing:.3px}
.npc-dialog ol{margin:6px 0 0;padding-left:22px;font-size:13.5px;line-height:2;color:var(--ink)}
.npc-menu-list{display:grid;gap:12px;margin:14px 0}
.npc-menu{border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:var(--paper-2)}
.npc-menu>b{font-size:14.5px;color:var(--ink)}
.npc-menu>small{font-size:12px;color:var(--faint);margin-left:8px}
.npc-menu ul{margin:8px 0 0;padding-left:19px;font-size:12.5px;line-height:1.9;color:var(--ink)}
.npc-menu>p{margin:8px 0 0;font-size:12px;color:var(--muted)}
.npc-town-list{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.npc-town-list li{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--paper-2)}
.npc-town{font-size:11.5px;font-weight:700;color:var(--soft-ink);background:var(--soft);border-radius:6px;padding:2px 8px;white-space:nowrap;flex-shrink:0}
.npc-town-list b{font-size:13.5px;font-weight:600;flex:1 1 auto;min-width:120px;color:var(--ink)}
.stock-row{display:grid;grid-template-columns:1fr auto auto;gap:20px;padding:11px 0;border-bottom:1px solid var(--line);font-size:13px}
.stock-row span:not(:first-child){text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}

/* ---- Items & copy -------------------------------------------------------- */
.item-icon{display:inline-block;width:24px;height:24px;object-fit:contain;flex:0 0 24px;vertical-align:middle;image-rendering:pixelated}
.item-icon-blank{display:inline-flex;align-items:center;justify-content:center;font-size:13px;color:var(--soft-ink);background:var(--soft);border-radius:6px}
.item-label{display:flex;align-items:center;gap:10px;min-width:0}
.copy-item{display:inline;border:0;border-radius:4px;background:none;color:inherit;padding:1px 0;font:inherit;line-height:inherit;text-align:left;text-decoration:underline;text-decoration-style:dotted;text-decoration-color:var(--line-strong);text-underline-offset:4px;cursor:copy;transition:color .15s}
.copy-item:hover{color:var(--field-focus);text-decoration-style:solid;text-decoration-color:currentColor}
.target-name .copy-item{text-decoration-color:#ffffff40}
.target-name .copy-item:hover{color:var(--accent)}
.copy-notice{position:fixed;z-index:100;bottom:24px;left:50%;transform:translateX(-50%);max-width:calc(100vw - 32px);width:max-content;padding:12px 18px;border-radius:14px;background:var(--brand);color:#eaf6e4;border:1px solid #ffffff1c;box-shadow:var(--shadow-lg);font-size:14px;overflow-wrap:anywhere;animation:toast .22s ease-out}
.copy-notice::before{content:"✓ ";color:var(--accent);font-weight:700}
.copy-notice[hidden]{display:none}
@keyframes toast{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
.clipboard-fallback{position:fixed;left:-9999px;top:0;width:1px;height:1px;opacity:0}

/* ---- Footer & sticky total ----------------------------------------------- */
footer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px 20px;padding:32px 0 40px;font-size:12.5px;color:var(--faint)}
footer a{text-decoration:underline;text-underline-offset:3px}
.footer-dot{margin:0 8px}
.sticky-total{display:none}

/* ---- Responsive ---------------------------------------------------------- */
@media(max-width:1100px){
  .hero-inner{grid-template-columns:1fr;gap:24px;padding:28px}
  .hero-copy>p{max-width:640px}
  .quickstart-collapsed{align-self:auto}
  .prices-layout{grid-template-columns:1fr}
  .compare-card{position:static}
}
@media(max-width:900px){
  .header-inner{gap:14px;padding:0 18px}
  .save-status{display:none}
  .workspace{grid-template-columns:1fr}
  .controls-column{display:contents}
  .target-panel{grid-row:1}
  .results-column{grid-row:2}
  .inventory-panel{grid-row:3}
}
@media(max-width:640px){
  html{scroll-padding-top:120px}
  .header-inner{height:auto;flex-wrap:wrap;padding:10px 16px;gap:8px}
  .site-header nav{margin-left:0;width:100%;justify-content:space-between}
  .nav-item{flex:1;justify-content:center;padding:8px 6px;font-size:13px;min-height:40px}
  .brand-text{font-size:15px}
  .hero{width:calc(100% - 32px);margin-top:14px;border-radius:22px}
  .hero-inner{padding:22px 18px;gap:18px}
  main{margin-top:20px}
  h1{font-size:30px;margin:16px 0 12px}
  .hero-copy>p{font-size:14.5px;line-height:1.7}
  .first-run-start{margin-top:14px}
  .quickstart-steps li{padding:6px 0}
  .quickstart-steps li:not(:last-child) p{display:none}
  .quickstart{padding:12px 16px}
  main{padding:0 16px}
  .panel{padding:20px}
  h2{font-size:17px}
  .section-heading{flex-wrap:wrap}
  .inventory-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .total-card{padding:22px 20px 0}
  .savings,.price-warning{margin:0 -20px;padding-left:20px;padding-right:20px}
  .total-number{font-size:42px}
  .cost-breakdown{flex-direction:column;align-items:stretch;gap:8px}
  .cost-breakdown>div{width:100%}
  .plus{display:none}
  .mini-stats{grid-template-columns:1fr}
  .route-comparison-cards{grid-template-columns:1fr}
  .route-option:first-child{grid-column:auto}
  .price-table-head,.price-row{grid-template-columns:minmax(0,1fr) 120px;gap:10px;padding-left:8px;padding-right:8px}
  .recipe-step{grid-template-columns:34px minmax(0,1fr);gap:12px;padding:14px}
  .recipe-order{width:34px;height:34px;font-size:14px}
  .recipe-fee{grid-column:2;text-align:left;font-size:15px}
  .recipe-fee small{display:inline;margin-left:8px}
  .local-badge{display:none}
  footer{flex-direction:column}
  /* The total card sits below the target inputs, so keep the running total in reach. */
  .sticky-total{position:fixed;inset:auto 0 0 0;z-index:90;display:flex;align-items:center;gap:12px;padding:11px 18px calc(11px + env(safe-area-inset-bottom));background:var(--brand);color:#fff;border-top:1px solid #ffffff1a;box-shadow:0 -8px 24px #0003;transform:translateY(110%);transition:transform .18s ease}
  .sticky-total[data-visible=true]{transform:none}
  .sticky-label{font-size:12px;color:#b8cdc3;flex-shrink:0}
  #sticky-total-value{font-family:var(--display);font-size:17px;font-variant-numeric:tabular-nums;margin-left:auto;overflow-wrap:anywhere}
  .sticky-link{font-size:13px;color:var(--accent);text-decoration:underline;text-underline-offset:3px;flex-shrink:0;padding:8px 0}
  body{padding-bottom:58px}
  .text-button,.section-actions .text-button{min-height:44px;display:inline-flex;align-items:center}
}
@media(prefers-color-scheme:dark){
  .nav-item.active{background:var(--accent);color:var(--accent-ink)}
  .hero{border:1px solid #ffffff10}
  .route-price{color:var(--accent)}
  .route-badge{background:var(--accent);color:var(--accent-ink)}
  .recipe-order,.step-no{box-shadow:0 6px 16px -8px #c6ef7a88}
}
/* Reform theme: stone upgrade ladder in the hero, and a short cue when the total changes. */
.stone-ladder{list-style:none;display:flex;align-items:center;gap:0;margin:22px 0 4px;padding:0}
.stone-ladder li{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:64px;font-size:11.5px;font-weight:600;letter-spacing:.4px;color:#8fa89c;opacity:.55;transition:opacity .25s,color .25s}
.stone-ladder li img{width:32px;height:32px;padding:8px;box-sizing:content-box;border-radius:14px;background:#ffffff0d;border:1px solid #ffffff1a;image-rendering:pixelated;transition:transform .25s,box-shadow .25s,background .25s}
.stone-ladder li+li{margin-left:26px}
.stone-ladder li+li::before{content:"›";position:absolute;left:-22px;top:20px;font-size:20px;line-height:1;color:#bfe38c;opacity:.7}
.stone-ladder li.is-path{opacity:.85}
.stone-ladder li.is-target{opacity:1;color:#e3ff9e}
.stone-ladder li.is-target img{background:#c6ef7a24;border-color:#c6ef7a99;transform:translateY(-3px);box-shadow:0 0 0 4px #c6ef7a22,0 10px 24px -8px #c6ef7acc}
.total-number #total{display:inline-block}
.total-number #total.roll-up{animation:roll-up .3s ease-out}
.total-number #total.roll-down{animation:roll-down .3s ease-out}
.total-card.flash{animation:card-flash .3s ease-out}
@keyframes roll-up{from{transform:translateY(40%);opacity:.2}to{transform:none;opacity:1}}
@keyframes roll-down{from{transform:translateY(-40%);opacity:.2}to{transform:none;opacity:1}}
@keyframes card-flash{from{box-shadow:0 0 0 3px #c6ef7a99,0 0 28px #c6ef7a66}to{box-shadow:var(--shadow-lg)}}
@media(max-width:560px){.stone-ladder li{min-width:52px}.stone-ladder li+li{margin-left:18px}.stone-ladder li+li::before{left:-16px}}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}