/* ==========================================================================
   CurrenSee — shared design system
   Premium fintech aesthetic: glassmorphism, soft shadows, gradient brand mark.
   ========================================================================== */

/* Theme tokens. Neutrals are RGB triplets so Tailwind can apply opacity
   (see tailwind.config.js). html.dark swaps them; the dark-mode layer at the
   end of this file covers hard-coded utilities such as bg-white. */
:root {
  --grad-brand: linear-gradient(135deg, #2563EB 0%, #7C3AED 55%, #06B6D4 100%);
  --cs-bg: 248 250 252;       /* page background */
  --cs-fg: 15 23 42;          /* main text */
  --cs-card: 255 255 255;     /* cards, panels, inputs */
  --cs-muted: 241 245 249;    /* subtle fills */
  --cs-muted-fg: 100 116 139; /* secondary text */
  --cs-border: 226 232 240;
  --cs-scroll: 203 213 225;
  --color-border: rgb(var(--cs-border));
  --color-primary: #2563EB;
}
html.dark {
  --cs-bg: 8 12 24;
  --cs-fg: 226 232 240;
  --cs-card: 17 24 39;
  --cs-muted: 30 41 59;
  --cs-muted-fg: 148 163 184;
  --cs-border: 42 54 76;
  --cs-scroll: 51 65 85;
  --color-primary: #60A5FA;
}

* { scrollbar-width: thin; scrollbar-color: rgb(var(--cs-scroll)) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: rgb(var(--cs-scroll)); border-radius: 999px; }
*::-webkit-scrollbar-track { background: transparent; }

html { scroll-behavior: smooth; }

body {
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  background: rgb(var(--cs-bg));
  color: rgb(var(--cs-fg));
  -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   View transitions
   Theme / glass switches: main.js and glass.js wrap the change in
   document.startViewTransition, so the browser animates two snapshots on the
   GPU instead of transitioning every element (the old approach cost ~500 ms
   of main-thread work per switch). The theme grows out of the tapped button.
   Page to page (Chrome, served over http): content cross-fades while the
   dock, top bar and sidebar stay put, so switching tabs feels like an app.
   App pages build their shell and content in end-of-body scripts, so each
   holds back its first paint with <link rel="expect" href="#cs-ready"
   blocking="render"> until the #cs-ready marker after those scripts is
   parsed. The old page stays on screen meanwhile, never a half-built one.
   ========================================================================== */
/* (The page-to-page opt-in, @view-transition, is added by theme-init.js
   only when the site is served over http(s); opened as local files, Chrome
   aborts the transition and logs an error.) */
::view-transition-old(root) { animation: 160ms ease both csVtOut; }
::view-transition-new(root) { animation: 280ms cubic-bezier(0.2, 0.8, 0.2, 1) both csVtIn; }
@keyframes csVtOut { to { opacity: 0; } }
@keyframes csVtIn { from { opacity: 0; transform: translateY(10px); } }
/* Persistent chrome. Names sit on the glass elements themselves: a named
   element can't be seen through by its descendants' backdrop-filter. */
[data-dock] { view-transition-name: cs-dock; }
[data-app-top] > header { view-transition-name: cs-top; }
[data-app-top] > div.cs-bar { view-transition-name: cs-topbar; }
aside[data-sidebar] { view-transition-name: cs-side; }
::view-transition-group(cs-dock), ::view-transition-group(cs-top), ::view-transition-group(cs-topbar), ::view-transition-group(cs-side) { animation-duration: 0.28s; }
/* Theme switch: one circular reveal of the whole page, nothing split out */
html.cs-vt-theme [data-dock], html.cs-vt-theme [data-app-top] > header, html.cs-vt-theme [data-app-top] > div.cs-bar, html.cs-vt-theme aside[data-sidebar] { view-transition-name: none; }
html.cs-vt-theme::view-transition-old(root), html.cs-vt-theme::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

.font-display { font-family: "Manrope", ui-sans-serif, system-ui, sans-serif; }

/* -------------------------------------------------- brand utilities ---- */
.gradient-brand { background: var(--grad-brand); }

.gradient-text {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.glass {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.card-soft {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--color-border);
}

/* -------------------------------------------------- logo -------------- */
.logo-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 1rem;
  color: #fff;
  font-family: "Manrope", sans-serif;
  font-weight: 800;
  font-size: 1.125rem;
  line-height: 1;
  box-shadow: 0 8px 24px -4px rgba(37, 99, 235, 0.35);
}
.logo-mark::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 1rem;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}
.logo-text { font-family: "Manrope", sans-serif; font-weight: 800; letter-spacing: -0.02em; }

/* -------------------------------------------------- form input -------- */
.input-el {
  width: 100%;
  border: 1px solid var(--color-border);
  background: rgb(var(--cs-card));
  color: rgb(var(--cs-fg));
  border-radius: 0.9rem;
  padding: 0.85rem 1rem;
  font-size: 0.95rem;
  outline: none;
  transition: box-shadow 0.15s, border-color 0.15s;
}
.input-el:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15);
}

/* ==========================================================================
   Glass system
   html[data-glass] is "liquid" (clear, saturated, refractive rim) or
   "frosted" (soft, mostly opaque). It's set before paint by
   theme-init.js and switched by CSGlass (glass.js). Every glass surface
   reads the same tokens, so one switch restyles the whole UI.
     .cs-glass  floating surfaces (dock, sheets, menus, nav pill).
                Needs a positioned element (relative / fixed / absolute).
     .cs-bar    edge-to-edge bars (sticky header, sidebar)
   On Chromium, glass.js also bends the backdrop through an SVG displacement
   map (html.cs-refract + [data-refract]).
   ========================================================================== */
