:root {
  --bg: #0a0e1f;
  --bg2: #111832;
  --bg3: #0e1428;
  --card: rgba(255,255,255,0.035);
  --card-hover: rgba(255,255,255,0.06);
  --card-border: rgba(255,255,255,0.08);
  --card-border-hi: rgba(255,255,255,0.14);
  --text: #e6eaf5;
  --muted: #8b93ad;
  --muted2: #6b7288;
  --primary: #6366f1;
  --primary2: #8b5cf6;
  --pink: #ec4899;
  --green: #10b981;
  --green2: #34d399;
  --red: #ef4444;
  --red2: #f87171;
  --amber: #f59e0b;
  --cyan: #06b6d4;
  --cyan2: #22d3ee;
  --blue: #3b82f6;
  --orange: #fb923c;
  --sidebar-w: 240px;
  --sidebar-c: 68px;
  --radius: 16px;
  --radius-sm: 12px;
  --shadow-glow: 0 0 40px -12px rgba(99,102,241,.35);
  --shadow-card: 0 8px 32px -8px rgba(0,0,0,.4);
}
* { margin:0; padding:0; box-sizing:border-box; }
html { color-scheme: dark; }   /* native widgets (dropdown lists, date pickers, scrollbars) render dark */
html, body { -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
body {
  font-family:'Inter', system-ui, sans-serif;
  background:
    radial-gradient(1200px 700px at 85% -10%, rgba(139,92,246,.18) 0%, transparent 55%),
    radial-gradient(900px 500px at -5% 25%, rgba(6,182,212,.10) 0%, transparent 55%),
    radial-gradient(700px 500px at 50% 110%, rgba(236,72,153,.10) 0%, transparent 55%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text); font-size:14px; min-height:100vh;
}

/* ---------- Sidebar ---------- */
.sidebar {
  position:fixed; top:0; left:0; bottom:0; width:var(--sidebar-w);
  background: linear-gradient(180deg, rgba(14,20,48,.95) 0%, rgba(10,14,31,.98) 100%);
  border-right:1px solid var(--card-border);
  display:flex; flex-direction:column; padding:16px 12px; z-index:100;
  transition: width .25s cubic-bezier(.4,0,.2,1); overflow-y:auto;
  backdrop-filter: blur(12px);
}
.sidebar::-webkit-scrollbar { width:6px; }
.sidebar::-webkit-scrollbar-thumb { background:rgba(255,255,255,.08); border-radius:3px; }
.sidebar-brand {
  display:flex; flex-direction:column; gap:6px; font-weight:800;
  padding:14px 14px 24px; letter-spacing:.3px;
  border-bottom:1px solid var(--card-border); margin-bottom:10px;
}
.brand-logo { height:36px; width:auto; filter:drop-shadow(0 2px 8px rgba(239,68,68,.25)); }
.brand-sub {
  font-size:11px; letter-spacing:3px; text-transform:uppercase;
  color:var(--muted); margin-top:2px;
  background:linear-gradient(90deg, var(--muted), rgba(255,255,255,.5));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
body.sidebar-collapsed .brand-logo { height:24px; }
body.sidebar-collapsed .brand-sub { display:none; }
.brand-icon {
  width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center;
  font-size:16px; border-radius:9px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary2) 100%);
  box-shadow: 0 4px 14px -4px rgba(99,102,241,.55);
}
.nav-link {
  display:flex; align-items:center; gap:12px; padding:10px 13px; border-radius:11px;
  color:var(--muted); text-decoration:none; font-weight:500; margin-bottom:3px;
  white-space:nowrap; font-size:13.5px;
  transition: all .18s cubic-bezier(.4,0,.2,1);
  position:relative;
}
.nav-link:hover { color:var(--text); background:rgba(255,255,255,0.045); transform:translateX(2px); }
.nav-link.active {
  color:#fff;
  background:linear-gradient(90deg, rgba(99,102,241,.28), rgba(139,92,246,.10) 60%, transparent);
}
.nav-link.active::before {
  content:''; position:absolute; left:0; top:20%; bottom:20%; width:3px;
  background: linear-gradient(180deg, var(--primary), var(--primary2));
  border-radius:0 3px 3px 0;
  box-shadow: 0 0 12px rgba(99,102,241,.6);
}
.nav-icon { width:20px; text-align:center; font-size:15px; opacity:.9; }
.nav-link.active .nav-icon { opacity:1; }
.nav-link.logout { margin-top:auto; color:var(--red2); }
.nav-link.logout:hover { background:rgba(239,68,68,.08); color:#fca5a5; }
body.sidebar-collapsed .sidebar { width:var(--sidebar-c); }
body.sidebar-collapsed .nav-label { display:none; }
body.sidebar-collapsed .main { margin-left:var(--sidebar-c); }

/* ---------- Main ---------- */
.main { margin-left:var(--sidebar-w); transition:margin-left .25s; min-height:100vh; }
.topbar {
  display:flex; align-items:center; gap:16px; padding:16px 28px;
  border-bottom:1px solid var(--card-border);
  background:rgba(10,14,31,.75); backdrop-filter:blur(14px);
  position:sticky; top:0; z-index:50;
}
.sidebar-toggle {
  background:rgba(255,255,255,.04); border:1px solid var(--card-border); color:var(--text);
  width:34px; height:34px; border-radius:9px; font-size:15px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  transition:all .15s;
}
.sidebar-toggle:hover { background:rgba(255,255,255,.08); border-color:var(--card-border-hi); }
.page-title { font-size:19px; font-weight:700; letter-spacing:-.2px; }
.topbar-right { margin-left:auto; color:var(--muted); font-size:13px; display:flex; align-items:center; gap:12px; }
.topbar-right .live-dot {
  width:8px; height:8px; border-radius:50%; background:var(--green2);
  box-shadow:0 0 10px var(--green2); animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:.4;} }
