*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#09090b;--bg1:#111113;--bg2:#18181b;--bg3:#212126;--bg4:#27272a;
  --border:rgba(255,255,255,0.07);--border2:rgba(255,255,255,0.12);--border3:rgba(255,255,255,0.18);
  --text:#ffffff;--text2:#f4f4f5;--text3:#d4d4d8;--text4:#b1b1ba;
  --blue:#3b82f6;--blue-d:rgba(59,130,246,0.12);--blue-b:rgba(59,130,246,0.28);
  --green:#22c55e;--green-d:rgba(34,197,94,0.1);--green-b:rgba(34,197,94,0.25);
  --red:#ef4444;--red-d:rgba(239,68,68,0.1);--red-b:rgba(239,68,68,0.25);
  --amber:#f59e0b;--amber-d:rgba(245,158,11,0.1);--amber-b:rgba(245,158,11,0.25);
  --purple:#a855f7;--purple-d:rgba(168,85,247,0.1);--purple-b:rgba(168,85,247,0.25);
  --teal:#14b8a6;--teal-d:rgba(20,184,166,0.1);
  --orange:#f97316;
  --r:8px;--rl:12px;--sb:220px;--hdr-h:54px;--ftr-h:42px;
  --font:'Geist',system-ui,sans-serif;--mono:'Geist Mono',monospace;
}
body{font-family:var(--font);background:var(--bg);color:var(--text);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow:hidden;height:100vh}
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-thumb{background:var(--bg4);border-radius:2px}

/* ── LANDING / LOGIN ── */
#login{display:none;height:100vh;overflow-y:auto;overflow-x:hidden;background:var(--bg);scroll-behavior:smooth}
/* brand atoms reused in nav + modal */
.lm{width:34px;height:34px;background:var(--blue);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:600;color:#fff;flex-shrink:0}
.ln{font-size:20px;font-weight:600;letter-spacing:-0.4px}
/* sign-in form atoms (used inside modal) */
.lh{font-size:20px;font-weight:600;letter-spacing:-0.4px;margin-bottom:4px}
.ls{color:var(--text2);font-size:13px;margin-bottom:24px}
.lf{margin-bottom:14px}
.lf label{display:block;font-size:11px;color:var(--text3);margin-bottom:5px;letter-spacing:0.3px}
.lf input,.lf select{width:100%;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:9px 12px;color:var(--text);font-family:var(--font);font-size:14px;outline:none;transition:border-color .15s;appearance:none}
.lf input:focus,.lf select:focus{border-color:var(--blue)}
.lf select option{background:var(--bg2)}
.lbtn{width:100%;background:var(--blue);color:#fff;border:none;border-radius:var(--r);padding:10px;font-family:var(--font);font-size:14px;font-weight:500;cursor:pointer;transition:opacity .15s;margin-top:4px}
.lbtn:hover{opacity:.88}
.lerr{background:var(--red-d);border:1px solid var(--red-b);border-radius:var(--r);padding:9px 12px;color:#fca5a5;font-size:13px;margin-bottom:14px;display:none}
.ldemo{margin-top:20px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:14px 16px}
.ldemo-t{font-size:10px;font-weight:500;color:var(--text4);text-transform:uppercase;letter-spacing:0.6px;margin-bottom:8px}
.drow{display:flex;justify-content:space-between;padding:3px 0;font-size:12px;color:var(--text2)}
.dcred{font-family:var(--mono);color:var(--text3);font-size:11px}
/* landing nav */
.land-nav{position:sticky;top:0;z-index:100;height:64px;background:var(--bg1);border-bottom:1px solid var(--border);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 48px;gap:24px}
.land-brand{display:flex;align-items:center;gap:10px;justify-self:start}
.land-links{display:flex;align-items:center;gap:32px;justify-self:center}
.land-nav-actions{display:flex;align-items:center;justify-self:end}
.land-link{font-size:15px;color:var(--text3);cursor:pointer;transition:color .15s;-webkit-user-select:none;user-select:none}
.land-link:hover{color:var(--text)}
.land-signin-btn{background:var(--blue);color:#fff;border:none;border-radius:var(--r);padding:9px 20px;font-family:var(--font);font-size:14px;font-weight:500;cursor:pointer;transition:opacity .15s}
.land-signin-btn:hover{opacity:.86}
/* hero */
.land-hero-glow{position:fixed;inset:0;background:radial-gradient(ellipse 70% 50% at 65% 35%,rgba(59,130,246,0.07) 0%,transparent 60%);pointer-events:none;z-index:0}
.land-hero{display:flex;align-items:center;padding:80px 48px;gap:60px;max-width:1240px;margin:0 auto;min-height:calc(100vh - 64px);position:relative;z-index:1}
.land-hero-l{flex:1;min-width:0}
.land-hero-r{flex:1;min-width:0}
.land-badge{display:inline-flex;align-items:center;background:var(--blue-d);border:1px solid var(--blue-b);border-radius:20px;padding:5px 16px;font-size:13px;font-weight:500;color:var(--blue);margin-bottom:26px;letter-spacing:0.3px}
.land-h1{font-size:54px;font-weight:700;letter-spacing:-1.8px;line-height:1.07;margin-bottom:22px;color:var(--text)}
.land-sub{font-size:17px;color:var(--text3);line-height:1.65;margin-bottom:36px;max-width:480px}
.land-btns{margin-bottom:28px}
.land-cta{background:var(--blue);color:#fff;border:none;border-radius:var(--r);padding:14px 30px;font-family:var(--font);font-size:16px;font-weight:500;cursor:pointer;transition:opacity .15s}
.land-cta:hover{opacity:.88}
.land-quick-wrap{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.land-quick-l{font-size:14px;color:var(--text4)}
.land-quick-btns{display:flex;gap:8px}
.land-qbtn{display:flex;align-items:center;gap:6px;background:var(--bg2);border:1px solid var(--border2);border-radius:20px;padding:7px 16px;font-family:var(--font);font-size:14px;color:var(--text2);cursor:pointer;transition:all .15s}
.land-qbtn:hover{background:var(--bg3);border-color:var(--border3);color:var(--text)}
/* dashboard preview mockup */
.land-preview{background:var(--bg1);border:1px solid var(--border2);border-radius:14px;overflow:hidden;box-shadow:0 40px 80px rgba(0,0,0,0.45)}
.land-prev-titlebar{background:var(--bg2);border-bottom:1px solid var(--border);padding:10px 14px;display:flex;align-items:center;gap:8px}
.land-prev-dots{display:flex;gap:5px}
.land-prev-dots span{width:10px;height:10px;border-radius:50%;display:block}
.land-prev-title{font-size:11px;color:var(--text4);margin-left:4px}
.land-prev-body{padding:16px;display:flex;flex-direction:column;gap:12px}
.land-prev-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.land-ps{background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:10px 8px;text-align:center}
.land-ps-n{font-size:18px;font-weight:700;letter-spacing:-0.5px}
.land-ps-l{font-size:9px;color:var(--text4);margin-top:2px;text-transform:uppercase;letter-spacing:0.4px}
.land-prev-chart-wrap{background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:12px}
.land-prev-chart-lbl{font-size:10px;color:var(--text4);margin-bottom:10px;text-transform:uppercase;letter-spacing:0.4px}
.land-prev-bars{display:flex;align-items:flex-end;gap:8px;height:64px}
.land-pb-item{display:flex;flex-direction:column;align-items:center;flex:1;gap:4px;height:100%}
.land-pb-bar{width:100%;background:linear-gradient(to top,var(--blue),rgba(59,130,246,0.5));border-radius:3px 3px 0 0}
.land-pb-lbl{font-size:9px;color:var(--text4)}
.land-prev-list{background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:10px 12px}
.land-prev-list-hdr{font-size:10px;color:var(--text4);text-transform:uppercase;letter-spacing:0.4px;margin-bottom:8px}
.land-prev-row{display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:1px solid var(--border)}
.land-prev-row:last-child{border-bottom:none;padding-bottom:0}
.land-pr-av{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:700;flex-shrink:0;background:#1e40af;color:#bfdbfe;border:2px solid #1d4ed8}
.land-pr-info{flex:1;min-width:0}
.land-pr-n{font-size:11px;font-weight:500}
.land-pr-s{font-size:10px;color:var(--text4)}
.land-pr-badge{font-size:9px;font-weight:600}
/* stats band */
.land-stats-band{border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--bg1);padding:36px 48px;display:flex;align-items:center;justify-content:center}
.land-stat-item{flex:1;text-align:center;padding:0 24px}
.land-stat-n{font-size:42px;font-weight:700;letter-spacing:-1.5px;color:var(--text)}
.land-stat-l{font-size:14px;color:var(--text4);margin-top:4px}
.land-stat-sep{width:1px;height:52px;background:var(--border);flex-shrink:0}
/* feature section */
.land-section{max-width:1240px;margin:0 auto;padding:90px 48px;text-align:center}
.land-sec-kicker{font-size:13px;font-weight:600;color:var(--blue);text-transform:uppercase;letter-spacing:1px;margin-bottom:14px}
.land-sec-h{font-size:38px;font-weight:700;letter-spacing:-1px;margin-bottom:14px}
.land-sec-sub{font-size:16px;color:var(--text3);max-width:560px;margin:0 auto 52px;line-height:1.6}
.land-feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;text-align:left}
.land-feat-card{background:var(--bg1);border:1px solid var(--border);border-radius:14px;padding:28px;transition:border-color .2s,transform .2s,box-shadow .2s}
.land-feat-card:hover{border-color:var(--border2);transform:translateY(-2px);box-shadow:0 12px 32px rgba(0,0,0,0.3)}
.land-feat-ico{width:44px;height:44px;border-radius:11px;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.land-feat-t{font-size:16px;font-weight:600;margin-bottom:8px}
.land-feat-d{font-size:14px;color:var(--text3);line-height:1.6}
/* roles section */
.land-roles-sec{background:var(--bg1);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.land-roles-inner{max-width:1140px;margin:0 auto;padding:90px 48px;text-align:center}
.land-roles-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;text-align:left;margin-top:52px}
.land-role-card{background:var(--bg);border:1px solid var(--border);border-radius:16px;padding:32px;display:flex;flex-direction:column;gap:14px;transition:border-color .2s}
.land-role-card:hover{border-color:var(--border2)}
.land-role-card-hl{border-color:rgba(59,130,246,0.22);background:rgba(59,130,246,0.025)}
.land-role-ico{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center}
.land-role-t{font-size:20px;font-weight:600;letter-spacing:-0.4px}
.land-role-d{font-size:15px;color:var(--text3);line-height:1.6}
.land-role-list{list-style:none;display:flex;flex-direction:column;gap:8px;flex:1;margin-top:4px}
.land-role-list li{font-size:14px;color:var(--text2);padding-left:16px;position:relative}
.land-role-list li::before{content:'→';position:absolute;left:0;color:var(--text4);font-size:12px}
.land-role-btn{background:var(--bg3);border:1px solid var(--border2);border-radius:var(--r);padding:11px 18px;font-family:var(--font);font-size:14px;font-weight:500;color:var(--text2);cursor:pointer;transition:all .15s;margin-top:8px}
.land-role-btn:hover{background:var(--bg4);color:var(--text)}
/* landing footer */
.land-ftr{border-top:1px solid var(--border);background:var(--bg1)}
.land-ftr-top{max-width:1200px;margin:0 auto;padding:52px 48px 44px;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px}
.land-ftr-brand-col{display:flex;flex-direction:column;gap:14px}
.land-ftr-logo{display:flex;align-items:center;gap:10px}
.land-ftr-name{font-size:16px;font-weight:600;letter-spacing:-0.3px}
.land-ftr-tagline{font-size:14px;color:var(--text4);line-height:1.65;max-width:280px}
.land-ftr-col{display:flex;flex-direction:column;gap:12px}
.land-ftr-col-hdr{font-size:12px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:0.6px;margin-bottom:4px}
.land-ftr-lnk{font-size:15px;color:var(--text4);cursor:pointer;transition:color .15s;width:fit-content}
.land-ftr-lnk:hover{color:var(--text2)}
.land-ftr-bottom{border-top:1px solid var(--border);padding:20px 48px;display:flex;align-items:center;justify-content:space-between;max-width:none}
.land-ftr-bottom>span{font-size:13px;color:var(--text4)}
.land-ftr-legal-links{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text4)}
.land-ftr-legal-links span{cursor:pointer;transition:color .15s}
.land-ftr-legal-links span:hover{color:var(--text2)}
/* cookie notice */
.cookie-bar{position:fixed;bottom:0;left:0;right:0;z-index:500;background:var(--bg2);border-top:1px solid var(--border2);padding:14px 32px;display:flex;align-items:center;justify-content:space-between;gap:16px;transform:translateY(100%);transition:transform .3s ease;box-shadow:0 -4px 24px rgba(0,0,0,0.3)}
.cookie-bar.show{transform:translateY(0)}
.cookie-bar-text{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--text3);line-height:1.5;flex:1}
.cookie-bar-text svg{flex-shrink:0;color:var(--blue)}
.cookie-lnk{color:var(--blue);cursor:pointer;font-weight:500}
.cookie-lnk:hover{text-decoration:underline}
.cookie-btn{background:var(--blue);color:#fff;border:none;border-radius:var(--r);padding:8px 20px;font-family:var(--font);font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap;transition:opacity .15s;flex-shrink:0}
.cookie-btn:hover{opacity:.86}
/* legal modal */
.legal-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-46%);z-index:201;width:680px;max-width:calc(100vw - 32px);max-height:80vh;background:var(--bg1);border:1px solid var(--border2);border-radius:16px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;display:flex;flex-direction:column}
.legal-modal.show{opacity:1;pointer-events:all;transform:translate(-50%,-50%)}
.legal-modal-hdr{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 16px;border-bottom:1px solid var(--border);flex-shrink:0}
.legal-modal-title{font-size:17px;font-weight:600;letter-spacing:-0.3px}
.legal-modal-body{padding:24px;overflow-y:auto;font-size:14px;color:var(--text2);line-height:1.7}
.legal-modal-body h3{font-size:14px;font-weight:600;color:var(--text);margin:20px 0 6px}
.legal-modal-body h3:first-child{margin-top:0}
.legal-modal-body p{color:var(--text3);margin-bottom:8px}
.legal-modal-body ul{padding-left:18px;color:var(--text3);margin-bottom:8px}
.legal-modal-body ul li{margin-bottom:4px}
/* auth modal tabs */
.auth-tabs{display:flex;border-bottom:1px solid var(--border);margin:0 0 22px;gap:0}
.auth-tab{flex:1;padding:11px 0;background:none;border:none;border-bottom:2px solid transparent;font-family:var(--font);font-size:15px;font-weight:500;color:var(--text4);cursor:pointer;transition:all .15s;margin-bottom:-1px}
.auth-tab.on{color:var(--text);border-bottom-color:var(--blue);font-weight:600}
.auth-tab:hover:not(.on){color:var(--text2)}
.auth-switch{margin-top:16px;font-size:13px;color:var(--text4);text-align:center}
.auth-switch span{color:var(--blue);cursor:pointer;font-weight:500}
.auth-switch span:hover{text-decoration:underline}
/* sign-in modal */
.land-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.65);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:200;opacity:0;pointer-events:none;transition:opacity .2s}
.land-overlay.show{opacity:1;pointer-events:all}
.land-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-46%);z-index:201;width:360px;background:var(--bg1);border:1px solid var(--border2);border-radius:16px;padding:28px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;-webkit-backdrop-filter:none;backdrop-filter:none}
.land-modal.show{opacity:1;pointer-events:all;transform:translate(-50%,-50%)}
.land-modal-x{position:absolute;top:12px;right:12px;width:28px;height:28px;background:var(--bg2);border:1px solid var(--border);border-radius:6px;color:var(--text3);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s}
.land-modal-x:hover{background:var(--bg3);color:var(--text)}
/* landing responsive */
@media(max-width:960px){
  .land-hero{flex-direction:column;padding:48px 24px;min-height:0;gap:40px}
  .land-hero-r{display:none}
  .land-h1{font-size:36px}
  .land-feat-grid{grid-template-columns:1fr 1fr}
  .land-roles-grid{grid-template-columns:1fr}
  .land-nav{padding:0 24px;grid-template-columns:1fr 1fr}
  .land-links{display:none}
  .land-stats-band{padding:24px}
  .land-stat-item{padding:0 12px}
  .land-stat-n{font-size:26px}
  .land-ftr-top{grid-template-columns:1fr 1fr;padding:40px 24px 32px;gap:32px}
}
@media(max-width:600px){
  .land-feat-grid{grid-template-columns:1fr}
  .land-h1{font-size:28px}
  .land-section{padding:60px 24px}
  .land-roles-inner{padding:60px 24px}
  .land-ftr-top{grid-template-columns:1fr;padding:32px 24px 24px;gap:28px}
  .land-ftr-bottom{padding:16px 24px;flex-direction:column;gap:4px;text-align:center}
  .land-modal{width:calc(100vw - 32px)}
}

