/* Fraunces — must come BEFORE any other declaration per CSS spec */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,800&display=swap');

/* ============================================================
   Deluxe Nail Spa Financial Tracker
   Design Overlay v1 — "Ledger & Lacquer with Liquid Chrome"

   Synthesized from three exploration passes:
   - design-shotgun (Polished Ledger + Lacquer DNA)
   - ui-ux-design-pro (Ledger & Lacquer: trust + hierarchy + a11y)
   - liquid-glass-design (glass ONLY on chrome, never on data)

   Loaded AFTER the Tailwind CDN script in index.html, so utility
   classes can be overridden by selector specificity + !important.
   ============================================================ */

/* ---------- 1. TOKEN SYSTEM ---------- */
:root {
  /* Canvas — warm parchment, not cool gray */
  --ll-bg:            #fbf8f4;
  --ll-surface-1:     #ffffff;          /* data cards, calm */
  --ll-surface-2:     #f4efe7;          /* nested rows on hover */
  --ll-hairline:      #ece3d0;          /* card borders */
  --ll-hairline-soft: rgba(28,25,23,.06);

  /* Ink — warm near-blacks */
  --ll-ink-900:       #1c1917;
  --ll-ink-700:       #44403c;
  --ll-ink-500:       #57534e;
  --ll-ink-400:       #78716c;          /* tertiary, passes AA on bg */

  /* Brand */
  --ll-brand-700:     #1f4a37;
  --ll-brand-600:     #2d6a4f;          /* preserved heritage emerald */
  --ll-brand-500:     #4f8a6f;
  --ll-brand-100:     #e5efe9;

  /* Semantic — used ONLY for status */
  --ll-gain-700:      #14532d;
  --ll-gain-600:      #15803d;
  --ll-loss-700:      #7f1d1d;
  --ll-loss-600:      #9d0208;          /* preserved crimson */
  --ll-loss-100:      #fdecec;
  --ll-warn:          #b08440;

  /* Accent — copper for celebration moments (top earner, milestones) */
  --ll-copper-600:    #b45309;
  --ll-copper-500:    #d4a574;

  /* Glass — chrome only */
  --ll-glass-strong:  rgba(255,253,247,.78);
  --ll-glass-medium:  rgba(255,253,247,.58);
  --ll-glass-border:  rgba(255,255,255,.65);
  --ll-glass-shadow:  0 1px 0 rgba(255,255,255,.95) inset, 0 12px 32px -16px rgba(31,74,55,.18);
  --ll-glass-blur:    blur(24px) saturate(180%);

  /* Focus */
  --ll-focus:         #2d6a4f;
  --ll-focus-ring:    0 0 0 2px var(--ll-bg), 0 0 0 4px var(--ll-focus);

  /* Radii */
  --ll-r-card:        14px;
  --ll-r-chip:        8px;
  --ll-r-pill:        999px;

  /* Type */
  --ll-font-display:  "Fraunces", "Cormorant Garamond", Georgia, serif;
  --ll-font-ui:       "Inter", -apple-system, system-ui, sans-serif;
  --ll-font-num:      "Inter", -apple-system, system-ui, sans-serif;

  color-scheme: light;

  /* ---- OVERRIDE the bundle's inline tokens so .glass-button-*, etc. pick them up ---- */
  --sw-pink:   #2d6a4f;   /* repurpose: any "pink" surface becomes brand emerald */
  --sw-red:    #9d0208;   /* keep crimson for true loss/danger */
  --sw-orange: #b45309;   /* copper for celebration */
  --sw-yellow: #b45309;   /* same */
}

/* ---------- 1b. CUSTOM "GLASS-BUTTON" CLASSES from inline style block ---------- */
/* The bundle defines .glass-button-pink, .glass-button-red, .glass-button-green
   in index.html's <style> block. Override them to match our semantic palette. */
.glass-button-pink {
  background-color: var(--ll-brand-600) !important;
  border-color: var(--ll-brand-700) !important;
  color: #fff !important;
}
.glass-button-pink:hover {
  background-color: var(--ll-brand-700) !important;
}
.glass-button-red {
  background-color: var(--ll-loss-600) !important;
  border-color: var(--ll-loss-700) !important;
  color: #fff !important;
}
.glass-button-red:hover {
  background-color: var(--ll-loss-700) !important;
}
.glass-button-green {
  background-color: var(--ll-brand-600) !important;
  border-color: var(--ll-brand-700) !important;
  color: #fff !important;
}
.glass-button-green:hover {
  background-color: var(--ll-brand-700) !important;
}

