/* ==========================================================================
   SETVA — Financial Operating System For Housing Societies
   Design System & Styles
   ========================================================================== */

/* ---------- 1. Design Tokens ---------- */
:root {
  --primary: #2563EB;
  --primary-dark: #1D4ED8;
  --primary-light: #3B82F6;
  --secondary: #4F46E5;
  --success: #10B981;
  --success-dark: #059669;
  --warning: #F59E0B;
  --danger: #EF4444;

  --bg: #F8FAFC;
  --bg-alt: #F1F5F9;
  --card: #FFFFFF;
  --text: #0F172A;
  --text-secondary: #334155;
  --text-muted: #64748B;
  --border: #E2E8F0;
  --border-light: #F1F5F9;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  --shadow-xs: 0 1px 2px rgba(15,23,42,0.04);
  --shadow-sm: 0 1px 3px rgba(15,23,42,0.06), 0 1px 2px rgba(15,23,42,0.04);
  --shadow-md: 0 4px 6px -1px rgba(15,23,42,0.06), 0 2px 4px -2px rgba(15,23,42,0.04);
  --shadow-lg: 0 10px 15px -3px rgba(15,23,42,0.06), 0 4px 6px -4px rgba(15,23,42,0.04);
  --shadow-xl: 0 20px 25px -5px rgba(15,23,42,0.08), 0 8px 10px -6px rgba(15,23,42,0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(15,23,42,0.15);
  --shadow-primary: 0 4px 14px rgba(37,99,235,0.25);

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);

  --nav-height: 72px;
  --container-max: 1200px;
  --container-sm: 768px;
}

/* ---------- 2. Reset & Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nav-height) + 24px);
}

body {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font: inherit; color: inherit; }
input, select, textarea { font: inherit; color: inherit; }
ul { list-style: none; }
table { width: 100%; border-collapse: collapse; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--radius-sm); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.hidden { display: none !important; }
.landing-section { }
.admin-only { }
body.app-ready .landing-section { display: none !important; }
.in-view { opacity: 1 !important; transform: none !important; }

.container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
.container-sm { max-width: var(--container-sm); }

/* ---------- 3. Typography ---------- */
h1, h2, h3, h4 { font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; color: var(--text); }
h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); font-weight: 800; letter-spacing: -0.03em; }
h2 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); }
h3 { font-size: 1.25rem; }
p { color: var(--text-secondary); }

.text-gradient {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.section { padding: 100px 0; }

.section-label {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--primary);
  margin-bottom: 12px;
}

.section-title {
  margin-bottom: 16px;
  text-align: center;
}

.section-subtitle {
  text-align: center;
  font-size: 1.125rem;
  color: var(--text-muted);
  max-width: 560px;
  margin: 0 auto 56px;
}

/* ---------- 4. Buttons ---------- */
.btn-primary-lg, .btn-primary-sm, .btn-primary-full {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-primary);
  transition: transform var(--transition), box-shadow var(--transition), opacity var(--transition);
}
.btn-primary-lg { padding: 14px 32px; font-size: 1rem; }
.btn-primary-sm { padding: 10px 20px; font-size: 0.875rem; border-radius: var(--radius-md); }
.btn-primary-full { width: 100%; justify-content: center; padding: 14px; font-size: 1rem; border-radius: var(--radius-md); }
.btn-primary-lg:hover, .btn-primary-sm:hover, .btn-primary-full:hover { transform: scale(1.03); box-shadow: 0 6px 20px rgba(37,99,235,0.35); }
.btn-primary-lg:active, .btn-primary-sm:active, .btn-primary-full:active { transform: scale(0.98); }

.btn-outline-lg {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.btn-outline-lg:hover { border-color: var(--primary); color: var(--primary); transform: scale(1.03); box-shadow: var(--shadow-md); }

.btn-ghost {
  padding: 10px 20px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
  border-radius: var(--radius-full);
  transition: color var(--transition), background var(--transition);
}
.btn-ghost:hover { color: var(--primary); background: rgba(37,99,235,0.06); }

.hero-demo-btn {
  text-decoration: none;
  background: rgba(37,99,235,0.06);
  border-color: rgba(37,99,235,0.2);
  color: var(--primary);
}
.hero-demo-btn:hover { background: rgba(37,99,235,0.1); border-color: var(--primary); color: var(--primary); }
[data-theme="dark"] .hero-demo-btn { background: rgba(37,99,235,0.12); border-color: rgba(37,99,235,0.3); }

.btn-outline-subtle {
  background: transparent;
  border-color: var(--border);
  color: var(--text-muted);
  font-weight: 500;
  padding: 12px 24px;
  font-size: 0.875rem;
}
.btn-outline-subtle:hover { border-color: var(--text-secondary); color: var(--text); }

.btn-secondary-sm, .btn-secondary-full {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--bg);
  border: 1px solid var(--border);
  transition: all var(--transition);
}
.btn-secondary-sm { padding: 8px 16px; font-size: 0.8125rem; border-radius: var(--radius-sm); }
.btn-secondary-full { width: 100%; justify-content: center; padding: 12px; font-size: 0.9375rem; border-radius: var(--radius-md); }
.btn-secondary-sm:hover, .btn-secondary-full:hover { border-color: var(--text-muted); background: var(--bg-alt); }

.btn-link {
  font-size: 0.875rem;
  color: var(--text-muted);
  transition: color var(--transition);
}
.btn-link:hover { color: var(--primary); }
.btn-link strong { color: var(--primary); font-weight: 600; }

.btn-whatsapp, .btn-whatsapp-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
  color: #fff;
  background: #25D366;
  border-radius: var(--radius-md);
  transition: transform var(--transition), opacity var(--transition);
}
.btn-whatsapp { width: 100%; padding: 12px; font-size: 0.9375rem; }
.btn-whatsapp-sm { padding: 8px 16px; font-size: 0.8125rem; border-radius: var(--radius-sm); }
.btn-whatsapp:hover, .btn-whatsapp-sm:hover { transform: scale(1.02); opacity: 0.9; }

.btn-white-lg {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--primary);
  background: #fff;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-lg);
  transition: transform var(--transition), box-shadow var(--transition);
}
.btn-white-lg:hover { transform: scale(1.03); box-shadow: var(--shadow-xl); }

.btn-ghost-white {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  font-size: 1rem;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
  border: 1.5px solid rgba(255,255,255,0.3);
  border-radius: var(--radius-full);
  transition: all var(--transition);
}
.btn-ghost-white:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.5); }

.btn-invite {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--primary);
  background: rgba(37,99,235,0.08);
  border-radius: var(--radius-sm);
  transition: all var(--transition);
}
.btn-invite:hover { background: rgba(37,99,235,0.14); }

/* ---------- 5. Navigation ---------- */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  background: rgba(248,250,252,0.8);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid transparent;
  transition: background var(--transition-slow), border-color var(--transition-slow), box-shadow var(--transition-slow);
}

.navbar.scrolled {
  background: rgba(255,255,255,0.92);
  border-bottom-color: var(--border);
  box-shadow: var(--shadow-sm);
}

.navbar-container {
  display: flex;
  align-items: center;
  gap: 40px;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px;
  width: 100%;
}

.navbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.brand-icon { color: var(--primary); }
.brand-name { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; color: var(--text); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
}

.nav-links a {
  display: block;
  padding: 8px 16px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  transition: color var(--transition), background var(--transition);
  position: relative;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 16px;
  right: 16px;
  height: 2px;
  background: var(--primary);
  border-radius: 1px;
  transform: scaleX(0);
  transition: transform var(--transition);
}

.nav-links a:hover { color: var(--text); }
.nav-links a:hover::after { transform: scaleX(1); }

.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.nav-auth { display: flex; align-items: center; gap: 8px; }
.nav-right-actions { display: flex; align-items: center; gap: 8px; }

.nav-bell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  transition: background var(--transition), color var(--transition);
}
.nav-bell:hover { background: var(--bg-alt); color: var(--text); }

.nav-bell-badge, .nav-pending-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: var(--danger);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-pending-badge { position: relative; top: auto; right: auto; margin-left: 4px; font-size: 10px; min-width: 16px; height: 16px; }

.btn-nav-user {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--bg-alt);
  border-radius: var(--radius-full);
  transition: background var(--transition);
}
.btn-nav-user:hover { background: var(--border); }

.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 24px;
  padding: 4px 0;
}

.menu-toggle span {
  display: block;
  height: 2px;
  background: var(--text);
  border-radius: 1px;
  transition: transform var(--transition), opacity var(--transition);
}

/* ---------- 6. Hero Section ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: var(--nav-height);
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.5;
  animation: blobFloat 20s ease-in-out infinite;
}

.hero-blob-1 { width: 600px; height: 600px; background: rgba(37,99,235,0.15); top: -100px; right: -100px; }
.hero-blob-2 { width: 500px; height: 500px; background: rgba(79,70,229,0.12); bottom: -50px; left: -100px; animation-delay: -7s; }
.hero-blob-3 { width: 300px; height: 300px; background: rgba(16,185,129,0.1); top: 40%; left: 30%; animation-delay: -14s; }

.hero-grid-pattern {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(37,99,235,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37,99,235,0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
}

.hero-container {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 60px 24px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px 6px 12px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--primary);
  background: rgba(37,99,235,0.08);
  border: 1px solid rgba(37,99,235,0.12);
  border-radius: var(--radius-full);
  margin-bottom: 24px;
}

.hero-title { margin-bottom: 20px; line-height: 1.1; }
.hero-subtitle { font-size: 1.125rem; color: var(--text-muted); line-height: 1.7; margin-bottom: 36px; max-width: 480px; }
.hero-actions { display: flex; gap: 16px; margin-bottom: 48px; flex-wrap: wrap; }
.hero-trust { display: flex; gap: 28px; flex-wrap: wrap; }
.hero-trust-item { display: flex; align-items: center; gap: 8px; font-size: 0.8125rem; font-weight: 500; color: var(--text-muted); }
.hero-trust-item svg { color: var(--success); flex-shrink: 0; }

/* Hero Mockup */
.hero-visual { position: relative; }

.hero-mockup {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2xl);
  overflow: hidden;
}

.mockup-chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
}

.mockup-dot { width: 10px; height: 10px; border-radius: 50%; }

.mockup-url {
  margin-left: 12px;
  font-size: 11px;
  color: var(--text-muted);
  background: var(--card);
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

.mockup-body { padding: 16px; }
.mockup-stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }

.mockup-stat-card {
  padding: 12px;
  background: var(--bg);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-light);
}

.mockup-stat-label { display: block; font-size: 10px; color: var(--text-muted); margin-bottom: 4px; }
.mockup-stat-value { display: block; font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 2px; font-variant-numeric: tabular-nums; }
.mockup-stat-badge { font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: var(--radius-full); }
.mockup-stat-badge.positive { color: var(--success-dark); background: rgba(16,185,129,0.1); }
.mockup-stat-badge.negative { color: var(--danger); background: rgba(239,68,68,0.1); }

.mockup-chart {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 80px;
  padding: 8px;
  background: var(--bg);
  border-radius: var(--radius-sm);
  margin-bottom: 14px;
}

.mockup-bar-group { display: flex; gap: 3px; flex: 1; align-items: flex-end; height: 100%; }
.mockup-bar { flex: 1; border-radius: 3px 3px 0 0; animation: barGrow 1s ease-out forwards; transform-origin: bottom; }
.mockup-bar.income { background: var(--primary); }
.mockup-bar.expense { background: var(--border); }

.mockup-transactions { display: flex; flex-direction: column; gap: 6px; }
.mockup-tx { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--bg); border-radius: var(--radius-sm); font-size: 11px; }
.mockup-tx-type { padding: 2px 6px; border-radius: 4px; font-size: 9px; font-weight: 700; text-transform: uppercase; }
.mockup-tx-type.in { background: rgba(16,185,129,0.1); color: var(--success-dark); }
.mockup-tx-type.out { background: rgba(239,68,68,0.1); color: var(--danger); }
.mockup-tx span:nth-child(2) { flex: 1; color: var(--text-secondary); font-weight: 500; }
.mockup-tx-amount { font-weight: 600; color: var(--text); }
.mockup-tx-amount.negative { color: var(--danger); }

/* Floating Cards */
.float-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 2;
}

.float-card-1 { top: -10px; right: -20px; animation: floatCard 6s ease-in-out infinite; }
.float-card-2 { bottom: 20px; left: -30px; animation: floatCard 6s ease-in-out infinite 3s; }

.float-card-icon { width: 40px; height: 40px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; }
.float-card-icon.green { background: rgba(16,185,129,0.1); color: var(--success); }
.float-card-icon.orange { background: rgba(245,158,11,0.1); color: var(--warning); }
.float-card-label { display: block; font-size: 11px; color: var(--text-muted); }
.float-card-value { display: block; font-size: 15px; font-weight: 700; color: var(--text); }

/* ---------- 7. Features Section ---------- */
.features-section { background: var(--bg); }
.features-section .section-label { text-align: center; display: block; }

.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

.feature-card {
  padding: 32px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  cursor: pointer;
}
.feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-xl); border-color: transparent; }

.feature-icon-wrap {
  width: 48px; height: 48px;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
}
.feature-icon-wrap.blue { background: linear-gradient(135deg, rgba(37,99,235,0.1), rgba(37,99,235,0.05)); color: var(--primary); }
.feature-icon-wrap.violet { background: linear-gradient(135deg, rgba(79,70,229,0.1), rgba(79,70,229,0.05)); color: var(--secondary); }
.feature-icon-wrap.emerald { background: linear-gradient(135deg, rgba(16,185,129,0.1), rgba(16,185,129,0.05)); color: var(--success); }
.feature-icon-wrap.amber { background: linear-gradient(135deg, rgba(245,158,11,0.1), rgba(245,158,11,0.05)); color: var(--warning); }
.feature-icon-wrap.rose { background: linear-gradient(135deg, rgba(239,68,68,0.1), rgba(239,68,68,0.05)); color: var(--danger); }
.feature-icon-wrap.cyan { background: linear-gradient(135deg, rgba(6,182,212,0.1), rgba(6,182,212,0.05)); color: #0891B2; }

.feature-card h3 { margin-bottom: 8px; font-size: 1.125rem; }
.feature-card p { font-size: 0.9375rem; color: var(--text-muted); margin-bottom: 16px; line-height: 1.6; }

.feature-link { display: inline-flex; align-items: center; gap: 6px; font-size: 0.875rem; font-weight: 600; color: var(--primary); transition: gap var(--transition); }
.feature-card:hover .feature-link { gap: 10px; }

/* ---------- 8. Dashboard Preview ---------- */
.dashboard-preview-section { background: var(--bg-alt); }
.dashboard-preview-section .section-label { text-align: center; display: block; }

.dashboard-preview { perspective: 1500px; }

.preview-window {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-2xl);
}

.preview-chrome {
  display: flex; align-items: center; gap: 6px;
  padding: 14px 18px;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
}

.preview-body { display: flex; min-height: 400px; }

.preview-sidebar {
  width: 200px; padding: 16px;
  border-right: 1px solid var(--border);
  background: var(--bg); flex-shrink: 0;
}
.preview-sidebar-brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.875rem; color: var(--text); padding: 8px; margin-bottom: 16px; }
.preview-sidebar-brand svg { color: var(--primary); }
.preview-sidebar-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; font-size: 0.8125rem; font-weight: 500; color: var(--text-muted); border-radius: var(--radius-sm); margin-bottom: 2px; }
.preview-sidebar-item.active { color: var(--primary); background: rgba(37,99,235,0.08); font-weight: 600; }

.preview-main { flex: 1; padding: 20px; overflow: hidden; }
.preview-stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }

