/* ============================================================
   NGT DNC Portal — core.css
   Shared static CSS for the app shell + every tab EXCEPT the
   checker-specific base rules, which now live in tab-checker.css.
   NGT-theme and mobile override rules for the checker still live
   here (interleaved with other tabs' theme rules) -- see
   tab-checker.css header for why.
   Dynamic/PHP-driven overrides (accent color, animated-bg toggle)
   stay inline in template.php and load AFTER this file so they
   still win.
   ============================================================ */

/* ══ TOAST NOTIFICATION ══ */
#ui-toast-container { position:fixed; bottom:24px; right:24px; z-index:9990; display:flex; flex-direction:column; gap:8px; pointer-events:none; }
.ui-toast {
  background:rgba(20,20,30,.96); border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(10px); border-radius:10px; padding:11px 18px;
  color:#fff; font-size:13px; font-weight:600; box-shadow:0 4px 20px rgba(0,0,0,.35);
  animation:toastIn .3s cubic-bezier(.34,1.56,.64,1); pointer-events:auto;
  display:flex; align-items:center; gap:10px; max-width:320px;
}
.ui-toast.good  { border-color:rgba(74,222,128,.4);  background:rgba(10,30,15,.96); }
.ui-toast.bad   { border-color:rgba(248,113,113,.4); background:rgba(30,10,10,.96); }
.ui-toast.info  { border-color:rgba(212,167,66,.35); background:rgba(14,13,8,.96); }
@keyframes toastIn  { from{opacity:0;transform:translateX(30px)} to{opacity:1;transform:none} }
@keyframes toastOut { from{opacity:1;transform:none} to{opacity:0;transform:translateX(30px)} }