:root,
html[data-glass="liquid"] {
  --g-bg: radial-gradient(130% 110% at 0% 0%, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 55%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.46), rgba(241, 245, 249, 0.3));
  --g-filter: blur(10px) saturate(190%) brightness(1.04);
  --g-border: rgba(255, 255, 255, 0.6);
  --g-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.95), inset 0 -10px 18px -12px rgba(37, 99, 235, 0.22),
    0 18px 48px -16px rgba(37, 99, 235, 0.32), 0 6px 20px -10px rgba(15, 23, 42, 0.22);
  --g-rim: linear-gradient(140deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.12) 32%, rgba(124, 58, 237, 0.22) 62%, rgba(6, 182, 212, 0.25) 80%, rgba(255, 255, 255, 0.85));
  --g-bar: rgb(var(--cs-bg) / 0.74);
  --g-bar-filter: blur(20px) saturate(180%);
  --g-solid: rgb(var(--cs-card) / 0.55); /* menu tiles, chips inside glass */
}
html[data-glass="frosted"] {
  --g-bg: rgb(255 255 255 / 0.82);
  --g-filter: blur(28px) saturate(150%);
  --g-border: rgb(226 232 240 / 0.95);
  --g-shadow: 0 20px 50px -18px rgba(15, 23, 42, 0.28), 0 4px 14px -6px rgba(15, 23, 42, 0.1);
  --g-rim: none;
  --g-bar: rgb(var(--cs-bg) / 0.86);
  --g-bar-filter: blur(24px) saturate(140%);
  --g-solid: rgb(var(--cs-muted) / 0.7);
}
html.dark[data-glass="liquid"], html.dark:not([data-glass]) {
  --g-bg: radial-gradient(130% 110% at 0% 0%, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0) 55%),
    linear-gradient(180deg, rgba(30, 41, 59, 0.5), rgba(15, 23, 42, 0.38));
  --g-filter: blur(10px) saturate(180%) brightness(1.08);
  --g-border: rgba(255, 255, 255, 0.1);
  --g-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.22), inset 0 -12px 22px -14px rgba(96, 165, 250, 0.35),
    0 20px 50px -16px rgba(0, 0, 0, 0.75), 0 6px 18px -8px rgba(0, 0, 0, 0.5);
  --g-rim: linear-gradient(140deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.04) 32%, rgba(167, 139, 250, 0.3) 62%, rgba(34, 211, 238, 0.25) 80%, rgba(255, 255, 255, 0.28));
  --g-solid: rgb(255 255 255 / 0.06);
}
html.dark[data-glass="frosted"] {
  --g-bg: rgb(17 24 39 / 0.86);
  --g-filter: blur(28px) saturate(140%);
  --g-border: rgb(255 255 255 / 0.07);
  --g-shadow: 0 20px 50px -16px rgba(0, 0, 0, 0.75), 0 6px 18px -8px rgba(0, 0, 0, 0.5);
  --g-solid: rgb(255 255 255 / 0.05);
}
.cs-glass {
  background: var(--g-bg);
  -webkit-backdrop-filter: var(--g-filter);
  backdrop-filter: var(--g-filter);
  border: 1px solid var(--g-border);
  box-shadow: var(--g-shadow);
}
/* Light-catching rim: a 1px gradient ring (hidden in frosted mode) */
.cs-glass::before, [data-nav] .nav-inner::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: var(--g-rim);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
}
html[data-glass="frosted"] .cs-glass::before, html[data-glass="frosted"] [data-nav] .nav-inner::before { display: none; }
/* Real refraction (Chromium only): the displacement map is set per element */
html.cs-refract[data-glass="liquid"] .cs-glass[data-refract],
html.cs-refract[data-glass="liquid"] [data-nav].nav-scrolled:not(.menu-open) .nav-inner[data-refract] {
  -webkit-backdrop-filter: var(--cs-refract,) blur(3px) saturate(190%) brightness(1.05);
  backdrop-filter: var(--cs-refract,) blur(3px) saturate(190%) brightness(1.05);
}
.cs-bar {
  background: var(--g-bar);
  -webkit-backdrop-filter: var(--g-bar-filter);
  backdrop-filter: var(--g-bar-filter);
}

/* Segmented control with a sliding thumb (theme + glass switches).
   <div class="cs-seg" data-seg="glass"><button data-glass-mode="liquid">…</button>…</div> */
.cs-seg {
  position: relative;
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  padding: 3px;
  border-radius: 14px;
  background: rgb(var(--cs-muted));
  font-size: 0.75rem;
  font-weight: 700;
}
.cs-seg::before {
  content: "";
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(50% - 3px);
  border-radius: 11px;
  background: rgb(var(--cs-card));
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 4px 12px -4px rgba(15, 23, 42, 0.18);
  transition: transform 0.45s cubic-bezier(0.3, 1.4, 0.5, 1);
}
.cs-seg > button {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.45rem 0.75rem;
  border-radius: 11px;
  color: rgb(var(--cs-muted-fg));
  transition: color 0.2s ease;
  white-space: nowrap;
}
.cs-seg > button svg { width: 14px; height: 14px; }
html[data-glass="frosted"] .cs-seg[data-seg="glass"]::before,
html.dark .cs-seg[data-seg="theme"]::before { transform: translateX(100%); }
html[data-glass="liquid"] [data-glass-mode="liquid"], html[data-glass="frosted"] [data-glass-mode="frosted"],
html:not(.dark) .cs-seg [data-theme-set="light"], html.dark .cs-seg [data-theme-set="dark"] { color: rgb(var(--cs-fg)); }
.dark .cs-seg::before { background: rgb(var(--cs-bg)); box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.6); }
.cs-seg[data-seg="local"][data-on="1"]::before { transform: translateX(100%); }
.cs-seg[data-seg="local"] > [aria-checked="true"] { color: rgb(var(--cs-fg)); }

/* -------------------------------------------------- landing nav -------- */
/* The pill keeps the same size and position at every scroll position (no
   margin/padding changes, so it never shifts under your thumb). Only its
   surface fades in: transparent at the very top, glass once you scroll or
   while the mobile menu panel is open. */
[data-nav] { transform: translateZ(0); }
[data-nav] .nav-inner {
  position: relative;
  margin-top: 0.75rem;
  border-radius: 1.25rem;
  border: 1px solid transparent;
  background: transparent;
  transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, -webkit-backdrop-filter 0.35s ease, backdrop-filter 0.35s ease;
}
[data-nav] .nav-inner::before { opacity: 0; transition: opacity 0.35s ease; }
[data-nav].nav-scrolled .nav-inner,
[data-nav].menu-open .nav-inner {
  background: var(--g-bg);
  -webkit-backdrop-filter: var(--g-filter);
  backdrop-filter: var(--g-filter);
  border-color: var(--g-border);
  box-shadow: var(--g-shadow);
}
[data-nav].nav-scrolled .nav-inner::before,
[data-nav].menu-open .nav-inner::before { opacity: 1; }
/* An open menu needs to be readable over the hero, so it is never too clear */
[data-nav].menu-open .nav-inner { background: rgb(var(--cs-card) / 0.9); }
html[data-glass="liquid"] [data-nav].menu-open .nav-inner { background: rgb(var(--cs-card) / 0.78); }

