@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Syne:wght@400;700;800&display=swap');

:root {
    --bg: #0a0e17; --surface: #111827; --border: #1e2d45;
    --accent: #00d4ff; --accent2: #ff6b35; --income: #22c55e;
    --expense: #f43f5e; --stats: #a78bfa; --text: #e2e8f0;
}

body {
    background: var(--bg); color: var(--text);
    font-family: 'Space Mono', monospace; min-height: 100vh;
    background-image: radial-gradient(ellipse at 20% 10%, rgba(0,212,255,0.05) 0%, transparent 50%);
}

.syne { font-family: 'Syne', sans-serif; }
.hidden-view { display: none !important; }

.toggle-wrap { display: flex; align-items: center; gap: 10px; }
.toggle { position: relative; display: inline-block; width: 40px; height: 22px; }
.toggle input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top:0;left:0;right:0;bottom:0; background:#1e293b; border-radius:22px; transition:.3s; border:1px solid #334155; }
.slider:before { position:absolute; content:""; height:16px; width:16px; left:2px; bottom:2px; background:#475569; border-radius:50%; transition:.3s; }
input:checked + .slider { background: rgba(34,197,94,0.3); border-color:#22c55e; }
input:checked + .slider:before { transform:translateX(18px); background:#22c55e; }

th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: white; }
th.sort-asc::after { content: ' ↑'; color: var(--accent); }
th.sort-desc::after { content: ' ↓'; color: var(--accent); }

.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.7); z-index:50; display:flex; align-items:center; justify-content:center; }
.modal-box { background:#111827; border:1px solid #1e2d45; border-radius:12px; padding:28px; width:100%; max-width:480px; }

.stat-bar-bg { background:#1e293b; border-radius:4px; height:8px; overflow:hidden; }
.stat-bar-fill { height:100%; border-radius:4px; transition: width 0.6s ease; }

.admin-toggle {
    background: rgba(168, 85, 247, 0.1);
    border: 1px solid rgba(168, 85, 247, 0.3);
}

/* Table Styles */
.tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.tbl thead {
    background: rgba(15, 23, 42, 0.5);
    border-bottom: 2px solid rgba(30, 45, 69, 0.8);
}

.tbl thead th {
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    color: #cbd5e1;
    text-transform: uppercase;
    font-size: 9px;
    letter-spacing: 0.05em;
    border-right: 1px solid rgba(100, 116, 139, 0.2);
}

.tbl thead th:last-child {
    border-right: none;
}

.tbl tbody tr {
    border-bottom: 1px solid rgba(51, 65, 85, 0.3);
    transition: background-color 0.15s ease;
}

.tbl tbody tr:hover {
    background-color: rgba(100, 116, 139, 0.08);
}

.tbl tbody td {
    padding: 10px 16px;
    color: #cbd5e1;
    border-right: 1px solid rgba(100, 116, 139, 0.1);
}

.tbl tbody td:last-child {
    border-right: none;
}