:root{
    --bg: #0d1922;
    --bg-2: #0a141c;
    --panel: #142430;
    --panel-2: #1a3040;
    --panel-3: #1f394a;
    --line: #2a4356;
    --line-soft: #1e3444;
    --text: #eaf2f6;
    --text-dim: #93b0c2;
    --text-faint: #5c7c90;
    --brass: #d9a44b;
    --brass-soft: #7a5f30;
    --profit: #57b98a;
    --loss: #d97159;
    --alert: #ff5c4d;
    --demand: #4fb8c7;
    --demand-soft: rgba(79,184,199,0.16);
    --supply: #e0954a;
    --supply-soft: rgba(224,149,74,0.16);
    --action: #9490d9;
    --action-soft: rgba(148,144,217,0.16);
    --radius-lg: 18px;
    --radius-md: 12px;
    --shadow: 0 20px 50px -20px rgba(0,0,0,0.6);
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:
      radial-gradient(1200px 700px at 15% -10%, rgba(217,164,75,0.08), transparent 60%),
      radial-gradient(900px 600px at 100% 10%, rgba(79,184,199,0.07), transparent 55%),
      var(--bg);
    color:var(--text);
    font-family:'IBM Plex Sans', -apple-system, sans-serif;
    min-height:100vh;
    padding:28px 20px 60px;
  }
  .mono{font-family:'IBM Plex Mono', monospace;}
  .wrap{max-width:1180px;margin:0 auto;}

  /* ---------- Header ---------- */
  header.top{
    display:flex; justify-content:space-between; align-items:flex-end; gap:24px;
    flex-wrap:wrap;
    border-bottom:1px solid var(--line);
    padding-bottom:20px; margin-bottom:20px;
  }
  .eyebrow{
    font-family:'IBM Plex Mono', monospace; font-size:11.5px; letter-spacing:.16em;
    color:var(--brass); text-transform:uppercase; margin:0 0 8px;
    display:flex; align-items:center; gap:8px;
  }
  .eyebrow::before{content:"";width:18px;height:1px;background:var(--brass);display:inline-block;}
  h1{font-size:26px; margin:0 0 6px; font-weight:600; letter-spacing:-0.01em;}
  .sub{color:var(--text-dim); font-size:13.5px; max-width:560px; line-height:1.5; margin:0;}
  .controls{display:flex; gap:8px; flex-wrap:wrap;}
  .btn{
    font-family:'IBM Plex Mono', monospace; font-size:11.5px; letter-spacing:.04em;
    background:var(--panel); color:var(--text-dim); border:1px solid var(--line);
    padding:9px 14px; border-radius:8px; cursor:pointer; transition:all .15s ease;
    display:flex; align-items:center; gap:7px;
  }
  .btn:hover{border-color:var(--brass); color:var(--text);}
  .btn:focus-visible{outline:2px solid var(--brass); outline-offset:2px;}
  .btn.active{background:var(--panel-3); color:var(--text); border-color:var(--brass);}
  .btn svg{width:13px;height:13px;}

  /* ---------- Breadcrumb ---------- */
  .crumbrow{display:flex; align-items:center; gap:8px; margin-bottom:18px; flex-wrap:wrap; min-height:34px;}
  .crumb{
    display:flex; align-items:center; gap:7px;
    background:var(--panel); border:1px dashed var(--line);
    padding:6px 12px 6px 8px; border-radius:999px; cursor:pointer;
    font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--text-dim);
    transition: border-color .15s ease, color .15s ease;
  }
  .crumb .dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
  .crumb:hover, .crumb:focus-visible{border-color:var(--brass); color:var(--text); outline:none;}
  .crumb.current{color:var(--text); border-style:solid; border-color:var(--line);}
  .crumb-sep{color:var(--text-faint); font-size:12px;}

  /* ---------- Layout ---------- */
  .stage{
    display:flex; flex-direction:column; gap:18px;
  }

  .canvas-card{
    background:linear-gradient(180deg, var(--panel), var(--bg-2));
    border:1px solid var(--line); border-radius:var(--radius-lg);
    padding:6px; position:relative; overflow:hidden;
    box-shadow:var(--shadow);
  }
  .canvas-card::before{
    content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
    background-image:
      linear-gradient(var(--line-soft) 1px, transparent 1px),
      linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
    background-size:36px 36px;
    mask-image: radial-gradient(circle at 50% 40%, black 0%, transparent 75%);
  }
  /* height derived from the viewBox ratio (1200/740) so the canvas — and the
     bubbles inside it — scale up together as the card grows to full width,
     instead of the SVG being letterboxed inside a fixed-height box */
  #svgHost{width:100%; aspect-ratio:1200/740; display:block; position:relative;}
  #svgHost svg{width:100%; height:100%; display:block;}

  .empty-state{
    position:absolute; inset:0; display:none; flex-direction:column; align-items:center; justify-content:center;
    text-align:center; padding:40px; gap:10px; z-index:2;
  }
  .empty-state.show{display:flex;}
  .empty-state .glyph{font-size:30px; color:var(--text-faint);}
  .empty-state p{color:var(--text-dim); font-size:13px; max-width:280px; margin:0;}

  /* bubble node styling */
  .bubble{cursor:grab;}
  .bubble:active{cursor:grabbing;}
  .bubble:focus-visible{outline:none;}
  .bubble:focus-visible .ring{stroke:var(--brass); stroke-width:2.5;}
  .bubble .ring{fill:transparent; stroke:transparent; stroke-width:2.5; transition:stroke .15s ease;}
  .bubble circle.core{ stroke-width:1.6; }
  .bubble .stamp-tick{ stroke-width:1.4; opacity:.55; }
  .bubble text{fill:var(--text); font-family:'IBM Plex Mono', monospace; pointer-events:none; text-anchor:middle;}
  .bubble .lbl-name{font-size:17px; font-weight:700;}
  .bubble .lbl-sales{font-size:14.5px; font-weight:600; fill:var(--brass); font-family:'IBM Plex Mono', monospace;}
  .bubble .lbl-value{font-size:14px; fill:var(--text-dim);}
  .bubble .lbl-icon{font-size:18px;}
  .bubble:hover circle.core{filter:brightness(1.18);}

  .legend-row{
    position:relative; z-index:2; display:flex; gap:16px; flex-wrap:wrap;
    padding:12px 16px; border-top:1px solid var(--line-soft); font-size:11px; color:var(--text-faint);
    font-family:'IBM Plex Mono', monospace;
  }
  .legend-item{display:flex; align-items:center; gap:6px;}
  .legend-swatch{width:9px;height:9px;border-radius:50%;display:inline-block;}

  /* ---------- Side / detail panel ---------- */
  .side{display:flex; flex-direction:row; gap:14px;}
  .side .panel{flex:1; min-width:0;}
  @media (max-width: 920px){ .side{flex-direction:column;} }
  .panel{
    background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-lg);
    padding:18px; box-shadow:var(--shadow);
  }
  .panel h3{margin:0 0 4px; font-size:14px; letter-spacing:.02em;}
  .panel .hint{color:var(--text-faint); font-size:12px; line-height:1.5; margin:0;}

  .rank-list{display:flex; flex-direction:column; gap:8px; margin-top:12px;}
  .rank-item{
    display:flex; align-items:center; gap:10px; padding:8px 10px;
    background:var(--bg-2); border:1px solid var(--line-soft); border-radius:10px;
    cursor:pointer; transition:border-color .15s ease;
  }
  .rank-item:hover, .rank-item:focus-visible{border-color:var(--brass); outline:none;}
  .rank-num{
    font-family:'IBM Plex Mono', monospace; font-size:11px; width:20px; height:20px; border-radius:50%;
    display:flex; align-items:center; justify-content:center; background:var(--panel-3); color:var(--text-dim); flex-shrink:0;
  }
  .rank-name{font-size:12.5px; font-weight:600; flex:1;}
  .rank-opm{font-family:'IBM Plex Mono', monospace; font-size:11px;}
  .rank-opm.pos{color:var(--profit);} .rank-opm.neg{color:var(--loss);}

  /* Detail drawer */
  #drawer{
    position:fixed; top:0; right:0; height:100vh; width:380px; max-width:92vw;
    background:var(--panel); border-left:1px solid var(--line);
    transform:translateX(100%); transition:transform .32s ease; z-index:50;
    display:flex; flex-direction:column; box-shadow:-30px 0 60px -20px rgba(0,0,0,.6);
  }
  #drawer.open{transform:translateX(0);}
  .drawer-head{padding:20px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; gap:10px; align-items:flex-start;}
  .drawer-close{background:none; border:1px solid var(--line); color:var(--text-dim); width:28px; height:28px; border-radius:8px; cursor:pointer; flex-shrink:0;}
  .drawer-close:hover{border-color:var(--brass); color:var(--text);}
  .drawer-tag{
    display:inline-flex; align-items:center; gap:6px; font-family:'IBM Plex Mono', monospace;
    font-size:10.5px; letter-spacing:.06em; padding:4px 9px; border-radius:999px; margin-bottom:8px;
  }
  .drawer-body{padding:20px; overflow-y:auto; flex:1;}
  .stat-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:18px;}
  .stat{background:var(--bg-2); border:1px solid var(--line-soft); border-radius:10px; padding:10px 12px;}
  .stat .k{font-size:10px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.05em; font-family:'IBM Plex Mono', monospace;}
  .stat .v{font-size:15px; font-weight:600; margin-top:3px; font-family:'IBM Plex Mono', monospace;}
  .field{margin-bottom:14px;}
  .field label{display:block; font-size:11px; color:var(--text-faint); margin-bottom:5px; font-family:'IBM Plex Mono', monospace; letter-spacing:.03em;}
  .field input, .field textarea{
    width:100%; background:var(--bg-2); border:1px solid var(--line-soft); border-radius:8px;
    color:var(--text); font-family:'IBM Plex Sans', sans-serif; font-size:13px; padding:9px 10px;
  }
  .field input:focus, .field textarea:focus{outline:none; border-color:var(--brass);}
  .field textarea{resize:vertical; min-height:56px;}
  .expected-loss{font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--text-dim); margin-top:4px;}
  .note-box{
    background:rgba(217,164,75,0.08); border:1px dashed var(--brass-soft); border-radius:10px;
    padding:10px 12px; font-size:11.5px; color:var(--text-dim); line-height:1.5; margin-top:6px;
  }

  .action-editor-modal{
    position:fixed; inset:0; z-index:70; background:rgba(0,0,0,0.56);
    display:none; align-items:center; justify-content:center; padding:18px;
  }
  .action-editor-modal.open{display:flex;}
  .action-editor-card{
    width:min(760px, 100%); max-height:92vh; overflow:auto;
    background:var(--panel); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow);
  }
  .action-editor-head{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:16px 18px; border-bottom:1px solid var(--line);
  }
  .action-editor-head h3{margin:0; font-size:15px;}
  .action-editor-body{padding:16px 18px 18px;}
  .ae-rows{display:flex; flex-direction:column; gap:8px; margin-top:4px;}
  .ae-row{
    display:grid; grid-template-columns:minmax(220px, 1fr) 92px 170px auto; gap:8px;
    align-items:center;
  }
  .ae-row input, .ae-row select{
    width:100%; background:var(--bg-2); border:1px solid var(--line-soft); border-radius:8px;
    color:var(--text); font-size:13px; padding:9px 10px;
  }
  .ae-row input:focus, .ae-row select:focus{outline:none; border-color:var(--brass);}
  .action-editor-actions{
    display:flex; gap:8px; justify-content:flex-end; margin-top:12px; flex-wrap:wrap;
  }

  @media (max-width: 640px){
    .ae-row{grid-template-columns:1fr;}
  }

  /* Sales Order modal (reuses .action-editor-modal/.action-editor-card chrome,
     but overrides it to a fixed-height flex column: header + form stay put,
     only the table area scrolls internally — see .so-table-wrap). */
  .so-card{
    width:min(1280px, 96vw); max-height:90vh;
    display:flex; flex-direction:column; overflow:hidden;
  }
  .so-card .action-editor-body{
    display:flex; flex-direction:column; min-height:0; flex:1 1 auto; overflow:hidden;
  }
  .so-toggle-row{justify-content:flex-start; margin-top:0; margin-bottom:14px; flex:0 0 auto;}
  .so-form-section{
    border:1px solid var(--line-soft); border-radius:12px; padding:14px;
    background:var(--bg-2); margin-bottom:14px; flex:0 0 auto;
  }
  .so-actions-cell{display:flex; gap:6px;}
  .so-icon-btn{
    padding:5px 9px; font-size:13px; line-height:1; font-family:'IBM Plex Sans', sans-serif;
  }
  .so-edit-btn:hover{border-color:var(--brass); color:var(--brass);}
  .so-delete-btn:hover{border-color:var(--alert); color:var(--alert);}
  .so-upload-row{display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap;}
  .so-upload-row input[type="file"]{
    flex:1; min-width:200px; background:var(--bg-2); border:1px solid var(--line-soft); border-radius:8px;
    color:var(--text-dim); font-size:12px; padding:8px 10px;
  }
  .so-add-grid{
    display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px; margin-bottom:4px;
  }
  .so-add-grid input{
    width:100%; background:var(--bg-2); border:1px solid var(--line-soft); border-radius:8px;
    color:var(--text); font-size:12.5px; padding:9px 10px;
  }
  .so-add-grid input:focus{outline:none; border-color:var(--brass);}
  @media (max-width: 760px){
    .so-add-grid{grid-template-columns:repeat(2, minmax(0, 1fr));}
  }
  .so-table-wrap{
    margin-top:14px; border-top:1px solid var(--line-soft); padding-top:0;
    flex:1 1 auto; min-height:220px; overflow:auto; position:relative;
  }
  .so-table{font-size:13.5px;}
  .so-table th{
    white-space:nowrap; position:sticky; top:0; z-index:2;
    background:var(--panel); box-shadow:0 1px 0 var(--line);
  }
  .so-table td{white-space:nowrap; padding:11px 14px; font-size:13.5px; font-weight:700;}
  .so-table tfoot td{
    white-space:nowrap; padding:11px 14px; font-size:13.5px; font-weight:700;
    position:sticky; bottom:0; z-index:2;
    background:var(--panel-3); color:var(--text); border-top:2px solid var(--line);
  }
  .so-table tfoot td:first-child{text-align:left; letter-spacing:.04em;}
  .so-table tbody tr{background:var(--so-row-tint, transparent);}
  .so-table tbody tr:hover{background:var(--panel-2);}

  /* Table view */
  #tableView{display:none;}
  #tableView.show{display:block;}
  .tbl-wrap{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow);}
  .tbl-head{display:flex; justify-content:space-between; align-items:center; padding:16px 18px; border-bottom:1px solid var(--line); flex-wrap:wrap; gap:10px;}
  table{width:100%; border-collapse:collapse; font-size:12.5px;}
  thead th{
    text-align:left; font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:.05em;
    text-transform:uppercase; color:var(--text-faint); padding:10px 14px; border-bottom:1px solid var(--line);
    position:sticky; top:0; background:var(--panel);
  }
  tbody td{padding:9px 14px; border-bottom:1px solid var(--line-soft); color:var(--text-dim);}
  tbody tr:hover{background:var(--panel-2);}
  td.num{font-family:'IBM Plex Mono', monospace; text-align:right; color:var(--text);}
  .pill{display:inline-flex; align-items:center; gap:5px; font-size:10.5px; padding:3px 8px; border-radius:999px; font-family:'IBM Plex Mono', monospace;}
  .tbl-scroll{max-height:560px; overflow:auto;}

  /* Compare view */
  #compareView{display:none;}
  #compareView.show{display:block;}
  .cmp-card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-lg); padding:20px; box-shadow:var(--shadow);}
  .cmp-selects{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:20px;}
  .cmp-selects select{
    background:var(--bg-2); border:1px solid var(--line-soft); color:var(--text); font-family:'IBM Plex Mono', monospace;
    font-size:12.5px; padding:9px 12px; border-radius:8px;
  }
  .cmp-metric{margin-bottom:16px;}
  .cmp-metric .lbl{font-size:11px; color:var(--text-faint); font-family:'IBM Plex Mono', monospace; margin-bottom:6px; letter-spacing:.03em;}
  .cmp-bars{display:flex; flex-direction:column; gap:6px;}
  .cmp-bar-row{display:flex; align-items:center; gap:10px;}
  .cmp-bar-name{width:90px; font-size:11.5px; color:var(--text-dim); flex-shrink:0; text-align:right;}
  .cmp-bar-track{flex:1; height:20px; background:var(--bg-2); border-radius:5px; overflow:hidden; position:relative;}
  .cmp-bar-fill{height:100%; border-radius:5px; transition:width .4s ease;}
  .cmp-bar-val{font-family:'IBM Plex Mono', monospace; font-size:11px; width:120px; text-align:left;}
  .cmp-hc-table{width:100%; border-collapse:collapse; margin-top:6px;}
  .cmp-hc-table th, .cmp-hc-table td{font-size:11.5px; padding:6px 8px; text-align:center; border-bottom:1px solid var(--line-soft);}
  .cmp-hc-table th{color:var(--text-faint); font-family:'IBM Plex Mono', monospace; font-weight:400; font-size:10px;}
  .cmp-hc-table td:first-child, .cmp-hc-table th:first-child{text-align:left; color:var(--text-dim);}

  /* Accordion / mobile list view */
  #listView{display:none;}
  #listView.show{display:block;}
  .acc-plan{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-lg); margin-bottom:12px; overflow:hidden;}
  .acc-plan > summary{
    list-style:none; cursor:pointer; padding:14px 16px; display:flex; align-items:center; gap:12px;
    justify-content:space-between; flex-wrap:wrap;
  }
  .acc-plan > summary::-webkit-details-marker{display:none;}
  .acc-plan-title{display:flex; align-items:center; gap:10px; flex-shrink:0;}
  .acc-plan-meta{display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end;}
  .acc-cat-count{
    font-size:10.5px; white-space:nowrap;
    background:var(--bg-2); border:1px solid var(--line-soft);
    padding:3px 9px; border-radius:999px;
  }
  .acc-sales-count{color:var(--brass);}
  .acc-plan-opm{font-size:12px; min-width:150px; text-align:right; display:inline-block;}
  .acc-so-btn{padding:4px 10px; font-size:10.5px;}
  .acc-rank{width:22px;height:22px;border-radius:50%;background:var(--panel-3);display:flex;align-items:center;justify-content:center;font-size:11px;font-family:'IBM Plex Mono',monospace;}
  .acc-body{padding:0 16px 16px;}
  .acc-plan-breakdown{padding-top:2px; padding-bottom:8px;}
  .acc-plan-breakdown .tt-hc-grid{grid-template-columns:repeat(5, minmax(0, 140px));}
  .acc-cat{border-top:1px solid var(--line-soft); padding-top:10px; margin-top:10px;}
  .acc-cat > summary{cursor:pointer; list-style:none; font-family:'IBM Plex Mono', monospace; font-size:11.5px; letter-spacing:.03em; padding:6px 0; display:flex; align-items:center; gap:8px;}
  .acc-cat > summary::-webkit-details-marker{display:none;}
  .acc-item{
    display:flex; justify-content:space-between; gap:10px; padding:8px 10px; margin:5px 0 5px 18px;
    background:var(--bg-2); border:1px solid var(--line-soft); border-radius:8px; cursor:pointer; font-size:12px;
  }
  .acc-item-main{display:flex; flex-direction:column; gap:3px; min-width:0;}
  .acc-item-main > span:first-child{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .acc-item-meta{font-size:10.5px; color:var(--text-faint); font-family:'IBM Plex Mono', monospace;}
  .acc-item:hover{border-color:var(--brass);}
  .acc-item .v{font-family:'IBM Plex Mono', monospace; color:var(--text-dim); flex-shrink:0;}
  .acc-empty{font-size:11.5px; color:var(--text-faint); margin:6px 0 6px 18px; font-style:italic;}

  .bubble-tooltip{
    position:fixed; z-index:80; pointer-events:none;
    background:var(--panel-2); border:1px solid var(--line); border-radius:12px;
    padding:16px 18px; width:300px; box-shadow:var(--shadow);
    max-height:calc(100vh - 20px); overflow-y:auto;
    opacity:0; transform:translateY(4px); transition:opacity .15s ease, transform .15s ease;
  }
  .bubble-tooltip.show{opacity:1; transform:translateY(0); pointer-events:auto;}
  .tt-head{display:flex; align-items:center; gap:8px; margin-bottom:10px; flex-wrap:wrap;}
  .tt-rank{font-family:'IBM Plex Mono',monospace; font-size:11.5px; background:var(--panel-3); color:var(--text-dim); padding:3px 7px; border-radius:999px;}
  .tt-name{font-weight:700; font-size:16px; flex:1;}
  .tt-opm{font-family:'IBM Plex Mono',monospace; font-size:14px;}
  .tt-opm.pos{color:var(--profit);} .tt-opm.neg{color:var(--loss);}
  .tt-sec-label{font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-faint); margin:12px 0 7px;}
  .tt-hc-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:6px;}
  .tt-hc-item{display:flex; flex-direction:column; align-items:center; background:var(--bg-2); border:1px solid var(--line-soft); border-radius:8px; padding:6px 2px;}
  .tt-hc-k{font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--text-faint);}
  .tt-hc-v{font-family:'IBM Plex Mono',monospace; font-size:15px; font-weight:700; margin-top:2px;}
  .tt-hc-total{margin-top:9px; font-size:13px; color:var(--text-dim); text-align:right;}
  .tt-hc-total b{font-family:'IBM Plex Mono',monospace; color:var(--text); font-size:15px;}
  .tt-metrics{display:flex; flex-direction:column; gap:7px;}
  .tt-metric{display:flex; justify-content:space-between; align-items:flex-start; font-size:13px; color:var(--text-dim); gap:12px;}
  .tt-metric .std{display:block; font-size:10px; color:var(--text-faint); margin-top:2px; font-family:'IBM Plex Mono',monospace;}
  .tt-metric b{font-family:'IBM Plex Mono',monospace; color:var(--text); font-weight:700; white-space:nowrap;}
  .warn{color:var(--alert) !important; font-weight:700 !important;}
  .warn-badge{color:var(--alert); font-weight:700; margin-left:5px; font-size:11px;}

  .std-table{width:100%; border-collapse:collapse; margin-top:10px; font-size:11px;}
  .std-table th, .std-table td{padding:6px 5px; text-align:right; border-bottom:1px solid var(--line-soft);}
  .std-table th{color:var(--text-faint); font-family:'IBM Plex Mono',monospace; font-weight:400; font-size:9px; letter-spacing:.02em;}
  .std-table td{font-family:'IBM Plex Mono',monospace; color:var(--text-dim);}
  .std-table td:first-child, .std-table th:first-child{text-align:left; color:var(--text-dim); font-family:'IBM Plex Sans',sans-serif;}
  .std-table td.warn{color:var(--alert); font-weight:700;}

  .rank-select{
    width:100%; margin:10px 0 4px; background:var(--bg-2); border:1px solid var(--line-soft); color:var(--text);
    font-family:'IBM Plex Mono', monospace; font-size:11.5px; padding:8px 10px; border-radius:8px;
  }

  @media (max-width: 640px){
    h1{font-size:21px;}
    .stat-grid{grid-template-columns:1fr;}
  }

  @media (prefers-reduced-motion: reduce){
    *{transition-duration:0.001ms !important; animation-duration:0.001ms !important;}
  }

  .sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap;}