/* -------------------------------------------------- nav active link --- */
.nav-link { position: relative; }
.nav-link.active,
.sidebar-link.active {
  background: var(--grad-brand);
  color: #fff !important;
  box-shadow: 0 8px 24px -4px rgba(37, 99, 235, 0.35);
}
.sidebar-link.active svg { color: #fff; }

/* -------------------------------------------------- animations -------- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
.reveal { opacity: 0; }
.reveal.in-view { animation: fadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; }
[data-app-content] .reveal.in-view { animation-duration: 0.42s; }

@keyframes ringGrow {
  from { stroke-dashoffset: var(--ring-full); }
  to { stroke-dashoffset: var(--ring-offset); }
}
.ring-progress {
  animation: ringGrow 1.1s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes barGrow {
  from { width: 0%; }
}
.bar-progress { animation: barGrow 1s cubic-bezier(0.16, 1, 0.3, 1) both; }

/* skeleton loading shimmer (used briefly on dashboard first paint) */
@keyframes shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.skeleton {
  background: linear-gradient(90deg, #eef1f5 0%, #f7f8fa 50%, #eef1f5 100%);
  background-size: 800px 100%;
  animation: shimmer 1.4s infinite linear;
}

/* -------------------------------------------------- toasts ------------- */
#toast-container { pointer-events: none; }
.toast-pop {
  opacity: 0;
  transform: translateY(14px) scale(0.96);
  transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: auto;
}
.toast-pop.toast-in { opacity: 1; transform: translateY(0) scale(1); }
.toast-pop.toast-out { opacity: 0; transform: translateY(8px) scale(0.97); }

/* -------------------------------------------------- stability ---------- */
[data-app-content] .grid > * { min-width: 0; }
/* Fixed bars stay put: no rubber-band / stretch overscroll dragging them
   around, no sideways panning, no double-tap zoom on nav controls, and each
   bar is its own compositor layer so it doesn't jitter while scrolling. */
html { overscroll-behavior-y: none; }
body { overflow-x: clip; }
[data-dock-nav], [data-app-top], [data-more-sheet], [data-fab-wrap] { -webkit-tap-highlight-color: transparent; }
[data-dock-nav] { transform: translateZ(0); }
[data-dock-nav] a, [data-dock-nav] button, [data-app-top] button, [data-app-top] a { touch-action: manipulation; }

/* Space the dock occupies, for anything that floats above it
   (toasts, the assistant composer, the bulk-select bar, quick add). */
:root { --cs-dock-clear: 110px; }
html.dock-compact { --cs-dock-clear: 92px; }
@media (min-width: 1024px) { :root, html.dock-compact { --cs-dock-clear: 2rem; } }
.cs-above-dock { bottom: var(--cs-dock-clear) !important; transition: bottom 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); }

/* -------------------------------------------------- mobile dock -------- */
/* <nav data-dock-nav><div data-dock class="cs-glass">
     <a class="dock-item"><i …></i><span class="dock-label">Home</span></a> …
     <button class="dock-item dock-fab">…</button>
   glass.js adds the liquid lens and the compact-on-scroll behaviour. */
[data-dock-nav] {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 55; /* above the quick-add backdrop, so ADD can close it */
}
[data-dock] {
  position: relative;
  display: flex;
  align-items: center;
  height: 66px;
  padding: 0 6px;
  border-radius: 26px;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
  transition: height 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), border-radius 0.35s ease;
}
html.dock-compact [data-dock] { height: 52px; border-radius: 22px; }
.dock-item {
  position: relative;
  z-index: 3;
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: rgb(var(--cs-muted-fg));
  transition: color 0.2s ease, transform 0.35s cubic-bezier(0.3, 1.5, 0.5, 1), gap 0.35s ease;
}
.dock-item svg { width: 21px; height: 21px; flex-shrink: 0; transition: transform 0.35s cubic-bezier(0.3, 1.5, 0.5, 1); }
.dock-label {
  display: block;
  max-width: 100%;
  max-height: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  line-height: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: max-height 0.3s ease, opacity 0.2s ease, transform 0.3s ease;
}
html.dock-compact .dock-item:not(.dock-fab) { gap: 0; }
html.dock-compact .dock-item:not(.dock-fab) svg { transform: scale(1.08); }
html.dock-compact .dock-label { max-height: 0; opacity: 0; transform: translateY(4px); }
/* Active tab: brand-coloured icon plus a glowing droplet underneath */
.dock-item.is-active { color: var(--color-primary); }
.dock-item.is-active::after {
  content: "";
  position: absolute;
  bottom: 5px;
  left: 50%;
  width: 16px;
  height: 3px;
  margin-left: -8px;
  border-radius: 99px;
  background: var(--grad-brand);
  box-shadow: 0 0 10px rgba(124, 58, 237, 0.7);
  transition: bottom 0.35s ease, width 0.35s ease, margin 0.35s ease;
}
html.dock-compact .dock-item.is-active::after { bottom: 4px; width: 5px; margin-left: -2.5px; }
.dock-dot { position: absolute; top: 12px; left: calc(50% + 7px); width: 8px; height: 8px; border-radius: 99px; background: #EF4444; box-shadow: 0 0 0 2px rgb(var(--cs-card)); transition: top 0.35s ease; }
html.dock-compact .dock-dot { top: 11px; }
/* Raised centre action */
.dock-fab {
  flex: 0 0 auto;
  width: 58px;
  height: 58px;
  margin: -26px 4px 0;
  border-radius: 20px;
  gap: 1px;
  color: #fff !important;
  background: var(--grad-brand);
  box-shadow: 0 14px 30px -8px rgba(124, 58, 237, 0.65), 0 4px 12px -2px rgba(37, 99, 235, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.45);
}
.dock-fab::before { /* glossy cap */
  content: "";
  position: absolute;
  inset: 2px 2px 50% 2px;
  border-radius: 18px 18px 40% 40%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0));
  pointer-events: none;
}
.dock-fab svg { width: 22px; height: 22px; }
.dock-fab .dock-label { font-size: 9px; font-weight: 800; letter-spacing: 0.06em; }
html.dock-compact .dock-fab { transform: scale(0.84) translateY(6px); }
html.dock-compact .dock-fab .dock-label { max-height: 0; }
.dock-fab:active { transform: scale(0.94); }
html.cs-fab-open .dock-fab svg { transform: rotate(45deg); }
/* Liquid, but readable over anything colourful scrolling underneath */
html[data-glass="liquid"] [data-dock].cs-glass {
  background: radial-gradient(130% 120% at 0% 0%, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 55%), rgb(var(--cs-card) / 0.64);
  -webkit-backdrop-filter: blur(14px) saturate(180%) brightness(1.04);
  backdrop-filter: blur(14px) saturate(180%) brightness(1.04);
}
html.dark[data-glass="liquid"] [data-dock].cs-glass {
  background: radial-gradient(130% 120% at 0% 0%, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 55%), rgb(var(--cs-card) / 0.62);
}
html.cs-refract[data-glass="liquid"] [data-dock].cs-glass[data-refract] {
  -webkit-backdrop-filter: var(--cs-refract,) blur(9px) saturate(180%) brightness(1.04);
  backdrop-filter: var(--cs-refract,) blur(9px) saturate(180%) brightness(1.04);
}
html[data-glass="liquid"]:not(.dark) .dock-label { text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7); }

