/* ══════════════════════════════════════════════════════════════════════════
   DAWA × AURORA  —  Design System Overlay  v2
   ──────────────────────────────────────────────────────────────────────────
   Aesthetic: Midnight Pharmacy — deep obsidian + electric indigo + amber gold
   Fonts: Sora (UI) · Instrument Serif (display) · JetBrains Mono (numbers)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ══════════════════════════════════════════════════════════════════════════
   DESIGN TOKENS
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  /* ── Core palette ── */
  --ink-950: #05061A;
  --ink-900: #0B0D2E;
  --ink-800: #12163D;
  --ink-750: #171B4A;
  --ink-700: #1E2358;
  --ink-600: #2D3785;
  --ink-500: #4F5BB5;
  --ink-400: #7B86C8;
  --ink-300: #AAB2DC;
  --ink-200: #CDD2EE;
  --ink-100: #E4E7F7;
  --ink-50:  #F2F4FC;

  /* ── Electric accent ── */
  --violet-700: #5B21B6;
  --violet-600: #6D3CF0;
  --violet-500: #8B5CF6;
  --violet-400: #A78BFA;
  --violet-300: #C4B5FD;

  /* ── Gold / amber ── */
  --gold-700: #A16207;
  --gold-600: #C68612;
  --gold-500: #F59E0B;
  --gold-400: #FBBF24;
  --gold-300: #FDE68A;

  /* ── Semantic ── */
  --emerald-600: #059669;
  --emerald-500: #10B981;
  --emerald-400: #34D399;
  --rose-600:    #E11D48;
  --rose-500:    #F43F5E;
  --rose-400:    #FB7185;
  --cyan-600:    #0891B2;
  --cyan-500:    #06B6D4;
  --cyan-400:    #22D3EE;

  /* ── Gradients ── */
  --grad-primary:        linear-gradient(135deg, #4338CA 0%, #6D3CF0 60%, #8B5CF6 100%);
  --grad-primary-hover:  linear-gradient(135deg, #3730A3 0%, #5B21B6 60%, #6D3CF0 100%);
  --grad-gold:           linear-gradient(135deg, #C68612 0%, #F59E0B 60%, #FBBF24 100%);
  --grad-emerald:        linear-gradient(135deg, #047857 0%, #10B981 60%, #34D399 100%);
  --grad-rose:           linear-gradient(135deg, #BE123C 0%, #F43F5E 60%, #FB7185 100%);
  --grad-cyan:           linear-gradient(135deg, #0891B2 0%, #06B6D4 60%, #22D3EE 100%);
  --grad-hero:           linear-gradient(125deg, #0B0D2E 0%, #1E2358 40%, #4338CA 75%, #6D3CF0 100%);
  --grad-sidebar:        linear-gradient(180deg, #0B0D2E 0%, #12163D 60%, #171B4A 100%);
  --grad-login:          linear-gradient(145deg, #05061A 0%, #0B0D2E 35%, #1E2358 65%, #2D3785 100%);

  /* ── Glows ── */
  --glow-violet:  0 0 40px -8px rgba(109,60,240,0.6),  0 16px 48px -12px rgba(109,60,240,0.4);
  --glow-gold:    0 0 40px -8px rgba(245,158,11,0.55), 0 16px 48px -12px rgba(245,158,11,0.35);
  --glow-rose:    0 0 30px -8px rgba(244,63,94,0.5),   0 12px 32px -10px rgba(244,63,94,0.3);
  --glow-emerald: 0 0 30px -8px rgba(16,185,129,0.5),  0 12px 32px -10px rgba(16,185,129,0.3);

  /* ── Shadows ── */
  --shadow-xs:  0 1px 2px rgba(5,6,26,0.05), 0 1px 3px rgba(5,6,26,0.04);
  --shadow-sm:  0 2px 6px rgba(5,6,26,0.07), 0 1px 3px rgba(5,6,26,0.05);
  --shadow-md:  0 4px 14px -2px rgba(5,6,26,0.09), 0 12px 32px -8px rgba(11,13,46,0.10);
  --shadow-lg:  0 12px 28px -6px rgba(5,6,26,0.13), 0 32px 64px -16px rgba(45,55,133,0.20);
  --shadow-xl:  0 20px 48px -10px rgba(5,6,26,0.20), 0 48px 80px -20px rgba(45,55,133,0.28);

  /* ── Easing ── */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Override Dawa base tokens ── */
  --brand:        #6D3CF0;
  --brand-dark:   #4338CA;
  --brand-deeper: #0B0D2E;
  --brand-light:  #EEF0FF;
  --brand-muted:  #AAB2DC;

  --bg-page:    #F0F2FA;
  --bg-surface: #FFFFFF;
  --bg-raised:  #F8F9FE;
  --bg-muted:   #F4F5FB;
  --bg-overlay: rgba(5,6,26,0.72);

  --text-primary:   #0B0D2E;
  --text-secondary: #2D3785;
  --text-muted:     #7B86C8;
  --text-on-brand:  #FFFFFF;

  --border:        rgba(30,35,88,0.09);
  --border-strong: rgba(30,35,88,0.15);
  --border-focus:  #6D3CF0;

  --success:      #10B981;
  --success-bg:   #ECFDF5;
  --success-text: #047857;
  --warning:      #F59E0B;
  --warning-bg:   #FFFBEB;
  --warning-text: #A16207;
  --danger:       #F43F5E;
  --danger-bg:    #FFF0F3;
  --danger-text:  #BE123C;
  --info:         #4F5BB5;
  --info-bg:      #EEF0FF;
  --info-text:    #2D3785;
  --purple-bg:    #F3E8FF;
  --purple-text:  #6D28D9;
  --orange-bg:    #FFF7ED;
  --orange-text:  #C2410C;

  --radius-sm:  10px;
  --radius-md:  14px;
  --radius-lg:  20px;
  --radius-xl:  28px;

  --sidebar-bg:      #0B0D2E;
  --sidebar-accent:  #FBBF24;

  /* ── Sidebar alias tokens ── */
  --r-sm-aurora: 10px;
  --r-aurora:    14px;
  --r-lg-aurora: 20px;
  --shadow-sm-aurora: var(--shadow-sm);
  --shadow-md-aurora: var(--shadow-md);
  --shadow-lg-aurora: var(--shadow-lg);
  --shadow-glow: var(--glow-violet);
  --shadow-gold: var(--glow-gold);
  --grad-aurora: var(--grad-primary);
}

/* ══════════════════════════════════════════════════════════════════════════
   BASE — typography, background, scrollbar, selection
   ══════════════════════════════════════════════════════════════════════════ */
html, body {
  font-family: 'Sora', system-ui, -apple-system, sans-serif !important;
  font-feature-settings: 'ss01', 'cv11';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--ink-900) !important;
  letter-spacing: -0.006em;
}

body {
  background:
    radial-gradient(ellipse 1400px 700px at 5% -5%,  rgba(109,60,240,0.11), transparent 60%),
    radial-gradient(ellipse 900px  500px at 105% 0%,  rgba(99,102,241,0.09), transparent 60%),
    radial-gradient(ellipse 700px  500px at 50% 110%, rgba(245,158,11,0.07), transparent 55%),
    linear-gradient(180deg, #F0F2FA 0%, #E9ECF7 100%) !important;
  background-attachment: fixed;
  min-height: 100vh;
}

/* Premium grain overlay */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.028;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: multiply;
}

.app-shell, .sidebar, .main-content, #app-page, #login-page,
.page-header, header, nav, main, .page, .page-content { position: relative; z-index: 1; }

::selection {
  background: rgba(109,60,240,0.2);
  color: var(--ink-950);
}

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(30,35,88,0.10);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(109,60,240,0.3);
  background-clip: content-box;
}

/* ══════════════════════════════════════════════════════════════════════════
   TYPOGRAPHY
   ══════════════════════════════════════════════════════════════════════════ */
h1, h2, h3, h4 { letter-spacing: -0.025em; }
.serif   { font-family: 'Instrument Serif', serif !important; font-weight: 400; letter-spacing: -0.015em; }
.mono    { font-family: 'JetBrains Mono', monospace !important; }
.display { font-family: 'Instrument Serif', serif !important; font-weight: 400; font-style: italic; }

.page-header-title {
  font-family: 'Instrument Serif', serif !important;
  font-weight: 400 !important;
  font-style: italic;
  letter-spacing: -0.025em !important;
  font-size: 2rem !important;
  color: var(--ink-900) !important;
  line-height: 1.15;
}

/* ══════════════════════════════════════════════════════════════════════════
   LOGIN PAGE — cinematic midnight hero
   ══════════════════════════════════════════════════════════════════════════ */
#login-page {
  background: var(--grad-login) !important;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}

/* Animated aurora orb #1 */
#login-page::before {
  content: "";
  position: absolute;
  width: 700px; height: 700px;
  top: -200px; left: -150px;
  background: radial-gradient(circle, rgba(109,60,240,0.35) 0%, rgba(67,56,202,0.15) 45%, transparent 70%);
  border-radius: 50%;
  animation: loginOrb1 12s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

/* Animated aurora orb #2 */
#login-page::after {
  content: "";
  position: absolute;
  width: 500px; height: 500px;
  bottom: -120px; right: -100px;
  background: radial-gradient(circle, rgba(245,158,11,0.22) 0%, rgba(251,191,36,0.10) 45%, transparent 70%);
  border-radius: 50%;
  animation: loginOrb2 15s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes loginOrb1 {
  0%, 100% { transform: translate(0,0) scale(1); }
  33%      { transform: translate(60px,-40px) scale(1.1); }
  66%      { transform: translate(-30px,50px) scale(0.95); }
}
@keyframes loginOrb2 {
  0%, 100% { transform: translate(0,0) scale(1); }
  40%      { transform: translate(-50px,30px) scale(1.08); }
  70%      { transform: translate(40px,-20px) scale(0.92); }
}

#login-page > * { position: relative; z-index: 1; }

/* Login card — glassmorphic with soft border glow */
#login-page .login-card {
  background: rgba(255,255,255,0.96) !important;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.6) !important;
  border-radius: 24px !important;
  box-shadow:
    0 0 0 1px rgba(109,60,240,0.08),
    0 40px 80px -20px rgba(5,6,26,0.55),
    0 0 80px -20px rgba(109,60,240,0.25) !important;
  padding: 2.5rem 2.25rem !important;
  animation: loginCardRise 0.7s var(--ease-out) backwards;
}

@keyframes loginCardRise {
  from { opacity: 0; transform: translateY(24px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

#login-page .logo-icon {
  font-size: 3rem;
  display: block;
  filter: drop-shadow(0 0 16px rgba(109,60,240,0.5));
}
#login-page .logo-text {
  font-family: 'Instrument Serif', serif !important;
  font-weight: 400 !important;
  font-size: 2rem !important;
  letter-spacing: -0.03em !important;
  background: var(--grad-primary);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
#login-page .logo-sub {
  color: var(--ink-400) !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase;
  font-size: 10px !important;
  font-weight: 600 !important;
}
#login-page h2 {
  font-family: 'Sora', sans-serif !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  color: var(--ink-500) !important;
  letter-spacing: -0.005em;
}

/* Signup link */
#login-page a {
  color: var(--violet-600) !important;
  font-weight: 700 !important;
  text-decoration: none;
  background: var(--grad-primary);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: opacity 0.15s;
}
#login-page a:hover { opacity: 0.8; }

/* ══════════════════════════════════════════════════════════════════════════
   SIDEBAR — obsidian with gradient depth
   ══════════════════════════════════════════════════════════════════════════ */
.sidebar {
  background: var(--grad-sidebar) !important;
  color: var(--ink-200) !important;
  box-shadow: inset -1px 0 0 rgba(255,255,255,0.04), 4px 0 32px rgba(5,6,26,0.3) !important;
  border-right: none !important;
}

/* Sidebar logo area — subtle violet shimmer */
.sidebar-logo, .sidebar-header, .sidebar-brand {
  color: #fff !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  position: relative;
  overflow: hidden;
}
.sidebar-logo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 200px 80px at 50% 0%, rgba(109,60,240,0.3), transparent 70%);
  pointer-events: none;
}

