/* ═══════════════════════════════════════════════════════
   SLIK ANALYZER PRO — Design System v2.0
   Supports: dark | light | blue | green themes
   Responsive: mobile-first
═══════════════════════════════════════════════════════ */

/* ─────── RESET ─────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
button,input,select,textarea{font-family:inherit;border:none;outline:none}
a{text-decoration:none;color:inherit}
ul,ol{list-style:none}
img{max-width:100%;display:block}

/* ─────── CSS VARS / THEMES ─────── */
:root{
  --sidebar-w:260px;
  --sidebar-mini:64px;
  --topbar-h:56px;
  --r-xs:4px; --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:20px;
  --shadow-card:0 1px 4px rgba(0,0,0,.35),0 0 0 .5px rgba(255,255,255,.04);
  --shadow-drop:0 4px 24px rgba(0,0,0,.4);
  --t:.15s ease;
}

/* === DARK === */
[data-theme="dark"]{
  --bg-base:#0d1117;--bg-surf:#161b22;--bg-elv:#1c2230;--bg-hov:#21283a;
  --bdr-sub:rgba(255,255,255,.06);--bdr-def:rgba(255,255,255,.10);--bdr-str:rgba(255,255,255,.18);
  --tx-1:#e6edf3;--tx-2:#8b949e;--tx-3:#484f58;--tx-inv:#0d1117;
  --accent:#f0a500;--accent-d:rgba(240,165,0,.12);--accent-g:rgba(240,165,0,.25);
  --green:#3fb950;--green-d:rgba(63,185,80,.12);
  --blue:#58a6ff;--blue-d:rgba(88,166,255,.12);
  --red:#f85149;--red-d:rgba(248,81,73,.12);
  --purple:#a371f7;--purple-d:rgba(163,113,247,.12);
  --teal:#2dd4bf;--teal-d:rgba(45,212,191,.12);
  --orange:#f97316;--orange-d:rgba(249,115,22,.12);
}
/* === LIGHT === */
[data-theme="light"]{
  --bg-base:#f0f4f8;--bg-surf:#ffffff;--bg-elv:#e8edf5;--bg-hov:#dde4ee;
  --bdr-sub:rgba(0,0,0,.07);--bdr-def:rgba(0,0,0,.12);--bdr-str:rgba(0,0,0,.22);
  --tx-1:#1a2332;--tx-2:#56677a;--tx-3:#a0aab6;--tx-inv:#ffffff;
  --accent:#d97706;--accent-d:rgba(217,119,6,.10);--accent-g:rgba(217,119,6,.22);
  --green:#16a34a;--green-d:rgba(22,163,74,.10);
  --blue:#2563eb;--blue-d:rgba(37,99,235,.10);
  --red:#dc2626;--red-d:rgba(220,38,38,.10);
  --purple:#7c3aed;--purple-d:rgba(124,58,237,.10);
  --teal:#0d9488;--teal-d:rgba(13,148,136,.10);
  --orange:#ea580c;--orange-d:rgba(234,88,12,.10);
}
/* === BLUE === */
[data-theme="blue"]{
  --bg-base:#04101e;--bg-surf:#071828;--bg-elv:#0c2038;--bg-hov:#112848;
  --bdr-sub:rgba(56,189,248,.08);--bdr-def:rgba(56,189,248,.15);--bdr-str:rgba(56,189,248,.25);
  --tx-1:#c8e6ff;--tx-2:#6aaddc;--tx-3:#2d5f85;--tx-inv:#04101e;
  --accent:#38bdf8;--accent-d:rgba(56,189,248,.12);--accent-g:rgba(56,189,248,.25);
  --green:#34d399;--green-d:rgba(52,211,153,.12);
  --blue:#60a5fa;--blue-d:rgba(96,165,250,.12);
  --red:#f87171;--red-d:rgba(248,113,113,.12);
  --purple:#a78bfa;--purple-d:rgba(167,139,250,.12);
  --teal:#2dd4bf;--teal-d:rgba(45,212,191,.12);
  --orange:#fb923c;--orange-d:rgba(251,146,60,.12);
}
/* === GREEN === */
[data-theme="green"]{
  --bg-base:#04120e;--bg-surf:#081f18;--bg-elv:#0d2a20;--bg-hov:#123528;
  --bdr-sub:rgba(34,197,94,.08);--bdr-def:rgba(34,197,94,.15);--bdr-str:rgba(34,197,94,.25);
  --tx-1:#c6f6e4;--tx-2:#5dcca0;--tx-3:#266b4f;--tx-inv:#04120e;
  --accent:#22c55e;--accent-d:rgba(34,197,94,.12);--accent-g:rgba(34,197,94,.25);
  --green:#4ade80;--green-d:rgba(74,222,128,.12);
  --blue:#67e8f9;--blue-d:rgba(103,232,249,.12);
  --red:#f87171;--red-d:rgba(248,113,113,.12);
  --purple:#c084fc;--purple-d:rgba(192,132,252,.12);
  --teal:#2dd4bf;--teal-d:rgba(45,212,191,.12);
  --orange:#fb923c;--orange-d:rgba(251,146,60,.12);
}
/* === PURPLE === */
[data-theme="purple"]{
  --bg-base:#0d0a1a;--bg-surf:#141028;--bg-elv:#1c1838;--bg-hov:#241f4a;
  --bdr-sub:rgba(168,85,247,.08);--bdr-def:rgba(168,85,247,.15);--bdr-str:rgba(168,85,247,.28);
  --tx-1:#ece8ff;--tx-2:#a78bd4;--tx-3:#4d3d7a;--tx-inv:#0d0a1a;
  --accent:#a855f7;--accent-d:rgba(168,85,247,.14);--accent-g:rgba(168,85,247,.30);
  --green:#4ade80;--green-d:rgba(74,222,128,.12);
  --blue:#818cf8;--blue-d:rgba(129,140,248,.12);
  --red:#f87171;--red-d:rgba(248,113,113,.12);
  --purple:#c084fc;--purple-d:rgba(192,132,252,.12);
  --teal:#2dd4bf;--teal-d:rgba(45,212,191,.12);
  --orange:#fb923c;--orange-d:rgba(251,146,60,.12);
}
/* === ROSE === */
[data-theme="rose"]{
  --bg-base:#130810;--bg-surf:#1e101a;--bg-elv:#2a1526;--bg-hov:#361b32;
  --bdr-sub:rgba(251,113,133,.08);--bdr-def:rgba(251,113,133,.15);--bdr-str:rgba(251,113,133,.28);
  --tx-1:#ffe8ef;--tx-2:#d48499;--tx-3:#7a3050;--tx-inv:#130810;
  --accent:#fb7185;--accent-d:rgba(251,113,133,.14);--accent-g:rgba(251,113,133,.30);
  --green:#4ade80;--green-d:rgba(74,222,128,.12);
  --blue:#67e8f9;--blue-d:rgba(103,232,249,.12);
  --red:#fca5a5;--red-d:rgba(252,165,165,.12);
  --purple:#c084fc;--purple-d:rgba(192,132,252,.12);
  --teal:#2dd4bf;--teal-d:rgba(45,212,191,.12);
  --orange:#fb923c;--orange-d:rgba(251,146,60,.12);
}
/* === AMBER === */
[data-theme="amber"]{
  --bg-base:#0f0900;--bg-surf:#1a1200;--bg-elv:#251a00;--bg-hov:#302200;
  --bdr-sub:rgba(251,191,36,.08);--bdr-def:rgba(251,191,36,.15);--bdr-str:rgba(251,191,36,.28);
  --tx-1:#fff8cc;--tx-2:#d4a832;--tx-3:#7a5c00;--tx-inv:#0f0900;
  --accent:#fbbf24;--accent-d:rgba(251,191,36,.14);--accent-g:rgba(251,191,36,.30);
  --green:#4ade80;--green-d:rgba(74,222,128,.12);
  --blue:#67e8f9;--blue-d:rgba(103,232,249,.12);
  --red:#f87171;--red-d:rgba(248,113,113,.12);
  --purple:#c084fc;--purple-d:rgba(192,132,252,.12);
  --teal:#2dd4bf;--teal-d:rgba(45,212,191,.12);
  --orange:#fb923c;--orange-d:rgba(251,146,60,.12);
}
/* === TEAL === */
[data-theme="teal"]{
  --bg-base:#030e10;--bg-surf:#061820;--bg-elv:#0a2530;--bg-hov:#0f3040;
  --bdr-sub:rgba(20,184,166,.08);--bdr-def:rgba(20,184,166,.15);--bdr-str:rgba(20,184,166,.28);
  --tx-1:#ccfbf1;--tx-2:#5ecbda;--tx-3:#1e6e78;--tx-inv:#030e10;
  --accent:#14b8a6;--accent-d:rgba(20,184,166,.14);--accent-g:rgba(20,184,166,.30);
  --green:#4ade80;--green-d:rgba(74,222,128,.12);
  --blue:#67e8f9;--blue-d:rgba(103,232,249,.12);
  --red:#f87171;--red-d:rgba(248,113,113,.12);
  --purple:#c084fc;--purple-d:rgba(192,132,252,.12);
  --teal:#2dd4bf;--teal-d:rgba(45,212,191,.12);
  --orange:#fb923c;--orange-d:rgba(251,146,60,.12);
}
/* === CRIMSON === */
[data-theme="crimson"]{
  --bg-base:#0e0404;--bg-surf:#1a0808;--bg-elv:#240c0c;--bg-hov:#301010;
  --bdr-sub:rgba(239,68,68,.08);--bdr-def:rgba(239,68,68,.15);--bdr-str:rgba(239,68,68,.28);
  --tx-1:#ffe6e6;--tx-2:#d46060;--tx-3:#7a2020;--tx-inv:#0e0404;
  --accent:#ef4444;--accent-d:rgba(239,68,68,.14);--accent-g:rgba(239,68,68,.30);
  --green:#4ade80;--green-d:rgba(74,222,128,.12);
  --blue:#67e8f9;--blue-d:rgba(103,232,249,.12);
  --red:#fca5a5;--red-d:rgba(252,165,165,.12);
  --purple:#c084fc;--purple-d:rgba(192,132,252,.12);
  --teal:#2dd4bf;--teal-d:rgba(45,212,191,.12);
  --orange:#fb923c;--orange-d:rgba(251,146,60,.12);
}
/* === MIDNIGHT === */
[data-theme="midnight"]{
  --bg-base:#020406;--bg-surf:#04080e;--bg-elv:#070d18;--bg-hov:#0c1220;
  --bdr-sub:rgba(99,102,241,.08);--bdr-def:rgba(99,102,241,.15);--bdr-str:rgba(99,102,241,.28);
  --tx-1:#c8d0f0;--tx-2:#6470a0;--tx-3:#202840;--tx-inv:#020406;
  --accent:#6366f1;--accent-d:rgba(99,102,241,.14);--accent-g:rgba(99,102,241,.30);
  --green:#4ade80;--green-d:rgba(74,222,128,.12);
  --blue:#60a5fa;--blue-d:rgba(96,165,250,.12);
  --red:#f87171;--red-d:rgba(248,113,113,.12);
  --purple:#c084fc;--purple-d:rgba(192,132,252,.12);
  --teal:#2dd4bf;--teal-d:rgba(45,212,191,.12);
  --orange:#fb923c;--orange-d:rgba(251,146,60,.12);
}
/* === COFFEE === */
[data-theme="coffee"]{
  --bg-base:#0c0702;--bg-surf:#180e04;--bg-elv:#221508;--bg-hov:#2e1c0c;
  --bdr-sub:rgba(217,119,6,.08);--bdr-def:rgba(217,119,6,.15);--bdr-str:rgba(217,119,6,.28);
  --tx-1:#f5e8d0;--tx-2:#c09060;--tx-3:#784520;--tx-inv:#0c0702;
  --accent:#d97706;--accent-d:rgba(217,119,6,.14);--accent-g:rgba(217,119,6,.30);
  --green:#4ade80;--green-d:rgba(74,222,128,.12);
  --blue:#67e8f9;--blue-d:rgba(103,232,249,.12);
  --red:#f87171;--red-d:rgba(248,113,113,.12);
  --purple:#c084fc;--purple-d:rgba(192,132,252,.12);
  --teal:#2dd4bf;--teal-d:rgba(45,212,191,.12);
  --orange:#fb923c;--orange-d:rgba(251,146,60,.12);
}
/* === SLATE === */
[data-theme="slate"]{
  --bg-base:#090b0f;--bg-surf:#0e1118;--bg-elv:#141820;--bg-hov:#1a1f28;
  --bdr-sub:rgba(148,163,184,.06);--bdr-def:rgba(148,163,184,.12);--bdr-str:rgba(148,163,184,.22);
  --tx-1:#dde3ee;--tx-2:#7a8394;--tx-3:#3a4050;--tx-inv:#090b0f;
  --accent:#94a3b8;--accent-d:rgba(148,163,184,.10);--accent-g:rgba(148,163,184,.22);
  --green:#4ade80;--green-d:rgba(74,222,128,.12);
  --blue:#60a5fa;--blue-d:rgba(96,165,250,.12);
  --red:#f87171;--red-d:rgba(248,113,113,.12);
  --purple:#c084fc;--purple-d:rgba(192,132,252,.12);
  --teal:#2dd4bf;--teal-d:rgba(45,212,191,.12);
  --orange:#fb923c;--orange-d:rgba(251,146,60,.12);
}
/* === NORD === */
[data-theme="nord"]{
  --bg-base:#1a1f2e;--bg-surf:#232940;--bg-elv:#2c3452;--bg-hov:#354063;
  --bdr-sub:rgba(136,192,208,.08);--bdr-def:rgba(136,192,208,.15);--bdr-str:rgba(136,192,208,.28);
  --tx-1:#eceff4;--tx-2:#8892a4;--tx-3:#4a5468;--tx-inv:#1a1f2e;
  --accent:#88c0d0;--accent-d:rgba(136,192,208,.14);--accent-g:rgba(136,192,208,.30);
  --green:#a3be8c;--green-d:rgba(163,190,140,.12);
  --blue:#81a1c1;--blue-d:rgba(129,161,193,.12);
  --red:#bf616a;--red-d:rgba(191,97,106,.12);
  --purple:#b48ead;--purple-d:rgba(180,142,173,.12);
  --teal:#8fbcbb;--teal-d:rgba(143,188,187,.12);
  --orange:#d08770;--orange-d:rgba(208,135,112,.12);
}
/* === SYNTHWAVE === */
[data-theme="synthwave"]{
  --bg-base:#0d0820;--bg-surf:#150f35;--bg-elv:#1e1548;--bg-hov:#271c58;
  --bdr-sub:rgba(255,0,255,.08);--bdr-def:rgba(255,0,255,.15);--bdr-str:rgba(255,0,255,.28);
  --tx-1:#f0e6ff;--tx-2:#c080ff;--tx-3:#6040a0;--tx-inv:#0d0820;
  --accent:#ff00ff;--accent-d:rgba(255,0,255,.14);--accent-g:rgba(255,0,255,.30);
  --green:#00ff88;--green-d:rgba(0,255,136,.12);
  --blue:#00e5ff;--blue-d:rgba(0,229,255,.12);
  --red:#ff4488;--red-d:rgba(255,68,136,.12);
  --purple:#cc44ff;--purple-d:rgba(204,68,255,.12);
  --teal:#00ffcc;--teal-d:rgba(0,255,204,.12);
  --orange:#ff8800;--orange-d:rgba(255,136,0,.12);
}

