/* ==========================================================================
   RABBITNET / TITAN — PREMIUM SKIN  (Step 1: shell + dark/light)
   Loaded AFTER cyber_theme.css. Additive only: it re-maps design tokens and
   polishes the shell (sidebar, topbar, cards, nav, stats, tables, buttons).
   The 21 accent themes keep driving --primary/--accent; this layer never sets
   them. Surface light/dark is a SEPARATE axis, html[data-mode="dark"], so every
   accent theme gains a matching dark variant. Default (unset) = premium light.
   ========================================================================== */

/* ---------- Premium LIGHT refinement (cool slate neutrals, soft depth) ---- */
:root {
  --bg-body: #eef2f7;
  --surface: #ffffff;
  --surface-card: #ffffff;
  --surface-subtle: #f5f8fb;
  --surface-muted: #eef2f7;
  --surface-raised: #ffffff;

  --text-main: #0f1f2e;
  --text-secondary: #26384a;
  --text-muted: #5a6b7d;
  --text-subtle: #7b8a9a;

  --border: #dde6ef;
  --border-subtle: #eaf0f6;
  --divider: #e5ebf2;

  --shadow-sm: 0 1px 2px rgba(15, 31, 46, .06), 0 1px 3px rgba(15, 31, 46, .04);
  --shadow-md: 0 6px 16px -6px rgba(15, 31, 46, .12), 0 2px 6px -2px rgba(15, 31, 46, .06);
  --shadow-lg: 0 18px 40px -16px rgba(15, 31, 46, .22), 0 6px 14px -8px rgba(15, 31, 46, .1);
  --shadow-xl: 0 28px 60px -20px rgba(15, 31, 46, .28);

  /* premium-skin private tokens */
  --pz-sidebar-bg: rgba(255, 255, 255, .72);
  --pz-glass-blur: 16px;
  --pz-card-radius: 16px;
  --pz-ring: rgba(var(--primary-rgb, 16, 185, 129), .16);
}

/* Soft two-tone canvas glow driven by the live accent */
body {
  background-color: var(--bg-body);
  background-image:
    radial-gradient(820px 460px at 86% -10%, rgba(var(--primary-rgb, 16,185,129), .08), transparent 60%),
    radial-gradient(680px 420px at -6% 110%, rgba(var(--primary-rgb, 16,185,129), .05), transparent 55%);
  background-attachment: fixed;
}

/* ---------- DARK mode (explicit opt-in; accent stays from the theme) ------- */
html[data-mode="dark"] {
  --bg-body: #0a0f14;
  --surface: #121b23;
  --surface-card: #121b23;
  --surface-subtle: #0f171e;
  --surface-muted: #16212b;
  --surface-raised: #17222c;

  --text-main: #eaf2f0;
  --text-secondary: #cdd9e4;
  --text-muted: #94a6b6;
  --text-subtle: #6f8294;
  --text-inverse: #ffffff;

  --border: rgba(255, 255, 255, .10);
  --border-subtle: rgba(255, 255, 255, .06);
  --divider: rgba(255, 255, 255, .08);

  --success-soft: rgba(52, 211, 153, .14);
  --warning-soft: rgba(251, 191, 36, .14);
  --danger-soft: rgba(248, 113, 113, .14);
  --info-soft: rgba(56, 189, 248, .14);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 8px 20px -8px rgba(0, 0, 0, .5);
  --shadow-lg: 0 20px 44px -16px rgba(0, 0, 0, .6);
  --shadow-xl: 0 30px 70px -22px rgba(0, 0, 0, .7);

  --pz-sidebar-bg: rgba(18, 27, 35, .72);
  --pz-ring: rgba(var(--primary-rgb, 16, 185, 129), .3);

  color-scheme: dark;
}
html[data-mode="dark"] body {
  background-color: var(--bg-body);
  background-image:
    radial-gradient(900px 520px at 84% -8%, rgba(var(--primary-rgb, 16,185,129), .13), transparent 60%),
    radial-gradient(760px 460px at -6% 108%, rgba(139, 92, 246, .10), transparent 55%);
}
/* ---- Dark-mode legibility for inline hardcoded colors --------------------
   Much of the panel sets colors directly in markup (style="..."). In dark mode
   those light surfaces and near-black text have to flip, so these attribute
   selectors re-point the common hardcoded values at the right token/shade.
   Everything here is scoped to html[data-mode="dark"], so LIGHT mode is never
   touched. Brand/semantic hues (green/red/amber/blue) are left alone; only
   light backgrounds, dark text and dark chip text are remapped. */

