:root, .dark {
  color-scheme: dark;
  --f7-theme-color: #0091FF;
  --f7-theme-color-rgb: 0, 145, 255;
  --f7-font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", system-ui, sans-serif;
  --f7-page-bg-color: #000000;                 /* iOS systemBackground (dark) */
  --f7-list-strong-bg-color: #1C1C1E;          /* secondarySystemGroupedBackground */
  --f7-block-strong-bg-color: #1C1C1E;
  --f7-sheet-bg-color: #1C1C1E;
  --f7-bars-bg-color: rgba(22, 22, 23, .86);   /* translucent nav/tab bars */
  --f7-bars-bg-color-rgb: 22, 22, 23;
  --f7-text-color: #FFFFFF;
  --sp-card: #1C1C1E;
  --sp-elevated: #2C2C2E;                      /* tertiarySystemGroupedBackground */
  --sp-label: #FFFFFF;
  --sp-secondary: rgba(235, 235, 245, .6);
  --sp-tertiary: rgba(235, 235, 245, .3);
  --sp-separator: rgba(84, 84, 88, .65);
  --sp-fill: rgba(120, 120, 128, .24);
  --sp-green: #30D158;
  --sp-red: #FF4245;
}
/* Compact iOS navbar: slimmer than stock (44 + 52px), still iOS-like. */
html.ios, .ios {
  --f7-navbar-height: 34px;
  --f7-navbar-large-title-height: 44px;
  --f7-navbar-large-title-font-size: 31px;
  --f7-navbar-large-title-padding-vertical: 2px;
  --f7-navbar-large-title-padding-left: 20px;
}
html, body { background: #000; min-height: 100%; overscroll-behavior: none; }
html, body { font-family: var(--f7-font-family); -webkit-font-smoothing: antialiased; }
.num { font-variant-numeric: tabular-nums; }

#app, .views, .view, .page { background: #000; }
/* Bars: solid black where they meet the screen edges (status bar / home indicator area). */
.tabbar { --f7-bars-bg-color: rgba(10, 10, 11, .88); }

.tab-svg { width: 26px; height: 26px; display: block; }

/* Month title = month picker */
.month-picker { display: inline-flex; align-items: center; gap: 6px; color: var(--sp-label) !important; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.month-picker:active { opacity: .55; }
.month-picker .chev { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--sp-fill); display: inline-flex; align-items: center; justify-content: center; margin-top: 3px; }
.month-picker .chev svg { width: 13px; height: 13px; fill: none; stroke: var(--sp-label); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.month-picker .yr { color: var(--sp-secondary); font-weight: 600; }
.navbar .title .month-picker { gap: 4px; font-weight: 600; }
.navbar .title .month-picker .chev { width: 16px; height: 16px; margin-top: 1px; }
.navbar .title .month-picker .chev svg { width: 9px; height: 9px; stroke-width: 3.6; }
/* The collapsed (small) title is invisible until the large title scrolls away; don't let it eat taps. */
.navbar-large:not(.navbar-large-collapsed) .title { pointer-events: none; }

/* Category page: iOS 26-style glass back button inline with the title */
.nav-inline, .page[data-name="category"] { --f7-navbar-height: 56px; }
.nav-inline .navbar-inner { justify-content: flex-start; padding-left: calc(12px + var(--f7-safe-area-left)); }
.nav-inline .left { margin-right: 0 !important; }
.nav-inline .title {
  position: static !important; left: auto !important; transform: none !important; text-align: left;
  font-size: 28px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 0 12px; flex-shrink: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis;
}
/* v4: keep the inline title visible at rest WITHOUT !important, so F7's push/pop
   keyframes and swipe-back inline opacity can fade it together with the back button. */
.ios .nav-inline.navbar-transparent:not(.navbar-large):not(.navbar-transparent-visible):not(.with-searchbar-expandable-enabled) .title { opacity: 1; }
.ios .router-transition-forward .navbar-next.nav-inline.navbar-transparent:not(.navbar-large):not(.navbar-transparent-visible) .title {
  animation: ios-navbar-element-fade-in var(--f7-page-transition-duration) forwards;
}
.ios .router-transition-backward .navbar-current.nav-inline .title,
.ios .router-transition-backward .navbar-current.nav-inline .left {
  animation: ios-navbar-element-fade-out var(--f7-page-transition-duration) forwards;
}
.navbar .link.glass-back {
  width: 40px; height: 40px; min-width: 40px; padding: 0; border-radius: 50%; justify-content: center;
  color: var(--sp-label); background: rgba(120, 120, 128, .28);
  -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%);
  box-shadow: inset 0 .5px 0 rgba(255, 255, 255, .22), inset 0 0 0 .5px rgba(255, 255, 255, .10), 0 2px 8px rgba(0, 0, 0, .35);
  transition: transform .15s, background-color .15s;
}
.navbar .link.glass-back:active { transform: scale(.92); background: rgba(120, 120, 128, .42); opacity: 1; }
.glass-back svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; margin-left: -2px; }

