/* ── Painel de intercom (estilo key panel RTS/Riedel) ───────── */
:root { --brand: #7357FF; --talk: #EF4444; --listen: #22C55E; --key: #15151D; --line: #262633; }
html, body { overscroll-behavior: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.safe-pad { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
.safe-pad-b { padding-bottom: calc(2rem + env(safe-area-inset-bottom)); }

.icon-btn { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: var(--key); border: 1px solid var(--line); color: #a1a1aa; }
.icon-btn.on { color: var(--talk); border-color: rgb(239 68 68 / .5); }
.mode-pill { height: 32px; padding: 0 12px; border-radius: 999px; font: 700 11px 'JetBrains Mono', monospace; letter-spacing: .08em; background: var(--key); border: 1px solid var(--line); color: #d4d4d8; }

/* Linha de canal */
.ch { display: grid; grid-template-columns: 6px 1fr auto auto; align-items: stretch; gap: 10px; background: var(--key); border: 1px solid var(--line); border-radius: 16px; padding: 10px 10px 10px 0; transition: border-color .15s, box-shadow .15s; }
.ch.active { border-color: color-mix(in srgb, var(--ch) 70%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ch) 40%, transparent) inset; }
.ch.calling { animation: callflash .5s steps(2) 6; }
@keyframes callflash { 50% { background: color-mix(in srgb, var(--ch) 35%, var(--key)); } }
.ch-strip { background: var(--ch); border-radius: 0 6px 6px 0; }
.ch-info { min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.ch-name { font-weight: 700; font-size: 16px; line-height: 1.1; display: flex; align-items: center; gap: 8px; }
.ch-id { font: 700 11px 'JetBrains Mono', monospace; color: var(--ch); border: 1px solid currentColor; border-radius: 6px; padding: 1px 5px; }
.ch-talkers { font-size: 12px; color: #a1a1aa; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 16px; }
.ch-talkers b { color: #fca5a5; font-weight: 600; }
.ch-vol { width: 100%; height: 18px; accent-color: var(--ch); }

/* Teclas */
.key { width: 72px; min-height: 64px; border-radius: 12px; font: 800 12px 'JetBrains Mono', monospace; letter-spacing: .08em; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 2px solid var(--line); background: #0f0f15; color: #71717a; transition: background .08s, color .08s, border-color .08s; touch-action: none; }
.key .led { width: 10px; height: 10px; border-radius: 99px; background: #27272a; }
.key.listen.on { border-color: rgb(34 197 94 / .6); color: #86efac; background: rgb(34 197 94 / .10); }
.key.listen.on .led { background: var(--listen); box-shadow: 0 0 10px var(--listen); }
.key.talk.on { border-color: var(--talk); color: #fff; background: var(--talk); }
.key.talk.on .led { background: #fff; box-shadow: 0 0 10px #fff; }
.key.talk.disabled, .key.listen.disabled { opacity: .25; pointer-events: none; }
.key.call { min-height: 26px; width: 72px; font-size: 10px; }
.key.call:active { background: #f59e0b; color: #000; border-color: #f59e0b; }

/* VU meter segmentado */
.vu { height: 10px; border-radius: 3px; background: repeating-linear-gradient(90deg, #1f1f29 0 6px, transparent 6px 8px); position: relative; overflow: hidden; }
.vu::after { content: ''; position: absolute; inset: 0; width: var(--lvl, 0%);
  background: repeating-linear-gradient(90deg, transparent 0 6px, #0b0b10 6px 8px), linear-gradient(90deg, #22c55e 0 65%, #eab308 65% 85%, #ef4444 85%);
  transition: width 40ms linear; }
.vu-label { font: 700 10px 'JetBrains Mono', monospace; color: #71717a; letter-spacing: .1em; }

/* Botão PTT */
.ptt { height: 120px; border-radius: 22px; border: 3px solid #3f3f46; background: radial-gradient(120% 140% at 50% 0%, #1d1d27 0%, #0f0f15 70%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; touch-action: none; transition: transform .05s, background .08s, border-color .08s; -webkit-user-select: none; -webkit-touch-callout: none; }
.ptt-label { font: 800 30px 'JetBrains Mono', monospace; letter-spacing: .2em; color: #d4d4d8; }
.ptt-channel { font-size: 13px; color: #a1a1aa; font-weight: 600; }
.ptt.on { background: radial-gradient(120% 140% at 50% 0%, #f87171 0%, #b91c1c 80%); border-color: #fecaca; transform: scale(.985); box-shadow: 0 0 40px rgb(239 68 68 / .45); }
.ptt.on .ptt-label, .ptt.on .ptt-channel { color: #fff; }
.ptt.latched { border-style: dashed; }
.ptt:disabled { opacity: .35; }

/* Login keypad */
.pad { height: 64px; border-radius: 16px; background: var(--key); border: 1px solid var(--line); font-size: 24px; font-weight: 600; }
.pad:active { background: var(--brand); }
.pin-dot { width: 14px; height: 14px; border-radius: 99px; border: 2px solid #52525b; }
.pin-dot.on { background: var(--brand); border-color: var(--brand); }

.set-label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: #71717a; margin-bottom: 6px; }
.set-select { width: 100%; background: #0b0b10; border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin-bottom: 18px; font-size: 15px; }
.toggle { width: 44px; height: 26px; appearance: none; background: #3f3f46; border-radius: 99px; position: relative; transition: background .15s; }
.toggle::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 99px; background: #fff; transition: transform .15s; }
.toggle:checked { background: var(--brand); }
.toggle:checked::after { transform: translateX(18px); }

@media (min-width: 768px) {
  #channels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; align-content: start; }
  #channels > * { margin: 0 !important; }
}