/* ============================================================
   WebSDR theme "CRT / graphite" (concept 3)
   Visual-only reskin. Does NOT change any element IDs, names,
   structure or behaviour: it only restyles existing elements
   produced by the WebSDR server and its scripts.
   ============================================================ */

:root{
  --wsdr-g1:#22262b;   /* panel light */
  --wsdr-g2:#14171b;   /* panel dark  */
  --wsdr-bg1:#12161b;
  --wsdr-bg2:#05070a;
  --wsdr-card1:#1b1f24;
  --wsdr-card2:#111418;
  --wsdr-edge:#2b3138;
  --wsdr-ph:#37ff9a;    /* phosphor green */
  --wsdr-ph-dim:#0f7a4a;
  --wsdr-amber:#ffd27a; /* accent */
  --wsdr-ink:#c9d3cc;
  --wsdr-muted:#5a6570;
}

html,body{
  color:var(--wsdr-ink);
  background:var(--wsdr-bg2) radial-gradient(circle at 50% -10%,var(--wsdr-bg1),var(--wsdr-bg2) 70%) fixed;
  font-family:"Segoe UI","Roboto","DejaVu Sans",sans-serif;
}
body{ margin:0; padding:18px 22px 40px; }

/* headings / intro */
body h1{
  font-weight:700; letter-spacing:4px; font-size:30px; margin:6px 0 4px;
  color:#eef5f0;
}
body h1::first-letter,
body h1{ }
a{ color:var(--wsdr-ph); text-decoration:none; }
a:hover{ text-decoration:underline; text-shadow:0 0 8px var(--wsdr-ph); }
hr{ border:none; border-top:1px solid var(--wsdr-edge); margin:14px 0; }

/* ---- control panels (.ctl) become graphite cards ---- */
.ctl{
  background:linear-gradient(180deg,var(--wsdr-card1),var(--wsdr-card2)) !important;
  color:var(--wsdr-ink);
  border:1px solid var(--wsdr-edge) !important;
  border-radius:10px !important;
  margin:8px !important;
  padding:12px 14px !important;
  box-shadow:0 6px 16px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04);
}
.ctl b{ color:var(--wsdr-muted); font-weight:600; letter-spacing:1px; }

/* ---- buttons (band/mode/step/etc.) ---- */
input[type="button"], button, input[type="submit"]{
  font-family:inherit; font-size:12px; letter-spacing:1px; color:var(--wsdr-ink);
  background:#0e1114; border:1px solid var(--wsdr-edge); border-radius:6px;
  padding:6px 10px; margin:2px; cursor:pointer;
  transition:border-color .12s, color .12s, box-shadow .12s, background .12s;
}
input[type="button"]:hover, button:hover, input[type="submit"]:hover{
  border-color:var(--wsdr-ph); color:#eaf7ef; box-shadow:0 0 8px rgba(55,255,154,.25);
}
input[type="button"]:active, button:active{
  background:rgba(55,255,154,.12); border-color:var(--wsdr-ph); color:var(--wsdr-ph);
  box-shadow:inset 0 0 8px rgba(55,255,154,.35);
}

/* ---- text inputs ---- */
input[type="text"]{
  background:#0c0f12; color:var(--wsdr-ph); border:1px solid var(--wsdr-edge);
  border-radius:5px; padding:4px 8px; font-family:"Consolas","DejaVu Sans Mono",monospace;
}
input[type="text"]:focus{ outline:none; border-color:var(--wsdr-ph); box-shadow:0 0 8px rgba(55,255,154,.3); }

/* main frequency box: big phosphor readout */
form[name="freqform"] input[name="frequency"]{
  font-size:26px; letter-spacing:2px; color:var(--wsdr-ph);
  background:#08120c; border:1px solid var(--wsdr-ph-dim); border-radius:6px;
  text-shadow:0 0 10px var(--wsdr-ph); text-align:right; width:9em;
  box-shadow:inset 0 0 14px rgba(55,255,154,.18);
}

/* ---- selects ---- */
select{
  background:#0e1114; color:var(--wsdr-ink); border:1px solid var(--wsdr-edge);
  border-radius:5px; padding:3px 6px; font-family:inherit;
}
select:focus{ outline:none; border-color:var(--wsdr-ph); }

