:root {
    color-scheme: dark;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

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

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
    color: #f8fafc;
}

.bg-app {
    min-height: 100vh;
    background:
        radial-gradient(circle at 15% -15%, rgba(88, 28, 135, 0.35), transparent 45%),
        radial-gradient(circle at 85% -20%, rgba(45, 212, 191, 0.12), transparent 40%),
        linear-gradient(180deg, #11131b 0%, #0d1018 100%);
}

.app-shell {
    background: rgba(16, 19, 28, 0.72);
    backdrop-filter: blur(8px);
    box-shadow: 0 14px 34px -24px rgba(2, 8, 22, 0.9);
}

.landing-body {
    background:
        radial-gradient(circle at top left, rgba(255, 255, 255, 0.08), transparent 28%),
        radial-gradient(circle at 85% 15%, rgba(255, 255, 255, 0.05), transparent 24%),
        linear-gradient(180deg, #050505 0%, #000000 100%);
}

.landing-shell {
    width: 100%;
    max-width: min(100%, 96rem);
    background: transparent;
    backdrop-filter: none;
    box-shadow: none;
}

.landing-main {
    width: 100%;
    padding: 1.5rem 1rem 4.5rem;
}

.landing-header {
    border-bottom-color: rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.88);
}

.landing-header-inner {
    width: 100%;
    max-width: 72rem;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
}

.landing-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    text-decoration: none;
}

.landing-brand-logo {
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    object-fit: cover;
}

.landing-header-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.landing-page {
    width: 100%;
    max-width: 72rem;
    margin: 0 auto;
    display: grid;
    gap: 1.25rem;
}

.landing-hero,
.landing-feature-card,
.landing-cta,
.landing-side-card,
.landing-highlight-card {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: linear-gradient(180deg, rgba(10, 10, 10, 0.98) 0%, rgba(4, 4, 4, 0.98) 100%);
}

.landing-hero {
    position: relative;
    overflow: hidden;
    border-radius: 2rem;
    padding: 1.5rem;
    display: grid;
    gap: 1.15rem;
}

.landing-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at top left, rgba(255, 255, 255, 0.1), transparent 32%),
        radial-gradient(circle at bottom right, rgba(255, 255, 255, 0.06), transparent 24%);
}

.landing-hero-copy,
.landing-hero-side {
    position: relative;
    z-index: 1;
}

.landing-hero-copy {
    display: grid;
    gap: 1.1rem;
    min-width: 0;
}

.landing-logo-lockup {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.landing-logo-lockup-mark {
    width: 4.25rem;
    height: 4.25rem;
    border-radius: 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    object-fit: cover;
}

.landing-logo-lockup-title {
    margin: 0;
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 900;
    letter-spacing: -0.03em;
}

.landing-logo-lockup-subtitle {
    margin: 0.18rem 0 0;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.82rem;
    line-height: 1.4;
}

.landing-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    max-width: 100%;
    border-radius: 9999px;
    border: 1px solid rgba(255, 255, 255, 0.65);
    padding: 0.72rem 1rem;
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.landing-title {
    margin: 0;
    max-width: 12ch;
    color: #ffffff;
    font-size: clamp(2.7rem, 8vw, 4.75rem);
    line-height: 0.95;
    font-weight: 900;
    letter-spacing: -0.06em;
    text-wrap: balance;
}

.landing-lead {
    margin: 0;
    max-width: 42rem;
    color: rgba(255, 255, 255, 0.72);
    font-size: 1rem;
    line-height: 1.75;
}

.landing-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
}

.landing-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3.25rem;
    padding: 0.85rem 1.4rem;
    border-radius: 1.15rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    text-decoration: none;
    font-size: 0.94rem;
    font-weight: 800;
}

.landing-btn-primary {
    background: #ffffff;
    color: #000000;
}

.landing-btn-secondary {
    background: rgba(255, 255, 255, 0.05);
    color: #ffffff;
}

.landing-highlight-grid,
.landing-feature-grid {
    display: grid;
    gap: 0.9rem;
}

.landing-highlight-card {
    border-radius: 1.4rem;
    padding: 1rem;
}

.landing-highlight-label,
.landing-side-label,
.landing-feature-index {
    margin: 0;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.landing-highlight-value {
    margin: 0.55rem 0 0;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.35;
}

.landing-hero-side {
    display: grid;
    gap: 0.9rem;
}

.landing-side-card {
    border-radius: 1.6rem;
    padding: 1.2rem;
}

.landing-stat-list,
.landing-side-list {
    margin-top: 1rem;
}

.landing-stat-list {
    display: grid;
    gap: 0.8rem;
}

.landing-stat-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.95rem 1rem;
    border-radius: 1.1rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.55);
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.92rem;
    font-weight: 700;
}

.landing-stat-item strong {
    color: #ffffff;
    font-size: 1rem;
    font-weight: 900;
    text-align: right;
}

.landing-stat-positive {
    color: #4ade80 !important;
}

.landing-stat-negative {
    color: #fb7185 !important;
}

.landing-side-list {
    display: grid;
    gap: 0.8rem;
    padding-left: 1.15rem;
    color: rgba(255, 255, 255, 0.74);
    font-size: 0.95rem;
    line-height: 1.6;
}

.landing-feature-grid {
    grid-template-columns: 1fr;
}

.landing-feature-card {
    border-radius: 1.5rem;
    padding: 1.25rem;
}

.landing-feature-title,
.landing-cta-title {
    margin: 0.75rem 0 0;
    color: #ffffff;
    font-weight: 900;
    line-height: 1.12;
}

.landing-feature-title {
    font-size: 1.35rem;
}

.landing-feature-text,
.landing-cta-text {
    margin: 0.65rem 0 0;
    color: rgba(255, 255, 255, 0.68);
    line-height: 1.7;
}

.landing-cta {
    border-radius: 1.75rem;
    padding: 1.35rem;
    display: grid;
    gap: 1.25rem;
}

.landing-actions-cta {
    align-items: stretch;
}

@media (min-width: 720px) {
    .landing-main {
        padding: 1.9rem 1.4rem 5rem;
    }

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

@media (min-width: 960px) {
    .landing-hero {
        grid-template-columns: minmax(0, 1.3fr) minmax(18rem, 0.78fr);
        align-items: end;
        padding: 2rem;
    }

    .landing-cta {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }
}

@media (max-width: 520px) {
    .landing-main {
        padding-left: 0.85rem;
        padding-right: 0.85rem;
    }

    .landing-header-inner {
        flex-wrap: wrap;
    }

    .landing-brand-logo {
        width: 2rem;
        height: 2rem;
    }

    .landing-header-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .landing-logo-lockup {
        align-items: flex-start;
    }

    .landing-logo-lockup-mark {
        width: 3.6rem;
        height: 3.6rem;
    }

    .landing-title {
        max-width: none;
        text-wrap: pretty;
    }

    .landing-btn {
        width: 100%;
    }

    .landing-stat-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .landing-stat-item strong {
        text-align: left;
    }
}

.app-shell-frame {
    max-width: 28rem;
}

.app-shell-frame.landing-shell {
    max-width: min(100%, 96rem);
}

.view-browser .app-shell-frame {
    max-width: min(100%, 72rem);
}

.view-browser .app-bottom-nav,
.view-browser .txn-bottom-nav,
.view-browser .dash-bottom-nav {
    max-width: min(100%, 72rem);
}

.app-header {
    position: sticky;
    top: 0;
    z-index: 30;
    border-bottom: 1px solid rgba(71, 85, 105, 0.35);
    background: rgba(17, 20, 30, 0.95);
    padding: max(1rem, env(safe-area-inset-top)) 1rem 0.75rem;
    backdrop-filter: blur(10px);
}

.app-brand {
    color: #f8fafc;
    text-decoration: none;
    font-size: 1.08rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.app-user-chip {
    color: rgba(226, 232, 240, 0.9);
    font-size: 0.72rem;
    font-weight: 600;
}

.app-mini-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    border: 1px solid rgba(100, 116, 139, 0.45);
    background: rgba(30, 41, 59, 0.45);
    padding: 0.3rem 0.75rem;
    color: #e2e8f0;
    font-size: 0.72rem;
    font-weight: 600;
    text-decoration: none;
}

.app-mini-btn-primary {
    border-color: rgba(139, 92, 246, 0.42);
    background: rgba(91, 33, 182, 0.86);
    color: #f5f3ff;
}

.app-mini-btn-view {
    border-color: rgba(148, 163, 184, 0.45);
    background: rgba(30, 41, 59, 0.62);
    color: #e2e8f0;
}

.app-flash {
    border-radius: 1rem;
    border: 1px solid rgba(16, 185, 129, 0.28);
    background: rgba(5, 150, 105, 0.15);
    padding: 0.75rem 0.9rem;
    color: #a7f3d0;
    font-size: 0.85rem;
}

.app-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 45;
    margin: 0 auto;
    display: flex;
    align-items: end;
    gap: 0.45rem;
    width: 100%;
    max-width: 28rem;
    border-top: 1px solid rgba(71, 85, 105, 0.35);
    background: rgba(19, 22, 31, 0.96);
    padding: 0.55rem 0.8rem calc(0.6rem + env(safe-area-inset-bottom));
    backdrop-filter: blur(10px);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
}

