:root {
    --app-bg: #eef2f8;
    --app-surface: #ffffff;
    --app-surface-2: #f7faff;
    --app-border: #e2e8f2;
    --app-text: #0f172a;
    --app-muted: #64748b;
    --app-primary: #2f6df6;
    --app-primary-2: #5a46ff;
    --app-primary-soft: #eaf1ff;
    --app-success: #16a34a;
    --app-warning: #f59e0b;
    --app-danger: #dc2626;
    --app-dark: #0b1220;
    --app-dark-2: #121c31;
    --app-gold: #d4b16a;
    --app-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
}

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

body {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--app-text);
    background:
        radial-gradient(circle at top left, rgba(47,109,246,.08), transparent 28%),
        radial-gradient(circle at top right, rgba(90,70,255,.06), transparent 24%),
        linear-gradient(180deg, #f7f9fd 0%, #eef2f8 42%, #edf1f7 100%);
}

a {
    text-decoration: none;
}

.app-navbar {
    background: linear-gradient(135deg, rgba(10,16,30,.96), rgba(19,30,54,.94));
    border-bottom: 1px solid rgba(212,177,106,.18);
    box-shadow: 0 14px 36px rgba(3, 8, 20, 0.32);
}

.nav-shell {
    min-height: 78px;
}

.brand-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(212,177,106,.35), rgba(255,255,255,.12));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}

.navbar-brand {
    font-size: 1.55rem;
    letter-spacing: -.02em;
}

.navbar .nav-link {
    color: rgba(255,255,255,.72);
    padding: .8rem 1rem;
    border-radius: 999px;
    font-weight: 600;
    transition: .2s ease;
}

.navbar .nav-link.active,
.navbar .nav-link:hover,
.navbar .nav-link:focus {
    color: #fff;
    background: rgba(255,255,255,.1);
}

.page-shell {
    padding-top: 1.4rem;
    padding-bottom: 6rem;
}

.card,
.glass-card {
    border: 1px solid var(--app-border);
    border-radius: 1.5rem;
    background: linear-gradient(180deg, rgba(255,255,255,.99), rgba(248,251,255,.99));
    box-shadow: var(--app-shadow);
}

.card .card-body {
    padding: 1.3rem;
}

.section-title {
    font-size: clamp(2rem, 4vw, 2.85rem);
    font-weight: 800;
    margin-bottom: .25rem;
    letter-spacing: -.04em;
}

.page-subtitle {
    color: var(--app-muted);
    margin-bottom: 0;
    max-width: 760px;
    font-size: 1.02rem;
}

.hero-panel {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(212,177,106,.16);
    border-radius: 1.7rem;
    padding: 1.4rem;
    background:
        radial-gradient(circle at top right, rgba(212,177,106,.18), transparent 26%),
        linear-gradient(135deg, #10192c 0%, #16213a 55%, #1f2d4d 100%);
    color: #fff;
    box-shadow: 0 22px 48px rgba(11,18,32,.22);
}

.hero-panel::after {
    content: '';
    position: absolute;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    right: -45px;
    bottom: -70px;
    background: rgba(255,255,255,.05);
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .45rem .8rem;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.86);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.hero-panel .section-title,
.hero-panel .page-subtitle {
    color: #fff;
}

.hero-panel .page-subtitle {
    opacity: .84;
}

.hero-balance-label {
    color: rgba(255,255,255,.76);
    font-size: .9rem;
    margin-bottom: .25rem;
}

.hero-balance {
    font-size: clamp(2.1rem, 5vw, 3rem);
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1;
}

.hero-actions {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
}

.hero-actions .btn {
    min-width: 150px;
}

.btn-light-ghost {
    color: #fff;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.14);
}

.btn-light-ghost:hover,
.btn-light-ghost:focus {
    background: rgba(255,255,255,.14);
    color: #fff;
}

.hero-month-card {
    position: relative;
    z-index: 1;
    padding: 1rem;
    border-radius: 1.35rem;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.1);
    backdrop-filter: blur(10px);
}

.hero-month-card .form-control {
    background: rgba(255,255,255,.95);
    border-color: rgba(255,255,255,.3);
}

.form-control,
.form-select {
    border-radius: 1rem;
    border: 1px solid #d6deea;
    min-height: 50px;
    background: #fff;
    box-shadow: none !important;
}