/* ─────── BASE ─────── */
html{font-size:var(--base-fs,14px);scroll-behavior:smooth}
body{
  font-family:var(--font-main,'Sora'),sans-serif;
  background:var(--bg-base);color:var(--tx-1);
  line-height:1.55;min-height:100vh;
  transition:background .3s,color .3s;
}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--bg-elv);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--bdr-def)}

/* ─────── LAYOUT ─────── */
.app-layout{display:flex;min-height:100vh}

/* ─────── SIDEBAR ─────── */
.sidebar{
  width:var(--sidebar-w);min-height:100vh;
  background:var(--bg-surf);border-right:1px solid var(--bdr-sub);
  display:flex;flex-direction:column;
  position:fixed;top:0;left:0;bottom:0;z-index:200;
  transition:width var(--t),transform var(--t);
  overflow:hidden;
}
.sidebar.mini{width:var(--sidebar-mini)}
.sidebar.mini .nav-label,.sidebar.mini .nav-section-label,
.sidebar.mini .logo-text-wrap,.sidebar.mini .user-info{display:none!important}
.sidebar.mini .nav-item{justify-content:center;padding:10px}
.sidebar.mini .nav-icon{margin:0}
.sidebar.mini .nav-arrow,.sidebar.mini .nav-badge{display:none}