/* Light surfaces -> dark surface */
html[data-mode="dark"] [style*="background: #FFFFFF"],
html[data-mode="dark"] [style*="background:#FFFFFF"],
html[data-mode="dark"] [style*="background: #ffffff"],
html[data-mode="dark"] [style*="background:#ffffff"],
html[data-mode="dark"] [style*="background: #fff;"],
html[data-mode="dark"] [style*="background:#fff;"],
html[data-mode="dark"] [style*="background: white"],
html[data-mode="dark"] [style*="background:white"],
html[data-mode="dark"] [style*="background-color: #FFFFFF"],
html[data-mode="dark"] [style*="background-color:#FFFFFF"],
html[data-mode="dark"] [style*="background-color: #ffffff"],
html[data-mode="dark"] [style*="background-color: #fff;"] {
  background-color: var(--surface-card) !important;
}
html[data-mode="dark"] [style*="background: #f8fafc"],
html[data-mode="dark"] [style*="background:#f8fafc"],
html[data-mode="dark"] [style*="background: #F8FAFC"],
html[data-mode="dark"] [style*="background: #f1f5f9"],
html[data-mode="dark"] [style*="background:#f1f5f9"],
html[data-mode="dark"] [style*="background: #F1F5F9"] {
  background-color: var(--surface-muted) !important;
}

/* Soft status tints -> dark translucent soft */
html[data-mode="dark"] [style*="#ecfdf5"],
html[data-mode="dark"] [style*="#ECFDF5"],
html[data-mode="dark"] [style*="#f0fdf4"],
html[data-mode="dark"] [style*="#F0FDF4"],
html[data-mode="dark"] [style*="#dcfce7"],
html[data-mode="dark"] [style*="#DCFCE7"],
html[data-mode="dark"] [style*="#e8f5e9"],
html[data-mode="dark"] [style*="#E8F5E9"] { background-color: rgba(52,211,153,.14) !important; }
html[data-mode="dark"] [style*="#ecfeff"],
html[data-mode="dark"] [style*="#ECFEFF"],
html[data-mode="dark"] [style*="#f0fdfa"],
html[data-mode="dark"] [style*="#F0FDFA"],
html[data-mode="dark"] [style*="#e0f2fe"],
html[data-mode="dark"] [style*="#E0F2FE"] { background-color: rgba(20,184,166,.15) !important; }
html[data-mode="dark"] [style*="#fef2f2"],
html[data-mode="dark"] [style*="#FEF2F2"],
html[data-mode="dark"] [style*="#fee2e2"],
html[data-mode="dark"] [style*="#FEE2E2"],
html[data-mode="dark"] [style*="#fff1f2"],
html[data-mode="dark"] [style*="#FFF1F2"],
html[data-mode="dark"] [style*="#fdf2f8"],
html[data-mode="dark"] [style*="#FDF2F8"] { background-color: rgba(244,63,94,.14) !important; }
html[data-mode="dark"] [style*="#fffbeb"],
html[data-mode="dark"] [style*="#FFFBEB"],
html[data-mode="dark"] [style*="#fef3c7"],
html[data-mode="dark"] [style*="#FEF3C7"],
html[data-mode="dark"] [style*="#fff7ed"],
html[data-mode="dark"] [style*="#FFF7ED"],
html[data-mode="dark"] [style*="#ffedd5"],
html[data-mode="dark"] [style*="#FFEDD5"],
html[data-mode="dark"] [style*="#fed7aa"],
html[data-mode="dark"] [style*="#FED7AA"] { background-color: rgba(251,191,36,.14) !important; }
html[data-mode="dark"] [style*="#eff6ff"],
html[data-mode="dark"] [style*="#EFF6FF"],
html[data-mode="dark"] [style*="#f0f9ff"],
html[data-mode="dark"] [style*="#F0F9FF"],
html[data-mode="dark"] [style*="#dbeafe"],
html[data-mode="dark"] [style*="#DBEAFE"] { background-color: rgba(56,189,248,.14) !important; }
html[data-mode="dark"] [style*="#eef2ff"],
html[data-mode="dark"] [style*="#EEF2FF"],
html[data-mode="dark"] [style*="#f5f3ff"],
html[data-mode="dark"] [style*="#F5F3FF"],
html[data-mode="dark"] [style*="#faf5ff"],
html[data-mode="dark"] [style*="#FAF5FF"],
html[data-mode="dark"] [style*="#f3e8ff"],
html[data-mode="dark"] [style*="#F3E8FF"] { background-color: rgba(139,92,246,.15) !important; }

