/*
 * BANCO DIGITAL — NEXUS Design System v6.0
 * Dark-First Premium Fintech Identity
 * Inspired by: Mercury, Brex, Stripe, Ramp
 */

/* ════════════════════════════════════════════════════════
   §1  IMPORTS
════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,300..900;1,14..32,300..900&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* ════════════════════════════════════════════════════════
   §2  DESIGN TOKENS
════════════════════════════════════════════════════════ */
:root {
  /* ── Brand ── */
  --nx-brand:       #6366f1;
  --nx-brand-d:     #4f46e5;
  --nx-brand-l:     #818cf8;
  --nx-brand-alpha: rgba(99,102,241,.12);
  --nx-brand-glow:  rgba(99,102,241,.28);

  /* ── Teal accent ── */
  --nx-teal:        #14b8a6;
  --nx-teal-l:      #2dd4bf;
  --nx-teal-glow:   rgba(20,184,166,.22);

  /* ── Depths (bg layers) ── */
  --nx-d0: #020817;   /* deepest black */
  --nx-d1: #0a0f1e;   /* base bg */
  --nx-d2: #0f172a;   /* sidebar / cards */
  --nx-d3: #1e293b;   /* elevated card */
  --nx-d4: #334155;   /* input / hover */
  --nx-d5: #475569;   /* border strong */

  /* ── Surfaces (glass) ── */
  --nx-glass:     rgba(15,23,42,.85);
  --nx-glass-l:   rgba(30,41,59,.7);
  --nx-glass-nav: rgba(10,15,30,.92);

  /* ── Borders ── */
  --nx-border:     rgba(148,163,184,.1);
  --nx-border-l:   rgba(148,163,184,.06);
  --nx-border-brand: rgba(99,102,241,.35);
  --nx-border-brand-l: rgba(99,102,241,.15);

  /* ── Text ── */
  --nx-t1: #f1f5f9;
  --nx-t2: #cbd5e1;
  --nx-t3: #94a3b8;
  --nx-t4: #64748b;
  --nx-t5: #475569;

  /* ── Semantic ── */
  --nx-ok:    #10b981;
  --nx-ok-g:  rgba(16,185,129,.18);
  --nx-warn:  #f59e0b;
  --nx-warn-g:rgba(245,158,11,.18);
  --nx-err:   #ef4444;
  --nx-err-g: rgba(239,68,68,.18);
  --nx-info:  #06b6d4;
  --nx-info-g:rgba(6,182,212,.18);
  --nx-purple:#a78bfa;

  /* ── Typography ── */
  --nx-font:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --nx-mono:  'JetBrains Mono', 'SF Mono', 'Cascadia Code', monospace;

  /* ── Shadows ── */
  --nx-sh-xs:  0 1px 3px rgba(0,0,0,.4);
  --nx-sh-sm:  0 2px 8px rgba(0,0,0,.45);
  --nx-sh-md:  0 4px 20px rgba(0,0,0,.5);
  --nx-sh-lg:  0 8px 40px rgba(0,0,0,.55);
  --nx-sh-xl:  0 20px 60px rgba(0,0,0,.6);
  --nx-glow:   0 0 40px var(--nx-brand-glow), 0 0 80px rgba(99,102,241,.08);
  --nx-glow-sm:0 0 20px var(--nx-brand-glow);
  --nx-glow-ok:0 0 30px var(--nx-ok-g);

  /* ── Radii ── */
  --nx-r1: 6px;
  --nx-r2: 10px;
  --nx-r3: 14px;
  --nx-r4: 18px;
  --nx-r5: 24px;
  --nx-r6: 32px;
  --nx-rf: 9999px;

  /* ── Motion ── */
  --nx-ease:   cubic-bezier(.4,0,.2,1);
  --nx-spring: cubic-bezier(.34,1.56,.64,1);
  --nx-t1s: 150ms var(--nx-ease);
  --nx-t2s: 250ms var(--nx-ease);
  --nx-t3s: 400ms var(--nx-ease);

  /* ── Layout ── */
  --nx-sidebar: 256px;
  --nx-topbar:  60px;
}