.sidebar-logo{
  display:flex;align-items:center;gap:10px;
  padding:16px 14px;border-bottom:1px solid var(--bdr-sub);
  flex-shrink:0;
}
.logo-icon{
  width:34px;height:34px;border-radius:var(--r-sm);
  background:var(--accent);display:flex;align-items:center;justify-content:center;
  font-size:17px;flex-shrink:0;box-shadow:0 0 14px var(--accent-g);
}
.logo-text-wrap{overflow:hidden}
.logo-name{font-size:13px;font-weight:700;color:var(--tx-1);letter-spacing:-.01em;white-space:nowrap}
.logo-sub{font-size:10px;color:var(--tx-2);font-family:var(--font-mono,'DM Mono'),monospace}

/* Toggle mini */
.sidebar-toggle{
  position:absolute;right:-12px;top:20px;
  width:24px;height:24px;border-radius:50%;
  background:var(--bg-elv);border:1px solid var(--bdr-def);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;z-index:10;color:var(--tx-2);font-size:12px;
  transition:all var(--t);
}
.sidebar-toggle:hover{background:var(--accent);color:var(--tx-inv)}

/* NAV */
.sidebar-nav{flex:1;padding:10px 8px;overflow-y:auto;overflow-x:hidden}
.nav-section-label{
  font-size:9.5px;font-weight:700;color:var(--tx-3);
  text-transform:uppercase;letter-spacing:.1em;
  padding:8px 10px 4px;margin-top:4px;white-space:nowrap;
}
.nav-item{
  display:flex;align-items:center;gap:9px;
  padding:8px 10px;border-radius:var(--r-sm);
  font-size:13px;color:var(--tx-2);
  cursor:pointer;transition:all var(--t);
  position:relative;user-select:none;
}
.nav-item:hover{background:var(--bg-hov);color:var(--tx-1)}
.nav-item.active{background:var(--accent-d);color:var(--accent);font-weight:500}
.nav-item.active::before{
  content:'';position:absolute;left:0;top:20%;bottom:20%;
  width:2.5px;background:var(--accent);border-radius:0 2px 2px 0;
}
.nav-icon{font-size:16px;width:20px;text-align:center;flex-shrink:0;line-height:1}
.nav-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-badge{
  background:var(--red);color:#fff;font-size:9px;font-weight:700;
  padding:1px 5px;border-radius:10px;font-family:var(--font-mono,'DM Mono'),monospace;
  flex-shrink:0;
}
.nav-arrow{font-size:11px;color:var(--tx-3);transition:transform var(--t);flex-shrink:0}
.nav-item.open .nav-arrow{transform:rotate(90deg)}

