:root {
    /* Design tokens — colors */
    --color-bg: #ffffff;
    --color-bg-sidebar: #f2f2f4;
    --color-bg-card: #f3f3f5;
    --color-bg-raised: #ffffff;

    --color-text-primary: #111113;
    --color-text-secondary: #77777d;
    --color-text-muted: #828289;
    --color-text-muted-alt: #85858b;
    --color-text-muted-light: #898990;

    --color-border: #e3e3e6;
    --color-border-strong: #dedee3;
    --color-divider: #e6e6e8;
    --color-divider-strong: #e8e8ea;
    --color-ring-track: #e5e5e9;

    /* Section title token — secondary gray for headings directly above cards */
    --color-section-title: var(--color-text-secondary);

    --color-income: #5dc867;
    --color-income-bg: #e8f5e9;
    --color-expense: #f04a47;
    --color-expense-bg: #fce4ec;
    --color-primary: #007AFF;

    /* Design tokens — radii */
    --radius-card: 28px;
    --radius-nav: 13px;
    --radius-pill: 100px;
    --radius-full: 50%;
    --radius-22: 22px;
    --radius-25: 25px;

    /* Card inset tokens — unified edge padding */
    --card-inset-mobile: 14px;
    --card-inset-desktop: 18px;

    /* Design tokens — spacing */
    --space-4: 4px;
    --space-6: 6px;
    --space-8: 8px;
    --space-10: 10px;
    --space-12: 12px;
    --space-16: 16px;
    --space-20: 20px;
    --space-24: 24px;
    --space-28: 28px;
    --space-32: 32px;

    /* Design tokens — shadow */
    --shadow-card-hover: 0 3px 10px rgba(225, 225, 230, 0.4);
    --shadow-floating: 0 10px 28px #d6d6dc;
    --shadow-toolbar: 0 4px 12px rgba(180, 180, 190, 0.35);

    /* Design tokens — stacking */
    --z-modal: 100;
    --z-overlay: 200;
    --z-toast: 9999;

    /* Design tokens — transition */
    --transition-card: transform .16s ease, box-shadow .16s ease;

    /* Design tokens — typography */
    --font-size-title-desktop: 30px;
    --font-size-title-mobile: 34px;
    --font-size-section-desktop: 18px;
    --font-size-section-mobile: 22px;
    --font-size-body: 16px;
    --font-size-caption: 14px;
    --font-weight-medium: 580;
    --font-weight-semibold: 600;
    --font-weight-bold: 650;
    --font-weight-heavy: 750;
    --font-weight-black: 800;

    --line-height-solid: 1;
    --letter-spacing-tight: -1px;

    --font-size-caption-sm-desktop: 12px;
    --font-size-caption-sm-mobile: 13px;
    --font-size-amount-secondary-desktop: 16px;
    --font-size-amount-secondary-mobile: 18px;

    /* Primary amount typography — matches .balance-card > strong */
    --font-size-amount-primary-mobile: 30px;
    --font-size-amount-primary-desktop: 32px;

    color: var(--color-text-primary);
    background: var(--color-bg);
    font-family: ui-rounded, "SF Pro Rounded", "SF Pro Display", "Finance Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-synthesis: none;
}

