:root{
  /* ===== Spatial environment & sattva-glass material tokens ===== */
  --void:#05070E;
  --navy:#0B1120; --navy-2:#131C31; --navy-3:#1E2E52;
  --gold:#D9B24C; --gold-soft:#F2D98A; --gold-glow:rgba(217,178,76,.55);
  --bg:#E8EDF7; --surface:rgba(255,255,255,.68); --surface-strong:rgba(255,255,255,.86);
  --text:#101828; --text-2:#525C70; --text-3:#8890A2;
  --border:rgba(16,24,40,.09);
  --glass-edge:rgba(255,255,255,.65); --glass-edge-soft:rgba(255,255,255,.4);
  --purple:#6C5CE7; --purple-bg:rgba(108,92,231,.14);
  --green:#12B76A; --green-bg:rgba(18,183,106,.14);
  --blue:#3B82F6; --blue-bg:rgba(59,130,246,.14);
  --orange:#F5893A; --orange-bg:rgba(245,137,58,.15);
  --pink:#EC4899; --pink-bg:rgba(236,72,153,.14);
  --indigo:#7C6FF0; --indigo-bg:rgba(124,111,240,.15);
  --red:#E5484D; --red-bg:rgba(229,72,77,.14);
  --radius:20px; --radius-sm:14px; --radius-lg:26px; --radius-xl:30px;
  --blur-s:blur(16px) saturate(160%);
  --blur-m:blur(24px) saturate(180%);
  --blur-l:blur(40px) saturate(180%);
  --shadow:0 1px 1px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.06);
  --shadow-md:0 1px 2px rgba(16,24,40,.06), 0 18px 38px -16px rgba(16,24,40,.30), 0 6px 16px -8px rgba(16,24,40,.16);
  --shadow-lg:0 2px 4px rgba(16,24,40,.08), 0 34px 70px -20px rgba(16,24,40,.40), 0 10px 24px -8px rgba(16,24,40,.20);
  --shadow-press:inset 0 2px 5px rgba(16,24,40,.20), inset 0 -1px 0 rgba(255,255,255,.5);
  --sheen:linear-gradient(180deg, rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 45%);
  --sheen-dark:linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 55%);
  --t:.22s cubic-bezier(.22,1,.36,1);
}
/* ===== DARK THEME — overrides the light-mode surface/text tokens above.
   Structural colors (sidebar navy, accent colors) stay the same in both themes,
   since almost every component is built from these variables. ===== */
[data-theme="dark"]{
  --bg:#0B1120;
  --surface:rgba(255,255,255,.055);
  --surface-strong:rgba(255,255,255,.09);
  --text:#EDF1FA;
  --text-2:#9FA8BF;
  --text-3:#6D7690;
  --border:rgba(255,255,255,.08);
  --glass-edge:rgba(255,255,255,.12);
  --glass-edge-soft:rgba(255,255,255,.07);
  --sheen:linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 45%);
  --shadow:0 1px 1px rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.4);
  --shadow-md:0 1px 2px rgba(0,0,0,.35), 0 18px 38px -16px rgba(0,0,0,.6), 0 6px 16px -8px rgba(0,0,0,.45);
  --shadow-lg:0 2px 4px rgba(0,0,0,.4), 0 34px 70px -20px rgba(0,0,0,.7), 0 10px 24px -8px rgba(0,0,0,.55);
  --shadow-press:inset 0 2px 5px rgba(0,0,0,.4), inset 0 -1px 0 rgba(255,255,255,.06);
}
[data-theme="dark"] body::before{
  background:
    radial-gradient(36% 30% at 10% 6%, rgba(217,178,76,.16), transparent 60%),
    radial-gradient(42% 36% at 90% 12%, rgba(108,92,231,.22), transparent 60%),
    radial-gradient(46% 40% at 20% 94%, rgba(59,130,246,.16), transparent 60%),
    radial-gradient(38% 34% at 94% 90%, rgba(236,72,153,.12), transparent 60%),
    linear-gradient(160deg, #0B1120 0%, #080C18 45%, #05070E 100%);
}
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.22);}
[data-theme="dark"] .f-input{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1);color:var(--text);}
[data-theme="dark"] .f-input:focus{background:rgba(255,255,255,.1);}
[data-theme="dark"] .ms-box{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.09);}
[data-theme="dark"] .tb-search{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1);}
[data-theme="dark"] .tb-search:focus-within{background:rgba(255,255,255,.1);}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
body{-webkit-tap-highlight-color:transparent;overscroll-behavior-y:none;}
.sidebar,.main,.table-panel,.modal-box,.ms-box,.search-dropdown{-webkit-overflow-scrolling:touch;}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;position:relative;}
/* Ambient "sattva" aurora — the spatial environment every glass surface refracts */
body::before{
  content:'';position:fixed;inset:-12%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(36% 30% at 10% 6%, rgba(217,178,76,.30), transparent 60%),
    radial-gradient(42% 36% at 90% 12%, rgba(108,92,231,.26), transparent 60%),
    radial-gradient(46% 40% at 20% 94%, rgba(59,130,246,.20), transparent 60%),
    radial-gradient(38% 34% at 94% 90%, rgba(236,72,153,.14), transparent 60%),
    linear-gradient(160deg, #EEF1FA 0%, #E7ECF8 45%, #E2E8F5 100%);
  filter:blur(10px);
  animation:auroraDrift 30s ease-in-out infinite alternate;
}
@keyframes auroraDrift{0%{transform:translate3d(0,0,0) scale(1);}100%{transform:translate3d(-2%,1.5%,0) scale(1.045);}}
@media(prefers-reduced-motion:reduce){ body::before{animation:none;} }
button,input,select,textarea{font:inherit;color:inherit;outline:none;}
button{cursor:pointer;border:none;background:none;}
a{color:inherit;text-decoration:none;}
::-webkit-scrollbar{width:7px;height:7px;}
::-webkit-scrollbar-thumb{background:rgba(16,24,40,.18);border-radius:99px;}
::-webkit-scrollbar-thumb:hover{background:rgba(16,24,40,.28);}
img{display:block;max-width:100%;}

/* ===== LOADING SCREEN ===== */
#loadingScreen{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:1.1rem;transition:opacity .35s ease,visibility .35s ease;
  background:radial-gradient(55% 45% at 18% 12%, rgba(217,178,76,.20), transparent 60%),
    radial-gradient(50% 42% at 88% 88%, rgba(108,92,231,.26), transparent 60%),
    linear-gradient(160deg, var(--navy) 0%, var(--void) 100%);}
