*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
    --font-display:'Be Vietnam Pro',system-ui,sans-serif;
    --font-sans:'Be Vietnam Pro',system-ui,sans-serif;
    --sidebar-w:272px;
    --radius:8px;
    --radius-sm:6px;
    --radius-lg:10px;
    --shadow-sm:0 1px 2px rgba(15,23,42,.06),0 0 0 1px rgba(15,23,42,.03);
    --shadow:0 18px 44px rgba(15,23,42,.12);
    --shadow-pop:0 24px 70px rgba(15,23,42,.2);
    --success:#15803d;
    --error:#ba1a1a;
    --warning:#b45309;
    --info:#2563eb;
    --i-users:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
    --i-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-5'/%3E%3C/svg%3E");
    --i-zap:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2 3 14h8l-1 8 11-14h-8l1-6z'/%3E%3C/svg%3E");
    --i-star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 2 3.1 6.3 6.9 1-5 4.8 1.2 6.9-6.2-3.3L5.8 21 7 14.1 2 9.3l6.9-1z'/%3E%3C/svg%3E");
    --i-docs:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2h9l5 5v15H6z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Cpath d='M9 13h6'/%3E%3Cpath d='M9 17h6'/%3E%3Cpath d='M4 6H2v16h14v-2'/%3E%3C/svg%3E");
    --i-quiz:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M9.5 9a2.5 2.5 0 1 1 4.2 1.8c-.9.7-1.7 1.2-1.7 2.7'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
    --i-calendar:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4'/%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M3 10h18'/%3E%3Cpath d='M8 14h3'/%3E%3C/svg%3E");
    --i-badge:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='6'/%3E%3Cpath d='M8.5 13.5 7 22l5-3 5 3-1.5-8.5'/%3E%3Cpath d='m10 8 1.3 1.3L14.5 6'/%3E%3C/svg%3E");
    --i-chart:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v18h18'/%3E%3Crect x='7' y='12' width='3' height='5'/%3E%3Crect x='13' y='8' width='3' height='9'/%3E%3Cpath d='M19 5v12'/%3E%3C/svg%3E");
    --i-hourglass:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2h12'/%3E%3Cpath d='M6 22h12'/%3E%3Cpath d='M8 2c0 5 8 5 8 10s-8 5-8 10'/%3E%3Cpath d='M16 2c0 5-8 5-8 10s8 5 8 10'/%3E%3C/svg%3E");
    --i-dashboard:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3Crect x='14' y='14' width='7' height='7'/%3E%3C/svg%3E");
    --i-school:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 10-10-5-10 5 10 5 10-5Z'/%3E%3Cpath d='M6 12v5c3 2 9 2 12 0v-5'/%3E%3Cpath d='M22 10v6'/%3E%3C/svg%3E");
    --i-settings:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Z'/%3E%3Cpath d='M19.4 15a1.7 1.7 0 0 0 .3 1.9l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.9-.3 1.7 1.7 0 0 0-1 1.6V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1-1.6 1.7 1.7 0 0 0-1.9.3l-.1.1A2 2 0 1 1 4.2 17l.1-.1a1.7 1.7 0 0 0 .3-1.9 1.7 1.7 0 0 0-1.6-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.6-1 1.7 1.7 0 0 0-.3-1.9L4.3 7A2 2 0 1 1 7.1 4.2l.1.1a1.7 1.7 0 0 0 1.9.3 1.7 1.7 0 0 0 1-1.6V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.6 1.7 1.7 0 0 0 1.9-.3l.1-.1A2 2 0 1 1 19.8 7l-.1.1a1.7 1.7 0 0 0-.3 1.9 1.7 1.7 0 0 0 1.6 1h.1a2 2 0 1 1 0 4H21a1.7 1.7 0 0 0-1.6 1Z'/%3E%3C/svg%3E");
    --i-logout:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpath d='m16 17 5-5-5-5'/%3E%3Cpath d='M21 12H9'/%3E%3C/svg%3E");
    --i-book:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M4 4.5A2.5 2.5 0 0 1 6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5z'/%3E%3Cpath d='M8 7h8'/%3E%3C/svg%3E");
    --i-user-circle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3Cpath d='M7 19c1.2-2 2.9-3 5-3s3.8 1 5 3'/%3E%3C/svg%3E");
    --i-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
    --i-plus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
    --i-download:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3Cpath d='M5 21h14'/%3E%3C/svg%3E");
    --i-upload:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21V9'/%3E%3Cpath d='m7 14 5-5 5 5'/%3E%3Cpath d='M5 3h14'/%3E%3C/svg%3E");
    --i-edit:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E");
    --i-trash:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M8 6V4h8v2'/%3E%3Cpath d='M19 6 18 21H6L5 6'/%3E%3Cpath d='M10 11v6'/%3E%3Cpath d='M14 11v6'/%3E%3C/svg%3E");
    --i-key:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7.5' cy='14.5' r='4.5'/%3E%3Cpath d='M12 14h9'/%3E%3Cpath d='M17 14v3'/%3E%3Cpath d='M20 14v2'/%3E%3C/svg%3E");
    --i-eye:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
    --i-reset:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 3-6.7'/%3E%3Cpath d='M3 4v6h6'/%3E%3C/svg%3E");
    --i-wrench:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a4 4 0 0 0 5 5L11 20a2.8 2.8 0 0 1-4-4l8.7-8.7Z'/%3E%3C/svg%3E");
    --i-filter:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16'/%3E%3Cpath d='M7 12h10'/%3E%3Cpath d='M10 18h4'/%3E%3C/svg%3E");
    --i-x:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E");
}

