/* ═══════════════════════════════════════════════════════════════════
   DESIGN SYSTEM — WealthOS
   Aesthetic: Refined Navy Fintech — precision, trust, understated luxury
   Font: Sora (UI) + Playfair Display (hero numbers) + DM Mono (data)
═══════════════════════════════════════════════════════════════════ */

:root {
  --navy:        #0D1F4E;
  --navy-mid:    #1E3A8A;
  --blue:        #2563EB;
  --blue-light:  #3B82F6;
  --sky:         #EFF6FF;
  --sky-mid:     #DBEAFE;
  --teal:        #0EA5E9;
  --emerald:     #10B981;
  --red:         #EF4444;
  --amber:       #F59E0B;
  --gold:        #D97706;

  --ink:         #0F172A;
  --ink-mid:     #334155;
  --ink-soft:    #64748B;
  --ink-faint:   #94A3B8;
  --line:        #E2E8F0;
  --line-soft:   #F1F5F9;
  --white:       #FFFFFF;
  --surface:     #F8FAFC;
  --card:        #FFFFFF;

  --radius-sm:   6px;
  --radius:      12px;
  --radius-lg:   18px;
  --radius-xl:   24px;

  --shadow-xs:   0 1px 2px rgba(13,31,78,.04);
  --shadow-sm:   0 2px 8px rgba(13,31,78,.08);
  --shadow:      0 4px 20px rgba(13,31,78,.10);
  --shadow-lg:   0 8px 40px rgba(13,31,78,.14);

  --sidebar-w:   248px;
  --header-h:    64px;
  --mob-nav-h:   64px;

  --font-ui:     'Plus Jakarta Sans', sans-serif;
  --font-hero:   'Bricolage Grotesque', sans-serif;
  --font-mono:   'DM Mono', monospace;
}

[data-theme="dark"] {
  --ink:         #F1F5F9;
  --ink-mid:     #CBD5E1;
  --ink-soft:    #94A3B8;
  --ink-faint:   #64748B;
  --line:        #1E293B;
  --line-soft:   #0F172A;
  --white:       #1E293B;
  --surface:     #0F172A;
  --card:        #1E293B;
  --sky:         #0F1F3F;
  --sky-mid:     #1E3560;
  --navy-mid:    #3B82F6;
  --shadow-xs:   0 1px 2px rgba(0,0,0,.2);
  --shadow-sm:   0 2px 8px rgba(0,0,0,.3);
  --shadow:      0 4px 20px rgba(0,0,0,.4);
  --shadow-lg:   0 8px 40px rgba(0,0,0,.5);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }

html { font-size: 15px; }

body {
  font-family: var(--font-ui);
  background: var(--surface);
  color: var(--ink);
  min-height: 100vh;
  overflow-x: hidden;
  transition: background .3s, color .3s;
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 99px; }

/* ── LAYOUT ── */
.app-shell {
  display: flex;
  min-height: 100vh;
}

/* ══════════════════════════════════════════
   SIDEBAR
══════════════════════════════════════════ */
.sidebar {
  grid-row: 1 / -1;
  background: var(--navy);
  position: fixed;
  left: 0; top: 0; bottom: 0;
  width: var(--sidebar-w);
  display: flex;
  flex-direction: column;
  z-index: 200;
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}

.sidebar-logo {
  padding: 20px 20px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.logo-mark {
  width: 36px; height: 36px;
  background: linear-gradient(135deg, var(--blue-light), var(--teal));
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  font-weight: 800;
  color: white;
  font-family: var(--font-hero);
  flex-shrink: 0;
}

.logo-text {
  font-size: .95rem;
  font-weight: 700;
  color: white;
  letter-spacing: -.3px;
}
.logo-sub {
  font-size: .65rem;
  color: rgba(255,255,255,.45);
  font-weight: 400;
  letter-spacing: .4px;
  text-transform: uppercase;
}

/* Family Switcher */
.family-switcher {
  margin: 14px 12px;
  background: rgba(255,255,255,.07);
  border-radius: var(--radius);
  padding: 10px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background .2s;
}
.family-switcher:hover { background: rgba(255,255,255,.12); }
.family-avatar-stack { display: flex; }
.family-avatar-stack .av {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 2px solid var(--navy);
  margin-left: -6px;
  font-size: .6rem;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  color: white;
}
.family-avatar-stack .av:first-child { margin-left: 0; }
.family-switcher-info { flex: 1; min-width: 0; }
.family-name { font-size: .8rem; font-weight: 600; color: white; }
.family-view { font-size: .68rem; color: rgba(255,255,255,.5); }
.family-chevron { color: rgba(255,255,255,.4); font-size: .8rem; }

/* Nav */
.sidebar-nav {
  flex: 1;
  padding: 8px 12px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-section-label {
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(255,255,255,.3);
  padding: 12px 8px 4px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: rgba(255,255,255,.6);
  font-size: .82rem;
  font-weight: 500;
  transition: all .15s;
  text-decoration: none;
  position: relative;
}
.nav-item:hover { background: rgba(255,255,255,.08); color: white; }
.nav-item.active {
  background: rgba(59,130,246,.25);
  color: var(--blue-light);
}
.nav-item.active::before {
  content: '';
  position: absolute;
  left: -12px; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 20px;
  background: var(--blue-light);
  border-radius: 0 3px 3px 0;
}
.nav-icon { width: 18px; text-align: center; font-size: 15px; flex-shrink: 0; }
.nav-badge {
  margin-left: auto;
  background: var(--red);
  color: white;
  font-size: .6rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 99px;
  min-width: 18px;
  text-align: center;
}

/* Sidebar bottom */
.sidebar-bottom {
  padding: 12px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.plan-badge {
  background: linear-gradient(135deg, #1D4ED8, #0EA5E9);
  border-radius: var(--radius);
  padding: 12px;
  margin-bottom: 10px;
}
.plan-badge-label { font-size: .65rem; color: rgba(255,255,255,.7); margin-bottom: 2px; letter-spacing: .5px; text-transform: uppercase; }
.plan-badge-name { font-size: .85rem; font-weight: 700; color: white; margin-bottom: 6px; }
.plan-badge-btn {
  display: block;
  background: white;
  color: var(--navy);
  text-align: center;
  font-size: .72rem;
  font-weight: 700;
  padding: 5px;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
}

.sidebar-user {
  display: flex; align-items: center; gap: 10px;
  padding: 8px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background .15s;
}
.sidebar-user:hover { background: rgba(255,255,255,.07); }
.sidebar-user-av {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue-light), var(--teal));
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem; font-weight: 700; color: white;
}
.sidebar-user-name { font-size: .8rem; font-weight: 600; color: rgba(255,255,255,.85); }
.sidebar-user-email { font-size: .65rem; color: rgba(255,255,255,.4); }

/* ══════════════════════════════════════════
   TOP HEADER
══════════════════════════════════════════ */
.header {
  position: sticky;
  top: 0;
  height: var(--header-h);
  background: var(--card);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 12px;
  z-index: 100;
  transition: background .3s;
  min-width: 0;
}

.header-title { font-size: 1rem; font-weight: 700; color: var(--ink); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.header-sub { font-size: .75rem; font-weight: 400; color: var(--ink-soft); margin-left: 8px; }

.header-actions { display: flex; align-items: center; gap: 10px; }

.header-btn {
  width: 36px; height: 36px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--ink-soft);
  font-size: 14px;
  transition: all .15s;
  position: relative;
  flex-shrink: 0;
}
.header-btn:hover { background: var(--sky-mid); color: var(--blue); border-color: var(--sky-mid); }
.header-btn .badge {
  position: absolute; top: -4px; right: -4px;
  width: 16px; height: 16px;
  background: var(--red);
  border-radius: 50%; border: 2px solid var(--card);
  font-size: .55rem; font-weight: 700;
  color: white; display: flex; align-items: center; justify-content: center;
}

/* Menu button hidden by default, shown on mobile via CSS */
#menu-btn { display: none; }
@media (max-width: 768px) {
  #menu-btn { display: flex !important; }
}

.theme-toggle {
  background: none; border: none;
  width: 36px; height: 36px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--ink-soft);
  font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.theme-toggle:hover { background: var(--sky-mid); color: var(--blue); }

/* ══════════════════════════════════════════
   MAIN CONTENT
══════════════════════════════════════════ */
.content-wrap {
  margin-left: 252px;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.main {
  padding: 24px;
  flex: 1;
}

/* ── SCREEN SWITCHING ── */
.screen { display: none; animation: fadeIn .25s ease; }
.screen.active { display: block; }
@keyframes fadeIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }

/* ══════════════════════════════════════════
   CARDS
══════════════════════════════════════════ */
.card {
  background: var(--card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-xs);
  transition: box-shadow .2s, background .3s;
}
.card:hover { box-shadow: var(--shadow-sm); }
.card-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--line);
}
.card-title { font-size: .85rem; font-weight: 700; color: var(--ink); }
.card-body { padding: 20px; }
.card-action {
  font-size: .72rem; font-weight: 600; color: var(--blue);
  cursor: pointer; text-decoration: none;
  transition: color .15s;
}
.card-action:hover { color: var(--navy); }

/* ══════════════════════════════════════════
   STAT CARDS — Net Worth etc.
══════════════════════════════════════════ */
.stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 20px;
}
@media (min-width: 900px) {
  .stat-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 16px !important; }
}

.stat-card {
  background: var(--card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  padding: 20px;
  position: relative;
  overflow: hidden;
  transition: all .2s;
  min-width: 0;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }

.stat-card.featured {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%);
  border-color: transparent;
  color: white;
}

.stat-card::after {
  content: '';
  position: absolute;
  top: -20px; right: -20px;
  width: 80px; height: 80px;
  background: rgba(59,130,246,.08);
  border-radius: 50%;
}

.stat-label {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 6px;
}
.stat-card.featured .stat-label { color: rgba(255,255,255,.55); }

.stat-value {
  font-family: var(--font-hero);
  font-size: clamp(.95rem, 3.5vw, 1.65rem);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.1;
  letter-spacing: -.5px;
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stat-card.featured .stat-value { color: white; }

.stat-change {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .72rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 99px;
}
.stat-change.up { background: rgba(16,185,129,.12); color: var(--emerald); }
.stat-change.down { background: rgba(239,68,68,.12); color: var(--red); }
.stat-card.featured .stat-change.up { background: rgba(16,185,129,.25); color: #6EE7B7; }

.stat-icon {
  position: absolute;
  top: 16px; right: 16px;
  font-size: 20px;
  opacity: .7;
}

/* ══════════════════════════════════════════
   DASHBOARD LAYOUT
══════════════════════════════════════════ */
.dash-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 20px;
  margin-bottom: 20px;
}

.dash-col-left { display: flex; flex-direction: column; gap: 20px; }
.dash-col-right { display: flex; flex-direction: column; gap: 20px; }

/* Charts */
.chart-wrap {
  position: relative;
  height: 220px;
}

/* ── MEMBER TABS ── */
.member-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.member-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 99px;
  cursor: pointer;
  font-size: .78rem;
  font-weight: 600;
  border: 1.5px solid var(--line);
  color: var(--ink-soft);
  background: var(--card);
  transition: all .2s;
}
.member-tab:hover { border-color: var(--blue-light); color: var(--blue); }
.member-tab.active {
  background: var(--navy-mid);
  border-color: var(--navy-mid);
  color: white;
  box-shadow: 0 4px 12px rgba(30,58,138,.3);
}
.member-tab .av-sm {
  width: 22px; height: 22px;
  border-radius: 50%;
  font-size: .6rem;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  color: white;
}