/* ════════════════════════════════════════════════════════
   §3  RESET & BASE
════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 16px;
  scroll-behavior: smooth;
  text-size-adjust: 100%;
}

body {
  font-family: var(--nx-font);
  background: var(--nx-d1);
  color: var(--nx-t1);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

/* ════════════════════════════════════════════════════════
   §4  TYPOGRAPHY SCALE
════════════════════════════════════════════════════════ */
.nx-d1 { font-size: clamp(3.25rem,7vw,5.5rem);  font-weight:900; letter-spacing:-.05em; line-height:1.0; }
.nx-d2 { font-size: clamp(2.5rem, 5vw,4rem);    font-weight:900; letter-spacing:-.04em; line-height:1.05; }
.nx-h1 { font-size: clamp(1.75rem,3vw,2.5rem);  font-weight:800; letter-spacing:-.03em; line-height:1.15; }
.nx-h2 { font-size: clamp(1.375rem,2vw,1.875rem);font-weight:700;letter-spacing:-.02em; }
.nx-h3 { font-size: 1.125rem; font-weight:700; letter-spacing:-.01em; }
.nx-h4 { font-size: 1rem;     font-weight:600; letter-spacing:-.005em; }
.nx-body { font-size:.9375rem; font-weight:400; }
.nx-sm   { font-size:.8125rem; }
.nx-xs   { font-size:.6875rem; }
.nx-label { font-size:.6875rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--nx-t4); }

.nx-mono { font-family:var(--nx-mono); font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.nx-grad { background:linear-gradient(135deg,#818cf8 0%,#6366f1 40%,#14b8a6 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.nx-grad-warm { background:linear-gradient(135deg,#f472b6 0%,#818cf8 50%,#6366f1 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

/* ════════════════════════════════════════════════════════
   §5  CARD SYSTEM
════════════════════════════════════════════════════════ */
.nx-card {
  background: var(--nx-d2);
  border: 1px solid var(--nx-border);
  border-radius: var(--nx-r4);
  position: relative;
  overflow: hidden;
  transition: border-color var(--nx-t2s), box-shadow var(--nx-t2s), transform var(--nx-t2s);
}
.nx-card::before {
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.025) 0%,transparent 50%);
  pointer-events:none; border-radius:inherit;
}
.nx-card:hover {
  border-color: var(--nx-border-brand-l);
  box-shadow: var(--nx-sh-md);
}
.nx-card--interactive:hover {
  transform: translateY(-2px);
  border-color: var(--nx-border-brand);
  box-shadow: 0 8px 32px rgba(0,0,0,.5), 0 0 0 1px rgba(99,102,241,.06);
}

/* Glass card */
.nx-glass {
  background: var(--nx-glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--nx-border);
  border-radius: var(--nx-r4);
}

/* Gradient border */
.nx-card-glow {
  background: var(--nx-d2);
  border-radius: var(--nx-r4);
  position: relative;
}
.nx-card-glow::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: calc(var(--nx-r4) + 1px);
  background: linear-gradient(135deg, rgba(99,102,241,.5) 0%, rgba(20,184,166,.3) 50%, transparent 70%);
  z-index: -1;
}

/* ════════════════════════════════════════════════════════
   §6  BADGE SYSTEM
════════════════════════════════════════════════════════ */
.nx-badge {
  display:inline-flex; align-items:center; gap:.25rem;
  padding:.2rem .6rem;
  border-radius: var(--nx-rf);
  font-size:.6875rem; font-weight:700; letter-spacing:.04em;
  white-space:nowrap;
}
.nx-badge-brand   { background:var(--nx-brand-alpha); color:var(--nx-brand-l); border:1px solid rgba(99,102,241,.2); }
.nx-badge-ok      { background:var(--nx-ok-g);   color:var(--nx-ok);   border:1px solid rgba(16,185,129,.2); }
.nx-badge-warn    { background:var(--nx-warn-g);  color:var(--nx-warn); border:1px solid rgba(245,158,11,.2); }
.nx-badge-err     { background:var(--nx-err-g);   color:var(--nx-err);  border:1px solid rgba(239,68,68,.2); }
.nx-badge-teal    { background:var(--nx-teal-glow);  color:var(--nx-teal-l); border:1px solid rgba(20,184,166,.2); }
.nx-badge-neutral { background:rgba(148,163,184,.08); color:var(--nx-t3); border:1px solid var(--nx-border); }

