/* ============================================================
   FinPer — Design System v4 (Bento Dense)
   Compact bento grid. Small type. No zoom. Minimal chrome.
   ============================================================ */

:root {
  /* Neutrals */
  --fp-bg:        #f6f5f0;
  --fp-surface:   #ffffff;
  --fp-ink:       #14161b;
  --fp-ink-soft:  #4a4d56;
  --fp-muted:     #8b8e97;
  --fp-line:      #e7e4dd;
  --fp-line-2:    #f0ede5;
  --fp-elev:      0 1px 0 rgba(20,22,27,.02), 0 1px 2px rgba(20,22,27,.04);

  /* Accent */
  --fp-primary:        #0d6b50;
  --fp-primary-hover:  #095040;
  --fp-primary-soft:   rgba(13, 107, 80, 0.08);

  /* Semantic */
  --fp-success: #0d8a5b;
  --fp-danger:  #c0392b;
  --fp-warning: #b07b00;
  --fp-info:    #2563eb;

  /* Radii */
  --fp-r-xs: 6px;
  --fp-r-sm: 8px;
  --fp-r-md: 10px;
  --fp-r-lg: 14px;
  --fp-r-pill: 999px;

  /* Spacing (8px grid, half-steps) */
  --fp-sp-1: .25rem;
  --fp-sp-2: .5rem;
  --fp-sp-3: .75rem;
  --fp-sp-4: 1rem;
  --fp-sp-5: 1.25rem;
  --fp-sp-6: 1.75rem;
  --fp-sp-7: 2.5rem;

  --fp-nav-h: 48px;

  /* Type */
  --fp-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
             Roboto, "Helvetica Neue", Arial, sans-serif;
  --fp-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fp-fs-xxs: 10.5px;
  --fp-fs-xs:  11.5px;
  --fp-fs-sm:  12.5px;
  --fp-fs-md:  13.5px;
  --fp-fs-lg:  16px;
  --fp-fs-xl:  20px;
  --fp-fs-2xl: 28px;
}

[data-bs-theme="dark"] {
  --fp-bg:        #0c0e0d;
  --fp-surface:   #15171a;
  --fp-ink:       #f1efea;
  --fp-ink-soft:  #b6b8b3;
  --fp-muted:     #80837e;
  --fp-line:      rgba(255, 255, 255, .07);
  --fp-line-2:    rgba(255, 255, 255, .035);
  --fp-elev:      0 1px 0 rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.4);
  --fp-primary:        #4ac397;
  --fp-primary-hover:  #6cd2ac;
  --fp-primary-soft:   rgba(74, 195, 151, 0.14);
}

* { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  touch-action: manipulation;        /* kill double-tap zoom on iOS */
  -webkit-tap-highlight-color: transparent;
  scroll-padding-top: calc(var(--fp-nav-h) + 12px);  /* anchor jumps clear sticky nav */
  scroll-behavior: smooth;
}
[id] { scroll-margin-top: calc(var(--fp-nav-h) + 12px); }
html, body {
  height: 100%;
  max-width: 100vw;
  overflow-x: clip;                   /* clip instead of hidden — preserves position:sticky */
  overscroll-behavior: none;          /* no rubber-band */
}
/* Fallback for older browsers without overflow:clip support */
@supports not (overflow: clip) {
  html, body { overflow-x: hidden; }
}
body {
  margin: 0;
  font-family: var(--fp-font);
  font-size: var(--fp-fs-md);
  line-height: 1.45;
  background: var(--fp-bg);
  color: var(--fp-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.005em;
  overflow-wrap: anywhere;
  font-feature-settings: "ss01" 1, "cv11" 1;
  -webkit-user-select: none;
  user-select: none;
}

/* Keep selection only where users actually need to copy text */
input, textarea, [contenteditable], .fp-num, .fp-mono,
.fp-tx-name, .fp-tx-note, .fp-stat__value, .fp-tile__value,
p, h1, h2, h3, h4, h5, h6, td, th {
  -webkit-user-select: text;
  user-select: text;
}

/* Hide scrollbars (still scrollable) for native-app feel */
html, body, * {
  scrollbar-width: none;              /* Firefox */
  -ms-overflow-style: none;           /* IE/Edge legacy */
}
html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* Inputs: prevent iOS auto-zoom when font-size < 16px */
input, select, textarea {
  font-size: 16px;
}
@media (min-width: 768px) {
  input, select, textarea { font-size: 13.5px; }
}
img, table, pre { max-width: 100%; }
[x-cloak] { display: none !important; }

/* ---------- Typography ---------- */
h1, .h1 { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 .35rem; line-height: 1.15; }
h2, .h2 { font-size: 18px; font-weight: 600; letter-spacing: -0.018em; margin: 0 0 .35rem; line-height: 1.2; }
h3, .h3 { font-size: 15px; font-weight: 600; letter-spacing: -0.012em; margin: 0 0 .35rem; line-height: 1.25; }
h4, .h4 { font-size: 13.5px; font-weight: 600; margin: 0 0 .35rem; }
h5, .h5 { font-size: 12.5px; font-weight: 600; margin: 0 0 .35rem; text-transform: uppercase; letter-spacing: .04em; color: var(--fp-ink-soft); }
p { margin: 0 0 .55rem; }
.display-6 { font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.text-muted { color: var(--fp-muted) !important; }
.fp-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "ss01" 1; }
.fp-mono { font-family: var(--fp-font-mono); }
a { color: var(--fp-primary); text-decoration: none; }
a:hover { color: var(--fp-primary-hover); text-decoration: underline; }
.fp-gradient-text { color: var(--fp-primary); }

/* Eyebrow (section caption) */
.fp-eyebrow {
  font-size: var(--fp-fs-xxs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--fp-muted);
}

/* ---------- Layout ---------- */
.fp-container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 var(--fp-sp-4); }
@media (min-width: 768px) { .fp-container { padding: 0 var(--fp-sp-5); } }
.fp-narrow { max-width: 420px; margin: 0 auto; }