/* Liquid lens that follows your finger (created by glass.js) */
.dock-lens {
  position: absolute;
  z-index: 2;
  top: 5px;
  bottom: 5px;
  left: 0;
  width: 70px;
  border-radius: 20px;
  pointer-events: none;
  opacity: 0;
  transform: translateX(var(--lx, 0px)) scale(0.5, 0.65);
  transition: transform 0.5s cubic-bezier(0.25, 1.6, 0.45, 1), opacity 0.25s ease, border-radius 0.35s ease;
  background: radial-gradient(120% 90% at 30% 8%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.35) 55%, rgba(219, 234, 254, 0.45)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.2));
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 1), inset 0 -3px 6px rgba(37, 99, 235, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.75),
    inset 4px 0 8px -6px rgba(124, 58, 237, 0.45), inset -4px 0 8px -6px rgba(6, 182, 212, 0.45), 0 10px 26px -6px rgba(37, 99, 235, 0.38);
}
html.dock-compact .dock-lens { border-radius: 16px; top: 4px; bottom: 4px; }
html[data-glass="frosted"] .dock-lens { background: rgb(var(--cs-muted)); box-shadow: 0 6px 16px -6px rgba(15, 23, 42, 0.3); }
[data-dock].is-touching .dock-lens { opacity: 1; transform: translateX(var(--lx, 0px)) scale(var(--sx, 1), var(--sy, 1)); }
[data-dock].is-dragging .dock-lens { transition: transform 0.12s ease-out, opacity 0.25s ease, border-radius 0.35s ease; }
.dock-item.is-lensed:not(.dock-fab) { color: var(--color-primary); transform: scale(1.14); }
.dock-item.is-lensed.dock-fab { transform: scale(1.06); }
html.dock-compact .dock-item.is-lensed.dock-fab { transform: scale(0.92) translateY(6px); }
html.dark .dock-lens { background: radial-gradient(120% 90% at 30% 8%, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.05) 60%), rgba(96, 165, 250, 0.08);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.4), inset 0 -3px 6px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.16),
    inset 4px 0 8px -6px rgba(167, 139, 250, 0.6), inset -4px 0 8px -6px rgba(34, 211, 238, 0.6), 0 10px 26px -6px rgba(0, 0, 0, 0.6); }
html.dark[data-glass="frosted"] .dock-lens { background: rgb(var(--cs-muted)); }
.dark .dock-fab { box-shadow: 0 14px 30px -8px rgba(124, 58, 237, 0.55), 0 4px 12px -2px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.35); }
.dark .dock-dot { box-shadow: 0 0 0 2px rgb(var(--cs-bg)); }

/* -------------------------------------------------- "More" sheet ------- */
[data-more-sheet] {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 70;
  transform: translateY(calc(100% + 40px));
  visibility: hidden;
  transition: transform 0.5s cubic-bezier(0.2, 1.1, 0.3, 1), visibility 0s linear 0.5s;
}
[data-more-sheet].is-open { transform: translateY(var(--drag, 0px)); visibility: visible; transition: transform 0.5s cubic-bezier(0.2, 1.1, 0.3, 1); }
[data-more-sheet].is-dragging { transition: none; }
[data-more-overlay] { position: fixed; inset: 0; z-index: 65; background: rgb(8 12 24 / 0.32); opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
[data-more-overlay].is-open { opacity: 1; pointer-events: auto; }
.more-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 14px 4px 12px;
  border-radius: 18px;
  font-size: 11px;
  font-weight: 700;
  color: rgb(var(--cs-fg) / 0.85);
  transition: background 0.2s ease, transform 0.2s ease;
}
.more-tile:active { transform: scale(0.95); }
.more-tile:hover, .more-tile.is-active { background: var(--g-solid); }
.more-tile.is-active { color: var(--color-primary); }
.more-tile .more-ico { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 15px; }
.more-tile .more-ico svg { width: 19px; height: 19px; }
.more-tile .more-label { display: block; width: 100%; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.more-badge { position: absolute; top: -6px; right: -9px; min-width: 20px; height: 20px; padding: 0 5px; display: grid; place-items: center; border-radius: 99px; font-size: 10px; font-weight: 800; box-shadow: 0 0 0 2px rgb(var(--cs-card)); }
[data-more-sheet].is-open .more-tile { animation: csTileIn 0.45s cubic-bezier(0.2, 1.3, 0.4, 1) both; animation-delay: calc(60ms + var(--i, 0) * 28ms); }
@keyframes csTileIn { from { opacity: 0; transform: translateY(14px) scale(0.92); } }
@media (max-width: 359px) { .more-tile { font-size: 10px; padding: 12px 2px 10px; } .more-tile .more-ico { width: 38px; height: 38px; } }
.more-action { display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; padding: 12px 10px; border-radius: 16px; font-size: 13px; font-weight: 700; white-space: nowrap; transition: transform 0.15s ease; }
.more-action:active { transform: scale(0.97); }
.more-action svg { width: 16px; height: 16px; flex: none; }

/* -------------------------------------------------- quick add ---------- */
/* Phones: a 3 × 2 glass grid floating above the dock. Desktop: the classic
   stack of pills above the round + button. main.js toggles .is-open. */
[data-fab-menu]:not(.is-open) { display: none !important; }
.cs-fab-menu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; width: 100%; max-width: 420px; padding: 8px; border-radius: 26px; }
.cs-fab-menu > * { animation: csTileIn 0.4s cubic-bezier(0.2, 1.3, 0.4, 1) both; animation-delay: calc(var(--i, 0) * 30ms); }
.cs-fab-item { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 12px 4px 10px; border-radius: 18px; font-size: 12px; font-weight: 700; transition: background 0.2s ease, transform 0.2s ease; }
.cs-fab-item:hover { background: var(--g-solid); }
.cs-fab-item:active { transform: scale(0.95); }
.cs-fab-item .fab-ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; }
@media (min-width: 1024px) {
  .cs-fab-menu { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; width: auto; padding: 0; border: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .cs-fab-menu.cs-glass::before { display: none; }
  .cs-fab-item { flex-direction: row; gap: 10px; padding: 10px 16px; border-radius: 16px; font-size: 14px; background: rgb(var(--cs-card)); box-shadow: 0 20px 60px -15px rgba(37, 99, 235, 0.25), 0 8px 30px -10px rgba(15, 23, 42, 0.14); }
  .cs-fab-item:hover { background: rgb(var(--cs-card)); transform: translateX(-4px); }
  .cs-fab-item .fab-ico { width: auto; height: auto; background: none !important; }
  .dark .cs-fab-item { box-shadow: 0 20px 60px -15px rgba(0, 0, 0, 0.7); }
}

.cs-fab-wrap { bottom: calc(var(--cs-dock-clear) + 6px); transition: bottom 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); }
@media (min-width: 1024px) { .cs-fab-wrap { bottom: 2rem; } }