/* =========================================================
   APP CHROME — login, dashboard, upload, user management
   (shares the same color tokens as the bubble explorer above)
   ========================================================= */
a{color:var(--brass); text-decoration:none;}
a:hover{text-decoration:underline;}

.btn{
  display:inline-flex; align-items:center; gap:6px;
  font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:.03em;
  background:var(--panel-3); color:var(--text); border:1px solid var(--line);
  padding:9px 14px; border-radius:8px; cursor:pointer; text-decoration:none;
}
.btn:hover{border-color:var(--brass); text-decoration:none;}
.btn:focus-visible{outline:2px solid var(--brass); outline-offset:2px;}
.btn-ghost{background:transparent;}
.btn-sm{padding:6px 10px; font-size:11px;}

.alert{padding:10px 14px; border-radius:8px; font-size:13px; margin-bottom:14px;}
.alert-error{background:rgba(255,92,77,0.12); border:1px solid var(--alert); color:#ffb3ab;}
.badge{
  display:inline-block; font-family:'IBM Plex Mono', monospace; font-size:10px;
  background:var(--profit); color:#04150c; padding:2px 7px; border-radius:999px; font-weight:700;
}
.hint{color:var(--text-faint); font-size:12.5px; line-height:1.6;}
.sub{color:var(--text-dim); font-size:13.5px;}
.wrap{max-width:1100px; margin:0 auto;}

/* auth (login) page */
body.auth-page{display:flex; align-items:center; justify-content:center; padding:20px;}
.auth-card{
  width:100%; max-width:380px; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:32px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:14px;
}
.auth-card h1{font-size:19px; margin:0; letter-spacing:-0.01em;}
.auth-card label{display:flex; flex-direction:column; gap:6px; font-size:12.5px; color:var(--text-dim);}
.auth-card input{
  background:var(--bg-2); border:1px solid var(--line-soft); border-radius:8px;
  color:var(--text); font-size:14px; padding:10px 12px;
}
.auth-card input:focus{outline:none; border-color:var(--brass);}
.auth-card button{
  background:var(--brass); color:#1a1206; border:none; border-radius:8px;
  font-weight:700; font-size:14px; padding:11px; cursor:pointer; margin-top:4px;
}
.auth-card button:hover{filter:brightness(1.08);}

/* dashboard / lists */
.topbar{
  max-width:1100px; margin:0 auto 24px; display:flex; justify-content:space-between;
  align-items:flex-end; flex-wrap:wrap; gap:14px; border-bottom:1px solid var(--line); padding-bottom:18px;
}
.topbar h1{font-size:20px; margin:0 0 4px;}
.topbar-actions{display:flex; gap:8px; flex-wrap:wrap;}

.data-table{width:100%; border-collapse:collapse; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden;}
.data-table th, .data-table td{padding:11px 14px; text-align:left; font-size:13px; border-bottom:1px solid var(--line-soft);}
.data-table th{font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--text-faint);}
.data-table tbody tr:hover{background:var(--panel-2);}

