@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ━━━ Tokens ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
:root {
    --bg:         #fafafa;
    --bg-elev:    #ffffff;
    --bg-raised:  #f3f3f3;
    --bg-hover:   #ececec;
    --bg-subtle:  #f7f7f7;

    --text:       #0a0a0a;
    --text-sub:   #525252;
    --text-mute:  #a3a3a3;
    --text-muted: #a3a3a3;

    --border:     #e5e5e5;
    --border-soft:#ededed;

    --accent:     #0070f3;
    --accent-2:   #3291ff;
    --accent-dim: rgba(0,112,243,0.08);
    --accent-fg:  #ffffff;

    --green:      #00a854;
    --green-dim:  rgba(0,168,84,0.09);

    --red:        #e5484d;
    --red-dim:    rgba(229,72,77,0.09);

    --amber:      #d97706;
    --amber-dim:  rgba(217,119,6,0.09);

    --r-xs: 4px;
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 16px;
    --r-xl: 22px;
    --r-full: 9999px;

    --sh-1: 0 1px 2px rgba(0,0,0,.04), 0 1px 3px rgba(0,0,0,.06);
    --sh-2: 0 2px 4px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.08);
    --sh-3: 0 4px 8px rgba(0,0,0,.06), 0 12px 32px rgba(0,0,0,.1);
    --sh-4: 0 8px 16px rgba(0,0,0,.08), 0 24px 56px rgba(0,0,0,.14);

    --ring: 0 0 0 3px var(--accent-dim);
    --ease: cubic-bezier(.16, 1, .3, 1);

    --sidebar-w: 240px;
}

[data-theme="dark"] {
    --bg:         #0f0f0f;
    --bg-elev:    #1a1a1a;
    --bg-raised:  #232323;
    --bg-hover:   #2a2a2a;
    --bg-subtle:  #161616;

    --text:       #f5f5f5;
    --text-sub:   #a3a3a3;
    --text-mute:  #6b6b6b;
    --text-muted: #6b6b6b;

    --border:     #2a2a2a;
    --border-soft:#1f1f1f;

    --accent:     #3291ff;
    --accent-2:   #5aaaff;
    --accent-dim: rgba(255,255,255,0.06);

    --green:      #00d769;
    --green-dim:  rgba(0,215,105,0.08);

    --red:        #ff5d63;
    --red-dim:    rgba(255,93,99,0.08);

    --amber:      #ffb347;
    --amber-dim:  rgba(255,179,71,0.08);

    --sh-1: 0 1px 2px rgba(0,0,0,.4);
    --sh-2: 0 4px 12px rgba(0,0,0,.45);
    --sh-3: 0 12px 32px rgba(0,0,0,.55);
    --sh-4: 0 24px 56px rgba(0,0,0,.7);
}

