:root{--color-base-dark: #1a1a2e;--color-base-light: #f5f3f0;--color-primary-dark: #252542;--color-primary-light: #fdfcfa;--color-accent-primary: #f00842;--color-accent-error: #ff6b6b;--color-accent-info: #00d9ff;--color-accent-success: #28a745;--color-accent-warning: #ffc947;--color-accent-special: #a78bfa;--bg-color: #0f0f1a;--bg-gradient: radial-gradient(circle at 50% 50%, #1a1a2e 0%, #0f0f1a 100%);--container-bg: rgba(42, 42, 78, .4);--glass-border: 1px solid rgba(255, 255, 255, .1);--glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, .37);--text-color-primary: #f0f0f7;--text-color-secondary: #b8b8d0;--border-color: rgba(74, 74, 110, .5);--seat-bg: rgba(53, 53, 98, .6);--seat-absent-bg: rgba(61, 61, 92, .6);--seat-absent-border: #5a5a7a;--btn-primary-bg: var(--color-accent-primary);--btn-primary-hover: #00b8e6;--btn-cancel-bg: var(--color-accent-error);--btn-cancel-hover: #ff5252;--btn-action-bg: #007bff;--btn-action-hover: #0056b3;--font-size-xs: .875rem;--font-size-sm: 1rem;--font-size-base: 1.125rem;--font-size-lg: 1.5rem;--font-size-xl: 2rem;--font-size-2xl: 2.5rem;--font-size-3xl: 3rem;--space-xs: .5rem;--space-sm: .75rem;--space-md: 1rem;--space-lg: 1.25rem;--space-xl: 2rem;--space-2xl: 3rem;--transition-fast: .15s ease-out;--transition-base: .25s ease-out;--transition-slow: .35s ease-out;--animation-bounce: cubic-bezier(.68, -.55, .265, 1.55);--shadow-sm: 0 2px 4px rgba(0, 0, 0, .1);--shadow-md: 0 4px 8px rgba(0, 0, 0, .15);--shadow-lg: 0 8px 16px rgba(0, 0, 0, .2);--shadow-glow: 0 0 20px rgba(0, 217, 255, .3);--scrollbar-width: 8px;--scrollbar-radius: 100px;--scrollbar-track: transparent;--scrollbar-thumb: rgba(255, 255, 255, .15);--scrollbar-thumb-hover: rgba(255, 255, 255, .3);--scrollbar-thumb-active: rgba(255, 255, 255, .4)}body.light-mode{--bg-color: #e2e8ed;--bg-gradient: radial-gradient(ellipse at top, #eff3f8 0%, #e9eef3 50%, #e2e8ed 100%);--container-bg: #eff3f8;--glass-border: 1px solid rgba(148, 163, 184, .2);--glass-shadow: 0 4px 24px rgba(15, 23, 42, .08), 0 1px 3px rgba(15, 23, 42, .06);--text-color-primary: #1e293b;--text-color-secondary: #475569;--border-color: rgba(148, 163, 184, .3);--seat-bg: #eff3f8;--seat-absent-bg: rgba(239, 243, 248, .95);--seat-absent-border: #94a3b8;--btn-primary-bg: #f00842;--btn-primary-hover: #0ea5e9;--btn-cancel-bg: #ef4444;--btn-cancel-hover: #dc2626;--btn-action-bg: #007bff;--btn-action-hover: #0056b3;--shadow-sm: 0 1px 2px rgba(15, 23, 42, .05);--shadow-md: 0 4px 12px rgba(15, 23, 42, .08);--shadow-lg: 0 8px 24px rgba(15, 23, 42, .12);--shadow-glow: 0 0 24px rgba(14, 165, 233, .2);--scrollbar-track: transparent;--scrollbar-thumb: rgba(0, 0, 0, .15);--scrollbar-thumb-hover: rgba(0, 0, 0, .3);--scrollbar-thumb-active: rgba(0, 0, 0, .4)}.student-seat .student-name{transition:color var(--transition-base)}.student-seat.ready{background:var(--color-accent-warning);border-color:var(--color-accent-warning)}.student-seat.correct{background:var(--color-accent-success);border-color:var(--color-accent-success)}.student-seat.incorrect{background:var(--color-accent-error);border-color:var(--color-accent-error)}.student-seat.testing{background:var(--seat-absent-bg);border-color:var(--seat-absent-border)}.student-seat.ready .student-name,.student-seat.correct .student-name,.student-seat.incorrect .student-name{color:#fff}.selection-screen .student-seat.correct,.selection-screen .student-seat.incorrect,.selection-screen .student-seat.ready,.selection-screen .student-seat.testing{background:linear-gradient(135deg,var(--seat-bg) 0%,rgba(255,255,255,.05) 100%);border-color:var(--border-color)}.selection-screen .student-seat.absent{background:linear-gradient(135deg,var(--seat-absent-bg) 0%,rgba(150,150,150,.1) 100%);border-color:var(--seat-absent-border)}.selection-screen .student-seat .student-name{color:var(--text-color-primary)!important}.selection-screen .student-seat.absent .student-name{color:var(--text-color-secondary)!important}.selection-screen .student-seat:not(.edit-mode):hover,.selection-screen .student-seat.correct:hover,.selection-screen .student-seat.incorrect:hover,.selection-screen .student-seat.ready:hover,.selection-screen .student-seat.testing:hover,.selection-screen .student-seat.absent:hover{border-color:var(--color-accent-primary)!important;transform:translateY(-4px) scale(1.05);box-shadow:var(--shadow-lg)}.selection-screen .student-seat:hover:before{opacity:.1}#testControlScreen{padding:var(--space-md)}.test-layout{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-lg);margin-top:var(--space-md);align-items:start}.test-column{display:flex;flex-direction:column;height:100%}.test-column h2{border-bottom:2px solid var(--border-color);padding-bottom:var(--space-sm)}.student-list-box{border:1px solid var(--border-color);background-color:var(--seat-bg);border-radius:var(--space-md);padding:var(--space-md);min-height:12rem;height:30vh;overflow-y:auto}.student-list-box p{padding:var(--space-sm);background-color:var(--container-bg);border-radius:var(--space-sm);margin-bottom:var(--space-sm);font-weight:500;color:var(--text-color-secondary)}.word-input-container{display:flex;gap:var(--space-sm);margin-bottom:var(--space-lg)}#wordInput{flex-grow:1;padding:var(--space-md);font-size:var(--font-size-base);border-radius:1rem;border:3px solid var(--border-color);background:var(--seat-bg);color:var(--text-color-primary)}#sendWordBtn{padding:var(--space-md) var(--space-lg);margin:0;width:auto;max-width:none}.teacher-actions-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-sm);margin-top:auto;padding-top:var(--space-md)}.teacher-actions-grid .btn{font-size:var(--font-size-sm);padding:var(--space-sm);position:relative;overflow:hidden}.timer-progress{position:absolute;top:0;left:0;height:100%;width:100%;background-color:#0003;transition:width .1s linear}#miniClassroomContainer{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-sm);padding:var(--space-sm);border-radius:var(--space-md);flex-grow:1;border:1px solid var(--border-color);background:var(--bg-color)}#miniClassroomContainer .table-group{padding:var(--space-sm);box-shadow:none;min-height:auto;margin-bottom:0;background:transparent}#miniClassroomContainer .table-grid{gap:var(--space-xs)}#miniClassroomContainer .student-seat,#miniClassroomContainer .empty-seat{height:3.5rem;border-width:2px;cursor:default}#miniClassroomContainer .student-name{font-size:var(--font-size-xs)}#miniClassroomContainer .student-seat:hover{transform:none;box-shadow:none;border-color:initial}.student-view-screen{position:fixed;top:0;left:0;width:100%;height:100%;background-color:var(--bg-color);z-index:2000;display:flex;flex-direction:column;align-items:center;text-align:center;padding:var(--space-md)}.pupil-session-sign-out{position:absolute;top:max(var(--space-md),env(safe-area-inset-top));right:max(var(--space-md),env(safe-area-inset-right));z-index:2;min-width:7rem;padding:var(--space-sm) var(--space-md);border:2px solid var(--border-color);border-radius:999px;background:var(--seat-bg);color:var(--text-color-primary);font:inherit;cursor:pointer}.pupil-session-sign-out:hover,.pupil-session-sign-out:focus-visible{border-color:var(--color-accent-info);outline:3px solid rgba(0,217,255,.25);outline-offset:2px}#studentWaitingScreen{justify-content:center;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}#studentWaitingScreen *{user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}#studentWaitingScreen h1{font-size:clamp(2rem,8vw,5rem);margin-bottom:var(--space-md)}#studentWaitingScreen p{font-size:clamp(1rem,4vw,2rem);color:var(--text-color-secondary)}#breathingCircleContainer{position:relative;width:100%;max-width:300px;margin:2rem auto;text-align:center;touch-action:none}#breathingCircle{width:100%;height:auto;filter:drop-shadow(0 0 20px rgba(0,217,255,.3))}#breathingCircle circle{fill:var(--color-accent-info);stroke:none;opacity:.7;animation:breathe 5s ease-in-out infinite;transform-origin:center}@keyframes breathe{0%{r:20;opacity:.3}50%{r:70;opacity:.8}to{r:20;opacity:.3}}.ripple{position:absolute;border-radius:50%;border:2px solid var(--color-accent-info);pointer-events:none;animation:rippleEffect 1s ease-out forwards}@keyframes rippleEffect{0%{width:20px;height:20px;opacity:.8}to{width:150px;height:150px;opacity:0}}#colorPicker{margin-top:2rem;text-align:center}#colorButtons{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;max-width:400px;margin:0 auto}.color-btn{width:50px;height:50px;border-radius:50%;border:3px solid transparent;cursor:pointer;transition:all var(--transition-base);box-shadow:0 2px 8px #0003}.color-btn:hover{transform:scale(1.15);box-shadow:0 4px 12px #0000004d}.color-btn.active{border-color:#fff;box-shadow:0 0 15px #fff9;transform:scale(1.2)}#timerDisplay{position:absolute;top:var(--space-lg);right:var(--space-lg);background-color:var(--seat-bg);color:var(--text-color-primary);font-size:var(--font-size-xl);font-weight:700;padding:var(--space-md);border-radius:50%;width:4rem;height:4rem;display:none;place-items:center;z-index:2010;border:3px solid var(--border-color)}.answer-container{display:flex;align-items:center;justify-content:center;width:90%;max-width:44rem;margin-bottom:var(--space-lg);margin-top:auto;position:relative}.answer-display{width:15em;max-width:90%;min-height:5rem;padding:var(--space-sm);font-size:clamp(2rem,8vw,5rem);font-weight:700;text-align:center;border-bottom:4px solid var(--border-color);letter-spacing:.1em;color:var(--text-color-primary);display:flex;align-items:center;justify-content:center}.inline-backspace-btn{background:var(--seat-bg);border:2px solid var(--border-color);border-radius:var(--space-md);width:4rem;height:4rem;font-size:var(--font-size-xl);color:var(--text-color-primary);cursor:pointer;display:flex;align-items:center;justify-content:center;position:absolute;right:-4.5rem;top:50%;transform:translateY(-50%);transition:all var(--transition-base)}.inline-backspace-btn:hover{background-color:var(--border-color)}#virtualEnterBtn{margin-top:var(--space-md);width:90%;max-width:25rem;height:4rem;font-size:var(--font-size-lg)}.keyboard{padding:var(--space-sm);border-radius:var(--space-md);display:flex;flex-direction:column;gap:5px;width:100%;max-width:62.5rem;margin-top:auto;margin-bottom:var(--space-sm)}.keyboard-row{display:flex;justify-content:center}.keyboard-row.row-2{margin-left:3.5vw}.keyboard-row-container{display:flex;justify-content:center;align-items:center}.key{width:8vw;height:8vw;max-width:4.7rem;max-height:4.7rem;margin:.4vw;border-radius:var(--space-md);background-color:var(--seat-bg);color:var(--text-color-primary);font-size:clamp(1.25rem,3vw,2rem);font-weight:600;display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-user-select:none;user-select:none;border:1px solid var(--border-color);box-shadow:0 3px #0003;transition:background-color .1s,transform .1s}.key:hover{background-color:var(--border-color)}.key:active{background-color:#000;transform:translateY(2px);box-shadow:none}.key.active{background-color:var(--btn-action-bg);color:#fff}#capsLockBtn,#apostropheBtn{background-color:var(--container-bg)}#capsLockBtn:hover,#apostropheBtn:hover{background-color:var(--border-color)}@media(max-width:768px){.inline-backspace-btn{position:static;transform:none;margin-top:var(--space-sm);width:80%;max-width:200px}.answer-container{flex-direction:column}}#miniClassroomContainer .student-seat.mini-ready{background:var(--color-accent-success);color:#fff}#miniClassroomContainer .student-seat.correct-icon:after{content:"\2705";position:absolute;right:4px;top:2px;font-size:.9em}#miniClassroomContainer .student-seat.incorrect-icon:after{content:"\274c";position:absolute;right:4px;top:2px;font-size:.9em}body.pupil-mode #authBtn .icon-login{display:none}body.pupil-mode #authBtn .icon-logout{display:inline}body.pupil-mode #authBtn .dropdown-text.icon-login{display:none}body.pupil-mode #authBtn .dropdown-text.icon-logout{display:inline}.admin-only{display:none}body:not(.logged-out):not(.pupil-mode) .admin-only{display:flex}body:not(.logged-out):not(.pupil-mode) .dropdown-divider.admin-only{display:block}body.pupil-mode .admin-only{display:none!important}body:has(.student-view-screen[style*=flex]) .spelling-header{display:none}body:has(.class-login-overlay[style*=flex]) .spelling-header{display:none}body:has(.class-login-overlay[style*=flex]) #main-content{display:none}.pupil-only{display:none!important}body.pupil-mode .pupil-only,body.pupil-mode button.pupil-only{display:inline-block!important}.teacher-no-class-help{font-size:var(--font-size-sm)}.selection-subtitle{text-align:center;margin-bottom:var(--space-xs);color:var(--text-color-secondary);font-weight:400}#testControlScreen .teacher-actions-grid .btn-action{background:linear-gradient(to bottom,var(--btn-action-bg),#0056b3);color:#fff}#testControlScreen .teacher-actions-grid .btn-cancel{background:linear-gradient(to bottom,var(--btn-cancel-bg),#c0392b);border-color:transparent;color:#fff}#miniClassroomContainer .student-name{flex-direction:column;line-height:1.15}#studentTestScreen button,#studentTestScreen input{font-family:Andika,Nunito Sans,sans-serif}#studentWaitingScreen .pupil-design-seat-btn{position:absolute;top:max(1rem,env(safe-area-inset-top));left:max(1rem,env(safe-area-inset-left));width:auto;margin:0;z-index:2}#studentWaitingScreen #studentWaitingName{margin-top:3.5rem}