:root {
    --app-bg: #ecfff5;
    --app-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(247, 252, 249, 0.92));
    --app-surface-strong: rgba(255, 255, 255, 0.98);
    --app-border: rgba(18, 71, 54, 0.12);
    --app-text: #142b22;
    --app-muted: #5d746a;
    --app-accent: #00c96b;
    --app-accent-soft: #d4ffe8;
    --app-accent-dark: #009e57;
    --app-shadow: 0 20px 46px rgba(18, 59, 44, 0.08);
    --app-shadow-soft: 0 10px 24px rgba(18, 59, 44, 0.05);
    --app-warm-soft: #fff2e8;
    --app-warm-text: #9a5a2f;
}

body.app-shell {
    min-height: 100vh;
    color: var(--app-text);
    font-family: 'Manrope', sans-serif;
    background:
        radial-gradient(circle at top left, rgba(0, 201, 107, 0.22), transparent 24%),
        radial-gradient(circle at 85% 12%, rgba(110, 255, 178, 0.20), transparent 18%),
        radial-gradient(circle at bottom right, rgba(0, 181, 97, 0.12), transparent 24%),
        linear-gradient(180deg, #fcfffd 0%, #effff6 45%, #e8fff1 100%);
}

body.app-shell::selection {
    background: rgba(0, 201, 107, 0.22);
}

.app-navbar {
    backdrop-filter: blur(16px);
    background: rgba(252, 255, 253, 0.74);
    box-shadow: 0 10px 28px rgba(17, 53, 40, 0.05);
}

.navbar-brand {
    font-size: 0.93rem;
}

.app-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.app-nav__link {
    display: inline-flex;
    align-items: center;
    padding: 0.16rem 0.48rem;
    border: 1px solid transparent;
    border-radius: 9px;
    color: var(--app-muted);
    font-size: 0.73rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
}

.app-nav__link:hover {
    color: var(--app-accent-dark);
    background: rgba(212, 255, 232, 0.88);
}

.app-nav__link.is-active {
    color: var(--app-accent-dark);
    border-color: rgba(0, 158, 87, 0.18);
    background: linear-gradient(180deg, rgba(232, 255, 243, 0.98), rgba(212, 255, 232, 0.94));
}

.quick-calc {
    position: relative;
}

.quick-calc__trigger {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    min-width: 10.5rem;
    padding: 0.34rem 0.58rem;
    border: 1px solid rgba(0, 158, 87, 0.16);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.84);
    color: var(--app-muted);
    font-size: 0.73rem;
    line-height: 1.2;
    text-align: left;
}

.quick-calc__trigger:hover,
.quick-calc__trigger.is-open {
    border-color: rgba(0, 158, 87, 0.28);
    background: rgba(246, 252, 248, 0.96);
}

.quick-calc__placeholder {
    font-weight: 600;
}

.quick-calc__hint {
    color: var(--app-accent-dark);
    font-size: 0.66rem;
    font-weight: 700;
    white-space: nowrap;
}

.quick-calc__panel {
    position: absolute;
    top: calc(100% + 0.35rem);
    right: 0;
    z-index: 1040;
    width: min(19rem, calc(100vw - 2rem));
    padding: 0.72rem 0.78rem;
    border: 1px solid var(--app-border);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: var(--app-shadow);
}

.quick-calc__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.45rem;
}

.quick-calc__input {
    margin-bottom: 0.45rem;
}

.quick-calc__result {
    min-height: 34px;
    display: flex;
    align-items: center;
    padding: 0.36rem 0.56rem;
    border: 1px solid rgba(0, 158, 87, 0.12);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(245, 251, 247, 0.94), rgba(226, 255, 239, 0.88));
    color: var(--app-text);
    font-size: 0.82rem;
    font-weight: 700;
}

.quick-calc__result.is-muted {
    color: var(--app-muted);
    font-weight: 600;
}

.quick-calc__result.is-error {
    color: #b33b3b;
}

.quick-calc__examples {
    display: flex;
    flex-wrap: wrap;
    gap: 0.28rem;
    margin-top: 0.45rem;
}

.quick-calc__example {
    padding: 0.14rem 0.42rem;
    border: 1px solid rgba(0, 158, 87, 0.12);
    border-radius: 999px;
    background: rgba(246, 252, 248, 0.92);
    color: var(--app-accent-dark);
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.2;
}

.quick-calc__example:hover {
    background: var(--app-accent-soft);
}

.min-vh-75 {
    min-height: 75vh;
}

.login-card {
    display: grid;
    gap: 0.85rem;
}

.login-card__brand,
.content-card,
.stat-card {
    border: 1px solid var(--app-border);
    border-radius: 14px;
    background: var(--app-surface);
    box-shadow: var(--app-shadow);
}

.content-card--tight,
.login-card__brand,
.stat-card {
    padding: 0.85rem 0.95rem;
}

.login-card__eyebrow,
.hero-panel__eyebrow,
.panel-kicker,
.section-label {
    display: inline-block;
    margin-bottom: 0.3rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--app-accent-dark);
    font-family: 'Sora', 'Manrope', sans-serif;
}

.form-control,
.btn,
.card,
.content-card,
.stat-card,
.login-panel {
    border-radius: 10px;
}

.form-control {
    min-height: 34px;
    padding: 0.36rem 0.62rem;
    font-size: 0.87rem;
    color: var(--app-text);
    border-color: rgba(0, 158, 87, 0.16);
    background: rgba(255, 255, 255, 0.78);
}

.compact-control {
    min-height: 34px;
    font-size: 0.86rem;
}

.form-control:focus {
    border-color: rgba(0, 201, 107, 0.42);
    box-shadow: 0 0 0 0.18rem rgba(0, 201, 107, 0.14);
    background: rgba(255, 255, 255, 0.94);
}

.btn {
    font-size: 0.79rem;
    font-weight: 600;
}

.btn-compact {
    min-height: 34px;
    padding: 0.36rem 0.62rem;
    font-size: 0.78rem;
    line-height: 1.15;
    border-radius: 10px;
}

.btn-dark {
    background: linear-gradient(180deg, #00c96b 0%, #009e57 100%);
    border-color: #009e57;
    box-shadow: 0 10px 20px rgba(0, 158, 87, 0.16);
}

.btn-dark:hover,
.btn-dark:focus {
    background: linear-gradient(180deg, #00b863 0%, #00884b 100%);
    border-color: #00884b;
}

.btn-outline-dark {
    color: var(--app-accent-dark);
    border-color: rgba(0, 158, 87, 0.22);
    background: rgba(255, 255, 255, 0.62);
}

.btn-outline-dark:hover,
.btn-outline-dark:focus {
    color: #ffffff;
    background-color: var(--app-accent-dark);
    border-color: var(--app-accent-dark);
}

.hero-panel,
.login-panel {
    border: 1px solid var(--app-border);
    border-radius: 14px;
    background: var(--app-surface-strong);
    box-shadow: var(--app-shadow-soft);
}

.hero-panel {
    padding: 0.95rem;
    gap: 0.8rem;
    margin-bottom: 0.75rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(224, 255, 238, 0.92));
}

.login-panel__body {
    padding: 0.95rem;
}

.auth-card--apple {
    border-color: rgba(15, 23, 42, 0.07);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(249, 251, 253, 0.88));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.96),
        0 24px 48px rgba(15, 23, 42, 0.06),
        0 0 0 1px rgba(255, 255, 255, 0.42);
    backdrop-filter: blur(18px) saturate(120%);
    -webkit-backdrop-filter: blur(18px) saturate(120%);
}

.auth-card__intro {
    display: grid;
    gap: 0.45rem;
}