/* ── Dark palette ── */
[data-theme="dark"] {
    --color-bg: #1c1c1e;
    --color-bg-sidebar: #18181a;
    --color-bg-card: #2c2c2e;
    --color-bg-raised: #38383a;

    --color-text-primary: #f5f5f7;
    --color-text-secondary: #98989d;
    --color-text-muted: #8e8e93;
    --color-text-muted-alt: #8a8a90;
    --color-text-muted-light: #84848a;

    --color-border: #3a3a3c;
    --color-border-strong: #3e3e40;
    --color-divider: #3a3a3c;
    --color-divider-strong: #3c3c3e;
    --color-ring-track: #3a3a3c;

    --color-primary: #0a84ff;
    --color-income: #5dc867;
    --color-income-bg: #193c20;
    --color-expense: #f04a47;
    --color-expense-bg: #4a1f22;

    --shadow-card-hover: 0 3px 10px rgba(0, 0, 0, 0.25);
    --shadow-floating: 0 10px 28px rgba(0, 0, 0, 0.4);
    --shadow-toolbar: 0 4px 12px rgba(0, 0, 0, 0.4);

    --avatar-start: #555559;
    --avatar-end: #3a3a3d;
    --avatar-border: #ffffff20;
    --nav-hover-bg: rgba(255, 255, 255, 0.06);
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 248px minmax(0, 1fr); }
.app-shell--no-sidebar { grid-template-columns: minmax(0, 1fr); }
.sidebar { display: flex; flex-direction: column; padding: 26px var(--space-20) var(--space-24); background: var(--color-bg-sidebar); border-right: 1px solid var(--color-border); }
.account-menu { position: relative; }
.account { display: flex; align-items: center; gap: var(--space-10); width: 100%; height: 36px; padding: 0 var(--space-12); border: 0; border-radius: var(--radius-nav); color: var(--color-text-secondary); background: transparent; text-align: left; cursor: pointer; }
.account__avatar { flex: 0 0 auto; width: 30px; height: 30px; border-radius: var(--radius-full); background: linear-gradient(145deg, var(--avatar-start, #b7b7bd), var(--avatar-end, #85858d)); box-shadow: inset 0 0 0 1px var(--avatar-border, #ffffff80); }
.account__name { overflow: hidden; font-size: 15px; font-weight: var(--font-weight-bold); letter-spacing: -.2px; text-overflow: ellipsis; white-space: nowrap; }
.account-popover { position: absolute; left: 8px; right: 8px; bottom: calc(100% + 8px); z-index: 20; padding: 6px; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-bg-raised); box-shadow: 0 10px 30px rgb(0 0 0 / 14%); }
.account-popover[hidden] { display: none; }
.account-popover__item { display: block; width: 100%; padding: 9px 10px; border: 0; border-radius: 8px; color: var(--color-text-primary); background: transparent; font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.account-popover__item:hover { background: var(--color-bg-card); }
.account-popover__logout { color: var(--color-expense); }
.account-popover__logout:disabled { opacity: .55; cursor: default; }
.brand { font-size: 25px; font-weight: var(--font-weight-heavy); letter-spacing: -.7px; padding: 0 var(--space-12) 44px; }
.nav { display: grid; gap: var(--space-4); }
.nav__item { display: flex; align-items: center; gap: 13px; padding: 11px var(--space-12); border-radius: var(--radius-nav); color: var(--color-text-secondary); font-size: var(--font-size-body); font-weight: var(--font-weight-medium); }
.nav__item span { width: 18px; font-size: 21px; line-height: var(--line-height-solid); text-align: center; }
.nav__item--active { color: var(--color-text-primary); background: var(--color-bg-raised); }
.nav__separator { height: 1px; margin: var(--space-12) var(--space-12); background: var(--color-border-strong); }
.sidebar__footer { margin-top: auto; padding-top: 18px; }
.icon-button, .add-button { border: 0; background: var(--color-bg-raised); color: var(--color-text-primary); cursor: pointer; }

/* Round floating action button for budget settings — replaces add-button on budget routes */
.budget-settings-button {
    border: 0;
    width: 46px;
    height: 46px;
    border-radius: var(--radius-full);
    background: var(--color-bg-raised);
    color: var(--color-text-primary);
    cursor: pointer;
    display: grid;
    place-items: center;
    padding: 0;
    z-index: 2;
    transition: var(--transition-card);
}

.budget-settings-button:active {
    transform: scale(.98);
}

.budget-settings-button:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.budget-settings-button svg {
    display: block;
    width: 22px;
    height: 22px;
}

.mobile-toolbar { display: none; }
.icon-button { width: 35px; height: 35px; border-radius: var(--radius-full); font-weight: var(--font-weight-black); letter-spacing: 1px; }
.content { width: min(1120px, 100%); margin: 0 auto; padding: 52px 52px 72px; }
.page-header, .section__header { display: flex; align-items: center; justify-content: space-between; }
.page-header { margin-bottom: 34px; }
.eyebrow { margin: 0 0 7px; color: var(--color-text-muted); font-size: 11px; font-weight: var(--font-weight-heavy); letter-spacing: .12em; }
h1, h2, p { margin-top: 0; } h1 { margin-bottom: 0; line-height: var(--line-height-solid); letter-spacing: -2.5px; } h2 { margin: 0; letter-spacing: var(--letter-spacing-tight); }

/* Section titles above cards — unified muted/secondary color */
.section__header h2,
.history-group__header h2,
.settings-section__title {
    color: var(--color-section-title);
}

/* Danger section title — semantic exception (e.g. «Опасная зона») */
.settings-section__title--danger {
    color: var(--color-expense) !important;
}
.add-button { width: 46px; height: 46px; border-radius: var(--radius-full); line-height: var(--line-height-solid); }
.balance-card, .summary-card, .budget-card, .list-card { background: var(--color-bg-card); border-radius: var(--radius-card); }
.balance-card, .summary-card, .budget-card, .goal-card, .list-card { transition: var(--transition-card); }
.balance-card:hover, .summary-card:hover, .budget-card:hover, .goal-card:hover, .list-card:hover { box-shadow: var(--shadow-card-hover); }
.balance-card { padding: 30px 34px; }.balance-card > span, .summary-card span, .budget-card > span { color: var(--color-text-muted); }.balance-card > strong { display: block; margin: var(--space-10) 0 30px; line-height: var(--line-height-solid); letter-spacing: -2px; }.balance-card div { display: flex; justify-content: space-between; padding-top: 22px; border-top: 1px solid var(--color-divider); color: var(--color-text-muted); }.balance-card b { color: var(--color-text-primary); }
.section { margin-top: 42px; }.section__header { margin: 0 var(--space-4) 15px; }.section__header > span, .section__header a { color: var(--color-text-muted-light); font-size: 15px; }.section__header a { font-weight: var(--font-weight-semibold); }
.summary-grid, .budget-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-16); }.summary-card { padding: 26px; text-align: center; }.summary-card strong { display: block; margin-top: 11px; letter-spacing: var(--letter-spacing-tight); }.income { color: var(--color-income); }.expense { color: var(--color-expense); }
.budget-card { display: flex; flex-direction: column; align-items: center; padding: 25px 22px; text-align: center; }.ring { display: grid; width: 142px; aspect-ratio: 1; place-items: center; margin: var(--space-16) 0 var(--space-12); border-radius: var(--radius-full); background: conic-gradient(var(--color) var(--progress), var(--color-ring-track) 0); position: relative; }.ring::before { content: ""; position: absolute; inset: 15px; border-radius: inherit; background: var(--color-bg-card); }.ring b { z-index: 1; color: var(--color-text-muted); font-size: 29px; }.ring--income { --color: var(--color-income); --progress: 60%; }.ring--expense { --color: var(--color-expense); --progress: 21%; }.budget-card small { color: var(--color-text-muted); font-size: 15px; }
.ring--empty { background: var(--color-ring-track); }
.list-card { padding: var(--space-4) var(--space-28); }.dashboard-history-card { display: block; }.transaction { display: flex; justify-content: space-between; gap: var(--space-20); padding: 21px 0; border-bottom: 1px solid var(--color-divider-strong); }.transaction:last-child, .transaction--last-visible { border-bottom: 0; }.transaction__main { display: grid; gap: 6px; min-width: 0; }.transaction__amount { display: grid; gap: 6px; }.transaction strong { letter-spacing: -.4px; }.transaction span { color: var(--color-text-muted-alt); }.transaction__amount { margin-left: auto; text-align: right; white-space: nowrap; }.transaction__main strong, .transaction__main span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.transaction--interactive { width: 100%; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; touch-action: pan-y; cursor: pointer; }.transaction--interactive:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: 8px; }[hidden] { display: none !important; }
@media (max-width: 720px) {
    .app-shell { display: block; }
    .sidebar { display: none; }
    .content { padding: 24px 16px 40px; }
    .page-header { flex-direction: column; align-items: stretch; gap: 12px; margin-bottom: 16px; }
    h1 { font-size: var(--font-size-title-mobile); letter-spacing: -1.2px; }
    h2 { font-size: var(--font-size-section-mobile); }
    .section { margin-top: 24px; }
    .section__header { margin-bottom: 10px; }
    .balance-card { padding: 14px; border-radius: var(--radius-25); }
    .balance-card > span, .summary-card span, .budget-card > span { font-size: 13px; }
    .balance-card > strong { font-size: var(--font-size-amount-primary-mobile); margin: 0 0 20px; }
    .balance-card div { font-size: 15px; padding-top: 16px; }
    .balance-card b { font-size: 15px; }
    .summary-card { padding: 14px; }
    .summary-card strong { font-size: var(--font-size-amount-secondary-mobile); margin-top: 4px; }
    .summary-grid, .budget-grid { gap: 10px; }
    .budget-card { padding: 14px; }
    .budget-card small { font-size: 13px; }
    .ring { width: 90px; margin: 10px 0 8px; }
    .ring::before { inset: 10px; }
    .ring b { font-size: 15px; }
    .list-card { padding: 0 14px; }
    .transaction { padding: 14px 0; gap: 10px; }
    .transaction strong { font-size: 14px; }
    .transaction span { font-size: 12px; }
    .transaction__amount strong { font-size: var(--font-size-amount-secondary-mobile); }
    .dashboard-history-card .transaction:nth-child(n+5) { display: none; }
    .goal-card { padding: 14px; }
    .goal-card strong { font-size: 14px; }
    .goal-card span { font-size: 12px; }
    .dashboard-grid { display: grid; gap: 0; }
    .dashboard-column { display: contents; }
    .section--balance { order: 1; margin-top: 0; }
    .section--month { order: 2; margin-top: 24px; }
    .section--goals { order: 4; margin-top: 24px; }
    .section--budget { order: 3; margin-top: 24px; }
    .history { order: 5; margin-top: 24px; }
    .mobile-toolbar { display: flex; justify-content: space-between; align-items: center; }
    .toolbar-btn {
        display: grid; place-items: center;
        width: 46px; height: 46px; border-radius: var(--radius-full);
        background: var(--color-bg-raised);
        color: var(--color-text-secondary);
        cursor: pointer;
        -webkit-appearance: none;
        appearance: none;
        border: 0;
        padding: 0;
        font: inherit;
        text-decoration: none;
        box-shadow: var(--shadow-toolbar);
        transition: var(--transition-card);
    }
    .toolbar-btn:active { transform: scale(.99); }
    .toolbar-btn--settings::before { content: '…'; display: block; font-size: 22px; line-height: 1; letter-spacing: 1px; }
    .toolbar-btn--account::before { content: ''; display: block; width: 28px; height: 28px; border-radius: var(--radius-full); background: linear-gradient(145deg, var(--avatar-start, #b7b7bd), var(--avatar-end, #85858d)); box-shadow: inset 0 0 0 1px var(--avatar-border, #ffffff80); }
    .toolbar-btn--back svg { display: block; width: 22px; height: 22px; }
    .add-button { position: fixed; right: 22px; bottom: 22px; z-index: 2; width: 46px; height: 46px; border-radius: var(--radius-full); color: transparent; font-size: 0; box-shadow: var(--shadow-floating); }
    .add-button::before, .add-button::after { content: ""; position: absolute; top: 50%; left: 50%; width: 20px; height: 2px; border-radius: 2px; background: var(--color-text-primary); transform: translate(-50%, -50%); }
    .add-button::after { transform: translate(-50%, -50%) rotate(90deg); }

    .budget-settings-button {
        position: fixed;
        right: 22px;
        bottom: 22px;
        box-shadow: var(--shadow-floating);
    }

    .budget-settings-button:hover {
        box-shadow: var(--shadow-card-hover);
    }
}
/* Overview shows maximum 4 goals requiring attention — additional goals
   are accessible via the full list on the #goals page */
.goals-list { display: grid; gap: var(--space-10); }.goal-card { display: grid; gap: var(--space-10); padding: var(--space-24); background: var(--color-bg-card); border-radius: var(--radius-card); }
.goals-list > .goal-card:nth-child(n+5) { display: none; }.goal-card strong { font-size: 19px; }.goal-card span, .goal-card small { color: var(--color-text-muted-alt); font-size: var(--font-size-caption); }.goal-card small { color: var(--color-income); }.goal-card__title { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-10); }.goal-card__title span { white-space: nowrap; }.goal-card__values { display: flex; justify-content: space-between; gap: var(--space-10); }.goal-card i { display: block; height: 7px; border-radius: 7px; background: linear-gradient(to right, var(--color-income) var(--progress, 0%), var(--color-ring-track) var(--progress, 0%)); }
@media (max-width: 720px) {
    .content--goals .goal-card { padding: 14px; }
    .dashboard-column--main .goals-list { gap: 10px; }
    .dashboard-column--main .goals-list:not([data-goals-count="1"]) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dashboard-column--main .goal-card { min-width: 0; gap: 7px; padding: 14px; border-radius: var(--radius-22); }
    .dashboard-column--main .goal-card__title > span { display: none; }
    .dashboard-column--main .goal-card i,
    .content--goals .goal-card i { height: 6px; }
    .dashboard-column--main .goal-card__values span { font-size: 11px; }
    .dashboard-column--main .goals-list:not([data-goals-count="1"]) .goal-card__values { display: none; }
}
@media (min-width: 721px) {
    .app-shell { height: 100vh; overflow: hidden; }
    .nav { margin-top: -6px; }
    .content { width: min(1320px, 100%); height: 100vh; padding: 26px 58px; overflow: hidden; }
    h1 { font-size: var(--font-size-title-desktop); letter-spacing: -1.1px; }
    .eyebrow { font-size: 10px; }
    .page-header { margin-bottom: var(--space-16); }
    .add-button { position: fixed; right: 34px; bottom: 30px; z-index: 2; width: 46px; height: 46px; border-radius: var(--radius-full); color: transparent; font-size: 0; box-shadow: var(--shadow-floating); }
    .add-button::before, .add-button::after { content: ""; position: absolute; top: 50%; left: 50%; width: 20px; height: 2px; border-radius: 2px; background: var(--color-text-primary); transform: translate(-50%, -50%); }
    .add-button::after { transform: translate(-50%, -50%) rotate(90deg); }

    .budget-settings-button {
        position: fixed;
        right: 34px;
        bottom: 30px;
        box-shadow: var(--shadow-floating);
    }

    .budget-settings-button:hover {
        box-shadow: var(--shadow-card-hover);
    }
    .dashboard-grid { display: grid; grid-template-columns: minmax(0, 1fr) 346px; gap: 0 var(--space-28); align-items: start; height: calc(100% - 46px); min-height: 0; }
    .dashboard-column { display: grid; gap: var(--space-12); align-content: start; min-height: 0; }
    .dashboard-column--side { grid-template-rows: minmax(0, 1fr); height: 100%; }
    .dashboard-column--side .history { display: flex; min-height: 0; flex-direction: column; }
    .dashboard-column--side .dashboard-history-card { flex: 1; min-height: 0; overflow: hidden; }
    .balance-card { padding: 22px var(--space-24); }.balance-card > span, .summary-card span, .budget-card > span { font-size: 14px; }.balance-card > strong { margin: 7px 0 19px; font-size: var(--font-size-amount-primary-desktop); }.balance-card div { padding-top: 14px; font-size: 14px; }.balance-card b { font-size: var(--font-size-amount-secondary-desktop); }
    .section { margin-top: 0; }
    .section__header { margin-bottom: 9px; } h2 { font-size: var(--font-size-section-desktop); }.section__header > span, .section__header a { font-size: 13px; }
    .summary-grid { grid-template-columns: 1fr 1fr; gap: var(--space-10); }.summary-card { padding: 15px var(--space-24); text-align: center; }.summary-card strong { margin-top: 6px; font-size: var(--font-size-amount-secondary-desktop); }
    .budget-grid { gap: var(--space-10); }.budget-card { min-height: 130px; padding: 12px var(--space-24); }.ring { width: 66px; margin: 6px 0; }.ring::before { inset: 9px; }.ring b { font-size: 15px; }.budget-card small { font-size: var(--font-size-caption-sm-desktop); }
    .list-card { padding: 1px var(--space-24); }.transaction { padding: var(--space-10) 0; }.transaction strong { font-size: 14px; }.transaction__amount strong { font-size: var(--font-size-amount-secondary-desktop); }.transaction span { font-size: var(--font-size-caption-sm-desktop); }
    .dashboard-column--main .goals-list[data-goals-count="1"] { grid-template-columns: minmax(0, 1fr); }
    .dashboard-column--main .goals-list[data-goals-count="2"],
    .dashboard-column--main .goals-list[data-goals-count="3"],
    .dashboard-column--main .goals-list[data-goals-count="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dashboard-column--main .goals-list[data-goals-count="3"],
    .dashboard-column--main .goals-list[data-goals-count="4"] { gap: var(--space-8); }
    .dashboard-column--main .goals-list[data-goals-count="1"] .goal-card,
    .dashboard-column--main .goals-list[data-goals-count="2"] .goal-card { min-width: 0; border-radius: var(--radius-22); }
    .dashboard-column--main .goals-list[data-goals-count="3"] .goal-card,
    .dashboard-column--main .goals-list[data-goals-count="4"] .goal-card { min-width: 0; border-radius: var(--radius-22); }
    .dashboard-column--main .goal-card strong,
    .content--goals .goal-card strong { font-size: 14px; }
    .dashboard-column--main .goal-card span { overflow: hidden; font-size: 11px; text-overflow: ellipsis; }
    .content--goals .goal-card { padding: var(--space-16) var(--space-24); border-radius: var(--radius-22); }
    .content--goals .goal-card span { font-size: 12px; }
    .dashboard-column--main .goal-card__title span { max-width: 58%; }
    .dashboard-history-card { padding: var(--space-4) var(--space-24); }
}

@media (max-width: 420px) { .summary-grid { grid-template-columns: 1fr; }.budget-grid { grid-template-columns: 1fr; } }

/* ============================================
   History screen
   ============================================ */

.history-controls {
    display: flex;
    align-items: center;
    gap: var(--space-16);
    margin-bottom: var(--space-24);
}

.search-control {
    flex: 1;
    min-width: 0;
}

.search-input {
    width: 100%;
    padding: 10px var(--space-16);
    border: 0;
    border-radius: var(--radius-card);
    background: var(--color-bg-card);
    color: var(--color-text-primary);
    font-size: 14px;
}

.search-input:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.search-input::placeholder {
    color: var(--color-text-muted);
}

.search-count {
    font-size: 12px;
    color: var(--color-text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

.history-list {
    display: grid;
    gap: var(--space-28);
    padding-bottom: var(--space-32);
}

.history-group__header {
    margin-bottom: var(--space-10);
    padding: 0 var(--space-4);
}

.history-group__header h2 {
    margin: 0;
}

@media (min-width: 721px) {
    .history-group__header {
        margin-bottom: 9px;
    }

    .content--history {
        display: flex;
        flex-direction: column;
    }

    .content--history .history-list {
        flex: 1;
        min-height: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .content--history .history-group {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    .content--history .history-card--scrollable {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .history-list {
        gap: 0;
    }
}

@media (max-width: 720px) {
    .history-controls {
        flex-direction: column;
        gap: var(--space-12);
        margin-bottom: var(--space-16);
    }

    .search-control {
        width: 100%;
    }

    .search-input { font-size: 16px; }

    .history-list {
        gap: var(--space-20);
        padding-bottom: var(--space-24);
    }

}

/* ============================================
   Income screen
   ============================================ */

.income-heatmap,
.expense-heatmap {
    margin-bottom: var(--space-28);
    padding: var(--space-16);
    border-radius: var(--radius-card);
    background: var(--color-bg-card);
}

.income-heatmap .heatmap__grid,
.expense-heatmap .heatmap__grid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    width: 100%;
}
.income-heatmap .heatmap__cell:not(.heatmap__cell--empty):not(.heatmap__cell--lvl1):not(.heatmap__cell--lvl2):not(.heatmap__cell--lvl3):not(.heatmap__cell--lvl4),
.expense-heatmap .heatmap__cell:not(.heatmap__cell--empty):not(.heatmap__cell--lvl1):not(.heatmap__cell--lvl2):not(.heatmap__cell--lvl3):not(.heatmap__cell--lvl4) {
    background: var(--color-bg-raised);
}

.heatmap__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-10);
}

.heatmap__label {
    font-size: var(--font-size-caption-sm-desktop);
    color: var(--color-text-muted);
    text-align: center;
    padding: var(--space-4) 0;
}

.heatmap__cell {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-nav);
    font-size: var(--font-size-caption-sm-desktop);
    color: var(--color-text-muted);
    background: var(--color-bg-card);
    cursor: default;
}

.heatmap__cell--empty {
    background: transparent;
    cursor: default;
}

.heatmap__cell--today {
    box-shadow: inset 0 0 0 2px var(--color-text-muted);
}

.heatmap__cell--lvl1 { background: rgba(93, 200, 103, 0.15); color: var(--color-text-primary); }
.heatmap__cell--lvl2 { background: rgba(93, 200, 103, 0.35); color: var(--color-text-primary); font-weight: var(--font-weight-medium); }
.heatmap__cell--lvl3 { background: rgba(93, 200, 103, 0.60); color: var(--color-text-primary); font-weight: var(--font-weight-semibold); }
.heatmap__cell--lvl4 { background: rgba(93, 200, 103, 0.90); color: #fff; font-weight: var(--font-weight-bold); }

.heatmap__legend {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-6);
    font-size: var(--font-size-caption-sm-desktop);
    color: var(--color-text-muted);
}

.heatmap__legend .legend__cell {
    width: 14px;
    height: 14px;
    border-radius: var(--radius-nav);
}

.heatmap__legend .legend__cell--lvl1 { background: rgba(93, 200, 103, 0.15); }
.heatmap__legend .legend__cell--lvl2 { background: rgba(93, 200, 103, 0.35); }
.heatmap__legend .legend__cell--lvl3 { background: rgba(93, 200, 103, 0.60); }
.heatmap__legend .legend__cell--lvl4 { background: rgba(93, 200, 103, 0.90); }

.income-list {
    display: grid;
    gap: var(--space-20);
    padding-bottom: var(--space-24);
}

@media (min-width: 721px) {
    .content--income {
        display: flex;
        flex-direction: column;
    }

    .income-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 346px;
        grid-template-rows: minmax(0, 1fr);
        gap: var(--space-28);
        align-items: stretch;
        flex: 1;
        min-height: 0;
    }

    .income-column--transactions {
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
    }

    .income-column--transactions .income-list {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        padding-bottom: 0;
    }

    .income-column--transactions .history-group,
    .expense-column--transactions .history-group {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    .content--income .history-card--scrollable,
    .content--expenses .history-card--scrollable {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .heatmap__grid {
        grid-template-columns: repeat(7, 46px);
        width: fit-content;
    }

    .heatmap__legend {
        justify-content: flex-start;
    }

    .heatmap__cell {
        font-size: 11px;
    }
}

@media (max-width: 720px) {
    .income-layout {
        display: flex;
        flex-direction: column;
    }

    .income-heatmap,
    .expense-heatmap { padding: 14px; }

    .income-column--heatmap {
        order: -1;
    }

    .heatmap__cell {
        font-size: var(--font-size-caption-sm-mobile);
        border-radius: 10px;
    }

    .heatmap__label {
        font-size: var(--font-size-caption-sm-mobile);
    }

    .income-list {
        gap: var(--space-16);
        padding-bottom: var(--space-20);
    }
}

/* ============================================
   Budget screen
   ============================================ */

.budget-screen-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 346px;
    gap: var(--space-28);
    align-items: start;
}

.budget-limits-card {
    padding: 0 var(--card-inset-desktop);
    border-radius: var(--radius-22);
    background: var(--color-bg-card);
}

.budget-summary-card {
    padding: 0 var(--card-inset-desktop);
    border-radius: var(--radius-22);
    background: var(--color-bg-card);
}

.budget-limit-row { padding: var(--card-inset-desktop) 0; border-bottom: 1px solid var(--color-divider-strong); }
.budget-limit-row:last-child { border-bottom: 0; }
.budget-limit-row__header,
.budget-limit-row__footer { display: flex; justify-content: space-between; gap: var(--space-12); }
.budget-limit-row__header strong { font-size: 14px; }
.budget-limit-row__header span,
.budget-limit-row__footer { color: var(--color-text-muted); font-size: 12px; }
.budget-limit-row__header span { white-space: nowrap; }
.budget-limit-row i { display: block; height: 7px; margin: var(--space-12) 0 var(--space-8); border-radius: 7px; background: linear-gradient(to right, var(--color-expense) var(--progress, 0%), var(--color-ring-track) var(--progress, 0%)); }
.budget-limits-card--income .budget-limit-row i { background: linear-gradient(to right, var(--color-income) var(--progress, 0%), var(--color-ring-track) var(--progress, 0%)); }
.budget-limit-row__footer { font-size: var(--font-size-caption-sm-desktop); }

.budget-scope-switch,
.goals-scope-switch,
.categories-scope-switch { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); padding: var(--space-4); border-radius: var(--radius-nav); background: var(--color-bg-card); }
.page-header .budget-scope-switch,
.page-header .goals-scope-switch,
.page-header .categories-scope-switch { width: 346px; margin-left: auto; }
.budget-scope-button,
.goals-scope-button,
.categories-scope-btn { border: 0; border-radius: 10px; padding: 10px 8px; background: transparent; color: var(--color-text-secondary); font: inherit; font-size: var(--font-size-caption); cursor: pointer; }
.budget-scope-button--active,
.goals-scope-button--active,
.categories-scope-btn--active { background: var(--color-bg-raised); color: var(--color-text-primary); font-weight: var(--font-weight-semibold); }
.turnover-scope-switch { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); width: 346px; margin-left: auto; padding: var(--space-4); border-radius: var(--radius-nav); background: var(--color-bg-card); }
.turnover-scope-button { border: 0; border-radius: 10px; padding: 10px 8px; background: transparent; color: var(--color-text-secondary); font: inherit; font-size: var(--font-size-caption); cursor: pointer; }
.turnover-scope-button--active { background: var(--color-bg-raised); color: var(--color-text-primary); font-weight: var(--font-weight-semibold); }
.turnover-summary { margin-bottom: var(--space-28); }
.turnover-summary-card { padding: 0 var(--card-inset-desktop); border-radius: var(--radius-22); background: var(--color-bg-card); }
.turnover-summary-card > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-12); padding: var(--card-inset-desktop) 0; border-bottom: 1px solid var(--color-divider-strong); }
.turnover-summary-card > div:last-child { border-bottom: 0; }
.turnover-summary-card span { color: var(--color-text-muted); font-size: var(--font-size-caption); }
.budget-summary-card > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-12); padding: var(--card-inset-desktop) 0; border-bottom: 1px solid var(--color-divider-strong); }
.budget-summary-card > div:last-child { border-bottom: 0; }
.budget-summary-card span { color: var(--color-text-muted); font-size: var(--font-size-caption); }

