:root{
    --sidebar-bg:#0B1220;
    --sidebar-hover:#17253F;
    --sidebar-text:#8FA3BF;

    --brand:#4F46E5;
    --brand-2:#7C3AED;
    --brand-hover:#4338CA;
    --brand-soft:#EEF2FF;
    --brand-glow:rgba(79,70,229,.22);

    --canvas:#F4F6FB;
    --card:#FFFFFF;
    --text:#0F172A;
    --muted:#64748B;
    --muted-2:#94A3B8;
    --line:#E4E9F2;
    --line-strong:#CBD5E1;

    --surface-2:#F7F9FC;
    --surface-3:#F6F8FC;
    --surface-active:#F1F5F9;
    --surface-hover:#FAFBFE;
    --input-bg:#FFFFFF;
    --topbar-bg:rgba(255,255,255,.86);
    --modal-bg:#FFFFFF;
    --modal-foot-bg:#FAFBFE;
    --toast-bg:#FFFFFF;
    --statusbar-bg:#FFFFFF;
    --sidebar-toggle-bg:#FFFFFF;
    --icon-btn-bg:#FFFFFF;
    --btn-outline-bg:#FFFFFF;
    --btn-outline-hover-bg:#F8FAFC;
    --search-bg:#F6F8FC;
    --search-focus-bg:#FFFFFF;
    --perf-bar-bg:#EEF2F7;
    --info-strip-bg:#F7F9FC;
    --row-hover-bg:#FAFBFE;
    --sheet-cell-border:#EDF1F7;
    --sheet-hdr-2-bg:#F8FAFD;
    --sheet-foot-bg:#F4F7FB;
    --sheet-input-hover-bg:#F1F5F9;
    --sheet-input-hover-border:#E2E8F0;
    --sheet-mini-input-bg:#FFFFFF;
    --invalid-bg:#FFF7F7;
    --badge-neutral-bg:#F1F5F9;
    --modal-scrim:rgba(11,18,32,.55);
    --scrim-bg:rgba(11,18,32,.55);
    --export-card-bg:#F9FBFE;
    --btn-danger-border:#FECACA;
    --btn-danger-hover-border:#FCA5A5;
    --btn-dark-bg:#0B1220;
    --btn-dark-hover-bg:#1B2942;
    --avatar-bg:linear-gradient(135deg,#E0E7FF,#EDE9FE);
    --avatar-color:#4338CA;
    --code-bg:#0B1220;
    --code-border:#1E2B42;
    --code-text:#CBD5E1;

    --green:#10B981;  --green-soft:#ECFDF5;  --green-ink:#047857;
    --amber:#F59E0B;  --amber-soft:#FFFBEB;  --amber-ink:#B45309;
    --red:#EF4444;    --red-soft:#FEF2F2;    --red-ink:#B91C1C;
    --blue:#3B82F6;   --blue-soft:#EFF6FF;   --blue-ink:#1D4ED8;

    --g-aplus-bg:#D1FAE5; --g-aplus-ink:#065F46;
    --g-a-bg:#DCFCE7;     --g-a-ink:#166534;
    --g-b-bg:#DBEAFE;     --g-b-ink:#1E40AF;
    --g-c-bg:#FEF3C7;     --g-c-ink:#92400E;
    --g-d-bg:#FFEDD5;     --g-d-ink:#9A3412;
    --g-f-bg:#FEE2E2;     --g-f-ink:#991B1B;

    --font-heading:'Plus Jakarta Sans',system-ui,sans-serif;
    --font-body:'Inter',system-ui,sans-serif;

    --r-sm:8px; --r-md:12px; --r-lg:18px;
    --sh-xs:0 1px 2px rgba(15,23,42,.05);
    --sh-sm:0 2px 6px -1px rgba(15,23,42,.07);
    --sh-md:0 10px 24px -10px rgba(15,23,42,.16);
    --sh-lg:0 24px 48px -16px rgba(15,23,42,.22);
    --ease:all .22s cubic-bezier(.4,0,.2,1);

    --sidebar-w:266px;
    --sidebar-w-compact:72px;

    color-scheme: light;
}

[data-theme="dark"]{
    --canvas:#0F172A;
    --card:#1E293B;
    --text:#E2E8F0;
    --muted:#94A3B8;
    --muted-2:#64748B;
    --line:#2D3C54;
    --line-strong:#3E4F6B;

    --surface-2:#243449;
    --surface-3:#172033;
    --surface-active:#2D3C54;
    --surface-hover:#253651;
    --input-bg:#172033;
    --topbar-bg:rgba(15,23,42,.86);
    --modal-bg:#1E293B;
    --modal-foot-bg:#172033;
    --toast-bg:#1E293B;
    --statusbar-bg:#1E293B;
    --sidebar-toggle-bg:#1E293B;
    --icon-btn-bg:#1E293B;
    --btn-outline-bg:#1E293B;
    --btn-outline-hover-bg:#243449;
    --search-bg:#172033;
    --search-focus-bg:#1E293B;
    --perf-bar-bg:#243449;
    --info-strip-bg:#172033;
    --row-hover-bg:#253651;
    --sheet-cell-border:#2A3A52;
    --sheet-hdr-2-bg:#243449;
    --sheet-foot-bg:#243449;
    --sheet-input-hover-bg:#243449;
    --sheet-input-hover-border:#3E4F6B;
    --sheet-mini-input-bg:#172033;
    --invalid-bg:#2A1A1A;
    --badge-neutral-bg:#2D3C54;
    --modal-scrim:rgba(2,6,23,.72);
    --scrim-bg:rgba(2,6,23,.72);
    --export-card-bg:#172033;
    --btn-danger-border:#7F1D1D;
    --btn-danger-hover-border:#991B1B;
    --btn-dark-bg:#334155;
    --btn-dark-hover-bg:#475569;
    --avatar-bg:linear-gradient(135deg,#312E81,#4C1D95);
    --avatar-color:#C7D2FE;
    --code-bg:#0A1425;
    --code-border:#2A3A52;
    --code-text:#CBD5E1;

    --brand-soft:#1E1B4B;
    --brand-hover:#A5B4FC;
    --brand-glow:rgba(124,58,237,.28);

    --green-soft:#064E3B;  --green-ink:#6EE7B7;
    --amber-soft:#78350F;  --amber-ink:#FCD34D;
    --red-soft:#7F1D1D;    --red-ink:#FCA5A5;
    --blue-soft:#1E3A8A;   --blue-ink:#93C5FD;

    --g-aplus-bg:#064E3B; --g-aplus-ink:#6EE7B7;
    --g-a-bg:#14532D;     --g-a-ink:#86EFAC;
    --g-b-bg:#1E3A8A;     --g-b-ink:#93C5FD;
    --g-c-bg:#78350F;     --g-c-ink:#FCD34D;
    --g-d-bg:#7C2D12;     --g-d-ink:#FDBA74;
    --g-f-bg:#7F1D1D;     --g-f-ink:#FCA5A5;

    --sh-xs:0 1px 2px rgba(0,0,0,.3);
    --sh-sm:0 2px 6px -1px rgba(0,0,0,.4);
    --sh-md:0 10px 24px -10px rgba(0,0,0,.55);
    --sh-lg:0 24px 48px -16px rgba(0,0,0,.7);

    color-scheme: dark;
}

body.theme-transitioning,
body.theme-transitioning *,
body.theme-transitioning *::before,
body.theme-transitioning *::after{
    transition: background-color .3s ease, border-color .3s ease, color .3s ease !important;
}

*,*::before,*::after{box-sizing:border-box;}
*{margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;}

body{
    font-family:var(--font-body);
    background:var(--canvas);
    color:var(--text);
    font-size:13.5px;
    line-height:1.55;
    min-height:100vh;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

::-webkit-scrollbar{width:9px;height:9px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:#CBD5E1;border-radius:99px;border:2px solid transparent;background-clip:content-box;}
::-webkit-scrollbar-thumb:hover{background:#94A3B8;background-clip:content-box;}
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#334155;background-clip:content-box;}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover{background:#475569;background-clip:content-box;}

@keyframes fadeUp{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
@keyframes popIn{from{opacity:0;transform:scale(.96);}to{opacity:1;transform:scale(1);}}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.25;}}
@keyframes slideIn{from{opacity:0;transform:translateX(24px);}to{opacity:1;transform:translateX(0);}}
@keyframes themeRotate{
    0%{transform:rotate(0) scale(1);}
    50%{transform:rotate(180deg) scale(1.3);}
    100%{transform:rotate(360deg) scale(1);}
}

/* ============================================================
   NEW: LOGIN SCREEN
   ============================================================ */
.login-screen{
    position:fixed;inset:0;z-index:5000;
    display:none;align-items:center;justify-content:center;
    padding:20px;
    background:
        radial-gradient(circle at 20% 20%, rgba(79,70,229,.18) 0%, transparent 45%),
        radial-gradient(circle at 80% 80%, rgba(124,58,237,.16) 0%, transparent 45%),
        linear-gradient(135deg,#0B1220 0%,#101D33 55%,#0B1220 100%);
    overflow-y:auto;
}
.login-screen.show{display:flex;}
.login-card{
    width:100%;max-width:420px;
    background:var(--card);
    border-radius:var(--r-lg);
    box-shadow:0 24px 60px -20px rgba(0,0,0,.65);
    padding:34px 30px 28px;
    animation:popIn .3s cubic-bezier(.4,0,.2,1);
    border:1px solid var(--line);
}
.login-logo{
    width:66px;height:66px;
    display:grid;place-items:center;
    border-radius:19px;font-size:31px;
    background:linear-gradient(135deg,var(--brand),var(--brand-2));
    box-shadow:0 12px 30px -10px rgba(79,70,229,.8);
    margin:0 auto 16px;
}
.login-card h1{
    font-family:var(--font-heading);
    font-size:22px;font-weight:800;
    text-align:center;letter-spacing:-.5px;
}
.login-sub{
    text-align:center;color:var(--muted);font-size:12.5px;
    margin-bottom:24px;margin-top:2px;
}
.login-card .field{margin-bottom:14px;}
.login-card .field label{display:block;margin-bottom:6px;font-size:12px;}
.login-card .field input{height:42px;font-size:13px;}
.login-error{
    color:var(--red-ink);background:var(--red-soft);
    border:1px solid var(--btn-danger-border);
    padding:9px 12px;border-radius:8px;
    font-size:12.5px;font-weight:600;
    margin-bottom:12px;display:none;
}
.login-error.show{display:block;animation:fadeUp .2s ease-out;}
.login-btn{
    width:100%;height:42px;
    background:linear-gradient(135deg,var(--brand),var(--brand-2));
    color:#fff;border:none;border-radius:9px;
    font-family:var(--font-heading);font-size:13.5px;font-weight:800;
    cursor:pointer;letter-spacing:.2px;
    box-shadow:0 10px 22px -10px rgba(79,70,229,.95);
    transition:var(--ease);
}
.login-btn:hover{filter:brightness(1.07);transform:translateY(-1px);}
.login-btn:active{transform:translateY(0);}
.login-hint{
    margin-top:20px;padding-top:16px;
    border-top:1px solid var(--line);
    font-size:11.5px;color:var(--muted);text-align:center;line-height:1.75;
}
.login-hint strong{color:var(--text);}
.login-hint code{
    display:inline-block;
    background:var(--surface-active);
    padding:1px 7px;border-radius:5px;
    font-family:ui-monospace,Menlo,monospace;
    font-size:11px;color:var(--brand-hover);
    border:1px solid var(--line);
    margin:0 2px;
}
[data-theme="light"] .login-hint code{color:var(--brand);}
.login-register-btn{
    width:100%;margin-top:14px;height:40px;
    background:transparent;
    border:1px dashed var(--line-strong);
    color:var(--text);border-radius:9px;
    font-family:var(--font-heading);font-size:12.5px;font-weight:700;
    cursor:pointer;transition:var(--ease);
}
.login-register-btn:hover{
    border-color:var(--brand);color:var(--brand-hover);
    background:var(--brand-soft);border-style:solid;
}

/* ============================================================
   APP SHELL
   ============================================================ */
.app-shell{display:block;min-height:100vh;}

.sidebar{
    width:var(--sidebar-w);
    position:fixed;top:0;bottom:0;left:0;
    z-index:200;
    display:flex;flex-direction:column;
    background:linear-gradient(180deg,#0B1220 0%,#101D33 55%,#0B1220 100%);
    border-right:1px solid rgba(255,255,255,.06);
    transition:width .28s cubic-bezier(.4,0,.2,1), transform .3s cubic-bezier(.4,0,.2,1);
}
[data-theme="dark"] .sidebar{border-right:1px solid rgba(255,255,255,.09);}
.sidebar-brand{
    display:flex;align-items:center;gap:13px;
    padding:22px 20px;
    border-bottom:1px solid rgba(255,255,255,.07);
    overflow:hidden;
}
.brand-icon{
    width:44px;height:44px;flex:0 0 44px;
    display:grid;place-items:center;
    border-radius:13px;font-size:21px;
    background:linear-gradient(135deg,var(--brand),var(--brand-2));
    box-shadow:0 8px 20px -6px rgba(79,70,229,.75);
}
.brand-text{white-space:nowrap;overflow:hidden;min-width:0;}
.brand-text h1{
    font-family:var(--font-heading);
    font-size:15.5px;font-weight:800;color:#fff;letter-spacing:-.3px;line-height:1.2;
    overflow:hidden;text-overflow:ellipsis;
}
.brand-text p{font-size:10.5px;color:var(--sidebar-text);font-weight:600;letter-spacing:.4px;text-transform:uppercase;margin-top:2px;}

.sidebar-toggle{
    position:absolute;
    right:-13px;top:82px;
    width:26px;height:26px;
    border-radius:50%;
    background:var(--sidebar-toggle-bg);
    border:1px solid var(--line-strong);
    color:var(--muted);
    font-size:12px;font-weight:800;
    cursor:pointer;
    display:grid;place-items:center;
    box-shadow:var(--sh-sm);
    z-index:10;
    transition:var(--ease);
}
.sidebar-toggle:hover{background:var(--brand);color:#fff;border-color:var(--brand);transform:scale(1.1);}

.sidebar-scroll{flex:1;overflow-y:auto;overflow-x:hidden;padding:18px 12px;}
.nav-label{
    font-family:var(--font-heading);
    font-size:10px;font-weight:800;letter-spacing:1.1px;text-transform:uppercase;
    color:#4C6484;padding:8px 12px 6px;
    white-space:nowrap;overflow:hidden;
}
.nav-item{
    width:100%;
    display:flex;align-items:center;gap:11px;
    padding:11px 13px;margin-bottom:3px;
    border:none;border-radius:10px;
    background:transparent;color:var(--sidebar-text);
    font-family:var(--font-heading);font-size:13px;font-weight:600;
    text-align:left;cursor:pointer;
    transition:var(--ease);
    white-space:nowrap;overflow:hidden;
}
.nav-item .nav-icon{font-size:15px;width:20px;text-align:center;flex:0 0 20px;filter:grayscale(.4);transition:var(--ease);}
.nav-item .nav-text{overflow:hidden;text-overflow:ellipsis;transition:opacity .2s;}
.nav-item:hover{background:var(--sidebar-hover);color:#E2E8F0;}
.nav-item:hover .nav-icon{filter:none;}
.nav-item.active{
    background:linear-gradient(90deg,rgba(79,70,229,.98),rgba(124,58,237,.82));
    color:#fff;
    box-shadow:0 8px 18px -8px rgba(79,70,229,.95);
}
.nav-item.active .nav-icon{filter:none;}

.sidebar-footer{
    padding:16px 20px 20px;
    border-top:1px solid rgba(255,255,255,.07);
    font-size:11px;color:#5B7391;line-height:1.7;
    white-space:nowrap;overflow:hidden;
}
.sidebar-footer strong{color:#A9BCD4;font-weight:700;}

body.compact .sidebar{width:var(--sidebar-w-compact);}
body.compact .main{margin-left:var(--sidebar-w-compact);}
body.compact .brand-text,
body.compact .nav-label,
body.compact .nav-text,
body.compact .sidebar-footer{opacity:0;width:0;height:0;padding:0;margin:0;border:none;overflow:hidden;pointer-events:none;}
body.compact .nav-item{justify-content:center;padding:12px;}
body.compact .nav-item .nav-icon{font-size:17px;width:auto;}
body.compact .sidebar-brand{padding:22px 14px;justify-content:center;}
body.compact .sidebar-scroll{padding:18px 8px;}

.scrim{
    position:fixed;inset:0;z-index:190;
    background:var(--scrim-bg);
    backdrop-filter:blur(3px);
    opacity:0;pointer-events:none;transition:opacity .25s;
}
.scrim.show{opacity:1;pointer-events:auto;}

.main{
    margin-left:var(--sidebar-w);
    min-height:100vh;
    display:flex;flex-direction:column;min-width:0;
    transition:margin-left .28s cubic-bezier(.4,0,.2,1);
}

.topbar{
    position:sticky;top:0;z-index:100;
    display:flex;align-items:center;gap:14px;
    padding:0 24px;height:66px;
    background:var(--topbar-bg);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);
    flex-shrink:0;
}
.topbar-left{display:flex;align-items:center;gap:12px;min-width:0;}
.icon-btn{
    width:36px;height:36px;flex:0 0 36px;
    border:1px solid var(--line);border-radius:9px;
    background:var(--icon-btn-bg);color:var(--text);font-size:15px;cursor:pointer;
    display:grid;place-items:center;transition:var(--ease);
}
.icon-btn:hover{background:var(--brand-soft);border-color:var(--brand);color:var(--brand-hover);}
.icon-btn.mobile-only{display:none;}

#btn-theme{font-size:16px;}
#btn-theme .theme-icon{display:inline-block;transition:transform .4s cubic-bezier(.34,1.56,.64,1);}
#btn-theme:hover .theme-icon{transform:rotate(20deg) scale(1.1);}
#btn-theme.spin .theme-icon{animation:themeRotate .55s ease;}

#btn-logout{
    color:var(--red-ink);
    border-color:var(--btn-danger-border);
}
#btn-logout:hover{
    background:var(--red-soft);
    border-color:var(--btn-danger-hover-border);
    color:var(--red-ink);
}

.page-title{
    font-family:var(--font-heading);
    font-size:17.5px;font-weight:800;letter-spacing:-.35px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.topbar-right{display:flex;align-items:center;gap:10px;margin-left:auto;}

.save-pill{
    display:inline-flex;align-items:center;gap:7px;
    padding:7px 13px;border-radius:99px;
    border:1px solid var(--line);background:var(--surface-active);color:var(--muted);
    font-family:var(--font-heading);font-size:11.5px;font-weight:700;
    white-space:nowrap;transition:var(--ease);
}
.save-pill .dot{width:7px;height:7px;border-radius:50%;background:var(--muted-2);transition:var(--ease);}
.save-pill[data-state="saving"]{background:var(--amber-soft);border-color:var(--amber);color:var(--amber-ink);}
.save-pill[data-state="saving"] .dot{background:var(--amber);animation:pulse .9s infinite;}
.save-pill[data-state="saved"]{background:var(--green-soft);border-color:var(--green);color:var(--green-ink);}
.save-pill[data-state="saved"] .dot{background:var(--green);}

.search-wrap{position:relative;width:320px;max-width:100%;}
.search-wrap input{
    width:100%;height:38px;
    padding:0 13px 0 36px;
    border:1px solid var(--line);border-radius:10px;
    background:var(--search-bg);color:var(--text);
    font-family:var(--font-body);font-size:12.5px;
    outline:none;transition:var(--ease);
}
.search-wrap input::placeholder{color:var(--muted-2);}
.search-wrap input:focus{background:var(--search-focus-bg);border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-glow);}
.search-ico{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:12px;color:var(--muted-2);pointer-events:none;}

.search-dropdown{
    position:absolute;top:calc(100% + 8px);left:0;right:0;
    background:var(--modal-bg);border:1px solid var(--line);border-radius:12px;
    box-shadow:var(--sh-lg);z-index:1200;
    max-height:320px;overflow-y:auto;padding:6px;
    animation:fadeUp .18s ease-out;
}
.search-item{
    padding:10px 12px;border-radius:8px;cursor:pointer;
    font-size:12.5px;color:var(--text);transition:var(--ease);
}
.search-item:hover{background:var(--brand-soft);color:var(--brand-hover);}
.search-item strong{font-family:var(--font-heading);font-weight:700;}
.search-empty{padding:16px;text-align:center;color:var(--muted-2);font-size:12.5px;}

.content{padding:24px;flex:1;min-width:0;overflow-x:hidden;}
.view{display:none;animation:fadeUp .28s ease-out;}
.view.active{display:block;}

.statusbar{
    display:flex;align-items:center;justify-content:space-between;gap:14px;
    padding:7px 24px;
    background:var(--statusbar-bg);
    border-top:1px solid var(--line);
    font-family:var(--font-heading);font-size:11px;font-weight:600;
    color:var(--muted-2);
    flex-shrink:0;
    white-space:nowrap;overflow:hidden;
}
.statusbar-left,.statusbar-right{display:flex;align-items:center;gap:10px;overflow:hidden;}
.statusbar span{overflow:hidden;text-overflow:ellipsis;}
.statusbar .sep{opacity:.5;}
.statusbar b{color:var(--muted);font-weight:800;}

.panel{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--r-lg);
    box-shadow:var(--sh-sm);
    padding:22px;
    margin-bottom:22px;
    transition:background .22s ease, border-color .22s ease;
}
.panel-head{
    display:flex;align-items:center;justify-content:space-between;
    gap:14px;flex-wrap:wrap;
    padding-bottom:15px;margin-bottom:18px;
    border-bottom:1px solid var(--line);
}
.panel-head h2{
    font-family:var(--font-heading);
    font-size:16.5px;font-weight:800;letter-spacing:-.3px;color:var(--text);
}
.panel-head .sub{font-size:12px;color:var(--muted);margin-top:2px;}
.head-actions{display:flex;gap:8px;flex-wrap:wrap;}

.btn{
    display:inline-flex;align-items:center;justify-content:center;gap:7px;
    padding:9px 16px;border-radius:9px;border:1px solid transparent;
    font-family:var(--font-heading);font-size:12.5px;font-weight:700;
    cursor:pointer;white-space:nowrap;
    transition:var(--ease);
    box-shadow:var(--sh-xs);
}
.btn:active{transform:translateY(1px) scale(.995);}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--brand-glow);}
.btn-primary{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;box-shadow:0 8px 18px -8px rgba(79,70,229,.9);}
.btn-primary:hover{filter:brightness(1.07);box-shadow:0 12px 22px -10px rgba(79,70,229,.95);}
.btn-dark{background:var(--btn-dark-bg);color:#fff;}
.btn-dark:hover{background:var(--btn-dark-hover-bg);}
.btn-success{background:var(--green);color:#fff;}
.btn-success:hover{background:#059669;}
.btn-outline{background:var(--btn-outline-bg);border-color:var(--line-strong);color:var(--text);}
.btn-outline:hover{background:var(--btn-outline-hover-bg);border-color:var(--line-strong);}
.btn-danger{background:var(--btn-outline-bg);border-color:var(--btn-danger-border);color:var(--red-ink);}
.btn-danger:hover{background:var(--red-soft);border-color:var(--btn-danger-hover-border);}
.btn-sm{padding:6px 11px;font-size:11.8px;border-radius:7px;}
.btn-block{width:100%;}

.metrics{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
    gap:16px;margin-bottom:22px;
}
.metric{
    position:relative;overflow:hidden;
    background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);
    padding:18px;
    box-shadow:var(--sh-xs);
    display:flex;align-items:center;gap:14px;
    transition:var(--ease);
}
.metric::after{
    content:"";position:absolute;inset:0 auto 0 0;width:3px;
    background:linear-gradient(180deg,var(--brand),var(--brand-2));
    opacity:0;transition:var(--ease);
}
.metric:hover{transform:translateY(-2px);box-shadow:var(--sh-md);border-color:var(--line-strong);}
.metric:hover::after{opacity:1;}
.metric-body{min-width:0;}
.metric-body h4{
    font-family:var(--font-heading);
    font-size:10.5px;font-weight:800;letter-spacing:.85px;text-transform:uppercase;
    color:var(--muted-2);
}
.metric-body .val{
    font-family:var(--font-heading);
    font-size:26px;font-weight:800;letter-spacing:-.9px;line-height:1.15;margin-top:3px;
}
.metric-body .hint{font-size:11px;color:var(--muted-2);font-weight:600;margin-top:1px;}
.metric-ico{
    margin-left:auto;flex:0 0 44px;width:44px;height:44px;
    display:grid;place-items:center;border-radius:12px;font-size:19px;
    background:var(--brand-soft);color:var(--brand-hover);
}
.metric-ico.green{background:var(--green-soft);color:var(--green-ink);}
.metric-ico.amber{background:var(--amber-soft);color:var(--amber-ink);}
.metric-ico.blue{background:var(--blue-soft);color:var(--blue-ink);}

.dash-split{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:22px;align-items:start;}

.class-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(196px,1fr));
    gap:14px;
}
.class-card{
    position:relative;overflow:hidden;
    background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);
    padding:16px 16px 15px;cursor:pointer;
    transition:var(--ease);
}
.class-card::before{
    content:"";position:absolute;top:0;left:0;right:0;height:3px;
    background:linear-gradient(90deg,var(--brand),var(--brand-2));
    transform:scaleX(0);transform-origin:left;transition:transform .28s cubic-bezier(.4,0,.2,1);
}
.class-card:hover{transform:translateY(-3px);box-shadow:var(--sh-md);border-color:var(--line-strong);}
.class-card:hover::before{transform:scaleX(1);}
.class-card h3{
    font-family:var(--font-heading);font-size:16px;font-weight:800;letter-spacing:-.3px;
}
.class-card .meta{font-size:11.5px;color:var(--muted);margin-top:2px;}
.class-card .go{
    display:inline-flex;align-items:center;gap:5px;margin-top:13px;
    padding:6px 11px;border-radius:7px;
    background:var(--brand-soft);color:var(--brand-hover);
    font-family:var(--font-heading);font-size:11.5px;font-weight:700;
    transition:var(--ease);
}
.class-card:hover .go{background:var(--brand);color:#fff;box-shadow:0 6px 14px -6px var(--brand-glow);}

.perf-list{display:flex;flex-direction:column;gap:13px;}
.perf-row{display:flex;flex-direction:column;gap:6px;}
.perf-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;}
.perf-top .nm{font-family:var(--font-heading);font-size:12.5px;font-weight:700;}
.perf-top .vl{font-family:var(--font-heading);font-size:12.5px;font-weight:800;color:var(--brand-hover);}
[data-theme="light"] .perf-top .vl{color:var(--brand);}
.perf-bar{height:7px;border-radius:99px;background:var(--perf-bar-bg);overflow:hidden;}
.perf-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--brand),var(--brand-2));transition:width .5s cubic-bezier(.4,0,.2,1);}

