*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;min-height:100vh;font-family:-apple-system,"Helvetica Neue",Helvetica,Arial,sans-serif;color:#222;overflow-x:hidden;
 background:#3a3d42 radial-gradient(ellipse at 50% 0,#5a5e66,#2a2c30 70%);
 padding:max(16px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
[hidden]{display:none!important}
.radio{position:relative;max-width:560px;margin:28px auto 0;padding:18px 16px 22px;border-radius:28px;
 background:linear-gradient(180deg,#4a4e55,#2f3237 40%,#25272b);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.25),inset 0 -2px 6px rgba(0,0,0,.6),0 12px 30px rgba(0,0,0,.6),0 0 0 1px #111}
.radio::before{content:"";position:absolute;inset:0;border-radius:inherit;filter:url(#noise);background:#888;opacity:.12;pointer-events:none;mix-blend-mode:overlay}
.antenna{position:absolute;top:-26px;right:44px;width:14px;height:34px;border-radius:7px 7px 2px 2px;background:linear-gradient(90deg,#111,#3c3f45 50%,#111);box-shadow:0 0 0 1px #000}
.top{display:flex;align-items:center;gap:12px;margin-bottom:12px}
h1{flex:1;margin:0;font-size:20px;letter-spacing:.06em;text-transform:uppercase;color:#d8dbe0;text-shadow:0 -1px 0 #000}
h1 small{display:block;font-size:10px;letter-spacing:.2em;color:#8b9098;margin-top:2px}
.knob{width:44px;height:44px;border-radius:50%;flex:none;
 background:repeating-conic-gradient(from 0deg,#bfc3c9 0 4deg,#8d9198 4deg 8deg);box-shadow:0 2px 4px rgba(0,0,0,.7),inset 0 0 0 5px rgba(0,0,0,.15);position:relative}
.knob::after{content:"";position:absolute;inset:9px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#f2f3f5,#9a9ea5 70%);box-shadow:inset 0 -1px 2px rgba(0,0,0,.4)}
.led{width:12px;height:12px;border-radius:50%;flex:none;background:radial-gradient(circle at 35% 35%,#c6ffb0,#2dbb3a 60%,#0d5a16);box-shadow:0 0 8px #3f3,inset 0 -1px 2px rgba(0,0,0,.4)}
.grille{height:46px;margin:0 6px 14px;border-radius:10px;background:radial-gradient(circle,#0b0c0d 2.2px,transparent 2.6px) 0 0/10px 10px,linear-gradient(#1c1e21,#2a2c30);box-shadow:inset 0 2px 4px rgba(0,0,0,.8),0 1px 0 rgba(255,255,255,.1)}
.lcd{font-family:"SF Mono",Menlo,Consolas,"Courier New",monospace;color:#1d2a12;padding:12px 14px;border-radius:8px;margin-bottom:14px;
 background:linear-gradient(180deg,#a9c18a,#c5d9a2 30%,#b3cb8f);border:2px solid #1a1b1d;
 box-shadow:inset 0 3px 8px rgba(0,0,0,.45),inset 0 0 20px rgba(40,70,10,.25),0 1px 0 rgba(255,255,255,.15);text-shadow:1px 1px 0 rgba(0,0,0,.12);overflow:hidden}
.lcd-row{display:flex;gap:10px;font-size:16px;min-width:0;line-height:1.5}
.lcd-row b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-transform:uppercase}
.lbl{flex:none;width:62px;opacity:.6;font-size:12px;padding-top:3px}
#stats{font-size:11px;margin-top:6px;padding-top:6px;border-top:1px dashed rgba(29,42,18,.35);line-height:1.6;word-break:break-word;opacity:.85}
.lcd-lobby{display:flex;justify-content:space-between;font-size:16px}
.blink{-webkit-animation:bl 1.2s steps(1) infinite;animation:bl 1.2s steps(1) infinite}
@-webkit-keyframes bl{50%{opacity:0}}@keyframes bl{50%{opacity:0}}
.plate{display:block;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#9aa0a8;margin:0 0 6px 4px;text-shadow:0 -1px 0 #000}
.invite{margin-bottom:16px}
.invite-row{display:flex;gap:8px;min-width:0}
input,select,button{font:inherit;-webkit-appearance:none;appearance:none}
#link,#msg{flex:1 1 auto;min-width:0;width:100%;height:44px;padding:0 12px;border-radius:10px;border:1px solid #0d0e10;color:#2a2c2f;
 font-family:"SF Mono",Menlo,Consolas,monospace;font-size:14px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;
 background:linear-gradient(#d9dce0,#f3f4f6);box-shadow:inset 0 2px 4px rgba(0,0,0,.35)}
#msg:disabled{opacity:.6}
.btn{flex:none;min-height:44px;min-width:44px;padding:0 14px;border-radius:10px;border:1px solid #0d0e10;cursor:pointer;font-weight:600;font-size:14px;color:#25282c;text-shadow:0 1px 0 rgba(255,255,255,.6);
 background:linear-gradient(#f4f5f7,#c6cad0 55%,#b2b7be);box-shadow:inset 0 1px 0 #fff,0 2px 3px rgba(0,0,0,.5);white-space:nowrap;touch-action:manipulation}
.btn:active{background:linear-gradient(#b2b7be,#d2d5da);box-shadow:inset 0 2px 4px rgba(0,0,0,.4)}
.btn:disabled{opacity:.5;cursor:default}
.btn.copied{color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,.4);background:linear-gradient(#7fd76b,#3ea52b);}
.ptt{display:block;width:100%;min-height:96px;margin:4px 0;border-radius:22px;border:2px solid #0b0c0d;cursor:pointer;touch-action:manipulation;
 font-size:22px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#4a0d07;text-shadow:0 1px 0 rgba(255,255,255,.35);
 background:radial-gradient(ellipse at 50% 20%,rgba(255,255,255,.45),transparent 55%),linear-gradient(#f0573f,#c22c18 60%,#9d1f10);
 box-shadow:inset 0 2px 0 rgba(255,255,255,.4),inset 0 -4px 8px rgba(0,0,0,.35),0 5px 0 #4b0e06,0 9px 14px rgba(0,0,0,.6);
 -webkit-transition:transform .08s,box-shadow .08s;transition:transform .08s,box-shadow .08s}
.ptt:active{-webkit-transform:translateY(4px);transform:translateY(4px);box-shadow:inset 0 2px 6px rgba(0,0,0,.4),0 1px 0 #4b0e06,0 3px 6px rgba(0,0,0,.6)}
#lobby .ptt{background:radial-gradient(ellipse at 50% 20%,rgba(255,255,255,.5),transparent 55%),linear-gradient(#9be27c,#4aa632 60%,#33801f);color:#123508;box-shadow:inset 0 2px 0 rgba(255,255,255,.4),inset 0 -4px 8px rgba(0,0,0,.35),0 5px 0 #1d4a10,0 9px 14px rgba(0,0,0,.6)}
.ptt.muted{background:linear-gradient(#80858c,#5b5f66 60%,#45484e);color:#1d1f22;box-shadow:inset 0 2px 6px rgba(0,0,0,.5),0 2px 0 #222,0 4px 8px rgba(0,0,0,.5);-webkit-transform:translateY(3px);transform:translateY(3px)}
.controls{margin-bottom:12px}
.selects{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
select{flex:1 1 140px;min-width:0;height:44px;padding:0 12px;border-radius:10px;border:1px solid #0d0e10;color:#25282c;font-size:14px;text-overflow:ellipsis;
 background:linear-gradient(#f4f5f7,#c6cad0);box-shadow:inset 0 1px 0 #fff,0 2px 3px rgba(0,0,0,.5)}
.note{margin:0;color:#c9ccd1;font-size:13px}
.screen{display:block;width:100%;border-radius:8px;border:2px solid #0b0c0d;background:#0c120a;box-shadow:inset 0 2px 8px rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.1);margin:10px 0}
#chart{height:120px}
#log{height:240px;overflow:auto;-webkit-overflow-scrolling:touch;padding:10px;color:#b8f59a;font-family:"SF Mono",Menlo,Consolas,monospace;font-size:13px;line-height:1.45;overflow-wrap:anywhere;word-break:break-word}
#log b{color:#e0ffcf}.sys{color:#6f8f62}
#log a{color:#8fd6ff;text-decoration:underline;word-break:break-all}#log a:hover{color:#bfe6ff}
#chat{display:flex;gap:8px;min-width:0}
@media (min-width:700px){.radio{margin-top:48px;padding:24px 28px 28px}h1{font-size:24px}.lcd-row{font-size:18px}}
.signal{display:none;margin-top:12px}
body.peer-on .signal{display:block}
#chart{height:46px;margin-top:0}
#log{margin-top:0}
#log:empty::before{content:"No messages yet";color:#4f6a45;font-style:italic}
.screen+.plate,.note+.plate{margin-top:12px}
.signal+.plate{margin-top:14px}
.beta{display:inline-block;background:#ff5a36;color:#fff;font-size:.55em;font-weight:800;letter-spacing:.08em;padding:2px 6px;border-radius:4px;vertical-align:middle;box-shadow:0 1px 0 rgba(0,0,0,.4)}
#creategroup{margin-top:10px}
#peerlist{margin-top:6px}#peers{list-style:none;margin:4px 0 0;padding:0}
#peers li{display:grid;grid-template-columns:1fr 90px;gap:2px 8px;align-items:center;padding:4px 0;border-top:1px dashed rgba(0,0,0,.25);font-size:13px}
#peers .pn{font-weight:700}#peers .ps{grid-column:1;font-size:11px;opacity:.8}#peers .pv{grid-column:2;grid-row:1/3;width:90px}