@media (min-width: 721px) {
    .content--budget { display: flex; flex-direction: column; }
    .content--budget .page-header,
    .content--goals .page-header,
    .content--income .page-header,
    .content--expenses .page-header { position: relative; }
    .content--budget .page-header .budget-scope-switch,
    .content--goals .page-header .goals-scope-switch,
    .content--categories .page-header .categories-scope-switch,
    .content--income .page-header .turnover-scope-switch,
    .content--expenses .page-header .turnover-scope-switch { position: absolute; top: 50%; right: 0; transform: translateY(-50%); }
    .budget-screen-layout { flex: 1; min-height: 0; }
    .budget-categories { min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
}

@media (max-width: 720px) {
    .budget-screen-layout { display: flex; flex-direction: column; gap: var(--space-24); }
    .budget-categories,
    .budget-sidebar { width: 100%; }
    .budget-sidebar { order: -1; }
    .page-header .budget-scope-switch,
    .page-header .goals-scope-switch,
    .page-header .categories-scope-switch,
    .turnover-scope-switch { width: 100%; margin-left: 0; }
    .content--income .turnover-scope-switch,
    .content--expenses .turnover-scope-switch,
    .content--budget .budget-scope-switch { display: none; }
    .budget-limits-card { padding: 0 var(--card-inset-mobile); border-radius: var(--radius-card); }
    .budget-limit-row { padding-block: var(--card-inset-mobile); }
    .budget-limit-row i { height: 6px; }
    .budget-summary-card { padding: 0 var(--card-inset-mobile); }
    .budget-summary-card > div { padding-block: var(--card-inset-mobile); }
    .turnover-summary-card { padding: 0 var(--card-inset-mobile); }
    .turnover-summary-card > div { padding-block: var(--card-inset-mobile); }
}

/* ============================================
   Goals screen
   ============================================ */

.goals-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 346px;
    gap: var(--space-28);
    align-items: start;
}

.goals-summary {
    display: grid;
}

.goals-summary-card {
    display: grid;
    padding: 0 var(--card-inset-desktop);
    border-radius: var(--radius-22);
    background: var(--color-bg-card);
}

.goals-summary-card > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-12);
    padding: var(--space-16) 0;
    border-bottom: 1px solid var(--color-divider-strong);
}

.goals-summary-card > div:last-child { border-bottom: 0; }
.goals-summary span { color: var(--color-text-muted); font-size: var(--font-size-caption); }
.goals-summary strong { letter-spacing: var(--letter-spacing-tight); }

/* Goals screen — grouped card with rows (like budget-limits-card) */
.goals-screen-card {
    padding: 0 var(--card-inset-mobile);
    border-radius: var(--radius-22);
    background: var(--color-bg-card);
}

.goals-screen-row {
    padding: var(--card-inset-mobile) 0;
    border-bottom: 1px solid var(--color-divider-strong);
}

.goals-screen-row--last {
    border-bottom: 0;
}

.goals-screen-row__header {
    display: flex;
    justify-content: space-between;
    gap: var(--space-12);
}

.goals-screen-row__header strong {
    font-size: 14px;
}

.goals-screen-row__header span {
    color: var(--color-text-muted);
    font-size: 12px;
    white-space: nowrap;
}

.goals-screen-progress {
    display: block;
    height: 7px;
    margin: var(--space-12) 0 var(--space-8);
    border-radius: 7px;
    background: linear-gradient(to right, var(--color-income) var(--progress, 0%), var(--color-ring-track) var(--progress, 0%));
}

/* Goal row values + actions row */
.goals-screen-row__values-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-8);
}

.goals-screen-row__values {
    flex: 1;
    display: flex;
    justify-content: space-between;
    gap: var(--space-12);
    color: var(--color-text-muted);
    font-size: 12px;
}

.goals-screen-row--interactive {
    cursor: pointer;
}

.goals-screen-row--interactive:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: 8px;
}

/* Goal edit modal archive row */
.goal-edit__label {
    display: block;
    font-size: 11px;
    color: var(--color-text-muted);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.goal-edit__archive-row {
    padding: var(--space-12) 0;
}

.goal-edit__archive-label {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    font-size: 13px;
    cursor: pointer;
    color: var(--color-text-secondary);
}

.goal-edit__archive-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.goals-screen-empty {
    padding: var(--card-inset-mobile) 0;
    text-align: center;
    color: var(--color-text-muted);
    font-size: var(--font-size-caption);
}

@media (min-width: 721px) {
    .content--goals { display: flex; flex-direction: column; }
    .goals-layout { flex: 1; min-height: 0; }
    .goals-screen-list { min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
    .goals-screen-card { padding: 0 var(--card-inset-desktop); }
    .goals-screen-row { padding: var(--card-inset-desktop) 0; }
    .goals-screen-empty { padding-block: var(--card-inset-desktop); }
}

@media (max-width: 720px) {
    .goals-layout { display: flex; flex-direction: column; gap: var(--space-24); }
    .goals-screen-list,
    .goals-summary { width: 100%; }
    .goals-summary { order: -1; }
    .goals-summary-card { padding: 0 var(--card-inset-mobile); }
    .goals-summary-card > div { padding-block: var(--card-inset-mobile); }
    .goals-screen-card { padding: 0 var(--card-inset-mobile); border-radius: var(--radius-card); }
    .goals-screen-row { padding-block: var(--card-inset-mobile); }
    .goals-screen-progress { height: 6px; }
}

/* ============================================
   Expenses screen — mirrors Income
   ============================================ */

.expense-heatmap .heatmap__cell--lvl1 { background: rgba(240, 74, 71, 0.15); color: var(--color-text-primary); }
.expense-heatmap .heatmap__cell--lvl2 { background: rgba(240, 74, 71, 0.35); color: var(--color-text-primary); font-weight: var(--font-weight-medium); }
.expense-heatmap .heatmap__cell--lvl3 { background: rgba(240, 74, 71, 0.60); color: var(--color-text-primary); font-weight: var(--font-weight-semibold); }
.expense-heatmap .heatmap__cell--lvl4 { background: rgba(240, 74, 71, 0.90); color: #fff; font-weight: var(--font-weight-bold); }
.expense-heatmap .legend__cell--lvl1 { background: rgba(240, 74, 71, 0.15); }
.expense-heatmap .legend__cell--lvl2 { background: rgba(240, 74, 71, 0.35); }
.expense-heatmap .legend__cell--lvl3 { background: rgba(240, 74, 71, 0.60); }
.expense-heatmap .legend__cell--lvl4 { background: rgba(240, 74, 71, 0.90); }
.expense-list { display: grid; gap: var(--space-20); padding-bottom: var(--space-24); }

@media (min-width: 721px) {
    .content--expenses { display: flex; flex-direction: column; }
    .expense-layout { display: grid; grid-template-columns: minmax(0, 1fr) 346px; grid-template-rows: minmax(0, 1fr); gap: var(--space-28); align-items: stretch; flex: 1; min-height: 0; }
    .expense-column--transactions { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
    .expense-column--transactions .expense-list { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; padding-bottom: 0; }
}

@media (max-width: 720px) {
    .expense-layout { display: flex; flex-direction: column; }
    .expense-column--heatmap { order: -1; }
    .expense-list { gap: var(--space-16); padding-bottom: var(--space-20); }
}

/* ============================================
   Budget Settings screen
   ============================================ */

.bs-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 346px;
    gap: var(--space-28);
    align-items: start;
}

.bs-total-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-16);
    padding: 0 var(--card-inset-desktop);
    border-radius: var(--radius-22);
    background: var(--color-bg-card);
    margin-bottom: 16px;
}

.bs-total-label {
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    flex-shrink: 0;
}

.bs-total-input {
    border: 0;
    background: transparent;
    font-size: 18px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    text-align: right;
    outline: none;
    padding: 18px 0;
    width: 200px;
    caret-color: var(--color-primary);
}

.bs-total-input::placeholder {
    color: var(--color-text-muted-light);
    opacity: .4;
}


.bs-groups-card {
    padding: 0 var(--card-inset-desktop);
    border-radius: var(--radius-22);
    background: var(--color-bg-card);
}

.bs-group-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-16);
    padding: 18px 0;
    border-bottom: 1px solid var(--color-divider-strong);
}