/* ---------- Navbar (slim 48px) ---------- */
.fp-nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--fp-surface) 88%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--fp-line);
}
.fp-nav .fp-container { min-height: var(--fp-nav-h); }
.fp-brand {
  display: inline-flex; align-items: center; gap: .55rem;
  font-weight: 900;
  font-size: clamp(20px, 2.2vw, 26px);
  letter-spacing: -0.035em;
  text-decoration: none;
  line-height: 1;
  background: linear-gradient(135deg, var(--fp-primary) 0%, #14a374 55%, #1fb88a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--fp-primary);  /* fallback */
  transition: filter .15s ease;
}
.fp-brand:hover { text-decoration: none; filter: brightness(1.08); }
.fp-brand-dot {
  width: 26px; height: 26px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--fp-primary) 0%, #1fb88a 100%);
  box-shadow:
    0 4px 14px rgba(13, 107, 80, .35),
    inset 0 1px 0 rgba(255, 255, 255, .25);
  flex-shrink: 0;
  position: relative;
}
.fp-brand-dot::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .12);
  pointer-events: none;
}
.fp-nav-link {
  color: var(--fp-ink-soft);
  text-decoration: none;
  font-weight: 500;
  font-size: 12.5px;
  padding: .35rem .6rem;
  border-radius: var(--fp-r-sm);
}
.fp-nav-link:hover { color: var(--fp-ink); background: var(--fp-line-2); text-decoration: none; }
.fp-nav-link.active { color: var(--fp-ink); background: var(--fp-line-2); }

/* ---------- Cards ---------- */
.fp-card {
  background: var(--fp-surface);
  border: 1px solid var(--fp-line);
  border-radius: var(--fp-r-lg);
  padding: var(--fp-sp-4);
  color: var(--fp-ink);
  box-shadow: var(--fp-elev);
}
.fp-card--flush { padding: 0; }
.fp-card--pad-sm { padding: var(--fp-sp-3); }

/* ---------- BENTO GRID ---------- */
.fp-bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 10px;
}
.fp-bento > * { min-width: 0; }
@media (max-width: 900px) {
  .fp-bento { grid-template-columns: repeat(6, 1fr); }
}
@media (max-width: 540px) {
  .fp-bento { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}

/* spans (12-col on desktop) */
.fp-span-2  { grid-column: span 2; }
.fp-span-3  { grid-column: span 3; }
.fp-span-4  { grid-column: span 4; }
.fp-span-5  { grid-column: span 5; }
.fp-span-6  { grid-column: span 6; }
.fp-span-7  { grid-column: span 7; }
.fp-span-8  { grid-column: span 8; }
.fp-span-9  { grid-column: span 9; }
.fp-span-12 { grid-column: span 12; }
@media (max-width: 900px) {
  .fp-span-2, .fp-span-3, .fp-span-4 { grid-column: span 3; }
  .fp-span-5, .fp-span-6, .fp-span-7, .fp-span-8, .fp-span-9, .fp-span-12 { grid-column: span 6; }
}
@media (max-width: 540px) {
  [class*="fp-span-"] { grid-column: span 2; }
  .fp-span-12, .fp-span-8, .fp-span-9, .fp-span-7 { grid-column: span 2; }
}

/* row heights */
.fp-row-1 { grid-row: span 1; }
.fp-row-2 { grid-row: span 2; }

/* ---------- Bento tile (compact KPI card) ---------- */
.fp-tile {
  background: var(--fp-surface);
  border: 1px solid var(--fp-line);
  border-radius: var(--fp-r-lg);
  padding: 14px;
  display: flex; flex-direction: column; gap: 4px;
  min-height: 96px;
  box-shadow: var(--fp-elev);
  position: relative;
}
.fp-tile__label {
  font-size: var(--fp-fs-xxs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--fp-muted);
  display: flex; align-items: center; gap: .35rem;
}
.fp-tile__value {
  font-size: 22px; font-weight: 600;
  letter-spacing: -0.02em; line-height: 1.1;
  color: var(--fp-ink);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "ss01" 1;
  margin-top: 2px;
}
.fp-tile__sub { font-size: var(--fp-fs-xs); color: var(--fp-ink-soft); display: flex; align-items: center; gap: .3rem; }
.fp-tile__spark { margin-top: auto; height: 28px; }

/* "Page name →" link badge in tile corner */
.fp-tile__nav {
  position: absolute;
  top: 10px; right: 12px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--fp-muted);
  letter-spacing: .02em;
  transition: color .15s ease;
  pointer-events: none;
}
a.fp-tile:hover .fp-tile__nav, a.fp-tile--link:hover .fp-tile__nav { color: var(--fp-primary); }

