/* ═══════════════════════════════════════════════════════════════════
   BRAND-VIBE — the thaypley elite UI/UX overhaul layer
   ───────────────────────────────────────────────────────────────────
   Pink · Yellow · Blue · Blackish. Max readability. Sky untouched.

   Philosophy (Linear / Arc / Raycast grade):
   1. STALPH is the display voice ONLY — every body/UI text ≤15px runs
      Inter (--font-ui). Display faces at 11px are noise, not brand.
   2. Brand colors are EARNED, not everywhere. Ink (#231F20) on brand
      surfaces always (6.3:1 on pink, 5.4:1 on blue) — never white-on-pink
      (2.6:1 fail). White stays for text on DARK surfaces only.
   3. Calm surfaces, refined edges. Neon glow → soft frost. 2px borders →
      1px hairline. Vivid brand = accent, not wallpaper.
   4. Physics on every interaction: springs, lifts, presses — transform
      and opacity only, 60fps compositor-safe.
   5. The time-synced sky (sky-theme.css) is the calling card. This layer
      never touches #tp-sky, --surface-frost, or the phase engine.

   Loaded LAST after page CSS (before runtime sky-theme injection which
   owns frost backgrounds only — we don't fight it).

   Every custom property below carries a fallback so standalone pages
   (store-builder, index.html) get the polish without importing tokens.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 0 · Token bridge (fallbacks for token-less pages) ───────────── */