#loadingScreen.hide{opacity:0;visibility:hidden;pointer-events:none;}
.loader-ring{width:60px;height:60px;border-radius:50%;overflow:hidden;background:#fff;display:flex;align-items:center;justify-content:center;position:relative;animation:loaderPulse 1.6s ease-in-out infinite;box-shadow:0 10px 30px -6px rgba(217,178,76,.45), inset 0 1px 2px rgba(255,255,255,.9);}
.loader-ring::after{content:'';position:absolute;inset:-9px;border-radius:50%;border:2px solid transparent;border-top-color:var(--gold);border-right-color:rgba(217,178,76,.25);animation:loaderSpin 1s linear infinite;}
.loader-ring img{width:100%;height:100%;object-fit:cover;}
@keyframes loaderSpin{to{transform:rotate(360deg);}}
@keyframes loaderPulse{0%,100%{box-shadow:0 0 0 0 rgba(217,178,76,.35), 0 10px 30px -6px rgba(217,178,76,.45);}50%{box-shadow:0 0 0 12px rgba(217,178,76,0), 0 10px 30px -6px rgba(217,178,76,.45);}}
.loader-text{color:rgba(255,255,255,.72);font-size:.8rem;letter-spacing:.03em;}

/* ===== LOGIN — floating glass card over a spatial backdrop ===== */
#loginScreen{position:fixed;inset:0;z-index:999;display:none;align-items:center;justify-content:center;padding:1.5rem;
  background:var(--navy) url('bck-lg.png') center/cover no-repeat;}
#loginScreen.show{display:flex;}
#loginScreen::before{content:'';position:absolute;inset:0;background:
  linear-gradient(160deg, rgba(5,7,14,.78) 0%, rgba(11,17,32,.6) 100%),
  radial-gradient(ellipse 620px 520px at 10% 6%, rgba(217,178,76,.22), transparent 60%),
  radial-gradient(ellipse 520px 420px at 92% 92%, rgba(108,92,231,.26), transparent 60%);}
.login-shell{position:relative;width:100%;max-width:960px;min-height:580px;display:grid;grid-template-columns:1fr 1fr;border-radius:var(--radius-xl);overflow:hidden;border:1px solid rgba(255,255,255,.28);box-shadow:var(--shadow-lg), 0 0 0 1px rgba(255,255,255,.05) inset;}
.login-brand{background:linear-gradient(160deg,rgba(11,17,32,.15) 0%,rgba(11,17,32,.55) 100%), url('home-1.png') center/cover no-repeat, var(--navy);padding:3rem 2.6rem;display:flex;flex-direction:column;color:#fff;position:relative;overflow:hidden;}
.login-brand::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle at 85% 15%, rgba(217,178,76,.22), transparent 55%);}
.login-brand::after{content:'';position:absolute;inset:0 0 auto 0;height:1px;background:linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);}
.brand-mark{position:relative;display:flex;align-items:center;gap:.7rem;}
.brand-ring{width:52px;height:52px;border-radius:50%;overflow:hidden;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 3px rgba(217,178,76,.3), 0 8px 20px -6px rgba(0,0,0,.5);flex-shrink:0;}
.brand-ring img{width:100%;height:100%;object-fit:cover;}
.brand-name{font-family:'DM Serif Display',serif;font-size:1.05rem;line-height:1.15;letter-spacing:.02em;}
.brand-sub{font-size:.62rem;letter-spacing:.14em;color:rgba(255,255,255,.5);text-transform:uppercase;margin-top:2px;}
.login-brand h1{position:relative;font-family:'DM Serif Display',serif;font-size:2.1rem;line-height:1.25;margin-top:3rem;max-width:320px;}
.login-brand p{position:relative;font-size:.9rem;color:rgba(255,255,255,.65);margin-top:1rem;max-width:300px;line-height:1.6;}
.login-brand-foot{position:relative;margin-top:auto;padding-top:2rem;font-size:.78rem;color:rgba(255,255,255,.45);}
.login-form-panel{position:relative;padding:3rem 2.8rem;display:flex;flex-direction:column;justify-content:center;
  background:rgba(255,255,255,.74);backdrop-filter:var(--blur-m);-webkit-backdrop-filter:var(--blur-m);
  border-left:1px solid rgba(255,255,255,.5);}