/* forms (upload, user management) */
.form-card{max-width:560px; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-lg); padding:24px; margin:0 auto;}
.form-card label{display:flex; flex-direction:column; gap:6px; font-size:12.5px; color:var(--text-dim); margin-bottom:14px;}
.form-card input, .form-card select{
  background:var(--bg-2); border:1px solid var(--line-soft); border-radius:8px;
  color:var(--text); font-size:14px; padding:10px 12px;
}
.form-card input:focus, .form-card select:focus{outline:none; border-color:var(--brass);}

/* =========================================================
   LIGHT THEME — overrides the dark tokens defined in :root
   ========================================================= */
:root[data-theme="light"]{
  --bg: #f3f1ea;
  --bg-2: #ffffff;
  --panel: #ffffff;
  --panel-2: #f2efe5;
  --panel-3: #e9e2d0;
  --line: #ddd3ba;
  --line-soft: #e9e2d0;
  --text: #221a0e;
  --text-dim: #5b4f3a;
  --text-faint: #8c7d5f;
  --brass: #a66a1f;
  --brass-soft: #ecd6a4;
  --profit: #1a8a5a;
  --loss: #bf4530;
  --alert: #d3392a;
  --demand: #1c8798;
  --demand-soft: rgba(28,135,152,0.12);
  --supply: #ac6318;
  --supply-soft: rgba(172,99,24,0.12);
  --action: #554fab;
  --action-soft: rgba(85,79,171,0.12);
  --shadow: 0 20px 50px -20px rgba(30,20,0,0.18);
}

/* ---------- Floating theme toggle ---------- */
.theme-toggle{
  position:fixed; left:20px; bottom:20px; z-index:200;
  display:flex; align-items:center; gap:8px;
  background:var(--panel); border:1px solid var(--line); border-radius:999px;
  padding:8px 12px; box-shadow:var(--shadow); cursor:pointer;
  font-family:'IBM Plex Mono', monospace; font-size:13px; line-height:1;
  color:var(--text-dim); user-select:none;
}
.theme-toggle:hover{border-color:var(--brass);}
.theme-toggle:focus-visible{outline:2px solid var(--brass); outline-offset:2px;}
.theme-toggle .tt-icon{font-size:12px; opacity:.7;}
.theme-toggle .tt-track{
  position:relative; width:38px; height:20px; border-radius:999px; flex-shrink:0;
  background:var(--panel-3); border:1px solid var(--line-soft); transition:background .2s ease;
}
.theme-toggle .tt-knob{
  position:absolute; top:1px; left:1px; width:16px; height:16px; border-radius:50%;
  background:var(--brass); transition:transform .25s ease; box-shadow:0 1px 3px rgba(0,0,0,.3);
}
:root[data-theme="light"] .theme-toggle .tt-knob{transform:translateX(18px);}