.preview-stat { padding: 16px; border-radius: var(--radius-md); border: 1px solid var(--border-light); background: var(--card); }
.preview-stat-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.preview-stat-header span { font-size: 11px; color: var(--text-muted); font-weight: 500; }
.preview-stat-header svg { color: var(--text-muted); }
.preview-stat-value { display: block; font-size: 18px; font-weight: 700; color: var(--text); margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.preview-stat-change { font-size: 11px; font-weight: 500; }
.preview-stat-change.positive { color: var(--success); }
.preview-stat-change.negative { color: var(--danger); }
.blue-stat { border-left: 3px solid var(--primary); }
.red-stat { border-left: 3px solid var(--danger); }
.green-stat { border-left: 3px solid var(--success); }
.purple-stat { border-left: 3px solid var(--secondary); }

.preview-charts-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.preview-chart-card { padding: 16px; background: var(--bg); border-radius: var(--radius-md); border: 1px solid var(--border-light); }
.preview-chart-title { display: block; font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 12px; }
.preview-mini-chart { height: 80px; display: flex; align-items: flex-end; }
.preview-mini-bars { display: flex; gap: 6px; flex: 1; align-items: flex-end; height: 100%; }
.pmb { display: flex; gap: 2px; flex: 1; align-items: flex-end; height: 100%; }
.pmb-in { flex: 1; background: var(--primary); border-radius: 2px 2px 0 0; opacity: 0.8; }
.pmb-out { flex: 1; background: var(--border); border-radius: 2px 2px 0 0; }
.preview-line-chart { width: 100%; height: 80px; }

.preview-table-card { padding: 16px; background: var(--bg); border-radius: var(--radius-md); border: 1px solid var(--border-light); }
.preview-table-rows { display: flex; flex-direction: column; gap: 4px; }
.preview-table-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; background: var(--card); border-radius: var(--radius-sm); font-size: 11px; }
.ptx-badge { padding: 2px 8px; border-radius: 4px; font-size: 10px; font-weight: 600; }
.ptx-badge.in { background: rgba(16,185,129,0.1); color: var(--success-dark); }
.ptx-badge.out { background: rgba(239,68,68,0.1); color: var(--danger); }
.preview-table-row span:nth-child(2) { color: var(--text-muted); }
.preview-table-row span:nth-child(3) { flex: 1; color: var(--text-secondary); font-weight: 500; }
.ptx-amount { font-weight: 600; color: var(--success-dark); }
.ptx-amount.negative { color: var(--danger); }

/* DEPRECATED — section removed */
/* ---------- 9. How It Works ---------- */
.how-it-works-section { background: var(--bg); }
.how-it-works-section .section-label { text-align: center; display: block; }

.timeline { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; max-width: 960px; margin: 0 auto; }
.timeline-line { position: absolute; top: 32px; left: 12.5%; right: 12.5%; height: 2px; background: var(--border); }
.timeline-step { text-align: center; position: relative; }