.auth-card__status {
    margin-top: 0.08rem;
}

.auth-card__form {
    margin-top: 0.1rem;
}

.auth-card__divider {
    height: 1px;
    margin: 0.9rem 0;
    background:
        linear-gradient(90deg, rgba(15, 23, 42, 0), rgba(15, 23, 42, 0.08), rgba(15, 23, 42, 0));
}

.auth-card__divider--soft {
    margin-top: 0.8rem;
    margin-bottom: 0.75rem;
    background:
        linear-gradient(90deg, rgba(15, 23, 42, 0), rgba(15, 23, 42, 0.06), rgba(15, 23, 42, 0));
}

.login-title,
.dashboard-title,
.panel-headline {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.12rem;
    font-family: 'Sora', 'Manrope', sans-serif;
    letter-spacing: -0.02em;
}

.login-subtitle,
.dashboard-subtitle,
.section-copy,
.compact-list__copy,
.panel-subline {
    font-size: 0.81rem;
    color: var(--app-muted);
    line-height: 1.35;
}

.panel-topbar,
.section-head,
.section-head--compact {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.65rem;
}

.section-head--compact {
    margin-bottom: 0.15rem;
}

.section-title {
    font-size: 0.88rem;
    font-weight: 700;
    font-family: 'Sora', 'Manrope', sans-serif;
    letter-spacing: -0.01em;
}

.login-badges,
.dashboard-header-badges,
.dashboard-inline-stats,
.mini-chip-row,
.inline-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.32rem;
}

.pill-badge,
.micro-chip,
.subtle-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.10rem 0.42rem;
    border: 1px solid rgba(0, 158, 87, 0.14);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(240, 255, 247, 0.99), rgba(212, 255, 232, 0.97));
    color: var(--app-accent-dark);
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

.micro-chip--ok,
.subtle-chip.ok {
    background: var(--app-accent-soft);
}

.micro-chip--warn,
.subtle-chip.warn {
    background: linear-gradient(180deg, #fff6ef 0%, var(--app-warm-soft) 100%);
    color: var(--app-warm-text);
    border-color: rgba(154, 90, 47, 0.12);
}

.compact-tabs,
.filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.28rem;
}

.compact-tab,
.filter-pill {
    padding: 0.16rem 0.48rem;
    border: 1px solid rgba(0, 158, 87, 0.14);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.74);
    color: var(--app-muted);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.2;
}

.compact-tab.is-active,
.filter-pill.is-active {
    background: linear-gradient(180deg, rgba(240, 255, 247, 1), rgba(212, 255, 232, 0.97));
    color: var(--app-accent-dark);
    border-color: rgba(0, 158, 87, 0.20);
}

.login-meta,
.settings-meta,
.row-list {
    display: grid;
    gap: 0.4rem;
}

.login-meta__item,
.settings-meta__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 0.45rem 0.58rem;
    border: 1px solid var(--app-border);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(248, 252, 250, 0.96), rgba(226, 255, 239, 0.84));
    font-size: 0.8rem;
}

.login-meta__label,
.settings-meta__label {
    color: var(--app-muted);
}

.login-meta__value,
.settings-meta__value,
.strong {
    font-weight: 700;
    color: var(--app-text);
    text-align: right;
}

.compact-divider {
    margin: 0.75rem 0;
    border-color: rgba(21, 122, 83, 0.08);
}

.compact-note,
.tiny-note,
.mini-hint {
    font-size: 0.74rem;
    color: var(--app-muted);
    line-height: 1.3;
}

.summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.45rem;
}

.summary-box {
    padding: 0.55rem 0.62rem;
    border: 1px solid var(--app-border);
    border-radius: 10px;
    background: rgba(243, 250, 246, 0.65);
}

.summary-box__label {
    margin-bottom: 0.18rem;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--app-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.summary-box__value {
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--app-text);
}

.row-list__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
}

.row-list__item--start {
    align-items: flex-start;
    justify-content: flex-start;
}

.row-list__title,
.compact-list__title {
    font-size: 0.81rem;
    font-weight: 700;
}

.row-list__copy,
.compact-list__copy {
    font-size: 0.78rem;
    color: var(--app-muted);
    line-height: 1.32;
}

.expense-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 0.48rem 0.6rem;
    border: 1px solid var(--app-border);
    border-radius: 10px;
    background: rgba(243, 250, 246, 0.58);
}

.expense-row__main {
    display: grid;
    gap: 0.22rem;
}

.expense-row__side {
    display: grid;
    justify-items: end;
    gap: 0.08rem;
}

.expense-row__amount {
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
}

@media (max-width: 767.98px) {
    .content-card--tight,
    .hero-panel,
    .login-card__brand,
    .stat-card,
    .login-panel__body {
        padding: 0.8rem;
    }

    .panel-topbar,
    .section-head,
    .section-head--compact,
    .row-list__item,
    .expense-row {
        flex-direction: column;
        align-items: flex-start;
    }

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

    .expense-row__side {
        justify-items: start;
    }
}

.content-stack {
    display: grid;
    gap: 0.7rem;
}

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

.empty-inline {
    padding: 0.58rem 0.65rem;
    border: 1px dashed rgba(21, 122, 83, 0.16);
    border-radius: 10px;
    background: rgba(243, 250, 246, 0.52);
    font-size: 0.76rem;
    color: var(--app-muted);
    line-height: 1.35;
}

.month-list,
.movement-list {
    display: grid;
    gap: 0.45rem;
}

.month-link {
    display: grid;
    gap: 0.28rem;
    padding: 0.55rem 0.62rem;
    border: 1px solid var(--app-border);
    border-radius: 10px;
    background: rgba(243, 250, 246, 0.45);
    text-decoration: none;
    color: var(--app-text);
}

.month-link:hover {
    border-color: rgba(21, 122, 83, 0.2);
    background: rgba(223, 243, 234, 0.55);
}

.month-link.is-active {
    border-color: rgba(21, 122, 83, 0.24);
    background: rgba(223, 243, 234, 0.72);
}

.month-link__top,
.month-link__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.month-link__title {
    font-size: 0.8rem;
    font-weight: 700;
}

.month-link__meta {
    font-size: 0.72rem;
    color: var(--app-muted);
}

.subpanel-card {
    padding: 0.6rem 0.65rem;
    border: 1px solid var(--app-border);
    border-radius: 10px;
    background: rgba(243, 250, 246, 0.48);
}

.movement-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--app-border);
    border-radius: 10px;
    background: rgba(243, 250, 246, 0.52);
}

.movement-row__main {
    display: grid;
    gap: 0.24rem;
}

.movement-row__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.32rem;
}

.movement-row__amount {
    display: grid;
    justify-items: end;
    gap: 0.08rem;
}

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

    .month-link__top,
    .month-link__meta,
    .movement-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .movement-row__amount {
        justify-items: start;
    }
}

.panel-topbar--dense {
    gap: 0.45rem;
}

.compact-control--xs {
    min-height: 31px;
    padding: 0.3rem 0.55rem;
    font-size: 0.8rem;
}

.btn-compact--xs {
    min-height: 31px;
    padding: 0.28rem 0.55rem;
    font-size: 0.74rem;
}

.btn-compact--micro {
    min-height: 26px;
    padding: 0.18rem 0.45rem;
    font-size: 0.7rem;
    line-height: 1.1;
}

.inline-actions--tight {
    gap: 0.28rem;
    align-items: center;
}

.content-stack--xs {
    gap: 0.5rem;
}

.compact-panel {
    padding: 0.72rem 0.78rem;
}

.balance-page-head {
    padding-top: 0.72rem;
    padding-bottom: 0.72rem;
}