.form-control:focus,
.form-select:focus {
    border-color: rgba(47,109,246,.48);
}

.btn {
    border-radius: 1rem;
    min-height: 48px;
    font-weight: 700;
}

.btn-primary {
    background: linear-gradient(135deg, var(--app-primary), var(--app-primary-2));
    border: 0;
}

.btn-primary:hover,
.btn-primary:focus {
    background: linear-gradient(135deg, #235fe5, #4f3ef6);
}

.btn-outline-primary {
    border-color: #cad8fb;
    color: var(--app-primary);
}

.btn-outline-primary:hover {
    background: var(--app-primary-soft);
    color: var(--app-primary);
    border-color: #bfd0fb;
}

.btn-sm {
    min-height: auto;
    border-radius: 999px;
}

.filter-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--app-border);
    border-radius: 1.25rem;
    background: rgba(255,255,255,.92);
    box-shadow: 0 10px 22px rgba(15,23,42,.04);
}

.filter-strip form {
    display: flex;
    gap: .75rem;
    width: 100%;
    max-width: 420px;
}

.section-label {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--app-muted);
    font-weight: 700;
}

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

.quick-action-card {
    display: block;
    color: var(--app-text) !important;
    padding: 1.15rem;
    border-radius: 1.35rem;
    border: 1px solid var(--app-border);
    background: linear-gradient(180deg, #ffffff, #f8fbff);
    box-shadow: 0 12px 24px rgba(15,23,42,.05);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.quick-action-card:hover,
.quick-action-card:focus {
    transform: translateY(-2px);
    color: var(--app-text) !important;
    border-color: #d4e1ff;
    box-shadow: 0 16px 28px rgba(15,23,42,.08);
}

.quick-action-card * {
    color: inherit !important;
    text-decoration: none !important;
}

.quick-action-card i {
    font-size: 1.3rem;
    display: inline-flex;
    width: 2.9rem;
    height: 2.9rem;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
    background: var(--app-primary-soft);
    color: var(--app-primary) !important;
    margin-bottom: .8rem;
}

.quick-action-card h6 {
    margin-bottom: .2rem;
    font-size: 1rem;
    font-weight: 800;
}

.quick-action-card p {
    margin: 0;
    color: var(--app-muted) !important;
    font-size: .92rem;
}

.stat-card {
    position: relative;
    overflow: hidden;
    min-height: 205px;
}

.stat-card::after {
    content: '';
    position: absolute;
    right: -18px;
    bottom: -26px;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: rgba(47,109,246,.07);
}

.stat-card .card-body {
    padding: 1.45rem;
}

.stat-card .icon-wrap {
    width: 62px;
    height: 62px;
    border-radius: 1.15rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.45rem;
}

.stat-card h3 {
    font-size: clamp(1.95rem, 3vw, 2.6rem);
    line-height: 1.03;
    font-weight: 800;
    letter-spacing: -.04em;
}

.stat-card .metric-label {
    color: var(--app-muted);
    font-size: .94rem;
    font-weight: 600;
}

.metric-note {
    font-size: .9rem;
    color: var(--app-muted);
}

.highlight-avoidable {
    border: 1px solid rgba(220,38,38,.12);
    background: linear-gradient(180deg, rgba(255,247,247,0.98), rgba(255,255,255,.98));
}

.summary-chip {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .55rem .95rem;
    border-radius: 999px;
    background: var(--app-primary-soft);
    color: var(--app-primary);
    font-weight: 700;
    font-size: .86rem;
}

.table thead th {
    white-space: nowrap;
    color: var(--app-muted);
    font-size: .77rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    border-bottom-color: #e4eaf3;
}

.table > :not(caption) > * > * {
    padding-top: .95rem;
    padding-bottom: .95rem;
}

.budget-progress {
    height: 10px;
    border-radius: 999px;
    background: #ebf0f7;
    overflow: hidden;
}

.budget-progress > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--app-primary), #60a5fa);
}

