:root {
    color-scheme: dark;
    --app-canvas: #090d12;
    --surface-1: #111720;
    --surface-2: #161d28;
    --hairline: #25303d;
    --page-gutter: 32px;
    --section-gap: 16px;
    --color-bg: var(--app-canvas);
    --color-sidebar: #0c1118;
    --color-surface: var(--surface-1);
    --color-surface-raised: var(--surface-2);
    --color-surface-hover: #1b2430;
    --color-border: var(--hairline);
    --color-border-strong: #334252;
    --color-text: #f3f6f8;
    --color-text-secondary: #9aa8b6;
    --color-text-muted: #6f7d8a;
    --color-primary: #20d6c7;
    --color-primary-hover: #32e3d5;
    --color-primary-soft: rgba(32, 214, 199, 0.11);
    --color-positive: #4bd69a;
    --color-positive-soft: rgba(75, 214, 154, 0.11);
    --color-negative: #ff7a75;
    --color-negative-soft: rgba(255, 122, 117, 0.11);
    --color-warning: #f2bd5b;
    --color-warning-soft: rgba(242, 189, 91, 0.12);
    --color-danger: #ff696b;
    --color-violet: #a78bfa;
    --color-violet-soft: rgba(167, 139, 250, 0.12);
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --shadow-popover: 0 18px 48px rgba(0, 0, 0, 0.38);
    --transition-fast: 150ms ease;
    --sidebar-width: 232px;
    --z-sidebar: 200;
    --z-overlay: 190;
    --z-popover: 150;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: var(--color-bg);
    color: var(--color-text);
}

* {
    box-sizing: border-box;
}

html {
    min-width: 320px;
    scrollbar-gutter: stable;
    background: var(--color-bg);
}

body {
    min-width: 320px;
    min-height: 100vh;
    margin: 0;
    overflow-x: hidden;
    background: var(--app-canvas);
    color: var(--color-text);
    font-size: 14px;
    line-height: 1.45;
}

button,
input,
select,
textarea {
    font: inherit;
}

button,
a,
input,
select,
textarea,
summary {
    transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast), opacity var(--transition-fast), transform var(--transition-fast);
}

a {
    color: var(--color-primary);
    text-underline-offset: 3px;
}

a:hover {
    color: var(--color-primary-hover);
}

button,
input,
select,
textarea {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
}

input,
select,
textarea {
    width: 100%;
    min-height: 38px;
    padding: 8px 11px;
    background: #0e141c;
}

input::placeholder,
textarea::placeholder {
    color: var(--color-text-muted);
}

select {
    padding-right: 32px;
}

textarea {
    min-height: 96px;
    resize: vertical;
}

input[type="checkbox"],
input[type="radio"] {
    width: 17px;
    min-width: 17px;
    height: 17px;
    min-height: 17px;
    margin: 0;
    padding: 0;
    accent-color: var(--color-primary);
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--color-primary);
    outline: 3px solid rgba(32, 214, 199, 0.14);
    outline-offset: 0;
}

button,
.btn,
.primary-link,
.secondary-link,
.secondary-button {
    display: inline-flex;
    width: auto;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    margin: 0;
    padding: 8px 13px;
    background: var(--color-primary);
    color: #041514;
    cursor: pointer;
    font-weight: 700;
    line-height: 1.15;
    text-decoration: none;
}

button:hover,
.btn-primary:hover,
.primary-link:hover {
    background: var(--color-primary-hover);
    color: #041514;
}

button:disabled {
    cursor: not-allowed;
    opacity: 0.48;
}

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

button:focus:not(:focus-visible),
summary:focus:not(:focus-visible) {
    outline: 0;
}

[hidden] {
    display: none !important;
}

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

.eyebrow,
.metric-label,
.status,
.header-user {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 11px;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

h1,
h2,
h3,
p {
    overflow-wrap: break-word;
}

h1 {
    margin: 0;
    font-size: clamp(22px, 2vw, 24px);
    line-height: 1.2;
    letter-spacing: -0.025em;
}

h2 {
    font-size: 17px;
    line-height: 1.3;
}

h3 {
    font-size: 14px;
}

label {
    color: var(--color-text-secondary);
    font-size: 12px;
    font-weight: 700;
}

.btn-primary,
.primary-link {
    background: var(--color-primary);
    color: #041514;
}

.btn-secondary,
.secondary-link,
.secondary-button {
    border-color: var(--color-border-strong);
    background: var(--color-surface-raised);
    color: var(--color-text);
}

.btn-secondary:hover,
.secondary-link:hover,
.secondary-button:hover {
    border-color: #46586a;
    background: var(--color-surface-hover);
    color: var(--color-text);
}

.btn-ghost {
    border-color: transparent;
    background: transparent;
    color: var(--color-text-secondary);
}

.btn-ghost:hover {
    background: var(--color-surface-hover);
    color: var(--color-text);
}

.btn-danger {
    border-color: rgba(255, 105, 107, 0.28);
    background: var(--color-negative-soft);
    color: var(--color-danger);
}

.icon-btn {
    display: inline-grid;
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
    place-items: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 0;
    background: var(--color-surface);
    color: var(--color-text-secondary);
}

.icon-btn:hover {
    border-color: var(--color-border-strong);
    background: var(--color-surface-hover);
    color: var(--color-text);
}

.icon-btn svg,
.mobile-nav-toggle svg,
.filter-toggle svg {
    width: 18px;
    height: 18px;
}

.icon-btn-compact {
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
}

.icon-btn-compact svg {
    width: 16px;
    height: 16px;
}

.icon-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 5px;
}

.icon-actions form {
    display: flex;
    margin: 0;
}

.text-link,
.quiet-link,
.inline-empty a {
    color: var(--color-primary);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

/* App shell */
.app-shell {
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    align-content: start;
    min-height: 100vh;
    background: var(--app-canvas);
}

.app-header {
    display: contents;
}

.app-workspace {
    grid-column: 2;
    width: 100%;
    min-width: 0;
    min-height: 100vh;
    padding: 0 var(--page-gutter) var(--page-gutter);
    background: var(--app-canvas);
}

.page-shell,
.page-content {
    width: 100%;
    min-width: 0;
    max-width: none;
    margin-inline: 0;
}

.page-content {
    display: flow-root;
}

.page-content > :first-child {
    margin-top: 0;
}

/* Legacy view compatibility: secondary routes consume the same workspace geometry. */
.app-shell > :not(.app-header):not(.app-workspace):not(.mobile-nav-toggle):not(.nav-scrim):not(.sidebar):not(script):not(.transaction-editor-dialog),
.app-header > div:first-child:not(.nav-stack) {
    grid-column: 2;
    width: auto;
    min-width: 0;
    margin-right: var(--page-gutter);
    margin-left: var(--page-gutter);
}

.page-header,
.app-header > div:first-child:not(.nav-stack) {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-5);
    padding-top: var(--space-6);
    padding-bottom: var(--space-6);
}

.app-header > div:first-child:not(.page-header):not(.nav-stack) {
    display: block;
}

.page-heading {
    min-width: 0;
}

.page-heading .eyebrow {
    margin-bottom: 5px;
    color: var(--color-primary);
}

.page-description,
.section-heading p,
.form-heading p {
    margin: 5px 0 0;
    color: var(--color-text-secondary);
    font-size: 13px;
}

