/* Only demo identifiers; the layout and controls use the real app styles. */
.dcc-byline { color: #9bbbc8; font: 11px/1.3 monospace; white-space: nowrap; letter-spacing: 0; text-transform: none; }
.dcc-digital-mode-summary { font: 10px/1.4 monospace; color: #a6c7d6; padding: 3px 10px; border-top: 1px solid #203942; }
.dcc-beacon-mode .tx-sequence, .dcc-beacon-mode .sequence-options { opacity: .45; pointer-events: none; }
.dcc-live-decode-row:has(span:last-child) { min-height: 17px; }
.dcc-alc-control { display: grid; grid-template-columns: auto minmax(80px, 1fr) 40px; align-items: center; gap: 7px 10px; margin: 8px 12px; font: 11px monospace; color: #cce5ed; }
.dcc-alc-control input { width: 100%; accent-color: #75d845; cursor: pointer; }
.dcc-alc-control output { text-align: right; font-variant-numeric: tabular-nums; }
.dcc-alc-control small { grid-column: 1 / -1; color: #99b6c2; font-size: 10px; }
.radio-header.dcc-has-mode-controls { grid-template-columns: 100px 100px 115px minmax(175px, 1fr) 65px !important; gap: 8px !important; }
.dcc-has-mode-controls .mode-pill { display: none !important; }
.dcc-has-mode-controls .band-control { width: 100px !important; min-width: 0 !important; }
.dcc-has-mode-controls .dcc-live-band-select { width: 100% !important; min-width: 0 !important; max-width: 100% !important; }
.dcc-mode-control { display: flex; flex-direction: column; min-width: 0; gap: 4px; }
.dcc-mode-control small { font: 9px monospace; color: #9bbbc8; }
.dcc-mode-control select { width: 100%; min-height: 36px; padding: 4px; background: #07171e; color: #d2e8ef; border: 1px solid #426371; border-radius: 5px; font: 12px monospace; }
.dcc-has-mode-controls .dial { min-width: 0 !important; font-size: 29px; }
.dcc-has-mode-controls .dial span { font-size: 17px; }
.dcc-has-mode-controls .tx-dial { display: none; }
@media (max-width: 760px) {
  .radio-header.dcc-has-mode-controls { grid-template-columns: 1fr 1fr 1.2fr !important; }
  .dcc-has-mode-controls .dial { grid-column: 1 / -1; justify-self: start !important; }
}
.dcc-demo-actions { display: inline-flex; align-items: center; gap: 10px; margin-left: 12px; white-space: nowrap; }
.dcc-demo-actions a { color: #8be7fa; text-decoration: underline; }
.dcc-demo-actions button { color: #8be7fa; cursor: pointer; }
.brand em { border-color: #55b82c; color: #8bdd52; }
.mode-pill { display: inline-flex !important; }
.demo-paused .signals i { animation-play-state: paused !important; }
.waterfall.dcc-live-audio { height: 190px !important; min-height: 190px !important; }
.waterfall.dcc-live-audio .dcc-live-audio-state { bottom: 29%; font-size: 9px; }
.waterfall.dcc-live-audio .waterfall-grid { bottom: 27%; }
.dcc-demo-actions { flex-wrap: wrap; }
.dcc-demo-volume { display: inline-flex; align-items: center; gap: 4px; color: #a7c5cc; }
.dcc-demo-volume input { width: 70px; accent-color: #77df48; }
#demo-sound[aria-pressed="true"] { color: #94ef59; }
.dcc-demo-map-navigation { position: absolute; right: 8px; top: 38px; z-index: 25; display: flex; gap: 4px; }
.dcc-demo-map-navigation button { background: #07171e; border: 1px solid #426371; color: #ccefff; padding: 2px 9px; font-size: 17px; cursor: pointer; }
.dcc-live-signal-map { touch-action: none; cursor: grab; }
.dcc-live-signal-map:active { cursor: grabbing; }
.dcc-demo-selected { outline: 1px solid #ffdb44 !important; background-color: #324127 !important; }
#dcc-demo-details { padding: 8px 12px; border-top: 1px solid #527443; background: #142820; color: #c8efc3; font: 11px monospace; }
#dcc-demo-details button { margin-top: 5px; color: #ffdb44; cursor: pointer; }
#dcc-demo-station-status { padding: 4px 16px; color: #a9e6a0; background: #10261c; font: 11px monospace; min-height: 22px; }
.demo-transmitting .radio-chip { border-color: #ee9850; color: #ffbe82; }
.demo-transmitting .receive-status { color: #ffbe82; }
.demo-transmitting .monitor { background: #49341c !important; color: #ffcf92 !important; }
.main-controls button:not(.monitor):not(.tx-button):not(.tune-live) { background: #10232b; color: #d2e8ef; border-color: #466778; }
#dcc-demo-log { width: min(720px, 92vw); max-height: 80vh; overflow: auto; background: #0e1c23; color: #d4e7ec; border: 1px solid #507383; border-radius: 10px; padding: 24px; }
#dcc-demo-log::backdrop { background: #000a; }
#dcc-demo-log h2 { margin: 0 0 12px; font-size: 20px; }
#dcc-demo-log p { margin: 10px 0; }
#dcc-demo-log button { padding: 8px 14px; margin-top: 16px; border: 1px solid #78a5b6; border-radius: 5px; cursor: pointer; }
.dcc-demo-log-entries { font: 12px monospace; padding: 12px 0; }
.dcc-qso-row { background: #3c171b !important; border-left: 3px solid #ef5d68 !important; }
.dcc-qso-row span:last-child, .dcc-qso-row strong { color: #ffbcc1 !important; }
.dcc-cq-row { background: #153622 !important; border-left: 3px solid #70dd6a !important; }
.dcc-demo-selected { outline: 1px solid #ffdb44 !important; }
.dcc-decode-period { border-top: 1px solid #45616e; padding: 5px 4px; color: #a6c7d6; background: #102129; font: 10px monospace; text-align: center; }
.dcc-demo-preferences { margin-top: 18px; padding: 16px; border: 1px solid #426371; border-radius: 6px; color: #d2e8ef; }
.dcc-demo-preferences h3 { margin-bottom: 12px; }
.dcc-demo-preferences label { display: flex; align-items: center; gap: 10px; margin: 12px 0; color: #d2e8ef; }
.dcc-demo-preferences select { padding: 6px; background: #10232b; color: #d2e8ef; }
.dcc-demo-preferences p { color: #a6c7d6; font-size: 12px; }
.dcc-radio-status-box { width: max-content; max-width: 230px; justify-self: end; min-width: 175px; padding: 6px 9px; border: 2px solid #65ba72; border-radius: 7px; background: #12331e; color: #d1f6d5; display: flex; flex-direction: column; gap: 2px; font: 11px monospace; }
.dcc-radio-status-box small { font-size: 9px; letter-spacing: .08em; }
.dcc-radio-status-box strong { font-size: 11px; }
.dcc-radio-status-box[data-state="tx"] { background: #751e26; border-color: #ff6571; color: #fff; }
.dcc-radio-status-box[data-state="idle"] { background: #273139; border-color: #7e8a92; color: #d9e0e5; }
.dcc-radio-countdown { font-variant-numeric: tabular-nums; }
.dcc-demo-save-status { color: #a9e6a0; font-size: 11px; white-space: nowrap; }
.automation-bar:has(.dcc-radio-status-box) { min-height: 86px; height: auto; }
@media (max-width: 900px) { .dcc-radio-status-box { justify-self: start; min-width: 0; } }
.dcc-frequency-controls { display: flex; align-items: center; gap: 12px; padding: 5px 10px; flex-wrap: wrap; font: 11px monospace; background: #0e2028; }
.dcc-frequency-controls label { display: flex; align-items: center; gap: 5px; }
.dcc-frequency-controls .rx { color: #80ee83; }
.dcc-frequency-controls .tx { color: #ff8a93; }
.dcc-frequency-controls input { width: 65px; color: inherit; background: #07141c; border: 1px solid #426371; padding: 3px; }
.dcc-frequency-controls small { color: #a1bcc8; font-size: 10px; }
.waterfall { touch-action: none; }
.dcc-frequency-marker { position: absolute; top: 0; bottom: 0; z-index: 8; width: 16px; transform: translateX(-50%); background: transparent; border: 0; padding: 0; cursor: ew-resize; }
.dcc-frequency-marker::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; border-left: 2px solid currentColor; }
.dcc-frequency-marker.rx { color: #6af46e; }
.dcc-frequency-marker.tx { color: #ff5464; }
.dcc-frequency-marker span { position: absolute; top: 18px; right: 9px; white-space: nowrap; padding: 3px 5px; background: #06130fee; border: 1px solid currentColor; font: bold 10px monospace; }
.dcc-frequency-marker.tx span { top: 38px; left: 9px; right: auto; }
.dcc-frequency-marker:focus-visible { outline: 2px dashed white; }
.waterfall .frequency-scale { pointer-events: none; }
.dcc-waterfall-collapse { margin-left: auto; flex: 0 0 28px; height: 26px; border: 1px solid #426371; border-radius: 4px; background: #10232b; color: #d2e8ef; font: bold 20px/1 monospace; cursor: pointer; }
.dcc-waterfall-collapse:hover { background: #23404d; }
.dcc-waterfall-collapse:focus-visible { outline: 2px solid #ffdb44; outline-offset: 2px; }
.dcc-map-collapse { margin-left: 6px; }
.dcc-map-collapsed .map-tabs [role="tabpanel"] { display: none !important; }
.dcc-map-collapsed .dcc-live-roster-panel .roster-table { height: calc(112px + var(--dcc-map-space, 145px)); min-height: calc(112px + var(--dcc-map-space, 145px)); max-height: calc(112px + var(--dcc-map-space, 145px)); }
.dcc-waterfall-collapsed .waterfall,
.dcc-waterfall-collapsed .waterfall-tools { display: none !important; }
.dcc-waterfall-collapsed .dcc-live-decode-panel .decode-body { height: calc(112px + var(--dcc-waterfall-space, 232px)); min-height: calc(112px + var(--dcc-waterfall-space, 232px)); max-height: calc(112px + var(--dcc-waterfall-space, 232px)); }
@media (max-width: 760px) {
  .dcc-frequency-controls small { order: 2; flex-basis: 100%; }
  .dcc-waterfall-collapsed .dcc-live-decode-panel .decode-body { height: calc(112px + var(--dcc-waterfall-space, 232px) / 2); min-height: calc(112px + var(--dcc-waterfall-space, 232px) / 2); max-height: calc(112px + var(--dcc-waterfall-space, 232px) / 2); }
}