/* Core */

:root {
    color-scheme: light;
    --canvas: #f4f5f2;
    --surface: #ffffff;
    --surface-muted: #eef0eb;
    --surface-subtle: #f8f9f6;
    --ink: #152019;
    --ink-muted: #647068;
    --ink-subtle: #8e9891;
    --line: #dfe3dd;
    --line-strong: #c8cec8;
    --accent: #176b45;
    --accent-hover: #125a39;
    --accent-soft: #e4f1e9;
    --error: #b42318;
    --error-hover: #912018;
    --error-soft: #fdebe9;
    --warning: #7b5504;
    --warning-soft: #fff3d6;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --shadow-float: 0 18px 48px rgba(21, 32, 25, .12);
    --font: Inter, "Segoe UI", Arial, sans-serif;
    --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--canvas);
    color: var(--ink);
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.5;
}
body:has(dialog[open]) { overflow: hidden; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
a { color: inherit; }
[hidden] { display: none !important; }

:focus-visible {
    outline: 3px solid rgba(23, 107, 69, .3);
    outline-offset: 2px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: fixed;
    left: 16px;
    top: -80px;
    z-index: 100;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    background: var(--ink);
    color: #fff;
}
.skip-link:focus { top: 16px; }

.finance-app {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 244px minmax(0, 1fr);
}

.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    padding: 22px 16px;
    border-right: 1px solid var(--line);
    background: var(--surface);
    display: flex;
    flex-direction: column;
}
.brand {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 0 8px 24px;
    text-decoration: none;
    font-weight: 680;
    letter-spacing: -.02em;
}
.brand__mark {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: var(--ink);
    color: #fff;
    font-family: var(--mono);
    font-size: 12px;
}
.nav-label {
    margin: 16px 9px 7px;
    color: var(--ink-subtle);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .11em;
    text-transform: uppercase;
}
.nav { display: grid; gap: 3px; }
.nav a {
    min-height: 40px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: var(--radius-sm);
    color: var(--ink-muted);
    text-decoration: none;
    font-size: 14px;
}
.nav a:hover { background: var(--surface-muted); color: var(--ink); }
.nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: 650; }
.nav__icon {
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    flex: 0 0 18px;
    font-family: var(--mono);
    font-size: 15px;
    line-height: 1;
}
.nav__icon svg {
    display: block;
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.sidebar__foot {
    margin-top: auto;
    padding: 16px 8px 2px;
    border-top: 1px solid var(--line);
    color: var(--ink-muted);
    font-size: 12px;
}
.secure-dot {
    width: 7px;
    height: 7px;
    margin-right: 7px;
    display: inline-block;
    border-radius: 50%;
    background: var(--accent);
}

.page { min-width: 0; }
.topbar {
    position: sticky;
    top: 0;
    z-index: 5;
    height: 72px;
    padding: 0 clamp(20px, 4vw, 56px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--line);
    background: rgba(244, 245, 242, .96);
}
.breadcrumb { display: flex; gap: 8px; align-items: center; color: var(--ink-muted); font-size: 13px; }
.breadcrumb strong { color: var(--ink); }
.breadcrumb i { font-style: normal; color: var(--ink-subtle); }
.topbar__actions { display: flex; align-items: center; gap: 8px; }
.avatar {
    width: 34px;
    height: 34px;
    margin-left: 4px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--ink);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

.content {
    width: min(100%, 1440px);
    margin: 0 auto;
    padding: 36px clamp(20px, 4vw, 56px) 96px;
}
.prototype-note {
    min-height: 42px;
    margin-bottom: 34px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid #ead8aa;
    border-radius: var(--radius-sm);
    background: var(--warning-soft);
    color: var(--warning);
    font-size: 13px;
}
.prototype-note strong { flex: 0 0 auto; }
.page-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: 30px;
}
.finance-section-nav {
    margin: -8px 0 28px;
    padding-bottom: 2px;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: thin;
}
.finance-section-nav a {
    min-height: 38px;
    padding: 8px 12px;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink-muted);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
}
.finance-section-nav a:hover { border-color: var(--line-strong); color: var(--ink); }
.finance-section-nav a[aria-current="page"] { border-color: #b9d4c4; background: var(--accent-soft); color: var(--accent); }
.eyebrow, .section-kicker {
    margin: 0 0 8px;
    color: var(--accent);
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
}
.section-kicker--danger { color: var(--error); }
h1 {
    margin: 0;
    font-size: clamp(40px, 5vw, 64px);
    font-weight: 680;
    line-height: 1;
    letter-spacing: -.055em;
}
h2 {
    margin: 0;
    font-size: clamp(22px, 2.2vw, 30px);
    font-weight: 650;
    line-height: 1.15;
    letter-spacing: -.035em;
}
.page-heading__copy { margin: 14px 0 0; color: var(--ink-muted); font-size: 16px; }
.period-control {
    min-width: 258px;
    display: grid;
    grid-template-columns: 38px minmax(150px, 1fr) 38px;
    align-items: center;
    gap: 8px;
}
.period-control a {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    background: var(--surface);
    color: var(--ink-muted);
    text-decoration: none;
    transition: border-color 120ms ease, background-color 120ms ease, color 120ms ease, transform 80ms ease;
}
.period-control a span { margin-top: -2px; font-family: Arial, sans-serif; font-size: 27px; line-height: 1; }
.period-control a:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.period-control a:active { transform: scale(.96); }
.period-control a:focus-visible { outline: 3px solid rgba(23, 107, 69, .18); outline-offset: 2px; }
.period-control strong {
    min-height: 38px;
    padding: 0 16px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--surface-muted);
    color: var(--ink);
    text-align: center;
    font-size: 13px;
    font-weight: 650;
    white-space: nowrap;
}

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


/* Components */

.button {
    min-height: 42px;
    padding: 9px 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: var(--accent);
    color: #fff;
    font-weight: 650;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease, transform 80ms ease;
}
.button:hover { background: var(--accent-hover); }
.button:active { transform: translateY(1px); }
.button--secondary { border-color: var(--line-strong); background: var(--surface); color: var(--ink); }
.button--secondary:hover { background: var(--surface-muted); }
.button--quiet { background: transparent; color: var(--ink-muted); }
.button--quiet:hover { background: var(--surface-muted); color: var(--ink); }
.button--danger { background: var(--error); }
.button--danger:hover { background: var(--error-hover); }
.button--mobile-add { display: none; }
.icon-button {
    width: 40px;
    height: 40px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink-muted);
    cursor: pointer;
}
.icon-button:hover { border-color: var(--line-strong); color: var(--ink); }

.tabs {
    margin-bottom: 24px;
    display: flex;
    gap: 24px;
    border-bottom: 1px solid var(--line-strong);
}
.tabs button {
    position: relative;
    min-height: 44px;
    padding: 0 2px 13px;
    border: 0;
    background: transparent;
    color: var(--ink-muted);
    font-weight: 650;
    cursor: pointer;
}
.tabs button::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 2px;
    background: transparent;
}
.tabs button:hover { color: var(--ink); }
.tabs button[aria-selected="true"] { color: var(--accent); }
.tabs button[aria-selected="true"]::after { background: var(--accent); }

