/* ── TOKENS ─────────────────────────────────────────────────────────────── */
:root {
  --bg: #F5F1EB;
  --surface: #FDFCFA;
  --border: #DDD5C8;
  --text: #2A1F3D;
  --muted: #9a9490;
  --soft: #EDE8E0;
  --accent: #6B4FA0;
  --accent-light: #EDE6F6;
  --accent-mid: #C8B4E8;
  --green: #6B4FA0;
  --green-bg: #EDE6F6;
  --green-border: #C8B4E8;
  --gold: #C9A96E;
  --lavender: #C8B4E8;
  --violet-glow: rgba(107,79,160,0.15);
  --orange: #c2410c;
  --orange-bg: #fff4ee;
  --red: #C0392B;
  --red-bg: #fef2f2;
  --blue: #1d4ed8;
  --blue-bg: #eff6ff;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --brand: #6B4FA0;
  --brand-soft: #C8B4E8;
  --brand-glow: rgba(107,79,160,0.12);
  --shadow: 0 2px 8px rgba(107,79,160,0.08);
  /* Pillowy radius scale — use these for new components */
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-xl: 24px;
  --r-pill: 999px;
  /* Shadow scale — use these instead of ad-hoc rgba(107,79,160,...) shadows */
  --shadow-sm: 0 2px 8px rgba(107,79,160,0.08);
  --shadow-md: 0 4px 18px rgba(107,79,160,0.12);
  --shadow-lg: 0 10px 26px rgba(107,79,160,0.18);
  --shadow-fab: 0 10px 26px rgba(107,79,160,0.42);
  /* Semantic aliases — --green* is intentionally violet for the monochrome design.
     Use --success* in new code; --green* preserved to avoid sweeping 60+ inline refs. */
  --success: var(--accent);
  --success-bg: var(--accent-light);
  --success-border: var(--accent-mid);
}

body.dark {
  --bg: #0e0d12;
  --surface: #161420;
  --border: #252235;
  --text: #f0ecff;
  --muted: #6b6880;
  --soft: #1c1a2a;
  --accent: #C8B4E8;
  --accent-light: #2d1f5e;
  --accent-mid: #4c3890;
  --brand: #6B4FA0;
  --brand-soft: #C8B4E8;
  --brand-glow: rgba(200,180,232,0.15);
  --green: #C8B4E8;
  --green-bg: #1c1a2a;
  --green-border: #3d2f5e;
  --gold: #C9A96E;
  --orange: #fb923c;
  --orange-bg: #2d1a0a;
  --red: #f87171;
  --red-bg: #2d0a0a;
  --blue: #60a5fa;
  --blue-bg: #0c1a40;
}

/* ── SLATE THEME ───────────────────────────────────────────────────────── */
body.slate {
  --accent: #3D5A80;
  --accent-light: #E0EAF2;
  --accent-mid: #8FAABE;
  --brand: #3D5A80;
  --brand-soft: #8FAABE;
  --brand-glow: rgba(61,90,128,0.12);
  --green: #3D5A80;
  --green-bg: #E0EAF2;
  --green-border: #8FAABE;
  --lavender: #8FAABE;
  --violet-glow: rgba(61,90,128,0.15);
  --shadow: 0 2px 8px rgba(61,90,128,0.08);
}
body.dark.slate {
  --accent: #8FAABE;
  --accent-light: #1a2a3e;
  --accent-mid: #3D5A80;
  --brand: #3D5A80;
  --brand-soft: #8FAABE;
  --brand-glow: rgba(143,170,190,0.15);
  --green: #8FAABE;
  --green-bg: #1a2a3e;
  --green-border: #2d4a60;
  --lavender: #8FAABE;
}

* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html { height:100%; overscroll-behavior: none; overflow-x: hidden; overflow-x: clip; }
body {
  background: var(--bg); color: var(--text);
  font-family: 'Plus Jakarta Sans', sans-serif;
  min-height: 100%; overscroll-behavior: none;
  touch-action: manipulation;
  overflow-x: hidden; overflow-x: clip;
  transition: background 0.2s, color 0.2s;
}

/* ── NAV ─────────────────────────────────────────────────────────────────── */
.topnav {
  background: color-mix(in srgb, var(--surface) 85%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 0.5px solid var(--border);
  padding: 0 20px; padding-top: var(--safe-top);
  height: calc(56px + var(--safe-top));
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 50;
}
.logo { font-size: 18px; font-weight: 800; letter-spacing: -0.03em; color: var(--text); display:flex; align-items:center; gap:0; }
.logo em { color: var(--accent); font-style: normal; }
.nav-right { display: flex; gap: 8px; align-items: center; }
.nav-pill {
  background: var(--accent); color: white; border: none;
  border-radius: 999px; padding: 9px 18px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px; font-weight: 800; cursor: pointer;
  letter-spacing: -0.1px;
  box-shadow: 0 4px 14px rgba(107, 79, 160, 0.28);
  transition: box-shadow 0.22s ease, transform 0.18s ease;
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 38px;
}
.nav-pill:hover { box-shadow: 0 6px 18px rgba(107, 79, 160, 0.36); }
.nav-pill:active { transform: scale(0.96); }

/* ── BOTTOM NAV ──────────────────────────────────────────────────────────── */
.bnav {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 680px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  border-top: 0.5px solid var(--border);
  padding: 9px 6px calc(10px + var(--safe-bottom));
  display: flex; justify-content: space-around; align-items: flex-end; z-index: 50;
  box-shadow: 0 -6px 24px rgba(42, 31, 61, 0.07);
}
.bnb {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: none; border: none; cursor: pointer; flex: 1; padding: 4px 4px 2px;
  position: relative;
  transition: transform 0.18s ease;
  min-height: 48px;
}
.bnb-icon {
  font-size: 19px; line-height: 1;
  color: var(--muted);
  opacity: 0.7;
  transition: opacity 0.22s ease, transform 0.22s ease, color 0.22s ease;
  display: inline-flex; align-items: center; justify-content: center;
}
.bnb-icon svg { display: block; }
.bnb-label {
  font-size: 10px; font-weight: 700; color: var(--muted);
  letter-spacing: 0.3px; transition: color 0.22s ease;
}
.bnb.active .bnb-icon { opacity: 1; color: var(--accent); transform: translateY(-1px); }
.bnb.active .bnb-label { color: var(--accent); font-weight: 800; }
.bnb.active::before {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 26px;
  height: 2px;
  border-radius: 99px;
  background: var(--accent);
  box-shadow: 0 1px 6px rgba(107, 79, 160, 0.35);
}
.bnb-fab {
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 82%, white) 0%, var(--accent) 60%, color-mix(in srgb, var(--accent) 88%, var(--text)) 100%);
  border-radius: 20px;
  padding: 12px 18px 10px;
  margin-top: -22px;
  box-shadow: 0 10px 26px rgba(107, 79, 160, 0.42), 0 0 0 4px var(--surface);
  min-height: 0;
  flex: 0 0 auto;
}
.bnb-fab .bnb-icon { color: white; font-size: 24px; opacity: 1; line-height: 1; font-weight: 300; }
.bnb-fab .bnb-label { color: rgba(255,255,255,0.92); font-size: 9px; }
.bnb-fab.active::before { display: none; }
.bnb-fab:active { transform: scale(0.94); }

/* ── LAYOUT ──────────────────────────────────────────────────────────────── */
.app { max-width: 680px; margin: 0 auto; padding: 20px 18px calc(90px + var(--safe-bottom)); }
.view { display: none; }
.view.active { display: block; }

/* ── TYPOGRAPHY ──────────────────────────────────────────────────────────── */
.page-title { font-size: 28px; font-weight: 700; letter-spacing: -0.8px; margin-bottom: 18px; line-height: 1.05; color: var(--text); }
.page-title em { color: var(--accent); font-family: 'Fraunces', 'Playfair Display', Georgia, serif; font-style: normal; font-weight: 900; font-size: 1em; letter-spacing: -1px; }
.section-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.8px; color: var(--muted); margin-bottom: 8px;
}

/* Editorial display utility — used for big elevated headings (greeting name, brand card name, big stat numbers) */
.display-serif {
  font-family: 'Caveat', cursive;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
}

/* Accent tagline — Plus Jakarta Sans light italic */
.accent-italic {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-style: italic;
  font-weight: 300;
  letter-spacing: 0.01em;
}

