/* ── auth screens ── */
.auth-split{display:grid;grid-template-columns:1.05fr .95fr;gap:2rem;align-items:center;min-height:calc(100dvh - var(--nav-h))}
.auth-card{padding:1.9rem}
.auth-side{position:relative;height:100%;min-height:340px;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border);background:linear-gradient(160deg,rgba(34,197,94,.16),rgba(56,189,248,.12),transparent)}
.auth-side .inner{position:absolute;inset:0;padding:1.8rem;display:flex;flex-direction:column;justify-content:flex-end;gap:.6rem;z-index:2}
.role-pills{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-bottom:1.2rem}
.role-pill{
  padding:.7rem;border-radius:var(--radius-sm);border:1px solid var(--border);background:rgba(255,255,255,.04);
  cursor:pointer;text-align:center;font-weight:700;font-size:.87rem;transition:all .25s
}
.role-pill:hover{background:var(--surface-2)}
.role-pill.active{border-color:transparent;background:var(--grad);color:#03140a}

/* ── student dashboard ── */
.dash{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:1.2rem;align-items:start}
.ring{position:relative;width:150px;height:150px;margin-inline:auto}
.ring svg{transform:rotate(-90deg)}
.ring .val{position:absolute;inset:0;display:grid;place-items:center;text-align:center}
.ring .val b{font-family:var(--font-head);font-size:1.9rem;display:block;line-height:1}
.ring .val span{font-size:.72rem;color:var(--text-muted)}

/* ── camera / session panel ── */
.cam-frame{
  position:relative;border-radius:var(--radius);overflow:hidden;background:#04070f;
  border:1px solid var(--border-strong);aspect-ratio:16/10
}
.cam-frame video,.cam-frame img,.cam-frame canvas{width:100%;height:100%;object-fit:cover;display:block}
.cam-frame .off{position:absolute;inset:0;display:grid;place-items:center;color:var(--text-muted);text-align:center;padding:1rem}
.cam-overlay{position:absolute;inset:0;pointer-events:none}
.face-box{position:absolute;border:2px solid var(--accent);border-radius:10px;box-shadow:0 0 20px rgba(34,197,94,.5);transition:all .18s ease}
.cam-badge{position:absolute;top:.7rem;inset-inline-start:.7rem;display:inline-flex;align-items:center;gap:.4rem;padding:.28rem .7rem;border-radius:999px;background:rgba(2,6,23,.75);border:1px solid var(--border-strong);font-size:.75rem;font-weight:700}
.dot{width:8px;height:8px;border-radius:50%;background:var(--danger);animation:pulse 1.4s infinite}
.dot.live{background:var(--accent)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

.status-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin-top:.9rem}
.status-cell{padding:.6rem;border-radius:var(--radius-sm);background:rgba(255,255,255,.04);border:1px solid var(--border);text-align:center}
.status-cell b{display:block;font-size:1.05rem}
.status-cell span{font-size:.72rem;color:var(--text-muted)}

.chart-box{margin-top:.9rem;border:1px solid var(--border);border-radius:var(--radius);background:rgba(255,255,255,.03);padding:.7rem}
.chart-box canvas{width:100%;height:150px;display:block}

/* ── homework ── */
.hw{border:1px solid var(--border);border-radius:var(--radius);background:rgba(255,255,255,.035);padding:1.05rem;transition:transform .25s,box-shadow .25s,border-color .25s}
.hw:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--border-strong)}
.hw h4{display:flex;align-items:center;gap:.5rem;font-family:var(--font-head);font-size:1rem;margin-bottom:.35rem}
.hw-meta{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.6rem;font-size:.76rem;color:var(--text-muted)}
.due-soon{color:#FCD34D}
.due-late{color:#FCA5A5}
.drop{
  border:1.5px dashed var(--border-strong);border-radius:var(--radius);padding:1.1rem;text-align:center;
  cursor:pointer;transition:all .25s;background:rgba(255,255,255,.02)
}
.drop:hover,.drop.over{border-color:var(--accent);background:rgba(34,197,94,.08)}
.file-pill{display:inline-flex;align-items:center;gap:.45rem;padding:.35rem .8rem;border-radius:999px;background:var(--surface-2);font-size:.8rem;font-weight:600}

@media(max-width:980px){
  .dash{grid-template-columns:1fr}
  .auth-split{grid-template-columns:1fr;min-height:auto;padding:1.5rem 0}
  .auth-side{min-height:200px}
}
@media(max-width:520px){
  .status-strip{grid-template-columns:1fr 1fr}
}