:root{
  --bg:#F5F2EA; --surface:#FFFFFF; --surface-2:#EFEAE0; --line:#E1D9C8;
  --ink:#2A2620; --ink-dim:#6B6355; --ink-faint:#9A9284;
  --gold:#B3822E; --gold-soft:rgba(179,130,46,.12);
  --slate:#5C7285; --slate-soft:rgba(92,114,133,.14);
  --good:#4C8C57; --good-soft:rgba(76,140,87,.12);
  --bad:#B3453A; --bad-soft:rgba(179,69,58,.12);
  --radius:10px; --shadow:0 1px 3px rgba(42,38,32,.06);
}
*{box-sizing:border-box}
body{
  margin:0; color:var(--ink); background:var(--bg);
  background-image:radial-gradient(60rem 40rem at 0% -10%, rgba(179,130,46,.06), transparent 60%),
                   radial-gradient(60rem 40rem at 100% -10%, rgba(92,114,133,.05), transparent 60%);
  background-repeat:no-repeat;
  font-family:Inter, system-ui, -apple-system, sans-serif; font-size:14px; line-height:1.45;
}
.wrap{max-width:1400px; margin:0 auto; padding:22px 26px 56px}
h1,h2{font-family:Fraunces, Georgia, serif; font-optical-sizing:auto; letter-spacing:-.01em}
.num, .kpi-value, .breakdown td.num, .breakdown th.num{font-family:"IBM Plex Mono", monospace; font-variant-numeric:tabular-nums}

/* header */
.app-header{display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:10px; margin-bottom:18px}
.app-header h1{margin:0; font-size:26px; font-weight:600}
.subtitle{color:var(--ink-dim); font-size:13px; margin-top:3px}
.through{font-size:12.5px; color:var(--ink-dim); text-align:right}
.through strong{color:var(--ink); font-family:"IBM Plex Mono", monospace}
.dot-live{display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--good); margin-right:6px; box-shadow:0 0 0 3px var(--good-soft)}
.upload-note{color:var(--gold); font-size:11.5px; margin-top:3px; font-style:italic}

/* cards */
.card, .filters, .uploader, .kpi{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow)}
.card{padding:16px 18px; margin-bottom:16px}
.card-head{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:12px}
.card-head h2{margin:0; font-size:15px; font-weight:600}
.card-sub{color:var(--ink-faint); font-size:12px}
.grid-2{display:grid; grid-template-columns:1.9fr 1fr; gap:16px}
.chart-h{position:relative; height:300px}

/* filters */
.filters{display:flex; flex-wrap:wrap; align-items:flex-end; gap:14px 18px; padding:14px 18px; margin-bottom:16px; position:sticky; top:10px; z-index:20}
.field{display:flex; flex-direction:column; gap:5px}
.field>label{font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint); font-weight:600}
select, input[type=date]{font:inherit; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:7px 10px; min-width:150px}
select:focus, input:focus{outline:2px solid var(--gold-soft); border-color:var(--gold)}
.seg{display:inline-flex; background:var(--surface-2); border:1px solid var(--line); border-radius:8px; padding:3px}
.seg button{font:inherit; border:0; background:transparent; color:var(--ink-dim); padding:6px 14px; border-radius:6px; cursor:pointer; font-weight:500}
.seg button.active{background:var(--surface); color:var(--gold); box-shadow:var(--shadow); font-weight:600}
.chips{display:flex; gap:6px; flex-wrap:wrap}
.chips button{font:inherit; font-size:12px; border:1px solid var(--line); background:var(--surface); color:var(--ink-dim); padding:6px 12px; border-radius:999px; cursor:pointer}
.chips button:hover{border-color:var(--gold); color:var(--gold)}
.chips button.active{background:var(--gold); border-color:var(--gold); color:#fff}
.check{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-dim); cursor:pointer; align-self:flex-end; padding-bottom:6px}
.check input{width:16px; height:16px; accent-color:var(--gold)}