/* ── SHELL ── */
#app{display:none;flex-direction:column;height:100vh;overflow:visible}
.shell{flex:1;display:flex;overflow:hidden}
/* ── APP HEADER ── */
.app-hdr{height:var(--hdr-h);background:var(--bg1);border-bottom:1px solid var(--border);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 18px;flex-shrink:0;gap:12px}
.app-hdr-l{display:flex;align-items:center;gap:10px;min-width:0}
.app-hdr-c{display:flex;align-items:center;justify-content:center}
.app-hdr-title{font-size:18px;font-weight:700;letter-spacing:0.1px;white-space:nowrap;color:var(--text)}
.app-hdr-logo{width:28px;height:28px;background:var(--blue);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff;flex-shrink:0}
.app-hdr-name{font-size:15px;font-weight:600;letter-spacing:-0.3px;white-space:nowrap}
.app-hdr-name span{color:var(--text3);font-weight:400}
.hdr-divider-v{width:1px;height:18px;background:var(--border2);flex-shrink:0}
.hdr-breadcrumb{font-size:13px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app-hdr-r{display:flex;align-items:center;gap:4px;flex-shrink:0;justify-content:flex-end}
.hdr-btn{width:32px;height:32px;background:transparent;border:none;border-radius:var(--r);color:var(--text3);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;position:relative;font-family:var(--font)}
.hdr-btn:hover{background:var(--bg2);color:var(--text)}
.hdr-divider{width:1px;height:20px;background:var(--border2);margin:0 8px;flex-shrink:0}
.hdr-user-wrap{position:relative}
.hdr-user{display:flex;align-items:center;gap:8px;padding:5px 10px;border-radius:var(--r);transition:background .15s;cursor:pointer;border:1px solid transparent}
.hdr-user:hover,.hdr-user.open{background:var(--bg2);border-color:var(--border)}
.hdr-user-info{line-height:1.3}
.hdr-user-name{font-size:12px;font-weight:500}
.hdr-user-role{font-size:10px;color:var(--text3)}
.hdr-user-caret{color:var(--text4);transition:transform .2s;flex-shrink:0}
.hdr-user.open .hdr-user-caret{transform:rotate(180deg)}
/* dropdown */
.hdr-dropdown{position:absolute;top:calc(100% + 8px);right:0;width:220px;background:var(--bg1);border:1px solid var(--border2);border-radius:12px;box-shadow:0 16px 48px rgba(0,0,0,0.45);z-index:300;opacity:0;pointer-events:none;transform:translateY(-6px);transition:opacity .15s,transform .15s;overflow:hidden}
.hdr-dropdown.open{opacity:1;pointer-events:all;transform:translateY(0)}
.hdr-dd-header{display:flex;align-items:center;gap:10px;padding:14px 14px 12px}
.hdr-dd-av{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;border:2px solid transparent}
.hdr-dd-name{font-size:13px;font-weight:600;color:var(--text)}
.hdr-dd-role{font-size:11px;color:var(--text4);margin-top:1px}
.hdr-dd-sep{height:1px;background:var(--border);margin:2px 0}
.hdr-dd-item{display:flex;align-items:center;gap:10px;width:100%;padding:10px 14px;background:none;border:none;font-family:var(--font);font-size:13px;color:var(--text2);cursor:pointer;transition:background .12s,color .12s;text-align:left}
.hdr-dd-item:hover{background:var(--bg2);color:var(--text)}
.hdr-dd-item svg{color:var(--text4);flex-shrink:0;transition:color .12s}
.hdr-dd-item:hover svg{color:var(--text2)}
.hdr-dd-danger{color:var(--red)!important}
.hdr-dd-danger svg{color:var(--red)!important;opacity:.8}
.hdr-dd-danger:hover{background:var(--red-d)!important}
/* ── MAIN WRAP & APP FOOTER ── */
.main-wrap{flex:1;display:flex;flex-direction:column;overflow:hidden}
.app-footer{height:var(--ftr-h);background:var(--bg1);border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 22px;flex-shrink:0}
.app-footer-l{font-size:11px;color:var(--text4)}
.app-footer-r{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--text4)}
.app-footer-dot{width:3px;height:3px;background:var(--text4);border-radius:50%;flex-shrink:0}

