:root{
    --shell:#17191a;
    --shell-dark:#08090a;
    --shell-mid:#242627;
    --screen:#07090a;
    --screen-text:#d8e4dd;
    --screen-muted:#7d8d84;
    --green:#10b878;
    --green-dark:#06704b;
    --blue:#0879ca;
    --blue-dark:#03518d;
    --red:#ef3e3e;
}

*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;background:#050607;color:#fff;font-family:Arial,Helvetica,sans-serif}
body{overflow:hidden;overscroll-behavior:none;-webkit-user-select:none;user-select:none}
button,input{font:inherit}
button{touch-action:none;-webkit-tap-highlight-color:transparent}

.talk-stage{
    width:100vw;
    height:100vh;
    height:100dvh;
    display:flex;
    justify-content:center;
    align-items:stretch;
    background:
        linear-gradient(rgba(0,0,0,.18),rgba(0,0,0,.18)),
        url('https://www.xmrs.com.br/talk/fundo_xrms.png') center center / cover no-repeat;
}

.radio-shell{
    position:relative;
    width:min(100vw,430px);
    height:100%;
    min-height:0;
    padding:clamp(7px,1.8vh,14px) clamp(8px,2.4vw,14px) max(7px,env(safe-area-inset-bottom));
    display:grid;
    grid-template-rows:minmax(150px,31fr) minmax(44px,8fr) minmax(50px,9fr) minmax(265px,46fr) minmax(20px,6fr);
    gap:clamp(4px,.8vh,8px);
    overflow:hidden;
    background:
        linear-gradient(90deg,rgba(255,255,255,.025),transparent 10%,transparent 90%,rgba(255,255,255,.025)),
        linear-gradient(180deg,#202223 0%,#101112 47%,#171819 100%);
    border-left:3px solid #050606;
    border-right:3px solid #050606;
    box-shadow:
        inset 0 0 0 2px #2c2e2f,
        inset 0 0 22px rgba(0,0,0,.82),
        0 0 35px rgba(0,0,0,.85);
}

.radio-shell::before,.radio-shell::after{
    content:"";
    position:absolute;
    top:1.5%;
    bottom:1.5%;
    width:7px;
    border-radius:10px;
    background:linear-gradient(90deg,#050606,#2b2d2e,#080909);
    opacity:.8;
    pointer-events:none;
}
.radio-shell::before{left:1px}
.radio-shell::after{right:1px;transform:scaleX(-1)}

.top-ridge{
    position:absolute;
    z-index:0;
    left:12%;right:12%;top:4px;
    height:4px;
    border-radius:20px;
    background:#2b2d2e;
    box-shadow:0 1px 0 #050606;
}

.lcd{
    position:relative;
    z-index:1;
    min-height:0;
    padding:clamp(10px,2.1vh,17px) clamp(12px,3.3vw,18px) clamp(8px,1.4vh,12px);
    display:grid;
    grid-template-rows:auto 1fr auto auto;
    gap:clamp(4px,.9vh,8px);
    color:var(--screen-text);
    background:
        radial-gradient(circle at 50% 20%,rgba(64,83,74,.07),transparent 55%),
        repeating-linear-gradient(0deg,rgba(255,255,255,.012) 0,rgba(255,255,255,.012) 1px,transparent 1px,transparent 3px),
        var(--screen);
    border:clamp(6px,1.7vw,10px) solid #0a0b0c;
    border-radius:clamp(8px,2.5vw,14px);
    box-shadow:
        0 0 0 2px #2a2c2d,
        0 0 0 4px #090a0a,
        inset 0 0 26px rgba(0,0,0,.95),
        inset 0 0 0 1px rgba(255,255,255,.025);
}

.lcd-topline,.lcd-bottomline,.lcd-mainline{
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-width:0;
}
.lcd-topline{font-size:clamp(8px,2.5vw,11px);font-weight:800;letter-spacing:.12em;color:#93a099}
.lcd-bottomline{font-family:"Courier New",monospace;font-size:clamp(8px,2.7vw,11px);font-weight:700;color:#7e8a84}

.led{
    width:9px;height:9px;border-radius:50%;
    background:#343a37;
    box-shadow:inset 0 0 3px #000,0 0 0 1px #000;
}
.led.online{background:#21d477;box-shadow:0 0 10px rgba(33,212,119,.9),0 0 0 1px #001c0d}
.led.tx{background:#ff4545;box-shadow:0 0 12px rgba(255,69,69,.95),0 0 0 1px #2d0000}

.lcd-mainline{align-items:end;gap:10px}
.channel-block{display:flex;align-items:end;gap:8px;min-width:0}
.lcd-label{font-size:clamp(8px,2.4vw,10px);font-weight:800;letter-spacing:.12em;color:#758079;padding-bottom:5px}
.channel-number{
    display:block;
    font-family:"Courier New",monospace;
    font-size:clamp(46px,15vw,72px);
    line-height:.82;
    letter-spacing:-.11em;
    color:#e3eee8;
    text-shadow:0 0 8px rgba(139,179,157,.15);
}
.lcd-status{text-align:right;min-width:74px;padding-bottom:4px}
.lcd-status strong,.lcd-status span{display:block;white-space:nowrap}
.lcd-status strong{font-size:clamp(9px,2.8vw,12px);letter-spacing:.08em;color:#c4d0c9}
.lcd-status span{margin-top:4px;font-size:clamp(7px,2.2vw,9px);color:#68726d}

.rx-box{min-width:0;overflow:hidden;text-align:center;padding:2px 0}
.rx-box strong,.rx-box small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rx-box strong{font-family:"Courier New",monospace;font-size:clamp(11px,3.8vw,16px);letter-spacing:.02em;color:#d2ddd7}
.rx-box small{margin-top:3px;font-size:clamp(7px,2.5vw,10px);color:#79857f}

.wave{height:15px;display:flex;align-items:center;gap:2px;opacity:.35}
.wave i{display:block;width:2px;height:4px;border-radius:2px;background:#93aaa0}
.wave.active i{animation:wave .55s ease-in-out infinite alternate}
.wave.active i:nth-child(2){animation-delay:.08s}.wave.active i:nth-child(3){animation-delay:.17s}.wave.active i:nth-child(4){animation-delay:.26s}.wave.active i:nth-child(5){animation-delay:.11s}.wave.active i:nth-child(6){animation-delay:.21s}.wave.active i:nth-child(7){animation-delay:.04s}
@keyframes wave{from{height:3px}to{height:14px}}

.brand-panel{
    position:relative;
    z-index:1;
    min-height:0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:0 clamp(13px,4vw,20px);
    border-top:1px solid #2b2d2e;
    border-bottom:1px solid #070808;
    background:linear-gradient(180deg,#242627,#101112 54%,#1d1f20);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
.brand-name{
    font-size:clamp(16px,5vw,23px);
    font-weight:900;
    font-style:italic;
    letter-spacing:-.04em;
    transform:skewX(-7deg);
    color:#f3f3f3;
    text-shadow:1px 1px 0 #555,-1px -1px 0 #000;
    white-space:nowrap;
}
.identity-button{
    max-width:44%;
    border:0;
    padding:4px 0;
    color:#858d89;
    background:transparent;
    font-size:clamp(7px,2.2vw,9px);
    font-weight:700;
    letter-spacing:.05em;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.function-row{
    position:relative;
    z-index:1;
    min-height:0;
    display:grid;
    grid-template-columns:1.15fr 1fr 1fr 1.15fr;
    gap:clamp(6px,2vw,10px);
    padding:clamp(3px,.5vh,5px) clamp(4px,1.2vw,7px);
}
.radio-key{
    min-width:0;
    height:100%;
    border:1px solid #050606;
    border-radius:clamp(5px,1.8vw,8px);
    color:#d8dcda;
    background:linear-gradient(180deg,#313334,#171819 54%,#242627);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.09),
        inset 0 -2px 4px rgba(0,0,0,.65),
        0 1px 2px #000;
    display:grid;
    place-items:center;
    cursor:pointer;
}
.radio-key:active:not(:disabled){transform:translateY(1px);box-shadow:inset 0 2px 5px rgba(0,0,0,.9)}
.radio-key:disabled{opacity:.45}
.key-green .key-symbol{color:#12c884;font-size:clamp(10px,3.5vw,15px);font-weight:900;letter-spacing:.04em;text-shadow:0 0 8px rgba(18,200,132,.2)}
.key-green:not(:disabled){box-shadow:inset 0 1px 0 rgba(255,255,255,.09),inset 0 -2px 4px rgba(0,0,0,.65),0 0 0 1px rgba(16,184,120,.06),0 1px 2px #000}
.key-green.transmitting{background:linear-gradient(180deg,#17442f,#072116);box-shadow:inset 0 2px 8px rgba(0,0,0,.75),0 0 14px rgba(16,184,120,.32)}
.key-green.transmitting .key-symbol{color:#48ffb7}

.key-blue{background:linear-gradient(180deg,#103d63,#061d31 54%,#0b2d4a);box-shadow:inset 0 1px 0 rgba(255,255,255,.10),inset 0 -2px 4px rgba(0,0,0,.65),0 0 10px rgba(19,137,220,.18),0 1px 2px #000}
.key-blue .mic-symbol{color:#58bfff;font-size:clamp(8px,2.8vw,12px);font-weight:900;letter-spacing:.02em;text-shadow:0 0 8px rgba(27,157,242,.34)}
.key-blue.active{background:linear-gradient(180deg,#7d1717,#3a0707 54%,#5b0e0e);box-shadow:inset 0 2px 7px rgba(0,0,0,.75),0 0 14px rgba(226,38,38,.36)}
.key-blue.active .mic-symbol{color:#ff8b8b;text-shadow:0 0 8px rgba(255,65,65,.42)}

.arrow{width:0;height:0;display:block}
.arrow.up{border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:9px solid #cfd3d1}
.arrow.down{border-left:7px solid transparent;border-right:7px solid transparent;border-top:9px solid #cfd3d1}

.keypad{
    position:relative;
    z-index:1;
    min-height:0;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    grid-template-rows:repeat(4,1fr);
    gap:clamp(6px,1.25vh,9px) clamp(7px,2.2vw,11px);
    padding:clamp(4px,.7vh,8px) clamp(5px,1.6vw,9px);
}
.keypad button{
    min-width:0;
    min-height:0;
    border:1px solid #050606;
    border-radius:clamp(5px,1.8vw,8px);
    color:#e9e9e9;
    background:linear-gradient(180deg,#303233,#161718 56%,#252728);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        inset 0 -2px 4px rgba(0,0,0,.65),
        0 2px 2px rgba(0,0,0,.7);
    display:flex;
    align-items:center;
    justify-content:center;
    gap:clamp(4px,1.5vw,8px);
}
.keypad button.digit-key{pointer-events:auto;cursor:pointer;touch-action:manipulation}
.keypad button.digit-key:active{transform:translateY(1px);box-shadow:inset 0 2px 6px rgba(0,0,0,.9)}
.keypad button:not(.digit-key){pointer-events:none;opacity:.72}
.keypad b{font-size:clamp(16px,5vw,24px);line-height:1;font-weight:500;text-shadow:1px 1px 0 #000}
.keypad small{font-size:clamp(6px,2vw,8px);font-weight:800;color:#979d99;line-height:1}

.radio-footnote{
    position:relative;
    z-index:1;
    min-height:0;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 6px;
    text-align:center;
    font-size:clamp(6px,1.8vw,8px);
    font-weight:700;
    letter-spacing:.05em;
    color:#626966;
}

body.tx .lcd{box-shadow:0 0 0 2px #2a2c2d,0 0 0 4px #090a0a,inset 0 0 22px rgba(190,25,25,.15),inset 0 0 0 1px rgba(255,68,68,.08)}
body.tx .channel-number,body.tx #rxMain{color:#ff8585;text-shadow:0 0 9px rgba(255,45,45,.25)}
body.rx .lcd{box-shadow:0 0 0 2px #2a2c2d,0 0 0 4px #090a0a,inset 0 0 22px rgba(12,105,169,.12),inset 0 0 0 1px rgba(38,162,240,.06)}

.modal{
    position:fixed;
    inset:0;
    z-index:50;
    display:grid;
    place-items:center;
    padding:20px;
    background:rgba(0,0,0,.78);
    backdrop-filter:blur(5px);
}
.modal[hidden]{display:none}
.modal-card{
    width:min(360px,92vw);
    background:#17191a;
    color:#fff;
    border:1px solid #343738;
    border-radius:14px;
    padding:20px;
    box-shadow:0 25px 80px rgba(0,0,0,.72);
}
.modal-kicker{display:block;color:#19aefb;font-size:9px;font-weight:800;letter-spacing:.12em}
.modal-card h2{margin:6px 0 5px;font-size:22px}
.modal-card p{margin:0 0 13px;color:#a4aaa7;font-size:12px;line-height:1.4}
.modal-card input{width:100%;height:44px;border:1px solid #44494a;border-radius:9px;padding:0 11px;color:#fff;background:#080909;outline:none}
.modal-card input:focus{border-color:#168ed4}
.modal-actions{margin-top:12px;display:flex;justify-content:flex-end;gap:8px}
.modal-actions button{border:1px solid #303536;border-radius:8px;padding:9px 12px;color:#dadddb;background:#252728;font-size:10px;font-weight:800;cursor:pointer}
.modal-actions button:last-child{border-color:#086ba9;background:#075f98;color:#fff}

.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

@media (min-width:431px){
    .radio-shell{border-radius:18px;margin:8px 0;height:calc(100dvh - 16px)}
}

@media (max-height:610px){
    .radio-shell{grid-template-rows:minmax(130px,30fr) 42px 48px minmax(230px,46fr) 18px;gap:3px}
    .lcd{padding-top:8px;padding-bottom:7px}
    .brand-name{font-size:15px}
    .radio-footnote{display:none}
}