.sidebar-logo-text, .sidebar-title {
  font-family: 'Instrument Serif', serif !important;
  font-weight: 400 !important;
  font-size: 1.35rem !important;
  letter-spacing: -0.02em !important;
  color: #fff !important;
}
.sidebar-logo-sub {
  color: rgba(170,178,220,0.6) !important;
  font-size: 9px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
}

/* Sidebar section labels */
.sidebar-section-label, .sidebar-label {
  color: rgba(170,178,220,0.45) !important;
  font-size: 9.5px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
}

/* Sidebar nav items */
.sidebar-item {
  color: rgba(170,178,220,0.72) !important;
  border-radius: 10px !important;
  transition: all 0.22s var(--ease-out) !important;
  position: relative;
  overflow: hidden;
}
.sidebar-item:hover {
  background: rgba(255,255,255,0.06) !important;
  color: #fff !important;
  transform: translateX(2px);
}
.sidebar-item.active {
  background: linear-gradient(135deg, rgba(109,60,240,0.22) 0%, rgba(67,56,202,0.14) 100%) !important;
  color: #fff !important;
  box-shadow: inset 0 0 0 1px rgba(139,92,246,0.25), 0 4px 12px -4px rgba(109,60,240,0.3) !important;
}
/* Gold active pip */
.sidebar-item.active::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 20px;
  background: linear-gradient(180deg, var(--gold-400), var(--gold-500));
  border-radius: 0 3px 3px 0;
  box-shadow: 0 0 14px rgba(251,191,36,0.7), 0 0 4px rgba(251,191,36,0.9);
}
/* Item hover shimmer */
.sidebar-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.03), transparent);
  opacity: 0;
  transition: opacity 0.3s;
}
.sidebar-item:hover::after { opacity: 1; }