.bs-group-row:last-child {
    border-bottom: 0;
}

.bs-group-row__label {
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    flex: 1;
    min-width: 0;
}

.bs-group-input {
    border: 0;
    background: transparent;
    color: var(--color-text-primary);
    font-size: 14px;
    text-align: right;
    outline: none;
    padding: 10px 12px;
    width: 160px;
    caret-color: var(--color-primary);
}

.bs-group-input::placeholder {
    color: var(--color-text-muted-light);
    opacity: .5;
}


.bs-empty {
    padding: 24px 0;
    text-align: center;
    color: var(--color-text-muted);
    font-size: var(--font-size-caption);
}

.bs-summary-card {
    padding: 0 var(--card-inset-desktop);
    border-radius: var(--radius-22);
    background: var(--color-bg-card);
}

.bs-summary-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-12);
    padding: 18px 0;
    border-bottom: 1px solid var(--color-divider-strong);
}

.bs-summary-row:last-child {
    border-bottom: 0;
}

.bs-summary-row__label {
    font-size: 14px;
    color: var(--color-text-secondary);
}

.bs-summary-row__value {
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.bs-summary-row--success .bs-summary-row__value {
    color: var(--color-income);
}

.bs-summary-row--expense .bs-summary-row__value {
    color: var(--color-expense);
}

.bs-summary-row--neutral .bs-summary-row__label {
    color: var(--color-text-muted);
}

.page-header__title-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-12);
    flex: 1;
    min-width: 0;
}

/* bs-save-btn visual rules moved to .confirm-btn group above */

