body{text-align:center;color:#e0e0e0;background:linear-gradient(135deg,#1a1a2e 0%,#16213e 100%);justify-content:center;align-items:center;min-height:100vh;margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;display:flex}.web-buzzer-container{background:#1e1e2e;border:1px solid #2a2a3e;border-radius:20px;width:90%;max-width:500px;padding:2rem;box-shadow:0 20px 60px rgba(0,0,0,.5)}.web-buzzer-container h1{color:#f0f0f0;margin:0 0 1.5rem;font-size:2rem}.web-buzzer-container .error-banner{color:#ff6b6b;background:rgba(244,67,54,.15);border:1px solid rgba(244,67,54,.3);border-radius:8px;margin-bottom:1.5rem;padding:1rem;font-weight:600}.web-buzzer-container .disconnect-banner{color:#ffb74d;background:rgba(255,152,0,.15);border:1px solid rgba(255,152,0,.3);border-radius:8px;flex-direction:column;align-items:center;gap:1rem;margin-bottom:1.5rem;padding:1.5rem;font-weight:600;display:flex}.web-buzzer-container .disconnect-banner .reconnect-btn{color:#fff;cursor:pointer;background:#ff9800;border:none;border-radius:6px;padding:.75rem 1.5rem;font-size:1rem;font-weight:600;transition:all .2s}.web-buzzer-container .disconnect-banner .reconnect-btn:hover{background:#f57c00;transform:scale(1.05)}.web-buzzer-container .disconnect-banner .reconnect-btn:active{transform:scale(.95)}.web-buzzer-container .buzzer-button-container{margin:2rem 0;padding:1rem}.web-buzzer-container .buzzer-button-large{letter-spacing:2px;cursor:pointer;color:#fff;background:linear-gradient(135deg,#c471f5 0%,#fa71cd 100%);border:none;border-radius:50%;width:280px;height:280px;font-size:3rem;font-weight:900;transition:all .15s;position:relative;overflow:hidden;box-shadow:0 10px 40px rgba(196,113,245,.5),0 0 80px rgba(196,113,245,.2)}.web-buzzer-container .buzzer-button-large:before{content:"";opacity:0;background:radial-gradient(circle,rgba(255,255,255,.3) 0%,transparent 70%);transition:opacity .15s;position:absolute;inset:0}.web-buzzer-container .buzzer-button-large:hover:not(:disabled){transform:scale(1.05);box-shadow:0 15px 50px rgba(196,113,245,.6),0 0 100px rgba(196,113,245,.3)}.web-buzzer-container .buzzer-button-large:hover:not(:disabled):before{opacity:1}.web-buzzer-container .buzzer-button-large:active:not(:disabled){transform:scale(.92);box-shadow:0 5px 25px rgba(196,113,245,.7),0 0 60px rgba(196,113,245,.4)}.web-buzzer-container .buzzer-button-large:active:not(:disabled):before{opacity:.5}.web-buzzer-container .buzzer-button-large.lit{background:linear-gradient(135deg,#ff6b6b 0%,#ee5a6f 100%);animation:1s infinite pulse;box-shadow:0 10px 50px rgba(255,107,107,.7),0 0 100px rgba(255,107,107,.4)}.web-buzzer-container .buzzer-button-large.lit:before{background:radial-gradient(circle,rgba(255,255,255,.4) 0%,transparent 70%)}.web-buzzer-container .buzzer-button-large:disabled{opacity:.4;cursor:not-allowed;box-shadow:none;background:#3a3a4e}.web-buzzer-container .buzzer-button-large:disabled:before{display:none}.web-buzzer-container .buzzer-button-large .button-content{text-shadow:0 2px 4px rgba(0,0,0,.3);z-index:1;justify-content:center;align-items:center;height:100%;display:flex;position:relative}@keyframes pulse{0%,to{box-shadow:0 10px 50px rgba(255,107,107,.7),0 0 100px rgba(255,107,107,.4)}50%{box-shadow:0 10px 70px rgba(255,107,107,.9),0 0 140px rgba(255,107,107,.6)}}.web-buzzer-container .instructions{color:#b0b0b0;margin:1.5rem 0 2rem;font-size:1.1rem;font-weight:500}.web-buzzer-container .footer{border-top:1px solid #2a2a3e;flex-direction:column;gap:1rem;margin-top:1.5rem;padding-top:1.5rem;display:flex}.web-buzzer-container .footer .footer-content{flex-direction:column;gap:.75rem;display:flex}.web-buzzer-container .footer .footer-reset{justify-content:center;align-items:center;min-height:2rem;display:flex}.web-buzzer-container .footer .debug-toggle{cursor:pointer;color:#b0b0b0;background:#2a2a3e;border:1px solid #3a3a4e;border-radius:6px;padding:.5rem 1rem;font-size:.85rem;transition:all .2s}.web-buzzer-container .footer .debug-toggle:hover{color:#d0d0d0;background:#3a3a4e;border-color:#4a4a5e}.web-buzzer-container .footer .debug-info{text-align:left;color:#b0b0b0;background:#252535;border:1px solid #3a3a4e;border-radius:8px;padding:1rem;font-size:.85rem}.web-buzzer-container .footer .debug-info p{word-break:break-all;margin:.5rem 0}.web-buzzer-container .footer .debug-info strong{color:#d0d0d0}.web-buzzer-container .footer .reset-link{color:#666;cursor:pointer;background:0 0;border:none;padding:.5rem;font-size:.75rem;text-decoration:underline}.web-buzzer-container .footer .reset-link:hover{color:#888}.admin-container{background:#1e1e2e;max-width:1200px;min-height:100vh;margin:0 auto;padding:2rem}.admin-container h1{color:#f0f0f0}.admin-container .connection-status{color:#64b5f6;background:rgba(33,150,243,.15);border:1px solid rgba(33,150,243,.3);border-radius:8px;margin-bottom:1rem;padding:1rem}.admin-container .controls{margin:1rem 0}.admin-container .controls button{color:#fff;cursor:pointer;background:#2196f3;border:none;border-radius:6px;padding:.75rem 1.5rem;font-size:1rem;transition:all .2s}.admin-container .controls button:hover{background:#1976d2;box-shadow:0 4px 12px rgba(33,150,243,.4)}.admin-container .buzzer-status h2{color:#d0d0d0;margin-bottom:1rem}.admin-container .buzzer-status .no-buzzers{color:#666;padding:2rem;font-style:italic}.admin-container .buzzer-status .buzzer-card{background:#252535;border:2px solid #3a3a4e;border-radius:12px;min-width:200px;margin:.5rem;padding:1rem;transition:all .3s;display:inline-block;position:relative}.admin-container .buzzer-status .buzzer-card.lit{background:rgba(244,67,54,.15);border-color:#ff6b6b;box-shadow:0 4px 12px rgba(244,67,54,.4)}.admin-container .buzzer-status .buzzer-card.locked{box-shadow:0 6px 20px rgba(244,67,54,.5)}.admin-container .buzzer-status .buzzer-card .mac{color:#b0b0b0;margin-bottom:.5rem;font-family:monospace;font-size:.9rem}.admin-container .buzzer-status .buzzer-card .type{color:#888;text-transform:uppercase;font-size:.8rem}.admin-container .buzzer-status .buzzer-card .status{margin:.5rem 0;font-size:1.5rem}.admin-container .buzzer-status .buzzer-card .duration{color:#888;font-size:.75rem}.admin-container .buzzer-status .buzzer-card .remove-buzzer-btn{color:#ff6b6b;cursor:pointer;background:rgba(244,67,54,.2);border:1px solid rgba(244,67,54,.4);border-radius:6px;width:100%;margin-top:.75rem;padding:.5rem 1rem;font-size:.85rem;transition:all .2s}.admin-container .buzzer-status .buzzer-card .remove-buzzer-btn:hover{color:#ff8a80;background:rgba(244,67,54,.3);border-color:rgba(244,67,54,.6)}.admin-container .buzzer-status .buzzer-card .remove-buzzer-btn:active{transform:scale(.95)}