/* ═══ CashPulse v3 — Glass/Neon Accessible Theme ═══ */

:root {
  /* Background layers */
  --bg: #0a0818;
  --bg2: rgba(139,92,246,0.05);
  --bg3: #334155;
  --bg4: #475569;

  /* Text */
  --text: #f1f5f9;
  --muted: #94a3b8;
  --dim: #8899ab;

  /* Accents */
  --accent: #7c3aed;
  --accent-light: #c4b5fd;
  --accent2: rgba(139,92,246,0.12);
  --accent3: rgba(139,92,246,0.25);
  --accent-gradient: linear-gradient(135deg, #7c3aed, #6d28d9);
  --accent-glow: 0 4px 16px rgba(124,58,237,0.3);

  /* Status (not color-only — always use +/- prefix or icon) */
  --danger: #ef4444;
  --warn: #f59e0b;
  --blue: #818cf8;

  /* Card borders */
  --card-border: rgba(139,92,246,0.1);

  /* Radii */
  --r: 16px;
  --rs: 10px;

  /* Layout */
  --nav: 72px;
  --hdr: 56px;
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);

  /* Spacing scale */
  --gap-xs:4px;--gap-sm:8px;--gap-md:12px;--gap-lg:16px;--gap-xl:24px;
}

/* ═══ Reset & Base ═══ */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  position: relative;
}

/* Ambient glow background */
body::before {
  content: '';
  position: fixed;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background:
    radial-gradient(circle at 30% 20%, rgba(139,92,246,0.06) 0%, transparent 50%),
    radial-gradient(circle at 70% 80%, rgba(52,211,153,0.04) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

/* Ensure all content sits above the pseudo-element */
#app, .splash, #onboarding, .modal, .milestone, .toast {
  position: relative;
  z-index: 1;
}

/* ═══ Skip Link ═══ */
.skip-link{position:absolute;top:-40px;left:0;background:#7c3aed;color:#fff;padding:8px 16px;z-index:9999;font-size:14px;transition:top .2s}
.skip-link:focus{top:0}

/* ═══ Focus Accessibility ═══ */
:focus-visible {
  outline: 2px solid var(--accent-light);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ═══ Splash ═══ */
.splash {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  animation: fadeOut .3s ease .2s forwards;
}
.splash-logo { animation: pulse 1.2s ease infinite; }
.splash-title {
  font-size: 26px;
  font-weight: 800;
  background: linear-gradient(135deg, #c4b5fd, #34d399);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-top: 12px;
  letter-spacing: -0.5px;
}
.splash-sub { color: var(--muted); font-size: 13px; margin-top: 4px; }

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: .7; }
}
@keyframes fadeOut { to { opacity: 0; pointer-events: none; } }

/* ═══ Onboarding ═══ */
#onboarding {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 32px;
}
.onboard-page { display: none; text-align: center; animation: slideUp .4s ease; }
.onboard-page.active { display: flex; flex-direction: column; align-items: center; }
.onboard-visual { margin-bottom: 32px; }
.onboard-page h2 { font-size: 24px; font-weight: 700; margin-bottom: 12px; color: var(--text); }
.onboard-page p { font-size: 15px; color: var(--muted); line-height: 1.6; max-width: 280px; }
.onboard-dots { display: flex; gap: 8px; margin: 32px 0 24px; }
.onboard-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--bg3);
  transition: all .3s;
}
.onboard-dot.active {
  width: 24px;
  border-radius: 4px;
  background: var(--accent-light);
}
.onboard-btn { max-width: 300px; }
.onboard-skip {
  border: none;
  background: none;
  color: var(--dim);
  font-size: 13px;
  margin-top: 16px;
  cursor: pointer;
  min-height: 44px;
  padding: 8px 16px;
}

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