.login-form-panel::before{content:'';position:absolute;inset:0;background:var(--sheen);opacity:.5;pointer-events:none;}
.auth-tabs{display:flex;gap:.4rem;background:rgba(16,24,40,.06);padding:4px;border-radius:99px;margin-bottom:1.8rem;width:fit-content;box-shadow:inset 0 1px 2px rgba(16,24,40,.12);position:relative;}
.auth-tab{padding:.5rem 1.2rem;border-radius:99px;font-size:.82rem;font-weight:600;color:var(--text-2);transition:var(--t);position:relative;}
.auth-tab.active{background:linear-gradient(180deg,var(--navy-3),var(--navy));color:#fff;box-shadow:0 4px 10px -3px rgba(11,17,32,.5), inset 0 1px 0 rgba(255,255,255,.2);}
.login-form-panel{position:relative;}
.login-form-panel h2{position:relative;font-size:1.5rem;font-weight:700;margin-bottom:.3rem;}
.login-form-panel>p.sub{position:relative;font-size:.85rem;color:var(--text-2);margin-bottom:1.6rem;}
.f-group{margin-bottom:1rem;position:relative;}
.f-label{display:block;font-size:.76rem;font-weight:600;color:var(--text-2);margin-bottom:.35rem;}
.f-input-wrap{position:relative;}
.f-input-wrap i{position:absolute;left:.85rem;top:50%;transform:translateY(-50%);color:var(--text-3);font-size:.78rem;}
.f-input{width:100%;padding:.72rem .9rem .72rem 2.3rem;border-radius:var(--radius-sm);border:1px solid rgba(16,24,40,.08);
  background:rgba(255,255,255,.55);backdrop-filter:blur(6px);font-size:.87rem;transition:var(--t);
  box-shadow:inset 0 1px 3px rgba(16,24,40,.10), inset 0 -1px 0 rgba(255,255,255,.6);}
.f-input:focus{border-color:rgba(108,92,231,.5);background:rgba(255,255,255,.92);
  box-shadow:inset 0 1px 3px rgba(16,24,40,.08), 0 0 0 4px rgba(108,92,231,.14), 0 0 0 1px rgba(217,178,76,.3);}
.auth-btn{position:relative;overflow:hidden;width:100%;padding:.8rem;border-radius:var(--radius-sm);
  background:linear-gradient(180deg, var(--navy-3) 0%, var(--navy) 55%, #070b15 100%);
  color:#fff;font-weight:700;font-size:.87rem;margin-top:.4rem;transition:var(--t);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 10px 24px -8px rgba(11,17,32,.55), inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(0,0,0,.3);}
.auth-btn::before{content:'';position:absolute;inset:0;background:var(--sheen-dark);pointer-events:none;}
.auth-btn:hover{transform:translateY(-1px);box-shadow:0 14px 30px -8px rgba(11,17,32,.6), inset 0 1px 0 rgba(255,255,255,.26);}
.auth-btn:active{transform:translateY(1px);box-shadow:inset 0 3px 8px rgba(0,0,0,.4);}
.auth-btn:disabled{opacity:.6;cursor:not-allowed;transform:none;}
#authMsg{margin-top:.9rem;font-size:.8rem;padding:.6rem .8rem;border-radius:var(--radius-sm);display:none;backdrop-filter:blur(6px);}
#authMsg.err{background:var(--red-bg);color:#B3232A;border:1px solid rgba(229,72,77,.25);display:block;}
#authMsg.ok{background:var(--green-bg);color:#0C8A52;border:1px solid rgba(18,183,106,.25);display:block;}
.first-admin-note{margin-top:1.4rem;display:flex;gap:.55rem;padding:.7rem .85rem;background:var(--purple-bg);border:1px solid rgba(108,92,231,.2);border-radius:var(--radius-sm);font-size:.76rem;color:#4a3fae;line-height:1.5;backdrop-filter:blur(6px);}
.first-admin-note i{margin-top:2px;}
@media(max-width:760px){.login-shell{grid-template-columns:1fr;min-height:auto;}.login-brand{display:none;}.login-form-panel{padding:2.4rem 1.8rem;border-left:none;}}

/* ===== APP SHELL — floating spatial dock: sidebar & topbar are glass panels
   hovering above the aurora, separated by real gaps so depth reads clearly ===== */
#app{display:none;height:100vh;grid-template-columns:266px 1fr;grid-template-rows:80px 1fr;gap:.85rem;padding:.85rem;background:transparent;}
#app.show{display:grid;}

.sidebar{grid-row:1/-1;position:relative;padding:1.4rem 1rem 1rem;display:flex;flex-direction:column;overflow-y:auto;
  border-radius:var(--radius-lg);
  background:linear-gradient(165deg, rgba(23,33,58,.92) 0%, rgba(8,12,22,.9) 100%);
  backdrop-filter:var(--blur-m);-webkit-backdrop-filter:var(--blur-m);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.07);}
.sidebar::before{content:'';position:absolute;inset:0;border-radius:inherit;background:var(--sheen-dark);pointer-events:none;}
.sb-logo{position:relative;display:flex;align-items:center;gap:.7rem;padding:0 .5rem 1.4rem;}
.sb-ring{width:44px;height:44px;border-radius:50%;overflow:hidden;background:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 6px 16px -4px rgba(0,0,0,.5), 0 0 0 1px rgba(217,178,76,.25);}
.sb-ring img{width:100%;height:100%;object-fit:cover;}
.sb-title{font-family:'DM Serif Display',serif;color:#fff;font-size:.86rem;line-height:1.2;letter-spacing:.03em;}
.sb-sub{font-size:.55rem;letter-spacing:.1em;color:rgba(255,255,255,.45);text-transform:uppercase;margin-top:2px;}
.sb-nav{position:relative;flex:1;overflow-y:auto;}
.sb-group-label{font-size:.65rem;font-weight:700;letter-spacing:.08em;color:rgba(255,255,255,.32);text-transform:uppercase;padding:1rem .8rem .5rem;}
.sb-item{display:flex;align-items:center;gap:.75rem;padding:.62rem .8rem;border-radius:var(--radius-sm);color:rgba(255,255,255,.62);font-size:.84rem;font-weight:500;transition:var(--t);margin-bottom:2px;cursor:pointer;position:relative;}
.sb-item i{width:16px;text-align:center;font-size:.85rem;}
.sb-item:hover{background:rgba(255,255,255,.08);color:#fff;transform:translateX(2px);}
.sb-item:active{transform:translateX(2px) scale(.98);}
.sb-item.active{background:linear-gradient(135deg, rgba(124,111,240,.95), rgba(108,92,231,.85));color:#fff;font-weight:600;
  box-shadow:0 8px 20px -6px rgba(108,92,231,.55), 0 0 0 1px rgba(217,178,76,.4), inset 0 1px 0 rgba(255,255,255,.3);}
.sb-item.child{padding-left:1rem;font-size:.82rem;}
.sb-item.child i{font-size:.4rem;}

/* multiselect checklist (used for assigning subjects to a mentor) */
.ms-box{max-height:190px;overflow-y:auto;border:1px solid rgba(16,24,40,.08);border-radius:var(--radius-sm);padding:.5rem .7rem;
  background:rgba(255,255,255,.5);backdrop-filter:blur(8px);box-shadow:inset 0 1px 3px rgba(16,24,40,.08);}
.ms-opt{display:flex;align-items:center;gap:.55rem;padding:.4rem .1rem;font-size:.83rem;cursor:pointer;}
.ms-opt input{width:15px;height:15px;accent-color:var(--purple);cursor:pointer;flex-shrink:0;}
.subject-chip{display:inline-flex;align-items:center;padding:.2rem .55rem;border-radius:99px;font-size:.68rem;font-weight:700;background:var(--purple-bg);color:var(--purple);margin:1px 3px 1px 0;box-shadow:inset 0 1px 0 rgba(255,255,255,.5);}

.topbar{grid-column:2;position:relative;display:flex;align-items:center;justify-content:space-between;padding:0 1.7rem;gap:.8rem;
  border-radius:var(--radius-lg);
  background:var(--surface-strong);backdrop-filter:var(--blur-s);-webkit-backdrop-filter:var(--blur-s);
  border:1px solid var(--glass-edge);
  box-shadow:var(--shadow-md), inset 0 1px 0 rgba(255,255,255,.7);}
.tb-left{display:flex;align-items:center;gap:1rem;min-width:0;flex:1;overflow:hidden;}
.tb-greet{min-width:0;}
.tb-greet h1{font-size:1.15rem;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tb-greet p{font-size:.78rem;color:var(--text-2);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tb-right{display:flex;align-items:center;gap:1.1rem;flex-shrink:0;}
.tb-search-wrap{position:relative;}
.tb-search{display:flex;align-items:center;gap:.6rem;background:rgba(255,255,255,.55);border:1px solid rgba(16,24,40,.08);border-radius:var(--radius-sm);padding:.55rem .9rem;width:230px;color:var(--text-3);font-size:.82rem;
  box-shadow:inset 0 1px 3px rgba(16,24,40,.08);backdrop-filter:blur(6px);transition:var(--t);}
.tb-search:focus-within{background:rgba(255,255,255,.85);box-shadow:inset 0 1px 3px rgba(16,24,40,.06), 0 0 0 3px rgba(108,92,231,.13);}
.tb-search input{background:none;border:none;width:100%;color:var(--text);}
.search-dropdown{position:absolute;top:calc(100% + 10px);width:330px;max-width:calc(100vw - 2rem);max-height:400px;overflow-y:auto;
  background:var(--surface-strong);backdrop-filter:var(--blur-m);-webkit-backdrop-filter:var(--blur-m);
  border:1px solid var(--glass-edge);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);display:none;z-index:600;padding:.5rem;}
.search-dropdown{left:0;}
.search-dropdown.show{display:block;}
.search-result{display:flex;align-items:center;gap:.7rem;padding:.6rem;border-radius:var(--radius-sm);cursor:pointer;transition:var(--t);}
.search-result:hover{background:rgba(108,92,231,.08);}
.search-result .sr-icon{width:34px;height:34px;border-radius:10px;background:var(--purple-bg);color:var(--purple);display:flex;align-items:center;justify-content:center;font-size:.8rem;flex-shrink:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.5);}
.search-result .sr-title{font-size:.82rem;font-weight:700;}
.search-result .sr-sub{font-size:.72rem;color:var(--text-2);margin-top:1px;}
.dropdown-empty{padding:1.4rem .8rem;text-align:center;font-size:.8rem;color:var(--text-3);}
@media(max-width:900px){.search-dropdown{width:280px;}}
.tb-search-toggle{display:none;width:38px;height:38px;border-radius:50%;background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.6));align-items:center;justify-content:center;color:var(--text-2);font-size:.9rem;cursor:pointer;transition:var(--t);flex-shrink:0;
  box-shadow:0 2px 6px rgba(16,24,40,.08), inset 0 1px 0 rgba(255,255,255,.9);}
.tb-search-toggle:hover{transform:translateY(-1px);}
.tb-search-toggle:active{transform:translateY(1px);box-shadow:var(--shadow-press);}
.theme-toggle{width:38px;height:38px;border-radius:50%;background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.6));display:flex;align-items:center;justify-content:center;color:var(--text-2);font-size:.9rem;cursor:pointer;transition:var(--t);flex-shrink:0;
  box-shadow:0 2px 6px rgba(16,24,40,.08), inset 0 1px 0 rgba(255,255,255,.9);}
.theme-toggle:hover{transform:translateY(-1px);}
.theme-toggle:active{transform:translateY(1px);box-shadow:var(--shadow-press);}
.theme-toggle i{transition:var(--t);}
[data-theme="dark"] .theme-toggle{background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.06));
  box-shadow:0 2px 6px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.12);}
