:root { font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:#101828; background:#f2f4f7; }
* { box-sizing:border-box; }
body { margin:0; }
main { width:min(680px,100%); margin:auto; padding:18px; }
header { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
h1 { font-size:1.45rem; margin:0; flex:1; } h2 { font-size:1rem; margin:0 0 12px; }
.card { background:white; border:1px solid #e4e7ec; border-radius:13px; padding:16px; margin-bottom:14px; }
label { display:block; font-weight:600; margin:8px 0 6px; }
textarea,input,select { width:100%; border:1px solid #d0d5dd; border-radius:9px; padding:11px; font:inherit; background:white; }
textarea { resize:vertical; min-height:128px; }
.buffer-field { position:relative; }
.buffer-field textarea { padding-right:54px; }
button { width:100%; min-height:44px; border:0; border-radius:9px; padding:10px 16px; margin-top:12px; color:white; background:#344054; font:inherit; font-weight:600; }
button.primary { background:#155eef; } button:disabled { opacity:.5; }
.header-button { width:auto; min-height:36px; margin:0; padding:7px 10px; background:transparent; color:#344054; }
.icon-button { width:38px; min-height:38px; padding:0; margin:0; background:#f2f4f7; color:#344054; font-size:1.15rem; }
.buffer-field .icon-button { position:absolute; right:7px; top:7px; }
.hidden { display:none !important; }
.dot { width:11px; height:11px; border-radius:50%; display:inline-block; background:#98a2b3; }
.dot.local { background:#12b76a; } .dot.connecting { background:#f79009; }
#status { color:#667085; font-size:.9rem; }
.muted { color:#667085; font-size:.9rem; }
.device { display:flex; align-items:center; gap:9px; min-height:32px; }
dialog { width:min(92vw,480px); border:1px solid #e4e7ec; border-radius:14px; padding:16px; color:inherit; }
dialog::backdrop { background:#10182866; }
.dialog-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.dialog-header h2 { margin:0; }
.toast { position:fixed; left:50%; bottom:20px; transform:translateX(-50%); z-index:10; padding:10px 14px; border-radius:9px; color:white; background:#101828; box-shadow:0 4px 16px #10182833; }
@media(max-width:520px){main{padding:12px}.card{padding:14px}}