.page-actions,
.heading-actions,
.form-actions,
.pagination,
.month-selector {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.mobile-nav-toggle,
.nav-scrim,
.sidebar-close {
    display: none;
}

/* Sidebar */
.sidebar {
    position: fixed;
    z-index: var(--z-sidebar);
    inset: 0 auto 0 0;
    display: flex;
    width: var(--sidebar-width);
    flex-direction: column;
    border-right: 1px solid rgba(58, 74, 91, 0.55);
    padding: 18px 14px 14px;
    overflow-y: auto;
    background: linear-gradient(180deg, #0d131b 0%, var(--color-sidebar) 100%);
}

.sidebar-brand {
    display: flex;
    min-height: 46px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    padding: 0 5px;
}

.brand-link {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
    color: var(--color-text);
    text-decoration: none;
}

.brand-link:hover {
    color: var(--color-text);
}

.brand-mark {
    display: grid;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid rgba(32, 214, 199, 0.34);
    border-radius: 10px;
    background: linear-gradient(145deg, rgba(32, 214, 199, 0.18), rgba(32, 214, 199, 0.04));
    color: var(--color-primary);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: -0.02em;
}

.brand-copy {
    display: grid;
    line-height: 1.05;
}

.brand-copy strong {
    color: var(--color-text);
    font-size: 14px;
    letter-spacing: -0.01em;
}

.brand-copy small {
    margin-top: 3px;
    color: var(--color-text-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.sidebar-item {
    position: relative;
    display: flex;
    min-height: 39px;
    align-items: center;
    gap: 11px;
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    color: var(--color-text-secondary);
    font-size: 13px;
    font-weight: 650;
    text-decoration: none;
}

.sidebar-item:hover {
    background: rgba(255, 255, 255, 0.035);
    color: var(--color-text);
}

.sidebar-item[aria-current="page"] {
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.sidebar-item[aria-current="page"]::before {
    position: absolute;
    left: -4px;
    width: 2px;
    height: 20px;
    border-radius: 2px;
    background: var(--color-primary);
    content: "";
}

.nav-icon {
    order: -1;
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

.sidebar-divider {
    height: 1px;
    margin: 10px 7px;
    background: var(--color-border);
}

.sidebar-subnav {
    display: grid;
    gap: 2px;
    margin: 5px 0 0 29px;
    border-left: 1px solid var(--color-border);
    padding: 4px 0 4px 12px;
}

.sidebar-subnav a {
    border-radius: 6px;
    padding: 5px 8px;
    color: var(--color-text-muted);
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
}

.sidebar-subnav a:hover,
.sidebar-subnav a[aria-current="page"] {
    background: rgba(255, 255, 255, 0.035);
    color: var(--color-text);
}

.sidebar-user {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 34px;
    align-items: center;
    gap: 9px;
    margin-top: auto;
    border-top: 1px solid var(--color-border);
    padding: 14px 3px 1px;
}

.user-avatar,
.account-icon {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid var(--color-border-strong);
    border-radius: 50%;
    background: var(--color-surface-raised);
    color: var(--color-primary);
    font-size: 12px;
    font-weight: 800;
}

.user-copy {
    display: grid;
    min-width: 0;
}

.user-copy strong,
.user-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-copy strong {
    font-size: 12px;
}

.user-copy small {
    color: var(--color-text-muted);
    font-size: 10px;
}

.sidebar-user form {
    margin: 0;
}

.sidebar-user input {
    display: none;
}

.logout-button {
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
    border-color: transparent;
    background: transparent;
}

/* Shared panels, alerts and forms */
.panel,
.metric-card,
.dashboard-section,
.filter-panel,
.report-section,
.empty-state,
.form-panel,
.account-card,
.goal-card,
.settings-card,
.quick-actions,
.auth-card,
.panel-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.panel,
.dashboard-section,
.filter-panel,
.report-section,
.form-panel,
.account-card,
.goal-card {
    padding: 18px;
}

.panel-heading,
.section-heading,
.form-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.panel-heading {
    margin-bottom: 17px;
}

.panel-heading h2,
.section-heading h2,
.form-heading h2,
.empty-state h2,
.dashboard-section h2,
.account-card h2,
.goal-card h2 {
    margin: 0;
}

.alert,
.flash-message,
.form-error,
.import-warning {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 0;
    margin-bottom: 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    background: var(--color-surface);
    color: var(--color-text-secondary);
    font-size: 13px;
}

.alert p,
.flash-message p,
.form-error p,
.import-warning p {
    margin: 0;
}

.form-error p + p {
    margin-top: 4px;
}

.alert-icon {
    display: grid;
    width: 19px;
    height: 19px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-size: 11px;
    font-weight: 850;
}

.alert-success,
.flash-message {
    border-color: rgba(75, 214, 154, 0.22);
    background: rgba(75, 214, 154, 0.07);
    color: #b9efd5;
}

.alert-danger,
.form-error {
    border-color: rgba(255, 105, 107, 0.25);
    background: rgba(255, 105, 107, 0.08);
    color: #ffaaa8;
}

.alert-info {
    border-color: rgba(32, 214, 199, 0.2);
    background: var(--color-primary-soft);
}

.import-warning,
.period-warning {
    border-color: rgba(242, 189, 91, 0.25);
    background: var(--color-warning-soft);
    color: #f3cf89;
}

.form-panel {
    width: min(100%, 680px);
}

.account-form,
.login-form {
    display: grid;
    gap: 9px;
}

.form-field {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.form-actions {
    margin-top: 10px;
}

.field-help {
    margin: -2px 0 3px;
    color: var(--color-text-muted);
    font-size: 12px;
}

.checkbox-row {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 8px;
}

.checkbox-fieldset {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    margin: 6px 0 0;
    padding: 12px;
}

.checkbox-fieldset legend {
    padding: 0 5px;
    color: var(--color-text-secondary);
    font-size: 12px;
    font-weight: 700;
}

.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px 12px;
}

.inline-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px;
}

.inline-form label {
    width: 100%;
}

.inline-form select {
    flex: 1 1 260px;
}

.compact-button {
    min-width: auto;
    min-height: 34px;
    padding: 6px 9px;
    font-size: 12px;
}

.compact-link {
    min-height: 34px;
}

/* Dashboard */
.financial-hero {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 0.8fr) minmax(300px, 1.2fr);
    gap: 12px;
    margin-bottom: 12px;
}

.metric-card {
    min-width: 0;
    padding: 16px;
}

.metric-card-featured {
    position: relative;
    overflow: hidden;
    background: linear-gradient(145deg, var(--color-surface-raised), var(--color-surface));
}

.metric-card-featured::after {
    position: absolute;
    top: -45px;
    right: -45px;
    width: 110px;
    height: 110px;
    border: 1px solid rgba(32, 214, 199, 0.1);
    border-radius: 50%;
    content: "";
}

.metric-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.metric-label-row p,
.kpi-card p {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 11px;
    font-weight: 750;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-primary);
}

.status-dot-positive {
    background: var(--color-positive);
}

.metric-value {
    display: block;
    margin-top: 16px;
    overflow: hidden;
    font-size: clamp(25px, 2.4vw, 34px);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.045em;
    line-height: 1.05;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.metric-context,
.metric-trend {
    display: block;
    margin-top: 9px;
    color: var(--color-text-muted);
    font-size: 11px;
}

.period-panel {
    display: grid;
    align-content: start;
    gap: 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 15px;
    background: var(--color-surface);
}

.period-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.period-heading strong {
    display: block;
    margin-top: 4px;
    font-size: 14px;
}

.period-range,
.period-chip,
.result-range {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 5px 8px;
    background: rgba(255, 255, 255, 0.025);
    color: var(--color-text-secondary);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.period-controls {
    display: grid;
    grid-template-columns: minmax(120px, 0.8fr) minmax(150px, 1.2fr) auto;
    align-items: end;
    gap: 7px;
}

.period-controls > label {
    grid-column: 1;
}

.period-controls > select {
    grid-column: 1;
}

.salary-field {
    display: grid;
    grid-column: 2;
    grid-row: 1 / span 2;
    gap: 5px;
}

.js .salary-field.is-hidden {
    display: none;
}

.period-controls .btn {
    grid-column: 3;
    grid-row: 2;
}

.period-warning {
    margin: 0;
    border-radius: 6px;
    padding: 7px 9px;
    font-size: 11px;
}

.dashboard-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}

.kpi-card strong {
    display: block;
    margin-top: 11px;
    overflow: hidden;
    font-size: clamp(20px, 2vw, 26px);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.035em;
    line-height: 1.05;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.amount-positive {
    color: var(--color-positive) !important;
}

.amount-negative {
    color: var(--color-negative) !important;
}

.amount-transfer {
    color: var(--color-violet) !important;
}

.amount-neutral {
    color: var(--color-text) !important;
}

.dashboard-note {
    margin-bottom: 12px;
}

.quick-actions {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 12px;
    border-radius: var(--radius-sm);
    padding: 9px 12px;
    background: rgba(17, 23, 32, 0.72);
}

.quick-actions > span {
    color: var(--color-text-muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.quick-action-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.quick-action-list a {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    gap: 7px;
    border: 1px solid transparent;
    border-radius: 7px;
    padding: 6px 9px;
    background: rgba(255, 255, 255, 0.018);
    color: var(--color-text-secondary);
    font-size: 12px;
    font-weight: 650;
    text-decoration: none;
}

.quick-action-list a:hover {
    border-color: var(--color-border);
    background: var(--color-surface-hover);
    color: var(--color-primary);
}

.quick-action-list svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(330px, 0.85fr);
    gap: 12px;
}

.dashboard-primary-grid {
    align-items: start;
    margin-bottom: 12px;
}

.flow-chart {
    display: grid;
    gap: 14px;
    margin-top: 14px;
}

.flow-row {
    display: grid;
    gap: 8px;
}

.flow-label,
.flow-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.flow-label span,
.flow-summary span {
    color: var(--color-text-secondary);
    font-size: 12px;
}

.flow-label strong,
.flow-summary strong {
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.flow-bar {
    width: 100%;
    height: 9px;
    overflow: hidden;
    border: 0;
    border-radius: 999px;
    background: var(--color-surface-hover);
    color: var(--color-positive);
    appearance: none;
}

.flow-bar::-webkit-progress-bar {
    border-radius: 999px;
    background: var(--color-surface-hover);
}

.flow-bar::-webkit-progress-value {
    border-radius: 999px;
    background: var(--color-positive);
}

.flow-bar::-moz-progress-bar {
    border-radius: 999px;
    background: var(--color-positive);
}

.flow-expense::-webkit-progress-value {
    background: var(--color-negative);
}

.flow-expense::-moz-progress-bar {
    background: var(--color-negative);
}

.flow-summary {
    margin-top: 15px;
    border-top: 1px solid var(--color-border);
    border-radius: 0 0 7px 7px;
    padding: 11px 2px 1px;
}

.flow-summary strong {
    font-size: 15px;
}

.dashboard-account-list,
.recent-list {
    display: grid;
}

.dashboard-account {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    border-top: 1px solid rgba(37, 48, 61, 0.8);
    padding: 7px 0;
}

.dashboard-account:first-child,
.recent-item:first-child {
    border-top: 0;
    padding-top: 0;
}

.dashboard-account:last-child,
.recent-item:last-child {
    padding-bottom: 0;
}

.dashboard-account.is-inactive {
    opacity: 0.58;
}

.account-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    color: var(--color-text-secondary);
    font-size: 10px;
}

.account-copy,
.recent-copy {
    min-width: 0;
}

.account-copy h3,
.recent-copy h3 {
    margin: 0;
    overflow: hidden;
    color: var(--color-text);
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-copy p,
.recent-copy p {
    margin: 2px 0 0;
    color: var(--color-text-muted);
    font-size: 11px;
}

.dashboard-account-balance,
.recent-item > strong {
    margin: 0;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.dashboard-account.has-zero-balance .account-icon,
.dashboard-account.has-zero-balance .dashboard-account-balance {
    color: var(--color-text-muted) !important;
    opacity: 0.72;
}

.recent-panel {
    margin-bottom: 0;
}

.recent-item {
    display: grid;
    grid-template-columns: 58px 8px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    border-top: 1px solid rgba(37, 48, 61, 0.8);
    padding: 10px 0;
}

.recent-item time {
    color: var(--color-text-muted);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.transaction-type-mark {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-text-muted);
}

.transaction-type-mark.is-income {
    background: var(--color-positive);
}

.transaction-type-mark.is-expense {
    background: var(--color-negative);
}

.first-run-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 24px;
}

.empty-state-copy {
    display: flex;
    align-items: center;
    gap: 15px;
}

.empty-state-icon {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid rgba(32, 214, 199, 0.24);
    border-radius: 12px;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-size: 11px;
    font-weight: 800;
}

.first-run-banner h2 {
    margin: 4px 0 0;
}

.first-run-banner p {
    margin: 5px 0 0;
    color: var(--color-text-secondary);
}

/* Movements */
.movement-controls {
    position: relative;
    margin-bottom: 19px;
}

.movement-filter-form {
    position: relative;
}

.movement-toolbar {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) auto auto auto;
    gap: 8px;
}

.search-control {
    position: relative;
    display: block;
}

.search-control svg {
    position: absolute;
    top: 50%;
    left: 12px;
    width: 17px;
    height: 17px;
    color: var(--color-text-muted);
    pointer-events: none;
    transform: translateY(-50%);
}

.search-control input {
    height: 40px;
    padding-left: 39px;
    background: var(--color-surface);
}

.search-submit,
.filter-toggle,
.toolbar-more > summary {
    min-height: 40px;
}

.filter-toggle svg {
    width: 16px;
}

.toolbar-more {
    position: relative;
}

.toolbar-more > summary,
.row-menu > summary {
    list-style: none;
}

.toolbar-more > summary::-webkit-details-marker,
.row-menu > summary::-webkit-details-marker {
    display: none;
}

.toolbar-more-menu,
.row-menu-popover {
    position: absolute;
    z-index: var(--z-popover);
    top: calc(100% + 7px);
    right: 0;
    display: grid;
    min-width: 190px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    padding: 6px;
    background: #121a24;
    box-shadow: var(--shadow-popover);
}

.toolbar-more-menu a,
.row-menu-popover a,
.row-menu-popover button {
    display: flex;
    width: 100%;
    min-height: 34px;
    align-items: center;
    justify-content: flex-start;
    border: 0;
    border-radius: 6px;
    padding: 7px 9px;
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 12px;
    font-weight: 650;
    text-decoration: none;
}

.toolbar-more-menu a:hover,
.row-menu-popover a:hover,
.row-menu-popover button:hover {
    background: var(--color-surface-hover);
    color: var(--color-text);
}

.row-menu-popover button.menu-danger {
    color: var(--color-danger);
}

.advanced-filter-panel {
    position: absolute;
    z-index: 120;
    top: calc(100% + 8px);
    right: 0;
    left: 0;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    padding: 16px;
    background: #111923;
    box-shadow: var(--shadow-popover);
}

.filter-account-list { min-width: 0; }
.filter-account-list legend { margin-bottom: 6px; color: var(--color-text-secondary); font-size: 12px; font-weight: 700; }
.filter-checkbox-list { display: grid; max-height: 128px; gap: 3px; overflow: auto; padding: 5px 7px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface-raised); }
.filter-checkbox-list .checkbox-row { min-width: 0; color: var(--color-text-secondary); font-size: 11px; }

.filter-account-field {
    position: relative;
    z-index: 2;
}

.account-multiselect {
    position: relative;
}

.account-multiselect-trigger {
    display: grid;
    width: 100%;
    min-height: 38px;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    background: var(--color-surface-raised);
    color: var(--color-text);
    font: inherit;
    font-size: 12px;
    text-align: left;
}

.account-multiselect-trigger:hover,
.account-multiselect-trigger:focus-visible,
.account-multiselect-trigger[aria-expanded="true"] {
    border-color: var(--color-border-strong);
    background: var(--color-surface-hover);
}

.account-multiselect-trigger > span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-multiselect-chevron {
    color: var(--color-text-muted);
    font-size: 13px;
}

.account-multiselect-menu {
    position: absolute;
    z-index: var(--z-popover);
    top: calc(100% + 6px);
    left: 0;
    display: grid;
    width: min(320px, calc(100vw - 40px));
    max-height: 268px;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    padding: 6px;
    background: #121a24;
    box-shadow: var(--shadow-popover);
}

.account-multiselect-option {
    display: grid;
    min-width: 0;
    min-height: 34px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    border-radius: 6px;
    padding: 6px 7px;
    color: var(--color-text-secondary);
    font-size: 12px;
    font-weight: 650;
}

.account-multiselect-option:hover {
    background: var(--color-surface-hover);
    color: var(--color-text);
}

.account-multiselect-option input {
    width: 14px;
    height: 14px;
    margin: 0;
}

.account-multiselect-option span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-multiselect-option small {
    color: var(--color-text-muted);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.06em;
}

.account-multiselect-all {
    margin-bottom: 3px;
    border-bottom: 1px solid var(--color-border);
    border-radius: 6px 6px 0 0;
}

.filter-panel-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 13px;
}

.filter-panel-heading h2 {
    margin: 3px 0 0;
    font-size: 15px;
}

.filter-panel-heading .icon-btn {
    width: 30px;
    min-width: 30px;
    height: 30px;
    min-height: 30px;
    font-size: 20px;
}

.filter-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 11px;
}

.filter-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 14px;
}

.active-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 9px;
}

.active-filter-label {
    margin-right: 2px;
    color: var(--color-text-muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.filter-chip,
.badge,
.status-pill {
    display: inline-flex;
    min-height: 22px;
    align-items: center;
    border-radius: 999px;
    padding: 3px 7px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
}

.filter-chip {
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-secondary);
}

.active-filters > a {
    margin-left: 3px;
    color: var(--color-primary);
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
}

.movement-heading {
    margin-top: 0;
    margin-bottom: 10px;
}

.movement-heading h2 {
    font-size: 15px;
}

.movement-heading p {
    margin-top: 2px;
    font-size: 11px;
}

.bulk-toolbar {
    position: sticky;
    z-index: 90;
    top: 10px;
    display: flex;
    min-height: 54px;
    align-items: center;
    gap: 12px;
    margin-bottom: 9px;
    border: 1px solid rgba(32, 214, 199, 0.26);
    border-radius: var(--radius-md);
    padding: 8px 11px;
    background: rgba(19, 32, 39, 0.97);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24);
}

.bulk-selection {
    display: flex;
    align-items: baseline;
    gap: 5px;
    color: var(--color-text-secondary);
    font-size: 12px;
}

.bulk-selection strong {
    color: var(--color-primary);
    font-size: 17px;
}

.bulk-hint {
    margin: 0 0 0 auto;
    color: var(--color-text-muted);
    font-size: 11px;
}

.category-picker {
    position: relative;
    display: none;
}

.js .category-picker {
    display: block;
}

.js .category-native-fallback {
    display: none;
}

.category-native-fallback {
    display: flex;
    align-items: center;
    gap: 6px;
}

.category-native-fallback select {
    min-width: 170px;
}

.category-trigger {
    display: grid;
    grid-template-columns: 8px minmax(0, 1fr) auto;
    width: 100%;
    min-height: 32px;
    align-items: center;
    gap: 7px;
    border: 1px solid transparent;
    border-radius: 7px;
    padding: 5px 7px;
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 11px;
    font-weight: 650;
    text-align: left;
}

.category-trigger:hover,
.category-trigger[aria-expanded="true"] {
    border-color: var(--color-border-strong);
    background: var(--color-surface-hover);
    color: var(--color-text);
}

.category-trigger > span:nth-child(2) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.category-trigger-mark {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-primary);
}

