:root {
    --bg: #0f1417; --panel: #161d22; --panel-2: #1c252b; --line: #2a363d;
    --ink: #e8edf0; --ink-dim: #9aa9b2; --ink-faint: #6b7a83;
    --accent: #ff7a1a; --accent-dim: #c95f12; --cool: #3da9c9;
    --ok: #56c596; --warn: #ffb547; --bad: #ff6b6b;
    --mono: 'SFMono-Regular', ui-monospace, 'Cascadia Code', Consolas, monospace;
    --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  }
  * { box-sizing: border-box; }
  body { margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); line-height:1.5; -webkit-font-smoothing:antialiased; }

  /* top nav */
  .topbar { background:var(--panel); border-bottom:1px solid var(--line); padding:0 24px; height:48px; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:100; }
  .topbar-brand { font-family:var(--mono); font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--accent); text-decoration:none; }
  .topbar-right { font-family:var(--mono); font-size:10.5px; color:var(--ink-faint); letter-spacing:1px; }

  .wrap { max-width:1080px; margin:0 auto; padding:28px 20px 80px; }
  header { border-bottom:1px solid var(--line); padding-bottom:18px; margin-bottom:26px; }
  .eyebrow { font-family:var(--mono); font-size:11px; letter-spacing:2.5px; text-transform:uppercase; color:var(--accent); margin:0 0 6px; }
  h1 { margin:0; font-size:26px; font-weight:650; letter-spacing:-0.3px; }
  .sub { color:var(--ink-dim); font-size:13.5px; margin-top:6px; }

  .grid { display:grid; grid-template-columns:360px 1fr; gap:26px; align-items:start; }
  @media(max-width:820px){ .grid{ grid-template-columns:1fr; } }

  .panel { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:22px; }
  .panel h2 { font-family:var(--mono); font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--ink-faint); margin:0 0 18px; font-weight:600; }
  .field { margin-bottom:18px; }
  label.fl { display:block; font-size:12.5px; color:var(--ink-dim); margin-bottom:7px; font-weight:500; }
  input[type=number], select { width:100%; background:var(--panel-2); border:1px solid var(--line); color:var(--ink); padding:11px 12px; border-radius:7px; font-size:15px; font-family:var(--sans); outline:none; transition:border-color .15s; }
  input[type=number]:focus, select:focus { border-color:var(--accent); }
  input[type=number]::-webkit-inner-spin-button { opacity:.5; }
  .unit-row { position:relative; }
  .unit-row .suffix { position:absolute; right:12px; top:50%; transform:translateY(-50%); font-family:var(--mono); font-size:12px; color:var(--ink-faint); pointer-events:none; }

  .seg { display:flex; gap:0; border:1px solid var(--line); border-radius:7px; overflow:hidden; }
  .seg button { flex:1; background:var(--panel-2); border:none; color:var(--ink-dim); padding:11px 8px; font-size:13.5px; cursor:pointer; font-family:var(--sans); transition:background .15s,color .15s; border-right:1px solid var(--line); }
  .seg button:last-child { border-right:none; }
  .seg button.on { background:var(--accent); color:#1a0f06; font-weight:600; }
  .seg button:not(.on):hover { background:#232e35; color:var(--ink); }
  .hint { font-size:11.5px; color:var(--ink-faint); margin-top:7px; line-height:1.45; }
  .subblock { margin-top:6px; padding:14px; background:var(--panel-2); border:1px dashed var(--line); border-radius:8px; }
  .subblock.hidden { display:none; }

  /* suggestion helper */
  .suggest-toggle { width:100%; margin-top:20px; display:flex; align-items:center; gap:10px; background:var(--panel-2); border:1px solid var(--line); color:var(--ink); padding:12px 14px; border-radius:8px; cursor:pointer; font-family:var(--sans); font-size:13.5px; font-weight:500; transition:border-color .15s,background .15s; text-align:left; }
  .suggest-toggle:hover { border-color:var(--cool); background:#1f2a30; }
  .suggest-toggle .st-ic { font-family:var(--mono); font-size:16px; width:18px; height:18px; flex-shrink:0; display:grid; place-items:center; color:var(--cool); transition:transform .2s; }
  .suggest-toggle.open .st-ic { transform:rotate(45deg); }
  .suggest-toggle .st-tag { margin-left:auto; font-family:var(--mono); font-size:9.5px; letter-spacing:1px; text-transform:uppercase; color:var(--ink-faint); border:1px solid var(--line); padding:2px 7px; border-radius:4px; }
  .suggest-block { margin-top:10px; padding:0 16px; max-height:0; overflow:hidden; border:1px solid transparent; border-radius:8px; transition:max-height .28s ease,padding .28s ease,border-color .28s; }
  .suggest-block.open { max-height:1000px; padding:18px 16px; background:var(--panel-2); border-color:rgba(61,169,201,.25); }
  .sb-intro { font-size:12px; color:var(--ink-dim); margin:0 0 16px; line-height:1.5; }
  .seg.sm button { padding:9px 6px; font-size:13px; }
  .sb-result { margin-top:6px; }
  .res-card { background:var(--panel); border:1px solid var(--cool); border-radius:9px; padding:16px 17px; }
  .res-card.warn-edge { border-color:var(--warn); }
  .res-card.review-edge { border-color:var(--bad); }
  .res-line { display:flex; gap:22px; flex-wrap:wrap; margin-bottom:12px; }
  .res-item .rl { font-family:var(--mono); font-size:9.5px; letter-spacing:1px; text-transform:uppercase; color:var(--ink-faint); }
  .res-item .rv { font-size:20px; font-weight:650; margin-top:3px; letter-spacing:-0.3px; }
  .res-item .rv.cool { color:var(--cool); }
  .res-item .rv.accent { color:var(--accent); }
  .res-note { font-size:11.8px; line-height:1.5; color:var(--ink-dim); padding-top:11px; border-top:1px solid var(--line); }
  .res-note.suggest { color:var(--warn); }
  .res-note.review { color:var(--bad); }
  .res-note.big { font-size:14px; font-weight:600; line-height:1.45; padding:11px 13px; margin-top:10px; border-radius:7px; border-top:none; }
  .res-note.suggest.big { background:rgba(255,181,71,.12); border:1px solid rgba(255,181,71,.35); }
  .res-note.review.big { background:rgba(255,107,107,.12); border:1px solid rgba(255,107,107,.4); }
  .res-note + .res-note { margin-top:7px; padding-top:0; border-top:none; }
  .res-note.big + .res-note.big { margin-top:8px; }

  /* output */
  .out-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px; flex-wrap:wrap; gap:10px; }
  .out-title { font-size:19px; font-weight:600; }
  .tx-count { font-size:13px; font-weight:600; color:var(--accent); margin-left:6px; font-family:var(--mono); letter-spacing:0.3px; }
  .order-sum { width:100%; border-collapse:collapse; margin-bottom:18px; background:var(--panel); border:1px solid var(--cool); border-radius:8px; overflow:hidden; font-size:13px; }
  .order-sum th { text-align:left; font-family:var(--mono); font-size:10px; letter-spacing:1px; text-transform:uppercase; color:var(--cool); padding:9px 12px; border-bottom:1px solid var(--line); background:var(--panel-2); }
  .order-sum td { padding:10px 12px; border-bottom:1px solid var(--line); color:var(--ink); }
  .order-sum tr:last-child td { border-bottom:none; }
  .order-sum td strong { color:var(--accent); font-size:15px; }
  .badge { font-family:var(--mono); font-size:11px; letter-spacing:1px; padding:4px 9px; border-radius:5px; background:rgba(61,169,201,.14); color:var(--cool); border:1px solid rgba(61,169,201,.3); }
  .badge.six { background:rgba(255,122,26,.14); color:var(--accent); border-color:rgba(255,122,26,.35); }
  .kva-cards { display:flex; gap:12px; margin-bottom:20px; flex-wrap:wrap; }
  .kva-card { flex:1; min-width:140px; background:var(--panel); border:1px solid var(--line); border-radius:9px; padding:15px 16px; }
  .kva-card .k-lbl { font-size:11px; text-transform:uppercase; letter-spacing:1px; color:var(--ink-faint); font-family:var(--mono); }
  .kva-card .k-val { font-size:27px; font-weight:650; margin-top:4px; letter-spacing:-0.5px; }
  .kva-card .k-val span { font-size:14px; color:var(--ink-dim); font-weight:400; }
  .kva-card.accent .k-val { color:var(--accent); }
  table.spec { width:100%; border-collapse:collapse; font-size:13.5px; }
  table.spec th { text-align:left; font-family:var(--mono); font-size:10.5px; letter-spacing:1px; text-transform:uppercase; color:var(--ink-faint); padding:8px 12px; border-bottom:1px solid var(--line); font-weight:600; }
  table.spec td { padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top; }
  table.spec tr:last-child td { border-bottom:none; }
  table.spec td.item { color:var(--ink-dim); width:44%; }
  table.spec td.val { color:var(--ink); font-weight:500; }
  table.spec td.val code { font-family:var(--mono); background:var(--panel-2); padding:1px 6px; border-radius:4px; color:var(--accent); font-size:12.5px; }
  .section-row td { font-family:var(--mono); font-size:10.5px; letter-spacing:1.5px; text-transform:uppercase; color:var(--cool); background:var(--panel-2); padding-top:11px; padding-bottom:11px; }
  .leg-head td { font-size:14px; font-weight:650; letter-spacing:0.3px; color:var(--accent); background:var(--panel); padding:14px 12px; border-bottom:2px solid var(--accent); }
  .spec-card + .spec-card { margin-top:18px; }
  .notice { margin-top:18px; padding:13px 15px; border-radius:8px; font-size:12.8px; line-height:1.5; display:flex; gap:10px; align-items:flex-start; }
  .notice.warn { background:rgba(255,181,71,.1); border:1px solid rgba(255,181,71,.3); color:#ffd89b; }
  .notice.info { background:rgba(61,169,201,.08); border:1px solid rgba(61,169,201,.25); color:#bfe3ee; }
  .notice .ic { font-family:var(--mono); font-weight:700; flex-shrink:0; }
  .actions { margin-top:22px; display:flex; gap:10px; flex-wrap:wrap; }
  .btn { background:var(--accent); color:#1a0f06; border:none; padding:11px 18px; border-radius:7px; font-size:13.5px; font-weight:600; cursor:pointer; font-family:var(--sans); transition:background .15s; }
  .btn:hover { background:#ff8c3a; }
  .btn.ghost { background:transparent; border:1px solid var(--line); color:var(--ink-dim); }
  .btn.ghost:hover { border-color:var(--accent); color:var(--ink); }
  .foot { margin-top:30px; font-size:11.5px; color:var(--ink-faint); border-top:1px solid var(--line); padding-top:14px; line-height:1.5; }
  .toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(80px); background:var(--ok); color:#07120c; padding:11px 20px; border-radius:8px; font-size:13.5px; font-weight:600; opacity:0; transition:transform .25s,opacity .25s; z-index:50; }
  .toast.show { transform:translateX(-50%) translateY(0); opacity:1; }

  /* error state when engine fails to load */
  .engine-error { display:none; background:rgba(255,107,107,.1); border:1px solid rgba(255,107,107,.4); color:#ff9999; padding:18px 20px; border-radius:9px; font-size:13.5px; text-align:center; margin:40px 0; }
  .engine-error.show { display:block; }

  /* PRINT */
  @media print {
    @page { size:A4 portrait; margin:14mm 16mm; }
    * { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
    body { background:#fff; color:#111; font-size:10.5px; }
    .wrap { max-width:none; margin:0; padding:0; }
    .topbar { display:none !important; }
    #inputs,.actions,.foot,.toast,.kva-cards,.badge,.suggest-toggle,.suggest-block { display:none !important; }
    .grid { display:block; gap:0; }
    header { border-bottom:1.5px solid #111; padding-bottom:8px; margin-bottom:12px; }
    .eyebrow { color:#444; margin-bottom:3px; font-size:9px; }
    h1 { font-size:15px; color:#111; }
    .sub { display:none; }
    .out-head { margin-bottom:10px; }
    .out-title { font-size:13px; color:#111; font-weight:700; }
    .tx-count { color:#b5520a !important; font-size:11px; }
    .order-sum { border:1.5px solid #111 !important; background:#fff !important; border-radius:0; margin-bottom:16px; font-size:11px; page-break-inside:avoid; }
    .order-sum th { background:#e8e8e8 !important; color:#111 !important; border-bottom:1px solid #111; padding:6px 10px; font-size:9px; }
    .order-sum td { color:#111 !important; padding:7px 10px; border-bottom:1px solid #bbb; }
    .order-sum td strong { color:#111 !important; font-size:13px; }
    .panel { border:1px solid #888 !important; background:#fff !important; border-radius:0; }
    table.spec { font-size:9.5px; }
    table.spec th, table.spec td { padding:4px 9px; border-bottom:1px solid #ccc; }
    table.spec td.item { color:#222; width:42%; }
    table.spec td.val { color:#111; font-weight:400; }
    table.spec td.val code { background:none !important; color:#111 !important; border:none !important; padding:0; font-family:var(--mono); font-weight:600; }
    table.spec td.val span { color:#666 !important; }
    .section-row td { background:#e8e8e8 !important; color:#111 !important; padding:5px 9px; font-weight:700; }
    .leg-head td { background:#fff !important; color:#111 !important; font-size:12px !important; border-bottom:1.5px solid #111 !important; padding:8px 9px !important; }
    .spec-card { page-break-inside:avoid; break-inside:avoid; margin-top:0; }
    .spec-card + .spec-card { margin-top:14px; }
    .notice { font-size:9px; padding:7px 10px; margin-top:8px; border-radius:0; page-break-inside:avoid; background:#f5f5f5 !important; border:1px solid #bbb !important; color:#333 !important; }
    .notice.info { display:none !important; }
    .notice.warn { background:#f5f5f5 !important; border:1px solid #999 !important; color:#222 !important; }
    .notice .ic { color:#333 !important; }
    .print-foot { display:block !important; margin-top:10px; padding-top:6px; border-top:1px solid #ccc; font-size:8px; color:#777; }
    #notices { page-break-inside:avoid; }
    .notice { page-break-inside:avoid; }
  }
  .print-foot { display:none; }