@media (min-width: 721px) {
    .content--budget-settings {
        display: flex;
        flex-direction: column;
    }

    .page-header--budget-settings {
        position: relative;
    }

    .page-header--budget-settings .page-header__title-wrap {
        flex: 0 1 auto;
    }

    .page-header--budget-settings .mobile-toolbar {
        display: inline-flex;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        z-index: 1;
        background: none;
        box-shadow: none;
    }

    .page-header--budget-settings .toolbar-btn--back {
        display: none;
    }

    .bs-layout {
        flex: 1;
        min-height: 0;
    }

    .bs-main {
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .bs-total-card {
        padding: 0 18px;
    }

    .bs-total-input {
        padding: 18px 0;
    }

    .bs-groups-card {
        padding: 0 18px;
    }

    .bs-group-row {
        padding: 18px 0;
    }

    /* bs-save-btn:hover inherited from .confirm-btn group */
}

/* Toast notification for budget-settings save feedback */
.bs-toast {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    padding: 12px 24px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    z-index: var(--z-toast);
    box-shadow: var(--shadow-card-hover);
    animation: bs-toast-in 0.3s ease-out;
    max-width: 400px;
    text-align: center;
    line-height: 1.4;
}
.bs-toast--success {
    background: var(--color-income-bg);
    color: var(--color-income);
}
.bs-toast--error {
    background: var(--color-expense-bg);
    color: var(--color-expense);
}
@keyframes bs-toast-in {
    from { opacity: 0; transform: translateX(-50%) translateY(10px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@media (max-width: 720px) {
    .bs-layout {
        display: flex;
        flex-direction: column;
        gap: var(--space-24);
    }

    .bs-sidebar {
        order: -1;
    }

    .bs-total-card {
        padding: 0 var(--card-inset-mobile);
        border-radius: var(--radius-card);
    }

    .bs-total-input {
        padding: 14px 0;
        font-size: 16px;
        width: 140px;
    }

    .bs-groups-card {
        padding: 0 var(--card-inset-mobile);
        border-radius: var(--radius-card);
    }

    .bs-group-row {
        padding: 14px 0;
    }

    .bs-group-input {
        width: 120px;
        font-size: 14px;
        padding: 8px 10px;
    }

    .bs-summary-card {
        padding: 0 var(--card-inset-mobile);
        border-radius: var(--radius-card);
    }

    .bs-summary-row {
        padding: 14px 0;
    }

    .bs-summary-row__label {
        font-size: 13px;
    }

    .bs-summary-row__value {
        font-size: 13px;
    }

    .page-header--budget-settings .page-header__title-wrap {
        width: 100%;
        min-width: 0;
        gap: var(--space-12);
    }

    .content--budget-settings .bs-main,
    .content--budget-settings .bs-sidebar {
        min-width: 0;
        width: 100%;
    }

    .content--budget-settings .bs-total-card,
    .content--budget-settings .bs-groups-card,
    .content--budget-settings .bs-summary-card {
        width: 100%;
    }
}

/* ============================================
   Add Transaction Modal — shared component styles
   ============================================ */

.add-modal-overlay {
    display: none;
}

@keyframes amtFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes amtDesktopFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Modal structure */
.add-modal {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.add-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

/* Cancel button in modals — unchanged */
.add-modal__cancel {
    border: 0;
    border-radius: 50%;
    background: var(--color-bg-card);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: opacity .15s ease;
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    color: var(--color-text-secondary);
}

.add-modal__cancel:active {
    opacity: .7;
}

/* Unified confirm button — shared visual for add-modal, goal-modal, budget-settings */
.confirm-btn,
.add-modal__submit,
.bs-save-btn {
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    cursor: pointer;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    transition: opacity .15s ease;
}

.confirm-btn:disabled,
.add-modal__submit:disabled {
    background: var(--color-bg-card);
    color: var(--color-text-muted);
    cursor: default;
}

.confirm-btn:not(:disabled):hover,
.add-modal__submit:not(:disabled):hover,
.bs-save-btn:not(:disabled):hover {
    opacity: .85;
}

.confirm-btn:focus-visible,
.add-modal__submit:focus-visible,
.bs-save-btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
    .confirm-btn:active,
    .add-modal__submit:active,
    .bs-save-btn:active {
        transform: scale(.97);
    }
}

.add-modal__title {
    margin: 0;
    font-size: 18px;
    line-height: 1.25;
    font-weight: var(--font-weight-semibold);
    letter-spacing: -.3px;
    color: var(--color-text-primary);
}

.add-modal__body {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.edit-transaction-delete {
    flex-shrink: 0;
    width: 100%;
    padding: 13px 16px;
    border: 0;
    border-radius: var(--radius-nav);
    background: var(--color-bg-card);
    color: var(--color-expense);
    font: inherit;
    font-size: 14px;
    line-height: 20px;
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
}

.edit-transaction-delete:hover {
    background: var(--color-bg-raised);
}

.edit-goal-delete {
    width: 100%;
    padding: 13px 16px;
    border: 0;
    border-radius: var(--radius-nav);
    background: var(--color-bg-card);
    color: var(--color-expense);
    font: inherit;
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
}

.edit-goal-delete:hover {
    background: var(--color-bg-raised);
}

/* Amount input */
.add-modal__amount-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0;
}

.add-modal__amount {
    border: 0;
    background: transparent;
    font-size: var(--font-size-amount-primary-mobile);
    font-weight: bold;
    color: var(--color-text-primary);
    text-align: center;
    outline: none;
    width: 220px;
    padding: 0;
    line-height: var(--line-height-solid);
    letter-spacing: -2px;
    caret-color: var(--color-primary);
}

.add-modal__amount::placeholder {
    color: var(--color-text-muted-light);
    opacity: .4;
}

.add-modal__amount:focus::placeholder {
    opacity: .2;
}

/* Type switch — Доход / Расход / Цели */
.add-modal__type-switch {
    display: flex;
    background: var(--color-bg-card);
    border-radius: var(--radius-nav);
    padding: 3px;
    gap: 2px;
    flex-shrink: 0;
}

.amt-type-btn {
    flex: 1;
    border: 0;
    border-radius: 10px;
    padding: 10px 8px;
    background: transparent;
    color: var(--color-text-secondary);
    font: inherit;
    font-size: var(--font-size-caption);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.amt-type-btn--active {
    background: var(--color-bg-raised);
    color: var(--color-text-primary);
    font-weight: var(--font-weight-semibold);
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

/* Category / details cards */
.add-modal__card {
    background: var(--color-bg-card);
    border-radius: var(--radius-card);
    padding: 0;
    flex-shrink: 0;
}

.add-modal__card--details {
    padding: 0;
}

/* Category groups */
.amt-categories {
    display: flex;
    flex-direction: column;
}

.amt-category-group {
    border-bottom: 1px solid var(--color-divider);
    margin: 0 16px;
}

.amt-category-group:last-child {
    border-bottom: 0;
}

.amt-category-group__title {
    padding: 14px 0 10px;
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
}

.amt-category-group__items {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-bottom: 14px;
}

/* Pill buttons */
.amt-pill {
    border: 0;
    border-radius: var(--radius-pill);
    padding: 8px 16px;
    background: var(--color-bg-raised);
    color: var(--color-text-primary);
    font: inherit;
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
    white-space: nowrap;
}

.amt-pill:active {
    opacity: .8;
}

.amt-pill--selected {
    background: var(--color-primary);
    color: #fff;
}

/* Goal pills */
.amt-goal-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 16px;
}

/* Detail rows */
.amt-detail-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--color-divider);
    gap: 12px;
}

.amt-detail-row:last-child {
    border-bottom: 0;
}

.amt-detail-row__label {
    font-size: var(--font-size-caption);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    flex-shrink: 0;
    min-width: 60px;
}

.amt-detail-row__input {
    flex: 1;
    border: 0;
    background: transparent;
    color: var(--color-text-primary);
    font: inherit;
    font-size: var(--font-size-caption);
    text-align: right;
    outline: none;
    padding: 0;
    min-width: 0;
}

.amt-detail-row__input::placeholder {
    color: var(--color-text-muted-light);
    opacity: .5;
}

.amt-detail-row__input--date {
    text-align: right;
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
}

.amt-detail-row__input--date::-webkit-calendar-picker-indicator {
    opacity: .5;
    margin-left: 4px;
}

/* Amount card */
.add-modal__card--amount {
    padding: 14px 0;
    display: flex;
    justify-content: center;
}

.add-modal__card--amount .add-modal__amount-group {
    padding: 0;
}

/* Tag pills inside detail row */
.amt-tag-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.amt-tag-pill {
    font-size: 13px;
    padding: 5px 12px;
}

/* Date capsule */
.amt-date-capsule {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    border-radius: var(--radius-pill);
    background: var(--color-bg-raised);
    cursor: pointer;
}

.amt-date-capsule__text {
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    color: var(--color-primary);
    white-space: nowrap;
}

.amt-date-capsule__chevron {
    display: block;
    width: 10px;
    height: 10px;
    background: var(--color-primary);
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
    flex-shrink: 0;
}

.amt-date-capsule__input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

@media (max-width: 720px) {
    .add-modal-overlay {
        display: block;
        position: fixed;
        inset: 0;
        z-index: var(--z-modal);
        background: var(--color-bg);
        animation: amtFadeIn .2s ease;
        overflow: hidden;
    }

    .add-modal {
        height: 100%;
    }

    .add-modal__header {
        padding: 12px 16px;
    }

    .add-modal__body {
        flex: 1;
        gap: 12px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 0 16px calc(24px + env(safe-area-inset-bottom));
    }

}


/* ============================================
   Add Transaction Modal — desktop (≥721px)
   ============================================ */

@media (min-width: 721px) {
    .add-modal-overlay--active {
        display: block;
        position: fixed;
        inset: 0;
        z-index: var(--z-modal);
        background: rgba(0, 0, 0, 0.35);
        animation: amtDesktopFadeIn .2s ease;
    }

    /* Canonical position matching dashboard .balance-card, set by JS on all routes */
    .add-modal-overlay--active .add-modal {
        position: fixed;
        left: var(--amt-left, calc(248px + 58px));
        top: var(--amt-top, 26px);
        width: var(--amt-width, 640px);
        max-width: calc(100vw - var(--amt-left, calc(248px + 58px)) - 40px);
        max-height: min(calc(100vh - 60px), 85vh);
        background: var(--color-bg);
        border-radius: var(--radius-card);
        overflow: hidden;
        box-shadow: 0 25px 60px rgba(0, 0, 0, 0.12);
    }

    .add-modal-overlay--active .add-modal__header {
        padding: 16px 20px;
    }

    .add-modal-overlay--active .add-modal__body {
        padding: 0 20px 20px;
        gap: 12px;
        flex: 1;
        min-height: 0;
        overflow: hidden;
    }

    /* Compact upper card: amount + type switch */
    .add-modal-overlay--active .add-modal__card--amount {
        padding: 18px 0;
        flex-shrink: 0;
    }

    .add-modal-overlay--active .add-modal__amount {
        font-size: var(--font-size-amount-primary-desktop);
        width: 200px;
    }

    .add-modal-overlay--active .add-modal__type-switch {
        flex-shrink: 0;
    }

    /* Categories card — scrolls within the fixed-height modal */
    .add-modal-overlay--active .add-modal__body > .add-modal__card:not(.add-modal__card--amount):not(.add-modal__card--details) {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Details card — stays at bottom */
    .add-modal-overlay--active .add-modal__card--details {
        flex-shrink: 0;
    }

    /* Category/group insets — 18px from content to card edge */
    .add-modal-overlay--active .amt-category-group {
        margin: 0 18px;
    }

    .add-modal-overlay--active .amt-category-group__title {
        padding: 18px 0 10px;
    }

    .add-modal-overlay--active .amt-category-group__items {
        padding-bottom: 18px;
    }

    .add-modal-overlay--active .amt-goal-pills {
        padding: 18px;
    }

    .add-modal-overlay--active .amt-detail-row {
        padding: 18px 18px;
    }

    /* Focus-visible for modal interactive elements */
    .add-modal-overlay--active .add-modal__cancel:focus-visible,
    .add-modal-overlay--active .add-modal__submit:focus-visible,
    .add-modal-overlay--active .amt-type-btn:focus-visible,
    .add-modal-overlay--active .amt-pill:focus-visible,
    .add-modal-overlay--active .amt-date-capsule__input:focus-visible,
    .add-modal-overlay--active .amt-detail-row__input:focus-visible {
        outline: 2px solid var(--color-primary);
        outline-offset: 2px;
    }

    /* Amount input — no focus outline, only caret */
    .add-modal-overlay--active .add-modal__amount:focus-visible {
        outline: none;
    }

    /* Hover states for buttons */
    .add-modal-overlay--active .add-modal__cancel:hover,
    .add-modal-overlay--active .add-modal__submit:not(:disabled):hover {
        opacity: .85;
    }

    .add-modal-overlay--active .amt-type-btn:not(.amt-type-btn--active):hover,
    .add-modal-overlay--active .amt-pill:not(.amt-pill--selected):hover {
        opacity: .8;
    }

    /* Reduced motion */
    @media (prefers-reduced-motion: reduce) {
        .add-modal-overlay--active {
            animation: none;
        }
    }
}

/* ============================================
   Goal Creation Modal — mirrors add-modal overlay/positioning
   ============================================ */

.goal-modal-overlay {
    display: none;
}

@keyframes goalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.goal-modal {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.goal-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.goal-modal__body {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.goal-modal__card {
    background: var(--color-bg-card);
    border-radius: var(--radius-card);
    padding: 0;
    flex-shrink: 0;
}

.goal-modal__card--name {
    display: flex;
    align-items: center;
}

.goal-modal__card--amount {
    display: flex;
    justify-content: center;
}

.goal-modal__name-input {
    border: 0;
    background: transparent;
    font-size: 18px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    outline: none;
    padding: 14px;
    width: 100%;
    caret-color: var(--color-primary);
}

.goal-modal__name-input::placeholder {
    color: var(--color-text-muted-light);
    opacity: .4;
}

.goal-modal__amount-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0;
}

.goal-modal__amount-input {
    border: 0;
    background: transparent;
    font-size: var(--font-size-amount-primary-mobile);
    font-weight: bold;
    color: var(--color-text-primary);
    text-align: center;
    outline: none;
    width: 220px;
    padding: 0;
    line-height: var(--line-height-solid);
    letter-spacing: -2px;
    caret-color: var(--color-primary);
}

.goal-modal__amount-input::placeholder {
    color: var(--color-text-muted-light);
    opacity: .4;
}

.goal-modal__amount-input:focus::placeholder {
    opacity: .2;
}

@media (max-width: 720px) {
    .goal-modal-overlay {
        display: block;
        position: fixed;
        inset: 0;
        z-index: var(--z-modal);
        background: var(--color-bg);
        animation: goalFadeIn .2s ease;
        overflow: hidden;
    }

    .goal-modal {
        height: 100%;
    }

    .goal-modal__header {
        padding: 12px 16px;
    }

    .goal-modal__body {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 0 16px 40px;
    }

    .goal-modal__card--name {
        padding: 0;
    }

    .goal-modal__card--amount {
        padding: 14px 0;
    }

    .goal-modal__name-input {
        font-size: 16px;
        padding: 14px;
    }
}

@media (min-width: 721px) {
    .goal-modal-overlay--active {
        display: block;
        position: fixed;
        inset: 0;
        z-index: var(--z-modal);
        background: rgba(0, 0, 0, 0.35);
        animation: goalFadeIn .2s ease;
    }

    .goal-modal-overlay--active .goal-modal {
        position: fixed;
        left: var(--amt-left, calc(248px + 58px));
        top: var(--amt-top, 26px);
        width: var(--amt-width, 640px);
        max-width: calc(100vw - var(--amt-left, calc(248px + 58px)) - 40px);
        max-height: min(calc(100vh - 60px), 85vh);
        background: var(--color-bg);
        border-radius: var(--radius-card);
        overflow: hidden;
        box-shadow: 0 25px 60px rgba(0, 0, 0, 0.12);
    }

    .goal-modal-overlay--active .goal-modal__header {
        padding: 16px 20px;
    }

    .goal-modal-overlay--active .goal-modal__body {
        padding: 0 20px 20px;
        gap: 12px;
        flex: 1;
        min-height: 0;
        overflow: hidden;
    }

    .goal-modal-overlay--active .goal-modal__card--name {
        padding: 0 18px;
        flex-shrink: 0;
    }

    .goal-modal-overlay--active .goal-modal__card--amount {
        padding: 18px 0;
        flex-shrink: 0;
    }

    .goal-modal-overlay--active .goal-modal__amount-input {
        font-size: var(--font-size-amount-primary-desktop);
        width: 200px;
    }

    .goal-modal-overlay--active .goal-modal__name-input {
        font-size: 18px;
        padding: 18px 0;
    }

    /* No focus outline on inputs — only caret visible */
    .goal-modal-overlay--active .goal-modal__name-input:focus-visible,
    .goal-modal-overlay--active .goal-modal__amount-input:focus-visible {
        outline: none;
    }

    /* Focus-visible for modal interactive elements */
    .goal-modal-overlay--active .add-modal__cancel:focus-visible,
    .goal-modal-overlay--active .add-modal__submit:focus-visible {
        outline: 2px solid var(--color-primary);
        outline-offset: 2px;
    }

    /* Hover states */
    .goal-modal-overlay--active .add-modal__cancel:hover,
    .goal-modal-overlay--active .add-modal__submit:not(:disabled):hover {
        opacity: .85;
    }

    /* Reduced motion */
    @media (prefers-reduced-motion: reduce) {
        .goal-modal-overlay--active {
            animation: none;
        }
    }
}

/* ============================================
   Self-hosted fallback — Nunito Sans variable VF (Cyrillic + Latin)
   Provides consistent rounded sans on Windows where macOS SF/mac fonts
   are unavailable. Licensed under SIL Open Font License v1.1.
   ============================================ */

@font-face {
    font-family: "Finance Rounded";
    font-style: normal;
    font-weight: 200 1000;
    font-display: swap;
    src: url("fonts/NunitoSans-Variable.woff2") format("woff2");
}

/* ============================================
   Interaction states
   ============================================ */

/* Unified desktop card insets — uses --card-inset-desktop token */
@media (min-width: 721px) {
    .balance-card,
    .summary-card,
    .budget-card,
    .goal-card,
    .income-heatmap,
    .expense-heatmap {
        padding: var(--card-inset-desktop);
    }

    .list-card,
    .budget-limits-card,
    .budget-summary-card,
    .turnover-summary-card,
    .goals-summary-card {
        padding: 0 var(--card-inset-desktop);
    }

    .transaction,
    .budget-limit-row,
    .budget-summary-card > div,
    .turnover-summary-card > div,
    .goals-summary-card > div {
        padding: var(--card-inset-desktop) 0;
    }
}

/* ============================================
   Settings screen
   ============================================ */

.settings-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 346px;
    gap: var(--space-28);
    align-items: start;
}

.settings-section {
    margin-bottom: var(--space-28);
}

.settings-section:last-child {
    margin-bottom: 0;
}

.settings-section__title {
    margin: 0 0 9px var(--space-4);
    font-size: var(--font-size-section-desktop);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-tight);
}

.settings-card {
    padding: 0 18px;
    border-radius: var(--radius-22);
    background: var(--color-bg-card);
}

.settings-card--danger {
    border: 1px solid rgba(240, 74, 71, 0.2);
}

.settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-12);
    padding: 18px 0;
    border-bottom: 1px solid var(--color-divider-strong);
    min-height: 0;
}

.settings-row--last {
    border-bottom: 0;
}

.settings-row--no-border {
    border-bottom: 0;
}

.settings-row--button {
    cursor: pointer;
    transition: opacity .15s ease;
    text-decoration: none;
    color: inherit;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    font-family: inherit;
    font-size: inherit;
    padding: 18px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.settings-row--button:hover {
    opacity: 0.8;
}

.settings-row--link {
    cursor: pointer;
    transition: opacity .15s ease;
    text-decoration: none;
    color: inherit;
    display: flex;
}

.settings-row--link:hover {
    opacity: .75;
}

.settings-row--link:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
    border-radius: 4px;
}

.settings-row--disabled {
    opacity: .5;
    cursor: default;
    pointer-events: none;
}

.settings-row--destructive .settings-row__label {
    color: var(--color-expense);
}

.settings-row__label {
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    flex: 1;
    min-width: 0;
}

.settings-row__label--danger {
    color: var(--color-expense);
}

.settings-row__value {
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    text-align: right;
    flex-shrink: 0;
}

.settings-row__value--mono {
    font-family: ui-monospace, "SF Mono", "Cascadia Code", monospace;
    font-size: 13px;
    color: var(--color-text-muted);
}

.settings-row__action {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--color-text-muted);
}

.settings-row__action svg {
    display: block;
    width: 16px;
    height: 16px;
}

.settings-row__badge {
    font-size: 12px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
    background: var(--color-bg-raised);
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    flex-shrink: 0;
}

