/* V13: shared surfaces, readable forms, restrained classroom workspace. */
:root {
  --page:#f5f7fa; --ink:#172233; --muted:#617085; --line:#dce2ea; --line-strong:#b6c3d3;
  --panel:#fff; --panel-deep:#edf1f6; --button:#fff; --focus:#2870bd;
  --surface:#fff; --surface-2:#f5f7fa; --surface-3:#edf1f6; --surface-4:#e4ebf3; --field:#fff;
  --hover:#eaf1fa; --text:#172233; --text-soft:#617085; --border:#dce2ea; --border-strong:#b6c3d3;
  --accent:#6a38c2; --accent-2:#5827ae; --accent-soft:#f0eafa;
}
:root[data-theme=dark] {
  --page:#1c1032; --ink:#faf6ff; --muted:#c2afd8; --line:#49315f; --line-strong:#72518f;
  --panel:#2b1946; --panel-deep:#392254; --button:#392254; --focus:#c4a0ff;
  --surface:#2b1946; --surface-2:#25153d; --surface-3:#392254; --surface-4:#482b69; --field:#211236;
  --hover:#4b2c70; --text:#faf6ff; --text-soft:#c2afd8; --border:#49315f; --border-strong:#72518f;
  --accent:#c4a0ff; --accent-2:#e2caff; --accent-soft:#482871;
  --success:#97dfb4; --success-soft:#17372a; --danger:#ffacb2; --danger-soft:#3b232c;
  --good:#97dfb4; --good-bg:#17372a; --bad:#ffacb2; --bad-bg:#3b232c;
}
html,body { background:var(--page)!important; color:var(--text); }
body { font-family:Inter,Segoe UI,Arial,sans-serif; line-height:1.5; }
* { scrollbar-width:thin; scrollbar-color:var(--border-strong) transparent; }
*::-webkit-scrollbar { width:8px; height:8px; }
*::-webkit-scrollbar-thumb { background:var(--border-strong); border:2px solid var(--surface); border-radius:9px; }
button,input,textarea,select { font:inherit; }
input:not([type=radio]):not([type=checkbox]),textarea,select {
  background:var(--field)!important; color:var(--text)!important; border:1px solid var(--border-strong)!important;
  border-radius:7px; padding:10px 12px; min-width:0; max-width:100%; caret-color:var(--accent); box-shadow:none;
}
input::placeholder,textarea::placeholder { color:var(--text-soft)!important; opacity:.8; }
input[type=checkbox],input[type=radio] { accent-color:var(--accent); }
option { background:var(--field)!important; color:var(--text)!important; }
:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
.page-shell { width:min(1100px,calc(100% - 40px)); margin:24px auto; }
.topbar,body.classroom-mode .topbar { background:var(--surface)!important; border:0; border-bottom:1px solid var(--border); padding:12px 0; box-shadow:none; min-height:62px; }
.top-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.brand { font-size:23px; letter-spacing:-1px; }
.theme-toggle { display:inline-flex!important; align-items:center; justify-content:center; gap:7px; text-decoration:none!important; }
.theme-icon { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; font-size:18px; line-height:1; transform:none; }
.button,.top-button,.history-button,.settings-toggle,.icon-button,.close-button,.upload-button {
  background:var(--button)!important; color:var(--text)!important; border:1px solid var(--border)!important;
  border-radius:7px; box-shadow:none!important; min-height:38px; padding:8px 12px;
}
.button:hover,.top-button:hover,.history-button:hover,.icon-button:hover { background:var(--hover)!important; }
.button.primary { background:var(--accent-soft)!important; color:var(--accent-2)!important; border-color:var(--accent)!important; font-weight:700; }
.masthead,:root[data-theme=dark] .masthead { background:transparent!important; border:0!important; box-shadow:none!important; padding:32px 0 18px; text-align:left; }
.masthead h1 { font-size:clamp(36px,6vw,64px); letter-spacing:-2px; }
.mode-grid { gap:16px; }
.mode-card,.entry-card,.classroom-role-card { background:var(--surface)!important; color:var(--text)!important; border:1px solid var(--border)!important; border-radius:12px; padding:24px; }
.mode-card:hover,.entry-card:hover { transform:translateY(-3px); background:var(--hover)!important; }
.quiz-pane,.library-block,.control-panel,.question-wrap,.history-shell,.test-card,.host-question-card,.game-stage,.builder-pane { background:var(--surface)!important; border-color:var(--border)!important; border-radius:10px; color:var(--text); }
.question-meta,.builder-head,.builder-sidebar,.builder-count,.media-preview,.stat-card,.stats-row.header,.host-set-summary,.mode-help,.room-code-wrap,.popcorn-device-card { background:var(--surface-3)!important; color:var(--text)!important; border-color:var(--border)!important; }
.builder-editor,.builder-question-item,.my-quiz-row,.tf-option,.answer,.player-row,.leader-row,.host-typed-answer,.podium-card,.chest-grid button { background:var(--surface)!important; color:var(--text)!important; border-color:var(--border)!important; }
.builder-title-row label,.editor-top-grid label,.editor-question-label,.answer-editor-head,.type-editor label,.builder-head span,.pane-head span { color:var(--text-soft)!important; }
.builder-question-item.active { background:var(--accent-soft)!important; box-shadow:inset 3px 0 var(--accent); }
.builder-question-item>span,.builder-answer-row>span,.host-option>span,.player-answer>span,.podium-card>span { background:var(--surface-3)!important; color:var(--text)!important; border-color:var(--border)!important; }
.builder-layout { grid-template-columns:240px minmax(0,1fr); }
.builder-list { max-height:none; overflow:visible; }
.builder-editor { padding:24px; }
.builder-editor label,.builder-title-row label { font-size:13px; }
.builder-question-item strong { font-size:13px; }
.builder-question-item small,.builder-head span { font-size:11px; }
.host-option strong { font-size:18px; }
.player-answer strong { font-size:24px; }
.text-button.danger,.danger-button { color:var(--danger)!important; }
.builder-answer-row input:not([type=radio]) { width:100%; }
.answer.correct,.host-option.correct { background:var(--success-soft)!important; color:var(--success)!important; }
.answer.incorrect { background:var(--danger-soft)!important; color:var(--danger)!important; }
.host-option,.player-answer { background:var(--surface-3)!important; color:var(--text)!important; border-color:var(--border-strong)!important; border-radius:10px; }
.player-answer { min-height:130px; font-size:24px; border-bottom-width:5px!important; }
.player-answer.option-0,.host-option.option-0 { border-bottom-color:#e6657f!important; }
.player-answer.option-1,.host-option.option-1 { border-bottom-color:#5d9ee8!important; }
.player-answer.option-2,.host-option.option-2 { border-bottom-color:#e8b855!important; }
.player-answer.option-3,.host-option.option-3 { border-bottom-color:#57b995!important; }
.player-answer.selected { background:var(--accent-soft)!important; outline:2px solid var(--accent); }
.player-answer:disabled { opacity:.75; }
.player-answer>span { width:54px; height:54px; flex-basis:54px; font-size:28px; }
.teacher-dashboard { min-height:calc(100dvh - 220px); border-radius:12px; }
.class-hero,.student-class-hero { background-color:#512da1; background-image:linear-gradient(110deg,#512da1,#754ac0); background-position:center; background-size:cover; min-height:190px; padding:24px; color:#fff; border-radius:12px; }
.class-hero .workspace-kicker,.student-class-hero .workspace-kicker,.class-hero p,.student-class-hero p,.student-points span { color:#d5e2f7; }
.class-tabs button.active { color:var(--accent); border-bottom-color:var(--accent); }
.class-card,.joined-class-card,.overview-stat,.stream-card,.student-panel,.student-assignment-card,.assignment-row,.settings-card,.empty-classroom,.leaderboard-card { background:var(--surface)!important; color:var(--text)!important; border-color:var(--border)!important; }
.class-card { border-radius:10px; }
.class-card-banner { background:var(--surface-4); }
.roster-avatar,.student-identity>span { overflow:hidden; }
.profile-photo { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.student-identity>span { width:40px; height:40px; flex:0 0 40px; display:grid; place-items:center; border-radius:50%; background:var(--accent-soft); font-size:14px; }
.profile-upload { display:flex; align-items:center; gap:16px; }
.profile-upload-preview { width:64px; height:64px; display:grid; place-items:center; border-radius:50%; background:var(--accent-soft); overflow:hidden; font-size:24px; }
.assignment-group-title { display:flex; justify-content:space-between; margin:20px 0 8px; color:var(--text-soft); font-size:12px; text-transform:uppercase; letter-spacing:.09em; }
.assignment-review { display:grid; gap:12px; margin-top:24px; text-align:left; }
.review-item { padding:16px; border:1px solid var(--border); border-left:4px solid var(--danger); border-radius:8px; background:var(--surface-2); }
.review-item.correct { border-left-color:var(--success); }
.review-item h4 { margin:4px 0 12px; }
.review-item p { margin:5px 0; }
.review-item .correct-answer { color:var(--success); }
.review-item img { max-width:100%; max-height:180px; }
.app-dialog { border-radius:12px; max-height:90dvh; overflow:hidden; }
.dialog-body { overscroll-behavior:contain; }
.template-list { max-height:none; overflow:visible; }
.chat-shell { display:grid; gap:16px; }
.chat-messages { display:grid; gap:12px; max-height:540px; overflow:auto; padding:4px; }
.chat-message { padding:16px; background:var(--surface-2); border:1px solid var(--border); border-radius:10px; }
.chat-message header { display:flex; gap:10px; align-items:center; margin-bottom:8px; }
.chat-message time { color:var(--text-soft); margin-left:auto; font-size:11px; }
.chat-message p { white-space:pre-wrap; overflow-wrap:anywhere; margin:8px 0; }
.chat-composer { display:grid; gap:10px; padding:16px; background:var(--surface-2); border-radius:10px; }
.chat-composer textarea { width:100%; resize:vertical; min-height:80px; }
.chat-tools { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.chat-poll-options { display:grid; gap:6px; }
.poll-option { display:flex; justify-content:space-between; gap:8px; width:100%; border:1px solid var(--border); background:var(--surface); color:var(--text); border-radius:6px; padding:10px; cursor:pointer; text-align:left; }
.poll-option.selected { border-color:var(--accent); background:var(--accent-soft); }
.chat-attachment { display:grid; gap:8px; margin-top:10px; }
.chat-attachment img,.chat-attachment video { max-width:100%; width:auto; max-height:320px; border-radius:8px; }
.chat-attachment a { color:var(--accent); overflow-wrap:anywhere; }
.chat-status { color:var(--text-soft); font-size:12px; }
.bank-editor { display:grid; gap:16px; }
.bank-editor label { display:grid; gap:6px; }
.bank-editor textarea { width:100%; }
.bank-list { display:grid; gap:6px; max-height:230px; overflow:auto; }
.bank-list button { text-align:left; }
.live-countdown { position:absolute; inset:0; z-index:10; background:var(--surface); display:grid; place-content:center; text-align:center; gap:8px; }
.live-countdown strong { font-size:100px; line-height:1; animation:count-in .35s ease both; }
#hostGame { position:relative; }
.player-countdown { font-size:70px; min-height:230px; display:grid; place-content:center; }
.word-grid { display:grid; grid-template-columns:repeat(16,minmax(0,1fr)); gap:2px; max-width:560px; touch-action:none; user-select:none; }
.word-cell { padding:0; min-height:28px; aspect-ratio:1; border:0; border-radius:4px; background:var(--surface-3); color:var(--text); cursor:pointer; font-size:13px; }
.word-cell.found { background:var(--success-soft); color:var(--success); }
.word-cell.selecting { background:var(--accent-soft); outline:1px solid var(--accent); }
.word-list { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
.word-list .found { text-decoration:line-through; color:var(--success); }
.worksheet-document { width:100%; min-height:420px; border:1px solid var(--border); background:var(--surface-2); }
.quick-filters { display:flex; gap:12px; padding:12px 0; flex-wrap:wrap; }
.quick-filters label { display:grid; gap:4px; font-size:12px; color:var(--text-soft); }
.top-button { text-decoration:none; }
.game-menu { display:grid; gap:14px; max-width:420px; margin:auto; }
.game-menu label { display:grid; gap:6px; }
.game-resume-list { display:grid; gap:8px; margin-top:20px; }
.mini-game { max-width:480px; margin:auto; display:grid; gap:20px; text-align:center; }
.mini-game-status { font-size:24px; font-weight:700; }
.ttt-board { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; min-width:0; }
.ttt-cell { min-width:0; width:100%; padding:0; aspect-ratio:1; border:1px solid var(--border-strong); border-radius:12px; background:var(--surface-3); font-size:clamp(35px,8vw,70px); font-weight:700; cursor:pointer; }
.ttt-cell.one { color:var(--accent); }.ttt-cell.two { color:#e8b855; }
.ttt-cell:disabled { cursor:default; }
.connect-board,.connect-controls { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:7px; }
.connect-board { background:var(--accent-soft); padding:12px; border-radius:12px; }
.connect-controls .button { padding:5px; }
.connect-disc { aspect-ratio:1; border-radius:50%; background:var(--field); border:1px solid var(--border); }
.connect-disc.one { background:#6da5ee; }.connect-disc.two { background:#e8b855; }
.memory-board { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.memory-cell { min-width:0; padding:0; aspect-ratio:1; border:1px solid var(--border-strong); background:var(--surface-3); color:var(--text); border-radius:10px; font-size:32px; cursor:pointer; }
.memory-cell.matched { background:var(--success-soft); color:var(--success); }
.game-invite-cards { position:fixed; inset:auto 20px 20px auto; margin:0; padding:0; border:0; background:transparent; color:var(--text); gap:10px; z-index:100; max-width:calc(100vw - 40px); }
.game-invite-cards:popover-open { display:grid; }
.game-invite-card { display:grid; gap:8px; padding:18px; background:var(--surface); color:var(--text); border:1px solid var(--accent); border-radius:12px; box-shadow:var(--shadow-elevated); animation:count-in .2s ease both; }
.builder-question-item { cursor:grab; grid-template-columns:28px minmax(0,1fr) 14px; touch-action:none; }
.builder-question-item::after { content:'⠿'; font-size:20px; color:var(--text-soft); }
.builder-question-item.dragging { opacity:.45; cursor:grabbing; }
.builder-question-item.drag-over { outline:2px solid var(--accent); outline-offset:2px; }
.player-answer.option-0,.host-option.option-0 { background:#a91c36!important; color:#fff!important; border-color:#dc3555!important; }
.player-answer.option-1,.host-option.option-1 { background:#135aa4!important; color:#fff!important; border-color:#3387d8!important; }
.player-answer.option-2,.host-option.option-2 { background:#805900!important; color:#fff!important; border-color:#ca9c22!important; }
.player-answer.option-3,.host-option.option-3 { background:#226342!important; color:#fff!important; border-color:#45a477!important; }
.player-answer>span,.host-option>span { background:rgba(0,0,0,.18)!important; color:#fff!important; border:0!important; }
.host-option.correct { outline:3px solid #b6efba; outline-offset:2px; }
.library-head,.question-meta,.popcorn-turn,.popcorn-answer,.game-top,.player-game-head { background:var(--surface-3)!important; color:var(--text)!important; border-color:var(--border)!important; }
.question-count,.scoreline,.setup-grid label,.settings-head,.type-editor label,.builder-count span,.popcorn-turn-label,.popcorn-student-label { color:var(--text-soft)!important; }
.media-preview img { background:var(--surface-2); }
.host-timer-track { background:var(--surface-4)!important; }
.host-timer-fill { background:var(--accent)!important; }
.host-timer-fill.low { background:var(--danger)!important; }
.popcorn-grade-button.correct { background:var(--success-soft)!important; color:var(--success)!important; }
.popcorn-grade-button.wrong { background:var(--danger-soft)!important; color:var(--danger)!important; }
.popcorn-grade-button.pass { background:var(--surface-3)!important; color:var(--text)!important; }
.popcorn-device-card.is-selected { background:var(--accent-soft)!important; }
.popcorn-device-card.is-pass { background:var(--surface-3)!important; }
.gold-result { background:var(--surface-4); color:var(--text); }
@keyframes count-in { from { opacity:.3; transform:scale(.8); } to { opacity:1; transform:scale(1); } }
@media(max-width:700px) {
  .page-shell { width:calc(100% - 24px); margin:8px auto; }
  .topbar { align-items:flex-start; gap:10px; }
  .brand { font-size:20px; padding-top:6px; }
  .top-actions { justify-content:flex-end; gap:4px; }
  .top-button,.history-button { font-size:12px; padding:7px 9px; }
  .builder-layout { grid-template-columns:1fr; }
  .builder-list { display:flex; overflow-x:auto; }
  .builder-question-item { flex:0 0 180px; }
  .builder-editor { padding:14px; }
  .student-dashboard-grid { grid-template-columns:1fr; }
  .word-cell { font-size:10px; min-height:18px; }
  .mode-card { padding:18px; }
  .chat-message time { font-size:10px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; } }

.equipment-feature { width:100%; margin:0 0 18px; display:flex; align-items:center; justify-content:space-between; gap:24px; border:1px solid var(--border); border-radius:18px; padding:28px 32px; background:linear-gradient(115deg,#583099,#7545bd); color:#fff; text-align:left; cursor:pointer; overflow:hidden; transition:transform .18s,box-shadow .18s; }
.equipment-feature:hover { transform:translateY(-3px); box-shadow:0 14px 32px #14072030; }
.equipment-feature:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
.equipment-feature-copy { display:grid; gap:12px; min-width:0; }
.feature-eyebrow { font-size:11px; font-weight:750; letter-spacing:.12em; color:#e8dafa; }
.equipment-feature-copy strong { font-size:clamp(24px,3vw,36px); line-height:1.15; letter-spacing:-.035em; }
.feature-action { display:flex; gap:16px; align-items:center; font-size:14px; font-weight:600; }
.equipment-preview { display:flex; align-items:center; padding-right:6px; }
.equipment-preview img { width:112px; height:106px; object-fit:contain; background:#fff; border:5px solid #fff; border-radius:13px; box-shadow:0 6px 18px #150a3130; transform:rotate(-7deg); }
.equipment-preview img+img { margin-left:-14px; transform:rotate(5deg); }
.equipment-preview img:last-child { transform:rotate(-5deg); }
.photo-credit { display:block; font-size:11px; line-height:1.5; color:var(--muted); text-align:center; margin:6px auto 18px; }
.question-explanation { padding:16px 20px; margin:12px 0 20px; border-left:3px solid var(--accent); border-radius:0 10px 10px 0; background:var(--surface-2); color:var(--text); font-size:15px; line-height:1.65; }
.question-image { max-height:330px; width:min(100%,640px); object-fit:contain; background:#fff; border-radius:14px; padding:12px; box-sizing:border-box; }
.custom-answer { width:100%; display:flex; gap:12px; }
.custom-answer input { flex:1; min-width:0; font-size:17px; }
.quick-filters { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
#quickplayView { max-width:920px; margin:auto; }
#quickplayView .masthead { padding:24px 0 12px; min-height:0; place-items:start; }
#quickplayView .masthead h1 { font-size:32px; letter-spacing:-1px; }
#quickplayView .question-count { display:none; }
#quickplayView .quiz { border:1px solid var(--border); border-radius:18px; padding:24px; background:var(--surface); }
#quickplayView .question-meta { display:inline-block; padding:6px 12px; border:0; border-radius:8px; margin-bottom:18px; font-size:11px; letter-spacing:.025em; }
#quickplayView .question-wrap { background:transparent!important; padding:0; }
#quickplayView .question { font-size:clamp(20px,2.5vw,26px); line-height:1.4; font-weight:650; margin:0 0 22px; letter-spacing:-.025em; }
#quickplayView .answers { margin:18px 0 0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
#quickplayView .answers[role=group] { grid-template-columns:1fr; }
#quickplayView .answer { width:100%; max-width:none; border:1px solid var(--border); border-radius:10px; padding:16px; align-items:center; min-height:64px; font-size:16px; }
#quickplayView .answer:not(.disabled):hover { background:var(--accent-soft)!important; border-color:var(--accent)!important; }
#quickplayView .answer:has(input:checked) { box-shadow:inset 0 0 0 1px var(--accent); }
#quickplayView .custom-answer { grid-column:1/-1; max-width:none; margin:0; }
#quickplayView .custom-answer input { height:48px; }
#quickplayView .custom-answer .button { min-height:48px; padding:10px 20px; }
#quickplayView .feedback { font-size:16px; font-weight:650; padding:14px 18px; border-radius:10px; margin-top:20px; }
#quickplayView .quiz-actions { justify-content:flex-end; margin-top:20px; gap:10px; }
#quickplayView .control-panel { padding:20px 24px; margin-top:18px; border:1px solid var(--border); border-radius:16px; }
#quickplayView .scoreline { font-size:14px; }
.practice-settings-actions { display:flex; justify-content:space-between; gap:12px; align-items:center; }
@media(max-width:700px) {
  .equipment-feature { padding:24px 20px; gap:12px; }
  .equipment-preview img { width:68px; height:76px; border-width:3px; }
  .equipment-preview img+img { margin-left:-22px; }
  .equipment-preview img:last-child { display:none; }
  .equipment-feature-copy strong { font-size:25px; max-width:180px; }
  .feature-eyebrow { font-size:9px; letter-spacing:.08em; }
  .feature-action { font-size:12px; gap:8px; }
  .quick-filters { grid-template-columns:1fr; }
  .question-image { max-height:260px; }
  #quickplayView .quiz { padding:18px 16px; }
  #quickplayView .answer { padding:12px; min-height:60px; font-size:14px; }
  #quickplayView .answers { grid-template-columns:1fr; }
  #quickplayView .control-panel { padding:18px 16px; }
  .practice-settings-actions { align-items:stretch; flex-direction:column; }
}