/* ── SIDEBAR ── */
.sb{width:var(--sb);background:var(--bg1);border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;overflow:hidden}
.sb-av{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0;border:2px solid transparent}
.sb-av.role-admin{background:#2563eb;color:#dbeafe;border-color:#3b82f6}
.sb-av.role-faculty{background:#7c3aed;color:#ede9fe;border-color:#8b5cf6}
.sb-av.role-student{background:#16a34a;color:#dcfce7;border-color:#22c55e}
.sb-nav{flex:1;padding:8px 0;overflow-y:auto}
.nav-sec{padding:4px 0 8px}
.nav-lbl{font-size:10px;font-weight:600;color:var(--text4);letter-spacing:0.8px;text-transform:uppercase;padding:10px 16px 4px;display:flex;align-items:center;gap:6px;opacity:.7}
.ni{display:flex;align-items:center;gap:9px;padding:7px 12px 7px 14px;margin:1px 8px;border-radius:6px;color:var(--text3);cursor:pointer;transition:background .1s,color .1s;font-size:13px;position:relative;white-space:nowrap;font-weight:400}
.ni:hover{color:var(--text2);background:rgba(255,255,255,0.04)}
.ni.on{color:var(--text);background:rgba(59,130,246,0.12);font-weight:500}
.ni.on::before{content:'';position:absolute;left:-8px;top:20%;bottom:20%;width:2.5px;background:var(--blue);border-radius:0 2px 2px 0}
.ni svg{width:15px;height:15px;flex-shrink:0;opacity:.55;transition:opacity .1s}
.ni:hover svg{opacity:.8}
.ni.on svg{opacity:1}
.sb-foot{padding:10px 14px;border-top:1px solid var(--border)}
.btn-out{width:100%;background:transparent;border:1px solid var(--border);border-radius:var(--r);color:var(--text3);padding:7px;font-family:var(--font);font-size:12px;cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center;gap:5px}
.btn-out:hover{border-color:var(--border2);color:var(--text2);background:var(--bg2)}

/* ── TOP NAV ── */
.topnav{background:var(--bg1);border-bottom:1px solid var(--border);display:flex;align-items:stretch;justify-content:center;padding:0 16px;height:50px;flex-shrink:0;position:relative;z-index:300;overflow:visible}
.tn-role{display:flex;align-items:stretch;gap:0;justify-content:center}
.tn-grp{position:relative;display:flex;align-items:stretch}
.tn-item{display:flex;align-items:center;gap:5px;padding:0 18px;font-size:14px;font-weight:700;letter-spacing:0.7px;text-transform:uppercase;color:var(--text3);cursor:pointer;border:none;background:none;font-family:var(--font);border-bottom:2.5px solid transparent;margin-bottom:-1px;transition:color .12s,border-color .12s,background .12s;white-space:nowrap;-webkit-user-select:none;user-select:none}
.tn-item:hover,.tn-item.open{color:var(--text2);background:rgba(255,255,255,0.04)}
.tn-item.on{color:var(--blue);border-bottom-color:var(--blue)}
.tn-item.act{color:var(--blue);border-bottom-color:var(--blue)}
.tn-item svg{width:11px;height:11px;opacity:.6;transition:transform .15s;flex-shrink:0}
.tn-item.open svg{transform:rotate(180deg)}
.tn-drop{position:absolute;top:calc(100% + 6px);left:0;min-width:195px;background:var(--bg1);border:1px solid var(--border);border-radius:8px;box-shadow:0 8px 32px rgba(0,0,0,.32);z-index:500;display:none;padding:5px 0}
.tn-drop.open{display:block;animation:tnIn .1s ease}
@keyframes tnIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}
.tn-di{display:block;padding:8px 16px;font-size:13px;color:var(--text2);cursor:pointer;transition:background .08s,color .08s;white-space:nowrap;-webkit-user-select:none;user-select:none}
.tn-di:hover{background:var(--bg2);color:var(--text)}
.tn-di.on{color:var(--blue);background:rgba(59,130,246,0.09);font-weight:500}

/* ── MAIN ── */
.main{flex:1;overflow-y:auto;background:var(--bg);min-height:0}
.page{display:none;padding:24px 28px;min-height:100%}
.page.on{display:block}
.topbar{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid var(--border)}
.topbar h1{font-size:18px;font-weight:600;letter-spacing:-0.4px}
.topbar p{font-size:12px;color:var(--text2);margin-top:2px}
.topbar-r{display:flex;align-items:center;gap:8px;flex-shrink:0}

/* ── STATS ── */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:20px}
.stat{background:var(--bg1);border:1px solid var(--border);border-radius:var(--rl);padding:16px 18px}
.stat-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px}
.stat-lbl{font-size:11px;color:var(--text2);letter-spacing:0.2px;font-weight:600}
.stat-ico{width:26px;height:26px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:13px}
.stat-val{font-size:24px;font-weight:600;letter-spacing:-0.5px;line-height:1}
.stat-meta{font-size:11px;color:var(--text4);margin-top:3px}
.stat-up{color:var(--green)}
.stat-dn{color:var(--red)}

/* ── CARD ── */
.card{background:var(--bg1);border:1px solid var(--border);border-radius:var(--rl);overflow:hidden;margin-bottom:14px}
.card-h{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--border)}
.card-t{font-size:13px;font-weight:700}
.card-sub{font-size:11px;color:var(--text3);margin-top:1px}
.card-acts{display:flex;gap:6px;align-items:center}
.card-b{padding:18px}