/* ━━━ Reset ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
    font-family:'Inter',system-ui,sans-serif;
    background:var(--bg);
    color:var(--text);
    line-height:1.6;
    font-size:14px;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    transition:background .25s var(--ease), color .25s var(--ease);
    overflow-x:hidden;
}
img, svg, video { max-width:100%; display:block; }
button, input, select, textarea { font:inherit; color:inherit; }
a { color:inherit; }

/* ━━━ Animations ━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@keyframes fadeUp   { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
@keyframes fadeIn   { from { opacity:0; } to { opacity:1; } }
@keyframes fadeRight{ from { opacity:0; transform:translateX(-12px); } to { opacity:1; transform:none; } }
@keyframes scaleIn  { from { opacity:0; transform:scale(.96) translateY(8px); } to { opacity:1; transform:none; } }
@keyframes slideUp  { from { transform:translateY(20px); opacity:0; } to { transform:none; opacity:1; } }
@keyframes shimmer  { 0% { background-position:-200% 0; } 100% { background-position:200% 0; } }
@keyframes pulse    { 0%,100% { opacity:1; } 50% { opacity:.5; } }
@keyframes spin     { to { transform:rotate(360deg); } }

/* ━━━ Login ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.login-body {
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:100vh;
    min-height:100dvh;
    padding:1rem;
    position:relative;
    overflow:hidden;
}
.login-body::before {
    content:'';
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 20% 0%, var(--accent-dim) 0%, transparent 50%),
        radial-gradient(circle at 80% 100%, var(--green-dim) 0%, transparent 50%);
    pointer-events:none;
    z-index:0;
}

.login-container {
    position:relative;
    z-index:1;
    background:var(--bg-elev);
    border:1px solid var(--border);
    border-radius:var(--r-xl);
    padding:2.25rem 2rem;
    width:100%;
    max-width:400px;
    box-shadow:var(--sh-4);
    animation:scaleIn .4s var(--ease);
}

.login-logo {
    font-size:1.4rem;
    font-weight:800;
    letter-spacing:-.04em;
    margin-bottom:1.5rem;
    color:var(--text);
    display:flex;
    align-items:center;
    gap:.5rem;
}
.login-logo span { color:var(--accent); }
.login-logo::before {
    content:'';
    width:32px; height:32px;
    border-radius:8px;
    background:linear-gradient(135deg, var(--accent), var(--accent-2));
    display:inline-block;
    box-shadow:0 4px 12px var(--accent-dim);
}

.login-container h2 {
    font-size:1.3rem;
    font-weight:700;
    letter-spacing:-.03em;
    margin-bottom:.25rem;
}
.login-container > p {
    color:var(--text-mute);
    font-size:.85rem;
    margin-bottom:1.5rem;
}

/* ━━━ Forms ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.form-group { margin-bottom:.875rem; }

.form-group label {
    display:block;
    font-size:.72rem;
    font-weight:600;
    color:var(--text-sub);
    margin-bottom:.4rem;
    letter-spacing:.04em;
    text-transform:uppercase;
}

.form-group input,
.form-group select,
.form-group textarea {
    width:100%;
    padding:.65rem .9rem;
    border:1px solid var(--border);
    border-radius:var(--r-md);
    background:var(--bg-elev);
    color:var(--text);
    font-size:.875rem;
    outline:none;
    transition:border-color .15s, box-shadow .15s, background .15s;
    -webkit-appearance:none;
    appearance:none;
}
.form-group input:hover,
.form-group select:hover,
.form-group textarea:hover { border-color:var(--text-mute); }

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color:var(--accent);
    box-shadow:var(--ring);
}

.form-group select {
    background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3e%3cpath d='M1 1l4 4 4-4' stroke='%23737373' stroke-width='1.5' stroke-linecap='round'/%3e%3c/svg%3e");
    background-repeat:no-repeat;
    background-position:right 1rem center;
    padding-right:2.5rem;
}
.form-group select option { background:var(--bg-elev); color:var(--text); }
.form-group textarea { resize:vertical; min-height:80px; }

/* ━━━ Buttons ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.4rem;
    padding:.6rem 1.1rem;
    border:1px solid transparent;
    border-radius:var(--r-md);
    font-weight:600;
    font-size:.85rem;
    cursor:pointer;
    transition:transform .15s var(--ease), box-shadow .2s, background .15s, border-color .15s, opacity .15s;
    text-decoration:none;
    white-space:nowrap;
    flex-shrink:0;
    position:relative;
    user-select:none;
    line-height:1.2;
}
.btn:active { transform:scale(.97); }
.btn:focus-visible { box-shadow:var(--ring); }

.btn-primary {
    background:linear-gradient(180deg, var(--accent-2), var(--accent));
    color:var(--accent-fg);
    box-shadow:0 1px 0 rgba(255,255,255,.2) inset, 0 1px 2px rgba(0,0,0,.1);
}
.btn-primary:hover { transform:translateY(-1px); box-shadow:0 1px 0 rgba(255,255,255,.2) inset, 0 6px 16px var(--accent-dim); }

.btn-danger { background:var(--red); color:#fff; }
.btn-danger:hover { transform:translateY(-1px); opacity:.92; box-shadow:0 6px 16px rgba(229,72,77,.2); }

.btn-success { background:var(--green); color:#fff; }
.btn-success:hover { transform:translateY(-1px); opacity:.92; box-shadow:0 6px 16px rgba(0,168,84,.2); }

.btn-ghost {
    background:var(--bg-elev);
    border-color:var(--border);
    color:var(--text);
    box-shadow:var(--sh-1);
}
.btn-ghost:hover { background:var(--bg-raised); border-color:var(--text-mute); }

.btn-block { width:100%; }
.btn-sm { padding:.4rem .75rem; font-size:.78rem; }

.btn-icon {
    padding:.42rem;
    background:var(--bg-elev);
    border:1px solid var(--border);
    border-radius:var(--r-sm);
    color:var(--text-sub);
    cursor:pointer;
    font-size:1rem;
    width:32px; height:32px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    transition:all .15s;
    flex-shrink:0;
}
.btn-icon:hover { background:var(--bg-raised); color:var(--text); border-color:var(--accent); transform:translateY(-1px); }
.btn-icon.delete:hover { background:var(--red-dim); color:var(--red); border-color:var(--red); }

/* ━━━ Alerts ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.alert {
    padding:.75rem 1rem;
    border-radius:var(--r-md);
    font-size:.85rem;
    margin-bottom:1rem;
    border:1px solid;
    animation:fadeUp .25s var(--ease);
    display:flex;
    align-items:center;
    gap:.5rem;
}
.alert-error   { background:var(--red-dim);   color:var(--red);   border-color:var(--red-dim); }
.alert-success { background:var(--green-dim); color:var(--green); border-color:var(--green-dim); }

/* ━━━ App Layout ━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.app-container {
    display:flex;
    height:100vh;
    height:100dvh;
    overflow:hidden;
    background:var(--bg);
}

/* ━━━ Sidebar ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.sidebar {
    width:var(--sidebar-w);
    flex-shrink:0;
    background:var(--bg-elev);
    border-right:1px solid var(--border);
    display:flex;
    flex-direction:column;
    transition:transform .3s var(--ease);
    z-index:200;
    animation:fadeRight .35s var(--ease);
}

.sidebar-header {
    padding:1.25rem 1.1rem 1.1rem;
    border-bottom:1px solid var(--border-soft);
    flex-shrink:0;
}
.sidebar-header h2 {
    font-size:1.1rem;
    font-weight:800;
    letter-spacing:-.04em;
    color:var(--text);
    display:flex;
    align-items:center;
    gap:.5rem;
}
.sidebar-header h2::before {
    content:'';
    width:24px; height:24px;
    border-radius:6px;
    background:linear-gradient(135deg, var(--accent), var(--accent-2));
    box-shadow:0 2px 8px var(--accent-dim);
    flex-shrink:0;
}
.sidebar-header h2 span { color:var(--accent); }

.nav-section-title {
    padding:1rem .8rem .4rem;
    font-size:.66rem;
    font-weight:700;
    color:var(--text-mute);
    text-transform:uppercase;
    letter-spacing:.08em;
}

.nav-links {
    list-style:none;
    padding:.5rem .5rem;
    flex:1;
    overflow-y:auto;
}
.nav-links li { margin-bottom:1px; }
.nav-links li a {
    display:flex;
    align-items:center;
    gap:.65rem;
    padding:.55rem .75rem;
    color:var(--text-sub);
    text-decoration:none;
    font-weight:500;
    font-size:.875rem;
    border-radius:var(--r-sm);
    transition:background .15s var(--ease), color .15s, transform .15s;
    position:relative;
    white-space:nowrap;
}
.nav-links li a i { font-size:1.1rem; flex-shrink:0; opacity:.8; transition:opacity .15s; }
.nav-links li a:hover {
    background:var(--bg-raised);
    color:var(--text);
}
.nav-links li a:hover i { opacity:1; }
.nav-links li a.active {
    background:var(--accent-dim);
    color:var(--accent);
    font-weight:600;
}
.nav-links li a.active i { opacity:1; }

.sidebar-footer {
    padding:.6rem .5rem;
    border-top:1px solid var(--border-soft);
    display:flex;
    flex-direction:column;
    gap:1px;
    flex-shrink:0;
}
.theme-toggle, .logout-btn {
    display:flex;
    align-items:center;
    gap:.65rem;
    width:100%;
    background:transparent;
    border:none;
    color:var(--text-sub);
    font-size:.875rem;
    font-weight:500;
    cursor:pointer;
    padding:.55rem .75rem;
    border-radius:var(--r-sm);
    transition:background .15s, color .15s;
    white-space:nowrap;
    text-decoration:none;
}
.theme-toggle i, .logout-btn i { font-size:1.1rem; flex-shrink:0; opacity:.8; }
.theme-toggle:hover { background:var(--bg-raised); color:var(--text); }
.logout-btn { color:var(--red); }
.logout-btn:hover { background:var(--red-dim); }

/* ━━━ Mobile overlay ━━━━━━━━━━━━━━━━━━━━━━ */
.sidebar-overlay {
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.5);
    backdrop-filter:blur(2px);
    -webkit-backdrop-filter:blur(2px);
    z-index:199;
    animation:fadeIn .2s ease;
}
.sidebar-overlay.active { display:block; }