:root,
html[data-admin-theme="emerald"]{
    --paper:#f4fbf4;
    --paper-2:#ecf5ee;
    --surface:#ffffff;
    --surface-2:#eef6ee;
    --surface-3:#e3eae3;
    --ink:#161d19;
    --ink-2:#26352d;
    --ink-3:#64746a;
    --ink-4:#8a9a91;
    --rule:#d8e5dc;
    --rule-strong:#b7c9bd;
    --primary:#006c49;
    --primary-dark:#005236;
    --primary-light:#10b981;
    --primary-bg:rgba(0,108,73,.1);
    --accent:#d97706;
    --accent-bg:rgba(254,166,25,.18);
    --sidebar-bg:#ffffff;
    --sidebar-text:#3c4a42;
    --sidebar-muted:#748177;
    --sidebar-active-bg:#dff5ea;
    --sidebar-active:#00422b;
    --sidebar-border:#dce8df;
    --topbar-bg:rgba(255,255,255,.88);
    --stat-strong-bg:#006c49;
    --stat-strong-text:#ffffff;
    --stat-dark-bg:#fc7c78;
    --stat-dark-text:#5c1717;
}

html[data-admin-theme="navy"]{
    --paper:#f6fafe;
    --paper-2:#eef4fa;
    --surface:#ffffff;
    --surface-2:#f0f4f8;
    --surface-3:#e4e9ed;
    --ink:#171c1f;
    --ink-2:#27323b;
    --ink-3:#66717d;
    --ink-4:#8b95a3;
    --rule:#d8dee7;
    --rule-strong:#c2cad6;
    --primary:#1e293b;
    --primary-dark:#091426;
    --primary-light:#475569;
    --primary-bg:rgba(30,41,59,.1);
    --accent:#fd8a42;
    --accent-bg:rgba(253,138,66,.16);
    --sidebar-bg:#091426;
    --sidebar-text:#edf1f5;
    --sidebar-muted:#aab4c3;
    --sidebar-active-bg:#1e293b;
    --sidebar-active:#ffffff;
    --sidebar-border:#162033;
    --topbar-bg:rgba(255,255,255,.9);
    --stat-strong-bg:#1e293b;
    --stat-strong-text:#ffffff;
    --stat-dark-bg:#20283c;
    --stat-dark-text:#d8e3fb;
}

html[data-admin-theme="paper"]{
    --paper:#fbf9f8;
    --paper-2:#f5f3f3;
    --surface:#ffffff;
    --surface-2:#f6f0ed;
    --surface-3:#eae2df;
    --ink:#1b1c1c;
    --ink-2:#332724;
    --ink-3:#72594f;
    --ink-4:#9a8177;
    --rule:#e4d8d3;
    --rule-strong:#d8bdb3;
    --primary:#9b2f00;
    --primary-dark:#75280d;
    --primary-light:#c2410c;
    --primary-bg:rgba(194,65,12,.1);
    --accent:#8b6700;
    --accent-bg:rgba(249,189,34,.17);
    --sidebar-bg:#f5f3f3;
    --sidebar-text:#59413a;
    --sidebar-muted:#8d7168;
    --sidebar-active-bg:#fff0e9;
    --sidebar-active:#832600;
    --sidebar-border:#e4d8d3;
    --topbar-bg:rgba(255,255,255,.9);
    --stat-strong-bg:#9b2f00;
    --stat-strong-text:#ffffff;
    --stat-dark-bg:#ffeed1;
    --stat-dark-text:#4a2f00;
}

:root{
    --bg:var(--paper);
    --bg-card:var(--surface);
    --bg-hover:var(--surface-2);
    --bg-surface:var(--paper-2);
    --text:var(--ink);
    --text-dim:var(--ink-3);
    --text-dark:var(--ink);
    --border:var(--rule);
    --border-light:var(--rule-strong);
}

html{min-height:100%;background:var(--paper)}
body{
    min-height:100vh;
    overflow-x:hidden;
    background:var(--paper);
    color:var(--text);
    font-family:var(--font-sans);
    font-size:14px;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
}
a{color:var(--primary);text-decoration:none}
button,input,select,textarea{font:inherit}
button{color:inherit}
::selection{background:var(--primary-bg);color:var(--primary-dark)}
.ui-icon{
    --icon:var(--i-dashboard);
    width:1.55em;
    height:1.55em;
    display:inline-block;
    flex:0 0 auto;
    background:currentColor;
    -webkit-mask:var(--icon) center/contain no-repeat;
    mask:var(--icon) center/contain no-repeat;
}
.ui-icon-dashboard{--icon:var(--i-dashboard)}
.ui-icon-users{--icon:var(--i-users)}
.ui-icon-school{--icon:var(--i-school)}
.ui-icon-settings{--icon:var(--i-settings)}
.ui-icon-logout{--icon:var(--i-logout)}
.ui-icon-book{--icon:var(--i-book)}
.ui-icon-user{--icon:var(--i-user-circle)}
.ui-icon-search{--icon:var(--i-search)}
.ui-icon-add{--icon:var(--i-plus)}
.ui-icon-download{--icon:var(--i-download)}
.ui-icon-upload{--icon:var(--i-upload)}
.ui-icon-import{--icon:var(--i-download)}
.ui-icon-audit{--icon:var(--i-search)}
.ui-icon-wrench{--icon:var(--i-wrench)}
.ui-icon-edit{--icon:var(--i-edit)}
.ui-icon-delete{--icon:var(--i-trash)}
.ui-icon-key{--icon:var(--i-key)}
.ui-icon-eye{--icon:var(--i-eye)}
.ui-icon-reset{--icon:var(--i-reset)}
.ui-icon-close{--icon:var(--i-x)}
.ui-icon-filter{--icon:var(--i-filter)}
.ui-icon-docs{--icon:var(--i-docs)}