.tb-user{display:flex;align-items:center;gap:.6rem;cursor:pointer;}
.tb-avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(150deg, #8f7ff0, var(--purple));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem;box-shadow:0 4px 10px -2px rgba(108,92,231,.55), inset 0 1px 0 rgba(255,255,255,.35);}
.tb-user-name{font-size:.83rem;font-weight:700;}
.tb-user-role{font-size:.7rem;color:var(--text-2);}
.tb-logout{color:var(--text-3);font-size:.9rem;margin-left:.2rem;transition:var(--t);}
.tb-logout:hover{color:var(--red);transform:scale(1.1);}

.main{grid-column:2;overflow-y:auto;overflow-x:hidden;padding:.3rem .2rem 3rem;background:transparent;}
.page{display:none;}
.page.active{display:block;animation:fadein .3s ease;}
@keyframes fadein{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

/* stat cards — floating glass panes with a specular sheen along the top edge */
.stat-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1rem;margin-bottom:1.4rem;}
.stat-card{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--glass-edge);border-radius:var(--radius);padding:1.2rem;
  backdrop-filter:var(--blur-s);-webkit-backdrop-filter:var(--blur-s);box-shadow:var(--shadow);transition:var(--t);}
.stat-card::before{content:'';position:absolute;inset:0;background:var(--sheen);opacity:.55;pointer-events:none;}
.stat-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);}
.stat-icon{position:relative;width:42px;height:42px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:1.05rem;margin-bottom:.8rem;box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 4px 10px -4px rgba(16,24,40,.2);}
.stat-num{position:relative;font-size:1.5rem;font-weight:800;line-height:1;}
.stat-label{position:relative;font-size:.78rem;color:var(--text-2);margin-top:.3rem;}
.stat-delta{position:relative;font-size:.72rem;color:var(--green);margin-top:.5rem;font-weight:600;}
.stat-delta.flat{color:var(--text-3);}
@media(max-width:1400px){.stat-grid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:760px){.stat-grid{grid-template-columns:repeat(2,1fr);}}

.dash-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:1.2rem;margin-bottom:1.2rem;}
@media(max-width:1100px){.dash-grid{grid-template-columns:1fr;}}
.panel{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--glass-edge);border-radius:var(--radius);padding:1.4rem;
  backdrop-filter:var(--blur-s);-webkit-backdrop-filter:var(--blur-s);box-shadow:var(--shadow);}
.panel::before{content:'';position:absolute;inset:0;background:var(--sheen);opacity:.45;pointer-events:none;}
.panel-head{position:relative;display:flex;align-items:center;justify-content:space-between;margin-bottom:1.1rem;}
.panel-head h3{font-size:1rem;font-weight:700;}
.panel-link{font-size:.78rem;font-weight:600;color:var(--purple);}
.chart-wrap{position:relative;height:230px;}
.mini-stats{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem;margin-top:1.2rem;padding-top:1.1rem;border-top:1px solid var(--border);}
body.role-student .mini-stats{grid-template-columns:repeat(3,1fr);}
.mini-stat span{display:block;}
.mini-stat .ms-label{font-size:.72rem;color:var(--text-2);}
.mini-stat .ms-val{font-size:1.05rem;font-weight:800;margin:.15rem 0;}
.mini-stat .ms-delta{font-size:.68rem;color:var(--green);font-weight:600;}

