:root{--red:#8b1e1e;--red-d:#5e1010;--gold:#f2c14e;--paper:#fbf5e9;--ink:#2b2118;--muted:#7a6a58;--line:#e4d6bd;--ok:#2f8f4e;color:var(--ink);background:#f4ecdc;font-family:Segoe UI,system-ui,-apple-system,Noto Sans,sans-serif}*{box-sizing:border-box}html,body,#app{height:100%;margin:0}button{font:inherit;cursor:pointer}button:focus-visible,input:focus-visible{outline:3px solid var(--gold);outline-offset:2px}[hidden]{display:none!important}.brand{flex-direction:column;line-height:1.1;display:flex}.brand-zh{color:var(--red);letter-spacing:.1em;font-size:1.4rem;font-weight:700}.brand-vi{color:var(--muted);font-size:.85rem;font-weight:600}.center{background:#f3ece0;place-items:center;min-height:100%;padding:32px 16px;display:grid;position:relative}.auth-scene{aspect-ratio:1150/670;background:#25170e;border-radius:16px;width:min(1150px,100% - 32px);position:absolute;top:16px;left:50%;overflow:hidden;translate:-50%}.auth-scene:after{content:"";background:#100a06bd;position:absolute;inset:0}.card{color:#f8ecd2;background:#302114;border:1px solid #bd943f;border-radius:14px;flex-direction:column;gap:14px;width:min(400px,100%);padding:28px 24px;display:flex;position:relative;box-shadow:0 16px 36px #1b100a40}.card .brand{align-items:center}.card .brand-zh{color:#f4d993;font-family:KaiTi,STKaiti,Microsoft YaHei,serif;font-size:2rem}.card .brand-vi{color:#f8ecd2}.card h2{text-align:center;margin:0;font-size:1.1rem}.subtitle{text-align:center;color:#d9c29b;margin:-6px 0 0}.tabs{background:#1d120c;border-radius:8px;grid-template-columns:1fr 1fr;padding:4px;display:grid}.tab{color:#dcc8a6;background:0 0;border:0;border-radius:6px;min-height:40px;padding:8px;font-weight:600}.tab.active{color:#fff8e5;background:#a52d22}.field{flex-direction:column;gap:6px;font-size:.9rem;font-weight:600;display:flex}.field input{font:inherit;color:#fff4df;background:#1c120c;border:1px solid #735737;border-radius:8px;min-height:44px;padding:10px 12px;font-weight:400}.field input::placeholder{color:#c8b594}.primary{color:#fff8e5;background:#b63325;border:0;border-radius:8px;padding:12px;font-weight:700}.primary:hover{background:#d0422f}.primary:disabled{opacity:.6;cursor:wait}.secondary{border:1px solid var(--line);color:var(--ink);background:#fff;border-radius:8px;padding:6px 12px}.secondary:hover{border-color:var(--red)}.error{color:#b3261e;min-height:1.2em;margin:0;font-size:.9rem}.card .error,.shell .error{color:#ffb9a7}.demo-note{color:#ddcba9;border-top:1px solid #735737;margin:0;padding-top:8px;font-size:.8rem}.shell{color:#f5e7cb;background:#28190f;border-radius:16px;flex-direction:column;width:min(1150px,100% - 32px);margin:16px auto;display:flex;overflow:hidden}.topbar{background:#21140d;flex-wrap:wrap;align-items:center;gap:16px;padding:10px 16px;display:flex}.topbar .brand-zh{color:#f5db9b;font-family:KaiTi,STKaiti,Microsoft YaHei,serif}.topbar .brand-vi{color:#e2caa3}.stats{flex-wrap:wrap;flex:1;gap:8px;display:flex}.actions{gap:8px;display:flex}.pill,.status{color:#f6e8cc;font-variant-numeric:tabular-nums;background:#37251a;border-radius:999px;padding:5px 10px;font-size:.8rem}.status:before{content:"●";margin-right:6px}.status.online:before{color:#65ce99}.status.connecting:before{color:#d9a400}.status.offline:before{color:#b3261e}.glow-pill{color:#f5d57f}.shell .secondary{color:#f4e2bc;background:#37251a;border-color:#735737;min-height:40px}.shell .secondary:hover{border-color:#d8b167}.room-wrap{position:relative}.room-pan{scrollbar-color:#97764a #28190f;overflow-x:auto}.room-host{aspect-ratio:1150/670;width:max(100%,760px);position:relative}.hint,.glow-info{color:#e3c9a2;text-align:center;padding:6px 16px;font-size:.8rem;position:relative;left:0}.glow-info{color:#f1d28b;min-height:1.2em;padding-top:0;font-weight:600}.toast{opacity:0;pointer-events:none;color:#fff;z-index:5000;background:#2b2118e6;border-radius:999px;padding:8px 14px;font-size:.9rem;transition:all .2s;position:absolute;top:20px;left:50%;transform:translate(-50%,-10px)}.toast.show{opacity:1;transform:translate(-50%)}.stage{transform-origin:top;cursor:pointer;-webkit-user-select:none;user-select:none;background:#422919;position:absolute;top:0;left:50%;overflow:hidden;translate:-50%}.floor{width:100%;height:100%;position:absolute;inset:0}.wall{background:#39251a;border-bottom:14px solid #654328;position:absolute;inset:0 0 auto}.wall:before{content:"";background:linear-gradient(#863c2b,#334e42);border:1px solid #795438;position:absolute;inset:12px 310px 16px}.board{color:#82291f;text-align:center;background:#f7ecd3;border:5px solid #cfa444;place-content:center;width:380px;height:155px;display:grid;position:absolute;top:22px;left:50%;translate:-50%;box-shadow:inset 0 0 0 3px #f7ecd3,inset 0 0 0 4px #cfa444}.board-zh{letter-spacing:6px;font-family:KaiTi,STKaiti,Microsoft YaHei,serif;font-size:54px;font-weight:700}.board-vi{font-family:Georgia,Times New Roman,serif;font-size:22px;font-weight:700}.board-motto{color:#69502c;margin-top:8px;font-size:14px}.seal{color:#a93425;border:1px solid #a93425;padding:3px;font-size:15px;position:absolute;bottom:10px;right:12px}.poster{text-align:center;border:2px solid #c5a34d;width:235px;height:142px;padding:10px;font-family:Georgia,Times New Roman,serif;position:absolute;top:38px}.study-poster{color:#f6e5bb;background:#842c20;left:50px}.poster-zh{margin-bottom:2px;font-family:KaiTi,STKaiti,serif;font-size:25px}.poster strong{font-size:15px;display:block}.poster p{margin:7px 0;font-size:13px}.break-poster{color:#39251a;background:#f7ecd3;right:50px}.break-poster .break-title{margin-bottom:4px;font-size:24px}.break-poster strong{font-size:20px}.break-poster p{margin:3px 0}.break-poster small{font-family:system-ui,sans-serif;font-size:18px;line-height:1.2;display:block}.lantern{background:#b53525;border:2px solid #caa055;border-radius:40%;width:22px;height:42px;position:absolute;top:12px}.lantern:before{content:"";background:#caa055;width:1px;height:12px;position:absolute;top:-14px;left:9px}.lantern:after{content:"";background:#caa055;width:4px;height:12px;position:absolute;bottom:-12px;left:7px}.lantern.l{left:302px}.lantern.r{right:302px}.mat{color:#3d2c1a;background:#ded0a5;border:1px solid #b49a63;border-radius:4px;place-items:center;padding:0;font-family:KaiTi,STKaiti,Microsoft YaHei,serif;font-weight:700;line-height:.8;display:grid;position:absolute;translate:-50% -50%;box-shadow:0 3px #2f1d12}.mat:hover{background:#f8e6ae;outline:2px solid #bda158}.seat-letter{pointer-events:none}.room-decor{pointer-events:none;position:absolute;inset:0}.scholar{width:44px;position:absolute;translate:-50% -100%}.scholar:after{content:"";background:#c2a670;width:46px;height:5px;display:block}.scholar .human{opacity:.85;width:44px;height:61px}.avatar{pointer-events:none;will-change:transform;width:0;height:0;position:absolute;top:0;left:0}.avatar>*{position:absolute;left:0;translate:-50%}.face{width:48px;height:67px;transition:top .2s;top:-66px}.human{width:100%;height:100%;display:block;overflow:visible}.human .seated-body,.avatar.sitting .human .standing-body{display:none}.avatar.sitting .human .seated-body{display:block}.avatar.walking .left-leg{transform-origin:23px 59px;animation:.4s ease-in-out infinite step}.avatar.walking .right-leg{transform-origin:34px 59px;animation:.4s ease-in-out infinite reverse step}.avatar.flip .face{scale:-1 1}.avatar.walking .face{animation:.35s ease-in-out infinite bob}.avatar.sitting .face{top:-53px}.name{white-space:nowrap;text-overflow:ellipsis;color:#fff0cf;background:#20130df0;border-radius:4px;max-width:150px;padding:2px 7px;font-size:12px;font-weight:600;top:3px;overflow:hidden}.avatar.self .name{color:#fce5a1;border:1px solid #977841}.halo,.sparkles{opacity:0;pointer-events:none;border-radius:50%;width:66px;height:66px;top:-66px}@keyframes bob{50%{translate:-50% -3px}}@keyframes step{50%{rotate:12deg}}.avatar[data-glow="1"] .halo{opacity:1;background:radial-gradient(#fff6b0aa,#0000 65%)}.avatar[data-glow="2"] .halo{opacity:1;background:radial-gradient(#ffd54fcc,#0000 65%);width:80px;height:80px;animation:2.4s ease-in-out infinite pulse;top:-72px}.avatar[data-glow="3"] .halo{opacity:1;background:radial-gradient(#ffb300ee,#ff8f0044 50%,#0000 70%);width:95px;height:95px;animation:1.8s ease-in-out infinite pulse;top:-78px}.avatar[data-glow="4"] .halo{opacity:1;filter:blur(4px);background:conic-gradient(#ff5f6d55,#ffc37155,#7cf7a055,#6ec8ff55,#c58bff55,#ff5f6d55);width:105px;height:105px;animation:6s linear infinite spin,1.6s ease-in-out infinite pulse;top:-82px}.avatar[data-glow="3"] .sparkles,.avatar[data-glow="4"] .sparkles{opacity:1;background:radial-gradient(circle at 20% 30%,#fff 0 2px,#0000 3px),radial-gradient(circle at 80% 20%,#fff 0 2px,#0000 3px),radial-gradient(circle at 70% 80%,#fff 0 2px,#0000 3px),radial-gradient(circle at 25% 75%,#fff8 0 2px,#0000 3px);width:110px;height:110px;animation:4s linear infinite reverse spin;top:-85px}.avatar[data-glow="2"] .face,.avatar[data-glow="3"] .face{filter:drop-shadow(0 0 8px #ffd54f)}.avatar[data-glow="4"] .face{filter:drop-shadow(0 0 12px #fff)drop-shadow(0 0 6px #ffb300)}.avatar[data-glow="4"] .name{color:#fff;background:linear-gradient(90deg,#ffb300,#ff5f6d)}@keyframes pulse{50%{scale:1.12}}@keyframes spin{to{rotate:360deg}}.lessons{background:#25170e;border-top:1px solid #61472c;padding:14px 24px 20px}.lessons h2{color:#f1d28b;margin:0 0 4px;font-family:Georgia,Times New Roman,serif;font-size:1rem}.lesson-list{flex-wrap:wrap;align-items:flex-start;gap:10px 20px;display:flex}.chapter{color:#dcc59c;width:100%;margin:4px 0 0;font-size:.8rem;font-weight:400}.lesson-item{text-align:left;color:#fff0d1;background:0 0;border:0;border-bottom:1px solid #0000;flex-direction:column;align-items:flex-start;gap:4px;max-width:100%;min-height:44px;padding:4px 0;display:flex}.lesson-item:hover{color:#ffdc8c;border-bottom-color:#caa055}.lesson-item-title{font-size:.9rem}.lesson-item-title:before{content:"●";color:#ce755a;margin-right:7px}.lesson-item:nth-of-type(2n) .lesson-item-title:before{color:#7fc8a3}.lesson-item-summary{color:#d9c29b;padding-left:17px;font-size:.8rem}.modal{z-index:9000;background:#0007;place-items:center;padding:16px;display:grid;position:fixed;inset:0}.modal-box{background:#fff;border-radius:16px;width:min(820px,100%);max-height:100%;padding:24px;position:relative;overflow-y:auto}.close{float:right;background:var(--paper);border:0;border-radius:50%;width:36px;height:36px;position:sticky;top:0}.lesson-chapter{color:var(--red);text-transform:uppercase;font-size:.8rem;font-weight:700}.lesson-title{margin:4px 0 16px;font-size:1.5rem}.blk{margin:0 0 18px}.blk h3{color:var(--red-d);margin:0 0 8px;font-size:1.05rem}.blk-heading{color:var(--red);border-bottom:2px solid var(--line);padding-bottom:4px;font-size:1.25rem}.blk-note{background:#fff8e1;border-radius:10px;padding:10px 14px}.blk-note ul{margin:0;padding-left:18px}.vocab-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;display:grid}.vocab-card,.sentence,.bubble{border:1px solid var(--line);background:var(--paper);border-radius:10px;padding:8px 10px}.sentence{margin-bottom:8px}.p-label{color:var(--muted);font-size:.75rem;font-weight:600}.p-zh{align-items:center;gap:6px;display:flex}.hanzi{font-family:Microsoft YaHei,PingFang SC,Noto Sans SC,sans-serif;font-size:1.4rem}.p-py{color:var(--red);font-style:italic}.p-vi{color:var(--muted);font-size:.9rem}.speak{background:0 0;border:0;padding:2px;font-size:1rem}.line{align-items:flex-start;gap:10px;margin-bottom:8px;display:flex}.speaker{background:var(--red);color:#fff;border-radius:50%;flex:none;place-items:center;width:34px;height:34px;font-weight:700;display:grid}.bubble{flex:1}audio{width:100%;margin-bottom:10px}.video{aspect-ratio:16/9;position:relative}.video iframe{border:0;border-radius:10px;width:100%;height:100%;position:absolute;inset:0}iframe.pdf{border:1px solid var(--line);border-radius:8px;width:100%;height:70vh}.blk-image{border-radius:10px;max-width:100%}.blk-link,.open-link{color:var(--red);font-weight:600}.blk-error,.loading,.empty{color:var(--muted)}@media (width<=820px){.shell{border-radius:10px;width:calc(100% - 16px);margin:8px auto}.topbar{gap:10px;padding:12px}.topbar .brand{width:100%}.topbar .brand-vi{display:block}.stats{gap:6px}.topbar .stats{flex-basis:100%}.topbar .actions{justify-content:flex-end;width:100%}.status{max-width:100%}.hint:before{content:"Vuốt ngang để xem toàn bộ phòng. ";color:#f7d887}.lessons{padding:14px 16px}.lesson-item{width:100%}.card{padding:24px 20px}.modal{padding:8px}.modal-box{padding:18px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}