.app-bottom-nav::-webkit-scrollbar {
    display: none;
}

.nav-item {
    display: inline-flex;
    flex: 0 0 auto;
    min-width: 4.6rem;
    scroll-snap-align: start;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    padding: 0.46rem 0.35rem;
    font-size: 0.68rem;
    font-weight: 600;
    color: rgba(226, 232, 240, 0.84);
    transition: all 0.15s ease-out;
    text-decoration: none;
    text-align: center;
}

.nav-item-active {
    background: rgba(100, 116, 139, 0.35);
    color: #a855f7;
}

.app-center-fab {
    display: grid;
    flex: 0 0 auto;
    scroll-snap-align: center;
    place-items: center;
    padding: 0;
    height: 4.2rem;
    width: 4.2rem;
    border: none;
    border-radius: 9999px;
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
    color: #f5f3ff;
    line-height: 0;
    box-shadow: 0 18px 30px -20px rgba(91, 33, 182, 0.92);
}

.app-center-fab-icon {
    display: block;
    width: 2rem;
    height: 2rem;
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    transform: translateY(0.5px);
}

.card {
    border-radius: 1.2rem;
    border: 1px solid rgba(71, 85, 105, 0.36);
    background: linear-gradient(185deg, #181c26 0%, #141924 100%);
    padding: 1rem;
    box-shadow: 0 18px 28px -24px rgba(2, 8, 22, 0.95);
}

.badge {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    padding: 0.22rem 0.65rem;
    font-size: 0.68rem;
    font-weight: 600;
}

.badge-income {
    background: rgba(34, 197, 94, 0.18);
    color: #86efac;
}

.badge-expense {
    background: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
}

.badge-transfer {
    background: rgba(56, 189, 248, 0.18);
    color: #7dd3fc;
}

.app-page {
    color: #f8fafc;
}

.app-open-loader-overlay {
    position: fixed;
    inset: 0;
    z-index: 68;
    display: grid;
    place-items: center;
    pointer-events: none;
    background:
        radial-gradient(circle at 20% -15%, rgba(88, 28, 135, 0.28), transparent 44%),
        radial-gradient(circle at 80% -20%, rgba(45, 212, 191, 0.14), transparent 42%),
        linear-gradient(180deg, rgba(13, 16, 24, 0.96) 0%, rgba(8, 10, 16, 0.96) 100%);
    backdrop-filter: blur(8px);
    opacity: 1;
    visibility: visible;
    transition: opacity 0.28s ease, visibility 0.28s ease;
}

.app-open-loader-overlay.is-exiting {
    opacity: 0;
    visibility: hidden;
}

.app-open-loader-mark {
    display: grid;
    place-items: center;
    gap: 0.85rem;
    min-width: 10rem;
    padding: 1.45rem 1.7rem;
    border-radius: 1.7rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(18, 18, 18, 0.92) 0%, rgba(6, 6, 6, 0.96) 100%);
    box-shadow: 0 22px 44px -28px rgba(0, 0, 0, 0.92);
}

.app-open-loader-ring {
    width: 5.1rem;
    height: 5.1rem;
    border-radius: 9999px;
    border: 3.5px solid rgba(255, 255, 255, 0.14);
    border-top-color: #ffffff;
    border-right-color: rgba(255, 255, 255, 0.86);
    box-shadow: 0 0 0 0.42rem rgba(255, 255, 255, 0.03);
    animation: app-open-spin 0.88s linear infinite;
}

.app-open-loader-label {
    color: rgba(255, 255, 255, 0.94);
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

@keyframes app-open-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-open-loader-overlay {
        transition: none;
    }

    .app-open-loader-ring {
        animation: none;
    }
}
.login-loader-overlay {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 20% -15%, rgba(88, 28, 135, 0.32), transparent 44%),
        radial-gradient(circle at 80% -20%, rgba(45, 212, 191, 0.16), transparent 42%),
        linear-gradient(180deg, rgba(13, 16, 24, 0.98) 0%, rgba(8, 10, 16, 0.98) 100%);
    backdrop-filter: blur(6px);
    transition: opacity 0.22s ease;
}

.login-loader-overlay.is-exiting {
    opacity: 0;
    pointer-events: none;
}

.login-loader-card {
    width: min(18.5rem, calc(100vw - 2.2rem));
    border-radius: 1.25rem;
    border: 1px solid rgba(100, 116, 139, 0.42);
    background: linear-gradient(185deg, #1a1e2a 0%, #141925 100%);
    box-shadow: 0 24px 36px -24px rgba(2, 8, 22, 0.9);
    padding: 1.05rem;
}

.login-loader-orb {
    position: relative;
    margin: 0 auto 0.8rem;
    width: 3.4rem;
    height: 3.4rem;
    border-radius: 9999px;
    background: conic-gradient(from 180deg, #22c55e 0%, #16a34a 45%, #7c3aed 100%);
    animation: login-orb-spin 1.1s linear infinite;
}

.login-loader-orb::after {
    content: "";
    position: absolute;
    inset: 0.42rem;
    border-radius: 9999px;
    background: #151a25;
}

.login-loader-title {
    margin: 0;
    text-align: center;
    color: #f8fafc;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.login-loader-step {
    margin: 0.3rem 0 0;
    text-align: center;
    color: rgba(203, 213, 225, 0.86);
    font-size: 0.78rem;
    min-height: 1.2rem;
}

.login-loader-progress {
    margin-top: 0.82rem;
    width: 100%;
    height: 0.5rem;
    border-radius: 9999px;
    background: rgba(51, 65, 85, 0.42);
    overflow: hidden;
}

.login-loader-progress > span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #22c55e 0%, #7c3aed 100%);
    transition: width 0.1s linear;
}

.login-loader-meta {
    margin-top: 0.72rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    color: rgba(203, 213, 225, 0.88);
    font-size: 0.74rem;
}

.login-loader-skip {
    border: 1px solid rgba(148, 163, 184, 0.5);
    border-radius: 9999px;
    background: rgba(30, 41, 59, 0.62);
    color: #f8fafc;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.28rem 0.68rem;
    cursor: pointer;
}

.login-loader-skip:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(167, 139, 250, 0.45);
}

@keyframes login-orb-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .login-loader-orb {
        animation: none;
    }

    .login-loader-progress > span {
        transition: none;
    }
}

.post-login-loader-overlay {
    position: fixed;
    inset: 0;
    z-index: 68;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 22% -12%, rgba(34, 197, 94, 0.2), transparent 40%),
        radial-gradient(circle at 80% -20%, rgba(124, 58, 237, 0.2), transparent 42%),
        linear-gradient(180deg, rgba(12, 16, 24, 0.96) 0%, rgba(7, 10, 15, 0.96) 100%);
    backdrop-filter: blur(4px);
    transition: opacity 0.22s ease;
}

.post-login-loader-overlay.is-exiting {
    opacity: 0;
    pointer-events: none;
}

.post-login-loader-card {
    width: min(17.8rem, calc(100vw - 2.4rem));
    border-radius: 1.15rem;
    border: 1px solid rgba(100, 116, 139, 0.4);
    background: linear-gradient(185deg, #19202c 0%, #151a24 100%);
    padding: 1rem;
    box-shadow: 0 20px 34px -26px rgba(2, 8, 22, 0.9);
}

.post-login-loader-ring {
    width: 2.8rem;
    height: 2.8rem;
    margin: 0 auto 0.72rem;
    border-radius: 9999px;
    border: 3px solid rgba(148, 163, 184, 0.35);
    border-top-color: #22c55e;
    border-right-color: #7c3aed;
    animation: post-login-spin 0.9s linear infinite;
}

.post-login-loader-title {
    margin: 0;
    text-align: center;
    color: #f8fafc;
    font-size: 0.96rem;
    font-weight: 700;
}

.post-login-loader-step {
    margin: 0.35rem 0 0;
    text-align: center;
    color: rgba(203, 213, 225, 0.84);
    font-size: 0.76rem;
    min-height: 1.15rem;
}

.post-login-loader-progress {
    margin-top: 0.72rem;
    width: 100%;
    height: 0.42rem;
    border-radius: 9999px;
    background: rgba(51, 65, 85, 0.45);
    overflow: hidden;
}

.post-login-loader-progress > span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #22c55e 0%, #7c3aed 100%);
    transition: width 0.1s linear;
}

@keyframes post-login-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .post-login-loader-ring {
        animation: none;
    }

    .post-login-loader-progress > span {
        transition: none;
    }
}

.app-title {
    color: #f8fafc;
    font-size: 1.12rem;
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.app-title-sm {
    color: #f8fafc;
    font-size: 0.98rem;
    line-height: 1.1;
    font-weight: 700;
}

.app-subtitle {
    margin-top: 0.2rem;
    color: rgba(203, 213, 225, 0.8);
    font-size: 0.84rem;
}

.app-muted-text {
    color: rgba(203, 213, 225, 0.82);
    font-size: 0.88rem;
}

.app-link-inline {
    color: #c4b5fd;
    font-weight: 700;
    text-decoration: none;
}

.app-top-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    border: 1px solid rgba(139, 92, 246, 0.45);
    background: rgba(109, 40, 217, 0.9);
    padding: 0.46rem 0.84rem;
    color: #f5f3ff;
    font-size: 0.74rem;
    font-weight: 700;
    text-decoration: none;
}