/* Submenu collapse */
.nav-sub{
  max-height:0;overflow:hidden;transition:max-height .3s ease;
  padding-left:20px;
}
.nav-sub.open{max-height:300px}
.nav-sub-item{
  display:flex;align-items:center;gap:8px;
  padding:6px 10px;border-radius:var(--r-sm);
  font-size:12px;color:var(--tx-2);cursor:pointer;
  transition:all var(--t);
}
.nav-sub-item:hover{background:var(--bg-hov);color:var(--tx-1)}
.nav-sub-item.active{color:var(--accent)}
.nav-sub-dot{width:5px;height:5px;border-radius:50%;background:var(--tx-3);flex-shrink:0}
.nav-sub-item.active .nav-sub-dot{background:var(--accent)}

/* Sidebar footer / user */
.sidebar-footer{padding:10px 10px 12px;border-top:1px solid var(--bdr-sub);flex-shrink:0}
.user-card{display:flex;align-items:center;gap:9px;padding:8px;border-radius:var(--r-sm);cursor:pointer;transition:background var(--t)}
.user-card:hover{background:var(--bg-hov)}
.user-avatar{
  width:30px;height:30px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--accent),#c07000);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;color:var(--tx-inv);
}
.user-info{overflow:hidden}
.user-name{font-size:12px;font-weight:600;color:var(--tx-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-role{font-size:10px;color:var(--accent);font-family:var(--font-mono,'DM Mono'),monospace;text-transform:capitalize}

/* ─────── MAIN WRAP ─────── */
.main-wrap{
  margin-left:var(--sidebar-w);flex:1;
  display:flex;flex-direction:column;min-height:100vh;
  transition:margin-left var(--t);
}
.main-wrap.sidebar-mini{margin-left:var(--sidebar-mini)}

/* ─────── TOPBAR ─────── */
.topbar{
  height:var(--topbar-h);background:var(--bg-surf);
  border-bottom:1px solid var(--bdr-sub);
  display:flex;align-items:center;padding:0 20px;gap:12px;
  position:sticky;top:0;z-index:100;
}
.topbar-left{display:flex;align-items:center;gap:8px}
.topbar-title{font-size:15px;font-weight:700;color:var(--tx-1);letter-spacing:-.02em}
.topbar-breadcrumb{font-size:12px;color:var(--tx-2)}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:8px}

.topbar-btn{
  width:34px;height:34px;border-radius:var(--r-sm);
  background:transparent;border:1px solid var(--bdr-def);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--tx-2);font-size:15px;
  transition:all var(--t);position:relative;
}
.topbar-btn:hover{background:var(--bg-hov);color:var(--tx-1)}
.topbar-btn .dot{
  position:absolute;top:4px;right:4px;
  width:7px;height:7px;border-radius:50%;
  background:var(--red);border:1.5px solid var(--bg-surf);
}

/* ─────── PAGE CONTENT ─────── */
.page-content{flex:1;padding:20px;display:flex;flex-direction:column;gap:18px}
.page-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
.page-title{font-size:18px;font-weight:700;letter-spacing:-.02em}
.page-sub{font-size:12px;color:var(--tx-2);margin-top:2px}

