:root {
  --ink: #111318;
  --muted: #6c7078;
  --line: #e3e5e9;
  --surface: #ffffff;
  --canvas: #e9e9eb;
  --sidebar: #111216;
  --blue: #176c95;
  --blue-soft: #dceef5;
  --green: #167358;
  --green-soft: #e0f2eb;
  --progress-green: #16a66f;
  --progress-green-dark: #0d8658;
  --progress-track: #e7eee9;
  --pink: #e43e78;
  --accent-purple: #b626bb;
  --accent-pink: #d748b7;
  --accent-blue: #2152bb;
  --accent-green: #17a252;
  --accent-orange: #fa7c34;
  --radius: 22px;
  --type-micro: 0.75rem;
  --type-caption: 0.8125rem;
  --type-label: 0.875rem;
  --type-secondary: 0.9375rem;
  --type-small: var(--type-secondary);
  --type-body: 1.0625rem;
  --type-body-emphasis: 1.125rem;
  --type-section-sm: 1.125rem;
  --type-section: 1.25rem;
  --type-section-lg: 1.375rem;
  --type-heading: 1.5rem;
  --type-page: 1.875rem;
  --type-display-xs: 2rem;
  --type-display-sm: 2.25rem;
  --type-display-md: 2.5rem;
  --type-display-lg: 2.75rem;
  --type-display-xl: 3rem;
  --type-display-2xl: 3.25rem;
  --type-display-3xl: 3.5rem;
  --type-display-4xl: 4rem;
  --type-display-5xl: 4.5rem;
  --type-display-6xl: 5rem;
  --type-display: 6.25rem;
  --type-h1: var(--type-display-3xl);
  --type-h2: var(--type-page);
  --type-h3: var(--type-heading);
  --leading-compact: 1.4;
  --leading-prose: 1.6;
  --leading-heading: 1.2;
  --leading-display: 1.05;
  --leading-h1: var(--leading-display);
  --leading-h2: var(--leading-heading);
  --leading-h3: var(--leading-heading);
  --leading-body: var(--leading-prose);
  --weight-normal: 400;
  --weight-regular: 500;
  --weight-medium: 600;
  --weight-semibold: 700;
  --weight-bold: 800;
  --font-interface: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-heading: "Satoshi", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --icon-action: 16px;
  --icon-interface: 20px;
  --icon-navigation: 22px;
  --icon-prominent: 24px;
  --control-touch: 44px;
  --topbar-surface: rgba(255,255,255,.92);
  --control-surface: #fafafa;
  --elevated-surface: #ffffff;
  --soft-line: #eceef0;
  --lg-surface: rgba(255,255,255,.58);
  --lg-surface-strong: rgba(255,255,255,.72);
  --lg-control-surface: rgba(255,255,255,.66);
  --lg-rim: rgba(255,255,255,.82);
  --lg-edge: rgba(152,160,171,.28);
  --lg-sheen: rgba(255,255,255,.48);
  --lg-shadow: rgba(33,39,49,.12);
  --lg-opaque-surface: #f8f9fb;
  --lg-opaque-control: #ffffff;
  --lg-blur: 26px;
  --lg-saturation: 180%;
  font-family: "Avenir Next", Avenir, "Helvetica Neue", sans-serif;
}
.reicon { display: block; flex: 0 0 auto; }
.button-icon { width: 16px; height: 16px; }
.imported-chip .reicon { width: 13px; height: 13px; }
.dialog-icon > .reicon { width: 24px; height: 24px; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--canvas); transition: color 180ms ease, background-color 180ms ease; }
button, input { font: inherit; }
button { color: inherit; }
.skip-link { position: fixed; left: 16px; top: -50px; z-index: 99; padding: 10px 14px; background: white; color: black; border-radius: 10px; }
.skip-link:focus { top: 16px; }
.shell { min-height: 100vh; display: grid; grid-template-columns: 248px 1fr; }
.sidebar { position: fixed; inset: 0 auto 0 0; width: 248px; padding: 28px 20px 22px; background: var(--sidebar); color: #fff; display: flex; flex-direction: column; z-index: 20; }
.brand { display: flex; gap: 12px; align-items: center; text-decoration: none; color: white; padding: 0 8px 38px; }
.brand-mark { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; font-weight: 700; background: linear-gradient(145deg, #6b43ef, #111a63); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 18px; letter-spacing: -.02em; }
.brand small { color: #8f929a; margin-top: 2px; font-size: 12px; }
nav { display: grid; gap: 7px; }
.nav-item { position: relative; display: flex; align-items: center; gap: 13px; min-height: 48px; padding: 0 14px; border-radius: 15px; color: #9ea1a8; text-decoration: none; font-size: 14px; font-weight: 600; }
.nav-item.active { color: #fff; background: linear-gradient(90deg, #1c2027, #112f40); box-shadow: inset 0 0 0 1px #263e4b; }
.nav-item.active::after { content: ""; position: absolute; right: 0; top: 12px; bottom: 12px; width: 2px; background: #4fc3ff; box-shadow: 0 0 13px #4fc3ff; }
.nav-icon { width: 20px; height: 20px; border: 1.7px solid currentColor; border-radius: 6px; opacity: .9; }
.grid-icon { background: linear-gradient(90deg, transparent 47%, currentColor 47%, currentColor 53%, transparent 53%), linear-gradient(transparent 47%, currentColor 47%, currentColor 53%, transparent 53%); }
.card-icon { border-radius: 5px; box-shadow: inset 0 5px 0 -3px currentColor; }
.route-icon { transform: rotate(45deg); border-radius: 50% 50% 50% 3px; }
.list-icon { background: repeating-linear-gradient(transparent 0 4px, currentColor 4px 5px); border: 0; border-radius: 0; }
.privacy-note { margin-top: auto; padding: 16px 10px 0; display: flex; gap: 10px; align-items: flex-start; border-top: 1px solid #292b31; }
.privacy-note strong, .privacy-note small { display: block; }
.privacy-note strong { font-size: 12px; }
.privacy-note small { font-size: 10px; color: #7e828b; margin-top: 3px; line-height: 1.4; }
.lock { width: 16px; height: 13px; border: 1.5px solid #858993; border-radius: 4px; margin-top: 5px; position: relative; }
.lock::before { content: ""; position: absolute; width: 8px; height: 7px; border: 1.5px solid #858993; border-bottom: 0; border-radius: 7px 7px 0 0; left: 2.5px; top: -7px; }
main { position: relative; isolation: isolate; grid-column: 2; min-width: 0; }
.topbar { height: 82px; position: sticky; top: 0; z-index: 10; padding: 0 34px; display: flex; align-items: center; justify-content: flex-end; background: var(--topbar-surface); border-bottom: 1px solid var(--line); backdrop-filter: blur(18px); }
.mobile-brand { display: none; }
.pulse { position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 390px; max-height: 60px; overflow: hidden; padding: 0; color: white; background: #070708; border: 0; border-radius: 0 0 28px 28px; cursor: pointer; transition: width .28s ease, max-height .35s cubic-bezier(.2,.8,.2,1), border-radius .25s; box-shadow: 0 10px 30px rgba(0,0,0,.14); }
.pulse:hover { width: 408px; }
.pulse:focus-visible { outline: 3px solid #54bff3; outline-offset: 3px; }
.pulse[aria-expanded="true"] { width: 430px; max-height: 270px; border-radius: 0 0 32px 32px; }
.pulse-summary { height: 60px; display: flex; align-items: center; justify-content: center; gap: 15px; padding: 0 25px; font-size: 12px; color: #bbbcc0; white-space: nowrap; }
.pulse-label { color: #fff; font-weight: 700; font-size: 14px; }
.pulse-divider { width: 1px; height: 16px; background: #33353a; }
.weather { display: inline-flex; align-items: center; gap: 5px; }
.weather span { color: #f0c45a; font-size: 16px; }
.alert-dot { width: 8px; height: 8px; margin-left: 3px; background: var(--pink); border-radius: 50%; box-shadow: 0 0 0 4px rgba(228,62,120,.15); }
.pulse-panel { text-align: left; padding: 8px 28px 28px; display: flex; flex-direction: column; opacity: 0; transform: translateY(-5px); transition: opacity .2s .08s, transform .2s .08s; }
.pulse[aria-expanded="true"] .pulse-panel { opacity: 1; transform: none; }
.pulse-kicker { color: #8d9098; font-size: 11px; margin-bottom: 8px; }
.pulse-panel strong { font-size: 20px; letter-spacing: -.025em; }
.pulse-copy { color: #a7a9ae; font-size: 12px; margin-top: 5px; }
.pulse-action { color: #6fd0ff; font-size: 12px; font-weight: 700; margin-top: 21px; }
.profile { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); background: var(--elevated-surface); border-radius: 15px; padding: 7px 12px 7px 7px; }
.avatar { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; color: white; background: #17181b; font-size: 11px; }
.profile-copy { text-align: left; }
.profile-copy strong, .profile-copy small { display: block; }
.profile-copy strong { font-size: 12px; }
.profile-copy small { font-size: 9px; color: var(--muted); margin-top: 2px; }
.content { width: 100%; max-width: none; margin: 0; padding: 58px 28px 80px; }
.page-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 34px; }
.dayline { font-size: 12px; color: var(--muted); margin: 0 0 8px; }
.overview-meta { display: flex; align-items: center; gap: 10px; color: var(--muted); margin: 0 0 8px; font-size: 12px; }
.overview-meta i { width: 3px; height: 3px; flex: 0 0 3px; border-radius: 50%; background: #afb1b6; }
h1 { font-size: clamp(38px, 4.4vw, 64px); line-height: .98; letter-spacing: -.055em; margin: 0; font-weight: 650; }
.page-heading p:last-child { color: var(--muted); max-width: 550px; margin: 14px 0 0; font-size: 15px; }
.primary-action, .dark-action { border: 0; color: white; background: var(--ink); border-radius: 13px; padding: 13px 18px; font-weight: 650; cursor: pointer; }
.decision-card { display: grid; grid-template-columns: 1.3fr .7fr; min-height: 260px; background: #dcedf3; border-radius: 28px; overflow: hidden; margin-bottom: 18px; }
.decision-copy { padding: 34px 38px; }
.status-chip { display: inline-flex; gap: 8px; align-items: center; border-radius: 999px; background: rgba(255,255,255,.64); padding: 7px 11px; font-size: 11px; font-weight: 700; color: #24546b; }
.status-chip i { width: 7px; height: 7px; border-radius: 50%; background: #2b9fc6; }
.decision-card h2 { font-size: 31px; letter-spacing: -.04em; margin: 27px 0 8px; }
.decision-card p { color: #52707e; font-size: 14px; line-height: 1.55; max-width: 500px; margin: 0; }
.decision-actions { display: flex; gap: 12px; margin-top: 28px; align-items: center; }
.text-action { border: 0; background: transparent; font-weight: 700; font-size: 13px; cursor: pointer; }
.payoff-amount { display: flex; flex-direction: column; justify-content: center; padding: 40px; background: #12212a; color: white; }
.payoff-amount span, .payoff-amount small { color: #9cb0ba; font-size: 11px; }
.payoff-amount > strong { font-size: clamp(34px, 4vw, 52px); letter-spacing: -.05em; margin: 7px 0 31px; }
.payoff-amount b { font-size: 19px; margin-top: 5px; }
.metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 18px; }
.metrics article, .panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.metrics article { padding: 24px; min-height: 136px; display: flex; flex-direction: column; }
.metrics span { color: var(--muted); font-size: 11px; }
.metrics strong { font-size: 27px; letter-spacing: -.035em; margin: 12px 0 7px; }
.metrics small { font-size: 10px; color: #90939a; margin-top: auto; }
.progress { height: 6px; background: var(--progress-track); border-radius: 999px; overflow: hidden; margin-top: auto; box-shadow: inset 0 1px 2px rgba(24, 58, 45, .12); }
.progress i { display: block; width: 67%; height: 100%; border: 1px solid var(--progress-green-dark); border-radius: inherit; background: repeating-linear-gradient(135deg, rgba(255,255,255,.13) 0 6px, rgba(255,255,255,.03) 6px 12px), linear-gradient(180deg, #20bc7e 0%, var(--progress-green) 58%, #119462 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.32), 0 0 5px rgba(22,166,111,.15); }
.balance-composition { margin: 0 0 14px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.balance-composition-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; margin-bottom: 13px; }
.balance-composition-heading span { color: var(--muted); font-size: var(--type-caption); }
.balance-composition-heading strong { font-size: var(--type-label); font-variant-numeric: tabular-nums; }
.balance-composition-bar { display: flex; gap: 5px; width: 100%; height: 8px; }
.composition-segment { display: block; min-width: 0; height: 100%; border-radius: 999px; box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 1px 3px rgba(17,19,24,.09); transition: width 500ms cubic-bezier(.22,1,.36,1), opacity 180ms ease; }
.composition-segment[hidden] { display: none; }
.composition-cash { background: repeating-linear-gradient(135deg, rgba(255,255,255,.13) 0 7px, rgba(255,255,255,.02) 7px 14px), linear-gradient(180deg, #20bc7e, #119462); }
.composition-cards { background: repeating-linear-gradient(135deg, rgba(255,255,255,.13) 0 7px, rgba(255,255,255,.02) 7px 14px), linear-gradient(180deg, #3e8fe7, #2569c8); }
.composition-auto { background: repeating-linear-gradient(135deg, rgba(255,255,255,.13) 0 7px, rgba(255,255,255,.02) 7px 14px), linear-gradient(180deg, #ed5b91, #cf326e); }
.balance-composition-legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 14px; }
.balance-composition-legend > span { display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: 3px 8px; align-items: center; min-width: 0; }
.balance-composition-legend > span > i { grid-row: 1 / 3; width: 8px; height: 8px; border-radius: 50%; }
.balance-composition-legend small { overflow: hidden; color: var(--muted); font-size: var(--type-micro); text-overflow: ellipsis; white-space: nowrap; }
.balance-composition-legend strong { font-size: var(--type-label); font-variant-numeric: tabular-nums; }
.overview-visuals { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(270px, .75fr); gap: 14px; margin-bottom: 14px; }
.overview-visuals > article { min-width: 0; padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.visual-heading { min-height: 38px; display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.visual-heading span { display: block; color: var(--muted); font-size: 9px; }
.visual-heading strong { display: block; margin-top: 4px; font-size: 16px; letter-spacing: -.025em; }
.chart-key { display: inline-flex !important; align-items: center; gap: 6px; padding-top: 3px; white-space: nowrap; }
.chart-key i { width: 7px; height: 11px; border-radius: 2px; background: rgba(40,105,216,.28); border-top: 2px solid #2869d8; }
.line-chart-wrap { position: relative; margin-top: 8px; }
.line-chart { display: block; width: 100%; height: 148px; overflow: visible; }
.chart-zero { stroke: #e4e6ea; stroke-width: 1; stroke-dasharray: 4 5; }
.chart-bar { fill: rgba(40,105,216,.14); }
.chart-bar.negative { fill: rgba(39,43,50,.10); }
.chart-line { fill: none; stroke: #2869d8; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.chart-point { fill: #fff; stroke: #2869d8; stroke-width: 2; }
.chart-point.current { fill: #2869d8; stroke: #fff; stroke-width: 3; }
.chart-axis { display: flex; justify-content: space-between; color: #9a9da3; font-size: 8px; }
.chart-tooltip-position { position: absolute; z-index: 4; width: max-content; max-width: min(220px, calc(100vw - 16px)); pointer-events: none; transform: translate(-50%, calc(-100% - 10px)); }
.chart-tooltip { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 2px 14px; min-width: 154px; max-width: min(220px, calc(100vw - 16px)); padding: 8px 11px; border: 1px solid rgba(255,255,255,.11); border-radius: 9px; background: #202020; color: #fff; box-shadow: 0 10px 28px -14px rgba(26,26,26,.6), 0 2px 8px -4px rgba(26,26,26,.35); font-size: 11px; font-weight: 500; line-height: 1.4; text-align: left; white-space: nowrap; opacity: 0; visibility: hidden; filter: blur(2px); translate: 0 24px; transition: opacity 320ms cubic-bezier(.25,.46,.45,.94), translate 420ms cubic-bezier(.25,.46,.45,.94), filter 320ms cubic-bezier(.25,.46,.45,.94), visibility 0s linear 420ms; }
.chart-tooltip::after { content: ""; position: absolute; left: 50%; bottom: -4px; width: 8px; height: 8px; border-right: 1px solid rgba(255,255,255,.11); border-bottom: 1px solid rgba(255,255,255,.11); background: #202020; transform: translateX(-50%) rotate(45deg); }
.chart-tooltip > span { color: #aeb0b5; }
.chart-tooltip > strong { font-variant-numeric: tabular-nums; }
.chart-tooltip > small { grid-column: 1 / 3; color: #8d9096; font-size: 9px; }
.chart-tooltip[data-visible="true"] { opacity: 1; visibility: visible; filter: blur(0); translate: 0 0; transition-delay: 80ms, 80ms, 80ms, 0s; }
.chart-tooltip[data-motion="instant"] { translate: 0 0; transition: none; }
.payoff-ring-panel { display: flex; flex-direction: column; }
.ring-content { display: grid; grid-template-columns: 122px 1fr; gap: 20px; align-items: center; margin-top: 14px; }
.payoff-ring { position: relative; isolation: isolate; width: 122px; height: 122px; }
.payoff-ring-orbit {
  position: absolute;
  z-index: -1;
  inset: -7px;
  border-radius: 50%;
  background: conic-gradient(in oklch, var(--accent-green), var(--accent-blue), var(--accent-purple), var(--accent-pink), var(--accent-green));
  opacity: .7;
  -webkit-mask: radial-gradient(circle, transparent 0 48%, #000 59% 72%, transparent 82%);
  mask: radial-gradient(circle, transparent 0 48%, #000 59% 72%, transparent 82%);
  filter: blur(7px) saturate(125%);
  transform: rotate(0deg);
  animation: payoff-ring-orbit 22s linear infinite;
  animation-play-state: paused;
  will-change: transform;
}
.payoff-ring[data-orbit-visible="true"] .payoff-ring-orbit { animation-play-state: running; }
.payoff-ring:hover .payoff-ring-orbit { animation-play-state: paused; }
.payoff-ring svg { position: relative; z-index: 1; width: 100%; height: 100%; transform: rotate(-90deg); }
.payoff-ring circle { fill: none; stroke-width: 10; }
.ring-track { stroke: #eceef1; }
.ring-value { stroke: #2869d8; stroke-linecap: round; stroke-dasharray: 0 100; transition: stroke-dasharray 650ms cubic-bezier(.22,1,.36,1); }
.payoff-ring > span:not(.payoff-ring-orbit) { position: absolute; z-index: 2; inset: 0; display: grid; place-content: center; text-align: center; }
.payoff-ring > span strong { font-size: 22px; letter-spacing: -.04em; }
.payoff-ring > span small { margin-top: 2px; color: var(--muted); font-size: 8px; }
.ring-details { margin: 0; display: grid; gap: 11px; }
.ring-details div { padding-bottom: 9px; border-bottom: 1px solid #eceef0; }
.ring-details div:last-child { padding-bottom: 0; border-bottom: 0; }
.ring-details dt { color: var(--muted); font-size: 8px; }
.ring-details dd { margin: 3px 0 0; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
@keyframes payoff-ring-orbit { to { transform: rotate(360deg); } }
.lower-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 18px; }
.activity { margin-top: 14px; }
.activity-row { display: grid; grid-template-columns: 36px 1fr auto auto; gap: 12px; align-items: center; padding: 13px 0; border-top: 1px solid #eceef0; }
.activity-row > .row-icon { width: 31px; height: 31px; padding: 7px; display: grid; place-items: center; border-radius: 10px; color: var(--green); background: var(--green-soft); }
.activity-row strong, .activity-row small { display: block; }
.activity-row strong { font-size: 12px; }
.activity-row small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.activity-amount { text-align: right; }
.activity-amount strong { font-variant-numeric: tabular-nums; }
.ledger-heading-actions { display: flex; align-items: center; gap: 10px; }
.transaction-toolbar { display: grid; grid-template-columns: minmax(150px, .35fr) minmax(220px, 1fr); gap: 10px; margin: 0 0 4px; }
.transaction-toolbar label { min-width: 0; color: var(--muted); font-size: 8px; }
.transaction-toolbar label span { display: block; margin-bottom: 5px; }
.transaction-toolbar select,.transaction-toolbar input { width: 100%; min-height: 36px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 11px; background: #fafafa; color: var(--ink); font: inherit; font-size: 10px; }
.transaction-toolbar .northstar-select-button { min-height: 36px; border-radius: 10px; font-size: 10px; }
.transaction-toolbar .northstar-select-chevron { width: 20px; height: 20px; border-radius: 7px; }
.transaction-row > .row-icon { color: #5e626a; background: #f1f2f4; }
.transaction-row.transaction-income > .row-icon { color: var(--green); background: var(--green-soft); }
.transaction-row.transaction-expense > .row-icon,.transaction-row.transaction-charge > .row-icon { color: #b63a50; background: #fbf0f2; }
.transaction-row.transaction-payment > .row-icon { color: var(--blue); background: #eef6fa; }
.transaction-amount-income { color: var(--green); }
.transaction-amount-expense,.transaction-amount-payment,.transaction-amount-charge { color: #a9364a; }
.transaction-actions { display: flex; align-items: center; gap: 4px; }
.transaction-action { width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 9px; color: #858990; background: transparent; cursor: pointer; }
.transaction-action:hover { color: var(--ink); background: #f0f1f3; }
.transaction-action.is-delete:hover { color: #b52d45; background: #fbf0f2; }
.transaction-action .reicon { width: var(--icon-action); height: var(--icon-action); }
.transaction-history-badge { display: inline-flex; align-items: center; min-height: 24px; padding: 0 9px; border-radius: 999px; color: #777b83; background: #f1f2f4; font-size: var(--type-caption); white-space: nowrap; }
.transaction-empty { margin: 0; }
.ledger-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.ledger-summary-grid .history-stat { min-height: 126px; }
.ledger-summary-grid strong.negative { color: #a9364a; }
.vault-icon i { font-size: 19px; }
.vault-icon img { width: 36px; height: 36px; display: block; }
.dialog-icon.vault-icon { width: 52px; height: 52px; background: #f2f0ff; }
.form-error { min-height: 16px; margin: 8px 0 0; color: #b52d45; font-size: 10px; }
.lock-vault { width: 100%; margin-top: 13px; border: 0; background: transparent; color: #77787e; font-size: 10px; cursor: pointer; }
.lock-vault .reicon { display: inline-block; width: 14px; height: 14px; margin-right: 5px; vertical-align: -3px; }
.vault-actions button:last-child[disabled] { opacity: .55; cursor: wait; }
.content { transition: filter 180ms ease, opacity 180ms ease; }
.backup-status { display: block; margin-top: 12px; color: #8a8c92; font-size: 8px; line-height: 1.45; }
.backup-status.is-due { color: #a66a12; }
.restore-file-summary { margin: 16px 0; padding: 11px 12px; border: 1px solid var(--line); border-radius: 11px; background: #f7f7f8; color: #666970; font-size: 9px; line-height: 1.55; }
.restore-file-summary strong { display: block; color: var(--ink); font-size: 10px; }
.restore-file-summary:empty { display: none; }
.records-section { padding-top: 70px; scroll-margin-top: 60px; }
.records-heading { display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:18px }.records-heading h2{margin:0;font-size:24px;letter-spacing:-.035em}.records-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.record-panel{min-height:190px}.record-list{display:grid}.record-row{display:grid;grid-template-columns:34px 1fr auto auto;gap:11px;align-items:center;padding:12px 0;border-top:1px solid #eceef0}.record-row>.row-icon{width:31px;height:31px;padding:7px;display:grid;place-items:center;border-radius:9px;background:#f0f1f3;color:#565960}.record-row strong,.record-row small{display:block}.record-row strong{font-size:11px}.record-row small{margin-top:3px;color:#85868c;font-size:8px}.record-row .record-amount{font-size:12px;font-weight:650}.record-remove{width:27px;height:27px;border:0;border-radius:8px;background:transparent;color:#92939a;cursor:pointer}.record-remove:hover{background:#f1f1f3;color:#b12d44}.empty-record{padding:28px 10px;text-align:center;color:#898a90;font-size:10px}.goals-list{grid-template-columns:repeat(2,1fr);gap:12px}.goals-list .record-row{border:1px solid var(--line);border-radius:12px;padding:14px}.settings-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.setting-card{min-height:205px;display:flex;flex-direction:column;align-items:flex-start}.setting-card>.reicon{width:22px;height:22px}.setting-card h3{margin:38px 0 7px;font-size:14px}.setting-card p{margin:0;color:#77787e;font-size:10px;line-height:1.5}.setting-card button,.file-button{margin-top:auto;border:1px solid var(--line);border-radius:999px;background:#fff;padding:7px 12px;font-size:9px;font-weight:650;cursor:pointer}.setting-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:auto}.setting-actions button{margin-top:0}.file-button input{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.setting-actions .file-button { margin-top: 0; }
.reminder-days { width: 100%; display: flex; flex-wrap: wrap; gap: 10px; margin: 13px 0 10px; padding: 0; border: 0; }
.reminder-days label { position: relative; min-height: 30px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px 4px 6px; border: 1px solid var(--line); border-radius: 999px; color: #666970; background: color-mix(in srgb, #fff 82%, transparent); -webkit-backdrop-filter: saturate(145%) blur(10px); backdrop-filter: saturate(145%) blur(10px); box-shadow: inset 0 1px 0 rgba(255,255,255,.7); font-size: 8px; line-height: 1; font-weight: 650; cursor: pointer; transition: color 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease; }
.reminder-days label::after { content: ""; position: absolute; inset: -5px; border-radius: inherit; }
.reminder-days label:hover { border-color: #abb3bd; background: #f8f9fa; transform: translateY(-1px); }
.reminder-days input { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.reminder-check { width: 14px; height: 14px; display: grid; flex: 0 0 auto; place-items: center; border: 1px solid #c8cdd4; border-radius: 50%; background: #f3f4f6; box-shadow: inset 0 1px 2px rgba(17,19,24,.08); transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease; }
.reminder-check i { width: 5px; height: 5px; border-radius: 50%; background: transparent; transform: scale(.55); transition: background 160ms ease, box-shadow 160ms ease, transform 180ms cubic-bezier(.22,1,.36,1); }
.reminder-days label:has(input:checked) { color: #153d50; border-color: #5b8ca3; background: #edf8fc; }
.reminder-days input:checked + .reminder-check { border-color: #176c95; background: #17313e; box-shadow: 0 0 0 3px rgba(23,108,149,.1); }
.reminder-days input:checked + .reminder-check i { background: #8bdcff; box-shadow: 0 0 7px rgba(79,195,255,.72); transform: scale(1); }
.reminder-days label:has(input:focus-visible) { outline: 3px solid rgba(79,195,255,.42); outline-offset: 3px; }
.reminder-days label:has(input:disabled) { opacity: .48; cursor: not-allowed; transform: none; }
.reminder-setting-card #toggle-reminders[aria-pressed="true"] { color: #fff; border-color: #17181b; background: #17181b; }
.theme-orbit { position: relative; width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid #c9d0d8; border-radius: 50%; background: linear-gradient(135deg, #fff 48%, #171a20 50%); box-shadow: 0 0 0 5px rgba(33, 108, 145, .07); transform: rotate(-18deg); }
.theme-orbit i { width: 7px; height: 7px; border-radius: 50%; background: #87d7ff; box-shadow: 0 0 8px rgba(79, 195, 255, .78); }
.theme-toggle { width: 100%; min-height: 38px; display: grid; grid-template-columns: 1fr 46px 1fr; align-items: center; gap: 8px; padding: 5px 8px !important; }
.theme-toggle-label { color: var(--muted); font-size: var(--type-micro); transition: color 180ms ease; }
.theme-toggle-light { text-align: right; color: var(--ink); }
.theme-toggle-dark { text-align: left; }
.theme-toggle-track { position: relative; width: 46px; height: 24px; border: 1px solid #cbd0d7; border-radius: 999px; background: #eef0f3; box-shadow: inset 0 1px 2px rgba(17,19,24,.08); transition: border-color 180ms ease, background 180ms ease; }
.theme-toggle-track i { position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(17,19,24,.22); transition: translate 220ms cubic-bezier(.22,1,.36,1), background 180ms ease; }
.theme-toggle[aria-checked="true"] .theme-toggle-track { border-color: #4e6574; background: #172c38; }
.theme-toggle[aria-checked="true"] .theme-toggle-track i { translate: 22px 0; background: #8bdcff; }
.theme-toggle[aria-checked="true"] .theme-toggle-light { color: var(--muted); }
.theme-toggle[aria-checked="true"] .theme-toggle-dark { color: var(--ink); }
.theme-toggle:focus-visible { outline: 3px solid rgba(79,195,255,.42); outline-offset: 3px; }
.number-field { min-width: 0; }
.number-field > label { display: block; }
.number-stepper { min-height: var(--control-input-height, 46px); display: grid; grid-template-columns: 42px minmax(0,1fr) 42px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--control-radius, 12px); background: var(--control-surface); transition: border-color 160ms ease, box-shadow 160ms ease; }
.number-stepper:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(23,108,149,.13); }
.number-stepper input[type="number"] { width: 100%; min-width: 0; height: 100%; padding: 8px 6px; border: 0; border-radius: 0; background: transparent; font-variant-numeric: tabular-nums; text-align: center; -moz-appearance: textfield; appearance: textfield; }
.number-stepper input[type="number"]::-webkit-inner-spin-button,
.number-stepper input[type="number"]::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; appearance: none; }
.northstar-select-source { position: absolute !important; width: 1px !important; height: 1px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; clip-path: inset(50%) !important; border: 0 !important; white-space: nowrap !important; }
.northstar-select { position: relative; width: 100%; }
.northstar-select-button { width: 100%; min-height: var(--control-input-height, 46px); display: grid; grid-template-columns: minmax(0,1fr) 24px; align-items: center; gap: 10px; padding: 9px 11px 9px 13px; border: 1px solid var(--line); border-radius: var(--control-radius, 12px); color: var(--ink); background: var(--control-surface); font: inherit; text-align: left; cursor: pointer; transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease; }
.northstar-select-button:hover:not(:disabled) { border-color: #aeb5bd; }
.northstar-select-button:focus-visible { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(23,108,149,.13); }
.northstar-select-button:disabled { opacity: .5; cursor: not-allowed; }
.northstar-select-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.northstar-select-chevron { position: relative; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 8px; background: #f0f2f4; }
.northstar-select-chevron::before { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 180ms cubic-bezier(.22,1,.36,1); }
.northstar-select.is-open .northstar-select-chevron::before { transform: translateY(2px) rotate(225deg); }
.northstar-select-list { position: absolute; z-index: 20; top: calc(100% + 7px); left: 0; right: 0; max-height: 226px; display: grid; gap: 3px; overflow: auto; padding: 6px; border: 1px solid var(--line); border-radius: 13px; background: var(--elevated-surface); box-shadow: 0 18px 40px -18px rgba(17,19,24,.42), 0 4px 12px rgba(17,19,24,.08); opacity: 0; visibility: hidden; transform: translateY(-5px) scale(.985); transform-origin: top; transition: opacity 150ms ease, transform 180ms cubic-bezier(.22,1,.36,1), visibility 0s linear 180ms; }
.northstar-select.is-open .northstar-select-list { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.northstar-select-option { min-height: 40px; display: grid; grid-template-columns: minmax(0,1fr) 10px; align-items: center; gap: 12px; padding: 8px 10px; border: 0; border-radius: 9px; color: var(--ink); background: transparent; font: inherit; text-align: left; cursor: pointer; }
.northstar-select-option:hover, .northstar-select-option.is-active { background: #f0f4f6; }
.northstar-select-option i { width: 7px; height: 7px; border-radius: 50%; background: transparent; }
.northstar-select-option[aria-selected="true"] { color: #153d50; font-weight: 650; background: #edf8fc; }
.northstar-select-option[aria-selected="true"] i { background: #2997c1; box-shadow: 0 0 0 4px rgba(41,151,193,.12); }
.northstar-date-source { position: absolute !important; width: 1px !important; height: 1px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; clip-path: inset(50%) !important; border: 0 !important; white-space: nowrap !important; }
.northstar-calendar { position: relative; width: 100%; }
.northstar-calendar-button { width: 100%; min-height: var(--control-input-height, 46px); display: grid; grid-template-columns: minmax(0,1fr) 30px; align-items: center; gap: 10px; padding: 9px 9px 9px 13px; border: 1px solid var(--line); border-radius: var(--control-radius, 12px); color: var(--ink); background: var(--control-surface); font: inherit; text-align: left; cursor: pointer; transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease; }
.northstar-calendar-button:hover { border-color: #aeb5bd; }
.northstar-calendar-button:focus-visible { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(23,108,149,.13); }
.northstar-calendar-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.northstar-calendar-icon { position: relative; width: 30px; height: 28px; border-radius: 9px; background: #f0f2f4; }
.northstar-calendar-icon::before { content: ""; position: absolute; left: 8px; top: 8px; width: 12px; height: 11px; border: 1.5px solid currentColor; border-radius: 3px; }
.northstar-calendar-icon::after { content: ""; position: absolute; left: 10px; top: 6px; width: 8px; height: 5px; border-left: 1.5px solid currentColor; border-right: 1.5px solid currentColor; box-shadow: 0 5px 0 -1px currentColor; }
.northstar-calendar-panel { position: absolute; z-index: 30; top: calc(100% + 7px); right: 0; width: min(326px, calc(100vw - 32px)); padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--elevated-surface); box-shadow: 0 22px 52px -22px rgba(17,19,24,.48), 0 5px 16px rgba(17,19,24,.09); opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.985); transform-origin: top right; transition: opacity 160ms ease, transform 200ms cubic-bezier(.22,1,.36,1), visibility 0s linear 200ms; }
.northstar-calendar.is-open .northstar-calendar-panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.northstar-calendar-header { display: grid; grid-template-columns: 40px minmax(118px,1fr) 88px 40px; gap: 6px; align-items: center; margin-bottom: 14px; }
.northstar-calendar-header .northstar-select-button { min-height: 40px; padding: 7px 7px 7px 10px; border-color: transparent; background: transparent; font-size: 12px; font-weight: 650; }
.northstar-calendar-header .northstar-select-chevron { width: 22px; height: 22px; }
.northstar-calendar-header .northstar-select-list { min-width: 120px; max-height: 212px; }
.northstar-calendar-header .northstar-select:nth-of-type(2) .northstar-select-list { left: auto; width: 96px; min-width: 96px; }
.northstar-calendar-nav { width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 11px; color: var(--ink); background: transparent; font-size: 29px; font-weight: 400; line-height: 1; cursor: pointer; }
.northstar-calendar-nav:hover { background: #f0f4f6; }
.northstar-calendar-nav:focus-visible { outline: 3px solid rgba(79,195,255,.42); outline-offset: 1px; }
.northstar-calendar-weekdays, .northstar-calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.northstar-calendar-weekdays { margin-bottom: 4px; }
.northstar-calendar-weekdays span { display: grid; place-items: center; height: 26px; color: var(--muted); font-size: 9px; font-weight: 650; }
.northstar-calendar-day { position: relative; height: 39px; display: grid; place-items: center; border: 0; border-radius: 11px; color: var(--ink); background: transparent; font: inherit; font-size: 11px; font-variant-numeric: tabular-nums; cursor: pointer; }
.northstar-calendar-day:hover, .northstar-calendar-day:focus-visible { outline: none; background: #eef4f6; }
.northstar-calendar-day.is-adjacent { color: #b6bac0; }
.northstar-calendar-day.is-today { box-shadow: inset 0 0 0 1px #8eb6c8; }
.northstar-calendar-day[aria-selected="true"] { color: #e9f9ff; background: #17313e; font-weight: 700; box-shadow: none; }
.northstar-calendar-day[aria-selected="true"]::after { content: ""; position: absolute; bottom: 5px; width: 4px; height: 4px; border-radius: 50%; background: #63d1ff; box-shadow: 0 0 7px rgba(79,195,255,.75); }
.number-stepper input[type="number"]:focus { outline: 0; }
.number-stepper button { min-width: 42px; min-height: 42px; display: grid; place-items: center; margin: 0; padding: 0; border: 0; border-radius: 0; color: var(--muted); background: transparent; font-size: 18px; font-weight: var(--weight-medium); cursor: pointer; transition: color 160ms ease, background 160ms ease; }
.number-stepper button:first-child { border-right: 1px solid var(--line); }
.number-stepper button:last-child { border-left: 1px solid var(--line); }
.number-stepper button:hover:not(:disabled) { color: var(--ink); background: rgba(23,108,149,.08); }
.number-stepper button:active:not(:disabled) { background: rgba(23,108,149,.14); }
.number-stepper button:focus-visible { position: relative; z-index: 1; outline: 2px solid var(--blue); outline-offset: -3px; }
.number-stepper button:disabled { color: var(--line); cursor: not-allowed; }
.health-setting-card { grid-column: span 2; }
.health-setting-card > div { width: 100%; }
.health-list { width: 100%; margin: 20px 0 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; }
.health-list > div { min-width: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 9px 0; border-top: 1px solid var(--line); }
.health-list dt { color: var(--muted); font-size: var(--type-caption); }
.health-list dd { overflow: hidden; margin: 0; font-size: var(--type-caption); font-weight: var(--weight-medium); text-align: right; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 760px) { .health-setting-card { grid-column: auto; } }
.imported-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid #cfe7dc;background:#f0f8f4;color:#247052;border-radius:999px;padding:7px 11px;font-size:9px;font-weight:700}.history-summary-grid{margin-bottom:14px}.history-stat{min-height:130px;display:flex;flex-direction:column}.history-stat>span{color:var(--muted);font-size:10px}.history-stat>strong{font-size:25px;letter-spacing:-.035em;margin:12px 0 6px}.history-stat>small{color:#898b91;font-size:9px;margin-top:auto}.workbook-accounts-panel,.income-history-panel{margin-top:14px}.workbook-account-list{display:grid;grid-template-columns:1fr 1fr;column-gap:28px}.history-account-row{display:grid;grid-template-columns:1fr auto;gap:5px 16px;align-items:center;padding:13px 0;border-top:1px solid #eceef0}.history-account-row>span:first-child{grid-row:1/3}.history-account-row strong,.history-account-row small{display:block}.history-account-row strong{font-size:11px}.history-account-row small,.history-account-minimum{color:#85868c;font-size:8px;margin-top:3px}.history-account-minimum,.history-account-balance{text-align:right}.history-account-balance strong{font-variant-numeric:tabular-nums}.history-table-wrap{overflow-x:auto}.history-table{width:100%;border-collapse:collapse;min-width:760px;font-size:10px}.history-table th{padding:10px 12px;text-align:left;color:#777980;font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;border-bottom:1px solid #dfe1e4}.history-table td{padding:12px;border-bottom:1px solid #eceef0;vertical-align:top}.history-table .numeric{text-align:right;font-variant-numeric:tabular-nums}.history-table .positive{color:#217257}.history-table .negative{color:#b13b4d}.history-status{font-weight:700}.history-note{color:#73757b;max-width:230px}.workbook-history{scroll-margin-top:60px}
@media(max-width:760px){.records-grid,.settings-grid,.ledger-summary-grid{grid-template-columns:1fr}.goals-list{grid-template-columns:1fr}.records-section{padding-top:52px}.workbook-account-list{grid-template-columns:1fr}.imported-chip{display:none}.transaction-toolbar{grid-template-columns:1fr}.ledger-heading-actions{align-items:flex-end;flex-direction:column}.transaction-form-grid{grid-template-columns:1fr}}
@media(max-width:760px){.activity-row{grid-template-columns:36px minmax(0,1fr) auto}.activity-amount{grid-column:3;grid-row:1}.transaction-actions,.transaction-history-badge{grid-column:2/4;justify-self:end}.transaction-actions{margin-top:-4px}}
.panel { padding: 26px; }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 17px; }
.panel-heading h2 { font-size: 18px; margin: 0 0 4px; letter-spacing: -.02em; }
.panel-heading p { color: var(--muted); font-size: 11px; margin: 0; }
.panel-heading button { border: 0; background: transparent; color: var(--blue); font-size: 11px; font-weight: 700; cursor: pointer; }
.account { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 15px 0; border-top: 1px solid #eceef0; }
.account-logo { width: 30px; height: 30px; min-width: 30px; max-width: 30px; min-height: 30px; max-height: 30px; border-radius: 9px; display: grid; place-items: center; justify-self: start; overflow: hidden; background: #eef0f2; color: #3c4047; font-size: 9px; font-weight: 800; }
.account-logo.bank-logo { overflow: hidden; background: transparent; }
.account-logo.bank-logo img { display: block; width: 30px !important; height: 30px !important; min-width: 30px; max-width: 30px !important; min-height: 30px; max-height: 30px !important; object-fit: contain; }
.account-logo[data-logo="apple-card"] img { transform: scale(1.55); }
.account-logo[data-logo="paypal"] img { transform: scale(1.18); }
.account-name { min-width: 0; }
.account-title { display: flex; align-items: center; gap: 6px; min-width: 0; }
.account-title strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-label-edit { width: 23px; height: 23px; flex: 0 0 23px; display: grid; place-items: center; border: 0; border-radius: 7px; padding: 0; background: transparent; color: #9a9ca2; cursor: pointer; opacity: 0; transition: opacity 160ms ease, color 160ms ease, background 160ms ease; }
.account:hover .account-label-edit, .account-label-edit:focus-visible { opacity: 1; }
.account-label-edit:hover { color: var(--ink); background: #f0f1f3; }
.account-name strong, .account-name small, .account-value strong, .account-value small { display: block; }
.account-name strong, .account-value strong { font-size: 12px; }
.account-name small, .account-value small { color: var(--muted); font-size: 9px; margin-top: 3px; }
.account-value { text-align: right; }
.paid-badge, .next-badge { min-width: 45px; text-align: center; border-radius: 999px; padding: 6px 9px; font-size: 9px; font-weight: 800; }
.paid-badge { color: var(--green); background: var(--green-soft); }
.next-badge { color: #a84c13; background: #fff0df; }
.accounts-page { display: grid; gap: 14px; }
.accounts-header { display: flex; align-items: end; justify-content: space-between; gap: 24px; padding: 4px 0 10px; }
.accounts-header h1 { margin: 2px 0 7px; font-size: 34px; letter-spacing: -.045em; line-height: 1; }
.accounts-header > div > p:last-child { margin: 0; color: var(--muted); font-size: 11px; }
.chip-button { min-height: 32px; border: 1px solid var(--line); border-radius: 999px; padding: 0 14px; background: #fff; color: #25272c; font-size: 10px; font-weight: 700; cursor: pointer; transition: transform 180ms ease, background 180ms ease; }
.chip-button.dark { border-color: #191a1d; background: #191a1d; color: #fff; }
.chip-button:hover { transform: translateY(-1px); }
.chip-button:active { transform: scale(.98); }
.balance-overview { display: grid; grid-template-columns: minmax(260px, 1.08fr) 1.92fr; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.card-wallet { display: grid; grid-template-columns: minmax(340px, .92fr) minmax(320px, 1.08fr); gap: 28px; align-items: center; overflow: hidden; padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.card-deck-wrap { min-width: 0; }
.card-deck { position: relative; height: 286px; isolation: isolate; touch-action: pan-y; overscroll-behavior-x: contain; -webkit-user-select: none; user-select: none; }
.deck-card { --deck-x: 0px; --deck-y: 0px; --deck-rotate: 0deg; --deck-scale: 1; --deck-opacity: 1; --deck-z: 1; --card-glow-gradient: linear-gradient(90deg, rgba(46,118,204,.36), rgba(46,118,204,.36)); position: absolute; left: 50%; top: 50%; z-index: var(--deck-z); isolation: isolate; width: min(360px, 83%); margin: 0; padding: 0; border: 0; border-radius: 19px; background: transparent; opacity: var(--deck-opacity); cursor: pointer; filter: saturate(.82) brightness(.98) drop-shadow(0 13px 19px rgba(16,25,44,.12)); transform: translate(-50%, -50%) translate(var(--deck-x), var(--deck-y)) rotate(var(--deck-rotate)) scale(var(--deck-scale)); transform-origin: center; transition: transform 260ms cubic-bezier(.22,1,.36,1), opacity 190ms cubic-bezier(.22,1,.36,1), filter 220ms cubic-bezier(.22,1,.36,1); }
.deck-card::before { content: ""; position: absolute; z-index: 0; top: -8px; left: 7%; width: 86%; height: 32px; border-radius: 999px; background: var(--card-glow-gradient); opacity: 0; filter: blur(14px); pointer-events: none; transition: opacity 220ms cubic-bezier(.22,1,.36,1); }
.deck-card[data-account-id="afcu-debit-0871"] { --card-glow-gradient: linear-gradient(90deg, rgba(16,119,171,.4), rgba(16,119,171,.4)); }
.deck-card[data-account-id="afcu-debit-4145"] { --card-glow-gradient: linear-gradient(90deg, rgba(92,35,194,.44), rgba(92,35,194,.44)); }
.deck-card[data-account-id="afcu-debit-6211"] { --card-glow-gradient: linear-gradient(90deg, rgba(25,105,167,.4), rgba(25,105,167,.4)); }
.deck-card[data-account-id="alphaeon"] { --card-glow-gradient: linear-gradient(90deg, rgba(203,36,65,.38), rgba(203,36,65,.38)); }
.deck-card[data-account-id="bank-of-america"] { --card-glow-gradient: linear-gradient(90deg, rgba(220,38,63,.43), rgba(220,38,63,.43)); }
.deck-card[data-account-id="paypal"] { --card-glow-gradient: linear-gradient(90deg, rgba(20,172,230,.44), rgba(20,172,230,.44)); }
.deck-card[data-account-id="apple-card"] { --card-glow-gradient: linear-gradient(90deg, rgba(39,139,235,.58) 0%, rgba(126,75,220,.56) 32%, rgba(239,76,157,.54) 66%, rgba(68,190,123,.56) 100%); }
.deck-card[data-position="front"] { filter: saturate(1.03) drop-shadow(0 22px 26px rgba(16,25,44,.18)); }
.deck-card[data-position="front"]::before { opacity: 1; }
.deck-card img { position: relative; z-index: 1; display: block; width: 100%; height: auto; max-height: 260px; object-fit: contain; border-radius: inherit; pointer-events: none; }
.deck-card:not(.selected):hover { opacity: .94; filter: saturate(.95) brightness(1) drop-shadow(0 17px 22px rgba(16,25,44,.16)); }
.deck-card:focus-visible { outline: 3px solid rgba(35,142,204,.42); outline-offset: 5px; }
.card-deck.instant .deck-card { transition: none; }
.card-deck-hint { display: flex; align-items: center; justify-content: center; gap: 6px; margin: -2px 0 0; color: var(--muted); font-size: 9px; }
.card-deck-hint .reicon { width: 12px; height: 12px; }
.card-focus-panel { min-height: 230px; display: grid; grid-template-columns: minmax(0,1fr) auto; grid-template-rows: 1fr auto; gap: 18px 28px; padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.card-focus-panel h2 { margin: 2px 0 6px; font-size: 20px; letter-spacing: -.03em; }
.card-focus-panel > div > p:last-child { max-width: 390px; margin: 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.card-focus-panel dl { min-width: 190px; margin: 0; display: grid; align-content: start; }
.card-focus-panel dl div { display: flex; justify-content: space-between; gap: 18px; padding: 9px 0; border-bottom: 1px solid #eceef0; }
.card-focus-panel dt { color: var(--muted); font-size: 8px; }
.card-focus-panel dd { margin: 0; font-size: 9px; font-weight: 700; text-align: right; }
.card-focus-panel .chip-button { grid-column: 1 / -1; justify-self: start; }
.balance-primary { min-height: 166px; padding: 26px; display: flex; flex-direction: column; justify-content: center; border-right: 1px solid var(--line); background: #17181b; color: #fff; }
.balance-primary span, .balance-breakdown span { font-size: 9px; color: #96999f; }
.balance-primary strong { margin: 10px 0 7px; font-size: 31px; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.balance-primary small, .balance-breakdown small { color: #777b82; font-size: 8px; }
.balance-breakdown { display: grid; grid-template-columns: repeat(3, 1fr); }
.balance-breakdown article { min-width: 0; padding: 26px 22px; display: flex; flex-direction: column; justify-content: center; }
.balance-breakdown article + article { border-left: 1px solid var(--line); }
.balance-breakdown strong { margin: 12px 0 6px; font-size: 19px; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.account-group { margin: 0; }
.account-group .account:last-child { padding-bottom: 2px; }
.logo-placeholder { outline: 1px dashed #cfd2d7; outline-offset: -3px; }
.loan-index { min-width: 45px; text-align: center; color: #a1a3a8; font-size: 9px; font-variant-numeric: tabular-nums; }
.mini-label { font-size: 10px; color: var(--muted); }
.trajectory-visual { padding: 25px 0 30px; }
.start-marker, .end-marker { display: flex; justify-content: space-between; align-items: baseline; }
.start-marker span, .end-marker span { color: var(--muted); font-size: 10px; }
.start-marker strong, .end-marker strong { font-size: 13px; }
.track { height: 9px; border-radius: 999px; background: var(--progress-track); margin: 13px 0; position: relative; box-shadow: inset 0 1px 2px rgba(24, 58, 45, .13); }
.track i { display: block; width: 60.54%; height: 100%; border: 1px solid var(--progress-green-dark); border-radius: inherit; background: repeating-linear-gradient(135deg, rgba(255,255,255,.14) 0 8px, rgba(255,255,255,.035) 8px 16px), linear-gradient(180deg, #20bc7e 0%, var(--progress-green) 58%, #119462 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.34), 0 0 6px rgba(22,166,111,.16); }
.track b { position: absolute; width: 15px; height: 15px; border-radius: 50%; background: #fbfdfc; border: 4px solid var(--progress-green-dark); left: calc(60.54% - 7px); top: -3px; box-shadow: 0 1px 5px rgba(24, 82, 61, .24); }
.saved { display: flex; justify-content: space-between; align-items: center; padding: 18px; border-radius: 15px; background: #f2f8f5; color: var(--green); }
.saved span { font-size: 11px; }
.saved strong { font-size: 17px; }
dialog { width: min(440px, calc(100vw - 32px)); border: 0; padding: 0; border-radius: 24px; box-shadow: 0 30px 100px rgba(0,0,0,.3); }
dialog::backdrop { background: rgba(13,15,19,.58); backdrop-filter: blur(5px); }
dialog form { padding: 32px; position: relative; }
.dialog-close { position: absolute; right: 18px; top: 15px; border: 0; background: transparent; font-size: 25px; color: var(--muted); }
.dialog-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 15px; color: var(--green); background: var(--green-soft); font-weight: 900; }
dialog h2 { font-size: 25px; margin: 20px 0 8px; letter-spacing: -.035em; }
dialog p { margin: 0 0 23px; color: var(--muted); font-size: 12px; line-height: 1.5; }
dialog p strong { color: var(--ink); }
dialog label { display: block; font-size: 10px; color: var(--muted); margin-top: 13px; }
dialog label[hidden] { display: none !important; }
dialog input,dialog select,dialog textarea { width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin-top: 6px; color: var(--ink); background: #fafafa; font: inherit; }
.password-field { position: relative; display: block; }
.password-field input { padding-right: 44px; }
.password-toggle { position: absolute; right: 7px; top: 12px; width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 9px; color: #777a80; background: transparent; cursor: pointer; }
.password-toggle:hover { color: var(--ink); background: #eceef1; }
dialog textarea { resize: vertical; min-height: 76px; line-height: 1.45; }
.transaction-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.optional-label { float: right; color: #a1a3a8; font-size: 8px; }
.dialog-icon.transaction-icon { color: #247aa7; background: #edf6fa; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 25px; }
.dialog-actions button { border: 0; border-radius: 11px; padding: 11px 15px; background: #eceef1; font-weight: 700; font-size: 12px; }
.dialog-actions button:last-child { color: white; background: var(--ink); }

@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  main { grid-column: 1; }
  .mobile-brand { display: flex; align-items: center; gap: 8px; margin-right: auto; font-size: 13px; }
  .mobile-brand .brand-mark { width: 31px; height: 31px; border-radius: 9px; }
  .topbar { padding: 0 20px; }
  .pulse { width: 300px; }
  .pulse:hover { width: 310px; }
  .pulse-summary { gap: 10px; }
  .weather { display: none; }
  .profile-copy { display: none; }
  .content { padding: 45px 22px 70px; }
  .lower-grid { grid-template-columns: 1fr; }
}

@media (max-width: 650px) {
  .topbar { height: 70px; }
  .mobile-brand strong { display: none; }
  .profile { padding: 5px; border: 0; background: transparent; }
  .profile > span:last-child { display: none; }
  .pulse { width: 230px; max-height: 52px; border-radius: 0 0 23px 23px; }
  .pulse:hover { width: 236px; }
  .pulse[aria-expanded="true"] { width: calc(100vw - 30px); max-height: 250px; }
  .pulse-summary { height: 52px; padding: 0 16px; }
  .pulse-divider, #pulse-date { display: none; }
  .content { padding-top: 34px; }
  .page-heading { display: block; }
  .primary-action { width: 100%; margin-top: 22px; }
  .decision-card { grid-template-columns: 1fr; }
  .decision-copy { padding: 27px 24px; }
  .payoff-amount { padding: 27px 24px; }
  .metrics { grid-template-columns: 1fr; }
  .metrics article { min-height: 118px; }
  .account { grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; }
  .account-logo { width: 28px; height: 28px; min-width: 28px; max-width: 28px; min-height: 28px; max-height: 28px; border-radius: 8px; }
  .account-logo.bank-logo img { width: 28px !important; height: 28px !important; min-width: 28px; max-width: 28px !important; min-height: 28px; max-height: 28px !important; }
  .account-label-edit { opacity: 1; }
  .account-value { grid-column: 2; text-align: left; }
  .account .paid-badge, .account .next-badge { grid-row: 1; grid-column: 3; }
}

/* LiNQable / Apple-aligned icon standard */
.button-icon, .imported-chip .reicon, .lock-vault .reicon, .card-deck-hint .reicon,
.record-remove .reicon, .account-label-edit .reicon, .password-toggle .reicon {
  width: var(--icon-action); height: var(--icon-action); flex: 0 0 var(--icon-action);
}
.activity-row > .row-icon .reicon, .record-row > .row-icon .reicon,
.privacy-note > .privacy-icon, .profile .reicon, .card-detail-actions .reicon {
  width: var(--icon-interface); height: var(--icon-interface); flex: 0 0 var(--icon-interface);
}
.nav-item > .nav-icon-slot, .nav-item > .nav-reicon, .sidebar-collapsed .nav-reicon,
.sidebar-toggle-icon {
  width: var(--icon-navigation); height: var(--icon-navigation); flex: 0 0 var(--icon-navigation);
}
.dialog-icon > .reicon, .setting-card > .reicon {
  width: var(--icon-prominent); height: var(--icon-prominent); flex: 0 0 var(--icon-prominent);
}
.record-remove, .account-label-edit, .password-toggle { min-width: 32px; min-height: 32px; }

@media (max-width: 900px) {
  .mobile-dock-item > .reicon, .mobile-dock-item > .nav-reicon {
    width: var(--icon-prominent); height: var(--icon-prominent); flex: 0 0 var(--icon-prominent);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .001ms !important; animation-duration: .001ms !important; animation-delay: 0ms !important; }
  [data-view]:not([hidden]) { opacity: 1 !important; transform: none !important; filter: none !important; }
  .chart-tooltip { translate: 0 0; filter: none; transition: none; }
}

/* LiNQable admin fidelity pass */
:root {
  --ink: #151518;
  --muted: #76767d;
  --line: #e7e7e9;
  --canvas: #ffffff;
  --sidebar: #111214;
  --blue: #116a94;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
}

body { background: #fff; font-variant-numeric: tabular-nums; }
.sidebar { width: 228px; padding: 25px 16px 20px; border-radius: 0 0 22px 0; box-shadow: 9px 0 26px rgba(12,13,15,.08); }
.shell { grid-template-columns: 228px 1fr; transition: grid-template-columns 440ms cubic-bezier(.22, 1, .36, 1); }
.sidebar { transition: width 440ms cubic-bezier(.22, 1, .36, 1), padding 440ms cubic-bezier(.22, 1, .36, 1); }
.brand { padding: 0 11px 29px; }
.brand-mark { width: 39px; height: 39px; border-radius: 10px; background: linear-gradient(145deg, #5a0f74, #18002b 58%, #21156f); }
.brand strong { font-size: 15px; letter-spacing: -.01em; }
.brand small { color: #7d7e84; font-size: 11px; }
.sidebar-toggle { position: absolute; top: 24px; right: 14px; width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid #303238; border-radius: 11px; background: #1b1c20; color: #9c9ea5; cursor: pointer; transition: color 180ms ease, background 180ms ease, transform 220ms ease; }
.sidebar-toggle:hover { color: #fff; background: #23252a; }
.sidebar-toggle:active { transform: scale(.96); }
.sidebar-toggle:focus-visible { outline: 2px solid #55caff; outline-offset: 2px; }
.sidebar-toggle-icon { width: 22px; height: 22px; object-fit: contain; filter: invert(1); opacity: .72; transition: transform 300ms cubic-bezier(.22, 1, .36, 1), opacity 180ms ease; }
.sidebar-toggle:hover .sidebar-toggle-icon { transform: scale(1.06); opacity: 1; }
.nav-item { min-height: 40px; padding: 0 12px; border-radius: 11px; font-size: 13px; font-weight: 450; white-space: nowrap; overflow: hidden; transition: color 180ms ease, background 220ms ease, box-shadow 220ms ease; }
.nav-item > .nav-icon-slot { flex: 0 0 20px; width: 20px; height: 20px; }
.nav-reicon { width: 20px; height: 20px; flex: 0 0 20px; background: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; transition: transform 220ms cubic-bezier(.22,1,.36,1); }
.icon-grid4 { --icon: url("assets/reicon/grid4.svg"); }
.icon-card2 { --icon: url("assets/reicon/card2.svg"); }
.icon-money-stack { --icon: url("assets/reicon/money-stack.svg"); }
.icon-grid2 { --icon: url("assets/reicon/grid2.svg"); }
.icon-target { --icon: url("assets/reicon/target.svg"); }
.icon-setting2 { --icon: url("assets/reicon/setting2.svg"); }
.nav-item:hover .nav-reicon { transform: translateY(-1px); }
.nav-item[href="#overview"] { --accent: #4fc3ff; --accent-rgb: 79, 195, 255; }
.nav-item[href="#accounts"] { --accent: #a88cff; --accent-rgb: 168, 140, 255; }
.nav-item[href="#cash-flow"] { --accent: #4fd7a2; --accent-rgb: 79, 215, 162; }
.nav-item[href="#budget"] { --accent: #f1bd62; --accent-rgb: 241, 189, 98; }
.nav-item[href="#plan"] { --accent: #ff7f91; --accent-rgb: 255, 127, 145; }
.nav-item[href="#goals"] { --accent: #7e9cff; --accent-rgb: 126, 156, 255; }
.nav-item[href="#activity"] { --accent: #ff9a5a; --accent-rgb: 255, 154, 90; }
.nav-item[href="#settings"] { --accent: #cf8cff; --accent-rgb: 207, 140, 255; }
.nav-item:hover,
.nav-item:focus-visible {
  color: var(--accent);
  background: linear-gradient(90deg, rgba(var(--accent-rgb), .035) 0%, rgba(var(--accent-rgb), .11) 100%);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .2), 0 0 18px rgba(var(--accent-rgb), .12);
  outline: none;
}
.nav-item:hover .nav-label,
.nav-item:focus-visible .nav-label { color: #f7f7f8; }
.nav-item:hover > .nav-icon-slot,
.nav-item:focus-visible > .nav-icon-slot { color: var(--accent); filter: drop-shadow(0 0 6px rgba(var(--accent-rgb), .55)); }
.nav-item:hover .nav-reicon,
.nav-item:focus-visible .nav-reicon { filter: drop-shadow(0 0 6px rgba(var(--accent-rgb), .55)); }
.nav-item.active { color: var(--accent); background: linear-gradient(90deg, rgba(var(--accent-rgb), .05) 0%, rgba(var(--accent-rgb), .15) 100%); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .24); }
.nav-item.active .nav-label { color: #f7f7f8; }
.nav-item.active::after { background: var(--accent); box-shadow: 0 0 13px var(--accent); }
.nav-item.active::after { top: 9px; bottom: 9px; }
.nav-icon { width: 18px; height: 18px; border-width: 1.4px; }
.nav-label, .brand-copy, .privacy-copy { transition: opacity 170ms ease, transform 300ms cubic-bezier(.22, 1, .36, 1); }
.privacy-note > .privacy-icon { flex: 0 0 18px; width: 18px; height: 18px; color: #858993; }
.sidebar-collapsed { grid-template-columns: 72px 1fr; }
.sidebar-collapsed .sidebar { width: 72px; padding-left: 11px; padding-right: 11px; }
.sidebar-collapsed .brand { display: none; }
.sidebar-collapsed .brand-copy,
.sidebar-collapsed .nav-label,
.sidebar-collapsed .privacy-copy { opacity: 0; transform: translateX(-7px); pointer-events: none; }
.sidebar-collapsed .sidebar-toggle { top: 24px; left: 17px; right: auto; width: 38px; }
.sidebar-collapsed nav { margin-top: 47px; }
.sidebar-collapsed .nav-item { width: 50px; padding: 0 15px; gap: 0; }
.sidebar-collapsed .nav-reicon { width: 20px; height: 20px; flex-basis: 20px; }
.sidebar-collapsed .nav-item.active::after { right: 0; }
.sidebar-collapsed .privacy-note { padding-left: 16px; }
.sidebar-collapsed .brand-mark { flex: 0 0 39px; }
.topbar {
  height: 56px;
  padding: 0 25px;
  background: linear-gradient(180deg, rgba(255,255,255,.58), rgba(247,248,250,.38));
  border-bottom: 1px solid rgba(170,174,181,.22);
  -webkit-backdrop-filter: saturate(170%) blur(26px);
  backdrop-filter: saturate(170%) blur(26px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.66), 0 8px 24px rgba(36,40,48,.025);
}
.profile { min-height: 44px; height: auto; gap: 9px; border-color: rgba(183,186,192,.48); border-radius: 999px; padding: 4px 12px 4px 4px; background: rgba(255,255,255,.68); box-shadow: inset 0 1px 0 rgba(255,255,255,.78); }
.avatar { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%; }
.avatar img { width: 100%; height: 100%; display: block; border-radius: inherit; object-fit: cover; }
.profile-copy strong, .profile-copy small { margin: 0; }
.profile-copy strong { font-size: 11px; line-height: 1.15; }
.profile-copy small { margin-top: 2px; font-size: 8px; line-height: 1.15; }
.profile-chevron { width: 17px; height: 17px; margin-left: 2px; color: #24262a; stroke-width: 1.8; }
.payment-dialog-context { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; margin: 14px 0 4px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 11px; background: #f7f7f8; }
.payment-dialog-context span { justify-self: start; padding: 4px 7px; border-radius: 999px; color: #6f5720; background: #faf3df; font-size: 9px; font-weight: 700; }
.payment-dialog-context span.is-due-soon { color: #9a5b17; background: #fff0dc; }
.payment-dialog-context span.is-overdue { color: #a24b38; background: #faebe7; }
.payment-dialog-context strong { font-size: 10px; }
.payment-dialog-context small { color: var(--muted); font-size: 9px; }
.payment-dialog-icon .reicon { width: 25px; height: 25px; }
dialog button, dialog input, dialog select, dialog textarea, dialog label { touch-action: manipulation; }
.profile-avatar-editor { display: flex; align-items: center; gap: 14px; margin: 20px 0 8px; }
.profile-avatar-preview { width: 58px; height: 58px; flex: 0 0 58px; display: grid; place-items: center; overflow: hidden; border-radius: 18px; color: #fff; background: #17181b; font-size: 15px; font-weight: 700; }
.profile-avatar-preview img { width: 100%; height: 100%; object-fit: cover; }
.profile-avatar-editor > div { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.profile-avatar-editor small { width: 100%; color: var(--muted); font-size: 8px; }
.avatar-upload,.profile-avatar-editor button { margin: 0; border: 1px solid var(--line); border-radius: 999px; padding: 7px 10px; color: var(--ink); background: #fff; font-size: 9px; font-weight: 650; cursor: pointer; }
.avatar-upload input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.profile-avatar-editor button { color: #77787e; }
.card-detail-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.weather-attribution { display: block; margin-top: 7px; color: var(--muted); font-size: 8px; }
.weather-attribution a { color: inherit; }

.pulse {
  --notch-width: 214px;
  --notch-height: 30px;
  left: calc(50% - 114px);
  width: var(--notch-width);
  height: var(--notch-height);
  min-height: var(--notch-height);
  max-height: none;
  overflow: visible;
  border: 1px solid rgba(255,255,255,.075);
  border-top: 0;
  background:
    radial-gradient(ellipse 70% 150% at 78% -70%, rgba(50,122,168,.13), transparent 67%),
    linear-gradient(180deg, rgba(255,255,255,.035), transparent 64%),
    rgba(2,3,5,.98);
  border-radius: 0 0 18px 18px;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.045), 0 10px 24px -18px rgba(0,0,0,.9);
  transform-origin: 50% 0;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  transition:
    width 520ms cubic-bezier(.22, 1, .36, 1),
    height 520ms cubic-bezier(.22, 1, .36, 1),
    border-radius 420ms cubic-bezier(.22, 1, .36, 1),
    filter 420ms ease;
}
.sidebar-collapsed .pulse { left: calc(50% - 36px); }
.pulse::before,
.pulse::after {
  content: "";
  position: absolute;
  top: 0;
  width: 17px;
  height: 17px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 180ms ease;
}
.pulse::before { left: -17px; background: radial-gradient(circle at 0 100%, transparent 16px, #020305 16.7px); }
.pulse::after { right: -17px; background: radial-gradient(circle at 100% 100%, transparent 16px, #020305 16.7px); }
.pulse:hover { width: var(--notch-width); }
.pulse[aria-expanded="true"] {
  width: min(596px, calc(100vw - 310px));
  height: 148px;
  max-height: none;
  border-radius: 0 0 25px 25px;
  filter: drop-shadow(0 20px 18px rgba(0,0,0,.16));
}
.pulse[aria-expanded="true"]::before,
.pulse[aria-expanded="true"]::after { opacity: 1; }
.pulse-summary { height: 30px; padding: 0 22px; justify-content: space-between; gap: 0; }
.pulse-label { font-size: 10px; letter-spacing: -.005em; }
.pulse-update-indicator { display: none; width: 6px; height: 6px; flex: 0 0 6px; margin: 0 auto 0 7px; border-radius: 50%; background: #67cfff; }
.pulse.has-app-update .pulse-update-indicator { display: block; }
.pulse.has-app-update .pulse-summary { justify-content: flex-start; }
.pulse.has-app-update .pulse-summary .weather { margin-left: auto; }
.weather { display: inline-flex; gap: 7px; color: #fff; font-size: 11px; }
.weather-symbol {
  position: relative;
  display: inline-block;
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  border-radius: 50%;
  background: radial-gradient(circle at 42% 38%, #fff6cd 0 8%, #ffd66d 25%, #ffb834 54%, #ef8e12 72%, transparent 74%);
  box-shadow: 0 0 5px rgba(255,190,67,.92), 0 0 11px rgba(255,151,25,.55);
  filter: saturate(.92);
}
.weather-symbol::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: repeating-conic-gradient(from 5deg, rgba(255,197,83,.74) 0deg 7deg, transparent 7deg 39deg);
  -webkit-mask: radial-gradient(circle, transparent 0 55%, #000 58% 100%);
  mask: radial-gradient(circle, transparent 0 55%, #000 58% 100%);
  opacity: .72;
}
.weather-symbol::after {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,174,40,.24), transparent 66%);
}
.weather b { font-weight: 650; }
.pulse-divider, .alert-dot { display: none; }
.pulse-panel {
  position: absolute;
  inset: 42px 25px 16px;
  display: grid;
  grid-template-columns: 34px 1fr auto;
  grid-template-rows: auto auto;
  gap: 0 14px;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  transform: translateY(-9px) scale(.985);
  transition:
    opacity 120ms ease,
    transform 340ms cubic-bezier(.22, 1, .36, 1),
    visibility 0s linear 160ms;
  pointer-events: none;
}
.pulse[aria-expanded="true"] .pulse-summary { opacity: 0; transform: translateY(-6px); }
.pulse-summary { transition: opacity 130ms ease, transform 250ms ease; }
.pulse[aria-expanded="true"] .pulse-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  transition:
    opacity 180ms ease 190ms,
    transform 410ms cubic-bezier(.22, 1, .36, 1) 110ms,
    visibility 0s linear 110ms;
}
.pulse-panel-icon { grid-column: 1; grid-row: 1; width: 29px; height: 29px; border: 2px solid #67cfff; color: #67cfff; border-radius: 8px; display: grid; place-items: center; font-size: 12px; }
.pulse-panel-icon .reicon { width: 16px; height: 16px; }
.pulse-update-icon { display: none; }
.pulse-message { grid-column: 2; grid-row: 1; min-width: 0; display: flex; flex-direction: column; text-align: left; }
.pulse-kicker { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0 0 5px; color: #85858c; font-size: 8px; font-weight: 650; letter-spacing: .16em; text-transform: uppercase; }
.pulse-message strong { font-size: 14px; letter-spacing: -.015em; }
.pulse-copy { color: #8b8b91; font-size: 10px; margin-top: 4px; }
.pulse-weather { grid-column: 3; grid-row: 1; display: grid; grid-template-columns: auto auto; align-items: center; gap: 0 8px; text-align: left; }
.pulse-weather > .weather-symbol { grid-row: 1 / 3; width: 25px; height: 25px; box-shadow: 0 0 7px rgba(255,190,67,.9), 0 0 16px rgba(255,151,25,.5); }
.pulse-weather strong { font-size: 17px; }
.pulse-weather small { color: #8a8a90; font-size: 8px; }
.pulse-detail { grid-column: 2 / 4; grid-row: 2; margin-top: 12px; padding: 9px 12px; border: 1px solid #303034; background: #151517; border-radius: 10px; color: #939399; font-size: 10px; text-align: left; }
.pulse-update-action {
  grid-column: 3;
  grid-row: 2;
  align-self: center;
  justify-self: end;
  min-height: 30px;
  margin: 12px 10px 0 0;
  padding: 0 12px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  color: #16171a;
  background: #fff;
  font: inherit;
  font-size: 10px;
  font-weight: 650;
  cursor: pointer;
  transition: transform 180ms cubic-bezier(.22,1,.36,1), background-color 180ms ease;
}
.pulse-update-action:hover { background: #f0f1f3; }
.pulse-update-action:active { transform: scale(.97); }
.pulse-update-action[hidden] { display: none; }
.pulse.has-app-update .pulse-day-icon { display: none; }
.pulse.has-app-update .pulse-update-icon { display: block; }
.pulse.has-app-update[aria-expanded="true"] { height: 158px; }
.pulse.has-app-update .pulse-panel { grid-template-columns: 34px minmax(150px,1fr) auto auto; }
.pulse.has-app-update .pulse-weather { grid-column: 4; }
.pulse.has-app-update .pulse-detail { display: none; }
.pulse.has-app-update .pulse-update-action {
  position: relative;
  z-index: 1;
  grid-column: 3;
  grid-row: 1;
  align-self: center;
  margin: 0 10px 0 4px;
}

.content { max-width: none; margin: 0; padding: 26px 28px 70px; }
[data-view][hidden] { display: none !important; }
[data-view]:not([hidden]) { animation: view-enter 280ms cubic-bezier(.22, 1, .36, 1) both; }
body[data-active-view="overview"] [data-view="overview"]:not([hidden]) { animation-name: overview-rise; animation-duration: 300ms; animation-timing-function: cubic-bezier(.22, 1, .36, 1); animation-fill-mode: both; }
body[data-active-view="overview"] .page-heading[data-view="overview"] { animation-delay: 0ms; }
body[data-active-view="overview"] .decision-card[data-view="overview"] { animation-delay: 38ms; }
body[data-active-view="overview"] .metrics[data-view="overview"] { animation-delay: 72ms; }
body[data-active-view="overview"] .overview-visuals[data-view="overview"] { animation-delay: 102ms; }
.records-section[data-view] { padding-top: 0; scroll-margin-top: 0; }
.activity[data-view] { margin-top: 0; }
.accounts[data-view], .trajectory[data-view], .activity[data-view] { min-height: 220px; }
@keyframes view-enter { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@keyframes overview-rise { from { opacity: 0; transform: translateY(14px); filter: blur(3px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }
.page-heading { align-items: center; margin-bottom: 25px; }
.dayline { margin: 0 0 5px; font-size: 10px; }
.overview-meta { margin-bottom: 6px; gap: 8px; font-size: 10px; }
h1 { font-size: 27px; line-height: 1.1; letter-spacing: -.035em; font-weight: 650; }
#overview-greeting { font-size: 30px; }
#overview-greeting-period { color: #85878c; font-weight: 500; }
#overview-greeting-name { color: var(--ink); }
.page-heading p:last-child { margin-top: 7px; font-size: 12px; }
.primary-action, .dark-action { min-height: 32px; border-radius: 999px; padding: 7px 14px; font-size: 11px; font-weight: 600; }
.decision-card { grid-template-columns: 1fr 270px; min-height: 184px; margin-bottom: 14px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.decision-copy { padding: 23px 25px; }
.status-chip { padding: 5px 9px; font-size: 9px; color: #9a5a00; background: #fff4df; }
.status-chip i { width: 6px; height: 6px; background: #e98600; }
.decision-card h2 { margin: 18px 0 5px; font-size: 21px; letter-spacing: -.025em; }
.decision-card p { max-width: 470px; color: #73747a; font-size: 11px; line-height: 1.5; }
.decision-actions { margin-top: 18px; }
.text-action { font-size: 10px; color: #166a94; }
.payoff-amount { padding: 24px; background: #f7f7f8; color: var(--ink); border-left: 1px solid var(--line); }
.payoff-amount span, .payoff-amount small { color: #77787e; font-size: 9px; }
.payoff-amount > strong { margin: 6px 0 22px; font-size: 31px; }
.payoff-amount b { margin-top: 3px; font-size: 14px; }
.metrics { gap: 14px; margin-bottom: 14px; }
.metrics article, .panel { border-radius: 14px; box-shadow: none; }
.metrics article { min-height: 108px; padding: 18px; }
.metrics span { font-size: 9px; }
.metrics strong { margin: 9px 0 5px; font-size: 21px; }
.lower-grid { gap: 14px; }
.panel { padding: 20px; }
.panel-heading h2 { font-size: 14px; }
.account { padding: 12px 0; }

@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .pulse { --notch-width: 174px; --notch-height: 29px; left: 50%; }
  .pulse[aria-expanded="true"] { width: min(520px, calc(100vw - 34px)); height: 148px; }
  .pulse-summary { height: 29px; padding: 0 18px; }
  .content { padding-top: 26px; }
}

@media (max-width: 650px) {
  .topbar { height: 54px; }
  .pulse { --notch-width: 158px; --notch-height: 28px; border-radius: 0 0 15px 15px; }
  .pulse:hover { width: var(--notch-width); }
  .pulse[aria-expanded="true"] { width: calc(100vw - 24px); height: 156px; border-radius: 0 0 22px 22px; }
  .pulse-summary { height: 28px; padding: 0 15px; }
  .pulse-label { font-size: 9px; }
  .pulse-panel { inset: 40px 20px 15px; grid-template-columns: 30px 1fr auto; gap: 0 10px; }
  #pulse-date { display: block; }
  .pulse-panel-icon { width: 27px; height: 27px; }
  .pulse-message strong { font-size: 12px; }
  .pulse-weather > .weather-symbol { width: 21px; height: 21px; }
  .pulse-weather strong { font-size: 14px; }
  .pulse-detail { grid-column: 1 / 4; margin-top: 12px; }
  .pulse.has-app-update[aria-expanded="true"] { height: 164px; }
  .pulse.has-app-update .pulse-panel { grid-template-columns: 30px minmax(105px,1fr) auto auto; gap: 0 8px; }
  .pulse.has-app-update .pulse-update-action { margin-right: 2px; padding-inline: 10px; }
  .content { padding: 22px 16px 60px; }
  .page-heading { margin-bottom: 20px; }
  .overview-meta { flex-wrap: wrap; row-gap: 4px; }
  .primary-action { width: auto; margin-top: 17px; }
  .decision-card { grid-template-columns: 1fr; }
  .decision-copy { padding: 21px; }
  .payoff-amount { padding: 21px; border-left: 0; border-top: 1px solid var(--line); }
}

@media (max-width: 900px) {
  .balance-overview { grid-template-columns: 1fr; }
  .card-wallet { grid-template-columns: 1fr; }
  .balance-primary { min-height: 140px; border-right: 0; border-bottom: 1px solid var(--line); }
  .overview-visuals { grid-template-columns: 1fr; }
}

@media (max-width: 650px) {
  .accounts-header { align-items: flex-start; }
  .accounts-header h1 { font-size: 29px; }
  .accounts-header > div > p:last-child { max-width: 38ch; }
  .balance-breakdown { grid-template-columns: 1fr; }
  .balance-breakdown article { padding: 18px 22px; }
  .balance-breakdown article + article { border-left: 0; border-top: 1px solid var(--line); }
  .card-wallet { gap: 12px; padding: 16px; }
  .card-deck { height: 244px; }
  .deck-card { width: min(340px, 88%); }
  .card-focus-panel { min-height: 0; grid-template-columns: 1fr; padding: 19px; }
  .card-focus-panel dl { min-width: 0; }
  .loan-index { display: none; }
  .visual-heading { display: block; }
  .chart-key { margin-top: 9px; }
  .line-chart { height: 126px; }
  .ring-content { grid-template-columns: 108px 1fr; }
  .payoff-ring { width: 108px; height: 108px; }
}

/* LiNQable mobile dock fidelity and viewport containment */
.mobile-dock { display: none; }

@media (max-width: 900px) {
  html, body { width: 100%; max-width: 100%; overflow-x: clip; }
  .shell, main, .content, [data-view] { min-width: 0; max-width: 100%; }
  .content { padding-bottom: calc(104px + env(safe-area-inset-bottom)); }
  .mobile-dock {
    position: fixed; left: max(12px,env(safe-area-inset-left,0px),calc((100vw - 520px)/2)); bottom: calc(5px + env(safe-area-inset-bottom,0px)); z-index: 40;
    display: block;
    width: min(520px,calc(100vw - 24px)); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    scroll-padding-inline: max(6px,env(safe-area-inset-left,0px)); border: 1px solid #ffffff30; border-radius: 999px;
    background: #101114; color: #d4d7dc; box-shadow: inset 0 1px 0 #ffffff14,0 8px 28px #0004;
    -webkit-overflow-scrolling: touch;
    transform: translateZ(0) scale(1);
    transform-origin: 50% 100%;
    transition: none;
    will-change: transform;
  }
  .mobile-dock.is-compact { transform: translateZ(0) scale(.86); }
  .mobile-dock::-webkit-scrollbar { display: none; }
  .mobile-dock-rail { position: relative; display: flex; gap: 4px; width: max-content; padding: 6px; }
  .mobile-dock-item {
    --accent: #f7f7f8; --accent-rgb: 247,247,248;
    position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; min-width: 49px; min-height: 44px;
    padding: 0 12px; border: 0; border-radius: 999px; white-space: nowrap; color: #d4d7dc; background: transparent;
    text-decoration: none; -webkit-tap-highlight-color: transparent; transition: color 180ms ease,transform 180ms ease;
  }
  .mobile-dock-item[href="#overview"] { --accent: #4fc3ff; --accent-rgb: 79,195,255; }
  .mobile-dock-item[href="#accounts"] { --accent: #a88cff; --accent-rgb: 168,140,255; }
  .mobile-dock-item[href="#cash-flow"] { --accent: #4fd7a2; --accent-rgb: 79,215,162; }
  .mobile-dock-item[href="#budget"] { --accent: #f0b95a; --accent-rgb: 240,185,90; }
  .mobile-dock-item[href="#plan"] { --accent: #df7fa8; --accent-rgb: 223,127,168; }
  .mobile-dock-item[href="#goals"] { --accent: #77c78f; --accent-rgb: 119,199,143; }
  .mobile-dock-item[href="#activity"] { --accent: #ff9a5a; --accent-rgb: 255,154,90; }
  .mobile-dock-item[href="#settings"] { --accent: #d7d7dc; --accent-rgb: 215,215,220; }
  .mobile-dock-item.active {
    color: var(--accent); background: transparent; box-shadow: none; transform: none;
  }
  .mobile-dock-item:active { transform: scale(.92); }
  .mobile-dock-item:focus-visible { outline: 3px solid #55c4ff; outline-offset: -3px; }
  .mobile-dock-glass {
    --dock-accent-rgb: 79,195,255; position: absolute; top: 0; left: 0; width: 100px; border-radius: 999px;
    transform-origin: left center; pointer-events: none; opacity: 0;
    background: #343b45; border: 1px solid #ffffff30; box-shadow: inset 0 1px 0 #ffffff20;
  }

  @supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
    .mobile-dock { background: linear-gradient(145deg,#ffffff04,transparent 65%),#101114f0; backdrop-filter: blur(18px) saturate(120%); -webkit-backdrop-filter: blur(18px) saturate(120%); }
    .mobile-dock-glass { background: linear-gradient(135deg,#ffffff18,rgba(var(--dock-accent-rgb),.13)),#ffffff0b; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
  }
}

@media (max-width: 650px) {
  main { width: 100%; overflow-x: clip; }
  .content { width: 100%; overflow-x: clip; }
  .mobile-dock { width: min(520px,calc(100vw - 24px)); max-width: none; }
  .topbar { width: 100%; max-width: 100vw; }
  .pulse { left: 50%; max-width: calc(100vw - 24px); }
  .pulse[aria-expanded="true"] { width: min(calc(100vw - 24px),430px); max-width: calc(100vw - 24px); overflow: hidden; }
  .pulse[aria-expanded="true"]::before, .pulse[aria-expanded="true"]::after { display: none; }
  .pulse-panel { max-width: 100%; }
  .pulse-copy, .pulse-detail { overflow-wrap: anywhere; }
  .page-heading, .decision-card, .metrics, .overview-visuals, .lower-grid, .panel { min-width: 0; max-width: 100%; }
  .decision-actions { flex-wrap: wrap; }
}

/* LiNQable typography standard — only approved semantic sizes below */
html, body { font-family: var(--font-interface); font-size: var(--type-body); line-height: var(--leading-body); letter-spacing: -.374px; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--font-heading); }
h1, .accounts-header h1 { font-size: var(--type-page); line-height: var(--leading-heading); letter-spacing: -.02em; font-weight: var(--weight-regular); }
#overview-greeting { font-size: clamp(2.125rem,4.25vw,3rem); line-height: 1.2; letter-spacing: -.02em; font-weight: var(--weight-regular); }
.records-heading h2, dialog h2 { font-size: var(--type-h3); line-height: var(--leading-h3); letter-spacing: -.01em; font-weight: 500; }
.decision-card h2 { font-size: var(--type-h3); line-height: var(--leading-h3); }
.panel-heading h2, .setting-card h3, .card-focus-panel h2, .pulse-panel strong { font-size: var(--type-body); line-height: var(--leading-body); }
.page-heading p:last-child, .decision-card p, dialog input, dialog select, dialog textarea,
.transaction-toolbar select, .transaction-toolbar input, .record-row strong, .account-row strong,
.activity-row strong, .history-table { font-size: var(--type-body); line-height: var(--leading-body); }
.nav-item, .brand strong, .profile-copy strong, .primary-action, .dark-action, .text-action,
.setting-card button, .file-button, .add-record, .account-title strong, .account-value,
.activity-row small, .ring-details dd, .history-account-row strong, .dialog-actions button {
  font-size: var(--type-small); line-height: 1.47;
}
.overview-meta, .dayline, .panel-heading p, .setting-card p, .record-row small,
.metrics span, .metrics small, .payoff-amount span, .payoff-amount small, .visual-heading span,
.chart-tooltip, .chart-tooltip > small, .ring-details dt, .profile-copy small, dialog p,
dialog label, .backup-status, .restore-file-summary, .history-account-row small,
.history-account-minimum, .weather-attribution { font-size: var(--type-caption); line-height: 1.5; }
.status-chip, .paid-badge, .next-badge, .history-table th, .pulse-kicker,
.mobile-dock-item, .pulse-label { font-size: var(--type-label); line-height: 1.5; letter-spacing: .06em; }
.metrics strong, .history-stat > strong, .balance-primary strong, .balance-breakdown strong,
.payoff-amount > strong { font-size: var(--type-h2); line-height: var(--leading-h2); }
.payoff-amount b, .visual-heading strong, .saved strong, .ring-details dd { font-size: var(--type-body); }

@media (max-width: 650px) {
  .health-setting-card { grid-column: auto; }
  .health-list { grid-template-columns: 1fr; }
  h1, .accounts-header h1 { font-size: var(--type-page); line-height: var(--leading-heading); }
  #overview-greeting { font-size: clamp(2.125rem,9.5vw,3rem); line-height: 1.2; }
  .records-heading h2, dialog h2, .decision-card h2 { font-size: var(--type-h3); }
  .metrics strong, .history-stat > strong, .balance-primary strong, .balance-breakdown strong,
  .payoff-amount > strong { font-size: var(--type-page); line-height: var(--leading-heading); }
}

#overview-greeting-name { text-transform: none; }

/* Final icon-token enforcement: later component rules may not override the standard. */
.button-icon, .imported-chip .reicon, .lock-vault .reicon, .card-deck-hint .reicon,
.record-remove .reicon, .account-label-edit .reicon, .password-toggle .reicon {
  width: var(--icon-action); height: var(--icon-action); flex: 0 0 var(--icon-action);
}
.activity-row > .row-icon .reicon, .record-row > .row-icon .reicon,
.privacy-note > .privacy-icon, .profile .reicon, .card-detail-actions .reicon {
  width: var(--icon-interface); height: var(--icon-interface); flex: 0 0 var(--icon-interface);
}
.nav-item > .nav-icon-slot, .nav-item > .nav-reicon, .sidebar-collapsed .nav-reicon,
.sidebar-toggle-icon {
  width: var(--icon-navigation); height: var(--icon-navigation); flex: 0 0 var(--icon-navigation);
}
.dialog-icon > .reicon, .setting-card > .reicon {
  width: var(--icon-prominent); height: var(--icon-prominent); flex: 0 0 var(--icon-prominent);
}

@media (max-width: 900px) {
  .mobile-dock-item > .reicon, .mobile-dock-item > .nav-reicon {
    width: 25px; height: 25px; flex: 0 0 25px;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .mobile-dock { background: #17191d; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .mobile-dock-glass { background: #343b45; backdrop-filter: none; -webkit-backdrop-filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-dock { transition: none; }
}

@media (forced-colors: active) {
  .mobile-dock { background: Canvas; color: CanvasText; border-color: CanvasText; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .mobile-dock-glass { background: Highlight; border-color: Highlight; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .mobile-dock-item,.mobile-dock-item.active { color: CanvasText; }
}

/* LiNQable compact chip standard: 28px / 13px / medium weight. */
.status-chip,
.paid-badge,
.next-badge,
.imported-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: var(--type-caption);
  font-weight: var(--weight-regular);
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
}

.status-chip i { width: 6px; height: 6px; flex: 0 0 6px; }

.chip-button {
  min-height: 28px;
  padding-inline: 10px;
  font-size: var(--type-caption);
  font-weight: var(--weight-regular);
  line-height: 1;
}

/* Recurring cash-flow schedule */
.cash-flow-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.schedule-panel { padding: 0; overflow: hidden; }
.schedule-heading { padding: 22px 24px 18px; margin: 0; }
.schedule-forecast { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border-block: 1px solid var(--line); background: #fafbfc; }
.schedule-forecast > div { min-width: 0; padding: 18px 24px; }
.schedule-forecast > div + div { border-left: 1px solid var(--line); }
.schedule-forecast span { display: block; color: var(--muted); font-size: var(--type-caption); }
.schedule-forecast strong { display: block; margin-top: 5px; font-size: var(--type-section); letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.schedule-projected { background: #16181b; color: #fff; }
.schedule-projected span { color: #9b9ea4; }
.schedule-list { padding: 0 24px; }
.schedule-row { display: grid; grid-template-columns: 38px minmax(150px,1fr) minmax(112px,.55fr) auto auto; align-items: center; gap: 14px; min-height: 82px; border-bottom: 1px solid var(--line); }
.schedule-row:last-child { border-bottom: 0; }
.schedule-row > .row-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; color: #246f58; background: #eaf6f1; }
.schedule-payment > .row-icon { color: #866b28; background: #faf3df; }
.schedule-income > .row-icon { color: #207855; background: #e6f5ed; }
.schedule-row.is-overdue > .row-icon { color: #a24b38; background: #faebe7; }
.schedule-copy strong,.schedule-copy small,.schedule-due strong,.schedule-due small { display: block; }
.schedule-copy strong,.schedule-due strong { font-size: var(--type-small); }
.schedule-copy small,.schedule-due small { margin-top: 2px; color: var(--muted); font-size: var(--type-caption); }
.schedule-row.is-overdue .schedule-due small { color: #a24b38; }
.schedule-amount { font-size: var(--type-small); text-align: right; white-space: nowrap; }
.schedule-actions { display: flex; align-items: center; justify-content: flex-end; gap: 5px; }
.schedule-paid { white-space: nowrap; }
.schedule-empty { margin: 0; padding: 28px 0; }
.schedule-dialog-icon { color: #246f58; background: #eaf6f1; }

.overview-card-payments { padding: 22px 24px 0; }
.overview-card-payment-list { display: grid; }
.overview-card-payment-row { display: grid; grid-template-columns: 34px minmax(160px,1fr) minmax(105px,.45fr) minmax(100px,.4fr) auto; align-items: center; gap: 14px; min-height: 72px; border-top: 1px solid var(--line); border-radius: 10px; cursor: pointer; transition: background-color 160ms ease, transform 160ms cubic-bezier(.22,1,.36,1); }
.overview-card-payment-row:hover { background: #fafafa; }
.overview-card-payment-row:focus-visible { outline: 2px solid #58bceb; outline-offset: 2px; }
.overview-card-payment-row:active { transform: scale(.995); }
.overview-card-payment-logo { width: 32px; height: 32px; min-width: 32px; max-width: 32px; min-height: 32px; max-height: 32px; border-radius: 10px; }
.overview-card-payment-logo.bank-logo img { width: 32px !important; height: 32px !important; min-width: 32px; max-width: 32px !important; min-height: 32px; max-height: 32px !important; }
.overview-card-payment-copy strong,.overview-card-payment-copy small,.overview-card-payment-due strong,.overview-card-payment-due small,.overview-card-payment-minimum strong,.overview-card-payment-minimum small { display: block; }
.overview-card-payment-copy strong,.overview-card-payment-due strong,.overview-card-payment-minimum strong { font-size: var(--type-small); }
.overview-card-payment-copy small,.overview-card-payment-due small,.overview-card-payment-minimum small { margin-top: 3px; color: var(--muted); font-size: var(--type-caption); }
.overview-card-payment-status { justify-self: end; padding: 6px 9px; border-radius: 999px; color: #6f5720; background: #faf3df; font-size: var(--type-caption); }
.overview-card-payment-row.is-due-soon .overview-card-payment-status { color: #9a5b17; background: #fff0dc; }
.overview-card-payment-row.is-overdue .overview-card-payment-status { color: #a24b38; background: #faebe7; }
.overview-card-payment-row.is-overdue .overview-card-payment-due small { color: #a24b38; }

@media (max-width: 760px) {
  .cash-flow-actions { justify-content: flex-start; margin-top: 18px; }
  .schedule-forecast { grid-template-columns: 1fr 1fr; }
  .schedule-forecast > div:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }
  .schedule-forecast > div:nth-child(4) { border-top: 1px solid #303238; }
  .schedule-row { grid-template-columns: 34px minmax(0,1fr) auto; gap: 10px; padding: 15px 0; }
  .schedule-due { grid-column: 2; }
  .schedule-amount { grid-row: 1; grid-column: 3; }
  .schedule-actions { grid-column: 2 / 4; justify-content: flex-start; }
  .overview-card-payments { padding: 18px 16px 0; }
  .overview-card-payment-row { grid-template-columns: 32px minmax(0,1fr) auto; gap: 10px; padding: 14px 0; }
  .overview-card-payment-due,.overview-card-payment-minimum { grid-column: 2; }
  .overview-card-payment-status { grid-row: 1; grid-column: 3; }
}

/* Northstar compact control standard — chip actions and restrained form fields. */
:root {
  --control-chip-height: 28px;
  --control-button-height: 36px;
  --control-input-height: 42px;
  --control-radius: 11px;
}

.primary-action,
.dark-action,
.chip-button,
.add-record,
.setting-card button,
.file-button,
.avatar-upload,
.profile-avatar-editor button,
.dialog-actions button,
.lock-vault {
  width: auto;
  min-height: var(--control-chip-height);
  height: var(--control-chip-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border-radius: 999px;
  font-size: var(--type-caption);
  font-weight: var(--weight-regular);
  line-height: 1;
  white-space: nowrap;
}

.lock-vault[hidden] {
  display: none !important;
}

.primary-action,
.dark-action { min-height: var(--control-button-height); height: var(--control-button-height); padding-inline: 15px; }
.dialog-actions { align-items: center; gap: 8px; margin-top: 22px; }
.dialog-actions button { min-height: var(--control-button-height); height: var(--control-button-height); padding-inline: 15px; }
.lock-vault { width: 100%; border-radius: var(--control-radius); }
.panel-heading button { min-height: var(--control-chip-height); padding: 0 8px; border-radius: 999px; font-size: var(--type-caption); line-height: 1; }

dialog { width: min(420px,calc(100vw - 28px)); border-radius: 21px; }
dialog form { padding: 28px; }
dialog h2 { margin-top: 17px; }
.dialog-close {
  top: 14px; right: 14px; width: 34px; height: 34px; display: grid; place-items: center;
  padding: 0; border-radius: 10px; font-size: 21px; line-height: 1;
}
.dialog-icon { width: 42px; height: 42px; border-radius: 13px; }
.dialog-icon.vault-icon { width: 46px; height: 46px; }
.vault-icon img { width: 30px; height: 30px; }
dialog input,
dialog select,
.transaction-toolbar input,
.transaction-toolbar select {
  min-height: var(--control-input-height);
  height: var(--control-input-height);
  padding: 8px 11px;
  border-radius: var(--control-radius);
  font-size: var(--type-secondary);
  line-height: 1.25;
}
dialog textarea {
  min-height: 68px;
  padding: 9px 11px;
  border-radius: var(--control-radius);
  font-size: var(--type-secondary);
  line-height: 1.4;
}
.password-field input { padding-right: 43px; }
.password-toggle { top: 11px; right: 6px; width: 32px; height: 32px; }

@media (max-width: 650px) {
  dialog { width: min(400px,calc(100vw - 24px)); border-radius: 19px; }
  dialog form { padding: 24px; }
  dialog h2 { font-size: var(--type-section-lg); line-height: 1.2; }
  dialog p { margin-bottom: 18px; }
  dialog input,
  dialog select,
  dialog textarea,
  .transaction-toolbar input,
  .transaction-toolbar select { font-size: 16px; }
  .dialog-actions { justify-content: flex-end; flex-wrap: wrap; }
  .primary-action { width: auto; }
}

/* Northstar after dark: quiet ink surfaces with cool financial accents. */
html[data-theme="dark"] {
  --ink: #f4f2ec;
  --muted: #a6abb4;
  --line: #2b3038;
  --soft-line: #272c33;
  --surface: #15181d;
  --elevated-surface: #1a1e24;
  --control-surface: #1c2026;
  --canvas: #0d0f13;
  --sidebar: #08090b;
  --blue: #70c9f2;
  --blue-soft: #17313e;
  --green: #62d3aa;
  --green-soft: #16362d;
  --progress-track: #26322e;
  --topbar-surface: rgba(13,15,19,.9);
  --lg-surface: rgba(20,24,30,.58);
  --lg-surface-strong: rgba(25,30,37,.72);
  --lg-control-surface: rgba(28,33,40,.66);
  --lg-rim: rgba(255,255,255,.14);
  --lg-edge: rgba(255,255,255,.11);
  --lg-sheen: rgba(255,255,255,.095);
  --lg-shadow: rgba(0,0,0,.34);
  --lg-opaque-surface: #171b21;
  --lg-opaque-control: #20252c;
}
html[data-theme="dark"] body { background: radial-gradient(circle at 72% -10%, rgba(48,91,113,.14), transparent 32%), var(--canvas); }
html[data-theme="dark"] .topbar {
  isolation: isolate;
  overflow: visible;
  border-bottom-color: rgba(255,255,255,.11);
  background:
    radial-gradient(ellipse 34% 140% at 78% -55%, rgba(150,221,255,.18), transparent 68%),
    radial-gradient(ellipse 24% 110% at 18% 145%, rgba(255,255,255,.08), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.018)),
    rgba(12,15,20,.54);
  -webkit-backdrop-filter: saturate(185%) blur(30px);
  backdrop-filter: saturate(185%) blur(30px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.17),
    inset 0 -1px 0 rgba(255,255,255,.025),
    0 14px 34px rgba(0,0,0,.2);
}
html[data-theme="dark"] .pulse { z-index: 2; }
html[data-theme="dark"] .metrics article,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .profile,
html[data-theme="dark"] .balance-composition,
html[data-theme="dark"] .overview-visuals > article,
html[data-theme="dark"] dialog { background: var(--surface); color: var(--ink); }
html[data-theme="dark"] .profile { border-color: rgba(255,255,255,.12); background: rgba(26,30,36,.72); box-shadow: inset 0 1px 0 rgba(255,255,255,.065); }
html[data-theme="dark"] .profile-chevron { color: var(--muted); }
html[data-theme="dark"] .setting-card p,
html[data-theme="dark"] .backup-status,
html[data-theme="dark"] .empty-record,
html[data-theme="dark"] .record-row small { color: var(--muted); }
html[data-theme="dark"] .decision-card { background: #17313b; }
html[data-theme="dark"] .decision-card p { color: #a4c1cc; }
html[data-theme="dark"] .status-chip { color: #b9e8fa; background: rgba(8,16,21,.36); }
html[data-theme="dark"] .payoff-amount { background: #07151c; }
html[data-theme="dark"] .primary-action,
html[data-theme="dark"] .dark-action { color: #0a1115; background: #e9f5f8; }
html[data-theme="dark"] .setting-card button,
html[data-theme="dark"] .file-button,
html[data-theme="dark"] .add-record,
html[data-theme="dark"] .account-label-edit,
html[data-theme="dark"] .dialog-close { color: var(--ink); border-color: var(--line); background: var(--control-surface); }
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .transaction-toolbar select,
html[data-theme="dark"] .transaction-toolbar input { color: var(--ink); border-color: var(--line); background: var(--control-surface); }
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: #777e88; }
html[data-theme="dark"] .activity-row,
html[data-theme="dark"] .record-row,
html[data-theme="dark"] .ring-details div,
html[data-theme="dark"] .health-list div { border-color: var(--soft-line); }
html[data-theme="dark"] .transaction-row > .row-icon,
html[data-theme="dark"] .record-row > .row-icon,
html[data-theme="dark"] .transaction-history-badge { color: #c3c7cd; background: #24282f; }
html[data-theme="dark"] .transaction-action:hover,
html[data-theme="dark"] .password-toggle:hover,
html[data-theme="dark"] .record-remove:hover { background: #252a31; }
html[data-theme="dark"] .chart-zero { stroke: #30363e; }
html[data-theme="dark"] .chart-bar { fill: rgba(112,201,242,.17); }
html[data-theme="dark"] .chart-line { stroke: #70c9f2; }
html[data-theme="dark"] .chart-point { fill: var(--surface); stroke: #70c9f2; }
html[data-theme="dark"] .chart-point.current { fill: #70c9f2; stroke: var(--surface); }
html[data-theme="dark"] .ring-track { stroke: #293038; }
html[data-theme="dark"] .ring-value { stroke: #70c9f2; }
html[data-theme="dark"] .theme-orbit { border-color: #46515d; box-shadow: 0 0 0 5px rgba(112,201,242,.08); }
html[data-theme="dark"] .theme-toggle-track { border-color: #4e6574; background: #172c38; }
html[data-theme="dark"] .theme-toggle-track i { background: #8bdcff; }
html[data-theme="dark"] .number-stepper { background: var(--control-surface); }
html[data-theme="dark"] .number-stepper:focus-within { box-shadow: 0 0 0 3px rgba(112,201,242,.15); }
html[data-theme="dark"] .number-stepper button:hover:not(:disabled) { background: rgba(112,201,242,.1); }
html[data-theme="dark"] .northstar-select-button { border-color: var(--line); background: var(--control-surface); }
html[data-theme="dark"] .northstar-select-button:hover:not(:disabled) { border-color: #4c555f; }
html[data-theme="dark"] .northstar-select-chevron { background: #282d34; }
html[data-theme="dark"] .northstar-select-list { border-color: #343a43; background: #1b1f25; box-shadow: 0 22px 46px -18px rgba(0,0,0,.8), 0 4px 14px rgba(0,0,0,.28); }
html[data-theme="dark"] .northstar-select-option:hover,
html[data-theme="dark"] .northstar-select-option.is-active { background: #252b32; }
html[data-theme="dark"] .northstar-select-option[aria-selected="true"] { color: #dff7ff; background: #17313e; }
html[data-theme="dark"] .northstar-calendar-button { border-color: var(--line); background: var(--control-surface); }
html[data-theme="dark"] .northstar-calendar-button:hover { border-color: #4c555f; }
html[data-theme="dark"] .northstar-calendar-icon { background: #282d34; }
html[data-theme="dark"] .northstar-calendar-panel { border-color: #343a43; background: #1b1f25; box-shadow: 0 24px 54px -18px rgba(0,0,0,.82), 0 5px 18px rgba(0,0,0,.3); }
html[data-theme="dark"] .northstar-calendar-nav:hover,
html[data-theme="dark"] .northstar-calendar-day:hover,
html[data-theme="dark"] .northstar-calendar-day:focus-visible { background: #252b32; }
html[data-theme="dark"] .northstar-calendar-day.is-adjacent { color: #626a74; }
html[data-theme="dark"] .northstar-calendar-day.is-today { box-shadow: inset 0 0 0 1px #517b8e; }
html[data-theme="dark"] .northstar-calendar-day[aria-selected="true"] { color: #e9f9ff; background: #17313e; box-shadow: none; }
html[data-theme="dark"] .backup-status.is-due { color: #ffc478; }
html[data-theme="dark"] .reminder-days label { color: #c2c6cc; background: #20242a; }
html[data-theme="dark"] .reminder-days label:hover { border-color: #4c555f; background: #252a31; }
html[data-theme="dark"] .reminder-check { border-color: #4c555f; background: #171a1f; }
html[data-theme="dark"] .reminder-days label:has(input:checked) { color: #dff7ff; border-color: #3b7894; background: #17313e; }
html[data-theme="dark"] .account-card,
html[data-theme="dark"] .schedule-item,
html[data-theme="dark"] .upcoming-card-payment { border-color: var(--line); background: #181c21; }
html[data-theme="dark"] .mobile-dock-rail { border-color: rgba(255,255,255,.11); background: rgba(16,18,22,.88); }
html[data-theme="dark"] .mobile-dock-item { color: #aeb4bd; }
html[data-theme="dark"] .mobile-dock-item.active { color: #e8f8ff; background: rgba(112,201,242,.17); }

/* GlassyUI-inspired native material layer.
   Northstar remains vanilla HTML/CSS/JS; these source-owned tokens reproduce
   the library's frost, rim, sheen and accessible fallback model. */
.topbar {
  background:
    radial-gradient(ellipse 38% 150% at 82% -62%, rgba(126,211,249,.16), transparent 68%),
    linear-gradient(180deg, var(--lg-sheen), transparent 58%),
    var(--lg-surface);
  border-bottom-color: var(--lg-edge);
  -webkit-backdrop-filter: saturate(var(--lg-saturation)) blur(var(--lg-blur));
  backdrop-filter: saturate(var(--lg-saturation)) blur(var(--lg-blur));
  box-shadow:
    inset 0 1px 0 var(--lg-rim),
    inset 0 -1px 0 rgba(255,255,255,.06),
    0 14px 34px -26px var(--lg-shadow);
}

.profile {
  position: relative;
  overflow: hidden;
  border-color: var(--lg-edge);
  background:
    linear-gradient(145deg, var(--lg-sheen), transparent 48%),
    var(--lg-control-surface);
  -webkit-backdrop-filter: saturate(165%) blur(18px);
  backdrop-filter: saturate(165%) blur(18px);
  box-shadow:
    inset 0 1px 0 var(--lg-rim),
    inset 0 -1px 0 rgba(255,255,255,.06),
    0 12px 28px -20px var(--lg-shadow);
}

.profile::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 22%, rgba(255,255,255,.14) 48%, transparent 72%);
  opacity: .55;
}

.profile > * { position: relative; z-index: 1; }

.pulse[aria-expanded="true"] {
  border: 1px solid rgba(255,255,255,.13);
  border-top: 0;
  background:
    radial-gradient(ellipse 52% 90% at 76% -18%, rgba(105,204,249,.13), transparent 68%),
    linear-gradient(155deg, rgba(255,255,255,.065), transparent 42%),
    rgba(2,3,6,.95);
  -webkit-backdrop-filter: saturate(175%) blur(28px);
  backdrop-filter: saturate(175%) blur(28px);
  box-shadow:
    inset 0 -1px 0 rgba(255,255,255,.065),
    inset 0 1px 0 rgba(255,255,255,.1),
    0 22px 48px -22px rgba(0,0,0,.62);
}

.metrics[data-view="overview"] > article,
.panel[data-view="overview"],
.balance-composition[data-view="overview"],
.overview-visuals[data-view="overview"] > article {
  border-color: var(--lg-edge);
  background:
    radial-gradient(ellipse 70% 48% at 18% 0%, rgba(255,255,255,.2), transparent 70%),
    linear-gradient(145deg, rgba(255,255,255,.16), transparent 48%),
    rgba(255,255,255,.27);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  backdrop-filter: saturate(180%) blur(24px);
  box-shadow:
    inset 0 1px 0 var(--lg-rim),
    inset 0 -1px 0 rgba(255,255,255,.055),
    0 18px 40px -32px var(--lg-shadow);
}

.metrics[data-view="overview"] > article,
.balance-composition[data-view="overview"],
.overview-visuals[data-view="overview"] > article {
  border-radius: clamp(18px, 1.7vw, 28px);
}

.metrics[data-view="overview"] > article:nth-child(1) {
  background:
    radial-gradient(ellipse 76% 86% at 100% 108%, color-mix(in srgb, var(--accent-green) 28%, transparent), transparent 68%),
    radial-gradient(ellipse 70% 48% at 18% 0%, rgba(255,255,255,.2), transparent 70%),
    rgba(255,255,255,.24);
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--accent-green) 72%, transparent), inset 0 1px 0 var(--lg-rim), 0 18px 40px -32px color-mix(in srgb, var(--accent-green) 46%, var(--lg-shadow));
}

.metrics[data-view="overview"] > article:nth-child(2) {
  background:
    radial-gradient(ellipse 76% 86% at 100% 108%, color-mix(in srgb, var(--accent-blue) 28%, transparent), transparent 68%),
    radial-gradient(ellipse 70% 48% at 18% 0%, rgba(255,255,255,.2), transparent 70%),
    rgba(255,255,255,.24);
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--accent-blue) 72%, transparent), inset 0 1px 0 var(--lg-rim), 0 18px 40px -32px color-mix(in srgb, var(--accent-blue) 46%, var(--lg-shadow));
}

.metrics[data-view="overview"] > article:nth-child(3) {
  background:
    radial-gradient(ellipse 76% 86% at 100% 108%, color-mix(in srgb, var(--accent-pink) 29%, transparent), transparent 68%),
    radial-gradient(ellipse 70% 48% at 18% 0%, rgba(255,255,255,.2), transparent 70%),
    rgba(255,255,255,.24);
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--accent-purple) 68%, transparent), inset 0 1px 0 var(--lg-rim), 0 18px 40px -32px color-mix(in srgb, var(--accent-pink) 44%, var(--lg-shadow));
}

.composition-cash { background: repeating-linear-gradient(135deg, rgba(255,255,255,.13) 0 7px, rgba(255,255,255,.02) 7px 14px), linear-gradient(180deg, color-mix(in srgb, var(--accent-green) 82%, white), var(--accent-green)); }
.composition-cards { background: repeating-linear-gradient(135deg, rgba(255,255,255,.13) 0 7px, rgba(255,255,255,.02) 7px 14px), linear-gradient(180deg, color-mix(in srgb, var(--accent-blue) 78%, white), var(--accent-blue)); }
.composition-auto { background: repeating-linear-gradient(135deg, rgba(255,255,255,.13) 0 7px, rgba(255,255,255,.02) 7px 14px), linear-gradient(180deg, var(--accent-pink), color-mix(in srgb, var(--accent-purple) 84%, black)); }

.accounts-page .balance-overview,
.accounts-page .card-wallet,
.accounts-page .account-group,
.accounts-page .card-focus-panel {
  border-color: var(--lg-edge);
  background:
    radial-gradient(ellipse 68% 52% at 16% 0%, rgba(255,255,255,.46), transparent 70%),
    linear-gradient(145deg, var(--lg-sheen), transparent 50%),
    var(--lg-surface);
  -webkit-backdrop-filter: saturate(165%) blur(20px);
  backdrop-filter: saturate(165%) blur(20px);
  box-shadow:
    inset 0 1px 0 var(--lg-rim),
    inset 0 -1px 0 rgba(255,255,255,.05),
    0 20px 46px -34px var(--lg-shadow);
}

.accounts-page .balance-overview,
.accounts-page .card-wallet { border-radius: clamp(20px, 1.8vw, 30px); }

.accounts-page .balance-breakdown article {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  border-color: rgba(255,255,255,.2);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.52),
    inset 0 -1px 0 rgba(255,255,255,.1),
    0 18px 38px -28px var(--balance-card-glow);
}

.accounts-page .balance-breakdown article > :not(.balance-card-chart) {
  position: relative;
  z-index: 2;
}

.accounts-page .balance-breakdown article span,
.accounts-page .balance-breakdown article small { color: rgba(255,255,255,.72); }

.accounts-page .balance-breakdown article:nth-child(1) {
  --balance-card-glow: rgba(23,162,82,.74);
  background:
    radial-gradient(circle at 54% 50%, rgba(1,18,14,.94) 0%, rgba(3,50,36,.9) 32%, rgba(11,112,67,.74) 61%, transparent 78%),
    radial-gradient(circle at 8% 6%, rgba(96,255,175,.48), transparent 42%),
    linear-gradient(145deg, #28ca79 0%, #17a252 48%, #075c38 100%);
}

.accounts-page .balance-breakdown article:nth-child(2) {
  --balance-card-glow: rgba(33,82,187,.78);
  background:
    radial-gradient(circle at 54% 50%, rgba(2,8,31,.95) 0%, rgba(5,25,80,.92) 34%, rgba(18,58,148,.75) 62%, transparent 80%),
    radial-gradient(circle at 8% 6%, rgba(91,161,255,.5), transparent 43%),
    linear-gradient(145deg, #3275df 0%, #2152bb 50%, #102a77 100%);
}

.accounts-page .balance-breakdown article:nth-child(3) {
  --balance-card-glow: rgba(182,38,187,.78);
  background:
    radial-gradient(circle at 54% 50%, rgba(28,5,38,.95) 0%, rgba(62,10,78,.92) 34%, rgba(152,28,157,.74) 62%, transparent 80%),
    radial-gradient(circle at 8% 6%, rgba(255,133,230,.46), transparent 43%),
    linear-gradient(145deg, #d748b7 0%, #b626bb 48%, #6f177f 100%);
}

.balance-card-chart {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: -2px;
  width: 100%;
  height: 58%;
  pointer-events: none;
  opacity: .78;
}

.balance-card-chart-fill { fill: rgba(61,238,151,.12); }
.balance-card-chart-line { fill: none; stroke: rgba(137,255,199,.76); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.balance-card-chart-point-halo { fill: rgba(124,255,194,.18); }
.balance-card-chart-point { fill: #f6fff9; stroke: rgba(87,233,163,.95); stroke-width: 2; vector-effect: non-scaling-stroke; }
.balance-card-chart-loans { opacity: .55; }
.balance-card-chart-loans path { fill: none; stroke: rgba(151,197,255,.6); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.balance-card-chart-loans path:nth-child(2) { opacity: .68; }
.balance-card-chart-loans path:nth-child(3) { opacity: .42; }
.balance-card-chart-loans circle { fill: rgba(236,246,255,.9); stroke: rgba(90,155,255,.9); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.balance-card-chart-composition { opacity: .62; }
.balance-card-chart-composition .composition-layer-cards { fill: rgba(255,115,220,.18); }
.balance-card-chart-composition .composition-layer-auto { fill: rgba(88,128,255,.2); }
.balance-card-chart-composition .composition-line { fill: none; stroke: rgba(255,194,240,.62); stroke-width: 1.25; vector-effect: non-scaling-stroke; }

.accounts-page .card-wallet {
  position: relative;
  isolation: isolate;
}

.accounts-page .card-wallet::before,
.accounts-page .card-wallet::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(42px);
  opacity: .32;
}

.accounts-page .card-wallet::before {
  right: -4%;
  top: 7%;
  width: 34%;
  height: 58%;
  background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
}

.accounts-page .card-wallet::after {
  right: 8%;
  bottom: -12%;
  width: 25%;
  height: 48%;
  background: linear-gradient(135deg, var(--accent-pink), var(--accent-orange));
  opacity: .22;
}

.accounts-page .card-wallet > * { position: relative; z-index: 1; }
.accounts-page .card-focus-panel {
  background:
    radial-gradient(ellipse 72% 70% at -8% 106%, color-mix(in srgb, var(--accent-blue) 15%, transparent), transparent 67%),
    radial-gradient(ellipse 60% 64% at 108% -8%, color-mix(in srgb, var(--accent-pink) 10%, transparent), transparent 68%),
    linear-gradient(145deg, rgba(255,255,255,.62), rgba(255,255,255,.28) 54%),
    rgba(255,255,255,.36);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  backdrop-filter: saturate(180%) blur(24px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    inset 0 -1px 0 rgba(104,149,215,.1),
    0 0 42px -34px rgba(33,82,187,.56),
    0 22px 48px -38px var(--lg-shadow);
}
.accounts-page .card-focus-panel dl div,
.accounts-page .account { border-color: color-mix(in srgb, var(--lg-edge) 72%, transparent); }

/* Shared application material. Every primary page uses the same translucent
   surface language; page-specific accents stay deliberately quiet. */
.panel {
  border-color: var(--lg-edge);
  background:
    radial-gradient(ellipse 72% 52% at 14% 0%, rgba(255,255,255,.44), transparent 70%),
    linear-gradient(145deg, var(--lg-sheen), transparent 50%),
    var(--lg-surface);
  -webkit-backdrop-filter: saturate(165%) blur(20px);
  backdrop-filter: saturate(165%) blur(20px);
  box-shadow:
    inset 0 1px 0 var(--lg-rim),
    inset 0 -1px 0 rgba(255,255,255,.05),
    0 20px 46px -34px var(--lg-shadow);
}

.ledger-summary-grid .history-stat:nth-child(1),
.history-summary-grid .history-stat:nth-child(1),
.settings-grid .setting-card:nth-child(4n + 1) {
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--accent-green) 11%, transparent), transparent 46%),
    linear-gradient(145deg, var(--lg-sheen), transparent 52%),
    var(--lg-surface);
}

.ledger-summary-grid .history-stat:nth-child(2),
.history-summary-grid .history-stat:nth-child(2),
.settings-grid .setting-card:nth-child(4n + 2) {
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--accent-orange) 10%, transparent), transparent 46%),
    linear-gradient(145deg, var(--lg-sheen), transparent 52%),
    var(--lg-surface);
}

.ledger-summary-grid .history-stat:nth-child(3),
.history-summary-grid .history-stat:nth-child(3),
.settings-grid .setting-card:nth-child(4n + 3) {
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--accent-pink) 10%, transparent), transparent 46%),
    linear-gradient(145deg, var(--lg-sheen), transparent 52%),
    var(--lg-surface);
}

.settings-grid .setting-card:nth-child(4n) {
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--accent-blue) 10%, transparent), transparent 46%),
    linear-gradient(145deg, var(--lg-sheen), transparent 52%),
    var(--lg-surface);
}

.records-grid .record-panel:nth-child(odd),
.trajectory {
  background:
    radial-gradient(ellipse 56% 40% at 88% 0%, color-mix(in srgb, var(--accent-green) 9%, transparent), transparent 72%),
    linear-gradient(145deg, var(--lg-sheen), transparent 50%),
    var(--lg-surface);
}

.records-grid .record-panel:nth-child(even),
.activity {
  background:
    radial-gradient(ellipse 56% 40% at 88% 0%, color-mix(in srgb, var(--accent-blue) 9%, transparent), transparent 72%),
    linear-gradient(145deg, var(--lg-sheen), transparent 50%),
    var(--lg-surface);
}

.schedule-forecast {
  border-color: color-mix(in srgb, var(--lg-edge) 76%, transparent);
  background: color-mix(in srgb, var(--lg-control-surface) 84%, transparent);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  backdrop-filter: saturate(150%) blur(14px);
}

/* Dark emphasis cards use a deep liquid-glass recipe instead of flat black. */
.balance-primary,
.schedule-projected,
.decision-card,
.payoff-amount {
  border-color: rgba(255,255,255,.13);
  background:
    radial-gradient(ellipse 88% 108% at 4% -18%, rgba(33,82,187,.58), transparent 63%),
    radial-gradient(ellipse 72% 92% at 102% 112%, rgba(215,72,183,.4), transparent 66%),
    radial-gradient(ellipse 48% 76% at 64% -26%, rgba(93,210,255,.25), transparent 68%),
    linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.02) 52%),
    rgba(10,13,19,.9);
  -webkit-backdrop-filter: saturate(195%) blur(24px);
  backdrop-filter: saturate(195%) blur(24px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -1px 0 rgba(123,187,255,.12),
    0 0 42px -24px rgba(33,82,187,.9),
    0 0 58px -34px rgba(215,72,183,.82),
    0 24px 48px -30px rgba(5,9,15,.78);
}

.decision-card,
.payoff-amount,
.balance-primary,
.schedule-projected { color: #f7fafc; }
.decision-card p { color: #b9c5ce; }
.payoff-amount span,
.payoff-amount small,
.balance-primary span,
.balance-primary small,
.schedule-projected span { color: #aeb9c3; }

html[data-theme="dark"] .accounts-page .balance-overview,
html[data-theme="dark"] .accounts-page .card-wallet,
html[data-theme="dark"] .accounts-page .account-group,
html[data-theme="dark"] .accounts-page .card-focus-panel {
  background:
    radial-gradient(ellipse 68% 52% at 16% 0%, rgba(255,255,255,.075), transparent 70%),
    linear-gradient(145deg, rgba(255,255,255,.055), transparent 50%),
    var(--lg-surface);
}

html[data-theme="dark"] .accounts-page .card-focus-panel {
  background:
    radial-gradient(ellipse 72% 70% at -8% 106%, rgba(33,82,187,.22), transparent 67%),
    radial-gradient(ellipse 60% 64% at 108% -8%, rgba(215,72,183,.14), transparent 68%),
    linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.025) 54%),
    rgba(17,21,27,.58);
}

html[data-theme="dark"] .panel,
html[data-theme="dark"] .ledger-summary-grid .history-stat,
html[data-theme="dark"] .history-summary-grid .history-stat,
html[data-theme="dark"] .settings-grid .setting-card,
html[data-theme="dark"] .records-grid .record-panel,
html[data-theme="dark"] .trajectory,
html[data-theme="dark"] .activity {
  background:
    radial-gradient(ellipse 70% 50% at 14% 0%, rgba(255,255,255,.075), transparent 70%),
    linear-gradient(145deg, rgba(255,255,255,.055), transparent 50%),
    var(--lg-surface);
}

html[data-theme="dark"] .schedule-forecast { background: rgba(25,29,35,.58); }
html[data-theme="dark"] .balance-primary,
html[data-theme="dark"] .schedule-projected,
html[data-theme="dark"] .decision-card,
html[data-theme="dark"] .payoff-amount {
  background:
    radial-gradient(ellipse 88% 108% at 4% -18%, rgba(33,82,187,.5), transparent 63%),
    radial-gradient(ellipse 72% 92% at 102% 112%, rgba(215,72,183,.34), transparent 66%),
    radial-gradient(ellipse 48% 76% at 64% -26%, rgba(93,210,255,.22), transparent 68%),
    linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.018) 52%),
    rgba(7,10,15,.76);
}

html[data-theme="dark"] .metrics[data-view="overview"] > article,
html[data-theme="dark"] .panel[data-view="overview"],
html[data-theme="dark"] .balance-composition[data-view="overview"],
html[data-theme="dark"] .overview-visuals[data-view="overview"] > article {
  background: radial-gradient(ellipse 72% 48% at 18% 0%, rgba(255,255,255,.075), transparent 70%), linear-gradient(145deg, rgba(255,255,255,.055), transparent 48%), var(--lg-surface);
}

dialog,
.northstar-select-list,
.northstar-calendar-panel {
  border-color: var(--lg-edge);
  background:
    linear-gradient(145deg, var(--lg-sheen), transparent 36%),
    var(--lg-surface-strong);
  -webkit-backdrop-filter: saturate(var(--lg-saturation)) blur(var(--lg-blur));
  backdrop-filter: saturate(var(--lg-saturation)) blur(var(--lg-blur));
  box-shadow:
    inset 0 1px 0 var(--lg-rim),
    0 28px 64px -28px var(--lg-shadow);
}

@media (max-width: 900px) {
  .mobile-dock {
    border-color: var(--lg-edge);
    background:
      linear-gradient(150deg, var(--lg-sheen), transparent 52%),
      var(--lg-surface-strong);
    color: var(--ink);
    -webkit-backdrop-filter: saturate(var(--lg-saturation)) blur(24px);
    backdrop-filter: saturate(var(--lg-saturation)) blur(24px);
    box-shadow:
      inset 0 1px 0 var(--lg-rim),
      inset 0 -1px 0 rgba(255,255,255,.055),
      0 18px 44px -18px var(--lg-shadow);
  }

  .mobile-dock-rail,
  html[data-theme="dark"] .mobile-dock-rail {
    border-color: transparent;
    background: transparent;
  }

  .mobile-dock-item { color: var(--muted); }

  .mobile-dock-glass {
    border-color: rgba(var(--dock-accent-rgb),.26);
    background:
      radial-gradient(circle at 28% 18%, rgba(255,255,255,.26), transparent 42%),
      linear-gradient(145deg, rgba(var(--dock-accent-rgb),.2), rgba(255,255,255,.06));
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.3),
      inset 0 -1px 0 rgba(var(--dock-accent-rgb),.1),
      0 8px 18px -12px rgba(var(--dock-accent-rgb),.7);
  }
}

@media (prefers-reduced-motion: reduce) {
  body, .theme-toggle-label, .theme-toggle-track, .theme-toggle-track i, .northstar-select-button, .northstar-select-chevron::before, .northstar-select-list, .northstar-calendar-button, .northstar-calendar-panel { transition: none; }
}

/* Northstar finish pass: calm hierarchy and unmistakable interaction states. */
html:not([data-theme="dark"]) body {
  background:
    radial-gradient(circle at 84% 4%, color-mix(in srgb, var(--accent-blue) 9%, transparent) 0, transparent 29%),
    radial-gradient(circle at 42% 18%, color-mix(in srgb, var(--accent-purple) 7%, transparent) 0, transparent 31%),
    radial-gradient(circle at 72% 72%, color-mix(in srgb, var(--accent-green) 6%, transparent) 0, transparent 32%),
    linear-gradient(145deg, #f2f2f4 0%, var(--canvas) 46%, #e5e6e9 100%);
  background-attachment: fixed;
}

/* Decorative admin trajectory: an atmospheric finance motif, never a data chart. */
.workspace-trajectory {
  position: fixed;
  z-index: 0;
  inset: 82px 0 0 248px;
  overflow: hidden;
  pointer-events: none;
  opacity: .54;
}

.workspace-trajectory svg {
  position: absolute;
  right: -2%;
  top: 0;
  width: min(72vw, 1080px);
  height: 100%;
  overflow: visible;
}

.workspace-trajectory-field { fill: url(#workspace-trajectory-fill); }
.workspace-trajectory-line {
  fill: none;
  stroke: url(#workspace-trajectory-stroke);
  stroke-width: .22;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 8px rgba(33,82,187,.16));
}
.workspace-trajectory-guide {
  fill: none;
  stroke: rgba(99,106,119,.16);
  stroke-width: .13;
  stroke-dasharray: .6 1.4;
  vector-effect: non-scaling-stroke;
}
.workspace-trajectory-node {
  stroke: rgba(255,255,255,.9);
  stroke-width: .18;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 5px currentColor);
}
.trajectory-stop-green { stop-color: var(--accent-green); }
.trajectory-stop-blue { stop-color: var(--accent-blue); }
.trajectory-stop-purple { stop-color: var(--accent-purple); }
.trajectory-stop-pink { stop-color: var(--accent-pink); }
.trajectory-fill-start { stop-color: color-mix(in srgb, var(--accent-blue) 3%, transparent); }
.trajectory-fill-end { stop-color: color-mix(in srgb, var(--accent-purple) 8%, transparent); }
.trajectory-node-green { color: var(--accent-green); fill: var(--accent-green); }
.trajectory-node-blue { color: var(--accent-blue); fill: var(--accent-blue); }
.trajectory-node-purple { color: var(--accent-purple); fill: var(--accent-purple); }
.trajectory-node-pink { color: var(--accent-pink); fill: var(--accent-pink); }

.content { position: relative; z-index: 1; }

html[data-theme="dark"] .workspace-trajectory { opacity: .42; }
html[data-theme="dark"] .workspace-trajectory-guide { stroke: rgba(205,216,230,.14); }
html[data-theme="dark"] .workspace-trajectory-line { filter: drop-shadow(0 0 9px rgba(93,210,255,.2)); }

@media (max-width: 900px) {
  .workspace-trajectory { left: 0; opacity: .38; }
  .workspace-trajectory svg { right: -20%; width: 112vw; }
}

@media (max-width: 650px) {
  .workspace-trajectory { display: none; }
}

.page-heading h1,
.decision-card h2,
.panel-heading h2,
.setting-card h3 {
  text-wrap: balance;
}

.page-heading p:last-child,
.decision-card p,
.panel-heading p,
.empty-record {
  text-wrap: pretty;
}

.primary-action,
.dark-action,
.text-action,
.profile {
  transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease,
    box-shadow 180ms ease, opacity 160ms ease, transform 180ms cubic-bezier(.22,1,.36,1);
}

.primary-action:hover:not(:disabled),
.dark-action:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -12px rgba(17,19,24,.6);
}

.primary-action:active:not(:disabled),
.dark-action:active:not(:disabled),
.text-action:active:not(:disabled) {
  transform: translateY(0) scale(.98);
}

.primary-action:focus-visible,
.dark-action:focus-visible,
.text-action:focus-visible,
.profile:focus-visible {
  outline: 3px solid rgba(79,195,255,.42);
  outline-offset: 3px;
}

.primary-action:disabled,
.dark-action:disabled,
.text-action:disabled {
  opacity: .42;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.overview-card-payments .empty-record {
  min-height: 76px;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 20px 12px 24px;
  border-top: 1px solid var(--soft-line);
}

.sync-readiness-card {
  grid-column: span 2;
  min-height: 0;
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: start;
  gap: 0 16px;
  padding: 22px;
}

.sync-readiness-card > .reicon {
  grid-row: 1;
  color: #34718e;
}

.sync-readiness-card > div { min-width: 0; grid-column: 2 / 4; }
.sync-readiness-card h3 { margin: 0 0 7px; }
.sync-readiness-actions { grid-column: 2 / 4; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.sync-readiness-actions button { margin-top: 0; }
.sync-readiness-actions #migration-preflight-action { color: #f5fbfe; border-color: #17313e; background: #17313e; }
.sync-readiness-card #sync-readiness-status { display: block; margin-top: 8px; color: #34718e; }

.sync-readiness-list {
  grid-column: 2 / 4;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 0 20px;
  margin: 20px 0 0;
}

.sync-readiness-list > div {
  min-width: 0;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.sync-readiness-list dt,
.sync-readiness-list dd {
  margin: 0;
  font-size: var(--type-caption);
  line-height: 1.45;
}

.sync-readiness-list dt { color: var(--muted); }
.sync-readiness-list dd { margin-top: 3px; font-weight: var(--weight-medium); }

html[data-theme="dark"] .sync-readiness-card > .reicon,
html[data-theme="dark"] .sync-readiness-card #sync-readiness-status { color: #70c9f2; }

.migration-preflight-dialog { width: min(520px,calc(100vw - 28px)); }
.dialog-eyebrow { margin: 20px 0 0; color: #34718e; font-size: 8px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.migration-preflight-dialog h2 { margin-top: 7px; }
.migration-preflight-icon { color: #34718e; background: #eaf6fb; }
.migration-preflight-summary { margin: 20px 0 8px; padding: 11px 13px; border: 1px solid #cde3ec; border-radius: 12px; color: #285f78; background: #f0f8fb; font-size: 10px; font-weight: 650; }
.migration-preflight-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.migration-preflight-list li { display: grid; grid-template-columns: 20px minmax(0,1fr); gap: 11px; align-items: start; padding: 12px 2px; border-bottom: 1px solid var(--line); }
.migration-preflight-marker { width: 18px; height: 18px; display: grid; place-items: center; border: 1px solid #c3c9cf; border-radius: 50%; }
.migration-preflight-marker::after { content: ""; width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.migration-preflight-list li.is-ready .migration-preflight-marker::after { width: 6px; height: 3px; border: 0; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; border-radius: 0; background: transparent; transform: translateY(-1px) rotate(-45deg); }
.migration-preflight-list li.is-ready .migration-preflight-marker { color: #176b51; border-color: #a6d5c5; background: #eaf7f2; }
.migration-preflight-list li.is-required .migration-preflight-marker { color: #9a6418; border-color: #e0c18e; background: #fff6e7; }
.migration-preflight-list strong,.migration-preflight-list small { display: block; }
.migration-preflight-list strong { font-size: 10px; line-height: 1.4; }
.migration-preflight-list small { margin-top: 3px; color: var(--muted); font-size: 9px; line-height: 1.45; }
.migration-tab-notice { display: grid; gap: 5px; margin-top: 18px; padding: 14px; border-left: 3px solid #c58a37; border-radius: 4px 12px 12px 4px; background: #fff8ed; }
.migration-tab-notice strong { font-size: 10px; }
.migration-tab-notice span { color: var(--muted); font-size: 9px; line-height: 1.5; }
.migration-preflight-dialog .dialog-actions button { color: white; background: var(--ink); }
html[data-theme="dark"] .migration-preflight-icon { color: #70c9f2; background: rgba(72,159,198,.14); }
html[data-theme="dark"] .migration-preflight-summary { color: #9bdcf7; border-color: rgba(112,201,242,.25); background: rgba(65,143,178,.1); }
html[data-theme="dark"] .migration-preflight-list li.is-ready .migration-preflight-marker { color: #8dd8bd; border-color: rgba(105,198,163,.35); background: rgba(55,132,103,.16); }
html[data-theme="dark"] .migration-preflight-list li.is-required .migration-preflight-marker { color: #ffc478; border-color: rgba(255,196,120,.3); background: rgba(164,104,29,.15); }
html[data-theme="dark"] .migration-tab-notice { border-color: #c58a37; background: rgba(135,86,24,.15); }

html[data-theme="dark"] .primary-action:hover:not(:disabled),
html[data-theme="dark"] .dark-action:hover:not(:disabled) {
  box-shadow: 0 8px 22px -12px rgba(0,0,0,.9), 0 0 0 1px rgba(112,201,242,.14);
}

@media (max-width: 650px) {
  .decision-card h2 { max-width: 20ch; }
  .overview-card-payments .empty-record { min-height: 68px; }
  .sync-readiness-card {
    grid-column: auto;
    grid-template-columns: auto minmax(0,1fr);
  }
  .sync-readiness-card > div { grid-column: 2; }
  .sync-readiness-actions { grid-column: 1 / 3; }
  .sync-readiness-list { grid-column: 1 / 3; grid-template-columns: 1fr 1fr; row-gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .primary-action,
  .dark-action,
  .text-action,
  .profile { transition: none; }
  .payoff-ring-orbit { animation: none; transform: rotate(28deg); will-change: auto; }
}

@media (prefers-reduced-transparency: reduce) {
  .workspace-trajectory { display: none; }
  .topbar,
  html[data-theme="dark"] .topbar,
  .profile,
  .pulse[aria-expanded="true"],
  .panel,
  .metrics[data-view="overview"] > article,
  .panel[data-view="overview"],
  .balance-composition[data-view="overview"],
  .overview-visuals[data-view="overview"] > article,
  .accounts-page .balance-overview,
  .accounts-page .card-wallet,
  .accounts-page .account-group,
  .accounts-page .card-focus-panel,
  dialog,
  .northstar-select-list,
  .northstar-calendar-panel,
  .mobile-dock,
  .mobile-dock-glass {
    background: var(--lg-opaque-surface);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .profile,
  .mobile-dock-glass { background: var(--lg-opaque-control); }

  .accounts-page .card-wallet::before,
  .accounts-page .card-wallet::after,
  .payoff-ring-orbit { display: none; }
}

@media (forced-colors: active) {
  .workspace-trajectory { display: none; }
  .topbar,
  html[data-theme="dark"] .topbar,
  .profile,
  .pulse[aria-expanded="true"],
  .panel,
  .metrics[data-view="overview"] > article,
  .panel[data-view="overview"],
  .balance-composition[data-view="overview"],
  .overview-visuals[data-view="overview"] > article,
  .accounts-page .balance-overview,
  .accounts-page .card-wallet,
  .accounts-page .account-group,
  .accounts-page .card-focus-panel,
  dialog,
  .northstar-select-list,
  .northstar-calendar-panel,
  .mobile-dock,
  .mobile-dock-glass {
    color: CanvasText;
    background: Canvas;
    border-color: CanvasText;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
  }

  .accounts-page .card-wallet::before,
  .accounts-page .card-wallet::after,
  .payoff-ring-orbit { display: none; }
}