/* Text-heavy glass (menus, sheets): same look, a little more body */
html[data-glass="liquid"] .cs-glass.cs-dense {
  background: radial-gradient(130% 110% at 0% 0%, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 55%), rgb(var(--cs-card) / 0.72);
  -webkit-backdrop-filter: blur(18px) saturate(190%) brightness(1.04);
  backdrop-filter: blur(18px) saturate(190%) brightness(1.04);
}
html.dark[data-glass="liquid"] .cs-glass.cs-dense {
  background: radial-gradient(130% 110% at 0% 0%, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 55%), rgb(var(--cs-card) / 0.8);
}
html.cs-refract[data-glass="liquid"] .cs-glass.cs-dense[data-refract] {
  -webkit-backdrop-filter: var(--cs-refract,) blur(18px) saturate(190%) brightness(1.04);
  backdrop-filter: var(--cs-refract,) blur(18px) saturate(190%) brightness(1.04);
}

/* -------------------------------------------------- app top bar -------- */
[data-app-top] { padding-top: env(safe-area-inset-top); }
.cs-icon-btn { position: relative; display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: 14px; background: var(--g-solid); border: 1px solid rgb(var(--cs-border) / 0.8); color: rgb(var(--cs-fg)); transition: transform 0.15s ease, background 0.2s ease; }
.cs-icon-btn:active { transform: scale(0.92); }
.cs-icon-btn svg { width: 18px; height: 18px; }
html[data-glass="liquid"] .cs-icon-btn { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7); }
.dark .cs-icon-btn { border-color: rgb(255 255 255 / 0.08); }
html.dark[data-glass="liquid"] .cs-icon-btn { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); }
@keyframes csPanelIn { from { opacity: 0; transform: translateY(-8px) scale(0.97); } }
.cs-panel-in { animation: csPanelIn 0.32s cubic-bezier(0.2, 1.2, 0.4, 1) both; transform-origin: top right; }

@media (prefers-reduced-motion: reduce) {
  [data-dock], .dock-item, .dock-item svg, .dock-label, .dock-lens, [data-more-sheet], .more-tile, .cs-fab-menu > *, .cs-seg::before { transition: none !important; animation: none !important; }
}

/* -------------------------------------------------- misc -------------- */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.tap-scale:active { transform: scale(0.97); }

/* Chart.js tooltip container tweaks */
.chartjs-tooltip { border-radius: 0.75rem !important; }

/* -------------------------------------------------- app shell ---------- */
/* Privacy mode: the eye toggle in the app top bar blurs every .money amount */
.cs-privacy .money {
  filter: blur(7px);
  transition: filter 0.2s ease;
  user-select: none;
}
.cs-privacy .money:hover { filter: blur(0); }

@keyframes csFadeIn { from { opacity: 0; } to { opacity: 1; } }
.cs-fade-in { animation: csFadeIn 0.2s ease both; }

