:root {
  --acc: #ff9f43;
  --acc-rgb: 255, 159, 67;
  --acc-on: #1d0e02;
  --readout: var(--acc);
  --fp-1: #22262c;
  --fp-2: #16191d;
  --fp-edge: rgba(255, 255, 255, 0.06);
  --key-1: #2b2f36;
  --key-2: #1f2228;
  --legend: #cfd5dd;
  --legend-dim: #848d99;
  --tft-1: #0d1a30;
  --tft-2: #07101f;
  --tft-3: #03070f;
  --ice: #e9f2ff;
  --ice-dim: #7f90aa;
  --rx: #43e397;
  --label: "Saira Semi Condensed", "Bahnschrift", "Roboto Condensed", "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", Consolas, "Cascadia Mono", monospace;
}

body.acc-cyan { --acc: #45c4ff; --acc-rgb: 69, 196, 255; --acc-on: #02141f; }
body.acc-green { --acc: #46e3a3; --acc-rgb: 70, 227, 163; --acc-on: #021a10; }
body.acc-violet { --acc: #b99bff; --acc-rgb: 185, 155, 255; --acc-on: #140a25; }
body.acc-red { --acc: #ff6b6b; --acc-rgb: 255, 107, 107; --acc-on: #200303; }

.dock {
  background: linear-gradient(270deg, #121418 0%, #181b20 100%);
  border-right: 1px solid #000;
  box-shadow: inset -1px 0 0 var(--fp-edge);
}

.dock-tab {
  position: relative;
  font-family: var(--label);
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--legend-dim);
  background: linear-gradient(270deg, var(--key-1) 0%, var(--key-2) 100%);
  border: 1px solid #000;
  border-left: 0;
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.06);
  padding: 14px 8px 14px 6px;
}

.dock-tab::before {
  content: "";
  position: absolute;
  right: 3px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.1);
}

.dock-tab:hover, .dock-tab[aria-expanded="true"] { color: var(--legend); background: linear-gradient(270deg, #343840 0%, #262a30 100%); }
.dock-tab.pinned { color: var(--legend); border-color: #000; }
.dock-tab.pinned::before { background: var(--acc); box-shadow: 0 0 6px rgba(var(--acc-rgb), 0.9); }

.panel {
  width: 316px;
  background: linear-gradient(180deg, var(--fp-1) 0%, var(--fp-2) 100%);
  border: 1px solid #000;
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 0 0 1px var(--fp-edge), 0 16px 40px rgba(0, 0, 0, 0.6);
  color: var(--legend);
}

.panel::after {
  content: "";
  position: absolute;
  top: 0;
  left: 18%;
  right: 18%;
  height: 2px;
  border-radius: 1px;
  background: linear-gradient(90deg, rgba(var(--acc-rgb), 0) 0%, rgba(var(--acc-rgb), 0.9) 50%, rgba(var(--acc-rgb), 0) 100%);
  box-shadow: 0 0 10px rgba(var(--acc-rgb), 0.5);
  pointer-events: none;
}

.panel-head {
  background: transparent;
  border-bottom: 1px solid rgba(0, 0, 0, 0.6);
  box-shadow: 0 1px 0 var(--fp-edge);
  border-radius: 12px 12px 0 0;
}

.panel-title {
  font-family: var(--label);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--legend-dim);
}

.panel-pin { color: var(--legend-dim); }
.panel-pin[aria-pressed="true"] { color: var(--acc); filter: drop-shadow(0 0 4px rgba(var(--acc-rgb), 0.7)); }

.accent-dot {
  width: 14px;
  height: 14px;
  min-height: 0;
  padding: 0;
  border-radius: 50%;
  border: 0;
  background: var(--acc);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.6), 0 0 8px rgba(var(--acc-rgb), 0.8);
  cursor: pointer;
}

.panel .sec-body {
  border-top: 0;
  gap: 12px;
  padding: 12px 14px 16px;
}

.panel .field > span,
.panel .stack > span,
.panel .eq-band span {
  font-family: var(--label);
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--legend-dim);
}

.panel .field output { font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0; text-transform: none; color: var(--acc); }

.panel button:not(.panel-pin):not(.accent-dot) {
  position: relative;
  font-family: var(--label);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--legend);
  background: linear-gradient(180deg, var(--key-1) 0%, var(--key-2) 100%);
  border: 1px solid #000;
  border-radius: 7px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 1px 0 rgba(255, 255, 255, 0.04), 0 2px 4px rgba(0, 0, 0, 0.45);
  transition: background 0.12s, box-shadow 0.12s, color 0.12s;
}

.panel button:not(.panel-pin):not(.accent-dot):hover { background: linear-gradient(180deg, #353a42 0%, #272b31 100%); }
.panel button:not(.panel-pin):not(.accent-dot):active { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6); }
.panel button:focus-visible, .panel select:focus-visible, .panel input:focus-visible { outline: 2px solid var(--acc); outline-offset: 1px; }

.panel .modes { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3px; }
.panel .modes button { height: 30px; min-height: 0; padding: 5px 0 0; font-size: 0.68rem; white-space: nowrap; overflow: hidden; }

.panel .modes button::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 30%;
  right: 30%;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.12);
}

