:root{
    --bg:#11141a;
    --bg-alt:#0d0f14;
    --surface:#1a1e26;
    --surface-2:#20252f;
    --line:#2a3040;
    --line-soft:#232836;
    --text:#e9ecf1;
    --text-dim:#8a90a0;
    --text-faint:#5c6270;
    --amber:#e2a23b;
    --amber-dim:#7a5a26;
    --teal:#49c9bd;
    --teal-dim:#2b6862;
    --coral:#e2695f;
    --coral-dim:#7a3630;
    --violet:#9b8ce0;
    --mono: 'SF Mono', 'Cascadia Code', Consolas, 'Roboto Mono', monospace;
    --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, sans-serif;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:var(--sans);}
  body{padding:28px 32px 60px;}
  .wrap{max-width:1400px;margin:0 auto;}

  /* ---------- Header ---------- */
  .ledger-head{
    display:flex; justify-content:space-between; align-items:flex-end;
    border-bottom:1px solid var(--line); padding-bottom:20px; margin-bottom:24px;
    flex-wrap:wrap; gap:16px;
  }
  .ledger-title{display:flex; flex-direction:column; gap:4px;}
  .eyebrow{
    font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
    color:var(--amber); display:flex; align-items:center; gap:8px;
  }
  .eyebrow::before{content:"◆"; font-size:9px;}
  h1{margin:0; font-size:28px; font-weight:600; letter-spacing:-0.01em;}
  .period{font-family:var(--mono); font-size:12px; color:var(--text-dim); margin-top:2px;}
  .head-total{text-align:right;}
  .head-total .amt{font-family:var(--mono); font-size:38px; font-weight:600; color:var(--amber); line-height:1;}
  .head-total .lbl{font-size:11px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.1em; margin-top:4px;}

  /* ---------- Stat row ---------- */
  .stat-row{display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-bottom:28px; border-radius:6px; overflow:hidden;}
  .stat{background:var(--surface); padding:16px 18px;}
  .stat .v{font-family:var(--mono); font-size:22px; font-weight:600;}
  .stat .k{font-size:11px; color:var(--text-dim); margin-top:4px; text-transform:uppercase; letter-spacing:.06em;}
  .stat.warn .v{color:var(--coral);}
  .stat.good .v{color:var(--teal);}

  /* ---------- Panels grid (overview charts) ---------- */
  .panels{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:16px; margin-bottom:32px;}
  .panel{background:var(--surface); border:1px solid var(--line); border-radius:6px; padding:18px 20px;}
  .panel h3{margin:0 0 14px; font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-dim); font-weight:600;}
  .barlist{display:flex; flex-direction:column; gap:9px;}
  .barrow{display:grid; grid-template-columns:110px 1fr 46px; gap:8px; align-items:center; font-size:12px;}
  .barrow .lbl{color:var(--text-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:var(--mono); font-size:11px;}
  .barrow .track{height:8px; background:var(--surface-2); border-radius:2px; overflow:hidden;}
  .barrow .fill{height:100%; border-radius:2px;}
  .barrow .num{font-family:var(--mono); font-size:11px; color:var(--text-dim); text-align:right;}

  .daily-chart{display:flex; align-items:flex-end; gap:2px; height:90px; margin-top:6px;}
  .daily-chart .dbar{flex:1; background:var(--amber-dim); border-radius:2px 2px 0 0; min-height:1px; position:relative;}
  .daily-chart .dbar:hover{background:var(--amber);}
  .daily-chart .dbar.zero{background:var(--line-soft); height:1px !important;}

  /* ---------- Layout: table + drilldown ---------- */
  .main-grid{display:grid; grid-template-columns:1fr 420px; gap:20px; align-items:start;}
  .table-card{background:var(--surface); border:1px solid var(--line); border-radius:6px; overflow:hidden;}
  .table-toolbar{display:flex; justify-content:space-between; align-items:center; padding:14px 18px; border-bottom:1px solid var(--line); gap:12px;}
  .table-toolbar input{
    background:var(--surface-2); border:1px solid var(--line); color:var(--text);
    padding:7px 10px; border-radius:4px; font-size:13px; width:220px; font-family:var(--sans);
  }
  .table-toolbar input:focus{outline:none; border-color:var(--teal);}
  .table-toolbar .hint{font-size:11px; color:var(--text-faint); font-family:var(--mono);}

  table{width:100%; border-collapse:collapse; font-size:13px;}
  thead th{
    text-align:left; padding:10px 14px; font-size:10.5px; text-transform:uppercase; letter-spacing:.07em;
    color:var(--text-faint); border-bottom:1px solid var(--line); cursor:pointer; user-select:none;
    white-space:nowrap;
  }
  thead th:hover{color:var(--text-dim);}
  thead th.active{color:var(--amber);}
  thead th .arrow{font-size:9px; margin-left:3px;}
  tbody tr{border-bottom:1px solid var(--line-soft); cursor:pointer; transition:background .1s;}
  tbody tr:hover{background:var(--surface-2);}
  tbody tr.selected{background:#26261c; border-left:2px solid var(--amber);}
  tbody tr.zero-row{opacity:.45;}
  td{padding:9px 14px; vertical-align:middle;}
  .name-cell{display:flex; flex-direction:column;}
  .name-cell .fn{font-weight:500;}
  .name-cell .login{font-family:var(--mono); font-size:10.5px; color:var(--text-faint);}
  .usd-cell{font-family:var(--mono); font-weight:600; color:var(--amber); white-space:nowrap;}
  .num-cell{font-family:var(--mono); color:var(--text-dim); white-space:nowrap;}
  .spend-bar-cell{width:140px;}
  .spend-bar-track{height:6px; background:var(--surface-2); border-radius:2px; overflow:hidden;}
  .spend-bar-fill{height:100%; background:linear-gradient(90deg, var(--amber-dim), var(--amber)); border-radius:2px;}
  .model-badge{
    display:inline-block; font-family:var(--mono); font-size:10.5px; padding:2px 7px; border-radius:3px;
    background:var(--surface-2); color:var(--text-dim); border:1px solid var(--line);
  }
  .ghost-flag{color:var(--coral); font-size:10px; font-family:var(--mono); margin-left:6px;}

  /* ---------- Drilldown panel ---------- */
  .drill{background:var(--surface); border:1px solid var(--line); border-radius:6px; padding:0; position:sticky; top:20px; max-height:calc(100vh - 40px); overflow-y:auto;}
  .drill-empty{padding:60px 24px; text-align:center; color:var(--text-faint); font-size:13px;}
  .drill-head{padding:20px 22px 16px; border-bottom:1px solid var(--line); background:var(--surface-2);}
  .drill-head .fn{font-size:19px; font-weight:600;}
  .drill-head .login{font-family:var(--mono); font-size:11px; color:var(--text-faint); margin-top:2px;}
  .drill-head .usd{font-family:var(--mono); font-size:30px; color:var(--amber); font-weight:600; margin-top:10px;}
  .drill-head .meta{display:flex; gap:14px; margin-top:8px; font-size:11px; color:var(--text-dim); font-family:var(--mono); flex-wrap:wrap;}
  .drill-body{padding:18px 22px 24px; display:flex; flex-direction:column; gap:20px;}
  .drill-section h4{margin:0 0 10px; font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--text-dim); font-weight:600;}
  .drill-timeline{display:flex; align-items:flex-end; gap:2px; height:56px;}
  .drill-timeline .tbar{flex:1; background:var(--teal-dim); border-radius:1px 1px 0 0; min-height:1px;}
  .drill-timeline .tbar.zero{background:var(--line-soft); height:1px !important;}
  .ghost-note{
    background:rgba(226,105,95,.1); border:1px solid var(--coral-dim); border-radius:4px;
    padding:8px 10px; font-size:11.5px; color:var(--coral); font-family:var(--mono);
  }
  .taglist{display:flex; flex-wrap:wrap; gap:6px;}
  .tag{font-size:11px; padding:3px 8px; border-radius:3px; background:var(--surface-2); border:1px solid var(--line); color:var(--text-dim); font-family:var(--mono);}

  footer{margin-top:28px; font-size:11px; color:var(--text-faint); font-family:var(--mono); text-align:center;}

  @media (max-width: 980px){
    .panels{grid-template-columns:1fr;}
    .main-grid{grid-template-columns:1fr;}
    .drill{position:static; max-height:none;}
    .stat-row{grid-template-columns:repeat(2,1fr);}
  }

  /* ---------- Drop zone / empty state ---------- */
  .dropzone{
    border:2px dashed var(--line); border-radius:8px; padding:60px 24px; text-align:center;
    color:var(--text-dim); font-size:14px; margin-bottom:28px; transition:border-color .15s, background .15s;
  }
  .dropzone.dragover{ border-color:var(--teal); background:var(--surface); }
  .dropzone .hint{ font-family:var(--mono); font-size:11px; color:var(--text-faint); margin-top:8px; }
  .dropzone input[type="file"]{ display:none; }
  .dropzone .browse{ color:var(--teal); text-decoration:underline; cursor:pointer; }
  .dropzone-title{ margin:0 0 8px; font-size:26px; font-weight:600; letter-spacing:-0.01em; color:var(--text); }
  .dropzone-text{ margin:0 0 14px; font-size:14px; color:var(--text-dim); }

  body.pre-upload{ min-height:100vh; display:flex; }
  body.pre-upload .wrap{ margin:auto; align-self:center; width:100%; }
  body.pre-upload .dropzone{ margin-bottom:0; max-width:560px; margin-left:auto; margin-right:auto; }
  body.pre-upload #parseErrors,
  body.pre-upload #rangeFilterRow,
  body.pre-upload .stat-row,
  body.pre-upload .panels,
  body.pre-upload .main-grid,
  body.pre-upload footer{ display:none !important; }

  /* ---------- Range filter ---------- */
  .range-filter{ display:flex; gap:6px; align-items:center; }
  .range-filter button{
    background:var(--surface-2); border:1px solid var(--line); color:var(--text-dim);
    padding:6px 12px; border-radius:4px; font-size:12px; font-family:var(--sans); cursor:pointer;
  }
  .range-filter button.active{ background:var(--amber-dim); color:var(--text); border-color:var(--amber); }
  .range-filter button:hover:not(.active){ border-color:var(--text-faint); }

  /* ---------- USD estimate note ---------- */
  .usd-note{ font-family:var(--mono); font-size:10px; color:var(--text-faint); margin-top:2px; }

  /* ---------- Parse error banner ---------- */
  .parse-errors{
    background:rgba(226,105,95,.1); border:1px solid var(--coral-dim); border-radius:4px;
    padding:10px 14px; font-size:12px; color:var(--coral); font-family:var(--mono); margin-bottom:16px;
  }