:root{
 --radar-bg:#09111d;
 --radar-panel:#142435;
 --radar-line:#3b5365;
 --radar-text:#edf6fb;
 --radar-green:#b7f47d;
 --radar-accent:#66dfae;
 --radar-red:#ff8289;
}

*{box-sizing:border-box}

body{
 background:radial-gradient(ellipse at top,#20364a,#09111d 70%) fixed!important;
 color:var(--radar-text)!important;
 font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif!important;
}

body :where(h1,h2,h3,h4){color:#f4f8fc}

body :where(.card,.panel,.box,.widget,.tile,fieldset){
 background:#142435;
 border:1px solid #344b60;
 border-radius:15px;
 color:#edf6fb;
 box-shadow:0 8px 28px #0002;
}

body :where(input:not([type=checkbox]):not([type=radio]),select,textarea){
 max-width:100%;
 min-height:40px;
 background:#101e2b;
 border:1px solid #40566b;
 border-radius:10px;
 color:#fff;
 padding:9px 12px;
}

body :where(button,.btn){
 border-radius:10px;
 cursor:pointer;
}

#radar-pro{
 max-width:1180px;
 margin:12px auto 20px;
 padding:0 10px;
 color:#edf6fb;
 font-family:Inter,system-ui,sans-serif;
}

#radar-pro *{box-sizing:border-box}

#radar-pro button{
 appearance:none;
 min-height:45px;
 padding:9px;
 border:1px solid #4b6375;
 border-radius:10px;
 background:linear-gradient(155deg,#2a4053,#192a3b);
 color:#edf6fb;
 font:800 12px Inter,system-ui,sans-serif;
 letter-spacing:.05em;
 cursor:pointer;
 touch-action:manipulation;
 box-shadow:0 3px 0 #0a1119;
}

#radar-pro button:active{
 transform:translateY(2px);
 box-shadow:inset 0 2px 5px #0007;
}

#radar-pro button:disabled{
 opacity:.45;
 cursor:not-allowed;
}

#radar-pro button:focus-visible,
#radar-pro input:focus-visible{
 outline:2px solid #b7f47d;
 outline-offset:2px;
}

#radar-pro .radio-case{
 background:linear-gradient(145deg,#263b4d,#142434 55%,#0c1825);
 border:1px solid #536a7c;
 border-radius:22px;
 padding:19px;
 box-shadow:0 25px 60px #0006,inset 0 1px 0 #ffffff29;
}

#radar-pro .radio-top{
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:10px;
 margin-bottom:16px;
}

#radar-pro .radio-logo{
 display:flex;
 align-items:center;
 gap:11px;
}

#radar-pro .radio-symbol{
 display:grid;
 place-items:center;
 width:44px;
 height:44px;
 border-radius:12px;
 background:#254236;
 border:1px solid #7aa578;
 color:#b7f47d;
 font-size:27px;
}

#radar-pro .radio-name{
 font-size:20px;
 font-weight:950;
 letter-spacing:.07em;
}

#radar-pro .radio-tag{
 margin-top:3px;
 color:#a8bac7;
 font-size:10px;
 letter-spacing:.16em;
}

#radar-pro .radio-leds{
 display:flex;
 gap:12px;
 font-size:11px;
 font-weight:800;
}

#radar-pro .led{
 display:inline-block;
 width:9px;
 height:9px;
 margin-right:5px;
 border-radius:50%;
 background:#657b85;
}

#radar-pro .led.on{
 background:#68edb3;
 box-shadow:0 0 11px #68edb3;
}

#radar-pro .radio-main{
 display:grid;
 grid-template-columns:minmax(0,1.35fr) minmax(260px,.85fr);
 gap:13px;
}

#radar-pro .radio-display{
 min-height:227px;
 padding:16px;
 border:3px solid #506677;
 border-radius:15px;
 background:linear-gradient(145deg,#102b2a,#091a21);
 box-shadow:inset 0 5px 22px #000a;
 overflow:hidden;
}

#radar-pro .screen-top{
 display:flex;
 justify-content:space-between;
 gap:10px;
 color:#88dbab;
 font-size:10px;
 font-weight:850;
 letter-spacing:.13em;
}

#radar-pro .screen-channel{
 display:flex;
 align-items:baseline;
 gap:11px;
 margin:13px 0 4px;
}

#radar-pro .channel-prefix{
 font-size:14px;
 color:#91cbb0;
 font-weight:850;
}

#radar-pro .channel-number{
 font-size:clamp(45px,6vw,76px);
 line-height:1;
 color:#d7ffa4;
 font-weight:950;
 letter-spacing:-.07em;
 text-shadow:0 0 18px #a3f47d45;
 font-variant-numeric:tabular-nums;
}

#radar-pro .frequency{
 color:#a2cbb4;
 font-size:11px;
 letter-spacing:.1em;
 margin-bottom:12px;
}

#radar-pro .wave{
 display:flex;
 align-items:center;
 height:47px;
 gap:4px;
 padding:6px 0;
 border-block:1px solid #35554c;
}

#radar-pro .wave i{
 display:block;
 flex:1;
 min-height:3px;
 height:var(--height);
 background:linear-gradient(#d8ff99,#54b58c);
 border-radius:5px;
 opacity:.75;
}

