:root {
    --neon-bg: #07070f;
    --neon-purple: #c84bff;
    --neon-blue: #3ee0ff;
    --neon-text: #eef2ff;
    --neon-muted: #8b8eaa;
    --neon-card: #141422;
    --neon-line: rgba(200, 75, 255, .22);
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

.neon-body,
.admin-body {
    min-height: 100vh;
    margin: 0;
    color: var(--neon-text);
    background:
        radial-gradient(circle at 12% -8%, rgba(200, 75, 255, .22), transparent 34%),
        radial-gradient(circle at 92% 6%, rgba(62, 224, 255, .16), transparent 30%),
        var(--neon-bg);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.neon-shell { min-height: 100vh; display: flex; flex-direction: column; }
.neon-main {
    width: min(520px, calc(100% - 28px));
    margin: 0 auto;
    padding: 24px 0 96px;
    flex: 1;
}
.neon-main-step { display: flex; flex-direction: column; justify-content: center; min-height: calc(100vh - 80px); }
.neon-main:not(.neon-main-step) { width: min(1100px, calc(100% - 28px)); }

.neon-page-head { margin-bottom: 18px; }
.neon-kicker {
    margin: 0 0 6px;
    color: var(--neon-blue);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.neon-page-head h1 {
    margin: 0;
    font-size: clamp(1.35rem, 4vw, 1.8rem);
    letter-spacing: -.03em;
}

.hello-block { margin-bottom: 20px; text-align: center; }
.hello-hi {
    margin: 0 0 6px;
    color: var(--neon-purple);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.hello-title {
    margin: 0;
    font-size: clamp(1.45rem, 6vw, 2rem);
    line-height: 1.2;
    letter-spacing: -.03em;
}

.neon-toast {
    position: fixed;
    top: 14px;
    left: 50%;
    z-index: 80;
    transform: translateX(-50%);
    min-width: min(360px, calc(100% - 24px));
    padding: 11px 14px;
    border: 1px solid rgba(62, 224, 255, .4);
    border-radius: 12px;
    background: rgba(8, 10, 18, .94);
    box-shadow: 0 0 22px rgba(62, 224, 255, .18);
    color: #eaffff;
    font-size: .9rem;
    font-weight: 700;
    text-align: center;
    animation: toast-in .22s ease;
}
.neon-toast.hide { opacity: 0; transform: translate(-50%, -10px); transition: .35s ease; }
.toast-error { border-color: rgba(255, 90, 140, .45); }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, -10px); } }

.step-card {
    padding: 20px 18px 18px;
    border: 1px solid var(--neon-line);
    border-radius: 18px;
    background: var(--neon-card);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .28);
}
.step-dots { display: flex; gap: 6px; margin-bottom: 14px; }
.step-dots i { height: 4px; flex: 1; border-radius: 99px; background: #1b1c2b; }
.step-dots i.on { background: linear-gradient(90deg, var(--neon-purple), var(--neon-blue)); }
.step-label { margin: 0 0 4px; color: var(--neon-muted); font-size: .7rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.step-title { margin: 0 0 16px; font-size: 1.05rem; }

.neon-amount {
    width: 100%;
    min-height: 64px;
    border: 0;
    border-bottom: 1px solid rgba(62, 224, 255, .4);
    border-radius: 0;
    background: transparent;
    color: #fff;
    font-size: clamp(1.8rem, 8vw, 2.4rem);
    font-weight: 800;
    text-align: center;
}
.neon-amount:focus { outline: 0; border-bottom-color: var(--neon-purple); }
.neon-amount::placeholder { color: #2d2f44; }

.currency-pills { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin: 14px 0 18px; }
.currency-pills label {
    display: grid;
    place-items: center;
    min-width: 52px;
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 999px;
    color: #c9c6e4;
    background: rgba(255,255,255,.03);
    font-size: .72rem;
    font-weight: 750;
    cursor: pointer;
}
.currency-pills input { display: none; }
.currency-pills label:has(input:checked) {
    border-color: rgba(62, 224, 255, .7);
    color: #071018;
    background: linear-gradient(135deg, var(--neon-blue), #8a5cff);
}

.neon-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 42px;
    border: 0;
    border-radius: 10px;
    color: #071018;
    background: linear-gradient(135deg, var(--neon-purple), var(--neon-blue));
    font: inherit;
    font-size: .9rem;
    font-weight: 750;
    cursor: pointer;
}
.neon-btn.ghost {
    margin-top: 8px;
    color: #d8d4ff;
    background: transparent;
    border: 1px solid rgba(255,255,255,.12);
}

.neon-cats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.neon-cat {
    min-height: 44px;
    padding: 8px 10px;
    border: 1px solid var(--neon-line);
    border-radius: 10px;
    color: var(--neon-text);
    background: rgba(200, 75, 255, .07);
    font: inherit;
    font-size: .86rem;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}
.neon-cat:hover { border-color: rgba(62, 224, 255, .45); }
.neon-cat small { display: block; margin-top: 3px; color: var(--neon-blue); font-size: .64rem; font-weight: 650; }

.bottom-nav {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 40;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    height: calc(64px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    border-top: 1px solid var(--neon-line);
    background: rgba(7, 7, 15, .94);
    backdrop-filter: blur(16px);
}
.bottom-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: #7f82a0;
    text-decoration: none;
    text-align: center;
}
.bottom-nav .nav-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    font-size: 1.05rem;
    line-height: 1;
}
.bottom-nav .nav-txt {
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1;
}
.bottom-nav a.active { color: var(--neon-blue); }

.neon-body .card,
.neon-body .stat-card,
.neon-body .mini-stat,
.admin-body .card,
.admin-body .stat-card,
.admin-body .mini-stat {
    border-color: var(--neon-line);
    background: var(--neon-card);
    box-shadow: 0 8px 24px rgba(0,0,0,.22);
    color: var(--neon-text);
}
.neon-body h1, .neon-body h2, .neon-body .stat, .neon-body strong,
.admin-body h1, .admin-body h2, .admin-body .stat, .admin-body strong { color: #fff; }
.neon-body .muted, .neon-body .eyebrow, .neon-body .stat-label, .neon-body th,
.admin-body .muted, .admin-body .eyebrow, .admin-body .stat-label, .admin-body th { color: var(--neon-muted); }
.neon-body label, .admin-body label { color: #c9c6e4; }
.neon-body input, .neon-body select, .admin-body input, .admin-body select {
    border-color: rgba(255,255,255,.12);
    background: #10111b;
    color: #fff;
}
.neon-body .button, .admin-body .button {
    min-height: 38px;
    background: #171826;
    color: #efeaff;
}
.neon-body .button.primary, .admin-body .button.primary {
    color: #071018;
    background: linear-gradient(135deg, var(--neon-purple), var(--neon-blue));
}
.neon-body table, .admin-body table { color: #ece9ff; }
.neon-body tbody tr:hover, .admin-body tbody tr:hover { background: rgba(255,255,255,.03); }
.neon-body .alert-success, .admin-body .alert-success { background: rgba(62, 224, 255, .12); color: #9ff3ff; }
.neon-body .alert-error, .admin-body .alert-error { background: rgba(255, 80, 120, .14); color: #ffb3c4; }
.neon-body .alert-info, .admin-body .alert-info { background: rgba(200, 75, 255, .12); color: #e7b8ff; }
.neon-body .empty-state, .admin-body .empty-state { color: var(--neon-muted); }
.neon-body a, .admin-body a { color: var(--neon-blue); }
.neon-body .badge, .admin-body .badge { background: rgba(62, 224, 255, .1); color: #d8f9ff; }
.neon-body .currency-chip, .admin-body .currency-chip { color: #d8f9ff; background: rgba(62, 224, 255, .12); }

.chart-box { position: relative; height: 240px; }
.chart-box.tall { height: 280px; }

.neon-auth { width: min(420px, calc(100% - 28px)); margin: 12vh auto 40px; }
.neon-auth-brand { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 18px; }
.neon-auth-card { border-color: var(--neon-line); background: var(--neon-card); }

.admin-body .sidebar,
.admin-body .neon-sidebar {
    background:
        radial-gradient(circle at 20% 0, rgba(200, 75, 255, .18), transparent 32%),
        #0b0b16;
}
.admin-body .side-nav a { color: #a9acc8; }
.admin-body .side-nav a.active {
    color: #fff;
    background: linear-gradient(90deg, rgba(200, 75, 255, .24), rgba(62, 224, 255, .08));
    box-shadow: inset 3px 0 var(--neon-blue);
}
.admin-body .side-nav a.active i { color: var(--neon-blue); }
.admin-body .brand-mark {
    background: linear-gradient(135deg, var(--neon-purple), var(--neon-blue));
    box-shadow: 0 8px 18px rgba(200, 75, 255, .22);
}
.admin-body .workspace { background: transparent; }
.admin-body .today {
    border-color: var(--neon-line);
    color: var(--neon-muted);
    background: #10111b;
}
.admin-body .neon-mobile {
    background: rgba(11, 11, 22, .96);
    border-bottom: 1px solid var(--neon-line);
}
.admin-body .logout-link { color: var(--neon-blue); font-size: .72rem; text-decoration: none; }
.admin-body .page-heading h1 { color: #fff; }

@media (max-width: 1020px) {
    .neon-body .report-kpis { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 780px) {
    .neon-body .grid,
    .neon-body .grid-3,
    .neon-body .report-filters,
    .neon-body .report-kpis,
    .admin-body .grid,
    .admin-body .grid-3 { grid-template-columns: 1fr; }
    .report-filters .button { width: 100%; }
    .chart-box { height: 220px; }
}
@media (max-width: 480px) {
    .neon-cats { grid-template-columns: 1fr; }
    .report-actions { flex-direction: column; align-items: stretch; }
    .report-actions .actions { display: grid; gap: 8px; }
}

.neon-body,
.admin-body {
    --bg: #07070f;
    --surface: #141422;
    --text: #eef2ff;
    --muted: #8b8eaa;
    --border: rgba(200, 75, 255, .28);
    --primary: #3ee0ff;
    --primary-dark: #c84bff;
}

.neon-body .card,
.neon-body .stat-card,
.neon-body .mini-stat,
.neon-body .step-card,
.neon-body .auth-card,
.admin-body .card,
.admin-body .stat-card,
.admin-body .mini-stat,
.admin-body .auth-card {
    background: #141422 !important;
    border-color: rgba(200, 75, 255, .28) !important;
    color: #eef2ff !important;
}

.neon-body .card h2,
.neon-body .card p,
.neon-body .card td,
.neon-body .card th,
.neon-body .card span,
.neon-body .card strong,
.admin-body .card h2,
.admin-body .card p,
.admin-body .card td,
.admin-body .card th,
.admin-body .card span,
.admin-body .card strong,
.admin-body .page-heading h1 {
    color: #eef2ff !important;
}

.neon-body .muted,
.admin-body .muted,
.neon-body .stat-label,
.admin-body .stat-label,
.neon-body .stat-meta,
.admin-body .stat-meta {
    color: #9aa0c4 !important;
}

.neon-body input,
.neon-body select,
.neon-body textarea,
.admin-body input,
.admin-body select,
.admin-body textarea {
    background: #0c0d16 !important;
    border-color: rgba(255,255,255,.14) !important;
    color: #fff !important;
    font-size: 16px !important;
}
.neon-body input.neon-amount {
    font-size: clamp(1.8rem, 8vw, 2.4rem) !important;
}

.neon-body .button:not(.primary):not(.danger),
.admin-body .button:not(.primary):not(.danger) {
    background: #1b1c2c !important;
    color: #eef2ff !important;
}

.neon-body tbody tr:hover,
.admin-body tbody tr:hover {
    background: rgba(62, 224, 255, .06) !important;
}

.neon-body .button.danger,
.admin-body .button.danger {
    background: rgba(255, 80, 120, .16) !important;
    color: #ffc0cc !important;
}

.neon-body .cash-delete,
.admin-body .cash-delete {
    min-height: 32px;
    padding: 4px 10px;
    font-size: .75rem;
}

.record-list { display: grid; gap: 8px; }
.record-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--neon-line);
    border-radius: 12px;
    background: var(--neon-card);
}
.record-cat {
    overflow: hidden;
    color: #f4f6ff;
    font-size: .95rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.record-amt {
    color: #fff;
    font-size: .95rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

@media (max-width: 680px) {
    .neon-body .responsive-table tr,
    .admin-body .responsive-table tr {
        background: #12121c !important;
        border: 1px solid rgba(200, 75, 255, .28) !important;
    }
    .neon-body .responsive-table td,
    .admin-body .responsive-table td {
        color: #f4f6ff !important;
        border-bottom-color: rgba(255, 255, 255, .1) !important;
    }
    .neon-body .responsive-table td::before,
    .admin-body .responsive-table td::before {
        color: #c5cade !important;
    }
    .neon-body .responsive-table .muted,
    .admin-body .responsive-table .muted {
        color: #c5cade !important;
    }
    .neon-body .responsive-table .amount,
    .admin-body .responsive-table .amount {
        color: #ffffff !important;
    }
}