/* ==========================================================
   Vodka Official™ — Premium Dashboard Design System
   Aesthetic: Luxury Dark  |  Deep Navy, Soft Indigo, Warm Text
   Fonts: Syne (display)  +  Inter (body)
   ========================================================== */

/* ── Custom Properties ── */
:root {
    /* Backgrounds — deep layered navy */
    --bg:         #070c18;
    --bg-sidebar: #090e1e;
    --bg-nav-act: rgba(79,112,232,0.12);
    --bg-card:    rgba(255,255,255,0.028);
    --bg-card-hv: rgba(255,255,255,0.048);
    --bg-modal:   #0d1628;
    --bg-input:   rgba(255,255,255,0.04);

    /* Text — warm off-white hierarchy */
    --t1: #eef1f8;   /* headings */
    --t2: #8a9bbf;   /* body */
    --t3: #4e5f7e;   /* muted / labels */

    /* Accent — muted indigo/violet (NOT neon) */
    --indigo:        #4f70e8;
    --violet:        #7c5cdb;
    --grad:          linear-gradient(135deg, #4f70e8 0%, #7c5cdb 100%);
    --grad-text:     linear-gradient(135deg, #7aa3ff 0%, #c084fc 100%);
    --grad-gold:     linear-gradient(135deg, #b8882a 0%, #d4a843 100%);
    --indigo-glow:   rgba(79,112,232,0.18);
    --indigo-ring:   rgba(79,112,232,0.25);

    /* Status colours — muted, rich tones */
    --green:  #1a9e74;
    --amber:  #c88c1e;
    --red:    #c84b4b;

    /* Borders */
    --b1: rgba(255,255,255,0.065);  /* default */
    --b2: rgba(255,255,255,0.11);   /* hover */
    --b3: rgba(79,112,232,0.4);     /* focus */

    /* Shadows / Depth */
    --sh-card:   0 1px 3px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.28);
    --sh-hover:  0 4px 32px rgba(0,0,0,0.5), 0 0 0 1px rgba(79,112,232,0.15);
    --sh-modal:  0 32px 80px rgba(0,0,0,0.7);
    --sh-btn:    0 4px 18px rgba(79,112,232,0.38);

    /* Layout */
    --sidebar-w: 270px;
    --topbar-h:  68px;
    --r:         14px;   /* card radius */
    --r-sm:      9px;    /* input radius */
    --r-xs:      6px;    /* tag radius */
    --ease:      cubic-bezier(0.22, 1, 0.36, 1);
    --dur:       0.3s;
}

/* ── Reset ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { height:100%; }

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background: var(--bg);
    color: var(--t1);
    height: 100%;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Subtle ambient radial glow — not neon, just warmth */
    background-image:
        radial-gradient(ellipse 80% 60% at 20% -10%, rgba(79,112,232,0.055) 0%, transparent 65%),
        radial-gradient(ellipse 70% 50% at 85% 105%, rgba(124,92,219,0.05) 0%, transparent 60%);
}

h1, h2, h3, h4 { font-family:'Syne',sans-serif; font-weight:800; line-height:1.2; }
a { color:inherit; text-decoration:none; }
button { font-family:'Inter',sans-serif; }

/* ══════════════════════════════════════════
   APP SHELL
══════════════════════════════════════════ */
.app-layout {
    display:flex;
    height:100vh;
    width:100vw;
    overflow:hidden;
}

/* ══════════════════════════════════════════
   SIDEBAR
══════════════════════════════════════════ */
.sidebar {
    width: var(--sidebar-w);
    min-width: var(--sidebar-w);
    background: var(--bg-sidebar);
    border-right: 1px solid var(--b1);
    display:flex;
    flex-direction:column;
    z-index:200;
    transition: transform var(--dur) var(--ease);
    /* Subtle inner right edge highlight */
    box-shadow: inset -1px 0 0 rgba(255,255,255,0.03);
}

/* Brand */
.sidebar-brand {
    display:flex;
    align-items:center;
    gap:13px;
    padding:26px 22px 22px;
    border-bottom:1px solid var(--b1);
    flex-shrink:0;
}

.brand-logo-wrap {
    width:46px; height:46px;
    border-radius:12px;
    background: var(--grad);
    padding:2px;
    box-shadow: 0 0 20px rgba(79,112,232,0.22);
    flex-shrink:0;
}

.brand-logo {
    width:100%; height:100%;
    border-radius:10px;
    object-fit:cover;
    display:block;
}

.brand-title {
    font-size:1.15rem;
    font-weight:800;
    background: var(--grad-text);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}

.brand-tagline {
    font-size:0.68rem;
    color: var(--t3);
    margin-top:3px;
    font-weight:400;
    letter-spacing:0.01em;
}

/* Nav */
.sidebar-nav {
    flex:1;
    padding:14px 10px;
    display:flex;
    flex-direction:column;
    gap:3px;
    overflow-y:auto;
}

.nav-btn {
    display:flex;
    align-items:center;
    gap:11px;
    padding:12px 14px;
    border:none;
    border-radius:var(--r-sm);
    background:transparent;
    color: var(--t2);
    font-size:0.9rem;
    font-weight:600;
    cursor:pointer;
    transition:all var(--dur) var(--ease);
    text-align:left;
    width:100%;
}

.nav-btn:hover {
    background: var(--bg-card-hv);
    color: var(--t1);
    transform:translateX(2px);
}

.nav-btn.active {
    background: var(--bg-nav-act);
    color: #aabbff;
    border:1px solid rgba(79,112,232,0.2);
}

.nav-icon {
    width:18px; height:18px;
    flex-shrink:0;
    opacity:0.9;
}

/* Sidebar Bottom */
.sidebar-bottom {
    padding:16px 12px;
    border-top:1px solid var(--b1);
    display:flex;
    flex-direction:column;
    gap:10px;
    flex-shrink:0;
}

.api-status {
    display:flex;
    align-items:center;
    gap:8px;
    font-size:0.77rem;
    color: var(--t3);
    padding:8px 11px;
    background:rgba(255,255,255,0.025);
    border-radius:var(--r-xs);
    border:1px solid var(--b1);
}

.status-dot {
    width:7px; height:7px;
    border-radius:50%;
    background: var(--t3);
    flex-shrink:0;
    transition:background 0.4s, box-shadow 0.4s;
}

.status-dot.online  { background:var(--green); box-shadow:0 0 7px rgba(26,158,116,0.6); animation:pGreen 2.5s infinite; }
.status-dot.offline { background:var(--red); }
.status-dot.warning { background:var(--amber); box-shadow:0 0 7px rgba(200,140,30,0.6); animation:pAmber 1.2s infinite; }
.status-dot.connecting { background:var(--amber); animation:pAmber 1s infinite; }

@keyframes pGreen  { 0%,100%{box-shadow:0 0 5px rgba(26,158,116,0.5)} 50%{box-shadow:0 0 12px rgba(26,158,116,0.8)} }
@keyframes pAmber  { 0%,100%{opacity:1} 50%{opacity:0.35} }

.sidebar-actions {
    display:flex;
    gap:7px;
}

.action-btn {
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    padding:8px 10px;
    background:rgba(255,255,255,0.035);
    border:1px solid var(--b1);
    border-radius:var(--r-xs);
    color: var(--t2);
    font-size:0.76rem;
    font-weight:600;
    cursor:pointer;
    transition:all var(--dur);
}

.action-btn svg { width:13px; height:13px; }
.action-btn:hover { background:rgba(255,255,255,0.07); color:var(--t1); border-color:var(--b2); }

.version-badge {
    font-size:0.67rem;
    color:var(--t3);
    text-align:center;
    letter-spacing:0.03em;
}

/* ══════════════════════════════════════════
   TOPBAR
══════════════════════════════════════════ */
.main-wrap {
    flex:1;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    min-width:0;
}

.topbar {
    height: var(--topbar-h);
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 32px;
    border-bottom:1px solid var(--b1);
    background:rgba(7,12,24,0.82);
    backdrop-filter:blur(18px);
    flex-shrink:0;
}

.topbar-left { display:flex; align-items:center; gap:14px; }

.hamburger {
    display:none;
    width:34px; height:34px;
    border:none; background:none;
    color:var(--t2); cursor:pointer;
    padding:7px; border-radius:var(--r-xs);
    align-items:center; justify-content:center;
}
.hamburger svg { width:20px; height:20px; }
.hamburger:hover { background:var(--bg-card); color:var(--t1); }

.page-title {
    font-size:1.35rem;
    font-weight:800;
    color: var(--t1);
    letter-spacing:-0.02em;
}

.topbar-right { display:flex; align-items:center; gap:14px; }

.search-wrap {
    display:flex;
    align-items:center;
    gap:9px;
    background: var(--bg-input);
    border:1px solid var(--b1);
    border-radius:100px;
    padding:8px 18px;
    width:256px;
    transition:all var(--dur);
}
.search-wrap:focus-within { border-color:var(--indigo); box-shadow:0 0 0 3px var(--indigo-ring); }
.search-ico { width:14px; height:14px; color:var(--t3); flex-shrink:0; }
.search-inp {
    background:none; border:none; color:var(--t1);
    font-size:0.875rem; font-family:inherit;
    outline:none; width:100%;
}
.search-inp::placeholder { color:var(--t3); }

.topbar-time {
    font-size:0.78rem;
    color:var(--t3);
    font-variant-numeric:tabular-nums;
    white-space:nowrap;
}

/* ══════════════════════════════════════════
   VIEWPORT & SECTIONS
══════════════════════════════════════════ */
.viewport {
    flex:1;
    overflow-y:auto;
    padding:32px 36px;
    scrollbar-width:thin;
    scrollbar-color:rgba(255,255,255,0.06) transparent;
}
.viewport::-webkit-scrollbar { width:4px; }
.viewport::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.07); border-radius:3px; }