.activity-item{display:flex;gap:.7rem;padding:.7rem 0;border-bottom:1px solid var(--border);}
.activity-item:last-child{border-bottom:none;}
.act-icon{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:.8rem;flex-shrink:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.5);}
.act-title{font-size:.83rem;font-weight:600;}
.act-sub{font-size:.75rem;color:var(--text-2);margin-top:1px;}
.act-time{font-size:.68rem;color:var(--text-3);white-space:nowrap;margin-left:auto;padding-left:.5rem;}
.act-row{display:flex;width:100%;align-items:flex-start;}

.tables-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;}
@media(max-width:1100px){.tables-grid{grid-template-columns:1fr;}}
body.role-mentor .tables-grid, body.role-student .tables-grid{grid-template-columns:1fr;}

table{width:100%;border-collapse:collapse;}
th{text-align:left;font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;color:var(--text-3);padding:.5rem .6rem;border-bottom:1px solid var(--border);font-weight:700;}
td{padding:.65rem .6rem;font-size:.82rem;border-bottom:1px solid var(--border);vertical-align:middle;}
tr:last-child td{border-bottom:none;}
tbody tr{transition:var(--t);}
tbody tr:hover{background:rgba(108,92,231,.05);}
.cell-user{display:flex;align-items:center;gap:.6rem;}
.avatar-sm{width:32px;height:32px;border-radius:50%;background:var(--indigo-bg);color:var(--indigo);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.72rem;flex-shrink:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.5);}
.pill{display:inline-flex;align-items:center;padding:.25rem .65rem;border-radius:99px;font-size:.7rem;font-weight:700;box-shadow:inset 0 1px 0 rgba(255,255,255,.5);}
.pill-active,.pill-published,.pill-Active{background:var(--green-bg);color:var(--green);}
.pill-draft,.pill-Draft,.pill-pending{background:var(--orange-bg);color:var(--orange);}
.pill-inactive,.pill-Inactive{background:var(--red-bg);color:var(--red);}
.pill-role{background:var(--purple-bg);color:var(--purple);}
.pill-Scheduled{background:var(--blue-bg);color:var(--blue);}
.pill-Completed{background:var(--green-bg);color:var(--green);}
.pill-Cancelled{background:rgba(240,68,56,.14);color:#D92D20;}
.progress-bar{width:90px;height:6px;border-radius:99px;background:rgba(16,24,40,.08);overflow:hidden;display:inline-block;vertical-align:middle;margin-right:.4rem;box-shadow:inset 0 1px 2px rgba(16,24,40,.18);}
.progress-bar span{display:block;height:100%;background:linear-gradient(90deg,var(--purple),#8f7ff0);border-radius:99px;box-shadow:0 0 6px rgba(108,92,231,.55);}
.icon-btn{width:30px;height:30px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;color:var(--text-3);transition:var(--t);}
.icon-btn:hover{background:rgba(16,24,40,.06);color:var(--text);transform:translateY(-1px);}
.icon-btn:active{transform:translateY(0);box-shadow:var(--shadow-press);}
.icon-btn.danger:hover{background:var(--red-bg);color:var(--red);}

/* generic entity page */
.page-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.2rem;flex-wrap:wrap;gap:.7rem;}
.page-head h2{font-size:1.3rem;font-weight:800;}
.page-head p{font-size:.82rem;color:var(--text-2);margin-top:2px;}
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:.5rem;padding:.65rem 1.15rem;border-radius:var(--radius-sm);font-size:.83rem;font-weight:700;transition:var(--t);}
.btn-primary{background:linear-gradient(180deg, var(--navy-3) 0%, var(--navy) 55%, #070b15 100%);color:#fff;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 10px 22px -8px rgba(11,17,32,.55), inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(0,0,0,.3);}
.btn-primary::before{content:'';position:absolute;inset:0;background:var(--sheen-dark);pointer-events:none;}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 14px 28px -8px rgba(11,17,32,.6), inset 0 1px 0 rgba(255,255,255,.26);}
.btn-primary:active{transform:translateY(1px);box-shadow:inset 0 3px 8px rgba(0,0,0,.4);}
.btn-ghost{background:rgba(255,255,255,.55);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.7);color:var(--text);
  box-shadow:0 1px 2px rgba(16,24,40,.05), inset 0 1px 0 rgba(255,255,255,.8);}
.btn-ghost:hover{background:rgba(255,255,255,.78);transform:translateY(-1px);box-shadow:var(--shadow-md);}
.btn-ghost:active{transform:translateY(1px);box-shadow:var(--shadow-press);}
.table-panel{position:relative;overflow-x:auto;background:var(--surface);border:1px solid var(--glass-edge);border-radius:var(--radius);padding:1.2rem;
  backdrop-filter:var(--blur-s);-webkit-backdrop-filter:var(--blur-s);box-shadow:var(--shadow);}
/* Lesson video: crops Google Drive's own top toolbar (filename, pop-out, more-menu)
   so students just see the player, not that it's hosted on Drive. Only applied
   for Drive embeds — YouTube/other links render uncropped via .is-drive toggle. */
.lesson-video-wrap{position:relative;overflow:hidden;border-radius:var(--radius-sm);background:#000;height:74vh;border:1px solid var(--border);box-shadow:var(--shadow-md);}
.ai-viewer-frame{width:100%;height:74vh;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;box-shadow:var(--shadow-md);}
.lesson-video-wrap iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:none;}
.lesson-video-wrap.is-drive iframe{top:-56px;height:calc(100% + 56px);}

/* ---------------- STYLISH AUDIO PLAYER (Audio Explanations) ---------------- */
.audio-player-card{position:relative;max-width:520px;margin:0 auto;border-radius:var(--radius-lg);overflow:hidden;padding:2.2rem 1.8rem 1.8rem;
  background:linear-gradient(165deg,var(--navy) 0%,var(--navy-2) 55%,var(--navy-3) 100%);
  box-shadow:var(--shadow-lg), 0 0 0 1px rgba(217,178,76,.12);text-align:center;isolation:isolate;}
.audio-player-card::before{content:'';position:absolute;inset:0;background:
  radial-gradient(circle at 18% 8%, rgba(217,178,76,.20), transparent 55%),
  radial-gradient(circle at 85% 92%, rgba(108,92,231,.28), transparent 55%);
  pointer-events:none;z-index:0;}
.audio-player-card > *{position:relative;z-index:1;}
.ap-art{position:relative;width:132px;height:132px;margin:0 auto 1.3rem;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 35% 30%, var(--gold-soft), var(--gold) 60%, #a97e22 100%);
  box-shadow:0 0 0 6px rgba(217,178,76,.12), 0 16px 34px -10px rgba(217,178,76,.55), inset 0 2px 6px rgba(255,255,255,.35);}
.ap-art i{font-size:2.3rem;color:var(--navy);filter:drop-shadow(0 2px 2px rgba(0,0,0,.15));}
.ap-art-rings{position:absolute;inset:-14px;pointer-events:none;}
.ap-art-rings span{position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--gold-glow);opacity:0;}
.audio-player-card.is-playing .ap-art-rings span{animation:apRingPulse 2.6s ease-out infinite;}
.ap-art-rings span:nth-child(2){animation-delay:.7s !important;}
.ap-art-rings span:nth-child(3){animation-delay:1.4s !important;}
@keyframes apRingPulse{0%{transform:scale(.82);opacity:.65;}100%{transform:scale(1.35);opacity:0;}}
.ap-bars{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);display:flex;align-items:flex-end;gap:3px;height:16px;opacity:.9;}
.ap-bars span{width:3px;border-radius:2px;background:var(--gold-soft);height:4px;box-shadow:0 0 6px var(--gold-glow);}
.audio-player-card.is-playing .ap-bars span{animation:apBar 1s ease-in-out infinite;}
.ap-bars span:nth-child(1){animation-delay:-.9s;}.ap-bars span:nth-child(2){animation-delay:-.7s;}
.ap-bars span:nth-child(3){animation-delay:-1.1s;}.ap-bars span:nth-child(4){animation-delay:-.4s;}
.ap-bars span:nth-child(5){animation-delay:-.8s;}.ap-bars span:nth-child(6){animation-delay:-.2s;}
.ap-bars span:nth-child(7){animation-delay:-1s;}.ap-bars span:nth-child(8){animation-delay:-.5s;}
@keyframes apBar{0%,100%{height:4px;}50%{height:16px;}}
.ap-title{color:#fff;font-family:'DM Serif Display',serif;font-size:1.3rem;font-weight:400;margin-bottom:1.4rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 .5rem;}
.ap-seek-row{display:flex;align-items:center;gap:.6rem;margin-bottom:1.3rem;}
.ap-time{font-size:.72rem;color:rgba(255,255,255,.65);font-variant-numeric:tabular-nums;min-width:34px;}
.ap-time:last-child{text-align:right;}
input.ap-seek{-webkit-appearance:none;appearance:none;flex:1;height:5px;border-radius:99px;cursor:pointer;outline:none;
  background:linear-gradient(90deg, var(--gold) var(--ap-progress,0%), rgba(255,255,255,.16) var(--ap-progress,0%));}
input.ap-seek::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--gold-soft);
  box-shadow:0 0 0 3px rgba(217,178,76,.25),0 2px 6px rgba(0,0,0,.35);cursor:pointer;transition:transform .15s;}
