@import "https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Roboto:wght@400;500;700;900&display=swap";:root{--primary-color:#4c8511;--primary-hover:#3c690e;--secondary-color:#f2a900;--accent-color:#0072c6;--bg-color:#f7fbff;--surface-color:#fff;--surface-hover:#f1f5f9;--text-main:#2b3a4a;--text-muted:#64748b;--success:#10b981;--warning:#f59e0b;--danger:#ef4444;--font-main:"Roboto", sans-serif;--font-display:"Bebas Neue", sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-main);color:var(--text-main);background:linear-gradient(135deg,#f8fafc 0%,#dbeafe 25%,#fef3c7 50%,#dcfce7 75%,#f3e8ff 100%) fixed;flex-direction:column;min-height:100vh;line-height:1.5;display:flex;overflow-x:hidden}#root{flex-direction:column;flex-grow:1;max-width:100%;display:flex;overflow-x:hidden}h1,h2,h3,h4{font-family:var(--font-display);letter-spacing:1px;margin-bottom:.5rem;font-weight:400}h1{color:var(--primary-color);font-size:3rem}button{cursor:pointer;font-size:1.1rem;font-weight:700;font-family:var(--font-display);letter-spacing:.5px;border:none;border-radius:8px;justify-content:center;align-items:center;gap:.5rem;padding:.75rem 1.5rem;transition:all .2s ease-in-out;display:inline-flex}button:hover{transform:translateY(-2px)translateZ(0)}button:active{transform:translateY(0)translateZ(0)}.btn-primary{background:var(--primary-color);color:#fff;border:2px solid #ffffffe6;box-shadow:0 4px 12px #4c85114d}.btn-primary:hover{background:var(--primary-hover);box-shadow:0 6px 16px #4c851166}.btn-secondary{background:var(--surface-color);color:var(--primary-color);border:2px solid var(--primary-color)}.btn-secondary:hover{background:var(--primary-color);color:#fff}.glass-panel{-webkit-backdrop-filter:blur(16px);will-change:transform, backdrop-filter;backface-visibility:hidden;background:#ffffffb3;border:1px solid #fff6;border-radius:24px;padding:1.5rem;transform:translateZ(0);box-shadow:0 16px 40px #0000000d,inset 0 1px #fffc}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)translateZ(0)}to{opacity:1;transform:translateY(0)translateZ(0)}}.animate-fade-in{animation:.4s ease-out forwards fadeIn}.class-code-input::placeholder{color:#94a3b8;font-family:Roboto,sans-serif;font-weight:400}.responsive-popup{flex-direction:column;max-height:95vh;overflow-y:auto;display:flex!important}@media (width<=700px),(height<=850px){.responsive-popup{gap:1rem!important;padding:1.5rem!important}.responsive-popup h1{font-size:2rem!important}.responsive-popup img{margin:0 auto;width:100px!important;height:100px!important}.responsive-popup p,.responsive-popup .text-content{padding:.5rem!important;font-size:1rem!important;line-height:1.4!important}.responsive-popup button{padding:1rem!important;font-size:1.2rem!important}}@media (width<=500px),(height<=650px){.responsive-popup{gap:.8rem!important;padding:1rem!important}.responsive-popup h1{font-size:1.5rem!important}.responsive-popup img{width:70px!important;height:70px!important}.responsive-popup p,.responsive-popup .text-content{padding:.3rem!important;font-size:.9rem!important;line-height:1.3!important}.responsive-popup button{padding:.8rem!important;font-size:1.1rem!important}.responsive-popup ul li{margin-bottom:.4rem!important;font-size:.85rem!important}.responsive-popup ul li img{width:20px!important;height:20px!important}}