/* ─────── BUTTONS ─────── */
.btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 16px;border-radius:var(--r-sm);
  font-size:12px;font-weight:600;cursor:pointer;
  transition:all var(--t);border:none;font-family:inherit;
  white-space:nowrap;
}
.btn-sm{padding:5px 11px;font-size:11px}
.btn-lg{padding:10px 22px;font-size:14px}
.btn-icon{padding:7px;width:34px;justify-content:center}
.btn-primary{background:var(--accent);color:var(--tx-inv);box-shadow:0 0 12px var(--accent-g)}
.btn-primary:hover{filter:brightness(1.1);box-shadow:0 0 20px var(--accent-g)}
.btn-success{background:var(--green);color:#fff}
.btn-success:hover{filter:brightness(1.1)}
.btn-danger{background:var(--red);color:#fff}
.btn-danger:hover{filter:brightness(1.1)}
.btn-ghost{background:transparent;color:var(--tx-2);border:1px solid var(--bdr-def)}
.btn-ghost:hover{background:var(--bg-hov);color:var(--tx-1)}
.btn-flat{background:var(--bg-elv);color:var(--tx-2)}
.btn-flat:hover{background:var(--bg-hov);color:var(--tx-1)}
.btn:disabled{opacity:.4;cursor:not-allowed}

/* ─────── CARDS ─────── */
.card{
  background:var(--bg-surf);border:1px solid var(--bdr-sub);
  border-radius:var(--r-lg);box-shadow:var(--shadow-card);overflow:hidden;
}
.card-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;border-bottom:1px solid var(--bdr-sub);
}
.card-title{font-size:13px;font-weight:700;color:var(--tx-1)}
.card-body{padding:16px 18px}

/* STAT CARDS */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.stat-card{
  background:var(--bg-surf);border:1px solid var(--bdr-sub);
  border-radius:var(--r-lg);padding:16px;
  position:relative;overflow:hidden;
  transition:border-color var(--t),transform var(--t);
  box-shadow:var(--shadow-card);
}
.stat-card:hover{border-color:var(--bdr-def);transform:translateY(-2px)}
.stat-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2.5px;
}
.stat-card.c-amber::before{background:var(--accent)}
.stat-card.c-green::before{background:var(--green)}
.stat-card.c-blue::before{background:var(--blue)}
.stat-card.c-red::before{background:var(--red)}
.stat-card.c-purple::before{background:var(--purple)}
.stat-card.c-teal::before{background:var(--teal)}
.stat-card.c-orange::before{background:var(--orange)}
.stat-icon{font-size:20px;margin-bottom:10px;display:block}
.stat-num{
  font-size:24px;font-weight:800;font-family:var(--font-mono,'DM Mono'),monospace;
  line-height:1;margin-bottom:4px;
}
.stat-card.c-amber .stat-num{color:var(--accent)}
.stat-card.c-green .stat-num{color:var(--green)}
.stat-card.c-blue .stat-num{color:var(--blue)}
.stat-card.c-red .stat-num{color:var(--red)}
.stat-card.c-purple .stat-num{color:var(--purple)}
.stat-card.c-teal .stat-num{color:var(--teal)}
.stat-card.c-orange .stat-num{color:var(--orange)}
.stat-label{font-size:11px;color:var(--tx-2);line-height:1.3}
.stat-trend{
  position:absolute;top:12px;right:12px;
  font-size:10px;font-family:var(--font-mono,'DM Mono'),monospace;
  padding:2px 6px;border-radius:4px;
}
.trend-up{background:var(--green-d);color:var(--green)}
.trend-down{background:var(--red-d);color:var(--red)}

/* ─────── TABLES ─────── */
.table-wrap{overflow-x:auto}
.data-table{width:100%;border-collapse:collapse;font-size:12px}
.data-table th{
  font-size:10px;font-weight:700;color:var(--tx-3);
  text-transform:uppercase;letter-spacing:.07em;
  padding:10px 14px;text-align:left;
  background:var(--bg-elv);border-bottom:1px solid var(--bdr-sub);
  white-space:nowrap;cursor:pointer;user-select:none;
}
.data-table th:hover{color:var(--tx-1)}
.data-table td{
  padding:11px 14px;color:var(--tx-2);
  border-bottom:1px solid var(--bdr-sub);vertical-align:middle;
}
.data-table tr:last-child td{border-bottom:none}
.data-table tbody tr:hover td{background:var(--bg-hov);color:var(--tx-1)}
.data-table .sort-icon{font-size:10px;margin-left:4px;opacity:.4}
.data-table th.sorted .sort-icon{opacity:1;color:var(--accent)}

.debtor-name{font-weight:600;color:var(--tx-1);font-size:13px}
.debtor-no{font-family:var(--font-mono,'DM Mono'),monospace;font-size:10px;color:var(--tx-3);margin-top:1px}

/* ─────── BADGES ─────── */
.badge{
  display:inline-block;font-size:10px;font-weight:700;
  padding:3px 9px;border-radius:5px;
  letter-spacing:.04em;text-transform:uppercase;
  font-family:var(--font-mono,'DM Mono'),monospace;white-space:nowrap;
}
.badge-approve{background:var(--green-d);color:var(--green)}
.badge-review{background:var(--accent-d);color:var(--accent)}
.badge-reject{background:var(--red-d);color:var(--red)}
.badge-blue{background:var(--blue-d);color:var(--blue)}
.badge-purple{background:var(--purple-d);color:var(--purple)}
.badge-teal{background:var(--teal-d);color:var(--teal)}
.badge-neutral{background:var(--bg-elv);color:var(--tx-2)}

.tag{
  display:inline-flex;align-items:center;gap:4px;
  padding:2px 8px;border-radius:4px;
  font-size:10px;font-family:var(--font-mono,'DM Mono'),monospace;
}
.tag-amber{background:var(--accent-d);color:var(--accent)}
.tag-green{background:var(--green-d);color:var(--green)}
.tag-blue{background:var(--blue-d);color:var(--blue)}
.tag-red{background:var(--red-d);color:var(--red)}