/* Clickable tile */
a.fp-tile, a.fp-tile--link {
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
a.fp-tile:hover, a.fp-tile--link:hover {
  border-color: var(--fp-primary);
  text-decoration: none;
  color: inherit;
  box-shadow: 0 4px 16px rgba(13,107,80,.08), var(--fp-elev);
}
a.fp-tile:active, a.fp-tile--link:active { transform: scale(.995); }

.fp-delta { font-size: var(--fp-fs-xs); font-weight: 600; }
.fp-delta--up   { color: var(--fp-success); }
.fp-delta--down { color: var(--fp-danger); }
.fp-delta--flat { color: var(--fp-muted); }

/* legacy fp-stat → bento style */
.fp-stat {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px;
  border-radius: var(--fp-r-lg);
  background: var(--fp-surface);
  border: 1px solid var(--fp-line);
  color: var(--fp-ink);
  box-shadow: var(--fp-elev);
  min-height: 0;
}
.fp-stat--indigo, .fp-stat--mint, .fp-stat--amber { background: var(--fp-surface); color: var(--fp-ink); border: 1px solid var(--fp-line); }
.fp-stat__label { font-size: var(--fp-fs-xxs); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--fp-muted); }
.fp-stat__value { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; color: var(--fp-ink); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "ss01" 1; }
.fp-stat__sub   { font-size: var(--fp-fs-xs); color: var(--fp-ink-soft); }

/* ---------- Section headers inside bento ---------- */
.fp-section-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 8px; gap: .6rem;
}
.fp-section-head h3, .fp-section-head .fp-eyebrow { margin: 0; }