.stat-pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.32rem;
}

.stat-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.18rem 0.48rem;
    border: 1px solid rgba(21, 122, 83, 0.12);
    border-radius: 999px;
    background: rgba(243, 250, 246, 0.92);
    font-size: 0.72rem;
    color: var(--app-text);
    line-height: 1.2;
}

.stat-pill strong {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--app-muted);
}

.stat-pill--positive {
    color: var(--app-accent-dark);
}

.stat-pill--negative {
    color: #b33b3b;
}

.month-list--tight,
.movement-list--tight {
    gap: 0.32rem;
}

.month-link--tight {
    padding: 0.42rem 0.5rem;
    gap: 0.16rem;
}

.month-link__meta--stack {
    display: grid;
    gap: 0.08rem;
    justify-items: start;
}

.movement-row--tight {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 3.35rem;
    align-items: stretch;
    gap: 0.45rem;
    padding: 0.34rem 0.34rem 0.34rem 0.5rem;
}

.movement-row__meta--compact {
    gap: 0.24rem;
}

.movement-row__meta--compact .tiny-note + .tiny-note::before {
    content: '|';
    margin-right: 0.24rem;
    color: rgba(91, 116, 104, 0.65);
}

.movement-row__side {
    display: grid;
    gap: 0.12rem;
}

.movement-row__side--compact {
    align-content: center;
    justify-items: end;
}

.movement-row__edge-actions {
    min-width: 3.7rem;
    display: grid;
    gap: 0.18rem;
    align-self: stretch;
}

.movement-row__edge-form {
    display: contents;
}

.movement-row__edge-btn {
    min-width: 3.7rem;
    min-height: 0;
    align-self: stretch;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.2rem 0.38rem;
    border: 1px solid rgba(21, 122, 83, 0.2);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.9);
    color: var(--app-accent-dark);
    font-size: 0.69rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.movement-row__edge-btn:hover {
    background: rgba(21, 122, 83, 0.08);
    border-color: rgba(21, 122, 83, 0.28);
}

.movement-row__edge-btn--status {
    color: #8b5a14;
    border-color: rgba(139, 90, 20, 0.18);
    background: rgba(255, 247, 227, 0.95);
}

.movement-row__edge-btn--status:hover {
    background: rgba(255, 240, 201, 0.98);
    border-color: rgba(139, 90, 20, 0.24);
}

.movement-row__edge-btn--status.is-paid {
    color: var(--app-accent-dark);
    border-color: rgba(21, 122, 83, 0.2);
    background: rgba(228, 242, 234, 0.95);
}

.tiny-note--success {
    color: var(--app-accent-dark);
    font-weight: 700;
}

.movement-row--consolidated {
    background: rgba(241, 248, 244, 0.88);
}

.movement-row__edge-tag {
    min-width: 3.35rem;
    align-self: stretch;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.2rem 0.38rem;
    border: 1px solid rgba(21, 122, 83, 0.12);
    border-radius: 8px;
    background: rgba(228, 242, 234, 0.95);
    color: var(--app-accent-dark);
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.installment-fields[hidden] {
    display: none !important;
}

.balances-layout .section-copy,
.balances-layout .panel-subline,
.balances-layout .mini-hint,
.balances-layout .tiny-note,
.balance-page-head .panel-subline {
    font-size: 0.74rem;
    line-height: 1.28;
}

.balances-layout .section-title,
.balance-page-head .panel-headline {
    font-size: 0.92rem;
}

@media (max-width: 767.98px) {
    .quick-calc__trigger {
        min-width: 8.6rem;
    }

    .quick-calc__panel {
        right: auto;
        left: 0;
    }

    .movement-row--tight {
        grid-template-columns: 1fr;
        padding-right: 0.5rem;
    }

    .movement-row__side--compact {
        justify-items: start;
    }

    .movement-row__edge-btn,
    .movement-row__edge-tag {
        min-height: 2rem;
    }

    .movement-row__edge-actions {
        width: 100%;
    }
}

.app-modal .modal-content {
    border: 1px solid var(--app-border);
    border-radius: 14px;
    background: var(--app-surface-strong);
    box-shadow: var(--app-shadow);
}

.app-modal .modal-header,
.app-modal .modal-body {
    padding: 0.78rem 0.82rem;
}

.app-modal .modal-header {
    border-bottom-color: rgba(21, 122, 83, 0.08);
}

.app-modal .modal-title {
    font-size: 0.92rem;
    font-weight: 700;
}

.form-check-compact {
    margin-bottom: 0;
}

.form-check-compact .form-check-input {
    margin-top: 0.18rem;
}







.balance-summary-head {
    padding-top: 0.68rem;
    padding-bottom: 0.68rem;
}

.balance-summary-head__top {
    align-items: flex-start;
    gap: 0.45rem;
}

.balance-summary-head__actions {
    flex-wrap: nowrap;
    justify-content: flex-end;
}

.balances-layout__sidebar {
    display: grid;
    align-content: start;
    gap: 0.5rem;
}

.balances-layout__main {
    display: grid;
    align-content: start;
}

.month-setup-card,
.months-panel,
.section-card {
    background: rgba(255, 255, 255, 0.94);
}

.month-setup-card .collapse.show,
.month-setup-card .collapse.collapsing,
.section-add-panel.show,
.section-add-panel.collapsing {
    border-top: 1px dashed rgba(21, 122, 83, 0.12);
    padding-top: 0.58rem;
}

.month-setup-card .collapse,
.section-add-panel {
    margin-top: 0.45rem;
}

.months-panel .month-list {
    max-height: 34rem;
    overflow: auto;
    padding-right: 0.08rem;
}

.section-card {
    border-color: rgba(21, 122, 83, 0.09);
}

.section-card .section-head {
    align-items: flex-start;
}

.section-toggle-btn {
    min-width: 1.7rem;
    padding-left: 0.42rem;
    padding-right: 0.42rem;
    border-radius: 8px;
}

.section-toggle-btn[aria-expanded='true'] {
    background: rgba(21, 122, 83, 0.08);
    border-color: rgba(21, 122, 83, 0.2);
    color: var(--app-accent-dark);
}

.section-inline-form {
    display: grid;
    gap: 0.18rem;
}

.section-inline-form .row {
    --bs-gutter-x: 0.45rem;
    --bs-gutter-y: 0.4rem;
}

.section-inline-form .mini-hint {
    margin-top: 0.08rem;
}

.section-card .empty-inline {
    margin-top: 0.12rem;
}

@media (max-width: 767.98px) {
    .balance-summary-head__actions {
        width: 100%;
        justify-content: space-between;
    }

    .months-panel .month-list {
        max-height: none;
    }
}


.balances-layout .movement-list--tight {
    gap: 0.24rem;
}

.balances-layout .movement-row--tight {
    grid-template-columns: minmax(0, 1fr) auto 3.08rem;
    gap: 0.34rem;
    padding: 0.24rem 0.24rem 0.24rem 0.42rem;
    border-radius: 9px;
}

.balances-layout .movement-row__main {
    gap: 0.12rem;
}

.balances-layout .row-list__title {
    font-size: 0.76rem;
    line-height: 1.14;
}

.balances-layout .tiny-note {
    font-size: 0.67rem;
    line-height: 1.16;
}

.balances-layout .movement-row__meta--compact {
    gap: 0.16rem;
}

.balances-layout .movement-row__meta--compact .tiny-note + .tiny-note::before {
    margin-right: 0.16rem;
}

.balances-layout .movement-row__side {
    gap: 0.04rem;
}

.balances-layout .expense-row__amount {
    font-size: 0.76rem;
    line-height: 1.08;
}

.balances-layout .movement-row__edge-actions {
    min-width: 3.08rem;
    gap: 0.1rem;
}

.balances-layout .movement-row__edge-btn,
.balances-layout .movement-row__edge-tag {
    min-width: 3.08rem;
    padding: 0.14rem 0.28rem;
    border-radius: 7px;
    font-size: 0.63rem;
}

@media (max-width: 767.98px) {
    .balances-layout .movement-row__edge-btn,
    .balances-layout .movement-row__edge-tag {
        min-height: 1.72rem;
    }
}


.app-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    color: var(--app-text);
    text-decoration: none;
}

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

