@import "https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,700&family=DM+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,700&family=Noto+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,700&family=Nunito:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,700&display=swap";:root{--ink:#4b2d3c;--ink-soft:#755765;--pink:#f45f91;--pink-dark:#d94678;--pink-soft:#ffd6e2;--cream:#fff8ed;--cream-2:#fff1df;--paper:#fffdf8;--line:#ecdcd6;--mint:#70b99a;--purple:#7665d5;--yellow:#ffc95c;--red:#de5270;--shadow-sm:0 3px 0 #5b304314, 0 8px 24px #5b30430f;--shadow:0 8px 0 #5b304314, 0 22px 48px #5b30431f;--radius:18px;color:var(--ink);font-synthesis:weight style;text-rendering:optimizelegibility;font-family:Be Vietnam Pro,Arial,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:var(--cream);min-width:320px;max-width:100%;min-height:100vh;margin:0;overflow-x:hidden}#app,.app-main,.app-content{min-width:0;max-width:100%}button,input,textarea,select{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{color:inherit}a{color:inherit;text-decoration:none}img,video,canvas,iframe{max-width:100%}input,select,textarea,button{min-width:0}::selection{background:var(--pink-soft);color:var(--ink)}:focus-visible{outline-offset:3px;outline:3px solid #f45f9159}h1,h2,h3,h4,p{margin-top:0}h1,h2,h3,h4,.display-font{font-family:Nunito,Be Vietnam Pro,Noto Sans,Arial,sans-serif}.container{width:min(1160px,100% - 40px);margin:0 auto}.muted{color:var(--ink-soft)}.eyebrow{color:var(--pink-dark);letter-spacing:.08em;text-transform:uppercase;align-items:center;gap:7px;font-size:.76rem;font-weight:800;display:inline-flex}.section-title{letter-spacing:-.045em;font-size:clamp(2rem,4vw,3.35rem);line-height:1.05}.card{background:var(--paper);border:1.5px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm)}.surface-dots{background-image:radial-gradient(#f45f912b 1.2px,#0000 1.2px);background-size:19px 19px}.btn{cursor:pointer;border:1.5px solid #0000;border-radius:13px;justify-content:center;align-items:center;gap:9px;min-height:44px;padding:0 18px;font-weight:800;transition:transform .18s,box-shadow .18s,background .18s;display:inline-flex}.btn:hover{transform:translateY(-2px)}.btn:active{transform:translateY(1px)}.btn-primary{color:#fffaf6;background:var(--pink);border-color:var(--pink-dark);box-shadow:0 4px 0 var(--pink-dark)}.btn-primary:hover{background:#ed4c82}.btn-secondary{background:var(--paper);border-color:var(--line);box-shadow:0 3px 0 var(--line)}.btn-ghost{background:0 0;border-color:#0000}.btn-dark{background:var(--ink);color:var(--cream);box-shadow:0 4px #2c1721}.btn-lg{border-radius:15px;min-height:52px;padding:0 25px;font-size:1rem}.btn-icon{border-radius:12px;width:42px;height:42px;padding:0}.btn:disabled{cursor:not-allowed;opacity:.55;transform:none}.input,.select,.textarea{width:100%;color:var(--ink);border:1.5px solid var(--line);background:#fffcf7;border-radius:13px;padding:12px 14px;transition:border .18s,box-shadow .18s}.input,.select{min-height:46px}.input:focus,.select:focus,.textarea:focus{border-color:var(--pink);outline:none;box-shadow:0 0 0 4px #f45f911f}.field-label{margin-bottom:8px;font-size:.86rem;font-weight:800;display:block}.input-icon{position:relative}.input-icon>svg{color:#9d7b89;position:absolute;top:50%;left:14px;transform:translateY(-50%)}.input-icon>.input{padding-left:43px}.tag{background:var(--cream-2);color:var(--ink-soft);border-radius:999px;align-items:center;gap:5px;padding:5px 9px;font-size:.77rem;font-weight:700;display:inline-flex}.tag.pink{background:var(--pink-soft);color:#a3305b}.tag.green{color:#286b4d;background:#d9f0e4}.logo{letter-spacing:-.04em;align-items:center;gap:10px;font-family:Nunito,sans-serif;font-size:1.35rem;font-weight:900;display:inline-flex}.logo-mark{color:#fffaf6;background:var(--pink);width:37px;height:37px;box-shadow:0 4px 0 var(--pink-dark);border-radius:12px 12px 12px 4px;place-items:center;display:grid;transform:rotate(-3deg)}.top-nav{z-index:50;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#fff8ede0;border-bottom:1px solid #ecdcd6cc;position:sticky;top:0}.top-nav-inner{justify-content:space-between;align-items:center;gap:24px;height:72px;display:flex}.nav-links{align-items:center;gap:28px;font-size:.91rem;font-weight:700;display:flex}.nav-actions{align-items:center;gap:10px;display:flex}.app-shell{grid-template-columns:250px 1fr;min-height:100vh;display:grid}.sidebar{color:#fff5ef;background:#553243;flex-direction:column;height:100vh;padding:24px 18px;display:flex;position:sticky;top:0;overflow-y:auto}.sidebar .logo{padding:0 10px 26px}.sidebar .logo-mark{background:#ff7aa6}.side-nav{gap:6px;display:grid}.side-link{color:#f1dfe6;border-radius:12px;align-items:center;gap:12px;min-height:47px;padding:0 13px;font-size:.91rem;font-weight:700;display:flex}.side-link:hover{background:#ffffff14}.side-link.router-link-active{color:#fffaf6;background:var(--pink);box-shadow:0 4px #a6315b}.sidebar-spacer{flex:1}.side-profile{border-top:1px solid #ffffff21;align-items:center;gap:11px;padding:18px 8px 2px;display:flex}.avatar{color:#fffaf6;background:var(--pink);border-radius:50%;flex:none;place-items:center;width:39px;height:39px;font-family:Nunito,sans-serif;font-weight:900;display:grid}.name-glow{text-shadow:0 0 7px #9b85ff,0 0 13px #ee75a8}.name-rainbow{background:linear-gradient(90deg,#f45f91,#edaa35,#64b48f,#8c79e5);-webkit-background-clip:text;background-clip:text;color:#0000!important}.name-starlight{text-shadow:0 0 5px #fff29a,0 0 13px #8d78e8;animation:1.6s ease-in-out infinite alternate name-twinkle;color:#6f55bd!important}.name-neon{text-shadow:0 0 3px #28e7ff,0 0 8px #28e7ff,0 0 14px #9b62ff;color:#e9ffff!important}.name-flame,.name-ocean,.name-candy{animation:2.8s linear infinite name-flow;color:#0000!important;background-size:200%!important;-webkit-background-clip:text!important;background-clip:text!important}.name-flame{background:linear-gradient(90deg,#ffcf4d,#ff674d,#ff2d72,#ffcf4d)}.name-ocean{background:linear-gradient(90deg,#165fba,#1bc0cd,#5c75df,#165fba)}.name-candy{background:linear-gradient(90deg,#e83d8a,#8d5ee8,#ff86b8,#e83d8a)}.name-midautumn-moonlight,.name-midautumn-lantern,.name-midautumn-jade,.name-midautumn-starry{animation:3.8s linear infinite name-midautumn-flow;color:#0000!important;background-size:220%!important;-webkit-background-clip:text!important;background-clip:text!important}.name-midautumn-moonlight{filter:drop-shadow(0 0 4px #ffe26fbf);background-image:linear-gradient(90deg,#d69c32,#fff2aa,#f5c755,#fff7cf,#d69c32)}.name-midautumn-lantern{filter:drop-shadow(0 0 4px #ee53418c);background-image:linear-gradient(90deg,#b92f45,#ffda61,#ed5944,#fff0a2,#b92f45);animation-duration:2.7s}.name-midautumn-jade{filter:drop-shadow(0 0 3px #4bb79180);background-image:linear-gradient(90deg,#176b5a,#54bd96,#f6e49a,#3a9a7c,#176b5a)}.name-midautumn-starry{filter:drop-shadow(0 0 5px #7b5ccaa6);background-image:linear-gradient(90deg,#6651b8,#f6cf62,#9a79e1,#fff1a7,#6651b8);animation-name:name-midautumn-flow,name-midautumn-twinkle;animation-duration:3.2s,1.4s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-direction:normal,alternate}.name-halloween-witch,.name-halloween-vampire,.name-halloween-mummy,.name-halloween-skeleton,.name-halloween-pumpkin,.name-halloween-ghost,.name-halloween-werewolf,.name-halloween-scientist,.name-halloween-pirate,.name-halloween-scarecrow{animation:3.2s linear infinite name-halloween-flow,1.8s ease-in-out infinite alternate name-halloween-pulse;color:#0000!important;background-size:240%!important;-webkit-background-clip:text!important;background-clip:text!important}.name-halloween-witch{filter:drop-shadow(0 0 4px #9b63d8);background-image:linear-gradient(90deg,#633c9b,#e0b0ff,#f0c54f,#633c9b)}.name-halloween-vampire{filter:drop-shadow(0 0 5px #b62845);background-image:linear-gradient(90deg,#571528,#f05a70,#f4e5dc,#571528)}.name-halloween-mummy{filter:drop-shadow(1px 2px 1px #665a43);background-image:repeating-linear-gradient(105deg,#74684d 0 10px,#f0deb0 10px 22px,#a69369 22px 29px)}.name-halloween-skeleton{filter:drop-shadow(0 0 7px #66e4bf);background-image:linear-gradient(90deg,#64dbba,#e1fff4,#5ac6aa,#e1fff4)}.name-halloween-pumpkin{filter:drop-shadow(0 0 5px #f39235);background-image:linear-gradient(90deg,#d95f24,#ffd05a,#e78128,#4d8b4a,#d95f24)}.name-halloween-ghost{filter:drop-shadow(0 3px 4px #8d83ac);background-image:linear-gradient(90deg,#7b70a4,#f5f8ff,#a8b7d1,#f5f8ff)}.name-halloween-werewolf{filter:drop-shadow(0 0 4px #d6c682);background-image:linear-gradient(90deg,#6f5543,#f2df9b,#89939e,#4e3d34,#6f5543)}.name-halloween-scientist{filter:drop-shadow(0 0 6px #55d9b6);background-image:linear-gradient(90deg,#2a796d,#70f1c7,#a765d5,#70f1c7,#2a796d)}.name-halloween-pirate{filter:drop-shadow(1px 2px 2px #34283a);background-image:linear-gradient(90deg,#283650,#e3ba61,#f3dfaa,#7d382f,#283650)}.name-halloween-scarecrow{filter:drop-shadow(1px 2px 1px #68472f);background-image:repeating-linear-gradient(45deg,#795235 0 8px,#e5b958 8px 16px,#557047 16px 22px)}@keyframes name-flow{to{background-position:200%}}@keyframes name-twinkle{to{filter:brightness(1.35)}}@keyframes name-midautumn-flow{to{background-position:220%}}@keyframes name-midautumn-twinkle{to{filter:drop-shadow(0 0 8px #ffe067e6)brightness(1.22)}}@keyframes name-halloween-flow{to{background-position:240%}}@keyframes name-halloween-pulse{to{filter:brightness(1.22)drop-shadow(0 0 7px #b87cefa6)}}.avatar.frame-blossom,.account-avatar.frame-blossom{outline:3px solid #f19ab7;box-shadow:0 0 0 5px #ffe2eb}.avatar.frame-galaxy,.account-avatar.frame-galaxy{outline:3px solid #8c79e5;box-shadow:0 0 0 5px #dfe6ff,0 0 13px #8c79e5}.app-main{background:#fffaf1;min-width:0}.app-header{border-bottom:1px solid var(--line);background:#fffdf8e6;justify-content:space-between;align-items:center;gap:18px;min-height:76px;padding:16px 32px;display:flex}.app-content{max-width:1450px;margin:0 auto;padding:30px 32px 48px}.mobile-menu{display:none}.toast{z-index:100;max-width:min(390px,100% - 32px);box-shadow:var(--shadow);background:#fffaf6;border:1.5px solid #e8c9d5;border-radius:14px;align-items:center;gap:11px;padding:13px 17px;font-weight:700;animation:.25s both toast-in;display:flex;position:fixed;bottom:24px;right:24px}@keyframes toast-in{0%{opacity:0;transform:translateY(12px)}}.fade-enter-active,.fade-leave-active{transition:opacity .2s}.fade-enter-from,.fade-leave-to{opacity:0}@media (width<=900px){.nav-links{display:none}.app-shell{grid-template-columns:78px 1fr}.sidebar{padding-inline:12px}.sidebar .logo{justify-content:center;padding-inline:0}.sidebar .logo>span:last-child,.side-link span,.side-profile>div:last-child{display:none}.side-link{justify-content:center;padding:0}.side-profile{justify-content:center;padding-inline:0}.app-header,.app-content{padding-inline:20px}}@media (width<=640px){.container{width:min(100% - 28px,1160px)}.top-nav-inner{height:64px}.nav-actions .btn-ghost{display:none}.app-shell{display:block}.sidebar{display:none}.app-header{min-height:66px;padding:12px 16px}.app-content{padding:22px 16px 95px}.mobile-menu{display:inline-flex}.mobile-dock{z-index:60;border:1px solid var(--line);height:62px;box-shadow:var(--shadow);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#fffdf8f2;border-radius:20px;justify-content:space-around;padding:7px;display:flex;position:fixed;bottom:10px;left:12px;right:12px}.mobile-dock a{min-width:55px;color:var(--ink-soft);border-radius:13px;place-items:center;display:grid}.mobile-dock a.router-link-active{background:var(--pink-soft);color:var(--pink-dark)}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}.live-bg-starry{--live-bg-image:url(/live-backgrounds/starry.jpg);--live-bg-fallback:#151a49}.live-bg-ocean{--live-bg-image:url(/live-backgrounds/ocean.jpg);--live-bg-fallback:#42b8df}.live-bg-forest{--live-bg-image:url(/live-backgrounds/forest.jpg);--live-bg-fallback:#7ab67d}.live-bg-sunset{--live-bg-image:url(/live-backgrounds/sunset.jpg);--live-bg-fallback:#e87668}.live-bg-space{--live-bg-image:url(/live-backgrounds/space.jpg);--live-bg-fallback:#171334}.live-bg-classroom{--live-bg-image:url(/live-backgrounds/classroom.jpg);--live-bg-fallback:#39745f}.live-bg-candy{--live-bg-image:url(/live-backgrounds/candy.jpg);--live-bg-fallback:#f6b6cf}.live-bg-neon{--live-bg-image:url(/live-backgrounds/neon.jpg);--live-bg-fallback:#171936}.live-bg-snow{--live-bg-image:url(/live-backgrounds/snow.jpg);--live-bg-fallback:#cbe7f6}.live-bg-lantern{--live-bg-image:url(/live-backgrounds/lantern.jpg);--live-bg-fallback:#18284a}.live-bg-tet{--live-bg-image:url(/live-backgrounds/tet.jpg);--live-bg-fallback:#a82c38}.live-bg-hung-kings{--live-bg-image:url(/live-backgrounds/hung-kings.jpg);--live-bg-fallback:#7f916b}.live-bg-reunification{--live-bg-image:url(/live-backgrounds/reunification.jpg);--live-bg-fallback:#b31d2d}.live-bg-children-day{--live-bg-image:url(/live-backgrounds/children-day.jpg);--live-bg-fallback:#9eddf5}.live-bg-mid-autumn{--live-bg-image:url(/live-backgrounds/mid-autumn.jpg);--live-bg-fallback:#18264a}.live-bg-national-day{--live-bg-image:url(/live-backgrounds/national-day.jpg);--live-bg-fallback:#b51428}.live-bg-teachers-day{--live-bg-image:url(/live-backgrounds/teachers-day.jpg);--live-bg-fallback:#d9bf9b}.live-bg-christmas{--live-bg-image:url(/live-backgrounds/christmas.jpg);--live-bg-fallback:#284b43}.live-bg-schoolyard{--live-bg-image:url(/live-backgrounds/schoolyard.jpg);--live-bg-fallback:#8dcbe6}.live-bg-library{--live-bg-image:url(/live-backgrounds/library.jpg);--live-bg-fallback:#71452c}.live-bg-stem-lab{--live-bg-image:url(/live-backgrounds/stem-lab.jpg);--live-bg-fallback:#b7e8f4}.live-bg-ai{--live-bg-image:url(/live-backgrounds/ai.jpg);--live-bg-fallback:#111d56}.live-bg-coding{--live-bg-image:url(/live-backgrounds/coding.jpg);--live-bg-fallback:#102f38}.live-bg-robotics{--live-bg-image:url(/live-backgrounds/robotics.jpg);--live-bg-fallback:#284d72}[class*=live-bg-]{background-color:var(--live-bg-fallback,#f8eee9)!important;background-image:var(--live-bg-image)!important;background-position:50%!important;background-repeat:no-repeat!important;background-size:cover!important}.play-page[class*=live-bg-],.host-page[class*=live-bg-],.lobby-page[class*=live-bg-]{--ink:#3d2934;--ink-soft:#705965;--live-stage-fg:#3d2934;--live-stage-muted:#705965;--live-stage-surface:#fffaf4f5;--live-stage-border:#5b3a493d;--live-stage-shadow:0 10px 32px #2a18223d;min-height:100vh;background-attachment:fixed!important}.play-page[class*=live-bg-]>section,.host-page[class*=live-bg-] .host-stage,.lobby-page[class*=live-bg-] .lobby-stage{color:var(--live-stage-fg)!important;background-color:#0000!important;background-image:none!important}.play-page[class*=live-bg-] .play-header,.host-page[class*=live-bg-] .host-header,.host-page[class*=live-bg-] .host-controls,.lobby-page[class*=live-bg-] .lobby-footer{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#fffaf4e0!important}.play-page[class*=live-bg-] .student-progress,.play-page[class*=live-bg-] .student-question,.host-page[class*=live-bg-] .stage-meta,.host-page[class*=live-bg-] .host-stage>h1,.host-page[class*=live-bg-] .host-content,.host-page[class*=live-bg-] .host-scale,.lobby-page[class*=live-bg-] .lobby-title,.lobby-page[class*=live-bg-] .participant-summary{box-shadow:var(--live-stage-shadow);text-shadow:none;-webkit-backdrop-filter:blur(14px)saturate(1.12);backdrop-filter:blur(14px)saturate(1.12);border-radius:20px;border:1px solid var(--live-stage-border)!important;background:var(--live-stage-surface)!important;color:var(--live-stage-fg)!important}.play-page[class*=live-bg-] .student-progress{width:min(1120px,100%);margin:0 auto;padding:10px 14px}.play-page[class*=live-bg-] .student-question{width:min(1000px,100% - 18px);min-height:0;margin:14px auto;padding:clamp(18px,3vw,34px)}.play-page[class*=live-bg-] .student-question h1,.play-page[class*=live-bg-] .student-question-content,.play-page[class*=live-bg-] .student-timer,.host-page[class*=live-bg-] .host-stage>h1,.host-page[class*=live-bg-] .host-content,.lobby-page[class*=live-bg-] .lobby-title h1,.lobby-page[class*=live-bg-] .lobby-title p,.lobby-page[class*=live-bg-] .participant-summary,.lobby-page[class*=live-bg-] .session-name-editor input{color:var(--live-stage-fg)!important}.play-page[class*=live-bg-] .student-question-content,.host-page[class*=live-bg-] .host-content,.lobby-page[class*=live-bg-] .lobby-title p{color:var(--live-stage-muted)!important}.play-page[class*=live-bg-] .center-state>h1,.play-page[class*=live-bg-] .center-state>p,.play-page[class*=live-bg-] .center-state>.eyebrow,.play-page[class*=live-bg-] .center-state>small,.host-page[class*=live-bg-] .host-paused>h1,.host-page[class*=live-bg-] .host-paused>p,.host-page[class*=live-bg-] .host-leaderboard>h1,.host-page[class*=live-bg-] .host-leaderboard>.eyebrow{border:1px solid var(--live-stage-border);background:var(--live-stage-surface);width:fit-content;max-width:min(900px,100% - 24px);box-shadow:var(--live-stage-shadow);text-shadow:none;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:14px;padding:8px 14px;color:var(--live-stage-fg)!important}.play-page[class*=live-bg-] .student-waiting-room,.lobby-page[class*=live-bg-] .player-cloud{box-shadow:var(--live-stage-shadow);text-shadow:none;-webkit-backdrop-filter:blur(14px)saturate(1.08);backdrop-filter:blur(14px)saturate(1.08);border-color:var(--live-stage-border)!important;background:var(--live-stage-surface)!important;color:var(--live-stage-fg)!important}.play-page[class*=live-bg-] .student-waiting-room>strong,.play-page[class*=live-bg-] .student-waiting-room article,.lobby-page[class*=live-bg-] .player-chip,.lobby-page[class*=live-bg-] .roster-player-copy,.lobby-page[class*=live-bg-] .roster-player-copy small,.play-page[class*=live-bg-] .waiting-student-name:not([class*=name-]),.lobby-page[class*=live-bg-] .player-chip strong:not([class*=name-]){text-shadow:none;color:var(--live-stage-fg)!important}.play-page[class*=live-bg-] .student-waiting-room article,.lobby-page[class*=live-bg-] .player-chip{box-shadow:0 3px #5b3a4924;background:#fffaf4!important;border-color:#5b3a492e!important}.play-page[class*=live-bg-] .center-state>.eyebrow,.play-page[class*=live-bg-] .center-state>h1,.play-page[class*=live-bg-] .center-state>p,.play-page[class*=live-bg-] .center-state>small,.host-page[class*=live-bg-] .host-paused>h1,.host-page[class*=live-bg-] .host-paused>p,.host-page[class*=live-bg-] .host-leaderboard>h1,.host-page[class*=live-bg-] .host-leaderboard>.eyebrow{background:var(--live-stage-surface)!important;color:var(--live-stage-fg)!important}.host-page[class*=live-bg-] .stage-meta{width:fit-content;margin:0 auto;padding:8px 13px}.host-page[class*=live-bg-] .host-stage>h1,.host-page[class*=live-bg-] .host-content,.host-page[class*=live-bg-] .host-scale,.lobby-page[class*=live-bg-] .lobby-title,.lobby-page[class*=live-bg-] .participant-summary{padding:14px 18px}@media (width<=720px){.play-page[class*=live-bg-],.host-page[class*=live-bg-],.lobby-page[class*=live-bg-]{background-attachment:scroll!important}.play-page[class*=live-bg-] .student-question{width:100%;margin:10px auto}}