.login-screen{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:100vh;
    padding:24px;
    background:
        linear-gradient(180deg,rgba(255,255,255,.58),rgba(255,255,255,0) 44%),
        var(--paper);
}
.login-card{
    width:100%;
    max-width:420px;
    padding:34px 32px;
    text-align:center;
    background:var(--surface);
    border:1px solid var(--rule);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    animation:fadeUp .35s ease;
}
.login-logo{
    width:54px;
    height:54px;
    margin:0 auto 16px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:var(--radius);
    color:#fff;
    background:var(--primary);
    font-size:1.75rem;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
}
.login-card h2{
    margin-bottom:6px;
    font-family:var(--font-display);
    font-size:1.45rem;
    font-weight:800;
    letter-spacing:0;
}
.login-card>p{margin-bottom:22px;color:var(--text-dim);font-size:.9rem}
.login-error{
    display:none;
    margin-bottom:12px;
    padding:9px 12px;
    color:var(--error);
    background:rgba(186,26,26,.1);
    border:1px solid rgba(186,26,26,.18);
    border-radius:var(--radius);
    font-size:.85rem;
}
.login-error.show{display:block}
.input-wrap{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:12px;
    padding:0 13px;
    background:var(--surface-2);
    border:1px solid var(--rule);
    border-radius:var(--radius);
    transition:border-color .18s,box-shadow .18s,background .18s;
}
.input-wrap:focus-within{
    background:var(--surface);
    border-color:var(--primary);
    box-shadow:0 0 0 3px var(--primary-bg);
}
.input-wrap span{font-size:1rem;flex-shrink:0}
.input-wrap input{
    flex:1;
    min-width:0;
    padding:12px 0;
    color:var(--text);
    background:transparent;
    border:0;
    outline:0;
}
.input-wrap input::placeholder{color:var(--ink-4)}
.btn-login{
    width:100%;
    margin-top:4px;
    padding:13px 16px;
    border:1px solid transparent;
    border-radius:var(--radius);
    color:#fff;
    background:var(--primary);
    font-weight:800;
    cursor:pointer;
    transition:transform .18s,box-shadow .18s,background .18s;
}
.btn-login:hover{transform:translateY(-1px);background:var(--primary-dark);box-shadow:0 10px 24px rgba(15,23,42,.12)}
.login-divider{display:flex;align-items:center;gap:12px;margin:20px 0;color:var(--text-dim);font-size:.82rem}
.login-divider::before,.login-divider::after{content:'';flex:1;height:1px;background:var(--rule)}
.login-hint{margin-top:16px;color:var(--text-dim);font-size:.78rem}
.g_id_signin{display:flex;justify-content:center}

.dashboard-wrap{
    display:flex;
    min-height:100vh;
    background:var(--paper);
}
.sidebar{
    position:fixed;
    inset:0 auto 0 0;
    z-index:50;
    display:flex;
    flex-direction:column;
    width:var(--sidebar-w);
    background:var(--sidebar-bg);
    color:var(--sidebar-text);
    border-right:1px solid var(--sidebar-border);
    transition:transform .25s ease;
}
.sidebar-brand{
    min-height:72px;
    padding:20px 18px 16px;
    display:flex;
    align-items:center;
    gap:11px;
    border-bottom:1px solid var(--sidebar-border);
}
.brand-icon{
    width:36px;
    height:36px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:var(--radius);
    color:#fff;
    background:var(--primary);
    font-size:1.15rem;
}
.brand-icon .ui-icon{width:26px;height:26px;color:#fff}
.brand-text{
    color:var(--sidebar-active);
    font-family:var(--font-display);
    font-size:1.08rem;
    font-weight:800;
    letter-spacing:0;
}
.sidebar-nav{
    flex:1;
    display:flex;
    flex-direction:column;
    gap:6px;
    padding:18px 12px;
}
.nav-item{
    width:100%;
    display:flex;
    align-items:center;
    gap:11px;
    min-height:44px;
    padding:0 14px;
    color:var(--sidebar-muted);
    background:transparent;
    border:1px solid transparent;
    border-radius:var(--radius);
    cursor:pointer;
    font-weight:700;
    text-align:left;
    transition:background .18s,color .18s,border-color .18s;
}
.nav-item .ui-icon{width:28px;height:28px}
.nav-item .nav-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-item:hover{color:var(--sidebar-active);background:rgba(255,255,255,.08);border-color:var(--sidebar-border)}
html:not([data-admin-theme="navy"]) .nav-item:hover{background:var(--surface-2)}
.nav-item.active{
    color:var(--sidebar-active);
    background:var(--sidebar-active-bg);
    border-color:transparent;
}
.sidebar-footer{
    padding:16px;
    border-top:1px solid var(--sidebar-border);
}
.admin-info{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.admin-avatar,.user-avatar,.detail-avatar{
    overflow:hidden;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    background:var(--primary);
}
.admin-avatar{width:38px;height:38px;border-radius:50%;font-size:.9rem}
.admin-avatar img,.user-avatar img,.detail-avatar img{width:100%;height:100%;object-fit:cover}
.admin-avatar .ui-icon,.user-avatar .ui-icon,.detail-avatar .ui-icon{width:26px;height:26px}
.admin-meta{min-width:0;display:flex;flex-direction:column}
.admin-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:800;font-size:.86rem;color:var(--sidebar-active)}
.admin-role{color:var(--sidebar-muted);font-size:.74rem}
.sidebar-actions{display:flex;gap:8px}
.btn-icon-sm{
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--sidebar-border);
    border-radius:var(--radius-sm);
    background:transparent;
    cursor:pointer;
    transition:background .18s,border-color .18s,transform .18s;
}
.btn-icon-sm:hover{background:var(--sidebar-active-bg);border-color:var(--primary);transform:translateY(-1px)}