.app-brand__logo {
    width: 1.22rem;
    height: 1.22rem;
    display: block;
    flex: 0 0 auto;
}

.app-brand__text {
    line-height: 1;
    letter-spacing: -0.01em;
}



.alert {
    border: 1px solid transparent;
    border-radius: 12px;
    box-shadow: var(--app-shadow-soft);
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(8px);
}

.alert-danger {
    color: #8c3e3e;
    border-color: rgba(181, 77, 77, 0.12);
    background: linear-gradient(180deg, rgba(255, 250, 250, 0.96), rgba(255, 239, 239, 0.9));
}

.alert-warning {
    color: #8f5d18;
    border-color: rgba(173, 119, 31, 0.14);
    background: linear-gradient(180deg, rgba(255, 251, 244, 0.96), rgba(255, 242, 220, 0.92));
}

.alert-success {
    color: var(--app-accent-dark);
    border-color: rgba(0, 158, 87, 0.14);
    background: linear-gradient(180deg, rgba(248, 252, 250, 0.98), rgba(214, 255, 233, 0.95));
}

/* Visual refresh overrides */
.app-brand__text {
    font-family: 'Sora', 'Manrope', sans-serif;
    letter-spacing: -0.02em;
}

.summary-box {
    background: linear-gradient(180deg, rgba(248, 252, 250, 0.96), rgba(220, 255, 236, 0.86));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.summary-box__value {
    font-family: 'Sora', 'Manrope', sans-serif;
    letter-spacing: -0.02em;
}

.empty-inline {
    border-color: rgba(0, 158, 87, 0.16);
    background: linear-gradient(180deg, rgba(248, 252, 250, 0.92), rgba(226, 255, 239, 0.82));
}

.subpanel-card,
.month-link,
.expense-row,
.movement-row,
.movement-row--consolidated {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.subpanel-card {
    background: linear-gradient(180deg, rgba(248, 252, 250, 0.94), rgba(226, 255, 239, 0.82));
}

.month-link {
    background: linear-gradient(180deg, rgba(248, 252, 250, 0.92), rgba(238, 247, 242, 0.74));
}

.month-link:hover {
    border-color: rgba(0, 158, 87, 0.22);
    background: linear-gradient(180deg, rgba(243, 250, 246, 0.98), rgba(209, 255, 229, 0.9));
}

.month-link.is-active {
    border-color: rgba(0, 158, 87, 0.24);
    background: linear-gradient(180deg, rgba(240, 255, 247, 1), rgba(212, 255, 232, 0.9));
}

.expense-row {
    background: linear-gradient(180deg, rgba(248, 252, 250, 0.94), rgba(222, 255, 237, 0.8));
}

.movement-row {
    background: linear-gradient(180deg, rgba(248, 252, 250, 0.96), rgba(222, 255, 237, 0.8));
}

.movement-row--consolidated {
    background: linear-gradient(180deg, rgba(245, 251, 247, 0.98), rgba(214, 255, 233, 0.88));
}

.movement-row__edge-btn,
.movement-row__edge-tag {
    background: rgba(255, 255, 255, 0.78);
}

.movement-row__edge-btn--status {
    background: linear-gradient(180deg, rgba(255, 250, 242, 0.98), rgba(255, 241, 212, 0.92));
}

.movement-row__edge-btn--status.is-paid {
    background: linear-gradient(180deg, rgba(244, 251, 247, 0.98), rgba(228, 242, 234, 0.94));
}




/* Apple-inspired refinement */
:root {
    --app-bg: #f5f6f8;
    --app-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(252, 253, 255, 0.92));
    --app-surface-strong: rgba(255, 255, 255, 0.96);
    --app-border: rgba(15, 23, 42, 0.08);
    --app-text: #111827;
    --app-muted: #6b7280;
    --app-accent: #17c964;
    --app-accent-soft: #ebfff4;
    --app-accent-dark: #0d9f57;
    --app-shadow: 0 20px 55px rgba(15, 23, 42, 0.07);
    --app-shadow-soft: 0 12px 26px rgba(15, 23, 42, 0.05);
}

body.app-shell {
    background:
        radial-gradient(circle at top left, rgba(255, 255, 255, 0.92), transparent 22%),
        radial-gradient(circle at 82% 10%, rgba(232, 255, 243, 0.62), transparent 18%),
        linear-gradient(180deg, #fbfbfd 0%, #f4f6f8 52%, #eef2f5 100%);
}

body.app-shell::selection {
    background: rgba(23, 201, 100, 0.16);
}

.app-navbar {
    background: rgba(251, 251, 253, 0.68);
    border-bottom-color: rgba(15, 23, 42, 0.06) !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
}

.app-navbar__actions {
    min-width: 0;
}

.app-navbar__quote {
    max-width: 100%;
}

.app-brand__text,
.login-title,
.dashboard-title,
.panel-headline,
.section-title,
.summary-box__value {
    font-family: 'Manrope', sans-serif;
    letter-spacing: -0.03em;
}

.content-card,
.stat-card,
.login-card__brand,
.login-panel,
.hero-panel,
.quick-calc__panel {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(250, 251, 253, 0.84));
    border-color: rgba(15, 23, 42, 0.07);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.05);
}

.app-nav__link {
    color: #667085;
}

.app-nav__link:hover {
    color: #111827;
    background: rgba(255, 255, 255, 0.72);
}

.app-nav__link.is-active {
    color: #0f172a;
    border-color: rgba(15, 23, 42, 0.08);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(243, 247, 250, 0.88));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.quick-calc__trigger,
.form-control,
.btn-outline-dark,
.compact-tab,
.filter-pill {
    background: rgba(255, 255, 255, 0.72);
    border-color: rgba(15, 23, 42, 0.08);
}

.quick-calc__trigger:hover,
.quick-calc__trigger.is-open,
.form-control:focus {
    border-color: rgba(23, 201, 100, 0.26);
}

.quick-calc__result,
.summary-box,
.login-meta__item,
.settings-meta__item,
.subpanel-card,
.expense-row,
.movement-row,
.movement-row--consolidated,
.month-link,
.empty-inline {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(246, 248, 250, 0.82));
    border-color: rgba(15, 23, 42, 0.07);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.month-link:hover {
    border-color: rgba(15, 23, 42, 0.11);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(242, 246, 248, 0.9));
}

.month-link.is-active {
    border-color: rgba(23, 201, 100, 0.22);
    background: linear-gradient(180deg, rgba(250, 255, 252, 0.98), rgba(236, 255, 244, 0.88));
}

.pill-badge,
.micro-chip,
.subtle-chip {
    background: rgba(255, 255, 255, 0.75);
    border-color: rgba(15, 23, 42, 0.07);
    color: #4b5563;
}

.micro-chip--ok,
.subtle-chip.ok {
    background: linear-gradient(180deg, rgba(245, 255, 249, 0.98), rgba(232, 255, 241, 0.94));
    border-color: rgba(23, 201, 100, 0.16);
    color: var(--app-accent-dark);
}

