/* Self-hosted so that no request — and no visitor IP — reaches Google. One variable file per
   family and subset covers every weight the app uses. */
@font-face { font-family:'DM Sans'; font-style:normal; font-weight:100 1000; font-display:swap; src:url('fonts/dm-sans-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:'DM Sans'; font-style:normal; font-weight:100 1000; font-display:swap; src:url('fonts/dm-sans-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:300 700; font-display:swap; src:url('fonts/space-grotesk-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:300 700; font-display:swap; src:url('fonts/space-grotesk-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Dawn over a night sea, as the icon has it — Libri is the bound book at night, Tracktivity the cool
   green, TicketWatch the plum and Gustus the tomato. --dawn is the colour anything interactive is
   drawn in. Money has two colours of its own and they are used for nothing else: --rise for what
   comes in, --fall for what goes out, so that a number's colour on this page always says its sign
   before it is read. --night is the forecast — the balance, the months ahead. */
:root { --ink:#1e1c3a; --muted:#76728e; --paper:#f5f3fa; --card:#fffeff; --line:#e3dfee; --dawn:#c9542a; --dawn-soft:#fbe6dc; --night:#3a3480; --night-soft:#e8e6f7; --rise:#18805f; --rise-soft:#dcf1e9; --fall:#bf3b62; --fall-soft:#fbe3ea; --sun:#f2b84b; }
* { box-sizing:border-box; }
/* Defensive: user-select inherits, so any future none on an ancestor would silently take away the
   long-press "paste" menu inside text fields. */
input,textarea { user-select:text; -webkit-user-select:text; }
/* Beats any display rule below: .login-shell sets display:flex, which otherwise outranks the
   browser's own [hidden] { display:none } and leaves the signed-out panel showing under every tab. */
[hidden] { display:none !important; }
/* Android browsers "boost" text they take for body copy, which silently overrides small sizes. */
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
/* A sideways drag would otherwise engage the browser's own swipe-to-go-back gesture, which nudges the
   whole page and drops fixed elements like the tab bar for a few frames. */
html,body { overscroll-behavior-x:none; }
/* The document does not scroll; the body inside it does. Browsers hang their own furniture — Samsung
   Internet's floating "scroll to top" button among it — off whatever the root scroller is, and in an
   installed app that button lands on top of the tab bar. See Libri's commit of the same name. */
html { height:100%; overflow:hidden; }
body { height:100%; overflow-x:hidden; overflow-y:auto; }
.shell { overflow-x:clip; }
/* Only transform and opacity are animated: those two the compositor handles on its own. */
@keyframes card-in-right { from { opacity:0; transform:translate3d(22%,0,0); } to { opacity:1; transform:none; } }
@keyframes card-in-left { from { opacity:0; transform:translate3d(-22%,0,0); } to { opacity:1; transform:none; } }
.view.card-right,.view.card-left { backface-visibility:hidden; will-change:transform, opacity; }
.view.card-right { animation:card-in-right .24s cubic-bezier(.16,.84,.36,1); }
.view.card-left { animation:card-in-left .24s cubic-bezier(.16,.84,.36,1); }
@media (prefers-reduced-motion: reduce) { .view.card-right,.view.card-left { animation:none !important; } .bar i,.slice { transition:none !important; } }
body { margin:0; background:radial-gradient(circle at 100% 0%, #fde0d0 0, transparent 38%), radial-gradient(circle at 0% 100%, #e4e1f8 0, transparent 34%), var(--paper); background-attachment:fixed; color:var(--ink); font-family:'DM Sans', sans-serif; }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; }
.shell,.login-shell { width:min(100% - 32px, 720px); margin:0 auto; }
.topbar { display:flex; align-items:center; justify-content:space-between; padding:26px 0 14px; gap:10px; }
.brand { align-items:center; display:flex; gap:12px; }
.brand img { border-radius:10px; box-shadow:0 4px 14px rgba(58,52,128,.22); flex:none; }
h1,h2 { font-family:'Space Grotesk', sans-serif; margin:0; letter-spacing:0; }
h1 { font-size:clamp(1.6rem, 6vw, 2.2rem); line-height:1.05; }
h2 { font-size:1.45rem; }
.kicker,.eyebrow { color:var(--dawn); font-size:.68rem; font-weight:700; letter-spacing:.14em; margin:0 0 5px; text-transform:uppercase; }
.muted { color:var(--muted); }
.icon-button { border:0; background:transparent; color:var(--muted); font-size:1.35rem; padding:8px; }
.topbar-actions { align-items:center; display:flex; gap:2px; position:relative; }
.menu { background:var(--card); border:1px solid var(--line); border-radius:6px; box-shadow:0 12px 28px rgba(30,28,58,.16); display:flex; flex-direction:column; overflow:hidden; padding:5px; position:absolute; right:0; top:calc(100% + 6px); width:max-content; min-width:190px; z-index:40; }
/* nowrap plus a max-content menu keeps every label on one line, whatever the phone's width.
   Absolute px, not rem: immune to a scaled root font size on the phone. */
.menu-item { background:transparent; border:0; border-radius:4px; color:var(--ink); font-size:11px; letter-spacing:.02em; padding:8px 11px; text-align:left; white-space:nowrap; width:100%; }
.menu-item:hover { background:var(--paper); }
.menu-item.danger { color:var(--fall); }
.menu-caption { color:var(--muted); display:block; font-size:.85em; letter-spacing:.08em; text-transform:uppercase; }
.menu-value { display:block; font-weight:600; margin-top:2px; }
.menu-value:after { content:' ▸'; color:var(--muted); }
.menu-divider { background:var(--line); height:1px; margin:4px 6px; }
.view { padding-bottom:100px; }
.view-title { align-items:end; display:flex; gap:12px; justify-content:space-between; margin:2px 0 16px; }
#view-legal { padding-bottom:40px; }
.section-heading { align-items:end; display:flex; gap:12px; justify-content:space-between; margin:24px 0 10px; }
.section-heading h3 { font-family:'Space Grotesk', sans-serif; font-size:1.02rem; margin:0; }
.section-heading span { color:var(--muted); font-size:.78rem; }

/* ---- the account bar ----
   Scrolls sideways rather than wrapping: a row that grows taller pushes everything below it down
   each time an account is opened. */
.account-bar { display:flex; gap:7px; margin:0 0 18px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; }
.account-bar::-webkit-scrollbar { display:none; }
.chip { background:var(--card); border:1px solid var(--line); border-radius:999px; color:var(--muted); flex:none; font-size:.82rem; padding:7px 14px; }
.chip.active { background:var(--night); border-color:var(--night); color:#fff; font-weight:700; }
.chip.add { border-style:dashed; color:var(--dawn); }
.chip:focus-visible,.ghost-button:focus-visible,.field input:focus-visible,.field select:focus-visible { outline:2px solid var(--dawn); outline-offset:2px; }

/* ---- the month bar, shared by Month and Outlook ---- */
.month-bar { align-items:center; display:flex; gap:8px; justify-content:space-between; margin-bottom:14px; }
.month-bar h2 { font-size:1.3rem; }
.month-title { background:transparent; border:0; color:var(--ink); padding:0; position:relative; text-align:left; }
.month-title small { color:var(--muted); display:block; font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
/* The native month picker, laid invisibly over the title: tapping the month opens the phone's own
   wheel, which is better at choosing a month three years out than any number of ‹ presses. */
.month-title input { cursor:pointer; height:100%; left:0; opacity:0; position:absolute; top:0; width:100%; }
.month-nav { display:flex; flex:none; gap:6px; }
.month-nav button { background:var(--card); border:1px solid var(--line); border-radius:6px; color:var(--ink); font-size:.85rem; min-width:38px; padding:8px 10px; }
.month-nav .today-button { font-size:.74rem; letter-spacing:.04em; }

/* ---- panels and figures ---- */
.panel { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px; }
.panel + .panel { margin-top:12px; }
.panel h3 { font-family:'Space Grotesk', sans-serif; font-size:1rem; margin:0 0 10px; }
.figure-label { color:var(--muted); font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.amount { font-family:'Space Grotesk', sans-serif; font-variant-numeric:tabular-nums; font-weight:700; white-space:nowrap; }
.amount.in { color:var(--rise); }
.amount.out { color:var(--fall); }
.hero { background:linear-gradient(155deg, #fff 0%, var(--night-soft) 150%); }
.hero .big { display:block; font-size:clamp(2rem, 9vw, 2.8rem); line-height:1.1; margin:4px 0 6px; }
.hero p { color:var(--muted); font-size:.82rem; line-height:1.45; margin:0; }
.split { display:grid; gap:10px; grid-template-columns:1fr 1fr; margin-top:14px; }
.split > div { background:var(--paper); border-radius:8px; padding:10px 12px; }
.split .amount { display:block; font-size:1.15rem; margin-top:2px; }

/* ---- the donut ---- */
.donut-wrap { align-items:center; display:flex; flex-wrap:wrap; gap:16px; justify-content:center; }
.donut { flex:none; height:auto; max-width:240px; width:62%; }
.donut .slice { cursor:pointer; stroke:var(--card); stroke-width:1.5; transition:transform .15s; }
.donut .slice.lit { stroke-width:2.5; }
.donut-caption { flex:1 1 180px; min-width:0; }
.donut-detail { background:var(--paper); border-radius:8px; margin-top:12px; min-height:58px; padding:10px 12px; }
.donut-detail strong { display:block; font-size:.9rem; overflow-wrap:anywhere; }
.donut-detail small { color:var(--muted); font-size:.76rem; }

/* ---- groups on the month page ---- */
.group-list { display:flex; flex-direction:column; gap:8px; }
.group { background:var(--card); border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.group-head { align-items:center; background:transparent; border:0; color:var(--ink); display:flex; gap:10px; padding:12px 14px; text-align:left; width:100%; }
.group-head .caret { color:var(--muted); flex:none; font-size:.8rem; transition:transform .15s; width:12px; }
.group.closed .caret { transform:rotate(-90deg); }
.group-head strong { flex:1; font-size:.92rem; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.group-sums { display:flex; flex:none; flex-direction:column; align-items:flex-end; font-size:.82rem; gap:1px; }
.group.closed .group-body { display:none; }
.entry { align-items:center; border-top:1px dashed var(--line); display:flex; gap:12px; padding:9px 14px; }
.entry-copy { display:flex; flex:1; flex-direction:column; gap:2px; min-width:0; }
.entry-copy strong { font-size:.9rem; font-weight:600; overflow-wrap:anywhere; }
.entry-copy small { color:var(--muted); font-size:.76rem; }
.entry .amount { font-size:.92rem; }

/* ---- the outlook ---- */
.bars { align-items:stretch; display:grid; gap:4px; grid-template-columns:repeat(12, minmax(0, 1fr)); height:150px; margin:6px 0 4px; }
.bar { background:transparent; border:0; display:flex; flex-direction:column; padding:0; position:relative; }
/* Each bar is half above a zero line and half below it, so a month in the red reads downward. */
.bar .up,.bar .down { display:flex; min-height:0; }
.bar .up { align-items:flex-end; border-bottom:1px solid var(--line); }
.bar .down { align-items:flex-start; }
.bar i { border-radius:4px 4px 1px 1px; display:block; transition:height .25s; width:100%; }
.bar .up i { background:linear-gradient(180deg, var(--sun), var(--dawn)); }
.bar .down i { background:var(--fall); border-radius:1px 1px 4px 4px; opacity:.85; }
.bar.lit .up i { background:var(--night); }
.bar-labels { display:grid; gap:4px; grid-template-columns:repeat(12, minmax(0, 1fr)); }
.bar-labels span { color:var(--muted); font-size:.6rem; letter-spacing:.02em; overflow:hidden; text-align:center; text-transform:uppercase; }
.outlook-list { list-style:none; margin:10px 0 0; padding:0; }
.outlook-list li { align-items:baseline; border-top:1px dashed var(--line); display:flex; font-size:.9rem; justify-content:space-between; padding:9px 2px; }
.outlook-list li.lit { font-weight:700; }
.outlook-list .delta { color:var(--muted); font-size:.74rem; margin-left:8px; }

/* ---- rules ---- */
.toolbar { align-items:center; display:flex; flex-wrap:wrap; gap:8px; justify-content:space-between; margin-bottom:12px; }
.filters { background:var(--card); border:1px solid var(--line); border-radius:10px; display:grid; gap:8px; grid-template-columns:1fr 1fr; margin-bottom:12px; padding:12px; }
.filters .field { margin:0; }
.filters .wide { grid-column:1 / -1; }
.rule-list { display:flex; flex-direction:column; gap:8px; }
/* The row is the target: tapping a rule opens it to edit, the way the old app's Edit button did. */
.rule { align-items:center; background:var(--card); border:1px solid var(--line); border-left:4px solid var(--rise); border-radius:9px; color:var(--ink); display:flex; gap:12px; padding:11px 13px; text-align:left; width:100%; }
.rule.out { border-left-color:var(--fall); }
.rule-copy { display:flex; flex:1; flex-direction:column; gap:4px; min-width:0; }
.rule-copy strong { font-size:.94rem; overflow-wrap:anywhere; }
.rule-copy small { color:var(--muted); font-size:.76rem; }
.rule-side { align-items:flex-end; display:flex; flex:none; flex-direction:column; gap:3px; }
.rule-side small { color:var(--muted); font-size:.72rem; }
.pill-row { display:flex; flex-wrap:wrap; gap:5px; }
.pill { background:var(--night-soft); border-radius:999px; color:var(--night); display:inline-block; font-size:.64rem; font-weight:700; letter-spacing:.05em; padding:3px 8px; text-transform:uppercase; white-space:nowrap; }
.pill.group { background:var(--dawn-soft); color:#9a3f1d; }
.pill.growth { background:var(--rise-soft); color:var(--rise); }

/* ---- imprint and privacy ---- */
.back-button { background:transparent; border:0; color:inherit; font:inherit; letter-spacing:inherit; margin:0; padding:0; text-transform:inherit; }
.imprint-button { background:transparent; border:0; color:var(--muted); font-size:.78rem; padding:8px 4px; white-space:nowrap; }
.legal-block { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:16px 18px; }
.legal-facts { display:grid; gap:2px 16px; grid-template-columns:auto 1fr; margin:0 0 14px; }
.legal-facts dt { color:var(--muted); font-size:.76rem; letter-spacing:.06em; text-transform:uppercase; }
.legal-facts dd { margin:0 0 8px; }
.legal-block a,.legal-body a { color:var(--dawn); }
.legal-details { background:var(--card); border:1px solid var(--line); border-radius:8px; margin-top:12px; }
.legal-details summary { cursor:pointer; font-family:'Space Grotesk', sans-serif; font-size:1.05rem; font-weight:600; list-style:none; padding:15px 18px; }
.legal-details summary::-webkit-details-marker { display:none; }
.legal-details summary:after { color:var(--muted); content:'▾'; float:right; transition:transform .2s; }
.legal-details[open] summary:after { transform:rotate(180deg); }
.legal-body { border-top:1px solid var(--line); padding:4px 18px 18px; }
.legal-body h3 { font-family:'Space Grotesk', sans-serif; font-size:.95rem; margin:18px 0 6px; }
.legal-body p,.legal-body li { color:#45425e; font-size:.88rem; line-height:1.55; margin:6px 0; }
.legal-body ul { margin:6px 0; padding-left:20px; }

/* ---- tab bar ----
   Opaque, not translucent: translate3d and will-change keep it on its own compositor layer, so it is
   not repainted — and briefly dropped — while a card animates past. */
.tabbar { background:var(--paper); border-top:1px solid var(--line); bottom:0; display:flex; justify-content:space-around; left:50%; max-width:720px; padding:11px 0 max(11px, env(safe-area-inset-bottom)); position:fixed; transform:translate3d(-50%,0,0); width:100%; will-change:transform; z-index:3; }
.tabbar button { background:none; border:0; color:var(--muted); display:flex; flex-direction:column; font-size:.72rem; gap:4px; padding:3px 18px; }
.tabbar button span { font-size:1.25rem; line-height:1; }
.tabbar button.active { color:var(--dawn); font-weight:700; }
.tabbar button em { font-style:normal; }

/* ---- buttons, dialogs, the rest of the furniture ---- */
.primary-button { background:var(--dawn); border:0; border-radius:5px; color:#fff; font-weight:700; padding:10px 18px; white-space:nowrap; }
.primary-button:disabled,.update-button:disabled { opacity:.55; cursor:default; }
.ghost-button { background:var(--card); border:1px solid var(--line); border-radius:5px; color:var(--ink); font-weight:500; padding:9px 14px; }
.ghost-button.on { background:var(--night-soft); border-color:var(--night); color:var(--night); font-weight:700; }
.danger-button { background:var(--fall); }
.link-button { background:none; border:0; color:var(--dawn); font-weight:700; padding:0; text-decoration:underline; }
.empty-state { color:var(--muted); padding:30px 10px; text-align:center; }
.empty-state .primary-button { margin-top:14px; }
.loading { color:var(--muted); font-size:.88rem; padding:24px 4px; text-align:center; }
.segmented { background:var(--card); border:1px solid var(--line); border-radius:6px; display:flex; overflow:hidden; }
.segmented button { background:transparent; border:0; color:var(--muted); flex:1; font-size:.84rem; padding:10px 6px; }
.segmented button.active.in { background:var(--rise); color:#fff; font-weight:700; }
.segmented button.active.out { background:var(--fall); color:#fff; font-weight:700; }
.segmented button.active { background:var(--night); color:#fff; font-weight:700; }
.modal-overlay { align-items:center; background:rgba(30,28,58,.46); bottom:0; display:flex; justify-content:center; left:0; opacity:0; padding:20px; position:fixed; right:0; top:0; transition:opacity .16s; z-index:10; }
.modal-overlay.open { opacity:1; }
.modal { background:var(--paper); border-radius:12px; box-shadow:0 18px 44px rgba(30,28,58,.26); max-height:calc(100vh - 40px); max-width:480px; overflow-y:auto; padding:22px; transform:translateY(8px); transition:transform .16s; width:100%; }
/* vh on a phone is measured with the browser's toolbars hidden, so a dialog sized in it is taller
   than what can be seen and its last row — the buttons — sits under the address bar. dvh is the
   height there really is. */
@supports (max-height: 100dvh) { .modal { max-height:calc(100dvh - 40px); } }
.modal-overlay.open .modal { transform:none; }
.modal h3 { font-family:'Space Grotesk', sans-serif; font-size:1.2rem; margin:0 0 10px; }
.modal-copy { color:var(--muted); font-size:.9rem; line-height:1.45; margin:0 0 18px; }
/* Wrapping is not cosmetic: a flex row that justifies to the end overflows towards the start, and
   overflow in that direction cannot be scrolled to — on a narrow phone the leftmost button, which is
   Delete, would simply be gone. */
.modal-actions { display:flex; flex-wrap:wrap; gap:9px; justify-content:flex-end; margin-top:20px; }
.modal-actions .spacer { flex:1 1 0; min-width:0; }
.modal-error { background:var(--fall-soft); border-radius:6px; color:#8f2446; font-size:.86rem; margin:4px 0 0; padding:9px 11px; }
@media (max-width: 460px) {
  .modal-overlay { padding:12px; }
  .modal { padding:18px; }
  .modal-actions { flex-direction:column-reverse; }
  .modal-actions .spacer { display:none; }
  .modal-actions > button { padding:12px 14px; width:100%; }
}
.field { display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
.field > span { color:var(--muted); font-size:.72rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; }
.field input,.field select { background:var(--card); border:1px solid var(--line); border-radius:5px; color:var(--ink); min-width:0; padding:11px; width:100%; }
.field input:disabled { background:#eceaf1; color:var(--muted); }
.field select { appearance:none; background-image:linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position:calc(100% - 17px) 50%, calc(100% - 12px) 50%; background-repeat:no-repeat; background-size:5px 5px, 5px 5px; padding-right:34px; }
.field input.in { border-color:var(--rise); }
.field input.out { border-color:var(--fall); }
.field small { color:var(--muted); font-size:.74rem; }
.field-row { display:flex; gap:9px; }
.field-row > .field { flex:1; min-width:0; }
@media (max-width: 360px) { .field-row { flex-direction:column; gap:0; } }
.group-editor { display:flex; flex-direction:column; gap:6px; margin-bottom:14px; max-height:40vh; overflow-y:auto; }
.group-editor span { background:var(--card); border:1px solid var(--line); border-radius:6px; font-size:.86rem; padding:8px 11px; }
.new-group { display:flex; gap:7px; }
.new-group input { background:var(--card); border:1px solid var(--line); border-radius:5px; color:var(--ink); flex:1; min-width:0; padding:9px 10px; }
.row-list { display:flex; flex-direction:column; gap:8px; }
.row { align-items:center; background:var(--card); border:1px solid var(--line); border-radius:8px; color:var(--ink); display:flex; gap:12px; padding:10px 12px; text-align:left; width:100%; }
.row-copy { display:flex; flex:1; flex-direction:column; gap:3px; min-width:0; }
.row-copy small { color:var(--muted); font-size:.77rem; }
.row .arrow { color:var(--muted); margin-left:auto; }

/* ---- signed out, and the two banners ---- */
.login-shell { align-items:flex-start; display:flex; flex-direction:column; justify-content:center; min-height:100vh; padding:30px 0; }
.login-mark { border-radius:16px; box-shadow:0 8px 24px rgba(58,52,128,.25); margin-bottom:26px; }
.login-shell h1 { font-size:clamp(2.2rem, 11vw, 4.3rem); max-width:560px; }
.login-shell > .muted { margin:10px 0 30px; }
.login-actions { display:flex; gap:9px; margin-top:4px; width:100%; max-width:420px; }
.login-actions .primary-button { align-items:center; display:flex; flex:1; justify-content:center; min-height:48px; text-decoration:none; }
.login-switch { color:var(--muted); font-size:.85rem; margin:14px 0 0; }
.build-badge { color:var(--muted); font-size:.6rem; letter-spacing:.04em; margin:0; opacity:.7; pointer-events:none; position:fixed; right:12px; top:max(calc(env(safe-area-inset-top) + 6px), 6px); z-index:2; }
.update-banner { align-items:center; background:var(--ink); border-radius:6px; color:var(--paper); display:flex; font-size:.85rem; gap:12px; left:50%; max-width:calc(100% - 32px); padding:10px 12px; position:fixed; top:12px; transform:translateX(-50%); width:720px; z-index:6; }
.update-banner span { flex:1; }
.update-button { background:var(--sun); border:0; border-radius:5px; color:var(--ink); font-weight:700; padding:8px 14px; }
#toast { background:var(--ink); border-radius:5px; bottom:85px; color:#fff; left:50%; max-width:calc(100% - 32px); opacity:0; padding:12px 16px; pointer-events:none; position:fixed; transform:translate(-50%, 15px); transition:.2s; z-index:20; }
#toast.show { opacity:1; transform:translate(-50%,0); }

@media (max-width:520px) {
  .shell,.login-shell { width:min(100% - 24px, 720px); }
  .primary-button { min-height:46px; }
  .brand img { height:36px; width:36px; }
  .split .amount { font-size:1rem; }
  .bars { height:120px; gap:3px; }
  .bar-labels { gap:3px; }
  .bar-labels span { font-size:.52rem; }
  .filters { grid-template-columns:1fr; }
  .tabbar button { padding:3px 12px; }
}