.section { display:none; animation:secIn 0.45s var(--ease) both; }
.section.active { display:block; }

@keyframes secIn {
    from { opacity:0; transform:translateY(14px); }
    to   { opacity:1; transform:translateY(0); }
}

/* ══════════════════════════════════════════
   STAT CARDS
══════════════════════════════════════════ */
.stat-row {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
    margin-bottom:24px;
}

.stat-card {
    background: var(--bg-card);
    border:1px solid var(--b1);
    border-radius:var(--r);
    padding:24px 22px 20px;
    position:relative;
    overflow:hidden;
    cursor:default;
    transition:transform var(--dur) var(--ease), box-shadow var(--dur), border-color var(--dur);
    box-shadow: var(--sh-card);
}

/* Thin gradient top-edge line appears on hover */
.stat-card::after {
    content:'';
    position:absolute;
    top:0; left:0; right:0;
    height:1px;
    background: var(--grad);
    transform:scaleX(0);
    transform-origin:left;
    transition:transform 0.4s var(--ease);
}

.stat-card:hover {
    transform:translateY(-5px);
    border-color:rgba(79,112,232,0.18);
    box-shadow: var(--sh-hover);
}

.stat-card:hover::after { transform:scaleX(1); }

.stat-label {
    font-size:0.7rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.09em;
    color:var(--t3);
    margin-bottom:10px;
}

