:root{--classroom-cyan: #00f3ff;--classroom-magenta: #ff00ff;--classroom-purple: #8000ff;--classroom-green: #00ff88;--classroom-orange: #ff6600;--bg-dark: #0a0a0f;--bg-glass: rgba(255, 255, 255, .05)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:"Exo 2",sans-serif;background:var(--bg-dark);color:#fff;overflow:hidden;min-height:100vh}#classroom-canvas{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1}.classroom-nav{position:fixed;top:0;left:0;right:0;height:70px;background:linear-gradient(180deg,#000000e6,#000000b3);-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);z-index:100;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid rgba(0,243,255,.3)}.nav-back{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--classroom-cyan);font-family:Orbitron,sans-serif;font-size:1.1rem;padding:10px 20px;border:1px solid rgba(0,243,255,.3);border-radius:25px;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);transition:all .3s ease}.nav-back:hover{background:#00f3ff26;border-color:var(--classroom-cyan);box-shadow:0 5px 20px #00f3ff66;transform:translate(-5px)}.classroom-title{font-family:Orbitron,sans-serif;font-size:1.5rem;color:var(--classroom-cyan);text-shadow:0 0 20px rgba(0,243,255,.5)}.neural-status{display:flex;align-items:center;gap:10px;padding:10px 20px;background:#8000ff1a;border:1px solid rgba(128,0,255,.3);border-radius:25px;font-size:.95rem}.neural-icon{font-size:1.3rem;color:var(--classroom-purple);animation:brainPulse 2s ease infinite}@keyframes brainPulse{0%,to{transform:scale(1);filter:drop-shadow(0 0 10px var(--classroom-purple))}50%{transform:scale(1.1);filter:drop-shadow(0 0 20px var(--classroom-purple))}}.status-text{color:var(--classroom-purple);font-weight:600}.hud-overlay{position:fixed;top:70px;left:0;right:0;bottom:0;z-index:50;pointer-events:none}.hud-overlay>*{pointer-events:auto}.course-info{position:absolute;top:20px;left:50%;transform:translate(-50%);background:#000c;border:1px solid rgba(0,243,255,.4);border-radius:50px;padding:15px 40px;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);box-shadow:0 5px 30px #00000080;animation:slideDown .5s ease}@keyframes slideDown{0%{opacity:0;transform:translate(-50%) translateY(-30px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.course-meta{display:flex;align-items:center;gap:25px}.course-name{font-family:Orbitron,sans-serif;font-size:1.3rem;color:var(--classroom-cyan);font-weight:700}.course-detail{display:flex;align-items:center;gap:8px;font-size:.9rem;color:#ffffffb3;padding:5px 15px;background:#ffffff0d;border-radius:20px}.detail-icon{font-size:1rem;color:var(--classroom-cyan)}.participants-display{position:absolute;top:20px;right:30px;display:flex;align-items:center;gap:15px;background:#000c;border:1px solid rgba(255,0,255,.3);border-radius:50px;padding:12px 25px;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);animation:slideInRight .5s ease}@keyframes slideInRight{0%{opacity:0;transform:translate(50px)}to{opacity:1;transform:translate(0)}}.participants-avatars{display:flex;margin-left:-10px}.participant-avatar{width:35px;height:35px;border-radius:50%;background:linear-gradient(135deg,var(--classroom-magenta),var(--classroom-purple));border:2px solid var(--bg-dark);display:flex;align-items:center;justify-content:center;font-size:.9rem;margin-left:-10px;transition:transform .3s ease,z-index .3s ease;cursor:pointer}.participant-avatar:hover{transform:translateY(-5px) scale(1.1);z-index:10}.participants-count{font-family:Orbitron,sans-serif;font-size:1rem;color:var(--classroom-magenta);font-weight:600;margin-left:10px}.neural-interface{position:absolute;left:30px;top:120px;width:300px;background:#000000d9;border:1px solid rgba(128,0,255,.4);border-radius:20px;padding:25px;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);box-shadow:0 10px 40px #0009;animation:slideInLeft .5s ease}@keyframes slideInLeft{0%{opacity:0;transform:translate(-50px)}to{opacity:1;transform:translate(0)}}.panel-title{font-family:Orbitron,sans-serif;font-size:1.2rem;color:var(--classroom-purple);margin-bottom:20px;display:flex;align-items:center;gap:10px;padding-bottom:15px;border-bottom:1px solid rgba(128,0,255,.3)}.panel-title-icon{font-size:1.4rem}.neural-metrics{display:flex;flex-direction:column;gap:20px}.metric{display:flex;flex-direction:column;gap:8px}.metric-header{display:flex;justify-content:space-between;align-items:center}.metric-label{font-size:.9rem;color:#fffc;font-weight:500}.metric-value{font-family:Orbitron,sans-serif;font-size:1rem;color:var(--classroom-purple);font-weight:700}.metric-bar{height:8px;background:#ffffff1a;border-radius:4px;overflow:hidden;position:relative}.metric-fill{height:100%;background:linear-gradient(90deg,var(--classroom-purple),var(--classroom-magenta));border-radius:4px;transition:width .5s ease;box-shadow:0 0 15px #8000ff80;position:relative;overflow:hidden}.metric-fill:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);animation:shimmer 2s infinite}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.learning-tools{position:absolute;right:30px;top:120px;width:280px;background:#000000d9;border:1px solid rgba(0,243,255,.4);border-radius:20px;padding:20px;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);box-shadow:0 10px 40px #0009;animation:slideInRight .5s ease .2s backwards}.learning-tools .panel-title{color:var(--classroom-cyan);border-bottom-color:#00f3ff4d}.tools-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.tool-btn{aspect-ratio:1;background:#00f3ff0d;border:1px solid rgba(0,243,255,.3);border-radius:15px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;cursor:pointer;transition:all .3s ease;position:relative;overflow:hidden}.tool-btn:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle,var(--classroom-cyan),transparent);opacity:0;transition:opacity .3s ease}.tool-btn:hover{background:#00f3ff26;border-color:var(--classroom-cyan);transform:translateY(-5px);box-shadow:0 10px 30px #00f3ff66}.tool-btn:hover:before{opacity:.2}.tool-btn.active{background:#00f3ff33;border-color:var(--classroom-cyan);box-shadow:0 0 25px #00f3ff80}.tool-icon{font-size:2rem;position:relative;z-index:1}.tool-label{font-size:.8rem;color:#ffffffe6;position:relative;z-index:1;text-align:center}.control-bar{position:absolute;bottom:30px;left:50%;transform:translate(-50%);background:#000000e6;border:1px solid rgba(0,243,255,.4);border-radius:50px;padding:18px 35px;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);display:flex;gap:15px;box-shadow:0 10px 50px #000c;animation:slideUp .5s ease}@keyframes slideUp{0%{opacity:0;transform:translate(-50%) translateY(50px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.control-btn{width:55px;height:55px;border-radius:50%;border:2px solid rgba(0,243,255,.4);background:#00f3ff0d;color:#fff;font-size:1.4rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease;position:relative;overflow:hidden}.control-btn:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle,var(--classroom-cyan),transparent);opacity:0;transition:opacity .3s ease}.control-btn:hover{transform:translateY(-5px);border-color:var(--classroom-cyan);box-shadow:0 10px 30px #00f3ff80}.control-btn:hover:before{opacity:.3}.control-btn:active{transform:translateY(-2px)}.control-btn.active{background:#00f3ff33;border-color:var(--classroom-cyan);box-shadow:0 0 30px #00f3ff66}.control-btn.leave{background:#f003;border-color:#ff000080;width:65px;height:65px;font-size:1.6rem}.control-btn.leave:hover{background:#ff00004d;border-color:red;box-shadow:0 10px 40px #f009;transform:translateY(-5px) scale(1.05)}#hologram-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000f2;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);z-index:1000;display:none;align-items:center;justify-content:center;animation:fadeIn .3s ease}#hologram-modal.active{display:flex}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal-content{background:#0a0a14f2;border:2px solid var(--classroom-cyan);border-radius:25px;padding:40px;max-width:90%;max-height:90%;display:flex;flex-direction:column;box-shadow:0 20px 80px #00f3ff66;animation:scaleIn .4s ease}@keyframes scaleIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;padding-bottom:20px;border-bottom:1px solid rgba(0,243,255,.3)}.modal-title{font-family:Orbitron,sans-serif;font-size:1.8rem;color:var(--classroom-cyan);display:flex;align-items:center;gap:15px}.modal-close{background:none;border:none;color:#fff9;font-size:2rem;cursor:pointer;width:45px;height:45px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .3s ease}.modal-close:hover{background:#ffffff1a;color:var(--classroom-cyan);transform:rotate(90deg)}.modal-body{flex:1;display:flex;flex-direction:column;gap:20px}.hologram-viewer{flex:1;background:#00000080;border:1px solid rgba(0,243,255,.3);border-radius:15px;min-height:400px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.hologram-placeholder{font-size:10rem;opacity:.3;animation:rotate3d 10s linear infinite}@keyframes rotate3d{0%{transform:rotateY(0)}to{transform:rotateY(360deg)}}.hologram-controls{display:flex;gap:15px;justify-content:center}.modal-btn{padding:12px 30px;background:#00f3ff1a;border:1px solid rgba(0,243,255,.4);border-radius:25px;color:var(--classroom-cyan);font-family:"Exo 2",sans-serif;font-size:1rem;cursor:pointer;display:flex;align-items:center;gap:10px;transition:all .3s ease}.modal-btn:hover{background:#00f3ff33;border-color:var(--classroom-cyan);box-shadow:0 5px 25px #00f3ff66;transform:translateY(-3px)}.modal-btn:active{transform:translateY(-1px)}#loading-screen{position:fixed;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,#0a0a0f,#1a0a2f);display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:10000;transition:opacity .6s ease,visibility .6s ease}#loading-screen.hidden{opacity:0;visibility:hidden;pointer-events:none}.loading-cube{width:100px;height:100px;position:relative;margin-bottom:40px;transform-style:preserve-3d;animation:cubeSpin 3s linear infinite}@keyframes cubeSpin{0%{transform:rotateX(0) rotateY(0)}to{transform:rotateX(360deg) rotateY(360deg)}}.cube-face{position:absolute;width:100px;height:100px;background:#00f3ff33;border:2px solid var(--classroom-cyan);display:flex;align-items:center;justify-content:center;font-size:2rem}.cube-face:nth-child(1){transform:rotateY(0) translateZ(50px)}.cube-face:nth-child(2){transform:rotateY(180deg) translateZ(50px)}.cube-face:nth-child(3){transform:rotateY(90deg) translateZ(50px)}.cube-face:nth-child(4){transform:rotateY(-90deg) translateZ(50px)}.cube-face:nth-child(5){transform:rotateX(90deg) translateZ(50px)}.cube-face:nth-child(6){transform:rotateX(-90deg) translateZ(50px)}.loading-text{font-family:Orbitron,sans-serif;font-size:1.5rem;color:var(--classroom-cyan);text-align:center;animation:textPulse 2s ease infinite}@keyframes textPulse{0%,to{opacity:1;text-shadow:0 0 20px rgba(0,243,255,.5)}50%{opacity:.6;text-shadow:0 0 40px rgba(0,243,255,.8)}}.loading-subtitle{font-size:1rem;color:#fff9;margin-top:15px}@media (max-width: 1024px){.classroom-nav{padding:0 20px}.neural-interface,.learning-tools{width:250px;padding:20px}.control-bar{padding:15px 25px;gap:12px}.control-btn{width:50px;height:50px;font-size:1.2rem}.control-btn.leave{width:60px;height:60px}}@media (max-width: 768px){.classroom-nav{padding:0 15px;height:60px;flex-wrap:wrap;justify-content:center;gap:10px}.classroom-title{font-size:1.2rem}.course-info{padding:12px 25px;top:10px}.course-meta{flex-direction:column;gap:10px}.participants-display{top:auto;bottom:140px;right:15px}.neural-interface,.learning-tools{width:calc(100% - 30px);left:15px;right:15px;top:auto;bottom:200px;max-height:35vh;overflow-y:auto}.control-bar{bottom:20px;padding:12px 20px;gap:10px;flex-wrap:wrap;justify-content:center}.control-btn{width:45px;height:45px;font-size:1.1rem}.control-btn.leave{width:55px;height:55px}.modal-content{padding:25px}.modal-title{font-size:1.4rem}.hologram-viewer{min-height:300px}.hologram-controls{flex-wrap:wrap}}@media (max-width: 480px){.classroom-nav{height:auto;padding:10px}.nav-back{font-size:.9rem;padding:8px 15px}.classroom-title{font-size:1rem}.neural-status{padding:8px 15px;font-size:.85rem}.course-info{padding:10px 20px}.course-name{font-size:1.1rem}.tools-grid{grid-template-columns:repeat(2,1fr);gap:10px}.tool-icon{font-size:1.5rem}.tool-label{font-size:.7rem}.control-bar{width:calc(100% - 20px)}.control-btn{width:40px;height:40px;font-size:1rem}.control-btn.leave{width:50px;height:50px}.modal-content{padding:20px;max-width:95%}.modal-title{font-size:1.2rem}.modal-btn{padding:10px 20px;font-size:.9rem}.loading-cube{width:80px;height:80px}.cube-face{width:80px;height:80px;font-size:1.5rem}}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.nav-back:focus,.control-btn:focus,.tool-btn:focus,.modal-btn:focus,.modal-close:focus{outline:2px solid var(--classroom-cyan);outline-offset:2px}@media (prefers-contrast: high){.control-btn,.tool-btn{border-width:3px}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}