.compact-tab.is-active,
.filter-pill.is-active {
    color: #0f172a;
    border-color: rgba(15, 23, 42, 0.08);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(242, 246, 248, 0.9));
}

.btn-dark {
    background: linear-gradient(180deg, #111827 0%, #1f2937 100%);
    border-color: #111827;
    box-shadow: 0 14px 24px rgba(17, 24, 39, 0.14);
}

.btn-dark:hover,
.btn-dark:focus {
    background: linear-gradient(180deg, #0b1220 0%, #172033 100%);
    border-color: #0b1220;
}

.btn-outline-dark {
    color: #111827;
}

.btn-outline-dark:hover,
.btn-outline-dark:focus {
    background: #111827;
    border-color: #111827;
}

.panel-kicker,
.section-label,
.quick-calc__hint {
    color: var(--app-accent-dark);
}

.alert {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.86));
    border-color: rgba(15, 23, 42, 0.07);
}

.alert-success {
    background: linear-gradient(180deg, rgba(248, 255, 251, 0.98), rgba(237, 255, 245, 0.9));
    border-color: rgba(23, 201, 100, 0.14);
}


/* Nav blob test */
.app-nav {
    position: relative;
    isolation: isolate;
}

.app-nav__blob {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    opacity: 0;
    border-radius: 999px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(240, 248, 251, 0.74));
    border: 1px solid rgba(255, 255, 255, 0.72);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.82),
        0 10px 24px rgba(15, 23, 42, 0.10),
        0 0 0 1px rgba(15, 23, 42, 0.04);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    transition:
        transform 340ms cubic-bezier(0.22, 1, 0.36, 1),
        width 340ms cubic-bezier(0.22, 1, 0.36, 1),
        height 340ms cubic-bezier(0.22, 1, 0.36, 1),
        opacity 180ms ease;
    pointer-events: none;
}

.app-nav__link {
    position: relative;
    z-index: 1;
}

.app-nav__link:hover,
.app-nav__link.is-active {
    background: transparent;
    border-color: transparent;
}


/* Nav blob test v2 */
.app-nav {
    position: relative;
    isolation: isolate;
    padding: 0.16rem;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(224, 232, 239, 0.96), rgba(205, 215, 224, 0.9));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.82),
        0 14px 28px rgba(15, 23, 42, 0.10),
        0 0 0 1px rgba(15, 23, 42, 0.07);
}

.app-nav__blob {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    opacity: 0;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(206, 221, 233, 0.9));
    border: 1px solid rgba(255, 255, 255, 0.92);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        0 18px 34px rgba(15, 23, 42, 0.18),
        0 0 0 1px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(20px) saturate(165%);
    -webkit-backdrop-filter: blur(20px) saturate(165%);
    transition:
        transform 340ms cubic-bezier(0.22, 1, 0.36, 1),
        width 340ms cubic-bezier(0.22, 1, 0.36, 1),
        height 340ms cubic-bezier(0.22, 1, 0.36, 1),
        opacity 180ms ease,
        box-shadow 260ms ease;
    pointer-events: none;
}

.app-nav__blob::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        radial-gradient(circle at 20% 22%, rgba(255, 255, 255, 1), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.26), rgba(23, 201, 100, 0.12));
    opacity: 1;
}

.app-nav__blob.is-moving {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        0 22px 42px rgba(15, 23, 42, 0.22),
        0 0 0 1px rgba(15, 23, 42, 0.09);
}

.app-nav__link {
    position: relative;
    z-index: 1;
}

.app-nav__link:hover,
.app-nav__link.is-active {
    background: transparent;
    border-color: transparent;
}




/* Nav blob test v3 */
.app-nav {
    padding: 0.14rem;
    background: linear-gradient(180deg, rgba(243, 246, 249, 0.62), rgba(232, 237, 242, 0.46));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.74),
        0 8px 18px rgba(15, 23, 42, 0.05);
}

.app-nav__blob {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(230, 239, 246, 0.58));
    border: 1px solid rgba(255, 255, 255, 0.88);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        0 12px 24px rgba(15, 23, 42, 0.12),
        0 0 0 1px rgba(15, 23, 42, 0.05);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
}

.app-nav__blob::before {
    background:
        radial-gradient(circle at 20% 22%, rgba(255, 255, 255, 0.94), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(23, 201, 100, 0.08));
    opacity: 0.86;
}

.app-nav__blob.is-moving {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.98),
        0 16px 32px rgba(15, 23, 42, 0.16),
        0 0 0 1px rgba(15, 23, 42, 0.06);
}

.app-nav__link {
    transition:
        transform 240ms cubic-bezier(0.22, 1, 0.36, 1),
        color 220ms ease,
        text-shadow 220ms ease,
        letter-spacing 220ms ease,
        font-weight 220ms ease;
}

.app-nav__link.is-blob-focus {
    color: #0f172a;
    transform: scale(1.08);
    letter-spacing: -0.01em;
    text-shadow: 0 0 14px rgba(255, 255, 255, 0.44);
}

/* Dashboard liquid lens */
[data-liquid-lens] {
    position: relative;
    overflow: hidden;
    --liquid-x: 50%;
    --liquid-y: 50%;
}

[data-liquid-lens]::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(170px circle at var(--liquid-x) var(--liquid-y), rgba(255, 255, 255, 0.26), transparent 44%),
        radial-gradient(95px circle at var(--liquid-x) var(--liquid-y), rgba(255, 255, 255, 0.16), transparent 32%);
    opacity: 0;
    transition: opacity 220ms ease;
    pointer-events: none;
}

[data-liquid-lens].is-liquid-hover::after,
[data-liquid-lens]:focus-within::after,
[data-liquid-lens]:hover::after {
    opacity: 1;
}

.summary-box,
.month-link,
.expense-row,
.movement-row,
.compact-tab,
.content-card[data-liquid-lens] {
    transition:
        transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 260ms ease,
        border-color 220ms ease,
        background 220ms ease;
}

.summary-box.is-liquid-hover,
.summary-box:hover,
.month-link.is-liquid-hover,
.month-link:hover,
.expense-row.is-liquid-hover,
.expense-row:hover,
.movement-row.is-liquid-hover,
.movement-row:hover,
.compact-tabs[data-liquid-lens].is-liquid-hover,
.content-card[data-liquid-lens].is-liquid-hover {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        0 18px 32px rgba(15, 23, 42, 0.08);
}

.summary-box.is-liquid-hover .summary-box__value,
.summary-box:hover .summary-box__value,
.month-link.is-liquid-hover .month-link__title,
.month-link:hover .month-link__title,
.expense-row.is-liquid-hover .row-list__title,
.expense-row:hover .row-list__title,
.expense-row.is-liquid-hover .expense-row__amount,
.expense-row:hover .expense-row__amount,
.movement-row.is-liquid-hover .row-list__title,
.movement-row:hover .row-list__title,
.movement-row.is-liquid-hover .expense-row__amount,
.movement-row:hover .expense-row__amount,
.content-card[data-liquid-lens].is-liquid-hover .section-title,
.content-card[data-liquid-lens]:hover .section-title,
.content-card[data-liquid-lens].is-liquid-hover .panel-headline,
.content-card[data-liquid-lens]:hover .panel-headline,
.compact-tabs[data-liquid-lens].is-liquid-hover .compact-tab.is-active,
.compact-tab:hover {
    transform: scale(1.035);
    letter-spacing: -0.02em;
    color: #0f172a;
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.42);
}

