/* =====================================================================
   b$ndexpApp — visual system
   Apple-style: system grays, Liquid Glass materials, spring curves, SF type.
   Bindexp brand: blue #5271FF · violet #9C1DF5 · pink #F982C2 (aurora).
   People: Denisse = pink · Juan = blue · Ours = violet (CVD-validated).
   ===================================================================== */
@font-face { font-family: 'InterBx'; src: url('/fonts/inter-latin.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }

:root {
  --bg: #f2f2f7; --bg-2: #ffffff; --card: #ffffff; --card-2: #f2f2f7; --elev: #ffffff;
  --label: #000; --label-2: rgba(60,60,67,.62); --label-3: rgba(60,60,67,.32);
  --sep: rgba(60,60,67,.16); --fill: rgba(120,120,128,.12); --fill-2: rgba(120,120,128,.2);
  --glass: rgba(255,255,255,.62); --glass-strong: rgba(250,250,252,.82); --glass-edge: rgba(255,255,255,.75); --glass-line: rgba(0,0,0,.08);
  --blue: #5271ff; --violet: #9c1df5; --pink: #f982c2;
  --tint: #5271ff; --tint-soft: rgba(82,113,255,.12);
  --aurora: linear-gradient(135deg, #5271ff 0%, #7b3cf5 46%, #c65bd8 76%, #f982c2 100%);
  --aurora-soft: linear-gradient(135deg, rgba(82,113,255,.16), rgba(156,29,245,.12) 55%, rgba(249,130,194,.16));
  --c-denisse: #e0569f; --c-juan: #5271ff; --c-shared: #9c1df5;
  --green: #34c759; --red: #ff3b30; --orange: #ff9500; --yellow: #ffcc00;
  --shadow: 0 1px 2px rgba(0,0,0,.04), 0 6px 20px rgba(0,0,0,.05);
  --shadow-lg: 0 24px 70px rgba(10,10,40,.22);
  --r: 18px; --r-lg: 26px; --r-xl: 32px;
  --spring: cubic-bezier(.32,.72,0,1); --bounce: cubic-bezier(.34,1.56,.64,1); --ease: cubic-bezier(.25,.1,.25,1);
  --st: env(safe-area-inset-top, 0px); --sb: env(safe-area-inset-bottom, 0px);
  --tab-h: 64px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", InterBx, system-ui, "Segoe UI", Roboto, sans-serif;
  --round: ui-rounded, "SF Pro Rounded", -apple-system, InterBx, system-ui, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #000; --bg-2: #1c1c1e; --card: #1c1c1e; --card-2: #2c2c2e; --elev: #2c2c2e;
  --label: #fff; --label-2: rgba(235,235,245,.62); --label-3: rgba(235,235,245,.3);
  --sep: rgba(84,84,88,.5); --fill: rgba(120,120,128,.24); --fill-2: rgba(120,120,128,.36);
  --glass: rgba(40,40,46,.55); --glass-strong: rgba(28,28,32,.84); --glass-edge: rgba(255,255,255,.14); --glass-line: rgba(255,255,255,.08);
  --tint: #6a84ff; --tint-soft: rgba(106,132,255,.2);
  --c-denisse: #e0569f; --c-juan: #6a84ff; --c-shared: #a83bff;
  --green: #30d158; --red: #ff453a; --orange: #ff9f0a; --yellow: #ffd60a;
  --shadow: none; --shadow-lg: 0 24px 70px rgba(0,0,0,.6);
  color-scheme: dark;
} }
:root[data-theme="dark"] {
  --bg: #000; --bg-2: #1c1c1e; --card: #1c1c1e; --card-2: #2c2c2e; --elev: #2c2c2e;
  --label: #fff; --label-2: rgba(235,235,245,.62); --label-3: rgba(235,235,245,.3);
  --sep: rgba(84,84,88,.5); --fill: rgba(120,120,128,.24); --fill-2: rgba(120,120,128,.36);
  --glass: rgba(40,40,46,.55); --glass-strong: rgba(28,28,32,.84); --glass-edge: rgba(255,255,255,.14); --glass-line: rgba(255,255,255,.08);
  --tint: #6a84ff; --tint-soft: rgba(106,132,255,.2);
  --c-denisse: #e0569f; --c-juan: #6a84ff; --c-shared: #a83bff;
  --green: #30d158; --red: #ff453a; --orange: #ff9f0a; --yellow: #ffd60a;
  --shadow: none; --shadow-lg: 0 24px 70px rgba(0,0,0,.6);
  color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); }
body {
  font-family: var(--font); color: var(--label); font-size: 17px; line-height: 1.3; letter-spacing: -.41px;
  -webkit-font-smoothing: antialiased; overflow: hidden; overscroll-behavior: none;
  -webkit-user-select: none; user-select: none; -webkit-text-size-adjust: 100%;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; letter-spacing: inherit; }
input, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; -webkit-user-select: text; user-select: text; }
svg { display: block; }
[hidden] { display: none !important; }
.num { font-family: var(--round); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.muted { color: var(--label-2); }
.press { transition: transform .35s var(--spring), opacity .2s; }
.press:active { transform: scale(.96); opacity: .85; transition-duration: .08s; }

/* ---------- app frame ---------- */
#app { position: fixed; inset: 0; }
.view {
  position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
  padding: calc(var(--st) + 8px) 16px calc(var(--tab-h) + var(--sb) + 40px);
  opacity: 0; visibility: hidden; transform: scale(.985); transition: opacity .28s var(--ease), transform .45s var(--spring), visibility 0s .3s;
  overscroll-behavior-y: contain; scrollbar-width: none;
}
.view::-webkit-scrollbar { display: none; }
.view.on { opacity: 1; visibility: visible; transform: none; transition: opacity .32s var(--ease), transform .55s var(--spring); }
.wrap { max-width: 680px; margin: 0 auto; }

/* collapsing nav bar */
.navbar {
  position: fixed; left: 0; right: 0; top: 0; z-index: 20; height: calc(var(--st) + 46px); padding-top: var(--st);
  display: flex; align-items: center; justify-content: center; pointer-events: none;
  opacity: 0; transition: opacity .2s; background: var(--glass-strong);
  -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px); border-bottom: .5px solid var(--sep);
}
.navbar b { font-size: 17px; font-weight: 600; }
.navbar.solid { opacity: 1; }
.head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 6px 4px 14px; }
.head .eyebrow { font-size: 13px; font-weight: 600; color: var(--label-2); text-transform: uppercase; letter-spacing: .02em; margin-bottom: 2px; }
.large-title { font-size: 34px; font-weight: 700; letter-spacing: .37px; line-height: 1.12; margin: 0; }
.avatar-btn { flex: none; }