.loading { display: flex; justify-content: center; padding: 80px 0; }

/* Hero card */
.hero {
  margin: 4px 16px 0; padding: 16px 16px 14px; border-radius: 14px;
  background: var(--sp-card);
}
.hero-delta { text-align: center; margin: 0 0 10px; }
.delta { display: inline-block; white-space: nowrap; font-size: 13px; font-weight: 600; color: var(--sp-secondary); background: var(--sp-fill); padding: 3px 10px; border-radius: 999px; }
.delta.up { color: var(--sp-red); }
.delta.down { color: var(--sp-green); }
/* Scales with screen width: ~270px on a 440px-wide iPhone Pro Max, ~240px on 390-402px phones. */
.donut-wrap { position: relative; width: min(62vw, 300px); aspect-ratio: 1 / 1; margin: 8px auto 12px; }
.donut-wrap canvas { width: 100% !important; height: 100% !important; display: block; }
.donut-center {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; pointer-events: none; text-align: center;
}
.donut-center .lbl { font-size: 13px; color: var(--sp-secondary); font-weight: 500; }
.donut-center .amt { font-size: clamp(28px, 8vw, 36px); font-weight: 700; letter-spacing: -.02em; color: var(--sp-label); line-height: 1.15; }
.donut-center .sub { font-size: 13px; color: var(--sp-secondary); margin-top: 2px; }
.hero-foot { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--sp-secondary); padding-top: 8px; border-top: .5px solid var(--sp-separator); margin-top: 6px; }
.hero-foot .in-amt { color: var(--sp-green); font-weight: 600; }
.mock-note { text-align: center; font-size: 12px; color: var(--sp-secondary); margin: 10px 16px 0; }

/* Category icon squares (Settings-app style) */
.cat-icon {
  width: 30px; height: 30px; border-radius: 7px; display: inline-flex;
  align-items: center; justify-content: center; color: #fff; flex-shrink: 0;
}
.cat-icon svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cat-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; }

