:root{--font-heading: "Quicksand", sans-serif;--font-body: "Quicksand", sans-serif;--clay-radius: 20px;--clay-radius-sm: 12px;--clay-radius-lg: 28px;--clay-border: 2.5px solid rgba(0, 0, 0, .08);--clay-shadow: 6px 6px 0px rgba(0, 0, 0, .13);--clay-shadow-md: 8px 8px 0px rgba(0, 0, 0, .14);--clay-shadow-inner: inset 2px 2px 6px rgba(255, 255, 255, .55);--clay-shadow-hover: 4px 4px 0px rgba(0, 0, 0, .1);--color-sky: #87CEEB;--color-sky-light:#BFE9FB;--color-mint: #6EDBB2;--color-mint-light:#B5F0D7;--color-lemon: #FFE566;--color-lemon-light:#FFF8C0;--color-coral: #FF8A80;--color-coral-light:#FFCDD2;--color-lavender: #CE93D8;--color-lavender-light:#F3D9FC;--color-peach: #FFAB76;--color-peach-light:#FFD9B8;--color-primary: var(--color-sky);--color-success: var(--color-mint);--color-warning: var(--color-lemon);--color-danger: var(--color-coral);--color-accent: var(--color-lavender);--teacher-bg: #F0F4FF;--teacher-sidebar:#FFFFFF;--teacher-border: #E2E8F0;--student-bg: #F8F5FF;--text-primary: #1A1A2E;--text-secondary: #4A4A6A;--text-muted: #7A7A9A;--text-on-clay: #1A1A2E;--color-surface: #FFFFFF;--color-background-soft: #F4F6F8;--space-xs: 4px;--space-sm: 8px;--space-md: 16px;--space-lg: 24px;--space-xl: 32px;--space-2xl: 48px;--transition-fast: .15s ease-out;--transition-normal: .25s ease-out;--transition-bounce: .2s cubic-bezier(.34, 1.56, .64, 1);--touch-min: 48px;--touch-teacher: 56px;--touch-student: 64px;--z-base: 1;--z-overlay: 10;--z-modal: 20;--z-toast: 30;--z-top: 50}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:inherit}html{font-size:16px;-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden;scrollbar-gutter:stable}body{font-family:Quicksand,system-ui,-apple-system,sans-serif;color:var(--text-primary);background:var(--teacher-bg);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100dvh;overflow-x:hidden}input,button,select,textarea,optgroup{font-family:Quicksand,system-ui,-apple-system,sans-serif;font-size:1rem}h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:600;line-height:1.2;color:var(--text-primary)}.clay{background:var(--color-surface, #fff);border:var(--clay-border);border-radius:var(--clay-radius);box-shadow:var(--clay-shadow),var(--clay-shadow-inner);transition:all .3s cubic-bezier(.34,1.56,.64,1);will-change:transform,box-shadow;contain:layout style}.clay:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 16px 32px #0000001a,inset 3px 3px 8px #fffc,0 0 0 2px var(--color-sky-light);z-index:10}.clay--sky{background:var(--color-sky-light)}.clay--mint{background:var(--color-mint-light)}.clay--lemon{background:var(--color-lemon-light)}.clay--coral{background:var(--color-coral-light)}.clay--lavender{background:var(--color-lavender-light)}.clay--peach{background:var(--color-peach-light)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);font-family:var(--font-heading);font-size:1rem;font-weight:600;line-height:1;border:var(--clay-border);border-radius:var(--clay-radius-sm);box-shadow:var(--clay-shadow);padding:0 var(--space-lg);min-height:var(--touch-min);min-width:var(--touch-min);cursor:pointer;-webkit-user-select:none;user-select:none;text-decoration:none;transition:transform var(--transition-bounce),box-shadow var(--transition-fast),background var(--transition-fast)}.btn:active{transform:translate(3px,3px);box-shadow:2px 2px #0000001f}.btn:focus-visible{outline:3px solid var(--color-primary);outline-offset:2px}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.btn--primary{background:var(--color-sky);color:var(--text-primary)}.btn--primary:hover:not(:disabled){background:#6bbfdf}.btn--success{background:var(--color-mint);color:var(--text-primary)}.btn--danger{background:var(--color-coral);color:#fff}.btn--warning{background:var(--color-lemon);color:var(--text-primary)}.btn--accent{background:var(--color-lavender);color:var(--text-primary)}.btn--ghost{background:#fffc;color:var(--text-secondary)}.btn--lg{font-size:1.25rem;min-height:var(--touch-teacher);padding:0 var(--space-xl);border-radius:var(--clay-radius)}.btn--xl{font-size:1.5rem;min-height:var(--touch-student);padding:0 var(--space-2xl);border-radius:var(--clay-radius);border-width:3px}.input{width:100%;font-family:var(--font-body);font-size:1rem;color:var(--text-primary);background:#ffffffd9;border:var(--clay-border);border-width:2px;border-radius:var(--clay-radius-sm);box-shadow:var(--clay-shadow-inner);padding:.75rem 1rem;min-height:var(--touch-min);outline:none;transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.input:focus{border-color:var(--color-sky);box-shadow:0 0 0 3px #87ceeb59,var(--clay-shadow-inner)}.input::placeholder{color:var(--text-muted)}.error-msg{color:#c62828;font-size:.875rem;font-weight:600;margin-top:var(--space-xs)}@keyframes bounce-in{0%{transform:scale(.7);opacity:0}60%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes slide-up{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes pulse-ring{0%{transform:scale(1);opacity:1}to{transform:scale(1.6);opacity:0}}@keyframes score-burst{0%{transform:scale(.5) translateY(0);opacity:1}80%{transform:scale(1.2) translateY(-40px);opacity:1}to{transform:scale(1) translateY(-60px);opacity:0}}.animate-bounce-in{animation:bounce-in .4s var(--transition-bounce) both}.animate-slide-up{animation:slide-up .3s ease-out both}.container{width:100%;max-width:1200px;margin:0 auto;padding:0 var(--space-lg)}.stack{display:flex;flex-direction:column;gap:var(--space-md)}.row{display:flex;align-items:center;gap:var(--space-md)}@keyframes shimmer-slide{0%{background-position:-400px 0}to{background-position:400px 0}}.skeleton{background:linear-gradient(90deg,#e8eaf0 25%,#f5f7fa,#e8eaf0 75%);background-size:800px 100%;animation:shimmer-slide 1.4s ease-in-out infinite;border-radius:var(--clay-radius-sm);pointer-events:none}@media (max-width: 768px){:root{--clay-shadow: 4px 4px 0px rgba(0, 0, 0, .12)}}[data-theme=matcha]{--color-primary: #7bb582;--color-primary-dark: #5c9964;--color-sky: #7bb582;--teacher-bg: #eaf3ea;--student-bg: #eaf3ea;--teacher-sidebar: #dcf0dc;--teacher-border: #bcebc0;--color-surface: #f4fbf4;--color-background-soft: #d3ecd3;--text-primary: #1b3d22;--text-secondary: #2f5a38;--text-muted: #5e8a67;--text-on-clay: #1b3d22}[data-theme=sakura]{--color-primary: #f08ea2;--color-primary-dark: #d86981;--color-sky: #f08ea2;--teacher-bg: #fdf2f4;--student-bg: #fdf2f4;--teacher-sidebar: #fae4e8;--teacher-border: #f5c4ce;--color-surface: #fff8f9;--color-background-soft: #f7dbe0;--text-primary: #5c1825;--text-secondary: #7e2f40;--text-muted: #a66a77;--text-on-clay: #5c1825}[data-theme=dark]{--color-primary: #87ceeb;--teacher-bg: #121212;--student-bg: #121212;--teacher-sidebar: #1e1e1e;--teacher-border: #333333;--text-primary: #f0f0f0;--text-secondary: #cccccc;--text-muted: #999999;--text-on-clay: #f0f0f0;--color-surface: #1e1e1e;--color-background-soft: #2d2d2d;--color-sky-light: #1a3a4a;--color-mint-light: #1a4030;--color-lemon-light: #4a4010;--color-coral-light: #4a2020;--color-lavender-light: #3a204a;--color-peach-light: #4a3020;--clay-shadow: 6px 6px 0px rgba(0, 0, 0, .4)}[data-theme=deep-blue]{--color-primary: #4a90e2;--teacher-bg: #0b192c;--student-bg: #0b192c;--teacher-sidebar: #112240;--teacher-border: #1a365d;--text-primary: #e2e8f0;--text-secondary: #cbd5e1;--text-muted: #94a3b8;--text-on-clay: #e2e8f0;--color-surface: #112240;--color-background-soft: #1a365d;--color-sky-light: #1a3a5a;--color-mint-light: #1a4040;--color-lemon-light: #4a4020;--color-coral-light: #4a2030;--color-lavender-light: #3a205a;--color-peach-light: #4a3030;--clay-shadow: 6px 6px 0px rgba(0, 0, 0, .5)}