/* ---------- Mini bars (category share) ---------- */
.fp-bars { display: flex; flex-direction: column; gap: 6px; }
.fp-bar {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  font-size: var(--fp-fs-sm);
}
.fp-bar__icon { font-size: 12px; color: var(--fp-muted); text-align: center; }
.fp-bar__name { color: var(--fp-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-bar__name .fp-bar__track {
  display: block;
  height: 4px;
  background: var(--fp-line-2);
  border-radius: 999px;
  margin-top: 3px;
  overflow: hidden;
}
.fp-bar__fill {
  display: block;
  height: 100%;
  background: var(--fp-primary);
  border-radius: 999px;
}
.fp-bar__val { font-size: var(--fp-fs-xs); color: var(--fp-ink-soft); font-variant-numeric: tabular-nums; }

/* ---------- Sparkline (CSS-only fallback) ---------- */
.fp-spark { display: flex; align-items: flex-end; gap: 2px; height: 28px; }
.fp-spark span {
  flex: 1; min-width: 0;
  background: var(--fp-primary);
  opacity: .8;
  border-radius: 1px;
}

/* ---------- Buttons ---------- */
.fp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  font-weight: 600;
  border-radius: var(--fp-r-pill);
  padding: .45rem .9rem;
  border: 1px solid transparent;
  text-decoration: none;
  font-size: 12.5px;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.fp-btn:active { transform: translateY(1px); }
.fp-btn:hover { text-decoration: none; }
.fp-btn--primary { background: var(--fp-primary); color: #fff; border-color: var(--fp-primary); }
.fp-btn--primary:hover { background: var(--fp-primary-hover); border-color: var(--fp-primary-hover); color: #fff; }
.fp-btn--ghost { background: var(--fp-surface); color: var(--fp-ink); border-color: var(--fp-line); }
.fp-btn--ghost:hover { background: var(--fp-line-2); color: var(--fp-ink); }
.fp-btn--ghost.active { background: var(--fp-primary); color: #fff; border-color: var(--fp-primary); }
.fp-btn--google { background: var(--fp-surface); color: var(--fp-ink); border-color: var(--fp-line); }
.fp-btn--google:hover { background: var(--fp-line-2); }
.fp-btn--sm { padding: .32rem .7rem; font-size: 11.5px; }
.fp-btn--xs { padding: .22rem .5rem; font-size: 11px; }
.fp-btn--full { width: 100%; }

/* ---------- Forms ---------- */
.fp-field { margin-bottom: var(--fp-sp-3); }
.fp-label, .form-label {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  margin-bottom: .25rem;
  color: var(--fp-ink-soft);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.fp-input, .fp-select, .form-control, .form-select {
  width: 100%;
  padding: .5rem .7rem;
  border-radius: var(--fp-r-md);
  border: 1px solid var(--fp-line);
  background: var(--fp-surface);
  color: var(--fp-ink);
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.35;
  transition: border-color .12s, box-shadow .12s;
}
.fp-input:focus, .fp-select:focus, .form-control:focus, .form-select:focus {
  outline: none;
  border-color: var(--fp-primary);
  box-shadow: 0 0 0 3px var(--fp-primary-soft);
}
.fp-input::placeholder, .form-control::placeholder { color: var(--fp-muted); }
.fp-error, .invalid-feedback { font-size: 11.5px; color: var(--fp-danger); margin-top: .25rem; }
.is-invalid { border-color: var(--fp-danger) !important; }
.form-text { font-size: 11.5px; color: var(--fp-muted); margin-top: .25rem; }
.input-group-text {
  background: var(--fp-line-2);
  border: 1px solid var(--fp-line);
  color: var(--fp-ink-soft);
  font-size: 12.5px;
  border-radius: var(--fp-r-md);
}

/* ---------- Auth panel ---------- */
.fp-glass {
  background: var(--fp-surface);
  border: 1px solid var(--fp-line);
  border-radius: var(--fp-r-lg);
  padding: var(--fp-sp-5);
  color: var(--fp-ink);
  box-shadow: var(--fp-elev);
}

/* ---------- Hero ---------- */
.fp-hero { padding: var(--fp-sp-7) 0 var(--fp-sp-6); text-align: center; }
.fp-hero h1 {
  font-size: clamp(28px, 4.5vw, 42px);
  font-weight: 700; letter-spacing: -0.025em; line-height: 1.08;
  margin-bottom: var(--fp-sp-3);
}
.fp-hero p.lead { font-size: 14px; color: var(--fp-ink-soft); max-width: 520px; margin: 0 auto var(--fp-sp-5); }
.fp-hero-eyebrow {
  display: inline-block;
  font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  padding: .3rem .65rem;
  border-radius: var(--fp-r-pill);
  background: var(--fp-primary-soft);
  color: var(--fp-primary);
  margin-bottom: var(--fp-sp-3);
}
.fp-hero-cards {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  max-width: 780px; margin: var(--fp-sp-5) auto 0;
}
@media (max-width: 768px) { .fp-hero-cards { grid-template-columns: 1fr; } }

/* ---------- Alerts ---------- */
.fp-alert {
  border-radius: var(--fp-r-md);
  padding: .55rem .8rem;
  border: 1px solid var(--fp-line);
  font-size: 12.5px;
  margin-bottom: var(--fp-sp-3);
  background: var(--fp-surface);
  color: var(--fp-ink);
  position: relative;
}
.fp-alert--success { border-color: rgba(13,138,91,.35); background: rgba(13,138,91,.06); color: var(--fp-success); }
.fp-alert--danger  { border-color: rgba(192,57,43,.35); background: rgba(192,57,43,.06); color: var(--fp-danger); }
.fp-alert--warning { border-color: rgba(176,123,0,.35); background: rgba(176,123,0,.06); color: var(--fp-warning); }
.fp-alert--info    { border-color: var(--fp-line); background: var(--fp-line-2); color: var(--fp-ink); }
.fp-alert-close { position: absolute; top: .3rem; right: .55rem; background: transparent; border: 0; font-size: 1rem; line-height: 1; cursor: pointer; opacity: .55; color: inherit; }
.fp-alert-close:hover { opacity: 1; }

/* ---------- Footer ---------- */
.fp-footer {
  padding: var(--fp-sp-5) 0;
  text-align: center;
  color: var(--fp-muted);
  font-size: 11.5px;
  border-top: 1px solid var(--fp-line);
  margin-top: var(--fp-sp-6);
}

/* ---------- Theme toggle ---------- */
.fp-theme-toggle {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--fp-r-pill);
  border: 1px solid var(--fp-line);
  background: var(--fp-surface);
  color: var(--fp-ink);
  cursor: pointer;
  font-size: 13px;
}
.fp-theme-toggle:hover { background: var(--fp-line-2); }

/* ---------- Lists (compact rows) ---------- */
.fp-list { display: flex; flex-direction: column; }
.fp-list-item {
  display: flex; justify-content: space-between; align-items: center;
  gap: .55rem;
  padding: .55rem .7rem;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--fp-line-2);
  color: var(--fp-ink);
  min-width: 0;
  font-size: 12.5px;
}
.fp-list-item:last-child { border-bottom: 0; }
.fp-list-item > * { min-width: 0; }
.fp-list-item:hover { background: var(--fp-line-2); }

/* Stand-alone bordered list (when not inside a card) */
.fp-list--bordered .fp-list-item {
  border: 1px solid var(--fp-line);
  border-radius: var(--fp-r-md);
  background: var(--fp-surface);
  margin-bottom: 4px;
}
.fp-list--bordered .fp-list-item:hover { border-color: var(--fp-line); background: var(--fp-line-2); }

/* ---------- Pills ---------- */
.fp-pill {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: .15rem .45rem;
  border-radius: var(--fp-r-pill);
  background: var(--fp-line-2);
  color: var(--fp-ink-soft);
}
.fp-pill--mint   { background: rgba(13,138,91,.1); color: var(--fp-success); }
.fp-pill--coral  { background: rgba(192,57,43,.1); color: var(--fp-danger); }
.fp-pill--amber  { background: rgba(176,123,0,.1); color: var(--fp-warning); }

/* Status dot */
.fp-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--fp-muted); }
.fp-dot--ok   { background: var(--fp-success); }
.fp-dot--warn { background: var(--fp-warning); }
.fp-dot--err  { background: var(--fp-danger); }

/* Category swatch */
.fp-swatch { width: 10px; height: 10px; border-radius: 2px; display: inline-block; vertical-align: middle; }

/* ---------- Reveal (subtle) ---------- */
@keyframes fp-rise { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.fp-reveal { animation: fp-rise .28s ease both; }
.fp-reveal-d1 { animation-delay: .03s; }
.fp-reveal-d2 { animation-delay: .06s; }
.fp-reveal-d3 { animation-delay: .09s; }
.fp-reveal-d4 { animation-delay: .12s; }

/* ---------- Locale switch ---------- */
.fp-locale-switch .fp-btn { padding: .22rem .5rem; min-width: 2.2rem; font-size: 11px; }

/* ---------- HTMX indicator ---------- */
.fp-htmx-indicator { display: none; }
.htmx-request .fp-htmx-indicator, .htmx-request.fp-htmx-indicator { display: inline-block; }

/* ---------- Modal ---------- */
.fp-modal-backdrop {
  position: fixed; inset: 0; background: rgba(14, 26, 43, .55);
  display: flex; align-items: center; justify-content: center;
  z-index: 1050; padding: 1rem;
}
.fp-modal {
  background: var(--fp-surface); border-radius: var(--fp-r-lg);
  max-width: 480px; width: 100%; max-height: 88vh; overflow: auto;
  border: 1px solid var(--fp-line);
}
.fp-modal-header { display: flex; align-items: center; justify-content: space-between; padding: .8rem 1rem; border-bottom: 1px solid var(--fp-line); }
.fp-modal-body { padding: 1rem; }

/* ---------- Dropdown ---------- */
.fp-dropdown { position: relative; display: inline-block; }
.fp-dropdown-menu {
  position: absolute; top: 100%; right: 0; margin-top: .25rem;
  background: var(--fp-surface); border: 1px solid var(--fp-line);
  border-radius: var(--fp-r-md); min-width: 170px; padding: .25rem 0;
  z-index: 1040;
  box-shadow: 0 6px 20px rgba(0,0,0,.06);
}
.fp-dropdown-menu a, .fp-dropdown-menu button {
  display: block; width: 100%; text-align: left;
  padding: .4rem .8rem; background: transparent; border: 0;
  color: var(--fp-ink); text-decoration: none;
  font-size: 12.5px;
}
.fp-dropdown-menu a:hover, .fp-dropdown-menu button:hover { background: var(--fp-line-2); }

/* ---------- Tabs ---------- */
.fp-tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--fp-line); margin-bottom: var(--fp-sp-3); }
.fp-tab {
  background: transparent; border: 0; padding: .4rem .75rem;
  color: var(--fp-ink-soft); border-bottom: 2px solid transparent;
  cursor: pointer; font-weight: 500; font-size: 12.5px;
}
.fp-tab.active { color: var(--fp-primary); border-bottom-color: var(--fp-primary); }

/* ---------- Skip link ---------- */
.fp-skip-link {
  position: absolute; top: -40px; left: 8px; z-index: 2000;
  background: var(--fp-primary); color: #fff;
  padding: .4rem .75rem; border-radius: var(--fp-r-md); text-decoration: none;
}
.fp-skip-link:focus { top: 8px; }
:focus-visible { outline: 2px solid var(--fp-primary); outline-offset: 2px; }

/* ---------- Hamburger + Mobile drawer ---------- */
.fp-burger {
  background: transparent; border: 1px solid var(--fp-line);
  border-radius: var(--fp-r-sm);
  width: 34px; height: 34px;
  display: inline-flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 4px; cursor: pointer; padding: 0;
}
.fp-burger span { display: block; width: 16px; height: 2px; background: var(--fp-ink); border-radius: 2px; }
.fp-mobile-menu { position: fixed; inset: var(--fp-nav-h) 0 0 0; background: rgba(14, 26, 43, .4); z-index: 1050; }
.fp-mobile-menu__panel {
  background: var(--fp-surface);
  padding: .75rem;
  max-height: calc(100vh - var(--fp-nav-h));
  overflow-y: auto;
  display: flex; flex-direction: column; gap: .15rem;
  border-bottom: 1px solid var(--fp-line);
}
.fp-mobile-link {
  display: block;
  padding: .6rem .75rem;
  border-radius: var(--fp-r-md);
  color: var(--fp-ink);
  text-decoration: none;
  font-weight: 500;
  font-size: 13.5px;
}
.fp-mobile-link:hover, .fp-mobile-link:focus-visible { background: var(--fp-line-2); color: var(--fp-ink); text-decoration: none; }

/* Mobile menu — grid of tiles (3 columns) */
.fp-mobile-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 4px;
}
.fp-mobile-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  padding: 12px 6px;
  background: var(--fp-surface);
  border: 1px solid var(--fp-line);
  border-radius: var(--fp-r-md);
  color: var(--fp-ink);
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  min-height: 70px;
  transition: border-color .15s ease, transform .12s ease, background-color .15s ease;
}
.fp-mobile-tile:hover { border-color: var(--fp-primary); color: var(--fp-primary); text-decoration: none; background: var(--fp-line-2); }
.fp-mobile-tile:active { transform: scale(.97); }
.fp-mobile-tile__icon {
  font-size: 20px;
  line-height: 1;
  color: var(--fp-primary);
}
.fp-mobile-tile--admin { border-color: rgba(192,57,43,.25); }
.fp-mobile-tile--admin .fp-mobile-tile__icon { color: var(--fp-danger); }
.fp-mobile-tile--admin:hover { border-color: var(--fp-danger); color: var(--fp-danger); }