/* ---- checkboxes / radios / range accent ---- */
input[type="checkbox"], input[type="radio"], input[type="range"]{ accent-color:var(--wsdr-ph); }

/* band radios (generated inline after "Band:") */
form[name="freqform"]{ line-height:1.9; }

/* ---- waterfall area framed like a CRT screen ---- */
#waterfalls{
  background:radial-gradient(120% 100% at 50% 0%,#062015,#020a06);
  padding:10px; border-radius:8px;
  box-shadow:inset 0 0 0 2px #0a1a12, inset 0 0 60px rgba(0,0,0,.85),
             0 8px 22px rgba(0,0,0,.55);
  position:relative;
}
#waterfalls .scale{ border-radius:2px; }

/* subtle scanline overlay over the whole waterfall block */
#waterfalls::after{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:8px;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 2px,transparent 2px 4px);
  opacity:.35;
}

/* ---- S-meter ---- */
#numericalsmeter, #numericalsmeterpeak,
#numericalbandwidth6, #numericalbandwidth60{ color:var(--wsdr-ph); font-family:"Consolas",monospace; }

/* ---- users / statistics ---- */
#numusers{ color:var(--wsdr-ph); font-weight:700; }
#stats{ color:var(--wsdr-muted); }

/* ---- warnings keep alerting but themed ---- */
.warning{
  color:#ff8a8a; background:#1a1113; border:1px solid #5a2b2b !important;
  border-radius:8px; box-shadow:0 0 12px rgba(255,80,80,.15);
}

/* keyboard-help list */
.keylist{ color:var(--wsdr-muted); }
.keylist tt b{ color:var(--wsdr-amber); }

/* signal graph canvas frame */
#sgraph{ background:#08120c; border:1px solid var(--wsdr-edge); border-radius:6px; }

/* tables inside controls: tidy spacing */
.ctl table td{ padding:1px 2px; }

/* ============================================================
   Concept-3 "receiver" panel built by websdr-skin.js
   (layout mirrors the concept-3 mockup)
   ============================================================ */
.wsdr-rig{
  max-width:1120px; margin:0 auto 22px; position:relative; border-radius:14px;
  padding:26px 30px;
  background:linear-gradient(160deg,var(--wsdr-g1),var(--wsdr-g2));
  border:1px solid #000;
  box-shadow:0 0 0 4px #0b0d10, 0 26px 60px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.06);
}