.stat-value {
    font-family:'Syne',sans-serif;
    font-size:2rem;
    font-weight:800;
    color: var(--t1);
    line-height:1;
    letter-spacing:-0.025em;
}

.stat-value.stat-sm { font-size:1.2rem; letter-spacing:-0.01em; }

.stat-icon-wrap {
    position:absolute;
    top:20px; right:20px;
    width:40px; height:40px;
    border-radius:10px;
    display:flex; align-items:center; justify-content:center;
    font-size:1.25rem;
}

.stat-blue   { background:rgba(79,112,232,0.1);  }
.stat-purple { background:rgba(124,92,219,0.1);  }
.stat-gold   { background:rgba(200,140,30,0.1);  }
.stat-green  { background:rgba(26,158,116,0.1);  }

/* ══════════════════════════════════════════
   CHARTS GRID
══════════════════════════════════════════ */
.charts-grid {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:16px;
}

.chart-card {
    background:var(--bg-card);
    border:1px solid var(--b1);
    border-radius:var(--r);
    padding:26px;
    display:flex;
    flex-direction:column;
    box-shadow:var(--sh-card);
    transition:box-shadow var(--dur);
}

.chart-card:hover { box-shadow:var(--sh-hover); }
.chart-card.span-2 { grid-column:span 2; }