/* Score chip */
.score-chip{
  display:inline-flex;align-items:center;
  font-family:var(--font-mono,'DM Mono'),monospace;
  font-size:12px;font-weight:600;
  padding:3px 9px;border-radius:6px;
}
.score-chip.hi{background:var(--green-d);color:var(--green)}
.score-chip.md{background:var(--accent-d);color:var(--accent)}
.score-chip.lo{background:var(--red-d);color:var(--red)}

/* ─────── FORMS ─────── */
.form-group{margin-bottom:14px}
.form-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.form-label{display:block;font-size:11px;font-weight:600;color:var(--tx-2);margin-bottom:5px;text-transform:uppercase;letter-spacing:.06em}
.form-label .req{color:var(--red);margin-left:2px}
.form-control{
  width:100%;padding:8px 11px;
  background:var(--bg-elv);border:1px solid var(--bdr-def);
  border-radius:var(--r-sm);color:var(--tx-1);font-size:13px;
  transition:border-color var(--t),box-shadow var(--t);
}
.form-control:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-d)}
.form-control::placeholder{color:var(--tx-3)}
select.form-control{cursor:pointer}
textarea.form-control{resize:vertical;min-height:80px}
.form-hint{font-size:11px;color:var(--tx-3);margin-top:4px}
.form-error{font-size:11px;color:var(--red);margin-top:4px}
.input-group{display:flex;gap:0}
.input-group .form-control{border-radius:var(--r-sm) 0 0 var(--r-sm);flex:1}
.input-group .btn{border-radius:0 var(--r-sm) var(--r-sm) 0}
.form-check{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:13px}
.form-check input[type=checkbox],.form-check input[type=radio]{
  width:15px;height:15px;accent-color:var(--accent);cursor:pointer;
}
.form-section-title{
  font-size:11px;font-weight:700;color:var(--tx-3);
  text-transform:uppercase;letter-spacing:.08em;
  padding-bottom:8px;border-bottom:1px solid var(--bdr-sub);
  margin-bottom:14px;
}

/* ─────── UPLOAD ZONE ─────── */
.upload-zone{
  border:2px dashed var(--bdr-str);border-radius:var(--r-lg);
  padding:32px 24px;text-align:center;cursor:pointer;
  transition:all .2s;background:var(--bg-surf);
}
.upload-zone:hover,.upload-zone.drag-over{
  border-color:var(--accent);background:var(--accent-d);
}
.upload-icon{font-size:32px;margin-bottom:10px}
.upload-title{font-size:14px;font-weight:700;color:var(--tx-1);margin-bottom:4px}
.upload-sub{font-size:12px;color:var(--tx-2)}
.upload-pill{
  display:inline-block;margin-top:10px;
  padding:3px 12px;background:var(--bg-elv);
  border:1px solid var(--bdr-def);border-radius:20px;
  font-size:10px;font-family:var(--font-mono,'DM Mono'),monospace;color:var(--tx-2);
}

/* ─────── MODAL ─────── */
.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.65);
  z-index:1000;display:flex;align-items:center;justify-content:center;
  padding:16px;opacity:0;pointer-events:none;transition:opacity .2s;
}
.modal-overlay.active{opacity:1;pointer-events:all}
.modal{
  background:var(--bg-surf);border:1px solid var(--bdr-def);
  border-radius:var(--r-xl);box-shadow:var(--shadow-drop);
  width:100%;max-width:620px;max-height:90vh;
  display:flex;flex-direction:column;
  transform:translateY(20px);transition:transform .2s;
}
.modal-overlay.active .modal{transform:translateY(0)}
.modal-lg{max-width:900px}
.modal-sm{max-width:420px}
.modal-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;border-bottom:1px solid var(--bdr-sub);flex-shrink:0;
}
.modal-title{font-size:14px;font-weight:700;color:var(--tx-1)}
.modal-close{
  width:28px;height:28px;border-radius:var(--r-sm);
  background:transparent;border:1px solid var(--bdr-def);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--tx-2);font-size:16px;
  transition:all var(--t);
}
.modal-close:hover{background:var(--bg-hov);color:var(--tx-1)}
.modal-body{padding:20px;overflow-y:auto;flex:1}
.modal-footer{
  padding:14px 20px;border-top:1px solid var(--bdr-sub);
  display:flex;justify-content:flex-end;gap:8px;flex-shrink:0;
}

/* ─────── TABS ─────── */
.tabs{display:flex;gap:2px;background:var(--bg-elv);padding:4px;border-radius:var(--r-md);width:fit-content}
.tab-btn{
  padding:7px 16px;border-radius:var(--r-sm);font-size:12px;font-weight:600;
  color:var(--tx-2);cursor:pointer;transition:all var(--t);background:transparent;border:none;
}
.tab-btn.active{background:var(--bg-surf);color:var(--tx-1);box-shadow:var(--shadow-card)}
.tab-pane{display:none}
.tab-pane.active{display:block}

/* ─────── PROGRESS BARS ─────── */
.progress-bar-wrap{background:var(--bg-elv);border-radius:4px;overflow:hidden}
.progress-bar{height:7px;border-radius:4px;transition:width .8s ease}
.progress-bar.c-blue{background:var(--blue)}
.progress-bar.c-green{background:var(--green)}
.progress-bar.c-amber{background:var(--accent)}
.progress-bar.c-purple{background:var(--purple)}
.progress-bar.c-orange{background:var(--orange)}
.progress-label{display:flex;justify-content:space-between;font-size:11px;color:var(--tx-2);margin-bottom:5px}
.progress-label .val{font-family:var(--font-mono,'DM Mono'),monospace;font-weight:600}