/* ━━━ Main Content ━━━━━━━━━━━━━━━━━━━━━━━━ */
.main-content {
    flex:1;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    min-width:0;
}

/* ━━━ Topbar ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.topbar {
    padding:.75rem 1.5rem;
    background:var(--bg-elev);
    border-bottom:1px solid var(--border);
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-shrink:0;
    gap:.75rem;
    min-height:56px;
}
.topbar-left {
    display:flex;
    align-items:center;
    gap:.75rem;
    min-width:0;
    flex:1;
}
.topbar-greeting {
    display:flex;
    flex-direction:column;
    line-height:1.2;
    min-width:0;
}
.topbar-greeting strong {
    font-size:.875rem;
    font-weight:600;
    color:var(--text);
    letter-spacing:-.01em;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.topbar-greeting small {
    font-size:.72rem;
    color:var(--text-mute);
    font-weight:500;
}

.hamburger {
    display:none;
    background:transparent;
    border:1px solid var(--border);
    border-radius:var(--r-sm);
    padding:0;
    cursor:pointer;
    color:var(--text-sub);
    font-size:1.3rem;
    line-height:1;
    transition:all .15s;
    width:36px; height:36px;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}
.hamburger:hover { background:var(--bg-raised); color:var(--text); }

.user-info {
    display:flex;
    align-items:center;
    gap:.5rem;
    font-size:.8rem;
    font-weight:600;
    color:var(--text);
    background:var(--bg-elev);
    padding:.35rem .85rem .35rem .35rem;
    border-radius:var(--r-full);
    border:1px solid var(--border);
    white-space:nowrap;
    flex-shrink:0;
    transition:all .15s;
}
.user-info:hover { border-color:var(--text-mute); }
.user-info::before {
    content:'';
    width:26px; height:26px;
    border-radius:50%;
    background:linear-gradient(135deg, var(--accent), var(--accent-2));
    color:#fff;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:.85rem;
    font-weight:700;
}

/* ━━━ Scroll wrapper ━━━━━━━━━━━━━━━━━━━━━━ */
.main-scroll {
    flex:1;
    overflow-y:auto;
    overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
}

