/* Expenity app. Mobile first: a full-height app shell with a bottom tab bar and sheets on phones, a side rail and a
   details pane on tablets and desktops. Emerald green on soft mint, white cards, big targets (48px or more). */
:root {
	--bg: #eef6f3; --surface: #ffffff; --ink: #0f1f1a; --ink-2: #34463f; --muted: #62766d; --line: #dbe7e2;
	--accent: #0a8f6a; --accent-2: #067a5a; --accent-ink: #ffffff; --accent-soft: #e2f4ed;
	--late: #d6403a; --late-soft: #fdeceb; --warn: #e89a00; --ok: #0a8f6a;
	--shadow: 0 1px 2px rgba(15, 31, 26, 0.05), 0 8px 24px -14px rgba(15, 31, 26, 0.3);
	--radius: calc(20px * var(--rk)); --tab-h: 64px;
	--safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
	--font: "Noto Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--tbg: #eceff1; --tfg: #475569;
	--rk: 1; --font-head: var(--font); --bw: 0px; --card-line: transparent; --glow: none; --anim-deco: none;
	--brand: linear-gradient(180deg, #0e9a73, #077f5f); --brand-ink: #fff; --brand-glow: 0 8px 18px -10px rgba(7, 127, 95, 0.9);
	--fab-bg: linear-gradient(180deg, #14b08a, #077f5f); --hero-bg: linear-gradient(135deg, #10a07a 0%, #0a8f6a 55%, #066a50 100%); --hero-ink: #fff;
	--bar-in: #19b58a; --bar-out: #f0a30a;
	color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-skin]) { --bg: #0b1512; --surface: #13211c; --ink: #eaf5f0; --ink-2: #c1d3cb; --muted: #8fa89e; --line: #223630; --accent: #2fd0a0; --accent-2: #5be0b8; --accent-ink: #052a1f; --accent-soft: #14352b; --late: #ff7b73; --late-soft: #3a1b19; --ok: #2fd0a0; --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -14px rgba(0, 0, 0, 0.7); --brand: linear-gradient(180deg, #4de3b5, #27c595); --brand-ink: #04261c; --fab-bg: linear-gradient(180deg, #4de3b5, #27c595); --hero-bg: linear-gradient(135deg, #0f6a55, #0a4a3b); color-scheme: dark; } }
:root[data-theme="dark"]:not([data-skin]) { --bg: #0b1512; --surface: #13211c; --ink: #eaf5f0; --ink-2: #c1d3cb; --muted: #8fa89e; --line: #223630; --accent: #2fd0a0; --accent-2: #5be0b8; --accent-ink: #052a1f; --accent-soft: #14352b; --late: #ff7b73; --late-soft: #3a1b19; --ok: #2fd0a0; --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -14px rgba(0, 0, 0, 0.7); --brand: linear-gradient(180deg, #4de3b5, #27c595); --brand-ink: #04261c; --fab-bg: linear-gradient(180deg, #4de3b5, #27c595); --hero-bg: linear-gradient(135deg, #0f6a55, #0a4a3b); color-scheme: dark; }

/* Icon tints: one pair of colors per hue, used by every colored circle */
.tint-blue { --tbg: #e3edff; --tfg: #1d4ed8; } .tint-amber { --tbg: #fff1d1; --tfg: #a15c00; } .tint-purple { --tbg: #efe6ff; --tfg: #6d28d9; } .tint-teal { --tbg: #d9f4ee; --tfg: #0f766e; }
.tint-red { --tbg: #fde4e2; --tfg: #b42318; } .tint-green { --tbg: #dcf5e4; --tfg: #15803d; } .tint-pink { --tbg: #fde3ee; --tfg: #be185d; } .tint-gray { --tbg: #eceff1; --tfg: #475569; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-skin]) .tint-blue { --tbg: #1b2a4a; --tfg: #8ab4ff; } :root:not([data-theme="light"]):not([data-skin]) .tint-amber { --tbg: #3a2d10; --tfg: #ffc861; } :root:not([data-theme="light"]):not([data-skin]) .tint-purple { --tbg: #2c2146; --tfg: #c4a5ff; } :root:not([data-theme="light"]):not([data-skin]) .tint-teal { --tbg: #12332e; --tfg: #5eead4; } :root:not([data-theme="light"]):not([data-skin]) .tint-red { --tbg: #3b1d1b; --tfg: #ff9a92; } :root:not([data-theme="light"]):not([data-skin]) .tint-green { --tbg: #16341f; --tfg: #6ee79a; } :root:not([data-theme="light"]):not([data-skin]) .tint-pink { --tbg: #3b1a29; --tfg: #ff9dc4; } :root:not([data-theme="light"]):not([data-skin]) .tint-gray { --tbg: #26302d; --tfg: #a9b8b2; } }
:root[data-theme="dark"]:not([data-skin]) .tint-blue { --tbg: #1b2a4a; --tfg: #8ab4ff; } :root[data-theme="dark"]:not([data-skin]) .tint-amber { --tbg: #3a2d10; --tfg: #ffc861; } :root[data-theme="dark"]:not([data-skin]) .tint-purple { --tbg: #2c2146; --tfg: #c4a5ff; } :root[data-theme="dark"]:not([data-skin]) .tint-teal { --tbg: #12332e; --tfg: #5eead4; }
:root[data-theme="dark"]:not([data-skin]) .tint-red { --tbg: #3b1d1b; --tfg: #ff9a92; } :root[data-theme="dark"]:not([data-skin]) .tint-green { --tbg: #16341f; --tfg: #6ee79a; } :root[data-theme="dark"]:not([data-skin]) .tint-pink { --tbg: #3b1a29; --tfg: #ff9dc4; } :root[data-theme="dark"]:not([data-skin]) .tint-gray { --tbg: #26302d; --tfg: #a9b8b2; }
.ci { display: inline-grid; place-items: center; flex: none; width: var(--s, 40px); height: var(--s, 40px); border-radius: 50%; background: var(--tbg); color: var(--tfg); }
.ci .em { font-size: calc(var(--s, 40px) * 0.5); line-height: 1; }
.i { flex: none; display: block; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; height: 100%; }
body { margin: 0; height: 100%; font: 16px/1.45 var(--font); color: var(--ink); background-color: var(--bg); background-image: var(--bg-img, none); background-attachment: fixed; overscroll-behavior: none; -webkit-tap-highlight-color: transparent; touch-action: pan-y; }
button { font: inherit; color: inherit; cursor: pointer; -webkit-user-select: none; user-select: none; }
input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { letter-spacing: -0.02em; line-height: 1.2; font-family: var(--font-head); }
a { color: var(--accent-2); }
.muted { color: var(--muted); } .small { font-size: 14px; } .center { text-align: center; } .sp { flex: 1; } .pad { padding: 4px 4px 12px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 60%, transparent); outline-offset: 2px; border-radius: calc(10px * var(--rk)); }
[hidden] { display: none !important; }

/* ---------------------------------------------------------------- App shell */
.app { display: flex; height: 100dvh; overflow: hidden; }
.col { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; }
.rail, .pane { display: none; }
.appbar { display: flex; align-items: center; gap: 4px; padding: calc(var(--safe-t) + 8px) 12px 6px 18px; min-height: calc(var(--safe-t) + 64px); }
.ab-title { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -0.04em; }
.ab-title.home { display: flex; flex-direction: column; line-height: 1.1; }
.ab-title.home small { font-size: 14px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.ab-title.home b { font-size: 26px; font-weight: 800; } .ab-title i, .rail-brand i { font-style: normal; color: var(--accent); }
.ab-btn { display: inline-grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: none; color: var(--ink); }
.ab-btn:hover { background: var(--accent-soft); } .ab-btn.ok { color: var(--accent-2); }
.avatar { position: relative; display: inline-grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--surface); color: var(--ink-2); box-shadow: var(--shadow); }
.avatar.on { background: var(--accent); color: var(--accent-ink); } .avatar .who { font-weight: 800; font-size: 18px; } .avatar.big { width: 56px; height: 56px; }
.avatar .dot { position: absolute; right: 1px; bottom: 1px; width: 12px; height: 12px; border: 2px solid var(--bg); margin: 0; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; background: var(--muted); vertical-align: middle; }
.dot.ok { background: var(--ok); } .dot.syncing, .dot.idle { background: var(--warn); animation: pulse 1s infinite; } .dot.error { background: var(--late); } .dot.off { background: var(--line); }
@keyframes pulse { 50% { opacity: 0.35; } }

main#view { flex: 1; overflow-x: hidden; overscroll-behavior-x: none; touch-action: pan-y pinch-zoom; overflow-y: auto; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; padding: 4px 16px 28px; outline: none; }
.ptr { position: absolute; z-index: 6; top: calc(var(--safe-t) + 60px); left: 50%; opacity: 0; pointer-events: none; padding: 7px 16px; border-radius: calc(20px * var(--rk)); background: var(--surface); box-shadow: var(--shadow); font-size: 13px; font-weight: 600; color: var(--muted); transform: translate(-50%, 0); }
.ptr.ready { color: var(--accent-2); }

.tabbar { display: grid; grid-template-columns: repeat(5, 1fr); align-items: end; background: var(--surface); border-top: 1px solid var(--line); padding: 6px 6px calc(var(--safe-b) + 6px); }
.tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 52px; border: 0; background: none; color: var(--muted); font-size: 11px; font-weight: 700; border-radius: calc(14px * var(--rk)); }
.tab.on { color: var(--accent-2); } .tab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fab { justify-self: center; width: 62px; height: 62px; margin-top: -30px; border: 5px solid var(--bg); border-radius: 50%; background: var(--fab-bg); color: var(--brand-ink); display: grid; place-items: center; box-shadow: 0 10px 20px -8px rgba(7, 127, 95, 0.8), var(--glow); }
.fab:active { transform: scale(0.95); }

/* ---------------------------------------------------------------- Lists and rows */
.list { list-style: none; margin: 0 0 16px; padding: 0; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.sw { position: relative; border-bottom: 1px solid var(--line); overflow: hidden; } .sw:last-child, .list > li:last-child { border-bottom: 0; } .list > li { border-bottom: 1px solid var(--line); }
.sw-back { position: absolute; inset: 0; display: flex; justify-content: space-between; align-items: stretch; } .sw-l, .sw-r { display: flex; }
.sw-act { width: 88px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 0; padding: 0; color: #fff; font: 700 12px var(--font); } .sw-act.edit { background: #3b82f6; } .sw-act.paid { background: var(--ok); } .sw-act.del { background: var(--late); } .sw-act span { max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-front, .item { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 68px; padding: 10px 16px; background: var(--surface); border: 0; text-align: left; transition: transform 0.2s ease; }
.sw-front { touch-action: pan-y; } button.item:hover, .sw-front:hover { background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface)); }
.mid { flex: 1; min-width: 0; display: flex; flex-direction: column; } .mid b { font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mid small { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a { font-weight: 800; letter-spacing: -0.02em; white-space: nowrap; } .a.income { color: var(--ok); } .a.transfer { color: var(--muted); }
.sw.late .due { color: var(--late); font-weight: 700; } .sw.now .due { color: var(--warn); font-weight: 700; }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; margin: 18px 4px 8px; } .sec-head h2, .grp h2 { margin: 0; font-size: 17px; font-weight: 800; }
.grp { margin: 0 0 6px; } .grp h2.sticky { position: sticky; top: -1px; z-index: 2; margin: 0; padding: 12px 4px 6px; background: var(--bg); font-size: 13px; font-weight: 700; color: var(--muted); }
.count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: calc(11px * var(--rk)); background: var(--accent-soft); color: var(--accent-2); font-size: 12px; }
.hint { text-align: center; color: var(--muted); font-size: 13px; margin: 4px 0 12px; }
.link { background: none; border: 0; padding: 8px 4px; color: var(--accent-2); font-weight: 700; font-size: 15px; text-decoration: none; min-height: 44px; }

/* Home */
.hero { padding: 22px 22px 18px; margin: 4px 0 6px; border-radius: calc(28px * var(--rk)); color: var(--hero-ink); background: var(--hero-bg); box-shadow: var(--shadow), var(--glow); border: var(--bw) var(--bs, solid) var(--card-line); }
.hero > small { display: block; opacity: 0.85; font-weight: 600; } .hero > b { display: block; font-size: clamp(34px, 9vw, 46px); letter-spacing: -0.045em; margin: 2px 0 16px; }
.hero-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .hero-tiles > div { background: rgba(255, 255, 255, 0.16); border-radius: calc(18px * var(--rk)); padding: 10px 12px; }
.hero-tiles .k { display: flex; align-items: center; gap: 4px; font-size: 12px; opacity: 0.9; font-weight: 600; } .hero-tiles b { display: block; font-size: 18px; letter-spacing: -0.02em; }
.wallets { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; padding: 2px 0 10px; }
.wc { min-width: 0; width: auto; min-height: 108px; display: flex; flex-direction: column; gap: 4px; padding: 12px; border: 0; border-radius: calc(20px * var(--rk)); background: var(--surface); box-shadow: var(--shadow); text-align: left; }
.wc span { font-size: 13px; color: var(--muted); font-weight: 600; margin-top: 4px; } .wc b { font-size: 18px; letter-spacing: -0.02em; }
.wc.add { align-items: center; justify-content: center; background: none; box-shadow: none; border: 2px dashed var(--line); color: var(--muted); }
.promo { display: flex; flex-direction: column; gap: 4px; padding: 16px; margin: 4px 0 12px; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.promo.alt { background: color-mix(in srgb, #8b5cf6 9%, var(--surface)); } .promo-head { display: flex; gap: 14px; align-items: flex-start; } .promo p { margin: 4px 0 0; color: var(--ink-2); font-size: 14.5px; }

/* Activity and Bills */
.monthbar { display: flex; align-items: center; justify-content: space-between; margin: 2px 0 8px; } .monthbar b { font-size: 18px; text-transform: capitalize; }
.sumrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; } .sumrow > div { background: var(--surface); border-radius: calc(16px * var(--rk)); padding: 10px 12px; box-shadow: var(--shadow); min-width: 0; }
.sumrow small { display: block; color: var(--muted); font-size: 12px; font-weight: 600; } .sumrow b { display: block; font-size: 15px; letter-spacing: -0.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sumrow .in b { color: var(--ok); }
.searchbar { display: flex; align-items: center; gap: 8px; padding: 0 14px; height: 52px; border-radius: calc(16px * var(--rk)); background: var(--surface); box-shadow: var(--shadow); margin-bottom: 10px; } .searchbar input { flex: 1; height: 100%; border: 0; outline: 0; background: none; font-size: 16px; }
.chips, .chip-scroll { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0 12px; } .chips.wrap { flex-wrap: wrap; overflow: visible; } .chips.center { justify-content: center; }
.chip { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 16px; border-radius: calc(22px * var(--rk)); border: 1.5px solid var(--line); background: var(--surface); font-weight: 700; font-size: 15px; white-space: nowrap; }
.chip.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .chip.big { height: 48px; } .chip.tag { height: 32px; font-size: 13px; border-color: var(--accent); color: var(--accent-2); }
.chip.select { position: relative; height: auto; min-height: 44px; padding: 0 4px 0 12px; } .chip.select select { min-height: 44px; border: 0; background: none; font-weight: 700; font-size: 15px; max-width: 130px; padding-right: 8px; }
.segm { display: flex; gap: 4px; padding: 4px; margin: 2px 0 14px; border-radius: calc(16px * var(--rk)); background: var(--accent-soft); }
.segm button { flex: 1; min-height: 44px; border: 0; border-radius: calc(12px * var(--rk)); background: none; font-weight: 700; font-size: 14px; color: var(--ink-2); } .segm button.on { background: var(--surface); color: var(--accent-2); box-shadow: var(--shadow); }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 8px; } .tiles.three { grid-template-columns: repeat(3, 1fr); }
.tile { background: var(--surface); border-radius: calc(18px * var(--rk)); padding: 12px 14px; box-shadow: var(--shadow); min-width: 0; } .tile small { display: block; color: var(--muted); font-size: 12px; font-weight: 600; } .tile b { display: block; font-size: 19px; letter-spacing: -0.03em; margin: 2px 0; overflow: hidden; text-overflow: ellipsis; } .tile span { color: var(--muted); font-size: 12px; }
.tile.bad b { color: var(--late); } .tile.good b { color: var(--ok); }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin: 8px 0 14px; } .dow { text-align: center; font-size: 12px; font-weight: 700; color: var(--muted); padding: 4px 0; }
.cell { aspect-ratio: 1; min-height: 44px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: 6px 2px 5px; background: var(--surface); border: 2px solid transparent; border-radius: calc(14px * var(--rk)); box-shadow: var(--shadow); } .cell.blank { background: none; box-shadow: none; }
.cell .num { font-weight: 700; font-size: 15px; } .cell .dots { display: flex; gap: 3px; min-height: 7px; } .dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--warn); } .dots i.ok { background: var(--ok); } .cell.late .dots i { background: var(--late); }
.cell.today { border-color: var(--accent); } .cell.sel { background: var(--accent-soft); border-color: var(--accent); }
.empty { text-align: center; padding: 36px 16px; } .empty h2 { margin: 16px 0 6px; font-size: 22px; } .empty p { margin: 0 auto 18px; max-width: 420px; color: var(--ink-2); } .empty.small { padding: 24px 8px; }

/* Reports */
.card { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow), var(--glow); border: var(--bw) var(--bs, solid) var(--card-line); padding: 16px 18px; margin-bottom: 14px; } .card h2 { margin: 0 0 10px; font-size: 18px; } .card.danger { border: 1.5px solid var(--late-soft); }
.plain { margin: 0; padding-left: 20px; } .plain li { margin: 6px 0; } .plain.flat { list-style: none; padding: 0; } .plain.flat li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); margin: 0; } .plain.flat li:last-child { border-bottom: 0; }
.donut-wrap { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-content: center; } .donut { width: 168px; height: 168px; flex: none; } .d-k { font-size: 10px; fill: var(--muted); } .d-v { font-size: 14px; font-weight: 800; fill: var(--ink); }
.legend { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 200px; display: grid; gap: 8px; } .legend li { display: flex; align-items: center; gap: 10px; } .legend li > span:not(.ci) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; height: 150px; margin: 12px 0 8px; } .cf-col { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; } .cf-bars { flex: 1; display: flex; gap: 4px; align-items: flex-end; }
.cf-bars i { flex: 1; min-height: 3px; border-radius: 6px 6px 3px 3px; } .cf-bars i.in, .key.in { background: var(--bar-in); } .cf-bars i.out, .key.out { background: var(--bar-out); } .cf-col small { text-align: center; font-size: 11px; color: var(--muted); text-transform: capitalize; }
.key { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; }
.bars { display: grid; grid-template-columns: repeat(13, 1fr); gap: 5px; align-items: end; height: 120px; margin: 14px 0 6px; } .bar { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; } .bar i { display: block; width: 100%; min-height: 3px; border-radius: 5px 5px 2px 2px; background: #0a8f6a; } .bar small { font-size: 9px; color: var(--muted); }

/* More */
.profile { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; margin: 4px 0 14px; border: 0; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); text-align: left; min-height: 80px; }
.mlist .mrow, a.mrow { border-bottom: 1px solid var(--line); } .mrow { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 10px 16px; border: 0; background: var(--surface); text-align: left; text-decoration: none; color: var(--ink); } .mrow:last-child { border-bottom: 0; } .mrow:hover { background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface)); } .mrow .i:last-child { color: var(--muted); }
.list > .mrow { display: flex; }

/* ---------------------------------------------------------------- Buttons and forms */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 22px; border-radius: calc(16px * var(--rk)); border: 1.5px solid transparent; font-weight: 700; font-size: 16px; text-decoration: none; white-space: nowrap; transition: transform 0.08s; }
.btn:active { transform: scale(0.98); } .btn.big { min-height: 58px; font-size: 17px; } .btn-sm { min-height: 44px; padding: 0 16px; font-size: 14px; border-radius: calc(14px * var(--rk)); } .btn.wide { width: 100%; }
.btn-primary { background: var(--brand); color: var(--brand-ink); box-shadow: var(--brand-glow); }
.btn-ghost { background: var(--surface); border-color: var(--line); color: var(--ink); } .btn-ghost:hover { border-color: var(--accent); }
.btn-danger { background: var(--late); color: #fff; } .btn-danger-ghost { background: var(--late-soft); color: var(--late); } .btn-text { background: none; color: var(--accent-2); } .btn[disabled] { opacity: 0.5; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; align-items: center; } .btn-row.stack { flex-direction: column; align-items: stretch; } .btn-row.two { display: grid; grid-template-columns: 1fr 1fr; margin-top: 0; } .btn-row.two:empty { display: none; }
.sticky-actions { position: sticky; bottom: 0; background: var(--surface); padding: 12px 0 4px; margin-top: 8px; }
.f { display: flex; flex-direction: column; gap: 6px; margin: 0 0 12px; font-weight: 700; font-size: 14px; color: var(--ink-2); }
.f input:not([type="checkbox"]), .f select, .f textarea, #txDate, #txNote { width: 100%; min-height: 52px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: calc(14px * var(--rk)); background: var(--bg); font-size: 16px; font-weight: 500; }
.f textarea, #txNote { padding: 12px 14px; min-height: 84px; } .f.chk { flex-direction: row; align-items: center; gap: 12px; font-weight: 500; min-height: 48px; } .f input[type="checkbox"] { width: 24px; height: 24px; accent-color: var(--accent); flex: none; }
.f input:focus, .f select:focus, .f textarea:focus, #txNote:focus, #txDate:focus { outline: 3px solid color-mix(in srgb, var(--accent) 35%, transparent); border-color: var(--accent); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 420px) { .grid2 { grid-template-columns: 1fr; gap: 0; } .grid2 .f { margin-bottom: 12px; } }
.err { color: var(--late); font-weight: 600; margin: 10px 0 0; } .or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; margin: 14px 0; } .or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.file { cursor: pointer; } .more-opts { margin: 4px 0 8px; } .more-opts summary { min-height: 48px; display: flex; align-items: center; font-weight: 700; color: var(--accent-2); cursor: pointer; }
.lbl { padding: 6px 20px 0; font-size: 13px; font-weight: 700; color: var(--muted); } .chip-scroll { padding-inline: 20px; } .sheet-pad .lbl { padding-inline: 0; } .sheet-pad .chip-scroll { margin-inline: -20px; }
.catchip { width: auto; min-width: 0; min-height: 90px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 4px; border: 2px solid transparent; border-radius: calc(16px * var(--rk)); background: none; font-size: 11px; font-weight: 700; color: var(--ink-2); }
.catchip > span:not(.ci) { max-width: 100%; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.15; text-align: center; overflow-wrap: normal; hyphens: manual; } .catchip.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-2); }
.chips-out { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; } .quick { background: var(--accent-soft); border-radius: calc(18px * var(--rk)); padding: 12px 14px 6px; margin-bottom: 14px; } .quick label { font-size: 13px; font-weight: 700; color: var(--accent-2); } .quick > input { width: 100%; min-height: 52px; margin-top: 6px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: calc(14px * var(--rk)); background: var(--surface); font-size: 17px; }

