:root {
  --bg: var(--tg-theme-bg-color, #f3f0ea);
  --bg-secondary: var(--tg-theme-secondary-bg-color, #faf8f4);
  --text: var(--tg-theme-text-color, #33384a);
  --hint: var(--tg-theme-hint-color, #7d8399);
  --link: var(--tg-theme-link-color, #4f6fd9);
  --accent: var(--tg-theme-button-color, #4f6fd9);
  --accent-text: var(--tg-theme-button-text-color, #ffffff);
  --section-bg: var(--tg-theme-section-bg-color, #ffffff);
  --divider: rgba(51, 56, 74, 0.08);

  --danger: #d1494f;
  --success: #4a8a7a;
  --warning: #cf9f3c;
  --ink: #33384a;
  --steel: #57758a;
  --muted: #7d8399;
  --cream: #f3f0ea;
  --mint: #dcece5;
  --peach: #eef2ff;
  --lavender: #e8edff;
  --filter-bg: #eef2ff;
  --filter-border: #c7d2fe;
  --filter-text: #4056b8;
  --filter-open-bg: #e1e8ff;
  --filter-open-border: #aabaff;

  --surface: rgba(255, 255, 255, 0.9);

  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 22px;

  --shadow-sm: 0 1px 2px rgba(51, 56, 74, 0.04);
  --shadow-md: 0 6px 20px rgba(51, 56, 74, 0.07);
  --shadow-glow: 0 8px 20px rgba(79, 111, 217, 0.16);
  --surface-strong: color-mix(in srgb, var(--accent) 9%, var(--section-bg));

  --border: rgba(51, 56, 74, 0.1);

  color-scheme: light;
}

/* Telegram's WebApp colorScheme (set via JS in app.js, sourced from
   Telegram.WebApp.colorScheme — the only theme signal a Mini App gets,
   and it tracks the phone's system theme whenever Telegram itself is set
   to "System" appearance, which is the default for most users).
   prefers-color-scheme can't be used instead: the OS scheme and Telegram's
   in-app theme frequently disagree inside the WebView. */
html[data-theme="dark"] {
  --bg: var(--tg-theme-bg-color, #181a20);
  --bg-secondary: var(--tg-theme-secondary-bg-color, #1f222b);
  --text: var(--tg-theme-text-color, #eceef2);
  --hint: var(--tg-theme-hint-color, #8d93a6);
  --link: var(--tg-theme-link-color, #8ba3f0);
  --accent: var(--tg-theme-button-color, #6f8bea);
  --accent-text: var(--tg-theme-button-text-color, #ffffff);
  --section-bg: var(--tg-theme-section-bg-color, #24272f);

  --danger: #e5828a;
  --success: #7fa89c;
  --warning: #e0bd6f;
  --ink: #eceef2;
  --steel: #8ea3c9;
  --muted: #8d93a6;
  --mint: rgba(90, 160, 135, 0.22);
  --peach: rgba(111, 139, 234, 0.22);
  --lavender: rgba(150, 135, 210, 0.22);
  --filter-bg: rgba(111, 139, 234, 0.16);
  --filter-border: rgba(139, 163, 240, 0.34);
  --filter-text: #c7d2ff;
  --filter-open-bg: rgba(111, 139, 234, 0.24);
  --filter-open-border: rgba(139, 163, 240, 0.52);

  --surface: rgba(255, 255, 255, 0.08);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.32);
  --shadow-glow: 0 8px 20px rgba(111, 139, 234, 0.22);
  --surface-strong: color-mix(in srgb, var(--accent) 14%, var(--section-bg));

  --divider: rgba(255, 255, 255, 0.09);
  --border: rgba(255, 255, 255, 0.12);
  color-scheme: dark;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  touch-action: pan-y;
}

/* html is the page's one real scroller (its scrollHeight/scrollTop is what
   window.scrollTo targets) — overflow-x/overscroll-behavior belong here
   only. Per the CSS overflow spec, setting overflow-x without overflow-y
   makes overflow-y compute to `auto` on whatever element it's set on; that
   used to live on the shared `html, body` rule above, so *body* silently
   got overflow-y:auto too, even though body always sizes exactly to fit
   its content and never has real overflow of its own. With
   overscroll-behavior-y:contain also applying to body from the same
   shared rule, every wheel/touch/drag gesture got caught by body's
   (empty) scroll box and stopped right there instead of chaining up to
   html — so nothing ever visibly scrolled on user input, even though
   programmatic scrollTo() still worked fine (it bypasses gesture
   hit-testing entirely). Confirmed by reproducing it headless: wheel/touch
   scroll were silently no-ops until body's overflow was forced back to
   its default `visible` on both axes. */
html {
  overscroll-behavior-x: none;
  overscroll-behavior-y: contain;
  overflow-x: hidden;
}


#app {
  /* +1px over the viewport guarantees the document always has *something*
     to scroll, even on a screen short enough to otherwise fit entirely
     on-screen. Without that sliver of real overflow, scrollTo(0, 1) in
     resetScrollPosition() (app.js) is a silent no-op — the browser clamps
     it straight back to 0 — which leaves Telegram for Android free to read
     the next touch as its "collapse the Mini App" gesture instead of a
     scroll, on every screen, not just tall ones. */
  min-height: calc(100vh + 1px);
  padding-bottom: 40px;
  touch-action: pan-y;
}

.page {
  touch-action: pan-y;
}

.app-menu {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  right: 12px;
  z-index: 1000;
}

.app-menu-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--section-bg) 94%, transparent);
  color: var(--text);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(12px);
  cursor: pointer;
  transition: transform 0.16s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.app-menu-trigger:hover,
.app-menu-trigger[aria-expanded="true"] {
  border-color: color-mix(in srgb, var(--accent) 32%, var(--border));
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 8%, transparent), var(--shadow-sm);
}

.app-menu-trigger:active {
  transform: scale(0.94);
}

.app-menu-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  display: grid;
  gap: 4px;
  width: 286px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: color-mix(in srgb, var(--section-bg) 96%, transparent);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(16px);
  transform-origin: top right;
}

.app-menu-popover[hidden] {
  display: none;
}

.app-menu-popover:not([hidden]) {
  animation: menuPopoverIn 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.app-menu-popover.is-closing {
  animation: menuPopoverOut 0.16s ease forwards;
}

.app-menu-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 750;
  text-align: left;
  cursor: pointer;
  transition: transform 0.14s ease, background 0.16s ease, color 0.16s ease;
}

.app-menu-item:hover,
.app-menu-item:active {
  background: var(--surface);
}

.app-menu-item:active {
  transform: scale(0.985);
}

.app-menu-item-static {
  cursor: default;
}

.app-menu-item-static:hover,
.app-menu-item-static:active {
  background: transparent;
}

.app-menu-item.danger {
  color: var(--danger);
}

.app-menu-icon {
  display: inline-flex;
  color: var(--hint);
}

.app-menu-language {
  padding-bottom: 0;
}

.app-menu-lang-options {
  display: inline-flex;
  gap: 4px;
  margin-left: auto;
}

.app-menu-lang-options button {
  border: 1px solid var(--border);
  border-radius: 999px;
  min-width: 34px;
  padding: 4px 7px;
  background: var(--surface);
  color: var(--hint);
  font: inherit;
  font-size: 11px;
  font-weight: 850;
  line-height: 1.05;
  cursor: pointer;
}

.app-menu-lang-options button.selected {
  border-color: color-mix(in srgb, var(--accent) 38%, transparent);
  background: var(--accent);
  color: var(--accent-text);
}

.app-menu-language-row {
  gap: 9px;
}

.app-menu-label {
  min-width: 0;
}

/* Re-added (not just declared once) by app.js on every navigation, not
   only on first load — this is the single most-repeated moment in the
   whole app, so it's worth more than an instant opacity flicker. */
#app.screen-enter {
  animation: fadeIn 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  #app.screen-enter {
    animation: none;
  }
}

@keyframes popIn {
  from { opacity: 0; transform: scale(0.94); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes softRiseIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes softScaleIn {
  from { opacity: 0; transform: translateY(5px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes softLeaveOut {
  from { opacity: 1; transform: translateY(0) scale(1); max-height: 240px; }
  to { opacity: 0; transform: translateY(-4px) scale(0.985); max-height: 0; }
}

@keyframes menuPopoverIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes menuPopoverOut {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(-6px) scale(0.96); }
}

@keyframes shimmer {
  0% { background-position: -200px 0; }
  100% { background-position: 200px 0; }
}

/* ---------- layout ---------- */

.page {
  padding: 16px 16px 84px;
  max-width: 560px;
  margin: 0 auto;
}

/* Auth screens (login/register/reset) are the one place the app is meant
   to be used in a full-width desktop browser, not just a phone-width
   Telegram WebView — .page's 560px cap reads as a small, empty-feeling
   form floating in a huge browser window there, so this widens just those
   screens and splits them into a form column + description column. */
.page.auth-layout {
  max-width: 1180px;
  /* Centered (inherits .page's "margin: 0 auto") — a hard left pin was
     tried here and read as too far off to one side; centered is what
     actually looks balanced with the plane/form/info group as a whole. */
  margin: 0 auto;
}

.auth-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}

@media (min-width: 760px) {
  .auth-layout {
    grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
    align-items: center;
    min-height: calc(100vh - 100px);
  }
}

/* The plane column only makes sense once there's real width to spare
   (same breakpoint the two-column layout itself needs) — on a phone-width
   screen it would just eat space the form needs. */
@media (min-width: 980px) {
  .auth-layout {
    grid-template-columns: minmax(0, 300px) minmax(0, 420px) minmax(0, 1fr);
  }
}

.auth-form-col,
.auth-info-col {
  min-width: 0;
}

/* The login/register/reset form lives inside a boarding-pass-styled card
   instead of a plain block — ties the "big plane" idea to the actual UI
   the user interacts with, rather than only to decoration in the margins.
   Rebuilt fresh on every screen (innerHTML swap on navigate), so the
   arrival animation below replays every time you switch between
   login <-> register <-> reset, reading as a new pass being issued each
   time rather than a static card that happens to have plane styling. */
.boarding-card {
  position: relative;
  background: var(--section-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  animation: cardArrive 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  /* Real notch cutouts, punched through the card's own border and
     background via a mask — not an overlay circle colored to match the
     page (that approach left a 1px sliver of the card's own border
     visible right where the circle got clipped by overflow:hidden,
     since overflow only clips descendants, never the box's own border).
     A mask removes that region from the box entirely, border included,
     so there's nothing left to draw a line there. 90px down the card
     matches .boarding-card-perf's position (76px header strip height +
     14px margin-top); every screen uses the same header strip markup,
     so this stays correct across login/register/reset.
     mask-composite must be "intersect" on BOTH layers, not "add,
     intersect" — verified in a standalone test page: "add, intersect"
     silently produced no cutouts at all (both layers canceled out),
     while "intersect, intersect" punches both holes correctly. Legacy
     -webkit-mask-composite (source-over/source-in) also failed the same
     test, so it's left out rather than shipping a value confirmed wrong. */
  -webkit-mask-image:
    radial-gradient(circle at 0 90px, transparent 9px, #000 9.5px),
    radial-gradient(circle at 100% 90px, transparent 9px, #000 9.5px);
  mask-image:
    radial-gradient(circle at 0 90px, transparent 9px, #000 9.5px),
    radial-gradient(circle at 100% 90px, transparent 9px, #000 9.5px);
  mask-composite: intersect, intersect;
}

.boarding-card-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 22px;
  background: linear-gradient(135deg, #4a63dd 0%, #7b6ef6 100%);
  color: #fff;
}

.boarding-card-strip .plane-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  flex-shrink: 0;
}

.boarding-card-strip-text {
  min-width: 0;
}

.boarding-card-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  opacity: 0.8;
}

.boarding-card-strip-title {
  font-size: 17px;
  font-weight: 800;
  margin-top: 1px;
}

.boarding-card-perf {
  position: relative;
  /* Clear of the header strip, so the notch cutouts (masked on
     .boarding-card, centered 90px down — 76px strip + this 14px) land
     entirely on the card's own white surface instead of straddling the
     purple strip above. */
  margin-top: 14px;
  border-top: 2px dashed var(--border);
}

.boarding-card-body {
  padding: 22px;
}

@keyframes cardArrive {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .boarding-card {
    animation: none;
  }
}

/* ---------- auth ticket prototype moved into the real app ---------- */

.auth-ticket-page {
  max-width: 1180px;
  padding-top: 34px;
}

.auth-ticket {
  --auth-split: 56%;
  position: relative;
  display: grid;
  grid-template-columns: var(--auth-split) minmax(390px, 1fr);
  width: min(1060px, 100%);
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid var(--border);
  border-top-color: transparent;
  border-bottom-color: transparent;
  border-radius: 32px;
  background: var(--section-bg);
  box-shadow: 0 28px 88px rgba(51, 56, 74, 0.14);
  -webkit-mask-image:
    radial-gradient(circle at var(--auth-split) 0, transparent 0 34px, #000 35px),
    radial-gradient(circle at var(--auth-split) 100%, transparent 0 34px, #000 35px);
  mask-image:
    radial-gradient(circle at var(--auth-split) 0, transparent 0 34px, #000 35px),
    radial-gradient(circle at var(--auth-split) 100%, transparent 0 34px, #000 35px);
  mask-composite: intersect;
}

.auth-ticket::before {
  content: "";
  position: absolute;
  inset: 36px auto 36px var(--auth-split);
  z-index: 4;
  width: 0;
  border-left: 2px dashed rgba(51, 56, 74, 0.18);
  transform: translateX(-1px);
  pointer-events: none;
}

.auth-ticket-info,
.auth-ticket-form {
  min-width: 0;
}

.auth-ticket-info {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 28px 44px 28px 38px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0)),
    linear-gradient(135deg, var(--section-bg) 0%, var(--bg-secondary) 100%);
}

.auth-ticket-form {
  padding: 36px 34px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.68)),
    var(--bg-secondary);
}

.auth-ticket-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
  padding-right: 18px;
}

.auth-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px 13px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: var(--shadow-md);
  color: var(--text);
  font-size: 13px;
  font-weight: 850;
  white-space: nowrap;
}

.auth-brand-dot {
  width: 23px;
  height: 23px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--success), var(--accent) 58%, var(--warning));
}

.auth-ticket-code {
  display: grid;
  gap: 4px;
  text-align: right;
  color: var(--hint);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.auth-ticket-code strong {
  color: var(--text);
  font-size: 18px;
  letter-spacing: 0;
  text-transform: none;
}

.auth-hero-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 196px;
  gap: 20px;
  align-items: center;
  margin-bottom: 16px;
}

.auth-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  color: var(--success);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.auth-eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}

.auth-hero-title {
  max-width: 520px;
  margin: 0 0 14px;
  color: var(--text);
  font-size: 38px;
  line-height: 1.02;
  letter-spacing: 0;
}

.auth-hero-copy {
  max-width: 430px;
  margin: 0;
  color: var(--hint);
  font-size: 14.5px;
  line-height: 1.5;
}

.auth-plane-wrap {
  position: relative;
  display: grid;
  place-items: center;
  width: 206px;
  height: 206px;
  margin-left: -34px;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  perspective: 640px;
}

.auth-plane-glow {
  position: absolute;
  width: 148px;
  height: 148px;
  border-radius: 999px;
  background: var(--peach);
  filter: blur(8px);
  transform: translate(10px, 12px);
}

.auth-plane-orbit {
  position: absolute;
  width: 184px;
  height: 184px;
  border: 1.5px dashed rgba(79, 111, 217, 0.22);
  border-radius: 999px;
  transform: rotate(-15deg);
  transition: transform 0.5s ease, opacity 0.5s ease;
}

.auth-plane-asset {
  position: relative;
  z-index: 1;
  width: 172px;
  height: 172px;
  object-fit: contain;
  transform: rotate(-18deg) rotateY(0deg) rotateX(0deg) translateY(0) scale(1);
  transform-style: preserve-3d;
  filter: drop-shadow(0 16px 18px rgba(51, 56, 74, 0.18));
  transition: transform 0.35s ease, filter 0.35s ease;
  will-change: transform;
}

@media (hover: hover) and (pointer: fine) {
  .auth-plane-wrap:not(.is-settling):hover .auth-plane-asset {
    transform: rotate(-18deg) rotateY(-7deg) rotateX(0deg) translateY(-3px) scale(1);
  }
}

.auth-plane-wrap:focus-visible {
  outline: 3px solid rgba(79, 111, 217, 0.22);
  outline-offset: 6px;
  border-radius: 30px;
}

.auth-plane-wrap.is-flying .auth-plane-orbit {
  opacity: 0.48;
  transform: rotate(64deg) scale(1.05);
}

.auth-plane-wrap.is-flying .auth-plane-glow {
  animation: authGlowPulse 1.45s ease-in-out;
}

.auth-plane-wrap.is-flying .auth-plane-asset {
  animation: authPlaneBank 1.45s cubic-bezier(0.2, 0.9, 0.2, 1);
  filter: drop-shadow(0 24px 24px rgba(51, 56, 74, 0.2));
}

.auth-plane-wrap.is-settling .auth-plane-asset {
  transform: rotate(-18deg) rotateY(0deg) rotateX(0deg) translateY(0) scale(1);
}

.auth-suitcase-sticker {
  position: absolute;
  right: -2px;
  bottom: 4px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--accent);
  box-shadow: var(--shadow-md);
  transform: rotate(8deg);
}

.auth-suitcase-sticker svg {
  display: block;
  width: 100%;
  height: 100%;
}

@keyframes authPlaneBank {
  0% { transform: rotate(-18deg) rotateY(0deg) rotateX(0deg) translateY(0) scale(1); }
  18% { transform: rotate(-20deg) rotateY(-24deg) rotateX(8deg) translateY(-15px) scale(1.03); }
  38% { transform: rotate(-12deg) rotateY(22deg) rotateX(-5deg) translateY(-24px) scale(1.04); }
  58% { transform: rotate(-24deg) rotateY(-18deg) rotateX(6deg) translateY(-20px) scale(1.035); }
  78% { transform: rotate(-15deg) rotateY(10deg) rotateX(-2deg) translateY(-8px) scale(1.015); }
  100% { transform: rotate(-18deg) rotateY(0deg) rotateX(0deg) translateY(0) scale(1); }
}

@keyframes authGlowPulse {
  0% { transform: translate(10px, 12px) scale(1); opacity: 1; }
  45% { transform: translate(10px, 0) scale(1.08); opacity: 0.72; }
  100% { transform: translate(10px, 12px) scale(1); opacity: 1; }
}

.auth-route {
  display: grid;
  grid-template-columns: minmax(96px, 0.68fr) minmax(210px, 1.2fr) minmax(96px, 0.68fr);
  align-items: center;
  gap: 10px;
  margin: 14px 14px 18px 0;
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: var(--shadow-md);
}

.auth-airport {
  display: grid;
  gap: 4px;
}

.auth-airport.align-right {
  text-align: right;
}

.auth-airport-label {
  color: var(--hint);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.auth-airport-code {
  color: var(--text);
  font-size: 22px;
  font-weight: 950;
}

.auth-airport-name {
  color: var(--hint);
  font-size: 12px;
  font-weight: 700;
}

.auth-route-line {
  width: 100%;
  min-width: 176px;
  border-top: 2.4px dashed rgba(51, 56, 74, 0.24);
}

.auth-feature-grid,
.auth-mini-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-right: 14px;
}

.auth-feature-grid {
  margin-top: auto;
  margin-bottom: 14px;
}

.auth-feature-card,
.auth-mini-card {
  display: grid;
  align-content: start;
  gap: 9px;
  min-height: 104px;
  padding: 12px 11px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: var(--shadow-sm);
}

.auth-feature-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.auth-feature-ico {
  display: grid;
  place-items: center;
  width: 33px;
  height: 33px;
  flex: 0 0 auto;
  border-radius: 13px;
  background: var(--mint);
  color: var(--success);
}

.auth-feature-card:nth-child(2) .auth-feature-ico {
  background: var(--peach);
  color: var(--accent);
}

.auth-feature-card:nth-child(3) .auth-feature-ico {
  background: var(--peach);
  color: var(--accent);
}

.auth-feature-title {
  color: var(--text);
  font-size: 14px;
  font-weight: 900;
}

.auth-feature-text {
  color: var(--hint);
  font-size: 12px;
  line-height: 1.34;
}

.auth-currency-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-right: 14px;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.68);
  box-shadow: var(--shadow-sm);
}

.auth-currency-strip span {
  padding: 6px 8px;
  border-radius: 999px;
  background: var(--mint);
  color: var(--success);
  font-size: 11px;
  font-weight: 900;
}

.auth-currency-strip strong {
  min-width: 160px;
  flex: 1;
  color: var(--hint);
  font-size: 11px;
  font-weight: 800;
}

.auth-feature-text.compact {
  margin-top: 10px;
}

.auth-mini-title {
  color: var(--hint);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.auth-budget-value {
  margin-top: 7px;
  color: var(--text);
  font-size: 22px;
  font-weight: 950;
}

.auth-budget-bar {
  height: 9px;
  margin-top: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--lavender);
}

.auth-budget-bar span {
  display: block;
  width: 64%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--success));
}

.auth-currency-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 12px;
}

.auth-currency-chips span {
  padding: 6px 8px;
  border-radius: 999px;
  background: var(--mint);
  color: var(--success);
  font-size: 11px;
  font-weight: 900;
}

.auth-security-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 26px;
  border: 1px solid var(--border);
  border-radius: 26px;
  background: var(--section-bg);
  box-shadow: var(--shadow-md);
}

.auth-security-card--register {
  animation: authRegisterStretch 0.42s cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: top center;
}

@keyframes authRegisterStretch {
  from {
    opacity: 0.72;
    transform: scaleY(0.9) translateY(-10px);
  }
  to {
    opacity: 1;
    transform: scaleY(1) translateY(0);
  }
}

.auth-stub-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1.5px dashed var(--border);
}

.auth-stub-label {
  color: var(--hint);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.auth-form-title {
  margin: 7px 0 6px;
  color: var(--text);
  font-size: 28px;
  line-height: 1.08;
}

.auth-form-note {
  max-width: 315px;
  margin: 0;
  color: var(--hint);
  font-size: 14px;
  line-height: 1.45;
}

.auth-register-intro {
  margin-bottom: 16px;
}

.auth-password-step {
  display: none;
  animation: authStepIn 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

.auth-password-step.is-open {
  display: block;
}

@keyframes authStepIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.auth-form-badge {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: var(--mint);
  color: var(--success);
}

@media (min-width: 980px) {
  .auth-ticket-page {
    padding-top: 24px;
  }

  .auth-ticket--register .auth-ticket-form {
    padding: 28px 30px;
  }

  .auth-ticket--register .auth-security-card {
    padding: 22px;
  }

  .auth-ticket--register .auth-stub-top {
    margin-bottom: 12px;
    padding-bottom: 13px;
  }

  .auth-ticket--register .auth-form-title {
    margin-top: 4px;
    font-size: 26px;
  }

  .auth-ticket--register .auth-form-note {
    font-size: 13px;
    line-height: 1.32;
  }

  .auth-ticket--register .auth-register-intro {
    display: none;
  }

  .auth-ticket--register .field {
    margin-bottom: 10px;
    padding: 10px;
  }

  .auth-ticket--register .field-label {
    margin-bottom: 5px;
    font-size: 12.5px;
  }

  .auth-ticket--register .input {
    padding: 11px 12px;
  }

  .auth-ticket--register .pw-rules {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 4px;
    justify-content: flex-start;
    margin: 2px 2px 9px;
  }

  .auth-ticket--register .pw-rule {
    flex: 0 0 auto;
    min-width: 0;
    width: fit-content;
    /* Left padding needs to clear the "•" bullet from .pw-rule::before
       (positioned at left:8px) with actual room to spare — at 16px this
       and the narrower breakpoint below were tight enough that the
       bullet and the label text rendered touching, with no visible gap
       between them. */
    padding-inline: 19px 7px;
    font-size: 11px;
    white-space: nowrap;
  }

  .auth-ticket--register .pw-rule[data-rule="len"] {
    order: 1;
  }

  .auth-ticket--register .pw-rule[data-rule="upper"] {
    order: 6;
  }

  .auth-ticket--register .pw-rule[data-rule="digit"] {
    order: 4;
  }

  .auth-ticket--register .pw-rule[data-rule="lower"] {
    order: 5;
  }

  .auth-ticket--register .pw-rule[data-rule="special"] {
    order: 2;
  }

  .auth-ticket--register .pw-rule[data-rule="match"] {
    order: 7;
  }

  .auth-ticket--register .pw-rule-break {
    display: block;
    flex: 0 0 100%;
    order: 3;
    height: 0;
  }

  .auth-ticket--register .auth-ticket-meta {
    padding-top: 14px;
  }

  .auth-ticket--register .spacer {
    height: 8px;
  }

  .auth-ticket--register .spacer-lg {
    height: 10px;
  }
}

.auth-ticket-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: auto;
  padding-top: 22px;
}

.auth-meta-cell {
  min-width: 0;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.auth-meta-label {
  color: var(--hint);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.auth-meta-value {
  margin-top: 5px;
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

@media (max-width: 979px) {
  .app-menu {
    top: calc(env(safe-area-inset-top, 0px) + 14px);
    right: 10px;
  }

  .auth-ticket-page {
    padding: 16px 12px 84px;
    width: 390px;
    max-width: 100%;
    margin-left: 0;
    margin-right: auto;
    overflow-x: hidden;
  }

  .auth-ticket {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    -webkit-mask-image: none;
    mask-image: none;
    width: 100%;
    max-width: 100%;
  }

  .auth-ticket::before {
    display: none;
  }

  .auth-ticket-form {
    order: 1;
    justify-self: center;
    width: calc(100% - 10px);
    min-width: 0;
    padding: 0;
    background: transparent;
  }

  .auth-ticket-info {
    position: relative;
    order: 2;
    justify-self: center;
    width: calc(100% - 10px);
    min-width: 0;
    padding: 18px 18px 20px;
    border: 1px solid var(--border);
    border-radius: 26px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0)),
      var(--bg-secondary);
    box-shadow: var(--shadow-md);
    -webkit-mask-image: radial-gradient(circle at 50% 0, transparent 0 18px, #000 18.5px);
    mask-image: radial-gradient(circle at 50% 0, transparent 0 18px, #000 18.5px);
  }

  .auth-security-card {
    position: relative;
    min-height: 0;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 22px;
    border-radius: 26px;
    overflow: visible;
    -webkit-mask-image: radial-gradient(circle at 50% 0, transparent 0 18px, #000 18.5px);
    mask-image: radial-gradient(circle at 50% 0, transparent 0 18px, #000 18.5px);
  }

  .auth-security-card::before,
  .auth-ticket-info::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 28px;
    bottom: 28px;
    width: 0;
    border-left: 2px dashed rgba(51, 56, 74, 0.18);
    pointer-events: none;
  }

  .auth-security-card::before {
    left: 0;
  }

  .auth-ticket-info::before {
    right: 0;
  }

  .auth-stub-top {
    grid-template-columns: 1fr;
  }

  .auth-form-badge {
    display: none;
  }

  .auth-form-title {
    font-size: 28px;
  }

  .auth-register-intro {
    display: none;
  }

  .auth-security-card .auth-stub-top {
    margin-bottom: 14px;
    padding-bottom: 14px;
  }

  .auth-account-step,
  .auth-password-step.is-open {
    animation: authStepIn 0.24s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .auth-security-card .field {
    padding: 10px;
  }

  .auth-security-card .password-control .input {
    padding-right: 96px;
  }

  .auth-security-card .password-toggle {
    right: 7px;
    max-width: 86px;
    padding: 7px 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .auth-ticket--register .pw-rules {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 4px;
    justify-content: flex-start;
    margin: 2px 2px 9px;
  }

  .auth-ticket--register .pw-rule {
    flex: 0 0 auto;
    min-width: 0;
    width: fit-content;
    max-width: 100%;
    /* Same fix as the wider breakpoint above — 13px left padding wasn't
       enough room for the "•" bullet (left:8px) to clear the label text,
       so they rendered with no visible gap between them. */
    padding-inline: 17px 6px;
    font-size: 10.3px;
    white-space: nowrap;
  }

  .auth-ticket--register .pw-rule[data-rule="len"] {
    order: 1;
  }

  .auth-ticket--register .pw-rule[data-rule="upper"] {
    order: 6;
  }

  .auth-ticket--register .pw-rule[data-rule="digit"] {
    order: 4;
  }

  .auth-ticket--register .pw-rule[data-rule="lower"] {
    order: 5;
  }

  .auth-ticket--register .pw-rule[data-rule="special"] {
    order: 2;
  }

  .auth-ticket--register .pw-rule[data-rule="match"] {
    order: 7;
  }

  .auth-ticket--register .pw-rule-break {
    display: block;
    flex: 0 0 100%;
    order: 3;
    height: 0;
  }

  .auth-form-note {
    max-width: none;
  }

  .auth-hero-row {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-bottom: 12px;
  }

  .auth-plane-wrap {
    position: relative;
    right: auto;
    top: auto;
    justify-self: center;
    width: 150px;
    height: 150px;
    margin: -4px auto 2px;
    opacity: 0.96;
  }

  .auth-plane-asset {
    width: 128px;
    height: 128px;
  }

  .auth-plane-orbit {
    width: 136px;
    height: 136px;
  }

  .auth-suitcase-sticker {
    right: 0;
    bottom: 4px;
    width: 42px;
    height: 42px;
  }

  .auth-hero-title {
    max-width: 300px;
    font-size: 31px;
  }

  .auth-hero-copy {
    max-width: none;
    font-size: 13.5px;
  }

  .auth-feature-grid,
  .auth-mini-grid {
    grid-template-columns: 1fr;
    margin-right: 0;
  }

  .auth-feature-grid {
    gap: 8px;
  }

  .auth-feature-card {
    min-height: 0;
    grid-template-columns: 33px minmax(0, 1fr);
    align-items: center;
    padding: 10px;
  }

  .auth-feature-head {
    display: contents;
  }

  .auth-feature-text {
    display: none;
  }

  .auth-currency-strip {
    margin-right: 0;
  }

  .auth-route,
  .auth-ticket-top {
    margin-right: 0;
  }

  .auth-route {
    grid-template-columns: minmax(68px, 0.75fr) minmax(100px, 1fr) minmax(68px, 0.75fr);
    gap: 8px;
    padding: 11px 12px;
  }

  .auth-route-line {
    min-width: 100px;
  }
}

@media (min-width: 700px) and (max-width: 979px) {
  .auth-ticket-page {
    width: min(560px, 100%);
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .auth-plane-wrap.is-flying .auth-plane-asset,
  .auth-plane-wrap.is-flying .auth-plane-glow {
    animation: none;
  }
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  animation: softRiseIn 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

.page-title {
  font-size: 23px;
  font-weight: 800;
  letter-spacing: 0;
  margin: 0;
}

.page-subtitle {
  color: var(--hint);
  font-size: 14px;
  margin-top: 4px;
}

.section {
  margin-bottom: 22px;
}

.section-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--hint);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 0 2px 10px;
  animation: softRiseIn 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- cards ---------- */

.card {
  background: var(--section-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 16px;
  animation: softScaleIn 0.22s cubic-bezier(0.22, 1, 0.36, 1);
  transition: transform 0.16s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.hero-card {
  background: var(--section-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 16px;
  animation: softScaleIn 0.22s cubic-bezier(0.22, 1, 0.36, 1);
  transition: transform 0.16s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.card + .card {
  margin-top: 10px;
}

.card-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--section-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition: transform 0.16s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
  animation: popIn 0.22s ease;
}

.card-row:hover {
  border-color: color-mix(in srgb, var(--accent) 24%, var(--border));
  background: color-mix(in srgb, var(--accent) 4%, var(--section-bg));
  box-shadow: 0 8px 22px rgba(51, 56, 74, 0.08);
  transform: translateY(-1px);
}

.card-row:active {
  transform: scale(0.985);
}

.card-row + .card-row {
  margin-top: 8px;
}

.trip-row {
  padding: 16px;
}

.travel-card-kicker.muted {
  color: var(--hint);
  opacity: 1;
}

.expense-feed-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 2px;
  border-bottom: 1px solid var(--divider);
  cursor: pointer;
  animation: popIn 0.22s ease;
  transition: transform 0.16s ease, background 0.18s ease;
}

.expense-feed-row:last-child {
  border-bottom: none;
}

.expense-feed-row:hover {
  background: color-mix(in srgb, var(--accent) 4%, transparent);
  transform: translateY(-1px);
}

.expense-feed-row:active {
  transform: scale(0.99);
}

/* ---------- modern expense tracker direction ---------- */

.tracker-page {
  padding-top: 14px;
}

.tracker-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.tracker-eyebrow {
  color: var(--hint);
  font-size: 12px;
  font-weight: 750;
  margin-bottom: 3px;
}

.tracker-hero {
  border-radius: var(--radius-md);
  padding: 18px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  margin-bottom: 18px;
  color: var(--text);
  overflow: hidden;
  position: relative;
}

.soft-peach {
  background: var(--peach);
}

/* The one deliberately bold, saturated moment on the trip dashboard — the
   total-spent card. Everything else on the screen stays flat/quiet so this
   card actually reads as a highlight instead of one more pastel tint among
   several. Not used elsewhere (stats/debts keep the quieter soft-peach). */
.bold-hero {
  background: linear-gradient(135deg, #4a63dd 0%, #7b6ef6 100%);
  border-color: transparent;
  box-shadow: 0 14px 32px -10px rgba(79, 90, 217, 0.5);
  color: #fff;
}
.bold-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 85% -10%, rgba(255, 255, 255, 0.25), transparent 55%);
  pointer-events: none;
}

/* The plane column: the parking spot for the canvas flight scene (see
   planeScene.js). The canvas itself is a fixed layer covering the WHOLE
   viewport, painted underneath the form/info cards (columns get z-index
   above it), so on click the plane flies a circuit around the entire
   screen, dipping behind the cards. The dock div is just the click
   target and layout anchor for the parking spot.
   prefers-reduced-motion is handled in JS (parked plane, no flight). */
.plane-dock {
  display: none;
  position: relative;
  align-self: stretch;
  min-height: 480px;
  /* Pointer cursor only over the plane's actual pixels (toggled in JS via
     a hit test against the sprite's alpha channel), not the whole column
     — the column is much bigger than the parked plane sprite. */
  cursor: default;
}

.plane-dock.plane-hover {
  cursor: pointer;
}

@media (min-width: 980px) {
  .plane-dock {
    display: block;
  }
}

.plane-scene {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.auth-form-col,
.auth-info-col {
  position: relative;
  z-index: 1;
}

.bold-hero .tracker-kicker,
.bold-hero .tracker-hero-footer span:last-child {
  color: rgba(255, 255, 255, 0.75);
}
.bold-hero .tracker-hero-chip {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}
.bold-hero .badge-success {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}
.bold-hero .badge-danger {
  background: rgba(255, 255, 255, 0.9);
  color: var(--danger);
}
.bold-hero .progress-track {
  background: rgba(255, 255, 255, 0.22);
}
.bold-hero .progress-fill {
  background: #fff;
}
.progress-fill.over {
  background: var(--danger);
}
.bold-hero .metric-card {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.22);
}
.bold-hero .metric-label {
  color: rgba(255, 255, 255, 0.7);
}
.bold-hero .metric-value {
  color: #fff;
}

.soft-mint {
  background: var(--mint);
}

.tracker-kicker {
  color: var(--hint);
  font-size: 12px;
  font-weight: 750;
  margin-bottom: 4px;
}

.tracker-hero-title {
  font-size: 28px;
  line-height: 1.05;
  font-weight: 850;
  overflow-wrap: anywhere;
}

.num {
  font-variant-numeric: tabular-nums;
}

.num.bump {
  animation: numBump 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes numBump {
  0% { transform: scale(1); }
  35% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .num.bump {
    animation: none;
  }
}

.landing-feature {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 2px;
}

.landing-feature-ico {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--surface-strong);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.landing-feature-title {
  font-weight: 700;
  font-size: 14.5px;
}

.landing-feature-sub {
  color: var(--hint);
  font-size: 13px;
  margin-top: 2px;
  line-height: 1.4;
}

.tracker-hero-note,
.tracker-hero-footer {
  color: var(--hint);
  font-size: 13px;
  font-weight: 650;
  margin-top: 10px;
}

.tracker-hero-row,
.tracker-hero-footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.tracker-hero-footer {
  align-items: center;
}

.tracker-hero-chip {
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
}

.tracker-trip-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  animation: popIn 0.22s ease;
  transition: transform 0.16s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.tracker-trip-card:hover {
  border-color: color-mix(in srgb, var(--accent) 22%, var(--border));
  background: color-mix(in srgb, var(--accent) 4%, var(--surface));
  box-shadow: 0 10px 28px rgba(51, 56, 74, 0.1);
  transform: translateY(-1px);
}

.tracker-trip-card:active {
  transform: scale(0.985);
}

.tracker-trip-card + .tracker-trip-card {
  margin-top: 10px;
}

.trip-card-icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: var(--peach);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 850;
  flex-shrink: 0;
}

.trip-card-budget {
  font-size: 13px;
  font-weight: 850;
  color: var(--text);
  max-width: 112px;
  text-align: right;
  overflow-wrap: anywhere;
}

.tracker-action-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.tracker-action {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--section-bg);
  color: var(--text);
  padding: 10px 4px;
  box-shadow: var(--shadow-sm);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
  text-align: center;
  transition: transform 0.16s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.tracker-action:hover {
  border-color: color-mix(in srgb, var(--accent) 22%, var(--border));
  background: color-mix(in srgb, var(--accent) 4%, var(--section-bg));
  box-shadow: 0 8px 22px rgba(51, 56, 74, 0.08);
  transform: translateY(-1px);
}

.tracker-action:active {
  transform: scale(0.985);
}

.tracker-action span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.action-ico {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tint-purple { background: color-mix(in srgb, #7b6ef6 20%, transparent); color: #7b6ef6; }
.tint-blue { background: color-mix(in srgb, #58a9c7 20%, transparent); color: #3d86a0; }
.tint-mint { background: color-mix(in srgb, #48a987 20%, transparent); color: #3d9e82; }

html[data-theme="dark"] .tint-blue { color: #78bfd4; }
html[data-theme="dark"] .tint-mint { color: #9dd6c2; }

.tracker-add-button {
  position: fixed;
  right: 18px;
  bottom: 24px;
  height: 46px;
  border: none;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-text);
  padding: 0 15px;
  box-shadow: var(--shadow-glow);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 850;
  cursor: pointer;
  z-index: 40;
  transition: transform 0.16s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.tracker-add-button:hover {
  box-shadow: 0 16px 32px rgba(79, 111, 217, 0.24);
  transform: translateY(-1px);
}

.tracker-add-button:active {
  transform: scale(0.96);
}

.card-emoji {
  font-size: 26px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-radius: 12px;
  flex-shrink: 0;
}

.icon {
  display: inline-block;
  vertical-align: -0.15em;
  flex-shrink: 0;
}

.icon-tile {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  background: var(--divider);
  color: var(--text);
  flex-shrink: 0;
}

.icon-tile.soft {
  background: var(--divider);
  color: var(--text);
}

.card-body {
  flex: 1;
  min-width: 0;
}

.card-title {
  font-weight: 700;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-sub {
  font-size: 13px;
  color: var(--hint);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-trail {
  color: var(--hint);
  font-size: 20px;
  flex-shrink: 0;
}

.row-check {
  color: var(--accent);
  transform: scale(1);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease;
}

/* ---------- buttons ---------- */

.btn {
  border: none;
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform 0.14s ease, opacity 0.14s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
  width: 100%;
  touch-action: manipulation;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn .icon {
  margin-left: -2px;
}

.btn:active {
  transform: scale(0.97);
}

.btn:disabled {
  opacity: 0.5;
  pointer-events: none;
}

.btn-primary {
  background: var(--accent);
  color: var(--accent-text);
  box-shadow: var(--shadow-glow);
}

.btn-secondary {
  background: var(--surface);
  color: var(--text);
  border: 1.5px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.btn-ghost {
  background: transparent;
  color: var(--link);
}

.btn-danger {
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  color: var(--danger);
}

.btn-row {
  display: flex;
  gap: 10px;
}

.fab {
  position: fixed;
  right: 18px;
  bottom: 24px;
  min-width: 58px;
  height: 50px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-text);
  border: none;
  font-size: 26px;
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.18s ease, background 0.18s ease;
  z-index: 40;
}

.fab:hover {
  transform: translateY(-1px);
}

.fab-extended {
  width: auto;
  padding: 0 18px;
  font-size: 20px;
  font-weight: 800;
}

.fab-compact {
  width: auto;
  min-width: 0;
  padding: 0 14px;
  font-size: 16px;
  font-weight: 800;
}

.fab-compact span {
  font-size: 13px;
  font-weight: 800;
}

.fab-extended span + span {
  font-size: 14px;
  font-weight: 800;
}

.fab:active {
  transform: scale(0.92);
}

/* ---------- forms ---------- */

.field {
  margin-bottom: 15px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  animation: softRiseIn 0.22s cubic-bezier(0.22, 1, 0.36, 1);
  transition: transform 0.16s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.field-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--hint);
  margin-bottom: 6px;
  margin-left: 0;
}

.field-label.required::after {
  content: " *";
  color: var(--danger);
  font-weight: 900;
}

.code-field {
  padding-top: 10px;
}

.code-field .field-label {
  margin-bottom: 2px;
}

.field-hint {
  color: var(--hint);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.42;
}

.motion-exit {
  overflow: hidden;
  pointer-events: none;
  animation: softLeaveOut 0.17s ease forwards !important;
}

#cat-rename-form > *,
#f-cat-new-form > *,
#f-rate-field > *,
#f-shared-section > *,
#f-shares > *,
#invite-box > *,
#receipt-ocr-result > *,
[data-settle-form] > *,
[data-edit-form] > * {
  animation: softRiseIn 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.input {
  width: 100%;
  padding: 13px 14px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 16px;
  font-family: inherit;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, transform 0.14s ease;
}

textarea.input {
  min-height: 112px;
  max-height: 240px;
  min-width: 100%;
  max-width: 100%;
  resize: vertical;
  line-height: 1.45;
}

.password-control {
  position: relative;
}

.password-control .input {
  padding-right: 92px;
}

.password-toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  border-radius: 999px;
  padding: 7px 10px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent);
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}

.password-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

.auth-link {
  color: var(--link);
  text-decoration: none;
  font-weight: 650;
}

.auth-link:hover {
  text-decoration: none;
}

/* Live password requirement list (see passwordRules.js). These are not
   checkboxes: they are plain requirements that change color as the user
   types, while the server remains the real gate. */
.pw-rules {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 2px 10px;
  padding: 0;
  list-style: none;
}

.pw-rule {
  position: relative;
  padding: 5px 8px 5px 18px;
  border: 1px solid color-mix(in srgb, var(--danger) 20%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--danger) 6%, transparent);
  font-size: 11.5px;
  font-weight: 650;
  line-height: 1.1;
  color: var(--danger);
  transition: color 0.15s ease, opacity 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.pw-rule-break {
  display: none;
}

.pw-rule::before {
  content: "•";
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: currentColor;
}

.pw-rule.met {
  border-color: color-mix(in srgb, var(--success) 24%, transparent);
  background: color-mix(in srgb, var(--success) 9%, transparent);
  color: var(--success);
}

/* Briefly flagged on a failed submit (see flashInvalidRules in
   passwordRules.js) — points at exactly which requirement is still
   unmet instead of leaving the user to guess from a generic toast. */
.pw-rule.invalid {
  color: var(--danger);
  animation: pwRuleShake 0.4s ease;
}

@keyframes pwRuleShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-3px); }
  40% { transform: translateX(3px); }
  60% { transform: translateX(-2px); }
  80% { transform: translateX(2px); }
}

/* Same idea for a plain input — e.g. "passwords don't match" — a red
   border pulse on the specific field instead of only a toast. */
.input.field-invalid {
  border-color: var(--danger);
  animation: fieldShake 0.4s ease;
}

.input[aria-invalid="true"] {
  border-color: var(--danger);
}

.field-error {
  margin: 7px 2px 0;
  color: var(--danger);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
}

.field-error[hidden] {
  display: none;
}

.auth-submit-error {
  margin-top: 9px;
  text-align: center;
}

/* ---------- privacy ---------- */

.privacy-page {
  max-width: 760px;
  height: 100dvh;
  max-height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-top: 28px;
  padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  -webkit-overflow-scrolling: touch;
}

.privacy-card {
  display: grid;
  gap: 13px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--section-bg);
  box-shadow: var(--shadow-md);
  animation: softScaleIn 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

.privacy-lead {
  margin: 0;
  color: var(--hint);
  font-size: 14px;
  line-height: 1.42;
}

.privacy-section {
  padding-top: 11px;
  border-top: 1px solid var(--divider);
  animation: softRiseIn 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.privacy-section:first-of-type {
  padding-top: 0;
  border-top: 0;
}

.privacy-section h2 {
  margin: 0 0 6px;
  color: var(--text);
  font-size: 15px;
  line-height: 1.15;
}

.privacy-section ul {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-left: 18px;
  color: var(--hint);
  font-size: 13px;
  line-height: 1.35;
}

.privacy-section a {
  color: var(--accent);
  text-decoration: none;
}

.privacy-processing-list {
  display: grid;
  gap: 9px;
}

.privacy-processing-item {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface) 54%, var(--section-bg));
  animation: softRiseIn 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.privacy-processing-item h3 {
  margin: 0;
  color: var(--text);
  font-size: 14.5px;
  font-weight: 850;
  line-height: 1.18;
}

.privacy-processing-copy {
  margin: 0;
  color: var(--hint);
  font-size: 13.5px;
  font-weight: 560;
  line-height: 1.46;
}

.privacy-processing-meta {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 8px;
}

.privacy-processing-meta > div {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--divider);
  border-radius: 10px;
  background: var(--section-bg);
}

.privacy-processing-meta span {
  display: block;
  color: var(--hint);
  font-size: 10.5px;
  font-weight: 850;
  letter-spacing: 0.05em;
  line-height: 1.1;
  margin-bottom: 4px;
  text-transform: uppercase;
}

.privacy-processing-meta strong {
  display: block;
  color: var(--text);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.34;
}

.privacy-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.privacy-actions .btn {
  width: auto;
  padding-inline: 18px;
}

.privacy-back .icon {
  transform: rotate(180deg);
}

@media (max-width: 520px) {
  .privacy-processing-meta {
    grid-template-columns: 1fr;
  }

  .privacy-actions {
    display: grid;
  }

  .privacy-actions .btn {
    width: 100%;
  }
}

.account-panel {
  display: grid;
  gap: 13px;
  animation: softRiseIn 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.account-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  animation: softScaleIn 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.account-avatar {
  width: 42px;
  height: 42px;
  font-size: 14px;
  background: var(--accent);
  color: var(--accent-text);
  flex-shrink: 0;
}

.account-name {
  color: var(--text);
  font-size: 15px;
  font-weight: 850;
}

.account-email,
.account-note {
  color: var(--hint);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.38;
}

.account-note {
  margin: 0;
}

.account-note.small {
  font-size: 12.5px;
}

.about-modal .modal-sheet {
  max-width: 430px;
}

.about-modal .modal-header {
  margin-bottom: 6px;
}

.account-modal .modal-sheet {
  max-width: 520px;
}

@media (min-width: 760px) {
  .modal-backdrop.account-modal {
    align-items: center;
    padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom));
  }

  .modal-backdrop.account-modal .modal-sheet {
    width: min(100%, 520px);
    max-height: 86vh;
    border-radius: 22px;
    padding-bottom: 16px;
    animation: modalPop 0.18s ease;
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.34);
  }
}

.about-panel p {
  margin: 0;
  color: var(--hint);
  font-size: 15px;
  font-weight: 650;
  line-height: 1.48;
}

.account-message {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--hint);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  animation: softRiseIn 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}

.account-message.success {
  background: color-mix(in srgb, var(--success) 12%, transparent);
  color: var(--success);
}

.account-message.danger {
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  color: var(--danger);
}

.account-form {
  display: grid;
  gap: 10px;
  animation: softRiseIn 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}

.account-form-compact {
  gap: 7px;
}

.account-form-compact .field-label {
  margin-bottom: 0;
}

.account-divider {
  height: 1px;
  margin: 16px 0 4px;
  background: var(--divider, var(--border));
}

.account-data {
  display: grid;
  gap: 10px;
}

.account-data-head {
  font-size: 13px;
  font-weight: 700;
  color: var(--hint);
  letter-spacing: 0.02em;
}

.cookie-consent-card {
  position: fixed;
  left: 50%;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 500;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  width: min(620px, calc(100vw - 28px));
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: color-mix(in srgb, var(--section-bg) 97%, transparent);
  box-shadow: 0 16px 46px rgba(51, 56, 74, 0.18);
  backdrop-filter: blur(16px);
  transform: translateX(-50%);
  animation: cookieCardIn 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

.cookie-consent-card.is-closing {
  opacity: 0;
  transform: translateX(-50%) translateY(8px);
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.cookie-consent-card.is-required {
  border-color: color-mix(in srgb, var(--accent) 26%, var(--border));
  box-shadow: 0 18px 50px rgba(51, 56, 74, 0.24);
}

.cookie-consent-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 11%, transparent);
  color: var(--accent);
  font-size: 17px;
  font-weight: 900;
}

.cookie-consent-card.is-required .cookie-consent-mark {
  background: var(--accent);
  color: var(--accent-text);
}

.cookie-consent-content {
  min-width: 0;
}

.cookie-consent-title {
  color: var(--text);
  font-size: 14px;
  font-weight: 850;
  line-height: 1.18;
}

.cookie-consent-content p {
  margin: 3px 0 0;
  color: var(--hint);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.32;
}

.cookie-consent-link {
  display: inline-block;
  margin-top: 4px;
  color: var(--accent);
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 750;
}

.cookie-consent-actions {
  display: flex;
  gap: 6px;
}

.cookie-consent-actions button {
  border: 0;
  border-radius: 999px;
  padding: 8px 11px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 850;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.14s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.cookie-consent-actions button:hover {
  transform: translateY(-1px);
}

.cookie-consent-actions button:active {
  transform: scale(0.96);
}

.cookie-consent-later {
  background: var(--surface);
  color: var(--hint);
  border: 1px solid var(--border) !important;
}

.cookie-consent-allow {
  background: var(--accent);
  color: var(--accent-text);
  box-shadow: var(--shadow-glow);
}

@keyframes cookieCardIn {
  from { opacity: 0; transform: translateX(-50%) translateY(14px) scale(0.98); }
  to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

@media (max-width: 620px) {
  .cookie-consent-card {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
  }

  .cookie-consent-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
}

@keyframes fieldShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}

@media (prefers-reduced-motion: reduce) {
  .pw-rule.invalid,
  .input.field-invalid {
    animation: none;
  }
}

.input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent);
}

input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-sm);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid var(--border);
  transition: transform 0.14s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
  white-space: nowrap;
  touch-action: manipulation;
  animation: chipIn 0.16s cubic-bezier(0.22, 1, 0.36, 1);
}

button,
a,
.select-field,
.currency-trigger,
.currency-option,
.toggle-option,
.card-row,
.expense-feed-row,
.tracker-action {
  touch-action: manipulation;
}

.chip .icon {
  margin-right: 5px;
}

.chip .icon-trail {
  margin-right: 0;
  margin-left: 4px;
}

.select-field {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--filter-border);
  background: var(--filter-bg);
  color: var(--filter-text);
  box-shadow: 0 3px 10px rgba(79, 111, 217, 0.08);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  min-width: 88px;
  width: max-content;
  max-width: 100%;
  transition: transform 0.14s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.chip:hover,
.select-field:hover {
  border-color: var(--filter-open-border);
  background: var(--filter-open-bg);
  box-shadow: 0 0 0 4px rgba(79, 111, 217, 0.1), var(--shadow-sm);
}

.select-chevron {
  color: var(--filter-text);
  font-size: 12px;
  margin-left: auto;
}

.chip:active {
  transform: scale(0.95);
}

.select-field:active {
  transform: scale(0.985);
}

.chip.selected {
  border-color: var(--filter-border);
  background: var(--filter-bg);
  color: var(--filter-text);
}

@keyframes chipIn {
  from { opacity: 0; transform: translateY(3px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.currency-picker {
  position: relative;
}

.currency-selected-row {
  align-items: center;
}

.currency-add-chip {
  min-width: 38px;
  min-height: 36px;
}

.currency-multi-picker.open .currency-add-chip {
  border-color: var(--filter-open-border);
  background: var(--filter-open-bg);
  color: var(--filter-text);
  box-shadow: 0 0 0 4px rgba(79, 111, 217, 0.1), var(--shadow-sm);
}

.currency-trigger {
  width: 100%;
  min-height: 58px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1.5px solid var(--filter-border);
  border-radius: var(--radius-md);
  background: var(--filter-bg);
  color: var(--text);
  box-shadow: 0 3px 10px rgba(79, 111, 217, 0.08);
  cursor: pointer;
  text-align: left;
  transition:
    transform 0.14s ease,
    border-color 0.16s ease,
    background 0.16s ease,
    box-shadow 0.16s ease;
}

.currency-trigger:hover,
.currency-picker.open .currency-trigger {
  border-color: var(--filter-open-border);
  background: var(--filter-open-bg);
  box-shadow: 0 0 0 5px rgba(79, 111, 217, 0.1), var(--shadow-sm);
}

.currency-trigger:active {
  transform: scale(0.985);
}

.currency-title {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.currency-search-row .currency-title {
  flex: 1;
}

.currency-code {
  flex-shrink: 0;
  color: var(--filter-text);
  font-size: 16px;
  font-weight: 850;
  line-height: 1.15;
}

.currency-name {
  min-width: 0;
  overflow: hidden;
  color: var(--hint);
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.currency-chevron {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--surface);
  color: var(--hint);
  transform: rotate(90deg);
  transition:
    transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1),
    background 0.14s ease,
    color 0.14s ease;
}

.currency-picker.open .currency-chevron {
  background: var(--filter-bg);
  color: var(--filter-text);
  transform: rotate(-90deg);
}

.currency-popover {
  position: relative;
  z-index: 20;
  display: grid;
  gap: 10px;
  max-height: 0;
  margin-top: 0;
  padding: 0 12px;
  overflow: hidden;
  border: 0 solid transparent;
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--section-bg) 98%, transparent);
  box-shadow: none;
  opacity: 0;
  transform: translateY(-6px) scale(0.99);
  transform-origin: top center;
  pointer-events: none;
  will-change: max-height, opacity, transform;
  transition:
    max-height 0.24s cubic-bezier(0.2, 0.8, 0.2, 1),
    margin-top 0.18s ease,
    padding 0.18s ease,
    border-color 0.14s ease,
    box-shadow 0.18s ease,
    opacity 0.14s ease,
    transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.currency-picker.open .currency-popover {
  max-height: 372px;
  margin-top: 10px;
  padding: 12px;
  border-width: 1px;
  border-color: var(--filter-border);
  box-shadow: var(--shadow-md);
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.currency-search {
  min-height: 42px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 14px;
}

.currency-search:focus {
  border-color: var(--filter-open-border);
  box-shadow: 0 0 0 3px rgba(79, 111, 217, 0.1);
}

.currency-list {
  display: grid;
  gap: 6px;
  max-height: 250px;
  overflow: auto;
  padding-right: 2px;
  -webkit-overflow-scrolling: touch;
}

.currency-list-note {
  padding: 2px 4px 4px;
  color: var(--hint);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.06em;
  line-height: 1.1;
  text-transform: uppercase;
}

.currency-option {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: transform 0.12s ease, border-color 0.14s ease, background 0.14s ease, color 0.14s ease;
}

.currency-option:hover {
  border-color: var(--filter-border);
  background: var(--filter-bg);
}

.currency-option:active {
  transform: scale(0.985);
}

.currency-option.selected {
  border-color: var(--filter-open-border);
  background: var(--filter-open-bg);
  color: var(--filter-text);
}

.currency-check {
  opacity: 0;
  color: var(--filter-text);
  transform: scale(0.72);
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.currency-option.selected .currency-check {
  opacity: 1;
  transform: scale(1);
}

.currency-empty {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 20px 12px;
  color: var(--hint);
  font-size: 13px;
  font-weight: 750;
}

.currency-empty svg {
  max-width: 72px;
  opacity: 0.72;
}

.inline-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  padding: 11px 13px;
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  color: var(--text);
  font-size: 13.5px;
  font-weight: 650;
  animation: softRiseIn 0.2s cubic-bezier(0.22, 1, 0.36, 1);
  transition: transform 0.16s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.inline-toggle:hover {
  border-color: color-mix(in srgb, var(--accent) 22%, var(--border));
  background: color-mix(in srgb, var(--accent) 4%, var(--surface));
  transform: translateY(-1px);
}

.inline-toggle input {
  width: 20px;
  height: 20px;
  accent-color: var(--accent);
  flex-shrink: 0;
}

.action-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.action-card {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--section-bg);
  box-shadow: var(--shadow-sm);
  padding: 12px 10px;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: transform 0.16s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.action-card:hover {
  border-color: color-mix(in srgb, var(--accent) 22%, var(--border));
  background: color-mix(in srgb, var(--accent) 4%, var(--section-bg));
  box-shadow: 0 8px 22px rgba(51, 56, 74, 0.08);
  transform: translateY(-1px);
}

.action-card:active {
  transform: scale(0.985);
}

.action-card .icon-tile {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  margin-bottom: 8px;
}

.action-title {
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.metric-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-strong);
  padding: 12px;
  animation: softScaleIn 0.22s cubic-bezier(0.22, 1, 0.36, 1);
  transition: transform 0.16s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.metric-label {
  color: var(--hint);
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 4px;
}

.metric-value {
  font-size: 15px;
  font-weight: 850;
  overflow-wrap: anywhere;
}

.filter-row {
  display: flex;
  gap: 7px;
}

.filter-shell {
  position: relative;
}

.filter-row .select-field {
  flex: 1;
  min-width: 0;
  width: auto;
  border-color: var(--filter-border);
  background: var(--filter-bg);
  color: var(--filter-text);
  box-shadow: 0 3px 10px rgba(79, 111, 217, 0.08);
}

.filter-row .select-field span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.filter-row .select-chevron {
  color: var(--filter-text);
}

.filter-row .select-field.open {
  border-color: var(--filter-open-border);
  background: var(--filter-open-bg);
  color: var(--filter-text);
  box-shadow: 0 0 0 4px rgba(79, 111, 217, 0.1), var(--shadow-sm);
}

.filter-row .select-field.open .select-chevron {
  color: var(--filter-text);
  transform: rotate(180deg);
}

.filter-popover {
  display: grid;
  gap: 6px;
  max-height: 0;
  margin-top: 0;
  padding: 0 10px;
  overflow: hidden;
  border: 0 solid transparent;
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--section-bg) 98%, transparent);
  box-shadow: none;
  opacity: 0;
  transform: translateY(-6px) scale(0.99);
  transform-origin: top center;
  pointer-events: none;
  transition:
    max-height 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    margin-top 0.22s ease,
    padding 0.22s ease,
    border-color 0.18s ease,
    box-shadow 0.22s ease,
    opacity 0.16s ease,
    transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.filter-shell.open .filter-popover {
  max-height: 320px;
  margin-top: 9px;
  padding: 10px;
  overflow: auto;
  border-width: 1px;
  border-color: var(--filter-border);
  box-shadow: var(--shadow-md);
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.filter-popover-title {
  padding: 2px 4px 5px;
  color: var(--hint);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.06em;
  line-height: 1.1;
  text-transform: uppercase;
}

.filter-option {
  width: 100%;
  min-height: 42px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  font: inherit;
  cursor: pointer;
  text-align: left;
  transition: transform 0.14s ease, border-color 0.16s ease, background 0.16s ease;
}

.filter-option:hover {
  border-color: var(--filter-border);
  background: var(--filter-bg);
}

.filter-option.selected {
  border-color: var(--filter-open-border);
  background: var(--filter-open-bg);
  color: var(--filter-text);
}

.filter-option:active {
  transform: scale(0.985);
}

.filter-option-title {
  min-width: 0;
  overflow: hidden;
  font-size: 14px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.filter-option .filter-option-title:first-child {
  grid-column: 1 / 3;
}

.share-row {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 8px;
  animation: softRiseIn 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}

.share-name {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.share-input {
  width: 74px;
  min-width: 74px;
  text-align: right;
  padding-left: 8px;
  padding-right: 8px;
}

/* ---------- misc ---------- */

.spacer { height: 8px; }
.spacer-lg { height: 20px; }

.empty-state {
  text-align: center;
  padding: 44px 24px;
  color: var(--hint);
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  animation: softScaleIn 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

.empty-state .emoji {
  font-size: 46px;
  margin-bottom: 12px;
  display: block;
}

.empty-state .illo {
  display: block;
  margin: 0 auto 12px;
}

.empty-state .title {
  color: var(--text);
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 6px;
}

.illo-draw-check {
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: illoDrawCheck 0.6s 0.15s cubic-bezier(.65, 0, .35, 1) forwards;
}

@keyframes illoDrawCheck {
  to { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .illo-draw-check {
    animation: none;
    stroke-dashoffset: 0;
  }
}

.skeleton {
  border-radius: var(--radius-md);
  height: 64px;
  background: linear-gradient(90deg, var(--surface) 25%, var(--divider) 50%, var(--surface) 75%);
  background-size: 400px 100%;
  animation: shimmer 1.4s infinite linear;
  margin-bottom: 8px;
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.badge-success { background: color-mix(in srgb, var(--success) 15%, transparent); color: var(--success); }
.badge-danger { background: color-mix(in srgb, var(--danger) 15%, transparent); color: var(--danger); }
.badge-warning { background: color-mix(in srgb, var(--warning) 18%, transparent); color: color-mix(in srgb, var(--warning) 65%, var(--text)); }
.badge-hint { background: var(--divider); color: var(--hint); }

.progress-track {
  height: 7px;
  border-radius: 999px;
  background: var(--divider);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
  transition: width 0.4s ease;
  transform-origin: left center;
}

.stat-big {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: 0;
}

.stat-big.compact {
  font-size: 28px;
}

.divider {
  height: 1px;
  background: var(--divider);
  margin: 12px 0;
}

.bold-hero-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.25);
  margin: 12px 0;
}

.stat-label {
  font-size: 12px;
  color: var(--hint);
}

.bold-hero .stat-label {
  color: rgba(255, 255, 255, 0.7);
}

.stats-page,
.settings-page,
.expense-form-page {
  width: 100%;
  max-width: none;
  margin: 0;
  height: 100dvh;
  max-height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-left: max(16px, calc((100vw - 560px) / 2 + 16px));
  padding-right: max(16px, calc((100vw - 560px) / 2 + 16px));
  padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px));
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--accent) 32%, var(--hint)) transparent;
  -webkit-overflow-scrolling: touch;
}

.stats-page::-webkit-scrollbar,
.settings-page::-webkit-scrollbar,
.expense-form-page::-webkit-scrollbar {
  width: 10px;
}

.stats-page::-webkit-scrollbar-track,
.settings-page::-webkit-scrollbar-track,
.expense-form-page::-webkit-scrollbar-track {
  background: transparent;
}

.stats-page::-webkit-scrollbar-thumb,
.settings-page::-webkit-scrollbar-thumb,
.expense-form-page::-webkit-scrollbar-thumb {
  min-height: 44px;
  border: 3px solid transparent;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 30%, var(--hint));
  background-clip: content-box;
}

.stats-page::-webkit-scrollbar-thumb:hover,
.settings-page::-webkit-scrollbar-thumb:hover,
.expense-form-page::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--accent) 48%, var(--hint));
  background-clip: content-box;
}

.stats-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  text-align: left;
  align-items: start;
}

.stat-cell {
  min-width: 0;
}

.stat-cell > div:last-child {
  overflow-wrap: anywhere;
}

.stat-row-card {
  margin-bottom: 8px;
}

.stat-soft-card {
  background: color-mix(in srgb, var(--accent) 5%, var(--section-bg));
  box-shadow: var(--shadow-sm);
}

.stats-tabs {
  margin-top: 18px;
}

.stats-body {
  margin-top: 16px;
}

.stat-help-text {
  margin-bottom: 10px;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent) 6%, var(--section-bg));
  color: var(--hint);
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.38;
}

.plan-badge {
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
}

.chart-caption {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--hint);
  font-size: 12px;
  margin-top: 8px;
}

#chart-tap-value {
  font-weight: 700;
  color: var(--text);
}

.chart-bar {
  cursor: pointer;
}

.member-list {
  margin-top: 10px;
}

.toggle-row {
  display: flex;
  background: var(--divider);
  border-radius: var(--radius-md);
  padding: 4px;
  gap: 4px;
  border: 1px solid var(--border);
  transition: border-color 0.18s ease, background 0.18s ease;
}

.toggle-option {
  flex: 1;
  text-align: center;
  padding: 10px;
  border-radius: 7px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  color: var(--hint);
  transition: transform 0.14s ease, background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.toggle-option:hover {
  color: var(--text);
}

.toggle-option:active {
  transform: scale(0.985);
}

.toggle-option.selected {
  background: var(--section-bg);
  color: var(--text);
  box-shadow: var(--shadow-sm);
  animation: toggleSelectIn 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes toggleSelectIn {
  from { transform: scale(0.96); }
  to { transform: scale(1); }
}

/* ---------- calendar ---------- */

.calendar {
  background: var(--section-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 14px;
  animation: popIn 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

.calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding: 0 4px;
}

.calendar-title {
  font-weight: 700;
  font-size: 15px;
  text-transform: capitalize;
}

.calendar-nav {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--divider);
  color: var(--text);
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.14s ease, background 0.18s ease, color 0.18s ease;
}

.calendar-nav:hover {
  background: color-mix(in srgb, var(--accent) 14%, var(--divider));
  color: var(--accent);
}

.calendar-nav:active {
  transform: scale(0.9);
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  animation: calendarGridIn 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.calendar-dow {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--hint);
  padding: 6px 0;
}

.calendar-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  color: var(--text);
  transition: transform 0.14s ease, background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, border-radius 0.18s ease;
}

.calendar-day:not(.muted):hover {
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  transform: translateY(-1px);
}

.calendar-day:active {
  transform: scale(0.9);
}

.calendar-day.muted {
  color: var(--hint);
  opacity: 0.4;
}

.calendar-day.today {
  box-shadow: inset 0 0 0 1.5px var(--accent);
}

.calendar-day.selected {
  background: var(--accent);
  color: var(--accent-text);
  animation: calendarSelectIn 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}

.calendar-day.in-range {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border-radius: 4px;
}

@keyframes calendarGridIn {
  from { opacity: 0; transform: translateX(6px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes calendarSelectIn {
  from { transform: scale(0.88); }
  to { transform: scale(1); }
}

.range-pills {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.range-pill {
  flex: 1;
  min-width: 0;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  background: var(--surface);
  transition: transform 0.14s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.range-pill.active {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  animation: rangePillIn 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}

.range-pill:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent);
}

.range-pill-label {
  display: block;
  font-size: 11px;
  color: var(--hint);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 2px;
}

.range-pill input {
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 16px;
  font-weight: 750;
}

.range-pill input:focus {
  outline: none;
}

.range-pill input[aria-invalid="true"] {
  color: var(--danger);
}

@keyframes rangePillIn {
  from { transform: scale(0.98); }
  to { transform: scale(1); }
}

.compact-field {
  padding: 10px;
}

/* ---------- modal ---------- */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 300;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: modalBackdropIn 0.15s ease;
}

.modal-backdrop.is-closing {
  pointer-events: none;
  animation: modalBackdropOut 0.18s ease forwards;
}

.modal-sheet {
  width: 100%;
  max-width: 480px;
  max-height: 82vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 20px 20px 0 0;
  padding: 16px;
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  animation: sheetUp 0.22s ease;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.3);
}

.modal-backdrop.is-closing .modal-sheet {
  animation: sheetDown 0.18s ease forwards;
}

.modal-backdrop.modal-centered {
  align-items: center;
  padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom));
}

.modal-backdrop.modal-centered .modal-sheet {
  width: min(100%, 560px);
  max-height: 86vh;
  border-radius: 22px;
  padding-bottom: 16px;
  animation: modalPop 0.18s ease;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.34);
}

.modal-backdrop.modal-centered.is-closing .modal-sheet {
  animation: modalPopOut 0.16s ease forwards;
}

@keyframes sheetUp {
  from { transform: translateY(40px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes sheetDown {
  from { transform: translateY(0); opacity: 1; }
  to { transform: translateY(34px); opacity: 0; }
}

@keyframes modalBackdropIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes modalBackdropOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes modalPop {
  from { transform: translateY(8px) scale(0.98); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes modalPopOut {
  from { transform: translateY(0) scale(1); opacity: 1; }
  to { transform: translateY(8px) scale(0.985); opacity: 0; }
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.modal-title {
  font-weight: 800;
  font-size: 17px;
}

.modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--divider);
  color: var(--text);
  font-size: 15px;
  cursor: pointer;
  flex-shrink: 0;
}

.modal-close:active {
  transform: scale(0.9);
}

/* ---------- toast ---------- */

#toast-root {
  position: fixed;
  top: max(14px, env(safe-area-inset-top));
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 100;
  pointer-events: none;
}


.toast {
  background: var(--text);
  color: var(--bg);
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: var(--shadow-md);
  animation: toastIn 0.2s ease;
  max-width: 88vw;
  text-align: center;
}

@keyframes toastIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- avatars ---------- */

.avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  flex-shrink: 0;
}

/* ---------- expense list item ---------- */

.expense-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 4px;
}

.expense-amount {
  font-weight: 700;
  font-size: 15px;
  flex-shrink: 0;
}

/* ---------- receipt photos ---------- */

.receipt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 9px;
  margin-bottom: 10px;
}

.receipt-thumb {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  padding: 7px;
  border: 1px solid color-mix(in srgb, var(--border) 75%, #ffffff);
  border-radius: var(--radius-sm);
  background:
    linear-gradient(45deg, rgba(51, 56, 74, 0.045) 25%, transparent 25% 75%, rgba(51, 56, 74, 0.045) 75%),
    linear-gradient(45deg, rgba(51, 56, 74, 0.045) 25%, transparent 25% 75%, rgba(51, 56, 74, 0.045) 75%),
    #fff;
  background-position: 0 0, 6px 6px, 0 0;
  background-size: 12px 12px, 12px 12px, auto;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  animation: softScaleIn 0.2s cubic-bezier(0.22, 1, 0.36, 1);
  transition: transform 0.16s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.receipt-thumb:hover {
  border-color: color-mix(in srgb, var(--accent) 34%, var(--border));
  box-shadow: 0 8px 22px rgba(51, 56, 74, 0.1);
  transform: translateY(-1px);
}

.receipt-thumb:active {
  transform: scale(0.985);
}

.receipt-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  border-radius: 8px;
  background: #fff;
}

.receipt-delete {
  position: absolute;
  top: 6px;
  right: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--section-bg) 92%, transparent);
  color: var(--danger);
  box-shadow: var(--shadow-sm);
  transition: transform 0.14s ease, background 0.18s ease;
}

.receipt-delete:active {
  transform: scale(0.9);
}

.receipt-add {
  margin-top: 2px;
}

.receipt-empty {
  margin-bottom: 10px;
  color: var(--hint);
  font-size: 13px;
  font-weight: 650;
  text-align: center;
}

.receipt-lightbox {
  display: flex;
  align-items: center;
  justify-content: center;
}

.receipt-lightbox img {
  width: 100%;
  max-height: calc(86vh - 86px);
  object-fit: contain;
  border-radius: var(--radius-sm);
  background: #fff;
}

.receipt-ocr-card {
  margin-top: 10px;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--section-bg) 92%, #fff);
  box-shadow: var(--shadow-sm);
  animation: softRiseIn 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

.receipt-ocr-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.receipt-ocr-title {
  font-size: 15px;
  font-weight: 850;
  color: var(--text);
}

.receipt-ocr-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.receipt-ocr-field {
  min-width: 0;
  padding: 10px;
  border-radius: 12px;
  background: var(--card);
  border: 1px solid color-mix(in srgb, var(--border) 74%, transparent);
  animation: softScaleIn 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}

.receipt-ocr-label {
  margin-bottom: 3px;
  color: var(--hint);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.receipt-ocr-value {
  overflow: hidden;
  color: var(--text);
  font-size: 14px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.receipt-ocr-raw {
  margin-top: 8px;
  color: var(--hint);
  font-size: 13px;
  font-weight: 750;
}

.receipt-ocr-raw summary {
  cursor: pointer;
}

.receipt-ocr-raw pre {
  max-height: 180px;
  margin: 8px 0 0;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text);
  font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.day-group-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--hint);
  margin: 16px 4px 6px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.cat-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  flex-shrink: 0;
  vertical-align: middle;
}

html,
body,
.stats-page,
.settings-page,
.expense-form-page,
.privacy-page,
.modal-sheet,
.currency-list,
.filter-popover,
.receipt-ocr-raw pre {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--accent) 34%, var(--hint)) transparent;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
.stats-page::-webkit-scrollbar,
.settings-page::-webkit-scrollbar,
.expense-form-page::-webkit-scrollbar,
.privacy-page::-webkit-scrollbar,
.modal-sheet::-webkit-scrollbar,
.currency-list::-webkit-scrollbar,
.filter-popover::-webkit-scrollbar,
.receipt-ocr-raw pre::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
.stats-page::-webkit-scrollbar-track,
.settings-page::-webkit-scrollbar-track,
.expense-form-page::-webkit-scrollbar-track,
.privacy-page::-webkit-scrollbar-track,
.modal-sheet::-webkit-scrollbar-track,
.currency-list::-webkit-scrollbar-track,
.filter-popover::-webkit-scrollbar-track,
.receipt-ocr-raw pre::-webkit-scrollbar-track {
  background: transparent;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
.stats-page::-webkit-scrollbar-thumb,
.settings-page::-webkit-scrollbar-thumb,
.expense-form-page::-webkit-scrollbar-thumb,
.privacy-page::-webkit-scrollbar-thumb,
.modal-sheet::-webkit-scrollbar-thumb,
.currency-list::-webkit-scrollbar-thumb,
.filter-popover::-webkit-scrollbar-thumb,
.receipt-ocr-raw pre::-webkit-scrollbar-thumb {
  min-height: 46px;
  border: 4px solid transparent;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 30%, var(--hint));
  background-clip: content-box;
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
.stats-page::-webkit-scrollbar-thumb:hover,
.settings-page::-webkit-scrollbar-thumb:hover,
.expense-form-page::-webkit-scrollbar-thumb:hover,
.privacy-page::-webkit-scrollbar-thumb:hover,
.modal-sheet::-webkit-scrollbar-thumb:hover,
.currency-list::-webkit-scrollbar-thumb:hover,
.filter-popover::-webkit-scrollbar-thumb:hover,
.receipt-ocr-raw pre::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--accent) 52%, var(--hint));
  background-clip: content-box;
}

html::-webkit-scrollbar-corner,
body::-webkit-scrollbar-corner,
.stats-page::-webkit-scrollbar-corner,
.settings-page::-webkit-scrollbar-corner,
.expense-form-page::-webkit-scrollbar-corner,
.privacy-page::-webkit-scrollbar-corner,
.modal-sheet::-webkit-scrollbar-corner,
.currency-list::-webkit-scrollbar-corner,
.filter-popover::-webkit-scrollbar-corner,
.receipt-ocr-raw pre::-webkit-scrollbar-corner {
  background: transparent;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}