*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.app{min-height:100vh;background:linear-gradient(135deg,#667eea,#764ba2);padding:20px;display:flex;justify-content:center;align-items:center}.container{background:#fff;border-radius:20px;box-shadow:0 20px 60px #0000004d;padding:40px;max-width:800px;width:100%}.header{text-align:center;margin-bottom:30px;position:relative}.header h1{font-size:2.5rem;color:#333;margin-bottom:10px}.connection-status{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:20px;font-size:.85rem;font-weight:500}.connection-status.connected{background:#d4edda;color:#155724}.connection-status.disconnected{background:#f8d7da;color:#721c24}.dot{font-size:1.2rem;line-height:1}.stats{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:30px}.stat-card{background:linear-gradient(135deg,#667eea,#764ba2);padding:20px;border-radius:12px;text-align:center;color:#fff;display:flex;flex-direction:column;gap:8px}.stat-card.single{grid-column:1 / -1;max-width:400px;margin:0 auto;width:100%}.stat-number{font-size:3rem;font-weight:700}.stat-label{font-size:.9rem;opacity:.9}.result-card{background:linear-gradient(135deg,#667eea,#764ba2);padding:40px;border-radius:16px;text-align:center;margin-bottom:30px;animation:slideIn .5s ease-out}@keyframes slideIn{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.result-label{color:#ffffffe6;font-size:1.1rem;margin-bottom:15px;text-transform:uppercase;letter-spacing:2px}.result-name{color:#fff;font-size:3rem;font-weight:700;text-shadow:0 2px 10px rgba(0,0,0,.2)}.animation-card{background:linear-gradient(135deg,#667eea,#764ba2);padding:40px;border-radius:16px;text-align:center;margin-bottom:30px}.spinning-name{color:#fff;font-size:2.5rem;font-weight:700;animation:pulse .1s ease-in-out}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.user-selection{margin-bottom:30px;text-align:center}.user-selection label{display:block;font-size:1.2rem;font-weight:600;color:#333;margin-bottom:12px}.user-selection select{width:100%;max-width:400px;padding:14px 20px;font-size:1.1rem;border:2px solid #667eea;border-radius:12px;background:#fff;color:#333;cursor:pointer;transition:all .3s ease;outline:none}.user-selection select:hover:not(:disabled){border-color:#764ba2;box-shadow:0 4px 12px #667eea33}.user-selection select:focus{border-color:#764ba2;box-shadow:0 0 0 3px #667eea1a}.user-selection select:disabled{opacity:.6;cursor:not-allowed}.actions{display:flex;gap:15px;margin-bottom:40px}.btn{flex:1;padding:16px 32px;border:none;border-radius:12px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .3s ease;text-transform:uppercase;letter-spacing:1px}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:linear-gradient(135deg,#11998e,#38ef7d);color:#fff}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 20px #11998e66}.btn-danger{background:linear-gradient(135deg,#eb3349,#f45c43);color:#fff}.btn-danger:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 20px #eb334966}.finish-section{text-align:center;margin-bottom:30px}.btn-finish{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;min-width:200px}.btn-finish:hover{transform:translateY(-2px);box-shadow:0 8px 20px #667eea66}.names-section{margin-bottom:30px}.names-section:last-child{margin-bottom:0}.names-section h3{color:#333;margin-bottom:15px;font-size:1.3rem}.names-list{display:flex;flex-wrap:wrap;gap:10px}.name-tag{padding:10px 20px;border-radius:25px;font-size:1rem;font-weight:500;transition:all .2s ease}.name-tag.available{background:#e3f2fd;color:#1976d2;border:2px solid #1976d2}.name-tag.drawn{background:#f5f5f5;color:#9e9e9e;text-decoration:line-through;border:2px solid #e0e0e0}.empty-message{color:#999;font-style:italic;padding:20px;text-align:center}@media (max-width: 768px){.container{padding:20px}.header h1{font-size:2rem}.stats{grid-template-columns:1fr}.stat-number{font-size:2.5rem}.result-name{font-size:2rem}.actions{flex-direction:column}.btn{font-size:1rem;padding:14px 24px}}