#radar-pro .wave.transmitting i{
 animation:radio-wave .45s infinite alternate;
 animation-delay:var(--delay);
}

@keyframes radio-wave{
 to{height:12%;opacity:.4}
}

#radar-pro .screen-bottom{
 display:flex;
 justify-content:space-between;
 flex-wrap:wrap;
 gap:8px;
 margin-top:13px;
 color:#a0c1b1;
 font-size:10px;
}

#radar-pro .radio-right{
 display:grid;
 grid-template-rows:minmax(0,1fr) auto;
 gap:10px;
}

#radar-pro #pro-ptt{
 display:flex;
 flex-direction:column;
 justify-content:center;
 align-items:center;
 gap:7px;
 width:100%;
 min-height:150px;
 background:radial-gradient(circle at top,#4e7856,#244b40 70%)!important;
 border:2px solid #85b48a!important;
 border-radius:17px!important;
 color:#f1ffdc!important;
 touch-action:none!important;
 user-select:none;
 -webkit-user-select:none;
}

#radar-pro #pro-ptt .ptt-icon{font-size:28px}
#radar-pro #pro-ptt strong{font-size:23px}
#radar-pro #pro-ptt small{font-size:10px}

#radar-pro #pro-ptt.talking{
 background:radial-gradient(circle at top,#dc8c64,#9a3e39)!important;
 border-color:#ffd6a0!important;
}

#radar-pro .control-grid{
 display:grid;
 grid-template-columns:repeat(2,minmax(0,1fr));
 gap:8px;
}

#radar-pro .control-grid button{
 display:flex;
 flex-direction:column;
 justify-content:center;
 align-items:center;
 gap:5px;
 min-height:65px;
}

#radar-pro .control-grid button span{font-size:18px}
#radar-pro .control-grid button small{font-size:10px}

#radar-pro .connect-btn{
 border-color:#9cce77!important;
 color:#dcffb9!important;
}

#radar-pro .disconnect-btn{
 border-color:#bb7277!important;
 color:#ffd0cc!important;
}

#radar-pro .radio-bottom{
 display:grid;
 grid-template-columns:1.2fr 1fr;
 gap:12px;
 margin-top:13px;
}

#radar-pro .radio-bank{
 padding:11px;
 border:1px solid #394e61;
 background:#112131;
 border-radius:13px;
}

#radar-pro .bank-title{
 display:flex;
 justify-content:space-between;
 color:#b3c6ce;
 font-size:10px;
 font-weight:850;
 letter-spacing:.15em;
 margin-bottom:9px;
}

#radar-pro .tuning-controls{
 display:grid;
 grid-template-columns:repeat(4,minmax(0,1fr));
 gap:7px;
}

#radar-pro .tuning-controls button{
 min-width:0;
 font-size:11px;
}

#radar-pro .radio-options{
 display:flex;
 gap:9px;
}

#radar-pro .radio-options label{
 display:flex;
 justify-content:center;
 align-items:center;
 gap:7px;
 flex:1;
 padding:10px 6px;
 border:1px solid #40566a;
 border-radius:10px;
 background:#192e40;
 font-size:11px;
 font-weight:850;
 cursor:pointer;
}

#radar-pro input[type=radio]{
 accent-color:#b7f47d;
 width:16px;
 height:16px;
}

#radar-pro .activity-terminal{
 margin-top:12px;
 padding:11px 13px;
 min-height:73px;
 max-height:120px;
 overflow:auto;
 background:#0a151f;
 border:1px solid #344b5b;
 border-radius:12px;
 color:#afd8bd;
 white-space:pre-wrap;
 overflow-wrap:anywhere;
 font:11px/1.6 monospace;
}

@media(max-width:760px){
 #radar-pro{margin:8px auto 13px;padding:0 7px}
 #radar-pro .radio-case{padding:11px;border-radius:16px}
 #radar-pro .radio-top{margin-bottom:11px}
 #radar-pro .radio-name{font-size:17px}
 #radar-pro .radio-tag{font-size:8px}
 #radar-pro .radio-main{
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:8px;
 }
 #radar-pro .radio-display{
  min-height:190px;
  padding:10px;
  border-width:2px;
 }
 #radar-pro .channel-number{font-size:50px}
 #radar-pro .screen-channel{gap:6px}
 #radar-pro .wave{height:34px}
 #radar-pro .radio-right{gap:8px}
 #radar-pro #pro-ptt{min-height:112px}
 #radar-pro #pro-ptt strong{font-size:17px}
 #radar-pro #pro-ptt .ptt-icon{font-size:23px}
 #radar-pro #pro-ptt small{font-size:8px}
 #radar-pro .control-grid button{min-height:58px;padding:5px}
 #radar-pro .control-grid button span{font-size:16px}
 #radar-pro .control-grid button small{font-size:9px}
 #radar-pro .radio-bottom{
  grid-template-columns:1fr;
  gap:8px;
  margin-top:9px;
 }
 #radar-pro .radio-bank{padding:9px}
 #radar-pro .tuning-controls button{font-size:10px}
}

@media(max-width:350px){
 #radar-pro .channel-number{font-size:42px}
 #radar-pro #pro-ptt strong{font-size:14px}
}

@media(prefers-reduced-motion:reduce){
 #radar-pro .wave.transmitting i{animation:none}
}