.budget-progress.warning > span { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.budget-progress.danger > span { background: linear-gradient(90deg, #ef4444, #f87171); }

.soft-alert {
    border: 0;
    border-radius: 1rem;
    box-shadow: 0 12px 24px rgba(15,23,42,.06);
}

.card-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: 1rem;
}

.list-clean {
    margin: 0;
    padding: 0;
    list-style: none;
}

.list-clean li + li {
    margin-top: .9rem;
}

.inline-metric {
    padding: .9rem 1rem;
    border-radius: 1rem;
    background: #f8fafc;
    border: 1px solid #edf2f7;
}

.app-section-card {
    border-radius: 1.45rem;
}

.mobile-tabbar {
    display: none;
}

.mobile-fab {
    display: none;
}

canvas {
    max-height: 320px;
}

@media (max-width: 991.98px) {
    .navbar-collapse {
        background: rgba(10,16,30,.72);
        margin-top: .85rem;
        border-radius: 1rem;
        padding: .55rem;
        border: 1px solid rgba(255,255,255,.08);
    }

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

    .hero-actions .btn {
        min-width: 0;
    }
}

@media (max-width: 767.98px) {
    .container {
        padding-left: 14px;
        padding-right: 14px;
    }

    .page-shell {
        padding-top: .95rem;
        padding-bottom: 7.6rem;
    }

    .nav-shell {
        min-height: 68px;
    }

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

    .card,
    .glass-card,
    .hero-panel,
    .app-section-card {
        border-radius: 1.25rem;
    }

    .card .card-body {
        padding: 1rem;
    }

    .section-title {
        font-size: 2.05rem;
    }

    .page-subtitle {
        font-size: .95rem;
    }

    .hero-panel {
        padding: 1.1rem;
    }

    .hero-balance {
        font-size: 2.35rem;
    }

    .hero-actions {
        display: none;
    }

    .hero-month-card {
        margin-top: .55rem;
        padding: .9rem;
    }

    .hero-month-card .btn {
        min-height: 46px;
    }

    .quick-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .8rem;
    }

    .quick-action-card {
        min-height: 136px;
        padding: 1rem;
    }

    .quick-action-card h6 {
        font-size: .97rem;
    }

    .quick-action-card p {
        font-size: .84rem;
        line-height: 1.35;
    }

    .row.g-4 {
        --bs-gutter-x: 1rem;
        --bs-gutter-y: 1rem;
    }

    .stat-card {
        min-height: 170px;
    }

    .stat-card .card-body {
        padding: 1.05rem;
    }

    .stat-card .icon-wrap {
        width: 56px;
        height: 56px;
        font-size: 1.3rem;
    }

    .stat-card h3 {
        font-size: 2rem;
    }

    .metric-note {
        font-size: .82rem;
    }

    .filter-strip {
        padding: .9rem;
        align-items: stretch;
    }

    .filter-strip,
    .filter-strip form {
        flex-direction: column;
        max-width: none;
    }

    .mobile-stack-table thead {
        display: none;
    }

    .mobile-stack-table,
    .mobile-stack-table tbody,
    .mobile-stack-table tr,
    .mobile-stack-table td {
        display: block;
        width: 100%;
    }

    .mobile-stack-table tr {
        padding: .9rem 0;
        border-bottom: 1px solid rgba(148,163,184,.18);
    }

    .mobile-stack-table td {
        text-align: left !important;
        border: 0;
        padding: .32rem 0;
    }

    .mobile-stack-table td::before {
        content: attr(data-label);
        display: block;
        font-size: .72rem;
        text-transform: uppercase;
        letter-spacing: .06em;
        color: var(--app-muted);
        margin-bottom: .12rem;
        font-weight: 700;
    }

    .mobile-fab {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        right: 18px;
        bottom: 92px;
        width: 58px;
        height: 58px;
        z-index: 1060;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--app-primary), var(--app-primary-2));
        color: #fff;
        box-shadow: 0 18px 30px rgba(47,109,246,.34);
        font-size: 1.4rem;
    }

    .mobile-fab:hover,
    .mobile-fab:focus {
        color: #fff;
        transform: translateY(-1px);
    }

    .mobile-tabbar {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: 12px;
        z-index: 1050;
        background: rgba(15,23,42,.95);
        border: 1px solid rgba(255,255,255,.06);
        box-shadow: 0 18px 38px rgba(15, 23, 42, 0.26);
        border-radius: 1.25rem;
        overflow: hidden;
        backdrop-filter: blur(12px);
    }

    .mobile-tabbar a {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: .22rem;
        min-height: 62px;
        color: rgba(255,255,255,.62);
        font-size: .72rem;
        font-weight: 600;
    }

    .mobile-tabbar a i {
        font-size: 1.18rem;
    }

    .mobile-tabbar a.active {
        color: #fff;
        background: rgba(255,255,255,.08);
    }
}