input.ap-seek::-webkit-slider-thumb:hover{transform:scale(1.15);}
input.ap-seek::-moz-range-thumb{width:14px;height:14px;border:none;border-radius:50%;background:var(--gold-soft);cursor:pointer;
  box-shadow:0 0 0 3px rgba(217,178,76,.25),0 2px 6px rgba(0,0,0,.35);}
input.ap-seek::-moz-range-track{height:5px;border-radius:99px;background:rgba(255,255,255,.16);}
.ap-controls-row{display:flex;align-items:center;justify-content:space-between;gap:.8rem;}
.ap-transport{display:flex;align-items:center;gap:.9rem;}
.ap-play-btn{width:56px;height:56px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(155deg,var(--gold-soft),var(--gold) 65%,#b6872a);color:var(--navy);font-size:1.15rem;
  box-shadow:0 10px 22px -6px rgba(217,178,76,.65), inset 0 1px 0 rgba(255,255,255,.5);transition:var(--t);}
.ap-play-btn i{position:relative;left:1px;}
.ap-play-btn:hover{transform:scale(1.06);}
.ap-play-btn:active{transform:scale(.96);}
.ap-skip-btn{width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);
  color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.82rem;transition:var(--t);}
.ap-skip-btn:hover{background:rgba(255,255,255,.14);transform:translateY(-1px);}
.ap-speed-wrap{display:flex;}
select.ap-speed{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:#fff;border-radius:99px;
  font-size:.72rem;font-weight:600;padding:.4rem .7rem;cursor:pointer;outline:none;}
