:root {
  color-scheme: dark;
  --bg: #0b1020;
  --panel: #151d30;
  --line: #29364e;
  --text: #f4f7fb;
  --muted: #9baac0;
  --accent: #36d6a5;
  --blue: #3b82f6;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.5; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: .65; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px max(18px, calc((100% - 900px) / 2)); border-bottom: 1px solid var(--line); background: #101729; }
.brand { display: flex; align-items: center; gap: 12px; }
.logo { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--accent); color: #06251d; font-weight: 900; font-size: 20px; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 2px; font-size: 19px; }
.brand p { margin-bottom: 0; color: var(--muted); font-size: 12px; }
.status { padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 12px; white-space: nowrap; }
.status.online { color: var(--accent); border-color: var(--accent); }
main { width: min(900px, 100%); margin: auto; padding: 22px 16px 36px; }
.hero { padding: 22px 4px; }
.eyebrow { color: var(--accent); font-size: 11px; font-weight: 800; letter-spacing: 1.8px; margin-bottom: 6px; }
.hero h2 { margin-bottom: 8px; font-size: clamp(25px, 5vw, 36px); }
.hero p:last-child { color: var(--muted); }
.card { padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); min-width: 0; }
.identity-strip { display: flex; align-items: center; gap: 20px; margin: 0 0 16px; }
.identity-strip > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.identity-strip strong { overflow-wrap: anywhere; }
.muted-label, .muted-text { color: var(--muted); font-size: 12px; }
.secondary-button { margin-left: auto; flex-shrink: 0; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: #202d43; color: var(--text); }
.tabs { display: flex; gap: 8px; margin: 12px 0 18px; }
.tab { flex: 1; padding: 12px 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--muted); }
.tab.active { border-color: var(--accent); color: var(--accent); background: #123027; }
.panel { display: grid; gap: 16px; }
.hidden { display: none !important; }
.card h3 { margin-bottom: 16px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.section-heading h3 { margin: 0 0 8px; font-size: 22px; }
.mode-pill { border-radius: 999px; padding: 5px 9px; color: var(--accent); background: #123027; font-size: 11px; font-weight: 800; letter-spacing: 1px; }
.private-pill { color: #a5b4fc; background: #252449; }
label { display: block; margin: 14px 0 7px; color: var(--muted); font-size: 13px; }
input, textarea { width: 100%; min-height: 46px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; outline: none; background: #0b1222; color: var(--text); }
input:focus, textarea:focus { border-color: var(--accent); }
textarea { min-height: 100px; resize: vertical; }
.ptt-button { display: block; width: min(230px, 100%); aspect-ratio: 1; margin: 24px auto 16px; border: 8px solid #214e48; border-radius: 50%; background: var(--accent); color: #06251d; font-size: 21px; font-weight: 900; touch-action: none; user-select: none; -webkit-user-select: none; }
.ptt-button.pressed { transform: scale(.96); background: #fbbf24; border-color: #725b20; }
.private-ptt { border-color: #35356b; background: #a5b4fc; color: #11152c; }
.private-ptt.pressed { background: #fbbf24; border-color: #725b20; }
.note { color: var(--muted); font-size: 12px; text-align: center; }
.left-note { text-align: left; }
.subheading { margin: 26px 0 8px; padding-top: 18px; border-top: 1px solid var(--line); }
.search-row { display: flex; gap: 8px; }
.search-row input { min-width: 0; flex: 1; }
.search-row button, #chatForm button, #smsButton, #bmLoginButton { padding: 10px 16px; border: 0; border-radius: 10px; background: var(--blue); color: white; font-weight: 700; }
.lookup-results { display: grid; gap: 8px; margin: 10px 0 16px; }
.lookup-result { display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: #0d1628; color: var(--text); }
.lookup-result span { color: var(--muted); font-size: 12px; }
.lookup-result.selected { border-color: var(--accent); background: #123027; }
.target-preview { min-height: 36px; padding: 9px 11px; border-radius: 9px; background: #0d1628; color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.messages { display: flex; flex-direction: column; gap: 10px; min-height: 120px; max-height: 300px; overflow-y: auto; margin: 12px 0; padding: 12px; border-radius: 12px; background: #0b1222; }
.message { overflow-wrap: anywhere; padding: 10px; border-radius: 10px; background: #1b2940; }
.message strong { color: var(--accent); }
.message small { display: block; margin-top: 4px; color: var(--muted); }
.system-message { color: var(--muted); font-size: 13px; }
#chatForm { display: flex; gap: 8px; }
#chatForm input { min-width: 0; flex: 1; }
footer { padding: 26px 0 8px; color: var(--muted); font-size: 12px; text-align: center; }
@media (min-width: 700px) { #ptt { grid-template-columns: 1fr 1fr; align-items: start; } }
@media (max-width: 560px) { .identity-strip { align-items: flex-start; flex-wrap: wrap; gap: 12px 20px; } .secondary-button { margin-left: 0; } .tabs { gap: 5px; } .tab { padding: 10px 4px; font-size: 13px; } }
@media (max-width: 380px) { .topbar { padding: 14px 10px; } main { padding-right: 10px; padding-left: 10px; } .card { padding: 14px; } .ptt-button { width: min(200px, 100%); } }


/* Live microphone input meter placed directly beneath each PTT button. */
.mic-meter { width: min(340px, 100%); margin: -3px auto 16px; padding: 11px 13px 9px; border: 1px solid var(--line); border-radius: 12px; background: #0b1222; }
.mic-meter-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; color: var(--muted); font-size: 10px; }
.mic-meter-heading span:first-child { color: var(--accent); font-weight: 800; letter-spacing: 1.2px; }
.mic-meter-track { height: 10px; width: 100%; overflow: hidden; border-radius: 999px; background: #29364e; }
.mic-meter-fill { width: 0%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #36d6a5 0%, #b8e34b 68%, #fbbf24 88%, #ef4444 100%); transition: width 55ms linear; }
.mic-meter-scale { display: flex; justify-content: space-between; margin-top: 4px; color: #77869d; font-size: 9px; }

.audio-controls { width: min(420px, 100%); margin: 0 auto 18px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: #101729; }
.audio-control-title { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.audio-control-title strong { font-size: 14px; }
.audio-control-title span { color: var(--muted); font-size: 10px; }
.audio-controls label { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 10px 0 5px; }
.audio-controls label strong { color: var(--accent); }
.audio-controls .gain-slider { min-height: auto; padding: 0; accent-color: var(--accent); }
.audio-controls .check-control { justify-content: flex-start; color: var(--text); font-size: 12px; }
.audio-controls .check-control input { width: 18px; min-height: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.rx-audio-controls { width: min(420px, 100%); margin: 16px auto 12px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: #101729; }
.rx-audio-controls label { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 10px 0 5px; }
.rx-audio-controls label strong { color: var(--accent); }
.rx-audio-controls .gain-slider { width: 100%; min-height: auto; padding: 0; accent-color: var(--accent); }
.rx-audio-controls .mic-meter { width: 100%; margin: 12px auto 0; }

.rx-talker-card { width: min(420px, 100%); margin: 0 auto 16px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: #101729; text-align: left; }
.rx-talker-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.rx-talker-card > strong { display: block; font-size: 17px; line-height: 1.4; overflow-wrap: anywhere; }
.rx-talker-card p { margin: 7px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.sms-chat-messages { display:flex; flex-direction:column; gap:10px; min-height:150px; max-height:420px; overflow-y:auto; margin:12px 0 18px; padding:12px; border:1px solid var(--line); border-radius:14px; background:#0b1222; }
.sms-empty { margin:auto; padding:24px 8px; color:var(--muted); text-align:center; font-size:13px; }
.sms-chat-message { max-width:88%; padding:10px 12px; border:1px solid var(--line); border-radius:14px; overflow-wrap:anywhere; }
.sms-chat-message.incoming { align-self:flex-start; background:#1b2940; border-bottom-left-radius:4px; }
.sms-chat-message.outgoing { align-self:flex-end; background:#123027; border-color:#28604f; border-bottom-right-radius:4px; }
.sms-chat-meta { margin-bottom:4px; color:var(--accent); font-size:11px; font-weight:700; }
.sms-chat-body { white-space:pre-wrap; overflow-wrap:anywhere; }
.sms-chat-time { display:block; margin-top:5px; color:var(--muted); font-size:10px; }


.raw-packet-log { display:flex; flex-direction:column; gap:7px; max-height:300px; overflow:auto; margin-top:10px; padding:10px; border:1px solid var(--line); border-radius:10px; background:#080d18; }
.raw-packet-line { display:flex; flex-direction:column; gap:4px; padding:7px 8px; border-bottom:1px solid var(--line); overflow-wrap:anywhere; }
.raw-packet-line strong { color:var(--accent); font-size:11px; }
.raw-packet-line code { color:#d3deef; white-space:pre-wrap; overflow-wrap:anywhere; font-size:11px; }

.raw-packet-details { margin-top: 14px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: #101729; }
.raw-packet-details summary { cursor: pointer; color: var(--muted); font-size: 13px; }
.raw-packet-details[open] summary { margin-bottom: 8px; color: var(--text); }


/* Alpaca link glass / sunset refresh */
body{background:radial-gradient(ellipse at 78% 8%,rgba(255,190,143,.42),transparent 34%),radial-gradient(ellipse at 12% 25%,rgba(69,139,232,.35),transparent 38%),linear-gradient(155deg,#172d55 0%,#293e69 42%,#17243d 100%);background-attachment:fixed}
.topbar{background:rgba(20,35,65,.58);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-bottom-color:rgba(255,255,255,.24)}
.card,.identity-strip,.radio-card,.rx-talker-card{background:rgba(220,232,255,.105);border:1px solid rgba(255,255,255,.24);box-shadow:0 12px 34px rgba(5,15,38,.18);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}
.tabs{background:rgba(220,232,255,.09);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
input,textarea,select{background:rgba(9,20,43,.34)!important;border-color:rgba(255,255,255,.25)!important;color:var(--text)}
.logo{background:linear-gradient(145deg,#82d4ff,#a7a4ff 65%,#f7c7d7);color:#17345d;box-shadow:0 0 24px rgba(122,184,255,.28)}
footer a{color:#c6e7ff}


/* Larger About link and stronger glass-panel treatment inspired by the Alpaca concept UI */
footer a{display:inline-block;margin:8px 4px;padding:9px 15px;border:1px solid rgba(255,255,255,.28);border-radius:14px;background:rgba(220,232,255,.12);color:#e4f2ff;text-decoration:none;font-size:14px;font-weight:700;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 8px 24px rgba(5,15,38,.16);transition:background .18s ease,transform .18s ease}
footer a:hover{background:rgba(220,232,255,.22);transform:translateY(-1px)}
.card{border-radius:20px!important}
button,.ptt-button,.secondary-button{border:1px solid rgba(255,255,255,.24);box-shadow:0 8px 22px rgba(4,12,30,.18)}
input,textarea,select{border-radius:13px!important}


/* Alpaca glass console — layout pass based on the supplied visual reference */
:root{
  --bg:#233c68;--panel:rgba(221,235,255,.13);--line:rgba(238,246,255,.28);
  --text:#f7f9ff;--muted:#d2dff3;--accent:#83e6b5;--blue:#76a9ff;
}
html{min-height:100%;background:#233c68}
body{
  min-height:100vh;
  background:
    radial-gradient(ellipse at 82% 10%,rgba(255,211,173,.78),transparent 26%),
    radial-gradient(ellipse at 18% 12%,rgba(130,193,255,.72),transparent 32%),
    radial-gradient(ellipse at 65% 48%,rgba(245,181,192,.28),transparent 30%),
    linear-gradient(160deg,#7aa6d2 0%,#5c79a7 26%,#263d67 63%,#182947 100%);
  background-attachment:fixed;
}
.topbar{
  position:relative;isolation:isolate;overflow:hidden;
  padding:22px max(18px,calc((100% - 1180px)/2));
  border-bottom:1px solid rgba(255,255,255,.24);
  background:rgba(28,48,84,.26);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
}
.topbar:after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,rgba(195,225,255,.15),transparent 45%,rgba(255,218,196,.13));
}
.brand{gap:15px}
.logo{
  width:58px;height:58px;border:1px solid rgba(255,255,255,.55);
  border-radius:19px;background:linear-gradient(145deg,rgba(95,203,255,.88),rgba(147,136,255,.92) 65%,rgba(255,197,214,.9));
  color:#fff;font-size:29px;box-shadow:0 8px 30px rgba(65,113,215,.32),inset 0 1px 1px rgba(255,255,255,.7);
}
h1{font-size:clamp(22px,3vw,30px);letter-spacing:.01em}
.brand p{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#e6efff}
.status{background:rgba(24,42,75,.28);border-color:rgba(255,255,255,.3);color:#edf4ff;backdrop-filter:blur(12px)}
.status.online{color:#a7ffd4;border-color:rgba(167,255,212,.65)}
main{width:min(1180px,100%);padding:24px 18px 42px}
.hero{padding:25px 6px 18px}
.hero .eyebrow{color:#e3f0ff;letter-spacing:.24em}
.hero h2{font-size:clamp(28px,4.6vw,43px);text-shadow:0 2px 24px rgba(22,41,75,.2)}
.hero p:last-child{color:#edf3ff;max-width:720px}
.card,.identity-strip,.radio-card,.rx-talker-card,.audio-controls,.rx-audio-controls,.mic-meter,.raw-packet-details{
  background:rgba(225,237,255,.13)!important;
  border:1px solid rgba(255,255,255,.27)!important;
  box-shadow:0 16px 42px rgba(16,32,64,.18),inset 0 1px 0 rgba(255,255,255,.12)!important;
  backdrop-filter:blur(24px) saturate(135%);-webkit-backdrop-filter:blur(24px) saturate(135%);
}
.card{border-radius:22px;padding:20px}
.identity-strip{border-radius:18px}
.tabs{
  gap:8px;padding:7px;border-radius:18px;
  background:rgba(219,233,255,.13);border:1px solid rgba(255,255,255,.24);
  box-shadow:0 12px 28px rgba(16,32,64,.12);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)
}
.tab{border-color:transparent;background:transparent;color:#edf3ff;border-radius:13px;padding:12px 10px;font-weight:650}
.tab.active{color:#fff;border-color:rgba(255,255,255,.42);background:linear-gradient(130deg,rgba(102,157,255,.74),rgba(150,174,255,.4));box-shadow:inset 0 1px rgba(255,255,255,.3),0 5px 18px rgba(54,94,177,.2)}
.mode-pill{background:rgba(75,211,151,.2);color:#bdffe0;border:1px solid rgba(156,255,208,.22)}
.private-pill{background:rgba(167,180,252,.2);color:#e1e4ff}
label,.muted-label,.muted-text,.note,.brand p,footer{color:#e0e9f8}
input,textarea,select,.target-preview,.messages,.message,.sms-chat-messages,.sms-chat-message,.lookup-result,.raw-packet-log{
  background:rgba(18,35,65,.29)!important;color:#f7f9ff!important;border-color:rgba(255,255,255,.23)!important;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)
}
input::placeholder,textarea::placeholder{color:#d0def2}
input:focus,textarea:focus,select:focus{border-color:rgba(181,218,255,.9)!important;box-shadow:0 0 0 3px rgba(142,191,255,.15)}
button,.ptt-button,.secondary-button,.search-row button,#chatForm button,#smsButton,#bmLoginButton{
  transition:transform .16s ease,filter .16s ease,box-shadow .16s ease;
}
button:hover{filter:brightness(1.08)}
button:active{transform:scale(.985)}
.secondary-button{margin-left:auto;background:rgba(219,233,255,.15);border-color:rgba(255,255,255,.28);color:#fff}
.search-row button,#chatForm button,#smsButton,#bmLoginButton{background:linear-gradient(135deg,#6c9eff,#8b9fff);color:white;box-shadow:0 7px 20px rgba(57,91,166,.22)}
.ptt-button{
  width:min(220px,100%);margin:22px auto 16px;
  border:7px solid rgba(219,235,255,.76);
  background:radial-gradient(circle at 35% 25%,#a4d5ff 0%,#6b9cff 48%,#6277dd 100%);
  color:white;font-size:20px;
  box-shadow:0 0 0 4px rgba(174,209,255,.15),0 0 32px rgba(111,160,255,.55),inset 0 2px 8px rgba(255,255,255,.45);
}
.ptt-button.pressed{background:radial-gradient(circle at 35% 25%,#ffb5b5,#f35f7a 68%,#c83d63);border-color:#ffe0e7;box-shadow:0 0 30px rgba(255,91,127,.5)}
.private-ptt{background:radial-gradient(circle at 35% 25%,#d3d7ff,#9398f8 60%,#6b6fe0);color:#fff;border-color:rgba(235,237,255,.8)}
.private-ptt.pressed{background:radial-gradient(circle at 35% 25%,#ffb5b5,#f35f7a 68%,#c83d63)}
.mic-meter-track{background:rgba(15,31,58,.5)}
.mic-meter-heading span:first-child{color:#bde8ff}
.raw-packet-details summary{color:#f0f5ff}
footer a{color:#f1f7ff}
@media(min-width:760px){
  main{padding-top:28px}
  .hero{padding-top:30px}
  #ptt{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
  #ptt>.rx-audio-controls,#ptt>.rx-talker-card{grid-column:1/-1}
  #ptt>.radio-card{min-width:0}
}
@media(max-width:600px){
  .topbar{padding:15px 14px}
  .brand{gap:10px}
  .logo{width:48px;height:48px;border-radius:16px;font-size:25px}
  .brand p{font-size:10px;letter-spacing:.1em}
  .status{font-size:10px;padding:6px 8px;white-space:normal;text-align:center;max-width:112px}
  main{padding:14px 12px 30px}
  .hero{padding:18px 3px 14px}
  .hero h2{font-size:28px}
  .card{padding:15px;border-radius:18px}
  .identity-strip{gap:12px 16px}
  .identity-strip>div{flex:1 1 38%}
  .secondary-button{margin-left:0}
  .tabs{position:sticky;top:6px;z-index:10;gap:4px;padding:5px;border-radius:15px}
  .tab{padding:11px 3px;font-size:12px}
  .ptt-button{width:min(205px,72vw);border-width:6px;margin:18px auto 14px}
  .search-row{align-items:stretch}
  .search-row button{padding:10px 12px}
  .note{line-height:1.65}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;scroll-behavior:auto!important}}


/* Final color pass: lavender/ice-blue controls and the custom alpaca mark */
:root{--accent:#c5b8ff;--blue:#8c9dff}
input[type="range"],input[type="checkbox"]{accent-color:#b7a7ff}
.mic-meter-fill{background:linear-gradient(90deg,#79d9ff 0%,#8cafff 42%,#b7a7ff 75%,#e4caff 100%)!important}
.mic-meter-heading span:first-child{color:#d5d0ff!important}
.ptt-button{
 background:radial-gradient(circle at 32% 22%,#c2eaff 0%,#8bb7ff 35%,#8f91f4 72%,#7e77d6 100%);
 border-color:rgba(240,241,255,.9);
 box-shadow:0 0 0 4px rgba(202,205,255,.18),0 0 34px rgba(158,164,255,.48),inset 0 2px 8px rgba(255,255,255,.58);
}
.ptt-button.pressed{
 background:radial-gradient(circle at 32% 22%,#f1eaff 0%,#d9c8ff 42%,#b9a6f0 100%)!important;
 border-color:#f8f3ff!important;color:#302b58!important;
 box-shadow:0 0 0 5px rgba(220,208,255,.2),0 0 38px rgba(196,174,255,.72),inset 0 2px 8px rgba(255,255,255,.75)!important;
}
.private-ptt{background:radial-gradient(circle at 32% 22%,#d7f0ff,#a6b5ff 52%,#968be9 100%)}
.private-ptt.pressed{background:radial-gradient(circle at 32% 22%,#f1eaff 0%,#d9c8ff 42%,#b9a6f0 100%)!important;color:#302b58!important}
.logo{overflow:hidden;padding:0!important}
.logo img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.footer-logo{width:23px;height:23px;vertical-align:middle;border-radius:7px;box-shadow:0 3px 12px rgba(110,139,230,.3)}
.mode-pill{color:#e2dcff;background:rgba(167,151,255,.22);border-color:rgba(216,207,255,.3)}
.tab.active{background:linear-gradient(130deg,rgba(122,153,255,.76),rgba(190,174,255,.48))}
.search-row button,#chatForm button,#smsButton,#bmLoginButton{background:linear-gradient(135deg,#729eff,#a99bff)!important}
.secondary-button{background:rgba(219,225,255,.17)}
@media(max-width:600px){.logo img{object-fit:cover}}


/* Connection badge now uses the same cool lavender glass palette as the PTT */
.status{
 display:inline-flex;align-items:center;gap:8px;
 background:rgba(38,49,91,.42)!important;
 color:#e9e7ff!important;border-color:rgba(208,198,255,.52)!important;
 box-shadow:0 5px 22px rgba(21,30,67,.16),inset 0 1px rgba(255,255,255,.12);
 backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
}
.status:before{content:"";width:8px;height:8px;flex:0 0 8px;border-radius:50%;background:#c8bcff;box-shadow:0 0 12px rgba(200,188,255,.7)}
.status.online{color:#e6e0ff!important;border-color:rgba(203,190,255,.72)!important}
.status.online:before{background:#b7a7ff;box-shadow:0 0 12px rgba(183,167,255,.85)}


/* 2026 unified mountain background + responsive glass console */
:root{--accent:#c9bcff;--blue:#91a5ff;--line:rgba(239,245,255,.28);--muted:#e0e9f8}
html{min-height:100%;background:#172b4d}
body{min-height:100vh;background:linear-gradient(180deg,rgba(12,25,49,.44),rgba(14,29,55,.58)),url('/alpaca-link-mountain.webp') center 48%/cover fixed no-repeat}
.topbar{background:rgba(17,35,65,.36);border-bottom-color:rgba(255,255,255,.22)}
main{width:min(1240px,100%)}
.hero{max-width:900px}
.hero h2,.hero p:last-child{text-shadow:0 2px 14px rgba(10,25,52,.45)}
.card,.identity-strip,.radio-card,.rx-talker-card,.audio-controls,.rx-audio-controls,.mic-meter,.raw-packet-details{background:rgba(20,39,70,.43)!important;border-color:rgba(255,255,255,.3)!important;backdrop-filter:blur(20px) saturate(130%);-webkit-backdrop-filter:blur(20px) saturate(130%)}
.tabs{background:rgba(20,39,70,.36)}
.tab.active{color:#fff}
input,textarea,select,.target-preview,.messages,.message,.sms-chat-messages,.sms-chat-message,.lookup-result,.raw-packet-log{background:rgba(10,24,48,.48)!important}
.ptt-button,.private-ptt{background:radial-gradient(circle at 32% 22%,#e2e4ff 0%,#b9b4ff 46%,#8987df 100%)!important;color:#28264f!important;border-color:rgba(246,244,255,.9)!important}
.ptt-button.pressed,.private-ptt.pressed{background:radial-gradient(circle at 32% 22%,#f4edff 0%,#ddccff 48%,#bba7ef 100%)!important;color:#302b58!important}
@media(min-width:760px){#ptt{grid-template-columns:repeat(2,minmax(0,1fr))}.radio-card{min-height:100%}#private,#sms,#settings{max-width:900px;margin-inline:auto}}
@media(max-width:600px){body{background-position:56% center;background-attachment:scroll}.topbar{position:relative}.hero{padding-top:15px}.identity-strip{gap:12px}.tabs{top:4px}.card{background:rgba(18,35,65,.52)!important}}