.category-trigger.is-empty {
    color: var(--color-warning);
}

.category-trigger.is-empty .category-trigger-mark {
    background: var(--color-warning);
}

.bulk-category-picker .category-trigger {
    display: inline-flex;
    width: auto;
    min-height: 36px;
    border-color: var(--color-border-strong);
    padding: 7px 11px;
    background: var(--color-surface-raised);
    color: var(--color-text);
}

.category-popover {
    position: absolute;
    z-index: var(--z-popover);
    top: calc(100% + 6px);
    left: 0;
    width: min(310px, calc(100vw - 36px));
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    padding: 8px;
    background: #121a24;
    box-shadow: var(--shadow-popover);
}

.category-popover.opens-above {
    top: auto;
    bottom: calc(100% + 6px);
}

.bulk-category-picker .category-popover {
    top: auto;
    bottom: calc(100% + 7px);
}

.category-search {
    display: block;
    margin-bottom: 6px;
}

.category-search input {
    min-height: 35px;
    background: #0c1219;
    font-size: 12px;
}

.category-options {
    display: grid;
    max-height: 260px;
    gap: 2px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.category-option {
    display: grid;
    width: 100%;
    min-height: 34px;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    justify-content: stretch;
    gap: 8px;
    border: 0;
    border-radius: 6px;
    padding: 7px 8px;
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 12px;
    font-weight: 600;
    text-align: left;
}

.category-option:hover,
.category-option:focus-visible,
.category-option.is-selected {
    background: var(--color-surface-hover);
    color: var(--color-text);
}

.category-option.is-selected {
    box-shadow: inset 2px 0 0 var(--color-primary);
    color: var(--color-primary);
    font-weight: 750;
}

.category-option small {
    color: var(--color-text-muted);
    font-size: 9px;
}

.category-empty {
    margin: 9px;
    color: var(--color-text-muted);
    font-size: 12px;
    text-align: center;
}

.table-panel {
    min-width: 0;
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.transaction-table-panel {
    overflow: visible;
}

.transaction-table th,
.transaction-table td {
    padding-top: 6px;
    padding-bottom: 6px;
}

.data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 12px;
}

.data-table th,
.data-table td {
    border-bottom: 1px solid rgba(37, 48, 61, 0.72);
    padding: 9px 10px;
    text-align: left;
    vertical-align: middle;
}

.data-table th {
    color: var(--color-text-muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.055em;
    text-transform: uppercase;
    white-space: nowrap;
}

.data-table tr:last-child td {
    border-bottom: 0;
}

.data-table tbody tr {
    background: var(--color-surface);
}

.data-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.018);
}

.transaction-row.is-editable {
    cursor: pointer;
    transition: background-color var(--transition-fast), box-shadow var(--transition-fast);
}

.transaction-row.is-editable:hover {
    background: rgba(255, 255, 255, 0.032);
}

.transaction-row.is-editable:focus-visible {
    outline: 0;
    box-shadow: inset 0 0 0 2px rgba(32, 214, 199, 0.46);
}

.transaction-row.needs-attention {
    box-shadow: inset 2px 0 var(--color-warning);
}

.transaction-table th:nth-child(1),
.transaction-table td:nth-child(1) {
    width: 38px;
    padding-right: 5px;
    padding-left: 12px;
}

.transaction-table th:nth-child(2),
.transaction-table td:nth-child(2) {
    width: 95px;
}

.transaction-table th:nth-child(3),
.transaction-table td:nth-child(3) {
    width: 180px;
}

.transaction-table th:nth-child(4),
.transaction-table td:nth-child(4) {
    width: 135px;
}

.transaction-table .description-column {
    width: 42%;
}

.transaction-table th:nth-child(6),
.transaction-table td:nth-child(6) {
    width: 120px;
}

.transaction-table th:nth-child(7),
.transaction-table td:nth-child(7) {
    width: 54px;
}

.date-cell time {
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.account-cell strong,
.account-cell span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-cell strong {
    max-width: 130px;
    color: var(--color-text-secondary);
    font-size: 11px;
    font-weight: 650;
}

.account-cell span,
.amount-currency {
    margin-top: 2px;
    color: var(--color-text-muted);
    font-size: 9px;
    font-weight: 750;
    letter-spacing: 0.06em;
}

.description-cell {
    min-width: 0;
    max-width: 0;
}

.description-cell > strong {
    display: block;
    overflow: hidden;
    color: var(--color-text);
    font-size: 12px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.transaction-description-line {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 6px;
}

.transaction-description-line > strong {
    min-width: 0;
    overflow: hidden;
    color: var(--color-text);
    font-size: 12px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.note-indicator {
    position: relative;
    display: inline-grid;
    width: 24px;
    min-width: 24px;
    height: 24px;
    min-height: 24px;
    flex: 0 0 auto;
    place-items: center;
    border: 0;
    border-radius: 6px;
    padding: 0;
    background: transparent;
    color: var(--color-text-muted);
}

.note-indicator:hover,
.note-indicator:focus-visible {
    background: var(--color-surface-hover);
    color: var(--color-primary);
}

.note-indicator svg {
    width: 15px;
    height: 15px;
}

.note-indicator::after {
    position: absolute;
    z-index: var(--z-popover);
    bottom: calc(100% + 7px);
    left: 50%;
    width: max-content;
    max-width: min(280px, calc(100vw - 40px));
    overflow: hidden;
    border: 1px solid var(--color-border-strong);
    border-radius: 7px;
    padding: 6px 8px;
    opacity: 0;
    background: #121a24;
    color: var(--color-text-secondary);
    box-shadow: var(--shadow-popover);
    content: attr(data-note-preview);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
    pointer-events: none;
    text-overflow: ellipsis;
    transform: translate(-50%, 3px);
    transition: opacity var(--transition-fast), transform var(--transition-fast);
    white-space: nowrap;
}

.note-indicator:hover::after,
.note-indicator:focus-visible::after {
    opacity: 1;
    transform: translate(-50%, 0);
}

.transaction-meta {
    display: flex;
    max-width: 100%;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px 5px;
    margin-top: 2px;
    color: var(--color-text-muted);
    font-size: 9px;
}

.transfer-counterparty {
    color: var(--color-violet);
}

.money-heading,
.money-cell {
    text-align: right !important;
}

.money-cell strong,
.money-cell span {
    display: block;
}

.money-cell strong {
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    font-weight: 750;
    white-space: nowrap;
}

.category-static {
    color: var(--color-text-secondary);
    font-size: 11px;
}

.badge-positive {
    background: var(--color-positive-soft);
    color: var(--color-positive);
}

.badge-muted {
    background: rgba(154, 168, 182, 0.09);
    color: var(--color-text-secondary);
}

.badge-warning,
.status-warning {
    background: var(--color-warning-soft);
    color: var(--color-warning);
}

.status-transfer {
    background: var(--color-violet-soft);
    color: var(--color-violet);
}

.compact-tag {
    min-height: 18px;
    padding: 2px 5px;
    font-size: 9px;
}

.actions-cell {
    text-align: right !important;
}

.row-menu {
    position: relative;
    display: inline-block;
}

.row-menu > summary {
    width: 31px;
    min-width: 31px;
    height: 31px;
    min-height: 31px;
    color: var(--color-text-muted);
    font-size: 10px;
    letter-spacing: 1px;
}

.row-menu-popover {
    top: calc(100% + 4px);
    min-width: 220px;
    text-align: left;
}

.row-menu-popover form {
    margin: 3px 0 0;
    border-top: 1px solid var(--color-border);
    padding-top: 3px;
}

.pagination {
    justify-content: center;
    margin-top: 15px;
}

.pagination span {
    color: var(--color-text-secondary);
    font-size: 12px;
}

.empty-state {
    padding: 25px;
}

.empty-state > .empty-state-icon {
    margin-bottom: 13px;
}

.empty-state h2 {
    font-size: 16px;
}

.empty-state > p {
    margin: 6px 0 16px;
    color: var(--color-text-secondary);
    font-size: 13px;
}

/* Existing modules inherit the visual system */
.auth-shell,
.panel-shell {
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: 24px 16px;
}

.auth-card,
.panel-card {
    width: min(100%, 420px);
    padding: 26px;
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.25);
}

.panel-card {
    width: min(100%, 540px);
}

.auth-card h1,
.panel-card h1 {
    margin-bottom: 8px;
}

.settings-tabs:not(.sidebar-subnav),
.planning-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 9px;
}

.planning-tabs {
    margin: -8px 0 20px;
}

.settings-tabs:not(.sidebar-subnav) a,
.planning-tabs a {
    border-radius: 6px;
    padding: 7px 9px;
    color: var(--color-text-secondary);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

.settings-tabs:not(.sidebar-subnav) a[aria-current="page"],
.planning-tabs a[aria-current="page"] {
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.account-list {
    display: grid;
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.account-table-panel {
    overflow-x: auto;
}

.account-table {
    min-width: 900px;
}

.account-table th,
.account-table td {
    padding-top: 7px;
    padding-bottom: 7px;
}

.account-table th:nth-child(1),
.account-table td:nth-child(1) {
    width: 240px;
}

.account-table th:nth-child(2),
.account-table td:nth-child(2) {
    width: 17%;
}

.account-table th:nth-child(3),
.account-table td:nth-child(3) {
    width: 15%;
}

.account-table th:nth-child(4),
.account-table td:nth-child(4) {
    width: 18%;
}

.account-table th:nth-child(5),
.account-table td:nth-child(5) {
    width: 20%;
}

.account-table th:nth-child(6),
.account-table td:nth-child(6) {
    width: 125px;
}

.account-table th:nth-child(7),
.account-table td:nth-child(7) {
    width: 82px;
}

.account-table-row {
    transition: background-color var(--transition-fast);
}

.account-table-row.is-clickable {
    cursor: pointer;
}

.account-table-row.is-clickable:hover {
    background: rgba(255, 255, 255, 0.032);
}

.account-table-row.is-clickable:focus-visible {
    outline: 0;
    box-shadow: inset 0 0 0 2px rgba(32, 214, 199, 0.46);
}

.tag-list-heading {
    align-items: center;
}

.tag-quick-create {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tag-quick-create input {
    width: min(240px, 42vw);
    min-height: 34px;
}

.tag-list-panel.is-empty {
    display: none;
}

.tag-list-table td {
    padding-top: 8px;
    padding-bottom: 8px;
}

.tag-list-table td:last-child,
.tag-list-table th:last-child {
    width: 1%;
    white-space: nowrap;
}

.tag-name {
    color: var(--accent);
}

.icon-actions {
    gap: 4px;
}

.danger-icon-btn:hover,
.danger-icon-btn:focus-visible {
    color: var(--danger);
    border-color: color-mix(in srgb, var(--danger) 55%, transparent);
}

.account-name-cell {
    min-width: 0;
}

.account-name-content {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 7px;
}

.account-name-cell a {
    display: block;
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    color: var(--color-text);
    font-size: 12px;
    font-weight: 750;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-name-cell a:focus-visible {
    color: var(--color-primary);
}

.account-name-cell a:hover {
    color: var(--color-primary);
}

.account-state-cell,
.account-sync-cell {
    color: var(--color-text-secondary);
    font-size: 11px;
    white-space: nowrap;
}

.account-sync-indicator {
    display: inline-flex;
    max-width: 100%;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-sync-indicator > span {
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--color-positive);
    box-shadow: 0 0 0 3px var(--color-positive-soft);
}

.muted-value {
    color: var(--color-text-muted);
}

.account-table-balance strong {
    font-size: 12px;
}

.account-table .account-actions form {
    margin: 0;
}

.account-card.is-inactive,
.goal-card.is-inactive,
.muted-row {
    background: #0e141b;
    color: var(--color-text-muted);
}

.account-main {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.account-main p,
.goal-card p {
    margin: 5px 0 0;
    color: var(--color-text-secondary);
}

.account-balance {
    flex: 0 0 auto;
    margin: 0;
    font-size: 19px;
    font-variant-numeric: tabular-nums;
    font-weight: 750;
    text-align: right;
}

.account-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 15px 0 0;
}

.account-meta dt,
.detail-list dt {
    color: var(--color-text-muted);
    font-size: 11px;
    font-weight: 700;
}

.account-meta dd {
    margin: 2px 0 0;
    font-weight: 700;
}

.badge-row,
.account-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 14px;
}

.account-table .account-actions {
    flex-wrap: nowrap;
    justify-content: flex-end;
    margin-top: 0;
}

.settings-grid,
.goal-grid,
.report-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.settings-card {
    display: grid;
    gap: 5px;
    padding: 16px;
    color: var(--color-text);
    text-decoration: none;
}

.settings-card:hover {
    border-color: var(--color-border-strong);
    background: var(--color-surface-raised);
    color: var(--color-text);
}

.settings-card span {
    color: var(--color-text-secondary);
    font-size: 12px;
}

.import-form-panel,
.import-detail,
.import-confirm-panel,
.review-detail {
    width: min(100%, 780px);
}

.import-confirm-panel,
.report-section {
    margin-top: var(--section-gap);
}

.import-summary,
.planning-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 9px;
    margin: 0 0 18px;
}

.import-summary article {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 13px;
    background: var(--color-surface);
}

.import-summary strong,
.import-summary span {
    display: block;
}

.import-summary span,
.planning-summary-grid .kpi-card span {
    margin-top: 4px;
    color: var(--color-text-muted);
    font-size: 11px;
}

.report-period-heading {
    align-items: flex-end;
}

.month-selector label {
    margin: 0;
}

.month-selector input,
.month-selector button {
    width: auto;
}

.report-summary-list,
.planning-list,
.onboarding-list {
    display: grid;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.report-summary-list li,
.planning-list li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px solid var(--color-border);
    padding-top: 9px;
}

.report-summary-list li:first-child,
.planning-list li:first-child {
    border-top: 0;
    padding-top: 0;
}

.progress-track {
    display: block;
    width: 120px;
    height: 7px;
    margin-top: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--color-surface-hover);
}

.progress-track > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--color-primary);
}

.large-progress {
    width: 100%;
    height: 10px;
    margin: 12px 0;
}

.inline-planning-form {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: end;
    gap: 9px;
}

.occurrence-actions {
    display: grid;
    min-width: 230px;
    gap: 7px;
}

.occurrence-actions form {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

.overdue-row {
    background: var(--color-warning-soft) !important;
}

.deleted-transaction-label {
    display: block;
    margin-top: 5px;
    color: var(--color-danger);
    font-size: 11px;
    font-weight: 700;
}

.tree-indent {
    color: var(--color-text-muted);
    font-weight: 700;
}

.review-secondary-heading {
    margin-top: 25px;
}

.detail-list {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 9px 13px;
    margin: 0;
}

.detail-list dd {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
}

.debug-detail {
    margin: 14px 0;
}

.debug-detail pre {
    overflow-x: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.onboarding-intro,
.onboarding-step {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 18px;
    background: var(--color-surface);
}

.onboarding-intro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 16px;
}

.onboarding-step {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 13px;
}

.onboarding-marker {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 50%;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-weight: 800;
}

.inline-empty {
    color: var(--color-text-secondary);
}

.inline-empty p {
    margin: 0 0 5px;
}

/* UI Pack 2: shared operational surfaces */
.module-heading {
    align-items: flex-end;
    margin: 8px 0 12px;
}

.module-heading .eyebrow {
    margin-bottom: 3px;
    color: var(--color-text-muted);
}

.summary-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 14px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.summary-strip article {
    display: flex;
    min-width: 0;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    border-left: 1px solid var(--color-border);
    padding: 13px 15px;
}

.summary-strip article:first-child {
    border-left: 0;
}

.summary-strip span {
    color: var(--color-text-secondary);
    font-size: 11px;
    font-weight: 700;
}

.summary-strip strong {
    font-size: 20px;
    font-variant-numeric: tabular-nums;
}

.text-positive,
.money-positive {
    color: var(--color-positive) !important;
}

.text-warning {
    color: var(--color-warning) !important;
}

.money-negative {
    color: var(--color-negative) !important;
}

.compact-empty {
    padding: 16px 18px;
}

.compact-empty > p {
    margin-bottom: 0;
}

.compact-table-panel .data-table th,
.compact-table-panel .data-table td {
    padding-top: 9px;
    padding-bottom: 9px;
}

/* Transfer detection */
.transfer-match-list {
    display: grid;
    gap: 10px;
}

.transfer-match {
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.transfer-match.is-unique {
    border-color: rgba(75, 214, 154, 0.23);
}

.transfer-match.is-ambiguous {
    border-color: rgba(242, 189, 91, 0.26);
}

.transfer-match-state,
.transfer-match-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 4px 10px;
}

.transfer-match-state {
    border-bottom: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.015);
    color: var(--color-text-muted);
    font-size: 11px;
}

.transfer-pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
}