.chart-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:20px;
}

.chart-header h3 {
    font-size:0.9rem;
    font-weight:700;
    color:var(--t2);
    letter-spacing:0.01em;
}

.chart-badge {
    font-size:0.65rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.08em;
    padding:3px 9px;
    background:rgba(79,112,232,0.08);
    color: rgba(127,163,255,0.9);
    border-radius:100px;
    border:1px solid rgba(79,112,232,0.15);
}

.chart-body {
    flex:1;
    position:relative;
    min-height:220px;
}

.chart-card canvas { width:100% !important; height:100% !important; }

/* ══════════════════════════════════════════
   SECTION HEADERS
══════════════════════════════════════════ */
.section-hd {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    margin-bottom:20px;
    flex-wrap:wrap;
}

.section-hd h3 { font-size:1.25rem; color:var(--t1); }

.sect-desc {
    font-size:0.82rem;
    color:var(--t3);
    margin-top:5px;
    line-height:1.6;
    max-width:480px;
}

/* ══════════════════════════════════════════
   SEARCH BAR (in-page)
══════════════════════════════════════════ */
.search-bar-full {
    display:flex;
    align-items:center;
    gap:10px;
    background:var(--bg-card);
    border:1px solid var(--b1);
    border-radius:var(--r-sm);
    padding:11px 16px;
    margin-bottom:16px;
    transition:border-color var(--dur);
}

.search-bar-full svg { width:15px; height:15px; color:var(--t3); flex-shrink:0; }
.search-bar-full:focus-within { border-color:var(--indigo); box-shadow:0 0 0 3px var(--indigo-ring); }
.search-bar-full input { flex:1; background:none; border:none; color:var(--t1); font-size:0.875rem; font-family:inherit; outline:none; }
.search-bar-full input::placeholder { color:var(--t3); }

/* ══════════════════════════════════════════
   GLASS TABLE
══════════════════════════════════════════ */
.glass-table-wrap {
    background:var(--bg-card);
    border:1px solid var(--b1);
    border-radius:var(--r);
    overflow:hidden;
    box-shadow:var(--sh-card);
}

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

.glass-table thead th {
    padding:13px 18px;
    font-size:0.68rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.08em;
    color:var(--t3);
    background:rgba(255,255,255,0.018);
    border-bottom:1px solid var(--b1);
    text-align:left;
    white-space:nowrap;
}

.glass-table tbody td {
    padding:15px 18px;
    font-size:0.86rem;
    border-bottom:1px solid rgba(255,255,255,0.025);
    vertical-align:middle;
    color:var(--t2);
}

.glass-table tbody tr:last-child td { border-bottom:none; }
.glass-table tbody tr { transition:background var(--dur); }
.glass-table tbody tr:hover { background:rgba(255,255,255,0.02); }

/* Table member cell */
.member-cell { display:flex; align-items:center; gap:11px; }

.member-avatar {
    width:36px; height:36px;
    border-radius:9px;
    object-fit:cover;
    border:1px solid var(--b2);
    background:rgba(255,255,255,0.04);
    flex-shrink:0;
}

.member-name { font-weight:600; font-size:0.875rem; color:var(--t1); }

/* Badges */
.badge {
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding:3px 10px;
    border-radius:100px;
    font-size:0.68rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.05em;
    white-space:nowrap;
}