.timeline-marker {
  width: 64px; height: 64px;
  margin: 0 auto 20px;
  display: flex; align-items: center; justify-content: center;
  background: var(--card); border: 2px solid var(--border); border-radius: 50%;
  position: relative; z-index: 1;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.timeline-step:hover .timeline-marker { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(37,99,235,0.1); }
.timeline-number { font-size: 1.25rem; font-weight: 800; color: var(--primary); }

.timeline-content { padding: 0 8px; }
.timeline-icon { width: 48px; height: 48px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.timeline-icon.blue { background: rgba(37,99,235,0.08); color: var(--primary); }
.timeline-icon.violet { background: rgba(79,70,229,0.08); color: var(--secondary); }
.timeline-icon.emerald { background: rgba(16,185,129,0.08); color: var(--success); }
.timeline-icon.amber { background: rgba(245,158,11,0.08); color: var(--warning); }
.timeline-content h3 { margin-bottom: 8px; font-size: 1.0625rem; }
.timeline-content p { font-size: 0.875rem; color: var(--text-muted); line-height: 1.6; }

/* ---------- 9b. Product Roadmap ---------- */
.roadmap-section { background: var(--bg-alt); }
.roadmap-section .section-label { text-align: center; display: block; }
.roadmap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.roadmap-phase {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.roadmap-phase:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.roadmap-phase-header {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 20px; padding-bottom: 16px;
  border-bottom: 1px solid var(--border-light);
}
.roadmap-phase-header h3 { flex: 1; font-size: 1.0625rem; font-weight: 700; }
.roadmap-phase-dot {
  width: 10px; height: 10px; border-radius: 50%;
}
.roadmap-phase-header.green .roadmap-phase-dot { background: var(--success); box-shadow: 0 0 8px rgba(16,185,129,0.4); }
.roadmap-phase-header.blue .roadmap-phase-dot { background: var(--primary); box-shadow: 0 0 8px rgba(37,99,235,0.4); }
.roadmap-phase-header.purple .roadmap-phase-dot { background: #8B5CF6; box-shadow: 0 0 8px rgba(139,92,246,0.4); }
.roadmap-phase-badge {
  padding: 3px 10px; border-radius: var(--radius-full);
  font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
}
.roadmap-phase-badge.green { background: rgba(16,185,129,0.1); color: var(--success); }
.roadmap-phase-badge.blue { background: rgba(37,99,235,0.1); color: var(--primary); }
.roadmap-phase-badge.purple { background: rgba(139,92,246,0.1); color: #8B5CF6; }
.roadmap-items { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.roadmap-item {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.875rem; color: var(--text-secondary); padding: 6px 0;
}
.roadmap-item svg { flex-shrink: 0; }
.rm-badge {
  padding: 2px 8px; border-radius: var(--radius-full);
  font-size: 0.625rem; font-weight: 700; flex-shrink: 0;
}
.rm-badge.blue { background: rgba(37,99,235,0.1); color: var(--primary); }
.rm-badge.purple { background: rgba(139,92,246,0.1); color: #8B5CF6; }
.roadmap-progress {
  height: 4px; background: var(--border-light); border-radius: 2px; overflow: hidden;
}
.roadmap-progress-fill {
  height: 100%; border-radius: 2px;
  background: linear-gradient(90deg, var(--success), #34D399);
  transition: width 1s ease;
}
.roadmap-phase:nth-child(2) .roadmap-progress-fill { background: linear-gradient(90deg, var(--primary), #60A5FA); }
.roadmap-phase:nth-child(3) .roadmap-progress-fill { background: linear-gradient(90deg, #8B5CF6, #A78BFA); }
[data-theme="dark"] .roadmap-phase { background: #141825; border-color: #1E293B; }

/* ---------- 10. Early Access ---------- */
.ea-section { background: var(--bg); position: relative; overflow: hidden; }
.ea-header { text-align: center; margin-bottom: 48px; }
.ea-label {
  display: inline-block; padding: 6px 18px; border-radius: var(--radius-full);
  font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  background: linear-gradient(135deg, rgba(37,99,235,0.1), rgba(139,92,246,0.1));
  color: var(--primary); margin-bottom: 20px;
}
.ea-title { font-size: 2.25rem; font-weight: 800; letter-spacing: -0.03em; color: var(--text); margin-bottom: 16px; }
.ea-subtitle { font-size: 1.0625rem; color: var(--text-muted); line-height: 1.7; max-width: 640px; margin: 0 auto; }
.ea-subtitle strong { color: var(--text); font-weight: 600; }

/* Offer Card */
.ea-offer-card {
  position: relative; max-width: 680px; margin: 0 auto 56px;
  border-radius: 24px; overflow: hidden;
  background: var(--card); border: 1.5px solid var(--border);
  box-shadow: 0 8px 40px rgba(0,0,0,0.06), 0 0 0 1px rgba(37,99,235,0.06);
  transition: transform var(--transition), box-shadow var(--transition);
}
.ea-offer-card:hover { transform: translateY(-4px); box-shadow: 0 16px 64px rgba(0,0,0,0.1), 0 0 0 1px rgba(37,99,235,0.12); }
.ea-offer-glow {
  position: absolute; top: -60%; left: 50%; transform: translateX(-50%);
  width: 600px; height: 400px; border-radius: 50%;
  background: radial-gradient(circle, rgba(37,99,235,0.08) 0%, transparent 70%);
  pointer-events: none;
}
.ea-offer-inner { position: relative; padding: 48px 44px; text-align: center; }

.ea-badges { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }
.ea-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 14px; border-radius: var(--radius-full);
  font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
}
.ea-badge-star { background: linear-gradient(135deg, #FEF3C7, #FDE68A); color: #92400E; }
.ea-badge-limit { background: rgba(37,99,235,0.08); color: var(--primary); }

.ea-price-block { margin-bottom: 32px; }
.ea-price {
  font-size: 3.5rem; font-weight: 900; letter-spacing: -0.04em;
  background: linear-gradient(135deg, var(--primary), #8B5CF6);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; line-height: 1.1;
}
.ea-price-sub { display: block; font-size: 1.125rem; font-weight: 500; color: var(--text-muted); margin-top: 4px; }

.ea-features-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px;
  text-align: left; margin-bottom: 36px; padding: 0 8px;
}
.ea-feature-item {
  display: flex; align-items: center; gap: 10px;
  font-size: 0.9375rem; color: var(--text-secondary); padding: 6px 0;
}
.ea-feature-item svg { flex-shrink: 0; }

.ea-offer-actions { display: flex; gap: 12px; justify-content: center; margin-bottom: 28px; }
.ea-btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 32px; font-size: 0.9375rem; font-weight: 600; font-family: inherit;
  color: #fff; background: linear-gradient(135deg, var(--primary), #4F46E5);
  border: none; border-radius: 12px; cursor: pointer;
  box-shadow: 0 4px 16px rgba(37,99,235,0.3);
  transition: transform var(--transition), box-shadow var(--transition);
}
.ea-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(37,99,235,0.4); }
.ea-btn-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 28px; font-size: 0.9375rem; font-weight: 500; font-family: inherit;
  color: var(--text-secondary); background: var(--bg); border: 1.5px solid var(--border);
  border-radius: 12px; cursor: pointer;
  transition: border-color var(--transition), color var(--transition);
}
.ea-btn-secondary:hover { border-color: var(--primary); color: var(--primary); }

.ea-trust-row { display: flex; align-items: center; justify-content: center; gap: 28px; flex-wrap: wrap; }
.ea-trust-item {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.8125rem; font-weight: 500; color: var(--text-muted);
}
.ea-trust-item svg { color: var(--success); width: 16px; height: 16px; }

/* Why Free Card */
.ea-why-card {
  max-width: 680px; margin: 0 auto 56px;
  padding: 36px 40px; border-radius: 20px;
  background: linear-gradient(135deg, rgba(37,99,235,0.03) 0%, rgba(139,92,246,0.03) 100%);
  border: 1px solid rgba(37,99,235,0.08);
}
.ea-why-icon { margin-bottom: 16px; color: var(--primary); }
.ea-why-card h3 { font-size: 1.25rem; font-weight: 700; color: var(--text); margin-bottom: 16px; letter-spacing: -0.01em; }
.ea-why-card p { font-size: 0.9375rem; color: var(--text-secondary); line-height: 1.7; margin-bottom: 12px; }
.ea-why-card p:last-child { margin-bottom: 0; }
.ea-why-card strong { color: var(--text); font-weight: 600; }

/* Benefits */
.ea-benefits-header { text-align: center; margin-bottom: 32px; }
.ea-benefits-header h3 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; color: var(--text); }
.ea-benefits-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 56px; }
.ea-benefit-card {
  padding: 28px; border-radius: 16px;
  background: var(--card); border: 1px solid var(--border);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.ea-benefit-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: rgba(37,99,235,0.15); }
.ea-benefit-icon { font-size: 1.75rem; margin-bottom: 14px; }
.ea-benefit-card h4 { font-size: 0.9375rem; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.ea-benefit-card p { font-size: 0.8125rem; color: var(--text-muted); line-height: 1.5; }

/* Social Proof Counters */
.ea-counters {
  display: flex; align-items: center; justify-content: center; gap: 0;
  flex-wrap: wrap; padding: 40px 0;
}
.ea-counter-item { text-align: center; padding: 12px 32px; }
.ea-counter-value {
  display: block; font-size: 2.5rem; font-weight: 800; letter-spacing: -0.03em;
  background: linear-gradient(135deg, var(--primary), #8B5CF6);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; line-height: 1.2;
}
.ea-counter-label {
  display: block; font-size: 0.8125rem; font-weight: 500;
  color: var(--text-muted); margin-top: 4px;
}
.ea-counter-divider {
  width: 1px; height: 40px; background: var(--border); flex-shrink: 0;
}
.ea-social-tagline {
  text-align: center; font-size: 0.875rem; color: var(--text-muted);
  font-style: italic; padding-bottom: 20px;
}

/* Founder Section */
.ea-founder-section { background: var(--bg-alt); }
.ea-founder-card {
  position: relative; padding: 48px; border-radius: 20px;
  background: var(--card); border: 1px solid var(--border);
  box-shadow: 0 4px 24px rgba(0,0,0,0.04);
}
.ea-founder-mark { position: absolute; top: 28px; right: 36px; }
.ea-founder-card h3 { font-size: 1.375rem; font-weight: 700; color: var(--text); margin-bottom: 24px; letter-spacing: -0.02em; }
.ea-founder-body p { font-size: 0.9375rem; color: var(--text-secondary); line-height: 1.8; margin-bottom: 16px; }
.ea-founder-body p:last-child { margin-bottom: 0; }
.ea-founder-body strong { color: var(--text); font-weight: 600; }
.ea-founder-sig { margin-top: 28px; font-size: 1rem; font-weight: 600; color: var(--text); }

/* ---------- Book Demo Section ---------- */
.demo-section { background: var(--bg-alt); }
.demo-section .section-label { text-align: center; display: block; }
.demo-section .section-subtitle { max-width: 560px; margin: 0 auto; }

.demo-features {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 28px;
  margin: 36px 0;
}
.demo-feat {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.875rem; font-weight: 500; color: var(--text-secondary);
}

.demo-steps {
  display: flex; align-items: center; justify-content: center; gap: 0;
  margin: 40px auto 48px; max-width: 700px;
}
.demo-step {
  display: flex; flex-direction: column; align-items: center; gap: 8px; flex-shrink: 0;
}
.demo-step-num {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8125rem; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
}
.demo-step span { font-size: 0.75rem; font-weight: 600; color: var(--text-secondary); white-space: nowrap; }
.demo-step-line {
  flex: 1; height: 2px; background: var(--border); min-width: 20px; margin: -12px 0 0;
}

.demo-form-wrap { max-width: 640px; margin: 0 auto; }
.demo-form-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 40px;
  box-shadow: var(--shadow-md);
}
.demo-form-card h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 8px; }
.demo-form-card > p { font-size: 0.875rem; color: var(--text-muted); margin-bottom: 28px; }
.demo-form { display: flex; flex-direction: column; gap: 16px; }
.demo-form-row { display: flex; gap: 16px; }
.demo-field { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.demo-field label {
  font-size: 0.8125rem; font-weight: 500; color: var(--text-secondary);
}
.demo-field input,
.demo-field select,
.demo-field textarea {
  padding: 11px 14px; font-size: 0.875rem;
  background: var(--bg); border: 1.5px solid var(--border);
  border-radius: var(--radius-md); outline: none; color: var(--text);
  transition: border-color var(--transition), box-shadow var(--transition);
  resize: vertical;
}
.demo-field input:focus,
.demo-field select:focus,
.demo-field textarea:focus {
  border-color: var(--primary); box-shadow: 0 0 0 4px rgba(37,99,235,0.1);
}
.demo-field input::placeholder,
.demo-field textarea::placeholder { color: var(--text-muted); }
.demo-field select { cursor: pointer; }
.demo-submit-btn { width: 100%; justify-content: center; margin-top: 4px; }

[data-theme="dark"] .demo-form-card { background: #141825; border-color: #1E293B; }
[data-theme="dark"] .demo-field input,
[data-theme="dark"] .demo-field select,
[data-theme="dark"] .demo-field textarea { background: #0F172A; border-color: #334155; color: #F1F5F9; }

.demo-success {
  text-align: center; padding: 48px 32px;
  max-width: 640px; margin: 0 auto;
}
.demo-success-icon {
  margin-bottom: 20px;
  animation: demoSuccessPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes demoSuccessPop {
  from { opacity: 0; transform: scale(0.6); }
  to { opacity: 1; transform: scale(1); }
}
.demo-success h3 { font-size: 1.5rem; font-weight: 800; margin-bottom: 12px; color: var(--text); }
.demo-success p { font-size: 1rem; color: var(--text-muted); margin-bottom: 24px; }

/* Why Book a Demo */
.demo-why-header { text-align: center; margin: 60px 0 28px; }
.demo-why-header h3 { font-size: 1.375rem; font-weight: 700; letter-spacing: -0.02em; }
.demo-why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.demo-why-card {
  padding: 24px; border-radius: var(--radius-md);
  background: var(--card); border: 1px solid var(--border);
  text-align: center;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.demo-why-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: rgba(37,99,235,0.15); }
.demo-why-icon { color: var(--primary); margin-bottom: 12px; display: flex; justify-content: center; }
.demo-why-card h4 { font-size: 0.9375rem; font-weight: 600; margin-bottom: 6px; }
.demo-why-card p { font-size: 0.8125rem; color: var(--text-muted); line-height: 1.5; }
[data-theme="dark"] .demo-why-card { background: #141825; border-color: #1E293B; }

/* ---------- Community Roadmap & Voting ---------- */
.vote-section { background: var(--bg); overflow: hidden; }
.vote-section .section-label { text-align: center; display: block; }

.vote-columns {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  margin-top: 48px; align-items: start;
}
.vote-col {
  border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition);
}
.vote-col:hover { box-shadow: var(--shadow-lg); }

.vote-col-header {
  display: flex; align-items: center; gap: 10px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border-light);
}
.vote-col-header.planned { background: linear-gradient(135deg, rgba(37,99,235,0.04), rgba(37,99,235,0.08)); }
.vote-col-header.in-progress { background: linear-gradient(135deg, rgba(16,185,129,0.04), rgba(16,185,129,0.08)); }
.vote-col-header.consideration { background: linear-gradient(135deg, rgba(139,92,246,0.04), rgba(139,92,246,0.08)); }
.vote-col-icon { font-size: 1.125rem; line-height: 1; }
.vote-col-header h3 { flex: 1; font-size: 0.9375rem; font-weight: 700; }
.vote-col-count {
  font-size: 0.6875rem; font-weight: 600; color: var(--text-muted);
  padding: 3px 10px; border-radius: var(--radius-full);
  background: var(--bg-alt);
}
.vote-col-body { padding: 12px; display: flex; flex-direction: column; gap: 10px; }

.vote-card {
  padding: 16px; border-radius: var(--radius-md);
  background: var(--bg);
  border: 1px solid transparent;
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.vote-card:hover { transform: translateY(-2px); border-color: var(--border); box-shadow: var(--shadow-sm); }
.vote-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.vote-card-icon {
  width: 36px; height: 36px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
}
.vote-card-icon.blue { background: rgba(37,99,235,0.08); color: var(--primary); }
.vote-card-icon.green { background: rgba(16,185,129,0.08); color: var(--success); }
.vote-card-icon.violet { background: rgba(139,92,246,0.08); color: #8B5CF6; }
.vote-card-icon.amber { background: rgba(245,158,11,0.08); color: var(--warning); }
.vote-card h4 { font-size: 0.875rem; font-weight: 600; margin-bottom: 6px; }
.vote-card p { font-size: 0.8125rem; color: var(--text-muted); line-height: 1.5; margin-bottom: 12px; }

.vote-badge {
  padding: 3px 10px; border-radius: var(--radius-full);
  font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
}
.vote-badge.planned { background: rgba(37,99,235,0.08); color: var(--primary); }
.vote-badge.in-progress { background: rgba(16,185,129,0.08); color: var(--success); }
.vote-badge.research { background: rgba(139,92,246,0.08); color: #8B5CF6; }
.vote-badge.coming-soon { background: rgba(245,158,11,0.08); color: var(--warning); }
.vote-badge.released { background: rgba(16,185,129,0.12); color: var(--success-dark); }

.vote-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; font-size: 0.75rem; font-weight: 600;
  color: var(--text-muted); background: var(--card);
  border: 1px solid var(--border); border-radius: var(--radius-full);
  cursor: pointer; font-family: inherit;
  transition: all var(--transition);
}
.vote-btn:hover { border-color: var(--primary); color: var(--primary); background: rgba(37,99,235,0.04); }
.vote-btn.voted {
  background: rgba(16,185,129,0.08); border-color: rgba(16,185,129,0.2);
  color: var(--success); pointer-events: none;
}
.vote-btn.voted svg { stroke: var(--success); }

/* Vote Toast */
.vote-toast {
  position: fixed; bottom: 32px; left: 50%; transform: translateX(-50%) translateY(20px);
  display: flex; align-items: center; gap: 10px;
  padding: 14px 24px; border-radius: var(--radius-full);
  background: var(--card); border: 1px solid var(--border);
  box-shadow: var(--shadow-xl);
  font-size: 0.875rem; font-weight: 500; color: var(--text);
  z-index: 1000; opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.vote-toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.vote-toast.hidden { display: none; }

/* Timeline */
.vote-tl-header { text-align: center; margin: 72px 0 32px; }
.vote-tl-header h3 { font-size: 1.375rem; font-weight: 700; letter-spacing: -0.02em; }
.vote-tl {
  position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  max-width: 900px; margin: 0 auto 48px; padding: 0 20px;
}
.vote-tl-track {
  position: absolute; top: 14px; left: 12.5%; right: 12.5%;
  height: 3px; background: var(--border);
  border-radius: 2px;
}
.vote-tl-track::before {
  content: ''; position: absolute; top: 0; left: 0;
  width: 30%; height: 100%; border-radius: 2px;
  background: linear-gradient(90deg, var(--success), var(--primary));
}
.vote-tl-item { position: relative; text-align: center; z-index: 1; }
.vote-tl-dot {
  width: 28px; height: 28px; border-radius: 50%;
  margin: 0 auto 12px; border: 3px solid var(--border);
  background: var(--card);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.vote-tl-dot.active {
  border-color: var(--success); background: var(--success);
  box-shadow: 0 0 0 4px rgba(16,185,129,0.15);
}
.vote-tl-dot.upcoming {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(37,99,235,0.1);
}
.vote-tl-dot.future { border-color: var(--border); }
.vote-tl-label {
  font-size: 0.8125rem; font-weight: 700; color: var(--text);
  margin-bottom: 12px;
}
.vote-tl-card {
  text-align: left; padding: 16px;
  background: var(--bg-alt); border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
}
.vote-tl-badge {
  display: inline-block; padding: 2px 8px; border-radius: var(--radius-full);
  font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  margin-bottom: 10px;
}
.vote-tl-badge.released { background: rgba(16,185,129,0.1); color: var(--success); }
.vote-tl-badge.in-progress { background: rgba(37,99,235,0.1); color: var(--primary); }
.vote-tl-badge.planned { background: rgba(245,158,11,0.1); color: var(--warning); }
.vote-tl-badge.research { background: rgba(139,92,246,0.1); color: #8B5CF6; }
.vote-tl-card ul { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.vote-tl-card li {
  font-size: 0.8125rem; color: var(--text-secondary);
  padding-left: 16px; position: relative;
}
.vote-tl-card li::before {
  content: ''; position: absolute; left: 0; top: 7px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--border);
}
.vote-tl-item:first-child .vote-tl-card li::before { background: var(--success); }
.vote-tl-item:nth-child(2) .vote-tl-card li::before { background: var(--primary); }

/* Founder Note */
.vote-founder {
  max-width: 640px; margin: 0 auto 48px;
  padding: 28px 32px; border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(37,99,235,0.03), rgba(139,92,246,0.03));
  border: 1px solid rgba(37,99,235,0.08);
  text-align: center;
}
.vote-founder svg { margin: 0 auto 12px; display: block; }
.vote-founder p { font-size: 0.9375rem; color: var(--text-secondary); line-height: 1.7; margin-bottom: 8px; }
.vote-founder strong { color: var(--text); font-weight: 600; }
.vote-founder-sig { font-size: 0.875rem; font-weight: 600; color: var(--text); }

/* Vote CTA */
.vote-cta { text-align: center; padding-top: 8px; }
.vote-cta h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 8px; }
.vote-cta p { font-size: 0.9375rem; color: var(--text-muted); margin-bottom: 24px; }
.vote-cta-actions { display: flex; gap: 12px; justify-content: center; }

/* Dark mode */
[data-theme="dark"] .vote-col { background: #141825; border-color: #1E293B; }
[data-theme="dark"] .vote-col-header.planned { background: linear-gradient(135deg, rgba(37,99,235,0.08), rgba(37,99,235,0.12)); }
[data-theme="dark"] .vote-col-header.in-progress { background: linear-gradient(135deg, rgba(16,185,129,0.08), rgba(16,185,129,0.12)); }
[data-theme="dark"] .vote-col-header.consideration { background: linear-gradient(135deg, rgba(139,92,246,0.08), rgba(139,92,246,0.12)); }
[data-theme="dark"] .vote-card { background: rgba(15,23,42,0.5); }
[data-theme="dark"] .vote-card:hover { border-color: #334155; }
[data-theme="dark"] .vote-btn { background: #1E293B; border-color: #334155; }
[data-theme="dark"] .vote-tl-card { background: #141825; border-color: #1E293B; }
[data-theme="dark"] .vote-tl-dot { background: #141825; }
[data-theme="dark"] .vote-tl-dot.active { background: var(--success); }
[data-theme="dark"] .vote-founder { background: linear-gradient(135deg, rgba(37,99,235,0.06), rgba(139,92,246,0.06)); border-color: rgba(37,99,235,0.12); }
[data-theme="dark"] .vote-toast { background: #1E293B; border-color: #334155; }

/* ---------- Why Setva Section ---------- */
.why-section { background: var(--bg); }
.why-section .section-label { text-align: center; display: block; }
.why-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: start; gap: 0; margin-bottom: 56px; }
.why-step {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 32px 28px; text-align: center; position: relative; transition: box-shadow var(--transition), border-color var(--transition);
}
.why-step:hover { box-shadow: var(--shadow-md); }
.why-step-icon {
  width: 56px; height: 56px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 16px;
}
.why-step-icon.danger { background: rgba(239,68,68,0.1); color: var(--danger); }
.why-step-icon.primary { background: rgba(37,99,235,0.1); color: var(--primary); }
.why-step-icon.success { background: rgba(16,185,129,0.1); color: var(--success); }
.why-step h3 { font-size: 1.125rem; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.why-step p { font-size: 0.875rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 16px; }
.why-tags { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.why-tags span {
  font-size: 0.6875rem; font-weight: 600; padding: 4px 10px;
  background: var(--bg-alt); color: var(--text-muted); border-radius: var(--radius-full);
  border: 1px solid var(--border-light);
}
.why-tags.solution span { background: rgba(37,99,235,0.08); color: var(--primary); border-color: rgba(37,99,235,0.15); }
.why-tags.result span { background: rgba(16,185,129,0.08); color: var(--success); border-color: rgba(16,185,129,0.15); }
.why-arrow {
  display: flex; align-items: center; justify-content: center; align-self: center; color: var(--text-muted); padding: 0 8px;
}

.trust-bar {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 32px;
  padding: 24px 32px; background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.trust-bar-item { display: flex; align-items: center; gap: 8px; font-size: 0.8125rem; font-weight: 500; color: var(--text-secondary); }
.trust-bar-item svg { color: var(--primary); flex-shrink: 0; }

[data-theme="dark"] .why-step { background: #141825; border-color: #1E293B; }
[data-theme="dark"] .why-tags span { background: #1E293B; border-color: #334155; color: #94A3B8; }
[data-theme="dark"] .why-tags.solution span { background: rgba(37,99,235,0.12); color: #93C5FD; border-color: rgba(37,99,235,0.2); }
[data-theme="dark"] .why-tags.result span { background: rgba(16,185,129,0.12); color: #6EE7B7; border-color: rgba(16,185,129,0.2); }
[data-theme="dark"] .trust-bar { background: #141825; border-color: #1E293B; }

/* ---------- Financial OS / Comparison Section ---------- */
.compare-section { background: var(--bg-alt); }
.compare-section .section-label { text-align: center; display: block; }
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; max-width: 900px; margin: 0 auto; }
.compare-card {
  border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border);
  transition: box-shadow var(--transition), transform var(--transition);
}
.compare-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.compare-header {
  padding: 24px 28px; font-size: 1.125rem; font-weight: 700; display: flex; align-items: center; gap: 10px;
}
.compare-header.old { background: #FEF2F2; color: #991B1B; border-bottom: 2px solid #FECACA; }
.compare-header.new { background: #EFF6FF; color: #1E40AF; border-bottom: 2px solid #BFDBFE; }
.compare-body { padding: 20px 28px; background: var(--card); display: flex; flex-direction: column; gap: 0; }
.compare-item {
  display: flex; align-items: center; gap: 12px; padding: 14px 0;
  font-size: 0.9375rem; color: var(--text-secondary); border-bottom: 1px solid var(--border-light);
}
.compare-item:last-child { border-bottom: none; }
.compare-item.old svg { color: var(--danger); flex-shrink: 0; }
.compare-item.new svg { color: var(--success); flex-shrink: 0; }

[data-theme="dark"] .compare-card { background: #141825; border-color: #1E293B; }
[data-theme="dark"] .compare-header.old { background: rgba(239,68,68,0.08); color: #FCA5A5; border-color: rgba(239,68,68,0.15); }
[data-theme="dark"] .compare-header.new { background: rgba(37,99,235,0.08); color: #93C5FD; border-color: rgba(37,99,235,0.15); }
[data-theme="dark"] .compare-body { background: #141825; }
[data-theme="dark"] .compare-item { border-color: #1E293B; }

/* ---------- Changelog / Latest Updates Section ---------- */
.changelog-section { background: var(--bg); position: relative; }
.changelog-section .section-label { text-align: center; display: block; }
.changelog-list { position: relative; display: flex; flex-direction: column; gap: 32px; padding-left: 28px; }
.changelog-list::before {
  content: ''; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px;
  background: linear-gradient(to bottom, var(--primary), var(--border));
}
.changelog-item { position: relative; display: flex; align-items: flex-start; gap: 20px; }
.changelog-dot {
  position: absolute; left: -28px; top: 24px; width: 16px; height: 16px;
  border-radius: 50%; border: 3px solid var(--card); z-index: 1;
}
.changelog-dot.active { background: var(--primary); box-shadow: 0 0 0 4px rgba(37,99,235,0.15); }
.changelog-dot.released { background: var(--success); box-shadow: 0 0 0 4px rgba(16,185,129,0.12); }
.changelog-card {
  flex: 1; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 28px; transition: box-shadow var(--transition), border-color var(--transition);
}
.changelog-card:hover { box-shadow: var(--shadow-md); border-color: var(--primary); }
.changelog-header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.changelog-version {
  font-size: 0.8125rem; font-weight: 700; font-family: 'SF Mono', 'Cascadia Code', monospace;
  padding: 3px 10px; background: var(--bg-alt); border-radius: var(--radius-full); color: var(--text-secondary);
}
.changelog-badge {
  font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 3px 10px; border-radius: var(--radius-full);
}
.changelog-badge.released { background: rgba(16,185,129,0.1); color: var(--success); }
.changelog-badge.coming-soon { background: rgba(37,99,235,0.1); color: var(--primary); }
.changelog-date { font-size: 0.75rem; color: var(--text-muted); }
.changelog-card h3 { font-size: 1.0625rem; font-weight: 700; color: var(--text); margin-bottom: 14px; }
.changelog-features { display: flex; flex-direction: column; gap: 8px; list-style: none; padding: 0; margin: 0; }
.changelog-features li {
  display: flex; align-items: center; gap: 10px; font-size: 0.875rem; color: var(--text-secondary); padding: 4px 0;
}
.changelog-features li svg { flex-shrink: 0; }

[data-theme="dark"] .changelog-card { background: #141825; border-color: #1E293B; }
[data-theme="dark"] .changelog-card:hover { border-color: var(--primary); }
[data-theme="dark"] .changelog-version { background: #1E293B; color: #94A3B8; }
[data-theme="dark"] .changelog-list::before { background: linear-gradient(to bottom, var(--primary), #1E293B); }
[data-theme="dark"] .changelog-dot { border-color: #0F172A; }

/* ---------- Founder Message Section ---------- */
.founder-section { background: var(--bg-alt); }
.founder-card {
  position: relative; overflow: hidden; border-radius: var(--radius-xl);
  border: 1px solid var(--border); background: var(--card); max-width: 720px; margin: 0 auto;
}
.founder-glow {
  position: absolute; top: -50%; left: 50%; transform: translateX(-50%);
  width: 500px; height: 400px; border-radius: 50%;
  background: radial-gradient(circle, rgba(37,99,235,0.06) 0%, transparent 70%);
  pointer-events: none;
}
.founder-inner { position: relative; padding: 48px 40px; }
.founder-quote-mark { margin-bottom: 16px; color: var(--text-muted); }
.founder-lead { font-size: 1.25rem; font-weight: 700; color: var(--text); line-height: 1.5; margin-bottom: 16px; }
.founder-inner > p { font-size: 0.9375rem; color: var(--text-secondary); line-height: 1.7; margin-bottom: 28px; }
.founder-mission h4 { font-size: 0.875rem; font-weight: 700; color: var(--text); margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
.founder-mission-items { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-bottom: 28px; }
.founder-mission-items span { display: flex; align-items: center; gap: 8px; font-size: 0.875rem; color: var(--text-secondary); font-weight: 500; }
.founder-sig { font-size: 0.875rem; font-weight: 600; color: var(--text-muted); }

[data-theme="dark"] .founder-card { background: #141825; border-color: #1E293B; }
[data-theme="dark"] .founder-glow { background: radial-gradient(circle, rgba(37,99,235,0.08) 0%, transparent 70%); }

/* Early Access CTA */
.ea-cta-section { background: var(--bg); padding-bottom: 40px; }
.ea-cta-box {
  position: relative; overflow: hidden;
  padding: 64px 48px; border-radius: 24px; text-align: center;
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 50%, #0F172A 100%);
  color: #fff;
}
.ea-cta-glow {
  position: absolute; top: -80%; left: 50%; transform: translateX(-50%);
  width: 800px; height: 600px; border-radius: 50%;
  background: radial-gradient(circle, rgba(37,99,235,0.15) 0%, transparent 60%);
  pointer-events: none;
}
.ea-cta-content { position: relative; }
.ea-cta-box h2 { font-size: 2rem; font-weight: 800; letter-spacing: -0.03em; margin-bottom: 12px; }
.ea-cta-lead { font-size: 1.0625rem; color: rgba(255,255,255,0.7); margin-bottom: 20px; }
.ea-cta-lead strong { color: #fff; }
.ea-cta-pills { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin-bottom: 28px; }
.ea-cta-pills span {
  padding: 5px 16px; border-radius: var(--radius-full);
  font-size: 0.75rem; font-weight: 600;
  background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.7);
  border: 1px solid rgba(255,255,255,0.1);
}
.ea-cta-actions { display: flex; gap: 12px; justify-content: center; }
.ea-btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 28px; font-size: 0.9375rem; font-weight: 500; font-family: inherit;
  color: rgba(255,255,255,0.8); background: transparent; border: 1.5px solid rgba(255,255,255,0.2);
  border-radius: 12px; cursor: pointer;
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}
.ea-btn-ghost:hover { border-color: rgba(255,255,255,0.5); color: #fff; background: rgba(255,255,255,0.05); }

.ea-disclaimer {
  text-align: center; font-size: 0.75rem; color: var(--text-muted);
  margin-top: 20px; line-height: 1.5;
}

/* Dark mode overrides for EA */
[data-theme="dark"] .ea-offer-card { border-color: #1E293B; background: #141825; }
[data-theme="dark"] .ea-offer-glow { background: radial-gradient(circle, rgba(37,99,235,0.12) 0%, transparent 70%); }
[data-theme="dark"] .ea-why-card { background: linear-gradient(135deg, rgba(37,99,235,0.06) 0%, rgba(139,92,246,0.06) 100%); border-color: rgba(37,99,235,0.12); }
[data-theme="dark"] .ea-benefit-card { background: #141825; border-color: #1E293B; }
[data-theme="dark"] .ea-social-card { background: #0F172A; border-color: #1E293B; }
[data-theme="dark"] .ea-founder-card { background: #141825; border-color: #1E293B; }
[data-theme="dark"] .ea-badge-star { background: linear-gradient(135deg, rgba(251,191,36,0.15), rgba(245,158,11,0.15)); color: #FCD34D; }
[data-theme="dark"] .ea-cta-box { background: linear-gradient(135deg, #070B14 0%, #111827 50%, #070B14 100%); }

/* DEPRECATED — section removed */
/* ---------- 12. FAQ ---------- */
.faq-section { background: var(--bg-alt); }
.faq-section .section-label { text-align: center; display: block; }
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; transition: box-shadow var(--transition); }
.faq-item:hover { box-shadow: var(--shadow-sm); }
.faq-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; font-size: 1rem; font-weight: 600; color: var(--text); text-align: left; }
.faq-chevron { transition: transform var(--transition); color: var(--text-muted); flex-shrink: 0; }
.faq-item.open .faq-chevron { transform: rotate(180deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.faq-item.open .faq-answer { max-height: 300px; }
.faq-answer p { padding: 0 24px 20px; font-size: 0.9375rem; color: var(--text-muted); line-height: 1.7; }

/* ---------- 13. (CTA handled by EA CTA above) ---------- */

/* ---------- 14. Footer ---------- */
.site-footer { background: var(--text); color: rgba(255,255,255,0.7); padding: 72px 0 32px; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1.5fr; gap: 40px; margin-bottom: 48px; }
.footer-brand { display: flex; align-items: center; gap: 10px; color: #fff; margin-bottom: 16px; }
.footer-brand svg { color: var(--primary-light); }
.footer-brand span { font-size: 1.25rem; font-weight: 700; }
.footer-tagline { font-size: 0.875rem; line-height: 1.7; margin-bottom: 20px; }
.footer-social { display: flex; gap: 12px; }
.social-link { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-sm); color: rgba(255,255,255,0.5); transition: color var(--transition), background var(--transition); }
.social-link:hover { color: #fff; background: rgba(255,255,255,0.1); }
.footer-links-col h4, .footer-newsletter-col h4 { font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255,255,255,0.4); margin-bottom: 16px; }
.footer-links-col li { margin-bottom: 10px; }
.footer-links-col a { font-size: 0.875rem; color: rgba(255,255,255,0.7); transition: color var(--transition); }
.footer-links-col a:hover { color: #fff; }
.footer-newsletter-col p { font-size: 0.875rem; margin-bottom: 16px; }
.newsletter-form { display: flex; gap: 8px; }
.newsletter-form input { flex: 1; padding: 10px 14px; font-size: 0.875rem; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); border-radius: var(--radius-sm); color: #fff; outline: none; transition: border-color var(--transition); }
.newsletter-form input::placeholder { color: rgba(255,255,255,0.4); }
.newsletter-form input:focus { border-color: var(--primary-light); }
.newsletter-form button { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: var(--primary); border-radius: var(--radius-sm); color: #fff; flex-shrink: 0; transition: background var(--transition); }
.newsletter-form button:hover { background: var(--primary-dark); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 32px; border-top: 1px solid rgba(255,255,255,0.1); font-size: 0.8125rem; color: rgba(255,255,255,0.4); }

/* ---------- 15. Notification Dropdown ---------- */
.notif-dropdown { position: fixed; top: calc(var(--nav-height) + 8px); right: 24px; width: 360px; max-height: 420px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); z-index: 1001; overflow: hidden; }
.notif-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--border); font-weight: 600; font-size: 0.9375rem; }
.notif-close { font-size: 1.25rem; color: var(--text-muted); line-height: 1; }
.notif-close:hover { color: var(--text); }
.notif-list { padding: 8px; max-height: 340px; overflow-y: auto; }
.notif-empty { text-align: center; padding: 24px; color: var(--text-muted); font-size: 0.875rem; }
.notif-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px; border-radius: var(--radius-sm); transition: background var(--transition); }
.notif-item:hover { background: var(--bg); }
.notif-info strong { display: block; font-size: 0.875rem; color: var(--text); }
.notif-info span { display: block; font-size: 0.8125rem; color: var(--text-muted); }
.notif-unit { font-size: 0.75rem !important; }
.notif-btns { display: flex; gap: 6px; }
.notif-approve, .notif-reject { width: 32px; height: 32px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 0.875rem; transition: background var(--transition); }
.notif-approve:hover { background: rgba(16,185,129,0.1); }
.notif-reject:hover { background: rgba(239,68,68,0.1); }
.notif-backdrop { position: fixed; inset: 0; z-index: 999; }

/* ---------- 16. Auth Screens (Full-page) ---------- */
.auth-screen {
  position: fixed; inset: 0; z-index: 2000;
  background: var(--bg);
  overflow-y: auto;
  animation: authScreenIn 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.auth-screen.hidden { display: none; }
@keyframes authScreenIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.auth-screen-inner {
  display: grid; grid-template-columns: 1fr 1fr;
  min-height: 100vh;
}

.auth-screen-brand {
  display: flex; flex-direction: column;
  padding: 40px 48px;
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 50%, #0F172A 100%);
  color: #fff;
  position: relative; overflow: hidden;
}
.auth-screen-brand::before {
  content: ''; position: absolute; top: -40%; right: -20%; width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(37,99,235,0.12), transparent 70%);
  border-radius: 50%; pointer-events: none;
}
.auth-screen-brand::after {
  content: ''; position: absolute; bottom: -30%; left: -10%; width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(139,92,246,0.08), transparent 70%);
  border-radius: 50%; pointer-events: none;
}

.auth-back-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.8125rem; font-weight: 500;
  color: rgba(255,255,255,0.6); background: none; border: none;
  cursor: pointer; margin-bottom: 48px; z-index: 1;
  transition: color var(--transition);
}
.auth-back-btn:hover { color: #fff; }
.auth-screen-center .auth-back-btn { color: var(--text-muted); margin-bottom: 24px; }
.auth-screen-center .auth-back-btn:hover { color: var(--text); }

.auth-brand-content { flex: 1; display: flex; flex-direction: column; justify-content: center; z-index: 1; }
.auth-brand-logo { margin-bottom: 24px; color: #3B82F6; }
.auth-brand-title { font-size: 1.5rem; font-weight: 700; margin-bottom: 12px; letter-spacing: -0.02em; }
.auth-brand-desc { font-size: 0.9375rem; color: rgba(255,255,255,0.82); line-height: 1.6; margin-bottom: 32px; }

.auth-brand-features { display: flex; flex-direction: column; gap: 14px; }
.auth-feature-item {
  display: flex; align-items: center; gap: 10px;
  font-size: 0.875rem; color: rgba(255,255,255,0.9);
}
.auth-feature-item svg { color: #10B981; flex-shrink: 0; }

.auth-screen-form {
  display: flex; align-items: center; justify-content: center;
  padding: 48px;
}

.auth-screen-center {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; min-height: 100vh; padding: 40px 24px;
}

.auth-form-card {
  width: 100%; max-width: 460px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 20px; padding: 40px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.06);
}
.auth-card-centered { max-width: 420px; }

.auth-card-logo {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 28px; font-size: 1.125rem; font-weight: 700; color: var(--text);
}

.auth-form-header h2 { font-size: 1.375rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 6px; color: var(--text); }
.auth-form-header p { font-size: 0.9375rem; color: var(--text-muted); margin-bottom: 28px; line-height: 1.5; }

.auth-form-fields { display: flex; flex-direction: column; gap: 18px; }

.auth-section-label {
  font-size: 0.6875rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--text-muted); padding-top: 4px;
}
.auth-field { display: flex; flex-direction: column; gap: 5px; }
.auth-field label {
  font-size: 0.8125rem; font-weight: 500; color: var(--text-secondary);
  display: flex; align-items: center; gap: 6px;
}
.auth-optional { font-size: 0.6875rem; font-weight: 400; color: var(--text-muted); }
.auth-field input {
  padding: 11px 14px; font-size: 0.9375rem; font-family: inherit;
  background: var(--bg); border: 1.5px solid var(--border);
  border-radius: 10px; color: var(--text); outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.auth-field input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.08);
}
.auth-field input::placeholder { color: var(--text-muted); }

.auth-field-row {
  display: flex; justify-content: space-between; align-items: center;
}
.auth-remember {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.8125rem; color: var(--text-muted); cursor: pointer;
}
.auth-remember input { width: 16px; height: 16px; accent-color: var(--primary); }

.auth-error {
  padding: 10px 14px; border-radius: 10px;
  background: rgba(239,68,68,0.06); border: 1px solid rgba(239,68,68,0.15);
  font-size: 0.8125rem; color: var(--danger); line-height: 1.4;
}
.auth-error.hidden { display: none; }
.auth-checkbox-field { margin-top: 4px; }
.auth-checkbox-label { display: flex; align-items: flex-start; gap: 8px; font-size: 0.8125rem; color: var(--text-secondary); cursor: pointer; line-height: 1.4; }
.auth-checkbox-label input[type="checkbox"] { margin-top: 2px; accent-color: var(--primary); width: 16px; height: 16px; flex-shrink: 0; }
.auth-checkbox-label a { color: var(--primary); text-decoration: underline; }

.auth-submit-btn {
  width: 100%; padding: 12px 24px; font-size: 0.9375rem; font-weight: 600;
  font-family: inherit; color: #fff; background: var(--primary);
  border: none; border-radius: 10px; cursor: pointer;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.auth-submit-btn:hover { background: #1D4ED8; box-shadow: 0 4px 12px rgba(37,99,235,0.25); }
.auth-submit-btn:active { transform: scale(0.98); }
.auth-submit-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.auth-btn-secondary { background: var(--bg-alt); color: var(--text); border: 1px solid var(--border); }
.auth-btn-secondary:hover { background: var(--bg); box-shadow: var(--shadow-sm); }

.auth-btn-spinner {
  width: 18px; height: 18px; border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff; border-radius: 50%;
  animation: spin 0.6s linear infinite;
}
.auth-btn-spinner.hidden { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

.auth-link-btn {
  background: none; border: none; color: var(--primary);
  font-size: 0.8125rem; font-weight: 600; cursor: pointer;
  font-family: inherit;
  transition: color var(--transition);
}
.auth-link-btn:hover { color: #1D4ED8; }

.auth-form-footer {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 24px; font-size: 0.8125rem; color: var(--text-muted);
}

.auth-form-divider {
  display: flex; align-items: center; gap: 16px; margin: 20px 0;
  color: var(--text-muted); font-size: 0.75rem; font-weight: 500;
}
.auth-form-divider::before, .auth-form-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}

.auth-form-footer-stack { display: flex; flex-direction: column; gap: 10px; }

.auth-alt-btn {
  width: 100%; padding: 11px 20px; font-size: 0.875rem; font-weight: 500;
  font-family: inherit; color: var(--text-secondary);
  background: var(--bg); border: 1.5px solid var(--border);
  border-radius: 10px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}
.auth-alt-btn:hover { border-color: var(--primary); color: var(--primary); background: rgba(37,99,235,0.02); }

.auth-join-help {
  margin-top: 24px; padding: 16px; border-radius: 10px;
  background: rgba(37,99,235,0.04); border: 1px solid rgba(37,99,235,0.08);
}
.auth-join-help p { font-size: 0.8125rem; color: var(--text-muted); line-height: 1.5; margin: 0; }

/* Invite brand panel */
.auth-invite-badge {
  display: inline-flex; padding: 4px 14px; border-radius: 20px;
  font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  background: rgba(37,99,235,0.2); color: #93C5FD; margin-bottom: 24px;
}
.auth-invite-society {
  font-size: 2rem; font-weight: 800; letter-spacing: -0.03em;
  color: #fff; margin-bottom: 16px; line-height: 1.2;
}
.auth-invite-meta { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.auth-invite-meta-item {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.8125rem; color: rgba(255,255,255,0.5);
}
.auth-invite-meta-item svg { color: rgba(255,255,255,0.4); }

/* Error card */
.auth-error-card { text-align: center; }
.auth-error-icon { margin-bottom: 20px; }
.auth-error-card h2 { color: var(--text); margin-bottom: 12px; }
.auth-error-card p { font-size: 0.9375rem; color: var(--text-muted); line-height: 1.5; margin-bottom: 28px; }
.auth-error-actions { display: flex; flex-direction: column; gap: 10px; }

/* Pending card */
.auth-pending-card { text-align: center; }
.auth-pending-icon { margin-bottom: 20px; }
.auth-pending-card h2 { color: var(--text); margin-bottom: 12px; }
.auth-pending-card > p { font-size: 0.9375rem; color: var(--text-muted); line-height: 1.5; }
.auth-pending-steps {
  display: flex; align-items: center; justify-content: center; gap: 0;
  margin: 28px 0; padding: 0 20px;
}
.auth-pending-step {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: 0.75rem; font-weight: 500; color: var(--text-muted);
  position: relative; flex: 1;
}
.auth-pending-step:not(:last-child)::after {
  content: ''; position: absolute; top: 10px; left: 50%; width: 100%; height: 2px;
  background: var(--border); z-index: 0;
}
.auth-pending-step.done:not(:last-child)::after { background: var(--success); }
.step-dot {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--bg-alt); border: 2px solid var(--border);
  z-index: 1;
}
.step-dot.done { background: var(--success); border-color: var(--success); }
.step-dot.active { background: var(--bg); border-color: var(--warning); box-shadow: 0 0 0 3px rgba(245,158,11,0.15); }
.auth-pending-hint { font-size: 0.8125rem; color: var(--text-muted); margin-bottom: 24px; }

/* Success card */
.auth-success-card { text-align: center; }
.auth-success-icon { margin-bottom: 20px; }
.auth-success-card h2 { color: var(--text); margin-bottom: 8px; }
.auth-success-card > p { font-size: 0.9375rem; color: var(--text-muted); line-height: 1.5; margin-bottom: 24px; }
.auth-success-next {
  display: flex; flex-direction: column; gap: 4px;
  padding: 16px; border-radius: 10px;
  background: rgba(16,185,129,0.06); border: 1px solid rgba(16,185,129,0.12);
  margin-bottom: 24px; font-size: 0.875rem; color: var(--text-secondary);
}
.auth-success-label { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--success); }

/* Auth screen responsive */
@media (max-width: 768px) {
  .auth-screen-inner { grid-template-columns: 1fr; }
  .auth-screen-brand { padding: 24px 24px 32px; min-height: auto; }
  .auth-back-btn { margin-bottom: 24px; }
  .auth-brand-features { display: none; }
  .auth-screen-form { padding: 24px; }
  .auth-form-card { padding: 28px 24px; }
}

/* Auth screen dark mode */
[data-theme="dark"] .auth-screen { background: #0B0F19; }
[data-theme="dark"] .auth-form-card { background: #141825; border-color: #1E293B; }
[data-theme="dark"] .auth-field input { background: #0F172A; border-color: #1E293B; }
[data-theme="dark"] .auth-alt-btn { background: #0F172A; border-color: #1E293B; }
[data-theme="dark"] .auth-screen-brand { background: linear-gradient(135deg, #070B14 0%, #111827 50%, #070B14 100%); }

/* ---------- 17. Quick Invite Modal ---------- */
.quick-invite-modal { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 24px; }
.quick-invite-backdrop { position: absolute; inset: 0; background: rgba(15,23,42,0.5); backdrop-filter: blur(8px); }
.quick-invite-content { position: relative; width: 100%; max-width: 440px; background: var(--card); border-radius: var(--radius-lg); box-shadow: var(--shadow-2xl); animation: modalIn 0.3s ease; }
.quick-invite-header { text-align: center; padding: 36px 32px 8px; }
.quick-invite-icon-wrap { width: 56px; height: 56px; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; background: rgba(37,99,235,0.08); border-radius: var(--radius-md); color: var(--primary); }
.quick-invite-header h3 { margin-bottom: 8px; }
.quick-invite-header p { font-size: 0.875rem; color: var(--text-muted); }
.quick-invite-body { padding: 24px 32px 32px; }
.quick-invite-body > label { display: block; font-size: 0.8125rem; font-weight: 500; color: var(--text-secondary); margin-bottom: 10px; }
.quick-invite-days-row { display: flex; gap: 8px; margin-bottom: 20px; }
.days-chip { flex: 1; padding: 10px; font-size: 0.8125rem; font-weight: 500; text-align: center; color: var(--text-muted); background: var(--bg); border: 1.5px solid var(--border); border-radius: var(--radius-sm); transition: all var(--transition); }
.days-chip:hover { border-color: var(--primary); color: var(--primary); }
.days-chip.active { color: var(--primary); background: rgba(37,99,235,0.08); border-color: var(--primary); }
.quick-invite-result { margin-bottom: 16px; }
.invite-success-msg { display: flex; align-items: center; gap: 8px; font-size: 0.875rem; font-weight: 500; color: var(--success-dark); margin-bottom: 12px; }
.invite-link-box { display: flex; gap: 8px; margin-bottom: 12px; }
.invite-link-box input { flex: 1; padding: 10px 14px; font-size: 0.8125rem; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); outline: none; color: var(--text); }
.invite-action-btns { display: flex; gap: 8px; }


/* ---------- 19. Dashboard (App) ---------- */
.main-app { min-height: 100vh; background: var(--bg); }

.app-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; padding: 24px; max-width: var(--container-max); margin: 0 auto; }
.app-title { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; }
.header-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.user-info { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.user-display { padding: 8px 14px; font-size: 0.8125rem; font-weight: 500; background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-secondary); cursor: default; width: auto; min-width: 0; }
.control-input { padding: 8px 14px; font-size: 0.8125rem; background: var(--card); border: 1.5px solid var(--border); border-radius: var(--radius-sm); outline: none; transition: border-color var(--transition); }
.control-input:focus { border-color: var(--primary); }

.status-message.banner { margin: 0 0 16px; padding: 12px 24px; font-size: 0.875rem; color: var(--primary); background: rgba(37,99,235,0.06); border: 1px solid rgba(37,99,235,0.12); border-radius: var(--radius-md); }

.app-main { max-width: var(--container-max); margin: 0 auto; padding: 0 24px 48px; display: flex; flex-direction: column; gap: 24px; }

.dashboard-section.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; transition: box-shadow var(--transition); }
.dashboard-section.card:hover { box-shadow: var(--shadow-md); }
.dashboard-section.card.wide { grid-column: 1 / -1; }
.dashboard-section h2 { font-size: 1.125rem; margin-bottom: 20px; display: flex; align-items: center; gap: 8px; }
.card-subtitle { font-size: 0.875rem; color: var(--text-muted); margin: -12px 0 20px; }

.section-header-inline { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.section-header-inline h2, .section-header-inline h3 { margin-bottom: 0; }
.section-header-inline p { font-size: 0.875rem; color: var(--text-muted); flex: 1; margin: 0; }

.chart-controls { display: flex; gap: 4px; margin-left: auto; }
.chart-btn { padding: 6px 14px; font-size: 0.75rem; font-weight: 600; border-radius: var(--radius-sm); color: var(--text-muted); background: var(--bg); border: 1px solid var(--border); transition: all var(--transition); }
.chart-btn:hover { border-color: var(--primary); color: var(--primary); }
.chart-btn.active { color: #fff; background: var(--primary); border-color: var(--primary); }

.chart-legend { display: flex; gap: 20px; margin-bottom: 16px; flex-wrap: wrap; }
.legend-item { display: flex; align-items: center; gap: 8px; font-size: 0.8125rem; color: var(--text-muted); }
.legend-color { width: 12px; height: 12px; border-radius: 3px; }
.legend-color.in { background: var(--primary); }
.legend-color.out { background: var(--danger); opacity: 0.7; }
.legend-color.net { background: var(--success); }

/* Stat Cards */

/* Trend Chart */
.trend-chart { display: flex; gap: 8px; overflow-x: auto; padding: 8px 0; }
.trend-chart.range-12 { gap: 4px; }
.trend-col { flex: 1; min-width: 64px; text-align: center; position: relative; outline: none; padding: 4px; border-radius: var(--radius-sm); transition: background var(--transition); }
.trend-col:hover, .trend-col:focus { background: var(--bg); }
.trend-tooltip { display: none; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); padding: 14px 18px; background: var(--text); color: #fff; border-radius: var(--radius-md); font-size: 12px; white-space: nowrap; z-index: 10; box-shadow: var(--shadow-lg); }
.trend-tooltip b { display: block; margin-bottom: 4px; }
.trend-tooltip p { margin: 2px 0; color: rgba(255,255,255,0.7); }
.trend-tooltip .net-positive { color: #6EE7B7; }
.trend-tooltip .net-negative { color: #FCA5A5; }
.trend-col:hover .trend-tooltip, .trend-col:focus .trend-tooltip { display: block; }
.trend-bars { display: flex; gap: 4px; height: 120px; align-items: flex-end; justify-content: center; margin-bottom: 6px; }
.bar { flex: 1; max-width: 24px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; }
.bar-fill { width: 100%; border-radius: 4px 4px 0 0; transition: height 0.6s ease; animation: barGrow 0.8s ease-out forwards; animation-delay: calc(var(--bar-index, 0) * 60ms); }
.bar-fill.income { background: var(--primary); }
.bar-fill.expense { background: var(--danger); opacity: 0.6; }
.bar-tag { position: absolute; bottom: -16px; font-size: 9px; font-weight: 600; color: var(--text-muted); }
.trend-values { display: flex; justify-content: center; gap: 8px; margin-top: 20px; }
.trend-values span { font-size: 10px; color: var(--text-muted); }
.trend-values strong { color: var(--text); }
.trend-month { font-size: 11px; font-weight: 500; color: var(--text-muted); margin-top: 4px; }
.trend-chart.switch-out { opacity: 0; transform: translateY(8px); transition: all 0.13s ease; }
.trend-chart.switch-in { animation: fadeInUp 0.28s ease; }

/* Forms */
.form-grid { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 20px; }
.form-grid input, .form-grid select { flex: 1; min-width: 140px; padding: 10px 14px; font-size: 0.875rem; background: var(--bg); border: 1.5px solid var(--border); border-radius: var(--radius-sm); outline: none; transition: border-color var(--transition); }
.form-grid input:focus, .form-grid select:focus { border-color: var(--primary); }
.form-grid input::placeholder { color: var(--text-muted); }
.form-grid label { font-size: 0.8125rem; font-weight: 500; color: var(--text-secondary); }

/* Tables */
.table-wrap { overflow-x: auto; }
table { font-size: 0.875rem; }
thead th { padding: 12px 16px; font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); background: var(--bg); border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; }
tbody td { padding: 14px 16px; border-bottom: 1px solid var(--border-light); color: var(--text-secondary); white-space: nowrap; }
tbody tr { transition: background var(--transition); }
tbody tr:hover { background: var(--bg-alt); }
td.ok { color: var(--success-dark); font-weight: 600; }
td.danger { color: var(--danger); font-weight: 600; }

.delete-btn, .btn-approve, .btn-reject, .btn-promote, .btn-remove-member { padding: 6px 12px; font-size: 0.75rem; font-weight: 500; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--card); color: var(--text-secondary); cursor: pointer; transition: all var(--transition); }
.delete-btn:hover { border-color: var(--danger); color: var(--danger); background: rgba(239,68,68,0.04); }
.btn-approve:hover { border-color: var(--success); color: var(--success-dark); background: rgba(16,185,129,0.04); }
.btn-reject:hover { border-color: var(--danger); color: var(--danger); background: rgba(239,68,68,0.04); }
.btn-promote:hover { border-color: var(--primary); color: var(--primary); background: rgba(37,99,235,0.04); }
.btn-remove-member:hover { border-color: var(--danger); color: var(--danger); background: rgba(239,68,68,0.04); }
.approval-actions, .member-actions { display: flex; gap: 6px; }

.pending-badge, .member-count-badge { font-size: 0.75rem; font-weight: 600; padding: 2px 10px; border-radius: var(--radius-full); background: rgba(239,68,68,0.1); color: var(--danger); }
.member-count-badge { background: rgba(37,99,235,0.08); color: var(--primary); }
.role-badge { padding: 3px 10px; border-radius: var(--radius-full); font-size: 0.75rem; font-weight: 500; }
.role-badge.role-admin { background: rgba(37,99,235,0.08); color: var(--primary); }
.role-badge.role-member { background: var(--bg); color: var(--text-muted); }
.empty-state { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 24px; font-size: 0.9375rem; color: var(--text-muted); }
.invite-quick-actions { margin-bottom: 16px; }

/* ---------- 20. Toast System ---------- */
.toast-stack { position: fixed; top: calc(var(--nav-height) + 16px); right: 24px; z-index: 3000; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 12px; padding: 14px 20px; min-width: 280px; max-width: 400px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); font-size: 0.875rem; pointer-events: auto; animation: toastIn 0.3s ease; border-left: 3px solid var(--primary); }
.toast.success { border-left-color: var(--success); }
.toast.error { border-left-color: var(--danger); }
.toast.warning { border-left-color: var(--warning); }
.toast strong { font-weight: 600; color: var(--text); margin-right: 4px; }
.toast span { color: var(--text-muted); }
.toast.exit { animation: toastOut 0.3s ease forwards; }

/* ---------- 21. Scroll Reveal ---------- */
.scroll-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: var(--reveal-delay, 0ms);
}
.scroll-reveal.visible {
  opacity: 1;
  transform: none;
}
.reveal { animation: fadeInUp 0.5s ease forwards; animation-delay: calc(var(--row-index, 0) * 40ms); }

/* ---------- 22. Animations ---------- */
@keyframes blobFloat { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(30px, -20px) scale(1.05); } 66% { transform: translate(-20px, 15px) scale(0.95); } }
@keyframes floatCard { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes barGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes modalIn { from { opacity: 0; transform: scale(0.96) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes toastIn { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: translateX(0); } }
@keyframes toastOut { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(100%); } }

/* ---------- 23. Responsive ---------- */
@media (max-width: 1024px) {
  .hero-container { grid-template-columns: 1fr; text-align: center; gap: 40px; }
  .hero-content { align-items: center; display: flex; flex-direction: column; }
  .hero-subtitle { max-width: 560px; }
  .hero-actions { justify-content: center; }
  .hero-trust { justify-content: center; }
  .hero-visual { max-width: 560px; margin: 0 auto; }
  .float-card-1 { right: -10px; }
  .float-card-2 { left: -10px; }
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .timeline { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .timeline-line { display: none; }
  .ea-benefits-grid { grid-template-columns: repeat(2, 1fr); }
  .ea-features-grid { grid-template-columns: 1fr; }
  .ea-offer-inner { padding: 36px 28px; }
  .ea-offer-actions { flex-direction: column; align-items: center; }
  .ea-social-proof { grid-template-columns: 1fr; }
  .preview-body { flex-direction: column; }
  .preview-sidebar { width: 100%; border-right: none; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; padding: 12px; flex-wrap: wrap; }
  .preview-sidebar-brand { margin-bottom: 0; }
  .preview-sidebar-item { padding: 8px 12px; margin-bottom: 0; }
  .preview-stats-row { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-brand-col { grid-column: 1 / -1; }
  .footer-newsletter-col { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
  .menu-toggle { display: flex; }
  .nav-links { display: none; position: absolute; top: var(--nav-height); left: 0; right: 0; background: var(--card); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-lg); flex-direction: column; padding: 8px; }
  .nav-links.active { display: flex; }
  .nav-links a { padding: 12px 16px; border-radius: var(--radius-sm); }
  .nav-links a::after { display: none; }
  .nav-auth { gap: 8px; }
  .navbar-container { gap: 12px; padding: 0 16px; }
  .nav-actions { gap: 8px; }
  .btn-primary-sm { padding: 8px 14px; font-size: 0.8125rem; white-space: nowrap; }
  .btn-ghost { padding: 8px 10px; font-size: 0.8125rem; white-space: nowrap; }
  .features-grid { grid-template-columns: 1fr; }
  .timeline { grid-template-columns: 1fr; gap: 24px; }
  .timeline-step { text-align: left; display: flex; gap: 20px; align-items: flex-start; }
  .timeline-marker { margin: 0; flex-shrink: 0; width: 48px; height: 48px; }
  .timeline-number { font-size: 1rem; }
  .timeline-icon { margin: 0 0 12px; }
  .ea-benefits-grid { grid-template-columns: 1fr; }
  .ea-title { font-size: 1.75rem; }
  .ea-price { font-size: 2.5rem; }
  .ea-trust-row { flex-direction: column; gap: 12px; }
  .ea-cta-box { padding: 40px 24px; }
  .ea-cta-box h2 { font-size: 1.5rem; }
  .ea-cta-actions { flex-direction: column; align-items: center; }
  .ea-founder-card { padding: 32px 24px; }
  .ea-why-card { padding: 28px 24px; }
  .preview-stats-row { grid-template-columns: 1fr 1fr; }
  .preview-charts-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
  .app-header { flex-direction: column; align-items: flex-start; }
  .header-right { width: 100%; }
  .user-info { width: 100%; }
  .ea-cta-box { padding: 48px 24px; }
  .ea-cta-box h2 br { display: none; }
  .hero-title br { display: none; }
  .section-title br { display: none; }
  .roadmap-grid { grid-template-columns: 1fr; }
  .ea-counters { gap: 0; }
  .ea-counter-item { padding: 12px 20px; }
  .ea-counter-value { font-size: 2rem; }
  .demo-form-row { flex-direction: column; }
  .demo-form-card { padding: 28px 20px; }
  .demo-steps { flex-wrap: wrap; gap: 8px; }
  .demo-step-line { min-width: 12px; }
  .demo-why-grid { grid-template-columns: 1fr 1fr; }
  .vote-columns { grid-template-columns: 1fr; }
  .vote-tl { grid-template-columns: 1fr 1fr; gap: 20px; }
  .vote-tl-track { display: none; }
  .vote-cta-actions { flex-direction: column; align-items: center; }
  .vote-founder { padding: 24px 20px; }
}

@media (max-width: 480px) {
  body { font-size: 15px; }
  .section { padding: 72px 0; }
  .container { padding: 0 16px; }
  .navbar-container { gap: 8px; padding: 0 12px; }
  .brand-name { font-size: 1.1rem; }
  .btn-primary-sm { padding: 7px 12px; font-size: 0.75rem; }
  .btn-ghost { padding: 7px 8px; font-size: 0.75rem; }
  .hero { min-height: auto; padding-top: calc(var(--nav-height) + 40px); padding-bottom: 40px; }
  .hero-container { padding: 40px 16px; }
  .hero-actions { flex-direction: column; width: 100%; }
  .btn-primary-lg, .btn-outline-lg { width: 100%; justify-content: center; }
  .hero-trust { flex-direction: column; gap: 12px; align-items: center; }
  .float-card { display: none; }
  .ea-counters { flex-direction: column; gap: 16px; }
  .ea-counter-divider { width: 40px; height: 1px; }
  .demo-why-grid { grid-template-columns: 1fr; }
  .demo-steps { gap: 4px; }
  .demo-step span { font-size: 0.6875rem; }
  .vote-tl { grid-template-columns: 1fr; gap: 16px; }
  .vote-card { padding: 14px; }
  .mockup-stats-row { grid-template-columns: 1fr; }
  .quick-invite-body, .quick-invite-header { padding-left: 20px; padding-right: 20px; }
  .auth-form-card { padding: 28px 20px; }
  .form-grid { flex-direction: column; }
  .form-grid input, .form-grid select { min-width: 0; width: 100%; }
  .notif-dropdown { left: 12px; right: 12px; width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .scroll-reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ========================================================================
   DASHBOARD APP — Sidebar Layout, Views, Dark Mode
   ======================================================================== */

/* ---------- D1. App Layout ---------- */
.main-app {
  display: flex;
  min-height: 100vh;
  padding-top: 0;
  background: var(--bg);
}
.main-app.visible { display: flex !important; }

body.app-ready .navbar { display: none; }

.app-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  margin-left: 260px;
  transition: margin-left var(--transition-slow);
}

body.sidebar-collapsed .app-content { margin-left: 72px; }

/* ---------- D2. Sidebar ---------- */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 260px;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border-right: 1px solid var(--border);
  z-index: 100;
  transition: width var(--transition-slow);
  overflow: hidden;
}

body.sidebar-collapsed .sidebar { width: 72px; }
body.sidebar-collapsed .sidebar-brand-text,
body.sidebar-collapsed .sidebar-item-text,
body.sidebar-collapsed .sidebar-group-label,
body.sidebar-collapsed .sidebar-badge { display: none; }
body.sidebar-collapsed .sidebar-header { justify-content: center; padding: 16px 0; }
body.sidebar-collapsed .sidebar-collapse-btn svg { transform: rotate(180deg); }
body.sidebar-collapsed .sidebar-item { justify-content: center; padding: 10px; }
body.sidebar-collapsed .sidebar-nav { padding: 0 10px; }
body.sidebar-collapsed .sidebar-footer { padding: 0 10px 16px; }

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 16px;
  flex-shrink: 0;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--primary);
}

.sidebar-brand-text {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.sidebar-collapse-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  transition: background var(--transition), color var(--transition);
}
.sidebar-collapse-btn:hover { background: var(--bg-alt); color: var(--text); }
.sidebar-collapse-btn svg { transition: transform var(--transition-slow); }

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 12px;
}

.sidebar-group { margin-bottom: 8px; }

.sidebar-group-label {
  display: block;
  padding: 8px 12px 4px;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  white-space: nowrap;
  opacity: 0.6;
}

.sidebar-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 14px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-muted);
  border-radius: var(--radius-md);
  transition: all var(--transition);
  white-space: nowrap;
  position: relative;
}
.sidebar-item:hover { color: var(--text); background: var(--bg-alt); }
.sidebar-item.active { color: var(--primary); background: rgba(37,99,235,0.1); font-weight: 600; box-shadow: inset 3px 0 0 var(--primary); }
.sidebar-item svg { flex-shrink: 0; }

.sidebar-badge {
  margin-left: auto;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: var(--danger);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar-footer {
  padding: 8px 12px 20px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,0.4);
  z-index: 99;
}

/* ---------- D3. Topbar ---------- */
.app-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 60px;
  padding: 0 24px;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.topbar-left { display: flex; align-items: center; gap: 12px; }

.topbar-menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  transition: background var(--transition);
}
.topbar-menu-btn:hover { background: var(--bg-alt); }

.topbar-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
}
.breadcrumb-root { color: var(--text-muted); font-weight: 500; }
.topbar-breadcrumb svg { color: var(--text-muted); opacity: 0.5; }
.breadcrumb-page { color: var(--text); font-weight: 600; }

.topbar-right { display: flex; align-items: center; gap: 12px; }

.topbar-month-filter {
  padding: 6px 12px;
  font-size: 0.8125rem;
  font-weight: 500;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  outline: none;
  transition: border-color var(--transition);
}
.topbar-month-filter:focus { border-color: var(--primary); }

.topbar-invite-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--primary);
  background: rgba(37,99,235,0.08);
  border-radius: var(--radius-sm);
  transition: all var(--transition);
}
.topbar-invite-btn:hover { background: rgba(37,99,235,0.14); }

.topbar-unit { display: flex; align-items: center; }
.topbar-unit-input {
  padding: 6px 12px;
  font-size: 0.8125rem;
  font-weight: 500;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  cursor: default;
  outline: none;
  max-width: 180px;
}

.topbar-user-wrap { position: relative; }

.topbar-user-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 4px;
  border-radius: var(--radius-full);
  transition: background var(--transition);
}
.topbar-user-btn:hover { background: var(--bg-alt); }

.topbar-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
}

.topbar-user-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-secondary);
}

/* ---------- D4. User Dropdown ---------- */
.user-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 240px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  z-index: 200;
  animation: modalIn 0.15s ease;
}

.user-dropdown-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
}

.user-dropdown-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  flex-shrink: 0;
}

.user-dropdown-name {
  display: block;
  width: 100%;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
  background: none;
  border: none;
  outline: none;
  padding: 0;
  cursor: default;
}

.user-dropdown-role {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.user-dropdown-sep {
  height: 1px;
  background: var(--border);
  margin: 0 12px;
}

.user-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 18px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-secondary);
  transition: background var(--transition), color var(--transition);
}
.user-dropdown-item:hover { background: var(--bg-alt); color: var(--text); }
.user-dropdown-item.user-dropdown-danger { color: var(--danger); }
.user-dropdown-item.user-dropdown-danger:hover { background: rgba(239,68,68,0.06); }

/* ---------- D5. App Body & Views ---------- */
.app-body {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
  overflow-x: hidden;
}

.app-view { display: none; animation: viewFadeIn 0.35s cubic-bezier(0.4, 0, 0.2, 1); }
.app-view.active { display: block; }

@keyframes viewFadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

.view-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.view-title {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text);
  margin-bottom: 2px;
}

.view-subtitle { font-size: 0.875rem; color: var(--text-muted); }

.view-header-badge {
  padding: 4px 12px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--primary);
  background: rgba(37,99,235,0.08);
  border-radius: var(--radius-full);
}

/* ---------- D6. Dashboard Cards ---------- */
.dashboard-card {
  margin-bottom: 20px;
}

.dashboard-card.card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 28px; transition: box-shadow var(--transition), border-color var(--transition);
}
.dashboard-card.card:hover { box-shadow: var(--shadow-md); border-color: var(--border); }

.card-header-row {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 12px;
}
.card-title { font-size: 1rem; font-weight: 600; color: var(--text); margin: 0; }
.card-desc { font-size: 0.8125rem; color: var(--text-muted); margin: 4px 0 0; }
.card-view-all {
  font-size: 0.75rem; font-weight: 600; color: var(--primary); background: none; border: none;
  cursor: pointer; padding: 4px 8px; border-radius: var(--radius-sm);
  transition: background var(--transition);
}
.card-view-all:hover { background: rgba(37,99,235,0.06); }

/* ---------- D7. Quick Actions ---------- */
.quick-actions-bar {
  display: flex;
  gap: 10px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.quick-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--card);
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  transition: all var(--transition);
}
.quick-action-btn:hover { border-color: var(--primary); border-style: solid; color: var(--primary); background: rgba(37,99,235,0.03); }

.fin-split-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 24px;
}
.fin-split-card { margin-bottom: 0; }


.mini-table-wrap { min-height: 60px; }

.empty-state-mini {
  display: flex; align-items: center; gap: 8px; padding: 20px 16px;
  color: var(--text-muted); font-size: 0.8125rem;
}
.empty-state-mini svg { color: var(--success); opacity: 0.5; }

.mini-tx {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--border-light);
  font-size: 0.8125rem;
}
.mini-tx:last-child { border-bottom: none; }
.mini-tx-badge {
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
}
.mini-tx-badge.in { background: rgba(16,185,129,0.1); color: var(--success-dark); }
.mini-tx-badge.out { background: rgba(239,68,68,0.1); color: var(--danger); }
.mini-tx-ref { flex: 1; color: var(--text-secondary); font-weight: 500; }
.mini-tx-amount { font-weight: 600; color: var(--text); }
.mini-tx-amount.negative { color: var(--danger); }

.mini-defaulter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 4px;
  border-bottom: 1px solid var(--border-light);
  font-size: 0.8125rem;
}
.mini-defaulter:last-child { border-bottom: none; }
.mini-defaulter-info { display: flex; flex-direction: column; }
.mini-defaulter-unit { font-weight: 600; color: var(--text); }
.mini-defaulter-name { font-size: 0.75rem; color: var(--text-muted); }
.mini-defaulter-amount { font-weight: 600; color: var(--danger); }

/* ---------- D9. Forms (Enhanced) ---------- */
.form-card { margin-bottom: 20px; }

.form-row {
  display: flex;
  gap: 16px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.form-row:last-child { margin-bottom: 0; }

.form-field {
  flex: 1;
  min-width: 160px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-field label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.form-field input,
.form-field select {
  padding: 12px 16px;
  font-size: 0.875rem;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  outline: none;
  color: var(--text);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form-field input:focus,
.form-field select:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(37,99,235,0.12); }
.form-field input::placeholder { color: var(--text-muted); }

.form-action {
  display: flex;
  align-items: flex-end;
  min-width: auto;
  flex: 0 0 auto;
}

/* ---------- D10. Empty State Inline ---------- */
.empty-state-inline {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 40px 24px; text-align: center; color: var(--text-muted);
}
.empty-state-inline svg {
  width: 48px; height: 48px; color: var(--border); margin-bottom: 16px; opacity: 0.5;
}
.empty-state-inline.success svg { color: var(--success); opacity: 0.4; }
.empty-state-inline .empty-title {
  font-size: 0.9375rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 4px;
}
.empty-state-inline .empty-hint {
  font-size: 0.8125rem; color: var(--text-muted);
}

/* ---------- D11. Settings ---------- */
.settings-grid { display: flex; flex-direction: column; gap: 20px; }

.setting-item { max-width: 400px; }
.setting-label { display: block; font-size: 0.875rem; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.setting-desc { font-size: 0.8125rem; color: var(--text-muted); margin-bottom: 12px; }
.setting-input {
  width: 100%;
  padding: 10px 14px;
  font-size: 0.875rem;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  outline: none;
  color: var(--text);
  transition: border-color var(--transition);
}
.setting-input:focus { border-color: var(--primary); }

/* ---------- D12. Dark Mode ---------- */
[data-theme="dark"] {
  --bg: #0F172A;
  --bg-alt: #1E293B;
  --card: #1E293B;
  --text: #F1F5F9;
  --text-secondary: #CBD5E1;
  --text-muted: #94A3B8;
  --border: #334155;
  --border-light: #1E293B;
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.2);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.3);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.3);
  --shadow-xl: 0 20px 25px rgba(0,0,0,0.4);
  --shadow-2xl: 0 25px 50px rgba(0,0,0,0.5);
}

[data-theme="dark"] .sidebar { background: #0B0F1A; border-right-color: #1E293B; }
[data-theme="dark"] .app-topbar { background: rgba(11,15,26,0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom-color: #1E293B; }
[data-theme="dark"] .topbar-month-filter { background: #1E293B; border-color: #334155; color: #F1F5F9; }
[data-theme="dark"] .form-field input,
[data-theme="dark"] .form-field select { background: #0F172A; border-color: #334155; color: #F1F5F9; }
[data-theme="dark"] .form-field input::placeholder { color: #64748B; }
[data-theme="dark"] .setting-input { background: #0F172A; border-color: #334155; color: #F1F5F9; }
[data-theme="dark"] .topbar-unit-input { background: #0F172A; border-color: #334155; color: #CBD5E1; }
[data-theme="dark"] .quick-action-btn { background: #1E293B; border-color: #334155; color: #CBD5E1; }
[data-theme="dark"] .chart-btn { background: #0F172A; border-color: #334155; color: #94A3B8; }
[data-theme="dark"] .btn-secondary-sm { background: #1E293B; border-color: #334155; color: #CBD5E1; }
[data-theme="dark"] .user-dropdown { background: #1E293B; border-color: #334155; }
[data-theme="dark"] .topbar-avatar { box-shadow: 0 0 0 2px #1E293B; }

/* ---------- D13. Responsive (App) ---------- */

@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-100%);
    width: 280px;
    z-index: 200;
    transition: transform var(--transition-slow);
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar-overlay.visible { display: block; }
  .app-content { margin-left: 0 !important; }
  .topbar-menu-btn { display: flex; }
  .sidebar-collapse-btn { display: none; }
  .topbar-user-name { display: none; }
  .topbar-invite-text { display: none; }
  .form-row { flex-direction: column; }
  .form-field { min-width: 0; }
  .quick-actions-bar { flex-wrap: wrap; }
  .quick-action-btn { flex: 1; min-width: 140px; justify-content: center; }
}

@media (max-width: 480px) {
  .app-body { padding: 16px; }
  .topbar-month-filter { display: none; }
  .view-header { flex-direction: column; align-items: flex-start; }
}

/* ── New Sections Responsive (768px) ─────── */
@media (max-width: 768px) {
  .why-flow { grid-template-columns: 1fr; gap: 16px; }
  .why-arrow { transform: rotate(90deg); padding: 4px 0; }
  .trust-bar { gap: 16px 24px; padding: 20px; }
  .compare-grid { grid-template-columns: 1fr; }
  .changelog-list { padding-left: 24px; }
  .founder-inner { padding: 36px 28px; }
  .founder-mission-items { flex-direction: column; gap: 8px; }
  .ea-features-grid { grid-template-columns: 1fr !important; }
  .ea-offer-actions { flex-direction: column; }
  .ea-trust-row { flex-direction: column; align-items: center; }
}
@media (max-width: 480px) {
  .why-step { padding: 24px 20px; }
  .trust-bar { flex-direction: column; align-items: center; gap: 12px; }
  .changelog-card { padding: 20px; }
  .founder-inner { padding: 28px 20px; }
  .founder-lead { font-size: 1.0625rem; }
}

@media print {
  .navbar, .hero, .features-section, .dashboard-preview-section,
  .why-section, .compare-section, .changelog-section, .founder-section,
  .roadmap-section, .demo-section, .vote-section,
  .ea-section, .site-footer,
  .auth-screen, .quick-invite-modal, .toast-stack, .sidebar, .app-topbar { display: none !important; }
  .main-app { padding-top: 0 !important; }
  .app-content { margin-left: 0 !important; }
  .dashboard-card.card { box-shadow: none; border: 1px solid #ddd; break-inside: avoid; }
}

/* ── Toast icon ─────────────────────────────── */
.toast-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 700;
  margin-right: 8px;
  flex-shrink: 0;
}
.toast.success .toast-icon { background: rgba(16,185,129,0.15); color: var(--success); }
.toast.error .toast-icon { background: rgba(239,68,68,0.15); color: var(--danger); }
.toast.warning .toast-icon { background: rgba(245,158,11,0.15); color: var(--warning); }
.toast.info .toast-icon { background: rgba(37,99,235,0.15); color: var(--primary); }

/* ── Staggered row reveal ───────────────────── */
tr.reveal {
  animation: rowReveal 0.3s cubic-bezier(0.4, 0, 0.2, 1) both;
  animation-delay: calc(var(--row-index, 0) * 40ms);
}
@keyframes rowReveal {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Command Palette ---------- */
.cmd-palette-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 20vh;
}
.cmd-palette-overlay.hidden { display: none; }
.cmd-palette {
  max-width: 560px;
  width: 90%;
  background: var(--card);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  max-height: 420px;
  animation: cmdPaletteIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes cmdPaletteIn {
  from { opacity: 0; transform: scale(0.95) translateY(-8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.cmd-palette-header {
  display: flex;
  flex-direction: row;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  gap: 12px;
  align-items: center;
}
.cmd-palette-header svg { color: var(--text-muted); flex-shrink: 0; }
.cmd-palette-header input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 1rem;
  color: var(--text);
  outline: none;
  font-family: inherit;
}
.cmd-palette-header input::placeholder { color: var(--text-muted); }
.cmd-palette-header kbd {
  background: var(--bg-alt);
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.75rem;
  color: var(--text-muted);
  border: 1px solid var(--border);
  font-family: inherit;
  line-height: 1.5;
  flex-shrink: 0;
}
.cmd-palette-results {
  max-height: 320px;
  overflow-y: auto;
  padding: 8px;
}
.cmd-result-group-label {
  padding: 6px 16px 4px;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}
.cmd-result-item {
  padding: 10px 16px;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
  font-size: 0.875rem;
  transition: background 0.15s;
}
.cmd-result-item:hover,
.cmd-result-item.active { background: var(--bg-alt); }
.cmd-result-item .cmd-result-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-alt);
  flex-shrink: 0;
}
.cmd-result-item.active .cmd-result-icon { background: var(--border); }
.cmd-result-item .cmd-result-label { font-weight: 500; }
.cmd-result-item .cmd-result-hint {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-left: auto;
  flex-shrink: 0;
}
.cmd-palette-empty {
  text-align: center;
  padding: 24px 16px;
  color: var(--text-muted);
  font-size: 0.875rem;
}
[data-theme="dark"] .cmd-palette { background: #1A1E2E; border: 1px solid #2A2D3D; }
[data-theme="dark"] .cmd-palette-header { border-bottom-color: #2A2D3D; }
[data-theme="dark"] .cmd-palette-header kbd { background: #0F172A; border-color: #334155; }
[data-theme="dark"] .cmd-result-item:hover,
[data-theme="dark"] .cmd-result-item.active { background: #252A3A; }
[data-theme="dark"] .cmd-result-item .cmd-result-icon { background: #252A3A; }
[data-theme="dark"] .cmd-result-item.active .cmd-result-icon { background: #334155; }

/* ── Custom Scrollbar ───────────────────────── */
.sidebar-nav::-webkit-scrollbar,
.app-body::-webkit-scrollbar {
  width: 6px;
}
.sidebar-nav::-webkit-scrollbar-track,
.app-body::-webkit-scrollbar-track {
  background: transparent;
}
.sidebar-nav::-webkit-scrollbar-thumb,
.app-body::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}
.sidebar-nav::-webkit-scrollbar-thumb:hover,
.app-body::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* ── Focus Ring Utility ─────────────────────── */
.btn-primary-sm:focus-visible,
.btn-primary-full:focus-visible,
.btn-primary-lg:focus-visible,
.btn-secondary-sm:focus-visible,
.quick-action-btn:focus-visible,
.sidebar-item:focus-visible,
.topbar-user-btn:focus-visible,
.delete-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ── Delete Button ──────────────────────────── */
.delete-btn {
  padding: 4px 12px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--danger);
  background: rgba(239,68,68,0.06);
  border: 1px solid rgba(239,68,68,0.15);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition);
}
.delete-btn:hover {
  background: rgba(239,68,68,0.12);
  border-color: rgba(239,68,68,0.3);
  transform: scale(1.02);
}

/* ── Status Badge Utility ───────────────────── */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: var(--radius-full);
}
.status-badge.ok { background: rgba(16,185,129,0.1); color: var(--success); }
.status-badge.danger { background: rgba(239,68,68,0.1); color: var(--danger); }
.status-badge.warning { background: rgba(245,158,11,0.1); color: var(--warning); }
.status-badge.info { background: rgba(37,99,235,0.08); color: var(--primary); }

/* ── Table Polish ───────────────────────────── */
.card table {
  width: 100%;
  border-collapse: collapse;
}
.card table thead th {
  position: sticky;
  top: 0;
  background: var(--card);
  z-index: 1;
}
[data-theme="dark"] .card table thead th { background: #1E293B; }

/* ── Card View-All link hover ───────────────── */
.card-view-all {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.card-view-all::after {
  content: "→";
  display: inline-block;
  transition: transform var(--transition);
}
.card-view-all:hover::after { transform: translateX(3px); }

/* ── Skeleton Loading Shimmer ──────────────── */
.skeleton {
  background: linear-gradient(90deg, var(--bg-alt) 25%, var(--border-light) 50%, var(--bg-alt) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
}
.skeleton-row { display: flex; gap: 12px; padding: 12px 0; }
.skeleton-cell { height: 16px; border-radius: 4px; }
.skeleton-cell.w-30 { width: 30%; }
.skeleton-cell.w-25 { width: 25%; }
.skeleton-cell.w-20 { width: 20%; }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
[data-theme="dark"] .skeleton {
  background: linear-gradient(90deg, #1E293B 25%, #334155 50%, #1E293B 75%);
  background-size: 200% 100%;
}

/* ============================================================
   SETVA — Financial Command Center Dashboard
   ============================================================ */

/* ── Section 1: Financial Health Hero ─────── */
.fin-hero {
  background: linear-gradient(135deg, #1E3A5F 0%, #0F172A 50%, #1A1040 100%);
  border-radius: 20px;
  padding: 40px;
  margin-bottom: 24px;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.fin-hero::before {
  content: '';
  position: absolute;
  top: -60%;
  right: -20%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(37,99,235,0.15), transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.fin-hero::after {
  content: '';
  position: absolute;
  bottom: -40%;
  left: -10%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(139,92,246,0.1), transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.fin-hero-score-wrap {
  display: flex;
  align-items: center;
  gap: 40px;
  position: relative;
  z-index: 1;
}

.fin-hero-ring {
  position: relative;
  width: 140px;
  height: 140px;
  flex-shrink: 0;
}

.fin-ring-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.fin-ring-track {
  fill: none;
  stroke: rgba(255,255,255,0.1);
  stroke-width: 8;
}

.fin-ring-fill {
  fill: none;
  stroke-width: 8;
  stroke-linecap: round;
  stroke: #10B981;
  transition: stroke-dashoffset 1.2s cubic-bezier(0.4, 0, 0.2, 1), stroke 0.4s ease;
}
.fin-ring-fill.good { stroke: #3B82F6; }
.fin-ring-fill.warning { stroke: #F59E0B; }
.fin-ring-fill.critical { stroke: #EF4444; }

.fin-ring-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.fin-ring-value {
  font-size: 2.5rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: #fff;
}

.fin-ring-label {
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.5);
  font-weight: 500;
  margin-top: 2px;
}

.fin-hero-info { flex: 1; }

.fin-hero-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 14px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: 20px;
  margin-bottom: 12px;
}
.fin-hero-badge.excellent { background: rgba(16,185,129,0.2); color: #6EE7B7; }
.fin-hero-badge.good { background: rgba(59,130,246,0.2); color: #93C5FD; }
.fin-hero-badge.warning { background: rgba(245,158,11,0.2); color: #FCD34D; }
.fin-hero-badge.critical { background: rgba(239,68,68,0.2); color: #FCA5A5; }

.fin-hero-title {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
  color: #fff;
}

.fin-hero-desc {
  font-size: 0.9375rem;
  color: rgba(255,255,255,0.6);
  margin-bottom: 12px;
  line-height: 1.5;
}

.fin-hero-recommendations {
  display: flex;
  gap: 12px;
  margin-top: 24px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

.fin-recommendation {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.8);
}
.fin-recommendation svg { flex-shrink: 0; opacity: 0.6; }

/* ── Section 2: Financial Metrics Grid ────── */
.fin-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.fin-metric-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px 24px;
  transition: box-shadow var(--transition), transform var(--transition);
  position: relative;
  overflow: hidden;
  animation: finMetricIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.fin-metric-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.fin-metric-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--primary);
  opacity: 0;
  transition: opacity var(--transition);
}
.fin-metric-card:hover::before { opacity: 1; }

@keyframes finMetricIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.fin-metric-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 12px;
  background: rgba(37,99,235,0.08);
  color: var(--primary);
}
.fin-metric-icon svg { width: 18px; height: 18px; }
.fin-metric-icon.success { background: rgba(16,185,129,0.08); color: var(--success); }
.fin-metric-icon.danger { background: rgba(239,68,68,0.08); color: var(--danger); }
.fin-metric-icon.warning { background: rgba(245,158,11,0.08); color: var(--warning); }
.fin-metric-icon.purple { background: rgba(139,92,246,0.08); color: #8B5CF6; }

.fin-metric-label {
  font-size: 0.75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-muted); margin-bottom: 4px;
}

.fin-metric-value {
  font-size: 1.5rem; font-weight: 800;
  letter-spacing: -0.03em; color: var(--text); margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
}

.fin-metric-trend {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.75rem; font-weight: 600;
  padding: 2px 8px; border-radius: 6px;
}
.fin-metric-trend.up { color: var(--success); background: rgba(16,185,129,0.08); }
.fin-metric-trend.down { color: var(--danger); background: rgba(239,68,68,0.08); }
.fin-metric-trend.neutral { color: var(--text-muted); background: var(--bg-alt); }


/* ── Financial Dashboard Responsive ──────── */
@media (max-width: 768px) {
  .fin-hero { padding: 24px; }
  .fin-hero-score-wrap { flex-direction: column; align-items: flex-start; gap: 24px; }
  .fin-hero-ring { width: 110px; height: 110px; }
  .fin-ring-value { font-size: 2rem; }
  .fin-metrics { grid-template-columns: repeat(2, 1fr); }
  .fin-split-row { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .fin-hero { padding: 20px; }
  .fin-metrics { grid-template-columns: 1fr; }
  .fin-hero-recommendations { flex-direction: column; }
}

/* ── Financial Dashboard Dark Mode ───────── */
[data-theme="dark"] .fin-hero { background: linear-gradient(135deg, #0F172A 0%, #1E1B4B 50%, #0F172A 100%); }
[data-theme="dark"] .fin-metric-card { background: #1A1E2E; border-color: #2A2D3D; }

.fin-hero { animation: finHeroIn 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
@keyframes finHeroIn {
  from { opacity: 0; transform: scale(0.98); }
  to { opacity: 1; transform: scale(1); }
}

/* ── Reduced Motion ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   SETVA — Expense Management Module
   ========================================================================== */

/* ── 1. Add Expense Primary Button ────────────── */
.exp-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #fff;
  background: var(--primary);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  box-shadow: var(--shadow-primary);
  transition: all var(--transition);
}
.exp-add-btn:hover {
  background: var(--primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.35);
}
.exp-add-btn:active {
  transform: translateY(0);
}

/* ── 2. Expense KPI Cards ─────────────────────── */
.exp-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.exp-kpi-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: box-shadow var(--transition), border-color var(--transition);
}

.exp-kpi-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--primary-light);
}

.exp-kpi-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.exp-kpi-icon.blue {
  background: rgba(37, 99, 235, 0.1);
  color: var(--primary);
}

.exp-kpi-icon.green {
  background: rgba(16, 185, 129, 0.1);
  color: var(--success);
}

.exp-kpi-icon.orange {
  background: rgba(245, 158, 11, 0.1);
  color: var(--warning);
}

.exp-kpi-icon.purple {
  background: rgba(139, 92, 246, 0.1);
  color: #8B5CF6;
}

.exp-kpi-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.exp-kpi-label {
  font-size: 0.8125rem;
  color: var(--text-muted);
  font-weight: 500;
}

.exp-kpi-value {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* ── 3. Expense Analytics ─────────────────────── */
.exp-analytics-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}

.exp-analytics-toggles {
  display: flex;
  gap: 4px;
}

.exp-analytics-btn {
  padding: 6px 14px;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  background: var(--bg);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all var(--transition);
}

.exp-analytics-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.exp-analytics-btn.active {
  color: #fff;
  background: var(--primary);
  border-color: var(--primary);
}

.exp-chart-bars {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 200px;
  padding-top: 8px;
}

.exp-chart-bar-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.exp-chart-bar {
  width: 100%;
  max-width: 48px;
  border-radius: 6px 6px 0 0;
  background: var(--primary);
  transition: height 0.6s ease;
  min-height: 4px;
  position: relative;
}

.exp-chart-bar:hover {
  opacity: 0.85;
}

.exp-chart-bar-label {
  font-size: 0.6875rem;
  color: var(--text-muted);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.exp-chart-bar-value {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.exp-chart-empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--text-muted);
}

/* Horizontal bar chart (category mode) */
.exp-bar-chart { display: flex; flex-direction: column; gap: 12px; }
.exp-bar-row { display: flex; align-items: center; gap: 12px; }
.exp-bar-label { font-size: 0.8125rem; color: var(--text-secondary); min-width: 140px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.exp-bar-track { flex: 1; height: 28px; background: var(--bg-alt); border-radius: 6px; overflow: hidden; }
.exp-bar-fill { height: 100%; border-radius: 6px; transition: width 0.6s ease; min-width: 4px; }
.exp-bar-value { font-size: 0.8125rem; font-weight: 600; color: var(--text); min-width: 90px; text-align: right; font-variant-numeric: tabular-nums; }

/* Vertical bar chart (month mode) */
.exp-vert-chart { display: flex; align-items: flex-end; gap: 12px; height: 200px; padding-top: 8px; }
.exp-vert-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; height: 100%; }
.exp-vert-bar-wrap { flex: 1; width: 100%; max-width: 48px; display: flex; align-items: flex-end; }
.exp-vert-bar { width: 100%; border-radius: 6px 6px 0 0; transition: height 0.6s ease; min-height: 4px; }
.exp-vert-label { font-size: 0.6875rem; color: var(--text-muted); white-space: nowrap; }
.exp-vert-value { font-size: 0.6875rem; font-weight: 600; color: var(--text-secondary); font-variant-numeric: tabular-nums; }

/* ── 4. Expense Table & Filters ───────────────── */
.exp-filters {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 0;
}

.exp-filters input,
.exp-filters select {
  padding: 8px 14px;
  font-size: 0.8125rem;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color var(--transition);
  font-family: inherit;
  color: var(--text);
}

.exp-filters input:focus,
.exp-filters select:focus {
  border-color: var(--primary);
}

.exp-search {
  flex: 1;
  min-width: 200px;
  max-width: 320px;
  padding-left: 36px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 24 24' stroke='%2364748B' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 12px center;
  background-size: 16px 16px;
}

.exp-filters select {
  min-width: 160px;
}

.exp-row-clickable { cursor: pointer; }
.exp-row-clickable:hover td { background: var(--bg-alt); }

.exp-desc-cell { max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.exp-table-actions {
  display: flex;
  gap: 6px;
}

.exp-action-btn {
  padding: 5px 10px;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--card);
  cursor: pointer;
  transition: all var(--transition);
  color: var(--text-secondary);
}

.exp-action-btn.edit:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(37, 99, 235, 0.04);
}

.exp-action-btn.delete:hover {
  border-color: var(--danger);
  color: var(--danger);
  background: rgba(239, 68, 68, 0.04);
}

/* ── 5. Category Badge & Pagination ───────────── */
.exp-category-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 500;
  background: var(--bg-alt);
  color: var(--cat-color, var(--text-secondary));
}

.exp-category-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.exp-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-top: 1px solid var(--border-light);
  margin-top: 8px;
}

.exp-pagination-info {
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.exp-pagination-btns {
  display: flex;
  gap: 4px;
}

.exp-page-btn {
  padding: 6px 12px;
  font-size: 0.8125rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--card);
  cursor: pointer;
  transition: all var(--transition);
  color: var(--text-secondary);
}

.exp-page-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(37, 99, 235, 0.04);
}

.exp-page-btn.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.exp-page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── 6. Utility Classes ───────────────────────── */
.btn-icon {
  padding: 5px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--card);
  cursor: pointer;
  transition: all var(--transition);
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-icon:hover { border-color: var(--primary); color: var(--primary); background: rgba(37, 99, 235, 0.04); }
.exp-delete-btn:hover { border-color: var(--danger); color: var(--danger); background: rgba(239, 68, 68, 0.04); }

.input-with-mic { position: relative; display: flex; }
.input-with-mic input { width: 100%; box-sizing: border-box; padding-right: 42px; }
.input-with-mic .mic-btn { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); padding: 6px; }
.input-with-mic .mic-btn.listening {
  color: #fff; border-color: var(--danger); background: var(--danger);
  animation: micPulse 1.2s ease-in-out infinite;
}
@keyframes micPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.45); }
  50% { box-shadow: 0 0 0 6px rgba(239,68,68,0); }
}

.mic-lang-row { display: flex; gap: 6px; margin-top: 6px; }
.mic-lang-chip {
  font-size: 0.75rem; font-weight: 500; padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--card); color: var(--text-secondary); cursor: pointer;
}
.mic-lang-chip.active { background: var(--primary); color: #fff; border-color: var(--primary); }

.text-right { text-align: right; font-variant-numeric: tabular-nums; }

.btn-outline-sm {
  padding: 8px 20px;
  font-size: 0.8125rem;
  font-weight: 500;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-outline-sm:hover {
  border-color: var(--text-muted);
  background: var(--bg);
}

.btn-danger-sm {
  padding: 8px 20px;
  font-size: 0.8125rem;
  font-weight: 500;
  border-radius: var(--radius-sm);
  border: none;
  background: var(--danger);
  color: #fff;
  cursor: pointer;
  transition: all var(--transition);
}

.btn-danger-sm:hover {
  background: #DC2626;
}

.admin-only-inline {}


/* ── 7. Expense Modal (Delete Confirm, etc.) ──── */
@keyframes expFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.exp-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: expFadeIn 0.2s ease;
}

.exp-modal-overlay.hidden {
  display: none;
}

.exp-modal {
  background: var(--card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2xl);
  width: 100%;
  max-width: 540px;
  max-height: 90vh;
  overflow-y: auto;
  animation: modalIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.exp-modal.exp-modal-sm {
  max-width: 400px;
}

.exp-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 28px 0;
}

.exp-modal-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text);
}

.exp-modal-close {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  border: none;
  background: var(--bg);
  color: var(--text-muted);
  font-size: 1.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
}

.exp-modal-close:hover {
  background: var(--border);
  color: var(--text);
}

.exp-modal-body {
  padding: 24px 28px 28px;
}

.exp-modal-submit {
  width: 100%;
  margin-top: 8px;
  padding: 12px;
  font-size: 0.9375rem;
}

.exp-delete-msg {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 24px;
}

.exp-delete-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

/* ── 8. Drawer (Add / Edit / Detail) ──────────── */
.exp-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  justify-content: flex-end;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.exp-drawer-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}
.exp-drawer-overlay.hidden {
  display: none;
}

.exp-drawer {
  width: 100%;
  max-width: 580px;
  height: 100vh;
  background: var(--card);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: -8px 0 30px rgba(0, 0, 0, 0.12);
}
.exp-drawer-overlay.visible .exp-drawer {
  transform: translateX(0);
}

.exp-drawer-wide {
  max-width: 640px;
}

.exp-drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 28px 32px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.exp-drawer-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}

.exp-drawer-subtitle {
  font-size: 0.8125rem;
  color: var(--text-muted);
  line-height: 1.5;
  max-width: 380px;
}

.exp-drawer-close {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
  flex-shrink: 0;
}
.exp-drawer-close:hover {
  background: var(--border);
  color: var(--text);
}

.exp-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 28px 32px;
}

.exp-drawer-footer {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  padding: 20px 32px;
  border-top: 1px solid var(--border);
  background: var(--bg-alt);
  flex-shrink: 0;
}

/* ── 9. Form Styles (Enhanced) ────────────────── */
.exp-form-section {
  margin-bottom: 28px;
}
.exp-form-section:last-of-type {
  margin-bottom: 0;
}

.exp-form-group {
  margin-bottom: 16px;
}

.exp-form-group label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.exp-form-group label .required {
  color: var(--danger);
}

.exp-form-group input,
.exp-form-group select,
.exp-form-group textarea {
  width: 100%;
  padding: 10px 14px;
  font-size: 0.875rem;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
  font-family: inherit;
  color: var(--text);
  box-sizing: border-box;
}

.exp-form-group input:focus,
.exp-form-group select:focus,
.exp-form-group textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}

.exp-form-group textarea {
  resize: vertical;
  min-height: 60px;
}

.exp-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* ── 10. File Upload Dropzone ─────────────────── */
.exp-upload-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.exp-dropzone {
  position: relative;
  border: 2px dashed var(--border);
  border-radius: var(--radius-md);
  padding: 32px 24px;
  text-align: center;
  cursor: pointer;
  transition: all var(--transition);
  background: var(--bg);
}
.exp-dropzone:hover,
.exp-dropzone.dragover {
  border-color: var(--primary);
  background: rgba(37, 99, 235, 0.03);
}
.exp-dropzone.dragover {
  border-style: solid;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}

.exp-file-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.exp-dropzone-icon {
  color: var(--text-muted);
  margin-bottom: 12px;
  opacity: 0.6;
}
.exp-dropzone.dragover .exp-dropzone-icon {
  color: var(--primary);
  opacity: 1;
}

.exp-dropzone-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}

.exp-dropzone-hint {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.exp-dropzone-browse {
  color: var(--primary);
  font-weight: 600;
  text-decoration: underline;
}

.exp-dropzone-formats {
  font-size: 0.6875rem;
  color: var(--text-muted);
  opacity: 0.7;
}

/* ── 11. File Preview Cards ───────────────────── */
.exp-file-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.exp-file-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  animation: fadeInUp 0.25s ease;
}

.exp-file-thumb {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--border);
}

.exp-file-icon {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.125rem;
  font-weight: 700;
}
.exp-file-icon.pdf { background: rgba(239, 68, 68, 0.08); color: var(--danger); }
.exp-file-icon.xlsx { background: rgba(16, 185, 129, 0.08); color: var(--success); }
.exp-file-icon.docx { background: rgba(37, 99, 235, 0.08); color: var(--primary); }
.exp-file-icon.img { background: rgba(139, 92, 246, 0.08); color: #8B5CF6; }

.exp-file-info {
  flex: 1;
  min-width: 0;
}

.exp-file-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.exp-file-size {
  font-size: 0.6875rem;
  color: var(--text-muted);
}

.exp-file-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.exp-file-action-btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
}
.exp-file-action-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.exp-file-action-btn.remove:hover {
  border-color: var(--danger);
  color: var(--danger);
}

/* ── 12. Save Button with Loading ─────────────── */
.exp-save-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 32px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #fff;
  background: var(--primary);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  box-shadow: var(--shadow-primary);
  transition: all var(--transition);
  min-width: 160px;
}
.exp-save-btn:hover {
  background: var(--primary-dark);
}
.exp-save-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.exp-save-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}
.exp-save-spinner.hidden {
  display: none;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ── 13. Empty State (Hero) ───────────────────── */
.exp-empty-state {
  text-align: center;
  padding: 48px 24px;
}

.exp-empty-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  color: var(--text-muted);
  opacity: 0.5;
}

.exp-empty-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}

.exp-empty-hint {
  font-size: 0.875rem;
  color: var(--text-muted);
}

.exp-empty-hero {
  text-align: center;
  padding: 64px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.exp-empty-hero.hidden {
  display: none;
}

.exp-empty-illustration {
  margin-bottom: 24px;
}

.exp-empty-hero .exp-empty-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}

.exp-empty-hero .exp-empty-desc {
  font-size: 0.9375rem;
  color: var(--text-muted);
  max-width: 400px;
  margin-bottom: 24px;
  line-height: 1.6;
}
.exp-empty-formats {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 12px;
  opacity: 0.7;
}

/* ── 14. Receipt Viewer (Fullscreen) ──────────── */
.exp-viewer-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.exp-viewer-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}
.exp-viewer-overlay.hidden {
  display: none;
}

.exp-viewer {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.exp-viewer-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 24px;
  color: #fff;
  flex-shrink: 0;
}

.exp-viewer-counter {
  font-size: 0.875rem;
  font-weight: 600;
  opacity: 0.7;
}

.exp-viewer-filename {
  font-size: 0.875rem;
  opacity: 0.9;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.exp-viewer-actions {
  display: flex;
  gap: 8px;
}

.exp-viewer-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  text-decoration: none;
}
.exp-viewer-btn:hover {
  background: rgba(255, 255, 255, 0.15);
}

.exp-viewer-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow: auto;
}
.exp-viewer-body img {
  max-width: 90%;
  max-height: 80vh;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
.exp-viewer-body iframe {
  width: 80%;
  height: 80vh;
  border: none;
  border-radius: 8px;
  background: #fff;
}

.exp-viewer-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  z-index: 10001;
}
.exp-viewer-nav:hover {
  background: rgba(255, 255, 255, 0.2);
}
.exp-viewer-prev {
  left: 24px;
}
.exp-viewer-next {
  right: 24px;
}
.exp-viewer-nav:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* ── 15. Expense Detail Drawer Content ────────── */
.exp-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 28px;
}

.exp-detail-item label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.exp-detail-item span {
  font-size: 0.9375rem;
  color: var(--text);
  font-weight: 500;
}

.exp-detail-item.full {
  grid-column: 1 / -1;
}

.exp-detail-amount {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.exp-detail-attachments {
  margin-bottom: 28px;
}

.exp-detail-attachments h4 {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

.exp-detail-file-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}

.exp-detail-file {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
  transition: all var(--transition);
}
.exp-detail-file:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-sm);
}

.exp-detail-file-preview {
  height: 80px;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.exp-detail-file-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.exp-detail-file-meta {
  padding: 8px 10px;
}

.exp-detail-file-name {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.exp-detail-file-size {
  font-size: 0.625rem;
  color: var(--text-muted);
}

.exp-timeline {
  border-left: 2px solid var(--border);
  margin-left: 8px;
  padding-left: 20px;
}

.exp-timeline-item {
  position: relative;
  padding-bottom: 20px;
}
.exp-timeline-item:last-child {
  padding-bottom: 0;
}

.exp-timeline-dot {
  position: absolute;
  left: -27px;
  top: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--primary);
  border: 2px solid var(--card);
}

.exp-timeline-action {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text);
}

.exp-timeline-meta {
  font-size: 0.6875rem;
  color: var(--text-muted);
  margin-top: 2px;
}

/* ── 16. Receipt Badge in Table Row ───────────── */
.exp-receipt-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 500;
  background: rgba(37, 99, 235, 0.06);
  color: var(--primary);
  cursor: pointer;
  transition: all var(--transition);
}
.exp-receipt-badge:hover {
  background: rgba(37, 99, 235, 0.12);
}
.exp-receipt-badge.empty {
  background: var(--bg-alt);
  color: var(--text-muted);
  cursor: default;
}

/* ── 17. Dark Mode Overrides ──────────────────── */
[data-theme="dark"] .exp-kpi-card {
  background: #1E293B;
  border-color: #334155;
}
[data-theme="dark"] .exp-kpi-card:hover {
  border-color: var(--primary-light);
}

[data-theme="dark"] .exp-drawer {
  background: #1A1E2E;
  border-color: #2A2D3D;
}
[data-theme="dark"] .exp-drawer-header {
  border-color: #2A2D3D;
}
[data-theme="dark"] .exp-drawer-footer {
  border-color: #2A2D3D;
  background: #0F172A;
}
[data-theme="dark"] .exp-drawer-close {
  background: #334155;
  border-color: #475569;
}

[data-theme="dark"] .exp-form-group input,
[data-theme="dark"] .exp-form-group select,
[data-theme="dark"] .exp-form-group textarea {
  background: #0F172A;
  border-color: #334155;
}

[data-theme="dark"] .exp-dropzone {
  background: #0F172A;
  border-color: #334155;
}

[data-theme="dark"] .exp-file-card {
  background: #0F172A;
  border-color: #334155;
}

[data-theme="dark"] .exp-file-action-btn {
  background: #1A1E2E;
  border-color: #334155;
}

[data-theme="dark"] .exp-modal {
  background: #1E293B;
  border: 1px solid #334155;
}
[data-theme="dark"] .exp-modal.exp-modal-sm {
  background: #1A1E2E;
}
[data-theme="dark"] .exp-modal-close {
  background: #334155;
}

[data-theme="dark"] .exp-detail-file {
  border-color: #334155;
}

[data-theme="dark"] .exp-timeline-dot {
  border-color: #1A1E2E;
}

[data-theme="dark"] .exp-chart-bar {
  opacity: 0.9;
}
[data-theme="dark"] .exp-bar-track {
  background: #334155;
}

[data-theme="dark"] .exp-category-badge {
  background: #334155;
}

[data-theme="dark"] .exp-action-btn {
  background: #1E293B;
  border-color: #334155;
}

[data-theme="dark"] .exp-page-btn {
  background: #1E293B;
  border-color: #334155;
}
[data-theme="dark"] .exp-page-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

[data-theme="dark"] .exp-analytics-btn {
  background: #0F172A;
  border-color: #334155;
  color: #94A3B8;
}
[data-theme="dark"] .exp-analytics-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

[data-theme="dark"] .exp-filters input,
[data-theme="dark"] .exp-filters select {
  background: #0F172A;
  border-color: #334155;
}

[data-theme="dark"] .btn-icon {
  background: #1E293B;
  border-color: #334155;
  color: #94A3B8;
}

[data-theme="dark"] .btn-outline-sm {
  background: #1E293B;
  border-color: #334155;
  color: #CBD5E1;
}
[data-theme="dark"] .btn-outline-sm:hover {
  background: #334155;
  border-color: #475569;
}

[data-theme="dark"] .exp-receipt-badge {
  background: rgba(37, 99, 235, 0.12);
}
[data-theme="dark"] .exp-receipt-badge.empty {
  background: #334155;
}

/* ── 18. Responsive Breakpoints ───────────────── */
@media (max-width: 1024px) {
  .exp-kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .exp-kpi-grid {
    grid-template-columns: 1fr;
  }
  .exp-form-row {
    grid-template-columns: 1fr;
  }
  .exp-filters {
    flex-direction: column;
  }
  .exp-search {
    max-width: none;
  }
  .exp-drawer {
    max-width: 100%;
  }
  .exp-drawer-header,
  .exp-drawer-body,
  .exp-drawer-footer {
    padding-left: 20px;
    padding-right: 20px;
  }
  .exp-detail-grid {
    grid-template-columns: 1fr;
  }
  .exp-viewer-nav {
    display: none;
  }
  .exp-chart-bars {
    height: 160px;
    overflow-x: auto;
  }
}

@media (max-width: 480px) {
  .exp-kpi-card {
    padding: 16px;
  }
  .exp-add-btn {
    padding: 10px 16px;
    font-size: 0.8125rem;
  }
  .exp-drawer-header {
    padding: 20px 16px 16px;
  }
  .exp-drawer-body {
    padding: 20px 16px;
  }
}

/* ---------- Collections Grid ---------- */
.coll-controls {
  display: flex; align-items: center; gap: 16px; margin-bottom: 20px; flex-wrap: wrap;
}
.coll-month-nav {
  display: flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 6px 12px;
}
.coll-nav-btn {
  background: none; border: none; cursor: pointer; padding: 4px; border-radius: 6px;
  color: var(--text-muted); display: flex; align-items: center;
}
.coll-nav-btn:hover { background: var(--bg-alt); color: var(--text); }
.coll-month-label { font-weight: 600; font-size: 0.9375rem; color: var(--text); min-width: 120px; text-align: center; }
.coll-stats {
  display: flex; gap: 16px; font-size: 0.8125rem; color: var(--text-muted); flex: 1;
}
.coll-stats .coll-stat-item { display: flex; align-items: center; gap: 4px; }
.coll-stat-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.coll-stat-dot.paid { background: var(--success); }
.coll-stat-dot.unpaid { background: var(--danger); }
.coll-filter {
  padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 0.8125rem; background: var(--card); color: var(--text); font-family: var(--font);
}
.coll-grid-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.coll-grid-table th {
  text-align: left; padding: 10px 14px; font-size: 0.75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted);
  border-bottom: 2px solid var(--border); white-space: nowrap;
}
.coll-grid-table td { padding: 12px 14px; border-bottom: 1px solid var(--border-light); vertical-align: middle; }
.coll-grid-table tr:last-child td { border-bottom: none; }
.coll-grid-table tr:hover { background: var(--bg-alt); }
.coll-th-unit { width: 90px; }
.coll-th-owner { min-width: 120px; }
.coll-th-due { width: 110px; }
.coll-th-status { width: 130px; }
.coll-th-mode { width: 110px; }
.coll-th-date { width: 110px; }

.coll-status-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px;
  border-radius: var(--radius-full); font-size: 0.8125rem; font-weight: 500;
  cursor: pointer; border: none; font-family: var(--font); transition: var(--transition);
}
.coll-status-btn.unpaid {
  background: rgba(239,68,68,0.08); color: var(--danger); border: 1px solid rgba(239,68,68,0.2);
}
.coll-status-btn.unpaid:hover { background: rgba(239,68,68,0.15); }
.coll-status-btn.paid {
  background: rgba(16,185,129,0.08); color: var(--success); border: 1px solid rgba(16,185,129,0.2);
}
.coll-status-btn.paid:hover { background: rgba(16,185,129,0.15); }
.coll-check { width: 16px; height: 16px; }

.coll-mode-tag {
  font-size: 0.75rem; padding: 2px 8px; border-radius: var(--radius-full);
  background: var(--bg-alt); color: var(--text-muted); display: inline-block;
}
.coll-date-text { font-size: 0.8125rem; color: var(--text-muted); }
.coll-empty { text-align: center; padding: 40px 20px; color: var(--text-muted); }

.coll-modal-overlay {
  position: fixed; inset: 0; background: rgba(15,23,42,0.5); z-index: 1000;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.coll-modal-overlay.hidden { display: none; }
.coll-modal {
  background: var(--card); border-radius: var(--radius-lg); padding: 24px;
  width: 100%; max-width: 400px; box-shadow: var(--shadow-2xl);
}
.coll-modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.coll-modal-header h3 { font-size: 1.125rem; font-weight: 600; color: var(--text); }
.coll-modal-close { background: none; border: none; font-size: 24px; cursor: pointer; color: var(--text-muted); padding: 0 4px; }
.coll-modal-close:hover { color: var(--text); }
.coll-modal-field { margin-bottom: 14px; }
.coll-modal-field label { display: block; font-size: 0.8125rem; font-weight: 500; color: var(--text-secondary); margin-bottom: 4px; }
.coll-modal-field input, .coll-modal-field select {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 0.875rem; font-family: var(--font); background: var(--bg); color: var(--text);
}
.coll-modal-field input:focus, .coll-modal-field select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,0.1); }

@media (max-width: 768px) {
  .coll-controls { flex-direction: column; align-items: stretch; }
  .coll-stats { justify-content: center; }
  .coll-th-mode, .coll-th-date { display: none; }
  .coll-grid-table td:nth-child(5), .coll-grid-table td:nth-child(6) { display: none; }
}