:root, [data-theme="light"] {
  --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: .25rem; --space-2: .5rem; --space-3: .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;
  --radius-sm: .375rem; --radius-md: .5rem; --radius-lg: .75rem; --radius-xl: 1rem; --radius-full: 9999px;
  --color-bg: #f7f6f2; --color-surface: #f9f8f5; --color-surface-2: #fbfbf9; --color-surface-offset: #edeae5;
  --color-border: #d4d1ca; --color-divider: #dcd9d5; --color-text: #28251d; --color-text-muted: #7a7974;
  --color-text-faint: #bab9b4; --color-primary: #01696f; --color-primary-hover: #0c4e54; --color-primary-soft: #dcebea;
  --color-blue: #006494; --color-gold: #d19900; --color-success: #437a22; --color-warning: #964219; --color-error: #a12c7b;
  --shadow-sm: 0 1px 2px rgba(20, 18, 14, 0.06); --shadow-md: 0 8px 20px rgba(20, 18, 14, 0.08);
  --font-body: 'Satoshi', system-ui, sans-serif;
}
[data-theme="dark"] {
  --color-bg: #171614; --color-surface: #1c1b19; --color-surface-2: #201f1d; --color-surface-offset: #2a2825;
  --color-border: #393836; --color-divider: #262523; --color-text: #cdccca; --color-text-muted: #9e9c98;
  --color-text-faint: #6d6b68; --color-primary: #4f98a3; --color-primary-hover: #66adb7; --color-primary-soft: #26373a;
  --color-blue: #5591c7; --color-gold: #e8af34; --color-success: #6daa45; --color-warning: #bb653b; --color-error: #d163a7;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.24); --shadow-md: 0 8px 24px rgba(0,0,0,.36);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.55;
}
button, input { font: inherit; color: inherit; }
.dashboard {
  display: grid;
  grid-template-columns: 280px 1fr;
  grid-template-rows: 72px 1fr;
  height: 100dvh;
}
.sidebar {
  grid-row: 1 / -1;
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  padding: var(--space-6);
  overflow-y: auto;
}
.brand {
  display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-8);
}
.logo { width: 36px; height: 36px; color: var(--color-primary); }
.brand h1 { font-size: var(--text-lg); }
.brand p { font-size: var(--text-xs); color: var(--color-text-muted); }
.nav-group { margin-bottom: var(--space-6); }
.nav-title { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--color-text-muted); margin-bottom: var(--space-3); }
.nav-link {
  display: flex; align-items: center; justify-content: space-between;
  padding: .8rem .9rem; border-radius: var(--radius-md); color: var(--color-text); text-decoration: none;
  margin-bottom: var(--space-2); background: transparent; border: 1px solid transparent;
}
.nav-link.active { background: var(--color-primary-soft); color: var(--color-primary); border-color: color-mix(in srgb, var(--color-primary) 18%, transparent); }
.nav-link span:last-child { font-size: var(--text-xs); color: var(--color-text-muted); }
.sidebar-card {
  margin-top: var(--space-8); padding: var(--space-4); background: var(--color-surface-2); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.sidebar-card h3 { font-size: var(--text-sm); margin-bottom: var(--space-2); }
.sidebar-card p { font-size: var(--text-xs); color: var(--color-text-muted); margin-bottom: var(--space-3); }
.header {
  grid-column: 2; display: flex; justify-content: space-between; align-items: center;
  padding: 0 var(--space-6); border-bottom: 1px solid var(--color-border); background: color-mix(in srgb, var(--color-bg) 82%, transparent);
  backdrop-filter: blur(12px);
}
.header h2 { font-size: var(--text-xl); }
.header p { font-size: var(--text-sm); color: var(--color-text-muted); }
.header-actions { display: flex; align-items: center; gap: var(--space-3); }
.search {
  display: flex; align-items: center; gap: var(--space-2); padding: .7rem .9rem; min-width: 280px;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-full);
}
.search input { width: 100%; border: none; background: transparent; outline: none; }
.btn {
  border: 1px solid var(--color-border); background: var(--color-surface); border-radius: var(--radius-full);
  padding: .7rem 1rem; cursor: pointer;
}
.btn.primary { background: var(--color-primary); border-color: var(--color-primary); color: #f7f6f2; }
.main {
  grid-column: 2; overflow-y: auto; padding: var(--space-6);
}
.hero {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-6); margin-bottom: var(--space-6);
}
.panel {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm);
}
.panel-inner { padding: var(--space-5); }
.hero-copy h3, .panel h3, .section-title { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.hero-copy p, .panel p { color: var(--color-text-muted); }
.hero-actions { display: flex; gap: var(--space-3); margin-top: var(--space-5); flex-wrap: wrap; }
.tag-row { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-5); }
.tag { font-size: var(--text-xs); padding: .45rem .7rem; border-radius: var(--radius-full); background: var(--color-surface-offset); color: var(--color-text-muted); }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); margin-bottom: var(--space-6); }
.kpi-card { padding: var(--space-4); }
.eyebrow { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--color-text-muted); margin-bottom: var(--space-2); }
.kpi-value { font-size: var(--text-xl); font-weight: 700; font-variant-numeric: tabular-nums; }
.delta { font-size: var(--text-sm); margin-top: var(--space-2); }
.up { color: var(--color-success); } .down { color: var(--color-error); } .flat { color: var(--color-warning); }
.content-grid { display: grid; grid-template-columns: 1.25fr .95fr; gap: var(--space-6); }
.stack { display: grid; gap: var(--space-6); }
.chart { padding: var(--space-5); }
.bars { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--space-3); align-items: end; height: 220px; margin-top: var(--space-5); }
.bar-wrap { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.bar { width: 100%; border-radius: var(--radius-md) var(--radius-md) 0 0; background: linear-gradient(180deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 55%, white)); }
.bar.secondary { background: linear-gradient(180deg, var(--color-blue), color-mix(in srgb, var(--color-blue) 55%, white)); }
.axis-label, .axis-value { font-size: var(--text-xs); color: var(--color-text-muted); }
.flow-list, .ticket-list, .insight-list { display: grid; gap: var(--space-3); margin-top: var(--space-4); }
.flow-item, .ticket-item, .insight-item {
  display: grid; gap: var(--space-2); padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface-2);
}
.flow-top, .ticket-top { display: flex; justify-content: space-between; gap: var(--space-3); align-items: center; }
.badge { font-size: var(--text-xs); padding: .35rem .6rem; border-radius: var(--radius-full); }
.badge.primary { background: var(--color-primary-soft); color: var(--color-primary); }
.badge.gold { background: color-mix(in srgb, var(--color-gold) 18%, transparent); color: var(--color-gold); }
.badge.success { background: color-mix(in srgb, var(--color-success) 18%, transparent); color: var(--color-success); }
.badge.error { background: color-mix(in srgb, var(--color-error) 18%, transparent); color: var(--color-error); }
.ticket-meta, .flow-meta { display: flex; gap: var(--space-3); flex-wrap: wrap; font-size: var(--text-xs); color: var(--color-text-muted); }
.timeline { margin-top: var(--space-5); display: grid; gap: var(--space-3); }
.timeline-step {
  display: grid; grid-template-columns: 44px 1fr; gap: var(--space-3); align-items: start;
}
.step-dot {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--color-primary-soft); color: var(--color-primary); font-weight: 700;
  border: 1px solid color-mix(in srgb, var(--color-primary) 18%, transparent);
}
.mini-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); margin-top: var(--space-4); }
.mini-panel { padding: var(--space-4); border-radius: var(--radius-lg); background: var(--color-surface-2); border: 1px solid var(--color-border); }
.footer-note { margin-top: var(--space-6); font-size: var(--text-sm); color: var(--color-text-muted); }
@media (max-width: 1100px) {
  .dashboard { grid-template-columns: 88px 1fr; }
  .sidebar .brand-copy, .nav-title, .nav-link span:last-child, .sidebar-card { display: none; }
  .nav-link { justify-content: center; }
  .nav-link span:first-child { font-size: var(--text-xs); text-align: center; }
  .hero, .content-grid, .kpis { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
  html, body { overflow: auto; }
  .dashboard { display: block; height: auto; }
  .sidebar { border-right: none; border-bottom: 1px solid var(--color-border); }
  .header { position: sticky; top: 0; padding: var(--space-4); }
  .header, .main { grid-column: auto; }
  .hero, .content-grid, .kpis, .mini-grid { grid-template-columns: 1fr; }
  .search { min-width: 0; width: 100%; }
  .header { flex-direction: column; align-items: stretch; gap: var(--space-4); }
  .header-actions { flex-wrap: wrap; }
  .main { padding: var(--space-4); }
}