select.ap-speed option{color:#101828;}
.ap-volume-wrap{display:flex;align-items:center;gap:.4rem;color:rgba(255,255,255,.75);font-size:.78rem;}
input.ap-volume{-webkit-appearance:none;appearance:none;width:64px;height:4px;border-radius:99px;cursor:pointer;outline:none;
  background:linear-gradient(90deg, var(--gold-soft) var(--ap-vol,100%), rgba(255,255,255,.16) var(--ap-vol,100%));}
input.ap-volume::-webkit-slider-thumb{-webkit-appearance:none;width:11px;height:11px;border-radius:50%;background:#fff;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.4);}
input.ap-volume::-moz-range-thumb{width:11px;height:11px;border:none;border-radius:50%;background:#fff;cursor:pointer;}
input.ap-volume::-moz-range-track{height:4px;border-radius:99px;background:rgba(255,255,255,.16);}
@media (max-width:640px){
  .audio-player-card{padding:1.8rem 1.1rem 1.4rem;}
  .ap-controls-row{flex-wrap:wrap;justify-content:center;}
  .ap-volume-wrap{order:3;width:100%;justify-content:center;margin-top:.6rem;}
}
.ai-breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;margin-bottom:1rem;font-size:.83rem;}
.ai-breadcrumb .crumb{cursor:pointer;color:var(--purple);font-weight:600;}
.ai-breadcrumb .crumb:hover{text-decoration:underline;}
.ai-breadcrumb .crumb.current{color:var(--text);cursor:default;font-weight:700;}
.ai-breadcrumb .crumb.current:hover{text-decoration:none;}
.ai-breadcrumb .sep{color:var(--text-3);}
/* ===== Calendar / Sessions ===== */
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:.4rem;}
.cal-dow{text-align:center;font-size:.68rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--text-3);padding-bottom:.3rem;}
.cal-day{position:relative;min-height:64px;border-radius:12px;border:1px solid var(--border);padding:.4rem .5rem;cursor:pointer;transition:var(--t);background:var(--surface);}
.cal-day:hover{border-color:rgba(108,92,231,.4);box-shadow:var(--shadow-md);}
.cal-day.other-month{opacity:.35;}
.cal-day.today{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold-glow);}
.cal-day.selected{background:var(--purple-bg);border-color:var(--purple);}
.cal-day .cd-num{font-size:.78rem;font-weight:700;}
.cal-day .cd-dots{position:absolute;left:.5rem;bottom:.4rem;display:flex;gap:3px;flex-wrap:wrap;max-width:calc(100% - 1rem);}
.cal-day .cd-dot{width:6px;height:6px;border-radius:50%;background:var(--purple);}
.cal-day .cd-count{position:absolute;right:.5rem;bottom:.35rem;font-size:.64rem;font-weight:700;color:var(--purple);}
.session-card{display:flex;gap:.8rem;align-items:flex-start;border:1px solid var(--glass-edge);border-radius:16px;padding:.85rem 1rem;margin-bottom:.7rem;background:var(--surface);backdrop-filter:blur(14px);box-shadow:var(--shadow);}
.session-card .sc-time{flex-shrink:0;width:64px;font-size:.72rem;font-weight:700;color:var(--purple);line-height:1.3;}
.session-card .sc-body{flex:1;min-width:0;}
.session-card .sc-title{font-weight:700;font-size:.9rem;}
.session-card .sc-meta{font-size:.75rem;color:var(--text-2);margin-top:.2rem;}
.session-card .sc-actions{flex-shrink:0;display:flex;gap:.3rem;}
@media(max-width:640px){
  .cal-day{min-height:46px;padding:.3rem .35rem;}
  .cal-day .cd-num{font-size:.7rem;}
  .cal-dow{font-size:.6rem;}
}
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:1rem;}
.cat-card{position:relative;overflow:hidden;border:1px solid var(--glass-edge);border-radius:18px;padding:1.1rem;cursor:pointer;transition:var(--t);
  background:var(--surface);backdrop-filter:blur(14px);box-shadow:var(--shadow);}
.cat-card::before{content:'';position:absolute;inset:0;background:var(--sheen);opacity:.5;pointer-events:none;}
.cat-card:hover{box-shadow:var(--shadow-md);transform:translateY(-4px) scale(1.01);border-color:rgba(108,92,231,.4);}
.cat-card:active{transform:translateY(-1px) scale(.99);}
.cat-card .cc-icon{position:relative;width:40px;height:40px;border-radius:12px;background:var(--purple-bg);color:var(--purple);display:flex;align-items:center;justify-content:center;font-size:1rem;margin-bottom:.7rem;box-shadow:inset 0 1px 0 rgba(255,255,255,.6);}
.cat-card .cc-title{position:relative;font-weight:700;font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cat-card .cc-sub{position:relative;font-size:.74rem;color:var(--text-2);margin-top:.2rem;}
.file-card{display:flex;align-items:center;gap:.8rem;border:1px solid var(--glass-edge);border-radius:18px;padding:.9rem 1rem;cursor:pointer;transition:var(--t);grid-column:1/-1;
  background:var(--surface);backdrop-filter:blur(14px);box-shadow:var(--shadow);position:relative;overflow:hidden;}
.file-card::before{content:'';position:absolute;inset:0;background:var(--sheen);opacity:.4;pointer-events:none;}
.file-card:hover{box-shadow:var(--shadow-md);border-color:rgba(108,92,231,.4);transform:translateY(-2px);}
.file-card .fc-icon{position:relative;width:38px;height:38px;border-radius:11px;background:var(--indigo-bg);color:var(--indigo);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:.95rem;box-shadow:inset 0 1px 0 rgba(255,255,255,.6);}
.file-card .fc-title{position:relative;font-weight:700;font-size:.86rem;}
.file-card .fc-sub{position:relative;font-size:.72rem;color:var(--text-2);margin-top:1px;}
.file-card .fc-actions{position:relative;margin-left:auto;display:flex;gap:.3rem;}
.quiz-q{padding:1.1rem 0;border-bottom:1px solid var(--border);}
.quiz-q:last-child{border-bottom:none;}
.quiz-q-title{font-weight:700;font-size:.9rem;margin-bottom:.8rem;line-height:1.5;}
.quiz-opt{display:flex;align-items:center;gap:.65rem;padding:.65rem .9rem;border:1px solid rgba(16,24,40,.1);border-radius:var(--radius-sm);cursor:pointer;font-size:.85rem;transition:var(--t);margin-bottom:.5rem;
  background:rgba(255,255,255,.45);box-shadow:inset 0 1px 2px rgba(16,24,40,.05);}
.quiz-opt:hover{border-color:var(--purple);transform:translateX(2px);}
.quiz-opt.selected{border-color:var(--purple);background:linear-gradient(180deg, rgba(108,92,231,.16), rgba(108,92,231,.08));font-weight:600;box-shadow:inset 0 1px 2px rgba(16,24,40,.05), 0 0 0 1px rgba(108,92,231,.15);}
.quiz-opt input{accent-color:var(--purple);width:15px;height:15px;flex-shrink:0;}
.quiz-score-circle{width:88px;height:88px;border-radius:50%;background:radial-gradient(circle at 32% 28%, rgba(255,255,255,.9), rgba(108,92,231,.12) 70%);color:var(--purple);display:flex;align-items:center;justify-content:center;font-size:1.7rem;font-weight:800;margin:0 auto 1.2rem;box-shadow:0 10px 24px -8px rgba(108,92,231,.4), inset 0 2px 4px rgba(255,255,255,.8), inset 0 -6px 12px rgba(108,92,231,.15);}
#aiViewerPanel:fullscreen,#aiViewerPanel:-webkit-full-screen{padding:0;border:none;border-radius:0;background:#fff;display:flex;}
#aiViewerPanel:fullscreen #aiViewerFrame,#aiViewerPanel:-webkit-full-screen #aiViewerFrame{height:100vh !important;border:none;border-radius:0;}
.empty-state{text-align:center;padding:3rem 1rem;color:var(--text-2);}
.empty-state i{font-size:1.8rem;color:var(--text-3);margin-bottom:.7rem;}
.empty-state h4{font-size:.92rem;color:var(--text);margin-bottom:.2rem;}
.empty-state p{font-size:.8rem;}

/* modal — the closest surface to the viewer: heaviest blur + deepest shadow */
.modal-overlay{position:fixed;inset:0;background:rgba(5,7,14,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;z-index:500;padding:1.5rem;}
.modal-overlay.show{display:flex;}
.modal-box{position:relative;overflow-y:auto;background:var(--surface-strong);backdrop-filter:var(--blur-m);-webkit-backdrop-filter:var(--blur-m);
  border:1px solid var(--glass-edge);border-radius:var(--radius-lg);width:100%;max-width:460px;max-height:88vh;box-shadow:var(--shadow-lg);}
.modal-box.wide{max-width:960px;}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:1.2rem 1.4rem;border-bottom:1px solid var(--border);}
.modal-head h3{font-size:1.02rem;font-weight:700;}
.modal-close{width:30px;height:30px;border-radius:9px;color:var(--text-3);transition:var(--t);}
.modal-close:hover{background:rgba(16,24,40,.06);color:var(--text);}
.modal-body{padding:1.3rem 1.4rem;}
.modal-foot{padding:1rem 1.4rem 1.4rem;display:flex;gap:.7rem;justify-content:flex-end;}

/* toast */
#toastWrap{position:fixed;bottom:1.4rem;right:1.4rem;z-index:9999;display:flex;flex-direction:column;gap:.6rem;}
.toast{background:linear-gradient(165deg, rgba(30,42,72,.92), rgba(8,12,22,.92));color:#fff;padding:.8rem 1.1rem;border-radius:var(--radius-sm);font-size:.83rem;display:flex;align-items:center;gap:.6rem;
  backdrop-filter:var(--blur-m);-webkit-backdrop-filter:var(--blur-m);border:1px solid rgba(255,255,255,.14);
  box-shadow:var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.12);animation:toastin .3s cubic-bezier(.22,1,.36,1);max-width:320px;}