/* ════════════════════════════════════════════════════════
   §7  BUTTON SYSTEM
════════════════════════════════════════════════════════ */
.nx-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.625rem 1.375rem;
  border-radius: var(--nx-r2);
  font-family: var(--nx-font);
  font-size:.875rem; font-weight:600; letter-spacing:-.01em;
  border:none; cursor:pointer;
  transition: all var(--nx-t2s);
  text-decoration:none; white-space:nowrap;
  position:relative; overflow:hidden;
  -webkit-user-select:none; user-select:none;
}
.nx-btn::after {
  content:''; position:absolute; inset:0;
  background:rgba(255,255,255,0);
  transition:background var(--nx-t1s);
  border-radius:inherit;
}
.nx-btn:hover::after  { background:rgba(255,255,255,.06); }
.nx-btn:active { transform:scale(.97); }

.nx-btn-primary {
  background: var(--nx-brand);
  color: #fff;
  box-shadow: 0 4px 16px var(--nx-brand-glow);
}
.nx-btn-primary:hover { background:var(--nx-brand-d); color:#fff; box-shadow:0 6px 24px var(--nx-brand-glow); }

.nx-btn-ghost {
  background: transparent;
  color: var(--nx-t2);
  border: 1px solid var(--nx-border);
}
.nx-btn-ghost:hover { border-color:var(--nx-brand); color:var(--nx-brand-l); background:var(--nx-brand-alpha); }

.nx-btn-sm  { padding:.375rem .875rem; font-size:.8125rem; border-radius:var(--nx-r1); }
.nx-btn-lg  { padding:.875rem 2rem; font-size:1rem; border-radius:var(--nx-r3); }
.nx-btn-xl  { padding:1.125rem 2.5rem; font-size:1.0625rem; border-radius:var(--nx-r3); font-weight:700; }

/* ════════════════════════════════════════════════════════
   §8  INPUT SYSTEM
════════════════════════════════════════════════════════ */
.nx-input {
  width: 100%;
  background: var(--nx-d3);
  border: 1px solid var(--nx-border);
  border-radius: var(--nx-r2);
  padding: .75rem 1rem;
  color: var(--nx-t1);
  font-family: var(--nx-font);
  font-size: .875rem;
  transition: border-color var(--nx-t1s), box-shadow var(--nx-t1s), background var(--nx-t1s);
  outline: none;
}
.nx-input:focus {
  border-color: var(--nx-brand);
  box-shadow: 0 0 0 3px var(--nx-brand-alpha);
  background: var(--nx-d2);
}
.nx-input::placeholder { color: var(--nx-t5); }

/* ════════════════════════════════════════════════════════
   §9  SIDEBAR SYSTEM
════════════════════════════════════════════════════════ */
.nx-sidebar {
  width: var(--nx-sidebar);
  min-width: var(--nx-sidebar);
  background: var(--nx-d2);
  border-right: 1px solid var(--nx-border);
  height: 100vh;
  position: sticky; top: 0;
  overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column;
  flex-shrink: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--nx-d4) transparent;
}
.nx-sidebar::-webkit-scrollbar { width: 3px; }
.nx-sidebar::-webkit-scrollbar-thumb { background: var(--nx-d4); border-radius: 3px; }

.nx-nav-group { padding: .75rem .75rem .25rem; }
.nx-nav-label { font-size:.6rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--nx-t5); }

.nx-nav-link {
  display:flex; align-items:center; gap:.625rem;
  padding:.5rem .75rem;
  border-radius: var(--nx-r2);
  font-size:.8125rem; font-weight:500; letter-spacing:-.005em;
  color: var(--nx-t3);
  text-decoration: none;
  transition: all var(--nx-t1s);
  position: relative;
  cursor: pointer;
}
.nx-nav-link:hover { background:rgba(255,255,255,.04); color:var(--nx-t1); }
.nx-nav-link.active {
  background: var(--nx-brand-alpha);
  color: var(--nx-brand-l);
  font-weight: 600;
}
.nx-nav-link.active::before {
  content:''; position:absolute; left:0; top:25%; bottom:25%;
  width:2px; background:var(--nx-brand);
  border-radius:0 2px 2px 0;
}
.nx-nav-icon { font-size:1rem; width:18px; text-align:center; flex-shrink:0; }

.nx-nav-badge {
  margin-left:auto;
  background: var(--nx-brand-alpha);
  color: var(--nx-brand-l);
  font-size:.6rem; font-weight:700;
  padding:.1rem .4rem;
  border-radius: var(--nx-rf);
}
.nx-nav-badge--err { background:var(--nx-err-g); color:var(--nx-err); }