.settings-row__badge--danger {
    color: var(--color-expense);
    background: rgba(240, 74, 71, 0.1);
}

.settings-status-indicator {
    position: relative;
    padding-left: 14px;
}

.settings-status-indicator::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-text-muted);
}

.settings-row--connected::before {
    background: var(--color-income);
}

.settings-row--disconnected::before {
    background: var(--color-expense);
}

.settings-status-card .settings-row:last-child {
    justify-content: center;
    padding: 14px 0;
}

.settings-check-btn {
    border: 0;
    border-radius: var(--radius-pill);
    padding: 8px 20px;
    background: var(--color-bg-raised);
    color: var(--color-primary);
    font: inherit;
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: opacity .15s ease;
    width: auto;
}

.settings-check-btn:hover {
    opacity: .8;
}

.settings-check-btn:active {
    opacity: .7;
}

.settings-check-btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.settings-check-btn:disabled {
    opacity: .5;
    cursor: default;
}

/* Categories add button — integrates with mobile toolbar and desktop header */
.cat-add-open-btn {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: var(--radius-full);
    border: 0;
    background: var(--color-bg-raised);
    color: var(--color-text-primary);
    cursor: pointer;
    box-shadow: var(--shadow-toolbar);
    transition: var(--transition-card);
    flex-shrink: 0;
}

.cat-add-open-btn svg {
    display: block;
    width: 22px;
    height: 22px;
}

.cat-add-open-btn:hover {
    box-shadow: var(--shadow-card-hover);
}

.cat-add-open-btn:active {
    transform: scale(.98);
}

.cat-add-open-btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.settings-detail-body {
    padding: 0 var(--space-4);
}

.settings-detail-text {
    font-size: 14px;
    color: var(--color-text-secondary);
    line-height: 1.5;
}

/* MCP keys detail screen */
.content--mcp .settings-layout {
    align-items: start;
}

.mcp-token-list {
    overflow: hidden;
}

.mcp-token-row:last-child {
    border-bottom: 0;
}

.mcp-token-info {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    flex: 1;
    min-width: 0;
    gap: var(--space-16);
}

.mcp-token-name {
    display: block;
    overflow: hidden;
    color: var(--color-text-primary);
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mcp-token-identity {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-4);
}

.mcp-token-details {
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    gap: var(--space-4);
    text-align: right;
}

.mcp-token-scope,
.mcp-token-used {
    color: var(--color-text-secondary);
    font-size: 12px;
}

.mcp-token-status {
    padding: 3px 9px;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
}

.mcp-status--active {
    color: var(--color-income);
    background: var(--color-income-bg);
}

.mcp-status--revoked,
.mcp-status--expired {
    color: var(--color-expense);
    background: var(--color-expense-bg);
}

.mcp-revoke-btn,
.mcp-copy-btn {
    flex-shrink: 0;
    border: 0;
    border-radius: var(--radius-pill);
    padding: 8px 14px;
    background: var(--color-bg-raised);
    color: var(--color-primary);
    font: inherit;
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
}

.mcp-revoke-btn {
    color: var(--color-expense);
}

.mcp-revoke-btn:hover,
.mcp-copy-btn:hover {
    opacity: .8;
}

.mcp-revoke-btn:focus-visible,
.mcp-copy-btn:focus-visible,
.mcp-install-tab:focus-visible,
.mcp-config-tab:focus-visible,
.mcp-name-input:focus-visible,
.mcp-scope-option:has(input:focus-visible) {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.mcp-empty {
    padding: 28px 18px !important;
    color: var(--color-text-secondary) !important;
    font-size: 13px !important;
    line-height: 1.45;
    text-align: center !important;
}

.mcp-about-text {
    font-weight: var(--font-weight-medium);
}

.mcp-onboarding-card {
    padding: var(--card-inset-desktop);
}

.mcp-manual-token {
    margin-bottom: var(--space-20);
    padding: var(--space-16);
    border-radius: 16px;
    background: var(--color-bg-raised);
}

.mcp-created-heading {
    color: var(--color-text-primary);
    font-size: 16px;
    font-weight: var(--font-weight-semibold);
}

.mcp-created-meta,
.mcp-created-label {
    color: var(--color-text-secondary);
    font-size: 13px;
}

.mcp-created-meta {
    margin-top: var(--space-4);
}

.mcp-created-label {
    margin-top: var(--space-16);
    margin-bottom: var(--space-8);
}

.mcp-code-row {
    display: flex;
    align-items: center;
    gap: var(--space-8);
}

.mcp-code-row code {
    min-width: 0;
    background: var(--color-bg-raised) !important;
    color: var(--color-text-primary);
}

.mcp-created-warning {
    margin-top: var(--space-10);
    color: var(--color-expense);
    font-size: 12px;
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
}

.mcp-method-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3px;
    margin-bottom: var(--space-16);
    padding: 3px;
    border-radius: var(--radius-nav);
    background: var(--color-bg-raised);
}

.mcp-method-tab {
    border: 0;
    border-radius: 10px;
    padding: 9px 12px;
    background: transparent;
    color: var(--color-text-secondary);
    font: inherit;
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
}

.mcp-method-tab--active {
    background: var(--color-bg);
    color: var(--color-text-primary);
}

.mcp-method-tab:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.mcp-method-intro,
.mcp-method-hint {
    color: var(--color-text-secondary);
    font-size: 12px;
    line-height: 1.45;
}

.mcp-prompt-block {
    margin: var(--space-12) 0;
    padding: var(--space-12);
    border-radius: 14px;
    background: var(--color-bg-raised);
}

.mcp-prompt-block code {
    display: block;
    max-height: 230px;
    overflow: auto;
    color: var(--color-text-primary);
    font-family: ui-monospace, "SF Mono", "Cascadia Code", monospace;
    font-size: 11px;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
    user-select: all;
}

.mcp-prompt-block .mcp-copy-btn {
    margin-top: var(--space-12);
}

.mcp-setup-step {
    padding-bottom: var(--space-20);
    border-bottom: 1px solid var(--color-divider-strong);
}

.mcp-setup-step--last {
    padding-top: var(--space-20);
}

.mcp-step-title {
    display: flex;
    align-items: center;
    gap: var(--space-10);
    margin-bottom: var(--space-8);
    color: var(--color-text-primary);
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
}

.mcp-step-number {
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    flex-shrink: 0;
    border-radius: var(--radius-full);
    background: var(--color-primary);
    color: #fff;
    font-size: 12px;
}

.mcp-install-tabs,
.mcp-config-tabs {
    display: flex !important;
    gap: 3px !important;
    margin: var(--space-12) 0 var(--space-8) !important;
    padding: 3px;
    border-radius: var(--radius-nav);
    background: var(--color-bg-raised);
}

.mcp-install-tab,
.mcp-config-tab {
    border: 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
}

.mcp-install-tab--active,
.mcp-config-tab--active {
    background: var(--color-bg) !important;
    color: var(--color-text-primary);
}

.mcp-manual-token code,
.mcp-install-content,
.mcp-config-content {
    background: var(--color-bg-raised) !important;
}

.mcp-install-content,
.mcp-config-content {
    padding: var(--space-12) !important;
    border: 0 !important;
    border-radius: 14px !important;
}

.mcp-install-tab,
.mcp-config-tab {
    color: var(--color-text-secondary);
    font-family: inherit;
}

.mcp-onboarding-note {
    padding-top: var(--space-16);
    color: var(--color-text-secondary);
    font-size: 11px;
    line-height: 1.5;
}

.mcp-create-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-20);
    background: rgba(0, 0, 0, .3);
}

.mcp-create-modal {
    display: flex;
    width: min(100%, 520px);
    max-height: calc(100vh - 40px);
    flex-direction: column;
    overflow: hidden auto;
    border-radius: var(--radius-card);
    background: var(--color-bg);
    box-shadow: var(--shadow-floating);
}

.mcp-create-modal .cat-add__header {
    padding: 16px 20px 0;
}

.mcp-create-body {
    padding: 20px !important;
}

.mcp-form-group {
    margin-bottom: var(--space-16) !important;
}

.mcp-form-group > label {
    display: block !important;
    margin-bottom: var(--space-8) !important;
    color: var(--color-text-secondary) !important;
    font-size: 13px !important;
    font-weight: var(--font-weight-semibold) !important;
}

.mcp-name-input {
    width: 100% !important;
    padding: 14px 16px !important;
    border: 0 !important;
    border-radius: var(--radius-22) !important;
    outline: none;
    background: var(--color-bg-card) !important;
    color: var(--color-text-primary) !important;
    font: inherit;
    font-size: 14px !important;
}

.mcp-scope-options {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--space-8) !important;
}

.mcp-scope-option {
    display: flex !important;
    align-items: center !important;
    gap: var(--space-12) !important;
    padding: 14px 16px !important;
    border: 0 !important;
    border-radius: var(--radius-22) !important;
    background: var(--color-bg-card);
    cursor: pointer;
}

.mcp-scope-option input {
    accent-color: var(--color-primary);
}

.mcp-validation {
    min-height: 20px !important;
    margin-bottom: 0 !important;
    color: var(--color-expense) !important;
    font-size: 13px !important;
}

@media (max-width: 720px) {
    .content--mcp .settings-sidebar {
        margin-top: 0;
    }

    .mcp-onboarding-card {
        padding: var(--card-inset-mobile);
    }

    .mcp-manual-token {
        padding: var(--card-inset-mobile);
    }

    .mcp-code-row {
        align-items: stretch;
        flex-direction: column;
    }

    .mcp-code-row .mcp-copy-btn {
        align-self: flex-start;
    }

    .mcp-token-row {
        align-items: center;
    }

    .mcp-token-info {
        gap: var(--space-12);
    }

    .mcp-create-overlay {
        align-items: flex-end;
        padding: 0;
        background: var(--color-bg);
    }

    .mcp-create-modal {
        width: 100%;
        height: 100%;
        max-height: none;
        border-radius: 0;
        box-shadow: none;
    }

    .mcp-create-modal .cat-add__header {
        padding: 12px 16px 0;
    }
}

@media (min-width: 721px) {
    .content--settings {
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .settings-layout {
        flex: 0 0 auto;
        min-height: 0;
    }

    .settings-main {
        min-height: 0;
    }
}

@media (max-width: 720px) {
    .content--settings {
        width: 100%;
        max-width: none;
    }

    .settings-layout {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        width: 100%;
    }

    .settings-main,
    .settings-sidebar {
        width: 100%;
        min-width: 0;
        align-self: stretch;
    }

    .settings-section {
        margin-bottom: 24px;
    }

    .settings-section__title {
        margin-bottom: 10px;
        font-size: 18px;
    }

    .settings-card {
        width: 100%;
        min-width: 0;
        padding: 0 14px;
        border-radius: var(--radius-card);
    }

    .settings-row {
        padding: 14px 0;
    }

    .settings-sidebar {
        margin-top: 24px;
        width: 100%;
        min-width: 0;
    }

    .content--settings-theme .settings-layout {
        gap: 0;
    }

    .content--settings-theme .settings-sidebar {
        order: -1;
        margin-top: 0;
        margin-bottom: 24px;
    }

    .settings-row__label {
        font-size: 14px;
    }

    .settings-row__value {
        font-size: 13px;
    }

    .settings-row__badge {
        font-size: 11px;
        padding: 2px 8px;
    }

    .settings-detail-body {
        padding: 0;
        width: 100%;
    }

    .settings-detail-text {
        font-size: 14px;
    }
}

/* ============================================
   Categories Screen
   ============================================ */

.content--categories {
    /* Inherits settings layout */
}

.categories-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 346px;
    gap: var(--space-28);
    align-items: start;
}

.categories-card {
    padding: 0 18px;
    border-radius: var(--radius-22);
    background: var(--color-bg-card);
}

.cat-group {
    border-bottom: 1px solid var(--color-divider-strong);
}

.cat-group:last-child {
    border-bottom: 0;
}