/* Light borders -> token or translucent border */
html[data-mode="dark"] [style*="#e2e8f0"],
html[data-mode="dark"] [style*="#E2E8F0"],
html[data-mode="dark"] [style*="#cbd5e1"],
html[data-mode="dark"] [style*="#CBD5E1"],
html[data-mode="dark"] [style*="#f1f5f9"],
html[data-mode="dark"] [style*="#F1F5F9"] { border-color: var(--border) !important; }
html[data-mode="dark"] [style*="#a7f3d0"], html[data-mode="dark"] [style*="#A7F3D0"],
html[data-mode="dark"] [style*="#6ee7b7"], html[data-mode="dark"] [style*="#6EE7B7"],
html[data-mode="dark"] [style*="#86efac"], html[data-mode="dark"] [style*="#86EFAC"],
html[data-mode="dark"] [style*="#a5f3fc"], html[data-mode="dark"] [style*="#A5F3FC"],
html[data-mode="dark"] [style*="#99f6e4"], html[data-mode="dark"] [style*="#99F6E4"],
html[data-mode="dark"] [style*="#5eead4"], html[data-mode="dark"] [style*="#5EEAD4"] { border-color: rgba(52,211,153,.35) !important; }
html[data-mode="dark"] [style*="#fecaca"], html[data-mode="dark"] [style*="#FECACA"],
html[data-mode="dark"] [style*="#fca5a5"], html[data-mode="dark"] [style*="#FCA5A5"],
html[data-mode="dark"] [style*="#fbcfe8"], html[data-mode="dark"] [style*="#FBCFE8"],
html[data-mode="dark"] [style*="#f9a8d4"], html[data-mode="dark"] [style*="#F9A8D4"] { border-color: rgba(248,113,113,.35) !important; }
html[data-mode="dark"] [style*="#fde68a"], html[data-mode="dark"] [style*="#FDE68A"],
html[data-mode="dark"] [style*="#fcd34d"], html[data-mode="dark"] [style*="#FCD34D"],
html[data-mode="dark"] [style*="#fdba74"], html[data-mode="dark"] [style*="#FDBA74"] { border-color: rgba(251,191,36,.35) !important; }
html[data-mode="dark"] [style*="#bfdbfe"], html[data-mode="dark"] [style*="#BFDBFE"],
html[data-mode="dark"] [style*="#93c5fd"], html[data-mode="dark"] [style*="#93C5FD"],
html[data-mode="dark"] [style*="#bae6fd"], html[data-mode="dark"] [style*="#BAE6FD"],
html[data-mode="dark"] [style*="#c7d2fe"], html[data-mode="dark"] [style*="#C7D2FE"],
html[data-mode="dark"] [style*="#ddd6fe"], html[data-mode="dark"] [style*="#DDD6FE"],
html[data-mode="dark"] [style*="#e9d5ff"], html[data-mode="dark"] [style*="#E9D5FF"],
html[data-mode="dark"] [style*="#c4b5fd"], html[data-mode="dark"] [style*="#C4B5FD"] { border-color: rgba(129,140,248,.35) !important; }

