/* ============================================================
   RippleCore customer design system
   One palette · one radius scale · one spacing rhythm ·
   one motion language. Light and dark are both designed,
   never inverted. The stored preference flips <html data-theme>
   before first paint so tokens never flash.
   ============================================================ */
:root {
  color-scheme: light;
  /* Surfaces + ink */
  --bg: #f4f6fa; --surface: #ffffff; --surface-2: #eef2f8;
  --ink: #0e1b2c; --muted: #55647a; --line: #e2e8f2; --line-strong: #c7d3e3;
  /* Brand */
  --primary: #1b4fd8; --primary-press: #143ca8; --primary-soft: #eaf0ff;
  --accent: #0e9f6e; --danger: #d93b3b; --danger-press: #b92f2f;
  /* Status */
  --ok-bg: #e7f6ef; --ok-ink: #0b7a56;
  --pending-bg: #fff4dc; --pending-ink: #8a5a09;
  --fail-bg: #fdecec; --fail-ink: #b02a2a;
  --warn-bg: #fff0e0; --warn-ink: #96510a;
  --neutral-bg: #eef2f7; --neutral-ink: #55647a;
  /* Semantic aliases: background, elevated, text, border, success, input, backdrop */
  --background: var(--bg); --elevated: var(--surface);
  --text-primary: var(--ink); --text-secondary: var(--muted);
  --border: var(--line); --success: var(--accent); --error: var(--danger);
  --input-bg: var(--surface); --field-line: #c7d3e3;
  --backdrop: rgba(14, 27, 44, .55); --notice-ink: #123a9c;
  --solid: var(--primary); --solid-hover: var(--primary-press); --on-solid: #ffffff;
  --badge-night-bg: #ece9fd; --badge-night-ink: #4f46b5;
  --badge-gifting-bg: #fdeaf4; --badge-gifting-ink: #b03380;
  --badge-social-bg: #e6f4fd; --badge-social-ink: #1673a8;
  /* Geometry */
  --r-sm: 10px; --r: 14px; --r-lg: 20px; --r-pill: 999px;
  /* Spacing rhythm (4px base) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 44px;
  /* Type */
  --font: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-display: clamp(1.72rem, 6vw, 2.3rem);
  --fs-h1: clamp(1.4rem, 4.6vw, 1.85rem);
  --fs-h2: 1.2rem; --fs-h3: 1.08rem;
  --fs-body: .96rem; --fs-small: .88rem; --fs-xs: .8rem; --fs-eyebrow: .72rem;
  /* Elevation */
  --shadow: 0 1px 2px rgba(14, 27, 44, .05), 0 8px 24px rgba(14, 27, 44, .06);
  --shadow-1: 0 1px 2px rgba(14, 27, 44, .07);
  --shadow-2: 0 2px 6px rgba(14, 27, 44, .07), 0 14px 34px rgba(14, 27, 44, .09);
  /* Motion */
  --dur-fast: .12s; --dur: .18s; --ease: cubic-bezier(.22, .61, .24, 1);
  /* Focus + chrome */
  --ring: 2px solid var(--primary);
  --topbar-bg: rgba(244, 246, 250, .88);
  --skeleton: linear-gradient(90deg, var(--surface-2) 25%, #e7edf6 50%, var(--surface-2) 75%);
}

/* Dark theme: designed token overrides, never an inverted filter. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b1220; --surface: #121b2e; --surface-2: #1a2439;
  --ink: #e8eef9; --muted: #9aa9c4; --line: #26324e; --line-strong: #3a4a6e;
  --primary: #8fb0ff; --primary-press: #a8c2ff; --primary-soft: #1a2a52;
  --accent: #22c58b; --danger: #ff7b7b; --danger-press: #ff9494;
  --ok-bg: #0d2b22; --ok-ink: #4ade9f;
  --pending-bg: #2b2408; --pending-ink: #f0c04a;
  --fail-bg: #2e1315; --fail-ink: #ff9a9a;
  --warn-bg: #2a1a08; --warn-ink: #f5a742;
  --neutral-bg: #1c2740; --neutral-ink: #9aa9c4;
  --background: var(--bg); --elevated: var(--surface);
  --text-primary: var(--ink); --text-secondary: var(--muted);
  --border: var(--line); --success: var(--accent); --error: var(--danger);
  --input-bg: #0e1729; --field-line: #33436a;
  --backdrop: rgba(3, 7, 15, .72); --notice-ink: #b7c9ff;
  --solid: #3f6ae6; --solid-hover: #4a75f0; --on-solid: #ffffff;
  --badge-night-bg: #23204d; --badge-night-ink: #b7b1ff;
  --badge-gifting-bg: #3d1a33; --badge-gifting-ink: #ff9ed0;
  --badge-social-bg: #102e42; --badge-social-ink: #7dd3fc;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .45);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-2: 0 2px 8px rgba(0, 0, 0, .5), 0 16px 40px rgba(0, 0, 0, .5);
  --topbar-bg: rgba(11, 18, 32, .88);
  --skeleton: linear-gradient(90deg, var(--surface-2) 25%, #222e47 50%, var(--surface-2) 75%);
}
/* ================= Base ================= */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: var(--fs-body); line-height: 1.5;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}
h1, h2, h3 { letter-spacing: -.02em; line-height: 1.2; margin: 0; }
p { margin: 0; }
img, svg { max-width: 100%; }
a { color: var(--primary); text-underline-offset: 2px; }
a:hover { color: var(--primary-press); }