.cat-group__header {
    display: flex;
    align-items: center;
    gap: var(--space-10);
    padding: 18px 0;
    cursor: pointer;
    border-radius: 6px;
    transition: background .15s ease;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.cat-group__header:hover {
    background: var(--color-bg-card);
}

.cat-group__header:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

.cat-group__chevron {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: var(--color-text-muted);
    transition: transform .2s ease;
}

.cat-group__chevron--expanded {
    transform: rotate(90deg);
}

/* Collapsible content area — hidden attribute for reliable Safari collapsing,
   no grid-template-rows animation. Content is block when expanded, hidden when collapsed. */
.cat-group__content {
    display: block;
    padding: 0 0 0 20px;
}

.cat-group__content[hidden] {
    display: none;
}

.cat-group__title {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cat-group__count {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    background: var(--color-bg-raised);
    padding: 1px 8px;
    border-radius: var(--radius-pill);
    min-width: 22px;
    text-align: center;
}

.cat-group__menu,
.cat-item__menu {
    position: relative;
    border: 0;
    background: none;
    cursor: pointer;
    width: 18px;
    height: 18px;
    border-radius: var(--radius-full);
    color: var(--color-text-muted);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    transition: opacity .15s ease, background .15s ease;
}

/* Expand hit target on mobile without affecting layout box */
.cat-group__menu::after,
.cat-item__menu::after {
    content: '';
    position: absolute;
    top: -13px;
    right: -13px;
    bottom: -13px;
    left: -13px;
}

.cat-group__menu:hover,
.cat-item__menu:hover {
    background: var(--color-bg-raised);
    opacity: .8;
}

.cat-group__menu:focus-visible,
.cat-item__menu:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.cat-group__menu svg,
.cat-item__menu svg {
    display: block;
    width: 18px;
    height: 18px;
}

.cat-group__items {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
}

.cat-item {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    padding: var(--card-inset-desktop) 0;
    border-top: 1px solid var(--color-divider-strong);
}

.cat-item__bullet {
    flex-shrink: 0;
    color: var(--color-text-muted);
    font-size: 10px;
    line-height: 1;
}

.cat-item__name {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    color: var(--color-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cat-group__empty {
    font-size: 12px;
    color: var(--color-text-muted);
    padding: var(--card-inset-desktop) 0;
    border-top: 1px solid var(--color-divider-strong);
}

.cat-empty {
    padding: var(--card-inset-mobile) 0;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 14px;
}

@media (min-width: 721px) {
    .cat-empty {
        padding-block: var(--card-inset-desktop);
    }
}

/* Categories summary sidebar */
.categories-sidebar-section {
    margin-bottom: var(--space-28);
}

.categories-summary-card {
    padding: 0 18px;
    border-radius: var(--radius-22);
    background: var(--color-bg-card);
}

.cat-summary-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-12);
    padding: 18px 0;
    border-bottom: 1px solid var(--color-divider-strong);
}

.cat-summary-row--last {
    border-bottom: 0;
}

.cat-summary-row span {
    font-size: 14px;
    color: var(--color-text-secondary);
}

.cat-summary-row strong {
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

/* Context menu */
.cat-context-menu {
    position: fixed;
    z-index: var(--z-overlay);
    width: 240px;
    background: var(--color-bg-raised);
    border-radius: var(--radius-22);
    box-shadow: 0 8px 30px rgba(0,0,0,0.15);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cat-context-item {
    display: flex;
    align-items: center;
    gap: var(--space-10);
    border: 0;
    border-radius: 10px;
    padding: 10px 12px;
    background: transparent;
    color: var(--color-text-primary);
    font: inherit;
    font-size: 14px;
    cursor: pointer;
    text-align: left;
    width: 100%;
    transition: background .15s ease;
}

.cat-context-item:hover {
    background: var(--color-bg-card);
}

.cat-context-item:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

.cat-context-item svg {
    flex-shrink: 0;
}

.cat-context-item--danger {
    color: var(--color-expense);
}

/* Add category modal */
.cat-add-overlay {
    display: none;
}

.cat-add-modal {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.cat-add__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.cat-add__body {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cat-add__type-switch {
    display: flex;
    background: var(--color-bg-card);
    border-radius: var(--radius-nav);
    padding: 3px;
    gap: 2px;
    flex-shrink: 0;
}

.cat-add-type-btn {
    flex: 1;
    border: 0;
    border-radius: 10px;
    padding: 10px 8px;
    background: transparent;
    color: var(--color-text-secondary);
    font: inherit;
    font-size: var(--font-size-caption);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.cat-add-type-btn--active {
    background: var(--color-bg-raised);
    color: var(--color-text-primary);
    font-weight: var(--font-weight-semibold);
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

.cat-add__card {
    background: var(--color-bg-card);
    border-radius: var(--radius-card);
    flex-shrink: 0;
}

.cat-add__name-card {
    padding: 0;
}

.cat-add__name-input {
    border: 0;
    background: transparent;
    font-size: 18px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    outline: none;
    padding: 18px;
    width: 100%;
    caret-color: var(--color-primary);
}

.cat-add__name-input::placeholder {
    color: var(--color-text-muted-light);
    opacity: .4;
}

.cat-add__name-input:focus-visible {
    outline: none;
}

.cat-add__parent-card {
    padding: 0 18px;
}

.cat-add__parent-label {
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    padding: 18px 0 10px;
}

.cat-add__parent-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-bottom: 18px;
}

.cat-add-parent-pill {
    border: 0;
    border-radius: var(--radius-pill);
    padding: 8px 16px;
    background: var(--color-bg-raised);
    color: var(--color-text-primary);
    font: inherit;
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
    white-space: nowrap;
}

.cat-add-parent-pill--selected {
    background: var(--color-primary);
    color: #fff;
}

.cat-add-parent-pill:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.cat-add__parent-empty {
    font-size: 13px;
    color: var(--color-text-muted);
    padding: 4px 0;
}

.cat-add__validation {
    min-height: 0;
}

.cat-add__validation-text {
    display: block;
    font-size: 13px;
    color: var(--color-expense);
    padding: 4px 0;
}

.cat-add__submit {
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    cursor: pointer;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    transition: opacity .15s ease;
}

.cat-add__submit:disabled {
    background: var(--color-bg-card);
    color: var(--color-text-muted);
    cursor: default;
}

.cat-add__submit:not(:disabled):hover {
    opacity: .85;
}

.cat-add__submit:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
    .cat-add__submit:active {
        transform: scale(.97);
    }
}

/* Confirmation and rename modals */
.cat-confirm-overlay {
    display: none;
}

@media (max-width: 720px) {
    .cat-confirm-overlay {
        display: block;
        position: fixed;
        inset: 0;
        z-index: var(--z-modal);
        background: var(--color-bg);
        animation: amtFadeIn .2s ease;
        overflow: hidden;
    }

    .cat-confirm-modal {
        min-height: 100%;
    }
}

.cat-confirm-modal {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.cat-confirm__body {
    padding: 0 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cat-confirm__message {
    margin: 0;
    font-size: 14px;
    color: var(--color-text-secondary);
    line-height: 1.5;
}

.cat-confirm__actions {
    display: flex;
    gap: var(--space-10);
    justify-content: flex-end;
}

.cat-confirm-btn {
    border: 0;
    border-radius: var(--radius-pill);
    padding: 10px 24px;
    font: inherit;
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: opacity .15s ease;
}

.cat-confirm-btn--cancel {
    background: var(--color-bg-card);
    color: var(--color-text-primary);
}

.cat-confirm-btn--primary {
    background: var(--color-primary);
    color: #fff;
}

.cat-confirm-btn--danger {
    background: var(--color-expense);
    color: #fff;
}

.cat-confirm-btn:hover {
    opacity: .85;
}

.cat-confirm-btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Rename modal */
.cat-rename__input {
    border: 0;
    background: var(--color-bg-card);
    border-radius: var(--radius-22);
    font-size: 16px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    outline: none;
    padding: 14px 16px;
    width: 100%;
    caret-color: var(--color-primary);
}

.cat-rename__input:focus-visible {
    outline: none;
}

.cat-rename__validation {
    min-height: 0;
}

.cat-rename__validation .cat-add__validation-text {
    font-size: 13px;
    color: var(--color-expense);
}

.sort-controls {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border-radius: var(--radius-pill);
    background: var(--color-bg-raised);
}

.sort-handle,
.sort-step {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: var(--radius-full);
    background: transparent;
    font: inherit;
    line-height: 1;
    -webkit-tap-highlight-color: transparent;
}

.sort-handle {
    color: var(--color-text-secondary);
    font-size: 21px;
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.sort-step {
    color: var(--color-primary);
    font-size: 19px;
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
}

.sort-step:disabled {
    color: var(--color-text-muted);
    opacity: .35;
    cursor: default;
}

.sort-handle:active {
    cursor: grabbing;
    background: var(--color-bg-card);
}

.sort-step:not(:disabled):active {
    background: var(--color-bg-card);
}

.sort-handle:focus-visible,
.sort-step:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
}

.sort-item--dragging {
    opacity: .55;
    background: var(--color-bg-card);
    border-radius: var(--radius-small);
}

/* Mobile overrides for categories */
@media (max-width: 720px) {
    .cat-add-overlay {
        display: block;
        position: fixed;
        inset: 0;
        z-index: var(--z-modal);
        background: var(--color-bg);
        animation: amtFadeIn .2s ease;
        overflow: hidden;
    }

    .cat-add-modal {
        height: 100%;
    }

    /* Hide floating add-button — toolbar has .cat-add-open-btn */
    .content--categories .add-button {
        display: none !important;
    }

    .categories-layout {
        display: flex;
        flex-direction: column;
        gap: var(--space-24);
        width: 100%;
    }

    .categories-sidebar-section {
        margin-bottom: 0;
    }

    .categories-main {
        width: 100%;
        min-width: 0;
    }

    .categories-sidebar {
        width: 100%;
        min-width: 0;
        order: -1;
    }

    .categories-card {
        padding: 0 14px;
        border-radius: var(--radius-card);
    }

    .cat-group__header {
        padding: 14px 0;
    }

    .cat-group__content {
        padding: 0 0 0 16px;
    }

    .cat-group__items {
        gap: 0;
        padding: 0;
    }

    .cat-item {
        padding: var(--card-inset-mobile) 0;
    }

    .cat-group__empty {
        padding: var(--card-inset-mobile) 0;
    }

    .cat-group__title {
        font-size: 14px;
    }

    .categories-summary-card {
        padding: 0 14px;
    }

    .cat-summary-row {
        padding: 14px 0;
    }

    .cat-add__header {
        padding: 12px 16px;
    }

    .cat-add__body {
        padding: 0 16px 40px;
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .cat-add__name-input {
        padding: 14px;
        font-size: 16px;
    }

    .cat-add__parent-card {
        padding: 0 14px;
    }

    .cat-add__parent-label {
        padding: 14px 0 10px;
    }

    .cat-add__parent-pills {
        padding-bottom: 14px;
    }

    .cat-confirm__body {
        padding: 0 16px 24px;
    }

    .cat-confirm__actions {
        justify-content: stretch;
    }

    .cat-confirm-btn {
        flex: 1;
        text-align: center;
    }

    .cat-context-menu {
        width: 220px;
    }
}

/* Desktop overrides for categories */
@media (min-width: 721px) {
    .content--categories {
        display: flex;
        flex-direction: column;
    }

    .page-header--categories {
        position: relative;
    }

    /* Floating add-button on desktop — toolbar button stays on mobile */
    .content--categories .add-button {
        display: grid;
    }

    .categories-layout {
        flex: 1;
        min-height: 0;
    }

    .categories-main {
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .cat-add-overlay--active {
        display: block;
        position: fixed;
        inset: 0;
        z-index: var(--z-modal);
        background: rgba(0, 0, 0, 0.35);
        animation: amtFadeIn .2s ease;
    }

    .cat-add-overlay--active .cat-add-modal {
        position: fixed;
        left: var(--amt-left, calc(248px + 58px));
        top: var(--amt-top, 26px);
        width: var(--amt-width, 640px);
        max-width: calc(100vw - var(--amt-left, calc(248px + 58px)) - 40px);
        max-height: min(calc(100vh - 60px), 85vh);
        background: var(--color-bg);
        border-radius: var(--radius-card);
        overflow: hidden;
        box-shadow: 0 25px 60px rgba(0, 0, 0, 0.12);
    }

    .cat-add-overlay--active .cat-add__header {
        padding: 16px 20px;
    }

    .cat-add-overlay--active .cat-add__body {
        padding: 0 20px 20px;
        gap: 12px;
        flex: 1;
        min-height: 0;
        overflow: hidden;
    }

    .cat-add-overlay--active .cat-add__name-card {
        flex-shrink: 0;
    }

    .cat-add-overlay--active .cat-add__type-switch {
        flex-shrink: 0;
    }

    .cat-add-overlay--active .cat-add__name-input {
        padding: 18px;
    }

    .cat-add-overlay--active .cat-add__parent-card {
        flex-shrink: 0;
    }

    .cat-add-overlay--active .cat-add-parent-pill:focus-visible,
    .cat-add-overlay--active .cat-add-type-btn:focus-visible,
    .cat-add-overlay--active .add-modal__cancel:focus-visible,
    .cat-add-overlay--active .cat-add__submit:focus-visible {
        outline: 2px solid var(--color-primary);
        outline-offset: 2px;
    }

    .cat-add-overlay--active .cat-add__name-input:focus-visible,
    .cat-add-overlay--active .cat-rename__input:focus-visible {
        outline: none;
    }

    /* Confirm/rename overlays use same positioning */
    .cat-add-overlay--active .cat-confirm-modal {
        position: fixed;
        left: var(--amt-left, calc(248px + 58px));
        top: var(--amt-top, 26px);
        width: var(--amt-width, 640px);
        max-width: calc(100vw - var(--amt-left, calc(248px + 58px)) - 40px);
        max-height: min(calc(100vh - 60px), 85vh);
        background: var(--color-bg);
        border-radius: var(--radius-card);
        overflow: hidden;
        box-shadow: 0 25px 60px rgba(0, 0, 0, 0.12);
    }

    .cat-add-overlay--active .cat-confirm__body {
        padding: 0 20px 24px;
    }

    .cat-add-overlay--active .cat-add__submit:not(:disabled):hover {
        opacity: .85;
    }

    @media (prefers-reduced-motion: reduce) {
        .cat-add-overlay--active {
            animation: none;
        }
    }
}

/* ============================================
   Tags Screen
   ============================================ */

.tags-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 346px;
    gap: var(--space-28);
    align-items: start;
}

.tags-card {
    padding: 0 18px;
    border-radius: var(--radius-22);
    background: var(--color-bg-card);
}

.tags-row {
    display: flex;
    align-items: center;
    gap: var(--space-10);
    padding: 18px 0;
    border-bottom: 1px solid var(--color-divider-strong);
}

.tags-row:last-child {
    border-bottom: 0;
}

.tags-row__name {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tags-row__menu {
    position: relative;
    border: 0;
    background: none;
    cursor: pointer;
    width: 18px;
    height: 18px;
    border-radius: var(--radius-full);
    color: var(--color-text-muted);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    transition: opacity .15s ease, background .15s ease;
}

.tags-row__menu::after {
    content: '';
    position: absolute;
    top: -13px;
    right: -13px;
    bottom: -13px;
    left: -13px;
}

.tags-row__menu:hover {
    background: var(--color-bg-raised);
    opacity: .8;
}

.tags-row__menu:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.tags-row__menu svg {
    display: block;
    width: 18px;
    height: 18px;
}

.tags-empty {
    padding: var(--card-inset-mobile) 0;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 14px;
}

@media (min-width: 721px) {
    .tags-empty {
        padding-block: var(--card-inset-desktop);
    }
}

/* Tags summary sidebar */
.tags-sidebar-section {
    margin-bottom: var(--space-28);
}

.tags-summary-card {
    padding: 0 18px;
    border-radius: var(--radius-22);
    background: var(--color-bg-card);
}

.tags-summary-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-12);
    padding: 18px 0;
    border-bottom: 1px solid var(--color-divider-strong);
}

.tags-summary-row--last {
    border-bottom: 0;
}

.tags-summary-row span {
    font-size: 14px;
    color: var(--color-text-secondary);
}

.tags-summary-row strong {
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

/* Mobile overrides for tags */
@media (max-width: 720px) {
    .content--tags .add-button {
        display: none !important;
    }

    .tags-layout {
        display: flex;
        flex-direction: column;
        gap: var(--space-24);
        width: 100%;
    }

    .tags-sidebar-section {
        margin-bottom: 0;
    }

    .tags-main {
        width: 100%;
        min-width: 0;
    }

    .tags-sidebar {
        width: 100%;
        min-width: 0;
        order: -1;
    }

    .tags-card {
        padding: 0 14px;
        border-radius: var(--radius-card);
    }

    .tags-row {
        padding: 14px 0;
    }

    .tags-summary-card {
        padding: 0 14px;
    }

    .tags-summary-row {
        padding: 14px 0;
    }
}

/* Desktop overrides for tags */
@media (min-width: 721px) {
    .content--tags {
        display: flex;
        flex-direction: column;
    }

    .page-header--tags {
        position: relative;
    }

    .content--tags .add-button {
        display: grid;
    }

    .tags-layout {
        flex: 1;
        min-height: 0;
    }

    .tags-main {
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* :focus-visible — nav items, add button, clickable cards */
.nav__item:focus-visible,
.account:focus-visible,
.add-button:focus-visible,
.toolbar-btn:focus-visible,
.summary-card:focus-visible,
.budget-card:focus-visible,
.goal-card:focus-visible,
.dashboard-history-card:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Inactive nav items — light hover background */
.nav__item:not(.nav__item--active):hover,
.account:hover {
    background: var(--nav-hover-bg, rgba(0, 0, 0, 0.04));
}

/* prefers-reduced-motion — disable transitions and hover transforms only */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition: none !important;
    }

    /* Disclosure stays instant */
    .cat-group__chevron {
        transition: none !important;
    }

    /* Reset hover transforms only — structural transforms (e.g. .add-button::after rotate)
       are preserved so the add button renders correctly as "+" */
    .balance-card:hover,
    .summary-card:hover,
    .budget-card:hover,
    .goal-card:hover,
    .list-card:hover {
        transform: none;
    }
}

/* :active with scale(.99) only when no-preference for clickable cards/buttons */
@media (prefers-reduced-motion: no-preference) {
    .balance-card:active,
    .summary-card:active,
    .budget-card:active,
    .goal-card:active,
    .list-card:active,
    .add-button:active,
    .toolbar-btn:active,
    .icon-button:active {
        transform: scale(.99);
    }
}

/* ── Account Screen ── */

.account-layout {
    max-width: none;
}

.account-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 346px;
    gap: var(--space-28);
    align-items: start;
}

.account-column {
    display: grid;
    gap: var(--space-24);
    min-width: 0;
}

.account-column .settings-section {
    margin: 0;
}

.account-row__trailing {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-10);
    min-width: 0;
}

.account-action-row .settings-row__value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-layout--centered {
    max-width: 420px;
    margin: 40px auto;
}

.account-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
}

.account-form__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.account-form__label {
    font-size: 13px;
    font-weight: var(--font-weight-medium, 500);
    color: var(--color-text-secondary);
}

.account-form__input {
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 15px;
    font-family: inherit;
    background: var(--color-bg);
    color: var(--color-text-primary);
    outline: none;
    transition: border-color 0.15s;
}

.account-form__input:focus {
    border-color: var(--color-primary);
}

.account-form__actions {
    margin-top: 4px;
}

.account-form__submit {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 12px;
    background: var(--color-primary);
    color: #fff;
    font-size: 15px;
    font-weight: var(--font-weight-semibold, 600);
    cursor: pointer;
    transition: opacity 0.15s;
}

.account-form__submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.account-form__submit:not(:disabled):hover {
    opacity: 0.9;
}

.account-form__error {
    font-size: 13px;
    color: var(--color-expense);
    text-align: center;
    min-height: 1em;
}

.account-form__toggle {
    text-align: center;
    padding: 0 20px 16px;
}

.account-form__toggle-btn {
    background: none;
    border: none;
    color: var(--color-primary);
    font-size: 13px;
    cursor: pointer;
    padding: 4px;
}

.account-form__toggle-btn:hover {
    text-decoration: underline;
}

/* Mobile account form */
@media (max-width: 720px) {
    .account-grid {
        display: flex;
        flex-direction: column;
        gap: var(--space-24);
    }

    .account-column {
        width: 100%;
    }

    .account-layout--centered {
        margin: 0;
    }

    .account-form {
        padding: 16px;
    }
}

/* ── Empty state styling for authenticated/reset views ── */

.dashboard-history-empty,
.history-empty-state,
.goals-card-empty,
.budget-empty-state {
    padding: 32px 0;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 14px;
}

.goals-card-empty {
    display: grid;
    grid-column: 1 / -1;
    place-items: center;
    padding: var(--card-inset-mobile);
    border-radius: var(--radius-card);
    background: var(--color-bg-card);
    transition: var(--transition-card);
}

.goals-card-empty:hover {
    box-shadow: var(--shadow-card-hover);
}

.dashboard-history-empty {
    padding: var(--card-inset-mobile) 0;
}

.history-empty-state {
    padding: var(--card-inset-mobile) 0;
}

.budget-empty-state {
    padding: var(--card-inset-mobile) 0;
}

@media (min-width: 721px) {
    .goals-card-empty {
        padding: var(--card-inset-desktop);
    }

    .dashboard-history-empty {
        padding: var(--card-inset-desktop) 0;
    }

    .dashboard-column--side .dashboard-history-card--empty {
        flex: none;
        height: auto;
    }

    .history-empty-state {
        padding: var(--card-inset-desktop) 0;
    }

    .budget-empty-state {
        padding: var(--card-inset-desktop) 0;
    }
}

.history-empty-state--turnover {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding-block: var(--card-inset-mobile);
    text-align: center;
}

@media (min-width: 721px) {
    .history-empty-state--turnover {
        padding-block: var(--card-inset-desktop);
    }
}

.history-empty-state p {
    margin: 0;
}

/* ── Import/Export overlay and modals ── */

.impexp-overlay {
    display: none;
}

.impexp-modal {
    display: flex;
    flex-direction: column;
    background: var(--color-bg);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-floating);
    max-width: 460px;
    width: 100%;
}

.impexp-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
}

.impexp-modal__title {
    font-size: 17px;
    font-weight: var(--font-weight-semibold);
    margin: 0;
}

.impexp-modal__cancel {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
}

.impexp-modal__cancel:hover {
    color: var(--color-text-primary);
}

.impexp-modal__body {
    padding: 0 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.impexp-modal__desc {
    margin: 0;
    font-size: 14px;
    color: var(--color-text-secondary);
    line-height: 1.5;
}

.impexp-modal__file-info {
    margin: 0;
    font-size: 13px;
    color: var(--color-text-secondary);
}

.impexp-modal__file-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.impexp-modal__file-label {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    cursor: pointer;
}

.impexp-modal__file-text {
    flex: 1;
    font-size: 14px;
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.impexp-modal__file-btn {
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    color: var(--color-primary);
    padding: 6px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    flex-shrink: 0;
}

.impexp-modal__file-btn:hover {
    opacity: .8;
}

.impexp-modal__file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.impexp-modal__actions {
    display: flex;
    gap: var(--space-10);
    justify-content: flex-end;
}

.impexp-modal__btn {
    border: 0;
    border-radius: var(--radius-pill);
    padding: 8px 18px;
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: opacity .15s ease;
}

.impexp-modal__btn:disabled {
    opacity: .4;
    cursor: default;
}

.impexp-modal__btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.impexp-modal__btn--cancel {
    background: var(--color-bg-card);
    color: var(--color-text-primary);
}

.impexp-modal__btn--confirm {
    background: var(--color-primary);
    color: #fff;
}

.impexp-modal__btn--danger {
    background: var(--color-expense);
    color: #fff;
}

.impexp-modal__btn:hover:not(:disabled) {
    opacity: .85;
}

.impexp-modal__validation {
    min-height: 1em;
}

.impexp-modal__validation-text {
    font-size: 13px;
    color: var(--color-expense);
}

/* Mobile: full-screen import/export modals */
@media (max-width: 720px) {
    .impexp-overlay {
        position: fixed;
        inset: 0;
        z-index: var(--z-overlay);
        background: rgba(0, 0, 0, 0.3);
        display: flex;
        align-items: flex-end;
        justify-content: center;
    }

    .impexp-modal {
        border-radius: var(--radius-card) var(--radius-card) 0 0;
        max-width: 100%;
        max-height: 80vh;
        overflow-y: auto;
    }

    .impexp-modal__actions {
        justify-content: stretch;
    }

    .impexp-modal__btn {
        flex: 1;
        text-align: center;
    }
}

/* Desktop: centered overlay for import/export modals */
@media (min-width: 721px) {
    .impexp-overlay {
        position: fixed;
        inset: 0;
        z-index: var(--z-overlay);
        background: rgba(0, 0, 0, 0.3);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .impexp-modal {
        max-width: 460px;
    }
}