/* Near-black / slate TEXT -> light text (match the color: property only) */
html[data-mode="dark"] [style*="color: #0f172a"], html[data-mode="dark"] [style*="color:#0f172a"],
html[data-mode="dark"] [style*="color: #0F172A"], html[data-mode="dark"] [style*="color:#0F172A"],
html[data-mode="dark"] [style*="color: #111827"], html[data-mode="dark"] [style*="color:#111827"],
html[data-mode="dark"] [style*="color: #1e293b"], html[data-mode="dark"] [style*="color:#1e293b"],
html[data-mode="dark"] [style*="color: #1E293B"], html[data-mode="dark"] [style*="color:#1E293B"],
html[data-mode="dark"] [style*="color: #1e1b4b"], html[data-mode="dark"] [style*="color:#1e1b4b"],
html[data-mode="dark"] [style*="color: #1E1B4B"], html[data-mode="dark"] [style*="color:#1E1B4B"],
html[data-mode="dark"] [style*="color: #312e81"], html[data-mode="dark"] [style*="color:#312e81"],
html[data-mode="dark"] [style*="color: #312E81"], html[data-mode="dark"] [style*="color:#312E81"] { color: var(--text-main) !important; }
html[data-mode="dark"] [style*="color: #334155"], html[data-mode="dark"] [style*="color:#334155"],
html[data-mode="dark"] [style*="color: #475569"], html[data-mode="dark"] [style*="color:#475569"],
html[data-mode="dark"] [style*="color: #374151"], html[data-mode="dark"] [style*="color:#374151"],
html[data-mode="dark"] [style*="color: #4b5563"], html[data-mode="dark"] [style*="color:#4b5563"],
html[data-mode="dark"] [style*="color: #4B5563"], html[data-mode="dark"] [style*="color:#4B5563"] { color: var(--text-secondary) !important; }
html[data-mode="dark"] [style*="color: #64748b"], html[data-mode="dark"] [style*="color:#64748b"],
html[data-mode="dark"] [style*="color: #64748B"], html[data-mode="dark"] [style*="color:#64748B"],
html[data-mode="dark"] [style*="color: #6b7280"], html[data-mode="dark"] [style*="color:#6b7280"],
html[data-mode="dark"] [style*="color: #6B7280"], html[data-mode="dark"] [style*="color:#6B7280"] { color: var(--text-muted) !important; }