.badge-active   { background:rgba(26,158,116,0.12);  color:#2fd4a4; border:1px solid rgba(26,158,116,0.2);  }
.badge-semi     { background:rgba(200,140,30,0.1);   color:#e0aa3c; border:1px solid rgba(200,140,30,0.2);  }
.badge-inactive { background:rgba(200,75,75,0.1);    color:#e06666; border:1px solid rgba(200,75,75,0.2);   }

.badge-dot { width:5px; height:5px; border-radius:50%; background:currentColor; flex-shrink:0; }

/* Role chip */
.role-chip {
    display:inline-block;
    padding:3px 9px;
    border-radius:var(--r-xs);
    font-size:0.69rem;
    font-weight:600;
    background:rgba(124,92,219,0.1);
    color:rgba(180,150,255,0.9);
    border:1px solid rgba(124,92,219,0.2);
    max-width:200px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    vertical-align:middle;
}

/* Score */
.score-val {
    font-weight:700;
    font-size:0.875rem;
    background: var(--grad-text);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}

/* Table utilities */
.td-num    { color:var(--t3); font-weight:600; font-size:0.78rem; text-align:center; width:40px; }
.td-muted  { color:var(--t3); font-size:0.8rem; }
.uid-code  {
    font-family:'SFMono-Regular','Consolas',monospace;
    font-size:0.75rem;
    color:var(--t3);
    background:rgba(255,255,255,0.04);
    padding:2px 8px;
    border-radius:4px;
    border:1px solid var(--b1);
    display:inline-block;
    max-width:170px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    vertical-align:middle;
}

.row-actions { display:flex; gap:7px; align-items:center; }

/* Empty state */
.table-empty { padding:56px 24px; text-align:center; }
.empty-icon  { font-size:2.6rem; margin-bottom:14px; }
.table-empty p { color:var(--t3); font-size:0.875rem; max-width:340px; margin:0 auto; line-height:1.65; }

/* ══════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════ */
.btn {
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:9px 18px;
    border-radius:var(--r-sm);
    font-family:'Inter',sans-serif;
    font-size:0.85rem;
    font-weight:700;
    border:none;
    cursor:pointer;
    transition:all var(--dur) var(--ease);
    white-space:nowrap;
    position:relative;
    overflow:hidden;
    letter-spacing:0.01em;
}

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

/* Shimmer sweep on hover */
.btn::after {
    content:'';
    position:absolute; inset:0;
    background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.12) 50%,transparent 100%);
    transform:translateX(-100%);
    transition:transform 0.55s;
}
.btn:hover::after { transform:translateX(100%); }

.btn-primary {
    background:var(--grad);
    color:#fff;
    box-shadow:var(--sh-btn);
}
.btn-primary:hover   { transform:translateY(-2px); box-shadow:0 8px 26px rgba(79,112,232,0.5); }
.btn-primary:active  { transform:translateY(0); }

.btn-ghost {
    background:rgba(255,255,255,0.05);
    color:var(--t2);
    border:1px solid var(--b1);
}
.btn-ghost:hover { background:rgba(255,255,255,0.09); color:var(--t1); border-color:var(--b2); }

.btn-danger {
    background:rgba(200,75,75,0.08);
    color:var(--red);
    border:1px solid rgba(200,75,75,0.2);
}
.btn-danger:hover { background:var(--red); color:#fff; border-color:var(--red); box-shadow:0 4px 16px rgba(200,75,75,0.35); }

.btn-sm { padding:6px 14px; font-size:0.78rem; }

.btn:disabled {
    opacity:0.45;
    cursor:not-allowed;
    pointer-events:none;
}

/* ══════════════════════════════════════════
   ANALYTICS / PERFORMANCE GRID
══════════════════════════════════════════ */
.sort-pill-group { display:flex; gap:7px; flex-wrap:wrap; }

.sort-pill {
    padding:7px 15px;
    border-radius:100px;
    font-size:0.78rem;
    font-weight:700;
    font-family:'Inter',sans-serif;
    background:rgba(255,255,255,0.04);
    border:1px solid var(--b1);
    color:var(--t2);
    cursor:pointer;
    transition:all var(--dur) var(--ease);
}

.sort-pill:hover { background:rgba(255,255,255,0.07); color:var(--t1); }
.sort-pill.active {
    background:var(--grad);
    color:#fff;
    border-color:transparent;
    box-shadow:0 4px 14px rgba(79,112,232,0.3);
}

.perf-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(295px,1fr));
    gap:16px;
}

.perf-card {
    background:var(--bg-card);
    border:1px solid var(--b1);
    border-radius:var(--r);
    padding:24px;
    transition:all var(--dur) var(--ease);
    position:relative;
    overflow:hidden;
    box-shadow:var(--sh-card);
}