.list .item-after.amt { color: var(--sp-label); font-weight: 500; font-variant-numeric: tabular-nums; }
.list .item-after.amt.in { color: var(--sp-green); }
.list .item-footer { color: var(--sp-secondary); }
.item-sub { font-size: 13px; color: var(--sp-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
/* v4: the recategorise toggle subtitle may wrap (long PayNow names) instead of truncating or overlapping. */
.item-sub.recat-rule-sub { white-space: normal; overflow: visible; overflow-wrap: anywhere; line-height: 1.3; }
.meter { height: 4px; border-radius: 2px; background: var(--sp-fill); margin-top: 6px; overflow: hidden; }
.meter > span { display: block; height: 100%; border-radius: 2px; }
.stackbar { display: flex; height: 6px; border-radius: 3px; overflow: hidden; margin-top: 7px; background: var(--sp-fill); }
.stackbar > span { display: block; height: 100%; }
.list .item-title { min-width: 0; flex-shrink: 1; }
.list .item-title-wrap { min-width: 0; flex: 1; }

/* Review banner */
.review-banner .item-title { font-weight: 500; }
.badge-pill { background: var(--sp-red); color: #fff; font-size: 13px; font-weight: 600; border-radius: 999px; padding: 1px 8px; margin-right: 4px; }

/* Trends */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.tile .lbl { font-size: 12px; color: var(--sp-secondary); font-weight: 500; text-transform: uppercase; letter-spacing: .02em; }
.tile .val { font-size: 22px; font-weight: 700; letter-spacing: -.02em; color: var(--sp-label); margin-top: 2px; }
.tile .sub { font-size: 12px; color: var(--sp-secondary); }
.bar-wrap { position: relative; height: clamp(220px, 58vw, 270px); width: 100%; overflow: hidden; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 12px; font-size: 12px; color: var(--sp-secondary); }
.legend span { display: inline-flex; align-items: center; gap: 5px; }

.intro { margin: 4px 32px 0; font-size: 15px; color: var(--sp-secondary); }

/* Empty states */
.empty { text-align: center; padding: 56px 32px; color: var(--sp-secondary); }
.empty .em-icon { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 14px; display: flex; align-items: center; justify-content: center; background: var(--sp-fill); }
.empty .em-icon svg { width: 30px; height: 30px; fill: none; stroke: var(--sp-green); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.empty h3 { margin: 0 0 4px; font-size: 20px; color: var(--sp-label); font-weight: 600; }
.empty p { margin: 0; font-size: 15px; }

/* Category drill-down summary */
.cat-summary { display: flex; align-items: center; gap: 14px; }
.cat-summary .cat-icon { width: 46px; height: 46px; border-radius: 11px; }
.cat-summary .cat-icon svg { width: 26px; height: 26px; }
.cat-summary .amt { font-size: 28px; font-weight: 700; letter-spacing: -.02em; color: var(--sp-label); }
.cat-summary .sub { font-size: 13px; color: var(--sp-secondary); }

/* Recategorise sheet */
.recat-sheet { height: auto; max-height: 88vh; --f7-sheet-bg-color: #1C1C1E; background: #1C1C1E; --f7-list-strong-bg-color: var(--sp-elevated); /* iOS elevated sheet */ border-radius: 14px 14px 0 0; }
.recat-sheet .sheet-modal-inner { overflow-y: auto; padding-bottom: calc(12px + var(--f7-safe-area-bottom, 0px)); }
.recat-head { text-align: center; padding: 22px 20px 4px; }
.recat-head .amt { font-size: 34px; font-weight: 700; letter-spacing: -.02em; color: var(--sp-label); }
.recat-head .amt.in { color: var(--sp-green); }
.recat-head .who { font-size: 17px; font-weight: 600; color: var(--sp-label); margin-top: 4px; }
.recat-head .when { font-size: 13px; color: var(--sp-secondary); margin-top: 2px; }
.recat-sheet .list { margin-top: 16px; margin-bottom: 16px; }
.recat-sheet .item-radio .item-media { padding-right: 0; }
.recat-actions { padding: 0 16px; display: flex; gap: 10px; }
.recat-actions .button { text-transform: none; letter-spacing: 0; flex: 1; height: 50px; border-radius: 12px; font-size: 17px; font-weight: 600; }
.sheet-grabber { width: 36px; height: 5px; border-radius: 3px; background: var(--sp-tertiary); margin: 6px auto 0; }

/* ==================================================================================
   v3 — iOS 26 / 27 "Liquid Glass" styling (proposal)
   ================================================================================== */
:root {
  /* Glass recipe. True refraction isn't possible in Safari (backdrop-filter ignores SVG
     displacement filters), so this is frosted blur + saturation, a top specular highlight,
     a hairline light rim and (iOS 27) a darkened outer edge. */
  --glass-bg: rgba(38, 38, 42, .52);
  --glass-bg-strong: rgba(30, 30, 33, .78);
  --glass-blur: blur(22px) saturate(190%);
  --glass-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .20),
    inset 0 0 0 .5px rgba(255, 255, 255, .10),
    inset 0 -1px 0 rgba(255, 255, 255, .04),
    0 0 0 .5px rgba(0, 0, 0, .65),
    0 10px 30px rgba(0, 0, 0, .45);
  --sp-radius: 24px;                         /* cards + inset lists */
  --f7-list-inset-border-radius: 24px;
  --f7-list-item-min-height: 52px;
  --f7-list-inset-side-margin: 16px;
  --f7-tabbar-icons-height: 62px;
}
.glass, .tabbar, .glass-btn, .navbar .link.glass-back, .glass-menu, .sp-toast {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
}

/* 1 — Floating capsule tab bar ------------------------------------------------------- */
.views > .tabbar.toolbar-bottom {
  left: 18px; right: 18px; width: auto;
  bottom: max(calc(var(--f7-safe-area-bottom) - 12px), 10px);
  height: 62px !important; border-radius: 31px; overflow: visible;
  transition: left .35s cubic-bezier(.3,.7,.2,1), right .35s cubic-bezier(.3,.7,.2,1), height .35s cubic-bezier(.3,.7,.2,1), bottom .35s;
}
.views > .tabbar.toolbar-bottom:before, .views > .tabbar.toolbar-bottom:after { display: none !important; }
.views > .tabbar .toolbar-inner { bottom: 0 !important; top: 0; padding: 0 5px; overflow: visible; }
.tabbar .tab-link { position: relative; border-radius: 26px; margin: 5px 0; height: auto !important; transition: background-color .25s; }
.tabbar .tab-link-active { background: rgba(255, 255, 255, .11); box-shadow: inset 0 .5px 0 rgba(255,255,255,.12); }
.tabbar .tab-link-active, .tabbar .tab-link-active .tabbar-label { color: var(--f7-theme-color); }
.ios .tabbar .tab-link .tabbar-label { font-size: 11px; font-weight: 600; margin-top: 2px; }
.tab-svg { width: 25px; height: 25px; }
/* 18 — badge pinned to the icon's top-right */
.tabbar .tab-link i.icon { position: relative; }
.tabbar .badge { top: -3px !important; right: -9px !important; left: auto !important; min-width: 18px; height: 18px; font-size: 11px; box-shadow: 0 0 0 2px rgba(20,20,22,.9); }
/* minimised while scrolling down */
.views > .tabbar.tabbar-min { left: 27%; right: 27%; height: 48px !important; }
.tabbar.tabbar-min .tabbar-label { opacity: 0; height: 0; margin: 0 !important; overflow: hidden; }
.tabbar.tabbar-min .tab-link { margin: 4px 0; }
.tabbar .tabbar-label { transition: opacity .2s; }
/* keep the last rows clear of the floating bar */
.views > .tabbar ~ * { --f7-page-toolbar-bottom-offset: 84px; }

/* 4 — Top bars: no solid bar; a soft blur that fades out (scroll-edge effect) ----------- */
.navbar .navbar-bg {
  /* extends 36px below the bar and fades out there, like iOS 26's scroll-edge effect */
  background: linear-gradient(to bottom, rgba(0,0,0,.88) 0%, rgba(0,0,0,.70) calc(100% - 36px), rgba(0,0,0,0) 100%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%);
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent 100%);
          mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent 100%);
}
.navbar:not(.navbar-large) .navbar-bg { height: calc(100% + 36px); }
.navbar-large .navbar-bg { height: calc(100% + var(--f7-navbar-large-title-height) + 36px) !important; }
.navbar .navbar-bg:before, .navbar .navbar-bg:after, .navbar:after, .navbar-large-collapsed .navbar-bg:after { display: none !important; }

/* 11 — back button: 44px glass circle with iOS 27 darker rim */
.navbar .link.glass-back { width: 44px; height: 44px; min-width: 44px; background: var(--glass-bg); }
.navbar .link.glass-back:active { background: rgba(80, 80, 88, .6); }
.nav-inline .title { margin-left: 12px; }

/* 12 — title menu chevron: plain chevron, no filled circle */
.month-picker .chev { background: none; width: auto; height: auto; margin-top: 4px; }
.month-picker .chev svg { width: 17px; height: 17px; stroke: var(--f7-theme-color); stroke-width: 3; }
.navbar .title .month-picker .chev svg { width: 11px; height: 11px; stroke-width: 3.4; }

/* 5 — concentric radii ---------------------------------------------------------------- */
.hero { border-radius: var(--sp-radius); padding: 18px 16px 14px; }
.hero-foot { padding-top: 10px; }
.cat-icon { width: 32px; height: 32px; border-radius: 9px; }
.cat-summary .cat-icon { border-radius: 13px; }
.tiles { gap: 8px; }
.tile { background: rgba(255,255,255,.04); border-radius: calc(var(--sp-radius) - 14px); padding: 10px 12px; }
.bar-wrap { margin-top: 4px; }
/* 16 — rows a little taller */
.list .item-content { min-height: 52px; }
/* 14 — sentence-case tile labels */
.tile .lbl { text-transform: none; letter-spacing: 0; font-size: 13px; }

/* 6 — capsule buttons ----------------------------------------------------------------- */
.button { border-radius: 999px !important; }

/* 2 — anchored glass pull-down menu ------------------------------------------------------ */
.popover.glass-menu { margin: 6px 0 0 10px;
  --f7-popover-bg-color: transparent; width: 236px; border-radius: 26px; overflow: hidden;
  background: var(--glass-bg-strong);
}
.popover.glass-menu .popover-inner { max-height: min(58vh, 460px); overflow-y: auto; -webkit-overflow-scrolling: touch; }
.menu-list { list-style: none; margin: 0; padding: 6px 0; }
.menu-head { font-size: 13px; font-weight: 600; color: var(--sp-secondary); padding: 10px 20px 4px 46px; }
.menu-row { display: flex; align-items: center; gap: 8px; padding: 11px 20px 11px 14px; color: var(--sp-label) !important; font-size: 17px; }
.menu-row.on { font-weight: 600; }
.menu-row:active { background: rgba(255,255,255,.08); }
.menu-check { width: 24px; display: inline-flex; justify-content: center; }
.menu-check svg { width: 17px; height: 17px; fill: none; stroke: var(--sp-label); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.popover-backdrop, .popover-backdrop.backdrop-in { background: rgba(0,0,0,.25); }

/* 3 — glass sheet, inset, concentric bottom corners, ✕ / ✓ header ---------------------- */
.recat-sheet {
  left: 8px !important; right: 8px; width: auto !important;
  bottom: max(calc(var(--f7-safe-area-bottom) - 26px), 8px);
  border-radius: 34px 34px 50px 50px !important; overflow: hidden;
  background: var(--glass-bg-strong) !important; --f7-sheet-bg-color: transparent;
  -webkit-backdrop-filter: blur(30px) saturate(190%); backdrop-filter: blur(30px) saturate(190%);
  box-shadow: var(--glass-shadow); max-height: 86vh;
  --f7-list-strong-bg-color: rgba(255, 255, 255, .07); --f7-list-inset-border-radius: 22px;
}
.recat-sheet:not(.modal-in) { transform: translate3d(0, calc(100% + 40px), 0); }
.recat-sheet .sheet-modal-inner { padding-bottom: 22px !important; }
.recat-sheet .list:last-child, .recat-sheet .list:nth-last-child(2) { margin-bottom: 4px; }
.sheet-bar { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px 0; }
.sheet-title { font-size: 17px; font-weight: 600; color: var(--sp-label); }
.glass-btn {
  width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  color: var(--sp-label); background: rgba(120, 120, 128, .30); transition: transform .15s, opacity .2s;
}
.glass-btn:active { transform: scale(.9); }
.glass-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.glass-btn.prominent { background: var(--f7-theme-color); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 0 0 .5px rgba(0,0,0,.5), 0 6px 16px rgba(0,145,255,.35); }
.glass-btn.prominent.disabled { opacity: 1; background: rgba(120,120,128,.24); color: var(--sp-tertiary); box-shadow: var(--glass-shadow); pointer-events: none; }
.recat-head { padding-top: 6px; }
.sheet-grabber { margin-top: 7px; background: rgba(235,235,245,.28); }
.recat-sheet .list { margin-top: 14px; margin-bottom: 14px; }

/* 7 — iOS 26 switch: wider, oval knob that turns to glass while pressed ------------------ */
.ios .toggle, .ios .toggle-icon { --f7-toggle-width: 64px; --f7-toggle-height: 28px; }
.toggle, .toggle-icon { width: 64px; height: 28px; border-radius: 14px; }
.ios .toggle-icon { background: rgba(120, 120, 128, .32); }
.ios .toggle-icon:before { background: rgba(120, 120, 128, .32); }
.ios .toggle-icon:after { width: 38px; height: 24px; border-radius: 12px; top: 2px; left: 2px; box-shadow: 0 2px 5px rgba(0,0,0,.3); transition: transform .3s cubic-bezier(.3,.8,.25,1.15), width .2s, background-color .2s, box-shadow .2s; }
.ios .toggle input[type=checkbox]:checked + .toggle-icon { background: var(--sp-green); }
.ios .toggle input[type=checkbox]:checked + .toggle-icon:after { transform: translateX(22px); }
.ios .toggle-active-state input[type=checkbox] + .toggle-icon:after,
.ios .toggle:active input[type=checkbox] + .toggle-icon:after {
  width: 44px; background: rgba(255,255,255,.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 .5px rgba(255,255,255,.6), 0 3px 10px rgba(0,0,0,.35);
}
.ios .toggle-active-state input[type=checkbox]:checked + .toggle-icon:after,
.ios .toggle:active input[type=checkbox]:checked + .toggle-icon:after { transform: translateX(16px); }

/* 8 — alerts: left-aligned bold text, big radius, capsule buttons ------------------------ */
.ios .dialog {
  --f7-dialog-width: 300px; --f7-dialog-border-radius: 32px; --f7-dialog-text-align: left;
  --f7-dialog-title-font-size: 19px; --f7-dialog-title-font-weight: 700; --f7-dialog-font-size: 15px;
  --f7-dialog-bg-color: transparent; --f7-dialog-text-color: var(--sp-label);
  background: var(--glass-bg-strong); -webkit-backdrop-filter: blur(30px) saturate(190%); backdrop-filter: blur(30px) saturate(190%);
  box-shadow: var(--glass-shadow); overflow: hidden;
}
.ios .dialog-inner { padding: 22px 22px 6px; }
.ios .dialog-inner:after, .ios .dialog-button:after, .ios .dialog-buttons:after { display: none !important; }
.ios .dialog-text { color: var(--sp-secondary); }
.ios .dialog { --f7-dialog-button-height: 50px; }
.ios .dialog-buttons { padding: 16px 16px 16px; gap: 10px; height: auto !important; overflow: visible; }
.ios .dialog-button { height: 50px; border-radius: 999px !important; background: rgba(120,120,128,.30); color: var(--sp-label); font-weight: 600; }
.ios .dialog-button:last-child { background: var(--f7-theme-color); color: #fff; }

/* 17 — glass capsule toast ------------------------------------------------------------- */
.sp-toast {
  position: fixed; z-index: 20000; left: 50%; top: calc(var(--f7-safe-area-top) + 8px);
  transform: translate(-50%, -24px) scale(.92); opacity: 0;
  display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px 11px 12px; border-radius: 999px;
  color: var(--sp-label); font-size: 15px; font-weight: 600; white-space: nowrap; max-width: calc(100% - 40px);
  background: var(--glass-bg-strong); transition: transform .4s cubic-bezier(.3,.8,.25,1.1), opacity .25s;
}
.sp-toast.in { transform: translate(-50%, 0) scale(1); opacity: 1; }
.sp-toast-icon { width: 24px; height: 24px; border-radius: 50%; background: var(--sp-green); display: inline-flex; align-items: center; justify-content: center; }
.sp-toast-icon svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }

/* 23 — Increase Contrast / Reduce Transparency: solid surfaces ----------------------------- */
@media (prefers-contrast: more), (prefers-reduced-transparency: reduce) {
  :root { --glass-bg: rgba(44, 44, 48, .97); --glass-bg-strong: rgba(36, 36, 40, .98); --glass-blur: none; }
  .navbar .navbar-bg { background: #000 !important; -webkit-mask-image: none; mask-image: none; }
  .glass, .tabbar, .glass-btn, .glass-menu, .sp-toast, .recat-sheet, .ios .dialog { box-shadow: 0 0 0 1px rgba(255,255,255,.35) !important; }
}

/* ================================================================ PWA additions (Cloudflare Pages build) */
/* Full-screen home-screen app: everything behind the status bar / home indicator is black. */
html, body { background: #000 !important; height: 100%; }
body { overscroll-behavior: none; -webkit-tap-highlight-color: transparent; }
/* Light category colours (e.g. Gifts yellow) get a dark glyph so the icon stays legible. */
.cat-icon.light svg { stroke: rgba(0,0,0,.82); }

/* Sign-in screen */
.signin[hidden] { display: none !important; }
.signin {
  position: fixed; inset: 0; z-index: 30000; background: #000; color: #fff;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: calc(env(safe-area-inset-top, 0px) + 24px) 28px calc(env(safe-area-inset-bottom, 0px) + 24px);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; text-align: center;
}
.signin-inner { display: flex; flex-direction: column; align-items: center; max-width: 340px; width: 100%; margin-top: -40px; }
.signin-icon { width: 88px; height: 88px; border-radius: 20px; box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 12px 40px rgba(0,0,0,.6); }
.signin h1 { font-size: 34px; font-weight: 700; letter-spacing: -.02em; margin: 22px 0 8px; }
.signin-lede { font-size: 17px; line-height: 1.35; color: rgba(235,235,245,.6); margin: 0 0 34px; }
.signin-btn {
  appearance: none; border: 0; width: 100%; height: 52px; border-radius: 999px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  background: #fff; color: #000; font: 600 17px/1 -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  box-shadow: 0 0 0 1px rgba(255,255,255,.2), 0 8px 24px rgba(0,0,0,.4);
  transition: transform .15s ease, opacity .15s ease;
}
.signin-btn:active { transform: scale(.97); opacity: .85; }
.signin-btn[disabled] { opacity: .5; }
.signin-btn svg { width: 20px; height: 20px; }
.signin-msg { min-height: 20px; margin: 18px 0 0; font-size: 14px; line-height: 1.35; color: #FF6961; }
.signin-msg.info { color: rgba(235,235,245,.6); }
.signin-foot { position: absolute; left: 32px; right: 32px; bottom: calc(env(safe-area-inset-bottom, 0px) + 18px); margin: 0;
  font-size: 12px; line-height: 1.4; color: rgba(235,235,245,.38); }
.sp-toast.sp-toast-error .sp-toast-icon { background: #FF453A; }