.summary-box__value,
.month-link__title,
.row-list__title,
.expense-row__amount,
.section-title,
.panel-headline,
.compact-tab {
    transition:
        transform 240ms cubic-bezier(0.22, 1, 0.36, 1),
        letter-spacing 220ms ease,
        text-shadow 220ms ease,
        color 220ms ease;
    transform-origin: left center;
}


/* Liquid pill system */
.pill-badge,
.micro-chip,
.subtle-chip,
.stat-pill {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid rgba(255, 255, 255, 0.86);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(229, 237, 244, 0.58));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.96),
        0 10px 22px rgba(15, 23, 42, 0.08),
        0 0 0 1px rgba(15, 23, 42, 0.03);
    backdrop-filter: blur(18px) saturate(145%);
    -webkit-backdrop-filter: blur(18px) saturate(145%);
    transition:
        transform 240ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 240ms ease,
        border-color 220ms ease,
        color 220ms ease,
        background 220ms ease;
}

.pill-badge::before,
.micro-chip::before,
.subtle-chip::before,
.stat-pill::before {
    content: '';
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    background:
        radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.96), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(23, 201, 100, 0.05));
    opacity: 0.92;
    pointer-events: none;
    z-index: -1;
}

.pill-badge:hover,
.micro-chip:hover,
.subtle-chip:hover,
.stat-pill:hover,
.pill-badge:focus-visible,
.micro-chip:focus-visible,
.subtle-chip:focus-visible,
.stat-pill:focus-visible {
    transform: translateY(-1px) scale(1.02);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.98),
        0 14px 28px rgba(15, 23, 42, 0.11),
        0 0 0 1px rgba(15, 23, 42, 0.04);
}

.pill-badge,
.micro-chip,
.subtle-chip {
    color: #102033;
}

.stat-pill {
    color: #112235;
}

.stat-pill strong {
    color: rgba(16, 32, 51, 0.64);
}

.micro-chip--ok,
.subtle-chip.ok,
.stat-pill--positive {
    color: #0b7a4e;
}

.micro-chip--warn,
.subtle-chip.warn,
.stat-pill--negative {
    color: #b33b3b;
}

.micro-chip--ok::before,
.subtle-chip.ok::before,
.stat-pill--positive::before {
    background:
        radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.96), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(23, 201, 100, 0.09));
}

.micro-chip--warn::before,
.subtle-chip.warn::before,
.stat-pill--negative::before {
    background:
        radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.96), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(211, 94, 94, 0.1));
}

/* Balance summary blob pills */
.balance-pill-nav {
    position: relative;
    isolation: isolate;
    align-items: flex-start;
}

.balance-pill-nav__blob {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    opacity: 0;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(229, 238, 245, 0.64));
    border: 1px solid rgba(255, 255, 255, 0.92);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.98),
        0 14px 28px rgba(15, 23, 42, 0.12),
        0 0 0 1px rgba(15, 23, 42, 0.05);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    transition:
        transform 340ms cubic-bezier(0.22, 1, 0.36, 1),
        width 340ms cubic-bezier(0.22, 1, 0.36, 1),
        height 340ms cubic-bezier(0.22, 1, 0.36, 1),
        opacity 180ms ease,
        box-shadow 260ms ease;
    pointer-events: none;
}

.balance-pill-nav__blob::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        radial-gradient(circle at 20% 22%, rgba(255, 255, 255, 0.98), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(23, 201, 100, 0.08));
    opacity: 0.88;
}

.balance-pill-nav__blob.is-moving {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.99),
        0 18px 34px rgba(15, 23, 42, 0.16),
        0 0 0 1px rgba(15, 23, 42, 0.06);
}

.balance-pill-nav__item {
    position: relative;
    z-index: 1;
    background: transparent;
    border-color: transparent;
    transition:
        transform 240ms cubic-bezier(0.22, 1, 0.36, 1),
        color 220ms ease,
        text-shadow 220ms ease,
        letter-spacing 220ms ease;
}

.balance-pill-nav__item strong,
.balance-pill-nav__item {
    transition:
        transform 240ms cubic-bezier(0.22, 1, 0.36, 1),
        color 220ms ease,
        text-shadow 220ms ease,
        letter-spacing 220ms ease;
}

.balance-pill-nav__item.is-blob-focus {
    color: #0f172a;
    transform: scale(1.05);
    letter-spacing: -0.01em;
    text-shadow: 0 0 14px rgba(255, 255, 255, 0.44);
}

.balance-pill-nav__item.is-blob-focus strong {
    color: rgba(15, 23, 42, 0.76);
}

/* Balance blob contrast tune */
.balance-pill-nav__item {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(15, 23, 42, 0.04);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.balance-pill-nav__item::before {
    opacity: 0;
}

.balance-pill-nav__item:hover,
.balance-pill-nav__item:focus-visible {
    transform: none;
    box-shadow: none;
}

.balance-pill-nav__item strong {
    color: rgba(15, 23, 42, 0.52);
}

.balance-pill-nav__item.stat-pill--positive,
.balance-pill-nav__item.stat-pill--negative {
    color: rgba(15, 23, 42, 0.84);
}

/* Balance section natural growth */
.balances-layout__main > .row {
    align-items: flex-start;
}

.auth-switch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

@media (max-width: 575.98px) {
    .auth-switch-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .auth-switch-row .btn {
        width: 100%;
    }

    .app-navbar__actions {
        width: 100%;
        justify-content: flex-start !important;
    }
}

.app-public-toolbar {
    display: flex;
    justify-content: flex-end;
    padding: 0.85rem 1rem 0;
}

.settings-inline-list {
    display: grid;
    gap: 0.42rem;
}

.settings-inline-list__item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.42rem;
}

.theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.58rem;
    min-height: 2.1rem;
    padding: 0.28rem 0.56rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(242, 246, 250, 0.82));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        0 12px 24px rgba(15, 23, 42, 0.08);
    color: #102033;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.01em;
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    transition:
        transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 220ms ease,
        border-color 220ms ease,
        background 220ms ease,
        color 220ms ease;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(23, 201, 100, 0.2);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.96),
        0 16px 32px rgba(15, 23, 42, 0.1);
}

.theme-toggle__track {
    position: relative;
    width: 2.2rem;
    height: 1.28rem;
    flex: 0 0 auto;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(216, 223, 230, 0.98), rgba(199, 208, 216, 0.9));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.84),
        inset 0 -1px 0 rgba(15, 23, 42, 0.05);
}

.theme-toggle__thumb {
    position: absolute;
    top: 0.12rem;
    left: 0.12rem;
    width: 1.04rem;
    height: 1.04rem;
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(241, 245, 249, 0.94));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 6px 12px rgba(15, 23, 42, 0.14);
    transition:
        transform 240ms cubic-bezier(0.22, 1, 0.36, 1),
        background 220ms ease,
        box-shadow 220ms ease;
}

.theme-toggle__label {
    min-width: 3.6rem;
    text-align: left;
}

.theme-toggle[aria-pressed='true'] .theme-toggle__track {
    background: linear-gradient(180deg, rgba(73, 214, 168, 0.95), rgba(12, 148, 102, 0.92));
}

.theme-toggle[aria-pressed='true'] .theme-toggle__thumb {
    transform: translateX(0.92rem);
}

@media (max-width: 575.98px) {
    .app-public-toolbar {
        padding: 0.75rem 0.85rem 0;
    }

    .settings-inline-list__item .micro-chip,
    .settings-inline-list__item .btn {
        width: 100%;
        justify-content: center;
    }

    .theme-toggle {
        min-height: 2rem;
    }
}

