.quiz-card{background:linear-gradient(135deg,#2f80ed,#56a0f8);color:#fff;border-radius:18px;padding:24px;box-shadow:0 14px 36px #2f80edb3;max-width:720px;margin:0 auto;-webkit-user-select:none;user-select:none;position:relative;overflow:visible}.question h3{margin-bottom:20px;text-shadow:0 0 6px rgba(0,0,0,.3)}.answers{display:grid;gap:16px}.answer-btn{padding:14px 20px;border-radius:14px;border:2px solid rgba(255,255,255,.6);background:#ffffff26;color:#fff;font-size:16px;text-align:left;cursor:pointer;transition:background .3s ease,border-color .3s ease,transform .15s ease;box-shadow:0 0 6px #0003;-webkit-user-select:none;user-select:none;position:relative;z-index:2}.answer-btn:hover:not(:disabled){background:#ffffff4d;transform:scale(1.03)}.answer-btn:disabled{cursor:default;opacity:.8}.answer-btn.correct{background:#10b981;border-color:#059669;color:#d1fae5;box-shadow:0 0 12px #10b981}.answer-btn.wrong{background:#ef4444;border-color:#b91c1c;color:#fee2e2;box-shadow:0 0 12px #ef4444}@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}@keyframes shake{0%,to{transform:translate(0)}20%,60%{transform:translate(-6px)}40%,80%{transform:translate(6px)}}.pop{animation:pop .3s ease forwards}.shake{animation:shake .3s ease forwards}.confetti-container{pointer-events:none;position:fixed;top:0;left:0;width:100vw;height:100vh;overflow:visible;z-index:9999}.confetti-particle{position:absolute;border-radius:50%;opacity:.9;animation:confetti-explode 1.2s forwards ease-out}@keyframes confetti-explode{0%{transform:translate(0) scale(1);opacity:1}to{transform:translate(var(--dx),var(--dy)) scale(.5);opacity:0}}.traffic-light{display:flex;flex-direction:column;gap:2px;width:28px;padding:2px;background:#222;border-radius:8px;box-shadow:0 0 8px #000c;position:absolute;top:8px;right:8px;z-index:10}.light{width:8px;height:8px;border-radius:50%;background-color:#444;box-shadow:inset 0 0 4px #000000b3;transition:background-color .3s ease,box-shadow .3s ease}.light.on.red{background-color:#ef4444;box-shadow:0 0 5px #ef4444}.light.off.red{background-color:#4b1a1a}.light.on.yellow{background-color:#facc15;box-shadow:0 0 5px #facc15}.light.off.yellow{background-color:#4b441a}.light.on.green{background-color:#22c55e;box-shadow:0 0 5px #22c55e}.light.off.green{background-color:#1f3a1f}.light.green-bonus.red.on,.light.green-bonus.yellow.on{background-color:#22c55e;box-shadow:0 0 5px #22c55e}.light.green-bonus.red.off,.light.green-bonus.yellow.off{background-color:#1f3a1f}.student-main-menu{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:24px;padding:24px;border-radius:16px;background:transparent;box-shadow:none;color:#fff;text-shadow:0 0 8px rgba(0,0,0,.35)}.student-menu-card{display:flex;flex-direction:column;justify-content:center;align-items:center;color:#fff;font-weight:700;border-radius:16px;border:none;padding:32px 0;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease;-webkit-user-select:none;user-select:none;text-shadow:0 0 8px rgba(0,0,0,.35);font-size:20px;background:linear-gradient(135deg,#1e40af,#2563eb);box-shadow:0 6px 18px #1e40af99}.student-menu-card:hover{transform:translateY(-4px);box-shadow:0 14px 36px #1e40afcc}.student-menu-card:active{transform:translateY(-2px);box-shadow:0 10px 28px #1e40afb3}.student-menu-card:disabled,.student-menu-card[disabled]{opacity:.5;cursor:default;box-shadow:none;transform:none;background:#ffffff0d}.student-menu-card .menu-icon{font-size:48px!important;margin-bottom:12px;text-shadow:0 0 10px rgba(0,0,0,.4)}.student-menu-card h3{margin:0;font-size:22px;text-shadow:0 0 8px rgba(0,0,0,.4)}@media(max-width:480px){.student-main-menu{grid-template-columns:1fr;padding:20px 16px}.student-menu-card{padding:24px 0;font-size:24px}.student-menu-card .menu-icon{font-size:56px!important;margin-bottom:16px}}.play-header{margin:0 0 24px;font-weight:700;color:#fff;text-align:center;font-size:28px;text-shadow:0 0 10px rgba(0,0,0,.5)}.student-levels-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:20px;width:100%}.student-level-card{background:linear-gradient(135deg,#1e40af,#2563eb);color:#fff;font-weight:700;border-radius:16px;box-shadow:0 6px 18px #1e40af99;border:none;padding:28px 0;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease;-webkit-user-select:none;user-select:none;font-size:20px;text-align:center;text-shadow:0 0 8px rgba(0,0,0,.35);display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}.student-level-card:hover:not(:disabled){transform:translateY(-4px);box-shadow:0 14px 36px #1e40afcc}.student-level-card:active:not(:disabled){transform:translateY(-2px);box-shadow:0 10px 28px #1e40afb3}.student-level-card:disabled{opacity:.5;cursor:default;box-shadow:none;background:#ffffff0d;color:#dbeafe}.student-back-button-container{margin-top:32px;display:flex;justify-content:center;width:100%}.traffic-light-level{width:36px;background:#222;border-radius:12px;padding:8px 6px;box-shadow:0 2px 6px #000c;border:2px solid #444;display:flex;flex-direction:column;justify-content:space-between;align-items:center;-webkit-user-select:none;user-select:none;margin-top:12px;height:72px}.traffic-light-level .light{width:20px;height:20px;border-radius:50%;background:#444;box-shadow:inset 0 0 6px #000c;transition:background-color .4s ease,box-shadow .4s ease;margin:4px 0}.traffic-light-level .light.on{background:#ef4444;box-shadow:0 0 8px 2px #ef4444}.traffic-light-level .light.green-on{background:#34d399!important;box-shadow:0 0 8px 2px #34d399!important}.traffic-light-level .light.red.on{background:#ef4444;box-shadow:0 0 8px 2px #ef4444}.traffic-light-level .light.yellow.on{background:#fbbf24;box-shadow:0 0 8px 2px #fbbf24}@media(max-width:480px){.student-levels-grid{grid-template-columns:1fr;gap:16px}.student-level-card{font-size:24px;padding:24px 0}.student-back-button{font-size:18px;padding:14px 32px}}.card{background:linear-gradient(135deg,#1e40af,#2563eb);border-radius:16px;padding:24px 32px 32px;box-shadow:0 10px 28px #1e40af66;color:#fff;display:flex;flex-direction:column;text-shadow:0 0 8px rgba(0,0,0,.35)}.card h2{margin:0 0 16px;font-weight:700;color:#fff;text-align:center;text-shadow:0 0 10px rgba(0,0,0,.5)}.student-back-button-container{margin-top:32px;display:flex;justify-content:center}.student-back-button{background:linear-gradient(135deg,#1e40af,#2563eb);color:#fff;border:none;border-radius:12px;padding:12px 28px;font-size:16px;cursor:pointer;box-shadow:0 6px 18px #1e40af99;transition:transform .15s ease,box-shadow .15s ease;-webkit-user-select:none;user-select:none;text-shadow:0 0 8px rgba(0,0,0,.35)}.student-back-button:hover{transform:translateY(-2px);box-shadow:0 8px 24px #1e40afcc}.student-back-button:active{transform:translateY(0);box-shadow:0 4px 12px #1e40af80}@media(max-width:480px){.student-back-button{font-size:18px;padding:14px 32px}}.card.student-profile-container{background:linear-gradient(135deg,#1e40af,#2563eb);border-radius:16px;padding:24px 32px 32px;box-shadow:0 10px 28px #1e40af66;color:#fff;display:flex;flex-direction:column;text-shadow:0 0 8px rgba(0,0,0,.35)}.card.student-profile-container h2{margin:0 0 16px;font-weight:700;color:#fff;text-align:center;text-shadow:0 0 10px rgba(0,0,0,.5)}.student-profile-card{display:flex;flex-direction:column;gap:16px}.student-profile-card label{font-weight:600;margin-bottom:4px;color:#a5d8ff;text-shadow:0 0 6px rgba(0,0,0,.35)}.student-profile-card input,.student-profile-card select{padding:12px;border-radius:12px;border:1px solid #a5d8ff;font-size:16px;outline-offset:2px;transition:border-color .2s ease;background:#1e40af;color:#fff;text-shadow:0 0 6px rgba(0,0,0,.5)}.student-profile-card input::placeholder{color:#cbd5e1}.student-profile-card input:focus,.student-profile-card select:focus{border-color:#dbeafe;box-shadow:0 0 10px #dbeafee6;background:#2563eb;color:#fff}.student-primary-button{background:linear-gradient(135deg,#1e40af,#2563eb);color:#fff;border:none;border-radius:12px;padding:12px;font-size:16px;cursor:pointer;box-shadow:0 6px 18px #1e40af99;transition:transform .15s ease,box-shadow .15s ease;-webkit-user-select:none;user-select:none;text-shadow:0 0 8px rgba(0,0,0,.35)}.student-primary-button:disabled{background:#ffffff1a;cursor:not-allowed;box-shadow:none;opacity:.6}.student-primary-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 24px #1e40afcc}.student-primary-button:active:not(:disabled){transform:translateY(0);box-shadow:0 4px 12px #1e40af80}.student-save-message{color:#34d399;font-weight:600;margin-top:8px;text-shadow:0 0 6px rgba(0,0,0,.35)}@media(max-width:480px){.student-primary-button,.student-profile-card input,.student-profile-card select{font-size:18px;padding:14px}}.card.student-leaderboards-container{background:linear-gradient(135deg,#1e40af,#2563eb);border-radius:16px;padding:24px 32px 32px;box-shadow:0 10px 28px #1e40af66;color:#fff;display:flex;flex-direction:column;text-shadow:0 0 8px rgba(0,0,0,.35)}.card.student-leaderboards-container h2{margin:0 0 16px;font-weight:700;color:#fff;text-align:center;text-shadow:0 0 10px rgba(0,0,0,.5)}.student-leaderboard-table{width:100%;border-collapse:collapse;font-size:16px;color:#fff;text-shadow:0 0 6px rgba(0,0,0,.35)}.student-leaderboard-table thead tr{border-bottom:2px solid rgba(219,234,254,.6);color:#dbeafe;font-weight:600}.student-leaderboard-table th,.student-leaderboard-table td{padding:12px 16px}.student-leaderboard-table th:first-child,.student-leaderboard-table td:first-child{text-align:left}.student-leaderboard-table th:last-child,.student-leaderboard-table td:last-child{text-align:right}.student-leaderboard-table tbody tr{border-bottom:1px solid rgba(219,234,254,.3);transition:background-color .2s ease}.student-leaderboard-table tbody tr:hover{background-color:#dbeafe26}.student-primary-button{background:linear-gradient(135deg,#1e40af,#2563eb);color:#fff;border:none;border-radius:12px;padding:12px 20px;font-size:16px;cursor:pointer;box-shadow:0 6px 18px #1e40af99;transition:transform .15s ease,box-shadow .15s ease;-webkit-user-select:none;user-select:none;text-shadow:0 0 8px rgba(0,0,0,.35)}.student-primary-button:hover{transform:translateY(-2px);box-shadow:0 8px 24px #1e40afcc}.student-primary-button:active{transform:translateY(0);box-shadow:0 4px 12px #1e40af80}@media(max-width:480px){.student-leaderboard-table{font-size:18px}.student-leaderboard-table th,.student-leaderboard-table td{padding:14px 12px}}html,body,#root{min-height:100vh;margin:0}body{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:linear-gradient(135deg,#d0e6ff,#a5c9ff);color:#1f2937}#root{display:flex;flex-direction:column;background:inherit}*{box-sizing:border-box}button{font-family:inherit;cursor:pointer}.card{background:linear-gradient(135deg,#1e40af,#2563eb);padding:20px;border-radius:16px;box-shadow:0 10px 28px #1e40af66;color:#fff;text-shadow:0 0 8px rgba(0,0,0,.35)}.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:inherit}.login-card{width:100%;max-width:360px;background:#fffffff5;padding:24px;border-radius:18px;box-shadow:0 14px 36px #00000040}.login-card h2{text-align:center;margin-bottom:14px}.login-card input{width:100%;padding:12px;margin-top:10px;border-radius:10px;border:1px solid #cbd5e1;font-size:16px}.login-card button{width:100%;margin-top:14px;padding:12px;border-radius:12px;border:none;background:#2f80ed;color:#fff;font-size:16px}.app-bg{min-height:100vh;display:flex;flex-direction:column;background:inherit}.top-bar{background:#1f2937eb;color:#fff;padding:12px 16px;display:flex;justify-content:space-between;align-items:center;position:relative}.top-bar.blue-gradient{background:linear-gradient(135deg,#1e40af,#2563eb);border-radius:12px;box-shadow:0 6px 18px #1e40af99;color:#fff;padding:12px 20px;margin:8px 16px 16px;justify-content:space-between;align-items:center;display:flex}.brand{font-weight:700;font-size:1.25rem;text-shadow:0 0 8px rgba(0,0,0,.35);flex:1;text-align:center}.user{font-weight:600;font-size:.9rem;text-shadow:0 0 6px rgba(0,0,0,.35);flex-shrink:0;white-space:nowrap}.admin-badge{background:#f59e0b;color:#000;padding:2px 6px;border-radius:6px;font-size:12px;margin-left:6px}.content{flex:1;padding:16px}.bottom-nav{display:flex;background:#fff;border-top:1px solid #e5e7eb}.nav-item{flex:1;padding:12px;border:none;background:none;font-size:15px}.nav-item.active{background:#eaf2ff;font-weight:600}.quiz-page{max-width:720px;margin:0 auto}.quiz-question{font-size:18px;margin-bottom:16px;color:#fff;text-shadow:0 0 6px rgba(0,0,0,.3)}.answer-list{list-style:none;padding:0;margin:0}.answer-item{margin-bottom:12px}.answer-btn{width:100%;padding:14px;border-radius:14px;border:none;background:linear-gradient(135deg,#1e40af,#2563eb);font-size:16px;text-align:left;transition:box-shadow .15s ease,transform .15s ease;color:#fff;font-weight:600;cursor:pointer;box-shadow:0 4px 12px #1e40af80;-webkit-user-select:none;user-select:none;text-shadow:0 0 8px rgba(0,0,0,.35);position:relative;overflow:hidden}.answer-btn:hover:not(:disabled){box-shadow:0 0 18px 6px #1e40afcc;transform:scale(1.03)}.answer-btn:active:not(:disabled){transform:scale(.97);box-shadow:0 0 12px 4px #1e40af99}.answer-btn:disabled{opacity:.6;cursor:default;box-shadow:none;background:#3b82f6}.answer-btn.correct{background:#34d399;box-shadow:0 0 14px 4px #10b981;color:#fff;font-weight:700}.answer-btn.wrong{background:#f87171;box-shadow:0 0 14px 4px #ef4444;color:#fff;font-weight:700}.answer-btn.pop{animation:pop .3s ease forwards}.answer-btn.shake{animation:shake .3s ease}@keyframes pop{0%{transform:scale(1);box-shadow:none}50%{transform:scale(1.1);box-shadow:0 0 12px #10b981}to{transform:scale(1);box-shadow:none}}@keyframes shake{0%,to{transform:translate(0)}20%,60%{transform:translate(-8px)}40%,80%{transform:translate(8px)}}.confetti-container{pointer-events:none;position:absolute;top:0;left:0;width:100%;height:100%;overflow:visible;z-index:10}.confetti-particle{position:absolute;opacity:.9;border-radius:2px;animation-name:confetti-fall,confetti-fall-rotate;animation-timing-function:ease-out,linear;animation-iteration-count:1,infinite;animation-fill-mode:forwards;animation-duration:1.2s,2s;will-change:transform,opacity}@keyframes confetti-fall{0%{transform:translateY(0) rotate(0);opacity:1}to{transform:translateY(-150px) rotate(360deg);opacity:0}}@keyframes confetti-fall-rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.traffic-light{width:36px;background:#222;border-radius:12px;padding:8px 6px;box-shadow:0 2px 6px #000c;border:2px solid #444;display:flex;flex-direction:column;justify-content:space-between;align-items:center;-webkit-user-select:none;user-select:none;z-index:20;transition:box-shadow .3s ease}.traffic-light-anim{box-shadow:0 0 12px 4px #fbbf24}.traffic-light .light{width:20px;height:20px;border-radius:50%;background:#444;box-shadow:inset 0 0 6px #000c;transition:background-color .4s ease,box-shadow .4s ease;margin:4px 0}.traffic-light.red .light.red{background:#ef4444;box-shadow:0 0 8px 2px #ef4444}.traffic-light.yellow .light.yellow{background:#fbbf24;box-shadow:0 0 8px 2px #fbbf24}.traffic-light.green .light.green{background:#34d399;box-shadow:0 0 8px 2px #34d399}