/* ════════════════════════════════════════════════════════
   §10  TOPBAR
════════════════════════════════════════════════════════ */
.nx-topbar {
  height: var(--nx-topbar);
  background: var(--nx-glass-nav);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--nx-border);
  position: sticky; top: 0; z-index: 200;
  display: flex; align-items: center;
  padding: 0 1.5rem;
  gap: 1rem;
  flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════
   §11  STAT / KPI CARD
════════════════════════════════════════════════════════ */
.nx-stat {
  background: var(--nx-d2);
  border: 1px solid var(--nx-border);
  border-radius: var(--nx-r4);
  padding: 1.25rem 1.5rem;
  position: relative; overflow: hidden;
  transition: all var(--nx-t2s);
}
.nx-stat::before {
  content: ''; position:absolute; inset:0;
  background: linear-gradient(135deg, rgba(255,255,255,.02) 0%, transparent 60%);
  pointer-events:none; border-radius:inherit;
}
.nx-stat:hover { border-color:var(--nx-border-brand-l); transform:translateY(-1px); }
.nx-stat__top { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:.875rem; }
.nx-stat__icon {
  width:38px; height:38px; border-radius:var(--nx-r2);
  display:flex; align-items:center; justify-content:center;
  font-size:1rem; flex-shrink:0;
}
.nx-stat__label { font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--nx-t4); margin-bottom:.4rem; }
.nx-stat__value {
  font-family: var(--nx-mono);
  font-size: 1.875rem; font-weight:700; letter-spacing:-.025em;
  line-height:1; color:var(--nx-t1);
  font-variant-numeric:tabular-nums;
}
.nx-stat__sub { font-size:.75rem; color:var(--nx-t4); margin-top:.4rem; }
.nx-stat__delta {
  display:inline-flex; align-items:center; gap:.2rem;
  font-size:.72rem; font-weight:700;
  padding:.2rem .5rem; border-radius:var(--nx-rf);
}
.nx-stat__delta--up   { background:var(--nx-ok-g);   color:var(--nx-ok); }
.nx-stat__delta--down { background:var(--nx-err-g);  color:var(--nx-err); }
.nx-stat__delta--flat { background:rgba(148,163,184,.1); color:var(--nx-t4); }
.nx-stat__spark { margin-top:.875rem; }

/* ════════════════════════════════════════════════════════
   §12  TABLE SYSTEM
════════════════════════════════════════════════════════ */
.nx-table { width:100%; border-collapse:separate; border-spacing:0; }
.nx-table th {
  font-size:.65rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--nx-t4);
  padding:.75rem 1rem; text-align:left;
  border-bottom:1px solid var(--nx-border);
  background:rgba(255,255,255,.01);
  white-space:nowrap;
}
.nx-table td {
  padding:.875rem 1rem;
  border-bottom:1px solid var(--nx-border-l);
  font-size:.8125rem; color:var(--nx-t2);
  vertical-align:middle;
}
.nx-table tr:last-child td { border-bottom:none; }
.nx-table tbody tr { transition:background var(--nx-t1s); }
.nx-table tbody tr:hover td { background:rgba(255,255,255,.02); }