:root[data-theme='dark'] {
    color-scheme: dark;
    --app-bg: #0b1017;
    --app-surface: linear-gradient(180deg, rgba(18, 24, 34, 0.9), rgba(12, 18, 27, 0.86));
    --app-surface-strong: rgba(13, 18, 27, 0.94);
    --app-border: rgba(148, 163, 184, 0.16);
    --app-text: #eef4fb;
    --app-muted: #99a8ba;
    --app-accent: #34d399;
    --app-accent-soft: rgba(52, 211, 153, 0.18);
    --app-accent-dark: #7ceec0;
    --app-shadow: 0 26px 48px rgba(0, 0, 0, 0.34);
    --app-shadow-soft: 0 16px 30px rgba(0, 0, 0, 0.26);
}

:root[data-theme='dark'] body.app-shell {
    background:
        radial-gradient(circle at top left, rgba(73, 214, 168, 0.18), transparent 26%),
        radial-gradient(circle at 82% 10%, rgba(99, 154, 255, 0.16), transparent 18%),
        linear-gradient(180deg, #071018 0%, #0c131c 50%, #101923 100%);
    color: var(--app-text);
}

:root[data-theme='dark'] body.app-shell::selection {
    background: rgba(52, 211, 153, 0.28);
}

:root[data-theme='dark'] a {
    color: #8dd5ff;
}

:root[data-theme='dark'] a:hover {
    color: #b5e7ff;
}

:root[data-theme='dark'] .text-secondary {
    color: var(--app-muted) !important;
}

:root[data-theme='dark'] .text-success {
    color: #4ade80 !important;
}

:root[data-theme='dark'] .text-danger {
    color: #fb7185 !important;
}

:root[data-theme='dark'] .app-navbar {
    background: rgba(7, 12, 18, 0.72);
    border-bottom-color: rgba(148, 163, 184, 0.12) !important;
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.24);
}

:root[data-theme='dark'] .content-card,
:root[data-theme='dark'] .stat-card,
:root[data-theme='dark'] .login-card__brand,
:root[data-theme='dark'] .login-panel,
:root[data-theme='dark'] .hero-panel,
:root[data-theme='dark'] .quick-calc__panel,
:root[data-theme='dark'] .app-modal .modal-content {
    background: linear-gradient(180deg, rgba(17, 24, 34, 0.88), rgba(10, 16, 24, 0.84));
    border-color: rgba(148, 163, 184, 0.14);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 22px 44px rgba(0, 0, 0, 0.28);
}

:root[data-theme='dark'] .hero-panel {
    background: linear-gradient(135deg, rgba(17, 24, 34, 0.92), rgba(10, 24, 18, 0.84));
}

:root[data-theme='dark'] .app-nav {
    background: linear-gradient(180deg, rgba(26, 34, 46, 0.82), rgba(16, 23, 33, 0.74));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 14px 30px rgba(0, 0, 0, 0.26);
}

:root[data-theme='dark'] .app-nav__blob {
    background: linear-gradient(180deg, rgba(250, 252, 255, 0.2), rgba(106, 122, 145, 0.16));
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 14px 28px rgba(0, 0, 0, 0.28),
        0 0 0 1px rgba(255, 255, 255, 0.04);
}

:root[data-theme='dark'] .app-nav__link {
    color: #c7d2df;
}

:root[data-theme='dark'] .app-nav__link.is-blob-focus,
:root[data-theme='dark'] .app-nav__link.is-active,
:root[data-theme='dark'] .app-nav__link:hover {
    color: #ffffff;
    text-shadow: 0 0 18px rgba(255, 255, 255, 0.18);
}

:root[data-theme='dark'] .balance-pill-nav__blob {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(82, 102, 126, 0.18));
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 16px 32px rgba(0, 0, 0, 0.28),
        0 0 0 1px rgba(255, 255, 255, 0.05);
}

:root[data-theme='dark'] .quick-calc__trigger,
:root[data-theme='dark'] .form-control,
:root[data-theme='dark'] .form-select,
:root[data-theme='dark'] .btn-outline-dark,
:root[data-theme='dark'] .compact-tab,
:root[data-theme='dark'] .filter-pill,
:root[data-theme='dark'] .quick-calc__example,
:root[data-theme='dark'] .movement-row__edge-btn,
:root[data-theme='dark'] .movement-row__edge-tag {
    background: rgba(15, 21, 31, 0.78);
    border-color: rgba(148, 163, 184, 0.16);
    color: var(--app-text);
}

