/* DailyKhata design system.
   Apple's restraint (neutral surfaces, generous space, large calm type) + Stripe's depth (soft layered shadows,
   brand gradients) + NASA-style data labels (small tracked caps, tabular numerals) + yolk.coach warmth (rounded,
   friendly, bold numbers). One self-hosted typeface so an iPhone, a Galaxy and a Redmi all look identical.
   Brand colour comes from the company; every tint is a precomputed variable (no colour-mix) so old Android browsers behave. */

/* Fonts: Palanquin (text) and Eczar (headings and big numbers) - both SIL OFL, Latin + Devanagari, self-hosted */
@font-face { font-family: "Palanquin"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/palanquin-latin-400.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Palanquin"; font-style: normal; font-weight: 500 600; font-display: swap; src: url(/fonts/palanquin-latin-500.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Palanquin"; font-style: normal; font-weight: 700 900; font-display: swap; src: url(/fonts/palanquin-latin-700.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Palanquin"; font-style: normal; font-weight: 400 500; font-display: swap; src: url(/fonts/palanquin-deva-400.woff2) format("woff2"); unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+25CC, U+A830-A839, U+A8E0-A8FF; }
@font-face { font-family: "Palanquin"; font-style: normal; font-weight: 600 900; font-display: swap; src: url(/fonts/palanquin-deva-700.woff2) format("woff2"); unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+25CC, U+A830-A839, U+A8E0-A8FF; }
@font-face { font-family: "Eczar"; font-style: normal; font-weight: 400 500; font-display: swap; src: url(/fonts/eczar-latin-400.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Eczar"; font-style: normal; font-weight: 400 500; font-display: swap; src: url(/fonts/eczar-deva-400.woff2) format("woff2"); unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF; }
@font-face { font-family: "Eczar"; font-style: normal; font-weight: 600 900; font-display: swap; src: url(/fonts/eczar-latin-700.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Eczar"; font-style: normal; font-weight: 600 900; font-display: swap; src: url(/fonts/eczar-deva-700.woff2) format("woff2"); unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF; }
/* landing-only Devanagari subsets (scripts/subset-landing-fonts.py): 16-26 KB instead of 45-130 KB; other glyphs fall back to the full faces above */
@font-face { font-family: "Palanquin Lite"; font-style: normal; font-weight: 400 500; font-display: swap; src: url(/fonts/lp-palanquin-deva-400.woff2) format("woff2"); unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+25CC, U+A830-A839, U+A8E0-A8FF; }
@font-face { font-family: "Palanquin Lite"; font-style: normal; font-weight: 600 900; font-display: swap; src: url(/fonts/lp-palanquin-deva-700.woff2) format("woff2"); unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+25CC, U+A830-A839, U+A8E0-A8FF; }
@font-face { font-family: "Eczar Lite"; font-style: normal; font-weight: 400 500; font-display: swap; src: url(/fonts/lp-eczar-deva-400.woff2) format("woff2"); unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF; }
@font-face { font-family: "Eczar Lite"; font-style: normal; font-weight: 600 900; font-display: swap; src: url(/fonts/lp-eczar-deva-700.woff2) format("woff2"); unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF; }
:root {
  color-scheme: light;
  /* brand (overridden per company by applyBranding) */
  --brand: #635bff; --accent: #f59e0b; --on-brand: #ffffff;
  --brand-06: rgba(99,91,255,.06); --brand-10: rgba(99,91,255,.10); --brand-16: rgba(99,91,255,.16); --brand-25: rgba(99,91,255,.25); --brand-40: rgba(99,91,255,.40);
  --brand-deep: #2a2480; --brand-light: #8a84ff; --hero-a: #5b53f0; --hero-b: #2d2790;
  --brand-fg-l: #4f46e5; --brand-fg-d: #aaa5ff; --brand-fg: var(--brand-fg-l);
  /* shared palette (same values as landing.css) */
  --ink: #1c1a2b; --oat: #f1ebdd; --brick: #a9372d; --gold: #ebb74a; --night: #15121f; --green: #2e6f4f;
  /* neutrals */
  --bg: #f3f4f8; --surface: #ffffff; --surface-2: #f5f6fa; --surface-3: #eaecf3;
  --border: rgba(16,24,48,.08); --border-strong: rgba(16,24,48,.16);
  --text: #0b1020; --text-2: #465069; --muted: #596177; --field: #79819a;
  --good: #0a7040; --good-bg: #e2f6ec; --warn: #935400; --warn-bg: #fff2d9; --bad: #c42631; --bad-bg: #fde7e8;
  --series-1: #3b82f6; --series-2: #f97316; --series-3: #10b981; --grid: #edeff5;
  --glass: rgba(255,255,255,.82);
  --shadow-sm: 0 1px 2px rgba(16,24,48,.05);
  --shadow: 0 1px 2px rgba(16,24,48,.04), 0 10px 28px -14px rgba(16,24,48,.16);
  --shadow-lg: 0 24px 64px -16px rgba(16,24,48,.34), 0 8px 20px -12px rgba(16,24,48,.2);
  --shadow-float: 0 12px 32px -10px rgba(16,24,48,.28), 0 2px 6px rgba(16,24,48,.08);
  --ring: 0 0 0 4px var(--brand-16);
  /* geometry, tuned per device class below */
  --radius: 22px; --radius-sm: 14px; --tap: 44px; --gutter: 20px;
  --tabbar-h: 78px;
  --ease: cubic-bezier(.32,.72,0,1);
  --font: "Palanquin", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Devanagari", sans-serif;
  --serif: "Eczar", "Iowan Old Style", Georgia, "Noto Serif Devanagari", serif;
  font-family: var(--font);
  font-variant-numeric: lining-nums;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #05060b; --surface: #0f1219; --surface-2: #161a24; --surface-3: #202533; --border: rgba(255,255,255,.08); --border-strong: rgba(255,255,255,.16); --text: #f4f6fb; --text-2: #b4bbcc; --muted: #7f879b; --field: #6c7488; --good: #4fd18b; --good-bg: rgba(79,209,139,.12); --warn: #f5b84d; --warn-bg: rgba(245,184,77,.12); --bad: #ff7b82; --bad-bg: rgba(255,123,130,.12); --series-1: #5b9bff; --series-2: #fb923c; --series-3: #34d399; --grid: #1c212d; --glass: rgba(15,18,25,.8); --shadow-sm: none; --shadow: 0 0 0 1px rgba(255,255,255,.02), 0 14px 32px -16px rgba(0,0,0,.7); --shadow-lg: 0 30px 70px rgba(0,0,0,.7); --shadow-float: 0 14px 34px -8px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.04); --brand-fg: var(--brand-fg-d); } }
:root[data-theme="dark"] { color-scheme: dark; --bg: #05060b; --surface: #0f1219; --surface-2: #161a24; --surface-3: #202533; --border: rgba(255,255,255,.08); --border-strong: rgba(255,255,255,.16); --text: #f4f6fb; --text-2: #b4bbcc; --muted: #7f879b; --good: #4fd18b; --good-bg: rgba(79,209,139,.12); --warn: #f5b84d; --warn-bg: rgba(245,184,77,.12); --bad: #ff7b82; --bad-bg: rgba(255,123,130,.12); --series-1: #5b9bff; --series-2: #fb923c; --series-3: #34d399; --grid: #1c212d; --glass: rgba(15,18,25,.8); --shadow-sm: none; --shadow: 0 0 0 1px rgba(255,255,255,.02), 0 14px 32px -16px rgba(0,0,0,.7); --shadow-lg: 0 30px 70px rgba(0,0,0,.7); --shadow-float: 0 14px 34px -8px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.04); --brand-fg: var(--brand-fg-d); }

/* device classes (set by device.js): comfortable touch targets, tighter gutters on small phones */
:root[data-input="touch"] { --tap: 48px; }
:root[data-os="android"][data-input="touch"] { --tap: 50px; }          /* Material asks for 48dp+ targets */
:root[data-size="xs"] { --gutter: 14px; --radius: 18px; }
:root[data-size="s"] { --gutter: 16px; }                              /* e.g. Redmi 360-393px */
:root[data-size="m"], :root[data-size="l"] { --gutter: 18px; }       /* iPhone 17 Pro, Galaxy S24 Ultra */
:root[data-size="tablet"] { --gutter: 28px; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
html, body { margin: 0; background: var(--bg); color: var(--text); max-width: 100%; overflow-x: hidden; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }
body { font-size: 15px; line-height: 1.5; letter-spacing: -0.005em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-tap-highlight-color: transparent; overscroll-behavior-y: none; touch-action: manipulation; font-variant-numeric: tabular-nums; }
a { color: var(--brand-fg); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: clamp(1.7rem, 1.25rem + 2.2vw, 2.15rem); line-height: 1.1; letter-spacing: -0.035em; font-weight: 760; margin: 0 0 4px; }
h2 { font-size: 1.06rem; letter-spacing: -0.018em; font-weight: 680; margin: 0 0 12px; }
h3 { font-size: .95rem; font-weight: 650; margin: 0 0 8px; }
::selection { background: var(--brand-25); }
.boot { padding: 64px 24px; text-align: center; color: var(--muted); }
.skeleton { height: 120px; border-radius: var(--radius); background: linear-gradient(100deg, var(--surface-2) 30%, var(--surface-3) 50%, var(--surface-2) 70%); background-size: 300% 100%; animation: shimmer 1.3s linear infinite; margin-bottom: 16px; }
@keyframes shimmer { to { background-position: -300% 0; } }
.muted { color: var(--muted); }
.small { font-size: .84rem; }
.right { text-align: right; }
.num { text-align: right; white-space: nowrap; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.spread { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.grow { flex: 1; }
.hidden { display: none !important; }
.ico { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.page-head .sub { color: var(--text-2); font-size: .95rem; }
.eyebrow, .tile .k, .qcell .k, .hero .label, .hero .stats .k, th { text-transform: uppercase; letter-spacing: .07em; font-size: .68rem; font-weight: 650; }

/* ---------- shell ---------- */
.shell { display: grid; grid-template-columns: 264px minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
.side { background: var(--surface); border-right: 1px solid var(--border); padding: 20px 14px; position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto; display: flex; flex-direction: column; z-index: 60; }
.brandbox { display: flex; align-items: center; gap: 12px; padding: 2px 10px 20px; }
.brandbox img { width: 40px; height: 40px; border-radius: 12px; object-fit: contain; background: var(--surface-2); }
.brandmark { width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(145deg, var(--brand-light), var(--brand) 55%, var(--brand-deep)); color: var(--on-brand); display: grid; place-items: center; font-weight: 760; flex: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 4px 12px -4px var(--brand-40); }
.brandbox .bname { font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; }
.nav { display: grid; gap: 2px; }
.nav a { display: flex; gap: 12px; align-items: center; padding: 11px 12px; border-radius: 12px; color: var(--text-2); font-weight: 560; font-size: .93rem; transition: background .15s, color .15s; min-height: 44px; }
.nav a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.nav a.active { background: var(--brand-10); color: var(--brand-fg); font-weight: 650; }
.nav a .ico { width: 20px; height: 20px; }
.nav .sep { height: 1px; background: var(--border); margin: 10px 8px; }
.side .foot { margin-top: auto; padding: 14px 6px 0; border-top: 1px solid var(--border); display: grid; gap: 10px; }
.me { display: flex; gap: 10px; align-items: center; }
.avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--surface-3); color: var(--text-2); display: grid; place-items: center; font-weight: 700; font-size: .85rem; flex: none; }
.main { padding: 32px 36px 64px; max-width: 1240px; width: 100%; margin: 0 auto; }
.topbar { display: none; }
.banner { background: var(--warn-bg); color: var(--warn); padding: 10px 14px; border-radius: var(--radius-sm); margin-bottom: 16px; font-weight: 560; font-size: .9rem; }
.scrim { display: none; }
.tabbar { display: none; }

/* ---------- phones & small tablets ---------- */
@media (max-width: 860px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .side { position: fixed; inset: 0 auto 0 0; width: min(88vw, 330px); transform: translateX(-105%); transition: transform .34s var(--ease); box-shadow: var(--shadow-lg); padding-top: calc(20px + env(safe-area-inset-top)); visibility: hidden; }
  .side.open { transform: none; visibility: visible; }
  .scrim.open { display: block; position: fixed; inset: 0; background: rgba(6,8,18,.45); z-index: 55; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: fade .2s ease; }
  .topbar { display: flex; position: sticky; top: 0; z-index: 40; background: var(--glass); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--border); padding: calc(8px + env(safe-area-inset-top)) max(var(--gutter), env(safe-area-inset-right)) 8px max(var(--gutter), env(safe-area-inset-left)); align-items: center; gap: 10px; min-height: 58px; }
  .topbar .title { font-weight: 680; letter-spacing: -0.015em; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.02rem; }
  .topbar .topmark { padding: 0; width: 38px; min-height: 38px; border: 0; background: none; box-shadow: none; border-radius: 12px; }
  .topbar .topmark .brandmark, .topbar .topmark img { width: 36px; height: 36px; border-radius: 11px; }
  .topbar .topmark img { object-fit: contain; background: var(--surface-2); }
  .main { padding: 18px max(var(--gutter), env(safe-area-inset-right)) calc(var(--tabbar-h) + 36px + env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left)); max-width: 760px; }
  /* floating glass tab bar */
  .tabbar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: stretch; position: fixed; left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 45; height: 66px; padding: 0 6px; border-radius: 28px; background: var(--glass); -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px); border: 1px solid var(--border); box-shadow: var(--shadow-float); max-width: 520px; margin: 0 auto; transition: transform .28s var(--ease), opacity .2s; }
  .kb .tabbar { transform: translateY(140%); opacity: 0; pointer-events: none; }
  .tabbar a, .tabbar button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--muted); font-size: .68rem; font-weight: 620; background: none; border: 0; min-height: 0; padding: 0; border-radius: 20px; text-decoration: none; box-shadow: none; letter-spacing: 0; transition: color .15s; }
  .tabbar a:active, .tabbar button:active { transform: scale(.92); }
  .tabbar a.active { color: var(--brand-fg); }
  .tabbar a.active .ico { stroke-width: 2.2; }
  .tabbar .ico { width: 24px; height: 24px; }
  .tabbar .fab { position: relative; }
  .tabbar .fab span.ring { width: 58px; height: 58px; border-radius: 50%; background: linear-gradient(160deg, var(--brand-light), var(--brand) 55%, var(--brand-deep)); color: var(--on-brand); display: grid; place-items: center; margin-top: -30px; box-shadow: 0 12px 24px -6px var(--brand-40), 0 0 0 5px var(--bg), inset 0 1px 0 rgba(255,255,255,.3); transition: transform .2s var(--ease); }
  .tabbar .fab:active span.ring { transform: scale(.92); }
  .tabbar .fab .ico { width: 28px; height: 28px; stroke-width: 2.3; }
  :root { --tabbar-h: 86px; }
}
@media (min-width: 861px) { .mob-only { display: none !important; } }

/* ---------- cards & tiles ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); margin-bottom: 16px; min-width: 0; }
.card.flush { padding: 0; overflow: hidden; }
.card.tint { background: var(--surface-2); box-shadow: none; }
.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { .g2, .g3 { grid-template-columns: minmax(0, 1fr); } .card { padding: 18px; } }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-bottom: 16px; }
@media (max-width: 560px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
.tile { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 16px; box-shadow: var(--shadow); min-width: 0; }
.tile .k { color: var(--muted); }
.tile .v { font-size: clamp(1.3rem, 1rem + 1.6vw, 1.55rem); font-weight: 740; letter-spacing: -0.03em; margin-top: 6px; overflow-wrap: anywhere; line-height: 1.15; }
.tile .s { font-size: .76rem; color: var(--muted); margin-top: 6px; line-height: 1.4; }
.tile.hl { border-color: var(--brand-40); background: linear-gradient(180deg, var(--brand-10), var(--surface) 70%); }
.pos { color: var(--good); } .neg { color: var(--bad); }

/* hero: the one number that matters */
.hero { position: relative; overflow: hidden; border-radius: 28px; padding: 24px 22px 20px; margin-bottom: 16px; color: #fff;
  background: radial-gradient(90% 120% at 100% 0%, rgba(255,255,255,.22), transparent 55%), linear-gradient(155deg, var(--hero-a) 0%, var(--hero-b) 130%);
  box-shadow: 0 24px 48px -22px var(--brand-40), inset 0 1px 0 rgba(255,255,255,.22); }
.hero::before { content: ""; position: absolute; left: -40px; bottom: -70px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.14), transparent 68%); pointer-events: none; }
.hero .label { opacity: .85; }
.hero .big { font-size: clamp(2.3rem, 1.4rem + 4.4vw, 3rem); font-weight: 780; letter-spacing: -0.045em; line-height: 1.04; margin: 6px 0 18px; }
.hero .stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; border-top: 1px solid rgba(255,255,255,.2); padding-top: 14px; }
.hero .stats .k { opacity: .78; }
.hero .stats .v { font-weight: 700; font-size: 1.02rem; margin-top: 2px; letter-spacing: -0.02em; }
.hero .pill { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.24); padding: 5px 11px; border-radius: 99px; font-size: .76rem; font-weight: 640; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); letter-spacing: 0; text-transform: none; }

