/* Legacy component styles (token definitions moved to tokens.css). Migrated per-page in later phases. */

html,
body {
    min-height: 100%;
    background:
        radial-gradient(circle at top right, var(--bg-radial-1), transparent 25%),
        radial-gradient(circle at 18% 18%, var(--bg-radial-2), transparent 18%),
        radial-gradient(circle at bottom left, var(--bg-radial-3), transparent 20%),
        linear-gradient(180deg, var(--bg-page-start) 0%, var(--bg-page-end) 100%);
    color: var(--text);
}

body {
    font-family: var(--font-sans);
    transition: background .24s ease, color .24s ease;
}

*,
*::before,
*::after {
    transition:
        background-color .2s ease,
        border-color .2s ease,
        color .2s ease,
        box-shadow .2s ease;
}

::selection {
    background: rgba(63, 114, 255, .22);
    color: var(--text-strong);
}

.sidebar-backdrop {
    background: var(--overlay-soft);
}

.sidebar {
    border-right-color: var(--line);
    background: var(--sidebar-bg);
    box-shadow: inset -1px 0 0 rgba(255,255,255,.02);
}

.brand-mark {
    background: var(--surface-raised), var(--bg-elevated);
    border-color: color-mix(in srgb, var(--brand-2) 24%, var(--line));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.18),
        0 10px 22px rgba(0,0,0,.12);
}

.brand-mark::before {
    border-color: color-mix(in srgb, var(--accent-green) 18%, transparent);
    background: linear-gradient(180deg, color-mix(in srgb, var(--brand-2) 18%, transparent), transparent);
}

.brand-block small,
.eyebrow,
.recent-item small,
.recent-list__meta,
.page-header-card p,
.kpi-card span,
.kpi-card small,
.nav-group__title,
.module-row__content small,
.module-row__subvalue,
.table-meta,
.list-summary,
.listview-panel__header p,
.category-preview-card__content span,
.loan-due-meta span,
.loan-detail-overview__hero p,
.loan-detail-kpis span,
.password-panel__eyebrow,
.auth-card-header p,
.auth-story p,
.auth-metrics span,
.toast-card__content span,
.toast-card__close,
.modal-shell__close,
.filter-group__title,
.entry-static {
    color: var(--muted);
}

.sidebar-intro {
    background: linear-gradient(180deg, color-mix(in srgb, var(--brand-2) 18%, transparent), var(--panel-soft));
    border-color: var(--line);
}

.sidebar-intro p,
.list-summary strong,
.listview-panel__header h2,
.listview-panel__header h3,
.panel-card h3,
.topbar-context__copy strong,
.page-header-card h1,
.auth-card h1,
.auth-card-header h2,
.auth-story h1 {
    color: var(--text-strong);
}

.nav-link-with-icon {
    color: var(--text);
}

.nav-link-with-icon:hover {
    background: var(--hover-fill-soft);
    border-color: color-mix(in srgb, var(--brand) 18%, var(--line));
}

.nav-link-with-icon:active,
.mobile-layout__menu-link:active,
.mobile-bottom-nav__item:active {
    transform: translateY(1px);
    background: color-mix(in srgb, var(--brand-2) 14%, var(--panel-soft));
    border-color: color-mix(in srgb, var(--brand) 26%, var(--line));
}

.nav-link-with-icon.active,
.dashboard-session-nav__item.active,
.invoice-list-item--active {
    background: var(--surface-selected);
    border-color: var(--line-stronger);
    color: var(--text-strong);
}

.nav-link-with-icon--pending,
.mobile-layout__menu-link--pending {
    background: color-mix(in srgb, var(--brand-2) 14%, var(--panel-soft));
    border-color: color-mix(in srgb, var(--brand) 30%, var(--line));
    color: var(--text-strong);
}

.navigation-transition-overlay {
    position: sticky;
    top: .75rem;
    z-index: 20;
    margin: 0 0 .75rem;
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .52rem .8rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--brand) 25%, var(--line));
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--brand-2) 12%, transparent), transparent 60%),
        color-mix(in srgb, var(--panel) 88%, transparent);
    color: var(--text-strong);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--brand-2) 15%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    pointer-events: none;
    animation: nav-overlay-fade-in .18s ease;
}

.navigation-transition-overlay--mobile {
    top: .4rem;
    margin: 0 0 .6rem;
}

