/* Sat Tracker neutral space theme */

:root {
    /* Neutral Sat Tracker palette */
    --accent-primary: #00D4FF;
    --accent-primary-dark: #00A8CC;
    --accent-primary-darker: #007F99;
    --panel-base: #12181F;
    --panel-base-light: #232F3E;
    --panel-base-lighter: #4A5A70;
    
    /* Enhanced Space Colors */
    --deep-space: #0A0E1A;        /* Primary deep-space background */
    --void-black: #000000;
    --stellar-blue: #1A2332;      /* Slightly lighter panel tone */
    --nebula-purple: #2D1B3D;     /* Dark purple for depth */
    --cosmic-gray: #2C3E50;
    
    /* Satellite & UI Colors */
    --satellite-active: #00D4FF;   /* Bright cyan for active satellites */
    --satellite-selected: #FFD700; /* Gold for selected */
    --satellite-inactive: #7A8B99; /* Muted for inactive */
    --orbital-path: rgba(0, 212, 255, 0.3); /* Translucent orange */
    
    /* Text Colors */
    --text-primary: #FFFFFF;
    --text-secondary: #B0BEC5;
    --text-accent: var(--accent-primary);
    --text-muted: #546E7A;
    --text-success: #4CAF50;
    --text-warning: #FFC107;
    --text-error: #F44336;
    
    /* UI Element Colors */
    --border-primary: rgba(0, 212, 255, 0.3);
    --border-secondary: rgba(255, 255, 255, 0.1);
    --background-panel: rgba(35, 47, 62, 0.95);
    --background-hover: rgba(0, 212, 255, 0.1);
    --background-active: rgba(0, 212, 255, 0.2);
    
    /* Shadows & Effects */
    --shadow-accent: 0 0 20px rgba(0, 212, 255, 0.3);
    --shadow-blue: 0 0 15px rgba(0, 212, 255, 0.2);
    --glow-accent: 0 0 10px rgba(0, 212, 255, 0.5);
}

/* Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: linear-gradient(135deg, var(--deep-space) 0%, var(--void-black) 50%, var(--nebula-purple) 100%);
    color: var(--text-primary);
    overflow: hidden;
    height: 100vh;
}

.container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 60px 1fr;
    height: 100vh;
    gap: 0;
    transition: all 0.3s ease;
}

.container.with-sidebar {
    grid-template-columns: 1fr 300px;
}

.container.with-launch-panel {
    grid-template-rows: 60px 1fr 150px;
}

.container.with-sidebar.with-launch-panel {
    grid-template-columns: 1fr 300px;
    grid-template-rows: 60px 1fr 150px;
}

/* Header */
.header {
    grid-column: 1 / -1;
    background: linear-gradient(90deg, var(--panel-base) 0%, var(--stellar-blue) 100%);
    border-bottom: 2px solid var(--border-primary);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    min-height: 60px;
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-accent);
}

/* Left Section */
.left-section {
    display: flex;
    align-items: center;
    gap: 40px;
}

.logo {
    font-size: 20px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--accent-primary);
    text-shadow: var(--glow-accent);
}

/* Stats */
.stats {
    display: flex;
    gap: 30px;
}

.stat-item {
    text-align: center;
}

.stat-value {
    font-size: 24px;
    font-weight: bold;
    color: var(--text-success);
    text-shadow: 0 0 10px rgba(76, 175, 80, 0.5);
}

.stat-item div:last-child {
    font-size: 10px;
    color: var(--text-secondary);
    text-transform: uppercase;
}

/* Clock Container */
.clock-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 12px;
    background: rgba(35, 47, 62, 0.7);
    border: 1px solid var(--border-primary);
    border-radius: 6px;
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.2);
    backdrop-filter: blur(10px);
    height: fit-content;
    width: 280px; /* Match approximate stats width */
}

.clock-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    flex: 1;
}

.clock-divider {
    color: var(--text-muted);
    opacity: 0.4;
    font-size: 16px;
    line-height: 1;
    user-select: none;
    margin: 0 4px;
}

.clock-time {
    font-size: 18px;
    font-weight: bold;
    color: var(--accent-primary);
    text-shadow: var(--glow-accent);
    letter-spacing: 0.5px;
    font-family: 'Courier New', monospace;
    line-height: 1;
    margin: 0;
}

.clock-date {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.2;
    font-weight: 500;
    text-align: center;
}

.clock-timezone {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    line-height: 1;
    margin-top: 1px;
}

.speed-indicator {
    font-size: 11px;
    color: var(--satellite-active);
    font-weight: bold;
    padding: 2px 6px;
    background: rgba(0, 212, 255, 0.1);
    border: 1px solid rgba(0, 212, 255, 0.3);
    border-radius: 3px;
    text-align: center;
    line-height: 1.2;
    white-space: nowrap;
}

.speed-indicator.fast {
    color: var(--text-warning);
    background: rgba(255, 193, 7, 0.1);
    border-color: rgba(255, 193, 7, 0.3);
}

.speed-indicator.paused {
    color: var(--text-error);
    background: rgba(244, 67, 54, 0.1);
    border-color: rgba(244, 67, 54, 0.3);
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* Earth View */
.earth-view {
    grid-column: 1;
    grid-row: 2;
    position: relative;
    background: radial-gradient(circle at center, var(--stellar-blue) 0%, var(--deep-space) 70%);
    overflow: hidden;
    transition: all 0.3s ease;
}

.container:not(.with-sidebar) .earth-view {
    grid-column: 1 / -1;
}

.container:not(.with-launch-panel) .earth-view {
    grid-row: 2 / -1;
}

#earth-canvas, #map-canvas {
    width: 100%;
    height: 100%;
    display: block;
    touch-action: pan-x pan-y pinch-zoom; /* Allow scrolling and pinch zoom while still enabling custom controls */
    user-select: none; /* Prevent text selection on touch */
    position: relative;
}

/* Mobile touch interaction hint - only visible on touch devices */
@media (hover: none) and (pointer: coarse) {
    #earth-canvas::before {
        content: '';
        position: absolute;
        top: 10%;
        left: 15%;
        right: 15%;
        bottom: 10%;
        border: 2px dashed rgba(0, 212, 255, 0.3);
        border-radius: 50%;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.3s ease;
        z-index: 1;
    }
    
    /* Show hint briefly on page load for mobile users */
    #earth-canvas.show-touch-hint::before {
        opacity: 1;
        animation: fadeInOut 3s ease-in-out;
    }
}

@keyframes fadeInOut {
    0%, 100% { opacity: 0; }
    20%, 80% { opacity: 0.6; }
}

#map-canvas {
    display: none;
}

/* Debug Info */
.debug-info-link {
    position: absolute;
    top: 10px;
    left: 10px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease;
}

.debug-info-link:hover .debug-info {
    transform: scale(1.05);
    border-color: var(--accent-primary);
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
    cursor: pointer;
}

.debug-info {
    font-size: 13px;
    color: var(--text-success);
    background: var(--background-panel);
    padding: 8px 12px;
    border-radius: 5px;
    border: 1px solid var(--border-primary);
    backdrop-filter: blur(10px);
    display: none;
}

/* Controls */
.controls-compact {
    position: fixed !important;
    right: 10px !important;
    bottom: calc(var(--launch-panel-height, 150px) + 10px) !important;
    z-index: 9999 !important;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--background-panel);
    padding: 5px;
    border-radius: 20px;
    backdrop-filter: blur(15px);
    border: 1px solid var(--border-primary);
    box-shadow: var(--shadow-accent);
    max-height: 42px;
    max-width: fit-content;
    height: fit-content;
    width: fit-content;
}

/* Adjust controls when sidebar is visible */
.container.with-sidebar .controls-compact {
    right: 320px !important;
}

/* When a full-screen educational panel is open, rest the toolbar at the
   bottom of that modal frame instead of above the launch panel */
body:has(.edu-panel.visible) .container .controls-compact,
body:has(.edu-panel.visible) .controls-compact {
    bottom: 10px !important;
    right: 10px !important;
}