/* ---------- Chart wrappers (compact heights) ---------- */
.fp-chart-wrap { position: relative; height: 200px; width: 100%; }
.fp-chart-wrap--sm { height: 160px; }
.fp-chart-wrap--xs { height: 110px; }
.fp-chart-wrap > canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }

/* ---------- Bootstrap table polish ---------- */
.table { color: var(--fp-ink); font-size: 12.5px; }
.table thead th { color: var(--fp-muted); font-weight: 600; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--fp-line); padding: .5rem .6rem; }
.table td, .table th { border-color: var(--fp-line-2); padding: .5rem .6rem; }

/* ---------- Page header ---------- */
.fp-page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: var(--fp-sp-3);
  margin-bottom: var(--fp-sp-4);
}
.fp-actions { display: flex; flex-wrap: wrap; gap: .35rem; }
@media (max-width: 540px) {
  .fp-page-header { align-items: flex-start; }
  .fp-actions { width: 100%; }
  .fp-actions > .fp-btn { flex: 1 1 calc(50% - .35rem); }
}

/* Segmented control (income/expense toggle) */
.fp-segmented {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 4px;
  background: var(--fp-line-2);
  border: 1px solid var(--fp-line);
  border-radius: var(--fp-r-md);
}
.fp-segmented__btn {
  display: flex; align-items: center; justify-content: center;
  padding: .55rem .8rem;
  border-radius: var(--fp-r-sm);
  font-size: 13px;
  font-weight: 600;
  color: var(--fp-ink-soft);
  cursor: pointer;
  user-select: none;
  background: transparent;
  border: 1px solid transparent;
  transition: background .12s, color .12s, border-color .12s;
}
.fp-segmented__btn input { position: absolute; opacity: 0; pointer-events: none; }
.fp-segmented__btn:hover { color: var(--fp-ink); }
.fp-segmented__btn.is-active { background: var(--fp-surface); border-color: var(--fp-line); }
.fp-segmented__btn.is-active.is-expense { color: var(--fp-danger); box-shadow: inset 0 -2px 0 var(--fp-danger); }
.fp-segmented__btn.is-active.is-income  { color: var(--fp-success); box-shadow: inset 0 -2px 0 var(--fp-success); }