/* Visible keyboard focus everywhere; pointer clicks stay clean. */
:focus-visible { outline: var(--ring); outline-offset: 2px; border-radius: 4px; }
:focus:not(:focus-visible) { outline: none; }

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

.shell {
  width: 100%; min-width: 0; max-width: 760px; margin: 0 auto;
  padding: max(14px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(64px, calc(env(safe-area-inset-bottom) + 40px)) max(16px, env(safe-area-inset-left));
}
/* Views enter with a transform-only rise — opacity stays 1 the whole time,
   so navigation never paints a blank frame. Modals keep the gentle fade. */
.view.is-entering {
  animation: view-rise 180ms var(--ease) both;
}
.modal-backdrop:not([hidden]) .modal,
dialog[open] {
  animation: view-in 180ms var(--ease) both;
}
@keyframes view-in {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes view-rise {
  from { transform: translateY(3px); }
  to { transform: translateY(0); }
}
.logout-dialog { width: min(28rem, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); overflow: auto; padding: 1.25rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--ink); }
.logout-dialog::backdrop { background: rgba(0, 0, 0, .55); }
.logout-dialog h3 { margin-top: 0; }

/* ================= Header + navigation ================= */
.topbar {
  /* Normal flow avoids covering focused content when text/header height grows. */
  position: static;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  padding: max(8px, env(safe-area-inset-top)) 0 10px;
  margin: 0 0 6px;
  background: var(--topbar-bg);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
}
.brand {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 1.32rem; font-weight: 800; letter-spacing: -.03em;
  color: var(--ink); text-decoration: none;
  min-width: 0; max-width: 100%; flex-wrap: wrap;
}
.brand:hover { color: var(--ink); }
.brand .brand-word { color: var(--ink); }
.brand .brand-accent { color: var(--primary); }
.brand-mark {
  display: grid; place-items: center; width: 1.875rem; height: 1.875rem; flex: 0 0 auto;
  border-radius: 9px; background: linear-gradient(140deg, var(--primary), #4f7bf0);
  color: #fff; font-size: .95rem; line-height: 1; font-weight: 800; letter-spacing: -.02em;
}
.top-actions { display: flex; gap: 14px; align-items: center; }

.tabbar {
  display: flex; flex-wrap: wrap; gap: 4px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: 5px;
  margin-bottom: 14px; box-shadow: var(--shadow-1);
}
.tab {
  /* Equal targets normally; enlarged text may wrap whole tabs, never their icon/label. */
  flex: 1 1 calc((100% - 8px) / 3); min-width: max-content; display: inline-flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 7px;
  min-height: 44px; border: 0; background: transparent; color: var(--muted);
  font: inherit; font-weight: 700; font-size: .9rem; padding: 9px 8px;
  border-radius: var(--r-pill); cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.tab .icon { width: 18px; height: 18px; opacity: .85; }
.tab:hover { color: var(--ink); }
.tab.active { background: var(--solid); color: var(--on-solid); box-shadow: var(--shadow-1); }
.tab.active .icon { opacity: 1; }
.tab .label { color: var(--muted); white-space: nowrap; }
.tab:hover .label { color: var(--ink); }
.tab.active .label { color: var(--on-solid); }

/* Inline icon helper (crisp vector, decorative by default) */
.icon { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* ================= Notices + connection banner ================= */
.notice {
  display: flex; align-items: flex-start; gap: 9px;
  background: var(--primary-soft); color: var(--notice-ink);
  border: 1px solid transparent; border-radius: var(--r);
  padding: 12px 14px; margin: 0 0 12px; font-size: var(--fs-small);
  animation: view-in var(--dur) var(--ease) both;
}
.notice .icon { width: 17px; height: 17px; margin-top: 2px; }
.notice.error { background: var(--fail-bg); color: var(--fail-ink); border-color: color-mix(in srgb, var(--fail-ink) 25%, transparent); }
.notice[data-operation="purchase-recovery"] { color: var(--ink); }
.notice.success { background: var(--ok-bg); color: var(--ok-ink); border-color: color-mix(in srgb, var(--ok-ink) 25%, transparent); }
.card.recovery-compact { padding: 12px 14px; margin-bottom: 10px; box-shadow: var(--shadow-1); }
.recovery-compact > p:first-child { margin: 0; font-size: var(--fs-small); }
.recovery-compact > .secondary { min-height: 44px; margin-top: 8px; }
.card.recovery-archive { padding: 12px 14px; margin-bottom: 10px; box-shadow: var(--shadow-1); }
.recovery-archive h3 { margin: 0; font-size: var(--fs-small); }
.recovery-archive > p { margin: 3px 0 0; color: var(--muted); font-size: var(--fs-xs); }
.recovery-archive .repeat-row { padding-block: 8px; }
.recovery-archive .repeat-row p { margin: 2px 0 6px; font-size: var(--fs-small); }
.recovery-archive .repeat-row button { min-height: 40px; margin: 0 8px 0 0; }
.conn-banner {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--warn-bg); color: var(--warn-ink);
  font-size: var(--fs-xs); font-weight: 700;
  padding: 8px 12px; margin: 0 0 12px; border-radius: var(--r-sm);
}
/* Reserved banner slot: the child toggles `hidden` synchronously (tests,
   assistive tech) while only this slot's height settles over ≤140ms — the
   content below never snaps by the notice's full height. */
.banner-slot { overflow: hidden; }
/* ================= Hero + section chrome ================= */
.hero { padding: 10px 0 18px; }
.hero h1 { font-size: var(--fs-display); font-weight: 800; margin: .2rem 0; }
.hero p { color: var(--muted); margin: .35rem 0 0; max-width: 46ch; }
.eyebrow { font-size: var(--fs-eyebrow); font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--primary); margin: 0 0 8px; }
.section-title { display: flex; justify-content: space-between; gap: 12px; align-items: end; margin: 20px 0 10px; }
.section-title { flex-wrap: wrap; }
.section-title h2 { margin: 0; font-size: var(--fs-h2); font-weight: 800; color: var(--ink); }
.section-title p { margin-top: 3px; }
.muted, .field-help { color: var(--muted); font-size: var(--fs-small); }

/* ================= Skeletons + empty states ================= */
.skeleton {
  border-radius: var(--r-sm); background: var(--skeleton);
  background-size: 200% 100%; animation: skeleton-shift 1.3s linear infinite;
}
@keyframes skeleton-shift { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.skeleton-line { height: 14px; margin: 8px 0; }
/* Matches .plan-card's min-height so loading→loaded never moves the grid. */
.skeleton-block { min-height: 152px; border: 1px solid var(--line); border-radius: var(--r); }
.skeleton-row-line { display: block; height: 16px; border-radius: 4px; }
.empty-state {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
  border: 1px dashed var(--line-strong); border-radius: var(--r-lg);
  background: var(--surface); padding: 30px 20px; color: var(--muted);
}
.empty-state .icon { width: 30px; height: 30px; color: var(--muted); }
.empty-state strong { color: var(--ink); font-size: 1.02rem; }

/* ================= Network chips ================= */
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.chip {
  display: inline-flex; align-items: center; min-height: 40px;
  border: 1px solid var(--line); background: var(--surface); color: var(--muted);
  font: inherit; font-weight: 700; font-size: .84rem; padding: 8px 16px;
  border-radius: var(--r-pill); cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.chip:hover { border-color: var(--line-strong); color: var(--ink); }
.chip.active { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); }

/* ================= Plan search ================= */
.search-row { position: relative; margin: 4px 0 12px; }
.search-field {
  display: flex; align-items: center; gap: 10px; margin: 0; font-weight: 400;
  border: 1px solid var(--field-line); border-radius: var(--r-sm);
  background: var(--input-bg); padding: 0 40px 0 12px; cursor: text;
  transition: border-color var(--dur-fast) var(--ease);
}
.search-field:hover { border-color: var(--muted); }
.search-field:focus-within { outline: 2px solid var(--primary); outline-offset: 1px; border-color: var(--primary); }
.search-field .icon { color: var(--muted); width: 18px; height: 18px; flex-shrink: 0; }
.search-field input {
  border: 0; background: transparent; padding: 13px 0; margin: 0;
  min-width: 0; flex: 1;
}
.search-field input:focus, .search-field input:focus-visible { outline: none; border: 0; }
.search-clear {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  border: 0; background: transparent; color: var(--muted); cursor: pointer;
  font-size: 1.3rem; line-height: 1; padding: 8px 10px; border-radius: var(--r-pill);
}
.search-clear:hover { color: var(--ink); background: var(--surface-2); }

/* ================= Catalog groups + plan cards ================= */
.catalog .plan-group { margin-top: 18px; }
.group-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.group-head h3 { margin: 0; font-size: 1.02rem; font-weight: 800; }
.plan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 12px; }
.plan-card {
  border: 1px solid var(--line); background: var(--surface); border-radius: var(--r);
  padding: 14px; text-align: left; color: var(--ink); cursor: pointer;
  display: flex; flex-direction: column; gap: 4px; min-height: 152px; font: inherit;
  box-shadow: var(--shadow-1);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
/* Lift on hover only where a real hover exists — touch never gets stuck. */
.plan-card:focus-visible { border-color: var(--primary); transform: translateY(-2px); box-shadow: var(--shadow-2); }
@media (hover: hover) {
  .plan-card:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: var(--shadow-2); }
}
.plan-card:active { transform: translateY(0); }
.plan-network { font-size: .7rem; font-weight: 800; letter-spacing: .09em; color: var(--primary); }
.plan-allowance { font-size: 1.18rem; font-weight: 800; letter-spacing: -.01em; }
.plan-validity { font-size: .82rem; color: var(--muted); }
.plan-name { font-size: .74rem; color: var(--muted); line-height: 1.35; margin-top: 2px; }
.plan-price { margin-top: auto; font-size: 1.06rem; font-weight: 800; }
.badge {
  align-self: flex-start; font-size: .68rem; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; padding: 3px 8px; border-radius: var(--r-pill);
  background: var(--neutral-bg); color: var(--neutral-ink);
}
.badge-sme { background: var(--primary-soft); color: var(--primary); }
.badge-night { background: var(--badge-night-bg); color: var(--badge-night-ink); }
.badge-gifting { background: var(--badge-gifting-bg); color: var(--badge-gifting-ink); }
.badge-social { background: var(--badge-social-bg); color: var(--badge-social-ink); }
.badge-weekend { background: var(--warn-bg); color: var(--warn-ink); }
.badge-special { background: var(--ok-bg); color: var(--ok-ink); }
.more-button {
  width: 100%; margin-top: 10px; min-height: 46px;
  border: 1px dashed var(--line-strong); background: var(--surface);
  color: var(--primary); font: inherit; font-weight: 700; font-size: .9rem;
  padding: 12px; border-radius: var(--r); cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.more-button:hover { background: var(--primary-soft); }
/* ================= Cards, forms, buttons ================= */
.card {
  border: 1px solid var(--line); background: var(--surface);
  border-radius: var(--r-lg); padding: clamp(18px, 4vw, 24px);
  box-shadow: var(--shadow);
}
.checkout-card { max-width: 500px; margin: 8px auto; }
.back-button, .text-button {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; border: 0; background: transparent; color: var(--primary);
  font: inherit; font-weight: 700; cursor: pointer; padding: 8px 2px;
  border-radius: var(--r-sm);
}
.back-button:hover, .text-button:hover { color: var(--primary-press); background: var(--primary-soft); }
.back-button .icon { width: 16px; height: 16px; }

.summary { margin: 16px 0; }
.summary div { display: flex; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--line); padding: 11px 0; }
.summary dt { color: var(--muted); flex-shrink: 0; }
.summary dd { margin: 0; font-weight: 700; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.summary .total { font-size: 1.1rem; border-bottom: 0; padding-top: 14px; }
.summary .total dd { color: var(--primary); font-size: 1.3rem; font-weight: 800; }

label { display: block; font-weight: 700; font-size: var(--fs-small); margin: 16px 0 7px; }
input, select {
  width: 100%; border: 1px solid var(--field-line); border-radius: var(--r-sm);
  padding: 13px 14px; font: inherit; font-size: 1rem; /* >=16px: no iOS zoom */
  background: var(--input-bg); color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
input::placeholder { color: color-mix(in srgb, var(--muted) 75%, transparent); }
input:hover, select:hover { border-color: var(--muted); }
input:focus, select:focus { outline: 2px solid var(--primary); outline-offset: 1px; border-color: var(--primary); }
input:disabled { opacity: .6; cursor: not-allowed; }

button { font-family: inherit; }
/* Tap feedback: the OS gray flash is suppressed and every press gets the
   same instant 1px depress — immediate, uniform, layout-safe. */
button, [role="button"], a { -webkit-tap-highlight-color: transparent; }
button:active { transform: translateY(1px); }
.primary, .secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 48px; padding: 13px 20px; font-size: 1rem; font-weight: 800;
  border-radius: var(--r-sm); cursor: pointer; touch-action: manipulation;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.primary { width: 100%; border: 0; background: var(--solid); color: var(--on-solid); margin-top: 18px; }
.primary:hover { background: var(--solid-hover); }
.primary:active { transform: translateY(1px); }
.primary:disabled { opacity: .65; cursor: progress; transform: none; }
.secondary { border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); margin-top: 18px; }
.secondary:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
.secondary:active { transform: translateY(1px); }
.secondary:disabled { opacity: .6; cursor: not-allowed; }
.danger { border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); color: var(--danger); }
.danger:hover { border-color: var(--danger); color: var(--danger); background: var(--fail-bg); }
/* Pending: spinner + truthful label; also announced via aria-busy */
.primary.pending, .secondary.pending { cursor: progress; }
.primary.pending::before, .secondary.pending::before {
  content: ""; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--on-solid) 40%, transparent);
  border-top-color: var(--on-solid); animation: spin .7s linear infinite;
}
.secondary.pending::before { border-color: color-mix(in srgb, var(--primary) 35%, transparent); border-top-color: var(--primary); }
@keyframes spin { to { transform: rotate(360deg); } }

