:root {
  --brand-900: #0b3b69;
  --brand-800: #104d84;
  --brand-700: #1259a7;
  --brand-100: #e9f2fb;
  --green-800: #066b4f;
  --green-700: #087f5b;
  --green-100: #e9f7f2;
  --amber-600: #c26900;
  --amber-400: #f3b33d;
  --amber-100: #fff4d8;
  --ink: #172b3e;
  --muted: #526a7f;
  --line: #cbd8e2;
  --surface: #ffffff;
  --canvas: #fbfaf5;
  --header-bg: rgba(251, 250, 245, .96);
  --nav-bg: rgba(255, 255, 255, .98);
  --disabled-bg: #eef2f5;
  --danger-soft: #fff0f3;
  --danger: #a61b35;
  --success: #067052;
  --focus: #f3b33d;
  --shadow-sm: 0 4px 16px rgba(11, 59, 105, .08);
  --shadow-lg: 0 24px 64px rgba(11, 59, 105, .15);
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 26px;
  --page-width: 1120px;
  --nav-height: 80px;
  color-scheme: light;
  font-size: 18px;
}

html[data-font-size="large"] { font-size: 20px; }
html[data-font-size="extra"] { font-size: 22px; }

* { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; overflow-x: clip; }
body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background: var(--canvas);
  font-family: Verdana, "Segoe UI", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.large-text:not([data-font-ready]) { font-size: 1.1rem; }
body:has(dialog[open]) { overflow: hidden; }