/* brand block: logo + station description inside one panel */
.wsdr-brand{
  margin-bottom:16px; padding:14px 16px; border-radius:10px; overflow:hidden;
  border:1px solid var(--wsdr-edge);
  background:linear-gradient(180deg,var(--wsdr-card1),var(--wsdr-card2));
}
.wsdr-brandhead{ display:flex; align-items:baseline; flex-wrap:wrap; gap:14px; }
.wsdr-name{ font-family:"Segoe UI","Roboto",sans-serif; font-weight:700; letter-spacing:4px; font-size:26px; color:#eef5f0; }
.wsdr-name b{ color:var(--wsdr-ph); text-shadow:0 0 12px var(--wsdr-ph); }
.wsdr-sub{ font-size:11px; letter-spacing:3px; color:var(--wsdr-muted); text-transform:uppercase; }
.wsdr-lang{ margin-left:auto; font-family:"Segoe UI","Roboto",sans-serif; font-size:13px; letter-spacing:1px; white-space:nowrap; }
.wsdr-lang-a{ color:var(--wsdr-muted); text-decoration:none; padding:0 2px; }
.wsdr-lang-a:hover{ color:var(--wsdr-ink); }
.wsdr-lang-a.on{ color:var(--wsdr-ph); text-shadow:0 0 10px var(--wsdr-ph); font-weight:700; }
.wsdr-lang-sep{ color:var(--wsdr-edge); margin:0 4px; }
.wsdr-desc{ flex:0 0 100%; width:100%; margin-top:4px; text-align:left; font-size:12px; line-height:1.5; color:var(--wsdr-muted); overflow-wrap:break-word; }
.wsdr-desc h1,.wsdr-h1{ display:block; font-size:12px; font-weight:600; letter-spacing:.3px; margin:0 0 4px; color:var(--wsdr-ink); }
.wsdr-desc hr{ display:none; }
.wsdr-desc > br:first-child{ display:none; }
.wsdr-desc a{ color:var(--wsdr-ph); }
.wsdr-desc center{ text-align:left; display:block; max-width:70ch; }
.wsdr-desc b,.wsdr-desc i{ color:var(--wsdr-ink); font-weight:400; font-style:normal; }

/* tuning passband indicator (#yellowbar) in the brand phosphor green */
#yellowbarr{ background-color:var(--wsdr-ph) !important; box-shadow:0 0 6px var(--wsdr-ph); }

/* CRT screen (holds the moved scale + waterfall). The native waterfall/scale
   are a fixed 1024px wide, so the frame is sized to match (no empty margins,
   no clipping) and centered; not scaled, to keep click-to-tune accurate. */
.wsdr-crt{
  width:1024px; max-width:100%; margin:0 auto;
  border-radius:8px; padding:10px 0; position:relative; overflow:hidden;
  background:radial-gradient(120% 100% at 50% 0%,#062015,#020a06);
  box-shadow:inset 0 0 0 2px #0a1a12, inset 0 0 60px rgba(0,0,0,.9);
}
.wsdr-crt::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:3;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.22) 0 2px,transparent 2px 4px); opacity:.35;
}
.wsdr-crt #waterfalls{ background:transparent; padding:0; box-shadow:none; }
.wsdr-crt #waterfalls::after{ display:none; }
/* Lock the moved scale+waterfall to the native 1024px window and clip it, so
   zooming/panning (which slides the scale image tiles by up to +/-1024px and
   moves the passband to the band edges) can never spill outside the frame. */
.wsdr-crt > div{ position:relative; width:1024px; max-width:100%; margin:0 auto; overflow:hidden; }
.wsdr-crt #waterfalls{ width:1024px; max-width:100%; overflow:hidden; }

/* big frequency readout (editable), knobs to its left, audio-start to its right.
   1fr|auto|1fr grid keeps the readout perfectly centred on the page; the side
   groups hug inward (end/start) so the knobs stay next to the frequency and
   inside the 1024px waterfall width even as the readout grows/shrinks. */