.content-wrapper {
    padding:1.75rem 2rem;
    max-width:1320px;
    margin:0 auto;
    width:100%;
    animation:fadeUp .35s var(--ease);
}

/* ━━━ Page Header ━━━━━━━━━━━━━━━━━━━━━━━━━ */
.page-header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:1.5rem;
    gap:1rem;
    flex-wrap:wrap;
}
.page-header h1 {
    font-size:1.5rem;
    font-weight:800;
    letter-spacing:-.04em;
    line-height:1.2;
}
.page-header .action-btns { flex-shrink:0; }

/* ━━━ Stat Cards ━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.stats-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
    gap:1rem;
    margin-bottom:1.5rem;
}
.stat-card {
    background:var(--bg-elev);
    border:1px solid var(--border);
    border-radius:var(--r-lg);
    padding:1.25rem 1.4rem;
    box-shadow:var(--sh-1);
    display:flex;
    flex-direction:column;
    gap:.5rem;
    transition:box-shadow .25s var(--ease), transform .25s var(--ease), border-color .15s;
    animation:fadeUp .4s var(--ease) backwards;
    min-width:0;
    position:relative;
    overflow:hidden;
    cursor:default;
}
.stat-card::after {
    content:'';
    position:absolute;
    top:0; left:0;
    width:100%;
    height:2px;
    background:linear-gradient(90deg, var(--accent), var(--accent-2));
    opacity:0;
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .35s var(--ease), opacity .25s;
}
.stat-card:hover {
    border-color:transparent;
    box-shadow:var(--sh-3);
    transform:translateY(-3px);
}
.stat-card:hover::after { opacity:1; transform:scaleX(1); }

.stat-card:nth-child(1) { animation-delay:0s; }
.stat-card:nth-child(2) { animation-delay:.06s; }
.stat-card:nth-child(3) { animation-delay:.12s; }
.stat-card:nth-child(4) { animation-delay:.18s; }

.stat-card-header { display:flex; justify-content:space-between; align-items:center; }
.stat-card-title {
    font-size:.7rem;
    font-weight:700;
    color:var(--text-mute);
    text-transform:uppercase;
    letter-spacing:.08em;
}
.stat-card-icon {
    width:34px; height:34px;
    border-radius:var(--r-sm);
    display:flex; align-items:center; justify-content:center;
    font-size:1.1rem;
    flex-shrink:0;
    transition:transform .25s var(--ease);
}
.stat-card:hover .stat-card-icon { transform:scale(1.08) rotate(-4deg); }

.icon-income  { background:var(--green-dim); color:var(--green); }
.icon-expense { background:var(--red-dim);   color:var(--red); }
.icon-savings { background:var(--accent-dim); color:var(--accent); }
.icon-warning { background:var(--amber-dim); color:var(--amber); }

.stat-card-value {
    font-size:1.75rem;
    font-weight:800;
    letter-spacing:-.04em;
    line-height:1.1;
    word-break:break-word;
    font-feature-settings:'tnum';
    color:var(--text);
}
.stat-card-meta {
    font-size:.75rem;
    color:var(--text-mute);
    font-weight:500;
}

/* ━━━ Dashboard Grid ━━━━━━━━━━━━━━━━━━━━━━ */
.dashboard-grid {
    display:grid;
    grid-template-columns:minmax(0, 2fr) minmax(0, 1fr);
    gap:1rem;
    margin-bottom:1.5rem;
}