.perf-card:hover {
    transform:translateY(-4px);
    border-color:rgba(79,112,232,0.2);
    box-shadow:var(--sh-hover);
}

/* Top-performer gold treatment */
.perf-card.top-performer {
    border-color:rgba(200,140,30,0.25);
    background:linear-gradient(160deg, rgba(200,136,26,0.07) 0%, var(--bg-card) 55%);
}

.perf-card.top-performer::before {
    content:'';
    position:absolute;
    top:0; left:0; right:0; height:1px;
    background:var(--grad-gold);
}

.perf-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:18px;
}

.perf-user { display:flex; align-items:center; gap:12px; }

.perf-avatar {
    width:46px; height:46px;
    border-radius:12px;
    object-fit:cover;
    border:2px solid var(--b1);
    background:rgba(255,255,255,0.04);
}

.top-performer .perf-avatar {
    border-color:rgba(200,140,30,0.4);
    box-shadow:0 0 14px rgba(200,140,30,0.18);
}

.perf-name { font-size:0.95rem; font-weight:700; color:var(--t1); }
.perf-role { font-size:0.72rem; color:var(--t3); margin-top:2px; }

.rank-num { color:var(--t3); font-family:'Syne',sans-serif; font-weight:800; font-size:1.2rem; }

.crown-icon {
    font-size:1.5rem;
    display:inline-block;
    filter:drop-shadow(0 0 6px rgba(200,140,30,0.6));
    animation:crown 3s ease-in-out infinite;
}
@keyframes crown {
    0%,100%{transform:scale(1) rotate(-4deg)}
    50%{transform:scale(1.15) rotate(4deg)}
}

.perf-metrics { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }

.perf-metric {
    background:rgba(255,255,255,0.025);
    border:1px solid var(--b1);
    border-radius:var(--r-sm);
    padding:13px 14px;
}

.perf-metric-label {
    font-size:0.65rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.08em;
    color:var(--t3);
    margin-bottom:5px;
}

.perf-metric-value {
    font-size:1.2rem;
    font-weight:800;
    font-family:'Syne',sans-serif;
    color:var(--t1);
}

.perf-score {
    background:var(--grad-text);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}

/* ══════════════════════════════════════════
   MODALS
══════════════════════════════════════════ */
.modal-overlay {
    display:none;
    position:fixed; inset:0;
    background:rgba(0,0,0,0.72);
    backdrop-filter:blur(8px);
    z-index:500;
    align-items:center;
    justify-content:center;
    padding:24px;
}

.modal-overlay.open { display:flex; animation:mFade 0.28s var(--ease); }

@keyframes mFade { from{opacity:0} to{opacity:1} }

.modal-box {
    background:var(--bg-modal);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:18px;
    padding:32px;
    width:100%; max-width:520px;
    box-shadow:var(--sh-modal);
    animation:mSlide 0.3s var(--ease);
    max-height:90vh;
    overflow-y:auto;
}

@keyframes mSlide {
    from{transform:translateY(20px) scale(0.98);opacity:0}
    to  {transform:translateY(0)    scale(1);   opacity:1}
}

.modal-hd {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:6px;
}

.modal-hd h3 { font-size:1.1rem; color:var(--t1); }

.modal-close {
    width:30px; height:30px;
    display:flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,0.05);
    border:none; border-radius:7px;
    color:var(--t2); cursor:pointer;
    transition:all var(--dur);
}
.modal-close svg { width:15px; height:15px; }
.modal-close:hover { background:rgba(200,75,75,0.12); color:var(--red); }

.modal-sub { font-size:0.82rem; color:var(--t3); margin-bottom:24px; line-height:1.65; }

.form-grid {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:16px;
    margin-bottom:8px;
}

.field { display:flex; flex-direction:column; gap:7px; }

.field label {
    font-size:0.76rem;
    font-weight:700;
    color:var(--t2);
    letter-spacing:0.02em;
}

