:root {
  --night: #07130f;
  --night-deep: #040b08;
  --surface: rgba(24, 53, 39, 0.78);
  --surface-strong: rgba(29, 68, 48, 0.9);
  --surface-soft: rgba(31, 67, 48, 0.52);
  --surface-lift: rgba(48, 89, 63, 0.64);
  --line: rgba(221, 255, 226, 0.12);
  --line-strong: rgba(221, 255, 226, 0.22);
  --ink: #f0f8ef;
  --ink-soft: #d4e6d5;
  --muted: #9bb5a2;
  --muted-dim: #75927d;
  --mint: #9ee7a5;
  --mint-strong: #75d990;
  --mint-dark: #2c6b49;
  --gold: #d8b45f;
  --gold-soft: #fff1c2;
  --brand-sage: #b9dabb;
  --brand-sage-deep: #8dbb96;
  --brand-gold: #c77820;
  --lime: #d0e982;
  --orange: #f3a552;
  --cyan: #72d3ef;
  --lilac: #c69bef;
  --red: #ff847b;
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.27), inset 0 1px 0 rgba(255,255,255,0.08);
  --shadow-soft: 0 16px 40px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255,255,255,0.07);
  --radius-xl: 28px;
  --radius-lg: 22px;
  --radius-md: 16px;
  --ease-control: cubic-bezier(.2, .9, .25, 1);
  --focus-ring: 0 0 0 4px rgba(158, 231, 165, .14);
  --text-body: .88rem;
  --text-body-compact: .8rem;
  --font-ui: 'DM Sans', 'Avenir Next', 'Helvetica Neue', sans-serif;
  --font-display: 'Manrope', 'DM Sans', 'Avenir Next', sans-serif;
  --font-brand: 'DM Sans', 'Avenir Next', 'Helvetica Neue', sans-serif;
}

* { box-sizing: border-box; }

html { min-width: 320px; background: var(--night-deep); }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 76% -8%, rgba(79, 150, 94, 0.24), transparent 34rem),
    radial-gradient(circle at 14% 55%, rgba(24, 90, 61, 0.18), transparent 33rem),
    var(--night);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.45;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

html.is-onboarding-open, body.is-onboarding-open { overflow: hidden; }

button, input, select, textarea { min-width: 0; font: inherit; -webkit-tap-highlight-color: transparent; }
button, [role='button'] { color: inherit; cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }
button:focus:not(:focus-visible), input:focus:not(:focus-visible), select:focus:not(:focus-visible), textarea:focus:not(:focus-visible) { outline: none; }
::selection { color: var(--night); background: var(--mint); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(0,0,0,.18); }
::-webkit-scrollbar-thumb { background: rgba(158,231,165,.22); border-radius: 99px; border: 3px solid transparent; background-clip: padding-box; }