.navigation-transition-overlay__indicator {
    width: .9rem;
    height: .9rem;
    border-radius: 999px;
    border: 2px solid color-mix(in srgb, var(--brand) 45%, transparent);
    border-top-color: var(--brand-2);
    animation: nav-overlay-spin .75s linear infinite;
}

@keyframes nav-overlay-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes nav-overlay-fade-in {
    from {
        opacity: 0;
        transform: translateY(-3px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.page-body > :not(.navigation-transition-overlay) {
    transition: opacity .2s ease, filter .2s ease, transform .2s ease;
}

.page-body.page-body--navigating > :not(.navigation-transition-overlay) {
    opacity: .58;
    filter: saturate(.92);
    transform: translateY(1px);
}

.invoice-list-item:hover {
    border-color: color-mix(in srgb, var(--brand) 24%, var(--line));
}

html[data-theme="dark"] .invoice-list-item:hover {
    box-shadow: 0 16px 30px rgba(0, 0, 0, .24);
}

html[data-theme="dark"] .invoice-list-item--active {
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--brand-2) 16%, transparent), transparent 60%),
        var(--surface-soft),
        var(--panel);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        0 0 0 1px color-mix(in srgb, var(--brand) 14%, transparent),
        0 18px 34px rgba(0, 0, 0, .28);
}

.topbar,
.hero-panel,
.page-header-card,
.panel-card,
.auth-card,
.listview-header,
.listview-panel {
    border-color: var(--line);
    background: var(--surface-raised), var(--panel);
    box-shadow: var(--shadow);
}

.hero-panel,
.listview-header,
.auth-story {
    background: var(--surface-brand), var(--panel);
}

.listview-header--toolbarless.listview-header--with-center.listview-header--with-aside {
    background: var(--surface-raised), var(--panel);
}

.topbar {
    background: var(--header-bg), var(--panel);
}

.entry-mobile-card {
    background: var(--surface-raised), var(--panel);
    box-shadow: var(--shadow-soft);
}

.entry-mobile-card__actions {
    border-top: 1px solid var(--line-soft);
    padding-top: .9rem;
}

html[data-theme="dark"] .entry-filter-totals__card {
    border-color: var(--line);
    background: var(--surface-soft), rgba(10, 19, 33, .92);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        0 14px 30px rgba(0,0,0,.18);
}

html[data-theme="dark"] .entry-filter-totals__card span {
    color: var(--muted-strong);
}

html[data-theme="dark"] .entry-filter-totals__card--income {
    border-color: color-mix(in srgb, var(--positive) 28%, var(--line));
}

html[data-theme="dark"] .entry-filter-totals__card--income strong {
    color: color-mix(in srgb, var(--positive) 88%, white);
}

html[data-theme="dark"] .entry-filter-totals__card--expense {
    border-color: color-mix(in srgb, var(--negative) 28%, var(--line));
}

html[data-theme="dark"] .entry-filter-totals__card--expense strong {
    color: color-mix(in srgb, var(--negative) 90%, white);
}

html[data-theme="dark"] .entry-list-summary {
    border-color: color-mix(in srgb, var(--brand) 16%, var(--line));
    background:
        linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)),
        rgba(18, 28, 45, .88);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035),
        0 8px 18px rgba(0,0,0,.14);
}

html[data-theme="dark"] .entry-filter-actions .entry-list-summary {
    background:
        linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015)),
        rgba(24, 35, 54, .96);
    border-color: rgba(255,255,255,.12);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025),
        0 6px 14px rgba(0,0,0,.14);
}

html[data-theme="dark"] .entry-list-summary strong {
    color: color-mix(in srgb, var(--text-strong) 92%, var(--brand) 8%);
}

html[data-theme="dark"] .entry-list-summary span {
    color: color-mix(in srgb, var(--muted-strong) 82%, var(--muted));
}

html[data-theme="dark"] .entry-filter-actions .entry-list-summary strong {
    color: #f3f7fd;
}

html[data-theme="dark"] .entry-filter-actions .entry-list-summary span {
    color: #95a8c2;
}

html[data-theme="light"] .entry-type-card__icon {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.7),
        0 10px 20px rgba(15, 38, 66, .08);
}