/* ══ THEME VARIABLES ══ */
:root {
  --bg:linear-gradient(160deg,#2a2a2a 0%,#0d0d0d 50%,#0d0d0d 100%);
  --surface:rgba(255,255,255,0.06);
  --surface2:rgba(255,255,255,0.04);
  --border:rgba(255,255,255,0.09);
  --border2:rgba(255,255,255,0.15);
  --text:#ffffff;
  --text2:rgba(255,255,255,0.70);
  --text3:rgba(160,160,160,0.85);
  --text4:rgba(160,160,160,0.45);
  --header-bg:linear-gradient(90deg,#0a0a0a 0%,#0a0a0a 40%,#0a0a0a 100%);
  --tab-bg:rgba(0,0,0,0.35);
  --input-bg:rgba(200,200,200,0.15);
  --input-focus:rgba(200,200,200,0.22);
  --console-bg:rgba(255,255,255,0.04);
  --kpi-bg:rgba(255,255,255,0.07);
  --kpi-border:rgba(255,255,255,0.10);
  --row-hover:rgba(255,255,255,0.04);
  --th-color:rgba(160,160,160,0.55);
  --td-color:rgba(255,255,255,0.80);
  --td-border:rgba(255,255,255,0.05);
  --th-border:rgba(255,255,255,0.08);
  --ab-bg:rgba(255,255,255,0.07);
  --ab-border:rgba(255,255,255,0.12);
  --ab-text:rgba(255,255,255,0.72);
  --widget-bg:rgba(255,255,255,0.07);
  --footer-bg:rgba(10,10,10,0.85);
  --time-bg:rgba(255,255,255,0.05);
  --search-box-bg:rgba(255,255,255,0.05);
  --gold:#d4a742;
  --gold-rgb:212,167,66;
  --emerald:#10b981;
  --emerald-rgb:16,185,129;
  --clr-good:#4ade80;
  --clr-bad:#f87171;
  --clr-federal:#67e8f9;
  --clr-warning:#fbbf24;
  --clr-btn-primary:#6d28d9;
  --clr-btn-primary-rgb:109,40,217;
}



/* ══ MIDNIGHT THEME (Emerald Royal) ══ */
html[data-theme="midnight"] {
  --bg:linear-gradient(160deg,#030d08 0%,#081a10 50%,#030d08 100%);
  --surface:rgba(16,185,129,0.07);
  --surface2:rgba(16,185,129,0.04);
  --border:rgba(16,185,129,0.14);
  --border2:rgba(16,185,129,0.22);
  --text:#ecfdf5;
  --text2:rgba(236,253,245,0.78);
  --text3:rgba(110,231,183,0.55);
  --text4:rgba(110,231,183,0.28);
  --header-bg:linear-gradient(90deg,#030d08 0%,#081a10 40%,#030d08 100%);
  --tab-bg:rgba(6,18,12,0.85);
  --input-bg:rgba(16,185,129,0.09);
  --input-focus:rgba(16,185,129,0.16);
  --console-bg:rgba(8,26,16,0.8);
  --kpi-bg:rgba(16,185,129,0.06);
  --kpi-border:rgba(16,185,129,0.15);
  --row-hover:rgba(16,185,129,0.06);
  --th-color:rgba(110,231,183,0.55);
  --td-color:rgba(236,253,245,0.85);
  --td-border:rgba(16,185,129,0.09);
  --th-border:rgba(16,185,129,0.14);
  --ab-bg:rgba(16,185,129,0.07);
  --ab-border:rgba(16,185,129,0.18);
  --ab-text:rgba(236,253,245,0.7);
  --widget-bg:rgba(8,26,16,0.7);
  --footer-bg:rgba(3,13,8,0.92);
  --time-bg:rgba(16,185,129,0.06);
  --search-box-bg:rgba(8,26,16,0.75);
}
html[data-theme="midnight"] .sidebar {
  background:linear-gradient(180deg,#030d08 0%,#081a10 60%,#030d08 100%) !important;
  border-right-color:rgba(16,185,129,0.18);
}

/* ══ NGT BLUE THEME (NextGen Technologies — Light) ══ */
html[data-theme="ngt"] {
  --bg:#d4c6a0;
  --surface:#f7f0dc;
  --surface2:#e0d4b0;
  --border:#c0b08a;
  --border2:#9c8c63;
  --text:#1c1917;
  --text2:#292524;
  --text3:#78716c;
  --text4:#a8a29e;
  --header-bg:linear-gradient(90deg,#1a2f5c 0%,#25437f 50%,#1a2f5c 100%);
  --tab-bg:#f7f0dc;
  --input-bg:#f7f0dc;
  --input-focus:#eef4ff;
  --console-bg:#f0e8d5;
  --kpi-bg:#f7f0dc;
  --kpi-border:#c0b08a;
  --row-hover:#e0d4b0;
  --th-color:#78716c;
  --td-color:#292524;
  --td-border:#d4c6a0;
  --th-border:#c0b08a;
  --ab-bg:#e0d4b0;
  --ab-border:#c0b08a;
  --ab-text:#44403c;
  --widget-bg:#f7f0dc;
  --footer-bg:#1e3a8a;
  --time-bg:rgba(37,99,235,0.06);
  --search-box-bg:#f7f0dc;
  --gold:#2563eb;
  --gold-rgb:37,99,235;
  --clr-btn-primary:#2563eb;
  --clr-btn-primary-rgb:37,99,235;
  --accent:#2563eb;
  --accent-rgb:37,99,235;
}

/* ── Sidebar: deep blue ── */
html[data-theme="ngt"] .sidebar {
  background:linear-gradient(180deg,#1a2f5c 0%,#25437f 55%,#1a2f5c 100%) !important;
  border-right:1px solid rgba(255,255,255,0.1) !important;
  box-shadow:4px 0 32px rgba(30,58,138,0.35) !important;
}
/* Sidebar logo */
html[data-theme="ngt"] .sidebar-logo-img {
  background:rgba(255,255,255,0.15) !important;
  box-shadow:0 4px 20px rgba(0,0,0,0.2) !important;
}
/* Sidebar brand / tagline text */
html[data-theme="ngt"] .sidebar-ngt { color:#fff !important; text-shadow:none !important; }
html[data-theme="ngt"] .sidebar-bla span.w { color:rgba(255,255,255,0.7) !important; }
html[data-theme="ngt"] .sidebar-tagline { color:rgba(255,255,255,0.45) !important; }
html[data-theme="ngt"] .sidebar-tagline em { color:#93c5fd !important; }
html[data-theme="ngt"] .sidebar-section-label { color:rgba(255,255,255,0.35) !important; }
html[data-theme="ngt"] .sidebar-nav-divider { border-color:rgba(255,255,255,0.1) !important; }
/* Sidebar nav items */
html[data-theme="ngt"] .sidebar .tab-btn {
  color:rgba(255,255,255,0.65) !important;
  border-color:transparent !important;
}
html[data-theme="ngt"] .sidebar .tab-btn:hover {
  background:rgba(255,255,255,0.12) !important;
  color:#fff !important;
  border-color:rgba(255,255,255,0.15) !important;
}
html[data-theme="ngt"] .sidebar .tab-btn.active {
  background:rgba(255,255,255,0.2) !important;
  color:#fff !important;
  border-color:rgba(255,255,255,0.25) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.08) !important;
}
html[data-theme="ngt"] .sidebar .tab-btn.active .nav-active-dot {
  background:#93c5fd !important;
  box-shadow:0 0 7px rgba(147,197,253,0.8) !important;
}
/* Sidebar toggle button */
html[data-theme="ngt"] .sidebar-toggle {
  background:rgba(255,255,255,0.1) !important;
  border-color:rgba(255,255,255,0.15) !important;
  color:#fff !important;
}
/* Sidebar user info */
html[data-theme="ngt"] .sidebar-user-name { color:rgba(255,255,255,0.9) !important; }
html[data-theme="ngt"] .sidebar-user-role { color:rgba(255,255,255,0.5) !important; }
html[data-theme="ngt"] .sidebar-user-avatar {
  background:rgba(255,255,255,0.15) !important;
  border-color:rgba(255,255,255,0.25) !important;
  color:#fff !important;
}
html[data-theme="ngt"] .sidebar-logout { color:rgba(255,255,255,0.45) !important; }
html[data-theme="ngt"] .sidebar-logout:hover { color:#fca5a5 !important; }

/* ── Top bar: blue ── */
html[data-theme="ngt"] .top-bar {
  background:linear-gradient(90deg,#1a2f5c 0%,#25437f 50%,#1a2f5c 100%) !important;
  border-bottom:1px solid rgba(255,255,255,0.08) !important;
}
html[data-theme="ngt"] .top-bar-clock,
html[data-theme="ngt"] .top-bar-date { color:rgba(255,255,255,0.55) !important; }
html[data-theme="ngt"] .top-bar-time { color:#fff !important; }
html[data-theme="ngt"] .top-bar-uptime-lbl { color:rgba(255,255,255,0.4) !important; }
html[data-theme="ngt"] .top-bar-uptime-val { color:#86efac !important; }
html[data-theme="ngt"] .top-bar-theme-btn {
  background:rgba(255,255,255,0.12) !important;
  color:#fff !important;
  border-color:rgba(255,255,255,0.2) !important;
}
html[data-theme="ngt"] .top-bar-theme-btn:hover { background:rgba(255,255,255,0.22) !important; }
html[data-theme="ngt"] .top-bar-user,
html[data-theme="ngt"] .top-bar-user * { color:rgba(255,255,255,0.85) !important; }

/* ── Footer: blue ── */
html[data-theme="ngt"] .footer-bar {
  background:linear-gradient(90deg,#1a2f5c 0%,#25437f 50%,#1a2f5c 100%) !important;
  border-top:1px solid rgba(255,255,255,0.1) !important;
}
html[data-theme="ngt"] .footer-left,
html[data-theme="ngt"] .footer-right,
html[data-theme="ngt"] .footer-bar * { color:rgba(255,255,255,0.65) !important; }

/* ── Main content area: light ── */
html[data-theme="ngt"] body,
html[data-theme="ngt"] .main-content { background:#d4c6a0 !important; }
html[data-theme="ngt"] .main-content::-webkit-scrollbar-thumb { background:rgba(37,99,235,0.2) !important; }

/* ── Content tabs (horizontal tab bar in content area) ── */
html[data-theme="ngt"] .tab-bar-wrap,
html[data-theme="ngt"] .tab-nav-wrap { background:#f7f0dc !important; border-color:#c0b08a !important; }
html[data-theme="ngt"] .tab-btn.active .nav-label { color:#2563eb !important; }
html[data-theme="ngt"] .tab-btn.active { background:rgba(37,99,235,0.08) !important; border-color:rgba(37,99,235,0.2) !important; }
html[data-theme="ngt"] .nav-label { color:#78716c !important; }
html[data-theme="ngt"] .tab-btn:hover .nav-label { color:#292524 !important; }
html[data-theme="ngt"] .tab-btn:hover { background:rgba(37,99,235,0.05) !important; }

/* ── Widgets / cards: warm off-white with light shadow ── */
html[data-theme="ngt"] .widget {
  background:#f7f0dc !important;
  border:1px solid #c0b08a !important;
  box-shadow:0 2px 12px rgba(37,99,235,0.06) !important;
}
html[data-theme="ngt"] .kpi-card,
html[data-theme="ngt"] .health-card { background:#f7f0dc !important; border-color:#c0b08a !important; }
html[data-theme="ngt"] .pane-wrap { background:transparent !important; }

/* ── Tables ── */
html[data-theme="ngt"] .data-table thead th { background:#e0d4b0 !important; color:#78716c !important; border-color:#c0b08a !important; }
html[data-theme="ngt"] .data-table tbody tr:hover { background:#e0d4b0 !important; }
html[data-theme="ngt"] .data-table tbody td { color:#292524 !important; border-color:#d4c6a0 !important; }

/* ── Inputs ── */
html[data-theme="ngt"] .num-search-input,
html[data-theme="ngt"] input,
html[data-theme="ngt"] select,
html[data-theme="ngt"] textarea {
  background:#f7f0dc !important;
  color:#1c1917 !important;
  border-color:#c0b08a !important;
}
html[data-theme="ngt"] .num-search-input:focus,
html[data-theme="ngt"] input:focus,
html[data-theme="ngt"] select:focus {
  border-color:#2563eb !important;
  box-shadow:0 0 0 3px rgba(37,99,235,0.12) !important;
}
html[data-theme="ngt"] input::placeholder,
html[data-theme="ngt"] textarea::placeholder { color:#a8a29e !important; }

/* ── Checker lookup button: blue ── */
html[data-theme="ngt"] .u0-btn {
  background:linear-gradient(135deg,#1d4ed8,#2563eb) !important;
  box-shadow:0 4px 18px rgba(37,99,235,0.3) !important;
}

/* ── Settings tabs ── */
html[data-theme="ngt"] .settings-tab-btn { color:#78716c !important; border-color:transparent !important; }
html[data-theme="ngt"] .settings-tab-btn.active { background:rgba(37,99,235,0.1) !important; border-color:rgba(37,99,235,0.35) !important; color:#2563eb !important; }

/* ── Sub tabs ── */
html[data-theme="ngt"] .sub-tab-btn { color:#78716c !important; }
html[data-theme="ngt"] .sub-tab-btn:hover { color:#292524 !important; }
html[data-theme="ngt"] .sub-tab-btn.active { color:#2563eb !important; border-bottom-color:#2563eb !important; }

/* ── Scrollbar in sidebar (keep dark on blue) ── */
html[data-theme="ngt"] .sidebar::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.2) !important; }

/* ════════════════════════════════════════════════════════════════
   NGT BLUE THEME — COMPLETION PATCH
   Root cause: the theme only re-skinned the chrome (sidebar/top bar/
   footer) + a handful of shared components (kpi-card, data-table,
   widget, inputs). Every other "glass" component across Activity
   Log, Audit Log, Bulk Checker, Notice Board, Number Verifier,
   ViciDial Checks, Quick Links, etc. still uses translucent WHITE
   (rgba(255,255,255,x)) tuned for a DARK page, so on this light
   theme that text/those surfaces render as near-invisible. This
   block re-points all of it at once, on every tab.
   ════════════════════════════════════════════════════════════════ */

/* 1) Customizable surfaces: force the light-theme default to win even
      over a PREVIOUSLY SAVED dark customization. Color Customization
      applies its saved values as inline styles on <html> at runtime
      (document.documentElement.style.setProperty(...)), and a plain
      inline style always beats a plain stylesheet rule — that's why
      Quick Links / Search History / Last 10 Checks were still showing
      old dark-theme custom colors. Marking these !important makes the
      ngt default win regardless of what's saved (admins can still
      customize colors for the dark/midnight themes as before). */
html[data-theme="ngt"] {
  --checker-card-bg:#f7f0dc !important;
  --checker-card-border:#c0b08a !important;
  --checker-subtitle:#57534e !important;
  --checker-reset-bg:#e0d4b0 !important;
  --checker-reset-text:#57534e !important;
  --bulk-panel-bg:#f7f0dc !important;
  --bulk-panel-border:#c0b08a !important;
  --bulk-textarea-bg:#f7f0dc !important;
  --bulk-textarea-text:#292524 !important;
}

/* 2) Sidebar active label was rendering blue-on-blue (invisible) —
      the horizontal-tab-bar ".active .nav-label" rule was leaking
      into the sidebar because it shares the same .tab-btn class. */
html[data-theme="ngt"] .sidebar .tab-btn.active .nav-label,
html[data-theme="ngt"] .sidebar .tab-btn.active .nav-icon { color:#ffffff !important; }

/* 3) Replace the browser's default focus rectangle (the black box
      seen around the active sidebar item) with a clean themed ring. */
.sidebar .tab-btn { outline:none; }
.sidebar .tab-btn:focus-visible { box-shadow:inset 0 0 0 2px rgba(212,167,66,.45); }
html[data-theme="ngt"] .sidebar .tab-btn:focus-visible { box-shadow:inset 0 0 0 2px rgba(255,255,255,.5) !important; }

/* 4) KPI cards: labels/values were tuned for a dark card and read as
      near-invisible pale text on this theme's white cards. */
html[data-theme="ngt"] .kpi-lbl,
html[data-theme="ngt"] .vc-kpi-lbl { color:#78716c !important; }
html[data-theme="ngt"] .kpi-val { filter:brightness(.72) saturate(1.15); }

/* 5) ".ab" badge buttons: hover state painted white-on-white. */
html[data-theme="ngt"] .ab:hover { background:rgba(37,99,235,.08) !important; color:#292524 !important; }

/* 6) Generic translucent-white "glass" card/row surfaces, reused
      across nearly every tab. */
html[data-theme="ngt"] .act-panel,
html[data-theme="ngt"] .act-panel-head,
html[data-theme="ngt"] .hist-head,
html[data-theme="ngt"] .nv-card,
html[data-theme="ngt"] .nv-stat,
html[data-theme="ngt"] .vc-kpi,
html[data-theme="ngt"] .vc-token-box,
html[data-theme="ngt"] .vc-webform-url,
html[data-theme="ngt"] .ql-item,
html[data-theme="ngt"] .bulk-results-header,
html[data-theme="ngt"] .bulk-stats-card,
html[data-theme="ngt"] .bulk-results-royal,
html[data-theme="ngt"] .bulk-summary-royal,
html[data-theme="ngt"] .audit-row,
html[data-theme="ngt"] .la-row,
html[data-theme="ngt"] .notice-user-chip,
html[data-theme="ngt"] .viewer-perm-item,
html[data-theme="ngt"] .status-offline,
html[data-theme="ngt"] .sp-unknown,
html[data-theme="ngt"] .vc-badge-unknown,
html[data-theme="ngt"] .act-role-user {
  background:#e0d4b0 !important;
  border-color:#c0b08a !important;
}

/* 7) Faint caption / timestamp text (was ~15-30% white). */
html[data-theme="ngt"] .act-extra,
html[data-theme="ngt"] .act-ip,
html[data-theme="ngt"] .act-time,
html[data-theme="ngt"] .act-ua,
html[data-theme="ngt"] .audit-ts,
html[data-theme="ngt"] .cc-row-hint,
html[data-theme="ngt"] .footer-center,
html[data-theme="ngt"] .footer-right,
html[data-theme="ngt"] .ql-item-url,
html[data-theme="ngt"] .scc-lbl,
html[data-theme="ngt"] .tsize-rows,
html[data-theme="ngt"] .notice-view-empty { color:#a8a29e !important; }

/* 8) Secondary text + secondary buttons (was ~35-55% white). */
html[data-theme="ngt"] .audit-detail,
html[data-theme="ngt"] .compare-btn,
html[data-theme="ngt"] .notice-mode-btn,
html[data-theme="ngt"] .nv-btn-secondary,
html[data-theme="ngt"] .pw-eye,
html[data-theme="ngt"] .reset-btn,
html[data-theme="ngt"] .bulk-clear-btn,
html[data-theme="ngt"] .hist-toggle-btn,
html[data-theme="ngt"] .vc-filter-btn,
html[data-theme="ngt"] .other,
html[data-theme="ngt"] .dn,
html[data-theme="ngt"] .uname-cancel-btn,
html[data-theme="ngt"] .footer-left,
html[data-theme="ngt"] .cc-row-label,
html[data-theme="ngt"] .tsize-name,
html[data-theme="ngt"] .u0-subtitle {
  color:#57534e !important;
  background:#e0d4b0 !important;
  border-color:#c0b08a !important;
}
/* 9) ViciDial Checks table. */
html[data-theme="ngt"] .vc-table th { color:#78716c !important; border-color:#c0b08a !important; }
html[data-theme="ngt"] .vc-table td { color:#292524 !important; border-color:#d4c6a0 !important; }
html[data-theme="ngt"] .vc-table tr:hover td { background:#e0d4b0 !important; }
html[data-theme="ngt"] .nv-result-table th { color:#78716c !important; border-color:#c0b08a !important; }
html[data-theme="ngt"] .nv-result-table td { color:#292524 !important; border-color:#d4c6a0 !important; }
html[data-theme="ngt"] .nv-result-table tr:hover td { background:#e0d4b0 !important; }

/* 10) Inline-editable fields that hardcoded dark-bg + white text. */
html[data-theme="ngt"] .cc-hex-input,
html[data-theme="ngt"] .uname-input,
html[data-theme="ngt"] .user-note-inline {
  background:#f7f0dc !important;
  color:#1c1917 !important;
  border-color:#c0b08a !important;
}

/* 11) Progress-bar tracks / row dividers. */
html[data-theme="ngt"] .bulk-prog-bar-track,
html[data-theme="ngt"] .nv-prog-track,
html[data-theme="ngt"] .tsize-bar-wrap { background:#d4c6a0 !important; }
html[data-theme="ngt"] .bulk-result-row { border-bottom-color:#d4c6a0 !important; }

/* 12) Toggle-pill "active" states still in gold — switch to brand blue
       for visual consistency on this theme. */
html[data-theme="ngt"] .vc-filter-btn.active,
html[data-theme="ngt"] .notice-mode-btn.active {
  background:rgba(37,99,235,.12) !important;
  border-color:rgba(37,99,235,.4) !important;
  color:#2563eb !important;
}

/* 13) Online Panel status badge/dot — text color wasn't included in the
       block-6 background/border fix, so it stayed invisible. */
html[data-theme="ngt"] .online-badge.status-offline { color:#a8a29e !important; }
html[data-theme="ngt"] .online-status-dot.status-offline { background:#a8a29e !important; }

/* 14) BLANKET SWEEP — Real-Time Online Users, IP Allowlist, Health
   Dashboard, DB Health and several other panes build their stat grids,
   table headers and labels entirely with ONE-OFF INLINE styles (no
   reusable class) using translucent white — none of those could be
   caught by the named-class rules above. There are 700+ such inline
   occurrences app-wide, so rather than patch each one we re-point the
   two literal patterns at the source, scoped to tab content only
   (".pane-wrap") so the dark sidebar / top bar / footer / login screen
   are completely unaffected. */
html[data-theme="ngt"] .pane-wrap [style*="color:#fff"],
html[data-theme="ngt"] .pane-wrap [style*="color: #fff"],
html[data-theme="ngt"] .pane-wrap [style*="color:#ffffff"] { color:#1c1917 !important; }

html[data-theme="ngt"] .pane-wrap [style*="color:rgba(255,255,255,"],
html[data-theme="ngt"] .pane-wrap [style*="color: rgba(255,255,255,"] { color:#78716c !important; }

html[data-theme="ngt"] .pane-wrap [style*="background:rgba(255,255,255,"],
html[data-theme="ngt"] .pane-wrap [style*="background: rgba(255,255,255,"] { background:#e0d4b0 !important; }

html[data-theme="ngt"] .pane-wrap [style*="solid rgba(255,255,255,"],
html[data-theme="ngt"] .pane-wrap [style*="border-color:rgba(255,255,255,"] { border-color:#c0b08a !important; }

/* 15) Second wave of pale "dark-theme-only" text colors found on Number
   Verifier / Bulk Checker / DNC Checker (a light blue-grey + a few
   pastel mint/tan tones) — same root cause as block 14, different RGB
   triplets, so the first sweep didn't catch them. */
html[data-theme="ngt"] .pane-wrap [style*="color:rgba(200,210,230,"],
html[data-theme="ngt"] .pane-wrap [style*="color: rgba(200,210,230,"],
html[data-theme="ngt"] .pane-wrap [style*="color:rgba(212,196,160,"],
html[data-theme="ngt"] .pane-wrap [style*="color:rgba(110,231,183,"],
html[data-theme="ngt"] .pane-wrap [style*="color:rgba(129,230,217,"],
html[data-theme="ngt"] .pane-wrap [style*="color:rgba(245,240,232,"],
html[data-theme="ngt"] .pane-wrap [style*="color:rgba(236,253,245,"],
html[data-theme="ngt"] .nv-section-title,
html[data-theme="ngt"] .nv-stat-lbl,
html[data-theme="ngt"] .bulk-section-title,
html[data-theme="ngt"] .bulk-clear-btn { color:#78716c !important; }
html[data-theme="ngt"] .nv-textarea::placeholder,
html[data-theme="ngt"] .bulk-textarea::placeholder { color:#a8a29e !important; }
html[data-theme="ngt"] .nv-section-title::after { background:linear-gradient(90deg,#c0b08a,transparent) !important; }

/* 15b) Third wave — gold/cyan/purple "accent" text that's vivid enough
   on a dark card but too pale/washed-out once the card is white. These
   are used as badge/label text in dozens of places across every tab
   (ViciDial, Open Checker, Settings, Health Dashboard, etc). Darken
   each to a saturated version of the same hue so the colour-coding is
   preserved but it's actually readable. */
html[data-theme="ngt"] .pane-wrap [style*="color:rgba(212,167,66,"],
html[data-theme="ngt"] .pane-wrap [style*="color: rgba(212,167,66,"] { color:#92660f !important; }

html[data-theme="ngt"] .pane-wrap [style*="color:rgba(103,232,249,"] { color:#0e7490 !important; }

html[data-theme="ngt"] .pane-wrap [style*="color:rgba(167,139,250,"],
html[data-theme="ngt"] .pane-wrap [style*="color:rgba(192,132,252,"] { color:#6d28d9 !important; }

/* 15d) Fourth wave — even the "vivid" semantic status colours (green/
   red/amber/orange/blue) turn out to be used mostly at LOW alpha as
   small label text (same dark-theme "muted label" pattern), which
   washes out on a white/cream card just like the pastel ones above. */
html[data-theme="ngt"] .pane-wrap [style*="color:rgba(74,222,128,"] { color:#15803d !important; }
html[data-theme="ngt"] .pane-wrap [style*="color:rgba(248,113,113,"],
html[data-theme="ngt"] .pane-wrap [style*="color: rgba(248,113,113,"],
html[data-theme="ngt"] .pane-wrap [style*="color:rgba(239,68,68,"],
html[data-theme="ngt"] .pane-wrap [style*="color: rgba(239,68,68,"] { color:#b91c1c !important; }
html[data-theme="ngt"] .pane-wrap [style*="color:rgba(251,191,36,"],
html[data-theme="ngt"] .pane-wrap [style*="color:rgba(234,179,8,"],
html[data-theme="ngt"] .pane-wrap [style*="color:rgba(250,204,21,"] { color:#92400e !important; }
html[data-theme="ngt"] .pane-wrap [style*="color:rgba(251,146,60,"],
html[data-theme="ngt"] .pane-wrap [style*="color:rgba(249,115,22,"] { color:#c2410c !important; }
html[data-theme="ngt"] .pane-wrap [style*="color:rgba(96,165,250,"],
html[data-theme="ngt"] .pane-wrap [style*="color:rgba(59,130,246,"],
html[data-theme="ngt"] .pane-wrap [style*="color:rgba(37,99,235,"] { color:#1d4ed8 !important; }
html[data-theme="ngt"] .pane-wrap [style*="color:rgba(99,102,241,"],
html[data-theme="ngt"] .pane-wrap [style*="color:rgba(139,92,246,"],
html[data-theme="ngt"] .pane-wrap [style*="color:rgba(168,85,247,"] { color:#6d28d9 !important; }
html[data-theme="ngt"] .pane-wrap [style*="color:rgba(34,211,238,"],
html[data-theme="ngt"] .pane-wrap [style*="color:rgba(16,185,129,"],
html[data-theme="ngt"] .pane-wrap [style*="color:rgba(52,211,153,"] { color:#0f766e !important; }
html[data-theme="ngt"] .pane-wrap [style*="color:rgba(160,160,160,"] { color:#78716c !important; }

/* 15e) THE BIG ONE — solid "neon/pastel" status hex colours (green
   #4ade80, red #f87171, cyan #67e8f9, amber #fbbf24, etc.) used as
   plain (non-rgba) inline text colour for results, badges and KPI
   values on every single tab — 300+ occurrences. These are Tailwind's
   "-400" shades: vivid enough on a dark card, but too light to read
   on a white/cream one. Darken each to a properly-contrasted version
   of the same hue so the colour-coding (good=green, bad=red, etc.)
   is preserved everywhere, on every tab, at once. */
html[data-theme="ngt"] .pane-wrap [style*="color:#4ade80"] { color:#15803d !important; }
html[data-theme="ngt"] .pane-wrap [style*="color:#34d399"] { color:#047857 !important; }
html[data-theme="ngt"] .pane-wrap [style*="color:#f87171"] { color:#b91c1c !important; }
html[data-theme="ngt"] .pane-wrap [style*="color:#67e8f9"] { color:#0e7490 !important; }
html[data-theme="ngt"] .pane-wrap [style*="color:#5eead4"] { color:#0f766e !important; }
html[data-theme="ngt"] .pane-wrap [style*="color:#fbbf24"] { color:#a16207 !important; }
html[data-theme="ngt"] .pane-wrap [style*="color:#eab308"] { color:#854d0e !important; }
html[data-theme="ngt"] .pane-wrap [style*="color:#e8c547"] { color:#8a6207 !important; }
html[data-theme="ngt"] .pane-wrap [style*="color:#f97316"] { color:#c2410c !important; }
html[data-theme="ngt"] .pane-wrap [style*="color:#60a5fa"] { color:#1d4ed8 !important; }
html[data-theme="ngt"] .pane-wrap [style*="color:#a78bfa"],
html[data-theme="ngt"] .pane-wrap [style*="color:#a855f7"] { color:#6d28d9 !important; }

/* 15f) Same fix, but for reusable CLASSES (not inline styles) that bake
   in these pastel hex values — badges, buttons and tags shared across
   Activity Log, ViciDial Checks, Number Verifier, Bulk Checker, Online
   Panel, etc. The attribute-selector sweep above can't reach these
   since the colour lives in the class definition, not an inline style. */
html[data-theme="ngt"] .online-badge.status-online,
html[data-theme="ngt"] .footer-checks,
html[data-theme="ngt"] .sp-good,
html[data-theme="ngt"] .act-action.login,
html[data-theme="ngt"] .hist-toggle-btn.is-on,
html[data-theme="ngt"] .hist-toggle-btn.is-on .hist-toggle-status,
html[data-theme="ngt"] .bulk-enable,
html[data-theme="ngt"] .la-badge-ok,
html[data-theme="ngt"] .vc-badge-good,
html[data-theme="ngt"] .vc-export-good,
html[data-theme="ngt"] .nv-tag-checked,
html[data-theme="ngt"] .nv-copy-all-btn.copied { color:#15803d !important; }

html[data-theme="ngt"] .online-badge.status-disabled,
html[data-theme="ngt"] .ql-act-btn.del,
html[data-theme="ngt"] .form-err,
html[data-theme="ngt"] .ab.del:hover,
html[data-theme="ngt"] .pw-err,
html[data-theme="ngt"] .sp-federal,
html[data-theme="ngt"] .act-action.logout,
html[data-theme="ngt"] .uname-cancel-btn:hover,
html[data-theme="ngt"] .hist-toggle-btn.is-off,
html[data-theme="ngt"] .hist-toggle-btn.is-off .hist-toggle-status,
html[data-theme="ngt"] .bulk-disable,
html[data-theme="ngt"] .bulk-delete,
html[data-theme="ngt"] .la-badge-fail,
html[data-theme="ngt"] .vc-badge-bad,
html[data-theme="ngt"] .vc-export-bad,
html[data-theme="ngt"] .nv-btn-danger { color:#b91c1c !important; }

html[data-theme="ngt"] .ab.pw,
html[data-theme="ngt"] .pw-eye:hover,
html[data-theme="ngt"] .act-role-viewer,
html[data-theme="ngt"] .act-action.lookup,
html[data-theme="ngt"] .bulk-reset,
html[data-theme="ngt"] .vc-badge-federal,
html[data-theme="ngt"] .vc-export-all,
html[data-theme="ngt"] .nv-copy-all-btn { color:#0e7490 !important; }

html[data-theme="ngt"] .online-badge.status-idle,
html[data-theme="ngt"] .act-role-admin,
html[data-theme="ngt"] .act-action.edit_username,
html[data-theme="ngt"] .uname-save-btn,
html[data-theme="ngt"] .nv-tag-unchecked { color:#a16207 !important; }

/* 15g) DB Health "Per-Table Breakdown" table names, Bulk/Number-Verifier
   KPI numbers, and the unchecked-numbers list all use a slate-200 hex
   (#e2e8f0) that's light enough to read on a dark row but washes out on
   white — same root cause as the rest of this patch, different hex.
   Targeted by id/class (not a blanket sweep) because the SAME hex is
   also used, correctly, inside the dark "live preview" mockups in
   Color Customization — those must stay light-on-dark and are
   explicitly protected further down. */
html[data-theme="ngt"] #dbh-tables-tbody td[style*="color:#e2e8f0"],
html[data-theme="ngt"] #bulk-stat-total,
html[data-theme="ngt"] #bulk-s-total,
html[data-theme="ngt"] #nv-unchecked-numbers,
html[data-theme="ngt"] #dbh-tables-tbody select { color:#292524 !important; }
html[data-theme="ngt"] .nv-textarea,
html[data-theme="ngt"] .nv-textarea:focus { color:#1c1917 !important; }

/* 15h) PROTECT the dark "live preview" mockups in Color Customization
   (Checker tab + Bulk Checker tab) — these intentionally simulate a
   dark card so admins can preview custom colors, and must keep their
   light-on-dark styling regardless of every sweep above. ID selectors
   here always win over the class/attribute sweeps, regardless of
   source order, so this is safe to keep at the end. */
html[data-theme="ngt"] #bc-prev-panel { background:linear-gradient(160deg,#111318,#0d1017,#0a0c10) !important; border-color:rgba(255,255,255,.07) !important; }
html[data-theme="ngt"] #bc-prev-panel > div:first-of-type { color:rgba(200,210,230,.4) !important; }
html[data-theme="ngt"] #bc-prev-textarea { color:#e2e8f0 !important; }
html[data-theme="ngt"] #bc-prev-panel .bc-prev-checking,
html[data-theme="ngt"] #bc-prev-panel .bc-prev-clear { color:rgba(200,210,230,.5) !important; }
html[data-theme="ngt"] #brand-sub-bulk .bc-prev-results {
  background:rgba(8,10,14,.8) !important;
  border-color:rgba(255,255,255,.07) !important;
}
html[data-theme="ngt"] #brand-sub-bulk .bc-prev-results .bc-prev-results-head { color:rgba(255,255,255,.4) !important; background:rgba(255,255,255,.02) !important; border-color:rgba(255,255,255,.06) !important; }
html[data-theme="ngt"] #brand-sub-bulk .bc-prev-results .bc-prev-phone { color:rgba(255,255,255,.7) !important; }

/* 15i) Home page "Quick Links" + "Search Number History" cards: the
   little gold→cyan accent dash before "Search Number History" was
   designed as a subtle glow on a dark card; on the white card it reads
   as a stray, unrelated smear of colour. Also nudge the section-header
   caption colour a touch darker for legibility (it's at the contrast
   floor at this small uppercase size). */
html[data-theme="ngt"] .num-search-label::before { display:none !important; }
html[data-theme="ngt"] .num-search-label,
html[data-theme="ngt"] .pane-wrap [style*="color:var(--text3)"] { color:#57534e !important; }
html[data-theme="ngt"] #checker-quick-links,
html[data-theme="ngt"] .num-search-wrap {
  box-shadow:0 2px 14px rgba(37,99,235,.05) !important;
}
/* Quick-link chips: a touch more border definition on white than the
   12%/30%-opacity tint gives on a dark card. */
html[data-theme="ngt"] .ql-btn {
  border-width:1.5px !important;
  font-weight:800 !important;
  filter:brightness(.66) saturate(1.6) contrast(1.15) !important;
}
html[data-theme="ngt"] .ql-btn:hover {
  filter:brightness(.78) saturate(1.6) contrast(1.15) !important;
}
html[data-theme="ngt"] .ql-item-icon { filter:brightness(.66) saturate(1.6) contrast(1.15) !important; }

/* 15c) The "Refresh" pill — same exact gold/purple/blue glow gradient
   repeated 24 times across nearly every tab (Overview, Session Checks,
   Users, Activity Log, DB Health, ViciDial Stats, ...). The glow was
   built to sit on a dark card; on a white card it washes out to a
   barely-there tint with weak gold text. Re-skin it as a clean amber
   pill that actually reads, and lock the colour through its own
   hover/active JS (which otherwise flips it back to pale gold). */
html[data-theme="ngt"] .pane-wrap [style*="background:linear-gradient(135deg,rgba(212,167,66,.13)"] {
  background:#f3e6c8 !important;
  border-color:#c9a227 !important;
  color:#8a6207 !important;
  box-shadow:none !important;
}
html[data-theme="ngt"] .pane-wrap [style*="background:linear-gradient(135deg,rgba(212,167,66,.13)"]:hover {
  background:#ecd9a8 !important;
  border-color:#92660f !important;
  color:#6b4a08 !important;
}

/* 16) Primary CTA buttons (Check Today's Status / Check Number / Create
   User / number-search / bulk Check All) used a dark-olive→gold gradient
   with near-black text designed to pop against a dark page — and the
   gradient stops are also admin-customizable, so a stale dark save from
   the old theme could make this worse. Force one consistent blue CTA
   style across the whole app, matching the main checker button. */
html[data-theme="ngt"] .lookup-btn,
html[data-theme="ngt"] .btn-create,
html[data-theme="ngt"] .nv-btn-primary,
html[data-theme="ngt"] .num-search-btn,
html[data-theme="ngt"] .bulk-check-btn {
  background:linear-gradient(135deg,#1d4ed8,#2563eb) !important;
  color:#ffffff !important;
  box-shadow:0 4px 16px rgba(37,99,235,.28) !important;
}
html[data-theme="ngt"] .lookup-btn:hover,
html[data-theme="ngt"] .btn-create:hover,
html[data-theme="ngt"] .nv-btn-primary:hover,
html[data-theme="ngt"] .num-search-btn:hover,
html[data-theme="ngt"] .bulk-check-btn:hover {
  background:linear-gradient(135deg,#1e40af,#3b76f0) !important;
  box-shadow:0 6px 22px rgba(37,99,235,.38) !important;
}
html[data-theme="ngt"] .nv-btn-secondary {
  background:#e0d4b0 !important;
  border-color:#c0b08a !important;
  color:#57534e !important;
}

/* ── Mobile responsive tab bar overrides ── */
@media (max-width: 900px) {
  html[data-theme="ngt"] .tab-bar-wrap .tab-btn.active .nav-label,
  html[data-theme="ngt"] .tab-nav-wrap .tab-btn.active .nav-label { color:#2563eb !important; }
  html[data-theme="ngt"] .tab-bar-wrap .tab-btn.active,
  html[data-theme="ngt"] .tab-nav-wrap .tab-btn.active { background:rgba(37,99,235,0.08) !important; }
}


/* Bulk DNC — main wrapper */
html[data-theme="ngt"] .bulk-royal-wrap {
  background:#f7f0dc !important;
  border-color:#c0b08a !important;
  box-shadow:0 4px 24px rgba(0,0,0,0.1) !important;
  animation:none !important;
}
html[data-theme="ngt"] .bulk-royal-wrap::before { display:none !important; }

/* Bulk textarea */
html[data-theme="ngt"] .bulk-textarea {
  background:#fff8e8 !important;
  border-color:#c0b08a !important;
  color:#292524 !important;
}
html[data-theme="ngt"] .bulk-textarea::placeholder { color:#a8a29e !important; }
html[data-theme="ngt"] .bulk-textarea:focus {
  border-color:#2563eb !important;
  box-shadow:0 0 0 3px rgba(37,99,235,0.1) !important;
}

/* Bulk stats card (Input Stats) */
html[data-theme="ngt"] .bulk-stats-card {
  background:#ede6cc !important;
  border-color:#c0b08a !important;
}
html[data-theme="ngt"] .bulk-stats-card-header {
  background:rgba(212,167,66,0.12) !important;
  border-bottom-color:#c0b08a !important;
}

/* Bulk summary + results cards */
html[data-theme="ngt"] .bulk-summary-royal {
  background:#f0e8d0 !important;
  border-color:#c0b08a !important;
}
html[data-theme="ngt"] .bulk-results-royal {
  background:#f7f0dc !important;
  border-color:#c0b08a !important;
}
html[data-theme="ngt"] .bulk-results-header {
  background:#ede6cc !important;
  border-color:#c0b08a !important;
  color:#292524 !important;
}
html[data-theme="ngt"] .bulk-result-row {
  border-bottom-color:#d4c6a0 !important;
}
html[data-theme="ngt"] .bulk-result-row:hover { background:#ede6cc !important; }

/* Bulk summary KPIs */
html[data-theme="ngt"] .bulk-summary-kpi { color:#292524 !important; }
html[data-theme="ngt"] .bulk-summary-kpi-label { color:#78716c !important; }

/* Bulk progress bar track */
html[data-theme="ngt"] .bulk-prog-bar-track { background:#d4c6a0 !important; }

/* Num search results table on NGT */
html[data-theme="ngt"] .ns-table-wrap {
  background:#f7f0dc !important;
  border-color:#c0b08a !important;
}
html[data-theme="ngt"] .ns-table th { color:#78716c !important; border-color:#c0b08a !important; }
html[data-theme="ngt"] .ns-table td { color:#292524 !important; border-color:#d4c6a0 !important; }
html[data-theme="ngt"] .ns-table tr:hover td { background:#ede6cc !important; }

/* ══ NGT BLUE — WAVE 4 PATCH (Bulk inline style overrides) ══ */

/* Batch Summary header strip */
html[data-theme="ngt"] .bulk-summary-header {
  background:rgba(212,167,66,0.10) !important;
  border-bottom-color:#c0b08a !important;
  color:#92710a !important;
}

/* KPI numbers and labels — override hardcoded inline colors */
html[data-theme="ngt"] .bulk-summary-kpi-num { color:#292524 !important; }
html[data-theme="ngt"] .bulk-summary-kpi-lbl { color:#78716c !important; opacity:1 !important; }
html[data-theme="ngt"] #bulk-s-total { color:#292524 !important; }
html[data-theme="ngt"] #bulk-s-good  { color:#16a34a !important; }
html[data-theme="ngt"] #bulk-s-bad   { color:#dc2626 !important; }
html[data-theme="ngt"] #bulk-s-err   { color:#b45309 !important; }

/* KPI divider lines */
html[data-theme="ngt"] .bulk-summary-kpi::before { background:#c0b08a !important; }

/* Results header text + dot */
html[data-theme="ngt"] .bulk-results-header span[style*="200,210,230"] { color:#78716c !important; }
html[data-theme="ngt"] .bulk-results-header span[style*="letter-spacing:2.5px"] { color:#78716c !important; }

/* Export CSV button */
html[data-theme="ngt"] #bulk-export-btn {
  background:rgba(37,99,235,0.08) !important;
  border-color:rgba(37,99,235,0.25) !important;
  color:#1d4ed8 !important;
}
html[data-theme="ngt"] #bulk-export-btn:hover {
  background:rgba(37,99,235,0.15) !important;
}

/* Clear button */
html[data-theme="ngt"] .bulk-clear-btn {
  background:#e0d4b0 !important;
  border-color:#c0b08a !important;
  color:#57534e !important;
}
html[data-theme="ngt"] .bulk-clear-btn:hover {
  background:#d4c6a0 !important;
  color:#292524 !important;
  border-color:#a09070 !important;
}

/* Results empty state text */
html[data-theme="ngt"] #bulk-results div[style*="200,210,230"] { color:#78716c !important; }
html[data-theme="ngt"] #bulk-results strong[style*="200,210,230"] { color:#57534e !important; }

/* Warning banner */
html[data-theme="ngt"] .bulk-warning-royal {
  background:rgba(180,83,9,0.06) !important;
  border-color:rgba(180,83,9,0.3) !important;
  color:#92400e !important;
}

/* Bulk result row — phone number + index number (hardcoded inline styles) */
html[data-theme="ngt"] .bulk-result-row { color:#292524 !important; }
html[data-theme="ngt"] .bulk-result-row * { color:#292524 !important; }
/* Restore status colors — good/bad/fed/unk keep their semantic colors */
html[data-theme="ngt"] .bulk-result-row span:last-child { color:inherit !important; }
/* Row number index */
html[data-theme="ngt"] .bulk-result-row span[style*="167,139,250"] { color:#a0855a !important; }
/* Phone number */
html[data-theme="ngt"] .bulk-result-row span[style*="e8e0ff"],
html[data-theme="ngt"] .bulk-result-row span[style*="#e8e0ff"] { color:#1d4ed8 !important; }
html[data-theme="ngt"] .bulk-result-row [style*="color:#e8e0ff"] { color:#1d4ed8 !important; }
/* Copy icon inside phoneWithCopy */
html[data-theme="ngt"] .bulk-result-row button,
html[data-theme="ngt"] .bulk-result-row .copy-btn { color:#78716c !important; }
/* Row backgrounds — lighten the tinted bgs for parchment */
html[data-theme="ngt"] .bulk-result-row[style*="74,222,128"] { background:rgba(22,163,74,0.06) !important; border-left-color:rgba(22,163,74,0.4) !important; }
html[data-theme="ngt"] .bulk-result-row[style*="248,113,113"] { background:rgba(220,38,38,0.06) !important; border-left-color:rgba(220,38,38,0.35) !important; }
html[data-theme="ngt"] .bulk-result-row[style*="103,232,249"] { background:rgba(37,99,235,0.06) !important; border-left-color:rgba(37,99,235,0.3) !important; }
html[data-theme="ngt"] .bulk-result-row[style*="251,191,36"] { background:rgba(180,83,9,0.06) !important; border-left-color:rgba(180,83,9,0.35) !important; }
/* Status text colors — keep semantic */
html[data-theme="ngt"] .bulk-result-row span[style*="4ade80"] { color:#16a34a !important; }
html[data-theme="ngt"] .bulk-result-row span[style*="f87171"] { color:#dc2626 !important; }
html[data-theme="ngt"] .bulk-result-row span[style*="67e8f9"] { color:#1d4ed8 !important; }
html[data-theme="ngt"] .bulk-result-row span[style*="fbbf24"] { color:#b45309 !important; }
/* Warning/error row */
html[data-theme="ngt"] .bulk-result-row span[style*="fbbf24"][style*="⚠"] { color:#b45309 !important; }



/* Duplicate count badge */
html[data-theme="ngt"] .bulk-dup-badge { color:#78716c !important; }

/* Scrollbar in results */
html[data-theme="ngt"] #bulk-results::-webkit-scrollbar-thumb { background:#c0b08a !important; }


  --bg:transparent;
  --surface:rgba(255,255,255,0.06);
  --surface2:rgba(255,255,255,0.04);
  --border:rgba(255,255,255,0.09);
  --border2:rgba(255,255,255,0.15);
  --text:#ffffff;
  --text2:rgba(255,255,255,0.70);
  --text3:rgba(160,160,160,0.85);
  --text4:rgba(160,160,160,0.45);
  --header-bg:rgba(5,5,20,0.72);
  --tab-bg:rgba(0,0,0,0.45);
  --input-bg:rgba(200,200,200,0.12);
  --input-focus:rgba(200,200,200,0.20);
  --console-bg:rgba(255,255,255,0.04);
  --kpi-bg:rgba(255,255,255,0.07);
  --kpi-border:rgba(255,255,255,0.10);
  --row-hover:rgba(255,255,255,0.04);
  --th-color:rgba(160,160,160,0.55);
  --td-color:rgba(255,255,255,0.80);
  --td-border:rgba(255,255,255,0.05);
  --th-border:rgba(255,255,255,0.08);
  --ab-bg:rgba(255,255,255,0.07);
  --ab-border:rgba(255,255,255,0.12);
  --ab-text:rgba(255,255,255,0.72);
  --widget-bg:rgba(255,255,255,0.07);
  --footer-bg:rgba(5,5,20,0.85);
  --time-bg:rgba(255,255,255,0.05);
  --search-box-bg:rgba(255,255,255,0.05);
  --gold:#d4a742;
  --gold-rgb:212,167,66;
  --emerald:#10b981;
  --emerald-rgb:16,185,129;
  --clr-good:#4ade80;
  --clr-bad:#f87171;
  --clr-federal:#67e8f9;
  --clr-warning:#fbbf24;
  --clr-btn-primary:#6d28d9;
  --clr-btn-primary-rgb:109,40,217;
}


  background:var(--ab-bg);border:1px solid var(--ab-border);
  color:var(--ab-text);border-radius:20px;padding:6px 14px 6px 10px;
  font-size:12px;font-weight:700;cursor:pointer;
  display:flex;align-items:center;gap:6px;
  transition:all .25s;letter-spacing:.3px;white-space:nowrap;flex-shrink:0;
}
.theme-toggle:hover { background:var(--ab-border);color:var(--text); }
.theme-toggle .tt-icon { font-size:15px;line-height:1;transition:transform .4s cubic-bezier(.34,1.56,.64,1); }
.theme-toggle:hover .tt-icon { transform:rotate(20deg); }

/* ══ NUMBER SEARCH BOX ══ */
.num-search-wrap {
  background:var(--checker-card-bg,var(--search-box-bg));
  backdrop-filter:blur(12px);
  border:1px solid var(--checker-card-border,var(--border2));
  border-radius:16px;
  padding:20px 22px 18px;
  box-shadow:0 4px 24px rgba(0,0,0,0.2);
}
.num-search-label {
  font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  color:var(--text3);margin-bottom:12px;display:flex;align-items:center;gap:7px;
}
.num-search-label::before { content:'';display:inline-block;width:16px;height:2px;background:linear-gradient(90deg,#d4a742,#67e8f9);border-radius:1px; }
.num-search-row { display:flex;gap:8px;align-items:stretch; }
.num-search-input {
  flex:1;min-width:0;
  background:var(--input-bg);border:1px solid var(--border2);
  border-radius:10px;padding:11px 14px;
  color:var(--text);font-size:14px;font-weight:600;
  outline:none;transition:all .2s;
}
.num-search-input::placeholder { color:var(--text4); }
.num-search-input:focus { border-color:#d4a742;box-shadow:0 0 0 3px rgba(212,167,66,0.12);background:var(--input-focus); }
.num-search-btn {
  background:linear-gradient(135deg,#8b6914,#d4a742);
  border:none;border-radius:10px;padding:11px 20px;
  color:#0a0804;font-size:13px;font-weight:800;
  cursor:pointer;white-space:nowrap;
  display:flex;align-items:center;gap:7px;
  transition:all .22s;letter-spacing:.3px;
  box-shadow:0 4px 16px rgba(212,167,66,0.25);
  position:relative;overflow:hidden;
}
.num-search-btn:hover { transform:translateY(-1px);box-shadow:0 6px 22px rgba(212,167,66,0.4); }
.num-search-btn:active { transform:translateY(0); }
.num-search-btn::after { content:'';position:absolute;inset:0;background:rgba(255,255,255,0);transition:background .2s; }
.num-search-btn:hover::after { background:rgba(255,255,255,0.08); }
.num-search-btn .nsb-icon { font-size:15px;transition:transform .25s; }
.num-search-btn:hover .nsb-icon { transform:scale(1.15); }
.num-search-btn.loading .nsb-icon { animation:nsbSpin .7s linear infinite; }
@keyframes nsbSpin { to { transform:rotate(360deg); } }

/* search results */
.num-search-results { margin-top:14px;animation:nsFadeIn .25s ease; }
@keyframes nsFadeIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }
.num-search-empty { text-align:center;padding:20px;color:var(--text3);font-size:13px; }
.ns-table { width:100%;border-collapse:collapse;font-size:12px; }
.ns-table th { color:var(--th-color);font-size:9px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:7px 10px;border-bottom:1px solid var(--th-border);text-align:left; }
.ns-table td { padding:9px 10px;border-bottom:1px solid var(--td-border);color:var(--td-color);vertical-align:middle; }
.ns-table tr:last-child td { border-bottom:none; }
.ns-table tr:hover td { background:var(--row-hover); }
.ns-table-wrap { background:var(--surface);border:1px solid var(--border);border-radius:10px;overflow:hidden;max-height:260px;overflow-y:auto; }
.ns-count-badge { display:inline-block;background:rgba(212,167,66,0.16);border:1px solid rgba(212,167,66,0.28);color:#d4a742;font-size:9px;font-weight:800;padding:1px 7px;border-radius:10px;margin-left:8px;letter-spacing:.5px; }

/* ══ ONLINE USER PANEL ══ */
.online-status-dot {
  display:inline-block;width:8px;height:8px;border-radius:50%;flex-shrink:0;
}
.online-status-dot.status-online  { background:#4ade80;box-shadow:0 0 6px rgba(74,222,128,0.7);animation:dotPulse 2s ease-in-out infinite; }
.online-status-dot.status-idle    { background:#fbbf24;box-shadow:0 0 5px rgba(251,191,36,0.5); }
.online-status-dot.status-offline { background:rgba(255,255,255,0.18); }
.online-status-dot.status-disabled{ background:#f87171;box-shadow:0 0 4px rgba(248,113,113,0.4); }
.online-badge {
  display:inline-flex;align-items:center;gap:5px;
  font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  padding:3px 9px;border-radius:20px;
}
.online-badge.status-online  { background:rgba(74,222,128,.12);border:1px solid rgba(74,222,128,.35);color:#4ade80; }
.online-badge.status-idle    { background:rgba(251,191,36,.10);border:1px solid rgba(251,191,36,.35);color:#fbbf24; }
.online-badge.status-offline { background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.35); }
.online-badge.status-disabled{ background:rgba(248,113,113,.10);border:1px solid rgba(248,113,113,.3);color:#f87171; }

body {
  min-height:100vh;
  background: var(--bg);
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  display: flex; flex-direction: row; align-items: stretch;
  padding: 0;
  overflow: hidden;
  transition: background 0.4s ease;
  color: var(--text);
}

/* ══ SIDEBAR ══ */
.sidebar {
  width: 256px;
  flex-shrink: 0;
  height: 100vh;
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  background: linear-gradient(180deg,#080808 0%,#0d0d0d 60%,#080808 100%);
  border-right: 1px solid rgba(255,255,255,0.08);
  box-shadow: 4px 0 40px rgba(0,0,0,0.7), 2px 0 16px rgba(255,255,255,0.03);
  z-index: 200;
  scrollbar-width: none;
  transition: width 0.32s cubic-bezier(.4,0,.2,1), box-shadow 0.32s ease;
  will-change: width;
}
body.sidebar-collapsed .sidebar {
  width: 64px;
}
body.sidebar-collapsed .site-footer { left: 64px; }
.sidebar::-webkit-scrollbar { display: none; }

/* sidebar toggle button */
.sidebar-toggle {
  position: fixed;
  left: 244px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 300;
  width: 22px; height: 44px;
  background: linear-gradient(180deg,#1a1608,#1c1a0e);
  border: 1px solid rgba(212,167,66,0.25);
  border-left: none;
  border-radius: 0 8px 8px 0;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: rgba(212,167,66,0.6);
  font-size: 11px;
  transition: left 0.32s cubic-bezier(.4,0,.2,1), background 0.2s, color 0.2s, box-shadow 0.2s;
  box-shadow: 3px 0 12px rgba(0,0,0,0.4), 0 0 8px rgba(212,167,66,0.06);
}
.sidebar-toggle:hover {
  background: linear-gradient(180deg,#2a2610,#2c2a14);
  color: #d4a742;
  box-shadow: 3px 0 16px rgba(0,0,0,0.5), 0 0 12px rgba(212,167,66,0.15);
}
.sidebar-toggle-icon {
  transition: transform 0.32s cubic-bezier(.4,0,.2,1);
  display: inline-block;
  line-height: 1;
}
body.sidebar-collapsed .sidebar-toggle {
  left: 52px;
}
body.sidebar-collapsed .sidebar-toggle-icon {
  transform: rotate(180deg);
}

/* sidebar brand */
.sidebar-brand {
  display: flex; flex-direction: column; align-items: center; gap: 0;
  padding: 22px 16px 16px;
  border-bottom: 1px solid rgba(212,167,66,0.1);
  background: linear-gradient(180deg,rgba(212,167,66,0.06) 0%,transparent 100%);
  flex-shrink: 0;
  overflow: hidden;
}
.sidebar-logo-row {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
  width: 100%; justify-content: center;
}
.sidebar-logo-img {
  width: 48px; height: 48px; object-fit: contain; border-radius: 10px;
  background: #fff; padding: 4px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.6), 0 0 0 1px rgba(212,167,66,0.15), 0 0 20px rgba(212,167,66,0.06);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.sidebar-logo-img:hover { transform: scale(1.05); }
.sidebar-brand-text {
  display: flex; flex-direction: column; gap: 3px;
  transition: opacity 0.25s ease, width 0.32s ease;
  overflow: hidden; white-space: nowrap;
}
body.sidebar-collapsed .sidebar-brand-text { opacity: 0; width: 0; pointer-events: none; }
.sidebar-ngt {
  font-size: 20px; font-weight: 900; color: #fff;
  letter-spacing: 5px; text-transform: uppercase;
  text-shadow: 0 0 20px rgba(212,167,66,0.25);
}
.sidebar-bla { display: flex; align-items: center; gap: 1px; }
.sidebar-bla span.r {
  background: #cc0000; color: #fff; font-size: 8px; font-weight: 900;
  padding: 2px 5px; letter-spacing: 0.8px; text-transform: uppercase;
}
.sidebar-bla span.w {
  color: #ccc; font-size: 8px; font-weight: 800;
  letter-spacing: 0.8px; padding: 0 2px; text-transform: uppercase;
}
.sidebar-tagline {
  display: flex; align-items: center; gap: 4px; margin-top: 7px;
  font-size: 8px; color: rgba(255,255,255,0.2);
  letter-spacing: 2px; text-transform: uppercase;
  overflow: hidden; white-space: nowrap;
  transition: opacity 0.25s ease;
}
body.sidebar-collapsed .sidebar-tagline { opacity: 0; }
.sidebar-tagline-dot { width:2px; height:2px; border-radius:50%; background:rgba(255,255,255,0.18); }
.sidebar-tagline em { color:#d4a742; font-style:normal; font-weight:700; letter-spacing:1.5px; }
.sidebar-tagline .header-status-dot { width:5px; height:5px; }

/* sidebar nav section label */
.sidebar-section-label {
  padding: 16px 16px 6px;
  font-size: 8px; font-weight: 800; letter-spacing: 2.5px;
  text-transform: uppercase; color: rgba(255,255,255,0.18);
  flex-shrink: 0;
  overflow: hidden; white-space: nowrap;
  transition: opacity 0.25s ease, padding 0.32s ease;
}
body.sidebar-collapsed .sidebar-section-label {
  opacity: 0; padding-left: 0; padding-right: 0;
}

/* sidebar nav items */
.sidebar .tab-btn {
  text-decoration: none;
  display: flex; align-items: center; gap: 10px;
  width: calc(100% - 12px); margin: 2px 6px;
  padding: 10px 12px;
  border-radius: 9px;
  background: transparent;
  border: 1px solid transparent;
  color: rgba(255,255,255,0.38);
  font-size: 13px; font-weight: 600; letter-spacing: 0.1px;
  cursor: pointer; text-align: left;
  transition: all 0.2s cubic-bezier(.4,0,.2,1), width 0.32s ease, padding 0.32s ease;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
}
body.sidebar-collapsed .sidebar .tab-btn {
  width: calc(100% - 12px);
  padding: 10px 0;
  justify-content: center;
}
body.sidebar-collapsed .sidebar .tab-btn .nav-label,
body.sidebar-collapsed .sidebar .tab-btn .nav-active-dot { display: none; }
body.sidebar-collapsed .sidebar .tab-btn .nav-icon { width: 100%; text-align: center; }
.sidebar .tab-btn:hover {
  background: rgba(212,167,66,0.06);
  color: rgba(255,255,255,0.82);
  border-color: rgba(212,167,66,0.10);
  transform: translateX(2px);
}
body.sidebar-collapsed .sidebar .tab-btn:hover { transform: none; }
.sidebar .tab-btn.active {
  background: rgba(212,167,66,0.12);
  border-color: rgba(212,167,66,0.25);
  color: #d4a742;
  box-shadow: inset 0 0 0 1px rgba(212,167,66,0.05), 0 2px 14px rgba(212,167,66,0.10);
}
.sidebar .tab-btn .nav-icon {
  font-size: 16px; line-height: 1; flex-shrink: 0; width: 22px; text-align: center;
  transition: width 0.32s ease;
}
.sidebar .tab-btn .nav-label { flex: 1; transition: opacity 0.2s ease; }
.sidebar .tab-btn.active .nav-active-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: #d4a742; box-shadow: 0 0 7px rgba(212,167,66,0.7);
  flex-shrink: 0; animation: dotPulse 2s ease-in-out infinite;
}
.sidebar .tab-btn:not(.active) .nav-active-dot { display: none; }
@keyframes dotPulse {
  0%,100%{opacity:1;box-shadow:0 0 7px rgba(212,167,66,.7)}
  50%{opacity:.5;box-shadow:0 0 14px rgba(212,167,66,.9)}
}

/* nav group divider */
.sidebar-nav-divider {
  height: 1px; background: rgba(255,255,255,0.04);
  margin: 5px 12px; flex-shrink: 0;
}


/* sidebar spacer */
.sidebar-spacer { flex: 1; min-height: 12px; }

/* sidebar divider */
.sidebar-divider {
  height: 1px; background: rgba(255,255,255,0.05);
  margin: 4px 12px; flex-shrink: 0;
}

/* sidebar user pill */
.sidebar-user {
  padding: 10px 14px;
  display: flex; align-items: center; gap: 9px;
  background: rgba(255,255,255,0.02);
  border-top: 1px solid rgba(255,255,255,0.05);
  flex-shrink: 0;
  overflow: hidden;
  transition: padding 0.32s ease;
}
body.sidebar-collapsed .sidebar-user { padding: 10px 0; justify-content: center; }
.sidebar-user-avatar {
  width: 30px; height: 30px; border-radius: 8px;
  background: rgba(212,167,66,0.12); border: 1px solid rgba(212,167,66,0.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: #d4a742;
  flex-shrink: 0; text-transform: uppercase;
}
.sidebar-user-info { flex: 1; min-width: 0; overflow: hidden; transition: opacity 0.2s ease; }
body.sidebar-collapsed .sidebar-user-info { opacity: 0; width: 0; flex: 0; }
.sidebar-user-name {
  font-size: 11px; font-weight: 700; color: #fff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sidebar-user-role { margin-top: 2px; }

/* ══ MAIN CONTENT AREA ══ */
.main-content {
  flex: 1; min-width: 0;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex; flex-direction: column; align-items: center;
  padding: 0 0 80px;
  transition: padding-left 0.32s cubic-bezier(.4,0,.2,1);
}
.main-content::-webkit-scrollbar { width: 4px; }
.main-content::-webkit-scrollbar-track { background: rgba(212,167,66,0.02); }
.main-content::-webkit-scrollbar-thumb { background: rgba(212,167,66,0.18); border-radius:2px; }

/* ══ TOP BAR ══ */
.top-bar {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 24px 10px 28px;
  background: rgba(0,0,0,0.25);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  position: sticky; top: 0; z-index: 100;
  flex-shrink: 0;
  animation: topBarIn 0.4s ease;
}
@keyframes topBarIn { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:none} }

.top-bar-clock {
  display: flex; align-items: center; gap: 14px;
}
.top-bar-time {
  font-family: 'Courier New', monospace;
  font-size: 18px; font-weight: 700; color: var(--text);
  letter-spacing: 1.5px; line-height: 1;
}
.top-bar-date {
  font-size: 10px; color: var(--text3);
  letter-spacing: 1.2px; text-transform: uppercase;
}
.top-bar-uptime {
  display: flex; align-items: center; gap: 5px;
  padding: 4px 10px; background: rgba(74,222,128,0.07);
  border: 1px solid rgba(74,222,128,0.15); border-radius: 20px;
}
.top-bar-uptime-dot { width: 5px; height: 5px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 6px #4ade80; animation: pulse 2s ease-in-out infinite; flex-shrink: 0; }
.top-bar-uptime-lbl { font-size: 9px; color: rgba(255,255,255,0.3); letter-spacing: 1px; text-transform: uppercase; }
.top-bar-uptime-val { font-family: 'Courier New', monospace; font-size: 11px; font-weight: 700; color: #4ade80; letter-spacing: .5px; }
.top-bar-right {
  display: flex; align-items: center; gap: 8px;
}
.top-bar-theme-btn {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.55); border-radius: 8px;
  padding: 7px 13px; font-size: 12px; font-weight: 700;
  cursor: pointer; display: flex; align-items: center; gap: 5px;
  transition: all .22s; letter-spacing: .2px;
}
.top-bar-theme-btn:hover { background: rgba(255,255,255,0.12); color: #fff; }
.top-bar-logout-btn {
  background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.22);
  color: rgba(248,113,113,0.85); border-radius: 8px;
  padding: 7px 13px; font-size: 12px; font-weight: 700;
  cursor: pointer; display: flex; align-items: center; gap: 5px;
  text-decoration: none; transition: all .22s; letter-spacing: .2px;
}
.top-bar-logout-btn:hover { background: rgba(239,68,68,0.18); color: #f87171; }
.pane-area {
  width: 100%; flex: 1; display: flex; flex-direction: column; align-items: center;
  padding: 24px 24px 0;
}

/* ── SITE HEADER (hidden — replaced by sidebar) ── */
.site-header { display: none; }
.header-brand,.header-brand-top,.header-ngt,.header-divider,.header-bla,.header-tagline,.header-tagline-dot { display:none; }
.stats-lim-btn.active-lim { background:rgba(212,167,66,.2);border-color:rgba(212,167,66,.4);color:#d4a742;font-weight:800; }
.header-status-dot { display:inline-block;width:7px;height:7px;border-radius:50%;background:#4ade80;box-shadow:0 0 8px #4ade80;animation:pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1;box-shadow:0 0 8px #4ade80}50%{opacity:.5;box-shadow:0 0 16px #4ade80} }
/* ── TIME CARD (now in top bar) ── */
.time-card { background:transparent; border:none; border-radius:0; padding:0; }
.time-card-sticky { display: none; }
.time-card-clock { display:none; }
.time-card-date { display:none; }
.time-card-divider { display:none; }
.time-card-uptime { display:none; }
/* ── SITE FOOTER ── */
.site-footer { position:fixed;bottom:0;left:256px;right:0;background:var(--footer-bg);backdrop-filter:blur(12px);border-top:1px solid rgba(255,255,255,0.06);padding:10px 32px;display:flex;align-items:center;justify-content:space-between;z-index:100;transition:left 0.32s cubic-bezier(.4,0,.2,1); }
.footer-left { font-size:11px;color:rgba(255,255,255,.25);letter-spacing:.3px; }
.footer-left strong { color:rgba(255,255,255,.45); }
.footer-center { font-size:10px;color:rgba(255,255,255,.2);letter-spacing:1px;text-align:center; }
.footer-right { font-size:10px;color:rgba(255,255,255,.2);letter-spacing:.5px;text-align:right; }
.footer-checks { color:#4ade80;font-weight:700; }

/* ══ HOME PANE — Liquid Glass redesign ══ */
#pane-home {
  width: 100%; max-width: 900px;
  animation: paneIn 0.4s cubic-bezier(.22,1,.36,1);
}
@keyframes paneIn { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }

.home-hero {
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(var(--accent-rgb,212,167,66),0.16) 0%, transparent 55%),
    linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 22px; padding: 34px 38px;
  margin-bottom: 20px; position: relative; overflow: hidden;
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 12px 34px rgba(0,0,0,0.22);
}
.home-hero::before {
  content:''; position:absolute; top:-60px; right:-60px;
  width:240px; height:240px; border-radius:50%;
  background: radial-gradient(circle, rgba(var(--accent-rgb,212,167,66),0.22) 0%, transparent 70%);
  pointer-events: none; animation: homeGlow 7s ease-in-out infinite;
}
.home-hero::after {
  content:''; position:absolute; inset:0; border-radius:22px; padding:1px;
  background: linear-gradient(120deg, rgba(255,255,255,0.35), rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%, rgba(255,255,255,0.12));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none; opacity:.7;
}
@keyframes homeGlow { 0%,100%{ transform:scale(1); opacity:.9 } 50%{ transform:scale(1.12); opacity:1 } }
.home-greeting {
  font-size: 27px; font-weight: 900; color: var(--text);
  margin-bottom: 6px; letter-spacing: -0.4px;
}
.home-greeting em { color: var(--accent,#d4a742); font-style: normal; }
.home-subtitle {
  font-size: 14px; color: var(--text2); line-height: 1.6; margin-bottom: 18px; max-width: 620px;
}
.home-badge-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.home-badge {
  font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
  padding: 5px 13px; border-radius: 20px; border: 1px solid;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: transform .2s ease;
}
.home-badge:hover { transform: translateY(-1px); }

.home-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px; margin-bottom: 20px;
}
.home-card {
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px; padding: 19px 21px;
  cursor: pointer; transition: transform .28s cubic-bezier(.22,1,.36,1), box-shadow .28s ease, border-color .28s ease, background .28s ease;
  display: flex; align-items: flex-start; gap: 14px;
  position: relative; overflow: hidden;
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  box-shadow: 0 1px 0 rgba(255,255,255,0.10) inset;
  animation: homeCardIn 0.5s cubic-bezier(.22,1,.36,1) both;
  text-decoration: none; color: inherit;
}
@keyframes homeCardIn { from{opacity:0;transform:translateY(16px) scale(.96)} to{opacity:1;transform:none} }
.home-card::before {
  content:''; position:absolute; inset:0; border-radius:16px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb,212,167,66),0) 0%, rgba(var(--accent-rgb,212,167,66),0) 100%);
  transition: background .28s ease; pointer-events:none;
}
.home-card:hover {
  border-color: rgba(var(--accent-rgb,212,167,66),0.35);
  transform: translateY(-4px) scale(1.015);
  box-shadow: 0 14px 30px rgba(0,0,0,0.28), 0 0 0 1px rgba(var(--accent-rgb,212,167,66),0.14), 0 1px 0 rgba(255,255,255,0.14) inset;
}
.home-card:hover::before { background: linear-gradient(135deg, rgba(var(--accent-rgb,212,167,66),0.10) 0%, transparent 100%); }
.home-card:active { transform: translateY(-1px) scale(.99); transition-duration: .1s; }
.home-card-icon {
  font-size: 24px; line-height: 1; flex-shrink: 0; width:44px; height:44px;
  display:flex; align-items:center; justify-content:center; border-radius:12px;
  background: rgba(var(--accent-rgb,212,167,66),0.12);
  border: 1px solid rgba(var(--accent-rgb,212,167,66),0.18);
}
.home-card-body { flex: 1; }
.home-card-title { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 4px; letter-spacing: -.1px; }
.home-card-desc { font-size: 12px; color: var(--text3); line-height: 1.5; }
.home-card-arrow { font-size: 11px; color: rgba(var(--accent-rgb,212,167,66),0.55); margin-top: 7px; font-weight: 600; transition: transform .2s ease, opacity .2s ease; opacity:.75; }
.home-card:hover .home-card-arrow { transform: translateX(3px); opacity:1; }

.home-tip {
  background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px; padding: 15px 19px;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  display: flex; align-items: center; gap: 12px;
  font-size: 12px; color: var(--text2); line-height: 1.6;
}
.home-card:nth-child(1){animation-delay:.04s}.home-card:nth-child(2){animation-delay:.08s}
.home-card:nth-child(3){animation-delay:.12s}.home-card:nth-child(4){animation-delay:.16s}
.home-card:nth-child(5){animation-delay:.20s}.home-card:nth-child(6){animation-delay:.24s}
.home-card:nth-child(7){animation-delay:.28s}.home-card:nth-child(8){animation-delay:.32s}
.home-card:nth-child(9){animation-delay:.36s}.home-card:nth-child(10){animation-delay:.40s}
.home-card:nth-child(11){animation-delay:.44s}.home-card:nth-child(12){animation-delay:.48s}
.home-card:nth-child(13){animation-delay:.52s}.home-card:nth-child(14){animation-delay:.56s}
.home-card:nth-child(15){animation-delay:.60s}.home-card:nth-child(16){animation-delay:.64s}

/* ── Dynamic-gradient "pro tools" card variant ── */
.home-card-grad {
  --cg1: 212,167,66; --cg2: 109,40,217;
  background: linear-gradient(160deg, rgba(var(--cg1),0.13) 0%, rgba(var(--cg2),0.07) 60%, rgba(255,255,255,0.04) 100%);
  border: 1px solid rgba(var(--cg1),0.22);
  position: relative; overflow: hidden;
}
.home-card-grad::after {
  content:''; position:absolute; inset:-2px; border-radius:17px; padding:1.5px;
  background: linear-gradient(115deg, rgba(var(--cg1),0.9), rgba(var(--cg2),0.7) 45%, rgba(var(--cg1),0) 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .55; transition: opacity .3s ease; pointer-events:none;
  background-size: 220% 220%; animation: gradSweep 6s ease infinite;
}
@keyframes gradSweep { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
.home-card-grad .home-card-icon {
  background: linear-gradient(135deg, rgba(var(--cg1),0.28), rgba(var(--cg2),0.22));
  border-color: rgba(var(--cg1),0.35);
  box-shadow: 0 0 0 1px rgba(var(--cg1),0.12), 0 4px 14px rgba(var(--cg2),0.18);
  transition: transform .3s cubic-bezier(.22,1,.36,1);
}
.home-card-grad .home-card-arrow { color: rgba(var(--cg1),0.85); }
.home-card-grad:hover {
  transform: translateY(-5px) scale(1.02);
  border-color: rgba(var(--cg1),0.45);
  box-shadow: 0 18px 38px rgba(0,0,0,0.32), 0 0 0 1px rgba(var(--cg1),0.22), 0 1px 0 rgba(255,255,255,0.16) inset,
    0 0 26px rgba(var(--cg2),0.20);
}
.home-card-grad:hover::after { opacity: .95; }
.home-card-grad:hover .home-card-icon { transform: rotate(-6deg) scale(1.08); }
.home-pro-divider {
  display:flex; align-items:center; gap:10px; margin: 22px 0 14px;
  font-size: 10px; font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--text4);
}
.home-pro-divider::after { content:''; flex:1; height:1px; background: linear-gradient(90deg, rgba(255,255,255,0.16), transparent); }

@media (prefers-reduced-motion: reduce){
  .home-hero::before{animation:none} .home-card,#pane-home{animation:none}
}
/* Light glass tuning for NGT theme */
html[data-theme="ngt"] .home-hero {
  background: radial-gradient(120% 140% at 0% 0%, rgba(37,99,235,0.10) 0%, transparent 55%), rgba(255,255,255,0.55);
  border-color: rgba(28,25,23,0.10);
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 10px 26px rgba(28,25,23,0.10);
}
html[data-theme="ngt"] .home-hero::before { background: radial-gradient(circle, rgba(37,99,235,0.14) 0%, transparent 70%); }
html[data-theme="ngt"] .home-card { background: rgba(255,255,255,0.6); border-color: rgba(28,25,23,0.10); box-shadow:0 1px 0 rgba(255,255,255,0.7) inset; }
html[data-theme="ngt"] .home-card:hover { border-color: rgba(37,99,235,0.3); box-shadow:0 12px 26px rgba(28,25,23,0.12), 0 0 0 1px rgba(37,99,235,0.12); }
html[data-theme="ngt"] .home-card-icon { background: rgba(37,99,235,0.10); border-color: rgba(37,99,235,0.18); }
html[data-theme="ngt"] .home-tip { background: rgba(255,255,255,0.55); border-color: rgba(28,25,23,0.10); }

/* ══ MODAL OVERLAY ══ */
.modal-overlay {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(0,0,0,0.7); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  animation: modalFadeIn 0.2s ease;
}
@keyframes modalFadeIn { from{opacity:0} to{opacity:1} }
.modal-overlay.closing { animation: modalFadeOut 0.18s ease forwards; }
@keyframes modalFadeOut { from{opacity:1} to{opacity:0} }
.modal-box {
  background: linear-gradient(135deg, #0d0d1a 0%, #0a0a14 100%);
  border: 1px solid rgba(212,167,66,0.16);
  border-radius: 18px; padding: 32px 36px;
  max-width: 580px; width: 90%; max-height: 80vh;
  overflow-y: auto; position: relative;
  box-shadow: 0 24px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(212,167,66,0.05);
  animation: modalSlideIn 0.25s cubic-bezier(.34,1.56,.64,1);
}
@keyframes modalSlideIn { from{opacity:0;transform:scale(.92) translateY(16px)} to{opacity:1;transform:none} }

.modal-close {
  position: absolute; top: 16px; right: 16px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.5); border-radius: 7px;
  width: 30px; height: 30px; font-size: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.18s;
}
.modal-close:hover { background: rgba(239,68,68,0.15); color: #f87171; border-color: rgba(239,68,68,0.3); }
.modal-title { font-size: 20px; font-weight: 800; color: var(--text); margin-bottom: 6px; }
.modal-subtitle { font-size: 12px; color: var(--text3); letter-spacing: 0.5px; margin-bottom: 20px; }
.modal-section { margin-bottom: 18px; }
.modal-section-title {
  font-size: 10px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase;
  color: rgba(212,167,66,0.6); margin-bottom: 8px;
}
.modal-text { font-size: 13px; color: var(--text2); line-height: 1.7; }
.modal-feature-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.04);
}
.modal-feature-row:last-child { border-bottom: none; }
.modal-feature-icon { font-size: 18px; flex-shrink: 0; width: 24px; text-align: center; }
.modal-feature-text { font-size: 12px; color: var(--text2); line-height: 1.6; }
.modal-feature-text strong { color: var(--text); font-weight: 700; }
/* ── MAIN WIDGET ── */
.widget { width:100%;max-width:520px;background:var(--widget-bg);backdrop-filter:blur(12px);border-radius:18px;padding:36px 36px 30px;box-shadow:0 8px 48px rgba(0,0,0,0.5); }
/* ── BLA LOGO ── */
.bla-logo { display:flex;align-items:center;justify-content:center;gap:0;margin-bottom:20px; }
.bla-icon { width:32px;height:32px;background:#cc0000;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;font-weight:900;margin-right:4px;flex-shrink:0;border:2px solid #cc0000; }
.bla-the { background:#222;color:#fff;font-size:11px;font-weight:800;padding:4px 7px;border:1px solid #555;letter-spacing:0.5px; }
.bla-blacklist { background:#222;color:#fff;font-size:11px;font-weight:800;padding:4px 7px;border-top:1px solid #555;border-bottom:1px solid #555;letter-spacing:0.5px; }
.bla-alliance { background:#cc0000;color:#fff;font-size:11px;font-weight:800;padding:4px 8px;letter-spacing:0.5px; }
/* ── BUTTONS ── */
.lookup-btn { width:100%;background:linear-gradient(135deg,#8b6914,#d4a742,#e8c547);border:none;border-radius:8px;padding:15px;color:#0a0804;font-size:16px;font-weight:700;cursor:pointer;letter-spacing:0.3px;transition:all 0.25s;margin-bottom:12px;box-shadow:0 4px 18px rgba(212,167,66,.2); }
.lookup-btn:hover { background:linear-gradient(135deg,#9a7518,#e0b44a,#f0d060);box-shadow:0 6px 24px rgba(212,167,66,.35);transform:translateY(-1px); }
.lookup-btn:active { transform:scale(0.99); }
.lookup-btn:disabled { background:#555;cursor:not-allowed; }

/* Bulk Check All — animated gradient button */


/* ── Quick Link Buttons ── */
.quick-links-grid { display:flex;flex-wrap:wrap;gap:8px; }
.ql-btn { display:inline-flex;align-items:center;gap:7px;padding:10px 18px;border-radius:10px;font-size:13px;font-weight:700;color:#fff;cursor:pointer;text-decoration:none;transition:all .25s;position:relative;overflow:hidden;border:1px solid;letter-spacing:.2px; }
.ql-btn:hover { transform:translateY(-2px);filter:brightness(1.15); }
.ql-btn:active { transform:translateY(0) scale(.97); }
.ql-btn .ql-icon { font-size:15px;flex-shrink:0;display:inline-flex;align-items:center; }
.ql-btn .ql-icon img { border-radius:3px; }
.ql-btn::after { content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(45deg,transparent 42%,rgba(255,255,255,.06) 50%,transparent 58%);animation:qlGlare 4s ease-in-out infinite;pointer-events:none; }
@keyframes qlGlare { 0%,100%{transform:translateX(-100%) rotate(25deg)} 50%{transform:translateX(100%) rotate(25deg)} }

/* Quick Links Admin */
.ql-add-card { background:rgba(212,167,66,.04);border:1px solid rgba(212,167,66,.12);border-radius:14px;padding:18px 22px; }
.ql-item { display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:12px 16px;transition:all .2s; }
.ql-item:hover { border-color:rgba(212,167,66,.22);background:rgba(255,255,255,.04); }
.ql-item .ql-item-icon { font-size:22px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:8px;flex-shrink:0; }
.ql-item .ql-item-info { flex:1;min-width:0; }
.ql-item .ql-item-name { font-size:14px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.ql-item .ql-item-url { font-size:11px;color:rgba(255,255,255,.3);font-family:monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px; }
.ql-item .ql-item-actions { display:flex;align-items:center;gap:6px;flex-shrink:0; }
.ql-toggle { width:38px;height:20px;border-radius:10px;cursor:pointer;position:relative;transition:all .25s;border:none; }
.ql-toggle .ql-knob { width:16px;height:16px;border-radius:50%;position:absolute;top:2px;transition:all .25s; }
.ql-toggle.on { background:rgba(74,222,128,.3); }
.ql-toggle.on .ql-knob { left:20px;background:#4ade80; }
.ql-toggle.off { background:rgba(255,255,255,.1); }
.ql-toggle.off .ql-knob { left:2px;background:#666; }
.ql-act-btn { width:28px;height:28px;border-radius:7px;border:1px solid;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:12px;transition:all .2s;background:transparent; }
.ql-act-btn.edit { border-color:rgba(212,167,66,.22);color:#d4a742; }
.ql-act-btn.edit:hover { background:rgba(212,167,66,.12); }
.ql-act-btn.del { border-color:rgba(239,68,68,.3);color:#f87171; }
.ql-act-btn.del:hover { background:rgba(239,68,68,.15); }
.ql-act-btn.up, .ql-act-btn.dn { border-color:rgba(255,255,255,.12);color:rgba(255,255,255,.4); }
.ql-act-btn.up:hover, .ql-act-btn.dn:hover { background:rgba(255,255,255,.08);color:#fff; }
/* ── TAB BAR (hidden — replaced by sidebar nav) ── */
.tab-bar { display:none !important; }
/* ── PANE WRAPPER ── */
.pane-wrap { width:100%;max-width:1400px;padding:0 0 24px;animation:paneIn 0.3s ease; }
/* ── CONSOLE (generic pane panel) ── */
.console { width:100%;max-width:100%;background:var(--console-bg);backdrop-filter:blur(12px);border-radius:18px;padding:28px;box-shadow:0 8px 48px rgba(0,0,0,0.5);display:none; }
.console.active { display:block; }
/* ── SUB-TAB BAR (inside Users pane) ── */
.sub-tab-bar { display:flex;gap:6px;margin-bottom:22px;border-bottom:1px solid rgba(255,255,255,0.08);padding-bottom:0; }
.sub-tab-btn { background:transparent;border:none;border-bottom:2px solid transparent;color:var(--text3);padding:8px 16px;font-size:13px;font-weight:600;cursor:pointer;transition:all 0.2s;letter-spacing:.3px; }
.sub-tab-btn:hover { color:var(--text); }
.sub-tab-btn.active { color:var(--text);border-bottom-color:rgba(255,255,255,0.6); }
.sub-pane { display:none; }
.sub-pane.active { display:block;animation:fadeInSub .2s ease; }
@keyframes fadeInSub { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:none} }
/* ── SEC TITLE ── */
.sec-title { color:var(--text3);font-size:10px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--border); }
/* ── KPI ── */
.kpi-row { display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;margin-bottom:28px; }
.kpi-card { background:var(--kpi-bg);border:1px solid var(--kpi-border);border-radius:12px;padding:18px;text-align:center;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden; }
.kpi-card:hover { transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.25),0 0 0 1px rgba(212,167,66,.08); }
.kpi-val { font-size:2.2em;font-weight:800;color:var(--text);line-height:1;margin-bottom:6px;letter-spacing:-0.5px; }
.kpi-lbl { font-size:10px;color:var(--text3);letter-spacing:1.5px;text-transform:uppercase;font-weight:600; }
/* ── CREATE USER ── */
.create-row { display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin-bottom:8px; }
.cf { display:flex;flex-direction:column;gap:5px;flex:1;min-width:140px; }
.cf label { color:var(--text3);font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase; }
.cf input { background:var(--input-bg);border:1px solid var(--border2);border-radius:7px;padding:10px 34px 10px 12px;color:var(--text);font-size:13px;outline:none;transition:border-color 0.2s;width:100%; }
.cf input:focus { border-color:rgba(255,255,255,0.45); }
.cf input::placeholder { color:rgba(255,255,255,0.25); }
.cf select { background:var(--input-bg);border:1px solid var(--border2);border-radius:7px;padding:10px 12px;color:var(--text);font-size:13px;outline:none;width:100%; }
/* ── Global select/option dark theme fix — prevents invisible text in dropdown ── */
select { color-scheme: dark; }
select option { background:#1a1510; color:#f5f0e8; }


.btn-create { background:linear-gradient(135deg,#8b6914,#d4a742);border:none;border-radius:7px;padding:10px 20px;color:#0a0804;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap;transition:all .25s;box-shadow:0 2px 12px rgba(212,167,66,.2); }
.btn-create:hover { background:linear-gradient(135deg,#9a7518,#e0b44a);box-shadow:0 4px 18px rgba(212,167,66,.35);transform:translateY(-1px); }
.form-err { color:#f87171;font-size:12px;margin-top:4px;min-height:18px; }
/* ── VIEWER TAB PERMISSIONS BOX ── */
.viewer-perm-box { background:rgba(212,167,66,0.05);border:1px solid rgba(212,167,66,0.16);border-radius:10px;padding:14px 16px;margin-top:10px; }
.viewer-perm-title { font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#d4a742;margin-bottom:10px; }
.viewer-perm-grid { display:flex;gap:8px;flex-wrap:wrap; }
.viewer-perm-item { display:flex;align-items:center;gap:6px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:7px;padding:7px 12px;cursor:pointer;transition:all .18s;user-select:none; }
.viewer-perm-item:hover { background:rgba(255,255,255,0.09); }
.viewer-perm-item.checked { background:rgba(212,167,66,0.12);border-color:rgba(212,167,66,0.35); }
.viewer-perm-item input[type=checkbox] { accent-color:#d4a742;cursor:pointer; }
.viewer-perm-item span { font-size:12px;font-weight:600;color:#fff; }
.viewer-perm-item .always { font-size:10px;color:rgba(212,167,66,0.6);font-weight:700;margin-left:2px; }
/* ── USERS TABLE ── */
.u-table { width:100%;border-collapse:collapse;font-size:13px; }
.u-table th { color:var(--th-color);font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:9px 12px;border-bottom:1px solid var(--th-border);text-align:left; }
.u-table td { padding:11px 12px;border-bottom:1px solid var(--td-border);color:var(--td-color);vertical-align:top; }
.u-table tr:last-child td { border-bottom:none; }
.u-table tr:hover td { background:var(--row-hover); }
.dot-on  { display:inline-block;width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 5px #22c55e;margin-right:5px;vertical-align:middle }
.dot-off { display:inline-block;width:7px;height:7px;border-radius:50%;background:#6b7280;margin-right:5px;vertical-align:middle }
.os-badge { font-size:11px;font-weight:700;transition:color .4s }
/* ── ACTION BUTTONS ── */
.ab { background:var(--ab-bg);border:1px solid var(--ab-border);color:var(--ab-text);padding:5px 10px;border-radius:5px;font-size:11px;font-weight:600;cursor:pointer;margin-right:4px;margin-bottom:4px;transition:all 0.2s; }
.ab:hover { background:rgba(255,255,255,0.14);color:#fff; }
.ab.del:hover { background:rgba(239,68,68,0.2);border-color:rgba(239,68,68,0.3);color:#f87171; }
.ab.pw { border-color:rgba(34,211,238,0.25);color:#67e8f9; }
.ab.pw:hover { background:rgba(34,211,238,0.12); }
/* ── PW ── */
.pw-row { display:none;gap:6px;align-items:center;margin-top:6px;flex-wrap:wrap; }
.pw-wrap { display:flex;align-items:center;gap:6px;width:100%; }
.pw-wrap input { flex:1;min-width:0; }
.pw-eye { background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.15);border-radius:5px;color:rgba(255,255,255,0.5);cursor:pointer;font-size:14px;padding:4px 8px;line-height:1;transition:all 0.2s;white-space:nowrap;flex-shrink:0; }
.pw-eye:hover { background:rgba(34,211,238,0.15);border-color:rgba(34,211,238,0.35);color:#67e8f9; }
.pw-err { color:#f87171;font-size:11px; }
/* ── HISTORY DRAWER ── */
.hist-drawer { display:none;margin-top:16px;background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden; }
.hist-drawer.open { display:block; }
.hist-head { background:rgba(255,255,255,0.05);border-bottom:1px solid rgba(255,255,255,0.07);padding:10px 16px;display:flex;justify-content:space-between;align-items:center; }
.hist-head span { color:rgba(255,255,255,0.7);font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase; }
.hist-head button { background:none;border:none;color:rgba(255,255,255,0.3);cursor:pointer;font-size:16px;transition:color 0.2s; }
.hist-head button:hover { color:#f87171; }
.hist-scroll { max-height:300px;overflow-y:auto; }
.h-table { width:100%;border-collapse:collapse;font-size:12px; }
.h-table th { color:var(--th-color);font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:8px 14px;border-bottom:1px solid var(--th-border);text-align:left; }
.h-table td { padding:8px 14px;border-bottom:1px solid var(--td-border);color:var(--td-color); }
.h-table tr:last-child td { border-bottom:none; }
/* ── STATUS PILL ── */
.sp { display:inline-block;padding:2px 9px;border-radius:12px;font-size:10px;font-weight:700;letter-spacing:.5px; }
.sp-good      { background:rgba(34,197,94,.18);color:#4ade80;border:1px solid rgba(34,197,94,.3); }
.sp-federal   { background:rgba(239,68,68,.18);color:#f87171;border:1px solid rgba(239,68,68,.3); }
.sp-state     { background:rgba(249,115,22,.18);color:#fb923c;border:1px solid rgba(249,115,22,.3); }
.sp-black     { background:rgba(127,29,29,.3);color:#fca5a5;border:1px solid rgba(239,68,68,.25); }
.sp-plaintiff { background:rgba(168,85,247,.18);color:#c084fc;border:1px solid rgba(168,85,247,.3); }
.sp-unknown   { background:rgba(255,255,255,.08);color:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.15); }
/* ── USER LIST SIDE CARDS ── */
.ul-side-card {
  background:var(--surface);border:1px solid var(--border2);
  border-radius:14px;padding:16px 18px;
  transition:border-color .2s;
}
.ul-side-card:hover { border-color:rgba(212,167,66,.35); }
.ul-side-card-icon { font-size:22px;margin-bottom:8px;line-height:1; }
.ul-side-card-title {
  font-size:13px;font-weight:800;color:var(--text);
  margin-bottom:5px;letter-spacing:.2px;
}
.ul-side-card-desc {
  font-size:11px;color:var(--text3);line-height:1.55;
}
.ul-toggle-btn {
  padding:9px 14px;border-radius:9px;
  font-weight:800;font-size:11px;cursor:pointer;
  transition:all .22s;letter-spacing:.4px;
  border:2px solid;display:flex;align-items:center;
  justify-content:center;gap:7px;
}
.ul-toggle-btn:hover { filter:brightness(1.12);transform:translateY(-1px); }
.ul-toggle-btn:active { transform:none;filter:none; }

/* ── ROLE PICKER ── */
.role-cell { position:relative; }
.role-badge-btn { cursor:pointer;border:none;background:none;padding:0;display:inline-flex;align-items:center;gap:4px;vertical-align:middle; }
.role-badge-btn span.caret { font-size:9px;opacity:.45;transition:opacity .15s; }
.role-badge-btn:hover span.caret { opacity:1; }
.role-dropdown { position:absolute;top:calc(100% + 5px);left:0;z-index:999;background:var(--console-bg);border:1px solid var(--border2);border-radius:10px;padding:5px;min-width:148px;box-shadow:0 10px 40px rgba(0,0,0,.8);animation:roleDropIn .15s ease; }
@keyframes roleDropIn { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:none} }
.role-option { display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:6px;cursor:pointer;transition:background .12s;font-size:12px;font-weight:700;border:none;background:none;width:100%;text-align:left;color:#fff; }
.role-option:hover { background:rgba(255,255,255,.09); }
.role-option .ro-dot { width:8px;height:8px;border-radius:50%;flex-shrink:0; }
.role-option.cur { background:rgba(255,255,255,.05); }
.role-option.cur::after { content:'✓';margin-left:auto;font-size:10px;opacity:.5; }
/* ══════════════════════════════════════════════════════════════
   NGT LOGIN — EXTREME CINEMATIC EDITION
══════════════════════════════════════════════════════════════ */

html[data-theme="dark"]    .login-screen,
html[data-theme="midnight"] .login-screen,
html[data-theme="ngt"]     .login-screen { background:#f0f4ff !important; }

/* ── BASE ── */
.login-screen {
  width:100%;min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  background:#f0f4ff;
  overflow:hidden;position:relative;
  font-family:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
}

/* ══ DEEP SPACE BACKGROUND MESH ══ */
.login-screen::before {
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse 80% 60% at 10% 20%, rgba(139,92,246,.12) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 90% 80%, rgba(59,130,246,.10) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 50% 50%, rgba(236,72,153,.05) 0%, transparent 70%);
  animation:meshShift 20s ease-in-out infinite;
  pointer-events:none;z-index:0;
}
.login-screen::after {
  content:'';position:absolute;inset:0;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(99,102,241,.08) 1px, transparent 0);
  background-size:44px 44px;
  animation:gridPan 60s linear infinite;
  pointer-events:none;z-index:0;
  mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, black 40%, transparent 100%);
}
@keyframes meshShift {
  0%,100%{background-position:0% 0%,100% 100%,50% 50%}
  33%{background-position:5% 8%,95% 92%,52% 48%}
  66%{background-position:-3% 4%,103% 96%,48% 52%}
}
@keyframes gridPan {
  from{background-position:0 0}
  to{background-position:44px 44px}
}

/* ══ CINEMATIC BACKGROUND ORBS ══ */
.login-ambient-orb { position:absolute;border-radius:50%;pointer-events:none;will-change:transform; }
.login-orb-1 {
  width:900px;height:900px;
  background:radial-gradient(circle,rgba(139,92,246,.22) 0%,rgba(167,139,250,.10) 35%,rgba(196,181,253,.04) 60%,transparent 75%);
  top:-30%;left:-20%;filter:blur(80px);
  animation:orb1Drift 26s cubic-bezier(.37,0,.63,1) infinite;
}
.login-orb-2 {
  width:750px;height:750px;
  background:radial-gradient(circle,rgba(59,130,246,.18) 0%,rgba(96,165,250,.08) 40%,transparent 70%);
  bottom:-25%;right:-15%;filter:blur(90px);
  animation:orb2Drift 32s cubic-bezier(.37,0,.63,1) infinite;
}
.login-orb-3 {
  width:500px;height:500px;
  background:radial-gradient(circle,rgba(236,72,153,.14) 0%,rgba(249,168,212,.06) 45%,transparent 70%);
  top:40%;left:55%;filter:blur(70px);
  animation:orb3Drift 19s cubic-bezier(.37,0,.63,1) infinite;
}
.login-orb-4 {
  width:400px;height:400px;
  background:radial-gradient(circle,rgba(16,185,129,.12) 0%,transparent 65%);
  top:5%;right:10%;filter:blur(85px);
  animation:orb4Drift 22s cubic-bezier(.37,0,.63,1) infinite reverse;
}
@keyframes orb1Drift {
  0%,100%{transform:translate(0px,0px) scale(1)}
  25%{transform:translate(40px,60px) scale(1.04)}
  50%{transform:translate(20px,-40px) scale(.97)}
  75%{transform:translate(-30px,30px) scale(1.02)}
}
@keyframes orb2Drift {
  0%,100%{transform:translate(0px,0px) scale(1)}
  25%{transform:translate(-50px,-35px) scale(1.06)}
  50%{transform:translate(30px,50px) scale(.96)}
  75%{transform:translate(40px,-20px) scale(1.03)}
}
@keyframes orb3Drift {
  0%,100%{transform:translate(0px,0px) scale(1)}
  50%{transform:translate(-40px,50px) scale(1.08)}
}
@keyframes orb4Drift {
  0%,100%{transform:translate(0px,0px) scale(1)}
  33%{transform:translate(25px,35px) scale(1.05)}
  66%{transform:translate(-18px,-25px) scale(.95)}
}

/* ══ FLOATING LIGHT PARTICLES ══ */
.login-screen .lp {
  position:absolute;border-radius:50%;pointer-events:none;
  background:rgba(139,92,246,.35);
  animation:particleFloat linear infinite;
  will-change:transform,opacity;
}
.login-screen .lp:nth-child(1){width:3px;height:3px;left:12%;top:75%;animation-duration:18s;animation-delay:0s;opacity:.5}
.login-screen .lp:nth-child(2){width:2px;height:2px;left:26%;top:60%;animation-duration:22s;animation-delay:-4s;opacity:.4;background:rgba(59,130,246,.4)}
.login-screen .lp:nth-child(3){width:4px;height:4px;left:48%;top:85%;animation-duration:16s;animation-delay:-8s;opacity:.3}
.login-screen .lp:nth-child(4){width:2px;height:2px;left:70%;top:70%;animation-duration:24s;animation-delay:-2s;opacity:.45;background:rgba(236,72,153,.4)}
.login-screen .lp:nth-child(5){width:3px;height:3px;left:85%;top:80%;animation-duration:20s;animation-delay:-11s;opacity:.35}
.login-screen .lp:nth-child(6){width:2px;height:2px;left:35%;top:90%;animation-duration:14s;animation-delay:-6s;opacity:.5;background:rgba(16,185,129,.45)}
.login-screen .lp:nth-child(7){width:4px;height:4px;left:60%;top:95%;animation-duration:28s;animation-delay:-15s;opacity:.3}
.login-screen .lp:nth-child(8){width:2px;height:2px;left:8%;top:88%;animation-duration:17s;animation-delay:-9s;opacity:.4;background:rgba(245,158,11,.4)}
@keyframes particleFloat {
  0%{transform:translateY(0) translateX(0) scale(1);opacity:.5}
  25%{transform:translateY(-120px) translateX(20px) scale(1.2)}
  50%{transform:translateY(-260px) translateX(-15px) scale(.8);opacity:.7}
  75%{transform:translateY(-400px) translateX(10px) scale(1.1);opacity:.3}
  100%{transform:translateY(-600px) translateX(0) scale(0.5);opacity:0}
}

/* Hidden compatibility stubs */
.login-stars,.login-aurora,.login-scanline,
.login-hud-tl,.login-hud-tr,.login-hud-bl,.login-hud-br,
.login-ring-outer,.login-ring-mid { display:none; }

/* ══ CENTER CONTAINER ══ */
.login-center {
  position:relative;z-index:10;
  display:flex;flex-direction:column;align-items:center;
  width:100%;max-width:480px;
  padding:32px 20px 40px;
  animation:centerEntrance .8s cubic-bezier(.16,1,.3,1) both;
}
@keyframes centerEntrance {
  from{opacity:0;transform:translateY(32px) scale(.97)}
  to{opacity:1;transform:none}
}

/* ══ LOGO SECTION ══ */
.login-logo-wrap {
  display:flex;flex-direction:column;align-items:center;gap:0;
  margin-bottom:32px;position:relative;
}

/* Ripple ring behind logo */
.login-logo-glow {
  position:absolute;
  width:200px;height:200px;border-radius:50%;
  top:50%;left:50%;transform:translate(-50%,-60%);
  background:radial-gradient(circle,rgba(99,102,241,.18) 0%,rgba(139,92,246,.08) 40%,transparent 65%);
  filter:blur(18px);pointer-events:none;z-index:1;
  animation:glowPulse 4s ease-in-out infinite;
}
@keyframes glowPulse {
  0%,100%{transform:translate(-50%,-60%) scale(1);opacity:.8}
  50%{transform:translate(-50%,-60%) scale(1.18);opacity:1}
}

/* Spinning orbit ring */
.login-logo-wrap::before {
  content:'';position:absolute;
  width:130px;height:130px;border-radius:50%;
  border:1px solid transparent;
  border-top-color:rgba(99,102,241,.5);
  border-right-color:rgba(139,92,246,.2);
  top:50%;left:50%;
  transform:translate(-50%,-58%);
  animation:orbitSpin 8s linear infinite;
  z-index:4;pointer-events:none;
}
.login-logo-wrap::after {
  content:'';position:absolute;
  width:155px;height:155px;border-radius:50%;
  border:1px solid transparent;
  border-bottom-color:rgba(59,130,246,.35);
  border-left-color:rgba(236,72,153,.15);
  top:50%;left:50%;
  transform:translate(-50%,-58%);
  animation:orbitSpin 13s linear infinite reverse;
  z-index:4;pointer-events:none;
}
@keyframes orbitSpin { to{transform:translate(-50%,-58%) rotate(360deg)} }

.login-logo-img {
  width:96px;height:96px;object-fit:contain;
  border-radius:22px;background:#fff;padding:10px;
  box-shadow:
    0 0 0 1px rgba(99,102,241,.12),
    0 4px 16px rgba(99,102,241,.15),
    0 16px 40px rgba(99,102,241,.12),
    0 32px 64px rgba(0,0,0,.06);
  position:relative;z-index:3;
  transition:transform .5s cubic-bezier(.34,1.56,.64,1),box-shadow .4s ease;
  animation:logoLand 1s cubic-bezier(.34,1.56,.64,1) .15s both;
  cursor:pointer;
}
@keyframes logoLand {
  0%{opacity:0;transform:scale(.4) translateY(20px) rotate(-8deg)}
  60%{transform:scale(1.06) translateY(-4px) rotate(1deg)}
  80%{transform:scale(.97) translateY(1px) rotate(0deg)}
  100%{opacity:1;transform:scale(1) translateY(0) rotate(0deg)}
}
.login-logo-img:hover {
  transform:scale(1.07) translateY(-4px) rotate(1deg);
  box-shadow:
    0 0 0 2px rgba(99,102,241,.3),
    0 8px 32px rgba(99,102,241,.25),
    0 24px 56px rgba(99,102,241,.15);
}

/* ══ BRAND TEXT ══ */
.login-brand-text {
  display:flex;flex-direction:column;align-items:center;gap:5px;
  margin-top:18px;
  animation:brandSlide .7s cubic-bezier(.16,1,.3,1) .3s both;
}
@keyframes brandSlide {
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}
.login-brand-name {
  font-size:22px;font-weight:800;color:#0f172a;
  letter-spacing:5px;text-transform:uppercase;
  /* Subtle shimmer on load */
  background:linear-gradient(90deg,#0f172a 0%,#4f46e5 40%,#0f172a 60%,#0f172a 100%);
  background-size:300%;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
  animation:nameShimmer 3s ease-in-out .5s 1 forwards;
}
@keyframes nameShimmer {
  0%{background-position:100% 0}
  60%{background-position:0% 0}
  100%{background-position:0% 0;-webkit-text-fill-color:initial;background:none;color:#0f172a}
}
.login-brand-sub { display:flex;align-items:center;gap:0;margin-top:2px; }
.login-brand-sub .r {
  background:#2563eb;color:#fff;
  font-size:8.5px;font-weight:800;padding:3px 7px;letter-spacing:1.2px;
  text-transform:uppercase;border-radius:3px;
  transition:background .3s;
}
.login-brand-sub .w {
  color:#94a3b8;font-size:8.5px;font-weight:700;
  letter-spacing:1.2px;padding:0 4px;text-transform:uppercase;
}
.login-brand-tagline {
  font-size:9.5px;color:#94a3b8;letter-spacing:3px;
  text-transform:uppercase;margin-top:4px;font-weight:500;
}



/* ══ MAIN CARD ══ */
.login-card {
  width:100%;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(24px) saturate(160%);
  -webkit-backdrop-filter:blur(24px) saturate(160%);
  border:1px solid rgba(255,255,255,.9);
  border-radius:24px;
  padding:32px 36px 28px;
  box-shadow:
    0 2px 4px rgba(99,102,241,.04),
    0 8px 24px rgba(99,102,241,.08),
    0 24px 64px rgba(0,0,0,.05),
    0 0 0 1px rgba(99,102,241,.06) inset;
  position:relative;overflow:hidden;
  animation:cardRise .6s cubic-bezier(.16,1,.3,1) .2s both;
}
@keyframes cardRise {
  from{opacity:0;transform:translateY(20px) scale(.98);box-shadow:none}
  to{opacity:1;transform:none}
}

/* Animated top accent line */
.login-card::before {
  content:'';position:absolute;top:0;left:0;right:0;height:2.5px;
  background:linear-gradient(90deg,
    #4f46e5 0%,#7c3aed 20%,#ec4899 40%,#3b82f6 60%,#4f46e5 80%,#7c3aed 100%);
  background-size:300%;
  animation:topLineFlow 5s ease-in-out infinite;
  border-radius:0 0 2px 2px;
}
@keyframes topLineFlow {
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}

/* Inner light shimmer across card */
.login-card::after {
  content:'';position:absolute;
  top:-40%;left:-60%;
  width:60%;height:180%;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.4) 50%,transparent 70%);
  transform:skewX(-8deg);
  animation:cardSheen 8s ease-in-out 1s infinite;
  pointer-events:none;z-index:0;
}
@keyframes cardSheen {
  0%,100%{left:-60%;opacity:0}
  5%{opacity:1}
  20%{left:130%;opacity:0}
  21%,99%{left:130%;opacity:0}
}

/* ══ CARD HEADER ══ */
.login-card-header{text-align:center;margin-bottom:28px;position:relative;z-index:1;}
.login-title {
  color:#0f172a;font-size:22px;font-weight:800;
  margin-bottom:6px;letter-spacing:-.3px;
  animation:titleFade .5s ease .5s both;
}
@keyframes titleFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.login-sub {
  color:#64748b;font-size:13px;line-height:1.6;
  animation:titleFade .5s ease .6s both;
}

/* ══ NOTICES / ERRORS ══ */
.login-notice {
  background:linear-gradient(135deg,#eff6ff,#f0fdf4);
  border:1px solid #bfdbfe;
  border-radius:12px;padding:12px 16px;margin-bottom:20px;
  font-size:12.5px;color:#1e40af;line-height:1.6;
  display:flex;gap:10px;align-items:flex-start;
  animation:noticeIn .3s ease;
}
@keyframes noticeIn{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}
.login-notice-icon{flex-shrink:0;font-size:14px;}
.login-err {
  background:#fef2f2;border:1px solid #fecaca;
  color:#dc2626;padding:11px 16px;border-radius:12px;
  font-size:12.5px;text-align:center;margin-bottom:18px;
  display:flex;align-items:center;gap:8px;justify-content:center;
  animation:errShake .5s cubic-bezier(.36,.07,.19,.97);
}
.login-err-warn{background:#fffbeb;border-color:#fde68a;color:#92400e;}
.login-err-lock{background:#fef2f2;border-color:#fecaca;color:#dc2626;}
@keyframes errShake {
  0%,100%{transform:translateX(0)}
  10%,50%,90%{transform:translateX(-6px)}
  30%,70%{transform:translateX(6px)}
}
@keyframes inputErrorPulse {
  0%,100%{box-shadow:0 0 0 3px rgba(220,38,38,.25)}
  50%{box-shadow:0 0 0 6px rgba(220,38,38,.08)}
}
.fg input.input-error {
  border-color:#dc2626 !important;
  box-shadow:0 0 0 3px rgba(220,38,38,.2);
  animation:inputErrorPulse 1.5s ease-in-out 3, errShake .5s cubic-bezier(.36,.07,.19,.97) !important;
}

/* ══ FORM FIELDS ══ */
.fg{margin-bottom:18px;position:relative;z-index:1;}
.fg label {
  display:block;color:#475569;
  font-size:11.5px;font-weight:600;margin-bottom:7px;letter-spacing:.3px;
}
.fg-input-wrap{position:relative;}
.fg input {
  width:100%;box-sizing:border-box;
  background:#f8fafc;border:1.5px solid #e2e8f0;
  border-radius:12px;padding:13px 18px;
  color:#0f172a;font-size:14px;font-weight:500;outline:none;
  transition:all .3s cubic-bezier(.4,0,.2,1);
  font-family:inherit;
}
.fg input:focus {
  border-color:#4f46e5;background:#fff;
  box-shadow:0 0 0 4px rgba(79,70,229,.1),0 2px 12px rgba(79,70,229,.08);
  transform:translateY(-1px);
}
.fg input::placeholder{color:#cbd5e1;font-weight:400;}
.fg input:disabled{opacity:.5;cursor:not-allowed;}
.fg-icon {
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  color:#cbd5e1;pointer-events:none;display:flex;transition:all .3s;
}
.fg-icon svg{width:15px;height:15px;}
.fg input.has-icon{padding-left:42px;}
.fg-input-wrap:focus-within .fg-icon{color:#4f46e5;transform:translateY(-50%) scale(1.1);}
.fg-pw input{padding-right:50px;}
.pw-toggle {
  position:absolute;right:5px;top:50%;transform:translateY(-50%);
  width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  background:transparent;border:none;border-radius:8px;cursor:pointer;outline:none;
  color:#94a3b8;transition:all .2s;
}
.pw-toggle:hover{background:#f1f5f9;color:#4f46e5;transform:translateY(-50%) scale(1.1);}
.pw-toggle:active{transform:translateY(-50%) scale(.9);}
.pw-toggle svg{width:15px;height:15px;pointer-events:none;}
.pw-strength-bar{height:3px;border-radius:3px;margin-top:8px;background:#e2e8f0;overflow:hidden;opacity:0;transition:opacity .3s;}
.pw-strength-bar-inner{height:100%;width:0%;border-radius:3px;transition:width .4s,background .3s;}
.pw-strength-hint{font-size:10.5px;margin-top:4px;height:14px;color:#94a3b8;font-weight:600;transition:color .2s;}

/* ══ SUBMIT BUTTON ══ */
.login-btn {
  width:100%;padding:14px 22px;
  background:linear-gradient(135deg,#4f46e5 0%,#7c3aed 50%,#4f46e5 100%);
  background-size:200%;
  border:none;border-radius:12px;
  color:#fff;font-size:14.5px;font-weight:700;
  cursor:pointer;letter-spacing:.2px;
  transition:all .3s cubic-bezier(.4,0,.2,1);
  position:relative;overflow:hidden;
  margin-top:6px;
  box-shadow:0 4px 16px rgba(79,70,229,.35),0 1px 3px rgba(79,70,229,.2);
  display:flex;align-items:center;justify-content:center;gap:8px;
  font-family:inherit;z-index:1;
  animation:btnGradient 6s ease-in-out infinite;
}
@keyframes btnGradient {
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}
/* Ripple-ready sheen layer */
.login-btn::before {
  content:'';position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.2) 50%,transparent 65%);
  background-size:200%;background-position:200%;
  transition:background-position .5s ease;
  pointer-events:none;
}
.login-btn:hover::before { background-position:-50%; }
.login-btn:hover {
  transform:translateY(-2px) scale(1.01);
  box-shadow:0 8px 28px rgba(79,70,229,.45),0 2px 8px rgba(79,70,229,.2);
  background-position:100% 50%;
}
.login-btn:active{
  transform:translateY(0) scale(.99);
  box-shadow:0 2px 8px rgba(79,70,229,.3);
  transition-duration:.1s;
}
.login-btn:disabled{
  background:#94a3b8;cursor:not-allowed;
  box-shadow:none;transform:none;animation:none;
}
.login-btn-arrow{transition:transform .3s cubic-bezier(.34,1.56,.64,1);font-size:16px;}
.login-btn .btn-ripple {
  position:absolute;border-radius:50%;
  background:rgba(255,255,255,.35);
  transform:scale(0);
  animation:btnRippleAnim .55s cubic-bezier(.4,0,.2,1) forwards;
  pointer-events:none;
}
@keyframes btnRippleAnim {
  to{transform:scale(4);opacity:0}
}
/* Cursor blink */
.login-cursor {
  display:inline-block;
  font-weight:300;color:#4f46e5;
  animation:cursorBlink 1s step-end infinite;
  margin-left:1px;
}
@keyframes cursorBlink {
  0%,100%{opacity:1} 50%{opacity:0}
}
/* Loading spinner inside button */
.btn-spinner {
  width:16px;height:16px;border-radius:50%;
  border:2.5px solid rgba(255,255,255,.3);
  border-top-color:#fff;
  animation:btnSpin .7s linear infinite;
  flex-shrink:0;
}
@keyframes btnSpin { to{transform:rotate(360deg)} }
.login-btn:hover .login-btn-arrow{transform:translateX(6px) scale(1.1);}

/* ══ BADGES ══ */
.login-badges {
  display:flex;align-items:center;gap:8px;
  margin-top:20px;flex-wrap:wrap;justify-content:center;
  animation:badgesFade .5s ease .8s both;
}
@keyframes badgesFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.login-badge {
  font-size:10px;color:#64748b;letter-spacing:.3px;font-weight:600;
  display:flex;align-items:center;gap:5px;
  padding:4px 11px;border-radius:20px;
  background:rgba(255,255,255,.8);
  border:1px solid rgba(99,102,241,.12);
  box-shadow:0 1px 4px rgba(0,0,0,.04),0 0 0 0 rgba(79,70,229,.2);
  transition:all .3s cubic-bezier(.34,1.56,.64,1);
  backdrop-filter:blur(8px);
}
.login-badge:hover {
  transform:translateY(-2px) scale(1.04);
  box-shadow:0 4px 14px rgba(79,70,229,.15),0 1px 3px rgba(0,0,0,.06);
  border-color:rgba(99,102,241,.3);
  background:#fff;
}
.login-badge-dot {
  width:6px;height:6px;border-radius:50%;
  background:#22c55e;
  box-shadow:0 0 0 0 rgba(34,197,94,.6);
  flex-shrink:0;
  animation:dotRipple 2.5s ease-in-out infinite;
}
@keyframes dotRipple {
  0%{box-shadow:0 0 0 0 rgba(34,197,94,.6);transform:scale(1)}
  50%{box-shadow:0 0 0 5px rgba(34,197,94,0);transform:scale(1.2)}
  100%{box-shadow:0 0 0 0 rgba(34,197,94,0);transform:scale(1)}
}

/* ══ FOOTER ══ */
.login-footer {
  margin-top:16px;text-align:center;
  font-size:11px;color:#94a3b8;letter-spacing:.3px;font-weight:500;
}

/* ══ MOBILE ══ */
@media(max-width:520px){
  .login-center{padding:20px 12px 32px;max-width:100%;}
  .login-card{padding:24px 20px 22px;border-radius:0 0 16px 16px;}
  .login-logo-img{width:80px;height:80px;border-radius:16px;}
  .login-brand-name{font-size:18px;letter-spacing:3px;}
  .login-title{font-size:20px;}
  .login-badges{gap:5px;}
  .login-badge{font-size:9px;padding:3px 8px;}
  .login-orb-1{width:500px;height:500px;}
  .login-orb-2{width:400px;height:400px;}
  .login-orb-3,.login-orb-4{display:none;}
}
@media(max-width:380px){
  .login-center{padding:14px 8px 28px;}
  .login-card{padding:22px 16px 18px;}
  .login-badges{flex-direction:column;}
}


/* ── ADMIN LAYOUT ── */
.admin-layout { display:flex;gap:20px;align-items:flex-start;width:100%; }
.admin-main { flex:1;min-width:0; }
.admin-side { width:320px;flex-shrink:0;position:sticky;top:162px; }
/* ── ACTIVITY LOG ── */
.act-panel { background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.09);border-radius:14px;overflow:hidden; }
.act-panel-head { background:rgba(255,255,255,0.05);border-bottom:1px solid rgba(255,255,255,0.07);padding:12px 16px;display:flex;justify-content:space-between;align-items:center; }
.act-panel-head span { color:rgba(255,255,255,.6);font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase; }
.act-scroll { max-height:620px;overflow-y:auto; }
.act-row { padding:9px 14px;border-bottom:1px solid rgba(255,255,255,.04);transition:background .15s;animation:actFadeIn .35s ease; }
@keyframes actFadeIn { from{opacity:0;transform:translateY(-4px)} to{opacity:1;transform:translateY(0)} }
.act-row:hover { background:rgba(255,255,255,.03); }
.act-row:last-child { border-bottom:none; }
.act-row-top { display:flex;justify-content:space-between;align-items:center;gap:6px;margin-bottom:3px; }
.act-user { font-size:12px;font-weight:700;color:#fff; }
.act-role-badge { font-size:8px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;padding:1px 6px;border-radius:3px; }
.act-role-admin    { background:rgba(245,158,11,.15);border:1px solid rgba(245,158,11,.3);color:#fbbf24; }
.act-role-subadmin { background:rgba(212,167,66,.12);border:1px solid rgba(212,167,66,.22);color:#d4a742; }
.act-role-viewer   { background:rgba(103,232,249,.12);border:1px solid rgba(103,232,249,.25);color:#67e8f9; }
.act-role-user2    { background:rgba(56,189,248,.12);border:1px solid rgba(56,189,248,.25);color:#38bdf8; }
.act-role-user     { background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.4); }
.act-time { font-size:10px;color:rgba(255,255,255,.25);letter-spacing:.3px; }
.act-action-row { display:flex;justify-content:space-between;align-items:center;gap:6px; }
.act-action { font-size:11px;font-weight:600; }
.act-action.login         { color:#4ade80; }
.act-action.logout        { color:#f87171; }
.act-action.lookup        { color:#67e8f9; }
.act-action.edit_username { color:#fbbf24; }
.act-action.other         { color:rgba(255,255,255,.4); }
.act-ip  { font-family:monospace;font-size:10px;color:rgba(255,255,255,.25); }
.act-extra { font-size:10px;color:rgba(255,255,255,.2);margin-top:2px;word-break:break-all; }
.act-ua  { font-size:9px;color:rgba(255,255,255,.15);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:300px; }
/* ── EDIT USERNAME ── */
.uname-edit-wrap { display:flex;align-items:center;gap:5px; }
.uname-text { font-weight:600;cursor:pointer;border-bottom:1px dashed rgba(255,255,255,.2);transition:border-color .2s; }
.uname-text:hover { border-color:rgba(255,255,255,.5); }
.uname-input { background:rgba(255,255,255,.1);border:1px solid rgba(245,158,11,.4);border-radius:5px;padding:4px 8px;color:#fff;font-size:12px;font-weight:700;outline:none;width:150px;display:none; }
.uname-input:focus { border-color:rgba(245,158,11,.8);box-shadow:0 0 6px rgba(245,158,11,.2); }
.uname-save-btn { background:rgba(245,158,11,.15);border:1px solid rgba(245,158,11,.35);color:#fbbf24;padding:4px 9px;border-radius:5px;font-size:10px;font-weight:800;cursor:pointer;display:none;transition:all .2s;letter-spacing:.3px; }
.uname-save-btn:hover { background:rgba(245,158,11,.28); }
.uname-cancel-btn { background:none;border:none;color:rgba(255,255,255,.3);font-size:14px;cursor:pointer;padding:2px 5px;display:none;transition:color .2s; }
.uname-cancel-btn:hover { color:#f87171; }
/* ── NOTICE BOARD ── */
.notice-mode-btn { padding:6px 14px;border-radius:7px;font-size:11px;font-weight:700;cursor:pointer;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.07);color:rgba(255,255,255,.5);transition:all .2s;letter-spacing:.3px; }
.notice-mode-btn.active { background:rgba(212,167,66,.16);border-color:rgba(212,167,66,.4);color:#d4a742; }
.notice-user-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:7px;max-height:200px;overflow-y:auto;padding:2px; }
.notice-user-chip { display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:7px;padding:7px 10px;cursor:pointer;transition:all .18s;user-select:none; }
.notice-user-chip:hover { background:rgba(255,255,255,.1); }
.notice-user-chip.selected { background:rgba(212,167,66,.12);border-color:rgba(212,167,66,.35); }
.notice-user-chip input[type=checkbox] { accent-color:#d4a742;cursor:pointer;flex-shrink:0; }
.notice-user-chip-name { font-size:12px;font-weight:600;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.notice-user-chip-role { font-size:9px;font-weight:700;letter-spacing:.4px;text-transform:uppercase; }
/* ── NOTICE VIEW (read-only for viewers) ── */
.notice-view-box { background:rgba(212,167,66,0.06);border:1px solid rgba(212,167,66,0.2);border-radius:14px;padding:20px 24px;margin-bottom:16px; }
.notice-view-empty { text-align:center;padding:48px 20px;color:rgba(255,255,255,.2);font-size:13px; }
/* ── IP PANEL ── */
.ip-pane { width:100%; }
/* ── HIST TOGGLE ── */
.hist-toggle-btn { display:flex;align-items:center;gap:6px;background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.15);border-radius:7px;padding:5px 12px;color:rgba(255,255,255,0.7);font-size:11px;font-weight:700;cursor:pointer;letter-spacing:0.3px;transition:all 0.25s ease;position:relative;overflow:hidden; }
.hist-toggle-btn::after { content:'';position:absolute;inset:0;background:rgba(255,255,255,0.06);opacity:0;transition:opacity 0.2s; }
.hist-toggle-btn:hover::after { opacity:1; }
.hist-toggle-btn:active { transform:scale(0.97); }
.hist-toggle-btn.is-on { background:rgba(34,197,94,0.12);border-color:rgba(34,197,94,0.35);color:#4ade80;box-shadow:0 0 10px rgba(34,197,94,0.15); }
.hist-toggle-btn.is-off { background:rgba(239,68,68,0.1);border-color:rgba(239,68,68,0.28);color:#f87171; }
.hist-toggle-btn.spinning #hist-perm-icon { display:inline-block;animation:spin360 0.45s ease; }
@keyframes spin360 { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
.hist-toggle-status { font-size:10px;font-weight:800;letter-spacing:1px;text-transform:uppercase;transition:all 0.25s; }
.hist-toggle-btn.is-on  .hist-toggle-status { color:#4ade80; }
.hist-toggle-btn.is-off .hist-toggle-status { color:#f87171; }
/* ── MISC ── */
.empty { padding:24px;text-align:center;color:var(--text4);font-size:13px; }
::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:rgba(212,167,66,.03)}::-webkit-scrollbar-thumb{background:rgba(212,167,66,.18);border-radius:2px}
.section-gap { margin-bottom:28px; }


/* ── MOBILE RESPONSIVE ── */
@media (max-width: 800px) {
  .sidebar { width: 220px; }
  .main-content { padding: 12px 10px; }
  .pane-wrap, #pane-stats, #pane-users, #pane-notices, #pane-ip { max-width:100% !important; padding:0 0 16px; }
  .kpi-row { grid-template-columns: repeat(2,1fr) !important; }
  .u-table { display:block;overflow-x:auto;white-space:nowrap; }
  .u-table thead, .u-table tbody, .u-table tr, .u-table th, .u-table td { display:revert; }
  .widget { padding:24px 18px 20px; }
  .act-row { flex-wrap:wrap; gap:4px; }
  .footer-left, .footer-center { display:none; }
  .site-footer { justify-content:flex-end;padding:6px 14px; }
  .top-bar { padding:0 10px; }
  .sec-title { font-size:11px; }
  div[style*="grid-template-columns:repeat(4"] { grid-template-columns:repeat(2,1fr) !important; }
}
@media (max-width: 560px) {
  .sidebar { width: 185px; }
  .nav-label { font-size:12px; }
  .kpi-row { grid-template-columns: 1fr 1fr !important; }
  .pane-wrap { padding:0 0 12px; }
  .widget { padding:20px 14px 16px; border-radius:14px; }
  .top-bar { gap:6px; }
  .top-bar-user { font-size:10px; }
  .u-table th, .u-table td { font-size:11px; padding:8px 10px; }
}

/* ══ DYNAMIC ACCENT COLOR ══ */
.num-search-btn,.lookup-btn { background:linear-gradient(135deg,var(--checker-btn-from,#6d28d9),var(--checker-btn-to,#d4a742)) !important; color:var(--checker-btn-text,#fff) !important; }
.num-search-input:focus { border-color:var(--accent) !important; box-shadow:0 0 0 3px rgba(var(--accent-rgb),0.15) !important; }
.sidebar-user-avatar { background:rgba(var(--accent-rgb),.15) !important; border-color:rgba(var(--accent-rgb),.3) !important; color:var(--accent) !important; }
.tab-btn.active .nav-active-dot { background:var(--accent) !important; box-shadow:0 0 6px var(--accent) !important; }
.kpi-card { background:var(--kpi-bg) !important; border-color:var(--kpi-border) !important; }
/* ══ HEALTH DASHBOARD ══ */
.health-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px;margin-bottom:24px; }
.health-card { background:var(--kpi-bg);border:1px solid var(--kpi-border);border-radius:14px;padding:18px 20px;position:relative;overflow:hidden;transition:border-color .2s; }
.health-card:hover { border-color:rgba(var(--accent-rgb),.4); }
.health-card-icon { font-size:26px;margin-bottom:8px; }
.health-card-val { font-size:2em;font-weight:800;color:var(--text);line-height:1;margin-bottom:4px; }
.health-card-lbl { font-size:10px;color:var(--text3);letter-spacing:1.5px;text-transform:uppercase; }
.health-card-sub { font-size:11px;color:var(--text3);margin-top:4px; }
.health-status-dot { display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;vertical-align:middle; }
.api-ok { background:#4ade80;box-shadow:0 0 6px #4ade80; }
.api-warn { background:#fbbf24;box-shadow:0 0 6px #fbbf24; }
.api-err { background:#f87171;box-shadow:0 0 8px #f87171; }
/* ── Syslog count cards ── */
.syslog-count-card { background:rgba(239,68,68,.05);border:1px solid rgba(239,68,68,.15);border-radius:10px;padding:10px 8px;text-align:center;transition:border-color .2s; }
.syslog-count-card:hover { border-color:rgba(239,68,68,.35); }
.syslog-count-card .scc-num { font-size:18px;font-weight:800;color:#f87171;line-height:1;margin-bottom:3px; }
.syslog-count-card .scc-lbl { font-size:8px;color:rgba(255,255,255,.3);letter-spacing:.6px;text-transform:uppercase;word-break:break-all; }
/* ── Chart canvas containers ── */
.chart-canvas-wrap { position:relative;width:100%; }
/* ── Audit log table ── */

/* ── Table size bar ── */
.tsize-card { background:rgba(212,167,66,.04);border:1px solid rgba(212,167,66,.1);border-radius:10px;padding:10px 12px;transition:border-color .2s; }
.tsize-card:hover { border-color:rgba(212,167,66,.3); }
.tsize-name { font-size:10px;color:rgba(255,255,255,.55);font-weight:700;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.tsize-mb { font-size:16px;font-weight:800;color:#d4a742;line-height:1; }
.tsize-rows { font-size:9px;color:rgba(255,255,255,.3);margin-top:2px; }
.tsize-bar-wrap { height:3px;background:rgba(255,255,255,.06);border-radius:3px;margin-top:6px;overflow:hidden; }
.tsize-bar { height:100%;background:linear-gradient(90deg,rgba(212,167,66,.6),rgba(212,167,66,.3));border-radius:3px;transition:width .5s cubic-bezier(.4,0,.2,1); }

/* ══ BULK ACTIONS ══ */
.bulk-bar { display:none;background:rgba(var(--accent-rgb),.1);border:1px solid rgba(var(--accent-rgb),.3);border-radius:10px;padding:10px 16px;margin-bottom:12px;align-items:center;gap:10px;flex-wrap:wrap; }
.bulk-bar.visible { display:flex; }
.bulk-count { font-size:12px;font-weight:700;color:var(--accent); }
.bulk-btn { padding:6px 14px;border-radius:7px;font-size:11px;font-weight:700;cursor:pointer;border:1px solid;transition:all .18s; }
.bulk-enable { background:rgba(74,222,128,.1);border-color:rgba(74,222,128,.35);color:#4ade80; }
.bulk-enable:hover { background:rgba(74,222,128,.22); }
.bulk-disable { background:rgba(248,113,113,.1);border-color:rgba(248,113,113,.3);color:#f87171; }
.bulk-disable:hover { background:rgba(248,113,113,.2); }
.bulk-delete { background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.35);color:#f87171; }
.bulk-delete:hover { background:rgba(239,68,68,.25); }
.bulk-reset { background:rgba(103,232,249,.08);border-color:rgba(103,232,249,.3);color:#67e8f9; }
.bulk-reset:hover { background:rgba(103,232,249,.18); }
.u-table td.sel-cell { width:32px;vertical-align:middle; }
.user-checkbox { width:14px;height:14px;cursor:pointer;accent-color:var(--accent); }

/* ══ USER NOTE ══ */
.user-note-btn { background:rgba(var(--accent-rgb),.09);border:1px solid rgba(var(--accent-rgb),.25);color:var(--accent);padding:3px 9px;border-radius:5px;font-size:10px;font-weight:700;cursor:pointer;transition:all .18s; }
.user-note-btn:hover { background:rgba(var(--accent-rgb),.18); }
.user-note-display { font-size:10px;color:var(--text3);max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px;cursor:pointer; }
.user-note-inline { background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);border-radius:5px;padding:3px 8px;color:#fff;font-size:11px;outline:none;width:160px;margin-top:3px;display:block; }

/* ══ STATS COMPARISON ══ */
.compare-grid { display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px; }
.compare-card { background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px 18px; }
.compare-period { font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--text3);margin-bottom:10px; }
.compare-stat { display:flex;justify-content:space-between;align-items:center;padding:5px 0;border-bottom:1px solid var(--border);font-size:12px; }
.compare-stat:last-child { border-bottom:none; }
.compare-stat-lbl { color:var(--text3); }
.compare-stat-val { font-weight:700;color:var(--text); }
.compare-btn { padding:6px 14px;border-radius:7px;font-size:11px;font-weight:700;cursor:pointer;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.07);color:rgba(255,255,255,.6);transition:all .18s; }
.compare-btn.active { background:rgba(var(--accent-rgb),.2);border-color:rgba(var(--accent-rgb),.5);color:var(--accent); }

/* ══ WHITELABEL ══ */
.wl-form-row { display:flex;flex-direction:column;gap:6px;margin-bottom:14px; }
.wl-form-row label { font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--text3); }
.wl-input { background:var(--input-bg);border:1px solid var(--border2);border-radius:7px;padding:10px 14px;color:var(--text);font-size:13px;outline:none;transition:border-color .2s;width:100%; }
.wl-input:focus { border-color:var(--accent); }
.color-preview { display:inline-block;width:22px;height:22px;border-radius:4px;border:1px solid rgba(255,255,255,.2);vertical-align:middle;margin-left:8px; }
.wl-sw { width:26px;height:26px;border-radius:6px;cursor:pointer;border:2px solid transparent;transition:transform .15s,border-color .15s,box-shadow .15s;flex-shrink:0; }
.wl-sw:hover { transform:scale(1.18);box-shadow:0 0 10px rgba(255,255,255,.25); }
.wl-sw.active { border-color:#fff!important;box-shadow:0 0 0 2px rgba(255,255,255,.5),0 0 14px rgba(255,255,255,.2); }
#wl-hex-input:focus { border-color:var(--accent)!important;box-shadow:0 0 0 2px rgba(var(--accent-rgb),.2); }
.cc-row { display:flex;flex-direction:column;gap:5px; }
.cc-row-label { font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:rgba(255,255,255,.55); }
.cc-row-hint { font-size:9px;color:rgba(255,255,255,.25);margin-bottom:2px; }
.cc-swatch-row { display:flex;flex-wrap:wrap;gap:5px;margin-bottom:4px; }
.cc-sw { width:20px;height:20px;border-radius:4px;cursor:pointer;border:2px solid transparent;transition:transform .12s,border-color .12s,box-shadow .12s;flex-shrink:0; }
.cc-sw:hover { transform:scale(1.2);box-shadow:0 0 8px rgba(255,255,255,.3); }
.cc-sw.active { border-color:#fff !important;box-shadow:0 0 0 2px rgba(255,255,255,.4); }
.cc-hex-input { background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:6px;padding:5px 9px;color:#fff;font-size:11px;font-weight:600;outline:none;width:100%;font-family:monospace;transition:border-color .2s; }
.cc-hex-input:focus { border-color:var(--accent); }

/* ══ UI PREF CHOICE BUTTONS ══ */
.uip-choice-btn {
  padding:6px 14px;border-radius:7px;font-size:11px;font-weight:700;cursor:pointer;
  border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.55);transition:all .18s;letter-spacing:.2px;flex:1;text-align:center;
}
.uip-choice-btn:hover { background:rgba(255,255,255,.1);color:#fff; }
.uip-choice-btn.active { background:rgba(var(--accent-rgb),.18);border-color:rgba(var(--accent-rgb),.5);color:var(--accent); }

/* ══ LOGIN ATTEMPTS ══ */
.la-row { padding:8px 14px;border-bottom:1px solid rgba(255,255,255,.04);font-size:12px; }
.la-fail { background:rgba(239,68,68,.04); }
.la-success { background:rgba(74,222,128,.03); }
.la-badge-ok { background:rgba(74,222,128,.12);color:#4ade80;border:1px solid rgba(74,222,128,.3);padding:1px 6px;border-radius:4px;font-size:10px;font-weight:700; }
.la-badge-fail { background:rgba(239,68,68,.12);color:#f87171;border:1px solid rgba(239,68,68,.25);padding:1px 6px;border-radius:4px;font-size:10px;font-weight:700; }

/* ══ MOBILE SWIPE ══ */
@media (max-width:768px) {
  .main-content { touch-action:pan-y; }
}

/* ══════════════════════════════════════════════════
   MOBILE RESPONSIVE — max-width 768px
   Sidebar becomes a fixed bottom nav bar.
   Main content goes full width.
   Zero effect on desktop (min-width:769px+).
   ══════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Scrolling: always allowed ── */
  html { overflow-y: scroll !important; overflow-x: hidden !important; }
  body {
    overflow-y: visible !important;
    overflow-x: hidden !important;
    touch-action: pan-y pinch-zoom !important;
    flex-direction: column !important;
  }
  .app-wrap, .page-wrap { flex-direction: column !important; overflow: visible !important; }

  /* ── Sidebar → fixed bottom nav bar ── */
  .sidebar {
    width: 100% !important;
    height: 60px !important;
    min-height: 60px !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    flex-direction: row !important;
    align-items: center !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    touch-action: pan-x !important;
    z-index: 9999 !important;
    border-right: none !important;
    border-top: 1px solid rgba(255,255,255,0.12) !important;
    box-shadow: 0 -4px 30px rgba(0,0,0,0.7) !important;
    padding: 4px 8px env(safe-area-inset-bottom,4px) !important;
    gap: 2px;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .sidebar::-webkit-scrollbar { display: none !important; }

  /* Hide everything in sidebar except tab buttons */
  .sidebar-brand,
  .sidebar-logo-row,
  .sidebar-brand-text,
  .sidebar-tagline,
  .sidebar-user,
  .sidebar-user-info,
  .sidebar-nav-divider,
  .sidebar-spacer,
  .sidebar-footer,
  .sidebar-toggle,
  .sidebar-section-label,
  .sidebar-version { display: none !important; }

  /* ── Tab buttons: icon + label stacked ── */
  .sidebar-nav { flex-direction: row !important; align-items: center !important; gap: 2px !important; padding: 0 !important; }
  .tab-btn {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    padding: 5px 10px !important;
    border-radius: 10px !important;
    min-width: 52px !important;
    max-width: 72px !important;
    height: 50px !important;
    flex-shrink: 0 !important;
    text-decoration: none !important;
  }
  .nav-icon { font-size: 20px !important; line-height: 1 !important; display: block !important; }
  .nav-label {
    font-size: 9px !important;
    font-weight: 600 !important;
    opacity: 0.55 !important;
    white-space: nowrap !important;
    display: block !important;
    line-height: 1 !important;
  }
  .tab-btn.active .nav-label { opacity: 1 !important; color: #d4a742 !important; }
  .tab-btn.active { background: rgba(212,167,66,0.10) !important; }
  .nav-active-dot { display: none !important; }

  /* ── Main content: full width + space for bottom nav ── */
  .main-content {
    width: 100% !important;
    max-width: 100% !important;
    padding: 10px 10px 80px !important;
    margin: 0 !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  /* ── Panes full width ── */
  .pane-wrap,
  #pane-stats, #pane-users, #pane-notices,
  #pane-ip, #pane-dashboard, #pane-dbhealth {
    max-width: 100% !important;
    padding: 0 0 12px !important;
  }

  /* ── Top bar ── */
  .top-bar { padding: 0 10px !important; gap: 6px !important; }
  .footer-left, .footer-center { display: none !important; }
  .site-footer { justify-content: flex-end !important; padding: 4px 14px !important; margin-bottom: 60px !important; }

  /* ── KPI/stat grids: 2 columns ── */
  .kpi-row { grid-template-columns: repeat(2,1fr) !important; }
  div[style*="grid-template-columns:repeat(4"] { grid-template-columns: repeat(2,1fr) !important; }
  div[style*="grid-template-columns:repeat(3"] { grid-template-columns: repeat(2,1fr) !important; }

  /* ── Tables: horizontal scroll container ── */
  .u-table { display: block !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
  .u-table thead, .u-table tbody, .u-table tr, .u-table th, .u-table td { display: revert !important; }

  /* ── Buttons: bigger tap targets ── */
  button, .btn, .lookup-btn, .num-search-btn { min-height: 42px !important; }

  /* ── Inputs: prevent iOS auto-zoom ── */
  input, select, textarea { font-size: 16px !important; }

  /* ── Cards ── */
  .widget { padding: 16px 12px !important; border-radius: 12px !important; }
  .health-card { padding: 14px !important; }
  .sec-title { font-size: 11px !important; }

  /* ── Sidebar collapse: irrelevant on mobile ── */
  body.sidebar-collapsed .sidebar { width: 100% !important; }
  /* ── Footer: full width on mobile ── */
  .site-footer { left: 0 !important; }
}

/* ── Very small phones ── */
@media (max-width: 380px) {
  .tab-btn { min-width: 44px !important; padding: 5px 6px !important; }
  .nav-label { font-size: 8px !important; }
  .nav-icon { font-size: 18px !important; }
  .main-content { padding: 8px 6px 80px !important; }
}

/* ══ COPY PHONE BUTTON ══ */
.copy-ph {
  display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;border-radius:4px;
  background:transparent;border:1px solid transparent;
  color:var(--text4);cursor:pointer;font-size:11px;
  transition:all .2s;margin-left:5px;vertical-align:middle;
  flex-shrink:0;opacity:.4;
}
.copy-ph:hover { opacity:1;background:rgba(var(--gold-rgb,212,167,66),.1);border-color:rgba(var(--gold-rgb,212,167,66),.25);color:var(--gold,#d4a742); }
.copy-ph.copied { opacity:1;color:#10b981;border-color:rgba(16,185,129,.3);background:rgba(16,185,129,.08); }

/* ══ SKELETON LOADING ══ */
@keyframes skeletonShimmer {
  0% { background-position:-200% 0; }
  100% { background-position:200% 0; }
}
.skeleton {
  background:linear-gradient(90deg,var(--surface) 25%,var(--surface2) 50%,var(--surface) 75%);
  background-size:200% 100%;
  animation:skeletonShimmer 1.8s ease-in-out infinite;
  border-radius:6px;
}
.skeleton-row { display:flex;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border); }
.skeleton-circle { width:32px;height:32px;border-radius:50%;flex-shrink:0; }
.skeleton-line { height:12px;border-radius:4px;flex:1; }
.skeleton-line.short { max-width:60%; }
.skeleton-line.xs { max-width:30%;height:10px; }
.skeleton-kpi { height:38px;border-radius:8px;margin-bottom:6px; }
.skeleton-kpi-lbl { height:10px;border-radius:4px;width:60%;margin:0 auto; }

/* ══ KPI COUNTER ANIMATION ══ */
@keyframes kpiCountIn {
  from { opacity:0;transform:translateY(8px) scale(.9); }
  to { opacity:1;transform:none; }
}
.kpi-val.counted { animation:kpiCountIn .4s cubic-bezier(.34,1.2,.64,1); }

/* ══ CONFETTI ══ */
@keyframes confettiFall {
  0% { transform:translateY(-10px) rotate(0deg);opacity:1; }
  100% { transform:translateY(100vh) rotate(720deg);opacity:0; }
}
.confetti-piece {
  position:fixed;top:-10px;z-index:9999;pointer-events:none;
  width:8px;height:8px;border-radius:1px;
  animation:confettiFall 3s cubic-bezier(.25,.46,.45,.94) forwards;
}

/* ══ DRAG-DROP QUICK LINKS ══ */
.ql-item.dragging { opacity:.4;transform:scale(.96);box-shadow:0 8px 32px rgba(0,0,0,.3); }
.ql-item.drag-over { border-color:var(--gold,#d4a742);box-shadow:0 0 0 2px rgba(var(--gold-rgb,212,167,66),.2); }
.ql-drag-handle {
  cursor:grab;color:var(--text4);font-size:14px;padding:4px;
  display:flex;align-items:center;transition:color .2s;flex-shrink:0;
}
.ql-drag-handle:hover { color:var(--text2); }
.ql-drag-handle:active { cursor:grabbing; }

/* ══ LIVE QUEUE ══ */
.queue-item {
  display:flex;align-items:center;gap:12px;padding:10px 16px;
  border-bottom:1px solid var(--td-border);transition:background .2s;
  animation:queueFadeIn .3s ease;
}
@keyframes queueFadeIn { from{opacity:0;transform:translateX(-8px)} to{opacity:1;transform:none} }
.queue-item:hover { background:var(--row-hover); }
.queue-pulse { width:8px;height:8px;border-radius:50%;background:#10b981;box-shadow:0 0 8px rgba(16,185,129,.6);animation:pulse 1.5s ease-in-out infinite;flex-shrink:0; }