/* ═══ Header ═══ */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  padding-top: calc(12px + var(--sat));
  background: rgba(10,8,24,0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--card-border);
}
.header-left { display: flex; align-items: center; gap: 10px; }
.header-logo { flex-shrink: 0; }
.header-title {
  font-size: 18px;
  font-weight: 700;
  background: linear-gradient(135deg, #c4b5fd, #34d399);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.3px;
}
.icon-btn {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border: none;
  background: var(--accent2);
  border-radius: 50%;
  color: var(--accent-light);
  cursor: pointer;
  transition: all .2s;
  min-width: 44px; min-height: 44px;
}
.icon-btn:active { transform: scale(.92); }

/* ═══ Screens ═══ */
.screen {
  display: none;
  padding: 20px 20px calc(var(--nav) + 20px + var(--sab));
  min-height: calc(100vh - var(--hdr));
  animation: screenIn .3s ease;
}
.screen.active { display: block; }
@keyframes screenIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.screen-head {
  display: flex; align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.screen-title { font-size: 24px; font-weight: 800; letter-spacing: -0.3px; color: var(--text); }

/* ═══ Greeting ═══ */
.greeting { font-size: 15px; color: var(--muted); margin-bottom: 16px; font-weight: 500; }

/* ═══ Hero Card ═══ */
.hero-card {
  background: linear-gradient(135deg, rgba(124,58,237,0.08), rgba(109,40,217,0.04));
  border: 1px solid var(--card-border);
  border-radius: var(--r);
  padding: 24px 20px 18px;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
}
.hero-card::before {
  content: '';
  position: absolute;
  top: -40%; right: -20%;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(139,92,246,0.12) 0%, transparent 70%);
  pointer-events: none;
}
.hero-row { display: flex; align-items: center; gap: 20px; margin-bottom: 16px; }
.hero-text { flex: 1; }
.hero-label {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-weight: 600;
}
.hero-amount {
  font-size: 42px;
  font-weight: 900;
  color: var(--text);
  line-height: 1.1;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -1px;
}
.hero-comparison {
  display: flex; align-items: center;
  gap: 10px; margin-top: 8px; flex-wrap: wrap;
}
.hero-projected { font-size: 12px; color: var(--dim); }
.hero-projected strong { color: var(--muted); }
#comparison-badge { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 10px; }
/* Badges use text prefix (+/-) so color is decorative, not sole differentiator */
.badge-up { background: rgba(196,181,253,0.12); color: var(--text); }
.badge-down { background: rgba(239,68,68,0.15); color: #fca5a5; }
.badge-flat { background: rgba(100,116,139,0.2); color: var(--muted); }

/* Goal Ring */
.goal-ring-wrap { position: relative; width: 76px; height: 76px; flex-shrink: 0; }
.goal-ring { width: 100%; height: 100%; }
.goal-ring-wrap circle { transition: stroke-dashoffset 1s ease; }
.goal-ring-inner {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.goal-pct { font-size: 15px; font-weight: 800; color: var(--accent-light); }
.goal-label { font-size: 10px; color: var(--dim); text-transform: uppercase; letter-spacing: .5px; margin-top: 1px; }

/* Pills */
.pill-row, .hero-periods { display: flex; gap: 6px; flex-wrap: wrap; }
.hero-periods { justify-content: center; }
.pill {
  padding: 7px 18px;
  border-radius: 20px;
  border: 1px solid var(--bg3);
  background: transparent;
  color: var(--accent-light);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
  font-family: inherit;
  white-space: nowrap;
  min-height: 44px;
}
.pill.active {
  background: var(--accent-gradient);
  color: #fff;
  border-color: transparent;
  box-shadow: var(--accent-glow);
}
.pill:active { transform: scale(.95); }
.pill-sm { padding: 5px 14px; font-size: 12px; min-height: 36px; }

/* ═══ Stats ═══ */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
.stat {
  background: rgba(139,92,246,0.06);
  border: 1px solid var(--card-border);
  border-radius: var(--rs);
  padding: 14px 8px;
  text-align: center;
  transition: transform .15s;
}
.stat:active { transform: scale(.97); }
.stat.accent {
  border-color: rgba(139,92,246,0.25);
  background: linear-gradient(135deg, rgba(124,58,237,0.12), rgba(124,58,237,0.04));
}
.stat-val {
  display: block;
  font-size: 18px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.3px;
  color: var(--text);
}
.stat-val small { font-size: 11px; font-weight: 500; color: var(--muted); }
.stat-lbl {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-top: 3px;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-weight: 600;
}

/* ═══ Week Dots ═══ */
.card-sm {
  background: rgba(139,92,246,0.05);
  border: 1px solid var(--card-border);
  border-radius: var(--rs);
  padding: 12px 16px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.week-dots-title { font-size: 12px; color: var(--muted); font-weight: 600; }
.dots-row { display: flex; gap: 6px; align-items: center; }
.dot {
  width: 22px; height: 22px;
  border-radius: 6px;
  background: var(--bg3);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700;
  color: var(--dim);
  transition: all .2s;
}
.dot.filled {
  background: var(--accent-gradient);
  color: #fff;
  box-shadow: 0 2px 8px rgba(124,58,237,0.3);
}
.dot.today { border: 2px solid var(--accent-light); }

/* ═══ Cards ═══ */
.card {
  background: rgba(139,92,246,0.05);
  border: 1px solid var(--card-border);
  border-radius: var(--r);
  padding: 14px 16px;
  margin-bottom: 16px;
}
.card-head {
  display: flex; align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.card-title { font-size: 16px; font-weight: 700; color: var(--text); }
.card-meta { font-size: 12px; color: var(--dim); }
.card-sub { font-size: 12px; color: var(--dim); margin-top: 2px; margin-bottom: 14px; }
.link-btn {
  border: none; background: none;
  color: var(--accent-light);
  font-size: 13px; font-weight: 600; cursor: pointer;
  min-height: 44px; padding: 4px 8px;
}

/* ═══ Empty States ═══ */
.empty {
  display: flex; flex-direction: column;
  align-items: center; gap: 10px;
  padding: 32px 16px; text-align: center;
}
.empty-icon { opacity: .3; }
.empty p { color: var(--dim); font-size: 14px; }
.empty .empty-sub { font-size: 12px; opacity: .6; }

/* ═══ Payout Alerts ═══ */
.payout-card {
  background: linear-gradient(135deg, rgba(245,158,11,0.07), rgba(124,58,237,0.05));
  border: 1px solid rgba(245,158,11,0.15);
  border-radius: var(--r);
  padding: 14px 16px;
  margin-bottom: 12px;
  display: flex; align-items: center; gap: 12px;
}
.payout-card.ready {
  border-color: rgba(196,181,253,0.2);
  background: linear-gradient(135deg, rgba(124,58,237,0.1), rgba(124,58,237,0.05));
}
.payout-emoji { font-size: 24px; flex-shrink: 0; }
.payout-info { flex: 1; min-width: 0; }
.payout-name { font-size: 14px; font-weight: 600; color: var(--text); }
.payout-detail { font-size: 12px; color: var(--muted); }
.payout-badge { padding: 4px 10px; border-radius: 10px; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.payout-badge.ready { background: rgba(196,181,253,0.15); color: var(--accent-light); }
.payout-badge.close { background: rgba(245,158,11,0.15); color: var(--warn); }

/* ═══ App Rank ═══ */
.rank-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(139,92,246,0.06);
}
.rank-item:last-child { border: none; }
.rank-emoji { font-size: 20px; flex-shrink: 0; }
.rank-info { flex: 1; min-width: 0; }
.rank-name { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.rank-meta { font-size: 12px; color: var(--muted); }
.rank-val { font-size: 16px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }

/* ═══ Activity ═══ */
.act-item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 4px;
  border-bottom: 1px solid rgba(139,92,246,0.06);
  cursor: pointer;
  border-radius: 8px;
  transition: background .15s;
  min-height: 44px;
}
.act-item:active { background: rgba(139,92,246,0.07); }
.act-item:last-child { border: none; }
.act-emoji { font-size: 16px; flex-shrink: 0; width: 28px; text-align: center; }
.act-info { flex: 1; min-width: 0; }
.act-name { font-size: 14px; font-weight: 500; color: var(--text); }
.act-meta { font-size: 12px; color: var(--dim); }
.act-val { font-size: 14px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.act-val.payout { color: var(--blue); }

/* ═══ Sort Bar ═══ */
.sort-bar { display: flex; gap: 6px; margin-bottom: 16px; overflow-x: auto; }

/* ═══ Apps Grid ═══ */
.apps-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.app-card {
  background: rgba(139,92,246,0.05);
  border: 1px solid var(--card-border);
  border-radius: var(--r);
  padding: 16px;
  cursor: pointer;
  position: relative; overflow: hidden;
  transition: transform .15s, border-color .2s;
}
.app-card:active { transform: scale(.97); }
.app-card:hover { border-color: rgba(139,92,246,0.3); }
.app-stripe { position: absolute; top: 0; left: 0; right: 0; height: 3px; }
.app-emoji { font-size: 24px; margin-bottom: 4px; }
.app-name { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.app-cat { font-size: 10px; color: var(--dim); text-transform: uppercase; letter-spacing: .5px; margin-top: 2px; }
.app-earned { font-size: 22px; font-weight: 800; color: var(--text); margin-top: 10px; font-variant-numeric: tabular-nums; }
.app-stats { font-size: 11px; color: var(--dim); margin-top: 4px; }
.app-last { font-size: 10px; color: var(--dim); margin-top: 6px; font-style: italic; }
.app-bar { margin-top: 8px; height: 4px; border-radius: 2px; background: var(--bg3); overflow: hidden; }
.app-bar-fill { height: 100%; border-radius: 2px; transition: width .6s ease; }
.app-quick {
  position: absolute; top: 8px; right: 8px;
  width: auto; height: auto;
  border-radius: 12px; border: none;
  background: var(--accent-gradient);
  color: #fff;
  font-size: 11px; font-weight: 700;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 4px 8px;
  opacity: 1; transition: opacity .2s, transform .15s;
}
.app-quick:active { transform: scale(.92); }
.app-card:hover .app-quick { opacity: 1; }

/* ═══ Forms ═══ */
.form-card {
  background: rgba(139,92,246,0.05);
  border: 1px solid var(--card-border);
  border-radius: var(--r);
  padding: 24px 20px;
}
.form-section { margin-bottom: 18px; }
.form-label { display: block; font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 8px; }
.form-input {
  width: 100%;
  background: #0f172a;
  border: 1.5px solid var(--bg3);
  border-radius: var(--rs);
  padding: 13px 16px;
  color: var(--text);
  font-size: 15px;
  font-family: inherit;
  outline: none;
  transition: border-color .2s;
  min-height: 44px;
}
.form-input:focus { border-color: var(--accent); }
.form-input:focus-visible { border-color: var(--accent); outline: 2px solid var(--accent-light); outline-offset: 2px; }
.form-input.error { border-color: var(--danger); }
.form-sm { max-width: 140px; }
.form-error { display: none; font-size: 11px; color: var(--danger); margin-top: 4px; font-weight: 500; }
.form-error.show { display: block; }
.form-row { display: flex; gap: 12px; }
.form-half { flex: 1; }
.time-row { display: flex; gap: 10px; }
.time-row .form-input { flex: 1; }
.timer-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px;
  border-radius: var(--rs);
  border: 1.5px solid var(--bg3);
  background: #0f172a;
  color: var(--muted);
  font-size: 13px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: all .2s;
  font-family: inherit;
  min-height: 44px;
}
.timer-btn.running { border-color: var(--danger); color: var(--danger); animation: timerPulse 1.5s ease infinite; }
@keyframes timerPulse { 0%, 100% { opacity: 1; } 50% { opacity: .6; } }
.live-rate { font-size: 13px; color: var(--dim); margin-top: 6px; }
.live-rate strong { color: var(--accent-light); }
.toggle-details {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; padding: 10px;
  border: 1px dashed var(--bg3);
  border-radius: var(--rs);
  background: none; color: var(--muted);
  font-size: 13px; font-weight: 600;
  cursor: pointer; margin-bottom: 18px;
  transition: all .2s; font-family: inherit;
  min-height: 44px;
}
.toggle-details:hover { border-color: var(--accent-light); color: var(--accent-light); }
.toggle-details.open svg { transform: rotate(180deg); }
.log-details { margin-bottom: 18px; animation: slideUp .3s ease; }

.quick-amounts { display: flex; gap: 8px; margin-bottom: 8px; }
.qamt {
  flex: 1; padding: 10px 4px;
  border-radius: var(--rs);
  border: 1.5px solid var(--bg3);
  background: #0f172a;
  color: var(--muted);
  font-size: 15px; font-weight: 700;
  cursor: pointer; transition: all .15s;
  font-family: inherit;
  min-height: 44px;
}
.qamt:active { transform: scale(.95); }
.qamt.active, .qamt:hover {
  border-color: var(--accent);
  color: var(--accent-light);
  background: var(--accent2);
}

/* Repeat Last */
.repeat-last { margin-bottom: 16px; }
.repeat-btn {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 12px 16px;
  border-radius: var(--rs);
  border: 1px solid var(--card-border);
  background: rgba(139,92,246,0.05);
  color: var(--muted);
  font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all .2s; font-family: inherit;
  min-height: 44px;
}
.repeat-btn:hover { border-color: var(--accent-light); color: var(--accent-light); }

/* Success */
.success-card {
  display: flex; flex-direction: column;
  align-items: center; gap: 14px;
  padding: 48px 24px; text-align: center;
}
.success-check { animation: popIn .5s ease; }
@keyframes popIn {
  0% { transform: scale(0); }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); }
}
.success-amount { font-size: 36px; font-weight: 900; color: var(--text); }
.success-meta { font-size: 14px; color: var(--muted); }
.success-actions { display: flex; gap: 10px; margin-top: 12px; }

/* ═══ Buttons ═══ */
.btn-primary {
  background: var(--accent-gradient);
  color: #fff;
  border: none;
  border-radius: var(--rs);
  padding: 14px 28px;
  font-size: 15px; font-weight: 700;
  cursor: pointer; transition: all .2s;
  font-family: inherit;
  box-shadow: var(--accent-glow);
  min-height: 44px;
}
.btn-primary:active { transform: scale(.97); opacity: .9; }
.btn-sm { padding: 8px 16px; font-size: 13px; min-height: 36px; }
.btn-lg { padding: 16px 28px; font-size: 16px; min-height: 52px; }
.btn-full { width: 100%; }
.btn-ghost {
  background: none;
  border: 1.5px solid var(--bg3);
  border-radius: var(--rs);
  padding: 14px 28px;
  color: var(--text);
  font-size: 15px; font-weight: 600;
  cursor: pointer; font-family: inherit;
  transition: all .2s;
  min-height: 44px;
}
.btn-ghost:active { transform: scale(.97); }
.btn-outline {
  background: none;
  border: 1px solid var(--bg3);
  border-radius: var(--rs);
  padding: 12px 20px;
  color: var(--text);
  font-size: 14px; font-weight: 500;
  cursor: pointer; font-family: inherit;
  transition: all .2s;
  margin-bottom: 8px;
  min-height: 44px;
}
.btn-outline:hover { border-color: var(--accent-light); color: var(--accent-light); }
.btn-danger {
  background: none;
  border: 1.5px solid var(--danger);
  border-radius: var(--rs);
  padding: 12px 20px;
  color: var(--danger);
  font-size: 14px; font-weight: 600;
  cursor: pointer; font-family: inherit;
  min-height: 44px;
}
.btn-row { display: flex; gap: 10px; justify-content: flex-end; margin-top: 12px; }

/* ═══ Color / Emoji ═══ */
.color-row { display: flex; gap: 8px; flex-wrap: wrap; }
.csw {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2.5px solid transparent;
  cursor: pointer; transition: all .15s;
  min-width: 44px; min-height: 44px;
}
.csw.active { border-color: var(--accent-light); transform: scale(1.15); }
.emoji-picker { display: flex; gap: 8px; flex-wrap: wrap; }
.emoji-opt {
  width: 40px; height: 40px;
  border-radius: 10px;
  border: 2px solid transparent;
  background: #0f172a;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; cursor: pointer; transition: all .15s;
  min-width: 44px; min-height: 44px;
}
.emoji-opt.active { border-color: var(--accent); background: var(--accent2); }

/* ═══ Presets ═══ */
.presets { margin-bottom: 16px; }
.presets-title {
  font-size: 11px; color: var(--dim);
  text-transform: uppercase; letter-spacing: .8px;
  font-weight: 700; margin-bottom: 10px;
}
.preset-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.preset-chip {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  border-radius: 20px;
  background: rgba(139,92,246,0.05);
  border: 1px solid var(--card-border);
  color: var(--text);
  font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all .2s;
  white-space: nowrap;
  min-height: 44px;
}
.preset-chip:active { transform: scale(.95); }
.preset-chip:hover { border-color: var(--accent-light); }
.preset-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.divider { text-align: center; margin: 16px 0; position: relative; }
.divider::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--bg3); }
.divider span { position: relative; background: #0a0818; padding: 0 12px; font-size: 12px; color: var(--dim); }

/* ═══ Detail Modal ═══ */
.detail-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px; margin-bottom: 16px;
}
.d-stat {
  text-align: center; padding: 14px 8px;
  background: rgba(139,92,246,0.06);
  border: 1px solid var(--card-border);
  border-radius: var(--rs);
}
.d-stat-val { display: block; font-size: 20px; font-weight: 800; color: var(--text); }
.d-stat-lbl {
  display: block; font-size: 9px; color: var(--muted);
  margin-top: 3px; text-transform: uppercase; letter-spacing: .5px; font-weight: 600;
}
.detail-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.detail-head h4 { font-size: 14px; font-weight: 700; color: var(--text); }

/* ═══ Nav ═══ */
.nav {
  position: fixed; bottom: 0; left: 0; right: 0;
  display: flex; align-items: flex-end; justify-content: space-around;
  padding: 6px 8px calc(6px + var(--sab));
  background: rgba(10,8,24,0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--card-border);
  z-index: 50;
}
.nav-btn {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  border: none; background: none;
  color: var(--dim);
  font-size: 10px; font-weight: 600;
  cursor: pointer; padding: 8px 16px;
  border-radius: 12px; transition: all .2s;
  min-width: 56px; min-height: 44px;
  position: relative;
}
.nav-btn.active { color: var(--accent-light); }
.nav-btn.active::after {
  content: '';
  position: absolute; top: -1px; left: 50%;
  transform: translateX(-50%);
  width: 20px; height: 2px;
  background: var(--accent-light);
  border-radius: 1px;
  box-shadow: 0 0 8px var(--accent-light);
}
.nav-btn span { letter-spacing: .3px; }
.fab {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-gradient);
  border-radius: 50%;
  margin-bottom: 2px;
  box-shadow: 0 4px 24px rgba(124,58,237,0.4);
  transition: transform .15s;
}
.nav-fab:active .fab { transform: scale(.9); }

/* ═══ Modal ═══ */
.modal { display: none; }
.modal.show {
  display: flex; position: fixed; inset: 0;
  z-index: 200; align-items: flex-end; justify-content: center;
}
.modal-bg {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.modal-sheet {
  position: relative; z-index: 1;
  background: #0e0c1e;
  border: 1px solid var(--card-border);
  border-radius: 20px 20px 0 0;
  padding: 20px 20px calc(24px + var(--sab));
  width: 100%; max-width: 480px;
  max-height: 85vh; overflow-y: auto;
  animation: sheetUp .3s ease;
}
.modal-tall { max-height: 92vh; }
@keyframes sheetUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
.drag-handle {
  width: 36px; height: 4px;
  border-radius: 2px;
  background: var(--bg3);
  margin: 0 auto 16px;
}
.modal-head {
  display: flex; align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.modal-head h3 { font-size: 18px; font-weight: 800; color: var(--text); }
.close-btn {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border: none;
  background: rgba(139,92,246,0.1);
  border-radius: 50%;
  color: var(--muted);
  font-size: 18px; cursor: pointer;
  min-width: 44px; min-height: 44px;
}

/* Confirm */
.confirm-card {
  position: relative; z-index: 1;
  background: #0e0c1e;
  border: 1px solid var(--card-border);
  border-radius: var(--r);
  padding: 28px 24px;
  width: 90%; max-width: 340px;
  margin: auto; text-align: center;
  animation: confirmPop .2s ease;
}
.modal:has(.confirm-card) { align-items: center; }
@keyframes confirmPop {
  from { transform: scale(.9); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
#confirm-msg { font-size: 15px; font-weight: 600; margin-bottom: 20px; line-height: 1.5; color: var(--text); }
.confirm-btns { display: flex; gap: 10px; justify-content: center; }
.confirm-btns button { flex: 1; }

/* Settings */
.settings { display: flex; flex-direction: column; gap: 14px; }
.setting { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.setting span { font-size: 14px; font-weight: 500; color: var(--text); }
.settings hr { border: none; border-top: 1px solid var(--bg3); margin: 4px 0; }
.settings-about { text-align: center; font-size: 11px; color: var(--dim); margin-top: 8px; }

/* ═══ Heatmap ═══ */
.heatmap-months {
  display: flex; gap: 2px; margin-bottom: 4px;
  padding-left: 2px;
  font-size: 10px; color: var(--muted); font-weight: 600;
}
.heatmap-months span { flex: 1; text-align: center; }
.heatmap-wrap { overflow-x: auto; padding-bottom: 4px; }
.hm-grid { display: grid; grid-template-rows: repeat(7, 1fr); grid-auto-flow: column; gap: 3px; }
.hm-day { width: 14px; height: 14px; border-radius: 3px; cursor: pointer; transition: transform .1s; }
.hm-day:hover { transform: scale(1.4); }
.hm-0 { background: rgba(139,92,246,0.05); }
.hm-1 { background: rgba(139,92,246,0.2); }
.hm-2 { background: rgba(139,92,246,0.4); }
.hm-3 { background: rgba(139,92,246,0.65); }
.hm-4 { background: #7c3aed; }
.heatmap-legend {
  display: flex; align-items: center; gap: 3px;
  justify-content: flex-end; margin-top: 8px;
  font-size: 10px; color: var(--muted);
}
.hm-cell { width: 12px; height: 12px; border-radius: 2px; display: inline-block; }

/* Insight Cards */
.insight-row { display: flex; gap: 10px; margin-bottom: 16px; overflow-x: auto; }
.insight {
  flex-shrink: 0;
  background: rgba(139,92,246,0.05);
  border: 1px solid var(--card-border);
  border-radius: var(--rs);
  padding: 12px 16px;
  min-width: 140px;
}
.insight-label { font-size: 10px; color: var(--muted); text-transform: uppercase; font-weight: 700; letter-spacing: .5px; }
.insight-val { font-size: 15px; font-weight: 800; margin-top: 4px; color: var(--text); }
.insight-sub { font-size: 11px; color: var(--dim); margin-top: 2px; }

/* Ranking */
.rank-list { display: flex; flex-direction: column; }
.rk-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(139,92,246,0.06);
}
.rk-item:last-child { border: none; }
.rk-pos {
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px; font-size: 12px; font-weight: 800;
  background: var(--bg3); flex-shrink: 0;
  color: var(--text);
}
.rk-pos.g { background: #f59e0b; color: #000; }
.rk-pos.s { background: #94a3b8; color: #000; }
.rk-pos.b { background: #cd7f32; color: #fff; }
.rk-info { flex: 1; }
.rk-name { font-size: 14px; font-weight: 600; color: var(--text); }
.rk-sub { font-size: 12px; color: var(--dim); }
.rk-val { font-size: 16px; font-weight: 800; color: var(--text); }

/* Type Breakdown */
.type-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.type-lbl { font-size: 12px; width: 80px; flex-shrink: 0; color: var(--muted); font-weight: 500; }
.type-bar { flex: 1; height: 8px; background: var(--bg3); border-radius: 4px; overflow: hidden; }
.type-fill { height: 100%; border-radius: 4px; transition: width .6s ease; }
.type-val { font-size: 12px; font-weight: 700; width: 56px; text-align: right; font-variant-numeric: tabular-nums; color: var(--text); }
.filter-select {
  background: #0f172a;
  border: 1px solid var(--bg3);
  border-radius: 8px;
  padding: 4px 8px;
  color: var(--text);
  font-size: 12px;
  min-height: 36px;
}

/* ═══ Milestone ═══ */
.milestone {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 300;
  display: flex; justify-content: center;
  animation: milestoneIn .5s ease;
}
@keyframes milestoneIn {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}
.milestone-content {
  background: linear-gradient(135deg, rgba(124,58,237,0.15), rgba(196,181,253,0.08));
  border: 1px solid rgba(196,181,253,0.2);
  border-radius: 0 0 16px 16px;
  padding: 16px 24px;
  display: flex; align-items: center; gap: 10px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.milestone-emoji { font-size: 28px; }
.milestone-text { font-size: 14px; font-weight: 700; color: var(--text); }

/* ═══ Toast ═══ */
.toast {
  position: fixed;
  bottom: calc(var(--nav) + 16px + var(--sab));
  left: 50%; transform: translateX(-50%);
  background: #0e0c1e;
  border: 1px solid var(--card-border);
  color: var(--text);
  padding: 12px 20px;
  border-radius: 28px;
  font-size: 14px; font-weight: 600;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 0 1px rgba(139,92,246,0.1);
  z-index: 300;
  display: flex; align-items: center; gap: 12px;
  animation: toastIn .3s ease;
  white-space: nowrap;
}
@keyframes toastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(16px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.toast-action {
  border: none; background: var(--accent-gradient);
  color: #fff; padding: 4px 12px;
  border-radius: 14px; font-size: 12px; font-weight: 700;
  cursor: pointer;
  min-height: 28px;
}

/* ═══ Suggestion Bar ═══ */
.suggestion-bar {
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(135deg, rgba(124,58,237,0.1), rgba(196,181,253,0.04));
  border: 1px solid rgba(196,181,253,0.12);
  border-radius: var(--rs);
  padding: 12px 14px; margin-bottom: 16px;
  animation: slideUp .3s ease;
}
.suggestion-icon { font-size: 18px; flex-shrink: 0; }
.suggestion-text { flex: 1; font-size: 13px; font-weight: 600; color: var(--text); }
.suggestion-btn {
  background: var(--accent-gradient);
  color: #fff; border: none;
  border-radius: 16px; padding: 6px 16px;
  font-size: 12px; font-weight: 700;
  cursor: pointer; flex-shrink: 0;
  min-height: 36px;
}
.suggestion-dismiss {
  background: none; border: none;
  color: var(--dim); font-size: 18px;
  cursor: pointer; flex-shrink: 0; padding: 0 4px;
  min-width: 36px; min-height: 36px;
}

/* ═══ Auto Import Row ═══ */
.auto-row { display: flex; gap: 10px; margin-bottom: 16px; }
.auto-btn {
  flex: 1; display: flex; align-items: center;
  justify-content: center; gap: 8px;
  padding: 14px 12px;
  border-radius: var(--rs);
  border: 1.5px dashed var(--bg3);
  background: rgba(139,92,246,0.05);
  color: var(--muted);
  font-size: 12px; font-weight: 600;
  cursor: pointer; transition: all .2s; font-family: inherit;
  min-height: 44px;
}
.auto-btn:hover { border-color: var(--accent-light); color: var(--accent-light); }
.auto-btn:active { transform: scale(.97); }

/* ═══ Voice Button ═══ */
.amount-row { display: flex; gap: 8px; }
.amount-row .form-input { flex: 1; }
.voice-btn {
  width: 48px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--rs);
  border: 1.5px solid var(--bg3);
  background: #0f172a;
  color: var(--muted); cursor: pointer;
  transition: all .2s;
  min-height: 44px;
}
.voice-btn:hover { border-color: var(--accent-light); color: var(--accent-light); }
.voice-btn.listening { border-color: var(--danger); color: var(--danger); animation: timerPulse 1s ease infinite; }

/* ═══ Upload Zone ═══ */
.upload-zone {
  border: 2px dashed var(--bg3);
  border-radius: var(--r);
  padding: 40px 24px; text-align: center;
  cursor: pointer; transition: all .2s;
}
.upload-zone:hover { border-color: var(--accent-light); }
.upload-zone.dragover { border-color: var(--accent); background: var(--accent2); }
.upload-zone p { color: var(--muted); font-size: 14px; font-weight: 600; margin-top: 12px; }
.upload-sub { font-size: 12px!important; color: var(--dim)!important; font-weight: 400!important; margin-top: 4px!important; }

/* ═══ CSV Preview ═══ */
.csv-summary {
  background: var(--accent2);
  border: 1px solid rgba(139,92,246,0.2);
  border-radius: var(--rs); padding: 16px;
  margin-bottom: 16px; text-align: center;
}
.csv-summary .csv-count { font-size: 24px; font-weight: 900; color: var(--accent-light); }
.csv-summary .csv-total { font-size: 14px; color: var(--muted); margin-top: 4px; }
.csv-list { max-height: 300px; overflow-y: auto; margin-bottom: 16px; }
.csv-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(139,92,246,0.06);
}
.csv-item:last-child { border: none; }
.csv-item-info { flex: 1; }
.csv-item-name { font-size: 13px; font-weight: 600; color: var(--text); }
.csv-item-date { font-size: 11px; color: var(--dim); }
.csv-item-amt { font-size: 14px; font-weight: 700; color: var(--text); }
.csv-item input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accent); }

/* ═══ OCR ═══ */
.ocr-found { text-align: center; padding: 20px 0; margin-bottom: 16px; }
.ocr-label { font-size: 13px; color: var(--muted); }
.ocr-amount { font-size: 36px; font-weight: 900; color: var(--text); margin-top: 4px; }
.ocr-loading { text-align: center; padding: 40px 0; }
.ocr-loading p { color: var(--muted); font-size: 14px; margin-top: 12px; }
.spinner {
  width: 32px; height: 32px;
  border: 3px solid var(--bg3);
  border-top-color: var(--accent);
  border-radius: 50%; margin: 0 auto;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ═══ Tutorial Cards ═══ */
.tut-card {
  background: linear-gradient(135deg, rgba(124,58,237,0.08), rgba(196,181,253,0.04));
  border: 1px solid rgba(196,181,253,0.15);
  border-radius: var(--rs);
  padding: 14px 16px; margin-bottom: 14px;
  position: relative; animation: slideUp .3s ease;
  font-size: 13px; line-height: 1.6; color: var(--muted);
}
.tut-card strong { color: var(--text); }
.tut-card b { color: var(--accent-light); }
.tut-close {
  position: absolute; top: 8px; right: 10px;
  background: none; border: none;
  color: var(--dim); font-size: 18px;
  cursor: pointer; padding: 2px 6px;
  min-width: 36px; min-height: 36px;
}

/* ═══ Connection Buttons ═══ */
.settings-section-title {
  font-size: 11px; color: var(--dim);
  text-transform: uppercase; letter-spacing: .8px;
  font-weight: 700; margin-bottom: 8px;
}
.connect-btn { display: flex; align-items: center; justify-content: center; gap: 8px; }
.connect-status {
  font-size: 12px; padding: 8px 12px;
  border-radius: var(--rs); margin-bottom: 8px;
}
.connect-status.success {
  background: rgba(196,181,253,0.1);
  color: var(--accent-light);
  border: 1px solid rgba(196,181,253,0.15);
}
.connect-status.error {
  background: rgba(239,68,68,0.1);
  color: #fca5a5;
  border: 1px solid rgba(239,68,68,0.15);
}
.connect-status.info {
  background: rgba(129,140,248,0.1);
  color: var(--blue);
  border: 1px solid rgba(129,140,248,0.15);
}

/* ═══ Scrollbar ═══ */
::-webkit-scrollbar { width: 3px; height: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(139,92,246,0.3); border-radius: 2px; }

/* ═══ Canvas ═══ */
canvas { width: 100%!important; }

.btn-spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,0.3);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite;margin-right:6px;vertical-align:middle}
.empty{animation:fadeInUp 0.4s ease}
@keyframes fadeInUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

/* ═══ Tip Card ═══ */
.tip-card{background:linear-gradient(135deg,rgba(124,58,237,0.08),rgba(52,211,153,0.06));border:1px solid rgba(124,58,237,0.12);border-radius:14px;padding:16px;position:relative}
.tip-card .tip-dismiss{position:absolute;top:8px;right:8px;background:none;border:none;color:#8899ab;font-size:16px;cursor:pointer;min-width:32px;min-height:32px}
.tip-card .tip-title{font-size:14px;font-weight:700;margin-bottom:6px;display:flex;align-items:center;gap:6px}
.tip-card .tip-body{font-size:13px;color:#8899ab;line-height:1.5}

/* ═══ Responsive ═══ */
@media (max-width: 374px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 480px) { .apps-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px) {
  .screen { max-width: 560px; margin: 0 auto; }
  .header { max-width: 560px; margin: 0 auto; }
}

/* ═══ Form Validation ═══ */
.form-input.invalid {
  border-color: #ef4444 !important;
  animation: shake .3s ease;
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* ═══ Toast Types ═══ */
.toast-success { border-color: rgba(16,185,129,0.5) !important; }
.toast-error { border-color: rgba(239,68,68,0.5) !important; }
.toast-info { border-color: rgba(139,92,246,0.3) !important; }

/* ═══ App Quick Button (always visible) ═══ */
.app-quick-visible {
  opacity: 1 !important;
  font-size: 11px !important;
  width: auto !important;
  height: auto !important;
  padding: 4px 8px !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .2px;
}

/* ═══ Empty State Buttons ═══ */
.empty .btn-primary,
.empty .btn-ghost { margin-top: 12px; }

/* ═══ Welcome Empty ═══ */
.welcome-empty { padding: 24px 16px; }

/* ═══ Hover/Active Transitions ═══ */
.btn-outline, .btn-danger, .btn-ghost, .btn-primary, .nav-btn, .pill, .act-item, .stat, .app-card, .preset-chip, .emoji-opt, .csw, .qamt, .repeat-btn, .auto-btn, .timer-btn, .icon-btn {
  transition: all .2s;
}
.btn-primary:hover { opacity: .92; }
.btn-ghost:hover { border-color: var(--accent-light); color: var(--accent-light); }
.btn-danger:hover { background: rgba(239,68,68,0.1); }

/* ═══ Button Hover States ═══ */
.btn-primary:hover{filter:brightness(1.1);transform:translateY(-1px)}
.btn-outline:hover{background:rgba(124,58,237,0.1);border-color:#7c3aed}
.btn-ghost:hover{background:rgba(255,255,255,0.05)}
.btn-danger:hover{filter:brightness(1.1)}
.pill:hover{filter:brightness(1.1)}
.nav-btn:hover{color:#c4b5fd}

/* ═══ Disabled Button Styling ═══ */
button:disabled,.btn-primary:disabled,.btn-outline:disabled{opacity:0.5;cursor:not-allowed;pointer-events:none;filter:grayscale(0.3)}

/* ═══ Form Input Error State ═══ */
.form-input.error,.form-input.invalid{border-color:#ef4444;box-shadow:0 0 0 2px rgba(239,68,68,0.15)}
.form-input.error:focus,.form-input.invalid:focus{border-color:#ef4444;box-shadow:0 0 0 3px rgba(239,68,68,0.2)}

/* ═══ Screen Transitions ═══ */
.screen{opacity:0;transition:opacity 0.25s ease}
.screen.active{opacity:1}

/* ═══ Modal Animate Out ═══ */
.modal{transition:opacity 0.2s ease}
.modal.hiding{opacity:0}
.modal .modal-sheet{transition:transform 0.25s ease}
.modal.hiding .modal-sheet{transform:translateY(100%)}

/* ═══ Loading Skeleton Animation ═══ */
.skeleton{background:linear-gradient(90deg,rgba(255,255,255,0.03) 25%,rgba(255,255,255,0.06) 50%,rgba(255,255,255,0.03) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:8px;min-height:20px}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.skeleton-card{height:80px;margin-bottom:8px}
.skeleton-text{height:14px;width:60%;margin-bottom:6px}
.skeleton-circle{width:40px;height:40px;border-radius:50%}

/* ═══ Stats Grid Responsive Fix ═══ */
@media(max-width:400px){.stats-grid{grid-template-columns:repeat(2,1fr)!important}}

/* ═══ Smooth Card Hover ═══ */
.card{transition:transform 0.15s ease,box-shadow 0.15s ease}
.card:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,0.15)}

/* ═══ Better Link/Interactive Transitions ═══ */
a,button,.pill,.nav-btn{transition:all 0.15s ease}

/* ═══ Offline Indicator Style ═══ */
.offline-bar{position:fixed;top:0;left:0;right:0;padding:8px;background:#ef4444;color:#fff;text-align:center;font-size:12px;font-weight:600;z-index:9999;transform:translateY(-100%);transition:transform 0.3s ease}
.offline-bar.show{transform:translateY(0)}

/* ═══ Utility Classes ═══ */
.btn-full{width:100%}
.btn-icon{display:inline-flex;align-items:center;justify-content:center;gap:6px}
.btn-success{background:linear-gradient(135deg,#10b981,#059669);color:#fff;border:none;border-radius:10px;font-weight:600;cursor:pointer;min-height:44px;padding:12px 20px}
.btn-success:hover{filter:brightness(1.1);transform:translateY(-1px)}
.text-center{text-align:center}
.text-sm{font-size:13px}
.text-xs{font-size:11px}
.text-dim{color:var(--dim)}
.text-accent{color:var(--accent)}
.text-success{color:#10b981}
.text-danger{color:#ef4444}
.text-warning{color:#f59e0b}
.mt-1{margin-top:4px}.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}
.mb-1{margin-bottom:4px}.mb-2{margin-bottom:8px}.mb-3{margin-bottom:12px}.mb-4{margin-bottom:16px}
.p-2{padding:8px}.p-3{padding:12px}.p-4{padding:16px}
.flex{display:flex}.flex-col{flex-direction:column}.flex-between{justify-content:space-between}.flex-center{align-items:center}.flex-wrap{flex-wrap:wrap}
.gap-1{gap:4px}.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}
.rounded{border-radius:var(--r)}.rounded-sm{border-radius:var(--rs)}
.w-full{width:100%}
.hidden{display:none}
.truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ═══ Milestone Celebration ═══ */
.celebrate-burst{position:fixed;inset:0;pointer-events:none;z-index:9998;display:flex;align-items:center;justify-content:center}
.celebrate-burst .burst{font-size:60px;animation:burstPop 1.2s cubic-bezier(.34,1.56,.64,1) forwards}
@keyframes burstPop{0%{transform:scale(0) rotate(-15deg);opacity:0}40%{transform:scale(1.3) rotate(10deg);opacity:1}60%{transform:scale(1) rotate(0deg)}100%{transform:scale(1.2) rotate(0deg);opacity:0}}
.confetti{position:fixed;top:-10px;width:10px;height:10px;pointer-events:none;z-index:9997;animation:confettiFall 2.5s linear forwards}
@keyframes confettiFall{0%{transform:translateY(0) rotate(0deg);opacity:1}100%{transform:translateY(100vh) rotate(720deg);opacity:0}}

/* ═══ Goal Progress ═══ */
.goal-fill{transition:width 1.2s cubic-bezier(.4,0,.2,1)}
.goal-complete{animation:goalGlow 2s ease-in-out}
@keyframes goalGlow{0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,0)}50%{box-shadow:0 0 20px 4px rgba(16,185,129,0.5)}}

/* ═══ Streak Warning ═══ */
.streak-warning{animation:streakPulse 1.5s ease-in-out infinite}
@keyframes streakPulse{0%,100%{color:#f59e0b}50%{color:#ef4444}}

/* ═══ Light Mode Theme ═══ */
[data-theme="light"]{
  --bg:#fafbfc;--card:#ffffff;--text:#0f172a;--dim:#334155;--muted:#475467;
  --border:rgba(0,0,0,0.06);--accent:#7c3aed;--accent-light:#a78bfa;
}
[data-theme="light"] body{background:var(--bg);color:var(--text)}
[data-theme="light"] body::before{opacity:0.4}
[data-theme="light"] .card{background:#ffffff;border:1px solid rgba(124,58,237,0.1);box-shadow:0 1px 3px rgba(0,0,0,0.04)}
[data-theme="light"] .form-input{background:#ffffff;border-color:rgba(0,0,0,0.1);color:#0f172a}
[data-theme="light"] .form-input:focus{border-color:var(--accent)}
[data-theme="light"] .btn-outline{border-color:rgba(124,58,237,0.2);color:var(--accent)}
[data-theme="light"] .nav-bar{background:rgba(255,255,255,0.95);border-top:1px solid rgba(0,0,0,0.06)}
[data-theme="light"] .screen-header{background:rgba(255,255,255,0.95);border-bottom:1px solid rgba(0,0,0,0.06)}
[data-theme="light"] .modal-bg{background:rgba(0,0,0,0.35)}
[data-theme="light"] .modal-sheet{background:#ffffff;color:#0f172a}
[data-theme="light"] .pill{background:rgba(124,58,237,0.08);color:var(--accent);border-color:transparent}
[data-theme="light"] .pill.active{background:linear-gradient(135deg,#7c3aed,#6d28d9);color:#fff}

/* ═══ Font Size Variants ═══ */
[data-font-size="small"]{font-size:13px}
[data-font-size="small"] .hero-amount{font-size:34px!important}
[data-font-size="large"]{font-size:17px}
[data-font-size="large"] .hero-amount{font-size:50px!important}
[data-font-size="large"] .text-xs{font-size:13px!important}
[data-font-size="large"] .text-sm{font-size:15px!important}

/* ═══ Swipe-to-Delete ═══ */
.swipe-item{position:relative;overflow:hidden;touch-action:pan-y}
.swipe-item .swipe-content{transition:transform 0.2s ease;position:relative;z-index:2;background:inherit}
.swipe-item .swipe-action{position:absolute;right:0;top:0;bottom:0;width:80px;background:#ef4444;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;z-index:1}
.swipe-item.swiped .swipe-content{transform:translateX(-80px)}

/* ═══ Long-Press Feedback ═══ */
.long-press-active{transform:scale(0.97);transition:transform 0.1s ease}

/* ═══ Sync Indicator ═══ */
.sync-spin{display:inline-block;width:10px;height:10px;border:2px solid rgba(124,58,237,0.2);border-top-color:#7c3aed;border-radius:50%;animation:spin 0.8s linear infinite;vertical-align:middle;margin-right:4px}
.sync-indicator.syncing{color:#7c3aed}
.sync-indicator.synced{color:#10b981}
.sync-indicator.error{color:#ef4444}

/* ═══ Keyboard Shortcut Hint ═══ */
.kbd{display:inline-block;padding:1px 5px;font-size:10px;font-family:monospace;background:rgba(124,58,237,0.15);border:1px solid rgba(124,58,237,0.25);border-radius:4px;color:var(--text);vertical-align:middle}

/* ═══ Calendar View ═══ */
.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin:8px 0}
.calendar-day{aspect-ratio:1;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.04);border-radius:6px;padding:4px;font-size:10px;cursor:pointer;display:flex;flex-direction:column;transition:all 0.15s ease;min-height:44px}
.calendar-day:hover{background:rgba(124,58,237,0.1);border-color:var(--accent)}
.calendar-day.has-earnings{background:rgba(16,185,129,0.08);border-color:rgba(16,185,129,0.2)}
.calendar-day.today{border-color:var(--accent);border-width:2px}
.calendar-day .cal-date{font-weight:700;color:var(--dim)}
.calendar-day .cal-amt{font-size:9px;font-weight:700;color:#10b981;margin-top:auto}
.calendar-header{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;font-size:10px;text-transform:uppercase;color:var(--dim);text-align:center;font-weight:700}

/* ═══ Reduced Motion ═══ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .splash { animation: none; opacity: 0; pointer-events: none; }
  .splash-logo { animation: none; }
  .goal-ring-wrap circle { transition: none; }
}

/* ── Achievements Screen ── */
.ach-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; padding:0 4px 80px; }
.ach-card { background:rgba(139,92,246,0.06); border:1px solid rgba(139,92,246,0.12); border-radius:14px; padding:16px 12px; text-align:center; position:relative; transition:transform .15s, border-color .15s; }
.ach-card.earned { background:linear-gradient(135deg,rgba(16,185,129,0.10),rgba(139,92,246,0.08)); border-color:rgba(16,185,129,0.35); box-shadow:0 4px 16px rgba(16,185,129,0.08); }
.ach-card.locked { filter:grayscale(0.85) brightness(0.75); opacity:0.72; }
.ach-card-icon { font-size:40px; line-height:1; margin-bottom:8px; display:block; }
.ach-card-name { font-size:14px; font-weight:700; color:#f1f5f9; margin-bottom:4px; }
.ach-card-desc { font-size:11px; color:#8899ab; line-height:1.4; margin-bottom:8px; min-height:30px; }
.ach-card-check { position:absolute; top:6px; right:8px; font-size:14px; color:#10b981; font-weight:900; }
.ach-bar { height:4px; background:rgba(255,255,255,0.06); border-radius:2px; overflow:hidden; margin-top:6px; }
.ach-bar-fill { height:100%; background:linear-gradient(90deg,#7c3aed,#a78bfa); border-radius:2px; transition:width .5s; }
.ach-bar-label { font-size:10px; color:#64748b; margin-top:3px; }

/* ── Daily Challenge Card ── */
.challenge-card { background:linear-gradient(135deg,rgba(245,158,11,0.10),rgba(124,58,237,0.08)); border:1px solid rgba(245,158,11,0.22); border-radius:14px; padding:14px 16px; margin-bottom:14px; }
.challenge-card.complete { background:linear-gradient(135deg,rgba(16,185,129,0.14),rgba(52,211,153,0.10)); border-color:rgba(16,185,129,0.4); }
.challenge-head { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.challenge-icon { font-size:22px; }
.challenge-title { font-size:14px; font-weight:700; color:#f1f5f9; flex:1; }
.challenge-reward { font-size:11px; font-weight:700; color:#f59e0b; background:rgba(245,158,11,0.12); padding:3px 8px; border-radius:100px; }
.challenge-card.complete .challenge-reward { color:#10b981; background:rgba(16,185,129,0.14); }
.challenge-desc { font-size:12px; color:#8899ab; margin-bottom:8px; }
.challenge-bar { height:6px; background:rgba(255,255,255,0.05); border-radius:3px; overflow:hidden; }
.challenge-bar-fill { height:100%; background:linear-gradient(90deg,#f59e0b,#fb923c); border-radius:3px; transition:width .5s; }
.challenge-card.complete .challenge-bar-fill { background:linear-gradient(90deg,#10b981,#34d399); }
.challenge-progress { display:flex; justify-content:space-between; font-size:11px; color:#8899ab; margin-top:6px; }

/* ── Streak At-Risk Banner ── */
.streak-risk { display:flex; align-items:center; gap:10px; background:linear-gradient(135deg,rgba(239,68,68,0.16),rgba(245,158,11,0.10)); border:1px solid rgba(239,68,68,0.32); border-radius:12px; padding:12px 14px; margin-bottom:14px; }
.streak-risk-icon { font-size:22px; }
.streak-risk-text { flex:1; font-size:13px; font-weight:700; color:#fecaca; }
.streak-risk-btn { background:#ef4444; color:#fff; border:none; border-radius:8px; padding:8px 14px; font-size:12px; font-weight:700; cursor:pointer; font-family:inherit; }
.streak-risk-close { background:none; border:none; color:#fca5a5; font-size:18px; cursor:pointer; padding:0 4px; }

/* ── Trial Ending Banner ── */
.trial-banner { display:flex; align-items:center; gap:10px; background:linear-gradient(135deg,rgba(124,58,237,0.14),rgba(16,185,129,0.08)); border:1px solid rgba(124,58,237,0.3); border-radius:12px; padding:12px 14px; margin-bottom:14px; }
.trial-banner-icon { font-size:22px; }
.trial-banner-text { flex:1; font-size:13px; font-weight:600; color:#c4b5fd; }
.trial-banner-btn { background:linear-gradient(135deg,#7c3aed,#6d28d9); color:#fff; border:none; border-radius:8px; padding:8px 14px; font-size:12px; font-weight:700; cursor:pointer; font-family:inherit; }

/* ── Retention Modal ── */
.retention-overlay { position:fixed; inset:0; z-index:9200; background:rgba(0,0,0,0.82); display:flex; align-items:center; justify-content:center; padding:20px; }
.retention-card { background:#0e0c1e; border:1px solid rgba(124,58,237,0.25); border-radius:18px; padding:24px; max-width:380px; width:100%; text-align:center; }
.retention-card h3 { font-size:19px; font-weight:800; margin-bottom:8px; }
.retention-card p { font-size:14px; color:#94a3b8; margin-bottom:18px; line-height:1.5; }
.retention-btn { display:block; width:100%; padding:13px; border-radius:10px; font-size:14px; font-weight:700; margin-bottom:8px; cursor:pointer; font-family:inherit; border:none; transition:transform .15s; }
.retention-btn:active { transform:scale(0.98); }
.retention-btn.primary { background:linear-gradient(135deg,#7c3aed,#6d28d9); color:#fff; }
.retention-btn.secondary { background:rgba(16,185,129,0.14); color:#34d399; border:1px solid rgba(16,185,129,0.3); }
.retention-btn.tertiary { background:rgba(245,158,11,0.12); color:#fbbf24; border:1px solid rgba(245,158,11,0.28); }
.retention-btn.danger { background:transparent; color:#94a3b8; border:1px solid #334155; }

/* ── Upgrade Modal Plan Toggle ── */
.plan-toggle { display:flex; gap:0; background:rgba(255,255,255,0.04); border-radius:10px; padding:4px; margin-bottom:16px; }
.plan-toggle button { flex:1; background:none; color:#94a3b8; border:none; padding:10px; font-size:13px; font-weight:700; cursor:pointer; border-radius:7px; font-family:inherit; }
.plan-toggle button.active { background:linear-gradient(135deg,#7c3aed,#6d28d9); color:#fff; }
.plan-save-badge { display:inline-block; background:#10b981; color:#fff; font-size:10px; font-weight:700; padding:2px 6px; border-radius:6px; margin-left:6px; }