/* ─────── ALERTS & FLASH ─────── */
.alert{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:var(--r-md);font-size:13px;margin-bottom:14px}
.alert-success{background:var(--green-d);color:var(--green);border:1px solid rgba(63,185,80,.25)}
.alert-warning{background:var(--accent-d);color:var(--accent);border:1px solid rgba(240,165,0,.25)}
.alert-danger{background:var(--red-d);color:var(--red);border:1px solid rgba(248,81,73,.25)}
.alert-info{background:var(--blue-d);color:var(--blue);border:1px solid rgba(88,166,255,.25)}

/* ─────── TOAST ─────── */
#toast-container{position:fixed;bottom:20px;right:20px;z-index:9999;display:flex;flex-direction:column;gap:8px}
.toast{
  background:var(--bg-elv);border:1px solid var(--bdr-def);
  border-radius:var(--r-md);padding:12px 16px;
  display:flex;align-items:center;gap:10px;
  box-shadow:var(--shadow-drop);font-size:12px;font-weight:500;
  animation:slideInRight .25s ease;min-width:260px;max-width:380px;
}
@keyframes slideInRight{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:translateX(0)}}
.toast.success{border-left:3px solid var(--green);color:var(--green)}
.toast.error{border-left:3px solid var(--red);color:var(--red)}
.toast.info{border-left:3px solid var(--blue);color:var(--blue)}

/* ─────── AI CARD ─────── */
.ai-card{background:var(--bg-surf);border:1px solid var(--bdr-sub);border-radius:var(--r-lg);overflow:hidden;position:relative;box-shadow:var(--shadow-card)}
.ai-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--purple),var(--blue))}
.ai-card-head{padding:14px 16px;border-bottom:1px solid var(--bdr-sub);display:flex;align-items:center;gap:9px}
.ai-pulse{width:8px;height:8px;border-radius:50%;background:var(--green);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(63,185,80,.5)}50%{box-shadow:0 0 0 6px transparent}}

/* ─────── SCORING DISPLAY ─────── */
.score-gauge{text-align:center;padding:16px}
.score-big{
  font-size:52px;font-weight:900;font-family:var(--font-mono,'DM Mono'),monospace;
  letter-spacing:-.04em;line-height:1;
}
.score-grade{
  font-size:22px;font-weight:800;font-family:var(--font-mono,'DM Mono'),monospace;
  margin-top:4px;
}
.keputusan-text{font-size:13px;font-weight:700;margin-top:6px;text-transform:uppercase;letter-spacing:.08em}

/* ─────── DONUT / CHART CONTAINERS ─────── */
.chart-container{position:relative;height:200px}
.chart-container.h250{height:250px}
.chart-container.h300{height:300px}
.chart-container.h180{height:180px}