:root {
  --vibe-pink:        var(--pink-dark,  #f177ae);
  --vibe-pink-med:    var(--pink-med,   #f494be);
  --vibe-pink-light:  var(--pink-light, #f0cbd9);
  --vibe-yellow:      var(--yellow,     #fad448);
  --vibe-yellow-deep: var(--yellow-deep,#f0c120);
  --vibe-blue:        var(--blue,       #6581b8);
  --vibe-blue-light:  var(--blue-light, #9baad1);
  --vibe-ink:         var(--black,      #231F20);
  --vibe-ink-soft:    var(--on-primary, #231F20);
  --vibe-ui:          var(--font-ui, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);
  --vibe-display:     var(--font-display, 'STALPH', Georgia, serif);

  /* Readable ink ramp — secondary/tertiary bumped from legacy greys */
  --vibe-ink-2: rgba(35, 31, 32, 0.72);
  --vibe-ink-3: rgba(35, 31, 32, 0.58);
  --vibe-ink-faint: rgba(35, 31, 32, 0.44);
  --vibe-ink-white-2: rgba(255, 255, 255, 0.78);
  --vibe-ink-white-3: rgba(255, 255, 255, 0.62);

  /* Refined shadows — depth without neon */
  --vibe-shadow-1: 0 1px 2px rgba(35, 31, 32, 0.05), 0 2px 10px rgba(35, 31, 32, 0.06);
  --vibe-shadow-2: 0 2px 6px rgba(35, 31, 32, 0.06), 0 12px 32px rgba(35, 31, 32, 0.10);
  --vibe-shadow-3: 0 4px 10px rgba(35, 31, 32, 0.08), 0 20px 48px rgba(35, 31, 32, 0.16);
  --vibe-shadow-brand: 0 4px 14px rgba(241, 119, 174, 0.22);

  --vibe-hairline: 1px solid rgba(35, 31, 32, 0.10);
  --vibe-hairline-light: 1px solid rgba(255, 255, 255, 0.14);
  --vibe-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --vibe-ease-flow: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── 1 · TYPOGRAPHY SWEEP ──────────────────────────────────────────
   STALPH → Inter for every small/body/UI text. Keeps the display voice
   for headings ≥17px, wordmarks, avatars, big numerals. */
.nav-search input,
.avatar-placeholder,
.sidebar-item,
.tp-ptab,
.right-panel-header,
.switch-account-section,
.right-panel-avatar,
.right-panel-add,
.right-panel-link,
.right-panel-logout,
.mobile-bottom-nav a,
.mobile-sidebar-section,
.mobile-sidebar a,
.rp-search-input,
.rp-sr-label,
.rp-sr-name,
.rp-sr-handle,
.rp-sr-post-preview,
.rp-sr-loading,
.rp-sr-empty,
.rp-section-label,
.rp-avatar-chip,
.ms-avatar-chip,
.btn,
.btn-sm,
.btn-lg,
.cosmic-tab,
.cosmic-today-badge,
.cosmic-reading-title,
.cosmic-sub-card h4,
.astralmate-text h4,
.friend-finder-label,
.friend-name,
.talk-topics-label,
.post-textarea,
.post-textarea::placeholder,
.nsfw-toggle,
.post-handle-time,
.post-action-btn,
.chip,
.heart-token,
.toast,
.tab-loading,
.tab-empty,
.track-num,
.track-title,
.track-album,
.track-dur,
.tunes-ps-label,
.tunes-ps-title,
.tunes-ps-artist,
.tunes-section-label,
.listening-name,
.roster-name,
.roster-handle,
.tv-title,
.tv-meta,
.closet-item-name,
.closet-item-price,
.you-section-label,
.you-bio,
.you-meta-row,
.you-vibe-tag,
.you-person-name,
.you-list-item,
.you-empty-cta,
.chapter-date,
.chapter-title,
.chapter-text,
.chapter-edit-btn,
.chapter-del-btn,
.chapters-add-btn,
.chapters-empty,
.state-inline,
.widget-tile-title,
.keeper-mobile-sheet-title,
.cosmic-sign-label,
.sky-section-label,
.portal-card-title,
.cal-month-label,
.nowplaying-title,
.comment-avatar,
.theme-name,
.blog-post-title,
.settings-section-title,
.rail-store-name,
.section-title,
.stat-label,
.mini-stat-label,
.feed-tab,
.friend-finder-label,
.widget-tile-label,
.convo-header-title,
.section-tag,
.sky-phase-preview,
.h-tab,
.cal-view-tab,
.cal-event-type-btn,
.today-badge,
.status-pending,
.user-type-badge,
.sidebar-item.golive {
  font-family: var(--vibe-ui);
}

/* Keep STALPH where it earns it — display tier */
.stalph,
.page-title,
.hero-title,
.hero-eyebrow,
.manifesto-line,
.state-title,
.cal-big-num,
.sky-strip-main,
.cosmic-sign-icon,
.big-cta,
.promise-title,
.pillar-title,
.why-num,
.room-username,
.room-handle,
.post-username,
.post-avatar,
.friend-avatar,
.bestie-avatar,
.composer-avatar,
.golive-avatar,
.astralmate-icon,
.stat-num,
.mini-stat-num,
.mtb-icon-center,
.state-icon,
.ph,
.login-title,
.page-sub {
  font-family: var(--vibe-display);
}

/* ── 2 · INK & CONTRAST ────────────────────────────────────────────
   Kill the legacy greys (#aaa/#888/#666/#555) — tokenized ink that
   passes 4.5:1 on white and on brand light surfaces. */
.tp-ptab,
.switch-account-section,
.convo-time,
.search-clear,
.rp-sr-handle { color: var(--vibe-ink-3); }

.tp-ptab--active { color: var(--vibe-ink); font-weight: 600; }
.tp-ptab--pley.tp-ptab--active  { background: rgba(241, 119, 174, 0.16); color: #c9457d; }
.tp-ptab--fam.tp-ptab--active   { background: rgba(201, 162, 39, 0.16);  color: #8a6d10; }
.tp-ptab--werk.tp-ptab--active  { background: rgba(61, 96, 152, 0.16);   color: #3d6098; }

.convo-preview,
.results-label,
.user-handle,
.login-sub,
.bottom-links,
.forgot-sub,
.premium-tier-price,
.tier-price,
.widget-tile-sub,
.sky-strip-sub,
.sky-strip-label { color: var(--vibe-ink-2); }

.post-handle-time,
.cosmic-sub-card p,
.track-album,
.tv-meta { color: var(--vibe-ink-3); }

/* ── 3 · BUTTONS ───────────────────────────────────────────────────
   Dark ink on brand — never white-on-pink. Inter, letterpress shadows,
   spring press physics. */
.btn {
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: 0 1px 2px rgba(35, 31, 32, 0.12);
  will-change: transform;
}
.btn:hover { transform: translateY(-1px) scale(1.02); }
.btn:active { transform: translateY(0) scale(0.97); }

.btn-primary {
  background: linear-gradient(180deg, var(--vibe-pink) 0%, var(--vibe-pink) 100%);
  color: var(--vibe-ink-soft);
  box-shadow: 0 1px 2px rgba(35,31,32,0.18), 0 4px 14px rgba(241, 119, 174, 0.28);
}
.btn-primary:hover {
  background: linear-gradient(180deg, #f27fb3 0%, var(--vibe-pink) 100%);
  color: var(--vibe-ink-soft);
  box-shadow: 0 2px 4px rgba(35,31,32,0.16), 0 8px 22px rgba(241, 119, 174, 0.34);
}
.btn-primary:active { box-shadow: 0 1px 2px rgba(35,31,32,0.14), 0 2px 8px rgba(241,119,174,0.25); }

.btn-secondary {
  background: linear-gradient(180deg, #6d88bf 0%, var(--vibe-blue) 100%);
  color: var(--vibe-ink-soft);
  box-shadow: 0 1px 2px rgba(35,31,32,0.16), 0 4px 14px rgba(101, 129, 184, 0.26);
}
.btn-secondary:hover {
  background: linear-gradient(180deg, #7a94c9 0%, #5c77ad 100%);
  color: var(--vibe-ink-soft);
  box-shadow: 0 2px 4px rgba(35,31,32,0.14), 0 8px 22px rgba(101, 129, 184, 0.32);
}

.btn-yellow {
  background: linear-gradient(180deg, #fbd968 0%, var(--vibe-yellow) 100%);
  color: var(--vibe-ink-soft);
  box-shadow: 0 1px 2px rgba(35,31,32,0.14), 0 4px 14px rgba(250, 212, 72, 0.30);
}
.btn-yellow:hover {
  background: linear-gradient(180deg, #fcdd7d 0%, #f3c92f 100%);
  color: var(--vibe-ink-soft);
  box-shadow: 0 2px 4px rgba(35,31,32,0.12), 0 8px 22px rgba(250, 212, 72, 0.36);
}

.btn-outline {
  border: 2px solid var(--vibe-pink);
  color: #c9457d;
  background: rgba(241, 119, 174, 0.06);
}
.btn-outline:hover { background: rgba(241, 119, 174, 0.12); color: #b23a6d; }

.btn-ghost {
  background: rgba(240, 203, 217, 0.55);
  color: var(--vibe-ink);
  border: 1px solid rgba(241, 119, 174, 0.25);
}
.btn-ghost:hover { background: var(--vibe-pink-light); color: var(--vibe-ink); }

/* ── 4 · NAV & SIDEBAR ─────────────────────────────────────────────
   LOCKED ruling honored: white header icons stay (brightness(0)
   invert(1)) — nothing here touches --nav-icon-filter. */
.top-nav {
  background: linear-gradient(180deg, #ef6ba5 0%, var(--vibe-pink) 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,0.14) inset, 0 2px 12px rgba(35, 31, 32, 0.16);
}

.nav-search {
  background: rgba(255, 255, 255, 0.16);
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background var(--dur-fast) var(--ease-smooth), border-color var(--dur-fast) var(--ease-smooth);
}
.nav-search:focus-within {
  background: rgba(255, 255, 255, 0.26);
  border-color: rgba(255, 255, 255, 0.55);
}
.nav-search input { font-weight: 500; }

.nav-icon-btn:hover,
.nav-dm:hover,
.nav-hearts:hover {
  background: rgba(255, 255, 255, 0.14);
  transform: translateY(-1px) scale(1.08);
}

.left-sidebar {
  border-right: none;
  box-shadow: 1px 0 0 rgba(35, 31, 32, 0.06);
  padding: 14px 10px;
  background: var(--surface-frost, #ffffff);
}

.sidebar-item {
  border-left: none;
  border-radius: 12px;
  margin-bottom: 2px;
  font-weight: 500;
  color: var(--vibe-ink-2);
  position: relative;
}
.sidebar-item img { opacity: 0.45; transition: opacity var(--dur-fast); }
.sidebar-item:hover { background: rgba(240, 203, 217, 0.6); color: #b23a6d; }
.sidebar-item.active {
  background: linear-gradient(90deg, rgba(241, 119, 174, 0.16), rgba(241, 119, 174, 0.06));
  color: #c9457d;
  font-weight: 700;
  box-shadow: inset 2px 0 0 var(--vibe-pink);
}
.sidebar-item.active img { opacity: 1; filter: drop-shadow(0 0 2px rgba(241,119,174,0.3)); }

.right-panel {
  background: linear-gradient(180deg, #fdf3b8 0%, var(--vibe-yellow) 100%);
  border-left: none;
  box-shadow: -2px 0 24px rgba(35, 31, 32, 0.10);
}
.right-panel-account {
  background: rgba(255, 255, 255, 0.55);
  border: var(--vibe-hairline);
}
.right-panel-avatar { color: var(--vibe-ink-soft); font-weight: 700; }
.right-panel-link { font-weight: 500; }
.right-panel-link:hover { background: rgba(255, 255, 255, 0.5); color: #b23a6d; }
.right-panel-logout:hover { background: rgba(230, 57, 70, 0.10); }

/* Mobile bottom nav — dark ink that clears the pink bar */
.mobile-bottom-nav a { color: rgba(35, 31, 32, 0.88); font-weight: 500; }
.mtb-tab { color: rgba(35, 31, 32, 0.88); }
.mtb-tab.active { color: var(--vibe-ink); }
.mobile-sidebar .right-panel-logout { color: rgba(255, 255, 255, 0.92); }

/* ── 5 · FEED ──────────────────────────────────────────────────────
   Calm the neon. Refine tabs, composer, actions. Both day + night. */

/* Tabs — active pill reads as connected, glow becomes a whisper */
.feed-tab {
  font-weight: 600;
  border-radius: 12px 12px 4px 4px;
}
.feed-tab.active {
  background: var(--vibe-pink-light);
  border-bottom: 3px solid var(--vibe-pink);
  box-shadow: 0 -2px 8px rgba(241, 119, 174, 0.08), 0 1px 0 rgba(255,255,255,0.6) inset;
  color: #b23a6d;
}
.feed-tab[data-tab="keeper"].active {
  background: rgba(250, 212, 72, 0.24);
  border-bottom-color: var(--vibe-yellow-deep);
  box-shadow: 0 -2px 8px rgba(250, 212, 72, 0.10);
}
.feed-tab[data-tab="webiverse"].active {
  background: rgba(101, 129, 184, 0.16);
  border-bottom-color: var(--vibe-blue);
  color: #3d6098;
  box-shadow: 0 -2px 8px rgba(101, 129, 184, 0.10);
}

/* Post cards — softer halo, hairline edge, clean hover lift */
.post-card {
  border: 1px solid rgba(35, 31, 32, 0.07);
  box-shadow: 0 1px 2px rgba(35,31,32,0.04), 0 6px 20px rgba(35, 31, 32, 0.05);
}
.post-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(35,31,32,0.05), 0 14px 34px rgba(35, 31, 32, 0.10);
  border-color: rgba(241, 119, 174, 0.28);
}
.post-username { font-weight: 700; letter-spacing: -0.01em; }
.post-body { color: var(--vibe-ink); line-height: 1.72; }
.post-action-btn { color: var(--vibe-ink-3); font-weight: 500; }
.post-action-btn:hover { background: rgba(241, 119, 174, 0.10); color: #b23a6d; }

/* Composer — the one place brand saturation is welcome, quietly */
.composer-wrap {
  border-top: 2px solid var(--vibe-pink);
  box-shadow: 0 1px 2px rgba(35,31,32,0.04), 0 8px 26px rgba(241, 119, 174, 0.08);
}
.post-textarea { font-weight: 500; }

/* Night — swap neon glow for dark frost, fix invisible chrome */
body.sky-night .post-card,
body.sky-night .composer-wrap,
body.sky-night .feed-tab-content,
body.sky-night .life-portal-card,
body.sky-night .todo-card,
body.sky-night .besties-card,
body.sky-night .widget-tile,
body.sky-night .astralmate-mini,
body.sky-night .roots-portal-card,
body.sky-night .nowplaying-card,
body.sky-night .sky-strip-card,
body.sky-night .cosmic-section,
body.sky-night .cosmic-mini,
body.sky-night .cosmic-card-yellow {
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 8px 24px rgba(10, 8, 16, 0.35) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
}
body.sky-night .feed-tab.active,
body.sky-night .feed-tab[data-tab="mine"].active,
body.sky-night .feed-tab[data-tab="keeper"].active,
body.sky-night .feed-tab[data-tab="webiverse"].active,
body.sky-night .feed-tab[data-tab="blots"].active {
  box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 -2px 10px rgba(255,255,255,0.05) !important;
}
body.sky-night .feed-tab { color: rgba(255, 255, 255, 0.62); }
body.sky-night .feed-tab.active { color: var(--white); background: rgba(255, 255, 255, 0.10); }
body.sky-night .feed-tab[data-tab="keeper"].active { background: rgba(250, 212, 72, 0.14); }
body.sky-night .feed-tab[data-tab="webiverse"].active { background: rgba(101, 129, 184, 0.20); }
body.sky-night .post-handle-time { color: rgba(255, 255, 255, 0.62); }
body.sky-night .sky-section-label { color: rgba(255, 255, 255, 0.62); }
body.sky-night .widget-tile-sub { color: rgba(255, 255, 255, 0.62); }
body.sky-night .widget-tile-handle { color: rgba(255, 255, 255, 0.55); }
body.sky-night .widget-size-btn { color: rgba(255, 255, 255, 0.55); }
body.sky-night .post-action-btn { color: rgba(255, 255, 255, 0.66); }
body.sky-night .comment-like-btn { color: rgba(255, 255, 255, 0.66); }

/* ── 6 · SURFACES & CARDS ──────────────────────────────────────────
   Portal / dashboard vocabulary — hairline edges, soft depth. */
.stat-card,
.dash-section,
.card,
.panel,
.widget-card {
  border: var(--vibe-hairline);
  box-shadow: var(--vibe-shadow-1);
  transition: transform var(--dur-med) var(--ease-smooth), box-shadow var(--dur-med) var(--ease-smooth);
}
.stat-card:hover,
.dash-section:hover { box-shadow: var(--vibe-shadow-2); }

.stat-card { padding: 18px 14px; }
.stat-num { font-weight: 700; letter-spacing: -0.02em; }
.stat-label { letter-spacing: 0.06em; text-transform: uppercase; color: var(--vibe-ink-3); }

.dash-section { padding: 26px 28px; }
.section-title { font-weight: 700; letter-spacing: -0.01em; }
.section-tag { font-weight: 700; letter-spacing: 0.04em; }

.page-title { letter-spacing: -0.02em; }

/* Yellow full-bleed panels — soften so the ink breathes */
.todo-card {
  background: linear-gradient(150deg, #fbe37c 0%, var(--vibe-yellow) 100%) !important;
  border: 1px solid rgba(170, 128, 0, 0.28) !important;
}
.besties-card {
  background: linear-gradient(150deg, #b6c4e3 0%, var(--vibe-blue-light) 100%) !important;
  border: 1px solid rgba(101, 129, 184, 0.30) !important;
}
.life-portal-card {
  background: linear-gradient(150deg, #f8dce7 0%, var(--vibe-pink-light) 100%) !important;
  border: 1px solid rgba(241, 119, 174, 0.28) !important;
}

/* ── 7 · ROOM WIDGETS ──────────────────────────────────────────────
   Opacity-as-contrast is banned below 0.55. Ink does the talking. */
.track-num { opacity: 0.55; }
.track-album { opacity: 0.75; }
.track-dur { opacity: 0.6; }
.tab-loading, .tab-empty { opacity: 0.6; }
.you-meta-row { opacity: 0.8; }
.chapter-text { opacity: 0.78; }
.chapter-date { opacity: 0.85; }
.chapters-empty { opacity: 0.6; }
.chapter-draft { background: var(--vibe-pink); color: var(--vibe-ink-soft); opacity: 1; font-weight: 700; }
.tunes-ps-play,
.chapters-add-btn:hover { color: var(--vibe-ink-soft); }

/* ── 8 · TOASTS ────────────────────────────────────────────────────
   Monochrome-elegant: dark slate body, brand accent bar. Max legibility. */
.toast {
  background: var(--vibe-ink);
  color: var(--white);
  font-weight: 500;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-left: 4px solid var(--vibe-pink);
  box-shadow: 0 8px 30px rgba(10, 8, 16, 0.35);
}
.toast.success { background: var(--vibe-ink); border-left-color: var(--wallet-green, #2ecc71); color: var(--white); }
.toast.error   { background: var(--vibe-ink); border-left-color: var(--go-live, #e63946);   color: var(--white); }
.toast.pink    { background: var(--vibe-ink); border-left-color: var(--vibe-pink);          color: var(--white); }
.toast.info    { background: var(--vibe-ink); border-left-color: var(--vibe-blue);          color: var(--white); }

/* ── 9 · MICRO-INTERACTION & POLISH ──────────────────────────────── */
::selection { background: rgba(241, 119, 174, 0.28); color: var(--vibe-ink); }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(241, 119, 174, 0.4);
  border-radius: var(--radius-pill, 999px);
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(241, 119, 174, 0.65); background-clip: padding-box; }

/* Cards lift on hover, settle on leave — spring, not timer */
.card-pink, .card-blue, .card-yellow,
.friend-finder-card, .talk-topics-card, .cosmic-widget,
.tunes-roster-card, .tv-card, .closet-item-card,
.portal-card, .widget-tile, .product-card, .quick-card,
.theme-card, .free-theme-card, .stat-card {
  transition: transform var(--dur-med) var(--vibe-ease-spring), box-shadow var(--dur-med) var(--ease-smooth), border-color var(--dur-med) var(--ease-smooth);
}
.card-pink:hover, .card-blue:hover, .card-yellow:hover,
.friend-finder-card:hover, .cosmic-widget:hover,
.tunes-roster-card:hover, .tv-card:hover, .closet-item-card:hover,
.portal-card:hover, .product-card:hover, .quick-card:hover,
.theme-card:hover, .free-theme-card:hover, .stat-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--vibe-shadow-2);
}

/* Talk-topics — the brand's play button; keep the spring but fix ink */
.talk-topics-label { color: var(--vibe-ink-soft); font-weight: 600; }
.talk-topics-sub { color: #3d6098; font-weight: 700; }
.talk-topics-card:hover { box-shadow: var(--vibe-shadow-brand); transform: translateY(-2px) scale(1.02); }

/* Chips — subtle, readable */
.chip { font-weight: 500; color: var(--vibe-ink-2); }
.chip:hover { background: var(--vibe-pink-med); color: var(--vibe-ink); }

/* Focus ring — brand halo, never a hard outline */
:focus-visible {
  box-shadow: 0 0 0 3px rgba(241, 119, 174, 0.40), 0 0 0 6px rgba(241, 119, 174, 0.12);
}

/* Avatars — dark ink on light brand circles */
.post-avatar { background: var(--vibe-blue-light); color: var(--vibe-ink-soft); font-weight: 700; }
.comment-avatar, .reply-avatar { color: var(--vibe-ink-soft); font-weight: 700; }
.right-panel-avatar { background: var(--vibe-pink); }

/* Yellow accent text on light — deep amber, still brand */
body .accent-yellow,
body .brand-yellow { color: #a97c0a; }

/* ── 10 · ENTRANCE CHOREOGRAPHY ────────────────────────────────────
   Staggered reveal — elements enter decelerating, never at once.
   prefers-reduced-motion is honored globally by tokens.css. */
@keyframes vibe-fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes vibe-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.anim-vibe-up   { animation: vibe-fade-up 0.5s var(--vibe-ease-flow) both; }
.anim-vibe-in   { animation: vibe-fade-in 0.4s var(--vibe-ease-flow) both; }
.anim-vibe-drip { animation: drip 0.5s var(--vibe-ease-spring) both; }

/* ── 11 · STANDALONE PAGES (login / index) ─────────────────────────
   Shared chrome so token-less screens still feel thaypley. */
body.login-page,
body.standalone { background: linear-gradient(180deg, #231F20 0%, #1c1430 100%); }

/* index.html landing CTA — ink on pink beats white on pink */
.cta-main,
.btn-primary.cta-main {
  color: var(--vibe-ink-soft);
  font-weight: 600;
}
.cta-main:hover { color: var(--vibe-ink-soft); }

/* ── 12 · RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  .dash-section { padding: 20px 18px; }
  .stat-card { padding: 14px 10px; }
}