:root {
    color-scheme: dark;
    --bg: #111314;
    --bg-soft: #191c1e;
    --surface: #202427;
    --surface-2: #2a3033;
    --panel: #151718;
    --line: #3b4448;
    --line-soft: #2d3336;
    --text: #eef4f3;
    --muted: #9dadab;
    --cyan: #42f0e9;
    --cyan-soft: rgba(66, 240, 233, 0.18);
    --green: #72f28b;
    --amber: #ffbd57;
    --red: #ff5e57;
    --blue: #6ba9ff;
    --shadow: 0 18px 50px rgba(0, 0, 0, 0.38);
}

* {
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    margin: 0;
    background:
        linear-gradient(135deg, rgba(66, 240, 233, 0.08), transparent 28%),
        linear-gradient(315deg, rgba(255, 189, 87, 0.08), transparent 30%),
        var(--bg);
    color: var(--text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 16px;
    line-height: 1.5;
}

a {
    color: var(--cyan);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.container {
    width: min(1180px, calc(100% - 28px));
    margin: 18px auto;
    padding: 18px;
    background: rgba(25, 28, 30, 0.94);
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    box-shadow: var(--shadow);
}

.station-shell {
    width: min(1480px, calc(100% - 24px));
    background: rgba(16, 18, 19, 0.96);
}

header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    margin-bottom: 14px;
    background: linear-gradient(180deg, #2b3032, #191c1e);
    border: 1px solid var(--line-soft);
    border-radius: 8px;
}

.station-header {
    border-color: rgba(66, 240, 233, 0.22);
}

header h1 {
    margin: 0;
    font-size: clamp(1.25rem, 2vw, 1.9rem);
    font-weight: 760;
    letter-spacing: 0;
}

nav {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

nav a,
button,
input,
select {
    font: inherit;
}

nav a {
    padding: 7px 10px;
    border: 1px solid transparent;
    border-radius: 6px;
}

nav a:hover {
    background: var(--surface);
    border-color: var(--line);
    text-decoration: none;
}

.notice {
    margin: 0 0 14px;
    padding: 10px 12px;
    color: #ffe6ba;
    background: rgba(255, 189, 87, 0.11);
    border: 1px solid rgba(255, 189, 87, 0.25);
    border-radius: 6px;
}

footer {
    margin-top: 22px;
    padding-top: 14px;
    color: var(--muted);
    text-align: center;
    border-top: 1px solid var(--line-soft);
}

input,
select,
textarea {
    min-height: 38px;
    width: 100%;
    padding: 8px 10px;
    color: var(--text);
    background: #0f1112;
    border: 1px solid var(--line);
    border-radius: 6px;
    outline: none;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--cyan);
    box-shadow: 0 0 0 3px var(--cyan-soft);
}

label {
    display: grid;
    gap: 6px;
    color: var(--muted);
    font-size: 0.92rem;
}

button {
    min-height: 38px;
    padding: 8px 12px;
    color: var(--text);
    background: linear-gradient(180deg, #343b3f, #22272a);
    border: 1px solid #4b565b;
    border-radius: 6px;
    cursor: pointer;
    transition: transform 120ms ease, border-color 120ms ease, background 120ms ease;
}

button:hover:not(:disabled) {
    transform: translateY(-1px);
    border-color: var(--cyan);
}

button:active:not(:disabled) {
    transform: translateY(0);
}

button:disabled,
input:disabled,
select:disabled {
    cursor: not-allowed;
    opacity: 0.48;
}

h2 {
    margin: 0 0 12px;
    font-size: 1rem;
    font-weight: 720;
    letter-spacing: 0;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    padding: 9px 10px;
    border-bottom: 1px solid var(--line-soft);
    text-align: left;
    vertical-align: middle;
}

th {
    color: #d9e7e5;
    background: #23292c;
    font-size: 0.84rem;
    font-weight: 720;
}

td {
    color: var(--text);
}

code {
    color: var(--cyan);
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

.warn {
    margin: 0;
    padding: 10px 12px;
    color: #ffe6ba;
    background: rgba(255, 189, 87, 0.11);
    border: 1px solid rgba(255, 189, 87, 0.24);
    border-radius: 6px;
}

.muted {
    color: var(--muted);
}

.radio-workbench {
    display: grid;
    gap: 14px;
}

.status-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.status-strip > div,
.desk-block,
.setting-card,
.cat-entry,
.cat-catalog,
.online-panel {
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: 8px;
}

.status-strip > div {
    min-height: 76px;
    padding: 12px;
    display: grid;
    align-content: center;
    gap: 2px;
}

.status-label {
    color: var(--muted);
    font-size: 0.78rem;
    text-transform: uppercase;
}

.status-strip strong {
    font-size: 1.05rem;
    font-weight: 760;
}

.status-strip small {
    color: var(--muted);
}

.rig-panel {
    padding: 18px;
    background:
        linear-gradient(180deg, #32383b 0%, #202529 18%, #0d0f10 100%),
        var(--panel);
    border: 1px solid #4f585c;
    border-radius: 8px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 -22px 36px rgba(0, 0, 0, 0.5),
        var(--shadow);
}

.ft991-panel {
    position: relative;
}

.ft991-panel::before,
.ft991-panel::after {
    content: "";
    position: absolute;
    top: 17px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #c9d0d2, #4b5458 56%, #090a0b);
    border: 1px solid #050606;
}

.ft991-panel::before {
    left: 18px;
}

.ft991-panel::after {
    right: 18px;
}

.panel-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 34px;
    margin-bottom: 14px;
    padding: 0 30px;
}

.brand-block {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}

.brand-name {
    color: #f6f6f6;
    font-size: 1.7rem;
    font-weight: 840;
    letter-spacing: 0.02em;
}

.model-name {
    color: var(--cyan);
    font-size: 1.2rem;
    font-weight: 700;
}

.panel-subtitle {
    color: #c7d0d2;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
}

.front-leds {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.led-pill {
    min-width: 46px;
    padding: 4px 8px;
    color: #839091;
    background: #0b0d0e;
    border: 1px solid #30383b;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 760;
    text-align: center;
}

.rx-led {
    color: #a4ffbd;
    border-color: rgba(114, 242, 139, 0.5);
    box-shadow: inset 0 0 12px rgba(114, 242, 139, 0.18);
}

.tx-led {
    color: #ff9a94;
    border-color: rgba(255, 94, 87, 0.42);
}

.radio-face {
    display: grid;
    grid-template-columns: minmax(220px, 0.74fr) minmax(430px, 1.2fr) minmax(270px, 0.78fr);
    gap: 14px;
    align-items: center;
}

.ft991-left,
.right-control-stack,
.screen-bezel {
    min-width: 0;
}

.ft991-left {
    display: grid;
    gap: 10px;
    align-self: stretch;
}

.left-panel-head {
    display: grid;
    grid-template-columns: 82px 1fr;
    gap: 10px;
    min-height: 132px;
}

.power-key {
    min-height: 64px;
    align-self: start;
    color: #f2f6f6;
    background: linear-gradient(180deg, #3f474b, #1a1e20);
    border-color: #687478;
    font-size: 0.72rem;
    font-weight: 800;
}

.speaker-grille {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 7px;
    padding: 14px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent),
        #111416;
    border: 1px solid #30383b;
    border-radius: 7px;
    box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.54);
}

.speaker-grille span {
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, #030404 42%, #252c2f 44%, #070808 70%);
}

.hardware-keys,
.front-soft-controls,
.right-key-grid {
    display: grid;
    gap: 7px;
}

.hardware-keys {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hardware-keys button,
.right-key-grid button,
.front-soft-controls button,
.round-key {
    color: #dce5e5;
    background: linear-gradient(180deg, #333b3f, #161a1c);
    border-color: #586469;
    text-shadow: 0 1px 0 #000;
}

.jack-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    color: #c3cccd;
    font-size: 0.7rem;
    text-align: center;
}

.jack-row span::before {
    content: "";
    display: block;
    width: 26px;
    height: 26px;
    margin: 0 auto 4px;
    border-radius: 50%;
    background: radial-gradient(circle, #050606 42%, #343d41 43%, #0b0d0e 72%);
    border: 1px solid #535f64;
}

.screen-bezel {
    padding: 14px;
    background:
        linear-gradient(180deg, #171b1d, #0a0c0d);
    border: 1px solid #535e62;
    border-radius: 8px;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.03),
        0 14px 26px rgba(0, 0, 0, 0.34);
}

.meter-window,
.main-display {
    background:
        linear-gradient(180deg, rgba(20, 54, 66, 0.8), rgba(4, 14, 18, 0.96) 48%, #020608),
        #031014;
    border: 1px solid #0e5b6a;
    border-radius: 6px;
    box-shadow:
        inset 0 0 36px rgba(66, 240, 233, 0.16),
        inset 0 0 2px rgba(255, 255, 255, 0.38);
}

.meter-scale {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin: 0 0 4px;
    color: #d5fffb;
    font-size: 0.62rem;
}

.s-meter {
    height: 10px;
    overflow: hidden;
    background: #020607;
    border: 1px solid rgba(66, 240, 233, 0.45);
    border-radius: 2px;
}

.s-meter .bar {
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--green), var(--amber), var(--red));
    transition: width 180ms ease;
}

.main-display {
    min-height: 332px;
    padding: 14px;
    display: grid;
    grid-template-rows: auto auto auto auto 1fr auto;
    gap: 9px;
}

.display-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: #d5fffb;
    font-size: 0.76rem;
}

.screen-mainline {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}

.freq-display {
    overflow-wrap: anywhere;
    color: var(--cyan);
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    font-size: clamp(2rem, 5.8vw, 4.6rem);
    font-weight: 760;
    line-height: 1;
    text-align: right;
    text-shadow: 0 0 16px rgba(66, 240, 233, 0.42);
}

.vfo-tag {
    padding: 4px 7px;
    color: #061011;
    background: var(--cyan);
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 820;
}

.tft-meter {
    padding: 8px;
    background: rgba(2, 7, 9, 0.72);
    border-color: rgba(66, 240, 233, 0.28);
}

.scope-window {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    align-items: end;
    gap: 4px;
    min-height: 84px;
    padding: 8px;
    background:
        repeating-linear-gradient(0deg, rgba(66, 240, 233, 0.12), rgba(66, 240, 233, 0.12) 1px, transparent 1px, transparent 18px),
        repeating-linear-gradient(90deg, rgba(66, 240, 233, 0.1), rgba(66, 240, 233, 0.1) 1px, transparent 1px, transparent 34px),
        linear-gradient(180deg, rgba(15, 56, 72, 0.38), rgba(5, 12, 15, 0.7));
    border: 1px solid rgba(66, 240, 233, 0.22);
    border-radius: 4px;
}

.scope-window span {
    height: var(--h);
    min-height: 6px;
    background: linear-gradient(180deg, #fff38a, #42f0e9 55%, #125e71);
    border-radius: 999px 999px 0 0;
    opacity: 0.86;
}

.softkey-row {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 5px;
}

.softkey-row span {
    min-width: 0;
    padding: 4px 3px;
    color: #d8fffb;
    background: rgba(6, 18, 22, 0.8);
    border: 1px solid rgba(66, 240, 233, 0.24);
    border-radius: 3px;
    font-size: 0.6rem;
    text-align: center;
}

.right-control-stack {
    display: grid;
    gap: 11px;
}

.small-dial-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.mini-knob {
    display: grid;
    justify-items: center;
    gap: 5px;
    color: #cbd5d5;
    font-size: 0.66rem;
    text-align: center;
}

.mini-knob span {
    width: 54px;
    max-width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        radial-gradient(circle at 34% 28%, #b8c1c4, #697377 30%, #242a2d 68%, #0a0b0c 100%);
    border: 3px solid #08090a;
    box-shadow: inset -5px -7px 10px rgba(0, 0, 0, 0.54);
}

.right-key-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.knob-cluster {
    display: grid;
    grid-template-columns: 46px minmax(138px, 1fr) 46px;
    align-items: center;
    justify-items: center;
    gap: 8px;
}

.vfo-knob {
    width: min(100%, 220px);
    aspect-ratio: 1;
    position: relative;
    display: grid;
    place-items: end center;
    padding-bottom: 24px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 28%, #c5ccce, #788287 22%, #2c3336 58%, #070808 100%);
    border: 5px solid #090a0b;
    box-shadow:
        inset -15px -18px 28px rgba(0, 0, 0, 0.6),
        inset 8px 8px 18px rgba(255, 255, 255, 0.1),
        0 14px 26px rgba(0, 0, 0, 0.48);
}

.vfo-knob span {
    position: absolute;
    top: 18px;
    left: 50%;
    width: 5px;
    height: 34px;
    transform: translateX(-50%);
    background: #d7ecea;
    border-radius: 2px;
}

.vfo-knob strong {
    position: relative;
    z-index: 1;
    color: #aab6b7;
    font-size: 0.66rem;
    letter-spacing: 0.04em;
}

.round-key {
    width: 44px;
    min-height: 44px;
    padding: 0;
    border-radius: 50%;
}

.front-soft-controls {
    grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
    margin-top: 14px;
}

.ft991-panel {
    overflow: hidden;
    padding: 16px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 8%),
        linear-gradient(90deg, #252a2c 0%, #151819 12%, #08090a 48%, #111416 72%, #242a2d 100%);
    border-color: #535b5f;
}

.ft991-panel::before,
.ft991-panel::after {
    top: 13px;
    width: 14px;
    height: 14px;
}

.panel-top {
    min-height: 30px;
    margin-bottom: 10px;
    padding: 0 24px 0 142px;
}

.brand-name {
    padding: 1px 18px 2px;
    color: #f5ead2;
    background: linear-gradient(180deg, #272b2d, #060707);
    border: 1px solid #596063;
    border-radius: 5px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.14rem;
    line-height: 1.05;
}

.model-name {
    color: #f5ead2;
    font-size: 1.15rem;
    font-weight: 820;
}

.panel-subtitle {
    color: #f0e4c9;
    font-weight: 760;
}

.front-leds {
    gap: 12px;
}

.led-pill {
    min-width: 48px;
    padding: 2px 7px;
    border-radius: 3px;
}

.rx-led,
.tx-led {
    color: #839091;
    border-color: #30383b;
    box-shadow: none;
}

.rx-led.is-active {
    color: #a4ffbd;
    border-color: rgba(114, 242, 139, 0.5);
    box-shadow: inset 0 0 12px rgba(114, 242, 139, 0.18);
}

.tx-led.is-active {
    color: #ff9a94;
    border-color: rgba(255, 94, 87, 0.42);
    box-shadow: inset 0 0 12px rgba(255, 94, 87, 0.2);
}

.led-pill.is-active:not(.rx-led):not(.tx-led) {
    color: #d9ffe2;
    border-color: rgba(114, 242, 139, 0.42);
    box-shadow: inset 0 0 12px rgba(114, 242, 139, 0.14);
}

.ft991-face {
    grid-template-columns: 96px minmax(360px, 1.12fr) 88px minmax(370px, 1.05fr) 104px;
    gap: 8px;
    align-items: stretch;
    min-height: 414px;
}

.ft991-left,
.display-bay,
.screen-side-keys,
.main-control-panel,
.right-knob-column {
    min-width: 0;
}

.ft991-left {
    display: grid;
    grid-template-rows: 76px repeat(3, minmax(76px, 1fr));
    gap: 10px;
    padding: 8px 8px 10px;
    background:
        linear-gradient(90deg, #343b3f, #111416 38%, #22282b 100%);
    border: 1px solid #545f64;
    border-radius: 7px;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.05),
        inset -10px 0 18px rgba(0, 0, 0, 0.5);
}

.front-power,
.front-jack {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 5px;
    color: #d7dddc;
    text-align: center;
}

.front-power span,
.front-jack strong {
    color: #d8e0df;
    font-size: 0.68rem;
    font-weight: 820;
    letter-spacing: 0;
    text-shadow: 0 1px 1px #000;
}

.power-key {
    width: 64px;
    min-height: 48px;
    padding: 0;
    color: #ff9f91;
    background:
        radial-gradient(circle at 50% 28%, rgba(255, 255, 255, 0.22), transparent 24%),
        linear-gradient(180deg, #353d41, #090a0b);
    border: 3px solid #050606;
    border-radius: 11px;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.12),
        0 2px 3px rgba(0, 0, 0, 0.7);
    font-size: 0.68rem;
    font-weight: 850;
}

.jack-socket {
    width: 66px;
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 50%, #020303 0 26%, #2f383c 27% 38%, #050606 39% 56%, #394246 57% 72%, #08090a 73%);
    border: 4px solid #08090a;
    box-shadow:
        inset 5px 5px 8px rgba(255, 255, 255, 0.08),
        inset -8px -8px 14px rgba(0, 0, 0, 0.75),
        0 1px 2px rgba(255, 255, 255, 0.15);
}

.mic-socket {
    width: 70px;
    height: 68px;
    border-radius: 11px;
    background:
        linear-gradient(90deg, transparent 48%, rgba(255, 255, 255, 0.08) 48% 52%, transparent 52%),
        repeating-linear-gradient(90deg, #070808 0 4px, #171b1d 4px 7px),
        #08090a;
    border: 5px solid #343c40;
    box-shadow:
        inset 0 0 18px rgba(0, 0, 0, 0.85),
        0 2px 3px rgba(0, 0, 0, 0.7);
}

.display-bay {
    display: grid;
    grid-template-rows: 30px 1fr;
    gap: 5px;
    padding: 4px 0 0;
}

.display-brand-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
    padding: 0 14px 0 18px;
}

.brand-badge {
    padding: 0 24px 2px;
    color: #f3e8cd;
    background: linear-gradient(180deg, #2a3033, #08090a);
    border: 1px solid #5a6265;
    border-radius: 5px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.12rem;
    font-weight: 840;
    line-height: 1.1;
}

#cat-status {
    color: #a8b2b4;
    font-size: 0.7rem;
    font-weight: 760;
}

.screen-bezel {
    padding: 12px;
    background:
        linear-gradient(145deg, #3b4347 0%, #111416 22%, #08090a 70%, #252b2e 100%);
    border: 1px solid #667176;
    border-radius: 9px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 -12px 24px rgba(0, 0, 0, 0.62),
        0 8px 15px rgba(0, 0, 0, 0.45);
}

.main-display {
    min-height: 332px;
    padding: 7px;
    grid-template-rows: 20px 22px auto 36px 54px 1fr 40px;
    gap: 4px;
    background:
        linear-gradient(180deg, #15122e 0 13%, #071cca 14% 28%, #03060b 29% 100%);
    border: 2px solid #050606;
    border-radius: 5px;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.16),
        inset 0 0 24px rgba(68, 96, 255, 0.28);
}

.display-row {
    align-items: center;
    color: #f4f8ff;
    font-size: 0.8rem;
    font-weight: 820;
    line-height: 1;
}

.screen-mode-row {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #f4f8ff;
    font-size: 0.82rem;
    font-weight: 820;
}

.screen-mode-row span {
    display: inline-grid;
    min-width: 44px;
    min-height: 20px;
    place-items: center;
    padding: 1px 7px;
    color: #101216;
    background: #f4f8ff;
    border-radius: 3px;
    line-height: 1;
}

.screen-mode-row #ptt-state {
    color: #d9ffe4;
    background: #0a2b13;
    border: 1px solid rgba(114, 242, 139, 0.45);
}

.screen-mainline {
    grid-template-columns: 1fr;
    position: relative;
    padding: 17px 8px 0 0;
}

.freq-display {
    color: #ffffff;
    font-size: 4rem;
    font-weight: 860;
    line-height: 0.92;
    text-align: right;
    white-space: nowrap;
    text-shadow:
        0 0 9px rgba(255, 255, 255, 0.3),
        0 2px 0 rgba(0, 0, 0, 0.55);
}

.vfo-tag {
    position: absolute;
    top: 0;
    left: 0;
    padding: 1px 5px;
    color: #ffffff;
    background: transparent;
    border: 1px solid #ffffff;
    border-radius: 3px;
    font-size: 0.72rem;
}

.screen-subline {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 8px;
    padding: 0 8px;
    color: #ffffff;
    background: #030406;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.screen-subline span {
    color: #f3f8ff;
    font-size: 1rem;
    font-weight: 860;
}

.screen-subline strong {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    font-size: 2rem;
    font-weight: 780;
    line-height: 1;
    text-align: right;
}

.tft-meter {
    padding: 5px 8px;
    background: #030406;
    border-color: rgba(255, 255, 255, 0.42);
    border-radius: 2px;
}

.meter-scale {
    grid-template-columns: repeat(9, 1fr);
    color: #f8fbff;
    font-size: 0.68rem;
    font-weight: 760;
}

.s-meter {
    height: 9px;
    background:
        linear-gradient(90deg, transparent 0 72%, rgba(255, 38, 38, 0.95) 72% 100%),
        #080a0d;
    border-color: rgba(255, 255, 255, 0.48);
}

.scope-window {
    grid-template-columns: repeat(15, 1fr);
    gap: 2px;
    min-height: 94px;
    padding: 7px 8px;
    background:
        linear-gradient(180deg, transparent 0 52%, rgba(9, 80, 255, 0.52) 53% 100%),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.22) 1px, transparent 1px, transparent 22px),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2) 1px, transparent 1px, transparent 42px),
        #020305;
    border-color: rgba(255, 255, 255, 0.58);
    border-radius: 2px;
}

.scope-window span {
    min-height: 8px;
    background: linear-gradient(180deg, #ffffff 0 18%, #6fb2ff 28%, #133cff 100%);
    border-radius: 80% 80% 0 0;
    opacity: 0.95;
    filter: drop-shadow(0 0 3px rgba(67, 111, 255, 0.8));
}

.softkey-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.softkey-row span {
    padding: 3px;
    color: #ffffff;
    background: linear-gradient(180deg, #44494e, #08090a);
    border-color: #777f84;
    border-radius: 2px;
    font-size: 0.74rem;
    font-weight: 840;
}

.softkey-row strong {
    display: block;
    margin-top: 1px;
    color: #b7b3ff;
    font-size: 0.66rem;
    line-height: 1;
}

.screen-side-keys {
    display: grid;
    grid-template-rows: repeat(5, minmax(48px, 1fr)) 88px;
    gap: 8px;
    align-self: end;
    padding: 36px 0 5px;
}

.screen-side-keys button,
.top-key-row button,
.left-control-bank button,
.right-control-bank button,
.front-soft-controls button,
.round-key {
    min-height: 46px;
    color: #f0f5f5;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 26%),
        linear-gradient(180deg, #444d52, #15191b 72%, #070808);
    border-color: #69757a;
    border-radius: 7px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.13),
        0 2px 3px rgba(0, 0, 0, 0.6);
    font-size: 0.78rem;
    font-weight: 850;
    line-height: 1.05;
    text-shadow: 0 1px 1px #000;
}

.screen-side-keys button small {
    color: #111416;
    padding: 1px 4px;
    background: #f1f4f4;
    border-radius: 2px;
    font-size: 0.62rem;
}

.multi-knob {
    align-self: end;
}

.main-control-panel {
    display: grid;
    grid-template-rows: 40px 48px 1fr;
    gap: 7px;
    padding: 8px 9px 11px;
    background:
        linear-gradient(180deg, #121516, #060707 54%, #121516 100%);
    border: 1px solid #434c50;
    border-radius: 8px;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.05),
        inset 0 -18px 28px rgba(0, 0, 0, 0.55);
}

.top-led-rail {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    color: #8b9496;
    background: linear-gradient(180deg, #050606, #141819);
    border: 1px solid #252c2f;
    border-radius: 5px;
    font-size: 0.72rem;
    font-weight: 840;
    text-align: center;
}

.top-led-rail span::before {
    content: "";
    display: block;
    width: 48px;
    max-width: 100%;
    height: 4px;
    margin: 0 auto 4px;
    background: #3b4144;
    border-radius: 99px;
}

.top-led-rail .active {
    color: #d9ffe2;
}

.top-led-rail .active::before {
    background: #48e76c;
    box-shadow: 0 0 8px rgba(72, 231, 108, 0.7);
}

.top-led-rail .red-dot::before {
    background: #3b4144;
    box-shadow: none;
}

.top-led-rail .red-dot.is-active {
    color: #ffd4d2;
}

.top-led-rail .red-dot.is-active::before {
    background: #f0443e;
    box-shadow: 0 0 8px rgba(240, 68, 62, 0.55);
}

.top-key-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
}

.dial-field {
    display: grid;
    grid-template-columns: 86px minmax(210px, 1fr) 86px;
    align-items: center;
    gap: 8px;
}

.left-control-bank,
.right-control-bank {
    display: grid;
    gap: 8px;
}

.left-control-bank button,
.right-control-bank button {
    min-height: 48px;
    padding-inline: 6px;
}

.knob-cluster {
    grid-template-columns: 38px minmax(190px, 260px) 38px;
    gap: 6px;
}

.vfo-knob {
    width: min(100%, 254px);
    padding-bottom: 34px;
    background:
        radial-gradient(circle at 45% 38%, rgba(255, 255, 255, 0.42), transparent 0 7%, rgba(255, 255, 255, 0.15) 8% 22%, transparent 23%),
        conic-gradient(from 210deg, #090a0b, #5b6468, #111315, #828a8d, #171a1c, #090a0b),
        radial-gradient(circle at 38% 28%, #c2c9cb, #6f7a7e 22%, #262d30 57%, #070808 100%);
    border: 9px solid #070808;
    box-shadow:
        0 0 0 5px #202629,
        0 0 0 8px #070808,
        inset -19px -22px 32px rgba(0, 0, 0, 0.68),
        inset 10px 11px 22px rgba(255, 255, 255, 0.13),
        0 16px 26px rgba(0, 0, 0, 0.62);
}

.vfo-knob::before {
    content: "";
    position: absolute;
    inset: -22px;
    border-radius: 50%;
    background:
        repeating-conic-gradient(from 0deg, #aeb8ba 0 1deg, transparent 1deg 5deg);
    opacity: 0.45;
    -webkit-mask: radial-gradient(circle, transparent 0 78%, #000 79% 84%, transparent 85%);
    mask: radial-gradient(circle, transparent 0 78%, #000 79% 84%, transparent 85%);
}

.vfo-knob span {
    top: 16px;
    width: 4px;
    height: 38px;
    background: #e3eeed;
}

.vfo-knob strong {
    color: #eef4f3;
    font-size: 0.62rem;
    text-shadow: 0 1px 2px #000;
}

.round-key {
    width: 38px;
    min-height: 38px;
    font-size: 0.68rem;
}

.right-knob-column {
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    gap: 12px;
    align-items: center;
    padding: 8px 0;
}

.mini-knob {
    align-content: center;
    min-width: 0;
    color: #d6dfdf;
    font-size: 0.68rem;
    font-weight: 800;
}

.mini-knob span {
    width: 72px;
    background:
        conic-gradient(from 225deg, #060707, #707a7e, #0f1112, #929a9d, #161a1c, #060707),
        radial-gradient(circle at 35% 28%, #c5ccce, #6f797d 28%, #252b2e 66%, #070808 100%);
    border: 6px solid #070808;
    box-shadow:
        0 0 0 3px #2b3336,
        inset -7px -9px 13px rgba(0, 0, 0, 0.62),
        inset 5px 5px 9px rgba(255, 255, 255, 0.1);
}

.mini-knob small {
    max-width: 100%;
    color: #d7dfdf;
    line-height: 1.12;
    text-shadow: 0 1px 1px #000;
}

.front-soft-controls {
    grid-template-columns: repeat(auto-fit, minmax(78px, 1fr));
    gap: 6px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.front-soft-controls button {
    min-height: 38px;
    border-radius: 5px;
    font-size: 0.72rem;
}

.radio-controls {
    display: grid;
    grid-template-columns: 116px 1fr minmax(260px, 0.9fr);
    gap: 12px;
    align-items: stretch;
    margin-top: 14px;
}

.ptt-btn {
    min-height: 74px;
    color: #fff;
    background: linear-gradient(180deg, #e54840, #8b1b16);
    border-color: #ff7770;
    font-size: 1.15rem;
    font-weight: 840;
}

.band-bank,
.mode-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(74px, 1fr));
    gap: 8px;
}

.band-bank form,
.frequency-form,
.mode-grid {
    min-width: 0;
}

.band-bank button,
.mode-grid button {
    width: 100%;
}

.frequency-form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: end;
}

.operator-desk,
.settings-grid,
.cat-console {
    display: grid;
    gap: 14px;
}

.operator-desk {
    grid-template-columns: 1.05fr 1.45fr 0.9fr 0.9fr;
}

.desk-block,
.setting-card,
.cat-entry,
.cat-catalog,
.online-panel {
    padding: 14px;
}

.operator-actions,
.audio-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.inline-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
}

.inline-check input {
    width: auto;
    min-height: auto;
}

.mode-grid {
    grid-template-columns: repeat(auto-fit, minmax(78px, 1fr));
}

.memory-form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: end;
}

.settings-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.setting-card {
    display: grid;
    gap: 10px;
}

.cat-console {
    grid-template-columns: minmax(300px, 0.85fr) minmax(520px, 1.6fr);
}

.cat-entry form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: end;
}

#cat-log {
    min-height: 220px;
    max-height: 360px;
    margin: 12px 0 0;
    padding: 12px;
    overflow: auto;
    color: #d9fffc;
    background: #070909;
    border: 1px solid #223134;
    border-radius: 6px;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    font-size: 0.86rem;
    white-space: pre-wrap;
}

.cat-table-wrap {
    max-height: 520px;
    overflow: auto;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
}

.cat-table {
    min-width: 900px;
}

.cat-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
}

.cat-table td:nth-child(1),
.cat-table td:nth-child(3),
.cat-table td:nth-child(4),
.cat-table td:nth-child(5),
.cat-table td:nth-child(6) {
    white-space: nowrap;
}

.cat-table .cat-param {
    min-width: 110px;
}

.cat-actions {
    display: flex;
    gap: 6px;
}

.online-panel p {
    margin: 0;
}

form:not(.js-command-form):not(.js-action-form):not(#raw-cat-form):not(#rig-select-form):not(.memory-form):not(.frequency-form):not(.mode-grid) {
    display: grid;
    gap: 12px;
}

.user-info,
.online-users {
    color: var(--muted);
}

@media (max-width: 1180px) {
    .status-strip,
    .operator-desk,
    .settings-grid,
    .cat-console {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .radio-face {
        grid-template-columns: 1fr;
    }

    .knob-cluster {
        grid-template-columns: 76px minmax(180px, 240px) 76px;
        justify-content: center;
    }

    .radio-controls {
        grid-template-columns: 100px 1fr;
    }

    .frequency-form {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    .container,
    .station-shell {
        width: calc(100% - 14px);
        margin: 7px auto;
        padding: 10px;
    }

    header,
    .status-strip,
    .operator-desk,
    .settings-grid,
    .cat-console,
    .radio-controls,
    .frequency-form,
    .memory-form,
    .cat-entry form {
        grid-template-columns: 1fr;
    }

    header {
        align-items: flex-start;
    }

    .status-strip {
        gap: 8px;
    }

    .rig-panel {
        padding: 10px;
    }

    .panel-top,
    header {
        flex-direction: column;
    }

    .brand-block {
        width: 100%;
        justify-content: space-between;
    }

    .freq-display {
        text-align: left;
    }

    .knob-cluster {
        grid-template-columns: 58px minmax(140px, 190px) 58px;
    }

    .cat-table-wrap {
        max-height: 420px;
    }
}