.app-shell { min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 10; width: 264px; display: flex; flex-direction: column; padding: 30px 16px 18px; border-right: 1px solid rgba(158,231,165,.13); background: radial-gradient(circle at 0% 8%, rgba(114,211,239,.08), transparent 18rem), linear-gradient(180deg, rgba(5, 20, 12, .92), rgba(3, 11, 7, .96)); box-shadow: 18px 0 50px rgba(0,0,0,.14); backdrop-filter: blur(22px); }
.brand-lockup { display: flex; gap: 10px; align-items: center; width: 100%; min-height: 78px; padding: 0 7px; border: 0; background: transparent; text-align: left; }
.brand-k-wrap { display: block; width: 60px; height: 60px; flex: 0 0 auto; transform: translateZ(0); transition: transform .25s var(--ease-control); }
.brand-k-art { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; user-select: none; }
.brand-wordmark { min-width: 0; color: var(--ink); font-family: var(--font-brand); font-size: 2.2rem; font-weight: 700; letter-spacing: -.065em; line-height: 1; white-space: nowrap; }
.brand-wordmark-dot { color: var(--ink); }
.brand-lockup:hover .brand-k-wrap { transform: translateY(-1px) scale(1.02); }
.brand-lockup:active .brand-k-wrap { transform: translateY(1px) scale(.985); }
.sidebar-section-label { display: grid; gap: 3px; margin: 48px 10px 12px; }
.sidebar-section-label > span { color: var(--muted-dim); font-size: .6rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.sidebar-section-label > small { color: rgba(155,181,162,.62); font-size: .62rem; line-height: 1.3; }
.side-nav { position: relative; display: grid; gap: 3px; padding: 3px 0; }
.nav-item { position: relative; display: flex; gap: 12px; align-items: center; width: 100%; min-height: 52px; padding: 8px 12px; border: 1px solid transparent; border-radius: 16px; color: var(--muted); background: transparent; text-align: left; transition: background .22s ease, color .22s ease, transform .22s var(--ease-control), border-color .22s ease, box-shadow .22s ease; }
.nav-item:hover { color: var(--ink-soft); background: rgba(158,231,165,.07); }
.nav-item:active { transform: translateY(1px); }
.nav-item.active { color: var(--ink); border-color: rgba(158,231,165,.13); background: linear-gradient(90deg, rgba(127,218,145,.16), rgba(127,218,145,.04)); box-shadow: inset 3px 0 0 var(--mint-strong); }
.nav-item .icon { width: 18px; height: 18px; }
.sidebar .nav-item { z-index: 1; }
.sidebar .nav-item::after { position: absolute; right: 14px; width: 6px; height: 6px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px rgba(158,231,165,.1), 0 0 14px rgba(158,231,165,.35); content: ''; opacity: 0; transition: opacity .2s ease, transform .2s var(--ease-control); }
.sidebar .nav-item:hover { border-color: rgba(158,231,165,.1); background: linear-gradient(90deg, rgba(158,231,165,.08), rgba(158,231,165,.015)); transform: translateX(2px); }
.sidebar .nav-item:active { transform: translate(2px, 1px); }
.sidebar .nav-item.active { border-color: rgba(158,231,165,.18); background: linear-gradient(100deg, rgba(127,218,145,.18), rgba(18,56,35,.2) 66%, rgba(18,56,35,.03)); box-shadow: inset 3px 0 0 var(--mint-strong), 0 10px 24px rgba(0,0,0,.12); }
.sidebar .nav-item.active::after { opacity: 1; }
.sidebar .nav-icon-frame { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(221,255,226,.12); border-radius: 11px 11px 12px 6px; color: var(--muted); background: rgba(255,255,255,.035); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s var(--ease-control); }
.sidebar .nav-icon-frame .icon { width: 18px; height: 18px; }
.sidebar .nav-item-copy { display: grid; min-width: 0; gap: 2px; }
.sidebar .nav-item-copy > span { overflow: hidden; color: inherit; font-family: var(--font-ui); font-size: .84rem; font-weight: 700; letter-spacing: -.025em; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
.sidebar .nav-item-copy > small { overflow: hidden; color: var(--muted-dim); font-size: .62rem; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.sidebar .nav-item:hover .nav-icon-frame { border-color: rgba(158,231,165,.22); color: var(--ink-soft); background: rgba(158,231,165,.08); transform: rotate(-2deg); }
.sidebar .nav-item.active .nav-icon-frame { border-color: rgba(158,231,165,.28); color: var(--mint); background: rgba(158,231,165,.13); box-shadow: inset 0 1px 0 rgba(255,255,255,.11), 0 6px 16px rgba(63,170,92,.12); }
.sidebar .nav-item.active .nav-item-copy > small { color: rgba(206,239,207,.7); }
.sidebar .side-nav .nav-item:nth-child(2) .nav-icon-frame { color: var(--lilac); background: rgba(198,155,239,.055); }
.sidebar .side-nav .nav-item:nth-child(3) .nav-icon-frame { color: var(--cyan); background: rgba(114,211,239,.055); }
.sidebar .side-nav .nav-item:nth-child(4) .nav-icon-frame { color: var(--orange); background: rgba(243,165,82,.055); }
.sidebar .side-nav .nav-item:nth-child(5) .nav-icon-frame { color: var(--lime); background: rgba(208,233,130,.055); }
.sidebar .side-nav .nav-item.active .nav-icon-frame { color: var(--mint); background: rgba(158,231,165,.13); }
.sidebar .sidebar-workspace-label { margin-top: 34px; }
.sidebar .review-nav-item { border-color: rgba(198,155,239,.14); background: linear-gradient(100deg, rgba(198,155,239,.07), rgba(198,155,239,.015)); }
.sidebar .review-nav-item .nav-icon-frame { color: var(--lilac); border-color: rgba(198,155,239,.24); background: rgba(198,155,239,.1); }
.sidebar .review-nav-item:hover { border-color: rgba(198,155,239,.26); background: linear-gradient(100deg, rgba(198,155,239,.11), rgba(198,155,239,.025)); }
.sidebar .review-nav-item.active .nav-icon-frame { color: var(--mint); border-color: rgba(158,231,165,.28); background: rgba(158,231,165,.13); }
.sidebar-bottom { display: grid; gap: 9px; margin-top: auto; padding: 16px 8px 0; border-top: 1px solid rgba(221,255,226,.1); }
.privacy-note { display: flex; gap: 10px; align-items: center; padding: 4px 0; border: 0; border-radius: 15px; background: transparent; }
.privacy-icon { display: grid; flex: 0 0 auto; width: 30px; height: 30px; place-items: center; border: 1px solid rgba(158,231,165,.2); border-radius: 10px; color: var(--mint); background: rgba(158,231,165,.08); }
.privacy-note strong, .privacy-note span { display: block; }
.privacy-note strong { color: var(--ink-soft); font-size: .75rem; }
.privacy-note span { margin-top: 2px; color: var(--muted-dim); font-size: .68rem; }
.profile-button { display: flex; gap: 10px; align-items: center; width: 100%; min-height: 44px; padding: 7px 8px; border: 1px solid transparent; border-radius: 14px; background: rgba(255,255,255,.025); text-align: left; transition: background .2s ease, border-color .2s ease, transform .2s var(--ease-control); }
.profile-button:hover { border-color: rgba(158,231,165,.14); background: rgba(158,231,165,.07); transform: translateY(-1px); }
.profile-button strong, .profile-button small { display: block; }
.profile-button strong { font-size: .78rem; }
.profile-button small { margin-top: 1px; color: var(--muted); font-size: .67rem; }
.profile-chevron { width: 14px !important; height: 14px !important; margin-left: auto; color: var(--muted); }
.profile-summary { cursor: default; }
.profile-summary:hover { border-color: transparent; background: rgba(255,255,255,.025); transform: none; }

.main-content { min-height: 100vh; margin-left: 264px; }
.topbar { display: flex; justify-content: space-between; align-items: center; max-width: 1360px; margin: 0 auto; padding: 32px 56px 22px; }
.topbar-kicker, .section-kicker, .eyebrow { margin: 0; color: var(--muted); font-size: .7rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.topbar h1 { margin: 4px 0 0; color: var(--ink); font-family: var(--font-display); font-size: clamp(1.45rem, 2vw, 2rem); font-weight: 700; letter-spacing: -.055em; line-height: 1.1; text-wrap: balance; }
.topbar > div:first-child, .view-intro > div:first-child, .panel-heading > div:first-child, .modal-header > div:first-child, .studio-intro > div:first-child { min-width: 0; }
.topbar-actions { display: flex; gap: 10px; align-items: center; }
.content-wrap { max-width: 1360px; margin: 0 auto; padding: 0 56px 170px; }
.persistence-status { display: flex; gap: 12px; align-items: center; max-width: 1248px; min-width: 0; margin: 0 auto 18px; padding: 10px 14px; border: 1px solid rgba(158,231,165,.14); border-radius: 16px; color: var(--muted); background: rgba(158,231,165,.045); }
.persistence-status.is-warning { border-color: rgba(255,132,123,.38); color: #ffd5cf; background: rgba(255,132,123,.08); }
.persistence-status-icon { display: inline-grid; width: 30px; height: 30px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(158,231,165,.22); border-radius: 10px; color: var(--mint); background: rgba(158,231,165,.08); }
.persistence-status.is-warning .persistence-status-icon { border-color: rgba(255,132,123,.35); color: #ffb0a9; background: rgba(255,132,123,.1); }
.persistence-status-icon .icon { width: 16px; height: 16px; }
.persistence-status-copy { display: grid; min-width: 0; flex: 1; gap: 2px; }
.persistence-status-copy strong, .persistence-status-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.persistence-status-copy strong { color: var(--ink-soft); font-size: .68rem; }
.persistence-status-copy small { color: var(--muted-dim); font-size: .59rem; line-height: 1.35; }
.persistence-status.is-warning .persistence-status-copy strong { color: #ffe1dc; }
.persistence-status.is-warning .persistence-status-copy small { color: #ffb0a9; }
.persistence-status > .text-button { flex: 0 0 auto; min-height: 34px; padding: 0 10px; font-size: .62rem; }
.view { animation: view-in .48s cubic-bezier(.16,1,.3,1) both; }
@keyframes view-in { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }
.view[hidden] { display: none; }
.view-intro { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin: 24px 0 22px; }
.view-intro h2 { max-width: 660px; margin: 4px 0 0; font-family: var(--font-display); font-size: clamp(1.65rem, 3vw, 2.65rem); font-weight: 700; letter-spacing: -.07em; line-height: 1.04; text-wrap: balance; }
.panel-surface, .stack-panel, .next-up-panel, .streak-row { border: 1px solid var(--line); box-shadow: var(--shadow-soft); }
.panel-surface { border-radius: var(--radius-xl); background: linear-gradient(150deg, rgba(34,73,51,.75), rgba(16,39,27,.82)); }
.panel-heading { display: flex; justify-content: space-between; align-items: start; gap: 20px; }
.panel-heading-actions { display: inline-flex; gap: 7px; align-items: center; flex: 0 0 auto; }
.panel-heading h3 { margin: 5px 0 0; font-family: var(--font-display); font-size: 1.08rem; font-weight: 700; letter-spacing: -.04em; line-height: 1.15; text-wrap: balance; }
.panel-heading-actions, .wallet-panel-actions, .wallet-credit-actions { max-width: 100%; }
.panel-heading .section-kicker { color: var(--muted-dim); }
.icon { display: inline-grid; width: 18px; height: 18px; flex: 0 0 auto; place-items: center; line-height: 0; }
.vector-icon { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.65; shape-rendering: geometricPrecision; vector-effect: non-scaling-stroke; }
.icon svg { width: 100%; height: 100%; }
.icon-badge { display: inline-grid; width: 20px; height: 20px; place-items: center; padding: 3px; border: 1px solid rgba(221,255,226,.16); border-radius: 7px; box-shadow: 0 6px 15px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.1); }
.icon-badge svg { width: 100%; height: 100%; }
.icon-badge.icon-badge-export { color: var(--cyan); border-color: rgba(114,211,239,.24); background: rgba(114,211,239,.1); }
.icon-badge.icon-badge-restore { color: var(--lilac); border-color: rgba(198,155,239,.24); background: rgba(198,155,239,.1); }
.icon-badge.icon-badge-add { color: #183f27; border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.28); }
.avatar { display: grid; width: 39px; height: 39px; place-items: center; padding: 0; border: 1px solid rgba(198, 241, 199, .38); border-radius: 50%; color: #174126; background: linear-gradient(145deg, #d4ef9a, #81d799); font-size: .8rem; font-weight: 800; box-shadow: 0 6px 18px rgba(94, 191, 102, .2); }
.avatar-small { width: 31px; height: 31px; flex: 0 0 auto; font-size: .7rem; }
.icon-button, .round-action { display: inline-grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); background: rgba(255,255,255,.04); transition: transform .18s var(--ease-control), color .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease; }
.icon-button { width: 44px; height: 44px; }
.round-action { width: 44px; height: 44px; color: var(--ink-soft); }
.icon-button:hover, .round-action:hover { color: var(--ink); background: rgba(158,231,165,.12); transform: translateY(-1px); }
.icon-button:active, .round-action:active { transform: translateY(1px) scale(.96); background: rgba(158,231,165,.17); }
.icon-button:focus-visible, .round-action:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; box-shadow: var(--focus-ring); }
.icon-button.subtle { width: 40px; height: 40px; border-color: transparent; background: rgba(255,255,255,.035); }
.text-button { display: inline-flex; gap: 5px; align-items: center; padding: 3px 6px; border: 0; border-radius: 8px; color: var(--mint); background: transparent; font-size: .76rem; font-weight: 700; transition: transform .18s var(--ease-control), color .18s ease, background .18s ease, box-shadow .18s ease; }
.text-button:hover { color: var(--ink); background: rgba(158,231,165,.07); transform: translateY(-1px); }
.text-button:active { transform: translateY(1px) scale(.98); background: rgba(158,231,165,.12); }
.text-button:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; box-shadow: var(--focus-ring); }
.text-button:disabled, .primary-button:disabled, .secondary-button:disabled { cursor: not-allowed; opacity: .48; transform: none; }
.month-control { display: inline-flex; gap: 8px; align-items: center; min-height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: 11px; color: var(--ink-soft); background: rgba(255,255,255,.045); font-size: .76rem; transition: border-color .18s ease, background .18s ease, box-shadow .18s ease; }
.month-control:hover { border-color: var(--line-strong); background: rgba(255,255,255,.08); }
.month-control .icon { width: 14px; height: 14px; color: var(--muted); }
.month-control-label, .month-arrows [data-month-label] { min-width: 92px; text-align: center; font-variant-numeric: tabular-nums; }
.month-shift { display: inline-grid; width: 40px; height: 40px; place-items: center; padding: 0; border: 0; border-radius: 10px; color: var(--muted); background: transparent; transition: transform .18s var(--ease-control), color .18s ease, background .18s ease, box-shadow .18s ease; }
.month-shift:hover { color: var(--ink); background: rgba(158,231,165,.12); }
.month-shift:active { transform: translateY(1px) scale(.94); background: rgba(158,231,165,.17); }
.month-shift:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; box-shadow: var(--focus-ring); }
.month-shift .icon { width: 14px; height: 14px; }
.month-picker { display: flex; gap: 8px; align-items: center; justify-content: flex-end; }
.month-reset { min-height: 38px; padding: 0 12px; border: 1px solid rgba(158,231,165,.22); border-radius: 11px; color: var(--mint); background: rgba(158,231,165,.08); font-size: .7rem; font-weight: 700; white-space: nowrap; transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s var(--ease-control), box-shadow .18s ease; }
.month-reset:hover { border-color: rgba(158,231,165,.42); color: var(--ink); background: rgba(158,231,165,.14); transform: translateY(-1px); }
.month-reset:active { transform: translateY(1px) scale(.985); background: rgba(158,231,165,.19); }
.month-reset:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; box-shadow: var(--focus-ring); }
.month-reset[hidden] { display: none; }
.overview-grid { display: grid; grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr); gap: 18px; }
.setup-guide { display: grid; gap: 18px; margin-top: 18px; padding: 22px 24px; border-color: rgba(158,231,165,.22); background: radial-gradient(circle at 100% 0%, rgba(119,217,160,.12), transparent 18rem), linear-gradient(145deg, rgba(34,74,50,.72), rgba(11,31,20,.82)); box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.08); }
.setup-guide[hidden] { display: none; }
.setup-guide-heading { display: flex; gap: 18px; align-items: flex-start; justify-content: space-between; }
.setup-guide-heading > div { min-width: 0; }
.setup-guide-heading h3 { max-width: 24ch; margin: 5px 0 0; font-family: var(--font-display); font-size: 1.22rem; letter-spacing: -.05em; line-height: 1.05; text-wrap: balance; }
.setup-guide-heading .body-copy { max-width: 58ch; margin: 8px 0 0; font-size: .72rem; line-height: 1.45; }
.setup-guide-progress { display: inline-flex; flex: 0 0 auto; min-height: 30px; align-items: center; padding: 0 10px; border: 1px solid rgba(158,231,165,.25); border-radius: 999px; color: var(--mint); background: rgba(158,231,165,.08); font-size: .62rem; font-weight: 800; white-space: nowrap; }
.setup-guide-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid rgba(221,255,226,.1); border-bottom: 1px solid rgba(221,255,226,.1); }
.setup-guide-item { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; gap: 0 10px; min-width: 0; padding: 14px 15px 14px 0; border-right: 1px solid rgba(221,255,226,.1); }
.setup-guide-item + .setup-guide-item { padding-left: 15px; }
.setup-guide-item:last-child { padding-right: 0; border-right: 0; }
.setup-guide-item-mark { display: grid; width: 28px; height: 28px; grid-row: 1 / span 2; place-items: center; border: 1px solid rgba(158,231,165,.26); border-radius: 10px; color: var(--mint); background: rgba(158,231,165,.09); }
.setup-guide-item-mark .icon { width: 14px; height: 14px; }
.setup-guide-item-copy { display: grid; min-width: 0; gap: 3px; align-content: start; }
.setup-guide-item-copy strong { color: var(--ink-soft); font-size: .68rem; line-height: 1.15; }
.setup-guide-item-copy > span { color: var(--muted); font-size: .6rem; line-height: 1.4; }
.setup-guide-state { align-self: end; justify-self: start; margin-top: 9px; color: var(--muted-dim); font-size: .57rem; font-weight: 800; }
.setup-guide-state.is-done { color: var(--mint); }
.setup-guide-action { display: inline-flex; gap: 5px; align-items: center; justify-self: start; min-height: 29px; margin-top: 8px; padding: 0 8px; border: 1px solid rgba(158,231,165,.22); border-radius: 9px; color: var(--mint); background: rgba(158,231,165,.08); font-size: .58rem; font-weight: 800; transition: transform .18s var(--ease-control), background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease; }
.setup-guide-action:hover { transform: translateY(-1px); border-color: rgba(158,231,165,.42); color: var(--ink); background: rgba(158,231,165,.14); box-shadow: 0 8px 18px rgba(0,0,0,.14); }
.setup-guide-action:active { transform: translateY(1px) scale(.98); }
.setup-guide-action:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; box-shadow: var(--focus-ring); }
.setup-guide-action .icon { width: 12px; height: 12px; }
.setup-guide-item.is-complete .setup-guide-item-mark { border-color: rgba(158,231,165,.36); color: var(--mint); background: rgba(158,231,165,.14); }
.setup-guide-item.is-locked { opacity: .72; }
.hero-card { position: relative; min-height: 300px; padding: 28px; overflow: hidden; border-color: rgba(158,231,165,.24); background: radial-gradient(circle at 85% 10%, rgba(163,233,131,.24), transparent 18rem), linear-gradient(140deg, rgba(52,112,66,.96), rgba(19,61,39,.96) 55%, rgba(8,30,21,.98)); box-shadow: 0 26px 60px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.19); }
.hero-card::after { position: absolute; width: 240px; height: 240px; right: -92px; bottom: -118px; border: 1px solid rgba(202,255,195,.13); border-radius: 50%; box-shadow: 0 0 0 21px rgba(202,255,195,.03), 0 0 0 42px rgba(202,255,195,.025); content: ''; }
.hero-card-top { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; }
.hero-amount { position: relative; z-index: 1; margin-top: 29px; color: #f5fff1; font-family: var(--font-display); font-size: clamp(2.5rem, 5.5vw, 4.6rem); font-weight: 700; letter-spacing: -.09em; line-height: .95; font-variant-numeric: tabular-nums; }
.hero-helper { position: relative; z-index: 1; margin: 12px 0 0; color: rgba(231, 255, 229, .73); font-size: var(--text-body); overflow-wrap: break-word; }
.hero-card.is-negative { border-color: rgba(255,132,123,.3); background: radial-gradient(circle at 85% 10%, rgba(255,132,123,.2), transparent 18rem), linear-gradient(140deg, rgba(87,58,47,.97), rgba(48,35,27,.97) 55%, rgba(27,20,17,.99)); }
.hero-breakdown { position: relative; z-index: 1; margin-top: 21px; padding-top: 14px; border-top: 1px solid rgba(231,255,229,.18); animation: breakdown-in .28s cubic-bezier(.16,1,.3,1) both; }
.hero-breakdown[hidden] { display: none; }
@keyframes breakdown-in { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
.hero-breakdown-heading, .hero-breakdown-row, .hero-breakdown-total { display: flex; gap: 14px; align-items: center; justify-content: space-between; }
.hero-breakdown-heading { color: rgba(231,255,229,.62); font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.hero-breakdown-heading span:last-child { color: var(--mint); }
.hero-breakdown-row { padding: 8px 0; color: rgba(231,255,229,.72); font-size: .7rem; }
.hero-breakdown-row + .hero-breakdown-row { border-top: 1px solid rgba(231,255,229,.08); }
.hero-breakdown-row strong { color: rgba(245,255,240,.95); font-size: .72rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hero-breakdown-row.is-deduction strong { color: rgba(255,209,200,.88); }
.hero-breakdown-total { margin-top: 3px; padding-top: 11px; border-top: 1px solid rgba(231,255,229,.18); color: var(--ink); font-size: .72rem; font-weight: 700; }
.hero-breakdown-total strong { color: var(--mint); font-family: var(--font-display); font-size: .92rem; font-variant-numeric: tabular-nums; }
.hero-card.is-negative .hero-breakdown-total strong { color: #ffc0b8; }
.hero-breakdown-note { margin: 10px 0 0; color: rgba(231,255,229,.62); font-size: .65rem; line-height: 1.45; }
.hero-rule { position: relative; z-index: 1; height: 1px; margin: 35px 0 16px; background: rgba(231,255,229,.2); }
.hero-footer { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: end; gap: 18px; }
.hero-footer strong, .hero-footer .stat-label { display: block; }
.hero-footer strong { margin-top: 3px; color: rgba(245,255,240,.92); font-size: .82rem; font-variant-numeric: tabular-nums; }
.overview-commitment-strip { position: relative; z-index: 1; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 11px; align-items: center; width: 100%; margin-top: 18px; padding: 12px 0 0; border: 0; border-top: 1px solid rgba(231,255,229,.16); color: var(--ink-soft); background: transparent; font: inherit; text-align: left; cursor: pointer; transition: color .18s ease, transform .18s var(--ease-control); }
.overview-commitment-strip:hover { color: var(--ink); transform: translateY(-1px); }
.overview-commitment-strip:focus-visible { border-radius: 10px; outline: 2px solid var(--mint); outline-offset: 4px; box-shadow: var(--focus-ring); }
.overview-commitment-mark, .plan-commitment-summary-mark { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(158,231,165,.22); border-radius: 12px; color: var(--mint); background: rgba(158,231,165,.09); }
.overview-commitment-mark .icon, .plan-commitment-summary-mark .icon { width: 18px; height: 18px; }
.overview-commitment-copy, .plan-commitment-summary-copy { display: grid; min-width: 0; gap: 2px; }
.overview-commitment-copy strong, .plan-commitment-summary-copy strong { overflow: hidden; color: var(--ink-soft); font-size: .71rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.overview-commitment-copy small, .plan-commitment-summary-copy small { overflow: hidden; color: var(--muted); font-size: .62rem; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.overview-commitment-link, .plan-commitment-summary-link { display: inline-flex; gap: 5px; align-items: center; color: var(--mint); font-size: .62rem; font-weight: 800; white-space: nowrap; }
.overview-commitment-link .icon, .plan-commitment-summary-link .icon { width: 14px; height: 14px; transition: transform .18s var(--ease-control); }
.overview-commitment-strip:hover .overview-commitment-link .icon, .plan-commitment-summary:hover .plan-commitment-summary-link .icon { transform: translateX(2px); }
.stat-label { color: var(--muted); font-size: .68rem; }
.hero-status { display: inline-flex; gap: 7px; align-items: center; color: var(--lime); font-size: .72rem; font-weight: 700; }
.hero-status.needs-attention { color: var(--red); }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px rgba(208,233,130,.11); }
.needs-attention .status-dot { background: var(--red); box-shadow: 0 0 0 4px rgba(255,132,123,.12); }
.stack-panel { display: grid; grid-template-rows: auto auto; padding: 24px; border-radius: var(--radius-xl); background: linear-gradient(145deg, rgba(36,74,52,.72), rgba(10,31,20,.8)); transition: box-shadow .22s ease; }
.wallet-panel-actions { display: flex; gap: 8px; align-items: center; }
.wallet-manage-button { flex: 0 0 auto; }
.wallet-deck-toggle-button, .wallet-add-card-button { min-height: 36px; padding: 0 10px; border: 1px solid rgba(158,231,165,.22); border-radius: 12px; color: var(--mint); background: rgba(158,231,165,.08); font-size: .67rem; font-weight: 700; letter-spacing: -.01em; line-height: 1; }
.wallet-deck-toggle-button:hover, .wallet-add-card-button:hover { border-color: rgba(158,231,165,.42); color: var(--ink); background: rgba(158,231,165,.14); transform: translateY(-1px); }
.wallet-deck-toggle-button:active, .wallet-add-card-button:active { transform: translateY(1px) scale(.98); background: rgba(158,231,165,.19); }
.wallet-deck-toggle-button:focus-visible, .wallet-add-card-button:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; box-shadow: var(--focus-ring); }
.wallet-category-shelf { min-width: 0; margin-top: 18px; padding: 16px; overflow: visible; border: 1px solid rgba(221,255,226,.12); border-radius: 21px; background: rgba(2,18,12,.2); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
.wallet-category-shelf + .wallet-category-shelf { margin-top: 12px; }
.cash-category-shelf { display: grid; grid-template-rows: auto 236px; transition: grid-template-rows .3s cubic-bezier(.2,.9,.25,1); }
.wallet-category-shelf .wallet-group-label-row { align-items: center; margin-top: 0; padding-top: 0; border-top: 0; }
.wallet-category-shelf .wallet-group-label-row + .wallet-stack { margin-top: 14px; }
.wallet-category-shelf .credit-card-shelf { width: min(100%, 560px); margin: 14px auto 0; }
.credit-category-shelf { display: grid; grid-template-rows: auto 236px; border-color: rgba(114,211,239,.14); background: linear-gradient(140deg, rgba(18,67,64,.25), rgba(5,30,23,.22)); transition: grid-template-rows .3s cubic-bezier(.2,.9,.25,1); }
.credit-category-shelf.is-single-credit { grid-template-rows: auto 160px; }
.credit-category-shelf.is-credit-deck-expanded { grid-template-rows: auto 365px; }
.credit-category-shelf.is-empty { grid-template-rows: auto auto; }
.wallet-group-label-row { display: flex; gap: 12px; align-items: end; justify-content: space-between; margin-top: 20px; padding-top: 15px; border-top: 1px solid rgba(221,255,226,.1); }
.wallet-group-label-row > div { display: grid; min-width: 0; gap: 3px; }
.wallet-group-label-row strong { color: var(--ink-soft); font-family: var(--font-display); font-size: .72rem; font-weight: 700; letter-spacing: -.02em; }
.wallet-group-label-row > div > span { color: var(--muted); font-size: .6rem; line-height: 1.35; }
.wallet-group-count { flex: 0 0 auto; color: var(--muted-dim); font-size: .58rem; font-weight: 700; letter-spacing: .04em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wallet-credit-group-label { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: start; gap: 0 12px; }
.wallet-credit-group-label > div:first-child { grid-column: 1; grid-row: 1 / span 2; }
.wallet-credit-group-label > .wallet-group-count { grid-column: 2; grid-row: 1; align-self: start; }
.wallet-credit-group-label > .wallet-credit-actions { grid-column: 2; grid-row: 2; align-self: end; justify-self: end; margin-top: 7px; }
.wallet-credit-actions { display: inline-flex !important; min-width: 0; max-width: 100%; gap: 6px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.wallet-credit-actions .icon { width: 11px; height: 11px; }
.wallet-credit-actions .wallet-add-card-button { color: var(--cyan); border-color: rgba(114,211,239,.26); background: rgba(114,211,239,.1); }
.wallet-credit-actions .wallet-add-card-button:hover { color: #d8f5ff; border-color: rgba(114,211,239,.48); background: rgba(114,211,239,.16); }
.wallet-group-label-row + .wallet-stack { margin-top: 12px; }
.wallet-credit-group-label { margin-top: 17px; padding-top: 17px; }
.credit-card-shelf { position: relative; display: block; width: min(100%, 560px); height: auto; min-height: 0; margin: 12px auto 0; }
.credit-card-shelf.is-empty { display: flex; min-height: 74px; }
.credit-card-shelf:empty { display: none; }
.wallet-card-credit { position: absolute; right: 0; left: 0; width: 100%; height: 96px; min-height: 96px; padding: 13px 16px; border-radius: 18px 18px 21px 9px; color: #effcff; background: linear-gradient(140deg, #2683a1, #135064); box-shadow: 0 16px 30px rgba(6,37,50,.22), 0 7px 14px rgba(0,0,0,.09), inset 0 1px 0 rgba(255,255,255,.23), inset 0 -10px 18px rgba(0,0,0,.06); }
.wallet-card-credit::before { width: 140px; height: 40px; top: -21px; right: 50%; transform: translateX(50%); border-radius: 0 0 22px 22px; background: rgba(255,255,255,.1); filter: none; }
.wallet-card-credit::after { position: absolute; inset: 10px; z-index: 0; border: 1px dashed rgba(255,255,255,.2); border-radius: 14px 14px 17px 7px; content: ''; pointer-events: none; }
.wallet-card-credit:hover { box-shadow: 0 25px 46px rgba(6,37,50,.29), 0 11px 21px rgba(0,0,0,.13), inset 0 1px 0 rgba(255,255,255,.28), inset 0 -13px 21px rgba(0,0,0,.08); transform: translateY(-2px); }
.wallet-card-credit-balance { position: relative; z-index: 1; display: flex; gap: 6px; align-items: baseline; margin-top: 4px; }
.wallet-card-credit-balance strong { margin-top: 0; color: #f4fdff; font-size: 1.16rem; letter-spacing: -.06em; }
.wallet-card-credit-balance > span { color: rgba(255,255,255,.7); font-size: .62rem; font-weight: 500; }
.wallet-card-credit .wallet-card-bottom { position: relative; z-index: 1; font-size: .59rem; }
.wallet-card-credit-status { display: inline-flex; max-width: 58%; min-height: 18px; align-items: center; justify-content: flex-end; padding: 3px 7px; overflow: hidden; border: 1px solid rgba(154,225,255,.24); border-radius: 999px; color: rgba(224,246,255,.82); background: rgba(114,211,239,.1); font-size: .54rem !important; font-weight: 700 !important; line-height: 1; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.wallet-card-credit-status.positive { color: #b9f3c2; border-color: rgba(158,231,165,.26); background: rgba(158,231,165,.1); }
.wallet-card-credit-status.negative { color: #ffc0ba; border-color: rgba(255,132,123,.28); background: rgba(255,132,123,.11); }
.wallet-card-credit-status.neutral { color: #d2e9ff; border-color: rgba(114,211,239,.24); background: rgba(114,211,239,.1); }
.wallet-credit-empty { display: flex; gap: 10px; align-items: center; min-height: 74px; padding: 10px 0 2px; color: var(--muted); }
.wallet-credit-empty > div { display: grid; min-width: 0; gap: 3px; }
.wallet-credit-empty strong { color: var(--ink-soft); font-size: .7rem; }
.wallet-credit-empty > div span { font-size: .6rem; line-height: 1.4; }
.wallet-credit-empty .feature-icon { flex: 0 0 auto; color: var(--cyan); background: rgba(114,211,239,.09); }
.wallet-credit-empty .small-button { flex: 0 0 auto; margin-left: auto; }
.wallet-stack { position: relative; height: auto; min-height: 0; margin-top: 23px; }
.wallet-stack-empty { display: grid; gap: 6px; height: 100%; align-content: center; justify-items: start; padding: 20px; border: 1px dashed rgba(158,231,165,.25); border-radius: 18px; color: var(--muted); }
.wallet-stack-empty strong { color: var(--ink-soft); font-size: .85rem; }
.wallet-stack-empty span { font-size: .7rem; }
.wallet-card { position: absolute; right: 0; left: 0; display: flex; flex-direction: column; justify-content: space-between; min-height: 128px; padding: 17px 18px; overflow: hidden; border: 1px solid rgba(255,255,255,.18); border-radius: 20px 20px 23px 10px; box-shadow: 0 22px 42px rgba(0,0,0,.18), 0 8px 18px rgba(0,0,0,.1), inset 0 1px 0 rgba(255,255,255,.23), inset 0 -12px 20px rgba(0,0,0,.06); }
.wallet-card-button { width: 100%; appearance: none; text-align: left; font: inherit; filter: none; transition: box-shadow .2s ease, top .28s cubic-bezier(.2,.9,.25,1), bottom .28s cubic-bezier(.2,.9,.25,1), transform .24s cubic-bezier(.2,.9,.25,1); }
.wallet-card-button:hover { box-shadow: 0 27px 48px rgba(0,0,0,.22), 0 11px 21px rgba(0,0,0,.13), inset 0 1px 0 rgba(255,255,255,.28), inset 0 -13px 21px rgba(0,0,0,.08); }
.wallet-card-button:active { transform: scale(.985); transition-duration: .12s; }
.wallet-card-button:focus-visible { outline: 2px solid var(--mint); outline-offset: 4px; }
.wallet-card-button.is-opening { z-index: 20; transform: translateY(-8px) scale(1.035); box-shadow: 0 31px 56px rgba(0,0,0,.25), 0 12px 24px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.31), inset 0 -15px 24px rgba(0,0,0,.08); }
.wallet-card::before { position: absolute; width: 120px; height: 120px; right: -32px; top: -52px; border-radius: 50%; background: rgba(255,255,255,.12); filter: blur(3px); content: ''; }
.wallet-card span, .wallet-card strong, .wallet-card small { position: relative; z-index: 1; }
.wallet-card span { font-size: .72rem; font-weight: 700; }
.wallet-card strong { margin-top: 10px; font-family: var(--font-display); font-size: 1.18rem; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.wallet-card small { color: rgba(8,32,20,.74); font-size: .62rem; }
.wallet-card-back small { color: rgba(255,255,255,.68); }
.wallet-card-back { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 14px; align-items: center; min-height: 94px; padding-top: 14px; padding-bottom: 14px; }
.wallet-card-back::before { width: 104px; height: 34px; top: -18px; right: 50%; transform: translateX(50%); border-radius: 0 0 18px 18px; background: rgba(255,255,255,.1); filter: none; }
.wallet-card-back::after { position: absolute; inset: 10px; z-index: 0; border: 1px dashed rgba(255,255,255,.2); border-radius: 14px 14px 17px 7px; background: linear-gradient(to bottom, transparent 58%, rgba(0,0,0,.04) 82%, rgba(0,0,0,.1) 100%); content: ''; pointer-events: none; }
.wallet-card-back > span { grid-column: 1; grid-row: 1 / span 2; align-self: start; padding-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wallet-card-back > strong { grid-column: 2; grid-row: 1; margin-top: 0; font-size: 1rem; text-align: right; }
.wallet-card-back > small { grid-column: 2; grid-row: 2; margin-top: 2px; overflow: hidden; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.wallet-card-blue { z-index: 1; top: 1px; color: #e7fdff; background: linear-gradient(140deg, #2683a1, #135064); }
.wallet-card-orange { z-index: 2; top: 26px; color: #fff8e9; background: linear-gradient(140deg, #e4a33d, #b66e20); }
.wallet-card-ink { z-index: 3; top: 51px; color: #eef7ff; background: linear-gradient(140deg, #1b334d, #0d1c2b); }
.wallet-card-credit-back.wallet-card-blue { color: #e8f7ff; background: linear-gradient(140deg, #315d78, #1c3b56); }
.wallet-card-credit-back.wallet-card-orange { color: #e5f1ff; background: linear-gradient(140deg, #284c68, #18334e); }
.wallet-card-credit-back.wallet-card-ink { color: #e0ecfb; background: linear-gradient(140deg, #203a57, #10253d); }
.wallet-card-front { z-index: 4; bottom: 0; height: 160px; min-height: 160px; color: #fffaff; background: linear-gradient(145deg, #c4a9ec, #9274c9 58%, #6d58a2); box-shadow: 0 24px 45px rgba(50,28,85,.23), 0 9px 18px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.27), inset 0 -15px 23px rgba(50,28,85,.09); filter: none; }
.wallet-card-front::before { width: 158px; height: 50px; top: -27px; right: 50%; transform: translateX(50%); border-radius: 0 0 28px 28px; background: rgba(255,255,255,.14); filter: none; }
.wallet-card-front::after { position: absolute; inset: 12px; border: 1px dashed rgba(255,255,255,.2); border-radius: 16px 16px 20px 8px; content: ''; }
.wallet-card-front strong { margin-top: 9px; font-size: 1.45rem; }
.wallet-card-credit-front { z-index: 4; height: 160px; min-height: 160px; padding: 17px 18px; border-color: rgba(154,225,255,.32); color: #eff8ff; background: radial-gradient(circle at 88% 8%, rgba(114,211,239,.28), transparent 31%), linear-gradient(145deg, #294d68, #142b45 58%, #0c1b31); box-shadow: 0 24px 45px rgba(5,18,38,.32), 0 9px 18px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.27), inset 0 -15px 23px rgba(4,15,31,.16); }
.wallet-card-credit-front::before { width: 158px; height: 50px; top: -27px; right: 50%; transform: translateX(50%); border-radius: 0 0 28px 28px; background: rgba(114,211,239,.17); filter: none; }
.wallet-card-credit-front::after { position: absolute; inset: 12px; border: 1px dashed rgba(181,231,255,.24); border-radius: 16px 16px 20px 8px; content: ''; }
.wallet-card-credit-heading { align-items: center; }
.wallet-card-credit-name { display: inline-flex; min-width: 0; gap: 8px; align-items: center; }
.wallet-card-credit-name > span:last-child { min-width: 0; overflow: hidden; font-size: .93rem; text-overflow: ellipsis; white-space: nowrap; }
.wallet-card-credit-mark { display: inline-grid; width: 24px; height: 24px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(154,225,255,.34); border-radius: 8px 8px 9px 4px; color: var(--cyan); background: rgba(114,211,239,.13); box-shadow: inset 0 1px 0 rgba(255,255,255,.13); }
.wallet-card-credit-mark .icon { width: 13px; height: 13px; }
.wallet-card-credit-heading .wallet-card-type { color: rgba(194,235,255,.76); }
.wallet-card-credit-front .wallet-card-credit-balance { margin-top: 9px; }
.wallet-card-credit-front .wallet-card-credit-balance strong { margin-top: 0; color: #f1faff; font-size: 1.42rem; }
.wallet-card-credit-front .wallet-card-credit-balance > span { color: rgba(195,229,250,.76); font-size: .54rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.wallet-card-credit-usage { position: relative; z-index: 1; display: grid; gap: 4px; margin-top: 3px; }
.wallet-card-credit-usage-heading { display: flex; gap: 8px; align-items: baseline; justify-content: space-between; }
.wallet-card-credit-usage-heading > span { color: rgba(195,229,250,.68); font-size: .54rem !important; font-weight: 700 !important; letter-spacing: .04em; }
.wallet-card-credit-usage-heading > strong { margin-top: 0; color: var(--cyan); font-size: .64rem; letter-spacing: -.02em; }
.wallet-card-credit-usage-track { display: block; height: 5px; overflow: hidden; border-radius: 999px; background: rgba(2,14,30,.58); box-shadow: inset 0 1px 2px rgba(0,0,0,.24); }
.wallet-card-credit-usage-bar { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--cyan), var(--lilac)); box-shadow: 0 0 13px rgba(114,211,239,.35); transform: scaleX(0); transform-origin: left center; transition: transform .35s var(--ease-control); }
.wallet-card-credit-front .wallet-card-bottom { align-items: center; font-size: .62rem; }
.wallet-card-credit-front .wallet-card-bottom > span:first-child { color: rgba(225,244,255,.82); font-weight: 700; }
.wallet-card-heading, .wallet-card-bottom { display: flex; justify-content: space-between; gap: 10px; }
.wallet-card-heading > span:first-child { min-width: 0; overflow: hidden; font-size: .93rem; text-overflow: ellipsis; white-space: nowrap; }
.wallet-card-type { color: rgba(235,255,231,.72); font-size: .61rem !important; font-weight: 500 !important; }
.wallet-card-bottom { align-items: end; color: rgba(255,255,255,.74); font-size: .62rem; }
.wallet-card-bottom > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wallet-add { display: inline-grid; width: 44px; height: 44px; place-items: center; border: 1px solid rgba(255,255,255,.38); border-radius: 50%; color: #fffaff; background: rgba(255,255,255,.16); box-shadow: 0 7px 14px rgba(74,48,123,.2); }
.wallet-add .icon { width: 18px; height: 18px; }
.stack-panel.is-deck-expanded { grid-template-rows: auto auto; box-shadow: 0 22px 52px rgba(0,0,0,.21), inset 0 1px 0 rgba(255,255,255,.07); }
.stack-panel.is-deck-expanded .cash-category-shelf { grid-template-rows: auto 365px; }
.wallet-stack.is-expanded { height: auto; }
.wallet-stack.is-expanded .wallet-card-blue { top: 0; z-index: 4; }
.wallet-stack.is-expanded .wallet-card-orange { top: 64px; z-index: 5; }
.wallet-stack.is-expanded .wallet-card-ink { top: 128px; z-index: 6; }
.wallet-stack.is-expanded .wallet-card-front { top: 192px; bottom: auto; z-index: 7; }
.wallet-card-depth-0 { top: 1px; z-index: 1; }
.wallet-card-depth-1 { top: 26px; z-index: 2; }
.wallet-card-depth-2 { top: 51px; z-index: 3; }
.wallet-stack.is-expanded .wallet-card-depth-0 { top: 0; z-index: 4; }
.wallet-stack.is-expanded .wallet-card-depth-1 { top: 64px; z-index: 5; }
.wallet-stack.is-expanded .wallet-card-depth-2 { top: 128px; z-index: 6; }
.wallet-stack.is-expanded .wallet-card-depth-front { top: 192px; bottom: auto; z-index: 7; }
.wallet-stack.is-expanded.is-deck-count-1 .wallet-card-depth-front { top: 0; }
.wallet-stack.is-expanded.is-deck-count-2 .wallet-card-depth-front { top: 64px; }
.wallet-stack.is-expanded.is-deck-count-3 .wallet-card-depth-front { top: 128px; }
.wallet-stack.is-expanded.is-deck-count-4 .wallet-card-depth-front { top: 192px; }
.credit-card-shelf.is-expanded .wallet-card-depth-0 { top: 0; z-index: 4; }
.credit-card-shelf.is-expanded .wallet-card-depth-1 { top: 64px; z-index: 5; }
.credit-card-shelf.is-expanded .wallet-card-depth-2 { top: 128px; z-index: 6; }
.credit-card-shelf.is-expanded .wallet-card-depth-front { top: 192px; bottom: auto; z-index: 7; }
.credit-card-shelf.is-expanded.is-deck-count-1 .wallet-card-depth-front { top: 0; }
.credit-card-shelf.is-expanded.is-deck-count-2 .wallet-card-depth-front { top: 64px; }
.credit-card-shelf.is-expanded.is-deck-count-3 .wallet-card-depth-front { top: 128px; }
.credit-card-shelf.is-expanded.is-deck-count-4 .wallet-card-depth-front { top: 192px; }
.stack-panel.is-deck-expanded .cash-category-shelf.is-deck-count-1 { grid-template-rows: auto 173px; }
.stack-panel.is-deck-expanded .cash-category-shelf.is-deck-count-2 { grid-template-rows: auto 237px; }
.stack-panel.is-deck-expanded .cash-category-shelf.is-deck-count-3 { grid-template-rows: auto 301px; }
.stack-panel.is-deck-expanded .cash-category-shelf.is-deck-count-4 { grid-template-rows: auto 365px; }
.credit-category-shelf.is-credit-deck-expanded.is-deck-count-1 { grid-template-rows: auto 173px; }
.credit-category-shelf.is-credit-deck-expanded.is-deck-count-2 { grid-template-rows: auto 237px; }
.credit-category-shelf.is-credit-deck-expanded.is-deck-count-3 { grid-template-rows: auto 301px; }
.credit-category-shelf.is-credit-deck-expanded.is-deck-count-4 { grid-template-rows: auto 365px; }
.wallet-stack:not(.is-expanded) .wallet-card-back { padding-top: 6px; }
.wallet-stack:not(.is-expanded) .wallet-card-back > span { padding-top: 0; }
.stack-panel.has-wallet-back-stack:not(.is-deck-expanded) { grid-template-rows: auto auto; }
.wallet-stack.is-expanded .wallet-card-depth-0 { transition-delay: 0ms; }
.wallet-stack.is-expanded .wallet-card-depth-1 { transition-delay: 24ms; }
.wallet-stack.is-expanded .wallet-card-depth-2 { transition-delay: 48ms; }
.wallet-stack.is-expanded .wallet-card-depth-front { transition-delay: 72ms; }
.wallet-stack:not(.is-expanded) .wallet-card { transition-delay: 0ms; }
.two-column-grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: 18px; min-width: 0; margin-top: 18px; }
.two-column-grid > * { min-width: 0; }
.month-panel, .activity-panel { padding: 24px; }
.month-summary { display: flex; align-items: center; gap: 22px; margin-top: 24px; }
.arc-chart, .large-arc { position: relative; display: grid; place-items: center; overflow: visible; background: transparent; clip-path: none; }
.arc-chart { width: 142px; height: 82px; }
.gauge-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.gauge-track, .gauge-progress { fill: none; stroke-width: 17; stroke-linecap: round; stroke-linejoin: round; }
.gauge-track { stroke: rgba(158,231,165,.12); }
.gauge-progress { stroke: var(--mint-strong); stroke-dasharray: 0 100; transition: stroke-dasharray .55s cubic-bezier(.16,1,.3,1); }
.gauge-endpoint-halo { fill: rgba(158,231,165,.22); stroke: rgba(158,231,165,.32); stroke-width: 2; transition: cx .55s cubic-bezier(.16,1,.3,1), cy .55s cubic-bezier(.16,1,.3,1); }
.gauge-endpoint { fill: #183928; stroke: var(--mint); stroke-width: 3; transition: cx .55s cubic-bezier(.16,1,.3,1), cy .55s cubic-bezier(.16,1,.3,1); }
.arc-chart.is-over .gauge-progress, .large-arc.is-over .gauge-progress { stroke: var(--red); }
.arc-chart.is-over .gauge-endpoint-halo, .large-arc.is-over .gauge-endpoint-halo { fill: rgba(255,132,123,.22); stroke: rgba(255,132,123,.34); }
.arc-chart.is-over .gauge-endpoint, .large-arc.is-over .gauge-endpoint { stroke: var(--red); }
.arc-chart::before, .large-arc::before { display: none; }
.arc-chart-inner, .gauge-copy { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: end; padding-bottom: 8px; pointer-events: none; }
.arc-chart-inner strong { font-family: var(--font-display); font-size: 1.4rem; letter-spacing: -.06em; }
.arc-chart-inner span { color: var(--muted); font-size: .63rem; }
.gauge-copy strong { font-family: var(--font-display); font-size: 2.3rem; letter-spacing: -.08em; line-height: 1; }
.gauge-copy span { margin-top: 5px; color: var(--muted); font-size: .65rem; }
.summary-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; min-width: 0; flex: 1; }
.summary-stats > div { min-width: 0; }
.summary-stats strong, .plan-figures strong { display: block; margin-top: 5px; color: var(--ink-soft); font-size: .84rem; font-variant-numeric: tabular-nums; }
.summary-stats small { display: block; margin-top: 3px; color: var(--muted-dim); font-size: .57rem; line-height: 1.3; }
.positive { color: var(--mint) !important; }
.mini-progress-list { display: grid; gap: 14px; margin-top: 24px; }
.mini-progress-row > div:first-child, .category-label, .overall-progress > div:first-child { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.mini-progress-row span, .mini-progress-row strong { color: var(--ink-soft); font-size: .71rem; font-weight: 600; }
.mini-progress-row strong { color: var(--muted); font-size: .68rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.progress-track { height: 6px; margin-top: 7px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.09); }
.progress-track span { display: block; height: 100%; border-radius: inherit; box-shadow: 0 0 12px rgba(158,231,165,.15); }
.progress-track.tall { height: 9px; margin-top: 10px; }
.progress-track.mini-category-progress { height: 6px; margin-top: 7px; }
.mini-progress-row.is-committed-over strong { color: #ffb0a9; }
.transaction-list { display: grid; gap: 5px; margin-top: 20px; }
.transaction-list > * { min-width: 0; }
.transaction-row { display: flex; gap: 11px; align-items: center; min-height: 59px; padding: 8px 0; border-bottom: 1px solid rgba(220,255,226,.08); }
.transaction-row:last-child { border-bottom: 0; }
.transaction-row-button { width: 100%; border-top: 0; border-right: 0; border-left: 0; color: inherit; background: transparent; text-align: left; transition: background .18s ease, color .18s ease; }
.transaction-row-button:hover { border-radius: 12px; background: rgba(158,231,165,.055); }
.transaction-row-button:focus-visible { position: relative; z-index: 1; border-radius: 12px; outline: 2px solid var(--mint); outline-offset: 2px; }
.transaction-row > div, .transaction-row > .transaction-copy { min-width: 0; flex: 1; }
.transaction-row-button .transaction-copy { text-align: left; }
.transaction-row strong, .transaction-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.transaction-row strong { color: var(--ink-soft); font-size: .8rem; font-weight: 600; }
.transaction-row small { margin-top: 3px; color: var(--muted); font-size: .66rem; }
.transaction-row .amount { margin-left: auto; color: var(--ink-soft); font-size: .75rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.amount.expense { color: var(--red); }
.amount.income { color: var(--mint); }
.amount.transfer { color: var(--cyan); }
.amount.refund { color: var(--mint); }
.amount.cash-advance { color: var(--orange); }
.transaction-icon { display: inline-grid; width: 31px; height: 31px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(255,255,255,.1); border-radius: 11px; color: var(--ink-soft); background: linear-gradient(145deg, rgba(255,255,255,.11), rgba(255,255,255,.045)); box-shadow: 0 7px 17px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.1); }
.transaction-icon svg { width: 17px; height: 17px; }
.transaction-icon.food { color: var(--orange); background: rgba(243,165,82,.14); }
.transaction-icon.housing, .transaction-icon.home { color: var(--mint); background: rgba(117,217,144,.13); }
.transaction-icon.income { color: var(--lime); background: rgba(208,233,130,.13); }
.transaction-icon.transport { color: var(--cyan); background: rgba(114,211,239,.13); }
.transaction-icon.transfer { color: var(--cyan); background: rgba(114,211,239,.13); }
.transaction-icon.refund { color: var(--mint); background: rgba(119,217,160,.13); }
.transaction-icon.cash-advance { color: var(--orange); background: rgba(243,165,82,.13); }
.transaction-icon.utilities { color: var(--orange); background: rgba(243,165,82,.12); }
.transaction-icon.fun { color: var(--lilac); background: rgba(198,155,239,.13); }
.transaction-icon.wellness { color: var(--mint); background: rgba(158,231,165,.12); }
.transaction-icon.adjustment { color: var(--lilac); background: rgba(198,155,239,.12); }
.next-up-panel { margin-top: 18px; padding: 24px; border-radius: var(--radius-xl); background: linear-gradient(140deg, rgba(31,67,48,.63), rgba(11,31,21,.7)); }
.commitment-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 17px; }
.commitment-item { display: flex; gap: 12px; align-items: center; padding: 9px 18px 8px 0; border-right: 1px solid var(--line); }
.commitment-item + .commitment-item { padding-left: 18px; }
.commitment-item:last-child { border-right: 0; }
.commitment-date { display: flex; width: 36px; height: 42px; flex: 0 0 auto; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 1px solid rgba(158,231,165,.16); border-radius: 10px; color: var(--mint); background: rgba(158,231,165,.08); line-height: 1; }
.commitment-date strong { color: inherit; font-family: var(--font-display); font-size: .77rem; font-weight: 800; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.commitment-date small { margin: 0; color: var(--muted); font-family: var(--font-ui); font-size: .5rem; font-weight: 800; letter-spacing: .1em; line-height: 1; }
.commitment-item div { min-width: 0; flex: 1; }
.commitment-item > div > strong, .commitment-item > div > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.commitment-item > div > strong { color: var(--ink-soft); font-size: .74rem; }
.commitment-item > div > span { margin-top: 3px; color: var(--muted); font-size: .64rem; }
.commitment-item b { color: var(--ink-soft); font-size: .73rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.commitment-item-button { width: 100%; min-width: 0; border: 0; color: inherit; background: transparent; font: inherit; text-align: left; cursor: pointer; transition: background .18s ease, transform .18s ease; }
.commitment-item-button:hover { border-radius: 12px; background: rgba(158,231,165,.055); transform: translateY(-1px); }
.commitment-item-button:focus-visible { position: relative; z-index: 1; border-radius: 12px; outline: 2px solid var(--mint); outline-offset: 3px; }
.commitment-item .commitment-status { display: inline-flex; width: max-content; max-width: 100%; margin-top: 3px; padding: 0; border: 0; color: var(--muted); background: transparent; font-size: .62rem; font-weight: 700; }
.commitment-item.paid .commitment-status { color: var(--cyan); }
.commitment-item.paused .commitment-status { color: var(--muted-dim); }
.commitment-item.overdue .commitment-status { color: var(--red); }
.commitment-item-arrow { display: inline-grid; width: 18px; height: 18px; flex: 0 0 auto; place-items: center; color: var(--muted-dim); }
.commitment-item-arrow svg { width: 14px; height: 14px; }
.commitment-item-button:hover .commitment-item-arrow { color: var(--mint); transform: translateX(2px); }
.commitment-empty { grid-column: 1 / -1; padding: 12px 0 3px; }

.recurring-view-intro .body-copy { max-width: 53ch; }
.recurring-view-intro > .primary-button { flex: 0 0 auto; }
.plan-view-tabs { display: flex; gap: 7px; align-items: stretch; margin: -2px 0 18px; padding: 5px; border: 1px solid rgba(158,231,165,.15); border-radius: 18px; background: rgba(5,24,15,.42); }
.plan-view-tab { position: relative; display: flex; min-width: 0; min-height: 58px; flex: 1; gap: 10px; align-items: center; padding: 8px 12px; border: 1px solid transparent; border-radius: 13px; color: var(--muted); background: transparent; font: inherit; text-align: left; cursor: pointer; transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s var(--ease-control); }
.plan-view-tab:hover { border-color: rgba(158,231,165,.12); color: var(--ink-soft); background: rgba(158,231,165,.05); transform: translateY(-1px); }
.plan-view-tab:active { transform: translateY(1px) scale(.99); }
.plan-view-tab:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; box-shadow: var(--focus-ring); }
.plan-view-tab.active { border-color: rgba(158,231,165,.24); color: var(--ink); background: linear-gradient(135deg, rgba(158,231,165,.14), rgba(158,231,165,.045)); box-shadow: inset 0 1px 0 rgba(255,255,255,.09); }
.plan-view-tab-icon { display: grid; width: 32px; height: 32px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(158,231,165,.14); border-radius: 11px; color: var(--muted); background: rgba(255,255,255,.025); }
.plan-view-tab-icon .icon { width: 17px; height: 17px; }
.plan-view-tab.active .plan-view-tab-icon { border-color: rgba(158,231,165,.32); color: var(--mint); background: rgba(158,231,165,.1); }
.plan-tab-copy { display: grid; min-width: 0; gap: 2px; }
.plan-tab-copy strong { color: inherit; font-size: .73rem; font-weight: 800; }
.plan-tab-copy small { overflow: hidden; color: var(--muted); font-size: .61rem; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.plan-tab-count { display: grid; min-width: 24px; height: 24px; margin-left: auto; flex: 0 0 auto; place-items: center; border: 1px solid rgba(158,231,165,.2); border-radius: 999px; color: var(--mint); background: rgba(158,231,165,.08); font-size: .62rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.recurring-summary-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); gap: 18px; }
.state-callout { display: flex; gap: 12px; align-items: center; margin-top: 18px; padding: 13px 15px; border: 1px solid rgba(255,132,123,.25); border-radius: 16px; color: var(--muted); background: rgba(255,132,123,.07); }
.state-callout[hidden] { display: none; }
.state-callout .feature-icon { flex: 0 0 auto; color: var(--red); border-color: rgba(255,132,123,.24); background: rgba(255,132,123,.1); }
.state-callout > div { display: grid; min-width: 0; gap: 3px; flex: 1; }
.state-callout strong { color: #ffe0da; font-size: .75rem; }
.state-callout > div > span { font-size: .65rem; line-height: 1.45; }
.state-callout > .text-button { flex: 0 0 auto; color: #ffb0a9; font-size: .66rem; }
.state-callout > .text-button:hover { color: #fff0ec; }
.recurring-balance-alert, .wallet-detail-alert { border-color: rgba(216,180,95,.28); background: rgba(216,180,95,.075); }
.recurring-balance-alert .feature-icon, .wallet-detail-alert .feature-icon { color: var(--gold); border-color: rgba(216,180,95,.28); background: rgba(216,180,95,.1); }
.recurring-balance-alert strong, .wallet-detail-alert strong { color: var(--gold-soft); }
.recurring-balance-alert > .text-button, .wallet-detail-alert > .text-button { color: var(--gold-soft); }
.recurring-balance-alert > .text-button:hover, .wallet-detail-alert > .text-button:hover { color: #fff9e9; }
.recurring-total-card, .recurring-next-card { min-width: 0; padding: 25px; }
.recurring-total-card { background: radial-gradient(circle at 86% 12%, rgba(158,231,165,.18), transparent 15rem), linear-gradient(145deg, rgba(38,91,55,.82), rgba(12,36,22,.88)); }
.recurring-total { display: block; margin-top: 28px; color: #f2fff0; font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3.3rem); letter-spacing: -.09em; line-height: 1; font-variant-numeric: tabular-nums; }
.recurring-total-card .body-copy { margin-top: 10px; }
.recurring-total-footer { display: flex; gap: 10px; align-items: center; margin-top: 28px; padding-top: 15px; border-top: 1px solid rgba(221,255,226,.13); color: var(--muted); font-size: .66rem; line-height: 1.45; }
.recurring-total-footer .feature-icon { flex: 0 0 auto; color: var(--mint); background: rgba(158,231,165,.11); }
.recurring-total-footer .feature-icon svg { width: 15px; height: 15px; }
.recurring-next-card { display: grid; align-content: start; background: linear-gradient(145deg, rgba(35,74,53,.74), rgba(15,38,27,.84)); }
.recurring-next-card-button { width: 100%; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: border-color .18s ease, background .18s ease, transform .18s var(--ease-control), box-shadow .18s ease; }
.recurring-next-card-button:hover { border-color: rgba(114,211,239,.3); background: linear-gradient(145deg, rgba(41,86,66,.82), rgba(15,38,27,.9)); transform: translateY(-1px); }
.recurring-next-card-button:active { transform: translateY(1px) scale(.995); background: linear-gradient(145deg, rgba(41,86,66,.9), rgba(15,38,27,.94)); }
.recurring-next-card-button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; box-shadow: 0 0 0 4px rgba(114,211,239,.12); }
.recurring-next-card-button:disabled { cursor: default; opacity: .72; transform: none; }
.recurring-next-card > .panel-heading > .feature-icon { flex: 0 0 auto; color: var(--cyan); background: rgba(114,211,239,.12); }
.recurring-next-card > .panel-heading > .feature-icon svg { width: 16px; height: 16px; }
.recurring-next-details { display: flex; gap: 15px; align-items: center; margin-top: 30px; }
.recurring-next-date { display: flex; width: 59px; height: 59px; flex: 0 0 auto; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border: 1px solid rgba(114,211,239,.24); border-radius: 16px 16px 18px 7px; color: var(--cyan); background: rgba(114,211,239,.09); line-height: 1; }
.recurring-next-date strong { color: inherit; font-family: var(--font-display); font-size: 1.22rem; font-weight: 800; letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.recurring-next-date small { margin-top: 0; color: var(--muted); font-family: var(--font-ui); font-size: .53rem; font-weight: 800; letter-spacing: .12em; line-height: 1; }
.recurring-next-details > div { min-width: 0; }
.recurring-next-details > div > strong, .recurring-next-details > div > span { display: block; }
.recurring-next-details > div > strong { color: var(--ink-soft); font-size: 1rem; font-variant-numeric: tabular-nums; }
.recurring-next-details > div > span { margin-top: 5px; color: var(--muted); font-size: .68rem; }
.recurring-next-card > .muted-copy { margin-top: 25px; }
.recurring-manager-panel { margin-top: 18px; padding: 25px; }
.recurring-toolbar { display: flex; gap: 15px; align-items: center; justify-content: space-between; margin-top: 21px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.recurring-filters { display: inline-flex; gap: 3px; max-width: 100%; overflow-x: auto; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: rgba(0,0,0,.15); }
.recurring-filter { display: inline-flex; gap: 5px; align-items: center; min-height: 40px; padding: 0 11px; border: 0; border-radius: 999px; color: var(--muted); background: transparent; font-size: .64rem; font-weight: 700; white-space: nowrap; }
.recurring-filter span { color: var(--muted-dim); font-size: .59rem; font-variant-numeric: tabular-nums; }
.recurring-filter:hover { color: var(--ink-soft); background: rgba(255,255,255,.06); }
.recurring-filter.active { color: #163822; background: var(--mint); }
.recurring-filter.active span { color: #315d3c; }
.recurring-list { display: grid; gap: 9px; margin-top: 15px; }
.recurring-manager-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 15px; align-items: center; padding: 13px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.035); transition: border-color .18s ease, background .18s ease, transform .18s var(--ease-control), box-shadow .18s ease; }
.recurring-manager-row:hover { border-color: rgba(158,231,165,.27); background: rgba(158,231,165,.045); transform: translateY(-1px); }
.recurring-manager-row.paused { opacity: .76; }
.recurring-row-main { display: grid; grid-template-columns: 57px minmax(0, 1fr); gap: 15px; align-items: center; min-width: 0; padding: 0; border: 0; border-radius: 10px; color: inherit; background: transparent; font: inherit; text-align: left; cursor: pointer; transition: transform .18s var(--ease-control), background .18s ease; }
.recurring-row-main:focus-visible { position: relative; z-index: 1; border-radius: 10px; outline: 2px solid var(--mint); outline-offset: 3px; }
.recurring-row-main:active { transform: translateY(1px) scale(.995); background: rgba(158,231,165,.07); }
.recurring-date-tile { display: flex; width: 57px; height: 57px; flex: 0 0 auto; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border: 1px solid rgba(158,231,165,.18); border-radius: 15px 15px 17px 7px; color: var(--mint); background: rgba(158,231,165,.08); line-height: 1; }
.recurring-date-tile strong { font-family: var(--font-display); font-size: 1.1rem; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.recurring-date-tile small { margin-top: 0; color: var(--muted); font-family: var(--font-ui); font-size: .52rem; font-weight: 800; letter-spacing: .12em; line-height: 1; }
.recurring-row-content { min-width: 0; }
.recurring-row-heading { display: flex; gap: 14px; align-items: start; justify-content: space-between; }
.recurring-row-heading > div { min-width: 0; }
.recurring-row-heading strong, .recurring-row-heading span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recurring-row-heading strong { color: var(--ink-soft); font-size: .8rem; font-weight: 700; }
.recurring-row-heading span { margin-top: 4px; color: var(--muted); font-size: .65rem; }
.recurring-row-trailing { display: inline-flex !important; gap: 8px; align-items: center; flex: 0 0 auto; }
.recurring-row-trailing > b { color: var(--ink-soft); font-size: .76rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.recurring-row-open { display: inline-grid !important; width: 17px; height: 17px; place-items: center; color: var(--muted-dim); }
.recurring-row-open svg { width: 15px; height: 15px; }
.recurring-row-main:hover .recurring-row-open { color: var(--mint); transform: translateX(2px); }
.recurring-row-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; color: var(--muted-dim); font-size: .61rem; }
.recurring-row-meta > span:not(.commitment-status) { padding-left: 8px; border-left: 1px solid var(--line); }
.commitment-status { display: inline-flex; min-height: 23px; align-items: center; padding: 0 8px; border: 1px solid rgba(158,231,165,.2); border-radius: 999px; color: var(--mint); background: rgba(158,231,165,.08); font-size: .6rem; font-weight: 800; }
.commitment-status.paid { color: var(--cyan); border-color: rgba(114,211,239,.22); background: rgba(114,211,239,.09); }
.commitment-status.partial { color: var(--gold-soft); border-color: rgba(216,180,95,.3); background: rgba(216,180,95,.1); }
.commitment-status.partial.overdue { color: #ffb0a9; border-color: rgba(255,132,123,.24); background: rgba(255,132,123,.08); }
.commitment-status.paused { color: var(--muted); border-color: rgba(155,181,162,.16); background: rgba(155,181,162,.06); }
.commitment-status.overdue { color: #ffb0a9; border-color: rgba(255,132,123,.24); background: rgba(255,132,123,.08); }
.recurring-row-actions { display: flex; gap: 7px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.recurring-row-actions .primary-button, .recurring-row-actions .secondary-button { min-height: 34px; padding: 0 11px; font-size: .66rem; }
.recurring-row-actions .icon { width: 13px; height: 13px; }
.recurring-row-detail-button { width: 34px; height: 34px; flex: 0 0 auto; }
.recurring-row-detail-button .icon { width: 15px; height: 15px; }
.recurring-row-link { min-height: 34px; padding: 0 7px; border-radius: 8px; color: var(--muted); font-size: .66rem; transition: transform .18s var(--ease-control), color .18s ease, background .18s ease, box-shadow .18s ease; }
.recurring-row-link:hover { color: var(--ink-soft); background: rgba(158,231,165,.07); transform: translateY(-1px); }
.recurring-row-link:active { transform: translateY(1px) scale(.98); background: rgba(158,231,165,.12); }
.recurring-row-link:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; box-shadow: var(--focus-ring); }
.recurring-row-link.recurring-remove-button:hover { color: var(--red); }
.recurring-empty { padding: 22px 0 8px; }
.recurring-remove-confirmation { display: flex; gap: 14px; align-items: center; justify-content: space-between; margin-top: 16px; padding: 14px; border: 1px solid rgba(255,132,123,.28); border-radius: 14px; background: rgba(255,132,123,.07); }
.recurring-remove-confirmation[hidden] { display: none; }
.recurring-remove-confirmation > div:first-child { min-width: 0; }
.recurring-remove-confirmation strong, .recurring-remove-confirmation span { display: block; }
.recurring-remove-confirmation strong { color: #ffe1dc; font-size: .75rem; }
.recurring-remove-confirmation span { margin-top: 4px; color: var(--muted); font-size: .65rem; line-height: 1.4; }
.recurring-editor-modal { width: min(100%, 520px); }
.recurring-detail-modal { width: min(100%, 520px); }
.recurring-detail-hero { display: flex; gap: 15px; align-items: center; margin: -3px 0 18px; padding: 15px; border: 1px solid rgba(114,211,239,.18); border-radius: 17px; background: linear-gradient(145deg, rgba(114,211,239,.1), rgba(255,255,255,.035)); }
.recurring-detail-date { display: flex; width: 62px; height: 62px; flex: 0 0 auto; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border: 1px solid rgba(114,211,239,.28); border-radius: 16px 16px 18px 7px; color: var(--cyan); background: rgba(114,211,239,.11); line-height: 1; }
.recurring-detail-date strong { font-family: var(--font-display); font-size: 1.3rem; font-weight: 800; letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.recurring-detail-date small { color: var(--muted); font-size: .54rem; font-weight: 800; letter-spacing: .12em; line-height: 1; }
.recurring-detail-hero-copy { display: grid; min-width: 0; gap: 6px; }
.recurring-detail-hero-copy .commitment-status { width: max-content; }
.recurring-detail-hero-copy > strong { color: var(--ink); font-family: var(--font-display); font-size: 1.8rem; letter-spacing: -.07em; line-height: 1; font-variant-numeric: tabular-nums; }
.recurring-detail-hero-copy > span:last-child { color: var(--muted); font-size: .68rem; line-height: 1.35; overflow-wrap: break-word; }
.recurring-detail-description { margin: 0; color: var(--muted); font-size: var(--text-body-compact); line-height: 1.55; overflow-wrap: break-word; }
.recurring-detail-meta { margin-top: 22px; }
.recurring-detail-meta dd { white-space: normal; }
.recurring-detail-meta > div:nth-child(3) dd { color: var(--cyan); }
.recurring-detail-context { display: flex; gap: 10px; align-items: center; margin-top: 20px; padding: 11px 12px; border: 1px solid rgba(198,155,239,.18); border-radius: 14px; background: rgba(198,155,239,.06); }
.recurring-detail-context > .feature-icon { flex: 0 0 auto; color: var(--lilac); background: rgba(198,155,239,.1); }
.recurring-detail-context-copy { display: grid; min-width: 0; gap: 3px; }
.recurring-detail-context-copy > span { color: var(--muted-dim); font-size: .57rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.recurring-detail-flow { display: flex; min-width: 0; gap: 6px; align-items: center; }
.recurring-detail-flow strong { overflow: hidden; color: var(--ink-soft); font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.recurring-detail-flow-arrow { display: inline-grid; width: 14px; height: 14px; flex: 0 0 auto; place-items: center; color: var(--lilac); }
.recurring-detail-flow-arrow svg { width: 13px; height: 13px; }
.recurring-detail-flow-copy { overflow: hidden; color: var(--muted); font-size: .61rem; text-overflow: ellipsis; white-space: nowrap; }
.recurring-detail-context-actions { display: flex; gap: 8px; align-items: center; flex: 0 0 auto; margin-left: auto; }
.recurring-detail-context-actions .text-button { margin-left: 0; font-size: .64rem; white-space: nowrap; }
.recurring-reconciliation { display: grid; gap: 9px; margin-top: 18px; padding: 13px 14px; border: 1px solid rgba(119,217,160,.17); border-radius: 15px; background: rgba(119,217,160,.055); }
.recurring-reconciliation-heading { display: flex; gap: 12px; align-items: center; justify-content: space-between; }
.recurring-reconciliation-heading > div { display: grid; min-width: 0; gap: 3px; }
.recurring-reconciliation-heading .stat-label { color: var(--muted-dim); }
.recurring-reconciliation-heading strong { color: var(--ink-soft); font-size: .72rem; }
.recurring-reconciliation-heading .commitment-status { flex: 0 0 auto; }
.recurring-reconciliation-track { height: 6px; margin: 0; background: rgba(119,217,160,.12); }
.recurring-reconciliation-track[hidden] { display: none; }
.recurring-reconciliation-track > span { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--mint-strong), var(--cyan)); box-shadow: 0 0 12px rgba(119,217,160,.22); transform: scaleX(0); transform-origin: left center; transition: transform .35s var(--ease-control); }
.recurring-reconciliation > p { margin: 0; color: var(--muted); font-size: .62rem; line-height: 1.45; overflow-wrap: break-word; }
.recurring-detail-actions { align-items: stretch; }
.recurring-detail-actions .secondary-button { min-width: 0; }
.recurring-detail-actions .recurring-detail-more { flex: 0 0 auto; }
.recurring-detail-menu { display: flex; gap: 14px; justify-content: flex-end; margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line); }
.recurring-detail-menu[hidden] { display: none; }
.recurring-detail-menu .text-button { color: var(--muted); font-size: .68rem; }
.recurring-detail-menu .text-button:hover { color: var(--ink-soft); }
.recurring-detail-menu .recurring-remove-button:hover { color: var(--red); }

.primary-button, .secondary-button { display: inline-flex; gap: 8px; align-items: center; justify-content: center; min-height: 40px; padding: 0 15px; border: 1px solid rgba(196,245,187,.42); border-radius: 12px; color: #11331d; background: linear-gradient(145deg, #b9eea5, #76d996); box-shadow: 0 9px 22px rgba(93,189,101,.16), inset 0 1px 0 rgba(255,255,255,.45); font-size: .75rem; font-weight: 800; transition: transform .18s var(--ease-control), filter .18s ease, color .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease; }
.primary-button:hover { filter: brightness(1.06); transform: translateY(-1px); }
.primary-button:active { filter: brightness(.98); transform: translateY(1px) scale(.985); box-shadow: 0 5px 13px rgba(93,189,101,.13), inset 0 1px 0 rgba(255,255,255,.36); }
.secondary-button { color: var(--ink-soft); border-color: var(--line-strong); background: rgba(255,255,255,.05); box-shadow: none; }
.secondary-button:hover { background: rgba(255,255,255,.1); transform: translateY(-1px); }
.secondary-button:active { transform: translateY(1px) scale(.985); background: rgba(255,255,255,.14); }
.primary-button:focus-visible, .secondary-button:focus-visible { box-shadow: var(--focus-ring); }
.body-copy { max-width: 56ch; margin: 9px 0 0; color: var(--muted); font-size: var(--text-body); line-height: 1.58; overflow-wrap: break-word; }

.plan-hero { display: flex; justify-content: space-between; align-items: center; gap: 30px; padding: 29px; }
.plan-hero > div:first-child { min-width: 0; flex: 1; }
.plan-hero h3 { margin: 4px 0 0; font-family: var(--font-display); font-size: clamp(1.35rem, 2.4vw, 2rem); letter-spacing: -.06em; }
.plan-hero.is-over { border-color: rgba(255,132,123,.26); background: linear-gradient(145deg, rgba(79,58,48,.76), rgba(35,27,22,.86)); }
.plan-status-row { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; margin: 13px 0 0; }
.plan-status-row .muted-copy { font-size: .65rem; }
.plan-figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 22px; }
.plan-figures > div { min-width: 0; }
.plan-figures strong.plan-reserved-value { color: var(--cyan); }
.plan-figures strong.negative { color: var(--red); }
.plan-commitment-summary { display: flex; gap: 11px; align-items: center; width: 100%; margin-top: 18px; padding: 13px 0 0; border: 0; border-top: 1px solid rgba(158,231,165,.15); color: var(--ink-soft); background: transparent; font: inherit; text-align: left; cursor: pointer; transition: color .18s ease, transform .18s var(--ease-control); }
.plan-commitment-summary:hover { color: var(--ink); transform: translateY(-1px); }
.plan-commitment-summary:focus-visible { border-radius: 10px; outline: 2px solid var(--mint); outline-offset: 4px; box-shadow: var(--focus-ring); }
.plan-commitment-summary-copy { flex: 1; }
.plan-commitment-summary-copy strong { font-size: .72rem; }
.plan-commitment-summary-copy small { font-size: .62rem; }
.large-arc { width: 190px; height: 108px; flex: 0 0 auto; }
.plan-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(260px, .6fr); gap: 18px; margin-top: 18px; }
.category-panel, .plan-note { padding: 25px; }
.category-bars { display: grid; gap: 25px; margin-top: 20px; }
.category-bar-row { display: block; width: 100%; padding: 0; border: 0; color: inherit; background: transparent; font: inherit; text-align: left; }
.category-bar-button { cursor: pointer; border-radius: 12px; transition: background .18s ease, transform .18s ease; }
.category-bar-button:hover { padding: 9px 10px 10px; margin: -9px -10px -10px; background: rgba(158,231,165,.055); transform: translateY(-1px); }
.category-bar-button:focus-visible { position: relative; z-index: 1; padding: 9px 10px 10px; margin: -9px -10px -10px; outline: 2px solid var(--mint); outline-offset: 2px; }
.category-bar-button.is-selected { padding: 12px 12px 13px; margin: -12px -12px -13px; border: 1px solid rgba(158,231,165,.2); background: rgba(158,231,165,.075); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.category-bar-button.is-selected .category-label strong { color: var(--ink); }
.category-label { justify-content: flex-start; }
.category-label > div { min-width: 0; flex: 1; }
.category-label strong, .category-label small { display: block; }
.category-label strong { color: var(--ink-soft); font-size: .82rem; }
.category-label small { margin-top: 3px; color: var(--muted); font-size: .66rem; line-height: 1.35; }
.category-label b { color: var(--ink-soft); font-size: .75rem; font-variant-numeric: tabular-nums; }
.category-label-trailing { display: inline-flex; gap: 10px; align-items: center; margin-left: auto; }
.category-bar-button.is-committed-over .category-label b { color: var(--red); }
.category-row-arrow { display: inline-grid; width: 17px; height: 17px; place-items: center; color: var(--muted-dim); transition: color .18s ease, transform .18s ease; }
.category-row-arrow svg { width: 15px; height: 15px; }
.category-bar-button:hover .category-row-arrow, .category-bar-button.is-selected .category-row-arrow { color: var(--mint); transform: translateX(2px); }
.category-progress-track { position: relative; }
.category-progress-track > span { position: absolute; top: 0; bottom: 0; height: auto; }
.category-progress-track .category-progress-spent { left: 0; }
.category-progress-track .category-progress-reserved { background: var(--cyan); box-shadow: 0 0 12px rgba(114,211,239,.16); }
.category-progress-track.is-committed-over .category-progress-reserved { background: var(--red); box-shadow: 0 0 12px rgba(255,132,123,.16); }
.plan-bar-key { display: flex; gap: 14px; align-items: center; margin-top: 17px; color: var(--muted); font-size: .62rem; }
.plan-bar-key span { display: inline-flex; gap: 6px; align-items: center; }
.plan-bar-key-swatch { display: inline-block; width: 10px; height: 5px; border-radius: 99px; background: var(--mint-strong); }
.plan-bar-key-swatch.reserved { background: var(--cyan); }
.category-dot, .legend-dot { display: inline-block; width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; }
.category-dot.housing, .legend-dot.housing { background: var(--orange); }
.category-dot.food, .legend-dot.food { background: var(--mint-strong); }
.category-dot.transport, .legend-dot.transport { background: var(--cyan); }
.category-dot.fun, .legend-dot.fun { background: var(--lilac); }
.legend-dot.groceries { background: #ecdd6d; }
.legend-dot.utilities { background: #ee8ed1; }
.plan-note { display: flex; flex-direction: column; justify-content: center; background: linear-gradient(145deg, rgba(112,183,96,.24), rgba(16,49,31,.72)); }
.feature-icon { display: inline-grid; width: 40px; height: 40px; place-items: center; border: 1px solid rgba(194,243,171,.22); border-radius: 15px; color: var(--mint); background: rgba(158,231,165,.1); box-shadow: 0 8px 20px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.1); }
.feature-icon.small { width: 30px; height: 30px; border-radius: 11px; color: var(--orange); }
.feature-icon svg { width: 20px; height: 20px; }
.plan-note h3 { margin: 21px 0 0; font-family: var(--font-display); font-size: 1.34rem; letter-spacing: -.06em; }
.plan-note-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 23px; }
.plan-note-actions .secondary-button { margin-top: 0; }
.plan-note-actions .text-button { min-height: 40px; padding: 0 3px; }
.plan-category-detail { display: grid; gap: 21px; margin-top: 18px; padding: 25px; border-color: rgba(158,231,165,.22); background: linear-gradient(145deg, rgba(48,98,63,.62), rgba(12,37,23,.88)); }
.plan-category-detail[hidden] { display: none; }
.category-detail-top { display: flex; justify-content: space-between; gap: 18px; align-items: start; }
.category-detail-title { display: flex; gap: 11px; align-items: center; }
.category-detail-title h3 { margin: 4px 0 0; color: var(--ink); font-family: var(--font-display); font-size: 1.55rem; letter-spacing: -.07em; }
.category-detail-dot { display: inline-block; width: 12px; height: 12px; flex: 0 0 auto; border-radius: 50%; box-shadow: 0 0 0 5px rgba(255,255,255,.05); }
.category-detail-status { display: flex; justify-content: space-between; gap: 14px; align-items: center; }
.budget-status { display: inline-flex; min-height: 26px; align-items: center; padding: 0 9px; border: 1px solid rgba(158,231,165,.22); border-radius: 999px; color: var(--mint); background: rgba(158,231,165,.08); font-size: .63rem; font-weight: 800; }
.budget-status.over { color: #ffc0b8; border-color: rgba(255,132,123,.28); background: rgba(255,132,123,.1); }
.budget-status.neutral { color: var(--muted); border-color: rgba(155,181,162,.2); background: rgba(155,181,162,.07); }
.budget-empty-state { padding: 18px 0 4px; }
.budget-empty-state .secondary-button { margin-top: 4px; }
.category-detail-progress { margin-top: -6px; }
.category-detail-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.category-detail-metrics > div { padding-top: 13px; border-top: 1px solid rgba(221,255,226,.1); }
.category-detail-metrics strong { display: block; margin-top: 5px; color: var(--ink-soft); font-size: .84rem; font-variant-numeric: tabular-nums; }
.category-detail-metrics strong.category-detail-reserved-value { color: var(--cyan); }
.category-detail-metrics strong.negative { color: var(--red); }
.category-detail-reserve { padding-top: 19px; border-top: 1px solid rgba(221,255,226,.1); }
.category-detail-section-heading { display: flex; justify-content: space-between; gap: 16px; align-items: end; }
.category-detail-section-heading h4 { margin: 4px 0 0; color: var(--ink-soft); font-size: .88rem; }
.category-detail-section-meta { display: flex; gap: 12px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.category-detail-section-meta .muted-copy { max-width: 27ch; text-align: right; }
.category-detail-section-meta .text-button { padding: 3px 0; color: var(--muted); font-size: .66rem; }
.category-detail-section-meta .text-button:hover { color: var(--ink-soft); }
.category-commitment-list { display: grid; gap: 0; margin-top: 12px; }
.category-commitment-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; padding: 10px 0; border: 0; border-top: 1px solid rgba(221,255,226,.08); color: inherit; background: transparent; font: inherit; text-align: left; }
.category-commitment-row:first-child { padding-top: 0; border-top: 0; }
.category-commitment-button { cursor: pointer; transition: background .18s ease, transform .18s ease; }
.category-commitment-button:hover { border-radius: 11px; background: rgba(158,231,165,.055); transform: translateX(2px); }
.category-commitment-button:focus-visible { position: relative; z-index: 1; border-radius: 11px; outline: 2px solid var(--mint); outline-offset: 3px; }
.category-commitment-date { display: flex; width: 40px; height: 40px; flex: 0 0 auto; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 1px solid rgba(114,211,239,.2); border-radius: 11px 11px 12px 6px; color: var(--cyan); background: rgba(114,211,239,.08); line-height: 1; }
.category-commitment-date strong { font-family: var(--font-display); font-size: .82rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.category-commitment-date small { color: var(--muted); font-size: .44rem; font-weight: 800; letter-spacing: .1em; line-height: 1; }
.category-commitment-row > div { min-width: 0; }
.category-commitment-row > div > strong, .category-commitment-row > div > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.category-commitment-row > div > strong { color: var(--ink-soft); font-size: .72rem; }
.category-commitment-row > div > span { margin-top: 3px; color: var(--muted); font-size: .61rem; }
.category-commitment-trailing { display: inline-flex; gap: 8px; align-items: center; }
.category-commitment-row b { color: var(--ink-soft); font-size: .7rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.category-commitment-trailing .category-row-arrow { width: 16px; height: 16px; }
.category-commitment-trailing .category-row-arrow svg { width: 14px; height: 14px; }
.category-commitment-button:hover .category-row-arrow { color: var(--mint); transform: translateX(2px); }
.category-commitment-empty { padding: 10px 0 2px; }
.category-detail-body { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(220px, .65fr); gap: 20px; padding-top: 19px; border-top: 1px solid rgba(221,255,226,.1); }
.category-detail-transactions { min-width: 0; }
.category-detail-transactions h4, .category-detail-actions h4 { margin: 4px 0 0; color: var(--ink-soft); font-size: .88rem; }
.category-detail-list { max-height: 286px; margin-top: 10px; overflow: auto; padding-right: 4px; }
.category-detail-empty { margin: 10px 0 0; padding: 17px 0 3px; border-top: 0; background: transparent; }
.category-detail-actions { display: grid; align-content: start; gap: 11px; padding: 17px; border: 1px solid rgba(158,231,165,.13); border-radius: 17px; background: rgba(4,19,11,.26); }
.category-detail-actions .feature-icon { width: 32px; height: 32px; border-radius: 11px; }
.category-detail-actions .feature-icon svg { width: 17px; height: 17px; }
.category-detail-actions p { margin: 0; color: var(--muted); font-size: .7rem; line-height: 1.5; }
.category-detail-actions .primary-button, .category-detail-actions .secondary-button { width: 100%; }
.category-detail-actions .text-button { justify-content: flex-start; padding: 4px 0; }

.filter-row { display: flex; gap: 8px; flex-wrap: wrap; margin: -1px 0 18px; }
.filter-chip { display: inline-flex; gap: 6px; align-items: center; min-height: 34px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: rgba(255,255,255,.04); font-size: .7rem; }
.filter-chip:hover, .filter-chip.active { color: var(--ink); border-color: rgba(158,231,165,.28); background: rgba(158,231,165,.11); }
.filter-search { display: inline-flex; gap: 7px; align-items: center; min-height: 34px; margin-left: auto; padding: 0 11px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: rgba(255,255,255,.04); }
.filter-search:focus-within { border-color: rgba(158,231,165,.42); background: rgba(158,231,165,.08); }
.filter-search input { width: 122px; padding: 0; border: 0; outline: 0; color: var(--ink); background: transparent; font: inherit; font-size: .7rem; }
.filter-search input::placeholder { color: var(--muted); }
.full-activity-panel { padding: 23px 26px; }
.list-date-heading { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: .7rem; }
.list-date-heading strong { color: var(--ink-soft); font-weight: 600; font-variant-numeric: tabular-nums; }
.full-activity-panel .transaction-list { margin: 6px 0 24px; }
.empty-state { display: grid; gap: 7px; justify-items: start; padding: 24px 0 12px; color: var(--muted); font-size: .72rem; }
.empty-state[hidden] { display: none; }
.empty-state strong { color: var(--ink-soft); font-size: .82rem; }
.empty-state .secondary-button { margin-top: 4px; }
.overview-activity-empty { padding-top: 20px; }
.insights-empty { margin-top: 20px; padding: 18px 0 4px; }

.segmented-control { display: inline-grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: rgba(0,0,0,.18); }
.segmented-control button, .toggle-pills button { min-height: 29px; padding: 0 15px; border: 0; border-radius: 999px; color: var(--muted); background: transparent; font-size: .68rem; font-weight: 700; }
.segmented-control button.active, .toggle-pills button.active { color: #163822; background: var(--mint); }
.segment-count { display: inline-grid; min-width: 17px; height: 17px; margin-left: 3px; place-items: center; border-radius: 999px; color: currentColor; background: rgba(0,0,0,.12); font-size: .56rem; font-variant-numeric: tabular-nums; }
.goals-summary { display: grid; grid-template-columns: 1fr auto; gap: 22px 35px; padding: 25px; margin-top: 18px; }
.goal-summary-stats { display: flex; gap: 25px; }
.goal-summary-stats strong { display: block; margin-top: 5px; color: var(--ink-soft); font-size: .93rem; font-variant-numeric: tabular-nums; }
.overall-progress { grid-column: 1 / -1; }
.overall-progress > div:first-child { color: var(--muted); font-size: .7rem; }
.overall-progress b { color: var(--mint); }
.streak-row { display: flex; gap: 12px; align-items: center; margin-top: 12px; padding: 12px 15px; border-radius: 15px; background: rgba(158,231,165,.07); }
.streak-row div { flex: 1; }
.streak-row strong, .streak-row > div > span { display: block; }
.streak-row > .feature-icon, .streak-row > .icon { display: inline-grid; flex: 0 0 auto; }
.streak-row strong { color: var(--ink-soft); font-size: .75rem; }
.streak-row div span { margin-top: 2px; color: var(--muted); font-size: .65rem; }
.streak-row > .icon { color: var(--muted); }
.goal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-top: 18px; }
.goal-card { position: relative; overflow: hidden; padding: 20px; background: linear-gradient(145deg, rgba(34,73,51,.7), rgba(15,37,26,.84)); }
.goal-card::before { position: absolute; top: 0; right: 20px; left: 20px; height: 2px; border-radius: 0 0 99px 99px; background: var(--goal-accent, var(--mint)); content: ''; opacity: .72; }
.goal-card-top { display: flex; justify-content: space-between; align-items: start; }
.goal-card-top > b { color: var(--mint); font-size: .73rem; }
.goal-badge { display: inline-grid; width: 31px; height: 31px; place-items: center; border-radius: 10px; color: var(--orange); background: rgba(243,165,82,.13); box-shadow: 0 6px 16px rgba(0,0,0,.13), inset 0 1px 0 rgba(255,255,255,.1); }
.goal-badge svg { width: 17px; height: 17px; }
.goal-badge-mint { color: var(--mint); background: rgba(119,217,160,.13); }
.goal-badge-orange { color: var(--orange); background: rgba(245,163,78,.13); }
.goal-badge-cyan { color: var(--cyan); background: rgba(111,209,239,.13); }
.goal-badge-lilac { color: var(--lilac); background: rgba(196,147,237,.13); }
.goal-badge-pink { color: var(--pink, #ee8ed1); background: rgba(238,142,209,.13); }
.goal-badge-yellow { color: var(--yellow, #ecdd6d); background: rgba(236,221,109,.13); }
.goal-card-top-right { display: flex; gap: 8px; align-items: center; }
.goal-status { display: inline-flex; min-height: 24px; align-items: center; padding: 0 8px; border: 1px solid rgba(221,255,226,.13); border-radius: 999px; color: var(--goal-accent, var(--mint)); background: rgba(255,255,255,.035); font-size: .58rem; font-weight: 800; }
.goal-status-completed { color: var(--mint); border-color: rgba(119,217,160,.28); background: rgba(119,217,160,.08); }
.goal-status-archived { color: var(--muted); border-color: rgba(155,181,162,.18); background: rgba(155,181,162,.06); }
.goal-card-actions { display: flex; gap: 3px; }
.goal-card-action { width: 29px; height: 29px; min-height: 29px; padding: 0; border-radius: 9px; }
.goal-card-action .icon { width: 14px; height: 14px; }
.goal-card-delete:hover { color: var(--red); }
.goal-card h3 { margin: 18px 0 0; font-family: var(--font-display); font-size: 1rem; letter-spacing: -.04em; }
.goal-card-progress-label { display: flex; gap: 10px; align-items: baseline; justify-content: space-between; margin-top: 8px; }
.goal-card-progress-label p { margin: 0; color: var(--muted); font-size: .7rem; font-variant-numeric: tabular-nums; }
.goal-card-progress-label strong { color: var(--ink-soft); }
.goal-card-progress-label > span { color: var(--goal-accent, var(--mint)); font-size: .68rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.goal-card .progress-track { margin-top: 10px; }
.goal-card-footer { display: flex; justify-content: space-between; gap: 10px; margin-top: 14px; color: var(--muted-dim); font-size: .63rem; }
.goal-card-footer span:last-child { color: var(--muted); font-variant-numeric: tabular-nums; }
.goal-contribute-button { display: flex; width: 100%; min-height: 35px; gap: 8px; align-items: center; margin-top: 15px; padding: 0 10px; border: 1px solid rgba(158,231,165,.22); border-radius: 11px; color: var(--mint); background: rgba(119,217,160,.07); font-size: .63rem; font-weight: 750; text-align: left; transition: background .18s ease, border-color .18s ease, transform .18s var(--ease-control); }
.goal-contribute-button:hover { border-color: rgba(158,231,165,.42); background: rgba(119,217,160,.13); transform: translateY(-1px); }
.goal-contribute-button:active { transform: translateY(1px) scale(.99); }
.goal-contribute-button:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
.goal-contribute-button > .icon:first-child { display: inline-grid; width: 17px; height: 17px; place-items: center; padding: 3px; border-radius: 6px; background: rgba(119,217,160,.14); }
.goal-contribute-button > span:nth-child(2) { min-width: 0; }
.goal-contribute-button .goal-contribute-arrow { width: 13px; height: 13px; margin-left: auto; color: var(--muted); }
.goal-card-completed { opacity: .88; }
.goal-card-archived { opacity: .7; }
.goal-delete-confirmation { display: flex; gap: 12px; align-items: center; justify-content: space-between; margin: 17px -4px -4px; padding: 11px; border: 1px solid rgba(255,132,123,.25); border-radius: 13px; background: rgba(255,132,123,.07); }
.goal-delete-confirmation > div:first-child { min-width: 0; }
.goal-delete-confirmation strong, .goal-delete-confirmation span { display: block; }
.goal-delete-confirmation strong { color: #ffe1dc; font-size: .68rem; }
.goal-delete-confirmation span { margin-top: 3px; color: var(--muted); font-size: .59rem; line-height: 1.35; }
.goal-delete-confirmation .confirmation-actions { gap: 5px; }
.goal-delete-confirmation .confirmation-actions button { min-height: 30px; padding: 0 8px; font-size: .6rem; }
.goals-empty-state { margin-top: 18px; padding: 24px 0 10px; border-top: 1px dashed rgba(221,255,226,.16); }
.goals-empty-state .feature-icon { color: var(--lilac); background: rgba(196,147,237,.1); }
.goals-empty-state strong { color: var(--ink-soft); }
.goal-editor-modal { max-height: min(760px, calc(100vh - 40px)); overflow-y: auto; }
.goal-editor-modal .amount-field > div { border-radius: 13px; }
.goal-editor-modal .amount-field input { min-height: 54px; font-size: 1.35rem; }
.goal-editor-modal .amount-field > div > span { padding-left: 10px; font-size: .75rem; }
.optional-label { color: var(--muted-dim); font-size: .58rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }
.inline-money-input { display: flex; min-height: 44px; align-items: center; border: 1px solid var(--line); border-radius: 12px; background: rgba(3,18,10,.38); }
.inline-money-input > span { padding-left: 12px; color: var(--mint); font-size: .72rem; font-weight: 700; }
.inline-money-input input { min-height: 42px !important; padding-left: 7px !important; border: 0 !important; background: transparent !important; }

.month-arrows { display: flex; gap: 9px; align-items: center; color: var(--muted); font-size: .72rem; }
.insights-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 18px; }
.net-worth-card, .distribution-card, .flow-card { padding: 25px; }
.trend-pill { display: inline-flex; gap: 4px; align-items: center; min-height: 26px; padding: 0 8px; border-radius: 999px; font-size: .63rem; font-weight: 700; }
.trend-pill.positive { color: var(--mint); background: rgba(158,231,165,.1); }
.trend-pill.negative { color: #ffc0b8; background: rgba(255,132,123,.1); }
.trend-pill.neutral { color: var(--muted); background: rgba(155,181,162,.1); }
.trend-pill .icon { width: 12px; height: 12px; }
.net-worth-value { display: block; margin-top: 29px; color: #f2fff0; font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3.4rem); letter-spacing: -.09em; font-variant-numeric: tabular-nums; }
.muted-copy { display: block; color: var(--muted); font-size: .68rem; }
.kpi-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 34px; padding-top: 16px; border-top: 1px solid var(--line); }
.kpi-row strong { display: block; margin-top: 4px; color: var(--ink-soft); font-size: .82rem; font-variant-numeric: tabular-nums; }
.toggle-pills { display: flex; gap: 3px; padding: 3px; border-radius: 999px; background: rgba(0,0,0,.17); }
.toggle-pills button { min-height: 25px; padding: 0 9px; font-size: .59rem; }
.distribution-content { display: flex; gap: 20px; align-items: center; margin-top: 25px; }
.distribution-content[hidden], .bar-chart[hidden], .chart-legend[hidden] { display: none; }
.donut-chart { display: grid; width: 146px; height: 146px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: conic-gradient(var(--orange) 0 54%, var(--mint-strong) 54% 77%, #ecdd6d 77% 85%, #ee8ed1 85% 91%, var(--lilac) 91% 96%, var(--cyan) 96% 100%); }
.donut-chart > div { display: flex; width: 91px; height: 91px; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%; background: #193827; }
.donut-chart strong { font-family: var(--font-display); font-size: 1.1rem; letter-spacing: -.06em; }
.donut-chart span { color: var(--muted); font-size: .62rem; }
.legend-list { display: grid; gap: 8px; width: 100%; margin: 0; padding: 0; list-style: none; color: var(--muted); font-size: .68rem; }
.legend-list li { display: grid; grid-template-columns: 10px 1fr auto; gap: 7px; align-items: center; }
.legend-list b { color: var(--ink-soft); font-weight: 600; }
.flow-card { margin-top: 18px; }
.bar-chart { display: flex; align-items: end; justify-content: space-around; height: 210px; margin-top: 28px; padding: 0 20px 6px; border-bottom: 1px solid var(--line); background: repeating-linear-gradient(to top, transparent 0, transparent 49px, rgba(220,255,226,.055) 50px); }
.bar-group { display: flex; height: 100%; flex-direction: column; justify-content: end; align-items: center; gap: 9px; }
.bars { display: flex; gap: 4px; align-items: end; height: 175px; }
.bars i { display: block; width: 11px; min-height: 8px; border-radius: 7px 7px 2px 2px; box-shadow: 0 5px 14px rgba(0,0,0,.16); }
.bars i.is-zero { min-height: 0; height: 0 !important; }
.bars i.income { background: linear-gradient(to top, #56bd75, #a0e2a3); }
.bars i.expense-bar { background: linear-gradient(to top, #b85450, #ff8976); }
.bar-group.current .bars i { box-shadow: 0 0 18px rgba(158,231,165,.25); }
.bar-group small { color: var(--muted); font-size: .63rem; }
.chart-legend { display: flex; gap: 18px; margin-top: 15px; color: var(--muted); font-size: .66rem; }
.chart-legend span { display: inline-flex; gap: 6px; align-items: center; }
.legend-swatch { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.legend-swatch.income { background: var(--mint-strong); }
.legend-swatch.expense-bar { background: var(--red); }

.amount-transfer-icon { display: inline-grid; width: 13px; height: 13px; vertical-align: -2px; }
.amount-transfer-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.9; }
.back-button { display: inline-flex; gap: 4px; align-items: center; padding: 0; border: 0; color: var(--mint); background: transparent; font-size: .72rem; font-weight: 700; }
.back-button:hover { color: var(--ink); }
.back-button .icon { width: 15px; height: 15px; }
.wallet-detail-intro { align-items: end; }
.wallet-detail-intro-tools { display: grid; gap: 11px; justify-items: end; }
.wallet-detail-intro-tools .month-picker { justify-content: flex-end; }
.wallet-detail-intro .body-copy { margin-top: 10px; }
.wallet-detail-actions { position: relative; display: flex; gap: 9px; flex-wrap: wrap; justify-content: end; }
.wallet-transaction-picker { position: absolute; top: calc(100% + 12px); right: 0; z-index: 30; width: min(330px, calc(100vw - 40px)); padding: 15px; border: 1px solid var(--line-strong); border-radius: 18px; background: linear-gradient(150deg, rgba(33,76,50,.98), rgba(10,30,20,.99)); box-shadow: 0 24px 65px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.12); animation: wallet-picker-in .24s cubic-bezier(.16,1,.3,1) both; }
.wallet-transaction-picker[hidden] { display: none; }
@keyframes wallet-picker-in { from { opacity: 0; transform: translateY(-6px) scale(.98); filter: blur(3px); } to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } }
.wallet-transaction-picker-heading { display: flex; gap: 14px; align-items: start; justify-content: space-between; }
.wallet-transaction-picker-heading > div { min-width: 0; }
.wallet-transaction-picker-heading strong, .wallet-transaction-picker-heading span { display: block; }
.wallet-transaction-picker-heading strong { color: var(--ink-soft); font-size: .82rem; }
.wallet-transaction-picker-heading span { margin-top: 4px; color: var(--muted); font-size: .65rem; line-height: 1.45; }
.wallet-transaction-picker-heading b { color: var(--ink-soft); font-weight: 700; }
.wallet-transaction-picker-heading .icon-button { width: 40px; height: 40px; flex: 0 0 auto; }
.wallet-transaction-options { display: grid; gap: 7px; margin-top: 13px; }
.wallet-transaction-option { display: flex; width: 100%; gap: 10px; align-items: center; padding: 10px; border: 1px solid rgba(221,255,226,.12); border-radius: 13px; color: var(--ink-soft); background: rgba(255,255,255,.045); text-align: left; transition: transform .18s var(--ease-control), border-color .18s ease, background .18s ease, box-shadow .18s ease; }
.wallet-transaction-option:hover { border-color: rgba(158,231,165,.42); background: rgba(158,231,165,.1); transform: translateX(2px); }
.wallet-transaction-option:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; box-shadow: var(--focus-ring); }
.wallet-transaction-option:active { border-color: rgba(158,231,165,.52); background: rgba(158,231,165,.15); transform: translateY(1px) scale(.99); }
.wallet-transaction-option-icon { display: inline-grid; width: 31px; height: 31px; flex: 0 0 auto; place-items: center; border: 1px solid currentColor; border-radius: 10px; background: rgba(255,255,255,.06); box-shadow: 0 6px 16px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.1); transition: transform .2s ease, background .2s ease, box-shadow .2s ease; }
.wallet-transaction-option-icon .icon { width: 16px; height: 16px; }
.wallet-transaction-option.expense .wallet-transaction-option-icon { color: var(--orange); }
.wallet-transaction-option.income .wallet-transaction-option-icon { color: var(--mint); }
.wallet-transaction-option.transfer .wallet-transaction-option-icon { color: var(--cyan); }
.wallet-transaction-option:hover .wallet-transaction-option-icon { transform: scale(1.05); background: rgba(255,255,255,.1); box-shadow: 0 8px 19px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.14); }
.wallet-transaction-option-copy { display: grid; min-width: 0; gap: 2px; }
.wallet-transaction-option-copy strong { color: var(--ink-soft); font-size: .72rem; }
.wallet-transaction-option-copy small { color: var(--muted); font-size: .62rem; }
.wallet-transaction-option-arrow { width: 14px; height: 14px; margin-left: auto; color: var(--muted-dim); }
.wallet-detail-hero { position: relative; display: flex; justify-content: space-between; gap: 28px; min-height: 245px; padding: 30px; overflow: hidden; border: 1px solid rgba(255,255,255,.18); border-radius: var(--radius-xl); box-shadow: 0 24px 65px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.2); }
.wallet-detail-hero::after { position: absolute; right: -72px; bottom: -150px; width: 330px; height: 330px; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; box-shadow: 0 0 0 24px rgba(255,255,255,.035), 0 0 0 52px rgba(255,255,255,.025); content: ''; }
.wallet-surface-daily { color: #efffee; background: radial-gradient(circle at 82% 14%, rgba(228,255,170,.23), transparent 16rem), linear-gradient(140deg, #63b96d, #2f7d4f 55%, #1f573d); }
.wallet-surface-savings { color: #fff8ed; background: radial-gradient(circle at 82% 12%, rgba(255,244,164,.25), transparent 15rem), linear-gradient(140deg, #c894e7, #8758aa 56%, #4b356c); }
.wallet-surface-cash { color: #f0ffff; background: radial-gradient(circle at 82% 12%, rgba(128,240,223,.22), transparent 15rem), linear-gradient(140deg, #5b9996, #2d686b 56%, #1e424b); }
.wallet-surface-atlas { color: #effcff; background: radial-gradient(circle at 82% 12%, rgba(116,224,255,.25), transparent 15rem), linear-gradient(140deg, #2f9bb8, #1b5e7a 56%, #17384e); }
.wallet-detail-hero-copy, .wallet-detail-hero-side { position: relative; z-index: 1; }
.wallet-detail-hero-copy { display: flex; min-width: 0; flex-direction: column; justify-content: space-between; }
.wallet-detail-account-top { display: flex; gap: 12px; align-items: center; }
.wallet-detail-icon { display: inline-grid; width: 45px; height: 45px; place-items: center; border: 1px solid rgba(255,255,255,.28); border-radius: 15px; color: currentColor; background: rgba(255,255,255,.14); }
.wallet-detail-icon .icon { width: 21px; height: 21px; }
.wallet-detail-type { color: rgba(255,255,255,.72); font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.wallet-detail-hero-copy .eyebrow { margin-top: 34px; color: rgba(255,255,255,.7); }
.wallet-detail-hero-copy > strong { display: block; margin-top: 5px; font-family: var(--font-display); font-size: clamp(2.5rem, 5vw, 4.4rem); letter-spacing: -.09em; line-height: .96; font-variant-numeric: tabular-nums; }
.wallet-detail-hero-copy > p:last-child { margin: 11px 0 0; color: rgba(255,255,255,.72); font-size: .76rem; }
.wallet-detail-hero-side { display: grid; min-width: 190px; align-content: end; gap: 18px; }
.wallet-detail-hero-side div { padding-top: 12px; border-top: 1px solid rgba(255,255,255,.2); }
.wallet-detail-hero-side span, .wallet-detail-hero-side strong { display: block; }
.wallet-detail-hero-side span { color: rgba(255,255,255,.68); font-size: .65rem; }
.wallet-detail-hero-side strong { margin-top: 4px; color: rgba(255,255,255,.96); font-size: .92rem; font-variant-numeric: tabular-nums; }
.wallet-detail-grid { display: grid; gap: 18px; margin-top: 18px; }
.wallet-detail-summary-grid { grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr); }
.wallet-detail-lower-grid { grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr); }
.wallet-detail-summary, .wallet-insight-card, .wallet-detail-activity, .wallet-detail-breakdown { padding: 25px; }
.credit-debt-panel { margin-top: 18px; padding: 25px; border-color: rgba(114,211,239,.2); background: linear-gradient(145deg, rgba(30,74,89,.72), rgba(14,39,35,.88)); box-shadow: 0 22px 58px rgba(1,18,22,.24), inset 0 1px 0 rgba(255,255,255,.1); }
.credit-debt-panel[hidden] { display: none; }
.credit-debt-header { display: flex; gap: 18px; align-items: start; justify-content: space-between; }
.credit-debt-title-group { display: flex; min-width: 0; gap: 13px; align-items: start; }
.credit-debt-title-group > div { min-width: 0; }
.credit-debt-mark { display: inline-grid; width: 40px; height: 40px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(114,211,239,.3); border-radius: 13px 13px 14px 7px; color: var(--cyan); background: rgba(114,211,239,.12); box-shadow: 0 8px 22px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.13); }
.credit-debt-mark .icon { width: 19px; height: 19px; }
.credit-debt-title-group h3 { margin: 2px 0 0; font-family: var(--font-display); font-size: 1.14rem; letter-spacing: -.045em; }
.credit-debt-title-group .body-copy { max-width: 62ch; margin-top: 7px; }
.credit-debt-header .trend-pill { flex: 0 0 auto; margin-top: 2px; }
.credit-debt-overview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 25px; }
.credit-debt-stat { min-width: 0; padding-top: 14px; border-top: 1px solid rgba(221,255,226,.14); }
.credit-debt-stat strong, .credit-debt-stat small { display: block; }
.credit-debt-stat strong { margin-top: 5px; color: var(--ink-soft); font-size: 1.12rem; font-variant-numeric: tabular-nums; }
.credit-debt-stat-primary strong { color: #e7f7ff; font-family: var(--font-display); font-size: 1.55rem; letter-spacing: -.06em; }
.credit-debt-stat small { margin-top: 4px; color: var(--muted); font-size: .63rem; }
.credit-debt-usage { margin-top: 21px; padding-top: 17px; border-top: 1px solid rgba(221,255,226,.14); }
.credit-debt-usage-heading { display: flex; gap: 14px; align-items: end; justify-content: space-between; }
.credit-debt-usage-heading > span:first-child { display: inline-flex; gap: 9px; align-items: baseline; }
.credit-debt-usage-heading .stat-label { display: inline; }
.credit-debt-usage-heading strong { color: var(--cyan); font-size: .83rem; font-variant-numeric: tabular-nums; }
.credit-debt-usage-caption { color: var(--muted-dim); font-size: .61rem; }
.credit-debt-usage-track { height: 8px; margin-top: 10px; background: rgba(4,21,26,.48); }
.credit-debt-usage-track span { width: 100%; background: linear-gradient(90deg, var(--cyan), var(--mint)); box-shadow: 0 0 16px rgba(114,211,239,.24); transform: scaleX(0); transform-origin: left center; transition: transform .42s var(--ease-control); }
.credit-debt-usage > small { display: block; margin-top: 7px; color: var(--muted); font-size: .63rem; }
.credit-debt-plan { display: grid; grid-template-columns: minmax(220px, .75fr) minmax(0, 1.25fr); gap: 22px; align-items: start; margin-top: 22px; padding-top: 19px; border-top: 1px solid rgba(221,255,226,.14); }
.credit-debt-plan-intro { display: grid; gap: 13px; min-width: 0; }
.credit-debt-plan-intro-top { display: flex; gap: 10px; align-items: start; min-width: 0; }
.credit-debt-plan-intro .feature-icon { flex: 0 0 auto; color: var(--cyan); background: rgba(114,211,239,.1); }
.credit-debt-plan-intro-top > div { display: grid; min-width: 0; gap: 4px; }
.credit-debt-plan-intro strong { color: var(--ink-soft); font-family: var(--font-display); font-size: .9rem; letter-spacing: -.035em; }
.credit-debt-plan-intro-top > div > span:last-child { color: var(--muted); font-size: .63rem; line-height: 1.45; }
.credit-debt-checklist { display: grid; gap: 1px; padding: 9px 0 1px; border-top: 1px solid rgba(221,255,226,.12); }
.credit-checklist-item { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 8px; align-items: center; min-width: 0; padding: 6px 0; }
.credit-checklist-icon { display: inline-grid; width: 24px; height: 24px; place-items: center; border: 1px solid rgba(114,211,239,.26); border-radius: 8px; color: var(--cyan); background: rgba(114,211,239,.08); }
.credit-checklist-icon .icon { width: 13px; height: 13px; }
.credit-checklist-item.complete .credit-checklist-icon { border-color: rgba(158,231,165,.3); color: var(--mint); background: rgba(158,231,165,.1); }
.credit-checklist-copy { display: grid; min-width: 0; gap: 2px; }
.credit-checklist-copy strong, .credit-checklist-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.credit-checklist-copy strong { color: var(--ink-soft); font-size: .65rem; font-weight: 700; }
.credit-checklist-copy small { color: var(--muted-dim); font-size: .57rem; }
.credit-checklist-status { max-width: 96px; overflow: hidden; color: var(--muted); font-size: .57rem; font-weight: 700; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.credit-checklist-item.complete .credit-checklist-status { color: var(--mint); }
.credit-debt-payment-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.credit-debt-payment-grid > div { min-width: 0; padding-left: 12px; border-left: 1px solid rgba(221,255,226,.14); }
.credit-debt-payment-grid strong, .credit-debt-payment-grid small { display: block; }
.credit-debt-payment-grid strong { margin-top: 5px; color: var(--ink-soft); font-size: .76rem; font-variant-numeric: tabular-nums; }
.credit-debt-payment-grid small { margin-top: 4px; color: var(--muted-dim); font-size: .57rem; line-height: 1.35; }
.credit-debt-actions { display: flex; gap: 9px; grid-column: 1 / -1; justify-content: flex-end; margin-top: 1px; }
.credit-debt-actions .primary-button, .credit-debt-actions .secondary-button { min-height: 42px; }
.credit-debt-note { display: flex; gap: 8px; align-items: start; margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(221,255,226,.11); color: var(--muted); font-size: .61rem; line-height: 1.45; }
.credit-debt-note .icon { width: 15px; height: 15px; flex: 0 0 auto; color: var(--cyan); }
.wallet-detail-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 28px; }
.wallet-detail-metrics > div { padding-top: 14px; border-top: 1px solid var(--line); }
.wallet-detail-metrics strong, .wallet-detail-metrics small { display: block; }
.wallet-detail-metrics strong { margin-top: 5px; color: var(--ink-soft); font-size: 1rem; font-variant-numeric: tabular-nums; }
.wallet-detail-metrics small { margin-top: 4px; color: var(--muted); font-size: .64rem; }
.wallet-detail-commitment-strip { display: flex; gap: 11px; align-items: center; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.wallet-detail-commitment-strip .feature-icon { flex: 0 0 auto; width: 31px; height: 31px; color: var(--cyan); background: rgba(114,211,239,.09); }
.wallet-detail-commitment-copy { display: grid; min-width: 0; gap: 2px; }
.wallet-detail-commitment-copy > span, .wallet-detail-commitment-copy > strong, .wallet-detail-commitment-copy > small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wallet-detail-commitment-copy > span { color: var(--muted); }
.wallet-detail-commitment-copy > strong { color: var(--ink-soft); font-size: .74rem; }
.wallet-detail-commitment-copy > small { color: var(--muted); font-size: .63rem; }
.wallet-detail-commitment-strip-actions { display: flex; gap: 11px; align-items: center; flex: 0 0 auto; margin-left: auto; }
.wallet-detail-commitment-strip-actions .text-button { font-size: .66rem; }
.wallet-detail-commitment-strip-actions .text-button:first-child { color: var(--lilac); }
.wallet-detail-commitment-strip-actions .text-button:first-child:hover { color: var(--ink); }
.wallet-detail-commitment-list { display: grid; gap: 4px; margin-top: 13px; padding-top: 10px; border-top: 1px solid var(--line); }
.wallet-detail-commitment-list[hidden] { display: none; }
.wallet-detail-commitment-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px; align-items: center; min-width: 0; padding: 3px 0; }
.wallet-detail-commitment-main { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto 16px; gap: 9px; align-items: center; min-width: 0; padding: 5px; border: 0; border-radius: 14px; color: inherit; background: transparent; font: inherit; text-align: left; transition: background .18s ease, transform .18s var(--ease-control), box-shadow .18s ease; }
.wallet-detail-commitment-main:hover { background: rgba(158,231,165,.055); transform: translateY(-1px); }
.wallet-detail-commitment-main:focus-visible { position: relative; z-index: 1; outline: 2px solid var(--mint); outline-offset: 2px; box-shadow: var(--focus-ring); }
.wallet-detail-commitment-main:active { background: rgba(158,231,165,.1); transform: translateY(1px) scale(.995); }
.wallet-detail-commitment-date { display: flex; width: 36px; height: 39px; flex: 0 0 auto; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 1px solid rgba(158,231,165,.16); border-radius: 10px 10px 11px 6px; color: var(--mint); background: rgba(158,231,165,.08); line-height: 1; }
.wallet-detail-commitment-date strong { font-family: var(--font-display); font-size: .74rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.wallet-detail-commitment-date small { color: var(--muted); font-size: .45rem; font-weight: 800; letter-spacing: .1em; line-height: 1; }
.wallet-detail-bill-copy { display: grid; min-width: 0; gap: 3px; }
.wallet-detail-bill-copy strong, .wallet-detail-bill-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wallet-detail-bill-copy strong { color: var(--ink-soft); font-size: .72rem; font-weight: 700; }
.wallet-detail-bill-copy small { color: var(--muted); font-size: .6rem; }
.wallet-detail-commitment-amount { color: var(--ink-soft); font-size: .69rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wallet-detail-commitment-arrow { display: inline-grid; width: 16px; height: 16px; place-items: center; color: var(--muted-dim); }
.wallet-detail-commitment-arrow svg { width: 13px; height: 13px; }
.wallet-detail-commitment-main:hover .wallet-detail-commitment-arrow { color: var(--mint); transform: translateX(2px); }
.wallet-detail-commitment-row.paid .wallet-detail-commitment-date { color: var(--cyan); border-color: rgba(114,211,239,.2); background: rgba(114,211,239,.08); }
.wallet-detail-commitment-row.paid .wallet-detail-bill-copy small { color: var(--cyan); }
.wallet-detail-commitment-row.overdue .wallet-detail-commitment-date { color: var(--red); border-color: rgba(255,132,123,.2); background: rgba(255,132,123,.08); }
.wallet-detail-commitment-row.overdue .wallet-detail-bill-copy small { color: var(--red); }
.wallet-detail-commitment-action { min-height: 31px; padding: 0 9px; font-size: .61rem; white-space: nowrap; }
.wallet-detail-commitment-action .icon { width: 13px; height: 13px; }
.wallet-insight-card { background: linear-gradient(145deg, rgba(111,191,111,.25), rgba(16,49,31,.78)); }
.wallet-insight-card .section-kicker { margin-top: 23px; }
.wallet-insight-card h3 { max-width: 18ch; margin: 6px 0 0; font-family: var(--font-display); font-size: 1.35rem; letter-spacing: -.06em; }
.wallet-insight-card .body-copy { margin-top: 12px; }
.wallet-activity-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-top: 17px; }
.wallet-activity-scope { display: inline-flex; gap: 3px; max-width: 100%; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: rgba(0,0,0,.14); }
.wallet-activity-scope-button { min-height: 40px; padding: 0 11px; border: 0; border-radius: 999px; color: var(--muted); background: transparent; font-size: .62rem; font-weight: 700; white-space: nowrap; }
.wallet-activity-scope-button:hover { color: var(--ink-soft); background: rgba(255,255,255,.06); }
.wallet-activity-scope-button.active { color: var(--mint); background: rgba(158,231,165,.13); box-shadow: inset 0 0 0 1px rgba(158,231,165,.14); }
.wallet-activity-filters { display: inline-flex; gap: 3px; overflow-x: auto; max-width: 100%; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: rgba(0,0,0,.14); }
.wallet-activity-filter { min-height: 40px; padding: 0 10px; border: 0; border-radius: 999px; color: var(--muted); background: transparent; font-size: .62rem; font-weight: 700; white-space: nowrap; }
.wallet-activity-filter:hover { color: var(--ink-soft); background: rgba(255,255,255,.06); }
.wallet-activity-filter.active { color: #163822; background: var(--mint); }
.wallet-detail-activity .transaction-list { margin-top: 16px; }
.wallet-detail-breakdown { min-height: 260px; }
.wallet-breakdown { display: grid; gap: 18px; margin-top: 26px; }
.wallet-breakdown-row { display: grid; gap: 7px; }
.wallet-breakdown-label { display: flex; justify-content: space-between; gap: 14px; color: var(--muted); font-size: .72rem; }
.wallet-breakdown-label span { display: inline-flex; gap: 8px; align-items: center; }
.wallet-breakdown-label b { color: var(--ink-soft); font-weight: 600; font-variant-numeric: tabular-nums; }
.wallet-breakdown-label .category-dot { width: 8px; height: 8px; }
.wallet-breakdown .progress-track { margin-top: 0; }

.bottom-nav { display: none; }
.transaction-rail { position: fixed; right: 34px; bottom: 26px; z-index: 20; display: flex; width: 72px; height: 72px; gap: 0; align-items: center; justify-content: center; min-height: 72px; padding: 6px; border: 1px solid rgba(178,245,178,.2); border-radius: 50%; background: linear-gradient(145deg, rgba(24,57,38,.96), rgba(8,25,16,.98)); box-shadow: 0 24px 58px rgba(0,0,0,.38), 0 4px 16px rgba(61,143,82,.1), inset 0 1px 0 rgba(255,255,255,.13); backdrop-filter: blur(22px); transition: opacity .2s ease, transform .28s var(--ease-control), box-shadow .2s ease; }
.is-wallet-detail .transaction-rail { opacity: 0; pointer-events: none; transform: translateY(14px); }
.rail-toggle { position: relative; display: grid; width: 100%; height: 100%; flex: 1 1 auto; min-width: 0; min-height: 46px; place-items: center; padding: 0; border: 1px solid transparent; border-radius: 50%; color: inherit; background: transparent; text-align: left; transition: background .2s ease, border-color .2s ease, transform .2s var(--ease-control); }
.rail-toggle:hover { border-color: rgba(158,231,165,.16); background: rgba(158,231,165,.07); }
.rail-toggle:active { transform: translateY(1px) scale(.99); }
.rail-copy { display: none; flex: 1 1 auto; gap: 10px; align-items: center; min-width: 0; padding-right: 2px; }
.rail-copy > div { min-width: 0; }
.rail-copy > span { min-width: 0; }
.rail-spark { display: inline-grid; width: 36px; height: 36px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(158,231,165,.32); border-radius: 50%; color: var(--mint); background: radial-gradient(circle at 34% 28%, rgba(214,255,211,.2), transparent 42%), rgba(158,231,165,.1); box-shadow: 0 8px 18px rgba(0,0,0,.16), 0 0 0 4px rgba(158,231,165,.045), inset 0 1px 0 rgba(255,255,255,.12); }
.rail-spark svg { width: 14px; height: 14px; }
.rail-copy strong, .rail-copy small { display: block; }
.rail-copy strong, .rail-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-copy strong { color: var(--ink-soft); font-family: var(--font-display); font-size: .74rem; font-weight: 700; letter-spacing: -.025em; }
.rail-copy small { display: none; margin-top: 3px; color: var(--muted); font-size: .61rem; }
.rail-toggle-icon { position: absolute; right: -1px; bottom: -1px; display: grid; width: 20px !important; height: 20px !important; place-items: center; margin: 0; border: 1px solid rgba(221,255,226,.2); border-radius: 50%; color: var(--muted); background: rgba(7,23,15,.92); box-shadow: 0 4px 10px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.1); transition: color .2s ease, transform .3s var(--ease-control), border-color .2s ease; }
.transaction-rail.is-expanded .rail-toggle-icon { color: var(--mint); transform: rotate(45deg); }
.rail-actions { position: absolute; right: 50%; bottom: calc(100% + 10px); display: flex; width: 136px; flex-direction: column-reverse; gap: 7px; align-items: stretch; overflow: visible; opacity: 0; pointer-events: none; transform: translate(50%, 14px); transform-origin: bottom right; visibility: hidden; transition: opacity .2s ease, transform .34s var(--ease-control), visibility 0s linear .34s; }
.transaction-rail.is-expanded .rail-actions { opacity: 1; pointer-events: auto; transform: translate(50%, 0); visibility: visible; transition-delay: 0s; }
.rail-action { display: inline-flex; width: 136px; height: 44px; flex-direction: row; gap: 9px; align-items: center; justify-content: flex-start; padding: 0 11px; border: 1px solid rgba(221,255,226,.12); border-radius: 15px; color: var(--ink-soft); background: linear-gradient(145deg, rgba(25,57,39,.96), rgba(9,25,16,.98)); box-shadow: 0 12px 24px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.09); opacity: 0; transform: translateY(10px); transition: opacity .2s ease, transform .3s var(--ease-control), color .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease; }
.transaction-rail.is-expanded .rail-action { opacity: 1; transform: translateY(0); }
.transaction-rail.is-expanded .rail-action:nth-child(1) { transition-delay: .02s; }
.transaction-rail.is-expanded .rail-action:nth-child(2) { transition-delay: .07s; }
.transaction-rail.is-expanded .rail-action:nth-child(3) { transition-delay: .12s; }
.rail-action:hover { transform: translateY(-2px); border-color: rgba(158,231,165,.24); color: var(--ink); background: linear-gradient(145deg, rgba(35,75,49,.98), rgba(12,32,20,.98)); box-shadow: 0 15px 28px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.12); }
.transaction-rail.is-expanded .rail-action:hover { transform: translateY(-2px); }
.rail-action:active { transform: translateY(1px) scale(.97); }
.rail-action .icon { display: grid; width: 26px; height: 26px; flex: 0 0 auto; place-items: center; padding: 5px; border: 1px solid rgba(221,255,226,.12); border-radius: 50%; background: rgba(255,255,255,.035); box-shadow: inset 0 1px 0 rgba(255,255,255,.09); transition: border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s var(--ease-control); }
.rail-action-label { color: var(--ink-soft); font-size: .6rem; font-weight: 700; letter-spacing: .01em; line-height: 1; }
.expense-action .icon { color: var(--orange); border-color: rgba(243,165,82,.3); background: rgba(243,165,82,.1); }
.transfer-action .icon { color: var(--cyan); border-color: rgba(114,211,239,.3); background: rgba(114,211,239,.1); }
.income-action .icon { color: var(--mint); border-color: rgba(158,231,165,.3); background: rgba(158,231,165,.1); }
.rail-action:hover .icon { transform: scale(1.04); box-shadow: 0 0 0 4px rgba(158,231,165,.045), inset 0 1px 0 rgba(255,255,255,.13); }
.rail-action:hover .rail-action-label { color: var(--ink); }
.expense-action { color: var(--orange); }
.transfer-action { color: var(--cyan); }
.income-action { color: var(--mint); }

.modal-backdrop { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px; overscroll-behavior: contain; background: rgba(0,7,4,.62); backdrop-filter: blur(10px); }
.modal-backdrop[hidden] { display: none; }
.transaction-modal { width: min(100%, 475px); max-height: min(760px, calc(100vh - 40px)); overflow-y: auto; padding: 25px; border: 1px solid var(--line-strong); border-radius: 24px; background: linear-gradient(150deg, rgba(33,76,50,.98), rgba(10,30,20,.99)); box-shadow: 0 32px 100px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.13); animation: modal-in .32s cubic-bezier(.16,1,.3,1) both; }
@keyframes modal-in { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.onboarding-backdrop { z-index: 80; background: rgba(1,10,6,.78); }
.onboarding-modal { width: min(100%, 540px); max-height: min(760px, calc(100vh - 40px)); overflow-y: auto; padding: 30px; border: 1px solid rgba(158,231,165,.25); border-radius: 28px; background: radial-gradient(circle at 100% 0%, rgba(119,217,160,.12), transparent 16rem), linear-gradient(150deg, rgba(29,67,44,.99), rgba(7,25,16,.99)); box-shadow: 0 36px 110px rgba(0,0,0,.56), 0 0 0 1px rgba(255,255,255,.025), inset 0 1px 0 rgba(255,255,255,.1); animation: modal-in .38s cubic-bezier(.16,1,.3,1) both; }
.onboarding-brand { display: flex; gap: 11px; align-items: center; margin-bottom: 34px; }
.onboarding-mark { display: grid; width: 42px; height: 42px; place-items: center; overflow: hidden; border: 1px solid rgba(255,255,255,.16); border-radius: 13px; background: rgba(255,255,255,.06); box-shadow: 0 10px 25px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.12); }
.onboarding-mark img { width: 31px; height: 31px; object-fit: contain; }
.onboarding-brand strong, .onboarding-brand small { display: block; }
.onboarding-brand strong { color: var(--ink); font-family: var(--font-display); font-size: 1rem; letter-spacing: -.045em; }
.onboarding-brand small { margin-top: 2px; color: var(--muted); font-size: .62rem; }
.onboarding-step[hidden] { display: none; }
.onboarding-step h2 { max-width: 14ch; margin: 7px 0 0; color: var(--ink); font-family: var(--font-display); font-size: clamp(2rem, 5vw, 2.8rem); letter-spacing: -.08em; line-height: 1.02; text-wrap: balance; }
.onboarding-lead { max-width: 52ch; margin: 16px 0 0; color: var(--muted); font-size: .84rem; line-height: 1.55; }
.onboarding-points { display: grid; gap: 0; margin: 27px 0 28px; border-top: 1px solid rgba(221,255,226,.1); }
.onboarding-points > div { display: grid; grid-template-columns: 31px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-bottom: 1px solid rgba(221,255,226,.1); }
.onboarding-point-number { color: var(--mint); font-size: .61rem; font-weight: 800; letter-spacing: .08em; }
.onboarding-points strong, .onboarding-points small { display: block; }
.onboarding-points strong { color: var(--ink-soft); font-size: .73rem; }
.onboarding-points small { margin-top: 3px; color: var(--muted); font-size: .64rem; line-height: 1.45; }
.onboarding-actions, .onboarding-form-actions { display: grid; gap: 9px; }
.onboarding-actions .primary-button, .onboarding-actions .secondary-button { width: 100%; min-height: 46px; }
.onboarding-trust { display: flex; gap: 7px; align-items: center; margin: 17px 0 0; color: var(--muted-dim); font-size: .61rem; line-height: 1.4; }
.onboarding-trust .icon { width: 14px; height: 14px; flex: 0 0 auto; color: var(--mint); }
.onboarding-step-header { display: flex; gap: 12px; align-items: flex-start; margin: -6px 0 0; }
.onboarding-step-header .icon-button { margin-top: 1px; }
.onboarding-step-header h2 { max-width: 14ch; margin-top: 3px; font-size: clamp(1.75rem, 4vw, 2.35rem); }
.onboarding-modal form { display: grid; gap: 16px; margin-top: 24px; }
.onboarding-modal label > span { display: block; margin-bottom: 7px; color: var(--muted); font-size: .68rem; font-weight: 700; letter-spacing: .02em; }
.onboarding-modal input { width: 100%; min-height: 46px; padding: 0 13px; border: 1px solid var(--line); border-radius: 13px; color: var(--ink); background: rgba(3,18,10,.42); }
.onboarding-modal input:focus-visible { border-color: rgba(158,231,165,.55); box-shadow: 0 0 0 4px rgba(158,231,165,.1); }
.onboarding-money-input { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 13px; background: rgba(3,18,10,.42); }
.onboarding-money-input > span { padding-left: 13px; color: var(--mint); font-size: .82rem; font-weight: 800; }
.onboarding-money-input input { min-height: 58px; padding-left: 8px; border: 0; background: transparent; font-family: var(--font-display); font-size: 1.45rem; font-weight: 700; letter-spacing: -.06em; }
.onboarding-money-input input:focus-visible { outline: 0; box-shadow: none; }
.onboarding-form-actions { grid-template-columns: auto minmax(0, 1fr); align-items: center; margin-top: 3px; }
.onboarding-form-actions .secondary-button { min-height: 46px; }
.onboarding-form-actions .primary-button { min-height: 46px; }
.onboarding-optional-note { display: flex; gap: 10px; align-items: center; margin: 22px 0 2px; padding: 11px 12px; border: 1px solid rgba(111,209,239,.2); border-radius: 14px; background: rgba(111,209,239,.07); }
.onboarding-optional-icon { display: grid; width: 30px; height: 30px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(111,209,239,.3); border-radius: 10px 10px 11px 5px; color: var(--cyan); background: rgba(111,209,239,.1); }
.onboarding-optional-icon .icon { width: 15px; height: 15px; }
.onboarding-optional-note strong, .onboarding-optional-note small { display: block; }
.onboarding-optional-note strong { color: var(--ink-soft); font-size: .68rem; }
.onboarding-optional-note small { margin-top: 3px; color: var(--muted); font-size: .6rem; line-height: 1.35; }
.onboarding-plan-fields { display: grid; max-height: 252px; gap: 11px; margin-top: 22px; overflow-y: auto; padding-right: 3px; }
.onboarding-plan-field { display: grid; grid-template-columns: minmax(0, 1fr) 132px 88px auto; gap: 8px; align-items: end; padding-bottom: 11px; border-bottom: 1px solid rgba(221,255,226,.1); }
.onboarding-plan-field > label { min-width: 0; }
.onboarding-plan-field input, .onboarding-plan-field select { width: 100%; min-height: 44px; padding: 0 11px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: rgba(3,18,10,.42); font-size: .72rem; }
.onboarding-plan-field input:focus-visible, .onboarding-plan-field select:focus-visible { border-color: rgba(158,231,165,.55); box-shadow: 0 0 0 4px rgba(158,231,165,.1); }
.onboarding-plan-field .onboarding-money-input { min-width: 0; }
.onboarding-plan-field .onboarding-money-input > span { padding-left: 10px; font-size: .68rem; }
.onboarding-plan-field .onboarding-money-input input { min-height: 44px; padding: 0 7px; border: 0; background: transparent; font-family: var(--font-display); font-size: .98rem; }
.onboarding-plan-field .onboarding-money-input input:focus-visible { box-shadow: none; }
.onboarding-plan-remove { min-height: 40px; padding: 0 4px; color: var(--muted); font-size: .58rem; white-space: nowrap; }
.onboarding-plan-remove:hover { color: var(--ink-soft); }
.onboarding-plan-add { width: 100%; min-height: 42px; margin-top: 11px; }
.modal-header { display: flex; justify-content: space-between; align-items: start; gap: 20px; margin-bottom: 25px; }
.modal-header h2 { margin: 5px 0 0; font-family: var(--font-display); font-size: 1.55rem; letter-spacing: -.07em; line-height: 1.1; text-wrap: balance; }
.transaction-modal form { display: grid; gap: 15px; }
.transaction-modal label > span { display: block; margin-bottom: 7px; color: var(--muted); font-size: .68rem; font-weight: 700; letter-spacing: .02em; }
.transaction-modal input, .transaction-modal select { width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: rgba(3,18,10,.38); }
.transaction-modal input::placeholder { color: var(--muted-dim); }
.transaction-context { display: flex; gap: 8px; align-items: center; margin: -8px 0 18px; padding: 9px 11px; border: 1px solid rgba(158,231,165,.2); border-radius: 12px; color: var(--muted); background: rgba(158,231,165,.07); font-size: .67rem; }
.transaction-context[hidden] { display: none; }
.transaction-context .icon { width: 16px; height: 16px; color: var(--mint); }
.transaction-context strong { color: var(--ink-soft); font-weight: 700; }
.transaction-context > span:last-child { display: grid; gap: 2px; }
.transaction-context small { color: var(--muted-dim); font-size: .6rem; }
.transaction-type-switcher { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin: -8px 0 8px; padding: 4px; border: 1px solid var(--line); border-radius: 16px; background: rgba(0,0,0,.16); }
.transaction-type-choice { display: flex; min-width: 0; gap: 7px; align-items: center; min-height: 53px; padding: 7px; border: 1px solid transparent; border-radius: 12px; color: var(--muted); background: transparent; text-align: left; transition: transform .2s ease, border-color .2s ease, color .2s ease, background .2s ease; }
.transaction-type-choice:hover { color: var(--ink-soft); background: rgba(255,255,255,.055); transform: translateY(-1px); }
.transaction-type-choice:focus-visible { position: relative; z-index: 1; outline: 2px solid var(--mint); outline-offset: 2px; }
.transaction-type-choice.active { color: var(--ink-soft); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.transaction-type-choice.active.expense { border-color: rgba(245,163,78,.42); background: rgba(245,163,78,.12); }
.transaction-type-choice.active.income { border-color: rgba(119,217,160,.42); background: rgba(119,217,160,.11); }
.transaction-type-choice.active.transfer { border-color: rgba(111,209,239,.42); background: rgba(111,209,239,.11); }
.transaction-special-types { margin: -1px 0 10px; border: 1px solid rgba(221,255,226,.1); border-radius: 14px; background: rgba(0,0,0,.1); }
.transaction-special-types[hidden] { display: none; }
.transaction-special-types > summary { padding: 10px 12px; color: var(--muted); font-size: .63rem; font-weight: 700; cursor: pointer; list-style: none; }
.transaction-special-types > summary::-webkit-details-marker { display: none; }
.transaction-special-types > summary:focus-visible { outline: 2px solid var(--mint); outline-offset: -3px; border-radius: 12px; }
.transaction-special-types[open] > summary { color: var(--ink-soft); border-bottom: 1px solid rgba(221,255,226,.1); }
.transaction-special-type-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; padding: 5px; }
.transaction-type-choice.special { min-height: 48px; }
.transaction-type-choice.active.refund { border-color: rgba(119,217,160,.42); background: rgba(119,217,160,.11); }
.transaction-type-choice.active.cash-advance { border-color: rgba(245,163,78,.42); background: rgba(245,163,78,.12); }
.transaction-type-choice-icon { display: inline-grid; width: 29px; height: 29px; flex: 0 0 auto; place-items: center; border: 1px solid currentColor; border-radius: 10px; background: rgba(255,255,255,.045); box-shadow: 0 5px 14px rgba(0,0,0,.13), inset 0 1px 0 rgba(255,255,255,.1); transition: transform .2s ease, background .2s ease; }
.transaction-type-choice-icon .icon { width: 14px; height: 14px; }
.transaction-type-choice.expense .transaction-type-choice-icon { color: var(--orange); }
.transaction-type-choice.income .transaction-type-choice-icon { color: var(--mint); }
.transaction-type-choice.transfer .transaction-type-choice-icon { color: var(--cyan); }
.transaction-type-choice.refund .transaction-type-choice-icon { color: var(--mint); }
.transaction-type-choice.cash-advance .transaction-type-choice-icon { color: var(--orange); }
.transaction-type-choice:hover .transaction-type-choice-icon { transform: scale(1.05); background: rgba(255,255,255,.08); }
.transaction-type-choice > span:last-child { display: grid; min-width: 0; gap: 2px; }
.transaction-type-choice strong, .transaction-type-choice small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.transaction-type-choice strong { color: currentColor; font-size: .68rem; font-weight: 800; }
.transaction-type-choice small { color: var(--muted-dim); font-size: .56rem; }
.transaction-flow-hint { margin: 0 1px 2px; color: var(--muted); font-size: .64rem; line-height: 1.45; }
.field-helper { display: block; min-height: 1.15em; margin-top: 5px; color: var(--muted-dim); font-size: .58rem; font-weight: 500; line-height: 1.35; }
.transaction-impact { display: flex; gap: 10px; align-items: flex-start; padding: 11px 12px; border: 1px solid rgba(158,231,165,.25); border-radius: 14px; background: rgba(158,231,165,.075); }
.transaction-impact[hidden] { display: none; }
.transaction-impact.expense { border-color: rgba(245,163,78,.3); background: rgba(245,163,78,.08); }
.transaction-impact.income { border-color: rgba(119,217,160,.3); background: rgba(119,217,160,.08); }
.transaction-impact.transfer { border-color: rgba(111,209,239,.3); background: rgba(111,209,239,.08); }
.transaction-impact.refund { border-color: rgba(119,217,160,.3); background: rgba(119,217,160,.08); }
.transaction-impact.cash-advance { border-color: rgba(245,163,78,.3); background: rgba(245,163,78,.08); }
.transaction-impact-icon { display: inline-grid; width: 28px; height: 28px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(255,255,255,.16); border-radius: 9px; color: var(--mint); background: rgba(255,255,255,.08); }
.transaction-impact.expense .transaction-impact-icon { color: var(--orange); }
.transaction-impact.income .transaction-impact-icon { color: var(--mint); }
.transaction-impact.transfer .transaction-impact-icon { color: var(--cyan); }
.transaction-impact.refund .transaction-impact-icon { color: var(--mint); }
.transaction-impact.cash-advance .transaction-impact-icon { color: var(--orange); }
.transaction-impact-icon .icon { width: 14px; height: 14px; }
.transaction-impact > div { display: grid; min-width: 0; gap: 3px; }
.transaction-impact strong { color: var(--ink-soft); font-size: .68rem; }
.transaction-impact span, .transaction-impact small { color: var(--muted); font-size: .61rem; line-height: 1.4; }
.transaction-impact small { color: var(--muted-dim); }
.recurring-schedule-preview { display: flex; gap: 10px; align-items: flex-start; padding: 11px 12px; border: 1px solid rgba(198,155,239,.24); border-radius: 14px; background: rgba(198,155,239,.08); }
.recurring-schedule-preview > .feature-icon { flex: 0 0 auto; color: var(--lilac); background: rgba(198,155,239,.14); }
.recurring-schedule-preview > div { display: grid; min-width: 0; gap: 3px; }
.recurring-schedule-preview-kicker { color: var(--lilac); font-size: .58rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.recurring-schedule-preview strong { color: var(--ink-soft); font-size: .7rem; }
.recurring-schedule-preview small { color: var(--muted); font-size: .61rem; line-height: 1.4; }
.recurring-link-preview { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 11px 12px; border: 1px solid rgba(119,217,160,.2); border-radius: 14px; background: rgba(119,217,160,.06); }
.recurring-link-preview.is-invalid { border-color: rgba(255,132,123,.34); background: rgba(255,132,123,.07); }
.recurring-link-preview.is-invalid > .feature-icon { color: var(--red); background: rgba(255,132,123,.1); }
.recurring-link-preview > .feature-icon { flex: 0 0 auto; color: var(--mint); background: rgba(119,217,160,.1); }
.recurring-link-preview > div:nth-child(2) { display: grid; min-width: 0; gap: 3px; }
.recurring-link-preview-kicker { color: var(--mint); font-size: .58rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.recurring-link-preview strong { color: var(--ink-soft); font-size: .7rem; }
.recurring-link-preview small { color: var(--muted); font-size: .61rem; line-height: 1.4; }
.recurring-link-pills { display: flex; gap: 5px; align-items: center; justify-content: flex-end; max-width: 190px; min-width: 0; }
.recurring-link-pill { max-width: 82px; overflow: hidden; padding: 6px 8px; border: 1px solid rgba(119,217,160,.2); border-radius: 9px; color: var(--ink-soft); background: rgba(119,217,160,.08); font-size: .59rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.recurring-link-connector { display: inline-grid; width: 14px; height: 14px; flex: 0 0 auto; place-items: center; color: var(--mint); }
.recurring-link-connector svg { width: 13px; height: 13px; }
.recurring-editor-note { margin: -2px 0 0; padding: 0 2px; color: var(--gold-soft); font-size: .61rem; line-height: 1.45; }
.recurring-editor-note[hidden] { display: none; }
.recurring-empty-link { margin: -6px 0 0; color: var(--muted); font-size: .62rem; line-height: 1.45; }
.recurring-empty-link .text-button { display: inline-flex; min-height: auto; padding: 0; color: var(--mint); font-size: inherit; vertical-align: baseline; }
.account-manager-modal { width: min(100%, 590px); }
.account-editor-modal { width: min(100%, 520px); max-height: min(760px, calc(100vh - 40px)); overflow-y: auto; }
.credit-details-field { display: grid; gap: 13px; padding: 14px; border: 1px solid rgba(114,211,239,.2); border-radius: 15px; background: rgba(114,211,239,.06); }
.credit-details-field[hidden] { display: none; }
.credit-details-heading { display: grid; gap: 3px; }
.credit-details-heading strong { color: var(--ink-soft); font-size: .73rem; }
.credit-details-heading span { color: var(--muted); font-size: .61rem; line-height: 1.4; }
.credit-details-field .field-helper { margin-top: 2px; }
.budget-modal { display: flex; max-height: min(760px, calc(100vh - 40px)); flex-direction: column; overflow: hidden; }
.budget-modal .modal-header { flex: 0 0 auto; }
.budget-modal form { display: flex; min-height: 0; flex-direction: column; gap: 15px; overflow: hidden; }
.account-manager-description, .account-editor-description { margin: -9px 0 20px; color: var(--muted); font-size: var(--text-body-compact); line-height: 1.55; overflow-wrap: break-word; }
.account-manager-list { display: grid; gap: 16px; max-height: min(55vh, 455px); overflow: auto; padding-right: 2px; }
.account-list-group { display: grid; gap: 8px; }
.account-list-heading { display: flex; justify-content: space-between; gap: 12px; align-items: center; color: var(--muted-dim); font-size: .64rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.account-list-heading strong { color: var(--muted); font-size: .65rem; font-variant-numeric: tabular-nums; }
.account-manager-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 13px 16px; align-items: center; padding: 13px; border: 1px solid var(--line); border-radius: 15px; background: rgba(255,255,255,.035); }
.account-manager-row.is-archived { opacity: .72; }
.account-manager-row-main { display: flex; gap: 10px; min-width: 0; align-items: center; }
.account-manager-row-main > div { min-width: 0; }
.account-manager-row-main strong, .account-manager-row-main span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-manager-row-main strong { color: var(--ink-soft); font-size: .76rem; }
.account-manager-row-main div > span { margin-top: 3px; color: var(--muted); font-size: .63rem; }
.account-swatch { display: inline-grid; width: 35px; height: 35px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(255,255,255,.2); border-radius: 11px 11px 12px 6px; box-shadow: 0 7px 17px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.3); }
.account-swatch svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.65; shape-rendering: geometricPrecision; }
.account-swatch-mint { color: #173d26; background: var(--mint); }
.account-swatch-lilac { color: #32204c; background: var(--lilac); }
.account-swatch-cyan { color: #113947; background: var(--cyan); }
.account-swatch-amber { color: #43280c; background: var(--orange); }
.account-manager-row-balance { text-align: right; }
.account-manager-row-balance small, .account-manager-row-balance strong { display: block; }
.account-manager-row-balance small { color: var(--muted-dim); font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; }
.account-manager-row-balance strong { margin-top: 4px; color: var(--ink-soft); font-size: .75rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.account-manager-row-actions { display: flex; grid-column: 1 / -1; gap: 8px; justify-content: flex-end; padding-top: 10px; border-top: 1px solid rgba(221,255,226,.09); }
.small-button { min-height: 34px; padding: 0 11px; font-size: .67rem; }
.account-manager-empty { padding: 16px 0 4px; }
.account-manager-empty .feature-icon { color: var(--lilac); background: rgba(198,155,239,.1); }
.account-archive-confirmation { display: flex; gap: 14px; align-items: center; justify-content: space-between; margin-top: 16px; padding: 14px; border: 1px solid rgba(255,132,123,.28); border-radius: 14px; background: rgba(255,132,123,.07); }
.account-archive-confirmation[hidden] { display: none; }
.account-archive-confirmation > div:first-child { min-width: 0; }
.account-archive-confirmation strong, .account-archive-confirmation span { display: block; }
.account-archive-confirmation strong { color: #ffe1dc; font-size: .75rem; }
.account-archive-confirmation span { margin-top: 4px; color: var(--muted); font-size: .65rem; line-height: 1.4; }
.account-manager-footer { display: flex; gap: 14px; align-items: flex-start; justify-content: space-between; margin-top: 21px; padding-top: 17px; border-top: 1px solid var(--line); }
.account-manager-footer-copy { display: grid; min-width: 0; gap: 4px; }
.account-manager-footer-copy small { color: var(--muted-dim); font-size: .61rem; line-height: 1.35; }
.account-manager-footer-actions { display: flex; gap: 8px; align-items: center; flex: 0 0 auto; }
.account-manager-footer-actions .secondary-button, .account-manager-footer-actions .primary-button { min-height: 34px; padding: 0 10px; font-size: .65rem; }
.account-manager-footer-actions .icon { width: 14px; height: 14px; }
.account-checkbox { display: flex; gap: 10px; align-items: start; padding: 11px 12px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.035); }
.transaction-modal .account-checkbox > span { margin: 0; color: var(--ink-soft); font-size: .73rem; font-weight: 600; }
.account-checkbox input { width: 17px; min-width: 17px; height: 17px; min-height: 17px; margin: 1px 0 0; accent-color: var(--mint-strong); }
.account-checkbox strong, .account-checkbox small { display: block; }
.account-checkbox small { margin-top: 3px; color: var(--muted); font-size: .63rem; font-weight: 400; line-height: 1.4; }
.account-checkbox input:disabled { opacity: .55; }
.amount-field > div { display: flex; align-items: center; border: 1px solid var(--line-strong); border-radius: 15px; background: rgba(3,18,10,.34); }
.amount-field > div > span { margin: 0; padding-left: 14px; color: var(--mint); font-size: .85rem; font-weight: 700; }
.amount-field input { min-height: 65px; padding: 0 14px 0 8px; border: 0; border-radius: inherit; background: transparent; font-family: var(--font-display); font-size: 2rem; font-weight: 700; letter-spacing: -.07em; }
.amount-field input:focus-visible { outline: 0; }
.form-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-error { margin: -2px 0 0; padding: 10px 12px; border: 1px solid rgba(255,132,123,.28); border-radius: 11px; color: #ffb0a9; background: rgba(255,132,123,.08); font-size: .72rem; line-height: 1.45; }
.transaction-detail-amount-block { margin-top: -2px; padding: 1px 0 19px; border-bottom: 1px solid var(--line); }
.transaction-detail-amount-block > strong { display: block; margin-top: 8px; color: var(--ink); font-family: var(--font-display); font-size: clamp(2.25rem, 7vw, 3.35rem); letter-spacing: -.09em; line-height: 1; font-variant-numeric: tabular-nums; }
.transaction-detail-amount-block > strong.expense { color: var(--red); }
.transaction-detail-amount-block > strong.income { color: var(--mint); }
.transaction-detail-amount-block > strong.transfer { color: var(--cyan); }
.transaction-detail-amount-block > strong.refund { color: var(--mint); }
.transaction-detail-amount-block > strong.cash-advance { color: var(--orange); }
.transaction-detail-amount-block .muted-copy { margin-top: 10px; }
.transaction-detail-description { margin: 16px 0 0; color: var(--muted); font-size: var(--text-body-compact); line-height: 1.55; overflow-wrap: break-word; }
.transaction-detail-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px 17px; margin: 23px 0 0; padding: 17px 0 0; border-top: 1px solid var(--line); }
.transaction-detail-meta > div { min-width: 0; }
.transaction-detail-meta dt { color: var(--muted-dim); font-size: .61rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.transaction-detail-meta dd { margin: 5px 0 0; overflow: hidden; color: var(--ink-soft); font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
.detail-actions { display: flex; gap: 10px; margin-top: 24px; }
.detail-actions[hidden], .delete-confirmation[hidden] { display: none; }
.detail-actions > button { flex: 1; }
.danger-button { display: inline-flex; gap: 8px; align-items: center; justify-content: center; min-height: 40px; padding: 0 15px; border: 1px solid rgba(255,132,123,.35); border-radius: 12px; color: #ffd5cf; background: rgba(255,132,123,.1); font-size: .75rem; font-weight: 800; transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s var(--ease-control), box-shadow .18s ease; }
.danger-button:hover { border-color: rgba(255,160,148,.6); color: #fff1ed; background: rgba(255,132,123,.18); transform: translateY(-1px); }
.danger-button:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; box-shadow: 0 0 0 4px rgba(255,132,123,.13); }
.danger-button:active { border-color: rgba(255,160,148,.72); background: rgba(255,132,123,.24); transform: translateY(1px) scale(.985); }
.danger-button .icon { width: 15px; height: 15px; }
.delete-confirmation { display: flex; gap: 14px; align-items: center; justify-content: space-between; margin-top: 24px; padding: 14px; border: 1px solid rgba(255,132,123,.28); border-radius: 14px; background: rgba(255,132,123,.07); }
.delete-confirmation > div:first-child { min-width: 0; }
.delete-confirmation strong, .delete-confirmation span { display: block; }
.delete-confirmation strong { color: #ffe1dc; font-size: .75rem; }
.delete-confirmation span { margin-top: 4px; color: var(--muted); font-size: .65rem; line-height: 1.4; }
.confirmation-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.confirmation-actions button { min-height: 34px; padding: 0 10px; font-size: .67rem; }
.budget-fields { display: grid; max-height: min(440px, 52vh); gap: 13px; overflow-y: auto; padding-right: 4px; }
.budget-field { display: grid; grid-template-columns: minmax(0, 1fr) 150px auto; gap: 12px; align-items: end; padding: 0 0 13px; border-bottom: 1px solid rgba(221,255,226,.08); }
.budget-field.is-new { padding-top: 4px; }
.budget-field.is-removed { opacity: .52; }
.budget-field > label { min-width: 0; }
.budget-field > label > span, .budget-color-field > span { display: block; margin-bottom: 7px; color: var(--muted); font-size: .62rem; font-weight: 700; letter-spacing: .02em; }
.budget-field > label input, .budget-field > label select { min-height: 40px; }
.budget-amount-field > div { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 12px; background: rgba(3,18,10,.34); }
.budget-amount-field > div > span { padding-left: 10px; color: var(--mint); font-size: .72rem; font-weight: 700; }
.budget-field input { min-height: 40px !important; padding-left: 10px !important; border: 1px solid var(--line) !important; background: rgba(3,18,10,.34) !important; font-size: .8rem !important; }
.budget-amount-field input { padding-left: 7px !important; border: 0 !important; background: transparent !important; }
.budget-field-tools { display: flex; gap: 10px; align-items: end; }
.budget-color-field { width: 92px; }
.budget-color-field select { width: 100%; min-height: 40px; padding: 0 7px; border: 1px solid var(--line); border-radius: 11px; color: var(--ink-soft); background: rgba(3,18,10,.34); font-size: .66rem; }
.budget-remove-button { min-height: 40px; padding: 0 4px; color: var(--muted-dim); font-size: .63rem; }
.budget-remove-button:hover { color: var(--red); }
.budget-field.is-removed .budget-remove-button { color: var(--mint); }
.budget-add-row { display: flex; gap: 15px; align-items: center; justify-content: space-between; padding: 13px 0 2px; border-bottom: 1px solid var(--line); }
.budget-add-row strong, .budget-add-row span { display: block; }
.budget-add-row strong { color: var(--ink-soft); font-size: .74rem; }
.budget-add-row span { margin-top: 4px; color: var(--muted); font-size: .63rem; line-height: 1.4; }
.budget-add-row .secondary-button { flex: 0 0 auto; min-height: 36px; padding: 0 11px; font-size: .67rem; }
.submit-button { width: 100%; margin-top: 5px; }
.toast { position: fixed; left: 50%; bottom: 30px; z-index: 70; display: inline-flex; gap: 14px; align-items: center; max-width: calc(100% - 32px); padding: 8px 9px 8px 15px; border: 1px solid rgba(158,231,165,.28); border-radius: 12px; color: var(--ink); background: rgba(13,43,25,.95); box-shadow: var(--shadow-soft); font-size: .74rem; opacity: 0; pointer-events: none; transform: translate(-50%, 15px); transition: opacity .25s ease, transform .25s ease; }
.toast.show { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.toast > span { min-width: 0; }
.toast-undo { min-width: 44px; min-height: 44px; padding: 0 10px; border: 1px solid rgba(158,231,165,.32); border-radius: 9px; color: #163822; background: var(--mint); font-size: .68rem; font-weight: 800; }
.toast-undo:hover { color: #163822; background: var(--ink); }

/* Review workspace */
.studio-launch { display: inline-flex; gap: 7px; align-items: center; min-height: 38px; padding: 0 12px; border: 1px solid rgba(158,231,165,.22); border-radius: 11px; color: var(--ink-soft); background: rgba(158,231,165,.08); font-size: .72rem; font-weight: 700; transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease; }
.studio-launch:hover { color: var(--ink); border-color: rgba(158,231,165,.42); background: rgba(158,231,165,.14); transform: translateY(-1px); }
.studio-launch .icon { width: 16px; height: 16px; color: var(--mint); }
.sidebar-workspace-label { margin-top: 30px; }
.review-nav-item { width: calc(100% - 0px); }
.review-nav-item .icon { color: var(--lilac); }
.review-nav-item.active .icon { color: var(--mint); }
.app-shell.is-studio .transaction-rail { opacity: 0; pointer-events: none; transform: translateY(14px); }
.app-shell.is-studio .bottom-nav { opacity: 0; pointer-events: none; transform: translate(-50%, 14px); }
.app-shell.is-studio .content-wrap { padding-bottom: 28px; }
.studio-view { min-width: 0; }
.studio-intro { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin: 20px 0 19px; }
.studio-intro h2 { max-width: 700px; margin: 4px 0 0; font-family: var(--font-display); font-size: clamp(1.55rem, 2.5vw, 2.25rem); letter-spacing: -.07em; line-height: 1.06; text-wrap: balance; }
.studio-intro .body-copy { max-width: 62ch; margin: 10px 0 0; color: var(--muted); font-size: var(--text-body-compact); }
.studio-intro-actions { display: flex; gap: 9px; flex: 0 0 auto; }
.studio-intro-actions .primary-button, .studio-intro-actions .secondary-button { min-height: 38px; }
.studio-shell { display: grid; grid-template-columns: 198px minmax(0, 1fr) 282px; min-height: 620px; height: calc(100vh - 242px); max-height: 795px; overflow: hidden; border: 1px solid rgba(185,243,190,.19); border-radius: 22px; background: #0b1711; box-shadow: 0 25px 80px rgba(0,0,0,.27), inset 0 1px 0 rgba(255,255,255,.08); }
.studio-pages-panel { display: flex; min-width: 0; flex-direction: column; padding: 16px 12px 12px; border-right: 1px solid rgba(221,255,226,.1); background: rgba(5,16,10,.78); }
.studio-panel-heading, .studio-inspector-heading, .studio-selection-heading { display: flex; justify-content: space-between; gap: 12px; align-items: start; }
.studio-panel-heading { padding: 2px 5px 13px; }
.studio-panel-heading strong, .studio-inspector-heading strong { display: block; margin-top: 2px; color: var(--ink-soft); font-size: .82rem; font-weight: 700; }
.studio-panel-kicker { margin: 0; color: var(--muted-dim); font-size: .59rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.studio-page-total, .studio-inspector-badge { display: inline-grid; min-width: 23px; height: 23px; place-items: center; border: 1px solid rgba(158,231,165,.15); border-radius: 8px; color: var(--mint); background: rgba(158,231,165,.08); font-size: .6rem; font-weight: 800; }
.studio-page-list { display: grid; gap: 7px; overflow: auto; padding: 1px 2px 8px; }
.studio-page-card { position: relative; display: grid; gap: 7px; width: 100%; padding: 7px; border: 1px solid transparent; border-radius: 13px; color: var(--muted); background: transparent; text-align: left; transition: border-color .18s ease, background .18s ease, transform .18s var(--ease-control), box-shadow .18s ease; }
.studio-page-card:hover { border-color: rgba(158,231,165,.16); background: rgba(158,231,165,.06); transform: translateY(-1px); }
.studio-page-card.active { border-color: rgba(158,231,165,.38); background: linear-gradient(145deg, rgba(101,173,108,.18), rgba(158,231,165,.06)); box-shadow: inset 0 0 0 1px rgba(158,231,165,.05); }
.studio-page-card:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; box-shadow: var(--focus-ring); }
.studio-page-card:active { transform: translateY(1px) scale(.985); }
.studio-thumbnail { display: block; height: 79px; overflow: hidden; border: 1px solid rgba(221,255,226,.12); border-radius: 8px; background: #0e2517; box-shadow: inset 0 1px 0 rgba(255,255,255,.09); }
.studio-thumbnail-content { display: block; width: 860px; min-height: 560px; padding: 34px 42px 76px; overflow: hidden; background: var(--night); transform: scale(.17); transform-origin: top left; pointer-events: none; }
.studio-thumbnail-content .view-intro { margin-top: 0; }
.studio-thumbnail-content .panel-surface, .studio-thumbnail-content .stack-panel, .studio-thumbnail-content .next-up-panel { box-shadow: none; }
.studio-page-meta { display: grid; gap: 1px; padding: 0 3px 1px; }
.studio-page-meta strong { overflow: hidden; color: var(--ink-soft); font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.studio-page-meta small { overflow: hidden; color: var(--muted-dim); font-size: .6rem; text-overflow: ellipsis; white-space: nowrap; }
.studio-page-comment-count { position: absolute; top: 12px; right: 12px; display: grid; min-width: 16px; height: 16px; place-items: center; border-radius: 999px; color: var(--night); background: var(--orange); font-size: .55rem; font-weight: 800; opacity: 0; }
.studio-page-comment-count.has-comments { opacity: 1; }
.studio-pages-footer { display: flex; gap: 7px; align-items: center; margin-top: auto; padding: 11px 5px 2px; border-top: 1px solid rgba(221,255,226,.08); color: var(--muted-dim); font-size: .59rem; }
.save-dot, .studio-live-dot { display: inline-block; width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--mint-strong); box-shadow: 0 0 0 4px rgba(117,217,144,.1); }
.studio-stage { display: flex; min-width: 0; min-height: 0; flex-direction: column; background: #0d1b14; }
.studio-toolbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 55px; padding: 0 14px; border-bottom: 1px solid rgba(221,255,226,.1); background: rgba(8,24,15,.85); }
.studio-tool-group, .studio-zoom-tools { display: flex; gap: 3px; align-items: center; }
.studio-zoom-tools { justify-content: end; color: var(--muted); font-size: .64rem; font-variant-numeric: tabular-nums; }
.studio-tool, .studio-zoom-button, .studio-fit-button { display: inline-grid; min-width: 29px; height: 29px; place-items: center; padding: 0 7px; border: 1px solid transparent; border-radius: 8px; color: var(--muted); background: transparent; transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s var(--ease-control), box-shadow .18s ease; }
.studio-tool:hover, .studio-zoom-button:hover, .studio-fit-button:hover { color: var(--ink); background: rgba(158,231,165,.08); }
.studio-tool.active { color: var(--mint); border-color: rgba(158,231,165,.25); background: rgba(158,231,165,.11); }
.studio-tool:focus-visible, .studio-zoom-button:focus-visible, .studio-fit-button:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; box-shadow: var(--focus-ring); }
.studio-tool:active, .studio-zoom-button:active, .studio-fit-button:active { transform: translateY(1px) scale(.95); background: rgba(158,231,165,.14); }
.studio-tool .icon, .studio-zoom-button .icon { width: 15px; height: 15px; }
.studio-fit-button { display: inline-flex; gap: 5px; margin-left: 7px; color: var(--muted); font-size: .63rem; }
.studio-fit-button .icon { width: 14px; height: 14px; }
.studio-canvas-title { display: inline-flex; gap: 8px; align-items: center; min-width: 0; color: var(--ink-soft); font-size: .72rem; }
.studio-canvas-title strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.studio-draft-pill { padding: 3px 7px; border: 1px solid rgba(198,155,239,.2); border-radius: 99px; color: var(--lilac); background: rgba(198,155,239,.08); font-size: .55rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.studio-canvas { position: relative; min-height: 0; flex: 1; overflow: hidden; background: #101f17; }
.studio-canvas-grid { position: absolute; inset: 0; opacity: .55; background-image: linear-gradient(rgba(221,255,226,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(221,255,226,.045) 1px, transparent 1px); background-size: 22px 22px; }
.studio-stage-scroll { position: absolute; inset: 0; overflow: auto; padding: 44px 34px 66px; }
.studio-artboard-frame { position: relative; flex: 0 0 auto; margin: 0 auto; }
.studio-artboard { position: relative; width: 860px; min-height: 560px; overflow: visible; border: 1px solid rgba(221,255,226,.17); border-radius: 5px; background: var(--night-deep); box-shadow: 0 30px 80px rgba(0,0,0,.36), 0 0 0 10px rgba(0,0,0,.08); transform-origin: top left; }
.studio-preview { position: relative; width: 860px; min-height: 560px; padding: 34px 42px 76px; overflow: hidden; border-radius: 5px; background: var(--night); }
.studio-preview .view-intro { margin-top: 0; }
.studio-preview .view { animation: none; }
.studio-preview [data-studio-key] { cursor: text; border-radius: 4px; transition: outline .16s ease, background .16s ease, box-shadow .16s ease; }
.studio-preview [data-studio-key]:hover { outline: 1px dashed rgba(158,231,165,.62); outline-offset: 4px; }
.studio-preview [data-studio-key].studio-target-selected { outline: 2px solid var(--lilac); outline-offset: 5px; box-shadow: 0 0 0 8px rgba(198,155,239,.11); }
.studio-preview button, .studio-preview input, .studio-preview select { pointer-events: none; }
.studio-preview .studio-icon-target { cursor: pointer; pointer-events: auto; }
.studio-preview .studio-icon-target.icon { width: var(--studio-icon-size, 18px); height: var(--studio-icon-size, 18px); }
.studio-preview .studio-icon-target:not(.icon) > svg { width: var(--studio-icon-size, 20px); height: var(--studio-icon-size, 20px); }
.studio-comment-layer { position: absolute; z-index: 20; inset: 0; pointer-events: none; }
.studio-comment-marker { position: absolute; display: grid; width: 25px; height: 25px; place-items: center; padding: 0; border: 2px solid #0b1711; border-radius: 50%; color: #21180c; background: var(--orange); box-shadow: 0 5px 16px rgba(0,0,0,.34), 0 0 0 5px rgba(243,165,82,.15); font-size: .64rem; font-weight: 800; pointer-events: auto; transform: translate(-50%, -50%); transition: transform .18s ease, background .18s ease; }
.studio-comment-marker:hover, .studio-comment-marker.selected { background: var(--mint); transform: translate(-50%, -50%) scale(1.1); }
.studio-comment-marker.resolved { color: var(--ink-soft); background: #547263; box-shadow: 0 4px 12px rgba(0,0,0,.24); }
.studio-comment-marker.pending { color: var(--night); background: var(--lilac); animation: comment-pulse 1.2s ease-in-out infinite; }
@keyframes comment-pulse { 50% { box-shadow: 0 0 0 9px rgba(198,155,239,.05); } }
.studio-canvas-hint { position: absolute; right: 16px; bottom: 15px; display: inline-flex; gap: 7px; align-items: center; padding: 7px 9px; border: 1px solid rgba(221,255,226,.11); border-radius: 8px; color: var(--muted-dim); background: rgba(7,19,13,.78); font-size: .59rem; pointer-events: none; }
.studio-canvas-hint .icon { width: 13px; height: 13px; color: var(--mint); }
.studio-canvas-hint b { color: var(--ink-soft); font-weight: 700; }
.studio-statusbar { display: flex; gap: 14px; align-items: center; min-height: 30px; padding: 0 14px; border-top: 1px solid rgba(221,255,226,.09); color: var(--muted-dim); background: rgba(8,24,15,.88); font-size: .57rem; }
.studio-statusbar > span { display: inline-flex; gap: 6px; align-items: center; }
.studio-status-icon { display: inline-grid; width: 12px; height: 12px; color: var(--lilac); }
.studio-status-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.studio-status-right { margin-left: auto; }
.studio-inspector { min-width: 0; overflow: auto; border-left: 1px solid rgba(221,255,226,.1); background: rgba(7,19,12,.9); }
.studio-inspector-tabs { display: grid; grid-template-columns: 1fr 1fr; min-height: 48px; padding: 5px; border-bottom: 1px solid rgba(221,255,226,.1); }
.studio-inspector-tabs button { border: 0; border-radius: 8px; color: var(--muted); background: transparent; font-size: .66rem; font-weight: 700; }
.studio-inspector-tabs button:hover { color: var(--ink-soft); background: rgba(158,231,165,.06); }
.studio-inspector-tabs button.active { color: var(--ink); background: rgba(158,231,165,.11); box-shadow: inset 0 -2px 0 var(--mint-strong); }
.studio-tab-count { display: inline-grid; min-width: 16px; height: 16px; margin-left: 3px; place-items: center; border-radius: 99px; color: var(--night); background: var(--orange); font-size: .52rem; }
.studio-inspector-panel { padding: 18px 15px 20px; }
.studio-inspector-badge { width: auto; padding: 0 7px; color: var(--muted); background: rgba(255,255,255,.04); font-size: .52rem; font-weight: 700; }
.studio-empty-selection { display: grid; gap: 8px; justify-items: start; margin-top: 30px; padding: 18px 15px; border: 1px dashed rgba(221,255,226,.14); border-radius: 13px; color: var(--muted); background: rgba(255,255,255,.025); }
.studio-empty-selection[hidden] { display: none; }
.studio-empty-selection .feature-icon { width: 30px; height: 30px; color: var(--mint); background: rgba(158,231,165,.09); }
.studio-empty-selection strong { color: var(--ink-soft); font-size: .75rem; }
.studio-empty-selection > span:last-child { font-size: .67rem; line-height: 1.5; }
.studio-selection-heading { margin-top: 28px; padding-bottom: 13px; border-bottom: 1px solid rgba(221,255,226,.1); }
.studio-selection-heading strong { display: block; margin-top: 3px; color: var(--ink-soft); font-size: .76rem; }
.studio-selected-chip { padding: 4px 7px; border-radius: 99px; color: var(--lilac); background: rgba(198,155,239,.1); font-size: .53rem; font-weight: 800; text-transform: uppercase; }
#studio-text-controls[hidden], #studio-icon-controls[hidden] { display: none; }
.studio-icon-edit-preview { display: flex; gap: 10px; align-items: center; margin-top: 16px; padding: 11px; border: 1px solid rgba(198,155,239,.18); border-radius: 12px; background: rgba(198,155,239,.06); }
.studio-icon-preview { display: inline-grid; width: 42px; height: 42px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(198,155,239,.28); border-radius: 12px; color: var(--lilac); background: rgba(198,155,239,.12); box-shadow: 0 7px 17px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.1); }
.studio-icon-preview > svg { width: var(--studio-icon-size, 20px); height: var(--studio-icon-size, 20px); }
.studio-icon-edit-preview > div { display: grid; min-width: 0; gap: 3px; }
.studio-icon-edit-preview strong { color: var(--ink-soft); font-size: .68rem; line-height: 1.35; }
.studio-icon-control-grid { grid-template-columns: minmax(0, 1.2fr) minmax(90px, .8fr); }
.studio-control { display: grid; gap: 7px; margin-top: 16px; }
.studio-control > span { color: var(--muted); font-size: .62rem; font-weight: 700; }
.studio-control textarea, .studio-control input, .studio-control select { width: 100%; min-height: 38px; padding: 9px 10px; border: 1px solid rgba(221,255,226,.13); border-radius: 9px; color: var(--ink-soft); background: rgba(0,8,4,.34); font-size: .69rem; resize: vertical; }
.studio-control textarea:focus, .studio-control input:focus, .studio-control select:focus { border-color: rgba(158,231,165,.45); outline: 2px solid rgba(158,231,165,.14); outline-offset: 1px; }
.studio-control textarea::placeholder { color: var(--muted-dim); }
.studio-control-grid { display: grid; grid-template-columns: .74fr 1.26fr; gap: 9px; }
.studio-input-with-suffix { position: relative; }
.studio-input-with-suffix input { padding-right: 30px; }
.studio-input-with-suffix small { position: absolute; top: 50%; right: 9px; color: var(--muted-dim); font-size: .61rem; transform: translateY(-50%); }
.studio-inspector-actions { display: flex; gap: 8px; margin-top: 18px; }
.studio-inspector-actions .primary-button, .studio-inspector-actions .secondary-button { flex: 1; min-height: 36px; padding: 0 9px; font-size: .65rem; }
.studio-inspector-note { display: flex; gap: 8px; align-items: start; margin-top: 24px; padding-top: 14px; border-top: 1px solid rgba(221,255,226,.1); color: var(--muted-dim); }
.studio-inspector-note .icon { width: 15px; height: 15px; flex: 0 0 auto; color: var(--lilac); }
.studio-inspector-note p { margin: 0; font-size: .63rem; line-height: 1.45; }
.studio-comment-form { margin-top: 23px; padding-bottom: 16px; border-bottom: 1px solid rgba(221,255,226,.1); }
.studio-comment-form .studio-control { margin-top: 0; }
.studio-comment-form-meta { display: flex; justify-content: space-between; gap: 8px; align-items: center; margin-top: 10px; color: var(--muted-dim); font-size: .57rem; }
.studio-comment-form-meta > span { display: flex; gap: 6px; align-items: center; min-width: 0; }
.studio-pin-preview { display: inline-grid; width: 17px; height: 17px; flex: 0 0 auto; place-items: center; border-radius: 50%; color: #21180c; background: var(--orange); font-size: .7rem; font-weight: 800; }
.studio-comment-form-meta button { min-height: 32px; padding: 0 9px; font-size: .62rem; }
.studio-comment-list { display: grid; gap: 9px; margin-top: 15px; }
.studio-comment-card { padding: 11px; border: 1px solid rgba(221,255,226,.1); border-radius: 12px; background: rgba(255,255,255,.035); transition: border-color .18s ease, background .18s ease; }
.studio-comment-card:hover, .studio-comment-card.selected { border-color: rgba(243,165,82,.35); background: rgba(243,165,82,.06); }
.studio-comment-card.resolved { opacity: .58; }
.studio-comment-card-top { display: flex; gap: 8px; align-items: center; }
.studio-comment-avatar { display: grid; width: 24px; height: 24px; flex: 0 0 auto; place-items: center; border-radius: 50%; color: #194a2b; background: var(--mint); font-size: .58rem; font-weight: 800; }
.studio-comment-card-top strong, .studio-comment-card-top small { display: block; }
.studio-comment-card-top strong { color: var(--ink-soft); font-size: .65rem; }
.studio-comment-card-top small { margin-top: 1px; color: var(--muted-dim); font-size: .56rem; }
.studio-comment-more { display: inline-grid; width: 24px; height: 24px; margin-left: auto; place-items: center; padding: 0; border: 0; border-radius: 7px; color: var(--muted); background: transparent; }
.studio-comment-more:hover { color: var(--mint); background: rgba(158,231,165,.1); }
.studio-comment-more svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.9; }
.studio-comment-card p { margin: 10px 0 0; color: var(--ink-soft); font-size: .68rem; line-height: 1.45; }
.studio-comment-card-footer { display: flex; justify-content: space-between; gap: 8px; margin-top: 10px; color: var(--muted-dim); font-size: .56rem; }
.studio-comment-card-footer button { padding: 0; border: 0; color: var(--mint); background: transparent; font-size: .56rem; font-weight: 700; }
.studio-empty-comments { display: grid; gap: 7px; justify-items: start; margin-top: 18px; padding: 16px 13px; border: 1px dashed rgba(221,255,226,.14); border-radius: 12px; color: var(--muted); }
.studio-empty-comments .feature-icon { width: 27px; height: 27px; color: var(--lilac); background: rgba(198,155,239,.09); }
.studio-empty-comments strong { color: var(--ink-soft); font-size: .7rem; }
.studio-empty-comments > span:last-child { font-size: .62rem; line-height: 1.45; }

@media (max-width: 1100px) {
  .topbar, .content-wrap { padding-right: 32px; padding-left: 32px; }
  .overview-grid, .two-column-grid, .insights-grid { grid-template-columns: 1fr; }
  .stack-panel { min-height: 300px; }
  .wallet-stack { max-width: 560px; }
  .wallet-detail-summary-grid, .wallet-detail-lower-grid { grid-template-columns: 1fr; }
  .commitment-list { grid-template-columns: 1fr; }
  .commitment-item, .commitment-item + .commitment-item { padding: 10px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .commitment-item:last-child { border-bottom: 0; }
  .recurring-summary-grid { grid-template-columns: 1fr; }
  .plan-grid { grid-template-columns: 1fr; }
  .category-detail-body { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  body { background: radial-gradient(circle at 90% 0%, rgba(79,150,94,.24), transparent 25rem), var(--night); }
  .sidebar { display: none; }
  .main-content { margin-left: 0; }
  .topbar { gap: 14px; padding: 20px 18px 14px; }
  .persistence-status { margin: 0 15px 16px; padding: 9px 11px; }
  .persistence-status-copy small { white-space: normal; }
  .persistence-status > .text-button { min-height: 38px; padding: 0 8px; }
  .topbar-actions { flex: 0 0 auto; gap: 8px; }
  .topbar-kicker { font-size: .62rem; }
  .topbar h1 { font-size: 1.38rem; }
  .topbar-actions .icon-button { display: none; }
  .content-wrap { padding: 0 15px calc(158px + env(safe-area-inset-bottom)); }
  .view-intro { align-items: stretch; flex-direction: column; margin: 18px 3px 19px; }
  .view-intro h2 { font-size: 1.75rem; }
  .view-intro > .primary-button, .view-intro > .secondary-button { width: 100%; }
  .month-aware-intro { align-items: stretch; flex-direction: column; }
  .month-aware-intro .month-picker { width: 100%; justify-content: stretch; }
  .month-aware-intro .month-control, .month-aware-intro .month-arrows { display: flex; width: auto; flex: 1; justify-content: space-between; }
  .month-aware-intro .month-control { padding: 0 8px; }
  .overview-grid { gap: 14px; }
  .setup-guide { padding: 20px; border-radius: 22px; }
  .setup-guide-heading { display: grid; gap: 10px; }
  .setup-guide-progress { justify-self: start; }
  .setup-guide-list { grid-template-columns: 1fr; }
  .setup-guide-item, .setup-guide-item + .setup-guide-item, .setup-guide-item:last-child { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto; gap: 0 10px; padding: 13px 0; border-right: 0; border-bottom: 1px solid rgba(221,255,226,.1); }
  .setup-guide-item + .setup-guide-item { padding-left: 0; }
  .setup-guide-item:last-child { padding-right: 0; border-bottom: 0; }
  .setup-guide-item-mark { grid-row: 1; }
  .setup-guide-item-copy { align-content: center; }
  .setup-guide-state, .setup-guide-action { align-self: center; justify-self: end; margin-top: 0; }
  .setup-guide-action { min-height: 36px; white-space: nowrap; }
  .hero-card, .stack-panel, .month-panel, .activity-panel, .next-up-panel, .plan-hero, .category-panel, .plan-note, .plan-category-detail, .full-activity-panel, .goals-summary, .net-worth-card, .distribution-card, .flow-card { padding: 20px; border-radius: 22px; }
  .hero-card { min-height: 274px; }
  .hero-amount { margin-top: 28px; font-size: 3rem; }
  .hero-footer { align-items: center; }
  .overview-commitment-strip { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
  .overview-commitment-link { grid-column: 2; justify-self: start; margin-top: 2px; }
  .plan-view-tabs { margin-bottom: 14px; }
  .plan-view-tab { min-height: 54px; gap: 8px; padding: 8px 9px; }
  .plan-view-tab-icon { width: 29px; height: 29px; border-radius: 10px; }
  .plan-tab-copy small { font-size: .57rem; }
  .plan-tab-count { min-width: 22px; height: 22px; font-size: .58rem; }
  .stack-panel { grid-template-rows: auto auto; }
  .stack-panel.is-deck-expanded { grid-template-rows: auto auto; }
  .stack-panel.has-wallet-back-stack:not(.is-deck-expanded) { grid-template-rows: auto auto; }
  .stack-panel > .panel-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
  .stack-panel > .panel-heading .wallet-panel-actions { grid-column: 1 / -1; width: 100%; justify-content: flex-end; padding-top: 8px; border-top: 1px solid rgba(221,255,226,.1); }
  .panel-heading-actions, .wallet-panel-actions { flex-wrap: wrap; justify-content: flex-end; }
  .cash-category-shelf { grid-template-rows: auto 220px; }
  .stack-panel.is-deck-expanded .cash-category-shelf { grid-template-rows: auto 338px; }
  .stack-panel.is-deck-expanded .cash-category-shelf.is-deck-count-1 { grid-template-rows: auto 173px; }
  .stack-panel.is-deck-expanded .cash-category-shelf.is-deck-count-2 { grid-template-rows: auto 228px; }
  .stack-panel.is-deck-expanded .cash-category-shelf.is-deck-count-3 { grid-template-rows: auto 283px; }
  .stack-panel.is-deck-expanded .cash-category-shelf.is-deck-count-4 { grid-template-rows: auto 338px; }
  .credit-category-shelf { grid-template-rows: auto 220px; }
  .credit-category-shelf.is-single-credit { grid-template-rows: auto 160px; }
  .credit-category-shelf.is-credit-deck-expanded { grid-template-rows: auto 338px; }
  .credit-category-shelf.is-credit-deck-expanded.is-deck-count-1 { grid-template-rows: auto 173px; }
  .credit-category-shelf.is-credit-deck-expanded.is-deck-count-2 { grid-template-rows: auto 228px; }
  .credit-category-shelf.is-credit-deck-expanded.is-deck-count-3 { grid-template-rows: auto 283px; }
  .credit-category-shelf.is-credit-deck-expanded.is-deck-count-4 { grid-template-rows: auto 338px; }
  .wallet-stack { height: auto; }
  .wallet-stack.is-expanded { height: auto; }
  .wallet-category-shelf { padding: 14px; }
  .wallet-group-label-row { align-items: start; }
  .wallet-group-label-row strong { font-size: .84rem; }
  .wallet-group-label-row > div > span { max-width: 30ch; font-size: .74rem; line-height: 1.4; }
  .wallet-credit-group-label { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; }
  .wallet-credit-group-label > .wallet-credit-actions { grid-column: 1 / -1; grid-row: 2; width: 100%; justify-self: stretch; margin-top: 2px; padding-top: 8px; border-top: 1px solid rgba(221,255,226,.1); }
  .wallet-credit-actions { gap: 7px; }
  .wallet-credit-actions .text-button, .wallet-panel-actions .wallet-deck-toggle-button { min-height: 44px; padding: 0 13px; font-size: .74rem; letter-spacing: -.01em; }
  .wallet-credit-actions .text-button { flex: 0 1 auto; }
  .wallet-credit-actions .icon { width: 15px; height: 15px; }
  .wallet-group-count { font-size: .62rem; letter-spacing: .03em; }
  .credit-card-shelf { grid-template-columns: 1fr; }
  .wallet-credit-empty { align-items: flex-start; flex-wrap: wrap; }
  .wallet-credit-empty .small-button { margin-left: auto; }
  .wallet-stack.is-expanded .wallet-card-orange { top: 55px; }
  .wallet-stack.is-expanded .wallet-card-ink { top: 110px; }
  .wallet-stack.is-expanded .wallet-card-front { top: 165px; }
  .wallet-stack.is-expanded.is-deck-count-1 .wallet-card-depth-front { top: 0; }
  .wallet-stack.is-expanded.is-deck-count-2 .wallet-card-depth-front { top: 55px; }
  .wallet-stack.is-expanded.is-deck-count-3 .wallet-card-depth-front { top: 110px; }
  .wallet-stack.is-expanded.is-deck-count-4 .wallet-card-depth-front { top: 165px; }
  .credit-card-shelf.is-expanded .wallet-card-depth-1 { top: 55px; }
  .credit-card-shelf.is-expanded .wallet-card-depth-2 { top: 110px; }
  .credit-card-shelf.is-expanded .wallet-card-depth-front { top: 165px; }
  .credit-card-shelf.is-expanded.is-deck-count-1 .wallet-card-depth-front { top: 0; }
  .credit-card-shelf.is-expanded.is-deck-count-2 .wallet-card-depth-front { top: 55px; }
  .credit-card-shelf.is-expanded.is-deck-count-3 .wallet-card-depth-front { top: 110px; }
  .credit-card-shelf.is-expanded.is-deck-count-4 .wallet-card-depth-front { top: 165px; }
  .wallet-card { right: 0; left: 0; }
  .wallet-card-back > span { font-size: .66rem; }
  .two-column-grid { gap: 14px; margin-top: 14px; }
  .month-summary { gap: 16px; }
  .arc-chart { width: 125px; height: 74px; }
  .summary-stats { gap: 8px; }
  .summary-stats strong { font-size: .75rem; }
  .next-up-panel { margin-top: 14px; }
  .panel-heading h3 { font-size: 1rem; }
  .commitment-item b { font-size: .68rem; }
  .panel-heading > .text-button { min-height: 40px; padding: 0 8px; }
  .bottom-nav { position: fixed; right: auto; bottom: calc(10px + env(safe-area-inset-bottom)); left: 50%; z-index: 18; display: grid; width: min(calc(100% - 24px), 480px); grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; padding: 7px; border: 1px solid rgba(178,245,178,.16); border-radius: 24px; background: linear-gradient(180deg, rgba(18,43,28,.94), rgba(7,23,15,.97)); box-shadow: 0 24px 60px rgba(0,0,0,.42), 0 4px 16px rgba(61,143,82,.08), inset 0 1px 0 rgba(255,255,255,.13); transform: translateX(-50%); isolation: isolate; backdrop-filter: blur(22px); }
  .bottom-nav::before { position: absolute; top: 1px; right: 17%; left: 17%; z-index: 0; height: 1px; border-radius: 99px; background: linear-gradient(90deg, transparent, rgba(158,231,165,.26), transparent); content: ''; pointer-events: none; }
  .bottom-nav .nav-item { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 4px; justify-content: center; align-items: center; min-height: 54px; padding: 4px 2px 7px; border: 1px solid transparent; border-radius: 17px; color: var(--muted); text-align: center; font-size: .59rem; font-weight: 600; letter-spacing: -.01em; line-height: 1; transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s var(--ease-control); }
  .bottom-nav .nav-item:hover { color: var(--ink-soft); border-color: rgba(158,231,165,.08); background: rgba(158,231,165,.045); }
  .bottom-nav .nav-item:active { transform: translateY(1px) scale(.98); }
  .bottom-nav .nav-item.active { color: var(--mint); border-color: transparent; background: transparent; box-shadow: none; }
  .bottom-nav .nav-item.active::after { position: absolute; right: 50%; bottom: 3px; width: 17px; height: 3px; border-radius: 99px; background: var(--mint-strong); box-shadow: 0 0 12px rgba(117,217,144,.45); content: ''; transform: translateX(50%); }
  .bottom-nav .nav-item .icon { display: grid; width: 22px; height: 22px; place-items: center; padding: 3px; border: 1px solid rgba(221,255,226,.08); border-radius: 50%; color: currentColor; background: rgba(255,255,255,.025); transition: border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s var(--ease-control); }
  .bottom-nav .nav-item:hover .icon { border-color: rgba(158,231,165,.2); background: rgba(158,231,165,.08); transform: translateY(-1px); }
  .bottom-nav .nav-item.active .icon { border-color: rgba(158,231,165,.35); background: rgba(158,231,165,.12); box-shadow: 0 0 0 5px rgba(158,231,165,.045), inset 0 1px 0 rgba(255,255,255,.12); }
  .bottom-nav .nav-item:nth-child(2) .icon { color: var(--lilac); }
  .bottom-nav .nav-item:nth-child(3) .icon { color: var(--cyan); }
  .bottom-nav .nav-item:nth-child(4) .icon { color: var(--orange); }
  .bottom-nav .nav-item:nth-child(5) .icon { color: var(--lime); }
  .bottom-nav .nav-item.active .icon { color: var(--mint); }
  .transaction-rail { right: max(14px, calc(env(safe-area-inset-right) + 10px)); bottom: calc(82px + env(safe-area-inset-bottom)); left: auto; width: 72px; height: 72px; justify-content: initial; min-height: 72px; padding: 6px; border-radius: 50%; gap: 0; transform: none; }
  .transaction-rail.is-expanded { z-index: 26; }
  .is-wallet-detail .transaction-rail, .app-shell.is-studio .transaction-rail { transform: translateY(14px); }
  .rail-toggle { gap: 0; }
  .rail-spark { width: 34px; height: 34px; }
  .rail-spark svg { width: 14px; height: 14px; }
  .rail-toggle-icon { right: -1px; bottom: -1px; width: 20px !important; height: 20px !important; margin: 0; }
  .rail-actions { right: 0; left: auto; width: min(148px, calc(100vw - 28px)); gap: 8px; transform: translateY(14px); }
  .transaction-rail.is-expanded .rail-actions { transform: translateY(0); }
  .rail-action { width: 100%; height: 48px; min-height: 48px; border-radius: 16px; }
  .rail-action .icon { width: 27px; height: 27px; padding: 5px; }
  .rail-action-label { font-size: .57rem; }
  .transaction-modal { padding-bottom: calc(30px + env(safe-area-inset-bottom)); scroll-padding-bottom: 24px; }
  .transaction-modal input, .transaction-modal select, .transaction-modal textarea { font-size: 16px; }
  .plan-hero { align-items: start; flex-direction: column; }
  .large-arc { align-self: center; width: 220px; }
  .plan-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
  .plan-note-actions { align-items: stretch; flex-direction: column; }
  .plan-note-actions .secondary-button, .plan-note-actions .text-button { width: 100%; justify-content: flex-start; }
  .category-detail-body { gap: 15px; }
  .category-detail-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .category-detail-section-heading { align-items: start; flex-direction: column; gap: 4px; }
  .category-detail-section-meta { width: 100%; justify-content: flex-start; align-items: flex-start; gap: 8px 12px; }
  .category-detail-section-meta .muted-copy { width: 100%; max-width: none; text-align: left; }
  .category-detail-actions { padding: 15px; }
  .goal-summary-stats { gap: 14px; }
  .goal-summary-stats strong { font-size: .76rem; }
  .goals-summary { grid-template-columns: 1fr; }
  .goal-summary-stats { grid-row: 2; }
  .overall-progress { grid-column: auto; }
  .goal-grid { grid-template-columns: 1fr 1fr; gap: 11px; }
  .goal-card { padding: 16px; }
  .goal-card h3 { font-size: .86rem; }
  .goal-card p, .goal-card-footer { font-size: .61rem; }
  .distribution-content { align-items: start; flex-direction: column; }
  .donut-chart { align-self: center; }
  .bar-chart { padding: 0 2px 6px; }
  .filter-search { width: 100%; margin-left: 0; }
  .filter-search input { width: 100%; }
  .month-aware-intro .month-arrows [data-month-label] { flex: 1; }
  .wallet-detail-intro { align-items: stretch; flex-direction: column; }
  .wallet-detail-intro-tools { width: 100%; justify-items: stretch; }
  .wallet-detail-intro-tools .month-picker { width: 100%; justify-content: stretch; }
  .wallet-detail-intro-tools .month-control { flex: 1; }
  .wallet-detail-actions { width: 100%; justify-content: flex-start; }
  .wallet-detail-actions .primary-button, .wallet-detail-actions .secondary-button { flex: 1; }
  .wallet-transaction-picker { position: static; width: 100%; margin-top: 1px; }
  .credit-debt-panel { padding: 20px; border-radius: 22px; }
  .credit-debt-header { align-items: stretch; flex-direction: column; gap: 12px; }
  .credit-debt-header .trend-pill { align-self: flex-start; }
  .credit-debt-title-group h3 { font-size: 1.02rem; }
  .credit-debt-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .credit-debt-plan { grid-template-columns: 1fr; gap: 18px; }
  .credit-debt-payment-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 8px; }
  .credit-debt-payment-grid > div { padding-left: 9px; }
  .credit-debt-actions { justify-content: stretch; }
  .credit-debt-actions .primary-button, .credit-debt-actions .secondary-button { flex: 1; }
  .recurring-view-intro { align-items: stretch; flex-direction: column; }
  .recurring-view-intro > .primary-button { width: 100%; }
  .recurring-total-card, .recurring-next-card, .recurring-manager-panel { padding: 20px; border-radius: 22px; }
  .recurring-total-footer { margin-top: 22px; }
  .state-callout { align-items: start; flex-wrap: wrap; }
  .state-callout > .text-button { width: calc(100% - 42px); margin-left: 42px; justify-content: flex-start; }
  .recurring-toolbar { align-items: stretch; flex-direction: column; }
  .recurring-filters { width: 100%; justify-content: space-between; }
  .recurring-filter { flex: 1; justify-content: center; padding: 0 7px; }
  .recurring-manager-row { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .recurring-row-main { grid-template-columns: 47px minmax(0, 1fr); gap: 12px; }
  .recurring-date-tile { width: 47px; height: 53px; }
  .recurring-row-heading { gap: 9px; }
  .recurring-row-actions { grid-column: 1 / -1; justify-content: flex-start; padding-top: 11px; border-top: 1px solid rgba(221,255,226,.09); }
  .recurring-row-actions .primary-button, .recurring-row-actions .secondary-button { min-height: 44px; }
  .recurring-remove-confirmation { align-items: stretch; flex-direction: column; }
  .recurring-remove-confirmation .confirmation-actions { width: 100%; }
  .recurring-detail-context { align-items: start; flex-wrap: wrap; }
  .recurring-detail-context-copy { flex: 1; }
  .recurring-detail-context-actions { width: 100%; margin-left: 42px; align-items: stretch; flex-direction: column; }
  .recurring-detail-context-actions .text-button { width: 100%; justify-content: flex-start; }
  .recurring-reconciliation-heading { align-items: flex-start; }
  .recurring-reconciliation-heading .commitment-status { white-space: nowrap; }
  .recurring-link-preview { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
  .recurring-link-pills { grid-column: 2; justify-content: flex-start; max-width: none; }
  .recurring-detail-menu { justify-content: flex-start; }
  .wallet-detail-hero { min-height: 320px; padding: 22px; flex-direction: column; }
  .wallet-detail-hero-copy .eyebrow { margin-top: 22px; }
  .wallet-detail-hero-copy > strong { font-size: 3rem; }
  .wallet-detail-hero-side { min-width: 0; grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .wallet-detail-summary, .wallet-insight-card, .wallet-detail-activity, .wallet-detail-breakdown { padding: 20px; border-radius: 22px; }
  .wallet-detail-metrics { gap: 10px; }
  .wallet-detail-metrics strong { font-size: .78rem; }
  .wallet-detail-commitment-strip { align-items: flex-start; }
  .wallet-detail-commitment-strip-actions { gap: 8px; align-items: flex-start; margin-top: 2px; }
  .wallet-detail-commitment-strip-actions .text-button { margin-top: 0; }
  .wallet-detail-commitment-row { gap: 6px; }
  .wallet-detail-commitment-main { grid-template-columns: 32px minmax(0, 1fr) auto 14px; gap: 7px; padding: 4px 2px 4px 0; }
  .wallet-detail-commitment-date { width: 32px; height: 36px; }
  .wallet-detail-commitment-date strong { font-size: .68rem; }
  .wallet-detail-commitment-amount { font-size: .64rem; }
  .wallet-detail-commitment-action { min-height: 40px; padding: 0 8px; font-size: .57rem; }
  .wallet-activity-toolbar { align-items: stretch; flex-direction: column; margin-top: 15px; }
  .wallet-activity-scope { width: 100%; justify-content: space-between; }
  .wallet-activity-scope-button { flex: 1; }
  .wallet-activity-filters { width: 100%; justify-content: space-between; }
  .wallet-activity-filter { flex: 1; padding: 0 8px; }
  .is-wallet-deck-expanded .transaction-rail { opacity: 0; pointer-events: none; transform: translateY(14px); }
  .is-wallet-deck-expanded .bottom-nav { opacity: 0; pointer-events: none; transform: translate(-50%, 14px); }
  .modal-backdrop { align-items: end; padding: 0; }
  .onboarding-backdrop { padding: 14px; }
  .onboarding-modal { width: 100%; max-height: calc(100vh - 28px); padding: 24px 19px 22px; border-radius: 25px; }
  .onboarding-brand { margin-bottom: 25px; }
  .onboarding-step h2 { font-size: 2rem; }
  .onboarding-points { margin-top: 22px; margin-bottom: 22px; }
  .onboarding-points > div { padding: 12px 0; }
  .onboarding-plan-fields { max-height: 265px; margin-top: 19px; }
  .onboarding-plan-field { grid-template-columns: minmax(0, 1fr) minmax(112px, .8fr); }
  .onboarding-plan-color { grid-column: 1; }
  .onboarding-plan-remove { grid-column: 2; justify-self: end; }
  .transaction-modal { width: 100%; border-radius: 25px 25px 0 0; padding: 22px 18px 30px; }
  .transaction-entry-modal { max-height: calc(100vh - 16px); overflow-y: auto; }
  .transaction-type-choice { gap: 6px; padding: 7px 6px; }
  .transaction-type-choice-icon { width: 27px; height: 27px; }
  .transaction-detail-meta { gap: 13px 11px; }
  .detail-actions { flex-direction: column; }
  .delete-confirmation { align-items: stretch; flex-direction: column; }
  .confirmation-actions { width: 100%; }
  .confirmation-actions button { flex: 1; }
  .account-manager-description, .account-editor-description { font-size: .76rem; }
  .account-manager-list { max-height: 52vh; }
  .account-manager-row { gap: 11px 12px; padding: 12px; }
  .account-manager-row-main strong { font-size: .72rem; }
  .account-manager-footer { align-items: stretch; flex-direction: column; }
  .account-manager-footer-copy, .account-manager-footer-actions { width: 100%; }
  .account-manager-footer-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .account-manager-footer-actions button { width: 100%; }
  .account-manager-footer-actions .primary-button { grid-column: 1 / -1; }
  .account-archive-confirmation { align-items: stretch; flex-direction: column; }
  .account-archive-confirmation .confirmation-actions { width: 100%; }
  .account-editor-modal input, .account-editor-modal select { font-size: 16px; }
  .budget-field { grid-template-columns: minmax(0, 1fr) 118px auto; gap: 8px; }
  .budget-color-field { width: 78px; }
  .budget-field-tools { gap: 6px; }
}

@media (max-width: 480px) {
  .form-two-col { grid-template-columns: 1fr; }
  .credit-debt-overview { grid-template-columns: 1fr; }
  .transaction-special-type-list { grid-template-columns: 1fr; }
  .modal-header { gap: 12px; margin-bottom: 20px; }
  .modal-header h2 { font-size: 1.4rem; }
  .transaction-modal { padding-right: 16px; padding-left: 16px; }
  .budget-field { grid-template-columns: minmax(0, 1fr) minmax(104px, .8fr); gap: 8px; }
  .budget-field-tools { grid-column: 1 / -1; align-items: center; justify-content: space-between; }
  .budget-color-field { width: 96px; }
  .budget-remove-button { min-height: 40px; padding: 0 8px; }
}

@media (max-width: 390px) {
  .hero-amount { font-size: 2.65rem; }
  .hero-card { min-height: 258px; }
  .stack-panel { grid-template-rows: auto auto; }
  .stack-panel.is-deck-expanded { grid-template-rows: auto auto; }
  .stack-panel.has-wallet-back-stack:not(.is-deck-expanded) { grid-template-rows: auto auto; }
  .cash-category-shelf { grid-template-rows: auto 208px; }
  .stack-panel.is-deck-expanded .cash-category-shelf { grid-template-rows: auto 326px; }
  .stack-panel.is-deck-expanded .cash-category-shelf.is-deck-count-1 { grid-template-rows: auto 168px; }
  .stack-panel.is-deck-expanded .cash-category-shelf.is-deck-count-2 { grid-template-rows: auto 221px; }
  .stack-panel.is-deck-expanded .cash-category-shelf.is-deck-count-3 { grid-template-rows: auto 274px; }
  .stack-panel.is-deck-expanded .cash-category-shelf.is-deck-count-4 { grid-template-rows: auto 326px; }
  .credit-category-shelf { grid-template-rows: auto 208px; }
  .credit-category-shelf.is-single-credit { grid-template-rows: auto 140px; }
  .credit-category-shelf.is-credit-deck-expanded { grid-template-rows: auto 326px; }
  .credit-category-shelf.is-credit-deck-expanded.is-deck-count-1 { grid-template-rows: auto 168px; }
  .credit-category-shelf.is-credit-deck-expanded.is-deck-count-2 { grid-template-rows: auto 221px; }
  .credit-category-shelf.is-credit-deck-expanded.is-deck-count-3 { grid-template-rows: auto 274px; }
  .credit-category-shelf.is-credit-deck-expanded.is-deck-count-4 { grid-template-rows: auto 326px; }
  .wallet-stack { height: auto; }
  .wallet-stack.is-expanded { height: auto; }
  .wallet-category-shelf { padding: 12px; }
  .wallet-card-credit { height: 92px; min-height: 92px; padding: 12px 14px; }
  .wallet-credit-empty .small-button { width: 100%; margin-left: 0; }
  .wallet-stack.is-expanded .wallet-card-ink { top: 106px; }
  .wallet-stack.is-expanded .wallet-card-front { top: 158px; }
  .wallet-stack.is-expanded.is-deck-count-1 .wallet-card-depth-front { top: 0; }
  .wallet-stack.is-expanded.is-deck-count-2 .wallet-card-depth-front { top: 53px; }
  .wallet-stack.is-expanded.is-deck-count-3 .wallet-card-depth-front { top: 106px; }
  .wallet-stack.is-expanded.is-deck-count-4 .wallet-card-depth-front { top: 158px; }
  .credit-card-shelf.is-expanded .wallet-card-depth-1 { top: 55px; }
  .credit-card-shelf.is-expanded .wallet-card-depth-2 { top: 106px; }
  .credit-card-shelf.is-expanded .wallet-card-depth-front { top: 158px; }
  .credit-card-shelf.is-expanded.is-deck-count-1 .wallet-card-depth-front { top: 0; }
  .credit-card-shelf.is-expanded.is-deck-count-2 .wallet-card-depth-front { top: 53px; }
  .credit-card-shelf.is-expanded.is-deck-count-3 .wallet-card-depth-front { top: 106px; }
  .credit-card-shelf.is-expanded.is-deck-count-4 .wallet-card-depth-front { top: 158px; }
  .wallet-card-front { height: 140px; min-height: 140px; padding: 14px; }
  .wallet-card-front strong { font-size: 1.32rem; }
  .wallet-card-bottom { gap: 6px; }
  .wallet-add { width: 44px; height: 44px; flex: 0 0 auto; }
  .month-summary { align-items: start; flex-direction: column; }
  .credit-debt-overview { grid-template-columns: 1fr; }
  .credit-debt-actions { align-items: stretch; flex-direction: column; }
  .summary-stats { width: 100%; }
  .goal-grid { grid-template-columns: 1fr; }
  .goal-summary-stats { justify-content: space-between; }
  .goal-card-footer { flex-wrap: wrap; }
  .goal-delete-confirmation { align-items: stretch; flex-direction: column; }
  .goal-delete-confirmation .confirmation-actions { width: 100%; }
  .goal-delete-confirmation .confirmation-actions button { flex: 1; }
  .goal-editor-modal .form-two-col { grid-template-columns: 1fr; }
  .budget-field { grid-template-columns: minmax(0, 1fr) minmax(94px, .8fr); gap: 7px; }
  .budget-field-tools { grid-column: 1 / -1; align-items: center; justify-content: space-between; }
  .budget-color-field { width: 94px; }
  .budget-remove-button { min-height: 40px; padding: 0 7px; font-size: .6rem; }
  .budget-add-row { align-items: start; flex-direction: column; }
  .budget-add-row .secondary-button { width: 100%; }
  #transaction-form .form-two-col { grid-template-columns: 1fr; }
  .transaction-type-choice { gap: 5px; padding-right: 4px; padding-left: 4px; }
  .transaction-type-choice strong { font-size: .62rem; }
  .transaction-type-choice small { font-size: .5rem; }
}

@media (max-width: 1100px) {
  .studio-shell { grid-template-columns: 184px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; height: calc(100vh - 230px); max-height: none; }
  .studio-inspector { grid-column: 1 / -1; max-height: 280px; border-top: 1px solid rgba(221,255,226,.1); border-left: 0; }
  .studio-inspector-panel { padding: 15px 20px 18px; }
  .studio-empty-selection { margin-top: 18px; }
  .studio-selection-heading { margin-top: 18px; }
  .studio-inspector-note { display: none; }
  .studio-comment-form { margin-top: 15px; }
  .studio-comment-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .studio-launch { min-height: 40px; padding: 0 12px; }
  .studio-launch > span:last-child { display: none; }
  .studio-intro { align-items: start; flex-direction: column; margin-top: 17px; }
  .studio-intro-actions { width: 100%; }
  .studio-intro-actions .primary-button, .studio-intro-actions .secondary-button { flex: 1; }
  .studio-shell { display: flex; height: auto; min-height: 0; max-height: none; flex-direction: column; overflow: visible; border-radius: 18px; }
  .studio-pages-panel { order: 0; padding: 11px 10px 10px; border-right: 0; border-bottom: 1px solid rgba(221,255,226,.1); }
  .studio-panel-heading { display: none; }
  .studio-page-list { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 0; }
  .studio-page-card { width: 145px; min-width: 145px; padding: 6px; }
  .studio-thumbnail { height: 66px; }
  .studio-thumbnail-content { transform: scale(.14); }
  .studio-pages-footer { display: none; }
  .studio-stage { order: 1; min-height: 575px; }
  .studio-inspector { order: 2; max-height: none; border-top: 0; border-left: 0; }
  .studio-toolbar { grid-template-columns: auto 1fr auto; padding: 0 9px; }
  .studio-canvas-title { justify-self: center; }
  .studio-stage-scroll { padding: 28px 18px 58px; }
  .studio-canvas-hint { right: 10px; bottom: 10px; max-width: calc(100% - 20px); font-size: .54rem; }
  .studio-statusbar > span:nth-child(2) { display: none; }
  .studio-inspector-panel { padding: 17px 15px 20px; }
  .studio-comment-list { grid-template-columns: 1fr; }
}

@media (max-width: 380px) {
  .transaction-rail { right: max(12px, calc(env(safe-area-inset-right) + 8px)); }
  .transaction-rail { width: 64px; height: 64px; min-height: 64px; }
  .rail-spark { width: 30px; height: 30px; }
  .rail-actions { width: 126px; }
  .rail-action { width: 126px; padding-right: 9px; padding-left: 9px; }
  .rail-action-label { display: block; font-size: .52rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .wallet-card-button, .cash-category-shelf, .credit-category-shelf, .wallet-stack, .stack-panel, .transaction-rail, .bottom-nav, .modal-backdrop, .transaction-modal, .wallet-transaction-picker, .credit-debt-usage-track span, .plan-view-tab, .overview-commitment-strip, .plan-commitment-summary { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}