/* ════════════════════════════════════════════════════════
   §13  ANIMATIONS
════════════════════════════════════════════════════════ */
@keyframes nx-fade-up {
  from { opacity:0; transform:translateY(24px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes nx-fade-in {
  from { opacity:0; } to { opacity:1; }
}
@keyframes nx-scale-in {
  from { opacity:0; transform:scale(.95); }
  to   { opacity:1; transform:scale(1); }
}
@keyframes nx-shimmer {
  0%   { background-position:-200% 0; }
  100% { background-position:200% 0; }
}
@keyframes nx-pulse-glow {
  0%,100% { box-shadow:0 0 20px var(--nx-brand-glow); }
  50%      { box-shadow:0 0 50px var(--nx-brand-glow), 0 0 100px rgba(99,102,241,.08); }
}
@keyframes nx-float {
  0%,100% { transform:translateY(0); }
  50%      { transform:translateY(-10px); }
}
@keyframes nx-rotate {
  from { transform:rotate(0deg); } to { transform:rotate(360deg); }
}
@keyframes nx-dash {
  to { stroke-dashoffset:0; }
}
@keyframes nx-orb-1 {
  0%,100% { transform:translate(0,0) scale(1); }
  33%      { transform:translate(40px,-60px) scale(1.1); }
  66%      { transform:translate(-30px,40px) scale(.9); }
}
@keyframes nx-orb-2 {
  0%,100% { transform:translate(0,0) scale(1); }
  50%      { transform:translate(-50px,30px) scale(1.15); }
}

.nx-afu { animation:nx-fade-up .6s var(--nx-ease) both; }
.nx-afu-1 { animation-delay:.1s; }
.nx-afu-2 { animation-delay:.2s; }
.nx-afu-3 { animation-delay:.3s; }
.nx-afu-4 { animation-delay:.4s; }
.nx-afu-5 { animation-delay:.5s; }
.nx-afi { animation:nx-fade-in .5s var(--nx-ease) both; }
.nx-asi { animation:nx-scale-in .4s var(--nx-spring) both; }

/* ════════════════════════════════════════════════════════
   §14  SKELETON
════════════════════════════════════════════════════════ */
.nx-skeleton {
  background: linear-gradient(90deg, var(--nx-d3) 25%, var(--nx-d4) 50%, var(--nx-d3) 75%);
  background-size: 200% 100%;
  animation: nx-shimmer 1.6s infinite;
  border-radius: var(--nx-r2);
}

/* ════════════════════════════════════════════════════════
   §15  ALERT / NOTIFICATION
════════════════════════════════════════════════════════ */
.nx-alert {
  border-radius:var(--nx-r3); padding:1rem 1.25rem;
  display:flex; align-items:flex-start; gap:.875rem;
  border:1px solid transparent;
  font-size:.8125rem;
}
.nx-alert-brand { background:var(--nx-brand-alpha); border-color:var(--nx-border-brand-l); color:var(--nx-brand-l); }
.nx-alert-ok    { background:var(--nx-ok-g);   border-color:rgba(16,185,129,.2);  color:var(--nx-ok); }
.nx-alert-warn  { background:var(--nx-warn-g); border-color:rgba(245,158,11,.2);  color:var(--nx-warn); }
.nx-alert-err   { background:var(--nx-err-g);  border-color:rgba(239,68,68,.2);   color:var(--nx-err); }
.nx-alert__icon { font-size:1.125rem; flex-shrink:0; margin-top:.05rem; }
.nx-alert__title { font-weight:700; margin-bottom:.25rem; }
.nx-alert__body  { opacity:.9; margin:0; }
.nx-alert a { font-weight:700; text-decoration:underline; color:inherit; opacity:.85; }
.nx-alert a:hover { opacity:1; }

/* ════════════════════════════════════════════════════════
   §16  ADMIN LAYOUT
════════════════════════════════════════════════════════ */
.nx-admin-wrap {
  display:flex; min-height:100vh; background:var(--nx-d1);
  font-family:var(--nx-font);
}
.nx-admin-main { flex:1; min-width:0; display:flex; flex-direction:column; }
.nx-admin-body { flex:1; padding:1.75rem; background:var(--nx-d1); overflow-x:hidden; }

/* ════════════════════════════════════════════════════════
   §17  USER DASHBOARD LAYOUT
════════════════════════════════════════════════════════ */
.nx-dash-wrap { display:flex; min-height:100vh; background:var(--nx-d1); font-family:var(--nx-font); }
.nx-dash-main { flex:1; min-width:0; display:flex; flex-direction:column; }
.nx-dash-body { flex:1; padding:1.5rem; background:var(--nx-d1); overflow-x:hidden; }

/* ════════════════════════════════════════════════════════
   §18  SUBMENU DOT
════════════════════════════════════════════════════════ */
.nx-dot {
  width:5px; height:5px; border-radius:50%;
  background:var(--nx-t5); flex-shrink:0;
  transition:background var(--nx-t1s);
}
.active .nx-dot { background:var(--nx-brand-l); }

/* ════════════════════════════════════════════════════════
   §19  SCROLLBAR GLOBAL
════════════════════════════════════════════════════════ */
* { scrollbar-width:thin; scrollbar-color:var(--nx-d4) transparent; }
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--nx-d4); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--nx-d5); }

/* ════════════════════════════════════════════════════════
   §20  FRONTEND SUPPRESSION (crystal_sky overrides)
════════════════════════════════════════════════════════ */
.header-top,
.header,
.header-area,
.preloader,
.body-overlay,
.sidebar-overlay { display:none !important; }