/* ━━━ Panels ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.panel {
    background:var(--bg-elev);
    border:1px solid var(--border);
    border-radius:var(--r-lg);
    padding:1.25rem 1.4rem;
    box-shadow:var(--sh-1);
    animation:fadeUp .4s var(--ease) backwards;
    min-width:0;
    transition:box-shadow .2s, border-color .15s;
}
.panel:hover { box-shadow:var(--sh-2); }
.panel-title {
    font-size:.875rem;
    font-weight:700;
    letter-spacing:-.01em;
    margin-bottom:1rem;
    color:var(--text);
    display:flex;
    align-items:center;
    gap:.5rem;
}

/* ━━━ Highlight Lists ━━━━━━━━━━━━━━━━━━━━━ */
.highlight-list { list-style:none; }
.highlight-item {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:.6rem 0;
    border-bottom:1px solid var(--border-soft);
    font-size:.875rem;
    gap:.5rem;
    transition:padding .2s var(--ease);
}
.highlight-item:hover { padding-left:.25rem; }
.highlight-item:last-child { border-bottom:none; }
.highlight-label { font-weight:500; color:var(--text-sub); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.highlight-value { font-weight:700; flex-shrink:0; font-feature-settings:'tnum'; }
.text-success { color:var(--green); }
.text-danger  { color:var(--red); }
.text-muted   { color:var(--text-mute); }

/* ━━━ Tables ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.table-container {
    background:var(--bg-elev);
    border:1px solid var(--border);
    border-radius:var(--r-lg);
    box-shadow:var(--sh-1);
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    animation:fadeUp .4s var(--ease) backwards;
    width:100%;
}

table { width:100%; border-collapse:collapse; min-width:560px; }
th, td {
    padding:.85rem 1.2rem;
    text-align:left;
    border-bottom:1px solid var(--border-soft);
    font-size:.85rem;
    white-space:nowrap;
    font-feature-settings:'tnum';
}
th {
    font-size:.66rem;
    font-weight:700;
    color:var(--text-mute);
    text-transform:uppercase;
    letter-spacing:.08em;
    background:var(--bg-subtle);
    position:sticky;
    top:0;
}
td { max-width:240px; overflow:hidden; text-overflow:ellipsis; }
td.wrap { white-space:normal; }
tbody tr { transition:background .15s; }
tbody tr:last-child td { border-bottom:none; }
tbody tr:hover td { background:var(--bg-subtle); }

/* ━━━ Badges ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.badge {
    display:inline-flex;
    align-items:center;
    gap:.3rem;
    padding:.18rem .55rem;
    border-radius:var(--r-full);
    font-size:.66rem;
    font-weight:700;
    letter-spacing:.05em;
    text-transform:uppercase;
    white-space:nowrap;
}
.badge::before {
    content:'';
    width:5px; height:5px;
    border-radius:50%;
    background:currentColor;
}
.badge-income    { background:var(--green-dim); color:var(--green); }
.badge-expense   { background:var(--red-dim);   color:var(--red); }
.badge-recurring { background:var(--amber-dim); color:var(--amber); }

/* ━━━ Action Buttons ━━━━━━━━━━━━━━━━━━━━━━ */
.action-btns { display:flex; gap:.4rem; align-items:center; flex-wrap:wrap; }

/* ━━━ Filters ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.filters {
    display:flex;
    gap:.75rem;
    margin-bottom:1.25rem;
    background:var(--bg-elev);
    border:1px solid var(--border);
    border-radius:var(--r-lg);
    padding:.85rem 1rem;
    box-shadow:var(--sh-1);
    align-items:flex-end;
    flex-wrap:wrap;
    animation:fadeUp .35s var(--ease);
}
.filters .form-group { margin-bottom:0; min-width:140px; flex:1; }
.filters .btn { align-self:flex-end; }

/* ━━━ Modal ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.modal-overlay {
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.5);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:300;
    padding:1rem;
}
.modal-overlay.active { display:flex; animation:fadeIn .25s ease; }

.modal {
    background:var(--bg-elev);
    border:1px solid var(--border);
    border-radius:var(--r-xl);
    width:100%;
    max-width:480px;
    max-height:90vh;
    overflow-y:auto;
    padding:1.5rem;
    box-shadow:var(--sh-4);
    animation:scaleIn .3s var(--ease);
}
.modal-header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:1.25rem;
}
.modal-header h3 { font-size:1rem; font-weight:700; letter-spacing:-.02em; }

.close-modal {
    background:var(--bg-raised);
    border:1px solid var(--border);
    width:30px; height:30px;
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:1rem;
    color:var(--text-mute);
    cursor:pointer;
    transition:all .2s var(--ease);
    flex-shrink:0;
    line-height:1;
}
.close-modal:hover { background:var(--red-dim); color:var(--red); border-color:var(--red); transform:rotate(90deg); }

/* ━━━ Form Panel ━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.form-panel {
    max-width:600px;
    margin:0 auto;
    background:var(--bg-elev);
    border:1px solid var(--border);
    border-radius:var(--r-lg);
    padding:1.5rem;
    box-shadow:var(--sh-1);
    animation:fadeUp .35s var(--ease);
}
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }

.checkbox-group {
    display:flex;
    align-items:center;
    gap:.6rem;
    margin-top:1rem;
    padding:.7rem .85rem;
    background:var(--bg-subtle);
    border-radius:var(--r-md);
    border:1px solid var(--border);
    font-size:.875rem;
    font-weight:500;
}
.checkbox-group input { width:auto; accent-color:var(--accent); flex-shrink:0; cursor:pointer; }
.checkbox-group label { cursor:pointer; }

/* ━━━ Toggle Switch ━━━━━━━━━━━━━━━━━━━━━━━ */
.toggle-switch { position:relative; display:inline-block; width:42px; height:22px; flex-shrink:0; }
.toggle-switch input { opacity:0; width:0; height:0; }
.slider {
    position:absolute;
    cursor:pointer;
    inset:0;
    background:var(--border);
    border-radius:22px;
    transition:.25s var(--ease);
}
.slider::before {
    content:'';
    position:absolute;
    height:14px; width:14px;
    left:4px; bottom:4px;
    background:#fff;
    border-radius:50%;
    transition:.25s cubic-bezier(.34,1.56,.64,1);
    box-shadow:0 1px 4px rgba(0,0,0,.25);
}
input:checked + .slider { background:var(--accent); }
input:checked + .slider::before { transform:translateX(20px); }
input:focus-visible + .slider { box-shadow:var(--ring); }

/* ━━━ Empty State ━━━━━━━━━━━━━━━━━━━━━━━━━ */
.empty-state {
    text-align:center;
    padding:3rem 1.5rem;
    color:var(--text-mute);
}
.empty-state i {
    font-size:2.5rem;
    color:var(--text-mute);
    opacity:.4;
    margin-bottom:.5rem;
    display:block;
}
.empty-state p { font-size:.875rem; }

/* ━━━ Scrollbar ━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
* { scrollbar-width:thin; scrollbar-color:var(--border) transparent; }
*::-webkit-scrollbar { width:6px; height:6px; }
*::-webkit-scrollbar-track { background:transparent; }
*::-webkit-scrollbar-thumb { background:var(--border); border-radius:10px; }
*::-webkit-scrollbar-thumb:hover { background:var(--text-mute); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* ━━━━━━ RESPONSIVE BREAKPOINTS ━━━━━━━━━━ */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Tablet & below */
@media (max-width: 1024px) {
    :root { --sidebar-w: 220px; }
    .dashboard-grid { grid-template-columns:1fr; }
    .content-wrapper { padding:1.5rem 1.25rem; }
    .stats-grid { grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:.85rem; }
    .stat-card-value { font-size:1.55rem; }
    .topbar { padding:.7rem 1.25rem; }
}

/* Mobile (sidebar collapses) */
@media (max-width: 768px) {
    .sidebar {
        position:fixed;
        top:0; left:0;
        width:260px;
        height:100%;
        height:100dvh;
        transform:translateX(-100%);
        box-shadow:var(--sh-4);
    }
    .sidebar.open { transform:translateX(0); }

    .hamburger { display:inline-flex !important; }

    .topbar { padding:.6rem 1rem; min-height:54px; }
    .topbar-greeting strong { font-size:.8rem; }
    .topbar-greeting small { display:none; }

    .content-wrapper { padding:1.1rem 1rem; }

    .page-header { flex-direction:column; align-items:flex-start; gap:.85rem; margin-bottom:1.25rem; }
    .page-header h1 { font-size:1.3rem; }
    .page-header .action-btns { width:100%; }
    .page-header .action-btns .btn { flex:1; min-width:0; }

    .stats-grid { grid-template-columns:1fr 1fr; gap:.75rem; }
    .stat-card { padding:1rem 1.1rem; }
    .stat-card-value { font-size:1.4rem; }

    .filters { padding:.85rem; gap:.6rem; }
    .filters .form-group { min-width:0; flex:1 1 100%; }
    .filters .btn { width:100%; }

    .form-row { grid-template-columns:1fr; gap:.75rem; }

    .form-panel { padding:1.25rem; }

    .panel { padding:1rem 1.1rem; }

    th, td { padding:.7rem .9rem; font-size:.8rem; }

    .action-btns .btn-text { display:none; }

    .user-info span { display:none; }
    .user-info { padding:.3rem; }
}

/* Small mobile */
@media (max-width: 480px) {
    .stats-grid { grid-template-columns:1fr; }
    .login-container { padding:2rem 1.25rem; }
    .modal { padding:1.25rem; max-height:95vh; }
    .modal-header h3 { font-size:.92rem; }
    .form-panel { padding:1rem; }
    .stat-card-value { font-size:1.5rem; }
    .content-wrapper { padding:1rem .85rem; }
    .topbar { padding:.55rem .85rem; }
    .filters { padding:.75rem; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration:.01ms !important;
        transition-duration:.01ms !important;
    }
}