/* uploader */
.uploader{margin-bottom:16px; padding:0 4px}
.uploader summary{cursor:pointer; padding:12px 16px; font-weight:600; color:var(--ink-dim); list-style:none}
.uploader summary::-webkit-details-marker{display:none}
.up-plus{color:var(--gold); font-weight:700; margin-right:6px}
.up-body{padding:0 16px 16px}
.dropzone{border:1.5px dashed var(--line); border-radius:var(--radius); background:var(--surface-2); padding:20px; text-align:center; color:var(--ink-dim)}
.dropzone.hover{border-color:var(--gold); background:var(--gold-soft)}
.dz-note{font-size:12px; color:var(--ink-faint); margin-top:6px; max-width:640px; margin-left:auto; margin-right:auto}
.link{background:none; border:0; color:var(--gold); font:inherit; font-weight:600; cursor:pointer; text-decoration:underline; padding:0}
.up-row{display:flex; align-items:center; gap:14px; margin-top:12px}
.btn-ghost{font:inherit; font-size:12px; border:1px solid var(--line); background:var(--surface); color:var(--ink-dim); padding:6px 12px; border-radius:8px; cursor:pointer}
.up-status{font-size:12.5px}
.up-status.ok{color:var(--good)} .up-status.err{color:var(--bad)} .up-status.warn{color:var(--gold)}

/* KPIs */
.kpi-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-bottom:16px}
.kpi{padding:15px 16px; display:flex; flex-direction:column; gap:6px}
.kpi-label{font-size:12px; color:var(--ink-dim); font-weight:500}
.kpi-value{font-size:25px; font-weight:600; letter-spacing:-.01em}
.kpi-sub{font-size:12px; color:var(--ink-dim); display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.badge{font-size:11.5px; font-weight:600; padding:2px 8px; border-radius:999px}
.badge.good{background:var(--good-soft); color:var(--good)} .badge.bad{background:var(--bad-soft); color:var(--bad)}
.badge.neutral{background:var(--surface-2); color:var(--ink-dim)}
.v-good{color:var(--good)} .v-bad{color:var(--bad)} .v-neutral{color:var(--ink-dim)}

/* table */
.table-scroll{overflow-x:auto}
table.breakdown{width:100%; border-collapse:collapse; font-size:13px}
.breakdown th, .breakdown td{padding:9px 12px; text-align:left; white-space:nowrap}
.breakdown th.num, .breakdown td.num{text-align:right}
.breakdown thead th{position:sticky; top:0; background:var(--surface); color:var(--ink-dim); font-weight:600; font-size:12px; border-bottom:2px solid var(--line); cursor:pointer; user-select:none; font-family:Inter,sans-serif}
.breakdown thead th:hover{color:var(--gold)} .breakdown .arw{color:var(--gold); font-size:10px}
.breakdown tbody tr{border-bottom:1px solid var(--line)}
.breakdown tbody tr:hover{background:var(--surface-2)}
.breakdown tbody tr.unb td{color:var(--ink-dim)}
.breakdown tfoot td{padding:11px 12px; font-weight:700; border-top:2px solid var(--line); background:var(--surface-2)}
.dot{display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:8px; vertical-align:middle}
.bt{font-size:11px; color:var(--ink-faint); font-family:Inter,sans-serif}
.ub-tag{font-size:10px; text-transform:uppercase; letter-spacing:.04em; color:var(--slate); background:var(--slate-soft); padding:1px 6px; border-radius:4px; font-family:Inter,sans-serif}
.na{color:var(--ink-faint)}

/* misc */
.loading, .err-box{padding:60px; text-align:center; color:var(--ink-dim); background:var(--surface); border:1px solid var(--line); border-radius:var(--radius)}
.err-box{color:var(--bad)}

@media (max-width:1080px){ .kpi-grid{grid-template-columns:repeat(2,1fr)} .grid-2{grid-template-columns:1fr} .filters{position:static} }
@media (max-width:560px){ .kpi-grid{grid-template-columns:1fr} }