.content { padding:26px 28px 60px; max-width:1560px; }

/* ---------- Filter bar ---------- */
.filterbar {
  display:flex; flex-wrap:wrap; gap:10px; margin-bottom:24px; align-items:center;
  padding:14px 16px; background:var(--card); border:1px solid var(--card-border);
  border-radius:var(--radius-sm); backdrop-filter:blur(8px);
}
select, input[type=date], input[type=text], input[type=password], input[type=number], input[type=file], textarea {
  background:rgba(255,255,255,.03); color:var(--text);
  border:1px solid var(--card-border);
  border-radius:10px; padding:9px 13px; font-family:inherit; font-size:13px; outline:none;
  transition:all .15s;
}
select:hover, input:hover { border-color:var(--card-border-hi); }
select:focus, input:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(99,102,241,.15); }
select option, select optgroup {
  background: #131a35; color: var(--text);   /* readable dark option list in every browser */
}
select option:checked { background: var(--primary); color: #fff; }
select { cursor:pointer; padding-right:32px; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b93ad' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; }

/* ---------- KPI cards ---------- */
.kpi-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:16px; margin-bottom:24px;
}
.kpi-card {
  background:
    linear-gradient(145deg, rgba(255,255,255,.045) 0%, rgba(255,255,255,.015) 100%);
  border:1px solid var(--card-border); border-radius:var(--radius);
  padding:18px 20px 14px; position:relative; overflow:hidden;
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-card);
  transition: transform .2s cubic-bezier(.4,0,.2,1), border-color .2s, box-shadow .2s;
}
.kpi-card:hover {
  transform:translateY(-3px);
  border-color: var(--card-border-hi);
  box-shadow: 0 12px 40px -12px rgba(0,0,0,.5), 0 0 30px -8px rgba(99,102,241,.25);
}
.kpi-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--primary), var(--primary2));
  box-shadow: 0 0 20px var(--primary);
}
.kpi-card::after {
  content:''; position:absolute; top:-40%; right:-15%; width:180px; height:180px;
  background: radial-gradient(circle, rgba(99,102,241,.14) 0%, transparent 60%);
  pointer-events:none;
}
.kpi-card.green::before   { background:linear-gradient(90deg,#10b981,#22d3ee); box-shadow:0 0 20px #10b981; }
.kpi-card.green::after    { background: radial-gradient(circle, rgba(16,185,129,.14) 0%, transparent 60%); }
.kpi-card.red::before     { background:linear-gradient(90deg,#ef4444,#fb923c); box-shadow:0 0 20px #ef4444; }
.kpi-card.red::after      { background: radial-gradient(circle, rgba(239,68,68,.14) 0%, transparent 60%); }
.kpi-card.cyan::before    { background:linear-gradient(90deg,#06b6d4,#3b82f6); box-shadow:0 0 20px #06b6d4; }
.kpi-card.cyan::after     { background: radial-gradient(circle, rgba(6,182,212,.14) 0%, transparent 60%); }
.kpi-card.amber::before   { background:linear-gradient(90deg,#f59e0b,#fb923c); box-shadow:0 0 20px #f59e0b; }
.kpi-card.amber::after    { background: radial-gradient(circle, rgba(245,158,11,.14) 0%, transparent 60%); }
.kpi-card.pink::before    { background:linear-gradient(90deg,#ec4899,#8b5cf6); box-shadow:0 0 20px #ec4899; }
.kpi-card.pink::after     { background: radial-gradient(circle, rgba(236,72,153,.14) 0%, transparent 60%); }

.kpi-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; position:relative; }
.kpi-label { color:var(--muted); font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:.7px; }
.kpi-icon {
  width:32px; height:32px; border-radius:9px;
  display:inline-flex; align-items:center; justify-content:center; font-size:15px;
  background:linear-gradient(135deg, rgba(99,102,241,.18), rgba(139,92,246,.10));
  border:1px solid rgba(99,102,241,.25);
}
.kpi-card.green  .kpi-icon { background:linear-gradient(135deg, rgba(16,185,129,.18), rgba(34,211,238,.10)); border-color:rgba(16,185,129,.28); color:#34d399; }
.kpi-card.red    .kpi-icon { background:linear-gradient(135deg, rgba(239,68,68,.18), rgba(251,146,60,.10)); border-color:rgba(239,68,68,.28); color:#f87171; }
.kpi-card.cyan   .kpi-icon { background:linear-gradient(135deg, rgba(6,182,212,.18), rgba(59,130,246,.10)); border-color:rgba(6,182,212,.28); color:#22d3ee; }
.kpi-card.amber  .kpi-icon { background:linear-gradient(135deg, rgba(245,158,11,.18), rgba(251,146,60,.10)); border-color:rgba(245,158,11,.28); color:#fbbf24; }
.kpi-card.pink   .kpi-icon { background:linear-gradient(135deg, rgba(236,72,153,.18), rgba(139,92,246,.10)); border-color:rgba(236,72,153,.28); color:#f472b6; }

.kpi-value {
  font-size:28px; font-weight:800; margin:2px 0 4px;
  letter-spacing:-.5px; line-height:1.1;
  background:linear-gradient(180deg, #fff 0%, #cbd5e1 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  position:relative;
}
.kpi-sub { font-size:12px; color:var(--muted); position:relative; }
.kpi-foot { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:8px; position:relative; }
.kpi-delta { font-size:11.5px; font-weight:700; padding:3px 9px; border-radius:20px; display:inline-flex; align-items:center; gap:3px; }
.delta-up   { color:#34d399; background:rgba(16,185,129,.14); border:1px solid rgba(16,185,129,.25); }
.delta-down { color:#f87171; background:rgba(239,68,68,.14); border:1px solid rgba(239,68,68,.25); }
.delta-flat { color:var(--muted); background:rgba(255,255,255,.05); border:1px solid var(--card-border); }
.kpi-spark { height:36px; margin:0 -6px -6px; }

/* ---------- Panels ---------- */
.panel {
  background:
    linear-gradient(145deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.012) 100%);
  border:1px solid var(--card-border); border-radius:var(--radius);
  padding:22px; margin-bottom:20px; backdrop-filter:blur(10px);
  box-shadow: var(--shadow-card);
  position:relative;
}
.panel h3 {
  font-size:15px; font-weight:700; margin-bottom:16px;
  display:flex; align-items:center; gap:10px; letter-spacing:-.1px;
}
.panel h3 .h-icon {
  width:28px; height:28px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center;
  font-size:13px;
  background:linear-gradient(135deg, rgba(99,102,241,.2), rgba(139,92,246,.10));
  border:1px solid rgba(99,102,241,.25);
}
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.grid-3 { display:grid; grid-template-columns:2fr 1fr; gap:20px; }
.grid-4 { display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:16px; }
@media (max-width:1100px){ .grid-2,.grid-3 { grid-template-columns:1fr; } .grid-4 { grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .grid-4 { grid-template-columns:1fr; } }

/* ---------- Health badge ---------- */
.health-badge { font-weight:700; padding:5px 13px; border-radius:20px; font-size:12.5px; border:1px solid transparent; }
.h-excellent { background:rgba(16,185,129,.14); color:#34d399; border-color:rgba(16,185,129,.3); }
.h-good      { background:rgba(6,182,212,.14); color:#22d3ee; border-color:rgba(6,182,212,.3); }
.h-attention { background:rgba(245,158,11,.14); color:#fbbf24; border-color:rgba(245,158,11,.3); }
.h-poor      { background:rgba(239,68,68,.14); color:#f87171; border-color:rgba(239,68,68,.3); }

/* ---------- Insight ---------- */
.insight {
  background:
    linear-gradient(120deg, rgba(99,102,241,.12) 0%, rgba(139,92,246,.06) 60%, rgba(236,72,153,.05) 100%);
  border:1px solid rgba(99,102,241,.28); border-radius:var(--radius);
  padding:16px 20px; margin-bottom:22px; font-size:14px; line-height:1.6;
  display:flex; gap:14px; align-items:flex-start;
  position:relative; overflow:hidden;
}
.insight::before {
  content:''; position:absolute; inset:0;
  background: radial-gradient(600px 100px at 0 0, rgba(99,102,241,.18), transparent);
  pointer-events:none;
}
.insight .ins-icon {
  width:36px; height:36px; border-radius:10px; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center; font-size:17px;
  background:linear-gradient(135deg, var(--primary), var(--primary2));
  box-shadow:0 4px 14px -4px rgba(99,102,241,.5);
}
.insight strong { color:#c7d2fe; font-weight:700; }
.insight .ins-body { position:relative; flex:1; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x:auto; border-radius:12px; }
table { width:100%; border-collapse:collapse; font-size:13px; }
th {
  text-align:left; color:var(--muted); font-weight:600; font-size:11px;
  text-transform:uppercase; letter-spacing:.6px;
  padding:11px 14px; border-bottom:1px solid var(--card-border);
  background:rgba(255,255,255,.02);
}
td { padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.04); }
tr:hover td { background:rgba(99,102,241,.04); }
.num { text-align:right; font-variant-numeric:tabular-nums; }

/* ---------- Buttons ---------- */
.btn {
  display:inline-flex; align-items:center; gap:7px; border:none; border-radius:10px;
  padding:9px 16px; font-family:inherit; font-size:13px; font-weight:600;
  cursor:pointer; text-decoration:none; transition:all .18s cubic-bezier(.4,0,.2,1);
  white-space:nowrap;
}
.btn-primary {
  background:linear-gradient(135deg, var(--primary) 0%, var(--primary2) 100%);
  color:#fff; box-shadow:0 4px 14px -4px rgba(99,102,241,.5);
}
.btn-primary:hover { transform:translateY(-1px); box-shadow:0 8px 20px -6px rgba(99,102,241,.6); filter:brightness(1.08); }
.btn-outline { background:rgba(255,255,255,.03); border:1px solid var(--card-border); color:var(--text); }
.btn-outline:hover { border-color:var(--primary); background:rgba(99,102,241,.08); }
.btn-danger { background:rgba(239,68,68,.14); color:#f87171; border:1px solid rgba(239,68,68,.25); }
.btn-danger:hover { background:rgba(239,68,68,.22); }
.btn-sm { padding:7px 12px; font-size:12px; }
.btn-block { width:100%; justify-content:center; }

/* ---------- Alerts ---------- */
.alert { padding:13px 16px; border-radius:12px; margin-bottom:18px; font-size:13px; display:flex; align-items:center; gap:10px; }
.alert-error   { background:rgba(239,68,68,.10); border:1px solid rgba(239,68,68,.28); color:#fca5a5; }
.alert-success { background:rgba(16,185,129,.10); border:1px solid rgba(16,185,129,.28); color:#6ee7b7; }
.alert-info    { background:rgba(6,182,212,.10); border:1px solid rgba(6,182,212,.28); color:#67e8f9; }

/* ---------- Login ---------- */
.login-body { display:flex; align-items:center; justify-content:center; min-height:100vh; }
.login-card {
  width:400px; background:var(--card); border:1px solid var(--card-border);
  border-radius:20px; padding:38px; backdrop-filter:blur(14px); text-align:center;
  box-shadow: var(--shadow-card), var(--shadow-glow);
}
.login-logo {
  width:56px; height:56px; margin:0 auto 12px; border-radius:14px;
  background:linear-gradient(135deg, var(--primary), var(--primary2));
  display:flex; align-items:center; justify-content:center; font-size:26px;
  box-shadow:0 8px 24px -6px rgba(99,102,241,.55);
}
.login-card h1 { font-size:21px; margin-bottom:6px; letter-spacing:-.3px; }
.login-sub { color:var(--muted); font-size:13px; margin-bottom:24px; }
.login-card form { text-align:left; }
.login-card label { display:block; font-size:11.5px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; margin:14px 0 6px; }
.login-card input { width:100%; }
.login-card button { margin-top:22px; }

/* ---------- Upload zone ---------- */
.dropzone {
  border:2px dashed rgba(99,102,241,.35); border-radius:var(--radius);
  padding:52px; text-align:center; color:var(--muted); transition:all .2s; cursor:pointer;
  background:linear-gradient(180deg, rgba(99,102,241,.03), rgba(139,92,246,.02));
}
.dropzone:hover, .dropzone.drag {
  border-color:var(--primary); background:rgba(99,102,241,.08); color:var(--text);
  box-shadow: inset 0 0 40px rgba(99,102,241,.08);
}
.dz-icon { font-size:38px; margin-bottom:12px; opacity:.8; }

/* ---------- Badges ---------- */
.badge { padding:3px 10px; border-radius:20px; font-size:11.5px; font-weight:600; border:1px solid transparent; }
.b-active    { background:rgba(16,185,129,.14); color:#34d399; border-color:rgba(16,185,129,.28); }
.b-paused    { background:rgba(245,158,11,.14); color:#fbbf24; border-color:rgba(245,158,11,.28); }
.b-completed { background:rgba(255,255,255,.06); color:var(--muted); border-color:var(--card-border); }

/* ---------- Funnel ---------- */
.funnel-row { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.funnel-label { width:100px; font-size:12.5px; color:var(--muted); font-weight:600; }
.funnel-bar-wrap { flex:1; background:rgba(255,255,255,.04); border-radius:8px; height:34px; overflow:hidden; position:relative; }
.funnel-bar {
  height:100%; border-radius:8px; display:flex; align-items:center;
  padding:0 14px; font-size:12.5px; font-weight:700; color:#fff; min-width:60px;
  background:linear-gradient(90deg, var(--primary), var(--primary2));
  transition:width .8s cubic-bezier(.4,0,.2,1);
  box-shadow: inset 0 -6px 12px rgba(0,0,0,.15);
  position:relative; overflow:hidden;
}
.funnel-bar::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
  animation: shimmer 3s infinite;
}
@keyframes shimmer { 0%{transform:translateX(-100%);} 100%{transform:translateX(200%);} }

/* ---------- Sparkline / mini chart containers ---------- */
.kpi-spark, .mini-chart { position:relative; }

/* ---------- Segment / tabs ---------- */
.tabs { display:inline-flex; background:rgba(255,255,255,.04); border:1px solid var(--card-border); border-radius:12px; padding:4px; gap:2px; }
.tab-btn { padding:7px 14px; border-radius:9px; background:transparent; border:none; color:var(--muted); font-family:inherit; font-size:12.5px; font-weight:600; cursor:pointer; transition:all .15s; }
.tab-btn:hover { color:var(--text); }
.tab-btn.active { background:linear-gradient(135deg, var(--primary), var(--primary2)); color:#fff; box-shadow:0 3px 10px -2px rgba(99,102,241,.5); }

/* ---------- Legends (custom for our chart tiles) ---------- */
.chart-legend {
  display:flex; flex-wrap:wrap; gap:16px; margin:0 0 8px; padding:0;
  list-style:none; font-size:12px; color:var(--muted);
}
.chart-legend li { display:flex; align-items:center; gap:8px; }
.chart-legend .dot {
  width:10px; height:10px; border-radius:3px;
  background:linear-gradient(135deg, var(--primary), var(--primary2));
  box-shadow: 0 0 6px rgba(99,102,241,.5);
}

/* ---------- ApexCharts tweaks ---------- */
.apexcharts-tooltip.apexcharts-theme-dark {
  background:rgba(15,20,40,.95) !important; border:1px solid var(--card-border-hi) !important;
  border-radius:10px !important; box-shadow:0 8px 32px -8px rgba(0,0,0,.6) !important;
  backdrop-filter: blur(8px);
}
.apexcharts-tooltip-title {
  background:rgba(255,255,255,.04) !important; border-bottom:1px solid var(--card-border) !important;
  font-weight:700 !important; font-size:12px !important;
}
.apexcharts-xaxistooltip, .apexcharts-yaxistooltip {
  background:rgba(15,20,40,.95) !important; border:1px solid var(--card-border-hi) !important;
  color:var(--text) !important; border-radius:6px !important;
}
.apexcharts-legend-text { color:var(--muted) !important; font-size:12.5px !important; }
.apexcharts-menu { background:rgba(15,20,40,.95) !important; border:1px solid var(--card-border) !important; }
.apexcharts-datalabel, .apexcharts-datalabels text { fill:var(--text) !important; }

/* ---------- Actions row ---------- */
.page-actions { display:flex; align-items:center; gap:10px; margin-bottom:16px; flex-wrap:wrap; }
.export-links { display:flex; gap:8px; margin-left:auto; }

/* ---------- Import history / small utility ---------- */
.stat-row { display:flex; align-items:center; justify-content:space-between; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.04); }
.stat-row:last-child { border-bottom:none; }
.stat-row .k { color:var(--muted); font-size:12.5px; }
.stat-row .v { font-weight:700; color:var(--text); }

/* ---------- Responsive ---------- */
@media (max-width:768px){
  .sidebar { width:var(--sidebar-c); } .nav-label{display:none;} .main{margin-left:var(--sidebar-c);}
  .content{padding:16px 14px 60px;}
  .kpi-value { font-size:24px; }
  .filterbar { padding:10px 12px; }
  .panel { padding:16px; }
}