/* ==========================================================
   Techonquer LMS theme: dark, purple + pink glass
   Written mobile first, so the phone layout is the default
   and the desktop shell is layered on at 860px.
   ========================================================== */
:root{
  --bg:#0b0713; --panel:rgba(255,255,255,.035); --panel2:rgba(255,255,255,.06);
  --bd:rgba(255,255,255,.09); --bd2:rgba(139,92,246,.45);
  --p:#8b5cf6; --p2:#a78bfa; --a:#ec4899;
  --grad:linear-gradient(135deg,#8b5cf6,#ec4899);
  --tx:#e7e7ee; --mut:#9aa0ab; --ok:#34d399; --err:#f87171; --warn:#fbbf24;
  --r:14px; --side:250px; --topbar:58px;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:rgba(139,92,246,.18)}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--tx);font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:15px;line-height:1.6;min-height:100vh;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.h{font-family:'Plus Jakarta Sans',Inter,sans-serif;font-weight:800;letter-spacing:-.02em}
.grad-t{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.mut{color:var(--mut)}
.sm{font-size:13.5px}
.xs{font-size:12px}

/* ---------- shell: drawer on phones, fixed column on desktop ---------- */
.shell{display:flex;min-height:100vh;flex-direction:column}

.side{
  position:fixed;top:0;left:0;bottom:0;width:min(84vw,290px);z-index:70;
  background:#120c1e;border-right:1px solid var(--bd);padding:18px 14px 30px;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  transform:translateX(-102%);transition:transform .22s ease;
}
.side.open{transform:translateX(0)}
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:60;opacity:0;pointer-events:none;transition:opacity .2s}
.scrim.on{opacity:1;pointer-events:auto}