.app-item-title {
    color: #f8fafc;
    font-size: 0.93rem;
    font-weight: 700;
}

.app-item-meta {
    color: rgba(203, 213, 225, 0.74);
    font-size: 0.78rem;
}

.app-item-value {
    color: #e2e8f0;
    font-size: 1rem;
    font-weight: 700;
}

.app-inline-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.76rem;
}

.app-touch-hint {
    display: block;
    margin-top: 0.32rem;
    color: rgba(148, 163, 184, 0.82);
    font-size: 0.72rem;
}

.app-action-card .app-inline-actions {
    margin-top: 0 !important;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transform: translateY(-0.2rem);
    transition: max-height 0.18s ease, opacity 0.18s ease, transform 0.18s ease, margin-top 0.18s ease;
}

.app-action-card.app-actions-open .app-inline-actions,
.app-action-card:focus-within .app-inline-actions {
    margin-top: 0.65rem !important;
    max-height: 2rem;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

@media (hover: hover) and (pointer: fine) {
    .app-touch-hint {
        display: none;
    }

    .app-action-card:hover .app-inline-actions {
        margin-top: 0.65rem !important;
        max-height: 2rem;
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }
}

@media (pointer: coarse) {
    .app-action-card {
        -webkit-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
    }
}

.app-link-edit {
    color: #a78bfa;
    font-weight: 700;
    text-decoration: none;
}

.app-link-danger {
    color: #fb7185;
    font-weight: 700;
    text-decoration: none;
}

.app-empty-card {
    color: rgba(203, 213, 225, 0.82);
    font-size: 0.88rem;
}

.app-btn-primary,
.app-btn-secondary,
.app-btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
    padding: 0.74rem 0.92rem;
    font-size: 0.86rem;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.12s ease-out;
}

.app-btn-primary:active,
.app-btn-secondary:active,
.app-btn-danger:active {
    transform: scale(0.98);
}

.app-btn-primary {
    border: none;
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
    color: #f5f3ff;
}

.app-btn-secondary {
    border: 1px solid rgba(100, 116, 139, 0.55);
    background: rgba(15, 23, 42, 0.55);
    color: #e2e8f0;
}

.app-btn-danger {
    border: none;
    background: linear-gradient(135deg, #ef4444 0%, #be123c 100%);
    color: #fff1f2;
}

.app-field-label {
    display: block;
    color: rgba(203, 213, 225, 0.84);
    font-size: 0.69rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.app-field-help {
    color: rgba(148, 163, 184, 0.86);
    font-size: 0.73rem;
}

.app-field-error {
    color: #fda4af;
    font-size: 0.73rem;
}

.app-form-error {
    border-radius: 1rem;
    border: 1px solid rgba(251, 113, 133, 0.35);
    background: rgba(159, 18, 57, 0.2);
    padding: 0.72rem 0.85rem;
    color: #fecdd3;
    font-size: 0.82rem;
}

.app-modal-panel {
    width: 100%;
    max-width: 28rem;
    border-radius: 1.5rem;
    border: 1px solid rgba(71, 85, 105, 0.4);
    background: linear-gradient(185deg, #181c26 0%, #141924 100%);
    box-shadow: 0 24px 40px -24px rgba(2, 8, 22, 0.95);
    color: #f8fafc;
}

.app-modal-content {
    color: #f8fafc;
}
.app-modal-content input,
.app-modal-content select,
.app-modal-content textarea {
    min-width: 0;
    max-width: 100%;
    font-size: max(16px, 1rem);
}

.app-modal-content input[type="date"] {
    -webkit-appearance: none;
    appearance: none;
}

.app-modal-content input[type="date"]::-webkit-date-and-time-value {
    text-align: left;
}


.app-fab {
    display: grid;
    place-items: center;
    padding: 0;
    height: 3.5rem;
    width: 3.5rem;
    border: none;
    border-radius: 9999px;
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
    color: #f5f3ff;
    line-height: 0;
    box-shadow: 0 16px 28px -20px rgba(91, 33, 182, 0.92);
    transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
}

.app-fab:active {
    transform: scale(0.95);
}

.app-fab-icon {
    display: block;
    width: 1.6rem;
    height: 1.6rem;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    transform: translateY(0.5px);
}

.transactions-body {
    background:
        radial-gradient(circle at 10% -15%, rgba(88, 28, 135, 0.35), transparent 42%),
        radial-gradient(circle at 90% -22%, rgba(45, 212, 191, 0.12), transparent 40%),
        linear-gradient(180deg, #11131b 0%, #0d1018 100%);
    color: #f8fafc;
}

.transactions-shell {
    background: transparent;
    color: #f8fafc;
    box-shadow: none;
}

.transactions-screen {
    color: #f8fafc;
}

.txn-month-nav {
    display: grid;
    grid-template-columns: 2.3rem 1fr 2.3rem;
    align-items: center;
    gap: 0.4rem;
}

.txn-month-title {
    text-align: center;
    font-size: 1.55rem;
    line-height: 1.1;
    font-weight: 700;
    color: #f8fafc;
}

.txn-month-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2.3rem;
    width: 2.3rem;
    color: #cbd5e1;
    font-size: 2rem;
    text-decoration: none;
}

.txn-month-arrow-disabled {
    opacity: 0.24;
}

.txn-balance-card {
    border-radius: 1.8rem;
    border: 1px solid rgba(71, 85, 105, 0.4);
    background: linear-gradient(185deg, #181c26 0%, #141924 100%);
    box-shadow: 0 18px 32px -26px rgba(2, 8, 22, 0.95);
    padding: 1rem 1.1rem;
}

.txn-balance-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.8rem;
}

.txn-balance-item {
    min-width: 0;
}

.txn-balance-label {
    display: block;
    color: rgba(203, 213, 225, 0.8);
    font-size: 0.8rem;
    letter-spacing: 0.02em;
}

.txn-balance-value {
    color: #a7f3d0;
    font-size: clamp(1.35rem, 5.3vw, 2rem);
    line-height: 1.05;
    font-weight: 700;
}

.txn-balance-value-negative {
    color: #ef4444;
}

.txn-balance-divider {
    height: 3rem;
    width: 1px;
    background: rgba(148, 163, 184, 0.35);
}

.txn-search-wrap {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    border-radius: 9999px;
    border: 1px solid rgba(100, 116, 139, 0.45);
    background: rgba(15, 23, 42, 0.55);
    padding: 0.65rem 1rem;
}

.txn-search-icon {
    display: inline-flex;
    height: 1.2rem;
    width: 1.2rem;
    color: #94a3b8;
}

.txn-search-input {
    width: 100%;
    border: none;
    background: transparent;
    color: #f8fafc;
    font-size: clamp(1.05rem, 4.3vw, 1.8rem);
}

.txn-search-input:focus {
    outline: none;
}

.txn-search-input::placeholder {
    color: #94a3b8;
}

.transactions-screen select,
.transactions-screen input,
.transactions-screen textarea {
    border: 1px solid rgba(100, 116, 139, 0.5) !important;
    background: rgba(15, 23, 42, 0.62) !important;
    color: #f8fafc !important;
}

.txn-day-label {
    margin-top: 1.1rem;
    color: #f8fafc;
    font-size: 0.98rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.txn-item-row {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    border-radius: 1rem;
    padding: 0.45rem 0;
}

.txn-item-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    height: 2.95rem;
    width: 2.95rem;
    border-radius: 9999px;
    background: rgba(100, 116, 139, 0.28);
    color: rgba(226, 232, 240, 0.95);
}

.txn-item-icon-svg {
    height: 1.55rem;
    width: 1.55rem;
}

.txn-item-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #f8fafc;
    font-size: 0.92rem;
    font-weight: 600;
}

.txn-item-meta {
    margin-top: 0.06rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: rgba(203, 213, 225, 0.74);
    font-size: 0.82rem;
}

.txn-amount {
    font-size: 1.06rem;
    font-weight: 700;
    line-height: 1;
}

.txn-amount-income {
    color: #22c55e;
}

.txn-amount-expense {
    color: #ef4444;
}

.txn-amount-cleared {
    text-decoration: line-through;
    text-decoration-thickness: 2px;
}

.txn-amount-transfer {
    color: #38bdf8;
}

.txn-amount-ignored {
    color: #94a3b8;
    text-decoration: none;
}

.txn-quick-actions {
    margin-top: 0.35rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.38rem;
    flex-wrap: wrap;
}

.txn-quick-form {
    margin: 0;
}

.txn-pill {
    border-radius: 9999px;
    border: 1px solid rgba(100, 116, 139, 0.45);
    background: rgba(30, 41, 59, 0.5);
    color: #e2e8f0;
    font-size: 0.62rem;
    font-weight: 700;
    padding: 0.18rem 0.55rem;
}

.txn-pill-clear {
    border-color: rgba(34, 197, 94, 0.72);
    background: rgba(22, 163, 74, 0.22);
    color: #86efac;
}

.txn-pill-clear-active {
    border-color: rgba(34, 197, 94, 0.95);
    background: #16a34a;
    color: #f0fdf4;
}

.txn-pill-ignore {
    border-color: rgba(245, 158, 11, 0.78);
    background: rgba(217, 119, 6, 0.2);
    color: #fde68a;
}

.txn-pill-ignore-active {
    border-color: rgba(148, 163, 184, 0.62);
    background: rgba(71, 85, 105, 0.42);
    color: #e2e8f0;
}

.txn-item-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.34rem;
    flex: 0 0 auto;
}

.txn-actions-dropdown {
    position: relative;
}

.txn-actions-dropdown > summary {
    list-style: none;
}

.txn-actions-dropdown > summary::-webkit-details-marker {
    display: none;
}

.txn-actions-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 1.7rem;
    width: 1.7rem;
    border-radius: 9999px;
    border: 1px solid rgba(71, 85, 105, 0.55);
    background: rgba(15, 23, 42, 0.68);
    color: rgba(226, 232, 240, 0.9);
    cursor: pointer;
}