.panel .modes button[aria-pressed="true"] {
  color: #fff;
  background: linear-gradient(180deg, rgba(var(--acc-rgb), 0.24) 0%, rgba(var(--acc-rgb), 0.1) 100%);
  border-color: #000;
  box-shadow: inset 0 0 0 1px rgba(var(--acc-rgb), 0.8), 0 0 14px -4px rgba(var(--acc-rgb), 0.8);
}

.panel .modes button[aria-pressed="true"]::before { background: var(--acc); box-shadow: 0 0 6px rgba(var(--acc-rgb), 0.95); }

.panel select,
.panel input[type="text"] {
  font-family: var(--label);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--legend);
  background: #101216;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 7px;
  min-height: 34px;
}

.panel select option { background: #15181c; }

.panel input[type="range"] { accent-color: var(--acc); height: 20px; }

.panel input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.6);
}

.panel input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -5px;
  border-radius: 50%;
  background: #e8ecf1;
  box-shadow: 0 0 0 3px rgba(var(--acc-rgb), 0.35), 0 2px 4px rgba(0, 0, 0, 0.6);
}

.panel input[type="range"]:not(.eq-slider) { -webkit-appearance: none; appearance: none; background: transparent; }

.panel input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.1); }
.panel input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: #e8ecf1; box-shadow: 0 0 0 3px rgba(var(--acc-rgb), 0.35); }