.field input,
.field select {
    background:var(--bg-input);
    border:1px solid var(--b1);
    border-radius:var(--r-sm);
    padding:11px 13px;
    color:var(--t1);
    font-family:'Inter',sans-serif;
    font-size:0.875rem;
    outline:none;
    transition:all var(--dur);
    -webkit-appearance:none;
    appearance:none;
}

.field select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%238a9bbf' stroke-width='2.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 8.25l-7.5 7.5-7.5-7.5' /%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px;
    padding-right: 40px;
}

.field input:focus,
.field select:focus {
    border-color:var(--indigo);
    box-shadow:0 0 0 3px var(--indigo-ring);
    background:rgba(79,112,232,0.04);
}

.field input[readonly] { opacity:0.5; cursor:not-allowed; border-style:dashed; }
.field select option   { background:var(--bg-modal); }

.modal-ft { display:flex; justify-content:flex-end; gap:10px; margin-top:24px; }

/* ══════════════════════════════════════════
   TOASTS
══════════════════════════════════════════ */
.toast-stack {
    position:fixed;
    bottom:24px; right:24px;
    z-index:9999;
    display:flex;
    flex-direction:column;
    gap:9px;
    pointer-events:none;
}

.toast {
    display:flex;
    align-items:center;
    gap:11px;
    padding:12px 18px;
    background:var(--bg-modal);
    border:1px solid var(--b2);
    border-radius:var(--r-sm);
    box-shadow:0 16px 40px rgba(0,0,0,0.45);
    pointer-events:auto;
    animation:tIn 0.32s var(--ease) both;
    max-width:320px;
}

.toast.out { animation:tOut 0.32s var(--ease) forwards; }

@keyframes tIn  { from{transform:translateX(110%);opacity:0} to{transform:translateX(0);opacity:1} }
@keyframes tOut { from{transform:translateX(0);opacity:1} to{transform:translateX(110%);opacity:0} }

.toast.success { border-left:2px solid var(--green); }
.toast.error   { border-left:2px solid var(--red);   }
.toast.info    { border-left:2px solid var(--indigo); }

.toast-ico { font-size:1rem; flex-shrink:0; }
.toast-msg { font-size:0.84rem; font-weight:500; color:var(--t1); line-height:1.4; }

/* ══════════════════════════════════════════
   SCROLLBAR
══════════════════════════════════════════ */
* { scrollbar-width:thin; scrollbar-color:rgba(255,255,255,0.06) transparent; }
*::-webkit-scrollbar       { width:4px; height:4px; }
*::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.07); border-radius:3px; }

/* ══════════════════════════════════════════
   FOCUS
══════════════════════════════════════════ */
:focus-visible { outline:2px solid rgba(79,112,232,0.5); outline-offset:2px; }

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
@media (max-width:1200px) {
    .stat-row { grid-template-columns:repeat(2,1fr); }
}

@media (max-width:1000px) {
    .charts-grid { grid-template-columns:1fr; }
    .chart-card.span-2 { grid-column:span 1; }
}

@media (max-width:860px) {
    .sidebar {
        position:fixed; top:0; left:0; bottom:0;
        transform:translateX(-100%);
        box-shadow:8px 0 40px rgba(0,0,0,0.6);
    }
    .sidebar.open { transform:translateX(0); }
    .hamburger  { display:flex; }
    .topbar     { padding:0 20px; }
    .viewport   { padding:24px 18px; }
    .search-wrap{ width:180px; }
    .form-grid  { grid-template-columns:1fr; }
}

@media (max-width:600px) {
    .stat-row   { grid-template-columns:1fr; }
    .section-hd { flex-direction:column; gap:12px; }
    .perf-grid  { grid-template-columns:1fr; }
    .search-wrap{ display:none; }
    .viewport   { padding:18px 14px; }
}

/* ══════════════════════════════════════════
   CHART CONTROLS
══════════════════════════════════════════ */
.chart-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.range-btn {
    padding: 3px 10px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid var(--b1);
    border-radius: var(--r-xs);
    color: var(--t2);
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--dur) var(--ease);
}

.range-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--t1);
    border-color: var(--b2);
}

.range-btn.active {
    background: var(--bg-nav-act);
    color: #aabbff;
    border-color: rgba(79, 112, 232, 0.3);
}