:root, [data-theme="light"] {
  --color-bg:#f7f6f2; --color-surface:#f9f8f5; --color-surface-2:#fbfbf9;
  --color-surface-offset:#f3f0ec; --color-surface-offset-2:#edeae5; --color-surface-dynamic:#e6e4df;
  --color-divider:#dcd9d5; --color-border:#d4d1ca;
  --color-text:#28251d; --color-text-muted:#7a7974; --color-text-faint:#bab9b4; --color-text-inverse:#f9f8f4;
  --color-primary:#01696f; --color-primary-hover:#0c4e54; --color-primary-active:#0f3638; --color-primary-highlight:#cedcd8;
  --color-error:#a12c7b; --color-error-highlight:#e0ced7;
  --color-success:#437a22; --color-success-highlight:#d4dfcc;
  --color-orange:#da7101; --color-orange-highlight:#e7d7c4;
  --color-gold:#d19900; --color-gold-highlight:#e9e0c6;
  --color-blue:#006494; --color-blue-highlight:#c6d8e4;
  --color-purple:#7a39bb; --color-purple-highlight:#dacfde;
  --radius-sm:0.375rem; --radius-md:0.5rem; --radius-lg:0.75rem; --radius-xl:1rem; --radius-full:9999px;
  --transition-interactive:180ms cubic-bezier(0.16,1,0.3,1);
  --shadow-sm:0 1px 2px oklch(0.2 0.01 80/0.06); --shadow-md:0 4px 12px oklch(0.2 0.01 80/0.08); --shadow-lg:0 12px 32px oklch(0.2 0.01 80/0.12);
  --font-display:'Satoshi','Helvetica Neue',sans-serif; --font-body:'Satoshi','Helvetica Neue',sans-serif; --font-mono:'JetBrains Mono',monospace;
}
[data-theme="dark"] {
  --color-bg:#171614; --color-surface:#1c1b19; --color-surface-2:#201f1d; --color-surface-offset:#1d1c1a; --color-surface-offset-2:#22211f; --color-surface-dynamic:#2d2c2a;
  --color-divider:#262523; --color-border:#393836;
  --color-text:#cdccca; --color-text-muted:#797876; --color-text-faint:#5a5957; --color-text-inverse:#2b2a28;
  --color-primary:#4f98a3; --color-primary-hover:#227f8b; --color-primary-active:#1a626b; --color-primary-highlight:#313b3b;
  --color-error:#d163a7; --color-error-highlight:#4c3d46;
  --color-success:#6daa45; --color-success-highlight:#3a4435;
  --color-orange:#fdab43; --color-orange-highlight:#564b3e;
  --color-gold:#e8af34; --color-gold-highlight:#4d4332;
  --color-blue:#5591c7; --color-blue-highlight:#3a4550;
  --color-purple:#a86fdf; --color-purple-highlight:#4e4652;
  --shadow-sm:0 1px 2px oklch(0 0 0/0.2); --shadow-md:0 4px 12px oklch(0 0 0/0.3); --shadow-lg:0 12px 32px oklch(0 0 0/0.4);
}
:root{
  --text-xs:clamp(0.75rem,0.7rem+0.25vw,0.875rem);
  --text-sm:clamp(0.875rem,0.8rem+0.35vw,1rem);
  --text-base:clamp(1rem,0.95rem+0.25vw,1.125rem);
  --text-lg:clamp(1.125rem,1rem+0.75vw,1.5rem);
  --text-xl:clamp(1.5rem,1.2rem+1.25vw,2.25rem);
  --space-1:0.25rem;--space-2:0.5rem;--space-3:0.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;
  --space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;--space-20:5rem;--space-24:6rem;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth;}
