/* =============================================
   ClassPulse – Complete Design System
   ============================================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

/* ============ CSS TOKENS ============ */
:root {
  --bg:        #f1f5f4;
  --surface:   #ffffff;
  --surface2:  #f8faf9;
  --ink:       #0d1f1a;
  --ink2:      #2a3d37;
  --mute:      #5f7169;
  --line:      #dde8e3;
  --brand:     #059669;
  --brand-h:   #047857;
  --on-brand:  #ffffff;
  --soft:      #e7f4ee;
  --soft2:     #cff3e3;
  --track:     #e8f0ec;
  --ok:        #059669;
  --bad:       #dc2626;
  --warn:      #d97706;
  --info:      #2563eb;
  --sh-sm:     0 1px 3px rgba(15,31,26,.07),0 1px 2px rgba(15,31,26,.05);
  --sh:        0 2px 8px rgba(15,31,26,.08),0 4px 20px rgba(15,31,26,.05);
  --sh-lg:     0 8px 32px rgba(15,31,26,.12),0 2px 8px rgba(15,31,26,.07);
  --r:         12px;
  --r-sm:      8px;
  --r-lg:      18px;
  --c1:#059669;--c2:#2563eb;--c3:#d97706;--c4:#7c3aed;--c5:#db2777;
  --sw: 240px;
}
:root[data-theme=dark]{
  --bg:#0b1612;--surface:#13201b;--surface2:#192820;
  --ink:#e8f4ef;--ink2:#b8d4c8;--mute:#8aada4;--line:#243329;
  --brand:#10b981;--brand-h:#34d399;--on-brand:#042e1c;
  --soft:#0f3326;--soft2:#0d2e22;--track:#1c2e27;
  --ok:#34d399;--bad:#f87171;--warn:#fbbf24;--info:#60a5fa;
  --sh-sm:none;--sh:none;--sh-lg:none;
  --c1:#34d399;--c2:#60a5fa;--c3:#fbbf24;--c4:#a78bfa;--c5:#f472b6;
  color-scheme:dark;
}

/* ============ RESET ============ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:15px;line-height:1.5;
  transition:background .2s,color .2s;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
h1{font-size:22px;font-weight:800;line-height:1.2;letter-spacing:-.02em}
h2{font-size:15px;font-weight:700}
h3{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--mute)}
p{margin-bottom:10px}
p:last-child{margin-bottom:0}

/* ============ SCROLLBAR ============ */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:var(--mute)}

/* ============ UTILITIES ============ */
.mute{color:var(--mute);font-size:13px}
.center{text-align:center}
.full{width:100%;justify-content:center}
.row{display:flex;gap:8px;flex-wrap:wrap}
.row>*{flex:1;min-width:0}
.row.tight{gap:6px}

/* ============ TOP BAR ============ */
.top{
  display:flex;justify-content:space-between;align-items:center;
  padding:0 20px;height:56px;
  background:var(--surface);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:30;box-shadow:var(--sh-sm);
}

/* ============ BRAND ============ */
.brand{
  display:flex;align-items:center;gap:9px;
  font-weight:800;font-size:18px;color:var(--ink);text-decoration:none;
  letter-spacing:-.025em;
}
.brand img{width:28px;height:28px;flex:none}
.brand span{color:var(--brand)}

/* ============ BUTTONS ============ */
button,.btn{
  font:inherit;cursor:pointer;
  border:1px solid transparent;border-radius:var(--r-sm);
  padding:9px 16px;font-size:14px;font-weight:600;
  background:var(--brand);color:var(--on-brand);
  display:inline-flex;align-items:center;gap:7px;
  white-space:nowrap;line-height:1;
  transition:background .14s,border-color .14s,color .14s,transform .1s,box-shadow .14s;
  text-decoration:none;
}
button:hover{background:var(--brand-h)}
button:active{transform:scale(.98)}
button:disabled{opacity:.48;cursor:default;pointer-events:none}
button:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

button.ghost{background:var(--surface);color:var(--ink);border-color:var(--line)}
button.ghost:hover{border-color:var(--brand);background:var(--soft);color:var(--brand)}
button.ghost.on{background:var(--soft);border-color:var(--brand);color:var(--brand)}

button.icon{
  width:36px;height:36px;padding:0;
  border-radius:var(--r-sm);justify-content:center;
  background:var(--surface);border:1px solid var(--line);color:var(--ink);
}
button.icon:hover{border-color:var(--brand);color:var(--brand);background:var(--soft)}