/* ---------------------------------------------------------------- Sheets */
.sheet { border: 0; padding: 0; margin: 0; width: 100%; max-width: none; max-height: 92dvh; position: fixed; inset: auto 0 0 0; border-radius: calc(26px * var(--rk)) 26px 0 0; background: var(--surface); color: var(--ink); box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.3); overflow: hidden; display: none; flex-direction: column; }
.sheet[open] { display: flex; animation: sheet-up 0.28s cubic-bezier(0.2, 0.8, 0.2, 1); } .sheet::backdrop { background: rgba(8, 20, 16, 0.5); animation: fade 0.2s; }
.sheet.full { height: 100dvh; max-height: 100dvh; border-radius: 0; } .sheet.tall { height: 94dvh; } .sheet.full .sheet-grab { display: none; }
@keyframes sheet-up { from { transform: translateY(40%); opacity: 0.6; } } @keyframes fade { from { opacity: 0; } }
.sheet-grab { flex: none; height: 26px; display: grid; place-items: center; touch-action: none; cursor: grab; } .sheet-grab i { width: 42px; height: 5px; border-radius: 3px; background: var(--line); }
.sheet-scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding-bottom: var(--safe-b); } .sheet-body { outline: none; min-height: 100%; display: flex; flex-direction: column; }
.sheet-head { flex: none; display: flex; align-items: center; gap: 6px; padding: calc(var(--safe-t) * 0 + 4px) 12px 6px; position: sticky; top: 0; z-index: 3; background: var(--surface); } .sheet-head h2 { margin: 0; font-size: 20px; font-weight: 800; }
.sheet.full .sheet-head { padding-top: calc(var(--safe-t) + 8px); } .sheet-pad { padding: 6px 20px 22px; } .sheet-pad.tight { padding-top: 0; padding-bottom: 8px; }
.tiles-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tile-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 124px; padding: 16px; border: 0; border-radius: calc(22px * var(--rk)); background: var(--tbg); color: var(--tfg); text-align: left; } .tile-btn b { font-size: 18px; margin-top: auto; } .tile-btn small { font-size: 13px; opacity: 0.85; font-weight: 600; } .tile-btn:active { transform: scale(0.97); }
.detail-top { text-align: center; padding: 6px 0 10px; display: flex; flex-direction: column; align-items: center; } .detail-top h3 { margin: 12px 0 2px; font-size: 20px; } .detail-top .big { font-size: 40px; font-weight: 800; letter-spacing: -0.04em; } .detail-top .big.income { color: var(--ok); }
.facts { margin: 0 0 14px; } .facts > div { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); } .facts dt { color: var(--muted); } .facts dd { margin: 0; font-weight: 700; text-align: right; overflow-wrap: anywhere; }
.auth-hero { display: flex; justify-content: center; margin: 4px 0 10px; }
.codes { list-style: none; counter-reset: c; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 0; margin: 12px 0; } .codes li { padding: 10px 12px; border-radius: calc(12px * var(--rk)); background: var(--accent-soft); } .codes code { font: 700 15px ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: 0.04em; } @media (max-width: 380px) { .codes { grid-template-columns: 1fr; } }

/* The transaction sheet: amount first, big keypad */
.sheet.tx .sheet-scroll { overflow: hidden; display: flex; flex-direction: column; } .sheet.tx .sheet-body { flex: 1; min-height: 0; } .tx-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.tx-seg { flex: 1; margin: 0 4px; } .tx-main { padding: 6px 20px 4px; text-align: center; }
.amt-display { display: flex; justify-content: center; align-items: baseline; gap: 8px; width: 100%; border: 0; background: none; padding: 6px 0; border-radius: calc(18px * var(--rk)); font-size: 58px; font-weight: 800; letter-spacing: -0.045em; color: var(--ink); } .amt-display .cur { font-size: 28px; color: var(--muted); font-weight: 700; } .amt-display .val.zero { color: var(--muted); }
.amt-display.on { background: var(--accent-soft); } .amt-display.small { font-size: 38px; margin-top: 6px; } .amt-display small { font-size: 13px; color: var(--muted); font-weight: 700; margin-right: auto; padding-left: 12px; }
.desc { width: 100%; height: 50px; border: 0; border-bottom: 1.5px solid var(--line); background: none; outline: 0; font-size: 17px; text-align: center; margin-top: 4px; } .desc:focus { border-color: var(--accent); }
.quickline { min-height: 44px; display: flex; justify-content: center; align-items: center; } .quickline input { width: 100%; height: 46px; margin-top: 6px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: calc(14px * var(--rk)); background: var(--bg); font-size: 16px; }
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 8px 16px calc(14px + var(--safe-b)); flex: none; background: var(--surface); border-top: 1px solid var(--line); }
.key-btn, .keypad .key { display: grid; place-items: center; width: auto; height: 58px; margin: 0; border: 0; border-radius: calc(18px * var(--rk)); background: var(--bg); font-size: 26px; font-weight: 700; } .keypad .key:active { background: var(--accent-soft); transform: scale(0.97); }