/* Sidebar user pod */
.user-info, .sidebar-user, .sidebar-user-pod {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 14px !important;
}
#sb-user-name, .sb-user-name, .sidebar-user-name {
  color: #fff !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
}
#sb-user-role, .sb-user-role, .sidebar-user-role {
  color: rgba(170,178,220,0.55) !important;
  font-size: 10px !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}

/* Sidebar badge */
.sidebar-badge {
  background: var(--rose-500) !important;
  color: #fff !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  font-size: 9.5px !important;
  box-shadow: 0 0 10px rgba(244,63,94,0.5) !important;
}

/* Sidebar logout */
.btn-logout, .sidebar-logout {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: rgba(170,178,220,0.65) !important;
  border-radius: 10px !important;
  transition: all 0.2s var(--ease-out) !important;
}
.btn-logout:hover, .sidebar-logout:hover {
  background: rgba(244,63,94,0.12) !important;
  border-color: rgba(244,63,94,0.28) !important;
  color: #FCA5A5 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   TOPBAR (mobile) — deep aurora gradient
   ══════════════════════════════════════════════════════════════════════════ */
.topbar {
  background: linear-gradient(135deg, #0B0D2E 0%, #1E2358 60%, #2D3785 100%) !important;
  border-bottom: 1px solid rgba(109,60,240,0.25) !important;
  box-shadow: 0 2px 20px rgba(5,6,26,0.35) !important;
}
.topbar-logo {
  font-family: 'Instrument Serif', serif !important;
  font-weight: 400 !important;
  font-size: 1.2rem !important;
  letter-spacing: -0.02em !important;
}
.user-badge {
  background: rgba(109,60,240,0.3) !important;
  border: 1px solid rgba(139,92,246,0.4) !important;
  color: var(--violet-300) !important;
  font-weight: 700 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   PAGE HEADER — italic serif title with gradient accent line
   ══════════════════════════════════════════════════════════════════════════ */
.page-header {
  position: relative;
  padding-bottom: 1.25rem !important;
  border-bottom: 1px solid var(--border) !important;
  margin-bottom: 1.75rem !important;
}
.page-header::after {
  content: "";
  position: absolute;
  bottom: -1px; left: 0;
  width: 72px; height: 2px;
  background: var(--grad-primary);
  border-radius: 2px;
  box-shadow: var(--glow-violet);
}

/* ══════════════════════════════════════════════════════════════════════════
   CARDS — layered depth with glass sheen
   ══════════════════════════════════════════════════════════════════════════ */
.card, .stat-card, .kpi-card, .kpi-card-v2, .panel, .skeleton-card {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 20px !important;
  box-shadow: var(--shadow-sm) !important;
  transition:
    transform .3s var(--ease-out),
    box-shadow .3s var(--ease-out),
    border-color .3s var(--ease-out) !important;
  position: relative;
  overflow: hidden;
}
/* Top sheen */
.card::before, .stat-card::before, .kpi-card::before,
.kpi-card-v2::before, .panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.75) 0%, rgba(255,255,255,0) 25%);
  pointer-events: none;
  border-radius: inherit;
  z-index: 0;
}
.card > *, .stat-card > *, .kpi-card > *, .kpi-card-v2 > *, .panel > * {
  position: relative; z-index: 1;
}
.card:hover, .stat-card:hover, .kpi-card:hover, .kpi-card-v2:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow-lg) !important;
  border-color: rgba(109,60,240,0.15) !important;
}