button.danger{background:var(--bad);color:#fff;border-color:transparent}
button.danger:hover{background:#b91c1c}
button.sm{padding:6px 11px;font-size:13px}
button.xs{padding:4px 8px;font-size:12px;border-radius:6px}

/* Demo button */
button.demo{
  background:linear-gradient(135deg,#7c3aed,#a855f7);
  color:#fff;border-color:transparent;
}
button.demo:hover{background:linear-gradient(135deg,#6d28d9,#9333ea)}

/* ============ CHIP / BADGE ============ */
.chip{
  background:var(--soft);color:var(--brand);font-weight:700;
  padding:4px 12px;border-radius:99px;font-size:13px;
  border:1px solid var(--soft2);flex:none;
}
.badge{
  margin-left:auto;background:var(--brand);color:var(--on-brand);
  border-radius:99px;font-size:11px;padding:1px 7px;
  font-weight:700;min-width:20px;text-align:center;flex:none;
}

/* ============ PILL / STATUS ============ */
.pill{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 10px;border-radius:99px;font-size:12px;font-weight:700;color:#fff;
}
.pill::before{
  content:'';width:6px;height:6px;border-radius:50%;
  background:rgba(255,255,255,.7);flex:none;
}
.pill.live{background:var(--ok)}
.pill.live::before{animation:blink 1.2s infinite}
.pill.closed{background:var(--mute)}
@keyframes blink{0%,100%{opacity:.4;transform:scale(1)}50%{opacity:1;transform:scale(1.4)}}

.tag{
  display:inline-block;padding:2px 9px;border-radius:99px;
  font-size:12px;font-weight:600;background:var(--track);color:var(--ink);
}
.tag.ok{background:var(--soft);color:var(--brand)}
.tag.warn{background:#fef3c7;color:#92400e}
:root[data-theme=dark] .tag.warn{background:#3b2f0d;color:#fbbf24}

/* ============ FORM INPUTS ============ */
input,textarea,select{
  font:inherit;width:100%;
  padding:10px 13px;
  border:1px solid var(--line);border-radius:var(--r-sm);
  margin-bottom:10px;
  background:var(--surface);color:var(--ink);
  font-size:14px;outline:0;
  transition:border-color .14s,box-shadow .14s;
}
input:focus,textarea:focus,select:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 3px var(--soft);
}
::placeholder{color:var(--mute)}
textarea{resize:vertical;min-height:80px}
select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235f7169' fill='none' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}

.switch{display:flex;gap:8px;align-items:center;margin-bottom:12px;font-size:13px;color:var(--mute)}
.switch input{width:auto;margin:0;accent-color:var(--brand);flex:none}

/* ============ CARD ============ */
.card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:20px;
  margin-bottom:14px;box-shadow:var(--sh-sm);
}
.card>h2:first-child{margin-bottom:14px}
.card.flush{padding:0;overflow:hidden}

/* ============ ICONS ============ */
.ico{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;flex:none}
.ic{flex:none;display:block}

/* ============ TOAST ============ */
#toast{
  position:fixed;left:50%;bottom:28px;
  transform:translate(-50%,14px);
  background:var(--ink);color:var(--bg);
  padding:10px 20px;border-radius:99px;
  opacity:0;transition:opacity .22s,transform .22s;
  z-index:9999;pointer-events:none;
  font-size:13px;font-weight:600;box-shadow:var(--sh-lg);
  white-space:nowrap;
}
#toast.show{opacity:1;transform:translate(-50%,0)}

/* ============ HOME / LANDING ============ */
#startbar{min-height:100vh;display:flex;flex-direction:column}
#start{
  flex:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  text-align:center;padding:40px 20px 60px;
}
.hero-logo{width:68px;height:68px;margin-bottom:18px}
#start h1{font-size:28px;margin-bottom:8px}
#start p{max-width:360px;margin:0 auto 28px;color:var(--mute)}
.start-btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.start-btns button{min-width:160px;padding:13px 20px;font-size:15px;justify-content:center}

/* ============ TEACHER – SIDEBAR LAYOUT ============ */
.app{display:flex;min-height:100vh;position:relative}

/* hamburger (mobile) */
#menuToggle{
  display:none;
  width:36px;height:36px;padding:0;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-sm);color:var(--ink);
  justify-content:center;align-items:center;
  cursor:pointer;
}

/* sidebar overlay (mobile) */
.side-overlay{
  display:none;
  position:fixed;inset:0;background:rgba(0,0,0,.4);
  z-index:39;opacity:0;transition:opacity .25s;
}
.side-overlay.show{opacity:1}

/* sidebar */
.side{
  width:var(--sw);flex:none;
  background:var(--surface);border-right:1px solid var(--line);
  position:sticky;top:0;height:100vh;
  display:flex;flex-direction:column;
  overflow:hidden;
  transition:transform .25s cubic-bezier(.4,0,.2,1);
}
.side-top{
  padding:16px;border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;
}
.side nav{
  flex:1;overflow-y:auto;padding:8px;
}
.side nav button{
  display:flex;align-items:center;gap:10px;
  width:100%;text-align:left;
  background:none;color:var(--mute);border:none;
  padding:10px 12px;margin-bottom:2px;
  border-radius:var(--r-sm);
  font-size:14px;font-weight:500;
  transition:background .12s,color .12s;
}
.side nav button:hover{background:var(--bg);color:var(--ink)}
.side nav button.on{background:var(--soft);color:var(--brand);font-weight:700}
.side nav button .nav-icon{
  width:20px;flex:none;display:flex;justify-content:center;color:inherit;
}
.side nav button .badge{margin-left:auto}
.side-section{
  padding:8px 16px 4px;
  font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.07em;color:var(--mute);margin-top:4px;
}
.side-footer{
  padding:8px;border-top:1px solid var(--line);
}
.side-footer button{
  display:flex;align-items:center;gap:10px;
  width:100%;background:none;border:none;
  color:var(--mute);font-weight:500;font-size:13px;
  padding:9px 12px;border-radius:var(--r-sm);
}
.side-footer button:hover{background:#fef2f2;color:var(--bad)}

/* main content */
.main{flex:1;min-width:0;overflow-y:auto;min-height:100vh}
.pagehead{
  display:flex;justify-content:space-between;align-items:center;
  gap:10px;flex-wrap:wrap;
  padding:20px 24px 0;margin-bottom:20px;
}
.pagehead h1{font-size:20px}
.page-body{padding:0 24px 40px}

/* teacher mobile top bar */
.app-top{
  display:none;
  align-items:center;gap:10px;
  padding:0 16px;height:54px;
  background:var(--surface);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:29;
}
.app-top .brand{flex:1}

/* ============ STATS GRID ============ */
.stats{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:10px;margin-bottom:16px;
}
.stat{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:14px 16px;box-shadow:var(--sh-sm);
}
.stat-val{font-size:26px;font-weight:800;color:var(--ink);line-height:1;margin-bottom:3px}
.stat-val.sm{font-size:14px;font-weight:600}
.stat-label{font-size:12px;color:var(--mute);font-weight:500}
.meter{height:5px;background:var(--track);border-radius:99px;overflow:hidden;margin-top:7px}
.meter div{height:100%;background:var(--warn);border-radius:99px;transition:width .4s}

/* ============ JOIN CARD ============ */
.join-card{
  background:linear-gradient(135deg,#059669 0%,#0d9488 100%);
  border-radius:var(--r-lg);padding:22px 24px;color:#fff;
  margin-bottom:16px;
  display:flex;gap:28px;align-items:center;flex-wrap:wrap;
}
.join-card .jlabel{font-size:11px;font-weight:700;opacity:.75;text-transform:uppercase;letter-spacing:.07em;margin-bottom:5px}
.join-card .code{font-size:44px;font-weight:800;letter-spacing:10px;line-height:1;font-variant-numeric:tabular-nums}
.join-card .url{font-weight:700;font-size:14px;word-break:break-all;opacity:.9}
.join-divider{width:1px;background:rgba(255,255,255,.2);align-self:stretch;flex:none}

/* ============ QUICK ACTIONS ============ */
.quick-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.quick-actions button{
  flex:1;min-width:130px;
  padding:14px 12px;font-size:13px;
  flex-direction:column;gap:8px;
  border-radius:var(--r);
  background:var(--surface);color:var(--ink);border-color:var(--line);
}
.quick-actions button .ico{color:var(--brand);width:24px;height:24px}
.quick-actions button:hover{border-color:var(--brand);background:var(--soft);color:var(--brand)}
.quick-actions button .ico:hover{color:inherit}
.quick-actions button.primary{background:var(--brand);color:var(--on-brand);border-color:transparent}
.quick-actions button.primary .ico{color:inherit}
.quick-actions button.primary:hover{background:var(--brand-h)}

/* ============ QUESTION TYPES ============ */
.types{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:8px;margin-bottom:14px;
}
.types button{
  flex-direction:column;align-items:center;gap:5px;
  padding:13px 6px;font-size:12.5px;font-weight:500;
  border-radius:var(--r-sm);
  background:var(--surface);border-color:var(--line);color:var(--mute);
}
.types button .ico{color:var(--mute)}
.types button:hover{border-color:var(--brand);background:var(--soft);color:var(--brand)}
.types button:hover .ico{color:var(--brand)}
.types button.on{background:var(--soft);border-color:var(--brand);color:var(--brand);font-weight:700}
.types button.on .ico{color:var(--brand)}

/* ============ ANSWER OPTIONS ============ */
.opt{display:flex;gap:8px;align-items:center}
.opt input[type=radio]{width:auto;margin:0 0 10px;accent-color:var(--brand);flex:none}

/* ============ TIMER ============ */
.timer{
  display:inline-flex;align-items:center;gap:5px;
  font-weight:800;color:var(--warn);font-size:16px;flex:none;
}

/* ============ RESULTS / BARS ============ */
.bar-row{margin-bottom:12px}
.bar-label{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:5px;font-size:14px;font-weight:500;gap:8px;
}
.bar-label span{flex:1}
.track{background:var(--track);border-radius:99px;height:22px;overflow:hidden}
.fill{height:100%;background:var(--brand);border-radius:99px;transition:width .45s cubic-bezier(.2,.8,.2,1)}
.fill.right{background:var(--ok)}
.fill.wrong{background:var(--track)}

/* ============ WORD CLOUD ============ */
.cloud{
  display:flex;flex-wrap:wrap;gap:10px 18px;
  align-items:center;justify-content:center;
  min-height:130px;font-weight:700;padding:16px;
}
.cloud span{animation:pop .35s}
@keyframes pop{from{transform:scale(.3);opacity:0}}

/* ============ TEXT RESPONSES ============ */
.resp{
  display:flex;justify-content:space-between;gap:10px;
  padding:10px 14px;border:1px solid var(--line);
  border-radius:var(--r-sm);margin-bottom:8px;
  background:var(--bg);font-size:14px;
}
.resp small{color:var(--mute);flex:none}

/* ============ Q&A ITEMS ============ */
.qa{
  display:flex;gap:10px;align-items:flex-start;
  padding:12px 14px;border:1px solid var(--line);
  border-radius:var(--r-sm);margin-bottom:8px;
  background:var(--surface);
  transition:border-color .14s;
}
.qa:hover{border-color:var(--brand)}
.qa.done{opacity:.5}
.qa .t{flex:1;font-size:14px;line-height:1.5}
.qa .votes{
  font-weight:800;color:var(--brand);
  min-width:36px;display:flex;align-items:center;gap:4px;font-size:14px;
}

/* ============ LEADERBOARD ============ */
.lb{
  display:flex;justify-content:space-between;align-items:center;
  padding:11px 14px;border-radius:var(--r-sm);margin-bottom:6px;
  border:1px solid var(--line);font-size:14px;
}
.lb:first-child{background:linear-gradient(90deg,#fef3c7,var(--soft));border-color:#f59e0b}
.lb b{font-size:16px;font-weight:800;color:var(--brand)}
.who{display:flex;align-items:center;gap:10px}
.rank{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;
  background:var(--track);color:var(--ink);
  font-size:12px;font-weight:800;flex:none;
}
.rank.r1{background:#f2c94c;color:#4a3500}
.rank.r2{background:#c0cdd4;color:#2b3339}
.rank.r3{background:#d4956a;color:#4a2a0b}

/* ============ TABLE ============ */
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{padding:10px;border-bottom:1px solid var(--line);text-align:left}
th{color:var(--mute);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.05em;border-bottom-width:2px}
tr:last-child td{border-bottom:none}
tr:hover td{background:var(--bg)}

/* ============ QUEUE ITEMS ============ */
.qitem{
  display:flex;gap:8px;align-items:center;
  padding:10px 12px;border:1px solid var(--line);
  border-radius:var(--r-sm);margin-bottom:6px;
  font-size:14px;background:var(--surface);
}
.qitem span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qitem .ico{color:var(--mute);flex:none}

/* ============ DEMO BANNER ============ */
.demo-banner{
  background:linear-gradient(135deg,#7c3aed,#a855f7);
  color:#fff;border-radius:var(--r);padding:14px 18px;
  margin-bottom:16px;display:flex;align-items:center;gap:12px;
  font-size:14px;font-weight:500;
}
.demo-banner .ico{flex:none}
.demo-banner b{font-weight:700}

/* ============ STUDENT LAYOUT ============ */
.sw{max-width:520px;margin:0 auto;padding:16px 16px 88px}

/* bottom nav */
.nav{
  position:fixed;left:0;right:0;bottom:0;
  display:flex;
  background:var(--surface);border-top:1px solid var(--line);
  box-shadow:0 -2px 12px rgba(15,31,26,.08);
  z-index:30;
  padding-bottom:env(safe-area-inset-bottom,0);
}
.nav button{
  flex:1;border-radius:0;border:none;background:none;
  color:var(--mute);padding:10px 4px 12px;
  font-size:11px;font-weight:600;letter-spacing:.02em;
  flex-direction:column;align-items:center;gap:4px;
  transition:color .15s;
}
.nav button i{
  font-style:normal;display:flex;
  justify-content:center;align-items:center;
  width:22px;height:22px;
}
.nav button.on{color:var(--brand)}
.nav button.on i{position:relative}
.nav button.on i::after{
  content:'';position:absolute;top:-6px;left:50%;
  transform:translateX(-50%);
  width:22px;height:3px;background:var(--brand);
  border-radius:0 0 3px 3px;
}

/* student question card */
.qt-text{font-size:19px;font-weight:700;line-height:1.45;margin:0 0 16px}
.qcard-top{display:flex;align-items:center;gap:8px;margin-bottom:14px;flex-wrap:wrap}

/* answer choices */
.choice{
  display:flex;justify-content:space-between;align-items:center;
  width:100%;text-align:left;font-size:15px;
  padding:14px 16px;margin-bottom:10px;
  background:var(--surface);color:var(--ink);
  border:2px solid var(--line);border-radius:var(--r-sm);
  font-weight:500;gap:10px;
  transition:border-color .14s,background .14s;
}
.choice:hover:not(:disabled){border-color:var(--brand)}
.choice.sel{border-color:var(--brand);background:var(--soft);color:var(--brand);font-weight:700}
.choice.right{border-color:var(--ok);background:var(--soft);color:var(--ok)}
.choice.wrong{border-color:var(--bad);opacity:.65}

/* stars rating */
.stars{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.stars button{
  padding:10px 14px;background:var(--surface);color:var(--mute);
  border:1px solid var(--line);border-radius:var(--r-sm);gap:5px;font-size:14px;
}
.stars button.sel{background:var(--warn);color:#fff;border-color:var(--warn)}
.stars button.sel svg{fill:currentColor}

/* pace control */
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.seg button{
  padding:12px 4px;font-size:13px;
  flex-direction:column;align-items:center;gap:6px;
  border-radius:var(--r-sm);
}

/* reactions */
.reacts{display:flex;justify-content:space-around;gap:6px;flex-wrap:wrap}
.reacts button{
  padding:10px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-sm);
  flex-direction:column;align-items:center;gap:4px;
  flex:1;min-width:52px;font-size:11px;color:var(--mute);font-weight:600;
}
.reacts button:hover{border-color:var(--brand);background:var(--soft)}
.reacts button.on{background:var(--soft);border-color:var(--brand);color:var(--brand)}

/* confused button */
.confused-btn{
  width:100%;justify-content:center;
  padding:13px;font-size:15px;
  border-radius:var(--r);background:var(--surface);
  border:2px solid var(--line);color:var(--mute);font-weight:600;
  margin-top:10px;
}
.confused-btn:hover{border-color:var(--warn);color:var(--warn);background:#fffbeb}
.confused-btn.on{border-color:var(--warn);color:var(--warn);background:#fffbeb}

/* wait state */
.wait-card{text-align:center;padding:44px 24px}
.wait-card h2{font-size:19px;margin:14px 0 6px}

/* feedback message */
.fb-msg{
  font-size:13px;color:var(--mute);margin-top:10px;text-align:center;
  padding:8px 14px;background:var(--surface2);
  border-radius:var(--r-sm);border:1px solid var(--line);
}

/* ============ RESPONSIVE ============ */

/* Tablet */
@media(max-width:1000px){
  .stats{grid-template-columns:repeat(3,1fr)}
}

/* Mobile – teacher sidebar becomes slide-in drawer */
@media(max-width:768px){
  #menuToggle{display:inline-flex}
  .app-top{display:flex}
  .app{display:block}

  .side{
    position:fixed;top:0;left:0;bottom:0;z-index:40;
    transform:translateX(-100%);box-shadow:var(--sh-lg);
  }
  .side.open{transform:translateX(0)}
  .side-overlay{display:block;pointer-events:none}
  .side-overlay.show{pointer-events:auto}

  /* hide the static sidebar brand on mobile */
  .side-top .brand{font-size:16px}

  .pagehead{padding:14px 16px 0}
  .page-body{padding:0 16px 80px}
  .join-card{gap:16px;padding:18px}
  .join-card .code{font-size:36px;letter-spacing:6px}
  .types{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .quick-actions button{min-width:100%}
}

@media(max-width:480px){
  .stats{grid-template-columns:1fr 1fr}
  .types{grid-template-columns:repeat(2,1fr)}
  .join-card .code{font-size:30px;letter-spacing:4px}
  .row{flex-direction:column}
  .row>*{width:100%}
}

/* ============ TEACHER LOGIN / SESSION MANAGER / MISC (v4) ============ */
.auth{max-width:400px;width:100%;margin:0 auto;padding:44px 20px 60px;text-align:center}
.auth h1{font-size:26px;margin-bottom:8px}
.auth>p{margin:0 auto 22px}
.sess-wrap{max-width:640px;width:100%;margin:0 auto;padding:24px 16px 60px}
.flabel{display:block;font-size:12px;font-weight:600;color:var(--mute);margin-bottom:4px}
.err{margin-top:10px;text-align:center;color:var(--bad);font-size:13px;font-weight:600;min-height:1em}
.warn-note{background:#fef3c7;color:#92400e;border:1px solid #fcd34d;border-radius:var(--r-sm);padding:10px 14px;font-size:13px;margin-bottom:14px}
:root[data-theme=dark] .warn-note{background:#3b2f0d;color:#fbbf24;border-color:#5b4a14}
.sess-item{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.sess-item:last-child{border-bottom:none}
.sess-item .info{flex:1;min-width:0}
.sess-item .info b{display:block;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sess-item .info span{font-size:12.5px;color:var(--mute)}
.sess-item .scode{font-weight:800;letter-spacing:3px;color:var(--brand);font-variant-numeric:tabular-nums}
.sess-item .acts{display:flex;gap:6px;flex:none}
button.sm{padding:7px 12px;font-size:13px}
.side-sess{padding:0 18px 12px;display:flex;flex-direction:column;gap:2px;border-bottom:1px solid var(--line);margin-bottom:6px}
.side-sess b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-sess span{font-size:12px;color:var(--mute)}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--line);margin-right:8px}
.dot.on{background:var(--ok)}
.conn{background:#fef3c7;color:#92400e;border-radius:var(--r-sm);padding:8px 12px;font-size:13px;text-align:center;margin-bottom:10px;font-weight:600}
.sess-info{margin:4px 0 12px;font-weight:600}
@media(max-width:480px){.sess-item{flex-wrap:wrap}.sess-item .acts{width:100%}.sess-item .acts button{flex:1}}

/* QR code (join card + full-screen overlay) */
.qr-box{background:#fff;padding:8px;border-radius:10px;line-height:0;flex:none}
.qr-box svg{width:104px;height:104px;display:block}
.qr-overlay{position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:100;display:flex;align-items:center;justify-content:center;padding:16px}
.qr-overlay[hidden]{display:none}
.qr-modal{position:relative;background:var(--card,#fff);color:var(--text,#111);border-radius:16px;padding:32px 28px 24px;text-align:center;max-width:94vw;max-height:94vh;overflow:auto}
.qr-big{background:#fff;padding:14px;border-radius:12px;display:inline-block;line-height:0;margin-top:10px}
.qr-big svg{width:min(60vh,70vw,380px);height:min(60vh,70vw,380px);display:block}
.qr-code{font-size:46px;font-weight:800;letter-spacing:12px}
@media(max-width:700px){.qr-box{display:none}}

/* ---- v4.3 mobile polish ---- */
@media(max-width:768px){
  input,textarea,select{font-size:16px}              /* stops iOS Safari zooming the page on focus */
  .join-card{flex-wrap:wrap}
  .join-card .url{font-size:13px}
  .join-divider{display:none}
  button{min-height:44px}                              /* comfortable touch targets */
}
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tscroll table{min-width:620px}
body{overflow-x:hidden}