:root { font-family: Inter, system-ui, sans-serif; color: #16263b; background: #eef3f8; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 24px; }
main { width: min(100%, 400px); }
.brand { color: #245281; font-size: .9rem; font-weight: 750; }
h1 { margin: 5px 0 22px; font-size: 2.4rem; letter-spacing: -.045em; }
.panel { padding: 24px; border-radius: 16px; border: 1px solid #dce5ef; background: white; }
#status { margin: 0 0 20px; color: #435871; }
form { display: grid; gap: 8px; }
label { font-weight: 650; font-size: .92rem; }
input, button { font: inherit; padding: 10px 12px; border-radius: 8px; }
input { min-width: 0; border: 1px solid #bac9d9; margin-bottom: 5px; }
button { border: 1px solid #155296; background: #155296; color: white; font-weight: 650; cursor: pointer; }
button:disabled { opacity: .55; cursor: default; }
.secondary { background: white; color: #155296; }
.controls { display: flex; gap: 8px; flex-wrap: wrap; }
.controls button, #disconnect { margin-top: 12px; }
[hidden] { display: none !important; }