/* Dark chip text on status tints -> lighter, readable shade */
html[data-mode="dark"] [style*="color: #065f46"], html[data-mode="dark"] [style*="color:#065f46"],
html[data-mode="dark"] [style*="color: #065F46"], html[data-mode="dark"] [style*="color:#065F46"],
html[data-mode="dark"] [style*="color: #047857"], html[data-mode="dark"] [style*="color:#047857"],
html[data-mode="dark"] [style*="color: #059669"], html[data-mode="dark"] [style*="color:#059669"],
html[data-mode="dark"] [style*="color: #166534"], html[data-mode="dark"] [style*="color:#166534"],
html[data-mode="dark"] [style*="color: #14532d"], html[data-mode="dark"] [style*="color:#14532d"],
html[data-mode="dark"] [style*="color: #15803d"], html[data-mode="dark"] [style*="color:#15803d"],
html[data-mode="dark"] [style*="color: #15803D"], html[data-mode="dark"] [style*="color:#15803D"],
html[data-mode="dark"] [style*="color: #16a34a"], html[data-mode="dark"] [style*="color:#16a34a"],
html[data-mode="dark"] [style*="color: #16A34A"], html[data-mode="dark"] [style*="color:#16A34A"],
html[data-mode="dark"] [style*="color: #2e7d32"], html[data-mode="dark"] [style*="color:#2e7d32"],
html[data-mode="dark"] [style*="color: #2E7D32"], html[data-mode="dark"] [style*="color:#2E7D32"],
html[data-mode="dark"] [style*="color: #388e3c"], html[data-mode="dark"] [style*="color:#388e3c"],
html[data-mode="dark"] [style*="color: #388E3C"], html[data-mode="dark"] [style*="color:#388E3C"] { color: #6ee7b7 !important; }
html[data-mode="dark"] [style*="color: #0f766e"], html[data-mode="dark"] [style*="color:#0f766e"],
html[data-mode="dark"] [style*="color: #0F766E"], html[data-mode="dark"] [style*="color:#0F766E"],
html[data-mode="dark"] [style*="color: #0d9488"], html[data-mode="dark"] [style*="color:#0d9488"],
html[data-mode="dark"] [style*="color: #0D9488"], html[data-mode="dark"] [style*="color:#0D9488"],
html[data-mode="dark"] [style*="color: #0e7490"], html[data-mode="dark"] [style*="color:#0e7490"],
html[data-mode="dark"] [style*="color: #0E7490"], html[data-mode="dark"] [style*="color:#0E7490"],
html[data-mode="dark"] [style*="color: #155e75"], html[data-mode="dark"] [style*="color:#155e75"],
html[data-mode="dark"] [style*="color: #0891b2"], html[data-mode="dark"] [style*="color:#0891b2"] { color: #5eead4 !important; }
html[data-mode="dark"] [style*="color: #991b1b"], html[data-mode="dark"] [style*="color:#991b1b"],
html[data-mode="dark"] [style*="color: #991B1B"], html[data-mode="dark"] [style*="color:#991B1B"],
html[data-mode="dark"] [style*="color: #7f1d1d"], html[data-mode="dark"] [style*="color:#7f1d1d"],
html[data-mode="dark"] [style*="color: #b91c1c"], html[data-mode="dark"] [style*="color:#b91c1c"],
html[data-mode="dark"] [style*="color: #B91C1C"], html[data-mode="dark"] [style*="color:#B91C1C"],
html[data-mode="dark"] [style*="color: #dc2626"], html[data-mode="dark"] [style*="color:#dc2626"],
html[data-mode="dark"] [style*="color: #DC2626"], html[data-mode="dark"] [style*="color:#DC2626"],
html[data-mode="dark"] [style*="color: #e11d48"], html[data-mode="dark"] [style*="color:#e11d48"],
html[data-mode="dark"] [style*="color: #E11D48"], html[data-mode="dark"] [style*="color:#E11D48"],
html[data-mode="dark"] [style*="color: #be185d"], html[data-mode="dark"] [style*="color:#be185d"],
html[data-mode="dark"] [style*="color: #BE185D"], html[data-mode="dark"] [style*="color:#BE185D"],
html[data-mode="dark"] [style*="color: #db2777"], html[data-mode="dark"] [style*="color:#db2777"],
html[data-mode="dark"] [style*="color: #DB2777"], html[data-mode="dark"] [style*="color:#DB2777"] { color: #fda4af !important; }
html[data-mode="dark"] [style*="color: #92400e"], html[data-mode="dark"] [style*="color:#92400e"],
html[data-mode="dark"] [style*="color: #92400E"], html[data-mode="dark"] [style*="color:#92400E"],
html[data-mode="dark"] [style*="color: #78350f"], html[data-mode="dark"] [style*="color:#78350f"],
html[data-mode="dark"] [style*="color: #b45309"], html[data-mode="dark"] [style*="color:#b45309"],
html[data-mode="dark"] [style*="color: #B45309"], html[data-mode="dark"] [style*="color:#B45309"],
html[data-mode="dark"] [style*="color: #d97706"], html[data-mode="dark"] [style*="color:#d97706"],
html[data-mode="dark"] [style*="color: #D97706"], html[data-mode="dark"] [style*="color:#D97706"],
html[data-mode="dark"] [style*="color: #c2410c"], html[data-mode="dark"] [style*="color:#c2410c"],
html[data-mode="dark"] [style*="color: #C2410C"], html[data-mode="dark"] [style*="color:#C2410C"],
html[data-mode="dark"] [style*="color: #ea580c"], html[data-mode="dark"] [style*="color:#ea580c"],
html[data-mode="dark"] [style*="color: #EA580C"], html[data-mode="dark"] [style*="color:#EA580C"] { color: #fcd34d !important; }
html[data-mode="dark"] [style*="color: #1e40af"], html[data-mode="dark"] [style*="color:#1e40af"],
html[data-mode="dark"] [style*="color: #1E40AF"], html[data-mode="dark"] [style*="color:#1E40AF"],
html[data-mode="dark"] [style*="color: #1e3a8a"], html[data-mode="dark"] [style*="color:#1e3a8a"],
html[data-mode="dark"] [style*="color: #1E3A8A"], html[data-mode="dark"] [style*="color:#1E3A8A"],
html[data-mode="dark"] [style*="color: #1d4ed8"], html[data-mode="dark"] [style*="color:#1d4ed8"],
html[data-mode="dark"] [style*="color: #1D4ED8"], html[data-mode="dark"] [style*="color:#1D4ED8"],
html[data-mode="dark"] [style*="color: #2563eb"], html[data-mode="dark"] [style*="color:#2563eb"],
html[data-mode="dark"] [style*="color: #2563EB"], html[data-mode="dark"] [style*="color:#2563EB"],
html[data-mode="dark"] [style*="color: #0284c7"], html[data-mode="dark"] [style*="color:#0284c7"],
html[data-mode="dark"] [style*="color: #0284C7"], html[data-mode="dark"] [style*="color:#0284C7"],
html[data-mode="dark"] [style*="color: #0369a1"], html[data-mode="dark"] [style*="color:#0369a1"],
html[data-mode="dark"] [style*="color: #0369A1"], html[data-mode="dark"] [style*="color:#0369A1"] { color: #93c5fd !important; }
html[data-mode="dark"] [style*="color: #4338ca"], html[data-mode="dark"] [style*="color:#4338ca"],
html[data-mode="dark"] [style*="color: #4338CA"], html[data-mode="dark"] [style*="color:#4338CA"],
html[data-mode="dark"] [style*="color: #4f46e5"], html[data-mode="dark"] [style*="color:#4f46e5"],
html[data-mode="dark"] [style*="color: #4F46E5"], html[data-mode="dark"] [style*="color:#4F46E5"],
html[data-mode="dark"] [style*="color: #6366f1"], html[data-mode="dark"] [style*="color:#6366f1"],
html[data-mode="dark"] [style*="color: #6366F1"], html[data-mode="dark"] [style*="color:#6366F1"],
html[data-mode="dark"] [style*="color: #5b21b6"], html[data-mode="dark"] [style*="color:#5b21b6"],
html[data-mode="dark"] [style*="color: #5B21B6"], html[data-mode="dark"] [style*="color:#5B21B6"],
html[data-mode="dark"] [style*="color: #6d28d9"], html[data-mode="dark"] [style*="color:#6d28d9"],
html[data-mode="dark"] [style*="color: #6D28D9"], html[data-mode="dark"] [style*="color:#6D28D9"],
html[data-mode="dark"] [style*="color: #7c3aed"], html[data-mode="dark"] [style*="color:#7c3aed"],
html[data-mode="dark"] [style*="color: #7C3AED"], html[data-mode="dark"] [style*="color:#7C3AED"],
html[data-mode="dark"] [style*="color: #7e22ce"], html[data-mode="dark"] [style*="color:#7e22ce"],
html[data-mode="dark"] [style*="color: #7E22CE"], html[data-mode="dark"] [style*="color:#7E22CE"] { color: #c4b5fd !important; }

/* ---------- Sidebar: glass panel ----------------------------------------- */
.sidebar {
  background: var(--pz-sidebar-bg) !important;
  backdrop-filter: blur(var(--pz-glass-blur));
  -webkit-backdrop-filter: blur(var(--pz-glass-blur));
  border-right: 1px solid var(--border);
}
.sidebar .brand-header {
  background: linear-gradient(135deg, rgba(var(--primary-rgb,16,185,129),.14), rgba(var(--primary-rgb,16,185,129),.03));
  color: var(--text-main);
  border: 1px solid var(--border);
  box-shadow: none;
}
.sidebar .brand-header .brand-title { color: var(--text-main); }
.sidebar .brand-header .brand-subtitle { color: var(--primary); }
.sidebar .brand-header .brand-logo-icon {
  background: linear-gradient(145deg, var(--primary), var(--accent));
  color: #fff;
  border: none;
  box-shadow: 0 6px 16px -6px rgba(var(--primary-rgb,16,185,129), .6);
}

/* Nav items: quiet by default, accent rail + tint when active */
.nav-item { border-radius: 11px; font-weight: 600; }
.nav-item:hover, .nav-item:active { background: var(--surface-muted); color: var(--text-main); }
.sidebar .nav-item.active,
.nav-item.active {
  background: linear-gradient(100deg, rgba(var(--primary-rgb,16,185,129),.16), rgba(var(--primary-rgb,16,185,129),.03));
  color: var(--text-main);
  border-left: 3px solid var(--primary);
  box-shadow: none;
}
.nav-item.active .nav-icon { color: var(--primary); }

/* ---------- Topbar: keep the accent gradient, add depth ------------------- */
.topbar {
  box-shadow: 0 6px 22px -14px rgba(15, 31, 46, .5);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}

/* ---------- Cards / panels ------------------------------------------------ */
.card, .panel-card, .settings-card, .stat-card, .glass-card {
  border-radius: var(--pz-card-radius);
  border: 1px solid var(--border);
  background: var(--surface-card);
  box-shadow: var(--shadow-md);
}

/* Stat tiles: refined, with a hairline accent top edge */
.stat-card-modern {
  border-radius: var(--pz-card-radius);
  border: 1px solid var(--border);
  background: var(--surface-card);
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.stat-card-modern::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  opacity: .9;
}
.stat-card-modern:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
.stat-icon-wrapper {
  border-radius: 12px;
  background: rgba(var(--primary-rgb,16,185,129), .1) !important;
  color: var(--primary) !important;
  border: 1px solid var(--border-subtle);
}
.stat-value { letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

/* ---------- Buttons ------------------------------------------------------- */
.btn { border-radius: 11px; font-weight: 700; transition: all .15s ease; }
.btn-primary {
  background: linear-gradient(145deg, var(--primary), var(--accent));
  border: none;
  box-shadow: 0 8px 20px -10px rgba(var(--primary-rgb,16,185,129), .7);
}
.btn-primary:hover { filter: brightness(1.06); }
.btn-secondary {
  background: var(--surface-muted);
  border: 1px solid var(--border);
  color: var(--text-secondary);
}
.btn-secondary:hover { background: var(--surface-subtle); color: var(--text-main); }

/* ---------- Tables -------------------------------------------------------- */
table th {
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .72rem;
  color: var(--text-subtle);
  border-bottom: 1px solid var(--border);
}
table td { border-bottom: 1px solid var(--border-subtle); }
tbody tr { transition: background .12s ease; }
tbody tr:hover td { background: var(--surface-muted); }

/* ---------- Inputs -------------------------------------------------------- */
input, select, textarea {
  border-radius: 10px;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--pz-ring);
}

/* ---------- Surface-mode toggle button (topbar, all users) ---------------- */
.pz-mode-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; flex: none;
  border-radius: 10px;
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .3);
  color: var(--text-inverse);
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.pz-mode-toggle:hover { background: rgba(255, 255, 255, .28); }
.pz-mode-toggle:active { transform: scale(.94); }
.pz-mode-toggle svg { width: 18px; height: 18px; }

/* custom scrollbar refine */
::-webkit-scrollbar-thumb { background: var(--text-subtle); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }

@media (prefers-reduced-motion: reduce) {
  .stat-card-modern, .btn, .nav-item, .pz-mode-toggle { transition: none; }
}