.metric-grid {
    display: grid;
    grid-template-columns: 1.25fr repeat(3, 1fr);
    gap: 10px;
}
.metric {
    min-height: 132px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
}
.metric--primary { border-color: #b9d4c4; background: var(--accent-soft); }
.metric span { color: var(--ink-muted); font-size: 12px; }
.metric strong {
    display: block;
    margin-top: 15px;
    font-family: var(--mono);
    font-size: clamp(22px, 2.2vw, 30px);
    font-weight: 650;
    letter-spacing: -.045em;
    font-variant-numeric: tabular-nums;
}
.metric small { display: block; margin-top: 6px; color: var(--ink-muted); font-size: 12px; }
.amount-positive { color: var(--accent); }

.balance-check { margin-top: 18px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.account-balance-overview { margin-top: 18px; }
.account-balance-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.account-balance-card { position: relative; min-height: 132px; padding: 16px; overflow: hidden; border: 0; border-radius: var(--radius-md); background: #23312a; color: #fff; }
.account-balance-card::after { content: ''; position: absolute; inset: 0; border: 1px solid rgb(255 255 255 / .16); border-radius: inherit; pointer-events: none; }
.account-balance-card__name { display: block; max-width: calc(100% - 32px); color: rgb(255 255 255 / .8); font-size: 12px; line-height: 1.35; }
.account-balance-card strong { position: relative; z-index: 1; display: block; margin-top: 14px; color: #fff; font-family: var(--mono); font-size: 22px; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.account-balance-card--sber { background: #21a038; }
.account-balance-card--vtb { background: #0a2972; }
.account-balance-card--ozon { background: #005bff; }
.account-balance-card--yandex { background: #fc3f1d; }
.account-balance-card--cash { background: #72ad79; }
.account-balance-card--default { background: #2e5b48; }
.bank-logo { position: absolute; right: 15px; bottom: 14px; display: block; max-width: calc(100% - 30px); height: 24px; }
.bank-logo img { display: block; width: auto; max-width: 132px; height: 100%; object-fit: contain; object-position: right bottom; }
.account-balance-card--sber .bank-logo img { max-width: 108px; }
.account-balance-card--yandex .bank-logo img { max-width: 100px; }
.account-balance-card--cash .bank-logo img { width: 24px; }
.balance-check .section-head { margin-bottom: 14px; }
.balance-check__empty { max-width: 720px; margin: 0; color: var(--ink-muted); font-size: 13px; line-height: 1.55; }
.balance-check__summary { margin: -2px 0 12px; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; color: var(--ink-muted); font-size: 12px; }
.balance-check__summary strong { font-family: var(--mono); font-size: 17px; }
.balance-table { width: 100%; border-collapse: collapse; }
.balance-table th, .balance-table td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--line); font-size: 12px; }
.balance-table th { background: var(--surface-muted); color: var(--ink-muted); font-size: 10px; letter-spacing: .055em; text-transform: uppercase; }
.balance-table td:not(:first-child) { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.balance-table tbody tr:last-child td { border-bottom: 0; }
.is-ok { color: var(--accent); }
.is-difference { color: var(--error); }

.operations { margin-top: 42px; }
.section-head { margin-bottom: 18px; display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.filters { margin-bottom: 18px;
    display: grid;
    grid-template-columns: minmax(220px, 1.5fr) repeat(3, minmax(140px, .7fr)) auto;
    gap: 8px;
}
.filters input, .filters select, .field input, .field select, .field textarea {
    width: 100%;
    min-height: 42px;
    padding: 9px 11px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink);
}
.filters input:hover, .filters select:hover, .field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink-subtle); }
.filters input:focus, .filters select:focus, .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); outline: 3px solid rgba(23, 107, 69, .14); }
.search-field input { padding-left: 38px; background-image: radial-gradient(circle at 17px 18px, transparent 5px, var(--ink-subtle) 5.5px, var(--ink-subtle) 6.5px, transparent 7px), linear-gradient(45deg, transparent 48%, var(--ink-subtle) 49%, var(--ink-subtle) 55%, transparent 56%); background-size: 28px 28px, 8px 8px; background-position: 0 2px, 23px 24px; background-repeat: no-repeat; }
.filter-result { margin: 12px 0 9px; color: var(--ink-muted); font-size: 12px; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.operations-table { width: 100%; min-width: 990px; border-collapse: collapse; }
.operations-table th, .operations-table td { padding: 13px 14px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
.operations-table th { background: var(--surface-muted); color: var(--ink-muted); font-size: 10px; letter-spacing: .065em; text-transform: uppercase; }
.operations-table td { font-size: 13px; }
.operations-table tbody tr:last-child td { border-bottom: 0; }
.operations-table tbody tr:hover { background: var(--surface-subtle); }
.operations-table tbody tr[hidden] { display: none; }
.operation-link { max-width: 230px; padding: 0; border: 0; background: transparent; text-align: left; cursor: pointer; }
.operation-link strong, .operation-link small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.operation-link strong { font-size: 13px; font-weight: 650; }
.operation-link small { margin-top: 2px; color: var(--ink-muted); font-size: 11px; }
.amount-cell { text-align: right !important; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.amount-income { color: var(--accent); font-weight: 650; }
.amount-transfer { color: var(--ink-muted); }
.row-actions { width: 54px; }
.row-actions .icon-button { width: 32px; height: 32px; border-color: transparent; background: transparent; font-size: 18px; }
.row-actions .icon-button:hover { background: var(--error-soft); color: var(--error); }
.empty-state { padding: 48px 20px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); text-align: center; }
.empty-state strong, .empty-state span { display: block; }
.empty-state span { margin-top: 5px; color: var(--ink-muted); }

.summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.summary-card { min-height: 340px; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.summary-card--wide { grid-column: 1 / -1; min-height: auto; }
.balance-list { margin-top: 22px; display: grid; grid-template-columns: repeat(4, 1fr); }
.balance-list div { padding: 8px 20px; border-left: 1px solid var(--line); }
.balance-list div:first-child { padding-left: 0; border-left: 0; }
.balance-list span, .balance-list strong { display: block; }
.balance-list span { color: var(--ink-muted); font-size: 12px; }
.balance-list strong { margin-top: 8px; font-family: var(--mono); font-size: 20px; font-variant-numeric: tabular-nums; }
.bar-list { margin-top: 26px; display: grid; gap: 19px; }
.bar-list div { display: grid; grid-template-columns: minmax(100px, 1fr) 2fr auto; gap: 12px; align-items: center; font-size: 12px; }
.bar-list i { height: 7px; border-radius: 3px; background: linear-gradient(to right, var(--accent) var(--bar), var(--surface-muted) var(--bar)); }
.bar-list strong { font-family: var(--mono); font-size: 12px; font-weight: 600; }
.month-chart { height: 210px; margin-top: 24px; display: grid; grid-template-columns: repeat(6, 1fr); align-items: end; gap: 12px; border-bottom: 1px solid var(--line-strong); }
.month-chart div { height: 100%; display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 3px; position: relative; }
.month-chart i, .month-chart b { display: block; min-height: 3px; border-radius: 3px 3px 0 0; }
.month-chart i { height: var(--income); background: var(--accent); }
.month-chart b { height: var(--expense); background: #aeb7b0; }
.month-chart span { position: absolute; right: 0; bottom: -24px; left: 0; color: var(--ink-muted); font-size: 10px; text-align: center; }
.chart-legend { margin-top: 38px; display: flex; gap: 18px; color: var(--ink-muted); font-size: 11px; }
.chart-legend span { display: flex; align-items: center; gap: 6px; }
.chart-legend i { width: 8px; height: 8px; display: inline-block; border-radius: 2px; }
.legend-income { background: var(--accent); }
.legend-expense { background: #aeb7b0; }

.dialog {
    width: min(640px, calc(100vw - 32px));
    max-height: min(780px, calc(100dvh - 40px));
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: var(--radius-lg);
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--shadow-float);
}
.dialog--wide { width: min(780px, calc(100vw - 32px)); }
.dialog--small { width: min(480px, calc(100vw - 32px)); }
.dialog::backdrop { background: rgba(21, 32, 25, .56); }
.dialog[open] { animation: dialog-in 150ms ease-out; }
@keyframes dialog-in { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: scale(1); } }
.dialog__frame { max-height: inherit; margin: 0; display: flex; flex-direction: column; }
.dialog__head, .dialog__foot { flex: 0 0 auto; padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.dialog__head { border-bottom: 1px solid var(--line); }
.dialog__head h2 { font-size: 25px; }
.dialog__close { flex: 0 0 auto; font-size: 20px; }
.dialog__body { padding: 24px; overflow-y: auto; }
.dialog__foot { border-top: 1px solid var(--line); background: var(--surface-subtle); }
.dialog__foot > :first-child { margin-left: auto; }
.dialog__hint { margin-right: auto; color: var(--ink-muted); font-size: 12px; }
.dialog-copy { margin: 0 0 18px; color: var(--ink-muted); font-size: 13px; line-height: 1.55; }
.balance-date { max-width: 240px; }
.balance-entry-list { margin-top: 20px; display: grid; gap: 8px; }
.balance-entry { padding: 12px 14px; display: grid; grid-template-columns: minmax(0, 1fr) 180px; gap: 18px; align-items: center; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.balance-entry > span:first-child strong, .balance-entry > span:first-child small { display: block; }
.balance-entry > span:first-child strong { font-size: 13px; }
.balance-entry > span:first-child small { margin-top: 3px; color: var(--ink-muted); font-size: 11px; }
.balance-entry input { width: 100%; min-height: 42px; padding: 9px 42px 9px 11px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); font-family: var(--mono); text-align: right; }
.segmented { margin-bottom: 22px; padding: 4px; display: grid; grid-template-columns: repeat(3, 1fr); border-radius: 10px; background: var(--surface-muted); }
.segmented button { min-height: 38px; border: 0; border-radius: 7px; background: transparent; color: var(--ink-muted); cursor: pointer; }
.segmented button[aria-pressed="true"] { background: var(--surface); color: var(--ink); font-weight: 650; box-shadow: 0 1px 2px rgba(21, 32, 25, .08); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 7px; }
.field > span { font-size: 12px; font-weight: 650; }
.field-control-row { display: flex; gap: 8px; align-items: stretch; }
.field-control-row select { min-width: 0; flex: 1; }
.field-control-row .button { flex: 0 0 auto; min-height: 42px; }
.form-status { min-height: 18px; margin: 12px 0 0; color: var(--error); font-size: 12px; }
.field--amount, .field--full { grid-column: 1 / -1; }
.field--amount input { font-family: var(--mono); font-size: 24px; }
.allocation-section { padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-subtle); }
.allocation-section__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; font-weight: 650; }
.allocation-section .dialog-copy { margin: 8px 0 12px; }
.category-tags-select { width: 100%; min-height: 168px; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); }
.category-tags-select option { padding: 6px 4px; }
.reference-input { display: flex; gap: 8px; align-items: center; }
.reference-input > input[type="text"], .reference-input > input:not([type]) { width: 100%; min-width: 0; min-height: 42px; flex: 1; padding: 9px 11px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); }
.reference-input > input[type="text"]:hover, .reference-input > input:not([type]):hover { border-color: var(--ink-subtle); }
.reference-input > input[type="text"]:focus, .reference-input > input:not([type]):focus { border-color: var(--accent); outline: 3px solid rgba(23, 107, 69, .14); }
.reference-picker { position: relative; }
.reference-suggestions { position: absolute; z-index: 5; top: calc(100% + 4px); right: 0; left: 0; overflow: auto; max-height: 224px; padding: 4px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); box-shadow: 0 10px 24px rgba(22, 29, 33, .14); }
.reference-suggestion { display: block; width: 100%; padding: 9px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.reference-suggestion:hover, .reference-suggestion:focus { background: var(--surface-subtle); }
.tag-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.category-tag { display: inline-flex; align-items: center; gap: 2px; min-height: 32px; padding: 3px 5px 3px 10px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); font-size: 13px; }
.category-tag .icon-button { width: 18px; height: 18px; min-height: 18px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink-muted); font-size: 16px; line-height: 1; }
.category-tag .icon-button:hover { background: var(--surface-muted); color: var(--ink); }
.row-actions { white-space: nowrap; }
.operation-edit { min-height: 32px; padding: 5px 8px; }
.money-input { position: relative; }
.money-input input { padding-right: 48px; }
.money-input b { position: absolute; top: 50%; right: 14px; transform: translateY(-50%); color: var(--ink-muted); }
.directory-tabs { display: flex; gap: 6px; overflow-x: auto; }
.directory-tabs button { min-height: 38px; padding: 7px 11px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--ink-muted); white-space: nowrap; cursor: pointer; }
.directory-tabs button[aria-selected="true"] { border-color: #b9d4c4; background: var(--accent-soft); color: var(--accent); }
.directory-list { margin-top: 18px; border: 1px solid var(--line); border-radius: var(--radius-md); }
.directory-list > div { min-height: 62px; padding: 10px 12px 10px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); }
.directory-list > div:last-child { border-bottom: 0; }
.directory-list strong, .directory-list small { display: block; }
.directory-list strong { font-size: 13px; }
.directory-list small { margin-top: 2px; color: var(--ink-muted); font-size: 11px; }
.directory-list .account-actions { display: flex; gap: 8px; align-items: center; }

.button:disabled { opacity: .48; cursor: not-allowed; }
.delete-copy { margin: 0; color: var(--ink-muted); }
.delete-copy strong { color: var(--ink); }
.toast { position: fixed; right: 24px; bottom: 24px; z-index: 50; max-width: 360px; padding: 13px 16px; border-radius: var(--radius-sm); background: var(--ink); color: #fff; box-shadow: var(--shadow-float); font-size: 13px; }



/* Responsive */

@media (max-width: 1120px) {
    .finance-app { grid-template-columns: 76px minmax(0, 1fr); }
    .sidebar { padding-inline: 10px; }
    .brand { justify-content: center; padding-inline: 0; }
    .brand__name, .nav span:not(.nav__icon), .nav-label, .sidebar__foot { display: none; }
    .nav a { justify-content: center; padding-inline: 0; }
    .metric-grid { grid-template-columns: 1fr 1fr; }
    .filters { grid-template-columns: minmax(240px, 1fr) repeat(2, minmax(140px, .7fr)); }
    .filters label:nth-of-type(4) { grid-column: 1 / 2; }
    .filters .button { justify-self: start; }
}

@media (max-width: 760px) {
    .finance-app { display: block; }
    .sidebar {
        position: static;
        width: auto;
        height: 58px;
        padding: 10px 16px;
        flex-direction: row;
        align-items: center;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }
    .brand { margin-right: auto; padding: 0; }
    .brand__name { display: inline; }
    .nav { display: none; }
    .topbar { height: 58px; padding-inline: 16px; }
    .breadcrumb span, .breadcrumb i { display: none; }
    .topbar__directory, .topbar__actions > .button:not(.topbar__directory), .avatar { display: none; }
    .content { padding: 24px 16px 64px; }
    .prototype-note { margin-bottom: 26px; align-items: flex-start; flex-direction: column; gap: 2px; }
    .page-heading { align-items: stretch; flex-direction: column; gap: 22px; }
    .period-control { width: min(100%, 330px); }
    h1 { font-size: 44px; }
    .tabs { margin-bottom: 18px; }
    .metric-grid { display: flex; margin-inline: -16px; padding-inline: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
    .metric-grid::-webkit-scrollbar { display: none; }
    .metric { min-width: min(82vw, 310px); scroll-snap-align: start; }
    .operations { margin-top: 34px; }
    .button--mobile-add { display: inline-flex; }
    .filters { grid-template-columns: 1fr 1fr; }
    .filters .search-field { grid-column: 1 / -1; }
    .filters label:nth-of-type(4) { grid-column: auto; }
    .filters .button { grid-column: 1 / -1; justify-self: stretch; }
    .table-wrap { overflow: visible; border: 0; background: transparent; }
    .operations-table { min-width: 0; }
    .operations-table thead { display: none; }
    .operations-table, .operations-table tbody { display: block; }
    .operations-table tr {
        position: relative;
        margin-bottom: 8px;
        padding: 14px 48px 14px 14px;
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 7px 16px;
        border: 1px solid var(--line);
        border-radius: var(--radius-md);
        background: var(--surface);
    }
    .operations-table td { padding: 0; display: block; border: 0; }
    .operations-table td:first-child { grid-column: 2; grid-row: 1; color: var(--ink-muted); font-size: 11px; }
    .operations-table td:nth-child(2) { grid-column: 1; grid-row: 1 / span 2; }
    .operations-table td:nth-child(3), .operations-table td:nth-child(4) { display: none; }
    .operations-table td:nth-child(5) { grid-column: 1; color: var(--ink-muted); font-size: 11px; }
    .operations-table .amount-cell { grid-column: 2; text-align: right !important; }
    .operation-link { max-width: calc(100vw - 165px); }
    .row-actions { position: absolute; top: 50%; right: 8px; width: 32px; transform: translateY(-50%); }
    .summary-grid { grid-template-columns: 1fr; }
    .summary-card--wide { grid-column: auto; }
    .balance-list { grid-template-columns: 1fr 1fr; gap: 16px 0; }
    .balance-list strong { font-size: 18px; white-space: nowrap; }
    .balance-list div:nth-child(3) { padding-left: 0; border-left: 0; }
    .bar-list div { grid-template-columns: 1fr auto; }
    .bar-list i { grid-column: 1 / -1; grid-row: 2; }
    .balance-table { min-width: 620px; }
}

@media (max-width: 560px) {
    .filters { grid-template-columns: 1fr; }
    .filters .search-field, .filters .button { grid-column: auto; }
    .dialog, .dialog--wide, .dialog--small {
        width: 100vw;
        max-width: none;
        height: 100dvh;
        max-height: none;
        margin: 0;
        border-radius: 0;
    }
    .dialog__frame { height: 100%; max-height: none; }
    .dialog__head, .dialog__foot { padding: 16px; }
    .dialog__body { padding: 18px 16px; }
    .dialog__foot { position: sticky; bottom: 0; }
    .dialog__foot .button { flex: 1; }
    .dialog__hint { display: none; }
    .form-grid { grid-template-columns: 1fr; }
    .balance-entry { grid-template-columns: 1fr; gap: 10px; }
    .field--amount, .field--full { grid-column: auto; }
    .directory-list .button { min-height: 40px; padding-inline: 10px; }
    .toast { right: 12px; bottom: 12px; left: 12px; max-width: none; }
}


/* Sidebar */

.nav details{margin:0}.nav summary{display:flex;align-items:center;gap:10px;min-height:40px;padding:8px 10px;border-radius:var(--radius-sm);color:var(--ink-muted);font-size:14px;cursor:pointer;list-style:none}.nav summary::-webkit-details-marker{display:none}.nav summary:hover{background:var(--surface-muted);color:var(--ink)}.nav summary[aria-current="page"]{color:var(--accent);font-weight:650}.nav-projects__chevron{display:grid;place-items:center;width:18px;height:18px;margin-left:auto;transition:transform 120ms ease}.nav-projects__chevron svg{display:block;width:16px;height:16px;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.nav-projects[open] .nav-projects__chevron{transform:rotate(180deg)}.nav-projects__items{display:grid;gap:2px;margin:2px 0 4px 28px;padding-left:10px;border-left:1px solid var(--line)}.nav-projects__items a{min-height:36px;padding:7px 9px;font-size:13px}.nav summary:focus-visible{outline:3px solid rgba(23,107,69,.3);outline-offset:2px}@media(prefers-reduced-motion:reduce){.nav-projects__chevron{transition:none}}@media(max-width:1120px) and (min-width:761px){.nav-projects__chevron,.nav-projects__items{display:none}.nav-projects summary{justify-content:center;padding-inline:0}}@media(max-width:760px){.sidebar{height:auto;min-height:58px;flex-wrap:wrap}.nav{display:flex;width:100%;gap:4px;padding-top:10px;overflow-x:auto}.nav a,.nav summary{white-space:nowrap}.nav-projects__items{position:absolute;z-index:20;margin:2px 0 0;padding:6px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);box-shadow:var(--shadow-float)}}


/* Home */
.home-page{min-height:100vh;background:var(--canvas)}.home-shell{min-height:100vh;display:grid;grid-template-columns:244px minmax(0,1fr)}.home-sidebar{position:sticky;top:0;height:100vh;padding:22px 16px;border-right:1px solid var(--line);background:var(--surface);display:flex;flex-direction:column}.home-brand{display:flex;gap:11px;align-items:center;padding:0 8px 24px;color:var(--ink);font-weight:680;letter-spacing:-.02em;text-decoration:none}.home-brand__mark{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--ink);color:#fff;font-family:var(--mono);font-size:12px}.home-nav-label{margin:16px 9px 7px;color:var(--ink-subtle);font:700 10px var(--mono);letter-spacing:.11em;text-transform:uppercase}.home-nav{display:grid;gap:3px}.home-nav a{display:flex;gap:10px;align-items:center;min-height:40px;padding:8px 10px;border-radius:var(--radius-sm);color:var(--ink-muted);text-decoration:none;font-size:14px}.home-nav a:hover{background:var(--surface-muted);color:var(--ink)}.home-nav a[aria-current=page]{background:var(--accent-soft);color:var(--accent);font-weight:650}.home-nav__icon{display:grid;place-items:center;width:18px;font-family:var(--mono)}.home-sidebar__foot{margin-top:auto;padding:16px 8px 2px;border-top:1px solid var(--line);color:var(--ink-muted);font-size:12px}.home-sidebar__foot i{display:inline-block;width:7px;height:7px;margin-right:7px;border-radius:50%;background:var(--accent)}.home-main{min-width:0}.home-top{display:flex;align-items:center;justify-content:space-between;height:72px;padding:0 clamp(20px,4vw,56px);border-bottom:1px solid var(--line);background:rgba(244,245,242,.96)}.home-top__label{color:var(--ink-muted);font-size:13px}.home-avatar{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--ink);color:#fff;font-size:11px;font-weight:700}.home-content{width:min(100%,1280px);margin:0 auto;padding:44px clamp(20px,4vw,56px) 96px}.home-heading{display:flex;align-items:end;justify-content:space-between;gap:28px;margin-bottom:36px}.home-eyebrow{margin:0 0 10px;color:var(--accent);font:700 10px var(--mono);letter-spacing:.11em;text-transform:uppercase}.home-heading h1{margin:0;font-size:clamp(38px,5vw,64px);line-height:1;letter-spacing:-.055em}.home-heading p{max-width:480px;margin:0;color:var(--ink-muted);font-size:16px}.home-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(290px,.8fr);gap:22px}.home-panel{border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface)}.home-panel__head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:19px 20px;border-bottom:1px solid var(--line)}.home-panel__head h2{margin:0;font-size:18px;letter-spacing:-.025em}.home-panel__head a{color:var(--accent);font-size:13px;font-weight:650;text-decoration:none}.home-panel__head a:hover{text-decoration:underline}.home-balance{padding:28px 24px}.home-balance__label{display:block;margin-bottom:8px;color:var(--ink-muted);font-size:13px}.home-balance__value{display:block;font-family:var(--mono);font-size:clamp(34px,4vw,52px);font-weight:650;letter-spacing:-.06em}.home-balance__meta{display:flex;gap:16px;margin-top:20px;color:var(--ink-muted);font-size:12px}.home-balance__meta b{color:var(--ink);font-family:var(--mono)}.home-cashflow{display:grid;grid-template-columns:1fr 1fr;padding:0}.home-cashflow__item{padding:20px;border-bottom:1px solid var(--line)}.home-cashflow__item:nth-child(odd){border-right:1px solid var(--line)}.home-cashflow__item span{display:block;color:var(--ink-muted);font-size:12px}.home-cashflow__item strong{display:block;margin-top:7px;font-family:var(--mono);font-size:20px;letter-spacing:-.03em}.home-cashflow__item--income strong{color:var(--accent)}.home-cashflow__item--expense strong{color:var(--error)}.home-tasks{padding:4px 20px 8px;list-style:none;margin:0}.home-task{display:grid;grid-template-columns:10px minmax(0,1fr) auto;gap:10px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line)}.home-task:last-child{border:0}.home-task__dot{width:8px;height:8px;border-radius:50%;background:var(--ink-subtle)}.home-task__dot--doing{background:#c88918}.home-task__dot--control{background:#7968c9}.home-task__dot--review{background:var(--accent)}.home-task__name{font-size:14px}.home-task__count{font:12px var(--mono);color:var(--ink-muted)}.home-actions{display:grid;gap:10px;padding:20px}.home-action{display:flex;align-items:center;justify-content:space-between;min-height:58px;padding:14px;border:1px solid var(--line);border-radius:var(--radius-md);color:var(--ink);text-decoration:none}.home-action:hover{border-color:var(--accent);background:var(--accent-soft)}.home-action__main{display:grid;gap:2px}.home-action__main strong{font-size:14px}.home-action__main span{color:var(--ink-muted);font-size:12px}.home-action__arrow{color:var(--accent);font-size:18px}.home-empty{padding:26px 20px;color:var(--ink-muted);font-size:14px}@media(max-width:900px){.home-shell{grid-template-columns:1fr}.home-sidebar{position:static;height:auto;padding:14px 20px;border-right:0;border-bottom:1px solid var(--line)}.home-brand{padding:0}.home-nav-label,.home-sidebar__foot{display:none}.home-nav{display:flex;gap:6px;margin-top:12px;overflow:auto}.home-nav a{white-space:nowrap}.home-grid{grid-template-columns:1fr}}@media(max-width:560px){.home-top{height:58px}.home-heading{align-items:start;flex-direction:column;margin-bottom:26px}.home-content{padding-top:30px}.home-cashflow{grid-template-columns:1fr}.home-cashflow__item:nth-child(odd){border-right:0}.home-balance{padding:22px 18px}.home-balance__meta{display:grid;gap:6px}.home-panel__head{padding:17px 18px}}


/* Projects */
.project-empty{max-width:820px;padding:clamp(28px,5vw,54px);border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface)}.project-empty__mark{display:grid;place-items:center;width:44px;height:44px;margin-bottom:34px;border:1px solid var(--line-strong);border-radius:12px;color:var(--accent);font:20px var(--mono)}.project-empty h2{margin-bottom:12px}.project-empty p{max-width:590px;margin:0;color:var(--ink-muted);font-size:16px}.project-heading{max-width:850px;margin-bottom:42px}


/* Finance planning */
.planning-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:26px}.planning-head h1{margin:0}.planning-head__copy{margin:8px 0 0;color:var(--ink-muted)}.debt-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0 0 18px}.debt-metric{padding:18px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface)}.debt-metric span,.debt-metric small{display:block;color:var(--ink-muted)}.debt-metric span{font-size:12px;font-weight:650}.debt-metric strong{display:block;margin:8px 0 4px;font-family:var(--mono);font-size:24px}.debt-metric small{font-size:11px}.debt-metric--debit strong{color:var(--accent)}.debt-metric--credit strong{color:var(--error)}.debt-metric--balance strong.is-positive{color:var(--accent)}.debt-metric--balance strong.is-negative{color:var(--error)}.debt-direction{font-weight:650}.debt-direction--receivable{color:var(--accent)}.debt-direction--payable{color:var(--error)}.debt-comment__counterparty,.debt-comment__text{display:block}.debt-comment__counterparty{margin-bottom:3px;color:var(--ink-muted);font-size:11px;font-weight:650}.debt-comment__text{font-size:13px}.planning-card{padding:18px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface)}.planning-filters{display:grid;grid-template-columns:minmax(220px,1fr) minmax(160px,.35fr) auto minmax(180px,auto);gap:8px;align-items:center;margin-bottom:18px}.planning-filters input{width:100%;min-height:42px;padding:9px 11px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--surface);color:var(--ink)}.planning-filters [data-summary]{justify-self:end;font-family:var(--mono);font-size:12px}.planning-table-wrap{overflow-x:auto}.planning-table{width:100%;min-width:1040px;border-collapse:collapse}.planning-table th,.planning-table td{padding:13px 14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}.planning-table th{background:var(--surface-muted);color:var(--ink-muted);font-size:10px;letter-spacing:.065em;text-transform:uppercase}.planning-table tbody tr:hover{background:var(--surface-subtle)}.planning-table td:last-child{white-space:nowrap}.planning-table td button{min-height:34px;padding:6px 10px;border:1px solid transparent;border-radius:var(--radius-sm);background:var(--accent);color:#fff;font-weight:600;cursor:pointer}.planning-table td button.secondary{border-color:var(--line);background:var(--surface);color:var(--ink-muted)}.planning-table details summary{cursor:pointer;font-weight:700;color:#334155}.planning-table details ol{margin:8px 0 0;padding-left:20px;white-space:nowrap}.planning-table details li+li{margin-top:4px}.planning-error{margin:10px 0;color:var(--error)}.planning-empty{padding:40px;text-align:center;color:var(--ink-muted)}.planning-dialog{width:min(720px,calc(100vw - 32px));max-height:85vh;padding:0;border:0;border-radius:var(--radius-lg);box-shadow:var(--shadow-float)}.planning-dialog::backdrop{background:rgba(21,32,25,.48)}.planning-dialog form{padding:22px;display:grid;gap:14px}.planning-dialog [data-fields]{display:grid;grid-template-columns:1fr 1fr;gap:14px}.planning-dialog label{display:grid;gap:5px;color:var(--ink-muted);font-size:12px}.planning-dialog label:has(textarea){grid-column:1/-1}.planning-dialog input,.planning-dialog select,.planning-dialog textarea{width:100%;min-height:42px;padding:9px 11px;border:1px solid var(--line-strong);border-radius:var(--radius-sm)}.planning-dialog menu{display:flex;justify-content:flex-end;gap:8px;margin:4px 0 0;padding:0}@media(max-width:760px){.planning-head{align-items:stretch;flex-direction:column}.debt-metrics{grid-template-columns:1fr}.planning-head .button{align-self:flex-start}.planning-card{padding:0;border:0;background:transparent}.planning-filters{grid-template-columns:1fr 1fr}.planning-filters [data-q],.planning-filters [data-summary]{grid-column:1/-1}.planning-filters [data-summary]{justify-self:start}.planning-table-wrap{border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface)}}@media(max-width:520px){.planning-filters{grid-template-columns:1fr}.planning-filters [data-q],.planning-filters [data-summary]{grid-column:auto}.planning-dialog{width:100vw;height:100dvh;max-height:none;margin:0;border-radius:0}.planning-dialog [data-fields]{grid-template-columns:1fr}.planning-dialog label:has(textarea){grid-column:auto}}


/* Authenticated shell and login */
@scope (body.auth-page) {
:scope { color-scheme: light; font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
        * { box-sizing: border-box; }
        :scope { margin: 0; min-height: 100vh; background: #f5f6f8; color: #18202a; }
        main { width: min(100% - 32px, 520px); margin: 0 auto; padding: 12vh 0 48px; }
        .auth-shell { background: #fff; border: 1px solid #e3e7ec; border-radius: 18px; padding: 32px; box-shadow: 0 18px 55px rgba(24,32,42,.08); }
        h1 { margin: 0 0 24px; font-size: 28px; line-height: 1.2; }
        label { display: block; margin: 16px 0 7px; font-weight: 650; }
        input { width: 100%; min-height: 46px; border: 1px solid #cbd2da; border-radius: 10px; padding: 10px 12px; font: inherit; }
        input:focus { outline: 3px solid rgba(43,103,246,.16); border-color: #2b67f6; }
        button { width: 100%; min-height: 46px; margin-top: 22px; border: 0; border-radius: 10px; background: #18202a; color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
        .help-block { margin-top: 6px; color: #b42318; font-size: 14px; }
}


/* Weekly autoservice report */
@scope (body.app-layout-page) {
.history{display:grid;gap:16px}.history article{border:1px solid #e3e7ec;border-radius:10px;padding:14px}.report-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px;margin-top:12px}.report-export canvas{width:100%;height:auto;background:#f4f6f8;border-radius:8px}.report-export button{margin-top:8px}.export-status{margin-left:8px}.notice{padding:10px;border-radius:8px}.success{background:#e9f7ef}.error{background:#fdecec}
}


/* Tasks board */
@scope (body.tasks-page) {
:scope {--bg:#f3f5f2;--panel:#e8ece7;--card:#fff;--ink:#17221b;--muted:#637067;--line:#d3dbd3;--a:#176b45}*{box-sizing:border-box}:scope {margin:0;background:var(--bg);font:14px Segoe UI,sans-serif;color:var(--ink)}.app{width:calc(100% - 32px);max-width:1800px;margin:auto;padding:18px 0}.top{display:flex;justify-content:space-between;align-items:end;gap:16px}.top h1{margin:2px 0;font-size:28px}.muted{color:var(--muted)}a{color:var(--a)}.filters{display:grid;grid-template-columns:2fr repeat(4,1fr) auto auto;gap:8px;margin:16px 0}.filters input,.filters select,.filters button,.drawer input,.drawer select,.drawer textarea,.drawer button{height:38px;border:1px solid var(--line);border-radius:7px;padding:0 10px;background:#fff}.filters button,.primary{background:var(--a)!important;color:#fff;border:0!important;font-weight:600}.board{height:calc(100vh - 254px);min-height:520px;display:grid;grid-template-columns:repeat(5,minmax(220px,1fr));gap:14px}.lane{min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px;overflow:hidden;display:flex;flex-direction:column}.lane h2{font-size:14px;margin:0 0 8px;display:flex;justify-content:space-between}.cards{overflow-y:auto;padding:3px}.cards.is-drop-target{background:#dcebe2;box-shadow:inset 0 0 0 2px var(--a);border-radius:8px}.card{display:block;color:inherit;background:var(--card);border:1px solid var(--line);border-radius:9px;padding:10px;margin:0 0 8px;box-shadow:0 1px 2px #1520190b;cursor:pointer;transition:border-color 120ms ease,box-shadow 120ms ease,opacity 120ms ease}.card:hover{border-color:#b7c4b9;box-shadow:0 3px 9px #15201912}.card[draggable="true"]{cursor:grab}.card.is-dragging{opacity:.45;cursor:grabbing}.card:focus-visible,input:focus-visible,select:focus-visible,button:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid #76b99a;outline-offset:2px}.card-head{display:flex;align-items:start;justify-content:space-between;gap:10px}.card-code{min-height:26px;padding:2px 4px;border:0;border-radius:5px;background:transparent;color:var(--a);font:bold 12px ui-monospace,Consolas;cursor:copy}.card-code:hover{background:#edf5f0}.card-code__feedback{display:inline-block;margin-left:5px;color:var(--muted);font:10px Segoe UI,sans-serif}.card-project{max-width:68%;min-width:0;display:flex;justify-content:flex-end;gap:3px;color:var(--muted);font-size:11px;line-height:1.35;text-align:right;white-space:nowrap}.card-project__name{min-width:0;overflow:hidden;text-overflow:ellipsis}.card-project__date{flex:0 0 auto}.card-link{display:block;color:inherit;text-decoration:none}.title{display:block;font-weight:650;line-height:1.3;margin:7px 0 10px}.meta{font-size:12px;color:var(--muted);line-height:1.35}.card-footer{display:flex;align-items:center;gap:10px;margin-top:10px}.card-priority{margin-right:4px}.code{font:bold 12px ui-monospace,Consolas;color:var(--a)}.badge{background:#e4f1e9;color:#125a39;border-radius:99px;padding:3px 7px;font-size:11px}.tabs{display:none}.drawer-shade{position:fixed;inset:0;background:#17221b66;z-index:10}.drawer{position:fixed;z-index:11;right:0;top:0;width:min(600px,94vw);height:100vh;overflow:auto;background:#fff;padding:22px;box-shadow:-10px 0 40px #0002}.drawer-head{display:flex;justify-content:space-between;gap:10px}.drawer h2{margin:4px 0 14px}.drawer form{display:grid;gap:9px;margin:16px 0}.drawer textarea{height:90px;padding:10px}.drawer .row{display:grid;grid-template-columns:1fr 1fr;gap:8px}.drawer .inline{display:flex;gap:8px;align-items:center}.drawer .inline>*{flex:1}.history{border-top:1px solid var(--line);padding:9px 0}.subtask.done{text-decoration:line-through;color:var(--muted)}
.card--overdue{background:#fff8f5;border-left:4px solid #c6533f;padding-left:7px}.card-overdue{display:inline-flex;margin-top:7px;border-radius:4px;background:#f5ded8;color:#8d2f20;padding:2px 6px;font-size:11px;font-weight:700}.card-move{margin-left:auto;position:relative}.card-move summary{display:inline-flex;align-items:center;min-height:32px;padding:5px 9px;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--a);font-weight:650;cursor:pointer;list-style:none}.card-move summary::-webkit-details-marker{display:none}.card-move summary::after{content:'›';margin-left:6px;transform:rotate(90deg);font-size:16px}.card-move[open] summary{border-color:var(--a);background:#edf5f0}.card-move__menu{position:fixed;z-index:30;display:grid;gap:2px;padding:6px;border:1px solid var(--line);border-radius:9px;background:#fff;box-shadow:0 10px 28px #1520192b}.card-move__menu form{margin:0}.card-move__menu button{width:100%;min-height:40px;padding:8px 10px;border:0;border-radius:6px;background:#fff;color:var(--ink);text-align:left;cursor:pointer}.card-move__menu button:hover,.card-move__menu button:focus-visible{background:#edf5f0;color:var(--a)}@media(max-width:700px){.app{width:calc(100vw - 24px);padding:12px 0}.top{align-items:start}.filters{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.filters input{grid-column:span 2}.tabs{display:flex;overflow:auto;gap:6px;padding:8px 0}.tabs a{white-space:nowrap;border:1px solid var(--line);border-radius:99px;padding:7px 9px;text-decoration:none}.board{height:auto;min-height:0;display:block}.lane{display:none}.lane:first-child,.lane:target{display:flex}.board:has(.lane:target) .lane:first-child:not(:target){display:none}.cards{overflow:visible}.card[draggable="true"]{cursor:pointer}.card-move summary,.card-move__menu button{min-height:44px}.drawer{width:100vw;padding:16px}.drawer .row{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.card{transition:none}}
}


/* UI kit */
@scope (body.ui-kit-page) {
:scope {
            color-scheme: light;
            --canvas: #f4f5f2;
            --surface: #ffffff;
            --surface-muted: #eef0eb;
            --ink: #152019;
            --ink-muted: #647068;
            --ink-subtle: #8e9891;
            --line: #dfe3dd;
            --line-strong: #c8cec8;
            --accent: #176b45;
            --accent-hover: #125a39;
            --accent-soft: #e4f1e9;
            --success: #176b45;
            --warning: #9a6300;
            --warning-soft: #fff3d6;
            --error: #b42318;
            --error-soft: #fdebe9;
            --info: #2858a5;
            --info-soft: #e8effb;
            --radius-sm: 8px;
            --radius-md: 12px;
            --radius-lg: 18px;
            --shadow-float: 0 18px 48px rgba(21, 32, 25, .09);
            --font: Inter, "Segoe UI", Arial, sans-serif;
            --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
        }

        * { box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        :scope { margin: 0; background: var(--canvas); color: var(--ink); font-family: var(--font); font-size: 15px; line-height: 1.5; }
        button, input, select, textarea { font: inherit; }
        a { color: inherit; }
        :focus-visible { outline: 3px solid rgba(23, 107, 69, .28); outline-offset: 2px; }
        .skip-link { position: fixed; left: 16px; top: -80px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: var(--radius-sm); }
        .skip-link:focus { top: 16px; }
        .app { min-height: 100vh; display: grid; grid-template-columns: 244px minmax(0, 1fr); }
        .sidebar { position: sticky; top: 0; height: 100vh; padding: 22px 16px; border-right: 1px solid var(--line); background: var(--surface); display: flex; flex-direction: column; }
        .brand { display: flex; align-items: center; gap: 11px; padding: 0 8px 24px; text-decoration: none; font-weight: 680; letter-spacing: -.02em; }
        .brand__mark { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: var(--ink); color: #fff; font-family: var(--mono); font-size: 12px; }
        .nav-label { margin: 16px 9px 7px; color: var(--ink-subtle); font-family: var(--mono); font-size: 10px; letter-spacing: .11em; text-transform: uppercase; }
        .nav { display: grid; gap: 3px; }
        .nav a { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 10px; border-radius: var(--radius-sm); color: var(--ink-muted); text-decoration: none; font-size: 14px; }
        .nav a:hover { background: var(--surface-muted); color: var(--ink); }
        .nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: 650; }
        .nav svg { width: 17px; height: 17px; flex: 0 0 auto; }
        .sidebar__foot { margin-top: auto; padding: 16px 8px 2px; border-top: 1px solid var(--line); color: var(--ink-muted); font-size: 12px; }
        .page { min-width: 0; }
        .topbar { height: 72px; padding: 0 clamp(20px, 4vw, 56px); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); background: rgba(244, 245, 242, .92); position: sticky; top: 0; z-index: 5; backdrop-filter: blur(10px); }
        .breadcrumb { display: flex; gap: 8px; align-items: center; color: var(--ink-muted); font-size: 13px; }
        .breadcrumb strong { color: var(--ink); }
        .topbar__actions { display: flex; align-items: center; gap: 8px; }
        .icon-button { width: 40px; height: 40px; padding: 0; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink-muted); cursor: pointer; }
        .icon-button:hover { border-color: var(--line-strong); color: var(--ink); }
        .avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: #fff; font-size: 11px; font-weight: 700; }
        .content { width: min(100%, 1280px); margin: 0 auto; padding: 54px clamp(20px, 4vw, 56px) 96px; }
        .intro { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(240px, .7fr); gap: 42px; align-items: end; padding-bottom: 56px; }
        .eyebrow { margin: 0 0 12px; color: var(--accent); font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
        h1 { max-width: 760px; margin: 0; font-size: clamp(42px, 6.2vw, 78px); line-height: .98; letter-spacing: -.055em; font-weight: 690; }
        .lead { margin: 22px 0 0; max-width: 650px; color: var(--ink-muted); font-size: clamp(17px, 2vw, 20px); line-height: 1.55; }
        .intro__meta { border-left: 1px solid var(--line-strong); padding-left: 24px; }
        .meta-row { display: flex; justify-content: space-between; gap: 20px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
        .meta-row span { color: var(--ink-muted); }
        .meta-row strong { font-family: var(--mono); font-size: 12px; }
        .section { padding: 54px 0 14px; border-top: 1px solid var(--line-strong); }
        .section__head { display: grid; grid-template-columns: 190px 1fr; gap: 24px; margin-bottom: 30px; }
        .section__number { color: var(--ink-subtle); font-family: var(--mono); font-size: 12px; }
        h2 { margin: 0 0 8px; font-size: clamp(26px, 3vw, 36px); line-height: 1.12; letter-spacing: -.035em; font-weight: 660; }
        .section__copy { margin: 0; max-width: 650px; color: var(--ink-muted); }
        .palette { display: grid; grid-template-columns: repeat(6, minmax(120px, 1fr)); gap: 10px; }
        .swatch { min-height: 142px; padding: 14px; display: flex; flex-direction: column; justify-content: flex-end; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--swatch); color: var(--swatch-ink, var(--ink)); }
        .swatch strong { font-size: 13px; }
        .swatch code { margin-top: 2px; font-family: var(--mono); font-size: 11px; opacity: .7; }
        .type-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
        .type-card { padding: clamp(22px, 3vw, 34px); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
        .display-sample { margin: 0; font-size: clamp(38px, 5vw, 64px); line-height: 1; letter-spacing: -.055em; font-weight: 690; }
        .body-sample { max-width: 560px; margin: 18px 0 0; color: var(--ink-muted); font-size: 16px; line-height: 1.65; }
        .type-scale { display: grid; gap: 15px; }
        .type-line { display: grid; grid-template-columns: 56px 1fr; gap: 20px; align-items: baseline; }
        .type-line code { color: var(--ink-subtle); font-family: var(--mono); font-size: 11px; }
        .components-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
        .panel { padding: clamp(20px, 3vw, 30px); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
        .panel--wide { grid-column: 1 / -1; }
        .panel__title { margin: 0 0 20px; font-size: 12px; font-family: var(--mono); letter-spacing: .08em; text-transform: uppercase; }
        .stack { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
        .button { min-height: 42px; padding: 9px 15px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: var(--radius-sm); background: var(--accent); color: #fff; font-weight: 650; text-decoration: none; cursor: pointer; transition: background 120ms ease, border-color 120ms ease, transform 80ms ease; }
        .button:hover { background: var(--accent-hover); }
        .button:active { transform: translateY(1px); }
        .button--secondary { border-color: var(--line-strong); background: var(--surface); color: var(--ink); }
        .button--secondary:hover { background: var(--surface-muted); }
        .button--quiet { background: transparent; color: var(--ink-muted); }
        .button--quiet:hover { background: var(--surface-muted); color: var(--ink); }
        .button:disabled { background: var(--surface-muted); color: var(--ink-subtle); cursor: not-allowed; transform: none; }
        .field { display: grid; gap: 7px; margin-top: 15px; }
        .field:first-of-type { margin-top: 0; }
        .field label { font-size: 13px; font-weight: 650; }
        .field input, .field select, .field textarea { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); }
        .field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink-subtle); }
        .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); outline: 3px solid rgba(23, 107, 69, .14); }
        .field small { color: var(--ink-muted); }
        .field--error input { border-color: var(--error); }
        .field--error small { color: var(--error); }
        .badge { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 3px 9px; border-radius: 6px; background: var(--surface-muted); color: var(--ink-muted); font-size: 12px; font-weight: 650; }
        .badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
        .badge--success { background: var(--accent-soft); color: var(--success); }
        .badge--warning { background: var(--warning-soft); color: var(--warning); }
        .badge--error { background: var(--error-soft); color: var(--error); }
        .badge--info { background: var(--info-soft); color: var(--info); }
        .metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
        .metric { padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
        .metric span { color: var(--ink-muted); font-size: 12px; }
        .metric strong { display: block; margin-top: 12px; font-family: var(--mono); font-size: 28px; letter-spacing: -.04em; }
        .metric small { display: block; margin-top: 5px; color: var(--success); }
        .table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
        table { width: 100%; min-width: 720px; border-collapse: collapse; }
        th, td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--line); }
        th { background: var(--surface-muted); color: var(--ink-muted); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
        td { font-size: 13px; }
        tbody tr:last-child td { border-bottom: 0; }
        tbody tr:hover { background: #f8f9f6; }
        .task-id, .amount { font-family: var(--mono); font-variant-numeric: tabular-nums; }
        .amount { text-align: right; }
        .state-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
        .state { min-height: 190px; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
        .state__icon { width: 36px; height: 36px; margin-bottom: 18px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-muted); font-family: var(--mono); font-weight: 700; }
        .state h3 { margin: 0 0 7px; font-size: 16px; }
        .state p { margin: 0; color: var(--ink-muted); font-size: 13px; }
        .state--error { border-color: #ebc4c0; }
        .state--error .state__icon { background: var(--error-soft); color: var(--error); }
        .skeleton { width: 100%; display: grid; gap: 9px; }
        .skeleton i { display: block; height: 10px; border-radius: 3px; background: linear-gradient(90deg, var(--surface-muted), #e3e7e1, var(--surface-muted)); background-size: 220% 100%; animation: pulse 1.6s ease-in-out infinite; }
        .skeleton i:nth-child(2) { width: 72%; }
        .skeleton i:nth-child(3) { width: 48%; }
        @keyframes pulse { to { background-position: -120% 0; } }
        @media (max-width: 980px) {
            .app { grid-template-columns: 76px minmax(0, 1fr); }
            .sidebar { padding-inline: 10px; }
            .brand { justify-content: center; padding-inline: 0; }
            .brand__name, .nav span, .nav-label, .sidebar__foot { display: none; }
            .nav a { justify-content: center; padding-inline: 0; }
            .intro { grid-template-columns: 1fr; }
            .intro__meta { max-width: 440px; }
            .palette { grid-template-columns: repeat(3, 1fr); }
        }
        @media (max-width: 700px) {
            .app { display: block; }
            .sidebar { position: static; width: auto; height: auto; padding: 12px 16px; flex-direction: row; align-items: center; border-right: 0; border-bottom: 1px solid var(--line); }
            .brand { padding: 0; margin-right: auto; }
            .brand__name { display: inline; }
            .nav { display: none; }
            .topbar { height: 58px; padding-inline: 16px; }
            .breadcrumb span:first-child, .breadcrumb i { display: none; }
            .content { padding: 34px 16px 64px; }
            .intro { gap: 26px; padding-bottom: 42px; }
            .section { padding-top: 42px; }
            .section__head { grid-template-columns: 1fr; gap: 8px; }
            .palette, .type-grid, .components-grid, .metric-grid, .state-grid { grid-template-columns: 1fr; }
            .panel--wide { grid-column: auto; }
            .swatch { min-height: 110px; }
            .topbar__actions .icon-button { display: none; }
        }
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
        }
}



@scope (body.tasks-page) {
.project-stats{display:flex;align-items:center;gap:14px;margin:0 0 14px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#fff}.project-stats__head{display:flex;align-items:center;gap:12px;flex:0 0 auto}.project-stats__head span{color:var(--muted);font-size:12px}.project-stats__items{display:flex;gap:7px;min-width:0;overflow-x:auto;padding:2px}.project-stat{display:inline-flex;align-items:center;gap:7px;max-width:260px;padding:5px 8px;border-radius:7px;background:#edf2ee;color:var(--muted);font-size:12px;white-space:nowrap}.project-stat>span{overflow:hidden;text-overflow:ellipsis}.project-stat b{color:var(--ink)}
.card-actions{margin-left:auto;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:5px}.task-action-form{margin:0}.task-action{min-height:32px;padding:5px 8px;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--a);font:600 11px Segoe UI,sans-serif;cursor:pointer}.task-action:hover,.task-action:focus-visible{border-color:var(--a);background:#edf5f0}.task-action--archive{color:#8d2f20}.task-action:disabled{opacity:.55;cursor:wait}.card.is-busy{opacity:.72}.card-action-status{display:block;margin-top:7px;color:var(--a);font-size:11px}.card-action-status.is-error{color:#9b2f21}.drawer-lane{margin:0;padding:8px 10px;border-radius:7px;background:#edf2ee;color:var(--muted)}
.tasks-page{overflow-x:hidden}.board{grid-template-columns:repeat(var(--lane-count,6),minmax(220px,1fr));overflow-x:auto;overflow-y:hidden;max-width:100%;padding-bottom:6px}.lane{min-width:220px}.card--archived{background:#f7f8f6;color:var(--muted);cursor:default}.card-archive-label{display:inline-flex;margin-top:7px;border-radius:4px;background:#e5e8e4;color:#59625c;padding:2px 6px;font-size:11px;font-weight:700}.lane--archive .cards{opacity:.94}
@media(max-width:700px){.project-stats{display:block}.project-stats__head{justify-content:space-between;margin-bottom:7px}.project-stat{max-width:210px}.card-footer{align-items:flex-start;flex-wrap:wrap}.card-actions{width:100%;margin-left:0;justify-content:flex-start}.task-action{min-height:44px;padding:8px 10px}.tabs{max-width:100%;overflow-x:auto;scrollbar-width:thin}.board{display:block;overflow:visible}.lane{min-width:0}}
}

.tasks-toast{margin:12px 0;padding:10px 12px;border-radius:8px}.project-stat{cursor:pointer;text-decoration:none}.project-stat.is-active,.project-stat[aria-current=true]{outline:2px solid var(--a);outline-offset:1px}.drawer button:not(:disabled){cursor:pointer}.drawer button:disabled{cursor:wait}.drawer [aria-disabled=true]{cursor:not-allowed}
/* Shopping lists */
.shopping-main{width:min(900px,calc(100% - 48px));margin:0 auto;padding:34px 0 64px}.shopping-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:24px}.shopping-hero h1{margin:4px 0 8px;font-size:clamp(30px,5vw,48px)}.shopping-hero p{margin:0;color:#64748b}.shopping-tabs{display:flex;padding:4px;border:1px solid #e2e8f0;border-radius:14px;background:#fff}.shopping-tabs a,.shopping-tabs button{min-height:44px;padding:10px 16px;border:0;border-radius:10px;background:transparent;color:#475569;text-decoration:none;font:inherit;font-weight:700;cursor:pointer}.shopping-tabs a[aria-current=page]{background:#111827;color:#fff}.shopping-add,.shopping-list,.shopping-clear{padding:22px;border:1px solid #e2e8f0;border-radius:20px;background:#fff;box-shadow:0 8px 30px rgba(15,23,42,.05)}.shopping-add label{display:block;margin-bottom:10px;font-weight:800}.shopping-add>div{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px}.shopping-add input,.shopping-clear input{min-width:0;padding:13px 14px;border:1px solid #cbd5e1;border-radius:12px;font:inherit}.shopping-add button,.shopping-clear button{padding:12px 16px;border:0;border-radius:12px;background:#111827;color:#fff;font:inherit;font-weight:800;cursor:pointer}.shopping-add__separator{background:#e2e8f0!important;color:#1e293b!important}.shopping-list{margin-top:18px}.shopping-list__head{display:flex;align-items:center;justify-content:space-between}.shopping-list__head h2{margin:0}.shopping-list__head span{display:grid;place-items:center;min-width:30px;height:30px;border-radius:999px;background:#f1f5f9}.shopping-list ul{list-style:none;margin:18px 0 0;padding:0}.shopping-item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:13px 0;border-top:1px solid #edf2f7}.shopping-check{display:grid;place-items:center;width:44px;height:44px;border:2px solid #94a3b8;border-radius:10px;background:#fff;cursor:pointer}.shopping-item--done .shopping-check{border-color:#16a34a;background:#16a34a;color:#fff}.shopping-item--done .shopping-item__title{text-decoration:line-through;color:#94a3b8}.shopping-delete{min-width:44px;min-height:44px;padding:8px;border:0;background:transparent;color:#b91c1c;cursor:pointer}.shopping-item--separator{grid-template-columns:minmax(0,1fr) auto;margin-top:12px;padding-top:20px}.shopping-item--separator .shopping-item__title{font-size:18px;font-weight:900;color:#334155}.shopping-empty{padding:28px 0 10px;text-align:center;color:#64748b}.shopping-clear{margin-top:18px;border-color:#fecaca;background:#fffafa}.shopping-clear h2{margin-top:0}.shopping-clear form{display:flex;gap:10px}.shopping-clear button{background:#b91c1c}.shopping-clear button:disabled{opacity:.45;cursor:not-allowed}.shopping-flash{margin-bottom:16px;padding:12px 16px;border-radius:12px;background:#dcfce7;color:#166534}.shopping-flash--error{background:#fee2e2;color:#991b1b}
@media(max-width:700px){.shopping-main{width:min(100% - 24px,900px);padding-top:20px}.shopping-hero{align-items:stretch;flex-direction:column}.shopping-tabs a{flex:1;text-align:center}.shopping-add,.shopping-list,.shopping-clear{padding:16px;border-radius:16px}.shopping-add>div{grid-template-columns:1fr}.shopping-add button{min-height:46px}.shopping-clear form{flex-direction:column}.shopping-item{gap:9px}.shopping-delete{font-size:0}.shopping-delete:after{content:'×';font-size:26px}}

/* Habit tracker */
.habit-main{width:min(1050px,calc(100% - 48px));margin:0 auto;padding:34px 0 64px}.habit-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:24px}.habit-kicker{color:#15803d;font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}.habit-hero h1{margin:5px 0 8px;font-size:clamp(32px,5vw,48px)}.habit-hero p,.habit-board__head p{margin:0;color:#64748b}.habit-period{display:flex;align-items:center;padding:4px;border:1px solid #e2e8f0;border-radius:14px;background:#fff}.habit-period a{display:grid;place-items:center;min-width:44px;min-height:44px;padding:0 12px;border-radius:10px;color:#334155;text-decoration:none;font-weight:800}.habit-period a:hover{background:#f1f5f9}.habit-create,.habit-board{padding:22px;border:1px solid #e2e8f0;border-radius:20px;background:#fff;box-shadow:0 8px 30px rgba(15,23,42,.05)}.habit-create h2,.habit-board h2{margin:0 0 16px}.habit-create__form{display:grid;grid-template-columns:minmax(180px,1fr) 170px auto auto;align-items:end;gap:12px}.habit-create input[type=text],.habit-create select{min-height:46px;padding:11px 13px;border:1px solid #cbd5e1;border-radius:12px;background:#fff;font:inherit}.habit-create fieldset{display:flex;gap:5px;margin:0;padding:0;border:0}.habit-create legend{margin-bottom:6px;color:#64748b;font-size:12px}.habit-create fieldset label input{position:absolute;opacity:0}.habit-create fieldset span{display:grid;place-items:center;width:38px;height:38px;border:1px solid #cbd5e1;border-radius:10px;cursor:pointer}.habit-create fieldset input:checked+span{border-color:#15803d;background:#dcfce7;color:#166534;font-weight:800}.habit-primary,.habit-secondary,.habit-danger{min-height:44px;padding:10px 15px;border:0;border-radius:11px;font:inherit;font-weight:800;cursor:pointer}.habit-primary{background:#166534;color:#fff}.habit-secondary{background:#f1f5f9;color:#334155}.habit-danger{background:transparent;color:#b91c1c}.habit-board{margin-top:18px}.habit-board__head{margin-bottom:16px}.habit-card{margin-top:12px;padding:18px;border:1px solid #e2e8f0;border-radius:16px}.habit-card--paused{background:#f8fafc;opacity:.72}.habit-card header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.habit-card h3{margin:0 0 3px;font-size:18px}.habit-card header span{color:#64748b;font-size:12px}.habit-stats{display:grid;grid-template-columns:auto auto;gap:2px 6px;text-align:right}.habit-stats b{font-variant-numeric:tabular-nums}.habit-days{display:grid;grid-template-columns:repeat(7,minmax(72px,1fr));gap:8px;margin-top:16px}.habit-day{display:grid;justify-items:center;gap:8px;padding:9px 4px;border-radius:12px;background:#f8fafc}.habit-day--today{outline:2px solid #86efac}.habit-day>span:first-child{font-weight:800;text-align:center}.habit-day small{display:block;margin-top:2px;color:#64748b;font-weight:500}.habit-check{display:grid;place-items:center;width:44px;height:44px;border:2px solid #94a3b8;border-radius:12px;background:#fff;color:#fff;font-size:20px;font-weight:900;cursor:pointer}.habit-check.is-done{border-color:#16a34a;background:#16a34a}.habit-check:disabled{cursor:not-allowed;opacity:.55}.habit-day__off{display:grid;place-items:center;width:44px;height:44px;color:#94a3b8}.habit-card footer{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}.habit-flash{margin-bottom:16px;padding:12px 16px;border-radius:12px;background:#dcfce7;color:#166534}.habit-flash--error{background:#fee2e2;color:#991b1b}.habit-empty{padding:35px;text-align:center;color:#64748b}
@media(max-width:850px){.habit-create__form{grid-template-columns:1fr 1fr}.habit-create fieldset{grid-column:1/-1}.habit-days{overflow-x:auto;grid-template-columns:repeat(7,72px)}}
@media(max-width:700px){.habit-main{width:min(100% - 24px,1050px);padding-top:20px}.habit-hero{align-items:stretch;flex-direction:column}.habit-period{align-self:flex-start}.habit-create,.habit-board{padding:15px;border-radius:16px}.habit-create__form{grid-template-columns:1fr}.habit-create fieldset{grid-column:auto;overflow-x:auto}.habit-create .habit-primary{width:100%}.habit-card header{display:block}.habit-stats{grid-template-columns:auto auto auto auto;justify-content:start;margin-top:10px}.habit-card footer{justify-content:flex-start;flex-wrap:wrap}}

/* Users */
.users-main{width:min(1080px,100%);margin:0 auto}.users-head{margin-bottom:22px}.users-head h1{margin:5px 0 8px;font-size:clamp(32px,5vw,48px)}.users-head p:last-child{margin:0;color:#64748b}.users-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr);gap:18px;align-items:start}.users-list,.user-form{padding:22px;border:1px solid #e2e8f0;border-radius:20px;background:#fff;box-shadow:0 8px 30px rgba(15,23,42,.05)}.users-list h2,.user-form h2{margin:0 0 16px}.user-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;border-top:1px solid #edf2f7}.user-row:first-of-type{border-top:0}.user-row strong,.user-row span{display:block}.user-row span{margin-top:4px;color:#64748b;font-size:13px}.user-actions{display:flex;align-items:center;gap:8px}.user-actions form{margin:0}.user-actions a,.user-actions button{padding:8px 10px;border:0;border-radius:9px;background:#f1f5f9;color:#334155;text-decoration:none;font:inherit;font-size:13px;font-weight:700;cursor:pointer}.user-actions button{color:#b91c1c}.user-form form{display:grid;gap:13px}.user-form label,.user-form legend{font-weight:700}.user-form input,.user-form select{display:block;width:100%;margin-top:6px;padding:11px 12px;border:1px solid #cbd5e1;border-radius:10px;background:#fff;font:inherit}.user-form small{display:block;margin-top:5px;color:#64748b;font-weight:400}.user-form fieldset{display:grid;gap:8px;margin:0;padding:12px;border:1px solid #e2e8f0;border-radius:12px}.user-project{display:flex;align-items:center;gap:8px;font-weight:500!important}.user-project input{width:auto;margin:0}.user-project:has(input:disabled){color:#64748b}.user-project input:disabled{cursor:not-allowed;opacity:.65}.user-form>form>button{min-height:44px;border:0;border-radius:11px;background:#111827;color:#fff;font:inherit;font-weight:800;cursor:pointer}
@media(max-width:800px){.users-grid{grid-template-columns:1fr}.user-row{align-items:flex-start;flex-direction:column}.user-actions{flex-wrap:wrap}}

/* Work payment controls stay within the planning filter layout. */
.planning-filters label:has([data-payment-filter]){display:flex;align-items:center;gap:8px;font-size:13px}.planning-filters [data-payment-filter]{min-width:0;width:100%;border:1px solid var(--line);border-radius:8px;padding:10px;background:var(--surface);font:inherit;color:var(--ink)}.planning-filters [data-unpaid-summary]{font-size:13px;align-self:center}@media(max-width:520px){.planning-filters label:has([data-payment-filter]){display:grid;gap:8px}}

/* Task feedback floats above the board and never occupies a row. */
.tasks-page .tasks-toast{position:fixed;z-index:1300;top:76px;right:24px;max-width:380px;margin:0;padding:14px 18px;background:var(--surface);border:1px solid var(--line);box-shadow:0 8px 28px rgb(18 40 29 / .12)}
.task-notification{position:fixed;z-index:1300;bottom:24px;right:24px;display:flex;align-items:center;gap:12px;width:max-content;max-width:min(420px,calc(100vw - 32px));padding:8px 8px 8px 16px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);box-shadow:0 8px 28px rgb(18 40 29 / .12);font-size:14px;line-height:1.5}
.task-notification__icon{display:grid;place-items:center;flex:0 0 26px;width:26px;height:26px;border-radius:50%;background:var(--accent-soft,#e5f2eb);color:var(--accent,#176b45);font-weight:700}.task-notification__text{min-width:0;overflow-wrap:anywhere}.task-notification__close{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;border:0;border-radius:8px;background:transparent;color:var(--ink-muted);font-size:24px;line-height:1;cursor:pointer}.task-notification__close:hover{background:var(--surface-muted);color:var(--ink)}.task-notification__close:active{background:var(--line)}.task-notification__close:focus-visible{outline:2px solid var(--accent,#176b45);outline-offset:1px}
@media(max-width:600px){.task-notification{bottom:16px;right:12px;max-width:calc(100vw - 24px)}.tasks-page .tasks-toast{top:74px;right:12px;max-width:calc(100vw - 24px)}}@media(prefers-reduced-motion:reduce){.task-notification{animation:none}}