@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");
* { box-sizing: border-box; }
html {
    overflow-x: hidden;
    overflow-y: auto;

    scrollbar-gutter: auto;

    overflow-anchor: none;

    scrollbar-width: none;
    background-color: #121212;
}

@supports (overflow: overlay) {
    html {
        overflow-y: overlay;
        scrollbar-gutter: auto;
    }
}

html::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

body::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}
body {
    margin: 0;
    min-height: 100vh;
    scrollbar-width: none;
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    background-color: var(--rm-page-bg, #121212);
    background-image: url("../img/Background.png?v=20260411");
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: scroll;
    color: var(--rm-text, #f4f4f5);

    overflow-x: hidden;
    overflow-y: visible;
}
@supports (min-height: 100dvh) {
    body {
        min-height: 100dvh;
    }
}

:root {
    --rm-page-bg: #121212;
    --rm-surface: #1a1a1f;
    --rm-surface-2: #222228;
    --rm-border: #333338;
    --rm-border-soft: #2e2e35;
    --rm-text: #f4f4f5;
    --rm-text-muted: #a1a1aa;
    --rm-yellow: #f0c040;
    --rm-gold-active-gradient: linear-gradient(180deg, #fff9e0 0%, #fde68a 28%, #f0c040 55%, #d4a017 100%);
    --rm-gold-active-text: #0a0a0a;
    --rm-gold-active-border: rgba(240, 192, 64, 0.85);
    --rm-cta-auth-text: #0a0a0a;
    --rm-cta-login-gradient: var(--rm-gold-active-gradient);
    --rm-cta-hero-gradient: linear-gradient(90deg, #2a2418 0%, #4a3c14 35%, #f0c040 72%, #c9a035 100%);
    --rm-cta-salir-gradient: linear-gradient(180deg, #3d3d45 0%, #2a2a30 100%);
    --rm-cta-salir-text: #f4f4f5;

    --rm-registrar-gradient: linear-gradient(180deg, #fff3a8 0%, #f0c040 42%, #c9a035 100%);
    --rm-registrar-gradient-hover: linear-gradient(180deg, #fff8c8 0%, #f5c84a 40%, #d4a017 100%);
    --rm-registrar-text: #0a0a0a;
    --rm-registrar-border: rgba(240, 192, 64, 0.55);
    --rm-registrar-shadow: 0 8px 22px rgba(240, 192, 64, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.45);
    --rm-month-rail-outline: rgba(240, 192, 64, 0.4);
    --rm-month-rail-inset-glow: rgba(240, 192, 64, 0.12);
    --rm-month-divider: rgba(255, 255, 255, 0.1);
    --rm-month-label: #e4e4e7;
    --rm-month-label-muted: #a1a1aa;
    --rm-month-active-cell: linear-gradient(180deg, #fff9e0 0%, #f0c040 55%, #c9a035 100%);
    --rm-month-active-text: #0a0a0a;
    --rm-topbar-radius: 14px;
    --rm-topbar-link-radius: 8px;
    --rm-empty-state-bg: rgba(240, 192, 64, 0.1);
    --rm-empty-state-fg: #f4f4f5;

    --rm-header-forest: #052010;
    --rm-header-underline: #fdcb58;
    --rm-header-nav-muted: #d1d5db;
    --rm-header-active-icon: #76ba1b;
}
.topbar {
    background: #141418;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
}

.topbar.topbar--hero {
    display: block;
    padding: 0;
    background: transparent;
}

.topbar--hero {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin-right: 0;
    --topbar-bar-h: 56px;
    --topbar-hero-reserve-extra: 8px;
    padding-top: calc(env(safe-area-inset-top, 0px) + var(--topbar-bar-h) + var(--topbar-hero-reserve-extra));
    padding-left: 0;
    padding-right: 0;

    overflow-x: hidden;
    overflow-y: visible;
    background: var(--rm-header-forest);
}

.topbar--hero.topbar--hero-login {
    --topbar-hero-reserve-extra: 8px;

    overflow-x: visible;
}

body.auth-page--landing .topbar--hero.topbar--hero-login {
    --topbar-bar-h: 72px;
    --topbar-hero-reserve-extra: 0px;
}

.topbar--hero.topbar--hero-login .topbar-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px 12px;
    padding-right: max(22px, calc(env(safe-area-inset-right, 0px) + 20px));
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
}
.topbar--hero-login .topbar-bar .brand {
    min-width: 0;
    justify-self: start;
    position: relative;
    z-index: 7;
}

.topbar--hero.topbar--hero-login .topbar-bar nav.auth-landing-nav {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    transform: none;
    width: auto;
    max-width: none;
    min-width: 0;
    padding: 0;
    border-right: none;
    box-shadow: none;
    overflow: visible;
}
@media (prefers-reduced-motion: reduce) {
    .topbar-hero-splash {
        transition: none !important;
    }
    .topbar-hero-art {
        transition: none;
    }
}

.topbar-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: var(--topbar-bar-h);
    padding: 8px 16px;
    padding-left: max(12px, env(safe-area-inset-left, 0px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
    padding-top: max(8px, env(safe-area-inset-top, 0px));
    padding-bottom: 8px;
    box-sizing: border-box;
    background:
        radial-gradient(circle at 72% 36%, rgba(240, 192, 64, 0.07) 0, rgba(240, 192, 64, 0) 42%),
        linear-gradient(180deg, #1f1f24 0%, #141418 100%);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
}
.topbar-bar .brand,
.topbar-bar nav,
.topbar-bar .lang {
    position: relative;
    z-index: 5;
}
.topbar-bar nav {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.topbar--hero .topbar-bar {
    padding-right: max(16px, env(safe-area-inset-right, 0px));
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    top: env(safe-area-inset-top, 0px);
    left: 0;
    right: 0;
    width: 100%;
    min-height: 52px;
    padding-top: 0;
    padding-bottom: 0;
    background: transparent;
    box-shadow: none;
    isolation: isolate;
}

.topbar--hero .topbar-bar::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    border-radius: 0;
    z-index: 0;
    pointer-events: none;
    background:
        repeating-linear-gradient(
            0deg,
            rgba(255, 255, 255, 0.022) 0px,
            rgba(255, 255, 255, 0.022) 1px,
            transparent 1px,
            transparent 3px
        ),
        repeating-linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.06) 0px,
            rgba(0, 0, 0, 0.06) 1px,
            transparent 1px,
            transparent 4px
        ),
        radial-gradient(ellipse 130% 190% at 45% -65%, rgba(74, 222, 128, 0.2), transparent 58%),
        linear-gradient(180deg, #080d12 0%, #0b1d12 55%, #0a2c16 100%);
    border: none;
    border-bottom: 1px solid rgba(74, 222, 128, 0.5);
    box-shadow:
        inset 0 -1px 0 rgba(255, 255, 255, 0.04),
        0 10px 24px rgba(0, 0, 0, 0.4);
}
@media (max-width: 999px) {
    .topbar--hero .topbar-bar::before {
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
    }
}

.topbar-hero-splash {
    display: none;
}
.topbar--hero.topbar--splash-collapsed .topbar-hero-splash {
    display: none;
}
.topbar--hero::after {
    content: none;
}

.topbar-hero-art {
    display: none;
}
.topbar--hero.topbar--splash-collapsed .topbar-hero-art {
    display: none;
}
.brand {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    padding: 5px 12px;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
.topbar--hero .brand {
    background: transparent;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    border-radius: var(--rm-topbar-radius);
}
.brand-logotipo {

    height: calc(var(--topbar-bar-h, 56px) - 16px);
    min-height: 30px;
    max-height: 44px;
    width: auto;
    object-fit: contain;
}
.topbar nav { display: flex; gap: 8px; flex-wrap: nowrap; }
.topbar-mobile-drawer-head,
.topbar-mobile-drawer-footer {
    display: none;
}

.richmind-app-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1090;
    min-height: 26px;
    padding: 4px 10px;
    border-radius: 6px 6px 0 0;
    border: 1px solid rgba(74, 222, 128, 0.28);
    background:
        linear-gradient(180deg, rgba(8, 14, 20, 0.96) 0%, rgba(6, 18, 12, 0.96) 100%);
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 0.72rem;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}
.richmind-app-footer__left {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    min-width: 0;
}
.richmind-app-footer__left i {
    color: #22c55e;
}
.richmind-app-footer__left strong {
    color: #22c55e;
    font-weight: 700;
}
.richmind-app-footer__links {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}
.richmind-app-footer__links a {
    color: #94a3b8;
    text-decoration: none;
}
.richmind-app-footer__links a:hover {
    color: #e2e8f0;
}
.richmind-app-footer__copy {
    white-space: nowrap;
    color: #64748b;
}
body.has-richmind-footer {
    padding-bottom: 34px;
}
@media (max-width: 1100px) {
    .richmind-app-footer {
        flex-wrap: wrap;
        row-gap: 4px;
        padding: 5px 9px;
        min-height: 30px;
    }
    .richmind-app-footer__links,
    .richmind-app-footer__copy {
        width: 100%;
    }
}
@media (max-width: 999px) {
    .richmind-app-footer {
        display: none;
    }
    body.has-richmind-footer {
        padding-bottom: 0;
    }
}
.topbar-menu-toggle {
    display: none;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    border-radius: 8px;
    width: 40px;
    height: 36px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    z-index: 3;
}
.topbar-menu-toggle span,
.topbar-menu-toggle::before,
.topbar-menu-toggle::after {
    content: "";
    display: block;
    width: 18px;
    height: 2px;
    background: #ffffff;
    border-radius: 999px;
    transition: transform 0.16s ease, opacity 0.16s ease;
    position: absolute;
    left: 50%;
    top: 50%;
}
.topbar-menu-toggle span {
    transform: translate(-50%, -50%);
}
.topbar-menu-toggle::before {
    transform: translate(-50%, -7px);
}
.topbar-menu-toggle::after {
    transform: translate(-50%, 5px);
}
.topbar-menu-toggle[aria-expanded="true"]::before {
    transform: translate(-50%, -50%) rotate(45deg);
}
.topbar-menu-toggle[aria-expanded="true"]::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}
.topbar-menu-toggle[aria-expanded="true"] span {
    opacity: 0;
}
.topbar--hero .topbar-menu-toggle {
    border-radius: var(--rm-topbar-radius);
}

.topbar--hero .topbar-bar__right {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    z-index: 6;
}
.topbar--hero .topbar-bar__right--login-only {
    justify-self: end;
    margin-left: 0;
    width: auto;
    max-width: 100%;
    min-width: 0;
    justify-content: flex-end;
}
.topbar-auth--guest {
    flex: 0 0 auto;
}
.topbar-auth--guest .auth-landing-nav {
    flex-wrap: nowrap;
}
.topbar--hero .topbar-bar__right--login-only .auth-landing-nav {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
}
.topbar--hero .topbar-bar__right--login-only .auth-landing-nav__ghost {
    padding: 10px 16px;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 10px;
}
.topbar--hero .topbar-bar__right--login-only .auth-landing-nav__cta {
    padding: 11px 18px;
    font-size: 0.92rem;
    font-weight: 700;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(234, 179, 8, 0.35);
}
.topbar--hero .topbar-bar__right--login-only .auth-landing-nav > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.topbar--hero .topbar-bar__right--login-only .auth-landing-nav > a.auth-landing-nav__cta--register {
    gap: 8px;
}
.topbar--hero .topbar-bar__right--login-only .auth-landing-nav__cta,
.topbar--hero .topbar-bar__right--login-only .auth-landing-nav__ghost {
    flex: 0 1 auto;
    min-width: 0;
}

.topbar--hero .topbar-bar__right--login-only .auth-landing-nav > a.auth-landing-nav__ghost {
    color: #ffffff;
    background: linear-gradient(180deg, #159a4f 0%, #0a5a2e 100%);
    border: 1px solid color-mix(in srgb, var(--auth-landing-green) 58%, #052e16);
    box-shadow: 0 2px 12px rgba(11, 96, 48, 0.42);
    font-weight: 700;
}
.topbar--hero .topbar-bar__right--login-only .auth-landing-nav > a.auth-landing-nav__ghost .auth-landing-nav__link-icon {
    color: #ffffff;
}
.topbar--hero .topbar-bar__right--login-only .auth-landing-nav > a.auth-landing-nav__cta {
    color: var(--rm-cta-auth-text);
    background: var(--rm-cta-login-gradient);
    border: 1px solid var(--rm-gold-active-border);
    box-shadow: 0 2px 12px rgba(234, 179, 8, 0.35);
    font-weight: 700;
}
.topbar--hero .topbar-bar__right--login-only .auth-landing-nav > a.auth-landing-nav__ghost:hover {
    background: linear-gradient(180deg, #18b05c 0%, #0c6a38 100%);
    border-color: color-mix(in srgb, var(--auth-landing-green) 72%, #052e16);
    filter: brightness(1.04);
}
.topbar--hero .topbar-bar__right--login-only .auth-landing-nav > a.auth-landing-nav__cta:hover {
    filter: brightness(1.06);
    background: var(--rm-cta-login-gradient);
}
.topbar--hero .topbar-bar__right--login-only .auth-landing-nav__cta--register .auth-landing-nav__link-icon {
    color: currentColor;
}
.topbar nav a {
    color: #ffffff;
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.08);
    font-weight: 700;
    font-size: 15px;
    line-height: 1;
    letter-spacing: 0.2px;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.topbar nav a:hover {
    background: rgba(255, 255, 255, 0.16);
}
.topbar nav a.active {
    background: var(--rm-gold-active-gradient);
    border-color: var(--rm-gold-active-border);
    color: var(--rm-gold-active-text);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.topbar nav .topbar-dropdown {
    position: relative;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.topbar nav .topbar-dropdown__trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    cursor: pointer;
    font: inherit;
    color: #ffffff;
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.08);
    font-weight: 700;
    font-size: 15px;
    line-height: 1;
    letter-spacing: 0.2px;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.topbar nav .topbar-dropdown__trigger:hover {
    background: rgba(255, 255, 255, 0.16);
}

.topbar nav .topbar-dropdown.is-open .topbar-dropdown__trigger,
.topbar nav .topbar-dropdown:has(.topbar-dropdown__panel a.active) .topbar-dropdown__trigger {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.25);
    color: #ffffff;
    box-shadow: none;
}
.topbar nav .topbar-dropdown__chev {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid currentColor;
    margin-top: 2px;
    transition: transform 0.18s ease;
}
.topbar nav .topbar-dropdown.is-open .topbar-dropdown__chev {
    transform: rotate(180deg);
}
.topbar nav .topbar-dropdown__panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 1300;
    display: none;
    flex-direction: column;
    gap: 4px;
    min-width: 220px;
    padding: 8px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(11, 96, 48, 0.98);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
}
.topbar nav .topbar-dropdown.is-open .topbar-dropdown__panel {
    display: flex;
}
.topbar nav .topbar-dropdown__panel a {
    display: block;
    color: #ffffff;
    text-decoration: none;
    white-space: nowrap;
    padding: 9px 12px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.08);
    font-weight: 700;
    font-size: 15px;
    line-height: 1;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.topbar nav .topbar-dropdown__panel a:hover {
    background: rgba(255, 255, 255, 0.16);
}
.topbar nav .topbar-dropdown__panel a.active {
    background: var(--rm-gold-active-gradient);
    border-color: var(--rm-gold-active-border);
    color: var(--rm-gold-active-text);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.topbar--hero .topbar-bar nav > a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 13px;
    font-size: clamp(0.86rem, 0.79rem + 0.22vw, 0.98rem);
    border-radius: var(--rm-topbar-link-radius);
    border: 1px solid transparent;
    background: transparent;
    color: var(--rm-header-nav-muted);
    font-weight: 500;
}
.topbar--hero .topbar-bar nav > a > i {
    font-size: 0.95em;
    opacity: 0.95;
    color: var(--rm-header-nav-muted);
}
.topbar--hero .topbar-bar nav > a:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: transparent;
    color: #f3f4f6;
}
.topbar--hero .topbar-bar nav > a:hover > i {
    color: #e5e7eb;
}
.topbar--hero .topbar-bar nav > a.active {
    position: relative;
    background: transparent;
    border-color: transparent;
    color: #ffffff;
    font-weight: 700;
    box-shadow: none;
}
.topbar--hero .topbar-bar nav > a.active > i {
    color: var(--rm-header-active-icon);
    opacity: 1;
}
@media (min-width: 1000px) {
    .topbar--hero .topbar-bar nav > a.active::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -10px;
        transform: translateX(-50%);
        width: 52%;
        max-width: 76px;
        height: 3px;
        border-radius: 2px;
        background: var(--rm-header-underline);
        box-shadow: 0 0 12px rgba(253, 203, 88, 0.55);
        pointer-events: none;
    }
}
.topbar--hero .topbar-bar nav .topbar-dropdown__trigger {
    border-radius: var(--rm-topbar-link-radius);
    background: transparent;
    border: 1px solid transparent;
    backdrop-filter: none;
    padding: 9px 13px;
    font-size: clamp(0.86rem, 0.79rem + 0.22vw, 0.98rem);
    color: var(--rm-header-nav-muted);
    font-weight: 500;
}
.topbar--hero .topbar-bar nav .topbar-dropdown__trigger:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #f3f4f6;
}
.topbar--hero .topbar-bar nav .topbar-dropdown--context-active .topbar-dropdown__trigger {
    background: rgba(253, 224, 71, 0.2);
    border-color: rgba(253, 224, 71, 0.55);
    color: #ffffff;
    box-shadow: 0 0 0 1px rgba(253, 224, 71, 0.35);
}
.topbar--hero .topbar-bar nav .topbar-dropdown.is-open .topbar-dropdown__trigger,
.topbar--hero .topbar-bar nav .topbar-dropdown:has(.topbar-dropdown__panel a.active) .topbar-dropdown__trigger {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.32);
    color: #ffffff;
    box-shadow: none;
}
.topbar--hero .topbar-bar nav .topbar-dropdown--context-active.is-open .topbar-dropdown__trigger,
.topbar--hero .topbar-bar nav .topbar-dropdown--context-active:has(.topbar-dropdown__panel a.active) .topbar-dropdown__trigger {
    background: rgba(253, 224, 71, 0.22);
    border-color: rgba(253, 224, 71, 0.55);
}
.topbar--hero .topbar-bar nav .topbar-dropdown__panel {
    border-radius: var(--rm-topbar-radius);
}
.topbar--hero .topbar-bar nav .topbar-dropdown__panel a {
    border-radius: max(6px, calc(var(--rm-topbar-link-radius) - 2px));
}
.topbar--hero .topbar-user-menu-trigger {

    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    padding: 0;
    border-radius: 999px;
    background: rgba(8, 30, 16, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    color: #f8fafc;
}
.topbar--hero .topbar-user-menu-trigger .fa-user {
    font-size: 0.98rem;
}
.lang { background: #1e1e24; color: #f0c040; border: 1px solid var(--rm-border); padding: 5px 8px; border-radius: 8px; font-weight: 600; font-size: 13px; }
.container { max-width: 1220px; margin: 18px auto; padding: 0 12px; }

.topbar--hero ~ main.container {
    margin-top: 0;
    padding-top: 84px;
    position: relative;
    z-index: 2;
}
.topbar--hero ~ main.container .panel {
    position: relative;
    z-index: 1;
}
.topbar--hero ~ main.container .subnav {
    position: relative;
    z-index: 1;
    margin-bottom: 0;
    border: none;
}
.cards { display: grid; gap: 12px; margin-bottom: 16px; }
.cards.five { grid-template-columns: repeat(5, 1fr); }
.cards.three { grid-template-columns: repeat(3, 1fr); }
.card {
    background: var(--rm-surface-2);
    border: 1px solid var(--rm-border);
    border-radius: 14px;
    padding: 14px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28);
    color: var(--rm-text);
}
.card h3 { margin: 0 0 8px; font-size: 14px; color: #475569; }
.card p { margin: 0; font-size: 22px; font-weight: 700; }
.card.negative { background: #1c2432; color: #fff; }
.card.negative p { color: #f87171; }
.ok { color: #16a34a; }
.warn { color: #ea580c; }
.panel {
    background: var(--rm-surface);
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 16px;
    border: none;
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.38);
    color: var(--rm-text);
}
.panel h1, .panel h2 { margin-top: 0; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.list-item {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.list-item small { display: block; margin-top: 4px; color: #64748b; }
.badge {
    border-radius: 999px;
    padding: 4px 10px;
    background: #e5e7eb;
    font-size: 12px;
}
.badge.ok { background: #dcfce7; color: #166534; }
.badge.warn { background: #ffedd5; color: #9a3412; }
.alert-list > div {
    background: #fff8db;
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 8px;
}
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.row.form { display: flex; gap: 10px; margin: 10px 0 14px; align-items: center; flex-wrap: wrap; }
.muted { color: var(--rm-text-muted); font-size: 13px; margin: 8px 0 0; }
.gastos-top {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 10px;
    align-items: stretch;
}
.gastos-top > .panel {
    padding: 10px 12px;
    margin-bottom: 0;
}
.gastos-head-panel {
    padding: 0;
}
.gastos-head-panel h1 {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
}
.gastos-head-panel h1 .head-panel-title-text {
    min-width: 0;
    line-height: 1.25;
}
.gastos-head-panel h1 [class$="-head-icon"] {
    flex-shrink: 0;
}
.gastos-head-panel p {
    margin: 0;
    font-size: 12px;
}
.gastos-head-panel .muted {
    margin-top: 4px;
}
.gastos-head-panel > div {
    min-width: 0;
}
.gastos-top .gastos-head-panel > div {
    flex: 1;
    min-height: 0;
}
.totals-panel-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    min-width: 0;
    width: 100%;
}
.totals-panel-row .totals-grid {
    flex: 0 0 auto;
    width: 100%;
}
.totals-panel__add-btn {
    flex-shrink: 0;
    align-self: center;
    margin-left: 0;
}
.page-expenses .gastos-top > .panel,
.page-income .gastos-top > .panel,
.page-savings .gastos-top > .panel,
.page-investments .gastos-top > .panel,
.page-budgets .gastos-top > .panel {
    min-height: 0;
}
.page-expenses .gastos-top > .gastos-head-panel,
.page-expenses .gastos-top > .totals-panel,
.page-expenses .gastos-top > .month-panel,
.page-income .gastos-top > .gastos-head-panel,
.page-income .gastos-top > .totals-panel,
.page-income .gastos-top > .month-panel,
.page-savings .gastos-top > .gastos-head-panel,
.page-savings .gastos-top > .totals-panel,
.page-savings .gastos-top > .month-panel,
.page-investments .gastos-top > .gastos-head-panel,
.page-investments .gastos-top > .totals-panel,
.page-investments .gastos-top > .month-panel,
.page-budgets .gastos-top > .gastos-head-panel,
.page-budgets .gastos-top > .totals-panel,
.page-budgets .gastos-top > .month-panel {
    min-height: 0 !important;
}
.page-expenses .gastos-add-btn,
.page-income .income-add-btn,
.page-savings .savings-add-btn,
.page-investments .investment-add-btn,
.page-budgets .gastos-add-btn.expense-account-add-cat-btn {
    min-width: 182px !important;
    padding: 10px 16px !important;
    font-size: 0.9rem !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
}

.gastos-top .totals-panel .gastos-add-btn.totals-panel__add-btn,
.gastos-top .totals-panel .income-add-btn.totals-panel__add-btn,
.gastos-top .totals-panel .savings-add-btn.totals-panel__add-btn,
.gastos-top .totals-panel .investment-add-btn.totals-panel__add-btn,
.gastos-top .totals-panel .expense-account-add-cat-btn.totals-panel__add-btn {
    min-width: 168px !important;
    min-height: 40px !important;
    padding: 8px 14px !important;
    font-size: 15px !important;
}
.gastos-add-btn {
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 16px;
    font-size: 20px;
    line-height: 1.05;
    border-radius: 12px;
    white-space: normal;
    text-align: center;
}
.totals-panel h2 {
    text-align: center;
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
}

.gastos-top .month-year-header {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
}
.gastos-top .month-year-header strong {
    font-weight: 700;
}
.totals-grid {
    max-width: 100%;
    margin: 0 auto;
    border-top: 1px solid var(--rm-border-soft);
    padding-top: 2px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: stretch;
    gap: 0;
}
.total-currency {
    text-align: center;
    padding: 0 6px;
    border-right: 1px solid var(--rm-border-soft);
    flex: 1 1 0;
    min-width: 0;
}
.total-currency:last-child { border-right: 0; }
.total-currency .label {
    font-weight: 700;
    font-size: 10px;
    margin-bottom: 0;
    line-height: 1.15;
    letter-spacing: 0.02em;
}
.total-currency .value {
    font-weight: 700;
    font-size: 12px;
    line-height: 1.15;
    color: var(--rm-text);
}
.month-panel { padding: 4px; }

.gastos-top .month-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}
.gastos-top .month-panel .month-year-header {
    flex-shrink: 0;
}
.gastos-top .month-panel .month-grid {
    flex: 1 1 auto;
    min-height: 0;
    grid-template-rows: repeat(3, minmax(0, 1fr));
}
.gastos-top .month-grid a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 4px 2px;
    box-sizing: border-box;
}
.month-year-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
    margin-bottom: 2px;
}
.year-arrow {
    color: var(--rm-text);
    text-decoration: none;
    padding: 2px 6px;
}
.month-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border: 1px solid var(--rm-border);
    border-radius: 10px;
    overflow: hidden;
    background: #141418;
}
.month-grid a {
    text-decoration: none;
    text-align: center;
    padding: 3px 0;
    border-right: 1px solid var(--rm-border-soft);
    border-bottom: 1px solid var(--rm-border-soft);
    color: var(--rm-month-label);
    font-size: 12px;
    font-weight: 700;
    background: #18181c;
}
.month-grid a:nth-child(4n) { border-right: 0; }
.month-grid a:nth-last-child(-n+4) { border-bottom: 0; }
.month-grid a:hover {
    background: rgba(240, 192, 64, 0.1);
    color: #fff;
}
.month-grid a.active {
    background: var(--rm-month-active-cell);
    color: var(--rm-month-active-text);
    box-shadow: inset 0 0 0 1px rgba(240, 192, 64, 0.45);
}

.month-grid a.month-nav-today:not(.active) {
    background: rgba(240, 192, 64, 0.12);
    color: var(--rm-text);
    box-shadow: inset 0 -2px 0 0 rgba(240, 192, 64, 0.65);
}
.month-grid a.month-nav-today:not(.active):hover {
    background: rgba(240, 192, 64, 0.2);
    color: #fff;
}
.month-nav-today-btn:disabled,
.month-nav-today-btn.is-disabled {
    opacity: 0.45 !important;
    filter: saturate(0.4) grayscale(0.15) !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    box-shadow: none !important;
}
input {
    border: 1px solid var(--rm-border);
    border-radius: 8px;
    padding: 8px 10px;
    background: #141418;
    color: var(--rm-text);
}
.btn {
    border: 0;
    background: linear-gradient(180deg, #2d5a32 0%, #1f7a3a 100%);
    color: #fff;
    border-radius: 8px;
    padding: 9px 14px;
    cursor: pointer;
}
.btn-link {
    border: 1px solid var(--rm-border);
    background: var(--rm-surface-2);
    color: var(--rm-text);
    border-radius: 8px;
    padding: 6px 10px;
}
.btn-danger {
    border: 1px solid #fecaca;
    background: #fee2e2;
    color: #b91c1c;
    border-radius: 8px;
    padding: 6px 10px;
}
table {
    width: 100%;
    border-collapse: collapse;
    background: var(--rm-surface-2);
}
.table-scroll {
    width: 100%;
    overflow-x: hidden;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
}
th, td {
    border-bottom: 1px solid var(--rm-border-soft);
    padding: 10px 8px;
    text-align: left;
    font-size: 14px;
    color: var(--rm-text);
}
.category-panel { padding-top: 0; }

.cat-header__kicker {
    margin: 0 0 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.88);
    opacity: 0.95;
}
.cat-header {
    margin: 0 -16px 10px;
    padding: 8px 12px;
    background: color-mix(in srgb, var(--cat) 16%, #1a1a1f);
    border-bottom: 1px solid var(--rm-border-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.cat-header h2 { margin: 0; font-size: 18px; }
.expense-table thead th {
    background: #25252c;
    font-size: 12px;
    color: var(--rm-text-muted);
    min-width: 2.75rem;
}
.expense-table {
    table-layout: fixed;
}
.expense-table th,
.expense-table td {
    white-space: nowrap;
    padding: 6px 6px;
    font-size: 13px;
}

.expense-table th:nth-child(1), .expense-table td:nth-child(1) { width: 6%; }
.expense-table th:nth-child(2), .expense-table td:nth-child(2) { width: 8%; }
.expense-table th:nth-child(3), .expense-table td:nth-child(3) { width: 7%; }
.expense-table th:nth-child(4), .expense-table td:nth-child(4) { width: 8%; }
.expense-table th:nth-child(5), .expense-table td:nth-child(5) { width: 7%; }

.expense-table th:nth-child(6), .expense-table td:nth-child(6) { width: 8%; }
.expense-table th:nth-child(7), .expense-table td:nth-child(7) { width: 6%; }
.expense-table th:nth-child(8), .expense-table td:nth-child(8) { width: 4%; }
.expense-table th:nth-child(9), .expense-table td:nth-child(9) { width: 5%; }
.expense-table th:nth-child(10), .expense-table td:nth-child(10) { width: 5%; }
.expense-table th:nth-child(11), .expense-table td:nth-child(11) { width: 5%; }
.expense-table th:nth-child(12), .expense-table td:nth-child(12) {
    width: 7%;
    min-width: 5.5rem;
    text-align: center;
}
.expense-table td:nth-child(12) .actions-inner {
    justify-content: center;
}
.expense-table thead th.expense-table__th-action {
    min-width: 5.75rem;
}
.expense-table .due-day-cell {
    text-align: center;
}
.expense-table .due-day-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.65em;
    padding: 3px 8px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 12px;
    line-height: 1.2;
    box-sizing: border-box;
    color: #fff;
    border: 1px solid color-mix(in srgb, var(--due-accent, #166534) 72%, #000);
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--due-accent, #166534) 42%, #fff) 0%,
        var(--due-accent, #166534) 100%
    );
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.38),
        0 1px 2px rgba(0, 0, 0, 0.16);
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.22);
}
.expense-table td.amount-cell {
    text-align: left;
    padding-left: 8px;
    padding-right: 6px;
}
.expense-table td:nth-child(1) .amount,
.expense-table td:nth-child(1) .amount-partial {
    text-align: left;
}
.expense-table th:nth-child(2),
.expense-table td:nth-child(2),
.expense-table th:nth-child(3),
.expense-table td:nth-child(3),
.expense-table th:nth-child(4),
.expense-table td:nth-child(4),
.expense-table th:nth-child(5),
.expense-table td:nth-child(5),
.expense-table th:nth-child(6),
.expense-table td:nth-child(6),
.expense-table th:nth-child(7),
.expense-table td:nth-child(7) {
    overflow: hidden;
    text-overflow: ellipsis;
}
.expense-table tbody td {
    vertical-align: middle;
}
.amount-cell {
    vertical-align: middle;
    white-space: normal;
}
.amount-stack {
    display: block;
    line-height: 1.1;
}
.amount-line {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: nowrap;
    min-width: 0;
}
.expense-payment-icon {
    flex-shrink: 0;
    font-size: 0.95em;
    line-height: 1;
}
.expense-payment-icon--paid { color: #22c55e; }
.expense-payment-icon--partial { color: #f59e0b; }
.expense-payment-icon--advance { color: #38bdf8; }
.expense-payment-icon--overdue { color: #ef4444; }
.amount.expense-card__amount-val--advance {
    color: #7dd3fc;
}
.expense-payment-icon--pending { color: rgba(244, 244, 245, 0.45); }
.amount-stack .amount {
    display: block;
    min-width: 0;
}
.amount { color: var(--rm-yellow); font-weight: 700; font-size: 13px; line-height: 1.15; }
.amount-partial {
    display: block;
    margin-top: 1px;
    font-size: 11px;
    font-weight: 400;
    color: #c2410c;
    letter-spacing: 0.01em;
    line-height: 1.15;
}
.status-dot {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 4px;
    border: 2px solid #d1d5db;
    margin-right: 6px;
    vertical-align: middle;
}
.status-dot.ok { border-color: #16a34a; background: #16a34a; }
.status-dot.warn { border-color: #f97316; background: #f97316; }
.status-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    border: 2px solid #d1d5db;
    font-weight: 800;
    font-size: 14px;
    line-height: 1;
    background: #fff;
}
.status-icon.paid {
    border-color: #16a34a;
    color: #ffffff;
    background: #16a34a;
}
.status-icon.partial {
    border-color: #f97316;
    color: #ffffff;
    background: #f97316;
}
.status-icon.pending {
    border-color: #e5e7eb;
    color: transparent;
    background: #fff;
}
.actions-cell {
    vertical-align: middle;
    text-align: right;
    padding-right: 2px;
}
.actions-inner {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    gap: 6px;
    align-items: center;
    position: relative;
}
.row-action-trigger {
    border: 1px solid #b07a00;
    background:
        radial-gradient(circle at 22% 20%, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 34%),
        linear-gradient(180deg, #fff7b0 0%, #ffd43b 44%, #e4ae13 52%, #f7d147 100%);
    color: #4a2f00;
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.75),
        inset 0 -2px 0 rgba(140, 95, 0, 0.28),
        0 1px 2px rgba(0, 0, 0, 0.2);
}
.row-action-trigger:hover {
    border-color: #996600;
    background:
        radial-gradient(circle at 22% 20%, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 36%),
        linear-gradient(180deg, #fff5a0 0%, #ffce2b 44%, #dba50f 52%, #f2c93c 100%);
}
.row-action-menu {
    position: absolute;
    bottom: calc(100% + 4px);
    right: 0;
    display: grid;
    gap: 2px;
    padding: 4px;
    background: #fff;
    border: 1px solid #e8d8a3;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    z-index: 20;
    min-width: 128px;
}
.row-action-menu[hidden] {
    display: none !important;
}
.row-action-option {
    border: 0;
    background: transparent;
    text-align: left;
    padding: 6px 8px;
    font-size: 12px;
    border-radius: 6px;
    cursor: pointer;
}
.row-action-option:hover {
    background: #fff7de;
    color: #6b4f00;
}
.row-action-modal-list {
    display: grid;
    gap: 8px;
}
.row-action-modal-list__split {
    display: flex;
    gap: 10px;
    align-items: stretch;
}
.row-action-modal-list__split .btn-modal-primary {
    flex: 1;
    min-width: 0;
}

.edit-expense-modal--readonly .modal-card__body .modal-grid input:not([type="hidden"]):disabled,
.edit-expense-modal--readonly .modal-card__body .modal-grid select:disabled,
.edit-expense-modal--readonly .modal-card__body .modal-grid textarea:disabled,
.edit-expense-modal--readonly .modal-card__body .modal-grid .modal-field__select:disabled {
    cursor: default;
    background-color: #f1f5f9 !important;
    background-image: none !important;
    color: #334155 !important;
    opacity: 1;
    border-color: #cbd5e1;
    box-shadow: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    padding-right: 12px;
}
.payment-receipt-view-block {
    padding: 4px 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}
.payment-receipt-view-link {
    display: inline-block;
    font-weight: 600;
    color: #166534;
    text-decoration: underline;
    font-size: 14px;
    cursor: pointer;
}
.payment-receipt-view-link:hover {
    color: #14532d;
}
.payment-receipt-view-btn {
    display: inline-block;
    padding: 0;
    margin: 0;
    border: none;
    background: none;
    font: inherit;
    font-weight: 600;
    color: #166534;
    text-decoration: underline;
    font-size: 14px;
    cursor: pointer;
    text-align: left;
}
.payment-receipt-view-btn:hover {
    color: #14532d;
}
.payment-receipt-inline-viewer {
    margin-top: 8px;
    border: 1px solid #334155;
    border-radius: 10px;
    overflow: hidden;
    background: #0f172a;
    width: 100%;
    box-sizing: border-box;
    height: clamp(165px, 32vh, 275px);
    display: grid;
    place-items: center;
}
.payment-receipt-inline-viewer[hidden] {
    display: none !important;
}
.payment-receipt-inline-viewer__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    background: #fff;
}
.payment-receipt-inline-viewer__iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: #fff;
}
#receiptViewModal .modal-app-shell.auth-login-shell {
    width: min(calc(100vw - 32px), 1200px);
    max-width: calc(100vw - 32px);
}
#receiptViewModal .modal-app-shell .auth-login-card-inner {
    width: 100%;
}
#receiptViewModal .receipt-view-modal__card.modal-card {
    width: 100%;
    max-width: 100%;
}
#receiptViewModal .modal-app-shell .modal-card.modal-card--in-app-shell {
    border-top: none;
}
#receiptViewModal .modal-card__body.receipt-view-modal__body {
    padding: 0 !important;
    overflow: hidden;
    background: #e2e8f0;
}
#receiptViewModal .receipt-view-modal__iframe {
    display: block;
    width: 100%;
    height: clamp(260px, calc(100vh - 200px), 820px);
    border: none;
    background: #fff;
}
@supports (height: 1dvh) {
    #receiptViewModal .receipt-view-modal__iframe {
        height: clamp(260px, calc(100dvh - 200px), 820px);
    }
}
.payment-receipt-no-file {
    font-size: 13px;
    display: block;
}

.expense-table .actions-inner .btn-action {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.expense-table .actions-inner .btn-action__icon {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}
.expense-table .actions-inner .btn-link {
    padding: 4px 8px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    border-radius: 6px;
    white-space: nowrap;
}
.expense-table .actions-inner .btn-link:hover {
    border-color: #1f7a3a;
    color: #1f7a3a;
    background: color-mix(in srgb, #1f7a3a 6%, white);
}
.expense-table .actions-inner .btn-link:hover .btn-action__icon {
    stroke: #1f7a3a;
}

body.page-expenses .panel {
    border: none;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
    background: linear-gradient(165deg, rgba(18, 48, 32, 0.72) 0%, rgba(10, 28, 18, 0.88) 100%);
}
body.page-expenses .panel.expense-empty-panel {
    background: var(--rm-empty-state-bg);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3);
}
body.page-expenses .gastos-head-panel h1,
body.page-expenses .totals-panel h2,
body.page-expenses .month-year-header strong {
    color: #bbf7d0;
}
body.page-expenses .gastos-head-icon {
    color: #4ade80;
    font-size: 1.15em;
    flex-shrink: 0;
}
body.page-expenses .gastos-top {
    align-items: stretch;
}
body.page-expenses .gastos-top > .panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
}
body.page-expenses .gastos-add-btn {
    min-width: 168px;
    min-height: 48px;
    padding: 10px 16px;
    font-size: 17px;
    font-weight: 700;
}
body.page-expenses .category-panel {
    border: 1px solid var(--rm-border);
    border-bottom: 1px solid var(--cat);
    border-radius: 14px;
    overflow: hidden;
    padding: 0;
    background: #141418;
}
body.page-expenses .category-panel:has(.expense-card.is-expanded) {
    overflow: visible;
    z-index: 8;
}

body.page-expenses .category-panel:has(.row-action-menu:not([hidden])) {
    overflow: visible;
    z-index: 16;
    position: relative;
}
body.page-expenses .expense-card:has(.row-action-menu:not([hidden])) {
    z-index: 30;
}
body.page-expenses .cat-header {
    margin: 0;
    padding: 8px 12px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px 12px;
    flex-wrap: nowrap;
    background: #141418;
    border-bottom: 1px solid var(--cat);
    container-type: inline-size;
    container-name: expense-cat-header;
}
body.page-expenses .cat-header__overdue-msg {
    margin: 0;
    flex: 0 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: nowrap;
    max-width: none;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #fbbf24;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    text-align: center;
    white-space: nowrap;
}
body.page-expenses .cat-header__overdue-msg-icon {
    flex-shrink: 0;
    font-size: 0.95em;
    color: #fbbf24;
}
body.page-expenses .cat-header__totals {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    flex: 1 1 0;
    justify-content: flex-end;
    align-items: baseline;
    gap: 0 4px;
    min-width: 0;
    text-align: right;
}
body.page-expenses .cat-header__total {
    font-size: clamp(0.72rem, 2.6cqi + 0.38rem, 1.05rem);
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #f8fafc;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
body.page-expenses .cat-header__total-sep {
    font-size: clamp(0.72rem, 2.6cqi + 0.38rem, 1.05rem);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.35);
    padding: 0 4px 0 0;
    user-select: none;
}
body.page-expenses .cat-header--totals-compact .cat-header__total,
body.page-expenses .cat-header--totals-compact .cat-header__total-sep {
    font-size: clamp(0.66rem, 2.2cqi + 0.32rem, 0.88rem);
}
body.page-expenses .cat-header--totals-tight .cat-header__total,
body.page-expenses .cat-header--totals-tight .cat-header__total-sep {
    font-size: clamp(0.58rem, 1.8cqi + 0.28rem, 0.74rem);
}
body.page-expenses .cat-header h2,
body.page-expenses .cat-header .cat-header__title {
    letter-spacing: 0.2px;
}
body.page-expenses .cat-header__title > span {
    color: #fff;
    font-weight: 800;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1 1 auto;
}
body.page-expenses .cat-header__title {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
    margin: 0;
    font-size: 18px;
}
@media (max-width: 520px) {
    body.page-expenses .cat-header {
        flex-wrap: wrap;
    }
    body.page-expenses .cat-header__totals {
        flex: 0 1 auto;
    }
    body.page-expenses .cat-header__overdue-msg {
        order: 3;
        flex: 1 1 100%;
        max-width: none;
        justify-content: center;
    }
}
body.page-expenses .cat-header__fa {
    color: var(--cat);
    font-size: 1.15em;
    opacity: 0.95;
    flex-shrink: 0;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
}
body.page-expenses .category-panel .expense-cards-wrap {
    margin: 0;
    padding: 12px;
    box-sizing: border-box;
    overflow: visible;
}
body.page-expenses .expense-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
    gap: 12px;
    align-items: start;
    overflow: visible;
}
body.page-expenses .expense-card {
    position: relative;
    border-radius: 12px;
    border: 1px solid var(--rm-border-soft);
    background: #141418;
    padding: 12px 14px;
    border-left: 4px solid #414141;
}
body.page-expenses .expense-card.is-expanded {
    overflow: visible;
    z-index: 45;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: none;
}
body.page-expenses .expense-card:hover {
    background: #1e1e24;
    border-color: rgba(148, 163, 184, 0.55);
    border-left-color: #414141;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}
body.page-expenses .expense-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 10px;
}
body.page-expenses .expense-card__headline {
    flex: 1;
    min-width: 0;
}
body.page-expenses .expense-card__headline-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
}
body.page-expenses .expense-card__amount-col {
    order: 2;
    margin-left: auto;
    display: flex;
    justify-content: flex-end;
    text-align: right;
    flex-shrink: 0;
    max-width: 46%;
}
body.page-expenses .expense-card__concept {
    order: 1;
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
    font-size: 1.125rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #fafafa;
    word-break: break-word;
}

body.page-expenses .expense-card__concept--compact {
    font-size: 0.92rem;
    line-height: 1.08;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.page-expenses .expense-card__amount-val.amount {
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
}
body.page-expenses .expense-card__toolbar {
    display: flex;
    flex-shrink: 0;
    align-self: flex-start;
    align-items: center;
    gap: 6px;
    margin-top: -4px;
}
body.page-expenses .expense-card__toolbar .actions-inner {
    justify-content: flex-end;
}
body.page-expenses .expense-card__expand-toggle {
    width: 100%;
    min-height: 28px;
    margin-top: 6px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.42) 0%, rgba(15, 23, 42, 0.28) 100%);
    color: #e2e8f0;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.89rem;
    font-weight: 700;
    line-height: 1;
    padding: 3px 10px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
body.page-expenses .expense-card__expand-toggle:hover {
    border-color: rgba(148, 163, 184, 0.55);
    color: #fff;
    background: linear-gradient(180deg, rgba(51, 65, 85, 0.58) 0%, rgba(30, 41, 59, 0.44) 100%);
    box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.25), 0 6px 14px rgba(15, 23, 42, 0.35);
}
body.page-expenses .expense-card__expand-label {
    font-weight: 700;
}
body.page-expenses .expense-card__expand-icon {
    color: #f8fafc;
    font-size: 0.9rem;
    line-height: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    transition: transform 0.2s ease;
}
body.page-expenses .expense-card.is-expanded .expense-card__expand-icon {
    transform: rotate(180deg);
}
body.page-expenses .expense-card__extra {
    position: absolute;
    left: -4px;
    right: -1px;
    top: calc(100% - 2px);
    margin-top: 0;
    box-sizing: border-box;
    padding: 10px 14px 12px;
    z-index: 35;
    border-radius: 0 0 12px 12px;
    border: 1px solid var(--rm-border-soft);
    border-top: 0;
    border-left: 4px solid #414141;
    background: #141418;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}
body.page-expenses .expense-card:hover .expense-card__extra {
    border-color: rgba(148, 163, 184, 0.55);
    border-left-color: #414141;
    background: #1e1e24;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}
body.page-expenses .expense-card__meta {
    margin: 0;
}
body.page-expenses .expense-card__meta--peek {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.35fr);
    gap: 6px 10px;
    align-items: end;
}
body.page-expenses .expense-card__meta-item--due-day {
    width: max-content;
    max-width: 100%;
}
body.page-expenses .expense-card__meta-item--due-hint {
    justify-self: end;
    text-align: right;
    min-width: 0;
}
body.page-expenses .expense-card__due-hint-cell {
    margin: 0;
    text-align: right;
}
body.page-expenses .expense-card__due-hint {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.01em;
    color: #86efac;
}
body.page-expenses .expense-card__due-hint--soon {
    color: #86efac;
}
body.page-expenses .expense-card__due-hint--today {
    color: #fde047;
}
body.page-expenses .expense-card__due-hint--late {
    color: #fca5a5;
}
body.page-expenses .expense-card__due-hint--partial-sum {
    color: #facc15;
    font-weight: 800;
}
body.page-expenses .expense-card__due-hint--today-row {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: wrap;
}
body.page-expenses .expense-card__due-warn-icon {
    flex-shrink: 0;
    font-size: 0.95em;
    color: #fde047;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
}
body.page-expenses .expense-card__meta--extra {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 14px;
}
body.page-expenses .expense-card__meta-item {
    margin: 0;
    min-width: 0;
}
body.page-expenses .expense-card__meta-item--span {
    grid-column: 1 / -1;
}
body.page-expenses .expense-card__meta-item dt {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--rm-text-muted);
    margin: 0 0 2px;
}
body.page-expenses .expense-card__meta-item dd {
    margin: 0;
    font-size: 13px;
    line-height: 1.3;
    color: var(--rm-text);
    word-break: break-word;
}
body.page-expenses .expense-card__due {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}
body.page-expenses .category-panel .expense-card .amount,
body.page-expenses .category-panel .expense-card .amount.expense-card__amount-val--paid,
body.page-expenses .category-panel .expense-card .amount.expense-card__amount-val--ontime,
body.page-expenses .category-panel .expense-card .amount.expense-card__amount-val--partial,
body.page-expenses .category-panel .expense-card .amount.expense-card__amount-val--overdue {
    color: #f8fafc !important;
}
body.page-expenses .expense-card .view-shared-expense-btn {
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
}
@media (max-width: 520px) {
    body.page-expenses .expense-card__meta--peek {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 4px 8px;
        align-items: center;
    }
    body.page-expenses .expense-card__meta--extra {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px 10px;
    }
    body.page-expenses .expense-card__meta-item {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        column-gap: 5px;
        row-gap: 0;
    }
    body.page-expenses .expense-card__meta-item dt {
        margin: 0;
        flex-shrink: 0;
    }
    body.page-expenses .expense-card__meta-item dt::after {
        content: ':';
    }
    body.page-expenses .expense-card__meta-item dd {
        min-width: 0;
        flex: 1 1 auto;
    }
    body.page-expenses .expense-card__meta-item--due-hint {
        grid-column: 1 / -1;
        justify-self: stretch;
        width: 100%;
        text-align: center;
        padding-top: 2px;
        flex-wrap: nowrap;
        justify-content: center;
    }
    body.page-expenses .expense-card__meta-item--due-hint .expense-card__due-hint-cell {
        text-align: center;
        width: 100%;
    }
    body.page-expenses .expense-card__meta-item--due-hint .expense-card__due-hint--today-row {
        justify-content: center;
    }
    body.page-expenses .expense-card__concept {
        font-size: 1.02rem;
    }
    body.page-expenses .expense-card__concept--compact {
        font-size: 0.86rem;
    }
    body.page-expenses .expense-card__amount-val.amount {
        font-size: 1.08rem;
    }
}
body.page-expenses .row-action-trigger,
body.page-income .row-action-trigger,
body.page-savings .row-action-trigger,
body.page-investments .row-action-trigger {
    border-color: #166534;
    background: linear-gradient(180deg, #22a34d 0%, #17703a 100%);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.85rem !important;
    width: 1.85rem !important;
    height: 1.85rem !important;
    max-width: 1.85rem !important;
    padding: 0 !important;
    border-radius: 7px !important;
    font-size: 0 !important;
    line-height: 1 !important;
    text-shadow: none;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        0 1px 2px rgba(0, 0, 0, 0.18);
}

@media (min-width: 1000px) {
    body.page-expenses .expense-card__expand-toggle {
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
    }
    body.page-expenses .expense-table .row-action-trigger,
    body.page-expenses .expense-card .row-action-trigger,
    body.page-income .income-table .row-action-trigger,
    body.page-savings .savings-table .row-action-trigger,
    body.page-savings .savings-month-detail-table .row-action-trigger,
    body.page-investments .investment-table .row-action-trigger {
        width: 1.85rem !important;
        min-width: 1.85rem !important;
        max-width: 1.85rem !important;
        height: 1.85rem !important;
        aspect-ratio: 1 / 1;
        border-radius: 7px !important;
        box-sizing: border-box;
        padding: 0 !important;
    }
    body.page-expenses .expense-table .row-action-trigger__icon,
    body.page-expenses .expense-card .row-action-trigger__icon,
    body.page-income .income-table .row-action-trigger__icon,
    body.page-savings .savings-table .row-action-trigger__icon,
    body.page-savings .savings-month-detail-table .row-action-trigger__icon,
    body.page-investments .investment-table .row-action-trigger__icon {
        font-size: 13px;
        line-height: 1;
    }
}
body.page-expenses .row-action-trigger:hover,
body.page-income .row-action-trigger:hover,
body.page-savings .row-action-trigger:hover,
body.page-investments .row-action-trigger:hover {
    border-color: #14532d;
    background: linear-gradient(180deg, #24b053 0%, #166534 100%);
}

body.page-expenses .row-action-trigger__icon,
body.page-income .row-action-trigger__icon,
body.page-savings .row-action-trigger__icon,
body.page-investments .row-action-trigger__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    line-height: 1;
}
body.page-expenses .row-action-menu,
body.page-income .row-action-menu,
body.page-savings .row-action-menu,
body.page-investments .row-action-menu {
    border-color: #4ade80;
}

body.page-expenses .expense-card .row-action-menu {
    top: calc(100% + 4px);
    bottom: auto;
    right: 0;
    left: auto;
    min-width: 10rem;
    padding: 6px;
    z-index: 50;
    background: linear-gradient(180deg, #25252c 0%, #1c1c22 100%);
    border: 1px solid rgba(74, 222, 128, 0.45);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}
body.page-expenses .expense-card .row-action-option {
    width: 100%;
    color: #f4f4f5;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
}
body.page-expenses .expense-card .row-action-option:hover {
    background: rgba(74, 222, 128, 0.14);
    color: #dcfce7;
}

body.page-income.page-expenses .expense-card__meta--peek-income {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    gap: 8px 14px;
    align-items: end;
}
body.page-income.page-expenses .expense-card__meta--peek-income .expense-card__meta-item--income-collection-peek {
    justify-self: end;
    text-align: right;
    min-width: 0;
}
@media (max-width: 520px) {
    body.page-income.page-expenses .expense-card__meta--peek-income {
        grid-template-columns: 1fr;
    }
    body.page-income.page-expenses .expense-card__meta--peek-income .expense-card__meta-item--income-collection-peek {
        justify-self: start;
        text-align: left;
    }
}
body.page-income .expense-card .row-action-menu {
    top: calc(100% + 4px);
    bottom: auto;
    right: 0;
    left: auto;
    min-width: 10rem;
    padding: 6px;
    z-index: 50;
    background: linear-gradient(180deg, #25252c 0%, #1c1c22 100%);
    border: 1px solid rgba(74, 222, 128, 0.45);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}
body.page-income .expense-card .row-action-option {
    width: 100%;
    color: #f4f4f5;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
}
body.page-income .expense-card .row-action-option:hover {
    background: rgba(74, 222, 128, 0.14);
    color: #dcfce7;
}

body.page-savings .panel {
    border: 1px solid var(--rm-border);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
    background: linear-gradient(180deg, #1a1e28 0%, #141418 100%);
}
body.page-savings .panel.savings-empty-panel {
    background: var(--rm-empty-state-bg);
    border-color: rgba(240, 192, 64, 0.25);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3);
}
body.page-savings .gastos-top .panel {
    border-color: rgba(96, 165, 250, 0.35);
}
body.page-savings .savings-head-panel h1,
body.page-savings .savings-totals-panel h2,
body.page-savings .month-year-header strong {
    color: #93c5fd;
}
body.page-savings .savings-head-icon {
    color: #60a5fa;
    font-size: 1.15em;
    flex-shrink: 0;
}
body.page-savings .savings-tagline {
    color: var(--rm-text-muted);
    font-size: 12px;
    line-height: 1.45;
    margin: 0;
}
body.page-savings .gastos-top {
    align-items: stretch;
}
body.page-savings .gastos-top > .panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
}
body.page-savings .savings-add-btn {
    min-width: 168px;
    min-height: 48px;
    padding: 10px 16px;
    font-size: 17px;
    font-weight: 700;
}
body.page-savings .category-panel {
    overflow: hidden;
    padding: 0;
    background: #141418;
}

body.page-savings .category-panel:not(.expense-account-category-panel) .cat-header {
    margin: 0;
    padding: 8px 12px;
    justify-content: flex-start;
    background:
        radial-gradient(circle at 72% 36%, color-mix(in srgb, var(--cat) 25%, transparent) 0, transparent 50%),
        linear-gradient(180deg, #1e293b 0%, #161618 100%);
    border-bottom: 5px solid var(--cat);
}
body.page-savings .category-panel:not(.expense-account-category-panel) .cat-header h2,
body.page-savings .category-panel:not(.expense-account-category-panel) .cat-header .cat-header__title {
    color: var(--cat);
    letter-spacing: 0.2px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
}
body.page-savings .cat-header__title {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0;
    font-size: 18px;
}
body.page-savings .cat-header__fa {
    font-size: 1.15em;
    opacity: 0.95;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
}
body.page-savings .category-panel .table-scroll {
    margin: 0;
}
body.page-savings .category-panel .savings-table {
    margin: 0;
    width: 100%;
    border-collapse: collapse;
}
body.page-savings .savings-table thead th {
    background: linear-gradient(180deg, #14532d 0%, #166534 100%);
    color: #f8fafc;
    font-size: 12px;
    padding: 6px 6px;
    border-bottom: 2px solid #4ade80;
}
body.page-savings .savings-table tbody td {
    font-size: 14px;
    vertical-align: middle;
    border-bottom: 1px solid var(--rm-border-soft);
    background: #161618;
    color: var(--rm-text);
}
body.page-savings .savings-table tbody tr {
    background: #161618;
}
body.page-savings .savings-table tbody tr:hover {
    background: #1e1e24;
}
body.page-savings .savings-amount-col {
    text-align: right;
    white-space: nowrap;
}
body.page-savings .savings-amount-cell {
    font-weight: 700;
}
body.page-savings .savings-notes-cell {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.page-savings .savings-empty-cell {
    text-align: center;
    color: var(--rm-empty-state-fg);
    padding: 20px 12px;
}
body.page-savings .savings-empty-cell strong {
    color: var(--rm-empty-state-fg);
    font-weight: 700;
}
body.page-savings .savings-empty-panel {
    padding: 8px 12px;
}
body.page-savings .savings-totals-section h2 {
    margin: 0 0 12px;
    font-size: 18px;
    color: #93c5fd;
}
body.page-savings .savings-edit-btn {
    border: 1px solid #2563eb;
    background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
    color: #fff;
}
body.page-savings .savings-edit-btn:hover {
    background: linear-gradient(180deg, #60a5fa 0%, #1d4ed8 100%);
    color: #fff;
}
body.page-savings .savings-row-actions {
    text-align: center;
    white-space: nowrap;
}
body.page-savings .savings-row-actions .actions-inner {
    justify-content: center;
    width: 100%;
    margin-left: auto;
}
body.page-savings .savings-actions-col,
body.page-savings .savings-row-actions {
    width: 4.4rem;
    min-width: 4.4rem;
    max-width: 4.4rem;
}
body.page-savings .savings-table thead th.savings-actions-col,
body.page-savings .savings-table tbody td.savings-row-actions {
    position: sticky;
    right: 0;
    z-index: 3;
    background: #161618;
}
body.page-savings .savings-table thead th.savings-actions-col {
    z-index: 4;
    background: linear-gradient(180deg, #14532d 0%, #166534 100%);
    text-align: center;
}
body.page-savings .savings-row-actions .actions-inner {
    justify-content: center;
    margin-right: 0;
}

body.page-savings .expense-view-switch-btn {
    border: 1px solid rgba(148, 163, 184, 0.36);
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.58);
    color: rgba(226, 232, 240, 0.95);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.1;
    padding: 9px 14px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
body.page-savings .expense-view-switch-btn:hover {
    border-color: rgba(190, 242, 100, 0.48);
    background: rgba(30, 41, 59, 0.72);
}
body.page-savings .expense-view-switch-btn.is-active {
    border-color: rgba(163, 230, 53, 0.56);
    background: linear-gradient(180deg, rgba(34, 197, 94, 0.43), rgba(21, 128, 61, 0.52));
    color: #f8fafc;
}

body.page-savings .expense-account-hero-toolbar .expense-account-head-icon {
    color: #4ade80;
}

body.page-savings.is-savings-chart-view .expense-account-page-hero .savings-kpi-strip,
body.page-savings.is-savings-chart-view .expense-account-page-hero .expense-view-switch-row,
body.page-savings.is-savings-chart-view .expense-account-page-hero .expense-account-hero-toolbar__tabs,
body.page-savings.is-savings-chart-view .expense-account-page-hero > .rm-delete-month-confirm {
    display: none !important;
}

body.page-savings .savings-kpi-strip {
    max-width: 1220px;
    margin: 8px auto 16px;
    padding: 0 2px;
    box-sizing: border-box;
}
body.page-savings .savings-kpi-strip__inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    box-sizing: border-box;

    height: 145px;
    border-radius: 16px;
    background: linear-gradient(165deg, rgba(18, 48, 32, 0.72) 0%, rgba(10, 28, 18, 0.88) 100%);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
    overflow: hidden;
}
body.page-savings .savings-kpi-strip__row {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    flex: 1 1 0;
    min-height: 0;
    min-width: 0;
}
body.page-savings .savings-kpi-strip__inner .savings-kpi-strip__conv-footer {
    flex-shrink: 0;
    padding-left: 12px;
    padding-right: 12px;
    padding-bottom: 6px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
body.page-savings .savings-kpi-strip__inner .savings-kpi-strip__conv-footer.presup-hero-totals-conv-footer {
    margin-top: 4px;
    padding-top: 4px;
}
body.page-savings .savings-kpi-cell {
    flex: 1 1 22%;
    min-width: 0;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    justify-content: center;
    box-sizing: border-box;
    border-right: 1px solid rgba(55, 65, 81, 0.35);
}
body.page-savings .savings-kpi-cell:last-child {
    border-right: 0;
}
body.page-savings .savings-kpi-cell__label {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: #a0a0a0;
    letter-spacing: 0.02em;
}
body.page-savings .savings-kpi-cell__value-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    min-height: 2.5rem;
}
body.page-savings .savings-kpi-cell__value-row--tight {
    gap: 6px;
}
body.page-savings .savings-kpi-icon-ring {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    color: #39ff14;
    border: 2px solid rgba(57, 255, 20, 0.55);
    background: rgba(57, 255, 20, 0.06);
    box-shadow: 0 0 18px rgba(57, 255, 20, 0.12);
}
body.page-savings .savings-kpi-dollar-ico {
    font-size: 1.35rem;
    color: #39ff14;
    line-height: 1;
    filter: drop-shadow(0 0 8px rgba(57, 255, 20, 0.35));
}
body.page-savings .savings-kpi-target-ico {
    font-size: 1.25rem;
    color: #22c55e;
    line-height: 1;
}
body.page-savings .savings-kpi-cell__value {
    margin: 0;
    font-size: clamp(1.25rem, 2.6vw, 1.65rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
}
body.page-savings .savings-kpi-cell__value--neon {
    color: #39ff14;
}
body.page-savings .savings-kpi-cell__value--goal {
    color: #ffffff;
}
body.page-savings .savings-kpi-cell__value--muted {
    color: rgba(160, 160, 160, 0.95);
    font-weight: 700;
    font-size: 1.05rem;
}
body.page-savings .savings-kpi-progress {
    height: 9px;
    border-radius: 999px;
    background: #2a2a2a;
    overflow: hidden;
    margin-top: 2px;
}
body.page-savings .savings-kpi-progress__fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: #39ff14;
    box-shadow: 0 0 12px rgba(57, 255, 20, 0.45);
}
body.page-savings .savings-kpi-cell:not(.savings-kpi-cell--currency-breakdown) {
    min-width: 130px;
}
body.page-savings .savings-kpi-cell--currency-breakdown {
    flex: 1 1 28%;
    min-width: 0;
    padding: 6px 8px;
    border-right: 0;
    justify-content: flex-start;
    align-self: stretch;
    box-sizing: border-box;
    overflow: hidden;
    min-height: 0;
}
body.page-savings .savings-kpi-breakdown-cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0 10px;
    align-items: start;
    width: 100%;
    min-width: 0;
    min-height: 0;
    max-height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
body.page-savings .savings-kpi-breakdown-cols > .savings-kpi-breakdown-section:only-child {
    grid-column: 1 / -1;
}
body.page-savings .savings-kpi-breakdown-section--month:not(:only-child) {
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    padding-left: 14px;
    margin-left: 0;
}
@media (max-width: 640px) {
    body.page-savings .savings-kpi-breakdown-cols {
        grid-template-columns: 1fr;
    }
    body.page-savings .savings-kpi-breakdown-section--month:not(:only-child) {
        border-left: 0;
        padding-left: 0;
        margin-top: 12px;
        padding-top: 10px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }
}
@media (max-width: 1100px) {
    body.page-savings .savings-kpi-strip__inner {
        height: auto;
        min-height: 145px;
    }
    body.page-savings .savings-kpi-strip__row {
        flex-direction: column;
        flex-wrap: wrap;
        flex: 1 1 auto;
        height: auto;
        min-height: 0;
    }
    body.page-savings .savings-kpi-cell {
        flex: 1 1 auto;
        min-height: 0;
        border-right: 0;
        border-bottom: 1px solid rgba(55, 65, 81, 0.35);
    }
    body.page-savings .savings-kpi-cell--currency-breakdown {
        min-height: 0;
        overflow: visible;
    }
    body.page-savings .savings-kpi-breakdown-cols {
        max-height: none;
        overflow-y: visible;
    }
    body.page-savings .savings-kpi-cell:last-child {
        border-bottom: 0;
    }
}

body.page-savings .expense-account-page-hero .savings-kpi-strip {
    margin-top: 2px;
    margin-bottom: 10px;
}

body.page-savings .savings-dashboard-wrap {
    max-width: 1220px;
    margin: 0 auto 24px;
    padding: 0 2px;
}
body.page-savings .savings-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
    gap: 14px;
    align-items: start;
}
@media (max-width: 1020px) {
    body.page-savings .savings-dashboard-grid {
        grid-template-columns: 1fr;
    }
}
body.page-savings .savings-dash-panel {
    padding: 0;
    overflow: hidden;
    background: #141418;
    border: 1px solid rgba(55, 65, 81, 0.5);
}
body.page-savings .savings-dash-panel__head {
    padding: 10px 12px 0;
}
body.page-savings .savings-dash-panel__title {
    margin: 0 0 8px;
    font-size: 1.02rem;
    font-weight: 800;
    color: #e2e8f0;
    letter-spacing: 0.02em;
}
body.page-savings .savings-dash-table thead th {
    background: linear-gradient(180deg, #14532d 0%, #166534 100%);
    color: #f8fafc;
    border-bottom: 2px solid #4ade80;
}
body.page-savings .savings-dash-table__amt {
    color: #4ade80 !important;
    text-align: right;
    font-weight: 800;
}
body.page-savings .savings-dash-table__link {
    color: #86efac;
    font-weight: 700;
    font-size: 0.86rem;
    text-decoration: none;
}
body.page-savings .savings-dash-table__link:hover {
    text-decoration: underline;
}
body.page-savings .savings-dash-table__empty {
    text-align: center;
    color: var(--rm-text-muted);
    padding: 16px 10px;
    font-size: 0.9rem;
}
body.page-savings .savings-dash-footer-btn {
    display: block;
    width: 100%;
    margin: 0;
    padding: 12px 14px;
    font-size: 0.95rem;
    font-weight: 800;
    border-radius: 0 0 12px 12px;
    border: 1px solid rgba(74, 222, 128, 0.45);
    background: rgba(6, 24, 16, 0.55);
    color: #bbf7d0;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
body.page-savings .savings-dash-footer-btn--deposit:hover {
    background: rgba(20, 83, 45, 0.45);
    border-color: rgba(190, 242, 100, 0.55);
}
body.page-savings .savings-dash-footer-btn--withdraw {
    border-color: rgba(248, 113, 113, 0.5);
    color: #fecaca;
    background: rgba(50, 20, 20, 0.4);
    border-radius: 0 0 12px 12px;
    margin-top: 0;
}
body.page-savings .savings-dash-footer-btn--withdraw:hover {
    background: rgba(80, 30, 30, 0.5);
    border-color: rgba(252, 165, 165, 0.55);
}

body.page-savings .savings-chart-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    padding: 10px 12px 0;
}
body.page-savings .savings-chart-range-select {
    font-size: 0.8rem;
    font-weight: 700;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid rgba(55, 65, 81, 0.7);
    background: rgba(15, 23, 42, 0.6);
    color: rgba(226, 232, 240, 0.9);
    opacity: 0.7;
    cursor: not-allowed;
}
body.page-savings .savings-chart-svg-wrap {
    position: relative;
    padding: 4px 8px 10px;
    min-height: 200px;
}
body.page-savings .savings-evolution-svg {
    width: 100%;
    height: 220px;
    display: block;
}
body.page-savings .savings-chart-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    font-size: 0.88rem;
    color: rgba(203, 213, 225, 0.85);
    text-align: center;
    padding: 12px;
}
body.page-savings .savings-current-panel .savings-current-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 12px;
    padding: 0 12px 12px;
}
@media (max-width: 520px) {
    body.page-savings .savings-current-panel .savings-current-split {
        grid-template-columns: 1fr;
    }
}
body.page-savings .savings-current-label {
    margin: 0 0 4px;
    font-size: 0.78rem;
    font-weight: 700;
    color: rgba(203, 213, 225, 0.78);
    text-transform: none;
}
body.page-savings .savings-current-amount {
    margin: 0 0 4px;
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}
body.page-savings .savings-current-amount--green {
    color: #4ade80;
}
body.page-savings .savings-current-amount--red {
    color: #f87171;
}
body.page-savings .savings-current-hint {
    margin: 0;
    font-size: 0.75rem;
    color: rgba(148, 163, 184, 0.86);
    line-height: 1.35;
}
body.page-savings .savings-move-list {
    list-style: none;
    margin: 0;
    padding: 0 8px 8px;
    max-height: 360px;
    overflow: auto;
}
body.page-savings .savings-move-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 10px 6px;
    border-bottom: 1px solid rgba(55, 65, 81, 0.45);
}
body.page-savings .savings-move-item:last-child {
    border-bottom: 0;
}
body.page-savings .savings-move-item__ico {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
}
body.page-savings .savings-move-item__ico--in {
    background: rgba(22, 101, 52, 0.45);
    color: #4ade80;
    border: 1px solid rgba(74, 222, 128, 0.35);
}
body.page-savings .savings-move-item__ico--out {
    background: rgba(127, 29, 29, 0.4);
    color: #fecaca;
    border: 1px solid rgba(248, 113, 113, 0.35);
}
body.page-savings .savings-move-item__title {
    display: block;
    font-weight: 700;
    font-size: 0.88rem;
    color: #f1f5f9;
}
body.page-savings .savings-move-item__meta {
    display: block;
    font-size: 0.76rem;
    color: rgba(148, 163, 184, 0.92);
    margin-top: 2px;
}
body.page-savings .savings-move-item__delta--in {
    color: #4ade80;
    font-weight: 800;
    font-size: 0.92rem;
    white-space: nowrap;
}
body.page-savings .savings-move-item--empty {
    display: block;
    padding: 14px 8px;
    color: rgba(203, 213, 225, 0.85);
    font-size: 0.88rem;
    text-align: center;
}
body.page-savings .savings-move-item__kbd {
    color: #bbf7d0;
}
body.page-savings .savings-detail-wrap {
    max-width: 1220px;
    margin: 0 auto 28px;
    padding: 0 2px;
}

#savingRowActionModal .modal-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
#savingRowActionModal .modal-actions > button {
    min-width: 112px;
    height: 40px;
    padding: 0 14px;
    box-sizing: border-box;
}

body.page-income .category-panel {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
    background: #141418;
    overflow: hidden;
    padding: 0;
}
body.page-income .cat-header {
    margin: 0;
    padding: 8px 12px;
    justify-content: flex-start;
    background:
        radial-gradient(circle at 72% 36%, rgba(75, 85, 99, 0.26) 0, rgba(75, 85, 99, 0) 46%),
        linear-gradient(180deg, #111827 0%, #1f2937 52%, #0b1220 100%);
    border-bottom: 1px solid var(--cat);
}
body.page-income .cat-header h2,
body.page-income .cat-header .cat-header__title {
    color: var(--cat);
    letter-spacing: 0.2px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
body.page-income .cat-header__title {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0;
    font-size: 18px;
}
body.page-income .cat-header__fa {
    font-size: 1.15em;
    opacity: 0.95;
    color: var(--cat);
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
}
body.page-income .category-panel .table-scroll {
    margin: 0;
}
body.page-income .category-panel .income-table {
    margin: 0;
    width: 100%;
    border-collapse: collapse;
}
body.page-income .income-empty-panel {
    padding: 8px 12px;
}
body.page-expenses .expense-empty-panel {
    padding: 8px 12px;
}
body.page-income .income-totals-section h2 {
    margin: 0 0 12px;
    font-size: 18px;
    color: #fde68a;
}
body.page-income .income-totals-section .total-item {
    background: color-mix(in srgb, var(--cat) 22%, #1a1a1f);
    border-left-color: var(--cat);
    color: var(--rm-text);
}
body.page-income .income-edit-btn {
    border: 1px solid #111827;
    background: linear-gradient(180deg, #1f2937 0%, #111827 100%);
    color: #fff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        0 1px 2px rgba(17, 24, 39, 0.28);
}
body.page-income .income-edit-btn:hover {
    background: linear-gradient(180deg, #374151 0%, #1f2937 100%);
    color: #fff;
}

body.page-investments .category-panel {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
    background: #141418;
    overflow: hidden;
    padding: 0;
}
body.page-investments .cat-header {
    margin: 0;
    padding: 8px 12px;
    justify-content: flex-start;
    background:
        radial-gradient(circle at 72% 36%, color-mix(in srgb, var(--cat) 28%, transparent) 0, transparent 50%),
        linear-gradient(180deg, #2e1f45 0%, #161618 100%);
    border-bottom: 5px solid var(--cat);
}
body.page-investments .cat-header h2,
body.page-investments .cat-header .cat-header__title {
    color: var(--cat);
    letter-spacing: 0.2px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
}
body.page-investments .cat-header__title {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0;
    font-size: 18px;
}
body.page-investments .cat-header__fa {
    font-size: 1.15em;
    opacity: 0.95;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
}
body.page-investments .category-panel .table-scroll {
    margin: 0;
}
body.page-investments .category-panel .investment-table {
    margin: 0;
    width: 100%;
    border-collapse: collapse;
}

body.page-income .category-panel,
body.page-savings .category-panel,
body.page-investments .category-panel {
    border-radius: 14px;
    overflow: hidden;
}
body.page-income.page-expenses .category-panel:has(.expense-card.is-expanded) {
    overflow: visible;
    z-index: 8;
}
body.page-investments .investment-empty-panel {
    padding: 8px 12px;
}
body.page-investments .investment-totals-section h2 {
    margin: 0 0 12px;
    font-size: 18px;
    color: #86efac;
}
#savingModal .modal-card {
    border-color: color-mix(in srgb, #3b82f6 35%, #e5e7eb);
    border-top: none;
}

body.page-investments .panel:not(.category-panel):not(.investment-empty-panel) {
    border: 1px solid rgba(56, 189, 98, 0.22);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.33);
    background: linear-gradient(180deg, rgba(10, 20, 17, 0.98) 0%, rgba(7, 14, 12, 0.98) 100%);
}
body.page-investments .panel.investment-empty-panel {
    background: var(--rm-empty-state-bg);
    border-color: rgba(240, 192, 64, 0.25);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3);
}
body.page-investments .gastos-top .panel {
    border-color: rgba(56, 189, 98, 0.28);
}
body.page-investments .investment-head-panel h1,
body.page-investments .investment-totals-panel h2,
body.page-investments .month-year-header strong {
    color: #dcfce7;
}
body.page-investments .investment-head-panel h1 {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 10px;
}
body.page-investments .investment-head-icon {
    color: #22c55e;
    font-size: 1.15em;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
body.page-investments .investment-tagline {
    color: var(--rm-text-muted);
    font-size: 12px;
    line-height: 1.45;
    margin: 0;
}
body.page-investments .gastos-top {
    align-items: stretch;
}
body.page-investments .gastos-top > .panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
}
body.page-investments .investment-add-btn {
    min-width: 168px;
    min-height: 48px;
    padding: 10px 16px;
    font-size: 17px;
    font-weight: 700;
}
body.page-investments .investment-table-panel {
    padding: 0;
    overflow: hidden;
}
body.page-investments .investment-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 1020px;
}
body.page-investments .investment-table thead th {
    background: #3b2b55;
    color: #f4f4f5;
    font-size: 12px;
    padding: 6px 6px;
    border-bottom: 2px solid rgba(167, 139, 250, 0.45);
}
body.page-investments .investment-table tbody td {
    font-size: 14px;
    vertical-align: middle;
    border-bottom-color: var(--rm-border-soft);
    background: #161618;
    color: var(--rm-text);
}
body.page-investments .investment-table tbody tr {
    background: #161618;
}
body.page-investments .investment-table tbody tr:hover {
    background: #1e1e24;
}
body.page-investments .investment-amount-col {
    text-align: right;
    white-space: nowrap;
}
body.page-investments .investment-amount-cell {
    font-weight: 700;
}
body.page-investments .investment-notes-cell {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.page-investments .investment-empty-cell {
    text-align: center;
    color: var(--rm-empty-state-fg);
    padding: 20px 12px;
}
body.page-investments .investment-empty-cell strong {
    color: var(--rm-empty-state-fg);
    font-weight: 700;
}
body.page-investments .investment-row-actions {
    text-align: center;
    white-space: nowrap;
}
body.page-investments .investment-row-actions .actions-inner {
    justify-content: center;
    width: 100%;
    margin-left: auto;
}
body.page-investments .investment-actions-col,
body.page-investments .investment-row-actions {
    width: 4.4rem;
    min-width: 4.4rem;
    max-width: 4.4rem;
}
body.page-investments .investment-table thead th.investment-actions-col,
body.page-investments .investment-table tbody td.investment-row-actions {
    position: sticky;
    right: 0;
    z-index: 3;
    background: #161618;
}
body.page-investments .investment-table thead th.investment-actions-col {
    z-index: 4;
    background: #3b2b55;
    text-align: center;
}
body.page-investments .investment-row-actions .actions-inner {
    justify-content: center;
    margin-right: 0;
}

#investmentRowActionModal .modal-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
#investmentRowActionModal .modal-actions > button {
    min-width: 112px;
    height: 40px;
    padding: 0 14px;
    box-sizing: border-box;
}
#investmentModal .modal-card {
    border-color: color-mix(in srgb, #8b5cf6 35%, #e5e7eb);
    border-top: none;
}

body.page-income .panel:not(.category-panel):not(.expense-empty-panel) {
    border: 1px solid var(--rm-border);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
    background: linear-gradient(180deg, #1f1e18 0%, #141418 100%);
}
body.page-income .panel.income-empty-panel {
    background: var(--rm-empty-state-bg);
    border-color: rgba(240, 192, 64, 0.25);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3);
}

body.page-income.page-expenses .panel.expense-empty-panel {
    border: none;
    background: var(--rm-empty-state-bg);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3);
}
body.page-income .gastos-top .panel {
    border-color: rgba(240, 192, 64, 0.28);
}
body.page-income .income-head-panel h1,
body.page-income .income-totals-panel h2,
body.page-income .month-year-header strong {
    color: #fde68a;
}
body.page-income .income-head-icon {
    color: #f0c040;
    font-size: 1.15em;
    flex-shrink: 0;
}
body.page-income .income-tagline {
    color: var(--rm-text-muted);
    font-size: 12px;
    line-height: 1.45;
    margin: 0;
}
body.page-income .gastos-top {
    align-items: stretch;
}
body.page-income .gastos-top > .panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
}
body.page-income .income-add-btn {
    min-width: 168px;
    min-height: 48px;
    padding: 10px 16px;
    font-size: 17px;
    font-weight: 700;
}
body.page-income .income-table-panel {
    padding: 0;
    overflow: hidden;
}
body.page-income .income-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    min-width: 1320px;
}
body.page-income .income-table thead th {
    background: linear-gradient(180deg, #111827 0%, #1f2937 100%);
    color: #f8fafc;
    font-size: 12px;
    padding: 6px 6px;
    border-bottom: 2px solid #374151;
    box-sizing: border-box;
}
body.page-income .income-table tbody td {
    font-size: 13px;
    vertical-align: middle;
    border-bottom-color: var(--rm-border-soft);
    background: #161618;
    color: var(--rm-text);
    padding: 6px 6px;
    box-sizing: border-box;
}
body.page-income .income-table tbody tr {
    background: #161618;
}
body.page-income .income-table tbody tr:hover {
    background: #1e1e24;
}
body.page-income .income-amount-col {
    text-align: right;
    white-space: nowrap;
}
body.page-income .income-amount-cell {
    font-weight: 700;
}
body.page-income .income-empty-cell {
    text-align: center;
    color: var(--rm-empty-state-fg);
    padding: 20px 12px;
}
body.page-income .income-empty-cell strong {
    color: var(--rm-empty-state-fg);
    font-weight: 700;
}
body.page-expenses .expense-empty-cell {
    text-align: center;
    color: var(--rm-empty-state-fg);
    padding: 20px 12px;
}
body.page-expenses .expense-empty-cell strong {
    color: var(--rm-empty-state-fg);
    font-weight: 700;
}
body.page-income .income-row-actions {
    text-align: center;
    white-space: nowrap;
}
body.page-income .income-row-actions .actions-inner {
    justify-content: center;
    width: 100%;
    margin-left: auto;
}
body.page-income .income-table thead th.income-actions-col,
body.page-income .income-table tbody td.income-row-actions {
    position: sticky;
    right: 0;
    z-index: 3;
    background: #161618;
}
body.page-income .income-table thead th.income-actions-col {
    z-index: 4;
    background: linear-gradient(180deg, #111827 0%, #1f2937 100%);
    text-align: center;
}
body.page-income .income-row-actions .actions-inner {
    justify-content: center;
    margin-right: 0;
}

#incomeRowActionModal .modal-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
#incomeRowActionModal .modal-actions > button {
    min-width: 112px;
    height: 40px;
    padding: 0 14px;
    box-sizing: border-box;
}

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

#incomeModal .income-modal-field--recurring {
    min-width: 0;
    align-self: end;
    padding-bottom: 2px;
}
#incomeModal .income-modal-field--notes {
    grid-column: 1 / -1;
    min-width: 0;
}
#incomeModal .income-modal-field--notes .modal-field__textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 72px;
}
@media (max-width: 520px) {
    #incomeModal .income-modal-field--recurring {
        align-self: start;
        padding-bottom: 0;
    }
}
.modal-field--checkbox {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}
.modal-field--checkbox input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: #c9a227;
    cursor: pointer;
}

.total-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(4, 1fr);
}
.total-item {
    background: color-mix(in srgb, var(--cat) 18%, white);
    border-left: 6px solid var(--cat);
    border-radius: 10px;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 40, 25, 0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: none;
    align-items: center;
    justify-content: center;

    z-index: 1200;
    padding: max(52px, env(safe-area-inset-top, 0px) + 44px) 16px 28px;
    box-sizing: border-box;
}

@keyframes modal-backdrop-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes modal-card-rise-in {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.modal-backdrop.open {
    display: flex;
    animation: modal-backdrop-fade-in 0.32s ease-out forwards;
}
.modal-backdrop.open > .modal-card,
.modal-backdrop.open > .modal-app-shell {
    transform-origin: center bottom;
    animation: modal-card-rise-in 0.42s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes modal-backdrop-fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}
@keyframes modal-card-rise-out {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(40px);
    }
}
.modal-backdrop.open.is-closing {
    animation: modal-backdrop-fade-out 0.28s ease-in forwards;
}
.modal-backdrop.open.is-closing > .modal-card,
.modal-backdrop.open.is-closing > .modal-app-shell {
    animation: modal-card-rise-out 0.32s cubic-bezier(0.55, 0.06, 0.68, 0.19) forwards;
}

@keyframes expense-edit-drawer-slide-in {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}
@keyframes expense-edit-drawer-slide-out {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(100%);
    }
}

#editExpenseModal.modal-backdrop--drawer,
#paymentModal.modal-backdrop--drawer,
#incomeCollectionModal.modal-backdrop--drawer,
#incomeModal.modal-backdrop--drawer {
    flex-direction: row;
    justify-content: flex-end;
    align-items: stretch;
    padding: 0;
    padding-top: env(safe-area-inset-top, 0px);
}
#editExpenseModal.modal-backdrop--drawer .expense-edit-drawer__scrim,
#paymentModal.modal-backdrop--drawer .expense-edit-drawer__scrim,
#incomeCollectionModal.modal-backdrop--drawer .expense-edit-drawer__scrim,
#incomeModal.modal-backdrop--drawer .expense-edit-drawer__scrim {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    align-self: stretch;
}
#editExpenseModal.modal-backdrop--drawer .expense-edit-drawer__panel.modal-card,
#paymentModal.modal-backdrop--drawer .expense-edit-drawer__panel.modal-card,
#incomeCollectionModal.modal-backdrop--drawer .expense-edit-drawer__panel.modal-card,
#incomeModal.modal-backdrop--drawer .expense-edit-drawer__panel.modal-card {
    flex: 0 0 auto;
    width: min(100vw, 560px);
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    min-height: 0;
    margin: 0;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    box-shadow:
        -10px 0 36px rgba(0, 0, 0, 0.2),
        0 0 0 1px rgba(18, 111, 56, 0.12);
    transform: translateX(100%);
    transform-origin: right center;
}
#editExpenseModal.modal-backdrop--drawer .expense-edit-drawer__head,
#paymentModal.modal-backdrop--drawer .expense-edit-drawer__head,
#incomeCollectionModal.modal-backdrop--drawer .expense-edit-drawer__head,
#incomeModal.modal-backdrop--drawer .expense-edit-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-shrink: 0;
    padding-right: 16px;
}
#editExpenseModal.modal-backdrop--drawer .expense-edit-drawer__head .modal-card__title,
#paymentModal.modal-backdrop--drawer .expense-edit-drawer__head .modal-card__title,
#incomeCollectionModal.modal-backdrop--drawer .expense-edit-drawer__head .modal-card__title,
#incomeModal.modal-backdrop--drawer .expense-edit-drawer__head .modal-card__title {
    min-width: 0;
}
#editExpenseModal.modal-backdrop--drawer .expense-edit-drawer__close,
#paymentModal.modal-backdrop--drawer .expense-edit-drawer__close,
#incomeCollectionModal.modal-backdrop--drawer .expense-edit-drawer__close,
#incomeModal.modal-backdrop--drawer .expense-edit-drawer__close {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease;
}
#editExpenseModal.modal-backdrop--drawer .expense-edit-drawer__close:hover,
#paymentModal.modal-backdrop--drawer .expense-edit-drawer__close:hover,
#incomeCollectionModal.modal-backdrop--drawer .expense-edit-drawer__close:hover,
#incomeModal.modal-backdrop--drawer .expense-edit-drawer__close:hover {
    background: rgba(255, 255, 255, 0.24);
}
#editExpenseModal.modal-backdrop--drawer .modal-card__body,
#paymentModal.modal-backdrop--drawer .modal-card__body,
#incomeCollectionModal.modal-backdrop--drawer .modal-card__body,
#incomeModal.modal-backdrop--drawer .modal-card__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

#editExpenseModal.modal-backdrop--drawer.open > .expense-edit-drawer__panel.modal-card,
#paymentModal.modal-backdrop--drawer.open > .expense-edit-drawer__panel.modal-card,
#incomeCollectionModal.modal-backdrop--drawer.open > .expense-edit-drawer__panel.modal-card,
#incomeModal.modal-backdrop--drawer.open > .expense-edit-drawer__panel.modal-card {
    animation: expense-edit-drawer-slide-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
#editExpenseModal.modal-backdrop--drawer.open.is-closing > .expense-edit-drawer__panel.modal-card,
#paymentModal.modal-backdrop--drawer.open.is-closing > .expense-edit-drawer__panel.modal-card,
#incomeCollectionModal.modal-backdrop--drawer.open.is-closing > .expense-edit-drawer__panel.modal-card,
#incomeModal.modal-backdrop--drawer.open.is-closing > .expense-edit-drawer__panel.modal-card {
    animation: expense-edit-drawer-slide-out 0.32s cubic-bezier(0.55, 0.06, 0.68, 0.19) forwards;
}
#editExpenseModal.modal-backdrop--drawer.open > .expense-edit-drawer__scrim,
#paymentModal.modal-backdrop--drawer.open > .expense-edit-drawer__scrim,
#incomeCollectionModal.modal-backdrop--drawer.open > .expense-edit-drawer__scrim,
#incomeModal.modal-backdrop--drawer.open > .expense-edit-drawer__scrim {
    animation: none;
}

#expenseAccountEditModal.modal-backdrop--drawer,
#expenseAccountSpendingModal.modal-backdrop--drawer,
#savingsModal.modal-backdrop--drawer,
#savingsNewRecordModal.modal-backdrop--drawer,
#savingsWithdrawalModal.modal-backdrop--drawer,
#savingsCategoryEditModal.modal-backdrop--drawer,
#inv2FormModal.modal-backdrop--drawer {
    flex-direction: row;
    justify-content: flex-end;
    align-items: stretch;
    padding: 0;
    padding-top: env(safe-area-inset-top, 0px);
}
#expenseAccountEditModal.modal-backdrop--drawer .expense-edit-drawer__scrim,
#expenseAccountSpendingModal.modal-backdrop--drawer .expense-edit-drawer__scrim,
#savingsModal.modal-backdrop--drawer .expense-edit-drawer__scrim,
#savingsNewRecordModal.modal-backdrop--drawer .expense-edit-drawer__scrim,
#savingsWithdrawalModal.modal-backdrop--drawer .expense-edit-drawer__scrim,
#savingsCategoryEditModal.modal-backdrop--drawer .expense-edit-drawer__scrim,
#inv2FormModal.modal-backdrop--drawer .expense-edit-drawer__scrim {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    align-self: stretch;
}
#expenseAccountEditModal.modal-backdrop--drawer .expense-edit-drawer__panel.modal-card,
#expenseAccountSpendingModal.modal-backdrop--drawer .expense-edit-drawer__panel.modal-card,
#savingsModal.modal-backdrop--drawer .expense-edit-drawer__panel.modal-card,
#savingsNewRecordModal.modal-backdrop--drawer .expense-edit-drawer__panel.modal-card,
#savingsWithdrawalModal.modal-backdrop--drawer .expense-edit-drawer__panel.modal-card,
#savingsCategoryEditModal.modal-backdrop--drawer .expense-edit-drawer__panel.modal-card,
#inv2FormModal.modal-backdrop--drawer .expense-edit-drawer__panel.modal-card {
    flex: 0 0 auto;
    width: min(100vw, 560px);
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    min-height: 0;
    margin: 0;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    box-shadow:
        -10px 0 36px rgba(0, 0, 0, 0.2),
        0 0 0 1px rgba(18, 111, 56, 0.12);
    transform: translateX(100%);
    transform-origin: right center;
}
#expenseAccountEditModal.modal-backdrop--drawer .expense-edit-drawer__head,
#expenseAccountSpendingModal.modal-backdrop--drawer .expense-edit-drawer__head,
#savingsModal.modal-backdrop--drawer .expense-edit-drawer__head,
#savingsNewRecordModal.modal-backdrop--drawer .expense-edit-drawer__head,
#savingsWithdrawalModal.modal-backdrop--drawer .expense-edit-drawer__head,
#savingsCategoryEditModal.modal-backdrop--drawer .expense-edit-drawer__head,
#inv2FormModal.modal-backdrop--drawer .expense-edit-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-shrink: 0;
    padding-right: 16px;
}
#expenseAccountEditModal.modal-backdrop--drawer .expense-edit-drawer__head .modal-card__title,
#expenseAccountSpendingModal.modal-backdrop--drawer .expense-edit-drawer__head .modal-card__title,
#savingsModal.modal-backdrop--drawer .expense-edit-drawer__head .modal-card__title,
#savingsNewRecordModal.modal-backdrop--drawer .expense-edit-drawer__head .modal-card__title,
#savingsWithdrawalModal.modal-backdrop--drawer .expense-edit-drawer__head .modal-card__title,
#savingsCategoryEditModal.modal-backdrop--drawer .expense-edit-drawer__head .modal-card__title,
#inv2FormModal.modal-backdrop--drawer .expense-edit-drawer__head .modal-card__title {
    min-width: 0;
}
#expenseAccountEditModal.modal-backdrop--drawer .expense-edit-drawer__close,
#expenseAccountSpendingModal.modal-backdrop--drawer .expense-edit-drawer__close,
#savingsModal.modal-backdrop--drawer .expense-edit-drawer__close,
#savingsNewRecordModal.modal-backdrop--drawer .expense-edit-drawer__close,
#savingsWithdrawalModal.modal-backdrop--drawer .expense-edit-drawer__close,
#savingsCategoryEditModal.modal-backdrop--drawer .expense-edit-drawer__close,
#inv2FormModal.modal-backdrop--drawer .expense-edit-drawer__close {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease;
}
#expenseAccountEditModal.modal-backdrop--drawer .expense-edit-drawer__close:hover,
#expenseAccountSpendingModal.modal-backdrop--drawer .expense-edit-drawer__close:hover,
#savingsModal.modal-backdrop--drawer .expense-edit-drawer__close:hover,
#savingsNewRecordModal.modal-backdrop--drawer .expense-edit-drawer__close:hover,
#savingsWithdrawalModal.modal-backdrop--drawer .expense-edit-drawer__close:hover,
#savingsCategoryEditModal.modal-backdrop--drawer .expense-edit-drawer__close:hover,
#inv2FormModal.modal-backdrop--drawer .expense-edit-drawer__close:hover {
    background: rgba(255, 255, 255, 0.24);
}
#expenseAccountEditModal.modal-backdrop--drawer .modal-card__body,
#expenseAccountSpendingModal.modal-backdrop--drawer .modal-card__body,
#savingsModal.modal-backdrop--drawer .modal-card__body,
#savingsNewRecordModal.modal-backdrop--drawer .modal-card__body,
#savingsWithdrawalModal.modal-backdrop--drawer .modal-card__body,
#savingsCategoryEditModal.modal-backdrop--drawer .modal-card__body,
#inv2FormModal.modal-backdrop--drawer .modal-card__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
#expenseAccountEditModal.modal-backdrop--drawer.open > .expense-edit-drawer__panel.modal-card,
#expenseAccountSpendingModal.modal-backdrop--drawer.open > .expense-edit-drawer__panel.modal-card,
#savingsModal.modal-backdrop--drawer.open > .expense-edit-drawer__panel.modal-card,
#savingsNewRecordModal.modal-backdrop--drawer.open > .expense-edit-drawer__panel.modal-card,
#savingsWithdrawalModal.modal-backdrop--drawer.open > .expense-edit-drawer__panel.modal-card,
#savingsCategoryEditModal.modal-backdrop--drawer.open > .expense-edit-drawer__panel.modal-card,
#inv2FormModal.modal-backdrop--drawer.open > .expense-edit-drawer__panel.modal-card {
    animation: expense-edit-drawer-slide-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
#expenseAccountEditModal.modal-backdrop--drawer.open.is-closing > .expense-edit-drawer__panel.modal-card,
#expenseAccountSpendingModal.modal-backdrop--drawer.open.is-closing > .expense-edit-drawer__panel.modal-card,
#savingsModal.modal-backdrop--drawer.open.is-closing > .expense-edit-drawer__panel.modal-card,
#savingsNewRecordModal.modal-backdrop--drawer.open.is-closing > .expense-edit-drawer__panel.modal-card,
#savingsWithdrawalModal.modal-backdrop--drawer.open.is-closing > .expense-edit-drawer__panel.modal-card,
#savingsCategoryEditModal.modal-backdrop--drawer.open.is-closing > .expense-edit-drawer__panel.modal-card,
#inv2FormModal.modal-backdrop--drawer.open.is-closing > .expense-edit-drawer__panel.modal-card {
    animation: expense-edit-drawer-slide-out 0.32s cubic-bezier(0.55, 0.06, 0.68, 0.19) forwards;
}
#expenseAccountEditModal.modal-backdrop--drawer.open > .expense-edit-drawer__scrim,
#expenseAccountSpendingModal.modal-backdrop--drawer.open > .expense-edit-drawer__scrim,
#savingsModal.modal-backdrop--drawer.open > .expense-edit-drawer__scrim,
#savingsNewRecordModal.modal-backdrop--drawer.open > .expense-edit-drawer__scrim,
#savingsWithdrawalModal.modal-backdrop--drawer.open > .expense-edit-drawer__scrim,
#savingsCategoryEditModal.modal-backdrop--drawer.open > .expense-edit-drawer__scrim,
#inv2FormModal.modal-backdrop--drawer.open > .expense-edit-drawer__scrim {
    animation: none;
}

#authLoginDrawer.modal-backdrop--drawer,
#authRegisterDrawer.modal-backdrop--drawer {
    flex-direction: row;
    justify-content: flex-end;
    align-items: stretch;
    padding: 0;
    padding-top: env(safe-area-inset-top, 0px);
}
#authLoginDrawer.modal-backdrop--drawer .expense-edit-drawer__scrim,
#authRegisterDrawer.modal-backdrop--drawer .expense-edit-drawer__scrim {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    align-self: stretch;
}
#authLoginDrawer.modal-backdrop--drawer .expense-edit-drawer__panel.modal-card,
#authRegisterDrawer.modal-backdrop--drawer .expense-edit-drawer__panel.modal-card {
    flex: 0 0 auto;
    width: min(100vw, 720px);
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    min-height: 0;
    margin: 0;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    box-shadow:
        -10px 0 36px rgba(0, 0, 0, 0.2),
        0 0 0 1px rgba(18, 111, 56, 0.12);
    transform: translateX(100%);
    transform-origin: right center;
}
#authLoginDrawer.modal-backdrop--drawer.open > .expense-edit-drawer__panel.modal-card,
#authRegisterDrawer.modal-backdrop--drawer.open > .expense-edit-drawer__panel.modal-card {
    animation: expense-edit-drawer-slide-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
#authLoginDrawer.modal-backdrop--drawer.open.is-closing > .expense-edit-drawer__panel.modal-card,
#authRegisterDrawer.modal-backdrop--drawer.open.is-closing > .expense-edit-drawer__panel.modal-card {
    animation: expense-edit-drawer-slide-out 0.32s cubic-bezier(0.55, 0.06, 0.68, 0.19) forwards;
}
#authLoginDrawer.modal-backdrop--drawer.open > .expense-edit-drawer__scrim,
#authRegisterDrawer.modal-backdrop--drawer.open > .expense-edit-drawer__scrim {
    animation: none;
}

body.page-expenses #editExpenseModal.modal-backdrop,
body.page-expenses #paymentModal.modal-backdrop,
body.page-income #incomeCollectionModal.modal-backdrop,
body.page-income #incomeModal.modal-backdrop,
body.page-investments #inv2FormModal.modal-backdrop {
    background: rgba(8, 16, 11, 0.58);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
body.page-expenses #editExpenseModal.modal-backdrop--drawer .expense-edit-drawer__panel.modal-card,
body.page-expenses #paymentModal.modal-backdrop--drawer .expense-edit-drawer__panel.modal-card,
body.page-income #incomeCollectionModal.modal-backdrop--drawer .expense-edit-drawer__panel.modal-card,
body.page-income #incomeModal.modal-backdrop--drawer .expense-edit-drawer__panel.modal-card,
body.page-investments #inv2FormModal.modal-backdrop--drawer .expense-edit-drawer__panel.modal-card {
    border-radius: 14px 0 0 14px;
    border: 1px solid var(--rm-border-soft);
    border-left: 4px solid #4ade80;
    background: linear-gradient(180deg, #1a1a1f 0%, #141418 100%);
    box-shadow:
        -14px 0 44px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(0, 0, 0, 0.28);
}
body.page-expenses #editExpenseModal.modal-backdrop--drawer .expense-edit-drawer__head.modal-card__head,
body.page-expenses #paymentModal.modal-backdrop--drawer .expense-edit-drawer__head.modal-card__head,
body.page-income #incomeCollectionModal.modal-backdrop--drawer .expense-edit-drawer__head.modal-card__head,
body.page-income #incomeModal.modal-backdrop--drawer .expense-edit-drawer__head.modal-card__head,
body.page-investments #inv2FormModal.modal-backdrop--drawer .expense-edit-drawer__head.modal-card__head {
    background:
        radial-gradient(circle at 78% 28%, rgba(74, 222, 128, 0.14) 0, transparent 52%),
        linear-gradient(180deg, #1f2520 0%, #161a18 100%);
    border-radius: 14px 0 0 0;
    border-bottom: 4px solid rgba(74, 222, 128, 0.55);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.22);
    padding: 14px 16px 14px 18px;
    align-items: flex-start;
}
body.page-expenses #editExpenseModal.modal-backdrop--drawer .expense-edit-drawer__head-text,
body.page-expenses #paymentModal.modal-backdrop--drawer .expense-edit-drawer__head-text,
body.page-income #incomeCollectionModal.modal-backdrop--drawer .expense-edit-drawer__head-text,
body.page-income #incomeModal.modal-backdrop--drawer .expense-edit-drawer__head-text,
body.page-investments #inv2FormModal.modal-backdrop--drawer .expense-edit-drawer__head-text {
    min-width: 0;
    flex: 1 1 auto;
    padding-right: 10px;
}
body.page-expenses #editExpenseModal.modal-backdrop--drawer .edit-expense-drawer__hint,
body.page-expenses #paymentModal.modal-backdrop--drawer .edit-expense-drawer__hint,
body.page-income #incomeCollectionModal.modal-backdrop--drawer .edit-expense-drawer__hint,
body.page-income #incomeModal.modal-backdrop--drawer .expense-edit-drawer__head .modal-card__subtitle {
    margin: 6px 0 0;
    max-width: 28rem;
    font-size: 0.875rem;
    line-height: 1.38;
    font-weight: 400;
    color: #94a3b8;
}
body.page-expenses #editExpenseModal.modal-backdrop--drawer .expense-edit-drawer__head .modal-card__title,
body.page-expenses #paymentModal.modal-backdrop--drawer .expense-edit-drawer__head .modal-card__title,
body.page-income #incomeCollectionModal.modal-backdrop--drawer .expense-edit-drawer__head .modal-card__title,
body.page-income #incomeModal.modal-backdrop--drawer .expense-edit-drawer__head .modal-card__title,
body.page-investments #inv2FormModal.modal-backdrop--drawer .expense-edit-drawer__head .modal-card__title {
    color: #bbf7d0;
    font-size: 1.125rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
}
body.page-expenses #editExpenseModal.modal-backdrop--drawer .expense-edit-drawer__close,
body.page-expenses #paymentModal.modal-backdrop--drawer .expense-edit-drawer__close,
body.page-income #incomeCollectionModal.modal-backdrop--drawer .expense-edit-drawer__close,
body.page-income #incomeModal.modal-backdrop--drawer .expense-edit-drawer__close,
body.page-investments #inv2FormModal.modal-backdrop--drawer .expense-edit-drawer__close {
    border: 1px solid #166534;
    background: linear-gradient(180deg, #1e3a2a 0%, #152a1c 100%);
    color: #bbf7d0;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 1px 2px rgba(0, 0, 0, 0.22);
}
body.page-expenses #editExpenseModal.modal-backdrop--drawer .expense-edit-drawer__close:hover,
body.page-expenses #paymentModal.modal-backdrop--drawer .expense-edit-drawer__close:hover,
body.page-income #incomeCollectionModal.modal-backdrop--drawer .expense-edit-drawer__close:hover,
body.page-income #incomeModal.modal-backdrop--drawer .expense-edit-drawer__close:hover,
body.page-investments #inv2FormModal.modal-backdrop--drawer .expense-edit-drawer__close:hover {
    border-color: #22c55e;
    color: #fff;
    background: linear-gradient(180deg, #225a3a 0%, #183828 100%);
}
body.page-expenses #editExpenseModal.modal-backdrop--drawer .modal-card__body,
body.page-expenses #paymentModal.modal-backdrop--drawer .modal-card__body,
body.page-income #incomeCollectionModal.modal-backdrop--drawer .modal-card__body,
body.page-income #incomeModal.modal-backdrop--drawer .modal-card__body,
body.page-investments #inv2FormModal.modal-backdrop--drawer .modal-card__body {
    background: linear-gradient(180deg, #18181d 0%, #141418 100%);
    padding: 16px 18px 18px;
}
body.page-expenses #editExpenseModal.modal-backdrop--drawer .modal-card__body .modal-field__label,
body.page-expenses #paymentModal.modal-backdrop--drawer .modal-card__body .modal-field__label,
body.page-income #incomeCollectionModal.modal-backdrop--drawer .modal-card__body .modal-field__label,
body.page-income #incomeModal.modal-backdrop--drawer .modal-card__body .modal-field__label,
body.page-investments #inv2FormModal.modal-backdrop--drawer .modal-card__body .modal-field__label {
    color: #94a3b8;
}
body.page-expenses #editExpenseModal.modal-backdrop--drawer .modal-card__body .modal-grid input,
body.page-expenses #editExpenseModal.modal-backdrop--drawer .modal-card__body .modal-grid .modal-field__select,
body.page-expenses #editExpenseModal.modal-backdrop--drawer .modal-card__body .modal-field__textarea,
body.page-expenses #paymentModal.modal-backdrop--drawer .modal-card__body .modal-grid input,
body.page-expenses #paymentModal.modal-backdrop--drawer .modal-card__body .modal-grid .modal-field__select,
body.page-expenses #paymentModal.modal-backdrop--drawer .modal-card__body .modal-field__textarea,
body.page-income #incomeCollectionModal.modal-backdrop--drawer .modal-card__body .modal-grid input,
body.page-income #incomeCollectionModal.modal-backdrop--drawer .modal-card__body .modal-grid .modal-field__select,
body.page-income #incomeCollectionModal.modal-backdrop--drawer .modal-card__body .modal-field__textarea,
body.page-income #incomeModal.modal-backdrop--drawer .modal-card__body .modal-grid input,
body.page-income #incomeModal.modal-backdrop--drawer .modal-card__body .modal-grid .modal-field__select,
body.page-income #incomeModal.modal-backdrop--drawer .modal-card__body .modal-field__textarea,
body.page-investments #inv2FormModal.modal-backdrop--drawer .modal-card__body .inv2-modal-grid input,
body.page-investments #inv2FormModal.modal-backdrop--drawer .modal-card__body .inv2-modal-grid .modal-field__select,
body.page-investments #inv2FormModal.modal-backdrop--drawer .modal-card__body .modal-field__textarea {
    border-color: var(--rm-border-soft);
    background: #1e1e24;
    color: var(--rm-text);
}
body.page-expenses #editExpenseModal.modal-backdrop--drawer .modal-card__body .modal-grid input:focus,
body.page-expenses #editExpenseModal.modal-backdrop--drawer .modal-card__body .modal-grid .modal-field__select:focus,
body.page-expenses #editExpenseModal.modal-backdrop--drawer .modal-card__body .modal-field__textarea:focus,
body.page-expenses #paymentModal.modal-backdrop--drawer .modal-card__body .modal-grid input:focus,
body.page-expenses #paymentModal.modal-backdrop--drawer .modal-card__body .modal-grid .modal-field__select:focus,
body.page-expenses #paymentModal.modal-backdrop--drawer .modal-card__body .modal-field__textarea:focus,
body.page-income #incomeCollectionModal.modal-backdrop--drawer .modal-card__body .modal-grid input:focus,
body.page-income #incomeCollectionModal.modal-backdrop--drawer .modal-card__body .modal-grid .modal-field__select:focus,
body.page-income #incomeCollectionModal.modal-backdrop--drawer .modal-card__body .modal-field__textarea:focus,
body.page-income #incomeModal.modal-backdrop--drawer .modal-card__body .modal-grid input:focus,
body.page-income #incomeModal.modal-backdrop--drawer .modal-card__body .modal-grid .modal-field__select:focus,
body.page-income #incomeModal.modal-backdrop--drawer .modal-card__body .modal-field__textarea:focus,
body.page-investments #inv2FormModal.modal-backdrop--drawer .modal-card__body .inv2-modal-grid input:focus,
body.page-investments #inv2FormModal.modal-backdrop--drawer .modal-card__body .inv2-modal-grid .modal-field__select:focus,
body.page-investments #inv2FormModal.modal-backdrop--drawer .modal-card__body .modal-field__textarea:focus {
    border-color: #22c55e;
    box-shadow: 0 0 0 3px color-mix(in srgb, #22c55e 22%, transparent);
}

body.page-investments #inv2FormModal.modal-backdrop--drawer .modal-card__body .inv2-modal-grid .modal-field__input,
body.page-investments #inv2FormModal.modal-backdrop--drawer .modal-card__body .inv2-modal-grid .modal-field__select {
    min-height: 44px;
    box-sizing: border-box;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 14px;
    line-height: 1.35;
}
body.page-investments #inv2FormModal.modal-backdrop--drawer .modal-card__body .inv2-modal-grid .modal-field__select {
    appearance: none;
    padding-right: 38px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M3 4.5 6 7.5 9 4.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px 12px;
}
body.page-expenses #editExpenseModal.modal-backdrop--drawer .modal-card__body .modal-grid input::placeholder,
body.page-expenses #editExpenseModal.modal-backdrop--drawer .modal-card__body .modal-field__textarea::placeholder,
body.page-income #incomeModal.modal-backdrop--drawer .modal-card__body .modal-grid input::placeholder,
body.page-income #incomeModal.modal-backdrop--drawer .modal-card__body .modal-field__textarea::placeholder,
body.page-investments #inv2FormModal.modal-backdrop--drawer .modal-card__body .inv2-modal-grid input::placeholder,
body.page-investments #inv2FormModal.modal-backdrop--drawer .modal-card__body .modal-field__textarea::placeholder {
    color: #71717a;
}
body.page-expenses #editExpenseModal.modal-backdrop--drawer .modal-card__body .modal-grid input[type="file"] {
    color: #cbd5e1;
}
body.page-expenses #editExpenseModal.modal-backdrop--drawer .payment-receipt-hint {
    color: #94a3b8;
}
body.page-expenses #editExpenseModal.modal-backdrop--drawer .payment-receipt-view-btn {
    color: #86efac;
}
body.page-expenses #editExpenseModal.modal-backdrop--drawer .payment-receipt-view-btn:hover {
    color: #bbf7d0;
}
body.page-expenses #editExpenseModal.modal-backdrop--drawer .payment-receipt-inline-viewer {
    border-color: rgba(74, 222, 128, 0.3);
    background: #0b1220;
}

body.page-expenses #paymentModal.modal-backdrop--drawer .payment-section-label,
body.page-income #incomeCollectionModal.modal-backdrop--drawer .payment-section-label {
    color: #94a3b8;
}
body.page-expenses #paymentModal.modal-backdrop--drawer .payment-option,
body.page-income #incomeCollectionModal.modal-backdrop--drawer .payment-option {
    border-color: var(--rm-border-soft);
    background: #1e1e24;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
body.page-expenses #paymentModal.modal-backdrop--drawer .payment-option:hover,
body.page-income #incomeCollectionModal.modal-backdrop--drawer .payment-option:hover {
    border-color: color-mix(in srgb, #22c55e 46%, var(--rm-border-soft));
    background: color-mix(in srgb, #22c55e 9%, #1e1e24);
}
body.page-expenses #paymentModal.modal-backdrop--drawer .payment-option:has(input:checked),
body.page-income #incomeCollectionModal.modal-backdrop--drawer .payment-option:has(input:checked) {
    border-color: #22c55e;
    background: color-mix(in srgb, #22c55e 14%, #1e1e24);
    box-shadow:
        inset 0 0 0 1px rgba(34, 197, 94, 0.45),
        0 0 0 1px rgba(34, 197, 94, 0.25);
}
body.page-expenses #paymentModal.modal-backdrop--drawer .payment-option__title,
body.page-income #incomeCollectionModal.modal-backdrop--drawer .payment-option__title {
    color: #e2e8f0;
}
body.page-expenses #paymentModal.modal-backdrop--drawer .payment-option__hint,
body.page-income #incomeCollectionModal.modal-backdrop--drawer .payment-option__hint {
    color: #94a3b8;
}
body.page-expenses #paymentModal.modal-backdrop--drawer .payment-option:has(input:checked) .payment-option__title,
body.page-income #incomeCollectionModal.modal-backdrop--drawer .payment-option:has(input:checked) .payment-option__title {
    color: #bbf7d0;
}
body.page-expenses #paymentModal.modal-backdrop--drawer .partial-amount-wrap,
body.page-income #incomeCollectionModal.modal-backdrop--drawer .partial-amount-wrap {
    background: color-mix(in srgb, #22c55e 8%, #1e1e24);
    border-color: color-mix(in srgb, #22c55e 24%, var(--rm-border-soft));
}
body.page-expenses #paymentModal.modal-backdrop--drawer .partial-amount-label,
body.page-income #incomeCollectionModal.modal-backdrop--drawer .partial-amount-label {
    color: #cbd5e1;
}
body.page-expenses #paymentModal.modal-backdrop--drawer .partial-input-shell,
body.page-income #incomeCollectionModal.modal-backdrop--drawer .partial-input-shell {
    border-color: var(--rm-border-soft);
    background: #1e1e24;
}
body.page-expenses #paymentModal.modal-backdrop--drawer .partial-input-shell:focus-within,
body.page-income #incomeCollectionModal.modal-backdrop--drawer .partial-input-shell:focus-within {
    border-color: #22c55e;
    box-shadow: 0 0 0 3px color-mix(in srgb, #22c55e 24%, transparent);
}
body.page-expenses #paymentModal.modal-backdrop--drawer .partial-input-watermark,
body.page-income #incomeCollectionModal.modal-backdrop--drawer .partial-input-watermark {
    color: color-mix(in srgb, #86efac 65%, #94a3b8);
}
body.page-expenses #paymentModal.modal-backdrop--drawer .modal-card__body #partialAmountInput,
body.page-income #incomeCollectionModal.modal-backdrop--drawer .modal-card__body #incomeCollectionPartialAmountInput {
    color: #e2e8f0;
}
body.page-expenses #paymentModal.modal-backdrop--drawer .modal-card__body #partialAmountInput::placeholder,
body.page-income #incomeCollectionModal.modal-backdrop--drawer .modal-card__body #incomeCollectionPartialAmountInput::placeholder {
    color: #71717a;
}
body.page-income #incomeCollectionModal.modal-backdrop--drawer .income-collection-date-wrap {
    margin-top: 14px;
}
body.page-income #incomeCollectionModal.modal-backdrop--drawer .income-collection-date-input {
    width: 100%;
    max-width: 240px;
    margin-top: 6px;
    border-radius: 10px;
    border: 1px solid var(--rm-border-soft);
    background: #1e1e24;
    color: #e2e8f0;
    padding: 10px 12px;
    font-size: 15px;
}
body.page-income #incomeCollectionModal.modal-backdrop--drawer .income-collection-date-input:focus {
    outline: none;
    border-color: #22c55e;
    box-shadow: 0 0 0 3px color-mix(in srgb, #22c55e 24%, transparent);
}

body.page-income #incomeModal.modal-backdrop--drawer .income-payment-history {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid rgba(148, 163, 184, 0.2);
}
body.page-income #incomeModal.modal-backdrop--drawer .income-payment-history[hidden] {
    display: none !important;
}
body.page-income #incomeModal.modal-backdrop--drawer .income-payment-history__title {
    color: #94a3b8 !important;
    margin-bottom: 10px;
}
body.page-income #incomeModal.modal-backdrop--drawer .income-payment-history__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
body.page-income #incomeModal.modal-backdrop--drawer .income-payment-history__row {
    padding: 10px 12px;
    border-radius: 10px;
    background: color-mix(in srgb, #22c55e 8%, #1e1e24);
    border: 1px solid color-mix(in srgb, #22c55e 20%, rgba(148, 163, 184, 0.25));
}
body.page-income #incomeModal.modal-backdrop--drawer .income-payment-history__main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 10px 12px;
}
body.page-income #incomeModal.modal-backdrop--drawer .income-payment-history__main--edit {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}
body.page-income #incomeModal.modal-backdrop--drawer .income-ph-edit-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    align-items: center;
    flex: 1;
    min-width: 0;
}
body.page-income #incomeModal.modal-backdrop--drawer .income-ph-edit-fields .income-ph-date-inp {
    max-width: 165px;
}
body.page-income #incomeModal.modal-backdrop--drawer .income-ph-amt-inp {
    min-width: 110px;
    max-width: 160px;
}
body.page-income #incomeModal.modal-backdrop--drawer .income-payment-history__left {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 2px;
    min-width: 0;
}
body.page-income #incomeModal.modal-backdrop--drawer .income-payment-history__when {
    font-size: 12px;
    font-weight: 500;
    color: #94a3b8;
}
body.page-income #incomeModal.modal-backdrop--drawer .income-payment-history__actions {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-shrink: 0;
}
body.page-income #incomeModal.modal-backdrop--drawer .income-payment-history__actions .btn-sm {
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
}
body.page-income #incomeModal.modal-backdrop--drawer .income-ph-del--armed {
    box-shadow: 0 0 0 2px color-mix(in srgb, #f87171 55%, transparent);
}
body.page-income #incomeModal.modal-backdrop--drawer .income-payment-history__label {
    font-size: 13px;
    font-weight: 600;
    color: #cbd5e1;
}
body.page-income #incomeModal.modal-backdrop--drawer .income-payment-history__value {
    font-size: 14px;
    font-weight: 700;
    color: #bbf7d0;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
body.page-expenses #editExpenseModal.modal-backdrop--drawer .modal-error,
body.page-expenses #paymentModal.modal-backdrop--drawer .modal-error,
body.page-income #incomeCollectionModal.modal-backdrop--drawer .modal-error,
body.page-income #incomeModal.modal-backdrop--drawer .modal-error,
body.page-investments #inv2FormModal.modal-backdrop--drawer .investment-modal-msg.is-error {
    color: #fecaca;
    background: rgba(127, 29, 29, 0.38);
    border-color: rgba(248, 113, 113, 0.45);
}
body.page-expenses #editExpenseModal.modal-backdrop--drawer .modal-actions,
body.page-expenses #paymentModal.modal-backdrop--drawer .modal-actions,
body.page-income #incomeCollectionModal.modal-backdrop--drawer .modal-actions,
body.page-income #incomeModal.modal-backdrop--drawer .modal-actions,
body.page-investments #inv2FormModal.modal-backdrop--drawer .modal-actions {
    border-top: 1px solid rgba(74, 222, 128, 0.14);
    margin-top: 16px;
    padding-top: 14px;
}
body.page-expenses #editExpenseModal.modal-backdrop--drawer .btn-modal-primary,
body.page-expenses #paymentModal.modal-backdrop--drawer .btn-modal-primary,
body.page-income #incomeCollectionModal.modal-backdrop--drawer .btn-modal-primary,
body.page-income #incomeModal.modal-backdrop--drawer .btn-modal-primary,
body.page-investments #inv2FormModal.modal-backdrop--drawer .btn-modal-primary {
    border: 1px solid rgba(74, 222, 128, 0.42);
    background: linear-gradient(180deg, #22a34d 0%, #17703a 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 4px 16px rgba(0, 0, 0, 0.35);
}
body.page-expenses #editExpenseModal.modal-backdrop--drawer .btn-modal-primary:hover,
body.page-expenses #paymentModal.modal-backdrop--drawer .btn-modal-primary:hover,
body.page-income #incomeCollectionModal.modal-backdrop--drawer .btn-modal-primary:hover,
body.page-income #incomeModal.modal-backdrop--drawer .btn-modal-primary:hover,
body.page-investments #inv2FormModal.modal-backdrop--drawer .btn-modal-primary:hover {
    background: linear-gradient(180deg, #2abf5a 0%, #1a853f 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        0 6px 18px rgba(0, 0, 0, 0.4);
}
body.page-expenses #editExpenseModal.modal-backdrop--drawer .btn-modal-secondary,
body.page-expenses #paymentModal.modal-backdrop--drawer .btn-modal-secondary,
body.page-income #incomeCollectionModal.modal-backdrop--drawer .btn-modal-secondary,
body.page-income #incomeModal.modal-backdrop--drawer .btn-modal-secondary,
body.page-investments #inv2FormModal.modal-backdrop--drawer .btn-modal-secondary {
    border: 2px solid rgba(74, 222, 128, 0.38);
    background: rgba(22, 40, 30, 0.65);
    color: #bbf7d0;
}
body.page-expenses #editExpenseModal.modal-backdrop--drawer .btn-modal-secondary:hover,
body.page-expenses #paymentModal.modal-backdrop--drawer .btn-modal-secondary:hover,
body.page-income #incomeCollectionModal.modal-backdrop--drawer .btn-modal-secondary:hover,
body.page-income #incomeModal.modal-backdrop--drawer .btn-modal-secondary:hover,
body.page-investments #inv2FormModal.modal-backdrop--drawer .btn-modal-secondary:hover {
    border-color: #4ade80;
    background: rgba(34, 90, 58, 0.55);
    color: #fff;
}
body.page-expenses #editExpenseModal.modal-backdrop--drawer .btn-danger,
body.page-expenses #paymentModal.modal-backdrop--drawer .btn-danger,
body.page-income #incomeCollectionModal.modal-backdrop--drawer .btn-danger,
body.page-income #incomeModal.modal-backdrop--drawer .btn-danger {
    border-color: rgba(248, 113, 113, 0.45);
    background: rgba(127, 29, 29, 0.35);
    color: #fecaca;
}
body.page-expenses #editExpenseModal.modal-backdrop--drawer .btn-danger:hover,
body.page-expenses #paymentModal.modal-backdrop--drawer .btn-danger:hover,
body.page-income #incomeCollectionModal.modal-backdrop--drawer .btn-danger:hover,
body.page-income #incomeModal.modal-backdrop--drawer .btn-danger:hover {
    background: rgba(153, 27, 27, 0.5);
    color: #fff;
}
body.page-expenses #editExpenseModal.modal-backdrop--drawer .category-quick-add-btn--icon,
body.page-income #incomeModal.modal-backdrop--drawer .category-quick-add-btn--icon {
    border: 1px solid #166534;
    background: linear-gradient(180deg, #1e3a2a 0%, #152a1c 100%);
    color: #86efac;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 1px 2px rgba(0, 0, 0, 0.2);
}
body.page-expenses #editExpenseModal.modal-backdrop--drawer .category-quick-add-btn--icon:hover,
body.page-income #incomeModal.modal-backdrop--drawer .category-quick-add-btn--icon:hover {
    border-color: #22c55e;
    color: #ecfdf5;
    background: linear-gradient(180deg, #225a3a 0%, #183828 100%);
}
body.page-expenses #editExpenseModal.modal-backdrop--drawer .category-icon-combo__btn,
body.page-income #incomeModal.modal-backdrop--drawer .category-icon-combo__btn {
    border-color: var(--rm-border-soft);
    background: #1e1e24;
    color: #e2e8f0;
}
body.page-expenses #editExpenseModal.modal-backdrop--drawer .category-icon-combo__btn:focus,
body.page-income #incomeModal.modal-backdrop--drawer .category-icon-combo__btn:focus {
    border-color: #22c55e;
    box-shadow: 0 0 0 3px color-mix(in srgb, #22c55e 22%, transparent);
}
body.page-expenses #editExpenseModal.modal-backdrop--drawer .category-icon-combo__leading i,
body.page-income #incomeModal.modal-backdrop--drawer .category-icon-combo__leading i {
    color: #22c55e;
}
body.page-expenses #editExpenseModal.modal-backdrop--drawer .category-icon-combo__caret,
body.page-income #incomeModal.modal-backdrop--drawer .category-icon-combo__caret {
    border-top-color: #94a3b8;
}
body.page-expenses #editExpenseModal.modal-backdrop--drawer .category-icon-combo__list,
body.page-income #incomeModal.modal-backdrop--drawer .category-icon-combo__list {
    background: #171a20;
    border-color: rgba(148, 163, 184, 0.28);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.45);
}
body.page-expenses #editExpenseModal.modal-backdrop--drawer .category-icon-combo__option,
body.page-income #incomeModal.modal-backdrop--drawer .category-icon-combo__option {
    color: #e2e8f0;
}
body.page-expenses #editExpenseModal.modal-backdrop--drawer .category-icon-combo__option:hover,
body.page-expenses #editExpenseModal.modal-backdrop--drawer .category-icon-combo__option[aria-selected="true"],
body.page-income #incomeModal.modal-backdrop--drawer .category-icon-combo__option:hover,
body.page-income #incomeModal.modal-backdrop--drawer .category-icon-combo__option[aria-selected="true"] {
    background: linear-gradient(180deg, rgba(30, 58, 42, 0.72) 0%, rgba(20, 40, 30, 0.72) 100%);
}
body.page-expenses #editExpenseModal.modal-backdrop--drawer .category-icon-combo__option i,
body.page-income #incomeModal.modal-backdrop--drawer .category-icon-combo__option i {
    color: #22c55e;
}
body.page-expenses #editExpenseModal.modal-backdrop--drawer.edit-expense-modal--readonly .modal-card__body .modal-grid input:not([type="hidden"]):disabled,
body.page-expenses #editExpenseModal.modal-backdrop--drawer.edit-expense-modal--readonly .modal-card__body .modal-grid select:disabled,
body.page-expenses #editExpenseModal.modal-backdrop--drawer.edit-expense-modal--readonly .modal-card__body .modal-grid textarea:disabled,
body.page-expenses #editExpenseModal.modal-backdrop--drawer.edit-expense-modal--readonly .modal-card__body .modal-grid .modal-field__select:disabled,
body.page-income #incomeModal.income-modal--readonly.modal-backdrop--drawer .modal-card__body .modal-grid input:not([type="hidden"]):disabled,
body.page-income #incomeModal.income-modal--readonly.modal-backdrop--drawer .modal-card__body .modal-grid select:disabled,
body.page-income #incomeModal.income-modal--readonly.modal-backdrop--drawer .modal-card__body .modal-grid textarea:disabled,
body.page-income #incomeModal.income-modal--readonly.modal-backdrop--drawer .modal-card__body .modal-field__textarea:disabled,
body.page-income #incomeModal.income-modal--readonly.modal-backdrop--drawer .modal-card__body .modal-grid .modal-field__select:disabled {
    cursor: default;
    background-color: #25252d !important;
    background-image: none !important;
    color: #cbd5e1 !important;
    opacity: 1;
    border-color: #3f3f48 !important;
    box-shadow: none !important;
}
body.page-expenses #editExpenseModal.modal-backdrop--drawer.edit-expense-modal--readonly .category-quick-add-btn--icon:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
@media (max-width: 520px) {
    body.page-expenses #editExpenseModal.modal-backdrop--drawer .expense-edit-drawer__panel.modal-card,
    body.page-expenses #paymentModal.modal-backdrop--drawer .expense-edit-drawer__panel.modal-card,
    body.page-income #incomeCollectionModal.modal-backdrop--drawer .expense-edit-drawer__panel.modal-card,
    body.page-income #incomeModal.modal-backdrop--drawer .expense-edit-drawer__panel.modal-card {
        border-radius: 0;
        border-left-width: 3px;
    }
    body.page-expenses #editExpenseModal.modal-backdrop--drawer .expense-edit-drawer__head.modal-card__head,
    body.page-expenses #paymentModal.modal-backdrop--drawer .expense-edit-drawer__head.modal-card__head,
    body.page-income #incomeCollectionModal.modal-backdrop--drawer .expense-edit-drawer__head.modal-card__head,
    body.page-income #incomeModal.modal-backdrop--drawer .expense-edit-drawer__head.modal-card__head {
        border-radius: 0;
    }
}

body.page-budgets #expenseAccountEditModal.modal-backdrop,
body.page-budgets #expenseAccountSpendingModal.modal-backdrop,
body.page-savings #savingsModal.modal-backdrop,
body.page-savings #savingsNewRecordModal.modal-backdrop,
body.page-savings #savingsWithdrawalModal.modal-backdrop,
body.page-savings #savingsCategoryEditModal.modal-backdrop {
    background: rgba(8, 16, 11, 0.58);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
body.page-budgets #expenseAccountEditModal.modal-backdrop--drawer .expense-edit-drawer__panel.modal-card,
body.page-budgets #expenseAccountSpendingModal.modal-backdrop--drawer .expense-edit-drawer__panel.modal-card,
body.page-savings #savingsModal.modal-backdrop--drawer .expense-edit-drawer__panel.modal-card,
body.page-savings #savingsNewRecordModal.modal-backdrop--drawer .expense-edit-drawer__panel.modal-card,
body.page-savings #savingsWithdrawalModal.modal-backdrop--drawer .expense-edit-drawer__panel.modal-card,
body.page-savings #savingsCategoryEditModal.modal-backdrop--drawer .expense-edit-drawer__panel.modal-card {
    border-radius: 14px 0 0 14px;
    border: 1px solid var(--rm-border-soft);
    border-left: 4px solid #4ade80;
    background: linear-gradient(180deg, #1a1a1f 0%, #141418 100%);
    box-shadow:
        -14px 0 44px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(0, 0, 0, 0.28);
}
body.page-budgets #expenseAccountEditModal.modal-backdrop--drawer .expense-edit-drawer__head.modal-card__head,
body.page-budgets #expenseAccountSpendingModal.modal-backdrop--drawer .expense-edit-drawer__head.modal-card__head,
body.page-savings #savingsModal.modal-backdrop--drawer .expense-edit-drawer__head.modal-card__head,
body.page-savings #savingsNewRecordModal.modal-backdrop--drawer .expense-edit-drawer__head.modal-card__head,
body.page-savings #savingsWithdrawalModal.modal-backdrop--drawer .expense-edit-drawer__head.modal-card__head,
body.page-savings #savingsCategoryEditModal.modal-backdrop--drawer .expense-edit-drawer__head.modal-card__head {
    background: linear-gradient(180deg, #1f2520 0%, #161a18 100%);
    border-radius: 14px 0 0 0;
    border-bottom: 4px solid rgba(74, 222, 128, 0.55);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.22);
    padding: 14px 16px 14px 18px;
    align-items: flex-start;
}
body.page-budgets #expenseAccountEditModal.modal-backdrop--drawer .expense-edit-drawer__head-text,
body.page-budgets #expenseAccountSpendingModal.modal-backdrop--drawer .expense-edit-drawer__head-text,
body.page-savings #savingsModal.modal-backdrop--drawer .expense-edit-drawer__head-text,
body.page-savings #savingsNewRecordModal.modal-backdrop--drawer .expense-edit-drawer__head-text,
body.page-savings #savingsWithdrawalModal.modal-backdrop--drawer .expense-edit-drawer__head-text,
body.page-savings #savingsCategoryEditModal.modal-backdrop--drawer .expense-edit-drawer__head-text {
    min-width: 0;
    flex: 1 1 auto;
    padding-right: 10px;
}
body.page-budgets #expenseAccountEditModal.modal-backdrop--drawer .edit-expense-drawer__hint,
body.page-budgets #expenseAccountSpendingModal.modal-backdrop--drawer .edit-expense-drawer__hint,
body.page-savings #savingsModal.modal-backdrop--drawer .edit-expense-drawer__hint,
body.page-savings #savingsNewRecordModal.modal-backdrop--drawer .edit-expense-drawer__hint,
body.page-savings #savingsWithdrawalModal.modal-backdrop--drawer .edit-expense-drawer__hint,
body.page-savings #savingsCategoryEditModal.modal-backdrop--drawer .edit-expense-drawer__hint {
    margin: 6px 0 0;
    max-width: 28rem;
    font-size: 0.875rem;
    line-height: 1.38;
    font-weight: 400;
    color: #94a3b8;
}
body.page-budgets #expenseAccountEditModal.modal-backdrop--drawer .expense-edit-drawer__head .modal-card__title,
body.page-budgets #expenseAccountSpendingModal.modal-backdrop--drawer .expense-edit-drawer__head .modal-card__title,
body.page-savings #savingsModal.modal-backdrop--drawer .expense-edit-drawer__head .modal-card__title,
body.page-savings #savingsNewRecordModal.modal-backdrop--drawer .expense-edit-drawer__head .modal-card__title,
body.page-savings #savingsWithdrawalModal.modal-backdrop--drawer .expense-edit-drawer__head .modal-card__title,
body.page-savings #savingsCategoryEditModal.modal-backdrop--drawer .expense-edit-drawer__head .modal-card__title {
    color: #bbf7d0;
    font-size: 1.125rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
}
body.page-budgets #expenseAccountEditModal.modal-backdrop--drawer .expense-edit-drawer__close,
body.page-budgets #expenseAccountSpendingModal.modal-backdrop--drawer .expense-edit-drawer__close,
body.page-savings #savingsModal.modal-backdrop--drawer .expense-edit-drawer__close,
body.page-savings #savingsNewRecordModal.modal-backdrop--drawer .expense-edit-drawer__close,
body.page-savings #savingsWithdrawalModal.modal-backdrop--drawer .expense-edit-drawer__close,
body.page-savings #savingsCategoryEditModal.modal-backdrop--drawer .expense-edit-drawer__close {
    border: 1px solid #166534;
    background: linear-gradient(180deg, #1e3a2a 0%, #152a1c 100%);
    color: #bbf7d0;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 1px 2px rgba(0, 0, 0, 0.22);
}
body.page-budgets #expenseAccountEditModal.modal-backdrop--drawer .expense-edit-drawer__close:hover,
body.page-budgets #expenseAccountSpendingModal.modal-backdrop--drawer .expense-edit-drawer__close:hover,
body.page-savings #savingsModal.modal-backdrop--drawer .expense-edit-drawer__close:hover,
body.page-savings #savingsNewRecordModal.modal-backdrop--drawer .expense-edit-drawer__close:hover,
body.page-savings #savingsWithdrawalModal.modal-backdrop--drawer .expense-edit-drawer__close:hover,
body.page-savings #savingsCategoryEditModal.modal-backdrop--drawer .expense-edit-drawer__close:hover {
    border-color: #22c55e;
    color: #fff;
    background: linear-gradient(180deg, #225a3a 0%, #183828 100%);
}
body.page-budgets #expenseAccountEditModal.modal-backdrop--drawer .modal-card__body,
body.page-budgets #expenseAccountSpendingModal.modal-backdrop--drawer .modal-card__body,
body.page-savings #savingsModal.modal-backdrop--drawer .modal-card__body,
body.page-savings #savingsNewRecordModal.modal-backdrop--drawer .modal-card__body,
body.page-savings #savingsWithdrawalModal.modal-backdrop--drawer .modal-card__body,
body.page-savings #savingsCategoryEditModal.modal-backdrop--drawer .modal-card__body {
    background: linear-gradient(180deg, #18181d 0%, #141418 100%);
    padding: 16px 18px 18px;
}
body.page-budgets #expenseAccountEditModal.modal-backdrop--drawer .modal-card__body .modal-field__label,
body.page-budgets #expenseAccountSpendingModal.modal-backdrop--drawer .modal-card__body .modal-field__label,
body.page-savings #savingsModal.modal-backdrop--drawer .modal-card__body .modal-field__label,
body.page-savings #savingsNewRecordModal.modal-backdrop--drawer .modal-card__body .modal-field__label,
body.page-savings #savingsWithdrawalModal.modal-backdrop--drawer .modal-card__body .modal-field__label,
body.page-savings #savingsCategoryEditModal.modal-backdrop--drawer .modal-card__body .modal-field__label {
    color: #94a3b8;
}
body.page-budgets #expenseAccountEditModal.modal-backdrop--drawer .modal-card__body .modal-grid input,
body.page-budgets #expenseAccountEditModal.modal-backdrop--drawer .modal-card__body .modal-grid .modal-field__select,
body.page-budgets #expenseAccountSpendingModal.modal-backdrop--drawer .modal-card__body .modal-grid input,
body.page-budgets #expenseAccountSpendingModal.modal-backdrop--drawer .modal-card__body .modal-grid .modal-field__select,
body.page-savings #savingsModal.modal-backdrop--drawer .modal-card__body .modal-grid input,
body.page-savings #savingsModal.modal-backdrop--drawer .modal-card__body .modal-grid .modal-field__select,
body.page-savings #savingsNewRecordModal.modal-backdrop--drawer .modal-card__body .modal-grid input,
body.page-savings #savingsNewRecordModal.modal-backdrop--drawer .modal-card__body .modal-grid .modal-field__select,
body.page-savings #savingsWithdrawalModal.modal-backdrop--drawer .modal-card__body .modal-grid input,
body.page-savings #savingsWithdrawalModal.modal-backdrop--drawer .modal-card__body .modal-grid .modal-field__select,
body.page-savings #savingsCategoryEditModal.modal-backdrop--drawer .modal-card__body .modal-grid input,
body.page-savings #savingsCategoryEditModal.modal-backdrop--drawer .modal-card__body .modal-grid .modal-field__select {
    border-color: var(--rm-border-soft);
    background: #1e1e24;
    color: var(--rm-text);
}
body.page-budgets #expenseAccountEditModal.modal-backdrop--drawer .modal-card__body .modal-grid input:focus,
body.page-budgets #expenseAccountEditModal.modal-backdrop--drawer .modal-card__body .modal-grid .modal-field__select:focus,
body.page-budgets #expenseAccountSpendingModal.modal-backdrop--drawer .modal-card__body .modal-grid input:focus,
body.page-budgets #expenseAccountSpendingModal.modal-backdrop--drawer .modal-card__body .modal-grid .modal-field__select:focus,
body.page-savings #savingsModal.modal-backdrop--drawer .modal-card__body .modal-grid input:focus,
body.page-savings #savingsModal.modal-backdrop--drawer .modal-card__body .modal-grid .modal-field__select:focus,
body.page-savings #savingsNewRecordModal.modal-backdrop--drawer .modal-card__body .modal-grid input:focus,
body.page-savings #savingsNewRecordModal.modal-backdrop--drawer .modal-card__body .modal-grid .modal-field__select:focus,
body.page-savings #savingsWithdrawalModal.modal-backdrop--drawer .modal-card__body .modal-grid input:focus,
body.page-savings #savingsWithdrawalModal.modal-backdrop--drawer .modal-card__body .modal-grid .modal-field__select:focus,
body.page-savings #savingsCategoryEditModal.modal-backdrop--drawer .modal-card__body .modal-grid input:focus,
body.page-savings #savingsCategoryEditModal.modal-backdrop--drawer .modal-card__body .modal-grid .modal-field__select:focus {
    border-color: #22c55e;
    box-shadow: 0 0 0 3px color-mix(in srgb, #22c55e 22%, transparent);
}
body.page-budgets #expenseAccountEditModal.modal-backdrop--drawer .modal-card__body .modal-grid input::placeholder,
body.page-budgets #expenseAccountSpendingModal.modal-backdrop--drawer .modal-card__body .modal-grid input::placeholder,
body.page-savings #savingsModal.modal-backdrop--drawer .modal-card__body .modal-grid input::placeholder,
body.page-savings #savingsNewRecordModal.modal-backdrop--drawer .modal-card__body .modal-grid input::placeholder,
body.page-savings #savingsWithdrawalModal.modal-backdrop--drawer .modal-card__body .modal-grid input::placeholder,
body.page-savings #savingsCategoryEditModal.modal-backdrop--drawer .modal-card__body .modal-grid input::placeholder {
    color: #71717a;
}
body.page-savings #savingsNewRecordModal.modal-backdrop--drawer .modal-card__body .modal-grid textarea.modal-field__textarea,
body.page-savings #savingsCategoryEditModal.modal-backdrop--drawer .modal-card__body .modal-grid textarea.modal-field__textarea {
    border-color: var(--rm-border-soft);
    background: #1e1e24;
    color: var(--rm-text);
}
body.page-savings #savingsNewRecordModal.modal-backdrop--drawer .modal-card__body .modal-grid textarea.modal-field__textarea:focus,
body.page-savings #savingsCategoryEditModal.modal-backdrop--drawer .modal-card__body .modal-grid textarea.modal-field__textarea:focus {
    border-color: #22c55e;
    box-shadow: 0 0 0 3px color-mix(in srgb, #22c55e 22%, transparent);
}
body.page-savings #savingsNewRecordModal.modal-backdrop--drawer .modal-currency-row,
body.page-savings #savingsCategoryEditModal.modal-backdrop--drawer .modal-currency-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-width: 0;
}
body.page-savings #savingsNewRecordModal.modal-backdrop--drawer .modal-currency-row__flag,
body.page-savings #savingsCategoryEditModal.modal-backdrop--drawer .modal-currency-row__flag {
    flex-shrink: 0;
    width: 24px;
    height: 18px;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
}
body.page-savings #savingsNewRecordModal.modal-backdrop--drawer .modal-currency-row__select,
body.page-savings #savingsCategoryEditModal.modal-backdrop--drawer .modal-currency-row__select {
    flex: 1 1 auto;
    min-width: 0;
}
body.page-savings #savingsCategoryEditModal.modal-backdrop--drawer .savings-cat-edit-category-readonly {
    cursor: default;
    opacity: 0.92;
}
body.page-savings #savingsCategoryEditModal.modal-backdrop--drawer .expense-account-edit-spendings-wrap {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(74, 222, 128, 0.22);
}
body.page-savings #savingsCategoryEditModal .expense-account-edit-spendings-scroll {
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
}
body.page-savings #savingsCategoryEditModal #savingsCatEditMovementsTable {
    table-layout: auto;
    width: 100%;
    min-width: 0;
    border-collapse: collapse;
}
body.page-savings #savingsCategoryEditModal #savingsCatEditMovementsTable thead th,
body.page-savings #savingsCategoryEditModal #savingsCatEditMovementsTable tbody td {
    padding: 7px 8px;
    vertical-align: middle;
}
body.page-savings #savingsCategoryEditModal #savingsCatEditMovementsTable thead th:first-child,
body.page-savings #savingsCategoryEditModal #savingsCatEditMovementsTable tbody td:first-child {
    width: 1%;
    max-width: 2.75rem;
    white-space: nowrap;
    padding-left: 0;
    padding-right: 8px;
    text-align: left;
}
body.page-savings #savingsCategoryEditModal #savingsCatEditMovementsTable thead th:nth-child(2),
body.page-savings #savingsCategoryEditModal #savingsCatEditMovementsTable tbody td:nth-child(2) {
    text-align: left;
    padding-left: 0;
}
body.page-savings #savingsCategoryEditModal #savingsCatEditMovementsTable thead th:nth-child(3),
body.page-savings #savingsCategoryEditModal #savingsCatEditMovementsTable tbody td:nth-child(3) {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    padding-left: 12px;
}
body.page-savings #savingsCategoryEditModal #savingsCatEditMovementsTable thead th:nth-child(4),
body.page-savings #savingsCategoryEditModal #savingsCatEditMovementsTable tbody td:nth-child(4) {
    text-align: right;
    width: 1%;
    white-space: nowrap;
}
body.page-savings #savingsCategoryEditModal.modal-backdrop--drawer .modal-card__body {
    overflow-x: hidden;
}
body.page-savings #savingsNewRecordModal.modal-backdrop--drawer .savings-goal-pct-input-wrap,
body.page-savings #savingsCategoryEditModal.modal-backdrop--drawer .savings-goal-pct-input-wrap {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 10px;
    width: 100%;
    min-width: 0;
}
body.page-savings #savingsNewRecordModal.modal-backdrop--drawer .savings-goal-pct-input,
body.page-savings #savingsCategoryEditModal.modal-backdrop--drawer .savings-goal-pct-input {
    flex: 1 1 auto;
    min-width: 0;
}
body.page-savings #savingsNewRecordModal.modal-backdrop--drawer .savings-goal-pct-prefix,
body.page-savings #savingsCategoryEditModal.modal-backdrop--drawer .savings-goal-pct-prefix {
    flex: 0 0 24px;
    width: 24px;
    min-width: 24px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1rem;
    color: #94a3b8;
    user-select: none;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
}
@media (max-width: 520px) {
    body.page-savings .savings-new-record-grid.modal-grid,
    body.page-savings .savings-cat-edit-prefs-grid.modal-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}
body.page-budgets #expenseAccountSpendingModal.modal-backdrop--drawer .modal-field--ea-spend-currency {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}
body.page-budgets #expenseAccountSpendingModal.modal-backdrop--drawer .modal-field--ea-spend-currency .modal-field__label--inline {
    margin: 0;
    flex-shrink: 0;
    white-space: nowrap;
    text-transform: none;
    letter-spacing: normal;
}
body.page-budgets #expenseAccountSpendingModal.modal-backdrop--drawer .modal-field--ea-spend-currency .modal-currency-row--ea-spend {
    flex: 1 1 auto;
    min-width: 0;
}
body.page-budgets #expenseAccountSpendingModal.modal-backdrop--drawer .modal-field--ea-spend-amounts {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
body.page-budgets #expenseAccountSpendingModal.modal-backdrop--drawer .ea-spend-monto-block--primary .modal-field__label {
    font-size: 0.82rem;
    font-weight: 800;
    color: #cbd5e1;
}
body.page-budgets #expenseAccountSpendingModal.modal-backdrop--drawer .ea-spend-monto-input--primary {
    min-height: 46px;
    font-size: 1.12rem;
    font-weight: 800;
    letter-spacing: 0.01em;
}
body.page-budgets #expenseAccountSpendingModal.modal-backdrop--drawer .ea-spend-monto-block--secondary .modal-field__label--subtle {
    font-size: 0.72rem;
    font-weight: 600;
    color: rgba(148, 163, 184, 0.95);
    text-transform: none;
    letter-spacing: normal;
}
body.page-budgets #expenseAccountSpendingModal.modal-backdrop--drawer .ea-spend-monto-input--secondary {
    min-height: 36px;
    font-size: 0.88rem;
    font-weight: 600;
    opacity: 0.95;
}
body.page-budgets #expenseAccountSpendingModal.modal-backdrop--drawer .ea-spend-monto-hint {
    margin: 5px 0 0;
    font-size: 0.72rem;
    line-height: 1.35;
    color: rgba(113, 113, 122, 0.95);
}
body.page-budgets #expenseAccountEditModal.modal-backdrop--drawer .modal-error,
body.page-budgets #expenseAccountSpendingModal.modal-backdrop--drawer .modal-error,
body.page-savings #savingsModal.modal-backdrop--drawer .modal-error,
body.page-savings #savingsNewRecordModal.modal-backdrop--drawer .modal-error,
body.page-savings #savingsWithdrawalModal.modal-backdrop--drawer .modal-error,
body.page-savings #savingsCategoryEditModal.modal-backdrop--drawer .modal-error:not(.savings-cat-edit-delete-msg) {
    color: #fecaca;
    background: rgba(127, 29, 29, 0.38);
    border-color: rgba(248, 113, 113, 0.45);
}
body.page-savings #savingsCategoryEditModal.modal-backdrop--drawer .modal-error.savings-cat-edit-delete-msg:not([hidden]) {
    display: block;
    margin: 14px 0 0;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid rgba(248, 113, 113, 0.7);
    background: rgba(69, 10, 10, 0.82);
    color: #fef2f2;
    font-size: 0.9rem;
    line-height: 1.45;
    font-weight: 500;
}
body.page-savings #savingsCategoryEditModal.savings-cat-edit--delete-pending.modal-backdrop--drawer #savingsCatEditDeleteBtn {
    border: 1px solid rgba(248, 113, 113, 0.88);
    background: rgba(127, 29, 29, 0.75);
    color: #ffffff;
    font-weight: 700;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
body.page-savings #savingsCategoryEditModal.savings-cat-edit--delete-pending.modal-backdrop--drawer #savingsCatEditDeleteBtn:hover {
    background: rgba(153, 27, 27, 0.82);
    color: #fff;
}
body.page-budgets #expenseAccountEditModal.modal-backdrop--drawer .modal-actions,
body.page-budgets #expenseAccountSpendingModal.modal-backdrop--drawer .modal-actions,
body.page-savings #savingsModal.modal-backdrop--drawer .modal-actions,
body.page-savings #savingsNewRecordModal.modal-backdrop--drawer .modal-actions,
body.page-savings #savingsWithdrawalModal.modal-backdrop--drawer .modal-actions,
body.page-savings #savingsCategoryEditModal.modal-backdrop--drawer .modal-actions {
    border-top: 1px solid rgba(74, 222, 128, 0.14);
    margin-top: 16px;
    padding-top: 14px;
}
body.page-savings #savingsCategoryEditModal.modal-backdrop--drawer .modal-actions--savings-cat-edit {
    justify-content: flex-end;
}
body.page-budgets #expenseAccountEditModal.modal-backdrop--drawer .btn-modal-primary,
body.page-budgets #expenseAccountSpendingModal.modal-backdrop--drawer .btn-modal-primary,
body.page-savings #savingsModal.modal-backdrop--drawer .btn-modal-primary,
body.page-savings #savingsNewRecordModal.modal-backdrop--drawer .btn-modal-primary,
body.page-savings #savingsWithdrawalModal.modal-backdrop--drawer .btn-modal-primary,
body.page-savings #savingsCategoryEditModal.modal-backdrop--drawer .btn-modal-primary {
    border: 1px solid rgba(74, 222, 128, 0.42);
    background: linear-gradient(180deg, #22a34d 0%, #17703a 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 4px 16px rgba(0, 0, 0, 0.35);
}
body.page-budgets #expenseAccountEditModal.modal-backdrop--drawer .btn-modal-primary:hover,
body.page-budgets #expenseAccountSpendingModal.modal-backdrop--drawer .btn-modal-primary:hover,
body.page-savings #savingsModal.modal-backdrop--drawer .btn-modal-primary:hover,
body.page-savings #savingsNewRecordModal.modal-backdrop--drawer .btn-modal-primary:hover,
body.page-savings #savingsWithdrawalModal.modal-backdrop--drawer .btn-modal-primary:hover,
body.page-savings #savingsCategoryEditModal.modal-backdrop--drawer .btn-modal-primary:hover {
    background: linear-gradient(180deg, #2abf5a 0%, #1a853f 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        0 6px 18px rgba(0, 0, 0, 0.4);
}
body.page-budgets #expenseAccountEditModal.modal-backdrop--drawer .btn-modal-secondary,
body.page-budgets #expenseAccountSpendingModal.modal-backdrop--drawer .btn-modal-secondary,
body.page-savings #savingsModal.modal-backdrop--drawer .btn-modal-secondary,
body.page-savings #savingsNewRecordModal.modal-backdrop--drawer .btn-modal-secondary,
body.page-savings #savingsWithdrawalModal.modal-backdrop--drawer .btn-modal-secondary,
body.page-savings #savingsCategoryEditModal.modal-backdrop--drawer .btn-modal-secondary {
    border: 2px solid rgba(74, 222, 128, 0.38);
    background: rgba(22, 40, 30, 0.65);
    color: #bbf7d0;
}
body.page-budgets #expenseAccountEditModal.modal-backdrop--drawer .btn-modal-secondary:hover,
body.page-budgets #expenseAccountSpendingModal.modal-backdrop--drawer .btn-modal-secondary:hover,
body.page-savings #savingsModal.modal-backdrop--drawer .btn-modal-secondary:hover,
body.page-savings #savingsNewRecordModal.modal-backdrop--drawer .btn-modal-secondary:hover,
body.page-savings #savingsWithdrawalModal.modal-backdrop--drawer .btn-modal-secondary:hover,
body.page-savings #savingsCategoryEditModal.modal-backdrop--drawer .btn-modal-secondary:hover {
    border-color: #4ade80;
    background: rgba(34, 90, 58, 0.55);
    color: #fff;
}
body.page-budgets #expenseAccountEditModal.modal-backdrop--drawer .btn-danger,
body.page-budgets #expenseAccountSpendingModal.modal-backdrop--drawer .btn-danger,
body.page-savings #savingsModal.modal-backdrop--drawer .btn-danger,
body.page-savings #savingsNewRecordModal.modal-backdrop--drawer .btn-danger,
body.page-savings #savingsWithdrawalModal.modal-backdrop--drawer .btn-danger,
body.page-savings #savingsCategoryEditModal.modal-backdrop--drawer .btn-danger {
    border-color: rgba(248, 113, 113, 0.45);
    background: rgba(127, 29, 29, 0.35);
    color: #fecaca;
}
body.page-budgets #expenseAccountEditModal.modal-backdrop--drawer .btn-danger:hover,
body.page-budgets #expenseAccountSpendingModal.modal-backdrop--drawer .btn-danger:hover {
    background: rgba(153, 27, 27, 0.5);
    color: #fff;
}
body.page-budgets #expenseAccountEditModal .expense-account-edit-spendings-wrap {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(74, 222, 128, 0.22);
}
body.page-budgets #expenseAccountEditModal .expense-account-edit-spendings-title {
    color: #bbf7d0;
}
body.page-budgets #expenseAccountEditModal .expense-account-edit-spendings-hint {
    color: #94a3b8;
}
body.page-budgets #expenseAccountEditModal .expense-account-edit-spendings-loading,
body.page-budgets #expenseAccountEditModal .expense-account-edit-spendings-empty {
    color: #cbd5e1;
}
body.page-budgets #expenseAccountEditModal .expense-account-edit-spendings-empty {
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(51, 65, 85, 0.45);
}
body.page-budgets #expenseAccountEditModal .expense-account-edit-spendings-scroll {
    border: 1px solid rgba(74, 222, 128, 0.22);
    background: rgba(10, 16, 13, 0.92);
}
body.page-budgets #expenseAccountEditModal .expense-account-edit-spendings-table {
    background: transparent;
}
body.page-budgets #expenseAccountEditModal .expense-account-edit-spendings-table thead th {
    background: rgba(22, 101, 52, 0.55);
    color: #ecfdf5;
    border-bottom: 1px solid rgba(74, 222, 128, 0.35);
}
body.page-budgets #expenseAccountEditModal .expense-account-edit-spendings-table tbody td {
    background: rgba(15, 23, 42, 0.35);
    border-bottom: 1px solid rgba(51, 65, 85, 0.45);
    color: #e2e8f0;
}
body.page-budgets #expenseAccountEditModal .expense-account-edit-spendings-table tbody tr:hover td {
    background: rgba(30, 41, 59, 0.55);
}
body.page-budgets #expenseAccountEditModal .expense-account-edit-spendings-table .modal-field__input,
body.page-budgets #expenseAccountEditModal .expense-account-edit-spendings-table .modal-field__select {
    background: #1e1e24;
    border-color: var(--rm-border-soft);
    color: var(--rm-text);
}
@media (max-width: 520px) {
    body.page-budgets #expenseAccountEditModal.modal-backdrop--drawer .expense-edit-drawer__panel.modal-card,
    body.page-budgets #expenseAccountSpendingModal.modal-backdrop--drawer .expense-edit-drawer__panel.modal-card,
    body.page-savings #savingsModal.modal-backdrop--drawer .expense-edit-drawer__panel.modal-card,
    body.page-savings #savingsNewRecordModal.modal-backdrop--drawer .expense-edit-drawer__panel.modal-card,
    body.page-savings #savingsWithdrawalModal.modal-backdrop--drawer .expense-edit-drawer__panel.modal-card,
    body.page-savings #savingsCategoryEditModal.modal-backdrop--drawer .expense-edit-drawer__panel.modal-card,
    body.page-investments #inv2FormModal.modal-backdrop--drawer .expense-edit-drawer__panel.modal-card {
        border-radius: 0;
        border-left-width: 3px;
    }
    body.page-budgets #expenseAccountEditModal.modal-backdrop--drawer .expense-edit-drawer__head.modal-card__head,
    body.page-budgets #expenseAccountSpendingModal.modal-backdrop--drawer .expense-edit-drawer__head.modal-card__head,
    body.page-savings #savingsModal.modal-backdrop--drawer .expense-edit-drawer__head.modal-card__head,
    body.page-savings #savingsNewRecordModal.modal-backdrop--drawer .expense-edit-drawer__head.modal-card__head,
    body.page-savings #savingsWithdrawalModal.modal-backdrop--drawer .expense-edit-drawer__head.modal-card__head,
    body.page-savings #savingsCategoryEditModal.modal-backdrop--drawer .expense-edit-drawer__head.modal-card__head,
    body.page-investments #inv2FormModal.modal-backdrop--drawer .expense-edit-drawer__head.modal-card__head {
        border-radius: 0;
    }
}

@keyframes topbar-nav-slide-in-from-left {
    from {
        opacity: 0;
        transform: translateX(-100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes topbar-nav-slide-out-to-left {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(-100%);
    }
}
@media (max-width: 999px) {
    body.topbar-menu-open::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 1190;
        background: rgba(2, 6, 23, 0.2);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    body.topbar-menu-open .topbar.topbar--hero .topbar-bar {
        z-index: 1220;
    }
    body.topbar-menu-open .topbar--hero > .topbar-auth {
        z-index: 1221;
    }
}

@media (prefers-reduced-motion: reduce) {
    .modal-backdrop.open,
    .modal-backdrop.open > .modal-card,
    .modal-backdrop.open > .modal-app-shell {
        animation: none;
        opacity: 1;
    }
    .modal-backdrop.open > .modal-card,
    .modal-backdrop.open > .modal-app-shell {
        transform: none;
    }
    #editExpenseModal.modal-backdrop--drawer.open > .expense-edit-drawer__panel.modal-card,
    #editExpenseModal.modal-backdrop--drawer.open.is-closing > .expense-edit-drawer__panel.modal-card,
    #paymentModal.modal-backdrop--drawer.open > .expense-edit-drawer__panel.modal-card,
    #paymentModal.modal-backdrop--drawer.open.is-closing > .expense-edit-drawer__panel.modal-card,
    #incomeCollectionModal.modal-backdrop--drawer.open > .expense-edit-drawer__panel.modal-card,
    #incomeCollectionModal.modal-backdrop--drawer.open.is-closing > .expense-edit-drawer__panel.modal-card,
    #incomeModal.modal-backdrop--drawer.open > .expense-edit-drawer__panel.modal-card,
    #incomeModal.modal-backdrop--drawer.open.is-closing > .expense-edit-drawer__panel.modal-card,
    #expenseAccountEditModal.modal-backdrop--drawer.open > .expense-edit-drawer__panel.modal-card,
    #expenseAccountEditModal.modal-backdrop--drawer.open.is-closing > .expense-edit-drawer__panel.modal-card,
    #expenseAccountSpendingModal.modal-backdrop--drawer.open > .expense-edit-drawer__panel.modal-card,
    #expenseAccountSpendingModal.modal-backdrop--drawer.open.is-closing > .expense-edit-drawer__panel.modal-card,
    #savingsModal.modal-backdrop--drawer.open > .expense-edit-drawer__panel.modal-card,
    #savingsModal.modal-backdrop--drawer.open.is-closing > .expense-edit-drawer__panel.modal-card,
    #savingsNewRecordModal.modal-backdrop--drawer.open > .expense-edit-drawer__panel.modal-card,
    #savingsNewRecordModal.modal-backdrop--drawer.open.is-closing > .expense-edit-drawer__panel.modal-card,
    #savingsWithdrawalModal.modal-backdrop--drawer.open > .expense-edit-drawer__panel.modal-card,
    #savingsWithdrawalModal.modal-backdrop--drawer.open.is-closing > .expense-edit-drawer__panel.modal-card,
    #savingsCategoryEditModal.modal-backdrop--drawer.open > .expense-edit-drawer__panel.modal-card,
    #savingsCategoryEditModal.modal-backdrop--drawer.open.is-closing > .expense-edit-drawer__panel.modal-card,
    #inv2FormModal.modal-backdrop--drawer.open > .expense-edit-drawer__panel.modal-card,
    #inv2FormModal.modal-backdrop--drawer.open.is-closing > .expense-edit-drawer__panel.modal-card,
    #authLoginDrawer.modal-backdrop--drawer.open > .expense-edit-drawer__panel.modal-card,
    #authLoginDrawer.modal-backdrop--drawer.open.is-closing > .expense-edit-drawer__panel.modal-card,
    #authRegisterDrawer.modal-backdrop--drawer.open > .expense-edit-drawer__panel.modal-card,
    #authRegisterDrawer.modal-backdrop--drawer.open.is-closing > .expense-edit-drawer__panel.modal-card,
    #modalPopupNuevo.modal-backdrop--drawer.open > .modal-app-shell.auth-login-shell,
    #modalPopupNuevo.modal-backdrop--drawer.open.is-closing > .modal-app-shell.auth-login-shell {
        animation: none;
        transform: none;
    }
    .modal-backdrop.open.is-closing,
    .modal-backdrop.open.is-closing > .modal-card,
    .modal-backdrop.open.is-closing > .modal-app-shell {
        animation: none;
        opacity: 1;
    }
    .modal-backdrop.open.is-closing > .modal-card,
    .modal-backdrop.open.is-closing > .modal-app-shell {
        transform: none;
    }
    body.auth-modal-open:not(.auth-modal-is-closing) .auth-modal-backdrop:not([hidden]),
    body.auth-modal-is-closing .auth-modal-backdrop,
    body.auth-show-login:not(.auth-page--landing):not(.auth-modal-is-closing) #auth-login.auth-login-shell,
    body.auth-modal-is-closing.auth-show-login:not(.auth-page--landing) #auth-login.auth-login-shell,
    body.auth-show-register:not(.auth-page--landing):not(.auth-modal-is-closing) .auth-register-panel__inner.auth-login-shell,
    body.auth-modal-is-closing.auth-show-register:not(.auth-page--landing) .auth-register-panel__inner.auth-login-shell,
    body.auth-show-plans:not(.auth-modal-is-closing) .auth-plans-panel__inner.auth-login-shell,
    body.auth-modal-is-closing.auth-show-plans .auth-plans-panel__inner.auth-login-shell {
        animation: none !important;
        opacity: 1;
    }
    body.auth-show-login:not(.auth-page--landing) #auth-login.auth-login-shell {
        transform: translate(-50%, -50%);
    }
    body.auth-show-plans .auth-plans-panel__inner.auth-login-shell.auth-plans-panel__inner--pricing {
        transform: translate(-50%, -50%);
    }
    .topbar-bar nav.is-open {
        animation: none;
        opacity: 1;
        transform: none;
    }
    .topbar-bar nav.is-open.is-closing {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

.modal-card {
    width: min(680px, 100%);
    max-height: min(90vh, 720px);
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 16px;
    padding: 0;
    overflow: hidden;
    box-shadow:
        0 4px 6px -1px rgba(31, 122, 58, 0.08),
        0 25px 50px -12px rgba(0, 0, 0, 0.22);
    border: 1px solid color-mix(in srgb, #1f7a3a 14%, #e5e7eb);
}
.modal-card--payment {
    width: min(440px, 100%);
    max-height: none;
}

.modal-app-shell.auth-login-shell {
    position: relative;
    overflow: visible;
    width: min(680px, 100%);
    max-width: 100%;
    padding: 44px 10px 12px;
    border-radius: 22px;
    border: 2px solid rgba(212, 175, 55, 0.9);
    background:
        linear-gradient(145deg, rgba(34, 197, 94, 0.14) 0%, transparent 45%),
        linear-gradient(165deg, rgba(11, 96, 48, 0.52) 0%, rgba(4, 46, 28, 0.78) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 0 0 1px rgba(253, 230, 138, 0.55),
        0 16px 48px rgba(0, 0, 0, 0.42),
        0 0 24px 6px rgba(255, 220, 130, 0.5),
        0 0 52px 16px rgba(212, 175, 55, 0.38),
        0 0 88px 28px rgba(180, 83, 9, 0.18),
        -6px -10px 64px rgba(253, 224, 71, 0.12);
    backdrop-filter: blur(2px);
    box-sizing: border-box;
}
.modal-app-shell.auth-login-shell .auth-login-card-inner {
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
    max-height: min(85vh, 720px);
    margin: 4px 4px 2px;
    padding: 0;
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #fafcfa 100%);
    border: 1px solid rgba(212, 175, 55, 0.65);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.85) inset,
        0 2px 12px rgba(11, 96, 48, 0.08);
}
.modal-app-shell.auth-login-shell .modal-card.modal-card--in-app-shell {
    width: 100%;
    max-width: none;
    max-height: none;
    border-radius: 0;
    overflow: visible;
    background: transparent;
    border: none;
    box-shadow: none;
}

.modal-app-shell.auth-login-shell .auth-login-card-inner .modal-card.modal-card--in-app-shell {
    border-top: none;
    border-radius: 0;
    overflow: hidden;
}
.modal-app-shell.auth-login-shell .auth-login-card-inner .modal-card.modal-card--in-app-shell .modal-card__head {
    background: #ffffff;
    padding: 20px 20px 14px;
    border-radius: 14px 14px 0 0;
    box-shadow: none;
    border-bottom: 1px solid rgba(18, 111, 56, 0.12);
}
.modal-app-shell.auth-login-shell .auth-login-card-inner .modal-card.modal-card--in-app-shell .modal-card__title {
    color: #126f38;
    text-shadow: none;
}
.modal-app-shell.auth-login-shell .auth-login-card-inner .modal-card.modal-card--in-app-shell .modal-card__subtitle {
    color: #475569;
}

#categoryEditModal .modal-app-shell.auth-login-shell {
    width: min(680px, 100%);
}
#categoryEditModal .modal-app-shell .modal-card.modal-card--in-app-shell {
    border-top: none;
}
#categoryViewModal .modal-app-shell.auth-login-shell {
    width: min(680px, 100%);
}
#categoryViewModal .modal-app-shell .modal-card.modal-card--in-app-shell {
    border-top: none;
}

#perfilOnboardingBackdrop.modal-backdrop {
    background: rgba(6, 10, 8, 0.78);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
#perfilOnboardingBackdrop .modal-card--profile-onboarding {
    color-scheme: dark;
    width: min(440px, calc(100% - 24px));
    max-height: min(90vh, 640px);
    background: #141816;
    border: 1px solid color-mix(in srgb, #22c55e 26%, rgba(255, 255, 255, 0.1));
    border-radius: 18px;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.4) inset,
        0 24px 56px rgba(0, 0, 0, 0.55),
        0 0 48px color-mix(in srgb, #16a34a 16%, transparent);
    overflow: hidden;
}
#perfilOnboardingBackdrop .profile-onboarding__head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 20px 20px 16px;
    background: linear-gradient(180deg, #1a221e 0%, #131615 100%);
    border-bottom: 1px solid rgba(34, 197, 94, 0.24);
}
#perfilOnboardingBackdrop .profile-onboarding__avatar {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(145deg, color-mix(in srgb, #22c55e 82%, #14532d) 0%, #166534 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ecfdf5;
    font-size: 1.12rem;
    box-shadow:
        0 0 0 2px rgba(34, 197, 94, 0.38),
        0 8px 22px rgba(0, 0, 0, 0.4);
}
#perfilOnboardingBackdrop .profile-onboarding__head-copy {
    min-width: 0;
    flex: 1;
}
#perfilOnboardingBackdrop .profile-onboarding__title {
    margin: 0;
    font-size: 1.22rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: #f8fafc;
}
#perfilOnboardingBackdrop .profile-onboarding__subtitle {
    margin: 8px 0 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: rgba(226, 232, 240, 0.72);
    font-weight: 400;
}
#perfilOnboardingBackdrop .profile-onboarding__body {
    padding: 18px 20px 20px;
    background: #101312;
    overflow-y: auto;
}
#perfilOnboardingBackdrop .profile-onboarding__error.modal-error {
    color: #fecaca;
    background: rgba(127, 29, 29, 0.35);
    border-color: rgba(248, 113, 113, 0.45);
}
#perfilOnboardingBackdrop .profile-onboarding-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 14px;
}
#perfilOnboardingBackdrop .profile-onboarding-grid .modal-field--full {
    grid-column: 1 / -1;
}
#perfilOnboardingBackdrop .profile-onboarding-field .modal-field__label {
    color: rgba(203, 213, 225, 0.88);
}
#perfilOnboardingBackdrop .profile-onboarding-input-shell {
    display: flex;
    align-items: stretch;
    min-height: 46px;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: #1a201e;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
#perfilOnboardingBackdrop .profile-onboarding-input-shell:focus-within {
    border-color: color-mix(in srgb, #4ade80 55%, rgba(148, 163, 184, 0.35));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 0 0 3px color-mix(in srgb, #22c55e 22%, transparent);
}
#perfilOnboardingBackdrop .profile-onboarding-input-shell__icon {
    flex: 0 0 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4ade80;
    font-size: 0.95rem;
    border-right: 1px solid rgba(148, 163, 184, 0.16);
    background: rgba(0, 0, 0, 0.18);
}
#perfilOnboardingBackdrop .profile-onboarding-input-shell__icon--currency {
    border-right-color: rgba(148, 163, 184, 0.16);
}
#perfilOnboardingBackdrop .profile-onboarding-currency-ring {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid rgba(74, 222, 128, 0.78);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4ade80;
    font-size: 0.76rem;
}
#perfilOnboardingBackdrop .profile-onboarding-input-shell select,
#perfilOnboardingBackdrop .profile-onboarding-input-shell input[type="text"],
#perfilOnboardingBackdrop .profile-onboarding-input-shell input[type="date"] {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    border: 0 !important;
    border-radius: 0 11px 11px 0;
    background: transparent !important;
    color: #f1f5f9 !important;
    padding: 10px 12px 10px 10px;
    font-size: 14px;
    box-shadow: none !important;
    margin: 0;
}
#perfilOnboardingBackdrop .profile-onboarding-input-shell select {
    cursor: pointer;
    appearance: none;
    padding-right: 36px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px 12px;
}
#perfilOnboardingBackdrop .profile-onboarding-input-shell:has(.profile-onboarding-location-btn) select {
    border-radius: 0 !important;
    padding-right: 10px;
    background-image: none;
}
#perfilOnboardingBackdrop .profile-onboarding-location-btn {
    flex: 0 0 42px;
    width: 42px;
    border: 0;
    border-left: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 0 11px 11px 0;
    background: rgba(15, 23, 42, 0.18);
    color: #4ade80;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.94rem;
    transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
#perfilOnboardingBackdrop .profile-onboarding-location-btn:hover {
    background: rgba(34, 197, 94, 0.14);
    color: #86efac;
}
#perfilOnboardingBackdrop .profile-onboarding-location-btn:disabled {
    cursor: wait;
    opacity: 0.72;
}
#perfilOnboardingBackdrop .profile-onboarding-location-btn.is-loading i {
    animation: rm-location-spin 0.9s linear infinite;
}
@keyframes rm-location-spin {
    to {
        transform: rotate(360deg);
    }
}
#perfilOnboardingBackdrop .profile-onboarding-input-shell input::placeholder {
    color: rgba(148, 163, 184, 0.75);
}
#perfilOnboardingBackdrop .profile-onboarding-input-shell option {
    background: #1a201e;
    color: #f1f5f9;
}
#perfilOnboardingBackdrop .profile-onboarding__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid rgba(148, 163, 184, 0.14);
}
#perfilOnboardingBackdrop .profile-onboarding__trust {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    color: rgba(226, 232, 240, 0.78);
    font-weight: 500;
}
#perfilOnboardingBackdrop .profile-onboarding__trust i {
    color: #4ade80;
    font-size: 0.95rem;
}
#perfilOnboardingBackdrop .profile-onboarding__submit {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border-radius: 999px;
    padding: 12px 22px 12px 20px;
    font-weight: 700;
    font-size: 0.95rem;
    box-shadow: 0 4px 18px color-mix(in srgb, #15803d 48%, transparent);
}
#perfilOnboardingBackdrop .profile-onboarding__submit i {
    font-size: 0.72rem;
    opacity: 0.92;
}
@media (max-width: 440px) {
    #perfilOnboardingBackdrop .profile-onboarding-grid {
        grid-template-columns: 1fr;
    }
    #perfilOnboardingBackdrop .profile-onboarding__footer {
        flex-direction: column;
        align-items: stretch;
    }
    #perfilOnboardingBackdrop .profile-onboarding__submit {
        justify-content: center;
    }
}

.page-profile #perfilAuthShell.modal-app-shell.auth-login-shell {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 16px 14px 18px;
    box-sizing: border-box;
}
.page-profile #perfilAuthShell > .modal-card.modal-card--in-app-shell {
    margin: 0;
    max-width: 100%;
    width: 100%;
    max-height: min(85vh, 720px);
    border-radius: 14px;
    overflow: hidden;
    border-top: none;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.12) inset,
        0 8px 28px rgba(0, 0, 0, 0.18);
}
.page-profile #perfilAuthShell .modal-card__body {
    overflow-x: hidden;
    max-width: 100%;
    background: #ffffff;
    border-radius: 0 0 14px 14px;

    padding: 0 0 20px;
}
.page-profile #perfilAuthShell .modal-card__head {
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;

    padding-right: 18px;
}
.page-profile #perfilAuthShell .perfil-modal-card__head-text {
    min-width: 0;
    flex: 1;
}

.page-profile #perfilAuthShell .modal-card__head .auth-login-deco.perfil-head-deco {
    position: relative;
    top: auto;
    right: auto;
    flex-shrink: 0;
    width: min(72px, 22vw);
    align-self: center;
}
.page-profile #perfilAuthShell .modal-card__title {
    color: #d4af37;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}
.page-profile #perfilAuthShell .modal-card__subtitle {
    color: rgba(255, 255, 255, 0.88);
}
.page-profile #perfilAuthShell .perfil-form label > span:first-child,
.page-profile #perfilAuthShell .perfil-password-form label > span:first-child,
.page-profile #perfilAuthShell .perfil-share-form label > span:first-child {
    color: #374151;
    font-weight: 600;
}
.page-profile #perfilAuthShell .perfil-footnote {
    color: #64748b;
}
.page-profile #perfilAuthShell .perfil-password-title,
.page-profile #perfilAuthShell .perfil-share-subtitle {
    color: #1f2937;
}
#investmentModal .modal-app-shell .modal-card.modal-card--in-app-shell {
    border-top: none;
}
#savingModal .modal-app-shell .modal-card.modal-card--in-app-shell {
    border-top: none;
}
#paymentModal .modal-app-shell.auth-login-shell,
#rowActionModal .modal-app-shell.auth-login-shell,
#incomeDeleteModal .modal-app-shell.auth-login-shell,
#investmentDeleteModal .modal-app-shell.auth-login-shell,
#savingDeleteModal .modal-app-shell.auth-login-shell {
    width: min(440px, 100%);
}
#paymentModal .modal-app-shell .modal-card.modal-card--in-app-shell,
#rowActionModal .modal-app-shell .modal-card.modal-card--in-app-shell {
    border-top: none;
}
#incomeDeleteModal .modal-app-shell .modal-card.modal-card--in-app-shell {
    border-top: none;
}
#investmentDeleteModal .modal-app-shell .modal-card.modal-card--in-app-shell {
    border-top: none;
}
#savingDeleteModal .modal-app-shell .modal-card.modal-card--in-app-shell {
    border-top: none;
}
.modal-app-shell.auth-login-shell .auth-modal__close {
    background: transparent;
    border: none;
    box-shadow: none;
    color: rgba(255, 255, 255, 0.88);
    opacity: 0.88;
    border-radius: 10px;
    left: 8px;
    right: auto;
    z-index: 6;
}
.modal-app-shell.auth-login-shell .auth-modal__close:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    opacity: 1;
}
.modal-card__head {
    padding: 18px 20px 16px;
    background: linear-gradient(
        135deg,
        color-mix(in srgb, #1f7a3a 92%, #0d3d1f) 0%,
        #1f7a3a 48%,
        color-mix(in srgb, #1f7a3a 75%, #2d9f52) 100%
    );
    color: #fff;
}
.modal-card__title {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.25;
}
.modal-card__subtitle {
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.88);
    font-weight: 400;
}
.modal-card__title--gold {
    color: #d4af37;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}
.modal-card__body {
    padding: 18px 20px 20px;
    overflow-y: auto;
}
.modal-card__body .modal-grid {
    margin-bottom: 0;
}
.modal-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 12px;
}
.modal-grid--fields {
    gap: 12px 14px;
}

#editExpenseModal .modal-grid--expense-edit {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: stretch;
}
#editExpenseModal .modal-expense-row {
    display: grid;
    gap: 12px 18px;
    width: 100%;
    min-width: 0;
    align-items: start;
}
#editExpenseModal .modal-expense-row--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
#editExpenseModal .modal-expense-row--category-type {
    gap: 12px 8px;
}
#editExpenseModal .modal-expense-row--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
#editExpenseModal .modal-expense-row--1 {
    grid-template-columns: minmax(0, 1fr);
}
#editExpenseModal .modal-currency-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-width: 0;
}
#editExpenseModal .modal-currency-row__flag {
    flex-shrink: 0;
    width: 24px;
    height: 18px;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
}
#editExpenseModal .modal-currency-row__select {
    flex: 1 1 auto;
    min-width: 0;
}

#incomeModal .modal-currency-row--income-modal .modal-currency-row__flag-slot {
    flex: 0 0 42px;
    width: 42px;
    min-width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-sizing: border-box;
}
#incomeModal .modal-currency-row--income-modal .modal-currency-row__flag {
    flex-shrink: 0;
    width: auto;
    height: auto;
    max-width: 36px;
    max-height: 27px;
    object-fit: contain;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
}

#editExpenseModal .modal-expense-row--interest-notes .modal-field--receipt-span2 {
    grid-column: span 2;
    min-width: 0;
}
#editExpenseModal .modal-expense-row--interest-notes .modal-field--interest {
    max-width: none;
}
#editExpenseModal .category-picker-row__select {
    max-width: none;
}
@media (max-width: 720px) {
    #editExpenseModal .modal-expense-row--2,
    #editExpenseModal .modal-expense-row--3 {
        grid-template-columns: 1fr;
    }
    #editExpenseModal .modal-expense-row--interest-notes .modal-field--receipt-span2 {
        grid-column: auto;
    }
}
.modal-field--full {
    grid-column: 1 / -1;
}
.modal-field__textarea {
    border: 1px solid #d1d5db;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 14px;
    min-height: 52px;
    resize: vertical;
    font-family: inherit;
    background: #fff;
    color: #1f2937;
}
.modal-field__textarea:focus {
    outline: none;
    border-color: #1f7a3a;
    box-shadow: 0 0 0 3px color-mix(in srgb, #1f7a3a 22%, transparent);
}
.payment-detail-grid {
    margin-bottom: 4px;
}
.payment-receipt-hint {
    font-size: 11px;
    margin: 4px 0 0;
    color: #64748b;
}
.modal-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}
.modal-field__label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
    margin: 0;
    line-height: 1.25;
}
.modal-card__body .modal-grid input,
.modal-card__body .modal-grid .modal-field__select {
    border: 1px solid #d1d5db;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 14px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    background: #fff;
    color: #1f2937;
}
.modal-card__body .modal-grid .modal-field__select {
    cursor: pointer;
    appearance: auto;
}
.modal-card__body .modal-grid input[type="file"] {
    padding: 8px 0;
    font-size: 13px;
    border: 0;
    background: transparent;
}
.modal-card__body .modal-grid input:focus,
.modal-card__body .modal-grid .modal-field__select:focus {
    outline: none;
    border-color: #1f7a3a;
    box-shadow: 0 0 0 3px color-mix(in srgb, #1f7a3a 22%, transparent);
}
.modal-card__body .modal-grid input::placeholder {
    color: #9ca3af;
}
.modal-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid #eef2f0;
}
.btn-modal-primary {
    border: 0;
    background: #1f7a3a;
    color: #fff;
    border-radius: 10px;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 8px color-mix(in srgb, #1f7a3a 35%, transparent);
    transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}
.btn-modal-primary:hover {
    background: color-mix(in srgb, #1f7a3a 88%, #000);
    box-shadow: 0 4px 14px color-mix(in srgb, #1f7a3a 40%, transparent);
}
.btn-modal-primary:active {
    transform: translateY(1px);
}
.btn-modal-secondary {
    border: 2px solid #e5e7eb;
    background: #fff;
    color: #4b5563;
    border-radius: 10px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.btn-modal-secondary:hover {
    border-color: #1f7a3a;
    color: #1f7a3a;
    background: color-mix(in srgb, #1f7a3a 6%, white);
}
.btn-modal-danger {
    border: 2px solid #fecaca;
    background: #fff5f5;
    color: #dc2626;
    border-radius: 10px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.btn-modal-danger:hover {
    border-color: #fca5a5;
    background: #fee2e2;
}
.payment-section-label {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7280;
}
.payment-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
}
.payment-option[hidden],
#pendingPaymentOption[hidden] {
    display: none !important;
}
.payment-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    padding: 14px 14px 14px 16px;
    border: 2px solid #e8ece9;
    border-radius: 12px;
    cursor: pointer;
    background: #fafcfb;
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.payment-option:hover {
    border-color: color-mix(in srgb, #1f7a3a 35%, #e8ece9);
    background: color-mix(in srgb, #1f7a3a 4%, #fafcfb);
}
.payment-option:has(input:checked) {
    border-color: #1f7a3a;
    background: color-mix(in srgb, #1f7a3a 10%, white);
    box-shadow: 0 0 0 1px #1f7a3a;
}
.payment-option:has(input:disabled) {
    opacity: 0.5;
    cursor: not-allowed;
}
.payment-option input[type="radio"] {
    margin: 2px 0 0;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: #1f7a3a;
    cursor: pointer;
}
.payment-option:has(input:disabled) input[type="radio"] {
    cursor: not-allowed;
}
.payment-option__text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.payment-option__title {
    font-size: 15px;
    font-weight: 700;
    color: #1f2937;
    line-height: 1.25;
}
.payment-option__hint {
    font-size: 12px;
    line-height: 1.4;
    color: #6b7280;
}
.payment-option:has(input:checked) .payment-option__title {
    color: #14532d;
}
.partial-amount-wrap {
    margin-bottom: 12px;
    padding: 14px 16px;
    border-radius: 12px;
    background: color-mix(in srgb, #1f7a3a 7%, #f8faf9);
    border: 1px solid color-mix(in srgb, #1f7a3a 18%, #e5e7eb);
}
.partial-amount-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 4px;
}
.partial-input-shell {
    position: relative;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    background: #fff;
    min-height: 44px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.partial-input-shell:focus-within {
    border-color: #1f7a3a;
    box-shadow: 0 0 0 3px color-mix(in srgb, #1f7a3a 22%, transparent);
}
.partial-input-watermark {
    position: absolute;
    left: 12px;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: color-mix(in srgb, #1f7a3a 28%, #94a3b8);
    pointer-events: none;
    z-index: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity 0.12s ease;
}
.partial-input-watermark.is-hidden {
    opacity: 0;
    visibility: hidden;
}
.modal-card__body #partialAmountInput {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: none;
    min-height: 42px;
    margin: 0;
    border: 0;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 15px;
    background: transparent;
    box-shadow: none;
    transition: none;
}
.modal-card__body #partialAmountInput:focus {
    outline: none;
    border-color: transparent;
    box-shadow: none;
}

body.page-expenses #paymentModal,
body.page-income #incomeCollectionModal .payment-section-label {
    color: #94a3b8 !important;
}
body.page-expenses #paymentModal,
body.page-income #incomeCollectionModal .payment-option {
    border-color: var(--rm-border-soft) !important;
    background: #1e1e24 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}
body.page-expenses #paymentModal,
body.page-income #incomeCollectionModal .payment-option:hover {
    border-color: color-mix(in srgb, #22c55e 46%, var(--rm-border-soft)) !important;
    background: color-mix(in srgb, #22c55e 9%, #1e1e24) !important;
}
body.page-expenses #paymentModal,
body.page-income #incomeCollectionModal .payment-option:has(input:checked) {
    border-color: #22c55e !important;
    background: color-mix(in srgb, #22c55e 14%, #1e1e24) !important;
    box-shadow:
        inset 0 0 0 1px rgba(34, 197, 94, 0.45),
        0 0 0 1px rgba(34, 197, 94, 0.25) !important;
}
body.page-expenses #paymentModal,
body.page-income #incomeCollectionModal .payment-option__title {
    color: #e2e8f0 !important;
}
body.page-expenses #paymentModal,
body.page-income #incomeCollectionModal .payment-option__hint {
    color: #94a3b8 !important;
}
body.page-expenses #paymentModal,
body.page-income #incomeCollectionModal .payment-option:has(input:checked) .payment-option__title {
    color: #bbf7d0 !important;
}
body.page-expenses #paymentModal,
body.page-income #incomeCollectionModal .partial-amount-wrap {
    background: color-mix(in srgb, #22c55e 8%, #1e1e24) !important;
    border-color: color-mix(in srgb, #22c55e 24%, var(--rm-border-soft)) !important;
}
body.page-expenses #paymentModal,
body.page-income #incomeCollectionModal .partial-amount-label {
    color: #cbd5e1 !important;
}
body.page-expenses #paymentModal,
body.page-income #incomeCollectionModal .partial-input-shell {
    border-color: var(--rm-border-soft) !important;
    background: #1e1e24 !important;
}
body.page-expenses #paymentModal,
body.page-income #incomeCollectionModal .partial-input-shell:focus-within {
    border-color: #22c55e !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, #22c55e 24%, transparent) !important;
}
body.page-expenses #paymentModal,
body.page-income #incomeCollectionModal .partial-input-watermark {
    color: color-mix(in srgb, #86efac 65%, #94a3b8) !important;
}
body.page-expenses #paymentModal,
body.page-income #incomeCollectionModal #partialAmountInput {
    color: #e2e8f0 !important;
    background: transparent !important;
}
body.page-expenses #paymentModal,
body.page-income #incomeCollectionModal #partialAmountInput::placeholder {
    color: #71717a !important;
}
.modal-error {
    color: #b91c1c;
    font-size: 13px;
    margin: 0 0 12px;
    line-height: 1.35;
    padding: 10px 12px;
    border-radius: 10px;
    background: #fef2f2;
    border: 1px solid #fecaca;
}
.currency-form-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(160px, max-content);
    gap: 12px 14px;
    align-items: end;
    margin-bottom: 20px;
    padding: 14px;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
}
.currency-official-cell {
    min-height: 42px;
    display: flex;
    align-items: center;
}
.currency-official-cb {
    width: 18px;
    height: 18px;
    accent-color: #1f7a3a;
    cursor: pointer;
}
.currency-form-btns-label {
    visibility: hidden;
    line-height: 1.2;
    min-height: 1em;
}
.currency-form-btns-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    min-height: 42px;
}
.currency-form-btns-row .btn,
.currency-form-btns-row .btn-modal-secondary {
    white-space: nowrap;
}
.currency-form-grid .modal-field input[type="color"] {
    height: 42px;
    padding: 2px 4px;
    width: 100%;
    box-sizing: border-box;
    cursor: pointer;
}
.currency-form-grid #currencyCode[readonly] {
    background: #e2e8f0;
    color: #475569;
    border-color: #cbd5e1;
    cursor: not-allowed;
    box-shadow: none;
}
.currency-form-grid #currencyCode[readonly]:focus {
    outline: none;
    border-color: #cbd5e1;
    box-shadow: none;
}
@media (max-width: 1100px) {
    .currency-form-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .currency-form-btns {
        grid-column: 1 / -1;
    }
}
@media (max-width: 640px) {
    .currency-form-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.currency-section-title {
    font-size: 1.12rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #0f172a;
    margin: 0 0 12px;
}
.currency-subtitle-manual {
    margin: 0 0 8px;
    font-size: 1rem;
    font-weight: 700;
    color: #92400e;
}
.currency-config-ff-block {
    margin-bottom: 4px;
}
.currency-ff-filter {
    width: 100%;
    max-width: 480px;
    margin-bottom: 0;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid #cbd5e1;
    background: #fff;
    box-sizing: border-box;
}
.currency-ff-select {
    width: 100%;
    min-height: 0;
    height: 100%;
    max-height: none;
    font-size: 14px;
    line-height: 1.35;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid #cbd5e1;
    background: #fff;
    box-sizing: border-box;
}
.currency-manual-panel {
    margin-top: 14px;
    padding: 16px;
    border-radius: 12px;
    border: 1px dashed #ca8a04;
    background: #fffbeb;
}
.btn-currency-manual-toggle {
    margin-top: 12px;
    background: transparent;
    border: none;
    color: #1d4ed8;
    text-decoration: underline;
    cursor: pointer;
    font-size: 14px;
    padding: 4px 0;
    font-weight: 600;
}
.btn-currency-manual-toggle:hover {
    color: #1e3a8a;
}
.currency-readonly-input {
    background: #e2e8f0 !important;
    color: #334155 !important;
    border-color: #cbd5e1 !important;
    cursor: default;
}
body.page-settings-currencies .subnav {
    border-top-right-radius: 18px;
    overflow: hidden;
}
body.page-settings-currencies .subnav + .panel {
    border-top-right-radius: 18px;
    overflow: hidden;
}
.currency-form-grid--ff {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1100px) {
    .currency-form-grid--ff {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
.currency-form-grid--manual {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 900px) {
    .currency-form-grid--manual {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
.currency-add-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid #e5e7eb;
}
.config-form-msg {
    margin: 0 0 12px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 14px;
    background: transparent;
    color: #166534;
    border: 1px solid #bbf7d0;
}
.config-form-msg--err {
    background: transparent;
    color: #b91c1c;
    border-color: #fecaca;
}
.config-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.category-order-cell {
    white-space: nowrap;
    text-align: center;
}

.category-order-inline {
    display: inline-flex;
    border: 1px solid #d7ba48;
    border-radius: 10px;
    overflow: hidden;
    flex: 0 0 auto;
}
.category-move-btn,
.subcat-inner-table .subcat-move-btn {
    width: 32px;
    height: 24px;
    border: 0;
    border-radius: 0;
    background: #efe58f;
    cursor: pointer;
    vertical-align: middle;
    padding: 0;
    flex: 0 0 auto;
    position: relative;
}
.category-move-btn[data-dir="down"],
.subcat-inner-table .subcat-move-btn[data-dir="down"] {
    background: #efe58f;
}
.category-move-btn[data-dir="up"],
.subcat-inner-table .subcat-move-btn[data-dir="up"] {
    background: #f2cb05;
}
.category-move-btn::before,
.subcat-inner-table .subcat-move-btn::before {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 3px solid #105312;
    border-bottom: 3px solid #105312;
    position: absolute;
    top: 50%;
    left: 50%;
}
.category-move-btn[data-dir="down"]::before,
.subcat-inner-table .subcat-move-btn[data-dir="down"]::before {
    transform: translate(-50%, -52%) rotate(45deg);
}
.category-move-btn[data-dir="up"]::before,
.subcat-inner-table .subcat-move-btn[data-dir="up"]::before {
    transform: translate(-50%, -48%) rotate(-135deg);
}
.category-move-btn + .category-move-btn,
.subcat-inner-table .subcat-move-btn + .subcat-move-btn {
    border-left: 1px solid #d7ba48;
    margin-left: 0;
}
.category-move-btn:hover,
.subcat-inner-table .subcat-move-btn:hover {
    filter: brightness(0.95);
}
.config-cat-name {
    font-weight: 700;
    font-size: 15px;
    color: #ffffff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.22);
}
.modal-card--category-view .category-view-line {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    line-height: 1.35;
    overflow-x: auto;
    padding: 4px 0 14px;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 12px;
}
.modal-card--category-view .category-view-name {
    font-weight: 700;
    flex-shrink: 0;
}
.modal-card--category-view .category-view-sep {
    color: #94a3b8;
    flex-shrink: 0;
    user-select: none;
}
.modal-card--category-view .category-view-sep--icon {
    margin-left: 2px;
}
.modal-card--category-view .category-view-kind {
    color: #475569;
    flex-shrink: 0;
}
.modal-card--category-view .category-view-color {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.modal-card--category-view .category-view-color-swatch {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    flex-shrink: 0;
}
.modal-card--category-view .category-view-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    min-width: 1.25em;
}
.modal-card--category-view .category-view-subsec {
    margin-top: 8px;
}
.modal-card--category-view .category-view-subsec .subcat-table-frame {
    margin-top: 0;
}
.modal-card--category-view .category-view-actions {
    margin-top: 16px;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}
.cat-main-row td {
    border-bottom-color: color-mix(in srgb, #000 14%, transparent);
}
.cat-main-row td:not(.category-name-cell):not(.category-icon-cell) {
    background: #ffffff;
}
.category-name-cell {
    border-radius: 0;
}
.config-actions .btn.category-edit-btn,
.subcat-inner-table .btn.subcat-edit-btn {
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
}
.category-form-grid {
    display: grid;
    grid-template-columns: minmax(220px, 1.45fr) minmax(92px, 0.55fr) minmax(170px, 1fr) minmax(170px, 1fr) minmax(120px, 0.65fr);
    gap: 8px 8px;
    align-items: end;
    margin-bottom: 12px;
    padding: 10px;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
}
.category-form-grid .category-form-input,
.category-form-grid .modal-field__select,
.category-form-grid .category-icon-combo__btn {
    min-height: 40px;
    height: 40px;
    padding-top: 8px;
    padding-bottom: 8px;
}
.category-form-grid .modal-field__select,
.category-grid-toolbar .modal-field__select,
.category-form-grid .category-icon-combo__btn {
    border: 1px solid #d1d5db;
    border-radius: 10px;
    background: #fff;
    color: #1f2937;
}
.category-form-grid .category-icon-combo__btn {
    font-size: 14px;
}
.category-form-grid .category-form-btns {
    grid-column: 1 / -1;
}
.category-form-grid .category-color-input {
    width: 100%;
    min-height: 40px;
    height: 40px;
    padding: 3px 6px;
    border-radius: 10px;
    border: 1px solid #d1d5db;
    background: #ffffff;
    cursor: pointer;
}
.category-form-grid .category-color-input::-webkit-color-swatch-wrapper {
    padding: 0;
}
.category-form-grid .category-color-input::-webkit-color-swatch {
    border: 0;
    border-radius: 7px;
}
.category-form-grid .category-color-input::-moz-color-swatch {
    border: 0;
    border-radius: 7px;
}
.category-icon-select {
    font-size: 13px;
    max-width: 100%;
}
.category-table-icon-col {
    width: 52px;
    text-align: center;
    vertical-align: middle;
}
.category-grid-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 2px 0 10px;
}
.category-grid-toolbar .modal-field__label {
    margin: 0;
    white-space: nowrap;
}
.category-grid-toolbar .modal-field__select {
    width: auto;
    min-width: 180px;
    min-height: 40px;
    padding: 8px 12px;
    appearance: auto;
}
.category-grid-toolbar .category-icon-combo.category-kind-combo {
    flex: 1 1 auto;
    min-width: min(280px, 100%);
    max-width: 360px;
}
.category-grid-toolbar .category-kind-combo .category-icon-combo__btn {
    min-height: 40px;
    min-width: 200px;
}
.cat-main-row .category-icon-preview {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #ffffff;
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.22));
}
.category-icon-empty {
    color: rgba(255, 255, 255, 0.88);
    font-weight: 600;
    font-size: 14px;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}
.category-icon-combo {
    position: relative;
    width: 100%;
    min-width: 0;
}
.category-icon-combo__btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: left;
    cursor: pointer;
    box-sizing: border-box;
    min-height: 38px;
    padding: 6px 10px;
    font-size: 13px;
    color: #1f2937;
    background: #fff;
}
.category-icon-combo__btn:focus {
    outline: none;
    border-color: #1f7a3a;
    box-shadow: 0 0 0 3px color-mix(in srgb, #1f7a3a 22%, transparent);
}
.category-icon-combo__leading {
    flex: 0 0 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.2em;
}
.category-icon-combo__leading i {
    font-size: 16px;
    color: #166534;
}
.category-icon-combo__text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.category-icon-combo__caret {
    flex: 0 0 auto;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #64748b;
    margin-left: 4px;
}
.category-icon-combo__list {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    z-index: 10050;
    max-height: 260px;
    overflow-y: auto;
    margin: 0;
    padding: 4px 0;
    list-style: none;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14);
}
.category-icon-combo__list[hidden] {
    display: none !important;
}
.category-icon-combo__option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 13px;
    color: #1f2937;
}
.category-icon-combo__option:hover,
.category-icon-combo__option[aria-selected="true"] {
    background: #f1f5f9;
}
.category-icon-combo__option i {
    flex: 0 0 22px;
    width: 22px;
    text-align: center;
    font-size: 16px;
    color: #166534;
}
.category-icon-combo__opt-empty {
    flex: 0 0 22px;
    width: 22px;
    text-align: center;
    color: #94a3b8;
    font-weight: 600;
}
.category-icon-native-select {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.category-edit-icon-field {
    grid-column: 1 / -1;
}
.category-form-grid .modal-field {
    min-width: 0;
}
.category-form-grid .modal-field__label,
.category-edit-grid .modal-field__label {
    text-transform: none;
    letter-spacing: 0;
    color: #334155;
    font-size: 13px;
    font-weight: 700;
}
.category-form-input {
    width: 100%;
    min-height: 38px;
    box-sizing: border-box;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    padding: 8px 10px;
    font-size: 14px;
    background: #fff;
    color: #1f2937;
}
.category-form-input:focus {
    outline: none;
    border-color: #1f7a3a;
    box-shadow: 0 0 0 3px color-mix(in srgb, #1f7a3a 22%, transparent);
}
.category-form-input--color {
    height: 38px;
    padding: 1px 3px;
    cursor: pointer;
}
.color-map-picker {
    position: relative;
    width: 236px;
    max-width: 100%;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    background: #fff;
    padding: 4px;
}
.color-picker-trigger {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    color: #1f2937;
    font-size: 13px;
    font-weight: 600;
}
.color-picker-trigger__swatch {
    width: 18px;
    height: 18px;
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.16);
    display: inline-block;
}
.color-picker-trigger__label {
    line-height: 1;
}
.color-picker-trigger:hover {
    border-color: #1f7a3a;
    background: color-mix(in srgb, #1f7a3a 6%, white);
}
.color-map-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 7px;
    cursor: crosshair;
}
.color-map-modal-card {
    width: min(500px, 90vw);
}
.color-map-modal-body {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
}
.color-map-picker--modal {
    width: 100% !important;
    max-width: none !important;
    padding: 6px;
    margin: 0;
}
.color-map-picker--modal .color-map-center-black {
    width: 18px;
    height: 18px;
}
.color-map-picker--modal .color-map-marker {
    width: 20px;
    height: 20px;
}
.color-map-center-black {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 14px;
    height: 14px;
    background: #111111;
    clip-path: polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0 50%);
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.color-map-marker {
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid #ffffff;
    border-radius: 4px;
    box-sizing: border-box;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 2px rgba(0,0,0,.35);
    pointer-events: none;
    display: none;
}
.category-form-btns-label {
    visibility: hidden;
    line-height: 1.2;
    min-height: 1em;
}
.category-form-btns-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    min-height: 38px;
}
.category-form-btns-row .btn,
.category-form-btns-row .btn-modal-secondary {
    min-height: 36px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-left: 11px;
    padding-right: 11px;
}

body.page-settings-categories .subnav {
    border-top-right-radius: 18px;
    overflow: hidden;
}
body.page-settings-categories .subnav + .panel {
    border-top-right-radius: 18px;
    overflow: hidden;
}
body.page-settings-categories .table-scroll.table-scroll--category-fit {
    max-height: min(50vh, 470px);
    overflow: auto;
    padding-right: 4px;
}
body.page-settings-categories .table-scroll.table-scroll--category-fit .category-grid-toolbar {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #ffffff;
}
.category-table th,
.category-table td {
    padding-top: 8px;
    padding-bottom: 8px;
}
.category-table th:nth-child(1),
.category-table td:nth-child(1) {
    width: 35%;
    min-width: 0;
    box-sizing: border-box;
    word-break: break-word;
}

.category-table th:nth-child(2),
.category-table td:nth-child(2) {
    width: 52px;
    max-width: 56px;
    padding-left: 4px;
    padding-right: 4px;
    box-sizing: border-box;
}
.category-table td.config-actions {
    min-width: 0;
    width: auto;
    height: 44px;
    vertical-align: middle;
}
@media (min-width: 769px) {
    .category-table td.config-actions {
        min-width: 260px;
    }
}
.category-table .config-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    white-space: nowrap;
}
.category-table td.config-actions:empty::before {
    content: "\00a0";
    display: inline-block;
    min-width: 1px;
}
.category-table .config-actions .btn,
.category-table .config-actions .btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    white-space: nowrap;
}
.category-edit-grid {
    grid-template-columns: 1fr 110px;
}
.category-edit-grid .color-map-picker {
    width: 236px;
}
.category-edit-actions {
    margin-top: 10px;
}
.category-edit-divider {
    border: 0;
    border-top: 1px solid #e5e7eb;
    margin: 14px 0 12px;
}
.category-edit-subtitle {
    margin: 0 0 10px;
    font-size: 14px;
    color: #334155;
}
.subcat-table-frame {
    margin-top: 8px;
    border: 1px solid #cfd8e3;
    border-radius: 12px;
    overflow: hidden;
    background: #ffffff;
}
.subcat-table-frame__head {
    padding: 9px 12px;
    font-size: 14px;
    font-weight: 700;
    color: #334155;
    background: #eef2f7;
    border-bottom: 1px solid #d9e2ec;
}
.subcat-table-frame__body {
    padding: 10px;
    background: #f8fafc;
}
.subcat-toolbar--modal {
    margin-bottom: 8px;
}
.subcat-table-scroll {
    max-height: 260px;
    overflow-y: auto;
    overflow-x: hidden;
}
.subcat-modal-table th,
.subcat-modal-table td {
    padding-top: 7px;
    padding-bottom: 7px;
}
@media (max-width: 900px) {
    .category-form-grid {
        grid-template-columns: 1fr 84px;
        gap: 8px 8px;
        padding: 8px;
        margin-bottom: 10px;
    }
    .category-form-grid .modal-field:nth-child(3) {
        grid-column: 1 / -1;
    }
    .category-form-grid .category-form-btns {
        grid-column: 1 / -1;
    }
    .category-form-btns-row {
        justify-content: flex-end;
    }
    .color-map-picker {
        width: 210px;
    }
    .color-map-modal-card {
        width: min(96vw, 100%);
    }
    .color-map-modal-body {
        width: 100%;
        padding-left: 8px;
        padding-right: 8px;
    }
    .color-map-picker--modal {
        width: 100% !important;
        max-width: none !important;
    }
}
@media (max-width: 520px) {
    .category-form-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .category-form-btns-row {
        justify-content: stretch;
    }
    .category-form-btns-row .btn,
    .category-form-btns-row .btn-modal-secondary {
        flex: 1 1 0;
    }
    .color-picker-trigger {
        width: 100%;
        justify-content: center;
    }
    .color-map-modal-body {
        padding-left: 6px;
        padding-right: 6px;
    }
}
.subcat-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
}
.subcat-toolbar .subcat-name-input {
    flex: 1 1 200px;
    min-width: 160px;
    padding: 8px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 14px;
}
.subcat-inner-table {
    margin-top: 4px;
    font-size: 14px;
}
.subcat-inner-table .subcat-name-cell {
    font-weight: 500;
}
.subnav {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0;
    margin-bottom: 0;
    max-width: 100%;
    border-bottom: 1px solid #cbd5e1;
}
.subnav a {
    text-decoration: none;
    border: 1px solid #cbd5e1;
    border-bottom: 0;
    background: #f8fafc;
    color: #334155;
    border-radius: 10px 10px 0 0;
    padding: 8px 14px;
    flex: 0 1 auto;
    max-width: 100%;
    box-sizing: border-box;
    margin-right: 6px;
    margin-bottom: -1px;
    font-weight: 500;
}
.subnav a.active {
    background: #d4af37;
    color: #173018;
    border-color: #b8941f;
    border-bottom: 1px solid #ffffff;
    font-weight: 700;
}
.subnav + .panel {
    margin-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border: 1px solid #cbd5e1;
    border-top: none;
    box-shadow: none;
}

.topbar--hero ~ main.container:has(> section.subnav) {
    padding-bottom: 32px;
}
.topbar--hero ~ main.container:has(> section.subnav) > section.subnav {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0;
    margin-bottom: 0;
    max-width: 100%;
    border: 1px solid rgba(27, 94, 32, 0.14);
    border-bottom: none;
    border-radius: 18px 18px 0 0;
    padding: 12px 14px 0;
    background: linear-gradient(180deg, #ecfdf5 0%, #f8fafc 46%, #ffffff 100%);
    box-shadow: 0 6px 28px rgba(15, 41, 24, 0.1);
}
.topbar--hero ~ main.container:has(> section.subnav) > section.subnav a {
    text-decoration: none;
    border: 1px solid rgba(15, 23, 42, 0.14);
    border-bottom: 0;
    background: #ffffff;
    color: #334155;
    border-radius: 12px 12px 0 0;
    padding: 9px 16px;
    flex: 0 1 auto;
    max-width: 100%;
    box-sizing: border-box;
    margin-right: 8px;
    margin-bottom: 0;
    font-weight: 600;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.topbar--hero ~ main.container:has(> section.subnav) > section.subnav a:hover {
    background: #f1f5f9;
    border-color: rgba(15, 23, 42, 0.22);
    color: #0f172a;
}
.topbar--hero ~ main.container:has(> section.subnav) > section.subnav a.active {
    background: linear-gradient(180deg, #fde68a 0%, #d4af37 96%);
    color: #0f172a;
    border-color: rgba(148, 124, 31, 0.85);
    border-bottom: 1px solid #ffffff;
    font-weight: 800;
    position: relative;
    z-index: 2;
    box-shadow: 0 4px 18px rgba(212, 175, 55, 0.32);
}
.topbar--hero ~ main.container:has(> section.subnav) > section.panel {
    margin-top: -1px;
    position: relative;
    z-index: 1;
    border: 1px solid rgba(27, 94, 32, 0.12);
    border-radius: 0 0 20px 20px;
    background: #ffffff;
    box-shadow:
        0 24px 48px rgba(15, 41, 24, 0.12),
        0 8px 16px rgba(15, 23, 42, 0.06);
    padding: 22px 24px 28px;

    color: #0f172a;
}
.topbar--hero ~ main.container:has(> section.subnav) > section.panel .muted {
    color: #475569;
}
.topbar--hero ~ main.container:has(> section.subnav) > section.panel h2 {
    color: #0f172a;
}
.topbar--hero ~ main.container:has(> section.subnav) > section.panel .modal-field__label,
.topbar--hero ~ main.container:has(> section.subnav) > section.panel label:not(.fx-mode-label) {
    color: #334155;
}
.topbar--hero ~ main.container:has(> section.subnav) > section.panel input,
.topbar--hero ~ main.container:has(> section.subnav) > section.panel select,
.topbar--hero ~ main.container:has(> section.subnav) > section.panel textarea {
    color: #0f172a;
}
.topbar--hero ~ main.container:has(> section.subnav) > section.panel > h1:first-child {
    font-size: clamp(1.35rem, 2.8vw, 1.65rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #0f172a;
}
@media (max-width: 640px) {
    .subnav {
        gap: 0;
    }
    .subnav a {
        padding: 6px 10px;
        font-size: 13px;
        margin-right: 4px;
    }
    .topbar--hero ~ main.container:has(> section.subnav) > section.subnav a {
        padding: 7px 11px;
        font-size: 13px;
        margin-right: 5px;
    }
}
.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 8px;
}
.dot--lg {
    width: 22px;
    height: 22px;
    margin-right: 0;
    border: 1px solid rgba(0, 0, 0, 0.12);
    vertical-align: middle;
}
.chips { display: flex; gap: 8px; margin-bottom: 12px; }
.chip {
    border-radius: 999px;
    border: 1px solid #d1d5db;
    padding: 6px 10px;
    background: #fff;
    font: inherit;
    cursor: pointer;
}
.chip.active { background: #111827; color: #fff; }

.due-color-mode .chip {
    border: 1px solid #d1d5db;
    padding: 5px 14px;
    background: #fff;
    color: #7f1d1d;
    font-weight: 700;
    font-size: 12px;
    line-height: 1.25;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.due-color-mode .chip:hover {
    border-color: #fca5a5;
    background: #fff5f5;
    color: #991b1b;
}
.due-color-mode .chip.active {
    border-color: #7f1d1d;
    color: #fff;
    background: linear-gradient(180deg, #dc2626 0%, #991b1b 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        0 1px 2px rgba(0, 0, 0, 0.18);
    text-shadow: none;
}
.due-color-mode .chip.active:hover {
    border-color: #7f1d1d;
    background: linear-gradient(180deg, #e11d48 0%, #7f1d1d 100%);
    color: #fff;
}
.range-bar {
    background: linear-gradient(90deg, #ef4444 0% 32%, #f97316 32% 65%, #eab308 65% 80%, #22c55e 80% 100%);
    height: 20px;
    border-radius: 8px;
    margin-bottom: 10px;
}
.due-color-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0 12px;
}
.due-color-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    background: #fff;
    font-size: 13px;
    font-weight: 700;
}
.due-color-pill i {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.15);
}
.due-color-track {
    height: 18px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    margin-bottom: 12px;
}
.due-boundaries {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 8px;
}
.due-boundary {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    padding: 10px;
    display: grid;
    gap: 8px;
}
.due-boundary label {
    font-size: 13px;
    color: #334155;
    font-weight: 700;
}
.due-boundary strong {
    font-size: 14px;
    color: #166534;
}
.due-boundary input[type="range"] {
    width: 100%;
    accent-color: #1f7a3a;
    padding: 0;
}
.tag-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.tag {
    border-left: 6px solid var(--c);
    background: color-mix(in srgb, var(--c) 10%, white);
    border-radius: 10px;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
@media (max-width: 980px) {
    .cards.five, .cards.three, .grid-2, .tag-grid, .total-grid, .gastos-top { grid-template-columns: 1fr; }
    .due-boundaries { grid-template-columns: 1fr; }
}

@media (max-width: 999px) {
    .topbar {
        flex-wrap: wrap;
        row-gap: 8px;
        padding: 8px 10px;
    }
    .topbar--hero {
        --topbar-bar-h: 52px;
        --topbar-hero-reserve-extra: 10px;
        overflow-x: hidden;
        overflow-y: visible;
    }
    .topbar--hero.topbar--hero-login {
        --topbar-hero-reserve-extra: 10px;
        overflow-x: visible;
    }
    body.auth-page--landing .topbar--hero.topbar--hero-login {
        --topbar-bar-h: 64px;
    }
    .topbar-bar {
        flex-wrap: wrap;
        row-gap: 8px;
        padding: 8px 10px;
    }
    .topbar--hero .topbar-bar {
        padding-right: max(12px, env(safe-area-inset-right, 0px));
        padding-left: max(12px, env(safe-area-inset-left, 0px));
        top: env(safe-area-inset-top, 0px);
        left: 0;
        right: 0;
        min-height: var(--topbar-bar-h);
    }
    .topbar-hero-splash {
        display: none;
    }
    .topbar-hero-art {
        display: none;
    }
    .topbar-bar nav {
        position: fixed;
        left: 0;
        top: 0;
        right: auto;
        bottom: 0;
        transform: none;
        z-index: 1200;
        width: min(300px, calc(100vw - 68px));
        max-width: 86vw;
        display: none;
        flex-direction: column;
        gap: 6px;
        padding: calc(env(safe-area-inset-top, 0px) + 12px) 10px 14px;
        background-color: #070d0a;
        background-image:
            linear-gradient(180deg, rgba(74, 222, 128, 0.07) 0%, transparent 42%),
            linear-gradient(180deg, #0c1812 0%, #060a08 52%, #040604 100%);
        border-right: 1px solid rgba(74, 222, 128, 0.32);
        box-shadow: 16px 0 34px rgba(0, 0, 0, 0.48);
        overflow-y: auto;
        overflow-x: hidden;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    .topbar-bar nav.is-open {
        display: flex;
        animation: topbar-nav-slide-in-from-left 0.34s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }
    .topbar-bar nav.is-open.is-closing {
        animation: topbar-nav-slide-out-to-left 0.3s ease-in forwards;
    }
    .topbar-bar nav a {
        white-space: normal;
        font-size: 1.02rem;
        padding: 12px 12px;
        border-radius: 10px;
    }
    .topbar-bar nav .topbar-dropdown {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }
    .topbar-bar nav .topbar-dropdown__trigger {
        width: 100%;
        justify-content: space-between;
        font-size: 1.02rem;
        padding: 12px 12px;
        border-radius: 10px;
    }
    .topbar-bar nav .topbar-dropdown__panel {
        position: static;
        transform: none;
        left: auto;
        min-width: 0;
        width: 100%;
        margin-top: 2px;
        padding: 6px 6px 8px;
        gap: 4px;
        border-radius: 8px;
        background: rgba(0, 0, 0, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.2);
        box-shadow: none;
    }
    .topbar-bar nav .topbar-dropdown__panel a {
        white-space: normal;
        font-size: 0.96rem;
        padding: 10px 10px;
    }
    .topbar-menu-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: fixed;

        top: calc(env(safe-area-inset-top, 0px) + (var(--topbar-bar-h) - 40px) / 2);
        left: max(12px, calc(env(safe-area-inset-left, 0px) + 2px));
        right: auto;
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
        box-sizing: border-box;
        border-radius: 8px;
        z-index: 1130;
    }

    .topbar--hero.topbar--hero-login .topbar-bar {
        padding-left: max(12px, env(safe-area-inset-left, 0px));
        padding-right: max(14px, calc(env(safe-area-inset-right, 0px) + 14px));
    }
    .topbar--hero .topbar-bar__right--login-only .auth-landing-nav__ghost {
        padding: 6px 10px;
        font-size: 0.78rem;
    }
    .topbar--hero .topbar-bar__right--login-only .auth-landing-nav__cta {
        padding: 7px 12px;
        font-size: 0.8rem;
    }
    .topbar--hero .topbar-menu-toggle {
        border-radius: var(--rm-topbar-radius);
    }
    .topbar-mobile-drawer-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 4px 8px;
        margin-bottom: 6px;
        border-bottom: 1px solid rgba(148, 163, 184, 0.2);
    }
    .topbar-mobile-drawer-head__logo {
        height: 38px;
        width: auto;
        object-fit: contain;
    }
    .topbar-mobile-drawer-head__close {
        width: 34px;
        height: 34px;
        border-radius: 10px;
        border: 1px solid rgba(148, 163, 184, 0.4);
        background: rgba(15, 23, 42, 0.7);
        color: #e2e8f0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .topbar-mobile-drawer-footer {
        display: flex;
        flex-direction: column;
        gap: 6px;
        margin-top: 8px;
        padding-top: 10px;
        border-top: 1px solid rgba(148, 163, 184, 0.2);
    }
    .topbar-mobile-drawer-footer > a,
    .topbar-mobile-logout-btn {
        width: 100%;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 11px 12px;
        border-radius: 10px;
        color: #f8fafc;
        text-decoration: none;
        font-weight: 700;
        background: rgba(2, 20, 10, 0.6);
        border: 1px solid rgba(74, 222, 128, 0.2);
    }
    .topbar-mobile-logout-form {
        margin: 0;
    }
    .topbar-mobile-logout-btn {
        font: inherit;
        cursor: pointer;
    }
    .brand { padding: 5px 12px; }
    .topbar--hero .topbar-bar .brand {
        margin-left: 46px;
    }
    .topbar--hero.topbar--hero-login .topbar-bar .brand {
        margin-left: 0;
    }

    .table-scroll {
        overflow-x: auto;
        overflow-y: visible;
    }
    .table-scroll.table-scroll--category-fit {
        overflow-x: hidden;
    }
    .expense-table {
        min-width: 1160px;
    }

    body.page-expenses .category-panel .table-scroll.table-scroll--gastos-expense {
        position: relative;
        z-index: 0;
        overflow-x: auto;
        overflow-y: visible;
        width: 100%;
        max-width: 100%;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        touch-action: pan-x pan-y;
    }
    body.page-expenses .category-panel .expense-table {
        min-width: 1220px;
        width: max(1220px, 100%);
        border-collapse: separate;
        border-spacing: 0;
    }
    body.page-expenses .category-panel .expense-table th:nth-child(1),
    body.page-expenses .category-panel .expense-table td:nth-child(1) {
        min-width: 5.75rem;
        width: 6.5rem;
        max-width: 7.5rem;
    }
    body.page-expenses .category-panel .expense-table th:nth-child(n+2):nth-child(-n+11),
    body.page-expenses .category-panel .expense-table td:nth-child(n+2):nth-child(-n+11) {
        min-width: 4.75rem;
    }
    body.page-expenses .category-panel .expense-table th:nth-child(2),
    body.page-expenses .category-panel .expense-table td:nth-child(2) {
        min-width: 7.25rem;
    }

    body.page-expenses .category-panel .expense-table th:nth-child(1),
    body.page-expenses .category-panel .expense-table td:nth-child(1),
    body.page-expenses .category-panel .expense-table th:nth-child(12),
    body.page-expenses .category-panel .expense-table td:nth-child(12) {
        z-index: 6;
    }
    body.page-expenses .category-panel .expense-table thead th:nth-child(1),
    body.page-expenses .category-panel .expense-table thead th:nth-child(12) {
        z-index: 7;
    }
    body.page-expenses .category-panel .expense-table th:nth-child(12),
    body.page-expenses .category-panel .expense-table td:nth-child(12) {
        min-width: 4.75rem;
        width: 5rem;
        max-width: none;
    }
    .expense-table th:nth-child(1),
    .expense-table td:nth-child(1) {
        width: 7%;
        min-width: 0;
        box-sizing: border-box;
        overflow: hidden;
    }
    .expense-table th:nth-child(12),
    .expense-table td:nth-child(12) {
        width: auto;
        min-width: 2.75rem;
        max-width: 4.5rem;
        box-sizing: border-box;
        overflow: visible;
    }
    .expense-table .actions-cell {
        padding-right: 2px;
        padding-left: 0;
    }
    .expense-table .actions-inner {
        gap: 2px;
        justify-content: center;
        min-width: 0;
        width: auto;
        margin-left: auto;
        margin-right: auto;
    }
    .expense-table .actions-inner .btn-link {
        padding: 3px 5px;
        font-size: 11px;
    }
    body.page-expenses .expense-table .row-action-trigger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: auto;
        max-width: 3.75rem;
        min-width: 0;
        padding: 4px 6px;
        box-sizing: border-box;
        line-height: 1.15;
        text-align: center;
        white-space: nowrap;
        font-size: 11px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    body.page-expenses .expense-table thead th.expense-table__th-action {
        min-width: 2.25rem;
        max-width: 3.75rem;
        padding-left: 3px;
        padding-right: 3px;
        font-size: 10px;
    }
    .expense-table .actions-inner .btn-action {
        gap: 3px;
    }
    .expense-table .actions-inner .btn-action__icon {
        width: 13px;
        height: 13px;
    }
    .row-action-menu {
        right: 0;
    }
    .expense-table th:nth-child(1),
    .expense-table td:nth-child(1),
    .expense-table th:nth-child(12),
    .expense-table td:nth-child(12) {
        position: -webkit-sticky;
        position: sticky;
        background-clip: padding-box;
    }
    body.page-expenses .expense-table tbody tr td:nth-child(1),
    body.page-expenses .expense-table tbody tr td:nth-child(12) {
        background: #ffffff;
    }
    body.page-expenses .expense-table thead th:nth-child(1),
    body.page-expenses .expense-table thead th:nth-child(12) {
        background: #184f2d;
        color: #f8fafc;
    }
    .expense-table th:nth-child(1) {
        left: 0;
        z-index: 5;
        box-shadow: 1px 0 0 #e5e7eb;
        padding-left: 2px;
        padding-right: 2px;
        text-align: center;
        white-space: nowrap;
    }
    .expense-table td:nth-child(1) {
        left: 0;
        z-index: 5;
        box-shadow: 1px 0 0 #e5e7eb;
        padding-left: 6px;
        padding-right: 2px;
        text-align: left;
        white-space: normal;
    }
    .expense-table th:nth-child(12),
    .expense-table td:nth-child(12) {
        right: 0;
        z-index: 4;
        box-shadow: -1px 0 0 #e5e7eb;
        padding-left: 1px;
        padding-right: 2px;
        text-align: center;
    }
    .expense-table td:nth-child(1) .amount {
        font-size: 13px;
        text-align: left;
        white-space: nowrap;
    }
    .expense-table td:nth-child(1) .amount-partial {
        font-size: 10px;
        text-align: left;
        white-space: nowrap;
    }
}

@media (max-width: 999px) {
    body.page-expenses .category-panel {
        overflow: visible;
    }
    body.page-expenses .category-panel .expense-cards-wrap {
        overflow-x: visible !important;
        padding: 10px;
        border-bottom-left-radius: 12px;
        border-bottom-right-radius: 12px;
    }
    body.page-expenses .category-panel .expense-cards-grid {
        gap: 10px;
    }
    body.page-expenses .category-panel .expense-card .row-action-trigger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 1.85rem;
        width: 1.85rem;
        height: 1.85rem;
        max-width: 1.85rem;
        padding: 0;
        border-radius: 7px;
        font-size: 0;
        overflow: visible;
        text-overflow: clip;
    }
    body.page-expenses .category-panel .expense-card .row-action-trigger__icon {
        display: inline-flex;
        font-size: 13px;
        line-height: 1;
    }
    body.page-expenses .category-panel .expense-card__expand-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-width: 0;
        height: auto;
        max-width: none;
        padding: 3px 10px;
        border-radius: 10px;
        font-size: 0.89rem;
    }
    body.page-expenses .category-panel .expense-card__expand-icon {
        font-size: 0.9rem;
    }
    body.page-expenses .category-panel .expense-card--shared-read .view-shared-expense-btn {
        padding: 5px 8px;
        font-size: 11px;
        font-weight: 700;
        line-height: 1.15;
        white-space: nowrap;
    }
    body.page-expenses .category-panel .table-scroll.table-scroll--gastos-expense {
        overflow-x: auto !important;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x pan-y;
        padding-right: 0;
        box-sizing: border-box;
        border-bottom-left-radius: 12px;
        border-bottom-right-radius: 12px;
    }
    body.page-expenses .category-panel .expense-table {
        min-width: 780px !important;
        width: max-content;
        table-layout: auto;
        border-collapse: collapse;
        border-spacing: 0;
    }

    body.page-expenses .category-panel .expense-table th:nth-child(2),
    body.page-expenses .category-panel .expense-table td:nth-child(2) {
        width: 6% !important;
    }
    body.page-expenses .category-panel .expense-table th:nth-child(1),
    body.page-expenses .category-panel .expense-table td:nth-child(1) {
        padding-left: 4px;
        padding-right: 2px;
    }
    body.page-expenses .category-panel .expense-table th:nth-child(1),
    body.page-expenses .category-panel .expense-table td:nth-child(1) {
        position: static !important;
        left: auto !important;
        right: auto !important;
        box-shadow: none !important;
        z-index: auto !important;
        min-width: 4.4rem !important;
        max-width: 4.4rem !important;
        width: 4.4rem !important;
    }
    body.page-expenses .category-panel .expense-table th:nth-child(12),
    body.page-expenses .category-panel .expense-table td:nth-child(12) {
        position: sticky !important;
        right: 1px !important;
        left: auto !important;
        z-index: 6;
        min-width: 2.35rem !important;
        width: 2.35rem !important;
        max-width: 2.35rem !important;
        box-shadow: -1px 0 0 #e5e7eb;
        background-clip: padding-box;
    }
    body.page-expenses .category-panel .expense-table thead th:nth-child(12) {
        z-index: 7;
    }
    body.page-expenses .category-panel .expense-table thead th.expense-table__th-action {
        min-width: 2.35rem;
        width: 2.35rem;
        max-width: 2.35rem;
        font-size: 0;
        padding-left: 0;
        padding-right: 0;
    }
    body.page-expenses .category-panel .expense-table .row-action-trigger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 1.85rem;
        width: 1.85rem;
        height: 1.85rem;
        max-width: 1.85rem;
        padding: 0;
        border-radius: 7px;
        font-size: 0;
        overflow: visible;
        text-overflow: clip;
    }
    body.page-expenses .category-panel .expense-table .row-action-trigger__icon {
        display: inline-flex;
        font-size: 13px;
        line-height: 1;
    }
    body.page-expenses .category-panel .expense-table .actions-cell {
        padding-left: 0;
        padding-right: 4px;
        text-align: center;
    }
    body.page-expenses .category-panel .expense-table .actions-inner {
        justify-content: center;
        width: 100%;
        margin: 0;
    }

    body.page-expenses .category-panel .cat-header {
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
    }
    body.page-expenses .category-panel .expense-table tbody tr:last-child td:first-child {
        border-bottom-left-radius: 12px;
    }
    body.page-expenses .category-panel .expense-table tbody tr:last-child td:last-child {
        border-bottom-right-radius: 12px;
    }
    body.page-expenses .category-panel .expense-table tbody tr:last-child td {
        border-bottom: 0;
    }

    body.page-expenses .category-panel .expense-table--shared-read th:nth-child(12),
    body.page-expenses .category-panel .expense-table--shared-read td:nth-child(12) {
        min-width: 3.35rem !important;
        width: 3.35rem !important;
        max-width: 4.25rem !important;
    }
    body.page-expenses .category-panel .expense-table--shared-read .view-shared-expense-btn {
        padding: 3px 5px;
        font-size: 10px;
        font-weight: 700;
        line-height: 1.15;
        white-space: nowrap;
    }
}

@media (max-width: 768px) {
    .gastos-top .gastos-head-panel h1 {
        font-size: 14px;
    }
    .container {
        margin: 12px auto;
        padding: 0 8px;
    }
    .panel { padding: 12px; margin-bottom: 12px; }
    .panel h1 { font-size: 22px; }
    .panel h2 { font-size: 18px; }
    .cards.five .card p,
    .cards.three .card p { font-size: 20px; }
    .month-year-header { font-size: 22px; }
    .month-grid a { font-size: 14px; padding: 7px 0; }
    .gastos-top {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .gastos-head-panel {
        grid-column: 1 / -1;
    }
    .totals-panel,
    .month-panel {
        min-height: 0;
    }
    .totals-grid {
        max-width: 100%;
        flex-direction: column;
        padding-top: 2px;
    }
    .totals-panel-row {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .totals-panel__add-btn {
        align-self: center;
        margin-left: 0;
        width: 100%;
        max-width: 320px;
    }
    .total-currency {
        border-right: 0;
        border-bottom: 1px solid #e2e8f0;
    }
    .total-currency:last-child { border-bottom: 0; }

    body.page-expenses .totals-panel.panel {
        padding: 8px 10px;
    }
    body.page-expenses .totals-panel h2 {
        font-size: 14px;
        margin: 0 0 4px;
    }
    body.page-expenses .total-currency {
        padding: 3px 6px;
    }
    body.page-expenses .total-currency .label {
        font-size: 11px;
        margin-bottom: 1px;
    }
    body.page-expenses .total-currency .value {
        font-size: 12px;
    }
    body.page-expenses .month-panel.panel {
        padding: 4px 8px;
    }
    body.page-expenses .month-year-header {
        font-size: 14px;
        margin-bottom: 2px;
    }
    body.page-expenses .month-grid a {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        font-weight: 700;
        padding: 6px 4px;
        box-sizing: border-box;
    }
    body.page-expenses .expense-account-hero-month .month-grid.month-grid--expense-hero > button.month-grid-month-btn,
    body.page-income .expense-account-hero-month .month-grid.month-grid--expense-hero > button.month-grid-month-btn,
    body.page-budgets .expense-account-hero-month .month-grid.month-grid--expense-hero > button.month-grid-month-btn {
        font-size: 11px;
        font-weight: 700;
        padding: 6px 4px;
        box-sizing: border-box;
    }
    body.page-savings .totals-panel.panel {
        padding: 8px 10px;
    }
    body.page-savings .totals-panel h2 {
        font-size: 14px;
        margin: 0 0 4px;
    }
    body.page-savings .total-currency {
        padding: 3px 6px;
    }
    body.page-savings .total-currency .label {
        font-size: 11px;
        margin-bottom: 1px;
    }
    body.page-savings .total-currency .value {
        font-size: 12px;
    }
    body.page-savings .month-panel.panel {
        padding: 4px 8px;
    }
    body.page-savings .month-year-header {
        font-size: 14px;
        margin-bottom: 2px;
    }
    body.page-savings .month-grid a {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        font-weight: 700;
        padding: 6px 4px;
        box-sizing: border-box;
    }
    body.page-investments .totals-panel.panel {
        padding: 8px 10px;
    }
    body.page-investments .totals-panel h2 {
        font-size: 14px;
        margin: 0 0 4px;
    }
    body.page-investments .total-currency {
        padding: 3px 6px;
    }
    body.page-investments .total-currency .label {
        font-size: 11px;
        margin-bottom: 1px;
    }
    body.page-investments .total-currency .value {
        font-size: 12px;
    }
    body.page-investments .month-panel.panel {
        padding: 4px 8px;
    }
    body.page-investments .month-year-header {
        font-size: 14px;
        margin-bottom: 2px;
    }
    body.page-investments .month-grid a {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        font-weight: 700;
        padding: 6px 4px;
        box-sizing: border-box;
    }

    body.page-income .totals-panel.panel {
        padding: 8px 10px;
    }
    body.page-income .totals-panel h2 {
        font-size: 14px;
        margin: 0 0 4px;
    }
    body.page-income .total-currency {
        padding: 3px 6px;
    }
    body.page-income .total-currency .label {
        font-size: 11px;
        margin-bottom: 1px;
    }
    body.page-income .total-currency .value {
        font-size: 12px;
    }
    body.page-income .month-panel.panel {
        padding: 4px 8px;
    }
    body.page-income .month-year-header {
        font-size: 14px;
        margin-bottom: 2px;
    }
    body.page-income .month-grid a {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        font-weight: 700;
        padding: 6px 4px;
        box-sizing: border-box;
    }
    .panel table:not(.expense-table):not(.category-table):not(.investment-table):not(.income-table) { min-width: 860px; }
    .page-expenses .category-panel {
        overflow: visible;
    }
    .category-table,
    .subcat-modal-table {
        min-width: 0 !important;
        table-layout: fixed;
        width: 100%;
    }
    .category-table th,
    .category-table td,
    .subcat-modal-table th,
    .subcat-modal-table td {
        font-size: 12px;
        padding: 6px 4px;
    }
    .category-table th:nth-child(1),
    .category-table td:nth-child(1) {
        width: 35%;
        min-width: 0;
        word-break: break-word;
    }
    .category-table th:nth-child(2),
    .category-table td:nth-child(2) {
        width: 40px;
        max-width: 44px;
        padding-left: 2px;
        padding-right: 2px;
    }
    .cat-main-row .category-icon-preview {
        font-size: 14px;
    }
    .category-move-btn,
    .subcat-inner-table .subcat-move-btn {
        width: 30px;
        height: 22px;
        border-radius: 0;
    }
    .config-actions {
        gap: 4px;
    }
    .config-actions .btn,
    .config-actions .btn-danger {
        font-size: 12px;
        padding: 4px 6px;
    }
    .category-table .config-actions {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: center;
        gap: 4px;
        min-width: 0;
    }
    .category-table td.config-actions {
        min-width: 0;
    }
    .color-map-picker {
        width: 190px;
    }
    .category-edit-grid {
        grid-template-columns: 1fr;
    }
    .subcat-toolbar--modal {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }
    .subcat-toolbar--modal .subcat-name-input {
        grid-column: 1 / -1;
        min-width: 0;
    }
    .subcat-table-frame__body {
        padding: 8px;
    }
    .modal-grid { grid-template-columns: 1fr; }

    .actions-inner {
        flex-direction: row;
        align-items: center;
        gap: 4px;
    }
    .actions-inner .btn-link { display: inline-flex; }
}
@media (max-width: 480px) {
    .lang {
        font-size: 12px;
        padding: 4px 7px;
    }
    .btn {
        padding: 8px 10px;
        font-size: 13px;
    }
    .btn-link, .btn-danger {
        font-size: 12px;
        padding: 5px 8px;
    }
}

.page-suggestions .sugerencias-panel {
    border: 1px solid #dbe2ea;
    background: linear-gradient(180deg, #fbfdff 0%, #ffffff 100%);
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
}
.sugerencias-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 380px);
    gap: 28px 36px;
    align-items: start;
}
.sugerencias-layout__main {
    min-width: 0;
}
.page-suggestions .sugerencias-layout__main h1 {
    margin: 0 0 12px;
    color: #0f172a;
    font-size: 34px;
    letter-spacing: -0.2px;
}
.page-suggestions .sugerencias-lead {
    margin: 0 0 18px;
    font-size: 16px;
    line-height: 1.65;
    color: #334155;
    max-width: 70ch;
}
.page-suggestions .sugerencias-block {
    margin: 0 0 14px;
    padding: 12px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #ffffff;
}
.page-suggestions .sugerencias-block h2 {
    margin: 0 0 8px;
    font-size: 20px;
    color: #1e293b;
}
.page-suggestions .sugerencias-block p {
    margin: 0;
    line-height: 1.6;
    color: #334155;
}
.page-suggestions .sugerencias-block ul {
    margin: 0;
    padding-left: 20px;
    color: #334155;
}
.page-suggestions .sugerencias-block li {
    margin: 0 0 6px;
}
.page-suggestions .sugerencias-note {
    margin-top: 10px;
    padding: 12px 14px;
    border-left: 4px solid #64748b;
    background: #f8fafc;
    color: #334155;
    border-radius: 8px;
}
.sugerencias-layout__aside {
    position: sticky;
    top: 12px;
}
.sugerencias-hero-img {
    display: block;
    width: 100%;
    max-width: 380px;
    height: auto;
    margin: 0 auto;
    border-radius: 14px;
    box-shadow:
        0 4px 6px -1px rgba(31, 122, 58, 0.08),
        0 25px 50px -12px rgba(0, 0, 0, 0.18);
    border: 1px solid #dbe2ea;
}
@media (max-width: 960px) {
    .sugerencias-layout {
        grid-template-columns: 1fr;
    }
    .sugerencias-layout__aside {
        position: static;
        max-width: 400px;
        margin: 0 auto;
        order: 1;
    }
    .sugerencias-layout__main {
        order: 0;
    }
    .page-suggestions .sugerencias-layout__main h1 {
        font-size: 28px;
    }
}

html:has(body.page-wealth-guide) {
    height: 100%;
}
body.page-wealth-guide {
    height: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}
body.page-wealth-guide > .topbar.topbar--hero {
    flex-shrink: 0;
}
.topbar--hero ~ main.page-wealth-guide-main.container {
    margin-bottom: 0;
}
.page-wealth-guide-main {
    flex: 1 1 0;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.page-wealth-guide .guia-panel {
    flex: 1 1 0;
    min-height: 0;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.page-wealth-guide .guia-layout.sugerencias-layout {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
}
.page-wealth-guide .guia-layout__main {
    flex: 1 1 0;
    min-height: 0;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.page-wealth-guide .guia-hero {
    flex-shrink: 0;
}
.page-wealth-guide .guia-panel,
.page-info .guia-panel {
    border: 1px solid rgba(27, 94, 32, 0.12);
    border-radius: 20px;
    background: #ffffff;
    box-shadow:
        0 24px 48px rgba(15, 41, 24, 0.14),
        0 8px 16px rgba(15, 23, 42, 0.06);
    overflow: hidden;
    margin-top: 0;
}
.page-wealth-guide .guia-hero,
.page-info .guia-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(140px, 220px);
    gap: 20px 28px;
    align-items: start;
    padding: 24px 28px 14px;
    border-radius: 19px 19px 0 0;
    overflow: hidden;
    border-bottom: none;

    background: linear-gradient(
        to bottom,
        #dcfce7 0%,
        #e9fbe7 30%,
        rgba(220, 252, 231, 0.95) 54%,
        rgba(236, 252, 244, 0.9) 72%,
        rgba(255, 255, 255, 0.5) 90%,
        #ffffff 100%
    );
}

.page-info .sugerencias-layout.page-info-layout--single {
    grid-template-columns: 1fr;
    gap: 0;
}
.page-info .guia-hero {
    grid-template-columns: minmax(0, 1fr) minmax(180px, 300px);
}
.page-info .page-info-sections {
    padding: 8px 24px 26px;
    background: #ffffff;
}
.page-info .page-info-sections .sugerencias-block {
    margin: 0 0 16px;
    padding: 18px 20px;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
}
.page-info .page-info-sections .sugerencias-block h2 {
    margin: 0 0 10px;
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #0f172a;
}
.page-info .page-info-sections .sugerencias-block p,
.page-info .page-info-sections .sugerencias-block ul {
    color: #475569;
}
.page-info .sugerencias-note {
    margin-top: 4px;
    padding: 18px 20px;
    border-radius: 16px;
    border: 1px solid rgba(27, 94, 32, 0.12);
    border-left: 4px solid #126f38;
    background: linear-gradient(90deg, rgba(220, 252, 231, 0.45) 0%, #f8fafc 38%, #ffffff 100%);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
}
.page-info .sugerencias-note h2 {
    color: #0f172a;
    font-weight: 800;
}
.page-info .page-info-panel {
    border: 1px solid rgba(74, 222, 128, 0.22);
    border-radius: 20px;
    background: linear-gradient(180deg, #0b1327 0%, #090f1f 100%);
    box-shadow: 0 26px 52px rgba(2, 8, 23, 0.55);
    overflow: hidden;
}
.page-info .page-info-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
    gap: 22px 28px;
    padding: 24px 26px 18px;
    border-bottom: 1px solid rgba(74, 222, 128, 0.15);
    background: linear-gradient(135deg, rgba(17, 94, 89, 0.2) 0%, rgba(10, 20, 44, 0) 55%);
}
.page-info .page-info-hero__copy h1 {
    margin: 0 0 12px;
    color: #56f06f;
    font-size: clamp(1.5rem, 3.1vw, 2rem);
    line-height: 1.2;
    font-weight: 800;
}
.page-info .page-info-hero__copy p {
    margin: 0 0 10px;
    color: #dbe7f8;
    line-height: 1.55;
}
.page-info .page-info-hero__copy p:last-child {
    margin-bottom: 0;
}
.page-info .page-info-hero__copy .page-info-hero__highlight {
    color: #facc15;
    font-weight: 800;
}
.page-info .page-info-hero__art {
    display: flex;
    align-items: center;
    justify-content: center;
}
.page-info .page-info-hero__img {
    max-width: 50%;
    margin: 0 auto;
}
.page-info .page-info-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    padding: 16px 20px 12px;
}
.page-info .page-info-card {
    border: 1px solid rgba(74, 222, 128, 0.2);
    border-radius: 14px;
    padding: 16px 16px 14px;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.92) 0%, rgba(11, 18, 35, 0.96) 100%);
    box-shadow: 0 10px 20px rgba(2, 8, 23, 0.35);
}
.page-info .page-info-card h2 {
    margin: 0 0 12px;
    color: #56f06f;
    font-size: 1.05rem;
    line-height: 1.3;
    display: flex;
    align-items: center;
    gap: 10px;
}
.page-info .page-info-title-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex: 0 0 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(8, 145, 98, 0.16);
    border: 1px solid rgba(34, 197, 94, 0.28);
    color: #56f06f;
    box-shadow: 0 8px 14px rgba(2, 6, 23, 0.35);
}
.page-info .page-info-title-icon i {
    font-size: 15px;
}
.page-info .page-info-card p {
    margin: 0 0 8px;
    color: #d1def1;
    line-height: 1.45;
}
.page-info .page-info-card .page-info-card__highlight {
    color: #86efac;
    font-weight: 700;
}
.page-info .page-info-check-list li.page-info-card__highlight--amber {
    color: #facc15;
    font-weight: 700;
}
.page-info .page-info-check-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 7px;
}
.page-info .page-info-check-list li {
    position: relative;
    padding-left: 24px;
    color: #d1def1;
    line-height: 1.4;
}
.page-info .page-info-check-list li::before {
    content: "✔";
    position: absolute;
    left: 0;
    top: 0;
    color: #22c55e;
    font-weight: 800;
}
.page-info .page-info-reminder {
    margin: 4px 20px 20px;
    border: 1px solid rgba(74, 222, 128, 0.18);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.95) 0%, rgba(11, 18, 35, 0.98) 100%);
}
.page-info .page-info-reminder h2 {
    margin: 0;
    padding: 12px 14px 8px;
    color: #facc15;
    font-size: 1.1rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.page-info .page-info-reminder__items {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid rgba(148, 163, 184, 0.22);
}
.page-info .page-info-reminder__items p {
    margin: 0;
    padding: 14px 12px 16px;
    color: #d1def1;
    line-height: 1.4;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.page-info .page-info-reminder__items p i {
    margin-top: 1px;
    color: #39e600;
    font-size: 22px;
    line-height: 1;
    width: 24px;
    text-align: center;
}
.page-info .page-info-reminder__items p span {
    display: block;
}
.page-info .page-info-reminder__items p + p {
    border-left: 1px solid rgba(148, 163, 184, 0.2);
}
.page-wealth-guide .guia-hero__copy,
.page-info .guia-hero__copy {
    min-width: 0;
}
.page-wealth-guide .guia-hero__intro,
.page-info .guia-hero__intro {
    margin-top: 12px;
}
.page-wealth-guide .guia-page-title-row,
.page-info .guia-page-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    margin: 0;
}
.page-wealth-guide .guia-page-title-row h1,
.page-info .guia-page-title-row h1 {
    margin: 0;
    color: #0f172a;
    font-size: clamp(1.5rem, 3.5vw, 2rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
}
.page-wealth-guide .guia-page-title-deco,
.page-info .guia-page-title-deco {
    width: 52px;
    line-height: 0;
    flex-shrink: 0;
}
.page-wealth-guide .guia-page-title-deco__img,
.page-info .guia-page-title-deco__img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.2));
}
.page-wealth-guide .guia-kicker {
    margin: 0 0 20px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #126f38;
    text-transform: uppercase;
}
.page-wealth-guide .guia-intro,
.page-info .guia-intro {
    margin: 0 0 12px;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-size: 15px;
    line-height: 1.65;
    color: #475569;
    max-width: 52rem;
    white-space: pre-line;
}
.page-wealth-guide .guia-intro:last-child,
.page-info .guia-intro:last-child {
    margin-bottom: 0;
}
.page-wealth-guide .guia-hero__art,
.page-info .guia-hero__art {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
}
.page-wealth-guide .guia-hero__art {
    flex-direction: column;
    justify-content: flex-start;
    gap: 12px;
}
.page-wealth-guide .guia-steps-badge--hero-art {
    flex-shrink: 0;
    text-align: center;
    max-width: 100%;
    margin-top: 2px;
}
.page-wealth-guide .guia-hero__art .guia-intro-book {
    width: 100%;
    max-width: 200px;
    height: auto;
    display: block;
    filter: drop-shadow(0 12px 28px rgba(27, 94, 32, 0.18));
}
.page-info .guia-hero__art .page-info-hero__img {
    width: 100%;
    max-width: min(300px, 42vw);
    height: auto;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 12px 28px rgba(27, 94, 32, 0.2));
}
.page-wealth-guide .guia-content-grid {
    display: grid;
    grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    gap: 20px 24px;
    align-items: stretch;
    flex: 1 1 0;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
    padding: 8px 24px 26px;
    background: #ffffff;
}
.page-wealth-guide .guia-content-grid > * {
    min-height: 0;
}
.page-wealth-guide .guia-progress-card {
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
    padding: 18px 16px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: 100%;
    align-self: stretch;
    overflow: hidden;
}
.page-wealth-guide .guia-progress-card__title {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 800;
    color: #1e293b;
    letter-spacing: 0.02em;
}
.page-wealth-guide .guia-progress-percentage {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.2em 0.35em;
    font-size: clamp(1.1rem, 2vw, 1.65rem);
    font-weight: 800;
    color: #15803d;
    line-height: 1.25;
}
.page-wealth-guide .guia-progress-percentage__num {
    font-variant-numeric: tabular-nums;
}
.page-wealth-guide .guia-progress-rocket {
    margin-left: 0;
    color: #facc15;
    font-style: normal;
}
.page-wealth-guide .guia-progress-rocket[hidden] {
    display: none;
}
.page-wealth-guide .guia-progress-track {
    height: 8px;
    border-radius: 999px;
    background: #dcfce7;
    overflow: hidden;
    margin-top: 10px;
}
.page-wealth-guide .guia-progress-fill {
    width: 0;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #22c55e 0%, #84cc16 100%);
    transition: width 0.25s ease;
}
.page-wealth-guide .guia-progress-continue {
    margin-top: 14px;
}
.page-wealth-guide .guia-continue-btn {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid rgba(202, 138, 4, 0.45);
    border-radius: 12px;
    background: linear-gradient(180deg, #fde047 0%, #facc15 55%, #eab308 100%);
    color: #0f172a;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 0.01em;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(234, 179, 8, 0.35);
    transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}
.page-wealth-guide .guia-continue-btn:hover:not(:disabled) {
    filter: brightness(1.04);
    box-shadow: 0 4px 14px rgba(234, 179, 8, 0.45);
}
.page-wealth-guide .guia-continue-btn:active:not(:disabled) {
    transform: translateY(1px);
}
.page-wealth-guide .guia-continue-btn:focus-visible {
    outline: 2px solid #facc15;
    outline-offset: 2px;
}
.page-wealth-guide .guia-continue-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}
.page-wealth-guide .guia-continue-btn__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.92);
    color: #facc15;
    font-size: 11px;
    padding-left: 2px;
}
.page-wealth-guide .guia-continue-btn__text {
    text-align: center;
    line-height: 1.2;
}
.page-wealth-guide .guia-continue-hint {
    margin: 8px 0 0;
    font-size: 11px;
    color: #94a3b8;
    text-align: center;
    font-style: italic;
    line-height: 1.4;
}
.page-wealth-guide .guia-motivation-banner {
    margin-top: 14px;
    padding: 12px 10px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(180deg, rgba(22, 101, 52, 0.22) 0%, rgba(15, 80, 45, 0.32) 100%);
    border: 1px solid rgba(74, 222, 128, 0.22);
    box-shadow: inset 0 1px 0 rgba(134, 239, 172, 0.06);
}
.page-wealth-guide .guia-motivation-banner--footer {
    flex-shrink: 0;
    margin-top: 10px;
    margin-bottom: 0;
    padding: 10px 12px;
}
.page-wealth-guide .guia-motivation-banner--footer[hidden] {
    display: none;
}
.page-wealth-guide .guia-motivation-banner--footer .guia-motivation-banner__text p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 11px;
    line-height: 1.3;
}
.page-wealth-guide .guia-motivation-banner--footer .guia-motivation-banner__star {
    font-size: 1.35rem;
}
.page-wealth-guide .guia-motivation-banner--footer .guia-motivation-banner__target {
    font-size: 1.15rem;
}
.page-wealth-guide .guia-motivation-banner__star {
    flex-shrink: 0;
    font-size: 1.6rem;
    line-height: 1;
    color: #facc15;
    filter: drop-shadow(0 0 6px rgba(250, 204, 21, 0.35));
}
.page-wealth-guide .guia-motivation-banner__text {
    flex: 1;
    min-width: 0;
}
.page-wealth-guide .guia-motivation-banner__text p {
    margin: 0;
    font-size: 11px;
    line-height: 1.35;
    color: #166534;
}
.page-wealth-guide .guia-motivation-banner__text p + p {
    margin-top: 4px;
}
.page-wealth-guide .guia-motivation-banner__text em {
    font-style: italic;
    font-weight: 600;
}
.page-wealth-guide .guia-motivation-banner__target {
    flex-shrink: 0;
    font-size: 1.35rem;
    line-height: 1;
    color: #16a34a;
}

#guiaCelebrationModal.modal-backdrop {
    z-index: 1250;
    backdrop-filter: blur(5px);
    background: rgba(2, 6, 10, 0.74);
}
#guiaCelebrationModal .guia-celebration-confetti {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}
#guiaCelebrationModal .guia-celebration-card {
    position: relative;
    z-index: 1;
    width: min(780px, calc(100vw - 26px));
    max-height: calc(100dvh - 26px);
    overflow: visible;
    border-width: 2px;
    border-color: rgba(132, 204, 22, 0.72);
    border-radius: 22px;
    background: radial-gradient(130% 130% at 50% 0%, rgba(16, 34, 27, 0.12) 0%, rgba(5, 10, 18, 0.98) 56%, rgba(3, 8, 14, 0.99) 100%) !important;
    box-shadow:
        0 22px 60px rgba(0, 0, 0, 0.62),
        0 0 0 1px rgba(34, 197, 94, 0.2),
        0 0 62px rgba(250, 204, 21, 0.3);
}
#guiaCelebrationModal .guia-celebration-card::before {
    content: none !important;
    display: none !important;
}
#guiaCelebrationModal .guia-celebration-card__close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(148, 163, 184, 0.4);
    background: rgba(3, 7, 18, 0.72);
    color: #fff;
    z-index: 3;
}
#guiaCelebrationModal .guia-celebration-card__trophy {
    position: absolute;
    left: 50%;
    top: -28px;
    transform: translateX(-50%);
    width: 112px;
    height: 112px;
    display: grid;
    place-items: center;
    background: transparent;
    border: 0;
    box-shadow: none;
    z-index: 2;
}
#guiaCelebrationModal .guia-celebration-card__trophy-img {
    width: 112px;
    height: 112px;
    object-fit: contain;
    display: block;
    filter:
        drop-shadow(0 0 6px rgba(250, 204, 21, 0.72))
        drop-shadow(0 0 14px rgba(234, 179, 8, 0.58))
        drop-shadow(0 0 28px rgba(202, 138, 4, 0.42));
}
#guiaCelebrationModal .guia-celebration-card__trophy::after {
    content: none;
}
#guiaCelebrationModal .guia-celebration-card__head {
    position: relative;
    z-index: 1;
    padding-top: 88px;
    padding-bottom: 14px;
    text-align: center;
    background: transparent !important;
    border: 0;
    box-shadow: none;
}
#guiaCelebrationModal .guia-celebration-card__title {
    margin: 0;
    font-size: clamp(2rem, 4.1vw, 3.6rem);
    line-height: 1.04;
    color: #ffffff;
    letter-spacing: -0.02em;
}
#guiaCelebrationModal .guia-celebration-card__subtitle {
    margin-top: 8px;
    font-size: clamp(1.02rem, 1.95vw, 1.5rem);
    line-height: 1.24;
    color: #ffffff;
}
#guiaCelebrationModal .guia-celebration-card__subtitle strong {
    color: #22c55e;
}
#guiaCelebrationModal .guia-celebration-card__body {
    position: relative;
    z-index: 1;
    padding-top: 6px;
    padding-bottom: 2px;
    text-align: center;
}
#guiaCelebrationModal .guia-celebration-card__status {
    margin: 0 auto 14px;
    max-width: 610px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 14px;
    padding: 11px 14px;
    background: linear-gradient(180deg, rgba(18, 36, 27, 0.85) 0%, rgba(9, 20, 16, 0.85) 100%);
    border: 1px solid rgba(74, 222, 128, 0.25);
    color: #f8fafc;
}
#guiaCelebrationModal .guia-celebration-card__status i {
    color: #22c55e;
}
#guiaCelebrationModal .guia-celebration-card__deco {
    margin: 0 0 12px;
    display: flex;
    justify-content: center;
    gap: 10px;
}
#guiaCelebrationModal .guia-celebration-card__deco span {
    width: 54px;
    height: 52px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-size: 1.55rem;
    border: 1px solid rgba(100, 116, 139, 0.4);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.88) 0%, rgba(15, 23, 42, 0.55) 100%);
}
#guiaCelebrationModal .guia-celebration-card__msg {
    margin: 0 auto;
    max-width: 740px;
    font-size: clamp(1.02rem, 1.75vw, 1.28rem);
    color: #f8fafc;
    text-align: center;
    line-height: 1.3;
}
#guiaCelebrationModal .guia-celebration-card__msg strong {
    color: #22c55e;
}
#guiaCelebrationModal .guia-celebration-card__actions {
    position: relative;
    z-index: 1;
    padding-top: 8px;
    padding-bottom: 16px;
    justify-content: center;
}
#guiaCelebrationModal .guia-celebration-card__primary {
    min-width: 320px;
    border-radius: 999px;
    background: linear-gradient(180deg, #1fd264 0%, #138b40 100%);
    border-color: rgba(167, 243, 208, 0.5);
    font-size: 1.05rem;
    font-weight: 800;
}
#guiaCelebrationModal .guia-celebration-card__primary i {
    margin-left: 10px;
}
#guiaCelebrationModal .guia-celebration-card__next {
    margin: 0 16px 14px;
    border-radius: 15px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.88) 0%, rgba(6, 12, 24, 0.93) 100%);
    overflow: hidden;
}
#guiaCelebrationModal .guia-celebration-card__next-title {
    margin: 0;
    padding: 10px 14px;
    font-weight: 800;
    color: #facc15;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}
#guiaCelebrationModal .guia-celebration-card__next-row {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
}
#guiaCelebrationModal .guia-celebration-card__next-icon {
    width: 58px;
    height: 58px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 2rem;
    background: rgba(22, 163, 74, 0.16);
    border: 1px solid rgba(74, 222, 128, 0.28);
}
#guiaCelebrationModal .guia-celebration-card__next-copy {
    min-width: 0;
}
#guiaCelebrationModal .guia-celebration-card__next-level {
    margin: 0 0 4px;
    font-size: 1.18rem;
    font-weight: 800;
    color: #22c55e;
}
#guiaCelebrationModal .guia-celebration-card__next-desc {
    margin: 0;
    color: #e2e8f0;
    line-height: 1.2;
    font-size: 0.92rem;
}
#guiaCelebrationModal .guia-celebration-card__next-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: #f8fafc;
    font-weight: 700;
    font-size: 0.9rem;
}
#guiaCelebrationModal .guia-celebration-card__next-btn {
    border: 1px solid rgba(134, 239, 172, 0.38);
    border-radius: 999px;
    padding: 10px 16px;
    background: linear-gradient(180deg, rgba(34, 197, 94, 0.28) 0%, rgba(21, 128, 61, 0.35) 100%);
    color: #f0fdf4;
    font-weight: 800;
    font-size: 1rem;
    white-space: nowrap;
    cursor: pointer;
}
#guiaCelebrationModal .guia-celebration-card__next-btn:hover {
    filter: brightness(1.08);
}
#guiaCelebrationModal .guia-confetti-piece {
    position: absolute;
    top: 0;
    border-radius: 2px;
    opacity: 0.95;
    animation-name: guia-confetti-fall;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
}
@keyframes guia-confetti-fall {
    0% {
        transform: translate3d(0, -10%, 0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translate3d(var(--guia-dx, 0), 110vh, 0) rotate(var(--guia-rot, 720deg));
        opacity: 0.3;
    }
}
@media (prefers-reduced-motion: reduce) {
    #guiaCelebrationModal .guia-confetti-piece {
        animation: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }
}
@media (max-width: 980px) {
    #guiaCelebrationModal .guia-celebration-card__next-row {
        grid-template-columns: 58px minmax(0, 1fr);
    }
    #guiaCelebrationModal .guia-celebration-card__next-meta,
    #guiaCelebrationModal .guia-celebration-card__next-btn {
        grid-column: 2;
    }
    #guiaCelebrationModal .guia-celebration-card__next-btn {
        justify-self: start;
    }
}
@media (max-width: 700px) {
    #guiaCelebrationModal .guia-celebration-card {
        width: min(96vw, 560px);
        max-height: calc(100dvh - 20px);
        overflow: auto;
    }
    #guiaCelebrationModal .guia-celebration-card__head {
        padding-top: 86px;
    }
    #guiaCelebrationModal .guia-celebration-card__trophy {
        width: 88px;
        height: 88px;
    }
    #guiaCelebrationModal .guia-celebration-card__trophy-img {
        width: 88px;
        height: 88px;
    }
    #guiaCelebrationModal .guia-celebration-card__deco span {
        width: 46px;
        height: 44px;
        font-size: 1.4rem;
    }
    #guiaCelebrationModal .guia-celebration-card__primary {
        min-width: 0;
        width: 100%;
    }
}

.page-wealth-guide .guia-progress-current {
    margin-top: 16px;
    padding: 10px 12px;
    border-radius: 12px;
    background: linear-gradient(180deg, #fffbeb 0%, #fef9c3 100%);
    border: 1px solid rgba(234, 179, 8, 0.35);
}
.page-wealth-guide .guia-progress-current__label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #a16207;
    margin-bottom: 4px;
}
.page-wealth-guide .guia-progress-current__value {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: #713f12;
    line-height: 1.35;
}
.page-wealth-guide .guia-next-levels {
    margin-top: 16px;
    border-top: 1px solid #e2e8f0;
    padding-top: 14px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
}

.page-wealth-guide .guia-next-levels,
.page-wealth-guide .guia-level:not(.guia-level--hidden) {
    scrollbar-width: thin;
    scrollbar-color: rgba(100, 116, 139, 0.42) transparent;
}
.page-wealth-guide .guia-next-levels::-webkit-scrollbar,
.page-wealth-guide .guia-level:not(.guia-level--hidden)::-webkit-scrollbar {
    width: 6px;
}
.page-wealth-guide .guia-next-levels::-webkit-scrollbar-track,
.page-wealth-guide .guia-level:not(.guia-level--hidden)::-webkit-scrollbar-track {
    background: transparent;
}
.page-wealth-guide .guia-next-levels::-webkit-scrollbar-thumb,
.page-wealth-guide .guia-level:not(.guia-level--hidden)::-webkit-scrollbar-thumb {
    background-color: rgba(100, 116, 139, 0.32);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box;
}
.page-wealth-guide .guia-next-levels::-webkit-scrollbar-thumb:hover,
.page-wealth-guide .guia-level:not(.guia-level--hidden)::-webkit-scrollbar-thumb:hover {
    background-color: rgba(71, 85, 105, 0.55);
}
.page-wealth-guide .guia-progress-card > :not(.guia-next-levels) {
    flex-shrink: 0;
}
.page-wealth-guide .guia-next-levels__title {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.page-wealth-guide .guia-next-levels ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.page-wealth-guide .guia-next-levels li {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 8px 10px;
    align-items: center;
    padding: 10px 10px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #334155;
    font-size: 14px;
}
.page-wealth-guide .guia-level-nav__badge {
    font-size: 1rem;
    line-height: 1;
}
.page-wealth-guide .guia-level-nav__name {
    font-weight: 600;
    color: #1e293b;
    min-width: 0;
}
.page-wealth-guide .guia-level-nav__status {
    font-size: 11px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 999px;
    letter-spacing: 0.03em;
    color: #64748b;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
}
.page-wealth-guide .guia-next-levels li.guia-level-nav--current {
    border-color: #fcd34d;
    background: linear-gradient(180deg, #fffbeb 0%, #fef3c7 100%);
    box-shadow: 0 2px 8px rgba(234, 179, 8, 0.15);
}
.page-wealth-guide .guia-next-levels li.guia-level-nav--current .guia-level-nav__status {
    color: #92400e;
    background: #fef08a;
    border-color: #facc15;
}
.page-wealth-guide .guia-next-levels li.guia-level-nav--done {
    border-color: #86efac;
    background: #f0fdf4;
}
.page-wealth-guide .guia-next-levels li.guia-level-nav--done .guia-level-nav__status {
    color: #166534;
    background: #bbf7d0;
    border-color: #4ade80;
}
.page-wealth-guide .guia-next-levels li.guia-level-nav--openable {
    cursor: pointer;
}
.page-wealth-guide .guia-next-levels li.guia-level-nav--openable:focus-visible {
    outline: 2px solid #16a34a;
    outline-offset: 2px;
}
.page-wealth-guide .guia-levels-area {
    min-width: 0;
    min-height: 0;
    max-height: 100%;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.page-wealth-guide .guia-steps-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.55em;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid #bbf7d0;
    color: #166534;
    background: linear-gradient(180deg, #ecfdf5 0%, #d1fae5 100%);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    box-shadow: 0 2px 6px rgba(22, 101, 52, 0.08);
}
.page-wealth-guide .guia-steps-badge__fraction span {
    font-variant-numeric: tabular-nums;
}
.page-wealth-guide .guia-level:not(.guia-level--hidden) {
    flex: 1 1 auto;
    min-height: 0;
    margin-bottom: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
}
.page-wealth-guide .guia-level {
    margin: 0 0 20px;
    padding: 20px 20px 22px;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}
.page-wealth-guide .guia-level-title {
    margin: 0 0 10px;
    font-size: 1.125rem;
    line-height: 1.35;
    font-weight: 800;
    color: #0f172a;
}
.page-wealth-guide .guia-level-hook {
    margin: 0 0 18px;
    font-size: 15px;
    font-weight: 600;
    color: #c2410c;
    padding-left: 2px;
}
.page-wealth-guide .guia-level--hidden {
    display: none;
}
.page-wealth-guide .guia-items {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.page-wealth-guide .guia-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 10px;
    row-gap: 8px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid #e5e7eb;
    background: #fafafa;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.page-wealth-guide .guia-item--done {
    background: #f0fdf4;
    border-color: #86efac;
    box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.12);
}
.page-wealth-guide .guia-item--done .guia-check-row {
    color: #166534;
}
.page-wealth-guide .guia-item--current {
    background: linear-gradient(180deg, #fff7ed 0%, #ffedd5 100%);
    border-color: #fdba74;
    box-shadow:
        0 0 0 1px rgba(251, 146, 60, 0.25),
        0 8px 20px rgba(154, 52, 18, 0.08);
}
.page-wealth-guide .guia-item--current .guia-check-row {
    color: #7c2d12;
}
.page-wealth-guide .guia-item--current .guia-note-trigger {
    border-color: #ea580c;
    color: #7c2d12;
    background: #ffffff;
}
.page-wealth-guide .guia-item--locked {
    opacity: 0.78;
}
.page-wealth-guide .guia-item--locked .guia-check-row {
    cursor: default;
    color: #64748b;
}
.page-wealth-guide .guia-item--locked .guia-check-row input[type="checkbox"] {
    cursor: not-allowed;
    opacity: 0.5;
}
.page-wealth-guide .guia-check-row {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    margin: 0;
    font-weight: 600;
    color: #334155;
    line-height: 1.4;
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
}
.page-wealth-guide .guia-check-row > span {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.page-wealth-guide .guia-check-row input[type="checkbox"] {
    flex-shrink: 0;
    width: 1.2rem;
    height: 1.2rem;
    margin-top: 0;
    accent-color: #16a34a;
    cursor: pointer;
}
.page-wealth-guide .guia-item-note {
    grid-column: 1 / -1;
    grid-row: 2;
    margin: 0;
    padding-left: calc(1.2rem + 12px);
    font-size: 14px;
    line-height: 1.55;
    color: #64748b;
    font-weight: 400;
}
.page-wealth-guide .guia-item-note[hidden] {
    display: none;
}
.page-wealth-guide .guia-note-trigger {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    justify-self: end;
    align-self: center;
    flex-shrink: 0;
    min-width: 0;
    white-space: nowrap;
    border-radius: 10px;
    font-weight: 600;
    padding: 6px 12px;
    font-size: 12px;
}
.page-wealth-guide .guia-note-trigger[hidden] {
    display: none;
}
.page-wealth-guide .guia-note-modal-text {
    margin: 0;
    color: #334155;
    line-height: 1.65;
    font-size: 15px;
}
@media (max-width: 960px) {
    .page-wealth-guide .guia-hero,
    .page-info .guia-hero {
        grid-template-columns: 1fr;
        padding: 20px 18px 12px;
    }
    .page-wealth-guide .guia-hero__art,
    .page-info .guia-hero__art {
        order: -1;
        justify-content: flex-start;
    }
    .page-wealth-guide .guia-hero__art .guia-intro-book {
        max-width: 140px;
    }
    .page-info .guia-hero__art .page-info-hero__img {
        max-width: min(220px, 58vw);
    }
    .page-info .page-info-hero {
        grid-template-columns: 1fr;
        padding: 20px 18px 14px;
    }
    .page-info .page-info-hero__art {
        justify-content: flex-start;
    }
    .page-info .page-info-cards {
        grid-template-columns: 1fr;
        padding: 14px 16px 10px;
    }
    .page-info .page-info-reminder {
        margin: 2px 16px 16px;
    }
    .page-info .page-info-reminder__items {
        grid-template-columns: 1fr;
    }
    .page-info .page-info-reminder__items p + p {
        border-left: 0;
        border-top: 1px solid rgba(148, 163, 184, 0.2);
    }

    html:has(body.page-wealth-guide) {
        height: auto;
    }
    body.page-wealth-guide {
        display: block;
        height: auto;
        min-height: 100dvh;
        max-height: none;
        overflow-x: hidden;
        overflow-y: auto;
    }
    .page-wealth-guide-main {
        display: block;
        flex: none;
        min-height: 0;
        max-height: none;
        overflow: visible;
    }
    .page-wealth-guide .guia-panel {
        display: block;
        flex: none;
        min-height: 0;
        max-height: none;
        overflow: visible;
    }
    .page-wealth-guide .guia-layout.sugerencias-layout {
        display: block;
        flex: none;
        min-height: 0;
        max-height: none;
        overflow: visible;
    }
    .page-wealth-guide .guia-layout__main {
        display: block;
        flex: none;
        min-height: 0;
        max-height: none;
        overflow: visible;
    }
    .page-wealth-guide .guia-content-grid {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        flex: none;
        min-height: 0;
        max-height: none;
        overflow: visible;
        padding: 8px 16px 22px;
    }
    .page-wealth-guide .guia-progress-card {
        position: static;
        max-height: none;
        overflow: visible;
    }
    .page-wealth-guide .guia-next-levels {
        flex: none;
        min-height: 0;
        max-height: none;
        overflow: visible;
    }
    .page-wealth-guide .guia-levels-area {
        max-height: none;
        overflow: visible;
    }
    .page-wealth-guide .guia-level:not(.guia-level--hidden) {
        flex: none;
        max-height: none;
        overflow: visible;
    }
}

.auth-page {
    min-height: 100vh;
    margin: 0;
    background: #040e0af5;
}
.auth-wrap {
    max-width: 420px;
    margin: 0 auto;
    padding: 32px 16px 48px;
}
.auth-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 24px;
}
.auth-panel h1 {
    margin: 0 0 16px;
    font-size: 1.35rem;
    font-weight: 700;
    color: #0f172a;
}
.auth-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.auth-form label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.9rem;
    color: #334155;
}
.auth-form label span {
    font-weight: 600;
}
.auth-form input {
    padding: 10px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 1rem;
    background: #fff;
}
.auth-form input:focus {
    outline: none;
    border-color: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
}
.auth-submit {
    margin-top: 4px;
    width: 100%;
    justify-content: center;
}
.auth-hint {
    margin: -4px 0 0;
    font-size: 0.8rem;
    color: #64748b;
}
.auth-caps-hint {
    display: block;
    margin: 6px 0 0;
    font-size: 0.78rem;
    font-weight: 600;
    color: #b45309;
}
.auth-caps-hint[hidden] {
    display: none !important;
}
.auth-lead {
    margin: 0 0 14px;
    font-size: 0.92rem;
    color: #475569;
    line-height: 1.45;
}
.auth-msg {
    margin: 0 0 14px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 0.9rem;
}
.auth-msg--error {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}
.auth-msg--ok {
    background: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
}
.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0;
    color: #94a3b8;
    font-size: 0.85rem;
}
.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #e2e8f0;
}
.auth-google-gmail {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid #dadce0;
    background: #fff;
    color: #3c4043;
    font-weight: 600;
    font-size: 0.98rem;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(60, 64, 67, 0.12);
    transition: background 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.auth-google-gmail i.fa-google {
    font-size: 1.25rem;
    color: #4285f4;
}
.auth-google-gmail:hover {
    background: #f8f9fa;
    border-color: #c6c9ce;
    box-shadow: 0 2px 6px rgba(60, 64, 67, 0.14);
}
.auth-oauth-buttons {
    width: 100%;
    margin-bottom: 4px;
}
.auth-oauth-buttons--grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "oauth-google oauth-apple"
        "oauth-facebook oauth-microsoft";
    gap: 8px;
    align-items: stretch;
}
.auth-oauth-buttons--grid .auth-google-gmail {
    grid-area: oauth-google;
}
.auth-oauth-buttons--grid .auth-oauth-apple {
    grid-area: oauth-apple;
}
.auth-oauth-buttons--grid .auth-oauth-facebook {
    grid-area: oauth-facebook;
}
.auth-oauth-buttons--grid .auth-oauth-ms {
    grid-area: oauth-microsoft;
}
.auth-oauth-buttons--grid > .btn {
    width: 100%;
    min-width: 0;
    font-size: 0.84rem;
    padding: 7px 8px;
    gap: 6px;
    line-height: 1.2;
}
.auth-oauth-buttons--grid > .btn i {
    font-size: 1.05rem;
    line-height: 1;
}
.auth-oauth-buttons--grid > .btn i.fa-apple {
    font-size: 1.12rem;
}
.auth-oauth-buttons--grid > .btn span {
    text-align: center;
    line-height: 1.2;
}
.auth-oauth-ms {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid #2563eb;
    background: #2563eb;
    color: #fff;
    font-weight: 600;
    font-size: 0.98rem;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(37, 99, 235, 0.35);
    transition: background 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.auth-oauth-ms i.fa-microsoft {
    font-size: 1.25rem;
}
.auth-oauth-ms:hover {
    background: #1d4ed8;
    border-color: #1d4ed8;
}
.auth-oauth-apple {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid #1f2937;
    background: #000000;
    color: #fff;
    font-weight: 600;
    font-size: 0.98rem;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    transition: background 0.15s, box-shadow 0.15s;
}
.auth-oauth-apple i.fa-apple {
    font-size: 1.35rem;
}
.auth-oauth-apple:hover {
    background: #1a1a1a;
}
.auth-oauth-facebook {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid #166fe5;
    background: #1877f2;
    color: #fff;
    font-weight: 600;
    font-size: 0.98rem;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(24, 119, 242, 0.35);
    transition: background 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.auth-oauth-facebook i.fa-facebook-f {
    font-size: 1.25rem;
}
.auth-oauth-facebook:hover {
    background: #166fe5;
    border-color: #1464d8;
}

.modal-field--category-picker > .modal-field__label {
    display: block;
    margin-bottom: 0;
}
.category-picker-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
    max-width: 100%;
    min-height: 0;
}
.category-picker-row__combo {
    flex: 1 1 auto;
    min-width: 0;
}
.category-picker-row__select {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 260px;
    min-height: 42px;
    align-self: stretch;
}
.edit-expense-modal--readonly .category-quick-add-btn--icon {
    display: none !important;
}
.edit-expense-modal--readonly .category-picker-row__select {
    max-width: 100%;
}
body.page-income #incomeModal.income-modal--readonly.modal-backdrop--drawer .category-quick-add-btn--icon {
    display: none !important;
}
body.page-income #incomeModal.income-modal--readonly.modal-backdrop--drawer .modal-field--category-picker .category-picker-row__select {
    max-width: 100%;
}
.category-quick-add-btn--icon {
    flex: 0 0 42px;
    width: 42px;
    min-width: 42px;
    height: 42px;
    padding: 0;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, #1f7a3a 32%, #cbd5e1);
    background: linear-gradient(180deg, #f8faf9 0%, #eef7f0 100%);
    color: #15803d;
    cursor: pointer;
    font-size: 1.2rem;
    line-height: 1;
    text-decoration: none;
}
.category-quick-add-btn--icon:hover {
    border-color: #1f7a3a;
    background: #fff;
    color: #0b6030;
}
.category-quick-add-btn--icon:focus-visible {
    outline: 2px solid #1f7a3a;
    outline-offset: 2px;
}
@media (max-width: 520px) {
    .category-picker-row__select {
        max-width: none;
    }
}

.modal-popup-nuevo {
    z-index: 10060;
}

#modalPopupNuevo.modal-backdrop--drawer {
    flex-direction: row;
    justify-content: flex-end;
    align-items: stretch;
    padding: 0;
    padding-top: env(safe-area-inset-top, 0px);
}
#modalPopupNuevo.modal-backdrop--drawer .modal-popup-nuevo__scrim {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    align-self: stretch;
    cursor: pointer;
}
#modalPopupNuevo.modal-backdrop--drawer .modal-app-shell.auth-login-shell {
    flex: 0 0 auto;
    width: min(100vw, 560px);
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transform: translateX(100%);
    transform-origin: right center;
}
#modalPopupNuevo.modal-backdrop--drawer.open > .modal-app-shell.auth-login-shell {
    animation: expense-edit-drawer-slide-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
#modalPopupNuevo.modal-backdrop--drawer.open.is-closing > .modal-app-shell.auth-login-shell {
    animation: expense-edit-drawer-slide-out 0.32s cubic-bezier(0.55, 0.06, 0.68, 0.19) forwards;
}
#modalPopupNuevo.modal-backdrop--drawer .auth-login-card-inner.modal-app-shell__card {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    max-height: none;
    height: 100%;
    border-radius: 14px 0 0 14px;
    overflow: hidden;
}
#modalPopupNuevo.modal-backdrop--drawer .modal-card.modal-card--in-app-shell {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
#modalPopupNuevo.modal-backdrop--drawer .modal-card__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

body.page-budgets #modalPopupNuevo.modal-backdrop.modal-popup-nuevo {
    background: rgba(8, 16, 11, 0.58);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
body.page-budgets #modalPopupNuevo.modal-backdrop--drawer .auth-login-card-inner.modal-app-shell__card {
    border: 1px solid var(--rm-border-soft);
    border-left: 4px solid #4ade80;
    background: linear-gradient(180deg, #1a1a1f 0%, #141418 100%);
    box-shadow:
        -14px 0 44px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(0, 0, 0, 0.28);
}

body.page-budgets #modalPopupNuevo.modal-backdrop--drawer .auth-login-card-inner.modal-app-shell__card::before {
    content: none;
}
body.page-budgets #modalPopupNuevo.modal-backdrop--drawer .modal-app-shell.auth-login-shell .auth-modal__close {
    top: 10px;
    right: 12px;
    left: auto;
    border: 1px solid #166534;
    background: linear-gradient(180deg, #1e3a2a 0%, #152a1c 100%);
    color: #bbf7d0;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 1px 2px rgba(0, 0, 0, 0.22);
    opacity: 1;
}
body.page-budgets #modalPopupNuevo.modal-backdrop--drawer .modal-app-shell.auth-login-shell .auth-modal__close:hover {
    border-color: #22c55e;
    color: #fff;
    background: linear-gradient(180deg, #225a3a 0%, #183828 100%);
}
body.page-budgets #modalPopupNuevo.modal-backdrop--drawer .modal-app-shell .auth-login-card-inner .modal-card.modal-card--in-app-shell .modal-card__head {
    background: linear-gradient(180deg, #1f2520 0%, #161a18 100%);
    border-radius: 14px 0 0 0;
    border-bottom: 4px solid rgba(74, 222, 128, 0.55);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.22);
    padding: 14px 52px 14px 18px;
    border-top: none;
}
body.page-budgets #modalPopupNuevo.modal-backdrop--drawer .modal-card__title {
    color: #bbf7d0;
    font-size: 1.125rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
}
body.page-budgets #modalPopupNuevo.modal-backdrop--drawer .modal-popup-nuevo__hint {
    color: #94a3b8;
}
body.page-budgets #modalPopupNuevo.modal-backdrop--drawer .modal-card__body {
    background: linear-gradient(180deg, #18181d 0%, #141418 100%);
    padding: 16px 18px 18px;
}
body.page-budgets #modalPopupNuevo.modal-backdrop--drawer .modal-field__label {
    color: #94a3b8;
}
body.page-budgets #modalPopupNuevo.modal-backdrop--drawer .modal-popup-nuevo__budget-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
}
@media (max-width: 420px) {
    body.page-budgets #modalPopupNuevo.modal-backdrop--drawer .modal-popup-nuevo__budget-row {
        grid-template-columns: minmax(0, 1fr);
    }
}
body.page-budgets #modalPopupNuevo.modal-backdrop--drawer .modal-currency-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-width: 0;
}
body.page-budgets #modalPopupNuevo.modal-backdrop--drawer .modal-currency-row__flag {
    flex-shrink: 0;
    width: 24px;
    height: 18px;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
}
body.page-budgets #modalPopupNuevo.modal-backdrop--drawer .modal-currency-row__select {
    flex: 1 1 auto;
    min-width: 0;
}
body.page-budgets #modalPopupNuevo.modal-backdrop--drawer .modal-grid input,
body.page-budgets #modalPopupNuevo.modal-backdrop--drawer .modal-grid .modal-field__select,
body.page-budgets #modalPopupNuevo.modal-backdrop--drawer .category-icon-combo__btn {
    border-color: var(--rm-border-soft);
    background: #1e1e24;
    color: var(--rm-text);
}
body.page-budgets #modalPopupNuevo.modal-backdrop--drawer .modal-grid input:focus,
body.page-budgets #modalPopupNuevo.modal-backdrop--drawer .modal-grid .modal-field__select:focus,
body.page-budgets #modalPopupNuevo.modal-backdrop--drawer .category-icon-combo__btn:focus {
    border-color: #22c55e;
    box-shadow: 0 0 0 3px color-mix(in srgb, #22c55e 22%, transparent);
}
body.page-budgets #modalPopupNuevo.modal-backdrop--drawer #modalPopupNuevoParentGroup:disabled {
    opacity: 0.92;
    cursor: not-allowed;
    color: #cbd5e1;
}
body.page-budgets #modalPopupNuevo.modal-backdrop--drawer .modal-grid input::placeholder {
    color: #71717a;
}
body.page-budgets #modalPopupNuevo.modal-backdrop--drawer .category-icon-combo__text {
    color: var(--rm-text);
}
body.page-budgets #modalPopupNuevo.modal-backdrop--drawer .category-icon-combo__caret {
    border-top-color: #94a3b8;
}
body.page-budgets #modalPopupNuevo.modal-backdrop--drawer .category-icon-combo__list {
    background: #1a1a1f;
    border: 1px solid var(--rm-border-soft);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
}
body.page-budgets #modalPopupNuevo.modal-backdrop--drawer .category-icon-combo__option {
    color: #e4e4e7;
}
body.page-budgets #modalPopupNuevo.modal-backdrop--drawer .category-icon-combo__option:hover,
body.page-budgets #modalPopupNuevo.modal-backdrop--drawer .category-icon-combo__option[aria-selected="true"] {
    background: rgba(74, 222, 128, 0.12);
}
body.page-budgets #modalPopupNuevo.modal-backdrop--drawer .modal-error {
    color: #fecaca;
    background: rgba(127, 29, 29, 0.38);
    border-color: rgba(248, 113, 113, 0.45);
}
body.page-budgets #modalPopupNuevo.modal-backdrop--drawer .modal-actions {
    border-top: 1px solid rgba(74, 222, 128, 0.14);
    margin-top: 16px;
    padding-top: 14px;
}
body.page-budgets #modalPopupNuevo.modal-backdrop--drawer .btn-modal-primary {
    border: 1px solid rgba(74, 222, 128, 0.42);
    background: linear-gradient(180deg, #22a34d 0%, #17703a 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 4px 16px rgba(0, 0, 0, 0.35);
    color: #fff;
}
body.page-budgets #modalPopupNuevo.modal-backdrop--drawer .btn-modal-primary:hover {
    background: linear-gradient(180deg, #2abf5a 0%, #1a853f 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        0 6px 18px rgba(0, 0, 0, 0.4);
}
body.page-budgets #modalPopupNuevo.modal-backdrop--drawer .btn-modal-secondary {
    border: 2px solid rgba(74, 222, 128, 0.38);
    background: rgba(22, 40, 30, 0.65);
    color: #bbf7d0;
}
body.page-budgets #modalPopupNuevo.modal-backdrop--drawer .btn-modal-secondary:hover {
    border-color: #4ade80;
    background: rgba(34, 90, 58, 0.55);
    color: #fff;
}

#modalPopupNuevo .modal-app-shell.auth-login-shell,
#subcategoryQuickAddModal .modal-app-shell.auth-login-shell {
    width: min(520px, 100%);
}
#modalPopupNuevo .modal-card__body .modal-grid.modal-popup-nuevo__grid,
#subcategoryQuickAddModal .modal-card__body .modal-grid {
    gap: 12px;
}
.auth-footer {
    margin: 20px 0 0;
    text-align: center;
    font-size: 0.95rem;
    color: #64748b;
}
.auth-footer a {
    color: #15803d;
    font-weight: 600;
    text-decoration: none;
}
.auth-footer a:hover {
    text-decoration: underline;
}

.auth-page--landing {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    --auth-landing-pad-left: max(clamp(18px, 3.8vw, 36px), env(safe-area-inset-left, 0px));
    --auth-landing-pad-right: max(clamp(18px, 3.8vw, 36px), env(safe-area-inset-right, 0px));
    padding-top: max(10px, env(safe-area-inset-top, 0px));
    padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
    padding-left: var(--auth-landing-pad-left);
    padding-right: var(--auth-landing-pad-right);
    color: #e2e8f0;
    --auth-landing-bg-top: calc(max(10px, env(safe-area-inset-top, 0px)) + 72px);
    --auth-landing-green: #56f06f;
    --auth-landing-green-rgb: 86, 240, 111;

    --auth-landing-logo-gold: #e6a800;
    --auth-landing-logo-gold-rgb: 230, 168, 0;
}
.auth-landing-frame {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    width: 100%;
    border: 1px solid rgba(26, 46, 34, 0.98);
    border-radius: 14px;
    overflow: hidden;
    background: #030806;
    box-shadow:
        0 0 0 1px rgba(var(--auth-landing-green-rgb), 0.18),
        0 28px 70px rgba(0, 0, 0, 0.5);
}
body.auth-page--landing .auth-landing-frame > .topbar--hero.topbar--hero-login {

    padding-top: calc(var(--topbar-bar-h) + var(--topbar-hero-reserve-extra));
    flex-shrink: 0;

    background: transparent;
}

body.auth-page--landing .auth-landing-frame .topbar--hero-login .topbar-bar {
    position: fixed !important;
    top: max(10px, env(safe-area-inset-top, 0px));
    left: var(--auth-landing-pad-left);
    right: var(--auth-landing-pad-right);
    width: auto;
    max-width: none;
    z-index: 1100;
    box-sizing: border-box;

    min-height: var(--topbar-bar-h);
}
body.auth-page--landing .auth-landing-frame .topbar--hero .topbar-bar::before {
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-top: none;

    border-top-left-radius: 13px;
    border-top-right-radius: 13px;
}
body.auth-page--landing .topbar--hero-login .topbar-bar::before {
    background:
        repeating-linear-gradient(
            0deg,
            rgba(255, 255, 255, 0.018) 0px,
            rgba(255, 255, 255, 0.018) 1px,
            transparent 1px,
            transparent 3px
        ),
        linear-gradient(180deg, rgba(5, 10, 7, 0.92) 0%, rgba(4, 22, 14, 0.86) 100%);
    border-color: rgba(var(--auth-landing-green-rgb), 0.32);
    box-shadow:
        inset 0 -1px 0 rgba(255, 255, 255, 0.04),
        0 6px 28px rgba(0, 0, 0, 0.42);
}

@media (max-width: 640px) {
    body.auth-page--landing {
        --auth-landing-bg-top: calc(env(safe-area-inset-top, 0px) + 58px);
    }
    body.auth-page--landing .topbar--hero.topbar--hero-login {
        --topbar-bar-h: 56px;
        overflow-x: visible;
    }
    body.auth-page--landing .topbar--hero.topbar--hero-login .topbar-bar {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        column-gap: 10px;
        min-height: 52px;
        padding-top: max(8px, env(safe-area-inset-top, 0px));
        padding-bottom: 10px;
        overflow-x: visible;
    }
    body.auth-page--landing .topbar--hero-login .topbar-bar .brand {
        grid-column: 1;
        justify-self: start;
        margin: 0;
    }
    body.auth-page--landing .topbar--hero-login .topbar-bar__right.topbar-bar__right--login-only {
        display: flex;
        grid-column: 2;
        justify-self: end;
        align-self: center;
        margin: 0;
    }
    body.auth-page--landing .topbar--hero-login .auth-landing-nav {
        gap: 8px;
    }
    body.auth-page--landing .topbar--hero .topbar-bar__right--login-only .auth-landing-nav > a {
        position: relative;
        padding: 10px 11px;
        min-width: 44px;
        min-height: 44px;
        box-sizing: border-box;
    }
    body.auth-page--landing .topbar--hero .topbar-bar__right--login-only .auth-landing-nav__link-icon {
        font-size: 1.12rem;
    }
    body.auth-page--landing .topbar--hero-login .auth-landing-nav .auth-landing-nav__label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
    body.auth-page--landing .auth-landing-hero-auth {
        display: none;
    }
    body.auth-page--landing .auth-landing-frame .auth-landing-hero {
        background-position: 80% 0%;
    }
}

.auth-landing-header {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: nowrap;
    padding: 12px max(16px, env(safe-area-inset-right)) 12px max(16px, env(safe-area-inset-left));
    padding-top: max(12px, env(safe-area-inset-top));
    border-bottom: none;
    background:
        radial-gradient(circle at 72% 36%, rgba(168, 239, 93, 0.35) 0, rgba(168, 239, 93, 0) 42%),
        linear-gradient(180deg, #0f7a3a 0%, #0b6030 100%);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14);
}

.auth-landing-home {
    text-decoration: none;
    color: inherit;
    flex: 0 0 auto;
    width: fit-content;
    max-width: min(100%, 280px);
    align-self: center;
}
.auth-landing-home .brand-logotipo {
    height: 38px;
    width: auto;
    max-width: min(260px, 72vw);
    object-fit: contain;
}
.auth-landing-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
    justify-content: flex-end;
    flex-shrink: 0;
}
.auth-landing-nav__ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--auth-landing-green) 58%, #052e16);
    color: #ffffff;
    background: linear-gradient(180deg, #159a4f 0%, #0a5a2e 100%);
    box-shadow: 0 2px 12px rgba(11, 96, 48, 0.42);
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease, filter 0.15s ease;
}
.auth-landing-nav__ghost .auth-landing-nav__link-icon {
    color: #ffffff;
}
.auth-landing-nav__ghost:hover {
    background: linear-gradient(180deg, #18b05c 0%, #0c6a38 100%);
    border-color: color-mix(in srgb, var(--auth-landing-green) 72%, #052e16);
    filter: brightness(1.04);
}
.auth-landing-nav__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 16px;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    color: var(--rm-cta-auth-text);
    background: var(--rm-cta-login-gradient);
    box-shadow: 0 2px 14px rgba(234, 179, 8, 0.38);
    border: 1px solid var(--rm-gold-active-border);
    transition: filter 0.15s ease, transform 0.15s ease;
}
.auth-landing-nav__cta:hover {
    filter: brightness(1.06);
}
.auth-landing-nav__cta--register {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.auth-landing-nav__link-icon {
    flex-shrink: 0;
    font-size: 0.95rem;
    line-height: 1;
}
.auth-landing-nav__cta--register .auth-landing-nav__link-icon {
    font-size: 0.95rem;
}
body.auth-page--landing .auth-landing-frame .auth-landing-body {
    position: relative;
    isolation: isolate;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    max-width: none;
    overflow: hidden;
}
.auth-landing-body {
    position: relative;
    isolation: isolate;
    box-sizing: border-box;
    min-height: 100svh;
    max-width: 100vw;
    overflow-x: clip;
}
.auth-landing-hero-shell {
    position: relative;
    z-index: 1;
    max-width: 1320px;
    margin: 0 auto;
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    padding: clamp(36px, 7vw, 64px) 0 0;
    min-height: calc(100svh - var(--auth-landing-bg-top));
}
body.auth-page--landing .auth-landing-frame .auth-landing-hero-shell {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-width: none;
    margin: 0;
    padding: 0;
}
.auth-landing-hero {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
    min-height: calc(100svh - var(--auth-landing-bg-top) - clamp(36px, 7vw, 64px));
    max-width: none;
    margin: 0;
    padding: 0;
}
body.auth-page--landing .auth-landing-frame .auth-landing-hero {
    display: flex;
    flex-direction: column;
    position: relative;
    flex: 1 1 auto;
    min-height: min(620px, calc(100dvh - 200px));
    background-color: #050a08;
    background-image: var(--auth-landing-hero-bg, none);
    background-size: cover;
    background-position: 56% 22%;
    background-repeat: no-repeat;
}

@media (min-width: 901px) {
    body.auth-page--landing .auth-landing-frame .auth-landing-hero {
        min-height: min(480px, calc(88dvh - 170px));
    }
}

body.auth-page--landing .auth-landing-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    justify-content: stretch;
    gap: 0;
    width: 100%;
    box-sizing: border-box;
    flex: 1 1 auto;
    min-height: 0;
    padding: clamp(22px, 3.2vw, 32px) clamp(10px, 2.8vw, 40px) clamp(28px, 4vw, 48px) clamp(8px, 1.8vw, 28px);
    position: relative;
    z-index: 1;
}

body.auth-page--landing .auth-landing-frame .auth-landing-hero-shell .auth-landing-hero .auth-landing-hero-grid > .auth-landing-copy {
    max-width: min(1180px, 96vw);
    width: 100%;
}
body.auth-page--landing .auth-landing-frame .auth-landing-hero-grid > .auth-landing-copy {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    margin-left: 0;
}
body.auth-page--landing .auth-landing-feature-pair {
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 1.4vw, 16px);
    min-height: 0;
    margin-top: clamp(2px, 0.6vw, 8px);
}

body.auth-page--landing .auth-landing-dual-features {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(18px, 2.8vw, 36px);
    align-items: start;
}
body.auth-page--landing .auth-landing-dual-features__col {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

body.auth-page--landing .auth-landing-title--column {
    margin: 0 0 10px;
    font-size: clamp(1.52rem, 2.55vw, 2.38rem);
    line-height: 1.08;
}
body.auth-page--landing .auth-landing-dual-features__col--green .auth-landing-lead {
    margin: 0 0 12px;
    font-size: clamp(0.95rem, 1.35vw, 1.12rem);
    line-height: 1.48;
}
body.auth-page--landing .auth-landing-gold-lead {
    margin: 0 0 12px;
    font-size: clamp(0.95rem, 1.35vw, 1.12rem);
    line-height: 1.48;
    color: #cbd5e1;
    font-weight: 500;
}
body.auth-page--landing .auth-landing-gold-lead strong {
    font-weight: 700;
    color: #f8fafc;
}

body.auth-page--landing .auth-landing-dual-features .auth-landing-features,
body.auth-page--landing .auth-landing-dual-features .auth-landing-value-card__list {
    margin-bottom: 0;
    gap: 10px;
}
body.auth-page--landing .auth-landing-dual-features .auth-landing-features > li {
    gap: 10px;
    padding: 10px 11px;
    border-radius: 12px;
}
body.auth-page--landing .auth-landing-dual-features .auth-landing-features__icon {
    width: 42px;
    height: 42px;
    font-size: 1rem;
}
body.auth-page--landing .auth-landing-dual-features .auth-landing-features__body {
    gap: 2px;
}
body.auth-page--landing .auth-landing-dual-features .auth-landing-features__title {
    font-size: 0.98rem;
    line-height: 1.25;
}
body.auth-page--landing .auth-landing-dual-features .auth-landing-features__sub {
    font-size: 0.87rem;
    line-height: 1.38;
}
body.auth-page--landing .auth-landing-dual-features .auth-landing-value-card__item {
    gap: 10px;
    padding: 10px 11px;
    border-radius: 12px;
}
body.auth-page--landing .auth-landing-dual-features .auth-landing-value-card__icon {
    width: 42px;
    height: 42px;
    font-size: 1rem;
}
body.auth-page--landing .auth-landing-dual-features .auth-landing-value-card__body {
    gap: 2px;
}
body.auth-page--landing .auth-landing-dual-features .auth-landing-value-card__title {
    font-size: 0.98rem;
    line-height: 1.25;
}
body.auth-page--landing .auth-landing-dual-features .auth-landing-value-card__sub {
    font-size: 0.87rem;
    line-height: 1.38;
}
body.auth-page--landing .auth-landing-dual-foot .auth-landing-trust,
body.auth-page--landing .auth-landing-dual-foot .auth-landing-value-card__footer {
    padding: 12px 14px;
    font-size: 0.91rem;
    line-height: 1.4;
}
body.auth-page--landing .auth-landing-dual-foot .auth-landing-value-card__footer {
    font-weight: 400;
}
body.auth-page--landing .auth-landing-dual-foot .auth-landing-trust .fa-lock,
body.auth-page--landing .auth-landing-dual-foot .auth-landing-value-card__footer-icon {
    font-size: 1.06rem;
}
body.auth-page--landing .auth-landing-dual-foot {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(12px, 2vw, 26px);
    align-items: stretch;
    margin-top: clamp(2px, 0.8vw, 8px);
}

body.auth-page--landing .auth-landing-trust--footer-mobile {
    display: none;
}
body.auth-page--landing .auth-landing-value-card__footer--mobile {
    display: none;
}

body.auth-page--landing .auth-landing-cta-below {
    display: flex;
    justify-content: center;
    margin-top: clamp(18px, 2.5vw, 28px);
    width: 100%;
}
body.auth-page--landing .auth-landing-cta-below .auth-landing-freedom-cta {
    width: 100%;
    max-width: min(520px, 100%);
}
.auth-landing-hero-shell .auth-landing-copy {
    flex: 0 1 min(520px, 94vw);
    width: 100%;
    max-width: min(520px, 94vw);
    margin-right: auto;
    padding: clamp(18px, 2.5vw, 28px);
}
body.auth-page--landing .auth-landing-frame .auth-landing-hero-shell .auth-landing-copy {
    flex: unset;
    width: auto;
    max-width: min(560px, 92vw);
    margin: 0;
    margin-left: clamp(8px, 2.2vw, 36px);
    align-self: stretch;
}
body.auth-page--landing .auth-landing-hero-grid .auth-landing-copy {
    max-width: none;
}

body.auth-page--landing .auth-landing-hero-auth {
    display: none;
}
.auth-landing-hero-shell .auth-landing-aside {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    padding-left: 0;
    align-self: stretch;
}
.auth-landing-visual {
    position: relative;
    min-height: 280px;
    background: #010604;
    overflow: hidden;
}
body.auth-page--landing .auth-landing-frame .auth-landing-visual {
    min-height: 0;
}
.auth-landing-visual__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 52% 22%;
    display: block;
}
.auth-landing-aside--modals-only {
    display: flex;
    flex-direction: column;
}
.auth-landing-copy {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    min-height: 0;
    position: relative;
    z-index: 1;
    border-radius: 16px;
    width: 100%;
    min-width: 0;
    background: linear-gradient(180deg, rgba(18, 24, 21, 0.55) 0%, rgba(8, 12, 10, 0.72) 100%);
    border: 1px solid color-mix(in srgb, var(--auth-landing-green) 22%, transparent);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35) inset;
    backdrop-filter: blur(10px);
}
body.auth-page--landing .auth-landing-frame .auth-landing-copy {
    position: relative;
    z-index: 1;
    border-radius: 0;
    border: none;
    box-shadow: none;
    backdrop-filter: none;

    background: linear-gradient(
        100deg,
        rgba(2, 8, 6, 0.88) 0%,
        rgba(2, 8, 6, 0.52) 38%,
        rgba(2, 8, 6, 0.22) 68%,
        rgba(2, 8, 6, 0.05) 100%
    );
    padding: clamp(22px, 3.2vw, 40px) clamp(14px, 2.6vw, 32px) clamp(28px, 4vw, 48px) clamp(10px, 2vw, 26px);
}
.auth-landing-eyebrow {
    margin: 0 0 16px;
    padding: 0;
    line-height: 0;
}
.auth-landing-eyebrow__pill {
    display: inline-block;
    padding: 7px 14px;
    border-radius: 8px;
    border: none;
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: none;
    color: var(--auth-landing-green);
    background: rgba(5, 46, 22, 0.72);
    line-height: 1.3;
}
.auth-landing-title {
    margin: 0 0 18px;
    font-size: clamp(1.85rem, 4.2vw, 2.85rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.03em;
}
.auth-landing-title__line {
    display: block;
}
.auth-landing-title__line--white {
    color: #fafafa;
}
.auth-landing-title__line--green {
    color: var(--auth-landing-green);
}
.auth-landing-lead {
    margin: 0 0 22px;
    font-size: 1.02rem;
    line-height: 1.55;
    color: #cbd5e1;
}
.auth-landing-lead strong {
    color: #f1f5f9;
    font-weight: 700;
}
.auth-landing-features {
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.auth-landing-features > li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.auth-landing-features__icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(
        145deg,
        color-mix(in srgb, var(--auth-landing-green) 42%, transparent) 0%,
        color-mix(in srgb, var(--auth-landing-green) 22%, #052e16) 100%
    );
    color: var(--auth-landing-green);
    font-size: 1.05rem;
}
.auth-landing-features__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.auth-landing-features__title {
    font-size: 0.98rem;
    font-weight: 700;
    color: #f1f5f9;
    line-height: 1.3;
}
.auth-landing-features__sub {
    font-size: 0.86rem;
    line-height: 1.45;
    color: #94a3b8;
}
.auth-landing-trust {
    margin: 0;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--auth-landing-green) 42%, transparent);
    background: color-mix(in srgb, var(--auth-landing-green) 8%, transparent);
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--auth-landing-green);
}
.auth-landing-trust .fa-shield-halved,
.auth-landing-trust .fa-lock {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--auth-landing-green);
    font-size: 1.1rem;
}
.auth-landing-trust strong {
    color: var(--auth-landing-green);
    font-weight: 700;
}
.auth-landing-copy-cta {
    margin-top: 14px;
    display: flex;
    justify-content: stretch;
}
.auth-landing-copy-cta .auth-landing-scrollcta {
    width: 100%;
    max-width: none;
}
.auth-landing-hero-cta-row {
    margin-top: 18px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    width: 100%;
}

body.auth-page--landing .auth-landing-hero-legend--aside {
    position: absolute;
    z-index: 2;
    right: clamp(8px, 3.2vw, 44px);
    top: 80%;
    transform: translateY(-50%);
    width: min(248px, 34vw);
    min-width: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    pointer-events: auto;
    background: #00000085;
    border-radius: 12px;
    padding: clamp(6px, 1vw, 10px) clamp(8px, 1.2vw, 12px);
}
@media (max-width: 901px) {
    body.auth-page--landing .auth-landing-hero-legend--aside {
        display: none;
    }
}
body.auth-page--landing .auth-landing-hero-legend--aside .auth-landing-hero-legend__rule {
    display: block;
    width: 100%;
    max-width: 132px;
    height: 1px;
    margin-left: auto;
    margin-right: auto;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(var(--auth-landing-logo-gold-rgb), 0.35),
        rgba(var(--auth-landing-logo-gold-rgb), 0.92),
        var(--auth-landing-logo-gold),
        rgba(var(--auth-landing-logo-gold-rgb), 0.92),
        rgba(var(--auth-landing-logo-gold-rgb), 0.35),
        transparent
    );
    border-radius: 1px;
    box-shadow: 0 0 10px rgba(var(--auth-landing-logo-gold-rgb), 0.22);
}
body.auth-page--landing .auth-landing-hero-legend--aside > .auth-landing-hero-legend__rule:last-child {
    background: linear-gradient(
        90deg,
        transparent,
        rgba(var(--auth-landing-logo-gold-rgb), 0.35),
        rgba(var(--auth-landing-logo-gold-rgb), 0.92),
        var(--auth-landing-logo-gold),
        rgba(var(--auth-landing-logo-gold-rgb), 0.92),
        rgba(var(--auth-landing-logo-gold-rgb), 0.35),
        transparent
    );
}
body.auth-page--landing .auth-landing-hero-legend--aside .auth-landing-hero-legend__text {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-weight: 600;
    line-height: 1.32;
    letter-spacing: 0.01em;
    color: #cbd5e1;
    text-align: center;
    user-select: text;
}
body.auth-page--landing .auth-landing-hero-legend--aside .auth-landing-hero-legend__line1 {
    font-size: clamp(0.65rem, 1.05vw, 0.78rem);
    color: rgba(248, 250, 252, 0.92);
}
body.auth-page--landing .auth-landing-hero-legend--aside .auth-landing-hero-legend__line2 {
    font-size: clamp(0.68rem, 1.12vw, 0.82rem);
    font-weight: 600;
    color: #f1f5f9;
}
body.auth-page--landing .auth-landing-hero-legend--aside .auth-landing-hero-legend__brand {
    display: inline;
    font-weight: 800;
    font-size: clamp(0.95em, 1.35vw, 1.08em);
    letter-spacing: -0.02em;
}
body.auth-page--landing .auth-landing-hero-legend--aside .auth-landing-hero-legend__rich {
    color: var(--auth-landing-green);
    text-shadow:
        0 0 16px color-mix(in srgb, var(--auth-landing-green) 38%, transparent),
        0 0 28px color-mix(in srgb, var(--auth-landing-green) 14%, transparent);
}
body.auth-page--landing .auth-landing-hero-legend--aside .auth-landing-hero-legend__mind {
    color: var(--auth-landing-logo-gold);
    text-shadow:
        0 0 14px rgba(var(--auth-landing-logo-gold-rgb), 0.35),
        0 0 22px rgba(var(--auth-landing-logo-gold-rgb), 0.12);
}
.auth-landing-about {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    margin: clamp(14px, 2.2vw, 22px) 0 0;
    padding: 0;
    background: transparent;
    border: 0;
    z-index: 1;
}
.auth-landing-about__inner {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: clamp(4px, 0.8vw, 8px) 0;
    box-sizing: border-box;
}
.auth-landing-about__title {
    margin: 0 0 6px;
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: clamp(1rem, 1.5vw, 1.35rem);
    font-weight: 800;
    letter-spacing: -0.015em;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
.auth-landing-about__text {
    margin: 0;
    display: block;
    width: 100%;
    max-width: none;
    padding: clamp(6px, 1vw, 10px) clamp(10px, 1.6vw, 14px);
    font-size: clamp(0.85rem, 1.02vw, 0.96rem);
    line-height: 1.35;
    color: #fff;
    background: #00000085;
    border-radius: 12px;
    text-wrap: pretty;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.auth-landing-about__text strong {
    color: #f8fafc;
    font-weight: 700;
}

body.auth-page--landing .auth-landing-value-card__head {
    margin: 0 0 22px;
    padding: 0;
    border: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    text-align: left;
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    line-height: 1.1;
    letter-spacing: -0.03em;
}
body.auth-page--landing .auth-landing-value-card__head-line {
    display: block;
    font-size: clamp(1.55rem, 3.4vw, 2.35rem);
    font-weight: 800;
}
body.auth-page--landing .auth-landing-value-card__head-line--white {
    color: #fafafa;
}
body.auth-page--landing .auth-landing-value-card__head-line--gold {
    color: var(--auth-landing-logo-gold);
    font-weight: 800;
    text-shadow:
        0 0 18px rgba(var(--auth-landing-logo-gold-rgb), 0.38),
        0 0 34px rgba(var(--auth-landing-logo-gold-rgb), 0.14);
}

body.auth-page--landing .auth-landing-value-card__head.auth-landing-value-card__head--column {
    margin: 0 0 10px;
    gap: 2px;
}
body.auth-page--landing .auth-landing-value-card__head.auth-landing-value-card__head--column .auth-landing-value-card__head-line {
    font-size: clamp(1.52rem, 2.55vw, 2.38rem);
    line-height: 1.08;
}
body.auth-page--landing .auth-landing-value-card__list {
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
body.auth-page--landing .auth-landing-value-card__item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.06);
}
body.auth-page--landing .auth-landing-value-card__icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(
        145deg,
        color-mix(in srgb, var(--auth-landing-logo-gold) 52%, transparent) 0%,
        color-mix(in srgb, var(--auth-landing-logo-gold) 22%, #2d1f08) 100%
    );
    color: var(--auth-landing-logo-gold);
    font-size: 1.05rem;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.22) inset;
}
body.auth-page--landing .auth-landing-value-card__icon i {
    filter: drop-shadow(0 0 5px rgba(var(--auth-landing-logo-gold-rgb), 0.4));
}
body.auth-page--landing .auth-landing-value-card__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1 1 auto;
}
body.auth-page--landing .auth-landing-value-card__chev {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
    color: var(--auth-landing-logo-gold);
    font-size: 0.85rem;
    opacity: 0.88;
    filter: drop-shadow(0 0 6px rgba(var(--auth-landing-logo-gold-rgb), 0.35));
}
body.auth-page--landing .auth-landing-value-card__title {
    font-size: 0.98rem;
    font-weight: 700;
    color: #f1f5f9;
    line-height: 1.3;
}
body.auth-page--landing .auth-landing-value-card__sub {
    font-size: 0.86rem;
    line-height: 1.45;
    color: #94a3b8;
}
body.auth-page--landing .auth-landing-value-card__footer:not(.auth-landing-value-card__footer--mobile) {
    margin: 0;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--auth-landing-logo-gold) 45%, transparent);
    background: color-mix(in srgb, var(--auth-landing-logo-gold) 10%, transparent);
    font-size: 0.9rem;
    line-height: 1.45;
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-weight: 600;
}
body.auth-page--landing .auth-landing-value-card__footer-icon {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--auth-landing-logo-gold);
    font-size: 1.1rem;
    filter: drop-shadow(0 0 8px rgba(var(--auth-landing-logo-gold-rgb), 0.35));
}
body.auth-page--landing .auth-landing-value-card__footer-text {
    flex: 1 1 auto;
    min-width: 0;
}
body.auth-page--landing .auth-landing-value-card__footer-white {
    color: #f8fafc;
}
body.auth-page--landing .auth-landing-value-card__footer-gold {
    color: var(--auth-landing-logo-gold);
    font-weight: 700;
    text-shadow:
        0 0 12px rgba(var(--auth-landing-logo-gold-rgb), 0.25),
        0 1px 0 rgba(0, 0, 0, 0.35);
}
.auth-landing-freedom-cta {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 0;
    padding: 16px clamp(22px, 4vw, 34px);
    min-height: 54px;
    max-width: min(520px, 94vw);
    width: auto;
    border: 1px solid var(--rm-gold-active-border);
    border-radius: 999px;
    box-sizing: border-box;
    font: inherit;
    font-size: clamp(0.88rem, 2vw, 1.02rem);
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1.2;
    color: var(--rm-cta-auth-text);
    background: var(--rm-cta-login-gradient);
    box-shadow:
        0 2px 0 rgba(255, 255, 255, 0.35) inset,
        0 10px 36px rgba(234, 179, 8, 0.38);
    cursor: pointer;
    transition: filter 0.15s ease, transform 0.15s ease;
}
.auth-landing-freedom-cta:hover {
    filter: brightness(1.05);
}
.auth-landing-freedom-cta:active {
    transform: translateY(1px);
}
.auth-landing-freedom-cta__label {
    flex: 0 1 auto;
    text-align: center;
}
.auth-landing-freedom-cta__chevron {
    flex-shrink: 0;
    font-size: 0.88em;
    opacity: 0.92;
}
.auth-landing-hero-cta {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 12px;
    font-size: clamp(0.82rem, 1.6vw, 0.98rem);
    font-weight: 800;
    line-height: 1.2;
    text-decoration: none;
    box-sizing: border-box;
    min-height: 52px;
    transition: filter 0.15s ease, transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.auth-landing-hero-cta__label {
    flex: 1 1 auto;
    text-align: center;
}
.auth-landing-hero-cta__arrow {
    flex-shrink: 0;
    font-size: 0.95rem;
    opacity: 0.95;
}
.auth-landing-hero-cta--register {
    color: var(--rm-cta-auth-text);
    background: var(--rm-cta-login-gradient);
    border: 1px solid var(--rm-gold-active-border);
    box-shadow: 0 2px 16px rgba(234, 179, 8, 0.32);
}
.auth-landing-hero-cta--register:hover {
    filter: brightness(1.05);
}
.auth-landing-hero-cta--login {
    color: #f8fafc;
    background: #050a08;
    border: 2px solid var(--auth-landing-green);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--auth-landing-green) 18%, transparent);
}
.auth-landing-hero-cta--login:hover {
    background: #07120d;
    border-color: var(--auth-landing-green);
}
.auth-landing-hero-perks {
    margin: 14px 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 10px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--auth-landing-green);
}
.auth-landing-hero-perks__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.auth-landing-hero-perks__item .fa-check {
    font-size: 0.72rem;
    opacity: 0.9;
}
.auth-landing-hero-perks__sep {
    opacity: 0.55;
    font-weight: 500;
    color: color-mix(in srgb, var(--auth-landing-green) 65%, transparent);
}
.auth-landing-hero-plans-note {
    margin: 10px 0 0;
    text-align: center;
}
.auth-landing-hero-plans-link {
    border: none;
    background: none;
    padding: 4px 8px;
    margin: 0;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--auth-landing-green);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.auth-landing-hero-plans-link:hover {
    color: var(--auth-landing-green);
    filter: brightness(1.12);
}

.auth-landing-scrollcta {
    margin-top: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 22px;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    color: var(--rm-cta-auth-text);
    background: var(--rm-cta-login-gradient);
    box-shadow: 0 2px 14px rgba(234, 179, 8, 0.38);
    border: 1px solid var(--rm-gold-active-border);
    transition: filter 0.15s ease, transform 0.15s ease;
}
.auth-landing-scrollcta:hover {
    filter: brightness(1.06);
}
.auth-landing-aside {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    min-height: 0;
    height: 100%;
}
.auth-panel--landing-card {
    position: relative;
    margin-bottom: 0;
    background: linear-gradient(180deg, rgba(255, 253, 248, 0.98) 0%, #fffef7 100%);
    border: 1px solid rgba(212, 175, 55, 0.45);
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.2),
        0 0 0 1px rgba(255, 255, 255, 0.06) inset;
    border-radius: 16px;
    padding: 18px 18px 20px;
    scroll-margin-top: 96px;
}

body.auth-show-login:not(.auth-page--landing) #auth-login.auth-login-shell {
    display: block !important;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 32px);
    max-width: 420px;
    max-height: min(88vh, 680px);
    overflow: visible;
    margin: 0;
    z-index: 3000;
    padding: 44px 10px 12px;
    border-radius: 22px;
    border: 2px solid rgba(212, 175, 55, 0.9);
    background:
        linear-gradient(145deg, rgba(34, 197, 94, 0.14) 0%, transparent 45%),
        linear-gradient(165deg, rgba(11, 96, 48, 0.52) 0%, rgba(4, 46, 28, 0.78) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 0 0 1px rgba(253, 230, 138, 0.55),
        0 16px 48px rgba(0, 0, 0, 0.42),
        0 0 24px 6px rgba(255, 220, 130, 0.5),
        0 0 52px 16px rgba(212, 175, 55, 0.38),
        0 0 88px 28px rgba(180, 83, 9, 0.18),
        -6px -10px 64px rgba(253, 224, 71, 0.12);
    backdrop-filter: blur(2px);
}
body.auth-show-register:not(.auth-page--landing) .auth-register-panel__inner.auth-login-shell {
    width: calc(100% - 32px);
    max-width: 420px;
    padding: 44px 10px 12px;
    border-radius: 22px;
    border: 2px solid rgba(212, 175, 55, 0.9);
    background:
        linear-gradient(145deg, rgba(34, 197, 94, 0.14) 0%, transparent 45%),
        linear-gradient(165deg, rgba(11, 96, 48, 0.52) 0%, rgba(4, 46, 28, 0.78) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 0 0 1px rgba(253, 230, 138, 0.55),
        0 16px 48px rgba(0, 0, 0, 0.42),
        0 0 24px 6px rgba(255, 220, 130, 0.5),
        0 0 52px 16px rgba(212, 175, 55, 0.38),
        0 0 88px 28px rgba(180, 83, 9, 0.18),
        -6px -10px 64px rgba(253, 224, 71, 0.12);
    backdrop-filter: blur(2px);
    overflow: visible;
    max-height: none;
}
body.auth-show-login:not(.auth-page--landing) #auth-login .auth-login-card-inner,
body.auth-show-register:not(.auth-page--landing) .auth-register-panel__inner.auth-login-shell .auth-login-card-inner {
    position: relative;
    overflow-y: auto;
    max-height: min(calc(88vh - 120px), 560px);
    margin: 4px 4px 2px;
    padding: 18px 16px 16px;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #fafcfa 100%);
    border: 1px solid rgba(212, 175, 55, 0.65);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.85) inset,
        0 2px 12px rgba(11, 96, 48, 0.08);
}
body.auth-show-login:not(.auth-page--landing) #auth-login .auth-login-card-inner::before,
body.auth-show-register:not(.auth-page--landing) .auth-register-panel__inner.auth-login-shell .auth-login-card-inner::before,
body.auth-show-plans .auth-plans-panel__inner.auth-login-shell .auth-login-card-inner::before,
.modal-app-shell.auth-login-shell .auth-login-card-inner::before {
    content: "";
    position: absolute;
    top: 0;
    left: 8%;
    right: 8%;
    height: 2px;
    border-radius: 0 0 8px 8px;
    background: linear-gradient(90deg, transparent, #d4af37, #fde68a, #d4af37, transparent);
    opacity: 0.85;
    pointer-events: none;
}
body.auth-show-login:not(.auth-page--landing) #auth-login .auth-login-logo-tab,
body.auth-show-register:not(.auth-page--landing) .auth-register-panel__inner.auth-login-shell .auth-login-logo-tab {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -46%);
    z-index: 4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 6px 16px 8px;
    background: #fff;
    border-radius: 12px;
    border: 2px solid #d4af37;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14), 0 0 0 1px rgba(255, 255, 255, 0.9) inset;
}
body.auth-show-login:not(.auth-page--landing) #auth-login .auth-login-logo-tab__word,
body.auth-show-register:not(.auth-page--landing) .auth-register-panel__inner.auth-login-shell .auth-login-logo-tab__word {
    height: 22px;
    width: auto;
    max-width: 140px;
    object-fit: contain;
    display: block;
}
body.auth-show-login:not(.auth-page--landing) #auth-login .auth-login-deco,
body.auth-show-register:not(.auth-page--landing) .auth-register-panel__inner.auth-login-shell .auth-login-deco,
body.auth-show-plans .auth-plans-panel__inner.auth-login-shell .auth-login-deco,
.modal-app-shell.auth-login-shell .auth-login-deco {
    position: absolute;
    top: 8px;
    right: 8px;

    z-index: 5;
    width: 58px;
    line-height: 0;
    pointer-events: none;
}
body.auth-show-login:not(.auth-page--landing) #auth-login .auth-login-deco__img,
body.auth-show-register:not(.auth-page--landing) .auth-register-panel__inner.auth-login-shell .auth-login-deco__img,
body.auth-show-plans .auth-plans-panel__inner.auth-login-shell .auth-login-deco__img,
.modal-app-shell.auth-login-shell .auth-login-deco__img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.28));
}
body.auth-show-login:not(.auth-page--landing) #auth-login .auth-input-icon-wrap,
body.auth-show-register:not(.auth-page--landing) .auth-register-panel__inner.auth-login-shell .auth-input-icon-wrap {
    display: block;
    position: relative;
    width: 100%;
}
body.auth-show-login:not(.auth-page--landing) #auth-login .auth-input-icon-wrap .auth-input-icon,
body.auth-show-register:not(.auth-page--landing) .auth-register-panel__inner.auth-login-shell .auth-input-icon-wrap .auth-input-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    color: #15803d;
    font-size: 1.02rem;
    pointer-events: none;
    opacity: 0.92;
}
body.auth-show-login:not(.auth-page--landing) #auth-login .auth-input-icon-wrap input,
body.auth-show-register:not(.auth-page--landing) .auth-register-panel__inner.auth-login-shell .auth-input-icon-wrap input {
    width: 100%;
    padding-left: 2.55rem;
    box-sizing: border-box;
}
.auth-modal__close {
    display: inline-flex;
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.06);
    color: #334155;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
}
.auth-modal__close:hover {
    background: rgba(15, 23, 42, 0.12);
}
.auth-modal-backdrop {
    position: fixed;
    inset: 0;

    z-index: 2800;
    background: rgba(2, 6, 23, 0.62);
    backdrop-filter: blur(4px);
}

.auth-modal-backdrop .auth-plans-panel.auth-plans-panel--layer {
    position: absolute;
    inset: 0;
    z-index: 1;
    max-height: none;
    isolation: auto;

    pointer-events: none;
}
body.auth-show-plans .auth-modal-backdrop:not([hidden]) .auth-plans-panel--layer {
    display: flex !important;
    pointer-events: auto;
}
body.auth-show-login .auth-modal-backdrop,
body.auth-show-register .auth-modal-backdrop,
body.auth-show-plans .auth-modal-backdrop {
    background:
        radial-gradient(ellipse 85% 55% at 50% 35%, rgba(34, 197, 94, 0.14) 0%, transparent 55%),
        linear-gradient(165deg, rgba(8, 72, 42, 0.88) 0%, rgba(2, 22, 14, 0.92) 100%);
    backdrop-filter: blur(6px);
}
body.auth-page--landing.auth-show-plans .auth-modal-backdrop,
body.auth-page--landing.auth-show-login .auth-modal-backdrop,
body.auth-page--landing.auth-show-register .auth-modal-backdrop {
    background:
        radial-gradient(
            ellipse 85% 55% at 50% 35%,
            color-mix(in srgb, var(--auth-landing-green) 18%, transparent) 0%,
            transparent 55%
        ),
        linear-gradient(165deg, rgba(8, 72, 42, 0.88) 0%, rgba(2, 22, 14, 0.92) 100%);
}

body.auth-page--landing.auth-show-login .auth-modal-backdrop:not([hidden]),
body.auth-page--landing.auth-show-register .auth-modal-backdrop:not([hidden]) {
    backdrop-filter: blur(15px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(15px) saturate(1.08) !important;
}
body.auth-modal-open {
    overflow: hidden;
}

@keyframes auth-login-shell-rise-in {
    from {
        opacity: 0;
        transform: translate(-50%, calc(-50% + 36px));
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}
@keyframes auth-login-shell-rise-out {
    from {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
    to {
        opacity: 0;
        transform: translate(-50%, calc(-50% + 28px));
    }
}

@keyframes auth-plans-panel-rise-in {
    from {
        transform: translate(-50%, calc(-50% + 36px));
    }
    to {
        transform: translate(-50%, -50%);
    }
}
@keyframes auth-plans-panel-rise-out {
    from {
        transform: translate(-50%, -50%);
    }
    to {
        transform: translate(-50%, calc(-50% + 28px));
    }
}
body.auth-modal-open:not(.auth-modal-is-closing) .auth-modal-backdrop:not([hidden]) {
    animation: modal-backdrop-fade-in 0.32s ease-out forwards;
}
body.auth-modal-is-closing .auth-modal-backdrop {
    animation: modal-backdrop-fade-out 0.28s ease-in forwards;
}
body.auth-show-login:not(.auth-page--landing):not(.auth-modal-is-closing) #auth-login.auth-login-shell {
    animation: auth-login-shell-rise-in 0.42s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
body.auth-modal-is-closing.auth-show-login:not(.auth-page--landing) #auth-login.auth-login-shell {
    animation: auth-login-shell-rise-out 0.32s cubic-bezier(0.55, 0.06, 0.68, 0.19) forwards;
}
body.auth-show-register:not(.auth-page--landing):not(.auth-modal-is-closing) .auth-register-panel__inner.auth-login-shell {
    transform-origin: center bottom;
    animation: modal-card-rise-in 0.42s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
body.auth-modal-is-closing.auth-show-register:not(.auth-page--landing) .auth-register-panel__inner.auth-login-shell {
    transform-origin: center bottom;
    animation: modal-card-rise-out 0.32s cubic-bezier(0.55, 0.06, 0.68, 0.19) forwards;
}
body.auth-show-plans:not(.auth-modal-is-closing) .auth-plans-panel__inner.auth-login-shell {
    animation: auth-plans-panel-rise-in 0.42s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
body.auth-modal-is-closing.auth-show-plans .auth-plans-panel__inner.auth-login-shell {
    animation: auth-plans-panel-rise-out 0.32s cubic-bezier(0.55, 0.06, 0.68, 0.19) forwards;
}
.auth-register-panel {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 3000;
    align-items: center;
    justify-content: center;
    padding: max(16px, env(safe-area-inset-top)) 16px 16px;
    pointer-events: none;
}
body.auth-show-register:not(.auth-page--landing) .auth-register-panel {
    display: flex;
    pointer-events: auto;
}
.auth-register-panel__inner {
    position: relative;
    width: 100%;
    max-width: 420px;
    max-height: min(90vh, 720px);
    overflow-y: auto;
    pointer-events: auto;
    margin: auto;
}
.auth-register-panel__inner.auth-login-shell {
    overflow-y: visible;
    overflow-x: visible;
}
body.auth-show-register:not(.auth-page--landing) .auth-register-panel__inner.auth-login-shell .auth-login-card-inner {
    max-height: min(calc(88vh - 120px), 640px);
}

.auth-plans-panel {
    --auth-plans-icon-yellow: #f5d942;
    display: none;
    position: fixed;
    inset: 0;
    z-index: 3400;
    isolation: isolate;
    align-items: center;
    justify-content: center;
    padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
    pointer-events: none;
}
body.auth-show-plans .auth-plans-panel {
    display: flex;
    pointer-events: auto;
}
.auth-plans-panel__inner {
    position: relative;
    width: calc(100% - 32px);
    max-width: 1040px;
    pointer-events: auto;
    margin: auto;
}
body.auth-show-plans .auth-plans-panel__inner.auth-login-shell.auth-plans-panel__inner--pricing {
    position: fixed;
    left: 50%;
    top: 50%;
    margin: 0;
    width: calc(100% - 32px);
    max-width: 1040px;
    z-index: 1;
    overflow: visible;
    max-height: none;
    padding: 52px 22px 22px;
    border-radius: 20px;
    border: 1px solid color-mix(in srgb, var(--auth-landing-green) 26%, rgba(148, 163, 184, 0.16));
    background:
        radial-gradient(ellipse 72% 56% at 10% -8%, rgba(var(--auth-landing-green-rgb), 0.22) 0%, transparent 58%),
        radial-gradient(ellipse 50% 40% at 92% 100%, rgba(6, 95, 70, 0.2) 0%, transparent 55%),
        linear-gradient(165deg, #0d1612 0%, #030806 52%, #050a08 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 24px 80px rgba(0, 0, 0, 0.55),
        0 0 60px color-mix(in srgb, var(--auth-landing-green) 12%, transparent);
    backdrop-filter: blur(6px);
}
body.auth-show-plans .auth-plans-panel__inner.auth-login-shell.auth-plans-panel__inner--pricing .auth-login-card-inner {
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: min(calc(94vh - 40px), 880px);
    margin: 0;
    padding: 8px 6px 12px;
    border-radius: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    -webkit-overflow-scrolling: touch;
}
body.auth-show-plans .auth-plans-panel__inner.auth-login-shell.auth-plans-panel__inner--pricing .auth-login-card-inner::before {
    display: none;
}
body.auth-page--landing.auth-show-plans .auth-plans-panel__inner--pricing.auth-login-shell .auth-modal__close {
    left: auto;
    right: 12px;
    top: 12px;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(2, 8, 6, 0.55);
    color: rgba(255, 255, 255, 0.92);
}
body.auth-page--landing.auth-show-plans .auth-plans-panel__inner--pricing.auth-login-shell .auth-modal__close:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    opacity: 1;
}
.auth-plans-panel__title {
    margin: 0 auto 10px;
    max-width: 22em;
    text-align: center;
    font-size: clamp(1.25rem, 2.6vw + 0.5rem, 1.75rem);
    font-weight: 800;
    color: #f8fafc;
    line-height: 1.2;
    letter-spacing: -0.02em;
}
.auth-plans-panel__title-accent {
    color: var(--auth-plans-icon-yellow);
    text-shadow: 0 0 28px color-mix(in srgb, var(--auth-plans-icon-yellow) 35%, transparent);
}
.auth-plans-panel__lead {
    margin: 0 auto 22px;
    max-width: 36em;
    text-align: center;
    font-size: 0.94rem;
    line-height: 1.5;
    color: #cbd5e1;
}
.auth-plans-panel__lead-accent {
    color: var(--auth-landing-green);
    font-weight: 700;
}
.auth-plans-trust {
    margin: 0 0 16px;
    padding: 14px 8px 10px;
    border: 1px solid rgba(71, 85, 105, 0.3);
    border-radius: 14px;
    background: rgba(11, 19, 28, 0.72);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px 8px;
    align-items: start;
    justify-items: center;
}
.auth-plans-trust__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    min-width: 0;
    max-width: 15rem;
    padding: 2px 4px;
}
.auth-plans-trust__icon {
    flex-shrink: 0;
    width: 2.2rem;
    height: 2.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.14rem;
    line-height: 1;
    color: var(--auth-landing-green);
    border-radius: 999px;
    background: color-mix(in srgb, var(--auth-landing-green) 12%, rgba(15, 23, 42, 0.5));
    border: 1px solid color-mix(in srgb, var(--auth-landing-green) 42%, transparent);
    box-shadow:
        0 0 22px color-mix(in srgb, var(--auth-landing-green) 32%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.auth-plans-trust__text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 0;
}
.auth-plans-trust__line {
    font-size: 0.8rem;
    font-weight: 800;
    color: #f1f5f9;
    line-height: 1.3;
}
.auth-plans-trust__sub {
    font-size: 0.72rem;
    font-weight: 500;
    color: #94a3b8;
    line-height: 1.35;
}
.auth-plan-card__decor {
    position: absolute;
    top: 14px;
    right: 12px;
    font-size: 1.12rem;
    line-height: 1;
    color: var(--auth-plans-icon-yellow);
    opacity: 0.95;
    pointer-events: none;
}
.auth-plans-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    align-items: stretch;
}
.auth-plan-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 16px 14px;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.15);
    background: linear-gradient(165deg, #1e2628 0%, #121819 100%);
    box-shadow: 0 10px 36px rgba(0, 0, 0, 0.35);
}
.auth-plan-card--free-trial {
    border-color: rgba(212, 175, 55, 0.4);
}
.auth-plan-card__trial-main {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    align-items: center;
}
.auth-plan-card__trial-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(212, 175, 55, 0.45);
    color: #fde047;
}
.auth-plan-card__trial-copy .auth-plan-card__name {
    margin-bottom: 2px;
}
.auth-plan-card__trial-copy .auth-plan-card__price {
    margin: 0;
    font-size: 2rem;
}
.auth-plan-card__trial-copy .auth-plan-card__currency {
    font-size: 0.95rem;
}
.auth-plan-card__trial-side {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #cbd5e1;
    font-size: 0.8rem;
}
.auth-plan-card__trial-side .auth-plan-card__tag {
    margin: 0;
}
.auth-plan-card--free-trial .auth-plan-card__features,
.auth-plan-card--free-trial .auth-plan-card__fine,
.auth-plan-card--free-trial .auth-plan-card__cta {
    display: none;
}
.auth-plan-card--featured {
    border-color: color-mix(in srgb, var(--auth-landing-green) 55%, rgba(148, 163, 184, 0.12));
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--auth-landing-green) 32%, transparent),
        0 0 32px color-mix(in srgb, var(--auth-landing-green) 22%, transparent),
        0 14px 42px rgba(0, 0, 0, 0.45);
    padding-top: 26px;
}
.auth-plan-card__badge {
    position: absolute;
    top: 0;
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%);
    margin: 0;
    padding: 5px 12px;
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #03130a;
    background: var(--auth-landing-green);
    border-radius: 999px;
    box-shadow: 0 0 18px color-mix(in srgb, var(--auth-landing-green) 40%, transparent);
    border: none;
}
.auth-plan-card__name {
    margin: 0 0 6px;
    font-size: 1.02rem;
    font-weight: 800;
    color: #f1f5f9;
}
.auth-plan-card__price {
    margin: 0 0 6px;
    font-size: 1.95rem;
    font-weight: 800;
    color: var(--auth-landing-green);
    line-height: 1.15;
}
.auth-plan-card__currency {
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--auth-landing-green);
    opacity: 0.94;
}
.auth-plan-card--featured .auth-plan-card__price {
    margin-bottom: 14px;
}
.auth-plan-card__tag {
    margin: 0 0 14px;
    font-size: 0.82rem;
    color: #94a3b8;
    min-height: 0;
}
.auth-plan-card__features {
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 7px;
    font-size: 0.8rem;
    line-height: 1.32;
    color: #cbd5e1;
    text-align: left;
}
.auth-plan-card__features li {
    display: flex;
    align-items: flex-start;
    gap: 0;
}
.auth-plan-card__features .fa-check {
    flex-shrink: 0;
    width: 1.05em;
    margin-right: 8px;
    margin-top: 0.12em;
    color: var(--auth-landing-green);
}
.auth-plan-card__feature--off {
    color: #64748b;
}
.auth-plan-card__feature--off .fa-regular {
    flex-shrink: 0;
    width: 1.05em;
    margin-right: 8px;
    margin-top: 0.12em;
    color: #64748b;
    opacity: 0.85;
    font-size: 0.92em;
}
.auth-plan-card__price.auth-plan-card__price--annual-billed {
    margin: 0 0 8px;
    font-size: clamp(0.95rem, 2.6vw, 1.22rem);
    font-weight: 800;
    line-height: 1.25;
    color: var(--auth-landing-green);
}
.auth-plan-card__price.auth-plan-card__price--annual-billed .auth-plan-card__currency {
    font-size: 0.88em;
    font-weight: 800;
    color: var(--auth-landing-green);
    opacity: 0.94;
}
.auth-plan-card__annual-vs-monthly {
    margin: 0 0 14px;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.35;
    color: #94a3b8;
}
.auth-plan-card__fine {
    margin: 10px 0 0;
    font-size: 0.76rem;
    line-height: 1.35;
    color: #94a3b8;
    text-align: center;
}
.auth-plan-card__cta {
    width: 100%;
    margin-top: auto;
}
body.auth-page--landing.auth-show-plans .auth-plan-card__cta {
    padding: 12px 14px;
    font-weight: 800;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    line-height: 1.25;
    border-radius: 14px;
    box-sizing: border-box;
    cursor: pointer;
    transition: filter 0.15s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
body.auth-page--landing.auth-show-plans .auth-plan-card__cta--outline {
    border: 2px solid var(--auth-landing-green);
    background: transparent;
    color: var(--auth-landing-green);
    box-shadow: none;
}
body.auth-page--landing.auth-show-plans .auth-plan-card__cta--outline:hover {
    background: color-mix(in srgb, var(--auth-landing-green) 10%, transparent);
    filter: brightness(1.06);
}
body.auth-page--landing.auth-show-plans .auth-plan-card__cta--solid {
    border: 2px solid var(--auth-landing-green);
    background: var(--auth-landing-green);
    color: #041208;
    box-shadow: 0 0 22px color-mix(in srgb, var(--auth-landing-green) 35%, transparent);
    justify-content: space-between;
}
body.auth-page--landing.auth-show-plans .auth-plan-card__cta--outline {
    justify-content: space-between;
}
body.auth-page--landing.auth-show-plans .auth-plan-card__cta--solid:hover {
    filter: brightness(1.07);
}
.auth-plans-panel__footnote {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
    margin: 18px 0 0;
    font-size: 0.78rem;
    line-height: 1.45;
    color: #94a3b8;
    text-align: left;
}
.auth-plans-panel__footnote .fa-lock {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--auth-plans-icon-yellow);
}
.auth-plans-panel__terms {
    margin: 8px auto 0;
    max-width: 52em;
    font-size: 0.72rem;
    line-height: 1.45;
    color: #64748b;
    text-align: center;
}
@media (max-width: 900px) {
    .auth-plans-grid {
        grid-template-columns: 1fr;
    }
    .auth-plans-trust {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 12px 10px;
        padding: 18px 6px 8px;
    }
    .auth-plans-trust__item {
        gap: 8px;
        max-width: none;
        padding: 0 2px;
    }
    .auth-plans-trust__icon {
        width: 2.1rem;
        height: 2.1rem;
        font-size: 0.95rem;
    }
    .auth-plans-trust__line {
        font-size: 0.72rem;
        line-height: 1.25;
    }
    .auth-plans-trust__sub {
        font-size: 0.64rem;
        line-height: 1.3;
    }
}
.auth-modal__switch {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: #15803d;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
}
.auth-modal__switch:hover {
    color: #166534;
}
.auth-panel--landing-card h1 {
    font-size: 1.25rem;
    color: #0f172a;
}
.auth-panel__brand-row {
    display: flex;
    justify-content: center;
    margin-bottom: 12px;
}
.auth-brand--landing {
    margin-bottom: 0;
}
.auth-page--landing .auth-panel--landing-card .auth-lead,
.auth-page--landing .auth-panel--landing-card .auth-footer {
    color: #475569;
}
.auth-page--landing .auth-panel--landing-card .auth-footer a,
.auth-page--landing .auth-panel--landing-card .auth-footer .auth-modal__switch {
    color: var(--auth-landing-green);
}
.auth-page--landing .auth-panel--landing-card .auth-form label {
    color: #334155;
}
.auth-page--landing .auth-panel--landing-card .auth-form input {
    background: #fff;
    border-color: #cbd5e1;
}

body.auth-show-login:not(.auth-page--landing) #auth-login.auth-login-shell .auth-modal__close,
body.auth-show-register:not(.auth-page--landing) .auth-register-panel__inner.auth-login-shell .auth-modal__close,
body.auth-show-plans .auth-plans-panel__inner.auth-login-shell .auth-modal__close {
    background: transparent;
    border: none;
    box-shadow: none;
    color: rgba(255, 255, 255, 0.88);
    opacity: 0.88;
    border-radius: 10px;
}
body.auth-show-login:not(.auth-page--landing) #auth-login.auth-login-shell .auth-modal__close {
    left: 8px;
    right: auto;
    z-index: 6;
}
body.auth-show-register:not(.auth-page--landing) .auth-register-panel__inner.auth-login-shell .auth-modal__close,
body.auth-show-plans .auth-plans-panel__inner.auth-login-shell .auth-modal__close {
    left: 8px;
    right: auto;
    z-index: 6;
}
body.auth-show-login:not(.auth-page--landing) #auth-login.auth-login-shell .auth-modal__close:hover,
body.auth-show-register:not(.auth-page--landing) .auth-register-panel__inner.auth-login-shell .auth-modal__close:hover,
body.auth-show-plans .auth-plans-panel__inner.auth-login-shell .auth-modal__close:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    opacity: 1;
}
body.auth-show-login:not(.auth-page--landing) #auth-login .auth-login-card-inner h1 {
    text-align: left;
    font-size: 1.35rem;
    font-weight: 800;
    color: #14532d;
    letter-spacing: -0.02em;
    margin-bottom: 14px;
}
body.auth-show-register:not(.auth-page--landing) .auth-register-panel__inner.auth-login-shell .auth-login-card-inner h1 {
    text-align: left;
    font-size: 1.35rem;
    font-weight: 800;
    color: #14532d;
    letter-spacing: -0.02em;
    margin-bottom: 14px;
}
body.auth-show-login:not(.auth-page--landing) #auth-login .auth-login-card-inner .auth-lead,
body.auth-show-register:not(.auth-page--landing) .auth-register-panel__inner.auth-login-shell .auth-login-card-inner .auth-lead {
    text-align: center;
    color: #3f4f5c;
    font-size: 0.88rem;
}
body.auth-show-login:not(.auth-page--landing) #auth-login .auth-login-card-inner .auth-msg--ok,
body.auth-show-register:not(.auth-page--landing) .auth-register-panel__inner.auth-login-shell .auth-login-card-inner .auth-msg--ok {
    background: linear-gradient(180deg, #ecfdf5 0%, #d1fae5 100%);
    border: 1px solid #34d399;
    color: #065f46;
    font-weight: 600;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset;
}
body.auth-show-login:not(.auth-page--landing) #auth-login .auth-login-card-inner .auth-msg--error,
body.auth-show-register:not(.auth-page--landing) .auth-register-panel__inner.auth-login-shell .auth-login-card-inner .auth-msg--error {
    border-width: 1px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
}
body.auth-show-login:not(.auth-page--landing) #auth-login .auth-login-card-inner .auth-google-gmail,
body.auth-show-register:not(.auth-page--landing) .auth-register-panel__inner.auth-login-shell .auth-login-card-inner .auth-google-gmail {
    border: 1px solid rgba(11, 96, 48, 0.35);
    background: linear-gradient(180deg, #ffffff 0%, #f4faf6 100%);
    box-shadow: 0 2px 10px rgba(11, 96, 48, 0.1);
}
body.auth-show-login:not(.auth-page--landing) #auth-login .auth-login-card-inner .auth-google-gmail:hover,
body.auth-show-register:not(.auth-page--landing) .auth-register-panel__inner.auth-login-shell .auth-login-card-inner .auth-google-gmail:hover {
    border-color: rgba(212, 175, 55, 0.85);
    background: #fff;
    box-shadow: 0 4px 16px rgba(212, 175, 55, 0.22);
}
body.auth-show-login:not(.auth-page--landing) #auth-login .auth-login-card-inner .auth-divider,
body.auth-show-register:not(.auth-page--landing) .auth-register-panel__inner.auth-login-shell .auth-login-card-inner .auth-divider {
    color: #475569;
    font-weight: 600;
}
body.auth-show-login:not(.auth-page--landing) #auth-login .auth-login-card-inner .auth-divider::before,
body.auth-show-login:not(.auth-page--landing) #auth-login .auth-login-card-inner .auth-divider::after,
body.auth-show-register:not(.auth-page--landing) .auth-register-panel__inner .auth-divider::before,
body.auth-show-register:not(.auth-page--landing) .auth-register-panel__inner .auth-divider::after {
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(212, 175, 55, 0.55) 45%, rgba(11, 96, 48, 0.35) 100%);
}
body.auth-show-register:not(.auth-page--landing) .auth-register-panel__inner.auth-login-shell .auth-login-card-inner .auth-divider::before,
body.auth-show-register:not(.auth-page--landing) .auth-register-panel__inner.auth-login-shell .auth-login-card-inner .auth-divider::after {
    background: linear-gradient(90deg, transparent 0%, rgba(212, 175, 55, 0.55) 50%, transparent 100%);
}
body.auth-show-login:not(.auth-page--landing) #auth-login .auth-login-card-inner .auth-form label > span:first-child,
body.auth-show-register:not(.auth-page--landing) .auth-register-panel__inner.auth-login-shell .auth-login-card-inner .auth-form label > span:first-child {
    color: #0f172a;
    font-weight: 700;
}
body.auth-show-login:not(.auth-page--landing) #auth-login .auth-login-card-inner .auth-form input,
body.auth-show-register:not(.auth-page--landing) .auth-register-panel__inner.auth-login-shell .auth-login-card-inner .auth-form input {
    background: linear-gradient(180deg, #f0f7ff 0%, #e8f0fe 100%);
    border: 1px solid #93c5fd;
    border-radius: 10px;
    color: #0f172a;
}
body.auth-show-login:not(.auth-page--landing) #auth-login .auth-login-card-inner .auth-form input:focus,
body.auth-show-register:not(.auth-page--landing) .auth-register-panel__inner.auth-login-shell .auth-login-card-inner .auth-form input:focus {
    outline: none;
    border-color: #15803d;
    box-shadow: 0 0 0 3px rgba(21, 128, 61, 0.22);
}
body.auth-show-login:not(.auth-page--landing) #auth-login .auth-login-card-inner .auth-submit.btn-modal-primary,
body.auth-show-register:not(.auth-page--landing) .auth-register-panel__inner.auth-login-shell .auth-login-card-inner .auth-submit.btn-modal-primary {
    border-radius: 12px;
    border: 2px solid #c9a227;
    background: linear-gradient(180deg, #16904a 0%, #0f7a3a 38%, #0b6030 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.2) inset,
        0 2px 0 rgba(0, 0, 0, 0.12) inset,
        0 8px 22px rgba(11, 96, 48, 0.38);
    font-weight: 800;
    letter-spacing: 0.02em;
}
body.auth-show-login:not(.auth-page--landing) #auth-login .auth-login-card-inner .auth-submit.btn-modal-primary:hover,
body.auth-show-register:not(.auth-page--landing) .auth-register-panel__inner.auth-login-shell .auth-login-card-inner .auth-submit.btn-modal-primary:hover {
    filter: brightness(1.05);
    border-color: #e8c547;
}
body.auth-show-login:not(.auth-page--landing) #auth-login .auth-login-card-inner .auth-footer,
body.auth-show-register:not(.auth-page--landing) .auth-register-panel__inner.auth-login-shell .auth-login-card-inner .auth-footer {
    color: #334155;
    text-align: center;
}
body.auth-show-login:not(.auth-page--landing) #auth-login .auth-login-card-inner .auth-footer .auth-modal__switch,
body.auth-show-register:not(.auth-page--landing) .auth-register-panel__inner.auth-login-shell .auth-login-card-inner .auth-footer .auth-modal__switch {
    color: #0b6030;
    font-weight: 700;
}
@media (max-width: 900px) {
    .auth-landing-hero {
        flex-direction: column;
        min-height: calc(100svh - var(--auth-landing-bg-top) - clamp(28px, 8vw, 52px));
    }
    body.auth-page--landing .auth-landing-frame .auth-landing-hero {
        min-height: min(52vh, 520px);
        background-position: 80% 0%;
        box-shadow: inset 0 0 min(120vw, 480px) rgb(0 0 0);
    }
    .auth-landing-hero-cta-row {
        grid-template-columns: 1fr;
    }
    .auth-landing-hero-shell .auth-landing-copy {
        order: 1;
        max-width: 100%;
        flex-basis: auto;
        padding: 18px 16px 20px;
    }
    body.auth-page--landing .auth-landing-frame .auth-landing-hero-shell .auth-landing-copy {
        max-width: none;
        margin-left: 0;
        background: linear-gradient(180deg, rgba(2, 8, 6, 0.82) 0%, rgba(2, 8, 6, 0.38) 55%, rgba(2, 8, 6, 0.12) 100%);
    }
    body.auth-page--landing .auth-landing-hero-legend--aside {
        top: auto;
        transform: none;
        bottom: max(7%, env(safe-area-inset-bottom, 0px));
        right: max(8px, env(safe-area-inset-right, 0px));
        width: min(200px, 72vw);
        align-items: center;
        text-align: center;
    }
    .auth-landing-hero-shell .auth-landing-aside {
        order: 2;
        flex: 0 0 0;
        width: 0;
        height: 0;
        overflow: visible;
        padding: 0;
        margin: 0;
    }
    .auth-landing-aside {
        height: auto;
    }
    .auth-landing-header {
        gap: 8px;
    }
    .auth-landing-nav__ghost {
        padding: 7px 10px;
        font-size: 0.78rem;
        white-space: nowrap;
    }
    .auth-landing-nav__cta {
        padding: 7px 12px;
        font-size: 0.78rem;
        white-space: nowrap;
    }
}

@media (max-width: 720px) {
    body.auth-page--landing .auth-landing-hero-grid {
        grid-template-columns: 1fr;
        padding: 0;
    }
    body.auth-page--landing .auth-landing-dual-features,
    body.auth-page--landing .auth-landing-dual-foot {
        grid-template-columns: 1fr;
    }
    body.auth-page--landing .auth-landing-trust--dual {
        display: none !important;
    }
    body.auth-page--landing .auth-landing-dual-foot {
        display: none;
    }
    body.auth-page--landing .auth-landing-trust--footer-mobile {
        display: flex;
        align-items: flex-start;
        gap: 6px;
        align-self: center;
        box-sizing: border-box;
        width: 100%;
        padding: 6px 12px;
        border-radius: 8px;
        font-size: 0.68rem;
        line-height: 1.28;
        letter-spacing: 0.01em;
        text-align: left;
        color: var(--auth-landing-green);
        background: rgba(2, 12, 8, 0.82);
        border: 1px solid color-mix(in srgb, var(--auth-landing-green) 55%, transparent);
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2) inset;
    }
    body.auth-page--landing .auth-landing-trust--footer-mobile .fa-lock {
        flex-shrink: 0;
        margin-top: 1px;
        font-size: 0.72rem;
        color: var(--auth-landing-green);
    }
    body.auth-page--landing .auth-landing-trust--footer-mobile > span {
        flex: 1 1 auto;
        min-width: 0;
    }
    body.auth-page--landing .auth-landing-value-card__footer--mobile {
        display: flex;
        width: 100%;
        margin-top: 10px;
        padding: 8px 12px;
        border-radius: 8px;
        font-size: 0.72rem;
        line-height: 1.3;
        border-color: color-mix(in srgb, var(--auth-landing-logo-gold) 55%, transparent);
        background: rgba(20, 16, 9, 0.8);
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2) inset;
    }
    body.auth-page--landing .auth-landing-value-card__footer--mobile .auth-landing-value-card__footer-icon {
        margin-top: 1px;
        font-size: 0.74rem;
    }
    body.auth-page--landing .auth-landing-eyebrow__pill {
        display: block;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        text-align: left;
    }
    body.auth-page--landing .auth-landing-features > li {
        background: rgba(3, 19, 10, 0.78);
        border: 1px solid color-mix(in srgb, var(--auth-landing-green) 34%, transparent);
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.28) inset;
    }
    body.auth-page--landing .auth-landing-value-card__item {
        background: rgba(18, 14, 6, 0.58);
        border: 1px solid color-mix(in srgb, var(--auth-landing-logo-gold) 40%, transparent);
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.22) inset;
    }
    body.auth-page--landing .auth-landing-about {
        margin-top: 18px;
    }
    body.auth-page--landing .auth-landing-about__title {
        font-size: 1.08rem;
    }
    body.auth-page--landing .auth-landing-about__text {
        background: #000000b0;
    }
    body.auth-page--landing .auth-landing-cta-below {
        margin-top: 18px;
        padding-bottom: 0;
    }
}
@media (min-width: 901px) {
    .auth-landing-header {
        flex-wrap: wrap;
    }
}

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

.topbar--hero > .topbar-auth {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + (var(--topbar-bar-h) - 40px) / 2 - 3px);
    right: max(20px, calc(env(safe-area-inset-right, 0px) + 10px));
    z-index: 1120;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-shrink: 0;
    gap: 8px;
}
.topbar-auth-actions {
    display: inline-flex;
    align-items: center;
}
@media (max-width: 999px) {
    .topbar--hero > .topbar-auth {
        right: max(18px, calc(env(safe-area-inset-right, 0px) + 8px));

        top: calc(env(safe-area-inset-top, 0px) + (var(--topbar-bar-h) - 40px) / 2);
    }
    .topbar-user-menu-trigger {
        min-width: 0 !important;
        min-height: 0 !important;
        width: 40px !important;
        height: 40px !important;
        padding: 0 !important;
        border-radius: 999px !important;
        font-size: 1.02rem !important;
        line-height: 1 !important;
        box-sizing: border-box;
    }
    .topbar--hero .topbar-user-menu-trigger {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        border-radius: 999px !important;
    }
}
.topbar-user-dropdown {
    position: relative;
}
.topbar-notification-dropdown {
    position: relative;
}
.topbar-notification-btn {
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 999px;
    background: rgba(8, 30, 16, 0.7);
    color: #f8fafc;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    transition: background 0.15s ease, border-color 0.15s ease;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.topbar-notification-btn:hover,
.topbar-notification-dropdown.is-open .topbar-notification-btn {
    background: rgba(12, 40, 22, 0.92);
    border-color: rgba(255, 255, 255, 0.32);
}
.topbar-notification-btn .fa-bell {
    font-size: 0.98rem;
}
.topbar-notification-btn__dot {
    position: absolute;
    top: 9px;
    right: 9px;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #22c55e;
    box-shadow: 0 0 0 2px rgba(6, 24, 12, 0.95);
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.topbar-notification-btn:not(.topbar-notification-btn--has-unread) .topbar-notification-btn__dot {
    opacity: 0;
    transform: scale(0);
}
.topbar-notification-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: auto;
    width: min(400px, calc(100vw - 20px));
    z-index: 10050;
    display: none;
    flex-direction: column;
    min-width: 0;
    max-height: min(520px, 86vh);
    padding: 0;
    border-radius: 0 0 12px 12px;
    border: none;
    border-left: 1px solid rgba(34, 197, 94, 0.48);
    border-right: 1px solid rgba(34, 197, 94, 0.48);
    border-bottom: 1px solid rgba(34, 197, 94, 0.48);
    background: linear-gradient(180deg, #0c1210 0%, #060a0c 100%);
    box-shadow:
        0 0 36px rgba(34, 197, 94, 0.18),
        0 22px 50px rgba(0, 0, 0, 0.58);
    overscroll-behavior: contain;
    overflow: hidden;
}
.topbar-notification-dropdown.is-open .topbar-notification-panel {
    display: flex;
}
.topbar-notification-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px 10px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.14);
    flex-shrink: 0;
}
.topbar-notification-head__title {
    font-size: 0.95rem;
    font-weight: 800;
    color: #f8fafc;
    letter-spacing: 0.01em;
}
.topbar-notification-head__mark {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 6px 8px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #4ade80;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}
.topbar-notification-head__mark:hover {
    background: rgba(74, 222, 128, 0.12);
    color: #bbf7d0;
}
.topbar-notification-head__mark i {
    font-size: 0.75rem;
}
.topbar-notification-list {
    flex: 1 1 auto;
    min-height: 120px;
    max-height: 380px;
    overflow-y: auto;
    padding: 10px 10px 6px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.topbar-notification-list.is-loading,
.topbar-notification-list.is-empty {
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 0.88rem;
    font-weight: 600;
    text-align: center;
    padding: 28px 16px;
}
.topbar-notification-card {
    position: relative;
    border-radius: 14px;
    padding: 12px 36px 34px 12px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: rgba(15, 23, 42, 0.42);
    cursor: pointer;
    text-align: left;
    width: 100%;
    box-sizing: border-box;
    color: inherit;
    font: inherit;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.topbar-notification-card:hover {
    border-color: rgba(74, 222, 128, 0.35);
    background: rgba(15, 23, 42, 0.62);
}
.topbar-notification-card:focus-visible {
    outline: 2px solid rgba(74, 222, 128, 0.65);
    outline-offset: 2px;
}
.topbar-notification-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}
.topbar-notification-card__row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.topbar-notification-card__icon {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
    font-size: 0.95rem;
}
.topbar-notification-card__body {
    flex: 1;
    min-width: 0;
}
.topbar-notification-card__title {
    font-size: 0.9rem;
    font-weight: 800;
    color: #f8fafc;
    line-height: 1.25;
}
.topbar-notification-card__time {
    font-size: 0.72rem;
    font-weight: 600;
    color: #94a3b8;
    white-space: nowrap;
    flex-shrink: 0;
}
.topbar-notification-card__desc {
    margin-top: 6px;
    font-size: 0.82rem;
    font-weight: 500;
    color: #cbd5e1;
    line-height: 1.45;
}
.topbar-notification-card__tag {
    margin-top: 8px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.topbar-notification-card__actions {
    position: absolute;
    right: 12px;
    bottom: 10px;
}
.topbar-notification-card__mark-read {
    border: 0;
    background: transparent;
    color: #4ade80;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}
.topbar-notification-card__mark-read:hover {
    color: #bbf7d0;
    text-decoration: underline;
}
.topbar-notification-card__state {
    position: absolute;
    right: 12px;
    top: 12px;
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: #64748b;
    box-shadow: 0 0 0 2px rgba(6, 12, 18, 0.95);
}
.topbar-notification-card--unread .topbar-notification-card__state {
    background: #22c55e;
}
.topbar-notification-foot {
    flex-shrink: 0;
    padding: 10px 12px 14px;
    border-top: 1px solid rgba(148, 163, 184, 0.14);
    text-align: center;
}
.topbar-notification-foot__link {
    color: #4ade80;
    font-weight: 800;
    font-size: 0.86rem;
    text-decoration: none;
}
.topbar-notification-foot__link:hover {
    text-decoration: underline;
}

@media (max-width: 999px) {
    .topbar-notification-panel {
        position: fixed;
        left: max(12px, env(safe-area-inset-left, 0px));
        right: max(12px, env(safe-area-inset-right, 0px));
        top: calc(env(safe-area-inset-top, 0px) + var(--topbar-bar-h, 52px) + 10px);
        width: auto;
        max-width: none;
        max-height: min(520px, calc(100dvh - env(safe-area-inset-top, 0px) - var(--topbar-bar-h, 52px) - 24px));
        border-radius: 14px;
        border-top: 1px solid rgba(34, 197, 94, 0.38);
    }
    .topbar-notification-head {
        flex-wrap: wrap;
        row-gap: 8px;
    }
    .topbar-notification-head__title {
        flex: 1 1 auto;
        min-width: 0;
    }
    .topbar-notification-head__mark {
        white-space: normal;
        text-align: center;
    }
}
.topbar-user-menu-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    padding: 0;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(8, 30, 16, 0.7);
    color: #f8fafc;
    cursor: pointer;
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.2px;
    box-sizing: border-box;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    transition: background 0.15s ease, border-color 0.15s ease;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.topbar-user-menu-trigger .fa-user {
    font-size: 0.98rem;
}

.topbar-user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 1px solid rgba(74, 222, 128, 0.55);
    background: linear-gradient(160deg, #22c55e 0%, #2563eb 100%);
    color: #f8fafc;
    font-size: 0.82rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}
.topbar-user-menu-head__avatar.topbar-user-avatar {
    display: block;
    position: relative;
    width: 72px;
    height: 72px;
    border-width: 3px;
    box-shadow:
        0 0 0 1px rgba(34, 197, 94, 0.35),
        0 6px 22px rgba(0, 0, 0, 0.45);
}
.topbar-user-menu-head__avatar.topbar-user-avatar > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}
.topbar-user-menu-head__avatar.topbar-user-avatar > .topbar-user-avatar__fallback {
    position: absolute;
    inset: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
}
.topbar-user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.topbar-user-avatar__fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
@media (max-width: 1150px) and (min-width: 1000px) {
    .topbar--hero .topbar-bar nav > a,
    .topbar--hero .topbar-bar nav .topbar-dropdown__trigger {
        padding: 7px 10px;
        font-size: 0.84rem;
    }
}
.topbar-user-menu-trigger:hover,
.topbar-user-dropdown.is-open .topbar-user-menu-trigger {
    background: rgba(12, 40, 22, 0.92);
    border-color: rgba(255, 255, 255, 0.32);
}
.topbar--hero,
.topbar-hero-splash,
.topbar-auth,
.topbar-user-dropdown {
    overflow: visible;
}
.topbar-user-menu-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: auto;
    width: min(380px, calc(100vw - 20px));
    z-index: 10050;
    display: none;
    flex-direction: column;
    gap: 0;
    min-width: 0;
    padding: 0;
    border-radius: 0 0 12px 12px;
    border: none;
    border-left: 1px solid rgba(34, 197, 94, 0.5);
    border-right: 1px solid rgba(34, 197, 94, 0.5);
    border-bottom: 1px solid rgba(34, 197, 94, 0.5);
    background: linear-gradient(180deg, #0a1014 0%, #060a0c 100%);
    box-shadow:
        0 0 42px rgba(34, 197, 94, 0.2),
        0 24px 54px rgba(0, 0, 0, 0.62);
    overscroll-behavior: contain;
    overflow: hidden;
}
.topbar-user-dropdown.is-open .topbar-user-menu-panel {
    display: flex;
}

@keyframes topbar-user-menu-panel-drop {
    from {
        opacity: 0;
        transform: translateY(-14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 999px) {
    .topbar-user-menu-panel {
        position: fixed;
        top: calc(env(safe-area-inset-top, 0px) + var(--topbar-bar-h, 52px) + 8px);
        right: max(6px, env(safe-area-inset-right, 0px));
        left: auto;
        width: min(288px, calc(100vw - 44px));
        max-width: none;
        border-radius: 14px;
        border-top: 1px solid rgba(34, 197, 94, 0.45);
        transform-origin: top right;
    }
    .topbar-user-dropdown.is-open .topbar-user-menu-panel {
        animation: topbar-user-menu-panel-drop 0.26s cubic-bezier(0.22, 1, 0.36, 1) both;
    }
}
@media (max-width: 999px) and (prefers-reduced-motion: reduce) {
    .topbar-user-dropdown.is-open .topbar-user-menu-panel {
        animation: none;
    }
}

.topbar-user-menu-head {
    padding: 16px 16px 12px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.14);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.topbar-user-menu-head__profile {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
}
.topbar-user-menu-head__avatar {
    flex-shrink: 0;
}
.topbar-user-menu-head__identity {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.topbar-user-menu-head__name {
    font-size: 1.12rem;
    font-weight: 800;
    color: #f8fafc;
    line-height: 1.2;
}
.topbar-user-menu-head__meta {
    font-size: 0.82rem;
    font-weight: 600;
    color: #94a3b8;
    line-height: 1.35;
}
.topbar-user-menu-head__name,
.topbar-user-menu-head__meta {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.topbar-user-menu-list {
    display: flex;
    flex-direction: column;
    padding: 4px 0 8px;
}
.topbar-user-menu-list > *:not(:last-child) {
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}
.topbar-user-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: 0;
    padding: 14px 16px;
    text-align: left;
    text-decoration: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    border: none;
    background: transparent;
    border-radius: 0;
    box-sizing: border-box;
    transition: background 0.14s ease;
    -webkit-tap-highlight-color: transparent;
}
.topbar-user-menu-item:hover {
    background: rgba(255, 255, 255, 0.05);
}
.topbar-user-menu-item:focus-visible {
    outline: 2px solid rgba(74, 222, 128, 0.55);
    outline-offset: -2px;
    z-index: 1;
}
.topbar-user-menu-item__icon {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    color: #ecfdf5;
    background: linear-gradient(155deg, #16a34a 0%, #14532d 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 2px 8px rgba(0, 0, 0, 0.35);
}
.topbar-user-menu-item__icon--danger {
    color: #fecaca;
    background: linear-gradient(155deg, #991b1b 0%, #450a0a 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 2px 8px rgba(0, 0, 0, 0.35);
}
.topbar-user-menu-item__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
    flex: 1 1 auto;
}
.topbar-user-menu-item__title {
    font-size: 1rem;
    font-weight: 800;
    color: #f8fafc;
    line-height: 1.2;
}
.topbar-user-menu-item__desc {
    font-size: 0.81rem;
    font-weight: 500;
    color: #94a3b8;
    line-height: 1.35;
    white-space: normal;
}
.topbar-user-menu-item__chevron {
    color: #94a3b8;
    font-size: 0.9rem;
    flex-shrink: 0;
    opacity: 0.95;
}
.topbar-user-menu-item--logout .topbar-user-menu-item__title {
    color: #fca5a5;
}
.topbar-user-menu-item--logout:hover {
    background: rgba(127, 29, 29, 0.12);
}
.topbar-user-menu-item--logout:focus-visible {
    outline-color: rgba(248, 113, 113, 0.65);
}
.topbar-user-menu-logout-form {
    margin: 0;
    padding: 0;
    display: block;
}
.topbar-user-menu-foot {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 14px 14px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(34, 197, 94, 0.28);
    background: linear-gradient(180deg, rgba(3, 10, 8, 0.95) 0%, rgba(5, 11, 10, 0.9) 100%);
    color: #94a3b8;
    font-size: 0.84rem;
    font-weight: 600;
}
.topbar-user-menu-foot i {
    color: #22c55e;
}

.auth-oauth-email {
    margin: 0 0 14px;
    font-size: 0.95rem;
    color: #334155;
}
.auth-oauth-email span {
    display: block;
    font-weight: 600;
    margin-bottom: 4px;
    color: #475569;
}
.auth-footer-logout {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid #e2e8f0;
}

.perfil-modal-body {
    padding-top: 0;
    min-width: 0;
}

.page-profile #perfilAuthShell .perfil-modal-body > .subnav {
    margin-left: 0;
    margin-right: 0;
    margin-top: -4px;
    padding: 4px 16px 0;

    background: linear-gradient(
        135deg,
        color-mix(in srgb, #1f7a3a 92%, #0d3d1f) 0%,
        #1f7a3a 48%,
        color-mix(in srgb, #1f7a3a 75%, #2d9f52) 100%
    );
    border-bottom: none;
}
.page-profile #perfilAuthShell .perfil-modal-body > .subnav a {
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-bottom: 0;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.92);
    font-weight: 600;
}
.page-profile #perfilAuthShell .perfil-modal-body > .subnav a:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
}
.page-profile #perfilAuthShell .perfil-modal-body > .subnav a.active {
    background: var(--rm-month-active-cell);
    color: var(--rm-month-active-text);
    border-color: rgba(255, 255, 255, 0.38);
    border-bottom: 1px solid #ffffff;
    font-weight: 700;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.page-profile #perfilAuthShell .perfil-modal-body > .subnav + .panel {
    margin-left: 0;
    margin-right: 0;
}
.page-profile #perfilAuthShell .perfil-modal-body > .panel.perfil-tab-panel {
    margin-bottom: 0;
}
.page-profile .perfil-layout {
    min-width: 0;
    width: 100%;
    max-width: 100%;
}
.page-profile .perfil-form {
    min-width: 0;
    max-width: 100%;
    width: 100%;
}
.page-profile .perfil-form label {
    min-width: 0;
    max-width: 100%;
}
.page-profile .perfil-form input,
.page-profile .perfil-form select {
    min-width: 0;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
}

.page-profile .perfil-form input:not([type="hidden"]),
.page-profile .perfil-form select {
    padding: 10px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 1rem;
    line-height: 1.35;
    font-family: inherit;
    background: #fff;
    color: #1f2937;
    min-height: 44px;
}
.page-profile .perfil-form select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2.25rem;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23475569' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-color: #fff;
}
.page-profile .perfil-form input:focus,
.page-profile .perfil-form select:focus {
    outline: none;
    border-color: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
}
.page-profile .perfil-form input[type="date"] {
    min-height: 44px;
}
.page-profile .perfil-form input:disabled {
    opacity: 0.85;
    cursor: not-allowed;
}
@media (min-width: 520px) {
    .page-profile .perfil-row-2 {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}
.perfil-saved-msg {
    margin: 0 0 16px;
    padding: 10px 14px;
    border-radius: 8px;
    background: rgba(18, 111, 56, 0.12);
    color: #126f38;
    font-weight: 700;
    font-size: 0.95rem;
}
.perfil-layout {
    display: grid;
    gap: 24px;
    align-items: start;
}
@media (min-width: 720px) {
    .perfil-layout {
        grid-template-columns: 160px 1fr;
        gap: 32px;
    }
    .perfil-profile-top {
        grid-column: 1;
    }
    .perfil-form {
        grid-column: 2;
        grid-row: 1 / span 3;
    }
}
.perfil-avatar-block {
    position: relative;
    width: 120px;
    margin: 0 auto;
    text-align: center;
}
.perfil-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(18, 111, 56, 0.35);
    display: block;
    margin: 0 auto 12px;
}
.perfil-avatar--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(18, 111, 56, 0.15);
    color: #126f38;
    font-size: 2.5rem;
}
.perfil-avatar-upload-form {
    position: absolute;
    right: 4px;
    bottom: 10px;
    margin: 0;
}
.perfil-avatar-upload-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid rgba(2, 6, 23, 0.95);
    background: linear-gradient(155deg, #22c55e 0%, #15803d 100%);
    color: #ffffff;
    font-size: 0.92rem;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
    overflow: hidden;
}
.perfil-avatar-upload-btn:hover {
    background: linear-gradient(155deg, #4ade80 0%, #16a34a 100%);
}
.perfil-avatar-upload-btn .perfil-avatar-upload-input,
.perfil-avatar-upload-form input[type="file"].perfil-avatar-upload-input {
    display: none !important;
}
.perfil-avatar-upload-msg {
    margin: 8px 0 0;
    font-size: 0.82rem;
    max-width: 220px;
}
.perfil-footnote {
    font-size: 0.82rem;
    color: #4b5563;
    line-height: 1.4;
    margin: 0;
}
.perfil-form .perfil-select {
    width: 100%;
    max-width: 100%;
}
.perfil-form .perfil-state-text {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
.perfil-form .perfil-readonly {
    opacity: 0.85;
    cursor: not-allowed;
}
.perfil-language-picker {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}
.perfil-language-picker > legend {
    margin: 0 0 10px;
    padding: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: #1f2937;
}
.perfil-language-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 8px 10px 0;
    padding: 6px 12px 6px 8px;
    border: 2px solid #0f172a;
    border-radius: 999px;
    background: #ffffff;
    color: #0f172a;
    cursor: pointer;
    user-select: none;
    line-height: 1;
}
.perfil-language-chip input[type="radio"] {
    position: absolute;
    opacity: 0;
    inset: 0;
    cursor: pointer;
}
.perfil-language-chip__flag {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.3);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
    flex-shrink: 0;
}
.perfil-language-chip__code {
    font-size: 0.84rem;
    font-weight: 800;
    letter-spacing: 0.03em;
}
.perfil-language-chip__name {
    font-size: 1.02rem;
    font-weight: 700;
}
.perfil-language-chip:has(input:checked) {
    border-color: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
}
.perfil-language-chip:has(input:focus-visible) {
    outline: 2px solid #22c55e;
    outline-offset: 2px;
}
.perfil-flag--de { background: linear-gradient(180deg, #111827 33%, #ef4444 33% 66%, #facc15 66%); }
.perfil-flag--es { background: linear-gradient(180deg, #dc2626 25%, #facc15 25% 75%, #dc2626 75%); }
.perfil-flag--fr { background: linear-gradient(90deg, #2563eb 33%, #ffffff 33% 66%, #ef4444 66%); }
.perfil-flag--en {
    background:
        linear-gradient(90deg, transparent 44%, #ffffff 44% 56%, transparent 56%),
        linear-gradient(180deg, transparent 44%, #ffffff 44% 56%, transparent 56%),
        linear-gradient(90deg, transparent 46%, #ef4444 46% 54%, transparent 54%),
        linear-gradient(180deg, transparent 46%, #ef4444 46% 54%, transparent 54%),
        #1d4ed8;
}
.perfil-flag--it { background: linear-gradient(90deg, #16a34a 33%, #ffffff 33% 66%, #dc2626 66%); }
.perfil-flag--pt { background: linear-gradient(90deg, #16a34a 40%, #dc2626 40%); }
.perfil-flag--ru { background: linear-gradient(180deg, #ffffff 33%, #2563eb 33% 66%, #dc2626 66%); }
.perfil-flag--zh { background: radial-gradient(circle at 34% 32%, #fde047 8%, transparent 9%), #ef4444; }
.perfil-flag--ko { background: radial-gradient(circle at 52% 50%, #2563eb 30%, #ef4444 31% 60%, #ffffff 61%); }
.perfil-row-2 {
    display: grid;
    gap: 12px;
}
@media (min-width: 520px) {
    .perfil-row-2 {
        grid-template-columns: 1fr 1fr;
    }
}
.page-profile .perfil-form .perfil-submit {
    margin-top: 12px;
    width: auto;
    max-width: min(320px, 100%);
    align-self: flex-start;
    padding-left: 22px;
    padding-right: 22px;
}
.perfil-password-wrap {
    grid-column: 1 / -1;
    margin-top: 4px;
    padding-top: 22px;
    border-top: 1px solid #e5e7eb;
}
.perfil-password-title {
    margin: 0 0 14px;
    font-size: 1.05rem;
    font-weight: 700;
    color: #1f2937;
}
.perfil-msg {
    margin: 0 0 14px;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.95rem;
    line-height: 1.4;
}
.perfil-msg--ok {
    background: rgba(18, 111, 56, 0.12);
    color: #126f38;
    font-weight: 700;
}
.perfil-msg--err {
    background: rgba(185, 28, 28, 0.1);
    color: #991b1b;
    font-weight: 600;
}
.perfil-msg--warn {
    background: rgba(180, 130, 20, 0.12);
    color: #92400e;
    font-weight: 600;
}
.page-profile .perfil-billing-grid {
    display: grid;
    gap: 10px 16px;
    margin: 12px 0 18px;
    max-width: 520px;
}
.page-profile .perfil-billing-row {
    display: grid;
    grid-template-columns: minmax(120px, 38%) 1fr;
    gap: 8px 12px;
    align-items: baseline;
    font-size: 0.95rem;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 8px;
}
.page-profile .perfil-billing-row:last-child {
    border-bottom: none;
}
.page-profile .perfil-billing-k {
    color: #64748b;
    font-weight: 600;
}
.page-profile .perfil-billing-v {
    color: #0f172a;
}
.page-profile .perfil-billing-upsell {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px 14px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.15), rgba(18, 111, 56, 0.08));
    border: 1px solid rgba(251, 191, 36, 0.35);
    margin: 14px 0 18px;
    max-width: 560px;
}
.page-profile .perfil-billing-upsell__text {
    margin: 0;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.45;
}
.page-profile .perfil-billing-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}
.page-profile .perfil-billing-portal-msg {
    min-height: 1.2em;
    color: #991b1b;
}
.page-profile .perfil-billing-subtitle {
    margin: 18px 0 8px;
    font-size: 1rem;
    color: #0f172a;
}
.page-profile .perfil-billing-history {
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 420px;
}
.page-profile .perfil-billing-history li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    padding: 6px 0;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.95rem;
}
.page-profile .perfil-billing-history__sep {
    color: #94a3b8;
}
.page-profile .perfil-billing-history__ok {
    margin-left: 4px;
}
.page-profile .perfil-billing-progress {
    margin: 20px 0 0;
    padding: 12px 14px;
    border-radius: 10px;
    background: rgba(18, 111, 56, 0.08);
    color: #126f38;
    font-size: 0.98rem;
    line-height: 1.45;
    max-width: 520px;
}

.page-profile #perfilAuthShell .perfil-billing-desktop {
    display: block;
}
.page-profile #perfilAuthShell .perfil-billing-mobile {
    display: none;
}
.page-profile #perfilAuthShell .perfil-billing-mobile .perfil-billing-mobile-footer-wrap {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 10px;
    padding-top: 10px;
    padding-bottom: 6px;
    border-top: 1px solid rgba(30, 41, 59, 0.9);
}
.page-profile #perfilAuthShell .perfil-billing-mobile .perfil-billing-card {
    margin: 0 0 14px;
    padding: 14px 12px 6px;
    border-radius: 14px;
    border: 1px solid rgba(71, 85, 105, 0.72);
    background: rgba(8, 12, 18, 0.94);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}
.page-profile #perfilAuthShell .perfil-billing-mobile .perfil-billing-card__title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 4px;
    padding: 0 2px 12px;
    font-size: 1.02rem;
    font-weight: 800;
    color: #f8fafc;
    border-bottom: 1px solid rgba(55, 65, 81, 0.65);
    width: 100%;
    box-sizing: border-box;
}
.page-profile #perfilAuthShell .perfil-billing-mobile .perfil-billing-card__title-star {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    border: 1.5px solid #4ade80;
    border-radius: 5px;
    color: #4ade80;
    font-size: 0.62rem;
    flex-shrink: 0;
    box-sizing: border-box;
}
.page-profile #perfilAuthShell .perfil-billing-mobile .perfil-billing-card__title-star .fa-star {
    line-height: 1;
}
.page-profile #perfilAuthShell .perfil-billing-mobile .perfil-billing-info-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.page-profile #perfilAuthShell .perfil-billing-mobile .perfil-billing-info-row {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: flex-start;
    gap: 10px 8px;
    padding: 5px 0;
    border-bottom: 1px solid rgba(30, 41, 59, 0.95);
    font-size: 0.92rem;
}
.page-profile #perfilAuthShell .perfil-billing-mobile .perfil-billing-info-row:last-child {
    border-bottom: none;
}
.page-profile #perfilAuthShell .perfil-billing-mobile .perfil-billing-info-row__icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid rgba(74, 222, 128, 0.45);
    background: rgba(15, 23, 42, 0.5);
    color: #4ade80;
    font-size: 0.95rem;
    box-sizing: border-box;
    margin-top: 2px;
    flex-shrink: 0;
}
.page-profile #perfilAuthShell .perfil-billing-mobile .perfil-billing-info-row__icon-wrap--round {
    border-radius: 999px;
}
.page-profile #perfilAuthShell .perfil-billing-mobile .perfil-billing-info-row__text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.page-profile #perfilAuthShell .perfil-billing-mobile .perfil-billing-info-row__label {
    font-weight: 700;
    color: #f8fafc;
    line-height: 1.2;
}
.page-profile #perfilAuthShell .perfil-billing-mobile .perfil-billing-info-row__hint {
    font-size: 0.76rem;
    font-weight: 500;
    color: #94a3b8;
    line-height: 1.3;
}
.page-profile #perfilAuthShell .perfil-billing-mobile .perfil-billing-info-row__value {
    text-align: right;
    justify-self: end;
    min-width: 0;
    max-width: none;
}
.page-profile #perfilAuthShell .perfil-billing-mobile .perfil-billing-info-row__value--plain {
    color: #f8fafc;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: normal;
    word-break: break-word;
}
.page-profile #perfilAuthShell .perfil-billing-mobile .perfil-billing-info-row__value--plain strong {
    color: #f8fafc;
    font-weight: 800;
}
.page-profile #perfilAuthShell .perfil-billing-mobile .perfil-billing-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 11px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.25;
    white-space: normal;
    max-width: 100%;
    text-align: right;
    word-break: break-word;
    hyphens: auto;
}
.page-profile #perfilAuthShell .perfil-billing-mobile .perfil-billing-pill--plan {
    background: linear-gradient(180deg, #166534 0%, #0f3d22 100%);
    color: #ecfdf5;
    border: 1px solid rgba(74, 222, 128, 0.35);
    box-shadow: 0 2px 8px rgba(15, 61, 34, 0.45);
}
.page-profile #perfilAuthShell .perfil-billing-mobile .perfil-billing-pill--status {
    border-width: 2px;
    border-style: solid;
    font-weight: 700;
}
.page-profile #perfilAuthShell .perfil-billing-mobile .perfil-billing-pill--status-active {
    background: linear-gradient(180deg, #22c55e 0%, #15803d 100%);
    border-color: rgba(134, 239, 172, 0.55);
    color: #f0fdf4;
}
.page-profile #perfilAuthShell .perfil-billing-mobile .perfil-billing-pill--status-trial {
    background: rgba(15, 23, 42, 0.45);
    border-color: #eab308;
    color: #fef9c3;
    box-shadow: 0 0 0 1px rgba(234, 179, 8, 0.12);
}
.page-profile #perfilAuthShell .perfil-billing-mobile .perfil-billing-pill--status-trial .perfil-billing-pill__clock {
    color: #fde047;
    font-size: 0.74rem;
}
.page-profile #perfilAuthShell .perfil-billing-mobile .perfil-billing-pill--status-warn {
    background: rgba(127, 29, 29, 0.25);
    border-color: #f87171;
    color: #fecaca;
}
.page-profile #perfilAuthShell .perfil-billing-mobile .perfil-billing-pill--status-neutral {
    background: rgba(30, 41, 59, 0.65);
    border-color: rgba(148, 163, 184, 0.45);
    color: #e2e8f0;
}
.page-profile #perfilAuthShell .perfil-billing-mobile .perfil-billing-mobile-footer-wrap .perfil-billing-actions--portal {
    margin: 0;
}
.page-profile #perfilAuthShell .perfil-billing-mobile .perfil-billing-mobile-footer-wrap .perfil-billing-upsell.perfil-billing-upsell--promo {
    display: flex;
    max-width: none;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 12px 14px;
    align-items: center;
    gap: 12px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(66, 32, 6, 0.55) 0%, rgba(30, 20, 8, 0.75) 100%);
    border: 1px solid rgba(212, 175, 55, 0.42);
    box-shadow: inset 0 1px 0 rgba(253, 224, 71, 0.08);
}
.page-profile #perfilAuthShell .perfil-billing-mobile .perfil-billing-mobile-footer-wrap .perfil-billing-upsell--promo .perfil-billing-upsell__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(212, 175, 55, 0.2);
    color: #fde047;
    flex-shrink: 0;
    font-size: 1.05rem;
}
.page-profile #perfilAuthShell .perfil-billing-mobile .perfil-billing-mobile-footer-wrap .perfil-billing-upsell--promo .perfil-billing-upsell__text {
    flex: 1;
    margin: 0;
    min-width: 0;
    font-weight: 700;
    font-size: 0.9rem;
    line-height: 1.4;
    color: #f8fafc;
}
.page-profile #perfilAuthShell .perfil-billing-mobile .perfil-billing-mobile-footer-wrap .perfil-billing-upsell--promo .perfil-billing-upsell__chev {
    color: rgba(248, 250, 252, 0.95);
    font-size: 0.85rem;
    flex-shrink: 0;
    opacity: 1;
}
.page-profile #perfilAuthShell .perfil-billing-mobile .perfil-billing-mobile-footer-wrap .perfil-billing-actions--portal {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0 0 12px;
}
.page-profile #perfilAuthShell .perfil-billing-mobile .perfil-billing-mobile-footer-wrap .perfil-billing-actions__pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 100%;
}
.page-profile #perfilAuthShell .perfil-billing-mobile .perfil-billing-mobile-footer-wrap .perfil-billing-portal-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 10px;
    border-radius: 10px;
    font-size: 0.78rem;
    font-weight: 700;
    font-family: inherit;
    line-height: 1.25;
    cursor: pointer;
    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease,
        box-shadow 0.15s ease;
}
.page-profile #perfilAuthShell .perfil-billing-mobile .perfil-billing-mobile-footer-wrap .perfil-billing-portal-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.page-profile #perfilAuthShell .perfil-billing-mobile .perfil-billing-mobile-footer-wrap .perfil-billing-portal-btn--ghost {
    background: rgba(15, 23, 42, 0.92);
    border: 1px solid rgba(74, 222, 128, 0.32);
    color: #f8fafc;
}
.page-profile #perfilAuthShell .perfil-billing-mobile .perfil-billing-mobile-footer-wrap .perfil-billing-portal-btn--ghost .fa-right-left {
    color: #4ade80;
}
.page-profile #perfilAuthShell .perfil-billing-mobile .perfil-billing-mobile-footer-wrap .perfil-billing-portal-btn--ghost:hover {
    background: rgba(30, 41, 59, 0.95);
    border-color: rgba(74, 222, 128, 0.48);
}
.page-profile #perfilAuthShell .perfil-billing-mobile .perfil-billing-mobile-footer-wrap .perfil-billing-portal-btn--danger-outline .fa-circle-xmark {
    color: #f87171;
}
.page-profile #perfilAuthShell .perfil-billing-mobile .perfil-billing-mobile-footer-wrap .perfil-billing-portal-btn--danger-outline {
    background: rgba(15, 23, 42, 0.35);
    border: 1px solid rgba(248, 113, 113, 0.65);
    color: #fecaca;
}
.page-profile #perfilAuthShell .perfil-billing-mobile .perfil-billing-mobile-footer-wrap .perfil-billing-portal-btn--danger-outline:hover {
    background: rgba(127, 29, 29, 0.22);
    border-color: #f87171;
    color: #fecaca;
}
.page-profile #perfilAuthShell .perfil-billing-mobile .perfil-billing-mobile-footer-wrap .perfil-billing-portal-btn--primary {
    width: 100%;
    box-sizing: border-box;
    justify-content: flex-start;
    gap: 12px;
    padding: 12px 14px;
    min-height: 48px;
    border: none;
    background: linear-gradient(180deg, #22c55e 0%, #15803d 100%);
    color: #f0fdf4;
    box-shadow: 0 4px 14px rgba(21, 128, 61, 0.45);
}
.page-profile #perfilAuthShell .perfil-billing-mobile .perfil-billing-mobile-footer-wrap .perfil-billing-portal-btn--primary:hover {
    filter: brightness(1.05);
    box-shadow: 0 6px 18px rgba(21, 128, 61, 0.5);
}
.page-profile #perfilAuthShell .perfil-billing-mobile .perfil-billing-mobile-footer-wrap .perfil-billing-portal-btn--primary span {
    flex: 1;
    text-align: center;
    font-size: 0.92rem;
    font-weight: 800;
}
.page-profile #perfilAuthShell .perfil-billing-mobile .perfil-billing-mobile-footer-wrap .perfil-billing-portal-btn--primary .fa-credit-card {
    font-size: 1.02rem;
    opacity: 0.95;
}
.page-profile #perfilAuthShell .perfil-billing-mobile .perfil-billing-mobile-footer-wrap .perfil-billing-portal-btn__chev-r {
    margin-left: auto;
    font-size: 0.88rem;
    color: #f8fafc;
    opacity: 0.95;
}
.page-profile #perfilAuthShell .perfil-billing-mobile .perfil-billing-mobile-footer-wrap .perfil-billing-renewal {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 0;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid rgba(71, 85, 105, 0.72);
    background: rgba(6, 10, 16, 0.82);
}
.page-profile #perfilAuthShell .perfil-billing-mobile .perfil-billing-mobile-footer-wrap .perfil-billing-renewal .fa-circle-info {
    color: #4ade80;
    margin-top: 2px;
    flex-shrink: 0;
}
.page-profile #perfilAuthShell .perfil-billing-mobile .perfil-billing-mobile-footer-wrap .perfil-billing-renewal p {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.45;
    color: #94a3b8;
}
.page-profile #perfilAuthShell .perfil-billing-mobile .perfil-billing-mobile-footer-wrap .perfil-billing-renewal strong {
    color: #e2e8f0;
    font-weight: 700;
}
.page-profile #perfilAuthShell .perfil-billing-mobile-bottom {
    display: none;
}
.page-profile #perfilAuthShell .perfil-billing-mobile-bottom .perfil-billing-actions--portal {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0 0 12px;
}
.page-profile #perfilAuthShell .perfil-billing-mobile-bottom .perfil-billing-actions__pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 100%;
}
.page-profile #perfilAuthShell .perfil-billing-mobile-bottom .perfil-billing-portal-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 10px;
    border-radius: 10px;
    font-size: 0.78rem;
    font-weight: 700;
    font-family: inherit;
    line-height: 1.25;
    cursor: pointer;
}
.page-profile #perfilAuthShell .perfil-billing-mobile-bottom .perfil-billing-portal-btn--ghost {
    background: rgba(15, 23, 42, 0.92);
    border: 1px solid rgba(74, 222, 128, 0.32);
    color: #f8fafc;
}
.page-profile #perfilAuthShell .perfil-billing-mobile-bottom .perfil-billing-portal-btn--danger-outline {
    background: rgba(15, 23, 42, 0.92);
    border: 1px solid rgba(248, 113, 113, 0.5);
    color: #fecaca;
}
.page-profile #perfilAuthShell .perfil-billing-mobile-bottom .perfil-billing-portal-btn--primary {
    width: 100%;
    border: 1px solid rgba(34, 197, 94, 0.76);
    background: linear-gradient(180deg, #1ea34a 0%, #167c38 100%);
    color: #ecfdf5;
    box-shadow: 0 7px 18px rgba(15, 111, 56, 0.35);
}
.page-profile #perfilAuthShell .perfil-billing-mobile-bottom .perfil-billing-renewal {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(71, 85, 105, 0.72);
    background: rgba(6, 10, 16, 0.82);
}
@media (max-width: 767px) {
    .page-profile #perfilAuthShell .perfil-billing-panel {
        display: flex;
        flex-direction: column;
    }
    .page-profile #perfilAuthShell .perfil-billing-mobile {
        order: 1;
    }
    .page-profile #perfilAuthShell .perfil-billing-mobile-bottom {
        order: 2;
    }
    .page-profile #perfilAuthShell .perfil-billing-desktop {
        display: block !important;
        order: 2;
        margin-top: 0;
    }
    .page-profile #perfilAuthShell .perfil-billing-desktop .perfil-billing-grid {
        display: none !important;
    }
    .page-profile #perfilAuthShell .perfil-billing-desktop .perfil-billing-upsell {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 0 0 2px;
        padding: 5px 5px;
        border-radius: 12px;
        background: linear-gradient(135deg, rgba(66, 32, 6, 0.55) 0%, rgba(30, 20, 8, 0.75) 100%);
        border: 1px solid rgba(212, 175, 55, 0.42);
    }
    .page-profile #perfilAuthShell .perfil-billing-desktop .perfil-billing-upsell__icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        border-radius: 6px;
        background: rgba(212, 175, 55, 0.18);
        font-size: 0.85rem;
    }
    .page-profile #perfilAuthShell .perfil-billing-desktop .perfil-billing-upsell__text {
        margin: 0;
        flex: 1;
        color: #f8fafc;
        font-weight: 500;
        font-size: 12px;
    }
    .page-profile #perfilAuthShell .perfil-billing-desktop .perfil-billing-upsell::after {
        content: "\f054";
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        color: rgba(248, 250, 252, 0.95);
        font-size: 0.8rem;
    }
    .page-profile #perfilAuthShell .perfil-billing-desktop .perfil-billing-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin: 10px 0 0;
    }
    .page-profile #perfilAuthShell .perfil-billing-desktop .perfil-billing-actions .btn {
        width: 100%;
        border-radius: 10px;
        font-weight: 700;
    }
    .page-profile #perfilAuthShell .perfil-billing-desktop .perfil-billing-actions .btn:nth-child(1),
    .page-profile #perfilAuthShell .perfil-billing-desktop .perfil-billing-actions .btn:nth-child(2) {
        background: rgba(15, 23, 42, 0.92) !important;
        color: #e2e8f0 !important;
        border: 1px solid rgba(71, 85, 105, 0.72) !important;
    }
    .page-profile #perfilAuthShell .perfil-billing-desktop .perfil-billing-actions .btn:nth-child(2) {
        color: #f87171 !important;
        border-color: rgba(248, 113, 113, 0.5) !important;
    }
    .page-profile #perfilAuthShell .perfil-billing-desktop .perfil-billing-actions .btn:nth-child(3) {
        grid-column: 1 / -1;
        border: 1px solid rgba(34, 197, 94, 0.76) !important;
        background: linear-gradient(180deg, #1ea34a 0%, #167c38 100%) !important;
        color: #ecfdf5 !important;
        box-shadow: 0 7px 18px rgba(15, 111, 56, 0.35);
    }
    .page-profile #perfilAuthShell .perfil-billing-panel.perfil-billing-has-mobile-bottom .perfil-billing-desktop {
        display: none !important;
    }
    .page-profile #perfilAuthShell .perfil-billing-mobile {
        display: block !important;
    }
    .page-profile #perfilAuthShell .perfil-billing-mobile-bottom {
        display: flex !important;
        flex-direction: column;
        gap: 14px;
        margin-top: 0;
        padding-bottom: 6px;
    }
    .page-profile #perfilAuthShell .perfil-billing-mobile .perfil-billing-mobile-footer-wrap {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    .page-profile #perfilAuthShell .perfil-billing-mobile .perfil-billing-mobile-footer-wrap .perfil-billing-actions--portal {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    .page-profile #perfilAuthShell .perfil-billing-mobile .perfil-billing-mobile-footer-wrap .perfil-billing-actions__pair {
        display: grid !important;
    }
    .page-profile #perfilAuthShell .perfil-billing-mobile .perfil-billing-mobile-footer-wrap .perfil-billing-portal-btn {
        display: inline-flex !important;
    }
    .page-profile #perfilAuthShell .perfil-billing-panel:has(.perfil-billing-mobile) > .perfil-password-title {
        display: none !important;
    }
}
@media (prefers-reduced-motion: reduce) {
    .page-profile #perfilAuthShell .perfil-billing-mobile .perfil-billing-mobile-footer-wrap .perfil-billing-portal-btn {
        transition: none;
    }
}
@media (max-width: 520px) {
    .page-profile .perfil-billing-row {
        grid-template-columns: 1fr;
    }
}
.perfil-password-form .perfil-footnote {
    margin-top: 4px;
    margin-bottom: 8px;
}

.perfil-share-wrap {
    grid-column: 1 / -1;
    margin-top: 8px;
    padding-top: 22px;
    border-top: 1px solid #e5e7eb;
}
.page-profile .perfil-share-title-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.page-profile .perfil-share-title-row .perfil-password-title {
    margin: 0;
}
.page-profile .perfil-share-title-row .page-screen-info-btn {
    color: rgba(190, 250, 200, 0.92);
}
.page-profile .perfil-share-title-row .page-screen-info-btn:hover {
    color: #f8fafc;
    background: rgba(74, 222, 128, 0.14);
}
.page-profile .perfil-share-recipient-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}
.page-profile .perfil-share-recipient-row .perfil-submit {
    margin: 0;
    white-space: nowrap;
    min-height: 44px;
    align-self: stretch;
    display: inline-flex;
    align-items: center;
}
.perfil-share-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
    margin: 10px 0 14px;
}
.perfil-share-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    color: #374151;
    cursor: pointer;
}
.perfil-share-check .fa-solid {
    color: #126f38;
    font-size: 0.92rem;
}
.perfil-share-subtitle {
    margin: 18px 0 10px;
    font-size: 0.98rem;
    font-weight: 700;
    color: #1f2937;
}
.perfil-share-inbox,
.perfil-share-outbox {
    margin-top: 8px;
}
.perfil-share-outbox-list {
    max-height: 460px;
    overflow-y: auto;
    padding-right: 4px;
    scrollbar-gutter: stable;
}
.perfil-share-inbox--accepted .perfil-share-card .perfil-share-modules + .perfil-footnote.perfil-share-accepted-hint {
    margin-top: 8px;
}
.perfil-share-card {
    margin-bottom: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    background: #fafafa;
}
.perfil-share-card__head {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 8px;
}
.perfil-share-card__head .muted {
    font-size: 0.85rem;
    color: #6b7280;
}
.perfil-share-status {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
    margin-left: 8px;
}
.perfil-share-modules span {
    display: inline-block;
    margin-right: 8px;
    margin-bottom: 4px;
    padding: 2px 8px;
    border-radius: 6px;
    background: rgba(18, 111, 56, 0.12);
    color: #126f38;
    font-size: 0.82rem;
    font-weight: 600;
}
.perfil-share-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}
.perfil-share-inline-form {
    display: inline;
}
.perfil-share-card__edit {
    margin-top: 4px;
}
.perfil-share-checks--card {
    margin-top: 4px;
    margin-bottom: 10px;
}
.perfil-share-checks--card .perfil-share-check {
    font-size: 0.9rem;
}
.perfil-share-btn {
    padding: 8px 14px;
    font-size: 0.9rem;
}
@media (max-width: 760px) {
    .page-profile .perfil-share-recipient-row {
        grid-template-columns: 1fr;
        align-items: stretch;
    }
    .page-profile .perfil-share-recipient-row .perfil-submit {
        justify-self: start;
    }
}

.module-share-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 18px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(18, 111, 56, 0.2);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
}
.module-share-tabs__link {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.95rem;
    color: #374151;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.module-share-tabs__link:hover {
    background: rgba(18, 111, 56, 0.1);
    color: #126f38;
}
.module-share-tabs__link.is-active {
    background: linear-gradient(135deg, #126f38, #15803d);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.35);
    box-shadow: 0 4px 12px rgba(18, 111, 56, 0.35);
}
body.page-expenses .expense-account-hero-head__text,
body.page-income .expense-account-hero-head__text,
body.page-savings .expense-account-hero-head__text,
body.page-investments .expense-account-hero-head__text {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
}
.module-share-tabs--hero {
    margin: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    display: inline-flex;
    gap: 0;
    flex-wrap: nowrap;
}
.module-share-tabs--hero .module-share-tabs__link {
    min-height: 26px;
    min-width: 124px;
    width: auto;
    padding: 0 14px;
    border-radius: 0;
    border-color: rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.18);
    color: #f8fafc;
    font-size: 0.92rem;
    box-shadow: none;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
}
.module-share-tabs--hero .module-share-tabs__link + .module-share-tabs__link {
    margin-left: 0;
    border-left: 0;
}
.module-share-tabs--hero .module-share-tabs__link:first-child {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}
.module-share-tabs--hero .module-share-tabs__link:last-child {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}
.module-share-tabs--hero .module-share-tabs__link:hover {
    background: rgba(255, 255, 255, 0.32);
    color: #ffffff;
}
.module-share-tabs--hero .module-share-tabs__link.is-active {
    background: var(--rm-month-active-cell);
    color: var(--rm-month-active-text);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
body.page-expenses .module-share-tabs--hero .gastos-share-tab-form {
    display: inline-flex;
    gap: 0;
    flex-wrap: nowrap;
    margin: 0;
    padding: 0;
}
body.page-expenses .module-share-tabs--hero .gastos-share-tab-form button.module-share-tabs__link {
    font: inherit;
    font-family: inherit;
    cursor: pointer;
}
body.page-expenses .module-share-tabs--hero .gastos-share-tab-form .module-share-tabs__link + .module-share-tabs__link {
    margin-left: 0;
    border-left: 0;
}
body.page-expenses .module-share-tabs--hero .gastos-share-tab-form .module-share-tabs__link:first-of-type {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}
body.page-expenses .module-share-tabs--hero .gastos-share-tab-form .module-share-tabs__link:last-of-type {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}
.shared-owner-banner {
    margin-bottom: 12px;
    padding: 5px 16px;
    min-height: 34px;
    height: auto;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid rgba(21, 115, 49, 0.14);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    overflow: hidden;
}
.shared-owner-banner h2 {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.2;
    color: #157331;
    white-space: nowrap;
}
.shared-owner-banner .muted {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 1.2;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1 1 auto;
}
.shared-module-owner-block {
    margin-top: -6px;
    margin-bottom: 28px;
}
.shared-empty-msg {
    margin: 0;
    padding: 14px;
    color: var(--rm-empty-state-fg);
    font-size: 0.95rem;
}
section.panel:has(> .shared-empty-msg:only-child) {
    background: var(--rm-empty-state-bg);
}
.page-expenses .shared-gastos-intro .gastos-head-panel,
.page-income .shared-gastos-intro .gastos-head-panel,
.page-savings .shared-gastos-intro .gastos-head-panel,
.page-investments .shared-gastos-intro .gastos-head-panel {
    margin-bottom: 12px;
}

.page-dashboard .dashboard-main {
    padding-bottom: 32px;
}
.dashboard-welcome {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0 0 24px;
    padding: 28px 20px 32px;
    border-radius: 20px;
    background:
        radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.65) 0, rgba(255, 255, 255, 0) 42%),
        radial-gradient(circle at 82% 78%, rgba(147, 197, 255, 0.35) 0, rgba(147, 197, 255, 0) 45%),
        linear-gradient(165deg, #e8f4fc 0%, #dbeafe 38%, #eff6ff 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 12px 40px rgba(30, 64, 175, 0.08);
    overflow: hidden;
}
.dashboard-welcome::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(1px 1px at 12% 20%, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(1px 1px at 28% 60%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1px 1px at 72% 30%, rgba(255, 255, 255, 0.65), transparent),
        radial-gradient(1px 1px at 88% 70%, rgba(255, 255, 255, 0.55), transparent);
    pointer-events: none;
    opacity: 0.9;
}
.dashboard-welcome__text {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 520px;
}
.dashboard-welcome__title {
    margin: 0;
    font-size: clamp(1.35rem, 3.5vw, 1.85rem);
    font-weight: 800;
    color: #1e3a5f;
    letter-spacing: -0.02em;
    line-height: 1.2;
}
.dashboard-welcome__brand-rich {
    color: #0f766e;
}
.dashboard-welcome__brand-mind {
    color: #c69b2a;
}
.dashboard-welcome__subtitle {
    margin: 10px 0 0;
    font-size: 1.05rem;
    color: #334155;
    font-weight: 500;
}
.dashboard-welcome__deco {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    width: min(160px, 28vw);
    line-height: 0;
    filter: drop-shadow(0 8px 20px rgba(15, 118, 110, 0.2));
}
.dashboard-welcome__deco--left {
    margin-right: auto;
}
.dashboard-welcome__deco--right {
    margin-left: auto;
    width: auto;
    max-width: min(380px, 52vw);
    min-width: min(220px, 34vw);
}
.dashboard-welcome__img {
    width: 100%;
    height: auto;
    object-fit: contain;
}
.dashboard-welcome__img--guia {
    width: auto;
    max-width: 100%;
    height: clamp(168px, 24vw, 248px);
    margin: 0 auto;
    object-fit: contain;
}

.dashboard-mosaic {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin: 0 0 20px;
}
.dashboard-mosaic-card {
    display: block;
    text-decoration: none;
    color: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow:
        0 4px 6px rgba(0, 0, 0, 0.12),
        0 14px 32px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.dashboard-mosaic-card:hover {
    transform: translateY(-3px);
    box-shadow:
        0 8px 14px rgba(0, 0, 0, 0.16),
        0 20px 44px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.dashboard-mosaic-card__inner {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 12px;
    min-height: 168px;
    padding: 18px 16px 18px 20px;
    position: relative;
}
.dashboard-mosaic-card--gastos .dashboard-mosaic-card__inner {
    background: linear-gradient(145deg, #22c55e 0%, #15803d 50%, #166534 100%);
}
.dashboard-mosaic-card--ingresos .dashboard-mosaic-card__inner {
    background: linear-gradient(145deg, #1f2937 0%, #111827 52%, #030712 100%);
}
.dashboard-mosaic-card--ahorros .dashboard-mosaic-card__inner {
    background: linear-gradient(145deg, #42a5f5 0%, #1565c0 50%, #0d47a1 100%);
}
.dashboard-mosaic-card--inversiones .dashboard-mosaic-card__inner {
    background: linear-gradient(145deg, #7e57c2 0%, #512da8 52%, #311b92 100%);
}
.dashboard-mosaic-card__copy {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}
.dashboard-mosaic-card__label {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.92;
}
.dashboard-mosaic-card__amount {
    margin: 6px 0 0;
    font-size: clamp(1.35rem, 3.2vw, 1.75rem);
    font-weight: 800;
    line-height: 1.15;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.dashboard-mosaic-card__meta {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.78rem;
    font-weight: 600;
    opacity: 0.95;
}
.dashboard-mosaic-card__meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.dashboard-mosaic-card__art {
    position: relative;
    flex: 0 0 auto;
    width: 88px;
    height: 88px;
    align-self: center;
    opacity: 0.95;
}
.dashboard-mosaic-card__art--donut {
    border-radius: 50%;
    background: conic-gradient(
        #ffeb3b 0deg 52deg,
        #4fc3f7 52deg 120deg,
        #ff7043 120deg 200deg,
        #81c784 200deg 280deg,
        #ba68c8 280deg 360deg
    );
    box-shadow:
        0 0 0 10px rgba(255, 255, 255, 0.2) inset,
        0 6px 16px rgba(0, 0, 0, 0.2);
}
.dashboard-mosaic-card__art--donut::after {
    content: "";
    position: absolute;
    inset: 22%;
    border-radius: 50%;
    background: rgba(183, 28, 28, 0.35);
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.25) inset;
}
.dashboard-mosaic-card__art--bars {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 8px;
    padding-bottom: 4px;
    background: transparent;
}
.dashboard-mosaic-card__art--bars::before,
.dashboard-mosaic-card__art--bars::after {
    content: "";
    width: 18px;
    border-radius: 6px 6px 2px 2px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.08);
}
.dashboard-mosaic-card__art--bars::before {
    height: 36px;
}
.dashboard-mosaic-card__art--bars::after {
    height: 56px;
}
.dashboard-mosaic-card__bars-arrow {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 1.35rem;
    color: rgba(255, 255, 255, 0.95);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}
.dashboard-mosaic-card__art--coins {
    background: radial-gradient(circle at 40% 35%, #fff9c4 0, transparent 45%),
        radial-gradient(circle at 70% 65%, #ffd54f 0, transparent 40%);
    border-radius: 50%;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}
.dashboard-mosaic-card__art--coins::after {
    content: "";
    position: absolute;
    inset: 18%;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.45);
}
.dashboard-mosaic-card__art--chart {
    background: linear-gradient(180deg, transparent 55%, rgba(255, 255, 255, 0.35) 55%),
        linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.5) 100%);
    border-radius: 12px;
    border: 2px solid rgba(255, 255, 255, 0.35);
}
.dashboard-mosaic-card__art--chart::before {
    content: "";
    position: absolute;
    left: 10%;
    right: 10%;
    bottom: 28%;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, #ffcdd2, #fff176, #a5d6a7);
    transform: rotate(-8deg);
    box-shadow: 0 -14px 0 -2px rgba(255, 255, 255, 0.25);
}

.dashboard-quick {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 24px;
}
.dashboard-quick__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 14px;
    background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
    border: 1px solid rgba(148, 163, 184, 0.35);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
    color: #1e293b;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.dashboard-quick__item--link:hover {
    background: #fff;
    border-color: rgba(18, 111, 56, 0.35);
}
.dashboard-quick__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 1.15rem;
    color: #fff;
}
.dashboard-quick__icon--balance {
    background: linear-gradient(145deg, #3b82f6, #1d4ed8);
}
.dashboard-quick__icon--goals {
    background: linear-gradient(145deg, #f87171, #dc2626);
}
.dashboard-quick__icon--reports {
    background: linear-gradient(145deg, #94a3b8, #64748b);
}
.dashboard-quick__icon--tips {
    background: linear-gradient(145deg, #fbbf24, #d97706);
}
.dashboard-quick__label {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
}
.dashboard-quick__value {
    display: block;
    margin-top: 4px;
    font-size: 1.05rem;
    color: #0f172a;
}
.dashboard-quick__hint {
    display: block;
    margin-top: 4px;
    font-size: 0.88rem;
    color: #475569;
}

.dashboard-panel-secondary h2 {
    margin-top: 0;
}
.dashboard-mini-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 28px;
}
.dashboard-mini-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.dashboard-mini-stat__label {
    font-size: 0.85rem;
    color: #64748b;
    font-weight: 600;
}

@media (max-width: 900px) {
    .dashboard-mosaic {
        grid-template-columns: 1fr;
    }
    .dashboard-quick {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .dashboard-welcome {
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: center;
        gap: 0;

        padding: 18px min(178px, 48vw) 22px 16px;
    }
    .dashboard-welcome__deco--left {
        display: none;
    }
    .dashboard-welcome__text {
        text-align: left;
        max-width: none;
        flex: 1 1 auto;
        min-width: 0;
    }
    .dashboard-welcome__deco--right {
        position: absolute;
        right: 10px;
        top: 18px;
        bottom: 22px;
        margin-left: 0;
        width: auto;
        max-width: min(168px, calc(48vw - 12px));
        min-width: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .dashboard-welcome__img--guia {
        width: auto;
        height: auto;
        max-height: 100%;
        max-width: 100%;
        margin: 0;
        object-fit: contain;
    }
}
@media (max-width: 520px) {
    .dashboard-quick {
        grid-template-columns: 1fr;
    }
    .dashboard-mosaic-card__inner {
        min-height: 150px;
    }
    .dashboard-mosaic-card__art {
        width: 72px;
        height: 72px;
    }
}

body.page-budgets .expense-account-toolbar-panel h2 {
    color: #3f6212;
}
body.page-budgets .expense-account-toolbar-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px 20px;
}
body.page-budgets .expense-account-toolbar-hint {
    margin: 0;
    font-size: 13px;
    color: #171717;
    flex: 1 1 280px;
}
body.page-budgets .expense-account-toolbar-hint a {
    color: #4d7c0f;
    font-weight: 600;
}
body.page-budgets .expense-account-add-cat-btn {
    font-weight: 700;
}

body.page-expenses .gastos-add-btn,
body.page-income .income-add-btn,
body.page-savings .savings-add-btn,
body.page-investments .investment-add-btn,
body.page-budgets .expense-account-add-cat-btn {
    border: 1px solid var(--rm-registrar-border);
    background: var(--rm-registrar-gradient);
    box-shadow: var(--rm-registrar-shadow);
    color: var(--rm-registrar-text);
    text-shadow: none;
    transition: filter 0.15s ease, box-shadow 0.15s ease;
}
body.page-expenses .gastos-add-btn:hover,
body.page-income .income-add-btn:hover,
body.page-savings .savings-add-btn:hover,
body.page-investments .investment-add-btn:hover,
body.page-budgets .expense-account-add-cat-btn:hover {
    background: var(--rm-registrar-gradient-hover);
    color: var(--rm-registrar-text);
    filter: brightness(1.03);
}

body.page-budgets .panel.expense-empty-panel,
body.page-savings #savingsMainView .panel.expense-empty-panel {
    border: none;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3);
    background: var(--rm-empty-state-bg);
}
body.page-budgets .expense-empty-panel,
body.page-savings #savingsMainView .expense-empty-panel {
    padding: 8px 12px;
}
body.page-budgets .expense-empty-cell,
body.page-savings #savingsMainView .expense-empty-cell {
    margin: 0;
    text-align: center;
    color: var(--rm-empty-state-fg);
    padding: 20px 12px;
}
body.page-budgets .expense-empty-cell strong,
body.page-savings #savingsMainView .expense-empty-cell strong {
    color: var(--rm-empty-state-fg);
    font-weight: 700;
}
body.page-budgets .expense-account-category-panel,
body.page-savings .expense-account-category-panel {
    position: relative;
    border: 1px solid var(--rm-border);
    border-bottom: 5px solid #313131;
    border-radius: 14px;
    background: #141418;
    box-shadow:
        0 0 0 1px rgba(2, 6, 23, 0.45),
        0 12px 28px rgba(0, 0, 0, 0.35);
    margin-bottom: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
    color: #e2e8f0;
}
body.page-budgets .expense-account-category-panel--configured {
    max-height: none;
    min-height: 0;
}

body.page-budgets .expense-account-category-panel--empty {
    box-sizing: border-box;
    min-height: 0;
    height: auto;
    max-height: none;
    border: none;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}

body.page-budgets .expense-account-category-panel--empty:has(.expense-account-footer-actions) {
    height: auto;
    max-height: none;
    min-height: 50px;
}

body.page-budgets .expense-account-category-panel--empty .expense-account-cat-header {
    flex-shrink: 0;
    border: 1px solid var(--rm-border);
    border-bottom: 1px solid var(--cat, #313131);
    border-radius: 14px;
    background:
        linear-gradient(180deg, rgba(66, 73, 83, 0.2) 0%, rgba(20, 27, 37, 0.86) 100%),
        linear-gradient(180deg, #121a25 0%, #0c131d 100%);
}
body.page-budgets .expense-account-category-panel--empty .expense-account-cat-header .cat-header__fa {
    color: #9ca3af !important;
}
body.page-budgets .expense-account-category-panel--empty .expense-account-cat-header__title > span {
    color: #fff !important;
}
body.page-budgets .expense-account-category-panel--empty .expense-account-title-amount--header {
    color: #f1f5f9;
}
body.page-budgets .expense-account-category-panel--empty .expense-account-cat-header__menu .row-action-trigger,
body.page-budgets .expense-account-category-panel--empty .expense-account-cat-header__menu .row-action-menu {
    filter: none !important;
}
body.page-budgets .expense-account-category-panel--empty .expense-account-footer-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    padding-top: 4px;
    padding-bottom: 10px;
    gap: 8px;
}
body.page-budgets .expense-account-category-panel--empty .expense-account-footer-actions .btn {
    flex: 0 0 auto;
    width: auto;
}
body.page-budgets .expense-account-category-panel:has(.row-action-menu:not([hidden])),
body.page-savings .expense-account-category-panel:has(.row-action-menu:not([hidden])) {
    z-index: 25;
    overflow: visible;
}
body.page-budgets .expense-account-footer-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 0 14px 12px;
    margin-top: auto;
    width: 100%;
    box-sizing: border-box;
}
body.page-budgets .expense-account-category-panel .row-action-trigger,
body.page-savings .expense-account-category-panel .row-action-trigger {
    border-color: #166534;
    background: linear-gradient(180deg, #22a34d 0%, #17703a 100%);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.85rem !important;
    width: 1.85rem !important;
    height: 1.85rem !important;
    max-width: 1.85rem !important;
    padding: 0 !important;
    border-radius: 7px !important;
    font-size: 0 !important;
    line-height: 1 !important;
    text-shadow: none;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        0 1px 2px rgba(0, 0, 0, 0.18);
}
body.page-budgets .expense-account-category-panel .row-action-trigger:hover,
body.page-savings .expense-account-category-panel .row-action-trigger:hover {
    border-color: #14532d;
    background: linear-gradient(180deg, #24b053 0%, #166534 100%);
}
body.page-budgets .expense-account-category-panel .row-action-trigger__icon,
body.page-savings .expense-account-category-panel .row-action-trigger__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    line-height: 1;
}
body.page-budgets .expense-account-category-panel .row-action-menu,
body.page-savings .expense-account-category-panel .row-action-menu {
    border-color: rgba(74, 222, 128, 0.45);
    top: calc(100% + 4px);
    bottom: auto;
    right: 0;
    left: auto;
    min-width: 10rem;
    padding: 6px;
    z-index: 50;
    background: linear-gradient(180deg, #25252c 0%, #1c1c22 100%);
    border: 1px solid rgba(74, 222, 128, 0.45);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}
body.page-budgets .expense-account-category-panel .row-action-option,
body.page-savings .expense-account-category-panel .row-action-option {
    width: 100%;
    color: #f4f4f5;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
}
body.page-budgets .expense-account-category-panel .row-action-option:hover,
body.page-savings .expense-account-category-panel .row-action-option:hover {
    background: rgba(74, 222, 128, 0.14);
    color: #dcfce7;
}
body.page-savings .expense-account-category-panel .row-action-option:disabled {
    opacity: 0.42;
    cursor: not-allowed;
    color: rgba(228, 228, 231, 0.55);
}
body.page-savings .expense-account-category-panel .row-action-option:disabled:hover {
    background: transparent;
    color: rgba(228, 228, 231, 0.55);
}
body.page-budgets .expense-account-panels-grid,
body.page-savings .expense-account-panels-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    align-content: start;

    align-items: start;
}
body.page-budgets .expense-account-groups,
body.page-savings .expense-account-groups {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 1220px;
    width: 100%;
    margin: 0 auto;
}

body.page-budgets .expense-account-groups--empty-state .expense-empty-panel {
    box-sizing: border-box;
    width: 100%;
    min-height: min(280px, 46vh);
    display: flex;
    align-items: center;
    justify-content: center;
}
body.page-budgets .expense-account-groups--empty-state .expense-empty-cell {
    margin: 0;
    width: 100%;
}

body.page-savings .expense-account-groups--empty-state .expense-empty-panel {
    min-height: 0;
    display: block;
}
body.page-savings .expense-account-groups--empty-state .expense-empty-cell {
    margin: 0;
    width: 100%;
}
body.page-budgets .expense-account-group-head {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    margin-bottom: 8px;
}
body.page-budgets .expense-account-group-title {
    margin: 0;
    display: flex;
    align-items: center;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}

body.page-budgets .expense-account-group-title-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 40px;
    padding: 10px 18px;
    border-radius: 10px;
    border: 1px solid rgba(74, 222, 128, 0.55);
    background: linear-gradient(180deg, rgba(15, 28, 20, 0.96) 0%, rgba(8, 14, 11, 0.98) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 0 0 1px rgba(74, 222, 128, 0.12),
        0 2px 12px rgba(0, 0, 0, 0.35);
    color: var(--ea-group-color, #d1fae5);
    font-weight: 700;
    font-size: 15px;
    line-height: 1;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
    transition: filter 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
body.page-budgets .expense-account-group-title-tab:hover {
    filter: brightness(1.06);
    border-color: rgba(134, 239, 172, 0.75);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 0 0 1px rgba(74, 222, 128, 0.22),
        0 3px 14px rgba(34, 197, 94, 0.18);
}
body.page-budgets .expense-account-category-panel[style*="E0E1DD"] .expense-account-cat-header,
body.page-budgets .expense-account-category-panel[style*="e0e1dd"] .expense-account-cat-header {
    --ea-cat-accent: #cbd5e1;
}
body.page-budgets .expense-account-category-panel[style*="E0E1DD"] .expense-account-title-amount,
body.page-budgets .expense-account-category-panel[style*="e0e1dd"] .expense-account-title-amount {
    color: #f8fafc;
}

body.page-budgets .expense-account-group-add-btn {
    box-sizing: border-box;
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    padding: 0;
    border-radius: 10px;
    border: 1px solid rgba(212, 175, 55, 0.88);
    background: linear-gradient(180deg, #f7e8b0 0%, #d4af37 42%, #b8941f 100%);
    color: #1a1508;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow:
        0 3px 14px rgba(212, 175, 55, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.48);
    transition: background 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease, border-color 0.15s ease;
}
body.page-budgets .expense-account-group-add-btn:hover {
    background: linear-gradient(180deg, #fff4c8 0%, #e4c24a 45%, #c9a227 100%);
    filter: brightness(1.03);
    border-color: rgba(250, 204, 21, 0.95);
    box-shadow:
        0 4px 18px rgba(250, 204, 21, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.58);
}
body.page-budgets .expense-account-group-add-btn i {
    font-size: 15px;
    font-weight: 800;
    color: inherit;
}
body.page-budgets .expense-account-cat-header,
body.page-savings .expense-account-cat-header {
    border-bottom: 1px solid var(--cat, #313131);
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
    background: #141418;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 10px;
    row-gap: 6px;
    padding: 3.5px 12px;
    box-sizing: border-box;
    --ea-cat-accent: color-mix(in srgb, var(--cat) 32%, #f1f5f9 68%);
}
body.page-budgets .expense-account-cat-header__left,
body.page-savings .expense-account-cat-header__left {
    min-width: 0;
    justify-self: start;
}
body.page-budgets .expense-account-cat-header__right,
body.page-savings .expense-account-cat-header__right {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    min-width: 0;
}
body.page-budgets .expense-account-cat-header__right .expense-account-title-amount--header,
body.page-savings .expense-account-cat-header__right .expense-account-title-amount--header {
    flex: 0 1 auto;
    min-width: 0;
    text-align: right;
}
body.page-budgets .expense-account-cat-header__menu.actions-inner,
body.page-savings .expense-account-cat-header__menu.actions-inner {
    flex: 0 0 auto;
    position: relative;
}
body.page-budgets .expense-account-cat-header__title.cat-header__title,
body.page-savings .expense-account-cat-header__title.cat-header__title {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
    margin: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    color: #f8fafc;
    font-size: 18px;
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: 0.01em;
}

body.page-budgets .expense-account-cat-header__name,
body.page-savings .expense-account-cat-header__name {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}
body.page-budgets .expense-account-cat-header__name--compact {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 13px;
    line-height: 1.08;
    max-height: calc(13px * 1.08 * 2);
}
body.page-budgets .expense-account-cat-header .cat-header__fa,
body.page-savings .expense-account-cat-header .cat-header__fa {
    color: var(--cat);
    font-size: 1.12em;
    line-height: 1;
    flex-shrink: 0;
    opacity: 0.95;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
}
body.page-budgets .expense-account-cat-header__title > span,
body.page-savings .expense-account-cat-header__title > span {
    color: #fff;
    font-weight: 800;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
body.page-budgets .expense-account-title-amount,
body.page-savings .expense-account-title-amount {
    font-weight: 800;
    font-size: 1.05em;
    line-height: inherit;
    color: #f8fafc;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    margin-left: auto;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
body.page-budgets .expense-account-title-amount--header,
body.page-savings .expense-account-title-amount--header {
    margin-left: 0;
    line-height: 1.2;
}
body.page-budgets .expense-account-reset-text {
    margin: 10px 14px 0;
    color: rgba(226, 232, 240, 0.88);
    font-weight: 500;
    font-size: 0.92rem;
    line-height: 1.35;
    text-align: center;
}
body.page-budgets .expense-account-header-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
body.page-budgets .expense-account-budget-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px 18px;
    padding: 12px 14px 16px;
    border-bottom: 1px solid #ecfccb;
}
body.page-budgets .expense-account-budget-bar--over {
    background: #fff1f2;
    border-bottom-color: #fecdd3;
}
body.page-budgets .expense-account-budget-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 140px;
}
body.page-budgets .expense-account-budget-field--static {
    min-width: 260px;
}
body.page-budgets .expense-account-static-value {
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #f8fafc;
    padding: 8px 10px;
    color: #334155;
    font-size: 14px;
    min-height: 38px;
    display: flex;
    align-items: center;
}
body.page-budgets .expense-account-budget-field--readonly .expense-account-readout {
    font-weight: 700;
    font-size: 1.05rem;
    padding: 8px 0 0;
}
body.page-budgets .expense-account-readout--muted {
    color: #a8a29e;
    font-weight: 600;
}
body.page-budgets .expense-account-budget-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: auto;
}
body.page-budgets .expense-account-save-btn {
    border: 1px solid #4d7c0f;
    background: linear-gradient(180deg, #bef264 0%, #65a30d 100%);
    color: #1a2e05;
    font-weight: 700;
}
body.page-budgets .expense-account-spending-btn {
    border: 1px solid rgba(34, 197, 94, 0.55);
    background: linear-gradient(180deg, #22c55e 0%, #15803d 100%);
    color: #f0fdf4;
    font-weight: 800;
    box-shadow: 0 2px 8px rgba(22, 163, 74, 0.25);
}
body.page-budgets .expense-account-spending-btn:hover {
    filter: brightness(1.06);
}
body.page-budgets .expense-account-edit-btn {
    border: 1px solid rgba(74, 222, 128, 0.55);
    background: transparent;
    color: #ecfdf5;
    font-weight: 700;
}
body.page-budgets .expense-account-edit-btn:hover {
    background: rgba(74, 222, 128, 0.1);
    border-color: rgba(74, 222, 128, 0.85);
}
body.page-budgets .expense-account-inline-summary,
body.page-savings .expense-account-inline-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 10px 14px 0;
}
body.page-savings .expense-account-inline-summary--savings-single {
    grid-template-columns: minmax(0, 1fr);
}
body.page-savings .expense-account-inline-summary--savings-single .savings-inline-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    width: 100%;
    min-width: 0;
}
body.page-savings .expense-account-inline-summary--savings-single .savings-inline-summary-row + .savings-inline-summary-row {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(74, 222, 128, 0.18);
}
body.page-savings .expense-account-cat-header .savings-card-amt--native {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: flex-end;
    text-align: right;
}
body.page-savings .expense-account-inline-summary--savings-single .savings-inline-summary-row--meta-detalle {
    align-items: center;
}
body.page-savings .expense-account-inline-summary--savings-single .savings-meta-inline {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
}
body.page-savings .expense-account-inline-summary--savings-single .savings-meta-inline__pct {
    font-weight: 700;
    color: rgba(248, 250, 252, 0.98);
}
body.page-savings .expense-account-inline-summary--savings-single .savings-meta-inline__goal-amt {
    font-size: 0.88rem;
    font-weight: 600;
    color: #fef9c3;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
body.page-savings .expense-account-inline-summary--savings-single .savings-meta-inline--none {
    font-size: 0.88rem;
    font-weight: 600;
    color: rgba(148, 163, 184, 0.96);
}
body.page-savings .expense-account-inline-summary--savings-single .savings-meta-detalle-toggle-wrap {
    flex: 0 0 auto;
    max-width: none;
    margin-left: auto;
}
body.page-savings .expense-account-inline-summary strong {
    font-variant-numeric: tabular-nums;
}
body.page-budgets .expense-account-progress-layout,
body.page-savings .expense-account-progress-layout {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 14px 0;
    align-items: stretch;
    position: relative;
}
body.page-savings .expense-account-progress-layout--savings-card {
    padding-top: 6px;
}
body.page-budgets .expense-account-card-footer,
body.page-savings .expense-account-card-footer {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-width: 0;
    margin-top: 2px;
}
body.page-budgets .expense-account-card-footer--no-refs,
body.page-savings .expense-account-card-footer--no-refs {
    justify-content: flex-end;
}
body.page-budgets .expense-account-card-footer__refs {
    flex: 1 1 0;
    min-width: 0;
    text-align: left;
    padding-bottom: 1px;
}
body.page-budgets .expense-account-card-footer__refs-title {
    display: block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #4ade80;
    margin: 0 0 4px;
    line-height: 1.2;
}
body.page-budgets .expense-account-card-footer__refs-line {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    font-size: 13px;
    line-height: 1.3;
    color: rgba(226, 232, 240, 0.92);
}
body.page-budgets .expense-account-card-footer__refs-period {
    font-weight: 600;
    color: rgba(226, 232, 240, 0.88);
}
body.page-budgets .expense-account-card-footer__refs-amount {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: rgba(248, 250, 252, 0.98);
}
body.page-budgets .expense-account-card-footer__toggle-wrap,
body.page-savings .expense-account-card-footer__toggle-wrap {
    flex: 0 0 auto;
    max-width: 42%;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}
body.page-budgets .expense-account-card-footer__toggle-wrap .expense-account-detail-toggle,
body.page-savings .expense-account-card-footer__toggle-wrap .expense-account-detail-toggle {
    max-width: 100%;
    align-self: flex-end;
}
body.page-budgets .expense-account-detail-sections,
body.page-savings .expense-account-detail-sections {
    display: none;
    position: absolute;
    left: calc(-16px - 1px);
    right: calc(-16px - 1px);
    top: calc(100% + 6px);
    z-index: 35;
    flex-direction: column;
    gap: 10px;
    padding: 10px 14px 12px;
    background: #141418;
    border: 1px solid var(--rm-border);
    border-top: 0;
    border-bottom: 5px solid #313131;
    border-radius: 0 0 14px 14px;
    box-sizing: border-box;
    pointer-events: auto;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
body.page-budgets .expense-account-category-panel.expense-account-category-panel--details-open .expense-account-detail-sections,
body.page-savings .expense-account-category-panel.expense-account-category-panel--details-open .expense-account-detail-sections {
    display: flex;
}
body.page-budgets .expense-account-category-panel.expense-account-category-panel--details-open,
body.page-savings .expense-account-category-panel.expense-account-category-panel--details-open {
    overflow: visible;
    z-index: 45;
}
body.page-budgets .expense-account-category-panel--detail-enabled,
body.page-savings .expense-account-category-panel--detail-enabled {
    cursor: pointer;
    transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
body.page-budgets .expense-account-category-panel--detail-enabled:hover,
body.page-savings .expense-account-category-panel--detail-enabled:hover {
    border-color: rgba(148, 163, 184, 0.55);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32);
    transform: translateY(-1px);
}
body.page-budgets .expense-account-category-panel--detail-enabled:hover .expense-account-detail-sections,
body.page-savings .expense-account-category-panel--detail-enabled:hover .expense-account-detail-sections {
    border-color: rgba(148, 163, 184, 0.55);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32);
}
body.page-budgets .expense-account-detail-toggle,
body.page-savings .expense-account-detail-toggle {
    width: auto;
    min-height: 28px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.42) 0%, rgba(15, 23, 42, 0.28) 100%);
    color: #e2e8f0;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    padding: 3px 8px;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
body.page-budgets .expense-account-detail-toggle:hover,
body.page-savings .expense-account-detail-toggle:hover {
    color: #fff;
    border-color: rgba(148, 163, 184, 0.55);
    background: linear-gradient(180deg, rgba(51, 65, 85, 0.58) 0%, rgba(30, 41, 59, 0.44) 100%);
    box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.25), 0 6px 14px rgba(15, 23, 42, 0.35);
}
body.page-budgets .expense-account-detail-toggle i,
body.page-savings .expense-account-detail-toggle i {
    color: #f8fafc;
    font-size: 0.9rem;
    opacity: 0.98;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    transition: transform 0.2s ease;
}
body.page-budgets .expense-account-category-panel.expense-account-category-panel--details-open .expense-account-detail-toggle i,
body.page-savings .expense-account-category-panel.expense-account-category-panel--details-open .expense-account-detail-toggle i {
    transform: rotate(180deg);
}
body.page-budgets .expense-account-reference-block {
    border: 1px solid rgba(74, 222, 128, 0.28);
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.42);
    padding: 10px 12px;
    width: 100%;
    box-sizing: border-box;
}
body.page-budgets .expense-account-reference-block__title {
    display: block;
    margin: 0 0 8px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #4ade80;
    text-align: center;
}
body.page-budgets .expense-account-reference-line {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 6px 10px;
    font-size: 14px;
    line-height: 1.4;
    color: rgba(226, 232, 240, 0.92);
    text-align: center;
}
body.page-budgets .expense-account-reference-line__period {
    color: rgba(226, 232, 240, 0.88);
    font-weight: 600;
}
body.page-budgets .expense-account-reference-line__amount {
    font-variant-numeric: tabular-nums;
    color: rgba(248, 250, 252, 0.98);
    font-weight: 700;
}
body.page-budgets .expense-account-card-payments,
body.page-savings .expense-account-card-payments {
    margin-top: 6px;
    margin-bottom: 10px;
    width: 100%;
    box-sizing: border-box;
}
body.page-budgets .expense-account-card-payments__title,
body.page-savings .expense-account-card-payments__title {
    display: block;
    margin: 0 0 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(148, 163, 184, 0.95);
}
body.page-budgets .expense-account-card-payments__scroll,
body.page-savings .expense-account-card-payments__scroll {
    max-height: 150px;
    overflow-y: auto;
    overflow-x: auto;
    border-radius: 8px;
    border: 1px solid rgba(71, 85, 105, 0.45);
    background: rgba(15, 23, 42, 0.55);
}
body.page-budgets .expense-account-card-payments__table,
body.page-savings .expense-account-card-payments__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    color: rgba(248, 250, 252, 0.92);
}
body.page-budgets .expense-account-card-payments__table thead th,
body.page-savings .expense-account-card-payments__table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 6px 10px;
    text-align: left;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(148, 163, 184, 0.95);
    background: rgba(30, 41, 59, 0.96);
    border-bottom: 1px solid rgba(71, 85, 105, 0.5);
}
body.page-budgets .expense-account-card-payments__table tbody td,
body.page-savings .expense-account-card-payments__table tbody td {
    padding: 6px 10px;
    border-bottom: 1px solid rgba(51, 65, 85, 0.35);
    font-variant-numeric: tabular-nums;
}
body.page-budgets .expense-account-card-payments__table tbody tr:last-child td,
body.page-savings .expense-account-card-payments__table tbody tr:last-child td {
    border-bottom: none;
}
body.page-savings .expense-account-detail-sections .expense-account-card-payments__table .savings-detail-monto-head,
body.page-savings .expense-account-detail-sections .expense-account-card-payments__table .savings-amount-cell {
    text-align: right;
    white-space: nowrap;
}
body.page-savings .expense-account-detail-sections .expense-account-card-payments__table .savings-amount-cell {
    font-weight: 700;
}
body.page-savings .expense-account-detail-sections .expense-account-card-payments__table tbody tr:hover td {
    background: rgba(30, 41, 59, 0.38);
}
body.page-savings .expense-account-detail-sections .savings-dash-table__empty {
    text-align: center;
    color: rgba(148, 163, 184, 0.9);
    font-size: 13px;
    padding: 12px 10px;
}

body.page-savings .expense-account-progress-layout--savings-card {
    gap: 0;
}
body.page-savings .expense-account-progress-layout--savings-card .expense-account-detail-sections {
    position: static;
    left: auto;
    right: auto;
    top: auto;
    width: calc(100% + 28px);
    max-width: none;
    margin-left: -14px;
    margin-right: -14px;
    padding: 12px 14px 14px;
    flex: none;
    align-self: stretch;
    border: none;
    border-radius: 0 0 12px 12px;
    background: rgba(11, 15, 23, 0.94);
}
body.page-savings .expense-account-detail-sections .expense-account-card-payments__scroll {
    overflow-x: hidden;
}
body.page-savings .expense-account-detail-sections .expense-account-card-payments__table.savings-month-detail-table {
    table-layout: fixed;
}
body.page-savings .expense-account-detail-sections .savings-month-detail-table th:nth-child(1),
body.page-savings .expense-account-detail-sections .savings-month-detail-table td:nth-child(1) {
    width: 44%;
}
body.page-savings .expense-account-detail-sections .savings-month-detail-table th:nth-child(2),
body.page-savings .expense-account-detail-sections .savings-month-detail-table td:nth-child(2) {
    width: 56%;
}
body.page-savings .savings-mv-type {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
body.page-savings .savings-mv-type__arrow {
    flex-shrink: 0;
    font-size: 0.88em;
}
body.page-savings .savings-mv-type--deposit .savings-mv-type__arrow {
    color: #4ade80;
}
body.page-savings .savings-mv-type--withdrawal .savings-mv-type__arrow {
    color: #f87171;
}

body.page-budgets .expense-account-progress-block {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
    min-width: 0;
}
body.page-budgets .expense-account-progress-pct {
    flex: 0 0 auto;
    font-size: 0.875rem;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
}
body.page-budgets .expense-account-progress-pct--ok {
    color: #94a3b8;
}
body.page-budgets .expense-account-progress-pct--over {
    color: #f87171;
}
body.page-budgets .expense-account-progress-status {
    flex: 0 0 auto;
    font-size: 0.875rem;
    line-height: 1.2;
    font-weight: 600;
    color: rgba(248, 250, 252, 0.95);
    white-space: nowrap;
}
body.page-budgets .expense-account-inline-summary div {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 4px;
    color: rgba(226, 232, 240, 0.9);
}
body.page-budgets .expense-account-inline-summary span {
    font-size: 14px;
}
body.page-budgets .expense-account-inline-summary .expense-account-inline-summary__label--spent {
    color: #fff;
    font-weight: 700;
}
body.page-budgets .expense-account-inline-summary strong {
    font-size: 1.05rem;
    line-height: 1.2;
    white-space: nowrap;
    font-weight: 800;
}
body.page-budgets .expense-account-inline-summary strong.expense-account-inline-summary__spent--tier-low {
    color: #16a34a;
}
body.page-budgets .expense-account-inline-summary strong.expense-account-inline-summary__spent--tier-mid {
    color: #eab308;
}
body.page-budgets .expense-account-inline-summary strong.expense-account-inline-summary__spent--tier-high {
    color: #ef4444;
}
body.page-budgets .expense-account-inline-summary__spent--ok strong {
    color: #94a3b8;
}
body.page-budgets .expense-account-inline-summary__spent--over strong {
    color: #f87171;
}
body.page-budgets .expense-account-inline-summary strong.expense-account-inline-summary__spent--ok {
    color: #16a34a;
}
body.page-budgets .expense-account-inline-summary strong.expense-account-inline-summary__spent--warn {
    color: #eab308;
}
body.page-budgets .expense-account-inline-summary strong.expense-account-inline-summary__spent--danger {
    color: #ef4444;
}
body.page-budgets .expense-account-inline-summary strong.expense-account-inline-summary__spent--neutral {
    color: #94a3b8;
}
body.page-budgets .expense-account-inline-summary__avail strong {
    color: rgba(226, 232, 240, 0.82);
    font-weight: 700;
    font-size: 1rem;
}
body.page-budgets .expense-account-progress-wrap {
    padding: 8px 14px 0;
}
body.page-budgets .expense-account-progress-main {
    flex: 1 1 auto;
    min-width: 0;
    height: 14px;
    border-radius: 999px;
    background: linear-gradient(180deg, #0b1220 0%, #141d2e 55%, #1a2436 100%);
    overflow: hidden;
    box-shadow:
        inset 0 2px 5px rgba(0, 0, 0, 0.5),
        inset 0 -1px 0 rgba(255, 255, 255, 0.04),
        0 0 0 1px rgba(15, 23, 42, 0.85);
}
body.page-budgets .expense-account-progress-main__fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    transition: width 0.25s ease;
}

body.page-budgets .expense-account-progress-main__fill--tier-low {
    background: linear-gradient(180deg, #1a4d2e 0%, #14532d 55%, #0f3d24 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
body.page-budgets .expense-account-progress-main__fill--tier-mid {
    background: linear-gradient(180deg, #7a5410 0%, #5c3d0c 55%, #4a3209 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
body.page-budgets .expense-account-progress-main__fill--tier-high {
    background: linear-gradient(180deg, #8b1e1e 0%, #6f1818 55%, #5c1414 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
body.page-budgets .expense-account-progress-main__fill--ok {
    background: linear-gradient(180deg, #1e4a32 0%, #174528 50%, #143d24 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
body.page-budgets .expense-account-progress-main__fill--warn {
    background: linear-gradient(180deg, #7a5410 0%, #5c3d0c 50%, #4d340a 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}
body.page-budgets .expense-account-progress-main__fill--danger {
    background: linear-gradient(180deg, #8b1e1e 0%, #6f1818 50%, #5a1414 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
body.page-budgets .expense-account-progress-main__fill--neutral {
    background: linear-gradient(180deg, #4b5568 0%, #3d4758 50%, #334155 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
@media (max-width: 980px) {
    body.page-budgets .expense-account-panels-grid,
    body.page-savings .expense-account-panels-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 720px) {
    body.page-budgets .expense-account-panels-grid,
    body.page-savings .expense-account-panels-grid {
        grid-template-columns: 1fr;
    }
}
body.page-budgets .expense-account-pace {
    margin: 4px 0 10px;
    padding: 10px 12px;
    border: 1px solid rgba(74, 222, 128, 0.28);
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.42);
    width: 100%;
    box-sizing: border-box;
}
body.page-budgets .expense-account-import-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    border: 1px dashed #84cc16;
    background: linear-gradient(180deg, #f7fee7 0%, #ffffff 100%);
}
body.page-budgets .expense-account-import-banner__text {
    flex: 1 1 260px;
    min-width: 0;
}
body.page-budgets .expense-account-import-banner__text strong {
    color: #365314;
    font-size: 15px;
}
body.page-budgets .expense-account-import-banner .muted {
    color: #171717;
}
body.page-budgets .expense-account-reference-block .modal-field__label {
    color: rgba(226, 232, 240, 0.9);
}
body.page-budgets .expense-account-copy-budgets-all-btn,
body.page-budgets .expense-account-copy-budget-prev-btn {
    border: 1px solid rgba(74, 222, 128, 0.45);
    background: rgba(22, 101, 52, 0.35);
    color: #ecfdf5;
    font-weight: 700;
}
body.page-budgets .expense-account-copy-budget-prev-btn {
    white-space: nowrap;
}
body.page-budgets .expense-account-copy-budgets-all-btn:hover,
body.page-budgets .expense-account-copy-budget-prev-btn:hover {
    filter: brightness(1.04);
}
body.page-budgets .expense-account-footer-actions .expense-account-copy-budget-prev-btn {
    width: auto;
}
body.page-budgets .expense-account-shared-readonly .expense-account-group-add-btn,
body.page-budgets .expense-account-shared-readonly .expense-account-footer-actions,
body.page-budgets .expense-account-shared-readonly .expense-account-panel-err {
    display: none !important;
}
body.page-budgets .expense-account-edit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
body.page-budgets .expense-account-edit-spendings-wrap {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #eef2f0;
}
body.page-budgets .expense-account-edit-spendings-title {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 700;
    color: #171717;
}
body.page-budgets .expense-account-edit-spendings-hint {
    margin: 0 0 10px;
}
body.page-budgets .expense-account-edit-spendings-loading,
body.page-budgets .expense-account-edit-spendings-empty {
    margin: 0 0 8px;
}
body.page-budgets .expense-account-edit-spendings-empty {
    color: var(--rm-empty-state-fg);
    background: var(--rm-empty-state-bg);
    padding: 14px 12px;
    border-radius: 10px;
    text-align: center;
}
body.page-budgets .expense-account-edit-spendings-scroll {
    max-height: min(280px, 42vh);
    overflow: auto;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    background: #fafafa;
}
body.page-budgets .expense-account-edit-spendings-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 0;
    background: #fff;
}
body.page-budgets .expense-account-edit-spendings-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #4d7c0f;
    color: #f7fee7;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 8px 8px;
    text-align: left;
    border-bottom: 1px solid #3f6212;
}
body.page-budgets .expense-account-edit-spendings-table tbody td {
    font-size: 13px;
    padding: 7px 8px;
    vertical-align: middle;
    border-bottom: 1px solid #ecfccb;
    background: #fff;
}
body.page-budgets .expense-account-edit-spendings-table tbody tr:hover td {
    background: #f7fee7;
}
body.page-budgets .expense-account-edit-spendings-table tbody td:nth-child(3) {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
body.page-budgets .expense-account-edit-spendings-actions {
    white-space: nowrap;
    text-align: right;
}
body.page-budgets .expense-account-edit-spendings-actions .btn-sm.btn-modal-primary,
body.page-budgets .expense-account-edit-spendings-actions .btn-sm.btn-modal-secondary,
body.page-budgets .expense-account-edit-spendings-actions .btn-sm.btn-modal-danger {
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 8px;
    font-weight: 600;
    margin-left: 4px;
}
body.page-budgets .expense-account-edit-spendings-actions .ea-sp-del--armed {
    box-shadow: 0 0 0 2px color-mix(in srgb, #f87171 55%, transparent);
}
body.page-savings #savingsCategoryEditModal .expense-account-edit-spendings-actions .savings-mv-del--armed {
    box-shadow: 0 0 0 2px color-mix(in srgb, #f87171 55%, transparent);
}
body.page-budgets .expense-account-edit-spendings-table .modal-field__input,
body.page-budgets .expense-account-edit-spendings-table .modal-field__select {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    font-size: 13px;
    padding: 6px 8px;
}
body.page-budgets .expense-account-pace__head {
    display: block;
    color: rgba(226, 232, 240, 0.9);
    font-size: 13px;
    margin-bottom: 8px;
    text-align: center;
}
body.page-budgets .expense-account-pace__head > span {
    color: rgba(226, 232, 240, 0.88);
    font-weight: 600;
}
body.page-budgets .expense-account-pace__bar-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-width: 0;
    margin-bottom: 8px;
}
body.page-budgets .expense-account-pace__bar {
    flex: 1 1 auto;
    min-width: 0;
    height: 10px;
    border-radius: 999px;
    background: #1e293b;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35);
    margin-bottom: 0;
}
body.page-budgets .expense-account-pace__bar-label {
    flex: 0 0 auto;
    margin: 0;
    color: #bbf7d0;
    font-weight: 800;
    font-size: 13px;
    line-height: 1.2;
    white-space: nowrap;
}
body.page-budgets .expense-account-pace__status {
    color: #bbf7d0;
    font-weight: 800;
}
body.page-budgets .expense-account-pace__fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    transition: width 0.25s ease;
}
body.page-budgets .expense-account-pace__fill--ok {
    background: linear-gradient(90deg, #22c55e 0%, #16a34a 100%);
}
body.page-budgets .expense-account-pace__fill--warn {
    background: linear-gradient(90deg, #facc15 0%, #f59e0b 100%);
}
body.page-budgets .expense-account-pace__fill--danger {
    background: linear-gradient(90deg, #ef4444 0%, #dc2626 100%);
}
body.page-budgets .expense-account-pace__fill--neutral {
    background: linear-gradient(90deg, #64748b 0%, #475569 100%);
}
body.page-budgets .expense-account-pace__foot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-top: 0;
    color: rgba(226, 232, 240, 0.9);
    font-size: 13px;
    text-align: center;
}
body.page-budgets .expense-account-pace__foot > span {
    color: rgba(226, 232, 240, 0.88);
}
body.page-budgets .expense-account-save-btn:hover {
    filter: brightness(1.03);
}
body.page-budgets .expense-account-msg--warn {
    margin: 0 14px 10px;
    padding: 8px 10px;
    border-radius: 8px;
    background: #fef2f2;
    color: #991b1b;
    font-size: 13px;
}
body.page-budgets .expense-account-msg--warn a {
    color: #4d7c0f;
    font-weight: 700;
}
body.page-budgets .expense-account-panel-err {
    margin: 0 14px 10px;
    color: #fecaca;
    font-size: 13px;
    font-weight: 600;
}
body.page-budgets .expense-account-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 420px;
}
body.page-budgets .expense-account-table thead th {
    background: #4d7c0f;
    color: #f7fee7;
    font-size: 12px;
    padding: 8px 10px;
    text-align: left;
}
body.page-budgets .expense-account-amount-col {
    text-align: right;
}
body.page-budgets .expense-account-table tbody td {
    font-size: 14px;
    padding: 8px 10px;
    border-bottom: 1px solid #ecfccb;
    background: #ffffff;
}
body.page-budgets .expense-account-table tbody tr:hover td {
    background: #f7fee7;
}
body.page-budgets .expense-account-table-empty {
    color: var(--rm-empty-state-fg);
    background: var(--rm-empty-state-bg);
    font-size: 13px;
    text-align: center;
    padding: 16px 12px !important;
}
body.page-budgets .expense-account-table-empty a {
    color: var(--rm-empty-state-fg);
    font-weight: 700;
}

body.page-budgets .expense-account-page-hero {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 0 max(12px, env(safe-area-inset-right)) 12px max(12px, env(safe-area-inset-left));
    box-sizing: border-box;
    margin-bottom: 30px;
}
body.page-budgets .expense-account-hero-head {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px 28px;
    flex-wrap: wrap;
    margin-bottom: 10px;
    max-width: 1220px;
    margin-left: auto;
    margin-right: auto;
}
body.page-budgets .expense-account-hero-head__title {
    margin: 0;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    font-size: clamp(1.15rem, 2.2vw, 1.45rem);
    font-weight: 800;
    color: #ffffff;
    line-height: 1.2;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    flex: 0 1 auto;
    min-width: min(100%, 220px);
}
body.page-budgets .expense-account-hero-head__text {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    min-width: 0;
    max-width: 70rem;
    margin-left: auto;
}
body.page-budgets .expense-account-hero-head__desc {
    margin: 0;
    font-size: 0.88rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.45;
}

body.page-budgets .expense-account-hero-month.panel,
body.page-expenses .expense-account-hero-month.panel,
body.page-income .expense-account-hero-month.panel,
body.page-savings .expense-account-hero-month.panel,
body.page-investments .expense-account-hero-month.panel {
    margin-bottom: 12px;
    max-width: 1220px;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}
body.page-budgets .expense-account-month-strip,
body.page-expenses .expense-account-month-strip,
body.page-income .expense-account-month-strip,
body.page-savings .expense-account-month-strip,
body.page-investments .expense-account-month-strip {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    min-width: 0;
    min-height: 40px;
    border-radius: 10px;
    border: 2px solid var(--rm-month-rail-outline);
    background: linear-gradient(180deg, #1a5f38 0%, #0e3d23 52%, #082818 100%);
    box-shadow:
        0 0 0 1px rgba(12, 46, 28, 0.62),
        inset 0 1px 0 0 var(--rm-month-rail-inset-glow),
        inset 0 -1px 0 0 var(--rm-month-rail-inset-glow),
        0 4px 16px rgba(0, 0, 0, 0.24);
    overflow: hidden;
}
body.page-budgets .expense-account-month-strip__year.month-year-header,
body.page-expenses .expense-account-month-strip__year.month-year-header,
body.page-income .expense-account-month-strip__year.month-year-header,
body.page-savings .expense-account-month-strip__year.month-year-header,
body.page-investments .expense-account-month-strip__year.month-year-header {
    flex: 0 0 auto;
    width: min(118px, 20vw);
    min-width: 84px;
    margin-bottom: 0;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px 0 12px;
    font-size: 15px;
    font-weight: 800;
    color: var(--rm-month-label);
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.12) 0%, transparent 100%);
    border-right: 1px solid var(--rm-month-divider);
    border-radius: 6px 0 0 6px;
}
body.page-budgets .expense-account-month-strip__year .year-arrow,
body.page-expenses .expense-account-month-strip__year .year-arrow,
body.page-income .expense-account-month-strip__year .year-arrow,
body.page-savings .expense-account-month-strip__year .year-arrow,
body.page-investments .expense-account-month-strip__year .year-arrow {
    color: var(--rm-month-label-muted);
    font-weight: 700;
    opacity: 0.92;
}
body.page-budgets .expense-account-month-strip__year .year-arrow:hover,
body.page-expenses .expense-account-month-strip__year .year-arrow:hover,
body.page-income .expense-account-month-strip__year .year-arrow:hover,
body.page-savings .expense-account-month-strip__year .year-arrow:hover,
body.page-investments .expense-account-month-strip__year .year-arrow:hover {
    color: #fff;
    opacity: 1;
}
body.page-budgets .expense-account-month-strip__year strong,
body.page-expenses .expense-account-month-strip__year strong,
body.page-income .expense-account-month-strip__year strong,
body.page-savings .expense-account-month-strip__year strong,
body.page-investments .expense-account-month-strip__year strong {
    color: var(--rm-month-label);
    font-weight: 800;
    letter-spacing: 0.04em;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
}
body.page-budgets .expense-account-month-strip__today.month-nav-today-btn,
body.page-expenses .expense-account-month-strip__today.month-nav-today-btn,
body.page-income .expense-account-month-strip__today.month-nav-today-btn,
body.page-savings .expense-account-month-strip__today.month-nav-today-btn,
body.page-investments .expense-account-month-strip__today.month-nav-today-btn {
    flex: 0 0 auto;
    width: min(52px, 12vw);
    min-width: 44px;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0 6px;
    font-size: 18px;
    line-height: 1;
    color: var(--rm-month-label);
    background: linear-gradient(270deg, rgba(0, 0, 0, 0.12) 0%, transparent 100%);
    border-left: 1px solid var(--rm-month-divider);
    border-radius: 0 6px 6px 0;
    text-decoration: none;
    box-sizing: border-box;
    transition: background 0.15s ease, color 0.15s ease;
}
body.page-budgets .expense-account-month-strip__today.month-nav-today-btn:hover,
body.page-expenses .expense-account-month-strip__today.month-nav-today-btn:hover,
body.page-income .expense-account-month-strip__today.month-nav-today-btn:hover,
body.page-savings .expense-account-month-strip__today.month-nav-today-btn:hover,
body.page-investments .expense-account-month-strip__today.month-nav-today-btn:hover {
    background: rgba(217, 249, 157, 0.12);
    color: #fffbeb;
}
body.page-budgets .expense-account-month-strip__today.month-nav-today-btn:focus-visible,
body.page-expenses .expense-account-month-strip__today.month-nav-today-btn:focus-visible,
body.page-income .expense-account-month-strip__today.month-nav-today-btn:focus-visible,
body.page-savings .expense-account-month-strip__today.month-nav-today-btn:focus-visible,
body.page-investments .expense-account-month-strip__today.month-nav-today-btn:focus-visible {
    outline: 2px solid rgba(217, 249, 157, 0.65);
    outline-offset: 2px;
}
body.page-budgets .expense-account-hero-month .month-grid.month-grid--expense-hero,
body.page-expenses .expense-account-hero-month .month-grid.month-grid--expense-hero,
body.page-income .expense-account-hero-month .month-grid.month-grid--expense-hero,
body.page-savings .expense-account-hero-month .month-grid.month-grid--expense-hero,
body.page-investments .expense-account-hero-month .month-grid.month-grid--expense-hero {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: minmax(0, auto);
    align-items: stretch;
    border: none;
    border-radius: 0;
    background: transparent;
    overflow: visible;
}
body.page-budgets .expense-account-hero-month .month-grid.month-grid--expense-hero > a,
body.page-expenses .expense-account-hero-month .month-grid.month-grid--expense-hero > a,
body.page-income .expense-account-hero-month .month-grid.month-grid--expense-hero > a,
body.page-savings .expense-account-hero-month .month-grid.month-grid--expense-hero > a,
body.page-investments .expense-account-hero-month .month-grid.month-grid--expense-hero > a {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 100%;
    min-height: 40px;
    padding: 0 1px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1;
    color: var(--rm-month-label);
    background: transparent;
    border-bottom: none;
    border-right: 1px solid var(--rm-month-divider);
    text-decoration: none;
    border-radius: 0;
}
body.page-budgets .expense-account-hero-month .month-grid.month-grid--expense-hero > a:hover,
body.page-expenses .expense-account-hero-month .month-grid.month-grid--expense-hero > a:hover,
body.page-income .expense-account-hero-month .month-grid.month-grid--expense-hero > a:hover,
body.page-savings .expense-account-hero-month .month-grid.month-grid--expense-hero > a:hover,
body.page-investments .expense-account-hero-month .month-grid.month-grid--expense-hero > a:hover {
    background: rgba(217, 249, 157, 0.12);
    color: #fffbeb;
}
body.page-budgets .expense-account-hero-month .month-grid.month-grid--expense-hero > a:nth-child(4n),
body.page-expenses .expense-account-hero-month .month-grid.month-grid--expense-hero > a:nth-child(4n),
body.page-income .expense-account-hero-month .month-grid.month-grid--expense-hero > a:nth-child(4n),
body.page-savings .expense-account-hero-month .month-grid.month-grid--expense-hero > a:nth-child(4n),
body.page-investments .expense-account-hero-month .month-grid.month-grid--expense-hero > a:nth-child(4n) {
    border-right: 1px solid var(--rm-month-divider);
}
body.page-budgets .expense-account-hero-month .month-grid.month-grid--expense-hero > a:nth-last-child(-n+4),
body.page-expenses .expense-account-hero-month .month-grid.month-grid--expense-hero > a:nth-last-child(-n+4),
body.page-income .expense-account-hero-month .month-grid.month-grid--expense-hero > a:nth-last-child(-n+4),
body.page-savings .expense-account-hero-month .month-grid.month-grid--expense-hero > a:nth-last-child(-n+4),
body.page-investments .expense-account-hero-month .month-grid.month-grid--expense-hero > a:nth-last-child(-n+4) {
    border-bottom: none;
}
body.page-budgets .expense-account-hero-month .month-grid.month-grid--expense-hero > a:nth-child(12n),
body.page-expenses .expense-account-hero-month .month-grid.month-grid--expense-hero > a:nth-child(12n),
body.page-income .expense-account-hero-month .month-grid.month-grid--expense-hero > a:nth-child(12n),
body.page-savings .expense-account-hero-month .month-grid.month-grid--expense-hero > a:nth-child(12n),
body.page-investments .expense-account-hero-month .month-grid.month-grid--expense-hero > a:nth-child(12n) {
    border-right: none;
}
body.page-budgets .expense-account-hero-month .month-grid.month-grid--expense-hero > a.active,
body.page-expenses .expense-account-hero-month .month-grid.month-grid--expense-hero > a.active,
body.page-income .expense-account-hero-month .month-grid.month-grid--expense-hero > a.active,
body.page-savings .expense-account-hero-month .month-grid.month-grid--expense-hero > a.active,
body.page-investments .expense-account-hero-month .month-grid.month-grid--expense-hero > a.active {
    background: var(--rm-month-active-cell);
    color: var(--rm-month-active-text);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
    border-right-color: rgba(15, 41, 24, 0.12);
}
body.page-budgets .expense-account-hero-month .month-grid.month-grid--expense-hero > a.active:hover,
body.page-expenses .expense-account-hero-month .month-grid.month-grid--expense-hero > a.active:hover,
body.page-income .expense-account-hero-month .month-grid.month-grid--expense-hero > a.active:hover,
body.page-savings .expense-account-hero-month .month-grid.month-grid--expense-hero > a.active:hover,
body.page-investments .expense-account-hero-month .month-grid.month-grid--expense-hero > a.active:hover {
    color: #052e16;
    filter: brightness(1.03);
}
body.page-budgets .expense-account-hero-month .month-grid.month-grid--expense-hero > a.month-nav-today:not(.active),
body.page-expenses .expense-account-hero-month .month-grid.month-grid--expense-hero > a.month-nav-today:not(.active),
body.page-income .expense-account-hero-month .month-grid.month-grid--expense-hero > a.month-nav-today:not(.active),
body.page-savings .expense-account-hero-month .month-grid.month-grid--expense-hero > a.month-nav-today:not(.active),
body.page-investments .expense-account-hero-month .month-grid.month-grid--expense-hero > a.month-nav-today:not(.active) {
    background: rgba(217, 249, 157, 0.2);
    color: #fefce8;
    box-shadow: inset 0 -3px 0 0 rgba(190, 242, 100, 0.9), inset 0 0 0 1px rgba(190, 242, 100, 0.35);
}
body.page-budgets .expense-account-hero-month .month-grid.month-grid--expense-hero > a.month-nav-today:not(.active):hover,
body.page-expenses .expense-account-hero-month .month-grid.month-grid--expense-hero > a.month-nav-today:not(.active):hover,
body.page-income .expense-account-hero-month .month-grid.month-grid--expense-hero > a.month-nav-today:not(.active):hover,
body.page-savings .expense-account-hero-month .month-grid.month-grid--expense-hero > a.month-nav-today:not(.active):hover,
body.page-investments .expense-account-hero-month .month-grid.month-grid--expense-hero > a.month-nav-today:not(.active):hover {
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
}

body.page-expenses .expense-account-month-strip__year button.year-arrow,
body.page-income .expense-account-month-strip__year button.year-arrow,
body.page-budgets .expense-account-month-strip__year button.year-arrow {
    background: transparent;
    border: none;
    cursor: pointer;
    font: inherit;
    padding: 2px 6px;
}
body.page-expenses .expense-account-month-strip__today.month-nav-today-btn,
body.page-income .expense-account-month-strip__today.month-nav-today-btn,
body.page-budgets .expense-account-month-strip__today.month-nav-today-btn {
    border: none;
    cursor: pointer;
    font: inherit;
}
body.page-expenses .expense-account-hero-month .month-grid.month-grid--expense-hero > button.month-grid-month-btn,
body.page-income .expense-account-hero-month .month-grid.month-grid--expense-hero > button.month-grid-month-btn,
body.page-budgets .expense-account-hero-month .month-grid.month-grid--expense-hero > button.month-grid-month-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 100%;
    min-height: 40px;
    padding: 0 1px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1;
    color: var(--rm-month-label);
    background: transparent;
    border-bottom: none;
    border-right: 1px solid var(--rm-month-divider);
    border-top: none;
    border-left: none;
    text-decoration: none;
    border-radius: 0;
    cursor: pointer;
    font-family: inherit;
}
body.page-expenses .expense-account-hero-month .month-grid.month-grid--expense-hero > button.month-grid-month-btn:hover,
body.page-income .expense-account-hero-month .month-grid.month-grid--expense-hero > button.month-grid-month-btn:hover,
body.page-budgets .expense-account-hero-month .month-grid.month-grid--expense-hero > button.month-grid-month-btn:hover {
    background: rgba(217, 249, 157, 0.12);
    color: #fffbeb;
}
body.page-expenses .expense-account-hero-month .month-grid.month-grid--expense-hero > button.month-grid-month-btn:nth-child(4n),
body.page-income .expense-account-hero-month .month-grid.month-grid--expense-hero > button.month-grid-month-btn:nth-child(4n),
body.page-budgets .expense-account-hero-month .month-grid.month-grid--expense-hero > button.month-grid-month-btn:nth-child(4n) {
    border-right: 1px solid var(--rm-month-divider);
}
body.page-expenses .expense-account-hero-month .month-grid.month-grid--expense-hero > button.month-grid-month-btn:nth-last-child(-n+4),
body.page-income .expense-account-hero-month .month-grid.month-grid--expense-hero > button.month-grid-month-btn:nth-last-child(-n+4),
body.page-budgets .expense-account-hero-month .month-grid.month-grid--expense-hero > button.month-grid-month-btn:nth-last-child(-n+4) {
    border-bottom: none;
}
body.page-expenses .expense-account-hero-month .month-grid.month-grid--expense-hero > button.month-grid-month-btn:nth-child(12n),
body.page-income .expense-account-hero-month .month-grid.month-grid--expense-hero > button.month-grid-month-btn:nth-child(12n),
body.page-budgets .expense-account-hero-month .month-grid.month-grid--expense-hero > button.month-grid-month-btn:nth-child(12n) {
    border-right: none;
}
body.page-expenses .expense-account-hero-month .month-grid.month-grid--expense-hero > button.month-grid-month-btn.active,
body.page-income .expense-account-hero-month .month-grid.month-grid--expense-hero > button.month-grid-month-btn.active,
body.page-budgets .expense-account-hero-month .month-grid.month-grid--expense-hero > button.month-grid-month-btn.active {
    background: var(--rm-month-active-cell);
    color: var(--rm-month-active-text);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
    border-right-color: rgba(15, 41, 24, 0.12);
}
body.page-expenses .expense-account-hero-month .month-grid.month-grid--expense-hero > button.month-grid-month-btn.active:hover,
body.page-income .expense-account-hero-month .month-grid.month-grid--expense-hero > button.month-grid-month-btn.active:hover,
body.page-budgets .expense-account-hero-month .month-grid.month-grid--expense-hero > button.month-grid-month-btn.active:hover {
    color: #052e16;
    filter: brightness(1.03);
}
body.page-expenses .expense-account-hero-month .month-grid.month-grid--expense-hero > button.month-grid-month-btn.month-nav-today:not(.active),
body.page-income .expense-account-hero-month .month-grid.month-grid--expense-hero > button.month-grid-month-btn.month-nav-today:not(.active),
body.page-budgets .expense-account-hero-month .month-grid.month-grid--expense-hero > button.month-grid-month-btn.month-nav-today:not(.active) {
    background: rgba(217, 249, 157, 0.2);
    color: #fefce8;
    box-shadow: inset 0 -3px 0 0 rgba(190, 242, 100, 0.9), inset 0 0 0 1px rgba(190, 242, 100, 0.35);
}
body.page-expenses .expense-account-hero-month .month-grid.month-grid--expense-hero > button.month-grid-month-btn.month-nav-today:not(.active):hover,
body.page-income .expense-account-hero-month .month-grid.month-grid--expense-hero > button.month-grid-month-btn.month-nav-today:not(.active):hover,
body.page-budgets .expense-account-hero-month .month-grid.month-grid--expense-hero > button.month-grid-month-btn.month-nav-today:not(.active):hover {
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
}
body.page-expenses .expense-account-hero-month .month-grid.month-grid--expense-hero > button.month-grid-month-btn:disabled,
body.page-income .expense-account-hero-month .month-grid.month-grid--expense-hero > button.month-grid-month-btn:disabled,
body.page-budgets .expense-account-hero-month .month-grid.month-grid--expense-hero > button.month-grid-month-btn:disabled {
    opacity: 0.34;
    cursor: not-allowed;
    filter: grayscale(0.5);
    color: rgba(254, 252, 232, 0.55);
    background: rgba(15, 41, 24, 0.25);
    box-shadow: none;
}

body.page-expenses .expense-account-hero-month .month-grid.month-grid--expense-hero > button.month-grid-month-btn.month-grid-month-btn--no-data,
body.page-income .expense-account-hero-month .month-grid.month-grid--expense-hero > button.month-grid-month-btn.month-grid-month-btn--no-data,
body.page-budgets .expense-account-hero-month .month-grid.month-grid--expense-hero > button.month-grid-month-btn.month-grid-month-btn--no-data,
body.page-budgets .expense-account-hero-month .month-grid.month-grid--expense-hero > a.month-grid-month-btn.month-grid-month-btn--no-data,
body.page-expenses .expense-account-hero-month .month-grid.month-grid--expense-hero > a.month-grid-month-btn.month-grid-month-btn--no-data,
body.page-income .expense-account-hero-month .month-grid.month-grid--expense-hero > a.month-grid-month-btn.month-grid-month-btn--no-data,
body.page-savings .expense-account-hero-month .month-grid.month-grid--expense-hero > a.month-grid-month-btn.month-grid-month-btn--no-data,
body.page-investments .expense-account-hero-month .month-grid.month-grid--expense-hero > a.month-grid-month-btn.month-grid-month-btn--no-data {
    opacity: 0.34;
    cursor: pointer;
    filter: grayscale(0.5);
    color: rgba(254, 252, 232, 0.55);
    background: rgba(15, 41, 24, 0.25);
    box-shadow: none;
}
body.page-expenses .expense-account-hero-month .month-grid.month-grid--expense-hero > button.month-grid-month-btn.month-grid-month-btn--no-data:hover:not(.active),
body.page-income .expense-account-hero-month .month-grid.month-grid--expense-hero > button.month-grid-month-btn.month-grid-month-btn--no-data:hover:not(.active),
body.page-budgets .expense-account-hero-month .month-grid.month-grid--expense-hero > button.month-grid-month-btn.month-grid-month-btn--no-data:hover:not(.active),
body.page-budgets .expense-account-hero-month .month-grid.month-grid--expense-hero > a.month-grid-month-btn.month-grid-month-btn--no-data:hover:not(.active),
body.page-expenses .expense-account-hero-month .month-grid.month-grid--expense-hero > a.month-grid-month-btn.month-grid-month-btn--no-data:hover:not(.active),
body.page-income .expense-account-hero-month .month-grid.month-grid--expense-hero > a.month-grid-month-btn.month-grid-month-btn--no-data:hover:not(.active),
body.page-savings .expense-account-hero-month .month-grid.month-grid--expense-hero > a.month-grid-month-btn.month-grid-month-btn--no-data:hover:not(.active),
body.page-investments .expense-account-hero-month .month-grid.month-grid--expense-hero > a.month-grid-month-btn.month-grid-month-btn--no-data:hover:not(.active) {
    opacity: 0.46;
    filter: grayscale(0.42);
    color: rgba(254, 252, 232, 0.68);
    background: rgba(15, 41, 24, 0.35);
}

body.page-expenses .expense-account-page-hero,
body.page-income .expense-account-page-hero,
body.page-savings .expense-account-page-hero,
body.page-investments .expense-account-page-hero {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    box-sizing: border-box;
    margin-bottom: 30px;
}
body.page-expenses .topbar--hero ~ main.container,
body.page-budgets .topbar--hero ~ main.container,
body.page-income .topbar--hero ~ main.container,
body.page-savings .topbar--hero ~ main.container,
body.page-investments .topbar--hero ~ main.container {
    padding-left: 0;
    padding-right: 0;
}
body.page-expenses .expense-account-hero-head,
body.page-income .expense-account-hero-head,
body.page-savings .expense-account-hero-head,
body.page-investments .expense-account-hero-head {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px 28px;
    flex-wrap: wrap;
    margin-bottom: 10px;
    max-width: 1220px;
    margin-left: auto;
    margin-right: auto;
}
body.page-expenses .expense-account-hero-head__title,
body.page-income .expense-account-hero-head__title,
body.page-savings .expense-account-hero-head__title,
body.page-investments .expense-account-hero-head__title {
    margin: 0;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    font-size: clamp(1.15rem, 2.2vw, 1.45rem);
    font-weight: 800;
    color: #ffffff;
    line-height: 1.2;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    flex: 0 1 auto;
    min-width: min(100%, 220px);
}
body.page-expenses .expense-account-head-icon,
body.page-income .expense-account-head-icon,
body.page-savings .expense-account-head-icon,
body.page-investments .expense-account-head-icon {
    color: rgba(255, 255, 255, 0.95);
    font-size: 1.15em;
}
body.page-expenses .expense-account-hero-head__text,
body.page-income .expense-account-hero-head__text,
body.page-savings .expense-account-hero-head__text,
body.page-investments .expense-account-hero-head__text {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    min-width: 0;
    max-width: 70rem;
    margin-left: auto;
}
body.page-expenses .expense-account-hero-head__desc,
body.page-income .expense-account-hero-head__desc,
body.page-savings .expense-account-hero-head__desc,
body.page-investments .expense-account-hero-head__desc {
    margin: 0;
    font-size: 0.88rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.45;
}

.expense-account-hero-head__title-main {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.page-screen-info-btn {
    flex: 0 0 auto;
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 0 4px;
    padding: 4px 6px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: rgba(255, 255, 255, 0.88);
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.page-screen-info-btn:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}
.page-screen-info-btn:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.85);
    outline-offset: 2px;
}
.page-screen-info-btn[aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

.page-screen-info-dropdown {
    position: fixed;
    z-index: 1250;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    max-width: min(360px, calc(100vw - 16px));
    filter: drop-shadow(0 12px 32px rgba(0, 0, 0, 0.45));
}
.page-screen-info-dropdown__inner {
    border-radius: 14px;
    border: 1px solid rgba(31, 122, 58, 0.35);
    background: linear-gradient(180deg, #fafdfb 0%, #f0fdf4 100%);
    padding: 14px 16px 16px;
    text-align: left;
}
.page-screen-info-dropdown__title {
    margin: 0 0 8px;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: #14532d;
}
.page-screen-info-dropdown__body {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.55;
    font-weight: 500;
    color: #334155;
}
.page-screen-info-dropdown__body p {
    margin: 0 0 0.5em;
}
.page-screen-info-dropdown__body p:last-child {
    margin-bottom: 0;
}
@media (prefers-reduced-motion: reduce) {
    .page-screen-info-dropdown {
        filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.35));
    }
}

body.page-expenses .expense-account-hero-toolbar,
body.page-budgets .expense-account-hero-toolbar,
body.page-savings .expense-account-hero-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 10px 14px;
    max-width: 1220px;
    margin: 0 auto 6px;
    padding: 4px 2px 2px;
}
body.page-expenses .expense-account-hero-toolbar__left,
body.page-budgets .expense-account-hero-toolbar__left,
body.page-savings .expense-account-hero-toolbar__left {
    justify-self: start;
    min-width: 0;
}
body.page-expenses .expense-account-hero-toolbar__center,
body.page-budgets .expense-account-hero-toolbar__center,
body.page-savings .expense-account-hero-toolbar__center {
    justify-self: center;
}
body.page-expenses .expense-account-hero-toolbar__right,
body.page-budgets .expense-account-hero-toolbar__right,
body.page-savings .expense-account-hero-toolbar__right {
    justify-self: end;
}
body.page-expenses .expense-account-hero-toolbar__right--spacer,
body.page-budgets .expense-account-hero-toolbar__right--spacer,
body.page-savings .expense-account-hero-toolbar__right--spacer {
    min-width: min(156px, 22vw);
    height: 1px;
}
body.page-expenses .expense-account-hero-toolbar__title,
body.page-budgets .expense-account-hero-toolbar__title,
body.page-savings .expense-account-hero-toolbar__title {
    flex-wrap: wrap;
}
body.page-expenses .expense-account-month-dropdown,
body.page-budgets .expense-account-month-dropdown,
body.page-savings .expense-account-month-dropdown {
    position: relative;
    z-index: 40;
}
body.page-expenses .expense-account-month-dropdown__toggle,
body.page-budgets .expense-account-month-dropdown__toggle,
body.page-savings .expense-account-month-dropdown__toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid rgba(163, 230, 53, 0.42);
    background: linear-gradient(180deg, rgba(31, 122, 58, 0.62) 0%, rgba(15, 61, 32, 0.88) 100%);
    color: #ffffff;
    font-weight: 800;
    font-size: clamp(0.88rem, 2vw, 0.98rem);
    letter-spacing: -0.02em;
    line-height: 1.2;
    cursor: pointer;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
body.page-expenses .expense-account-month-dropdown__toggle:hover,
body.page-budgets .expense-account-month-dropdown__toggle:hover,
body.page-savings .expense-account-month-dropdown__toggle:hover {
    border-color: rgba(190, 242, 100, 0.55);
    background: linear-gradient(180deg, rgba(34, 140, 72, 0.72) 0%, rgba(17, 72, 38, 0.92) 100%);
}
body.page-expenses .expense-account-month-dropdown__toggle:focus-visible,
body.page-budgets .expense-account-month-dropdown__toggle:focus-visible,
body.page-savings .expense-account-month-dropdown__toggle:focus-visible {
    outline: 2px solid rgba(190, 242, 100, 0.85);
    outline-offset: 2px;
}
body.page-expenses .expense-account-month-dropdown__chev,
body.page-budgets .expense-account-month-dropdown__chev,
body.page-savings .expense-account-month-dropdown__chev {
    font-size: 0.72em;
    opacity: 0.92;
    transition: transform 0.18s ease;
}
body.page-expenses .expense-account-month-dropdown.is-open .expense-account-month-dropdown__chev,
body.page-budgets .expense-account-month-dropdown.is-open .expense-account-month-dropdown__chev,
body.page-savings .expense-account-month-dropdown.is-open .expense-account-month-dropdown__chev {
    transform: rotate(180deg);
}
body.page-expenses .expense-account-month-dropdown__panel,
body.page-budgets .expense-account-month-dropdown__panel,
body.page-savings .expense-account-month-dropdown__panel {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 1260;
    box-sizing: border-box;
    width: min(920px, calc(100vw - 24px));
    max-height: min(72vh, 560px);
    overflow: auto;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 14px;
    background: transparent;
    filter: drop-shadow(0 18px 44px rgba(0, 0, 0, 0.55));
}
body.page-expenses .expense-account-month-dropdown__panel .expense-account-hero-month.panel,
body.page-budgets .expense-account-month-dropdown__panel .expense-account-hero-month.panel,
body.page-savings .expense-account-month-dropdown__panel .expense-account-hero-month.panel {
    margin-bottom: 0;
    max-width: none;
    width: 100%;
}
body.page-expenses .expense-account-hero-toolbar .btn.gastos-add-btn.expense-account-hero-toolbar__add-btn,
body.page-budgets .expense-account-hero-toolbar .btn.gastos-add-btn.expense-account-hero-toolbar__add-btn,
body.page-savings .expense-account-hero-toolbar .btn.gastos-add-btn.expense-account-hero-toolbar__add-btn,
body.page-investments .expense-account-hero-toolbar__right .btn.gastos-add-btn.expense-account-hero-toolbar__add-btn {
    flex-shrink: 0;
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 156px !important;
    min-height: 34px !important;
    height: 34px;
    padding: 0 12px !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
}
body.page-expenses .expense-account-hero-toolbar__tabs,
body.page-income .expense-account-hero-toolbar__tabs,
body.page-budgets .expense-account-hero-toolbar__tabs,
body.page-savings .expense-account-hero-toolbar__tabs,
body.page-investments .expense-account-hero-toolbar__tabs {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: min(100%, 1220px);
    max-width: 1220px;
    margin: 0 auto 6px;
    padding: 0 2px;
    box-sizing: border-box;
}
body.page-expenses .expense-account-hero-toolbar__tabs .module-share-tabs--hero,
body.page-income .expense-account-hero-toolbar__tabs .module-share-tabs--hero,
body.page-budgets .expense-account-hero-toolbar__tabs .module-share-tabs--hero,
body.page-savings .expense-account-hero-toolbar__tabs .module-share-tabs--hero,
body.page-investments .expense-account-hero-toolbar__tabs .module-share-tabs--hero {
    max-width: 100%;
}
body.page-expenses .expense-account-hero-totals,
body.page-budgets .expense-account-hero-totals,
body.page-income .expense-account-hero-totals,
body.page-savings .expense-account-hero-totals,
body.page-investments .expense-account-hero-totals {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    flex-wrap: wrap;
    max-width: 1220px;
    margin: 0 auto;
    padding: 2px 2px 4px;
}
body.page-expenses .expense-account-totals-line,
body.page-budgets .expense-account-totals-line,
body.page-income .expense-account-totals-line,
body.page-savings .expense-account-totals-line,
body.page-investments .expense-account-totals-line {
    margin: 0;
    min-width: 0;
    font-size: 0.9rem;
    line-height: 1.25;
    color: #ffffff;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    min-height: 34px;
}
body.page-expenses .expense-account-totals-line__label,
body.page-budgets .expense-account-totals-line__label,
body.page-income .expense-account-totals-line__label,
body.page-savings .expense-account-totals-line__label,
body.page-investments .expense-account-totals-line__label {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.88);
}

body.page-expenses .expense-account-totals-line__val,
body.page-budgets .expense-account-totals-line__val,
body.page-income .expense-account-totals-line__val,
body.page-savings .expense-account-totals-line__val,
body.page-investments .expense-account-totals-line__val {
    font-weight: 800;
    color: #d9f99d;
}
body.page-expenses .expense-account-totals-line__val--unofficial,
body.page-budgets .expense-account-totals-line__val--unofficial,
body.page-income .expense-account-totals-line__val--unofficial,
body.page-savings .expense-account-totals-line__val--unofficial,
body.page-investments .expense-account-totals-line__val--unofficial {
    color: #ffffff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.28);
}
body.page-expenses .expense-account-totals-line__slash,
body.page-budgets .expense-account-totals-line__slash,
body.page-income .expense-account-totals-line__slash,
body.page-savings .expense-account-totals-line__slash,
body.page-investments .expense-account-totals-line__slash {
    color: rgba(255, 255, 255, 0.45);
    font-weight: 400;
    padding: 0 2px;
}
body.page-expenses .expense-account-hero-totals .btn.expense-account-hero-totals__btn,
body.page-budgets .expense-account-hero-totals .btn.expense-account-hero-totals__btn,
body.page-income .expense-account-hero-totals .btn.expense-account-hero-totals__btn,
body.page-savings .expense-account-hero-totals .btn.expense-account-hero-totals__btn,
body.page-investments .expense-account-hero-totals .btn.expense-account-hero-totals__btn {
    flex-shrink: 0;
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 156px !important;
    min-height: 34px !important;
    height: 34px;
    padding: 0 12px !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
}
body.page-expenses .expense-account-hero-totals--amounts-only,
body.page-budgets .expense-account-hero-totals--amounts-only {
    justify-content: center;
    padding: 14px 8px 20px;
    margin-top: 2px;
}
body.page-expenses .expense-account-hero-totals--amounts-only .expense-account-totals-line,
body.page-budgets .expense-account-hero-totals--amounts-only .expense-account-totals-line {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 36px;
    font-size: 1rem;
}
body.page-expenses .expense-account-hero-totals--amounts-only .expense-account-totals-line__seg,
body.page-budgets .expense-account-hero-totals--amounts-only .expense-account-totals-line__seg {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
}
body.page-expenses .expense-account-hero-totals--amounts-only .expense-account-totals-line__seg--stack,
body.page-budgets .expense-account-hero-totals--amounts-only .expense-account-totals-line__seg--stack {
    display: grid;
    grid-template-columns: minmax(190px, 230px) minmax(240px, 1fr);
    column-gap: 10px;
    align-items: center;
    width: 100%;
    max-width: min(100%, 720px);
    box-sizing: border-box;
}
body.page-expenses
    .expense-account-hero-totals--amounts-only
    .expense-account-totals-line__seg--stack
    > .expense-account-totals-line__amount-wrap,
body.page-budgets
    .expense-account-hero-totals--amounts-only
    .expense-account-totals-line__seg--stack
    > .expense-account-totals-line__amount-wrap {
    order: 1;
    flex: 0 0 100%;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 0.4rem;
    justify-content: flex-end;
}
body.page-expenses .expense-account-totals-line__flagimg,
body.page-budgets .expense-account-totals-line__flagimg {
    flex-shrink: 0;
    width: 24px;
    height: 18px;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
}
body.page-expenses
    .expense-account-hero-totals--amounts-only
    .expense-account-totals-line__seg--stack
    .expense-account-totals-ctx,
body.page-budgets
    .expense-account-hero-totals--amounts-only
    .expense-account-totals-line__seg--stack
    .expense-account-totals-ctx {
    order: 2;
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    max-width: none;
    min-width: 0;
    text-align: left;
}
body.page-expenses
    .expense-account-hero-totals--amounts-only
    .expense-account-totals-line__seg--stack
    .expense-account-totals-ctx__line,
body.page-budgets
    .expense-account-hero-totals--amounts-only
    .expense-account-totals-line__seg--stack
    .expense-account-totals-ctx__line {
    justify-content: flex-start;
    flex-wrap: nowrap;
    align-items: center;
}
body.page-expenses
    .expense-account-hero-totals--amounts-only
    .expense-account-totals-line__seg--stack
    .expense-account-totals-ctx__line
    > span:last-child,
body.page-budgets
    .expense-account-hero-totals--amounts-only
    .expense-account-totals-line__seg--stack
    .expense-account-totals-ctx__line
    > span:last-child {
    white-space: nowrap;
    overflow-wrap: normal;
}
body.page-expenses
    .expense-account-hero-totals--amounts-only
    .expense-account-totals-line__seg--stack
    .expense-account-totals-line__val,
body.page-budgets
    .expense-account-hero-totals--amounts-only
    .expense-account-totals-line__seg--stack
    .expense-account-totals-line__val {
    justify-self: start;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
body.page-expenses .expense-account-totals-ctx,
body.page-budgets .expense-account-totals-ctx {
    display: block;
    width: 100%;
    text-align: center;
    font-size: clamp(0.68rem, 1.65vw, 0.78rem);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.72);
}
body.page-expenses .expense-account-totals-ctx__line,
body.page-budgets .expense-account-totals-ctx__line {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 5px;
    max-width: 100%;
}
body.page-expenses .expense-account-totals-ctx__line > span:last-child,
body.page-budgets .expense-account-totals-ctx__line > span:last-child {
    min-width: 0;
    overflow-wrap: anywhere;
}
body.page-expenses .expense-account-totals-ctx__line--eq,
body.page-budgets .expense-account-totals-ctx__line--eq {
    color: rgba(187, 247, 208, 0.95);
    font-weight: 600;
}
body.page-expenses .expense-account-totals-ctx__line--eq .expense-account-totals-ctx__ico,
body.page-budgets .expense-account-totals-ctx__line--eq .expense-account-totals-ctx__ico {
    color: #86efac;
    filter: drop-shadow(0 0 6px rgba(74, 222, 128, 0.45));
}
body.page-expenses .expense-account-totals-ctx__line--worse,
body.page-budgets .expense-account-totals-ctx__line--worse {
    color: rgba(254, 215, 170, 0.98);
    font-weight: 600;
}
body.page-expenses .expense-account-totals-ctx__line--worse .expense-account-totals-ctx__ico,
body.page-budgets .expense-account-totals-ctx__line--worse .expense-account-totals-ctx__ico {
    color: #fb923c;
    filter: drop-shadow(0 0 8px rgba(251, 146, 60, 0.55));
}
body.page-expenses .expense-account-totals-ctx__line--better,
body.page-budgets .expense-account-totals-ctx__line--better {
    color: rgba(220, 252, 231, 0.98);
    font-weight: 700;
}
body.page-expenses .expense-account-totals-ctx__line--better .expense-account-totals-ctx__ico,
body.page-budgets .expense-account-totals-ctx__line--better .expense-account-totals-ctx__ico {
    color: #4ade80;
    filter: drop-shadow(0 0 10px rgba(74, 222, 128, 0.65));
    font-size: 1em;
}
body.page-expenses .expense-account-totals-ctx__ico,
body.page-budgets .expense-account-totals-ctx__ico {
    font-size: 0.95em;
    opacity: 0.98;
    flex-shrink: 0;
    align-self: center;
}
body.page-expenses .expense-account-hero-totals--amounts-only .expense-account-totals-line__val,
body.page-budgets .expense-account-hero-totals--amounts-only .expense-account-totals-line__val {
    font-size: clamp(1.45rem, 4.2vw, 2.05rem);
    letter-spacing: -0.03em;
    line-height: 1.05;
    font-weight: 900;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}
body.page-expenses .expense-account-hero-totals--amounts-only .expense-account-totals-line__slash,
body.page-budgets .expense-account-hero-totals--amounts-only .expense-account-totals-line__slash {
    align-self: center;
    padding: 0 4px;
    font-size: 1.35rem;
    line-height: 1.1;
    color: rgba(255, 255, 255, 0.38);
}

body.page-budgets .expense-account-presup-hero-strip {
    align-items: stretch;
    justify-content: center;
    gap: 0;
    max-width: 1220px;
    width: 100%;
    margin-top: -36px;
}
body.page-budgets .expense-view-switch-row__left .expense-account-presup-insight {
    margin: 0;
    max-width: none;
}
body.page-budgets .expense-view-switch-row .expense-account-presup-insight {
    margin-top: 0;
    margin-bottom: 0;
}

body.page-budgets .expense-view-switch-row__left .expense-account-presup-insight:not(.expense-account-presup-insight--empty) {
    --presup-insight-line: rgba(251, 191, 36, 0.95);
    padding: 4px 12px;
    display: grid;

    grid-template-columns: minmax(0, 1fr) auto auto minmax(0, 1fr) auto;
    gap: 8px 10px;
    border-radius: 0;
    align-items: center;
    width: 100%;
    max-width: none;
    font-weight: 600;
    font-size: clamp(0.8rem, 1.5vw, 0.88rem);
    letter-spacing: 0.01em;
    line-height: 1.35;
    color: #fbbf24;
    background: linear-gradient(180deg, rgba(120, 53, 15, 0.38) 0%, rgba(45, 20, 6, 0.55) 100%);
    box-shadow:
        0 0 14px rgba(251, 191, 36, 0.2),
        0 0 1px rgba(251, 191, 36, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
body.page-budgets .expense-view-switch-row__left .expense-account-presup-insight:not(.expense-account-presup-insight--empty)::before,
body.page-budgets .expense-view-switch-row__left .expense-account-presup-insight:not(.expense-account-presup-insight--empty)::after {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(251, 191, 36, 0.08) 12%,
        rgba(251, 191, 36, 0.95) 50%,
        rgba(251, 191, 36, 0.08) 88%,
        transparent 100%
    );
}
body.page-budgets .expense-view-switch-row__left .expense-account-presup-insight--ok,
body.page-budgets .expense-view-switch-row__left .expense-account-presup-insight--warn,
body.page-budgets .expense-view-switch-row__left .expense-account-presup-insight--danger,
body.page-budgets .expense-view-switch-row__left .expense-account-presup-insight--neutral {
    background: linear-gradient(180deg, rgba(120, 53, 15, 0.38) 0%, rgba(45, 20, 6, 0.55) 100%);
    color: #fbbf24;
}
body.page-budgets .expense-view-switch-row__left .expense-account-presup-insight__brand {
    grid-column: 2;
    padding-right: 0;
    border-right: none;
    justify-self: end;
}
body.page-budgets .expense-view-switch-row__left .expense-account-presup-insight__emoji {
    filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.5));
}
body.page-budgets .expense-view-switch-row__left .expense-account-presup-insight__content {
    grid-column: 3;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    gap: 6px;
    min-width: 0;
    width: auto;
    max-width: min(100%, 62vw);
}
body.page-budgets .expense-view-switch-row__left .expense-account-presup-insight__line-primary {
    font-size: inherit;
    font-weight: 600;
    line-height: 1.35;
    color: inherit;
    text-align: center;
}
body.page-budgets .expense-view-switch-row__left .expense-account-presup-insight__cta--icon {
    grid-column: 5;
    padding: 4px 10px;
    font-size: 0.82rem;
    justify-self: end;
}
body.page-budgets .expense-account-presup-insight {
    --presup-insight-line: rgba(148, 163, 184, 0.85);
    --presup-insight-accent: #94a3b8;
    margin-top: -20px;
    margin-bottom: 10px;
    max-width: 1220px;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 2px 14px;
    border-radius: 10px;
    border: none;
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.34) 0%, rgba(15, 23, 42, 0.52) 100%);
    box-shadow:
        0 0 12px rgba(15, 23, 42, 0.24),
        0 0 1px rgba(148, 163, 184, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    color: #e2e8f0;
}
body.page-budgets .expense-account-presup-insight::before,
body.page-budgets .expense-account-presup-insight::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        transparent 0%,
        color-mix(in srgb, var(--presup-insight-line) 16%, transparent) 12%,
        var(--presup-insight-line) 50%,
        color-mix(in srgb, var(--presup-insight-line) 16%, transparent) 88%,
        transparent 100%
    );
}
body.page-budgets .expense-account-presup-insight::before { top: 0; }
body.page-budgets .expense-account-presup-insight::after { bottom: 0; }
body.page-budgets .expense-account-presup-insight__emoji {
    font-size: 1rem;
    line-height: 1;
    flex: 0 0 auto;
}
body.page-budgets .expense-account-presup-insight__brand {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-right: 12px;
    border-right: 1px solid color-mix(in srgb, var(--presup-insight-line) 42%, transparent);
}
body.page-budgets .expense-account-presup-insight__brand-title {
    font-size: 0.95rem;
    line-height: 1;
    font-weight: 700;
    color: color-mix(in srgb, var(--presup-insight-accent) 62%, #f59e0b 38%);
}
body.page-budgets .expense-account-presup-insight__beta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 18px;
    border-radius: 999px;
    padding: 0 6px;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: #f8fafc;
    background: rgba(148, 163, 184, 0.24);
}
body.page-budgets .expense-account-presup-insight__content {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
body.page-budgets .expense-account-presup-insight--empty {
    justify-content: center;
}
body.page-budgets .expense-account-presup-insight__line-primary {
    font-size: 0.96rem;
    line-height: 1.24;
    font-weight: 700;
}
body.page-budgets .expense-account-presup-insight__line-secondary {
    font-size: 0.88rem;
    line-height: 1.18;
    color: rgba(226, 232, 240, 0.86);
}
body.page-budgets .expense-account-presup-insight__cta,
body.page-expenses .expense-account-presup-insight__cta {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 10px;
    padding: 8px 14px;
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    color: #d1fae5;
    border: 1px solid rgba(34, 197, 94, 0.38);
    background: linear-gradient(180deg, rgba(22, 163, 74, 0.2) 0%, rgba(6, 95, 70, 0.32) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transition: filter .18s ease, transform .18s ease;
}
body.page-budgets .expense-account-presup-insight__cta--icon {
    min-width: 44px;
    justify-content: center;
    padding: 8px 10px;
    gap: 6px;
}
body.page-budgets .expense-account-presup-insight__cta:hover,
body.page-expenses .expense-account-presup-insight__cta:hover {
    filter: brightness(1.07);
    transform: translateY(-1px);
}
body.page-budgets .expense-account-presup-insight__cta:focus-visible,
body.page-expenses .expense-account-presup-insight__cta:focus-visible {
    outline: 2px solid rgba(167, 243, 208, 0.9);
    outline-offset: 2px;
}
body.page-budgets .expense-account-presup-insight__cta.is-open i,
body.page-expenses .expense-account-presup-insight__cta.is-open i {
    transform: rotate(180deg);
}
body.page-budgets .expense-account-presup-recommend-panel {
    box-sizing: border-box;
    width: 100%;
    max-width: 1220px;
    margin: 10px auto 0;
    border: 1px solid rgba(148, 163, 184, 0.26);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(12, 18, 26, 0.95) 0%, rgba(9, 14, 20, 0.98) 100%);
    box-shadow: 0 12px 28px rgba(2, 6, 23, 0.36);
    padding: 12px 14px;
}
body.page-budgets .expense-account-presup-recommend-panel__head h3 {
    margin: 0;
    color: #e2e8f0;
    font-size: 1rem;
    font-weight: 800;
}
body.page-budgets .expense-account-presup-recommend-panel__head h3 i {
    color: #f472b6;
    margin-right: 6px;
}
body.page-budgets .expense-account-presup-recommend-grid {
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
body.page-budgets .expense-account-presup-recommend-card {
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 10px;
    background: rgba(8, 13, 19, 0.9);
    padding: 10px 12px;
}
body.page-budgets .expense-account-presup-recommend-card--danger {
    border-color: rgba(248, 113, 113, 0.34);
}
body.page-budgets .expense-account-presup-recommend-card--warn {
    border-color: rgba(250, 204, 21, 0.34);
}
body.page-budgets .expense-account-presup-recommend-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
body.page-budgets .expense-account-presup-recommend-card__title-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #f8fafc;
    font-size: 0.95rem;
    font-weight: 800;
}
body.page-budgets .expense-account-presup-recommend-card__icon {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #f87171;
    border: 1px solid rgba(248, 113, 113, 0.4);
}
body.page-budgets .expense-account-presup-recommend-card--warn .expense-account-presup-recommend-card__icon {
    color: #facc15;
    border-color: rgba(250, 204, 21, 0.42);
}
body.page-budgets .expense-account-presup-recommend-card__badge {
    font-size: 11px;
    font-weight: 800;
    border-radius: 999px;
    padding: 3px 8px;
    color: #fecaca;
    border: 1px solid rgba(248, 113, 113, 0.45);
    background: rgba(127, 29, 29, 0.45);
}
body.page-budgets .expense-account-presup-recommend-card--warn .expense-account-presup-recommend-card__badge {
    color: #fde68a;
    border-color: rgba(250, 204, 21, 0.45);
    background: rgba(113, 63, 18, 0.45);
}
body.page-budgets .expense-account-presup-recommend-card__summary {
    margin: 8px 0 0;
    color: rgba(226, 232, 240, 0.92);
    font-weight: 700;
    font-size: 0.92rem;
}
body.page-budgets .expense-account-presup-recommend-card__label {
    margin: 8px 0 2px;
    color: #93c5fd;
    font-size: 0.84rem;
    font-weight: 800;
}
body.page-budgets .expense-account-presup-recommend-card__text {
    margin: 0;
    color: rgba(226, 232, 240, 0.9);
    font-size: 0.9rem;
    line-height: 1.35;
}
body.page-budgets .expense-account-presup-recommend-card__list {
    margin: 4px 0 0;
    padding-left: 18px;
    color: rgba(226, 232, 240, 0.88);
    font-size: 0.88rem;
    line-height: 1.3;
}
body.page-budgets .expense-account-presup-recommend-card__list li + li {
    margin-top: 4px;
}
body.page-budgets .expense-account-presup-recommend-card__actions {
    margin-top: 10px;
    display: flex;
    gap: 8px;
}
body.page-budgets .expense-account-presup-recommend-card__btn {
    flex: 1 1 0;
    min-height: 34px;
    border-radius: 8px;
    border: 1px solid rgba(148, 163, 184, 0.34);
    font-size: 0.86rem;
    font-weight: 800;
    cursor: pointer;
}
body.page-budgets .expense-account-presup-recommend-card__btn--primary {
    background: linear-gradient(180deg, rgba(239, 68, 68, 0.92) 0%, rgba(220, 38, 38, 0.95) 100%);
    border-color: rgba(248, 113, 113, 0.52);
    color: #fee2e2;
}
body.page-budgets .expense-account-presup-recommend-card__btn--secondary {
    background: rgba(15, 23, 42, 0.72);
    color: #dbe7f8;
}
body.page-budgets .expense-account-presup-recommend-panel__help {
    margin: 10px 0 0;
    color: rgba(226, 232, 240, 0.86);
    font-size: 0.86rem;
}
@media (max-width: 900px) {
    body.page-budgets .expense-account-presup-recommend-grid {
        grid-template-columns: 1fr;
    }
}
body.page-budgets .expense-account-presup-insight--ok {
    --presup-insight-line: rgba(34, 197, 94, 0.92);
    --presup-insight-accent: #22c55e;
    background: linear-gradient(180deg, rgba(21, 128, 61, 0.18) 0%, rgba(15, 23, 42, 0.5) 100%);
}
body.page-budgets .expense-account-presup-insight--warn {
    --presup-insight-line: rgba(250, 204, 21, 0.94);
    --presup-insight-accent: #facc15;
    background: linear-gradient(180deg, rgba(202, 138, 4, 0.18) 0%, rgba(15, 23, 42, 0.5) 100%);
}
body.page-budgets .expense-account-presup-insight--danger {
    --presup-insight-line: rgba(248, 113, 113, 0.94);
    --presup-insight-accent: #f87171;
    background: linear-gradient(180deg, rgba(185, 28, 28, 0.2) 0%, rgba(15, 23, 42, 0.5) 100%);
}
body.page-budgets .expense-account-presup-insight--neutral {
    --presup-insight-line: rgba(148, 163, 184, 0.88);
    --presup-insight-accent: #94a3b8;
}

body.page-budgets .expense-account-presup-insight.expense-account-presup-insight--empty {
    background: transparent !important;
    box-shadow: none !important;
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;
}
body.page-budgets .expense-account-presup-insight.expense-account-presup-insight--empty::before,
body.page-budgets .expense-account-presup-insight.expense-account-presup-insight--empty::after {
    display: none;
}
@media (max-width: 900px) {
    body.page-budgets .expense-view-switch-row__left .expense-account-presup-insight:not(.expense-account-presup-insight--empty) {
        align-items: center;
        gap: 8px;
    }
    body.page-budgets .expense-view-switch-row__left .expense-account-presup-insight__brand {
        border-right: none;
        padding-right: 0;
    }
    body.page-budgets .expense-view-switch-row__left .expense-account-presup-insight__cta {
        width: auto;
        margin-left: auto;
        justify-content: center;
    }
}
body.page-budgets .presup-hero-card {
    box-sizing: border-box;
    border-radius: 16px;
    background: linear-gradient(165deg, rgba(18, 48, 32, 0.72) 0%, rgba(10, 28, 18, 0.88) 100%);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
    padding: 14px 16px;
}
body.page-budgets .presup-hero-card--unified {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    width: 100%;
    height: 145px;
    flex: 1 1 100%;
    min-width: 0;
    margin-top: 10px;
}
body.page-budgets .presup-hero-unified__left {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
body.page-budgets .presup-hero-unified__right {
    flex: 0 0 auto;
    max-width: 100%;
    box-sizing: border-box;
    padding: 8px 10px 8px 16px;
    margin-left: 10px;
    border-left: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.22);
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-self: stretch;
}
body.page-budgets .presup-hero-total-cell--assigned .presup-hero-totals__actions {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    max-width: 14rem;
}
body.page-budgets .presup-hero-totals__actions {
    margin-top: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
}
body.page-budgets .presup-hero-totals-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 0;
    width: 100%;
}
body.page-budgets .presup-hero-total-cell {
    padding: 0 12px;
    border-right: 1px solid rgba(255, 255, 255, 0.14);
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}
body.page-budgets .presup-hero-total-cell:last-child {
    border-right: none;
}
body.page-budgets .presup-hero-total-cell__label {
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.72);
    letter-spacing: 0.02em;
}
body.page-budgets .presup-hero-total-cell__row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
}
body.page-budgets .presup-hero-curr-ico {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 800;
    font-family: system-ui, sans-serif;
    box-sizing: border-box;
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.22);
    line-height: 1;
}
body.page-budgets .presup-hero-curr-ico > span {
    transform: translateY(-0.04em);
}
body.page-budgets .presup-hero-curr-ico--lime {
    color: #d9f99d;
    border-color: #bef264;
    box-shadow: 0 0 0 1px rgba(190, 242, 100, 0.25), 0 0 18px rgba(163, 230, 53, 0.12);
}
body.page-budgets .presup-hero-curr-ico--green {
    color: #86efac;
    border-color: #4ade80;
    box-shadow: 0 0 0 1px rgba(74, 222, 128, 0.22), 0 0 18px rgba(34, 197, 94, 0.1);
}
body.page-budgets .presup-hero-curr-ico--red {
    color: #fdba74;
    border-color: #fb923c;
    box-shadow: 0 0 0 1px rgba(251, 146, 60, 0.22), 0 0 18px rgba(248, 113, 113, 0.1);
}
body.page-budgets .presup-hero-total-cell__amount {
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.08;
    font-size: clamp(1.35rem, 3.5vw, 1.95rem);
}
body.page-budgets .presup-hero-total-cell__amount--assigned {
    font-size: clamp(1.65rem, 4.4vw, 2.35rem);
    color: #d9f99d;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}
body.page-budgets .presup-hero-total-cell__amount--white {
    color: #ffffff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.28);
}
body.page-budgets .presup-hero-total-cell__ccy {
    font-weight: 700;
    font-size: 0.82em;
    opacity: 0.92;
}
body.page-budgets .presup-hero-total-cell__conv-footer,
body.page-savings .presup-hero-total-cell__conv-footer {
    margin: 6px 0 0;
    padding: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    font-size: 0.72rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.55);
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 8px;
    word-break: break-word;
    min-width: 0;
}
body.page-budgets .presup-hero-total-cell__conv-footer > span:last-child,
body.page-savings .presup-hero-total-cell__conv-footer > span:last-child {
    min-width: 0;
}
body.page-budgets .presup-hero-totals-conv-footer,
body.page-savings .presup-hero-totals-conv-footer {
    margin: 10px 0 0;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    width: 100%;
    max-width: 100%;
}
body.page-budgets .presup-hero-conv-warn {
    margin: 10px 0 0;
    font-size: 0.78rem;
    color: rgba(254, 215, 170, 0.95);
}
body.page-budgets .presup-hero-breakdown__title,
body.page-savings .savings-kpi-cell--currency-breakdown .presup-hero-breakdown__title {
    margin: 0 0 10px;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: rgba(236, 252, 203, 0.95);
}
body.page-budgets .presup-hero-breakdown__grid,
body.page-savings .savings-kpi-cell--currency-breakdown .presup-hero-breakdown__grid {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0;
}
body.page-budgets .presup-hero-breakdown__item,
body.page-savings .savings-kpi-cell--currency-breakdown .presup-hero-breakdown__item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    gap: 8px 12px;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.92);
}
body.page-budgets .presup-hero-breakdown__list,
body.page-savings .savings-kpi-cell--currency-breakdown .presup-hero-breakdown__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
body.page-budgets .presup-hero-breakdown__codecell,
body.page-savings .savings-kpi-cell--currency-breakdown .presup-hero-breakdown__codecell {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}
body.page-budgets .presup-hero-breakdown__flagimg,
body.page-savings .savings-kpi-cell--currency-breakdown .presup-hero-breakdown__flagimg {
    flex-shrink: 0;
    width: 24px;
    height: 18px;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
}
body.page-budgets .presup-hero-breakdown__code,
body.page-savings .savings-kpi-cell--currency-breakdown .presup-hero-breakdown__code {
    font-weight: 800;
    color: rgba(255, 255, 255, 0.82);
}
body.page-budgets .presup-hero-breakdown__num,
body.page-savings .savings-kpi-cell--currency-breakdown .presup-hero-breakdown__num {
    text-align: right;
    justify-self: end;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #f8fafc;
    min-width: 0;
}
body.page-budgets .presup-fx-card__hint {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.4;
    color: rgba(254, 215, 170, 0.95);
    max-width: 100%;
}
body.page-budgets .presup-fx-card__btn {
    margin-top: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid rgba(163, 230, 53, 0.45);
    background: rgba(22, 60, 36, 0.55);
    color: rgba(190, 242, 100, 0.98);
    font-weight: 700;
    font-size: 0.82rem;
    text-decoration: none;
    text-align: center;
    transition: background 0.15s ease, border-color 0.15s ease;
}
body.page-budgets .presup-fx-card__btn:hover {
    border-color: rgba(190, 242, 100, 0.65);
    background: rgba(31, 90, 52, 0.55);
    color: #ffffff;
}
body.page-budgets .presup-hero-footer-rates__ico,
body.page-savings .presup-hero-footer-rates__ico {
    flex-shrink: 0;
    margin-top: 2px;
    opacity: 0.65;
}

body.page-expenses .expense-overdue-banner {
    --expense-overdue-line: rgba(251, 191, 36, 0.95);
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    max-width: 1220px;
    margin: 2px auto 0;
    padding: 4px 12px;
    box-sizing: border-box;
    border: none;
    background: linear-gradient(180deg, rgba(120, 53, 15, 0.38) 0%, rgba(45, 20, 6, 0.55) 100%);
    box-shadow:
        0 0 14px rgba(251, 191, 36, 0.2),
        0 0 1px rgba(251, 191, 36, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    color: #fbbf24;
    font-weight: 600;
    font-size: clamp(0.8rem, 1.5vw, 0.88rem);
    letter-spacing: 0.01em;
    line-height: 1.35;
}
body.page-expenses .expense-overdue-banner::before,
body.page-expenses .expense-overdue-banner::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(251, 191, 36, 0.08) 12%,
        var(--expense-overdue-line) 50%,
        rgba(251, 191, 36, 0.08) 88%,
        transparent 100%
    );
}
body.page-expenses .expense-overdue-banner::before {
    top: 0;
}
body.page-expenses .expense-overdue-banner::after {
    bottom: 0;
}
body.page-expenses .expense-overdue-banner__icon {
    flex-shrink: 0;
    font-size: 0.92rem;
    color: #fbbf24;
    filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.5));
}
body.page-expenses .expense-overdue-banner__text {
    min-width: 0;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: nowrap;
    white-space: nowrap;
    text-align: center;
    font-size: inherit;
    font-weight: 600;
    line-height: 1.35;
    color: inherit;
}
body.page-expenses .expense-overdue-banner__icon--partial {
    color: #f59e0b;
}
body.page-expenses .expense-view-switch-row,
body.page-budgets .expense-view-switch-row,
body.page-savings .expense-view-switch-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    column-gap: 10px;
    max-width: 1220px;
    margin: 2px auto 0;
}

body.page-budgets .expense-view-switch-row {
    margin-bottom: 32px;
}
body.page-savings .expense-view-switch-row {
    margin-bottom: 32px;
}
body.page-expenses .expense-view-switch-row__today,
body.page-budgets .expense-view-switch-row__today,
body.page-savings .expense-view-switch-row__today {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
body.page-expenses .expense-view-switch-row__today .expense-account-month-dropdown,
body.page-budgets .expense-view-switch-row__today .expense-account-month-dropdown,
body.page-savings .expense-view-switch-row__today .expense-account-month-dropdown {
    width: 190px;
}
body.page-expenses .expense-view-switch-row__today .expense-account-month-dropdown__toggle,
body.page-budgets .expense-view-switch-row__today .expense-account-month-dropdown__toggle,
body.page-savings .expense-view-switch-row__today .expense-account-month-dropdown__toggle {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 190px;
    min-height: 34px;
    padding: 4px 14px !important;
    font-size: 0.9rem !important;
    line-height: 1 !important;
    border-radius: 10px;
}
body.page-expenses .expense-view-switch-row__today .expense-account-month-dropdown__label,
body.page-budgets .expense-view-switch-row__today .expense-account-month-dropdown__label,
body.page-savings .expense-view-switch-row__today .expense-account-month-dropdown__label {
    width: 100%;
    text-align: center;
}
body.page-budgets .expense-view-switch-row__today .expense-account-month-dropdown__label {
    margin-top: 1px;
}
body.page-expenses .expense-view-switch-row__today .expense-account-month-dropdown__chev,
body.page-budgets .expense-view-switch-row__today .expense-account-month-dropdown__chev,
body.page-savings .expense-view-switch-row__today .expense-account-month-dropdown__chev {
    position: absolute;
    right: 12px;
}
body.page-budgets .expense-view-switch-row__today .expense-account-month-dropdown__chev {
    margin-top: 1px;
}
body.page-expenses .expense-view-switch-row__today .expense-account-month-dropdown__panel,
body.page-budgets .expense-view-switch-row__today .expense-account-month-dropdown__panel,
body.page-savings .expense-view-switch-row__today .expense-account-month-dropdown__panel {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: min(920px, calc(100vw - 24px)) !important;
    max-width: min(920px, calc(100vw - 24px)) !important;
}
body.page-expenses .expense-view-switch-row__left,
body.page-budgets .expense-view-switch-row__left,
body.page-savings .expense-view-switch-row__left {
    min-width: 0;
}
body.page-expenses .expense-view-switch-row__right,
body.page-budgets .expense-view-switch-row__right,
body.page-savings .expense-view-switch-row__right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
body.page-expenses .expense-view-switch-row__actions-rail,
body.page-budgets .expense-view-switch-row__actions-rail,
body.page-savings .expense-view-switch-row__actions-rail {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}
.rm-delete-month-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 150px;
    box-sizing: border-box;
    flex-shrink: 0;
    min-height: 34px;
    padding: 4px 14px;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1;
    border-radius: 10px;
    cursor: pointer;
    border: 1px solid rgba(248, 113, 113, 0.65);
    background: rgba(127, 29, 29, 0.42);
    color: rgba(254, 202, 202, 0.98);
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.rm-delete-month-btn:hover:not(:disabled) {
    border-color: rgba(252, 165, 165, 0.85);
    background: rgba(153, 27, 27, 0.55);
    color: #fff7ed;
    box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.25);
}
.rm-delete-month-btn:focus-visible {
    outline: 2px solid rgba(248, 113, 113, 0.65);
    outline-offset: 2px;
}
.rm-delete-month-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}
.rm-delete-month-btn__icon {
    font-size: 0.95rem;
    opacity: 0.95;
}
.rm-delete-month-confirm {
    grid-column: 1 / -1;
    width: 100%;
    box-sizing: border-box;
    margin-top: 8px;
}

body.page-savings .expense-account-page-hero > .rm-delete-month-confirm {
    grid-column: auto;
    max-width: 1220px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 2px;
}
.rm-delete-month-confirm__table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 12px;
    overflow: hidden;
    border: none;
    background: linear-gradient(180deg, rgb(8 1 1 / 50%) 0%, rgb(42 6 8 / 78%) 100%);
    box-shadow:
        0 10px 32px rgba(127, 29, 29, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.rm-delete-month-confirm__question {
    padding: 12px 16px 10px;
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.38;
    color: #ffffff;
}
.rm-delete-month-confirm__footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px 12px;
    flex-wrap: nowrap;
    padding: 10px 14px 12px;
    border-top: 1px solid rgba(248, 113, 113, 0.28);
    vertical-align: middle;
}
.rm-delete-month-confirm__warn-inline {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1.3;
    color: #ffffff;
}
.rm-delete-month-confirm__cancel {
    width: auto;
    min-width: 0;
    min-height: 32px;
    padding: 5px 12px;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.45);
    background: rgba(15, 23, 42, 0.55);
    color: #e2e8f0;
    white-space: nowrap;
    flex: 0 0 auto;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.rm-delete-month-confirm__cancel:hover {
    border-color: rgba(226, 232, 240, 0.55);
    background: rgba(30, 41, 59, 0.72);
}
.rm-delete-month-confirm__commit {
    width: auto;
    min-width: 0;
    min-height: 32px;
    padding: 5px 12px;
    font-size: 0.82rem;
    font-weight: 800;
    cursor: pointer;
    border-radius: 10px;
    border: 1px solid rgba(248, 113, 113, 0.85);
    background: linear-gradient(180deg, rgba(185, 28, 28, 0.92) 0%, rgba(127, 29, 29, 0.98) 100%);
    color: #fff7ed;
    white-space: nowrap;
    flex: 0 0 auto;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
    transition: filter 0.15s ease, transform 0.12s ease;
}
.rm-delete-month-confirm__commit:hover:not(:disabled) {
    filter: brightness(1.06);
}
.rm-delete-month-confirm__commit:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}
@media (max-width: 640px) {
    .rm-delete-month-confirm__footer {
        flex-wrap: wrap;
        gap: 8px 10px;
    }
    .rm-delete-month-confirm__warn-inline {
        flex: 1 1 100%;
    }
}
body.page-budgets .expense-view-switch-row__actions-rail .rm-delete-month-btn {
    flex: 0 0 auto;
    white-space: nowrap;
}
body.page-expenses .expense-view-switch-row__import.expense-account-presup-import-dropdown,
body.page-budgets .expense-view-switch-row__import.expense-account-presup-import-dropdown {
    align-items: center;
}
body.page-expenses .expense-view-switch-row__import .expense-account-presup-insight__cta,
body.page-budgets .expense-view-switch-row__import .expense-account-presup-insight__cta {
    white-space: nowrap;
    width: 150px;
    box-sizing: border-box;
    justify-content: center;
}
body.page-expenses .expense-view-switch-row__left .expense-overdue-banner {
    max-width: none;
    margin: 0;
    height: 32px;
}
body.page-expenses .expense-view-switch-row__right .gastos-add-btn.expense-account-hero-toolbar__add-btn,
body.page-budgets .expense-view-switch-row__right .gastos-add-btn.expense-account-hero-toolbar__add-btn,
body.page-savings .expense-view-switch-row__right .gastos-add-btn.expense-account-hero-toolbar__add-btn {
    min-height: 34px !important;
    padding: 4px 14px !important;
    font-size: 0.9rem !important;
    line-height: 1 !important;
    border-radius: 10px;
}
body.page-expenses .expense-view-switch-row__right .gastos-add-btn.expense-account-hero-toolbar__add-btn .gastos-add-btn__icon-bubble i,
body.page-budgets .expense-view-switch-row__right .gastos-add-btn.expense-account-hero-toolbar__add-btn .gastos-add-btn__icon-bubble i,
body.page-savings .expense-view-switch-row__right .gastos-add-btn.expense-account-hero-toolbar__add-btn .gastos-add-btn__icon-bubble i {
    font-size: 12px;
}
body.page-expenses.is-expense-chart-view .expense-account-hero-toolbar__center {
    visibility: hidden !important;
    pointer-events: none !important;
}
body.page-expenses.is-expense-chart-view .expense-account-hero-toolbar__tabs,
body.page-expenses.is-expense-chart-view .expense-account-hero-impact-row,
body.page-expenses.is-expense-chart-view .expense-view-switch-row {
    display: none !important;
}
body.page-income.is-income-chart-view .expense-account-hero-toolbar__tabs,
body.page-income.is-income-chart-view .expense-account-hero-impact-row,
body.page-income.is-income-chart-view .expense-view-switch-row {
    display: none !important;
}
body.page-income .expense-view-switch-btn {
    border: 1px solid rgba(148, 163, 184, 0.36);
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.58);
    color: rgba(226, 232, 240, 0.95);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.1;
    padding: 9px 14px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
body.page-income .expense-view-switch-btn:hover {
    border-color: rgba(190, 242, 100, 0.48);
    background: rgba(30, 41, 59, 0.72);
}
body.page-income .expense-view-switch-btn.is-active {
    border-color: rgba(163, 230, 53, 0.56);
    background: linear-gradient(180deg, rgba(34, 197, 94, 0.43), rgba(21, 128, 61, 0.52));
    color: #f8fafc;
}
body.page-expenses .expense-view-switch-btn {
    border: 1px solid rgba(148, 163, 184, 0.36);
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.58);
    color: rgba(226, 232, 240, 0.95);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.1;
    padding: 9px 14px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
body.page-expenses .expense-view-switch-btn:hover {
    border-color: rgba(190, 242, 100, 0.48);
    background: rgba(30, 41, 59, 0.72);
}
body.page-expenses .expense-view-switch-btn.is-active {
    border-color: rgba(163, 230, 53, 0.56);
    background: linear-gradient(180deg, rgba(34, 197, 94, 0.43), rgba(21, 128, 61, 0.52));
    color: #f8fafc;
}
body.page-budgets .expense-account-hero-toolbar__right--view-switch {
    grid-column: 3;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
}
body.page-budgets .expense-view-switch-btn {
    border: 1px solid rgba(148, 163, 184, 0.36);
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.58);
    color: rgba(226, 232, 240, 0.95);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.1;
    padding: 9px 14px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
body.page-budgets .expense-view-switch-btn:hover {
    border-color: rgba(190, 242, 100, 0.48);
    background: rgba(30, 41, 59, 0.72);
}
body.page-budgets .expense-view-switch-btn.is-active {
    border-color: rgba(163, 230, 53, 0.56);
    background: linear-gradient(180deg, rgba(34, 197, 94, 0.43), rgba(21, 128, 61, 0.52));
    color: #f8fafc;
}
body.page-budgets.is-budget-chart-view #budgetCardsView {
    display: none !important;
}

body.page-budgets.is-budget-chart-view .expense-account-hero-toolbar__tabs {
    margin-bottom: 1px;
}
body.page-budgets.is-budget-chart-view #budgetGraphView {
    margin-top: -20px;
}
body.page-budgets .budget-graph-panel {
    max-width: 1220px;
    margin: 0 auto 0;
    padding: 12px 12px 14px;
    border: none;
    background: linear-gradient(165deg, rgba(18, 48, 32, 0.72) 0%, rgba(10, 28, 18, 0.88) 100%);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
}
body.page-budgets .budget-graph-panel .expense-graph-panel__filters {
    display: grid;
    grid-template-columns: minmax(190px, 260px) minmax(190px, 260px) auto;
    gap: 10px;
    align-items: end;
    margin-bottom: 10px;
    justify-content: start;
}
body.page-budgets .budget-graph-panel .budget-graph-panel__filters-currency {
    justify-self: start;
    width: 220px;
    max-width: min(220px, 100%);
}
body.page-budgets .budget-graph-panel .expense-graph-panel__field {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    width: 100%;
}
body.page-budgets .budget-graph-panel .expense-graph-panel__field > span {
    font-size: 0.95rem;
    color: #e2e8f0;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}
body.page-budgets .budget-graph-panel .expense-graph-panel__picker { position: relative; }
body.page-budgets .budget-graph-panel .expense-graph-panel__picker-btn,
body.page-budgets .budget-graph-panel .expense-graph-panel__picker-year-nav,
body.page-budgets .budget-graph-panel .expense-graph-panel__picker-month {
    border: 1px solid rgba(148, 163, 184, 0.34);
    background: rgba(15, 23, 42, 0.54);
    color: #f8fafc;
}
body.page-budgets .budget-graph-panel .expense-graph-panel__picker-btn {
    width: 100%;
    min-height: 36px;
    border-radius: 9px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: lowercase;
    cursor: pointer;
}
body.page-budgets .budget-graph-panel .expense-graph-panel__picker-pop {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 30;
    width: 320px;
    max-width: min(86vw, 320px);
    border: 1px solid rgba(148, 163, 184, 0.32);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(9, 17, 30, 0.98) 0%, rgba(5, 11, 22, 0.98) 100%);
    box-shadow: 0 20px 34px rgba(2, 6, 23, 0.55);
    padding: 10px;
}
body.page-budgets .budget-graph-panel .expense-graph-panel__picker-head {
    display: grid;
    grid-template-columns: 32px 1fr 32px;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
body.page-budgets .budget-graph-panel .expense-graph-panel__picker-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}
body.page-budgets .budget-graph-panel .expense-graph-panel__picker-month {
    min-height: 38px;
    border-radius: 8px;
    text-transform: uppercase;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    cursor: pointer;
}
body.page-budgets .budget-graph-panel .expense-graph-panel__picker-month.is-active {
    border-color: rgba(34, 197, 94, 0.75);
    background: linear-gradient(180deg, rgba(34, 197, 94, 0.62), rgba(22, 101, 52, 0.85));
}
body.page-budgets .budget-graph-panel .expense-graph-panel__picker-month:disabled {
    opacity: 0.42;
    cursor: not-allowed;
}
body.page-budgets .budget-graph-panel .budget-graph-panel__title-bar {
    margin: 0 2px 8px;
}
body.page-budgets .budget-graph-panel .budget-graph-panel__title-bar .expense-graph-panel__title {
    margin: 0;
    font-size: 0.95rem;
    color: #e2e8f0;
    font-weight: 800;
}
body.page-budgets .budget-graph-panel .expense-graph-panel__currency-mode {
    display: grid;
    gap: 4px;
    min-width: 0;
}
body.page-budgets .budget-graph-panel .expense-graph-panel__currency-mode-label {
    margin: 0;
    color: rgba(203, 213, 225, 0.92);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
}
body.page-budgets .budget-graph-panel .expense-graph-panel__currency-mode select {
    min-height: 36px;
    width: 100%;
    border-radius: 10px;
    border: 1px solid rgba(71, 85, 105, 0.6);
    background: rgba(2, 6, 23, 0.7);
    color: #e2e8f0;
    padding: 0 34px 0 12px;
    font-size: 0.82rem;
    font-weight: 700;
}
body.page-budgets .budget-graph-panel .budget-graph-panel__legend {
    margin: 0 2px 10px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    color: rgba(203, 213, 225, 0.95);
    font-size: 0.84rem;
    font-weight: 700;
}
body.page-budgets .budget-graph-panel .expense-graph-panel__legend-item { display: inline-flex; align-items: center; gap: 6px; margin-right: 10px; }
body.page-budgets .budget-graph-panel .expense-graph-panel__legend-dot { width: 8px; height: 8px; border-radius: 999px; }
body.page-budgets .budget-graph-panel .expense-graph-panel__kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(2, 6, 23, 0.52) 0%, rgba(2, 6, 23, 0.72) 100%);
    margin: 0 0 10px;
}
body.page-budgets .budget-graph-panel .expense-graph-panel__kpi {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-right: 1px solid rgba(148, 163, 184, 0.16);
}
body.page-budgets .budget-graph-panel .expense-graph-panel__kpi:last-child { border-right: 0; }
body.page-budgets .budget-graph-panel .expense-graph-panel__budget-alert {
    margin: 0 0 10px;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid rgba(248, 113, 113, 0.45);
    background: rgba(127, 29, 29, 0.35);
    color: #fecaca;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.35;
}
body.page-budgets .budget-graph-panel .expense-graph-panel__kpi-icon {
    width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(180deg, rgba(236, 253, 245, 0.18) 0%, rgba(34, 197, 94, 0.2) 100%);
    border: 1px solid rgba(251, 191, 36, 0.58); color: #fbbf24;
}
body.page-budgets .budget-graph-panel .expense-graph-panel__kpi-label { margin: 0; color: rgba(203, 213, 225, 0.72); font-size: 0.78rem; font-weight: 600; }
body.page-budgets .budget-graph-panel .expense-graph-panel__kpi-value { margin: 4px 0 0; color: #e2e8f0; font-size: 1.06rem; font-weight: 800; line-height: 1.1; }
body.page-budgets .budget-graph-panel .expense-graph-panel__chart-wrap {
    position: relative;
    height: 450px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(2, 6, 23, 0.52) 0%, rgba(2, 6, 23, 0.72) 100%);
    overflow: visible;
}
body.page-budgets .budget-graph-panel .expense-graph-panel__svg { width: 100%; height: 100%; display: block; }
body.page-budgets .budget-graph-panel .expense-graph-panel__empty { margin: 8px 0 0; color: rgba(226, 232, 240, 0.9); font-size: 0.84rem; }
body.page-budgets .budget-graph-panel .expense-graph-panel__insight {
    margin: 10px 0 0;
    padding: 10px 12px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(2, 6, 23, 0.48) 0%, rgba(2, 6, 23, 0.68) 100%);
    color: rgba(226, 232, 240, 0.95);
    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1.45;
    text-align: right;
}
body.page-budgets .budget-graph-panel .expense-graph-panel__insight-arrow { display: inline-block; margin-right: 7px; font-size: 0.9rem; font-weight: 900; }
body.page-budgets .budget-graph-panel .expense-graph-panel__insight-arrow.is-up { color: #f87171; }
body.page-budgets .budget-graph-panel .expense-graph-panel__insight-arrow.is-down { color: #4ade80; }
body.page-budgets .budget-graph-panel .expense-graph-panel__insight-arrow.is-neutral { color: #fbbf24; }
body.page-budgets .budget-graph-panel .expense-graph-panel__tooltip {
    position: absolute;
    width: 260px;
    max-width: min(280px, 92vw);
    z-index: 25;
    border: 1px solid rgba(71, 85, 105, 0.55);
    border-radius: 10px;
    background: rgba(2, 6, 23, 0.9);
    padding: 10px 12px;
    box-shadow: 0 14px 28px rgba(2, 6, 23, 0.62);
    pointer-events: none;
}
body.page-budgets .budget-graph-panel .expense-graph-panel__tooltip-title { margin: 0 0 8px; color: rgba(226, 232, 240, 0.9); font-size: 0.82rem; font-weight: 700; }
body.page-budgets .budget-graph-panel .expense-graph-panel__tooltip-row {
    margin: 4px 0 0;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #e2e8f0;
    font-size: 0.8rem;
}
body.page-budgets .budget-graph-panel .expense-graph-panel__tooltip-row strong { margin-left: auto; font-size: 0.78rem; color: #f8fafc; }
body.page-budgets .budget-graph-panel .expense-graph-panel__tooltip-fx-title {
    margin: 8px 0 4px;
    padding-top: 6px;
    border-top: 1px solid rgba(148, 163, 184, 0.28);
    color: rgba(226, 232, 240, 0.88);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}
body.page-budgets .budget-graph-panel .expense-graph-panel__tooltip-row--fx { justify-content: flex-start; }
body.page-budgets .budget-graph-panel .expense-graph-panel__tooltip-row--fx strong { margin-left: 0; font-size: 0.76rem; font-weight: 800; }
body.page-budgets .budget-graph-panel .expense-graph-panel__tooltip-fx-src {
    margin: -2px 0 4px;
    font-size: 0.68rem;
    font-weight: 600;
    color: rgba(148, 163, 184, 0.98);
    font-style: italic;
    line-height: 1.25;
}
@media (max-width: 900px) {
    body.page-budgets .expense-account-hero-toolbar__right--view-switch {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
        margin-top: 6px;
    }
    body.page-budgets .budget-graph-panel .expense-graph-panel__filters {
        grid-template-columns: 1fr;
    }
    body.page-budgets .budget-graph-panel .budget-graph-panel__filters-currency {
        justify-self: stretch;
        width: 100%;
    }
    body.page-budgets .budget-graph-panel .expense-graph-panel__currency-mode {
        width: 100%;
        min-width: 0;
    }
    body.page-budgets .budget-graph-panel .expense-graph-panel__kpis {
        grid-template-columns: 1fr;
    }
    body.page-budgets .budget-graph-panel .expense-graph-panel__kpi {
        border-right: 0;
        border-bottom: 1px solid rgba(148, 163, 184, 0.14);
    }
    body.page-budgets .budget-graph-panel .expense-graph-panel__kpi:last-child {
        border-bottom: 0;
    }
    body.page-budgets .budget-graph-panel .expense-graph-panel__chart-wrap {
        height: 370px;
    }
}
body.page-expenses .expense-graph-panel,
body.page-savings .expense-graph-panel {
    max-width: 1220px;
    margin: 6px auto 0;
    padding: 12px 12px 14px;
}
body.page-expenses .expense-graph-panel__filters,
body.page-savings .expense-graph-panel__filters {
    display: grid;
    grid-template-columns: minmax(190px, 260px) minmax(190px, 260px) minmax(260px, 1fr);
    gap: 10px;
    align-items: end;
    justify-content: start;
    margin-bottom: 10px;
}
body.page-expenses .expense-graph-panel__field,
body.page-savings .expense-graph-panel__field {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 260px;
}
body.page-expenses .expense-graph-panel__field > span,
body.page-savings .expense-graph-panel__field > span {
    font-size: 0.95rem;
    color: #e2e8f0;
    font-weight: 800;
    line-height: 1;
    margin: 0;
    white-space: nowrap;
}
body.page-expenses .expense-graph-panel__month-year,
body.page-savings .expense-graph-panel__month-year {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
body.page-expenses .expense-graph-panel__month-year select,
body.page-savings .expense-graph-panel__month-year select {
    width: 100%;
    min-height: 36px;
    border-radius: 9px;
    border: 1px solid rgba(148, 163, 184, 0.34);
    background: rgba(15, 23, 42, 0.54);
    color: #f8fafc;
    padding: 0 10px;
    font-size: 0.9rem;
    cursor: pointer;
}
body.page-expenses .expense-graph-panel__picker,
body.page-savings .expense-graph-panel__picker {
    position: relative;
}
body.page-expenses .expense-graph-panel__picker-btn,
body.page-savings .expense-graph-panel__picker-btn {
    width: 100%;
    min-height: 36px;
    border-radius: 9px;
    border: 1px solid rgba(148, 163, 184, 0.34);
    background: rgba(15, 23, 42, 0.54);
    color: #f8fafc;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: lowercase;
    cursor: pointer;
}
body.page-expenses .expense-graph-panel__picker-btn:hover,
body.page-savings .expense-graph-panel__picker-btn:hover {
    border-color: rgba(163, 230, 53, 0.55);
}
body.page-expenses .expense-graph-panel__picker-pop,
body.page-savings .expense-graph-panel__picker-pop {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 30;
    width: 320px;
    max-width: min(86vw, 320px);
    border: 1px solid rgba(148, 163, 184, 0.32);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(9, 17, 30, 0.98) 0%, rgba(5, 11, 22, 0.98) 100%);
    box-shadow: 0 20px 34px rgba(2, 6, 23, 0.55);
    padding: 10px;
}
body.page-expenses .expense-graph-panel__picker-head,
body.page-savings .expense-graph-panel__picker-head {
    display: grid;
    grid-template-columns: 32px 1fr 32px;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
body.page-expenses .expense-graph-panel__picker-head strong,
body.page-savings .expense-graph-panel__picker-head strong {
    text-align: center;
    font-size: 1rem;
    color: #e2e8f0;
}
body.page-expenses .expense-graph-panel__picker-year-nav,
body.page-savings .expense-graph-panel__picker-year-nav {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid rgba(148, 163, 184, 0.28);
    background: rgba(15, 23, 42, 0.7);
    color: #e2e8f0;
    cursor: pointer;
}
body.page-expenses .expense-graph-panel__picker-year-nav:hover,
body.page-savings .expense-graph-panel__picker-year-nav:hover {
    border-color: rgba(163, 230, 53, 0.55);
    color: #bef264;
}
body.page-expenses .expense-graph-panel__picker-grid,
body.page-savings .expense-graph-panel__picker-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}
body.page-expenses .expense-graph-panel__picker-month,
body.page-savings .expense-graph-panel__picker-month {
    min-height: 38px;
    border-radius: 8px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(15, 23, 42, 0.45);
    color: #e2e8f0;
    text-transform: uppercase;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    cursor: pointer;
}
body.page-expenses .expense-graph-panel__picker-month:hover,
body.page-savings .expense-graph-panel__picker-month:hover {
    border-color: rgba(163, 230, 53, 0.55);
    background: rgba(34, 197, 94, 0.14);
}
body.page-expenses .expense-graph-panel__picker-month.is-active,
body.page-savings .expense-graph-panel__picker-month.is-active {
    border-color: rgba(34, 197, 94, 0.75);
    background: linear-gradient(180deg, rgba(34, 197, 94, 0.62), rgba(22, 101, 52, 0.85));
    color: #f8fafc;
}
body.page-expenses .expense-graph-panel__picker-month:disabled,
body.page-savings .expense-graph-panel__picker-month:disabled {
    opacity: 0.42;
    cursor: not-allowed;
    background: rgba(15, 23, 42, 0.25);
}
body.page-expenses .expense-graph-panel__apply,
body.page-savings .expense-graph-panel__apply {
    min-height: 36px;
    border-radius: 9px;
    border: 1px solid rgba(163, 230, 53, 0.44);
    background: linear-gradient(180deg, rgba(34, 197, 94, 0.4), rgba(21, 128, 61, 0.5));
    color: #f8fafc;
    font-size: 0.86rem;
    font-weight: 700;
    padding: 0 14px;
}
body.page-expenses .expense-graph-panel__chart-head,
body.page-savings .expense-graph-panel__chart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 4px 2px 8px;
}
body.page-expenses .expense-graph-panel__title,
body.page-savings .expense-graph-panel__title {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    color: #e2e8f0;
    font-weight: 800;
}
body.page-expenses .expense-graph-panel__title i,
body.page-savings .expense-graph-panel__title i {
    font-size: 0.82rem;
    color: rgba(203, 213, 225, 0.7);
}
body.page-expenses .expense-graph-panel__legend,
body.page-savings .expense-graph-panel__legend {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    color: rgba(203, 213, 225, 0.95);
    font-size: 0.84rem;
    font-weight: 700;
    margin-left: auto;
    max-width: 56%;
}
body.page-expenses .expense-graph-panel__legend-item,
body.page-savings .expense-graph-panel__legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 10px;
}
body.page-expenses .expense-graph-panel__legend-dot,
body.page-savings .expense-graph-panel__legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #86efac;
    box-shadow: 0 0 10px rgba(134, 239, 172, 0.8);
}
body.page-expenses .expense-graph-panel__mode,
body.page-savings .expense-graph-panel__mode {
    flex-shrink: 0;
    width: 280px;
}
body.page-expenses .expense-graph-panel__series-inline,
body.page-savings .expense-graph-panel__series-inline {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: end;
    justify-self: end;
    justify-items: end;
    gap: 6px;
}
body.page-expenses .expense-graph-panel__series-row,
body.page-savings .expense-graph-panel__series-row {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}
body.page-expenses .expense-graph-panel__currency-mode,
body.page-savings .expense-graph-panel__currency-mode {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    width: auto;
    min-width: 0;
    flex-shrink: 0;
}
body.page-expenses .expense-graph-panel__currency-mode-label,
body.page-savings .expense-graph-panel__currency-mode-label {
    margin: 0;
    color: rgba(203, 213, 225, 0.92);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

body.page-expenses .expense-graph-panel__currency-mode select,
body.page-savings .expense-graph-panel__currency-mode select {
    min-height: 34px;
    flex: 0 0 280px;
    width: 280px;
    min-width: 280px;
    max-width: 280px;
    border-radius: 10px;
    border: 1px solid rgba(71, 85, 105, 0.6);
    background: rgba(2, 6, 23, 0.7);
    color: #e2e8f0;
    padding: 0 34px 0 12px;
    font-size: 0.82rem;
    font-weight: 700;
}
body.page-expenses .expense-graph-panel__mode select,
body.page-savings .expense-graph-panel__mode select {
    min-height: 34px;
    width: 280px;
    min-width: 280px;
    max-width: 280px;
    border-radius: 10px;
    border: 1px solid rgba(71, 85, 105, 0.6);
    background: rgba(2, 6, 23, 0.7);
    color: #e2e8f0;
    padding: 0 34px 0 12px;
    font-size: 0.88rem;
    font-weight: 700;
}
body.page-expenses .expense-graph-panel__kpis,
body.page-savings .expense-graph-panel__kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(2, 6, 23, 0.52) 0%, rgba(2, 6, 23, 0.72) 100%);
    margin: 0 0 4px;
}
body.page-expenses .expense-graph-panel__kpi,
body.page-savings .expense-graph-panel__kpi {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-right: 1px solid rgba(148, 163, 184, 0.16);
}
body.page-expenses .expense-graph-panel__kpi:last-child,
body.page-savings .expense-graph-panel__kpi:last-child {
    border-right: 0;
}
body.page-expenses .expense-graph-panel__kpi-content,
body.page-savings .expense-graph-panel__kpi-content {
    min-width: 0;
}
body.page-expenses .expense-graph-panel__kpi-icon,
body.page-savings .expense-graph-panel__kpi-icon {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, rgba(236, 253, 245, 0.18) 0%, rgba(34, 197, 94, 0.2) 100%);
    border: 1px solid rgba(251, 191, 36, 0.58);
    color: #fbbf24;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 16px rgba(2, 6, 23, 0.35);
}
body.page-expenses .expense-graph-panel__kpi-icon i,
body.page-savings .expense-graph-panel__kpi-icon i {
    font-size: 0.86rem;
}
body.page-expenses .expense-graph-panel__kpi-label,
body.page-savings .expense-graph-panel__kpi-label {
    margin: 0;
    color: rgba(203, 213, 225, 0.72);
    font-size: 0.78rem;
    font-weight: 600;
}
body.page-expenses .expense-graph-panel__kpi-value,
body.page-savings .expense-graph-panel__kpi-value {
    margin: 4px 0 0;
    color: #e2e8f0;
    font-size: 1.06rem;
    font-weight: 800;
    line-height: 1.1;
}
body.page-expenses .expense-graph-panel__kpi-value-row,
body.page-savings .expense-graph-panel__kpi-value-row {
    margin: 4px 0 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
body.page-expenses .expense-graph-panel__kpi-value-row .expense-graph-panel__kpi-value,
body.page-savings .expense-graph-panel__kpi-value-row .expense-graph-panel__kpi-value {
    margin: 0;
}
body.page-expenses .expense-graph-panel__kpi-trend,
body.page-savings .expense-graph-panel__kpi-trend {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 0.74rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.01em;
    border: 1px solid rgba(148, 163, 184, 0.32);
    color: #cbd5e1;
    background: rgba(15, 23, 42, 0.5);
}
body.page-expenses .expense-graph-panel__kpi-trend.is-up {
    color: #fca5a5;
    border-color: rgba(239, 68, 68, 0.45);
    background: rgba(127, 29, 29, 0.3);
}
body.page-expenses .expense-graph-panel__kpi-trend.is-down {
    color: #86efac;
    border-color: rgba(34, 197, 94, 0.45);
    background: rgba(20, 83, 45, 0.34);
}
body.page-expenses .expense-graph-panel__kpi-trend.is-neutral {
    color: #fbbf24;
    border-color: rgba(251, 191, 36, 0.45);
    background: rgba(113, 63, 18, 0.3);
}
body.page-savings .expense-graph-panel__kpi-trend.is-savings-up {
    color: #86efac;
    border-color: rgba(34, 197, 94, 0.45);
    background: rgba(20, 83, 45, 0.34);
}
body.page-savings .expense-graph-panel__kpi-trend.is-savings-down {
    color: #fca5a5;
    border-color: rgba(239, 68, 68, 0.45);
    background: rgba(127, 29, 29, 0.3);
}
body.page-expenses .expense-graph-panel__kpi-sub,
body.page-savings .expense-graph-panel__kpi-sub {
    margin: 4px 0 0;
    color: rgba(148, 163, 184, 0.85);
    font-size: 0.78rem;
    font-weight: 600;
}
body.page-expenses .expense-graph-panel__chart-wrap,
body.page-savings .expense-graph-panel__chart-wrap {
    position: relative;
    height: 450px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(2, 6, 23, 0.52) 0%, rgba(2, 6, 23, 0.72) 100%);
    overflow: visible;
}
body.page-savings .expense-graph-panel__chart-wrap {
    height: 300px;
}
body.page-expenses .expense-graph-panel__svg,
body.page-savings .expense-graph-panel__svg {
    width: 100%;
    height: 100%;
    display: block;
}
body.page-expenses .expense-graph-panel__empty,
body.page-savings .expense-graph-panel__empty {
    margin: 8px 0 0;
    color: rgba(226, 232, 240, 0.9);
    font-size: 0.84rem;
}
body.page-expenses .expense-graph-panel__insight,
body.page-savings .expense-graph-panel__insight {
    margin: 10px 0 0;
    padding: 10px 12px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(2, 6, 23, 0.48) 0%, rgba(2, 6, 23, 0.68) 100%);
    color: rgba(226, 232, 240, 0.95);
    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1.45;
}
body.page-savings .expense-graph-panel__insight.is-positive {
    border-color: rgba(34, 197, 94, 0.42);
    background: linear-gradient(180deg, rgba(20, 83, 45, 0.28) 0%, rgba(2, 6, 23, 0.62) 100%);
    color: rgba(220, 252, 231, 0.95);
}
body.page-expenses .expense-graph-panel__insight-arrow,
body.page-savings .expense-graph-panel__insight-arrow {
    display: inline-block;
    margin-right: 7px;
    font-size: 0.9rem;
    font-weight: 900;
    line-height: 1;
}
body.page-expenses .expense-graph-panel__insight-arrow.is-up {
    color: #f87171;
}
body.page-expenses .expense-graph-panel__insight-arrow.is-down {
    color: #4ade80;
}
body.page-expenses .expense-graph-panel__insight-arrow.is-neutral {
    color: #fbbf24;
}
body.page-savings .expense-graph-panel__insight-arrow.is-savings-up {
    color: #4ade80;
}
body.page-savings .expense-graph-panel__insight-arrow.is-savings-down {
    color: #f87171;
}
body.page-expenses .expense-graph-panel__tooltip,
body.page-savings .expense-graph-panel__tooltip {
    position: absolute;
    width: 190px;
    z-index: 25;
    border: 1px solid rgba(71, 85, 105, 0.55);
    border-radius: 10px;
    background: rgba(2, 6, 23, 0.9);
    padding: 10px 12px;
    box-shadow: 0 14px 28px rgba(2, 6, 23, 0.62);
    pointer-events: none;
}
body.page-expenses .expense-graph-panel__tooltip-title,
body.page-savings .expense-graph-panel__tooltip-title {
    margin: 0 0 8px;
    color: rgba(226, 232, 240, 0.9);
    font-size: 0.82rem;
    font-weight: 700;
}
body.page-savings .expense-graph-panel__tooltip--rich {
    width: min(260px, 92vw);
    border-color: rgba(34, 197, 94, 0.5);
}
body.page-savings .expense-graph-panel__kpi-trend.is-neutral {
    color: #fbbf24;
    border-color: rgba(251, 191, 36, 0.45);
    background: rgba(113, 63, 18, 0.3);
}
body.page-expenses .expense-graph-panel__tooltip-line,
body.page-savings .expense-graph-panel__tooltip-line {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(203, 213, 225, 0.9);
    font-size: 0.78rem;
    font-weight: 600;
}
body.page-expenses .expense-graph-panel__tooltip-value,
body.page-savings .expense-graph-panel__tooltip-value {
    margin: 6px 0 0;
    color: #f8fafc;
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.1;
}
body.page-savings .expense-graph-panel__tooltip-body {
    margin: 4px 0 0;
}
body.page-expenses .expense-graph-panel__tooltip-row,
body.page-savings .expense-graph-panel__tooltip-row {
    margin: 4px 0 0;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #e2e8f0;
    font-size: 0.8rem;
}
body.page-expenses .expense-graph-panel__tooltip-row strong,
body.page-savings .expense-graph-panel__tooltip-row strong {
    margin-left: auto;
    font-size: 0.78rem;
    color: #f8fafc;
}
body.page-savings .expense-graph-panel__kpis--savings {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.85fr);
}
body.page-savings .expense-graph-panel__kpi--wide .expense-graph-panel__kpi-value-row {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 6px 10px;
}
body.page-savings .expense-graph-panel__kpi--wide .expense-graph-panel__kpi-trend {
    flex-shrink: 0;
}
body.page-savings .savings-graph-footer {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: 12px 0 0;
    padding: 12px 12px 14px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(2, 6, 23, 0.48) 0%, rgba(2, 6, 23, 0.68) 100%);
}
body.page-savings .savings-graph-footer__title {
    margin: 0 0 10px;
    font-size: 0.82rem;
    font-weight: 800;
    color: rgba(226, 232, 240, 0.92);
}
body.page-savings .savings-graph-footer__donut-wrap {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
body.page-savings .savings-graph-footer__donut {
    flex-shrink: 0;
}
body.page-savings .savings-graph-footer__donut-legend {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(203, 213, 225, 0.88);
}
body.page-savings .savings-graph-footer__donut-legend li {
    margin: 4px 0;
}
body.page-savings .savings-graph-footer__stat {
    margin: 8px 0 0;
    font-size: 0.78rem;
    color: rgba(148, 163, 184, 0.9);
}
body.page-savings .savings-graph-footer__big {
    margin: 6px 0 0;
    font-size: 1.05rem;
    font-weight: 800;
    color: #e2e8f0;
}
body.page-savings .savings-graph-footer__big--green {
    color: #4ade80;
}
body.page-savings .savings-graph-footer__big--red {
    color: #f87171;
}
body.page-savings .savings-graph-footer__sub {
    margin: 4px 0 0;
    font-size: 0.76rem;
    color: rgba(148, 163, 184, 0.85);
}
@media (max-width: 900px) {
    body.page-expenses .expense-view-switch-row,
    body.page-budgets .expense-view-switch-row,
    body.page-savings .expense-view-switch-row {
        grid-template-columns: 1fr;
        grid-template-areas:
            "switch-today"
            "switch-actions"
            "switch-extra";
        row-gap: 8px;
    }
    body.page-expenses .expense-view-switch-row__today,
    body.page-budgets .expense-view-switch-row__today,
    body.page-savings .expense-view-switch-row__today {
        grid-area: switch-today;
        width: 100%;
        justify-content: flex-start;
    }
    body.page-expenses .expense-view-switch-row__right,
    body.page-budgets .expense-view-switch-row__right,
    body.page-savings .expense-view-switch-row__right {
        grid-area: switch-actions;
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    body.page-expenses .expense-view-switch-row__left,
    body.page-budgets .expense-view-switch-row__left,
    body.page-savings .expense-view-switch-row__left {
        grid-area: switch-extra;
        width: 100%;
    }
    body.page-budgets .expense-view-switch-row__left:has(.expense-account-presup-insight--empty),
    body.page-expenses .expense-view-switch-row__left:not(:has(.expense-overdue-banner)),
    body.page-savings .expense-view-switch-row__left:empty {
        display: none;
    }
    body.page-expenses .expense-view-switch-row__today .expense-account-month-dropdown,
    body.page-expenses .expense-view-switch-row__today .expense-account-month-dropdown__toggle,
    body.page-budgets .expense-view-switch-row__today .expense-account-month-dropdown,
    body.page-budgets .expense-view-switch-row__today .expense-account-month-dropdown__toggle,
    body.page-savings .expense-view-switch-row__today .expense-account-month-dropdown,
    body.page-savings .expense-view-switch-row__today .expense-account-month-dropdown__toggle {
        width: 100%;
    }
    body.page-expenses .expense-view-switch-row__actions-rail,
    body.page-budgets .expense-view-switch-row__actions-rail,
    body.page-savings .expense-view-switch-row__actions-rail {
        width: 100%;
        display: flex;
        justify-content: stretch;
        flex-wrap: nowrap;
        gap: 10px;
    }

    body.page-expenses .expense-view-switch-row__actions-rail > .expense-view-switch-row__import,
    body.page-budgets .expense-view-switch-row__actions-rail > .expense-view-switch-row__import,
    body.page-savings .expense-view-switch-row__actions-rail > .expense-view-switch-row__import,
    body.page-expenses .expense-view-switch-row__actions-rail > .gastos-add-btn.expense-view-switch-row__add-expense,
    body.page-budgets .expense-view-switch-row__actions-rail > .gastos-add-btn.expense-view-switch-row__add-expense,
    body.page-savings .expense-view-switch-row__actions-rail > .gastos-add-btn.expense-view-switch-row__add-expense {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
        max-width: none;
    }
    body.page-expenses .expense-view-switch-row__import .expense-account-presup-insight__cta,
    body.page-budgets .expense-view-switch-row__import .expense-account-presup-insight__cta,
    body.page-savings .expense-view-switch-row__import .expense-account-presup-insight__cta {
        width: 100%;
        box-sizing: border-box;
    }
    body.page-expenses .expense-view-switch-row__actions-rail > .rm-delete-month-btn,
    body.page-budgets .expense-view-switch-row__actions-rail > .rm-delete-month-btn,
    body.page-savings .expense-view-switch-row__actions-rail > .rm-delete-month-btn {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
        max-width: none;
        white-space: nowrap;
    }
    body.page-expenses .expense-graph-panel__filters,
body.page-savings .expense-graph-panel__filters {
        grid-template-columns: 1fr;
    }
    body.page-expenses .expense-graph-panel__series-inline,
body.page-savings .expense-graph-panel__series-inline {
        justify-self: start;
        justify-items: start;
    }
    body.page-expenses .expense-graph-panel__series-row,
body.page-savings .expense-graph-panel__series-row {
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    body.page-expenses .expense-graph-panel__chart-head,
body.page-savings .expense-graph-panel__chart-head {
        flex-wrap: wrap;
    }
    body.page-expenses .expense-graph-panel__currency-mode,
body.page-savings .expense-graph-panel__currency-mode {
        width: 100%;
        min-width: 0;
        max-width: none;
        justify-content: flex-start;
    }
    body.page-expenses .expense-graph-panel__currency-mode select,
body.page-savings .expense-graph-panel__currency-mode select {
        max-width: none;
        flex: 1 1 auto;
    }
    body.page-expenses .expense-graph-panel__mode,
    body.page-expenses .expense-graph-panel__mode select,
body.page-savings .expense-graph-panel__mode select {
        width: 100%;
    }
    body.page-expenses .expense-graph-panel__legend,
body.page-savings .expense-graph-panel__legend {
        margin-left: 0;
        max-width: 100%;
        order: 3;
    }
    body.page-expenses .expense-graph-panel__mode select,
body.page-savings .expense-graph-panel__mode select {
        min-width: 170px;
    }
    body.page-expenses .expense-graph-panel__kpis,
body.page-savings .expense-graph-panel__kpis {
        grid-template-columns: 1fr;
    }
    body.page-expenses .expense-graph-panel__kpi,
body.page-savings .expense-graph-panel__kpi {
        grid-template-columns: 30px minmax(0, 1fr);
        align-items: center;
        border-right: 0;
        border-bottom: 1px solid rgba(148, 163, 184, 0.14);
    }
    body.page-expenses .expense-graph-panel__kpi:last-child,
body.page-savings .expense-graph-panel__kpi:last-child {
        border-bottom: 0;
    }
    body.page-expenses .expense-graph-panel__chart-wrap {
        height: 370px;
    }
    body.page-savings .expense-graph-panel__chart-wrap {
        height: 260px;
    }
    body.page-savings .expense-graph-panel__kpis--savings {
        grid-template-columns: 1fr;
    }
    body.page-savings .savings-graph-footer {
        grid-template-columns: 1fr;
    }
}

body.page-expenses .expense-account-hero-impact-row,
body.page-budgets .expense-account-hero-impact-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 16px 24px;
    max-width: 1220px;
    margin: 0 auto;
    padding: 0 0 8px;
}
body.page-expenses .gastos-hero-card {
    width: 100%;
    min-width: 0;
    height: 145px;
    box-sizing: border-box;
    border-radius: 16px;
    background: linear-gradient(165deg, rgba(18, 48, 32, 0.72) 0%, rgba(10, 28, 18, 0.88) 100%);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
    padding: 10px 12px;
}
body.page-expenses .gastos-hero-card--unified {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
}
body.page-expenses .gastos-hero-unified__left {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
body.page-expenses .gastos-hero-unified__right {
    flex: 0 0 auto;
    max-width: 100%;
    box-sizing: border-box;
    padding: 6px 8px 6px 12px;
    margin-left: 10px;
    border-left: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.22);
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-self: stretch;
}
body.page-expenses .gastos-hero-unified__right .expense-fx-impact {
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
body.page-expenses .gastos-hero-card .expense-account-hero-totals--amounts-only {
    padding: 6px 4px 8px;
    margin-top: 0;
}
body.page-expenses .gastos-hero-card .expense-account-hero-totals--amounts-only .expense-account-totals-line {
    gap: 6px;
    min-height: 0;
}
body.page-expenses .gastos-hero-card .expense-account-hero-totals--amounts-only .expense-account-totals-line__seg--stack {
    max-width: min(100%, 640px);
}
body.page-expenses .gastos-hero-card .expense-fx-impact__title {
    margin: 0 0 4px;
    font-size: 0.95rem;
}
body.page-expenses .gastos-hero-card .expense-fx-impact__amount {
    margin: 0 0 4px;
    font-size: clamp(1.15rem, 2.8vw, 1.5rem);
    letter-spacing: -0.03em;
}
body.page-expenses .gastos-hero-card .expense-fx-impact__mode {
    margin: 0 0 4px;
}
body.page-expenses .gastos-hero-card .expense-fx-impact__foot {
    margin: 4px 0 0;
}
body.page-expenses .expense-account-hero-impact-row .expense-account-hero-totals,
body.page-budgets .expense-account-hero-impact-row .expense-account-hero-totals {
    flex: 1 1 280px;
    margin: 0;
}
body.page-expenses .expense-fx-impact,
body.page-budgets .expense-fx-impact {
    flex: 1 1 260px;
    max-width: min(100%, 420px);
    box-sizing: border-box;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(163, 230, 53, 0.28);
    background: linear-gradient(165deg, rgba(22, 60, 36, 0.55) 0%, rgba(12, 28, 18, 0.72) 100%);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
}
body.page-expenses .expense-fx-impact__main,
body.page-budgets .expense-fx-impact__main {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px 14px;
}
body.page-expenses .expense-fx-impact__col--meta,
body.page-budgets .expense-fx-impact__col--meta {
    flex: 1 1 0;
    min-width: 0;
}
body.page-expenses .expense-fx-impact__col--amount,
body.page-budgets .expense-fx-impact__col--amount {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    padding-left: 4px;
}
body.page-expenses .expense-fx-impact__col--amount .expense-fx-impact__title,
body.page-budgets .expense-fx-impact__col--amount .expense-fx-impact__title {
    margin: 0 0 2px;
}
body.page-expenses .expense-fx-impact__col--amount .expense-fx-impact__amount,
body.page-budgets .expense-fx-impact__col--amount .expense-fx-impact__amount {
    margin: 0;
}
body.page-expenses .expense-fx-impact__col--amount .expense-fx-impact__warn,
body.page-budgets .expense-fx-impact__col--amount .expense-fx-impact__warn {
    text-align: right;
}
body.page-budgets .expense-fx-impact__title {
    margin: 0 0 4px;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #ecfccb;
}
body.page-expenses .expense-fx-impact__title {
    margin: 0 0 6px;
    font-size: clamp(1.12rem, 2.9vw, 1.42rem);
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #ecfccb;
}
body.page-expenses .expense-fx-impact__mode,
body.page-budgets .expense-fx-impact__mode {
    margin: 0 0 6px;
    font-size: 0.72rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.62);
}
body.page-expenses .expense-fx-impact__prov,
body.page-budgets .expense-fx-impact__prov {
    font-weight: 500;
    color: rgba(255, 255, 255, 0.45);
}
body.page-budgets .expense-fx-impact__amount {
    margin: 0 0 6px;
    font-size: clamp(1.15rem, 2.8vw, 1.5rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    color: #d9f99d;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}
body.page-expenses .expense-fx-impact__amount {
    margin: 0 0 6px;
    font-size: clamp(1.52rem, 4.6vw, 2.28rem);
    font-weight: 900;
    letter-spacing: -0.035em;
    line-height: 1.05;
    color: #d9f99d;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}
body.page-expenses .expense-fx-impact__hint,
body.page-expenses .expense-fx-impact__warn,
body.page-budgets .expense-fx-impact__hint,
body.page-budgets .expense-fx-impact__warn {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.4;
    color: rgba(254, 215, 170, 0.95);
}
body.page-expenses .expense-fx-impact__ctx,
body.page-budgets .expense-fx-impact__ctx {
    margin-top: 0;
}
body.page-expenses .expense-fx-impact__col--meta .expense-account-totals-ctx,
body.page-budgets .expense-fx-impact__col--meta .expense-account-totals-ctx {
    text-align: left;
}
body.page-expenses .expense-fx-impact__col--meta .expense-account-totals-ctx__line,
body.page-budgets .expense-fx-impact__col--meta .expense-account-totals-ctx__line {
    justify-content: flex-start;
    flex-wrap: nowrap;
    align-items: center;
}
body.page-expenses .expense-fx-tc-list,
body.page-budgets .expense-fx-tc-list {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    font-size: 0.72rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.78);
}
body.page-expenses .expense-fx-tc-list__item,
body.page-budgets .expense-fx-tc-list__item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}
body.page-expenses .expense-fx-tc-list__src,
body.page-budgets .expense-fx-tc-list__src {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.45);
}
body.page-expenses .expense-fx-impact__foot,
body.page-budgets .expense-fx-impact__foot {
    margin: 6px 0 0;
    font-size: 0.72rem;
}
body.page-expenses .expense-fx-impact__link,
body.page-budgets .expense-fx-impact__link {
    color: rgba(190, 242, 100, 0.95);
    font-weight: 600;
    text-decoration: underline;
}

.month-nav-hero-dialog {
    max-width: calc(100vw - 24px);
    width: min(920px, 100%);
    padding: 0;
    border: none;
    border-radius: 16px;
    background: transparent;
    box-shadow: none;
}
.month-nav-hero-dialog::backdrop {
    background: rgba(15, 41, 24, 0.45);
    backdrop-filter: blur(2px);
}
.month-nav-hero-dialog__panel {
    background: #fffef7;
    border-radius: 16px;
    border: 1px solid rgba(163, 230, 53, 0.45);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28);
    overflow: hidden;
}
.month-nav-hero-dialog__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    background: linear-gradient(180deg, #1a5f38 0%, #0e3d23 100%);
    border-bottom: 1px solid var(--rm-month-divider);
}
.month-nav-hero-dialog__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    color: var(--rm-month-label);
}
.month-nav-hero-dialog__close {
    border: 0;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.month-nav-hero-dialog__close:hover {
    background: rgba(255, 255, 255, 0.2);
}
.month-nav-hero-dialog__body {
    padding: 14px 12px 16px;
    background: linear-gradient(180deg, #f0fdf4 0%, #fffef7 100%);
}
.month-nav-hero-dialog .expense-account-month-strip {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    min-width: 0;
    min-height: 40px;
    border-radius: 999px;
    border: 2px solid var(--rm-month-rail-outline);
    background: linear-gradient(180deg, #1a5f38 0%, #0e3d23 52%, #082818 100%);
    box-shadow:
        0 0 0 1px rgba(12, 46, 28, 0.62),
        inset 0 1px 0 0 var(--rm-month-rail-inset-glow),
        inset 0 -1px 0 0 var(--rm-month-rail-inset-glow),
        0 4px 16px rgba(0, 0, 0, 0.24);
    overflow: hidden;
}
.month-nav-hero-dialog .expense-account-month-strip__year.month-year-header {
    flex: 0 0 auto;
    width: min(118px, 20vw);
    min-width: 84px;
    margin-bottom: 0;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px 0 12px;
    font-size: 15px;
    font-weight: 800;
    color: var(--rm-month-label);
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.12) 0%, transparent 100%);
    border-right: 1px solid var(--rm-month-divider);
}
.month-nav-hero-dialog .expense-account-month-strip__year .year-arrow {
    color: var(--rm-month-label-muted);
    font-weight: 700;
    opacity: 0.92;
}
.month-nav-hero-dialog .expense-account-month-strip__year .year-arrow:hover {
    color: #fff;
    opacity: 1;
}
.month-nav-hero-dialog .expense-account-month-strip__year strong {
    color: var(--rm-month-label);
    font-weight: 800;
    letter-spacing: 0.04em;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
}
.month-nav-hero-dialog .expense-account-month-strip__today.month-nav-today-btn {
    flex: 0 0 auto;
    width: min(52px, 12vw);
    min-width: 44px;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0 6px;
    font-size: 18px;
    line-height: 1;
    color: var(--rm-month-label);
    background: linear-gradient(270deg, rgba(0, 0, 0, 0.12) 0%, transparent 100%);
    border-left: 1px solid var(--rm-month-divider);
    border-radius: 0 6px 6px 0;
    text-decoration: none;
    box-sizing: border-box;
    transition: background 0.15s ease, color 0.15s ease;
}
.month-nav-hero-dialog .expense-account-month-strip__today.month-nav-today-btn:hover {
    background: rgba(217, 249, 157, 0.12);
    color: #fffbeb;
}
.month-nav-hero-dialog .expense-account-month-strip__today.month-nav-today-btn:focus-visible {
    outline: 2px solid rgba(217, 249, 157, 0.65);
    outline-offset: 2px;
}
.month-nav-hero-dialog .month-grid.month-grid--expense-hero {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: minmax(0, auto);
    align-items: stretch;
    border: none;
    border-radius: 0;
    background: transparent;
    overflow: visible;
}
.month-nav-hero-dialog .month-grid.month-grid--expense-hero > a {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 100%;
    min-height: 40px;
    padding: 0 1px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1;
    color: var(--rm-month-label);
    background: transparent;
    border-bottom: none;
    border-right: 1px solid var(--rm-month-divider);
    text-decoration: none;
}
.month-nav-hero-dialog .month-grid.month-grid--expense-hero > a:hover {
    background: rgba(217, 249, 157, 0.12);
    color: #fffbeb;
}
.month-nav-hero-dialog .month-grid.month-grid--expense-hero > a:nth-child(4n) {
    border-right: 1px solid var(--rm-month-divider);
}
.month-nav-hero-dialog .month-grid.month-grid--expense-hero > a:nth-last-child(-n+4) {
    border-bottom: none;
}
.month-nav-hero-dialog .month-grid.month-grid--expense-hero > a:nth-child(12n) {
    border-right: none;
}
.month-nav-hero-dialog .month-grid.month-grid--expense-hero > a.active {
    background: var(--rm-month-active-cell);
    color: var(--rm-month-active-text);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
    border-right-color: rgba(15, 41, 24, 0.12);
}
.month-nav-hero-dialog .month-grid.month-grid--expense-hero > a.active:hover {
    color: #052e16;
    filter: brightness(1.03);
}
.month-nav-hero-dialog .month-grid.month-grid--expense-hero > a.month-nav-today:not(.active) {
    background: rgba(217, 249, 157, 0.1);
    color: #fffbeb;
    box-shadow: inset 0 -2px 0 0 rgba(190, 242, 100, 0.75);
}
.month-nav-hero-dialog .month-grid.month-grid--expense-hero > a.month-nav-today:not(.active):hover {
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
}
.month-nav-hero-dialog .month-grid.month-grid--expense-hero > a.month-grid-month-btn.month-grid-month-btn--no-data {
    opacity: 0.34;
    cursor: pointer;
    filter: grayscale(0.5);
    color: rgba(254, 252, 232, 0.55);
    background: rgba(15, 41, 24, 0.25);
    box-shadow: none;
}
.month-nav-hero-dialog .month-grid.month-grid--expense-hero > a.month-grid-month-btn.month-grid-month-btn--no-data:hover:not(.active) {
    opacity: 0.46;
    filter: grayscale(0.42);
    color: rgba(254, 252, 232, 0.68);
    background: rgba(15, 41, 24, 0.35);
}

body.page-budgets .expense-account-hero-totals .btn.expense-account-add-cat-btn.expense-account-hero-totals__btn {
    flex-shrink: 0;
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 156px !important;
    min-height: 34px !important;
    height: 34px;
    padding: 0 12px !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
}
@media (max-width: 720px) {
    body.page-budgets .expense-account-hero-head {
        flex-direction: column;
        align-items: stretch;
    }
    body.page-budgets .expense-account-hero-head__text {
        margin-left: 0;
        max-width: none;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    body.page-budgets .expense-account-hero-head__text .module-share-tabs--hero {
        justify-content: flex-start;
    }
    body.page-budgets .expense-account-month-strip,
    body.page-expenses .expense-account-month-strip,
    body.page-income .expense-account-month-strip,
    body.page-savings .expense-account-month-strip,
    body.page-investments .expense-account-month-strip {
        flex-direction: column;
        border-radius: 18px;
        min-height: 0;
    }
    body.page-budgets .expense-account-month-strip__year.month-year-header,
    body.page-expenses .expense-account-month-strip__year.month-year-header,
    body.page-income .expense-account-month-strip__year.month-year-header,
    body.page-savings .expense-account-month-strip__year.month-year-header,
    body.page-investments .expense-account-month-strip__year.month-year-header {
        width: 100%;
        min-width: 0;
        border-right: none;
        border-bottom: 1px solid var(--rm-month-divider);
        padding: 8px 14px;
    }
    body.page-budgets .expense-account-month-strip__today.month-nav-today-btn,
    body.page-expenses .expense-account-month-strip__today.month-nav-today-btn,
    body.page-income .expense-account-month-strip__today.month-nav-today-btn,
    body.page-savings .expense-account-month-strip__today.month-nav-today-btn,
    body.page-investments .expense-account-month-strip__today.month-nav-today-btn {
        width: 100%;
        min-width: 0;
        border-left: none;
        border-top: 1px solid var(--rm-month-divider);
        border-radius: 0 0 10px 10px;
        padding: 10px 14px;
        min-height: 40px;
    }
    body.page-budgets .expense-account-hero-month .month-grid.month-grid--expense-hero,
    body.page-expenses .expense-account-hero-month .month-grid.month-grid--expense-hero,
    body.page-income .expense-account-hero-month .month-grid.month-grid--expense-hero,
    body.page-savings .expense-account-hero-month .month-grid.month-grid--expense-hero,
    body.page-investments .expense-account-hero-month .month-grid.month-grid--expense-hero {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-template-rows: repeat(3, minmax(0, auto));
    }
    body.page-budgets .expense-account-hero-month .month-grid.month-grid--expense-hero > a,
    body.page-expenses .expense-account-hero-month .month-grid.month-grid--expense-hero > a,
    body.page-income .expense-account-hero-month .month-grid.month-grid--expense-hero > a,
    body.page-savings .expense-account-hero-month .month-grid.month-grid--expense-hero > a,
    body.page-investments .expense-account-hero-month .month-grid.month-grid--expense-hero > a {
        display: flex;
        align-items: center;
        justify-content: center;
        height: auto;
        min-height: 36px;
        padding: 4px 2px;
        font-size: 13px;
        line-height: 1;
        border-bottom: 1px solid rgba(163, 230, 53, 0.32);
        border-right: 1px solid rgba(163, 230, 53, 0.32);
    }
    body.page-expenses .expense-account-hero-month .month-grid.month-grid--expense-hero > button.month-grid-month-btn,
    body.page-income .expense-account-hero-month .month-grid.month-grid--expense-hero > button.month-grid-month-btn,
    body.page-budgets .expense-account-hero-month .month-grid.month-grid--expense-hero > button.month-grid-month-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        height: auto;
        min-height: 36px;
        padding: 4px 2px;
        font-size: 13px;
        line-height: 1;
        border-bottom: 1px solid rgba(163, 230, 53, 0.32);
        border-right: 1px solid rgba(163, 230, 53, 0.32);
    }
    body.page-budgets .expense-account-hero-month .month-grid.month-grid--expense-hero > a:nth-child(4n),
    body.page-expenses .expense-account-hero-month .month-grid.month-grid--expense-hero > a:nth-child(4n),
    body.page-income .expense-account-hero-month .month-grid.month-grid--expense-hero > a:nth-child(4n),
    body.page-savings .expense-account-hero-month .month-grid.month-grid--expense-hero > a:nth-child(4n),
    body.page-investments .expense-account-hero-month .month-grid.month-grid--expense-hero > a:nth-child(4n) {
        border-right: 0;
    }
    body.page-expenses .expense-account-hero-month .month-grid.month-grid--expense-hero > button.month-grid-month-btn:nth-child(4n),
    body.page-income .expense-account-hero-month .month-grid.month-grid--expense-hero > button.month-grid-month-btn:nth-child(4n),
    body.page-budgets .expense-account-hero-month .month-grid.month-grid--expense-hero > button.month-grid-month-btn:nth-child(4n) {
        border-right: 0;
    }
    body.page-budgets .expense-account-hero-month .month-grid.month-grid--expense-hero > a:nth-last-child(-n+4),
    body.page-expenses .expense-account-hero-month .month-grid.month-grid--expense-hero > a:nth-last-child(-n+4),
    body.page-income .expense-account-hero-month .month-grid.month-grid--expense-hero > a:nth-last-child(-n+4),
    body.page-savings .expense-account-hero-month .month-grid.month-grid--expense-hero > a:nth-last-child(-n+4),
    body.page-investments .expense-account-hero-month .month-grid.month-grid--expense-hero > a:nth-last-child(-n+4) {
        border-bottom: 0;
    }
    body.page-expenses .expense-account-hero-month .month-grid.month-grid--expense-hero > button.month-grid-month-btn:nth-last-child(-n+4),
    body.page-income .expense-account-hero-month .month-grid.month-grid--expense-hero > button.month-grid-month-btn:nth-last-child(-n+4),
    body.page-budgets .expense-account-hero-month .month-grid.month-grid--expense-hero > button.month-grid-month-btn:nth-last-child(-n+4) {
        border-bottom: 0;
    }
    body.page-budgets .expense-account-hero-month .month-panel,
    body.page-expenses .expense-account-hero-month .month-panel,
    body.page-income .expense-account-hero-month .month-panel,
    body.page-savings .expense-account-hero-month .month-panel,
    body.page-investments .expense-account-hero-month .month-panel {
        min-height: 0;
        height: auto;
    }
    body.page-budgets .expense-account-hero-totals {
        flex-direction: column;
        align-items: stretch;
    }
    body.page-budgets .expense-account-totals-line {
        font-size: 0.85rem;
        min-height: 0;
    }
    body.page-budgets .expense-account-hero-totals .btn.expense-account-add-cat-btn.expense-account-hero-totals__btn {
        align-self: center;
        width: 100%;
        max-width: 320px;
        height: auto;
        min-height: 40px !important;
        padding: 8px 12px !important;
    }
    body.page-expenses .expense-account-hero-head,
    body.page-income .expense-account-hero-head,
    body.page-savings .expense-account-hero-head,
    body.page-investments .expense-account-hero-head {
        flex-direction: column;
        align-items: stretch;
    }

    body.page-expenses .expense-account-hero-toolbar,
    body.page-budgets .expense-account-hero-toolbar,
    body.page-savings .expense-account-hero-toolbar {
        grid-template-columns: 1fr;
        grid-template-areas:
            "gasto-tb-left"
            "gasto-tb-center"
            "gasto-tb-right";
        row-gap: 10px;
        column-gap: 0;
    }
    body.page-expenses .expense-account-hero-toolbar__left,
    body.page-budgets .expense-account-hero-toolbar__left,
    body.page-savings .expense-account-hero-toolbar__left {
        grid-area: gasto-tb-left;
        width: 100%;
    }
    body.page-expenses .expense-account-hero-toolbar__right,
    body.page-budgets .expense-account-hero-toolbar__right:not(.expense-account-hero-toolbar__right--spacer),
    body.page-savings .expense-account-hero-toolbar__right {
        grid-area: gasto-tb-right;
        justify-self: stretch;
        width: 100%;
        display: flex;
        flex-wrap: nowrap;
        justify-content: stretch;
        gap: 10px;
    }
    body.page-expenses .expense-account-hero-toolbar__right .expense-view-switch-btn,
    body.page-budgets .expense-account-hero-toolbar__right .expense-view-switch-btn,
    body.page-savings .expense-account-hero-toolbar__right .expense-view-switch-btn {
        flex: 1 1 0;
        min-width: 0;
        width: auto;
    }
    body.page-budgets .expense-account-hero-toolbar__center {
        grid-area: gasto-tb-center;
        justify-self: stretch;
        width: 100%;
        display: flex;
        justify-content: stretch;
    }
    body.page-expenses .expense-account-hero-toolbar__center,
    body.page-savings .expense-account-hero-toolbar__center {
        display: none;
    }
    body.page-expenses .expense-account-hero-toolbar__right--spacer,
    body.page-budgets .expense-account-hero-toolbar__right--spacer {
        display: none;
    }
    body.page-expenses .expense-account-hero-impact-row,
    body.page-budgets .expense-account-hero-impact-row {
        flex-direction: column;
        align-items: stretch;
    }
    body.page-expenses .expense-account-hero-impact-row .expense-account-hero-totals,
    body.page-budgets .expense-account-hero-impact-row .expense-account-hero-totals {
        flex: 0 1 auto;
    }
    body.page-expenses .expense-account-hero-toolbar,
    body.page-expenses .expense-account-hero-toolbar__tabs,
    body.page-expenses .expense-account-hero-impact-row,
    body.page-expenses .expense-view-switch-row,
    body.page-income .expense-account-hero-toolbar__tabs,
    body.page-budgets .expense-account-hero-toolbar,
    body.page-budgets .expense-account-hero-toolbar__tabs,
    body.page-budgets .expense-account-hero-impact-row,
    body.page-budgets .expense-account-presup-hero-strip,
    body.page-budgets .expense-view-switch-row,
    body.page-savings .expense-account-hero-toolbar,
    body.page-savings .expense-account-hero-toolbar__tabs,
    body.page-savings .expense-view-switch-row,
    body.page-investments .expense-account-hero-toolbar__tabs {
        padding-left: 10px;
        padding-right: 10px;
        box-sizing: border-box;
    }
    body.page-savings .expense-account-page-hero .savings-kpi-strip {
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
        max-width: none;
        width: 100%;
    }
    body.page-savings .savings-kpi-strip__inner {
        height: auto;
        min-height: 0;
        padding: 12px 14px;
    }
    body.page-savings .savings-kpi-cell {
        align-items: center;
        text-align: center;
    }
    body.page-savings .savings-kpi-cell__value-row {
        justify-content: center;
    }
    body.page-savings .savings-kpi-cell--currency-breakdown .presup-hero-breakdown__title {
        text-align: center;
    }
    body.page-savings .savings-kpi-cell--currency-breakdown .presup-hero-breakdown__item {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        gap: 4px;
    }
    body.page-savings .savings-kpi-cell--currency-breakdown .presup-hero-breakdown__codecell {
        justify-content: center;
    }
    body.page-savings .savings-kpi-strip__inner .savings-kpi-strip__conv-footer {
        text-align: center;
    }
    body.page-expenses .gastos-hero-card--unified {
        flex-direction: column;
    }
    body.page-expenses .gastos-hero-card {
        height: auto;
        padding: 12px 14px;
    }
    body.page-expenses .gastos-hero-unified__right {
        width: 100%;
        margin-left: 0;
        margin-top: 10px;
        padding: 12px 0 4px;
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 0;
        background: transparent;
        align-self: stretch;
    }
    body.page-expenses .gastos-hero-card .expense-account-hero-totals--amounts-only {
        padding: 4px 0 10px;
    }
    body.page-expenses .gastos-hero-card .expense-account-hero-totals--amounts-only .expense-account-totals-line {
        gap: 14px;
    }
    body.page-expenses .expense-fx-impact,
    body.page-budgets .expense-fx-impact {
        max-width: none;
    }
    body.page-expenses .expense-fx-impact__main,
    body.page-budgets .expense-fx-impact__main {
        flex-direction: column;
        align-items: stretch;
    }
    body.page-expenses .expense-fx-impact__col--amount,
    body.page-budgets .expense-fx-impact__col--amount {
        order: -1;
        align-items: center;
        text-align: center;
        padding-left: 0;
    }
    body.page-expenses .expense-fx-impact__col--amount .expense-fx-impact__warn,
    body.page-budgets .expense-fx-impact__col--amount .expense-fx-impact__warn {
        text-align: center;
    }
    body.page-budgets .expense-fx-impact__col--meta .expense-account-totals-ctx,
    body.page-budgets .expense-fx-impact__col--meta .expense-account-totals-ctx__line {
        justify-content: center;
        text-align: center;
        flex-wrap: wrap;
    }
    body.page-budgets .expense-fx-impact__foot,
    body.page-budgets .expense-fx-tc-list {
        text-align: center;
    }
    body.page-expenses .expense-account-hero-totals--amounts-only .expense-account-totals-line__seg--stack,
    body.page-budgets .expense-account-hero-totals--amounts-only .expense-account-totals-line__seg--stack {
        display: grid;
        grid-template-columns: minmax(160px, 210px) minmax(200px, 1fr);
        column-gap: 8px;
        align-items: center;
        max-width: 100%;
        width: 100%;
    }

    body.page-expenses .expense-account-hero-totals--amounts-only .expense-account-totals-line__seg--stack {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
    }
    body.page-expenses
        .expense-account-hero-totals--amounts-only
        .expense-account-totals-line__seg--stack
        .expense-account-totals-line__amount-wrap,
    body.page-expenses
        .expense-account-hero-totals--amounts-only
        .expense-account-totals-line__seg--stack
        .expense-account-totals-line__val {
        justify-content: center;
        justify-self: center;
        text-align: center;
        width: auto;
    }
    body.page-expenses
        .expense-account-hero-totals--amounts-only
        .expense-account-totals-line__seg--stack
        .expense-account-totals-ctx,
    body.page-expenses
        .expense-account-hero-totals--amounts-only
        .expense-account-totals-line__seg--stack
        .expense-account-totals-ctx__line {
        justify-content: center;
        text-align: center;
        flex-wrap: wrap;
    }
    body.page-expenses
        .expense-account-hero-totals--amounts-only
        .expense-account-totals-line__seg--stack
        .expense-account-totals-ctx__line
        > span:last-child {
        white-space: normal;
        overflow-wrap: anywhere;
    }
    body.page-expenses .expense-fx-impact__col--amount {
        align-items: center;
        text-align: center;
    }
    body.page-expenses .expense-fx-impact__col--amount .expense-fx-impact__warn {
        text-align: center;
    }
    body.page-expenses .expense-fx-impact__col--meta .expense-account-totals-ctx,
    body.page-expenses .expense-fx-impact__col--meta .expense-account-totals-ctx__line {
        justify-content: center;
        text-align: center;
        flex-wrap: wrap;
    }
    body.page-expenses .expense-fx-impact__foot,
    body.page-expenses .expense-fx-tc-list {
        text-align: center;
    }
    body.page-budgets .expense-account-presup-hero-strip {
        flex-direction: column;
        align-items: stretch;
        margin-top: 0;
    }
    body.page-budgets .presup-hero-card--unified {
        flex-direction: column;
        height: auto;
        margin-top: 0;
    }
    body.page-budgets .presup-hero-card {
        padding: 12px 14px;
    }
    body.page-budgets .presup-hero-unified__right {
        width: 100%;
        margin-left: 0;
        margin-top: 10px;
        padding: 12px 0 4px;
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 0;
        background: transparent;
        align-self: stretch;
    }
    body.page-budgets .presup-hero-totals-grid {
        grid-template-columns: 1fr;
        gap: 16px 0;
    }
    body.page-budgets .presup-hero-total-cell {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
        padding-bottom: 14px;
        align-items: center;
        text-align: center;
    }
    body.page-budgets .presup-hero-total-cell__row {
        justify-content: center;
    }
    body.page-budgets .presup-hero-totals__actions {
        align-items: center;
        max-width: none;
    }
    body.page-budgets .presup-hero-breakdown__title {
        text-align: center;
    }
    body.page-budgets .presup-hero-breakdown__item {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        gap: 4px;
    }
    body.page-budgets .presup-hero-breakdown__codecell {
        justify-content: center;
    }
    body.page-budgets .presup-hero-total-cell__conv-footer,
    body.page-budgets .presup-hero-conv-warn {
        text-align: center;
    }
    body.page-budgets .presup-hero-total-cell:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }
    body.page-budgets
        .expense-account-hero-totals--amounts-only
        .expense-account-totals-line__seg--stack
        .expense-account-totals-line__amount-wrap,
    body.page-budgets
        .expense-account-hero-totals--amounts-only
        .expense-account-totals-line__seg--stack
        .expense-account-totals-line__val {
        justify-self: start;
        text-align: right;
    }
    body.page-budgets
        .expense-account-hero-totals--amounts-only
        .expense-account-totals-line__seg--stack
        .expense-account-totals-ctx {
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;
        max-width: 100%;
        text-align: left;
    }
    body.page-budgets
        .expense-account-hero-totals--amounts-only
        .expense-account-totals-line__seg--stack
        .expense-account-totals-ctx__line {
        justify-content: flex-start;
        flex-wrap: nowrap;
        align-items: center;
    }
    body.page-budgets
        .expense-account-hero-totals--amounts-only
        .expense-account-totals-line__seg--stack
        .expense-account-totals-ctx__line
        > span:last-child {
        white-space: nowrap;
        overflow-wrap: normal;
    }
    body.page-expenses .expense-account-month-dropdown__panel,
    body.page-budgets .expense-account-month-dropdown__panel {
        left: 0;
        right: 0;
        transform: none;
        width: 100%;
        max-width: none;
    }
    body.page-expenses .expense-account-hero-toolbar .btn.gastos-add-btn.expense-account-hero-toolbar__add-btn,
    body.page-budgets .expense-account-hero-toolbar .btn.gastos-add-btn.expense-account-hero-toolbar__add-btn,
    body.page-investments .expense-account-hero-toolbar__right .btn.gastos-add-btn.expense-account-hero-toolbar__add-btn {
        width: auto;
        max-width: 100%;
    }
    body.page-expenses .topbar--hero ~ main.container,
    body.page-budgets .topbar--hero ~ main.container,
    body.page-income .topbar--hero ~ main.container,
    body.page-savings .topbar--hero ~ main.container,
    body.page-investments .topbar--hero ~ main.container {
        padding-left: 12px;
        padding-right: 12px;
    }
    body.page-expenses .expense-account-hero-head__text,
    body.page-budgets .expense-account-hero-head__text,
    body.page-income .expense-account-hero-head__text,
    body.page-savings .expense-account-hero-head__text,
    body.page-investments .expense-account-hero-head__text {
        margin-left: 0;
        max-width: none;
        align-items: flex-start;
    }
    .module-share-tabs--hero {
        width: 100%;
        justify-content: flex-start;
    }
    .module-share-tabs--hero .module-share-tabs__link {
        min-height: 26px;
        width: auto;
        flex: 1 1 0;
    }
    body.page-expenses .expense-account-hero-totals,
    body.page-income .expense-account-hero-totals,
    body.page-savings .expense-account-hero-totals,
    body.page-investments .expense-account-hero-totals {
        flex-direction: column;
        align-items: stretch;
    }
    body.page-expenses .expense-account-hero-totals--amounts-only .expense-account-totals-line {
        font-size: 1rem;
    }
    body.page-expenses .expense-account-hero-totals--amounts-only .expense-account-totals-line__val {
        font-size: clamp(1.22rem, 5.2vw, 1.72rem);
    }
    body.page-expenses .expense-account-hero-totals--amounts-only .expense-account-totals-line__seg {
        align-items: center;
        text-align: center;
    }
    body.page-expenses .expense-account-hero-totals--amounts-only .expense-account-totals-line__seg--stack {
        max-width: 100%;
    }
    body.page-expenses .expense-account-totals-line,
    body.page-income .expense-account-totals-line,
    body.page-savings .expense-account-totals-line,
    body.page-investments .expense-account-totals-line {
        font-size: 0.85rem;
        min-height: 0;
    }
    body.page-expenses .expense-account-hero-totals .btn.expense-account-hero-totals__btn,
    body.page-income .expense-account-hero-totals .btn.expense-account-hero-totals__btn,
    body.page-savings .expense-account-hero-totals .btn.expense-account-hero-totals__btn,
    body.page-investments .expense-account-hero-totals .btn.expense-account-hero-totals__btn {
        align-self: center;
        width: 100%;
        max-width: 320px;
        height: auto;
        min-height: 40px !important;
        padding: 8px 12px !important;
    }
}

.page-wealth-guide .guia-panel,
.page-info .guia-panel {
    background: #1a1a1f !important;
    border-color: var(--rm-border) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4) !important;
}
.page-wealth-guide .guia-hero,
.page-info .guia-hero {
    background: linear-gradient(180deg, #1f2a22 0%, #1a1a1f 55%, #161618 100%) !important;
}
.page-wealth-guide .guia-intro,
.page-info .guia-intro {
    color: #d4d4d8 !important;
}
.page-wealth-guide .guia-content-grid {
    background: #161618 !important;
}
.page-wealth-guide .guia-progress-card,
.page-wealth-guide .guia-level {
    background: #1e1e24 !important;
    border-color: var(--rm-border) !important;
}
.topbar--hero ~ main.container:has(> section.subnav) > section.panel {
    background: #1a1a1f !important;
}
body.page-dashboard .dashboard-welcome,
body.page-dashboard .panel {
    border-color: var(--rm-border) !important;
}
.config-table thead th {
    background: #25252c !important;
    color: var(--rm-text-muted) !important;
}

.page-wealth-guide .guia-panel {
    border: 1px solid rgba(74, 222, 128, 0.22) !important;
    border-radius: 12px !important;
    background: linear-gradient(180deg, #0a1014 0%, #070d11 100%) !important;
    box-shadow: 0 18px 34px rgba(2, 8, 23, 0.48) !important;
}
.page-wealth-guide .guia-hero {
    border-bottom: 1px solid rgba(74, 222, 128, 0.14) !important;
    background: linear-gradient(135deg, rgba(13, 67, 53, 0.22) 0%, rgba(10, 20, 44, 0) 60%) !important;
}
.page-wealth-guide .guia-page-title-row h1 {
    color: #56f06f !important;
    text-shadow: 0 0 14px rgba(34, 197, 94, 0.3);
}
.page-wealth-guide .guia-intro {
    color: #f3f4f6 !important;
}
.page-wealth-guide .guia-content-grid {
    background: transparent !important;
    gap: 10px 12px !important;
    padding-top: 10px !important;
}
.page-wealth-guide .guia-progress-card,
.page-wealth-guide .guia-level {
    border: 1px solid rgba(74, 222, 128, 0.17) !important;
    border-radius: 10px !important;
    background: linear-gradient(180deg, rgba(13, 19, 24, 0.96) 0%, rgba(9, 14, 19, 0.98) 100%) !important;
    box-shadow: inset 0 1px 0 rgba(134, 239, 172, 0.04), 0 8px 20px rgba(2, 8, 23, 0.34) !important;
}
.page-wealth-guide .guia-progress-card {
    padding: 12px 12px !important;
}
.page-wealth-guide .guia-progress-card__title,
.page-wealth-guide .guia-level-title {
    color: #58e56f !important;
}
.page-wealth-guide .guia-progress-percentage {
    color: #39e55e !important;
    font-size: clamp(1.25rem, 2vw, 1.75rem) !important;
}
.page-wealth-guide .guia-progress-rocket {
    color: #facc15 !important;
}
.page-wealth-guide .guia-progress-track {
    height: 6px !important;
    background: rgba(148, 163, 184, 0.3) !important;
}
.page-wealth-guide .guia-progress-fill {
    background: linear-gradient(90deg, #2fdc5c 0%, #8be722 100%) !important;
}
.page-wealth-guide .guia-continue-btn {
    border-color: rgba(250, 204, 21, 0.55) !important;
    box-shadow: 0 2px 12px rgba(250, 204, 21, 0.2) !important;
}
.page-wealth-guide .guia-continue-hint {
    color: #9ca3af !important;
}
.page-wealth-guide .guia-motivation-banner {
    background: linear-gradient(180deg, rgba(20, 90, 50, 0.5) 0%, rgba(12, 60, 38, 0.62) 100%) !important;
    border-color: rgba(74, 222, 128, 0.32) !important;
    box-shadow: inset 0 1px 0 rgba(134, 239, 172, 0.05) !important;
}
.page-wealth-guide .guia-motivation-banner__star {
    color: #facc15 !important;
    filter: drop-shadow(0 0 8px rgba(250, 204, 21, 0.4)) !important;
}
.page-wealth-guide .guia-motivation-banner__text p {
    color: #7bf1a8 !important;
}
.page-wealth-guide .guia-motivation-banner__target {
    color: #4ade80 !important;
}
.page-wealth-guide .guia-progress-current {
    border: 1px solid rgba(250, 204, 21, 0.4) !important;
    background: linear-gradient(180deg, rgba(56, 48, 20, 0.8) 0%, rgba(33, 28, 11, 0.9) 100%) !important;
}
.page-wealth-guide .guia-progress-current__label {
    color: #f5d84a !important;
}
.page-wealth-guide .guia-progress-current__value {
    color: #ffd95a !important;
    font-size: 12px !important;
}
.page-wealth-guide .guia-next-levels {
    margin-top: 12px !important;
    border-top-color: rgba(148, 163, 184, 0.28) !important;
}
.page-wealth-guide .guia-next-levels,
.page-wealth-guide .guia-level:not(.guia-level--hidden) {
    scrollbar-color: rgba(134, 239, 172, 0.38) transparent !important;
}
.page-wealth-guide .guia-next-levels::-webkit-scrollbar-thumb,
.page-wealth-guide .guia-level:not(.guia-level--hidden)::-webkit-scrollbar-thumb {
    background-color: rgba(134, 239, 172, 0.26) !important;
}
.page-wealth-guide .guia-next-levels::-webkit-scrollbar-thumb:hover,
.page-wealth-guide .guia-level:not(.guia-level--hidden)::-webkit-scrollbar-thumb:hover {
    background-color: rgba(134, 239, 172, 0.48) !important;
}
.page-wealth-guide .guia-next-levels__title {
    color: #a8b6c8 !important;
    margin-bottom: 8px !important;
}
.page-wealth-guide .guia-next-levels li {
    border: 1px solid rgba(100, 116, 139, 0.33) !important;
    border-radius: 9px !important;
    background: linear-gradient(180deg, rgba(16, 23, 31, 0.9) 0%, rgba(11, 16, 23, 0.94) 100%) !important;
    padding: 8px 8px !important;
}
.page-wealth-guide .guia-level-nav__name {
    color: #cbd5e1 !important;
    font-size: 12px !important;
}
.page-wealth-guide .guia-level-nav__badge,
.page-wealth-guide .guia-level-title-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    border: 0;
    background: transparent;
    color: #86efac;
    box-shadow: none;
}
.page-wealth-guide .guia-level-title-badge {
    margin-right: 6px;
}
.page-wealth-guide .guia-level-nav__badge i,
.page-wealth-guide .guia-level-title-badge i {
    font-size: 18px;
    line-height: 1;
}
.page-wealth-guide .guia-level-title-badge i {
    font-size: 22px;
}
.page-wealth-guide .guia-level-nav__status {
    color: #dbeafe !important;
    background: rgba(30, 41, 59, 0.9) !important;
    border: 1px solid rgba(148, 163, 184, 0.28) !important;
    font-size: 9px !important;
    padding: 3px 7px !important;
}
.page-wealth-guide .guia-next-levels li.guia-level-nav--current {
    border-color: rgba(250, 204, 21, 0.54) !important;
    background: linear-gradient(180deg, rgba(66, 56, 18, 0.72) 0%, rgba(40, 33, 10, 0.9) 100%) !important;
}
.page-wealth-guide .guia-next-levels li.guia-level-nav--current .guia-level-nav__status {
    color: #3f2f00 !important;
    background: #facc15 !important;
    border-color: #fde047 !important;
}
.page-wealth-guide .guia-next-levels li.guia-level-nav--done {
    border-color: rgba(74, 222, 128, 0.5) !important;
    background: linear-gradient(180deg, rgba(15, 65, 42, 0.55) 0%, rgba(10, 38, 27, 0.75) 100%) !important;
}
.page-wealth-guide .guia-next-levels li.guia-level-nav--done .guia-level-nav__status {
    color: #052e16 !important;
    background: #4ade80 !important;
    border-color: #86efac !important;
}
.page-wealth-guide .guia-steps-badge {
    border: 1px solid rgba(74, 222, 128, 0.26) !important;
    border-radius: 8px !important;
    padding: 6px 12px !important;
    background: rgba(12, 23, 18, 0.86) !important;
    color: #86efac !important;
}
.page-wealth-guide .guia-steps-badge__fraction {
    color: #7df59a !important;
}
.page-wealth-guide .guia-level-title {
    font-size: 1.42rem !important;
}
.page-wealth-guide .guia-level-hook {
    color: #f8fafc !important;
    font-style: italic !important;
    font-weight: 700 !important;
}
.page-wealth-guide .guia-item {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto auto !important;
    align-items: center !important;
    column-gap: 8px !important;
    row-gap: 8px !important;
    border: 1px solid rgba(74, 222, 128, 0.14) !important;
    border-radius: 11px !important;
    background: linear-gradient(180deg, rgba(19, 27, 35, 0.92) 0%, rgba(11, 17, 24, 0.96) 100%) !important;
    padding: 10px 13px !important;
    position: relative;
}
.page-wealth-guide .guia-item::after {
    content: none;
}
.page-wealth-guide .guia-item--done {
    border-color: rgba(74, 222, 128, 0.34) !important;
    background: linear-gradient(180deg, rgba(14, 74, 44, 0.45) 0%, rgba(9, 44, 29, 0.62) 100%) !important;
}
.page-wealth-guide .guia-item--current {
    border-color: rgba(250, 204, 21, 0.4) !important;
    background: linear-gradient(180deg, rgba(33, 50, 71, 0.76) 0%, rgba(18, 29, 47, 0.92) 100%) !important;
}
.page-wealth-guide .guia-item--locked {
    border-color: rgba(100, 116, 139, 0.26) !important;
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.5) 0%, rgba(15, 23, 42, 0.58) 100%) !important;
}
.page-wealth-guide .guia-check-row {
    color: #f8fafc !important;
    font-weight: 700 !important;
    padding-right: 0;
}
.page-wealth-guide .guia-check-row input[type="checkbox"] {
    accent-color: #28e35b;
}
.page-wealth-guide .guia-note-trigger {
    margin: 0 !important;
    min-width: 0 !important;
    border-radius: 6px !important;
    font-size: 11px !important;
    padding: 4px 10px !important;
    border: 1px solid rgba(217, 119, 6, 0.35) !important;
    background: linear-gradient(180deg, #fff9dd 0%, #fef3c7 100%) !important;
    color: #9a5a03 !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2) !important;
}
.page-wealth-guide .guia-note-trigger:hover {
    background: linear-gradient(180deg, #fff4bf 0%, #fde68a 100%) !important;
    color: #7c3f00 !important;
}
.page-wealth-guide .guia-item-note {
    margin: 0 !important;
    padding: 10px 12px 10px calc(1.2rem + 12px) !important;
    border-radius: 8px !important;
    border: 1px solid rgba(74, 222, 128, 0.2) !important;
    background: linear-gradient(180deg, rgba(10, 20, 26, 0.95) 0%, rgba(7, 14, 20, 0.98) 100%) !important;
    color: #dbe7f8 !important;
    line-height: 1.55 !important;
    max-height: 220px !important;
    overflow: auto !important;
    padding-right: 10px !important;
}

body.page-settings-categories .subnav,
body.page-settings-currencies .subnav,
body.page-settings-due-dates .subnav,
body.page-settings-date-format .subnav,
body.page-settings-holders .subnav,
body.page-settings-notifications .subnav {
    background: linear-gradient(180deg, rgba(13, 19, 24, 0.95) 0%, rgba(9, 14, 19, 0.98) 100%) !important;
    border: 1px solid rgba(74, 222, 128, 0.18) !important;
    border-radius: 12px 12px 0 0 !important;
    padding: 8px 10px !important;
    gap: 6px !important;
}
body.page-settings-categories .subnav a,
body.page-settings-currencies .subnav a,
body.page-settings-due-dates .subnav a,
body.page-settings-date-format .subnav a,
body.page-settings-holders .subnav a,
body.page-settings-notifications .subnav a {
    border-radius: 9px !important;
    border: 1px solid rgba(148, 163, 184, 0.28) !important;
    background: rgba(15, 23, 42, 0.45) !important;
    color: #e2e8f0 !important;
    font-weight: 700 !important;
}
body.page-settings-categories .subnav a.active,
body.page-settings-currencies .subnav a.active,
body.page-settings-due-dates .subnav a.active,
body.page-settings-date-format .subnav a.active,
body.page-settings-holders .subnav a.active,
body.page-settings-notifications .subnav a.active {
    border-color: rgba(74, 222, 128, 0.65) !important;
    background: linear-gradient(180deg, rgba(13, 55, 39, 0.95) 0%, rgba(9, 33, 24, 0.98) 100%) !important;
    color: #4ade80 !important;
    box-shadow: inset 0 1px 0 rgba(134, 239, 172, 0.18);
}
body.page-settings-categories .subnav + .panel,
body.page-settings-currencies .subnav + .panel,
body.page-settings-due-dates .subnav + .panel,
body.page-settings-date-format .subnav + .panel,
body.page-settings-holders .subnav + .panel,
body.page-settings-notifications .subnav + .panel {
    margin-top: 0 !important;
    border-radius: 0 0 12px 12px !important;
    border: 1px solid rgba(74, 222, 128, 0.2) !important;
    background: linear-gradient(180deg, rgba(12, 18, 23, 0.96) 0%, rgba(8, 13, 18, 0.98) 100%) !important;
    box-shadow: 0 18px 34px rgba(2, 8, 23, 0.48) !important;
}
body.page-settings-categories .panel h1,
body.page-settings-currencies .panel h1,
body.page-settings-due-dates .panel h1,
body.page-settings-date-format .panel h1,
body.page-settings-holders .panel h1,
body.page-settings-notifications .panel h1 {
    color: #56f06f !important;
}

body.page-settings-categories .panel > h1.config-page-title-row,
body.page-settings-currencies .panel > h1.config-page-title-row,
body.page-settings-due-dates .panel > h1.config-page-title-row,
body.page-settings-date-format .panel > h1.config-page-title-row,
body.page-settings-holders .panel > h1.config-page-title-row,
body.page-settings-notifications .panel > h1.config-page-title-row {
    margin: 0 0 14px 0 !important;
    display: inline-flex !important;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 12px;
    font-size: clamp(1.1rem, 2.1vw, 1.42rem);
    font-weight: 800;
    line-height: 1.25;
}
body.page-settings-categories .panel > h1.config-page-title-row .page-screen-info-btn,
body.page-settings-currencies .panel > h1.config-page-title-row .page-screen-info-btn,
body.page-settings-due-dates .panel > h1.config-page-title-row .page-screen-info-btn,
body.page-settings-date-format .panel > h1.config-page-title-row .page-screen-info-btn,
body.page-settings-holders .panel > h1.config-page-title-row .page-screen-info-btn,
body.page-settings-notifications .panel > h1.config-page-title-row .page-screen-info-btn {
    color: rgba(190, 250, 200, 0.92);
}
body.page-settings-categories .panel > h1.config-page-title-row .page-screen-info-btn:hover,
body.page-settings-currencies .panel > h1.config-page-title-row .page-screen-info-btn:hover,
body.page-settings-due-dates .panel > h1.config-page-title-row .page-screen-info-btn:hover,
body.page-settings-date-format .panel > h1.config-page-title-row .page-screen-info-btn:hover,
body.page-settings-holders .panel > h1.config-page-title-row .page-screen-info-btn:hover,
body.page-settings-notifications .panel > h1.config-page-title-row .page-screen-info-btn:hover {
    color: #f8fafc;
    background: rgba(74, 222, 128, 0.14);
}
body.page-settings-categories .panel p,
body.page-settings-currencies .panel p,
body.page-settings-due-dates .panel p,
body.page-settings-date-format .panel p,
body.page-settings-holders .panel p,
body.page-settings-notifications .panel p {
    color: #dbe7f8;
}
body.page-settings-categories .modal-field__label,
body.page-settings-currencies .modal-field__label,
body.page-settings-due-dates .modal-field__label,
body.page-settings-date-format .modal-field__label,
body.page-settings-holders .modal-field__label,
body.page-settings-notifications .modal-field__label {
    color: #9fb0c7 !important;
}
body.page-settings-categories .category-form-input,
body.page-settings-categories .modal-field__select,
body.page-settings-categories .category-icon-combo__btn,
body.page-settings-currencies .modal-field input:not([type="color"]):not([type="checkbox"]),
body.page-settings-currencies .currency-ff-filter,
body.page-settings-currencies .currency-ff-select,
body.page-settings-due-dates .chip,
body.page-settings-date-format #dateFormatPreview,
body.page-settings-date-format #dateFormatCode,
body.page-settings-notifications #paymentDueReminderDays {
    background: rgba(15, 23, 42, 0.56) !important;
    border-color: rgba(74, 222, 128, 0.28) !important;
    color: #f8fafc !important;
}
body.page-settings-currencies .currency-ff-select {
    background: rgba(9, 16, 21, 0.96) !important;
    color: #e2e8f0 !important;
    border-color: rgba(74, 222, 128, 0.28) !important;
}
body.page-settings-currencies .currency-ff-select option {
    background: #0b1622 !important;
    color: #e2e8f0 !important;
}
body.page-settings-currencies .currency-ff-select option:checked,
body.page-settings-currencies .currency-ff-select option:hover {
    background: #14532d !important;
    color: #dcfce7 !important;
}
body.page-settings-currencies #currencyTransferPanel .muted {
    color: #cbd5e1 !important;
}
body.page-settings-categories .table-scroll,
body.page-settings-currencies .table-scroll,
body.page-settings-due-dates .due-boundaries {
    border-radius: 10px !important;
    border: 1px solid rgba(74, 222, 128, 0.18) !important;
    background: rgba(2, 6, 23, 0.22) !important;
}
body.page-settings-categories .config-table,
body.page-settings-currencies .config-table {
    background: transparent !important;
    color: #e2e8f0 !important;
}
body.page-settings-categories .config-table thead th,
body.page-settings-currencies .config-table thead th {
    color: #86efac !important;
    background: rgba(13, 22, 17, 0.9) !important;
    border-bottom-color: rgba(74, 222, 128, 0.28) !important;
}
body.page-settings-categories .config-table tbody td,
body.page-settings-currencies .config-table tbody td {
    border-bottom-color: rgba(51, 65, 85, 0.55) !important;
}
body.page-settings-categories .btn,
body.page-settings-currencies .btn,
body.page-settings-due-dates .btn,
body.page-settings-date-format .btn {
    border-color: rgba(74, 222, 128, 0.65) !important;
    background: linear-gradient(180deg, #22c55e 0%, #15803d 100%) !important;
    color: #052e16 !important;
    font-weight: 800 !important;
}
body.page-settings-categories .btn-modal-secondary,
body.page-settings-currencies .btn-modal-secondary,
body.page-settings-due-dates .btn-modal-secondary,
body.page-settings-date-format .btn-modal-secondary {
    background: rgba(15, 23, 42, 0.58) !important;
    border-color: rgba(148, 163, 184, 0.36) !important;
    color: #dbe7f8 !important;
}
body.page-settings-due-dates .due-color-track {
    border: 1px solid rgba(74, 222, 128, 0.2) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04) !important;
}
body.page-settings-due-dates .due-color-pill {
    background: rgba(15, 23, 42, 0.52) !important;
    border-color: rgba(74, 222, 128, 0.2) !important;
    color: #dbe7f8 !important;
}
body.page-settings-currencies .currency-form-grid,
body.page-settings-currencies #currencyTransferPanel,
body.page-settings-date-format .category-form-grid {
    background: linear-gradient(180deg, rgba(10, 17, 22, 0.95) 0%, rgba(7, 13, 18, 0.98) 100%) !important;
    border: 1px solid rgba(74, 222, 128, 0.2) !important;
    border-radius: 10px !important;
}
body.page-settings-currencies .currency-readonly-input,
body.page-settings-currencies .currency-official-cell,
body.page-settings-date-format .category-form-grid .modal-field {
    background: transparent !important;
}
body.page-settings-categories .category-form-grid {
    background: linear-gradient(180deg, rgba(10, 17, 22, 0.95) 0%, rgba(7, 13, 18, 0.98) 100%) !important;
    border: 1px solid rgba(74, 222, 128, 0.2) !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    grid-template-areas:
        "name name type type priority priority"
        "icon icon color color actions actions" !important;
    gap: 10px 10px !important;
    align-items: end !important;
}
body.page-settings-categories .category-form-field--name { grid-area: name; }
body.page-settings-categories .category-form-field--type { grid-area: type; }
body.page-settings-categories .category-form-field--priority { grid-area: priority; }
body.page-settings-categories .category-form-field--icon { grid-area: icon; }
body.page-settings-categories .category-form-field--color { grid-area: color; }
body.page-settings-categories .category-form-field--actions {
    grid-area: actions;
    align-self: end;
}
body.page-settings-categories .category-form-field--actions .category-form-btns-row {
    justify-content: flex-end;
}
body.page-settings-categories .category-form-field--actions .category-form-btns-label {
    display: none;
}
body.page-settings-date-format .category-form-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: end !important;
    gap: 10px !important;
}
body.page-settings-date-format .category-form-grid .category-form-btns {
    grid-column: auto !important;
    margin: 0 !important;
}
body.page-settings-date-format .category-form-grid .category-form-btns-label {
    display: none !important;
}
body.page-settings-date-format #dateFormatCode,
body.page-settings-date-format #dateFormatPreview,
body.page-settings-date-format #saveDateFormatBtn {
    min-height: 40px;
    height: 40px;
}
body.page-settings-date-format #saveDateFormatBtn {
    width: 50% !important;
    max-width: 50% !important;
    min-width: 0 !important;
    margin-left: auto;
    display: block;
    flex: 0 0 50%;
}
body.page-settings-date-format .category-form-btns-row {
    margin-top: 0;
    justify-content: flex-end;
}
body.page-settings-categories .table-scroll.table-scroll--category-fit .category-grid-toolbar {
    background: rgba(9, 16, 21, 0.94) !important;
    border: 1px solid rgba(74, 222, 128, 0.16) !important;
    border-radius: 10px !important;
    padding: 8px 10px !important;
}
body.page-settings-categories .table-scroll.table-scroll--category-fit {
    margin-top: 12px !important;
}
body.page-settings-categories .cat-main-row td,
body.page-settings-categories .cat-main-row td:not(.category-name-cell):not(.category-icon-cell),
body.page-settings-categories .category-table tbody td {
    background: transparent !important;
    color: #e2e8f0 !important;
}
body.page-settings-categories .category-table tbody tr:hover td {
    background: rgba(15, 23, 42, 0.45) !important;
}
body.page-settings-categories .category-icon-combo__list {
    background: #0f172a !important;
    border-color: rgba(74, 222, 128, 0.28) !important;
}
body.page-settings-categories .category-icon-combo__option {
    color: #dbe7f8 !important;
}
body.page-settings-categories .category-icon-combo__option:hover,
body.page-settings-categories .category-icon-combo__option[aria-selected="true"] {
    background: rgba(30, 41, 59, 0.82) !important;
}
body.page-settings-categories .category-icon-combo__leading i,
body.page-settings-categories .category-icon-combo__option i {
    color: #4ade80 !important;
}
body.page-settings-categories .category-form-input::placeholder {
    color: #94a3b8 !important;
}
body.page-settings-categories .category-form-btns-row #categoryResetBtn,
body.page-settings-categories .category-table .config-actions .btn {
    background: rgba(15, 23, 42, 0.6) !important;
    border: 1px solid rgba(74, 222, 128, 0.42) !important;
    color: #86efac !important;
}
body.page-settings-categories .category-form-btns-row #categorySaveBtn {
    background: linear-gradient(180deg, #22c55e 0%, #15803d 100%) !important;
    border-color: rgba(74, 222, 128, 0.7) !important;
    color: #052e16 !important;
}

body.page-expenses .expense-account-head-icon,
body.page-budgets .expense-account-head-icon {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #86efac;
    border: 1px solid rgba(74, 222, 128, 0.45);
    background: linear-gradient(180deg, rgba(11, 30, 23, 0.92) 0%, rgba(8, 20, 16, 0.96) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 14px rgba(2, 6, 23, 0.35);
}
body.page-expenses .expense-account-hero-toolbar .btn.gastos-add-btn.expense-account-hero-toolbar__add-btn,
body.page-budgets .expense-account-hero-toolbar .btn.gastos-add-btn.expense-account-hero-toolbar__add-btn,
body.page-investments .expense-account-hero-toolbar__right .btn.gastos-add-btn.expense-account-hero-toolbar__add-btn {
    gap: 8px;
    min-width: 170px !important;
}

body.page-expenses .expense-account-hero-toolbar .btn.gastos-add-btn.expense-account-hero-toolbar__add-btn .gastos-add-btn__icon-bubble,
body.page-budgets .expense-account-hero-toolbar .btn.gastos-add-btn.expense-account-hero-toolbar__add-btn .gastos-add-btn__icon-bubble,
body.page-investments .expense-account-hero-toolbar__right .btn.gastos-add-btn.expense-account-hero-toolbar__add-btn .gastos-add-btn__icon-bubble {
    width: auto;
    height: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: none;
    border: 0;
    box-shadow: none;
}
body.page-expenses .expense-account-hero-toolbar .btn.gastos-add-btn.expense-account-hero-toolbar__add-btn .gastos-add-btn__icon-bubble i,
body.page-budgets .expense-account-hero-toolbar .btn.gastos-add-btn.expense-account-hero-toolbar__add-btn .gastos-add-btn__icon-bubble i,
body.page-investments .expense-account-hero-toolbar__right .btn.gastos-add-btn.expense-account-hero-toolbar__add-btn .gastos-add-btn__icon-bubble i {
    font-size: 14px;
    line-height: 1;
    color: var(--rm-registrar-text);
    text-shadow: none;
}

body.page-expenses .category-panel {
    background: #0a1014 !important;
}

body.page-settings-currencies .currency-page-title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
body.page-settings-currencies .currency-page-title i {
    color: #56f06f;
    font-size: 1.05em;
}
body.page-settings-currencies #currencyTransferPanel {
    border: 1px solid rgba(74, 222, 128, 0.2);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(10, 17, 22, 0.95) 0%, rgba(7, 13, 18, 0.98) 100%);
    padding: 12px;
}
body.page-settings-currencies .currency-transfer-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
    align-items: stretch;
    gap: 8px 16px;
}
body.page-settings-currencies .currency-transfer-lbl-left {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
}
body.page-settings-currencies .currency-transfer-lbl-right {
    grid-column: 3;
    grid-row: 1;
    margin: 0;
}
body.page-settings-currencies .currency-transfer-panel > #currencyTransferFilter {
    grid-column: 1;
    grid-row: 2;
}
body.page-settings-currencies .currency-transfer-filter-spacer {
    grid-column: 3;
    grid-row: 2;
    box-sizing: border-box;
    min-height: 40px;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: 10px;
    margin: 0;
    width: 100%;
    pointer-events: none;
    visibility: hidden;
}
body.page-settings-currencies .currency-transfer-filter {
    margin: 0;
    max-width: none;
    min-height: 40px;
}
body.page-settings-currencies .currency-transfer-select.currency-ff-select {
    width: 100%;
    min-width: 0;
    min-height: 0;

    height: auto !important;
    max-height: 9.25rem !important;
    overflow-y: auto;
}
body.page-settings-currencies .currency-transfer-panel > #currencyTransferAvailable {
    grid-column: 1;
    grid-row: 3;
}
body.page-settings-currencies .currency-transfer-panel > #currencyTransferMine {
    grid-column: 3;
    grid-row: 3;
}
body.page-settings-currencies .currency-transfer-actions {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: center;
    justify-self: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    padding: 0 4px;
}
body.page-settings-currencies .currency-transfer-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    border: 1px solid rgba(74, 222, 128, 0.45);
    background: rgba(15, 23, 42, 0.72);
    color: #86efac;
    cursor: pointer;
    font-size: 1rem;
    padding: 0;
}
body.page-settings-currencies .currency-transfer-icon--mobile {
    display: none;
}
body.page-settings-currencies .currency-transfer-icon--desktop {
    display: inline-block;
}
body.page-settings-currencies .currency-transfer-btn:hover:not(:disabled) {
    background: rgba(22, 101, 52, 0.35);
    color: #dcfce7;
}
body.page-settings-currencies .currency-transfer-btn:disabled {
    opacity: 0.42;
    cursor: not-allowed;
    color: rgba(134, 239, 172, 0.5);
    border-color: rgba(74, 222, 128, 0.22);
}
body.page-settings-currencies .currency-transfer-btn:disabled:hover {
    background: rgba(15, 23, 42, 0.72);
    color: rgba(134, 239, 172, 0.5);
}
body.page-settings-currencies .currency-inline-cell {
    vertical-align: middle;
}
body.page-settings-currencies .currency-inline-cell--cb {
    text-align: center;
}
body.page-settings-currencies .config-actions .btn.currency-row-save-btn {
    padding: 6px 12px;
    font-size: 0.85rem;
    margin-right: 6px;
}
body.page-settings-currencies tr.currency-row--official .currency-col-meta {
    color: #eab308 !important;
    font-weight: 700;
}

body.page-settings-currencies td.currency-col-code {
    vertical-align: middle;
}
body.page-settings-currencies .currency-flag-cell__wrap {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: nowrap;
    vertical-align: middle;
}
body.page-settings-currencies .currency-flag-cell__img {
    flex-shrink: 0;
    width: 24px;
    height: 18px;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
}
body.page-settings-currencies .currency-transfer-select.currency-ff-select,
body.page-settings-currencies #currencyTransferAvailable,
body.page-settings-currencies #currencyTransferMine {
    font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", system-ui, sans-serif;
}
body.page-settings-currencies .currency-flag-cell__code {
    font-weight: inherit;
}
body.page-settings-currencies tr.currency-row--official .currency-flag-cell__code {
    color: #eab308 !important;
}
body.page-settings-currencies .currency-tc-cell {
    min-width: 9.5rem;
    vertical-align: middle;
}
body.page-settings-currencies .currency-tc-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 3px 5px;
    max-width: 100%;
}
body.page-settings-currencies .currency-tc-rate-pre,
body.page-settings-currencies .currency-tc-rate-post {
    font-size: 0.72rem;
    color: #cbd5e1;
    white-space: nowrap;
    flex-shrink: 0;
}
body.page-settings-currencies .currency-tc-rate-input {
    width: 3.65rem;
    min-width: 3.15rem;
    max-width: 4.1rem;
    flex: 0 0 auto;
    margin: 0 !important;
    padding: 5px 5px !important;
    font-size: 0.78rem !important;
    text-align: center;
    box-sizing: border-box;
}
body.page-settings-currencies .currency-tc-rate-input:disabled {
    opacity: 0.72;
    cursor: not-allowed;
    color: #e2e8f0;
}
body.page-settings-currencies .currency-tc-mode-icons {
    display: inline-flex;
    flex-direction: row;
    flex-shrink: 0;
    gap: 2px;
    margin-left: 1px;
}
body.page-settings-currencies .currency-tc-mode-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 8px;
    border: 1px solid rgba(74, 222, 128, 0.35);
    background: rgba(15, 23, 42, 0.85);
    color: #86efac;
    cursor: pointer;
    font-size: 0.74rem;
}
body.page-settings-currencies .currency-tc-mode-btn:hover {
    background: rgba(22, 101, 52, 0.35);
    color: #dcfce7;
}
body.page-settings-currencies .currency-tc-mode-btn--active {
    border-color: rgba(74, 222, 128, 0.78);
    background: rgba(22, 101, 52, 0.48);
    color: #dcfce7;
    box-shadow: 0 0 0 1px rgba(74, 222, 128, 0.22);
}
body.page-settings-currencies .currency-tc-mode-btn:focus-visible {
    outline: 2px solid rgba(74, 222, 128, 0.65);
    outline-offset: 1px;
}
@media (max-width: 520px) {
    body.page-settings-currencies .currency-tc-row {
        flex-wrap: wrap;
    }
}
body.page-settings-currencies .currency-tc-official-ph {
    display: inline-block;
    color: rgba(148, 163, 184, 0.55);
    font-size: 1.1rem;
    padding: 4px 0;
}
body.page-settings-currencies .currency-tc-no-official {
    font-size: 0.82rem;
    color: #fca5a5;
    line-height: 1.35;
}
body.page-settings-currencies #currencyTransferMine option:disabled {
    color: #eab308 !important;
}
@media (max-width: 960px) {
    body.page-settings-currencies .currency-transfer-panel {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto auto auto;
        gap: 8px;
    }
    body.page-settings-currencies .currency-transfer-lbl-left {
        grid-column: 1;
        grid-row: 1;
    }
    body.page-settings-currencies .currency-transfer-panel > #currencyTransferFilter {
        grid-column: 1;
        grid-row: 2;
    }
    body.page-settings-currencies .currency-transfer-panel > #currencyTransferAvailable {
        grid-column: 1;
        grid-row: 3;
    }
    body.page-settings-currencies .currency-transfer-actions {
        grid-column: 1;
        grid-row: 4;
        flex-direction: row;
        justify-content: center;
        width: 100%;
        padding: 4px 0;
    }
    body.page-settings-currencies .currency-transfer-lbl-right {
        grid-column: 1;
        grid-row: 5;
    }
    body.page-settings-currencies .currency-transfer-filter-spacer {
        display: none !important;
    }
    body.page-settings-currencies .currency-transfer-panel > #currencyTransferMine {
        grid-column: 1;
        grid-row: 6;
    }
    body.page-settings-currencies .currency-transfer-select.currency-ff-select {
        max-height: 9.25rem !important;
    }
    body.page-settings-currencies .currency-transfer-icon--desktop {
        display: none !important;
    }
    body.page-settings-currencies .currency-transfer-icon--mobile {
        display: inline-block;
    }
}

body.page-settings-categories .subnav,
body.page-settings-currencies .subnav,
body.page-settings-due-dates .subnav,
body.page-settings-date-format .subnav,
body.page-settings-holders .subnav,
body.page-settings-notifications .subnav {
    background: linear-gradient(180deg, #0a1014 0%, #070d11 100%) !important;
    border-color: rgba(74, 222, 128, 0.22) !important;
}
body.page-settings-categories .subnav + .panel,
body.page-settings-currencies .subnav + .panel,
body.page-settings-due-dates .subnav + .panel,
body.page-settings-date-format .subnav + .panel,
body.page-settings-holders .subnav + .panel,
body.page-settings-notifications .subnav + .panel {
    background: linear-gradient(180deg, #0a1014 0%, #070d11 100%) !important;
    border-color: rgba(74, 222, 128, 0.22) !important;
    box-shadow: 0 18px 34px rgba(2, 8, 23, 0.48) !important;
}

.page-wealth-guide .guia-panel,
.page-info .page-info-panel,
body.page-settings-categories .subnav + .panel,
body.page-settings-currencies .subnav + .panel,
body.page-settings-due-dates .subnav + .panel,
body.page-settings-date-format .subnav + .panel,
body.page-settings-holders .subnav + .panel,
body.page-settings-notifications .subnav + .panel {
    background: #0a1014 !important;
}

body.page-settings-categories .subnav,
body.page-settings-currencies .subnav,
body.page-settings-due-dates .subnav,
body.page-settings-date-format .subnav,
body.page-settings-holders .subnav,
body.page-settings-notifications .subnav {
    background: #0a1014 !important;
}

body.page-settings-categories .topbar--hero ~ main.container:has(> section.subnav) > section.panel,
body.page-settings-currencies .topbar--hero ~ main.container:has(> section.subnav) > section.panel,
body.page-settings-due-dates .topbar--hero ~ main.container:has(> section.subnav) > section.panel,
body.page-settings-date-format .topbar--hero ~ main.container:has(> section.subnav) > section.panel,
body.page-settings-holders .topbar--hero ~ main.container:has(> section.subnav) > section.panel,
body.page-settings-notifications .topbar--hero ~ main.container:has(> section.subnav) > section.panel,
body.page-settings-categories main.container > section.panel,
body.page-settings-currencies main.container > section.panel,
body.page-settings-due-dates main.container > section.panel,
body.page-settings-date-format main.container > section.panel,
body.page-settings-holders main.container > section.panel,
body.page-settings-notifications main.container > section.panel {
    background: #0a1014 !important;
}

body.page-settings-categories .subnav,
body.page-settings-currencies .subnav,
body.page-settings-due-dates .subnav,
body.page-settings-date-format .subnav,
body.page-settings-holders .subnav,
body.page-settings-notifications .subnav {
    background: #0a1014 !important;
    border: 1px solid rgba(74, 222, 128, 0.22) !important;
    border-radius: 12px 12px 0 0 !important;
    padding: 8px 10px !important;
    gap: 6px !important;
    margin: 0 12px !important;
}
body.page-settings-categories .subnav a,
body.page-settings-currencies .subnav a,
body.page-settings-due-dates .subnav a,
body.page-settings-date-format .subnav a,
body.page-settings-holders .subnav a,
body.page-settings-notifications .subnav a {
    border-radius: 9px !important;
    border: 1px solid rgba(148, 163, 184, 0.28) !important;
    background: rgba(15, 23, 42, 0.45) !important;
    color: #e2e8f0 !important;
    font-weight: 700 !important;
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.24);
}
body.page-settings-categories .subnav a.active,
body.page-settings-currencies .subnav a.active,
body.page-settings-due-dates .subnav a.active,
body.page-settings-date-format .subnav a.active,
body.page-settings-holders .subnav a.active,
body.page-settings-notifications .subnav a.active {
    border-color: rgba(74, 222, 128, 0.65) !important;
    background: linear-gradient(180deg, rgba(13, 55, 39, 0.95) 0%, rgba(9, 33, 24, 0.98) 100%) !important;
    color: #4ade80 !important;
    box-shadow:
        inset 0 1px 0 rgba(134, 239, 172, 0.18),
        0 0 14px rgba(212, 175, 55, 0.38) !important;
}
body.page-settings-categories .subnav + .panel,
body.page-settings-currencies .subnav + .panel,
body.page-settings-due-dates .subnav + .panel,
body.page-settings-date-format .subnav + .panel,
body.page-settings-holders .subnav + .panel,
body.page-settings-notifications .subnav + .panel {
    background: #0a1014 !important;
    border: 1px solid rgba(74, 222, 128, 0.22) !important;
    border-radius: 0 0 12px 12px !important;
    box-shadow: 0 18px 34px rgba(2, 8, 23, 0.48) !important;
    margin: 0 12px !important;
}

.page-wealth-guide .guia-hero {
    background: linear-gradient(225deg, rgba(13, 67, 53, 0.34) 0%, rgba(10, 20, 44, 0) 62%) !important;
}
.page-info .page-info-hero {
    background: linear-gradient(225deg, rgba(17, 94, 89, 0.3) 0%, rgba(10, 20, 44, 0) 58%) !important;
}

body.page-settings-categories .panel,
body.page-settings-currencies .panel,
body.page-settings-due-dates .panel,
body.page-settings-date-format .panel {
    color: #f3f4f6 !important;
}
body.page-settings-categories .panel p,
body.page-settings-currencies .panel p,
body.page-settings-due-dates .panel p,
body.page-settings-date-format .panel p,
body.page-settings-categories .muted,
body.page-settings-currencies .muted,
body.page-settings-due-dates .muted,
body.page-settings-date-format .muted,
body.page-settings-categories .modal-field__label,
body.page-settings-currencies .modal-field__label,
body.page-settings-due-dates .modal-field__label,
body.page-settings-date-format .modal-field__label,
body.page-settings-holders .modal-field__label,
body.page-settings-notifications .modal-field__label {
    color: #f3f4f6 !important;
}
body.page-settings-categories .panel input,
body.page-settings-categories .panel select,
body.page-settings-categories .panel textarea,
body.page-settings-currencies .panel input,
body.page-settings-currencies .panel select,
body.page-settings-currencies .panel textarea,
body.page-settings-due-dates .panel input,
body.page-settings-due-dates .panel select,
body.page-settings-due-dates .panel textarea,
body.page-settings-date-format .panel input,
body.page-settings-date-format .panel select,
body.page-settings-date-format .panel textarea {
    color: #f3f4f6 !important;
}

body.page-admin-system-users main.container > section.admin-users-panel {
    margin-top: 18px;
    padding: 20px 18px 24px;
    border-radius: 16px;
    border: 1px solid rgba(74, 222, 128, 0.22);
    background: #0a1014;
    color: #f3f4f6;
}
body.page-admin-system-users .admin-users-page-title {
    margin: 0 0 10px;
    font-size: 1.35rem;
    font-weight: 800;
    color: #86efac;
}
body.page-admin-system-users .admin-users-lead,
body.page-admin-system-users .admin-users-count {
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.5;
    color: #cbd5e1;
}
body.page-admin-system-users .admin-users-count {
    margin-bottom: 16px;
}
body.page-admin-system-users .admin-users-alert {
    margin: 0 0 16px;
    padding: 9px 11px;
    border-radius: 10px;
    border: 1px solid rgba(248, 113, 113, 0.32);
    background: rgba(127, 29, 29, 0.28);
    color: #fecaca;
    font-size: 12px;
    line-height: 1.4;
}
body.page-admin-system-users .admin-users-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(15, 23, 42, 0.55);
}
body.page-admin-system-users table.admin-users-table {
    border-collapse: collapse;
    width: max-content;
    min-width: 100%;
    font-size: 12px;
}
body.page-admin-system-users .admin-users-table th,
body.page-admin-system-users .admin-users-table td {
    padding: 8px 10px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid rgba(148, 163, 184, 0.15);
    white-space: nowrap;
}
body.page-admin-system-users .admin-users-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    font-weight: 800;
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #94a3b8;
    background: rgba(15, 23, 42, 0.96);
    border-bottom-color: rgba(74, 222, 128, 0.25);
}
body.page-admin-system-users .admin-users-table tbody tr:hover td {
    background: rgba(34, 197, 94, 0.06);
}
body.page-admin-system-users .admin-users-cell--wide {
    max-width: 220px;
    white-space: normal;
    word-break: break-word;
}
body.page-admin-system-users .admin-users-cell--url {
    max-width: 280px;
    white-space: normal;
    word-break: break-all;
    font-size: 11px;
}
body.page-admin-system-users .admin-users-cell--avatar {
    min-width: 76px;
    text-align: center;
    vertical-align: middle;
}
body.page-admin-system-users .admin-users-avatar-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(148, 163, 184, 0.32);
    background: rgba(15, 23, 42, 0.8);
    overflow: hidden;
}
body.page-admin-system-users .admin-users-avatar {
    display: block;
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 50%;
}
body.page-admin-system-users .admin-users-cell--mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 11px;
    max-width: 200px;
    white-space: normal;
    word-break: break-all;
}
body.page-admin-system-users .admin-users-cell--action {
    min-width: 96px;
    text-align: center;
    vertical-align: middle;
}
body.page-admin-system-users .admin-users-impersonate-form {
    margin: 0;
}
body.page-admin-system-users .admin-users-impersonate-btn {
    min-width: 72px;
    border: 1px solid rgba(74, 222, 128, 0.45);
    border-radius: 8px;
    background: rgba(22, 163, 74, 0.18);
    color: #bbf7d0;
    cursor: pointer;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    padding: 8px 10px;
}
body.page-admin-system-users .admin-users-impersonate-btn:hover:not(:disabled),
body.page-admin-system-users .admin-users-impersonate-btn:focus-visible:not(:disabled) {
    background: rgba(22, 163, 74, 0.32);
    border-color: rgba(134, 239, 172, 0.7);
    outline: none;
}
body.page-admin-system-users .admin-users-impersonate-btn:disabled {
    border-color: rgba(148, 163, 184, 0.2);
    background: rgba(148, 163, 184, 0.08);
    color: rgba(203, 213, 225, 0.55);
    cursor: not-allowed;
}

.page-profile #perfilAuthShell.modal-app-shell.auth-login-shell {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 12px 10px 14px !important;
}
.page-profile #perfilAuthShell > .modal-card.modal-card--in-app-shell {
    background: linear-gradient(180deg, #081421 0%, #060f1a 100%);
    border: 1px solid rgba(34, 197, 94, 0.2);
    box-shadow: 0 16px 44px rgba(2, 6, 23, 0.55);
}
.page-profile #perfilAuthShell .modal-card__body {
    background: transparent;
    padding-bottom: 18px;
}
.page-profile #perfilAuthShell .modal-card__head {
    border-bottom: 1px solid rgba(34, 197, 94, 0.2);
}
.page-profile #perfilAuthShell .modal-card__title {
    color: #4ade80;
    text-shadow: none;
}
.page-profile #perfilAuthShell .modal-card__subtitle {
    color: #cbd5e1;
}
.page-profile #perfilAuthShell .perfil-modal-body > .subnav {
    margin: 10px 12px 0;
    padding: 0;
    border: 0;
    background: transparent;
}
.page-profile #perfilAuthShell .perfil-modal-body > .subnav a {
    border: 1px solid rgba(148, 163, 184, 0.3);
    border-radius: 10px 10px 0 0;
    background: rgba(15, 23, 42, 0.72);
    color: #cbd5e1;
    margin-right: 6px;
    margin-bottom: 0;
    padding: 8px 14px;
}
.page-profile #perfilAuthShell .perfil-modal-body > .subnav a.active {
    background: linear-gradient(180deg, #fef08a 0%, #d4af37 98%);
    color: #0f172a;
    border-color: rgba(212, 175, 55, 0.86);
    box-shadow: 0 4px 16px rgba(212, 175, 55, 0.28);
    border-bottom-color: rgba(212, 175, 55, 0.86);
}
.page-profile #perfilAuthShell .perfil-modal-body > .subnav + .panel,
.page-profile #perfilAuthShell .perfil-modal-body > .panel.perfil-tab-panel {
    margin: 0 12px;
    border: 1px solid rgba(34, 197, 94, 0.2);
    border-radius: 0 12px 12px 12px;
    background: rgba(2, 12, 28, 0.86);
}
.page-profile .perfil-form label > span:first-child,
.page-profile .perfil-password-form label > span:first-child,
.page-profile .perfil-share-form label > span:first-child,
.page-profile .perfil-password-title,
.page-profile .perfil-share-subtitle {
    color: #cbd5e1 !important;
}
.page-profile .perfil-footnote {
    color: #94a3b8 !important;
}
.page-profile .perfil-section-card {
    margin: 0 0 12px;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid rgba(34, 197, 94, 0.18);
    background: rgba(15, 23, 42, 0.48);
}
.page-profile .perfil-section-card__title {
    margin: 0 0 10px;
    font-size: 0.97rem;
    font-weight: 700;
    color: #4ade80;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.page-profile .perfil-section-card > label {
    display: grid;
    gap: 6px;
    margin: 0 0 10px;
}
.page-profile .perfil-section-card > .perfil-row-2 {
    margin-top: 2px;
}
.page-profile .perfil-form input:not([type="hidden"]),
.page-profile .perfil-form select,
.page-profile .perfil-form .perfil-readonly {
    border-color: rgba(71, 85, 105, 0.72);
    background: rgba(15, 23, 42, 0.76);
    color: #f8fafc;
}
.page-profile .perfil-form select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23cbd5e1' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px 12px;
    padding-right: 2.3rem;
}
.page-profile .perfil-form input::placeholder {
    color: #94a3b8;
}
.page-profile .perfil-form input:focus,
.page-profile .perfil-form select:focus {
    border-color: #4ade80;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
}
.page-profile .perfil-avatar {
    border-color: rgba(74, 222, 128, 0.5);
}

body.page-profile #perfilAuthShell > .modal-card.modal-card--in-app-shell {
    background: #0a1014 !important;
    border: 1px solid rgba(74, 222, 128, 0.22) !important;
    box-shadow: 0 18px 34px rgba(2, 8, 23, 0.48) !important;
    max-height: none !important;
    overflow: visible !important;
}
body.page-profile #perfilAuthShell .perfil-modal-card__head {
    display: none !important;
}
body.page-profile #perfilAuthShell .perfil-modal-body > .subnav {
    background: #0a1014 !important;
    border: 1px solid rgba(74, 222, 128, 0.22) !important;
    border-radius: 12px 12px 0 0 !important;
    padding: 8px 10px !important;
    gap: 6px !important;
    margin: 0 12px !important;
}
body.page-profile #perfilAuthShell .perfil-modal-body > .subnav a {
    border-radius: 9px !important;
    border: 1px solid rgba(148, 163, 184, 0.28) !important;
    background: rgba(15, 23, 42, 0.45) !important;
    color: #e2e8f0 !important;
    font-weight: 700 !important;
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.24);
}
body.page-profile #perfilAuthShell .perfil-modal-body > .subnav a.active {
    border-color: rgba(74, 222, 128, 0.65) !important;
    background: linear-gradient(180deg, rgba(13, 55, 39, 0.95) 0%, rgba(9, 33, 24, 0.98) 100%) !important;
    color: #4ade80 !important;
    box-shadow:
        inset 0 1px 0 rgba(134, 239, 172, 0.18),
        0 0 14px rgba(212, 175, 55, 0.38) !important;
}
body.page-profile #perfilAuthShell .perfil-modal-body > .subnav + .panel,
body.page-profile #perfilAuthShell .perfil-modal-body > .panel.perfil-tab-panel {
    background: #0a1014 !important;
    border: 1px solid rgba(74, 222, 128, 0.22) !important;
    border-radius: 0 0 12px 12px !important;
    box-shadow: 0 18px 34px rgba(2, 8, 23, 0.48) !important;
    margin: 0 12px !important;
}
body.page-profile #perfilAuthShell .modal-card__body {
    overflow-y: visible !important;
    overflow-x: visible !important;
    max-height: none !important;
}
body.page-profile .perfil-password-wrap--tab {
    padding: 0 0 0 !important;
    border-top: 0 !important;
}
body.page-profile .perfil-password-form {
    display: grid;
    gap: 14px;
    max-width: min(560px, 100%);
}
body.page-profile .perfil-password-form label {
    display: grid;
    gap: 6px;
    margin: 0;
}
body.page-profile .perfil-password-form .perfil-footnote {
    margin: 2px 0 2px;
    line-height: 1.5;
}
body.page-profile .perfil-password-form .perfil-submit {
    margin-top: 8px;
}
body.page-profile .perfil-share-wrap--tab {
    margin-top: 0 !important;
    padding-top: 12px !important;
    border-top: 0 !important;
}
body.page-profile .perfil-share-card {
    background: rgba(15, 23, 42, 0.84) !important;
    border-color: rgba(74, 222, 128, 0.22) !important;
    box-shadow: 0 10px 24px rgba(2, 8, 23, 0.4) !important;
}
body.page-profile .perfil-share-card__head,
body.page-profile .perfil-share-card__head strong,
body.page-profile .perfil-share-card__head span,
body.page-profile .perfil-share-modules span {
    color: #e2e8f0 !important;
}
body.page-profile .perfil-share-card .muted,
body.page-profile .perfil-share-card__actions .muted,
body.page-profile .perfil-share-accepted-hint {
    color: #94a3b8 !important;
}
body.page-profile .perfil-share-status {
    background: rgba(30, 41, 59, 0.85) !important;
    color: #cbd5e1 !important;
    border-color: rgba(148, 163, 184, 0.28) !important;
}
body.page-profile .perfil-share-check {
    color: #dbe7f8 !important;
}

body.page-profile .perfil-share-subtitle--sent {
    margin-top: 20px;
}
body.page-profile .perfil-share-sent-card {
    margin-bottom: 14px;
    border-radius: 12px;
    border: 1px solid rgba(55, 65, 81, 0.75);
    background: rgba(22, 27, 34, 0.96);
    box-shadow: 0 8px 22px rgba(2, 6, 23, 0.45);
    overflow: hidden;
}
body.page-profile .perfil-share-sent-card__summary {
    list-style: none;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    gap: 8px 10px;
    align-items: center;
    padding: 12px 12px;
    cursor: pointer;
    user-select: none;
}
body.page-profile .perfil-share-sent-card__summary::-webkit-details-marker {
    display: none;
}
body.page-profile .perfil-share-sent-card__avatar {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: linear-gradient(145deg, #166534, #22c55e);
    color: #ffffff;
    font-weight: 800;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
body.page-profile .perfil-share-sent-card__email {
    display: block;
    min-width: 0;
    font-size: 0.88rem;
    font-weight: 600;
    color: #f8fafc !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.page-profile .perfil-share-sent-card__status {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #94a3b8;
    white-space: nowrap;
}
body.page-profile .perfil-share-sent-card--accepted .perfil-share-sent-card__status {
    color: #4ade80 !important;
}
body.page-profile .perfil-share-sent-card--pending .perfil-share-sent-card__status {
    color: #fbbf24 !important;
}
body.page-profile .perfil-share-sent-card__chev {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
body.page-profile .perfil-share-sent-card__chev::before {
    content: "";
    display: block;
    width: 7px;
    height: 7px;
    border-right: 2px solid #94a3b8;
    border-bottom: 2px solid #94a3b8;
    transform: rotate(45deg);
    margin-top: -3px;
    transition: transform 0.2s ease;
}
body.page-profile .perfil-share-sent-card__disclosure[open] .perfil-share-sent-card__chev::before {
    transform: rotate(-135deg);
    margin-top: 3px;
}
body.page-profile .perfil-share-sent-card__body {
    padding: 2px 12px 14px;
}
body.page-profile .perfil-share-perm-list {
    margin: 0;
    padding: 0;
}
body.page-profile label.perfil-share-perm-row {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    gap: 8px 12px;
    align-items: center;
    padding: 10px 0;
    margin: 0;
    border-bottom: 1px solid rgba(51, 65, 85, 0.55);
    cursor: pointer;
}
body.page-profile label.perfil-share-perm-row:last-of-type {
    border-bottom: none;
}
body.page-profile .perfil-share-perm-row__icon {
    color: #4ade80;
    font-size: 1rem;
    text-align: center;
}
body.page-profile .perfil-share-perm-row__title {
    display: block;
    font-weight: 700;
    font-size: 0.92rem;
    color: #f1f5f9;
}
body.page-profile .perfil-share-perm-row__desc {
    display: block;
    margin-top: 2px;
    font-size: 0.76rem;
    line-height: 1.35;
    color: #94a3b8 !important;
}
body.page-profile .perfil-share-perm-row__input {
    width: 22px;
    height: 22px;
    margin: 0;
    accent-color: #22c55e;
    cursor: pointer;
    justify-self: end;
}
body.page-profile .perfil-share-sent-card__footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid rgba(51, 65, 85, 0.55);
}
body.page-profile .perfil-share-foot-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    padding: 8px 6px;
    border-radius: 10px;
    font-size: 0.76rem;
    font-weight: 800;
    line-height: 1.2;
    box-sizing: border-box;
    cursor: pointer;
    text-decoration: none;
    border: none;
    font-family: inherit;
}
body.page-profile .perfil-share-foot-btn--save {
    background: transparent;
    border: 1px solid rgba(34, 197, 94, 0.75);
    color: #bbf7d0;
}
body.page-profile .perfil-share-foot-btn--save:hover {
    background: rgba(34, 197, 94, 0.12);
}
body.page-profile .perfil-share-foot-btn--revoke {
    background: transparent;
    border: 1px solid rgba(248, 113, 113, 0.75);
    color: #fecaca;
}
body.page-profile .perfil-share-foot-btn--revoke:hover {
    background: rgba(248, 113, 113, 0.1);
}
body.page-profile .perfil-share-tip {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-top: 16px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid rgba(74, 222, 128, 0.22);
    background: rgba(15, 23, 42, 0.55);
    font-size: 0.82rem;
    color: #cbd5e1;
    line-height: 1.45;
}
body.page-profile .perfil-share-tip .fa-circle-info {
    color: #4ade80;
    margin-top: 2px;
    flex-shrink: 0;
}

body.page-profile .perfil-billing-panel,
body.page-profile .perfil-billing-panel .perfil-password-title,
body.page-profile .perfil-billing-subtitle,
body.page-profile .perfil-billing-k,
body.page-profile .perfil-billing-v,
body.page-profile .perfil-billing-history li,
body.page-profile .perfil-billing-upsell__text,
body.page-profile .perfil-billing-progress {
    color: #e2e8f0 !important;
}
body.page-profile .perfil-billing-row {
    border-bottom-color: rgba(148, 163, 184, 0.26) !important;
}
body.page-profile .perfil-billing-upsell {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.14), rgba(34, 197, 94, 0.14)) !important;
    border-color: rgba(251, 191, 36, 0.35) !important;
}
body.page-profile #perfilAuthShell .perfil-billing-mobile .perfil-billing-mobile-footer-wrap .perfil-billing-upsell.perfil-billing-upsell--promo {
    background: linear-gradient(135deg, rgba(66, 32, 6, 0.55) 0%, rgba(30, 20, 8, 0.75) 100%) !important;
    border-color: rgba(212, 175, 55, 0.42) !important;
}
body.page-profile #perfilAuthShell .perfil-billing-mobile .perfil-billing-mobile-footer-wrap .perfil-billing-upsell--promo .perfil-billing-upsell__text {
    color: #f8fafc !important;
}
body.page-profile .perfil-billing-actions .btn-modal-secondary {
    background: rgba(15, 23, 42, 0.9) !important;
    color: #e2e8f0 !important;
    border-color: rgba(148, 163, 184, 0.35) !important;
}
body.page-profile #perfilAuthShell .perfil-inline-heading {
    margin: 12px 12px 10px;
    padding: 2px 2px 0;
}
body.page-profile #perfilAuthShell .perfil-inline-heading__title {
    margin: 0;
    font-size: 1.8rem;
    font-weight: 800;
    color: #4ade80;
    line-height: 1.2;
}
body.page-profile #perfilAuthShell .perfil-inline-heading__title-row {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
body.page-profile #perfilAuthShell .perfil-inline-heading__title-row .page-screen-info-btn {
    color: rgba(190, 250, 200, 0.92);
}
body.page-profile #perfilAuthShell .perfil-inline-heading__title-row .page-screen-info-btn:hover {
    color: #f8fafc;
    background: rgba(74, 222, 128, 0.14);
}
body.page-profile #perfilAuthShell .perfil-inline-heading__subtitle {
    margin: 4px 0 0;
    font-size: 0.92rem;
    color: #cbd5e1;
}
body.page-profile .topbar--hero ~ main.container {
    padding-top: 52px !important;
}

.page-profile .perfil-language-dropdown {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.page-profile .perfil-language-dropdown__label {
    font-size: 0.92rem;
    font-weight: 600;
    color: #cbd5e1;
}
.page-profile .perfil-language-details {
    position: relative;
    z-index: 5;
}
.page-profile .perfil-language-summary {
    list-style: none;
    cursor: pointer;
    border: 1px solid rgba(71, 85, 105, 0.72);
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.76);
    color: #f8fafc;
    min-height: 44px;
    padding: 10px 38px 10px 12px;
    display: flex;
    align-items: center;
    font-weight: 700;
}
.page-profile .perfil-language-summary::-webkit-details-marker {
    display: none;
}
.page-profile .perfil-language-summary::after {
    content: "▾";
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #cbd5e1;
    pointer-events: none;
}
.page-profile .perfil-language-details[open] .perfil-language-summary {
    border-color: #4ade80;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
}
.page-profile .perfil-language-list {
    position: absolute;
    left: 0;
    right: 0;
    top: auto;
    bottom: calc(100% + 6px);
    margin-top: 0;
    border: 1px solid rgba(71, 85, 105, 0.72);
    border-radius: 10px;
    background: #0f172a;
    max-height: 300px;
    overflow-y: auto;
    padding: 6px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    box-shadow: 0 14px 28px rgba(2, 8, 23, 0.5);
}
.page-profile .perfil-language-item {
    display: grid;
    grid-template-columns: auto auto auto 1fr;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    border-radius: 8px;
    color: #f8fafc;
    cursor: pointer;
}
.page-profile .perfil-language-item:hover {
    background: rgba(30, 41, 59, 0.92);
}
.page-profile .perfil-language-item input[type="radio"] {
    margin: 0;
    accent-color: #4ade80;
}
.page-profile .perfil-language-item__flag {
    width: 16px;
    height: 16px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.22);
}
.page-profile .perfil-language-item__code {
    font-size: 0.79rem;
    font-weight: 800;
    color: #cbd5e1;
    letter-spacing: 0.03em;
}
.page-profile .perfil-language-item__name {
    font-size: 0.98rem;
    font-weight: 600;
}
@media (max-width: 760px) {
    .page-profile .perfil-language-list {
        grid-template-columns: 1fr;
    }
}

.page-profile .perfil-profile-top {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid rgba(34, 197, 94, 0.18);
    background: rgba(15, 23, 42, 0.48);
    box-sizing: border-box;
    min-width: 0;
}
.page-profile .perfil-profile-meta {
    flex: 1 1 auto;
    min-width: 0;
}
.page-profile .perfil-profile-meta__name {
    margin: 0;
    font-size: 1.12rem;
    font-weight: 800;
    color: #f8fafc;
    line-height: 1.25;
    word-break: break-word;
}
.page-profile .perfil-profile-meta__verified {
    margin: 8px 0 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
    font-weight: 700;
    color: #bbf7d0;
}
.page-profile .perfil-profile-meta__verified i {
    color: #4ade80;
    font-size: 1rem;
}
@media (min-width: 720px) {
    .page-profile .perfil-profile-top {
        display: contents;
    }
    .page-profile .perfil-profile-meta {
        padding: 0;
        border: 0;
        background: transparent;
        margin: 0 0 4px;
    }
    .page-profile .perfil-layout {
        display: grid;
        grid-template-columns: 160px minmax(0, 1fr);
        grid-template-rows: auto auto;
        column-gap: 32px;
        row-gap: 18px;
        align-items: start;
    }
    .page-profile .perfil-avatar-block {
        grid-column: 1;
        grid-row: 1 / span 2;
        align-self: start;
    }
    .page-profile .perfil-profile-meta {
        grid-column: 2;
        grid-row: 1;
    }
    .page-profile .perfil-layout > .perfil-form {
        grid-column: 2;
        grid-row: 2;
    }
}
@media (max-width: 719px) {
    body.page-profile .topbar--hero ~ main.container {
        background: #050a0d;
    }
    .page-profile .perfil-profile-top .perfil-avatar {
        width: 88px;
        height: 88px;
        margin: 0 auto;
    }
    .page-profile .perfil-profile-top .perfil-avatar--placeholder {
        width: 88px;
        height: 88px;
        font-size: 2rem;
        margin: 0 auto;
    }
    .page-profile .perfil-profile-top .perfil-avatar-block {
        flex: 0 0 auto;
        width: 88px;
    }
    body.page-profile #perfilAuthShell.modal-app-shell.auth-login-shell {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }
    body.page-profile #perfilAuthShell .perfil-modal-body > .subnav {
        flex-wrap: nowrap !important;
        overflow-x: visible !important;
        gap: 3px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 6px 4px 8px !important;
        justify-content: stretch;
    }
    body.page-profile #perfilAuthShell .perfil-modal-body > .subnav a {
        flex: 1 1 0;
        min-width: 0;
        margin-right: 0 !important;
        margin-bottom: 0 !important;
        border-radius: 8px !important;
        box-shadow: none !important;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        line-height: 1.15;
        font-weight: 700 !important;
        padding: 6px 3px !important;
        letter-spacing: -0.01em;
        white-space: normal;
        word-break: break-word;
        hyphens: auto;
    }
    body.page-profile #perfilAuthShell .perfil-modal-body > .subnav a.active {
        box-shadow:
            inset 0 1px 0 rgba(134, 239, 172, 0.18),
            0 0 14px rgba(34, 197, 94, 0.35) !important;
    }
    body.page-profile #perfilAuthShell .perfil-modal-body > .subnav + .panel,
    body.page-profile #perfilAuthShell .perfil-modal-body > .panel.perfil-tab-panel {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    body.page-settings-categories .subnav,
    body.page-settings-currencies .subnav,
    body.page-settings-due-dates .subnav,
    body.page-settings-date-format .subnav,
    body.page-settings-holders .subnav,
    body.page-settings-notifications .subnav {
        flex-wrap: nowrap !important;
        overflow-x: visible !important;
        gap: 3px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 6px 4px 8px !important;
        justify-content: stretch;
    }
    body.page-settings-categories .subnav a,
    body.page-settings-currencies .subnav a,
    body.page-settings-due-dates .subnav a,
    body.page-settings-date-format .subnav a,
    body.page-settings-holders .subnav a,
    body.page-settings-notifications .subnav a {
        flex: 1 1 0;
        min-width: 0;
        margin-right: 0 !important;
        margin-bottom: 0 !important;
        border-radius: 8px !important;
        box-shadow: none !important;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        line-height: 1.15;
        font-weight: 700 !important;
        padding: 6px 3px !important;
        letter-spacing: -0.01em;
        white-space: normal;
        word-break: break-word;
        hyphens: auto;
    }
    body.page-settings-categories .subnav a.active,
    body.page-settings-currencies .subnav a.active,
    body.page-settings-due-dates .subnav a.active,
    body.page-settings-date-format .subnav a.active,
    body.page-settings-holders .subnav a.active,
    body.page-settings-notifications .subnav a.active {
        box-shadow:
            inset 0 1px 0 rgba(134, 239, 172, 0.18),
            0 0 14px rgba(34, 197, 94, 0.35) !important;
    }
    body.page-settings-categories .subnav + .panel,
    body.page-settings-currencies .subnav + .panel,
    body.page-settings-due-dates .subnav + .panel,
    body.page-settings-date-format .subnav + .panel,
    body.page-settings-holders .subnav + .panel,
    body.page-settings-notifications .subnav + .panel {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .page-profile .perfil-row-2 {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    }
    .page-profile .perfil-language-dropdown {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }
    .page-profile .perfil-language-dropdown__label {
        flex: 0 1 auto;
        max-width: 48%;
    }
    .page-profile .perfil-language-details {
        flex: 1 1 auto;
        min-width: 0;
    }
    body.page-profile .perfil-form .perfil-submit {
        width: 100%;
        max-width: none;
        align-self: stretch;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 14px 20px;
        font-size: 1.05rem;
        font-weight: 800;
        box-sizing: border-box;
    }
    body.page-profile .perfil-share-form .perfil-share-module-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-top: 10px;
        margin-bottom: 6px;
    }
    body.page-profile .perfil-share-form .perfil-share-check--tile {
        align-items: center;
        justify-content: center;
        gap: 5px;
        margin: 0 !important;
        border-radius: 10px;
        border: 1px solid rgba(71, 85, 105, 0.55) !important;
        background: rgba(15, 23, 42, 0.72) !important;
        font-size: 0.72rem !important;
        font-weight: 700 !important;
        color: #e2e8f0 !important;
        text-align: center;
        box-sizing: border-box;
    }
    body.page-profile .perfil-share-form .perfil-share-check--tile .fa-solid {
        font-size: 0.95rem !important;
        color: #4ade80 !important;
    }
    body.page-profile .perfil-share-form .perfil-share-check--tile input[type="checkbox"] {
        width: 15px;
        height: 15px;
        margin: 0 0 1px;
        accent-color: #22c55e;
    }
    body.page-profile .perfil-share-outbox-list {
        max-height: none;
        padding-right: 0;
    }
}

body.page-dashboard .dashboard-v2 {
    padding-top: 72px;
    padding-bottom: 26px;
}
body.page-dashboard .dashboard-v2__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
}
body.page-dashboard .card-panel {
    border-radius: 14px;
    border: 1px solid rgba(71, 85, 105, 0.34);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.94) 0%, rgba(7, 13, 24, 0.96) 100%);
    box-shadow: 0 10px 24px rgba(2, 6, 23, 0.35);
}
body.page-dashboard .dashboard-v2__sidebar {
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: sticky;
    top: 82px;
    align-self: start;
}
body.page-dashboard .dashboard-v2__side-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(71, 85, 105, 0.32);
    background: rgba(15, 23, 42, 0.86);
    color: #cbd5e1;
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
}
body.page-dashboard .dashboard-v2__side-link--active {
    border-color: rgba(34, 197, 94, 0.45);
    color: #dcfce7;
    background: linear-gradient(180deg, rgba(22, 163, 74, 0.28) 0%, rgba(15, 23, 42, 0.9) 100%);
}
body.page-dashboard .dashboard-v2__level-card {
    margin-top: 10px;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid rgba(56, 189, 248, 0.28);
    background: linear-gradient(180deg, rgba(2, 6, 23, 0.84) 0%, rgba(7, 25, 46, 0.94) 100%);
    color: #e2e8f0;
    text-align: center;
}
body.page-dashboard .dashboard-v2__level-label {
    display: block;
    font-size: 0.76rem;
    color: #93c5fd;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
body.page-dashboard .dashboard-v2__level-num {
    display: block;
    margin-top: 2px;
    font-size: 2rem;
    color: #4ade80;
}
body.page-dashboard .dashboard-v2__level-name {
    margin: 4px 0 8px;
    font-size: 0.9rem;
    color: #d1fae5;
}
body.page-dashboard .dashboard-v2__xp {
    display: flex;
    justify-content: space-between;
    font-size: 0.76rem;
    color: #cbd5e1;
}
body.page-dashboard .dashboard-v2__xp-track {
    margin-top: 6px;
    height: 8px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.86);
    border: 1px solid rgba(148, 163, 184, 0.26);
    overflow: hidden;
}
body.page-dashboard .dashboard-v2__xp-track > span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #22c55e 0%, #84cc16 100%);
}
body.page-dashboard .dashboard-v2__content {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
body.page-dashboard .dashboard-v2__hero {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) repeat(3, minmax(0, 1fr));
    gap: 10px;
}
body.page-dashboard .dashboard-v2__hero article {
    padding: 12px 14px;
}
body.page-dashboard .dashboard-v2__hello h1 {
    margin: 0;
    font-size: 2rem;
    line-height: 1.08;
    color: #f8fafc;
}
body.page-dashboard .dashboard-v2__hello p {
    margin: 8px 0 0;
    color: #94a3b8;
    font-size: 1rem;
}
body.page-dashboard .dashboard-v2__chip {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #93c5fd;
    text-transform: uppercase;
}
body.page-dashboard .dashboard-v2__status-title,
body.page-dashboard .dashboard-v2__score-value,
body.page-dashboard .dashboard-v2__saving-value {
    display: block;
    margin-top: 6px;
    font-size: 1.9rem;
    line-height: 1.04;
    color: #22c55e;
}
body.page-dashboard .dashboard-v2__score-value small {
    font-size: 1rem;
    color: #94a3b8;
}
body.page-dashboard .dashboard-v2__hero p {
    margin: 4px 0 0;
    color: #cbd5e1;
    font-size: 0.9rem;
}
body.page-dashboard .dashboard-v2__kpis {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}
body.page-dashboard .dashboard-v2__kpi {
    padding: 11px 12px;
}
body.page-dashboard .dashboard-v2__kpi > span {
    font-size: 0.74rem;
    color: #93c5fd;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}
body.page-dashboard .dashboard-v2__kpi > strong {
    display: block;
    margin-top: 6px;
    font-size: 1.55rem;
    color: #f8fafc;
    line-height: 1.05;
}
body.page-dashboard .dashboard-v2__kpi > p {
    margin: 6px 0 0;
    font-size: 0.85rem;
    color: #94a3b8;
}
body.page-dashboard .dashboard-v2__focus {
    display: grid;
    grid-template-columns: 1.55fr 1fr;
    gap: 10px;
}
body.page-dashboard .dashboard-v2__priorities,
body.page-dashboard .dashboard-v2__insights {
    padding: 12px;
}
body.page-dashboard .dashboard-v2__priorities header h2,
body.page-dashboard .dashboard-v2__insights header h2 {
    margin: 0;
    font-size: 0.9rem;
    color: #f8fafc;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
body.page-dashboard .dashboard-v2__insights header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
body.page-dashboard .dashboard-v2__insights header a {
    color: #93c5fd;
    font-size: 0.8rem;
    text-decoration: none;
}
body.page-dashboard .dashboard-v2__priority-list,
body.page-dashboard .dashboard-v2__insight-list {
    margin-top: 10px;
    display: grid;
    gap: 8px;
}
body.page-dashboard .dashboard-v2__priority-item,
body.page-dashboard .dashboard-v2__insight-item {
    border-radius: 10px;
    padding: 10px 12px;
    text-decoration: none;
    color: #f8fafc;
    border: 1px solid rgba(71, 85, 105, 0.3);
    background: rgba(2, 6, 23, 0.56);
}
body.page-dashboard .dashboard-v2__priority-item strong,
body.page-dashboard .dashboard-v2__insight-item strong {
    display: block;
    font-size: 0.94rem;
    line-height: 1.2;
}
body.page-dashboard .dashboard-v2__priority-item p,
body.page-dashboard .dashboard-v2__insight-item p {
    margin: 4px 0 0;
    font-size: 0.82rem;
    color: #cbd5e1;
}
body.page-dashboard .dashboard-v2__priority-item--danger { border-color: rgba(248, 113, 113, 0.42); }
body.page-dashboard .dashboard-v2__priority-item--warn { border-color: rgba(250, 204, 21, 0.42); }
body.page-dashboard .dashboard-v2__priority-item--ok { border-color: rgba(74, 222, 128, 0.42); }
body.page-dashboard .dashboard-v2__analytics {
    display: grid;
    grid-template-columns: 1.1fr 1fr 0.85fr;
    gap: 10px;
}
body.page-dashboard .dashboard-v2__chart,
body.page-dashboard .dashboard-v2__progress {
    padding: 9px 10px;
}
body.page-dashboard .dashboard-v2__chart header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
body.page-dashboard .dashboard-v2__chart h3,
body.page-dashboard .dashboard-v2__progress h3 {
    margin: 0;
    font-size: 0.88rem;
    color: #f8fafc;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
body.page-dashboard .dashboard-v2__chart header span {
    font-size: 0.75rem;
    color: #94a3b8;
}
body.page-dashboard .dashboard-v2__bars {
    margin-top: 8px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    align-items: end;
    height: 84px;
}
body.page-dashboard .dashboard-v2__bars > span {
    display: block;
    height: var(--h);
    border-radius: 8px 8px 3px 3px;
    background: linear-gradient(180deg, #22c55e 0%, #15803d 100%);
}
body.page-dashboard .dashboard-v2__line {
    margin-top: 10px;
    height: 84px;
    border-radius: 12px;
    background:
        linear-gradient(160deg, transparent 0%, transparent 43%, rgba(34, 197, 94, 0.6) 44%, rgba(34, 197, 94, 0.6) 47%, transparent 48%) 0 0 / 100% 100% no-repeat,
        linear-gradient(180deg, rgba(15, 23, 42, 0.55) 0%, rgba(2, 6, 23, 0.8) 100%);
    border: 1px solid rgba(71, 85, 105, 0.34);
}
body.page-dashboard .dashboard-v2__progress {
    text-align: center;
}
body.page-dashboard .dashboard-v2__progress-ring {
    width: 94px;
    height: 94px;
    margin: 8px auto 4px;
    border-radius: 50%;
    border: 8px solid rgba(71, 85, 105, 0.34);
    border-top-color: #22c55e;
    border-right-color: #84cc16;
    display: grid;
    place-items: center;
}
body.page-dashboard .dashboard-v2__progress-ring > span {
    font-size: 1.6rem;
    font-weight: 800;
    color: #f8fafc;
}
body.page-dashboard .dashboard-v2__progress p {
    margin: 2px 0 6px;
    color: #cbd5e1;
    font-size: 0.82rem;
}
body.page-dashboard .dashboard-v2__quick-actions {
    padding: 10px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}
body.page-dashboard .dashboard-v2__qa {
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 10px;
    border: 1px solid rgba(71, 85, 105, 0.34);
    background: rgba(2, 6, 23, 0.58);
    color: #f8fafc;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 10px 12px;
}
@media (max-width: 1300px) {
    body.page-dashboard .dashboard-v2__layout { grid-template-columns: 1fr; }
    body.page-dashboard .dashboard-v2__sidebar { position: static; flex-direction: row; flex-wrap: wrap; }
    body.page-dashboard .dashboard-v2__level-card { width: 100%; }
}
@media (max-width: 1100px) {
    body.page-dashboard .dashboard-v2__hero { grid-template-columns: 1fr 1fr; }
    body.page-dashboard .dashboard-v2__kpis { grid-template-columns: repeat(2, 1fr); }
    body.page-dashboard .dashboard-v2__focus { grid-template-columns: 1fr; }
    body.page-dashboard .dashboard-v2__analytics { grid-template-columns: 1fr; }
    body.page-dashboard .dashboard-v2__quick-actions { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
    body.page-dashboard .dashboard-v2__hero { grid-template-columns: 1fr; }
    body.page-dashboard .dashboard-v2__kpis { grid-template-columns: 1fr; }
    body.page-dashboard .dashboard-v2__quick-actions { grid-template-columns: 1fr; }
}

body.page-budgets .expense-account-presup-import-dropdown,
body.page-expenses .expense-account-presup-import-dropdown {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
}
body.page-budgets .expense-account-presup-import-dropdown__menu,
body.page-expenses .expense-account-presup-import-dropdown__menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: min(420px, 88vw);
    z-index: 60;
    padding: 6px;
    border-radius: 12px;
    background: linear-gradient(180deg, #25252c 0%, #1c1c22 100%);
    border: 1px solid rgba(74, 222, 128, 0.45);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}
body.page-budgets .expense-account-presup-import-dropdown__option,
body.page-expenses .expense-account-presup-import-dropdown__option {
    width: 100%;
    border: 0;
    background: transparent;
    color: #f4f4f5;
    font-size: 0.93rem;
    font-weight: 600;
    text-align: left;
    border-radius: 8px;
    padding: 10px 12px;
    cursor: pointer;
}
body.page-budgets .expense-account-presup-import-dropdown__option:hover,
body.page-expenses .expense-account-presup-import-dropdown__option:hover {
    background: rgba(74, 222, 128, 0.14);
    color: #dcfce7;
}
body.page-budgets .expense-account-presup-import-dropdown__option--select-month,
body.page-expenses .expense-account-presup-import-dropdown__option--select-month {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: default;
}
body.page-budgets .expense-account-presup-import-dropdown__option--select-month:hover,
body.page-expenses .expense-account-presup-import-dropdown__option--select-month:hover {
    background: transparent;
    color: #f4f4f5;
}
body.page-budgets .expense-account-presup-import-dropdown__label,
body.page-expenses .expense-account-presup-import-dropdown__label {
    flex: 1 1 auto;
    min-width: 110px;
}
body.page-budgets .expense-account-presup-import-dropdown__field,
body.page-expenses .expense-account-presup-import-dropdown__field {
    width: 68px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid rgba(161, 161, 170, 0.35);
    background: rgba(9, 9, 11, 0.45);
    color: #f4f4f5;
    font-size: 0.88rem;
    font-weight: 600;
    padding: 0 8px;
}
body.page-budgets .expense-account-presup-import-dropdown__field:focus,
body.page-expenses .expense-account-presup-import-dropdown__field:focus {
    outline: none;
    border-color: rgba(74, 222, 128, 0.9);
    box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.2);
}
body.page-budgets .expense-account-presup-import-dropdown__field--year,
body.page-expenses .expense-account-presup-import-dropdown__field--year {
    width: 86px;
}
body.page-budgets .expense-account-presup-import-dropdown__apply,
body.page-expenses .expense-account-presup-import-dropdown__apply {
    border: 1px solid rgba(74, 222, 128, 0.45);
    background: rgba(74, 222, 128, 0.15);
    color: #dcfce7;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 8px 10px;
    cursor: pointer;
}
body.page-budgets .expense-account-presup-import-dropdown__apply:hover,
body.page-expenses .expense-account-presup-import-dropdown__apply:hover {
    background: rgba(74, 222, 128, 0.24);
}
body.page-budgets .expense-account-presup-import-dropdown__error,
body.page-expenses .expense-account-presup-import-dropdown__error {
    margin: 8px 2px 0;
    color: #fecaca;
    font-size: 0.84rem;
    text-align: right;
}

body.page-expenses .expense-account-presup-import-dropdown__prev-block {
    padding-bottom: 4px;
    margin-bottom: 6px;
    border-bottom: 1px solid rgba(74, 222, 128, 0.2);
}
body.page-expenses .expense-account-presup-import-dropdown__section-label {
    margin: 2px 12px 6px;
    font-size: 0.72rem;
    font-weight: 700;
    color: rgba(226, 232, 240, 0.55);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
body.page-expenses .expense-account-presup-import-dropdown__option--muted {
    font-weight: 500;
    color: rgba(244, 244, 245, 0.88);
    font-size: 0.88rem;
}