/* KPI v2 — colored left accent bar */
.kpi-card-v2::after {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--grad-primary);
  border-radius: 20px 0 0 20px;
  z-index: 2;
}
.kpi-card-v2.kpi-purple::after   { background: var(--grad-primary);  box-shadow: var(--glow-violet); }
.kpi-card-v2.kpi-gold::after,
.kpi-card-v2.kpi-amber::after    { background: var(--grad-gold);     box-shadow: var(--glow-gold); }
.kpi-card-v2.kpi-emerald::after,
.kpi-card-v2.kpi-green::after    { background: var(--grad-emerald);  box-shadow: var(--glow-emerald); }
.kpi-card-v2.kpi-rose::after,
.kpi-card-v2.kpi-red::after      { background: var(--grad-rose);     box-shadow: var(--glow-rose); }
.kpi-card-v2.kpi-cyan::after,
.kpi-card-v2.kpi-blue::after     { background: var(--grad-cyan); }

/* Hero card */
.kpi-hero, .stat-hero, .hero-card {
  background: var(--grad-hero) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  box-shadow: var(--shadow-xl) !important;
  position: relative;
  overflow: hidden;
}
.kpi-hero::before, .stat-hero::before, .hero-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 500px 180px at 10% 0%, rgba(139,92,246,0.5), transparent 60%),
    radial-gradient(ellipse 400px 200px at 90% 100%, rgba(251,191,36,0.2), transparent 60%);
  border-radius: inherit;
  pointer-events: none;
}
.kpi-hero *, .stat-hero *, .hero-card * { color: inherit !important; }