html[data-theme="light"] .entry-type-card--income .entry-type-card__icon {
    background: linear-gradient(180deg, rgba(31, 155, 85, .22), rgba(31, 155, 85, .12));
    color: #15803d;
}

html[data-theme="light"] .entry-type-card--expense .entry-type-card__icon {
    background: linear-gradient(180deg, rgba(37, 99, 235, .2), rgba(37, 99, 235, .1));
    color: #1d4ed8;
}

.budget-dashboard-card__drag {
    border: 1px solid var(--line-soft);
    background: var(--panel-soft);
}

.dashboard-session-nav__item,
.kpi-card,
.invoice-card,
.recent-item,
.toast-inline,
.invoice-list-item,
.detail-card,
.budget-dashboard-card,
.account-cashflow-card,
.loan-detail-kpis,
.color-picker,
.icon-picker,
.category-preview-card,
.workspace-preview-card,
.entry-modal__intro,
.entry-modal__hint,
.entry-modal__validation,
.entry-field--muted .entry-static,
.entry-type-card,
.form-hint-box {
    border-color: var(--line);
    background: var(--surface-soft), var(--panel-soft);
    color: var(--text);
}

.dashboard-session-nav__item:hover,
.budget-dashboard-card--interactive:hover,
.action-icon-button:hover,
.color-picker:hover,
.icon-picker:hover {
    border-color: var(--line-stronger);
}

.recent-list__item:hover {
    border-bottom-color: var(--line-stronger);
}

.recent-list__title {
    color: var(--text-strong);
}

.color-picker,
.icon-picker {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        0 8px 18px rgba(3, 10, 20, .08);
}

.color-picker--active,
.icon-picker--active {
    border-color: color-mix(in srgb, var(--brand-2) 42%, var(--brand));
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--brand-2) 18%, transparent),
        0 12px 28px rgba(18, 32, 56, .18);
}

.icon-picker .app-icon {
    color: var(--text-strong);
}

.color-picker--disabled {
    cursor: not-allowed;
    opacity: .35;
    filter: grayscale(55%);
}

.color-picker--disabled:hover {
    border-color: var(--line);
}

.category-preview-card {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 14px 28px rgba(8, 20, 36, .08);
}

html[data-theme="dark"] .color-picker {
    background:
        linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.02)),
        linear-gradient(180deg, rgba(8, 16, 28, .10), rgba(8, 16, 28, 0)),
        var(--picker-color);
    border-color: color-mix(in srgb, var(--picker-color) 22%, var(--line));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 10px 20px rgba(3, 10, 20, .14);
}

html[data-theme="dark"] .color-picker:hover {
    border-color: color-mix(in srgb, var(--picker-color) 36%, var(--line-stronger));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10),
        0 14px 24px rgba(3, 10, 20, .18);
}

html[data-theme="dark"] .color-picker--active {
    border-color: color-mix(in srgb, var(--picker-color) 58%, white);
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--picker-color) 22%, transparent),
        0 14px 28px rgba(8, 20, 36, .22);
}

html[data-theme="dark"] .workspace-preview-card {
    border-color: color-mix(in srgb, var(--workspace-preview-color) 22%, var(--line));
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--workspace-preview-color) 30%, transparent), rgba(255,255,255,.015)),
        linear-gradient(180deg, rgba(16, 24, 38, .92), rgba(11, 18, 31, .92));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        0 14px 28px rgba(8, 20, 36, .10);
}

html[data-theme="dark"] .workspace-preview-card__icon {
    background: color-mix(in srgb, var(--workspace-preview-color) 38%, rgba(255,255,255,.03));
    color: white;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

html[data-theme="light"] .color-picker,
html[data-theme="light"] .icon-picker {
    border-color: rgba(38, 73, 122, .14);
    background:
        linear-gradient(180deg, rgba(255,255,255,.98), rgba(241,246,252,.94));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.92),
        0 10px 24px rgba(28, 54, 86, .08);
}

html[data-theme="light"] .color-picker {
    background:
        linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.02)),
        linear-gradient(180deg, rgba(226, 235, 247, .68), rgba(244, 248, 253, .18)),
        var(--picker-color);
}

html[data-theme="light"] .color-picker::before {
    background:
        radial-gradient(circle at 24% 22%, rgba(255,255,255,.42), transparent 44%),
        linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0));
}