a { color: inherit; text-decoration-thickness: .09em; text-underline-offset: .18em; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
img, svg { display: block; }
.icon { width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 200; top: .75rem; left: .75rem; padding: .8rem 1rem; color: #fff; background: var(--brand-900); border-radius: var(--radius-sm); transform: translateY(-160%); font-weight: 800; }
.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: 4px solid var(--focus); outline-offset: 3px; }

h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { color: var(--ink); line-height: 1.18; letter-spacing: -.025em; text-wrap: balance; }
h1 { margin-bottom: 1rem; font-size: clamp(2rem, 9vw, 3rem); }
h2 { margin-bottom: .75rem; font-size: clamp(1.45rem, 6vw, 2rem); }
h3 { font-size: 1.25rem; }
p { max-width: 68ch; }
small { font-size: .86rem; }
.overline, .eyebrow { display: inline-block; color: var(--brand-700); font-size: .75rem; line-height: 1.4; font-weight: 900; letter-spacing: .1em; }

.background-orb { position: fixed; z-index: -1; border-radius: 50%; pointer-events: none; opacity: .55; }
.orb-a { width: 18rem; height: 18rem; top: -10rem; right: -8rem; background: var(--green-100); }
.orb-b { width: 15rem; height: 15rem; left: -10rem; bottom: 8%; background: var(--brand-100); }

/* Brand and headers */
.app-header, .public-header {
  width: 100%;
  min-height: calc(4.5rem + env(safe-area-inset-top));
  padding: max(.65rem, env(safe-area-inset-top)) 1rem .65rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  background: var(--header-bg);
  border-bottom: 1px solid var(--line);
}
.app-header { position: sticky; z-index: 30; top: 0; }
.brand { min-width: 0; display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; }
.brand-logo { width: 2.65rem; height: 2.65rem; flex: 0 0 auto; filter: drop-shadow(0 4px 8px rgba(11, 59, 105, .15)); }
.brand-copy { min-width: 0; display: flex; flex-direction: column; line-height: 1.1; }
.brand-copy strong { color: var(--brand-900); font-size: .95rem; letter-spacing: .12em; }
.brand-copy small { display: none; margin-top: .25rem; color: var(--muted); font-size: .65rem; font-weight: 700; white-space: nowrap; }
.header-actions, .public-actions { display: flex; align-items: center; justify-content: flex-end; gap: .4rem; }
.header-tool {
  min-width: 3rem;
  min-height: 3rem;
  padding: .55rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  color: var(--brand-900);
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  font-weight: 800;
}
.header-tool span { display: none; }
.header-tool[aria-pressed="true"] { color: #fff; background: var(--brand-900); border-color: var(--brand-900); }
.demo-badge { display: none; padding: .55rem .75rem; color: var(--brand-900); background: var(--brand-100); border-radius: 999px; font-size: .7rem; font-weight: 900; }
.avatar { width: 3rem; height: 3rem; display: grid; place-items: center; flex: 0 0 auto; color: #fff; background: var(--brand-900); border: 3px solid var(--surface); border-radius: 50%; box-shadow: var(--shadow-sm); font-size: 1rem; font-weight: 900; text-decoration: none; }

/* Always-available visual controls */
.accessibility-dock {
  position: fixed;
  z-index: 80;
  right: max(.75rem, env(safe-area-inset-right));
  bottom: max(.75rem, env(safe-area-inset-bottom));
  padding: .4rem;
  display: flex;
  gap: .35rem;
  color: var(--ink);
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow-lg);
}
body.has-bottom-nav .accessibility-dock { bottom: calc(var(--nav-height) + .75rem + env(safe-area-inset-bottom)); }
.accessibility-control {
  width: 3rem;
  height: 3rem;
  padding: 0;
  display: grid;
  place-items: center;
  color: var(--brand-900);
  background: var(--brand-100);
  border: 2px solid transparent;
  border-radius: 50%;
}
.accessibility-control:hover { border-color: var(--brand-700); }
.accessibility-control[aria-pressed="true"] { color: #fff; background: var(--brand-700); }
.accessibility-control:disabled { opacity: .42; cursor: not-allowed; }
.accessibility-control .icon { width: 1.45rem; height: 1.45rem; }
.theme-icon-sun { display: none; }
html[data-theme="dark"] .theme-icon-moon { display: none; }
html[data-theme="dark"] .theme-icon-sun { display: block; }

/* Main layout */
.page-shell { width: min(100%, var(--page-width)); margin: 0 auto; padding: 1.5rem 1rem calc(var(--nav-height) + 2.5rem + env(safe-area-inset-bottom)); }
.landing-shell { width: 100%; }
.auth-shell { min-height: 100vh; display: grid; place-items: center; padding: 1rem; }
.section-block, .content-grid { margin-top: 2rem; }

/* Buttons and links */
.button {
  min-height: 3.25rem;
  padding: .8rem 1.15rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  font-size: .95rem;
  font-weight: 900;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.button:active { transform: scale(.98); }
.button:disabled { opacity: .6; cursor: wait; }
.button-primary { color: #fff; background: var(--brand-700); border-color: var(--brand-700); box-shadow: 0 7px 20px rgba(18, 89, 167, .2); }
.button-primary:hover { background: var(--brand-900); border-color: var(--brand-900); }
.button-ghost { color: var(--brand-900); background: var(--surface); border-color: var(--brand-900); }
.button.compact { min-height: 3rem; padding: .6rem .85rem; }
.full { width: 100%; }
.text-link, .panel-head a, .care-card a { min-height: 2.75rem; display: inline-flex; align-items: center; gap: .4rem; color: var(--brand-700); font-size: .9rem; font-weight: 900; }
.text-link .icon { width: 1.15rem; height: 1.15rem; }
.welcome-row .text-link { flex: 0 0 auto; white-space: nowrap; }
.back-link { min-height: 3rem; width: fit-content; margin: -.5rem 0 1rem; display: flex; align-items: center; color: var(--brand-900); font-size: .9rem; font-weight: 900; }

/* Public landing */
.hero { min-height: calc(100vh - 4.5rem); padding: 2.5rem 1rem 3rem; display: grid; align-items: center; gap: 2rem; }
.hero-copy { max-width: 42rem; }
.hero-copy h1 { margin: .75rem 0 1rem; color: var(--brand-900); font-size: clamp(2.2rem, 11vw, 4.2rem); }
.hero-copy h1 span { color: var(--brand-700); }
.hero-copy > p { color: var(--muted); font-size: 1.05rem; line-height: 1.7; }
.hero-actions { margin: 1.5rem 0; display: grid; gap: .75rem; }
.trust-list { display: grid; gap: .65rem; color: var(--ink); font-size: .88rem; font-weight: 800; }
.trust-list span { display: flex; align-items: center; gap: .5rem; }
.trust-list .icon { width: 1.2rem; height: 1.2rem; color: var(--success); stroke-width: 2.5; }
.hero-visual { min-height: 24rem; display: grid; place-items: center; position: relative; }
.hero-visual::before { content: ""; position: absolute; width: 18rem; height: 18rem; background: var(--green-100); border-radius: 50%; }
.preview-card { position: relative; z-index: 1; width: min(100%, 25rem); padding: 1.35rem; color: #fff; background: linear-gradient(145deg, var(--brand-900), var(--brand-800)); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.preview-card .icon { width: 1.65rem; height: 1.65rem; }
.preview-top { margin-bottom: 2rem; display: flex; justify-content: space-between; gap: 1rem; font-size: .75rem; font-weight: 900; }
.status-dot { color: #9fe3cb; }
.preview-card > small { color: #dbe9f5; }
.preview-card > strong { display: block; margin: .35rem 0 1.5rem; font-size: 2rem; letter-spacing: -.04em; }
.preview-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.preview-actions > span { min-height: 5rem; padding: .65rem .25rem; display: grid; place-items: center; align-content: center; gap: .35rem; background: rgba(255,255,255,.1); border-radius: var(--radius-sm); }
.preview-actions small { font-size: .7rem; }
.preview-activity { margin-top: .75rem; padding: .85rem; display: grid; grid-template-columns: .6rem 1fr auto; align-items: center; gap: .65rem; color: var(--ink); background: var(--surface); border-radius: var(--radius-sm); }
.preview-activity i { width: .6rem; height: .6rem; background: var(--green-700); border-radius: 50%; }
.preview-activity b, .preview-activity small { display: block; }
.preview-activity b { font-size: .78rem; }
.preview-activity small { color: var(--muted); font-size: .7rem; }
.preview-activity em { color: var(--success); font-style: normal; font-weight: 900; }
.feature-strip { margin: 0 1rem; overflow: hidden; color: #fff; background: var(--brand-900); border-radius: var(--radius-lg); }
.feature-strip article { padding: 1.5rem; border-bottom: 1px solid rgba(255,255,255,.18); }
.feature-strip article:last-child { border-bottom: 0; }
.feature-strip article > span { color: var(--amber-400); font-size: .75rem; font-weight: 900; }
.feature-strip h2 { margin: .6rem 0; color: #fff; font-size: 1.25rem; }
.feature-strip p { margin: 0; color: #e3edf5; font-size: .9rem; }
.public-footer { padding: 2rem 1rem; display: flex; flex-direction: column; gap: .5rem; color: var(--muted); font-size: .78rem; }
.public-footer a { min-height: 2.45rem; display: inline-flex; align-items: center; }

/* Authentication and forms */
.auth-card { width: min(100%, 32rem); padding: 1.35rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.auth-card-wide { width: min(100%, 46rem); }
.auth-brand { margin-bottom: 1.5rem; }
.auth-card h1 { margin: .5rem 0; }
.lead { color: var(--muted); font-size: .95rem; }
.stack-form { margin-top: 1.5rem; display: grid; gap: 1.15rem; }
.form-grid { display: grid; }
.field label { display: block; margin-bottom: .4rem; color: var(--ink); font-size: .9rem; font-weight: 900; }
.field input:not([type="checkbox"]), .field select, .field textarea, .chat-form input {
  width: 100%;
  min-height: 3.35rem;
  padding: .75rem .9rem;
  color: var(--ink);
  background: var(--surface);
  border: 2px solid #aebfcd;
  border-radius: var(--radius-sm);
  outline: 0;
}
.field input:focus, .field select:focus, .field textarea:focus, .chat-form input:focus { border-color: var(--brand-700); box-shadow: 0 0 0 4px rgba(243, 179, 61, .45); }
.field small { display: block; margin-top: .35rem; color: var(--muted); font-size: .76rem; }
.field-check label { min-height: 3rem; display: flex; align-items: flex-start; gap: .7rem; line-height: 1.5; cursor: pointer; }
input[type="checkbox"] { width: 1.45rem; height: 1.45rem; flex: 0 0 auto; accent-color: var(--brand-700); }
.errorlist { margin: .4rem 0 0; padding: .65rem .8rem; color: var(--danger); background: var(--danger-soft); border-left: 4px solid var(--danger); border-radius: .4rem; list-style: none; font-size: .82rem; font-weight: 800; }
.form-foot { margin: 1.5rem 0 0; color: var(--muted); text-align: center; font-size: .9rem; }
.form-foot a { min-height: 2.75rem; display: inline-flex; align-items: center; color: var(--brand-700); font-weight: 900; }
.button-google { justify-content: center; color: var(--ink); background: var(--surface); border: 2px solid var(--line); }
.button-google:hover { border-color: var(--brand-700); }
.google-mark { width: 2rem; height: 2rem; display: grid; place-items: center; color: #1a73e8; background: #fff; border: 1px solid var(--line); border-radius: 50%; font-family: Arial, sans-serif; font-weight: 900; }
.auth-divider { margin: 1.25rem 0; display: flex; align-items: center; gap: 1rem; color: var(--muted); font-size: max(.78rem, 14px); font-weight: 800; text-align: center; }
.auth-divider::before, .auth-divider::after { height: 1px; flex: 1; content: ""; background: var(--line); }
.oauth-notice, .verified-email { margin: 1rem 0 1.25rem; padding: 1rem; display: grid; gap: .2rem; background: var(--brand-100); border: 1px solid #bad2e8; border-radius: var(--radius-sm); }
.oauth-notice span, .verified-email span { color: var(--muted); font-size: max(.78rem, 14px); }
.verified-email strong { overflow-wrap: anywhere; }
.social-start { margin-bottom: 0; }
.logout-form { margin-top: 1.5rem; text-align: center; }
.text-danger { min-height: 3rem; padding: .5rem 1rem; color: var(--danger); background: transparent; border: 0; font-weight: 900; }

/* Feedback */
.messages { position: fixed; z-index: 60; top: calc(4.8rem + env(safe-area-inset-top)); left: .75rem; right: .75rem; }
.flash { margin-bottom: .5rem; padding: .9rem 1rem; color: var(--ink); background: var(--surface); border: 2px solid var(--brand-700); border-left-width: 7px; border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); font-size: .88rem; font-weight: 800; }
.flash.success { border-color: var(--success); }
.flash.error { border-color: var(--danger); }

/* Dashboard */
.welcome-row, .page-title { margin-bottom: 1.5rem; display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; }
.welcome-row h1, .page-title h1 { margin: .55rem 0 .5rem; }
.welcome-row p, .page-title p { margin: 0; color: var(--muted); }
.balance-card { padding: 1.3rem; color: #fff; background: linear-gradient(135deg, var(--brand-900), var(--brand-800)); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.balance-head { display: flex; flex-direction: column; gap: .35rem; color: #e5eff7; font-size: .8rem; font-weight: 800; }
.account-status { color: #adedd7; }
.balance-card > strong { display: block; margin: .7rem 0 1rem; font-size: clamp(2rem, 11vw, 3rem); line-height: 1.15; letter-spacing: -.04em; }
.balance-foot { padding-top: .9rem; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; border-top: 1px solid rgba(255,255,255,.25); color: #e5eff7; font-size: .76rem; font-weight: 800; }
.section-heading { margin-bottom: .9rem; }
.section-heading h2, .panel-head h2 { margin: .4rem 0 0; }
.action-grid { display: grid; gap: .75rem; }
.action-card { min-width: 0; min-height: 5.4rem; padding: 16px; display: grid; grid-template-columns: 54px minmax(0, 1fr) 24px; align-items: center; gap: 12px; color: var(--ink); background: var(--surface); border: 2px solid var(--line); border-radius: var(--radius-md); text-decoration: none; box-shadow: var(--shadow-sm); }
.action-card:active { transform: scale(.99); }
.action-card.accent { color: #fff; background: var(--brand-700); border-color: var(--brand-700); }
.action-icon { width: 52px; height: 52px; display: grid; place-items: center; color: var(--brand-700); background: var(--brand-100); border-radius: 50%; }
.action-icon .icon { width: 1.55rem; height: 1.55rem; }
.accent .action-icon { color: var(--brand-900); background: #fff; }
.action-card strong, .action-card small { display: block; }
.action-card > span:nth-child(2) { min-width: 0; }
.action-card strong { overflow-wrap: anywhere; }
.action-card strong { font-size: 1rem; }
.action-card small { margin-top: .12rem; color: var(--muted); font-size: .76rem; line-height: 1.4; }
.action-card.accent small { color: #eaf2f9; }
.action-chevron { color: var(--brand-700); }
.accent .action-chevron { color: #fff; }
.resource-links { margin-top: .85rem; display: grid; gap: .65rem; }
.resource-links a { min-height: 4.6rem; padding: .7rem .85rem; display: grid; grid-template-columns: 2.6rem 1fr 1.2rem; align-items: center; gap: .65rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); text-decoration: none; }
.resource-links a > span { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; color: var(--brand-700); background: var(--brand-100); border-radius: 50%; }
.resource-links strong, .resource-links small { display: block; }
.resource-links strong { font-size: .88rem; }
.resource-links small { color: var(--muted); font-size: .72rem; }
.resource-links a > .icon { width: 1rem; height: 1rem; color: var(--brand-700); }
.content-grid, .settings-layout, .form-layout, .card-layout, .privacy-grid { min-width: 0; display: grid; gap: 1rem; }
.content-grid > *, .settings-layout > *, .form-layout > *, .card-layout > *, .privacy-grid > * { min-width: 0; }
.panel { min-width: 0; padding: 1.15rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.panel-head { margin-bottom: .75rem; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.entry-list { display: grid; }
.entry { min-width: 0; min-height: 5.2rem; padding: .7rem 0; display: grid; grid-template-columns: 2.8rem minmax(0, 1fr); align-items: center; gap: .75rem; border-top: 1px solid var(--line); }
.entry:first-child { border-top: 0; }
.entry-icon { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border-radius: 50%; font-size: 1.1rem; font-weight: 900; }
.entry-icon.credit { color: var(--success); background: var(--green-100); }
.entry-icon.debit { color: var(--brand-700); background: var(--brand-100); }
.entry strong, .entry small { display: block; }
.entry strong { font-size: .9rem; }
.entry strong, .entry small { overflow-wrap: anywhere; }
.entry small { margin-top: .15rem; color: var(--muted); font-size: .75rem; }
.entry .amount { grid-column: 2; justify-self: start; font-size: .9rem; }
.amount.credit { color: var(--success); }
.amount.debit { color: var(--ink); }
.care-card { padding: 1.4rem; color: #fff; background: var(--brand-900); border-radius: var(--radius-lg); }
.care-card .overline, .care-card .eyebrow { color: var(--amber-400); }
.care-icon { width: 3.2rem; height: 3.2rem; margin-bottom: 1.25rem; display: grid; place-items: center; color: var(--brand-900); background: var(--amber-400); border-radius: 50%; }
.care-icon .icon { width: 1.5rem; height: 1.5rem; }
.care-card h2 { margin: .5rem 0; color: #fff; }
.care-card p { color: #e5eff7; }
.care-card a { color: #fff; text-decoration: underline; }
.empty-state { padding: 2rem 1rem; color: var(--muted); text-align: center; }
.empty-state > span { display: grid; place-items: center; margin: 0 auto .75rem; color: var(--brand-700); }
.empty-state strong { display: block; color: var(--ink); }
.empty-state p { margin: .4rem auto 0; font-size: .85rem; }

/* Internal pages */
.narrow-title { max-width: 48rem; }
.mini-balance { width: 100%; padding: 1rem; color: #fff; background: var(--brand-900); border-radius: var(--radius-md); }
.mini-balance small, .mini-balance strong { display: block; }
.mini-balance small { color: #dbe9f5; }
.mini-balance strong { margin-top: .25rem; font-size: 1.35rem; }
.table-panel { padding-top: .5rem; }
.pagination { padding-top: 1rem; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .75rem; color: var(--muted); font-size: .85rem; }
.pagination a { min-height: 3rem; padding: .5rem .75rem; display: inline-flex; align-items: center; color: var(--brand-700); border: 2px solid var(--brand-700); border-radius: var(--radius-sm); font-weight: 900; }
.form-panel { padding: 1.2rem; }
.centered-panel { max-width: 46rem; }
.safety-panel { padding: 1.25rem; background: var(--green-100); border: 2px solid #9dd8c4; border-radius: var(--radius-lg); }
.safety-panel > span { width: 3rem; height: 3rem; display: grid; place-items: center; color: #fff; background: var(--green-700); border-radius: 50%; font-size: 1.25rem; font-weight: 900; }
.safety-panel h2 { margin: 1rem 0 .5rem; }
.safety-panel ul { padding-left: 1.4rem; color: #204c3e; }
.safety-panel li { margin: .7rem 0; }
.safety-panel > div { margin-top: 1.25rem; padding-top: 1rem; border-top: 2px solid #b8dfd2; }
.safety-panel small, .safety-panel strong { display: block; }
.safety-panel strong { margin-top: .2rem; font-size: 1.3rem; }
.review-card, .receipt { width: min(100%, 43rem); padding: 1.25rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.review-mark, .receipt-check { width: 3.5rem; height: 3.5rem; margin-bottom: 1.25rem; display: grid; place-items: center; color: var(--success); background: var(--green-100); border-radius: 50%; font-size: 1.5rem; font-weight: 900; }
dl { margin: 0; }
.review-card dl > div, .receipt dl > div { padding: 1rem 0; display: grid; gap: .25rem; border-top: 1px solid var(--line); }
dt { color: var(--muted); font-size: .82rem; font-weight: 700; }
dd { margin: 0; color: var(--ink); font-weight: 900; overflow-wrap: anywhere; }
.review-total dd { color: var(--brand-700); font-size: 1.55rem; }
.warning-box, .demo-notice { margin: 1rem 0; padding: 1rem; color: #633700; background: var(--amber-100); border: 2px solid #e8bd61; border-radius: var(--radius-sm); }
.warning-box p, .demo-notice { margin-bottom: 0; font-size: .84rem; }
.review-actions { display: grid; gap: .65rem; }
.review-actions form, .review-actions button { width: 100%; }
.receipt { margin: 0 auto; text-align: center; }
.receipt-check { margin: 0 auto 1rem; }
.receipt-value { display: block; margin-bottom: 1.25rem; color: var(--brand-700); font-size: 2rem; }
.receipt dl { text-align: left; }
.success-text { color: var(--success); }

/* Settings */
.security-seal { width: 100%; padding: .9rem; display: flex; align-items: center; gap: .75rem; color: #164b3b; background: var(--green-100); border: 2px solid #a8dcca; border-radius: var(--radius-md); }
.security-seal > span { width: 2.6rem; height: 2.6rem; display: grid; place-items: center; color: #fff; background: var(--success); border-radius: 50%; font-weight: 900; }
.security-seal strong, .security-seal small { display: block; }
.security-seal small { color: #376b5b; font-size: .75rem; }
.settings-form { display: grid; }
.setting-row { min-height: 5.6rem; padding: .75rem 0; display: grid; grid-template-columns: 2.9rem 1fr auto; align-items: center; gap: .7rem; border-bottom: 1px solid var(--line); cursor: pointer; }
.setting-icon { width: 2.8rem; height: 2.8rem; display: grid; place-items: center; color: var(--brand-700); background: var(--brand-100); border-radius: 50%; font-weight: 900; }
.setting-row strong, .setting-row small { display: block; }
.setting-row strong { font-size: .9rem; }
.setting-row small { margin-top: .15rem; color: var(--muted); font-size: .74rem; }
.setting-row input { width: 1.6rem; height: 1.6rem; }
.settings-form > .button { margin-top: 1.25rem; }

/* Assistant */
.chat-panel { max-width: 54rem; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.chat-disclaimer { padding: .8rem 1rem; color: #633700; background: var(--amber-100); border-bottom: 1px solid #e8bd61; font-size: .76rem; font-weight: 700; text-align: center; }
.chat-messages { min-height: 24rem; max-height: 55vh; padding: 1rem; overflow-y: auto; display: flex; flex-direction: column; gap: .8rem; }
.bubble { width: fit-content; max-width: 88%; padding: .85rem 1rem; border-radius: var(--radius-md); font-size: .9rem; }
.bubble strong { font-size: .7rem; letter-spacing: .08em; }
.bubble p { margin: .3rem 0 0; }
.bubble.bot { align-self: flex-start; background: var(--brand-100); border-bottom-left-radius: .3rem; }
.bubble.user { align-self: flex-end; color: #fff; background: var(--brand-700); border-bottom-right-radius: .3rem; }
.chat-form { padding: .85rem; display: grid; gap: .65rem; border-top: 1px solid var(--line); }

/* Card and privacy */
.visual-card { min-height: 14rem; padding: 1.25rem; display: flex; flex-direction: column; justify-content: space-between; color: #fff; background: linear-gradient(135deg, var(--brand-900), var(--brand-700)); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.visual-card > div { display: flex; justify-content: space-between; font-size: .76rem; font-weight: 900; letter-spacing: .08em; }
.visual-card > strong { margin-top: auto; margin-bottom: 1rem; font-size: 1.1rem; letter-spacing: .07em; }
.visual-card > small { color: #e3edf5; }
.card-status h2 { margin: .5rem 0; }
.card-status p { color: var(--muted); }
.card-status form { margin-top: 1.25rem; }
.privacy-item { padding: 1rem 0; border-top: 1px solid var(--line); }
.privacy-item strong { font-size: .95rem; }
.privacy-item p, .muted-note { margin: .35rem 0 0; color: var(--muted); font-size: .84rem; }
.muted-note { padding: .9rem; background: var(--brand-100); border-radius: var(--radius-sm); }
.event-list > div { padding: .85rem 0; border-top: 1px solid var(--line); }
.event-list span, .event-list strong { display: block; }
.event-list span { color: var(--muted); font-size: .75rem; }
.event-list strong { margin-top: .2rem; font-size: .85rem; overflow-wrap: anywhere; }

/* Plans and subscriptions */
.plans-brand { margin-bottom: 2rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.plans-title { max-width: 50rem; }
.plans-grid { display: grid; gap: 1rem; }
.plan-card { position: relative; padding: 1.35rem; display: flex; flex-direction: column; color: var(--ink); background: var(--surface); border: 2px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.plan-card.recommended { border-color: var(--brand-700); box-shadow: var(--shadow-lg); }
.plan-badge { width: fit-content; margin: -.4rem 0 1rem; padding: .4rem .7rem; color: #fff; background: var(--brand-700); border-radius: 999px; font-size: max(.7rem, 14px); font-weight: 900; }
.plan-card h2 { margin: .45rem 0; }
.plan-card > p { min-height: 3.5rem; color: var(--muted); }
.plan-price { min-height: 5rem; margin: 1rem 0; display: grid; align-content: center; }
.plan-price strong { color: var(--brand-900); font-size: 2rem; line-height: 1.1; }
.plan-price small { color: var(--muted); }
.plan-features { min-height: 12rem; margin: 0 0 1.25rem; padding: 0; display: grid; align-content: start; gap: .75rem; list-style: none; }
.plan-features li { display: flex; align-items: flex-start; gap: .65rem; }
.plan-features span { color: var(--green-700); font-weight: 900; }
.plan-card form, .plan-card .button { margin-top: auto; }
.button-disabled { color: var(--muted); background: var(--disabled-bg); border-color: var(--line); cursor: not-allowed; }
.button-current { justify-content: center; color: #075b43; background: var(--green-100); border: 2px solid #76c9ad; }
.button-quiet { min-height: 3.5rem; padding: .65rem 1rem; color: var(--brand-700); background: transparent; border: 0; text-decoration: underline; }
.plans-safety { margin-top: 1.25rem; padding: 1.2rem; color: #075b43; background: var(--green-100); border: 1px solid #94d8c1; border-radius: var(--radius-md); }
.plans-safety p { margin: .3rem 0 0; }
.subscription-card { max-width: 42rem; margin: 0 auto; }
.subscription-card dl { margin: 1.5rem 0; }
.subscription-card dl > div { padding: .9rem 0; display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--line); }
.status-chip { width: fit-content; padding: .4rem .7rem; display: inline-flex; border-radius: 999px; font-size: max(.72rem, 14px); font-weight: 900; }
.status-active { color: #075b43; background: var(--green-100); }
.status-pending, .status-past_due { color: #633700; background: var(--amber-100); }
.offline-card { width: min(100%, 32rem); margin: 10vh auto 0; padding: 1.5rem; text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.offline-card img { margin: 0 auto 1rem; }
.offline-card p { color: var(--muted); }

/* App navigation */
.bottom-nav { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; min-height: calc(var(--nav-height) + env(safe-area-inset-bottom)); padding: .35rem .25rem max(.35rem, env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); background: var(--nav-bg); border-top: 2px solid var(--line); box-shadow: 0 -8px 28px rgba(11, 59, 105, .12); }
.bottom-nav a, .bottom-nav button { min-width: 0; min-height: 4rem; padding: .35rem .1rem; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; color: var(--muted); background: transparent; border: 0; border-radius: var(--radius-sm); font-size: clamp(13px, .78rem, 16px); line-height: 1.15; font-weight: 900; text-decoration: none; }
.bottom-nav .icon { width: 1.45rem; height: 1.45rem; }
.bottom-nav [aria-current="page"] { color: var(--brand-900); background: var(--brand-100); }
.bottom-nav .nav-primary { color: #fff; background: var(--brand-700); }
.bottom-nav .nav-primary[aria-current="page"] { background: var(--brand-900); }
.more-menu { width: 100%; max-width: none; max-height: 88vh; margin: auto 0 0; padding: .6rem 1rem calc(1rem + env(safe-area-inset-bottom)); color: var(--ink); background: var(--surface); border: 0; border-radius: 1.5rem 1.5rem 0 0; box-shadow: var(--shadow-lg); }
.more-menu[open] { display: block; }
.more-menu::backdrop { background: rgba(6, 24, 40, .62); backdrop-filter: blur(2px); }
.menu-handle { width: 3rem; height: .3rem; margin: .1rem auto .8rem; background: var(--line); border-radius: 999px; }
.menu-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.menu-heading h2 { margin: .25rem 0 .75rem; }
.icon-button { width: 3rem; height: 3rem; display: grid; place-items: center; color: var(--brand-900); background: var(--brand-100); border: 0; border-radius: 50%; }
.menu-links { display: grid; }
.menu-links a, .menu-logout-button { min-height: 4.7rem; padding: .65rem 0; display: grid; grid-template-columns: 2.7rem 1fr 1.25rem; align-items: center; gap: .75rem; border-top: 1px solid var(--line); text-decoration: none; }
.menu-links a > .icon:first-child, .menu-logout-button > .icon:first-child { width: 2.5rem; height: 2.5rem; padding: .55rem; color: var(--brand-700); background: var(--brand-100); border-radius: 50%; }
.menu-links a > .icon:last-child, .menu-logout-button > .icon:last-child { width: 1.15rem; height: 1.15rem; color: var(--brand-700); }
.menu-links strong, .menu-links small { display: block; }
.menu-links strong { font-size: .9rem; }
.menu-links small { margin-top: .1rem; color: var(--muted); font-size: .72rem; }
.menu-logout { margin: 0; }
.menu-logout-button { width: 100%; color: var(--danger); background: transparent; border-right: 0; border-bottom: 0; border-left: 0; border-radius: 0; text-align: left; }
.menu-logout-button > .icon:first-child { color: var(--danger); background: var(--danger-soft); }
.menu-logout-button > .icon:last-child { color: var(--danger); }

/* No informative text is rendered below 14px at the default scale. */
.brand-copy small,
.demo-badge,
.preview-actions small,
.preview-activity b,
.preview-activity small,
.resource-links small,
.entry small,
.balance-foot,
.setting-row small,
.chat-disclaimer,
.bubble strong,
.event-list span,
.bottom-nav a,
.bottom-nav button,
.menu-links small { font-size: max(.78rem, 14px); }

/* High contrast */
html[data-theme="dark"] {
  --brand-900: #0d3558;
  --brand-800: #124a78;
  --brand-700: #2f83d1;
  --brand-100: #17334a;
  --green-800: #0c765a;
  --green-700: #23a77f;
  --green-100: #123b30;
  --amber-100: #3d2d12;
  --ink: #f2f7fb;
  --muted: #b8c8d5;
  --line: #40586c;
  --surface: #142534;
  --canvas: #09131d;
  --header-bg: rgba(9, 19, 29, .96);
  --nav-bg: rgba(20, 37, 52, .98);
  --disabled-bg: #253847;
  --danger: #ff9caf;
  --danger-soft: #3d1c27;
  --success: #62dfb2;
  --shadow-sm: 0 4px 16px rgba(0, 0, 0, .24);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, .42);
  color-scheme: dark;
}
html[data-theme="dark"] .brand-copy strong,
html[data-theme="dark"] .back-link,
html[data-theme="dark"] .header-tool,
html[data-theme="dark"] .accessibility-control,
html[data-theme="dark"] .plan-price strong,
html[data-theme="dark"] .bottom-nav [aria-current="page"] { color: #a9d5ff; }
html[data-theme="dark"] .hero-copy h1,
html[data-theme="dark"] .button-ghost { color: #a9d5ff; }
html[data-theme="dark"] .button-ghost { border-color: #a9d5ff; }
html[data-theme="dark"] .oauth-notice,
html[data-theme="dark"] .verified-email { border-color: var(--line); }
html[data-theme="dark"] .warning-box,
html[data-theme="dark"] .demo-notice,
html[data-theme="dark"] .chat-disclaimer,
html[data-theme="dark"] .status-pending,
html[data-theme="dark"] .status-past_due { color: #ffe2a8; border-color: #8f6a27; }
html[data-theme="dark"] .safety-panel,
html[data-theme="dark"] .security-seal,
html[data-theme="dark"] .plans-safety,
html[data-theme="dark"] .button-current,
html[data-theme="dark"] .status-active { color: #c9f8e9; border-color: #347f69; }
html[data-theme="dark"] .safety-panel ul,
html[data-theme="dark"] .security-seal small { color: #b8e9d9; }
html[data-theme="dark"] .background-orb { opacity: .22; }

html[data-contrast="high"] {
  --brand-900: #001f3f;
  --brand-800: #002b55;
  --brand-700: #004f9e;
  --brand-100: #e6f1ff;
  --green-700: #005f42;
  --green-100: #e7fff5;
  --ink: #000000;
  --muted: #263746;
  --line: #526a7f;
  --canvas: #ffffff;
  --focus: #ffb000;
}
html[data-contrast="high"] .panel,
html[data-contrast="high"] .action-card,
html[data-contrast="high"] .resource-links a { border-width: 2px; }
html[data-theme="dark"][data-contrast="high"] {
  --brand-900: #071f34;
  --brand-800: #0b3152;
  --brand-700: #58aaff;
  --brand-100: #102c45;
  --green-700: #30d19c;
  --green-100: #0b3026;
  --ink: #ffffff;
  --muted: #d8e4ed;
  --line: #ffffff;
  --surface: #08131d;
  --canvas: #000000;
  --header-bg: rgba(0, 0, 0, .98);
  --nav-bg: rgba(8, 19, 29, .99);
  --focus: #ffd43b;
}

@media (min-width: 46rem) {
  .app-header, .public-header { width: min(100%, var(--page-width)); margin: 0 auto; padding-left: 1.5rem; padding-right: 1.5rem; border-bottom-color: transparent; }
  .brand-copy small { display: block; }
  .demo-badge { display: inline-flex; }
  .header-tool { padding-left: .75rem; padding-right: .75rem; }
  .header-tool span { display: inline; font-size: .72rem; }
  .page-shell { padding: 2.5rem 1.5rem 8rem; }
  .hero { min-height: 38rem; padding: 3.5rem max(1.5rem, calc((100vw - var(--page-width)) / 2)); grid-template-columns: 1.05fr .95fr; gap: 3rem; }
  .hero-copy h1 { font-size: clamp(3.2rem, 6vw, 4.6rem); }
  .hero-actions { display: flex; flex-wrap: wrap; }
  .trust-list { grid-template-columns: repeat(3, auto); gap: 1.2rem; }
  .feature-strip { width: min(calc(100% - 3rem), var(--page-width)); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); }
  .feature-strip article { min-height: 12rem; padding: 1.6rem; border-right: 1px solid rgba(255,255,255,.18); border-bottom: 0; }
  .feature-strip article:last-child { border-right: 0; }
  .public-footer { width: min(calc(100% - 3rem), var(--page-width)); margin: auto; flex-direction: row; justify-content: space-between; }
  .auth-card { padding: 2rem; }
  .form-grid { grid-template-columns: 1fr 1fr; gap: 1.15rem; }
  .full-row { grid-column: 1 / -1; }
  .welcome-row, .page-title { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 2rem; }
  .welcome-row > div, .page-title > div { max-width: 46rem; }
  .page-title > div:first-child { min-width: 0; }
  .balance-card { padding: 1.8rem; }
  .balance-head { flex-direction: row; justify-content: space-between; }
  .action-grid { grid-template-columns: 1fr 1fr; }
  .resource-links { grid-template-columns: repeat(3, 1fr); }
  .content-grid, .settings-layout { grid-template-columns: minmax(0, 1.55fr) minmax(17rem, .75fr); }
  .form-layout { grid-template-columns: minmax(0, 1.3fr) minmax(18rem, .7fr); align-items: start; }
  .card-layout, .privacy-grid { grid-template-columns: 1fr 1fr; align-items: start; }
  .panel, .form-panel, .review-card, .receipt { padding: 1.7rem; }
  .entry { grid-template-columns: 2.8rem 1fr auto; }
  .entry .amount { grid-column: 3; justify-self: end; }
  .mini-balance { width: auto; min-width: 14rem; flex: 0 0 auto; }
  .review-card dl > div, .receipt dl > div { grid-template-columns: 1fr 1fr; align-items: center; }
  dd { text-align: right; }
  .review-actions { display: flex; justify-content: flex-end; }
  .review-actions form, .review-actions button { width: auto; }
  .chat-form { grid-template-columns: 1fr auto; }
  .more-menu { width: min(100% - 2rem, 35rem); max-height: 80vh; margin: auto; padding: 1rem 1.4rem; border-radius: var(--radius-lg); }
  .plans-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
  .menu-handle { display: none; }
  .bottom-nav { left: 50%; right: auto; bottom: 1rem; width: min(100% - 2rem, 42rem); min-height: 4.7rem; padding: .35rem; transform: translateX(-50%); border: 1px solid var(--line); border-radius: 1.2rem; box-shadow: var(--shadow-lg); }
}

@media (max-width: 26.25rem) {
  .public-header .brand-copy, .app-header .brand-copy { display: none; }
  .public-header .brand, .app-header .brand { flex: 0 0 auto; }
}

@media (min-width: 46rem) and (max-width: 60rem) {
  .app-header .brand-copy small, .demo-badge { display: none; }
}

@media (min-width: 68rem) {
  .action-grid { grid-template-columns: repeat(4, 1fr); }
  .action-card { min-height: 12rem; padding: 1.15rem; grid-template-columns: 1fr 1.5rem; grid-template-rows: auto 1fr; align-items: start; }
  .action-card .action-icon { grid-column: 1; }
  .action-card > span:nth-child(2) { grid-column: 1 / -1; align-self: end; }
  .action-card .action-chevron { grid-column: 2; grid-row: 1; align-self: center; }
}

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

@media (prefers-contrast: more) {
  :root { --line: #526a7f; }
  .panel, .action-card, .resource-links a { border-width: 2px; }
}