/* ─────── PAGINATION ─────── */
.pagination{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.page-btn{
  min-width:32px;height:32px;padding:0 8px;
  border-radius:var(--r-sm);font-size:12px;
  background:transparent;border:1px solid var(--bdr-def);
  color:var(--tx-2);cursor:pointer;transition:all var(--t);
  display:flex;align-items:center;justify-content:center;
}
.page-btn:hover{background:var(--bg-hov);color:var(--tx-1)}
.page-btn.active{background:var(--accent);border-color:var(--accent);color:var(--tx-inv)}
.page-btn:disabled{opacity:.35;cursor:default}

/* ─────── DROPDOWN MENU ─────── */
.dropdown{position:relative;display:inline-block}
.dropdown-menu{
  position:absolute;top:calc(100% + 6px);right:0;
  background:var(--bg-elv);border:1px solid var(--bdr-def);
  border-radius:var(--r-md);box-shadow:var(--shadow-drop);
  min-width:160px;z-index:500;
  opacity:0;pointer-events:none;transform:translateY(6px);transition:all .15s;
}
.dropdown-menu.open{opacity:1;pointer-events:all;transform:translateY(0)}
.dropdown-item{
  display:flex;align-items:center;gap:8px;padding:9px 14px;
  font-size:12px;color:var(--tx-2);cursor:pointer;transition:background var(--t);
}
.dropdown-item:hover{background:var(--bg-hov);color:var(--tx-1)}
.dropdown-item.danger:hover{background:var(--red-d);color:var(--red)}
.dropdown-divider{height:1px;background:var(--bdr-sub);margin:4px 0}

/* ─────── LOADING ─────── */
.spinner{
  width:18px;height:18px;border-radius:50%;
  border:2.5px solid var(--bdr-def);
  border-top-color:var(--accent);
  animation:spin .7s linear infinite;display:inline-block;
}
@keyframes spin{to{transform:rotate(360deg)}}
.overlay-load{
  position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:9000;
  display:none;align-items:center;justify-content:center;flex-direction:column;gap:12px;
}
.overlay-load.show{display:flex}
.overlay-load .spinner{width:36px;height:36px;border-width:4px}
.overlay-load p{color:#fff;font-size:13px}

/* ─────── EMPTY STATE ─────── */
.empty-state{text-align:center;padding:40px 20px;color:var(--tx-3)}
.empty-icon{font-size:36px;margin-bottom:12px}
.empty-title{font-size:14px;font-weight:600;color:var(--tx-2);margin-bottom:4px}
.empty-sub{font-size:12px}

/* ─────── ANIMATIONS ─────── */
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.anim-fade-up{animation:fadeUp .35s ease both}
.anim-delay-1{animation-delay:.05s}
.anim-delay-2{animation-delay:.1s}
.anim-delay-3{animation-delay:.15s}
.anim-delay-4{animation-delay:.2s}
.anim-delay-5{animation-delay:.25s}
.anim-delay-6{animation-delay:.3s}

/* ─────── SETTINGS PANEL ─────── */
.settings-drawer{
  position:fixed;top:0;right:-380px;width:360px;height:100vh;
  background:var(--bg-surf);border-left:1px solid var(--bdr-def);
  box-shadow:var(--shadow-drop);z-index:300;
  display:flex;flex-direction:column;transition:right .3s ease;
}
.settings-drawer.open{right:0}
.settings-drawer-head{padding:16px 18px;border-bottom:1px solid var(--bdr-sub);display:flex;align-items:center;justify-content:space-between}
.settings-drawer-body{padding:16px 18px;overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:18px}
.settings-group-label{font-size:10px;font-weight:700;color:var(--tx-3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px}
.theme-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.theme-swatch{
  aspect-ratio:1;border-radius:var(--r-sm);cursor:pointer;
  border:2px solid transparent;transition:all var(--t);
  display:flex;align-items:center;justify-content:center;font-size:14px;
  position:relative;overflow:hidden;
}
.theme-swatch.active{border-color:var(--accent);box-shadow:0 0 8px var(--accent-g)}
.theme-swatch[data-theme="dark"]     {background:#161b22}
.theme-swatch[data-theme="light"]    {background:#f0f4f8;color:#1a2332}
.theme-swatch[data-theme="blue"]     {background:#071828}
.theme-swatch[data-theme="green"]    {background:#081f18}
.theme-swatch[data-theme="purple"]   {background:#141028}
.theme-swatch[data-theme="rose"]     {background:#1e101a}
.theme-swatch[data-theme="amber"]    {background:#1a1200}
.theme-swatch[data-theme="teal"]     {background:#061820}
.theme-swatch[data-theme="crimson"]  {background:#1a0808}
.theme-swatch[data-theme="midnight"] {background:#04080e}
.theme-swatch[data-theme="coffee"]   {background:#180e04}
.theme-swatch[data-theme="slate"]    {background:#0e1118}
.theme-swatch[data-theme="nord"]     {background:#232940}
.theme-swatch[data-theme="synthwave"]{background:#150f35}

.font-options{display:flex;flex-direction:column;gap:6px}
.font-option{
  padding:8px 12px;border-radius:var(--r-sm);border:1px solid var(--bdr-def);
  cursor:pointer;transition:all var(--t);font-size:13px;color:var(--tx-2);
}
.font-option.active{border-color:var(--accent);color:var(--accent);background:var(--accent-d)}
.font-option span{float:right;font-size:11px;color:var(--tx-3)}

.size-slider{width:100%;accent-color:var(--accent)}

/* ─────── WEBVIEW / IFRAME ─────── */
.webview-container{
  background:var(--bg-surf);border:1px solid var(--bdr-sub);
  border-radius:var(--r-lg);overflow:hidden;
}
.webview-bar{
  display:flex;align-items:center;gap:8px;padding:10px 14px;
  background:var(--bg-elv);border-bottom:1px solid var(--bdr-sub);
}
.webview-url{
  flex:1;padding:6px 10px;background:var(--bg-surf);
  border:1px solid var(--bdr-def);border-radius:var(--r-sm);
  color:var(--tx-1);font-family:var(--font-mono,'DM Mono'),monospace;font-size:12px;
}
.webview-iframe{width:100%;height:600px;border:none;display:block}

/* ─────── KOLEKTIBILITAS HISTORY ─────── */
.kol-history{display:flex;gap:3px;align-items:center}
.kol-cell{
  width:24px;height:28px;border-radius:3px;
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:700;color:#fff;position:relative;
}
.kol-cell[data-kol="1"]{background:var(--green)}
.kol-cell[data-kol="2"]{background:var(--accent)}
.kol-cell[data-kol="3"]{background:var(--orange)}
.kol-cell[data-kol="4"]{background:#c0392b}
.kol-cell[data-kol="5"]{background:var(--red)}
.kol-cell[data-kol="0"]{background:var(--bg-elv);color:var(--tx-3)}
.kol-month{font-size:8px;color:var(--tx-3);text-align:center;margin-top:2px}

/* ─────── RESPONSIVE ─────── */
@media(max-width:1200px){
  .stats-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:992px){
  .sidebar{transform:translateX(-100%)}
  .sidebar.mobile-open{transform:translateX(0)}
  .main-wrap{margin-left:0!important}
  .sidebar-toggle{display:none}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .form-row{grid-template-columns:1fr 1fr}
}
@media(max-width:576px){
  .page-content{padding:12px}
  .stats-grid{grid-template-columns:1fr 1fr}
  .form-row{grid-template-columns:1fr}
  .modal{border-radius:var(--r-lg) var(--r-lg) 0 0;margin-top:auto}
  .modal-overlay{align-items:flex-end;padding:0}
  .data-table th,.data-table td{padding:8px 10px}
  .topbar{padding:0 12px}
  .page-content{gap:12px}
}

/* ─────── UTILITY ─────── */
.d-flex{display:flex}.align-center{align-items:center}
.justify-between{justify-content:space-between}.justify-end{justify-content:flex-end}
.gap-4{gap:4px}.gap-8{gap:8px}.gap-12{gap:12px}.gap-16{gap:16px}
.flex-1{flex:1}.w-full{width:100%}.text-center{text-align:center}
.text-right{text-align:right}.text-muted{color:var(--tx-2)}.text-sm{font-size:11px}
.text-xs{font-size:10px}.text-bold{font-weight:700}.mono{font-family:var(--font-mono,'DM Mono'),monospace}
.mt-8{margin-top:8px}.mt-12{margin-top:12px}.mt-16{margin-top:16px}
.mb-8{margin-bottom:8px}.mb-12{margin-bottom:12px}.mb-16{margin-bottom:16px}
.p-0{padding:0}.hidden{display:none!important}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ─────── PRINT ─────── */
@media print{
  .sidebar,.topbar,.topbar-right,.btn,.no-print{display:none!important}
  .main-wrap{margin-left:0!important}
  .page-content{padding:0}
  .card{border:1px solid #ddd;box-shadow:none}
  body{background:#fff;color:#000}
}