* { box-sizing: border-box; margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
body { background-color: #0f172a; color: #f8fafc; display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 16px; }
.card { background: #1e293b; padding: 24px; border-radius: 12px; width: 100%; max-width: 400px; box-shadow: 0 4px 20px rgba(0,0,0,0.5); text-align: center; }
h2 { margin-bottom: 12px; font-size: 1.5rem; }
p { color: #94a3b8; margin-bottom: 20px; font-size: 0.95rem; }
input { width: 100%; padding: 12px; margin-bottom: 16px; background: #0f172a; border: 1px solid #334155; border-radius: 8px; color: #fff; font-size: 1rem; text-align: center; }
input:focus { outline: none; border-color: #38bdf8; }
.btn { width: 100%; padding: 12px; background: #0284c7; color: white; border: none; border-radius: 8px; font-size: 1rem; font-weight: bold; cursor: pointer; margin-bottom: 8px; transition: background 0.2s; }
.btn:hover { background: #0369a1; }
.btn.secondary { background: #475569; }
.btn.secondary:hover { background: #334155; }
.btn.danger { background: #dc2626; }
.btn.danger:hover { background: #b91c1c; }
.hidden { display: none !important; }
.badge { display: inline-block; padding: 6px 12px; border-radius: 20px; font-size: 0.85rem; font-weight: bold; margin-bottom: 16px; }
.badge.connecting { background: #ca8a04; color: #fff; }
.badge.connected { background: #16a34a; color: #fff; }
.badge.disconnected { background: #dc2626; color: #fff; }