.control-btn-compact {
    width: 32px;
    height: 32px;
    border: 1px solid var(--border-primary);
    background: linear-gradient(135deg, var(--panel-base) 0%, var(--stellar-blue) 100%);
    color: var(--text-primary);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
}

.control-btn-compact:hover {
    background: linear-gradient(135deg, var(--accent-primary-dark) 0%, var(--accent-primary) 100%);
    border-color: var(--accent-primary);
    transform: scale(1.1);
    box-shadow: var(--glow-accent);
    color: var(--void-black);
}

.control-btn-compact:active {
    transform: scale(0.95);
}

/* Altitude Indicator */
.altitude-indicator {
    position: absolute;
    bottom: 20px;
    left: 20px;
    background: var(--background-panel);
    padding: 10px;
    border-radius: 6px;
    font-size: 11px;
    border: 1px solid var(--border-primary);
    backdrop-filter: blur(15px);
    max-width: 200px;
    transition: bottom 0.3s ease;
    box-shadow: var(--shadow-blue);
}

.container.with-launch-panel .altitude-indicator {
    bottom: 210px;
}

.altitude-indicator h4 {
    margin-bottom: 8px;
    color: var(--accent-primary);
    font-size: 13px;
    text-shadow: var(--glow-accent);
}

.altitude-item {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
}

.altitude-marker {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 8px;
    box-shadow: 0 0 6px currentColor;
}

.altitude-590 { 
    background: #00E5FF; /* Shell 1 - Medium Blue */
}
.altitude-610 { 
    background: #80FFFF; /* Shell 2 - Very Light Blue */
}
.altitude-630 { 
    background: #E0FFFF; /* Shell 3 - Near White */
}

/* Satellite Info */
.satellite-info {
    position: absolute;
    top: 70px;
    right: 10px;
    background: var(--background-panel);
    padding: 18px;
    border-radius: 8px;
    border: 1px solid var(--border-primary);
    min-width: 280px;
    display: none;
    backdrop-filter: blur(15px);
    font-size: 12px;
    box-shadow: var(--shadow-accent);
}

.satellite-info h3 {
    color: var(--accent-primary);
    margin-bottom: 12px;
    font-size: 16px;
    text-shadow: var(--glow-accent);
}

.info-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
    padding: 2px 0;
}

.info-label {
    color: var(--text-secondary);
}

.info-value {
    color: var(--text-success);
    font-weight: 500;
}

/* Status Indicator */
.status-indicator {
    position: absolute;
    bottom: 160px;
    left: 20px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 9px;
    background: var(--background-panel);
    padding: 4px 8px;
    border-radius: 12px;
    border: 1px solid var(--border-primary);
    backdrop-filter: blur(10px);
    transition: bottom 0.3s ease;
    z-index: 1100;
}

.status-dot {
    width: 8px;
    height: 8px;
    background: var(--text-success);
    border-radius: 50%;
    animation: pulse 2s infinite;
    box-shadow: 0 0 8px var(--text-success);
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* Sidebar */
.sidebar {
    grid-column: 2;
    grid-row: 2;
    background: linear-gradient(180deg, var(--background-panel) 0%, rgba(35, 47, 62, 0.85) 100%);
    border-left: 2px solid var(--border-primary);
    padding: 20px;
    overflow-y: auto;
    backdrop-filter: blur(15px);
    display: block;
    transition: all 0.3s ease;
}

.sidebar.hidden {
    display: none;
}

.sidebar h2 {
    font-size: 16px;
    margin-bottom: 15px;
    color: var(--accent-primary);
    text-shadow: var(--glow-accent);
}

.satellite-header-link {
    text-decoration: none;
    color: var(--accent-primary);
    transition: all 0.2s ease;
    display: inline-block;
}

.satellite-header-link:hover {
    color: var(--amazon-orange-bright);
    text-shadow: 0 0 15px rgba(255, 153, 0, 0.8);
    transform: scale(1.05);
    cursor: pointer;
}

/* Satellite List */
.sat-list {
    list-style: none;
}

.sat-item {
    padding: 12px;
    margin-bottom: 6px;
    background: linear-gradient(135deg, rgba(255, 153, 0, 0.05) 0%, rgba(35, 47, 62, 0.3) 100%);
    border: 1px solid var(--border-secondary);
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 13px;
    border-radius: 6px;
}

.sat-item:hover {
    background: linear-gradient(135deg, var(--background-hover) 0%, rgba(35, 47, 62, 0.5) 100%);
    border-color: var(--border-primary);
    transform: translateX(2px);
}

.sat-item.selected {
    background: linear-gradient(135deg, var(--background-active) 0%, rgba(0, 212, 255, 0.1) 100%);
    border-color: var(--accent-primary);
    box-shadow: var(--glow-accent);
}

.sat-name {
    font-weight: bold;
    color: var(--satellite-active);
    text-shadow: 0 0 5px rgba(0, 212, 255, 0.3);
}

.sat-details {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 3px;
}

/* Launch Panel */
.launch-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100vw;
    max-height: 30vh;
    background: linear-gradient(90deg, var(--background-panel) 0%, rgba(35, 47, 62, 0.9) 50%, var(--background-panel) 100%);
    border-top: 2px solid var(--border-primary);
    padding: 15px 20px;
    overflow-x: auto;
    overflow-y: auto;
    backdrop-filter: blur(15px);
    display: block;
    transition: all 0.3s ease;
    z-index: 1000;
    box-sizing: border-box;
    box-shadow: 0 -5px 20px rgba(0, 212, 255, 0.2);
}

/* Satellite visibility notice within launch panel */
#satellite-visibility-notice {
    position: relative;
    z-index: 1001; /* Ensure it doesn't interfere with controls */
    margin: 10px 0;
    padding: 8px;
    background: rgba(0, 191, 255, 0.2);
    border-left: 3px solid #00BFFF;
    font-size: 11px;
    color: #00BFFF;
}

.launch-panel.hidden {
    display: none;
}

.launch-panel h3 {
    font-size: 14px;
    margin-bottom: 12px;
    color: var(--accent-primary);
    display: inline-block;
    margin-right: 20px;
    text-shadow: var(--glow-accent);
}

.countdown-timer {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding: 6px 18px;
    background: linear-gradient(45deg, rgba(255, 153, 0, 0.15) 0%, rgba(35, 47, 62, 0.3) 100%);
    border: 1px solid var(--border-primary);
    border-radius: 25px;
}

.countdown-label {
    font-size: 12px;
    color: var(--text-secondary);
}

.countdown-value {
    font-size: 16px;
    font-weight: bold;
    color: var(--accent-primary);
    font-family: 'Courier New', monospace;
    text-shadow: var(--glow-accent);
}

#launch-list {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    padding-bottom: 5px;
}

.launch-item {
    min-width: 280px;
    background: linear-gradient(135deg, rgba(255, 153, 0, 0.08) 0%, rgba(35, 47, 62, 0.4) 100%);
    border: 1px solid var(--border-secondary);
    border-left: 4px solid var(--accent-primary);
    padding: 12px;
    border-radius: 5px;
    font-size: 13px;
    transition: all 0.3s ease;
}

.launch-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-accent);
    border-left-color: var(--accent-primary-dark);
}

.launch-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.launch-date {
    color: var(--accent-primary);
    font-weight: bold;
    text-shadow: 0 0 5px rgba(0, 212, 255, 0.3);
}

.launch-provider {
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 12px;
    color: var(--void-black);
    font-weight: 500;
}

.launch-mission {
    font-weight: bold;
    font-size: 12px;
    margin-bottom: 4px;
    color: var(--text-primary);
}

.satellite-count {
    color: #00ff41;
    font-weight: bold;
}

.launch-link {
    text-decoration: none;
    color: inherit;
    display: block;
    transition: transform 0.2s ease;
}

.launch-link:hover .launch-item {
    transform: translateX(5px);
    box-shadow: 0 4px 12px rgba(255, 153, 0, 0.4);
    cursor: pointer;
}

