:root{
  --outer-bg:#0f0d0a;
  --header-bg:#1a1613;
  --header-border:#332c22;

  --card:#faf6ee;
  --card-2:#f2ead9;
  --line:#e2d5b8;
  --edge:#c9a860;

  --ink:#2a2118;
  --ink-soft:#655a45;
  --ink-faint:#9c8f70;

  --gold:#b8842a;
  --gold-bright:#d19d3a;

  --red-1:#a13a30;
  --red-2:#c14e3e;

  --green:#3f7a3e;
  --green-bg:rgba(63,122,62,0.1);
  --loss:#a13a30;

  --zone-blue:#3d6fae;
  --zone-yellow:#b8901f;
  --zone-red:#c1543a;
  --zone-black:#5a2430;

  --font-display:'Fraunces', serif;
  --font-logo:'Cinzel', serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'IBM Plex Mono', monospace;

  --radius:10px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:var(--outer-bg);
  color:var(--ink);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
}
::selection{ background:var(--gold); color:#fff; }
button, input, select{ font-family:inherit; }
button:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--zone-blue); outline-offset:2px; border-radius:4px;
}
@media (prefers-reduced-motion: reduce){ *{ transition:none !important; animation:none !important; } }

.topbar{
  background:var(--header-bg);
  border-bottom:1px solid var(--header-border);
  padding:14px 22px 0;
  position:sticky; top:0; z-index:30;
}
.topbar-row1{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; padding-bottom:12px; }
.brand{ display:flex; align-items:baseline; gap:9px; }
.brand .mark{ font-family:var(--font-logo); font-weight:700; font-size:19px; letter-spacing:1.5px; color:#f2e9d4; }
.brand .mark span{ color:var(--gold-bright); }
.brand .sub{ font-family:var(--font-mono); font-size:10px; color:#8a7d62; letter-spacing:1.2px; text-transform:uppercase; }

.tabs{ display:flex; gap:2px; background:#241f18; border-radius:8px; padding:3px; }
.tab-btn{
  font-family:var(--font-body); font-weight:500; font-size:13px;
  color:#b3a583; background:transparent; border:none;
  padding:8px 16px; border-radius:6px; cursor:pointer;
}
.tab-btn.active{ background:var(--card); color:var(--ink); }

.premium-toggle{ display:flex; align-items:center; gap:9px; font-family:var(--font-mono); font-size:11px; color:#b3a583; }
.switch{ position:relative; width:34px; height:19px; }
.switch input{ opacity:0; width:0; height:0; }
.slider{ position:absolute; inset:0; background:#2c2619; border:1px solid var(--header-border); border-radius:20px; cursor:pointer; }
.slider::before{ content:""; position:absolute; height:13px; width:13px; left:2px; top:2px; background:#8a7d62; border-radius:50%; transition:0.15s; }
input:checked + .slider{ background:var(--green-bg); border-color:var(--green); }
input:checked + .slider::before{ transform:translateX(15px); background:#6fae6f; }

.filter-row{ display:flex; gap:8px; padding:12px 0; flex-wrap:wrap; }
.filter-box{
  background:#241f18; border:1px solid var(--header-border);
  border-radius:8px; padding:9px 14px; color:#e2d5b8; font-size:13px;
  display:flex; align-items:center; gap:8px; cursor:pointer; user-select:none;
}
.filter-box.search{ flex:1; min-width:180px; cursor:text; }
.filter-box.search input{ background:none; border:none; color:#e2d5b8; font-size:13.5px; width:100%; outline:none; }
.filter-box.search input::placeholder{ color:#6b5f47; }
.filter-box .chev{ color:var(--gold-bright); font-size:9px; margin-left:auto; }

.data-status{
  font-family:var(--font-mono); font-size:11px; color:#8a7d62;
  padding-bottom:10px;
}
.data-status.ok{ color:#7fae6f; }
.data-status.err{ color:#c1857a; }

.cat-overlay{ position:fixed; inset:0; background:rgba(15,13,10,0.6); z-index:100; display:none; align-items:flex-start; justify-content:center; padding-top:88px; }
.cat-overlay.open{ display:flex; }
.cat-menu{ display:flex; box-shadow:0 24px 60px rgba(0,0,0,0.45); border-radius:12px; overflow:hidden; max-width:94vw; }
.cat-col{ width:200px; max-height:66vh; overflow-y:auto; background:var(--card); border-right:1px solid var(--line); }
.cat-col:last-child{ border-right:none; }
.cat-item{ padding:11px 14px; border-bottom:1px solid var(--line); font-size:13px; color:var(--ink); cursor:pointer; display:flex; justify-content:space-between; align-items:center; }
.cat-item:hover{ background:var(--card-2); }
.cat-item.active{ background:var(--ink); color:var(--card); }
.cat-item .arrow{ opacity:0.4; font-size:10px; }

main{ max-width:1040px; margin:0 auto; padding:26px 20px 90px; }
.view{ display:none; }
.view.active{ display:block; }

.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:0 1px 3px rgba(0,0,0,0.06);
  padding:20px;
}
.empty-state{
  padding:40px 20px; text-align:center; color:#8a7d62; font-size:13.5px;
  border:1px dashed var(--header-border); border-radius:12px; margin-top:20px;
}

.panel-label{ font-family:var(--font-display); font-size:11.5px; letter-spacing:1.2px; text-transform:uppercase; color:var(--ink-faint); margin-bottom:14px; font-weight:600; }

.item-header{ display:flex; align-items:center; gap:14px; margin:20px 0 18px; }
.item-icon{
  width:52px; height:52px; border-radius:8px; flex:none;
  background:var(--ink); border:1px solid var(--edge); overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); color:var(--gold-bright); font-size:11px; font-weight:600;
}
.item-icon img{ width:100%; height:100%; object-fit:contain; }
.item-title-block{ flex:1; }
.item-title{ font-family:var(--font-display); font-weight:600; font-size:22px; color:#f2e9d4; }
.item-tier{ font-family:var(--font-mono); font-size:11px; color:var(--gold-bright); }
.pin-btn{ background:#241f18; border:1px solid var(--header-border); border-radius:8px; color:#b3a583; padding:9px 12px; cursor:pointer; font-size:14px; }
.pin-btn.pinned{ color:var(--gold-bright); border-color:var(--gold); }

.mat-row{ display:grid; grid-template-columns:22px 1fr 46px 92px 28px 88px; align-items:center; gap:8px; padding:10px 2px; border-bottom:1px solid var(--line); font-size:13.5px; }
.mat-row:last-child{ border-bottom:none; }
.mat-icon{ width:20px; height:20px; border-radius:4px; background:var(--card-2); border:1px solid var(--line); overflow:hidden; }
.mat-icon img{ width:100%; height:100%; object-fit:contain; }
.mat-name{ color:var(--ink); }
.mat-name .badge{ font-family:var(--font-mono); font-size:9px; letter-spacing:0.5px; text-transform:uppercase; color:#fff; background:var(--zone-red); border-radius:4px; padding:2px 5px; margin-left:6px; }
.mat-qty{ font-family:var(--font-mono); color:var(--ink-soft); text-align:right; }
.price-input{ background:#fff; border:1px solid var(--line); border-radius:6px; color:var(--ink); font-family:var(--font-mono); font-size:13px; padding:6px 8px; width:100%; text-align:right; }
.price-input:focus{ outline:none; border-color:var(--gold); }
.src-toggle{ font-family:var(--font-mono); font-size:9.5px; text-align:center; color:var(--zone-blue); cursor:pointer; }
.src-toggle.manual{ color:var(--red-1); }
.mat-subtotal{ font-family:var(--font-mono); color:var(--ink-soft); text-align:right; }

.expand-link{ font-family:var(--font-mono); font-size:11px; color:var(--zone-blue); cursor:pointer; padding:6px 4px 2px; display:inline-block; }
.sub-recipe{ margin:4px 0 8px 30px; padding:8px 10px; border-left:2px solid var(--line); background:var(--card-2); border-radius:0 6px 6px 0; display:none; }
.sub-recipe.open{ display:block; }

.controls-row{ display:flex; gap:14px; margin-top:16px; flex-wrap:wrap; }
.control{ flex:1; min-width:150px; }
.control label{ display:block; font-family:var(--font-mono); font-size:10px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:1px; margin-bottom:6px; }
.control select, .control input{ width:100%; background:#fff; border:1px solid var(--line); border-radius:7px; color:var(--ink); font-size:13px; padding:9px 10px; }
.control .hint{ font-size:10.5px; color:var(--ink-faint); margin-top:4px; }

.compare-btn{
  margin-top:18px; width:100%; font-family:var(--font-display); font-weight:600; font-size:14px;
  color:#fff; background:var(--ink); border:none; border-radius:8px; padding:13px; cursor:pointer;
}
.compare-btn:hover{ background:#3a2f22; }

.result-panel{ margin-top:16px; display:none; }
.result-panel.open{ display:block; }
.result-line{ display:flex; justify-content:space-between; padding:9px 2px; border-bottom:1px solid var(--line); font-size:13.5px; }
.result-line .val{ font-family:var(--font-mono); color:var(--ink); }
.result-line.win .val{ color:var(--green); font-weight:600; }
.winner-banner{ margin-top:12px; padding:13px 15px; border-radius:8px; background:var(--green-bg); border:1px solid var(--green); display:flex; justify-content:space-between; align-items:center; }
.winner-banner .label{ font-family:var(--font-mono); font-size:10px; letter-spacing:1px; text-transform:uppercase; color:var(--green); }
.winner-banner .amt{ font-family:var(--font-mono); font-size:18px; font-weight:700; color:var(--green); }

.flip-head-row{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; flex-wrap:wrap; gap:10px; }
.fetch-btn{ font-family:var(--font-mono); font-size:11.5px; color:var(--ink); background:var(--card-2); border:1px solid var(--line); border-radius:7px; padding:8px 14px; cursor:pointer; }
.fetch-btn:hover{ border-color:var(--gold); }
.fetch-status{ font-family:var(--font-mono); font-size:11px; color:var(--ink-faint); }
.fetch-status.err{ color:var(--red-1); }
.fetch-status.ok{ color:var(--green); }

.flip-table{ width:100%; border-collapse:collapse; margin-top:4px; }
.flip-table th{ text-align:left; font-family:var(--font-mono); font-size:10px; letter-spacing:1px; text-transform:uppercase; color:var(--ink-faint); padding:0 8px 8px; }
.flip-table th.num, .flip-table td.num{ text-align:right; }
.flip-table td{ padding:10px 8px; border-top:1px solid var(--line); font-size:13.5px; }
.zone-chip{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:11px; color:var(--ink-soft); }
.zone-dot{ width:8px; height:8px; border-radius:50%; flex:none; }
.zone-dot.blue{ background:var(--zone-blue); } .zone-dot.yellow{ background:var(--zone-yellow); }
.zone-dot.red{ background:var(--zone-red); } .zone-dot.black{ background:var(--zone-black); }
.flip-price-input{ background:#fff; border:1px solid var(--line); border-radius:6px; color:var(--ink); font-family:var(--font-mono); font-size:13px; padding:6px 8px; width:76px; text-align:right; }
.src-mini{ font-family:var(--font-mono); font-size:9.5px; color:var(--zone-blue); cursor:pointer; }
.src-mini.manual{ color:var(--red-1); }

.route-block{ margin-top:22px; }
.route-caption{ font-family:var(--font-display); font-size:12px; letter-spacing:0.6px; text-transform:uppercase; color:var(--ink-faint); margin-bottom:10px; font-weight:600; }
.ribbon{ position:relative; display:flex; align-items:center; background:var(--card-2); border:1px solid var(--line); border-radius:12px; padding:20px 24px; }
.ribbon-node{ display:flex; flex-direction:column; gap:3px; min-width:110px; }
.ribbon-node .city{ font-family:var(--font-display); font-weight:600; font-size:15px; color:var(--ink); }
.ribbon-node .price{ font-family:var(--font-mono); font-size:12px; color:var(--ink-soft); }
.ribbon-node.sell{ text-align:right; align-items:flex-end; }
.ribbon-track{ flex:1; height:5px; margin:0 18px; border-radius:6px; position:relative; background:linear-gradient(90deg, var(--from-color,var(--zone-black)), var(--to-color,var(--zone-blue))); }
.ribbon-margin{ position:absolute; left:50%; top:-28px; transform:translateX(-50%); font-family:var(--font-mono); font-size:14px; font-weight:700; color:var(--green); white-space:nowrap; text-align:center; }
.ribbon-margin .tax-note{ display:block; font-size:9.5px; color:var(--ink-faint); font-weight:400; }

.opps-list{ margin-top:16px; display:flex; flex-direction:column; gap:7px; }
.opp-row{ display:flex; justify-content:space-between; align-items:center; background:var(--card-2); border:1px solid var(--line); border-radius:8px; padding:11px 14px; font-size:12.5px; }
.opp-route{ display:flex; align-items:center; gap:7px; color:var(--ink-soft); font-family:var(--font-mono); font-size:11.5px; }
.opp-margin{ font-family:var(--font-mono); font-weight:700; color:var(--green); }

.section-head h1{ font-family:var(--font-display); font-weight:600; font-size:26px; color:#f2e9d4; margin:6px 0 8px; }
.section-head .eyebrow{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:2px; text-transform:uppercase; color:var(--gold-bright); }
.section-head p{ color:#a89a78; font-size:13.5px; max-width:560px; line-height:1.5; margin:0; }

.preview-note{ margin-top:24px; padding:14px 18px; border:1px dashed #3a3226; border-radius:10px; font-size:12px; color:#8a7d62; line-height:1.6; }
.preview-note b{ color:#b3a583; }
.preview-note:empty{ display:none; }

@media (max-width:640px){
  .cat-col{ width:150px; }
  .ribbon{ flex-direction:column; align-items:stretch; gap:12px; }
  .ribbon-node.sell{ text-align:left; align-items:flex-start; }
  .ribbon-track{ width:100%; margin:6px 0; }
  .ribbon-margin{ position:static; transform:none; }
}