@keyframes csSheetIn {
  from { opacity: 0; transform: translateY(24px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.cs-sheet-in { animation: csSheetIn 0.32s cubic-bezier(0.16, 1, 0.3, 1) both; }

/* Sign-in and sign-out sequence (passScreen in main.js) */
.cs-leave { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; overflow: hidden; background: rgb(var(--cs-bg)); }
.cs-leave-glow {
  position: absolute;
  inset: -25%;
  background: radial-gradient(32% 28% at 50% 42%, rgba(124, 58, 237, 0.2), transparent 70%),
    radial-gradient(26% 26% at 32% 66%, rgba(37, 99, 235, 0.16), transparent 70%),
    radial-gradient(26% 26% at 68% 62%, rgba(6, 182, 212, 0.16), transparent 70%);
  animation: csLeaveGlow 3.2s ease-in-out infinite alternate;
}
@keyframes csLeaveGlow { to { transform: scale(1.12) rotate(10deg); } }
.cs-leave-track { fill: none; stroke: rgb(var(--cs-muted)); stroke-width: 6; }
.cs-leave-ring { fill: none; stroke: url(#csLeaveGrad); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 326.73; stroke-dashoffset: 326.73; animation: csLeaveRing 2s cubic-bezier(0.45, 0, 0.2, 1) forwards; }
@keyframes csLeaveRing { to { stroke-dashoffset: 0; } }
.cs-leave-mark, .cs-leave-lock { transition: transform 0.5s cubic-bezier(0.3, 1.5, 0.5, 1), opacity 0.25s ease; }
.cs-leave-lock { position: absolute; opacity: 0; transform: scale(0.4) rotate(-25deg); }
.cs-leave.is-done .cs-leave-mark { opacity: 0; transform: scale(0.4) rotate(20deg); }
.cs-leave.is-done .cs-leave-lock { opacity: 1; transform: none; }
.cs-leave.is-done .cs-leave-tile { animation: csLeavePop 0.6s cubic-bezier(0.3, 1.5, 0.5, 1); }
@keyframes csLeavePop { 40% { transform: scale(1.1); box-shadow: 0 0 0 10px rgba(124, 58, 237, 0.15), 0 8px 24px -4px rgba(37, 99, 235, 0.45); } }
.cs-leave-dots::after { content: ""; animation: csLeaveDots 1.2s steps(4) infinite; }
@keyframes csLeaveDots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }
@media (prefers-reduced-motion: reduce) { .cs-leave-glow, .cs-leave-dots::after, .cs-leave.is-done .cs-leave-tile { animation: none; } .cs-leave-ring { animation-duration: 0.6s !important; } }

/* -------------------------------------------------- account menu ------- */
.cs-acct { width: min(calc(100vw - 1.5rem), 22rem); transform-origin: top right; }
.cs-acct.is-closing { opacity: 0; transform: translateY(-6px) scale(0.98); transition: opacity 0.15s ease, transform 0.15s ease; }
.cs-acct-row { display: flex; width: 100%; align-items: center; gap: 0.75rem; border-radius: 14px; padding: 0.6rem 0.75rem; font-size: 0.875rem; font-weight: 600; transition: background 0.15s ease; }
.cs-acct-row:hover { background: var(--g-solid); }
.cs-acct-row > svg:first-child { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.8; }
.cs-acct-strip { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin: 0 2px; padding: 0.75rem 0.9rem; border-radius: 18px; color: #fff; position: relative; overflow: hidden; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); }
.cs-acct-strip::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.22) 45%, transparent 60%); transform: translateX(-100%); animation: csShine 3.2s ease-in-out 0.4s infinite; pointer-events: none; }
@keyframes csShine { 55%, 100% { transform: translateX(100%); } }
.cs-eyebrow-accent { color: #10B981 !important; }
.dark .cs-eyebrow-accent { color: #34D399 !important; }
/* "Hide amounts" switch follows privacy mode */
.cs-privacy .cs-mini-switch.is-privacy { background: var(--grad-brand); }
.cs-privacy .cs-mini-switch.is-privacy::after { transform: translateX(14px); }
html.dark body:not(.cs-privacy) .cs-mini-switch.is-privacy { background: rgb(var(--cs-border)); }
html.dark body:not(.cs-privacy) .cs-mini-switch.is-privacy::after { transform: none; }

/* Three-way segmented control (light / dark / match device).
   html[data-theme-pref] is set by theme-init.js and CSTheme. */
.cs-seg.cs-seg-3::before { width: calc((100% - 6px) / 3); }
html[data-theme-pref="dark"] .cs-seg[data-seg="theme3"]::before { transform: translateX(100%); }
html[data-theme-pref="system"] .cs-seg[data-seg="theme3"]::before { transform: translateX(200%); }
.cs-seg[data-seg="theme3"] > button { color: rgb(var(--cs-muted-fg)) !important; }
html[data-theme-pref="light"] .cs-seg[data-seg="theme3"] [data-theme-set="light"],
html[data-theme-pref="dark"] .cs-seg[data-seg="theme3"] [data-theme-set="dark"],
html[data-theme-pref="system"] .cs-seg[data-seg="theme3"] [data-theme-set="system"] { color: rgb(var(--cs-fg)) !important; }

/* -------------------------------------------------- member card -------- */
/* Tier looks, shared by the full card and the account-menu strip */
.tier-basic { --mc-bg: linear-gradient(135deg, #475569 0%, #1e293b 55%, #0f172a 100%); --mc-accent: #cbd5e1; --mc-glow: rgba(148, 163, 184, 0.45); }
.tier-pro { --mc-bg: linear-gradient(135deg, #2563EB 0%, #7C3AED 55%, #06B6D4 100%); --mc-accent: #e0e7ff; --mc-glow: rgba(124, 58, 237, 0.55); }
.tier-family { --mc-bg: linear-gradient(135deg, #db2777 0%, #7C3AED 58%, #4338ca 100%); --mc-accent: #fce7f3; --mc-glow: rgba(219, 39, 119, 0.5); }
.tier-business { --mc-bg: linear-gradient(135deg, #1f2937 0%, #0b0f19 55%, #111827 100%); --mc-accent: #f5d27a; --mc-glow: rgba(245, 210, 122, 0.4); }
.cs-acct-strip { background: var(--mc-bg); }
.tier-business.cs-acct-strip { color: #f5d27a; }

.cs-mcard { width: 100%; max-width: 360px; aspect-ratio: 1.586; perspective: 1100px; cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; }
.cs-mcard-inner {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(calc(var(--ry, 0deg) + var(--flip, 0deg)));
  transition: transform 0.7s cubic-bezier(0.2, 0.9, 0.2, 1);
}
.cs-mcard:hover .cs-mcard-inner { transition: transform 0.15s ease-out; }
.cs-mcard.is-flipped { --flip: 180deg; }
.cs-mcard.is-flipped .cs-mcard-inner { transition: transform 0.7s cubic-bezier(0.2, 0.9, 0.2, 1); }
.cs-mcard:focus-visible .cs-mcard-inner { box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.35); border-radius: 20px; }
.cs-mcard { container-type: inline-size; }
.cs-mcard-face {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(14px, 6cqw, 20px) clamp(15px, 6.5cqw, 22px); border-radius: 20px; overflow: hidden; color: #fff;
  background: radial-gradient(120% 90% at 100% 0%, rgba(255, 255, 255, 0.18), transparent 50%), var(--mc-bg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 22px 44px -18px var(--mc-glow), 0 8px 18px -10px rgba(15, 23, 42, 0.45);
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.tier-business .cs-mcard-face { color: #f5d27a; }
.cs-mcard-back { transform: rotateY(180deg); justify-content: flex-start; }
/* Fine guilloché pattern + moving holographic shine */
.cs-mcard-face::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.16;
  background: repeating-radial-gradient(circle at 115% 120%, transparent 0 7px, rgba(255, 255, 255, 0.55) 7px 8px);
}
.cs-mcard-shine {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light;
  background: radial-gradient(60% 70% at var(--mx, 20%) var(--my, 10%), rgba(255, 255, 255, 0.75), transparent 60%),
    linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.35) 48%, rgba(186, 230, 253, 0.3) 52%, transparent 65%);
  background-size: 100% 100%, 250% 100%;
  animation: csHolo 6s ease-in-out infinite;
}
@keyframes csHolo { 0%, 100% { background-position: 0 0, 100% 0; } 50% { background-position: 0 0, 0% 0; } }
.cs-mcard-logo { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 9px; background: rgba(255, 255, 255, 0.2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); font-family: "Manrope", sans-serif; font-weight: 800; font-size: 14px; }
.cs-mcard-tier { border-radius: 999px; padding: 4px 10px; font-size: 9.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; background: rgba(255, 255, 255, 0.16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28); white-space: nowrap; }
.cs-mcard-crest { display: grid; place-items: center; width: 40px; height: 30px; border-radius: 8px; color: rgba(255, 255, 255, 0.95);
  background: linear-gradient(135deg, #fde68a, #f59e0b 45%, #fcd34d 70%, #d97706); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.6), inset 0 -1px 2px rgba(120, 53, 15, 0.35); }
.tier-basic .cs-mcard-crest { background: linear-gradient(135deg, #f1f5f9, #94a3b8 50%, #e2e8f0); color: #334155; }
.cs-mcard-no { font-family: "Manrope", ui-monospace, monospace; font-weight: 800; font-size: clamp(14px, 6.6cqw, 22px); letter-spacing: 0.16em; font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); white-space: nowrap; }
.cs-mcard-k { font-size: 9px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.72; }
.cs-mcard-v { font-family: "Manrope", sans-serif; font-weight: 800; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; }
.cs-mcard-stripe { flex-shrink: 0; height: clamp(22px, 9cqw, 32px); margin: calc(-1 * clamp(14px, 6cqw, 20px)) calc(-1 * clamp(15px, 6.5cqw, 22px)) clamp(8px, 3.5cqw, 12px); background: rgba(0, 0, 0, 0.55); }
.cs-mcard-back { justify-content: space-between; }
.cs-mcard-qr { flex-shrink: 0; width: clamp(48px, 21cqw, 74px); padding: 3px; border-radius: 9px; background: #fff; box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.4); }
.cs-mcard-qr svg { display: block; width: 100%; height: auto; border-radius: 5px; }
.cs-mcard-backno { white-space: nowrap; letter-spacing: 0.1em; font-size: clamp(10.5px, 4.3cqw, 13px); }
/* Narrow cards: the member number gets the whole bottom row */
@container (max-width: 300px) { .cs-mcard-note { display: none; } .cs-mcard-tier { padding: 3px 8px; font-size: 8.5px; letter-spacing: 0.1em; } }
/* Phone-narrow cards: the tier badge needs the room, so the logo stands alone */
@container (max-width: 270px) { .cs-mcard-word { display: none; } }

/* Small, front-only tier previews (Plan & billing → card tiers) */
.cs-tier-card { position: relative; aspect-ratio: 1.586; border-radius: 16px; overflow: hidden; color: #fff; padding: 12px 14px; display: flex; flex-direction: column; justify-content: space-between;
  background: radial-gradient(120% 90% at 100% 0%, rgba(255, 255, 255, 0.18), transparent 50%), var(--mc-bg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 16px 30px -16px var(--mc-glow); transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.2, 1); }
.cs-tier-card::before { content: ""; position: absolute; inset: 0; opacity: 0.14; background: repeating-radial-gradient(circle at 115% 120%, transparent 0 6px, rgba(255, 255, 255, 0.55) 6px 7px); }
.tier-business.cs-tier-card { color: #f5d27a; }
.cs-tier-pick:hover .cs-tier-card { transform: translateY(-3px) rotate(-1deg); }
.cs-tier-pick.is-yours { box-shadow: 0 0 0 2px var(--color-primary); background: rgb(37 99 235 / 0.06); }
.cs-tier-badge { align-self: flex-start; border-radius: 999px; padding: 3px 8px; font-size: 9px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; background: rgba(255, 255, 255, 0.92); color: #0f172a; }
.tier-business .cs-tier-badge { background: linear-gradient(135deg, #f5d27a, #d4a017); }
@media (prefers-reduced-motion: reduce) { .cs-mcard-shine, .cs-acct-strip::after { animation: none; } .cs-mcard-inner { transition: none; } }

/* -------------------------------------------------- landing sticky CTA - */
/* Slides up from behind the dock once you start scrolling (main.js) */
.cs-sticky-cta {
  position: fixed; left: 12px; right: 12px; z-index: 45;
  bottom: calc(var(--cs-dock-clear) + env(safe-area-inset-bottom));
  transform: translateY(calc(100% + 110px)); opacity: 0; pointer-events: none;
  transition: transform 0.6s cubic-bezier(0.2, 1.15, 0.3, 1), opacity 0.35s ease;
}
.cs-sticky-cta.is-visible { transform: none; opacity: 1; pointer-events: auto; }
@media (min-width: 768px) { .cs-sticky-cta { display: none; } }
@media (prefers-reduced-motion: reduce) { .cs-sticky-cta { transition: opacity 0.2s ease; } }

/* Guided tour (tour.js): a spotlight "hole" whose huge shadow dims
   everything else, plus a glass card that sits next to it */
.cs-tour { position: fixed; inset: 0; z-index: 150; }
.cs-tour-hole {
  position: fixed; pointer-events: none;
  box-shadow: 0 0 0 200vmax rgb(8 12 24 / 0.62), 0 0 0 3px rgba(255, 255, 255, 0.9), 0 0 0 9px rgba(124, 58, 237, 0.35);
  transition: left 0.45s cubic-bezier(0.2, 0.9, 0.2, 1), top 0.45s cubic-bezier(0.2, 0.9, 0.2, 1), width 0.45s cubic-bezier(0.2, 0.9, 0.2, 1), height 0.45s cubic-bezier(0.2, 0.9, 0.2, 1), border-radius 0.45s ease;
  animation: csTourIn 0.35s ease both;
}
.cs-tour-hole::after { content: ""; position: absolute; inset: -6px; border-radius: inherit; border: 2px solid rgba(124, 58, 237, 0.6); animation: csTourPulse 1.8s ease-out infinite; }
.cs-tour.is-center .cs-tour-hole::after { display: none; }
.cs-tour.is-center .cs-tour-hole { box-shadow: 0 0 0 200vmax rgb(8 12 24 / 0.62); }
.cs-tour-card { position: fixed; border-radius: 24px; padding: 18px; outline: none; transition: left 0.45s cubic-bezier(0.2, 0.9, 0.2, 1), top 0.45s cubic-bezier(0.2, 0.9, 0.2, 1); }
.cs-tour-card.is-in > * { animation: csTileIn 0.4s cubic-bezier(0.2, 1.2, 0.4, 1) both; }
.cs-tour-card kbd { border: 1px solid rgb(var(--cs-border)); border-radius: 6px; padding: 0 5px; font-size: 11px; font-weight: 700; background: rgb(var(--cs-muted)); color: rgb(var(--cs-fg)); }
.cs-tour-dot { height: 6px; width: 6px; border-radius: 99px; background: rgb(var(--cs-muted-fg) / 0.3); transition: width 0.3s ease, background 0.3s ease; }
.cs-tour-dot.is-past { background: rgb(var(--cs-muted-fg) / 0.6); }
.cs-tour-dot.is-on { width: 18px; background: var(--grad-brand); }
.cs-tour.is-leaving { opacity: 0; transition: opacity 0.25s ease; }
@keyframes csTourIn { from { opacity: 0; } }
@keyframes csTourPulse { 0% { opacity: 0.9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .cs-tour-hole, .cs-tour-card { transition: none; } .cs-tour-hole::after { animation: none; } }

/* Delete armed (first tap): a small shake so it's clearly waiting for a second tap */
.cs-arm { animation: csArm 0.4s ease; }
@keyframes csArm { 20%, 60% { transform: translateX(-3px); } 40%, 80% { transform: translateX(3px); } }
@media (prefers-reduced-motion: reduce) { .cs-arm { animation: none; } }

/* Policy pages in reader mode (?embed): just the document */
html.cs-embed [data-nav], html.cs-embed footer, html.cs-embed main aside, html.cs-embed details[data-mobile-toc], html.cs-embed body > section:first-of-type a[href="landing-page.html"] { display: none !important; }
html.cs-embed body > section:first-of-type { padding-top: 1.5rem !important; padding-bottom: 1rem !important; }
html.cs-embed body > section:first-of-type h1 { font-size: clamp(1.75rem, 7vw, 2.5rem); }
html.cs-embed main { padding-bottom: 2rem; }
html.cs-embed main > div { display: block; }

/* Receipt scanner sweep */
@keyframes csScan {
  0%, 100% { top: 0%; }
  50% { top: calc(100% - 4px); }
}
.cs-scanline { animation: csScan 1.6s ease-in-out infinite; }

/* Print: reports and statements print without app chrome */
@media print {
  [data-sidebar], [data-nav], [data-fab], [data-fab-menu], nav, [data-app-banner], [data-app-top], [data-more-sheet], .no-print { display: none !important; }
  body { background: #fff !important; padding: 0 !important; }
  .reveal { opacity: 1 !important; animation: none !important; }
  .shadow-card, .shadow-float { box-shadow: none !important; }
}

/* ==========================================================================
   Dark mode
   Tokens flip automatically (bg-background, text-foreground, bg-muted,
   border…). These rules cover utilities with fixed colours that the pages
   use for surfaces, status pills and overlays.
   ========================================================================== */
.dark { color-scheme: dark; }

/* Surfaces: white cards & panels become dark cards. Low-opacity white
   (bg-white/10–25) stays: it's used as a highlight on gradient cards. */
.dark .bg-white, .dark .hover\:bg-white:hover, .dark .peer:checked ~ .peer-checked\:bg-white,
.dark .lg\:bg-white { background-color: rgb(var(--cs-card)); }
.dark .bg-white\/98, .dark .bg-white\/95 { background-color: rgb(var(--cs-card) / 0.95); }
.dark .bg-white\/90, .dark .bg-white\/85 { background-color: rgb(var(--cs-card) / 0.88); }
.dark .bg-white\/80, .dark .bg-white\/70, .dark .lg\:bg-white\/70 { background-color: rgb(var(--cs-card) / 0.75); }
.dark .bg-white\/60 { background-color: rgb(var(--cs-card) / 0.6); }
@media (min-width: 1024px) { .dark .lg\:bg-white\/70 { background-color: rgb(var(--cs-card) / 0.75); } }
.dark .ring-white { --tw-ring-color: rgb(var(--cs-card)); }
.dark .border-white:not([class*="border-white/"]) { border-color: rgb(var(--cs-card)); }

.dark .glass { background: rgb(var(--cs-card) / 0.6); border-color: rgb(255 255 255 / 0.06); }
.dark .card-soft { background: rgb(var(--cs-card) / 0.85); }

/* "Inverted" elements (dark buttons, active chips, toasts) flip to light-on-dark */
.dark .bg-foreground:not([class*="bg-foreground/"]), .dark .peer:checked ~ .peer-checked\:bg-foreground { background-color: #F1F5F9; }
.dark .bg-foreground.text-white, .dark .bg-foreground .text-white, .dark .peer:checked ~ .peer-checked\:text-white,
.dark .bg-foreground.hover\:text-white:hover { color: #0F172A; }
/* Backdrops stay dark */
.dark .bg-foreground\/20 { background-color: rgb(0 0 0 / 0.3); }
.dark .bg-foreground\/40 { background-color: rgb(0 0 0 / 0.6); }
.dark .bg-foreground\/70 { background-color: rgb(0 0 0 / 0.75); }
.dark .ring-foreground { --tw-ring-color: #E2E8F0; }

/* Brighter brand & status text for contrast on dark surfaces */
.dark .text-primary, .dark .hover\:text-primary:hover, .dark .group:hover .group-hover\:text-primary, .dark .lg\:text-primary { color: #60A5FA; }
.dark .text-violet { color: #A78BFA; }
.dark .text-success, .dark .peer:checked ~ .peer-checked\:text-success { color: #34D399; }
.dark .text-destructive, .dark .hover\:text-destructive:hover, .dark .peer:checked ~ .peer-checked\:text-destructive { color: #F87171; }
.dark .text-cyan { color: #22D3EE; }
.dark .text-emerald-600 { color: #34D399; }

/* Amber / yellow "pending" and warning pills */
.dark .bg-yellow-50, .dark .bg-amber-50 { background-color: rgb(245 158 11 / 0.1); }
.dark .bg-yellow-100, .dark .bg-amber-100 { background-color: rgb(245 158 11 / 0.16); }
.dark .text-yellow-600, .dark .text-amber-600, .dark .text-amber-500 { color: #FBBF24; }
.dark .text-yellow-700, .dark .text-amber-700, .dark .text-amber-800, .dark .text-yellow-900 { color: #FCD34D; }
.dark .border-yellow-200, .dark .border-amber-200 { border-color: rgb(245 158 11 / 0.3); }
.dark .bg-slate-200 { background-color: #334155; }
.dark .bg-slate-300 { background-color: #475569; }

/* Shadows read better slightly deeper on dark */
.dark .shadow-card { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px -8px rgba(0, 0, 0, 0.45); }
.dark .shadow-float { box-shadow: 0 20px 60px -15px rgba(0, 0, 0, 0.7), 0 8px 30px -10px rgba(0, 0, 0, 0.5); }

.dark .skeleton { background: linear-gradient(90deg, #1E293B 0%, #273449 50%, #1E293B 100%); background-size: 800px 100%; }
.dark .logo-mark { box-shadow: 0 8px 24px -4px rgba(37, 99, 235, 0.45); }
.dark input::placeholder, .dark textarea::placeholder { color: rgb(var(--cs-muted-fg) / 0.8); }
.dark input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0.8); }
.dark select option { background: rgb(var(--cs-card)); color: rgb(var(--cs-fg)); }
.dark kbd { background: rgb(var(--cs-muted)); }

/* Theme toggle icon: moon in light mode, sun in dark mode */
.cs-theme-sun { display: none; }
.dark .cs-theme-sun { display: inline-block; }
.dark .cs-theme-moon { display: none; }

/* Printing is always light */
@media print {
  html.dark { --cs-bg: 255 255 255; --cs-fg: 15 23 42; --cs-card: 255 255 255; --cs-muted: 241 245 249; --cs-muted-fg: 100 116 139; --cs-border: 226 232 240; }
}

/* Small on/off pill used by the sidebar "Dark mode" row */
.cs-mini-switch { position: relative; width: 34px; height: 20px; border-radius: 999px; background: rgb(var(--cs-border)); transition: background 0.2s ease; flex-shrink: 0; }
.cs-mini-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1); }
.dark .cs-mini-switch { background: var(--grad-brand); }
.dark .cs-mini-switch::after { transform: translateX(14px); }
/* Same pill for the "Liquid glass" switch (on = liquid) */
html[data-glass="liquid"] .cs-mini-switch.is-glass { background: var(--grad-brand); }
html[data-glass="liquid"] .cs-mini-switch.is-glass::after { transform: translateX(14px); }
html[data-glass="frosted"] .cs-mini-switch.is-glass { background: rgb(var(--cs-border)); }
html[data-glass="frosted"] .cs-mini-switch.is-glass::after { transform: none; }
/* Focus/highlight ring offsets match the surface instead of a white halo */
.dark *, .dark ::before, .dark ::after { --tw-ring-offset-color: rgb(var(--cs-card)); }