:root {
  --surface: #fcfcfb;
  --page: #f9f9f7;
  --ink: #0b0b0b;
  --ink-2: #52514e;
  --muted: #898781;
  --grid: #e1e0d9;
  --axis: #c3c2b7;
  --border: rgba(11, 11, 11, 0.10);
  --cpi: #2a78d6;
  --truf: #eb6834;
  --now: #1baf7a;
  --warning: #fab219;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

body { margin: 0; background: var(--page); color: var(--ink); }
.page { max-width: 1440px; margin: 0 auto; padding: 20px 24px 32px; }

.header { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.header h1 { font-size: 24px; font-weight: 650; margin: 0 0 4px; letter-spacing: -0.01em; }
.subtitle { color: var(--ink-2); font-size: 13px; }
.refresh { display: flex; align-items: center; gap: 12px; }
.refresh-status { color: var(--ink-2); font-size: 12px; max-width: 420px; }
.btn {
  font: inherit; font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: 8px;
  border: 1px solid var(--axis); background: var(--surface); color: var(--ink); cursor: pointer;
}
.btn:hover { background: #f1f0ec; }
.btn:disabled { opacity: 0.55; cursor: progress; }

.banner {
  margin: 14px 0 0; padding: 10px 14px; border-radius: 10px; background: var(--surface);
  border: 1px solid var(--border); font-size: 13px; color: var(--ink-2); display: flex; flex-direction: column; gap: 4px;
}
.banner b { color: var(--ink); }
.banner.warn { border-left: 4px solid var(--warning); }
.banner-note { color: var(--ink-2); }

.controls {
  display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-end; margin: 14px 0;
  padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
}
.control { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.control label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); font-weight: 600; }
.control.wide { min-width: 300px; }
.seg label { text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--ink-2); font-weight: 500; margin-right: 10px; }
.seg input { margin-right: 4px; accent-color: var(--ink); }
.dd { min-width: 300px; font-size: 13px; }

.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.kpi { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; }
.kpi-label { font-size: 12px; color: var(--muted); font-weight: 600; }
.kpi-row { display: flex; align-items: center; gap: 8px; margin: 4px 0 2px; }
.kpi-key { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }
.kpi-value { font-size: 26px; font-weight: 650; color: var(--ink); }
.kpi-sub { font-size: 12px; color: var(--ink-2); }

.tabs { margin-bottom: 4px; border-bottom: 1px solid var(--axis); }
.tab-x { background: transparent !important; border: none !important; border-bottom: 2px solid transparent !important;
  color: var(--ink-2) !important; font-size: 14px; font-weight: 500; padding: 10px 14px !important; }
.tab-x:hover { color: var(--ink) !important; }
.tab-x--selected { color: var(--ink) !important; font-weight: 650 !important; border-bottom: 2px solid var(--ink) !important; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding-top: 14px; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px 10px; min-width: 0; }
.card.span-2 { grid-column: span 2; }
.card-title { font-size: 14px; font-weight: 650; color: var(--ink); margin-bottom: 4px; }
.card-note { font-size: 12px; color: var(--ink-2); margin-top: 6px; line-height: 1.45; }
.card ul { font-size: 13px; color: var(--ink-2); line-height: 1.55; padding-left: 18px; }
#data-tab { display: grid; gap: 14px; padding-top: 14px; }

.footer { margin-top: 18px; font-size: 12px; color: var(--muted); line-height: 1.5; }

@media (max-width: 1000px) {
  .grid { grid-template-columns: 1fr; }
  .card.span-2 { grid-column: span 1; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .page { padding: 12px 16px; }
  .kpis { grid-template-columns: 1fr; }
  .control.wide, .dd { min-width: 0; width: 100%; }
}
* {box-sizing:border-box} a{color:#2a78d6} [hidden]{display:none!important}
button,input,select{font:inherit} button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #2a78d6;outline-offset:3px}
.snapshot{font-size:12px;color:var(--ink-2);line-height:1.5;margin:12px 0 0;padding:10px 14px;border-left:3px solid var(--now);background:var(--surface)}
.snapshot strong{color:var(--ink)} .header-links{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.header-links a{text-decoration:none}
.tabs{display:flex;flex-wrap:wrap}.tab-x{cursor:pointer;font-family:inherit}.tab-panel{scroll-margin-top:12px}
.controls select,.controls input[type=date]{border:1px solid var(--axis);border-radius:6px;padding:6px;background:var(--surface);color:var(--ink-2);max-width:100%}
.dates{display:flex;gap:8px;align-items:center}.control .dates label{font-size:11px;text-transform:none;letter-spacing:0}.dates input{max-width:150px}
.control-note{color:var(--muted);font-size:11px;margin:0 2px 10px;line-height:1.5}.control-note.error{color:#a12424}
.graph{min-width:0;max-width:100%}.table-scroll{overflow:auto;max-width:100%;border-top:1px solid var(--grid)}
table{border-collapse:collapse;width:100%;font-size:12px;font-variant-numeric:tabular-nums}th,td{border-bottom:1px solid var(--grid);padding:7px 9px;text-align:right;white-space:nowrap}th:first-child,td:first-child{text-align:left}
thead th{position:sticky;top:0;background:var(--surface);z-index:1}th button{border:0;background:transparent;color:var(--ink);font-weight:600;cursor:pointer;padding:0;white-space:nowrap}
.column-filter{min-width:90px;width:100%;max-width:150px;font-size:11px;padding:4px;border:1px solid var(--grid);border-radius:4px;color:var(--ink-2)}
.table-toolbar,.table-pager{display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-size:12px;margin:8px 0}.table-toolbar input{padding:6px 8px;border:1px solid var(--axis);border-radius:5px;max-width:100%}.table-status{color:var(--ink-2)}
.table-pager .btn{font-size:12px;padding:5px 10px}.table-pager .btn:disabled{cursor:default}.preferred td{font-weight:650}
.loading{font-size:13px;color:var(--muted);padding:20px}.footer a{margin-right:14px}.footer p{margin:7px 0}
@media(max-width:560px){.header h1{font-size:22px}.header-links{width:100%}.controls{gap:14px}.tabs .tab-x{font-size:12px;padding:10px 8px!important}.card{padding:12px 8px}.kpi-value{font-size:24px}.dates{flex-wrap:wrap}}
.kpis { margin-top: 14px; }
.document { max-width: 900px; line-height: 1.6; }
.document nav { margin-bottom: 24px; }
.document article { padding: 20px 24px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.document h1 { font-size: 26px; }
.document h2 { font-size: 20px; margin-top: 24px; }