/* Visual layer only: existing controls, content and application state stay intact. */
:root {
  --navy: #163b3a; --blue: #0964ed; --cyan: #089cb3; --green: #087d64;
  --red: #b44049; --ink: #172c2e; --muted: #53696c; --quiet: #617679;
  --bg: #f7f9fc; --paper: #ffffff; --soft: #edf2f8; --line: #d7e0ea;
  --control: #f8faf9; --control-line: #a8bfba; --active: #d5e9e2;
  --grid: #d1ded9; --topbar: #ffffff; --radius: 8px; --content: 1200px;
  --mint: #b9efdc; --brand-dark: #111b1d; --brand-white: #f0f7f4;
  --hero-image: url('assets/invekso-fintech-light-20261008.jpg');
  --hero-bg: #f4f9fe; --hero-ink: #142d46; --hero-muted: #415b70;
  --hero-accent: #0964ed; --hero-button: #0964ed; --hero-button-ink: #ffffff;
  --hero-button-hover: #0753c7; --hero-mobile-veil: #ffffffaa;
  --benefit-bg: #edf3f9; --editorial-bg: #e5eefb;
  --header-ink: #142d46; --header-muted: #415b70;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --navy: #b9efdc; --blue: #77adff; --cyan: #64d1df; --green: #7cdbb5;
  --red: #ff9aa2; --ink: #edf5f1; --muted: #b4c9c1; --quiet: #9cb5ab;
  --bg: #111a1b; --paper: #182527; --soft: #203335; --line: #35494a;
  --control: #1a2c2e; --control-line: #526c68; --active: #294740;
  --grid: #304544; --topbar: #0d1517; color-scheme: dark;
  --hero-image: url('assets/invekso-fintech-20261008.jpg');
  --hero-bg: #10181b; --hero-ink: #f0f7f4; --hero-muted: #b6c9c4;
  --hero-accent: #b9efdc; --hero-button: #b9efdc; --hero-button-ink: #102e2d;
  --hero-button-hover: #d4ffed; --hero-mobile-veil: #091315b3;
  --benefit-bg: #182527; --editorial-bg: #1b3038;
  --header-ink: #f0f7f4; --header-muted: #b6cbc4;
}
html, body { letter-spacing: 0; }
button, input, textarea, select { font-family: inherit; letter-spacing: 0; }
button, a, input, select, textarea, summary { -webkit-tap-highlight-color: transparent; }
button, a { transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
.button { min-height: 46px; border-radius: 6px; font-size: 14px; font-weight: 650; }
.button-primary { background: var(--blue); color: #fff; box-shadow: 0 4px 12px #0964ed18; }
.button-primary:hover { background: #0753c7; }
:root[data-theme="dark"] .button-primary { color: #102b3d; }
:root[data-theme="dark"] .button-primary:hover { background: #9bc5ff; }
.button-secondary, .button-quiet { border-color: var(--control-line); background: transparent; color: var(--ink); }
.button-secondary:hover, .button-quiet:hover { background: var(--soft); }
.button-danger:hover { background: color-mix(in srgb, var(--red) 10%, var(--paper)); }
.button-small { min-height: 38px; font-size: 13px; }

/* Welcome: one immersive brand surface, followed by contrasting full-width bands. */
.welcome-mode.onboarding {
  background: var(--bg); padding: 0; overflow-x: hidden;
}
:root[data-theme="dark"] .welcome-mode.onboarding {
  --bg: #111a1b; --ink: #edf5f1; --muted: #b4c9c1; --quiet: #9cb5ab;
  --line: #35494a; --paper: #182527; --blue: #77adff;
}
.welcome-mode .onboarding-shell { width: min(1200px, calc(100% - 96px)); min-height: 100svh; }
.welcome-mode .onboarding-brand { position: relative; isolation: isolate; min-height: 82px; color: var(--brand-white); }
.welcome-mode .onboarding-brand::before { content: ''; position: absolute; inset: 0; left: 50%; width: 100vw; transform: translateX(-50%); z-index: -1; background: #111b1d; border-bottom: 1px solid #ffffff20; }
.welcome-mode .onboarding-brand > span { font-size: 18px; font-weight: 750; }
.welcome-mode .onboarding-brand img { width: 36px; height: 36px; }
.welcome-mode .onboarding-account { align-items: center; gap: 22px; }
.welcome-mode .blog-link { color: #e4eeea; font-size: 15px; }
.welcome-mode .blog-link:hover { color: var(--mint); }
.welcome-mode .account-button { color: #f0f7f4; border: 1px solid #63807c; background: transparent; padding: 10px 18px; min-height: 44px; border-radius: 6px; }
.welcome-mode .account-button:hover { background: #263b3b; border-color: #b9efdc; }
.welcome-mode .theme-toggle { color: #b9efdc; background: transparent; border: 0; }
.welcome-mode .theme-toggle:hover { background: #263b3b; }
.welcome-mode .onboarding-body { padding: 0; margin: 0; }
.welcome-intro {
  position: relative; isolation: isolate; min-height: min(660px, max(480px, calc(100svh - 200px)));
  display: flex; align-items: center; padding: 56px 0 64px;
}
.welcome-intro::before {
  content: ''; position: absolute; inset: 0; left: 50%; width: 100vw; transform: translateX(-50%);
  background: var(--hero-bg) var(--hero-image) center / cover no-repeat; z-index: -1;
}
.welcome-mode .welcome-content { width: 100%; max-width: 650px; padding: 0; text-align: left; }
.welcome-kicker { display: flex; align-items: center; gap: 12px; color: #b9efdc; font-size: 14px; font-weight: 550; margin: 0 0 24px; }
.welcome-kicker::before { content: ''; width: 30px; height: 2px; background: #b9efdc; }
.welcome-mode .welcome-content h1 { color: #f0f7f4; font-size: 104px; font-weight: 600; line-height: 1.05; margin: 0 0 20px; }
.welcome-mode .welcome-content h1 span { color: #b9efdc; }
.welcome-mode .welcome-copy { color: #f0f7f4; font-size: 32px; font-weight: 450; line-height: 1.3; margin: 0 0 16px; }
.welcome-lead { max-width: 440px; color: #b6c9c4; font-size: 18px; line-height: 1.65; margin: 0 0 28px; }
.welcome-mode .welcome-actions { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 28px; }
.welcome-mode .welcome-actions .button-primary { min-width: 166px; min-height: 52px; border: 1px solid #b9efdc; border-radius: 6px; background: #b9efdc; box-shadow: none; color: #102e2d; font-size: 16px; padding: 13px 20px; }
.welcome-mode .welcome-actions .button-primary:hover { background: #d4ffed; border-color: #d4ffed; transform: none; }
.welcome-example { padding: 12px 0; color: #e0ece7; font-size: 15px; font-weight: 550; gap: 16px; }
.welcome-example:hover { color: #b9efdc; }
.welcome-note { color: #aec6be; font-size: 13px; margin: 24px 0 0; }
.welcome-points { position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); counter-reset: benefit; gap: 40px; padding: 38px 0 44px; border: 0; }
.welcome-points::before { content: ''; position: absolute; inset: 0; left: 50%; width: 100vw; transform: translateX(-50%); background: #c5ecdf; z-index: -1; }
.welcome-points > div { counter-increment: benefit; padding-left: 20px; border-left: 1px solid #799d91; }
.welcome-points > div::before { content: '0' counter(benefit); display: block; margin-bottom: 20px; font: 13px ui-monospace, monospace; color: #426c5f; }
.welcome-points h2 { color: #163b32; font-size: 20px; font-weight: 650; margin: 0 0 10px; }
.welcome-points p { color: #345c50; font-size: 15px; line-height: 1.65; max-width: 320px; }
.welcome-faq { width: 100%; max-width: none; padding: 64px 0 72px; border: 0; display: grid; grid-template-columns: minmax(210px, .7fr) minmax(0, 1.3fr); column-gap: 80px; }
.welcome-faq h2 { grid-row: 1 / 5; font-size: 34px; font-weight: 550; margin: 0; }
.welcome-faq details { grid-column: 2; border-bottom: 1px solid var(--line); }
.welcome-faq details:first-of-type { border-top: 1px solid var(--line); }
.welcome-faq summary { min-height: 64px; font-size: 17px; padding: 18px 0; }
.welcome-faq summary::after { color: var(--blue); }
.welcome-faq details p { font-size: 15px; padding-right: 30px; }
.welcome-blog { position: relative; isolation: isolate; padding: 42px 0 46px; border: 0; }
.welcome-blog::before { content: ''; position: absolute; inset: 0; left: 50%; width: 100vw; transform: translateX(-50%); background: #0758ce; z-index: -1; }
.welcome-blog h2 { color: #fff; font-size: 30px; font-weight: 550; }
.welcome-blog p { color: #d2e6ff; max-width: 530px; font-size: 16px; }
.welcome-blog a { color: #fff; min-height: 50px; border-bottom: 1px solid #93baff; font-size: 16px; }
.welcome-blog a span { font-size: 26px; margin-left: 26px; }
.welcome-mode .onboarding-privacy { border: 0; margin: 0; padding: 30px 0 0; font-size: 13px; color: var(--muted); text-align: left; }
.welcome-mode .welcome-legal { justify-content: flex-start; font-size: 13px; margin: 12px 0 28px; gap: 24px; }

/* Workspace: quiet financial typography, a strong balance and unframed sections. */
.topbar { border-bottom: 1px solid #314242; background: var(--topbar); }
.topbar-inner { min-height: 76px; height: auto; gap: 20px; }
.topbar .brand { color: #f0f7f4; }
.topbar .brand span { font-size: 18px; }
.topbar .nav-button { color: #b6cbc4; border-radius: 0; border-bottom: 2px solid transparent; padding: 24px 13px; text-decoration: none; }
.topbar .nav-button.active { background: transparent; border-bottom-color: #b9efdc; color: #fff; }
.topbar .nav-button:hover { color: #fff; background: #ffffff08; }
.topbar .theme-toggle { color: #b9efdc; border-color: #3e5c55; background: transparent; }
.topbar .account-button { background: transparent; border-color: #3e5c55; color: #e6f1ec; }
.topbar-actions { min-width: 0; flex-wrap: wrap; }
.main { padding: 42px 0 72px; }
.page-head { margin-bottom: 8px; }
.page-head h1 { font-size: 30px; font-weight: 600; line-height: 1.25; }
.eyebrow { color: var(--green); font-size: 12px; font-weight: 650; }
.intro { color: var(--muted); font-size: 14px; }
#view-home:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); gap: 28px 36px; }
#view-home > .page-head, #view-home > .summary, #view-home > .change-section { grid-column: 1 / -1; }
.summary { grid-template-columns: 1.2fr 1fr 1fr; background: transparent; border: 0; border-radius: 0; gap: 0; overflow: visible; }
.metric { padding: 24px 28px; min-height: 150px; border: 0; border-right: 1px solid var(--line); }
.metric-primary { background: #0964ed; border: 0; border-radius: 8px; padding: 24px; }
.metric-primary .metric-label, .metric-primary .metric-note { color: #dbeaff; }
.metric-primary .metric-value { color: #fff; font-size: 38px; font-weight: 600; }
.metric-label { font-size: 13px; margin-bottom: 14px; }
.metric-value { font-size: 32px; font-weight: 600; font-variant-numeric: tabular-nums; }
.metric-note { font-size: 12px; color: var(--muted); }
.chart-section, .composition-section, .change-section { margin: 0; padding: 24px 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; }
#view-home > .chart-section { grid-column: 1; grid-row: 4; }
#view-home > .composition-section { grid-column: 2; grid-row: 4; }
.section-head { align-items: flex-start; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 24px; }
.section-head h2 { font-size: 18px; font-weight: 600; }
.section-head span { font-size: 12px; color: var(--muted); }
.chart-wrap { height: 300px; }
.composition-list { gap: 20px; }
.allocation-row { grid-template-columns: 8px minmax(0, 1fr) 90px 48px; gap: 10px; }
.allocation-track { grid-column: 2 / -1; height: 4px; background: var(--line); }
.allocation-row > strong { font-variant-numeric: tabular-nums; }
.monthly-insight { color: var(--ink); font-size: 17px; line-height: 1.6; max-width: 840px; }
.change-item strong { font-weight: 600; }
.change-grid { border-color: var(--line); }
.monthly-context, .monthly-detail summary { font-size: 13px; }
.history-shell { background: transparent; border: 0; border-radius: 0; }
.history-table th { background: var(--soft); color: var(--muted); padding: 14px 18px; font-size: 12px; text-transform: none; font-weight: 600; }
.history-table td { padding: 20px 18px; background: transparent; }
.history-table tbody tr:hover { background: color-mix(in srgb, var(--paper) 75%, transparent); }
.row-action { font-size: 13px; min-height: 36px; padding: 6px 10px; }
.settings-section { padding: 0; background: transparent; }
.setting-row { padding: 26px 0; }
.setting-copy h2 { font-size: 17px; font-weight: 600; }
.setting-copy p { font-size: 14px; margin-top: 6px; }
.theme-choice, .mode-switch, .currency-mode { background: var(--soft); border-color: var(--line); }
.theme-choice button.active, .mode-switch button.active, .currency-mode button.active { background: var(--paper); color: var(--ink); }
.theme-choice button { min-height: 38px; font-size: 13px; }
.dialog { background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 24px 90px #071b2155; max-height: calc(100svh - 32px); }
.dialog::backdrop { background: #071517ab; backdrop-filter: blur(5px); }
.dialog-form { padding: 30px; }
.dialog-head h2 { font-size: 23px; font-weight: 600; }
.dialog-head p { font-size: 14px; }
input, textarea, select { border-color: var(--control-line); background: var(--control); color: var(--ink); border-radius: 6px; font-size: 16px; }
input { min-height: 48px; }
input:focus, textarea:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 14%, transparent); }
.field label { font-size: 14px; font-weight: 600; }
.field-hint { font-size: 12px; }
.file-drop { min-height: 145px; background: var(--soft); border-color: var(--control-line); color: var(--ink); }
.file-drop:hover { background: var(--active); border-color: var(--blue); }
.mapping-details summary, .import-summary strong { color: var(--ink); }
.account-dialog .account-mode { color: var(--blue); }
.toast { background: #163b32; color: #f0f7f4; }
.onboarding:not(.welcome-mode) { background: var(--bg); }
.onboarding:not(.welcome-mode) .onboarding-body { padding-top: 48px; }
.onboarding:not(.welcome-mode) .onboarding-body h1 { font-size: 34px; font-weight: 600; }
.choice-card { border-color: var(--control-line); background: var(--paper); border-radius: 8px; }
.choice-card:hover { border-color: var(--blue); background: var(--active); }
.choice-card.selected { border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green); background: var(--active); }
.choice-card strong { font-size: 17px; font-weight: 600; }
.choice-card span { font-size: 14px; }
.onboarding-progress { height: 4px; background: var(--line); }
.onboarding-progress span { background: var(--green); }
.onboarding-result { background: var(--active); }
.site-footer { border-color: var(--line); color: var(--muted); }
.site-footer a { color: var(--muted); }

/* Static editorial and legal pages share the same identity without changing content. */
body:has(.blog-main) .site-header { position: relative; isolation: isolate; color: #f0f7f4; min-height: 82px; }
body:has(.blog-main) .site-header::before { content: ''; position: absolute; inset: 0; left: 50%; width: 100vw; transform: translateX(-50%); background: #111b1d; z-index: -1; }
body:has(.blog-main) .site-header .brand, body:has(.blog-main) .site-header nav a { color: #f0f7f4; }
body:has(.blog-main) .site-header nav [aria-current], body:has(.blog-main) .theme-toggle { color: #b9efdc; }
body:has(.blog-main) { overflow-x: hidden; }
.blog-main { width: min(1040px, calc(100% - 96px)); padding-top: 0; }
.blog-heading { position: relative; isolation: isolate; max-width: none; padding: 54px 0 58px; margin-bottom: 42px; }
.blog-heading::before { content: ''; position: absolute; inset: 0; left: 50%; width: 100vw; transform: translateX(-50%); background: #c5ecdf; z-index: -1; }
.blog-heading .eyebrow { color: #426c5f; }
.blog-heading h1 { color: #163b32; font-size: 44px; font-weight: 550; }
.blog-heading h1 span { color: #0964ed; }
.blog-heading .lead { color: #345c50; font-size: 21px; }
.editorial-note { padding: 26px 0 48px; border: 0; }
.editorial-note h2 { font-size: 26px; font-weight: 550; }
.article-main .blog-heading h1 { font-size: 38px; }
.article-main .blog-heading::before { display: none; }
.article-main .blog-heading h1 { color: var(--ink); }
.article-main .blog-heading .lead, .article-main .blog-heading .eyebrow { color: var(--muted); }
.reference-topbar { background: #111b1d; border-bottom: 1px solid #314242; padding: 22px 48px; }
.reference-brand { font-family: inherit; font-size: 18px; }
.reference-accent { color: #b9efdc; }
.reference-container { max-width: 900px; padding: 56px 28px; }
.reference-container h1 { font: 550 38px/1.2 system-ui, sans-serif; }
.reference-section { padding: 30px 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; margin-bottom: 20px; }
.reference-section h2 { font-family: inherit; font-weight: 600; }
.reference-section p, .reference-section ul { font-size: 15px; }
.reference-highlight { background: var(--soft); border-radius: 0; }

/* Shared theme surfaces keep the whole page coherent, not just the controls. */
.welcome-mode .onboarding-brand { color: var(--header-ink); }
.welcome-mode .onboarding-brand::before { background: var(--topbar); border-color: var(--line); }
.welcome-mode .blog-link, .welcome-mode .account-button { color: var(--header-ink); }
.welcome-mode .account-button { border-color: var(--control-line); }
.welcome-mode .account-button:hover, .welcome-mode .theme-toggle:hover { background: var(--soft); border-color: var(--blue); }
.welcome-mode .blog-link:hover, .welcome-mode .theme-toggle { color: var(--blue); }
.welcome-kicker, .welcome-mode .welcome-content h1 span { color: var(--hero-accent); }
.welcome-kicker::before { background: var(--hero-accent); }
.welcome-mode .welcome-content h1, .welcome-mode .welcome-copy { color: var(--hero-ink); }
.welcome-lead, .welcome-note { color: var(--hero-muted); }
.welcome-mode .welcome-actions .button-primary { background: var(--hero-button); border-color: var(--hero-button); color: var(--hero-button-ink); }
.welcome-mode .welcome-actions .button-primary:hover { background: var(--hero-button-hover); border-color: var(--hero-button-hover); }
.welcome-example { color: var(--hero-ink); }
.welcome-example:hover { color: var(--hero-accent); }
.welcome-points::before { background: var(--benefit-bg); }
.welcome-points > div { border-color: var(--line); }
.welcome-points > div::before { color: var(--blue); }
.welcome-points h2, .welcome-blog h2 { color: var(--ink); }
.welcome-points p, .welcome-blog p { color: var(--muted); }
.welcome-blog::before { background: var(--editorial-bg); }
.welcome-blog a { color: var(--blue); border-color: var(--blue); }
.topbar { border-color: var(--line); }
.topbar .brand, .topbar .account-button { color: var(--header-ink); }
.topbar .nav-button { color: var(--header-muted); }
.topbar .nav-button.active { color: var(--header-ink); border-bottom-color: var(--blue); }
.topbar .nav-button:hover { color: var(--header-ink); background: var(--soft); }
.topbar .theme-toggle { color: var(--blue); }
.topbar .theme-toggle, .topbar .account-button { border-color: var(--control-line); }
body:has(.blog-main) .site-header::before { background: var(--topbar); }
body:has(.blog-main) .site-header .brand, body:has(.blog-main) .site-header nav a { color: var(--header-ink); }
body:has(.blog-main) .site-header nav [aria-current], body:has(.blog-main) .theme-toggle { color: var(--blue); }
.blog-heading::before { background: var(--benefit-bg); }
.blog-heading h1 { color: var(--ink); }
.blog-heading .eyebrow, .blog-heading h1 span { color: var(--blue); }
.blog-heading .lead { color: var(--muted); }
.reference-topbar { background: var(--topbar); border-color: var(--line); color: var(--header-ink); }
.reference-topbar a, .reference-brand { color: var(--header-ink); }
.reference-accent { color: var(--blue); }

@media (min-width: 1600px) {
  .welcome-intro::before { background-position: center 58%; }
}
@media (max-width: 1050px) {
  #view-home:not([hidden]) { grid-template-columns: minmax(0, 1.25fr) minmax(270px, 1fr); gap: 24px; }
  .welcome-mode .welcome-content { max-width: 540px; }
  .welcome-mode .welcome-content h1 { font-size: 84px; }
  .welcome-mode .welcome-copy { font-size: 28px; }
  .welcome-intro::before { background-position: 42% center; }
  .topbar-inner { flex-wrap: wrap; padding: 12px 0; }
  .topbar .nav-button { padding: 12px; }
}
@media (max-width: 720px) {
  .welcome-mode .onboarding-shell { width: calc(100% - 40px); }
  .welcome-mode .onboarding-brand { min-height: 76px; flex-wrap: wrap; padding: 12px 0; gap: 8px; }
  .welcome-mode .onboarding-brand > span { font-size: 15px; }
  .welcome-mode .onboarding-brand img { width: 30px; height: 30px; }
  .welcome-mode .onboarding-account { gap: 8px; }
  .welcome-mode .account-button { padding: 8px 12px; min-height: 40px; font-size: 13px; }
  .welcome-mode .blog-link { font-size: 14px; }
  .welcome-mode .theme-toggle { width: 32px; height: 36px; }
  .welcome-intro { min-height: min(650px, max(490px, calc(100svh - 160px))); padding: 40px 0 54px; }
  .welcome-intro::before { background-position: 55% center; }
  .welcome-intro::after { content: ''; position: absolute; inset: 0; left: 50%; width: 100vw; transform: translateX(-50%); background: var(--hero-mobile-veil); z-index: -1; }
  .welcome-mode .welcome-content { max-width: 500px; }
  .welcome-kicker { font-size: 13px; margin-bottom: 24px; }
  .welcome-mode .welcome-content h1 { font-size: 62px; margin-bottom: 22px; }
  .welcome-mode .welcome-copy { font-size: 25px; max-width: 320px; margin-bottom: 16px; }
  .welcome-lead { font-size: 16px; max-width: 310px; margin-bottom: 28px; }
  .welcome-mode .welcome-actions { gap: 20px; }
  .welcome-mode .welcome-actions .button-primary { min-width: 146px; min-height: 50px; }
  .welcome-example { font-size: 14px; }
  .welcome-note { font-size: 12px; }
  .welcome-points { grid-template-columns: 1fr; gap: 26px; padding: 32px 0 38px; }
  .welcome-points > div { display: grid; grid-template-columns: 30px 1fr; gap: 0 12px; padding-left: 0; border: 0; }
  .welcome-points > div::before { grid-row: 1 / 3; margin: 4px 0 0; }
  .welcome-points h2 { font-size: 19px; }
  .welcome-points p { grid-column: 2; max-width: none; font-size: 15px; }
  .welcome-faq { display: block; padding: 40px 0 48px; }
  .welcome-faq h2 { font-size: 28px; margin-bottom: 24px; }
  .welcome-faq summary { font-size: 16px; }
  .welcome-blog { padding: 34px 0; gap: 22px; }
  .welcome-blog h2 { font-size: 26px; }
  .welcome-mode .onboarding-privacy { font-size: 12px; padding-top: 24px; }
  .welcome-mode .welcome-legal { font-size: 12px; gap: 18px; }
  .main { width: calc(100% - 32px); padding: 30px 0 100px; }
  #view-home:not([hidden]) { display: flex; flex-direction: column; gap: 24px; }
  #view-home > .chart-section { order: 3; }
  #view-home > .composition-section { order: 4; }
  #view-home > .change-section { order: 2; }
  .page-head { gap: 18px; margin: 0; }
  .page-head h1 { font-size: 27px; }
  .page-head .button { width: 100%; }
  .summary { grid-template-columns: 1fr 1fr; gap: 0; }
  .metric-primary { grid-column: 1 / -1; border: 0; }
  .metric { padding: 20px 14px; min-height: 118px; }
  .metric-primary { padding: 22px; min-height: 148px; }
  .metric:nth-child(2) { border-right: 1px solid var(--line); border-bottom: 0; }
  .metric:last-child { border: 0; }
  .metric-value { font-size: 26px; }
  .metric-primary .metric-value { font-size: 36px; }
  .metric-label { font-size: 12px; }
  .metric-note { font-size: 11px; }
  .chart-section, .composition-section, .change-section { padding: 22px 0; }
  .chart-wrap { height: 250px; }
  .section-head span { font-size: 12px; }
  .allocation-track { display: block; }
  .allocation-row { grid-template-columns: 8px minmax(0, 1fr) 80px 44px; }
  .topbar-inner { width: calc(100% - 32px); gap: 10px; }
  .topbar .brand span { font-size: 15px; }
  .topbar .brand img { width: 32px; height: 32px; }
  .topbar .account-button { font-size: 12px; padding: 8px 10px; }
  .bottom-nav { background: var(--topbar); border-top-color: var(--line); grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bottom-nav .nav-button { color: var(--header-muted); border-radius: 4px; font-size: 12px; }
  .bottom-nav .nav-button.active { background: var(--active); color: var(--blue); }
  .dialog-form { padding: 22px; }
  .onboarding:not(.welcome-mode) .onboarding-body h1 { font-size: 28px; }
  .onboarding:not(.welcome-mode) .onboarding-brand { flex-wrap: wrap; }
  .onboarding:not(.welcome-mode) .onboarding-account { gap: 6px; }
  .onboarding:not(.welcome-mode) .account-button { font-size: 12px; }
  .site-header, .site-footer, .blog-main { width: calc(100% - 40px); }
  .blog-heading { padding: 40px 0; margin-bottom: 26px; }
  .blog-heading h1 { font-size: 34px; }
  .blog-heading .lead { font-size: 19px; }
  .editorial-note h2 { font-size: 24px; }
  .reference-topbar { padding: 20px; }
  .reference-container { padding: 36px 20px; }
  .reference-container h1 { font-size: 30px; }
}
@media (max-width: 360px) {
  .welcome-mode .welcome-content h1 { font-size: 54px; }
  .welcome-mode .welcome-actions { gap: 10px; }
  .welcome-mode .welcome-actions .button-primary { min-width: 138px; }
  .welcome-example { gap: 8px; font-size: 13px; }
  .welcome-mode .onboarding-account { gap: 6px; }
  .welcome-mode .account-button { padding: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}