:root {
  --sz-paper:      #F7F6F3;
  --sz-surface:    #FFFFFF;
  --sz-zone:       #FAFAF8;   /* totals rows, quiet strips              */
  --sz-rule:       #ECECE8;   /* hairline between rows                  */
  --sz-rule-2:     #D8D7D2;   /* header underline, frozen-column edge   */
  --sz-ink:        #1A1A1A;
  --sz-ink-2:      #56534A;
  --sz-ink-3:      #8E8A7E;   /* column labels, captions                */

  --sz-gold:       #F9A563;
  --sz-gold-edge:  #F57357;
  --sz-gold-wash:  #FEF3EB;
  --sz-gold-ink:   #241E00;

  --sz-ok:         #2E7D32;
  --sz-ok-bg:      #ECF4ED;
  --sz-warn:       #9A4A00;
  --sz-warn-bg:    #FBF0E2;
  --sz-bad:        #C62828;
  --sz-bad-bg:     #FBEAEA;

  --sz-t1:  10px;    /* micro label, uppercase                          */
  --sz-t2:  11.5px;  /* secondary, captions                             */
  --sz-t3:  12.5px;  /* table body, controls — the workhorse            */
  --sz-t4:  14.5px;  /* card title                                      */
  --sz-t5:  20px;    /* headline figure                                 */
  --sz-t6:  26px;    /* hero figure                                     */
  --sz-font: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --sz-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --sz-s1: 4px;  --sz-s2: 8px;  --sz-s3: 12px;  --sz-s4: 16px;  --sz-s5: 24px;

  --sz-r1: 6px;  --sz-r2: 10px;
  --sz-shadow: 0 1px 2px rgba(0,0,0,.05);

  --sz-row-y: 9px;
}
.sz-compact { --sz-row-y: 4px; --sz-t3: 12px; }

.sz-num, .sz-table td.n, .sz-table th.n {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  text-align: right;
  white-space: nowrap;
}

.sz-scroll { overflow: auto; min-width: 0; }

.sz-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--sz-font);
  font-size: var(--sz-t3);
  color: var(--sz-ink);
}
.sz-table thead th {
  position: sticky; top: 0; z-index: 3;
  background: var(--sz-surface);
  padding: var(--sz-s2) var(--sz-s3);
  text-align: right; white-space: nowrap;
  font-size: var(--sz-t1); font-weight: 700; color: var(--sz-ink-3);
  text-transform: uppercase; letter-spacing: .08em;
  border-bottom: 1.5px solid var(--sz-rule-2);
}
.sz-table thead th:first-child { text-align: left; }

.sz-table tbody td {
  padding: var(--sz-row-y) var(--sz-s3);
  border-bottom: 1px solid var(--sz-rule);
  background: var(--sz-surface);
  transition: background .08s;
}
.sz-table tbody tr:last-child td { border-bottom: none; }
.sz-table tbody tr:hover td { background: var(--sz-gold-wash); }

.sz-table .froz {
  position: sticky; left: 0; z-index: 2;
  border-right: 1px solid var(--sz-rule-2);
}
.sz-table thead th.froz { z-index: 4; }
.sz-table tbody tr:hover td.froz { background: var(--sz-gold-wash); }

.sz-table tfoot td {
  position: sticky; bottom: 0; z-index: 3;
  background: var(--sz-zone);
  border-top: 1.5px solid var(--sz-rule-2);
  padding: var(--sz-s3);
  font-weight: 800;
}
.sz-table tfoot td.froz { z-index: 4; }

.sz-table td.cost { color: var(--sz-ink-2); }
.sz-table td.cost::before { content: "−"; }

.sz-card {
  background: var(--sz-surface);
  border: 1px solid var(--sz-rule-2);
  border-radius: var(--sz-r2);
  overflow: hidden;
  box-shadow: var(--sz-shadow);
}
.sz-card > .sz-card-head {
  display: flex; align-items: baseline; gap: var(--sz-s2);
  padding: var(--sz-s3) var(--sz-s3) 10px;
  border-bottom: 1px solid var(--sz-rule);
}
.sz-card-head h3, .sz-card-head .sz-title {
  margin: 0; font-size: var(--sz-t4); font-weight: 700; letter-spacing: -.01em;
}
.sz-card-head .sz-sub { font-size: var(--sz-t2); color: var(--sz-ink-2); }
.sz-card-head .sz-right { margin-left: auto; display: flex; gap: var(--sz-s1); }

.sz-card.sz-banded > .sz-card-head {
  background: var(--sz-band, var(--sz-ink-2));
  color: var(--sz-band-ink, #fff);
  border-bottom: 0;
}
.sz-card.sz-banded > .sz-card-head .sz-sub { color: rgba(255,255,255,.8); }

.sz-card .sz-basis {
  padding: var(--sz-s2) var(--sz-s3);
  border-top: 1px solid var(--sz-rule);
  background: #FCFCFA;
  font-size: var(--sz-t2); color: var(--sz-ink-2); line-height: 1.5;
}

.sz-pill {
  display: inline-block;
  padding: 2px 8px; border-radius: 20px;
  font-size: var(--sz-t2); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.sz-pill.ok   { background: var(--sz-ok-bg);   color: var(--sz-ok); }
.sz-pill.warn { background: var(--sz-warn-bg); color: var(--sz-warn); }
.sz-pill.bad  { background: var(--sz-bad-bg);  color: var(--sz-bad); }
.sz-pill.flat { background: var(--sz-rule);    color: var(--sz-ink-2); }

.sz-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 var(--sz-s3);
  border: 1px solid var(--sz-rule-2); border-radius: var(--sz-r1);
  background: var(--sz-surface); color: var(--sz-ink-2);
  font-family: var(--sz-font); font-size: var(--sz-t3); font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: background .1s, border-color .1s;
}
.sz-btn:hover { border-color: var(--sz-gold-edge); background: var(--sz-gold-wash); }
.sz-btn:focus-visible { outline: 2px solid var(--sz-gold); outline-offset: 1px; }
.sz-btn[disabled] { opacity: .5; cursor: not-allowed; }
.sz-btn.primary {
  background: var(--sz-gold); border-color: var(--sz-gold-edge);
  color: var(--sz-gold-ink); font-weight: 800;
}
.sz-btn.primary:hover { background: #FABB67; }
.sz-btn.ghost { border-color: transparent; background: transparent; }
.sz-btn.ghost:hover { background: var(--sz-rule); border-color: transparent; }

.sz-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: var(--sz-s2) 10px;
  background: var(--sz-surface);
  border: 1px solid var(--sz-rule-2); border-radius: var(--sz-r2);
  box-shadow: var(--sz-shadow);
}
.sz-bar .sz-grp { border-left: 1px solid var(--sz-rule); padding-left: 9px; margin-left: 2px; }
.sz-bar .sz-actions { margin-left: auto; display: flex; gap: 6px; align-items: center; }
@media (max-width: 1180px) {
  .sz-bar .sz-grp { border-left: 0; padding-left: 0; margin-left: 0; }
  .sz-bar .sz-actions { margin-left: 0; }
}

.sz-nums table td, .sz-nums table th {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

@media (prefers-reduced-motion: reduce) {
  .sz-table tbody td, .sz-btn { transition: none; }
}