.wsdr-freqrow{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:26px; margin:16px auto; max-width:1024px; }
.wsdr-freqbox{ display:flex; justify-content:center; align-items:baseline; gap:14px; transform:translateY(-20%); }
.wsdr-freqknobs{ height:auto; gap:18px; justify-self:end; }
.wsdr-freqright{ display:flex; align-items:center; gap:16px; justify-self:start; }
.wsdr-freqright .wsdr-audiostart{ margin-top:0; }
/* stacked audio-start over Mute, matched widths */
.wsdr-audiobtns{ display:flex; flex-direction:column; gap:8px; align-items:stretch; }
.wsdr-audiobtns .wsdr-startbtn{ margin:0; width:100%; box-sizing:border-box; }
/* Mute shares the audio-start look; lit (muted) state uses the brand green fill */
.wsdr-mutebtn.on{ color:#04140c; background:var(--wsdr-ph); box-shadow:0 0 14px rgba(55,255,154,.5); }
.wsdr-freq{
  font-family:"Consolas","DejaVu Sans Mono",monospace;
  font-size:44px; font-weight:700; letter-spacing:3px; text-align:center;
  color:var(--wsdr-ph); text-shadow:0 0 14px var(--wsdr-ph);
  background:transparent; border:none; width:auto; padding:0;
  box-shadow:none;
}
.wsdr-freq:focus{ outline:none; border-bottom:1px solid var(--wsdr-ph-dim); }
.wsdr-unit{ font-size:44px; font-weight:400; color:var(--wsdr-muted); letter-spacing:2px; }

/* control cards */
.wsdr-controls{ display:flex; gap:16px; flex-wrap:wrap; margin-top:16px; }
.wsdr-card{
  flex:1 1 200px;
  background:linear-gradient(180deg,var(--wsdr-card1),var(--wsdr-card2));
  border:1px solid var(--wsdr-edge); border-radius:10px; padding:12px;
}
.wsdr-card-wide{ flex:1 1 260px; }
.wsdr-card-knobs{ flex:2 1 420px; }

/* main row: [Диапазоны+Режим] [Настройка knob] [S-метр].
   The two side cards hug their button content (equal width, forced in JS) so
   the padding around the buttons is symmetric; the big freed centre space is
   taken by the tuning knob. All three stretch to the same height. */
.wsdr-row-main{ display:grid; grid-template-columns:max-content 1fr max-content; align-items:stretch; }
/* top-align content so the gap above the first heading matches the "Настройка"
   card; card heights are equalised to the (shortest) Bands card in JS */
/* min-height:0 lets the grid actually shrink the Tune/S-meter cards down to the
   Bands height set in JS (grid items default to min-height:auto and would
   otherwise refuse to go below their content) */
.wsdr-row-main > .wsdr-card{ box-sizing:border-box; margin:0; display:flex; flex-direction:column; justify-content:flex-start; min-height:0; overflow:hidden; }
/* keep every button row on one line so the Bands card keeps its natural width
   (no wrapping "Rec" onto a second row that would narrow the card) */
.wsdr-row-main .wsdr-btns{ flex-wrap:nowrap; }
.wsdr-card h4{
  margin:0 0 10px; font-family:"Segoe UI","Roboto",sans-serif; font-size:10px;
  letter-spacing:3px; text-transform:uppercase; color:var(--wsdr-muted);
}
.wsdr-btns{ display:flex; flex-wrap:wrap; gap:6px; }
.wsdr-btn{
  font-family:"Segoe UI","Roboto",sans-serif; font-size:12px; letter-spacing:1px;
  color:var(--wsdr-ink); cursor:pointer; user-select:none;
  background:#0e1114; border:1px solid var(--wsdr-edge); border-radius:6px; padding:7px 11px;
  transition:border-color .12s, color .12s, box-shadow .12s, background .12s;
}
.wsdr-btn:hover{ border-color:var(--wsdr-ph); color:#eaf7ef; }
.wsdr-btn.on{
  background:rgba(55,255,154,.12); border-color:var(--wsdr-ph); color:var(--wsdr-ph);
  box-shadow:0 0 10px rgba(55,255,154,.35); text-shadow:0 0 8px var(--wsdr-ph);
}

/* S-meter: analog needle gauge on top (scales with the card height), thin
   linear bar + labels pinned beneath it so they never get squeezed away */
.wsdr-smeter-card{ display:flex; flex-direction:column; align-items:center; }
.wsdr-smeter-card h4{ align-self:stretch; }
.wsdr-smeter-card .wsdr-bar,
.wsdr-smeter-card .wsdr-slabel,
.wsdr-smeter-card .wsdr-snum{ width:90%; }
.wsdr-analog{ display:flex; align-items:center; justify-content:center; flex:1 1 auto; min-height:0; }
.wsdr-gauge{ width:90%; height:auto; max-width:90%; max-height:100%; }
.wsdr-gauge #wsdr-needle{ transition:transform .35s cubic-bezier(.22,.61,.36,1); }
.wsdr-gauge .wsdr-gt{ fill:var(--wsdr-muted); font-size:10px; font-family:"Segoe UI",sans-serif; }

/* linear S-meter */
.wsdr-bar{
  height:14px; border-radius:7px; background:#0e1114; border:1px solid var(--wsdr-edge);
  overflow:hidden; position:relative; margin:6px 0; flex:0 0 auto;
}
.wsdr-slabel, .wsdr-snum{ flex:0 0 auto; }
.wsdr-bar-thin{ height:7px; border-radius:4px; }
.wsdr-bar > i{
  position:absolute; left:0; top:0; bottom:0; width:0%;
  background:linear-gradient(90deg,#0b7a44,var(--wsdr-ph)); box-shadow:0 0 12px var(--wsdr-ph);
  transition:width .15s linear;
}
.wsdr-bar > u{ position:absolute; left:0; top:0; bottom:0; width:2px; background:#ffae3d; box-shadow:0 0 8px #ffae3d; }
.wsdr-slabel{ display:flex; justify-content:space-between; font-size:10px; color:var(--wsdr-muted); }
.wsdr-snum{ margin-top:8px; font-size:11px; color:var(--wsdr-muted); }
.wsdr-snum span{ color:var(--wsdr-ph); }

/* knobs */
.wsdr-knobrow{ display:flex; gap:20px; justify-content:center; align-items:center; flex-wrap:wrap; height:100%; }
.wsdr-knobwrap{ text-align:center; user-select:none; }
.wsdr-knob{
  width:72px; height:72px; border-radius:50%; position:relative; margin:0 auto;
  cursor:grab; touch-action:none;
  background:radial-gradient(circle at 38% 30%,#3a4148,#14171b 70%);
  border:1px solid #000; box-shadow:inset 0 2px 3px rgba(255,255,255,.12), 0 6px 12px rgba(0,0,0,.5);
}
.wsdr-knob:active{ cursor:grabbing; }
.wsdr-knob-ind{
  position:absolute; top:7px; left:50%; width:3px; height:19px; margin-left:-1.5px;
  background:var(--wsdr-ph); border-radius:2px; box-shadow:0 0 6px var(--wsdr-ph);
}
.wsdr-kcap{ font-size:9px; letter-spacing:2px; color:var(--wsdr-muted); text-align:center; margin-top:6px; text-transform:uppercase; }
.wsdr-card-knobs .wsdr-knobrow{ height:auto; }

/* bounded volume knob: static body, only the indicator rotor turns; centre
   shows the 0..100 level */
.wsdr-knob-vol{ cursor:pointer; width:79px; height:79px; }
/* centre the Mute/Chrome buttons on the knob itself: take the caption out of
   flow so the knobwrap height equals the knob and align-items:center lines up */
.wsdr-freqright .wsdr-knobwrap{ position:relative; }
.wsdr-freqright .wsdr-volcap{ position:absolute; left:0; right:0; top:100%; margin-top:6px; }
.wsdr-knob-rotor{ position:absolute; inset:0; }
/* "Vol  77" caption under the knob, symmetric about the knob centre */
.wsdr-volcap{ display:flex; gap:7px; justify-content:center; align-items:baseline; }
.wsdr-volnum{
  font-family:"Consolas","DejaVu Sans Mono",monospace; font-size:11px; font-weight:600;
  letter-spacing:0; color:var(--wsdr-muted);
}

/* detailed pro-radio tuning knob (centre of the main row) — no frame/heading */
.wsdr-tune-card{ display:flex; flex-direction:column; background:none; border:none; }
.wsdr-bigtune{ flex:1 1 auto; display:flex; align-items:center; justify-content:center; min-height:0; }
.wsdr-btsvg{
  height:100%; width:auto; max-width:100%; max-height:239px; aspect-ratio:1/1;
  cursor:grab; touch-action:none;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.6));
}
.wsdr-btsvg:active{ cursor:grabbing; }
.wsdr-bt-rot{ transform-box:view-box; transform-origin:100px 100px; }
.wsdr-bt-glow{ fill:none; stroke:rgba(55,255,154,.10); stroke-width:3; }
.wsdr-bt-bezel{ fill:none; stroke:#070a0d; stroke-width:5; }
.wsdr-bt-scale{ stroke:#2c343b; stroke-width:1; }
.wsdr-bt-scaleM{ stroke:#37ff9a; stroke-width:1.6; opacity:.55; }
.wsdr-bt-knurl{ stroke:rgba(0,0,0,.6); stroke-width:1.3; stroke-linecap:butt; }
.wsdr-bt-ptr{ fill:var(--wsdr-ph); filter:drop-shadow(0 0 5px var(--wsdr-ph)); }
.wsdr-bt-dimple{ fill:#0a0d10; stroke:rgba(255,255,255,.08); stroke-width:1; }
.wsdr-bt-hubring{ fill:none; stroke:rgba(55,255,154,.22); stroke-width:1; }
.wsdr-bt-hubdot{ fill:var(--wsdr-ph); filter:drop-shadow(0 0 4px var(--wsdr-ph)); }

/* waterfall scale labels (DX/memory tags) — brand green text, no fill/box,
   thin + small so crowded bands stay legible */
.statinfo0, .statinfo0l{
  background:transparent !important; background-color:transparent !important;
  color:var(--wsdr-ph) !important; border-color:transparent !important;
  text-shadow:0 0 4px var(--wsdr-ph);
  font-size:10px !important; font-weight:200 !important; letter-spacing:.1px;
  line-height:1 !important; white-space:nowrap;
}

/* sub-heading (e.g. "Режим" grouped under "Диапазоны") */
.wsdr-subh{ margin-top:16px !important; }

/* Chrome/iOS audio-start button moved into the "Управление" card */
.wsdr-audiostart{ margin-top:16px; text-align:center; }
.wsdr-startbtn{
  font-family:"Segoe UI","Roboto",sans-serif; font-size:12px; letter-spacing:1px; cursor:pointer;
  color:var(--wsdr-ph); background:rgba(55,255,154,.12); border:1px solid var(--wsdr-ph);
  border-radius:6px; padding:8px 16px; box-shadow:0 0 10px rgba(55,255,154,.25);
  transition:background .12s, box-shadow .12s;
}
.wsdr-startbtn:hover{ background:rgba(55,255,154,.2); box-shadow:0 0 14px rgba(55,255,154,.4); }

/* audio-start + logbook cards (native blocks moved into the panel) */
.wsdr-cardbody{ font-size:12px; color:var(--wsdr-ink); }
.wsdr-cardbody .ctl{ all:unset; display:block; }
.wsdr-cardbody b{ color:var(--wsdr-muted); font-weight:600; font-size:11px; letter-spacing:1px; }
.wsdr-cardbody input[type=text]{
  background:#0e1114; border:1px solid var(--wsdr-edge); border-radius:6px;
  color:var(--wsdr-ink); padding:5px 8px; margin:3px 0; font-size:12px; max-width:100%;
}
.wsdr-cardbody input[type=button],.wsdr-cardbody input[type=submit]{
  font-family:"Segoe UI","Roboto",sans-serif; font-size:12px; cursor:pointer;
  color:var(--wsdr-ink); background:#0e1114; border:1px solid var(--wsdr-edge);
  border-radius:6px; padding:6px 12px; margin:4px 4px 4px 0;
}
.wsdr-cardbody input[type=button]:hover,.wsdr-cardbody input[type=submit]:hover{ border-color:var(--wsdr-ph); color:var(--wsdr-ph); }
.wsdr-cardbody input[type=radio]{ accent-color:var(--wsdr-ph); margin:0 4px 0 8px; vertical-align:middle; }
.wsdr-cardbody a{ color:var(--wsdr-ph); }
.wsdr-cardbody span{ font-size:11px; color:var(--wsdr-muted); }

/* sound-applet block styled as a card + toned-down qrz link.
   the inner div is built by websdr-sound.js with hard-coded white/black inline
   styles, so override them on that child. */
.wsdr-sndbox{ margin-top:16px; }
.wsdr-sndbox:empty{ display:none; }
.wsdr-sndbox > div{
  display:inline-block !important; max-width:400px !important;
  margin:0 !important; padding:10px 12px !important;
  font-size:11px !important; color:var(--wsdr-muted) !important;
  background:linear-gradient(180deg,var(--wsdr-card1),var(--wsdr-card2)) !important;
  border:1px solid var(--wsdr-edge) !important; border-radius:8px !important;
}
body > a[href*="qrz.ru"]{ font-size:10px; color:var(--wsdr-muted); }
body > a[href*="qrz.ru"]:hover{ color:var(--wsdr-ph); text-shadow:none; }

/* login line (native usernameform) above the waterfall, centered, no underline;
   the online indicator sits on the same line, right after the name input */
.wsdr-login{ margin-top:12px; font-size:11px; color:var(--wsdr-muted); text-align:center;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px; }
.wsdr-login:empty{ display:none; }
.wsdr-login form{ margin:0; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px; }
.wsdr-onlinebox{ display:inline-flex; align-items:center; font-size:11px; letter-spacing:1px; color:var(--wsdr-muted); white-space:nowrap; }
.wsdr-login a{ text-decoration:none; }
.wsdr-login a:hover{ text-decoration:none; text-shadow:none; }
.wsdr-login b,.wsdr-login i{ font-weight:400; font-style:normal; font-size:11px; color:var(--wsdr-muted); }
.wsdr-login input[type=text]{ font-size:11px; }

/* statistics block moved into its tab */
#wsdr-stats-host{ font-size:11px; color:var(--wsdr-muted); }
#wsdr-stats-host #stats{ color:var(--wsdr-ink); }

/* collapsible Users / Chat block */
.wsdr-comms-card{ flex:1 1 100%; }
.wsdr-comms-tabs{ display:flex; gap:8px; }
.wsdr-comms-tab{ flex:0 0 auto; padding:7px 16px; text-transform:uppercase; }
.wsdr-comms-panel{ margin-top:12px; }
.wsdr-comms-panel.wsdr-collapsed{ display:none; }
.wsdr-comms-panel form[name="form1"]{ margin:0; font-size:12px; color:var(--wsdr-ink); }
.wsdr-comms-panel #numusers{ color:var(--wsdr-ph); font-weight:700; }
.wsdr-comms-panel #users{ margin-top:8px; }
.wsdr-comms-panel #chatbro{ width:100%; }

/* Users tab: online listeners as country flag + name + IP */
.wsdr-geo{ padding:10px 12px; font-size:12px; color:var(--wsdr-ink); }
.wsdr-geo-empty{ color:var(--wsdr-muted); padding:6px 0; }
.wsdr-geo-tbl{ width:100%; border-collapse:collapse; }
.wsdr-geo-tbl th{
  text-align:left; font-weight:600; font-size:10px; letter-spacing:1px;
  text-transform:uppercase; color:var(--wsdr-muted);
  padding:4px 10px 6px 0; border-bottom:1px solid var(--wsdr-edge);
}
.wsdr-geo-tbl td{ padding:5px 10px 5px 0; border-bottom:1px solid rgba(43,49,56,.5); vertical-align:middle; }
.wsdr-geo-tbl tr:last-child td{ border-bottom:none; }
.wsdr-geo-cc{ white-space:nowrap; color:var(--wsdr-muted); }
.wsdr-geo-flag{
  width:24px; height:18px; margin-right:7px; vertical-align:middle;
  border:1px solid var(--wsdr-edge); border-radius:2px; object-fit:cover;
}
.wsdr-geo-ip{ font-family:"Consolas","Menlo",monospace; color:var(--wsdr-ph); letter-spacing:.5px; }
.wsdr-geo-anon{ color:var(--wsdr-muted); font-style:italic; }

/* bottom bar: sound-applet block on the left, Yandex informer on the right */
.wsdr-status{ display:flex; align-items:center; }
.wsdr-status:empty{ display:none; }
.wsdr-metrika{ margin-left:auto; line-height:0; align-self:center; }
.wsdr-metrika img{ display:block; }
.wsdr-lamp{ display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--wsdr-ph); box-shadow:0 0 10px var(--wsdr-ph); margin-right:6px; vertical-align:middle; }

/* hidden stock controls now represented by the panel */
.wsdr-hidden{ display:none !important; }

/* secondary (auxiliary) stock area below the panel stays usable but calm */
body > form[name="html5choiceform"], body > hr{ opacity:.9; }

@media (max-width:640px){
  .wsdr-rig{ padding:16px; }
  .wsdr-freq{ font-size:32px; width:6em; }
  .wsdr-knob{ width:52px; height:52px; }
  .wsdr-row-main{ grid-template-columns:1fr; }
  .wsdr-btsvg{ max-height:160px; }
  .wsdr-freqrow{ grid-template-columns:1fr; justify-items:center; }
  .wsdr-freqknobs, .wsdr-freqrow .wsdr-audiostart{ justify-self:center; text-align:center; }
}