html[data-theme="light"] .color-picker:hover,
html[data-theme="light"] .icon-picker:hover {
    border-color: rgba(37, 99, 235, .28);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.96),
        0 14px 30px rgba(28, 54, 86, .12);
}

html[data-theme="light"] .color-picker--active,
html[data-theme="light"] .icon-picker--active {
    border-color: rgba(37, 99, 235, .42);
    box-shadow:
        0 0 0 3px rgba(37, 99, 235, .12),
        0 16px 32px rgba(37, 99, 235, .14);
}

html[data-theme="light"] .color-picker--active::after {
    border-color: rgba(255,255,255,.92);
    box-shadow: inset 0 0 0 1px rgba(18, 40, 68, .08);
}

html[data-theme="light"] .icon-picker .app-icon {
    color: #1d2f47;
}

html[data-theme="light"] .category-preview-card {
    border-color: rgba(38, 73, 122, .12);
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--category-preview-color) 18%, transparent), rgba(255,255,255,.86)),
        linear-gradient(180deg, rgba(255,255,255,.98), rgba(243,247,252,.94));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.95),
        0 16px 30px rgba(26, 48, 76, .08);
}

html[data-theme="light"] .category-preview-card__icon {
    background: color-mix(in srgb, var(--category-preview-color) 20%, white);
    color: #17304a;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.78);
}

.listview-search,
.finance-input,
.form-control,
.form-select,
.register-form-pane .form-control,
.register-form-pane .finance-input,
.entry-type-card,
.segmented-choice__item {
    border-color: var(--line-strong);
    background: var(--input-bg);
    color: var(--text);
}

.listview-search__icon,
.field-help-tooltip,
.field-label-with-help label,
.stack-form label,
.field-stack label {
    color: var(--muted-strong);
}

.listview-search__input,
.finance-input,
.form-control,
.form-select,
.listview-search__input:focus,
.finance-input:focus,
.form-control:focus,
.form-select:focus {
    color: var(--text);
}

.finance-input::placeholder,
.form-control::placeholder,
.listview-search__input::placeholder {
    color: var(--input-placeholder);
}

.finance-input:focus,
.form-control:focus,
.form-select:focus,
.listview-search:focus-within {
    background: var(--input-bg-strong);
    border-color: color-mix(in srgb, var(--brand) 46%, var(--brand-2));
    box-shadow: var(--focus-shadow);
}

h1[tabindex="-1"]:focus-visible,
.budget-dashboard-card--interactive:focus-visible,
.user-menu__trigger:focus-visible,
.user-menu__action:focus-visible,
.theme-choice:focus-visible,
.nav-link-with-icon:focus-visible,
.btn:focus-visible,
.action-icon-button:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.finance-input:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 3px;
}

.btn.btn-primary {
    border: 0;
    background: linear-gradient(135deg, var(--brand-2), var(--brand));
    color: var(--brand-ink);
    box-shadow: 0 12px 30px color-mix(in srgb, var(--brand-2) 34%, transparent);
}

.btn.btn-primary:hover {
    color: var(--brand-ink);
    background: linear-gradient(135deg, color-mix(in srgb, var(--brand-2) 86%, white), color-mix(in srgb, var(--brand) 90%, white));
    box-shadow: 0 16px 34px color-mix(in srgb, var(--brand-2) 38%, transparent);
}

.btn.btn-light {
    background: var(--bg-elevated);
    color: var(--text-strong);
    border: 1px solid var(--line);
}

.btn.btn-light:hover {
    background: color-mix(in srgb, var(--bg-elevated) 82%, white);
    color: var(--text-strong);
}

.btn.btn-outline-light,
.btn.btn-ghost,
.action-icon-button,
.toast-card__close,
.modal-shell__close,
.topbar-toggle {
    border-color: var(--line);
    background: var(--panel-soft);
    color: var(--text);
}

.btn.btn-outline-light:hover,
.btn.btn-ghost:hover,
.toast-card__close:hover,
.modal-shell__close:hover,
.topbar-toggle:hover,
.action-icon-button:hover {
    background: var(--hover-fill);
    color: var(--text-strong);
}

.btn.btn-danger,
.action-icon-button--danger {
    color: var(--danger-text);
    border-color: var(--danger-line);
    background: var(--danger-bg);
}