/* ── TRANSACTION TABLE ── */
.txn-table { width: 100%; border-collapse: collapse; }
.txn-table th {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--ink-faint);
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}
.txn-table td {
  padding: 11px 12px;
  font-size: .8rem;
  color: var(--ink-mid);
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
}
.txn-table tr:last-child td { border-bottom: none; }
.txn-table tr:hover td { background: var(--sky); }

.txn-icon {
  width: 32px; height: 32px;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
}

.amount-up { color: var(--emerald); font-weight: 700; font-family: var(--font-mono); }
.amount-down { color: var(--red); font-weight: 700; font-family: var(--font-mono); }
.amount-neutral { color: var(--ink-mid); font-weight: 600; font-family: var(--font-mono); }

/* ── GOAL CARDS ── */
.goal-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 18px;
  transition: all .2s;
}
.goal-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }

.goal-header { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; flex-wrap: nowrap; }
.goal-emoji { font-size: 24px; line-height: 1; flex-shrink: 0; }
.goal-info { flex: 1; min-width: 0; }
.goal-name { font-size: .9rem; font-weight: 700; color: var(--ink); margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.goal-target { font-size: .72rem; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.goal-pct { font-family: var(--font-mono); font-size: .85rem; font-weight: 500; color: var(--blue); flex-shrink: 0; }

.progress-track {
  width: 100%;
  height: 6px;
  background: var(--line-soft);
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 8px;
}
.progress-fill {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--blue-light), var(--teal));
  transition: width .8s cubic-bezier(.4,0,.2,1);
}
.progress-fill.warning { background: linear-gradient(90deg, var(--amber), var(--gold)); }
.progress-fill.success { background: linear-gradient(90deg, var(--emerald), #34D399); }

.goal-meta { display: flex; justify-content: space-between; font-size: .7rem; color: var(--ink-faint); }

/* ── REMINDER ITEMS ── */
.reminder-item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line-soft);
  min-width: 0;
}
.reminder-item:last-child { border-bottom: none; }
.reminder-dot {
  width: 36px; height: 36px;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}
.reminder-dot.overdue { background: rgba(239,68,68,.1); }
.reminder-dot.soon { background: rgba(245,158,11,.1); }
.reminder-dot.upcoming { background: rgba(59,130,246,.08); }

.reminder-name { font-size: .82rem; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reminder-sub { font-size: .7rem; color: var(--ink-soft); }
.reminder-amount { font-family: var(--font-mono); font-size: .82rem; font-weight: 600; color: var(--ink); margin-left: auto; text-align: right; flex-shrink: 0; }
.reminder-due { font-size: .65rem; color: var(--ink-faint); }

.pill {
  display: inline-flex; align-items: center;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
}
.pill.overdue { background: rgba(239,68,68,.1); color: var(--red); }
.pill.due-soon { background: rgba(245,158,11,.1); color: var(--gold); }
.pill.active { background: rgba(16,185,129,.1); color: var(--emerald); }
.pill.pending { background: rgba(100,116,139,.1); color: var(--ink-soft); }
.pill.asset { background: rgba(59,130,246,.1); color: var(--blue); }
.pill.liability { background: rgba(239,68,68,.1); color: var(--red); }
.pill.premium { background: linear-gradient(135deg, var(--blue-light), var(--teal)); color: white; }
.pill.free { background: var(--line-soft); color: var(--ink-soft); }

/* ── ASSET ALLOCATION ── */
.alloc-list { margin-top: 12px; }
.alloc-item {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 0;
}
.alloc-color { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.alloc-name { font-size: .78rem; color: var(--ink-mid); flex: 1; }
.alloc-pct { font-family: var(--font-mono); font-size: .75rem; color: var(--ink-soft); }
.alloc-val { font-family: var(--font-mono); font-size: .78rem; font-weight: 600; color: var(--ink); }

/* ══════════════════════════════════════════
   ACCOUNTS PAGE
══════════════════════════════════════════ */
.accounts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.account-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 18px;
  position: relative;
  overflow: hidden;
  transition: all .2s;
  cursor: pointer;
}
.account-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.account-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--blue-light), var(--teal));
}
.account-card.liability::before { background: linear-gradient(90deg, var(--red), #F97316); }

.account-icon-wrap {
  width: 44px; height: 44px;
  border-radius: var(--radius);
  background: var(--sky);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  margin-bottom: 12px;
}
.account-card.liability .account-icon-wrap { background: rgba(239,68,68,.08); }

.account-name { font-size: .88rem; font-weight: 700; color: var(--ink); margin-bottom: 2px; }
.account-provider { font-size: .72rem; color: var(--ink-soft); margin-bottom: 12px; }
.account-value {
  font-family: var(--font-hero);
  font-size: clamp(1rem, 3vw, 1.3rem);
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.account-gain {
  font-size: .72rem;
  font-weight: 600;
  display: flex; align-items: center; gap: 4px;
}
.account-gain.up { color: var(--emerald); }
.account-gain.down { color: var(--red); }

.account-member-tag {
  display: flex; align-items: center; gap: 5px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
  font-size: .7rem;
  color: var(--ink-faint);
}
.account-member-av {
  width: 16px; height: 16px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .5rem; font-weight: 700; color: white;
}

/* SECTION TABS */
.section-tabs {
  display: flex; align-items: center; gap: 4px;
  background: var(--line-soft);
  border-radius: var(--radius);
  padding: 3px;
  margin-bottom: 20px;
}
.section-tab {
  padding: 7px 16px;
  border-radius: calc(var(--radius) - 2px);
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--ink-soft);
  transition: all .2s;
}
.section-tab.active {
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--shadow-xs);
}

/* PAGE HEADER */
.page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 24px;
}
.page-title {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -.5px;
}
.page-subtitle { font-size: .78rem; color: var(--ink-soft); margin-top: 2px; }

.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 18px;
  border-radius: var(--radius);
  font-size: .8rem;
  font-weight: 700;
  font-family: var(--font-ui);
  cursor: pointer;
  border: none;
  transition: all .2s;
  text-decoration: none;
}
.btn-primary {
  background: var(--navy-mid);
  color: white;
}
.btn-primary:hover { background: var(--navy); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(30,58,138,.35); }
.btn-secondary {
  background: var(--card);
  color: var(--ink);
  border: 1.5px solid var(--line);
}
.btn-secondary:hover { border-color: var(--blue-light); color: var(--blue); }
.btn-danger { background: rgba(239,68,68,.1); color: var(--red); }
.btn-danger:hover { background: var(--red); color: white; }
.btn-sm { padding: 6px 12px; font-size: .72rem; }
.btn-icon { width: 34px; height: 34px; padding: 0; justify-content: center; }

/* ══════════════════════════════════════════
   FILTER BAR
══════════════════════════════════════════ */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.filter-search {
  display: flex; align-items: center; gap: 8px;
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: 0 12px;
  flex: 1; min-width: 200px;
  transition: border-color .2s;
}
.filter-search:focus-within { border-color: var(--blue-light); }
.filter-search input {
  border: none; background: none;
  font-size: .82rem; font-family: var(--font-ui);
  color: var(--ink);
  padding: 8px 0;
  outline: none;
  flex: 1;
}
.filter-search input::placeholder { color: var(--ink-faint); }
.filter-search-icon { color: var(--ink-faint); font-size: 13px; }

.filter-select {
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 12px;
  font-size: .8rem;
  font-family: var(--font-ui);
  color: var(--ink);
  outline: none;
  cursor: pointer;
  transition: border-color .2s;
}
.filter-select:focus { border-color: var(--blue-light); }

/* ══════════════════════════════════════════
   MODAL / DRAWER
══════════════════════════════════════════ */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(13,31,78,.5);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity .25s;
}
.modal-overlay.open { opacity: 1; pointer-events: all; }

.modal {
  background: var(--card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  width: 90%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  transform: scale(.96) translateY(10px);
  transition: transform .25s cubic-bezier(.4,0,.2,1);
}
.modal-overlay.open .modal { transform: scale(1) translateY(0); }

.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: var(--card); z-index: 1;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
.modal-title { font-size: 1rem; font-weight: 800; color: var(--ink); }
.modal-close {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--line-soft);
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-soft); font-size: 14px;
  transition: all .15s;
}
.modal-close:hover { background: var(--red); color: white; }
.modal-body { padding: 20px 24px 24px; }

/* ── FORM ELEMENTS ── */
.form-group { margin-bottom: 16px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-label {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.form-control {
  width: 100%;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: 9px 12px;
  font-size: .84rem;
  font-family: var(--font-ui);
  color: var(--ink);
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.form-control:focus {
  border-color: var(--blue-light);
  box-shadow: 0 0 0 3px rgba(59,130,246,.1);
}
.form-control::placeholder { color: var(--ink-faint); }
select.form-control { cursor: pointer; }
textarea.form-control { resize: vertical; min-height: 80px; }

.form-hint { font-size: .68rem; color: var(--ink-faint); margin-top: 4px; }

/* ── TOGGLE ── */
.toggle-wrap { display: flex; align-items: center; gap: 10px; }
.toggle {
  width: 44px; height: 24px;
  background: var(--line);
  border-radius: 99px;
  position: relative;
  cursor: pointer;
  transition: background .2s;
  flex-shrink: 0;
}
.toggle.on { background: var(--blue); }
.toggle::after {
  content: '';
  position: absolute;
  left: 3px; top: 3px;
  width: 18px; height: 18px;
  background: white;
  border-radius: 50%;
  transition: transform .2s;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.toggle.on::after { transform: translateX(20px); }
.toggle-label { font-size: .8rem; color: var(--ink-mid); }

/* ══════════════════════════════════════════
   GOALS PAGE
══════════════════════════════════════════ */
.goals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

/* ══════════════════════════════════════════
   REMINDERS PAGE
══════════════════════════════════════════ */
.reminder-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line-soft);
  transition: background .15s;
}
.reminder-row:hover { background: var(--sky); }

/* ══════════════════════════════════════════
   REPORTS PAGE
══════════════════════════════════════════ */
.report-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 22px;
  display: flex; align-items: center; gap: 16px;
  cursor: pointer;
  transition: all .2s;
}
.report-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--blue-light); }
.report-icon {
  width: 48px; height: 48px;
  border-radius: var(--radius);
  background: var(--sky);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.report-name { font-size: .9rem; font-weight: 700; color: var(--ink); }
.report-desc { font-size: .75rem; color: var(--ink-soft); margin-top: 2px; }
.report-formats { display: flex; gap: 6px; margin-top: 8px; }
.fmt-pill {
  padding: 2px 8px;
  border-radius: 99px;
  font-size: .65rem;
  font-weight: 700;
  border: 1px solid var(--line);
  color: var(--ink-faint);
}

/* ══════════════════════════════════════════
   SUBSCRIPTION PAGE
══════════════════════════════════════════ */
.pricing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 700px;
  margin: 0 auto;
}