.tft {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px 9px;
  background: radial-gradient(130% 95% at 50% 0%, var(--tft-1) 0%, var(--tft-2) 55%, var(--tft-3) 100%);
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(130, 175, 255, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 0 0 1px #000, 0 1px 0 rgba(255, 255, 255, 0.05);
  color: var(--ice);
}

.tft-tags { display: flex; flex-wrap: wrap; gap: 5px; }

.tag {
  padding: 1px 6px;
  border-radius: 4px;
  font: 700 0.68rem/1.4 var(--label);
  letter-spacing: 0.1em;
  color: #4d5a6d;
  background: rgba(255, 255, 255, 0.04);
}

.tag.on { color: var(--ice); background: rgba(255, 255, 255, 0.09); }
.tag-rx { color: #02140b; background: var(--rx); }
.tag-rx.off { color: #4d5a6d; background: rgba(255, 255, 255, 0.04); }
.tag-mode { color: var(--acc); background: rgba(var(--acc-rgb), 0.14); box-shadow: inset 0 0 0 1px rgba(var(--acc-rgb), 0.75); }
.tag.warn { color: #1c1200; background: #ffcc4d; }

.panel .readout {
  justify-content: flex-end;
  padding: 0;
  background: none;
  border: 0;
}

.panel .freq-digits {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 2.15rem;
  letter-spacing: -0.02em;
  color: var(--ice);
  text-shadow: 0 0 16px rgba(150, 195, 255, 0.3);
}

.panel .freq-digits.ghz { font-size: 1.6rem; }
.panel .freq-digits .dg.lead { color: rgba(127, 144, 170, 0.35); }
.panel .freq-digits .dg:hover,
.panel .freq-digits .dg.sel { background: rgba(var(--acc-rgb), 0.14); color: var(--acc); text-shadow: 0 0 10px rgba(var(--acc-rgb), 0.8); }
.panel .readout .unit { font: 600 0.8rem var(--label); letter-spacing: 0.1em; color: var(--ice-dim); }
.panel .freq { font-family: var(--mono); color: var(--ice); background: rgba(0, 0, 0, 0.3); }

.meter { display: flex; flex-direction: column; gap: 3px; }

.meter-scale {
  position: relative;
  height: 12px;
  font: 600 0.66rem/12px var(--mono);
  color: var(--ice-dim);
}

.meter-scale span { position: absolute; transform: translateX(-50%); }
.meter-scale span.hot { color: #ff7b6b; }

.meter-segs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 2px;
  height: 10px;
}

.meter-segs i {
  border-radius: 1px;
  background: rgba(120, 160, 220, 0.12);
}

.meter-segs i.lit { background: #6fb6ff; box-shadow: 0 0 6px rgba(111, 182, 255, 0.55); }
.meter-segs i.lit.hot { background: #ff6b5b; box-shadow: 0 0 6px rgba(255, 107, 91, 0.6); }
.meter-segs i.peak { background: var(--ice); }

.meter-foot { display: flex; justify-content: space-between; font: 600 0.72rem var(--mono); color: var(--ice-dim); }
.meter-s { color: var(--ice); }

.tft-foot {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding-top: 5px;
  border-top: 1px solid rgba(130, 175, 255, 0.1);
  font: 600 0.7rem var(--label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ice-dim);
}

.tft-foot span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.knob-wrap { padding: 6px 0 2px; }

.knob {
  position: relative;
  width: 196px;
  height: 196px;
  padding: 0;
  background: radial-gradient(circle closest-side, #0a0b0d 0 78%, #181a1e 86%, #0c0d10 100%);
  box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 14px 28px rgba(0, 0, 0, 0.7);
}

.knob-ring {
  position: absolute;
  inset: 3%;
  border-radius: 50%;
  background: repeating-conic-gradient(rgba(255, 255, 255, 0.3) 0deg 1deg, transparent 1deg 6deg);
  -webkit-mask: radial-gradient(circle closest-side, transparent 88%, #000 89%, #000 99%, transparent 100%);
  mask: radial-gradient(circle closest-side, transparent 88%, #000 89%, #000 99%, transparent 100%);
  pointer-events: none;
}

.knob::after {
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  box-shadow: 0 0 0 1.5px rgba(var(--acc-rgb), 0.5), 0 0 12px 1px rgba(var(--acc-rgb), 0.25);
  transition: box-shadow 0.18s ease;
  pointer-events: none;
}

.knob:hover::after { box-shadow: 0 0 0 1.5px rgba(var(--acc-rgb), 0.75), 0 0 16px 2px rgba(var(--acc-rgb), 0.38); }
.knob.turning::after { box-shadow: 0 0 0 2px rgba(var(--acc-rgb), 1), 0 0 22px 4px rgba(var(--acc-rgb), 0.55); transition-duration: 0.05s; }

.knob-face {
  position: absolute;
  inset: 14%;
  width: auto;
  height: auto;
  background:
    repeating-radial-gradient(circle, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 3px),
    radial-gradient(circle, #2d3137 0%, #24272c 55%, #1b1d21 85%, #141619 100%);
  box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 -4px 8px rgba(0, 0, 0, 0.45), 0 6px 12px rgba(0, 0, 0, 0.55);
}

.knob-face::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 42%);
  pointer-events: none;
}

.knob-dimple {
  top: 7%;
  width: 7%;
  height: 7%;
  margin-left: -3.5%;
  background: var(--acc);
  box-shadow: 0 0 6px rgba(var(--acc-rgb), 0.95), 0 0 14px rgba(var(--acc-rgb), 0.45);
}

.panel .step-row { grid-template-columns: 46px 1fr 46px; }
.panel .step-row button { height: 36px; font-size: 1.25rem; }
.panel .pick-row select { font-size: 0.95rem; }

.panel .eq-panel { background: #0e1013; border: 1px solid #000; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6); border-radius: 8px; }
.panel .eq-band output { font-family: var(--mono); font-size: 0.72rem; color: var(--acc); }
.panel .eq-hint { font-family: var(--label); letter-spacing: 0.04em; }
.panel #eq-edit[aria-expanded="true"] { box-shadow: inset 0 0 0 1px rgba(var(--acc-rgb), 0.8); color: #fff; }
.panel .decoder-panel { background: var(--tft-3); border: 1px solid rgba(130, 175, 255, 0.13); }
.panel .decoded { font-family: var(--mono); color: var(--ice); }
.panel .decoder-status { font-family: var(--mono); font-size: 0.75rem; }

@media (max-width: 760px) {
  .panel { width: auto; border-radius: 12px 12px 0 0; }
  .knob { width: 150px; height: 150px; }
}

.marks { top: 26px; z-index: 3; }

.mark {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 20px;
  max-width: 160px;
  padding: 0 8px 0 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  background: rgba(10, 14, 20, 0.78);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  color: #e8eef6;
  font: 600 0.72rem/1 var(--label);
  letter-spacing: 0.04em;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  transition: border-color 0.12s, background-color 0.12s, transform 0.12s;
}

.mark.lane-0 { top: 0; }
.mark.lane-1 { top: -24px; }

.mark::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 1px;
  height: var(--stem, 46px);
  background: linear-gradient(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.15));
  pointer-events: none;
}

.mark.lane-1::after { height: calc(var(--stem, 46px) + 24px); }

.mark-dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #8a94a3;
  box-shadow: 0 0 6px currentColor;
  color: #8a94a3;
}

.mark[data-mode="usb"] .mark-dot, .mark[data-mode="lsb"] .mark-dot { background: #46e3a3; color: #46e3a3; }
.mark[data-mode="am"] .mark-dot { background: #ffcc4d; color: #ffcc4d; }
.mark[data-mode="nfm"] .mark-dot, .mark[data-mode="wfm"] .mark-dot { background: #45c4ff; color: #45c4ff; }
.mark[data-mode="cw"] .mark-dot { background: #b99bff; color: #b99bff; }

.mark-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mark-mode { font: 600 0.6rem/1 var(--mono); color: #8693a5; letter-spacing: 0; }

.mark:hover, .mark:focus-visible {
  border-color: rgba(var(--acc-rgb), 0.85);
  background: rgba(16, 22, 30, 0.95);
  color: #fff;
  outline: none;
  z-index: 2;
  max-width: none;
}

.mark:hover::after { background: linear-gradient(rgba(var(--acc-rgb), 0.9), rgba(var(--acc-rgb), 0)); }

.sq-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; }
.panel #sq-auto { min-height: 28px; height: 28px; padding: 0 10px; font-size: 0.78rem; }
.panel #sq-auto[aria-pressed="true"] { color: #fff; box-shadow: inset 0 0 0 1px rgba(var(--acc-rgb), 0.85), 0 0 10px -3px rgba(var(--acc-rgb), 0.8); }
.sq-row input.auto { opacity: 0.35; }

@media (max-width: 760px) {
  .dock-tab { border: 1px solid #000; }
  .dock-tab::before { display: none; }
}