/* ---------- avatars ---------- */
.av {
  --c: var(--c-shared); width: 34px; height: 34px; border-radius: 50%; display: inline-grid; place-items: center; flex: none;
  font-size: 17px; background: radial-gradient(120% 120% at 30% 20%, color-mix(in srgb, var(--c) 30%, #fff), color-mix(in srgb, var(--c) 70%, #000) 160%);
  box-shadow: inset 0 0 0 .5px rgba(255,255,255,.4), 0 2px 8px color-mix(in srgb, var(--c) 35%, transparent);
}
.av.sm { width: 22px; height: 22px; font-size: 11px; }
.av.lg { width: 64px; height: 64px; font-size: 32px; }
.av.xl { width: 92px; height: 92px; font-size: 46px; }
.av[data-u="denisse"] { --c: var(--c-denisse); }
.av[data-u="juan"] { --c: var(--c-juan); }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; background: var(--c, var(--c-shared)); }
.dot[data-u="denisse"] { --c: var(--c-denisse); } .dot[data-u="juan"] { --c: var(--c-juan); } .dot[data-u="shared"] { --c: var(--c-shared); }

/* ---------- cards & lists ---------- */
.card { background: var(--card); border-radius: var(--r-lg); padding: 18px; box-shadow: var(--shadow); margin-bottom: 14px; position: relative; }
.card.flush { padding: 0; overflow: hidden; }
.sec-title { display: flex; align-items: baseline; justify-content: space-between; margin: 26px 4px 10px; }
.sec-title h2 { font-size: 22px; font-weight: 700; letter-spacing: .35px; margin: 0; }
.sec-title button { color: var(--tint); font-size: 15px; font-weight: 500; }
.card-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.card-h h3 { margin: 0; font-size: 15px; font-weight: 600; color: var(--label-2); letter-spacing: -.2px; }
.card-h .link { color: var(--tint); font-size: 15px; font-weight: 500; }
.list { background: var(--card); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); margin-bottom: 14px; }
.row {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 11px 16px; min-height: 58px; width: 100%; text-align: left;
  background: var(--card); transition: background .2s;
}
.row::after { content: ''; position: absolute; left: 64px; right: 0; bottom: 0; height: .5px; background: var(--sep); }
.row:last-child::after, .row.last::after { display: none; }
.row:active { background: var(--fill); transition-duration: 0s; }
.row .main { flex: 1; min-width: 0; }
.row .t1 { font-size: 16px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 6px; }
.row .t2 { font-size: 13px; color: var(--label-2); margin-top: 2px; display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .amt { font-size: 16px; font-weight: 600; text-align: right; white-space: nowrap; }
.row .amt small { display: block; font-size: 12px; font-weight: 500; color: var(--label-2); margin-top: 2px; }
.amt.in { color: var(--green); }
.chev { width: 8px; height: 13px; color: var(--label-3); flex: none; }
.ic {
  --c: #8e8e93; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; font-size: 20px;
  background: color-mix(in srgb, var(--c) 18%, transparent);
}
.ic.sm { width: 30px; height: 30px; border-radius: 9px; font-size: 15px; }
.day-h { display: flex; justify-content: space-between; align-items: baseline; padding: 18px 6px 7px; font-size: 13px; font-weight: 600; color: var(--label-2); text-transform: uppercase; letter-spacing: .02em; }
.day-h span:last-child { text-transform: none; font-family: var(--round); font-variant-numeric: tabular-nums; }

/* swipe to delete */
.swipe { position: relative; overflow: hidden; }
.swipe .del-bg { opacity: 0; transition: opacity .2s; } .swipe.reveal .del-bg { opacity: 1; }
.swipe .del-bg { position: absolute; inset: 0; background: var(--red); display: flex; justify-content: flex-end; align-items: center; padding-right: 22px; color: #fff; font-weight: 600; font-size: 15px; }
.swipe .row { touch-action: pan-y; z-index: 1; transition: transform .45s var(--spring), background .2s; }
.swipe.dragging .row { transition: none; }

/* ---------- hero (aurora) ---------- */
.hero {
  position: relative; overflow: hidden; border-radius: var(--r-xl); padding: 22px 20px 18px; color: #fff; margin-bottom: 14px;
  background: var(--aurora); box-shadow: 0 18px 50px -12px rgba(110,60,240,.55);
  isolation: isolate;
}
.hero::before, .hero::after { content: ''; position: absolute; border-radius: 50%; filter: blur(30px); z-index: -1; opacity: .7; animation: drift 14s ease-in-out infinite alternate; }
.hero::before { width: 220px; height: 220px; background: #f982c2; right: -60px; top: -80px; }
.hero::after { width: 260px; height: 260px; background: #3a5bff; left: -90px; bottom: -140px; animation-delay: -6s; }
@keyframes drift { to { transform: translate(30px, 20px) scale(1.15); } }
@media (prefers-reduced-motion: reduce) { .hero::before, .hero::after { animation: none; } }
.hero .lbl { font-size: 14px; font-weight: 600; opacity: .85; display: flex; align-items: center; gap: 6px; }
.hero .big { font-size: 46px; font-weight: 700; line-height: 1.05; margin: 6px 0 4px; letter-spacing: -.03em; }
.hero .sub { font-size: 14px; opacity: .9; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pill-glass {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 99px; font-size: 13px; font-weight: 600;
  background: rgba(255,255,255,.2); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.hero-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; }
.hero-grid > div {
  background: rgba(255,255,255,.16); border-radius: 16px; padding: 10px 11px; box-shadow: inset 0 0 0 .5px rgba(255,255,255,.35);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); min-width: 0;
}
.hero-grid small { display: block; font-size: 11.5px; font-weight: 600; opacity: .82; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-grid b { display: block; font-size: 15.5px; font-weight: 700; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pace { margin-top: 14px; }
.pace-bar { position: relative; height: 8px; border-radius: 8px; background: rgba(255,255,255,.22); overflow: visible; }
.pace-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 8px; background: #fff; transition: width 1s var(--spring); }
.pace-bar em { position: absolute; top: -4px; bottom: -4px; width: 2px; border-radius: 2px; background: rgba(255,255,255,.9); box-shadow: 0 0 0 2px rgba(110,60,240,.35); }
.pace-txt { display: flex; justify-content: space-between; font-size: 12.5px; margin-top: 7px; opacity: .9; font-weight: 500; }

/* ---------- segmented control ---------- */
.seg { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--fill); border-radius: 10px; padding: 2px; }
.seg .thumb { position: absolute; top: 2px; bottom: 2px; left: 2px; border-radius: 8px; background: var(--elev); box-shadow: 0 3px 8px rgba(0,0,0,.12), 0 0 0 .5px rgba(0,0,0,.04); transition: transform .45s var(--spring), width .3s; }
.seg button { position: relative; z-index: 1; font-size: 13.5px; font-weight: 500; padding: 7px 6px; border-radius: 8px; transition: opacity .2s; white-space: nowrap; display: flex; align-items: center; justify-content: center; gap: 5px; }
.seg button.on { font-weight: 600; }
.seg.glass { background: var(--glass); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); box-shadow: inset 0 0 0 .5px var(--glass-line); }


/* chips */
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 2px 4px; margin: 0 -2px; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; padding: 7px 13px; border-radius: 99px; background: var(--fill); font-size: 14px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; transition: background .25s, color .25s, transform .35s var(--spring); }
.chip.on { background: var(--label); color: var(--bg-2); }
.chip:active { transform: scale(.95); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 50px; padding: 0 22px; border-radius: 16px; font-weight: 600; font-size: 17px; background: var(--tint); color: #fff; transition: transform .35s var(--spring), opacity .2s; }
.btn:active { transform: scale(.97); opacity: .9; transition-duration: .06s; }
.btn.block { width: 100%; }
.btn.aurora { background: var(--aurora); box-shadow: 0 10px 26px -8px rgba(120,60,240,.6); }
.btn.soft { background: var(--tint-soft); color: var(--tint); }
.btn.gray { background: var(--fill); color: var(--label); }
.btn.danger { background: rgba(255,59,48,.12); color: var(--red); }
.btn.sm { height: 36px; font-size: 15px; padding: 0 14px; border-radius: 12px; }
.btn[disabled] { opacity: .4; pointer-events: none; }
.icon-btn { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--fill); color: var(--label); transition: transform .35s var(--spring); }
.icon-btn:active { transform: scale(.9); }
.icon-btn svg { width: 18px; height: 18px; }

/* ---------- tab bar (floating Liquid Glass) ---------- */
.tabbar {
  position: fixed; z-index: 30; left: 50%; bottom: calc(var(--sb) + 10px); transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; transition: transform .5s var(--spring), opacity .3s;
}
.tabbar.away { transform: translate(-50%, 140%); opacity: 0; }
.tabs {
  position: relative; display: flex; height: var(--tab-h); padding: 4px; border-radius: 99px;
  background: var(--glass); -webkit-backdrop-filter: blur(24px) saturate(190%); backdrop-filter: blur(24px) saturate(190%);
  box-shadow: inset 0 .5px 0 var(--glass-edge), inset 0 0 0 .5px var(--glass-line), 0 10px 40px rgba(0,0,0,.14);
}
.tabs .lens {
  position: absolute; top: 4px; bottom: 4px; left: 4px; width: 72px; border-radius: 99px; background: var(--fill);
  transition: transform .55s var(--spring); box-shadow: inset 0 .5px 0 var(--glass-edge);
}
.tab { position: relative; z-index: 1; width: 72px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--label); font-size: 10.5px; font-weight: 600; letter-spacing: 0; transition: color .3s; }
.tab svg { width: 24px; height: 24px; transition: transform .45s var(--bounce); }
.tab.on { color: var(--tint); }
.tab.on svg { transform: scale(1.06); }
.tab:active svg { transform: scale(.86); }
.fab {
  width: var(--tab-h); height: var(--tab-h); border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--aurora);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 0 0 .5px rgba(255,255,255,.3), 0 12px 32px -6px rgba(120,60,240,.65);
  transition: transform .45s var(--bounce);
}
.fab svg { width: 28px; height: 28px; }
.fab:active { transform: scale(.88); transition-duration: .1s; }

/* ---------- island toast ---------- */
#island {
  position: fixed; z-index: 100; left: 50%; top: calc(var(--st) + 8px); transform: translate(-50%, -30px) scale(.6); opacity: 0;
  min-height: 44px; max-width: calc(100vw - 32px); padding: 8px 10px 8px 12px; border-radius: 26px; background: #0b0b0d; color: #fff;
  display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; box-shadow: 0 12px 40px rgba(0,0,0,.3);
  transition: transform .55s var(--bounce), opacity .25s; pointer-events: none;
}
#island.on { transform: translate(-50%, 0) scale(1); opacity: 1; pointer-events: auto; }
#island .i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--green); flex: none; }
#island .i.err { background: var(--red); } #island .i.info { background: var(--aurora); }
#island .i svg { width: 15px; height: 15px; color: #fff; }
#island button { margin-left: 4px; padding: 6px 12px; border-radius: 99px; background: rgba(255,255,255,.16); font-size: 14px; font-weight: 600; color: #fff; }
#island .txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- sheets ---------- */
.scrim { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.32); opacity: 0; transition: opacity .4s var(--ease); }
.scrim.on { opacity: 1; }
.sheet {
  position: fixed; z-index: 51; left: 0; right: 0; bottom: 0; max-height: calc(100% - var(--st) - 12px); display: flex; flex-direction: column;
  background: var(--bg); border-radius: 30px 30px 0 0; transform: translateY(105%); transition: transform .55s var(--spring);
  box-shadow: var(--shadow-lg); padding-bottom: var(--sb);
}
.sheet.tall { height: calc(100% - var(--st) - 12px); }
.sheet.on { transform: none; }
.sheet.drag { transition: none; }
.sheet .grab { width: 38px; height: 5px; border-radius: 3px; background: var(--fill-2); margin: 7px auto 0; flex: none; }
.sheet-h { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 6px 16px 10px; flex: none; }
.sheet-h h3 { margin: 0; font-size: 17px; font-weight: 600; text-align: center; white-space: nowrap; }
.sheet-h .l { justify-self: start; } .sheet-h .r { justify-self: end; }
.txt-btn { color: var(--tint); font-size: 17px; padding: 6px 2px; }
.txt-btn.strong { font-weight: 600; }
.sheet-b { overflow-y: auto; padding: 4px 16px 20px; flex: 1; overscroll-behavior: contain; }
@media (min-width: 760px) {
  .sheet { left: 50%; right: auto; bottom: 50%; width: 460px; border-radius: 28px; transform: translate(-50%, 60%) scale(.96); opacity: 0; transition: transform .5s var(--spring), opacity .3s; max-height: 88vh; padding-bottom: 0; }
  .sheet.tall { height: min(860px, 92vh); }
  .sheet.on { transform: translate(-50%, 50%); opacity: 1; }
}