/* ---------- 2. GLOBAL DEFAULTS ---------- */
body {
  background: var(--ll-bg) !important;
  color: var(--ll-ink-900);
  font-family: var(--ll-font-ui);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01" 1, "cv11" 1;
}

/* All numbers get tabular lining numerals */
[class*="text-"][class*="font-black"],
[class*="text-"][class*="font-bold"],
[class*="text-xl"], [class*="text-2xl"], [class*="text-3xl"],
[class*="text-4xl"], [class*="text-5xl"], [class*="text-6xl"],
.kpi-num, .tab-num {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1, "ss01" 1;
}

/* Globally lift the failing label colors to AA-passing values */
.text-gray-400 { color: var(--ll-ink-400) !important; }    /* was #9ca3af 2.85:1 */
.text-gray-500 { color: var(--ll-ink-500) !important; }
.text-gray-600, .text-gray-700, .text-gray-800, .text-gray-900 { color: var(--ll-ink-900) !important; }

/* Darken the pink — only used for active CTAs */
.bg-pink-500, .bg-pink-600 { background-color: var(--ll-brand-600) !important; }
.text-pink-500, .text-pink-600 { color: #be185d !important; }

/* AI brain icon was leaking magenta against the otherwise-emerald palette.
   Reroute to copper — the celebration/highlight accent — so the audit prompt
   feels like a feature spotlight rather than a stray brand. */
i.fa-brain.text-pink-500, i.fa-brain.text-pink-600,
i.fa-brain[class*="text-pink"], i.fa-brain[class*="text-rose"] {
  color: var(--ll-copper-600) !important;
}

/* Tiny text on .text-gray-400 was at 4.53:1 (AA floor for 16px+, fail for <14px).
   Promote any <14px element with .text-gray-400 to ink-500 (7.21:1). */
.text-gray-400[class*="text-xs"],
.text-gray-400[class*="text-[10px]"],
.text-gray-400[class*="text-[11px]"],
.text-gray-400[class*="text-[12px]"],
.text-gray-400[class*="text-[13px]"] {
  color: var(--ll-ink-500) !important;
}

/* Focus-visible globally — Tailwind's default ring is inconsistent across the bundle */
*:focus { outline: none; }
*:focus-visible {
  outline: 2px solid var(--ll-focus) !important;
  outline-offset: 2px !important;
  border-radius: var(--ll-r-chip);
}

/* ---------- 3. BACKGROUND SYSTEM ---------- */
/* Kill the existing blob animation entirely. The new canvas is a quiet
   parchment with a single subtle warm wash — not a candy-pastel blob field. */
.background-container { background: var(--ll-bg) !important; }
.background-container .blob,
.blob, .blob-1, .blob-2, .blob-3, .blob-4, .blob-5, .blob-6, .blob-7,
.animate-blob {
  display: none !important;
  animation: none !important;
}
/* Replace with a low-saturation mesh — gives glass something to refract */
.background-container::after {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60rem 60rem at 12% 8%,  rgba(45,106,79,.07), transparent 60%),
    radial-gradient(48rem 48rem at 92% 18%, rgba(180,83,9,.05),  transparent 60%),
    radial-gradient(40rem 40rem at 50% 96%, rgba(45,106,79,.04), transparent 60%);
  filter: blur(30px);
}

/* ---------- 4. CARDS / DATA SURFACES (solid, calm) ---------- */
/* Anything that's a data card stays solid white with a 1px hairline.
   Glass goes on chrome only.
   EXCLUDE: nav (glass chrome), .rounded-full (the hero disc), header chrome. */
