/* Caripí receiver front panel — responsive brushed graphite and amber display. */
:root{--console-metal:#172128;--console-edge:#36444d;--display:#0a1516;--display-ink:#e8cc88;--console-soft:#91a3ac;--key-face:#28343d;--key-line:#44535e;--focus:#e4ba6b}
body{background:radial-gradient(ellipse at 20% 0,#26353d 0,transparent 65%),#0c1217;font-family:system-ui,-apple-system,"Segoe UI",sans-serif}
.app-shell{width:min(1480px,calc(100% - 36px));padding-top:12px}
.topbar{padding:12px 4px 18px;background:transparent;border-bottom-color:#35414a;gap:16px}
.brand h1{font-size:27px;letter-spacing:.02em}.brand-subtitle{font-size:12px;letter-spacing:.045em;color:#a7b5bd}
.brand-mark{width:40px;font-size:26px}.top-status{background:#172128;border-color:#35414a}.top-status-item{font-size:12px;padding:0 13px;border-color:#35414a}
.listener-band-panel{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 15px;margin:10px 0 16px;border:1px solid var(--console-edge);border-radius:10px;background:linear-gradient(#26323a,#1b252d)}
.listener-band-panel label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;font-weight:700;color:#b4c2c9}
#listener-band-select{min-width:240px;max-width:100%;padding:10px 35px 10px 12px;background:#111c24;color:#f0e8d6;border:1px solid #59646a;border-radius:7px;font:600 14px system-ui}
#listener-band-status{font-size:12px;color:#b4c2c9}
.receiver-console{border:1px solid var(--console-edge);border-radius:16px;background:linear-gradient(150deg,#28333b,#172128 40%,#121c23);box-shadow:0 12px 35px #0005,inset 0 1px #ffffff12;position:relative;padding-top:8px}
.receiver-console:before,.receiver-console:after{content:'';position:absolute;top:9px;width:7px;height:7px;border-radius:50%;background:linear-gradient(45deg,#4b555d 45%,#111a20 46%,#111a20 54%,#4b555d 55%);box-shadow:0 1px 1px #000;pointer-events:none}
.receiver-console:before{left:10px}.receiver-console:after{right:10px}
.hero-row{display:grid;grid-template-columns:minmax(225px,.9fr) minmax(320px,1.35fr) minmax(230px,.9fr);gap:20px;padding:15px 22px 20px;align-items:center}
.hero-meter{width:100%;max-width:330px;min-width:0;padding:8px;margin:auto;background:transparent;border:0;box-shadow:none}
.card-eyebrow{font-size:10px;letter-spacing:.19em;color:#c8d1d5}.analog-meter-frame{padding:8px;border-radius:10px}.analog-meter-glass{border-radius:5px}
.hero-tuning{min-width:0;padding:16px 12px 8px;background:transparent;border:0;display:block}
.hero-tuning .freq-label{font-size:10px;letter-spacing:.16em;color:#d2bb87;margin-bottom:7px}
.hero-tuning>div:nth-child(2){display:flex;align-items:center;justify-content:center;border-radius:9px;border:1px solid #050a0d;border-top:3px solid #03070a;background:linear-gradient(165deg,#132121,#071011);box-shadow:inset 0 2px 12px #0009,0 1px #ffffff16;padding:11px 12px}
.hero-tuning input[name=frequency]{min-width:0;width:100%;font-family:ui-monospace,"DejaVu Sans Mono",monospace;font-variant-numeric:tabular-nums;font-size:clamp(31px,3.5vw,52px);font-weight:500;letter-spacing:-.045em;color:var(--display-ink);text-shadow:0 0 14px #f3c06728}
.hero-tuning input[name=frequency]:focus{color:#ffe8ae}.freq-units{font:600 13px ui-monospace,monospace;color:#c3ae80;margin-left:6px}
.mode-strip{gap:6px;margin-top:13px;display:flex;flex-wrap:nowrap}.mode-btn{flex:1;min-width:0;padding:8px 6px;border-radius:5px;background:linear-gradient(#37444d,#222e36);border:1px solid #46525b;border-bottom:3px solid #0a1218;color:#b8c6cd;font-size:12px;box-shadow:inset 0 1px #ffffff15}
.mode-btn.is-active,.mode-btn.active{color:#ffdf9f;background:linear-gradient(#4b483c,#38382f);border-color:#8b7754;border-bottom-color:#0c1215}
.band-name-chip{display:flex;align-items:center;justify-content:center;gap:7px;margin:12px 0 8px;background:none;border:0;font:11px system-ui;color:#c3d0d6;min-height:20px}.chip-separator{opacity:.4}#receiver-active-profile{overflow-wrap:anywhere}
.rx-led{display:inline-block;width:6px;height:6px;background:#60bd8b;border-radius:50%;box-shadow:0 0 6px #60bd8b66}
.tuning-hardware{display:flex;align-items:center;justify-content:center;gap:12px;margin:12px auto 0}
.tuning-dial{position:relative;width:64px;height:64px;border-radius:50%;border:3px solid #0b1115;background:repeating-conic-gradient(#3d464c 0deg 3deg,#202a31 4deg 9deg);box-shadow:0 5px 7px #0008,inset 0 0 0 2px #5b6368;touch-action:none;cursor:grab;flex-shrink:0}
.tuning-dial:before{content:'';position:absolute;inset:5px;border-radius:50%;background:radial-gradient(circle at 40% 25%,#4c565d,#293138 60%,#19222a);border:1px solid #131d24}
.tuning-dial span{position:absolute;inset:0;transform:rotate(var(--dial-angle,0deg));pointer-events:none}.tuning-dial span:before{content:'';position:absolute;top:11px;left:calc(50% - 2px);height:9px;width:3px;border-radius:2px;background:#dbc08d;box-shadow:0 0 3px #d9aa5766}
.tuning-dial:active{cursor:grabbing}.tune-step{width:34px;height:34px;padding:0;border:1px solid #4a555e;border-bottom:3px solid #0d141a;border-radius:7px;background:#29353e;color:#e3e9ed;font-size:23px;cursor:pointer}.tuning-caption{text-align:left;color:#becbd1;font-size:9px;letter-spacing:.12em;line-height:1.6}.tuning-caption span{display:block;font-size:10px;letter-spacing:0;color:#81959f}
.station-info-card{padding:15px 16px;background:#111b2280;border:1px solid #37434b;border-radius:10px;font-size:12px}.station-info-card h3{font-size:12px;letter-spacing:.04em;margin-bottom:12px}.station-info-list{font-size:11px;line-height:1.7;color:#b3c1c9}.station-info-list b{font-weight:500;color:#d0d9de}
.station-info-card{display:block}
.waterfall-caption{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:0 auto 7px;padding:0 16px;max-width:1060px;font-size:10px;letter-spacing:.05em;color:#9baeb8}.waterfall-stage{border-radius:7px;border:1px solid #46515a;box-shadow:0 1px #ffffff0a;margin-bottom:18px}.waterfall-stage-inner,#waterfalls,#waterfalls>div,#waterfalls canvas{border-radius:0}.waterfall-stage-inner:before{border-radius:0}
.websdr-tabs-shell{margin-top:16px}.websdr-tabs{gap:5px}.websdr-tab-button{font-size:12px;border-radius:7px 7px 0 0;background:#1a2730;color:#a5b9c5}.websdr-tab-button.is-active{background:#33424c;border-color:#566773;color:#f6deab;border-bottom-color:#33424c}.websdr-tabs-body>.websdr-tab-panel{border-color:#43515c;background:#1a2630}
.control-subsection,.utility-card,.users-card{border-color:#384853;background:#17232d}.users-stage{background:#101a23}.section-title{font-size:12px;color:#c0cdd5}.app-footer{font-size:10px;color:#7d909e;padding:18px 4px;line-height:1.7}
#chatboxnew{overflow:auto;height:260px;width:100%;padding:0 12px;background:#101a23;border:1px solid #354651;border-radius:8px;overscroll-behavior:contain}
.chat-message{padding:12px 2px;border-bottom:1px solid #2b3943}.chat-message-header{display:flex;gap:12px;align-items:baseline;justify-content:space-between;flex-wrap:wrap}.chat-message-header strong{color:#e9cb90;font-size:12px}.chat-message-header time{color:#8b9fac;font-size:10px;font-variant-numeric:tabular-nums}.chat-message p{white-space:pre-wrap;overflow-wrap:anywhere;margin:5px 0 0;color:#d4dfe5;font-size:13px;line-height:1.55}.chat-empty{font-size:13px;line-height:1.7;color:#a4b5c0}#chat-status{font-size:11px;color:#9cb0bd;min-height:17px}
form[name=chatform]{display:flex;gap:10px;margin-top:12px}form[name=chatform] input{flex:1;min-width:0;width:auto}#chat-send{border:1px solid #7b6b4b;border-radius:7px;background:#413b2d;color:#f9e3b3;font-weight:600;padding:9px 18px;cursor:pointer}
.websdr-tabs-body #chatboxnew{background:#101a23;border-color:#354651}
.websdr-tabs-body form[name=chatform]{display:flex}
:is(button,input,select,a):focus-visible{outline:2px solid var(--focus);outline-offset:3px}
html[data-theme=light]{--console-edge:#66717b;--focus:#274e68}
html[data-theme=light] .receiver-console{background:linear-gradient(150deg,#aeb5bb,#939ea6)!important;box-shadow:inset 0 1px #fff6,0 12px 30px #23303b25}
html[data-theme=light] .hero-meter,html[data-theme=light] .hero-tuning{background:transparent!important}
html[data-theme=light] .hero-tuning>div:nth-child(2){background:linear-gradient(#3f504e,#293b3b)!important}
html[data-theme=light] .hero-tuning input[name=frequency]{background:transparent!important;color:#fae6b7!important;border:0!important;text-shadow:none}
html[data-theme=light] .hero-tuning .freq-units{color:#e7d5a9!important}
html[data-theme=light] .listener-band-panel{background:#a7afb6;border-color:#697681}
html[data-theme=light] :is(.listener-band-panel label,#listener-band-status,.waterfall-caption,.tuning-caption,.tuning-caption span,.band-name-chip){color:#203845!important}
html[data-theme=light] .tuning-dial{background:repeating-conic-gradient(#707a82 0deg 3deg,#505c66 4deg 9deg)!important;border-color:#3c4852!important;box-shadow:0 5px 7px #25354166!important}
html[data-theme=light] #chatboxnew{background:#b5bdc4!important;border-color:#77858f}
html[data-theme=light] .chat-message{border-color:#8e9ba4}html[data-theme=light] :is(.chat-message p,.chat-empty,#chat-status){color:#1a3445!important}html[data-theme=light] .chat-message-header strong{color:#263d4b!important}html[data-theme=light] .chat-message-header time{color:#344d5c!important}
@media(max-width:1120px){.hero-row{grid-template-columns:minmax(220px,.8fr) minmax(300px,1.2fr);gap:12px}.station-info-card{grid-column:1/-1}.station-info-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 15px}.hero-meter{max-width:300px}}
@media(max-width:700px){.app-shell{width:calc(100% - 18px)}.topbar{gap:10px;padding:10px 0}.brand h1{font-size:22px}.top-status{width:100%;justify-content:space-between;gap:0}.top-status-item{padding:0 8px;font-size:10px}.top-status-item:first-of-type{display:none}#websdr-theme-button{padding:8px;font-size:11px}.listener-band-panel{padding:11px;gap:8px}.listener-band-panel label{flex-basis:100%}#listener-band-select{min-width:0;width:100%}#listener-band-status{font-size:11px}.hero-row{grid-template-columns:1fr;padding:12px 10px;gap:8px}.hero-tuning{grid-row:1;padding:10px}.hero-tuning input[name=frequency]{font-size:45px}.hero-meter{grid-row:2;width:min(100%,275px);padding:6px}.analog-meter-frame{padding:6px}.station-info-card{grid-row:3}.station-info-list{grid-template-columns:1fr 1fr}.tuning-dial{width:56px;height:56px}.tuning-hardware{margin-top:8px}.mode-strip{display:flex!important}.mode-btn{padding:8px 4px}.waterfall-caption{font-size:9px;padding:0 11px}.waterfall-stage{margin-inline:8px}.websdr-tabs{padding:0;gap:3px}.websdr-tab-button{flex:1;padding:10px 6px!important;font-size:11px!important}#chatboxnew{height:230px;padding-inline:8px}.chat-message-header{gap:5px}.app-footer{font-size:9px}}
@media(max-width:380px){.hero-tuning input[name=frequency]{font-size:37px}.station-info-list{grid-template-columns:1fr}.brand-subtitle{font-size:10px}}
@media(max-width:700px){.websdr-tab-button{min-width:0}.websdr-tabs-body form[name=chatform] input[name=chat]{width:auto;margin-bottom:0}}