.launch-location {
    font-size: 11px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.launch-status {
    font-size: 11px;
    color: var(--text-success);
    font-weight: 500;
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: rgba(35, 47, 62, 0.3);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--accent-primary) 0%, var(--accent-primary-dark) 100%);
    border-radius: 5px;
    border: 1px solid var(--border-secondary);
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--accent-primary-dark) 0%, var(--accent-primary-darker) 100%);
}

/* ============================================================
   EDUCATIONAL PANELS (Ground Track 2D, Launch Profile)
   Slide-in panels for interactive learning visualizations
   ============================================================ */
.edu-panel {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100vh;
    width: 100vw;
    min-height: unset;
    max-height: unset;
    background: linear-gradient(180deg, rgba(10, 14, 26, 0.99) 0%, rgba(18, 24, 31, 0.99) 100%);
    border-top: none;
    backdrop-filter: blur(20px);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    transform: translateY(110%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: none;
}

.edu-panel.visible {
    transform: translateY(0);
}

.edu-panel-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}

.edu-panel-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--accent-primary);
    text-shadow: 0 0 8px rgba(0, 212, 255, 0.3);
    white-space: nowrap;
}

.edu-panel-body {
    flex: 1;
    padding: 10px 20px;
    overflow: hidden;
    position: relative;
}

.edu-panel-body canvas {
    width: 100%;
    height: 100%;
    display: block;
}

.edu-panel-footer {
    padding: 6px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    flex-shrink: 0;
}

.edu-source {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.3);
    font-style: italic;
}

.panel-close-btn {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.6);
    width: 24px;
    height: 24px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    margin-left: auto;
}

.panel-close-btn:hover {
    background: rgba(255, 80, 80, 0.2);
    border-color: rgba(255, 80, 80, 0.5);
    color: #ff5555;
}

/* Mode tabs (Launch Profile: Ascent / Orbit Raising) */
.profile-mode-tabs {
    display: flex;
    gap: 2px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 14px;
    padding: 2px;
}

.mode-tab {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.55);
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 10px;
    cursor: pointer;
    transition: all 0.2s;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.mode-tab:hover {
    color: var(--accent-primary);
}

.mode-tab.active {
    background: rgba(0, 212, 255, 0.2);
    color: var(--accent-primary);
    font-weight: 600;
}

/* Strategy row (Orbit Raising) */
.raising-strategy {
    display: flex;
    gap: 4px;
}

/* Vehicle selector (Launch Profile) */
.vehicle-selector {
    display: flex;
    gap: 4px;
}

.vehicle-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.6);
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 10px;
    cursor: pointer;
    transition: all 0.2s;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.vehicle-btn:hover {
    background: rgba(0, 212, 255, 0.1);
    border-color: rgba(255, 153, 0, 0.4);
    color: var(--accent-primary);
}

.vehicle-btn.active {
    background: rgba(0, 212, 255, 0.2);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    font-weight: 600;
}

.profile-play-btn {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.7);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.profile-play-btn:hover {
    background: rgba(0, 212, 255, 0.15);
    border-color: rgba(0, 212, 255, 0.5);
}

/* Playground controls (Ground Track) */
.edu-panel-content {
    display: flex;
    flex: 1;
    overflow: hidden;
}

.playground-controls {
    width: 220px;
    min-width: 200px;
    padding: 12px 14px;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    overflow-y: auto;
    flex-shrink: 0;
}

.slider-group {
    margin-bottom: 12px;
}

.slider-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3px;
}

.slider-name {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.7);
}

.slider-value {
    font-size: 10px;
    color: var(--satellite-active);
    font-weight: 600;
    font-family: monospace;
}

.playground-slider {
    width: 100%;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}

.playground-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--satellite-active);
    border: 2px solid rgba(255, 255, 255, 0.8);
    cursor: grab;
}

.playground-slider::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--satellite-active);
    border: 2px solid rgba(255, 255, 255, 0.8);
    cursor: grab;
}

.slider-info {
    font-size: 8px;
    color: rgba(255, 255, 255, 0.3);
    margin-top: 2px;
    line-height: 1.3;
}

.playground-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.playground-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.7);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 9px;
    cursor: pointer;
    transition: all 0.2s;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.playground-btn:hover {
    background: rgba(0, 212, 255, 0.15);
    border-color: rgba(0, 212, 255, 0.5);
    color: #fff;
}

/* Ground Track info box */
.gt-info-box {
    margin-top: 12px;
    padding: 8px 10px;
    background: rgba(0, 212, 255, 0.05);
    border: 1px solid rgba(0, 212, 255, 0.15);
    border-radius: 4px;
}

.gt-info-line {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.7);
    font-family: monospace;
    line-height: 1.6;
}

.gt-edu-note {
    margin-top: 10px;
    font-size: 9px;
    color: rgba(255, 255, 255, 0.4);
    line-height: 1.4;
    font-style: italic;
}

.gt-view-toggle.active {
    background: rgba(0, 212, 255, 0.2);
    border-color: rgba(0, 212, 255, 0.6);
    color: var(--satellite-active);
    font-weight: 600;
}

/* Ground Track shell presets (FCC filing orbital shells) */
.gt-preset-block {
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.gt-preset-title {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 6px;
}

.gt-preset-title span {
    font-size: 8px;
    color: rgba(255, 255, 255, 0.3);
}

.gt-preset-grid {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.gt-preset-btn {
    text-align: left;
    font-family: monospace;
    font-size: 9px;
}

.gt-preset-btn.gt-preset-all {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    text-align: center;
    margin-top: 2px;
}

.gt-preset-btn.active {
    background: rgba(0, 212, 255, 0.18);
    border-color: rgba(0, 212, 255, 0.6);
    color: #fff;
    font-weight: 600;
}

/* Sliders that don't apply in "all shells" mode */
.slider-group.gt-slider-disabled {
    opacity: 0.35;
    pointer-events: none;
}

/* Per-shell readout rows shown in "all shells" mode */
.gt-shell-row {
    display: flex;
    align-items: center;
    gap: 6px;
    line-height: 1.7;
}

.gt-shell-swatch {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    flex-shrink: 0;
}

.gt-shell-text {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.75);
    font-family: monospace;
}

.gt-shell-total {
    margin-top: 6px;
    padding-top: 5px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 8px;
    color: rgba(255, 255, 255, 0.4);
}

.gt-proj-toggle.active {
    background: rgba(0, 212, 255, 0.2);
    border-color: rgba(255, 153, 0, 0.6);
    color: var(--accent-primary);
    font-weight: 600;
}


/* Ground Track Playground architecture scorecard */
.gt-scorecard {
    margin-top: 10px;
    padding: 10px;
    border: 1px solid rgba(0, 212, 255, 0.18);
    border-radius: 8px;
    background: rgba(4, 18, 30, 0.72);
}

.gt-scorecard-title,
.gt-cost-title {
    color: var(--accent-primary);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: 9px;
    font-weight: 700;
    margin-bottom: 7px;
}

.gt-scorecard-title span {
    color: var(--text-secondary);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    margin-left: 4px;
}

.gt-score-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.gt-score-metric {
    min-width: 0;
    padding: 7px;
    border-radius: 6px;
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.055);
}

.gt-score-metric span,
.gt-score-metric small {
    display: block;
    color: var(--text-secondary);
    font-size: 8px;
    line-height: 1.25;
}

.gt-score-metric strong {
    display: block;
    margin: 2px 0;
    color: #e9fbff;
    font-size: 15px;
    line-height: 1.1;
}

.gt-cost-title {
    margin-top: 11px;
}

.gt-cost-inputs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
}

.gt-cost-inputs label {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    color: var(--text-secondary);
    font-size: 8px;
}

.gt-cost-inputs label > span {
    opacity: .7;
}

.gt-cost-inputs input {
    width: 100%;
    min-width: 0;
    padding: 5px 6px;
    border: 1px solid rgba(0, 212, 255, .22);
    border-radius: 5px;
    background: #071522;
    color: #dffaff;
    font-size: 10px;
}