[class*="bg-white/"][class*="rounded-2xl"]:not([class*="rounded-full"]):not(nav):not(nav *),
[class*="bg-white/"][class*="rounded-3xl"]:not([class*="rounded-full"]):not(nav):not(nav *),
[class*="rounded-2xl"][class*="bg-white"]:not([class*="rounded-full"]):not(nav):not(nav *),
[class*="rounded-3xl"][class*="bg-white"]:not([class*="rounded-full"]):not(nav):not(nav *),
[class*="bg-white/"][class*="rounded-xl"]:not([class*="rounded-full"]):not(nav):not(nav *) {
  background: var(--ll-surface-1) !important;
  border: 1px solid var(--ll-hairline) !important;
  box-shadow: 0 1px 2px rgba(28,25,23,.04), 0 1px 0 rgba(28,25,23,.03) inset !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius: var(--ll-r-card) !important;
}

/* ---------- 5. HEADER (glass chrome) ---------- */
header, .app-header, [class*="z-10"][class*="px-6"][class*="py-4"] > .flex.items-center.justify-between {
  background: linear-gradient(180deg, var(--ll-glass-strong), var(--ll-glass-medium)) !important;
  -webkit-backdrop-filter: var(--ll-glass-blur);
  backdrop-filter: var(--ll-glass-blur);
  border-bottom: 1px solid var(--ll-hairline) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 8px 24px -20px rgba(28,25,23,.12);
}
@supports not (backdrop-filter: blur(1px)) {
  header { background: rgba(255,253,247,.96) !important; }
}

/* Year selector — quiet, not playful */
[class*="ACTIVE YEAR"], [class*="active year"] {
  font-family: var(--ll-font-ui) !important;
  letter-spacing: .12em !important;
  color: var(--ll-ink-400) !important;
}

/* Cursive Deluxe logo — preserved, but ensure the green is on-token */
[class*="font-['Great_Vibes']"], h1:has(+ *:contains("NAIL SPA")) {
  color: var(--ll-brand-700) !important;
}

/* ---------- 6. HERO — Net Performance disc ---------- */
/* Strategy: keep the disc shape (iconic, centered, recognizable),
   but treat it as REAL glass and let the number wear semantic color. */