.main-content{
    flex:1;
    min-width:0;
    min-height:100vh;
    margin-left:var(--sidebar-w);
}
.topbar{
    position:sticky;
    top:0;
    z-index:40;
    min-height:68px;
    display:flex;
    align-items:center;
    gap:16px;
    padding:14px 28px;
    background:var(--topbar-bg);
    border-bottom:1px solid var(--rule);
    backdrop-filter:blur(12px);
}
.topbar h1{
    flex:1;
    min-width:0;
    overflow:hidden;
    display:flex;
    align-items:center;
    gap:8px;
    color:var(--ink);
    text-overflow:ellipsis;
    white-space:nowrap;
    font-family:var(--font-display);
    font-size:1.05rem;
    font-weight:800;
    letter-spacing:0;
}
.topbar h1 .ui-icon{width:28px;height:28px;color:var(--primary)}
.topbar-right{display:flex;align-items:center;gap:10px}
.admin-user{max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-dim);font-size:.85rem;font-weight:700}
.btn-menu{
    display:none;
    width:38px;
    height:38px;
    align-items:center;
    justify-content:center;
    border:1px solid var(--rule);
    border-radius:var(--radius);
    background:var(--surface);
    cursor:pointer;
}

.admin-theme-dropdown{position:relative}
.admin-theme-toggle{
    height:36px;
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:0 10px;
    border:1px solid var(--rule);
    border-radius:var(--radius);
    color:var(--ink);
    background:var(--surface);
    box-shadow:var(--shadow-sm);
    cursor:pointer;
    font-weight:800;
    font-size:.8rem;
    transition:border-color .18s,background .18s,box-shadow .18s;
}
.admin-theme-toggle:hover,.admin-theme-dropdown.open .admin-theme-toggle{border-color:var(--primary);background:var(--surface-2)}
.theme-caret{color:var(--text-dim);font-size:.72rem;line-height:1}
.theme-dot{
    width:10px;
    height:10px;
    display:inline-block;
    border-radius:50%;
    background:var(--primary);
    box-shadow:0 0 0 2px var(--primary-bg);
}
.theme-dot-emerald{background:#006c49;box-shadow:0 0 0 2px rgba(0,108,73,.16)}
.theme-dot-navy{background:#1e293b;box-shadow:0 0 0 2px rgba(30,41,59,.16)}
.theme-dot-paper{background:#c2410c;box-shadow:0 0 0 2px rgba(194,65,12,.16)}
.admin-theme-menu{
    position:absolute;
    top:calc(100% + 8px);
    right:0;
    width:190px;
    display:none;
    padding:6px;
    background:var(--surface);
    border:1px solid var(--rule);
    border-radius:var(--radius);
    box-shadow:var(--shadow-pop);
}
.admin-theme-dropdown.open .admin-theme-menu{display:block;animation:fadeUp .15s ease}
.admin-theme-menu button{
    width:100%;
    height:38px;
    display:flex;
    align-items:center;
    gap:9px;
    padding:0 10px;
    border:0;
    border-radius:var(--radius-sm);
    color:var(--text-dim);
    background:transparent;
    cursor:pointer;
    text-align:left;
    font-weight:800;
    font-size:.82rem;
}
.admin-theme-menu button:hover{background:var(--surface-2);color:var(--ink)}
.admin-theme-menu button.selected{background:var(--primary-bg);color:var(--primary-dark)}

.tab-content{display:none;padding:28px;animation:fadeUp .24s ease}
.tab-content.active{display:block}

.dashboard-heading{
    margin-bottom:24px;
}
.dashboard-heading h2{
    color:var(--ink);
    font-family:var(--font-display);
    font-size:2rem;
    font-weight:800;
    line-height:1.18;
    letter-spacing:0;
}
.dashboard-heading p{
    margin-top:4px;
    color:var(--text-dim);
    font-size:1rem;
    font-weight:600;
}

.module-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:18px;
    margin-bottom:24px;
}
.module-header h2{
    color:var(--ink);
    font-family:var(--font-display);
    font-size:1.88rem;
    font-weight:800;
    line-height:1.18;
    letter-spacing:0;
}
.module-header p{
    margin-top:5px;
    color:var(--text-dim);
    font-size:.95rem;
    font-weight:600;
}
.module-actions{
    display:flex;
    justify-content:flex-end;
    gap:10px;
    flex-wrap:wrap;
}
.module-filterbar{
    margin-bottom:20px;
    padding:16px;
    background:var(--surface);
    border:1px solid var(--rule);
    border-radius:var(--radius);
    box-shadow:var(--shadow-sm);
}

.stats-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    grid-auto-rows:122px;
    gap:16px;
    margin-bottom:24px;
    align-items:stretch;
}
.stat-card{
    --stat-accent:var(--primary);
    --stat-tint:var(--primary-bg);
    --stat-icon:var(--i-users);
    position:relative;
    min-height:0;
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    gap:12px;
    padding:20px 22px;
    overflow:hidden;
    color:var(--ink);
    background:var(--surface);
    border:1px solid var(--rule);
    border-radius:var(--radius);
    box-shadow:var(--shadow-sm);
    transition:transform .18s,border-color .18s,box-shadow .18s,background .18s;
}
.stat-card::before{
    content:'';
    position:absolute;
    inset:0 0 auto 0;
    height:3px;
    background:var(--stat-accent);
}
.stat-card:hover{transform:translateY(-2px);border-color:var(--rule-strong);box-shadow:0 12px 26px rgba(15,23,42,.1)}
.stat-card:nth-child(1){
    grid-column:1;
    grid-row:1 / span 2;
    color:var(--stat-strong-text);
    background:var(--stat-strong-bg);
    border-color:transparent;
}
.stat-card:nth-child(2){grid-column:2;grid-row:1}
.stat-card:nth-child(3){grid-column:3;grid-row:1}
.stat-card:nth-child(4){grid-column:2;grid-row:2}
.stat-card:nth-child(5){grid-column:3;grid-row:2}
.stat-card:nth-child(6){grid-column:1;grid-row:3;background:var(--surface-3)}
.stat-card:nth-child(7){grid-column:2;grid-row:3}
.stat-card:nth-child(8){
    grid-column:4;
    grid-row:1 / span 2;
    color:var(--stat-dark-text);
    background:var(--stat-dark-bg);
    border-color:transparent;
}
.stat-card:nth-child(9){
    grid-column:3 / span 2;
    grid-row:3;
}
.stat-card:nth-child(1)::before,.stat-card:nth-child(8)::before{background:rgba(255,255,255,.24)}
.stat-card:nth-child(8)::after{
    content:'';
    position:absolute;
    left:22px;
    right:22px;
    bottom:22px;
    height:4px;
    border-radius:999px;
    background:linear-gradient(90deg,currentColor 0 34%,rgba(0,0,0,.14) 34% 100%);
    opacity:.8;
}
.stat-icon-bg{
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:var(--radius);
    color:var(--stat-accent);
    background:var(--stat-tint);
    font-size:0;
}
.stat-icon-bg::before{
    content:'';
    width:23px;
    height:23px;
    display:block;
    background:currentColor;
    -webkit-mask:var(--stat-icon) center/contain no-repeat;
    mask:var(--stat-icon) center/contain no-repeat;
}
.stat-card:not(:nth-child(1)) .stat-icon-bg{
    position:absolute;
    top:20px;
    right:22px;
}
.stat-card:nth-child(1) .stat-icon-bg,.stat-card:nth-child(8) .stat-icon-bg{
    color:currentColor;
    background:rgba(255,255,255,.13);
}
.stat-body{display:flex;flex-direction:column;gap:4px}
.stat-value{
    color:inherit;
    font-family:var(--font-display);
    font-size:2rem;
    font-weight:800;
    line-height:1;
    letter-spacing:0;
}
.stat-label{
    max-width:100%;
    color:inherit;
    opacity:.72;
    font-size:.76rem;
    font-weight:800;
    letter-spacing:.04em;
    text-transform:uppercase;
}
.gradient-purple{--stat-accent:var(--primary);--stat-tint:var(--primary-bg);--stat-icon:var(--i-users)}
.gradient-blue{--stat-accent:#2563eb;--stat-tint:rgba(37,99,235,.1);--stat-icon:var(--i-check)}
.gradient-green{--stat-accent:var(--accent);--stat-tint:var(--accent-bg);--stat-icon:var(--i-star)}
.gradient-orange{--stat-accent:#d97706;--stat-tint:rgba(217,119,6,.12);--stat-icon:var(--i-docs)}
.gradient-pink{--stat-accent:#be185d;--stat-tint:rgba(190,24,93,.1);--stat-icon:var(--i-quiz)}
.gradient-teal{--stat-accent:#0d9488;--stat-tint:rgba(13,148,136,.1);--stat-icon:var(--i-calendar)}
.gradient-indigo{--stat-accent:#4f46e5;--stat-tint:rgba(79,70,229,.1);--stat-icon:var(--i-badge)}
.gradient-cyan{--stat-accent:#0891b2;--stat-tint:rgba(8,145,178,.1);--stat-icon:var(--i-chart)}
.stat-card:nth-child(9){--stat-icon:var(--i-hourglass)}

.quick-overview,.table-card,.modal,.drawer{
    background:var(--surface);
    border:1px solid var(--rule);
    border-radius:var(--radius);
    box-shadow:var(--shadow-sm);
}
.quick-overview{padding:22px 24px}
.quick-overview h3{
    margin-bottom:6px;
    color:var(--ink);
    font-family:var(--font-display);
    font-size:1rem;
    font-weight:800;
}
.hint-text{color:var(--text-dim);font-size:.88rem}

.section-toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:12px;
    margin-bottom:16px;
}
.toolbar-left{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
.search-wrap{
    min-width:280px;
    height:40px;
    display:flex;
    align-items:center;
    gap:8px;
    padding:0 12px;
    background:var(--surface);
    border:1px solid var(--rule);
    border-radius:var(--radius);
    transition:border-color .18s,box-shadow .18s,background .18s;
}
.search-wrap:focus-within{background:var(--surface);border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-bg)}
.search-wrap span{color:var(--text-dim);font-size:1rem}
.search-wrap .ui-icon{width:26px;height:26px}
.search-wrap input{
    width:100%;
    min-width:0;
    color:var(--text);
    background:transparent;
    border:0;
    outline:0;
    font-size:.88rem;
}
.search-wrap input::placeholder{color:var(--ink-4)}
.filter-select{
    height:40px;
    max-width:260px;
    padding:0 34px 0 12px;
    color:var(--text);
    background:var(--surface);
    border:1px solid var(--rule);
    border-radius:var(--radius);
    outline:0;
    cursor:pointer;
    font-size:.84rem;
    font-weight:700;
}
.filter-select:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-bg)}
.filter-select option{background:var(--surface);color:var(--text)}

.table-card{overflow:auto}
table{width:100%;min-width:880px;border-collapse:collapse}
th{
    padding:14px 18px;
    color:var(--text-dim);
    background:var(--surface-2);
    border-bottom:1px solid var(--rule);
    text-align:left;
    font-size:.72rem;
    font-weight:800;
    letter-spacing:.04em;
    text-transform:uppercase;
    white-space:nowrap;
}
td{
    padding:14px 18px;
    border-bottom:1px solid var(--rule);
    color:var(--text);
    font-size:.85rem;
    vertical-align:middle;
}
tbody tr:last-child td{border-bottom:0}
tr:hover td{background:var(--surface-2)}
.user-cell{display:flex;align-items:center;gap:10px;min-width:220px;cursor:pointer}
.user-cell:hover .user-name{color:var(--primary)}
.user-avatar{width:36px;height:36px;border-radius:50%;font-size:.84rem;color:var(--primary);background:var(--primary-bg)}
.user-name{color:var(--ink);font-weight:800;transition:color .18s}
.user-email{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-dim);font-size:.75rem}
.empty-cell{text-align:center!important;padding:38px!important;color:var(--text-dim)}

.badge{
    display:inline-flex;
    align-items:center;
    gap:4px;
    min-height:24px;
    padding:2px 9px;
    border:1px solid transparent;
    border-radius:999px;
    font-size:.72rem;
    font-weight:800;
    line-height:1;
    white-space:nowrap;
}
.badge-admin{background:var(--primary-bg);color:var(--primary-dark);border-color:rgba(0,0,0,.03)}
.badge-premium{background:var(--accent-bg);color:var(--accent);border-color:rgba(0,0,0,.03)}
.badge-user{background:var(--surface-2);color:var(--text-dim);border-color:var(--rule)}
.badge-active{background:rgba(21,128,61,.1);color:#15803d;border-color:rgba(21,128,61,.16)}
.badge-expired{background:rgba(186,26,26,.1);color:var(--error);border-color:rgba(186,26,26,.16)}
.badge-trial{background:rgba(37,99,235,.1)!important;color:#2563eb!important;border-color:rgba(37,99,235,.16)!important}
.badge-suspended{background:rgba(186,26,26,.1)!important;color:var(--error)!important;border-color:rgba(186,26,26,.16)!important}

.actions-cell{white-space:nowrap}
.actions-cell .btn{margin-right:8px}
.actions-cell .btn:last-child{margin-right:0}
.btn{
    min-height:36px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    padding:7px 13px;
    color:var(--text);
    background:var(--surface);
    border:1px solid var(--rule);
    border-radius:var(--radius);
    cursor:pointer;
    font-size:.82rem;
    font-weight:800;
    line-height:1.2;
    white-space:nowrap;
    transition:transform .18s,background .18s,border-color .18s,color .18s,box-shadow .18s;
}
.btn:hover{border-color:var(--primary);color:var(--primary);background:var(--surface-2)}
.btn-primary{color:#fff;background:var(--primary);border-color:var(--primary)}
.btn-primary:hover{color:#fff;background:var(--primary-dark);border-color:var(--primary-dark);transform:translateY(-1px);box-shadow:0 10px 22px rgba(15,23,42,.12)}
.btn-danger{color:#fff;background:var(--error);border-color:var(--error)}
.btn-danger:hover{color:#fff;background:#991b1b;border-color:#991b1b}
.btn-sm{min-height:32px;padding:6px 10px;font-size:.76rem;border-radius:var(--radius-sm)}
.btn .ui-icon{width:1.75em;height:1.75em}
.btn-ghost{min-width:44px;width:44px;height:44px;background:transparent;border-color:transparent;padding:0;color:var(--text-dim)}
.btn-ghost .ui-icon{width:28px;height:28px}
.btn-ghost:hover{background:var(--surface-2);border-color:var(--rule);color:var(--primary)}
.btn-ghost.btn-delete-user:hover,.btn-ghost.btn-ex-del:hover{color:var(--error);background:rgba(186,26,26,.08);border-color:rgba(186,26,26,.18)}
.btn-ghost.btn-change-password:hover{color:var(--accent);background:var(--accent-bg);border-color:transparent}
.btn-ghost.btn-ex-view:hover{color:var(--primary);background:var(--primary-bg);border-color:transparent}

.pagination{display:flex;align-items:center;justify-content:center;gap:6px;padding:16px}
.page-btn{
    width:34px;
    height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--text);
    background:var(--surface);
    border:1px solid var(--rule);
    border-radius:var(--radius-sm);
    cursor:pointer;
    font-weight:800;
}
.page-btn:hover{border-color:var(--primary);color:var(--primary)}
.page-btn.active{background:var(--primary);border-color:var(--primary);color:#fff}
.page-btn:disabled{opacity:.45;cursor:not-allowed}
.page-btn:disabled:hover{border-color:var(--rule);color:var(--text)}
.page-ellipsis{min-width:22px;text-align:center;color:var(--text-dim);font-weight:800}

.modal-overlay{
    position:fixed;
    inset:0;
    z-index:100;
    display:none;
    align-items:center;
    justify-content:center;
    padding:20px;
    background:rgba(15,23,42,.46);
    backdrop-filter:blur(5px);
}
.modal-overlay.show{display:flex}
.modal{
    width:100%;
    max-width:520px;
    max-height:calc(100vh - 40px);
    overflow:hidden;
    display:flex;
    flex-direction:column;
    box-shadow:var(--shadow-pop);
    animation:fadeUp .22s ease;
}
.modal-sm{max-width:420px}
.modal-header,.drawer-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:16px 20px;
    border-bottom:1px solid var(--rule);
    background:var(--surface);
}
.modal-header h3,.drawer-header h3{
    min-width:0;
    display:flex;
    align-items:center;
    gap:8px;
    color:var(--ink);
    font-family:var(--font-display);
    font-size:1rem;
    font-weight:800;
    letter-spacing:0;
}
.modal-header h3 .ui-icon,.drawer-header h3 .ui-icon{width:28px;height:28px;color:var(--primary)}
.modal-close{
    width:32px;
    height:32px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    color:var(--text-dim);
    background:transparent;
    border:1px solid var(--rule);
    border-radius:var(--radius-sm);
    cursor:pointer;
    font-size:0;
    transition:background .18s,color .18s,border-color .18s;
}
.modal-close::before{
    content:'';
    width:17px;
    height:17px;
    display:block;
    background:currentColor;
    -webkit-mask:var(--i-x) center/contain no-repeat;
    mask:var(--i-x) center/contain no-repeat;
}
.modal-close:hover{color:var(--error);background:rgba(186,26,26,.08);border-color:rgba(186,26,26,.22)}
.modal-body{padding:20px;overflow:auto}
.modal-hint{margin-bottom:16px;color:var(--text-dim);font-size:.88rem}
.modal-actions{
    display:flex;
    justify-content:flex-end;
    gap:8px;
    padding:14px 20px;
    border-top:1px solid var(--rule);
    background:var(--surface);
}
.fg{margin-bottom:15px}
.fg label{
    display:block;
    margin-bottom:6px;
    color:var(--text-dim);
    font-size:.8rem;
    font-weight:800;
}
.fg input,.fg select,.fg textarea{
    width:100%;
    padding:10px 12px;
    color:var(--text);
    background:var(--surface-2);
    border:1px solid var(--rule);
    border-radius:var(--radius);
    outline:0;
    transition:border-color .18s,box-shadow .18s,background .18s;
}
.fg textarea{resize:vertical;min-height:84px}
.fg input:focus,.fg select:focus,.fg textarea:focus{
    background:var(--surface);
    border-color:var(--primary);
    box-shadow:0 0 0 3px var(--primary-bg);
}
.fg select option{background:var(--surface);color:var(--text)}
.fg .readonly{opacity:.7;cursor:not-allowed}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.help-text{display:block;margin-top:4px;color:var(--text-dim);font-size:.74rem}

.drawer-overlay{position:fixed;inset:0;z-index:90;display:none;background:rgba(15,23,42,.42)}
.drawer-overlay.show{display:block}
.drawer{
    position:fixed;
    top:0;
    right:-430px;
    z-index:91;
    width:410px;
    max-width:92vw;
    height:100vh;
    overflow-y:auto;
    border-radius:0;
    border-top:0;
    border-right:0;
    border-bottom:0;
    transition:right .25s ease;
}
.drawer.open{right:0}
.drawer-header{position:sticky;top:0;z-index:1}
.drawer-body{padding:20px}
.drawer-loading{text-align:center;padding:40px 10px;color:var(--text-dim)}
.detail-avatar{width:72px;height:72px;margin:0 auto 14px;border-radius:50%;font-size:1.8rem}
.detail-name{text-align:center;color:var(--ink);font-size:1.15rem;font-weight:800}
.detail-email{text-align:center;color:var(--text-dim);font-size:.82rem;margin:4px 0 18px}
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px}
.detail-stat{
    padding:13px 12px;
    background:var(--surface-2);
    border:1px solid var(--rule);
    border-radius:var(--radius);
    text-align:center;
}
.detail-stat .ds-value{display:block;color:var(--ink);font-family:var(--font-display);font-size:1.25rem;font-weight:800}
.detail-stat .ds-label{display:block;margin-top:2px;color:var(--text-dim);font-size:.72rem;font-weight:700}
.detail-section{margin-bottom:16px}
.detail-section h4{
    margin-bottom:8px;
    color:var(--text-dim);
    font-size:.76rem;
    font-weight:800;
    letter-spacing:.04em;
    text-transform:uppercase;
}
.detail-row{
    display:flex;
    justify-content:space-between;
    gap:14px;
    padding:9px 0;
    border-bottom:1px solid var(--rule);
    font-size:.84rem;
}
.detail-row .dr-label{color:var(--text-dim)}
.detail-actions{display:flex;flex-direction:column;gap:8px;margin-top:18px}
.detail-chip-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:-4px 0 18px}
.detail-note{color:var(--text-dim)!important}
.detail-list{display:grid;gap:10px}
.detail-item{background:var(--surface-2)!important;border:1px solid var(--rule);border-radius:var(--radius)!important;padding:12px 14px!important}

.toast{
    position:fixed;
    top:20px;
    right:20px;
    z-index:300;
    max-width:min(420px,calc(100vw - 32px));
    padding:13px 18px;
    color:#fff;
    background:var(--primary);
    border-radius:var(--radius);
    box-shadow:var(--shadow-pop);
    font-size:.88rem;
    font-weight:800;
    transform:translateX(calc(100% + 30px));
    transition:transform .28s ease;
}
.toast.show{transform:translateX(0)}

/* Export dialog for the exercise bank. Kept in admin CSS because admin.html
   intentionally does not load the main app stylesheet. */
.export-dialog-overlay{
    position:fixed;
    inset:0;
    z-index:1000;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    background:rgba(15,23,42,.55);
    animation:adminExportFadeIn .16s ease-out;
}
.export-dialog{
    position:relative;
    width:min(560px,100%);
    max-height:calc(100vh - 40px);
    overflow:auto;
    padding:22px 26px;
    color:var(--ink);
    background:var(--surface);
    border:1px solid var(--rule);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-pop);
}
.export-dialog h3{
    margin:0 36px 6px 0;
    font-size:1.16rem;
    line-height:1.3;
    font-weight:900;
    color:var(--ink);
}
.export-dialog-sub{
    margin:0 0 16px;
    color:var(--ink-3);
    font-size:.9rem;
    line-height:1.55;
}
.export-dialog-close{
    position:absolute;
    top:12px;
    right:12px;
    width:32px;
    height:32px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid transparent;
    border-radius:50%;
    color:var(--ink-3);
    background:transparent;
    font-size:1.05rem;
    font-weight:900;
    cursor:pointer;
}
.export-dialog-close:hover{
    color:var(--error);
    background:var(--surface-2);
    border-color:var(--rule);
}
.export-options{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(96px,1fr));
    gap:10px;
    margin-bottom:14px;
}
.export-options button{
    min-height:104px;
    padding:14px 8px 10px;
    border:1px solid var(--rule);
    border-radius:var(--radius);
    color:var(--ink);
    background:var(--surface-2);
    box-shadow:var(--shadow-sm);
    font-family:var(--font-sans);
    font-size:1.55rem;
    cursor:pointer;
    transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease,background .15s ease;
}
.export-options button div{
    margin-top:5px;
    font-size:.9rem;
    line-height:1.2;
    font-weight:900;
}
.export-options button small{
    display:block;
    margin-top:3px;
    color:var(--ink-3);
    font-size:.72rem;
    line-height:1.2;
    font-weight:700;
}
.export-options button:hover:not(:disabled){
    transform:translateY(-2px);
    border-color:var(--primary);
    background:var(--primary-bg);
    box-shadow:0 10px 24px rgba(15,23,42,.12);
}
.export-options button:disabled{
    opacity:.55;
    cursor:progress;
    transform:none;
    box-shadow:none;
}
.export-status{
    min-height:1.4em;
    text-align:center;
    color:var(--ink-3);
    font-size:.88rem;
    font-weight:700;
}
@keyframes adminExportFadeIn{from{opacity:0}to{opacity:1}}

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

@media(max-width:1180px){
    .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:128px}
    .stat-card:nth-child(n){grid-column:auto;grid-row:auto}
    .stat-card:nth-child(1),.stat-card:nth-child(8){grid-row:span 2}
    .stat-card:nth-child(9){grid-column:span 2}
    .dashboard-heading h2{font-size:1.72rem}
}
@media(max-width:900px){
    .sidebar{transform:translateX(-100%)}
    .sidebar.open{transform:translateX(0)}
    .main-content{margin-left:0}
    .btn-menu{display:flex}
    .topbar{padding:12px 16px}
    .tab-content{padding:20px}
    .form-row{grid-template-columns:1fr}
    .topbar-right .admin-user{display:none}
    .topbar-right>.btn{display:none}
    .module-header{flex-direction:column;align-items:stretch;margin-bottom:18px}
    .module-actions{justify-content:flex-start}
}
@media(max-width:640px){
    body{font-size:13px}
    .login-card{padding:28px 22px}
    .topbar{gap:10px}
    .topbar h1{font-size:.94rem}
    .tab-content{padding:16px}
    .dashboard-heading{margin-bottom:18px}
    .dashboard-heading h2{font-size:1.4rem}
    .dashboard-heading p{font-size:.9rem}
    .module-header h2{font-size:1.4rem}
    .module-header p{font-size:.9rem}
    .module-actions .btn{width:100%}
    .stats-grid{grid-template-columns:1fr;grid-auto-rows:126px;gap:12px}
    .stat-card:nth-child(n){grid-column:auto;grid-row:auto}
    .stat-card:nth-child(1),.stat-card:nth-child(8){grid-row:span 1}
    .section-toolbar{align-items:stretch}
    .toolbar-left{width:100%;flex-direction:column;align-items:stretch}
    .search-wrap,.filter-select{width:100%;min-width:0;max-width:none}
    .admin-theme-toggle{width:38px;justify-content:center;padding:0}
    .admin-theme-toggle #admin-theme-label,.admin-theme-toggle .theme-caret{display:none}
    .admin-theme-menu{right:-4px}
    .modal-actions{flex-wrap:wrap}
    .modal-actions .btn{flex:1}
    .toast{top:12px;right:12px}
}