/* step checklist */
.steps { display: grid; gap: 0; }
.step { box-shadow: none !important; display: flex; align-items: center; gap: 14px; padding: 14px 2px; border-bottom: 1px solid var(--border); cursor: pointer; background: none; border-left: 0; border-right: 0; border-top: 0; border-radius: 0; width: 100%; text-align: left; min-height: 68px; font-weight: 500; justify-content: flex-start; white-space: normal; }
.step:last-child { border-bottom: 0; }
.step:hover { background: none; }
.step .dot { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: var(--surface-2); color: var(--text-2); flex: none; transition: transform .2s var(--ease); }
.step.done .dot { background: var(--good-bg); color: var(--good); }
.step .t { font-weight: 640; }
.step .d { font-size: .82rem; color: var(--muted); }
.step .amt { margin-left: auto; font-weight: 680; white-space: nowrap; letter-spacing: -0.02em; }
.step .chev { color: var(--muted); }

/* ---------- forms ---------- */
label { display: block; font-size: .8rem; font-weight: 620; color: var(--text-2); margin-bottom: 6px; }
input, select, textarea { font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--field); border-radius: var(--radius-sm); padding: 0 14px; width: 100%; min-height: calc(var(--tap) + 4px); transition: border-color .15s, box-shadow .15s, background .15s; -webkit-appearance: none; appearance: none; }
select { padding-right: 38px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%238a93a8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
textarea { padding: 12px 14px; }
input[type=date], input[type=time] { min-height: calc(var(--tap) + 4px); }
input::placeholder, textarea::placeholder { color: var(--muted); }
input[type=checkbox] { width: 20px; height: 20px; min-height: 0; padding: 0; accent-color: var(--brand); -webkit-appearance: auto; appearance: auto; border-radius: 6px; }
input[type=color] { padding: 4px; width: 60px; height: calc(var(--tap) + 4px); }
input[type=file] { padding: 10px; font-size: .88rem; height: auto; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: var(--ring); }
input:disabled { opacity: .6; }
textarea { min-height: 120px; resize: vertical; line-height: 1.55; }
@media (max-width: 860px) { input, select, textarea { font-size: 16px; } } /* iOS never auto-zooms a 16px field */
.field { margin-bottom: 14px; min-width: 0; }
.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; align-items: end; }
.check { display: flex; gap: 10px; align-items: center; font-weight: 520; color: var(--text); font-size: .92rem; margin: 0; }
button, .btn { font: inherit; font-size: .93rem; font-weight: 620; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); border-radius: var(--radius-sm); padding: 0 18px; min-height: var(--tap); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; box-shadow: var(--shadow-sm); transition: background .15s, transform .12s var(--ease), box-shadow .15s, filter .15s; text-decoration: none !important; letter-spacing: -0.005em; -webkit-appearance: none; appearance: none; }
button:active, .btn:active { transform: scale(.97); }
button:focus-visible, .btn:focus-visible, a:focus-visible { outline: none; box-shadow: var(--ring); }
button.primary, .btn.primary { background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 60%), var(--brand); border-color: transparent; color: var(--on-brand); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 8px 18px -8px var(--brand-40); }
button.danger, .btn.danger { color: var(--bad); }
button.danger.solid { background: var(--bad); color: #fff; border-color: transparent; }
button.small, .btn.small { min-height: 38px; padding: 0 14px; font-size: .85rem; border-radius: 12px; }
button.ghost, .btn.ghost { border-color: transparent; background: transparent; box-shadow: none; }
button.icon { width: 42px; min-height: 42px; padding: 0; border-radius: 13px; }
button.icon.small { width: 38px; min-height: 38px; }
button.block { width: 100%; }
button:disabled { opacity: .5; cursor: default; transform: none; }
@media (hover: hover) { button:hover, .btn:hover { background: var(--surface-2); } button.primary:hover { filter: brightness(1.06); background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 60%), var(--brand); } button.ghost:hover { background: var(--surface-2); } }
.seg { display: inline-flex; background: var(--surface-3); border-radius: 13px; padding: 3px; gap: 2px; flex-wrap: wrap; max-width: 100%; }
.seg button { border: 0; border-radius: 10px; min-height: 36px; padding: 0 14px; background: transparent; box-shadow: none; color: var(--text-2); font-size: .85rem; }
.seg button.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(16,24,48,.14); font-weight: 680; }
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; max-width: 100%; min-width: 0; }
.scroll-x::-webkit-scrollbar { display: none; }
.scroll-x .seg { flex-wrap: nowrap; }
.spread > *, .row > * { min-width: 0; }