body{min-height:100dvh;line-height:1.5;font-family:var(--font-body);font-size:var(--text-base);color:var(--color-text);background:var(--color-bg);}
img{display:block;max-width:100%;}
ul[role="list"]{list-style:none;}
button,input,select{font:inherit;color:inherit;}
h1,h2,h3{text-wrap:balance;line-height:1.15;}
:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px;border-radius:var(--radius-sm);}
button{cursor:pointer;background:none;border:none;}
table{border-collapse:collapse;width:100%;}
a,button,input,select{transition:color var(--transition-interactive),background var(--transition-interactive),border-color var(--transition-interactive),box-shadow var(--transition-interactive);}
.tabular{font-family:var(--font-mono);font-feature-settings:"tnum";}
.app{display:grid;grid-template-columns:264px 1fr;min-height:100dvh;}
.sidebar{background:var(--color-surface);border-right:1px solid var(--color-divider);padding:var(--space-6) var(--space-5);display:flex;flex-direction:column;gap:var(--space-8);position:sticky;top:0;height:100dvh;overflow-y:auto;}
.brand{display:flex;align-items:center;gap:var(--space-2);}
.brand svg{color:var(--color-primary);}
.brand span{font-family:var(--font-display);font-weight:900;font-size:var(--text-lg);}
.filter-group{display:flex;flex-direction:column;gap:var(--space-3);}
.filter-group h3{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:0.06em;color:var(--color-text-muted);font-weight:700;}
.chip-row{display:flex;flex-wrap:wrap;gap:var(--space-2);}
.chip{padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);border:1px solid var(--color-border);font-size:var(--text-xs);background:var(--color-surface-2);color:var(--color-text-muted);}
.chip.active{background:var(--color-primary);color:var(--color-text-inverse);border-color:var(--color-primary);}
select,input[type=text]{width:100%;padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);border:1px solid var(--color-border);background:var(--color-surface-2);font-size:var(--text-sm);}
.range-row{display:flex;align-items:center;gap:var(--space-2);}
.range-row input{width:100%;}
.range-labels{display:flex;justify-content:space-between;font-size:var(--text-xs);color:var(--color-text-muted);font-family:var(--font-mono);}
.reset-btn{padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);border:1px solid var(--color-border);font-size:var(--text-sm);color:var(--color-text-muted);background:var(--color-surface-2);text-align:center;}
.reset-btn:hover{border-color:var(--color-primary);color:var(--color-primary);}
.main{padding:var(--space-6) var(--space-8);display:flex;flex-direction:column;gap:var(--space-6);max-width:100%;}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;}
.topbar h1{font-family:var(--font-display);font-size:var(--text-xl);font-weight:700;}
.topbar .sub{color:var(--color-text-muted);font-size:var(--text-sm);}
.theme-toggle{width:38px;height:38px;border-radius:var(--radius-full);border:1px solid var(--color-border);display:flex;align-items:center;justify-content:center;background:var(--color-surface-2);}
.theme-toggle:hover{border-color:var(--color-primary);color:var(--color-primary);}
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-4);}
.kpi-card{background:var(--color-surface);border:1px solid var(--color-divider);border-radius:var(--radius-lg);padding:var(--space-4) var(--space-5);box-shadow:var(--shadow-sm);}
.kpi-card .label{font-size:var(--text-xs);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:var(--space-2);}
.kpi-card .value{font-family:var(--font-mono);font-size:var(--text-lg);font-weight:700;}
.kpi-card .value.accent{color:var(--color-primary);}
.kpi-card .value.orange{color:var(--color-orange);}
.chart-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);}
.chart-card{background:var(--color-surface);border:1px solid var(--color-divider);border-radius:var(--radius-lg);padding:var(--space-4) var(--space-5);box-shadow:var(--shadow-sm);}
.chart-card h3{font-size:var(--text-sm);font-weight:700;margin-bottom:var(--space-3);}
.chart-wrap{height:220px;position:relative;}
.table-card{background:var(--color-surface);border:1px solid var(--color-divider);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow:hidden;}
.table-header-row{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--color-divider);flex-wrap:wrap;gap:var(--space-3);}
.table-header-row h3{font-size:var(--text-sm);font-weight:700;}
.result-count{font-size:var(--text-xs);color:var(--color-text-muted);}
.table-scroll{overflow-x:auto;}
th,td{padding:var(--space-3) var(--space-4);text-align:left;font-size:var(--text-sm);white-space:nowrap;border-bottom:1px solid var(--color-divider);}
th{background:var(--color-surface-offset);color:var(--color-text-muted);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:0.04em;cursor:pointer;user-select:none;position:sticky;top:0;}
th:hover{color:var(--color-primary);}
th.sorted{color:var(--color-primary);}
tbody tr:hover{background:var(--color-surface-offset);}
.badge{display:inline-block;padding:2px var(--space-2);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:500;}
.badge.digital{background:var(--color-primary-highlight);color:var(--color-primary);}
.badge.physical{background:var(--color-gold-highlight);color:var(--color-gold);}
.label-chip{display:inline-block;padding:1px var(--space-2);border-radius:var(--radius-full);font-size:var(--text-xs);background:var(--color-surface-offset-2);color:var(--color-text-muted);margin-right:var(--space-1);}
.pagination{display:flex;align-items:center;justify-content:space-between;padding:var(--space-3) var(--space-5);border-top:1px solid var(--color-divider);font-size:var(--text-sm);}
.page-btns{display:flex;gap:var(--space-2);}
.page-btns button{padding:var(--space-1) var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-2);font-size:var(--text-sm);}
.page-btns button:disabled{opacity:0.4;cursor:not-allowed;}
.page-btns button:hover:not(:disabled){border-color:var(--color-primary);color:var(--color-primary);}
.empty-state{display:flex;flex-direction:column;align-items:center;text-align:center;padding:var(--space-16) var(--space-8);color:var(--color-text-muted);}
.empty-state svg{width:48px;height:48px;margin-bottom:var(--space-4);color:var(--color-text-faint);}
.empty-state h3{color:var(--color-text);margin-bottom:var(--space-2);font-size:var(--text-base);}
.empty-state button{margin-top:var(--space-4);padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);background:var(--color-primary);color:var(--color-text-inverse);font-size:var(--text-sm);}
@media (max-width:900px){
  .app{grid-template-columns:1fr;}
  .sidebar{position:static;height:auto;border-right:none;border-bottom:1px solid var(--color-divider);}
  .chart-row{grid-template-columns:1fr;}
}