/* ════════════════════════════════════════════════════════
   §21  TEMPLATE COLOR VAR BRIDGES
════════════════════════════════════════════════════════ */
:root {
  --main: 239 68% 61%;
  --base: 239 68% 61%;
  --bd-primary: var(--nx-brand);
  --bd-font: var(--nx-font);
  --bd-sidebar-bg: var(--nx-d2);
  --bd-sidebar-border: var(--nx-border);
  --bd-sidebar-text: var(--nx-t3);
  --bd-sidebar-text-active: var(--nx-brand-l);
  --bd-sidebar-hover: rgba(255,255,255,.04);
  --bd-sidebar-active: var(--nx-brand-alpha);
  --bd-bg: var(--nx-d1);
  --bd-surface: var(--nx-d2);
  --bd-border: var(--nx-border);
  --bd-primary-light: var(--nx-brand-l);
  --bd-primary-dark: var(--nx-brand-d);
  --bd-primary-muted: var(--nx-brand-alpha);
  --bd-transition: var(--nx-t2s);
  --bd-transition-slow: var(--nx-t3s);
  --bd-shadow-xs: var(--nx-sh-xs);
  --bd-shadow-sm: var(--nx-sh-sm);
  --bd-shadow-lg: var(--nx-sh-lg);
  --bd-r-sm: var(--nx-r1);
  --bd-r-md: var(--nx-r2);
  --bd-r-lg: var(--nx-r3);
  --bd-r-xl: var(--nx-r4);
  --bd-r-2xl: var(--nx-r5);
  --bd-gray-50:  var(--nx-d3);
  --bd-gray-400: var(--nx-t4);
  --bd-gray-500: var(--nx-t4);
  --bd-gray-600: var(--nx-t3);
  --bd-gray-700: var(--nx-t2);
  --bd-gray-900: var(--nx-t1);
  --bd-success: var(--nx-ok);
  --bd-warning: var(--nx-warn);
  --bd-danger:  var(--nx-err);
}

/* ════════════════════════════════════════════════════════
   §22  LEGACY SIDEBAR (crystal_sky dashboard)
════════════════════════════════════════════════════════ */
.sidebar-menu,
.dashboard .sidebar-menu {
  background: var(--nx-d2) !important;
  border-right: 1px solid var(--nx-border) !important;
  width: var(--nx-sidebar) !important;
  min-width: var(--nx-sidebar) !important;
}
.sidebar-menu-list__link {
  color: var(--nx-t3) !important;
}
.sidebar-menu-list__link:hover {
  background: rgba(255,255,255,.04) !important;
  color: var(--nx-t1) !important;
}
.sidebar-menu-list__item.active .sidebar-menu-list__link {
  background: var(--nx-brand-alpha) !important;
  color: var(--nx-brand-l) !important;
}
.dashboard-header {
  background: var(--nx-glass-nav) !important;
  border-bottom: 1px solid var(--nx-border) !important;
}
.dashboard-body {
  background: var(--nx-d1) !important;
}

/* ════════════════════════════════════════════════════════
   §23  ADMIN CSS OVERRIDES
════════════════════════════════════════════════════════ */
.page-wrapper { background: var(--nx-d1) !important; }
.sidebar      { background: var(--nx-d2) !important; border-right:1px solid var(--nx-border) !important; }
.body-wrapper { background: var(--nx-d1) !important; }
.bodywrapper__inner { background: var(--nx-d1) !important; }

/* ════════════════════════════════════════════════════════
   §24  FORM CONTROLS (legacy compat)
════════════════════════════════════════════════════════ */
.form--control,
.form-control {
  background: var(--nx-d3) !important;
  border: 1px solid var(--nx-border) !important;
  border-radius: var(--nx-r2) !important;
  color: var(--nx-t1) !important;
  transition: border-color var(--nx-t1s), box-shadow var(--nx-t1s) !important;
}
.form--control:focus,
.form-control:focus {
  border-color: var(--nx-brand) !important;
  box-shadow: 0 0 0 3px var(--nx-brand-alpha) !important;
  background: var(--nx-d2) !important;
  color: var(--nx-t1) !important;
}
.form--control::placeholder,
.form-control::placeholder { color: var(--nx-t5) !important; }

/* ════════════════════════════════════════════════════════
   §25  BREADCRUMB
════════════════════════════════════════════════════════ */
.breadcrumb-section {
  background: var(--nx-d2) !important;
  border-bottom: 1px solid var(--nx-border) !important;
  padding: 1rem 0 !important;
}
.breadcrumb-section .breadcrumb-heading { color: var(--nx-t1) !important; font-weight:800 !important; }