/* ---------- tables (become cards on phones) ---------- */
.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -6px; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th { text-align: left; color: var(--muted); padding: 10px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; }
td { padding: 13px 8px; border-bottom: 1px solid var(--border); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
tfoot td { font-weight: 700; border-top: 1px solid var(--border-strong); }
td input, td select { min-height: 40px; padding: 0 10px; }
.empty { padding: 32px 12px; text-align: center; color: var(--muted); }
@media (hover: hover) { tbody tr:hover { background: var(--surface-2); } }
@media (max-width: 640px) {
  table.stack thead { display: none; }
  table.stack, table.stack tbody, table.stack tfoot { display: block; }
  table.stack tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3px 12px; padding: 14px 6px; border-bottom: 1px solid var(--border); }
  table.stack tr:last-child { border-bottom: 0; }
  table.stack td { border: 0; padding: 2px 0; display: flex; justify-content: space-between; gap: 8px; align-items: center; text-align: right; min-width: 0; }
  table.stack td::before { content: attr(data-label); color: var(--muted); font-size: .76rem; font-weight: 600; text-align: left; }
  table.stack td:first-child { grid-column: 1 / -1; font-weight: 680; font-size: 1rem; text-align: left; justify-content: flex-start; padding-bottom: 4px; }
  table.stack td:first-child::before, table.stack td[data-label=""]::before { display: none; }
  table.stack td[data-label=""] { grid-column: 1 / -1; justify-content: flex-end; }
  table.stack td[data-label=""]:empty { display: none; }
  table.stack td.empty { grid-column: 1 / -1; justify-content: center; }
  table.stack td input, table.stack td select { max-width: 60%; }
  table.stack td:first-child input { max-width: 100%; }
  table.stack tfoot tr { background: var(--surface-2); border-radius: var(--radius-sm); }
  .tablewrap { margin: 0; overflow: visible; }
}

/* ---------- badges & alerts ---------- */
.badge { display: inline-flex; align-items: center; gap: 4px; font-size: .72rem; font-weight: 660; padding: 3px 10px; border-radius: 99px; background: var(--surface-3); color: var(--text-2); white-space: nowrap; }
.badge.good { background: var(--good-bg); color: var(--good); }
.badge.warn { background: var(--warn-bg); color: var(--warn); }
.badge.bad { background: var(--bad-bg); color: var(--bad); }
.alert { padding: 12px 14px; border-radius: var(--radius-sm); margin-bottom: 8px; display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; font-weight: 500; }
.alert.warning { background: var(--warn-bg); color: var(--warn); }
.alert.error { background: var(--bad-bg); color: var(--bad); }
.alert.info { background: var(--surface-2); color: var(--text-2); }
.alert .ic, .alert .ico { flex: none; margin-top: 1px; width: 18px; height: 18px; }