/* Refined section eyebrow — small caps + hairline ornament. Used in Tools / Money sub-pages */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 12px 2px;
}
.eyebrow::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 1px;
  background: var(--accent-mid);
}
.eyebrow-line {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.eyebrow-line::after {
  content: '';
  flex: 1;
  height: 0.5px;
  background: linear-gradient(to right, var(--border), transparent);
}

/* ── CARDS ───────────────────────────────────────────────────────────────── */
.card {
  background: var(--surface); border: 0.5px solid var(--border);
  border-radius: 16px; padding: 16px; margin-bottom: 10px;
  box-shadow: var(--shadow);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.card:last-child { margin-bottom: 0; }
.card[onclick]:hover, .card.interactive:hover { border-color: var(--accent-mid); box-shadow: 0 4px 18px rgba(107, 79, 160, 0.09); }
.card[onclick]:active, .card.interactive:active { transform: scale(0.985); }

/* ── GLOBAL TAP FEEDBACK ────────────────────────────────────────────────── */
button, [onclick], [role="button"] {
  -webkit-tap-highlight-color: transparent;
}
button:not(:disabled):active,
[onclick]:active,
[role="button"]:active { transform: scale(0.97); transition: transform 0.08s ease; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ── STATS HUD ───────────────────────────────────────────────────────────── */
.stats-hud {
  display: flex;
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 4px;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
}
.hud-stat {
  flex: 1;
  text-align: center;
  border-right: 1px solid var(--border);
}
.hud-stat:last-child { border-right: none; }
.hud-label {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-bottom: 3px;
}
.hud-value {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--text);
}
.hud-value.green { color: var(--green); }
.hud-value.red { color: #E07070; }
.stat-value.accent { color: var(--accent); }
.stat-value.green { color: var(--gold); }
.stat-value.red { color: #C0392B; }

/* ── PILLS / BADGES ──────────────────────────────────────────────────────── */
.pill {
  display: inline-flex; align-items: center; gap: 4px;
  border-radius: 20px; padding: 3px 9px;
  font-size: 11px; font-weight: 700; white-space: nowrap;
}
.pill::before { content:''; width:5px; height:5px; border-radius:50%; flex-shrink:0; }
.pill.todo     { background: var(--soft); color: var(--muted); }
.pill.todo::before { background: var(--muted); }
.pill.progress { background: var(--orange-bg); color: var(--orange); }
.pill.progress::before { background: var(--orange); }
.pill.review   { background: var(--blue-bg); color: var(--blue); }
.pill.review::before { background: var(--blue); }
.pill.done     { background: var(--green-bg); color: var(--green); }
.pill.done::before { background: var(--green); }
.pill.invoiced { background: var(--accent-light); color: var(--accent); }
.pill.invoiced::before { background: var(--accent); }
.pill.paid     { background: var(--green-bg); color: var(--green); border: 1px solid var(--green-border); }
.pill.paid::before { background: var(--green); }
.pill.sent     { background: var(--soft); color: var(--muted); }
.pill.sent::before { background: var(--muted); }
.pill.waiting  { background: var(--orange-bg); color: var(--orange); }
.pill.waiting::before { background: var(--orange); }
.pill.interested { background: var(--green-bg); color: var(--green); }
.pill.interested::before { background: var(--green); }
.pill.passed   { background: var(--red-bg); color: var(--red); }
.pill.passed::before { background: var(--red); }

/* ── DUE DATE ────────────────────────────────────────────────────────────── */
.due { font-size: 11px; font-weight: 700; border-radius: 6px; padding: 3px 8px; display: inline-block; }
.due.ok       { background: var(--green-bg); color: var(--green); }
.due.soon     { background: var(--orange-bg); color: var(--orange); }
.due.overdue  { background: var(--red-bg); color: var(--red); }

/* ── DEAL CARD ───────────────────────────────────────────────────────────── */
.deal-card {
  background: var(--surface); border: 0.5px solid var(--border);
  border-radius: 16px; padding: 16px; margin-bottom: 10px;
  box-shadow: var(--shadow); cursor: pointer; transition: transform 0.15s, box-shadow 0.15s;
}
.deal-card:active { transform: scale(0.99); }
.deal-card.retainer-paid-card { border-color: #22c55e; background: linear-gradient(135deg, var(--surface) 90%, rgba(34,197,94,0.08)); }
.deal-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 4px; }
.deal-client { font-size: 16px; font-weight: 800; color: var(--text); }
.deal-amount { font-size: 18px; font-weight: 800; color: var(--accent); }
.deal-deliverable { font-size: 13px; color: var(--muted); margin-bottom: 10px; line-height: 1.4; }
.deal-bottom { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.deal-actions { display: flex; gap: 6px; margin-left: auto; }
.btn-icon {
  background: none; border: 0.5px solid var(--border); border-radius: 7px;
  padding: 5px 9px; font-size: 13px; cursor: pointer;
  color: var(--muted); transition: all 0.15s;
}
.btn-invoice {
  background: var(--accent); border: none; border-radius: 7px;
  padding: 5px 11px; font-size: 11px; font-weight: 700; color: white; cursor: pointer;
  display: flex; align-items: center; gap: 4px;
}

/* ── BRIEF NOTES ─────────────────────────────────────────────────────────── */
.brief-box {
  background: var(--accent-light); border: 0.5px solid var(--accent-mid);
  border-radius: 10px; padding: 12px; margin: 10px 0;
}
.brief-box-title { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--accent); margin-bottom: 8px; }
.brief-line { font-size: 12px; color: var(--text); line-height: 1.8; }

/* ── CHECKLIST ───────────────────────────────────────────────────────────── */
.check-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 9px; margin-bottom: 5px;
  border: 0.5px solid var(--border); background: var(--surface);
  cursor: pointer; transition: all 0.15s;
}
.check-item.done-item { background: var(--green-bg); border-color: var(--green-border); }
.check-item .check-box { font-size: 16px; flex-shrink: 0; }
.check-item .check-label { font-size: 13px; font-weight: 600; color: var(--text); }
.check-item.done-item .check-label { color: var(--green); text-decoration: line-through; }

/* ── CALENDAR ────────────────────────────────────────────────────────────── */
.cal-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 2px; margin-bottom: 14px; }
.cal-day-header { font-size: 10px; text-align: center; color: var(--muted); font-weight: 700; padding: 4px 0; }
.cal-num { font-size: 12px; text-align: center; padding: 5px 2px; border-radius: 6px; cursor: default; color: var(--text); }
.cal-num.today { background: var(--accent); color: white; font-weight: 800; border-radius: 50%; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; margin: 0 auto; }
.cal-num.has-event { background: var(--accent-light); color: var(--accent); font-weight: 700; }
.cal-num.overdue-day { background: var(--red-bg); color: var(--red); font-weight: 700; }
.cal-event { border-left: 2.5px solid var(--accent); padding: 8px 10px; background: var(--accent-light); border-radius: 0 10px 10px 0; margin-bottom: 6px; }
.cal-event.ev-orange { border-left-color: var(--orange); background: var(--orange-bg); }
.cal-event.ev-green  { border-left-color: var(--green); background: var(--green-bg); }
.cal-event.ev-red    { border-left-color: var(--red); background: var(--red-bg); }
.cal-event-title { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 2px; }
.cal-event-sub { font-size: 11px; color: var(--muted); }

/* ── CONTACTS ────────────────────────────────────────────────────────────── */
.contact-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0; border-bottom: 0.5px solid var(--border);
}
.contact-row:last-child { border-bottom: none; }
.avatar {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; flex-shrink: 0;
  background: var(--accent-light); color: var(--accent);
}
.contact-name { font-size: 14px; font-weight: 700; color: var(--text); }
.contact-sub { font-size: 11px; color: var(--muted); margin-top: 1px; }
.rate-tag { font-size: 11px; font-weight: 700; background: var(--green-bg); color: var(--green); border-radius: 10px; padding: 2px 8px; margin-left: auto; flex-shrink: 0; }

/* ── BRAND CRM ──────────────────────────────────────────────────────────── */
.brand-health { font-size: 10px; font-weight: 800; letter-spacing: 0.5px; border-radius: 10px; padding: 3px 10px; text-transform: uppercase; display: inline-block; }
.brand-health.active { background: rgba(34,197,94,0.15); color: #22c55e; }
.brand-health.overdue { background: rgba(224,112,112,0.15); color: #E07070; }
.brand-health.warming { background: rgba(96,165,250,0.15); color: #60A5FA; }
.brand-health.cooling { background: rgba(201,169,110,0.15); color: #C9A96E; }
.brand-health.dormant { background: rgba(136,136,136,0.15); color: #888; }

.brand-stat {
  flex: 1; min-width: 0; background: var(--soft); border: 0.5px solid var(--border);
  border-radius: 12px; padding: 10px 8px; text-align: center;
}
.brand-stat-value { font-size: 16px; font-weight: 800; color: var(--text); }
.brand-stat-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); margin-top: 2px; }

.brand-timeline-item {
  padding: 10px 0 10px 14px; border-left: 2px solid var(--border);
  margin-left: 6px; position: relative; cursor: pointer;
}
.brand-timeline-item::before {
  content: ''; position: absolute; left: -5px; top: 14px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--surface);
}
.brand-timeline-item.pitch-item::before { background: #60A5FA; }

.brand-quick-action {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--soft); border: 0.5px solid var(--border);
  border-radius: 10px; padding: 8px 14px; font-size: 12px;
  font-weight: 700; color: var(--text); cursor: pointer;
  font-family: 'Plus Jakarta Sans', sans-serif; transition: border-color 0.15s;
}
.brand-quick-action:active { border-color: var(--accent); }

/* ── EMAIL TEMPLATE CHIPS ───────────────────────────────────────────────── */
.tpl-chip {
  background: var(--soft); color: var(--muted); border: 0.5px solid var(--border);
  border-radius: 20px; padding: 7px 14px; font-size: 12px; font-weight: 700;
  cursor: pointer; font-family: 'Plus Jakarta Sans', sans-serif; transition: all 0.15s;
}
.tpl-chip-active { background: var(--accent); color: white; border-color: var(--accent); }

/* ── RATE NEGOTIATION ───────────────────────────────────────────────────── */
.neg-rate-card {
  flex: 1; min-width: 80px; border-radius: 14px; padding: 14px 6px; text-align: center;
}
.neg-rate-card.neg-rate-floor { background: rgba(136,136,136,0.08); border: 1px solid rgba(136,136,136,0.2); }
.neg-rate-card.neg-rate-suggested { background: var(--accent-light); border: 1.5px solid var(--accent-mid); }
.neg-rate-card.neg-rate-stretch { background: rgba(34,197,94,0.08); border: 1px solid rgba(34,197,94,0.2); }
.neg-rate-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.neg-rate-card.neg-rate-floor .neg-rate-label { color: #888; }
.neg-rate-card.neg-rate-suggested .neg-rate-label { color: var(--accent); }
.neg-rate-card.neg-rate-stretch .neg-rate-label { color: #22c55e; }
.neg-rate-value { font-size: 20px; font-weight: 800; letter-spacing: -0.5px; }
.neg-rate-card.neg-rate-floor .neg-rate-value { color: #888; }
.neg-rate-card.neg-rate-suggested .neg-rate-value { color: var(--accent); }
.neg-rate-card.neg-rate-stretch .neg-rate-value { color: #22c55e; }
.neg-factor { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background: var(--soft); border-radius: 10px; margin-bottom: 4px; font-size: 12px; }
.neg-factor-label { color: var(--muted); font-weight: 600; }
.neg-factor-value { font-weight: 800; }
.neg-tip { background: var(--soft); border-left: 3px solid var(--accent); border-radius: 0 10px 10px 0; padding: 10px 14px; margin-bottom: 8px; font-size: 13px; color: var(--text); line-height: 1.5; }

/* ── INPUTS / FORMS ──────────────────────────────────────────────────────── */
.field { margin-bottom: 12px; }
.field label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); margin-bottom: 5px; }
.field input, .field select, .field textarea {
  width: 100%; background: var(--soft); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px 14px; min-height: 48px;
  color: var(--text);
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 15px; font-weight: 500;
  outline: none; resize: none;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
  -webkit-appearance: none; appearance: none;
}
.field textarea { min-height: 80px; padding-top: 12px; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--accent); background: var(--surface);
  box-shadow: 0 0 0 4px var(--accent-light);
}
.field input::placeholder, .field textarea::placeholder { color: var(--muted); }

.btn-primary {
  background: var(--accent); border: none; border-radius: 14px;
  padding: 15px 18px; min-height: 52px;
  color: white; font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 15px; font-weight: 800; letter-spacing: -0.1px;
  cursor: pointer; width: 100%;
  box-shadow: 0 4px 18px rgba(107, 79, 160, 0.22);
  transition: opacity 0.15s ease, transform 0.12s ease, box-shadow 0.18s ease;
}
.btn-primary:hover { box-shadow: 0 6px 24px rgba(107, 79, 160, 0.30); }
.btn-primary:active { opacity: 0.92; transform: scale(0.985); }
.btn-secondary {
  background: none; border: 0.5px solid var(--border); border-radius: 12px;
  padding: 13px; color: var(--muted); font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px; font-weight: 600; cursor: pointer; width: 100%;
}

.upload-zone {
  border: 1.5px dashed var(--accent-mid); border-radius: 14px;
  padding: 28px 20px; text-align: center; cursor: pointer;
  background: var(--accent-light); position: relative; transition: all 0.2s;
}
.upload-zone:active { opacity: 0.85; }
.upload-zone input[type=file] { position: absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%; }

/* ── MODAL / SHEET ───────────────────────────────────────────────────────── */
.overlay {
  position: fixed; inset: 0; background: rgba(42, 31, 61, 0.55);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  display: none;
  align-items: flex-end; justify-content: center; z-index: 200;
  opacity: 0; transition: opacity 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}
.overlay.open { display: flex; opacity: 1; }
@media (min-width: 640px) { .overlay { align-items: center; padding: 20px; } }

.sheet {
  background: var(--surface); border-radius: 28px 28px 0 0;
  padding: 22px 22px calc(24px + var(--safe-bottom));
  width: 100%; max-width: 640px; max-height: 92vh; overflow-y: auto;
  animation: sheetUp 0.38s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 -12px 48px rgba(42, 31, 61, 0.22);
  -webkit-overflow-scrolling: touch;
}
@media (min-width: 640px) { .sheet { border-radius: 28px; padding-bottom: 28px; animation: popIn 0.28s cubic-bezier(0.22, 1, 0.36, 1); } }
@keyframes sheetUp { from { transform: translateY(102%); opacity: 0.4; } to { transform: translateY(0); opacity: 1; } }
@keyframes popIn { from { opacity:0; transform:scale(0.96) translateY(10px); } to { opacity:1; transform:none; } }

.sheet-handle {
  width: 44px; height: 5px; background: var(--border);
  border-radius: 999px; margin: 0 auto 18px;
  transition: background 0.18s ease;
}
.sheet:hover .sheet-handle { background: var(--accent-mid); }
@media (min-width: 640px) { .sheet-handle { display: none; } }

.sheet-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.sheet-title { font-size: 20px; font-weight: 800; }
.sheet-close {
  background: var(--soft); border: none; border-radius: 8px;
  width: 30px; height: 30px; font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: var(--muted);
}

/* ── QUICK ADD SHEET ─────────────────────────────────────────────────────── */
.qa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.qa-btn {
  border: 0.5px solid var(--border); border-radius: 14px;
  padding: 16px 12px; text-align: center; background: var(--soft); cursor: pointer;
  transition: all 0.15s;
}
.qa-btn.primary { background: var(--accent-light); border-color: var(--accent-mid); }
.qa-btn:active { transform: scale(0.97); }
.qa-icon { font-size: 24px; display: block; margin-bottom: 6px; }
.qa-label { font-size: 13px; font-weight: 700; color: var(--text); display: block; }
.qa-desc { font-size: 11px; color: var(--muted); display: block; margin-top: 2px; }

/* ── RATE CALCULATOR ─────────────────────────────────────────────────────── */
.rate-result {
  background: var(--accent-light); border: 1.5px solid var(--accent-mid);
  border-radius: 14px; padding: 18px; text-align: center; margin-top: 16px;
}
.rate-result-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--accent); margin-bottom: 4px; }
.rate-result-value { font-size: 40px; font-weight: 800; color: var(--accent); letter-spacing: -1px; }
.rate-result-sub { font-size: 12px; color: var(--muted); margin-top: 4px; }

/* ── TAX SUMMARY ─────────────────────────────────────────────────────────── */
.tax-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 0.5px solid var(--border); font-size: 13px; }
.tax-row:last-child { border-bottom: none; }
.tax-label { color: var(--muted); font-weight: 500; }
.tax-value { font-weight: 700; color: var(--text); }
.tax-value.red { color: var(--red); }
.tax-total { display: flex; justify-content: space-between; padding: 12px; background: var(--red-bg); border-radius: 10px; margin-top: 8px; }
.tax-total-label { font-size: 13px; font-weight: 800; color: var(--red); }
.tax-total-value { font-size: 15px; font-weight: 800; color: var(--red); }

/* ── INVOICE PREVIEW ─────────────────────────────────────────────────────── */
.inv-preview { background: white; border-radius: 12px; border: 0.5px solid #e0e0e0; padding: 24px; margin-bottom: 14px; color: #1a1a1a; }
.inv-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; }
.inv-brand { font-size: 18px; font-weight: 800; color: #1a1a1a; }
.inv-brand-sub { font-size: 11px; color: #888; margin-top: 2px; }
.inv-title { font-size: 28px; font-weight: 800; letter-spacing: 3px; color: #1a1a1a; }
.inv-rule { height: 2px; background: #1a1a1a; margin: 14px 0; }
.inv-rule-light { height: 0.5px; background: #e0e0e0; margin: 10px 0; }
.inv-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.inv-meta-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: #888; margin-bottom: 3px; }
.inv-meta-value { font-size: 13px; font-weight: 600; color: #1a1a1a; }
.inv-table { width: 100%; border-collapse: collapse; margin: 10px 0; }
.inv-table th { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: #888; padding: 6px 0; border-bottom: 1.5px solid #1a1a1a; text-align: left; }
.inv-table th:last-child, .inv-table td:last-child { text-align: right; }
.inv-table td { font-size: 12px; padding: 10px 0; border-bottom: 0.5px solid #e0e0e0; vertical-align: top; }
.inv-totals { text-align: right; margin-top: 8px; }
.inv-total-line { display: flex; justify-content: flex-end; gap: 40px; padding: 3px 0; font-size: 12px; color: #888; }
.inv-total-final { display: flex; justify-content: flex-end; gap: 40px; padding: 10px 0 0; font-size: 16px; font-weight: 800; color: #1a1a1a; border-top: 2px solid #1a1a1a; margin-top: 4px; }
.inv-pay-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.inv-pay-box { background: #f9f9f9; border: 0.5px solid #e0e0e0; border-radius: 8px; padding: 10px; }
.inv-pay-method { font-size: 11px; font-weight: 800; color: #1a1a1a; margin-bottom: 3px; }
.inv-pay-detail { font-size: 10px; color: #888; }
.inv-footer { text-align: center; margin-top: 14px; font-size: 10px; color: #aaa; }

/* ── SETTINGS ────────────────────────────────────────────────────────────── */
.settings-section { background: var(--surface); border: 0.5px solid var(--border); border-radius: 16px; padding: 16px; margin-bottom: 14px; }
.settings-section h3 { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--muted); margin-bottom: 14px; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 4px 0; }
.toggle-row-info h4 { font-size: 14px; font-weight: 700; color: var(--text); }
.toggle-row-info p { font-size: 12px; color: var(--muted); }
.toggle { width: 44px; height: 24px; border-radius: 12px; background: var(--soft); border: 0.5px solid var(--border); cursor: pointer; position: relative; transition: background 0.2s; flex-shrink: 0; }
.toggle.on { background: var(--accent); border-color: var(--accent); }
.toggle-knob { width: 18px; height: 18px; background: white; border-radius: 50%; position: absolute; top: 3px; left: 3px; transition: left 0.2s; box-shadow: 0 1px 4px rgba(0,0,0,0.2); }
.toggle.on .toggle-knob { left: 23px; }

.export-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.export-btn {
  background: var(--accent-light); border: 0.5px solid var(--accent-mid);
  border-radius: 10px; padding: 12px; text-align: center; cursor: pointer;
  transition: opacity 0.15s;
}
.export-btn:active { opacity: 0.8; }
.export-btn-label { font-size: 12px; font-weight: 700; color: var(--accent); display: block; margin-bottom: 2px; }
.export-btn-type { font-size: 10px; color: var(--muted); }

/* ── AI SCAN ─────────────────────────────────────────────────────────────── */
.spinner { width: 36px; height: 36px; border: 3px solid var(--accent-mid); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; margin: 0 auto 12px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── EMPTY STATE ─────────────────────────────────────────────────────────── */
.empty { text-align: center; padding: 28px 18px; }
.empty-icon { font-size: 32px; margin-bottom: 8px; display: block; }
.empty-title { font-size: 14px; font-weight: 800; color: var(--text); margin-bottom: 4px; letter-spacing: -0.2px; }
.empty-sub { font-size: 12px; color: var(--muted); margin-bottom: 12px; line-height: 1.4; }

/* Inviting, tappable empty states — "feel like an invitation, not a dead end" */
.empty-invite {
  background: linear-gradient(135deg, var(--accent-light) 0%, var(--surface) 100%);
  border: 1.5px dashed var(--accent-mid);
  border-radius: 16px;
  padding: 22px 18px;
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.empty-invite:hover { border-color: var(--accent); box-shadow: 0 6px 22px rgba(107, 79, 160, 0.10); }
.empty-cta {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--accent); color: #fff;
  border: none; border-radius: 999px;
  padding: 9px 18px;
  min-height: 36px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12px; font-weight: 800;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(107, 79, 160, 0.20);
  transition: transform 0.12s ease, box-shadow 0.18s ease;
}
.empty-cta:hover { box-shadow: 0 6px 20px rgba(107, 79, 160, 0.32); }

/* ── SECTION HEADER ─────────────────────────────────────────────────────── */
/* Header row that pairs a section title with its primary action — keeps every CTA visible */
.section-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 0;
  padding-bottom: 4px;
}
.section-head-title {
  font-size: 16px; font-weight: 800; color: var(--text);
  letter-spacing: -0.3px;
}
.section-head-actions { display: flex; align-items: center; gap: 8px; }
.section-cta {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--accent); color: #fff;
  border: none; border-radius: 999px;
  padding: 8px 14px;
  min-height: 36px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12px; font-weight: 800;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(107, 79, 160, 0.22);
  transition: transform 0.12s ease, box-shadow 0.18s ease, background 0.18s ease;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.section-cta:hover { box-shadow: 0 5px 18px rgba(107, 79, 160, 0.32); }
.section-cta:active { transform: scale(0.96); }
.section-cta .plus { font-size: 14px; line-height: 1; font-weight: 700; }
.section-link {
  font-size: 11px; font-weight: 700; color: var(--accent);
  cursor: pointer; padding: 6px 4px;
}

/* ── MONEY SUB-TABS ─────────────────────────────────────────────────────── */
/* Refined segmented control for the Money page tabs */
.money-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 18px;
  padding: 5px;
  background: var(--soft);
  border: 0.5px solid var(--border);
  border-radius: 14px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  box-shadow: inset 0 1px 2px rgba(42, 31, 61, 0.04);
}
.money-tabs::-webkit-scrollbar { display: none; }
.money-tab {
  flex: 1 1 auto;
  background: transparent;
  color: var(--muted);
  border: none;
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  transition: background 0.22s ease, color 0.22s ease, box-shadow 0.22s ease, transform 0.18s ease;
}
.money-tab:hover { color: var(--text); }
.money-tab.active {
  background: var(--accent);
  color: #fff;
  font-weight: 800;
  box-shadow: 0 4px 14px rgba(107, 79, 160, 0.32);
}
.money-tab.active:hover { color: #fff; }

/* Money page action row — primary "New Deal" + secondary actions, no awkward wrap */
.money-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0 0 18px;
}
.money-actions .ma-primary {
  grid-column: 1 / -1;
  background: var(--accent);
  border: none;
  border-radius: 14px;
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  min-height: 52px;
  font-family: inherit;
  box-shadow: 0 6px 20px rgba(107, 79, 160, 0.28);
  transition: box-shadow 0.22s ease, transform 0.18s ease;
}
.money-actions .ma-primary:hover { box-shadow: 0 8px 24px rgba(107, 79, 160, 0.36); }
.money-actions .ma-primary:active { transform: scale(0.98); }
.money-actions .ma-primary .ma-spark { font-size: 16px; line-height: 1; }
.money-actions .ma-secondary {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  justify-content: center;
  min-height: 46px;
  font-family: inherit;
  transition: border-color 0.22s ease, background 0.22s ease, transform 0.18s ease;
}
.money-actions .ma-secondary:hover { border-color: var(--accent-mid); background: var(--accent-light); }
.money-actions .ma-secondary:active { transform: scale(0.97); }
.money-actions .ma-scan {
  background: linear-gradient(150deg, color-mix(in srgb, var(--brand) 35%, #0a0a14), color-mix(in srgb, var(--brand) 60%, #0a0a14) 55%, var(--brand));
  border: none;
  color: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
.money-actions .ma-scan:hover { background: linear-gradient(150deg, color-mix(in srgb, var(--brand) 35%, #0a0a14), color-mix(in srgb, var(--brand) 70%, #0a0a14) 55%, var(--brand)); }

/* ── MONEY SUB-PANES (Streams / Invoices / Tax / Analytics) ─────────────── */
/* Wraps the DOM-transplanted Hub sections so they feel native inside Money */
.money-pane {
  margin: 0;
  padding: 0;
  animation: fadeInPane 0.24s ease;
}
@keyframes fadeInPane {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
/* Hide any nested back-to-hub buttons + duplicated page titles from the
   transplanted Hub section — the segmented control already shows the
   active tab, so the inner heading is redundant. */
.money-pane > div[id^="hub"] > .page-title,
.money-pane > div[id^="moneyTab"] > .page-title,
.money-pane .page-title { display: none !important; }
.money-pane button[data-back-to-hub="1"],
.money-pane .pane-back-to-hub { display: none !important; }
/* Pane header — eyebrow + primary action row */
.pane-eyebrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 14px;
}
.pane-eyebrow-label {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--muted);
  line-height: 1.3;
}
.pane-eyebrow-label em {
  color: var(--accent);
  font-style: normal;
  font-weight: 800;
}
.pane-eyebrow-cta {
  flex-shrink: 0;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 11px;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 14px rgba(107, 79, 160, 0.28);
  transition: box-shadow 0.18s ease, transform 0.16s ease;
}
.pane-eyebrow-cta:hover { box-shadow: 0 6px 18px rgba(107, 79, 160, 0.36); }
.pane-eyebrow-cta:active { transform: scale(0.97); }
.pane-eyebrow-cta.is-secondary {
  background: var(--surface);
  color: var(--accent);
  border: 1px solid var(--accent-mid);
  box-shadow: none;
}
.pane-eyebrow-cta.is-secondary:hover { background: var(--accent-light); }

/* ── SETTINGS GROUPS (collapsible accordion) ────────────────────────────── */
.settings-group {
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: 16px;
  margin-bottom: 12px;
  overflow: hidden;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.settings-group[open] {
  border-color: var(--accent-mid);
  box-shadow: 0 4px 16px rgba(107, 79, 160, 0.06);
}
.settings-group > summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.settings-group > summary::-webkit-details-marker { display: none; }
.settings-group > summary::marker { content: ''; }
.settings-group-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: var(--accent-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.settings-group-text {
  flex: 1;
  min-width: 0;
}
.settings-group-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.1px;
  line-height: 1.2;
}
.settings-group-sub {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
  line-height: 1.3;
}
.settings-group-chevron {
  flex-shrink: 0;
  font-size: 16px;
  color: var(--muted);
  transition: transform 0.22s ease;
}
.settings-group[open] > summary .settings-group-chevron {
  transform: rotate(90deg);
  color: var(--accent);
}
.settings-group-body {
  padding: 0 14px 14px;
}
/* When inside a group, drop the heavy outer card style on each section
   so we don't get nested borders */
.settings-group .settings-section {
  background: var(--accent-light);
  border: 0.5px solid var(--accent-mid);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 10px;
}
.settings-group .settings-section:last-child { margin-bottom: 0; }

/* Niche shortcut card inside Settings */
.settings-niche-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(135deg, var(--accent-light) 0%, var(--surface) 100%);
  border: 1px solid var(--accent-mid);
  border-radius: 14px;
  padding: 16px 18px;
  cursor: pointer;
  margin-bottom: 10px;
  transition: transform 0.16s ease, box-shadow 0.18s ease;
}
.settings-niche-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(107, 79, 160, 0.12);
}
.settings-niche-card:active { transform: scale(0.99); }
.settings-niche-icon {
  flex-shrink: 0;
  font-size: 26px;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--accent-mid);
}
.settings-niche-text { flex: 1; min-width: 0; }
.settings-niche-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.2;
}
.settings-niche-sub {
  font-size: 11px;
  color: var(--muted);
  margin-top: 3px;
  line-height: 1.4;
}
.settings-niche-arrow { color: var(--accent); font-size: 18px; flex-shrink: 0; font-weight: 800; }

/* Small "↗" pip on hub cards that open overlays instead of sub-pages */
.hub-overlay-pip {
  position: absolute;
  top: 4px;
  left: 4px;
  font-size: 10px;
  font-weight: 800;
  color: var(--muted);
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: 6px;
  padding: 1px 5px;
  line-height: 1.2;
}

/* Brain dump quick-action buttons — emoji + verb label, always visible */
.dump-quick {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: var(--soft); border: 0.5px solid var(--border);
  border-radius: 10px;
  padding: 8px 4px 7px;
  font-family: inherit; cursor: pointer;
  transition: transform 0.12s ease, border-color 0.18s ease, background 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}
.dump-quick:hover { border-color: var(--accent-mid); background: var(--accent-light); }
.dump-quick:active { transform: scale(0.96); }
.dump-quick .dq-icon { font-size: 16px; line-height: 1; }
.dump-quick .dq-label {
  font-size: 9px; font-weight: 800; color: var(--accent);
  text-transform: uppercase; letter-spacing: 0.3px;
}

/* ── SEARCH ──────────────────────────────────────────────────────────────── */
.search-bar { position: relative; margin-bottom: 14px; }
.search-bar input {
  width: 100%;
  box-sizing: border-box;
  padding: 13px 52px 13px 42px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  outline: none;
  box-shadow: 0 1px 2px rgba(60, 40, 100, 0.04);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  -webkit-appearance: none;
}
.search-bar input::placeholder {
  color: var(--muted);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-style: normal;
  font-size: 13px;
  font-weight: 600;
}
.search-bar input:hover { border-color: var(--accent-mid); }
.search-bar input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-light), 0 2px 12px rgba(107, 79, 160, 0.12);
}
.search-bar:focus-within .search-icon { color: var(--accent); transform: translateY(-50%) scale(1.08); }
.search-icon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  font-size: 15px; color: var(--muted); pointer-events: none;
  transition: color 0.18s ease, transform 0.18s ease;
}
.search-bar::after {
  content: '⌘K';
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 9px; font-weight: 800; letter-spacing: 0.06em;
  color: var(--muted); background: var(--soft);
  border: 0.5px solid var(--border); border-radius: 6px;
  padding: 3px 6px; pointer-events: none; opacity: 0.7;
  transition: opacity 0.18s ease;
}
.search-bar:focus-within::after { opacity: 0; }

/* ── FILTERS ─────────────────────────────────────────────────────────────── */
.filter-row { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 14px; scrollbar-width: none; }
.filter-row::-webkit-scrollbar { display: none; }
.filter-chip {
  background: var(--surface); border: 0.5px solid var(--border);
  border-radius: 20px; padding: 6px 14px;
  font-size: 12px; font-weight: 700; color: var(--muted);
  cursor: pointer; white-space: nowrap; flex-shrink: 0;
}
.filter-chip.active { background: var(--accent); border-color: var(--accent); color: white; }

/* ── TOAST ───────────────────────────────────────────────────────────────── */
.toast {
  position: fixed; bottom: calc(80px + var(--safe-bottom)); left: 50%;
  transform: translateX(-50%) translateY(16px);
  background: var(--text); color: var(--bg);
  border-radius: 20px; padding: 10px 20px; font-size: 13px; font-weight: 600;
  opacity: 0; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); z-index: 300; white-space: nowrap;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── INSTALL BANNER ──────────────────────────────────────────────────────── */
.install-banner {
  display: none; position: fixed; bottom: calc(72px + var(--safe-bottom));
  left: 16px; right: 16px; background: var(--text); color: var(--bg);
  border-radius: 16px; padding: 14px 16px; z-index: 400;
  align-items: center; gap: 12px; box-shadow: var(--shadow);
  animation: sheetUp 0.3s ease;
}
.install-banner.show { display: flex; }
.install-text { flex: 1; }
.install-text strong { display: block; font-size: 14px; margin-bottom: 2px; }
.install-text span { font-size: 12px; opacity: 0.7; }
.btn-install { background: var(--accent); border: none; border-radius: 8px; padding: 8px 14px; color: white; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 13px; font-weight: 700; cursor: pointer; flex-shrink: 0; }
.btn-dismiss { background: none; border: none; font-size: 18px; cursor: pointer; color: var(--muted); flex-shrink: 0; }

/* ── IOS INSTRUCTIONS ────────────────────────────────────────────────────── */
.ios-hint {
  display: none; position: fixed; bottom: calc(72px + var(--safe-bottom));
  left: 16px; right: 16px; background: var(--text); color: var(--bg);
  border-radius: 16px; padding: 16px; z-index: 400;
}
.ios-hint.show { display: block; }
.ios-hint h3 { font-size: 14px; font-weight: 800; margin-bottom: 10px; }
.ios-hint ol { padding-left: 18px; }
.ios-hint li { font-size: 13px; opacity: 0.8; margin-bottom: 5px; line-height: 1.4; }
.ios-hint li strong { opacity: 1; }
.ios-hint button { margin-top: 12px; background: rgba(255,255,255,0.15); border: none; border-radius: 8px; padding: 8px 16px; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 13px; font-weight: 600; color: white; cursor: pointer; width: 100%; }

/* ── ACCESS CODE GATE ────────────────────────────────────────────────────── */
#accessGate {
  position: fixed; inset: 0; background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  z-index: 600; padding: 24px;
}
.access-card {
  background: var(--surface); border: 0.5px solid var(--border);
  border-radius: 24px; padding: 36px 28px; max-width: 380px; width: 100%;
  box-shadow: var(--shadow); text-align: center;
}
.access-star { font-size: 36px; margin-bottom: 12px; display: block; }
.access-title { font-size: 24px; font-weight: 800; letter-spacing: -0.5px; margin-bottom: 6px; }
.access-title em { color: var(--accent); font-style: normal; }
.access-sub { font-size: 13px; color: var(--muted); margin-bottom: 24px; line-height: 1.5; }
.access-input {
  width: 100%; background: var(--soft); border: 1.5px solid var(--border);
  border-radius: 12px; padding: 14px 16px; color: var(--text);
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 16px; font-weight: 700;
  text-align: center; letter-spacing: 2px; outline: none;
  text-transform: uppercase; margin-bottom: 12px;
  transition: border-color 0.2s;
}
.access-input:focus { border-color: var(--accent); background: var(--surface); }
.access-input.error { border-color: var(--red); background: var(--red-bg); }
.access-error { font-size: 12px; color: var(--red); font-weight: 600; margin-bottom: 12px; display: none; }
.access-error.show { display: block; }
.access-by { font-size: 11px; color: var(--muted); margin-top: 16px; font-style: italic; }

/* ── OAUTH LOADING OVERLAY ──────────────────────────────────────────────── */
.lcc-word {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.5px;
  opacity: 0;
  transform: translateY(16px);
  animation: lccReveal 0.5s ease-out forwards;
  line-height: 1.6;
  transition: opacity 0.4s ease;
}
#lccWord1 { color: #f59e0b; }
#lccWord2 { color: var(--text); }
@keyframes lccReveal {
  0% { opacity: 0; transform: translateY(16px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes lccStarPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.15); }
}

/* ── ONBOARDING ──────────────────────────────────────────────────────────── */
#onboardingOverlay {
  position: fixed; inset: 0; background: var(--bg);
  display: none; align-items: center; justify-content: center;
  z-index: 800; padding: 24px;
}
.onboard-card {
  background: var(--surface); border: 0.5px solid var(--border);
  border-radius: 24px; padding: 32px 28px; max-width: 400px; width: 100%;
  box-shadow: var(--shadow); max-height: 90vh; overflow-y: auto;
}
.onboard-star { font-size: 40px; margin-bottom: 12px; display: block; text-align: center; }
.onboard-title { font-size: 26px; font-weight: 800; letter-spacing: -0.5px; text-align: center; margin-bottom: 6px; }
.onboard-title em { color: var(--accent); font-style: normal; }
.onboard-by { font-size: 12px; color: var(--muted); text-align: center; margin-bottom: 24px; font-style: italic; }
.onboard-notice { background: var(--soft); border: 0.5px solid var(--border); border-radius: 14px; padding: 16px; margin-bottom: 20px; }
.onboard-notice-title { font-size: 12px; font-weight: 700; color: var(--text); margin-bottom: 10px; }
.onboard-notice-item { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 10px; font-size: 12px; color: var(--muted); line-height: 1.5; }
.onboard-notice-item:last-child { margin-bottom: 0; }
.onboard-notice-item span:first-child { flex-shrink: 0; }
.onboard-export-tip { background: var(--accent-light); border: 0.5px solid var(--accent-mid); border-radius: 10px; padding: 10px 12px; font-size: 11px; color: var(--accent); font-weight: 600; text-align: center; margin-bottom: 20px; }
.ob-stripe-callout { background: var(--accent-light); border: 1px solid var(--accent-mid); border-radius: 14px; padding: 14px 16px; margin-bottom: 20px; }
.ob-stripe-callout-title { font-size: 13px; font-weight: 800; color: var(--accent); margin-bottom: 6px; }
.ob-stripe-callout-body { font-size: 12px; color: var(--accent); line-height: 1.6; opacity: 0.9; }
.ob-stripe-callout-body strong { font-weight: 800; }
.ob-cta-card { display: flex; align-items: center; gap: 12px; background: var(--soft); border: 0.5px solid var(--border); border-radius: 14px; padding: 12px 14px; cursor: pointer; text-align: left; width: 100%; font-family: inherit; color: var(--text); transition: background 150ms ease, border-color 150ms ease; }
.ob-cta-card:active, .ob-cta-card:hover { background: var(--accent-light); border-color: var(--accent-mid); }
.ob-cta-card > span:first-child { font-size: 20px; flex-shrink: 0; }
.ob-cta-card > div { flex: 1; }
.ob-cta-card > div > div:first-child { font-size: 13px; font-weight: 700; }
.ob-cta-card > div > div:last-child { font-size: 11px; color: var(--muted); margin-top: 2px; }

@media (max-width: 400px) { .onboard-card { padding: 24px 20px; } }

/* ── HOME HEADER ─────────────────────────────────────────────────────────── */
.home-header {
  margin: 0 0 12px 0;
  padding: 16px 18px 18px;
  background: var(--accent-light);
  position: relative; overflow: hidden; border-radius: 20px;
}

/* ── ON DECK CARDS ───────────────────────────────────────────────────────── */
.on-deck-card {
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: 14px;
  padding: 10px 13px;
  margin-bottom: 7px;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: transform 0.15s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.on-deck-card * { pointer-events: none; }
.on-deck-card:active { transform: scale(0.99); }
.on-deck-brand { font-size: 15px; font-weight: 800; color: var(--text); letter-spacing: -0.3px; line-height: 1.2; }
.on-deck-deliverable { font-size: 11px; color: var(--muted); margin-top: 1px; }
.on-deck-rate { font-size: 16px; font-weight: 800; color: var(--accent); }
.on-deck-due { font-size: 10px; font-weight: 700; margin-top: 1px; }
.on-deck-progress { font-size: 9px; letter-spacing: 0.3px; margin-top: 7px; padding-top: 6px; border-top: 1px solid var(--border); display: flex; gap: 6px; align-items: center; overflow-x: auto; scrollbar-width: none; }

/* ── (legacy retainer strip — removed, retainers now in On Deck) ─────── */

/* ── ONBOARD STRIP ────────────────────────────────────────────────────────── */
.ob-strip { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 16px; scrollbar-width: none; }
.ob-strip::-webkit-scrollbar { display: none; }
.ob-step {
  flex-shrink: 0; display: flex; flex-direction: column; align-items: center;
  gap: 6px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 12px 10px; min-width: 88px;
  cursor: pointer; transition: all 0.15s; text-align: center;
}
.ob-step.done { background: var(--accent-light); border-color: var(--accent-mid); }
.ob-step-num {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--accent-light); color: var(--accent);
  font-size: 12px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ob-step.done .ob-step-num { background: var(--accent); color: var(--bg); }
.ob-step-label { font-size: 11px; font-weight: 700; color: var(--text); line-height: 1.3; }
.ob-step.done .ob-step-label { color: var(--accent); }

/* ── IDEA DUMP ────────────────────────────────────────────────────────────── */
.idea-card {
  background: var(--surface); border: 0.5px solid var(--border); border-radius: 12px;
  padding: 10px 12px; margin-bottom: 8px;
}
.idea-tag {
  display: inline-block; font-size: 9px; font-weight: 700; border-radius: 20px;
  padding: 2px 7px; letter-spacing: 0.3px;
}
.idea-tag-hook     { background: rgba(251,113,133,0.15); color: #e11d48; }
.idea-tag-tiktok   { background: rgba(45,212,191,0.15);  color: #0d9488; }
.idea-tag-carousel { background: rgba(251,191,36,0.15);  color: #b45309; }
.idea-tag-content  { background: rgba(107,79,160,0.12);  color: var(--accent); }
.idea-tag-brand    { background: rgba(96,165,250,0.15);  color: #2563eb; }
.idea-tag-pitch    { background: rgba(52,211,153,0.15);  color: #059669; }
.idea-tag-rate     { background: rgba(201,169,110,0.15); color: #C9A96E; }
.idea-tag-random   { background: var(--soft); color: var(--muted); }

/* ── CATEGORY CHIP PICKER ─────────────────────────────────────────────────── */
.idea-cat-chip {
  flex-shrink: 0;
  background: var(--soft);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 5px 12px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.idea-cat-chip.selected {
  background: var(--accent-light);
  border-color: var(--accent-mid);
  color: var(--accent);
  font-weight: 700;
}

/* ── INBOX MANAGER ───────────────────────────────────────────────────────── */
.inbox-card {
  background: var(--surface); border: 0.5px solid var(--border); border-radius: 14px;
  padding: 14px 16px; margin-bottom: 10px; cursor: pointer;
  transition: border-color 0.15s;
}
.inbox-card:active { border-color: var(--accent-mid); }
.triage-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 700; border-radius: 20px;
  padding: 2px 8px; text-transform: uppercase; letter-spacing: 0.5px;
}
.triage-promising { background: rgba(52,211,153,0.15); color: #059669; }
.triage-maybe { background: rgba(234,179,8,0.15); color: #ca8a04; }
.triage-pass { background: rgba(248,113,113,0.15); color: #dc2626; }
.worth-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 800; border-radius: 20px;
  padding: 3px 10px; letter-spacing: 0.3px;
}
.worth-yes { background: rgba(52,211,153,0.18); color: #059669; }
.worth-neg { background: rgba(234,179,8,0.18); color: #ca8a04; }
.worth-no  { background: rgba(248,113,113,0.18); color: #dc2626; }
.inbox-brand { font-size: 13px; font-weight: 700; color: var(--text); }
.inbox-subject { font-size: 12px; color: var(--text); margin: 4px 0; line-height: 1.4; }
.inbox-summary { font-size: 11px; color: var(--muted); line-height: 1.5; font-style: italic; }

/* ── (legacy retainer strip v2 — removed) ──────────────────────────────── */

/* ── INVOICE SEND FLOW ─────────────────────────────────────────────────── */
.btn-send-invoice { background:#22c55e !important; border-color:#22c55e !important; color:white !important; }
.btn-send-invoice:active { background:#16a34a !important; }

.inv-status { display:inline-block; font-size:10px; font-weight:700; padding:3px 8px; border-radius:6px; text-transform:uppercase; letter-spacing:0.5px; }
.inv-status.sent { background:#e0e7ff; color:#4f46e5; }
.inv-status.viewed { background:#fef3c7; color:#d97706; }
.inv-status.payment-pending { background:#dcfce7; color:#16a34a; }
.inv-status.paid { background:rgba(34,197,94,0.13); color:#22c55e; }

.inv-history-card { background:var(--surface); border:0.5px solid var(--border); border-radius:14px; padding:14px; margin-bottom:8px; }

@keyframes chaChing { 0%,100%{transform:none;} 25%{transform:scale(1.1) rotate(-2deg);} 75%{transform:scale(1.1) rotate(2deg);} }
.cha-ching { animation: chaChing 0.4s ease; }

/* ── CONFETTI ───────────────────────────────────────────────────────────── */
@keyframes confettiFall {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

/* ── DASHBOARD FILL-VIEWPORT FOR TALL SCREENS ────────────────────────── */
/* When the browser is taller than the dashboard would naturally need, the
   today's-flo + on-deck columns grow to fill the available space so the
   page doesn't have empty real estate at the bottom. */
@media (min-width: 700px) and (min-height: 800px) {
  #viewHome.active { display: flex; flex-direction: column; min-height: calc(100vh - 160px); }
  #viewHome .dash-grid { flex: 1 1 auto; min-height: 0; }
  #viewHome .dash-col-left, #viewHome .dash-col-right { display: flex; flex-direction: column; height: 100%; }
  #viewHome .dash-col-left > .dash-flo-card { flex: 1 1 auto; }
  #viewHome .dash-col-right > .dash-deals-card { flex: 1 1 auto; display: flex; flex-direction: column; }
  #viewHome .dash-col-right > .dash-deals-card > #homeDueList { flex: 1 1 auto; }
}

/* ── DASHBOARD AUTO-SCALE FOR SHORT VIEWPORTS ────────────────────────── */
/* When the browser window is shorter than the dashboard would naturally
   render at, zoom the whole .app container down proportionally so the
   page never has to scroll. Only kicks in at desktop/tablet widths —
   on mobile the layout already stacks naturally. */
@media (min-width: 700px) and (max-height: 880px) { .app { zoom: 0.96; } }
@media (min-width: 700px) and (max-height: 820px) { .app { zoom: 0.92; } }
@media (min-width: 700px) and (max-height: 760px) { .app { zoom: 0.88; } }
@media (min-width: 700px) and (max-height: 700px) { .app { zoom: 0.83; } }
@media (min-width: 700px) and (max-height: 640px) { .app { zoom: 0.78; } }

/* ── TIER BADGE (top nav, next to bell) ─────────────────────────────── */
.cf-tier-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 800;
  padding: 5px 10px;
  border-radius: 999px;
  margin-right: -2px;
  cursor: pointer;
  letter-spacing: 0.5px;
  transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
  font-family: inherit;
  border: 0.5px solid transparent;
}
.cf-tier-badge:hover { transform: translateY(-1px); }
.cf-tier-badge .cf-tier-upgrade {
  font-size: 9px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  color: var(--accent);
  letter-spacing: 0.3px;
  margin-left: 2px;
}
.cf-tier-badge[style*="rgb(237, 232, 224)"] .cf-tier-upgrade,
.cf-tier-badge[style*="--soft"] .cf-tier-upgrade {
  background: var(--accent);
  color: #fff;
}

/* ── NOTIFICATION BELL ───────────────────────────────────────────────── */
.cf-bell {
  position: relative;
  background: transparent;
  border: 0.5px solid transparent;
  border-radius: 50%;
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center; justify-content: center;
  color: var(--text);
  cursor: pointer;
  margin-right: 6px;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
  font-family: inherit;
}
.cf-bell:hover { background: var(--soft); border-color: var(--border); transform: translateY(-1px); }
.cf-bell.has-unread { color: var(--accent); }
.cf-bell-dot {
  position: absolute;
  top: 7px; right: 7px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #ef4444;
  border: 2px solid var(--bg);
  box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.55);
  animation: cf-bell-pulse 1.8s ease-in-out infinite;
}
@keyframes cf-bell-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.55); }
  60%  { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
  100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}
/* The icon itself glows when there are unread notifications */
.cf-bell.has-unread svg {
  filter: drop-shadow(0 0 6px rgba(108, 84, 212, 0.5));
  animation: cf-bell-icon-glow 2.4s ease-in-out infinite;
}
@keyframes cf-bell-icon-glow {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(108, 84, 212, 0.35)); }
  50%      { filter: drop-shadow(0 0 8px rgba(108, 84, 212, 0.65)); }
}

/* Notification list items */
.cf-notif-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 16px;
  border-bottom: 0.5px solid var(--soft);
  cursor: pointer;
  transition: background 0.12s;
}
.cf-notif-item:hover { background: var(--soft); }
.cf-notif-item:last-child { border-bottom: none; }
.cf-notif-item.unread { background: rgba(108, 84, 212, 0.04); }
.cf-notif-icon { font-size: 18px; flex-shrink: 0; line-height: 1; margin-top: 1px; }
.cf-notif-body { flex: 1; min-width: 0; }
.cf-notif-title { font-size: 13px; font-weight: 700; color: var(--text); line-height: 1.3; }
.cf-notif-meta { font-size: 11px; color: var(--muted); margin-top: 2px; line-height: 1.3; }
.cf-notif-empty { padding: 32px 24px; text-align: center; color: var(--muted); font-size: 13px; }

/* ── HOVER TOOLTIPS (data-tip) ──────────────────────────────────────── */
/* Add `data-tip="..."` to any element to get a styled tooltip on hover.
   Optional `data-tip-pos="top|bottom|left|right"` (defaults to top).
   400ms delay so accidental mouse passes don't trigger.
   Mobile: tooltips are hidden — touch users get no hover state, and tap
   targets should already be obvious. */
[data-tip] { position: relative; }
[data-tip]::before,
[data-tip]::after { opacity: 0; pointer-events: none; transition: opacity 0.18s; }
[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  background: #1a1a1a;
  color: #fff;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.1px;
  line-height: 1.45;
  width: max-content;
  max-width: 240px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.18);
  z-index: 9999;
  white-space: normal;
}
[data-tip]::before {
  content: '';
  position: absolute;
  width: 0; height: 0;
  border-style: solid;
  z-index: 9999;
}
/* Default position: top */
[data-tip]::after {
  bottom: calc(100% + 9px);
  left: 50%;
  transform: translateX(-50%);
}
[data-tip]::before {
  bottom: calc(100% + 3px);
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px 6px 0 6px;
  border-color: #1a1a1a transparent transparent transparent;
}
/* Position variants */
[data-tip][data-tip-pos="bottom"]::after { bottom: auto; top: calc(100% + 9px); }
[data-tip][data-tip-pos="bottom"]::before { bottom: auto; top: calc(100% + 3px); border-width: 0 6px 6px 6px; border-color: transparent transparent #1a1a1a transparent; }
[data-tip][data-tip-pos="left"]::after { bottom: 50%; left: auto; right: calc(100% + 9px); transform: translateY(50%); }
[data-tip][data-tip-pos="left"]::before { bottom: 50%; left: auto; right: calc(100% + 3px); transform: translateY(50%); border-width: 6px 0 6px 6px; border-color: transparent transparent transparent #1a1a1a; }
[data-tip][data-tip-pos="right"]::after { bottom: 50%; left: calc(100% + 9px); transform: translateY(50%); }
[data-tip][data-tip-pos="right"]::before { bottom: 50%; left: calc(100% + 3px); transform: translateY(50%); border-width: 6px 6px 6px 0; border-color: transparent #1a1a1a transparent transparent; }
/* Reveal on hover with delay (so accidental passes don't trigger) */
@media (hover: hover) {
  [data-tip]:hover::before,
  [data-tip]:hover::after { opacity: 1; transition-delay: 0.4s; }
}

/* ── PREMIUM POLISH ──────────────────────────────────────────────────── */
/* Pulsing live indicator (e.g. "we're watching your inbox" signal) */
.cf-pulse-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55);
  animation: cf-pulse 1.8s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes cf-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); }
  70%  { box-shadow: 0 0 0 5px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

/* Subtle hover lift on dashboard cards — adds tactile depth without flash */
.inbox-mgr-premium:hover { transform: translateY(-1px); box-shadow: 0 4px 18px rgba(107,79,160,0.24), inset 0 1px 0 rgba(255,255,255,0.7); }
.on-deck-card:hover { transform: translateY(-1px); box-shadow: 0 3px 12px rgba(108,84,212,0.10); }

/* Scoped scrollbar for the today's-flo task list (and other internal scrolls) */
.flo-task-list::-webkit-scrollbar { width: 4px; }
.flo-task-list::-webkit-scrollbar-track { background: transparent; }
.flo-task-list::-webkit-scrollbar-thumb { background: rgba(108, 84, 212, 0.3); border-radius: 99px; }
.flo-task-list::-webkit-scrollbar-thumb:hover { background: rgba(108, 84, 212, 0.5); }

/* ── DASHBOARD HERO PILL ─────────────────────────────────────────────── */
/* Desktop — avatar (anchor) | greeting | dial | stats (right edge) */
.dash-hero-pill {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 22px 18px 240px;
  min-height: 160px;
  margin-bottom: 28px; /* clearance for avatar that pops below the pill */
}
.dash-hero-avatar {
  width: 220px; height: 220px;
  position: absolute; left: 8px; top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  /* Gradient ring: gold → violet so the headshot picks up both brand colors */
  border: 3px solid transparent !important;
  background: linear-gradient(var(--accent), var(--accent)) padding-box,
              linear-gradient(135deg, #C9A96E 0%, #6B4FA0 100%) border-box;
  box-shadow: 0 8px 28px rgba(108, 84, 212, 0.36);
}
.dash-hero-avatar::before {
  /* Soft halo behind the avatar — fades from gold-tinted center to transparent */
  content: '';
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 169, 110, 0.28) 0%, rgba(201, 169, 110, 0) 75%);
  z-index: -1;
  pointer-events: none;
}
.dash-hero-avatar-initial { font-size: 84px; }

/* Tier pill — anchored to bottom-center of avatar */
.dash-hero-avatar-tier {
  position: absolute;
  left: calc(8px + 110px);
  top: 50%;
  /* avatar radius 110, pill sits ~24px below top edge */
  transform: translate(-50%, calc(-50% - 86px));
  z-index: 5;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 5px 13px;
  border-radius: 99px;
  border: 2px solid #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  background: linear-gradient(135deg, #C9A96E, #A67C4A);
  color: #fff;
  white-space: nowrap;
}
.dash-hero-avatar-tier[data-tier="pro"] {
  background: linear-gradient(135deg, var(--accent), var(--accent-mid));
  color: #fff;
}
.dash-hero-avatar-tier[data-tier="free"] {
  background: rgba(255,255,255,0.96);
  color: var(--muted);
  border-color: rgba(108,84,212,0.25);
  box-shadow: 0 4px 12px rgba(108,84,212,0.18);
}

.dash-hero-greeting { flex: 0 1 auto; min-width: 0; }
.dash-hero-statsection { margin-left: auto; }

/* Mobile: compact hero — avatar+greeting on row 1, dial+stats side-by-side on row 2 */
@media (max-width: 699px) {
  .dash-hero-pill {
    display: grid !important;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "avatar greeting"
      "dial   stats";
    align-items: center;
    gap: 10px 12px;
    padding: 14px 14px 12px;
    min-height: auto;
    border-radius: var(--r-lg) !important;
  }
  .dash-hero-avatar {
    grid-area: avatar;
    width: 88px !important; height: 88px !important;
    position: static !important;
    transform: none !important;
    border-width: 3px !important;
  }
  .dash-hero-avatar-initial { font-size: 40px !important; }
  .dash-hero-avatar-tier {
    grid-area: avatar !important;
    position: static !important;
    margin: 0 auto -10px !important;
    align-self: start;
    transform: translateY(0) !important;
    font-size: 8px !important;
    padding: 3px 8px !important;
    letter-spacing: 0.6px !important;
    border-width: 1.5px !important;
    left: auto !important;
  }
  .dash-hero-greeting { grid-area: greeting; }
  .dash-hero-greeting > div:nth-child(2) { font-size: 22px !important; margin-bottom: 1px !important; }
  .dash-hero-greeting > div:nth-child(3) { font-size: 12px !important; margin-bottom: 4px !important; line-height: 1.2 !important; }
  .dash-hero-divider { display: none !important; }
  .dash-hero-statsection { grid-area: stats; width: 100%; min-width: 0; }
  .dash-hero-statrow { width: 100%; gap: 8px !important; }
  .dash-hero-stats {
    grid-template-columns: 1fr 1fr !important;
    flex: 1;
    gap: 6px !important;
  }
  .dash-hero-stats > div { padding: 7px 10px !important; min-width: 0 !important; }
  .dash-hero-stats > div > div:last-child { font-size: 15px !important; }
  /* Mobile dial — left of stats, compact 124px square footprint, gamified but quiet */
  .dash-hero-dial {
    grid-area: dial !important;
    width: 124px !important;
    height: auto !important;
    margin: 0 !important;
    justify-self: start;
    align-self: center;
  }
  .dash-hero-dial svg { width: 124px !important; height: 76px !important; }
  .dash-hero-dial > div:last-child { margin-top: -2px !important; }
  .dash-hero-dial > div:last-child > div:first-child { font-size: 18px !important; }
  .dash-hero-dial > div:last-child > div:nth-child(2) { font-size: 8.5px !important; margin-top: 1px !important; letter-spacing: 0.5px !important; }
  .dash-hero-dial #homeSparkline { display: none !important; }
  /* Hide the "April at a glance · 4 days left" header on mobile — covered by dial label */
  .dash-hero-statsection > div:first-child { display: none !important; }
}

/* ── ON DECK FILLER — single CTA box that fills empty desktop space, hidden on mobile ── */
.on-deck-filler {
  display: none;
  background: transparent;
  border: 1.5px dashed var(--accent-mid);
  border-radius: var(--r-md);
  padding: 16px;
  cursor: pointer;
  font-family: 'Plus Jakarta Sans', sans-serif;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--accent);
  width: 100%;
  margin-top: 6px;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.on-deck-filler:hover { background: var(--accent-light); border-color: var(--accent); }
.on-deck-filler-icon { font-size: 22px; font-weight: 600; line-height: 1; }
.on-deck-filler-label { font-size: 12px; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase; }

@media (min-width: 700px) {
  /* Make homeDueList a flex column so the filler can absorb remaining height */
  #viewHome #homeDueList { display: flex; flex-direction: column; }
  #viewHome #homeDueList > * { flex: 0 0 auto; }
  #viewHome #homeDueList > .on-deck-filler { display: flex; flex: 1 1 auto; min-height: 56px; }
}

/* ── TODAY'S FLO — desktop shows all 5 rows, mobile collapses to a dropdown ── */
.flo-rows-wrap { display: block; }
.flo-mobile-toggle { display: none; }
@media (max-width: 699px) {
  /* Hide decorative dashed placeholder on mobile (CTA already says "Ready to stack…") */
  .flo-static-rows { display: none !important; }
  /* Locked-state rows hidden by default; toggle adds .open to reveal */
  .flo-rows-wrap { display: none; }
  .flo-rows-wrap.open { display: block; }
  .flo-mobile-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    background: var(--accent-light);
    border: 0.5px solid var(--accent-mid);
    border-radius: var(--r-md);
    padding: 9px 14px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 12px;
    font-weight: 800;
    color: var(--accent);
    cursor: pointer;
    margin-top: 6px;
    transition: background 0.15s ease;
    letter-spacing: 0.1px;
  }
  .flo-mobile-toggle:hover { background: color-mix(in srgb, var(--accent-light) 80%, var(--accent) 18%); }
  .flo-mobile-toggle .flo-mtoggle-arrow { transition: transform 0.2s ease; font-size: 10px; }
  .flo-mobile-toggle[data-open="1"] .flo-mtoggle-arrow { transform: rotate(180deg); }
}

/* ── DASHBOARD GRID (mobile: single col, desktop: 2-col) ───────────────── */
.dash-grid { display: block; }
.dash-top-row { display: grid; }
.dash-col-left, .dash-col-right { /* no-op on mobile */ }

/* ── DESKTOP / TABLET OPTIMIZATION ─────────────────────────────────────── */
@media (min-width: 700px) {
  body { background: var(--bg); }
  .topnav { max-width: 1200px; margin: 0 auto; left: 0; right: 0; border-radius: 0; padding-left: 22px; padding-right: 22px; }
  .bnav { max-width: 1200px; border-radius: 0; }
  .app { max-width: 1200px; margin: 0 auto; background: var(--bg); min-height: 100vh; border-left: none; border-right: none; padding-left: 22px; padding-right: 22px; }
  .dash-top-row { display: grid; grid-template-columns: 1fr 1.25fr; gap: 12px; align-items: stretch; }
  .dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; }
  .dash-col-left, .dash-col-right { min-width: 0; display: flex; flex-direction: column; }
  /* TodaysFlo sits at natural height (no internal dead space).
     OnDeck stretches via filler so its height matches TodaysFlo when columns are equal. */
  .dash-col-right > div:has(#homeDueList) { flex: 1; display: flex; flex-direction: column; }
  .dash-col-right > div:has(#homeDueList) > #homeDueList { flex: 1; }
}

/* ── TOOLS PAGE — UNIFIED LAYOUT ───────────────────────────────────────── */
/* Light violet wash that bleeds to the edges of the .app container.
   Negative margins counter the .app padding (20px top, 18px sides). */
.hub-wash {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent-light) 70%, var(--bg)) 0%, color-mix(in srgb, var(--accent-light) 35%, var(--bg)) 100%);
  margin: -20px -18px 0;
  padding: 22px 18px 24px;
  border-radius: 0;
}

/* Centered section divider — Fraunces serif label with gradient rule */
.hub-divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin: 20px 0 10px;
}
.hub-divider::before,
.hub-divider::after {
  content: '';
  height: 1.5px;
  border-radius: 2px;
  background: linear-gradient(to right, transparent 0%, var(--accent-mid) 80%);
}
.hub-divider::after {
  background: linear-gradient(to left, transparent 0%, var(--accent-mid) 80%);
}
.hub-divider span {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--accent);
  text-align: center;
  white-space: nowrap;
  letter-spacing: 0.2px;
}

/* About — full-width featured card at bottom of hub */
.hub-about-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(135deg, var(--accent-light) 0%, var(--surface) 100%);
  border: 1px solid var(--accent-mid);
  border-radius: 16px;
  padding: 18px 20px;
  cursor: pointer;
  transition: box-shadow 0.18s ease, transform 0.12s ease;
  -webkit-tap-highlight-color: transparent;
  margin-bottom: 4px;
}
.hub-about-card:hover { box-shadow: 0 4px 18px rgba(107,79,160,0.12); }
.hub-about-card:active { transform: scale(0.99); }
.hub-about-card .hac-icon { font-size: 28px; flex-shrink: 0; }
.hub-about-card .hac-body { flex: 1; min-width: 0; }
.hub-about-card .hac-title { font-size: 15px; font-weight: 800; color: var(--text); margin-bottom: 2px; }
.hub-about-card .hac-sub { font-family: 'Caveat', cursive; font-size: 14px; color: var(--accent); font-weight: 600; }
.hub-about-card .hac-arrow { color: var(--accent); font-size: 18px; flex-shrink: 0; }

/* Section header — literal name + one-line "what this is" caption */
.tools-section { margin-bottom: 20px; }
.tools-section:last-child { margin-bottom: 8px; }
.tools-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4px;
}
.tools-eyebrow::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 1px;
  background: var(--accent-mid);
}
.tools-caption {
  font-family: 'Caveat', cursive;
  font-style: normal;
  font-size: 16px;
  font-weight: 600;
  color: var(--muted);
  margin: 0 0 10px 22px;
  line-height: 1.2;
}

/* Grid container for tool cards in each section */
.tool-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.tool-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.tool-grid > .tool-hero { grid-column: 1 / -1; }

/* Standard tool card — small, equal-height, icon + label */
.tool-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px 8px 11px;
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
  min-height: 72px;
  -webkit-tap-highlight-color: transparent;
}
.tool-card:hover { border-color: var(--accent-mid); box-shadow: 0 4px 16px rgba(107,79,160,0.08); }
.tool-card:active { transform: scale(0.98); }
.tool-card .tc-icon { font-size: 20px; line-height: 1; margin-bottom: 5px; }
.tool-card .tc-label { font-size: 10.5px; font-weight: 800; color: var(--text); letter-spacing: 0.1px; }
/* Wide tool card — spans both columns of a 2-col grid (for orphan rows) */
.tool-grid > .tool-card.wide { grid-column: 1 / -1; flex-direction: row; gap: 10px; padding: 14px 16px; min-height: 0; }
.tool-grid > .tool-card.wide .tc-icon { margin-bottom: 0; font-size: 20px; }
.tool-grid > .tool-card.wide .tc-label { font-size: 12px; }

/* Hero tool card — full width, icon left, big label + caption */
.tool-hero {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 16px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 18%, var(--surface)) 0%, var(--surface) 100%);
  border: 1px solid var(--accent-mid);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}
.tool-hero:hover { box-shadow: 0 4px 18px rgba(107,79,160,0.12); }
.tool-hero:active { transform: scale(0.99); }
.tool-hero .th-icon { font-size: 28px; line-height: 1; flex-shrink: 0; }
.tool-hero .th-body { flex: 1; min-width: 0; }
.tool-hero .th-label { font-size: 14px; font-weight: 800; color: var(--text); }
.tool-hero .th-caption { font-size: 11px; color: var(--muted); margin-top: 2px; line-height: 1.35; }
.tool-hero .th-arrow { color: var(--accent); font-size: 16px; flex-shrink: 0; }

/* Studio variant — dark gradient hero (Inbox Scanner) */
.tool-hero.studio {
  background: linear-gradient(145deg, color-mix(in srgb, var(--brand) 35%, #0a0a14) 0%, color-mix(in srgb, var(--brand) 65%, #0a0a14) 55%, var(--brand) 100%);
  border: none;
  box-shadow: 0 2px 12px var(--brand-glow);
}
.tool-hero.studio .th-label { color: #fff; }
.tool-hero.studio .th-caption { color: rgba(255,255,255,0.78); }
.tool-hero.studio .th-arrow { color: #fff; }

/* Tip pip — small (i) badge top-right; tap/hover shows tooltip */
.tip-pip {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent-light);
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  cursor: help;
  border: 0.5px solid var(--accent-mid);
  z-index: 2;
}
.tip-pip:hover, .tip-pip:focus, .tip-pip.active { background: var(--accent); color: #fff; }
.tip-pop {
  position: absolute;
  top: 28px;
  right: 4px;
  width: 180px;
  background: var(--text);
  color: var(--bg);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.45;
  padding: 8px 10px;
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.18);
  z-index: 50;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.tip-pop::after {
  content: '';
  position: absolute;
  top: -4px;
  right: 8px;
  width: 8px;
  height: 8px;
  background: var(--text);
  transform: rotate(45deg);
}
.tip-pip:hover + .tip-pop, .tip-pip.active + .tip-pop { opacity: 1; transform: translateY(0); }

/* Ideas card — rich violet gradient with 2-line label and circular count */
.ideas-quick {
  flex: 1 1 0;
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(135deg, var(--accent-light) 0%, var(--surface) 100%);
  border: 1px solid var(--accent-mid);
  border-radius: 16px;
  cursor: pointer;
  min-width: 0;
  min-height: 76px;
  box-sizing: border-box;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}
.ideas-quick:hover { border-color: var(--accent); box-shadow: 0 4px 16px rgba(107,79,160,0.10); }
.ideas-quick:active { transform: scale(0.98); }
.ideas-quick .iq-icon {
  font-size: 24px;
  line-height: 1;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 6px rgba(255,200,80,0.35));
}
.ideas-quick .iq-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ideas-quick .iq-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.1;
  letter-spacing: -0.2px;
}
.ideas-quick .iq-sub {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  line-height: 1.2;
}
.ideas-quick .iq-count {
  position: absolute;
  top: -7px;
  right: -7px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(107,79,160,0.35);
  border: 2px solid var(--bg);
}
.ideas-quick .iq-count.has { display: flex; }

/* Founder + FAQs compact quick-access cards in the tools row */
.hub-quick-card {
  flex: 0 0 66px;
  min-height: 76px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: linear-gradient(135deg, var(--accent-light) 0%, var(--surface) 100%);
  border: 1px solid var(--accent-mid);
  border-radius: 16px;
  cursor: pointer;
  box-sizing: border-box;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}
.hub-quick-card:hover { border-color: var(--accent); box-shadow: 0 4px 16px rgba(107,79,160,0.10); }
.hub-quick-card:active { transform: scale(0.96); }
.hub-quick-card .hqc-icon {
  font-size: 20px;
  line-height: 1;
}
.hub-quick-card .hqc-icon.hqc-sparkle {
  color: var(--accent);
  font-size: 18px;
  filter: drop-shadow(0 1px 4px rgba(107,79,160,0.35));
}
.hub-quick-card .hqc-label {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 10px;
  font-weight: 700;
  color: var(--text);
  text-align: center;
  line-height: 1.2;
  letter-spacing: 0.01em;
}

/* Search bar override INSIDE the side-by-side row — match ideas-quick vibe */
.tools-row { display: flex; gap: 8px; align-items: stretch; margin-bottom: 16px; }
.tools-row .search-bar { margin-bottom: 0; flex: 1.2 1 0; display: flex; }
.tools-row .search-bar input {
  height: 76px;
  padding: 0 56px 0 42px;
  background: linear-gradient(135deg, var(--accent-light) 0%, var(--surface) 100%);
  border: 1px solid var(--accent-mid);
  border-radius: 16px;
  font-size: 14px;
  font-weight: 600;
  box-sizing: border-box;
}
.tools-row .search-bar input::placeholder { font-size: 13px; font-weight: 600; }
.tools-row .search-bar input:hover { border-color: var(--accent); }
.tools-row .search-bar input:focus { border-color: var(--accent); box-shadow: 0 4px 16px rgba(107,79,160,0.10); }
.tools-row .search-bar .search-icon { left: 16px; font-size: 17px; }
.tools-row .search-bar input { padding-right: 16px; }
.tools-row .search-bar::after { display: none; }

/* Money nudge at bottom of Tools — tappable */
.money-nudge {
  margin-top: 18px;
  padding: 12px 14px;
  background: var(--surface);
  border: 0.5px dashed var(--accent-mid);
  border-radius: 12px;
  font-size: 11px;
  color: var(--muted);
  text-align: center;
  line-height: 1.5;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.money-nudge:hover { background: var(--accent-light); border-color: var(--accent); }
.money-nudge strong { color: var(--accent); font-weight: 800; }

/* ── MAGIC COMMAND BAR ──────────────────────────────────────────────────── */

@keyframes magic-border-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(107,79,160,0), 0 2px 12px rgba(0,0,0,0.08); border-color: var(--accent-mid); }
  50%       { box-shadow: 0 0 22px 4px rgba(107,79,160,0.22), 0 2px 12px rgba(0,0,0,0.08); border-color: var(--accent); }
}
@keyframes sparkle-spin {
  0%   { transform: rotate(0deg) scale(1);   opacity: 0.85; }
  25%  { transform: rotate(20deg) scale(1.2); opacity: 1; }
  50%  { transform: rotate(0deg) scale(1);   opacity: 0.85; }
  75%  { transform: rotate(-20deg) scale(1.2); opacity: 1; }
  100% { transform: rotate(0deg) scale(1);   opacity: 0.85; }
}
@keyframes magic-result-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fab-pulse {
  0%, 100% { box-shadow: 0 10px 26px rgba(107,79,160,0.42), 0 0 0 4px var(--surface); }
  50%       { box-shadow: 0 10px 32px rgba(107,79,160,0.62), 0 0 0 4px var(--surface), 0 0 0 8px rgba(107,79,160,0.12); }
}

.magic-input-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--soft);
  border: 1.5px solid var(--accent-mid);
  border-radius: 16px;
  padding: 14px 16px;
  animation: magic-border-pulse 2.8s ease-in-out infinite;
  transition: border-color 0.2s ease;
}
.magic-input-wrap:focus-within {
  animation: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(107,79,160,0.15), 0 4px 20px rgba(107,79,160,0.12);
}

.magic-sparkle {
  font-size: 22px;
  flex-shrink: 0;
  animation: sparkle-spin 4s ease-in-out infinite;
  display: inline-block;
  filter: drop-shadow(0 0 6px rgba(107,79,160,0.6));
}
.magic-input-wrap:focus-within .magic-sparkle {
  animation: sparkle-spin 0.6s ease-in-out infinite;
  filter: drop-shadow(0 0 10px rgba(107,79,160,0.9));
}

.magic-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.magic-input::placeholder { color: var(--muted); font-weight: 500; }

.magic-result-item {
  animation: magic-result-in 0.18s ease both;
}

/* FAB pulse when idle */
.bnb-fab {
  animation: fab-pulse 3s ease-in-out infinite;
}
.bnb-fab:hover, .bnb-fab:active {
  animation: none;
}

.magic-example-chip {
  background: var(--soft);
  border: 0.5px solid var(--border);
  border-radius: 20px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
  -webkit-tap-highlight-color: transparent;
}
.magic-example-chip:hover { background: var(--accent-light); border-color: var(--accent-mid); }
.magic-example-chip:active { transform: scale(0.96); }