.txn-actions-trigger svg {
    height: 1rem;
    width: 1rem;
}

.txn-actions-dropdown[open] .txn-actions-trigger {
    border-color: rgba(148, 163, 184, 0.9);
    background: rgba(30, 41, 59, 0.9);
}

.txn-actions-menu {
    position: absolute;
    top: calc(100% + 0.28rem);
    right: 0;
    z-index: 60;
    min-width: 9.5rem;
    border-radius: 0.9rem;
    border: 1px solid rgba(71, 85, 105, 0.48);
    background: #0f172a;
    box-shadow: 0 10px 28px rgba(2, 6, 23, 0.45);
    padding: 0.32rem;
    display: grid;
    gap: 0.24rem;
    max-height: min(15.5rem, calc(100vh - 7.5rem));
    overflow-y: auto;
    overscroll-behavior: contain;
}

.txn-actions-dropdown-up .txn-actions-menu {
    top: auto;
    bottom: calc(100% + 0.28rem);
}

.txn-actions-form {
    margin: 0;
}

.txn-menu-item {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: flex-start;
    border-radius: 0.62rem;
    border: 1px solid transparent;
    background: transparent;
    color: #e2e8f0;
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none;
    padding: 0.48rem 0.58rem;
}

.txn-menu-item-clear {
    border-color: rgba(34, 197, 94, 0.42);
    color: #86efac;
}

.txn-menu-item-clear-active {
    border-color: rgba(34, 197, 94, 0.88);
    background: rgba(22, 163, 74, 0.26);
    color: #dcfce7;
}

.txn-menu-item-ignore {
    border-color: rgba(245, 158, 11, 0.48);
    color: #fde68a;
}

.txn-menu-item-ignore-active {
    border-color: rgba(148, 163, 184, 0.62);
    background: rgba(71, 85, 105, 0.36);
    color: #e2e8f0;
}

.txn-menu-item-edit {
    border-color: rgba(167, 139, 250, 0.48);
    color: #c4b5fd;
}

.txn-menu-item-delete {
    border-color: rgba(251, 113, 133, 0.55);
    color: #fda4af;
}

.txn-menu-item:hover {
    background: rgba(30, 41, 59, 0.72);
}

.txn-empty-card {
    border-radius: 1.2rem;
    border: 1px solid rgba(71, 85, 105, 0.4);
    background: linear-gradient(185deg, #181c26 0%, #141924 100%);
    padding: 1rem;
    color: rgba(203, 213, 225, 0.84);
    font-size: 0.82rem;
}

.txn-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 45;
    margin: 0 auto;
    display: flex;
    align-items: end;
    gap: 0.45rem;
    width: 100%;
    max-width: 28rem;
    border-top: 1px solid rgba(71, 85, 105, 0.35);
    background: rgba(19, 22, 31, 0.96);
    padding: 0.55rem 0.8rem calc(0.6rem + env(safe-area-inset-bottom));
    backdrop-filter: blur(10px);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
}

.txn-bottom-nav::-webkit-scrollbar {
    display: none;
}

.txn-tab-link {
    display: flex;
    flex: 0 0 auto;
    min-width: 4.6rem;
    scroll-snap-align: start;
    flex-direction: column;
    align-items: center;
    gap: 0.22rem;
    border-radius: 1rem;
    border: 1px solid transparent;
    padding: 0.42rem 0.42rem;
    color: rgba(226, 232, 240, 0.86);
    font-size: 0.68rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.txn-tab-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 1.45rem;
    width: 1.45rem;
}

.txn-tab-icon svg {
    height: 1.3rem;
    width: 1.3rem;
}

.txn-tab-active,
.txn-tab-link[aria-current="page"] {
    color: #a855f7;
    background: rgba(100, 116, 139, 0.34);
    border-color: rgba(168, 85, 247, 0.45);
    box-shadow: inset 0 0 0 1px rgba(168, 85, 247, 0.22), 0 10px 16px -14px rgba(124, 58, 237, 0.95);
}

.txn-center-fab {
    display: grid;
    flex: 0 0 auto;
    scroll-snap-align: center;
    place-items: center;
    padding: 0;
    height: 4.2rem;
    width: 4.2rem;
    border: none;
    border-radius: 9999px;
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
    color: #f5f3ff;
    line-height: 0;
    box-shadow: 0 18px 30px -20px rgba(91, 33, 182, 0.92);
}

.txn-center-fab-icon {
    display: block;
    width: 2rem;
    height: 2rem;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    transform: translateY(0.5px);
}

@media (max-width: 360px) {
    .nav-item,
    .txn-tab-link,
    .dash-tab-link {
        min-width: 4.1rem;
        font-size: 0.61rem;
    }

    .app-center-fab,
    .txn-center-fab,
    .dash-center-fab {
        height: 3.85rem;
        width: 3.85rem;
    }

    .app-center-fab-icon,
    .txn-center-fab-icon,
    .dash-center-fab-icon {
        width: 1.85rem;
        height: 1.85rem;
    }
}

@media (max-width: 390px) {
    .app-user-chip {
        display: none;
    }

    .app-mini-btn {
        padding: 0.28rem 0.58rem;
        font-size: 0.67rem;
    }
}

.dash-body {
    background:
        radial-gradient(circle at 15% -15%, rgba(88, 28, 135, 0.35), transparent 45%),
        radial-gradient(circle at 85% -20%, rgba(45, 212, 191, 0.12), transparent 40%),
        linear-gradient(180deg, #11131b 0%, #0d1018 100%);
    color: #f8fafc;
}

.dash-shell {
    background: transparent;
    color: #f8fafc;
    box-shadow: none;
}

.dash-main {
    padding: max(0.6rem, env(safe-area-inset-top)) 0 calc(8.5rem + env(safe-area-inset-bottom));
}

.dash-screen {
    padding: 0 0.65rem 0.5rem;
    color: #f8fafc;
}

.dash-screen-loader-lock {
    visibility: hidden;
}

.dash-hero-card {
    border-radius: 0 0 1.6rem 1.6rem;
    background: linear-gradient(185deg, #1a1d27 0%, #171a22 100%);
    padding: 0.95rem 1rem 1.15rem;
    box-shadow: 0 24px 36px -34px rgba(3, 8, 22, 0.9);
}

.dash-hero-top {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.5rem;
}

.dash-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2.4rem;
    width: 2.4rem;
    border-radius: 9999px;
    border: 1px solid rgba(148, 163, 184, 0.28);
    background: rgba(226, 232, 240, 0.12);
    color: #e2e8f0;
}

.dash-icon-btn svg {
    width: 1.25rem;
    height: 1.25rem;
}

.dash-month-nav {
    justify-self: stretch;
    min-width: 0;
    display: grid;
    grid-template-columns: 1.45rem minmax(0, 1fr) 1.45rem;
    align-items: center;
    gap: 0.2rem;
}

.dash-month-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 1.45rem;
    width: 1.45rem;
    text-decoration: none;
    color: rgba(226, 232, 240, 0.7);
    font-size: 1.18rem;
    line-height: 1;
}

.dash-month-title {
    margin: 0;
    color: rgba(226, 232, 240, 0.92);
    font-size: clamp(1.42rem, 5.6vw, 1.9rem);
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-inline: 0.15rem;
}

.dash-gift-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2.82rem;
    width: 2.82rem;
    border-radius: 9999px;
    background: #7c3aed;
    color: #f5f3ff;
    text-decoration: none;
    box-shadow: 0 14px 26px -20px rgba(124, 58, 237, 0.95);
}

.dash-gift-btn svg {
    width: 1.45rem;
    height: 1.45rem;
}

.dash-gift-dot {
    position: absolute;
    right: 0.1rem;
    top: 0.18rem;
    height: 0.62rem;
    width: 0.62rem;
    border-radius: 9999px;
    background: #a3e635;
    border: 2px solid #7c3aed;
}