.action-icon-button--positive {
    color: color-mix(in srgb, var(--positive) 84%, white);
    border-color: color-mix(in srgb, var(--positive) 26%, transparent);
    background: color-mix(in srgb, var(--positive) 12%, transparent);
}

.payment-chip,
.status-badge,
.password-panel__status {
    border-color: var(--line);
    background: var(--panel-soft);
    color: var(--muted-strong);
}

/* Tone-specific fills for StatusBadge (Components/Shared/StatusBadge.razor renders
   class="status-badge @Tone"). Without these, every badge across the app (Contas, Cartões,
   Categorias, Pessoas, etc.) fell back to the flat gray base above, because the old ".positive"/
   ".negative" text-color utilities in app.css have the same specificity as ".status-badge" and
   lose the cascade depending on stylesheet load order. Compound class selectors here always win. */
.status-badge.positive {
    background: color-mix(in srgb, var(--positive) 16%, transparent);
    border-color: color-mix(in srgb, var(--positive) 32%, var(--line));
    color: color-mix(in srgb, var(--positive) 82%, var(--text-strong));
}

.status-badge.negative {
    background: color-mix(in srgb, var(--negative) 14%, transparent);
    border-color: color-mix(in srgb, var(--negative) 32%, var(--line));
    color: color-mix(in srgb, var(--negative) 82%, var(--text-strong));
}

.status-badge.warning {
    background: color-mix(in srgb, var(--warning) 18%, transparent);
    border-color: color-mix(in srgb, var(--warning) 34%, var(--line));
    color: color-mix(in srgb, var(--warning) 84%, var(--text-strong));
}

.status-badge.brand {
    background: color-mix(in srgb, var(--brand) 14%, transparent);
    border-color: color-mix(in srgb, var(--brand) 32%, var(--line));
    color: color-mix(in srgb, var(--brand) 82%, var(--text-strong));
}

.status-badge.brand-3 {
    background: color-mix(in srgb, var(--brand-3) 14%, transparent);
    border-color: color-mix(in srgb, var(--brand-3) 32%, var(--line));
    color: color-mix(in srgb, var(--brand-3) 82%, var(--text-strong));
}