:root[data-theme='dark'] .form-control,
:root[data-theme='dark'] .form-select {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

:root[data-theme='dark'] .form-control::placeholder {
    color: rgba(153, 168, 186, 0.76);
}

:root[data-theme='dark'] .quick-calc__trigger:hover,
:root[data-theme='dark'] .quick-calc__trigger.is-open,
:root[data-theme='dark'] .form-control:focus,
:root[data-theme='dark'] .form-select:focus {
    border-color: rgba(52, 211, 153, 0.34);
    background: rgba(18, 26, 36, 0.94);
    box-shadow: 0 0 0 0.18rem rgba(52, 211, 153, 0.12);
}

:root[data-theme='dark'] .btn-dark {
    background: linear-gradient(180deg, #41d8a2 0%, #109669 100%);
    border-color: #109669;
    color: #04120d;
    box-shadow: 0 14px 30px rgba(16, 150, 105, 0.28);
}

:root[data-theme='dark'] .btn-dark:hover,
:root[data-theme='dark'] .btn-dark:focus {
    background: linear-gradient(180deg, #5ce0b0 0%, #0d835b 100%);
    border-color: #0d835b;
    color: #04120d;
}

:root[data-theme='dark'] .btn-outline-dark {
    color: #e5edf6;
}

:root[data-theme='dark'] .btn-outline-dark:hover,
:root[data-theme='dark'] .btn-outline-dark:focus {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}

:root[data-theme='dark'] .quick-calc__result,
:root[data-theme='dark'] .summary-box,
:root[data-theme='dark'] .login-meta__item,
:root[data-theme='dark'] .settings-meta__item,
:root[data-theme='dark'] .subpanel-card,
:root[data-theme='dark'] .expense-row,
:root[data-theme='dark'] .movement-row,
:root[data-theme='dark'] .movement-row--consolidated,
:root[data-theme='dark'] .month-link,
:root[data-theme='dark'] .empty-inline {
    background: linear-gradient(180deg, rgba(18, 25, 35, 0.84), rgba(11, 17, 26, 0.8));
    border-color: rgba(148, 163, 184, 0.14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

:root[data-theme='dark'] .month-link:hover,
:root[data-theme='dark'] .movement-row__edge-btn:hover,
:root[data-theme='dark'] .quick-calc__example:hover,
:root[data-theme='dark'] .compact-tab:hover,
:root[data-theme='dark'] .filter-pill:hover {
    background: linear-gradient(180deg, rgba(23, 32, 45, 0.94), rgba(13, 21, 31, 0.9));
    border-color: rgba(124, 238, 192, 0.22);
    color: #ffffff;
}

:root[data-theme='dark'] .month-link.is-active,
:root[data-theme='dark'] .compact-tab.is-active,
:root[data-theme='dark'] .filter-pill.is-active {
    background: linear-gradient(180deg, rgba(20, 35, 29, 0.94), rgba(10, 23, 19, 0.9));
    border-color: rgba(124, 238, 192, 0.2);
    color: #eefbf4;
}

:root[data-theme='dark'] .pill-badge,
:root[data-theme='dark'] .micro-chip,
:root[data-theme='dark'] .subtle-chip,
:root[data-theme='dark'] .stat-pill {
    background: linear-gradient(180deg, rgba(17, 25, 36, 0.82), rgba(10, 17, 25, 0.78));
    border-color: rgba(148, 163, 184, 0.14);
    color: #deebf8;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 12px 22px rgba(0, 0, 0, 0.18),
        0 0 0 1px rgba(255, 255, 255, 0.03);
}

:root[data-theme='dark'] .stat-pill {
    color: #e7f0fb;
}

:root[data-theme='dark'] .stat-pill strong,
:root[data-theme='dark'] .balance-pill-nav__item strong {
    color: rgba(231, 240, 251, 0.72);
}

:root[data-theme='dark'] .pill-badge::before,
:root[data-theme='dark'] .micro-chip::before,
:root[data-theme='dark'] .subtle-chip::before,
:root[data-theme='dark'] .stat-pill::before {
    background:
        radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.16), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(52, 211, 153, 0.06));
}

:root[data-theme='dark'] .micro-chip--ok,
:root[data-theme='dark'] .subtle-chip.ok,
:root[data-theme='dark'] .stat-pill--positive {
    color: #90f0c8;
}

:root[data-theme='dark'] .micro-chip--warn,
:root[data-theme='dark'] .subtle-chip.warn,
:root[data-theme='dark'] .stat-pill--negative {
    color: #ffb2b2;
}

:root[data-theme='dark'] .balance-pill-nav__item {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.05);
    color: #e7f0fb;
}

:root[data-theme='dark'] .balance-pill-nav__item.stat-pill--positive {
    color: #90f0c8;
}

:root[data-theme='dark'] .balance-pill-nav__item.stat-pill--negative {
    color: #ffb2b2;
}

:root[data-theme='dark'] .balance-pill-nav__item.is-blob-focus {
    color: #ffffff;
    text-shadow: 0 0 14px rgba(124, 238, 192, 0.12);
}

:root[data-theme='dark'] .balance-pill-nav__item.is-blob-focus strong {
    color: rgba(255, 255, 255, 0.82);
}

:root[data-theme='dark'] .panel-kicker,
:root[data-theme='dark'] .section-label,
:root[data-theme='dark'] .quick-calc__hint {
    color: #83efc5;
}

:root[data-theme='dark'] .section-copy,
:root[data-theme='dark'] .panel-subline,
:root[data-theme='dark'] .compact-list__copy,
:root[data-theme='dark'] .row-list__copy,
:root[data-theme='dark'] .tiny-note,
:root[data-theme='dark'] .mini-hint,
:root[data-theme='dark'] .login-subtitle,
:root[data-theme='dark'] .dashboard-subtitle,
:root[data-theme='dark'] .login-meta__label,
:root[data-theme='dark'] .settings-meta__label {
    color: var(--app-muted);
}

:root[data-theme='dark'] .quick-calc__result.is-muted {
    color: var(--app-muted);
}

:root[data-theme='dark'] .quick-calc__result.is-error {
    color: #ff9ea8;
}

:root[data-theme='dark'] .movement-row__edge-btn--status {
    background: linear-gradient(180deg, rgba(56, 39, 18, 0.96), rgba(39, 26, 13, 0.94));
    border-color: rgba(255, 191, 109, 0.18);
    color: #ffd8a8;
}

:root[data-theme='dark'] .movement-row__edge-btn--status.is-paid {
    background: linear-gradient(180deg, rgba(13, 40, 31, 0.96), rgba(9, 28, 22, 0.94));
    border-color: rgba(124, 238, 192, 0.18);
    color: #90f0c8;
}

:root[data-theme='dark'] .alert {
    background: linear-gradient(180deg, rgba(17, 24, 34, 0.94), rgba(10, 16, 24, 0.9));
    border-color: rgba(148, 163, 184, 0.12);
    color: var(--app-text);
}

:root[data-theme='dark'] .alert-success {
    background: linear-gradient(180deg, rgba(10, 38, 28, 0.96), rgba(7, 28, 21, 0.92));
    border-color: rgba(124, 238, 192, 0.16);
}

:root[data-theme='dark'] .alert-warning {
    background: linear-gradient(180deg, rgba(46, 34, 14, 0.96), rgba(34, 24, 11, 0.92));
    border-color: rgba(255, 197, 117, 0.14);
}

:root[data-theme='dark'] .alert-danger {
    background: linear-gradient(180deg, rgba(52, 20, 28, 0.96), rgba(37, 13, 19, 0.92));
    border-color: rgba(255, 145, 164, 0.14);
}

:root[data-theme='dark'] .btn-close {
    filter: invert(1) grayscale(1) brightness(200%);
}

:root[data-theme='dark'] .theme-toggle {
    background: linear-gradient(180deg, rgba(19, 27, 38, 0.88), rgba(10, 16, 24, 0.84));
    border-color: rgba(148, 163, 184, 0.14);
    color: #eef4fb;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 14px 28px rgba(0, 0, 0, 0.24);
}

:root[data-theme='dark'] .theme-toggle:hover,
:root[data-theme='dark'] .theme-toggle:focus-visible {
    border-color: rgba(124, 238, 192, 0.2);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 18px 34px rgba(0, 0, 0, 0.3);
}

:root[data-theme='dark'] .theme-toggle__track {
    background: linear-gradient(180deg, rgba(51, 65, 85, 0.98), rgba(30, 41, 59, 0.96));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -1px 0 rgba(0, 0, 0, 0.22);
}

:root[data-theme='dark'] .theme-toggle__thumb {
    background: linear-gradient(180deg, rgba(246, 250, 255, 0.98), rgba(199, 211, 225, 0.92));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.76),
        0 6px 14px rgba(0, 0, 0, 0.3);
}

:root[data-theme='dark'] .summary-box.is-liquid-hover .summary-box__value,
:root[data-theme='dark'] .summary-box:hover .summary-box__value,
:root[data-theme='dark'] .month-link.is-liquid-hover .month-link__title,
:root[data-theme='dark'] .month-link:hover .month-link__title,
:root[data-theme='dark'] .expense-row.is-liquid-hover .row-list__title,
:root[data-theme='dark'] .expense-row:hover .row-list__title,
:root[data-theme='dark'] .movement-row.is-liquid-hover .row-list__title,
:root[data-theme='dark'] .movement-row:hover .row-list__title,
:root[data-theme='dark'] .content-card[data-liquid-lens].is-liquid-hover .section-title,
:root[data-theme='dark'] .content-card[data-liquid-lens]:hover .section-title,
:root[data-theme='dark'] .content-card[data-liquid-lens].is-liquid-hover .panel-headline,
:root[data-theme='dark'] .content-card[data-liquid-lens]:hover .panel-headline,
:root[data-theme='dark'] .compact-tabs[data-liquid-lens].is-liquid-hover .compact-tab.is-active,
:root[data-theme='dark'] .compact-tab:hover {
    color: #f3f8ff;
    text-shadow: 0 0 14px rgba(124, 238, 192, 0.12);
}

:root[data-theme='dark'] .expense-row.is-liquid-hover .expense-row__amount.text-danger,
:root[data-theme='dark'] .expense-row:hover .expense-row__amount.text-danger,
:root[data-theme='dark'] .movement-row.is-liquid-hover .expense-row__amount.text-danger,
:root[data-theme='dark'] .movement-row:hover .expense-row__amount.text-danger {
    color: #fb7185;
}

:root[data-theme='dark'] .expense-row.is-liquid-hover .expense-row__amount.text-success,
:root[data-theme='dark'] .expense-row:hover .expense-row__amount.text-success,
:root[data-theme='dark'] .movement-row.is-liquid-hover .expense-row__amount.text-success,
:root[data-theme='dark'] .movement-row:hover .expense-row__amount.text-success {
    color: #4ade80;
}