/* ── TABLE ── */
.tw{overflow-x:auto}
table.t{width:100%;border-collapse:collapse}
table.t th{text-align:left;font-size:10px;font-weight:700;color:var(--text2);padding:8px 14px;border-bottom:1px solid var(--border);background:var(--bg1);letter-spacing:0.3px;white-space:nowrap;text-transform:uppercase}
table.t td{padding:10px 14px;border-bottom:1px solid var(--border);font-size:13px;font-weight:500;color:var(--text);vertical-align:middle}
table.t tr:last-child td{border-bottom:none}
table.t tbody tr:hover td{background:rgba(255,255,255,0.015)}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;gap:5px;border-radius:var(--r);font-family:var(--font);font-size:12px;font-weight:600;cursor:pointer;transition:all .15s;padding:6px 12px;white-space:nowrap;border:none;outline:none}
.btn-p{background:#2563eb;color:#dbeafe;border:1px solid #3b82f6}
.btn-p:hover{background:#1d4ed8;color:#fff;border-color:#2563eb}
.btn-g{background:var(--bg3);color:var(--text);border:1px solid var(--border2)}
.btn-g:hover{border-color:var(--border3);color:var(--text);background:var(--bg4)}
.btn-dg{background:#dc2626;color:#fee2e2;border:1px solid #ef4444}
.btn-dg:hover{background:#b91c1c;color:#fff;border-color:#dc2626}
.btn-amber{background:#92400e;color:#fde68a;border:1px solid #b45309}
.bico{background:var(--bg3);border:1px solid var(--border2);border-radius:6px;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text2);transition:all .15s;font-size:12px;font-family:var(--font)}
.bico:hover{border-color:var(--border3);color:var(--text);background:var(--bg4)}
.bico.del{background:#dc2626;color:#fee2e2;border-color:#ef4444}
.bico.del:hover{background:#b91c1c;color:#fff;border-color:#dc2626}
.bico.edit{background:rgba(37,99,235,0.07);color:var(--blue);border-color:rgba(37,99,235,0.25)}
.bico.edit:hover{background:rgba(37,99,235,0.14);color:#2563eb;border-color:rgba(37,99,235,0.45)}
.bico.view:hover{background:var(--bg4);color:var(--text);border-color:var(--border3)}
.bico.pay{background:rgba(34,197,94,0.1);color:#22c55e;border-color:rgba(34,197,94,0.35)}
.bico.pay:hover{background:#22c55e;color:#000;border-color:#22c55e}
.act-btns{display:flex;align-items:center;gap:5px}
/* ── Grade Entry ── */
.ge-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px}
.ge-filter-tabs{display:flex;background:var(--bg2);border-radius:8px;padding:3px;gap:2px}
.ge-tab{background:none;border:none;border-radius:5px;padding:5px 14px;font-size:12px;cursor:pointer;color:var(--text3);font-family:var(--font);font-weight:500;transition:all .15s}
.ge-tab.active{background:var(--bg);color:var(--text);box-shadow:0 1px 4px rgba(0,0,0,.12)}
.ge-dist-bar{display:flex;height:28px;border-radius:8px;overflow:hidden;gap:3px}
.ge-dist-seg{display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff;transition:flex .4s;min-width:0;overflow:hidden;cursor:default}
.ge-dist-seg span{white-space:nowrap;overflow:hidden}
.ge-dist-legend{display:flex;gap:16px;margin-top:8px;flex-wrap:wrap}
.ge-dist-leg{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--text3)}
.ge-dist-dot{width:8px;height:8px;border-radius:2px;flex-shrink:0}
.ge-inp{width:80px;padding:6px 8px;border:2px solid var(--border2);border-radius:8px;font-family:var(--mono);font-size:15px;font-weight:600;background:var(--bg);color:var(--text);text-align:center;transition:border-color .15s,background .15s}
.ge-inp:focus{outline:none;border-color:var(--blue);background:var(--bg2)}
.ge-inp.ga{border-color:rgba(34,197,94,.6);background:rgba(34,197,94,.06);color:#16a34a}
.ge-inp.gb{border-color:rgba(59,130,246,.6);background:rgba(59,130,246,.06);color:#2563eb}
.ge-inp.gc{border-color:rgba(168,85,247,.6);background:rgba(168,85,247,.06);color:#9333ea}
.ge-inp.gd{border-color:rgba(245,158,11,.6);background:rgba(245,158,11,.06);color:#d97706}
.ge-inp.gf{border-color:rgba(239,68,68,.6);background:rgba(239,68,68,.06);color:#dc2626}
.ge-av{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;flex-shrink:0}
/* view modal fields */
.vf-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.vf-row{display:flex;flex-direction:column;gap:3px}
.vf-row.full{grid-column:1/-1}
.vf-lbl{font-size:10px;font-weight:600;color:var(--text4);text-transform:uppercase;letter-spacing:0.4px}
.vf-val{font-size:13px;color:var(--text);font-weight:500;padding:7px 10px;background:var(--bg2);border-radius:var(--r);border:1px solid var(--border);word-break:break-word;min-height:32px}

/* ── INPUT ── */
.inp{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:7px 10px;color:var(--text);font-family:var(--font);font-size:13px;outline:none;transition:border-color .15s}
.inp:focus{border-color:var(--blue)}
.inp::placeholder{color:var(--text4)}
.sel{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2352525b' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;padding-right:26px}
.sel option{background:var(--bg2)}

/* ── BADGES ── */
.bx{display:inline-flex;align-items:center;padding:3px 9px;border-radius:5px;font-size:10px;font-weight:700;letter-spacing:0.2px}
.bx-bl{background:#2563eb;color:#dbeafe;border:1px solid #3b82f6}
.bx-gr{background:#16a34a;color:#dcfce7;border:1px solid #22c55e}
.bx-rd{background:#dc2626;color:#fee2e2;border:1px solid #ef4444}
.bx-am{background:#d97706;color:#fef3c7;border:1px solid #f59e0b}
.bx-pu{background:#7c3aed;color:#ede9fe;border:1px solid #8b5cf6}
.bx-gy{background:var(--bg3);color:var(--text);border:1px solid var(--border2);font-weight:600}
.bx-te{background:#0d9488;color:#ccfbf1;border:1px solid #14b8a6}

/* ── GRADE DOT ── */
.gd{width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;border:2px solid transparent}
.gA{background:#16a34a;color:#dcfce7;border-color:#22c55e}
.gB{background:#2563eb;color:#dbeafe;border-color:#3b82f6}
.gC{background:#d97706;color:#fef3c7;border-color:#f59e0b}
.gD{background:#ea580c;color:#ffedd5;border-color:#f97316}
.gF{background:#dc2626;color:#fee2e2;border-color:#ef4444}

/* ── PROGRESS ── */
.prog{height:4px;border-radius:2px;background:var(--bg3);overflow:hidden;width:72px;display:inline-block;vertical-align:middle}
.pf{height:100%;border-radius:2px}

/* ── AVATAR ── */
.av{width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0;border:2px solid transparent}
.av-bl{background:#2563eb;color:#dbeafe;border-color:#3b82f6}
.av-gr{background:#16a34a;color:#dcfce7;border-color:#22c55e}
.av-pu{background:#7c3aed;color:#ede9fe;border-color:#8b5cf6}
.av-am{background:#d97706;color:#fef3c7;border-color:#f59e0b}
.av-te{background:#0d9488;color:#ccfbf1;border-color:#14b8a6}

/* ── MODAL ── */
.mbg{position:fixed;inset:0;background:rgba(0,0,0,0.75);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;z-index:999;padding:16px}
.mbg.open{display:flex}
.mbox{background:var(--bg1);border:1px solid var(--border2);border-radius:14px;width:500px;max-height:88vh;overflow-y:auto;animation:mIn .18s ease}
@keyframes mIn{from{opacity:0;transform:scale(.97) translateY(8px)}to{opacity:1;transform:none}}
.mbox.wide{width:680px}
.mbox.narrow{width:380px}
.mh{padding:18px 22px 14px;border-bottom:1px solid var(--border);display:flex;align-items:flex-start;justify-content:space-between}
.mt{font-size:15px;font-weight:600;letter-spacing:-0.3px}
.mx{background:none;border:none;color:var(--text4);cursor:pointer;font-size:18px;line-height:1;transition:color .15s;font-family:var(--font)}
.mx:hover{color:var(--text)}
.mb{padding:18px 22px}
.mf{padding:14px 22px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:8px}
.ff{margin-bottom:12px}
.ff label{display:block;font-size:11px;color:var(--text3);margin-bottom:4px}
.ff input,.ff select,.ff textarea{width:100%;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:7px 11px;color:var(--text);font-family:var(--font);font-size:13px;outline:none;transition:border-color .15s;appearance:none}
.ff input:focus,.ff select:focus,.ff textarea:focus{border-color:var(--blue)}
.ff select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2352525b' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;padding-right:26px}
.ff select option{background:var(--bg2)}
.ff textarea{resize:vertical;min-height:64px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* ── SUCCESS / ERROR POPUP ── */
.success-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:10000;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .22s ease}
.success-overlay.show{opacity:1;pointer-events:all}
.success-box{background:#fff;border-radius:18px;padding:44px 48px;text-align:center;min-width:300px;max-width:420px;box-shadow:0 24px 60px rgba(0,0,0,0.35);transform:scale(.92) translateY(12px);transition:transform .25s cubic-bezier(.34,1.56,.64,1),opacity .22s ease;opacity:0}
.success-overlay.show .success-box{transform:scale(1) translateY(0);opacity:1}
.success-icon{width:80px;height:80px;border-radius:50%;border:3px solid rgba(34,197,94,0.45);display:flex;align-items:center;justify-content:center;margin:0 auto 22px;background:rgba(34,197,94,0.08);transition:border-color .2s,background .2s}
.success-icon svg{width:38px;height:38px;stroke:#22c55e;stroke-width:2.8;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s}
.success-icon .s-check{stroke-dasharray:60;stroke-dashoffset:60;transition:stroke-dashoffset .45s ease .15s}
.success-overlay.show .s-check{stroke-dashoffset:0}
.success-icon .s-cross{stroke-dasharray:40;stroke-dashoffset:40;transition:stroke-dashoffset .35s ease .15s}
.success-overlay.show .s-cross{stroke-dashoffset:0}
.success-overlay.err .success-icon{border-color:rgba(239,68,68,0.45);background:rgba(239,68,68,0.08)}
.success-overlay.err .success-icon svg{stroke:#ef4444}
.success-overlay.warn .success-icon{border-color:rgba(245,158,11,0.45);background:rgba(245,158,11,0.08)}
.success-overlay.warn .success-icon svg{stroke:#f59e0b}
.success-msg{font-size:17px;font-weight:700;color:#18181b;line-height:1.45;letter-spacing:-0.3px}
.success-sub{font-size:13px;color:#71717a;margin-top:6px;font-weight:500;min-height:18px}

/* ── TOAST ── */
.toasts{display:none}
.toast{background:var(--bg2);border:1px solid var(--border2);border-radius:var(--r);padding:9px 14px;font-size:12px;display:flex;align-items:center;gap:8px;animation:tIn .2s ease;max-width:280px;box-shadow:0 4px 20px rgba(0,0,0,0.5)}
@keyframes tIn{from{opacity:0;transform:translateX(16px)}}
.tdot{width:5px;height:5px;border-radius:50%;flex-shrink:0}

/* ── EMPTY ── */
.empty{text-align:center;padding:40px 20px;color:var(--text4)}
.empty p{font-size:12px;margin-top:6px}

/* ── FILTER ROW ── */
.fr{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* ── NOTIF PANEL ── */
.npanel{position:fixed;top:var(--hdr-h);right:0;bottom:0;width:320px;background:var(--bg1);border-left:1px solid var(--border);z-index:998;transform:translateX(100%);transition:transform .25s ease;display:flex;flex-direction:column}
.npanel.open{transform:translateX(0)}
.np-head{padding:16px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.np-title{font-size:14px;font-weight:500}
.np-body{flex:1;overflow-y:auto;padding:8px}
.nitem{padding:12px;border-radius:var(--r);border:1px solid var(--border);margin-bottom:6px;cursor:pointer;transition:background .15s}
.nitem:hover{background:var(--bg2)}
.nitem.unread{border-color:var(--blue-b);background:var(--blue-d)}
.ni-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:4px}
.ni-title{font-size:12px;font-weight:500}
.ni-time{font-size:10px;color:var(--text4)}
.ni-body{font-size:11px;color:var(--text2);line-height:1.4}
.ni-tag{display:inline-block;font-size:9px;padding:1px 5px;border-radius:3px;font-weight:500;margin-top:5px}

/* ── CHART CANVAS ── */
.chart-wrap{position:relative;height:180px}
.chart-wrap-sm{position:relative;height:140px}

/* ── GRADE CALC ── */
.gc-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--border)}
.gc-row:last-child{border-bottom:none}
.gc-name{font-size:13px;flex:1}
.gc-inp{width:70px;background:var(--bg2);border:1px solid var(--border);border-radius:6px;padding:5px 8px;color:var(--text);font-family:var(--mono);font-size:13px;text-align:center;outline:none;transition:border-color .15s}
.gc-inp:focus{border-color:var(--blue)}
.gc-result{width:28px;text-align:center}

/* ── TRANSCRIPT ── */
.tx-head{background:linear-gradient(135deg,#0f172a,#1e3a5f);border-radius:var(--rl) var(--rl) 0 0;padding:24px;color:#fff}
.tx-logo{font-size:20px;font-weight:700;letter-spacing:-0.5px;margin-bottom:4px}
.tx-sub{font-size:12px;opacity:.6}
.tx-info{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:18px;border-bottom:1px solid var(--border)}
.tx-row{display:flex;justify-content:space-between;padding:8px 14px;border-bottom:1px solid var(--border);font-size:12px}
.tx-foot{padding:14px 18px;background:var(--bg2);border-radius:0 0 var(--rl) var(--rl);font-size:11px;color:var(--text3)}

/* ── CALENDAR ── */
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cal-day-lbl{text-align:center;font-size:10px;color:var(--text4);padding:6px 0;font-weight:500}
.cal-cell{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:6px;font-size:12px;cursor:pointer;transition:background .12s;position:relative}
.cal-cell:hover{background:var(--bg3)}
.cal-cell.today{background:var(--blue-d);color:#93c5fd;font-weight:600}
.cal-cell.has-event::after{content:'';position:absolute;bottom:3px;left:50%;transform:translateX(-50%);width:4px;height:4px;border-radius:50%;background:var(--blue)}
.cal-cell.exam-day{background:var(--red-d);color:#fca5a5}
.cal-cell.holiday{background:var(--green-d);color:#86efac}
.cal-cell.other-month{color:var(--text4)}

/* ── ACHIEVEMENTS ── */
.ach-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.ach{padding:14px;border-radius:var(--rl);border:1px solid var(--border);text-align:center;transition:border-color .15s}
.ach.earned{border-color:var(--amber-b);background:var(--amber-d)}
.ach.locked{opacity:.4}
.ach-ico{font-size:28px;margin-bottom:8px}
.ach-name{font-size:12px;font-weight:500;margin-bottom:3px}
.ach-desc{font-size:10px;color:var(--text3)}

/* ── AUDIT LOG ── */
.alog-item{display:flex;align-items:flex-start;gap:12px;padding:10px 0;border-bottom:1px solid var(--border)}
.alog-dot{width:8px;height:8px;border-radius:50%;margin-top:4px;flex-shrink:0}
.alog-body{flex:1}
.alog-action{font-size:12px;font-weight:700}
.alog-detail{font-size:11px;color:var(--text2);margin-top:2px;font-weight:500}
.alog-time{font-size:10px;color:var(--text4);white-space:nowrap}

/* ── LEAVE ── */
.leave-item{padding:12px 14px;border:1px solid var(--border);border-radius:var(--r);margin-bottom:8px}
.leave-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}

/* ── SPARKLINE ── */
.spark{display:inline-flex;align-items:flex-end;gap:2px;height:28px}
.spark-bar{width:4px;border-radius:2px 2px 0 0;min-height:2px}

/* ── SEMESTER TIMELINE ── */
.sem-bar{height:6px;border-radius:3px;background:var(--bg3);overflow:hidden;margin:8px 0}
.sem-fill{height:100%;border-radius:3px;background:var(--blue)}
.deadline-item{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border);font-size:12px}
.deadline-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}

/* ── ANNOUNCE ── */
.ann-stat-bar{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.ann-stat{display:flex;align-items:center;gap:8px;background:var(--bg1);border:1px solid var(--border);border-radius:var(--rl);padding:10px 16px;flex:1;min-width:100px}
.ann-stat-ico{font-size:16px}
.ann-stat-n{font-size:20px;font-weight:700;line-height:1}
.ann-stat-l{font-size:11px;color:var(--text3);font-weight:500}
.ann-stat-u{border-left:3px solid #ef4444}
.ann-stat-h{border-left:3px solid #f59e0b}
.ann-stat-n2{border-left:3px solid #3b82f6}
.ann-stat-tot{border-left:3px solid var(--border2)}

.ann-item{display:flex;border:1px solid var(--border);border-radius:var(--rl);margin-bottom:12px;overflow:hidden;transition:border-color .15s,box-shadow .15s;background:var(--bg1)}
.ann-item:hover{border-color:var(--border2);box-shadow:0 2px 12px rgba(0,0,0,0.2)}
.ann-urgent{border-color:rgba(239,68,68,0.5);box-shadow:0 0 0 1px rgba(239,68,68,0.15)}
.ann-accent{width:4px;flex-shrink:0}
.ann-pri-normal .ann-accent{background:#3b82f6}
.ann-pri-high   .ann-accent{background:#f59e0b}
.ann-pri-urgent .ann-accent{background:#ef4444}
.ann-content{padding:14px 16px;flex:1;min-width:0}
.ann-meta{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.ann-pri-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:4px;font-size:10px;font-weight:700}
.ann-pri-badge-normal{background:#2563eb;color:#dbeafe}
.ann-pri-badge-high{background:#d97706;color:#fef3c7}
.ann-pri-badge-urgent{background:#dc2626;color:#fee2e2}
.ann-aud-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:4px;font-size:10px;font-weight:600;background:var(--bg3);color:var(--text2);border:1px solid var(--border2)}
.ann-time{font-size:11px;color:var(--text3);margin-left:auto}
.ann-author{font-size:11px;color:var(--text4)}
.ann-title{font-size:14px;font-weight:700;margin-bottom:6px;color:var(--text)}
.ann-body{font-size:12px;color:var(--text2);line-height:1.65;font-weight:500}
.ann-body-clamp{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ann-expand-btn{background:none;border:none;color:var(--blue);font-size:11px;font-weight:600;cursor:pointer;padding:4px 0;margin-top:2px;font-family:var(--font)}
.ann-expand-btn:hover{text-decoration:underline}
.ann-foot{display:flex;align-items:center;justify-content:space-between;margin-top:10px;padding-top:10px;border-top:1px solid var(--border)}
.ann-date-full{font-size:11px;color:var(--text4)}
.ann-del-btn{font-size:11px;padding:4px 10px}

/* ── MESSAGING ── */
.main:has(#pg-messages.on){overflow:hidden}
#pg-messages.on{display:flex!important;flex-direction:column;padding:0;height:100%;overflow:hidden}
.msg-shell{display:grid;grid-template-columns:300px 1fr;flex:1;min-height:0;overflow:hidden}

/* sidebar */
.msg-sidebar{display:flex;flex-direction:column;background:var(--bg1);border-right:1px solid var(--border2);min-height:0;overflow:hidden}
.msg-sidebar-head{padding:16px 14px 12px;border-bottom:1px solid var(--border)}
.msg-sidebar-title{font-size:15px;font-weight:700;color:var(--text);margin-bottom:10px;letter-spacing:-0.3px}
.msg-search-wrap{position:relative;display:flex;align-items:center}
.msg-search-icon{position:absolute;left:10px;font-size:14px;color:var(--text4);pointer-events:none}
.msg-search-inp{width:100%;background:var(--bg2);border:1px solid var(--border2);border-radius:20px;padding:7px 12px 7px 30px;color:var(--text);font-family:var(--font);font-size:12px;outline:none;transition:border-color .15s}
.msg-search-inp:focus{border-color:var(--blue)}
.msg-search-inp::placeholder{color:var(--text4)}
.msg-contacts{flex:1;overflow-y:auto}
.msg-item{display:flex;align-items:center;gap:10px;padding:11px 14px;cursor:pointer;transition:background .12s;border-bottom:1px solid var(--border);position:relative}
.msg-item:hover{background:var(--bg2)}
.msg-item.on{background:rgba(37,99,235,0.14)}
.msg-item.on::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:#2563eb;border-radius:0 2px 2px 0}
.msg-item-av{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0;border:2px solid transparent}
.msg-item-body{flex:1;min-width:0}
.msg-item-row1{display:flex;align-items:center;justify-content:space-between;margin-bottom:3px}
.msg-item-row2{display:flex;align-items:center;justify-content:space-between;gap:4px}
.msg-item-name{font-size:13px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msg-item-time{font-size:10px;color:var(--text4);white-space:nowrap;flex-shrink:0}
.msg-item-preview{font-size:11px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;line-height:1.4}
.msg-item-role{font-size:9px;color:var(--text4);font-weight:500;letter-spacing:0.3px;text-transform:uppercase;flex-shrink:0}
.msg-unread-dot{width:8px;height:8px;background:#2563eb;border-radius:50%;flex-shrink:0}
.msg-unread-badge{background:#2563eb;color:#fff;font-size:9px;font-weight:700;border-radius:10px;padding:1px 6px;white-space:nowrap;flex-shrink:0;min-width:16px;text-align:center}

/* chat pane */
.msg-chat{display:flex;flex-direction:column;background:var(--bg);overflow:hidden;min-height:0}
.msg-chat-hdr{padding:14px 20px;border-bottom:1px solid var(--border2);background:var(--bg1);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.msg-chat-hdr-left{display:flex;align-items:center;gap:12px}
.msg-chat-av{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0;border:2px solid transparent}
.msg-chat-name{font-size:15px;font-weight:700;color:var(--text);letter-spacing:-0.2px}
.msg-chat-sub{font-size:11px;color:var(--text4);margin-top:1px}

/* messages */
.msg-body{flex:1;overflow-y:auto;padding:24px 28px;display:flex;flex-direction:column;gap:2px;scroll-behavior:smooth}
.msg-body::-webkit-scrollbar{width:4px}
.msg-body::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}
.msg-welcome{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:10px;-webkit-user-select:none;user-select:none}
.msg-welcome-ico{font-size:52px;filter:grayscale(0.3)}
.msg-welcome-title{font-size:17px;font-weight:700;color:var(--text2);letter-spacing:-0.3px}
.msg-welcome-sub{font-size:13px;color:var(--text4);text-align:center;max-width:260px;line-height:1.5}

.msg-date-sep{display:flex;align-items:center;gap:10px;margin:16px 0 10px}
.msg-date-sep::before,.msg-date-sep::after{content:'';flex:1;height:1px;background:var(--border)}
.msg-date-sep span{font-size:10px;color:var(--text4);font-weight:600;white-space:nowrap;letter-spacing:0.3px;text-transform:uppercase}

.msg-bubble-wrap{display:flex;flex-direction:column;margin-bottom:2px;animation:msgIn .18s ease}
@keyframes msgIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.msg-bubble-wrap.me{align-items:flex-end}
.msg-bubble-wrap.them{align-items:flex-start}
.msg-bubble{max-width:62%;padding:10px 15px;font-size:13px;line-height:1.6;word-break:break-word;position:relative}
.msg-bubble.me{background:#2563eb;color:#fff;border-radius:18px 18px 4px 18px;box-shadow:0 2px 8px rgba(37,99,235,0.3)}
.msg-bubble.them{background:var(--bg2);color:var(--text);border:1px solid var(--border2);border-radius:18px 18px 18px 4px;box-shadow:0 1px 4px rgba(0,0,0,0.2)}
.msg-ts{font-size:10px;color:var(--text4);margin-top:4px;padding:0 2px}

/* input bar */
.msg-input-bar{padding:14px 20px;border-top:1px solid var(--border2);background:var(--bg1);display:flex;align-items:flex-end;gap:10px;flex-shrink:0}
.msg-textarea{flex:1;background:var(--bg2);border:1.5px solid var(--border2);border-radius:22px;padding:10px 18px;color:var(--text);font-family:var(--font);font-size:13px;outline:none;resize:none;line-height:1.45;transition:border-color .2s,box-shadow .2s;max-height:110px;overflow-y:auto}
.msg-textarea:focus{border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,0.12)}
.msg-textarea::placeholder{color:var(--text4)}
.msg-textarea:disabled{opacity:0.45;cursor:not-allowed}
.msg-send-btn{width:40px;height:40px;border-radius:50%;background:#2563eb;border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s,transform .1s;box-shadow:0 2px 8px rgba(37,99,235,0.35)}
.msg-send-btn:hover{background:#1d4ed8;transform:scale(1.07)}
.msg-send-btn:active{transform:scale(0.95)}

/* ── DEPT MGMT ── */
.dept-card{background:var(--bg1);border:1px solid var(--border);border-radius:var(--rl);padding:16px;position:relative;overflow:hidden}
.dept-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px}

/* ── SCHOLARSHIP ── */
.sch-item{padding:12px 14px;border:1px solid var(--border);border-radius:var(--r);margin-bottom:8px;display:flex;align-items:center;justify-content:space-between}

/* ── HALL TICKET ── */
.ht{background:var(--bg1);border:1px solid var(--border2);border-radius:var(--rl);overflow:hidden;max-width:480px;margin:0 auto}
.ht-head{background:linear-gradient(135deg,#1e3a5f,#0f172a);padding:20px;color:#fff;text-align:center}
.ht-body{padding:20px}
.ht-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ht-field{background:var(--bg2);padding:8px 12px;border-radius:var(--r)}
.ht-lbl{font-size:10px;color:var(--text3);margin-bottom:2px}
.ht-val{font-size:13px;font-weight:500}
.ht-exams{margin-top:14px}
.ht-exam-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--border);font-size:12px}

/* ── MISC ── */
.mono{font-family:var(--mono)}
.text2{color:var(--text2)}
.text3{color:var(--text3)}
.text4{color:var(--text4)}
.bold{font-weight:700}
.flex{display:flex;align-items:center}
.gap6{gap:6px}
.gap10{gap:10px}
.section-title{font-size:11px;font-weight:500;color:var(--text4);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:10px}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.three-col{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}

/* ── Toast fade-out ── */
.toast-out{opacity:0;transform:translateX(12px);transition:opacity .35s,transform .35s}

/* ── Form validation ── */
.inp-err{border-color:var(--red)!important}
.field-err{font-size:11px;color:#fca5a5;margin-top:3px;display:block}

/* ── Skeleton loader ── */
.skel{height:14px;background:var(--bg3);border-radius:4px;animation:skelPulse 1.4s ease infinite}
@keyframes skelPulse{0%,100%{opacity:.5}50%{opacity:1}}

/* ── Empty state (component) ── */
.empty-state{text-align:center;padding:40px 20px}
.empty-ico{font-size:32px;margin-bottom:10px}
.empty-title{font-size:14px;font-weight:500;color:var(--text2)}
.empty-sub{font-size:12px;color:var(--text4);margin-top:4px}

/* ── Pagination ── */
.pg-row{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-top:1px solid var(--border)}
.pg-info{font-size:11px;color:var(--text4)}
.pg-btns{display:flex;gap:3px;align-items:center}
.pg-btn{min-width:28px;height:28px;padding:0 6px;font-size:12px}
.pg-active{background:var(--blue)!important;color:#fff!important;border-color:var(--blue)!important}
.pg-ellipsis{color:var(--text4);font-size:12px;padding:0 4px}

/* ── Danger button ── */
.btn-danger{background:#dc2626;color:#fee2e2;border:1px solid #ef4444}
.btn-danger:hover{background:#b91c1c;color:#fff;border-color:#dc2626}

/* ── Sort indicators ── */
th.sort-asc,th.sort-desc{color:var(--blue)}
.sort-ind{color:var(--blue);font-size:10px;margin-left:2px}

/* ── Notif badge with count ── */
.notif-badge{position:absolute;top:0;right:0;min-width:14px;height:14px;background:var(--red);border-radius:7px;border:1.5px solid var(--bg1);font-size:9px;font-weight:700;color:#fff;align-items:center;justify-content:center;padding:0 2px}

/* ── Light theme overrides ── */
[data-theme="light"]{
  --bg:#f4f4f5;--bg1:#ffffff;--bg2:#f8f8fa;--bg3:#ebebed;--bg4:#d4d4d8;
  --border:rgba(0,0,0,0.08);--border2:rgba(0,0,0,0.14);--border3:rgba(0,0,0,0.20);
  --text:#000000;--text2:#18181b;--text3:#3f3f46;--text4:#52525b;
}
[data-theme="light"] .lcard{box-shadow:0 2px 16px rgba(0,0,0,0.06)}
[data-theme="light"] .card{box-shadow:0 1px 4px rgba(0,0,0,0.04)}

/* ── Misc additions ── */
.btn-amber{background:var(--amber-d);color:var(--amber);border:1px solid var(--amber-b)}
.btn-amber:hover{background:var(--amber);color:#000;border-color:var(--amber)}

/* ── Pagination ── */
.pg{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-top:1px solid var(--border);flex-wrap:wrap;gap:8px;min-height:44px}
.pg:empty{display:none}
.pg-info{font-size:12px;color:var(--text4)}
.pg-btns{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.pg-btn{min-width:28px;height:28px;padding:0 6px;font-size:12px}
.pg-active{background:var(--blue)!important;color:#fff!important;border-color:var(--blue)!important}
.pg-ellipsis{padding:0 4px;color:var(--text4);font-size:12px}

/* ── Row save flash animation ── */
@keyframes rowFlash{0%{background:rgba(34,197,94,0.22)}100%{background:transparent}}
.row-flash{animation:rowFlash 1.5s ease-out forwards}

/* ── Row delete fade-out animation ── */
@keyframes rowFadeOut{0%{opacity:1;transform:translateX(0)}60%{opacity:.3;transform:translateX(6px)}100%{opacity:0;transform:translateX(12px)}}
.row-delete{animation:rowFadeOut .28s ease-in forwards;pointer-events:none}

/* ── Required field marker ── */
.req{color:var(--red);margin-left:1px;font-weight:700;font-size:11px}

/* ── Undo button inside toast ── */
.toast-undo{background:transparent;border:1px solid rgba(255,255,255,0.3);border-radius:4px;color:#fff;font-size:10px;font-weight:600;font-family:var(--font);padding:2px 9px;cursor:pointer;margin-left:10px;flex-shrink:0;transition:background .15s;white-space:nowrap}
.toast-undo:hover{background:rgba(255,255,255,0.18)}
.popup-undo-btn{display:inline-block;margin-top:12px;padding:7px 22px;background:rgba(245,158,11,0.18);border:1.5px solid rgba(245,158,11,0.55);border-radius:8px;color:#b45309;font-size:13px;font-weight:700;font-family:inherit;cursor:pointer;transition:background .15s}
.popup-undo-btn:hover{background:rgba(245,158,11,0.32)}

/* ── SIDEBAR COLLAPSE ── */
.sb{transition:width .2s ease}
.sb.collapsed{width:52px}
.sb.collapsed .nav-lbl{display:none}
.sb.collapsed .ni{padding:8px;margin:1px 4px;justify-content:center;font-size:0;gap:0}
.sb.collapsed .ni svg{width:16px;height:16px;opacity:.65}
.sb.collapsed .ni.on svg{opacity:1}
.sb.collapsed .ni.on::before{left:-4px}
.sb.collapsed .sb-foot{padding:8px;justify-content:center}
.sb.collapsed .sb-foot>*{display:none}
.sb.collapsed .nav-sec{padding:3px 0}
.sb.collapsed .ni::after{content:none}

/* ── PAGE FADE TRANSITION ── */
.page.on{animation:pgIn .13s ease}
@keyframes pgIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

/* ── STICKY TABLE HEADERS ── */
table.t th{position:sticky;top:0;z-index:2;background:var(--bg1)}

/* ── SCROLL TO TOP ── */
.scroll-top{position:fixed;bottom:calc(var(--ftr-h) + 14px);right:16px;width:34px;height:34px;background:var(--blue);border:none;border-radius:50%;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity .2s,transform .2s;z-index:50;font-size:16px;line-height:1}
.scroll-top.show{opacity:1;pointer-events:all;transform:translateY(0)}

/* ── MOBILE SIDEBAR OVERLAY ── */
.sb-overlay{position:fixed;inset:0;top:var(--hdr-h);background:rgba(0,0,0,0.55);z-index:199;display:none;cursor:pointer}
.sb-overlay.show{display:block}
.hdr-menu-btn{display:none;width:32px;height:32px;background:transparent;border:none;border-radius:var(--r);color:var(--text3);cursor:pointer;align-items:center;justify-content:center;transition:all .15s;margin-right:2px}
.hdr-menu-btn:hover{background:var(--bg2);color:var(--text)}

/* ── Mobile hamburger button ── */
.mob-nav-btn{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:36px;height:36px;background:transparent;border:none;border-radius:var(--r);cursor:pointer;padding:0;flex-shrink:0;transition:background .15s}
.mob-nav-btn:hover{background:var(--bg2)}
.mob-nav-bar{display:block;width:20px;height:2px;background:var(--text3);border-radius:2px;transition:transform .22s ease, opacity .18s ease, width .18s ease}
.mob-nav-btn.open .mob-nav-bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
.mob-nav-btn.open .mob-nav-bar:nth-child(2){opacity:0;width:0}
.mob-nav-btn.open .mob-nav-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* Overlay behind mobile nav */
.mob-nav-overlay{display:none;position:fixed;inset:0;z-index:298;background:rgba(0,0,0,0.35);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);transition:opacity .25s}
.mob-nav-overlay.show{display:block}

/* back button (messages mobile) — hidden by default */
.msg-back-btn{display:none;width:32px;height:32px;background:var(--bg3);border:1px solid var(--border2);border-radius:var(--r);color:var(--text2);cursor:pointer;align-items:center;justify-content:center;font-size:18px;line-height:1;flex-shrink:0;transition:all .15s;margin-right:4px}
.msg-back-btn:hover{background:var(--bg4);color:var(--text)}

/* ── TABLET (769px – 1024px) ── */
@media(min-width:769px) and (max-width:1024px){
  :root{--sb:188px}
  .stats{grid-template-columns:repeat(2,1fr)!important}
  .prof-stats{grid-template-columns:repeat(2,1fr)!important}
  .topnav{overflow-x:auto;justify-content:flex-start;scrollbar-width:none}
  .topnav::-webkit-scrollbar{display:none}
  .tn-item{padding:0 13px;font-size:13px;letter-spacing:0.5px;flex-shrink:0}
  .land-feat-grid{grid-template-columns:1fr 1fr}
  .mbox{width:calc(100vw - 48px)!important;max-width:640px}
  .mbox.wide{max-width:720px}
  .msg-shell{grid-template-columns:260px 1fr}
  .app-hdr-title{font-size:14px;letter-spacing:0}
}

/* ── MOBILE (<768px) ── */
@media(max-width:768px){
  /* header — restore title, fix overlap */
  .hdr-menu-btn{display:flex}
  .hdr-user-info{display:none}
  .app-hdr{grid-template-columns:auto 1fr auto;gap:6px}
  .app-hdr-c{overflow:hidden}
  .app-hdr-title{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}

  /* sidebar overlay */
  .sb{position:fixed;top:var(--hdr-h);bottom:0;left:0;z-index:200;transform:translateX(-100%);transition:transform .25s ease;box-shadow:none;width:var(--sb)!important}
  .sb.mob-open{transform:translateX(0);box-shadow:4px 0 24px rgba(0,0,0,0.4)}

  /* hamburger button — visible on mobile */
  .mob-nav-btn{display:flex}

  /* topnav — hidden by default, slides in from top as a sheet */
  .topnav{
    position:fixed;top:var(--hdr-h);left:0;right:0;
    flex-direction:column;align-items:stretch;justify-content:flex-start;
    height:0;overflow:hidden;padding:0;
    background:var(--bg1);border-bottom:none;
    box-shadow:0 12px 40px rgba(0,0,0,0.18);
    z-index:299;transition:height .28s cubic-bezier(.4,0,.2,1);
    scrollbar-width:none
  }
  .topnav::-webkit-scrollbar{display:none}
  .topnav.nav-open{height:auto;overflow-y:auto;max-height:calc(100vh - var(--hdr-h))}

  /* role container */
  .tn-role{display:flex!important;flex-direction:column;padding:10px 0 16px}

  /* section label (group trigger) */
  .tn-grp{height:auto;padding:0;display:block}
  .tn-item{
    display:flex;align-items:center;gap:12px;
    padding:11px 20px;
    font-size:12px;font-weight:700;letter-spacing:0.8px;text-transform:uppercase;
    color:var(--text4);border-bottom:none;border-bottom-color:transparent;
    margin-bottom:0;flex-shrink:unset;cursor:pointer;
    transition:color .12s,background .12s
  }
  .tn-item:not(.tn-has-drop){
    font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;
    color:var(--text);padding:13px 20px;
    border-radius:10px;margin:1px 10px;
    background:transparent
  }
  .tn-item:not(.tn-has-drop):hover{background:var(--bg2);color:var(--blue)}
  .tn-item:not(.tn-has-drop).on{background:rgba(59,130,246,0.1);color:var(--blue)}
  .tn-item.tn-has-drop{
    font-size:11px;font-weight:700;letter-spacing:1px;
    color:var(--text4);text-transform:uppercase;
    padding:14px 20px 5px;justify-content:space-between;
    border-top:1px solid var(--border);margin-top:6px;cursor:pointer
  }
  .tn-item.tn-has-drop:first-child,.tn-role>div:first-child .tn-item.tn-has-drop{border-top:none;margin-top:0}
  .tn-item.tn-has-drop svg{width:13px;height:13px;opacity:.5;transition:transform .2s}
  .tn-item.open.tn-has-drop svg{transform:rotate(180deg)}
  .tn-item.act{color:var(--blue)}

  /* dropdown items — inline grid */
  .tn-drop{
    position:static!important;display:none;
    border:none;border-radius:0;box-shadow:none;
    padding:4px 10px 8px;background:transparent
  }
  .tn-drop.open{display:grid!important;grid-template-columns:1fr 1fr;gap:3px;animation:none}
  .tn-di{
    padding:11px 14px;
    border-bottom:none;font-size:13px;font-weight:500;
    color:var(--text2);border-radius:10px;
    transition:background .1s,color .1s
  }
  .tn-di:hover{background:var(--bg2);color:var(--text)}
  .tn-di.on{background:rgba(59,130,246,0.1);color:var(--blue);font-weight:600}

  /* layout */
  .page{padding:14px 12px}
  .topbar{flex-wrap:wrap;gap:8px;margin-bottom:16px;padding-bottom:14px}
  .topbar h1{font-size:16px}
  .topbar-r{flex-wrap:wrap;justify-content:flex-start}

  /* grids */
  .stats{grid-template-columns:repeat(2,1fr)!important}
  .two-col,.three-col{grid-template-columns:1fr!important}
  .frow{grid-template-columns:1fr!important}
  .prof-stats{grid-template-columns:repeat(2,1fr)!important}

  /* cards */
  .card-b{padding:14px}
  .card-h{padding:12px 14px}

  /* tables */
  .tw{-webkit-overflow-scrolling:touch}
  table.t th,table.t td{padding:8px 10px}

  /* footer */
  .app-footer-r{display:none}
  .app-footer{padding:0 14px}

  /* modals — slide up from bottom */
  .mbg{padding:0;align-items:flex-end}
  .mbox{width:100%!important;max-width:100%!important;border-radius:20px 20px 0 0;max-height:92vh;animation:mInMob .22s ease}
  @keyframes mInMob{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

  /* profile */
  .prof-identity{flex-direction:column;align-items:flex-start;padding:0 16px 18px;gap:10px}
  .prof-id-actions{padding-top:0;align-self:flex-start}
  .prof-av-wrap{margin-top:-32px}
  .prof-tabs{overflow-x:auto;scrollbar-width:none;gap:0}
  .prof-tabs::-webkit-scrollbar{display:none}
  .prof-tab{white-space:nowrap;flex-shrink:0;padding:10px 14px}

  /* messages — sidebar-first on mobile */
  .msg-shell{grid-template-columns:1fr!important;height:100%!important}
  .msg-chat{display:none}
  .msg-shell.chat-open .msg-sidebar{display:none}
  .msg-shell.chat-open .msg-chat{display:flex}
  .msg-back-btn{display:flex!important}

  /* success popup */
  .success-box{padding:36px 28px;min-width:unset;max-width:calc(100vw - 48px)}
}

/* ── SMALL MOBILE (<480px) ── */
@media(max-width:480px){
  .stats{grid-template-columns:1fr!important}
  .prof-stats{grid-template-columns:1fr!important}
  .ach-grid{grid-template-columns:repeat(2,1fr)!important}
  table.t th,table.t td{padding:7px 8px;font-size:12px}
  .app-hdr-name{display:none}
  .hdr-divider-v{display:none}
  .tn-item{padding:0 10px;font-size:11px;letter-spacing:0.2px}
  .topbar h1{font-size:15px}
  .success-box{padding:28px 18px}
}

/* ── PRINT ── */
@media print{
  .app-hdr,.topnav,.sb,.app-footer,.topbar-r,.toasts,#npanel,#npoverlay,.scroll-top,.mbg,.hdr-menu-btn,.sb-overlay{display:none!important}
  .shell,.main-wrap{display:block!important;overflow:visible!important}
  body,#app,.main{overflow:visible!important;height:auto!important}
  .page.on{padding:10px!important;animation:none!important}
  table.t{font-size:11px}
  .card{break-inside:avoid;box-shadow:none!important;border:1px solid #ccc!important}
  table.t th{background:#f5f5f5!important;color:#333!important;position:static!important}
}

/* ── LIGHT THEME POLISH ── */
[data-theme="light"] .app-hdr,[data-theme="light"] .login-hdr,[data-theme="light"] .login-ftr,[data-theme="light"] .app-footer{box-shadow:0 1px 0 rgba(0,0,0,0.07)}
[data-theme="light"] .sb{box-shadow:1px 0 0 rgba(0,0,0,0.06)}
[data-theme="light"] table.t th{background:#ffffff}
[data-theme="light"] .npanel{box-shadow:-4px 0 20px rgba(0,0,0,0.1)}
[data-theme="light"] .toast{box-shadow:0 2px 12px rgba(0,0,0,0.12)}
[data-theme="light"] .mbox{box-shadow:0 8px 40px rgba(0,0,0,0.14)}

/* ── PASSWORD CHANGE MODAL ── */
.pw-strength{height:4px;border-radius:2px;background:var(--bg3);overflow:hidden;margin-top:4px}
.pw-strength-fill{height:100%;border-radius:2px;transition:width .2s,background .2s}

/* ── PROFILE PAGE ── */
/* ── PROFILE PAGE ── */
.prof-wrap{display:flex;flex-direction:column;gap:0}
/* cover strip */
.prof-cover{height:140px;background:linear-gradient(120deg,rgba(59,130,246,0.18) 0%,rgba(168,85,247,0.12) 50%,rgba(20,184,166,0.1) 100%);border-radius:var(--rl) var(--rl) 0 0;border:1px solid var(--border);border-bottom:none;position:relative;flex-shrink:0}
.prof-cover-pattern{position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,0.04) 1px,transparent 1px);background-size:20px 20px;border-radius:inherit}
/* identity strip below cover */
.prof-identity{background:var(--bg1);border:1px solid var(--border);border-top:none;border-radius:0 0 var(--rl) var(--rl);padding:0 28px 22px;margin-bottom:20px;display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.prof-av-wrap{margin-top:-38px;position:relative}
.prof-av{width:76px;height:76px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:700;flex-shrink:0;border:3px solid var(--bg1);box-shadow:0 0 0 1px var(--border2)}
.prof-id-center{flex:1;padding-top:12px;min-width:0}
.prof-name{font-size:20px;font-weight:700;letter-spacing:-0.5px;margin-bottom:4px}
.prof-meta{font-size:13px;color:var(--text3);display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.prof-meta-sep{width:3px;height:3px;border-radius:50%;background:var(--text4)}
.prof-badges{display:flex;gap:6px;flex-wrap:wrap}
.prof-id-actions{display:flex;gap:8px;align-items:center;flex-shrink:0;padding-top:12px}
/* stat bar */
.prof-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}
.prof-stat{background:var(--bg1);border:1px solid var(--border);border-radius:var(--rl);padding:18px 16px;display:flex;align-items:center;gap:14px;transition:border-color .15s,transform .15s}
.prof-stat:hover{border-color:var(--border2);transform:translateY(-1px)}
.prof-stat-ico{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.prof-stat-body{min-width:0}
.prof-stat-val{font-size:22px;font-weight:700;letter-spacing:-0.5px;line-height:1;margin-bottom:3px}
.prof-stat-lbl{font-size:11px;color:var(--text3);white-space:nowrap}
/* tabs */
.prof-tabs{display:flex;gap:2px;border-bottom:1px solid var(--border);margin-bottom:20px}
.prof-tab{padding:10px 20px;font-size:13px;color:var(--text3);cursor:pointer;border:none;background:none;border-bottom:2px solid transparent;margin-bottom:-1px;transition:all .15s;font-family:var(--font);font-weight:500}
.prof-tab:hover{color:var(--text2)}
.prof-tab.on{color:var(--text);border-bottom-color:var(--blue)}
.prof-pane{display:none}
.prof-pane.on{display:block}
/* overview grid (top-layout) */
.prof-ov-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.prof-ov-field{padding:14px 16px;border-bottom:1px solid var(--border);border-right:1px solid var(--border)}
.prof-ov-field:nth-child(3n){border-right:none}
.prof-ov-field:nth-last-child(-n+3){border-bottom:none}
.prof-ov-lbl{font-size:11px;color:var(--text4);display:flex;align-items:center;margin-bottom:5px;text-transform:uppercase;letter-spacing:0.4px;font-weight:500}
.prof-ov-val{font-size:14px;font-weight:500;color:var(--text);word-break:break-word}
@media(max-width:768px){.prof-ov-grid{grid-template-columns:1fr 1fr}.prof-ov-field:nth-child(3n){border-right:1px solid var(--border)}.prof-ov-field:nth-child(2n){border-right:none}.prof-ov-field:nth-last-child(-n+3){border-bottom:1px solid var(--border)}.prof-ov-field:nth-last-child(-n+2){border-bottom:none}}
/* info rows */
.prof-field{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-bottom:1px solid var(--border);font-size:13px;gap:16px}
.prof-field:last-child{border-bottom:none}
.prof-field-lbl{color:var(--text3);font-size:12px;flex-shrink:0;display:flex;align-items:center;gap:6px}
.prof-field-val{font-weight:500;text-align:right;word-break:break-word;color:var(--text)}
/* course row inside card */
.prof-course-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--border)}
.prof-course-row:last-child{border-bottom:none}
.prof-course-ico{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0}
.prof-course-body{flex:1;min-width:0}
.prof-course-name{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prof-course-meta{font-size:11px;color:var(--text4);margin-top:1px}
.prof-course-right{display:flex;align-items:center;gap:8px;flex-shrink:0}
/* notif rows */
.prof-notif-row{display:flex;align-items:flex-start;gap:12px;padding:11px 0;border-bottom:1px solid var(--border)}
.prof-notif-row:last-child{border-bottom:none}
.prof-notif-dot{width:8px;height:8px;border-radius:50%;margin-top:5px;flex-shrink:0}
.hdr-user{cursor:pointer}
.hdr-user:hover{background:var(--bg2)}
@media(max-width:768px){
  .prof-identity{flex-direction:column;align-items:flex-start;gap:12px;padding:0 16px 18px}
  .prof-id-actions{flex-direction:row;padding-top:0}
  .prof-stats{grid-template-columns:repeat(2,1fr)}
  .prof-cover{height:100px}
  .prof-av{width:60px;height:60px;font-size:20px}
  .prof-av-wrap{margin-top:-28px}
}
.pg-row{display:flex;align-items:center;justify-content:space-between;padding:8px 14px;border-top:1px solid var(--border);flex-wrap:wrap;gap:6px}