/* ===== LOGIN ===== */
    #login-screen {
        position: fixed;
        inset: 0;
        z-index: 9999;
        background: var(--sidebar-bg);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1.5rem;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    #login-screen.open-overlay {
        position: relative
    }


    #login-screen.hidden {
        display: none
    }

    .login-card {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--r-xl);
        box-shadow: var(--sh-lg);
        width: 100%;
        max-width: 380px;
        padding: 2.5rem 2rem 2rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0;
    }

    .login-logo {
        margin-bottom: 1.25rem
    }

    .login-title {
        font-size: 1.35rem;
        font-weight: 700;
        color: var(--text);
        margin-bottom: .25rem;
        text-align: center
    }

    .login-sub {
        font-size: .8rem;
        color: var(--text-muted);
        margin-bottom: 2rem;
        text-align: center
    }

    .login-form {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: .75rem
    }

    .login-form label {
        font-size: .8rem;
        font-weight: 600;
        color: var(--text-muted)
    }

    .login-form .field {
        width: 100%;
        padding: .6rem .85rem;
        font-size: .9rem
    }

    .login-input-wrap {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: .35rem
    }

    .login-input-inner {
        position: relative
    }

    .login-input-inner .field {
        padding-right: 2.5rem
    }

    .toggle-pass {
        position: absolute;
        right: .65rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--text-faint);
        cursor: pointer;
        display: flex;
        align-items: center;
        padding: .2rem
    }

    .toggle-pass:hover {
        color: var(--text-muted)
    }

    .toggle-pass svg {
        width: 15px;
        height: 15px
    }

    .btn-login {
        width: 100%;
        padding: .65rem;
        font-size: .95rem;
        font-weight: 700;
        margin-top: .25rem;
        border-radius: var(--r-md);
        background: var(--primary);
        color: #fff;
        border: none;
        cursor: pointer;
        transition: background var(--t)
    }

    .btn-login:hover {
        background: var(--primary-h)
    }

    .btn-login:active {
        background: var(--primary-a)
    }

    .login-error {
        font-size: .8rem;
        color: var(--error);
        background: var(--error-hi);
        border-radius: var(--r-md);
        padding: .5rem .75rem;
        display: none;
        align-items: center;
        gap: .4rem
    }

    .login-error.show {
        display: flex
    }

    .login-error svg {
        width: 14px;
        height: 14px;
        flex-shrink: 0
    }

    .login-divider {
        width: 100%;
        height: 1px;
        background: var(--divider);
        margin: .5rem 0
    }

    .login-hint {
        font-size: .72rem;
        color: var(--text-faint);
        text-align: center;
        margin-top: .75rem
    }

    .login-bg-deco {
        position: absolute;
        inset: 0;
        overflow: hidden;
        pointer-events: none;
        z-index: 0
    }

    .login-bg-deco span {
        position: absolute;
        border-radius: 50%;
        background: rgba(218, 170, 0, .06);
        animation: floatDeco 8s ease-in-out infinite
    }

    .login-bg-deco span:nth-child(1) {
        width: 400px;
        height: 400px;
        top: -120px;
        right: -100px;
        animation-delay: 0s
    }

    .login-bg-deco span:nth-child(2) {
        width: 280px;
        height: 280px;
        bottom: -80px;
        left: -60px;
        animation-delay: 3s
    }

    .login-bg-deco span:nth-child(3) {
        width: 180px;
        height: 180px;
        top: 40%;
        left: 30%;
        animation-delay: 5s;
        background: rgba(218, 170, 0, .03)
    }

    @keyframes floatDeco {

        0%,
        100% {
            transform: translateY(0) scale(1)
        }

        50% {
            transform: translateY(-18px) scale(1.03)
        }
    }

    #login-screen {
        position: relative
    }

    .login-card {
        position: relative;
        z-index: 1
    }

    /* ===== TOKENS ===== */
    :root,
    [data-theme="light"] {
        --bg: #faf8f3;
        --surface: #fffdf8;
        --surface2: #ffffff;
        --surface-off: #f5f0e0;
        --divider: #e8e0cc;
        --border: #ddd6c0;
        --text: #28200e;
        --text-muted: #7a7060;
        --text-faint: #b8ae9a;
        --text-inv: #fffdf8;
        --primary: #9a6e00;
        --primary-h: #7d5900;
        --primary-a: #5e4200;
        --primary-hi: #fdf0c0;
        --success: #2a7a38;
        --success-hi: #d4f0d8;
        --error: #c0392b;
        --error-hi: #fde8e6;
        --warning: #c07000;
        --warning-hi: #fef3c0;
        --sidebar-bg: #1c1609;
        --sidebar-text: #e4d090;
        --sidebar-muted: #9a8860;
        --sidebar-active: rgba(218, 170, 0, .15);
        --sidebar-active-txt: #ffd054;
        --sidebar-hover: rgba(255, 255, 255, .04);
        --tx: var(--text);
        --bg-page: var(--bg);
        --r-sm: .375rem;
        --r-md: .5rem;
        --r-lg: .75rem;
        --r-xl: 1rem;
        --r-full: 9999px;
        --sh-sm: 0 1px 3px rgba(40, 32, 14, .08);
        --sh-md: 0 4px 14px rgba(40, 32, 14, .1);
        --sh-lg: 0 8px 28px rgba(40, 32, 14, .13);
        --t: 180ms cubic-bezier(.16, 1, .3, 1);
        --font: 'Plus Jakarta Sans', 'Inter', sans-serif;
        --sidebar-w: 240px;
    }

    [data-theme="dark"] {
        --bg: #130f05;
        --surface: #1a1508;
        --surface2: #21190c;
        --surface-off: #1e1a0c;
        --divider: #2c2410;
        --border: #3a3018;
        --text: #e8dabb;
        --text-muted: #9a9070;
        --text-faint: #605840;
        --text-inv: #1a1508;
        --primary: #e8a800;
        --primary-h: #ffc400;
        --primary-a: #ffe040;
        --primary-hi: #3a2c00;
        --success: #4cac5c;
        --success-hi: #1a3020;
        --error: #e06050;
        --error-hi: #3a1810;
        --warning: #e8a800;
        --warning-hi: #3a2800;
        --sidebar-bg: #0c0a04;
        --sidebar-text: #d4c080;
        --sidebar-muted: #8a7850;
        --sidebar-active: rgba(218, 170, 0, .12);
        --sidebar-active-txt: #ffd054;
        --sidebar-hover: rgba(255, 255, 255, .04);
        --sh-sm: 0 1px 3px rgba(0, 0, 0, .35);
        --sh-md: 0 4px 14px rgba(0, 0, 0, .45);
        --sh-lg: 0 8px 28px rgba(0, 0, 0, .55);
    }

    @media(prefers-color-scheme:dark) {
        :root:not([data-theme]) {
            --bg: #130f05;
            --surface: #1a1508;
            --surface2: #21190c;
            --surface-off: #1e1a0c;
            --divider: #2c2410;
            --border: #3a3018;
            --text: #e8dabb;
            --text-muted: #9a9070;
            --text-faint: #605840;
            --text-inv: #1a1508;
            --primary: #e8a800;
            --primary-h: #ffc400;
            --primary-a: #ffe040;
            --primary-hi: #3a2c00;
            --success: #4cac5c;
            --success-hi: #1a3020;
            --error: #e06050;
            --error-hi: #3a1810;
            --sidebar-bg: #0c0a04;
            --sidebar-text: #d4c080;
            --sidebar-muted: #8a7850;
            --sidebar-active: rgba(218, 170, 0, .12);
            --sidebar-active-txt: #ffd054;
            --sidebar-hover: rgba(255, 255, 255, .04);
            --sh-sm: 0 1px 3px rgba(0, 0, 0, .35);
            --sh-md: 0 4px 14px rgba(0, 0, 0, .45);
            --sh-lg: 0 8px 28px rgba(0, 0, 0, .55);
        }
    }

    /* ===== BASE ===== */
    *,
    *::before,
    *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0
    }

    html {
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility
    }

    body {
        min-height: 100dvh;
        font-family: var(--font);
        font-size: 1rem;
        color: var(--text);
        background: var(--bg);
        display: flex;
        overflow: hidden
    }

    button {
        cursor: pointer;
        background: none;
        border: none;
        font: inherit;
        color: inherit
    }

    input,
    select,
    textarea {
        font: inherit;
        color: var(--text)
    }

    img {
        display: block;
        max-width: 100%;
        height: auto
    }

    table {
        border-collapse: collapse;
        width: 100%
    }

    /* ===== SIDEBAR ===== */
    .sidebar {
        width: var(--sidebar-w);
        min-height: 100dvh;
        background: var(--sidebar-bg);
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        transition: width var(--t)
    }

    .sidebar-logo {
        padding: 1.5rem 1.25rem 1rem;
        display: flex;
        align-items: center;
        gap: .75rem;
        border-bottom: 1px solid rgba(255, 255, 255, .06)
    }

    .logo-icon {
        width: 36px;
        height: 36px;
        flex-shrink: 0
    }

    .logo-text {
        font-size: 1.15rem;
        font-weight: 700;
        color: var(--sidebar-active-txt);
        letter-spacing: -.01em
    }

    .logo-sub {
        font-size: .7rem;
        color: var(--sidebar-muted);
        font-weight: 400;
        letter-spacing: .04em;
        text-transform: uppercase;
        margin-top: 1px
    }

    .sidebar-nav {
        flex: 1;
        padding: .75rem .625rem;
        display: flex;
        flex-direction: column;
        gap: .125rem
    }

    .nav-label {
        font-size: .65rem;
        text-transform: uppercase;
        letter-spacing: .08em;
        color: var(--sidebar-muted);
        padding: .5rem .625rem .25rem;
        font-weight: 600
    }

    .nav-item {
        display: flex;
        align-items: center;
        gap: .625rem;
        padding: .5rem .75rem;
        border-radius: var(--r-md);
        color: var(--sidebar-muted);
        font-size: .875rem;
        font-weight: 500;
        cursor: pointer;
        transition: background var(--t), color var(--t);
        border: none;
        width: 100%;
        text-align: left;
        background: none
    }

    .nav-item:hover {
        background: var(--sidebar-hover);
        color: var(--sidebar-text)
    }

    .nav-item.active {
        background: var(--sidebar-active);
        color: var(--sidebar-active-txt)
    }

    .nav-item svg {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
        stroke-width: 2
    }

    .nav-item .nav-badge {
        margin-left: auto;
        background: var(--primary);
        color: #fff;
        font-size: .65rem;
        padding: .1rem .4rem;
        border-radius: var(--r-full);
        font-weight: 600
    }

    .sidebar-footer {
        padding: .75rem .625rem;
        border-top: 1px solid rgba(255, 255, 255, .06);
        display: flex;
        gap: .5rem
    }

    .icon-btn-sidebar {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: .5rem;
        border-radius: var(--r-md);
        color: var(--sidebar-muted);
        transition: background var(--t), color var(--t)
    }

    .icon-btn-sidebar:hover {
        background: var(--sidebar-hover);
        color: var(--sidebar-text)
    }

    .icon-btn-sidebar svg {
        width: 16px;
        height: 16px
    }

    /* ===== MAIN ===== */
    .main {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        min-width: 0
    }

    .topbar {
        min-height: 56px;
        background: var(--surface);
        border-bottom: 1px solid var(--divider);
        display: flex;
        align-items: center;
        padding: 0 1.5rem;
        gap: 1rem;
        flex-shrink: 0;
        box-shadow: var(--sh-sm);
        flex-wrap: wrap;
        row-gap: .5rem;
        padding-top: .5rem;
        padding-bottom: .5rem
    }


    .topbar-title {
        font-size: 1rem;
        font-weight: 700;
        color: var(--text);
        flex: 1
    }

    .topbar-actions {
        display: flex;
        align-items: center;
        gap: .5rem
    }

    .content {
        flex: 1;
        overflow-y: auto;
        padding: 1.5rem;
        background: var(--bg)
    }

    /* ===== BUTTONS ===== */
    .btn {
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        padding: .45rem .9rem;
        border-radius: var(--r-md);
        font-size: .875rem;
        font-weight: 600;
        cursor: pointer;
        transition: background var(--t), color var(--t), box-shadow var(--t);
        border: none;
        white-space: nowrap
    }

    .btn svg {
        width: 15px;
        height: 15px;
        stroke-width: 2.2;
        flex-shrink: 0
    }

    .btn-primary {
        background: var(--primary);
        color: #fff
    }

    .btn-primary:hover {
        background: var(--primary-h)
    }

    .btn-primary:active {
        background: var(--primary-a)
    }

    .btn-secondary {
        background: var(--surface-off);
        color: var(--text);
        border: 1px solid var(--border)
    }

    .btn-secondary:hover {
        background: var(--divider)
    }

    .btn-danger {
        background: var(--error-hi);
        color: var(--error)
    }

    .btn-danger:hover {
        background: var(--error);
        color: #fff
    }

    .btn-success {
        background: var(--success);
        color: #fff
    }

    .btn-success:hover {
        background: #1f5c2a
    }

    .btn-ghost {
        background: transparent;
        color: var(--text-muted);
        padding: .4rem .6rem
    }

    .btn-ghost:hover {
        background: var(--surface-off);
        color: var(--text)
    }

    .btn-sm {
        padding: .3rem .65rem;
        font-size: .8rem
    }

    .btn-sm svg {
        width: 13px;
        height: 13px
    }

    /* ===== CARDS ===== */
    .card {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--r-lg);
        box-shadow: var(--sh-sm)
    }

    .card-header {
        padding: 1rem 1.25rem;
        border-bottom: 1px solid var(--divider);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem
    }

    .card-title {
        font-size: .9rem;
        font-weight: 700;
        color: var(--text)
    }

    .card-body {
        padding: 1.25rem
    }

    /* ===== KPI CARDS ===== */
    .kpi-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 1rem;
        margin-bottom: 1.5rem
    }

    .kpi-card {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--r-lg);
        padding: 1.1rem 1.25rem;
        box-shadow: var(--sh-sm)
    }

    .kpi-label {
        font-size: .75rem;
        font-weight: 600;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: .05em;
        margin-bottom: .4rem;
        display: flex;
        align-items: center;
        gap: .35rem
    }

    .kpi-label svg {
        width: 13px;
        height: 13px
    }

    .kpi-value {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--text);
        font-variant-numeric: tabular-nums
    }

    .kpi-sub {
        font-size: .75rem;
        color: var(--text-muted);
        margin-top: .15rem
    }

    .kpi-card.kpi-income .kpi-value {
        color: var(--success)
    }

    .kpi-card.kpi-expense .kpi-value {
        color: var(--error)
    }

    .kpi-card.kpi-gold .kpi-value {
        color: var(--primary)
    }

    /* ===== TABLE ===== */
    .table-wrap {
        overflow-x: auto;
        border-radius: var(--r-lg);
        border: 1px solid var(--border);
        background: var(--surface);
        box-shadow: var(--sh-sm)
    }

    .data-table {
        width: 100%
    }

    .data-table thead tr {
        border-bottom: 1px solid var(--divider)
    }

    .data-table th {
        padding: .65rem 1rem;
        text-align: left;
        font-size: .75rem;
        font-weight: 700;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: .05em;
        white-space: nowrap
    }

    .data-table td {
        padding: .75rem 1rem;
        font-size: .875rem;
        border-bottom: 1px solid var(--divider);
        color: var(--text)
    }

    .data-table tbody tr:last-child td {
        border-bottom: none
    }

    .data-table tbody tr:hover td {
        background: var(--surface-off)
    }

    .data-table .actions {
        display: flex;
        gap: .3rem;
        justify-content: flex-end
    }

    /* ===== BADGES ===== */
    .badge {
        display: inline-flex;
        align-items: center;
        gap: .25rem;
        padding: .2rem .55rem;
        border-radius: var(--r-full);
        font-size: .7rem;
        font-weight: 700;
        letter-spacing: .02em
    }

    .badge-gold {
        background: var(--primary-hi);
        color: var(--primary)
    }

    .badge-green {
        background: var(--success-hi);
        color: var(--success)
    }

    .badge-red {
        background: var(--error-hi);
        color: var(--error)
    }

    .badge-gray {
        background: var(--surface-off);
        color: var(--text-muted)
    }

    .badge-warning {
        background: var(--warning-hi);
        color: var(--warning)
    }

    /* ===== FORMS ===== */
    .form-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem
    }

    .form-grid.cols-1 {
        grid-template-columns: 1fr
    }

    .form-group {
        display: flex;
        flex-direction: column;
        gap: .35rem
    }

    .form-group.col-span-2 {
        grid-column: span 2
    }

    label {
        font-size: .8rem;
        font-weight: 600;
        color: var(--text-muted)
    }

    .field {
        padding: .5rem .75rem;
        border: 1px solid var(--border);
        border-radius: var(--r-md);
        background: var(--surface2);
        color: var(--text);
        font-size: .875rem;
        transition: border-color var(--t), box-shadow var(--t);
        width: 100%
    }

    .field:focus {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(154, 110, 0, .15)
    }

    select.field {
        cursor: pointer
    }

    textarea.field {
        resize: vertical;
        min-height: 72px
    }

    .field::placeholder {
        color: var(--text-faint)
    }

    /* ===== MODAL ===== */
    .overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .5);
        z-index: 100;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 1rem;
        backdrop-filter: blur(2px)
    }

    .overlay.open {
        display: flex
    }

    .modal {
        background: var(--surface);
        border-radius: var(--r-xl);
        box-shadow: var(--sh-lg);
        width: 100%;
        max-width: 520px;
        max-height: 90dvh;
        overflow-y: auto;
        border: 1px solid var(--border)
    }

    .modal-header {
        padding: 1.25rem 1.5rem;
        border-bottom: 1px solid var(--divider);
        display: flex;
        align-items: center;
        justify-content: space-between
    }

    .modal-title {
        font-size: 1rem;
        font-weight: 700;
        color: var(--text)
    }

    .modal-close {
        color: var(--text-muted);
        padding: .25rem;
        border-radius: var(--r-sm)
    }

    .modal-close:hover {
        background: var(--surface-off);
        color: var(--text)
    }

    .modal-close svg {
        width: 18px;
        height: 18px
    }

    .modal-body {
        padding: 1.5rem;
        display: flex;
        flex-direction: column;
        gap: 1rem
    }

    .modal-footer {
        padding: 1rem 1.5rem;
        border-top: 1px solid var(--divider);
        display: flex;
        justify-content: flex-end;
        gap: .5rem
    }

    /* ===== TOAST ===== */
    #toast-wrap {
        position: fixed;
        bottom: 1.5rem;
        right: 1.5rem;
        z-index: 999;
        display: flex;
        flex-direction: column;
        gap: .5rem;
        pointer-events: none
    }

    .toast {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--r-lg);
        padding: .75rem 1rem;
        box-shadow: var(--sh-lg);
        font-size: .85rem;
        font-weight: 500;
        display: flex;
        align-items: center;
        gap: .5rem;
        min-width: 220px;
        animation: toastIn .25s ease;
        pointer-events: auto
    }

    .toast.success {
        border-left: 3px solid var(--success);
        color: var(--text)
    }

    .toast.error {
        border-left: 3px solid var(--error);
        color: var(--text)
    }

    .toast.info {
        border-left: 3px solid var(--primary);
        color: var(--text)
    }

    @keyframes toastIn {
        from {
            opacity: 0;
            transform: translateX(1rem)
        }

        to {
            opacity: 1;
            transform: translateX(0)
        }
    }

    /* ===== COMPONENTS ===== */
    .section-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 1.25rem;
        gap: 1rem
    }

    .section-title {
        font-size: 1.1rem;
        font-weight: 700;
        color: var(--text)
    }

    .section-sub {
        font-size: .8rem;
        color: var(--text-muted);
        margin-top: .1rem
    }

    .empty-state {
        text-align: center;
        padding: 3rem 1.5rem;
        color: var(--text-muted)
    }

    .empty-state svg {
        width: 40px;
        height: 40px;
        margin: 0 auto .75rem;
        color: var(--text-faint)
    }

    .empty-state h3 {
        font-size: .95rem;
        font-weight: 600;
        color: var(--text);
        margin-bottom: .35rem
    }

    .empty-state p {
        font-size: .8rem
    }

    .divider {
        height: 1px;
        background: var(--divider);
        margin: .75rem 0
    }

    .tag-comp {
        display: inline-flex;
        align-items: center;
        background: var(--surface-off);
        border: 1px solid var(--border);
        border-radius: var(--r-sm);
        padding: .2rem .5rem;
        font-size: .75rem;
        color: var(--text-muted);
        gap: .25rem;
        margin: .15rem
    }

    .comp-list {
        display: flex;
        flex-wrap: wrap;
        gap: .15rem
    }

    .chip-row {
        display: flex;
        flex-wrap: wrap;
        gap: .25rem;
        margin-top: .25rem
    }

    /* balance colors */
    .positive {
        color: var(--success) !important
    }

    .negative {
        color: var(--error) !important
    }

    .neutral {
        color: var(--text-muted) !important
    }

    /* page tabs */
    .tabs {
        display: flex;
        gap: .25rem;
        margin-bottom: 1.25rem;
        border-bottom: 1px solid var(--divider);
        padding-bottom: 0
    }

    .tab {
        padding: .5rem .9rem;
        font-size: .85rem;
        font-weight: 600;
        color: var(--text-muted);
        cursor: pointer;
        border-bottom: 2px solid transparent;
        margin-bottom: -1px;
        transition: color var(--t), border-color var(--t)
    }

    .tab.active {
        color: var(--primary);
        border-bottom-color: var(--primary)
    }

    .tab:hover:not(.active) {
        color: var(--text)
    }

    /* scroll */
    .content::-webkit-scrollbar {
        width: 6px
    }

    .content::-webkit-scrollbar-track {
        background: transparent
    }

    .content::-webkit-scrollbar-thumb {
        background: var(--divider);
        border-radius: 3px
    }

    /* comp row in modal */
    .comp-row {
        display: grid;
        grid-template-columns: 1fr .8fr auto;
        gap: .5rem;
        align-items: center;
        padding: .5rem;
        background: var(--surface-off);
        border-radius: var(--r-md);
        margin-bottom: .35rem
    }

    /* stock indicator */
    .stock-bar {
        height: 4px;
        border-radius: 2px;
        background: var(--divider);
        margin-top: .3rem;
        overflow: hidden
    }

    .stock-fill {
        height: 100%;
        border-radius: 2px;
        background: var(--success);
        transition: width .3s
    }

    /* dashboard activity */
    .activity-list {
        display: flex;
        flex-direction: column;
        gap: 0
    }

    .activity-item {
        display: flex;
        align-items: center;
        gap: .75rem;
        padding: .65rem 0;
        border-bottom: 1px solid var(--divider)
    }

    .activity-item:last-child {
        border-bottom: none
    }

    .activity-icon {
        width: 32px;
        height: 32px;
        border-radius: var(--r-full);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0
    }

    .activity-icon svg {
        width: 15px;
        height: 15px
    }

    .activity-icon.income {
        background: var(--success-hi);
        color: var(--success)
    }

    .activity-icon.expense {
        background: var(--error-hi);
        color: var(--error)
    }

    .activity-icon.prod {
        background: var(--primary-hi);
        color: var(--primary)
    }

    .activity-info {
        flex: 1;
        min-width: 0
    }

    .activity-name {
        font-size: .85rem;
        font-weight: 600;
        color: var(--text);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }

    .activity-date {
        font-size: .75rem;
        color: var(--text-muted)
    }

    .activity-amount {
        font-size: .875rem;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
        flex-shrink: 0
    }

    /* col filter row */
    .filter-row {
        display: flex;
        gap: .5rem;
        margin-bottom: 1rem;
        flex-wrap: wrap;
        align-items: center
    }

    .filter-row .field {
        max-width: 180px;
        padding: .35rem .65rem;
        font-size: .8rem
    }

    /* ===== RESPONSIVE ===== */

    /* Base — desktop y móvil comparten esto */
    .main {
        display: flex;
        flex-direction: column;
        flex: 1;
        overflow: hidden;
        min-width: 0;
    }

    .content {
        flex: 1;
        overflow-y: auto;
        padding: 1.5rem;
    }

    /* Tablet */
    @media(min-width:769px) and (max-width:1024px) {
        :root {
            --sidebar-w: 200px
        }

        .logo-text {
            font-size: 1rem
        }

        .nav-item {
            font-size: .8rem;
            padding: .45rem .65rem
        }

        .content {
            padding: 1.25rem
        }

        .kpi-grid {
            grid-template-columns: repeat(2, 1fr)
        }
    }

    /* Móvil */
    @media(max-width:768px) {
        :root {
            --sidebar-w: 240px
        }

        /* layout */
        body {
            overflow: hidden;
            height: 100dvh
        }

        .main {
            width: 100vw;
            height: 100dvh
        }

        .content {
            padding: 1rem;
            height: 0;
            -webkit-overflow-scrolling: touch
        }

        /* sidebar oculto por defecto en móvil */
        .sidebar {
            display: none
        }

        .sidebar.mobile-open {
            display: flex !important
        }

        /* topbar */
        .topbar {
            padding: .5rem 1rem;
            gap: .4rem;
            min-height: 56px
        }

        .topbar-title {
            width: 100%;
            order: -1
        }

        .topbar-actions {
            display: flex;
            flex-wrap: wrap;
            gap: .35rem;
            width: 100%
        }

        .topbar-actions .btn {
            flex-shrink: 0
        }

        .topbar-actions .dropdown {
            flex-shrink: 0
        }


        .btn-sm {
            padding: .35rem .55rem
        }

        /* mostrar botón hamburguesa */
        #menu-toggle {
            display: flex !important
        }

        /* kpi */
        .kpi-grid {
            grid-template-columns: 1fr 1fr;
            gap: .65rem
        }

        .kpi-value {
            font-size: 1.2rem
        }

        .kpi-card {
            padding: .85rem 1rem
        }

        /* dashboard grid → columna */
        #content>div[style*="grid-template-columns:1fr 1fr"] {
            display: flex !important;
            flex-direction: column !important;
            gap: 1rem !important;
        }

        /* tablas */
        .table-wrap {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch
        }

        .data-table th,
        .data-table td {
            padding: .55rem .75rem;
            font-size: .78rem;
            white-space: nowrap
        }

        /* formularios */
        .form-grid {
            grid-template-columns: 1fr
        }

        .form-group.col-span-2 {
            grid-column: span 1
        }

        .field {
            font-size: .9rem
        }

        /* modal desde abajo */
        .overlay {
            align-items: flex-end;
            padding: 0
        }

        .modal {
            border-radius: var(--r-xl) var(--r-xl) 0 0;
            max-width: 100%;
            max-height: 92dvh;
            width: 100%;
        }

        .modal-footer .btn {
            flex: 1;
            justify-content: center
        }

        /* comp-row */
        .comp-row {
            grid-template-columns: 1fr .7fr auto
        }

        /* section header */
        .section-header {
            flex-direction: column;
            align-items: flex-start;
            gap: .5rem
        }

        /* toast */
        #toast-wrap {
            left: 1rem;
            right: 1rem;
            bottom: 1rem
        }

        .toast {
            min-width: unset;
            width: 100%
        }

        /* login */
        #login-screen {
            padding: 1.25rem;
            align-items: center;
            overflow-y: auto
        }

        .login-card {
            width: 100%;
            max-width: 100%;
            padding: 1.75rem 1.25rem 1.5rem
        }

        .login-bg-deco {
            display: none
        }
    }

    /* Móviles muy pequeños */
    @media(max-width:380px) {
        .kpi-grid {
            grid-template-columns: 1fr
        }

        .kpi-value {
            font-size: 1.1rem
        }

        .topbar-title {
            font-size: .8rem
        }
    }


    /* Sidebar móvil overlay */
    .sidebar-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .5);
        z-index: 49;
        backdrop-filter: blur(2px);
    }

    .sidebar-backdrop.open {
        display: block
    }

    .sidebar.mobile-open {
        display: flex !important;
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        width: 240px !important;
        z-index: 50;
        box-shadow: var(--sh-lg);
    }

    @media(max-width:768px) {
        #menu-toggle {
            display: flex !important
        }
    }

    /* ===== DROPDOWN EXPORT ===== */
    .dropdown {
        position: relative;
        display: inline-flex
    }

    .dropdown-menu {
        position: absolute;
        top: calc(100% + .35rem);
        right: 0;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--r-lg);
        box-shadow: var(--sh-lg);
        min-width: 160px;
        z-index: 200;
        overflow: hidden;
        display: none;
        flex-direction: column;
    }

    .dropdown-menu.open {
        display: flex
    }

    .dropdown-item {
        display: flex;
        align-items: center;
        gap: .5rem;
        padding: .55rem 1rem;
        font-size: .85rem;
        font-weight: 500;
        color: var(--text);
        cursor: pointer;
        border: none;
        background: none;
        width: 100%;
        text-align: left;
        transition: background var(--t);
    }

    .dropdown-item:hover {
        background: var(--surface-off)
    }

    .dropdown-item svg {
        width: 14px;
        height: 14px;
        flex-shrink: 0;
        color: var(--text-muted)
    }

    .dropdown-divider {
        height: 1px;
        background: var(--divider);
        margin: .25rem 0
    }

    /* ===== FOTOS PRODUCTOS ===== */
    .prod-img {
        width: 44px;
        height: 44px;
        border-radius: var(--r-md);
        object-fit: cover;
        border: 1px solid var(--border);
        background: var(--surface-off);
        flex-shrink: 0;
    }

    .prod-img-placeholder {
        width: 44px;
        height: 44px;
        border-radius: var(--r-md);
        background: var(--surface-off);
        border: 1px solid var(--border);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        color: var(--text-faint);
    }

    .prod-img-placeholder svg {
        width: 18px;
        height: 18px
    }

    .img-upload-wrap {
        border: 2px dashed var(--border);
        border-radius: var(--r-lg);
        padding: 1.25rem;
        text-align: center;
        cursor: pointer;
        transition: border-color var(--t), background var(--t);
        position: relative;
    }

    .img-upload-wrap:hover {
        border-color: var(--primary);
        background: var(--primary-hi)
    }

    .img-upload-wrap input[type=file] {
        position: absolute;
        inset: 0;
        opacity: 0;
        cursor: pointer;
        width: 100%;
        height: 100%
    }

    .img-upload-wrap svg {
        width: 24px;
        height: 24px;
        color: var(--text-faint);
        margin: 0 auto .5rem
    }

    .img-upload-wrap p {
        font-size: .8rem;
        color: var(--text-muted);
        margin: 0
    }

    .img-preview {
        width: 100%;
        max-height: 160px;
        object-fit: contain;
        border-radius: var(--r-md);
        border: 1px solid var(--border);
        margin-bottom: .5rem;
        display: none;
    }

    .img-preview.show {
        display: block
    }