.status-badge.purple {
    background: color-mix(in srgb, #7c3aed 14%, transparent);
    border-color: color-mix(in srgb, #7c3aed 32%, var(--line));
    color: color-mix(in srgb, #7c3aed 82%, var(--text-strong));
}

.status-badge.danger {
    background: var(--danger-bg);
    border-color: var(--danger-line);
    color: var(--danger-text);
}

.status-badge.primary {
    background: color-mix(in srgb, var(--brand-2) 14%, transparent);
    border-color: color-mix(in srgb, var(--brand-2) 32%, var(--line));
    color: color-mix(in srgb, var(--brand-2) 82%, var(--text-strong));
}

.card-brand-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: .28rem .72rem;
    font-size: .8rem;
    font-weight: 600;
    border: 1px solid var(--line);
    background: var(--panel-soft);
    color: var(--muted-strong);
    white-space: nowrap;
}

.card-brand-badge--sm {
    padding: .16rem .5rem;
    font-size: .72rem;
}

.card-brand-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    flex: 0 0 auto;
    border-radius: 999px;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .01em;
    line-height: 1;
    border: 1px solid var(--line);
    background: var(--panel-soft);
    color: var(--muted-strong);
}

.card-brand-logo {
    display: inline-block;
    width: 2rem;
    height: 1.9rem;
    flex: 0 0 auto;
    object-fit: contain;
}

.card-brand-frame {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2rem;
    padding: .25rem;
    flex: 0 0 auto;
    border-radius: .5rem;
    border: 1px solid var(--line);
    background: var(--surface-raised), var(--panel-soft);
}

.card-brand-frame .card-brand-logo {
    width: 100%;
    height: 100%;
}

.card-brand-frame .card-brand-icon {
    width: 1.5rem;
    height: 1.5rem;
    font-size: .55rem;
    border-width: 0;
}

.card-brand-badge--visa,
.card-brand-icon--visa {
    border-color: color-mix(in srgb, #1a1f71 30%, transparent);
    background: color-mix(in srgb, #1a1f71 16%, transparent);
    color: color-mix(in srgb, #1a1f71 84%, white);
}

.card-brand-badge--mastercard,
.card-brand-icon--mastercard {
    border-color: color-mix(in srgb, #eb001b 30%, transparent);
    background: color-mix(in srgb, #eb001b 14%, transparent);
    color: color-mix(in srgb, #eb001b 80%, white);
}

.card-brand-badge--elo,
.card-brand-icon--elo {
    border-color: color-mix(in srgb, #ffcb05 40%, transparent);
    background: color-mix(in srgb, #ffcb05 20%, transparent);
    color: color-mix(in srgb, #000000 78%, #ffcb05);
}

.card-brand-badge--amex,
.card-brand-icon--amex {
    border-color: color-mix(in srgb, #2e77bc 30%, transparent);
    background: color-mix(in srgb, #2e77bc 16%, transparent);
    color: color-mix(in srgb, #2e77bc 84%, white);
}

.card-brand-badge--hipercard,
.card-brand-icon--hipercard {
    border-color: color-mix(in srgb, #b2181f 30%, transparent);
    background: color-mix(in srgb, #b2181f 14%, transparent);
    color: color-mix(in srgb, #b2181f 80%, white);
}

.card-brand-badge--diners,
.card-brand-icon--diners {
    border-color: color-mix(in srgb, #0079be 30%, transparent);
    background: color-mix(in srgb, #0079be 16%, transparent);
    color: color-mix(in srgb, #0079be 82%, white);
}

.card-brand-badge--discover,
.card-brand-icon--discover {
    border-color: color-mix(in srgb, #ff6000 30%, transparent);
    background: color-mix(in srgb, #ff6000 16%, transparent);
    color: color-mix(in srgb, #ff6000 78%, black);
}

.card-brand-badge--jcb,
.card-brand-icon--jcb {
    border-color: color-mix(in srgb, #0e6937 30%, transparent);
    background: color-mix(in srgb, #0e6937 16%, transparent);
    color: color-mix(in srgb, #0e6937 82%, white);
}

.card-brand-badge--aura,
.card-brand-icon--aura {
    border-color: color-mix(in srgb, #6d28d9 30%, transparent);
    background: color-mix(in srgb, #6d28d9 16%, transparent);
    color: color-mix(in srgb, #6d28d9 82%, white);
}

.card-brand-badge--sorocred,
.card-brand-icon--sorocred {
    border-color: color-mix(in srgb, #0f766e 30%, transparent);
    background: color-mix(in srgb, #0f766e 16%, transparent);
    color: color-mix(in srgb, #0f766e 82%, white);
}

.card-brand-badge--banescard,
.card-brand-icon--banescard {
    border-color: color-mix(in srgb, #1d4ed8 30%, transparent);
    background: color-mix(in srgb, #1d4ed8 16%, transparent);
    color: color-mix(in srgb, #1d4ed8 82%, white);
}

.card-brand-badge--cabal,
.card-brand-icon--cabal {
    border-color: color-mix(in srgb, #ea580c 30%, transparent);
    background: color-mix(in srgb, #ea580c 16%, transparent);
    color: color-mix(in srgb, #ea580c 78%, white);
}

.card-brand-badge--other,
.card-brand-icon--other {
    border-color: var(--line);
    background: var(--panel-soft);
    color: var(--muted-strong);
}

.password-panel__status.is-ready,
.toast-inline--success,
.toast-card--success .toast-card__icon {
    border-color: color-mix(in srgb, var(--positive) 30%, transparent);
    background: color-mix(in srgb, var(--positive) 18%, transparent);
    color: var(--positive);
}

.toast-inline--error,
.toast-card--error .toast-card__icon {
    border-color: color-mix(in srgb, var(--negative) 30%, transparent);
    background: color-mix(in srgb, var(--negative) 16%, transparent);
    color: var(--negative);
}

.toast-card--warning .toast-card__icon,
.confirm-dialog__warning {
    border-color: color-mix(in srgb, var(--warning) 28%, transparent);
    background: color-mix(in srgb, var(--warning) 16%, transparent);
    color: var(--warning);
}

.toast-card,
.modal-shell,
.filter-drawer {
    border-color: var(--line);
    background: var(--surface-raised), var(--panel-strong);
    box-shadow: var(--shadow-soft);
}

.overlay-backdrop {
    background: var(--overlay);
}

.data-table th,
.data-table td,
.metric-row,
.module-row,
.notification-inline,
.listview-bulkbar,
.modal-shell__header,
.modal-shell__footer,
.filter-drawer__header,
.filter-drawer__footer,
.account-cashflow-card__details,
.password-criteria__item,
.register-form-pane,
.table-shell .data-table tr {
    border-color: var(--line-soft);
}

.modal-shell__header {
    background: var(--surface-raised), var(--panel-strong);
}

.listview-table tbody tr:hover {
    background: var(--hover-fill-soft);
}

.budget-progress-shell__track {
    background: color-mix(in srgb, var(--text) 10%, transparent);
}

.budget-progress-shell__fill {
    background: color-mix(in srgb, var(--brand) 28%, transparent);
}

.table-shell,
.listview-panel__content,
.modal-shell__body,
.filter-drawer__body {
    color: var(--text);
}

html[data-theme="light"] .register-surface {
    border-color: rgba(20, 52, 90, .1);
    background:
        linear-gradient(180deg, rgba(255,255,255,.98), rgba(244,248,253,.94)),
        rgba(255,255,255,.92);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.88),
        0 18px 42px rgba(17, 44, 78, .08);
}

html[data-theme="light"] .register-form-pane {
    border-right-color: rgba(20, 52, 90, .08);
}

html[data-theme="light"] .register-security-pane {
    background:
        linear-gradient(180deg, rgba(247,250,255,.94), rgba(240,246,252,.92));
}

html[data-theme="light"] .password-criteria__item {
    border-bottom-color: rgba(20, 52, 90, .08);
}

html[data-theme="light"] .password-confirmation {
    background: rgba(247, 250, 255, .9);
    border-color: rgba(20, 52, 90, .08);
}

.toast-stack {
    z-index: 1200;
}

.loading-block,
.empty-shell,
.form-message {
    background: var(--surface-soft), var(--panel-soft);
    border-color: var(--line);
    color: var(--text);
}

.spinner-border.text-light {
    color: var(--brand) !important;
}

.topbar-actions {
    gap: .75rem;
}

.user-avatar {
    border: 1px solid color-mix(in srgb, var(--line-strong) 42%, var(--line));
    background: linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated) 92%, white), color-mix(in srgb, var(--panel-soft) 82%, transparent));
    color: color-mix(in srgb, var(--text-strong) 88%, var(--brand-2));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.18),
        0 8px 18px rgba(12, 31, 57, .08);
}

.user-menu__trigger,
.user-menu__panel,
.settings-card,
.theme-choice,
.settings-future-grid > div {
    background: var(--surface-raised), var(--panel);
    box-shadow: var(--shadow-soft);
}

.user-menu__trigger:hover,
.user-menu__action:hover,
.theme-choice:hover {
    background: linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated) 96%, white), color-mix(in srgb, var(--panel-soft) 82%, transparent));
}

.user-menu__panel {
    box-shadow: var(--shadow);
}

.user-menu__action {
    color: var(--text);
}

.user-menu__trigger {
    border-color: color-mix(in srgb, var(--line-strong) 36%, var(--line));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.2),
        0 12px 28px rgba(12, 31, 57, .08);
}

.user-menu__chevron {
    color: var(--muted-strong);
}

.user-menu__action--danger {
    color: var(--negative);
}

.user-menu__action--danger:hover {
    background: var(--danger-bg);
}

.user-menu__theme {
    font-weight: 600;
}

.settings-upload-button.btn.btn-primary {
    box-shadow: 0 18px 36px color-mix(in srgb, var(--brand-2) 18%, transparent);
}

.theme-choice__icon {
    background: var(--surface-brand-strong);
    color: var(--text-strong);
}

.theme-choice.is-active {
    border-color: var(--line-stronger);
    background: var(--surface-brand), var(--panel);
    box-shadow: 0 20px 42px color-mix(in srgb, var(--brand-2) 18%, transparent);
}

.topbar-context__copy strong,
.nav-link-with-icon,
.btn,
.form-control,
.form-select,
.finance-input {
    -webkit-font-smoothing: antialiased;
}

@media (max-width: 980px) {
    .sidebar {
        box-shadow: 0 24px 64px color-mix(in srgb, var(--bg) 62%, transparent);
    }
}