/* Field + section labels */
.field-label { display: block; font-weight: 700; font-size: var(--fs-small); margin: 14px 0 8px; }
.form-message { min-height: 1.35rem; margin: 14px 0 4px; font-size: var(--fs-small); }
.form-message.error { background: var(--fail-bg); color: var(--fail-ink); border-radius: var(--r-sm); padding: 10px 12px; font-weight: 600; }
.form-message.success { color: var(--ok-ink); font-weight: 600; }
/* ================= Choice grids + payment methods ================= */
.choice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 14px 0 4px; }
.choice-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  min-width: 0; max-width: 100%; overflow-wrap: anywhere;
  min-height: 52px; border: 1px solid var(--line); background: var(--surface);
  border-radius: var(--r); padding: 14px; font: inherit; font-weight: 700;
  color: var(--ink); cursor: pointer; text-align: left;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.choice-card:hover { border-color: var(--primary); }
.choice-card.active {
  border-color: var(--primary); background: var(--primary-soft); color: var(--primary);
  box-shadow: inset 0 0 0 1px var(--primary);
}
.choice-card .net-logo { margin-bottom: 2px; }
.choice-card .muted { font-weight: 400; font-size: var(--fs-xs); }
.choice-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; align-items: center; }
.choice-row .primary, .choice-row .secondary { width: auto; margin-top: 0; flex: 1 1 180px; }