/* The inner disc — make it actual liquid glass, not tracing paper */
.absolute.inset-1\.5.rounded-full.bg-white\/50.backdrop-blur-xl,
.relative.flex.items-center.justify-center.w-48.h-48 > .rounded-full,
[class*="rounded-full"][class*="backdrop-blur-xl"][class*="bg-white"] {
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.92), rgba(255,253,247,.55) 60%),
    radial-gradient(circle at 75% 85%, rgba(157,2,8,.10),       transparent 65%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(190%);
  backdrop-filter: blur(28px) saturate(190%);
  border: 1px solid rgba(255,255,255,.75) !important;
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,.95),
    inset 0 -10px 28px rgba(157,2,8,.10),
    0 28px 60px -22px rgba(31,74,55,.25),
    0 6px 14px -6px rgba(28,25,23,.08) !important;
}
@supports not (backdrop-filter: blur(1px)) {
  .relative.flex.items-center.justify-center.w-48.h-48 > .rounded-full {
    background: radial-gradient(circle at 30% 25%, #ffffff, var(--ll-loss-100) 75%) !important;
  }
}

/* Make the disc a touch larger — currently w-48 (12rem). The number is the page. */
.relative.flex.items-center.justify-center.w-48.h-48 {
  width: 18rem !important;
  height: 18rem !important;
}

/* The "NET PERFORMANCE" eyebrow inside the disc */
.relative.flex.items-center.justify-center.w-48.h-48 [class*="uppercase"] {
  color: var(--ll-ink-500) !important;
  letter-spacing: .14em !important;
  font-family: var(--ll-font-ui) !important;
}

/* The hero KPI number — semantic color, display weight.
   Capped at 56px so the parenthetical loss notation fits inside the 288px disc.
   ONLY target the .text-3xl number, not the .font-black eyebrow above it.
   Default color is loss (since parens "($...)" is the common case); the rule
   below switches to gain when the number is positive (no parens). */
.text-3xl.font-black.text-gray-900.drop-shadow-sm.tracking-tighter {
  font-family: var(--ll-font-display) !important;
  font-weight: 800 !important;
  font-size: clamp(40px, 4.4vw, 56px) !important;
  letter-spacing: -.025em !important;
  line-height: 1 !important;
  color: var(--ll-loss-600) !important;
  text-shadow: none !important;
}
/* Positive (gain) hero — flipped via JS by adding [data-ll-positive="1"] */
.text-3xl.font-black.text-gray-900.drop-shadow-sm.tracking-tighter[data-ll-positive="1"] {
  color: var(--ll-gain-700) !important;
}

/* Eyebrow inside the disc ("NET PERFORMANCE") stays UI font, small caps */
.relative.flex.items-center.justify-center.w-48.h-48 [class*="uppercase"],
.relative.flex.items-center.justify-center.w-48.h-48 [class*="tracking-wider"] {
  font-family: var(--ll-font-ui) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  color: var(--ll-ink-500) !important;
}

/* If the value is positive (no leading parens), this rule won't match;
   add a class hook on positive elsewhere if needed. */

/* ---------- 7. REVENUE / EXPENSE PILL — proportional ratio bar ---------- */
/* The pill container in the bundle: .flex.w-full.mb-6.bg-white/50.border... */
.flex.w-full.mb-6.bg-white\/50.border.border-white\/70.rounded-2xl.overflow-hidden.shadow-sm.backdrop-blur-md {
  background: var(--ll-surface-1) !important;
  border: 1px solid var(--ll-hairline) !important;
  backdrop-filter: none !important;
  border-radius: var(--ll-r-card) !important;
  box-shadow: 0 1px 2px rgba(28,25,23,.04) !important;
  position: relative;
  overflow: visible !important;
}

/* Cells: keep equal-width for now (we can't compute the real ratio without
   reading React state), but make the visual encoding clearer: revenue =
   emerald-tinted left half, expenses = warm-loss right half, with a
   centerline break-even tick. */
.flex.w-full.mb-6.bg-white\/50 > .flex-1:first-child {
  background: linear-gradient(180deg, rgba(45,106,79,.04), transparent) !important;
  border-right: 1px solid var(--ll-hairline) !important;
}
.flex.w-full.mb-6.bg-white\/50 > .flex-1:last-child {
  background: linear-gradient(180deg, rgba(157,2,8,.04), transparent) !important;
}

/* Pill labels — lift to brand semantic, drop the sky/rose tailwind defaults */
.text-\[10px\].font-black.text-sky-800.tracking-widest,
.flex.flex-col.items-center .text-sky-800.uppercase {
  color: var(--ll-brand-700) !important;
  letter-spacing: .14em !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}
.text-\[10px\].font-black.text-rose-800.tracking-widest,
.flex.flex-col.items-center .text-rose-800.uppercase {
  color: var(--ll-loss-700) !important;
  letter-spacing: .14em !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

/* Pill value numerals — INTER 800 (not Fraunces). Let the hero own the serif.
   Tabular nums + tight tracking for ledger discipline. */
.text-xl.font-black.text-sky-600 {
  color: var(--ll-brand-600) !important;
  font-family: var(--ll-font-ui) !important;
  font-weight: 800 !important;
  font-size: clamp(20px, 4.4vw, 28px) !important;
  letter-spacing: -.025em !important;
  white-space: nowrap;
  font-variant-numeric: tabular-nums lining-nums;
}
.text-xl.font-black.text-rose-600,
.text-xl.font-black.text-red-600 {
  color: var(--ll-loss-600) !important;
  font-family: var(--ll-font-ui) !important;
  font-weight: 800 !important;
  font-size: clamp(20px, 4.4vw, 28px) !important;
  letter-spacing: -.025em !important;
  white-space: nowrap;
  font-variant-numeric: tabular-nums lining-nums;
}

/* Crimson left edge on the expense cell — encodes "this side is the problem"
   in pre-attentive vision even when the geometry is 50/50. The JS hook in
   index.html drives the actual flex ratio at runtime. */
.flex.w-full.mb-6.bg-white\/50 > .flex-1:last-child,
[class*="rounded-xl"][class*="bg-white"] > .flex-1:last-child:has(.text-rose-600),
[class*="rounded-2xl"] > .flex.w-full > .flex-1:last-child:has(.text-rose-600) {
  box-shadow: inset 3px 0 0 var(--ll-loss-600) !important;
  background: linear-gradient(180deg, rgba(157,2,8,.08), rgba(157,2,8,.02)) !important;
}

/* ---------- 8. CATEGORY ROWS (Revenue Breakdown / Expense Breakdown) ---------- */
/* Each row gets a calm hover state with the warm surface-2 wash */
[class*="rounded-2xl"] > [class*="space-y-"], [class*="rounded-3xl"] > [class*="space-y-"] {
  /* container — no change */
}
[class*="rounded-xl"][class*="bg-white"][class*="flex"][class*="justify-between"]:hover,
[class*="rounded-lg"][class*="bg-white"][class*="flex"][class*="justify-between"]:hover {
  background: var(--ll-surface-2) !important;
  transition: background 140ms ease;
}

/* Section eyebrows ("REVENUE BREAKDOWN", "EXPENSE BREAKDOWN") */
[class*="uppercase"][class*="tracking-wider"],
[class*="uppercase"][class*="tracking-widest"] {
  font-family: var(--ll-font-ui) !important;
  font-size: 11px !important;
  letter-spacing: .14em !important;
  font-weight: 700 !important;
  color: var(--ll-ink-500) !important;
}

/* ---------- 9. BOTTOM NAV (glass chrome) ---------- */
nav.fixed.bottom-0.w-full.bg-white\/70.backdrop-blur-xl.border-t.border-gray-200,
nav.fixed.bottom-0,
nav[class*="fixed"][class*="bottom-0"] {
  background: linear-gradient(180deg, var(--ll-glass-medium), var(--ll-glass-strong)) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  border-top: 1px solid var(--ll-hairline) !important;
  border-radius: 16px 16px 0 0 !important;
  box-shadow:
    0 -1px 0 rgba(255,255,255,.9) inset,
    0 -12px 32px -16px rgba(31,74,55,.16) !important;
}
@supports not (backdrop-filter: blur(1px)) {
  nav.fixed.bottom-0 { background: rgba(255,253,247,.97) !important; }
}

/* Nav tab labels — calmer, brand-color when active */
nav button .text-\[10px\], nav button [class*="text-xs"] {
  letter-spacing: .08em !important;
  font-size: 10px !important;
  font-weight: 600 !important;
}

/* Mobile nav: keep position:fixed (do NOT override to relative — that breaks
   viewport pinning and the nav scrolls with content).
   Apply the fade-mask scroll affordance to the inner scrolling child only. */
nav.fixed.bottom-0 {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  transform: none !important;
  /* Block any scroll-triggered slide/hide animation from the bundle */
  transition: background 200ms ease, box-shadow 200ms ease !important;
}
/* No mask — with only 6 tabs (Tax + AI Advisor removed) all fit on mobile. */
nav.fixed.bottom-0 > * {
  mask-image: none;
  -webkit-mask-image: none;
}
/* Tighten tab min-width on mobile so all 6 labels read fully on 375px */
@media (max-width: 480px) {
  nav.fixed.bottom-0 button[class*="min-w-"] {
    min-width: 56px !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
}

/* Active nav tab — emerald foreground AND emerald wash background */
nav button[class*="text-pink"],
nav button[class*="text-rose"],
nav button.active,
nav button[aria-current] {
  color: var(--ll-brand-600) !important;
}
nav button[class*="text-pink"] *, nav button[class*="text-rose"] * {
  color: var(--ll-brand-600) !important;
}
nav button[class*="bg-pink-100"], nav button[class*="bg-rose-100"],
nav button[class*="bg-pink-100/"], nav button[class*="bg-rose-100/"] {
  background-color: var(--ll-brand-100) !important;
  border-color: rgba(45,106,79,.18) !important;
  /* 2px brand top-stripe = clearer "you are here" wayfinding */
  box-shadow: inset 0 2px 0 var(--ll-brand-600), 0 1px 2px rgba(45,106,79,.06), inset 0 1px 0 rgba(255,255,255,.5) !important;
}

/* ---------- 10. CTA — "RUN AI 3.5 PLATINUM AUDIT" ---------- */
/* Demote the gradient shouting CTA into a quieter ghost-emerald button.
   It's a secondary action — should not outshout the numbers.
   The actual CTA uses bg-gradient-to-br from-sky-500 to-blue-700 — also
   demote purple/pink/fuchsia in case other CTAs use them elsewhere. */
button[class*="from-sky"], button[class*="from-blue"],
button[class*="from-purple"], button[class*="from-pink"], button[class*="from-fuchsia"],
button[class*="bg-gradient-to-"][class*="from-sky"],
button[class*="bg-gradient-to-"][class*="from-blue"],
button[class*="bg-gradient-to-"][class*="from-purple"],
button[class*="bg-gradient-to-"][class*="from-fuchsia"] {
  background: var(--ll-surface-1) !important;
  background-image: none !important;
  border: 1px solid var(--ll-brand-600) !important;
  color: var(--ll-brand-600) !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  box-shadow: 0 1px 2px rgba(28,25,23,.04) !important;
  transition: background 160ms ease, color 160ms ease;
}
button[class*="from-sky"]:hover, button[class*="from-blue"]:hover,
button[class*="from-purple"]:hover, button[class*="from-pink"]:hover,
button[class*="from-fuchsia"]:hover {
  background: var(--ll-brand-600) !important;
  color: #fff !important;
}
button[class*="from-sky"] *, button[class*="from-blue"] *,
button[class*="from-purple"] *, button[class*="from-pink"] *, button[class*="from-fuchsia"] * {
  color: var(--ll-brand-600) !important;
}
button[class*="from-sky"]:hover *, button[class*="from-blue"]:hover *,
button[class*="from-purple"]:hover *, button[class*="from-pink"]:hover * {
  color: #fff !important;
}

/* Constrain demoted CTA to button shape (was 199px-tall ghost panel).
   Original kept "from-sky-500 to-blue-700" wrapper at p-8 — strip it back. */
button[class*="from-sky"],
button[class*="from-blue"],
button[class*="from-purple"],
button[class*="from-pink"],
button[class*="from-fuchsia"] {
  max-width: 480px !important;
  margin-inline: auto !important;
  padding: 14px 28px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  min-height: auto !important;
}
/* Shrink any inner display-size heading inside the demoted CTA */
button[class*="from-sky"] [class*="text-2xl"],
button[class*="from-blue"] [class*="text-2xl"],
button[class*="from-purple"] [class*="text-2xl"],
button[class*="from-sky"] [class*="text-3xl"],
button[class*="from-blue"] [class*="text-3xl"] {
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}
button[class*="from-sky"] p,
button[class*="from-blue"] p {
  font-size: 12px !important;
  margin: 0 !important;
}
/* Trim icons in the demoted CTA */
button[class*="from-sky"] i,
button[class*="from-blue"] i,
button[class*="from-sky"] svg,
button[class*="from-blue"] svg {
  font-size: 16px !important;
  width: 16px !important;
  height: 16px !important;
}

/* ---------- 11. CHART AREA — better contrast ---------- */
/* Catch BOTH the rose/pink expense lines AND the emerald-10b981 revenue line.
   Earlier overlay only caught expense path; revenue stayed default-weight. */
svg path[stroke="#ec4899"], svg path[stroke="#f43f5e"], svg path[stroke="#dc2626"],
svg path[stroke="#e11d48"], svg path[stroke="#be123c"] {
  stroke: var(--ll-loss-600) !important;
  stroke-width: 2 !important;
}
svg path[stroke="#10b981"], svg path[stroke="#059669"], svg path[stroke="#22c55e"] {
  stroke: var(--ll-brand-600) !important;
  stroke-width: 2 !important;
}

/* Bump area-fill opacity so the chart actually carries weight */
svg path[fill^="rgba(236, 72"], svg path[fill^="rgba(244, 63"], svg path[fill^="rgba(220, 38"] {
  opacity: .22 !important;
}
svg path[fill^="url(#colorRevenue)"], svg path[fill^="url(#colorExpense)"],
svg path[fill^="url(#color"], svg path[fill^="url(#fill"] {
  fill-opacity: .25 !important;
}

/* Y-axis gridlines, ticks */
svg line[stroke="#e5e7eb"], svg .recharts-cartesian-grid line {
  stroke: var(--ll-hairline) !important;
  stroke-dasharray: 2 4 !important;
}
svg .recharts-text, svg text[fill="#6b7280"] {
  fill: var(--ll-ink-500) !important;
  font-family: var(--ll-font-ui) !important;
  font-size: 11px !important;
}

/* ---------- 12. ICON CHIPS in category rows ---------- */
/* The colored square chips next to category names use 8 pastel colors.
   Calm them to 3 functional tints: brand for revenue, loss for expenses,
   copper for the rest. */
.bg-sky-100, .bg-blue-100, .bg-cyan-100, .bg-teal-100 {
  background-color: var(--ll-brand-100) !important;
}
.text-sky-600, .text-blue-600, .text-cyan-600, .text-teal-600 {
  color: var(--ll-brand-600) !important;
}
.bg-rose-100, .bg-red-100, .bg-pink-100, .bg-orange-100 {
  background-color: var(--ll-loss-100) !important;
}
.text-rose-600, .text-red-600, .text-pink-600, .text-orange-600 {
  color: var(--ll-loss-600) !important;
}
.bg-amber-100, .bg-yellow-100 {
  background-color: rgba(180,83,9,.10) !important;
}
.text-amber-600, .text-yellow-600 {
  color: var(--ll-copper-600) !important;
}

/* ---------- 13. INTERACTION POLISH ---------- */
button, [role="button"] {
  transition: background 140ms ease, color 140ms ease, transform 80ms ease, box-shadow 140ms ease;
}
button:active, [role="button"]:active {
  transform: scale(.98);
}

/* ---------- 14. REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .blob, .animate-blob { animation: none !important; }
}

/* (Fraunces @import moved to top of file — per CSS spec it must precede all other rules) */

/* ============================================================
   17b. PERIOD CALENDAR — Payroll-style month picker on dashboard
   ============================================================ */
.ll-calendar {
  background: var(--ll-surface-1);
  border: 1px solid var(--ll-hairline);
  border-radius: var(--ll-r-card);
  box-shadow: 0 1px 2px rgba(28,25,23,.04), 0 1px 0 rgba(28,25,23,.03) inset;
  padding: 20px 22px;
  margin-bottom: 24px;
  margin-top: 4px;
}
.ll-cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.ll-cal-eyebrow {
  font-family: var(--ll-font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--ll-ink-500);
  text-transform: uppercase;
}
.ll-cal-fullyear {
  font-family: var(--ll-font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ll-brand-600);
  background: transparent;
  border: 1px solid var(--ll-brand-600);
  border-radius: var(--ll-r-chip);
  padding: 6px 12px;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.ll-cal-fullyear:hover { background: var(--ll-brand-600); color: #fff; }
.ll-cal-fullyear-active {
  background: var(--ll-brand-600) !important;
  color: #fff !important;
}
.ll-cal-year {
  text-align: center;
  font-family: var(--ll-font-ui);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .18em;
  color: var(--ll-ink-900);
  margin: 6px 0 16px;
  font-variant-numeric: tabular-nums;
}
.ll-cal-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}
@media (max-width: 520px) {
  .ll-cal-grid { grid-template-columns: repeat(3, 1fr); }
}
.ll-cal-month {
  font-family: var(--ll-font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ll-ink-500);
  background: var(--ll-surface-2);
  border: 1px solid transparent;
  border-radius: var(--ll-r-pill);
  padding: 10px 6px;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease, transform 80ms ease;
}
.ll-cal-month:hover { background: var(--ll-brand-100); color: var(--ll-brand-700); }
.ll-cal-month:active { transform: scale(.97); }
.ll-cal-active {
  background: var(--ll-brand-600) !important;
  color: #fff !important;
  border-color: var(--ll-brand-700) !important;
  box-shadow: 0 1px 2px rgba(45,106,79,.18) !important;
}

/* ============================================================
   17. CASH FLOW CARD — injected by JS into the dashboard
   ============================================================ */
.ll-cashflow-card {
  background: var(--ll-surface-1);
  border: 1px solid var(--ll-hairline);
  border-radius: var(--ll-r-card);
  box-shadow: 0 1px 2px rgba(28,25,23,.04), 0 1px 0 rgba(28,25,23,.03) inset;
  padding: 20px 22px;
  margin-bottom: 24px;
  margin-top: 4px;
}
.ll-cf-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.ll-cf-eyebrow {
  font-family: var(--ll-font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--ll-ink-500);
  text-transform: uppercase;
}
.ll-cf-month {
  appearance: none;
  -webkit-appearance: none;
  font-family: var(--ll-font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--ll-ink-700);
  background: var(--ll-surface-2);
  border: 1px solid var(--ll-hairline);
  border-radius: var(--ll-r-chip);
  padding: 6px 28px 6px 12px;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%2357534e' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
.ll-cf-month:focus-visible {
  outline: 2px solid var(--ll-focus);
  outline-offset: 2px;
}
.ll-cf-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1px;
  background: var(--ll-hairline);
  border-radius: var(--ll-r-chip);
  overflow: hidden;
  border: 1px solid var(--ll-hairline);
}
@media (max-width: 480px) {
  .ll-cf-grid { grid-template-columns: 1fr; gap: 1px; }
}
.ll-cf-tile {
  background: var(--ll-surface-1);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
}
.ll-cf-label {
  font-family: var(--ll-font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--ll-ink-500);
  text-transform: uppercase;
}
.ll-cf-value {
  font-family: var(--ll-font-ui);
  font-size: clamp(22px, 4vw, 28px);
  font-weight: 800;
  letter-spacing: -.025em;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  color: var(--ll-ink-900);
  white-space: nowrap;
  margin-top: 2px;
}
.ll-cf-sub {
  font-family: var(--ll-font-ui);
  font-size: 11px;
  font-weight: 500;
  color: var(--ll-ink-400);
}

/* Semantic accents */
.ll-cf-in .ll-cf-value { color: var(--ll-brand-600); }
.ll-cf-out .ll-cf-value { color: var(--ll-loss-600); }
.ll-cf-diff.ll-cf-loss .ll-cf-value { color: var(--ll-loss-600); }
.ll-cf-diff.ll-cf-gain .ll-cf-value { color: var(--ll-gain-700); }

/* Left edge tints — quick semantic hint */
.ll-cf-in { box-shadow: inset 3px 0 0 var(--ll-brand-600); }
.ll-cf-out { box-shadow: inset 3px 0 0 var(--ll-loss-600); }
.ll-cf-diff.ll-cf-loss { box-shadow: inset 3px 0 0 var(--ll-loss-600); }
.ll-cf-diff.ll-cf-gain { box-shadow: inset 3px 0 0 var(--ll-gain-600); }

.ll-cf-foot {
  margin-top: 10px;
  font-family: var(--ll-font-ui);
  font-size: 11px;
  font-style: italic;
  color: var(--ll-ink-400);
}


/* ============================================================
   16. ELEMENT REMOVAL — per user request 2026-05-24
   ============================================================
   • AI Financial Insights card (contains <i class="fa-brain">)
   • RUN AI 3.5 PLATINUM AUDIT CTA (from-sky-500 to-blue-700 button)
   • TAX nav tab
   • AI ADVISOR nav tab
   Removed via display:none — the React code still mounts them, the user
   just never sees them. This is overlay-safe (no source changes).
   ============================================================ */

/* AI Financial Insights — entire glass-card containing the brain icon */
.glass-card:has(i.fa-brain),
.glass-card.h-full:has(i.fa-brain) {
  display: none !important;
}

/* RUN AI 3.5 PLATINUM AUDIT — the gradient CTA wrapper card */
button.glass-card[class*="from-sky"],
button.glass-card[class*="from-blue"],
button.bg-gradient-to-br[class*="from-sky"][class*="to-blue"] {
  display: none !important;
}
/* And the parent .pt-8.space-y-6 wrapper if it's now empty */
div.pt-8.space-y-6:has(> button.glass-card[class*="from-sky"]):empty,
div.pt-8.space-y-6:not(:has(> :not([style*="display: none"]))) {
  display: none !important;
}

/* Bottom nav — hide TAX (5), SALON (6), AI ADVISOR (8).
   Salon is hidden because it renders the SAME Dashboard component as Home
   (verified via DOM inspection 2026-05-24 — content was identical down to
   the dollar amounts), so it's a redundant tab not a real second view.
   Stable order in the bundle: Home, Income, Expenses, Payroll, Tax, Salon, Monthly, AI Advisor. */
nav button:nth-child(5),  /* Tax */
nav button:nth-child(6),  /* Salon (duplicate of Home) */
nav button:nth-child(8) {  /* AI Advisor */
  display: none !important;
}
/* If the nav has an inner wrapper holding the buttons, use a deeper selector */
nav.fixed.bottom-0 > div > button:nth-child(5),
nav.fixed.bottom-0 > div > button:nth-child(6),
nav.fixed.bottom-0 > div > button:nth-child(8) {
  display: none !important;
}