/* Form: 2-col row that stacks on narrow viewports (prevents iOS date overflow) */
.fp-form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 8px;
}
.fp-form-row-2 > * { min-width: 0; }
@media (max-width: 480px) {
  .fp-form-row-2 { grid-template-columns: 1fr; }
}

/* Date input — neutralize iOS / mobile intrinsic min-width */
.fp-date,
input[type="date"].fp-input {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
input[type="date"]::-webkit-date-and-time-value { text-align: left; }
input[type="date"]::-webkit-calendar-picker-indicator { margin-left: 4px; }

/* ---------- Compact transactions list (flex, no table) ---------- */
.fp-tx-list { display: flex; flex-direction: column; width: 100%; }
.fp-tx-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 4px;
  border-bottom: 1px solid var(--fp-line-2);
  min-width: 0;
  font-size: 12.5px;
}
.fp-tx-row:last-child { border-bottom: 0; }
.fp-tx-row:hover { background: var(--fp-line-2); }
.fp-tx-row--clickable { cursor: pointer; }
.fp-tx-row--clickable:focus-visible { outline: 2px solid var(--fp-primary); outline-offset: -2px; border-radius: 6px; }

/* Key-value list (modal detail) */
.fp-kv-list { display: flex; flex-direction: column; }
.fp-kv {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--fp-line-2);
  font-size: 12.5px;
}
.fp-kv:last-child { border-bottom: 0; }
.fp-kv__k { color: var(--fp-muted); text-transform: uppercase; letter-spacing: .04em; font-size: 10.5px; font-weight: 600; }
.fp-kv__v { color: var(--fp-ink); font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.fp-kv--block { flex-direction: column; align-items: stretch; }
.fp-kv--block .fp-kv__v { text-align: left; font-weight: 500; margin-top: 4px; }

.fp-tx-col-icon {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 4px;
}
.fp-tx-emoji { font-size: 13px; line-height: 1; }

.fp-tx-col-main { flex: 1 1 auto; min-width: 0; }
.fp-tx-name {
  font-weight: 600; color: var(--fp-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fp-tx-meta {
  font-size: 10.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 1px;
}
.fp-tx-date { color: var(--fp-muted); }
.fp-tx-note { color: var(--fp-muted); margin-left: 4px; }

.fp-tx-col-amt {
  flex: 0 0 auto;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.fp-tx-col-actions {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 2px;
}
.fp-tx-col-actions form { margin: 0; display: inline-flex; }

/* Legacy icon-only button (kept for forms/list rows elsewhere) */
.fp-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border-radius: var(--fp-r-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--fp-ink-soft);
  cursor: pointer;
  padding: 0;
  text-decoration: none;
}
.fp-icon-btn:hover { background: var(--fp-line-2); color: var(--fp-ink); }
.fp-icon-btn--danger:hover { color: var(--fp-danger); background: rgba(192,57,43,.08); }
.fp-icon-btn svg { display: block; }

/* ---------- fp-act: innovative animated action button ----------
   - Glass pill with conic glow ring on hover
   - SVG sub-elements animate (pencil tip wiggle, trash lid lift)
   - GPU-friendly (transform + opacity only)
*/
.fp-act {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--fp-ink-soft);
  cursor: pointer; padding: 0;
  text-decoration: none;
  isolation: isolate;
  transition: color .18s ease, background-color .18s ease,
              border-color .18s ease, transform .18s cubic-bezier(.2,.7,.3,1.3);
}
.fp-act:focus-visible { outline: none; }
.fp-act:hover { transform: none; }
.fp-act .fp-act__ico { display: block; position: relative; z-index: 1; transition: transform .25s ease; }
.fp-act .fp-act__ico g, .fp-act .fp-act__ico path { transition: transform .25s ease, opacity .2s ease; transform-origin: center; transform-box: fill-box; }

/* Animated glow ring (kept inside button bounds to prevent table overflow) */
.fp-act__ring {
  position: absolute; inset: 0;
  border-radius: 999px;
  background: conic-gradient(from 220deg, transparent 0deg, currentColor 90deg, transparent 200deg, currentColor 320deg, transparent 360deg);
  opacity: 0;
  filter: blur(2px);
  z-index: 0;
  transition: opacity .25s ease;
  animation: fp-act-spin 6s linear infinite;
  animation-play-state: paused;
}
@keyframes fp-act-spin { to { transform: rotate(360deg); } }

.fp-act:hover { background: var(--fp-surface); border-color: var(--fp-line); }
.fp-act:hover .fp-act__ring { opacity: .35; animation-play-state: running; }
.fp-act:active { transform: translateY(0) scale(.94); }

/* Edit variant: emerald */
.fp-act--edit:hover { color: var(--fp-primary); }
.fp-act--edit:hover .fp-pen { transform: rotate(-6deg) translateY(-1px); }
.fp-act--edit:hover .fp-pen__tip { opacity: 0; }
.fp-act--edit:hover .fp-pen { animation: fp-pen-wiggle .55s ease-in-out; }
@keyframes fp-pen-wiggle {
  0%   { transform: rotate(0deg) translateY(0); }
  35%  { transform: rotate(-9deg) translateY(-2px); }
  65%  { transform: rotate(-3deg) translateY(-1px); }
  100% { transform: rotate(-6deg) translateY(-1px); }
}

/* Delete variant: danger with lid lift */
.fp-act--del:hover { color: var(--fp-danger); background: rgba(192,57,43,.06); border-color: rgba(192,57,43,.25); }
.fp-act--del:hover .fp-trash__lid { transform: translateY(-2.4px) rotate(-14deg); }
.fp-act--del:hover .fp-trash__lines { transform: translateY(.5px); opacity: .85; }
.fp-act--del:active .fp-trash__can { transform: translateY(.5px); }

/* Billing / upgrade page */
.fp-feature-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.fp-feature-table thead th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fp-muted);
  border-bottom: 1px solid var(--fp-line);
  padding: 8px 6px;
}
.fp-feature-table thead th + th { text-align: center; }
.fp-feature-table td { padding: 7px 6px; border-bottom: 1px solid var(--fp-line-2); }
.fp-feature-table td + td { text-align: center; font-variant-numeric: tabular-nums; }
.fp-feature-table tr:last-child td { border-bottom: 0; }
.fp-feature-table tr:hover td { background: var(--fp-line-2); }