/* Onboarding and toast */
/* ---------------------------------------------------------------- First-run flow */
.flow { position: fixed; inset: 0; z-index: 200; display: flex; justify-content: center; background-color: var(--bg); background-image: var(--bg-img, none); overflow-y: auto; } body.in-flow .app { visibility: hidden; }
.flow-card { display: flex; flex-direction: column; width: min(520px, 100%); min-height: 100dvh; padding: calc(var(--safe-t) + 14px) 22px calc(var(--safe-b) + 18px); }
.flow-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; } .flow-count { font-size: 14px; font-weight: 700; color: var(--muted); }
.brand-row { display: inline-flex; align-items: center; gap: 8px; } .brand-name { font-size: 22px; letter-spacing: -0.04em; } .brand-name i { font-style: normal; color: var(--accent-2); }
.flow-lang { display: flex; gap: 6px; } .flow-lang .chip { height: 44px; padding: 0 14px; } .chip.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-2); }
.flow-body { flex: 1; display: flex; flex-direction: column; padding: 14px 0; } .flow-body.center { justify-content: center; align-items: center; text-align: center; }
.flow-body h1 { margin: 6px 0 8px; font-size: 30px; line-height: 1.12; letter-spacing: -0.04em; text-align: center; } .flow-body .lead { margin: 0 0 18px; color: var(--ink-2); text-align: center; }
.flow-body .btn.wide { width: 100%; } .flow-body .trust { margin: 14px 0 0; } .flow-body form { display: flex; flex-direction: column; gap: 10px; }
.flow-body .or { display: flex; align-items: center; gap: 12px; margin: 14px 0 10px; color: var(--muted); font-size: 14px; } .flow-body .or::before, .flow-body .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.hero-art { position: relative; display: flex; justify-content: center; margin: 10px 0 8px; } .hero-art.small { margin: 4px 0 0; }
.hero-art .coin { position: absolute; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); opacity: 0.25; } .hero-art .c1 { left: 24%; top: 6px; animation: float 4s ease-in-out infinite; } .hero-art .c2 { right: 22%; top: 30px; width: 14px; height: 14px; animation: float 5s ease-in-out infinite 0.5s; } .hero-art .c3 { right: 30%; bottom: 0; animation: float 4.5s ease-in-out infinite 1s; }
@keyframes float { 50% { transform: translateY(-10px); } }
.flow-foot { display: flex; justify-content: space-between; gap: 12px; } .link { min-height: 44px; padding: 0 6px; border: 0; background: none; color: var(--accent-2); font-weight: 700; font-size: 15px; }
.flow-actions { display: flex; flex-direction: column; gap: 8px; } .flow-actions .btn { width: 100%; }
.flow-progress { flex: 1; height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; } .flow-progress i { display: block; height: 100%; border-radius: 4px; background: var(--accent); transition: width 0.35s ease; }
.ab-btn.ghost { visibility: hidden; } .lbl.pad0 { padding: 14px 0 6px; font-weight: 700; color: var(--ink-2); }
.err { color: var(--late); font-size: 14px; margin: 0; }
.spinner { width: 44px; height: 44px; border-radius: 50%; border: 4px solid var(--line); border-top-color: var(--accent); animation: spin 0.8s linear infinite; margin-bottom: 14px; } @keyframes spin { to { transform: rotate(360deg); } }
.cur-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 10px; } .cur { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0 10px; min-height: 60px; padding: 8px 12px; text-align: left; border: 1.5px solid var(--line); border-radius: calc(16px * var(--rk)); background: var(--surface); color: var(--ink); } .cur b { grid-row: span 2; font-size: 20px; min-width: 28px; text-align: center; } .cur span { font-weight: 800; } .cur small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cur.on { border-color: var(--accent); background: var(--accent-soft); }
.wrows { display: flex; flex-direction: column; gap: 10px; } .wrow { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "ic name sw" "ic open open"; gap: 6px 10px; align-items: center; padding: 12px; border: 1.5px solid var(--line); border-radius: calc(18px * var(--rk)); background: var(--surface); } .wrow.on { border-color: var(--accent); } .wrow .ci { grid-area: ic; } .wrow [name=wname] { grid-area: name; } .wrow [name=wopening] { grid-area: open; } .wrow .switch { grid-area: sw; }
.wrow input[type=text], .wrow input:not([type=checkbox]) { min-height: 46px; padding: 0 12px; border: 1.5px solid var(--line); border-radius: calc(12px * var(--rk)); background: var(--bg); font-size: 16px; min-width: 0; }
.switch { position: relative; display: inline-block; width: 52px; height: 44px; } .switch input { position: absolute; inset: 0; opacity: 0; margin: 0; width: 100%; height: 100%; z-index: 1; } .switch i { position: absolute; left: 0; top: 7px; width: 52px; height: 30px; border-radius: calc(15px * var(--rk)); background: var(--line); transition: background 0.2s; } .switch i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform 0.2s; } .switch input:checked + i { background: var(--accent); } .switch input:checked + i::after { transform: translateX(22px); }
.segm { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: calc(16px * var(--rk)); background: var(--line); margin-bottom: 12px; } .segm button { min-height: 44px; border: 0; border-radius: calc(12px * var(--rk)); background: none; font-weight: 700; color: var(--ink-2); } .segm button.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.confetti { position: absolute; inset: 0; pointer-events: none; } .confetti i { position: absolute; left: 50%; top: 40%; width: 9px; height: 14px; border-radius: 2px; background: var(--accent); animation: pop-out 1.2s ease-out both; } .confetti i:nth-child(2n) { background: #f5a524; } .confetti i:nth-child(3n) { background: #ec5f95; }
.confetti i:nth-child(1) { --x: -120px; --y: -70px; } .confetti i:nth-child(2) { --x: -80px; --y: -110px; } .confetti i:nth-child(3) { --x: -30px; --y: -130px; } .confetti i:nth-child(4) { --x: 30px; --y: -125px; } .confetti i:nth-child(5) { --x: 85px; --y: -105px; } .confetti i:nth-child(6) { --x: 125px; --y: -60px; } .confetti i:nth-child(7) { --x: -105px; --y: 20px; } .confetti i:nth-child(8) { --x: 110px; --y: 25px; }
@keyframes pop-out { from { transform: translate(0, 0) rotate(0); opacity: 1; } to { transform: translate(var(--x), var(--y)) rotate(300deg); opacity: 0; } }
/* Install guide: a looping mock-up, 12s per cycle, scenes appear in turn */
.anim-stage { position: relative; display: flex; justify-content: center; margin: 4px 0 10px; } .mock-phone { position: relative; width: 190px; height: 330px; padding: 8px; border-radius: calc(30px * var(--rk)); background: #14201b; box-shadow: 0 18px 40px -16px rgba(0,0,0,.5); } .mock-phone .notch { position: absolute; left: 50%; top: 12px; width: 56px; height: 14px; margin-left: -28px; border-radius: 8px; background: #14201b; z-index: 5; }
.mock-screen, .mw-body { position: relative; width: 100%; height: 100%; border-radius: calc(24px * var(--rk)); overflow: hidden; background: #f4f8f6; color: #0f1f1a; } .mw-body { border-radius: 0 0 10px 10px; height: 200px; }
.scene { position: absolute; inset: 0; opacity: 0; animation: scene 12s infinite; } .scene.s1 { animation-name: sc1; } .scene.s2 { animation-name: sc2; } .scene.s3 { animation-name: sc3; } .scene.s4 { animation-name: sc4; } .scene.s34 { animation-name: sc34; }
@keyframes sc1 { 0%, 22% { opacity: 1; } 25%, 100% { opacity: 0; } } @keyframes sc2 { 0%, 22% { opacity: 0; } 25%, 47% { opacity: 1; } 50%, 100% { opacity: 0; } } @keyframes sc3 { 0%, 47% { opacity: 0; } 50%, 72% { opacity: 1; } 75%, 100% { opacity: 0; } } @keyframes sc34 { 0%, 47% { opacity: 0; } 50%, 97% { opacity: 1; } 100% { opacity: 0; } } @keyframes sc4 { 0%, 72% { opacity: 0; } 75%, 97% { opacity: 1; } 100% { opacity: 0; } }
.mock-app { padding: 34px 12px 0; } .ma-head { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; } .ma-head i { width: 22px; height: 22px; border-radius: 50%; background: #0a8f6a; } .ma-head b { height: 10px; flex: 1; border-radius: 5px; background: #cfe0d9; } .ma-card { height: 70px; border-radius: calc(14px * var(--rk)); background: linear-gradient(135deg, #14b08a, #077f5f); margin-bottom: 10px; } .ma-row { height: 34px; border-radius: calc(10px * var(--rk)); background: #fff; margin-bottom: 8px; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.safari-bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-around; align-items: center; height: 44px; background: #e8eeec; font-size: 14px; color: #4a5c55; } .safari-bar .share-ic { color: #0a7cff; animation: hot 12s infinite; }
@keyframes hot { 0%, 14% { transform: scale(1); } 18% { transform: scale(1.5); } 22%, 100% { transform: scale(1); } }
.chrome-bar { position: absolute; left: 0; right: 0; top: 0; z-index: 2; display: flex; align-items: center; gap: 6px; height: 40px; padding: 14px 10px 0; background: #e8eeec; font-size: 10px; } .chrome-bar .url { flex: 1; padding: 3px 8px; border-radius: calc(10px * var(--rk)); background: #fff; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .dots3 { font-weight: 800; }
.dim { position: absolute; inset: 0; background: rgba(0,0,0,.35); } .sheet-mock { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px; border-radius: calc(18px * var(--rk)) 18px 0 0; background: #fff; } .sm-app { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 12px; } .sm-row { padding: 9px 10px; margin-top: 4px; border-radius: calc(10px * var(--rk)); background: #eef3f1; font-size: 12px; display: flex; justify-content: space-between; } .sm-row.hot, .mm-row.hot { background: #d9f3ea; font-weight: 800; color: #07654d; animation: blink 12s infinite; }
@keyframes blink { 25%, 45% { box-shadow: 0 0 0 3px #14b08a; } }
.add-dialog { position: absolute; left: 12px; right: 12px; top: 56px; padding: 12px; border-radius: calc(16px * var(--rk)); background: #fff; font-size: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.3); } .add-dialog.compact { top: 80px; text-align: center; } .ad-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; } .ad-body { display: flex; align-items: center; gap: 10px; justify-content: center; padding: 8px 0; } .ad-btns { display: flex; justify-content: space-between; align-items: center; } .hotbtn { padding: 6px 12px; border-radius: calc(12px * var(--rk)); background: #0a8f6a; color: #fff; font-weight: 800; }
.menu-mock { position: absolute; right: 8px; top: 40px; width: 140px; padding: 6px; border-radius: calc(12px * var(--rk)); background: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.3); font-size: 11px; } .mm-row { padding: 8px; border-radius: 8px; }
.app-icon { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: calc(10px * var(--rk)); background: #0a8f6a; overflow: hidden; } .app-icon svg { width: 30px; height: 30px; }
.home-grid { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, 1fr); align-content: start; gap: 14px 6px; padding: 40px 10px; background: linear-gradient(160deg, #6ac4a6, #2a6f8f); justify-items: center; } .home-grid i { width: 36px; height: 36px; border-radius: calc(9px * var(--rk)); background: rgba(255,255,255,.55); } .home-grid .app-icon { animation: drop 12s infinite; }
@keyframes drop { 0%, 75% { transform: scale(2.2); opacity: 0; } 80%, 100% { transform: scale(1); opacity: 1; } }
.finger { position: absolute; width: 26px; height: 26px; margin: -13px; border-radius: 50%; background: rgba(10,143,106,.45); border: 2px solid #0a8f6a; left: 50%; top: 50%; animation: finger 12s infinite; z-index: 9; }
.plat-ios .finger { animation-name: fingerI; } .plat-android .finger { animation-name: fingerA; } .plat-desktop .finger { animation-name: fingerD; }
@keyframes fingerI { 0%, 8% { left: 50%; top: 80%; opacity: 0; } 12%, 20% { left: 50%; top: 91%; opacity: 1; } 28%, 40% { left: 50%; top: 80%; opacity: 1; } 48% { opacity: 0; } 52%, 64% { left: 85%; top: 25%; opacity: 1; } 70% { opacity: 0; } 100% { opacity: 0; } }
@keyframes fingerA { 0%, 6% { left: 88%; top: 8%; opacity: 0; } 10%, 22% { left: 90%; top: 8%; opacity: 1; } 28%, 40% { left: 60%; top: 34%; opacity: 1; } 48% { opacity: 0; } 52%, 66% { left: 80%; top: 56%; opacity: 1; } 72%, 100% { opacity: 0; } }
@keyframes fingerD { 0%, 8% { left: 40%; top: 20%; opacity: 0; } 12%, 24% { left: 90%; top: 19%; opacity: 1; } 28%, 45% { left: 70%; top: 60%; opacity: 1; } 55% { opacity: 0; } 100% { opacity: 0; } }
.mock-window { position: relative; width: min(320px, 100%); border-radius: calc(12px * var(--rk)); background: #14201b; box-shadow: 0 18px 40px -16px rgba(0,0,0,.5); } .mw-bar { display: flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px; } .mw-bar i { width: 9px; height: 9px; border-radius: 50%; background: #566a62; } .mw-bar .url { flex: 1; display: flex; justify-content: space-between; align-items: center; margin-left: 8px; padding: 2px 8px; border-radius: calc(10px * var(--rk)); background: #2a3b34; color: #cfe0d9; font-size: 10px; } .inst-ic { color: #6ee7bf; }
.app-window { position: absolute; inset: 14px 30px; border-radius: calc(10px * var(--rk)); background: #f4f8f6; box-shadow: 0 10px 30px rgba(0,0,0,.35); overflow: hidden; } .mw-body .mock-app { padding-top: 14px; }
.anim-steps { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .anim-steps li { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: calc(14px * var(--rk)); background: var(--surface); box-shadow: var(--shadow); font-size: 15px; } .anim-steps .n { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-2); font-weight: 800; font-size: 13px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.toast { position: fixed; left: 50%; bottom: calc(var(--tab-h) + var(--safe-b) + 22px); z-index: 300; display: flex; align-items: center; gap: 14px; max-width: min(520px, calc(100vw - 24px)); padding: 13px 18px; border-radius: calc(16px * var(--rk)); background: #10201a; color: #fff; box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.6); font-size: 15px; transform: translateX(-50%); } .toast.show { animation: toast-in 0.25s ease; } .toast .link { color: #6ee7bf; padding: 0 4px; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 12px); } }

/* ---------------------------------------------------------------- Tablet (600px and up): side rail */
@media (min-width: 600px) {
	.tabbar, .ab-avatar { display: none; } .toast { bottom: 28px; }
	.rail { display: flex; flex-direction: column; align-items: stretch; gap: 6px; width: 96px; flex: none; padding: calc(var(--safe-t) + 14px) 10px 14px; background: var(--surface); border-right: 1px solid var(--line); }
	.rail-brand { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 8px; text-decoration: none; color: var(--ink); font-size: 20px; } .rail-brand b { display: none; }
	.rail-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 64px; margin: 4px 0 8px; border: 0; border-radius: calc(20px * var(--rk)); background: var(--brand); color: var(--brand-ink); font-size: 11px; font-weight: 700; } .rail-add span { display: none; }
	.rail-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 64px; border: 0; border-radius: calc(18px * var(--rk)); background: none; color: var(--muted); font-size: 11px; font-weight: 700; } .rail-item:hover { background: var(--accent-soft); } .rail-item.on { background: var(--accent-soft); color: var(--accent-2); }
	.rail-avatar { display: flex; justify-content: center; }
	.appbar { padding-inline: 28px 20px; } main#view { padding-inline: max(24px, calc((100% - 760px) / 2)); }
	.sheet { inset: 0; margin: auto; width: min(560px, 92vw); height: auto; max-height: 90dvh; border-radius: calc(26px * var(--rk)); } .sheet.full, .sheet.tall { height: auto; max-height: 92dvh; } .sheet-grab { display: none; } .sheet.full .sheet-head { padding-top: 12px; }
	.sheet[open] { animation: pop 0.2s ease; } @keyframes pop { from { transform: scale(0.96); opacity: 0; } }
	.tiles.three { grid-template-columns: repeat(3, 1fr); }
	.wallets { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
	.flow-card { justify-content: center; } .flow-card.install { width: min(560px, 100%); }
}
/* ---------------------------------------------------------------- Wide (900px and up): expanded rail and a details pane */
@media (min-width: 1100px) {
	.rail { width: 224px; padding-inline: 14px; } .rail-brand b { display: inline; font-size: 22px; font-weight: 800; letter-spacing: -0.04em; }
	.rail-add { flex-direction: row; min-height: 54px; gap: 8px; font-size: 16px; } .rail-add span { display: inline; }
	.rail-item { flex-direction: row; justify-content: flex-start; gap: 14px; min-height: 52px; padding: 0 16px; font-size: 15px; }
}
@media (min-width: 1200px) {
	.pane { display: flex; flex-direction: column; width: 390px; flex: none; overflow-y: auto; border-left: 1px solid var(--line); background: var(--surface); padding: calc(var(--safe-t) + 14px) 20px 20px; } .pane-head h2 { margin: 6px 0 14px; font-size: 18px; }
	main#view { padding-inline: 28px; }
}
@media (min-width: 1280px) { main#view { padding-inline: max(28px, calc((100% - 820px) / 2)); } }
@media (prefers-reduced-motion: reduce) { :root:not([data-motion="full"]) *, :root:not([data-motion="full"]) ::before, :root:not([data-motion="full"]) ::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } }
:root[data-motion="off"] *, :root[data-motion="off"] ::before, :root[data-motion="off"] ::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
:root[data-motion="reduced"] *, :root[data-motion="reduced"] ::before, :root[data-motion="reduced"] ::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
:root[data-motion="off"] .scene.s1, :root[data-motion="reduced"] .scene.s1 { opacity: 1; }
html, body { max-width: 100%; overflow-x: hidden; }

@media (max-height: 720px) { .keypad .key { height: 48px; font-size: 22px; } .amt-display { font-size: 46px; padding: 2px 0; } .desc { height: 44px; } .hero > b { margin-bottom: 10px; } }

@media (max-height: 860px) { .mock-phone { width: 150px; height: 258px; padding: 6px; border-radius: calc(26px * var(--rk)); } .mock-screen { border-radius: calc(20px * var(--rk)); } .mock-phone .mock-app { padding-top: 26px; } .mock-phone .ma-card { height: 46px; } .mw-body { height: 150px; } .anim-steps { gap: 5px; } .anim-steps li { padding: 5px 10px; font-size: 14px; } .flow-body h1 { font-size: 26px; } .flow-body .lead { margin-bottom: 10px; font-size: 15px; } }
.flow-actions { position: sticky; bottom: 0; padding-top: 10px; background: linear-gradient(to bottom, transparent, var(--bg) 14px); } .flow-body > .btn-ghost { margin-top: 10px; }
/* Theme picker */
.theme-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 4px 0 6px; } @media (min-width: 600px) { .theme-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1100px) { .theme-grid { grid-template-columns: repeat(4, 1fr); } }
.theme-card { display: flex; flex-direction: column; gap: 3px; padding: 8px; text-align: left; border: 2px solid var(--line); border-radius: 18px; background: var(--surface); color: var(--ink); font-family: var(--font); } .theme-card.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.theme-card .tc-name { font-weight: 800; font-size: 15px; padding: 2px 4px 0; font-family: var(--font); } .theme-card small { color: var(--muted); font-size: 12px; padding: 0 4px 4px; line-height: 1.3; }
.tc-prev { display: block; height: 62px; padding: 10px; border-radius: 12px; border: 1px solid rgba(128, 128, 128, 0.3); } .tc-prev i { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 6px 8px; border: 1px solid; border-radius: 8px; } .tc-prev b { display: block; width: 18px; height: 6px; border-radius: 3px; } .tc-prev u { display: block; width: 70%; height: 4px; border-radius: 2px; opacity: 0.45; text-decoration: none; }

/* Motion: screen entrance, press feedback, theme cross-fade. All of it is switched off by the Animations setting. */
body, .card, .list, .hero, .wc, .promo, .tabbar, .appbar, .rail, .chip, .theme-card { transition: background-color 0.3s, border-color 0.3s, color 0.3s; }
.btn, .chip, .wc, .tab, .rail-item, .fab, .tile-btn, .theme-card, .cur, .row-btn { transition: transform 0.12s ease, background-color 0.3s, border-color 0.3s, color 0.3s; }
.btn:active, .chip:active, .wc:active, .tab:active, .rail-item:active, .tile-btn:active, .theme-card:active, .cur:active { transform: scale(0.96); } .fab:active { transform: scale(0.92) rotate(90deg); }
#view.enter > * { animation: rise 0.42s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
#view.enter > *:nth-child(2) { animation-delay: 0.05s; } #view.enter > *:nth-child(3) { animation-delay: 0.1s; } #view.enter > *:nth-child(4) { animation-delay: 0.15s; } #view.enter > *:nth-child(5) { animation-delay: 0.2s; } #view.enter > *:nth-child(n+6) { animation-delay: 0.25s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
#view.enter .hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.28) 50%, transparent 65%); background-size: 250% 100%; animation: sheen 1.1s 0.25s ease-out both; } .hero { position: relative; overflow: hidden; }
@keyframes sheen { from { background-position: 150% 0; } to { background-position: -50% 0; } }
#view.enter .bar, #view.enter .cf-bars i, #view.enter .bars i { transform-origin: bottom; animation: grow 0.6s 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) both; } @keyframes grow { from { transform: scaleY(0); } }
.sw-row { transition: transform 0.2s ease; }

/* Never scroll sideways: rows wrap, categories sit in a grid, wide controls shrink to fit */
.cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 4px 0 12px; } @media (min-width: 600px) { .cats { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.chip { flex: 0 1 auto; max-width: 100%; min-width: 0; } .chip > * { min-width: 0; }
#txDate { display: block; min-width: 0; max-width: 100%; -webkit-appearance: none; appearance: none; text-align: center; }
.catchip.more { color: var(--muted); }
.cats { padding-inline: 3px; gap: 2px; } .catchip { min-height: 80px; padding: 6px 2px; gap: 4px; }
/* Plan: budgets, goals, income */
.bgrid, .ggrid { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 12px; } @media (min-width: 600px) { .bgrid, .ggrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bcard { display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 14px; text-align: left; border: var(--bw) var(--bs, solid) var(--card-line); border-radius: calc(20px * var(--rk)); background: var(--surface); box-shadow: var(--shadow); color: var(--ink); font-family: inherit; }
.bcard .mid, .gcard .mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; background: none; border: 0; padding: 0; text-align: left; color: var(--ink); font-family: inherit; } .bcard .mid b, .gcard .mid b { font-size: 16px; } .bcard small, .gcard small { color: var(--muted); font-size: 13px; line-height: 1.3; }
.pbar { display: block; height: 10px; margin: 6px 0 2px; border-radius: 6px; background: var(--line); overflow: hidden; } .pbar i { display: block; height: 100%; border-radius: 6px; background: var(--ok); transition: width 0.5s ease; } .pbar.warn i { background: var(--warn); } .pbar.bad i { background: var(--late); }
.st.warn { color: var(--warn); } .st.bad { color: var(--late); } .small.st, small.st { font-weight: 700; }
.gcard { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: center; padding: 14px; border: var(--bw) var(--bs, solid) var(--card-line); border-radius: calc(20px * var(--rk)); background: var(--surface); box-shadow: var(--shadow); } .gcard > .btn { grid-column: 1 / -1; }
.ringw { position: relative; display: inline-grid; place-items: center; width: var(--s); height: var(--s); flex: none; } .ringw > svg { position: absolute; inset: 0; } .ringw b { position: relative; display: grid; place-items: center; font-size: 14px; color: var(--accent-2); }
.rg-bg { fill: none; stroke: var(--line); stroke-width: 7; } .rg-fg { fill: none; stroke: var(--accent); stroke-width: 7; stroke-linecap: round; transition: stroke-dasharray 0.6s ease; }
.btn.sm { min-height: 44px; padding: 0 14px; font-size: 14px; }
.ghome { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 8px; } .gmini { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 84px; padding: 8px 4px; border: 0; border-radius: calc(16px * var(--rk)); background: var(--surface); box-shadow: var(--shadow); color: var(--ink); font-family: inherit; } .gmini small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 700; }
.irow { display: flex; align-items: center; gap: 6px; padding-right: 10px; flex-wrap: wrap; } .irow .mrow { flex: 1; min-width: 200px; } .irow .amt { font-weight: 800; }
.icon-pick { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; } .ipick { display: grid; place-items: center; min-height: 48px; border: 2px solid var(--line); border-radius: calc(14px * var(--rk)); background: var(--surface); color: var(--ink-2); } .ipick.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-2); }
.promo-plan { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px; margin-bottom: 8px; text-align: left; border: var(--bw) var(--bs, solid) var(--card-line); border-radius: calc(20px * var(--rk)); background: var(--surface); box-shadow: var(--shadow); color: var(--ink); font-family: inherit; } .promo-plan .mid { flex: 1; display: flex; flex-direction: column; } .promo-plan small { color: var(--muted); }
/* Reports */
.repbar { margin-bottom: 8px; } .repline { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .tabs2 { padding-top: 0; }
.rep-body .card h2 { font-size: 17px; }
.donut-wrap2 { display: grid; grid-template-columns: 1fr; gap: 10px; align-items: center; } @media (min-width: 600px) { .donut-wrap2 { grid-template-columns: 200px 1fr; } }
.donut-svg { width: 100%; max-width: 200px; margin: 0 auto; display: block; } .donut-svg .slice { cursor: pointer; transition: stroke-width 0.2s; } .dn-v { font: 800 17px var(--font); fill: var(--ink); } .dn-l { font: 600 11px var(--font); fill: var(--muted); }
.legend2 { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .legend2 button { display: grid; grid-template-columns: 12px 1fr auto auto; gap: 8px; align-items: center; width: 100%; min-height: 44px; padding: 0 6px; border: 0; border-radius: calc(10px * var(--rk)); background: none; color: var(--ink); font: inherit; text-align: left; } .legend2 button.on { background: var(--accent-soft); } .legend2 i { width: 12px; height: 12px; border-radius: 4px; } .legend2 em { font-style: normal; color: var(--muted); font-size: 13px; min-width: 36px; text-align: right; } .legend2 span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.legend2.inline { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; font-size: 13px; color: var(--ink-2); } .legend2.inline li { display: inline-flex; align-items: center; gap: 6px; } .legend2.inline i { width: 10px; height: 10px; border-radius: 3px; }
.chart { width: 100%; height: auto; display: block; } .chart .ax { font: 600 10px var(--font); fill: var(--muted); } .chart .ln { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; } .chart .area { fill: color-mix(in srgb, var(--accent) 16%, transparent); stroke: none; } .chart .zero { stroke: var(--line); stroke-dasharray: 3 3; }
.keys { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: 13px; color: var(--ink-2); margin-bottom: 4px; } .keys .key { width: 10px; height: 10px; border-radius: 3px; margin-left: 6px; display: inline-block; }
.wk { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; height: 120px; align-items: end; } .wk-col { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; gap: 4px; } .wk-col i { display: block; width: 100%; border-radius: 6px 6px 3px 3px; background: var(--accent); } .wk-col small { font-size: 11px; color: var(--muted); }
.dl { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; font-weight: 800; color: var(--muted); } .dl.good { color: var(--ok); } .dl.bad { color: var(--late); }
.tv { margin-top: 8px; font-size: 14px; } .tv summary { min-height: 44px; display: flex; align-items: center; color: var(--accent-2); font-weight: 700; cursor: pointer; }
.tbl-wrap { max-width: 100%; overflow: hidden; } .tbl { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 13px; } .tbl th, .tbl td { padding: 8px 6px; text-align: left; border-bottom: 1px solid var(--line); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tbl .r { text-align: right; font-weight: 700; } .tbl td.income { color: var(--ok); } .tbl th button { border: 0; background: none; padding: 0; min-height: 44px; font: inherit; font-weight: 800; color: var(--ink-2); text-align: left; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .tbl .grp td { background: var(--accent-soft); font-weight: 800; } .tbl tfoot td { font-weight: 800; border-bottom: 0; }
.tbl.big th:nth-child(1), .tbl.big td:nth-child(1) { width: 17%; } .tbl.big th:nth-child(3), .tbl.big td:nth-child(3) { width: 0; display: none; } .tbl.big th:nth-child(4), .tbl.big td:nth-child(4) { width: 0; display: none; } @media (min-width: 600px) { .tbl.big th:nth-child(3), .tbl.big td:nth-child(3), .tbl.big th:nth-child(4), .tbl.big td:nth-child(4) { display: table-cell; width: 20%; } .tbl.big th:nth-child(1), .tbl.big td:nth-child(1) { width: 12%; } }
.tbl.big tfoot td[colspan="4"] { display: table-cell; } .tbl.big .grp td[colspan="4"] { display: table-cell; }
.card.flush { padding: 8px 10px; } .lbl-inline { align-self: center; padding-right: 4px; }

.repbar .f { margin-bottom: 8px; } .repbar select { font-weight: 700; }
.bcard .mid, .gcard .mid, .irow .mid { white-space: normal; } .irow .mid small { white-space: normal; } .irow .btn { margin-left: auto; }
@media (max-width: 599px) { .tiles.three b { font-size: 15px; letter-spacing: -0.03em; } .tiles.three .tile { padding: 10px 8px; } }
.tbl.big th:nth-child(1), .tbl.big td:nth-child(1) { width: 21%; } .tbl.big th:nth-child(5), .tbl.big td:nth-child(5) { width: 26%; }
.tbl.big { table-layout: auto; } .tbl.big td:nth-child(2), .tbl.big th:nth-child(2) { width: 100%; max-width: 0; } @media (min-width: 600px) { .tbl.big td:nth-child(2), .tbl.big th:nth-child(2) { width: auto; max-width: none; } .tbl.big { table-layout: fixed; } }
/* Aims and ideas */
.aims { display: grid; grid-template-columns: 1fr; gap: 8px; } @media (min-width: 520px) { .aims { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.aim { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 12px; text-align: left; border: 2px solid var(--line); border-radius: calc(16px * var(--rk)); background: var(--surface); color: var(--ink); font: inherit; font-weight: 700; } .aim span { min-width: 0; line-height: 1.25; } .aim.on { border-color: var(--accent); background: var(--accent-soft); }
.ideas { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 12px; } @media (min-width: 600px) { .ideas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.idea { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: var(--bw) var(--bs, solid) var(--card-line); border-radius: calc(20px * var(--rk)); background: var(--surface); box-shadow: var(--shadow); } .idea .mid { flex: 1; min-width: 0; } .idea b { display: block; font-size: 16px; } .idea p { margin: 4px 0 8px; color: var(--ink-2); font-size: 14px; } .idea .acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ideas { grid-template-columns: minmax(0, 1fr); } @media (min-width: 600px) { .ideas { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .idea { min-width: 0; } .idea p, .idea b { overflow-wrap: anywhere; } .aims { grid-template-columns: minmax(0, 1fr); } @media (min-width: 520px) { .aims { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Shared wallets */
.prow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 0; } .prow .mid { flex: 1; min-width: 160px; display: flex; flex-direction: column; } .prow small { color: var(--muted); overflow-wrap: anywhere; } .prow select { min-height: 44px; border: 1.5px solid var(--line); border-radius: calc(12px * var(--rk)); background: var(--bg); color: var(--ink); padding: 0 8px; font: inherit; max-width: 100%; }
.tagp { padding: 4px 10px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-2); font-size: 13px; font-weight: 700; } .people { margin: 0 0 8px; padding: 0; list-style: none; }
.invite-box { margin: 10px 0; padding: 14px; border-radius: calc(16px * var(--rk)); background: var(--accent-soft); text-align: center; } .invite-box .code { display: block; margin: 4px 0; font: 800 28px ui-monospace, Menlo, monospace; letter-spacing: 0.12em; color: var(--accent-2); }
.joinnote { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: calc(14px * var(--rk)); background: var(--accent-soft); color: var(--accent-2); font-weight: 700; font-size: 14px; }
.codein { text-transform: uppercase; letter-spacing: 0.14em; font-weight: 800; text-align: center; font-size: 20px; }

/* Category icon and colour picker */
.cat-prev { display: flex; justify-content: center; margin: 4px 0 12px; } .cat-icons { grid-template-columns: repeat(5, minmax(0, 1fr)); } @media (min-width: 420px) { .cat-icons { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
.color-pick { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; } .cpick { display: grid; place-items: center; min-height: 44px; border: 2px solid transparent; border-radius: 50%; background: none; } .cpick i { display: block; width: 30px; height: 30px; border-radius: 50%; background: var(--tfg); } .cpick.on { border-color: var(--ink); }

.rep-sec { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 22px 0 8px; padding-top: 4px; border-top: 1px solid var(--line); } .rep-sec h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 17px; font-family: var(--font-head); color: var(--accent-2); } .rep-sec:first-child { border-top: 0; margin-top: 6px; }
.tabs2 .chip { gap: 6px; padding: 0 12px; }
/* The details pane never scrolls sideways: its content shrinks, and long button labels wrap */
.pane { overflow-x: hidden; } .pane > * { min-width: 0; max-width: 100%; } .detail { min-width: 0; }
.btn-row.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } .btn-row.two > .btn, .btn-row.stack > .btn { min-width: 0; max-width: 100%; white-space: normal; text-align: center; line-height: 1.2; padding-block: 8px; }
.bgrid, .ggrid { grid-template-columns: minmax(0, 1fr); } @media (min-width: 600px) { .bgrid, .ggrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bcard, .gcard { min-width: 0; } .bcard .mid, .gcard .mid { overflow-wrap: anywhere; } .bcard small, .gcard small { overflow-wrap: anywhere; }

/* Setup tip: a looping demo of swiping a row */
.swipe-demo { position: relative; display: grid; gap: 10px; padding: 12px; margin: 4px 0 12px; border-radius: calc(20px * var(--rk)); background: var(--accent-soft); }
.mock-sw { position: relative; overflow: hidden; border-radius: calc(14px * var(--rk)); background: var(--surface); box-shadow: var(--shadow); }
.mock-sw .mb { position: absolute; inset: 0; display: flex; justify-content: space-between; } .mock-sw .l, .mock-sw .r { display: flex; } .mact { width: 88px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: #fff; font-size: 12px; } .mact.paid { background: var(--ok); } .mact.edit { background: #3b82f6; } .mact.del { background: var(--late); }
.mock-sw .front { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 14px; min-height: 64px; background: var(--surface); } .mock-sw .mid { flex: 1; min-width: 0; display: flex; flex-direction: column; } .mock-sw small { color: var(--muted); } .mock-sw .a { font-weight: 800; }
.mock-sw.a .front { animation: swA 9s ease-in-out infinite; } .mock-sw.b .front { animation: swB 9s ease-in-out infinite; }
@keyframes swA { 0%, 6% { transform: translateX(0); } 16%, 38% { transform: translateX(-176px); } 46%, 100% { transform: translateX(0); } }
@keyframes swB { 0%, 54% { transform: translateX(0); } 64%, 88% { transform: translateX(88px); } 96%, 100% { transform: translateX(0); } }
.sfinger { position: absolute; width: 26px; height: 26px; margin: -13px; border-radius: 50%; background: rgba(10, 143, 106, 0.4); border: 2px solid var(--accent); opacity: 0; pointer-events: none; } .sfinger.fa { top: 44px; animation: fA 9s ease-in-out infinite; } .sfinger.fb { top: 118px; animation: fB 9s ease-in-out infinite; }
@keyframes fA { 0%, 4% { left: 80%; opacity: 0; } 6% { left: 80%; opacity: 1; } 16%, 38% { left: 45%; opacity: 1; } 42%, 100% { left: 45%; opacity: 0; } }
@keyframes fB { 0%, 52% { left: 20%; opacity: 0; } 54% { left: 20%; opacity: 1; } 64%, 88% { left: 45%; opacity: 1; } 92%, 100% { left: 45%; opacity: 0; } }
:root[data-motion="off"] .mock-sw.a .front, :root[data-motion="reduced"] .mock-sw.a .front { transform: translateX(-176px); } :root[data-motion="off"] .mock-sw.b .front, :root[data-motion="reduced"] .mock-sw.b .front { transform: translateX(88px); } :root[data-motion="off"] .sfinger, :root[data-motion="reduced"] .sfinger { display: none; }
.tip-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .tip-list li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: calc(14px * var(--rk)); background: var(--surface); box-shadow: var(--shadow); font-size: 15px; } .tip-list svg { flex: none; color: var(--accent-2); }

/* Swipe actions are for phones: on tablets and computers a click opens the details (panel or sheet) with the same buttons */
@media (min-width: 600px) { .sw-back { display: none; } .sw-front { touch-action: auto; } }

/* Setup: choosing aims and goals */
.aim { position: relative; padding-right: 48px; } .aim .tick { position: absolute; right: 12px; top: 50%; width: 26px; height: 26px; margin-top: -13px; display: grid; place-items: center; border: 2px solid var(--line); border-radius: 50%; color: var(--accent-ink); } .aim.on .tick { background: var(--accent); border-color: var(--accent); }
.multi-hint { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 8px 12px; border-radius: calc(12px * var(--rk)); background: var(--accent-soft); color: var(--accent-2); font-weight: 700; font-size: 14px; }
.grows { display: grid; gap: 8px; margin: 8px 0; } .grow { display: grid; grid-template-columns: auto minmax(0, 1fr) 96px auto; gap: 8px; align-items: center; padding: 8px; border: 1.5px solid var(--line); border-radius: calc(16px * var(--rk)); background: var(--surface); } .grow input { min-width: 0; min-height: 46px; padding: 0 10px; border: 1.5px solid var(--line); border-radius: calc(12px * var(--rk)); background: var(--bg); font-size: 16px; color: var(--ink); }

/* ---------------------------------------------------------------- More effects (all off with the Animations setting) */
/* A balance card that flips over to this month's summary */
.hero-flip { display: grid; perspective: 1400px; margin: 4px 0 6px; cursor: pointer; border-radius: calc(28px * var(--rk)); outline-offset: 3px; } .hero-flip > .hero { grid-area: 1 / 1; margin: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform 0.75s cubic-bezier(0.3, 0.9, 0.3, 1); }
.hero-flip .hero-back { transform: rotateY(180deg); } .hero-flip.flipped .hero-front { transform: rotateY(-180deg); } .hero-flip.flipped .hero-back { transform: rotateY(0); }
.hero-flip .flip-ic { position: absolute; right: 14px; top: 14px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); opacity: 0.9; } .hero-flip:hover .flip-ic svg, .hero-flip:focus-visible .flip-ic svg { transform: rotate(180deg); } .flip-ic svg { transition: transform 0.5s; }
.mini-bars { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; height: 64px; margin: 2px 0 12px; align-items: end; } .mini-bars > div { position: relative; display: flex; justify-content: center; align-items: flex-end; gap: 3px; height: 100%; padding-bottom: 14px; } .mini-bars span { width: 8px; border-radius: 3px 3px 1px 1px; } .mb-in { background: rgba(255, 255, 255, 0.95); } .mb-out { background: rgba(255, 255, 255, 0.45); } .mini-bars em { position: absolute; bottom: 0; left: 0; right: 0; text-align: center; font-style: normal; font-size: 10px; opacity: 0.85; }
.hero-back > b { margin-bottom: 8px; }
/* Fade and slide in: list rows one after another, wallet cards popping in, bars and rings drawing themselves */
#view.enter .list > li { animation: rowin 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both; } #view.enter .list > li:nth-child(1) { animation-delay: 0.08s; } #view.enter .list > li:nth-child(2) { animation-delay: 0.14s; } #view.enter .list > li:nth-child(3) { animation-delay: 0.2s; } #view.enter .list > li:nth-child(4) { animation-delay: 0.26s; } #view.enter .list > li:nth-child(n+5) { animation-delay: 0.32s; }
@keyframes rowin { from { opacity: 0; transform: translateX(-14px); } }
#view.enter .wc { animation: cardpop 0.5s cubic-bezier(0.3, 1.4, 0.5, 1) both; } #view.enter .wc:nth-child(2) { animation-delay: 0.06s; } #view.enter .wc:nth-child(3) { animation-delay: 0.12s; } #view.enter .wc:nth-child(4) { animation-delay: 0.18s; } #view.enter .wc:nth-child(n+5) { animation-delay: 0.24s; }
@keyframes cardpop { from { opacity: 0; transform: scale(0.85) translateY(10px); } }
#view.enter .pbar i { animation: barin 0.8s 0.15s cubic-bezier(0.2, 0.8, 0.2, 1) both; } @keyframes barin { from { width: 0; } }
#view.enter .rg-fg { animation: ringin 1s 0.15s cubic-bezier(0.2, 0.8, 0.2, 1) both; } @keyframes ringin { from { stroke-dasharray: 0 400; } }
#view.enter .donut-svg .slice { animation: slicein 0.9s both; } #view.enter .donut-svg .slice:nth-of-type(2) { animation-delay: 0.08s; } #view.enter .donut-svg .slice:nth-of-type(3) { animation-delay: 0.16s; } #view.enter .donut-svg .slice:nth-of-type(n+4) { animation-delay: 0.24s; } @keyframes slicein { from { opacity: 0; stroke-width: 0; } }
#view.enter .idea, #view.enter .bcard, #view.enter .gcard { animation: rise 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
/* A row that is deleted fades and collapses; one that is paid turns green and slides away */
.sw.leaving { animation: leave 0.28s ease forwards; } @keyframes leave { to { opacity: 0; transform: translateX(-40px); max-height: 0; } }
.sw.paid-out .sw-front { background: color-mix(in srgb, var(--ok) 35%, var(--surface)); transition: background 0.15s, transform 0.28s ease-in; transform: translateX(110%) !important; } .sw.paid-out { animation: paidfade 0.28s ease forwards; } @keyframes paidfade { 60% { opacity: 1; } to { opacity: 0; } }
/* The tab you pressed bounces; the + button nudges until there is something to show */
.tab svg.pop, .rail-item svg.pop { animation: tabpop 0.45s cubic-bezier(0.3, 1.6, 0.5, 1); } @keyframes tabpop { 40% { transform: translateY(-5px) scale(1.2); } }
.fab.nudge { animation: nudge 2.6s ease-in-out infinite; } @keyframes nudge { 0%, 60%, 100% { transform: scale(1); box-shadow: 0 10px 20px -8px rgba(7, 127, 95, 0.8); } 70% { transform: scale(1.1); } 80% { transform: scale(1); box-shadow: 0 0 0 14px rgba(20, 176, 138, 0); } }
/* A calm drift in the balance card, and a lift on cards under a mouse */
.hero-front { background-size: 160% 160%; animation: drift 14s ease-in-out infinite alternate; } @keyframes drift { from { background-position: 0% 40%; } to { background-position: 100% 60%; } }
@media (hover: hover) and (pointer: fine) { .card, .bcard, .gcard, .idea, .wc { transition: transform 0.2s, box-shadow 0.2s; } .card:hover, .bcard:hover, .gcard:hover, .idea:hover, .wc:hover { transform: translateY(-3px); } }
/* Confetti for a goal reached */
.confetti-burst { position: fixed; inset: 0; z-index: 500; pointer-events: none; overflow: hidden; } .confetti-burst i { position: absolute; left: 50%; top: 45%; width: 9px; height: 14px; border-radius: 2px; animation: burst 1.5s cubic-bezier(0.2, 0.7, 0.3, 1) forwards; } @keyframes burst { from { transform: translate(0, 0) rotate(0); opacity: 1; } 80% { opacity: 1; } to { transform: translate(var(--x), calc(var(--y) + 380px)) rotate(var(--r)); opacity: 0; } }
:root[data-motion="off"] .hero-flip > .hero, :root[data-motion="reduced"] .hero-flip > .hero { transition: none; }

.photo-slot{padding:10px 0;min-width:0}.photo-slot .btn-row{flex-wrap:wrap}.photo-slot .btn{min-height:44px}.photo-status{font-size:.85rem;overflow-wrap:anywhere}.photo-viewer{max-width:min(96vw,900px);max-height:94dvh;padding:12px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:16px}.photo-viewer::backdrop{background:#000b}.photo-viewer img{display:block;max-width:100%;max-height:76dvh;object-fit:contain;margin:12px auto}.photo-slot input[type=file]{display:none}

.keypad-head{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:12px;font-weight:700}.keypad-head .btn,.tx-field-actions .btn{min-height:44px}.tx-field-actions{display:flex;justify-content:flex-end;padding:8px 16px;background:var(--surface);border-top:1px solid var(--line);flex:none}

.goals-discovery{display:inline-grid;place-items:center;vertical-align:middle;width:20px;height:20px;margin-inline-start:4px;flex:none}.goals-discovery i{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);animation:goals-discover 1.7s ease-out 3}.sec-head h2{min-width:0;overflow-wrap:anywhere}.income-modes{margin:12px 0}.income-modes button{display:flex;align-items:center;justify-content:center;gap:6px;white-space:normal;min-width:0}
@keyframes goals-discover{0%,100%{transform:scale(1);box-shadow:0 0 0 3px var(--accent-soft)}45%{transform:scale(1.2);box-shadow:0 0 0 8px transparent}}

.remember-name{display:flex;align-items:center;gap:9px;text-align:left;font-size:.85rem;padding:10px 0;min-height:44px}.remember-name input{width:20px;height:20px;flex:none}.saved-names{text-align:left;margin:6px 0 12px}.saved-names summary{display:flex;align-items:center;gap:8px;cursor:pointer;min-height:44px;font-weight:700}.saved-name-grid{display:flex;flex-wrap:wrap;gap:8px}.saved-name-grid>span{display:flex;align-items:center;background:var(--bg);border-radius:16px;max-width:100%}.saved-name-grid .chip{white-space:normal;overflow-wrap:anywhere}
.flow{isolation:isolate;background:radial-gradient(ellipse at 15% 10%,var(--accent-soft),transparent 60%),var(--bg)}.flow::before,.flow::after{content:"";position:fixed;z-index:-1;pointer-events:none;width:45vmin;height:45vmin;border-radius:50%;filter:blur(65px);opacity:.3;background:var(--accent);animation:flow-aurora 18s ease-in-out infinite alternate}.flow::before{top:5%;left:-15%}.flow::after{bottom:10%;right:-15%;background:var(--warn);animation-delay:-9s}.flow-card{background:color-mix(in srgb,var(--surface) 91%,transparent);backdrop-filter:blur(18px);border:1px solid var(--line);box-shadow:0 24px 90px #0001}.flow .flow-body{animation:flow-arrive .5s ease-out both}.money-scene{position:relative;height:215px;width:min(100%,360px);margin:0 auto 18px;isolation:isolate}.scene-glow{position:absolute;inset:25px;border-radius:50%;background:var(--accent);opacity:.15;filter:blur(32px)}.scene-balance{position:absolute;inset:20px 38px 35px 22px;background:var(--hero-bg);color:var(--hero-ink);border-radius:24px;padding:22px;text-align:left;box-shadow:0 14px 35px #0002;animation:flow-float 7s ease-in-out infinite}.scene-balance small{display:block;font-size:12px}.scene-balance>b{display:block;font-size:34px;font-weight:800;letter-spacing:-1px}.scene-bars{display:flex;align-items:flex-end;height:35px;gap:8px}.scene-bars i{height:35%;width:18%;border-radius:4px;background:currentColor;opacity:.35;transform-origin:bottom;animation:scene-grow 1s ease-out both}.scene-bars i:nth-child(2n){height:65%}.scene-bars i:nth-child(3n){height:100%}.scene-expense,.scene-goal{position:absolute;display:flex;align-items:center;gap:9px;padding:12px;background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:0 10px 25px #0001;font-size:12px;text-align:left;animation:flow-float 6s -2s ease-in-out infinite}.scene-expense{bottom:4px;left:0}.scene-goal{top:2px;right:0}.scene-expense b,.scene-goal b{display:block;font-size:16px}.scene-goal i{display:block;margin-top:4px;width:64%;height:4px;border-radius:4px;background:var(--accent)}.tour-grid{display:grid;gap:12px;text-align:left}.tour-grid article{display:flex;align-items:flex-start;gap:14px;padding:16px;border:1px solid var(--line);border-radius:20px;background:var(--surface);animation:flow-arrive .5s calc(var(--tour-i)*.1s) both}.tour-grid h2{font-size:1rem;margin:0 0 5px}.tour-grid p{margin:0;font-size:.9rem;color:var(--muted)}@keyframes flow-aurora{to{transform:translate(15vw,10vh) scale(1.15)}}@keyframes flow-arrive{from{opacity:0;transform:translateY(12px);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}@keyframes flow-float{50%{transform:translateY(-7px) rotate(.5deg)}}@keyframes scene-grow{from{transform:scaleY(.05)}}

/* Personal dashboard and app-only 0.6 controls. */
.dashboard-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;min-width:0}
.home-widget{min-width:0;max-width:100%;overflow-wrap:anywhere}.home-widget>.hero-flip{margin-bottom:0}
.home-customise{display:flex;justify-content:flex-end;margin-bottom:4px}
.home-editor{position:sticky;top:0;z-index:8;background:var(--surface,var(--card,#fff));border:1px solid var(--line,#dce6e2);border-radius:16px;padding:14px;margin-bottom:16px;box-shadow:0 8px 25px #0001}
.home-editor p{font-size:.85rem;margin:6px 0 12px}.home-editor .btn-row{flex-wrap:wrap}
.editing .home-widget{outline:2px dashed var(--accent,#0d886a);border-radius:16px;padding:10px}.editing .home-widget.widget-hidden{opacity:.55}.editing .home-widget.dragging{outline-style:solid;box-shadow:0 10px 30px #0003}
.widget-controls{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-bottom:14px;background:var(--surface,var(--card,#fff));border-radius:12px;padding:6px;position:relative;z-index:2}.widget-controls b{flex:1;min-width:90px}.widget-controls select{width:auto;max-width:100%;min-height:44px}.widget-controls .btn{padding:8px 10px;min-width:0}.drag-handle{touch-action:none;cursor:grab}.editing .home-widget>:not(.widget-controls){pointer-events:none;user-select:none}
.reminder-notice{display:flex;align-items:flex-start;gap:10px;padding:12px;border:1px solid var(--accent,#0d886a);border-radius:12px;margin:12px 0;background:var(--surface,var(--card,#fff))}.reminder-notice>svg{flex-shrink:0}.reminder-notice p{margin:0 0 8px;font-size:.9rem}.reminder-notice .btn{white-space:normal;text-align:start;max-width:100%}
.tag-field{margin:14px 0;min-width:0}.tag-field details{margin-top:8px}.tag-field summary,.name-suggestions summary{cursor:pointer;min-height:44px;display:flex;gap:6px;align-items:center}.tag-field .chips{margin-top:8px}.tag-library-row{display:flex;align-items:center;gap:6px;margin:8px 0;min-width:0}.tag-library-row>.chip{min-width:0;overflow-wrap:anywhere;white-space:normal;flex:1}.record-tags{padding:0 12px 12px}.tag-field input{width:100%;min-width:0}
.name-suggestions{margin:10px 0}.name-suggestions .chip-scroll{padding:8px 0}.release-notes details{border-bottom:1px solid var(--line,#dce6e2);padding:12px 0}.release-notes summary{cursor:pointer;min-height:44px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-weight:700}.release-notes li{margin:10px 0;line-height:1.5}.handoff-icon{display:flex;justify-content:center;margin:24px}
[data-act=delete-photos]{max-width:100%;min-width:0;white-space:normal;overflow-wrap:anywhere;line-height:1.35;text-align:start;justify-content:flex-start}[data-act=delete-photos] svg{flex-shrink:0}
@media(min-width:600px){.dashboard-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.home-widget{grid-column:1/-1}.home-widget.widget-compact{grid-column:auto}.home-widget.widget-compact .hero-tiles{flex-wrap:wrap}.home-widget.widget-compact .wallets{grid-template-columns:1fr}}
.home-widget.widget-compact .hero{padding:16px}.home-widget.widget-compact .hero>b{font-size:32px}.home-widget.widget-compact .hero-tiles>div{padding:8px}.home-widget.widget-compact .mini-bars{height:36px}.home-widget.widget-compact .list .sw-front{padding-top:10px;padding-bottom:10px}.home-widget.widget-compact .sec-head{margin-top:8px;margin-bottom:8px}
.editing .home-widget{touch-action:pan-y}.editing .drag-handle{touch-action:none}.editing .home-widget :not(input):not(textarea){-webkit-user-select:none;user-select:none}

/* Dashboard sizes and selection editing have their own scope; install animations stay independent. */
.dashboard-grid{grid-template-columns:repeat(6,minmax(0,1fr));align-items:start;gap:16px}.dashboard-grid>.home-widget{grid-column:span 6;min-width:0;position:relative}.dashboard-grid>.widget-small{grid-column:span 3}.dashboard-grid>.widget-medium{grid-column:span 4}.dashboard-grid>.widget-full{grid-column:span 6}
.widget-summary{background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius);padding:16px;min-height:150px;display:flex;flex-direction:column;align-items:flex-start;gap:12px;box-shadow:var(--shadow);overflow-wrap:anywhere}.widget-summary>b{font-size:clamp(22px,5vw,32px);line-height:1.15;letter-spacing:-.04em;max-width:100%}.summary-label{font-size:12px;display:flex;align-items:center;gap:5px;line-height:1.3}.summary-label .i{flex-shrink:0}.widget-summary .link{display:flex;align-items:center;justify-content:space-between;gap:4px;min-height:44px;max-width:100%;margin-top:auto}.balance-summary{background:var(--hero-bg);color:var(--hero-ink);border:0}.balance-summary small{font-size:11px;opacity:.85}
.widget-medium .hero{padding:16px}.widget-medium .hero>b{font-size:32px}.widget-medium .hero-tiles{grid-template-columns:minmax(0,1fr);gap:6px}.widget-medium .hero-tiles>div{padding:7px 10px}.widget-medium .wallets{grid-template-columns:minmax(0,1fr)}.widget-medium .hero-tiles .k{flex-wrap:wrap}.widget-medium .list .item{gap:8px;padding:12px 10px}.widget-medium .item .a{font-size:13px}.widget-medium .ci{flex-shrink:0}
.home-editor{top:0;padding:12px;max-width:100%}.home-editor-heading{display:flex;align-items:center;justify-content:space-between}.selected-widget-name{font-size:.85rem;color:var(--muted);margin:6px 0}.selected-widget-name strong{color:var(--accent-2)}.widget-toolbar{display:flex;align-items:flex-end;flex-wrap:wrap;gap:6px}.widget-toolbar .btn{padding:8px 10px;font-size:12px;min-height:44px;white-space:normal}.home-size-label{font-size:11px;color:var(--muted);display:flex;flex-direction:column;gap:2px;max-width:100%}.home-size-label select{width:auto;max-width:100%;min-height:44px}.editor-save-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;padding-top:8px;border-top:1px solid var(--line)}.editor-save-row .btn{font-size:12px;padding:8px 10px}.select-widget-hint{display:flex;align-items:center;gap:8px;color:var(--muted);margin:8px 0}.editing .home-widget{outline:0;border:2px solid var(--line);padding:40px 6px 6px;border-radius:18px;isolation:isolate;transition:filter .2s,opacity .2s}.editing .home-widget.widget-muted{filter:grayscale(1);opacity:.5}.editing .home-widget.widget-selected{filter:none;opacity:1;border-color:var(--accent);animation:widget-focus-pulse 2s ease-in-out infinite}.editing .home-widget.widget-hidden .widget-content{opacity:.3}.editing .home-widget.widget-hidden.widget-selected{opacity:1}.editing .widget-content{pointer-events:none;user-select:none}.editing .home-widget>.widget-select{pointer-events:auto;position:absolute;inset:0;z-index:1;display:block;text-align:start;background:transparent;border:0;border-radius:16px;cursor:pointer;padding:0}.widget-select>span{position:absolute;left:10px;right:42px;top:10px;font-size:12px;font-weight:800;color:var(--ink);line-height:1.2;overflow-wrap:anywhere}.editing .home-widget>.widget-controls{pointer-events:auto;position:absolute;top:0;right:0;z-index:2;background:transparent;padding:0;margin:0;min-width:0}.widget-controls .ab-btn{width:44px;height:44px}.widget-toolbar .i{flex-shrink:0}.editing .widget-selected .widget-select>span{color:var(--accent-2)}
@keyframes widget-focus-pulse{50%{box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 24%,transparent),0 8px 22px color-mix(in srgb,var(--accent) 16%,transparent)}}
.edit-demo{position:relative;display:flex;justify-content:center;align-items:center;gap:12px;height:155px;border-radius:20px;background:var(--bg);margin:5px 0 20px;overflow:hidden}.edit-demo-card{width:68px;height:88px;display:grid;place-items:center;background:var(--surface);border:2px solid var(--line);border-radius:16px;filter:grayscale(1);opacity:.4}.edit-demo-card.active{filter:none;opacity:1;border-color:var(--accent);color:var(--accent);animation:widget-focus-pulse 2s infinite;position:relative}.demo-arrows{position:absolute;bottom:5px;font-size:18px;font-weight:900}.edit-demo-finger{position:absolute;left:50%;top:95px;color:var(--accent);animation:editor-teach 4s ease-in-out infinite}.edit-demo-finger .i{stroke-width:2.5}@keyframes editor-teach{0%,100%{transform:translate(0,16px);opacity:0}20%,40%{transform:translate(0,-24px);opacity:1}65%{transform:translate(45px,-24px);opacity:1}85%{transform:translate(0,-24px);opacity:0}}
.row-tags{display:flex;gap:4px;flex-wrap:wrap;align-items:center;margin-top:5px;max-width:100%;font-size:10px;font-weight:650;color:var(--accent-2)}.row-tag{display:inline-flex;align-items:center;gap:3px;max-width:100%;border-radius:6px;background:var(--accent-soft);padding:3px 5px;line-height:1.25;overflow-wrap:anywhere;white-space:normal}.row-tag .i{flex-shrink:0;width:12px;height:12px}.item .mid .row-tags{font-size:10px}.row-tag .i{vertical-align:middle}
@media(min-width:600px){.dashboard-grid{grid-template-columns:repeat(12,minmax(0,1fr))}.dashboard-grid>.widget-small{grid-column:span 4}.dashboard-grid>.widget-medium{grid-column:span 6}.dashboard-grid>.widget-full{grid-column:span 12}.widget-medium .hero-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.widget-summary{min-height:160px}.home-editor .widget-toolbar{gap:10px}}
@media(prefers-reduced-motion:reduce){:root:not([data-motion=full]) .widget-selected,:root:not([data-motion=full]) .edit-demo *{animation:none!important;transition:none!important}}
:root[data-motion=off] .widget-selected,:root[data-motion=reduced] .widget-selected,:root[data-motion=off] .edit-demo *,:root[data-motion=reduced] .edit-demo *{animation:none!important;transition:none!important}
.install-guide-player{margin:16px auto;max-width:600px;min-width:0}.install-guide-player video{display:block;width:100%;aspect-ratio:6/7;max-height:410px;object-fit:contain;border-radius:20px;background:#edf6f3;border:1px solid var(--line)}.install-guide-player figcaption{margin:8px 0;color:var(--muted);font-size:12px;line-height:1.5}.install-guide-steps{padding-inline-start:22px;font-size:.9rem;line-height:1.5}.install-guide-steps li{margin:8px 0}.install-guide-tabs{margin-top:12px}.install-guide-tabs button{min-width:0;white-space:normal}.install-guide-variant{font-size:.85rem;line-height:1.5;color:var(--muted)}
.home-widget{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.home-widget input,.home-widget textarea{-webkit-user-select:text;user-select:text}

/* Home editor v2: direct manipulation, compact chrome, and a two-column phone grid. */
.dash-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}.dash-grid>.dash-widget{grid-column:span 2;position:relative;min-width:0;max-width:100%;border-radius:var(--radius);overflow-wrap:anywhere}.dash-grid>.dash-small{grid-column:span 1}.dash-grid>.dash-medium,.dash-grid>.dash-full{grid-column:span 2}.dash-content{min-width:0}.dash-content>.sec-head{margin-top:0}.dash-content>.hero-flip{margin:0}.dash-content .wallets{grid-template-columns:repeat(2,minmax(0,1fr))}.dash-medium .wallets{grid-template-columns:repeat(2,minmax(0,1fr))}.dash-medium .wc{min-height:96px;padding:10px}.dash-medium .wc b{font-size:16px}.dash-medium .wc span{font-size:12px}.dash-medium .hero{padding:16px}.dash-medium .hero>b{font-size:32px;margin-bottom:10px}.dash-medium .hero-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.dash-medium .hero-tiles>div{padding:8px}.dash-medium .hero-tiles .k{flex-wrap:wrap;font-size:11px}.dash-medium .hero-tiles b{font-size:16px}.dash-medium .hero-flip{display:block;cursor:default}.dash-see-all{display:block;margin:0 0 4px}.dash-medium .bgrid,.dash-medium .ggrid{grid-template-columns:repeat(2,minmax(0,1fr))}
.dash-summary{display:flex;flex-direction:column;gap:12px;align-items:flex-start;min-height:150px;padding:15px;background:var(--surface);color:var(--ink);box-shadow:var(--shadow);border-radius:var(--radius);border:1px solid var(--line)}.dash-summary>span{display:flex;align-items:center;gap:5px;font-size:12px;line-height:1.3}.dash-summary>span .i{flex-shrink:0}.dash-summary>strong{font-size:clamp(18px,5vw,28px);letter-spacing:-.035em;line-height:1.2;max-width:100%}.dash-summary>small{font-size:11px}.dash-summary .link{min-height:44px;font-size:12px;display:flex;align-items:center;gap:5px;margin-top:auto}.dash-summary-balance{background:var(--hero-bg);color:var(--hero-ink);border:0}
.dash-editbar{position:sticky;top:0;z-index:12;display:flex;align-items:center;justify-content:space-between;gap:6px;min-height:58px;padding:6px;margin:0 -6px 10px;border:1px solid var(--line);border-radius:16px;background:var(--surface);box-shadow:var(--shadow)}.dash-editbar>.btn{min-height:44px;padding:8px 10px;font-size:13px;min-width:0}.dash-add-cards{display:flex;gap:5px;align-items:center}.dash-hint{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--muted);line-height:1.4;margin:0 0 12px}.dash-hint span{flex:1}.dash-hint .ab-btn{flex-shrink:0;width:44px;height:44px}
.dashboard-editing>.dash-widget{border:1.5px solid color-mix(in srgb,var(--accent) 35%,var(--line));padding:38px 0 0;outline:none;isolation:isolate}.dashboard-editing>.dash-widget[data-selected=true]{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}.dashboard-editing .dash-content{pointer-events:none;user-select:none;animation:dash-jiggle .34s ease-in-out infinite alternate;transform-origin:center center}.dashboard-editing>.dash-widget:nth-child(2n) .dash-content{animation-delay:-.21s;animation-direction:alternate-reverse}.dashboard-editing>.dash-widget:nth-child(3n) .dash-content{animation-duration:.39s}.dash-drag{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:inherit;background:transparent;cursor:grab;z-index:1;touch-action:none;padding:0}.dash-drag:active{cursor:grabbing}.dash-remove,.dash-resize{position:absolute;z-index:3;width:44px;height:44px;min-width:44px;min-height:44px;display:grid;place-items:center;background:var(--surface);color:var(--accent-2);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:50%;padding:0;touch-action:none;cursor:pointer}.dash-remove{top:-6px;left:-6px}.dash-resize{bottom:-5px;right:-5px;cursor:nwse-resize}.dash-resize>.i{transform:none}.dash-size-badge{position:absolute;top:8px;right:8px;z-index:2;pointer-events:none;background:var(--surface);color:var(--muted);border:1px solid var(--line);padding:3px 7px;font-size:10px;font-weight:700;border-radius:8px}.dashboard-editing{padding:8px 4px 16px;gap:20px 16px}.dashboard-editing .dash-content .hero-flip{pointer-events:none}.dash-placeholder{opacity:.28!important;outline:2px dashed var(--accent)!important;outline-offset:2px}.dash-placeholder .dash-content{animation:none}.dash-ghost{border:2px solid var(--accent);border-radius:var(--radius);box-shadow:0 18px 50px #0004;opacity:.97;transform-origin:center;transition:none!important}.dash-ghost .dash-content{animation:none!important}.dash-ghost .dash-drag,.dash-ghost .dash-remove,.dash-ghost .dash-resize{display:none}.dash-moving>.dash-widget:not(.dash-placeholder){opacity:.88}
@keyframes dash-jiggle{from{transform:rotate(-.3deg)}to{transform:rotate(.3deg)}}
.dash-size-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.dash-size-choice{min-width:0;display:flex;flex-direction:column;align-items:stretch;gap:10px;text-align:center;padding:10px 6px;border:2px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);min-height:155px;cursor:pointer}.dash-size-choice[aria-pressed=true]{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-2)}.dash-size-choice strong{font-size:14px;overflow-wrap:anywhere}.dash-size-choice small{font-size:11px;line-height:1.4;color:var(--muted);overflow-wrap:anywhere}.dash-size-picture{height:64px;position:relative;border:1px dashed var(--line);border-radius:8px;background:var(--bg);display:block}.dash-size-picture i{position:absolute;top:5px;left:5px;background:var(--accent);border-radius:5px;opacity:.8}.dash-size-picture.small i{width:calc(50% - 8px);height:24px}.dash-size-picture.medium i{width:calc(100% - 10px);height:24px}.dash-size-picture.full i{width:calc(100% - 10px);height:52px}
@media(min-width:600px){.dash-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.dash-grid>.dash-small{grid-column:span 1}.dash-grid>.dash-medium{grid-column:span 2}.dash-grid>.dash-full{grid-column:span 4}.dash-full .wallets{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}.dash-editbar{justify-content:flex-end}.dash-editbar>[data-dash-cancel]{margin-right:auto}.dash-editbar>.btn{font-size:14px}}
@media(prefers-reduced-motion:reduce){:root:not([data-motion=full]) .dashboard-editing .dash-content{animation:none!important}}
:root[data-motion=off] .dashboard-editing .dash-content,:root[data-motion=reduced] .dashboard-editing .dash-content{animation:none!important}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* Money entry: stable fields, explicit actions, and no sideways scrollers. */
.entry-add-menu{display:grid;gap:8px}.entry-add-row{display:flex;align-items:center;gap:12px;min-height:76px;width:100%;padding:10px 12px;text-align:start;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);color:var(--ink)}.entry-add-row>span:not(.ci){flex:1;min-width:0}.entry-add-row b,.entry-add-row small{display:block;overflow-wrap:anywhere}.entry-add-row b{font-size:16px}.entry-add-row small{font-size:12px;margin-top:4px;color:var(--muted);line-height:1.4}.entry-add-row>.i{flex-shrink:0}.entry-add-row:active{background:var(--accent-soft)}
.sheet.entry-composer .sheet-body{display:flex;flex-direction:column;min-height:0;overflow:hidden}.entry-head{gap:6px;flex:none}.entry-head h2{font-size:17px;flex:1;min-width:0;line-height:1.3;overflow-wrap:anywhere}.entry-change{font-size:12px;white-space:normal;max-width:110px;min-height:44px;padding:6px 8px}.entry-scroll{padding:0 18px 16px;scroll-padding:16px;overflow-x:hidden}.entry-scroll:empty{min-height:0}.entry-draft-status:empty{display:none}.entry-draft-status{line-height:1.5;font-size:12px}.entry-amount-panel{background:var(--accent-soft);color:var(--ink);border-radius:var(--radius);padding:12px 14px 14px;text-align:center;min-width:0}.entry-amount-context{display:flex;justify-content:space-between;align-items:center;gap:8px;min-width:0}.entry-currency{flex:none;font-size:12px;font-weight:800;padding:8px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}.entry-wallet{min-height:44px;max-width:100%;display:flex;align-items:center;gap:8px;text-align:start;padding:6px 8px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);min-width:0}.entry-wallet>span:not(.ci){min-width:0;overflow-wrap:anywhere;font-weight:700}.entry-wallet small{display:block;font-size:11px;color:var(--muted)}.entry-wallet>.i,.entry-wallet>.ci{flex-shrink:0}.entry-amount-panel .amt-display{width:100%;padding:8px 0;margin:4px 0 0;gap:8px;background:transparent;min-width:0;flex-wrap:wrap}.entry-amount-panel .amt-display .cur{font-size:24px;padding:0;border:0;box-shadow:none;background:transparent}.entry-amount-panel .amt-display .val{font-size:clamp(32px,10vw,54px);line-height:1.2;overflow-wrap:anywhere;min-width:0}.entry-amount-panel>small{font-size:11px;color:var(--muted)}.entry-amount-panel .amt-display.small .val{font-size:30px}.entry-amount-panel .amt-display.on{outline:2px solid var(--accent);outline-offset:2px;border-radius:12px}.entry-label{display:block;font-size:12px;font-weight:700;margin:12px 0 6px;color:var(--muted)}.entry-wallet-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:12px 0}.entry-wallet-options .chip{white-space:normal;min-width:0;justify-content:flex-start;text-align:start;min-height:52px}.entry-wallet-options .chip>span:not(.ci){min-width:0;overflow-wrap:anywhere}.entry-wallet-options small{display:block;font-size:11px;color:var(--muted)}.entry-check{display:flex;align-items:center;gap:9px;font-size:13px;min-height:48px;text-align:start;line-height:1.4}.entry-check input{flex:none}.entry-type-picker{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}.entry-name{margin:16px 0 6px}.entry-name>label:first-child{font-size:12px;font-weight:700;color:var(--muted)}.entry-name .desc{text-align:start;font-size:17px;min-height:50px;width:100%;padding:8px 12px;border:1px solid var(--line);border-radius:12px;margin-top:6px}.entry-name .remember-name{font-size:12px;line-height:1.4;min-height:48px}.entry-name .remember-name input{width:20px;height:20px}.entry-name .saved-names{font-size:13px}.entry-name .saved-name-grid .chip{min-height:44px}.entry-cat-suggestions{grid-template-columns:repeat(4,minmax(0,1fr));padding:0;gap:5px;margin:0}.entry-category .catchip{min-height:84px;padding:6px 2px;font-size:11px;min-width:0}.entry-category .catchip>span:not(.ci){display:block;overflow:visible;-webkit-line-clamp:unset;line-height:1.3;overflow-wrap:anywhere;hyphens:auto}.entry-category .catchip small{display:block;font-size:10px;color:var(--muted)}.entry-allcats{padding:8px 0;border-bottom:1px solid var(--line)}.entry-allcats .cats{padding:0;grid-template-columns:repeat(4,minmax(0,1fr))}.entry-date{margin:12px 0}.entry-date-button{min-height:56px;width:100%;display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);padding:10px 12px;text-align:start}.entry-date-button>span{flex:1;font-size:11px;color:var(--muted)}.entry-date-button b{display:block;font-size:14px;color:var(--ink);margin-top:3px}.entry-date-options{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}.entry-date-options .f{flex:1;min-width:160px}.entry-details{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.entry-detail{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;min-height:68px;min-width:0;padding:8px 4px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);font-size:12px;overflow-wrap:anywhere}.entry-detail.populated,.entry-detail[aria-expanded=true]{border-color:var(--accent);color:var(--accent-2);background:var(--accent-soft)}.entry-detail small{font-weight:800}.entry-detail-content{margin-top:12px;min-width:0}.entry-detail-content textarea{width:100%;min-height:84px;padding:12px;font-size:16px;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:12px}.entry-detail-content .photo-slot{padding:0}.entry-tag-preview,.entry-note-preview{font-size:12px;line-height:1.5;overflow-wrap:anywhere;margin:10px 0;color:var(--muted)}.entry-tag-preview>.i,.entry-note-preview>.i{vertical-align:middle}.entry-more{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}.entry-more summary{min-height:44px;display:flex;align-items:center;cursor:pointer}.entry-more .quickline input{margin:0}.entry-shortcut-options>b{font-size:13px}.entry-alert{padding:12px;border:1px solid var(--accent);background:var(--accent-soft);border-radius:14px;margin:10px 0;font-size:13px;line-height:1.5;color:var(--ink);overflow-wrap:anywhere}.entry-alert h3{font-size:16px;margin:0 0 6px}.entry-alert p{margin:0 0 8px}.entry-alert .btn-row{flex-wrap:wrap}.entry-alert .btn{white-space:normal;text-align:start}.entry-error{padding:10px 0;font-size:13px;line-height:1.5}.entry-footer{flex:none;display:flex;align-items:center;gap:8px;padding:10px 16px calc(10px + var(--safe-b));border-top:1px solid var(--line);background:var(--surface)}.entry-footer .entry-save{flex:1;min-width:0;min-height:48px;font-size:15px;white-space:normal;line-height:1.3;padding:10px}.entry-footer .tx-field-actions{padding:0;border:0;flex:none}.entry-footer .tx-field-actions .btn{padding:8px;white-space:normal;font-size:12px}.entry-composer .keypad{padding:6px 12px calc(8px + var(--safe-b));gap:5px}.entry-composer .keypad .key{height:44px;font-size:23px}.entry-composer:has(.keypad:not([hidden])) .entry-footer{padding-bottom:8px}.entry-composer .keypad-head{font-size:12px}.entry-composer .keypad-head .btn{font-size:12px;padding:6px 9px}.entry-transfer-wallets{display:grid;grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr);gap:6px;align-items:end;margin-bottom:12px}.entry-transfer-wallets .entry-wallet{width:100%}.entry-transfer-wallets .entry-wallet>.ci{display:none}.entry-transfer-wallets .entry-label{font-size:11px}.entry-receipt{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:7px;line-height:1.5;margin:6px 0 12px}
@media(max-width:359px){.entry-details{grid-template-columns:repeat(2,minmax(0,1fr))}.entry-cat-suggestions,.entry-allcats .cats{grid-template-columns:repeat(2,minmax(0,1fr))}.entry-head h2{font-size:15px}.entry-change{max-width:85px}.entry-scroll{padding-inline:12px}}
@media(min-width:600px){.sheet.entry-composer{width:560px;max-width:calc(100vw - 40px);height: min(860px,calc(100dvh - 40px));max-height:calc(100dvh - 40px)}.entry-scroll{padding-inline:24px}.entry-composer .entry-amount-panel .amt-display .val{font-size:54px}}
:root[data-skin] .entry-composer .entry-amount-panel,:root[data-skin] .entry-composer .entry-wallet,:root[data-skin] .entry-composer .desc{animation:none!important;transition:border-color .15s}.entry-composer .entry-name input{min-width:0}.entry-composer .entry-draft-status,.entry-composer .entry-detail-content{max-width:100%;overflow-wrap:anywhere}
@media(max-width:599px){.sheet.entry-composer{height:var(--entry-height,100dvh);max-height:var(--entry-height,100dvh);top:var(--entry-top,0px);bottom:auto;margin:0}.entry-composer .entry-scroll{overscroll-behavior:contain}.entry-composer .sheet-grab{display:none}}
@media(min-width:600px){.sheet.entry-composer{height:min(860px,calc(var(--entry-height,100dvh) - 40px));max-height:calc(var(--entry-height,100dvh) - 40px);top:calc(var(--entry-top,0px) + 20px);bottom:auto;margin:0 auto}}

/* Receipt review is an independent modal; the transaction draft remains underneath. */
.entry-scan{width:100%;min-height:48px;margin:12px 0 0;justify-content:center}.receipt-dialog{padding:0;border:1px solid var(--line);border-radius:20px;background:var(--surface);color:var(--ink);width:min(560px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:hidden}.receipt-dialog::backdrop{background:#070b14b8}.receipt-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line)}.receipt-head h2{font-size:18px;margin:0;min-width:0;overflow-wrap:anywhere}.receipt-body{padding:16px;overflow-y:auto;max-height:calc(100dvh - 100px);line-height:1.5}.receipt-body>p{font-size:14px;margin:0 0 16px}.receipt-body .btn-row{flex-wrap:wrap}.receipt-body .btn{white-space:normal;line-height:1.4;min-height:48px}.receipt-body input:not([type=checkbox]):not([type=file]),.receipt-body select{width:100%;min-width:0;min-height:48px;padding:10px;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:12px;font-size:16px}.receipt-body .f{margin-top:14px}.receipt-body pre{white-space:pre-wrap;overflow-wrap:anywhere;max-height:220px;overflow-y:auto;font-size:12px}.receipt-body summary{cursor:pointer;min-height:44px;display:flex;align-items:center}.receipt-preview{width:100%;height:160px;object-fit:contain;background:#fff;border-radius:12px;margin-bottom:12px}.receipt-other{margin-top:20px}.receipt-body progress{width:100%;height:18px;accent-color:var(--accent)}.receipt-body .entry-check{overflow-wrap:anywhere}.receipt-status{font-size:13px;color:var(--muted)}
.safe-card{padding:18px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);min-width:0}.safe-card .sec-head{margin:0 0 8px}.safe-card h2{display:flex;gap:8px;align-items:center;font-size:17px;min-width:0;overflow-wrap:anywhere}.safe-card>small{font-size:12px;color:var(--muted)}.safe-number{display:block;font-size:clamp(26px,7vw,38px);line-height:1.2;margin:10px 0;letter-spacing:-.035em;overflow-wrap:anywhere}.safe-card p{font-size:12px;line-height:1.5;color:var(--muted);margin:8px 0 12px}.safe-card .btn{min-height:44px;white-space:normal}.safe-details .facts dt{max-width:70%;font-size:13px}.safe-details .facts dd{white-space:normal;min-width:0;font-size:14px}.safe-details summary{display:flex;align-items:center;min-height:44px;cursor:pointer;overflow-wrap:anywhere}.safe-details>p{line-height:1.5;font-size:13px}.safe-notice{display:flex;align-items:flex-start;gap:8px;padding:10px;border-radius:12px;border:1px solid var(--line);background:var(--accent-soft);font-size:12px;line-height:1.5;overflow-wrap:anywhere}.safe-notice>.i{flex-shrink:0;margin-top:2px}.safe-commitments{list-style:none;margin:8px 0;padding:0}.safe-commitments li{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding:10px 0;font-size:13px}.safe-commitments li>span{min-width:0;overflow-wrap:anywhere}.safe-commitments small{display:block;color:var(--muted);margin-top:4px}.safe-commitments b{flex-shrink:0}.safe-sheet fieldset{border:1px solid var(--line);border-radius:14px;padding:10px;min-width:0}.safe-sheet legend{font-size:14px;font-weight:700}.safe-sheet .entry-check{overflow-wrap:anywhere}.safe-sheet .entry-check .ci{flex-shrink:0}.safe-sheet .entry-check input{accent-color:var(--accent)}.dash-medium .safe-card{padding:14px}.safe-card .bad,.safe-details .bad{color:var(--bad)}
.receipt-dialog input[type=checkbox]{accent-color:var(--accent)}
.receipt-dialog{top:calc(var(--receipt-top,0px) + 12px);bottom:auto;margin:0 auto;max-height:calc(var(--receipt-height,100dvh) - 24px)}.receipt-body{max-height:calc(var(--receipt-height,100dvh) - 100px)}.receipt-head h2{flex:1}.receipt-done{min-height:44px;padding:6px 8px;font-size:12px;white-space:normal}
.receipt-dialog[open]{display:flex;flex-direction:column}.receipt-head{flex:none}.receipt-body{flex:1;min-height:0}

/* Receipt recovery stays within the photo; ordinary page scrolling remains untouched. */
.receipt-focus-stage{position:relative;width:min(100%,calc(52dvh * var(--receipt-ratio)));margin:0 auto 12px;touch-action:none;user-select:none;-webkit-user-select:none;overflow:hidden;border:1px solid var(--line);border-radius:12px;cursor:crosshair}
.receipt-focus-stage img{display:block;width:100%;height:auto;pointer-events:none}.receipt-focus-box{position:absolute;border:3px solid var(--accent);box-shadow:0 0 0 2000px #0007;pointer-events:none;background:transparent}.receipt-candidates{margin:12px 0;padding:12px;border:1px solid var(--line);border-radius:12px;min-width:0}.receipt-candidates legend{font-size:14px;max-width:100%;overflow-wrap:anywhere}.receipt-candidates p{margin:0 0 10px}.receipt-candidates>div{display:flex;flex-wrap:wrap;gap:8px}.receipt-candidates .btn{min-height:48px;min-width:72px;flex:1 0 72px;font-variant-numeric:tabular-nums}.receipt-body>[data-receipt=focus]{margin:0 0 16px}

.install-guide-media{position:relative}.install-guide-play{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);width:64px;height:64px;min-height:44px;border:0;border-radius:50%;background:var(--accent);color:var(--on-accent,#fff);box-shadow:0 4px 20px #0004;font-size:26px;cursor:pointer}.install-guide-play:focus-visible{outline:3px solid var(--ink);outline-offset:4px}.receipt-setting p{margin:8px 0 0}.receipt-setting input[role=switch]{min-width:24px;min-height:24px;accent-color:var(--accent)}
/* Daily-use controls remain touch sized and wrap at phone widths. */
.entry-pins{border:1px solid var(--line);border-radius:16px;padding:12px;margin:0 0 12px}.entry-pins>div{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr));gap:8px;margin-top:8px}.entry-pins .btn{min-width:0;justify-content:flex-start}.entry-pins span{overflow-wrap:anywhere}.entry-pins small{display:block}.saved-name-grid>span{display:flex;align-items:center;min-width:0}.entry-repeat{margin:12px 0}.sync-attention{display:flex;align-items:center;gap:6px;min-height:44px;max-width:170px;padding:6px 10px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:14px;font-size:11px;text-align:start}.sync-attention span{overflow-wrap:anywhere}.sync-record{display:flex;gap:10px;padding:10px 0}.sync-record span{min-width:0;overflow-wrap:anywhere}.sync-record small{display:block;color:var(--muted)}.more-group>summary,.account-section>summary{list-style:none;cursor:pointer;min-height:48px;padding:8px 0}.more-group>summary:after,.account-section>summary:after{content:'⌄';float:inline-end}.more-group>summary b{display:block}.more-group>summary small{display:block;color:var(--muted);font-size:12px;margin-top:4px}.more-group>summary::-webkit-details-marker,.account-section>summary::-webkit-details-marker{display:none}.more-group .mrow{min-width:0}.more-group .mrow span{overflow-wrap:anywhere}.account-section>div{margin-top:12px}.taxonomy-dialog{width:min(480px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:0;border:1px solid var(--line);border-radius:20px;background:var(--surface);color:var(--ink);overflow:auto}.taxonomy-dialog::backdrop{background:#0008}.taxonomy-style fieldset{min-width:0;border:0;padding:0;margin:12px 0}.taxonomy-icons{display:grid;grid-template-columns:repeat(auto-fit,minmax(44px,1fr));gap:4px}.taxonomy-icons button{min-width:44px;min-height:44px}.taxonomy-icons button.on{background:var(--mint);outline:2px solid var(--accent)}.taxonomy-colors{display:flex;flex-wrap:wrap;gap:8px}.taxonomy-preview{padding:10px 0}.taxonomy-dialog input,.taxonomy-dialog select{width:100%;min-height:44px;font-size:16px;color:var(--ink);background:var(--bg)}.sw-act.duplicate{background:var(--accent);color:var(--on-accent,#fff)}.sw-act span{white-space:normal;overflow-wrap:anywhere}.sw-r{max-width:calc(100vw - 48px)}.sw-r .sw-act{min-width:0;flex:1 1 76px}
@media(max-width:599px){.appbar:has(.sync-attention) .home b{font-size:25px}.sync-attention{max-width:112px;font-size:10px;padding:5px}.sync-attention .i{flex:none}}

/* Progressive entry groups: native disclosure keeps inputs and their values alive. */
.entry-group{border-top:1px solid var(--line);min-width:0;margin:0}
.entry-group>summary{display:flex;align-items:center;gap:12px;list-style:none;min-height:72px;padding:12px 0;cursor:pointer}
.entry-group>summary::-webkit-details-marker{display:none}
.entry-group>summary>.ci,.entry-group>summary>svg{flex:none}
.entry-group>summary>svg:last-child{transition:transform .18s ease}
.entry-group[open]>summary>svg:last-child{transform:rotate(180deg)}
.entry-group-copy{display:block;flex:1;min-width:0;overflow-wrap:anywhere}
.entry-group-copy b,.entry-group-copy small{display:block}
.entry-group-copy b{font-size:.95rem}.entry-group-copy small{font-size:.8rem;color:var(--muted);margin-top:3px}
.entry-group-body{padding:0 0 18px;min-width:0}
.entry-group-body .entry-detail-content{padding-inline:0}
.entry-group-body .entry-wallet-options{display:flex;flex-wrap:wrap;gap:8px}
.entry-group-body .entry-wallet-options .chip{max-width:100%;white-space:normal;text-align:start}
.entry-group-body .entry-wallet-options .chip>span,.entry-group-body .entry-wallet>span{min-width:0;overflow-wrap:anywhere;white-space:normal}
.entry-group-body .entry-wallet{max-width:100%;min-height:44px}
.entry-group-body .entry-cat-suggestions,.entry-group-body .cats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.entry-group-body .catchip{min-width:0;white-space:normal;overflow-wrap:anywhere}
.entry-group-body .f select,.entry-group-body .f input,.entry-group-body textarea{width:100%;min-width:0;max-width:100%;box-sizing:border-box}
.entry-group-body .entry-more{margin-top:12px}
@media(min-width:600px){.entry-group-body .cats{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.entry-group>summary>svg:last-child{transition:none}}
.creator-link{display:inline-flex;align-items:center;min-height:44px;max-width:100%;overflow-wrap:anywhere}

/* Shared control sizing by role. Touch surfaces get more room; labels may wrap. */
:root{--control-height:48px;--control-compact-height:44px;--control-icon-size:44px;--control-icon:20px;--control-gap:8px;--control-padding:16px;--control-radius:calc(14px * var(--rk));--control-font:16px}
@media(max-width:599px),(pointer:coarse){:root{--control-height:52px;--control-icon-size:48px}}
.btn:not(.btn-sm):not(.sm):not(.big){min-height:var(--control-height);padding:10px var(--control-padding);font-size:var(--control-font);border-radius:var(--control-radius)}
.btn{gap:var(--control-gap);max-width:100%;white-space:normal;overflow-wrap:anywhere;text-align:center;line-height:1.3;box-sizing:border-box}
.btn>.i{width:var(--control-icon);height:var(--control-icon);flex:none}
.btn.btn-sm,.btn.sm{min-height:var(--control-compact-height)}
.ab-btn{width:var(--control-icon-size);height:var(--control-icon-size);min-width:var(--control-icon-size);min-height:var(--control-icon-size);flex-shrink:0}
.f input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]),.f select{min-height:var(--control-height);border-radius:var(--control-radius);box-sizing:border-box;max-width:100%}
.action-stack{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--control-gap);align-items:stretch}
.action-stack>.btn,.entry-group-body>.entry-scan{width:100%;min-height:var(--control-height);padding:10px var(--control-padding);border-radius:var(--control-radius);font-size:var(--control-font)}
.photo-slot .action-stack{margin-top:0}
.entry-group-body .photo-slot{margin-top:12px}
.entry-group-body>.entry-scan{margin-top:0}
.entry-footer .entry-save{min-height:var(--control-height)}

/* Hide scrollbar chrome everywhere without disabling any scrolling mechanism. */
*,*::before,*::after{scrollbar-width:none}
*::-webkit-scrollbar{display:none;width:0;height:0}

.dash-editbar{flex-wrap:wrap;gap:6px}.dash-editbar>.btn{flex:1 1 auto;min-width:0;white-space:normal;min-height:44px}.custom-theme-editor .grid2{grid-template-columns:repeat(2,minmax(0,1fr))}.custom-theme-editor select{width:100%;min-height:48px;min-width:0}

.schedule-options{min-width:0}.schedule-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}.schedule-days label{position:relative;min-width:0}.schedule-days input{position:absolute;opacity:0;width:100%;height:100%;margin:0}.schedule-days span{font-size:12px;display:grid;place-items:center;min-height:44px;border:1px solid var(--line);border-radius:calc(10px * var(--rk));background:var(--surface)}.schedule-days input:checked+span{background:var(--accent);color:var(--accent-ink)}.schedule-days input:focus-visible+span{outline:3px solid var(--accent)}[data-schedule-list]{margin-top:10px}.sentence-entry-mode>:not(.sentence-entry):not(.entry-error){display:none!important}.sentence-preview{display:grid;gap:10px;padding:18px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}.entry-sentence-switch{width:100%;margin-bottom:10px}.schedule-options input[type=date]{min-width:0;max-width:100%}

.fab,.rail-add{position:relative;touch-action:manipulation;-webkit-user-select:none;user-select:none}.scan-holding{animation:none!important}.scan-hold-ring{position:absolute;inset:-7px;width:calc(100% + 14px);height:calc(100% + 14px);pointer-events:none;overflow:visible;transform:rotate(-90deg)}.scan-hold-ring circle{fill:none;stroke:var(--accent);stroke-width:4;stroke-dasharray:201.1;stroke-dashoffset:201.1;animation:scan-hold-progress 1s linear forwards}.scan-hold-icon{position:absolute;inset:0;display:grid;place-items:center;background:var(--fab-bg);border-radius:inherit;pointer-events:none}.scan-armed>.i{visibility:hidden}@keyframes scan-hold-progress{to{stroke-dashoffset:0}}
.schedule-calendar{min-width:0;margin:12px 0}.schedule-calendar-head{display:flex;align-items:center;justify-content:space-between;gap:4px}.schedule-calendar-head b{text-align:center;min-width:0;overflow-wrap:anywhere}.schedule-calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}.schedule-calendar-grid small{text-align:center;overflow:hidden;font-size:11px}.schedule-calendar-grid button{min-width:0;min-height:44px;padding:0;border:1px solid var(--line);border-radius:calc(10px * var(--rk));background:var(--surface);font-size:14px}.schedule-calendar-grid button[aria-pressed=true]{background:var(--accent);color:var(--accent-ink)}.schedule-preview{margin-top:12px;padding:12px;border-radius:var(--radius);background:var(--accent-soft);overflow-wrap:anywhere}.schedule-preview ol{padding-left:20px;margin-bottom:0}.schedule-preview p{margin:8px 0}

.catalog-group,.catalog-services,.catalog-icons,.catalog-builtins{min-width:0;margin:10px 0;border:1px solid var(--line);border-radius:calc(12px * var(--rk));padding:8px}.catalog-group>summary,.catalog-services>summary,.catalog-icons>summary,.catalog-builtins>summary{min-height:44px;display:flex;align-items:center;gap:8px;cursor:pointer;overflow-wrap:anywhere}.catalog-group>summary small{margin-left:auto}.catalog-service-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.catalog-service-grid .btn{min-width:0;justify-content:flex-start;white-space:normal;text-align:left;overflow-wrap:anywhere;min-height:48px}.catalog-category-groups{grid-column:1/-1;width:100%}.catalog-category-label{display:flex;align-items:center;gap:8px;min-width:0;font-size:13px;overflow-wrap:anywhere}.catalog-group .catchip{min-width:0}.catalog-group .catchip span{white-space:normal;overflow-wrap:anywhere}.catalog-icons .taxonomy-icons{margin-top:8px}

/* Hold feedback extends beyond the fingertip and escapes navigation clipping. */
.scan-hold-feedback{position:fixed;width:144px;height:144px;transform:translate(-50%,-50%);z-index:10000;pointer-events:none;isolation:isolate}
.scan-hold-feedback::before{content:"";position:absolute;inset:-12px;border-radius:50%;background:radial-gradient(circle,transparent 23%,color-mix(in srgb,var(--accent) 30%,transparent) 46%,transparent 72%);filter:blur(8px);animation:scan-halo-expand 1s ease-out forwards;z-index:-1}
.scan-hold-feedback .scan-hold-ring{inset:0;width:100%;height:100%;filter:drop-shadow(0 0 5px color-mix(in srgb,var(--accent) 55%,transparent))}
.scan-hold-feedback .scan-hold-ring circle{stroke-width:2.2}
.scan-hold-feedback .scan-hold-ring .scan-hold-track{stroke-dasharray:none;stroke-dashoffset:0;opacity:.2;animation:none}
.scan-hold-feedback.ready::before{opacity:1;box-shadow:0 0 20px color-mix(in srgb,var(--accent) 20%,transparent)}
@keyframes scan-halo-expand{from{transform:scale(.55);opacity:.2}to{transform:scale(1.12);opacity:.9}}
@media(prefers-reduced-motion:reduce){.scan-hold-feedback::before{animation:none;transform:none}}

/* One readable composer for transactions and scheduled records. */
.entry-composer .entry-head h2{font-family:var(--font);font-size:20px;line-height:1.3;min-width:0;overflow-wrap:anywhere}.entry-composer input,.entry-composer select,.entry-composer textarea{font-family:var(--font);font-size:16px;min-width:0;max-width:100%}.editor-row{display:flex;align-items:center;gap:12px;width:100%;min-height:70px;padding:12px 0;border:0;border-bottom:1px solid var(--line);background:transparent;text-align:left;color:var(--ink)}.editor-row>span:not(.ci){flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}.editor-row b{font-size:16px}.editor-row small{font-size:15px;color:var(--muted);overflow-wrap:anywhere}.editor-wallet-row{padding:12px 0;border-bottom:1px solid var(--line)}.editor-row-label{display:block;font-size:14px;font-weight:700;margin-bottom:8px}.editor-wallet-row .entry-wallet{width:100%;min-height:48px}.entry-composer .entry-group{border:0;border-bottom:1px solid var(--line);border-radius:0;margin:0;background:transparent}.entry-composer .entry-group>summary{min-height:70px;padding:12px 0}.entry-composer .entry-group-body{padding:8px 0 16px}.entry-composer .entry-scroll{padding-bottom:32px;scroll-padding-bottom:32px}.entry-composer .entry-footer{padding:12px 16px calc(12px + var(--safe-b));background:var(--surface);border-top:1px solid var(--line)}.editor-record-options{margin-top:16px}.editor-record-options>summary{min-height:48px;display:flex;align-items:center;gap:8px}.editor-record-options .btn{margin:8px}.focused-schedule .grid2{grid-template-columns:minmax(0,1fr)}.focused-schedule .f{margin-bottom:16px}.schedule-frequency{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:16px 0}.schedule-frequency .btn{white-space:normal;text-align:left;justify-content:flex-start;min-width:0;min-height:56px;padding:10px;line-height:1.3}.schedule-frequency .btn span{flex:1;min-width:0;overflow-wrap:anywhere}.schedule-frequency .btn.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-2)}.schedule-advanced,.schedule-dates-preview,.schedule-other-frequencies{margin:12px 0;border-top:1px solid var(--line)}.schedule-advanced>summary,.schedule-dates-preview>summary,.schedule-other-frequencies>summary{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:52px;font-size:16px;font-weight:600}.focused-schedule .schedule-preview{padding:0;background:transparent}.focused-schedule .schedule-preview>b{display:none}.focused-schedule .schedule-days{margin-bottom:16px}.focused-schedule [data-short-rule]{margin-top:16px}.entry-composer .entry-amount-panel{margin-top:8px}.entry-composer .entry-head{flex-shrink:0}

.sound-settings{margin-top:20px}.sound-sets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:12px 0}.sound-sets .btn{min-height:48px}.sound-sets .on{background:var(--accent-soft);border-color:var(--accent)}.sound-settings input[type=range]{width:100%;min-height:44px}

/* Longer schedule choices keep whole words and a full touch target. */
.schedule-frequency .btn span{overflow-wrap:normal;word-break:normal}.schedule-frequency [data-repeat="dates"],.schedule-frequency [data-repeat="custom"]{grid-column:1/-1}

[aria-invalid="true"]{outline:2px solid #d32f40!important;outline-offset:3px;background-color:color-mix(in srgb,#d32f40 9%,var(--surface))!important}.entry-error{scroll-margin:24px}

.scanned-receipt-badge{display:inline-flex;vertical-align:middle;margin-inline-start:6px;color:var(--accent-2);padding:3px;border-radius:6px;background:var(--accent-soft)}

/* Brief bill attention on entering Home or Bills; no persistent animation. */
@keyframes bill-due-wiggle{0%,100%{rotate:0deg}20%,60%{rotate:-.65deg}40%,80%{rotate:.65deg}}
@keyframes bill-overdue-pulse{0%,100%{background-color:var(--surface);box-shadow:inset 0 0 0 0 transparent}50%{background-color:color-mix(in srgb,var(--late) 20%,var(--surface));box-shadow:inset 0 0 0 2px var(--late)}}
.bill-attention .due-soon-attention{animation:bill-due-wiggle 1s 3;animation-delay:var(--bill-attention-elapsed,0s);transform-origin:center}
.bill-attention .sw.late>.sw-front{animation:bill-overdue-pulse 1s 3;animation-delay:var(--bill-attention-elapsed,0s)}
:root[data-motion=off] .bill-attention .sw,:root[data-motion=reduced] .bill-attention .sw,:root[data-motion=off] .bill-attention .sw-front,:root[data-motion=reduced] .bill-attention .sw-front,.dashboard-editing .due-soon-attention,.dashboard-editing .sw.late>.sw-front{animation:none!important}
@media(prefers-reduced-motion:reduce){:root:not([data-motion=full]) .bill-attention .sw,:root:not([data-motion=full]) .bill-attention .sw-front{animation:none!important}}

.entry-photo-badge{display:inline-flex;vertical-align:middle;margin-inline-start:6px;color:var(--accent-2);padding:3px;border-radius:6px;background:var(--accent-soft)}

/* Profile picture */
.avatar { overflow: hidden; } .avatar .av-art, .avatar .av-photo { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 50%; }
.avatar .dot { z-index: 2; } .avatar.pic .dot { box-shadow: 0 0 0 2px var(--bg); }
.avatar { overflow: visible; } .avatar .av-art, .avatar .av-photo { position: absolute; inset: 0; }
.av-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 4px 0 14px; } .av-pick { width: 100%; height: auto; aspect-ratio: 1; padding: 0; }
.av-pick.sel { outline: 3px solid var(--accent); outline-offset: 2px; }
.av-art.av-bob .av-body { animation: avBob 3.2s ease-in-out infinite; transform-origin: 50% 80%; } .av-art.av-float .av-body { animation: avFloat 3.6s ease-in-out infinite; }
.av-art.av-hop .av-body { animation: avHop 2.8s ease-in-out infinite; transform-origin: 50% 90%; } .av-art.av-spin .av-rays, .av-art.av-spin .av-body { transform-origin: 24px 24px; }
.av-art.av-spin .av-rays { animation: avSpin 14s linear infinite; }
.av-art .av-eyes { animation: avBlink 5s infinite; transform-box: fill-box; transform-origin: center; } .av-art .av-led { animation: avBlink 1.6s infinite; }
@keyframes avBob { 50% { transform: rotate(-3deg) translateY(-1px); } } @keyframes avFloat { 50% { transform: translateY(-2px); } } @keyframes avHop { 45%, 55% { transform: translateY(-2.5px); } }
@keyframes avSpin { to { transform: rotate(360deg); } } @keyframes avBlink { 0%, 92%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
.avatar.offline::before { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--muted, #94a3b8); opacity: .0; animation: avOffline 2.6s ease-in-out infinite; pointer-events: none; }
.avatar.offline::after { content: ""; position: absolute; left: -2px; bottom: -2px; width: 14px; height: 14px; border-radius: 50%; background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M3 3l18 18M9.5 5.5A6 6 0 0 1 18 9a4 4 0 0 1 3 6.5M6 18a4 4 0 0 1-.5-8'/%3E%3C/svg%3E") center/10px no-repeat; box-shadow: 0 0 0 1.5px var(--bg); z-index: 2; }
@keyframes avOffline { 0%, 100% { opacity: 0; transform: scale(.96); } 50% { opacity: .75; transform: scale(1.06); } }

.toast-check { flex: none; } .toast-check path { stroke-dasharray: 22; stroke-dashoffset: 22; animation: checkDraw .45s .1s ease forwards; } .toast-check circle { transform-origin: center; animation: checkPop .3s ease; }
@keyframes checkDraw { to { stroke-dashoffset: 0; } } @keyframes checkPop { from { transform: scale(.4); opacity: 0; } }
.photo-status.ok { color: var(--accent, #0f9d6e); font-weight: 700; }

.theme-cell { position: relative; display: flex; } .theme-cell .theme-card { flex: 1; min-width: 0; }
.tc-edit { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255,255,255,.88); color: #1b2430; box-shadow: 0 2px 8px rgba(0,0,0,.25); cursor: pointer; }

/* Features */
html[data-off~=recurring] [data-entry=schedule-open], html[data-off~=recurring] label.f:has(select[name=repeat]) { display: none !important; }
html[data-off~=plan] [data-go=plan], html[data-off~=plan] [data-home=goals], html[data-off~=plan] [data-more=plan] { display: none !important; }
html[data-off~=tags] [data-more=tags], html[data-off~=tags] .tag-field { display: none !important; }
html[data-off~=photos] [data-entry=photo], html[data-off~=photos] .photo-slot, html[data-off~=photos] [data-act=delete-photos] { display: none !important; }
html[data-off~=avatar] [data-avatar-open] { display: none !important; }
html[data-off~=shared] [data-share=open] { display: none !important; }
html[data-off~=receipts] .entry-scan, html[data-off~=receipts] .receipt-setting, html[data-off~=receipts] label.mrow:has([data-receipt-enabled]) { display: none !important; }
html[data-off~=insights] [data-home=ideas] { display: none !important; }
html[data-off~=sounds] [data-more=sounds] { display: none !important; }
html[data-off~=homeEdit] [data-home-settings] { display: none !important; }
html[data-off~=themeEdit] .tc-edit { display: none !important; }
.fx-plans { display: grid; gap: 10px; margin-top: 8px; }
.fx-plan { display: grid; gap: 3px; text-align: left; padding: 14px 16px; border: 2px solid var(--line); border-radius: 18px; background: var(--surface); color: var(--ink); font-family: var(--font); } .fx-plan.on { border-color: var(--accent); }
.fx-plan .fx-name { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: 17px; } .fx-plan small { color: var(--muted); font-size: 13px; line-height: 1.35; } .fx-plan em { font-style: normal; font-size: 12px; color: var(--accent); font-weight: 700; }
.fx-table-wrap { overflow-x: auto; } .fx-table { width: 100%; border-collapse: collapse; font-size: 14px; } .fx-table th, .fx-table td { padding: 8px 6px; border-bottom: 1px solid var(--line); text-align: center; } .fx-table th[scope=row] { text-align: left; font-weight: 600; } .fx-table thead th { font-size: 12px; color: var(--muted); }
/* Fits any screen: the feature names wrap inside their column instead of pushing the table wider. */
.fx-table { table-layout: fixed; } .fx-table thead th:not(:first-child), .fx-table td { width: 17%; padding-inline: 2px; } .fx-table thead th { font-size: 11.5px; overflow-wrap: anywhere; } .fx-table th[scope=row] { overflow-wrap: anywhere; hyphens: auto; font-size: 13.5px; line-height: 1.3; padding-inline-end: 8px; }
/* The plan names stay in view while the list scrolls (the table fits the screen now, so the wrapper no longer scrolls sideways, which would break sticky). */
.fx-table-wrap { overflow-x: visible; } .fx-table { border-collapse: separate; border-spacing: 0; } .fx-table thead th { position: sticky; top: 0; z-index: 2; background: var(--surface); padding-block: 10px; border-bottom: 2px solid var(--line); font-weight: 700; color: var(--ink-2); }
.fx-yes { color: var(--accent); display: inline-grid; } .fx-no { color: var(--muted); }
.fx-rows { display: grid; gap: 4px; } .fx-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; } .fx-row .mid { flex: 1; min-width: 0; } .fx-row small { display: block; color: var(--muted); font-size: 12.5px; }

/* First-run flow: still and calm. No aurora, no arrival animation, no blur; the action bar scrolls with the form so a keyboard never covers a field. */
.flow::before, .flow::after { display: none !important; } .flow .flow-body, .flow .flow-card { animation: none !important; }
.flow-card { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.flow-actions { position: static; background: none; margin-top: auto; padding-top: 16px; } .flow-body input { scroll-margin-bottom: 140px; }
/* Narrow phones (Android): text wraps instead of pushing controls off screen; Greek is never letter-spaced. */
.fx-row { min-width: 0; } .fx-row .mid b, .fx-row .mid small { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; } .fx-row input[type=checkbox] { flex: none; width: 24px; height: 24px; }
.account-section > div, .more-group > div { min-width: 0; max-width: 100%; } .account-section summary { overflow-wrap: anywhere; }
html[lang=el] body, html[lang=el] body * { letter-spacing: normal !important; }
.theme-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 600px) { .theme-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.theme-cell { min-width: 0; } .theme-card { min-width: 0; overflow-wrap: anywhere; } .theme-card .tc-name { min-width: 0; flex-wrap: wrap; }

/* Press-and-hold menu */
.sw { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.rm-list { display: grid; gap: 8px; } .rm-act { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--ink); font: 700 16px var(--font); text-align: left; }
.rm-act.danger { color: var(--bad, #c0392b); } .rm-act.ok { color: var(--accent-2); }
.rm-tip { margin-top: 18px; padding: 14px; border-radius: 16px; background: var(--accent-soft); text-align: center; } .rm-tip p { margin: 10px 0 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.4; }
.rm-demo { position: relative; height: 46px; max-width: 260px; margin: 0 auto; border-radius: 12px; overflow: hidden; background: var(--line); }
.rm-back { position: absolute; top: 0; bottom: 0; width: 50%; } .rm-back.l { left: 0; background: #34c07a; } .rm-back.r { right: 0; background: #e5534b; }
.rm-front { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 0 12px; background: var(--surface); border-radius: 12px; animation: rmSlide 3.6s ease-in-out infinite; } .rm-front span { height: 7px; border-radius: 4px; background: var(--line); width: 70%; } .rm-front span + span { width: 40%; }
.rm-finger { position: absolute; top: 20px; left: 50%; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: var(--ink); opacity: .35; animation: rmFinger 3.6s ease-in-out infinite; }
@keyframes rmSlide { 0%, 8%, 100% { transform: translateX(0); } 28%, 40% { transform: translateX(-34%); } 52%, 56% { transform: translateX(0); } 74%, 86% { transform: translateX(34%); } }
@keyframes rmFinger { 0%, 8%, 100% { transform: translateX(0); } 28%, 40% { transform: translateX(-60px); } 52%, 56% { transform: translateX(0); } 74%, 86% { transform: translateX(60px); } }

/* Avatar: selected check, photo preview */
.av-pick { position: relative; } .av-check { position: absolute; right: -3px; bottom: -3px; z-index: 3; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: #22a06b; box-shadow: 0 0 0 2px var(--surface, #fff); animation: checkPop .25s ease; }
.av-photo-row { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; padding: 10px; border: 1px solid var(--line); border-radius: 16px; } .av-photo-row .av-pick { flex: none; width: 64px; height: 64px; } .av-photo-row .mid small { white-space: normal; color: var(--muted); }
/* Toggle switch: every on/off option is a switch, not a checkbox. (The day pickers keep their own chip look, and .switch is its own component.) */
input[type=checkbox]:not(.schedule-days input):not(.switch input) { appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 50px; height: 30px; min-width: 50px; border-radius: 15px; border: 0; background: var(--line); cursor: pointer; transition: background-color .2s; margin: 0; }
input[type=checkbox]:not(.schedule-days input):not(.switch input)::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35); transition: transform .2s; }
input[type=checkbox]:not(.schedule-days input):not(.switch input):checked { background: #22a06b; } input[type=checkbox]:not(.schedule-days input):not(.switch input):checked::after { transform: translateX(20px); }
input[type=checkbox]:not(.schedule-days input):not(.switch input):focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
input[type=checkbox]:disabled { opacity: .5; cursor: not-allowed; }
.entry-check input { width: 50px; height: 30px; }
@media (prefers-reduced-motion: reduce) { input[type=checkbox]::after { transition: none; } }
/* Animated tutorials: a small phone, pure CSS */
.tt { display: flex; flex-direction: column; align-items: center; gap: 16px; } .tt-count { margin: 0; font-size: 13px; font-weight: 700; color: var(--muted); align-self: flex-start; }
.tt-phone { position: relative; width: 230px; height: 320px; flex: none; border-radius: 28px; border: 6px solid #1b2430; background: var(--bg); overflow: hidden; box-shadow: 0 14px 30px -12px rgba(0,0,0,.45); --c1: #fbbf24; --c2: #93c5fd; --c3: #bbf7d0; }
.tt-screen { position: absolute; inset: 0 0 52px 0; padding: 18px 12px 0; display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.tt-row { position: relative; display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); }
.tt-ic { width: 26px; height: 26px; border-radius: 50%; flex: none; background: var(--c1); } .tt-ic.c1 { background: var(--c2); } .tt-ic.c2 { background: var(--c3); }
.tt-row span, .tt-front span { flex: 1; display: grid; gap: 4px; } .tt-row b, .tt-front b { display: block; height: 7px; width: 70%; border-radius: 4px; background: var(--ink); opacity: .75; } .tt-row u, .tt-front u { display: block; height: 5px; width: 45%; border-radius: 3px; background: var(--muted); opacity: .5; text-decoration: none; }
.tt-row em, .tt-front em { width: 30px; height: 8px; border-radius: 4px; background: var(--ink); opacity: .6; } em.late { background: #e5534b; opacity: 1; }
.tt-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 52px; display: flex; align-items: center; justify-content: space-around; background: var(--surface); border-top: 1px solid var(--line); } .tt-bar i { width: 18px; height: 18px; border-radius: 6px; background: var(--muted); opacity: .45; }
.tt-fab { width: 40px; height: 40px; margin-top: -16px; border-radius: 50%; background: var(--accent); box-shadow: 0 4px 10px rgba(0,0,0,.3); } .tt-fab.dim { opacity: .5; }
.tt-finger { position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: rgba(27,36,48,.45); border: 2px solid rgba(255,255,255,.9); z-index: 6; }
.tt-ring { position: absolute; left: 50%; bottom: 12px; width: 44px; height: 44px; margin-left: -22px; border-radius: 50%; border: 3px solid var(--accent); opacity: 0; z-index: 5; animation: ttRing 6s infinite; } .tt-ring.row { left: 30px; top: 50%; bottom: auto; margin: -22px 0 0 -22px; }
.tt-finger.scan { left: 50%; top: 292px; animation: ttPress 6s infinite; } .tt-finger.hold { left: 38px; top: 108px; animation: ttPress2 6s infinite; }
.tt-sheet { position: absolute; left: 8px; right: 8px; bottom: 0; top: 40px; border-radius: 18px 18px 0 0; background: var(--surface); box-shadow: 0 -8px 24px rgba(0,0,0,.25); padding: 12px; display: flex; gap: 10px; transform: translateY(110%); animation: ttSheet 6s infinite; z-index: 4; }
.tt-receipt { position: relative; width: 84px; padding: 10px 8px; border-radius: 8px; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.2); display: grid; gap: 7px; align-content: start; overflow: hidden; } .tt-receipt b { height: 8px; width: 60%; background: #333; border-radius: 3px; } .tt-receipt u { height: 5px; background: #bbb; border-radius: 3px; } .tt-receipt u.tot { background: #333; width: 50%; justify-self: end; }
.tt-scanline { position: absolute; left: 0; right: 0; height: 3px; background: #22a06b; box-shadow: 0 0 10px #22a06b; top: 0; animation: ttScan 6s infinite; }
.tt-fields { flex: 1; display: grid; gap: 10px; align-content: start; padding-top: 6px; } .tt-fields span { height: 20px; border-radius: 8px; background: var(--line); position: relative; overflow: hidden; } .tt-fields span::after { content: ""; position: absolute; inset: 0; background: var(--accent); opacity: .35; transform: scaleX(0); transform-origin: left; animation: ttFill 6s infinite; } .tt-fields .f2::after { animation-delay: .35s; }
.tt-check { position: absolute; right: 14px; bottom: 16px; opacity: 0; animation: ttCheck 6s infinite; }
.tt-sw { position: relative; border-radius: 12px; overflow: hidden; } .tt-back { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; } .tt-back s { text-decoration: none; display: grid; place-items: center; width: 40px; align-self: stretch; color: #fff; font-size: 14px; } .tt-back .g { background: #22a06b; } .tt-back .b { background: #2f7de1; margin-left: auto; } .tt-back .b2 { background: #8b5cf6; } .tt-back .r { background: #e5534b; }
.tt-front { position: relative; display: flex; align-items: center; gap: 8px; padding: 9px 10px; background: var(--surface); border-radius: 12px; animation: ttSlide 6s infinite; } .tt-front.bill { animation: ttPaid 6s infinite; }
.tt-finger.swipe { left: 150px; top: 56px; animation: ttSwipeF 6s infinite; } .tt-finger.bill { left: 60px; top: 58px; animation: ttBillF 6s infinite; } .tt-finger.home { left: 60px; top: 100px; animation: ttHomeF 6s infinite; } .tt-finger.theme { left: 150px; top: 60px; animation: ttThemeF 6s infinite; }
.tt-menu { position: absolute; left: 46px; top: 120px; width: 120px; padding: 6px; border-radius: 14px; background: var(--surface); box-shadow: 0 10px 26px rgba(0,0,0,.35); display: grid; gap: 4px; opacity: 0; transform: scale(.85); transform-origin: top left; animation: ttMenu 6s infinite; z-index: 5; } .tt-menu p { margin: 0; height: 26px; border-radius: 8px; background: var(--line); display: grid; place-items: center; font-size: 13px; } .tt-menu p.d { color: #e5534b; }
.tt-input { height: 34px; border-radius: 10px; background: var(--surface); box-shadow: var(--shadow); padding: 0 10px; display: flex; align-items: center; font: 600 12px var(--font); } .tt-type { display: inline-block; overflow: hidden; white-space: nowrap; width: 0; border-right: 2px solid var(--accent); animation: ttTyping 6s steps(21) infinite; }
.tt-chips { display: flex; gap: 6px; flex-wrap: wrap; min-height: 24px; } .tt-chip { text-decoration: none; font: 700 11px var(--font); padding: 4px 8px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-2); }
.tt-in { opacity: 0; animation: ttIn 6s infinite; animation-delay: var(--d, 0s); } .tt-hl { animation: ttHl 6s infinite; animation-delay: var(--d, 0s); border-radius: 12px; }
.tt-form { display: grid; gap: 10px; } .tt-pill { display: inline-block; padding: 4px 10px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-2); font: 700 11px var(--font); } .tt-amt { font: 800 24px var(--font); padding: 4px 2px; } .tt-cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .tt-cell { aspect-ratio: 1; border-radius: 12px; background: var(--line); } .tt-cell:nth-child(3) { background: var(--accent-soft); } .tt-btn { height: 28px; border-radius: 12px; background: var(--accent); }
.tt-sel { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--surface); box-shadow: var(--shadow); font: 800 12px var(--font); } .tt-sel b { flex: 1; height: 6px; border-radius: 3px; background: var(--line); }
.tt-bgt { display: grid; gap: 12px; } .tt-track { height: 14px; border-radius: 8px; background: var(--line); overflow: hidden; } .tt-fill { display: block; height: 100%; width: 0; background: #22a06b; border-radius: 8px; animation: ttGrow 6s infinite; } .tt-fill.b2 { background: #f59e0b; animation-delay: .4s; } .tt-ringbox { display: grid; place-items: center; padding-top: 6px; } .tt-arc { stroke-dasharray: 94; stroke-dashoffset: 94; animation: ttArc 6s infinite; }
.tt-tabs { display: flex; gap: 6px; } .tt-tabs s { flex: 1; height: 22px; border-radius: 11px; background: var(--line); } .tt-bars { display: flex; align-items: flex-end; gap: 8px; height: 150px; padding: 8px 4px; } .tt-bar-i { flex: 1; height: 0; border-radius: 6px 6px 0 0; background: var(--accent); animation: ttBarUp 6s infinite; }
.tt-bell { font-size: 38px; text-align: center; transform-origin: 50% 10%; animation: ttBell 6s infinite; } .tt-push { position: absolute; left: 10px; right: 10px; top: -70px; display: flex; gap: 8px; align-items: center; padding: 10px; border-radius: 14px; background: var(--surface); box-shadow: 0 8px 20px rgba(0,0,0,.35); animation: ttPush 6s infinite; z-index: 5; } .tt-push i { width: 26px; height: 26px; border-radius: 8px; background: var(--accent); flex: none; } .tt-push span { display: grid; gap: 4px; flex: 1; } .tt-push b { height: 7px; width: 70%; border-radius: 4px; background: var(--ink); opacity: .75; } .tt-push u { height: 5px; width: 90%; border-radius: 3px; background: var(--muted); opacity: .5; }
.tt-themes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .tt-theme { position: relative; height: 70px; border-radius: 14px; border: 2px solid var(--line); } .tt-theme.a { background: #fff3e8; animation: ttTheme 6s infinite; } .tt-theme.b { background: #120726; } .tt-theme.c { background: #fff5d8; } .tt-theme.d { background: #1f3a30; } .tt-pen { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: #fff; box-shadow: 0 1px 5px rgba(0,0,0,.35); font-style: normal; font-size: 11px; color: #1b2430; }
.tt-plan { padding: 10px; border-radius: 12px; border: 2px solid var(--line); background: var(--surface); display: grid; gap: 5px; } .tt-plan b { height: 8px; width: 40%; border-radius: 4px; background: var(--ink); opacity: .75; } .tt-plan u { height: 5px; width: 80%; border-radius: 3px; background: var(--muted); opacity: .5; } .tt-trow { display: flex; align-items: center; gap: 8px; } .tt-trow span { flex: 1; } .tt-trow b { display: block; height: 7px; width: 60%; border-radius: 4px; background: var(--ink); opacity: .6; }
.tt-tog { position: relative; width: 34px; height: 20px; border-radius: 10px; background: var(--line); animation: ttTogBg 6s infinite; animation-delay: var(--d); } .tt-tog::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.4); animation: ttTogKnob 6s infinite; animation-delay: var(--d); }
.tt-avgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .tt-avgrid i { position: relative; aspect-ratio: 1; border-radius: 50%; } .tt-avgrid i.pick s { position: absolute; right: -3px; bottom: -3px; width: 16px; height: 16px; border-radius: 50%; background: #22a06b; color: #fff; font-size: 10px; display: grid; place-items: center; text-decoration: none; animation: ttCheck 6s infinite; } .tt-btnrow { display: flex; gap: 8px; margin-top: 14px; } .tt-btnrow b { flex: 1; height: 24px; border-radius: 10px; background: var(--line); } .tt-btnrow b.p { background: var(--accent); }
.tt-hcards { display: grid; gap: 8px; } .tt-hc { height: 58px; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); } .tt-hc.a { background: var(--accent); animation: ttHc1 6s infinite; } .tt-hc.b { animation: ttHc2 6s infinite; } .tt-hc.c { animation: ttHc3 6s infinite; }
.tt-two { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px; } .tt-mini { width: 76px; display: grid; gap: 6px; padding: 8px 4px; border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); } .tt-mini .tt-row { padding: 5px; box-shadow: none; background: var(--bg); } .tt-mini .tt-ic { width: 14px; height: 14px; } .tt-mini em { display: none; }
.tt-link { position: relative; width: 26px; height: 3px; background: var(--line); border-radius: 2px; flex: none; } .tt-link s { position: absolute; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); animation: ttPulseX 3s linear infinite; }
.tt-person { width: 44px; text-align: center; } .tt-person i { display: block; width: 44px; height: 44px; border-radius: 50%; background: var(--c1); } .tt-person.b i { background: var(--c2); } .tt-wal { display: grid; gap: 6px; place-items: center; width: 90px; padding: 10px; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); } .tt-wal b { width: 50px; height: 8px; border-radius: 4px; background: var(--ink); opacity: .6; } .tt-wal span { display: grid; gap: 3px; } .tt-wal s { text-decoration: none; font: 700 9px var(--font); padding: 2px 6px; border-radius: 8px; background: var(--accent-soft); color: var(--accent-2); }
.tt-file, .tt-reset { display: grid; place-items: center; height: 70px; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); font-size: 30px; } .tt-reset { color: var(--accent-2); }
.tt-steps { margin: 0; padding-left: 22px; align-self: stretch; display: grid; gap: 8px; font-size: 15px; line-height: 1.4; } .tt-steps li::marker { font-weight: 800; color: var(--accent-2); }
@keyframes ttRing { 0%, 4% { opacity: 0; transform: scale(.6); } 8% { opacity: .9; transform: scale(.7); } 38% { opacity: .9; transform: scale(1.35); } 42%, 100% { opacity: 0; transform: scale(1.5); } }
@keyframes ttPress { 0%, 4% { opacity: 0; transform: scale(1.3); } 8%, 40% { opacity: 1; transform: scale(.85); } 46%, 100% { opacity: 0; transform: scale(1.3); } }
@keyframes ttPress2 { 0%, 6% { opacity: 0; } 10%, 40% { opacity: 1; transform: scale(.85); } 46%, 100% { opacity: 0; } }
@keyframes ttSheet { 0%, 40% { transform: translateY(110%); } 48%, 90% { transform: translateY(0); } 96%, 100% { transform: translateY(110%); } }
@keyframes ttScan { 0%, 50% { top: 0; opacity: 0; } 52% { opacity: 1; } 68% { top: 100%; opacity: 1; } 70%, 100% { top: 100%; opacity: 0; } }
@keyframes ttFill { 0%, 68% { transform: scaleX(0); } 76%, 90% { transform: scaleX(1); } 96%, 100% { transform: scaleX(0); } }
@keyframes ttCheck { 0%, 76% { opacity: 0; transform: scale(.3); } 82%, 90% { opacity: 1; transform: scale(1); } 96%, 100% { opacity: 0; } }
@keyframes ttSlide { 0%, 8%, 100% { transform: translateX(0); } 24%, 40% { transform: translateX(-120px); } 52%, 56% { transform: translateX(0); } 70%, 86% { transform: translateX(40px); } }
@keyframes ttSwipeF { 0%, 8% { opacity: 0; transform: translateX(0); } 12% { opacity: 1; } 24%, 40% { opacity: 1; transform: translateX(-120px); } 46% { opacity: 0; } 52% { opacity: 0; transform: translateX(-60px); } 56% { opacity: 1; } 70%, 86% { opacity: 1; transform: translateX(-20px); } 92%, 100% { opacity: 0; } }
@keyframes ttPaid { 0%, 10%, 100% { transform: translateX(0); opacity: 1; } 30%, 50% { transform: translateX(40px); opacity: 1; } 70% { transform: translateX(240px); opacity: 0; } 72%, 90% { transform: translateX(0); opacity: 0; } 96% { opacity: 1; } }
@keyframes ttBillF { 0%, 8% { opacity: 0; transform: translateX(0); } 12% { opacity: 1; } 30%, 50% { opacity: 1; transform: translateX(40px); } 56%, 100% { opacity: 0; } }
@keyframes ttMenu { 0%, 46% { opacity: 0; transform: scale(.85); } 54%, 90% { opacity: 1; transform: scale(1); } 96%, 100% { opacity: 0; } }
@keyframes ttTyping { 0% { width: 0; } 40%, 85% { width: 100%; } 96%, 100% { width: 0; } }
@keyframes ttIn { 0% { opacity: 0; transform: translateY(8px); } 8%, 82% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; } }
@keyframes ttHl { 0%, 100% { box-shadow: none; } 8%, 22% { box-shadow: 0 0 0 3px var(--accent); } 30% { box-shadow: none; } }
@keyframes ttGrow { 0%, 6% { width: 0; } 40%, 90% { width: 72%; } 96%, 100% { width: 0; } }
@keyframes ttArc { 0%, 6% { stroke-dashoffset: 94; } 50%, 90% { stroke-dashoffset: 30; } 96%, 100% { stroke-dashoffset: 94; } }
@keyframes ttBarUp { 0%, 6% { height: 0; } 34%, 90% { height: var(--h); } 96%, 100% { height: 0; } }
@keyframes ttBell { 0%, 20%, 100% { transform: rotate(0); } 8%, 16% { transform: rotate(18deg); } 12% { transform: rotate(-18deg); } }
@keyframes ttPush { 0%, 40% { top: -70px; } 50%, 85% { top: 10px; } 94%, 100% { top: -70px; } }
@keyframes ttTheme { 0%, 20% { background: #fff3e8; border-color: var(--line); } 40%, 90% { background: #ffd9c2; border-color: #f0572d; } 96%, 100% { background: #fff3e8; } }
@keyframes ttThemeF { 0%, 10% { opacity: 0; } 14%, 36% { opacity: 1; transform: translate(-96px, 0); } 42%, 100% { opacity: 0; } }
@keyframes ttTogBg { 0%, 10% { background: var(--line); } 20%, 85% { background: #22a06b; } 95%, 100% { background: var(--line); } }
@keyframes ttTogKnob { 0%, 10% { transform: none; } 20%, 85% { transform: translateX(14px); } 95%, 100% { transform: none; } }
@keyframes ttHc1 { 0%, 18% { transform: none; } 40%, 70% { transform: translateY(66px); } 92%, 100% { transform: none; } }
@keyframes ttHc2 { 0%, 18% { transform: none; } 40%, 70% { transform: translateY(-66px); } 92%, 100% { transform: none; } }
@keyframes ttHomeF { 0%, 8% { opacity: 0; } 14%, 70% { opacity: 1; } 40%, 70% { transform: translateY(66px); } 80%, 100% { opacity: 0; } }
@keyframes ttPulseX { 0% { left: 0; } 100% { left: 100%; } }
.tt-phone s { position: static; } .tt-phone .tt-fab { position: relative; } .tt-phone .tt-avgrid i.pick s { position: absolute; }
.tt-receipt { width: 72px; flex: none; } .tt-sheet { padding: 10px; gap: 8px; }

#flow.lang-attn { pointer-events: none; } #flow.lang-attn .flow-lang { animation: langPulse .5s ease-in-out 2; } @keyframes langPulse { 50% { transform: scale(1.12); box-shadow: 0 0 0 6px var(--accent-soft); border-radius: 22px; } }
.flow .tt-phone { zoom: .82; margin: 0 auto; } .flow .tt-steps { font-size: 14px; }

.tt-navbar { display: flex; align-items: center; justify-content: space-between; width: 100%; } .tt-nav { min-width: 52px; } .tt-nav:disabled { opacity: .35; } .tt-pos { font-weight: 700; color: var(--muted); font-size: 14px; }

html[data-off~=trash] [data-more=trash] { display: none !important; }
html[data-off~=filters] .filter-panel { display: none !important; } html[data-off~=priceAlert] .price-chip { display: none !important; }
/* Daily number, streak, filters, trash, price chip */
.daily-card { position: relative; display: flex; align-items: center; gap: 16px; padding: 18px 16px; border-radius: calc(22px * var(--rk, 1)); color: var(--accent-ink, #fff); background: linear-gradient(135deg, var(--accent), var(--accent-2, var(--accent))); box-shadow: var(--shadow); overflow: hidden; } .daily-card::after { content: ""; position: absolute; right: -30px; top: -30px; width: 110px; height: 110px; border-radius: 50%; background: rgba(255,255,255,.14); }
.daily-ring { width: 64px; height: 64px; flex: none; color: currentColor; } .daily-arc { transition: stroke-dashoffset 1s ease; } .daily-copy { display: grid; gap: 2px; flex: 1; min-width: 0; z-index: 1; } .daily-copy small { font-size: 13px; font-weight: 700; opacity: .85; } .daily-copy strong { font-size: 30px; letter-spacing: -.03em; line-height: 1.05; } .daily-copy span { font-size: 12.5px; opacity: .8; } .daily-card .link { color: currentColor; z-index: 1; } .daily-card.over { background: linear-gradient(135deg, #c0392b, #e5534b); color: #fff; }
.streak-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: calc(22px * var(--rk, 1)); background: var(--surface); box-shadow: var(--shadow); } .flame { flex: none; filter: grayscale(1) opacity(.45); } .streak-card.hot .flame { filter: none; animation: flameDance 1.6s ease-in-out infinite; transform-origin: 50% 90%; } .streak-card.hot .fl-i { animation: flameCore 1.1s ease-in-out infinite alternate; transform-origin: 50% 90%; }
.streak-copy { display: grid; gap: 3px; flex: 1; min-width: 0; } .streak-copy strong { font-size: 20px; } .streak-copy small { color: var(--muted); font-size: 12.5px; } .streak-week { display: flex; gap: 5px; margin-top: 4px; } .streak-week i { width: 14px; height: 14px; border-radius: 50%; background: var(--line); } .streak-week i.ok { background: #ff9b2f; box-shadow: 0 0 0 2px rgba(255,155,47,.25); } .streak-week i.miss { background: #e5534b; opacity: .55; } .streak-week i.na { opacity: .35; }
.streak-ns { display: grid; place-items: center; text-align: center; min-width: 54px; } .streak-ns b { font-size: 22px; } .streak-ns small { font-size: 10.5px; color: var(--muted); line-height: 1.15; }
@keyframes flameDance { 0%, 100% { transform: rotate(-2deg) scale(1); } 50% { transform: rotate(2deg) scale(1.06); } } @keyframes flameCore { to { transform: scale(1.14); } }
.price-chip { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; padding: 1px 7px; border-radius: 10px; background: #fde8e6; color: #b42318; font-size: 11px; font-weight: 800; vertical-align: middle; }
.filter-panel summary { cursor: pointer; display: flex; align-items: center; gap: 8px; font-weight: 800; min-height: 40px; } .filter-count { font-style: normal; background: var(--accent); color: var(--accent-ink, #fff); border-radius: 10px; padding: 0 8px; font-size: 12px; } .filter-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 8px 0; } .filter-grid input { width: 100%; min-width: 0; }
.trash-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); } .trash-row .mid small { white-space: normal; }
.tut-new { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 10px; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; color: #fff; background: linear-gradient(135deg, #ff7a18, #e5534b); animation: newGlow 2s ease-in-out infinite; } @keyframes newGlow { 50% { box-shadow: 0 0 0 4px rgba(255,122,24,.25); } }
.tt-phone.fancy { border-color: #2b2f5a; box-shadow: 0 18px 40px -14px rgba(120,80,255,.55), 0 0 0 1px rgba(255,255,255,.08) inset; } .tt-phone.fancy::before { content: ""; position: absolute; inset: 0; z-index: 7; pointer-events: none; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.22) 50%, transparent 60%); transform: translateX(-120%); animation: ttShine 6s ease-in-out infinite; }
@keyframes ttShine { 0%, 60% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
/* New tutorial scenes */
.tt-modal { position: absolute; left: 14px; right: 14px; top: 78px; padding: 12px; border-radius: 16px; background: var(--surface); box-shadow: 0 14px 30px rgba(0,0,0,.4); display: grid; gap: 10px; z-index: 5; opacity: 0; transform: scale(.85); animation: ttModal 6s infinite; }
.tt-twins { position: relative; height: 40px; } .tt-twin { position: absolute; top: 6px; width: 90px; height: 28px; border-radius: 10px; background: var(--line); } .tt-twin.a { left: 8px; animation: ttTwinA 6s infinite; } .tt-twin.b { right: 8px; background: var(--accent-soft); animation: ttTwinB 6s infinite; } .tt-eq { position: absolute; left: 50%; top: 4px; margin-left: -10px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: #f59e0b; color: #fff; font: 800 13px var(--font); text-decoration: none; animation: ttPop 6s infinite; }
.tt-mrow b { display: block; height: 8px; width: 60%; border-radius: 4px; background: var(--ink); opacity: .7; margin-bottom: 5px; } .tt-mrow u { display: block; height: 5px; width: 85%; border-radius: 3px; background: var(--muted); opacity: .5; } .tt-mbtns { display: flex; gap: 8px; } .tt-mbtns s { flex: 1; height: 24px; border-radius: 10px; background: var(--line); } .tt-mbtns .ok { background: var(--accent); animation: ttBtn 6s infinite; }
.tt-finger.dup { left: 160px; top: 196px; animation: ttDupF 6s infinite; }
.tt-dcard { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 18px; background: linear-gradient(135deg, var(--accent), var(--accent-2, var(--accent))); } .tt-dcard u { display: block; height: 6px; width: 60px; border-radius: 3px; background: rgba(255,255,255,.7); text-decoration: none; margin-bottom: 6px; } .tt-big { position: relative; display: block; height: 30px; width: 90px; } .tt-big b { position: absolute; left: 0; top: 0; font: 800 26px var(--font); color: #fff; opacity: 0; animation: ttSlot 6s infinite; animation-delay: var(--d); }
.tt-arc2 { stroke-dasharray: 94.2; stroke-dashoffset: 18; animation: ttArc2 6s infinite; } .tt-fx { display: flex; gap: 6px; flex-wrap: wrap; min-height: 26px; }
.tt-fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .tt-inp { height: 30px; border-radius: 10px; background: var(--surface); box-shadow: var(--shadow); display: flex; align-items: center; padding: 0 10px; } .tt-inp b { font: 800 12px var(--font); }
.tt-row.fade1 { animation: ttFilterOut 6s infinite; } .tt-row.fade2 { animation: ttFilterOut2 6s infinite; }
.tt-del { animation: ttDelRow 6s infinite; } .tt-bin { position: absolute; right: 18px; bottom: 70px; font-size: 28px; animation: ttBin 6s infinite; } .tt-back-row { position: absolute; left: 12px; right: 12px; top: 24px; display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); opacity: 0; animation: ttRestore 6s infinite; } .tt-back-row span { flex: 1; display: grid; gap: 4px; } .tt-back-row b { height: 7px; width: 70%; border-radius: 4px; background: var(--ink); opacity: .75; display: block; } .tt-back-row u { height: 5px; width: 45%; border-radius: 3px; background: var(--muted); opacity: .5; display: block; } .tt-back-row s { text-decoration: none; color: var(--accent-2); font-size: 18px; }
.tt-flamebox { position: relative; display: grid; place-items: center; height: 120px; } .tt-flame { animation: flameDance 1.6s ease-in-out infinite; transform-origin: 50% 90%; } .tt-core { animation: flameCore 1.1s ease-in-out infinite alternate; transform-origin: 50% 90%; } .tt-count2 { position: absolute; bottom: 4px; right: 14px; width: 40px; height: 34px; } .tt-count2 b { position: absolute; right: 0; bottom: 0; font: 800 28px var(--font); color: var(--accent-2); opacity: 0; animation: ttSlot 6s infinite; animation-delay: var(--d); } .tt-count2 b.last { animation-name: ttSlotLast; }
.tt-weekdots { display: flex; justify-content: space-between; padding: 0 8px; } .tt-dot { width: 20px; height: 20px; border-radius: 50%; background: var(--line); animation: ttDot 6s infinite; animation-delay: var(--d); }
.tt-chip2 { position: absolute; right: 52px; top: 6px; text-decoration: none; font: 800 10px var(--font); padding: 2px 7px; border-radius: 9px; background: #fde8e6; color: #b42318; opacity: 0; animation: ttChip 6s infinite; } .tt-pricetoast { position: absolute; left: 10px; right: 10px; bottom: 62px; display: flex; gap: 8px; align-items: center; padding: 10px; border-radius: 14px; background: #1b2430; box-shadow: 0 8px 20px rgba(0,0,0,.4); transform: translateY(40px); opacity: 0; animation: ttToast 6s infinite; } .tt-pricetoast i { width: 18px; height: 18px; border-radius: 50%; background: #e5534b; flex: none; } .tt-pricetoast span { display: grid; gap: 4px; flex: 1; } .tt-pricetoast b { height: 6px; width: 80%; border-radius: 3px; background: #fff; opacity: .85; display: block; } .tt-pricetoast u { height: 5px; width: 55%; border-radius: 3px; background: #fff; opacity: .5; display: block; }
@keyframes ttModal { 0%, 14% { opacity: 0; transform: scale(.85); } 22%, 80% { opacity: 1; transform: scale(1); } 90%, 100% { opacity: 0; } }
@keyframes ttTwinA { 0%, 24% { transform: translateX(-30px); } 40%, 100% { transform: translateX(26px); } } @keyframes ttTwinB { 0%, 24% { transform: translateX(30px); } 40%, 100% { transform: translateX(-26px); } } @keyframes ttPop { 0%, 38% { transform: scale(0); } 46%, 100% { transform: scale(1.15); } }
@keyframes ttBtn { 0%, 55% { box-shadow: none; } 60%, 72% { box-shadow: 0 0 0 4px var(--accent-soft); } 80%, 100% { box-shadow: none; } } @keyframes ttDupF { 0%, 52% { opacity: 0; transform: translate(0, 0); } 56%, 74% { opacity: 1; transform: translate(0, 0); } 80%, 100% { opacity: 0; } }
@keyframes ttSlot { 0%, 14% { opacity: 1; transform: none; } 18%, 100% { opacity: 0; transform: translateY(-8px); } } @keyframes ttSlotLast { 0%, 80% { opacity: 0; } 84%, 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ttArc2 { 0%, 6% { stroke-dashoffset: 18; } 30% { stroke-dashoffset: 34; } 60%, 90% { stroke-dashoffset: 52; } 96%, 100% { stroke-dashoffset: 18; } }
@keyframes ttFilterOut { 0%, 45% { opacity: 1; max-height: 50px; } 55%, 90% { opacity: 0; max-height: 0; padding: 0; margin: -4px 0; } 98%, 100% { opacity: 1; max-height: 50px; } } @keyframes ttFilterOut2 { 0%, 60% { opacity: 1; max-height: 50px; } 70%, 90% { opacity: 0; max-height: 0; padding: 0; margin: -4px 0; } 98%, 100% { opacity: 1; max-height: 50px; } }
@keyframes ttDelRow { 0%, 12% { transform: none; opacity: 1; } 28% { transform: translate(120px, 150px) scale(.4); opacity: 0; } 29%, 90% { opacity: 0; transform: translate(120px, 150px) scale(.4); } 98%, 100% { transform: none; opacity: 1; } }
@keyframes ttBin { 0%, 24% { transform: none; } 30% { transform: scale(1.3) rotate(-8deg); } 38%, 100% { transform: none; } }
@keyframes ttRestore { 0%, 52% { opacity: 0; transform: translateY(120px); } 66%, 86% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@keyframes ttDot { 0%, 6% { background: var(--line); transform: scale(1); } 12%, 85% { background: #ff9b2f; transform: scale(1.15); } 96%, 100% { background: var(--line); transform: scale(1); } }
@keyframes ttChip { 0%, 38% { opacity: 0; transform: scale(.4); } 46%, 90% { opacity: 1; transform: scale(1); } 98%, 100% { opacity: 0; } } @keyframes ttToast { 0%, 40% { opacity: 0; transform: translateY(40px); } 50%, 84% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; } }
/* No accidental text selection or iOS callouts while pressing and holding the interface; fields and read-only text blocks stay selectable. */
html, body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
input, textarea, select, [contenteditable=true], [contenteditable=""], pre, code, .selectable, .selectable * { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
.invite-box, .invite-box *, .code, .facts dd, .photo-status { -webkit-user-select: text; user-select: text; }

/* Contact form */
.ct { display: grid; gap: 14px; } .rt-bar { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; border: 1px solid var(--line); border-bottom: 0; border-radius: 12px 12px 0 0; background: var(--surface); } .rt-btn { min-width: 38px; height: 38px; border-radius: 10px; border: 0; background: transparent; color: var(--ink); font: 700 15px var(--font); display: grid; place-items: center; } .rt-btn:active { background: var(--accent-soft); }
.rt-edit { min-height: 150px; max-height: 320px; overflow-y: auto; padding: 12px; border: 1px solid var(--line); border-radius: 0 0 12px 12px; background: var(--surface); color: var(--ink); font: 400 16px/1.5 var(--font); outline: none; } .rt-edit:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .rt-edit:empty::before { content: attr(data-ph); color: var(--muted); } .rt-edit h3 { margin: .4em 0; font-size: 1.1em; } .rt-edit blockquote { margin: .4em 0; padding-left: 12px; border-left: 3px solid var(--line); color: var(--ink-2); } .rt-edit ul, .rt-edit ol { padding-left: 22px; margin: .3em 0; } .rt-edit a { color: var(--accent-2); text-decoration: underline; }
.ct-thumbs { display: flex; flex-wrap: wrap; gap: 8px; } .ct-thumb { position: relative; width: 72px; height: 72px; border-radius: 12px; overflow: hidden; background: var(--line); } .ct-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .ct-thumb button { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgba(0,0,0,.65); color: #fff; display: grid; place-items: center; padding: 0; }

html[data-off~=drafts] [data-more=drafts] { display: none !important; }
.draft-nudge { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; border-radius: calc(20px * var(--rk, 1)); background: var(--accent-soft); border: 2px solid var(--accent); animation: draftPulse 2.4s ease-in-out 3; } .draft-nudge .mid { flex: 1; min-width: 150px; } .draft-nudge .mid small { white-space: normal; } .dn-ic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink, #fff); flex: none; }
@keyframes draftPulse { 50% { box-shadow: 0 0 0 7px var(--accent-soft); } }
.draft-row { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); } .draft-row .mid { flex: 1; min-width: 0; } .draft-row .mid small { white-space: normal; } .btn-sm { min-height: 40px; padding: 0 12px; }

.tt-wcards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .tt-wc { height: 64px; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); padding: 10px; display: grid; align-content: space-between; } .tt-wc i { width: 22px; height: 22px; border-radius: 8px; background: var(--c1); } .tt-wc.b i { background: var(--c2); } .tt-wc.c i { background: var(--c3); } .tt-wc b { height: 7px; width: 60%; border-radius: 4px; background: var(--ink); opacity: .7; display: block; } .tt-wc u { height: 5px; width: 40%; border-radius: 3px; background: var(--muted); opacity: .5; display: block; } .tt-wplus { height: 64px; border-radius: 14px; border: 2px dashed var(--line); display: grid; place-items: center; font-size: 26px; color: var(--muted); }
.tt-badges { display: flex; gap: 4px; } .tt-badge { text-decoration: none; font-size: 13px; } .tt-attach { position: relative; display: grid; place-items: center; height: 110px; border-radius: 16px; background: var(--line); } .tt-photo { text-decoration: none; font-size: 44px; } .tt-check2 { position: absolute; right: 12px; bottom: 10px; opacity: 0; animation: ttCheck 6s infinite; }

/* Contextual help popup */
.help-ic { margin-left: 4px; color: var(--accent-2); }
.help-pop { border: 0; padding: 0; width: min(440px, calc(100vw - 20px)); max-height: 90dvh; border-radius: 22px; background: var(--surface); color: var(--ink); box-shadow: 0 24px 60px rgba(0,0,0,.5); overflow: hidden; } .help-pop[open] { display: flex; flex-direction: column; } .help-pop::backdrop { background: rgba(10,12,24,.55); }
.hp-head { display: flex; align-items: center; gap: 6px; padding: 10px 10px 6px 16px; } .hp-head h2 { flex: 1; margin: 0; font-size: 18px; } .hp-body { padding: 8px 16px 12px; overflow-y: auto; flex: 1; } .hp-foot { padding: 10px 16px 16px; border-top: 1px solid var(--line); }

/* Help icon: filled, pulsing, and it rings like a bell now and then */
.help-ic { position: relative; width: 44px; height: 44px; border-radius: 50%; background: var(--accent); color: var(--accent-ink, #fff); margin-left: 6px; box-shadow: 0 2px 8px rgba(0,0,0,.25); animation: helpRing 7s ease-in-out infinite; transform-origin: 50% 20%; }
.help-ic::before { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 3px solid var(--accent); opacity: 0; animation: helpPulse 2.2s ease-out infinite; pointer-events: none; }
.help-ic svg { position: relative; }
@keyframes helpPulse { 0% { transform: scale(.9); opacity: .85; } 80%, 100% { transform: scale(1.7); opacity: 0; } }
@keyframes helpRing { 0%, 70%, 100% { transform: rotate(0); } 73% { transform: rotate(16deg); } 76% { transform: rotate(-14deg); } 79% { transform: rotate(10deg); } 82% { transform: rotate(-8deg); } 85% { transform: rotate(4deg); } 88% { transform: rotate(0); } }
.help-demo { position: relative; width: min(280px, 100%); margin: 0 auto 8px; border-radius: 22px; border: 4px solid #1b2430; background: var(--bg); overflow: hidden; }
.hd-bar { display: flex; align-items: center; gap: 6px; padding: 8px 10px; } .hd-bar i { flex: 1; height: 10px; border-radius: 5px; background: var(--ink); opacity: .5; max-width: 90px; } .hd-bar .help-ic { margin-left: auto; width: 38px; height: 38px; } .hd-av { width: 30px; height: 30px; border-radius: 50%; background: var(--c1, #fbbf24); }
.hd-screen { position: relative; height: 130px; padding: 4px 12px; display: grid; gap: 8px; align-content: start; } .hd-row { height: 34px; border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); } .hd-pop { position: absolute; left: 22px; right: 22px; top: 8px; padding: 12px; border-radius: 16px; background: var(--surface); box-shadow: 0 12px 28px rgba(0,0,0,.4); display: grid; gap: 7px; opacity: 0; transform: scale(.85); animation: hdPop 5s ease-in-out infinite; } .hd-pop b { height: 9px; width: 55%; border-radius: 5px; background: var(--ink); opacity: .75; } .hd-pop u { height: 6px; border-radius: 3px; background: var(--muted); opacity: .5; text-decoration: none; } .hd-pop u + u { width: 70%; }
@keyframes hdPop { 0%, 35% { opacity: 0; transform: scale(.85); } 45%, 85% { opacity: 1; transform: scale(1); } 95%, 100% { opacity: 0; } }

.daily-edit { color: currentColor; z-index: 1; } .income-target { margin-top: 10px; padding: 12px 14px; border-radius: calc(18px * var(--rk, 1)); background: var(--surface); box-shadow: var(--shadow); display: grid; gap: 8px; } .it-top { display: flex; justify-content: space-between; align-items: center; font-weight: 700; } .it-top span { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; } .it-top b { font-size: 20px; } .it-bar { height: 10px; border-radius: 6px; background: var(--line); overflow: hidden; } .it-bar i { display: block; height: 100%; border-radius: 6px; background: #22a06b; transition: width .8s ease; } .income-target small { color: var(--muted); font-size: 12.5px; } .income-target.done small { color: #22a06b; font-weight: 700; }

.tt-car { display: grid; gap: 8px; } .tt-slide { display: none; text-align: center; } .tt-slide.on { display: grid; gap: 6px; justify-items: center; } .tt-slide h3 { margin: 6px 0 0; font-size: 18px; } .tt-slide p { margin: 0; color: var(--muted); font-size: 14px; } .hp-never { display: block; margin-top: 6px; width: 100%; text-align: center; color: var(--muted); }

.draft-nudge .mid b { white-space: normal; overflow: visible; text-overflow: clip; } .dn-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }

.dev-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; list-style: none; margin: 4px 0 0; padding: 0; } .dev-strip li { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-2); font: 700 12.5px var(--font); } .dev-note { margin: 8px 0 0; text-align: center; font-size: 13px; color: var(--muted); }

/* No pinch or double-tap zoom: the app is laid out for the screen it is on. */
html, body { touch-action: pan-x pan-y; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
button, a, input, select, textarea, label, summary { touch-action: manipulation; }

/* Wallet colors */
.wcolors { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; align-items: center; } .wsw { width: 34px; height: 34px; border-radius: 50%; border: 3px solid transparent; box-shadow: 0 0 0 1px var(--line); padding: 0; cursor: pointer; position: relative; display: grid; place-items: center; background: var(--surface); } .wsw.on { border-color: var(--ink); box-shadow: 0 0 0 2px var(--surface); }
.wsw.auto { width: auto; border-radius: 17px; padding: 0 12px; font: 700 13px var(--font); color: var(--ink); } .wsw.custom { overflow: hidden; font-weight: 800; color: var(--ink-2); } .wsw.custom input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }

/* Features that need an account are greyed out, with the reason written next to them (never a message hidden behind the sheet) */
.photo-slot.need-account .btn:disabled { opacity: .5; cursor: not-allowed; } .account-note { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; font-size: 13px; color: var(--muted); }
/* Toasts live in the browser's top layer, so they show above open sheets and dialogs */
#toast[popover] { margin: 0; inset: auto; left: 50%; bottom: calc(var(--tab-h, 0px) + var(--safe-b, 0px) + 22px); border: 0; overflow: visible; }
@media (min-width: 600px) { #toast[popover] { bottom: 28px; } }

.entry-head h2 { min-width: 0; flex: 1; overflow-wrap: normal; word-break: normal; hyphens: auto; font-size: clamp(15px, 4.4vw, 20px); } .entry-head .entry-change { flex: none; }
/* Editing Home: Chrome's scroll anchoring re-adjusts the scroll position every time a card is reordered, which made the cards jump up and down on Android. */
#view:has(.dash-editbar) { overflow-anchor: none; }



.am-allocation{display:grid;grid-template-columns:minmax(0,1fr) minmax(80px,.55fr) 44px;gap:8px;align-items:end;margin-bottom:12px}.am-allocation .f{margin:0;min-width:0}.am-allocation select,.am-allocation input{width:100%;min-width:0;min-height:48px}.advanced-entry>summary{display:flex;align-items:center;gap:10px}.advanced-entry>summary>span{flex:1;min-width:0;display:grid;gap:3px}.advanced-entry>summary small{font-size:12px;color:var(--muted)}.advanced-entry .btn{white-space:normal;min-height:48px}.am-badge{display:inline-flex;vertical-align:middle;margin-inline-start:5px;color:var(--accent-2)}.am-demo-total{text-align:center;font-size:36px;font-weight:800;margin:24px 0}.am-demo-part{display:flex;align-items:center;gap:12px;margin:14px;padding:16px;background:var(--accent-soft);border-radius:12px;animation:am-part 5s infinite both}.am-demo-part.b{animation-delay:.8s}.am-demo-part i{height:12px;flex:1;background:var(--accent);border-radius:6px}.am-demo-part.b i{background:var(--warn)}.am-demo-result{text-align:center;font-weight:700;animation:am-result 5s infinite both}
@keyframes am-part{0%,10%{opacity:0;translate:0 12px}25%,85%{opacity:1;translate:0 0}100%{opacity:0;translate:0 0}}@keyframes am-result{0%,40%{opacity:0}55%,85%{opacity:1}100%{opacity:0}}
@media(max-width:360px){.am-allocation{grid-template-columns:minmax(0,1fr) 44px}.am-allocation .f:first-child{grid-column:1/-1}}
:root[data-motion=off] .am-demo-part,:root[data-motion=reduced] .am-demo-part,:root[data-motion=off] .am-demo-result,:root[data-motion=reduced] .am-demo-result{animation:none!important;opacity:1}
@media(prefers-reduced-motion:reduce){:root:not([data-motion=full]) .am-demo-part,:root:not([data-motion=full]) .am-demo-result{animation:none!important;opacity:1}}

/* Keep both repayments and the arithmetic visible inside the tutorial phone. */
.am-demo-total{font-size:30px;margin:12px 0}.am-demo-part{margin:10px;padding:12px}.am-demo-result{font-size:12px;padding:4px}
.dash-summary.dash-over strong { color: var(--late, #c0392b); } .dash-summary > small { overflow-wrap: anywhere; }
.home-report { margin-bottom: 0; } .donut-wrap2.compact { grid-template-columns: 120px 1fr; } .donut-wrap2.compact .donut-svg { max-width: 120px; }
.card.danger .btn-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .card.danger .btn-row .btn { flex: 0 1 auto; width: auto; }
.confirm-word { margin: 12px 0; } .confirm-word input { text-transform: uppercase; letter-spacing: 0.08em; text-align: center; }
/* What's new: centred in the top layer over a grey backdrop. The dialog itself never animates its position, only the card inside fades in. */
.whatsnew { border: 0; padding: 0; background: transparent; color: var(--ink); width: min(440px, calc(100vw - 32px)); max-width: none; max-height: none; margin: auto; overflow: visible; }
.whatsnew::backdrop { background: rgba(14, 16, 22, 0.58); animation: fade 0.2s; }
.whatsnew-card { display: flex; flex-direction: column; gap: 14px; max-height: min(78dvh, 620px); padding: 22px; background: var(--surface); border-radius: calc(22px * var(--rk)); border: var(--bw) var(--bs, solid) var(--card-line); box-shadow: 0 24px 64px rgba(0, 0, 0, 0.38); animation: wn-in 0.26s ease-out; }
@keyframes wn-in { from { opacity: 0; scale: 0.96; } to { opacity: 1; scale: 1; } }
.wn-head { display: flex; align-items: center; gap: 12px; } .wn-head h2 { margin: 0; font-size: 21px; } .wn-head small { color: var(--muted); }
.wn-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-2, var(--accent)); flex: none; }
.wn-list { mask-image: linear-gradient(to bottom, #000 calc(100% - 18px), transparent); -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 18px), transparent); padding-bottom: 8px !important; list-style: none; margin: 0; padding: 0; overflow: auto; display: grid; gap: 10px; min-height: 0; }
.wn-list li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; line-height: 1.4; font-size: 15px; } .wn-list li .i { color: var(--accent-2, var(--accent)); margin-top: 2px; }
.whatsnew .btn-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } .whatsnew .btn-row .btn { flex: 1 1 auto; }
@media (prefers-reduced-motion: reduce) { .whatsnew-card, .whatsnew::backdrop { animation: none; } }
.amt-preview { display: block; margin-top: 4px; font-size: 12.5px; font-variant-numeric: tabular-nums; }
/* Setup on a computer: a wider card so the steps are not a phone column, and the theme step shows the whole choice. */
@media (min-width: 900px) {
	.flow-card { width: min(780px, 100%); padding-inline: 44px; }
	.flow-card:has(.theme-grid) { width: min(1180px, 100%); }
	.flow .theme-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
	.flow .cur-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.flow-body h1 { font-size: 36px; }
}
/* Real-life examples under a tutorial: closed, with a button that is easy to spot. */
.tt-example { margin: 14px 0 4px; } .tt-example > summary { list-style: none; cursor: pointer; display: inline-block; border-radius: 999px; } .tt-example > summary::-webkit-details-marker { display: none; }
.tt-ex-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px 10px 12px; border-radius: 999px; font-weight: 800; font-size: 14px; color: var(--accent-ink, #fff); background: linear-gradient(135deg, var(--accent), var(--accent-2, var(--accent))); box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--accent) 60%, transparent); animation: ttExPulse 2.8s ease-in-out infinite; }
.tt-ex-chev { width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s; }
.tt-example[open] .tt-ex-chev { transform: rotate(225deg); } .tt-example[open] .tt-ex-btn { animation: none; }
.tt-example > p { margin: 10px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--accent-soft); border-left: 3px solid var(--accent); font-size: 14px; line-height: 1.5; }
@keyframes ttExPulse { 0%, 100% { box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--accent) 60%, transparent), 0 0 0 0 color-mix(in srgb, var(--accent) 40%, transparent); } 50% { box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--accent) 60%, transparent), 0 0 0 9px transparent; } }
@media (prefers-reduced-motion: reduce) { .tt-ex-btn { animation: none; } }

.row-switch{display:flex;align-items:center;justify-content:space-between;gap:12px}.row-switch>span:first-child{flex:1}

.ctxmenu{position:fixed;z-index:2147482000;min-width:190px;padding:6px;border:1px solid var(--line);border-radius:calc(14px * var(--rk,1));background:var(--surface);color:var(--ink);box-shadow:0 14px 40px -10px rgba(0,0,0,.35);animation:fade .12s}
.cm-item{display:flex;align-items:center;gap:10px;width:100%;min-height:40px;padding:8px 12px;border:0;border-radius:calc(10px * var(--rk,1));background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.cm-item:hover,.cm-item:focus-visible{background:var(--accent-soft);outline:none}.cm-item.danger{color:var(--danger,#c0392b)}.cm-item.ok{color:var(--accent)}
.ctxmenu hr{border:0;border-top:1px solid var(--line);margin:4px 6px}