:root { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif; color: #16181d; background: #f4f5f7; }
* { box-sizing: border-box; }
html, body { overscroll-behavior-y: none; }
body { margin: 0; min-height: 100vh; padding: 14px 14px 88px; }
.hidden { display: none !important; }
.card { padding: 16px; border: 1px solid #dfe2e7; border-radius: 14px; background: #fff; box-shadow: 0 5px 18px rgba(25, 32, 48, .05); }
#pairing { max-width: 430px; margin: 24px auto 0; text-align: center; }
.pair-label { display: block; margin-top: 12px; text-align: left; }
.device-row { display: flex; align-items: stretch; gap: 7px; }
.device-row select { flex: 1; }
.device-row button { flex: 0 0 auto; margin: 7px 0; }
h1 { margin: 0 0 8px; font-size: 21px; }
p { color: #707784; line-height: 1.55; }
input, textarea, select { width: 100%; margin: 7px 0; padding: 12px; border: 1px solid #d2d6dd; border-radius: 9px; background: #fff; color: #20242c; font: inherit; }
textarea { min-height: 90px; resize: vertical; }
button { padding: 10px 12px; border: 1px solid #d3d7de; border-radius: 9px; background: #fff; color: #20242c; font-weight: 650; }
#pairButton, #saveConfig { width: 100%; margin-top: 8px; background: #20242c; color: #fff; }
#scanQrButton, #connectSaved { width: 100%; margin-top: 8px; }
.scanner { margin: 10px 0; padding: 10px; border: 1px solid #dfe2e7; border-radius: 10px; background: #fafafa; }
#qrReader { width: 100%; overflow: hidden; }
#qrReader video { border-radius: 8px; }
#closeScanner { width: 100%; margin-top: 8px; }
.error { color: #bd3348; }
header { display: flex; justify-content: space-between; align-items: center; padding: 8px 4px 14px; }
header p { margin: 0; font-size: 12px; }
#deviceSwitcher { width: auto; max-width: 250px; margin: 5px 0 0; padding: 5px 8px; font-size: 12px; }
#listening { padding: 6px 10px; border-radius: 999px; background: #e5e7eb; font-size: 12px; }
#listening.live { background: #d9f7e9; color: #18794e; }
main { display: grid; gap: 12px; }
label, summary, #phase { color: #707784; font-size: 12px; font-weight: 650; }
.row { display: flex; justify-content: space-between; }
.question { margin-top: 10px; font-size: 17px; font-weight: 720; line-height: 1.5; }
#answer { min-height: 40vh; margin-top: 12px; font-size: 18px; line-height: 1.7; white-space: pre-wrap; }
#context { margin-top: 10px; color: #505763; line-height: 1.65; white-space: pre-wrap; }
.notice, #configStatus { font-size: 12px; }
.config-section { margin-top: 16px; padding-top: 13px; border-top: 1px solid #e4e7eb; box-shadow: none; }
.config-section h3 { margin: 0 0 10px; font-size: 14px; }
.config-field { display: block; margin: 10px 0; color: #656c78; font-size: 12px; }
.config-field input, .config-field select, .config-field textarea { margin-top: 5px; padding: 10px; }
.config-field.checkbox { display: flex; align-items: center; gap: 8px; }
.config-field.checkbox input { width: auto; margin: 0; }
.config-field input:disabled { background: #eceef1; color: #858b95; }
nav { position: fixed; left: 0; right: 0; bottom: 0; display: flex; gap: 7px; overflow-x: auto; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid #dfe2e7; background: rgba(255,255,255,.95); backdrop-filter: blur(14px); }
nav button { flex: 0 0 auto; }
@media (min-width: 760px) { #app { max-width: 780px; margin: 0 auto; } nav { justify-content: center; } }