:root{--bg:#07080f;--bg2:#0d0f1a;--bg3:#111320;--surface:rgba(255,255,255,.04);--surface2:rgba(255,255,255,.07);--border:rgba(255,255,255,.08);--border2:rgba(255,255,255,.14);--sky:#7ee8fa;--mint:#56f0c0;--gold:#ffc94a;--red:#ef4444;--emerald:#10b981;--purple:#b06cff;--text:#f0f2ff;--muted:#8890b0;--faint:#454870;--r:12px;--rl:20px}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg);color:var(--text);font-family:'DM Sans',sans-serif;font-size:16px;line-height:1.7;min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.grid-bg{position:fixed;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(rgba(126,232,250,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(126,232,250,.025) 1px,transparent 1px);background-size:48px 48px}
nav{position:fixed;top:0;left:0;right:0;z-index:10;padding:0 24px;height:64px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);background:rgba(7,8,15,.95)}
.logo{text-decoration:none;display:flex;align-items:center}.logo img{height:34px;width:auto}.nav-right{display:flex;align-items:center;gap:16px}.ai-badge-nav{display:flex;align-items:center;gap:6px;background:rgba(126,232,250,.08);border:1px solid rgba(126,232,250,.2);border-radius:20px;padding:4px 12px;font-size:11px;color:var(--sky);font-weight:500;letter-spacing:.03em;text-shadow:none}.ai-dot{width:5px;height:5px;border-radius:50%;background:var(--mint);animation:pulse 2s infinite}@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}.home-link{font-size:13px;color:var(--muted);text-decoration:none}.home-link:hover{color:var(--text)}
.app-layout{position:relative;z-index:1;display:grid;grid-template-columns:260px minmax(0,1fr);min-height:calc(100vh - 64px);padding-top:64px}.sidebar{border-right:1px solid var(--border);background:var(--bg2);padding:24px 0;position:sticky;top:64px;height:calc(100vh - 64px);overflow-y:auto}.main-content{width:100%;max-width:1080px;margin:0 auto;padding:32px}
.module-header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:22px}.module-header h1{font-family:'Manrope',sans-serif;font-size:34px;line-height:1.08;font-weight:800;letter-spacing:0;margin-bottom:6px}.module-header p{font-size:15px;color:var(--muted)}.header-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.mode-grid,.stats-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:22px}.mode-card,.panel,.class-card,.joined-card,.empty-state,.stat-card,.tab-panel,.assignment-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--rl);box-shadow:0 16px 44px rgba(0,0,0,.18)}
.mode-card{min-height:156px;padding:22px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;cursor:pointer;text-align:center;transition:border-color .16s,background .16s}.mode-card:hover{background:var(--bg3)}.mode-card.teacher{border-color:rgba(176,108,255,.28)}.mode-card.student{border-color:rgba(86,240,192,.28)}.mode-icon{width:54px;height:54px;border-radius:999px;display:grid;place-items:center;font-size:24px}.teacher .mode-icon{background:rgba(176,108,255,.15);color:var(--purple)}.student .mode-icon{background:rgba(86,240,192,.14);color:var(--mint)}.mode-title{font-family:'Manrope',sans-serif;font-size:16px;font-weight:700}.teacher .mode-title{color:#c6a6ff}.student .mode-title{color:var(--mint)}.mode-desc{font-size:12px;color:var(--muted);line-height:1.45}
.mode-banner{display:flex;align-items:center;gap:10px;margin-bottom:16px}.mode-label{font-family:'DM Sans',sans-serif;font-size:12px;font-weight:500;letter-spacing:.035em;text-transform:uppercase;text-shadow:none;-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision}.mode-label.teacher{color:#d1b8ff}.mode-label.student{color:var(--mint)}.spacer{flex:1}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 16px;border-radius:12px;border:1px solid var(--border2);background:var(--surface);color:var(--text);font-family:'Manrope',sans-serif;font-size:13px;font-weight:600;text-decoration:none;cursor:pointer;transition:background .16s,border-color .16s;text-shadow:none}.btn:hover{background:var(--surface2)}.btn.primary{background:rgba(126,232,250,.14);border-color:rgba(126,232,250,.34);color:var(--sky)}.btn.teacher{background:rgba(176,108,255,.12);border-color:rgba(176,108,255,.36);color:#c6a6ff}.btn.student{background:rgba(86,240,192,.12);border-color:rgba(86,240,192,.34);color:var(--mint)}.btn.gold{background:rgba(255,201,74,.12);border-color:rgba(255,201,74,.34);color:var(--gold)}.btn.danger{background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.28);color:#ff9a9a}.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
.section-title{display:flex;align-items:center;gap:10px;margin:18px 0 10px;font-size:12px;font-weight:500;letter-spacing:.065em;text-transform:uppercase;color:var(--muted);text-shadow:none;-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision}.class-card{display:flex;align-items:center;gap:14px;min-height:76px;padding:14px;margin-bottom:10px;text-decoration:none;color:var(--text);border-color:rgba(126,232,250,.18);transition:background .16s,border-color .16s}.class-card:hover{background:var(--bg3);border-color:rgba(126,232,250,.34)}.class-icon{width:48px;height:48px;border-radius:12px;background:rgba(126,232,250,.1);display:grid;place-items:center;font-size:22px;flex:0 0 auto}.class-main{flex:1;min-width:0}.class-name{font-family:'Manrope',sans-serif;font-size:15px;font-weight:600;color:var(--sky);text-shadow:none;-webkit-font-smoothing:antialiased}.class-meta{font-size:12px;color:var(--muted);margin-top:1px}.code-pill{display:inline-flex;align-items:center;margin-top:5px;padding:2px 8px;border-radius:7px;background:rgba(126,232,250,.1);border:1px solid rgba(126,232,250,.2);font-family:'DM Mono',monospace;font-size:11px;font-weight:400;letter-spacing:.12em;color:var(--sky)}.arrow{font-size:24px;color:var(--faint)}
.empty-state{padding:34px 22px;text-align:center;color:var(--muted)}.empty-icon{font-size:38px;margin-bottom:10px}.empty-state strong{display:block;color:var(--text);font-family:'Manrope',sans-serif;font-size:16px;margin-bottom:4px}.hint-card{background:rgba(126,232,250,.06);border:1px solid rgba(126,232,250,.16);border-radius:14px;padding:14px 16px;color:var(--muted);font-size:13px;line-height:1.55}
.joined-card{padding:18px;border-color:rgba(86,240,192,.24);margin-bottom:14px}.joined-top{display:flex;align-items:center;gap:14px;margin-bottom:14px}.joined-icon{width:54px;height:54px;border-radius:999px;background:rgba(86,240,192,.14);display:grid;place-items:center;font-size:24px}.joined-title{font-family:'Manrope',sans-serif;font-size:18px;font-weight:800;color:var(--mint)}.joined-actions{display:flex;gap:10px;flex-wrap:wrap}
.modal-backdrop{position:fixed;inset:0;z-index:80;display:none;align-items:flex-end;justify-content:center;background:rgba(0,0,0,.62)}.modal-backdrop.show{display:flex}.modal-panel{width:min(560px,100%);background:var(--bg2);border:1px solid var(--border);border-radius:24px 24px 0 0;padding:24px 24px 36px;box-shadow:0 -24px 70px rgba(0,0,0,.42)}.modal-head{display:flex;align-items:center;gap:12px;margin-bottom:18px}.modal-title{flex:1;font-family:'Manrope',sans-serif;font-size:20px;font-weight:800}.close-btn{width:40px;height:40px;border-radius:12px;border:1px solid var(--border2);background:var(--surface);color:var(--muted);font-size:20px;cursor:pointer}.field-label{display:block;margin:12px 0 6px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}.input{width:100%;border:1px solid var(--border2);border-radius:12px;background:var(--bg3);color:var(--text);padding:13px 14px;font:500 15px 'DM Sans',sans-serif;outline:none}.input:focus{border-color:rgba(126,232,250,.5)}.input-help{margin-top:8px;color:var(--muted);font-size:12px;line-height:1.45}.class-category-pill{display:inline-flex;align-items:center;min-height:20px;padding:1px 8px;border-radius:999px;background:rgba(86,240,192,.1);border:1px solid rgba(86,240,192,.24);color:var(--mint);font-family:'Manrope',sans-serif;font-size:10px;font-weight:700;letter-spacing:.02em;text-shadow:none}.code-input{text-transform:uppercase;text-align:center;font:800 24px 'DM Mono',monospace;letter-spacing:.18em;color:var(--mint)}
.toast{position:fixed;left:50%;bottom:24px;z-index:100;transform:translateX(-50%) translateY(20px);opacity:0;pointer-events:none;max-width:min(520px,calc(100% - 32px));padding:12px 16px;border-radius:14px;background:rgba(13,15,26,.96);border:1px solid rgba(126,232,250,.24);color:var(--text);box-shadow:0 18px 54px rgba(0,0,0,.34);transition:opacity .2s,transform .2s}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.stats-grid{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));margin-bottom:16px}.stat-card{padding:14px;text-align:center}.stat-icon{font-size:18px}.stat-value{font-family:'Manrope',sans-serif;font-size:22px;font-weight:800;margin-top:2px}.stat-label{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.class-header{display:flex;align-items:flex-start;gap:16px;margin-bottom:18px}.class-header-main{flex:1}.class-code-box{min-width:116px;text-align:center;background:rgba(126,232,250,.08);border:1px solid rgba(126,232,250,.22);border-radius:14px;padding:9px 12px}.class-code-label{font-size:10px;color:var(--muted);letter-spacing:.12em;text-transform:uppercase}.class-code-value{font-family:'DM Mono',monospace;font-size:22px;font-weight:800;letter-spacing:.14em;color:var(--sky)}
.tabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:8px;margin-bottom:14px}.tab-btn{white-space:nowrap;border:1px solid var(--border2);background:var(--surface);color:var(--muted);border-radius:12px;padding:9px 14px;font-family:'Manrope',sans-serif;font-size:13px;font-weight:600;cursor:pointer}.tab-btn.active{background:rgba(126,232,250,.12);border-color:rgba(126,232,250,.36);color:var(--sky)}.tab-panel{overflow:hidden}.row{display:flex;align-items:center;gap:12px;padding:13px 14px;border-bottom:1px solid rgba(255,255,255,.06)}.row:last-child{border-bottom:0}.rank{width:34px;text-align:center;font-weight:800;color:var(--muted)}.row-main{flex:1;min-width:0}.row-title{font-weight:700;color:var(--text)}.row-meta{font-size:12px;color:var(--muted)}.score{font-family:'Manrope',sans-serif;font-size:18px;font-weight:800}.xp{color:var(--gold)}.avg-good{color:var(--mint)}.avg-mid{color:var(--gold)}.avg-low{color:#ff8f8f}
.weak-row{padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.06)}.weak-row:last-child{border-bottom:0}.weak-top{display:flex;align-items:center;gap:10px;margin-bottom:7px}.weak-rank{width:24px;height:24px;border-radius:999px;display:grid;place-items:center;font-size:10px;font-weight:800}.weak-name{flex:1;font-weight:700}.weak-count{font-size:11px;font-weight:700}.bar-track{height:5px;border-radius:999px;background:rgba(255,255,255,.07);overflow:hidden;margin-left:34px}.bar-fill{height:100%;border-radius:999px}
.assignment-toolbar{display:flex;justify-content:flex-end;margin-bottom:12px}.assignment-card{padding:14px;margin-bottom:10px;border-color:rgba(255,201,74,.2)}.assignment-top{display:flex;align-items:center;gap:12px}.assignment-icon{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:rgba(255,201,74,.12);font-size:18px}.type-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:8px 0 16px}.type-option{min-height:74px;border:1px solid var(--border2);border-radius:12px;background:var(--bg3);color:var(--muted);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;font:700 11px 'Manrope',sans-serif}.type-option.active{border-color:rgba(255,201,74,.45);background:rgba(255,201,74,.11);color:var(--gold)}
.hidden{display:none!important}
@media(max-width:860px){.app-layout{display:block}.sidebar{display:none}.main-content{padding:22px 16px}.module-header,.class-header{display:block}.header-actions{justify-content:flex-start;margin-top:12px}.mode-grid,.stats-grid{grid-template-columns:1fr}.class-code-box{display:inline-block;margin-top:12px}.type-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

body[data-page="classroom"] .btn,
body[data-page="classroom"] .class-card,
body[data-page="classroom"] .mode-card,
body[data-page="classroom"] .class-open-pill,
body[data-page="classroom"] a,
body[data-page="classroom"] button,
body[data-page="classroom"] [role="button"],
body[data-page="classroom-detail"] .btn,
body[data-page="classroom-detail"] .class-card,
body[data-page="classroom-detail"] .mode-card,
body[data-page="classroom-detail"] .class-open-pill,
body[data-page="classroom-detail"] a,
body[data-page="classroom-detail"] button,
body[data-page="classroom-detail"] [role="button"]{
  transform:none!important;
  transition:none!important;
  animation:none!important;
  will-change:auto!important;
  translate:none!important;
  scale:none!important;
  rotate:none!important;
}
body[data-page="classroom"] .btn:hover,
body[data-page="classroom"] .class-card:hover,
body[data-page="classroom"] .mode-card:hover,
body[data-page="classroom"] .class-open-pill:hover,
body[data-page="classroom"] a:hover,
body[data-page="classroom"] button:hover,
body[data-page="classroom"] [role="button"]:hover,
body[data-page="classroom-detail"] .btn:hover,
body[data-page="classroom-detail"] .class-card:hover,
body[data-page="classroom-detail"] .mode-card:hover,
body[data-page="classroom-detail"] .class-open-pill:hover,
body[data-page="classroom-detail"] a:hover,
body[data-page="classroom-detail"] button:hover,
body[data-page="classroom-detail"] [role="button"]:hover{
  transform:none!important;
  translate:none!important;
  scale:none!important;
  rotate:none!important;
}
body[data-page="classroom"] .pp-sidebar-toggle,
body[data-page="classroom-detail"] .pp-sidebar-toggle{
  transform:none!important;
  transition:background .16s,border-color .16s!important;
}
body[data-page="classroom"] .pp-sidebar-toggle::after,
body[data-page="classroom-detail"] .pp-sidebar-toggle::after{
  transform:translateY(-50%) translateX(0)!important;
  transition:opacity .16s!important;
}
.class-open-pill,
.class-card-action{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:0 14px;
  border:1px solid rgba(126,232,250,.34);
  border-radius:999px;
  background:rgba(126,232,250,.1);
  color:var(--sky);
  font-family:'Manrope',sans-serif;
  font-size:12px;
  font-weight:600;
  white-space:nowrap;
  text-shadow:none;
  -webkit-font-smoothing:antialiased;
  text-decoration:none;
  position:relative;
  z-index:1;
  cursor:pointer;
  pointer-events:auto;
}
.classroom-dashboard-card{
  position:relative;
  cursor:default;
  transition:none;
}
.classroom-dashboard-card:hover,
.classroom-dashboard-card:focus-within{
  background:var(--bg2);
  border-color:rgba(126,232,250,.18);
}
.class-card-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex:0 0 auto;
  margin-left:auto;
  position:relative;
  z-index:12;
}
.class-card-action:hover,
.class-card-action:focus-visible{
  background:rgba(126,232,250,.18);
  border-color:rgba(126,232,250,.5);
  outline:none;
}
.class-card-action:focus-visible,
.class-manage-btn:focus-visible{
  outline:2px solid rgba(126,232,250,.7);
  outline-offset:3px;
}
.class-code-row{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:6px;
  flex-wrap:wrap;
}
.code-label{
  display:inline-block;
  font-family:'DM Mono',monospace;
  font-size:11px;
  font-weight:500;
  letter-spacing:.18em;
  color:var(--muted);
  text-transform:uppercase;
  padding:0;
  border:0;
  background:none;
}
.code-label[data-copy-code]{
  cursor:copy;
  position:relative;
  z-index:4;
  transition:color .15s;
}
.code-label[data-copy-code]:hover,
.code-label[data-copy-code]:focus-visible{
  color:var(--sky);
  outline:none;
}
.code-copy-btn{
  display:inline-flex;
  align-items:center;
  gap:5px;
  min-height:38px;
  padding:0 14px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:999px;
  background:rgba(255,255,255,.03);
  color:var(--muted);
  font-family:'Manrope',sans-serif;
  font-size:11px;
  font-weight:500;
  cursor:pointer;
  position:relative;
  z-index:4;
  transition:background .15s,border-color .15s,color .15s;
  pointer-events:auto;
}
.code-copy-btn:hover,
.code-copy-btn:focus-visible{
  background:rgba(126,232,250,.1);
  border-color:rgba(126,232,250,.32);
  color:var(--sky);
  outline:none;
}
.code-copy-icon{font-size:11px;line-height:1}
.code-copy-label{font-size:11px;line-height:1}
@media (max-width:480px){
  .code-copy-label{display:none}
  .code-copy-btn{padding:4px 7px}
}
.class-card-wrap{
  position:relative;
  margin-bottom:10px;
  z-index:1;
}
.class-card-wrap.menu-open{z-index:80}
.class-card-wrap .class-card{margin-bottom:0}
.class-card-wrap.is-archived .class-card{opacity:.7}
.class-manage{
  position:relative;
  z-index:20;
  flex:0 0 auto;
}
.class-manage-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(13,15,26,.65);
  color:var(--muted);
  font-size:18px;
  line-height:1;
  cursor:pointer;
  transition:background .15s,border-color .15s,color .15s;
  pointer-events:auto;
}
.class-manage-btn:hover,
.class-manage-btn:focus-visible,
.class-manage-btn[aria-expanded="true"]{
  background:rgba(126,232,250,.12);
  border-color:rgba(126,232,250,.34);
  color:var(--sky);
  outline:none;
}
.class-manage-menu{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  min-width:170px;
  background:var(--bg2);
  border:1px solid var(--border2);
  border-radius:12px;
  box-shadow:0 14px 36px rgba(0,0,0,.42);
  padding:6px;
  display:flex;
  flex-direction:column;
  gap:2px;
  z-index:120;
}
.class-manage-menu[hidden]{display:none}
.class-manage-menu button{
  appearance:none;
  text-align:left;
  border:0;
  background:transparent;
  color:var(--text);
  font-family:'Manrope',sans-serif;
  font-size:13px;
  font-weight:600;
  padding:9px 12px;
  border-radius:8px;
  cursor:pointer;
}
.class-manage-menu button:hover,
.class-manage-menu button:focus-visible{
  background:var(--bg3);
  outline:none;
}
.class-manage-menu button.danger{color:#ff9a9a}
.class-manage-menu button.danger:hover,
.class-manage-menu button.danger:focus-visible{
  background:rgba(239,68,68,.1);
}
@media (max-width:680px){
  .class-card{
    align-items:flex-start;
    flex-wrap:wrap;
  }
  .class-card-actions{
    width:100%;
    justify-content:flex-start;
    margin-left:62px;
  }
}
.archived-badge{
  display:inline-block;
  margin-left:8px;
  padding:1px 7px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  color:var(--muted);
  font-family:'Manrope',sans-serif;
  font-size:9px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  vertical-align:middle;
}
.archived-section{
  margin-top:18px;
  border-top:1px dashed rgba(255,255,255,.08);
  padding-top:14px;
}
.archived-section > summary{
  cursor:pointer;
  font-family:'Manrope',sans-serif;
  font-size:12px;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--muted);
  list-style:none;
  padding:6px 0;
  user-select:none;
}
.archived-section > summary::-webkit-details-marker{display:none}
.archived-section > summary::before{
  content:'▸ ';
  display:inline-block;
  margin-right:6px;
  transition:transform .15s;
}
.archived-section[open] > summary::before{transform:rotate(90deg)}
.archived-section:hover > summary{color:var(--text)}
.archived-list{margin-top:8px}