/* alert */
.alert {
  position: fixed; z-index: 61; left: 50%; top: 50%; width: 280px; transform: translate(-50%, -50%) scale(1.15); opacity: 0;
  border-radius: 16px; background: var(--glass-strong); -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
  transition: transform .35s var(--spring), opacity .2s; text-align: center; overflow: hidden;
}
.alert.on { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.alert .a-t { padding: 20px 16px 16px; } .alert b { font-size: 17px; } .alert p { margin: 4px 0 0; font-size: 13px; color: var(--label-2); }
.alert .a-b { display: grid; grid-template-columns: 1fr 1fr; border-top: .5px solid var(--sep); }
.alert .a-b button { padding: 12px; font-size: 17px; color: var(--tint); }
.alert .a-b button + button { border-left: .5px solid var(--sep); font-weight: 600; }
.alert .a-b button.red { color: var(--red); }

/* ---------- forms ---------- */
.group { background: var(--card); border-radius: 14px; overflow: hidden; margin-bottom: 18px; }
.group-label { font-size: 13px; color: var(--label-2); text-transform: uppercase; margin: 0 16px 7px; letter-spacing: .02em; }
.group-foot { font-size: 13px; color: var(--label-2); margin: -10px 16px 18px; }
.field { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 16px; position: relative; }
.field + .field::before { content: ''; position: absolute; top: 0; left: 16px; right: 0; height: .5px; background: var(--sep); }
.field label { flex: none; font-size: 17px; }
.field input, .field select, .field textarea { flex: 1; min-width: 0; border: 0; background: none; outline: none; font-size: 17px; text-align: right; padding: 12px 0; }
.field textarea { text-align: left; resize: none; min-height: 80px; }
.field input::placeholder, .field textarea::placeholder { color: var(--label-3); }
.field .val { margin-left: auto; color: var(--label-2); display: flex; align-items: center; gap: 8px; }
.field.btnrow { width: 100%; text-align: left; }
.field.btnrow:active { background: var(--fill); }
.field .fi { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: #fff; flex: none; font-size: 16px; }
.field .fi svg { width: 18px; height: 18px; }
.toggle { appearance: none; -webkit-appearance: none; width: 51px; height: 31px; border-radius: 99px; background: var(--fill-2); position: relative; transition: background .25s; flex: none; margin-left: auto; cursor: pointer; }
.toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(0,0,0,.15); transition: transform .35s var(--spring); }
.toggle:checked { background: var(--green); } .toggle:checked::after { transform: translateX(20px); }

/* ---------- entry sheet (keypad) ---------- */
.entry { display: flex; flex-direction: column; height: 100%; }
.entry .sheet-b { display: flex; flex-direction: column; gap: 9px; padding-bottom: 8px; }
.entry .dyn { display: flex; flex-direction: column; gap: 9px; }
.entry-sheet .sheet-h { grid-template-columns: auto 1fr auto; gap: 12px; padding-bottom: 6px; }
.entry-sheet .sheet-h h3 { min-width: 0; }
.entry-sheet .sheet-h .seg button { padding: 6px 4px; }
.amount-wrap { padding: 0; }
.desc-input { padding: 11px 14px !important; }
.opt-row { padding: 6px 8px !important; }
.amount-wrap { text-align: center; padding: 6px 0 2px; }
.amount { font-family: var(--round); font-size: clamp(40px, 6vh, 54px); font-weight: 700; letter-spacing: -.03em; line-height: 1.05; font-variant-numeric: tabular-nums; transition: transform .3s var(--bounce), color .3s; display: inline-flex; align-items: baseline; gap: 2px; }
.amount.zero { color: var(--label-3); }
.amount.bump { transform: scale(1.04); }
.amount .caret { width: 3px; height: .8em; border-radius: 2px; background: var(--aurora); align-self: center; margin-left: 4px; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.amount-expr { font-size: 14px; color: var(--label-2); min-height: 18px; font-family: var(--round); font-variant-numeric: tabular-nums; }
.amount.shake { animation: shake .4s; }
@keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
.desc-input { width: 100%; border: 0; outline: none; background: var(--card); border-radius: 14px; padding: 13px 14px; font-size: 17px; text-align: center; }
.suggest { min-height: 0; }
.suggest .chip { background: var(--card); box-shadow: inset 0 0 0 .5px var(--sep); }
.cat-scroll { display: grid; grid-auto-flow: column; grid-template-rows: auto; grid-auto-columns: 68px; gap: 4px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px 2px; scroll-snap-type: x proximity; }
.cat-scroll::-webkit-scrollbar { display: none; }
.cat { display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 11px; font-weight: 500; color: var(--label-2); scroll-snap-align: start; padding: 2px 0; }
.cat .ic { width: 46px; height: 46px; border-radius: 15px; font-size: 22px; transition: transform .4s var(--bounce), box-shadow .3s, background .3s; }
.cat span { max-width: 66px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cat.on .ic { background: var(--c); transform: scale(1.06); box-shadow: 0 6px 16px -4px color-mix(in srgb, var(--c) 70%, transparent); }
.cat.on span { color: var(--label); font-weight: 600; }
.opt-row { display: flex; align-items: center; gap: 8px; background: var(--card); border-radius: 14px; padding: 8px 10px; }
.opt-row > .lbl { font-size: 13px; color: var(--label-2); font-weight: 500; width: 54px; flex: none; }
.opt-row .seg { flex: 1; }
.who { display: flex; gap: 6px; flex: 1; }
.who button { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 5px 6px; border-radius: 11px; font-size: 14px; font-weight: 500; transition: background .25s, box-shadow .25s; }
.who button.on { background: color-mix(in srgb, var(--c) 16%, transparent); box-shadow: inset 0 0 0 1.5px var(--c); font-weight: 600; }
.who button[data-u="denisse"] { --c: var(--c-denisse); } .who button[data-u="juan"] { --c: var(--c-juan); } .who button[data-u="shared"] { --c: var(--c-shared); }
.meta-row { display: flex; gap: 8px; align-items: center; }
.meta-row .chip { background: var(--card); }
.meta-row .chip.on { background: var(--label); color: var(--bg-2); }
.date-chip { position: relative; overflow: hidden; }
.date-chip input { position: absolute; inset: 0; opacity: 0; width: 100%; }
.keypad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; padding: 6px 16px 8px; flex: none; }
.key {
  height: clamp(42px, 5.6vh, 54px); border-radius: 16px; background: var(--card); font-family: var(--round); font-size: 26px; font-weight: 500;
  display: grid; place-items: center; transition: transform .3s var(--spring), background .2s; box-shadow: 0 1px 0 rgba(0,0,0,.06);
}
.key:active { transform: scale(.93); background: var(--fill-2); transition-duration: .05s; }
.key.op { background: var(--fill); font-size: 24px; color: var(--tint); }
.key svg { width: 24px; height: 24px; }
.key.ok { grid-row: span 2; height: auto; background: var(--aurora); color: #fff; box-shadow: 0 10px 24px -8px rgba(120,60,240,.6); }
.key.ok svg { width: 30px; height: 30px; }
.split-line { font-size: 12.5px; color: var(--label-2); text-align: center; margin-top: -4px; }
.split-line button { color: var(--tint); font-weight: 600; }

/* ---------- charts ---------- */
.bars { position: relative; height: 130px; display: flex; align-items: flex-end; gap: 2px; padding-top: 14px; }
.bars .b { flex: 1; position: relative; height: 100%; display: flex; align-items: flex-end; justify-content: center; }
.bars .b i { display: block; width: 100%; max-width: 12px; min-height: 2px; border-radius: 4px 4px 1px 1px; background: var(--fill-2); transition: height .8s var(--spring), background .3s; }
.bars .b.has i { background: var(--tint); }
.bars .b.today i { background: var(--aurora); }
.bars .b.future i { background: var(--fill); }
.bars .b.sel i { box-shadow: 0 0 0 2px var(--bg-2), 0 0 0 4px var(--tint); }
.bars .guide { position: absolute; left: 0; right: 0; border-top: 1.5px dashed var(--label-3); pointer-events: none; }
.bars .guide span { position: absolute; right: 0; top: -17px; font-size: 11px; color: var(--label-2); font-weight: 600; background: var(--card); padding: 0 3px; }
.axis { display: flex; justify-content: space-between; font-size: 11px; color: var(--label-2); margin-top: 6px; font-variant-numeric: tabular-nums; }
.tip {
  position: absolute; z-index: 3; transform: translate(-50%, -100%); pointer-events: none; background: var(--label); color: var(--bg-2);
  font-size: 12px; font-weight: 600; padding: 5px 9px; border-radius: 9px; white-space: nowrap; transition: opacity .15s; box-shadow: 0 6px 18px rgba(0,0,0,.2);
}
.tip small { display: block; font-weight: 500; opacity: .7; font-size: 11px; }
.spectrum { display: flex; height: 14px; gap: 2px; border-radius: 7px; overflow: hidden; margin: 4px 0 14px; }
.spectrum i { display: block; height: 100%; min-width: 3px; transition: flex-grow .8s var(--spring); }
.spectrum i:first-child { border-radius: 7px 0 0 7px; } .spectrum i:last-child { border-radius: 0 7px 7px 0; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--label-2); margin-top: 10px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.prog { height: 6px; border-radius: 6px; background: var(--fill); overflow: hidden; margin-top: 7px; }
.prog i { display: block; height: 100%; border-radius: 6px; background: var(--c, var(--tint)); transition: width .9s var(--spring); }
.prog.over i { background: var(--red); }
.trend { display: flex; align-items: flex-end; gap: 10px; height: 150px; padding-top: 10px; }
.trend .m { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; position: relative; }
.trend .stack { display: flex; flex-direction: column-reverse; gap: 2px; width: 100%; max-width: 30px; justify-content: flex-start; height: calc(100% - 20px); }
.trend .stack i { display: block; width: 100%; border-radius: 2px; transition: height .8s var(--spring); }
.trend .stack i:last-child { border-radius: 4px 4px 2px 2px; }
.trend .stack i:first-child { border-radius: 2px 2px 2px 2px; }
.trend .stack i:only-child { border-radius: 4px 4px 2px 2px; }
.trend .m small { font-size: 11px; color: var(--label-2); font-weight: 600; text-transform: capitalize; }
.trend .m.cur small { color: var(--label); }
.trend .m.sel .stack { filter: drop-shadow(0 0 0 var(--tint)); }
.trend .m.sel small { color: var(--tint); }

/* ring */
.ring { position: relative; flex: none; display: grid; place-items: center; }
.ring svg { transform: rotate(-90deg); }
.ring circle { fill: none; stroke-linecap: round; }
.ring .track { stroke: var(--fill); }
.ring .val { transition: stroke-dashoffset 1.1s var(--spring); }
.ring .in { position: absolute; inset: 0; display: grid; place-items: center; font-size: 22px; }

/* ---------- couple card ---------- */
.couple { display: flex; align-items: center; gap: 12px; }
.couple .faces { display: flex; }
.couple .faces .av + .av { margin-left: -10px; box-shadow: 0 0 0 2.5px var(--card); }
.couple .txt { flex: 1; min-width: 0; }
.couple .txt b { display: block; font-size: 16px; }
.couple .txt span { font-size: 13px; color: var(--label-2); }
.split-bar { display: flex; height: 10px; gap: 2px; border-radius: 6px; overflow: hidden; margin: 14px 0 8px; }
.split-bar i { display: block; transition: flex-grow .9s var(--spring); }
.split-legend { display: flex; justify-content: space-between; font-size: 13px; }
.split-legend span { display: flex; align-items: center; gap: 6px; }
.split-legend b { font-family: var(--round); font-variant-numeric: tabular-nums; }

/* ---------- pockets ---------- */
.pockets-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pocket {
  --c: var(--blue); position: relative; overflow: hidden; background: var(--card); border-radius: var(--r-lg); padding: 16px; text-align: left;
  box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px; min-height: 176px; transition: transform .4s var(--spring);
}
.pocket:active { transform: scale(.97); }
.pocket::before { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 70% at 100% 0%, color-mix(in srgb, var(--c) 22%, transparent), transparent 70%); pointer-events: none; }
.pocket .top { display: flex; justify-content: space-between; align-items: flex-start; }
.pocket .name { font-weight: 600; font-size: 15px; line-height: 1.2; }
.pocket .bal { font-size: 22px; font-weight: 700; margin-top: auto; }
.pocket .of { font-size: 12.5px; color: var(--label-2); }
.pocket.new { align-items: center; justify-content: center; color: var(--tint); font-weight: 600; font-size: 15px; background: transparent; box-shadow: inset 0 0 0 1.5px var(--sep); border: 0; }
.pocket.new::before { display: none; }
.pocket.new .plus { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--tint-soft); }
.pocket-strip { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 4px; scroll-snap-type: x mandatory; }
.pocket-strip::-webkit-scrollbar { display: none; }
.pocket-strip .pocket { flex: 0 0 150px; min-height: 150px; scroll-snap-align: start; }
.owner-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; color: var(--label-2); }
.pocket-hero { text-align: center; padding: 6px 0 10px; }
.pocket-hero .ring { margin: 0 auto 14px; }
.pocket-hero .bal { font-size: 38px; font-weight: 700; }
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 14px; }
.stat { background: var(--card); border-radius: 18px; padding: 13px 14px; box-shadow: var(--shadow); }
.stat small { display: block; font-size: 12.5px; color: var(--label-2); font-weight: 500; }
.stat b { display: block; font-size: 19px; font-weight: 700; margin-top: 3px; }
.templates { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
.templates button { background: var(--card); border-radius: 16px; padding: 12px 6px; font-size: 12.5px; font-weight: 500; display: flex; flex-direction: column; align-items: center; gap: 4px; transition: box-shadow .2s, transform .3s var(--spring); }
.templates button span { font-size: 26px; }
.templates button.on { box-shadow: inset 0 0 0 2px var(--tint); }
.swatches { display: flex; gap: 10px; padding: 12px 16px; flex-wrap: wrap; }
.swatches button { width: 30px; height: 30px; border-radius: 50%; background: var(--c); transition: transform .3s var(--bounce); }
.swatches button.on { box-shadow: 0 0 0 2.5px var(--card), 0 0 0 4.5px var(--c); transform: scale(1.05); }
.emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; padding: 10px 12px; }
.emoji-grid button { font-size: 24px; height: 40px; border-radius: 10px; }
.emoji-grid button.on { background: var(--tint-soft); }