/* Trial / upgrade banner */
.fp-trial-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 14px;
  background: var(--fp-primary-soft);
  border-bottom: 1px solid var(--fp-line);
  font-size: 12px;
  color: var(--fp-ink);
}
.fp-trial-banner a {
  font-weight: 700;
  color: var(--fp-primary);
  text-decoration: none;
}

/* Landing hero */
.fp-landing-hero {
  padding: 36px 0 12px;
  text-align: center;
}
.fp-landing-hero .fp-gradient-text {
  background: linear-gradient(90deg, var(--fp-primary), color-mix(in srgb, var(--fp-primary) 60%, var(--fp-success)));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--fp-primary);  /* fallback */
}

/* Admin users — mobile-first card list */
.fp-user-list { display: flex; flex-direction: column; gap: 8px; }
.fp-user-card {
  background: var(--fp-surface);
  border: 1px solid var(--fp-line);
  border-radius: var(--fp-r-md);
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 8px;
  box-shadow: var(--fp-elev);
}
.fp-user-card__name {
  font-weight: 700;
  font-size: 13.5px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  overflow-wrap: anywhere;
}
.fp-user-card__meta { font-size: 11.5px; color: var(--fp-muted); overflow-wrap: anywhere; }
.fp-user-card__actions { display: flex; flex-wrap: wrap; gap: 6px; }