/* ════════════════════════════════════════════════════════
   §26  LIGHT THEME
════════════════════════════════════════════════════════ */
[data-theme="light"] {
  --nx-d0: #eef2f7;
  --nx-d1: #f1f5f9;
  --nx-d2: #ffffff;
  --nx-d3: #f8fafc;
  --nx-d4: #f1f5f9;
  --nx-d5: #e2e8f0;

  --nx-glass:     rgba(255,255,255,.9);
  --nx-glass-l:   rgba(248,250,252,.85);
  --nx-glass-nav: rgba(255,255,255,.97);

  --nx-border:     rgba(15,23,42,.1);
  --nx-border-l:   rgba(15,23,42,.06);
  --nx-border-brand: rgba(99,102,241,.3);
  --nx-border-brand-l: rgba(99,102,241,.12);

  --nx-t1: #0f172a;
  --nx-t2: #1e293b;
  --nx-t3: #475569;
  --nx-t4: #64748b;
  --nx-t5: #94a3b8;

  --nx-brand-alpha: rgba(99,102,241,.08);
  --nx-brand-glow:  rgba(99,102,241,.18);

  --nx-ok-g:   rgba(16,185,129,.1);
  --nx-warn-g: rgba(245,158,11,.1);
  --nx-err-g:  rgba(239,68,68,.1);
  --nx-info-g: rgba(6,182,212,.1);
  --nx-teal-glow: rgba(20,184,166,.1);

  --nx-sh-xs:  0 1px 3px rgba(0,0,0,.06);
  --nx-sh-sm:  0 2px 8px rgba(0,0,0,.08);
  --nx-sh-md:  0 4px 20px rgba(0,0,0,.1);
  --nx-sh-lg:  0 8px 40px rgba(0,0,0,.12);
  --nx-sh-xl:  0 20px 60px rgba(0,0,0,.14);
  --nx-glow:   0 0 40px var(--nx-brand-glow);
  --nx-glow-sm:0 0 20px var(--nx-brand-glow);
}
.breadcrumb-section .breadcrumb-item a  { color: var(--nx-brand-l) !important; }
.breadcrumb-section .breadcrumb-item.active { color: var(--nx-t4) !important; }

/* ════════════════════════════════════════════════════════
   §26  DIVIDER
════════════════════════════════════════════════════════ */
hr, .nx-divider { border:none; border-top:1px solid var(--nx-border); margin:1.5rem 0; }

/* ════════════════════════════════════════════════════════
   §27  COOKIE BANNER
════════════════════════════════════════════════════════ */
.bd-cookies {
  position:fixed; bottom:1.5rem; left:50%; transform:translateX(-50%);
  z-index:9999; max-width:520px; width:calc(100% - 2rem);
  background: var(--nx-d3);
  border: 1px solid var(--nx-border);
  border-radius: var(--nx-r4);
  padding: 1.25rem 1.5rem;
  box-shadow: var(--nx-sh-xl);
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  transition: opacity .3s, transform .3s;
}
.bd-cookies--hidden { opacity:0; transform:translateX(-50%) translateY(20px); pointer-events:none; }
.bd-cookies__text { flex:1; font-size:.8125rem; color:var(--nx-t3); }
.bd-cookies__accept {
  background: var(--nx-brand); color:#fff;
  border:none; border-radius:var(--nx-r2);
  padding:.5rem 1.125rem; font-size:.8125rem; font-weight:600;
  cursor:pointer; white-space:nowrap;
  transition:background var(--nx-t1s);
}
.bd-cookies__accept:hover { background:var(--nx-brand-d); }

/* ════════════════════════════════════════════════════════
   §28  MISC UTILS
════════════════════════════════════════════════════════ */
.nx-truncate { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nx-no-select { -webkit-user-select:none; user-select:none; }
.nx-glow-brand { box-shadow:var(--nx-glow); }
.nx-ring { outline:2px solid var(--nx-brand); outline-offset:2px; }

/* responsive sidebar */
@media (max-width:1199px) {
  .nx-sidebar, .sidebar-menu {
    position:fixed; left:0; top:0; height:100vh; z-index:1050;
    transform:translateX(-100%);
    transition:transform var(--nx-t2s);
  }
  .nx-sidebar.open, .sidebar-menu.sidebar--open {
    transform:translateX(0);
    box-shadow:var(--nx-sh-xl);
  }
}