* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #0b0e14; color: #d7dce6; font-family: -apple-system, system-ui, sans-serif; }
body { overscroll-behavior: none; }

.screen { height: 100dvh; display: flex; flex-direction: column; box-sizing: border-box; }
.screen[hidden] { display: none; }

#login { align-items: center; justify-content: center; gap: 12px; padding: 24px; }
#login h1 { margin: 0 0 8px; }
#login input, #login button { padding: 14px; border-radius: 10px; border: 1px solid #2a2f3a; background: #151924; color: inherit; font-size: 16px; width: 100%; max-width: 320px; }
#login button { background: #2b6cff; border-color: #2b6cff; font-weight: 600; }
.err { color: #ff5c5c; min-height: 1.2em; }

#topbar { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: #10141c; border-bottom: 1px solid #1e2330; padding-top: max(8px, env(safe-area-inset-top)); }
#topbar button { background: transparent; border: 0; color: #d7dce6; font-size: 20px; padding: 6px 10px; }
#status { flex: 1; font-size: 13px; opacity: 0.75; }

#term { flex: 1; min-height: 0; padding: 4px; }
#term.selmode { outline: 2px solid #2b6cff; outline-offset: -2px; }
#topbar button.active { background: #2b6cff; color: #fff; border-radius: 6px; }
#term .xterm { height: 100%; }

#voiceBtn { position: fixed; right: 10px; bottom: calc(var(--vkb-h, 56px) + 8px); width: 36px; height: 36px; border-radius: 50%; background: rgba(26,32,48,0.75); border: 1px solid #263044; color: #8a93a6; padding: 0; display: flex; align-items: center; justify-content: center; z-index: 60; backdrop-filter: blur(6px); touch-action: none; }
#voiceBtn:active, #voiceBtn.rec { background: #2b6cff; color: #fff; border-color: #2b6cff; }

#vkb { flex: 0 0 auto; display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 4px; padding: 6px; padding-bottom: max(6px, env(safe-area-inset-bottom)); background: #0e1220; border-top: 1px solid #1e2330; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
#vkb button { flex: 0 0 auto; min-width: 44px; background: #1a2030; border: 1px solid #263044; color: #d7dce6; padding: 10px 12px; border-radius: 8px; font-size: 14px; touch-action: manipulation; white-space: nowrap; }
#vkb button:active { background: #2b6cff; }
#scrollCtl { position: absolute; right: 8px; top: 60px; display: flex; flex-direction: column; gap: 4px; z-index: 50; }
#scrollCtl button { width: 40px; height: 40px; border-radius: 20px; background: rgba(26,32,48,0.85); border: 1px solid #263044; color: #d7dce6; font-size: 16px; backdrop-filter: blur(6px); }
#scrollCtl button:active { background: #2b6cff; }

dialog { background: #151924; color: inherit; border: 1px solid #2a2f3a; border-radius: 12px; max-width: 90vw; width: 420px; }
dialog form { display: flex; flex-direction: column; gap: 8px; }
dialog input, dialog textarea { padding: 10px; border-radius: 8px; border: 1px solid #2a2f3a; background: #0e1220; color: inherit; font: inherit; }
dialog textarea { min-height: 80px; }
dialog button { padding: 10px 14px; border-radius: 8px; border: 0; background: #2b6cff; color: white; font-weight: 600; }
#hostsList { list-style: none; padding: 0; margin: 0 0 10px; }
#hostsList li { display: flex; justify-content: space-between; padding: 8px; border-radius: 8px; background: #0e1220; margin-bottom: 6px; }
#hostsList button { background: transparent; color: #8aa0ff; padding: 4px 8px; }