.method-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 8px 0 4px; }
.method-card {
  display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
  min-height: 74px; border: 1px solid var(--line); background: var(--surface);
  border-radius: var(--r); padding: 13px; font: inherit; font-weight: 700;
  color: var(--ink); cursor: pointer; text-align: left;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.method-card .muted { font-weight: 400; font-size: var(--fs-xs); }
.method-card:hover { border-color: var(--line-strong); }
.method-card.active { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
#balance-shortfall { margin-top: 12px; }
#balance-shortfall .choice-row { margin-top: 8px; }

.amount-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 7rem), 1fr)); gap: 10px; margin: 8px 0 4px; }
.amount-grid .choice-card { align-items: center; text-align: center; justify-content: center; min-height: 56px; }
#airtime-amounts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#airtime-amounts > .choice-card { min-width: 0; padding-inline: 6px; }
#airtime-amounts > .muted { grid-column: 1 / -1; }

/* ================= Smart Plan Finder ================= */
.finder-prompt h3 { margin: 4px 0 8px; font-size: var(--fs-h3); font-weight: 800; }
.finder-prompt .choice-row { margin-top: 14px; }
.finder-card h2 { margin: 6px 0 10px; font-size: var(--fs-h2); font-weight: 800; }
.finder-progress { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.finder-step-label { font-size: var(--fs-xs); font-weight: 800; color: var(--primary); white-space: nowrap; }
.progress-track { flex: 1; height: 8px; border-radius: var(--r-pill); background: var(--neutral-bg); overflow: hidden; }
.progress-fill { height: 100%; width: 25%; border-radius: var(--r-pill); background: var(--primary); transition: width .3s var(--ease); }
.custom-budget { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); }