.dash-balance-label {
    margin: 1.1rem 0 0;
    text-align: center;
    color: rgba(148, 163, 184, 0.9);
    font-size: 0.82rem;
    font-weight: 600;
}

.dash-balance-value {
    margin: 0.35rem 0 0;
    text-align: center;
    color: #f8fafc;
    font-size: clamp(1.9rem, 9.2vw, 3.2rem);
    line-height: 1.05;
    font-weight: 500;
    letter-spacing: 0.01em;
}

.dash-balance-value-negative {
    color: #ef4444;
}

.dash-eye-icon {
    margin: 0.75rem auto 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    padding: 0.2rem;
    color: rgba(203, 213, 225, 0.8);
    cursor: pointer;
}

.dash-eye-icon:focus {
    outline: none;
}

.dash-eye-icon:focus-visible {
    border-radius: 9999px;
    box-shadow: 0 0 0 2px rgba(167, 139, 250, 0.45);
}

.dash-eye-icon svg {
    width: 2.2rem;
    height: 2.2rem;
}

.dash-income-expense-row {
    margin-top: 1rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem;
    border-top: 1px solid rgba(148, 163, 184, 0.16);
    padding-top: 1rem;
}

.dash-flow-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.dash-flow-item-right {
    justify-content: flex-end;
}

.dash-flow-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 3.25rem;
    width: 3.25rem;
    border-radius: 9999px;
    color: #f8fafc;
}

.dash-flow-icon svg {
    width: 1.9rem;
    height: 1.9rem;
}

.dash-flow-icon-income {
    background: #4d9d57;
}

.dash-flow-icon-expense {
    background: #cf4444;
}

.dash-flow-label {
    margin: 0;
    color: rgba(203, 213, 225, 0.82);
    font-size: 0.85rem;
}

.dash-flow-value {
    margin: 0.03rem 0 0;
    font-size: clamp(1rem, 4.3vw, 1.45rem);
    font-weight: 600;
    line-height: 1;
}

.dash-flow-value-income {
    color: #22c55e;
}

.dash-flow-value-expense {
    color: #ef4444;
}

.dash-section {
    margin-top: 1.45rem;
}

.dash-section-title {
    margin: 0 0 0.8rem;
    color: rgba(226, 232, 240, 0.82);
    font-size: clamp(1.35rem, 5.2vw, 1.85rem);
    font-weight: 500;
    letter-spacing: 0.01em;
}

.dash-alert-card {
    position: relative;
    width: min(13.4rem, 100%);
    border-radius: 1.8rem;
    background: linear-gradient(185deg, #181c26 0%, #141924 100%);
    padding: 1.2rem 1rem 1rem;
    box-shadow: 0 20px 38px -30px rgba(2, 8, 22, 0.9);
}

.dash-alert-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 3.2rem;
    width: 3.2rem;
    border-radius: 9999px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    color: #e2e8f0;
    background: rgba(30, 41, 59, 0.24);
}

.dash-alert-icon svg {
    width: 1.9rem;
    height: 1.9rem;
}

.dash-alert-badge {
    position: absolute;
    right: 1.1rem;
    top: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.15rem;
    height: 2.15rem;
    border-radius: 9999px;
    background: #ef4444;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
}

.dash-alert-title {
    margin: 0.95rem 0 0;
    color: rgba(226, 232, 240, 0.82);
    font-size: 1rem;
    line-height: 1.25;
}

.dash-alert-amount {
    margin: 0.4rem 0 0;
    color: #fb7185;
    font-size: 1.3rem;
    font-weight: 600;
}

.dash-category-card {
    border-radius: 1.8rem;
    background: linear-gradient(185deg, #181c26 0%, #141924 100%);
    padding: 1.15rem 1rem;
    box-shadow: 0 20px 38px -30px rgba(2, 8, 22, 0.9);
}

.dash-donut-wrap {
    position: relative;
    margin: 0 auto 1.15rem;
    height: 11.2rem;
    width: 11.2rem;
}

.dash-donut {
    width: 100%;
    height: 100%;
    border-radius: 9999px;
}

.dash-donut-hole {
    position: absolute;
    inset: 24%;
    border-radius: 9999px;
    background: #1a1e29;
}

.dash-legend {
    display: grid;
    gap: 0.85rem;
}

.dash-legend-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.7rem;
}

.dash-legend-dot {
    height: 1.2rem;
    width: 1.2rem;
    border-radius: 9999px;
}

.dash-legend-name {
    color: #f8fafc;
    font-size: 0.85rem;
    font-weight: 500;
}

.dash-legend-amount {
    color: #fb7185;
    font-size: 0.85rem;
    font-weight: 600;
}

.dash-empty-text,
.dash-empty-card {
    border-radius: 1rem;
    border: 1px dashed rgba(148, 163, 184, 0.34);
    padding: 0.8rem;
    color: rgba(203, 213, 225, 0.82);
    font-size: 0.88rem;
}

.dash-latest-list {
    display: grid;
    gap: 0.7rem;
}

.dash-latest-item {
    display: flex;
    justify-content: space-between;
    gap: 0.8rem;
    border-radius: 1.1rem;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(71, 85, 105, 0.34);
    padding: 0.8rem 0.9rem;
}

.dash-latest-title {
    margin: 0;
    color: #f8fafc;
    font-size: 0.82rem;
    font-weight: 600;
}

.dash-latest-meta {
    margin: 0.2rem 0 0;
    color: rgba(203, 213, 225, 0.72);
    font-size: 0.76rem;
}

.dash-latest-amount {
    margin: 0;
    align-self: center;
    font-size: 0.88rem;
    font-weight: 700;
    white-space: nowrap;
}

.dash-latest-amount-income {
    color: #22c55e;
}

.dash-latest-amount-expense {
    color: #ef4444;
}

.dash-latest-amount-transfer {
    color: #38bdf8;
}

.dash-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    margin: 0 auto;
    width: 100%;
    max-width: 28rem;
    display: flex;
    align-items: end;
    gap: 0.45rem;
    border-top: 1px solid rgba(71, 85, 105, 0.35);
    background: rgba(19, 22, 31, 0.96);
    padding: 0.6rem 0.8rem calc(0.65rem + env(safe-area-inset-bottom));
    backdrop-filter: blur(10px);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
}

.dash-bottom-nav::-webkit-scrollbar {
    display: none;
}

.dash-tab-link {
    display: flex;
    flex: 0 0 auto;
    min-width: 4.6rem;
    scroll-snap-align: start;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    border-radius: 1rem;
    border: 1px solid transparent;
    padding: 0.42rem 0.42rem;
    color: rgba(226, 232, 240, 0.86);
    text-decoration: none;
    font-size: 0.66rem;
    font-weight: 500;
    transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.dash-tab-active,
.dash-tab-link[aria-current="page"] {
    background: rgba(100, 116, 139, 0.34);
    border-color: rgba(168, 85, 247, 0.45);
    color: #a855f7;
    box-shadow: inset 0 0 0 1px rgba(168, 85, 247, 0.22), 0 10px 16px -14px rgba(124, 58, 237, 0.95);
}

.dash-tab-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 1.45rem;
    width: 1.45rem;
}

.dash-tab-icon svg {
    width: 1.28rem;
    height: 1.28rem;
}

.dash-center-fab {
    display: grid;
    flex: 0 0 auto;
    scroll-snap-align: center;
    place-items: center;
    padding: 0;
    height: 4.2rem;
    width: 4.2rem;
    border: none;
    border-radius: 9999px;
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
    color: #f5f3ff;
    line-height: 0;
    box-shadow: 0 18px 30px -20px rgba(91, 33, 182, 0.92);
}

.dash-center-fab-icon {
    display: block;
    width: 2rem;
    height: 2rem;
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    transform: translateY(0.5px);
}

@media (min-width: 420px) {
    .dash-section-title {
        font-size: 1.9rem;
    }

    .dash-category-card {
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: center;
        gap: 1.1rem;
    }

    .dash-donut-wrap {
        margin: 0;
        height: 9.8rem;
        width: 9.8rem;
    }
}

.dash-goals-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.8rem;
}

.dash-goals-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(226, 232, 240, 0.88);
}

.dash-goals-icon svg {
    width: 1.85rem;
    height: 1.85rem;
}

.dash-goal-card {
    border-radius: 1.8rem;
    background: linear-gradient(185deg, #181c26 0%, #141924 100%);
    padding: 1.2rem 1rem 1rem;
    box-shadow: 0 20px 38px -30px rgba(2, 8, 22, 0.9);
}

.dash-goal-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 5.2rem;
    height: 5.2rem;
    border-radius: 9999px;
    background: #0ea5e9;
    color: #e0f2fe;
}

.dash-goal-badge svg {
    width: 2.25rem;
    height: 2.25rem;
}

.dash-goal-progress-wrap {
    margin-top: 2rem;
}

.dash-goal-progress-track {
    position: relative;
    height: 3rem;
    border-radius: 9999px;
    background: rgba(30, 41, 59, 0.5);
    overflow: hidden;
}

.dash-goal-progress-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
}

.dash-goal-percent {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(226, 232, 240, 0.85);
    font-size: 1.05rem;
    font-weight: 500;
}