.transfer-leg {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1px 10px;
}

.transfer-leg-label {
    grid-column: 1 / -1;
    color: var(--color-text-muted);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.transfer-leg > strong {
    min-width: 0;
    overflow: hidden;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.transfer-leg .money-value {
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    white-space: nowrap;
}

.transfer-leg-meta {
    display: flex;
    min-width: 0;
    grid-column: 1 / -1;
    align-items: center;
    gap: 4px;
    margin-top: 1px;
    color: var(--color-text-muted);
    font-size: 10px;
}

.transfer-leg-meta time {
    flex: 0 0 auto;
    white-space: nowrap;
}

.transfer-leg-meta span:last-child {
    min-width: 0;
    overflow: hidden;
    color: var(--color-text-secondary);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.transfer-direction {
    display: flex;
    align-items: center;
    color: var(--color-primary);
}

.transfer-direction span {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-primary));
}

.transfer-direction b {
    font-size: 19px;
    font-weight: 500;
}

.transfer-match-actions {
    border-top: 1px solid var(--color-border);
    background: rgba(5, 9, 13, 0.22);
}

.transfer-match-actions p {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: var(--color-text-muted);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.transfer-match-actions form {
    margin: 0;
}

.confirmed-heading {
    margin-top: 26px;
}

/* Convert transfer: compact sections with deliberate separation. */
.transfer-convert-shell > .transfer-convert-card {
    width: min(calc(100% - 36px), 760px);
    margin-right: auto;
    margin-bottom: 14px;
    margin-left: auto;
    padding: 13px 15px;
}

.transfer-convert-card h2 {
    margin: 0 0 8px;
    font-size: 16px;
}

.transfer-origin-card .form-heading h2 {
    margin-bottom: 2px;
}

.transfer-origin-card .form-heading p:not(.eyebrow) {
    margin: 2px 0 0;
    color: var(--color-text-secondary);
    font-size: 12px;
}

.transfer-origin-card > .field-help {
    margin: 7px 0 0;
}

.transfer-counterpart-form .checkbox-row {
    margin-top: 2px;
    border-radius: 7px;
    padding: 6px 8px;
    background: var(--color-surface-raised);
}

.transfer-convert-card .form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 7px;
}

.counterpart-create-form {
    gap: 8px;
}

.counterpart-primary-fields {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(150px, .75fr);
    gap: 10px;
}

/* Reports */
.analytics-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
}

.analytics-kpi {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 14px 15px;
    background: var(--color-surface);
}

.analytics-kpi::before {
    position: absolute;
    inset: 0 auto 0 0;
    width: 2px;
    background: var(--color-primary);
    content: "";
}

.analytics-kpi.is-income::before {
    background: var(--color-positive);
}

.analytics-kpi.is-expense::before {
    background: var(--color-negative);
}

.analytics-kpi.is-savings::before {
    background: var(--color-violet);
}

.analytics-kpi span {
    display: block;
    color: var(--color-text-secondary);
    font-size: 10px;
    font-weight: 750;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.analytics-kpi strong {
    display: block;
    margin-top: 9px;
    overflow: hidden;
    font-size: clamp(19px, 2vw, 25px);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.035em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.operational-summary {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-top: 9px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 9px 12px;
    background: rgba(167, 139, 250, 0.045);
}

.operational-summary div {
    display: grid;
    gap: 2px;
}

.operational-summary span,
.operational-summary p {
    color: var(--color-text-muted);
    font-size: 10px;
}

.operational-summary strong {
    font-size: 12px;
}

.operational-summary p {
    margin: 0 0 0 auto;
}

.report-trend {
    display: grid;
}

.report-trend-row {
    display: grid;
    grid-template-columns: 62px minmax(160px, 1fr) minmax(190px, auto) minmax(92px, auto) 54px;
    align-items: center;
    gap: 12px;
    border-top: 1px solid var(--color-border);
    padding: 8px 0;
}

.report-trend-row:first-child {
    border-top: 0;
}

.report-trend-row time,
.trend-rate {
    color: var(--color-text-muted);
    font-size: 10px;
    font-weight: 700;
}

.trend-bars {
    display: grid;
    gap: 3px;
}

.trend-line {
    height: 5px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.035);
}

.trend-line span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--color-positive);
}

.trend-line.is-expense span {
    background: var(--color-negative);
}