.empty{padding:38px 20px;text-align:center;color:var(--muted-2);}
.empty .ico{font-size:30px;display:block;margin-bottom:8px;opacity:.6;}
.empty p{font-size:12.8px;}

.field-grid{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
    gap:14px;align-items:end;
}
.field{display:flex;flex-direction:column;gap:6px;min-width:0;}
.field label{
    font-family:var(--font-heading);font-size:11.5px;font-weight:700;color:var(--text);
}
.field input,.field select{
    width:100%;height:38px;
    padding:0 12px;
    border:1px solid var(--line-strong);border-radius:9px;
    background:var(--input-bg);color:var(--text);
    font-family:var(--font-body);font-size:12.8px;font-weight:500;
    outline:none;transition:var(--ease);
}
.field select{cursor:pointer;appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 12px center;padding-right:32px;
}
.field input:focus,.field select:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-glow);}
.field input.invalid{border-color:#FCA5A5;background:var(--invalid-bg);}
.field input.invalid:focus{box-shadow:0 0 0 3px rgba(239,68,68,.25);}
.field-error{
    font-size:11.5px;font-weight:600;color:var(--red-ink);
    display:none;align-items:center;gap:5px;
}
.field-error.show{display:flex;animation:fadeUp .18s ease-out;}
.field-hint{font-size:11px;color:var(--muted-2);}

.table-wrap{
    border:1px solid var(--line);border-radius:var(--r-md);
    overflow:auto;background:var(--card);
}
.data-table{width:100%;border-collapse:collapse;font-size:12.8px;min-width:760px;}
.data-table thead th{
    position:sticky;top:0;z-index:5;
    background:var(--surface-2);
    border-bottom:1px solid var(--line);
    padding:11px 14px;
    font-family:var(--font-heading);font-size:11px;font-weight:800;
    text-transform:uppercase;letter-spacing:.6px;color:var(--muted);
    text-align:left;white-space:nowrap;
}
.data-table tbody td{
    padding:11px 14px;border-bottom:1px solid var(--sheet-cell-border);vertical-align:middle;
}
.data-table tbody tr:last-child td{border-bottom:none;}
.data-table tbody tr{transition:background .16s;}
.data-table tbody tr:hover{background:var(--row-hover-bg);}
.data-table .center{text-align:center;}

.cell-user{display:flex;align-items:center;gap:10px;min-width:0;}
.avatar{
    width:31px;height:31px;flex:0 0 31px;border-radius:9px;
    display:grid;place-items:center;
    background:var(--avatar-bg);
    color:var(--avatar-color);
    font-family:var(--font-heading);font-size:11px;font-weight:800;letter-spacing:.3px;
}
.cell-user .nm{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.row-actions{display:flex;gap:5px;justify-content:flex-end;}

.grade{
    display:inline-block;min-width:36px;padding:3px 9px;border-radius:8px;
    font-family:var(--font-heading);font-size:11.5px;font-weight:800;
}
.g-aplus{background:var(--g-aplus-bg);color:var(--g-aplus-ink);}
.g-a{background:var(--g-a-bg);color:var(--g-a-ink);}
.g-b{background:var(--g-b-bg);color:var(--g-b-ink);}
.g-c{background:var(--g-c-bg);color:var(--g-c-ink);}
.g-d{background:var(--g-d-bg);color:var(--g-d-ink);}
.g-f{background:var(--g-f-bg);color:var(--g-f-ink);}

.badge{
    display:inline-block;padding:3px 9px;border-radius:8px;
    font-family:var(--font-heading);font-size:11.5px;font-weight:800;
}
.badge-neutral{background:var(--badge-neutral-bg);color:var(--muted);}
.badge-success{background:var(--green-soft);color:var(--green-ink);}
.badge-brand{background:var(--brand-soft);color:var(--brand-hover);}

.sheet-toolbar{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
    gap:13px;align-items:end;margin-bottom:18px;
}

.sheet-actions-bar{
    display:flex;align-items:center;gap:8px;flex-wrap:wrap;
    padding:10px 12px;margin-bottom:12px;
    background:var(--surface-2);
    border:1px dashed var(--line-strong);
    border-radius:10px;
}
.sheet-actions-bar .info{
    margin-left:auto;font-size:11.5px;color:var(--muted);font-weight:600;
}
.sheet-actions-bar .info b{
    color:var(--brand-hover);font-family:var(--font-heading);font-weight:800;
}
[data-theme="light"] .sheet-actions-bar .info b{color:var(--brand);}

.sheet-col-head{display:flex;align-items:center;gap:4px;}
.sheet-col-head .subj-name{flex:1;min-width:0;}
.sheet-col-remove{
    width:20px;height:20px;flex:0 0 20px;
    display:grid;place-items:center;
    border:none;border-radius:5px;background:transparent;
    color:var(--muted-2);font-size:15px;font-weight:700;line-height:1;
    cursor:pointer;padding:0;transition:var(--ease);
}
.sheet-col-remove:hover{background:var(--red-soft);color:var(--red-ink);}
.sheet-col-remove:disabled{opacity:.35;cursor:not-allowed;}

.sheet-wrap{
    border:1px solid var(--line-strong);border-radius:var(--r-md);
    overflow:auto;background:var(--card);
    max-height:70vh;min-height:320px;
    position:relative;
}
.sheet-table{
    width:100%;min-width:1240px;
    border-collapse:separate;border-spacing:0;
    table-layout:fixed;font-size:12.5px;
}
.sheet-table th,.sheet-table td{
    border-right:1px solid var(--sheet-cell-border);
    border-bottom:1px solid var(--sheet-cell-border);
    padding:6px 7px;text-align:center;
    background:var(--card);
}
.sheet-table thead th{
    position:sticky;z-index:3;
    background:var(--surface-2);color:var(--text);
    font-family:var(--font-heading);
}
.sheet-table thead tr:nth-child(1) th{top:0;height:40px;font-weight:800;font-size:12px;}
.sheet-table thead tr:nth-child(2) th{top:40px;z-index:2;height:46px;background:var(--sheet-hdr-2-bg);font-weight:600;font-size:10.5px;}

.sheet-table th.col-roll,.sheet-table td.col-roll{position:sticky;left:0;z-index:4;width:62px;}
.sheet-table th.col-name,.sheet-table td.col-name{position:sticky;left:62px;z-index:4;width:176px;text-align:left;box-shadow:2px 0 0 var(--line);}
.sheet-table thead th.col-roll,.sheet-table thead th.col-name{z-index:6;}

.sheet-table tbody tr:hover td{background:var(--surface-hover);}
.sheet-table tbody tr:hover td.col-roll,
.sheet-table tbody tr:hover td.col-name{background:var(--surface-hover);}

.sheet-table input{
    width:100%;min-width:0;
    border:1px solid transparent;border-radius:6px;
    background:transparent;
    padding:5px 4px;text-align:center;
    font-family:var(--font-body);font-size:12.5px;font-weight:600;color:var(--text);
    outline:none;transition:var(--ease);
}

.sheet-table input:hover{background:var(--sheet-input-hover-bg);border-color:var(--sheet-input-hover-border);}
.sheet-table input:focus{background:var(--input-bg);border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-glow);}
.sheet-table input.over-max{color:var(--red-ink);background:var(--red-soft);border-color:#FCA5A5;}
.sheet-table input.subj-name{font-family:var(--font-heading);font-weight:800;font-size:12px;color:var(--text);}
.sheet-table input.mini{font-size:11px;font-weight:600;color:var(--muted);}
.sheet-table input[type="date"]{font-size:10px;padding:3px 2px;}
.sheet-table input[type="date"]::-webkit-calendar-picker-indicator{opacity:.5;cursor:pointer;}

.hdr-2{display:flex;flex-direction:column;gap:3px;align-items:center;}
.hdr-max{display:flex;align-items:center;gap:4px;font-weight:700;color:var(--muted);}
.hdr-max input{width:42px !important;padding:1px 2px;background:var(--sheet-mini-input-bg);border-color:var(--sheet-input-hover-border);}

.sheet-table tbody td{font-size:12.5px;}
.sheet-table .tot-strong{font-family:var(--font-heading);font-weight:800;}
.sheet-table .tot-muted{color:var(--muted);font-weight:600;}

.sheet-table tfoot td{
    position:sticky;bottom:0;z-index:3;
    background:var(--sheet-foot-bg);border-top:1px solid var(--line-strong);
    font-family:var(--font-heading);font-weight:800;font-size:11.8px;color:var(--muted);
    height:38px;
}
.sheet-table tfoot td.col-roll,.sheet-table tfoot td.col-name{background:var(--sheet-foot-bg);text-align:left;}
.sheet-table tfoot td.avg-strong{color:var(--brand-hover);font-size:12.5px;}

/* ---- FULLSCREEN SHEET ---- */
.panel.fullscreen{
    position:fixed;
    inset:0;
    z-index:1500;
    margin:0;
    border-radius:0;
    padding:16px 20px;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    background:var(--card);
    animation:fadeUp .22s ease-out;
}
.panel.fullscreen .panel-head,
.panel.fullscreen .sheet-toolbar,
.panel.fullscreen .sheet-actions-bar{
    flex-shrink:0;
}
.panel.fullscreen .sheet-wrap{
    flex:1 1 auto;
    min-height:0;
    max-height:none;
}

.modal{
    position:fixed;inset:0;z-index:2000;
    display:flex;align-items:center;justify-content:center;
    padding:20px;
    background:var(--modal-scrim);
    backdrop-filter:blur(5px);
    -webkit-backdrop-filter:blur(5px);
    animation:fadeUp .18s ease-out;
}
.modal-card{
    width:100%;max-width:520px;max-height:90vh;overflow:auto;
    background:var(--modal-bg);border-radius:var(--r-lg);
    box-shadow:var(--sh-lg);
    animation:popIn .22s cubic-bezier(.4,0,.2,1);
}
.modal-card.wide{max-width:720px;}
.modal-head{
    display:flex;align-items:center;justify-content:space-between;gap:14px;
    padding:20px 22px;border-bottom:1px solid var(--line);
    position:sticky;top:0;background:var(--modal-bg);z-index:2;border-radius:var(--r-lg) var(--r-lg) 0 0;
}
.modal-head h3{
    font-family:var(--font-heading);font-size:16px;font-weight:800;letter-spacing:-.3px;
}
.x-btn{
    width:32px;height:32px;flex:0 0 32px;
    display:grid;place-items:center;
    border:none;border-radius:8px;background:var(--surface-active);color:var(--muted);
    font-size:16px;line-height:1;cursor:pointer;transition:var(--ease);
}
.x-btn:hover{background:var(--red-soft);color:var(--red-ink);}
.modal-body{padding:22px;}
.modal-foot{
    display:flex;justify-content:flex-end;gap:10px;
    padding:16px 22px;border-top:1px solid var(--line);background:var(--modal-foot-bg);
    border-radius:0 0 var(--r-lg) var(--r-lg);
}

.info-strip{
    background:var(--info-strip-bg);border:1px solid var(--line);border-radius:10px;
    padding:12px 15px;font-size:12.5px;color:var(--text);
    display:flex;flex-wrap:wrap;gap:6px 18px;margin-bottom:16px;
}
.info-strip b{font-family:var(--font-heading);font-weight:800;}

.toast-box{
    position:fixed;bottom:38px;right:24px;z-index:3000;
    display:flex;flex-direction:column;gap:9px;pointer-events:none;
}
.toast{
    display:flex;align-items:center;gap:9px;
    padding:12px 18px;border-radius:11px;
    background:var(--toast-bg);color:var(--text);
    font-family:var(--font-heading);font-size:12.8px;font-weight:700;
    box-shadow:var(--sh-lg);border-left:4px solid var(--green);
    animation:slideIn .26s cubic-bezier(.4,0,.2,1);
    pointer-events:auto;max-width:340px;
    border-top:1px solid var(--line);border-right:1px solid var(--line);border-bottom:1px solid var(--line);
}
.toast.error{border-left-color:var(--red);}
.toast.info{border-left-color:var(--brand);}

.hidden{display:none !important;}

.shortcut-grid{
    display:grid;grid-template-columns:auto 1fr;gap:9px 18px;
    font-size:12.8px;
}
.shortcut-grid kbd{
    display:inline-block;
    padding:3px 9px;border-radius:6px;
    background:var(--surface-active);border:1px solid var(--line-strong);border-bottom-width:2px;
    font-family:var(--font-heading);font-size:11px;font-weight:800;color:var(--text);
    white-space:nowrap;
}
.shortcut-grid span{color:var(--muted);align-self:center;}

.export-preview{
    background:var(--code-bg);color:var(--code-text);
    padding:14px;border-radius:10px;
    border:1px solid var(--code-border);
    font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
    font-size:11.5px;line-height:1.65;
    max-height:340px;overflow:auto;
    white-space:pre-wrap;word-break:break-word;
    margin:0;
}

@media (max-width:1180px){ .dash-split{grid-template-columns:1fr;} }
@media (max-width:1024px){
    .sidebar{transform:translateX(-100%);box-shadow:var(--sh-lg);}
    .sidebar.open{transform:translateX(0);}
    .main{margin-left:0 !important;}
    .icon-btn.mobile-only{display:grid;}
    .sidebar-toggle{display:none;}
    body.compact .sidebar{width:var(--sidebar-w);}
    body.compact .brand-text,
    body.compact .nav-label,
    body.compact .nav-text,
    body.compact .sidebar-footer{opacity:1;width:auto;height:auto;padding:inherit;margin:inherit;pointer-events:auto;}
}
@media (max-width:760px){
    .topbar{flex-wrap:wrap;height:auto;padding:12px 16px;gap:10px;}
    .topbar-left{width:100%;}
    .topbar-right{width:100%;order:3;margin-left:0;flex-wrap:wrap;gap:8px;}
    .search-wrap{width:100%;flex:1 1 100%;order:0;}
    .save-pill{order:1;}
    .icon-btn{order:1;}
    #btn-theme{margin-left:auto;}
    .content{padding:14px;}
    .panel{padding:16px;border-radius:14px;}
    .metrics{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:11px;}
    .metric{padding:14px;gap:10px;}
    .metric-body .val{font-size:22px;}
    .metric-ico{width:38px;height:38px;flex:0 0 38px;font-size:16px;}
    .class-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:11px;}
    .class-card{padding:13px;}
    .class-card h3{font-size:14px;}
    .sheet-toolbar{grid-template-columns:1fr 1fr;}
    .modal-card{max-height:94vh;}
    .modal-body{padding:16px;}
    .toast-box{left:16px;right:16px;bottom:16px;}
    .toast{max-width:none;}
    .data-table{min-width:640px;}
    .statusbar{padding:6px 14px;font-size:10.5px;}
    .statusbar-left .view-name{display:none;}
    .sheet-actions-bar .info{margin-left:0;width:100%;}
    .login-card{padding:26px 20px 22px;}
    .login-logo{width:56px;height:56px;font-size:26px;}
    .login-card h1{font-size:19px;}
}
@media (max-width:420px){
    .sheet-toolbar{grid-template-columns:1fr;}
    .row-actions{flex-direction:column;}
    .head-actions{width:100%;}
    .head-actions .btn{flex:1;}
    .sheet-actions-bar .btn{flex:1;}
}