.st-mode-switch {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    flex: 0 0 38px;
    padding: 0;
    margin-bottom: 12px;
    border: 0;
    border-bottom: 1px solid rgba(0, 212, 255, 0.12);
    border-radius: 0;
    background: transparent;
}

.st-mode-switch button {
    border: 0;
    border-radius: 0;
    background: transparent;
    color: rgba(207, 230, 240, 0.52);
    font-size: 12px;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.st-mode-switch button.active {
    color: #00d4ff;
    background: rgba(0, 212, 255, 0.035);
    box-shadow: inset 0 -2px 0 #00d4ff;
}

.spatiotemporal-page .st-panel-header {
    display: flex;
    align-items: center;
    flex: 0 0 46px;
    min-height: 46px;
    gap: 8px;
    margin: -16px -16px 12px;
    padding: 0 16px;
    border-bottom: 1px solid rgba(0, 212, 255, 0.12);
}

.spatiotemporal-page .st-panel-heading {
    display: grid;
    flex: 1;
    min-width: 0;
    gap: 1px;
}

.spatiotemporal-page .st-panel-heading h3 {
    max-width: none;
    margin: 0;
    overflow: hidden;
    color: #00d4ff;
    font-size: 15px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.spatiotemporal-page .st-panel-heading span,
.spatiotemporal-page .st-panel-heading small {
    margin: 0;
    overflow: hidden;
    color: rgba(208, 232, 242, 0.48);
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.spatiotemporal-page .st-panel-header .scifi-header-dots { margin-left: auto; }
.spatiotemporal-page .st-panel-header > #stDetailGridCode,
.spatiotemporal-page .st-panel-header > .st-risk-pill { margin-left: auto; }

.st-mode-panel,
.st-detail-mode-panel {
    min-height: 0;
    display: flex;
    flex: 1;
    flex-direction: column;
    overflow: hidden;
}

.st-mode-panel[hidden],
.st-detail-mode-panel[hidden] {
    display: none !important;
}

.st-airspace-mode {
    gap: 12px;
    overflow-y: auto;
    padding-right: 2px;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 212, 255, 0.42) transparent;
}

.st-airspace-action-card,
.st-airspace-factors,
.st-airspace-history {
    border: 1px solid rgba(0, 128, 255, 0.1);
    border-radius: var(--radius-md, 5px);
    background: rgba(0, 128, 255, 0.025);
}

.st-airspace-action-card { padding: 13px; }
.st-airspace-factors,
.st-airspace-history { padding: 12px; }
.st-airspace-history { min-height: 190px; }

.st-airspace-eyebrow {
    margin-bottom: 10px;
    color: #00d4ff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0;
}

.st-airspace-area-state {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 58px;
    padding: 10px;
    border: 1px dashed rgba(0, 212, 255, 0.22);
    border-radius: 4px;
    color: rgba(218, 241, 248, 0.82);
    background: rgba(0, 128, 255, 0.025);
}

.st-airspace-area-state.ready { border-style: solid; border-color: rgba(61, 224, 166, 0.36); }
.st-airspace-area-state b,
.st-airspace-area-state small { display: block; }
.st-airspace-area-state b { font-size: 13px; font-weight: 600; }
.st-airspace-area-state small { margin-top: 3px; color: rgba(194, 221, 232, 0.54); font-size: 11px; }
.st-airspace-area-icon { color: #26daf3; font-size: 22px; line-height: 1; }

.st-airspace-action-row {
    display: grid;
    grid-template-columns: 1fr 38px;
    gap: 8px;
    margin-top: 10px;
}

.st-airspace-primary,
.st-airspace-icon-btn,
.st-airspace-history .st-section-head button {
    height: 36px;
    border: 1px solid rgba(16, 210, 243, 0.42);
    border-radius: 4px;
    color: #ddfbff;
    background: rgba(0, 169, 207, 0.14);
    cursor: pointer;
}

.st-airspace-primary:hover { background: rgba(0, 188, 224, 0.24); }
.st-airspace-icon-btn { font-size: 20px; color: rgba(220, 241, 247, 0.65); background: rgba(95, 123, 145, 0.08); }
.st-airspace-history .st-section-head button { width: auto; height: 26px; padding: 0 9px; font-size: 11px; }

.st-airspace-factors .st-section-head,
.st-airspace-history .st-section-head { margin-bottom: 9px; }
.st-airspace-factors .st-section-head small { color: rgba(188, 216, 228, 0.54); font-size: 11px; }

.st-airspace-factor-list { display: grid; gap: 5px; }
.st-airspace-factor-button {
    position: relative;
    display: grid;
    grid-template-columns: 8px 1fr auto;
    align-items: center;
    gap: 9px;
    min-height: 34px;
    padding: 0 9px 0 12px;
    border: 1px solid rgba(0, 128, 255, 0.08);
    border-radius: 4px;
    color: rgba(213, 235, 243, 0.72);
    background: rgba(0, 128, 255, 0.02);
    text-align: left;
    cursor: pointer;
}
.st-airspace-factor-button::before { content: ''; position: absolute; left: 0; width: 3px; height: 16px; background: var(--factor-color); opacity: 0.7; }
.st-airspace-factor-button i { width: 6px; height: 6px; border-radius: 50%; background: var(--factor-color); box-shadow: 0 0 8px var(--factor-color); }
.st-airspace-factor-button small { color: rgba(186, 212, 224, 0.46); font-size: 10px; }
.st-airspace-factor-button.active { border-color: color-mix(in srgb, var(--factor-color) 35%, transparent); color: #f0fdff; background: color-mix(in srgb, var(--factor-color) 7%, transparent); }
.st-airspace-factor-button.unavailable { opacity: 0.48; }
.st-airspace-factor-button.deferred small { color: #b9aaff; }

.st-airspace-task-list { display: grid; gap: 6px; max-height: 220px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(0, 212, 255, 0.42) transparent; }
.st-airspace-task {
    position: relative;
    padding: 10px 34px 10px 11px;
    border: 1px solid rgba(0, 128, 255, 0.1);
    border-left: 3px solid #00d4ff;
    border-radius: var(--radius-md, 5px);
    color: #d8f0f5;
    background: rgba(0, 128, 255, 0.03);
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.st-airspace-task:hover,
.st-airspace-task.active { border-color: rgba(0, 212, 255, 0.35); border-left-color: #00d4ff; background: rgba(0, 212, 255, 0.07); transform: translateX(2px); }
.st-airspace-task b,
.st-airspace-task small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-airspace-task b { font-size: 12px; }
.st-airspace-task small { margin-top: 5px; color: rgba(190, 215, 225, 0.5); font-size: 10px; }
.st-airspace-task .delete { position: absolute; right: 7px; top: 8px; border: 0; color: rgba(236, 113, 128, 0.68); background: transparent; cursor: pointer; }

.st-airspace-empty { padding: 26px 12px; border: 1px dashed rgba(0, 212, 255, 0.14); border-radius: 4px; color: rgba(188, 216, 228, 0.46); background: rgba(0, 128, 255, 0.018); font-size: 12px; text-align: center; }

.st-airspace-detail { overflow: hidden; }
.st-airspace-detail-head { justify-content: flex-start; }
.st-risk-pill { padding: 5px 9px; border: 1px solid currentColor; border-radius: 4px; font-size: 11px; }
.st-risk-pill.low { color: #4ce2a8; background: rgba(48, 214, 154, 0.08); }
.st-risk-pill.medium { color: #ffc052; background: rgba(255, 181, 62, 0.08); }
.st-risk-pill.high,
.st-risk-pill.critical { color: #ff6577; background: rgba(255, 82, 104, 0.09); }

.st-airspace-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 12px 0; }
.st-airspace-kpis > div { position: relative; min-height: 64px; padding: 9px 10px 9px 12px; border: 1px solid rgba(0, 128, 255, 0.1); border-radius: var(--radius-md, 5px); background: rgba(0, 128, 255, 0.025); }
.st-airspace-kpis > div::before { content: ''; position: absolute; top: 10px; bottom: 10px; left: 0; width: 2px; background: rgba(0, 212, 255, 0.55); }
.st-airspace-kpis small { display: block; color: rgba(198, 223, 233, 0.56); font-size: 10px; }
.st-airspace-kpis b { display: inline-block; margin-top: 5px; color: #41def5; font-family: Orbitron, sans-serif; font-size: 20px; }
.st-airspace-kpis em { margin-left: 4px; color: rgba(192, 218, 228, 0.45); font-size: 10px; font-style: normal; }

.st-airspace-tabs { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid rgba(0, 212, 255, 0.12); }
.st-airspace-tabs button { height: 34px; border: 0; color: rgba(198, 223, 232, 0.56); background: transparent; font-size: 11px; cursor: pointer; }
.st-airspace-tabs button.active { color: #00d4ff; background: rgba(0, 212, 255, 0.025); box-shadow: inset 0 -2px 0 #00d4ff; }
.st-airspace-weather-switch { display: grid; gap: 5px; margin: 9px 12px 0; padding: 7px 8px; border: 1px solid rgba(50, 189, 216, 0.16); border-radius: 4px; background: rgba(1, 16, 29, 0.55); }
.st-airspace-weather-switch[hidden] { display: none; }
.st-airspace-weather-switch-row { display: grid; grid-template-columns: 58px 1fr; align-items: center; gap: 7px; }
.st-airspace-weather-switch-row > span { color: rgba(196, 224, 233, 0.52); font-size: 9px; }
.st-airspace-weather-switch-row > div { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.st-airspace-weather-switch button { height: 27px; border: 1px solid transparent; border-radius: 3px; color: rgba(200, 228, 236, 0.58); background: transparent; font-size: 10px; cursor: pointer; }
.st-airspace-weather-switch button.active { border-color: rgba(48, 216, 241, 0.38); color: #e9fcff; background: rgba(25, 186, 219, 0.15); box-shadow: inset 0 -2px 0 #2bdcf2; }
.st-airspace-detail.weather-mode .st-airspace-kpis { display: none; }
.st-airspace-chart { flex: 0 0 190px; width: 100%; min-height: 190px; }
.st-airspace-insight { min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(0, 212, 255, 0.42) transparent; }
.st-airspace-insight-row { display: grid; grid-template-columns: 8px 1fr auto; align-items: center; gap: 8px; margin-top: 6px; padding: 9px 8px; border: 1px solid rgba(0, 128, 255, 0.08); border-radius: 4px; color: rgba(216, 237, 244, 0.72); background: rgba(0, 128, 255, 0.02); font-size: 11px; }
.st-airspace-insight-row i { width: 5px; height: 5px; border-radius: 50%; background: var(--row-color, #2bdaf2); }
.st-airspace-insight-row b { color: #ecfbfe; font-weight: 600; }

.st-airspace-timebar {
    position: fixed;
    left: 375px;
    right: 440px;
    bottom: 42px;
    z-index: 10010;
    display: grid;
    grid-template-columns: 34px 88px minmax(180px, 1fr) 88px 42px;
    align-items: center;
    gap: 12px;
    min-height: 58px;
    padding: 9px 14px;
    border: 1px solid rgba(34, 207, 235, 0.26);
    border-radius: 6px;
    background: rgba(3, 17, 32, 0.84);
    box-shadow: 0 12px 28px rgba(0, 5, 14, 0.35), inset 0 0 28px rgba(0, 207, 244, 0.025);
    backdrop-filter: blur(12px);
    pointer-events: auto;
}
.st-airspace-timebar[hidden] { display: none; }
.st-airspace-filter-icon { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid rgba(34, 218, 242, 0.38); border-radius: 50%; color: #35ddf5; background: rgba(0, 181, 217, 0.1); font-size: 16px; }
.st-airspace-time-meta small,
.st-airspace-time-meta b { display: block; }
.st-airspace-time-meta small { color: rgba(190, 216, 226, 0.46); font-size: 9px; }
.st-airspace-time-meta b { margin-top: 3px; color: #e7faff; font-size: 11px; }
.st-airspace-time-meta.end { text-align: right; }
.st-airspace-range-track { position: relative; height: 28px; --range-start: 0%; --range-end: 100%; }
.st-airspace-range-track::before,
.st-airspace-range-track::after { content: ''; position: absolute; top: 13px; right: 0; left: 0; height: 3px; border-radius: 2px; }
.st-airspace-range-track::before { background: rgba(163, 193, 205, 0.28); }
.st-airspace-range-track::after { left: var(--range-start); right: calc(100% - var(--range-end)); background: #25d8ef; box-shadow: 0 0 10px rgba(37, 216, 239, 0.45); }
.st-airspace-range-track input[type="range"] { position: absolute; z-index: 2; width: 100%; height: 28px; margin: 0; appearance: none; pointer-events: none; background: transparent; }
.st-airspace-range-track input[type="range"]::-webkit-slider-runnable-track { height: 3px; background: transparent; }
.st-airspace-range-track input[type="range"]::-webkit-slider-thumb { width: 14px; height: 14px; margin-top: -6px; border: 2px solid #dffcff; border-radius: 50%; appearance: none; background: #22d8ef; box-shadow: 0 0 10px rgba(34, 216, 239, 0.65); pointer-events: auto; cursor: ew-resize; }
.st-airspace-range-track input[type="range"]::-moz-range-track { height: 3px; background: transparent; }
.st-airspace-range-track input[type="range"]::-moz-range-thumb { width: 12px; height: 12px; border: 2px solid #dffcff; border-radius: 50%; background: #22d8ef; box-shadow: 0 0 10px rgba(34, 216, 239, 0.65); pointer-events: auto; cursor: ew-resize; }
.st-airspace-range-reset { width: 42px; height: 30px; padding: 0; border: 1px solid rgba(34, 218, 242, 0.32); border-radius: 4px; color: #bfeef4; background: rgba(0, 181, 217, 0.08); font-size: 10px; cursor: pointer; }
.st-airspace-range-reset:hover { color: #ffffff; background: rgba(0, 181, 217, 0.18); }
.st-airspace-color-scale {
    display: grid;
    flex: 0 0 auto;
    width: 100%;
    gap: 5px;
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(34, 207, 235, 0.2);
    border-radius: 5px;
    background: rgba(2, 17, 32, 0.58);
    box-shadow: inset 0 0 18px rgba(0, 207, 244, 0.025);
}
.st-airspace-color-scale[hidden] { display: none; }
.st-airspace-scale-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.st-airspace-scale-title span { color: #dffaff; font-size: 10px; font-weight: 600; }
.st-airspace-scale-title em { color: rgba(184, 215, 224, 0.46); font-size: 8px; font-style: normal; }
.st-airspace-scale-bar { height: 7px; border: 1px solid rgba(191, 239, 246, 0.2); border-radius: 2px; background: linear-gradient(90deg, #23b381, #f2c943, #ff4d64); box-shadow: 0 0 10px rgba(44, 213, 233, 0.12); }
.st-airspace-scale-labels { display: flex; align-items: center; justify-content: space-between; color: rgba(208, 231, 238, 0.62); font-family: Orbitron, sans-serif; font-size: 8px; }
.st-airspace-scale-labels span:last-child { color: #ff8c9b; }

.st-airspace-vertical-ruler {
    position: fixed;
    left: 362px;
    top: 154px;
    bottom: 122px;
    z-index: 10012;
    display: grid;
    grid-template-rows: auto auto minmax(150px, 1fr) auto auto;
    justify-items: center;
    width: 112px;
    padding: 8px 8px 10px;
    border: 1px solid rgba(38, 211, 238, 0.34);
    border-radius: 6px;
    color: #e5fbff;
    background: rgba(2, 17, 31, 0.86);
    box-shadow: 0 14px 34px rgba(0, 5, 14, 0.38), inset 0 0 26px rgba(21, 214, 239, 0.035);
    backdrop-filter: blur(12px);
    pointer-events: auto;
}
.st-airspace-vertical-ruler[hidden] { display: none; }
.st-airspace-vertical-ruler::before,
.st-airspace-vertical-ruler::after {
    content: '';
    position: absolute;
    left: -1px;
    width: 16px;
    height: 1px;
    background: #25dbf3;
    box-shadow: 0 0 9px rgba(37, 219, 243, 0.62);
}
.st-airspace-vertical-ruler::before { top: -1px; }
.st-airspace-vertical-ruler::after { bottom: -1px; }
.st-airspace-view-switch {
    display: grid;
    width: 100%;
    gap: 3px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(45, 195, 220, 0.16);
}
.st-airspace-view-switch button {
    height: 29px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 4px;
    color: rgba(199, 226, 235, 0.54);
    background: transparent;
    font-size: 10px;
    cursor: pointer;
}
.st-airspace-view-switch button.active {
    border-color: rgba(40, 216, 242, 0.4);
    color: #eaffff;
    background: rgba(0, 194, 226, 0.13);
    box-shadow: inset 2px 0 0 #2bdcf4;
}
.st-airspace-slice-summary { display: grid; width: 100%; gap: 4px; padding: 9px 0 7px; text-align: center; }
.st-airspace-slice-summary small { color: rgba(191, 219, 228, 0.56); font-size: 9px; }
.st-airspace-height-value {
    min-width: 82px;
    padding: 5px 4px;
    border: 1px solid rgba(45, 219, 243, 0.28);
    border-radius: 4px;
    color: #42e1f5;
    background: rgba(0, 190, 222, 0.09);
    font-family: Orbitron, sans-serif;
    font-size: 9px;
    text-align: center;
}
.st-airspace-slice-controls { display: grid; grid-template-rows: 26px minmax(100px, 1fr) 26px; width: 100%; min-height: 0; gap: 5px; }
.st-airspace-slice-controls > button { border: 1px solid rgba(45, 219, 243, 0.22); border-radius: 4px; color: rgba(196, 229, 238, 0.7); background: rgba(7, 43, 62, 0.68); cursor: pointer; }
.st-airspace-slice-controls > button:hover { color: #fff; border-color: rgba(45, 219, 243, 0.56); background: rgba(0, 179, 211, 0.18); }
.st-airspace-slice-list { display: grid; align-content: start; gap: 4px; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(43, 220, 244, 0.45) transparent; }
.st-airspace-slice-item { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; min-height: 32px; padding: 0 7px; border: 1px solid rgba(81, 137, 156, 0.2); border-radius: 4px; color: rgba(196, 221, 229, 0.55); background: rgba(3, 28, 44, 0.68); cursor: pointer; }
.st-airspace-slice-item span { font-family: Orbitron, sans-serif; font-size: 9px; white-space: nowrap; }
.st-airspace-slice-item em { color: rgba(165, 192, 201, 0.42); font-size: 8px; font-style: normal; }
.st-airspace-slice-item.has-data::before { content: ''; position: absolute; left: 0; width: 3px; height: 15px; background: rgba(45, 219, 243, 0.52); }
.st-airspace-slice-item.has-data em { color: #62d9e9; }
.st-airspace-slice-item:hover { border-color: rgba(45, 219, 243, 0.48); color: #eaffff; }
.st-airspace-slice-item.active { border-color: #2bdcf4; color: #fff; background: rgba(0, 190, 222, 0.18); box-shadow: inset 2px 0 0 #2bdcf4; }
.st-airspace-ruler-range { display: flex; justify-content: space-between; width: 100%; padding-top: 7px; color: rgba(208, 234, 242, 0.52); font-family: Orbitron, sans-serif; font-size: 8px; }
.st-airspace-vertical-ruler > small { margin-top: 5px; color: rgba(191, 219, 228, 0.44); font-size: 9px; white-space: nowrap; }
.st-airspace-vertical-ruler.loading .st-airspace-height-value { animation: st-airspace-height-pulse .8s ease-in-out infinite alternate; }
@keyframes st-airspace-height-pulse { to { color: #ffffff; box-shadow: 0 0 12px rgba(39, 220, 243, 0.32); } }

.st-airspace-dialog-overlay { z-index: 12050; }
.st-airspace-dialog { width: min(660px, calc(100vw - 32px)); max-height: calc(100vh - 70px); border-radius: 6px; }
.st-airspace-dialog .modal-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 66px;
    padding: 0 18px;
    border-bottom: 1px solid rgba(36, 183, 211, 0.15);
}
.st-airspace-dialog .modal-header h3 { margin: 0; color: #20d8f2; font-size: 16px; }
.st-airspace-dialog .modal-close {
    position: absolute;
    top: 15px;
    right: 16px;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(149, 186, 202, 0.2);
    border-radius: 50%;
    color: rgba(213, 235, 243, 0.66);
    background: rgba(108, 136, 154, 0.08);
    font-size: 20px;
    line-height: 30px;
    cursor: pointer;
}
.st-airspace-dialog .modal-close:hover { color: #ffffff; border-color: rgba(42, 218, 242, 0.44); background: rgba(31, 194, 221, 0.12); }
.st-airspace-dialog-body { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 18px; overflow-y: auto; }
.st-airspace-form-section { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 13px; border: 1px solid rgba(36, 183, 211, 0.15); border-radius: 5px; background: rgba(2, 16, 31, 0.42); }
.st-airspace-form-section:nth-of-type(2),
.st-airspace-dimension-section { grid-column: 1 / -1; }
.st-airspace-form-title { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; margin-bottom: 2px; }
.st-airspace-form-title span { color: #ddf7fb; font-size: 12px; }
.st-airspace-form-title small { color: rgba(186, 215, 225, 0.45); font-size: 10px; }
.st-airspace-field { position: relative; display: grid; gap: 6px; color: rgba(200, 225, 234, 0.6); font-size: 11px; }
.st-airspace-field-wide { grid-column: 1 / -1; }
.st-airspace-field input,
.st-airspace-field select { width: 100%; height: 38px; padding: 0 12px; border: 1px solid rgba(32, 183, 213, 0.22); border-radius: 5px; outline: 0; color: #e8faff; background: rgba(2, 18, 35, 0.82); }
.st-airspace-field input:focus,
.st-airspace-field select:focus { border-color: rgba(35, 213, 241, 0.62); box-shadow: 0 0 0 2px rgba(20, 205, 235, 0.08); }
.st-airspace-field em { position: absolute; right: 10px; bottom: 11px; color: rgba(196, 219, 228, 0.42); font-size: 10px; font-style: normal; }
.st-airspace-dimension-grid { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.st-airspace-dimension-grid label { position: relative; }
.st-airspace-dimension-grid input { position: absolute; opacity: 0; }
.st-airspace-dimension-grid span { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px; border: 1px solid rgba(44, 169, 196, 0.14); border-radius: 4px; color: rgba(204, 229, 237, 0.56); font-size: 11px; cursor: pointer; }
.st-airspace-dimension-grid input:checked + span { border-color: rgba(39, 213, 240, 0.38); color: #e7fbfe; background: rgba(0, 194, 228, 0.08); }
.st-airspace-dimension-grid i { width: 6px; height: 6px; border-radius: 50%; }
.st-airspace-dimension-grid i.cyan { background: #2adbf3; }.st-airspace-dimension-grid i.amber { background: #ffb34d; }.st-airspace-dimension-grid i.green { background: #4ce2a8; }.st-airspace-dimension-grid i.violet { background: #9a89ff; }.st-airspace-dimension-grid i.red { background: #ff6277; }.st-airspace-dimension-grid i.blue { background: #4eaaff; }
.st-airspace-dialog-footer { display: flex; align-items: center; justify-content: space-between; }
.st-airspace-dialog-footer > span { color: rgba(194, 220, 230, 0.52); font-size: 11px; }
.st-airspace-dialog-footer > div { display: flex; gap: 8px; }

.st-airspace-progress { position: fixed; left: 50%; bottom: 106px; z-index: 13000; transform: translateX(-50%); display: grid; grid-template-columns: 34px auto; align-items: center; gap: 12px; min-width: 310px; padding: 12px 16px; border: 1px solid rgba(38, 212, 239, 0.35); border-radius: 5px; color: #e8fbff; background: rgba(2, 18, 34, 0.94); box-shadow: 0 14px 36px rgba(0, 4, 12, 0.45); }
.st-airspace-progress[hidden] { display: none; }
.st-airspace-progress > span { width: 28px; height: 28px; border: 2px solid rgba(42, 213, 239, 0.18); border-top-color: #2bdcf4; border-radius: 50%; animation: st-airspace-spin .9s linear infinite; }
.st-airspace-progress b,
.st-airspace-progress small { display: block; }
.st-airspace-progress b { font-size: 12px; }
.st-airspace-progress small { margin-top: 4px; color: rgba(194, 220, 229, 0.5); font-size: 10px; }
@keyframes st-airspace-spin { to { transform: rotate(360deg); } }

.st-airspace-weather-marker { --weather-color: #36dca8; display: grid; grid-template-columns: 1fr; align-items: center; min-width: 82px; min-height: 38px; padding: 5px 8px; border: 1px solid color-mix(in srgb, var(--weather-color) 72%, transparent); border-radius: 4px; color: #eaffff; background: rgba(2, 22, 37, 0.92); box-shadow: 0 0 0 1px rgba(1, 10, 20, 0.55), 0 0 18px color-mix(in srgb, var(--weather-color) 22%, transparent); cursor: pointer; }
.st-airspace-weather-marker.safe { --weather-color: #36dca8; }
.st-airspace-weather-marker.attention { --weather-color: #e8cc57; }
.st-airspace-weather-marker.high { --weather-color: #ff9f43; }
.st-airspace-weather-marker.critical { --weather-color: #ff5368; }
.st-airspace-weather-marker span { display: grid; grid-template-columns: auto auto; align-items: baseline; gap: 0 3px; white-space: nowrap; }
.st-airspace-weather-marker b { color: #f3feff; font-family: Orbitron, sans-serif; font-size: 12px; }
.st-airspace-weather-marker small { color: var(--weather-color); font-size: 8px; }
.st-airspace-weather-marker em { grid-column: 1 / -1; color: rgba(211, 235, 241, 0.48); font-size: 7px; font-style: normal; }
.st-airspace-weather-marker:hover { filter: brightness(1.16); }

.st-weather-summary-head { --weather-color: #36dca8; display: flex; align-items: center; justify-content: space-between; margin: 8px 0 10px; padding: 9px 11px; border-left: 3px solid var(--weather-color); background: linear-gradient(90deg, color-mix(in srgb, var(--weather-color) 14%, transparent), transparent); }
.st-weather-summary-head.attention { --weather-color: #e8cc57; }
.st-weather-summary-head.high { --weather-color: #ff9f43; }
.st-weather-summary-head.critical { --weather-color: #ff5368; }
.st-weather-summary-head small { display: block; color: rgba(204, 229, 237, 0.55); font-size: 9px; }
.st-weather-summary-head strong { display: block; margin-top: 2px; color: var(--weather-color); font-size: 13px; }
.st-weather-summary-head > b { color: var(--weather-color); font-family: Orbitron, sans-serif; font-size: 24px; }
.st-weather-summary-head > b em { margin-left: 3px; color: rgba(211, 235, 241, 0.54); font-family: inherit; font-size: 8px; font-style: normal; }
.st-weather-metrics { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(57, 177, 204, 0.13); border-left: 1px solid rgba(57, 177, 204, 0.13); }
.st-weather-metrics > div { min-width: 0; padding: 8px 9px; border-right: 1px solid rgba(57, 177, 204, 0.13); border-bottom: 1px solid rgba(57, 177, 204, 0.13); background: rgba(2, 18, 32, 0.32); }
.st-weather-metrics small { display: block; color: rgba(196, 224, 233, 0.56); font-size: 9px; }
.st-weather-metrics b { display: inline-block; margin-top: 3px; color: #e9fbff; font-family: Orbitron, sans-serif; font-size: 15px; }
.st-weather-metrics em { margin-left: 3px; color: rgba(190, 218, 227, 0.44); font-size: 8px; font-style: normal; }
.st-weather-foot { display: flex; justify-content: space-between; gap: 8px; padding: 8px 2px 0; color: rgba(196, 224, 233, 0.58); font-size: 9px; }

@media (max-width: 1600px) {
    .st-airspace-timebar { grid-template-columns: 34px 88px minmax(160px, 1fr) 88px 42px; gap: 10px; }
}

@media (max-width: 1280px) {
    .st-airspace-timebar { left: 375px; right: 375px; grid-template-columns: 30px 78px minmax(120px, 1fr) 78px 38px; gap: 8px; }
    .st-airspace-vertical-ruler { left: 362px; width: 76px; }
}

@media (max-width: 980px) {
    .st-airspace-timebar { left: 20px; right: 20px; bottom: 44px; grid-template-columns: 30px 72px minmax(120px, 1fr) 72px 38px; }
    .st-airspace-vertical-ruler { left: 18px; top: 132px; bottom: 120px; }
    .st-airspace-dialog-body { grid-template-columns: 1fr; }
    .st-airspace-form-section { grid-column: 1; }
}