/* ---------- calendar (Zaim-style) ---------- */
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal .dow { font-size: 11px; font-weight: 600; color: var(--label-2); text-align: center; padding-bottom: 4px; text-transform: uppercase; }
.cal .d { aspect-ratio: 1 / 1.08; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; font-size: 14px; font-weight: 500; position: relative; background: color-mix(in srgb, var(--tint) calc(var(--h, 0) * 55%), transparent); transition: transform .3s var(--spring); }
.cal .d small { font-size: 9.5px; font-weight: 600; color: var(--label-2); font-family: var(--round); }
.cal .d.hot { color: #fff; } .cal .d.hot small { color: rgba(255,255,255,.85); }
.cal .d.today { box-shadow: inset 0 0 0 2px var(--tint); }
.cal .d.sel { box-shadow: inset 0 0 0 2px var(--label); }
.cal .d.nospend::after { content: ''; position: absolute; bottom: 5px; width: 4px; height: 4px; border-radius: 50%; background: var(--green); }
.cal .d:active { transform: scale(.92); }
.cal-legend { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--label-2); margin-top: 12px; gap: 10px; }
.heat { display: flex; gap: 3px; align-items: center; }
.heat i { width: 14px; height: 10px; border-radius: 3px; }

/* ---------- search ---------- */
.search { display: flex; align-items: center; gap: 8px; height: 38px; border-radius: 12px; background: var(--fill); padding: 0 10px; margin-bottom: 12px; color: var(--label-2); }
.search svg { width: 17px; height: 17px; flex: none; }
.search input { flex: 1; border: 0; outline: none; background: none; font-size: 17px; color: var(--label); min-width: 0; }
.search input::placeholder { color: var(--label-2); }