/* Help page */
.fp-help-toc { display: flex; flex-wrap: wrap; gap: 6px; }
.fp-help-toc a {
  font-size: 12px;
  padding: .25rem .6rem;
  background: var(--fp-line-2);
  border: 1px solid var(--fp-line);
  border-radius: var(--fp-r-pill);
  color: var(--fp-ink-soft);
  text-decoration: none;
}
.fp-help-toc a:hover { background: var(--fp-surface); color: var(--fp-primary); text-decoration: none; }
.fp-help-list { list-style: disc; padding-left: 18px; margin: 0; font-size: 13px; line-height: 1.5; }
.fp-help-list li { margin-bottom: 6px; }
.fp-help-list li strong { color: var(--fp-ink); }

/* Analytics: compact score breakdown — labels + values inline, never wrap */
.fp-score-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.fp-score-grid > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.fp-score-grid__k {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--fp-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fp-score-grid__v { font-size: 15px; font-weight: 700; color: var(--fp-ink); }
@media (max-width: 540px) {
  .fp-score-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Inline gap between icon buttons inside table cell */
.fp-tx-actions .fp-act + form { margin-left: 4px; }
.fp-tx-actions .fp-act + .fp-act { margin-left: 4px; }

/* Reduced-motion respect */
@media (prefers-reduced-motion: reduce) {
  .fp-act, .fp-act__ico, .fp-act__ico g, .fp-act__ico path { transition: none !important; animation: none !important; }
  .fp-act__ring { animation: none !important; }
}

/* Pager */
.fp-pager {
  display: flex; gap: 8px; align-items: center; justify-content: center;
  padding: 12px 0;
}
.fp-pager .fp-btn.disabled { opacity: .4; pointer-events: none; }

/* ---------- Privacy mode: blur money values ---------- */
html[data-privacy="on"] .fp-num,
html[data-privacy="on"] .fp-tile__value,
html[data-privacy="on"] .fp-stat__value,
html[data-privacy="on"] .fp-amt--in,
html[data-privacy="on"] .fp-amt--out,
html[data-privacy="on"] .fp-amt--neg,
html[data-privacy="on"] .fp-bar__val,
html[data-privacy="on"] .fp-tx-col-amt,
html[data-privacy="on"] .fp-kv__v.fp-num,
html[data-privacy="on"] .fp-kv__v:has(.fp-num) {
  filter: blur(6px);
  transition: filter .15s ease;
  user-select: none;
  -webkit-user-select: none;
}
html[data-privacy="on"] .fp-num:hover,
html[data-privacy="on"] .fp-tile__value:hover,
html[data-privacy="on"] .fp-tile:hover .fp-tile__value,
html[data-privacy="on"] .fp-tx-row:hover .fp-tx-col-amt {
  filter: blur(0);
}

/* Amount text colors */
.fp-amt--in  { color: var(--fp-success); font-weight: 700; }
.fp-amt--out { color: var(--fp-ink); font-weight: 700; }
.fp-amt--neg { color: var(--fp-danger); font-weight: 700; }

/* Bento span helpers used inline */
.fp-grow { flex: 1 1 auto; }
.fp-shrink-0 { flex-shrink: 0; }