.dash-goal-values {
    margin: 1rem 0 0;
    color: rgba(203, 213, 225, 0.86);
    font-size: 1.55rem;
    font-weight: 500;
}

.dash-goal-more {
    margin-top: 1.5rem;
    display: inline-flex;
    margin-left: auto;
    color: #7c3aed;
    font-size: 1.75rem;
    font-weight: 500;
    text-decoration: none;
}

.dash-manage-home-btn {
    margin: 2rem auto 0;
    display: block;
    border: none;
    border-radius: 9999px;
    padding: 0.9rem 2.2rem;
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
    color: #f5f3ff;
    font-size: 1.12rem;
    font-weight: 500;
    letter-spacing: 0.01em;
}

.dash-manage-home-btn:active {
    transform: scale(0.98);
}

@media (max-width: 420px) {
    .dash-goal-values {
        font-size: 1.12rem;
    }

    .dash-goal-more {
        font-size: 0.98rem;
    }

    .dash-manage-home-btn {
        width: 100%;
        max-width: 20rem;
        font-size: 1.02rem;
    }
}
.goal-progress-track {
    position: relative;
    height: 0.9rem;
    border-radius: 9999px;
    background: rgba(30, 41, 59, 0.5);
    overflow: hidden;
}

.goal-progress-fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
}

.dash-goal-title {
    margin: 1rem 0 0;
    color: #f8fafc;
    font-size: 1.1rem;
    font-weight: 600;
}

.dash-goal-remaining {
    margin: 0.45rem 0 0;
    color: rgba(203, 213, 225, 0.82);
    font-size: 0.85rem;
}

.dash-manage-home-btn {
    text-decoration: none;
    text-align: center;
}

.dash-user-menu {
    position: relative;
    justify-self: end;
}

.dash-gift-btn {
    border: none;
    cursor: pointer;
}

.dash-gift-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(196, 181, 253, 0.65), 0 14px 26px -20px rgba(124, 58, 237, 0.95);
}

.dash-user-menu-panel {
    position: absolute;
    right: 0;
    top: 3.55rem;
    z-index: 40;
    display: grid;
    gap: 0.35rem;
    min-width: 13.4rem;
    border-radius: 1.3rem;
    border: 1px solid rgba(100, 116, 139, 0.4);
    background: linear-gradient(185deg, #1a1d27 0%, #151925 100%);
    padding: 1.15rem 1.05rem 1.1rem;
    box-shadow: 0 18px 34px -24px rgba(2, 8, 22, 0.95);
}

.dash-user-menu-name {
    margin: 0;
    color: #f8fafc;
    font-size: 0.94rem;
    font-weight: 700;
    line-height: 1.25;
}

.dash-user-menu-meta {
    margin: 0;
    color: rgba(203, 213, 225, 0.82);
    font-size: 0.74rem;
    line-height: 1.35;
}

.dash-user-menu-actions {
    display: grid;
    gap: 0.68rem;
    margin-top: 0.45rem;
}

.dash-user-menu-panel form {
    margin: 0;
}

.dash-user-menu-link,
.dash-user-menu-logout {
    display: block;
    width: 100%;
    border: none;
    border-radius: 0.8rem;
    background: rgba(30, 41, 59, 0.55);
    color: #e2e8f0;
    text-decoration: none;
    text-align: center;
    font-size: 0.84rem;
    font-weight: 600;
    padding: 0.84rem 1rem;
}

.dash-user-menu-logout {
    margin-top: 0;
    background: rgba(190, 24, 93, 0.28);
    color: #fecdd3;
    cursor: pointer;
}

.dash-due-menu {
    position: relative;
}

.dash-icon-btn-notify {
    position: relative;
    cursor: pointer;
    height: 2.82rem;
    width: 2.82rem;
}

.dash-icon-btn-notify svg {
    width: 1.45rem;
    height: 1.45rem;
}

.dash-icon-btn-notify:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(196, 181, 253, 0.6);
}

.dash-notify-dot {
    position: absolute;
    right: -0.2rem;
    top: -0.25rem;
    min-width: 1.1rem;
    height: 1.1rem;
    border-radius: 9999px;
    background: #ef4444;
    color: #fff;
    font-size: 0.64rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.2rem;
    border: 2px solid #1a1d27;
}

.dash-due-panel {
    position: absolute;
    left: 0;
    top: 3rem;
    z-index: 40;
    width: min(20rem, calc(100vw - 2.2rem));
    border-radius: 1rem;
    border: 1px solid rgba(100, 116, 139, 0.4);
    background: linear-gradient(185deg, #1a1d27 0%, #151925 100%);
    padding: 0.75rem;
    box-shadow: 0 18px 28px -20px rgba(2, 8, 22, 0.9);
}

.dash-due-title {
    margin: 0;
    color: #f8fafc;
    font-size: 0.82rem;
    font-weight: 700;
}

.dash-due-meta {
    margin: 0.2rem 0 0.6rem;
    color: rgba(203, 213, 225, 0.82);
    font-size: 0.73rem;
}

.dash-due-list {
    display: grid;
    gap: 0.45rem;
    max-height: 15rem;
    overflow: auto;
    padding-right: 0.1rem;
}

.dash-due-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.5rem;
    border-radius: 0.8rem;
    background: rgba(15, 23, 42, 0.45);
    border: 1px solid rgba(71, 85, 105, 0.32);
    padding: 0.42rem 0.5rem;
}

.dash-due-date {
    color: #e2e8f0;
    font-size: 0.72rem;
    font-weight: 700;
}

.dash-due-name {
    margin: 0;
    color: #f8fafc;
    font-size: 0.74rem;
    font-weight: 600;
    line-height: 1.2;
}

.dash-due-sub {
    margin: 0.12rem 0 0;
    color: rgba(203, 213, 225, 0.75);
    font-size: 0.66rem;
}

.dash-due-right {
    text-align: right;
}

.dash-due-amount {
    display: block;
    color: #fb7185;
    font-size: 0.74rem;
    font-weight: 700;
}

.dash-due-status {
    display: inline-flex;
    margin-top: 0.15rem;
    font-size: 0.61rem;
    font-weight: 700;
}

.dash-due-status-overdue {
    color: #f87171;
}

.dash-due-status-today {
    color: #facc15;
}

.dash-due-status-open {
    color: #38bdf8;
}

.dash-due-empty {
    margin: 0;
    color: rgba(203, 213, 225, 0.78);
    font-size: 0.75rem;
}

.dash-due-link {
    margin-top: 0.6rem;
    display: block;
    text-align: center;
    border-radius: 0.8rem;
    background: rgba(124, 58, 237, 0.28);
    color: #ddd6fe;
    text-decoration: none;
    font-size: 0.76rem;
    font-weight: 700;
    padding: 0.5rem 0.65rem;
}

.dash-due-menu,
.dash-user-menu {
    z-index: 35;
    flex-shrink: 0;
}

.dash-icon-btn-notify,
.dash-gift-btn {
    pointer-events: auto;
}

.dash-month-nav {
    position: relative;
    z-index: 20;
}

/* Monetary values: keep single line and aligned in BR format */
.dash-balance-value,
.dash-flow-value,
.dash-alert-amount,
.dash-legend-amount,
.dash-goal-values,
.txn-balance-value,
.txn-amount,
.app-item-value,
.dash-due-amount {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.dash-flow-value {
    font-size: clamp(1rem, 4.3vw, 1.45rem);
    line-height: 1.05;
}

.dash-flow-item > div {
    min-width: 0;
}


.dash-category-card-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.dash-category-card-clickable {
    cursor: pointer;
    transition: transform 0.12s ease-out, box-shadow 0.12s ease-out;
}

.dash-category-card-clickable:active {
    transform: scale(0.995);
}

.charts-screen {
    display: grid;
    gap: 0.95rem;
    color: #f8fafc;
}

.charts-topbar {
    display: grid;
    grid-template-columns: 3.1rem 1fr 3.1rem;
    align-items: center;
    gap: 0.85rem;
}

.charts-title {
    margin: 0;
    text-align: center;
    font-size: 2rem;
    font-weight: 600;
}

.charts-circle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 9999px;
    border: 1px solid rgba(148, 163, 184, 0.32);
    background: rgba(17, 24, 39, 0.48);
    color: #e2e8f0;
    text-decoration: none;
}

.charts-circle-btn svg {
    width: 1.6rem;
    height: 1.6rem;
}

.charts-segmented {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-radius: 9999px;
    background: #4a4b52;
    padding: 0.28rem;
    gap: 0.3rem;
}

.charts-segment-btn {
    border: none;
    height: 3rem;
    border-radius: 9999px;
    background: transparent;
    color: #f8fafc;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.charts-segment-btn svg {
    width: 1.65rem;
    height: 1.65rem;
}

.charts-segment-btn-active {
    background: #f8fafc;
    color: #7c3aed;
}

.charts-segment-btn:disabled {
    opacity: 0.72;
}

.charts-chip-row {
    display: flex;
    gap: 0.55rem;
    overflow-x: auto;
    padding-bottom: 0.1rem;
}

