:root{--bg:#161616;--fg:#e8e8e8;--accent:#c0392b;--accent-dim:#7b241c;--accent-glow:#c0392b33;--card:#222;--card-top:#ffffff0e;--border:#383838;--input-bg:#0d0d0d;--success:#27ae60;--warning:#f39c12;--error:#e74c3c;--muted:#888;--radius:10px}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}body{background:var(--bg);color:var(--fg);min-height:100vh;min-height:100dvh;padding:2.5rem max(1.25rem, env(safe-area-inset-right)) 2rem max(1.25rem, env(safe-area-inset-left));padding-top:max(2rem, env(safe-area-inset-top));padding-bottom:max(2rem, env(safe-area-inset-bottom));flex-direction:column;align-items:center;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;display:flex}header{text-align:center;margin-bottom:2rem}header h1{color:var(--accent);letter-spacing:.06em;text-shadow:0 0 32px var(--accent-glow);font-size:2.1rem;font-weight:700}header p{color:var(--muted);letter-spacing:.04em;text-transform:uppercase;margin-top:.35rem;font-size:.85rem}.card{border:1px solid var(--border);border-top:1px solid var(--card-top);border-radius:var(--radius);background:linear-gradient(#272727 0%,#202020 100%);width:100%;max-width:500px;margin-bottom:1.25rem;padding:1.5rem;box-shadow:0 2px 14px #00000073}.card h2{text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-bottom:1rem;font-size:.7rem;font-weight:700}.field{flex-direction:column;gap:.35rem;margin-bottom:1rem;display:flex}label{color:var(--muted);letter-spacing:.02em;font-size:.8rem;font-weight:500}input[type=text]{background:var(--input-bg);border:1px solid var(--border);color:var(--fg);-webkit-appearance:none;appearance:none;border-radius:6px;width:100%;min-height:44px;padding:.65rem .75rem;font-size:1rem;transition:border-color .15s}input[type=text]:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow);outline:none}input[type=text]::placeholder{color:#444}button{color:#fff;cursor:pointer;letter-spacing:.02em;touch-action:manipulation;background:#555;border:none;border-radius:6px;width:100%;min-height:44px;padding:.75rem 1.2rem;font-size:.95rem;font-weight:600;transition:background .15s,box-shadow .15s}button:hover:not(:disabled){box-shadow:none;background:#666}button:active:not(:disabled){background:#777}button:disabled{cursor:not-allowed;opacity:.5;background:#444}button.btn-connected{background:var(--success)}button.btn-connected:hover:not(:disabled){background:#219a52;box-shadow:0 0 12px #27ae604d}button.btn-connected:active:not(:disabled){background:#1e8449}.connect-row{gap:.5rem;display:flex}.connect-row button:first-child{flex:3}.btn-disconnect{background:var(--error);flex:1;padding:.5rem .4rem;font-size:.8rem}.btn-disconnect:hover:not(:disabled){background:#c0392b;box-shadow:0 0 12px #e74c3c4d}.btn-disconnect:active:not(:disabled){background:#a93226}button.btn-ghost{border:1px solid var(--border);color:var(--fg);background:0 0;font-weight:500}button.btn-ghost:hover:not(:disabled){box-shadow:none;background:#ffffff0d;border-color:#555}button.btn-ghost:active:not(:disabled){background:#ffffff14}button.btn-ghost:disabled{border-color:var(--border);opacity:.4;background:0 0}.status-row{align-items:center;gap:.55rem;padding:.35rem 0;font-size:.875rem;display:flex}.dot{background:var(--border);border-radius:50%;flex-shrink:0;width:12px;height:12px;transition:background .3s,box-shadow .3s}.dot.connected{background:var(--success);box-shadow:0 0 8px #27ae6080}.dot.error{background:var(--error);box-shadow:0 0 8px #e74c3c80}.dot.connecting{background:var(--warning);animation:1.4s ease-in-out infinite pulse}@keyframes pulse{0%,to{opacity:1}50%{opacity:.35}}#log{color:#aaa;background:var(--input-bg);border:1px solid var(--border);scrollbar-width:thin;scrollbar-color:#3a3a3a transparent;border-radius:6px;height:160px;padding:.6rem .75rem;font-family:Menlo,Consolas,ui-monospace,monospace;font-size:.75rem;overflow-y:auto}#log p{margin:0;padding:.05rem 0;line-height:1.6}#log p:nth-child(odd){background:#ffffff05}.pause-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:#fce8bf;z-index:9999;text-align:center;background:#000000e0;justify-content:center;align-items:center;padding:2rem;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;font-size:1.2rem;font-weight:500;animation:.25s fadeIn;display:flex;position:fixed;top:0;bottom:0;left:0;right:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}footer{color:#444;text-align:center;margin-top:auto;padding-top:2rem;font-size:.75rem}footer a{color:#666;text-decoration:none;transition:color .15s}footer a:hover{color:#999}@media (max-width:480px){header{margin-bottom:1.5rem}header h1{font-size:1.75rem}.card{border-radius:8px;margin-bottom:1rem;padding:1.25rem 1rem}#logs-actions{flex-direction:column}#log{height:180px;font-size:.72rem}}@media (max-width:600px) and (orientation:landscape){body{padding-top:max(1rem, env(safe-area-inset-top))}header{margin-bottom:1rem}header h1{font-size:1.6rem}.card{margin-bottom:.75rem}#log{height:120px}}