/* month switcher */
.month-sw { display: inline-flex; align-items: center; gap: 2px; background: var(--fill); border-radius: 99px; padding: 3px; }
.month-sw button { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: var(--label-2); }
.month-sw button:active { background: var(--fill-2); }
.month-sw button svg { width: 14px; height: 14px; }
.month-sw span { font-size: 14px; font-weight: 600; padding: 0 6px; text-transform: capitalize; min-width: 86px; text-align: center; }

/* insights */
.insights { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px 14px; padding: 2px 16px 4px; scroll-snap-type: x mandatory; }
.insights::-webkit-scrollbar { display: none; }
.insight { flex: 0 0 78%; max-width: 320px; scroll-snap-align: start; background: var(--card); border-radius: 20px; padding: 14px 15px; display: flex; gap: 12px; align-items: flex-start; box-shadow: var(--shadow); }
.insight .e { font-size: 22px; width: 40px; height: 40px; border-radius: 12px; background: var(--aurora-soft); display: grid; place-items: center; flex: none; }
.insight b { display: block; font-size: 15px; margin-bottom: 2px; }
.insight p { margin: 0; font-size: 13.5px; color: var(--label-2); line-height: 1.35; }

/* kakeibo */
.pillars { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pillar { background: var(--card-2); border-radius: 16px; padding: 12px; }
.pillar .k { font-size: 20px; }
.pillar b { display: block; font-size: 17px; margin-top: 6px; }
.pillar small { font-size: 12.5px; color: var(--label-2); }
.kanji { font-size: 12px; color: var(--label-3); margin-left: 4px; font-weight: 500; }
.q { background: var(--card); border-radius: 16px; padding: 14px 16px; margin-bottom: 10px; }
.q label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.q textarea { width: 100%; min-height: 64px; border: 0; outline: none; resize: none; background: var(--card-2); border-radius: 12px; padding: 10px 12px; font-size: 16px; }
.q .other { margin-top: 8px; font-size: 13.5px; color: var(--label-2); background: var(--aurora-soft); padding: 8px 10px; border-radius: 10px; }

/* empty */
.empty { text-align: center; padding: 34px 20px; color: var(--label-2); font-size: 15px; }
.empty .e { font-size: 44px; margin-bottom: 8px; }
.empty b { display: block; color: var(--label); font-size: 17px; margin-bottom: 4px; }

/* ---------- lock screen ---------- */
#lock {
  position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff;
  background: #0b0820; overflow: hidden; padding: calc(var(--st) + 20px) 24px calc(var(--sb) + 20px); transition: opacity .6s var(--ease), transform .7s var(--spring);
}
#lock.out { opacity: 0; transform: scale(1.08); pointer-events: none; }
#lock .orb { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .85; animation: drift 16s ease-in-out infinite alternate; }
#lock .orb.a { width: 380px; height: 380px; background: #5271ff; left: -120px; top: -80px; }
#lock .orb.b { width: 320px; height: 320px; background: #9c1df5; right: -120px; top: 30%; animation-delay: -5s; }
#lock .orb.c { width: 360px; height: 360px; background: #f982c2; left: 10%; bottom: -180px; animation-delay: -9s; }
.lock-in { position: relative; width: 100%; max-width: 340px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.brand { font-size: 15px; font-weight: 700; letter-spacing: .02em; opacity: .9; display: flex; align-items: center; gap: 8px; margin-bottom: 28px; }
.brand .logo { width: 30px; height: 30px; border-radius: 9px; }
.lock-title { font-size: 30px; font-weight: 700; margin: 0 0 6px; letter-spacing: .2px; }
.lock-sub { font-size: 15px; opacity: .75; margin: 0 0 30px; }
.people { display: flex; gap: 22px; justify-content: center; }
.person { display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 17px; font-weight: 600; transition: transform .4s var(--spring); }
.person:active { transform: scale(.93); }
.person .av { box-shadow: 0 0 0 1px rgba(255,255,255,.35), 0 20px 40px -10px color-mix(in srgb, var(--c) 80%, transparent); }
.pin-dots { display: flex; gap: 18px; margin: 4px 0 34px; }
.pin-dots i { width: 13px; height: 13px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #fff; transition: background .2s, transform .3s var(--bounce); }
.pin-dots i.on { background: #fff; transform: scale(1.1); }
.pin-dots.shake { animation: shake .45s; }
.pinpad { display: grid; grid-template-columns: repeat(3, 76px); gap: 16px 24px; }
.pk { width: 76px; height: 76px; border-radius: 50%; background: rgba(255,255,255,.14); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; transition: background .4s; box-shadow: inset 0 .5px 0 rgba(255,255,255,.35); }
.pk b { font-size: 34px; font-weight: 400; line-height: 1; font-family: var(--font); }
.pk small { font-size: 10px; font-weight: 600; letter-spacing: 2px; opacity: .8; margin-top: 2px; min-height: 12px; }
.pk:active { background: rgba(255,255,255,.4); transition-duration: 0s; }
.pk.blank { background: none; box-shadow: none; pointer-events: none; }
.pk.txt { background: none; box-shadow: none; font-size: 17px; }
.lock-err { min-height: 22px; font-size: 15px; margin-top: 18px; color: #ffd3e8; }
.lock-back { margin-top: 18px; font-size: 15px; opacity: .8; }
.lang-sw { position: absolute; top: calc(var(--st) + 14px); right: 18px; z-index: 2; padding: 6px 12px; border-radius: 99px; background: rgba(255,255,255,.14); font-size: 14px; font-weight: 600; color: #fff; }

/* ---------- desktop ---------- */
@media (min-width: 900px) {
  .view { padding-left: 24px; padding-right: 24px; }
  .pockets-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 370px) {
  .tab { width: 60px; } .tabs .lens { width: 60px; }
  .hero .big { font-size: 40px; }
  .key { height: 46px; }
}

/* ---------- swipe actions: Editar (blue) + Eliminar (red) ---------- */
.swipe .row { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.swipe .del-bg .act { height: 100%; width: 86px; display: grid; place-content: center; justify-items: center; gap: 3px; color: #fff; font-size: 13px; font-weight: 600; }
.swipe .del-bg .act svg { width: 22px; height: 22px; }
.swipe .del-bg:has(.act) { padding-right: 0; gap: 0; }
.swipe .del-bg .act.edit { background: var(--tint); transition: width .3s var(--spring), opacity .2s; overflow: hidden; }
.swipe.full .del-bg .act.edit { width: 0; opacity: 0; }
.swipe .del-bg .act:active { filter: brightness(.9); }

/* ---------- money: accounts and credit cards ---------- */
.acct-row { flex-wrap: nowrap; }
.acct-row[hidden] { display: none; }
.acct-scroll { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; padding: 2px; margin: -2px; }
.acct-scroll::-webkit-scrollbar { display: none; }
.acct-chip {
  flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px 6px 7px; border-radius: 11px; font-size: 14px; font-weight: 500;
  white-space: nowrap; transition: background .25s, box-shadow .25s, transform .3s var(--spring);
}
.acct-chip i { font-style: normal; width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; font-size: 13px; background: color-mix(in srgb, var(--c) 18%, transparent); }
.acct-chip.on { background: color-mix(in srgb, var(--c) 14%, transparent); box-shadow: inset 0 0 0 1.5px var(--c); font-weight: 600; }
.acct-chip:active { transform: scale(.95); }

.who-filter { margin: 0 0 14px; }
.money-actions { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; margin: 2px 0 6px; }
.money-actions button {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px 10px; border-radius: var(--r-lg);
  background: var(--card); box-shadow: var(--shadow); font-size: 13px; font-weight: 600; color: var(--label); transition: transform .35s var(--spring);
}
.money-actions button svg { width: 24px; height: 24px; color: var(--tint); }
.money-actions button:active { transform: scale(.96); }

.cards { display: grid; gap: 12px; }
.ccard {
  position: relative; overflow: hidden; display: block; width: 100%; text-align: left; color: #fff; border-radius: 22px; padding: 16px 18px 14px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 92%, #fff) 0%, var(--c) 45%, color-mix(in srgb, var(--c) 70%, #000) 100%);
  box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--c) 80%, transparent), inset 0 0 0 .5px rgba(255,255,255,.18);
  transition: transform .4s var(--spring);
}
.ccard::after { content: ''; position: absolute; right: -40px; top: -60px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.22), transparent 70%); pointer-events: none; }
.ccard:active { transform: scale(.98); }
.ccard .cc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ccard .cc-name { font-weight: 600; font-size: 15px; letter-spacing: -.1px; opacity: .95; }
.ccard .cc-owner .av { box-shadow: 0 0 0 2px rgba(255,255,255,.5); }
.ccard .cc-mid { margin: 14px 0 10px; }
.ccard .cc-mid small { display: block; font-size: 12px; font-weight: 600; opacity: .8; text-transform: uppercase; letter-spacing: .04em; }
.ccard .cc-mid b { font-family: var(--round); font-size: 30px; font-weight: 700; letter-spacing: -.02em; }
.ccard .cc-bar { height: 6px; border-radius: 3px; background: rgba(255,255,255,.25); overflow: hidden; }
.ccard .cc-bar i { display: block; height: 100%; border-radius: 3px; background: #fff; transition: width .8s var(--ease); }
.ccard .cc-foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 7px; font-size: 12.5px; opacity: .9; }
.ccard .cc-due { margin-top: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 99px; font-size: 13px; font-weight: 500; background: rgba(255,255,255,.18); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.ccard .cc-due.urgent { background: #fff; color: #c4161c; }
.ccard .cc-due svg { width: 15px; height: 15px; }
.ccard.big { margin-bottom: 4px; }

.row .chev { color: var(--label-3); width: 16px; height: 16px; display: grid; place-items: center; margin-left: -4px; }
.row .chev svg { width: 14px; height: 14px; }
.amt.neg { color: var(--red); }
.row .amt small { white-space: nowrap; }

.acct-hero { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 6px 0 16px; }
.acct-hero > .ccard { text-align: left; }
.acct-hero .bal { font-family: var(--round); font-size: 40px; font-weight: 700; letter-spacing: -.03em; }
.ic.lg { width: 64px; height: 64px; border-radius: 20px; font-size: 32px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin-bottom: 14px; }

.savings-strip { display: grid; gap: 12px; }
.savings-strip > div:first-child small { display: block; font-size: 13px; color: var(--label-2); font-weight: 500; }
.savings-strip > div:first-child b { font-family: var(--round); font-size: 26px; font-weight: 700; }
.savings-strip .ss-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.savings-strip .ss-grid > div { background: var(--fill); border-radius: 12px; padding: 8px 10px; }
.savings-strip .ss-grid small { display: block; font-size: 11.5px; color: var(--label-2); font-weight: 600; }
.savings-strip .ss-grid b { font-size: 15px; }
.onboard .templates { margin-bottom: 10px; }
.xfer .acct-row { margin-bottom: 8px; }
.xfer-line { text-align: center; font-size: 13px; margin-top: 2px; min-height: 18px; }

/* entry sheet a little tighter now that it has the "Con" row (keeps the date chips above the keypad) */
.entry .sheet-b, .entry .dyn { gap: 7px; }
.entry .key:not(.ok) { height: clamp(40px, 5.1vh, 52px); }
.entry .cat .ic { width: 42px; height: 42px; border-radius: 14px; font-size: 20px; }
.entry .opt-row { padding: 5px 8px !important; }
.entry .acct-chip { padding-top: 5px; padding-bottom: 5px; }
.xfer .quick { flex-wrap: wrap; overflow: visible; }
.onboard .templates button { background: var(--fill); }

/* ---------- account pictures (logos the user picked) ---------- */
img.logo { width: 100%; height: 100%; object-fit: cover; display: block; }
.ic.has-logo { background: #fff; overflow: hidden; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.08); }
.ic.lg.has-logo { border-radius: 18px; box-shadow: 0 6px 18px -8px rgba(0,0,0,.35), inset 0 0 0 .5px rgba(0,0,0,.08); }
.acct-chip i.has-logo { background: #fff; overflow: hidden; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.1); }
.ccard .cc-name { display: inline-flex; align-items: center; gap: 9px; }
.ccard .cc-logo { width: 30px; height: 30px; border-radius: 9px; overflow: hidden; background: #fff; flex: none; box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.mini-logo { font-style: normal; display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 4px; overflow: hidden; font-size: 11px; margin-right: -2px; flex: none; }
.logo-pick .field { padding-top: 10px; padding-bottom: 10px; }
.logo-prev { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; font-size: 28px; overflow: hidden; flex: none; background: color-mix(in srgb, var(--c) 18%, transparent); }
.logo-prev.has-logo { background: #fff; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.1); }
.logo-btns { margin-left: auto; display: flex; gap: 8px; }
.logo-btns label { cursor: pointer; }