.gt-cost-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px 10px;
    margin-top: 8px;
}

.gt-cost-summary div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
    padding-top: 4px;
    border-top: 1px solid rgba(255,255,255,.05);
}

.gt-cost-summary span {
    color: var(--text-secondary);
    font-size: 8px;
}

.gt-cost-summary strong {
    color: #e9fbff;
    font-size: 10px;
}

.gt-score-tradeoffs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 9px;
}

.gt-score-tradeoffs span {
    padding: 3px 5px;
    border-radius: 4px;
    background: rgba(0, 212, 255, .07);
    color: rgba(220,250,255,.72);
    font-size: 7px;
}

.gt-score-note {
    margin-top: 8px;
    color: rgba(255,255,255,.42);
    font-size: 7px;
    line-height: 1.4;
}

@media (max-width: 768px) {
    .gt-score-grid,
    .gt-cost-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .gt-cost-inputs {
        grid-template-columns: 1fr;
    }
}

/* Launch Profile Tooltip */
.launch-tooltip {
    position: absolute;
    background: rgba(18, 24, 31, 0.95);
    border: 1px solid rgba(255, 153, 0, 0.4);
    border-radius: 6px;
    padding: 8px 12px;
    max-width: 240px;
    pointer-events: none;
    z-index: 3000;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

.tooltip-header {
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 3px;
}

.tooltip-time {
    font-size: 10px;
    color: var(--accent-primary);
    margin-bottom: 4px;
    font-family: monospace;
}

.tooltip-desc {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.4;
}

.tooltip-track {
    font-size: 9px;
    color: #FF6633;
    margin-top: 4px;
}

/* ============================================================
   MOBILE / PORTRAIT EXPERIENCE
   Injected mobile chrome (.m-*) is hidden on desktop and only
   activated inside the max-width:768px media query below.
   ============================================================ */
.m-toolbar,
.m-sheet,
.m-backdrop,
.m-drawer-close,
.m-alt-popup { display: none; }

@media (max-width: 768px) {
    :root {
        --m-header-h: 52px;
        --m-toolbar-h: 62px;
    }

    html, body {
        height: 100dvh;
        overflow: hidden;
    }

    /* Layout: header | globe | toolbar.
       The globe row is the space BETWEEN the header and the toolbar,
       so the Earth renders centered in the visible area. */
    .container,
    .container.with-sidebar,
    .container.with-launch-panel,
    .container.with-sidebar.with-launch-panel {
        /* minmax(0, 1fr) lets the column shrink below its content's min-width,
           preventing the wide header from blowing out the grid horizontally. */
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: var(--m-header-h) 1fr var(--m-toolbar-h) !important;
        height: 100dvh !important;
        width: 100vw;
        max-width: 100vw;
        overflow-x: hidden;
    }

    /* Compact header */
    .header {
        padding: 6px 12px;
        min-height: var(--m-header-h);
        gap: 8px;
        overflow: hidden;
        min-width: 0;
    }
    .left-section {
        gap: 14px;
        min-width: 0;
        flex: 1;
    }
    .logo {
        font-size: 12px;
        letter-spacing: 0.5px;
        line-height: 1.1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 44vw;
    }
    .stats { gap: 14px; }
    .stat-value { font-size: 16px; }
    .stat-item div:last-child { font-size: 8px; }
    .clock-container { display: none; }

    /* Earth view occupies the middle row (globe centers here) */
    .earth-view,
    .container:not(.with-sidebar) .earth-view,
    .container:not(.with-launch-panel) .earth-view {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }

    /* Retire desktop floating chrome on mobile */
    .container .controls-compact { display: none !important; }
    .altitude-indicator { display: none !important; }
    .status-indicator { display: none !important; }
    .debug-info-link { top: 6px; left: 6px; }

    /* Selected-satellite popup becomes a centered card under the header */
    .container #satellite-info,
    #satellite-info {
        top: calc(var(--m-header-h) + 8px) !important;
        left: 10px !important;
        right: 10px !important;
        min-width: 0 !important;
        width: auto !important;
        max-width: none !important;
    }

    /* ---------- Bottom navigation toolbar ---------- */
    .m-toolbar {
        display: flex;
        grid-column: 1;
        grid-row: 3;
        align-items: stretch;
        justify-content: space-around;
        gap: 2px;
        padding: 4px 6px calc(4px + env(safe-area-inset-bottom));
        background: linear-gradient(0deg, var(--panel-base) 0%, var(--stellar-blue) 100%);
        border-top: 2px solid var(--border-primary);
        box-shadow: 0 -4px 20px rgba(255, 153, 0, 0.18);
        z-index: 1200;
    }
    .m-btn {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        min-width: 0;
        min-height: 48px;
        border: none;
        background: transparent;
        color: var(--text-secondary);
        cursor: pointer;
        border-radius: 10px;
        transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
        -webkit-tap-highlight-color: transparent;
    }
    .m-btn:active {
        background: var(--background-active);
        transform: scale(0.94);
    }
    .m-btn .m-ico {
        font-size: 20px;
        line-height: 1;
        white-space: nowrap;
    }
    .m-btn .m-lbl {
        font-size: 9px;
        font-weight: 600;
        letter-spacing: 0.3px;
        text-transform: uppercase;
        white-space: nowrap;
    }
    .m-btn.m-active { color: var(--accent-primary); }

    /* ---------- "More" sheet ---------- */
    .m-sheet {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: calc(var(--m-toolbar-h) + env(safe-area-inset-bottom));
        z-index: 1250;
        background: var(--background-panel);
        border-top: 2px solid var(--border-primary);
        backdrop-filter: blur(15px);
        padding: 14px 16px calc(16px + env(safe-area-inset-bottom));
        transform: translateY(130%);
        transition: transform 0.25s ease;
        box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.5);
    }
    .m-sheet.m-open { transform: translateY(0); }
    .m-sheet-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
    }
    .m-sheet .m-btn {
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid var(--border-secondary);
        min-height: 64px;
        color: var(--text-primary);
    }
    .m-sheet .m-btn .m-ico { font-size: 22px; }

    /* ---------- Shared backdrop ---------- */
    .m-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.62);
        /* Avoid iOS compositing blur leaking across transformed fixed drawers. */
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease;
        z-index: 1150;
    }
    .m-backdrop.m-open {
        opacity: 1;
        pointer-events: auto;
    }

    /* ---------- Satellite list as a right-side drawer ---------- */
    .sidebar {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: auto !important;
        width: 86% !important;
        max-width: 360px !important;
        grid-column: auto !important;
        grid-row: auto !important;
        border-left: 2px solid var(--border-primary);
        transform: translateX(102%);
        transition: transform 0.28s ease;
        z-index: 1300 !important;
        padding-top: calc(18px + env(safe-area-inset-top));
        /* Mobile drawer should be a readable surface, not desktop glass. */
        background: var(--background-panel) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        opacity: 1 !important;
    }
    .sidebar.m-open { transform: translateX(0); }
    .sidebar.m-pinned {
        /* Persistent Sats panel: scroll/select while keeping globe interactive. */
        pointer-events: auto;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
    }

    /* ---------- Launch panel as a bottom-sheet drawer ---------- */
    .launch-panel {
        max-height: 68vh !important;
        transform: translateY(102%);
        transition: transform 0.28s ease;
        z-index: 1300 !important;
        padding-bottom: calc(16px + env(safe-area-inset-bottom));
    }
    .launch-panel.m-open { transform: translateY(0); }
    #launch-list { flex-direction: column; }
    .launch-item { min-width: 0; width: 100%; }

    /* Educational panels on mobile */
    .edu-panel {
        height: 100vh;
        height: 100dvh;
    }
    .edu-panel-header {
        flex-wrap: wrap;
        gap: 6px;
        padding: 8px 12px;
    }
    .edu-panel-content {
        flex-direction: column;
    }
    .playground-controls {
        width: 100%;
        min-width: 0;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        padding: 8px 12px;
        max-height: 150px;
        overflow-y: auto;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    .slider-group {
        flex: 1;
        min-width: 100px;
        margin-bottom: 0;
    }
    .slider-info {
        display: none;
    }
    .gt-edu-note {
        display: none;
    }
    .vehicle-selector {
        order: 2;
        width: 100%;
        justify-content: center;
    }
    .vehicle-btn {
        font-size: 9px;
        padding: 2px 8px;
    }

    /* Drawer close buttons */
    .m-drawer-close {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 10px;
        right: 10px;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: var(--background-active);
        border: 1px solid var(--border-primary);
        color: var(--text-primary);
        font-size: 18px;
        line-height: 1;
        cursor: pointer;
        z-index: 5;
    }

    /* ---------- Deployment altitudes popup ---------- */
    .m-alt-popup {
        display: flex;
        flex-direction: column;
        position: fixed;
        left: 50%;
        bottom: calc(var(--m-toolbar-h) + env(safe-area-inset-bottom) + 8px);
        transform: translateX(-50%) translateY(16px);
        width: min(92vw, 340px);
        max-height: 60vh;
        background: var(--background-secondary, #0a1628);
        border: 1px solid var(--border-primary, rgba(255,153,0,0.3));
        border-radius: 12px;
        box-shadow: 0 8px 32px rgba(0,0,0,0.6);
        z-index: 1400;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.22s ease, transform 0.22s ease;
        overflow: hidden;
    }
    .m-alt-popup.m-open {
        opacity: 1;
        pointer-events: auto;
        transform: translateX(-50%) translateY(0);
    }
    .m-alt-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 14px 10px;
        border-bottom: 1px solid var(--border-primary, rgba(255,153,0,0.2));
        font-size: 13px;
        font-weight: 600;
        color: var(--amazon-orange, #FF9900);
        letter-spacing: 0.04em;
        flex-shrink: 0;
    }
    .m-alt-close {
        background: none;
        border: none;
        color: var(--text-secondary, #aaa);
        font-size: 18px;
        cursor: pointer;
        padding: 0 2px;
        line-height: 1;
    }
    .m-alt-body {
        padding: 12px 14px;
        overflow-y: auto;
        font-size: 12px;
        color: var(--text-primary, #e0e0e0);
        /* Mirror the desktop altitude-indicator styles */
    }
    .m-alt-body h4 {
        margin: 0 0 8px;
        font-size: 12px;
        color: var(--amazon-orange, #FF9900);
        text-transform: uppercase;
        letter-spacing: 0.06em;
    }
    .m-alt-body .altitude-item {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 4px;
    }
    .m-alt-body .altitude-marker {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        flex-shrink: 0;
    }
}

/* Landscape phones: reclaim vertical space */
@media (max-width: 900px) and (orientation: landscape) and (pointer: coarse) {
    .clock-container { display: none; }
}

/* Additional Enhancements */
.glow-text {
    text-shadow: 0 0 10px currentColor;
}

.panel-glow {
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Satellite-specific enhancements */
.satellite-active-marker {
    color: var(--satellite-active);
    text-shadow: 0 0 8px rgba(0, 212, 255, 0.6);
}

.satellite-selected-marker {
    color: var(--satellite-selected);
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.8);
}

.satellite-inactive-marker {
    color: var(--satellite-inactive);
    opacity: 0.6;
}

/* Celestrak link button in settings */
.celestrak-link-btn {
    background: rgba(0, 255, 255, 0.1);
    border: 1px solid rgba(0, 255, 255, 0.3);
    color: #0ff;
    padding: 8px 15px;
    border-radius: 3px;
    cursor: pointer;
    margin-top: 10px;
    width: 100%;
    font-size: 13px;
    transition: all 0.2s ease;
}

.celestrak-link-btn:hover {
    background: rgba(0, 255, 255, 0.2);
    border-color: rgba(0, 255, 255, 0.5);
}

.celestrak-link-btn:active {
    background: rgba(0, 255, 255, 0.15);
}

/* ---------- Orbital regime context ---------- */
.version-badge {
    font-size: 10px;
    padding: 3px 7px;
    border: 1px solid #00d4ff;
    border-radius: 10px;
    color: #00d4ff;
    margin-left: 8px;
}
.orbit-regime-context {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 7px;
    min-height: 20px;
}
.orbit-regime-badge {
    flex: 0 0 auto;
    padding: 2px 7px;
    border-radius: 999px;
    border: 1px solid rgba(0, 212, 255, 0.45);
    background: rgba(0, 212, 255, 0.10);
    color: #9beeff;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .08em;
}
.orbit-regime-detail {
    min-width: 0;
    color: rgba(233, 251, 255, 0.68);
    font-size: 9px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------- Launch vehicle catalog selectors ---------- */
.vehicle-selector {
    display: flex;
    gap: 6px;
    align-items: center;
}
.vehicle-catalog-select {
    min-width: 120px;
    max-width: 190px;
    background: rgba(7, 21, 34, 0.96);
    color: var(--text-primary);
    border: 1px solid rgba(0, 212, 255, 0.32);
    border-radius: 8px;
    padding: 5px 8px;
    font-size: 10px;
    font-family: inherit;
}
.vehicle-catalog-select:focus {
    outline: 1px solid rgba(0, 212, 255, 0.7);
}

/* ---------- Live Events ---------- */
.events-panel {
    position: absolute;
    right: 16px;
    top: 76px;
    width: min(390px, calc(100vw - 32px));
    max-height: calc(100vh - 160px);
    display: flex;
    flex-direction: column;
    background: rgba(5, 14, 24, 0.96);
    border: 1px solid rgba(0, 212, 255, 0.35);
    border-radius: 12px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.5);
    z-index: 1100;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity .18s ease, transform .18s ease;
}
.events-panel.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
.events-panel-header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 14px 11px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.events-panel-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}
.events-panel-subtitle {
    margin-top: 3px;
    font-size: 9px;
    line-height: 1.35;
    color: var(--text-secondary);
}
.events-list {
    overflow-y: auto;
    padding: 10px;
}
.events-empty {
    min-height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 22px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 11px;
}
.events-empty strong {
    color: var(--accent-primary);
    font-size: 13px;
}
.event-card {
    width: 100%;
    text-align: left;
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 9px;
    padding: 10px 11px;
    color: var(--text-primary);
    margin-bottom: 7px;
    cursor: pointer;
}
.event-card-top {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}
.event-type {
    font-size: 9px;
    color: var(--accent-primary);
    letter-spacing: .05em;
}
.event-confidence {
    font-size: 8px;
    color: var(--text-secondary);
}
.event-object {
    margin-top: 5px;
    font-size: 12px;
    font-weight: 650;
}
.event-summary {
    margin-top: 3px;
    font-size: 10px;
    color: var(--text-secondary);
}

@media (max-width: 768px) {
    .version-badge { display: none; }
    .logo {
        max-width: 34vw;
    }
    #v2-constellation-selector {
        min-width: min(88vw, 354px) !important;
    }
    .orbit-regime-context {
        margin-top: 6px;
    }
    .vehicle-selector {
        width: 100%;
        display: grid;
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.35fr);
        gap: 6px;
    }
    .vehicle-catalog-select {
        width: 100%;
        min-width: 0;
        max-width: none;
        font-size: 11px;
        padding: 6px 7px;
    }
    .events-panel {
        position: fixed;
        left: 10px;
        right: 10px;
        top: calc(var(--m-header-h) + 8px);
        width: auto;
        max-height: calc(100dvh - var(--m-header-h) - var(--m-toolbar-h) - 24px);
        z-index: 1420;
    }
}


/* Support Sat Tracker */
.support-panel { position:absolute; right:16px; top:76px; width:min(390px,calc(100vw - 32px)); background:rgba(5,14,24,.97); border:1px solid rgba(0,212,255,.35); border-radius:12px; z-index:1110; opacity:0; pointer-events:none; transform:translateY(-8px); transition:opacity .18s ease,transform .18s ease; }
.support-panel.visible { opacity:1; pointer-events:auto; transform:translateY(0); }
.support-panel-header { display:flex; justify-content:space-between; gap:12px; padding:14px; border-bottom:1px solid rgba(255,255,255,.08); }
.support-panel-title { font-size:14px; font-weight:700; }
.support-panel-subtitle { margin-top:3px; font-size:9px; line-height:1.4; color:var(--text-secondary); }
.support-panel-body { padding:16px; font-size:11px; line-height:1.55; color:var(--text-secondary); }
.support-action { display:flex; flex-direction:column; gap:2px; margin:14px 0 10px; padding:12px 14px; border-radius:9px; background:rgba(0,212,255,.12); border:1px solid rgba(0,212,255,.4); color:#e9fbff; text-decoration:none; font-weight:700; }
.support-action span { color:#7ddcff; font-size:12px; }
.support-note { font-size:9px; color:rgba(233,251,255,.5); }
@media (max-width:768px) { .support-panel { position:fixed; left:10px; right:10px; top:calc(var(--m-header-h) + 8px); width:auto; z-index:1420; } }

.support-suggested { margin-top:12px; color:#e9fbff; font-size:11px; }
.support-levels { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin:9px 0 4px; }
.support-levels > div { display:flex; flex-direction:column; gap:3px; padding:9px 7px; border:1px solid rgba(255,255,255,.09); border-radius:8px; text-align:center; }
.support-levels strong { color:#e9fbff; font-size:14px; }
.support-levels span { color:var(--text-secondary); font-size:8px; line-height:1.3; }
.support-levels .support-level-featured { border-color:rgba(0,212,255,.48); background:rgba(0,212,255,.08); }
@media (max-width:420px) { .support-levels { grid-template-columns:1fr; } .support-levels > div { text-align:left; } }

.feature-request-block { margin-top:18px; padding-top:15px; border-top:1px solid rgba(255,255,255,.08); }
.feature-request-title { font-size:13px; font-weight:700; }
.feature-request-copy { margin:5px 0 10px; font-size:9px; color:var(--text-secondary); }
#feature-request-form { display:flex; flex-direction:column; gap:7px; }
.feature-request-row { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
#feature-request-form input,#feature-request-form textarea { width:100%; padding:8px 9px; border-radius:7px; border:1px solid rgba(0,212,255,.22); background:#071522; color:#e9fbff; font:inherit; }
#feature-request-form textarea { min-height:62px; resize:vertical; }
.feature-request-submit { padding:9px 12px; border-radius:8px; border:1px solid rgba(0,212,255,.45); background:rgba(0,212,255,.12); color:#e9fbff; font-weight:700; cursor:pointer; }
.feature-request-status { min-height:16px; font-size:9px; color:#7ddcff; }
.request-item { padding:12px 0; border-bottom:1px solid #183348; }
.request-idea { margin-top:8px; }
@media (max-width:420px) { .feature-request-row { grid-template-columns:1fr; } }

/* Public desktop navigation: visualization controls stay immediate; content is grouped. */
.toolbar-menu { position:relative; display:inline-flex; }
.toolbar-menu-trigger { height:34px; padding:0 10px; border:1px solid rgba(0,212,255,.35); border-radius:17px; background:rgba(7,21,34,.92); color:#dffaff; font-size:10px; font-weight:700; letter-spacing:.04em; cursor:pointer; }
.toolbar-menu-popover { position:absolute; right:0; bottom:42px; min-width:190px; padding:6px; border:1px solid rgba(0,212,255,.35); border-radius:9px; background:rgba(5,14,24,.98); box-shadow:0 10px 28px rgba(0,0,0,.45); opacity:0; visibility:hidden; transform:translateY(5px); transition:.15s ease; }
.toolbar-menu:hover .toolbar-menu-popover,.toolbar-menu:focus-within .toolbar-menu-popover { opacity:1; visibility:visible; transform:translateY(0); }
.toolbar-menu-item { display:block; width:100%; padding:9px 10px; border:0; border-radius:6px; background:transparent; color:#dffaff; text-align:left; font:inherit; font-size:10px; cursor:pointer; }
.toolbar-menu-item:hover,.toolbar-menu-item:focus { background:rgba(0,212,255,.12); outline:none; }
@media (max-width:768px) { .toolbar-menu { display:none; } }

.build-badge { margin-left:7px; color:rgba(190,225,235,.62); font-size:8px; font-weight:500; letter-spacing:.04em; vertical-align:middle; white-space:nowrap; }
@media (max-width:768px) { .build-badge { display:none; } }

.gt-example-edit { display:grid; grid-template-columns:1fr 1fr; gap:5px; margin:-3px 0 7px; padding:0 3px; }
.gt-example-edit label { display:flex; align-items:center; gap:4px; font-size:8px; color:var(--text-secondary); }
.gt-example-edit input { min-width:0; width:100%; padding:4px 5px; border:1px solid rgba(0,212,255,.22); border-radius:5px; background:#071522; color:#dffaff; font:inherit; font-size:9px; }

.history-panel { position:fixed; z-index:10020; top:76px; right:18px; width:min(760px,calc(100vw - 36px)); max-height:calc(100vh - 110px); overflow:auto; padding:16px; border:1px solid rgba(0,212,255,.35); border-radius:12px; background:rgba(5,14,24,.97); box-shadow:0 18px 50px rgba(0,0,0,.5); opacity:0; visibility:hidden; transform:translateY(-6px); transition:.16s ease; color:#dffaff; }
.history-panel.visible { opacity:1; visibility:visible; transform:translateY(0); }
.history-panel-header { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.history-panel-kicker { font-size:9px; letter-spacing:.16em; opacity:.6; }
.history-panel-title { margin-top:3px; font-size:17px; font-weight:800; }
.history-summary { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:14px 0; }
.history-summary>div { padding:10px; border:1px solid rgba(0,212,255,.16); border-radius:8px; background:rgba(0,212,255,.05); }
.history-summary strong,.history-summary span { display:block; }
.history-summary strong { font-size:18px; } .history-summary span { margin-top:3px; font-size:9px; opacity:.65; }
.history-chart-wrap { padding:10px; border:1px solid rgba(0,212,255,.14); border-radius:8px; }
.history-chart-title { font-size:11px; font-weight:700; margin-bottom:6px; }
#history-chart { width:100%; height:180px; }
.history-note,.history-empty { font-size:9px; opacity:.62; margin-top:6px; }
.history-columns { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px; }
.history-columns h3 { font-size:11px; margin:0 0 6px; }
.history-object { padding:7px 8px; margin-bottom:5px; border-radius:6px; background:rgba(255,255,255,.035); }
.history-object strong,.history-object span { display:block; } .history-object strong { font-size:10px; } .history-object span { font-size:8px; opacity:.62; margin-top:2px; }
@media(max-width:768px){ .history-panel{top:58px;right:8px;width:calc(100vw - 16px);max-height:calc(100vh - 74px)} .history-summary{grid-template-columns:1fr 1fr}.history-columns{grid-template-columns:1fr} }

.events-filters { display:flex; gap:10px; align-items:end; flex-wrap:wrap; margin:10px 0 12px; }
.events-filters label { display:flex; flex-direction:column; gap:4px; font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:rgba(220,250,255,.65); }
.events-filters select { min-width:150px; padding:7px 9px; border:1px solid rgba(0,212,255,.28); border-radius:7px; background:rgba(3,12,20,.92); color:#dffaff; }
.events-filter-count { margin-left:auto; padding-bottom:7px; font-size:11px; color:rgba(220,250,255,.6); }
@media (max-width:768px) {
  .events-filters { align-items:stretch; }
  .events-filters label { flex:1 1 140px; }
  .events-filters select { width:100%; min-width:0; }
  .events-filter-count { width:100%; margin-left:0; padding-bottom:0; }
}


/* Unified Ground Track Playground */
.gt-playground-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:10px 14px;
    border-bottom:1px solid rgba(255,255,255,.06);
    background:rgba(3,12,20,.62);
    flex-wrap:wrap;
}

.gt-mode-switch,
.gt-shared-toolbar {
    display:flex;
    align-items:center;
    gap:6px;
    flex-wrap:wrap;
}

.gt-mode-btn {
    padding:6px 10px;
    font-size:10px;
}

.gt-mode-btn.active {
    background:rgba(0,212,255,.18);
    border-color:rgba(0,212,255,.62);
    color:#fff;
    font-weight:700;
}

.gt-shared-toolbar .playground-btn {
    padding:5px 8px;
}

.gt-shared-toolbar .playground-btn:disabled {
    opacity:.35;
    cursor:not-allowed;
}

.gt-toolbar-sep {
    width:1px;
    height:22px;
    background:rgba(255,255,255,.09);
    margin:0 2px;
}

.gt-playground-layout {
    display:grid;
    grid-template-columns:240px minmax(0,1fr);
    min-height:0;
}

.gt-shell-mode .gt-playground-layout {
    grid-template-columns:280px minmax(0,1fr) 310px;
}

.gt-playground-layout .playground-controls {
    width:auto;
    min-width:0;
}

.gt-playground-layout .edu-panel-body {
    min-width:0;
    min-height:360px;
    position:relative;
}

.gt-mode-controls {
    display:none;
}

.gt-mode-controls.active {
    display:block;
}

.gt-control-heading {
    color:#e9fbff;
    font-size:12px;
    font-weight:700;
    margin-bottom:4px;
}

.gt-control-copy {
    color:rgba(220,250,255,.5);
    font-size:9px;
    line-height:1.4;
    margin-bottom:12px;
}

.gt-primary-action {
    width:100%;
    justify-content:center;
    margin-bottom:12px;
    padding:7px 8px;
}

.gt-shell-editor-list {
    display:flex;
    flex-direction:column;
    gap:9px;
    margin-bottom:10px;
}

.gt-shell-editor {
    padding:9px;
    border:1px solid rgba(0,212,255,.14);
    border-radius:7px;
    background:rgba(255,255,255,.025);
}

.gt-shell-editor-head {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:7px;
    color:#dffaff;
    font-size:10px;
}

.gt-example-edit {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:6px;
}

.gt-example-edit label {
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:3px;
    color:rgba(220,250,255,.58);
    font-size:8px;
}

.gt-example-edit input[type="number"] {
    width:100%;
    min-width:0;
    padding:5px 6px;
    border:1px solid rgba(0,212,255,.2);
    border-radius:5px;
    background:#071522;
    color:#dffaff;
    font-size:9px;
}

.gt-shell-count,
.gt-shell-check,
.gt-remove-shell {
    grid-column:1 / -1;
}

.gt-shell-count {
    color:rgba(220,250,255,.72);
    font-size:9px;
}

.gt-shell-check {
    flex-direction:row !important;
    align-items:center;
}

.gt-scorecard-column {
    min-width:0;
    overflow-y:auto;
    padding:10px 12px;
    border-left:1px solid rgba(255,255,255,.06);
    background:rgba(3,12,20,.46);
}

.gt-scorecard-column .gt-scorecard {
    margin-top:0;
}

.gt-single-mode .gt-scorecard-column {
    display:none !important;
}

@media (max-width: 1100px) {
    .gt-shell-mode .gt-playground-layout {
        grid-template-columns:250px minmax(0,1fr) 280px;
    }
    .gt-score-grid {
        grid-template-columns:1fr;
    }
}

@media (max-width: 768px) {
    .gt-playground-header {
        align-items:stretch;
    }
    .gt-mode-switch,
    .gt-shared-toolbar {
        width:100%;
    }
    .gt-mode-switch .playground-btn {
        flex:1;
    }
    .gt-toolbar-sep {
        display:none;
    }
    .gt-playground-layout,
    .gt-shell-mode .gt-playground-layout {
        display:flex;
        flex-direction:column;
        overflow-y:auto;
    }
    .gt-playground-layout .playground-controls {
        width:100%;
        border-right:0;
        border-bottom:1px solid rgba(255,255,255,.06);
        overflow:visible;
    }
    .gt-playground-layout .edu-panel-body {
        min-height:360px;
        height:44vh;
        flex:none;
    }
    .gt-scorecard-column {
        border-left:0;
        border-top:1px solid rgba(255,255,255,.06);
        overflow:visible;
    }
    .gt-score-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

.gt-speed-control {
    display:flex;
    align-items:center;
    gap:5px;
    padding:4px 6px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:4px;
    background:rgba(255,255,255,.04);
    color:rgba(255,255,255,.7);
    font-size:9px;
}
.gt-speed-control select {
    border:0;
    outline:0;
    background:#071522;
    color:#dffaff;
    font-size:9px;
    border-radius:3px;
    padding:2px 4px;
}

.history-toolbar {
    display:flex;
    align-items:center;
    gap:8px;
    margin:10px 0 12px;
}
.history-toolbar label {
    color:rgba(220,250,255,.58);
    font-size:9px;
    text-transform:uppercase;
    letter-spacing:.06em;
}
.history-toolbar select {
    min-width:220px;
    padding:7px 9px;
    border:1px solid rgba(0,212,255,.28);
    border-radius:7px;
    background:rgba(3,12,20,.92);
    color:#dffaff;
}
@media (max-width:768px) {
    .history-toolbar { align-items:stretch; flex-direction:column; }
    .history-toolbar select { width:100%; min-width:0; }
}

.supporter-pin-popup {
    position:fixed;
    z-index:12050;
    width:260px;
    max-width:calc(100vw - 24px);
    padding:12px 14px;
    border:1px solid rgba(255,213,74,.55);
    border-radius:10px;
    background:rgba(5,14,24,.96);
    box-shadow:0 14px 36px rgba(0,0,0,.5);
    color:#e9fbff;
    opacity:0;
    visibility:hidden;
    transform:translateY(4px);
    transition:.14s ease;
    pointer-events:none;
}
.supporter-pin-popup.visible {
    opacity:1;
    visibility:visible;
    transform:translateY(0);
    pointer-events:auto;
}
.supporter-pin-popup-close {
    position:absolute;
    top:6px;
    right:8px;
    border:0;
    background:transparent;
    color:rgba(255,255,255,.62);
    font-size:18px;
    cursor:pointer;
}
.supporter-pin-popup-kicker {
    padding-right:24px;
    color:#FFD54A;
    font-size:9px;
    font-weight:700;
    letter-spacing:.08em;
}
.supporter-pin-popup-name {
    margin-top:5px;
    font-size:13px;
    font-weight:700;
}
.supporter-pin-popup-coords {
    margin-top:3px;
    color:rgba(220,250,255,.58);
    font-size:9px;
    font-family:monospace;
}
.supporter-pin-popup-note {
    margin-top:8px;
    color:rgba(220,250,255,.68);
    font-size:9px;
    line-height:1.45;
}

/* Support panel must remain usable as supporter/feature sections grow */
.support-panel {
    max-height:calc(100vh - 96px);
    display:flex;
    flex-direction:column;
}
.support-panel-header {
    flex:0 0 auto;
}
.support-panel-body {
    overflow-y:auto;
    overscroll-behavior:contain;
    min-height:0;
}
@media (max-width:768px) {
    .support-panel {
        max-height:calc(100vh - var(--m-header-h) - 18px);
    }
}

/* Launch area owns its own visibility control */
.launch-panel-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}
.launch-panel-header h3 {
    margin:0;
}
.launch-schedule-toggle {
    display:flex;
    align-items:center;
    gap:6px;
    color:rgba(220,250,255,.58);
    font-size:9px;
    text-transform:uppercase;
    letter-spacing:.05em;
}
#launch-schedule-toggle {
    min-width:44px;
    padding:4px 8px;
}

.supporter-field-help {
    position:relative;
    display:block;
    margin-bottom:9px;
}
.supporter-field-help > span {
    display:block;
    margin-bottom:4px;
    color:rgba(220,250,255,.62);
    font-size:9px;
}
.supporter-field-help > span em {
    opacity:.65;
    font-style:normal;
}
.supporter-field-help input {
    width:100%;
}
.supporter-field-tooltip {
    display:block;
    max-height:0;
    overflow:hidden;
    opacity:0;
    margin-top:0;
    color:rgba(220,250,255,.62);
    font-size:8px;
    line-height:1.35;
    transition:opacity .14s ease,max-height .14s ease,margin-top .14s ease;
}
.supporter-field-help:hover .supporter-field-tooltip,
.supporter-field-help:focus-within .supporter-field-tooltip {
    max-height:36px;
    opacity:1;
    margin-top:4px;
}


/* First-visit welcome — tracker stays visible behind the introduction */
.welcome-overlay {
    position:fixed;
    inset:0;
    z-index:15000;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    background:rgba(0,6,14,.62);
    backdrop-filter:blur(3px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .2s ease,visibility .2s ease;
}
.welcome-overlay.visible {
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}
.welcome-card {
    width:min(520px,calc(100vw - 32px));
    padding:28px 30px 24px;
    border:1px solid rgba(0,212,255,.38);
    border-radius:16px;
    background:linear-gradient(145deg,rgba(6,20,32,.98),rgba(3,11,20,.98));
    box-shadow:0 24px 70px rgba(0,0,0,.62),0 0 36px rgba(0,212,255,.08);
    color:#e9fbff;
}
.welcome-kicker {
    color:#63ddff;
    font-size:10px;
    font-weight:700;
    letter-spacing:.12em;
}
.welcome-card h1 {
    margin:10px 0 12px;
    color:#fff;
    font-size:26px;
    line-height:1.18;
    letter-spacing:-.02em;
}
.welcome-card p {
    margin:0;
    color:rgba(220,250,255,.72);
    font-size:12px;
    line-height:1.65;
}
.welcome-try {
    margin-top:16px;
    padding:11px 12px;
    border-left:2px solid rgba(0,212,255,.55);
    background:rgba(0,212,255,.055);
    color:rgba(220,250,255,.76);
    font-size:11px;
    line-height:1.5;
}
.welcome-actions {
    display:flex;
    align-items:center;
    gap:14px;
    margin-top:21px;
}
.welcome-start {
    padding:10px 17px;
    border:1px solid rgba(0,212,255,.68);
    border-radius:8px;
    background:rgba(0,212,255,.17);
    color:#fff;
    font-size:12px;
    font-weight:700;
    cursor:pointer;
}
.welcome-start:hover {
    background:rgba(0,212,255,.25);
}
.welcome-learn {
    color:#8ee8ff;
    font-size:11px;
    text-decoration:none;
}
.welcome-learn:hover { text-decoration:underline; }
.welcome-footnote {
    margin-top:18px;
    color:rgba(220,250,255,.4);
    font-size:9px;
}
@media (max-width:600px) {
    .welcome-overlay { padding:14px; align-items:center; }
    .welcome-card { padding:23px 20px 20px; }
    .welcome-card h1 { font-size:22px; }
    .welcome-actions { align-items:stretch; flex-direction:column; gap:10px; }
    .welcome-start { width:100%; }
    .welcome-learn { text-align:center; padding:4px; }
}


/* Planned Network mode */
.gt-planned-field {
    display:flex;
    flex-direction:column;
    gap:5px;
    margin:10px 0;
    color:rgba(220,250,255,.62);
    font-size:9px;
}
.gt-planned-field select {
    width:100%;
    padding:7px 8px;
    border:1px solid rgba(0,212,255,.24);
    border-radius:6px;
    background:#071522;
    color:#dffaff;
    font-size:10px;
}
.gt-planned-view {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:5px;
    margin-bottom:10px;
}
.gt-planned-view .playground-btn {
    justify-content:center;
    padding:6px 4px;
}
.gt-planned-meta {
    padding:9px;
    border:1px solid rgba(0,212,255,.14);
    border-radius:7px;
    background:rgba(0,212,255,.035);
    color:rgba(220,250,255,.64);
    font-size:8px;
    line-height:1.45;
}
.gt-planned-meta strong,
.gt-planned-meta span,
.gt-planned-meta small {
    display:block;
}
.gt-planned-meta strong { color:#dffaff; font-size:9px; }
.gt-planned-meta span { margin-top:3px; }
.gt-planned-meta small { margin-top:5px; opacity:.72; }
.gt-planned-shells {
    display:flex;
    flex-direction:column;
    gap:5px;
    margin-top:9px;
    max-height:220px;
    overflow-y:auto;
}
.gt-planned-shells > div {
    padding:6px 7px;
    border-bottom:1px solid rgba(255,255,255,.05);
}
.gt-planned-shells strong,
.gt-planned-shells span {
    display:block;
}
.gt-planned-shells strong {
    color:#e9fbff;
    font-size:9px;
}
.gt-planned-shells span {
    margin-top:2px;
    color:rgba(220,250,255,.48);
    font-size:8px;
}
#gt-population-btn.active {
    border-color:rgba(255,213,74,.7);
    background:rgba(255,213,74,.14);
    color:#ffe88c;
}

.gt-planned-source,
.gt-shell-source {
    display:inline-block;
    color:#63ddff;
    text-decoration:none;
    font-size:8px;
}
.gt-planned-source {
    margin-top:7px;
}
.gt-shell-source {
    margin-top:4px;
}
.gt-planned-source:hover,
.gt-shell-source:hover {
    color:#b6f3ff;
    text-decoration:underline;
}

.gt-shell-mode.gt-scorecard-hidden .gt-playground-layout {
    grid-template-columns:280px minmax(0,1fr);
}
.gt-scorecard-title {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:8px;
}
.gt-scorecard-title > div {
    min-width:0;
}
.gt-scorecard-close {
    flex:0 0 auto;
    width:24px;
    height:24px;
    padding:0;
    border:1px solid rgba(255,255,255,.12);
    border-radius:5px;
    background:rgba(255,255,255,.035);
    color:rgba(220,250,255,.62);
    font-size:17px;
    line-height:20px;
    cursor:pointer;
}
.gt-scorecard-close:hover {
    border-color:rgba(0,212,255,.42);
    color:#fff;
}
#gt-scorecard-btn.active {
    border-color:rgba(0,212,255,.62);
    background:rgba(0,212,255,.14);
}
@media (max-width:1100px) {
    .gt-shell-mode.gt-scorecard-hidden .gt-playground-layout {
        grid-template-columns:250px minmax(0,1fr);
    }
}
@media (max-width:768px) {
    .gt-shell-mode.gt-scorecard-hidden .gt-playground-layout {
        display:flex;
    }
}

/* Planned comparison state must be unmistakable */
.gt-planned-view .playground-btn {
    opacity:.58;
    border-color:rgba(255,255,255,.12);
    background:rgba(255,255,255,.025);
    color:rgba(220,250,255,.68);
}
.gt-planned-view .playground-btn.active {
    opacity:1;
    border-color:#00d4ff;
    background:rgba(0,212,255,.28);
    color:#fff;
    font-weight:800;
    box-shadow:inset 0 0 0 1px rgba(0,212,255,.18),0 0 12px rgba(0,212,255,.12);
}
.gt-planned-view .playground-btn.active::before {
    content:'✓ ';
    color:#8ff4ff;
}

.starlink-generation-filter{align-items:center;gap:5px;margin:7px 0 3px}
.starlink-generation-filter::before{content:'Generation';margin-right:2px;color:rgba(220,250,255,.48);font-size:8px;text-transform:uppercase;letter-spacing:.05em}
.starlink-generation-filter button{padding:3px 8px;border:1px solid rgba(255,255,255,.12);border-radius:999px;background:rgba(255,255,255,.025);color:rgba(220,250,255,.62);font-size:9px;cursor:pointer}
.starlink-generation-filter button.active{border-color:#00d4ff;background:rgba(0,212,255,.22);color:#fff;font-weight:700}