.charts-chip-row::-webkit-scrollbar {
    height: 0;
}

.charts-chip {
    flex: 0 0 auto;
    border-radius: 9999px;
    background: rgba(71, 85, 105, 0.4);
    color: rgba(241, 245, 249, 0.95);
    padding: 0.55rem 1rem;
    font-size: 0.95rem;
    white-space: nowrap;
}

.charts-card {
    position: relative;
    border-radius: 1.8rem;
    background: linear-gradient(185deg, #181c26 0%, #141924 100%);
    box-shadow: 0 22px 36px -28px rgba(2, 8, 22, 0.95);
    padding: 1rem;
}

.charts-month-nav {
    display: grid;
    grid-template-columns: 2rem 1fr 2rem;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.95rem;
}

.charts-month-arrow {
    color: rgba(226, 232, 240, 0.82);
    text-decoration: none;
    font-size: 2rem;
    text-align: center;
    line-height: 1;
}

.charts-month-title {
    margin: 0;
    text-align: center;
    color: rgba(226, 232, 240, 0.86);
    font-size: 1.05rem;
    font-weight: 600;
}

.charts-donut-grid {
    display: grid;
    gap: 1rem;
}

.charts-donut {
    position: relative;
    margin: 0 auto;
    width: min(18rem, 86vw);
    aspect-ratio: 1 / 1;
    border-radius: 9999px;
    display: grid;
    place-items: center;
}

.charts-donut-center {
    width: 63%;
    height: 63%;
    border-radius: 9999px;
    background: #1a1e29;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.charts-donut-label {
    color: rgba(226, 232, 240, 0.72);
    font-size: 0.92rem;
}

.charts-donut-value {
    margin-top: 0.35rem;
    color: rgba(226, 232, 240, 0.96);
    font-size: 1.18rem;
    font-weight: 700;
}

.charts-floating-switch {
    position: absolute;
    right: 0.95rem;
    bottom: 0.95rem;
    width: 3.05rem;
    height: 3.05rem;
    border: none;
    border-radius: 9999px;
    background: rgba(248, 250, 252, 0.92);
    color: #3f3f46;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.charts-floating-switch svg {
    width: 1.45rem;
    height: 1.45rem;
}

.charts-list-card {
    padding-top: 1.1rem;
    padding-bottom: 1.1rem;
}

.charts-list-wrap {
    display: grid;
    gap: 0.95rem;
}
.charts-ranking-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    margin-bottom: 0.6rem;
}

.charts-ranking-title {
    margin: 0;
    color: #f8fafc;
    font-size: 1rem;
    font-weight: 700;
}

.charts-ranking-scope {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    background: rgba(124, 58, 237, 0.25);
    color: #ddd6fe;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.28rem 0.58rem;
}

.charts-ranking-note {
    margin: 0 0 0.75rem;
    color: rgba(226, 232, 240, 0.82);
    font-size: 0.78rem;
}

.charts-rank {
    min-width: 2.1rem;
    height: 2.1rem;
    border-radius: 9999px;
    background: rgba(100, 116, 139, 0.35);
    color: #f8fafc;
    font-size: 0.82rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.charts-list-row {
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    align-items: center;
    gap: 0.75rem;
}

.charts-list-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #f8fafc;
    font-size: 1rem;
    font-weight: 700;
}

.charts-list-name {
    margin: 0;
    color: #f8fafc;
    font-size: 0.95rem;
    font-weight: 600;
}

.charts-list-meta {
    margin: 0.18rem 0 0;
    color: rgba(203, 213, 225, 0.72);
    font-size: 0.8rem;
}

.charts-list-right {
    text-align: right;
}

.charts-list-amount {
    margin: 0;
    color: #fb7185;
    font-size: 0.95rem;
    font-weight: 700;
}

.charts-list-percent {
    margin: 0.18rem 0 0;
    color: rgba(203, 213, 225, 0.74);
    font-size: 0.8rem;
}


.charts-list-preview {
    margin-top: 0.85rem;
}

@media (min-width: 430px) {
    .charts-donut {
        width: 12.5rem;
    }
}
.charts-trend-card {
    padding-top: 1.1rem;
    padding-bottom: 1.1rem;
}

.charts-trend-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    margin-bottom: 0.65rem;
}

.charts-trend-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.55rem;
    align-items: end;
}

.charts-trend-col {
    display: grid;
    gap: 0.42rem;
    justify-items: center;
}

.charts-trend-bar-wrap {
    width: 100%;
    height: 8.4rem;
    border-radius: 0.8rem;
    background: rgba(71, 85, 105, 0.14);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0.35rem 0.28rem;
}

.charts-trend-bar {
    width: 100%;
    min-height: 0.35rem;
    border-radius: 9999px;
    background: linear-gradient(180deg, #f43f5e 0%, #be123c 100%);
    box-shadow: 0 8px 20px -14px rgba(244, 63, 94, 0.95);
}

.charts-trend-col-current .charts-trend-bar {
    background: linear-gradient(180deg, #a78bfa 0%, #7c3aed 100%);
    box-shadow: 0 8px 20px -14px rgba(124, 58, 237, 0.95);
}

.charts-trend-label {
    margin: 0;
    color: rgba(226, 232, 240, 0.82);
    font-size: 0.76rem;
    font-weight: 600;
}

.charts-trend-value {
    margin: 0;
    color: rgba(226, 232, 240, 0.94);
    font-size: 0.73rem;
    text-align: center;
}

@media (max-width: 380px) {
    .charts-trend-grid {
        gap: 0.34rem;
    }

    .charts-trend-value {
        font-size: 0.68rem;
    }
}



[data-swipe-nav] {
    touch-action: auto;
    cursor: grab;
}

[data-swipe-nav].is-dragging {
    cursor: grabbing;
    user-select: none;
}

.shopping-summary-card {
    padding-block: 0.9rem;
}

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

.shopping-summary-label {
    margin: 0;
    color: rgba(203, 213, 225, 0.72);
    font-size: 0.72rem;
}

.shopping-summary-value {
    margin: 0.22rem 0 0;
    color: #f8fafc;
    font-size: 0.98rem;
    font-weight: 700;
}

.shopping-item-head {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
}

.shopping-quick-form {
    margin: 0;
    flex-shrink: 0;
}

.shopping-quick-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    min-height: 2.6rem;
    border-radius: 9999px;
    border: 1px solid rgba(71, 85, 105, 0.5);
    background: rgba(15, 23, 42, 0.55);
    color: #cbd5e1;
    padding: 0.28rem 0.58rem 0.28rem 0.32rem;
    font-size: 0.74rem;
    font-weight: 700;
}

.shopping-quick-toggle-box {
    width: 2rem;
    height: 2rem;
    border-radius: 0.62rem;
    border: 2px solid rgba(148, 163, 184, 0.55);
    background: rgba(30, 41, 59, 0.65);
    color: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.shopping-quick-toggle-box svg {
    width: 1rem;
    height: 1rem;
    opacity: 0;
    transform: scale(0.72);
    transition: opacity 0.14s ease, transform 0.14s ease;
}

.shopping-quick-toggle-text {
    letter-spacing: 0.01em;
}

.shopping-quick-toggle.is-checked {
    border-color: rgba(34, 197, 94, 0.45);
    background: rgba(20, 83, 45, 0.28);
}

.shopping-quick-toggle.is-checked .shopping-quick-toggle-box {
    border-color: rgba(34, 197, 94, 0.9);
    background: rgba(34, 197, 94, 0.2);
    color: #86efac;
}

.shopping-quick-toggle.is-checked .shopping-quick-toggle-box svg {
    opacity: 1;
    transform: scale(1);
}

.shopping-quick-toggle.is-checked .shopping-quick-toggle-text {
    color: #86efac;
}

.shopping-quick-toggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(134, 239, 172, 0.28);
}

.shopping-item-title-done {
    color: rgba(203, 213, 225, 0.74);
    text-decoration: line-through;
    text-decoration-thickness: 2px;
}

.shopping-item-notes {
    margin-top: 0.5rem;
    color: rgba(203, 213, 225, 0.8);
    font-size: 0.78rem;
}

.shopping-inline-form {
    margin: 0;
}

.shopping-link-toggle {
    border: none;
    background: transparent;
    color: #86efac;
    font-size: 0.76rem;
    font-weight: 700;
    padding: 0;
}

.shopping-link-toggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(134, 239, 172, 0.35);
    border-radius: 0.35rem;
}

@media (max-width: 420px) {
    .shopping-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .shopping-summary-grid > :last-child {
        grid-column: 1 / -1;
    }
}

/* Monochrome palette override: black surfaces and white icons/text, while
   monetary state colors remain defined by their existing amount classes. */
:root {
    --mono-bg: #000000;
    --mono-surface: #050505;
    --mono-surface-alt: #0c0c0c;
    --mono-border: rgba(255, 255, 255, 0.12);
    --mono-border-strong: rgba(255, 255, 255, 0.22);
    --mono-text: #ffffff;
    --mono-muted: rgba(255, 255, 255, 0.76);
    --mono-soft: rgba(255, 255, 255, 0.58);
    --mono-button-bg: #ffffff;
    --mono-button-text: #000000;
}