/* Recommendation cards */
.rec-list { display: grid; gap: 12px; margin-top: 14px; }
.rec-card {
  border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-lg);
  padding: 16px; box-shadow: var(--shadow-1); display: flex; flex-direction: column; gap: 5px;
}
.rec-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.rec-label {
  font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--primary); background: var(--primary-soft); border-radius: var(--r-pill);
  padding: 4px 10px;
}
.rec-allowance { font-size: 1.25rem; font-weight: 800; letter-spacing: -.01em; }
.rec-meta { color: var(--muted); font-size: var(--fs-small); }
.rec-price { font-size: 1.05rem; font-weight: 800; }
.rec-above {
  font-size: .7rem; font-weight: 800; color: var(--warn-ink); background: var(--warn-bg);
  border-radius: var(--r-pill); padding: 2px 8px; margin-left: 6px; vertical-align: 2px;
}
.rec-reason { color: var(--muted); font-size: var(--fs-small); margin: 2px 0 6px; }
.rec-select { margin-top: 4px; }
/* ================= Modals (mismatch, PIN) ================= */
/* The hidden attribute must always win: without this, .modal-backdrop's
   display:grid overrides the UA [hidden]{display:none} rule (author styles
   beat UA styles) and the backdrop stays visible forever — trapping the page. */