.pricing-card {
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-xl);
  padding: 28px;
  transition: all .2s;
  position: relative;
  overflow: hidden;
}
.pricing-card.featured {
  background: linear-gradient(160deg, var(--navy) 0%, #1D4ED8 100%);
  border-color: transparent;
  color: white;
}
.pricing-card.featured * { --ink: white; --ink-mid: rgba(255,255,255,.8); --ink-soft: rgba(255,255,255,.6); --line-soft: rgba(255,255,255,.1); }

.pricing-badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: linear-gradient(135deg, var(--amber), var(--gold));
  color: white;
  font-size: .65rem; font-weight: 800;
  padding: 3px 10px;
  border-radius: 99px;
  margin-bottom: 14px;
  text-transform: uppercase; letter-spacing: .5px;
}

.pricing-name { font-size: 1.1rem; font-weight: 800; margin-bottom: 6px; color: var(--ink); }
.pricing-price {
  font-family: var(--font-hero);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
  margin-bottom: 4px;
}
.pricing-period { font-size: .78rem; color: var(--ink-soft); margin-bottom: 20px; }

.pricing-features { list-style: none; margin-bottom: 24px; }
.pricing-features li {
  display: flex; align-items: center; gap: 8px;
  font-size: .82rem;
  color: var(--ink-mid);
  padding: 5px 0;
}
.pricing-features li::before { content: '✓'; color: var(--emerald); font-weight: 700; }
.pricing-card.featured .pricing-features li::before { color: #6EE7B7; }

/* ══════════════════════════════════════════
   ADMIN PANEL
══════════════════════════════════════════ */
.admin-stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}

/* ══════════════════════════════════════════
   AUTH PAGES
══════════════════════════════════════════ */
.auth-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
}

.auth-left {
  background: linear-gradient(160deg, var(--navy) 0%, #1D4ED8 50%, var(--teal) 100%);
  display: flex; flex-direction: column; justify-content: center;
  padding: 60px;
  position: relative;
  overflow: hidden;
}
.auth-left::before {
  content: '';
  position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Ccircle cx='30' cy='30' r='20'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.auth-left-content { position: relative; z-index: 1; }
.auth-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 48px; }
.auth-logo-mark {
  width: 44px; height: 44px;
  background: rgba(255,255,255,.2);
  backdrop-filter: blur(10px);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 800; color: white; font-family: var(--font-hero);
}
.auth-logo-text { font-size: 1.2rem; font-weight: 800; color: white; }

.auth-hero-title {
  font-family: var(--font-hero);
  font-size: 2.4rem;
  font-weight: 700;
  color: white;
  line-height: 1.2;
  margin-bottom: 16px;
}
.auth-hero-sub { font-size: .9rem; color: rgba(255,255,255,.7); line-height: 1.6; margin-bottom: 32px; }

.auth-features { display: flex; flex-direction: column; gap: 14px; }
.auth-feature {
  display: flex; align-items: center; gap: 12px;
  font-size: .85rem; color: rgba(255,255,255,.8);
}
.auth-feature-icon {
  width: 32px; height: 32px;
  background: rgba(255,255,255,.15);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

.auth-right {
  display: flex; flex-direction: column; justify-content: center;
  padding: 60px;
  background: var(--card);
}

.auth-form-wrap { max-width: 380px; width: 100%; margin: 0 auto; }
.auth-title { font-size: 1.6rem; font-weight: 800; color: var(--ink); margin-bottom: 6px; }
.auth-sub { font-size: .84rem; color: var(--ink-soft); margin-bottom: 30px; }

.google-btn {
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 11px;
  border-radius: var(--radius);
  border: 1.5px solid var(--line);
  background: var(--card);
  font-size: .84rem; font-weight: 700; font-family: var(--font-ui);
  color: var(--ink);
  cursor: pointer;
  transition: all .2s;
  margin-bottom: 20px;
}
.google-btn:hover { border-color: var(--blue-light); box-shadow: 0 4px 12px rgba(59,130,246,.12); }
.google-icon { font-size: 18px; }

.auth-divider {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 20px;
  color: var(--ink-faint); font-size: .75rem;
}
.auth-divider::before, .auth-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--line);
}

/* ══════════════════════════════════════════
   MOBILE BOTTOM NAV
══════════════════════════════════════════ */
.mobile-nav {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0;
  height: var(--mob-nav-h);
  background: var(--card);
  border-top: 1px solid var(--line);
  z-index: 200;
  padding: 0 8px;
  align-items: center;
  justify-content: space-around;
}

.mob-nav-item {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 16px;
  cursor: pointer;
  border-radius: var(--radius);
  transition: all .15s;
  min-width: 56px;
}
.mob-nav-item.active { background: var(--sky-mid); }
.mob-nav-icon { font-size: 18px; }
.mob-nav-label { font-size: .6rem; font-weight: 600; color: var(--ink-faint); }
.mob-nav-item.active .mob-nav-label { color: var(--blue); }

/* ══════════════════════════════════════════
   PROFILE PAGE
══════════════════════════════════════════ */
.profile-hero {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%);
  border-radius: var(--radius-xl);
  padding: 28px;
  display: flex; align-items: center; gap: 20px;
  margin-bottom: 24px;
  color: white;
}
.profile-avatar {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue-light), var(--teal));
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; font-weight: 800; color: white; font-family: var(--font-hero);
  flex-shrink: 0;
  border: 3px solid rgba(255,255,255,.3);
}
.profile-name { font-size: 1.3rem; font-weight: 800; margin-bottom: 3px; }
.profile-email { font-size: .8rem; opacity: .7; }
.profile-plan {
  margin-left: auto;
  background: rgba(255,255,255,.15);
  padding: 8px 16px;
  border-radius: var(--radius);
  font-size: .8rem; font-weight: 700;
}

/* ══════════════════════════════════════════
   MISC UTILITIES
══════════════════════════════════════════ */
.flex { display: flex; }
.flex-center { display: flex; align-items: center; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mb-4 { margin-bottom: 16px; }
.ml-auto { margin-left: auto; }
.text-sm { font-size: .78rem; }
.text-xs { font-size: .7rem; }
.text-muted { color: var(--ink-soft); }
.text-faint { color: var(--ink-faint); }
.font-mono { font-family: var(--font-mono); }
.font-bold { font-weight: 700; }
.w-full { width: 100%; }
.text-right { text-align: right; }
.text-center { text-align: center; }

.divider { height: 1px; background: var(--line); margin: 20px 0; }

.empty-state {
  text-align: center;
  padding: 48px 20px;
  color: var(--ink-soft);
}
.empty-icon { font-size: 40px; margin-bottom: 12px; }
.empty-title { font-size: .95rem; font-weight: 700; color: var(--ink-mid); margin-bottom: 6px; }
.empty-sub { font-size: .8rem; }

/* ── NOTIFICATION TOAST ── */
.toast {
  position: fixed;
  bottom: 24px; right: 24px;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--line);
  padding: 14px 18px;
  display: flex; align-items: center; gap: 12px;
  font-size: .82rem;
  z-index: 9999;
  transform: translateY(80px);
  opacity: 0;
  transition: all .3s cubic-bezier(.4,0,.2,1);
  max-width: 340px;
}
.toast.show { transform: translateY(0); opacity: 1; }
.toast-icon { font-size: 18px; }
.toast-msg { flex: 1; color: var(--ink); font-weight: 500; }

/* ── INSIGHTS CARD ── */
.insight-item {
  display: flex; gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-soft);
}
.insight-item:last-child { border-bottom: none; }
.insight-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 5px;
}
.insight-text { font-size: .8rem; color: var(--ink-mid); line-height: 1.5; }
.insight-bold { font-weight: 700; color: var(--ink); }

/* ── SCROLLABLE HORIZONTAL ── */
.scroll-x { overflow-x: auto; }

/* ── CHART PERIOD BTNS ── */
.period-btns { display: flex; gap: 4px; }
.period-btn {
  padding: 4px 10px;
  border-radius: 6px;
  font-size: .68rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  background: transparent;
  color: var(--ink-faint);
  font-family: var(--font-ui);
  transition: all .15s;
}
.period-btn.active { background: var(--sky-mid); color: var(--blue); }

/* Animations */
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.6} }
.loading { animation: pulse 1.5s infinite; }

@keyframes slideUp {
  from { opacity:0; transform:translateY(20px); }
  to { opacity:1; transform:none; }
}
.stagger > * {
  animation: slideUp .4s ease both;
}
.stagger > *:nth-child(1) { animation-delay: .05s; }
.stagger > *:nth-child(2) { animation-delay: .10s; }
.stagger > *:nth-child(3) { animation-delay: .15s; }
.stagger > *:nth-child(4) { animation-delay: .20s; }
.stagger > *:nth-child(5) { animation-delay: .25s; }
.stagger > *:nth-child(6) { animation-delay: .30s; }