body,
.bg-app,
.transactions-body,
.dash-body {
    background: linear-gradient(180deg, #050505 0%, #000000 100%) !important;
    color: var(--mono-text);
}

.bg-app,
.transactions-body {
    background:
        radial-gradient(circle at 50% -20%, rgba(255, 255, 255, 0.05), transparent 35%),
        linear-gradient(180deg, #050505 0%, #000000 100%) !important;
}

.app-shell,
.transactions-shell,
.dash-shell,
.app-header,
.app-bottom-nav,
.txn-bottom-nav,
.dash-bottom-nav,
.card,
.txn-balance-card,
.dash-hero-card,
.dash-alert-card,
.dash-category-card,
.dash-goal-card,
.charts-card,
.app-modal-panel,
.dash-user-menu-panel,
.dash-due-panel,
.login-loader-card,
.post-login-loader-card,
.txn-search-wrap,
.charts-segmented,
.charts-donut-center,
.dash-due-item,
.shopping-quick-toggle,
.goal-progress-track,
.dash-goal-progress-track {
    background: linear-gradient(180deg, var(--mono-surface-alt) 0%, var(--mono-bg) 100%) !important;
    border-color: var(--mono-border) !important;
    box-shadow: none !important;
}

.app-open-loader-overlay,
.login-loader-overlay,
.post-login-loader-overlay {
    background:
        radial-gradient(circle at 50% -20%, rgba(255, 255, 255, 0.06), transparent 36%),
        linear-gradient(180deg, rgba(5, 5, 5, 0.96) 0%, rgba(0, 0, 0, 0.98) 100%) !important;
}

.app-brand,
.app-title,
.app-title-sm,
.app-page,
.transactions-screen,
.dash-screen,
.charts-screen,
.app-item-title,
.shopping-summary-value,
.shopping-quick-toggle,
.shopping-quick-toggle-box,
.shopping-quick-toggle-text,
.nav-item,
.txn-tab-link,
.dash-tab-link,
.charts-circle-btn,
.charts-segment-btn,
.charts-title,
.charts-ranking-title,
.charts-month-title,
.charts-list-name,
.charts-donut-value,
.charts-rank,
.app-top-action,
.app-btn-primary,
.app-btn-secondary,
.app-btn-danger,
.app-mini-btn,
.app-mini-btn-view,
.app-link-inline,
.app-link-edit,
.app-link-danger,
.dash-goal-more,
.dash-due-link,
.dash-user-menu-link,
.dash-user-menu-logout,
.dash-due-title,
.dash-due-name,
.dash-due-date,
.dash-user-menu-name,
.txn-day-label,
.txn-month-title,
.charts-floating-switch {
    color: var(--mono-text) !important;
}

.app-subtitle,
.app-muted-text,
.app-user-chip,
.app-item-meta,
.app-touch-hint,
.app-field-label,
.app-field-help,
.shopping-summary-label,
.shopping-item-notes,
.shopping-item-title-done,
.txn-balance-label,
.txn-search-icon,
.dash-balance-label,
.dash-flow-label,
.dash-section-title,
.dash-user-menu-meta,
.dash-due-meta,
.dash-due-sub,
.dash-due-empty,
.dash-goal-remaining,
.charts-donut-label,
.charts-list-meta,
.charts-list-percent,
.charts-ranking-note,
.charts-trend-label,
.charts-trend-value,
.charts-chip,
.charts-ranking-scope,
.charts-month-arrow,
.txn-month-arrow,
.dash-month-arrow,
.app-empty-card {
    color: var(--mono-muted) !important;
}

.app-top-action,
.app-btn-primary,
.app-btn-secondary,
.app-btn-danger,
.app-mini-btn,
.app-mini-btn-view,
.app-fab,
.app-center-fab,
.txn-center-fab,
.dash-center-fab,
.dash-manage-home-btn,
.dash-user-menu-link,
.dash-user-menu-logout,
.dash-due-link,
.charts-circle-btn,
.charts-floating-switch,
.charts-segment-btn,
.charts-segment-btn-active {
    background: var(--mono-button-bg) !important;
    border: 1px solid var(--mono-button-bg) !important;
    color: var(--mono-button-text) !important;
    box-shadow: none !important;
}

.nav-item-active,
.txn-tab-active,
.txn-tab-link[aria-current="page"],
.dash-tab-active,
.dash-tab-link[aria-current="page"],
.charts-segment-btn-active {
    background: var(--mono-button-bg) !important;
    border-color: var(--mono-button-bg) !important;
    color: var(--mono-button-text) !important;
    box-shadow: none !important;
}

.nav-item,
.nav-item-active,
.txn-tab-link,
.dash-tab-link,
.txn-tab-icon,
.dash-tab-icon,
.txn-item-icon-wrap,
.dash-icon-btn-notify,
.dash-gift-btn,
.dash-goals-icon,
.dash-alert-icon,
.dash-goal-badge,
.dash-flow-icon,
.charts-circle-btn,
.charts-floating-switch,
.app-fab,
.app-center-fab,
.txn-center-fab,
.dash-center-fab {
    color: var(--mono-text) !important;
}

.nav-item-active,
.txn-tab-active,
.txn-tab-link[aria-current="page"],
.dash-tab-active,
.dash-tab-link[aria-current="page"],
.charts-segment-btn-active,
.app-top-action,
.app-btn-primary,
.app-btn-secondary,
.app-btn-danger,
.app-mini-btn,
.app-mini-btn-view,
.app-fab,
.app-center-fab,
.txn-center-fab,
.dash-center-fab,
.dash-manage-home-btn,
.dash-user-menu-link,
.dash-user-menu-logout,
.dash-due-link,
.charts-circle-btn,
.charts-floating-switch,
.charts-segment-btn,
.shopping-quick-toggle {
    color: var(--mono-button-text) !important;
}

.txn-tab-active .txn-tab-icon,
.txn-tab-link[aria-current="page"] .txn-tab-icon,
.dash-tab-active .dash-tab-icon,
.dash-tab-link[aria-current="page"] .dash-tab-icon {
    color: var(--mono-button-text) !important;
}

.txn-item-icon-wrap,
.dash-alert-icon,
.dash-goal-badge,
.dash-flow-icon-income,
.dash-flow-icon-expense,
.shopping-quick-toggle-box,
.charts-rank,
.charts-chip,
.charts-ranking-scope {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: var(--mono-border-strong) !important;
    color: var(--mono-text) !important;
}

.shopping-quick-toggle.is-checked,
.shopping-quick-toggle.is-checked .shopping-quick-toggle-box,
.shopping-quick-toggle.is-checked .shopping-quick-toggle-text,
.badge,
.badge-income,
.badge-expense,
.badge-transfer {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: var(--mono-border) !important;
    color: var(--mono-text) !important;
}

.shopping-quick-toggle {
    background: var(--mono-button-bg) !important;
    border-color: var(--mono-button-bg) !important;
    color: var(--mono-button-text) !important;
}

.shopping-quick-toggle-box {
    background: var(--mono-button-text) !important;
    border-color: var(--mono-button-text) !important;
    color: var(--mono-button-bg) !important;
}

.shopping-quick-toggle.is-checked {
    background: var(--mono-button-bg) !important;
    border-color: var(--mono-button-bg) !important;
}

.shopping-quick-toggle.is-checked .shopping-quick-toggle-box,
.shopping-quick-toggle.is-checked .shopping-quick-toggle-text {
    border-color: transparent !important;
}

.shopping-quick-toggle.is-checked .shopping-quick-toggle-box {
    background: var(--mono-button-text) !important;
    border-color: var(--mono-button-text) !important;
    color: var(--mono-button-bg) !important;
}

.shopping-quick-toggle.is-checked .shopping-quick-toggle-text {
    background: transparent !important;
    color: var(--mono-button-text) !important;
}

.dash-gift-btn {
    background: var(--mono-surface-alt) !important;
    border: 1px solid var(--mono-border-strong) !important;
    color: var(--mono-text) !important;
    box-shadow: none !important;
}

.dash-gift-dot {
    background: #ffffff !important;
    border-color: #000000 !important;
}

.shopping-quick-toggle-box svg {
    color: currentColor !important;
}

.dash-notify-dot {
    background: #ffffff !important;
    color: #000000 !important;
    border-color: #000000 !important;
}

.dash-due-status-overdue,
.dash-due-status-today,
.dash-due-status-open {
    color: var(--mono-text) !important;
}

.txn-search-input,
.txn-search-input::placeholder,
.app-modal-content input,
.app-modal-content select,
.app-modal-content textarea {
    color: var(--mono-text) !important;
}

.app-page input:not([type="checkbox"]):not([type="radio"]),
.app-page select,
.app-page textarea,
.transactions-screen input,
.transactions-screen select,
.transactions-screen textarea,
.dash-screen input,
.dash-screen select,
.dash-screen textarea {
    background: var(--mono-surface) !important;
    border-color: var(--mono-border) !important;
    color: var(--mono-text) !important;
    box-shadow: none !important;
}

input[type="checkbox"],
input[type="radio"] {
    accent-color: #ffffff;
}