body.ft8-page { margin: 0 !important; padding-top: 132px !important; overflow-x: hidden; color: #f5f5f5; background: linear-gradient(rgba(4, 7, 9, 0.72), rgba(4, 7, 9, 0.92)), url('/images/dxcluster.webp') center / cover fixed !important; }
body.ft8-page .live-tool-page, body.ft8-page main, body.ft8-page .container { max-width: none !important; }
body.ft8-page .live-tool-shell.ft8-shell, body.ft8-page .ft8-shell { display: block !important; width: 100vw !important; max-width: none !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; padding: 0 0 22px !important; box-sizing: border-box; }
body.ft8-page .ft8-shell > section { width: 100% !important; max-width: none !important; box-sizing: border-box; }
.ft8-workbench { display: grid; grid-template-columns: clamp(300px, 22vw, 380px) minmax(0, 1fr) clamp(300px, 22vw, 380px); gap: 12px; width: 100vw; max-width: none; min-width: 0; min-height: calc(100vh - 132px); padding: 10px 12px 18px; box-sizing: border-box; align-items: start; justify-content: stretch; overflow: visible; }
.ft8-workbench > .ft8-panel, .ft8-workbench > .ft8-center-stack { grid-row: 1; align-self: start !important; margin-top: 0 !important; transform: none !important; }
.ft8-panel, .ft8-terminal-panel, .ft8-qso-control-panel { width: 100%; min-width: 0; align-self: start; border: 1px solid rgba(255, 208, 0, 0.22); background: linear-gradient(180deg, rgba(7, 10, 8, 0.9), rgba(0, 0, 0, 0.76)); box-shadow: 0 20px 54px rgba(0, 0, 0, 0.36), inset 0 1px rgba(255, 255, 255, 0.04); backdrop-filter: blur(7px); border-radius: 12px; box-sizing: border-box; }
.ft8-panel { display: flex; flex-direction: column; min-height: 0; height: auto; overflow: visible; padding: 14px; }
.ft8-panel-heading { margin: 0 0 14px; }
.ft8-panel-heading span, .ft8-controls span, .ft8-tx-grid span, .ft8-tx-message span, .ft8-qso-selected span { display: block; margin-bottom: 5px; color: rgba(255,255,255,0.72); font-size: 0.74rem; font-weight: 900; text-transform: uppercase; }
.ft8-panel-heading h2 { margin: 0; color: #ffd000; font-size: 1.08rem; letter-spacing: 0; }
.ft8-audio-monitor h3 { margin: 0 0 8px; color: #9cff00; font-size: 0.92rem; }
.ft8-audio-monitor canvas { display: block; width: 100%; height: auto; margin-bottom: 8px; border: 1px solid rgba(156,255,0,0.16); border-radius: 8px; background: #050807; }
.ft8-meter { position: relative; height: 10px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,0.12); }
.ft8-meter b { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #9cff00, #ffd000); transition: width 0.18s ease; }
.ft8-controls, .ft8-tx-grid { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 12px; }
.ft8-brand-card { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 10px; align-items: center; min-height: 88px; margin-bottom: 12px; padding: 8px; border: 1px solid rgba(156,255,0,0.22); border-radius: 10px; background: radial-gradient(circle at 28% 20%, rgba(156,255,0,0.18), transparent 42%), rgba(255,255,255,0.05); overflow: hidden; }
.ft8-brand-card img { width: 76px; height: 76px; object-fit: cover; border-radius: 8px; filter: drop-shadow(0 0 14px rgba(156,255,0,0.24)); }
.ft8-brand-card span { display: block; color: #9cff00; font-size: 0.74rem; font-weight: 900; text-transform: uppercase; }
.ft8-brand-card b { display: block; color: #ffd000; font-size: 1.28rem; line-height: 1.05; }
.ft8-panel--right .ft8-tx-message { margin-top: 9px; }
.ft8-panel--right .ft8-debug { margin-top: auto; }
.ft8-controls select, .ft8-controls input, .ft8-tx-grid input, .ft8-tx-grid select, .ft8-output-picker button, .ft8-tx-message textarea { width: 100%; box-sizing: border-box; border: 1px solid rgba(255,255,255,0.14); border-radius: 10px; background: #0b1117; color: #fff; padding: 0 10px; font-weight: 800; }
.ft8-controls select, .ft8-controls input, .ft8-tx-grid input, .ft8-tx-grid select, .ft8-output-picker button { height: 40px; }
.ft8-controls input[type="range"], .ft8-tx-grid input[type="range"] { height: 28px; accent-color: #9cff00; padding: 0; }
.ft8-tx-message textarea { min-height: 70px; padding: 10px; resize: vertical; font: 800 0.92rem ui-monospace, SFMono-Regular, Consolas, monospace; }
.ft8-qso-control-panel { border: 1px solid rgba(255,208,0,0.22); background: linear-gradient(180deg, rgba(7,10,8,0.92), rgba(0,0,0,0.78)); box-shadow: 0 16px 42px rgba(0,0,0,0.3), inset 0 1px rgba(255,255,255,0.04); backdrop-filter: blur(7px); border-radius: 12px; padding: 9px 10px; box-sizing: border-box; }
.ft8-qso-control-grid { display: grid; grid-template-columns: minmax(210px, 0.72fr) minmax(280px, 1fr) minmax(230px, 0.7fr); gap: 8px; align-items: stretch; }
.ft8-qso-control-panel .ft8-qso-panel, .ft8-qso-control-panel .ft8-tx-message { margin: 0; }
.ft8-qso-control-status { display: grid; gap: 8px; align-content: start; }
.ft8-qso-control-status p { margin: 0; min-height: 22px; color: rgba(255,255,255,0.78); font-weight: 900; }
.ft8-qso-control-status p b { color: #ffd000; margin-right: 6px; }
#ft8RxMirrorState, #ft8TxState { color: #9cff00; }
.ft8-side-globe-card { margin: 0 0 12px; border: 1px solid rgba(156,255,0,0.18); border-radius: 10px; background: rgba(2,8,5,0.74); overflow: hidden; }
.ft8-side-globe-card--heard { margin: 0 0 12px; }
.ft8-side-globe-head { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 8px 10px; border-bottom: 1px solid rgba(255,208,0,0.12); color: rgba(255,255,255,0.72); font-size: 0.74rem; font-weight: 900; text-transform: uppercase; }
.ft8-side-globe-head b { color: #ffd000; }
.ft8-side-globe { width: 100%; height: 188px; background: #041016; }
.ft8-side-globe-card p { margin: 0; padding: 7px 10px; color: rgba(255,255,255,0.68); font-size: 0.74rem; line-height: 1.25; font-weight: 800; }
.ft8-side-globe .maplibregl-ctrl-bottom-left, .ft8-side-globe .maplibregl-ctrl-bottom-right { display: none; }
.ft8-side-globe-head button { width: 28px; height: 26px; border: 1px solid rgba(255,208,0,0.28); border-radius: 7px; background: rgba(255,255,255,0.06); color: #ffd000; font-weight: 1000; cursor: pointer; }
.ft8-globe-modal { position: fixed; inset: 0; z-index: 5000; display: grid; place-items: center; padding: 24px; background: rgba(0,0,0,0.78); backdrop-filter: blur(8px); box-sizing: border-box; }
.ft8-globe-modal[hidden] { display: none; }
.ft8-globe-modal__panel { width: min(1180px, 96vw); height: min(780px, 88vh); display: grid; grid-template-rows: auto minmax(0, 1fr); border: 1px solid rgba(255,208,0,0.34); border-radius: 12px; overflow: hidden; background: #020705; box-shadow: 0 30px 90px rgba(0,0,0,0.62); }
.ft8-globe-modal__head { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 12px 14px; background: rgba(7,12,9,0.96); border-bottom: 1px solid rgba(156,255,0,0.2); }
.ft8-globe-modal__head b { color: #ffd000; font-size: 1rem; }
.ft8-globe-modal__head button { width: 36px; height: 34px; border: 1px solid rgba(255,208,0,0.34); border-radius: 8px; background: rgba(255,255,255,0.06); color: #ffd000; font-size: 1.3rem; font-weight: 1000; cursor: pointer; }
.ft8-globe-modal__map { min-width: 0; min-height: 0; background: #031017; }
.ft8-output-picker { display: grid; grid-template-columns: minmax(0, 1fr) 82px; gap: 8px; }
.ft8-output-picker button { color: #9cff00; background: rgba(156,255,0,0.1); cursor: pointer; font-weight: 900; }
.ft8-output-picker button:disabled { opacity: 0.46; cursor: not-allowed; }
.ft8-qso-panel { margin-top: 10px; padding: 8px; border: 1px solid rgba(255,208,0,0.2); border-radius: 10px; background: rgba(255,208,0,0.06); }
.ft8-qso-selected { display: flex; justify-content: space-between; gap: 10px; align-items: center; margin-bottom: 7px; }
.ft8-qso-selected b { color: #ffd000; font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ft8-qso-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.ft8-qso-steps button { min-width: 0; min-height: 34px; border: 1px solid rgba(156,255,0,0.24); border-radius: 8px; background: rgba(8,14,10,0.96); color: #ffd000; font-size: 0.78rem; font-weight: 1000; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ft8-qso-steps button.is-active { background: #ffd000; border-color: #ffd000; color: #102009; box-shadow: 0 0 14px rgba(255,208,0,0.28); }
.ft8-message-table tr.is-own-call td { background: rgba(255,28,28,0.22); color: #ff4d4d; font-weight: 1000; }
.ft8-message-table tr.is-own-call td:nth-child(5) { color: #ff3b3b; text-shadow: 0 0 10px rgba(255,0,0,0.55); }
.ft8-message-table tr.is-cq-message { cursor: pointer; }
.ft8-message-table tr.is-cq-message:hover td { background: rgba(156,255,0,0.12); }
.ft8-message-table tr.is-selected-cq td { outline: 1px solid rgba(255,208,0,0.8); outline-offset: -1px; }
.ft8-input-device-field.is-hidden { display: none; }
.ft8-band-hint, .ft8-websdr-hint, .ft8-engine-credit { margin: 0; color: rgba(255,255,255,0.7); font-size: 0.82rem; line-height: 1.35; font-weight: 700; }
.ft8-check-field { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,0.72); font-weight: 800; min-height: 40px; padding: 0 10px; border: 1px solid rgba(156,255,0,0.18); border-radius: 10px; background: rgba(156,255,0,0.06); }
.ft8-check-field input { width: 18px; height: 18px; accent-color: #9cff00; }
.ft8-button-row .is-hidden { display: none !important; }
.ft8-button-row, .ft8-terminal-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ft8-controls button, .ft8-button-row button, .ft8-terminal-actions button { min-height: 40px; border: 1px solid rgba(255,208,0,0.28); border-radius: 10px; background: rgba(255,255,255,0.06); color: #ffd000; font-weight: 900; cursor: pointer; }
.ft8-primary, #ft8StartRx, #ft8OpenWebsdr, #ft8SaveSession { background: #9cff00 !important; border-color: #9cff00 !important; color: #102009 !important; }
button:disabled { cursor: not-allowed; opacity: 0.48; }
.ft8-center-stack { display: grid; grid-template-rows: minmax(624px, 1fr) auto; gap: 12px; min-width: 0; min-height: calc(100vh - 154px); }
.ft8-terminal-panel { display: flex; flex-direction: column; min-height: 624px; height: auto; overflow: hidden; padding: 14px; margin: 0 !important; background: radial-gradient(circle at 50% 10%, rgba(156,255,0,0.1), transparent 34%), linear-gradient(145deg, rgba(9,13,10,0.98), rgba(0,0,0,0.94)); }
.ft8-terminal-head { display: flex; justify-content: space-between; gap: 10px; align-items: center; margin: 0 0 12px; min-height: 36px; padding: 8px 10px; border: 1px solid rgba(255,208,0,0.14); border-radius: 8px; background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.72); font-weight: 900; }
.ft8-terminal-head span { color: rgba(255,255,255,0.72); font-weight: 900; text-transform: uppercase; font-size: 0.78rem; white-space: nowrap; }
.ft8-terminal-head > span:first-child, .ft8-terminal-head b { color: #9cff00; }
.ft8-terminal-head #ft8SignalState { color: #ffd000; }
.ft8-terminal-meta { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.ft8-terminal-meta span { min-width: 0; padding: 8px 10px; border: 1px solid rgba(255,208,0,0.14); border-radius: 8px; background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.7); font-weight: 800; }
.ft8-terminal-meta b { color: #ffd000; }
.ft8-message-frame { flex: 1 1 0; min-height: 0; overflow: auto; border: 10px solid #111915; border-radius: 18px; background: linear-gradient(180deg, rgba(10,255,82,0.05), rgba(0,0,0,0.12)), #020403; box-shadow: inset 0 0 42px rgba(0,0,0,0.92), 0 0 0 1px rgba(255,208,0,0.18); }
.ft8-message-table { width: 100%; border-collapse: collapse; table-layout: fixed; color: #9cff00; font: 900 0.95rem ui-monospace, SFMono-Regular, Consolas, monospace; }
.ft8-message-table th, .ft8-message-table td { padding: 9px 10px; border-bottom: 1px solid rgba(156,255,0,0.12); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ft8-message-table th { position: sticky; top: 0; background: #061008; color: #ffd000; z-index: 1; }
.ft8-message-table th:nth-child(1), .ft8-message-table td:nth-child(1) { width: 112px; }
.ft8-message-table th:nth-child(2), .ft8-message-table td:nth-child(2) { width: 72px; }
.ft8-message-table th:nth-child(3), .ft8-message-table td:nth-child(3) { width: 78px; }
.ft8-message-table th:nth-child(4), .ft8-message-table td:nth-child(4) { width: 92px; }
.ft8-message-table th:nth-child(5), .ft8-message-table td:nth-child(5) { width: auto; color: #fff; }
.ft8-terminal-actions { margin-top: 12px; }
.ft8-timing-strip { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; margin-top: 12px; padding: 12px; border: 1px solid rgba(156,255,0,0.18); border-radius: 10px; background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.68); font-weight: 900; }
.ft8-timing-strip b { color: #9cff00; text-transform: uppercase; font-size: 0.8rem; }
#ft8TxState { min-height: 22px; color: #9cff00; font-weight: 900; }
.ft8-debug { margin-top: 12px; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 10px; }
.ft8-debug summary { cursor: pointer; color: #ffd000; font-weight: 900; }
.ft8-debug pre { max-height: 220px; overflow: auto; color: #c7f8bd; background: rgba(0,0,0,0.35); border-radius: 8px; padding: 10px; font-size: 0.74rem; white-space: pre-wrap; }
@media (max-width: 1180px) { .ft8-workbench { grid-template-columns: 1fr; height: auto; min-height: 0; overflow: visible; } .ft8-center-stack, .ft8-terminal-panel { min-height: 640px; } .ft8-qso-control-grid { grid-template-columns: 1fr; } .ft8-panel, .ft8-terminal-panel { height: auto; overflow: visible; } .ft8-message-frame { min-height: 360px; } }
@media (max-width: 620px) { body.ft8-page { padding-top: 104px !important; } .ft8-workbench { padding: 8px; } .ft8-terminal-head { display: grid; grid-template-columns: 1fr 1fr; } .ft8-terminal-meta { grid-template-columns: 1fr 1fr; } .ft8-timing-strip { grid-template-columns: 1fr; } }
.ft8-view-controls { display: flex; justify-content: space-between; gap: 10px; align-items: center; margin: 0 0 12px; flex-wrap: wrap; }
.ft8-cq-filter { width: auto; min-width: 118px; margin: 0; }
.ft8-map-toggle { display: inline-flex; gap: 0; border: 1px solid rgba(255,208,0,0.24); border-radius: 10px; overflow: hidden; background: rgba(255,255,255,0.04); }
.ft8-map-toggle button { min-height: 38px; border: 0; border-right: 1px solid rgba(255,208,0,0.18); background: transparent; color: #ffd000; padding: 0 12px; font-weight: 900; cursor: pointer; }
.ft8-map-toggle button:last-child { border-right: 0; }
.ft8-map-toggle button[aria-pressed="true"] { background: #9cff00; color: #102009; }
.ft8-map-panel { position: relative; min-height: 430px; height: min(52vw, 560px); max-height: 58vh; margin-bottom: 12px; border: 10px solid #111915; border-radius: 18px; overflow: hidden; background: #020403; box-shadow: inset 0 0 42px rgba(0,0,0,0.92), 0 0 0 1px rgba(255,208,0,0.18); }
.ft8-map-panel.is-hidden { display: none; }
.ft8-map-view { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.ft8-map-view.is-hidden { display: none; }
.ft8-map-empty { position: absolute; inset: auto 16px 16px 16px; z-index: 2; padding: 10px 12px; border: 1px solid rgba(255,208,0,0.22); border-radius: 10px; background: rgba(0,0,0,0.68); color: #ffd000; font-weight: 900; text-align: center; }
.ft8-banana-marker { width: 24px !important; height: 24px !important; margin: 0 !important; background: transparent !important; border: 0 !important; text-align: center; }
.ft8-banana-marker span { display: block; width: 24px; height: 24px; font-size: 19px; line-height: 24px; text-shadow: 0 0 8px #000, 0 0 7px currentColor; }
.ft8-page .leaflet-container { background: #050807; z-index: 1; }
.ft8-page .leaflet-pane, .ft8-page .leaflet-top, .ft8-page .leaflet-bottom { z-index: 5; }
.ft8-page .leaflet-popup-content-wrapper, .ft8-page .leaflet-popup-tip, .ft8-maplibre-popup .maplibregl-popup-content { background: rgba(5,8,7,0.94); color: #f5f5f5; border: 1px solid rgba(156,255,0,0.28); box-shadow: 0 12px 32px rgba(0,0,0,0.4); }
.ft8-page .leaflet-popup-content strong, .ft8-maplibre-popup strong { color: #9cff00; }
@media (max-width: 620px) { .ft8-view-controls { display: grid; grid-template-columns: 1fr; } .ft8-map-toggle { width: 100%; } .ft8-map-toggle button { flex: 1; padding: 0 8px; } .ft8-map-panel { min-height: 340px; height: 340px; max-height: none; } .ft8-brand-card { grid-template-columns: 74px 1fr; min-height: 88px; } .ft8-brand-card img { width: 74px; height: 74px; } }