/* ══ RESPONSIVE ══ */
@media (max-width: 768px) {
  :root { --header-h: 56px; }
  .sidebar { transform: translateX(-100%); width: 260px; }
  .sidebar.open { transform: translateX(0); box-shadow: 6px 0 30px rgba(0,0,0,.3); }
  .content-wrap { margin-left: 0; }
  .header { position: sticky; top: 0; }
  #menu-btn { display: flex !important; }
  .main { padding: 12px 12px 80px; }
  .mobile-nav { display: flex; }
  #toast { right: 10px; left: 10px; bottom: 74px; max-width: 100%; }

  /* stat grid: always 2 columns */
  .stat-grid { grid-template-columns: 1fr 1fr !important; gap: 10px; margin-bottom: 16px; }
  .stat-card, .scard { padding: 13px 11px 11px; }
  .stat-icon { display: none !important; }
  .stat-card::after { display: none !important; }
  .stat-value, .scard-val { font-size: 1.1rem !important; }
  .stat-label, .scard-label { font-size: .61rem !important; }
  .stat-change, .scard-change { font-size: .6rem !important; padding: 2px 5px !important; }

  /* member tabs: horizontal scroll, no wrap */
  .member-tabs { flex-wrap: nowrap !important; overflow-x: auto; gap: 6px; margin-bottom: 14px; }
  .member-tabs::-webkit-scrollbar { display: none; }
  .member-tab, .mtab { flex-shrink: 0; padding: 7px 11px; font-size: .73rem; white-space: nowrap; }

  /* dash grid */
  .dash-grid { grid-template-columns: 1fr !important; gap: 12px; }
  .dash-col-left, .dash-col-right, .col { gap: 12px; }

  /* cards */
  .card-header, .ch { padding: 13px 14px 11px; }
  .card-body, .cb { padding: 13px 14px; }

  /* page header */
  .page-header, .pg-head { flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 14px; }
  .page-title, .pg-title { font-size: 1.15rem; }

  /* accounts */
  .accounts-grid, .acct-grid { grid-template-columns: 1fr !important; gap: 10px; }

  /* goals */
  .goals-grid, .goal-grid { grid-template-columns: 1fr !important; gap: 10px; }

  /* admin stats */
  .admin-stat-row, .admin-stat-grid { grid-template-columns: 1fr 1fr !important; gap: 10px; }

  /* profile */
  .profile-hero, .prof-hero { flex-direction: column; align-items: flex-start; padding: 18px; }
  .profile-hero .profile-plan, .prof-hero .prof-plan { margin-left: 0; }

  /* pricing */
  .pricing-grid, .price-grid { grid-template-columns: 1fr !important; }

  /* reports */
  .rep-grid { grid-template-columns: 1fr !important; }

  /* forms */
  .form-row, .fg-row { grid-template-columns: 1fr !important; }
  .modal { width: 95%; }

  /* auth */
  .auth-left { display: none !important; }
  .auth-right { width: 100% !important; padding: 28px 20px !important; }

  /* filter */
  .filter-search, .f-search { min-width: 100%; }

  /* section tabs */
  .section-tabs, .sec-tabs { overflow-x: auto; flex-wrap: nowrap !important; white-space: nowrap; scrollbar-width: none; }
  .section-tab, .stab { flex-shrink: 0; }
}
@media (max-width: 400px) {
  .stat-value, .scard-val { font-size: 1rem !important; }
  .stat-grid { gap: 8px !important; }
  .stat-card, .scard { padding: 11px 9px 9px !important; }
  .main { padding: 10px 10px 80px !important; }
}


/* ═══════════════════════════════════════════════════════
   ACCOUNT DETAIL PAGE
═══════════════════════════════════════════════════════ */

