/* ==========================================================================
   Spendee — Design tokens & component library
   Source of truth: design_png/*.png (402pt iPhone frames)
   ========================================================================== */

:root {
  /* Surfaces */
  --bg: #000000;
  --surface: #262626;
  --surface-2: #1a1a1a;
  --surface-3: #2c2c2c;
  --field: #ffffff;
  --stroke: rgba(255, 255, 255, 0.22);
  --stroke-soft: rgba(255, 255, 255, 0.12);
  --divider: rgba(255, 255, 255, 0.45);

  /* Brand + semantic */
  --primary: #c8e7ff;          /* primary CTA */
  --on-primary: #000000;
  --green: #8df15e;
  --green-2: #58c323;
  --red: #f15858;
  --yellow: #f1ea58;
  --blue: #5fb2f1;
  --gold: #e9cf73;

  /* Tinted tiles */
  --tile-yellow: #48461a;
  --tile-red: #481a1a;
  --tile-green: #2a481c;
  --tile-blue: #1d3548;

  /* Text */
  --text: #ffffff;
  --text-2: #c9c9c9;
  --text-3: #8a8a8a;
  --text-field: #000000;
  --placeholder: #9b9b9b;

  /* Type */
  /* Poppins sits second on purpose: Kodchasan has no rupee sign (U+20B9), and
     without a named fallback every ₹ in the app renders in whatever system face
     the device happens to have. Poppins is already loaded and carries one. */
  --font: 'Kodchasan', 'Poppins', system-ui, sans-serif;
  --font-ui: 'Poppins', system-ui, sans-serif;

  /* Radii */
  --r-screen: 46px;
  --r-card: 20px;
  --r-field: 16px;
  --r-pill: 999px;

  /* Motion */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur: 220ms;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body.capture { background: #fff; }
button, input, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
svg { display: block; flex-shrink: 0; }
p, h1, h2, h3, h4 { margin: 0; font-weight: inherit; }
.num { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   Screen shell
   -------------------------------------------------------------------------- */
.screen {
  position: relative;
  width: 402px;
  min-height: 100vh;
  margin: 0 auto;
  background: var(--bg);
  overflow: hidden;
  isolation: isolate;
}
body.capture .screen { border-radius: var(--r-screen); min-height: 0; margin: 0; }
.screen.has-nav { padding-bottom: 0; }

/* Absolute layout helper — every block is placed on the 402pt grid */
.abs { position: absolute; }

/* --------------------------------------------------------------------------
   Interaction primitives
   -------------------------------------------------------------------------- */
.tap {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform var(--dur) var(--ease-out), filter var(--dur) var(--ease-out), opacity var(--dur);
}
.tap:hover { filter: brightness(1.08); }
.tap:active { transform: scale(.97); filter: brightness(.95); }
.tap:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* --------------------------------------------------------------------------
   Glass card — dark surface with a soft light rim
   -------------------------------------------------------------------------- */
.card {
  background: var(--surface);
  border-radius: var(--r-card);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .13),
    inset 1px 1px 0 0 rgba(255, 255, 255, .10),
    0 4px 14px rgba(0, 0, 0, .45);
}
.card--flat { background: var(--surface-2); }

/* Tinted tile (quick actions, payment methods) */
.tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-radius: 20px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .16),
    inset 0 0 12px rgba(255, 255, 255, .06),
    0 4px 10px rgba(0, 0, 0, .5);
  font-size: 8px; letter-spacing: .3px;
}
.tile--yellow { background: var(--tile-yellow); color: #e3e0b5; }
.tile--red    { background: var(--tile-red);    color: #e8c2c2; }
.tile--green  { background: var(--tile-green);  color: #cfe3c5; }
.tile--blue   { background: var(--tile-blue);   color: #c4d6e4; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 54px; border-radius: var(--r-field);
  font-family: var(--font); font-weight: 700; font-size: 18px;
}
.btn--primary { background: var(--primary); color: var(--on-primary); }
.btn--glass {
  background: rgba(130, 178, 205, .3); color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
}
.btn--dark { background: #16202a; color: #fff; }

/* Small outlined action (e.g. "Create", "Export") */
.chip-btn {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  border-radius: 10px;
  background: #1c2a36; color: var(--blue);
  box-shadow: inset 0 0 0 1px rgba(95, 178, 241, .45);
}

/* --------------------------------------------------------------------------
   Form fields
   -------------------------------------------------------------------------- */
.label { font-size: 15px; letter-spacing: .8px; color: #e6e6e6; }
.label--caps { text-transform: uppercase; letter-spacing: 1.4px; color: #cfcfcf; }
.field {
  display: flex; align-items: center;
  height: 54px; padding: 0 23px;
  border-radius: var(--r-field);
  background: var(--field); color: var(--text-field);
  font-size: 18px; font-weight: 500;
  border: 0; outline: none; width: 100%;
  transition: box-shadow var(--dur) var(--ease-out);
}
.field:focus, .field:focus-within { box-shadow: 0 0 0 3px rgba(95, 178, 241, .55); }
.field::placeholder { color: var(--placeholder); }
input.field { appearance: none; -webkit-appearance: none; }

/* --------------------------------------------------------------------------
   Header (back + eyebrow + title)
   -------------------------------------------------------------------------- */
.back {
  width: 30px; height: 30px; border-radius: 50%;
  background: #fff; color: #000;
  display: grid; place-items: center;
}
.eyebrow { font-size: 12px; letter-spacing: 1.2px; color: #d9d9d9; text-transform: uppercase; }
.title { font-size: 22px; font-weight: 600; letter-spacing: .4px; }

/* --------------------------------------------------------------------------
   Status pills
   -------------------------------------------------------------------------- */
.status { display: inline-flex; align-items: center; justify-content: center; border-radius: 5px; font-size: 12px; line-height: 1; padding: 0 5px; height: 16px; letter-spacing: .2px; white-space: nowrap; }
.status--done    { background: #314528; color: #3fb40a; }
.status--pending { background: #454426; color: #d8d023; }
.status--overdue { background: #452626; color: #f15858; }
.amt--done { color: #41c405; } .amt--pending { color: #d8d023; } .amt--overdue { color: #f15858; }

/* Avatar glyph circle */
.avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; }
.avatar--blue   { background: #283845; color: #60b2f1; }
.avatar--yellow { background: #454426; color: #d8d023; }
.avatar--red    { background: #452626; color: #f15858; }
.avatar--green  { background: #314528; color: #41c405; }

/* List row (contacts / transactions) */
.row:not(.abs) { position: relative; }
.row {
  display: flex; align-items: center;
  width: 334px; height: 59px; padding: 0 0 0 23px;
  border-radius: 16px;
  background: #1a1a1a;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .19), 0 4px 10px rgba(0, 0, 0, .55);
}
.row__body { flex: 1; margin-left: 10px; min-width: 0; }
.row__name { font-size: 16.5px; font-weight: 500; letter-spacing: 0; line-height: 20px; color: #fff; white-space: nowrap; }
.row__meta { font-size: 12.5px; font-weight: 500; color: #e3e3e3; line-height: 17px; margin-top: 2px; white-space: nowrap; }
.row__right { position: absolute; top: 0; bottom: 0; right: 16px; width: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
.row__amt { font-size: 16.5px; font-weight: 600; line-height: 19px; letter-spacing: .2px; }
.row .avatar { margin-left: 0; }

/* Toggle switch */
.switch:not(.abs) { position: relative; }
.switch {
  width: 46px; height: 23px; border-radius: 999px;
  background: #7a7a7a; cursor: pointer; flex-shrink: 0;
  transition: background var(--dur) var(--ease-out);
}
.switch::after {
  content: ''; position: absolute; top: 50%; left: 3px;
  width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: left 260ms var(--ease-spring);
}
.switch[aria-checked="true"] { background: #60b2f1; }
.switch[aria-checked="true"]::after { left: calc(100% - 21px); }
.switch:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   Bottom tab bar (injected by app.js into [data-tabbar])
   -------------------------------------------------------------------------- */
.tabbar {
  position: fixed; z-index: 50; bottom: 0; left: 50%; width: 402px; margin-left: -201px; height: 110px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 12px, rgba(0,0,0,.9) 30px, #000 40px);
  pointer-events: none;
}
body.capture .tabbar, body.embedded-full .tabbar { position: absolute; left: 0; margin-left: 0; }
.tabbar > * { pointer-events: auto; }
.tab {
  position: absolute; top: 32px; width: 64px; margin-left: -32px;
  display: flex; flex-direction: column; align-items: center;
  font-family: var(--font-ui); font-size: 12px; line-height: 14px; color: #676d75;
}
.tab svg { width: 27px; height: 27px; margin-bottom: 5px; transition: transform 260ms var(--ease-spring); }
.tab:hover svg { transform: translateY(-2px); }
.tab[aria-current="page"] { color: #fff; }
.fab {
  position: absolute; left: 50%; top: 4px; width: 60px; height: 60px; margin-left: -30px;
  border-radius: 50%; background: #fff; color: #000;
  display: grid; place-items: center;
  box-shadow: inset 0 0 0 4px #1d1f24, 0 6px 20px rgba(0,0,0,.6);
  transition: transform 300ms var(--ease-spring);
}
.fab:hover { transform: rotate(90deg); }
.fab:active { transform: scale(.9); }
.home-indicator {
  position: absolute; left: 50%; bottom: 8px; width: 135px; height: 5px; margin-left: -67.5px;
  border-radius: 3px; background: #b9c0c9; pointer-events: none;
}

/* --------------------------------------------------------------------------
   Motion — entrance choreography (disabled in capture + reduced motion)
   -------------------------------------------------------------------------- */
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.enter { animation: rise 520ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 45ms); }
body.capture .enter, body.capture * { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; }
}

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --------------------------------------------------------------------------
   Onboarding
   -------------------------------------------------------------------------- */
.onb { height: 874px; min-height: 874px; }
.onb--ledger {
  background:
    linear-gradient(90deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.28) 25%, rgba(0,0,0,.1) 50%, rgba(0,0,0,0) 75%),
    linear-gradient(180deg, #013359 0%, #013359 12%, #013054 23%, #012947 34%, #012037 44%, #001626 54%, #00090f 71%, #01070d 75%, #010304 87%, #010102 95%, #010101 100%);
}
.onb--ai {
  background:
    linear-gradient(270deg, rgba(0,0,0,.57) 0%, rgba(0,0,0,.34) 22%, rgba(0,0,0,.12) 50%, rgba(0,0,0,0) 75%),
    linear-gradient(180deg, #000 0%, #000 12%, #010101 23%, #060601 34%, #0e0d01 44%, #181700 54%, #343102 71%, #393601 75%, #474302 87%, #4a4703 95%, #4a4602 100%);
}
.onb--credit {
  background:
    linear-gradient(270deg, rgba(0,0,0,.57) 0%, rgba(0,0,0,.34) 22%, rgba(0,0,0,.12) 50%, rgba(0,0,0,0) 75%),
    linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 30%, #0e0d01 44%, #181700 54%, #343102 71%, #393601 75%, #474302 87%, #4a4703 95%, #4a4602 100%);
}
.onb--credit::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.28) 25%, rgba(0,0,0,.1) 50%, rgba(0,0,0,0) 75%),
    linear-gradient(180deg, #013359 0%, #013359 12%, #013054 23%, #042b47 34%, #072638 44%, #0e2326 54%, rgba(10,20,10,0) 75%);
}
.onb__skip { right: 44px; top: 31px; padding: 4px 0; font-family: var(--font-ui); font-size: 14px; color: #dcdcdc; letter-spacing: .2px; }
.onb__icon {
  left: 146px; top: 183px; width: 110px; height: 110px; border-radius: 20px;
  background: linear-gradient(150deg, rgba(255,255,255,.13), rgba(255,255,255,.09));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), 0 12px 32px rgba(0,0,0,.25);
  display: grid; place-items: center;
}
.onb--ai .onb__icon { background: #1c1c1b; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2), 0 12px 32px rgba(0,0,0,.4); }
.onb__title { left: 0; right: 0; top: 314px; text-align: center; font-size: 24px; line-height: 29px; font-weight: 400; letter-spacing: .1px; }
.onb__body { left: 30px; right: 30px; top: 381px; text-align: center; font-size: 15px; line-height: 18px; letter-spacing: .95px; color: #d4d9de; }
.onb__arrow {
  left: 173px; top: 566px; width: 56px; height: 56px; border-radius: 50%;
  background: #fff; color: #000; display: grid; place-items: center;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
.onb__arrow:hover svg { transform: translateX(3px); }
.onb__arrow svg { transition: transform var(--dur) var(--ease-out); }
.onb--ai .onb__arrow { background: #fcf9cf; color: #1a1800; }
.onb__next { left: 34px; top: 765px; width: 334px; font-size: 18px; font-weight: 600; letter-spacing: 1.2px; }
.onb--ai .onb__next { background: linear-gradient(90deg, #d3e5b2 0%, #d2e6bc 50%, #cee6d9 100%); color: #1c1a00; }

/* --------------------------------------------------------------------------
   Auth (Login / Sign Up / Edit Profile)
   -------------------------------------------------------------------------- */
.brand-tile { width: 60px; height: 59px; border-radius: 12px; background: #1a1a1a; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); display: grid; place-items: center; }
.pin { display: flex; gap: 10px; }
.pin__cell {
  width: 54px; height: 54px; border-radius: 13px; background: #808080;
  display: grid; place-items: center; color: #fff;
  transition: background 200ms var(--ease-out), transform 260ms var(--ease-spring);
}
.pin__cell.filled { background: #2077ba; transform: scale(1); }
.pin__cell.filled svg { animation: pop 260ms var(--ease-spring); }
.pin__cell.cursor { box-shadow: 0 0 0 2px rgba(95,178,241,.8); }
.pin__cell svg { opacity: 0; }
.pin__cell.filled svg { opacity: 1; }
@keyframes pop { from { transform: scale(.4); } to { transform: scale(1); } }
.pin input { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.social { height: 54px; border-radius: 16px; background: #141f26; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 18px; font-weight: 600; color: #fff; }
.link-green { color: var(--green); font-weight: 700; }
.select { position: relative; }
.select select { appearance: none; -webkit-appearance: none; cursor: pointer; }
.select svg { position: absolute; right: 22px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.secure-note { display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 10.5px; letter-spacing: .2px; color: #bdbdbd; }
.field-tel { display: flex; align-items: center; }
.field-tel span { flex-shrink: 0; }
.field-tel input { border: 0; outline: 0; background: transparent; width: 100%; font: inherit; color: inherit; padding: 0; }
.toast {
  position: absolute; left: 50%; bottom: 128px; z-index: 100;
  transform: translate(-50%, 16px); opacity: 0; pointer-events: none;
  background: rgba(38,38,38,.92); color: #fff; font-size: 13px; letter-spacing: .3px;
  padding: 10px 16px; border-radius: 12px; white-space: nowrap;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 10px 30px rgba(0,0,0,.5);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Page header: back button + eyebrow + title */
.hdr { position: absolute; left: 34px; top: 43px; display: flex; align-items: center; gap: 15px; }
.hdr .back { width: 30px; height: 30px; }
.hdr__eyebrow { font-size: 12px; letter-spacing: 1.1px; text-transform: uppercase; color: #d4d4d4; line-height: 14px; }
.hdr__title { font-size: 21px; font-weight: 600; letter-spacing: .5px; line-height: 26px; margin-top: 3px; }
.form-group { position: absolute; left: 34px; width: 334px; }
.form-group .label { display: block; margin: 0 0 15px 10px; line-height: 17px; }

/* Absolute text helper — top = cap-top − 0.16 × font-size (Kodchasan metrics) */
.t { position: absolute; line-height: 1; white-space: nowrap; }
.circle-btn { width: 36px; height: 36px; border-radius: 50%; background: #4d4d4d; display: grid; place-items: center; }
.tint-pill { display: flex; align-items: center; border-radius: 8px; }
.gauge__needle { transform-origin: 105px 76.7px; }
.gauge__fill { stroke-dasharray: 150; stroke-dashoffset: 0; }
body:not(.capture) .gauge__needle { animation: needle 1400ms var(--ease-spring) 250ms both; }
body:not(.capture) .gauge__fill { animation: arcfill 1100ms var(--ease-out) 200ms both; }
@keyframes needle { from { transform: rotate(-72deg); } to { transform: rotate(0); } }
@keyframes arcfill { from { stroke-dashoffset: 150; } to { stroke-dashoffset: 0; } }

/* Page title block (Contact) */
.page-title { font-size: 22px; font-weight: 600; letter-spacing: .5px; }
.page-sub { font-size: 12.5px; letter-spacing: .5px; color: #bfbfbf; }

/* Search */
.search { display: flex; align-items: center; height: 54px; border-radius: 16px; background: #fff; color: #000; padding-left: 23px; transition: box-shadow var(--dur) var(--ease-out); }
.search:focus-within { box-shadow: 0 0 0 3px rgba(95,178,241,.55); }
.search input { flex: 1; border: 0; outline: 0; background: transparent; font-size: 14.5px; font-weight: 500; letter-spacing: .2px; color: #000; margin-left: 20px; padding: 0; }
.search input::placeholder { color: #9a9a9a; }

/* Filter chips */
.chips { display: flex; justify-content: space-between; }
.chip { height: 30px; padding: 0 9px; border-radius: 8px; background: #d2d2d2; color: #000; font-size: 15px; font-weight: 500; letter-spacing: .2px; display: grid; place-items: center; transition: background var(--dur) var(--ease-out), color var(--dur); }
.chip.is-active { background: #60b2f1; }
.chip:not(.is-active):hover { background: #e2e2e2; }

.list { display: flex; flex-direction: column; gap: 10px; }
.list > * { flex-shrink: 0; }
.list .row { animation: rise 420ms var(--ease-out) both; }
body.capture .list .row { animation: none; }
.empty { text-align: center; color: #8a8a8a; font-size: 14px; padding: 30px 0; }

/* Entry forms (Add Entry / Send Money) */
.caps-lbl { position: absolute; font-size: 15px; line-height: 1; letter-spacing: 1.25px; text-transform: uppercase; color: #dfdfdf; white-space: nowrap; }
.seg { position: absolute; height: 35px; border-radius: 8px; display: flex; align-items: center; gap: 13px; padding-left: 8px; font-size: 13.8px; letter-spacing: .35px; white-space: nowrap; transition: background var(--dur) var(--ease-out), color var(--dur); }
.seg[aria-checked="true"].seg--gave { background: #1c3013; color: #8df15e; }
.seg[aria-checked="true"].seg--got { background: #1c3013; color: #8df15e; }
.seg[aria-checked="false"] { background: #333333; color: #d5d5d5; }
.amount-input { background: transparent; border: 0; outline: 0; color: #fff; font: inherit; width: 100%; padding: 0; }
.pm { position: absolute; top: 0; width: 74px; height: 74px; }
.pm[aria-checked="true"] { box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), 0 0 0 2px rgba(255,255,255,.55), 0 4px 10px rgba(0,0,0,.5); }
.pm .t { left: 0; right: 0; text-align: center; }
.dropzone {
  position: absolute; border-radius: 20px; background: #1a1a1a;
  display: flex; flex-direction: column; align-items: center; color: #cfcfcf; cursor: pointer;
  transition: background var(--dur) var(--ease-out);
}
.dropzone:hover { background: #202020; }
.dropzone.has-file { background: #1c3013; }
.dropzone svg.dash { position: absolute; inset: 0; pointer-events: none; }

/* Invoices */
.stat-box { position: absolute; top: 116px; width: 94px; height: 84px; border-radius: 16px; background: #4d4d4d; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 4px 10px rgba(0,0,0,.4); }
.stat-box .t { left: 0; right: 0; text-align: center; }
.inv { position: absolute; left: 38px; width: 326px; }
.inv__no { left: 21px; top: 21px; font-size: 14px; letter-spacing: .8px; color: #60b2f1; }
.inv__name { left: 21px; top: 39.5px; font-size: 19px; font-weight: 500; letter-spacing: .6px; }
.inv__date { left: 21px; top: 81.5px; font-size: 15px; letter-spacing: .2px; }
.inv__amt { right: 21px; top: 79px; font-size: 19px; font-weight: 600; letter-spacing: .4px; }
.inv__pill { position: absolute; right: 19px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 15px; letter-spacing: .4px; }
.inv__btn { position: absolute; top: 115px; height: 33px; border-radius: 8px; display: grid; place-items: center; font-family: var(--font-ui); font-size: 10.5px; font-weight: 600; letter-spacing: .2px; }
.tone-blue { background: #32424f; color: #60b2f1; }
.tone-red { background: #4f3030; color: #f15858; }
.tone-green { background: #3b4f31; color: #8df15e; }
.tone-yellow { background: #4f4d30; color: #f1ea58; }
.chip--sm { font-weight: 600; }

/* Filing cards (GST / Reports) */
.filing { position: absolute; left: 35px; width: 334px; height: 200px; border-radius: 20px; }
.filing__title { left: 33px; top: 22px; font-size: 17.5px; font-weight: 600; letter-spacing: .2px; }
.filing__sub { left: 33px; top: 41.5px; font-size: 10.5px; letter-spacing: 0; color: #8e8e8e; }
.filing__pill { position: absolute; top: 21px; height: 32px; border-radius: 8px; display: grid; place-items: center; font-size: 9.5px; font-weight: 600; letter-spacing: .2px; }
.kv { position: absolute; left: 34px; right: 34px; display: flex; justify-content: space-between; align-items: baseline; line-height: 1; }
.kv > span:first-child { font-size: 14px; letter-spacing: .1px; color: #e8e8e8; }
.kv > span:last-child { font-size: 16.5px; font-weight: 600; letter-spacing: .1px; }
.kv-divider { position: absolute; left: 10px; width: 314px; height: 1px; background: #868686; }
.mini-btn { position: absolute; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center; gap: 9px; font-size: 11px; font-weight: 600; letter-spacing: .5px; }
.mini-btn--ui { font-family: var(--font-ui); letter-spacing: .1px; }

/* Embedded in showcase iframe: hide scrollbars, keep momentum */
html:has(body.embedded) { scrollbar-width: none; }
body.embedded::-webkit-scrollbar, html::-webkit-scrollbar { width: 0; height: 0; display: none; }
body.embedded { overscroll-behavior: contain; }

/* ==========================================================================
   v2 COMPONENTS — flow-layout building blocks for extended screens
   All values derived from the original 19 frames (same radii, fills, type).
   ========================================================================== */

/* Flow page: content in normal document flow with the 34pt gutter */
.page { position: relative; width: 402px; min-height: 100vh; margin: 0 auto; background: #000; padding: 0 34px 150px; overflow-x: hidden; }
.page--no-nav { padding-bottom: 130px; }
body.capture .page { border-radius: var(--r-screen); min-height: 874px; margin: 0; }
.stack > * + * { margin-top: var(--gap, 16px); }
.row-flex { display: flex; align-items: center; gap: 12px; }
.between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.grow { flex: 1; min-width: 0; }
.muted { color: #9a9a9a; } .dim { color: #6b6b6b; }
.c-green { color: #8df15e; } .c-red { color: #f15858; } .c-yellow { color: #f1ea58; } .c-blue { color: #5fb2f1; }

/* App bar (matches absolute header: back @34,52 · eyebrow 11/caps · title 21/600) */
.appbar { display: flex; align-items: center; gap: 16px; min-height: 60px; padding-top: 40px; margin-bottom: 26px; }
.appbar .back { flex-shrink: 0; width: 30px; height: 30px; position: relative; }
.appbar .back::after { content: ''; position: absolute; inset: -8px; }
.appbar__titles { flex: 1; min-width: 0; }
.appbar__eyebrow { display: block; font-size: 11px; letter-spacing: .9px; text-transform: uppercase; color: #d4d4d4; line-height: 14px; }
.appbar__title { display: block; font-size: 21px; font-weight: 600; letter-spacing: .3px; line-height: 26px; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appbar__action { flex-shrink: 0; height: 38px; padding: 0 14px; border-radius: 10px; background: #132430; color: #5fb2f1; box-shadow: inset 0 0 0 1px rgba(95,178,241,.35); display: inline-flex; align-items: center; gap: 6px; font-size: 15px; }
.appbar__icon { flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px; background: #1a1a1a; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); display: grid; place-items: center; color: #fff; }

/* Section label (caps, gray) */
.section-label { font-size: 14.5px; letter-spacing: 1px; text-transform: uppercase; color: #636363; margin: 28px 0 12px 2px; }
.section-label:first-child { margin-top: 0; }

/* Flow card (padded) */
.panel { background: #262626; border-radius: 20px; padding: 20px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.13), inset 1px 1px 0 rgba(255,255,255,.1), 0 4px 14px rgba(0,0,0,.45); }
.panel--flat { background: #1a1a1a; }
.panel--blue { background: #132430; }
.panel--tight { padding: 14px 16px; }

/* Menu list (grouped rows with divider) */
.menu { background: #262626; border-radius: 20px; padding: 4px 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.13), 0 4px 14px rgba(0,0,0,.45); }
.menu__item { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 9px 20px 9px 18px; position: relative; width: 100%; text-align: left; transition: background var(--dur) var(--ease-out); }
.menu__item:hover { background: rgba(255,255,255,.03); }
.menu__item + .menu__item::before { content: ''; position: absolute; top: 0; left: 10px; right: 10px; height: 1px; background: #868686; opacity: .8; }
.menu__icon { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; }
.menu__body { flex: 1; min-width: 0; }
.menu__title { display: block; font-size: 15px; color: #f0f0f0; line-height: 19px; }
.menu__sub { display: block; font-size: 11px; color: #8a8a8a; line-height: 14px; margin-top: 2px; }
.menu__meta { font-size: 14px; font-weight: 600; flex-shrink: 0; }
.chev { flex-shrink: 0; }
.icon-yellow { background: #454426; color: #f1ea58; } .icon-red { background: #452626; color: #f15858; }
.icon-green { background: #314528; color: #8df15e; } .icon-blue { background: #283845; color: #5fb2f1; }
.icon-gray { background: #3a3a3a; color: #e0e0e0; }

/* Form field group (flow) */
.fg { display: block; }
.fg + .fg { margin-top: 20px; }
.fg > .label { display: block; margin: 0 0 12px 10px; line-height: 17px; }
.fg .helper { display: block; font-size: 12px; color: #8a8a8a; margin: 8px 0 0 10px; line-height: 16px; }
.fg .error-text { display: none; font-size: 12px; color: #f15858; margin: 8px 0 0 10px; line-height: 16px; }
.fg.has-error .field { box-shadow: 0 0 0 2px #f15858; }
.fg.has-error .error-text { display: flex; gap: 6px; align-items: center; }
.fg.has-error .helper { display: none; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.field--dark { background: #1a1a1a; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.field-prefix { display: flex; align-items: center; }
.field-prefix > span { font-weight: 600; margin-right: 10px; flex-shrink: 0; }
.field-prefix input { border: 0; outline: 0; background: transparent; font: inherit; color: inherit; width: 100%; padding: 0; }
textarea.field { height: auto; min-height: 96px; padding: 16px 23px; resize: none; line-height: 1.4; font-size: 16px; }
.picker { justify-content: space-between; cursor: pointer; text-align: left; }
.picker .placeholder { color: #9b9b9b; font-weight: 500; }

/* Buttons (flow) */
.btn:not(.abs) { width: 100%; position: relative; }
.btn[disabled], .btn.is-disabled { opacity: .45; pointer-events: none; }
.btn--danger { background: #3c1616; color: #f15858; font-weight: 600; }
.btn--ghost { background: transparent; color: #5fb2f1; box-shadow: inset 0 0 0 1px rgba(95,178,241,.35); }
.btn--sm { height: 40px; font-size: 14px; border-radius: 10px; }
.btn.is-loading { color: transparent !important; pointer-events: none; }
.btn.is-loading > * { visibility: hidden; }
.btn.is-loading::after { content: ''; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; border: 2.5px solid rgba(0,0,0,.2); border-top-color: #000; animation: spin 700ms linear infinite; }
.btn--danger.is-loading::after, .btn--glass.is-loading::after { border-color: rgba(255,255,255,.2); border-top-color: #fff; }
@keyframes spin { to { transform: rotate(360deg); } }
.btn-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.text-btn { color: #5fb2f1; font-size: 14px; font-weight: 600; padding: 10px 4px; }
.text-btn[disabled] { color: #6b6b6b; pointer-events: none; }

/* Sticky bottom CTA for flows without the tab bar */
.cta-bar { position: fixed; bottom: 0; left: 50%; width: 402px; margin-left: -201px; z-index: 45; padding: 28px 34px 34px; background: linear-gradient(180deg, rgba(0,0,0,0), #000 30%); }
body.capture .cta-bar { position: absolute; left: 0; margin-left: 0; }
.cta-bar .home-indicator { bottom: 8px; }
.cta-bar > * + * { margin-top: 10px; }

/* Stepper */
.stepper { display: flex; gap: 6px; margin: -8px 0 24px; }
.stepper i { flex: 1; height: 4px; border-radius: 2px; background: #333; overflow: hidden; position: relative; }
.stepper i.done::after, .stepper i.on::after { content: ''; position: absolute; inset: 0; background: #5fb2f1; transform-origin: left; animation: fillx 500ms var(--ease-out) both; }
@keyframes fillx { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.step-caption { font-size: 12px; letter-spacing: .6px; color: #8a8a8a; margin: -14px 0 18px; }

/* OTP / code inputs */
.otp { display: flex; justify-content: space-between; gap: 8px; }
.otp input { width: 48px; height: 58px; border-radius: 13px; border: 0; outline: 0; background: #262626; color: #fff; text-align: center; font: 600 24px var(--font); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); caret-color: #5fb2f1; transition: box-shadow var(--dur), background var(--dur), transform 200ms var(--ease-spring); }
.otp input:focus { box-shadow: inset 0 0 0 2px #5fb2f1; }
.otp input.filled { background: #2077ba; box-shadow: none; }
.otp.is-error input { box-shadow: inset 0 0 0 2px #f15858; animation: shake 360ms; }
.otp.is-ok input { background: #314528; color: #8df15e; }
@keyframes shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }

/* PIN dots + numeric keypad */
.pin-dots { display: flex; justify-content: center; gap: 18px; margin: 8px 0; }
.pin-dots i { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 2px #5a5a5a; transition: background 160ms, box-shadow 160ms, transform 220ms var(--ease-spring); }
.pin-dots i.on { background: #5fb2f1; box-shadow: none; transform: scale(1.1); }
.pin-dots.is-error i { box-shadow: inset 0 0 0 2px #f15858; animation: shake 360ms; }
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 18px; }
.keypad button { height: 58px; border-radius: 16px; font: 500 26px var(--font); color: #fff; display: grid; place-items: center; transition: background 120ms; -webkit-tap-highlight-color: transparent; }
.keypad button:active { background: rgba(255,255,255,.12); }
.keypad button.key-muted { font-size: 13px; color: #9a9a9a; }

/* Bottom sheet */
.sheet-scrim { position: fixed; inset: 0; z-index: 900; background: rgba(0,0,0,.6); opacity: 0; transition: opacity 260ms var(--ease-out); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.sheet-scrim.open { opacity: 1; }
.sheet { position: fixed; z-index: 901; bottom: 0; left: 50%; width: 402px; margin-left: -201px; max-height: calc(100vh - 60px); overflow-y: auto; scrollbar-width: none;
  background: #1c1c1c; border-radius: 28px 28px 0 0; padding: 10px 24px 34px; box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 -20px 60px rgba(0,0,0,.6);
  transform: translateY(105%); transition: transform 340ms cubic-bezier(.32,.72,0,1); visibility: hidden; }
.sheet.open { transform: none; visibility: visible; }
.sheet.dragging { transition: none; }
.sheet[hidden] { display: block; }
.sheet__grab { display: block; width: 40px; height: 5px; border-radius: 3px; background: #4a4a4a; margin: 0 auto 14px; cursor: grab; touch-action: none; }
.sheet__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.sheet__title { font-size: 20px; font-weight: 600; letter-spacing: .2px; }
.sheet__sub { font-size: 13px; color: #9a9a9a; margin-top: 3px; line-height: 1.45; }
.sheet__close { width: 32px; height: 32px; border-radius: 50%; background: #333; display: grid; place-items: center; color: #ddd; flex-shrink: 0; position: relative; }
.sheet__close::after { content: ''; position: absolute; inset: -6px; }
body.capture .sheet, body.capture .sheet-scrim { position: absolute; }
body.capture .sheet { left: 0; margin-left: 0; }

/* Option list inside sheets (radio / action rows) */
.options { display: flex; flex-direction: column; gap: 8px; }
.option { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 10px 16px; border-radius: 16px; background: #262626; text-align: left; width: 100%; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); transition: box-shadow var(--dur), background var(--dur); }
.option:hover { background: #2c2c2c; }
.option[aria-checked="true"] { box-shadow: inset 0 0 0 2px #5fb2f1; background: #1c2a36; }
.option__radio { width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 2px #5a5a5a; flex-shrink: 0; position: relative; transition: box-shadow var(--dur); }
.option[aria-checked="true"] .option__radio { box-shadow: inset 0 0 0 6px #5fb2f1; }
.option__body { flex: 1; min-width: 0; }
.option__title { display: block; font-size: 15px; color: #f0f0f0; }
.option__sub { display: block; font-size: 12px; color: #8a8a8a; margin-top: 2px; }

/* Dialog */
.dialog-wrap { position: fixed; inset: 0; z-index: 950; display: grid; place-items: center; padding: 24px; background: rgba(0,0,0,.62); opacity: 0; transition: opacity 200ms var(--ease-out); }
.dialog-wrap.open { opacity: 1; }
.dialog { width: 310px; background: #1f1f1f; border-radius: 26px; padding: 26px 22px 20px; text-align: center; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 30px 80px rgba(0,0,0,.7); transform: scale(.92); transition: transform 260ms var(--ease-spring); }
.dialog-wrap.open .dialog { transform: none; }
.dialog__icon { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 16px; }
.dialog__title { font-size: 19px; font-weight: 600; line-height: 1.3; }
.dialog__msg { font-size: 14px; color: #a8a8a8; line-height: 1.5; margin-top: 8px; }
.dialog__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
.dialog__actions .btn { height: 48px; font-size: 16px; border-radius: 14px; }
.btn--neutral { background: #333; color: #fff; font-weight: 600; }

/* Success / result hero */
.result { text-align: center; padding-top: 70px; }
.result__ring { width: 108px; height: 108px; margin: 0 auto 26px; border-radius: 50%; display: grid; place-items: center; position: relative; }
.result__ring::before { content: ''; position: absolute; inset: -14px; border-radius: 50%; border: 1px solid currentColor; opacity: .25; animation: pulse-ring 2.2s var(--ease-out) infinite; }
.result__ring svg path { stroke-dasharray: 60; stroke-dashoffset: 60; animation: draw 520ms 220ms var(--ease-out) forwards; }
body.capture .result__ring svg path { stroke-dashoffset: 0; animation: none; }
.result--ok .result__ring { background: #314528; color: #8df15e; }
.result--fail .result__ring { background: #452626; color: #f15858; }
.result--info .result__ring { background: #283845; color: #5fb2f1; }
.result__title { font-size: 26px; font-weight: 600; line-height: 1.2; }
.result__amount { font-size: 38px; font-weight: 500; margin-top: 10px; }
.result__msg { font-size: 15px; color: #a8a8a8; line-height: 1.55; margin: 10px auto 0; max-width: 300px; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes pulse-ring { 0% { transform: scale(.9); opacity: .4; } 100% { transform: scale(1.25); opacity: 0; } }

/* Key-value receipt rows */
.kvs { display: flex; flex-direction: column; }
.kvs > div { display: flex; justify-content: space-between; gap: 14px; padding: 13px 0; font-size: 14px; }
.kvs > div + div { border-top: 1px solid rgba(255,255,255,.12); }
.kvs dt, .kvs .k { color: #9a9a9a; }
.kvs dd, .kvs .v { margin: 0; color: #f0f0f0; text-align: right; font-weight: 500; }

/* Segmented control */
.segmented { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: #1a1a1a; border-radius: 12px; padding: 4px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.segmented button { height: 36px; border-radius: 9px; font-size: 14px; color: #bdbdbd; transition: background var(--dur), color var(--dur); }
.segmented button[aria-selected="true"] { background: #c8e7ff; color: #000; font-weight: 600; }

/* Scrollable chip row */
.chip-row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -34px; padding: 0 34px; }
.chip-row::-webkit-scrollbar { display: none; }
.chip-row .chip { flex-shrink: 0; padding: 0 12px; white-space: nowrap; }

/* Range slider */
.range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 3px; background: linear-gradient(90deg, #5fb2f1 var(--p, 50%), #3a3a3a var(--p, 50%)); outline: none; }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.5); cursor: pointer; }
.range::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 0; }

/* Empty state */
.empty-state { text-align: center; padding: 48px 20px; }
.empty-state__icon { width: 72px; height: 72px; border-radius: 22px; background: #1a1a1a; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); display: grid; place-items: center; margin: 0 auto 18px; color: #8a8a8a; }
.empty-state h3 { font-size: 18px; font-weight: 600; margin: 0; }
.empty-state p { font-size: 14px; color: #9a9a9a; line-height: 1.5; margin: 8px 0 18px; }

/* Skeleton shimmer */
.skeleton { background: linear-gradient(90deg, #1f1f1f 0%, #2c2c2c 50%, #1f1f1f 100%); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; border-radius: 10px; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* Info / warning banner */
.banner { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 16px; font-size: 13px; line-height: 1.5; }
.banner svg { flex-shrink: 0; margin-top: 1px; }
.banner--info { background: #132430; color: #cfe3f3; box-shadow: inset 0 0 0 1px rgba(95,178,241,.25); }
.banner--warn { background: #201f0c; color: #e9e6b8; box-shadow: inset 0 0 0 1px rgba(216,209,82,.25); }
.banner--danger { background: #301212; color: #f0c9c9; box-shadow: inset 0 0 0 1px rgba(241,88,88,.25); }
.banner--ok { background: #1c3013; color: #d2ecc5; box-shadow: inset 0 0 0 1px rgba(141,241,94,.25); }

/* Checkbox */
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 13.5px; line-height: 1.5; color: #cfcfcf; cursor: pointer; }
.check input { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; border-radius: 7px; box-shadow: inset 0 0 0 2px #5a5a5a; flex-shrink: 0; margin: 0; display: grid; place-items: center; cursor: pointer; transition: background var(--dur), box-shadow var(--dur); }
.check input:checked { background: #5fb2f1; box-shadow: none; }
.check input:checked::after { content: ''; width: 10px; height: 6px; border: solid #000; border-width: 0 0 2.5px 2.5px; transform: rotate(-45deg) translate(1px, -1px); }

/* Timeline */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { position: relative; padding: 0 0 18px 30px; font-size: 14px; }
.timeline li::before { content: ''; position: absolute; left: 6px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: #3a3a3a; box-shadow: 0 0 0 3px #262626; }
.timeline li::after { content: ''; position: absolute; left: 10px; top: 18px; bottom: 0; width: 2px; background: #333; }
.timeline li:last-child::after { display: none; }
.timeline li.done::before { background: #8df15e; }
.timeline li.now::before { background: #5fb2f1; box-shadow: 0 0 0 3px #262626, 0 0 0 6px rgba(95,178,241,.25); }
.timeline small { display: block; color: #8a8a8a; font-size: 12px; margin-top: 2px; }

/* Badge dot on icons */
.dot-badge { position: absolute; top: -2px; right: -2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #f15858; color: #fff; font: 600 10px/16px var(--font-ui); text-align: center; box-shadow: 0 0 0 2px #000; }

/* Toast inside flow pages + captures: keep within the 402pt frame */
.page .toast { position: fixed; left: 50%; bottom: 128px; }
body.capture .dialog-wrap { position: absolute; width: 402px; height: 874px; inset: 0 auto auto 0; }

/* Showcase thumbnails: capture mode (no motion, no auto-advance) but keep app chrome pinned to the viewport */
body.capture.embedded { background: #000; }
body.capture.embedded .screen, body.capture.embedded .page { border-radius: 0; }
body.capture.embedded .tabbar, body.capture.embedded .cta-bar { position: fixed; left: 50%; margin-left: -201px; }
body.capture.embedded .sheet, body.capture.embedded .sheet-scrim { position: fixed; }
body.capture.embedded .sheet { left: 50%; margin-left: -201px; }
body.capture.embedded .cam { border-radius: 0; }