.toast.err{background:linear-gradient(165deg, rgba(170,50,55,.92), rgba(90,20,24,.92));}
@keyframes toastin{from{opacity:0;transform:translateY(14px) scale(.97);}to{opacity:1;transform:none;}}

.hamburger{display:none;}
.sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(5,7,14,.5);backdrop-filter:blur(3px);z-index:390;}

@media(max-width:900px){
  #app.show{grid-template-columns:1fr;grid-template-rows:auto 1fr;gap:.6rem;padding:.6rem;}
  .sidebar{position:fixed;left:.6rem;top:.6rem;bottom:.6rem;width:266px;max-width:82vw;z-index:400;transform:translateX(calc(-100% - 1rem));transition:transform .3s cubic-bezier(.22,1,.36,1);border-radius:var(--radius-lg);}
  .sidebar.open{transform:translateX(0);}
  #app:has(.sidebar.open) .sidebar-backdrop{display:block;}
  .topbar,.main{grid-column:1;}
  .topbar{min-height:66px;padding:0 1rem;flex-wrap:nowrap;}
  .hamburger{display:flex;flex-shrink:0;}
  .icon-btn{width:36px;height:36px;}
  .tb-greet p{display:none;}
  .tb-right{gap:.5rem;}
  .tb-user-role{display:none;}
  .tb-search-toggle{display:flex;}
  .tb-search-wrap{display:none;}
  .tb-search-wrap.mobile-open{display:block;position:fixed;top:calc(66px + .8rem);left:.6rem;right:.6rem;padding:.8rem 1rem;background:var(--surface-strong);backdrop-filter:var(--blur-m);border:1px solid var(--glass-edge);border-radius:var(--radius);z-index:550;box-shadow:var(--shadow-lg);}
  .tb-search-wrap.mobile-open .tb-search{width:100%;}
  .tb-search-wrap.mobile-open .search-dropdown{position:static;width:100%;max-width:none;margin-top:.5rem;box-shadow:none;border:none;background:none;backdrop-filter:none;border-top:1px solid var(--border);border-radius:0;padding-top:.5rem;}
  .stat-grid{grid-template-columns:repeat(2,1fr);gap:.7rem;}
  .stat-card{padding:.9rem;}
  .main{padding:.9rem .2rem 2.5rem;}
  .page-head{flex-direction:column;align-items:stretch;}
  .page-head > .btn{width:100%;justify-content:center;}
  .cat-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:.7rem;}
  .file-card{flex-wrap:wrap;}
  .file-card .fc-actions{margin-left:0;width:100%;justify-content:flex-end;padding-top:.4rem;}
  .modal-overlay{padding:0;align-items:flex-end;}
  .modal-box{border-radius:var(--radius-lg) var(--radius-lg) 0 0;max-height:92vh;padding-bottom:env(safe-area-inset-bottom);}
  .modal-box.wide{max-width:100%;}
  .modal-head,.modal-body{padding-left:1.1rem;padding-right:1.1rem;}
  .modal-foot{flex-direction:column-reverse;padding-left:1.1rem;padding-right:1.1rem;}
  .modal-foot .btn{width:100%;justify-content:center;}
  .lesson-video-wrap{height:38vh;}
  .ai-viewer-frame{height:52vh;}
  .f-input,.tb-search input,#globalSearchInput{font-size:16px;}
  .mini-stats,body.role-student .mini-stats{grid-template-columns:repeat(2,1fr);}
  .chart-wrap{height:190px;}
  .panel,.table-panel{padding:1rem;}
  th{padding:.45rem .5rem;font-size:.66rem;}
  td{padding:.55rem .5rem;font-size:.79rem;}
  .modal-body{padding-top:1rem;padding-bottom:1rem;}
  .ms-box{max-height:150px;}
}
@media(max-width:480px){
  .stat-grid{grid-template-columns:1fr 1fr;}
  .cat-grid{grid-template-columns:repeat(auto-fill,minmax(115px,1fr));gap:.6rem;}
  .tb-user-info{display:none;}
  .login-form-panel{padding:2.2rem 1.4rem;}
  #loginScreen{padding:0;}
  .login-shell{border-radius:0;min-height:100vh;}
}