.trend-values {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.report-trend-row > strong {
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.trend-rate {
    text-align: right;
}

.category-ranking {
    display: grid;
    gap: 12px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

.category-ranking li > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 42px;
    gap: 10px;
    align-items: baseline;
}

.category-ranking li span {
    min-width: 0;
    overflow: hidden;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.category-ranking strong,
.category-ranking em {
    font-size: 11px;
    font-style: normal;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.category-ranking em {
    color: var(--color-text-muted);
}

.ranking-track {
    display: block !important;
    height: 5px;
    margin-top: 5px;
    overflow: hidden !important;
    border-radius: 999px;
    background: var(--color-surface-hover);
}

.ranking-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--color-negative);
}

.category-ranking.is-income .ranking-track span {
    background: var(--color-positive);
}

.badge-danger {
    background: var(--color-negative-soft);
    color: var(--color-danger);
}

/* Import workflow */
.import-history-list {
    display: grid;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.import-history-item {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;
    border-top: 1px solid var(--color-border);
    padding: 12px 14px;
}

.import-history-item:first-child {
    border-top: 0;
}

.import-file-mark {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border: 1px solid rgba(32, 214, 199, 0.22);
    border-radius: var(--radius-sm);
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-size: 8px;
    font-weight: 850;
    letter-spacing: 0.05em;
}

.import-history-main {
    min-width: 0;
}

.import-history-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.import-history-title > strong {
    min-width: 0;
    overflow: hidden;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.import-history-main > p {
    margin: 3px 0 0;
    color: var(--color-text-muted);
    font-size: 10px;
}

.import-row-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 13px;
    margin-top: 7px;
    color: var(--color-text-secondary);
    font-size: 10px;
}

.import-detail-header {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 12px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.import-detail-header > div {
    display: grid;
    gap: 4px;
    border-left: 1px solid var(--color-border);
    padding: 12px 14px;
}

.import-detail-header > div:first-child {
    border-left: 0;
}

.import-detail-header > div > span {
    color: var(--color-text-muted);
    font-size: 9px;
    font-weight: 750;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.import-detail-header strong {
    overflow: hidden;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.danger-zone {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 18px;
    border: 1px solid rgba(255, 105, 107, 0.25);
    border-radius: var(--radius-sm);
    padding: 11px 13px;
    background: rgba(255, 105, 107, 0.045);
}

.danger-zone p {
    margin: 3px 0 0;
    color: var(--color-text-muted);
    font-size: 11px;
}

.import-row-table td small,
.import-preview-table td small {
    display: block;
    margin-top: 3px;
    color: var(--color-text-muted);
    font-size: 9px;
}

.import-steps {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin: -7px 0 18px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
}

.import-steps span {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 7px;
    border-left: 1px solid var(--color-border);
    padding: 9px 10px;
    color: var(--color-text-muted);
    font-size: 10px;
    font-weight: 700;
}

.import-steps span:first-child {
    border-left: 0;
}

.import-steps b {
    display: grid;
    width: 19px;
    height: 19px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    background: var(--color-surface-hover);
    color: var(--color-text-secondary);
    font-size: 9px;
}

.import-steps .is-complete,
.import-steps [aria-current="step"] {
    color: var(--color-text);
}

.import-steps .is-complete b {
    background: var(--color-positive-soft);
    color: var(--color-positive);
}

.import-steps [aria-current="step"] {
    background: var(--color-primary-soft);
}

.import-steps [aria-current="step"] b {
    background: var(--color-primary);
    color: #041514;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.form-grid-actions {
    grid-column: 1 / -1;
}

.import-flow-panel {
    width: min(100%, 900px);
}

.import-sheet-picker {
    margin-bottom: 16px;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 16px;
}

.import-sheet-picker .form-field {
    flex: 1 1 320px;
}

.import-column-field {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 10px;
    background: rgba(255, 255, 255, 0.012);
}

.preview-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Review inbox */
.review-summary {
    margin-top: 2px;
}

.review-inbox-heading {
    margin-top: 18px;
}

.review-inbox-heading .eyebrow {
    color: var(--color-warning);
}

.review-inbox-panel {
    border-left: 2px solid rgba(242, 189, 91, 0.52);
}

.review-reason {
    display: inline-flex;
    border-radius: 5px;
    padding: 4px 6px;
    background: var(--color-warning-soft);
    color: var(--color-warning);
    font-size: 10px;
    font-weight: 700;
}

.review-all-clear {
    border-color: rgba(75, 214, 154, 0.2);
    background: var(--color-positive-soft);
}

/* Planning, budgets, goals and recurring */
.forecast-panel {
    border-color: rgba(167, 139, 250, 0.22);
    background: linear-gradient(145deg, rgba(167, 139, 250, 0.065), var(--color-surface) 42%);
}

.forecast-label {
    margin: 0 0 5px;
    color: var(--color-violet);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0.11em;
}

.overdue-panel:has(.table-panel) {
    border-color: rgba(242, 189, 91, 0.25);
}

.budget-summary-list {
    display: grid;
    gap: 8px;
}

.budget-currency {
    display: block;
    margin-bottom: 5px;
    color: var(--color-text-muted);
    font-size: 10px;
    letter-spacing: 0.08em;
}

.budget-summary {
    margin-bottom: 0;
}

.budget-tracker-list {
    display: grid;
    gap: 9px;
    margin-top: 14px;
}

.budget-tracker {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 14px 15px;
    background: var(--color-surface);
}

.budget-tracker.is-near {
    border-color: rgba(242, 189, 91, 0.28);
}

.budget-tracker.is-over {
    border-color: rgba(255, 122, 117, 0.28);
}

.budget-tracker-heading,
.budget-tracker-footer,
.goal-envelope-top,
.goal-amounts,
.recurring-rule-main,
.recurring-rule-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.budget-tracker-heading h2 {
    margin: 0;
    font-size: 14px;
}

.budget-tracker-heading > div > span {
    display: block;
    margin-top: 4px;
    color: var(--color-text-muted);
    font-size: 10px;
}

.budget-progress-copy {
    display: flex;
    align-items: baseline;
    gap: 5px;
    margin-top: 13px;
}

.budget-progress-copy > strong {
    font-size: 18px;
    font-variant-numeric: tabular-nums;
}

.budget-progress-copy > span {
    color: var(--color-text-secondary);
    font-size: 11px;
}

.budget-progress-copy > b {
    margin-left: auto;
    font-size: 11px;
}

.budget-progress,
.goal-progress-track {
    display: block;
    width: 100%;
    height: 8px;
    margin: 8px 0 11px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--color-surface-hover);
}

.budget-progress > span,
.goal-progress-track > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--color-primary);
}

.budget-tracker.is-near .budget-progress > span {
    background: var(--color-warning);
}

.budget-tracker.is-over .budget-progress > span {
    background: var(--color-negative);
}

.budget-tracker-footer {
    color: var(--color-text-secondary);
    font-size: 11px;
}

.goal-envelope-grid {
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
}

.goal-envelope {
    position: relative;
    overflow: hidden;
    background: linear-gradient(150deg, rgba(32, 214, 199, 0.055), var(--color-surface) 38%);
}

.goal-envelope::after {
    position: absolute;
    right: -32px;
    bottom: -52px;
    width: 130px;
    height: 90px;
    border: 1px solid rgba(32, 214, 199, 0.09);
    transform: rotate(-18deg);
    content: "";
}

.goal-envelope-top {
    align-items: flex-start;
}

.goal-envelope-top h2,
.goal-envelope-top p {
    margin: 0;
}

.goal-envelope-top p {
    margin-top: 4px;
    color: var(--color-text-muted);
    font-size: 10px;
}

.goal-amounts {
    justify-content: flex-start;
    margin-top: 18px;
}

.goal-amounts > strong {
    font-size: 22px;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.035em;
}

.goal-amounts > span {
    color: var(--color-text-secondary);
    font-size: 11px;
}

.goal-amounts > b {
    margin-left: auto;
    font-size: 11px;
}

.goal-envelope-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 13px 0;
}

.goal-envelope-meta > span {
    display: grid;
    gap: 2px;
    color: var(--color-text-muted);
    font-size: 9px;
}

.goal-envelope-meta strong {
    overflow: hidden;
    color: var(--color-text-secondary);
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.recurring-rule-list {
    display: grid;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.recurring-rule {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 18px;
    border-top: 1px solid var(--color-border);
    padding: 13px 14px;
}

.recurring-rule:first-child {
    border-top: 0;
}

.recurring-rule.is-inactive {
    opacity: 0.68;
}

.recurring-rule-main,
.recurring-rule-meta {
    grid-column: 1;
}

.recurring-rule-main > div {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.recurring-rule-name {
    overflow: hidden;
    color: var(--color-text);
    font-size: 13px;
    font-weight: 750;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.recurring-rule-main span,
.recurring-rule-meta > span:not(.badge) {
    color: var(--color-text-muted);
    font-size: 10px;
}

.recurring-rule-main > strong {
    font-size: 15px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.recurring-rule-meta {
    justify-content: flex-start;
    gap: 16px;
}

.recurring-rule > .secondary-link {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
}

.planning-tabs + .form-panel {
    width: min(100%, 880px);
}

.planning-tabs + .form-panel .account-form {
    display: grid;
    grid-template-columns: minmax(140px, 190px) minmax(0, 1fr);
    align-items: center;
    gap: 9px 14px;
}

.planning-tabs + .form-panel .account-form > label:not(.checkbox-row) {
    grid-column: 1;
}

.planning-tabs + .form-panel .account-form > input:not([type="hidden"]),
.planning-tabs + .form-panel .account-form > select,
.planning-tabs + .form-panel .account-form > textarea,
.planning-tabs + .form-panel .account-form > .field-help {
    grid-column: 2;
}

.planning-tabs + .form-panel .account-form > .field-help {
    margin-top: -7px;
}

.planning-tabs + .form-panel .account-form > .checkbox-row,
.planning-tabs + .form-panel .account-form > .flash-message {
    grid-column: 1 / -1;
}

.planning-tabs + .form-panel .account-form > .form-actions {
    grid-column: 2;
}

.transaction-editor-dialog {
    width: calc(100vw - 48px);
    max-width: 800px;
    max-height: calc(100dvh - 42px);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-lg);
    padding: 0;
    overflow: hidden;
    background: #101720;
    color: var(--color-text);
    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.58);
}

.transaction-editor-dialog::backdrop {
    background: rgba(3, 6, 9, 0.76);
    backdrop-filter: blur(3px);
}

.transaction-editor-shell {
    display: grid;
    max-height: calc(100dvh - 42px);
    grid-template-rows: auto minmax(0, 1fr);
}

.transaction-editor-header {
    position: relative;
    z-index: 2;
    display: flex;
    min-height: 64px;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border-bottom: 1px solid var(--color-border);
    padding: 10px 16px;
    background: rgba(17, 24, 33, 0.98);
}

.transaction-editor-header h2,
.transaction-editor-header p {
    margin: 0;
}

.transaction-editor-header h2 {
    font-size: 17px;
}

.transaction-editor-summary {
    max-width: 610px;
    margin-top: 2px !important;
    overflow: hidden;
    color: var(--color-text-secondary);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.transaction-editor-close {
    flex: 0 0 auto;
}

.transaction-editor-body {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 11px 16px 0;
}

.transaction-editor-body .transaction-editor-form {
    width: min(100%, 760px);
    margin: 0 auto;
}

.transaction-editor-body .transaction-form-actions {
    position: sticky;
    z-index: 2;
    bottom: 0;
    justify-content: flex-end;
    margin: 8px -16px 0;
    border-top: 1px solid var(--color-border);
    padding: 9px 16px max(9px, env(safe-area-inset-bottom));
    background: rgba(16, 23, 32, 0.97);
    backdrop-filter: blur(10px);
}

.transaction-editor-loading {
    display: flex;
    min-height: 180px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--color-text-secondary);
}

.transaction-editor-loading p {
    margin: 0;
}

.loading-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--color-primary);
    box-shadow: 0 0 0 5px rgba(32, 214, 199, 0.12);
}

.transaction-editor-form {
    gap: 0;
}

.transaction-form-section {
    display: grid;
    gap: 7px;
    border-bottom: 1px solid rgba(37, 48, 61, 0.72);
    padding: 9px 0;
}

.transaction-form-section:first-of-type {
    padding-top: 2px;
}

.transaction-form-section:last-of-type {
    border-bottom: 0;
}

.transaction-form-section h3 {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.transaction-data-grid {
    display: grid;
    grid-template-columns: minmax(190px, 1.45fr) repeat(3, minmax(116px, 0.85fr));
    gap: 8px;
}

.transaction-classification-grid,
.transaction-analytics-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.transaction-editor-form .form-field {
    gap: 4px;
}

.transaction-editor-form .form-field > label,
.transaction-editor-form .tag-picker legend {
    font-size: 11px;
}

.transaction-editor-form input,
.transaction-editor-form select {
    min-height: 35px;
    padding-top: 6px;
    padding-bottom: 6px;
}

.transaction-editor-form textarea {
    min-height: 58px;
    padding-top: 7px;
    padding-bottom: 7px;
}

.transaction-analytics-grid {
    grid-template-columns: minmax(210px, 310px) minmax(0, 1fr);
}

.optional-label {
    color: var(--color-text-muted);
    font-size: 10px;
    font-weight: 600;
}

.reimbursement-fields {
    display: grid;
    gap: 8px;
}

.reimbursement-search {
    position: relative;
}

.reimbursement-results {
    position: absolute;
    z-index: var(--z-popover);
    top: 43px;
    right: 0;
    left: 0;
    display: grid;
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    padding: 5px;
    background: #121a24;
    box-shadow: var(--shadow-popover);
}

.reimbursement-result {
    display: grid;
    width: 100%;
    min-height: 48px;
    justify-content: stretch;
    gap: 2px;
    border: 0;
    padding: 7px 9px;
    background: transparent;
    color: var(--color-text);
    text-align: left;
}

.reimbursement-result span,
.related-purchase span {
    color: var(--color-text-muted);
    font-size: 11px;
}

.related-purchase {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid rgba(32, 214, 199, 0.22);
    border-radius: var(--radius-sm);
    padding: 9px 10px;
    background: var(--color-primary-soft);
}

.related-purchase.is-hidden {
    display: none;
}

.related-purchase > div,
.related-purchase strong,
.related-purchase span {
    display: block;
    min-width: 0;
}

.tag-picker {
    border: 0;
    margin: 0;
    padding: 0;
}

.tag-picker legend {
    margin-bottom: 6px;
    font-size: 13px;
}

.tag-picker-ui {
    display: none;
    gap: 7px;
}

.js .tag-picker-ui {
    display: grid;
}

.js .tag-native-fallback {
    display: none;
}

.tag-chips,
.tag-options {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tag-chip,
.tag-options button,
.tag-create-option {
    min-height: 30px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 5px 9px;
    background: var(--color-surface-raised);
    color: var(--color-text-secondary);
    font-size: 11px;
}

.tag-chip,
.tag-options button.is-selected {
    border-color: rgba(32, 214, 199, 0.35);
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.tag-create-option {
    justify-self: start;
    border-style: dashed;
}

.inline-toast {
    position: fixed;
    z-index: 400;
    right: 18px;
    bottom: 18px;
    max-width: min(360px, calc(100vw - 36px));
    border: 1px solid rgba(75, 214, 154, 0.34);
    border-radius: var(--radius-sm);
    padding: 10px 13px;
    opacity: 0;
    background: #13221e;
    color: #bcebd6;
    box-shadow: var(--shadow-popover);
    transform: translateY(8px);
}

.inline-toast.is-error {
    border-color: rgba(255, 105, 107, 0.34);
    background: #271719;
    color: #ffc1c2;
}

.inline-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.transaction-row.is-saving {
    opacity: 0.66;
}

.transaction-row.is-removing {
    opacity: 0;
    transform: translateY(-4px);
}

@media (max-width: 1180px) {
    .financial-hero {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .period-panel {
        grid-column: 1 / -1;
    }

    .filter-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 960px) {
    :root {
        --page-gutter: 16px;
    }

    .analytics-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .report-trend-row {
        grid-template-columns: 58px minmax(130px, 1fr) minmax(170px, auto) 84px;
    }

    .trend-rate {
        display: none;
    }

    .app-shell {
        display: block;
        padding-bottom: 0;
    }

    .app-workspace {
        padding-bottom: 32px;
    }

    .page-header,
    .app-header > div:first-child:not(.nav-stack) {
        min-height: 82px;
        padding-top: 17px;
        padding-left: 48px;
        padding-bottom: 17px;
    }

    .mobile-nav-toggle {
        position: fixed;
        z-index: 180;
        top: 18px;
        left: 16px;
        display: grid;
        background: rgba(17, 23, 32, 0.94);
        backdrop-filter: blur(10px);
    }

    .sidebar {
        width: min(286px, calc(100vw - 48px));
        border-right-color: var(--color-border-strong);
        box-shadow: 18px 0 55px rgba(0, 0, 0, 0.42);
        transform: translateX(-105%);
        transition: transform 180ms ease;
    }

    .nav-open .sidebar {
        transform: translateX(0);
    }

    .sidebar-close {
        display: grid;
    }

    .nav-scrim,
    .nav-scrim:hover {
        position: fixed;
        z-index: var(--z-overlay);
        inset: 0;
        width: 100%;
        height: 100%;
        min-height: 100%;
        border: 0;
        border-radius: 0;
        padding: 0;
        background: rgba(3, 6, 9, 0.68);
        color: transparent;
        opacity: 0;
        pointer-events: none;
    }

    .nav-open {
        overflow: hidden;
    }

    .nav-open .nav-scrim {
        display: block;
        opacity: 1;
        pointer-events: auto;
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .transaction-table-panel {
        overflow: visible;
        border: 0;
        background: transparent;
    }

    .transaction-table,
    .transaction-table tbody {
        display: block;
    }

    .transaction-table thead {
        display: none;
    }

    .transaction-table tbody {
        display: grid;
        gap: 8px;
    }

    .transaction-table tr.transaction-row {
        display: grid;
        grid-template-columns: 28px minmax(0, 1fr) auto;
        grid-template-rows: auto auto auto;
        gap: 5px 10px;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        padding: 12px;
        background: var(--color-surface);
    }

    .transaction-table td {
        display: block;
        width: auto !important;
        max-width: none;
        border: 0;
        padding: 0 !important;
    }

    .transaction-table .selection-cell {
        grid-column: 1;
        grid-row: 1 / span 3;
        padding-top: 2px !important;
    }

    .transaction-table .description-cell {
        grid-column: 2;
        grid-row: 1;
    }

    .transaction-table .money-cell {
        grid-column: 3;
        grid-row: 1;
    }

    .transaction-table .date-cell {
        grid-column: 2;
        grid-row: 2;
    }

    .transaction-table .account-cell {
        grid-column: 3;
        grid-row: 2;
        text-align: right;
    }

    .transaction-table .category-cell {
        grid-column: 2;
        grid-row: 3;
        min-width: 0;
    }

    .transaction-table .actions-cell {
        grid-column: 3;
        grid-row: 3;
        align-self: end;
    }

    .description-cell > strong {
        font-size: 13px;
    }

    .category-trigger {
        width: min(100%, 260px);
        border-color: var(--color-border);
        background: rgba(255, 255, 255, 0.018);
    }

    .row-menu-popover {
        right: 0;
        bottom: calc(100% + 4px);
        top: auto;
    }
}

@media (max-width: 700px) {
    .budget-tracker-heading,
    .budget-tracker-footer,
    .goal-envelope-top {
        align-items: flex-start;
        flex-direction: column;
    }

    .goal-envelope-grid {
        grid-template-columns: 1fr;
    }

    .recurring-rule {
        grid-template-columns: 1fr;
    }

    .recurring-rule-meta {
        flex-wrap: wrap;
        gap: 7px 13px;
    }

    .recurring-rule > .secondary-link {
        grid-column: 1;
        grid-row: auto;
        justify-self: start;
    }

    .planning-tabs + .form-panel .account-form {
        grid-template-columns: 1fr;
    }

    .planning-tabs + .form-panel .account-form > label:not(.checkbox-row),
    .planning-tabs + .form-panel .account-form > input:not([type="hidden"]),
    .planning-tabs + .form-panel .account-form > select,
    .planning-tabs + .form-panel .account-form > textarea,
    .planning-tabs + .form-panel .account-form > .field-help,
    .planning-tabs + .form-panel .account-form > .checkbox-row,
    .planning-tabs + .form-panel .account-form > .flash-message,
    .planning-tabs + .form-panel .account-form > .form-actions {
        grid-column: 1;
    }

    .import-detail-header {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .import-detail-header > div:nth-child(3) {
        border-left: 0;
    }

    .import-detail-header > div:nth-child(n + 3) {
        border-top: 1px solid var(--color-border);
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .form-grid-actions {
        grid-column: 1;
    }

    .import-steps span {
        justify-content: center;
        padding: 8px 4px;
        font-size: 0;
    }

    .import-steps b {
        font-size: 9px;
    }

    .transfer-pair {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 14px;
    }

    .transfer-direction {
        width: 22px;
        height: 26px;
        justify-self: center;
        flex-direction: column;
    }

    .transfer-direction span {
        width: 1px;
        height: 100%;
        background: linear-gradient(180deg, transparent, var(--color-primary));
    }

    .transfer-direction b {
        line-height: 0.65;
        transform: rotate(90deg);
    }

    .transfer-match-actions {
        align-items: flex-start;
        flex-direction: column;
    }

    .transfer-match-actions p {
        width: 100%;
    }

    .operational-summary {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
    }

    .operational-summary p {
        grid-column: 1 / -1;
        margin: 0;
    }

    .report-trend-row {
        grid-template-columns: 52px minmax(0, 1fr) auto;
        gap: 8px;
    }

    .trend-values {
        grid-column: 2;
        justify-content: flex-start;
        font-size: 10px;
    }

    .report-trend-row > strong {
        grid-column: 3;
        grid-row: 1 / span 2;
    }

    .responsive-data-table,
    .responsive-data-table tbody {
        display: block;
    }

    .responsive-data-table thead {
        display: none;
    }

    .responsive-data-table tbody {
        display: grid;
        gap: 8px;
    }

    .responsive-data-table tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px 12px;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        padding: 11px 12px;
        background: var(--color-surface);
    }

    .responsive-data-table td {
        display: grid;
        gap: 2px;
        border: 0;
        padding: 0 !important;
        text-align: left !important;
    }

    .responsive-data-table td::before {
        color: var(--color-text-muted);
        content: attr(data-label);
        font-size: 9px;
        font-weight: 750;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }

    .transaction-data-grid,
    .transaction-classification-grid,
    .transaction-analytics-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .transaction-account-field,
    .transaction-form-section > .form-field,
    .reimbursement-fields,
    .tag-picker {
        grid-column: 1 / -1;
    }

    .reimbursement-results {
        position: static;
        max-height: 220px;
        margin-top: 6px;
    }

    .page-header {
        align-items: center;
    }

    .financial-hero {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .period-controls {
        grid-template-columns: 1fr 1fr auto;
    }

    .dashboard-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .movement-toolbar {
        grid-template-columns: 1fr auto auto;
    }

    .search-control {
        grid-column: 1 / -1;
    }

    .search-submit {
        grid-column: 1;
    }

    .filter-toggle {
        grid-column: 2;
    }

    .toolbar-more {
        grid-column: 3;
    }

    .filter-grid,
    .settings-grid,
    .goal-grid,
    .report-grid,
    .inline-planning-form {
        grid-template-columns: 1fr;
    }

    .quick-actions {
        align-items: flex-start;
    }

    .quick-action-list {
        width: 100%;
        gap: 6px;
    }
}

@media (max-width: 480px) {
    :root {
        --page-gutter: 12px;
    }

    .import-history-item {
        grid-template-columns: 32px minmax(0, 1fr);
        gap: 10px;
        padding: 11px;
    }

    .import-file-mark {
        width: 31px;
        height: 31px;
    }

    .import-history-item > .secondary-link {
        grid-column: 2;
        justify-self: start;
    }

    .danger-zone {
        align-items: flex-start;
        flex-direction: column;
    }

    .transaction-data-grid,
    .transaction-classification-grid,
    .transaction-analytics-grid {
        grid-template-columns: 1fr;
    }

    .related-purchase {
        align-items: flex-start;
        flex-direction: column;
    }
    body {
        font-size: 13px;
    }

    .page-header,
    .app-header > div:first-child:not(.nav-stack) {
        min-height: 76px;
        padding-top: 13px;
        padding-left: 48px;
        padding-bottom: 13px;
    }

    .page-header {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .page-heading {
        flex: 1 1 190px;
    }

    .page-description {
        font-size: 11px;
    }

    .page-actions .btn {
        min-height: 34px;
        padding: 7px 10px;
        font-size: 11px;
    }

    .mobile-nav-toggle {
        top: 15px;
        left: 12px;
    }

    .financial-hero {
        gap: 8px;
    }

    .metric-card-featured {
        padding: 13px;
    }

    .metric-value {
        margin-top: 13px;
        font-size: clamp(20px, 6.6vw, 27px);
    }

    .metric-context {
        margin-top: 7px;
        font-size: 9px;
    }

    .period-panel {
        padding: 13px;
    }

    .period-heading {
        align-items: center;
    }

    .period-controls {
        grid-template-columns: 1fr;
    }

    .period-controls > label,
    .period-controls > select,
    .salary-field,
    .period-controls .btn {
        grid-column: 1;
        grid-row: auto;
    }

    .dashboard-kpis {
        gap: 8px;
    }

    .kpi-card {
        padding: 13px;
    }

    .kpi-card strong {
        font-size: clamp(18px, 5.4vw, 23px);
    }

    .quick-actions {
        display: grid;
        gap: 7px;
    }

    .quick-action-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .quick-action-list a {
        min-width: 0;
    }

    .transaction-editor-dialog {
        width: 100vw;
        max-width: none;
        height: 100dvh;
        max-height: 100dvh;
        border: 0;
        border-radius: 0;
    }

    .app-shell > .transaction-editor-dialog {
        width: 100vw;
        max-width: none;
        margin: 0;
    }

    .transaction-editor-shell {
        height: 100dvh;
        max-height: 100dvh;
    }

    .transaction-editor-header {
        min-height: 70px;
        padding: max(11px, env(safe-area-inset-top)) 13px 11px;
    }

    .transaction-editor-body {
        padding: 14px 13px 0;
    }

    .transaction-editor-body .transaction-form-actions {
        margin-right: -13px;
        margin-left: -13px;
        padding-right: 13px;
        padding-left: 13px;
    }

    .panel {
        padding: 15px;
    }

    .recent-item {
        grid-template-columns: 48px 6px minmax(0, 1fr) auto;
        gap: 7px;
    }

    .recent-item > strong {
        font-size: 11px;
    }

    .first-run-banner,
    .onboarding-intro,
    .account-main,
    .form-heading {
        display: grid;
    }

    .empty-state-copy {
        align-items: flex-start;
    }

    .movement-toolbar {
        gap: 7px;
    }

    .search-submit,
    .filter-toggle,
    .toolbar-more > summary {
        min-height: 37px;
        padding: 7px 10px;
        font-size: 11px;
    }

    .advanced-filter-panel {
        position: fixed;
        z-index: 210;
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        max-height: 82vh;
        overflow-y: auto;
        border-right: 0;
        border-bottom: 0;
        border-left: 0;
        border-radius: 18px 18px 0 0;
        padding: 17px 14px max(17px, env(safe-area-inset-bottom));
    }

    .filter-grid {
        grid-template-columns: 1fr 1fr;
    }

    .filter-grid .form-field:nth-child(-n + 5) {
        grid-column: 1 / -1;
    }

    .filter-actions .btn {
        flex: 1;
    }

    .active-filters {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 2px;
    }

    .filter-chip,
    .active-filters > a,
    .active-filter-label {
        flex: 0 0 auto;
    }

    .movement-heading {
        align-items: flex-end;
    }

    .result-range {
        font-size: 9px;
    }

    .bulk-toolbar {
        top: auto;
        bottom: 10px;
        flex-wrap: wrap;
        gap: 7px;
        padding: 8px 10px;
    }

    .bulk-hint {
        width: 100%;
        margin: 0;
    }

    .transaction-table tr.transaction-row {
        padding: 11px 10px;
    }

    .transaction-meta .badge,
    .transaction-meta .status-pill {
        display: none;
    }

    .transaction-meta .status-warning,
    .transaction-meta .status-transfer {
        display: inline-flex;
    }

    .category-popover,
    .bulk-category-picker .category-popover {
        position: fixed;
        z-index: 220;
        top: auto;
        right: 12px;
        bottom: 12px;
        left: 12px;
        width: auto;
        max-height: min(68vh, 520px);
        border-radius: var(--radius-lg);
    }

    .category-options {
        max-height: calc(min(68vh, 520px) - 62px);
    }

    .category-option {
        min-height: 39px;
    }

    .row-menu-popover {
        position: fixed;
        z-index: 220;
        top: auto;
        right: 12px;
        bottom: 12px;
        left: 12px;
        min-width: 0;
        border-radius: var(--radius-md);
    }

    .row-menu-popover a,
    .row-menu-popover button {
        min-height: 40px;
    }

    .checkbox-grid,
    .account-meta,
    .detail-list,
    .import-summary {
        grid-template-columns: 1fr;
    }

    .auth-card,
    .panel-card {
        padding: 21px;
    }

    .heading-actions,
    .month-selector {
        width: 100%;
    }

    .month-selector input,
    .month-selector button {
        width: 100%;
    }

    .planning-list li,
    .occurrence-actions form {
        display: grid;
    }

    .progress-track {
        width: 100%;
    }

    .onboarding-step {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

/* UI Pack 2: compact configuration, hierarchy and connection states */
.settings-list {
    display: grid;
    width: min(100%, 820px);
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.settings-list .settings-card {
    display: flex;
    min-height: 0;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border: 0;
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
    padding: 13px 16px;
}

.settings-list .settings-card:last-child { border-bottom: 0; }
.settings-list .settings-card > span { display: grid; gap: 2px; }
.settings-list .settings-card strong { color: var(--color-text); font-size: 14px; }
.settings-list .settings-card small { color: var(--color-text-secondary); font-size: 12px; }
.settings-list .settings-card b { color: var(--color-text-muted); font-size: 16px; }

.account-card-compact { padding: 14px 16px; }
.account-card-compact .account-main { align-items: center; }
.account-balance-block { display: grid; justify-items: end; gap: 2px; text-align: right; }
.account-balance-block small { color: var(--color-text-muted); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.account-card-compact .account-balance { margin: 0; }
.account-card-compact .account-meta { margin-top: 10px; }
.account-card-compact .badge-row,
.account-card-compact .account-actions { margin-top: 10px; }

.account-row-compact {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 18px;
    padding: 11px 14px;
    border: 0;
    border-radius: 0;
}

.account-row-compact + .account-row-compact { border-top: 1px solid var(--color-border); }
.account-row-copy h2 a { color: inherit; text-decoration: none; }
.account-row-copy h2 a:hover { color: var(--color-primary); }

.account-row-copy {
    min-width: 0;
}

.account-row-copy h2 {
    overflow: hidden;
    font-size: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-row-copy > p {
    margin: 1px 0 0;
    overflow: hidden;
    color: var(--color-text-secondary);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-row-copy > .account-summary-line {
    margin-top: 4px;
    color: var(--color-text-muted);
    font-size: 10px;
    font-weight: 700;
}

.account-row-compact .account-flags {
    gap: 5px;
    margin-top: 6px;
}

.account-row-compact .account-flags .badge {
    min-height: 19px;
    padding: 2px 6px;
    font-size: 9px;
}

.account-row-compact .account-balance {
    margin: 0;
    font-size: 18px;
}

.account-row-compact .account-actions {
    flex-wrap: nowrap;
    margin-top: 0;
}

.account-detail-page { display: grid; gap: 14px; }
.account-detail-hero { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.detail-label { display: block; color: var(--color-text-muted); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.account-detail-balance { display: block; margin-top: 3px; font-size: clamp(24px, 4vw, 32px); font-variant-numeric: tabular-nums; }
.account-detail-flags { justify-content: flex-end; margin: 0; }
.account-detail-section,
.account-analysis-panel { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.account-detail-section { padding: 12px 14px; }
.compact-section-heading { margin-bottom: 10px; }
.compact-section-heading h2 { font-size: 15px; }
.compact-section-heading .eyebrow { margin: 0; }
.account-month-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--color-border); }
.account-month-metrics article { display: grid; gap: 3px; min-width: 0; padding: 10px 12px; }
.account-month-metrics article + article { border-left: 1px solid var(--color-border); }
.account-month-metrics span { color: var(--color-text-muted); font-size: 10px; font-weight: 750; text-transform: uppercase; }
.account-month-metrics strong { font-size: 15px; font-variant-numeric: tabular-nums; }
.account-recent-list,
.account-evolution-list { display: grid; }
.account-recent-row,
.account-evolution-list > div { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 35px; border-top: 1px solid var(--color-border); color: inherit; text-decoration: none; }
.account-recent-row:first-child,
.account-evolution-list > div:first-child { border-top: 0; }
.account-recent-row:hover { color: var(--color-primary); }
.account-recent-row time,
.account-evolution-list span { color: var(--color-text-muted); font-size: 11px; }
.account-recent-row span,
.account-evolution-list span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-recent-row strong,
.account-evolution-list strong { font-size: 12px; font-variant-numeric: tabular-nums; text-align: right; }
.account-analysis-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.account-analysis-panel { padding: 12px 14px; }
.account-evolution-list > div { grid-template-columns: minmax(0, 1fr) auto; }

.compact-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px 16px;
}

.compact-form-grid .field { display: grid; min-width: 0; align-content: start; gap: 6px; }
.compact-form-grid .field-wide,
.compact-form-grid > input[type="hidden"] { grid-column: 1 / -1; }
.compact-form-grid .field-help { margin: 0; }

.context-subnav {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--color-border);
}

.context-subnav a {
    padding: 8px 12px;
    border-bottom: 2px solid transparent;
    color: var(--color-text-secondary);
    font-size: 12px;
    font-weight: 750;
    text-decoration: none;
}

.context-subnav a:hover,
.context-subnav a:focus-visible { border-bottom-color: var(--color-primary); color: var(--color-text); }
.category-sections { display: grid; gap: 14px; }
.category-tree-panel { scroll-margin-top: 20px; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.category-tree-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 14px; border-bottom: 1px solid var(--color-border); background: var(--color-surface-raised); }
.category-tree-heading h2 { margin: 1px 0 0; font-size: 16px; }
.category-tree-heading .eyebrow { margin: 0; }
.category-group + .category-group { border-top: 1px solid var(--color-border); }
.category-group.is-inactive { opacity: .7; }
.category-parent-row { display: flex; min-height: 42px; align-items: center; justify-content: space-between; gap: 12px; padding: 5px 12px; }
.category-parent-row > div:first-child { display: flex; align-items: center; gap: 9px; }
.category-children { padding: 0 12px 6px 27px; }
.category-child-row { display: grid; min-height: 34px; grid-template-columns: 14px minmax(120px, 1fr) auto auto auto; align-items: center; gap: 7px; border-top: 1px solid rgba(51, 66, 82, .55); }
.category-child-row strong { font-size: 13px; font-weight: 650; }
.category-month-amount { flex: 0 0 auto; font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.category-parent-row .category-month-amount { margin-left: auto; }
.category-branch { width: 10px; height: 12px; border-bottom: 1px solid var(--color-border-strong); border-left: 1px solid var(--color-border-strong); }
.category-empty-children { margin: 0; padding: 0 14px 11px 29px; color: var(--color-text-muted); font-size: 12px; }
.category-child-row .row-actions { justify-content: flex-end; }
.category-actions { display: flex; align-items: center; flex-wrap: nowrap; gap: 4px; }
.category-actions form { display: flex; margin: 0; }

.rule-list { display: grid; gap: 8px; }
.rule-card { overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.rule-card.is-inactive { opacity: .72; }
.rule-card-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 8px 11px; }
.rule-card-head h2 { margin: 0; font-size: 14px; }
.rule-card-tools { display: flex; flex: 0 0 auto; align-items: center; gap: 10px; }
.rule-card-status { display: flex; align-items: center; gap: 5px; color: var(--color-text-muted); font-size: 10px; font-weight: 700; }
.rule-terms { display: flex; align-items: center; gap: 8px; padding: 6px 11px; border-block: 1px solid var(--color-border); background: rgba(32, 214, 199, .035); }
.rule-terms small { color: var(--color-primary); font-size: 9px; font-weight: 850; letter-spacing: .12em; }
.rule-terms > div { display: flex; min-width: 0; flex: 1; flex-wrap: wrap; gap: 4px; }
.rule-terms span { border: 1px solid var(--color-border-strong); border-radius: 999px; padding: 2px 7px; background: var(--color-surface-raised); color: var(--color-text); font-size: 10px; font-weight: 700; }
.rule-outcome { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 18px; padding: 7px 11px; }
.rule-outcome > span { color: var(--color-primary); font-size: 16px; }
.rule-outcome > div { display: flex; align-items: center; gap: 6px; }
.rule-outcome small { color: var(--color-text-muted); font-size: 10px; text-transform: uppercase; }
.rule-outcome strong { font-size: 12px; }
.rule-outcome .badge-row { margin: 0; }
.rule-form { grid-template-columns: 150px minmax(0, 1fr); gap: 10px 14px; }
.rule-form > input[type="hidden"],
.rule-form-section,
.rule-form > .checkbox-fieldset,
.rule-form > .form-actions { grid-column: 1 / -1; }
.rule-form-section { margin-top: 8px; padding: 10px 0 4px; border-top: 1px solid var(--color-border); }
.rule-form-section:first-of-type { margin-top: 0; border-top: 0; padding-top: 0; }
.rule-form-section .eyebrow { margin: 0 0 2px; }
.rule-form-section h3 { margin: 0; font-size: 14px; }
.rule-form-section p:last-child:not(.eyebrow) { margin: 3px 0 0; color: var(--color-text-muted); font-size: 11px; }
.rule-form > label { align-self: center; color: var(--color-text-secondary); font-size: 12px; font-weight: 700; }
.rule-form textarea { min-height: 118px; }
.rule-term-help { grid-column: 2; margin: -5px 0 2px; }

.compact-table-panel { overflow: hidden; }
.compact-data-table th { padding-block: 8px; font-size: 10px; }
.compact-data-table td { padding-block: 8px; }
.compact-single-form { width: min(100%, 460px); }

.rule-matches-heading {
    margin-bottom: 10px;
}

.rule-matches-heading h2 {
    font-size: 17px;
}

.rule-matches-heading p {
    margin: 2px 0 0;
    color: var(--color-text-secondary);
    font-size: 11px;
}

.rule-matches-summary {
    margin-bottom: 11px;
}

.rule-matches-summary article {
    align-items: center;
    padding: 8px 12px;
}

.rule-matches-summary span {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.rule-matches-summary strong {
    font-size: 17px;
}

.rule-matches-table {
    font-size: 11px;
}

.rule-matches-table th {
    padding: 7px 8px;
    background: var(--color-surface-raised);
    font-size: 9px;
}

.rule-matches-table td {
    padding: 7px 8px;
}

.rule-matches-table .money-cell {
    font-variant-numeric: tabular-nums;
    font-weight: 750;
    white-space: nowrap;
}

.rule-match-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 10px;
}

.banking-disabled-state,
.bank-reconnect-alert {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
    border: 1px solid rgba(242, 189, 91, .28);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    background: var(--color-warning-soft);
}

.banking-disabled-state > span { display: grid; width: 24px; height: 24px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: var(--color-warning); color: #17120a; font-weight: 900; }
.banking-disabled-state > div { flex: 1; }
.banking-disabled-state p,
.bank-reconnect-alert p { margin: 2px 0 0; color: var(--color-text-secondary); font-size: 12px; }
.bank-reconnect-alert > div { min-width: 0; }
.bank-reconnect-alert form { flex: 0 0 auto; margin: 0; }
.bank-connection-list { display: grid; gap: 12px; }
.bank-connection-card { overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.bank-connection-card.needs-attention { border-color: rgba(242, 189, 91, .25); }
.bank-connection-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 14px 16px; }
.bank-mark { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid var(--color-border-strong); border-radius: 9px; background: var(--color-surface-raised); color: var(--color-primary); font-weight: 850; }
.bank-connection-head h2 { margin: 0; overflow-wrap: anywhere; font-size: 15px; }
.bank-connection-head p { margin: 1px 0 0; color: var(--color-text-muted); font-size: 11px; }
.bank-connection-head > .badge { justify-self: end; max-width: 100%; text-align: center; }
.bank-connection-meta { margin: 0; padding: 0 16px 12px 61px; }
.bank-connection-meta dt { color: var(--color-text-muted); font-size: 10px; text-transform: uppercase; }
.bank-connection-meta dd { margin: 2px 0 0; font-size: 12px; font-weight: 700; }
.bank-connection-card .bank-reconnect-alert { margin: 0 14px 12px; }
.bank-error-message { margin: 0 14px 12px; border-radius: var(--radius-sm); padding: 8px 10px; background: var(--color-negative-soft); color: #ffaaa8; font-size: 12px; }
.bank-connection-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; padding: 9px 14px; border-top: 1px solid var(--color-border); background: var(--color-surface-raised); }
.bank-connection-actions form { margin: 0; }
.bank-account-map { position: relative; }
.bank-account-map::before { position: absolute; top: 0; bottom: 0; left: 0; width: 3px; background: var(--color-primary); content: ""; }
.badge-warning { border-color: rgba(242, 189, 91, .25); background: var(--color-warning-soft); color: #f3cf89; }

@media (max-width: 700px) {
    .compact-form-grid,
    .rule-form { grid-template-columns: 1fr; }
    .compact-form-grid .field-wide,
    .compact-form-grid > input[type="hidden"],
    .rule-form > input[type="hidden"],
    .rule-form-section,
    .rule-form > .checkbox-fieldset,
    .rule-form > .form-actions,
    .rule-term-help { grid-column: 1; }
    .account-multiselect-menu { width: min(100%, calc(100vw - 40px)); }
    .account-table-panel { overflow: visible; }
    .account-table { display: block; min-width: 0; }
    .account-table thead { display: none; }
    .account-table tbody { display: grid; gap: 0; }
    .account-table tr.account-table-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 5px 10px;
        border-bottom: 1px solid var(--color-border);
        padding: 9px 10px;
    }
    .account-table tr.account-table-row:last-child { border-bottom: 0; }
    .account-table td {
        display: flex;
        min-width: 0;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        border-bottom: 0;
        padding: 0;
    }
    .account-table td::before {
        flex: 0 0 auto;
        color: var(--color-text-muted);
        content: attr(data-label);
        font-size: 9px;
        font-weight: 800;
        letter-spacing: 0.055em;
        text-transform: uppercase;
    }
    .account-table .account-name-cell {
        grid-column: 1;
    }
    .account-name-content {
        justify-content: flex-start;
    }
    .account-table .account-name-cell::before,
    .account-table .actions-cell::before { content: none; }
    .account-table .account-sync-cell,
    .account-table .account-state-cell { white-space: normal; }
    .account-table .account-table-balance {
        grid-column: 2;
        grid-row: 1;
    }
    .account-table .actions-cell {
        grid-column: 1 / -1;
        justify-content: flex-end;
        margin-top: 2px;
    }
    .account-row-compact { grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px; padding: 10px 11px; }
    .account-row-compact .account-row-copy { grid-column: 1; grid-row: 1 / span 2; }
    .account-row-compact .account-balance-block { grid-column: 2; grid-row: 1; justify-items: end; text-align: right; }
    .account-row-compact .account-actions { grid-column: 2; grid-row: 2; justify-self: end; }
    .account-row-compact .account-balance { font-size: 16px; }
    .account-balance-block { justify-items: start; text-align: left; }
    .account-detail-hero { align-items: flex-start; flex-direction: column; }
    .account-detail-flags { justify-content: flex-start; }
    .account-month-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .account-month-metrics article:nth-child(3) { border-left: 0; border-top: 1px solid var(--color-border); }
    .account-month-metrics article:nth-child(4) { border-top: 1px solid var(--color-border); }
    .account-analysis-grid { grid-template-columns: 1fr; }
    .category-parent-row { align-items: flex-start; }
    .category-parent-row,
    .rule-card-head { flex-direction: column; }
    .category-child-row { grid-template-columns: 14px minmax(0, 1fr) auto auto auto; padding-block: 5px; }
    .category-child-row .row-actions { grid-column: 2 / -1; justify-content: flex-start; }
    .rule-card-head .badge-row { align-self: flex-start; }
    .rule-card-head { align-items: stretch; gap: 7px; }
    .rule-card-tools { justify-content: space-between; }
    .rule-card-status { flex-wrap: wrap; }
    .rule-outcome { align-items: flex-start; }
    .icon-btn-compact { width: 40px; min-width: 40px; height: 40px; min-height: 40px; }
    .category-actions { align-items: center; }
    .category-parent-row { align-items: center; flex-direction: row; }
    .category-child-row .category-actions { grid-column: auto; justify-content: flex-end; }
    .note-indicator { width: 32px; min-width: 32px; height: 32px; min-height: 32px; }
    .note-indicator::after { display: none; }
    .counterpart-primary-fields { grid-template-columns: 1fr; }
    .transfer-convert-shell > .transfer-convert-card { margin-bottom: 12px; padding: 11px 12px; }
    .transfer-match .transfer-pair { grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr); gap: 6px; padding: 9px 10px; }
    .transfer-match .transfer-leg { grid-template-columns: 1fr; gap: 1px; }
    .transfer-match .transfer-leg-label,
    .transfer-match .transfer-leg-meta { grid-column: 1; }
    .transfer-match .transfer-leg > strong { font-size: 13px; }
    .transfer-match .transfer-direction { width: auto; height: auto; flex-direction: row; }
    .transfer-match .transfer-direction span { width: 100%; height: 1px; background: linear-gradient(90deg, transparent, var(--color-primary)); }
    .transfer-match .transfer-direction b { line-height: 1; transform: none; }
    .rule-matches-summary article { display: grid; gap: 1px; align-content: center; }
    .rule-match-actions { align-items: stretch; flex-direction: column; }
    .rule-match-actions .btn { width: 100%; }
    .bank-connection-head { grid-template-columns: auto 1fr; }
    .bank-connection-head > .badge { grid-column: 1 / -1; justify-self: start; }
    .bank-connection-meta { padding-left: 16px; }
    .bank-reconnect-alert { align-items: stretch; flex-direction: column; }
    .bank-reconnect-alert form,
    .bank-reconnect-alert button { width: 100%; }
    .bank-connection-actions > *,
    .bank-connection-actions form,
    .bank-connection-actions button,
    .bank-connection-actions a { width: 100%; }
}

/* Planning polish: compact monthly tracking and dashboard hierarchy */
.planning-page-content .planning-tabs {
    margin-bottom: var(--space-4);
}

.budget-period-heading {
    margin-bottom: var(--space-3);
}

.budget-period-heading .eyebrow,
.budget-annual-section .eyebrow,
.planning-dashboard .eyebrow {
    margin-bottom: 3px;
    color: var(--color-text-muted);
}

.budget-period-heading h2,
.budget-section-heading h2,
.budget-annual-section h2,
.planning-dashboard h2 {
    font-size: 16px;
}

.budget-summary-list {
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.budget-summary-group {
    min-width: 0;
}

.planning-kpi-strip {
    margin-bottom: 0;
}

.planning-kpi-strip article {
    display: grid;
    gap: 3px;
    padding: 10px 13px;
}

.planning-kpi-strip span {
    font-size: 10px;
    letter-spacing: .045em;
    text-transform: uppercase;
}

.planning-kpi-strip strong {
    overflow: hidden;
    font-size: 17px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.budget-month-section {
    margin-top: 0;
}

.budget-section-heading {
    margin-bottom: var(--space-2);
}

.budget-section-heading p {
    margin-top: 2px;
    font-size: 11px;
}

.budget-table-panel {
    overflow-x: auto;
}

.budget-table {
    min-width: 820px;
    table-layout: fixed;
}

.budget-table th,
.budget-table td {
    padding: 6px 9px;
}

.budget-table th:nth-child(1) { width: 25%; }
.budget-table th:nth-child(2) { width: 11%; }
.budget-table th:nth-child(3) { width: 25%; }
.budget-table th:nth-child(4) { width: 15%; }
.budget-table th:nth-child(5) { width: 15%; }
.budget-table th:nth-child(6) { width: 74px; }

.budget-category-cell strong {
    display: block;
    overflow: hidden;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.budget-category-cell .progress-track,
.planning-watch-list .progress-track {
    width: 100%;
    height: 3px;
    margin-top: 5px;
}

.budget-row.is-near .progress-track > span,
.planning-watch-list .is-near .progress-track > span {
    background: var(--color-warning);
}

.budget-row.is-over .progress-track > span,
.planning-watch-list .is-over .progress-track > span {
    background: var(--color-negative);
}

.budget-spend-cell span,
.budget-table .money-cell {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.budget-spend-cell small {
    margin-left: 6px;
    color: var(--color-text-muted);
    font-size: 10px;
}

.budget-actions {
    justify-content: flex-end;
}

.budget-annual-section {
    margin-top: var(--section-gap);
    padding: 14px;
    background: rgba(17, 23, 32, .72);
}

.budget-year-navigation {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--space-2);
}

.budget-annual-currencies,
.planning-plan-currencies {
    display: grid;
    gap: var(--space-3);
}

.budget-year-currency h3 {
    margin: 10px 0 7px;
    color: var(--color-text-muted);
    font-size: 10px;
    letter-spacing: .08em;
}

.budget-year-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.budget-year-grid li {
    display: grid;
    min-width: 0;
    gap: 5px;
    border: 1px solid rgba(37, 48, 61, .78);
    border-radius: var(--radius-sm);
    padding: 7px 8px;
    background: rgba(255, 255, 255, .012);
}

.budget-year-grid li.is-selected {
    border-color: rgba(32, 214, 199, .28);
    background: var(--color-primary-soft);
}

.budget-year-grid li > span {
    color: var(--color-text-secondary);
    font-size: 11px;
    font-weight: 750;
}

.budget-year-grid li > div {
    display: flex;
    min-width: 0;
    align-items: baseline;
    justify-content: space-between;
    gap: 5px;
}

.budget-year-grid small {
    overflow: hidden;
    color: var(--color-text-muted);
    font-size: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.budget-year-grid strong {
    overflow: hidden;
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.budget-form-panel {
    width: min(100%, 820px) !important;
}

.budget-form-panel .form-heading {
    margin-bottom: var(--space-4);
}

.budget-form-panel .form-error {
    margin-bottom: var(--space-3);
}

.budget-form .budget-temporal-fields {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: minmax(140px, 190px) minmax(0, 1fr);
    align-items: center;
    gap: 9px 14px;
}

.budget-temporal-fields > label {
    grid-column: 1;
}

.budget-temporal-fields > input {
    width: min(100%, 260px);
    grid-column: 2;
}

.planning-plan-panel {
    margin-top: 0;
    padding: var(--space-4);
}

.planning-plan-panel .section-heading,
.planning-watch-panel .section-heading,
.planning-goals-panel .section-heading,
.planning-forecast-panel .section-heading {
    margin-bottom: var(--space-3);
}

.planning-plan-currency + .planning-plan-currency {
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-3);
}

.planning-plan-progress {
    height: 6px;
    margin-top: var(--space-2);
    overflow: hidden;
    border-radius: 999px;
    background: var(--color-surface-hover);
}

.planning-plan-progress > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--color-primary);
}

.planning-plan-progress.is-over > span {
    background: var(--color-negative);
}

.planning-progress-copy {
    margin: 4px 0 0;
    color: var(--color-text-muted);
    font-size: 10px;
    text-align: right;
}

.planning-watch-panel {
    padding: var(--space-4);
}

.planning-watch-list,
.planning-goal-list,
.planning-concept-list {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.planning-watch-list li {
    display: grid;
    gap: 4px;
    border-top: 1px solid var(--color-border);
    padding: 8px 0;
}

.planning-watch-list li:first-child,
.planning-goal-list li:first-child,
.planning-concept-list li:first-child {
    border-top: 0;
    padding-top: 0;
}

.planning-watch-list li:last-child,
.planning-goal-list li:last-child,
.planning-concept-list li:last-child {
    padding-bottom: 0;
}

.planning-watch-heading,
.planning-watch-meta,
.planning-goal-heading,
.planning-concept-list li {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.planning-watch-heading strong {
    overflow: hidden;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.planning-watch-heading > span {
    flex: 0 0 auto;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.planning-watch-meta > span:last-child {
    color: var(--color-text-muted);
    font-size: 10px;
}

.planning-dashboard-lower {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
    margin-top: var(--section-gap);
}

.planning-dashboard-lower > .report-section {
    margin-top: 0;
    padding: var(--space-4);
}

.planning-goal-list li,
.planning-concept-list li {
    border-top: 1px solid var(--color-border);
    padding: 8px 0;
}

.planning-goal-heading a {
    min-width: 0;
    overflow: hidden;
    color: var(--color-text);
    font-size: 12px;
    font-weight: 750;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.planning-goal-heading strong {
    flex: 0 0 auto;
    font-size: 10px;
}

.planning-goal-list p {
    margin: 2px 0 0;
    color: var(--color-text-secondary);
    font-size: 10px;
    font-variant-numeric: tabular-nums;
}

.planning-goal-list .goal-progress-track {
    height: 4px;
    margin: 6px 0 0;
}

.planning-forecast-totals {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: var(--space-3);
}

.planning-forecast-totals > div {
    display: grid;
    gap: 2px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 7px 8px;
    background: rgba(255, 255, 255, .012);
}

.planning-forecast-totals span {
    color: var(--color-text-muted);
    font-size: 9px;
}

.planning-forecast-totals strong {
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.planning-concept-count {
    margin: 0 0 var(--space-2);
    color: var(--color-text-secondary);
    font-size: 11px;
}

.planning-concept-list li > div {
    display: grid;
    min-width: 0;
    gap: 1px;
}

.planning-concept-list strong {
    overflow: hidden;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.planning-concept-list li > div > span {
    color: var(--color-text-muted);
    font-size: 9px;
}

.planning-concept-list li > span {
    flex: 0 0 auto;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 1000px) {
    .budget-year-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .budget-period-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .budget-form .budget-temporal-fields {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .budget-temporal-fields > label,
    .budget-temporal-fields > input {
        width: 100%;
        grid-column: 1;
    }

    .budget-table-panel {
        overflow: visible;
        border: 0;
        background: transparent;
    }

    .budget-table,
    .budget-table tbody {
        display: block;
        min-width: 0;
    }

    .budget-table thead {
        display: none;
    }

    .budget-table tbody {
        display: grid;
        gap: var(--space-2);
    }

    .budget-table tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px 12px;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        padding: 10px 11px;
        background: var(--color-surface);
    }

    .budget-table-panel .budget-table td {
        display: flex;
        min-width: 0;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-2);
        border: 0;
        padding: 0;
    }

    .budget-table td::before {
        flex: 0 0 auto;
        color: var(--color-text-muted);
        content: attr(data-label);
        font-size: 9px;
        font-weight: 800;
        letter-spacing: .055em;
        text-transform: uppercase;
    }

    .budget-table .budget-category-cell,
    .budget-table .budget-spend-cell,
    .budget-table .actions-cell {
        grid-column: 1 / -1;
    }

    .budget-table .budget-category-cell {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .budget-table .budget-category-cell::before,
    .budget-table .actions-cell::before {
        display: none;
    }

    .budget-table .actions-cell {
        justify-content: flex-end;
    }

    .budget-table .budget-spend-cell {
        justify-content: flex-start;
    }

    .budget-year-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .planning-dashboard-lower {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .planning-kpi-strip {
        grid-template-columns: 1fr;
    }

    .planning-kpi-strip article {
        border-top: 1px solid var(--color-border);
        border-left: 0;
    }

    .planning-kpi-strip article:first-child {
        border-top: 0;
    }

    .budget-year-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .planning-watch-heading,
    .planning-watch-meta {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
    }

    .planning-forecast-totals {
        grid-template-columns: 1fr;
    }
}