/* ---------- sign in ---------- */
.auth { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: 1.1fr 1fr; }
.auth-hero { position: relative; overflow: hidden; color: #fff; padding: 56px; display: flex; flex-direction: column; justify-content: space-between; background: #0a0f24; }
.auth-hero .mesh { position: absolute; inset: -20%; background:
  radial-gradient(40% 50% at 15% 20%, #635bff 0%, transparent 60%), radial-gradient(35% 45% at 85% 15%, #00d4ff 0%, transparent 60%),
  radial-gradient(45% 55% at 70% 85%, #ff5996 0%, transparent 60%), radial-gradient(40% 50% at 20% 90%, #ffb341 0%, transparent 60%);
  filter: blur(46px) saturate(130%); opacity: .8; animation: drift 20s ease-in-out infinite alternate; }
@keyframes drift { to { transform: translate3d(4%, -3%, 0) rotate(6deg) scale(1.05); } }
.auth-hero > * { position: relative; }
.auth-hero h1 { font-size: clamp(2rem, 3.4vw, 3.1rem); letter-spacing: -0.04em; max-width: 14ch; line-height: 1.04; }
.auth-hero p { font-size: 1.05rem; opacity: .9; max-width: 38ch; }
.auth-hero ul { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 10px; font-weight: 560; }
.auth-hero li { display: flex; gap: 10px; align-items: center; }
.auth-hero li .ico { background: rgba(255,255,255,.18); border-radius: 8px; padding: 4px; width: 26px; height: 26px; }
.auth-form { display: grid; place-items: center; padding: 32px 20px; background: var(--surface); }
.auth-form .inner { width: 100%; max-width: 390px; }
.auth-form h2 { font-size: 1.7rem; letter-spacing: -0.035em; margin-bottom: 4px; }
.logo { display: flex; align-items: center; gap: 10px; font-weight: 720; letter-spacing: -0.02em; }
@media (max-width: 860px) {
  .auth { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .auth-hero { padding: calc(28px + env(safe-area-inset-top)) 24px 40px; }
  .auth-hero h1 { font-size: 2.1rem; margin-top: 28px; }
  .auth-hero ul { display: none; }
  .auth-form { align-items: start; border-radius: 28px 28px 0 0; margin-top: -22px; position: relative; padding-top: 30px; padding-bottom: calc(30px + env(safe-area-inset-bottom)); }
}

/* ---------- sheets & dialogs ---------- */
.modal-bg { position: fixed; inset: 0; background: rgba(6,8,18,.5); z-index: 100; display: grid; place-items: center; padding: 16px; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: fade .2s ease; }
.modal { background: var(--surface); border-radius: 26px; width: 100%; max-width: 580px; max-height: 90vh; max-height: 90dvh; overflow-y: auto; overscroll-behavior: contain; padding: 24px; box-shadow: var(--shadow-lg); border: 1px solid var(--border); animation: pop .28s var(--ease); }
.modal.wide { max-width: 1000px; }
.modal .grab { display: none; }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.97); } }
@keyframes up { from { transform: translateY(100%); } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
@media (max-width: 640px) {
  .modal-bg { place-items: end stretch; padding: 0; }
  .modal, .modal.wide { max-width: none; border-radius: 30px 30px 0 0; max-height: 92vh; max-height: 92dvh; padding: 8px 20px calc(24px + env(safe-area-inset-bottom)); animation: up .42s var(--ease); border-bottom: 0; }
  .modal .grab { display: block; width: 42px; height: 5px; border-radius: 3px; background: var(--border-strong); margin: 4px auto 14px; touch-action: none; }
  .modal.dragging { transition: none; animation: none; }
}
.actions { display: grid; gap: 8px; }
.action { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 14px; min-height: 66px; justify-content: flex-start; text-align: left; border-radius: 18px; white-space: normal; }
.action .dot { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--brand-10); color: var(--brand-fg); flex: none; }
.action .t { font-weight: 660; display: block; }
.action .d { font-size: .8rem; color: var(--muted); font-weight: 500; display: block; white-space: normal; }

#toasts { position: fixed; bottom: calc(24px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); z-index: 200; display: grid; gap: 8px; width: min(92vw, 420px); pointer-events: none; }
@media (max-width: 860px) { #toasts { bottom: calc(var(--tabbar-h) + 8px + env(safe-area-inset-bottom)); } }
.toast { background: #11162a; color: #fff; padding: 13px 16px; border-radius: 16px; box-shadow: var(--shadow-lg); font-weight: 580; font-size: .9rem; animation: pop .26s var(--ease); display: flex; gap: 10px; align-items: center; }
:root[data-theme="dark"] .toast { background: #f4f6fb; color: #0b1020; }
.toast.err { background: var(--bad); color: #fff; }

/* ---------- charts ---------- */
.chart { position: relative; height: 260px; }
.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: .8rem; color: var(--text-2); margin-bottom: 10px; font-weight: 560; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }

/* ---------- day entry ---------- */
.datebar { display: flex; gap: 6px; align-items: center; }
.sec-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.sec-head h2 { margin: 0; display: flex; align-items: center; gap: 10px; }
.sec-head h2 .dot { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); color: var(--text-2); }
.sec-head h2 .dot .ico { width: 18px; height: 18px; }
.photo-thumb { max-width: 100%; max-height: 70vh; border-radius: 14px; border: 1px solid var(--border); display: block; }
.review-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 16px; }
@media (max-width: 860px) { .review-grid { grid-template-columns: minmax(0, 1fr); } }
.kv { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; font-size: .92rem; }
.kv div:nth-child(even) { text-align: right; }
.kv .tot { font-weight: 700; border-top: 1px solid var(--border); padding-top: 8px; }
pre.diff { white-space: pre-wrap; word-break: break-word; font-size: .76rem; background: var(--surface-2); padding: 10px; border-radius: 10px; max-height: 240px; overflow: auto; font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.row > input[type=date], .row > span > input[type=date] { width: auto; }
details summary { cursor: pointer; color: var(--text-2); min-height: 40px; display: flex; align-items: center; }
.desk-only { }
@media (max-width: 860px) { .desk-only { display: none !important; } }

/* ---------- list rows ---------- */
.list { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0 -8px; }
.li { display: flex; align-items: center; gap: 14px; padding: 12px 8px; border-radius: 14px; min-height: 64px; position: relative; transition: background .12s; }
.li + .li::before { content: ""; position: absolute; top: 0; left: 8px; right: 8px; height: 1px; background: var(--border); }
.li.tap { cursor: pointer; }
.li.tap:active { background: var(--surface-2); }
@media (hover: hover) { .li.tap:hover { background: var(--surface-2); } }
.li .lead { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: var(--surface-2); color: var(--text-2); flex: none; font-weight: 700; font-size: .82rem; }
.li .body { flex: 1; min-width: 0; }
.li .t { font-weight: 620; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.li .d { font-size: .8rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.li .amt { font-weight: 680; white-space: nowrap; text-align: right; letter-spacing: -0.02em; }
.li .amt .d { text-align: right; font-weight: 500; letter-spacing: 0; }
.li .acts { display: flex; gap: 2px; }
.li input { width: 96px; text-align: right; flex: none; }
.li-total { display: flex; justify-content: space-between; padding: 14px 0 2px; border-top: 1px solid var(--border-strong); margin-top: 4px; font-weight: 720; }
.li-total .muted { font-weight: 500; }
.list .empty { padding: 22px 8px; }
@media (max-width: 860px) { .li .acts { display: none; } }
.form-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
@media (max-width: 640px) { .form-foot { flex-direction: column-reverse; align-items: stretch; } .form-foot button { width: 100%; min-height: 52px; } .modal form > .row:last-child { flex-direction: column-reverse; align-items: stretch; } .modal form > .row:last-child button { width: 100%; min-height: 52px; } }
.modal .fields > .field:first-child { grid-column: 1 / -1; }

/* ---------- experience modes ---------- */
:root[data-mode="layman"] .smart-up, :root[data-mode="layman"] .nerd-only, :root[data-mode="smart"] .nerd-only { display: none !important; }
:root[data-mode="layman"] body { font-size: 16.5px; }
:root[data-mode="layman"] button, :root[data-mode="layman"] .btn { min-height: calc(var(--tap) + 4px); font-size: 1rem; }
:root[data-mode="layman"] button.small, :root[data-mode="layman"] button.icon { min-height: var(--tap); }
:root[data-mode="layman"] .step { min-height: 76px; }
:root[data-mode="layman"] .tabbar button, :root[data-mode="layman"] .tabbar a { font-size: .7rem; min-height: 0; }
.modechip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 13px; border-radius: 99px; font-size: .8rem; font-weight: 660; background: var(--brand-10); color: var(--brand-fg); border: 1px solid var(--brand-16); box-shadow: none; }
.side .foot .modechip { width: 100%; justify-content: center; min-height: 40px; }
.modes { display: grid; gap: 10px; }
.modecard { display: flex; align-items: center; gap: 14px; text-align: left; justify-content: flex-start; white-space: normal; padding: 14px 16px; min-height: 80px; border-radius: 20px; width: 100%; }
.modecard .dot { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; flex: none; background: var(--surface-2); color: var(--text-2); }
.modecard .txt { flex: 1; min-width: 0; }
.modecard .t { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 1rem; }
.modecard .tag { font-size: .68rem; font-weight: 650; padding: 2px 8px; border-radius: 99px; background: var(--surface-3); color: var(--text-2); }
.modecard .d { display: block; font-size: .84rem; color: var(--text-2); font-weight: 500; margin-top: 3px; line-height: 1.38; }
.modecard .tick { width: 24px; flex: none; color: var(--brand-fg); }
.modecard.on { border-color: var(--brand); background: var(--brand-06); box-shadow: var(--ring); }
.modecard.on .dot { background: var(--brand); color: var(--on-brand); }

/* ---------- quick add ---------- */
.qhead { margin: 2px 0 16px; }
.qhead h1 { margin: 2px 0 2px; }
.qhead .sub { color: var(--text-2); }
.qsum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 22px; overflow: hidden; margin-bottom: 16px; box-shadow: var(--shadow); }
.qcell { background: var(--surface); padding: 14px; min-width: 0; }
.qcell .k { color: var(--muted); }
.qcell .v { font-size: 1.15rem; font-weight: 740; letter-spacing: -0.03em; overflow-wrap: anywhere; margin-top: 3px; }
.qform { background: var(--surface); border: 1px solid var(--border); border-radius: 28px; padding: 16px; box-shadow: var(--shadow); margin-bottom: 16px; display: grid; gap: 16px; }
.qtypes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.qtype { flex-direction: column; gap: 2px; min-height: 100px !important; padding: 10px 6px; border-radius: 20px; white-space: normal; text-align: center; box-shadow: none; }
.qtype .dot { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--surface-2); color: var(--text-2); margin-bottom: 4px; transition: background .2s, color .2s; }
.qtype .t { font-weight: 700; font-size: .92rem; line-height: 1.15; }
.qtype .s { font-size: .7rem; font-weight: 500; color: var(--muted); line-height: 1.2; }
.qtype.on { border-color: var(--brand); background: var(--brand-06); box-shadow: var(--ring); }
.qtype.on .dot { background: var(--brand); color: var(--on-brand); }
.amtbox { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 16px 12px; margin: 0; border-radius: 22px; background: var(--surface-2); border: 1px solid var(--border); transition: border-color .15s, box-shadow .15s, background .15s; }
.amtbox:focus-within { border-color: var(--brand); box-shadow: var(--ring); background: var(--surface); }
.amtbox .rs { font-size: 2.2rem; font-weight: 700; color: var(--muted); }
.bigamt { border: 0 !important; background: transparent !important; box-shadow: none !important; font-size: clamp(2.4rem, 1.4rem + 4.8vw, 3rem) !important; font-weight: 780; letter-spacing: -0.04em; text-align: left; min-height: 64px; padding: 0 !important; width: 100%; max-width: 260px; }
.bigamt:focus { box-shadow: none !important; }
.lbl { font-size: .72rem; font-weight: 650; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; margin: 2px 2px 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.chip { min-height: var(--tap); padding: 0 18px; border-radius: 99px; font-weight: 620; box-shadow: none; }
.chip.on { background: var(--brand); color: var(--on-brand); border-color: transparent; box-shadow: 0 6px 14px -6px var(--brand-40); }
@media (hover: hover) { .chip.on:hover { background: var(--brand); } }
.stepper { display: grid; grid-template-columns: 58px minmax(0, 1fr) 58px; gap: 8px; }
.stepper button { min-height: 54px; font-size: 1.5rem; border-radius: 16px; padding: 0; }
.stepper input { text-align: center; font-size: 1.2rem; font-weight: 700; min-height: 54px; }
.qactions { display: grid; gap: 10px; }
.savebtn { min-height: 58px !important; font-size: 1.05rem !important; border-radius: 18px !important; }
.photobtn { width: 100%; border-style: dashed; background: transparent; box-shadow: none; color: var(--text-2); }
.qdetail .field { margin: 0 0 6px; }
@media (max-width: 860px) {
  .qactions { position: sticky; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) - 4px); z-index: 5; margin: 0 -16px -16px; padding: 14px 16px 16px; background: linear-gradient(to top, var(--surface) 80%, rgba(0,0,0,0)); border-radius: 0 0 28px 28px; }
  .kb .qactions { bottom: 0; }
}
:root[data-size="xs"] .qtype .s, :root[data-size="s"] .qtype .s { display: none; }
:root[data-size="xs"] .qtype, :root[data-size="s"] .qtype { min-height: 88px !important; }

/* ---------- date chip, branding ---------- */
.datechip { position: relative; display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 0 15px; margin: 0; border-radius: 99px; background: var(--surface); border: 1px solid var(--border-strong); font-size: .9rem; font-weight: 650; color: var(--text); cursor: pointer; box-shadow: var(--shadow-sm); }
.datechip .datepick { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; opacity: 0; cursor: pointer; padding: 0; border: 0; }
.logorow { display: flex; gap: 14px; align-items: flex-start; margin: 10px 0; }
.logoprev { width: 76px; height: 76px; border-radius: 20px; object-fit: contain; background: var(--surface-2); border: 1px solid var(--border); flex: none; }
.logoprev.empty { display: grid; place-items: center; color: var(--muted); border-style: dashed; }
.brandsuggest { margin-top: 12px; padding: 14px; border-radius: 16px; background: var(--surface-2); display: grid; gap: 10px; }
.swatches { display: flex; gap: 8px; }
.sw { width: 42px; height: 42px; border-radius: 13px; border: 1px solid rgba(0,0,0,.12); box-shadow: var(--shadow-sm); }

/* ---------- motion ---------- */
.main > * { animation: rise .42s var(--ease) both; }
.main > *:nth-child(2) { animation-delay: .04s; } .main > *:nth-child(3) { animation-delay: .08s; } .main > *:nth-child(4) { animation-delay: .12s; } .main > *:nth-child(n+5) { animation-delay: .16s; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }
::view-transition-old(root) { animation: vt-out .12s ease both; }
::view-transition-new(root) { animation: vt-in .22s ease both; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

@media print {
  .side, .topbar, .tabbar, .noprint, button { display: none !important; }
  .shell { display: block; } .main { padding: 0; } .card { box-shadow: none; break-inside: avoid; } .main > * { animation: none; }
}

/* ---------- overflow guards: nothing may push the page wider than the phone ---------- */
.noprint { grid-template-columns: minmax(0, 1fr); }

/* ---------- lite mode: low-end phones (auto-detected in boot.js, or Settings → Performance) ----------
   Blur, big shadows and entrance animations are the most expensive things a phone GPU does. Lite drops them
   and keeps the layout identical, so scrolling and taps stay smooth on 3–4 GB devices. */
html.lite *, html.lite *::before, html.lite *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html.lite .topbar, html.lite .tabbar { background: var(--surface) !important; }
html.lite .scrim.open, html.lite .modal-bg { background: rgba(6,8,18,.6) !important; }
html.lite .card, html.lite .tile, html.lite .tabbar, html.lite .modal, html.lite .toast { box-shadow: 0 1px 2px rgba(0,0,0,.08) !important; }
html.lite .auth-hero .mesh { display: none; }
html.lite .modal { animation: none !important; }

/* ---------- sync status chip & first-time download ---------- */
.syncchip { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 0 12px; border-radius: 99px; font-size: .75rem; font-weight: 650; background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border); box-shadow: none; white-space: nowrap; }
.syncchip[hidden] { display: none; }
.syncchip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: none; }
.syncchip.ok .dot { background: var(--good); }
.syncchip.busy .dot { background: var(--brand); animation: pulse 1s ease-in-out infinite; }
.syncchip.warn { color: var(--warn); background: var(--warn-bg); border-color: transparent; }
.syncchip.warn .dot { background: var(--warn); }
.syncchip.bad { color: var(--bad); background: var(--bad-bg); border-color: transparent; }
.syncchip.bad .dot { background: var(--bad); }
.syncchip.sync-side { width: 100%; justify-content: flex-start; margin-bottom: 8px; }
@keyframes pulse { 50% { opacity: .35; } }
@keyframes spin { to { transform: rotate(360deg); } }
.spinner { width: 32px; height: 32px; border-radius: 50%; border: 3px solid var(--border-strong); border-top-color: var(--brand); animation: spin .8s linear infinite; margin: 0 auto; }
html.lite .spinner { animation: spin .8s linear infinite !important; }
html.lite .syncchip.busy .dot { animation: pulse 1s ease-in-out infinite !important; }