/* Big KPI numbers */
.kpi-card .stat-value, .kpi-card-v2 .stat-value,
.kpi-card-v2 .kpi-value, .stat-card .stat-number,
.dash-stat-value, .dash-kpi-value {
  font-family: 'JetBrains Mono', 'Instrument Serif', monospace !important;
  font-weight: 600 !important;
  font-size: 2.1rem !important;
  letter-spacing: -0.03em !important;
  color: var(--ink-900) !important;
  line-height: 1;
}
.kpi-hero .stat-value, .stat-hero .stat-value, .hero-card .stat-value {
  color: #fff !important;
  font-size: 2.6rem !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════════════════════════════════ */
.btn-add, .btn-save, .btn-primary {
  background: var(--grad-primary) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  font-family: 'Sora', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  box-shadow: var(--glow-violet) !important;
  transition: all 0.22s var(--ease-out) !important;
  position: relative;
  overflow: hidden;
}
/* Sheen highlight */
.btn-add::before, .btn-save::before, .btn-primary::before {
  content: "";
  position: absolute;
  inset: 0 0 50% 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.22), transparent);
  border-radius: 10px 10px 0 0;
  pointer-events: none;
}
.btn-add:hover, .btn-save:hover, .btn-primary:hover {
  background: var(--grad-primary-hover) !important;
  transform: translateY(-2px);
  box-shadow: 0 16px 40px -8px rgba(109,60,240,0.6) !important;
}
.btn-add:active, .btn-save:active, .btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px -4px rgba(109,60,240,0.4) !important;
}

.btn-secondary, .btn-cancel, .btn-ghost {
  background: var(--bg-surface) !important;
  color: var(--ink-700) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  font-family: 'Sora', sans-serif !important;
  font-weight: 500 !important;
  transition: all 0.18s var(--ease-out) !important;
}
.btn-secondary:hover, .btn-cancel:hover, .btn-ghost:hover {
  border-color: rgba(109,60,240,0.3) !important;
  color: var(--violet-600) !important;
  background: var(--brand-light) !important;
  box-shadow: 0 0 0 3px rgba(109,60,240,0.06);
}