.btn-nav-utility {
    min-height: 42px;
    min-width: 42px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.08);
    color: #fff;
    padding: .45rem .8rem;
}

.btn-nav-utility:hover,
.btn-nav-utility:focus {
    background: rgba(255,255,255,.16);
    color: #fff;
}

.nav-utility-group {
    order: 2;
}

.recurring-grid,
.recurring-mini-list {
    display: grid;
    gap: .9rem;
}

.recurring-item,
.recurring-mini-item {
    border: 1px solid var(--app-border);
    border-radius: 1.15rem;
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(245,248,255,.98));
    padding: 1rem;
}

.recurring-month-form .form-control {
    min-height: 44px;
}

.install-fab {
    display: none;
}

.trigger-install,
.trigger-theme {
    justify-content: center;
}

html[data-theme='dark'] {
    --app-bg: #07111f;
    --app-surface: #0f1a2b;
    --app-surface-2: #132137;
    --app-border: #223250;
    --app-text: #e7edf7;
    --app-muted: #93a6c2;
    --app-primary-soft: rgba(47,109,246,.18);
    --app-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
}

html[data-theme='dark'] body {
    background:
        radial-gradient(circle at top left, rgba(47,109,246,.12), transparent 28%),
        radial-gradient(circle at top right, rgba(90,70,255,.10), transparent 24%),
        linear-gradient(180deg, #08111f 0%, #0b1627 42%, #0c1829 100%);
    color: var(--app-text);
}

html[data-theme='dark'] .card,
html[data-theme='dark'] .glass-card,
html[data-theme='dark'] .quick-action-card,
html[data-theme='dark'] .recurring-item,
html[data-theme='dark'] .recurring-mini-item,
html[data-theme='dark'] .filter-strip,
html[data-theme='dark'] .inline-metric {
    background: linear-gradient(180deg, rgba(15,26,43,.98), rgba(19,33,55,.98));
    border-color: var(--app-border);
    color: var(--app-text);
}

html[data-theme='dark'] .page-subtitle,
html[data-theme='dark'] .metric-note,
html[data-theme='dark'] .text-muted,
html[data-theme='dark'] .quick-action-card p,
html[data-theme='dark'] .table thead th,
html[data-theme='dark'] .mobile-stack-table td::before,
html[data-theme='dark'] .summary-chip,
html[data-theme='dark'] .section-label {
    color: var(--app-muted) !important;
}

html[data-theme='dark'] .form-control,
html[data-theme='dark'] .form-select {
    background: #0d1727;
    border-color: #2a3a58;
    color: #e7edf7;
}

html[data-theme='dark'] .form-control::placeholder {
    color: #8093ad;
}

html[data-theme='dark'] .table,
html[data-theme='dark'] .table td,
html[data-theme='dark'] .table th {
    color: var(--app-text);
    border-color: #223250;
}

html[data-theme='dark'] .highlight-avoidable {
    background: linear-gradient(180deg, rgba(51,23,27,.95), rgba(19,33,55,.98));
    border-color: rgba(220,38,38,.28);
}

html[data-theme='dark'] .budget-progress {
    background: #152339;
}

html[data-theme='dark'] .mobile-tabbar {
    background: rgba(7, 17, 31, .95);
}

html[data-theme='dark'] .btn-outline-primary {
    border-color: #39507a;
    color: #b4c8ff;
}

html[data-theme='dark'] .btn-outline-primary:hover {
    background: rgba(47,109,246,.15);
    border-color: #47659d;
    color: #d7e3ff;
}

@media (max-width: 767.98px) {
    .btn-nav-utility {
        min-width: 38px;
        min-height: 38px;
        padding: .4rem .7rem;
    }

    .install-fab {
        align-items: center;
        justify-content: center;
        position: fixed;
        left: 18px;
        bottom: 92px;
        width: 52px;
        height: 52px;
        z-index: 1060;
        border-radius: 50%;
        background: linear-gradient(135deg, #0f172a, #1e293b);
        color: #fff;
        box-shadow: 0 16px 28px rgba(15,23,42,.32);
        border: 1px solid rgba(255,255,255,.08);
    }

    .recurring-month-form {
        width: 100%;
    }

    .recurring-month-form .form-control,
    .recurring-month-form .btn {
        width: 100%;
    }
}