/* ---- cash counter, notes, receipts ---- */
.qtools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 16px; }
.qtool { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 20px; background: var(--surface); border: 1px solid var(--border); color: var(--text); text-decoration: none; min-height: 68px; box-shadow: var(--shadow); }
.qtool .dot { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: var(--brand-10); color: var(--brand-fg); flex: none; }
.qtool b { display: block; font-weight: 660; font-size: .95rem; }
.qtool .d { display: block; font-size: .75rem; color: var(--muted); }
.ccard { padding: 6px 14px; }
.crows { display: grid; }
.crow { display: grid; grid-template-columns: 64px minmax(0, 1fr) 92px; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.crow:last-child { border-bottom: 0; }
.cnote { font-size: .8rem; color: var(--muted); font-weight: 600; }
.cnote b { font-size: 1.35rem; color: var(--text); margin-left: 1px; letter-spacing: -.02em; }
.crow.has .cnote b { color: var(--brand-fg); }
.csum { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.cextra { display: flex; align-items: center; gap: 6px; grid-column: 2; }
.cextra input { text-align: center; font-weight: 700; min-height: 54px; width: 100%; }
.cbar { position: sticky; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) - 4px); margin: 14px -4px 0; padding: 14px 16px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 24px; box-shadow: var(--shadow-lg, var(--shadow)); z-index: 5; }
.kb .cbar { bottom: 0; }
.cbar-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.ctotal { font-size: clamp(2rem, 1.2rem + 4vw, 2.6rem); font-weight: 800; letter-spacing: -.04em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cwords { font-size: .85rem; color: var(--text-2); min-height: 1.2em; margin: 4px 0 10px; }
.cbtns { display: grid; grid-template-columns: 1.6fr 1fr; gap: 10px; }
.cbtns button { min-height: 52px; border-radius: 16px; }
.cbtns button:only-child { grid-column: 1 / -1; }
.notelist { display: grid; gap: 10px; }
.notecard { display: flex; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 20px; background: var(--surface); border: 1px solid var(--border); color: var(--text); text-decoration: none; box-shadow: var(--shadow); }
.nc-main { min-width: 0; }
.nc-title { font-weight: 680; display: flex; gap: 6px; align-items: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nc-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nc-total { font-weight: 780; font-variant-numeric: tabular-nums; white-space: nowrap; align-self: center; color: var(--brand-fg); }
.ncard { padding: 12px 14px; }
.ntitle { border: 0 !important; background: transparent !important; box-shadow: none !important; font-size: 1.15rem; font-weight: 700; padding: 0 !important; min-height: 44px; }
.nwrap { position: relative; overflow: hidden; border-radius: 14px; background: var(--surface-2, transparent); margin-top: 6px; }
.nta { display: block; width: 100%; min-height: 240px; height: 40vh; resize: none; border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 10px 120px 10px 10px !important; font: 500 1rem/28px var(--font, inherit); white-space: pre; overflow: auto; position: relative; z-index: 1; }
.nres { position: absolute; top: 10px; right: 10px; width: 110px; pointer-events: none; text-align: right; font: 650 .9rem/28px var(--font, inherit); font-variant-numeric: tabular-nums; z-index: 2; will-change: transform; }
.nl { height: 28px; white-space: nowrap; color: var(--brand-fg); }
.nl.subtotal { color: var(--text); font-weight: 800; }
.nl.error { color: var(--danger, #c42631); }
.nhint { margin-top: 8px; }
.ghost.on, button.on.ghost { color: var(--brand-fg); background: var(--brand-10); }
.receipt-preview { display: block; width: 100%; max-height: 52vh; object-fit: contain; border-radius: 14px; margin-bottom: 14px; background: var(--surface-2, transparent); }
.receipt-actions { display: grid; gap: 10px; }
.receipt-actions button { min-height: 52px; border-radius: 16px; }
.crow { grid-template-columns: 52px minmax(0, 1fr) 76px; gap: 8px; }
.crow .stepper { grid-template-columns: 46px minmax(0, 1fr) 46px; gap: 6px; }
.crow .stepper button { min-height: 46px; border-radius: 14px; }
.crow .stepper input { min-height: 46px; padding: 0 4px; min-width: 0; width: 100%; }
.csum { font-size: .9rem; }
.ntrow { display: flex; align-items: center; gap: 8px; }
.ntrow .ntitle { flex: 1; min-width: 0; width: auto; }
.cbar-top .row { flex-wrap: wrap; justify-content: flex-end; }
/* small phones: the Save bar sits below the form instead of floating over the Udhaar chip */
@media (max-width: 430px) { .qactions { position: static; margin: 12px 0 0; padding: 0; background: none; } }

/* ---- cash counter v3: one screen, one big + per tile, note-coloured badges ---- */
.cpage { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.cpanel { background: var(--surface); border: 1px solid var(--border); border-radius: 24px; padding: 14px 16px 12px; box-shadow: var(--shadow); }
.cptop { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.cpanel .eyebrow { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cpanel .ctotal { font-size: clamp(2.1rem, 1.2rem + 5.4vw, 2.8rem); font-weight: 800; letter-spacing: -.045em; line-height: 1.05; margin-top: 2px; font-variant-numeric: tabular-nums; }
.cpright { display: flex; align-items: center; gap: 6px; flex: none; }
.cpright .cl { min-height: 38px; padding: 0 14px; }
.cpright .cclear { width: 38px; height: 38px; min-height: 38px; color: var(--muted); }
.cpanel .cwords { margin: 6px 0 0; font-size: .8rem; line-height: 1.35; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 0; }
.ccount { font-weight: 650; text-transform: none; letter-spacing: 0; }
.cgrid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ctile { position: relative; display: flex; flex-direction: column; align-items: stretch; min-height: 0; padding: 8px; border-radius: 20px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; transition: background .15s, border-color .15s, transform .1s var(--ease); }
.ctile:active { transform: scale(.97); }
.ctile.has { border-color: var(--brand-40); background: var(--brand-06); }
.ctop { display: flex; justify-content: space-between; align-items: center; gap: 4px; min-width: 0; height: 30px; }
.cden { display: inline-flex; align-items: baseline; gap: 1px; height: 28px; padding: 0 9px 0 8px; border-radius: 9px; font-size: .78rem; font-weight: 700; color: var(--text-2); background: var(--surface-2); border-left: 4px solid var(--nc); line-height: 28px; white-space: nowrap; }
.cden b { font-size: 1.05rem; color: var(--text); letter-spacing: -.02em; }
.ctile.coin .cden { border-left: 0; border-radius: 99px; padding: 0 10px 0 4px; }
.ctile.coin .cden::before { content: ""; align-self: center; width: 16px; height: 16px; border-radius: 50%; background: var(--nc); box-shadow: inset 0 0 0 2px rgba(255,255,255,.45); margin-right: 4px; }
.cminus { width: 30px; height: 30px; min-height: 0 !important; padding: 0; border-radius: 50%; background: var(--surface-2); color: var(--text-2); box-shadow: none; border: 0; visibility: hidden; flex: none; }
.ctile.has .cminus { visibility: visible; }
.cqty { flex: 1; min-height: 0 !important; width: 100%; border: 0 !important; background: transparent !important; box-shadow: none !important; text-align: center; font-size: clamp(1.8rem, 1.1rem + 3.4vw, 2.4rem) !important; font-weight: 800; letter-spacing: -.03em; padding: 0 !important; color: var(--text); font-variant-numeric: tabular-nums; }
.cqty::placeholder { color: var(--surface-3); }
.cqty:focus { box-shadow: none !important; }
.ctile .csum { text-align: center; font-size: .74rem; font-weight: 700; color: var(--brand-fg); min-height: 1.1em; margin: -2px 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.cplus { width: 100%; min-height: 0 !important; height: clamp(38px, 6vh, 46px); padding: 0; border-radius: 14px; background: var(--brand); color: var(--on-brand); border-color: transparent; box-shadow: 0 6px 14px -8px var(--brand-40); }
.cpage .cbtns { display: grid; grid-template-columns: 1.6fr 1fr; gap: 10px; }
.cpage .cbtns button { min-height: 52px; border-radius: 16px; }
@media (max-width: 860px) {
  .main.fit { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); padding-top: 12px; }
}
@media (min-width: 861px) { .cpage { max-width: 520px; margin: 0 auto; } .cgrid { grid-template-rows: repeat(3, 150px); } }
/* short phones (most 360-wide Androids): tighter chrome so the count number keeps its room */
@media (max-height: 780px) and (max-width: 860px) {
  .cpage { gap: 8px; }
  .cpanel { padding: 10px 14px 9px; border-radius: 20px; }
  .cpanel .ctotal { font-size: clamp(1.9rem, 1.2rem + 4.6vw, 2.3rem); }
  .cpanel .cwords { -webkit-line-clamp: 1; margin-top: 3px; font-size: .76rem; }
  .ctile { padding: 6px; border-radius: 18px; }
  .ctop { height: 26px; }
  .cden { height: 24px; line-height: 24px; }
  .cminus { width: 26px; height: 26px; }
  .cqty { font-size: clamp(1.4rem, 1rem + 2.6vw, 1.8rem) !important; }
  .ctile .csum { font-size: .68rem; margin: -1px 0 4px; }
  .cplus { height: 34px; border-radius: 12px; }
  .cpage .cbtns button { min-height: 46px; }
}

/* ---- first-minute guide ---- */
.startcard { background: linear-gradient(160deg, var(--brand-10), var(--surface) 70%); border: 1px solid var(--brand-25); border-radius: 24px; padding: 14px 14px 10px; margin-bottom: 16px; box-shadow: var(--shadow); }
.startcard .eyebrow { color: var(--brand-fg); }
.st-title { font-weight: 720; font-size: 1.05rem; letter-spacing: -.02em; margin-top: 2px; }
.st-steps { display: grid; gap: 6px; margin-top: 10px; }
.st-step { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); color: var(--text); text-decoration: none !important; min-height: 58px; }
.st-step:active { transform: scale(.98); }
.st-step .dot { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--brand-10); color: var(--brand-fg); flex: none; }
.st-step.done { opacity: .55; }
.st-step.done .dot { background: var(--good-bg); color: var(--good); }
.st-step .tx b { display: block; font-weight: 650; font-size: .93rem; }
.st-step .d { display: block; font-size: .76rem; color: var(--muted); }
.cpage .cbtnrow button { min-height: 0 !important; }
/* short screens (older 360x640 phones, landscape): tighten so all nine tiles still fit */
@media (max-height: 700px) and (max-width: 860px) {
  .cpage { gap: 8px; }
  .cpanel { padding: 8px 12px; }
  .cpanel .ctotal { font-size: 1.7rem; }
  .cpsub { display: none; }
  .ctile { padding: 5px; border-radius: 16px; }
  .cqty { font-size: 1.25rem !important; }
  .cbtnrow button { height: 30px; border-radius: 10px; }
  .cbtnrow { gap: 4px; }
  .cpage .cbtns button { min-height: 46px; }
}
/* first-minute hint: one slim line (replaces the earlier tall card) */
.startcard { display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 14px; border-radius: 18px; margin-bottom: 12px; background: var(--brand-10); border: 1px solid var(--brand-16); box-shadow: none; }
.st-dots { display: flex; gap: 5px; flex: none; }
.st-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-25); }
.st-dots i.on { background: var(--brand); }
.st-text { flex: 1; min-width: 0; font-size: .86rem; line-height: 1.35; color: var(--text); }
.st-text b { color: var(--brand-fg); }
.startcard .ghost { color: var(--brand-fg); flex: none; }

/* ---- Quick add tools: three compact tiles ---- */
.qtools { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.qtool { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; min-height: 0; }
.qtool b { font-size: .88rem; line-height: 1.2; }
.qtool .d { font-size: .72rem; line-height: 1.3; }
@media (max-width: 380px) { .qtool .d { display: none; } }

/* ---- Write expenses (text dump → entries) ---- */
.dcard { padding: 6px; }
.dump-ta { display: block; width: 100%; min-height: 150px; resize: none; border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 10px 12px !important; font: 500 1rem/1.55 var(--font, inherit); }
.dfound { padding: 12px 14px; }
.dhead { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; margin-bottom: 6px; }
.dsum { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .95rem; margin-top: 2px; }
.dsum b { font-size: 1.15rem; font-weight: 780; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.dsum .pos b { color: var(--good, #14804a); }
.dai { flex: none; }
.dlist { display: grid; }
.ditem { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 4px; align-items: start; padding: 10px 0; border-top: 1px solid var(--border); transition: opacity .15s; }
.ditem.off { opacity: .45; }
.ditem.off .damt { text-decoration: line-through; }
.dcheck { display: grid; place-items: center; height: 44px; margin: 0; cursor: pointer; }
.dcheck input { width: 22px; height: 22px; accent-color: var(--brand); margin: 0; }
.dmain { min-width: 0; }
.dtop { display: flex; align-items: center; gap: 6px; }
.dtop .dname { flex: 1; min-width: 0; min-height: 44px; font-weight: 650; }
.dtop .drs { color: var(--muted); font-weight: 650; }
.dtop .damt { width: 96px; flex: none; min-height: 44px; text-align: right; font-weight: 750; font-variant-numeric: tabular-nums; }
.ditem.collection .damt, .ditem.collection .drs { color: var(--good, #14804a); }
.dsub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 5px; font-size: .74rem; color: var(--muted); min-width: 0; }
.dtag { padding: 2px 8px; border-radius: 99px; background: var(--surface-2); color: var(--text-2); font-weight: 650; white-space: nowrap; }
.ditem.collection .dtag:first-child { background: var(--good-bg, rgba(20,128,74,.12)); color: var(--good, #14804a); }
.ditem.purchase .dtag:first-child { background: var(--brand-10); color: var(--brand-fg); }
.dtag.new { background: var(--accent); color: #fff; }
.dsrc { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 120px; font-style: italic; }
.dempty { padding: 8px 2px 4px; }
.dempty ul { margin: 6px 0 10px; padding-left: 18px; }
.dempty li { margin: 3px 0; }
.ddone { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; color: var(--good, #14804a); }
.ddone > div { flex: 1; color: var(--text); }
.dskip { margin-top: 8px; border-top: 1px solid var(--border); padding-top: 8px; }
.dskip summary { cursor: pointer; }
.dbar { position: sticky; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) - 4px); z-index: 5; display: flex; gap: 10px; align-items: center; margin-top: 12px; padding: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 22px; box-shadow: var(--shadow-lg, var(--shadow)); }
.kb .dbar { bottom: 0; }
.ddate { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 14px; border-radius: 14px; background: var(--surface-2); font-weight: 650; margin: 0; white-space: nowrap; cursor: pointer; }
.ddate input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.dadd { flex: 1; min-height: 52px; border-radius: 16px; font-size: 1rem; }
@media (min-width: 861px) { .dbar { bottom: 16px; } }

/* ==== Calm pass: clean, sober, easy to read ==== */
:root {
  --shadow: 0 1px 2px rgba(16,24,48,.04);
  --shadow-sm: none;
}
/* labels in plain sentence case, not shouting caps */
.eyebrow, .tile .k, .qcell .k, .hero .label, .hero .stats .k, th, .lbl { text-transform: none; letter-spacing: 0; font-size: .8rem; font-weight: 600; }
th { font-size: .78rem; color: var(--muted); }
.card, .tile, .qtool, .notecard, .ctile, .cpanel, .qsum { box-shadow: none; }
.tile.hl { background: var(--surface); border-color: var(--border); }
.tiles.t4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 861px) { .tiles.t4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tile .v { font-size: 1.35rem; }
/* menu group headings */
.nav .sep { height: auto; background: none; margin: 14px 12px 4px; font-size: .75rem; font-weight: 650; color: var(--muted); }
.nav .sep:empty { height: 1px; background: var(--border); margin: 10px 8px; }
/* Today's khata: one plain summary row */
.daysum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--surface); border: 1px solid var(--border); border-radius: 20px; margin-bottom: 12px; }
.daysum > div { padding: 14px 16px; min-width: 0; }
.daysum > div + div { border-left: 1px solid var(--border); }
.daysum .k { font-size: .8rem; color: var(--muted); font-weight: 600; }
.daysum .v { font-size: 1.2rem; font-weight: 740; letter-spacing: -.02em; margin-top: 2px; overflow-wrap: anywhere; }
.pastelink { display: flex; align-items: center; gap: 10px; padding: 12px 16px; margin-bottom: 16px; border: 1px dashed var(--border-strong, var(--border)); border-radius: 16px; color: var(--text); text-decoration: none; font-size: .92rem; }
.pastelink > span { flex: 1; min-width: 0; }
.pastelink .ico:first-child { color: var(--brand-fg); }
.closehead { margin: 24px 2px 10px; }
.closehead h2 { margin: 0 0 2px; }
/* folded sections */
details.fold > summary { cursor: pointer; font-weight: 650; list-style: none; display: flex; justify-content: space-between; align-items: center; min-height: 28px; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::after { content: "Show"; font-size: .82rem; font-weight: 600; color: var(--brand-fg); }
details.fold[open] > summary::after { content: "Hide"; }
details.fold[open] > summary { margin-bottom: 10px; }
details.fold h3 { font-size: .95rem; margin: 16px 0 6px; }
/* Home: two tools side by side */
.qtools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.qtool { flex-direction: row; align-items: center; }

/* ---- Make a bill ---- */
.bcard { padding: 14px; }
.bcust { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 8px; }
.blist { display: grid; margin-top: 8px; }
.brow { padding: 10px 0; border-bottom: 1px solid var(--border); display: grid; gap: 6px; }
.brow .bname { font-weight: 650; min-height: 44px; }
.bnums { display: flex; align-items: center; gap: 6px; }
.bnums .bqty { width: 64px; text-align: center; min-height: 44px; }
.bnums .brate { width: 88px; text-align: right; min-height: 44px; }
.bnums .bline { flex: 1; text-align: right; font-weight: 720; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bpicks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.bpicks .chip { min-height: 38px; padding: 0 12px; font-weight: 600; }
.bdisc { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 0 0; font-weight: 600; }
.bdisc input { width: 110px; text-align: right; }
.bbar { position: sticky; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) - 4px); z-index: 5; margin-top: 12px; padding: 12px 14px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 22px; box-shadow: var(--shadow-lg); display: grid; gap: 4px; }
.kb .bbar { bottom: 0; }
.btotal { font-size: 1.9rem; font-weight: 800; letter-spacing: -.04em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.bsave { min-height: 52px; border-radius: 16px; margin-top: 6px; font-size: 1rem; }
@media (min-width: 861px) { .bbar { bottom: 16px; } }
.qtools { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.qtool { flex-direction: column; align-items: flex-start; }

/* ==== Soft style (neumorphism): Settings → Style → Soft. Everything sits on one colour; depth comes from light + shadow. ==== */
:root[data-style="soft"] {
  --bg: #e6e9ef; --surface: #e6e9ef; --surface-2: #e6e9ef; --surface-3: #c9cfda;
  --border: rgba(30,40,70,.07); --border-strong: rgba(30,40,70,.12);
  --neu-hi: rgba(255,255,255,.95); --neu-lo: rgba(150,160,182,.6);
}
@media (prefers-color-scheme: dark) { :root[data-style="soft"]:not([data-theme="light"]) {
  --bg: #1d2027; --surface: #1d2027; --surface-2: #1d2027; --surface-3: #3b404c;
  --border: rgba(255,255,255,.05); --border-strong: rgba(255,255,255,.1);
  --neu-hi: rgba(255,255,255,.05); --neu-lo: rgba(0,0,0,.55);
} }
:root[data-style="soft"][data-theme="dark"] {
  --bg: #1d2027; --surface: #1d2027; --surface-2: #1d2027; --surface-3: #3b404c;
  --border: rgba(255,255,255,.05); --border-strong: rgba(255,255,255,.1);
  --neu-hi: rgba(255,255,255,.05); --neu-lo: rgba(0,0,0,.55);
}
:root[data-style="soft"] {
  --raise: 7px 7px 16px var(--neu-lo), -7px -7px 16px var(--neu-hi);
  --raise-sm: 4px 4px 9px var(--neu-lo), -4px -4px 9px var(--neu-hi);
  --press: inset 3px 3px 7px var(--neu-lo), inset -3px -3px 7px var(--neu-hi);
}
[data-style="soft"] body, [data-style="soft"] .main, [data-style="soft"] .topbar, [data-style="soft"] .side { background: var(--bg) !important; }
[data-style="soft"] .topbar { border-bottom: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
/* raised surfaces */
[data-style="soft"] :is(.card, .tile, .qtool, .notecard, .ctile, .cpanel, .qsum, .daysum, .bbar, .dbar, .cbar, .action, .tabbar, .modal, .qtype, .amtbox, .pastelink, details.fold, .datechip, .ddate) {
  border-color: transparent !important; box-shadow: var(--raise) !important; background: var(--surface) !important;
}
[data-style="soft"] .modal { box-shadow: var(--raise), 0 -20px 60px -20px var(--neu-lo) !important; }
[data-style="soft"] .pastelink { border-style: solid; }
[data-style="soft"] .qsum, [data-style="soft"] .daysum { gap: 0; }
[data-style="soft"] .qcell, [data-style="soft"] .daysum > div { background: transparent; border-color: var(--border) !important; }
/* buttons: raised, pressed in when tapped or chosen */
[data-style="soft"] :is(button, .btn):not(.ghost):not(.primary):not(.fab):not(.action):not(.qtype):not(.topmark):not(.tabbar button) { border-color: transparent; background: var(--surface); box-shadow: var(--raise-sm); }
[data-style="soft"] :is(button, .btn):not(.ghost):not(.fab):active { box-shadow: var(--press) !important; transform: none; }
[data-style="soft"] :is(button, .btn).primary { box-shadow: var(--raise-sm), inset 0 1px 0 rgba(255,255,255,.18); border-color: transparent; background-image: none; }
[data-style="soft"] .chip.on, [data-style="soft"] .seg button.on, [data-style="soft"] .qtype.on, [data-style="soft"] .nav a.active, [data-style="soft"] .tabbar a.active {
  box-shadow: var(--press) !important; background: var(--surface) !important; color: var(--brand-fg) !important; border-color: transparent !important;
}
[data-style="soft"] .seg { background: var(--surface); box-shadow: var(--press); border: 0; padding: 5px; }
[data-style="soft"] .seg button { box-shadow: none !important; background: transparent; }
[data-style="soft"] .seg button.on { box-shadow: var(--raise-sm) !important; color: var(--brand-fg) !important; }
/* fields are wells pressed into the surface */
[data-style="soft"] :where(input:not([type=checkbox]):not([type=radio]):not([type=date]), select, textarea) { background: var(--surface) !important; border-color: transparent !important; box-shadow: var(--press) !important; }
[data-style="soft"] :is(.bigamt, .cqty, .ntitle, .nta, .dump-ta) { box-shadow: none !important; }
[data-style="soft"] .dcard, [data-style="soft"] .ncard .nwrap { box-shadow: var(--press) !important; }
[data-style="soft"] .dcard { background: var(--surface) !important; }
/* icon dots and badges: small raised discs */
[data-style="soft"] :is(.action .dot, .qtool .dot, .sec-head .dot, .li .lead) { background: var(--surface); box-shadow: var(--raise-sm); color: var(--brand-fg); }
[data-style="soft"] .ctile.has { box-shadow: var(--press) !important; }
[data-style="soft"] .cminus { box-shadow: var(--raise-sm); }
[data-style="soft"] .tabbar { border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
[data-style="soft"] .fab .ring { box-shadow: var(--raise); }
[data-style="soft"] .toast { box-shadow: var(--raise); }
html.lite[data-style="soft"] { --raise: 4px 4px 8px var(--neu-lo), -4px -4px 8px var(--neu-hi); }
[data-style="soft"] .cplus { color: var(--brand-fg) !important; }
[data-style="soft"] .tabbar button:not(.fab), [data-style="soft"] .topmark { box-shadow: none; background: transparent; }

/* ==== Chat khata (Settings → Home screen → Chat) ==== */
.chat { display: flex; flex-direction: column; min-height: calc(100dvh - 140px); max-width: 640px; margin: 0 auto; }
.chatlog { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 4px 0 12px; }
.bub { max-width: 86%; padding: 11px 14px; border-radius: 20px; line-height: 1.45; font-size: .97rem; animation: bubin .22s var(--ease); }
@keyframes bubin { from { opacity: 0; transform: translateY(6px); } }
.bub.bub-bot { align-self: flex-start; background: var(--surface); border: 1px solid var(--border); border-bottom-left-radius: 6px; }
.bub.bub-me { align-self: flex-end; background: var(--brand); color: var(--on-brand); border-bottom-right-radius: 6px; }
.bub ul { margin: 6px 0 4px; padding-left: 18px; } .bub li { margin: 2px 0; }
.bub i { font-style: normal; font-weight: 650; }
.bub .bt { font-size: .74rem; opacity: .75; margin-top: 6px; text-align: right; }
.bub .mt { white-space: pre-wrap; overflow-wrap: anywhere; }
.ent { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 6px 0; border-bottom: 1px solid rgba(127,127,127,.18); }
.ent:last-of-type { border-bottom: 0; }
.ent .et { min-width: 0; overflow-wrap: anywhere; }
.ent .ek { display: inline-block; font-size: .68rem; font-weight: 700; padding: 1px 7px; border-radius: 99px; margin-right: 6px; vertical-align: 1px; background: rgba(127,127,127,.16); }
.bub.bub-bot .ent.collections .ea { color: var(--good); }
.bub.bub-me .ent .ek { background: rgba(255,255,255,.2); }
.ent .ea { white-space: nowrap; font-variant-numeric: tabular-nums; }
.ent.tap { cursor: pointer; border-radius: 8px; margin: 0 -6px; padding: 8px 6px; min-height: 44px; align-items: center; }
.ent.tap:hover { background: rgba(127,127,127,.12); }
.ent.tap:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }
.ent.gone { opacity: .5; } .ent.gone .et, .ent.gone .ea { text-decoration: line-through; }
.chatearlier { display: flex; flex-direction: column; gap: 10px; }
.chatearlier > .chatmore { align-self: center; min-height: 36px; }
.chatday { display: flex; flex-direction: column; gap: 10px; }
.chatday .bub-me { align-self: flex-end; } .chatday .bub-bot { align-self: flex-start; }
.dayhead { align-self: center; font-size: .78rem; font-weight: 650; color: var(--muted); padding: 2px 12px; border-radius: 99px; background: var(--surface-2); }
.chatquick .chip[hidden] { display: none; }
.sumcard { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 8px; padding: 10px; border-radius: 14px; background: var(--surface-2); }
.sumcard > div { display: grid; gap: 2px; min-width: 0; }
.sumcard span { font-size: .74rem; color: var(--muted); }
.sumcard b { font-size: 1.02rem; overflow-wrap: anywhere; }
.bubchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.bubchips .chip { min-height: 36px; padding: 0 14px; }
.composer { position: sticky; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) - 4px); z-index: 6; padding: 8px 0 6px; background: linear-gradient(to top, var(--bg) 75%, transparent); }
.kb .composer { bottom: 0; }
.chatquick { display: flex; gap: 6px; overflow-x: auto; padding: 0 0 8px; scrollbar-width: none; }
.chatquick::-webkit-scrollbar { display: none; }
.chatquick .chip { flex: none; min-height: 34px; padding: 0 13px; font-size: .84rem; }
.cbox { display: flex; align-items: flex-end; gap: 6px; padding: 6px; background: var(--surface); border: 1px solid var(--border-strong, var(--border)); border-radius: 26px; }
.cbox textarea { flex: 1; min-height: 44px; max-height: 140px; resize: none; border: 0 !important; box-shadow: none !important; background: transparent !important; padding: 11px 8px !important; font-size: 1rem; line-height: 1.35; }
.cbox .send, .cbox .mic { flex: none; width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 50%; display: grid; place-items: center; }
.cbox .send { background: var(--brand); color: var(--on-brand); border-color: transparent; }
.cbox .mic { background: transparent; border: 0; box-shadow: none; color: var(--muted); }
.cbox .mic.on { color: #fff; background: var(--bad, #d13b3b); animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 8px rgba(209,59,59,.15); } }
@media (min-width: 861px) { .composer { bottom: 0; } .chat { min-height: calc(100dvh - 100px); } }
[data-style="soft"] .bub.bub-bot { border: 0; box-shadow: var(--raise-sm); }
[data-style="soft"] .cbox { border: 0; box-shadow: var(--press); }
[data-style="soft"] .sumcard { box-shadow: var(--press); background: var(--surface); }
.bub { scroll-margin-bottom: calc(var(--tabbar-h) + 150px); }
@media (min-width: 861px) { .bub { scroll-margin-bottom: 140px; } }

/* ==== Type: Eczar for page titles and the big numbers, Palanquin for everything else ==== */
.page-head h1, .qhead h1, .auth-hero h1, .auth-form h2, .modal h2, .hero .big, .startcard h3 { font-family: var(--serif); font-weight: 700; letter-spacing: -.01em; }
.ctotal, .btotal, .daysum .v, .qcell .v, .tile .v, .dsum b, .sumcard b, .tape b { font-family: var(--serif); font-weight: 700; letter-spacing: 0; }
.page-head h1, .qhead h1 { font-size: clamp(2rem, 1.5rem + 2vw, 2.7rem); line-height: 1.05; }
.ctotal { font-size: clamp(2.3rem, 1.4rem + 4.4vw, 3rem); }
.btotal { font-size: 2.2rem; }
.daysum .v, .qcell .v { font-size: 1.4rem; }
.tile .v { font-size: 1.6rem; }
.bname, .nav a, .tabbar a, .tabbar button, button, .chip, input, select, textarea, th, td { letter-spacing: 0; }

/* ---- Past bills ---- */
.bh-search { width: 100%; min-height: 44px; margin: 0 0 10px; }
.bh-chips { margin-bottom: 8px; }
.bh-sum { margin: 0 2px 8px; min-height: 1.2em; }
.bh-list { display: grid; gap: 8px; }
.bh-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 10px 12px; text-align: left; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); color: var(--text); box-shadow: var(--shadow); }
.bh-row.voided { background: var(--surface-2); } .bh-row.voided .bh-amt { text-decoration: line-through; }
.bh-no { font-weight: 750; font-variant-numeric: tabular-nums; color: var(--brand-fg); flex: none; max-width: 5.5em; overflow: hidden; text-overflow: ellipsis; }
.bh-main { display: grid; min-width: 0; flex: 1; }
.bh-who, .bh-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bh-who { font-weight: 650; } .bh-sub { font-size: .8rem; color: var(--text-2); }
.bh-side { display: grid; justify-items: end; gap: 4px; flex: none; }
.bh-amt { font-weight: 750; font-variant-numeric: tabular-nums; }
.bh-more { margin: 12px 0; }
.bh-owed { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; text-decoration: none; color: var(--text); }
.bh-owed > span:first-child { display: grid; } .bh-owed-amt { font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.bh-total { display: flex; align-items: center; gap: 10px; font-size: 1.8rem; font-weight: 800; margin-bottom: 8px; font-variant-numeric: tabular-nums; }
.bh-kv { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; overflow-wrap: anywhere; }
.bh-items { margin: 8px 0; border-top: 1px dashed var(--border); border-bottom: 1px dashed var(--border); padding: 6px 0; max-height: 34vh; overflow: auto; }
.bh-it { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; padding: 4px 0; overflow-wrap: anywhere; }
@media (max-width: 380px) { .bh-it { grid-template-columns: minmax(0, 1fr) auto; } .bh-it > .muted { grid-column: 1; font-size: .8rem; } }

.qtools { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ---------- the strip: today's khata as a printed slip (tokens shared with the landing) ---------- */
:root { --slip: #fbf7ec; --slip-ink: var(--ink); --slip-muted: #6a6478; --slip-dot: #cdc4ae; --slip-line: rgba(28,26,43,.28); --slip-in: #0b7a45; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --slip: #161a24; --slip-ink: #eceaf4; --slip-muted: #a29cb4; --slip-dot: #3a4052; --slip-line: rgba(255,255,255,.28); --slip-in: #4fd18b; } }
:root[data-theme="dark"] { --slip: #161a24; --slip-ink: #eceaf4; --slip-muted: #a29cb4; --slip-dot: #3a4052; --slip-line: rgba(255,255,255,.28); --slip-in: #4fd18b; }
.strip { background: var(--slip); color: var(--slip-ink); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 18px 14px; margin-bottom: 16px; box-shadow: var(--shadow); min-width: 0; }
.strip-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding-bottom: 10px; border-bottom: 1.5px dashed var(--slip-line); font-size: .8rem; color: var(--slip-muted); }
.strip-top b { letter-spacing: .12em; color: var(--slip-ink); }
.strip-lines { list-style: none; margin: 0; padding: 6px 0; }
.sl { display: flex; align-items: baseline; gap: 8px; padding: 8px 4px; margin: 0 -4px; border-radius: 10px; min-height: 44px; font-size: 1rem; position: relative; }
.sl.anim { animation: slin .4s var(--ease) both; }
@keyframes slin { from { opacity: 0; transform: translateY(6px); } }
.sl.tap { cursor: pointer; }
.sl.tap:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
@media (hover: hover) { .sl.tap:hover { background: rgba(127,127,127,.1); } }
.sl .n { min-width: 0; overflow-wrap: anywhere; }
.sl .n .sub { display: block; font-size: .78rem; color: var(--slip-muted); }
.sl .dots { flex: 1; min-width: 12px; border-bottom: 2px dotted var(--slip-dot); transform: translateY(-4px); }
.sl b { font-weight: 650; white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; }
.sl.in b { color: var(--slip-in); }
.sl.ud .n, .sl.ud b { color: var(--slip-muted); font-style: italic; }
.sl .rc { font-size: .78rem; }
.sl button.icon { min-width: 44px; min-height: 44px; margin: -8px -6px -8px 0; }
@media (max-width: 860px) { .sl .acts, .sl button.icon { display: inline-grid; } }
.sl.empty { color: var(--slip-muted); font-style: italic; justify-content: center; text-align: center; padding: 22px 8px; }
.strip-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding-top: 12px; border-top: 1.5px dashed var(--slip-line); }
.strip-sum span { display: block; font-size: .76rem; color: var(--slip-muted); }
.strip-sum b { font-family: var(--serif); font-weight: 700; font-size: clamp(1.1rem, 4.6vw, 1.6rem); line-height: 1.15; font-variant-numeric: tabular-nums lining-nums; overflow-wrap: anywhere; }
.strip-sum b.pos { color: var(--slip-in); }
.strip-add { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.strip-add button { flex: 1 1 auto; }
.tally { border-radius: var(--radius-sm); padding: 14px 16px; font-weight: 700; font-size: 1.15rem; }
.tally span { display: block; font-weight: 500; font-size: .8rem; margin-top: 2px; }
.tally.ok { background: var(--good-bg); color: var(--good); }
.tally.off { background: var(--warn-bg); color: var(--warn); }
html.lite .sl.anim { animation: none; }

/* ---- accessibility + low-end phones (slot 13) ---- */
/* touch targets: 44 px minimum on the shared controls (the counter's +/- are extra; the whole tile also steps) */
.topbar .topmark { width: 44px; min-height: 44px; }
button.icon.small { width: 44px; min-height: 44px; }
button.small, button.ghost { min-width: 44px; }
.datechip { min-height: 44px; }
details summary, details.fold > summary, .dskip summary { min-height: 44px; }
.bpicks .chip, .bubchips .chip, .chatquick .chip { min-height: 44px; }
.chatquick .chip, .bubchips .chip { max-width: 100%; }
.bubchips .chip small { white-space: normal; }
/* the counter number must never collapse to nothing on short screens (it was 5 px high at 360x640) */
.cqty { min-height: 24px !important; }
@media (max-height: 700px) and (max-width: 860px) { .cplus { height: 28px; } .ctile .csum { margin: 0 0 2px; } }
/* sheets take focus themselves; show where it is only when using the keyboard */
.modal:focus { outline: none; }
/* larger text / zoom: let labels wrap instead of overflowing */
.qtype .t, .qtype .s, .chip, .action .t, .action .d { overflow-wrap: anywhere; }
.qtypes { grid-template-columns: repeat(auto-fit, minmax(min(100%, 96px), 1fr)); }
.amtbox { min-width: 0; }
/* forced colors (Windows high contrast): box-shadow rings are dropped, so draw real outlines */
@media (forced-colors: active) {
  button:focus-visible, .btn:focus-visible, a:focus-visible, input:focus, select:focus, textarea:focus, .modal:focus-visible { outline: 3px solid Highlight; outline-offset: 2px; }
  .qtype.on, .chip.on, .tabbar a.active, .seg button.on { outline: 2px solid Highlight; }
  .cplus, button.primary, .fab { border: 2px solid ButtonText; forced-color-adjust: none; background: ButtonFace; color: ButtonText; }
}
.qform { grid-template-columns: minmax(0, 1fr); }   /* an auto track let the amount box widen the form past the screen at 130% text */
.amtbox input { min-width: 0; }
.datechip { min-height: 46px; }
.tablewrap td a { display: inline-flex; align-items: center; min-height: 44px; }
.savebtn, .photobtn { white-space: normal; max-width: 100%; text-align: center; }