[hidden] { display: none !important; }
.modal-backdrop {
  position: fixed; inset: 0; background: var(--backdrop);
  display: grid; place-items: center; padding: 18px; z-index: 50;
  animation: fade-in var(--dur) var(--ease) both;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.modal {
  width: min(100%, 440px); border-radius: var(--r-lg); position: relative;
  max-height: calc(100vh - 36px); overflow-y: auto;
  animation: modal-in var(--dur) var(--ease) both;
}
.modal { max-height: calc(100dvh - 36px); }
@keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.modal-close {
  position: absolute; top: 6px; right: 8px; border: 0; background: transparent;
  color: var(--muted); font-size: 1.5rem; line-height: 1; padding: 6px 10px;
  cursor: pointer; z-index: 1; border-radius: var(--r-pill);
}
.modal-close:hover { color: var(--ink); background: var(--surface-2); }
.modal .choice-row button { touch-action: manipulation; }
.modal .eyebrow { color: var(--warn-ink); }
.modal h3 { margin: 4px 0 8px; font-size: 1.12rem; font-weight: 800; }
.modal .field-help { color: var(--muted); }
.modal label { margin-top: 14px; }

/* ================= Balance card + funding + activity ================= */
.balance-card {
  background: var(--surface); border: 1px solid var(--line);
  color: var(--ink); min-width: 0; border-radius: var(--r-lg); padding: clamp(16px, 4.5vw, 26px);
  box-shadow: var(--shadow-2); margin-bottom: 16px;
}
.balance-card .eyebrow { color: var(--primary); }
.balance-card .muted { color: var(--muted); }
.balance-amount {
  font-size: clamp(1.9rem, 7vw, 2.35rem); font-weight: 800;
  letter-spacing: -.03em; margin: 2px 0 4px; font-variant-numeric: tabular-nums;
}
.balance-note { font-size: var(--fs-xs); color: var(--muted); margin-bottom: 4px; }
.funding-panel { min-width: 0; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.funding-panel .field-label { color: var(--ink); }
.funding-account {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r); padding: 12px 14px; display: grid; gap: 8px; margin: 8px 0;
}
.funding-row { display: flex; justify-content: space-between; gap: 12px; font-size: .92rem; flex-wrap: wrap; }
.funding-row > * { min-width: 0; overflow-wrap: anywhere; }
.funding-number { font-family: var(--font-mono); font-weight: 800; letter-spacing: .1em; font-size: 1.05rem; }
.funding-fallback { font-size: var(--fs-small); color: var(--muted); background: var(--surface-2); border: 1px dashed var(--line-strong); border-radius: var(--r); padding: 12px 14px; margin: 8px 0; }
.activity-panel { min-width: 0; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.activity-panel .section-title { margin-top: 0; }
.activity-panel .section-title h3 { color: var(--ink); }
.activity-panel .order { background: var(--surface-2); }
/* ================= Orders, statuses, receipt detail ================= */
.order-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; min-width: 0; }
.order {
  border: 1px solid var(--line); background: var(--surface); border-radius: var(--r);
  padding: 14px 16px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px;
  align-items: start; box-shadow: var(--shadow-1); width: 100%; min-width: 0; text-align: left;
  font: inherit; color: var(--ink);
}
button.order { cursor: pointer; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); }
button.order:hover, button.order:focus-visible { border-color: var(--primary); box-shadow: var(--shadow-2); }
.order strong { font-size: .95rem; font-weight: 800; display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.order-meta, .order-reference { display: block; color: var(--muted); font-size: var(--fs-xs); margin-top: 4px; }
.order-reference { overflow-wrap: anywhere; word-break: normal; }
.order b { font-size: .98rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.order-left { min-width: 0; }
.order-right { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.order-right b { overflow-wrap: anywhere; }
.order .order-chevron { display: none; }
.order-note { display: block; grid-column: 1 / -1; margin-top: 0; padding-top: 10px; border-top: 1px solid var(--line); font-size: var(--fs-xs); line-height: 1.5; min-width: 0; }
.order.highlight { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary), var(--shadow-2); }

.status {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 6px; font-size: .74rem; font-weight: 800; letter-spacing: .02em;
  padding: 4px 10px; border-radius: var(--r-pill);
  background: var(--neutral-bg); color: var(--neutral-ink);
  max-width: 100%; min-width: 0; overflow-wrap: anywhere;
}
/* State is always carried by the label text; colour only reinforces it. */
.order .status { display: inline-flex; }
.status::before { content: ""; width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: currentColor; opacity: .8; }
.status.tone-ok { background: var(--ok-bg); color: var(--ok-ink); }
.status.tone-pending { background: var(--pending-bg); color: var(--pending-ink); }
.status.tone-fail { background: var(--fail-bg); color: var(--fail-ink); }
.status.tone-warn { background: var(--warn-bg); color: var(--warn-ink); }
.status.tone-neutral { background: var(--neutral-bg); color: var(--neutral-ink); }

/* Filter chips above the history list */
.order-filters { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; margin: 2px 0 4px; scrollbar-width: thin; }
.filter-chip {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  min-height: 38px; border: 1px solid var(--line); background: var(--surface);
  color: var(--muted); font: inherit; font-weight: 700; font-size: .82rem;
  padding: 7px 14px; border-radius: var(--r-pill); cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.filter-chip:hover { color: var(--ink); border-color: var(--line-strong); }
.filter-chip.active { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); }
.filter-count { font-size: .74rem; font-weight: 800; background: var(--neutral-bg); color: var(--neutral-ink); border-radius: var(--r-pill); padding: 1px 7px; }
.filter-chip.active .filter-count { background: var(--primary); color: var(--on-solid); }

/* Receipt / transaction detail */
.detail-card { max-width: 620px; margin: 8px auto; }
.detail-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 8px 0 18px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.detail-hero .status { margin-top: 0; font-size: .82rem; padding: 6px 14px; }
.detail-amount { font-size: clamp(1.7rem, 6vw, 2.1rem); font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.detail-explanation {
  background: var(--surface-2); border-radius: var(--r); padding: 12px 14px;
  font-size: var(--fs-small); color: var(--ink); text-align: left; width: 100%;
  display: flex; gap: 9px; align-items: flex-start;
}
.detail-explanation .icon { width: 17px; height: 17px; margin-top: 2px; color: var(--primary); flex-shrink: 0; }
.detail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px 20px; margin: 14px 0; }
.detail-row { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.detail-row dt { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.detail-row dd { margin: 0; font-weight: 700; font-size: var(--fs-body); overflow-wrap: anywhere; }
.detail-row dd.mono { font-family: var(--font-mono); font-size: .88rem; letter-spacing: .03em; }
.detail-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.detail-actions .primary, .detail-actions .secondary { margin-top: 0; }
.order-feedback {
  margin-top: 16px; padding: 14px; border: 1px solid var(--line);
  border-radius: var(--r); background: var(--surface-2); min-width: 0;
}
.transaction-feedback-form { display: grid; gap: 12px; }
.feedback-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; border: 0; margin: 0; padding: 0; min-width: 0; }
.feedback-choices legend { width: 100%; padding: 0; margin-bottom: 8px; font-weight: 800; }
.feedback-choices label {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; min-width: 0; padding: 8px 6px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); font-weight: 700; cursor: pointer;
}
.feedback-choices input { width: 18px; height: 18px; margin: 0; accent-color: var(--primary); }
.feedback-privacy { color: var(--muted); font-size: var(--fs-xs); }
.feedback-comment-label { font-size: var(--fs-small); font-weight: 700; }
.feedback-comment-label span { color: var(--muted); font-weight: 400; }
.transaction-feedback-form textarea {
  width: 100%; min-width: 0; resize: vertical; min-height: 72px;
  padding: 10px 12px; border: 1px solid var(--field-line); border-radius: var(--r-sm);
  background: var(--input-bg); color: var(--ink); font: inherit;
}
.feedback-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.feedback-actions .primary, .feedback-actions .secondary { margin: 0; min-height: 40px; }
.feedback-error { color: var(--danger); font-size: var(--fs-small); }
.feedback-thanks, .feedback-dismissed { font-size: var(--fs-small); font-weight: 700; }
@media (max-width: 360px) {
  .order-feedback { padding: 12px; }
  .feedback-choices { gap: 5px; }
  .feedback-choices label { gap: 4px; padding: 6px 3px; font-size: var(--fs-xs); }
}
/* ================= Home: services, networks, PIN prompt ================= */
.service-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.service-card {
  min-width: 0;
  position: relative; display: flex; flex-direction: column; gap: 6px;
  align-items: flex-start; text-align: left; min-height: 132px;
  border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-lg);
  padding: 18px 16px; font: inherit; color: var(--ink); cursor: pointer;
  box-shadow: var(--shadow-1);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.service-card:focus-visible { border-color: var(--primary); transform: translateY(-2px); box-shadow: var(--shadow-2); }
@media (hover: hover) {
  .service-card:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: var(--shadow-2); }
}
.service-card:active { transform: translateY(0); }
.service-icon {
  display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 12px; background: var(--primary-soft); color: var(--primary);
}
.service-icon .icon { width: 21px; height: 21px; }
.service-title { font-size: 1.08rem; font-weight: 800; letter-spacing: -.01em; }
.service-card .muted { font-size: var(--fs-xs); line-height: 1.4; }
.service-go { position: absolute; top: 16px; right: 14px; color: var(--primary); }
.service-go .icon { width: 18px; height: 18px; }
.home-networks-label { margin: 0 0 8px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.home-networks { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.pin-prompt { margin-top: 16px; }
.pin-prompt h3 { margin: 4px 0 8px; font-size: var(--fs-h3); font-weight: 800; }

/* ================= Account ================= */
.account-card h2 { margin: 4px 0 2px; font-size: var(--fs-h1); font-weight: 800; }
.account-card p { margin: 4px 0; }
.security-actions { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); display: flex; gap: 10px; flex-wrap: wrap; }
.security-actions .secondary { margin-top: 0; }
.pin-status-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 2px; }
.seg {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: 5px; margin-top: 4px;
}
.seg-option {
  border: 0; background: transparent; color: var(--muted); font: inherit;
  font-weight: 700; font-size: var(--fs-small); min-height: 42px; padding: 10px 6px;
  border-radius: var(--r-pill); cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.seg-option:hover { color: var(--ink); }
.seg-option.active { background: var(--solid); color: var(--on-solid); box-shadow: var(--shadow-1); }

/* PIN entry fields: numeric keypad on mobile, >=16px to stop iOS zoom */
.pin-field { text-align: center; letter-spacing: .35em; font-size: 1.15rem; font-weight: 700; }
.pin-field-lg { font-size: 1.4rem; letter-spacing: .5em; padding: 14px; }

/* ================= Auth pages ================= */
.auth-page {
  min-height: 100vh; min-height: 100dvh; display: grid; place-items: center;
  padding: max(18px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
.auth-card {
  width: min(100%, 430px); background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: clamp(24px, 6vw, 34px); box-shadow: var(--shadow-2);
}
.auth-card h1 { margin: 8px 0 18px; font-size: var(--fs-h1); font-weight: 800; }
.auth-card .brand { display: inline-flex; margin-bottom: 26px; }
.auth-card .primary { margin-top: 22px; }
.auth-card .form-message:not(:empty) { margin-top: 16px; }
.auth-switch { margin-top: 18px; color: var(--muted); font-size: var(--fs-small); text-align: center; }

/* Network logo: official asset rendered LOGO-ONLY. The network name stays in
   the DOM as an accessible/semantic fallback (aria-label on the wrapper);
   it is never visible text while the logo renders, and is revealed only
   when the network has no local asset or the image fails to load. */
.net-logo { display: inline-flex; align-items: center; gap: 8px; vertical-align: middle; }
.net-logo-img { display: block; width: auto; flex: 0 0 auto; }
.net-logo-name { font-weight: 700; }
/* Logo present: the network name is never visible text — the official mark
   IS the identifier (the wrapper's aria-label keeps it accessible). The
   name is revealed only when the network has no local asset or the image
   fails to load (net-logo-fallback). */
.net-logo .net-logo-name { display: none; }
.net-logo.net-logo-fallback .net-logo-name { display: inline; }
/* Aspect reservation: the box exists before the bytes arrive, so a late
   logo can never resize the row it lands in (natural ratio wins after load). */
.net-logo-img[src^="logo-mtn.svg"] { aspect-ratio: auto 2 / 1; }
.net-logo-img[src^="logo-airtel.svg"],
.net-logo-img[src^="logo-glo.svg"],
.net-logo-img[src^="logo-9mobile.svg"] { aspect-ratio: auto 1 / 1; }
.chip .net-logo-name { font-size: .82rem; }
.mismatch-logos { display: flex; align-items: center; gap: 10px; margin: 4px 0 10px; }
.mismatch-logos-arrow { color: var(--muted, #8b93a7); font-weight: 700; }
/* ================= App-lock screen ================= */
.lock-backdrop {
  position: fixed; inset: 0; z-index: 60; background: var(--bg);
  display: grid; place-items: center; padding: 18px; overflow-y: auto;
}
.lock-card {
  width: min(100%, 400px); background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: clamp(26px, 6vw, 34px) 24px;
  box-shadow: var(--shadow-2); text-align: center;
  animation: modal-in var(--dur) var(--ease) both;
}
.lock-card h2 { margin: 8px 0 4px; font-size: var(--fs-h1); font-weight: 800; }
.lock-card .primary { margin-top: 16px; }
.lock-card .text-button { display: block; margin: 12px auto 0; }
.lock-card label { text-align: left; }
.lock-card .brand { justify-content: center; margin: 0 auto 6px; }

/* ================= Dark-theme component refinements ================= */
:root[data-theme="dark"] .balance-card { border: 1px solid var(--line); }
/* Official artwork stays untouched; a neutral plate keeps dark marks readable. */
:root[data-theme="dark"] .net-logo-img { background: #ffffff; border-radius: 4px; padding: 2px; box-sizing: content-box; }
:root[data-theme="dark"] .service-icon { background: var(--primary-soft); }
:root[data-theme="dark"] .detail-explanation { background: var(--surface-2); }
:root[data-theme="dark"] .auth-switch { color: var(--muted); }

/* ================= Local preview chip (localhost fixtures only) ================= */
.preview-flag {
  position: fixed; right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); z-index: 70;
  background: var(--warn-bg); color: var(--warn-ink); border: 1px solid var(--warn-ink);
  border-radius: var(--r-pill); font-size: .72rem; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; padding: 6px 12px;
  box-shadow: var(--shadow-2);
}

/* Consent checkbox row (dedicated funding account) */
.consent-row {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
  font-weight: 600; font-size: var(--fs-small); margin: 10px 0 2px;
}
.consent-row input[type="checkbox"] {
  width: 20px; min-width: 20px; height: 20px; min-height: 20px;
  margin: 2px 0 0; padding: 0; accent-color: var(--primary); flex-shrink: 0;
}

/* Order row internals (button rows and activity rows share the look) */
.order .order-left { min-width: 0; }
.order .order-chevron { display: none; color: var(--muted); }
@media (min-width: 640px) {
  .order { grid-template-columns: minmax(0, 1fr) auto auto; }
  .order .order-right { flex-direction: column; align-items: flex-end; }
  .order .order-chevron { display: block; }
  /* Activity lives inside a narrower balance column even on wide screens. */
  .activity-panel .order { grid-template-columns: minmax(0, 1fr); }
  .activity-panel .order-right { flex-direction: row; align-items: center; }
}

/* Native search affordance replaced by our own clear control */
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

/* ================= Responsive ================= */
@media (max-width: 480px) {
  .tabbar { gap: 2px; padding: 4px; }
  .tab { gap: 4px; padding-inline: 2px; }
  .tab span.label { font-size: .78rem; letter-spacing: -.025em; }
}
@media (max-width: 390px) {
  .choice-grid { grid-template-columns: 1fr 1fr; }
  .method-row { grid-template-columns: 1fr; }
  .balance-amount { font-size: 1.85rem; }
  .plan-grid { grid-template-columns: 1fr 1fr; }
  .shell { padding-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right)); }
  .top-actions .muted { display: none; }
  .service-card { min-height: 120px; padding: 16px 14px; }
  .detail-grid { grid-template-columns: 1fr; }
}
@media (max-width: 340px) {
  .tab span.label { font-size: .7rem; }
  .plan-grid { grid-template-columns: 1fr; }
  .service-grid { grid-template-columns: 1fr; }
}
@media (min-width: 640px) {
  .detail-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .shell { max-width: 920px; }
  .home-columns { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px; align-items: start; }
  .home-columns > * { min-width: 0; }
  .home-columns .balance-card { margin-bottom: 0; }
  .plan-grid { grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); }
  .checkout-card { max-width: 540px; }
  .tabbar { max-width: 520px; margin-inline: auto; }
}
@media (min-width: 1200px) {
  .shell { max-width: 980px; }
}

/* ================= Reduced motion ================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ================= Print (receipt) ================= */
#purchase-pin-dialog { width:min(94vw,480px); max-height:85dvh; overflow:auto; padding-bottom:max(24px,env(safe-area-inset-bottom)); }
#purchase-pin-dialog input[type=checkbox] { width:22px; height:22px; min-width:22px; margin-right:8px; vertical-align:middle; }
#purchase-pin-dialog label { line-height:1.5; }
#purchase-pin-dialog .pin-field { font-size:22px; min-height:52px; letter-spacing:8px; }
#pin-modal .modal { max-height:90dvh; overflow:auto; }
@media print {
  .topbar, .tabbar, .notice, .conn-banner, .back-button, .detail-actions, .modal-backdrop, .preview-flag { display: none !important; }
  body { background: #fff; }
  .shell { max-width: 100%; padding: 0; }
  .card { border: 1px solid #ccc; box-shadow: none; }
}
/* Account-owned saved choices: compact, keyboard accessible, no Home expansion. */
.repeat-choices { margin-block: 12px; }
.repeat-choices select,.repeat-dialog select { width:100%; padding:12px; color:var(--ink); background:var(--surface); border:1px solid var(--border); border-radius:12px; }
.repeat-choices button { margin-top:8px; }
.repeat-row { border-top:1px solid var(--border); padding-block:12px; overflow-wrap:anywhere; }
.repeat-row button { margin-right:8px; margin-bottom:8px; }
.repeat-dialog { width:min(480px,calc(100vw - 32px)); max-height:calc(100dvh - 40px); overflow-y:auto; color:var(--ink); background:var(--surface); padding:20px; }
.repeat-dialog::backdrop { background:rgba(0,0,0,.55); }
.repeat-choices summary { cursor:pointer; padding:12px; font-weight:600; }