.btn-danger {
  background: var(--grad-rose) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  font-family: 'Sora', sans-serif !important;
  font-weight: 600 !important;
  box-shadow: var(--glow-rose) !important;
  transition: all 0.2s var(--ease-out) !important;
}
.btn-danger:hover { transform: translateY(-1px); opacity: 0.92; }

/* ══════════════════════════════════════════════════════════════════════════
   FORMS — clean inputs with aurora focus ring
   ══════════════════════════════════════════════════════════════════════════ */
.form-input, input[type="text"], input[type="email"],
input[type="password"], input[type="number"],
input[type="date"], input[type="search"], textarea, select {
  font-family: 'Sora', sans-serif !important;
  background: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  color: var(--ink-800) !important;
  transition: all 0.18s var(--ease-out) !important;
}
.form-input:focus, input:focus, textarea:focus, select:focus {
  outline: none !important;
  border-color: var(--violet-500) !important;
  box-shadow: 0 0 0 4px rgba(109,60,240,0.11), 0 2px 8px rgba(109,60,240,0.08) !important;
}
.form-input:hover:not(:focus), input[type="text"]:hover:not(:focus),
input[type="email"]:hover:not(:focus) {
  border-color: var(--border-strong) !important;
}
.form-input.error, input.error {
  border-color: var(--rose-500) !important;
  box-shadow: 0 0 0 4px rgba(244,63,94,0.10) !important;
}
.form-label {
  font-family: 'Sora', sans-serif !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  color: var(--ink-600) !important;
  letter-spacing: 0.01em !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   BADGES / CHIPS
   ══════════════════════════════════════════════════════════════════════════ */
.badge, .chip, .tag {
  font-family: 'Sora', sans-serif !important;
  font-weight: 700 !important;
  font-size: 10.5px !important;
  letter-spacing: 0.025em !important;
  border-radius: 999px !important;
  padding: 3px 10px !important;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.badge-ok, .badge-green   { background: #D1FAE5 !important; color: #047857 !important; }
.badge-low, .badge-orange { background: #FEF3C7 !important; color: #A16207 !important; }
.badge-out, .badge-red    { background: #FFE4E6 !important; color: #BE123C !important; }
.badge-blue               { background: #E0E7FF !important; color: #3730A3 !important; }
.badge-purple             { background: #EDE9FE !important; color: #5B21B6 !important; }
.badge-gray               { background: #E4E7F7 !important; color: #2D3785 !important; }

/* ══════════════════════════════════════════════════════════════════════════
   TABLES
   ══════════════════════════════════════════════════════════════════════════ */
table {
  background: var(--bg-surface) !important;
  border-radius: 16px !important;
  overflow: hidden;
  box-shadow: var(--shadow-sm) !important;
  border: 1px solid var(--border) !important;
}
thead th {
  background: linear-gradient(180deg, var(--bg-muted) 0%, var(--bg-raised) 100%) !important;
  color: var(--ink-500) !important;
  font-family: 'Sora', sans-serif !important;
  font-weight: 700 !important;
  font-size: 10.5px !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid var(--border) !important;
}
tbody td {
  border-bottom: 1px solid var(--border) !important;
  color: var(--ink-800) !important;
  font-size: 13px;
}
tbody tr:hover td {
  background: rgba(109,60,240,0.03) !important;
}
tbody tr:last-child td { border-bottom: none !important; }

/* ══════════════════════════════════════════════════════════════════════════
   MODALS — cinematic backdrop with glass card
   ══════════════════════════════════════════════════════════════════════════ */
#modal, .modal-overlay, .confirm-overlay {
  background: rgba(5,6,26,0.68) !important;
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
}
.modal-content, #modal > div, .modal, .confirm-box {
  background: var(--bg-surface) !important;
  border: 1px solid rgba(109,60,240,0.12) !important;
  border-radius: 24px !important;
  box-shadow: var(--shadow-xl), 0 0 0 1px rgba(255,255,255,0.5) inset !important;
  animation: modalPop 0.35s var(--ease-spring) backwards;
}
@keyframes modalPop {
  from { opacity: 0; transform: scale(0.94) translateY(12px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.modal-title, .confirm-title {
  font-family: 'Instrument Serif', serif !important;
  font-weight: 400 !important;
  font-style: italic;
  font-size: 1.45rem !important;
  letter-spacing: -0.025em !important;
  color: var(--ink-900) !important;
}
.modal-header {
  border-bottom: 1px solid var(--border) !important;
  padding-bottom: 1rem !important;
}
.modal-close {
  color: var(--ink-400) !important;
  border-radius: 8px !important;
  transition: all 0.15s !important;
}
.modal-close:hover {
  background: var(--danger-bg) !important;
  color: var(--rose-500) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   TOASTS
   ══════════════════════════════════════════════════════════════════════════ */
#toast-container {
  position: fixed !important;
  bottom: 1.25rem !important;
  right: 1.25rem !important;
  z-index: 9999 !important;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  align-items: flex-end;
}
.toast {
  font-family: 'Sora', sans-serif !important;
  border-radius: 14px !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: var(--shadow-lg) !important;
  border: 1px solid rgba(255,255,255,0.5) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  animation: toastSlide 0.35s var(--ease-spring) backwards;
}
@keyframes toastSlide {
  from { opacity: 0; transform: translateX(20px) scale(0.95); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}
.toast-success {
  background: rgba(236,253,245,0.96) !important;
  border-color: rgba(16,185,129,0.2) !important;
  color: #047857 !important;
}
.toast-error {
  background: rgba(255,240,243,0.96) !important;
  border-color: rgba(244,63,94,0.2) !important;
  color: #BE123C !important;
}
.toast-warning {
  background: rgba(255,251,235,0.96) !important;
  border-color: rgba(245,158,11,0.2) !important;
  color: #A16207 !important;
}
.toast-info {
  background: rgba(238,240,255,0.96) !important;
  border-color: rgba(99,102,241,0.2) !important;
  color: #3730A3 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   PILLS / PERIOD SELECTORS
   ══════════════════════════════════════════════════════════════════════════ */
.period-pill, .pill {
  font-family: 'Sora', sans-serif !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  letter-spacing: -0.005em;
  border-radius: 999px !important;
  padding: 6px 16px !important;
  border: 1px solid var(--border) !important;
  background: var(--bg-surface) !important;
  color: var(--ink-500) !important;
  cursor: pointer;
  transition: all 0.18s var(--ease-out) !important;
}
.period-pill:hover, .pill:hover {
  border-color: rgba(109,60,240,0.25) !important;
  color: var(--violet-600) !important;
}
.period-pill.active, .pill.active {
  background: var(--grad-primary) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 16px -4px rgba(109,60,240,0.45) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   BOTTOM NAV (mobile)
   ══════════════════════════════════════════════════════════════════════════ */
.bottom-nav, .mobile-nav {
  background: rgba(255,255,255,0.92) !important;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-top: 1px solid var(--border) !important;
  box-shadow: 0 -8px 32px -8px rgba(5,6,26,0.12) !important;
}
.bottom-nav .nav-item { transition: all 0.18s var(--ease-out) !important; }
.bottom-nav .nav-item.active,
.mobile-nav .nav-item.active {
  color: var(--violet-600) !important;
  font-weight: 700 !important;
}
.bottom-nav .nav-item.active .nav-icon {
  filter: drop-shadow(0 0 8px rgba(109,60,240,0.5));
}
.bottom-nav .nav-item.active::before {
  background: var(--grad-primary) !important;
  box-shadow: var(--glow-violet) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   SUBSCRIPTION BANNER
   ══════════════════════════════════════════════════════════════════════════ */
#subscription-banner.subscription-banner {
  font-family: 'Sora', sans-serif !important;
  font-weight: 500 !important;
  font-size: 13px !important;
}
#subscription-banner.tone-danger,
#subscription-banner.banner-danger {
  background: linear-gradient(135deg, #FFF0F3 0%, #FFE4E6 100%) !important;
  border-left: 4px solid var(--rose-500) !important;
  color: var(--rose-600) !important;
}
#subscription-banner.tone-warning,
#subscription-banner.banner-warning {
  background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%) !important;
  border-left: 4px solid var(--gold-500) !important;
  color: var(--gold-700) !important;
}
#subscription-banner.tone-info,
#subscription-banner.banner-info {
  background: linear-gradient(135deg, #EEF0FF 0%, #E0E7FF 100%) !important;
  border-left: 4px solid var(--violet-500) !important;
  color: var(--ink-700) !important;
}
.banner-cta {
  background: var(--grad-primary) !important;
  color: #fff !important;
  font-family: 'Sora', sans-serif !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  border: none !important;
  padding: 6px 14px !important;
  font-size: 12px !important;
  box-shadow: 0 4px 12px -4px rgba(109,60,240,0.4) !important;
  cursor: pointer;
  transition: opacity 0.15s !important;
}
.banner-cta:hover { opacity: 0.88; }

/* ══════════════════════════════════════════════════════════════════════════
   DASHBOARD — sparklines, donut, trend chips
   ══════════════════════════════════════════════════════════════════════════ */
.dash-spark-stroke { stroke: var(--violet-500) !important; }
.dash-spark-fill   { fill: rgba(109,60,240,0.08) !important; }
.kpi-trend-up   { color: var(--emerald-500) !important; font-weight: 700 !important; }
.kpi-trend-down { color: var(--rose-500) !important;    font-weight: 700 !important; }
.kpi-trend-flat { color: var(--ink-400) !important; }
.donut-center-value {
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 600 !important;
  color: var(--ink-900) !important;
  font-size: 1.8rem;
  letter-spacing: -0.03em;
}

/* ══════════════════════════════════════════════════════════════════════════
   EMPTY STATES
   ══════════════════════════════════════════════════════════════════════════ */
.empty-state {
  background: var(--bg-surface) !important;
  border: 2px dashed var(--ink-200) !important;
  border-radius: 24px !important;
}
.empty-title, .empty-state-title {
  font-family: 'Instrument Serif', serif !important;
  font-weight: 400 !important;
  font-style: italic;
  letter-spacing: -0.015em !important;
  color: var(--ink-800) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   ANIMATIONS — staggered page reveal
   ══════════════════════════════════════════════════════════════════════════ */
@keyframes auroraRise {
  from { opacity: 0; transform: translateY(10px) scale(0.99); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.kpi-card-v2, .stat-card, .panel {
  animation: auroraRise 0.45s var(--ease-out) backwards;
}
.kpi-card-v2:nth-child(1) { animation-delay: 0.04s; }
.kpi-card-v2:nth-child(2) { animation-delay: 0.08s; }
.kpi-card-v2:nth-child(3) { animation-delay: 0.12s; }
.kpi-card-v2:nth-child(4) { animation-delay: 0.16s; }
.kpi-card-v2:nth-child(5) { animation-delay: 0.20s; }
.kpi-card-v2:nth-child(6) { animation-delay: 0.24s; }

/* Sidebar items stagger on load */
@keyframes sidebarSlide {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}
.sidebar-item {
  animation: sidebarSlide 0.3s var(--ease-out) backwards;
}
.sidebar-item:nth-child(1)  { animation-delay: 0.05s; }
.sidebar-item:nth-child(2)  { animation-delay: 0.09s; }
.sidebar-item:nth-child(3)  { animation-delay: 0.13s; }
.sidebar-item:nth-child(4)  { animation-delay: 0.17s; }
.sidebar-item:nth-child(5)  { animation-delay: 0.21s; }
.sidebar-item:nth-child(6)  { animation-delay: 0.25s; }
.sidebar-item:nth-child(7)  { animation-delay: 0.29s; }
.sidebar-item:nth-child(8)  { animation-delay: 0.33s; }
.sidebar-item:nth-child(9)  { animation-delay: 0.37s; }
.sidebar-item:nth-child(10) { animation-delay: 0.41s; }
.sidebar-item:nth-child(11) { animation-delay: 0.45s; }
.sidebar-item:nth-child(12) { animation-delay: 0.49s; }

/* Aurora orb utility class */
@keyframes auroraShift {
  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
  33%       { transform: translate(50px, -40px) rotate(120deg) scale(1.08); }
  66%       { transform: translate(-35px, 45px) rotate(240deg) scale(0.94); }
}
.aurora-orb {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  animation: auroraShift 18s ease-in-out infinite;
  filter: blur(60px);
  opacity: 0.15;
  z-index: 0;
}