/* Hero banner */
.acct-hero {
  border-radius: 20px;
  padding: 28px 28px 24px;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
  color: #fff;
}
.acct-hero-bg-ppf      { background: linear-gradient(135deg,#0F4C81 0%,#1565C0 60%,#1976D2 100%); }
.acct-hero-bg-gold     { background: linear-gradient(135deg,#7B4F12 0%,#B8860B 55%,#DAA520 100%); }
.acct-hero-bg-stocks   { background: linear-gradient(135deg,#0D3B2E 0%,#0A6040 55%,#10B981 100%); }
.acct-hero-bg-mf       { background: linear-gradient(135deg,#1A1A6E 0%,#2563EB 60%,#3B82F6 100%); }
.acct-hero-bg-property { background: linear-gradient(135deg,#1B2A4A 0%,#1E3A8A 60%,#2563EB 100%); }
.acct-hero-bg-fd       { background: linear-gradient(135deg,#1A3A3A 0%,#0E7490 55%,#0EA5E9 100%); }
.acct-hero-bg-loan     { background: linear-gradient(135deg,#4A0000 0%,#7F1D1D 55%,#EF4444 100%); }
.acct-hero-bg-default  { background: linear-gradient(135deg,#1E3A8A 0%,#2563EB 100%); }

.acct-hero::before {
  content: '';
  position: absolute; top: -40px; right: -40px;
  width: 200px; height: 200px;
  background: rgba(255,255,255,.06);
  border-radius: 50%;
  pointer-events: none;
}
.acct-hero::after {
  content: '';
  position: absolute; bottom: -60px; right: 80px;
  width: 140px; height: 140px;
  background: rgba(255,255,255,.04);
  border-radius: 50%;
  pointer-events: none;
}

.acct-hero-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 20px; position: relative; z-index: 1;
}
.acct-hero-left { display: flex; align-items: center; gap: 14px; }
.acct-hero-icon {
  width: 52px; height: 52px; border-radius: 14px;
  background: rgba(255,255,255,.18);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; flex-shrink: 0;
}
.acct-hero-name  { font-size: 1.2rem; font-weight: 800; letter-spacing: -.3px; margin-bottom: 3px; font-family: 'Bricolage Grotesque', sans-serif; }
.acct-hero-sub   { font-size: .76rem; color: rgba(255,255,255,.65); }
.acct-hero-badge {
  background: rgba(255,255,255,.2);
  border-radius: 99px; padding: 4px 12px;
  font-size: .65rem; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase;
}

.acct-hero-stats {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 0;
  position: relative; z-index: 1;
  background: rgba(0,0,0,.15);
  border-radius: 12px;
  overflow: hidden;
}
.acct-hero-stat {
  padding: 14px 16px;
  border-right: 1px solid rgba(255,255,255,.1);
}
.acct-hero-stat:last-child { border-right: none; }
.ahs-label { font-size: .62rem; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; color: rgba(255,255,255,.55); margin-bottom: 4px; }
.ahs-val   { font-family: 'DM Mono', monospace; font-size: 1.05rem; font-weight: 500; color: #fff; letter-spacing: -.3px; }
.ahs-sub   { font-size: .62rem; color: rgba(255,255,255,.5); margin-top: 2px; }
.ahs-up    { color: #6EE7B7 !important; }
.ahs-down  { color: #FCA5A5 !important; }

/* Period selector tabs */
.period-tabs {
  display: flex; gap: 3px;
  background: var(--line-soft);
  border-radius: 8px; padding: 3px;
}
.ptab {
  padding: 5px 13px; border-radius: 6px;
  font-size: .72rem; font-weight: 600;
  border: none; cursor: pointer;
  background: transparent; color: var(--ink-soft);
  font-family: 'Plus Jakarta Sans', sans-serif;
  transition: all .15s;
}
.ptab.on { background: var(--card); color: var(--ink); box-shadow: var(--shadow-xs); }

/* Chart containers */
.detail-chart-wrap { position: relative; height: 240px; }
.detail-chart-wrap.tall { height: 300px; }

/* KPI row below chart */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 12px;
  margin-top: 16px;
}
@media (max-width: 640px) { .kpi-row { grid-template-columns: 1fr 1fr; } }

.kpi-box {
  background: var(--line-soft);
  border-radius: 10px;
  padding: 12px 14px;
}
.kpi-label { font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--ink-faint); margin-bottom: 4px; }
.kpi-val   { font-family: 'DM Mono', monospace; font-size: 1rem; font-weight: 500; color: var(--ink); }
.kpi-delta { font-size: .66rem; font-weight: 600; margin-top: 2px; }
.kpi-delta.up   { color: var(--emerald); }
.kpi-delta.down { color: var(--red); }

/* Year-on-Year table */
.yoy-table { width: 100%; border-collapse: collapse; }
.yoy-table th {
  font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  color: var(--ink-faint); padding: 0 14px 10px; text-align: left;
  border-bottom: 1px solid var(--line);
}
.yoy-table td {
  padding: 11px 14px; font-size: .8rem; color: var(--ink-mid);
  border-bottom: 1px solid var(--line-soft); vertical-align: middle;
}
.yoy-table tr:last-child td { border-bottom: none; }
.yoy-table tr:hover td { background: var(--sky); }
.yoy-year { font-weight: 700; color: var(--ink); font-size: .82rem; }
.yoy-bar-wrap { flex: 1; height: 6px; background: var(--line-soft); border-radius: 99px; overflow: hidden; max-width: 120px; }
.yoy-bar { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--blue-light), var(--teal)); }

/* Transaction history table */
.txn-history-table { width: 100%; border-collapse: collapse; }
.txn-history-table th {
  font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  color: var(--ink-faint); padding: 0 14px 10px; text-align: left;
  border-bottom: 1px solid var(--line);
}
.txn-history-table td {
  padding: 11px 14px; font-size: .79rem; color: var(--ink-mid);
  border-bottom: 1px solid var(--line-soft); vertical-align: middle;
}
.txn-history-table tr:last-child td { border-bottom: none; }
.txn-history-table tr:hover td { background: var(--sky); }
.txn-type-badge {
  display: inline-flex; align-items: center;
  padding: 3px 9px; border-radius: 99px;
  font-size: .64rem; font-weight: 700;
}
.txn-deposit    { background: rgba(37,99,235,.1);  color: var(--blue); }
.txn-interest   { background: rgba(16,185,129,.1); color: var(--emerald); }
.txn-buy        { background: rgba(37,99,235,.1);  color: var(--blue); }
.txn-sell       { background: rgba(239,68,68,.1);  color: var(--red); }
.txn-dividend   { background: rgba(16,185,129,.1); color: var(--emerald); }
.txn-rent       { background: rgba(16,185,129,.1); color: var(--emerald); }
.txn-emi        { background: rgba(239,68,68,.1);  color: var(--red); }
.txn-premium    { background: rgba(239,68,68,.1);  color: var(--red); }

/* Back button */
.back-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; cursor: pointer;
  font-size: .8rem; font-weight: 600; color: var(--ink-soft);
  font-family: 'Plus Jakarta Sans', sans-serif;
  padding: 0; margin-bottom: 16px;
  transition: color .15s;
}
.back-btn:hover { color: var(--blue); }

/* Section cards in detail page */
.detail-section { margin-bottom: 18px; }

/* Mobile stat hero */
@media (max-width: 680px) {
  .acct-hero-stats { grid-template-columns: 1fr 1fr; }
  .acct-hero-stat:nth-child(2) { border-right: none; }
  .acct-hero { padding: 20px; }
  .acct-hero-name { font-size: 1rem; }
}
@media (max-width: 460px) {
  .acct-hero-stats { grid-template-columns: 1fr 1fr; }
  .ahs-val { font-size: .88rem; }
  .kpi-row { grid-template-columns: 1fr 1fr; }
}

/* ═══════════════════════════════════════════════
   EXPENSES + INCOME SCREENS
═══════════════════════════════════════════════ */

/* Period chip strip */
.chip-strip { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:18px; }
.chip {
  padding:6px 14px; border-radius:99px;
  font-size:.74rem; font-weight:600;
  border:1.5px solid var(--line); background:var(--card);
  color:var(--ink-soft); cursor:pointer; transition:all .15s;
  white-space:nowrap;
}
.chip.on { background:var(--navy-mid); border-color:var(--navy-mid); color:#fff; box-shadow:0 3px 10px rgba(30,58,138,.25); }

/* Category pill list */
.cat-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:10px; margin-bottom:20px;
}
.cat-card {
  background:var(--card); border:1px solid var(--line);
  border-radius:14px; padding:14px 12px;
  display:flex; flex-direction:column; gap:4px;
  transition:all .2s; cursor:default;
}
.cat-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.cat-ico  { font-size:20px; margin-bottom:2px; }
.cat-name { font-size:.72rem; font-weight:600; color:var(--ink-mid); }
.cat-amt  { font-family:'DM Mono',monospace; font-size:.92rem; font-weight:600; color:var(--ink); }
.cat-pct  { font-size:.64rem; color:var(--ink-faint); }

/* Two-col layout for charts row */
.two-col {
  display:grid; grid-template-columns:1fr 340px;
  gap:16px; margin-bottom:16px;
}
@media(max-width:900px){ .two-col { grid-template-columns:1fr; } }

/* Income source cards */
.inc-source-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:12px; margin-bottom:20px;
}
.inc-card {
  background:var(--card); border:1px solid var(--line);
  border-radius:16px; padding:18px 16px;
  position:relative; overflow:hidden; transition:all .2s;
}
.inc-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
}
.inc-card.salary::before   { background:linear-gradient(90deg,#2563EB,#3B82F6); }
.inc-card.business::before { background:linear-gradient(90deg,#059669,#10B981); }
.inc-card.rental::before   { background:linear-gradient(90deg,#D97706,#F59E0B); }
.inc-card.dividend::before { background:linear-gradient(90deg,#7C3AED,#8B5CF6); }
.inc-card.other::before    { background:linear-gradient(90deg,#0E7490,#0EA5E9); }
.inc-card:hover { transform:translateY(-2px); box-shadow:var(--shadow); }
.inc-ico  { font-size:22px; margin-bottom:10px; }
.inc-src  { font-size:.8rem; font-weight:700; color:var(--ink); margin-bottom:2px; }
.inc-who  { font-size:.68rem; color:var(--ink-soft); margin-bottom:10px; }
.inc-amt  { font-family:'DM Mono',monospace; font-size:1.2rem; font-weight:600; color:var(--ink); }
.inc-freq { font-size:.64rem; color:var(--ink-faint); margin-top:2px; }
.inc-trend { display:flex; align-items:center; gap:4px; font-size:.68rem; font-weight:600; margin-top:8px; }
.inc-trend.up { color:var(--emerald); }

/* Salary slip style table */
.salary-slip {
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius-lg); overflow:hidden;
}
.slip-head {
  background:linear-gradient(135deg,var(--navy),var(--navy-mid));
  padding:20px 22px; color:#fff;
  display:flex; justify-content:space-between; align-items:center;
}
.slip-title { font-size:.95rem; font-weight:800; }
.slip-month { font-size:.76rem; color:rgba(255,255,255,.6); }
.slip-body { padding:0; }
.slip-section { padding:14px 22px; border-bottom:1px solid var(--line); }
.slip-section:last-child { border-bottom:none; }
.slip-section-title { font-size:.64rem; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:var(--ink-faint); margin-bottom:10px; }
.slip-row { display:flex; justify-content:space-between; align-items:center; padding:4px 0; }
.slip-label { font-size:.8rem; color:var(--ink-mid); }
.slip-val   { font-family:'DM Mono',monospace; font-size:.8rem; font-weight:600; color:var(--ink); }
.slip-val.green { color:var(--emerald); }
.slip-val.red   { color:var(--red); }
.slip-total-row { display:flex; justify-content:space-between; align-items:center; padding:10px 22px; background:var(--sky); }
.slip-total-label { font-size:.85rem; font-weight:800; color:var(--ink); }
.slip-total-val   { font-family:'DM Mono',monospace; font-size:1.05rem; font-weight:700; color:var(--blue); }

/* Expense row in table */
.exp-cat-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }

/* Add asset wizard */
.asset-type-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
}
@media(max-width:500px){ .asset-type-grid { grid-template-columns:repeat(2,1fr); } }
.asset-type-btn {
  border:2px solid var(--line); border-radius:14px;
  padding:14px 10px; text-align:center; cursor:pointer;
  transition:all .18s; background:var(--card);
}
.asset-type-btn:hover { border-color:var(--blue-light); background:var(--sky); }
.asset-type-btn.picked { border-color:var(--navy-mid); background:var(--sky-mid); }
.atb-icon { font-size:22px; margin-bottom:6px; }
.atb-name { font-size:.72rem; font-weight:700; color:var(--ink); }
.atb-desc { font-size:.62rem; color:var(--ink-faint); margin-top:2px; }

/* Wizard steps */
.wizard-steps { display:flex; gap:0; margin-bottom:22px; }
.wstep {
  flex:1; text-align:center; padding:8px 4px;
  font-size:.68rem; font-weight:600; color:var(--ink-faint);
  border-bottom:2px solid var(--line); transition:all .2s;
}
.wstep.done  { color:var(--emerald); border-color:var(--emerald); }
.wstep.on    { color:var(--blue); border-color:var(--blue); }

/* ═══════════════════════════════════════════════════════════════
   ADMIN SHELL — full dedicated layout
═══════════════════════════════════════════════════════════════ */
#admin-shell {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 500;
  background: var(--surface);
  font-family: 'Plus Jakarta Sans', sans-serif;
}
#admin-shell.open { display: flex; }

/* Admin sidebar */
.adm-sidebar {
  width: 220px;
  flex-shrink: 0;
  background: #0A0F1E;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow-y: auto;
}
.adm-logo {
  padding: 20px 18px 16px;
  display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.adm-logo-mark {
  width: 34px; height: 34px; border-radius: 9px;
  background: linear-gradient(135deg, #EF4444, #F97316);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800; color: #fff;
}
.adm-logo-text { font-size: .85rem; font-weight: 800; color: #fff; }
.adm-logo-sub  { font-size: .58rem; color: rgba(255,255,255,.35); text-transform: uppercase; letter-spacing: .5px; }
.adm-nav { flex: 1; padding: 10px 10px; display: flex; flex-direction: column; gap: 1px; }
.adm-group { font-size: .57rem; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: rgba(255,255,255,.25); padding: 10px 8px 3px; }
.adm-item {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 11px; border-radius: 8px;
  cursor: pointer; color: rgba(255,255,255,.52);
  font-size: .78rem; font-weight: 500;
  transition: all .14s; position: relative;
}
.adm-item:hover { background: rgba(255,255,255,.07); color: #fff; }
.adm-item.on { background: rgba(239,68,68,.2); color: #FCA5A5; }
.adm-item.on::before {
  content: ''; position: absolute; left: -10px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 18px; background: #EF4444; border-radius: 0 3px 3px 0;
}
.adm-icon { width: 16px; text-align: center; flex-shrink: 0; }
.adm-badge { margin-left: auto; background: #EF4444; color: #fff; font-size: .57rem; font-weight: 700; padding: 1px 5px; border-radius: 99px; }
.adm-bottom { padding: 12px; border-top: 1px solid rgba(255,255,255,.06); }
.adm-user { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 8px; cursor: pointer; }
.adm-user:hover { background: rgba(255,255,255,.06); }
.adm-uav { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg,#EF4444,#F97316); display: flex; align-items: center; justify-content: center; font-size: .68rem; font-weight: 700; color: #fff; }
.adm-uname { font-size: .76rem; font-weight: 600; color: rgba(255,255,255,.8); }
.adm-urole  { font-size: .58rem; color: rgba(255,255,255,.35); }

/* Admin content */
.adm-content { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.adm-topbar {
  height: 58px; background: var(--card);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center;
  padding: 0 24px; gap: 12px;
  position: sticky; top: 0; z-index: 100;
}
.adm-title { font-size: .96rem; font-weight: 800; color: var(--ink); flex: 1; }
.adm-back {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface); border: 1.5px solid var(--line);
  border-radius: 8px; padding: 6px 12px;
  font-size: .74rem; font-weight: 700; color: var(--ink-soft);
  cursor: pointer; transition: all .15s;
}
.adm-back:hover { border-color: var(--blue); color: var(--blue); }

/* Admin page */
.adm-page { flex: 1; padding: 22px 24px 40px; overflow-y: auto; }
.adm-screen { display: none; }
.adm-screen.on { display: block; }

/* Metric cards for admin */
.adm-metrics {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 14px; margin-bottom: 22px;
}
@media(max-width:900px){ .adm-metrics { grid-template-columns: 1fr 1fr; } }
.adm-metric {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; padding: 16px 14px;
  display: flex; flex-direction: column; gap: 3px;
  position: relative; overflow: hidden;
}
.adm-metric.red   { border-left: 3px solid #EF4444; }
.adm-metric.blue  { border-left: 3px solid #2563EB; }
.adm-metric.green { border-left: 3px solid #10B981; }
.adm-metric.amber { border-left: 3px solid #F59E0B; }
.adm-metric.purple{ border-left: 3px solid #8B5CF6; }
.adm-metric-label { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--ink-faint); }
.adm-metric-val   { font-family: 'DM Mono', monospace; font-size: 1.3rem; font-weight: 600; color: var(--ink); line-height: 1.1; }
.adm-metric-delta { font-size: .64rem; font-weight: 600; }
.adm-metric-delta.up   { color: #10B981; }
.adm-metric-delta.down { color: #EF4444; }
.adm-metric-icon { position: absolute; top: 12px; right: 12px; font-size: 18px; opacity: .35; }

/* Admin table */
.adm-table-wrap { overflow-x: auto; }
.adm-table { width: 100%; border-collapse: collapse; min-width: 600px; }
.adm-table th {
  font-size: .63rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  color: var(--ink-faint); padding: 0 14px 10px; text-align: left;
  border-bottom: 1px solid var(--line);
}
.adm-table td {
  padding: 11px 14px; font-size: .78rem; color: var(--ink-mid);
  border-bottom: 1px solid var(--border2); vertical-align: middle;
}
.adm-table tr:last-child td { border-bottom: none; }
.adm-table tr:hover td { background: var(--sky); }
.adm-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 800; color: #fff; flex-shrink: 0;
}
.adm-user-row { display: flex; align-items: center; gap: 10px; }
.adm-uname-main { font-size: .8rem; font-weight: 700; color: var(--ink); }
.adm-uemail     { font-size: .66rem; color: var(--ink-soft); }

/* Status badges */
.s-active   { background: rgba(16,185,129,.1);  color: #10B981; }
.s-inactive { background: rgba(100,116,139,.1); color: #64748B; }
.s-banned   { background: rgba(239,68,68,.1);   color: #EF4444; }
.s-trial    { background: rgba(245,158,11,.1);  color: #D97706; }
.s-premium  { background: linear-gradient(135deg,#2563EB,#0EA5E9); color: #fff; }
.s-free     { background: var(--line-soft); color: var(--ink-soft); }
.s-cancelled{ background: rgba(239,68,68,.1); color: #EF4444; }
.s-expired  { background: rgba(100,116,139,.1); color: #64748B; }

/* Action buttons row */
.adm-actions { display: flex; gap: 6px; }
.adm-btn {
  padding: 5px 10px; border-radius: 6px;
  font-size: .68rem; font-weight: 700; border: none; cursor: pointer;
  font-family: inherit; transition: all .14s;
}
.adm-btn-view { background: var(--sky-mid); color: var(--blue); }
.adm-btn-view:hover { background: var(--blue); color: #fff; }
.adm-btn-edit { background: rgba(245,158,11,.1); color: #D97706; }
.adm-btn-edit:hover { background: #D97706; color: #fff; }
.adm-btn-ban  { background: rgba(239,68,68,.1); color: #EF4444; }
.adm-btn-ban:hover  { background: #EF4444; color: #fff; }

/* Filter toolbar */
.adm-toolbar { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; align-items: center; }
.adm-search {
  display: flex; align-items: center; gap: 7px;
  background: var(--card); border: 1.5px solid var(--line);
  border-radius: 10px; padding: 0 11px; flex: 1; min-width: 200px;
}
.adm-search:focus-within { border-color: #EF4444; }
.adm-search input { border: none; background: none; font-size: .8rem; color: var(--ink); padding: 8px 0; outline: none; flex: 1; font-family: inherit; }
.adm-search input::placeholder { color: var(--ink-faint); }
.adm-select {
  background: var(--card); border: 1.5px solid var(--line);
  border-radius: 10px; padding: 8px 11px;
  font-size: .76rem; color: var(--ink); outline: none; cursor: pointer; font-family: inherit;
}
.adm-select:focus { border-color: #EF4444; }
.adm-btn-primary {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 8px 15px; border-radius: 9px;
  font-size: .76rem; font-weight: 700; border: none; cursor: pointer;
  background: #EF4444; color: #fff; font-family: inherit; transition: all .15s;
}
.adm-btn-primary:hover { background: #DC2626; transform: translateY(-1px); }
.adm-btn-sec {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 8px 14px; border-radius: 9px;
  font-size: .76rem; font-weight: 700;
  background: var(--card); color: var(--ink);
  border: 1.5px solid var(--line); cursor: pointer; font-family: inherit; transition: all .15s;
}
.adm-btn-sec:hover { border-color: #EF4444; color: #EF4444; }

/* Two-col admin grid */
.adm-2col { display: grid; grid-template-columns: 1fr 360px; gap: 16px; }
@media(max-width:1000px){ .adm-2col { grid-template-columns: 1fr; } }
.adm-col { display: flex; flex-direction: column; gap: 16px; }

/* Admin card */
.adm-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 16px;
}
.adm-ch { display: flex; align-items: center; justify-content: space-between; padding: 15px 18px 12px; border-bottom: 1px solid var(--line); }
.adm-ct { font-size: .83rem; font-weight: 700; color: var(--ink); }
.adm-ca { font-size: .7rem; font-weight: 600; color: #EF4444; cursor: pointer; }
.adm-cb { padding: 16px 18px; }

/* Settings toggles */
.set-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 0; border-bottom: 1px solid var(--line-soft);
}
.set-row:last-child { border-bottom: none; }
.set-info-title { font-size: .82rem; font-weight: 600; color: var(--ink); }
.set-info-sub   { font-size: .7rem; color: var(--ink-soft); margin-top: 2px; }

/* Revenue hero */
.rev-hero {
  background: linear-gradient(140deg, #0A0F1E 0%, #1E1040 60%, #0E1A38 100%);
  border-radius: 18px; padding: 24px 28px;
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: 0; margin-bottom: 20px; overflow: hidden;
  position: relative;
}
.rev-hero::before {
  content: ''; position: absolute; top: -40px; right: -40px;
  width: 200px; height: 200px; background: rgba(239,68,68,.06);
  border-radius: 50%;
}
.rev-stat { padding: 8px 20px 8px 0; border-right: 1px solid rgba(255,255,255,.08); }
.rev-stat:last-child { border-right: none; padding-right: 0; padding-left: 20px; }
.rev-stat:first-child { padding-left: 0; }
.rev-label { font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: rgba(255,255,255,.4); margin-bottom: 4px; }
.rev-val   { font-family: 'DM Mono', monospace; font-size: 1.5rem; font-weight: 600; color: #fff; line-height: 1; }
.rev-delta { font-size: .66rem; font-weight: 600; margin-top: 4px; color: #6EE7B7; }
@media(max-width:700px){ .rev-hero { grid-template-columns: 1fr 1fr; } .rev-stat { border-right: none; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.06); } }

/* User detail drawer */
.user-drawer {
  position: fixed; right: 0; top: 0; bottom: 0;
  width: 420px; background: var(--card);
  border-left: 1px solid var(--line);
  box-shadow: -8px 0 40px rgba(0,0,0,.15);
  z-index: 800; transform: translateX(100%);
  transition: transform .28s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.user-drawer.open { transform: translateX(0); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.drawer-title { font-size: .9rem; font-weight: 800; color: var(--ink); }
.drawer-close { width: 28px; height: 28px; border-radius: 50%; background: var(--line-soft); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--ink-soft); transition: all .15s; }
.drawer-close:hover { background: #EF4444; color: #fff; }
.drawer-body { padding: 20px; flex: 1; }
.drawer-user-hero { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; padding: 16px; background: var(--sky); border-radius: 14px; }
.drawer-section-title { font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--ink-faint); margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.drawer-kv { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; font-size: .78rem; }
.drawer-key { color: var(--ink-soft); }
.drawer-val { font-weight: 600; color: var(--ink); font-family: 'DM Mono', monospace; }
.drawer-footer { padding: 16px 20px; border-top: 1px solid var(--line); display: flex; gap: 9px; }

/* Plan editor */
.plan-edit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
.plan-option {
  border: 2px solid var(--line); border-radius: 12px;
  padding: 14px 12px; cursor: pointer; transition: all .15s;
}
.plan-option:hover { border-color: #EF4444; }
.plan-option.selected { border-color: #EF4444; background: rgba(239,68,68,.05); }
.plan-option-name { font-size: .82rem; font-weight: 700; color: var(--ink); }
.plan-option-price { font-size: .7rem; color: var(--ink-soft); margin-top: 2px; }

/* Notification / alert item */
.alert-item { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.alert-item:last-child { border-bottom: none; }
.alert-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; }
.alert-text { font-size: .78rem; color: var(--ink-mid); line-height: 1.5; flex: 1; }
.alert-time { font-size: .64rem; color: var(--ink-faint); white-space: nowrap; }

/* Pagination */
.adm-pagination { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; border-top: 1px solid var(--line); }
.adm-page-info { font-size: .74rem; color: var(--ink-soft); }
.adm-page-btns { display: flex; gap: 6px; }
.adm-pbtn { padding: 5px 11px; border-radius: 6px; font-size: .72rem; font-weight: 600; border: 1.5px solid var(--line); background: var(--card); color: var(--ink-mid); cursor: pointer; font-family: inherit; transition: all .14s; }
.adm-pbtn:hover { border-color: #EF4444; color: #EF4444; }
.adm-pbn-active { background: #EF4444; color: #fff; border-color: #EF4444; }

/* Settings section cards */
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media(max-width:800px){ .settings-grid { grid-template-columns: 1fr; } }

/* Health bar */
.health-bar { display: flex; height: 8px; border-radius: 99px; overflow: hidden; margin: 8px 0; }
.health-seg { height: 100%; transition: width .5s ease; }

/* Activity feed */
.act-feed { display: flex; flex-direction: column; }
.act-item { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.act-item:last-child { border-bottom: none; }
.act-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
.act-text { flex: 1; }
.act-main { font-size: .78rem; font-weight: 500; color: var(--ink); }
.act-sub  { font-size: .66rem; color: var(--ink-soft); margin-top: 1px; }
.act-time { font-size: .62rem; color: var(--ink-faint); white-space: nowrap; margin-left: auto; }

@media(max-width:768px){
  .adm-sidebar { width: 200px; }
  .adm-page { padding: 14px; }
  .rev-hero { grid-template-columns: 1fr 1fr; }
  .settings-grid { grid-template-columns: 1fr; }
}


/* Email provider selector buttons */
.email-prov-btn {
  border: 2px solid var(--line);
  border-radius: 10px;
  padding: 10px 16px;
  cursor: pointer;
  transition: all .15s;
  background: var(--card);
  min-width: 110px;
  text-align: center;
}
.email-prov-btn:hover { border-color: #EF4444; }
.email-prov-btn.on { border-color: #EF4444; background: rgba(239,68,68,.06); }

/* Template selector highlight */
.tpl-item { transition: background .15s; }
.tpl-item:hover { background: var(--sky) !important; }
.active-tpl { background: var(--sky) !important; }

/* w100 utility in admin */
.w100 { width: 100%; }


/* ── Blade-specific additions ───────────────────────────────── */
.w100 { width: 100%; }
.tr   { text-align: right; }
.amt-up   { color: var(--green); }
.amt-down { color: var(--red); }
.mono { font-family: 'DM Mono', monospace; }

/* App shell for blade layout */
#shell { display: flex; min-height: 100vh; background: var(--surface); }
#sidebar {
  width: 252px; flex-shrink: 0;
  background: var(--navy);
  display: flex; flex-direction: column;
  height: 100vh; position: fixed; top: 0; left: 0;
  overflow-y: auto; z-index: 200;
  transition: transform .25s ease;
}
#content {
  flex: 1; margin-left: 252px;
  display: flex; flex-direction: column;
  min-height: 100vh; min-width: 0;
}
#topbar {
  height: 58px; background: var(--card);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center;
  padding: 0 22px; gap: 12px;
  position: sticky; top: 0; z-index: 100;
}
#mob-menu { display: none; background: none; border: none; font-size: 20px; cursor: pointer; }
#page-title { font-size: .96rem; font-weight: 800; color: var(--ink); flex: 1; }
#page-sub { font-size: .72rem; font-weight: 400; color: var(--ink-soft); margin-left: 8px; }
.tb-actions { display: flex; align-items: center; gap: 8px; }
.tb-btn { background: none; border: none; cursor: pointer; font-size: 16px; position: relative; padding: 4px; }
.tb-dot { position: absolute; top: 0; right: 0; width: 8px; height: 8px; background: var(--red); border-radius: 50%; }
#page { flex: 1; padding: 22px 24px 40px; overflow-y: auto; }
#mobnav { display: none; }
#toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(80px);
  background: var(--navy); color: #fff; padding: 10px 20px; border-radius: 99px;
  font-size: .82rem; font-weight: 600; display: flex; align-items: center; gap: 8px;
  box-shadow: 0 8px 30px rgba(0,0,0,.3); z-index: 9999;
  transition: transform .3s cubic-bezier(.4,0,.2,1); pointer-events: none;
}
#toast.on { transform: translateX(-50%) translateY(0); }
.toast-ico { font-size: 15px; }

/* Sidebar */
.sb-logo { 
  padding: 24px 20px; 
  display: flex; 
  align-items: center; 
  gap: 12px; 
  background: linear-gradient(to bottom, rgba(255,255,255,0.03), transparent);
}
.sb-mark { 
  width: 40px; 
  height: 40px; 
  border-radius: 12px; 
  background: linear-gradient(135deg,#2563EB,#0EA5E9); 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  font-size: 1.2rem; 
  font-weight: 800; 
  color: #fff; 
  font-family: 'Bricolage Grotesque', sans-serif;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
  flex-shrink: 0;
}
.sb-name { 
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 1.1rem; 
  font-weight: 800; 
  color: #fff; 
  letter-spacing: -0.5px;
  line-height: 1;
}
.sb-tagline { 
  font-size: 0.62rem; 
  color: rgba(255,255,255,0.45); 
  font-weight: 500;
  text-transform: uppercase; 
  letter-spacing: 0.8px; 
  margin-top: 4px;
}
.sb-family { padding: 12px 16px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid rgba(255,255,255,.06); cursor: pointer; }
.av-stack { display: flex; }
.av { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .6rem; font-weight: 700; color: #fff; margin-right: -6px; border: 2px solid var(--navy); }
.sb-family-name { font-size: .78rem; font-weight: 700; color: rgba(255,255,255,.8); }
.sb-family-sub  { font-size: .62rem; color: rgba(255,255,255,.35); }
.sb-chevron { margin-left: auto; color: rgba(255,255,255,.3); font-size: 12px; }
.sb-nav { flex: 1; padding: 8px 10px; display: flex; flex-direction: column; gap: 1px; }
.sb-group { font-size: .58rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,.25); padding: 10px 8px 3px; }
.sb-item { display: flex; align-items: center; gap: 9px; padding: 8px 11px; border-radius: 8px; cursor: pointer; color: rgba(255,255,255,.52); font-size: .78rem; font-weight: 500; transition: all .14s; text-decoration: none; position: relative; }
.sb-item:hover { background: rgba(255,255,255,.07); color: #fff; }
.sb-item.on { background: rgba(37,99,235,.25); color: #93C5FD; }
.sb-item.on::before { content: ''; position: absolute; left: -10px; top: 50%; transform: translateY(-50%); width: 3px; height: 18px; background: #3B82F6; border-radius: 0 3px 3px 0; }
.sb-icon { width: 16px; text-align: center; flex-shrink: 0; }
.sb-badge { margin-left: auto; background: var(--red); color: #fff; font-size: .57rem; font-weight: 700; padding: 1px 5px; border-radius: 99px; }
.sb-bottom { padding: 12px; border-top: 1px solid rgba(255,255,255,.06); }
.plan-box { background: rgba(37,99,235,.15); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
.plan-label { font-size: .58rem; color: rgba(255,255,255,.35); text-transform: uppercase; letter-spacing: .4px; }
.plan-name { font-size: .78rem; font-weight: 700; color: rgba(255,255,255,.7); margin: 2px 0 6px; }
.plan-btn { display: block; font-size: .68rem; font-weight: 700; color: #93C5FD; text-decoration: none; }
.sb-user { display: flex; align-items: center; gap: 9px; padding: 6px 4px; }
.sb-uav { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg,#6366F1,#8B5CF6); display: flex; align-items: center; justify-content: center; font-size: .62rem; font-weight: 700; color: #fff; flex-shrink: 0; }
.sb-uname { font-size: .76rem; font-weight: 600; color: rgba(255,255,255,.8); }
.sb-uemail { font-size: .58rem; color: rgba(255,255,255,.35); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 140px; }

/* Stat cards */
.stat-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-bottom: 18px; }
@media(max-width:900px){ .stat-grid { grid-template-columns: 1fr 1fr; } }
.scard { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 14px; }
.scard.featured { border-left: 3px solid var(--blue); background: linear-gradient(135deg,rgba(37,99,235,.05),var(--card)); }
.scard-label { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--ink-faint); margin-bottom: 6px; }
.scard-val { 
  font-family: var(--font-ui); 
  font-size: 1.4rem; 
  font-weight: 700; 
  color: var(--ink); 
  line-height: 1.1; 
  margin-bottom: 6px; 
  letter-spacing: -0.02em; 
  font-variant-numeric: tabular-nums; 
}
.scard-change { display: inline-flex; align-items: center; gap: 3px; font-size: .64rem; font-weight: 600; padding: 2px 7px; border-radius: 99px; font-variant-numeric: tabular-nums; }
.scard-change.up   { background: rgba(16,185,129,.1); color: var(--green); }
.scard-change.down { background: rgba(239,68,68,.1);  color: var(--red); }

/* Dashboard grid */
.dash-grid { display: grid; grid-template-columns: 1fr 360px; gap: 16px; }
@media(max-width:1100px){ .dash-grid { grid-template-columns: 1fr; } }
.col { display: flex; flex-direction: column; gap: 16px; }

/* Cards */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.ch { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 10px; border-bottom: 1px solid var(--line); }
.ct { font-size: .83rem; font-weight: 700; color: var(--ink); }
.ca { font-size: .72rem; font-weight: 600; color: var(--blue); cursor: pointer; text-decoration: none; }
.cb { padding: 14px 16px; }
.chart-box { height: 200px; position: relative; }
.period-wrap { display: flex; gap: 2px; }
.pbtn { padding: 4px 10px; border-radius: 6px; border: 1.5px solid var(--line); background: var(--card); font-size: .68rem; font-weight: 600; color: var(--ink-soft); cursor: pointer; transition: all .14s; font-family: inherit; }
.pbtn.on { background: var(--navy-mid); border-color: var(--navy-mid); color: #fff; }

/* Page header */
.pg-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 10px; }
.pg-title { font-size: 1.15rem; font-weight: 800; color: var(--ink); }
.pg-sub { font-size: .76rem; color: var(--ink-soft); margin-top: 2px; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 10px; font-size: .78rem; font-weight: 700; border: none; cursor: pointer; transition: all .15s; font-family: inherit; text-decoration: none; }
.btn-primary { background: var(--navy-mid); color: #fff; }
.btn-primary:hover { background: var(--navy); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(30,58,138,.3); }
.btn-sec { background: var(--card); color: var(--ink); border: 1.5px solid var(--line); }
.btn-sec:hover { border-color: var(--blue); color: var(--blue); }
.btn-danger { background: rgba(239,68,68,.1); color: var(--red); border: 1.5px solid rgba(239,68,68,.2); }
.btn-sm { padding: 5px 10px; font-size: .7rem; border-radius: 7px; }

/* Forms */
.fg { margin-bottom: 14px; }
.fg-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fl { display: block; font-size: .72rem; font-weight: 700; color: var(--ink-mid); margin-bottom: 5px; }
.fc { width: 100%; padding: 9px 11px; border-radius: 9px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font-size: .82rem; font-family: inherit; outline: none; transition: border-color .15s; box-sizing: border-box; }
.fc:focus { border-color: var(--blue); }
textarea.fc { resize: vertical; min-height: 80px; }

/* Tables */
.txn-table { width: 100%; border-collapse: collapse; }
.txn-table th { font-size: .63rem; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--ink-faint); padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
.txn-table td { padding: 10px 12px; font-size: .78rem; color: var(--ink-mid); border-bottom: 1px solid var(--border2); vertical-align: middle; }
.txn-table tr:last-child td { border-bottom: none; }
.txn-table tr:hover td { background: var(--sky); }
.txn-scroll { overflow-x: auto; }
.txn-icon { width: 32px; height: 32px; border-radius: 8px; background: var(--sky2); display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
.filter-select { background: var(--card); border: 1.5px solid var(--line); border-radius: 9px; padding: 7px 10px; font-size: .76rem; color: var(--ink); outline: none; cursor: pointer; font-family: inherit; }
.srch-wrap { display: flex; align-items: center; gap: 7px; background: var(--card); border: 1.5px solid var(--line); border-radius: 10px; padding: 0 11px; flex: 1; min-width: 200px; }
.srch-wrap:focus-within { border-color: var(--blue); }
.srch-inp { border: none; background: none; font-size: .8rem; color: var(--ink); padding: 8px 0; outline: none; flex: 1; font-family: inherit; }

/* Pills */
.pill { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 99px; font-size: .66rem; font-weight: 700; white-space: nowrap; }
.pill-blue  { background: rgba(37,99,235,.1);  color: #2563EB; }
.pill-green { background: rgba(16,185,129,.1); color: #10B981; }
.pill-red   { background: rgba(239,68,68,.1);  color: #EF4444; }
.pill-amber { background: rgba(245,158,11,.1); color: #D97706; }
.pill-gray  { background: var(--line-soft); color: var(--ink-soft); }
.active     { background: rgba(16,185,129,.1); color: #10B981; }
.free       { background: var(--line-soft); color: var(--ink-soft); }
.premium    { background: linear-gradient(135deg,#2563EB,#0EA5E9); color: #fff; }
.due-soon   { background: rgba(245,158,11,.1); color: #D97706; }

/* Reminders */
.rem-row { display: flex; align-items: center; gap: 12px; padding: 8px 16px; border-bottom: 1px solid var(--line-soft); }
.rem-row:last-child { border-bottom: none; }
.rem-ico { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.rem-body { flex: 1; min-width: 0; }
.rem-name { font-size: .8rem; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rem-sub  { font-size: .68rem; color: var(--ink-soft); margin-top: 2px; }
.rem-right { display: flex; flex-direction: row; align-items: center; gap: 8px; flex-shrink: 0; }
.doc-actions { opacity: 1 !important; transition: opacity 0.2s; }
.rem-amt { font-family: 'DM Mono', monospace; font-size: .82rem; font-weight: 600; color: var(--ink); }
.rem-btns { display: flex; gap: 5px; }

/* Goals */
.goal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 14px; }
.gcard { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 18px 16px; }
.gcard-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.gcard-icon { font-size: 24px; }
.gcard-info { flex: 1; }
.gcard-name { font-size: .85rem; font-weight: 700; color: var(--ink); }
.gcard-target { font-size: .68rem; color: var(--ink-soft); margin-top: 2px; }
.gcard-pct { font-family: 'DM Mono', monospace; font-size: 1rem; font-weight: 700; color: var(--blue); }
.gcard-meta { display: flex; justify-content: space-between; font-size: .68rem; color: var(--ink-faint); margin-top: 5px; }
.prog-track { height: 6px; background: var(--line-soft); border-radius: 99px; overflow: hidden; }
.prog-fill { height: 100%; background: var(--blue); border-radius: 99px; transition: width .5s ease; }
.prog-fill.good { background: var(--green); }
.prog-fill.warn { background: var(--amber); }

/* Accounts grid */
.acct-grid, .acct-grid-alias { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 14px; }
.acard { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px; cursor: pointer; transition: all .2s; display: block; }
.acard:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--blue-light); }
.acard.liab { border-left: 3px solid var(--red); }
.acard-ico { font-size: 22px; margin-bottom: 10px; }
.acard-name { font-size: .82rem; font-weight: 700; color: var(--ink); margin-bottom: 2px; }
.acard-prov { font-size: .64rem; color: var(--ink-soft); margin-bottom: 10px; }
.acard-val { font-family: 'DM Mono', monospace; font-size: 1.05rem; font-weight: 500; color: var(--ink); margin-bottom: 4px; letter-spacing: -0.01em; }
.acard-gain { font-size: .68rem; font-weight: 600; margin-bottom: 10px; }
.acard-gain.up { color: var(--green); }
.acard-gain.dn { color: var(--red); }
.acard-foot { display: flex; align-items: center; gap: 6px; font-size: .66rem; color: var(--ink-soft); }
.acard-av { width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .55rem; font-weight: 700; color: #fff; }

/* Flash messages */
.flash { padding: 12px 16px; border-radius: 10px; margin-bottom: 16px; font-size: .82rem; font-weight: 500; }
.flash-success { background: rgba(16,185,129,.1); color: #10B981; border: 1px solid rgba(16,185,129,.2); }
.flash-error   { background: rgba(239,68,68,.1);  color: #EF4444; border: 1px solid rgba(239,68,68,.2); }
.flash-info    { background: rgba(37,99,235,.1);  color: #2563EB; border: 1px solid rgba(37,99,235,.2); }

/* Overlay / Modal */
.overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1000; align-items: center; justify-content: center; padding: 16px; }
.overlay.on { display: flex; }
.modal { background: var(--card); border-radius: 18px; padding: 0; max-width: 520px; width: 100%; box-shadow: 0 20px 60px rgba(0,0,0,.25); max-height: 90vh; overflow-y: auto; }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 14px; border-bottom: 1px solid var(--line); }
.modal-title { font-size: .95rem; font-weight: 800; color: var(--ink); }
.modal-close { width: 28px; height: 28px; border-radius: 50%; background: var(--line-soft); border: none; cursor: pointer; font-size: 13px; color: var(--ink-soft); display: flex; align-items: center; justify-content: center; }
.modal-body { padding: 18px 20px 20px; }

/* Section tabs */
.sec-tabs { display: flex; gap: 2px; margin-bottom: 18px; border-bottom: 2px solid var(--line); }
.stab { padding: 8px 16px; font-size: .78rem; font-weight: 600; color: var(--ink-soft); border: none; background: none; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all .15s; text-decoration: none; }
.stab:hover { color: var(--ink); }
.stab.on { color: var(--blue); border-bottom-color: var(--blue); }

/* Member tabs */
.member-tabs { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 20px; padding-bottom: 2px; align-items: center; flex-wrap: nowrap; }
.mtab { display: flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 99px; font-size: .76rem; font-weight: 600; color: var(--ink-soft); border: 1.5px solid var(--line); background: var(--card); cursor: pointer; white-space: nowrap; text-decoration: none; transition: all .15s; }
.mtab:hover { border-color: var(--blue); color: var(--blue); }
.mtab.on { background: var(--navy-mid); border-color: var(--navy-mid); color: #fff; }
.mtav { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .6rem; font-weight: 700; color: #fff; }

/* Income source cards */
.inc-source-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: 12px; margin-bottom: 20px; }
.inc-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px; position: relative; overflow: hidden; transition: all .2s; }
.inc-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg,#2563EB,#3B82F6); }
.inc-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.inc-ico { font-size: 20px; margin-bottom: 8px; }
.inc-src { font-size: .8rem; font-weight: 700; color: var(--ink); }
.inc-who { font-size: .66rem; color: var(--ink-soft); margin: 2px 0 8px; }
.inc-amt { font-family: 'DM Mono', monospace; font-size: 1.1rem; font-weight: 600; color: var(--ink); }
.inc-freq { font-size: .62rem; color: var(--ink-faint); margin-top: 2px; }
.inc-trend { font-size: .66rem; font-weight: 600; color: var(--green); margin-top: 6px; }

/* Chips */
.chip-strip { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }
.chip { padding: 6px 14px; border-radius: 99px; font-size: .74rem; font-weight: 600; border: 1.5px solid var(--line); background: var(--card); color: var(--ink-soft); cursor: pointer; transition: all .15s; white-space: nowrap; }
.chip.on { background: var(--navy-mid); border-color: var(--navy-mid); color: #fff; }

/* Toggle switch */
.toggle { width: 44px; height: 24px; border-radius: 99px; background: var(--line-soft); position: relative; cursor: pointer; transition: background .2s; flex-shrink: 0; }
.toggle::after { content: ''; position: absolute; width: 18px; height: 18px; background: #fff; border-radius: 50%; top: 3px; left: 3px; transition: transform .2s; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.toggle.on { background: var(--blue); }
.toggle.on::after { transform: translateX(20px); }

/* Alloc rows */
.alloc { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.alloc-row { display: flex; align-items: center; gap: 8px; font-size: .74rem; }
.alloc-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.alloc-name { flex: 1; color: var(--ink-mid); }
.alloc-pct { color: var(--ink-soft); font-weight: 600; min-width: 32px; text-align: right; }
.alloc-val { font-family: 'DM Mono', monospace; font-weight: 600; color: var(--ink); min-width: 70px; text-align: right; }

/* Auth */
#auth { display: flex; min-height: 100vh; }
.auth-left { flex: 1; background: linear-gradient(140deg,#0D1F4E,#1E3A8A,#0E3460); padding: 40px; display: flex; align-items: center; }
.auth-left-inner { max-width: 460px; }
.auth-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 40px; }
.auth-mark { width: 40px; height: 40px; border-radius: 10px; background: linear-gradient(135deg,#2563EB,#0EA5E9); display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 800; color: #fff; }
.auth-logo-name { font-size: 1.1rem; font-weight: 800; color: #fff; }
.auth-hero { font-family: 'Bricolage Grotesque', sans-serif; font-size: 2.4rem; font-weight: 800; color: #fff; line-height: 1.2; margin-bottom: 16px; }
.auth-hero em { font-style: normal; color: #93C5FD; }
.auth-sub { font-size: .88rem; color: rgba(255,255,255,.6); line-height: 1.6; margin-bottom: 28px; }
.auth-feats { display: flex; flex-direction: column; gap: 10px; }
.auth-feat { display: flex; align-items: center; gap: 12px; font-size: .8rem; color: rgba(255,255,255,.7); }
.auth-feat-ico { width: 32px; height: 32px; border-radius: 8px; background: rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
.auth-right { width: 440px; background: var(--surface); display: flex; align-items: center; justify-content: center; padding: 40px; }
.auth-form { width: 100%; max-width: 360px; }
.auth-title { font-size: 1.4rem; font-weight: 800; color: var(--ink); margin-bottom: 4px; }
.auth-desc { font-size: .8rem; color: var(--ink-soft); margin-bottom: 22px; }
.auth-div { text-align: center; font-size: .74rem; color: var(--ink-faint); margin: 14px 0; position: relative; }
.auth-div::before,.auth-div::after { content: ''; position: absolute; top: 50%; width: calc(50% - 50px); height: 1px; background: var(--line); }
.auth-div::before { left: 0; } .auth-div::after { right: 0; }
.google-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 11px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--card); color: var(--ink); font-size: .84rem; font-weight: 600; cursor: pointer; font-family: inherit; transition: all .15s; text-decoration: none; }
.google-btn:hover { border-color: var(--blue); box-shadow: 0 2px 8px rgba(0,0,0,.08); }
@media(max-width:768px){ .auth-left { display: none; } .auth-right { width: 100%; } }

/* Mobile */
@media(max-width:768px){
  #sidebar { transform: translateX(-100%); }
  #sidebar.open { transform: translateX(0); box-shadow: 4px 0 20px rgba(0,0,0,.3); }
  #content { margin-left: 0; }
  #mob-menu { display: block; }
  #mobnav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; background: var(--card); border-top: 1px solid var(--line); z-index: 200; }
  #page { padding-bottom: 80px; }
  .mnav-item { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 8px 4px; text-decoration: none; color: var(--ink-soft); }
  .mnav-item.on .mnav-ico { color: var(--blue); }
  .mnav-ico { font-size: 20px; }
  .mnav-lbl { font-size: .58rem; font-weight: 600; margin-top: 2px; }
  .fg-row { grid-template-columns: 1fr; }
  .dash-grid { grid-template-columns: 1fr; }
}

/* --- Missing CSS variable aliases (referenced by views) --- */
:root {
  --ink3:    #64748B;
  --green:   #10B981;
  --border2: #F1F5F9;
  --sky2:    #EFF6FF;
}
[data-theme="dark"] {
  --ink3:    #94A3B8;
  --border2: #1E293B;
  --sky2:    #0F1F3F;
}

/* ══════════════════════════════════════════
   PAGINATION
══════════════════════════════════════════ */
.pagination, .pagination ul, .pagination ol, .pagination li { 
  display: flex !important; 
  list-style: none !important; 
  list-style-type: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.pagination { gap: 5px !important; margin: 24px 0 !important; flex-wrap: wrap; }

.page-item, .pagination li { display: inline-block !important; }
.pagination li::before { display: none !important; content: none !important; }

.page-link, .pagination span, .pagination a {
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 12px;
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--ink-mid);
  text-decoration: none;
  font-size: .8rem;
  font-weight: 600;
  border-radius: 8px;
  transition: all .2s;
}
.page-item.active .page-link, .pagination .active span, .pagination .active a, .pagination li.active .page-link {
  background: var(--blue) !important;
  border-color: var(--blue) !important;
  color: white !important;
  box-shadow: 0 4px 10px rgba(37,99,235,0.25);
}
.page-item.disabled .page-link, .pagination .disabled span, .pagination .disabled a {
  background: var(--line-soft) !important;
  color: var(--ink-faint) !important;
  opacity: 0.5;
  cursor: not-allowed;
}
.page-link:hover:not(.active):not(.disabled) {
  background: var(--sky-mid);
  border-color: var(--blue-light);
  color: var(--blue);
}
nav[role="navigation"] div:first-child { margin-bottom: 8px; font-size: .75rem; color: var(--ink-soft); }

/* ══════════════════════════════════════════
   TABLER ICON SYSTEM — WealthOS
   Replaces emoji across sidebar, topbar,
   mobile nav, flash messages, admin panel.
   Icons are outline, strokeWidth 1.5, muted.
══════════════════════════════════════════ */

/* Sidebar nav icon wrapper */
.sb-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: inherit;
}
.sb-icon i {
  font-size: 17px;
  line-height: 1;
  display: block;
}

/* Admin sidebar icon */
.adm-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.adm-icon i { font-size: 16px; line-height: 1; }

/* Topbar action buttons */
.tb-btn i { font-size: 18px; line-height: 1; }

/* Mobile bottom nav icons */
.mnav-ico i { font-size: 22px; line-height: 1; display: block; }

/* Toast icon */
.toast-ico i { font-size: 16px; }

/* Flash message icons */
.flash i { font-size: 17px; flex-shrink: 0; }
.flash-success i { color: var(--emerald); }
.flash-error   i { color: var(--red); }
.flash-info    i { color: var(--blue); }

/* Admin logo mark SVG/icon */
.adm-logo-mark i { font-size: 16px; color: #fff; }