.brand{display:flex;align-items:center;padding:4px 6px 18px}
.brand .dot{width:30px;height:30px;border-radius:9px;background:var(--grad);display:flex;align-items:center;
  justify-content:center;font-size:13px;color:#fff;flex:0 0 auto}
.nav a{display:flex;align-items:center;gap:10px;padding:12px;border-radius:11px;color:#c8cddb;
  font-size:14.5px;margin-bottom:3px;transition:.18s;min-height:44px}
.nav a:active{background:rgba(139,92,246,.18)}
.nav a.on{background:rgba(139,92,246,.16);color:#fff;border:1px solid rgba(139,92,246,.3)}
.nav .grp{font-size:11px;text-transform:uppercase;letter-spacing:1.2px;color:#6b7280;padding:14px 12px 6px}

.main{flex:1;min-width:0;display:flex;flex-direction:column;width:100%}
.top{display:flex;align-items:center;gap:10px;padding:0 14px;min-height:var(--topbar);
  border-bottom:1px solid var(--bd);background:rgba(11,7,19,.9);backdrop-filter:blur(8px);
  position:sticky;top:0;z-index:40}
.top h1{font-size:16.5px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.top .who{display:none}
.menu-btn{width:42px;height:42px;flex:0 0 auto;border:1px solid var(--bd);background:var(--panel2);
  border-radius:11px;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.menu-btn span{display:block;width:17px;height:2px;background:#fff;border-radius:2px;position:relative}
.menu-btn span::before,.menu-btn span::after{content:'';position:absolute;left:0;width:17px;height:2px;background:#fff;border-radius:2px}
.menu-btn span::before{top:-5px}.menu-btn span::after{top:5px}
.wrap{padding:16px 14px 40px;max-width:1400px;width:100%}

/* ---------- cards, grids ---------- */
.card{background:var(--panel);border:1px solid var(--bd);border-radius:var(--r);padding:16px}
.card + .card{margin-top:16px}
.grid{display:grid;gap:14px}
.g2,.g3,.g4{display:grid;gap:14px;grid-template-columns:1fr}
.stat{background:var(--panel);border:1px solid var(--bd);border-radius:var(--r);padding:15px}
.stat .n{font-size:23px;font-weight:800}
.stat .l{font-size:12px;color:var(--mut);margin-top:2px}

/* ---------- tables: always scrollable on small screens ---------- */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--bd);
  border-radius:var(--r);background:var(--panel)}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--mut);
  padding:10px 12px;border-bottom:1px solid var(--bd);white-space:nowrap}
td{padding:12px;border-bottom:1px solid rgba(255,255,255,.06);vertical-align:middle}
tr:last-child td{border-bottom:0}

/* ---------- forms: 16px stops iOS from zooming on focus ---------- */
label{display:block;font-size:13.5px;margin-bottom:6px;color:#cfd4e0}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],
input[type=tel],input[type=file],select,textarea{
  width:100%;background:rgba(0,0,0,.3);border:1px solid var(--bd);border-radius:11px;
  padding:12px 13px;color:var(--tx);font-size:16px;font-family:inherit;outline:none;transition:.18s;
  min-height:46px;-webkit-appearance:none;appearance:none}
select{background-image:linear-gradient(45deg,transparent 50%,#9aa0ab 50%),linear-gradient(135deg,#9aa0ab 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:38px}
input[type=file]{padding:10px;min-height:44px}
input[type=range]{-webkit-appearance:none;appearance:none;background:transparent;min-height:34px;padding:0}
input[type=range]::-webkit-slider-runnable-track{height:5px;border-radius:20px;background:rgba(255,255,255,.22)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:17px;height:17px;border-radius:50%;background:#fff;margin-top:-6px}
input[type=checkbox],input[type=radio]{width:19px;height:19px;min-height:0;accent-color:var(--p)}
input:focus,select:focus,textarea:focus{border-color:var(--bd2);box-shadow:0 0 0 3px rgba(139,92,246,.12)}
textarea{resize:vertical;min-height:96px;line-height:1.55}
.fld{margin-bottom:14px}
.row2{display:grid;grid-template-columns:1fr;gap:12px}

/* ---------- buttons: 44px minimum so they are easy to tap ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 17px;
  border-radius:11px;font-weight:600;font-size:14.5px;border:1px solid var(--bd);background:var(--panel2);
  color:#fff;cursor:pointer;transition:.2s;font-family:inherit;min-height:44px;line-height:1.2}
.btn:active{background:rgba(139,92,246,.2)}
.btn-p{background:var(--grad);border:0;box-shadow:0 6px 20px rgba(139,92,246,.28)}
.btn-d{border-color:rgba(248,113,113,.35);color:#fca5a5;background:rgba(248,113,113,.08)}
.btn-s{padding:9px 13px;font-size:13px;border-radius:10px;min-height:38px}

/* ---------- misc ---------- */
.badge{display:inline-block;font-size:11px;font-weight:600;padding:4px 10px;border-radius:20px;
  background:rgba(139,92,246,.16);color:var(--p2);border:1px solid rgba(139,92,246,.25);white-space:nowrap}
.badge.ok{background:rgba(52,211,153,.14);color:#6ee7b7;border-color:rgba(52,211,153,.28)}
.badge.err{background:rgba(248,113,113,.14);color:#fca5a5;border-color:rgba(248,113,113,.28)}
.badge.warn{background:rgba(251,191,36,.14);color:#fcd34d;border-color:rgba(251,191,36,.28)}
.alert{padding:12px 14px;border-radius:11px;font-size:14px;margin-bottom:14px;border:1px solid}
.alert.success{background:rgba(52,211,153,.10);border-color:rgba(52,211,153,.3);color:#6ee7b7}
.alert.error{background:rgba(248,113,113,.10);border-color:rgba(248,113,113,.3);color:#fca5a5}
.alert.info{background:rgba(139,92,246,.10);border-color:rgba(139,92,246,.3);color:var(--p2)}
.empty{text-align:center;padding:38px 16px;color:var(--mut)}
.bar{height:7px;border-radius:20px;background:rgba(255,255,255,.08);overflow:hidden}
.bar span{display:block;height:100%;background:var(--grad);border-radius:20px}
.sep{height:1px;background:var(--bd);margin:16px 0}
details summary{min-height:34px;display:flex;align-items:center}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em;background:rgba(255,255,255,.06);padding:2px 6px;border-radius:6px}

/* ---------- login and other standalone pages ---------- */
.auth{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:18px;
  background:radial-gradient(90% 60% at 100% 0%,rgba(139,92,246,.14),transparent 60%),
             radial-gradient(80% 60% at 0% 100%,rgba(236,72,153,.12),transparent 60%),var(--bg)}
.auth-box{width:100%;max-width:400px;background:var(--panel);border:1px solid var(--bd);border-radius:18px;padding:24px 20px}

/* ==========================================================
   Tablet
   ========================================================== */
@media(min-width:600px){
  .g2{grid-template-columns:1fr 1fr}
  .g4{grid-template-columns:1fr 1fr}
  .row2{grid-template-columns:1fr 1fr}
  .card{padding:20px}
  .wrap{padding:20px 18px 40px}
  .auth-box{padding:32px}
}

/* ==========================================================
   Desktop: the drawer becomes a permanent sidebar
   ========================================================== */
@media(min-width:860px){
  body{font-size:14.5px}
  .shell{flex-direction:row}
  .side{position:sticky;top:0;height:100vh;width:var(--side);transform:none;
    background:rgba(255,255,255,.02);padding:20px 14px;z-index:10}
  .scrim{display:none}
  .menu-btn{display:none}
  .top{padding:16px 26px;min-height:auto}
  .top h1{font-size:19px}
  .top .who{display:inline-flex;align-items:center;gap:10px}
  .wrap{padding:26px}
  .g3{grid-template-columns:repeat(3,1fr)}
  .g4{grid-template-columns:repeat(4,1fr)}
  .grid{gap:16px}
  .nav a{padding:10px 12px;min-height:0}
}
@media(min-width:1200px){
  .g3{grid-template-columns:repeat(3,1fr)}
}

/* ---------- respect reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ---------- video player, small screens ---------- */
@media(max-width:560px){
  #wm{font-size:11px !important}
  #wm2{font-size:10px !important}
  #wm3{font-size:16px !important}
  .volslider{display:none}
  #stage .btn-s{padding:8px 11px;font-size:12.5px;min-height:36px}
}