/* ============================================================
   v2 — 10 DISTINCT DESIGNS (data-design) + colour ACCENTS (data-accent)
   Accent sets only the colour; Design sets layout + surfaces + style.
   ============================================================ */

/* ---------- ACCENTS (colour only) ---------- */
html[data-accent="indigo"] {--primary:#6366f1;--primary-2:#8b5cf6;--accent:#22d3ee}
html[data-accent="blue"]   {--primary:#2563eb;--primary-2:#0ea5e9;--accent:#22d3ee}
html[data-accent="emerald"]{--primary:#10b981;--primary-2:#22c55e;--accent:#0ea5e9}
html[data-accent="orange"] {--primary:#f97316;--primary-2:#ef4444;--accent:#f59e0b}
html[data-accent="rose"]   {--primary:#ec4899;--primary-2:#f43f5e;--accent:#a855f7}
html[data-accent="teal"]   {--primary:#14b8a6;--primary-2:#06b6d4;--accent:#6366f1}
html[data-accent="violet"] {--primary:#7c3aed;--primary-2:#a855f7;--accent:#ec4899}
html[data-accent="amber"]  {--primary:#f59e0b;--primary-2:#f97316;--accent:#10b981}

/* ============================================================
   DESIGN 1 — CLASSIC (dark sidebar, light, elevated)
   ============================================================ */
html[data-design="classic"]{
  --bg:#eef1f6;--surface:#fff;--surface-2:#f5f7fb;--text:#1f2937;--text-muted:#6b7280;--border:#e6eaf1;
  --radius:14px;--radius-sm:10px;--shadow:0 1px 3px rgba(16,24,40,.08);--shadow-lg:0 20px 45px rgba(16,24,40,.18);
  --sidebar-bg:#0f172a;--sidebar-text:#9fb0c5;--sidebar-active-bg:rgba(255,255,255,.10);--topbar-bg:#fff;--topbar-text:#1f2937;--font:'Inter',sans-serif;
}

/* ============================================================
   DESIGN 2 — HORIZON (top-nav, centered boxed, bordered flat cards)
   ============================================================ */
html[data-design="horizon"]{
  --bg:#f3f5f9;--surface:#fff;--surface-2:#f6f8fb;--text:#16213a;--text-muted:#6a7691;--border:#e4e9f1;
  --radius:12px;--radius-sm:9px;--shadow:none;--shadow-lg:0 18px 40px rgba(20,30,60,.16);
  --sidebar-bg:#16213a;--sidebar-text:#aab6cf;--sidebar-active-bg:rgba(255,255,255,.12);--topbar-bg:#fff;--topbar-text:#16213a;--font:'Inter',sans-serif;
}
html[data-design="horizon"] .card,html[data-design="horizon"] .stat{box-shadow:none;border:1px solid var(--border)}
html[data-design="horizon"] .content{max-width:1180px;margin:0 auto;width:100%}
html[data-design="horizon"] .topbar{border-bottom:none;box-shadow:0 1px 0 var(--border)}

/* ============================================================
   DESIGN 3 — COMPACT RAIL (icon-only sidebar, dense)
   ============================================================ */
html[data-design="rail"]{
  --bg:#eceef3;--surface:#fff;--surface-2:#f4f6fa;--text:#1e293b;--text-muted:#64748b;--border:#e3e7ee;
  --radius:10px;--radius-sm:8px;--shadow:0 1px 2px rgba(0,0,0,.05);--shadow-lg:0 16px 38px rgba(15,23,42,.16);
  --sidebar-bg:#111827;--sidebar-text:#94a3b8;--sidebar-active-bg:rgba(255,255,255,.10);--topbar-bg:#fff;--topbar-text:#1e293b;--font:'Inter',sans-serif;
}
html[data-design="rail"] .sidebar{width:76px}
html[data-design="rail"] .sidebar .brand .bt{display:none}
html[data-design="rail"] .sidebar .menu .sec{display:none}
html[data-design="rail"] .sidebar .menu a{justify-content:center;padding:12px 0}
html[data-design="rail"] .sidebar .menu a span{display:none}
html[data-design="rail"] .sidebar .menu a i{font-size:19px}
html[data-design="rail"] .content{padding:18px}

/* ============================================================
   DESIGN 4 — DARK PRO (full dark, neon glow)
   ============================================================ */
html[data-design="darkpro"]{
  --bg:#0b1020;--surface:#141b30;--surface-2:#1b2440;--text:#e7ecf7;--text-muted:#8b96b3;--border:#26304d;
  --radius:14px;--radius-sm:10px;--shadow:0 2px 10px rgba(0,0,0,.4);--shadow-lg:0 24px 55px rgba(0,0,0,.6);
  --sidebar-bg:#070b16;--sidebar-text:#93a0c0;--sidebar-active-bg:color-mix(in srgb,var(--primary) 22%,transparent);--topbar-bg:#141b30;--topbar-text:#e7ecf7;--font:'Inter',sans-serif;
}
html[data-design="darkpro"] .card,html[data-design="darkpro"] .stat{box-shadow:0 0 0 1px var(--border),0 8px 30px rgba(0,0,0,.35)}
html[data-design="darkpro"] .card:hover,html[data-design="darkpro"] .stat:hover{box-shadow:0 0 0 1px color-mix(in srgb,var(--primary) 40%,transparent),0 0 32px color-mix(in srgb,var(--primary) 22%,transparent)}
html[data-design="darkpro"] .btn-primary{box-shadow:0 0 22px color-mix(in srgb,var(--primary) 45%,transparent)}
html[data-design="darkpro"] .f-ctrl{background:#0e1426}

/* ============================================================
   DESIGN 5 — GLASS (gradient bg, frosted glass cards)
   ============================================================ */
html[data-design="glass"]{
  --bg:#0f1020;--surface:rgba(255,255,255,.10);--surface-2:rgba(255,255,255,.06);--text:#f3f4ff;--text-muted:#c3c7e6;--border:rgba(255,255,255,.18);
  --radius:18px;--radius-sm:12px;--shadow:0 8px 32px rgba(0,0,0,.25);--shadow-lg:0 30px 60px rgba(0,0,0,.45);
  --sidebar-bg:rgba(255,255,255,.07);--sidebar-text:#d6d9f5;--sidebar-active-bg:rgba(255,255,255,.16);--topbar-bg:rgba(255,255,255,.07);--topbar-text:#f3f4ff;--font:'Inter',sans-serif;
}
html[data-design="glass"] body, body:has(>*) {}
html[data-design="glass"]{--glassgrad:linear-gradient(135deg,var(--primary),var(--primary-2))}
html[data-design="glass"] .app{background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 85%,#0a0a1a),color-mix(in srgb,var(--primary-2) 80%,#11021f))}
html[data-design="glass"] .card,html[data-design="glass"] .stat,html[data-design="glass"] .sidebar,html[data-design="glass"] .topbar{backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
html[data-design="glass"] .f-ctrl{background:rgba(255,255,255,.10);color:#fff}
html[data-design="glass"] table.tbl th{background:rgba(255,255,255,.08)}

/* ============================================================
   DESIGN 6 — MATERIAL (bold colored app bar, elevated, uppercase)
   ============================================================ */
html[data-design="material"]{
  --bg:#eef0f4;--surface:#fff;--surface-2:#f4f6f9;--text:#1c1c28;--text-muted:#6b7384;--border:#e6e9ef;
  --radius:8px;--radius-sm:6px;--shadow:0 2px 6px rgba(0,0,0,.10),0 1px 2px rgba(0,0,0,.06);--shadow-lg:0 16px 40px rgba(0,0,0,.22);
  --sidebar-bg:#1c1c28;--sidebar-text:#aeb4c2;--sidebar-active-bg:color-mix(in srgb,var(--primary) 26%,transparent);--topbar-bg:var(--primary);--topbar-text:#fff;--font:'Inter',sans-serif;
}
html[data-design="material"] .topbar{background:linear-gradient(90deg,var(--primary),var(--primary-2));box-shadow:0 3px 10px rgba(0,0,0,.18)}
html[data-design="material"] .topbar .search input{background:rgba(255,255,255,.2);border-color:transparent;color:#fff}
html[data-design="material"] .topbar .search i,html[data-design="material"] .topbar .ic{color:rgba(255,255,255,.85)}
html[data-design="material"] .card .card-h,html[data-design="material"] .page-head h1{text-transform:uppercase;letter-spacing:.4px}
html[data-design="material"] .card:hover,html[data-design="material"] .stat:hover{box-shadow:var(--shadow-lg)}

/* ============================================================
   DESIGN 7 — MINIMAL (flat, airy, thin lines, no shadow)
   ============================================================ */
html[data-design="minimal"]{
  --bg:#ffffff;--surface:#ffffff;--surface-2:#fafafa;--text:#18181b;--text-muted:#9398a3;--border:#ececef;
  --radius:6px;--radius-sm:5px;--shadow:none;--shadow-lg:0 12px 30px rgba(0,0,0,.10);
  --sidebar-bg:#ffffff;--sidebar-text:#6b7280;--sidebar-active-bg:#f3f4f6;--topbar-bg:#fff;--topbar-text:#18181b;--font:'Inter',sans-serif;
}
html[data-design="minimal"] .sidebar{border-right:1px solid var(--border)}
html[data-design="minimal"] .sidebar .brand,html[data-design="minimal"] .sidebar .menu a.active{color:var(--primary)}
html[data-design="minimal"] .sidebar .menu a.active{background:color-mix(in srgb,var(--primary) 10%,transparent)}
html[data-design="minimal"] .card,html[data-design="minimal"] .stat{box-shadow:none;border:1px solid var(--border)}
html[data-design="minimal"] .topbar{border-bottom:1px solid var(--border)}
html[data-design="minimal"] .stat .ico{background:color-mix(in srgb,var(--primary) 12%,transparent);color:var(--primary)}

/* ============================================================
   DESIGN 8 — CORPORATE (boxed, dense, professional)
   ============================================================ */
html[data-design="corporate"]{
  --bg:#dfe4ec;--surface:#fff;--surface-2:#eef1f6;--text:#1f2a44;--text-muted:#64708a;--border:#dce2ec;
  --radius:7px;--radius-sm:5px;--shadow:0 1px 2px rgba(0,0,0,.06);--shadow-lg:0 14px 36px rgba(20,30,60,.18);
  --sidebar-bg:#fff;--sidebar-text:#4b5878;--sidebar-active-bg:color-mix(in srgb,var(--primary) 12%,transparent);--topbar-bg:#fff;--topbar-text:#1f2a44;--font:'Inter',sans-serif;
}
html[data-design="corporate"] .sidebar{border-right:1px solid var(--border)}
html[data-design="corporate"] .sidebar .brand{color:var(--primary)}
html[data-design="corporate"] .sidebar .menu a.active{color:var(--primary);font-weight:700}
html[data-design="corporate"] .sidebar .menu a.active i{color:var(--primary)}
html[data-design="corporate"] .content{max-width:1220px;margin:0 auto;width:100%}
html[data-design="corporate"] table.tbl th{padding:9px 14px}
html[data-design="corporate"] table.tbl td{padding:9px 14px}

/* ============================================================
   DESIGN 9 — VIBRANT (gradient sidebar + gradient stat cards, rounded)
   ============================================================ */
html[data-design="vibrant"]{
  --bg:#f1f0fb;--surface:#fff;--surface-2:#f6f5fe;--text:#241b3c;--text-muted:#6f6790;--border:#ebe7f7;
  --radius:18px;--radius-sm:12px;--shadow:0 6px 20px rgba(90,60,160,.10);--shadow-lg:0 26px 55px rgba(90,60,160,.24);
  --sidebar-bg:linear-gradient(165deg,var(--primary),var(--primary-2));--sidebar-text:rgba(255,255,255,.82);--sidebar-active-bg:rgba(255,255,255,.22);--topbar-bg:#fff;--topbar-text:#241b3c;--font:'Poppins',sans-serif;
}
html[data-design="vibrant"] .sidebar{background:var(--sidebar-bg)}
html[data-design="vibrant"] .sidebar .brand{color:#fff}
html[data-design="vibrant"] .sidebar .menu a.active{color:#fff}
html[data-design="vibrant"] .sidebar .menu a.active i{color:#fff}
html[data-design="vibrant"] .stat{background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff;border:none}
html[data-design="vibrant"] .stat .l,html[data-design="vibrant"] .stat .t{color:rgba(255,255,255,.85)}
html[data-design="vibrant"] .stat .ico{background:rgba(255,255,255,.2)}

/* ============================================================
   DESIGN 10 — SOFT UI (neumorphic, pastel, rounded)
   ============================================================ */
html[data-design="soft"]{
  --bg:#e7ecf3;--surface:#e7ecf3;--surface-2:#e1e7ef;--text:#3a4358;--text-muted:#8a93a8;--border:#d6dde7;
  --radius:20px;--radius-sm:14px;
  --shadow:8px 8px 18px #c9d0db,-8px -8px 18px #ffffff;--shadow-lg:12px 12px 30px #c4ccd8,-12px -12px 30px #ffffff;
  --sidebar-bg:#e7ecf3;--sidebar-text:#717c93;--sidebar-active-bg:#dde3ec;--topbar-bg:#e7ecf3;--topbar-text:#3a4358;--font:'Poppins',sans-serif;
}
html[data-design="soft"] .card,html[data-design="soft"] .stat{border:none;box-shadow:var(--shadow)}
html[data-design="soft"] .topbar{border-bottom:none;box-shadow:0 6px 14px rgba(160,170,190,.25)}
html[data-design="soft"] .sidebar{box-shadow:6px 0 18px rgba(160,170,190,.25)}
html[data-design="soft"] .sidebar .menu a.active{background:#dde3ec;color:var(--primary);box-shadow:inset 3px 3px 7px #c9d0db,inset -3px -3px 7px #fff}
html[data-design="soft"] .f-ctrl{background:#e7ecf3;border:none;box-shadow:inset 4px 4px 9px #cdd4df,inset -4px -4px 9px #ffffff}
html[data-design="soft"] .btn-ghost{background:#e7ecf3;border:none;box-shadow:4px 4px 9px #cdd4df,-4px -4px 9px #ffffff}
html[data-design="soft"] .stat .ico{box-shadow:3px 3px 7px #c9d0db,-3px -3px 7px #fff}

/* ============================================================
   EYE-COMFORT / BANKING designs (soft, low-glare, professional)
   ============================================================ */

/* 11 — TRUST BLUE (muted banking navy, professional) */
html[data-design="trust"]{
  --bg:#eef1f5;--surface:#ffffff;--surface-2:#f3f6fa;--text:#2c3648;--text-muted:#6e7889;--border:#e2e7ee;
  --radius:11px;--radius-sm:8px;--shadow:0 1px 3px rgba(30,45,70,.07);--shadow-lg:0 18px 42px rgba(30,45,70,.16);
  --sidebar-bg:#243044;--sidebar-text:#9aa6bb;--sidebar-active-bg:rgba(255,255,255,.10);--topbar-bg:#fff;--topbar-text:#2c3648;--font:'Inter',sans-serif;
}
html[data-design="trust"] .sidebar .menu a.active i{color:#fff}

/* 12 — CALM (soft slate, gentle, low contrast) */
html[data-design="calm"]{
  --bg:#eceef2;--surface:#f8f9fb;--surface-2:#f1f3f6;--text:#3c4458;--text-muted:#8b93a6;--border:#e2e5ec;
  --radius:13px;--radius-sm:9px;--shadow:0 1px 3px rgba(60,70,90,.06);--shadow-lg:0 18px 42px rgba(60,70,90,.14);
  --sidebar-bg:#3c4458;--sidebar-text:#aeb5c6;--sidebar-active-bg:rgba(255,255,255,.10);--topbar-bg:#f8f9fb;--topbar-text:#3c4458;--font:'Inter',sans-serif;
}
html[data-design="calm"] .card,html[data-design="calm"] .stat{border:1px solid var(--border)}

/* 13 — PAPER (warm cream / sepia, very low glare) */
html[data-design="paper"]{
  --bg:#f1ebe0;--surface:#faf6ee;--surface-2:#f4eee3;--text:#403930;--text-muted:#8c8273;--border:#e7ded0;
  --radius:12px;--radius-sm:9px;--shadow:0 1px 3px rgba(90,75,50,.07);--shadow-lg:0 18px 42px rgba(90,75,50,.16);
  --sidebar-bg:#2f2a22;--sidebar-text:#c9bfac;--sidebar-active-bg:rgba(255,255,255,.10);--topbar-bg:#faf6ee;--topbar-text:#403930;--font:'Inter',sans-serif;
}
html[data-design="paper"] .card,html[data-design="paper"] .stat{box-shadow:none;border:1px solid var(--border)}

/* 14 — SAGE (muted green-gray, calming) */
html[data-design="sage"]{
  --bg:#eaeee6;--surface:#f6f8f2;--surface-2:#eef2e9;--text:#384039;--text-muted:#828c80;--border:#dfe5d8;
  --radius:13px;--radius-sm:9px;--shadow:0 1px 3px rgba(60,75,55,.06);--shadow-lg:0 18px 42px rgba(60,75,55,.14);
  --sidebar-bg:#313c34;--sidebar-text:#aebaad;--sidebar-active-bg:rgba(255,255,255,.10);--topbar-bg:#f6f8f2;--topbar-text:#384039;--font:'Inter',sans-serif;
}
html[data-design="sage"] .card,html[data-design="sage"] .stat{border:1px solid var(--border)}

/* 15 — NIGHT DIM (soft dark, low-contrast, night-friendly) */
html[data-design="dim"]{
  --bg:#1a1f29;--surface:#222a36;--surface-2:#28303d;--text:#cdd3df;--text-muted:#878fa0;--border:#313a48;
  --radius:13px;--radius-sm:9px;--shadow:0 2px 8px rgba(0,0,0,.25);--shadow-lg:0 22px 50px rgba(0,0,0,.45);
  --sidebar-bg:#161b24;--sidebar-text:#919aac;--sidebar-active-bg:rgba(255,255,255,.07);--topbar-bg:#222a36;--topbar-text:#cdd3df;--font:'Inter',sans-serif;
}
html[data-design="dim"] .f-ctrl{background:#1c232f}