/* Star Map Styles */

/* Container and Layout */
.star-map-container {
    position: fixed;
    top: 56px;
    left: 0;
    right: 0;
    bottom: 0;
    background: #0a0a0a;
}

/* Header Controls Bar */
.starmap-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: #1f2937;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
}

.starmap-header-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.starmap-header-right {
    display: flex;
    gap: 10px;
    align-items: center;
}

.starmap-title {
    color: white;
    font-size: 1.25rem;
    font-weight: bold;
    margin: 0;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Search Field */
.starmap-search-container {
    position: relative;
}

.starmap-search-input {
    width: 250px;
    padding: 5px 5px 5px 28px;
    background-color: #374151;
    border: 1px solid #4b5563;
    color: #e5e7eb;
    border-radius: 4px;
    font-size: 0.875rem;
}

.starmap-search-icon {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    pointer-events: none;
    font-size: 0.75rem;
}

.starmap-search-results {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background: #1f2937;
    border: 1px solid #4b5563;
    border-radius: 6px;
    max-height: 300px;
    overflow-y: auto;
    z-index: 10001;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

/* Canvas Container */
.starmap-canvas-container {
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    bottom: 30px;
}

.starmap-canvas {
    width: 100%;
    height: 100%;
    display: block;
}

/* Zoom Controls */
.starmap-zoom-controls {
    position: absolute;
    bottom: 10px;
    right: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 1000;
}

.starmap-zoom-btn {
    width: 36px;
    height: 36px;
    background: #374151;
    color: #e5e7eb;
    border: 1px solid #4b5563;
    border-radius: 4px;
    cursor: pointer;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.starmap-zoom-btn:hover {
    background: #4b5563;
    transform: scale(1.05);
}

/* Gyro toggle button - hidden by default, shown on touch devices */
.starmap-gyro-btn {
    display: none;
    margin-top: 4px;
    font-size: 16px;
}

.starmap-gyro-btn.gyro-active {
    background: #1d4ed8;
    border-color: #3b82f6;
    color: #ffffff;
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.5);
}

.starmap-gyro-btn.gyro-active:hover {
    background: #2563eb;
}

/* Show gyro button on touch-capable devices */
@media (pointer: coarse) {
    .starmap-gyro-btn {
        display: flex;
    }
}

/* Status Bar */
.starmap-status-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 30px;
    background: #1f2937;
    padding: 5px 20px;
    color: #9ca3af;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* View Mode Menu */
.view-mode-container {
    position: relative;
}

.view-mode-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 2px;
    background: #374151;
    border: 1px solid #4b5563;
    border-radius: 4px;
    min-width: 150px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    z-index: 1000;
}

.view-mode-menu-item {
    display: block;
    width: 100%;
    padding: 8px 12px;
    background: none;
    border: none;
    color: #e5e7eb;
    text-align: left;
    cursor: pointer;
    font-size: 0.875rem;
}

.view-mode-menu-item:hover {
    background: #4b5563;
}

.view-mode-menu-item.with-border {
    border-top: 1px solid #4b5563;
}

/* Panels Common Styles */
.starmap-panel {
    display: none;
    position: absolute;
    top: 70px;
    right: 20px;
    background-color: #374151;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    z-index: 10000;
}

.starmap-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    border-bottom: 1px solid #4b5563;
    padding-bottom: 10px;
}

.starmap-panel-title {
    color: white;
    font-size: 1rem;
    font-weight: bold;
    margin: 0;
    flex: 1;
}

/* Settings Panel */
.starmap-settings-panel {
    width: 320px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}

.settings-tabs {
    display: flex;
    gap: 2px;
    margin-bottom: 10px;
    border-bottom: 1px solid #4b5563;
}

.settings-tab {
    flex: 1;
    padding: 5px 10px;
    background: transparent;
    color: #9ca3af;
    border: none;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 500;
    transition: background 0.2s;
}

.settings-tab.active {
    background: #4b5563;
    color: #e5e7eb;
}

.settings-section {
    margin-bottom: 10px;
}

.settings-section-title {
    color: #e5e7eb;
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0 0 6px 0;
}

.settings-label {
    display: flex;
    align-items: center;
    color: #d1d5db;
    font-size: 0.875rem;
    margin-bottom: 4px;
    cursor: pointer;
}

.settings-label input[type="checkbox"],
.settings-label input[type="radio"] {
    margin-right: 8px;
}

.settings-sublabel {
    display: flex;
    align-items: center;
    color: #9ca3af;
    font-size: 0.8rem;
    margin-bottom: 4px;
    cursor: pointer;
}

.settings-sublabel input[type="checkbox"],
.settings-sublabel input[type="radio"] {
    margin-right: 8px;
}

.settings-indent {
    margin-left: 24px;
    margin-top: 4px;
    margin-bottom: 4px;
}

/* Functions Panel */
.starmap-functions-panel {
    width: 280px;
}

.functions-section {
    margin-bottom: 15px;
}

.functions-section-title {
    color: #e5e7eb;
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0 0 8px 0;
}

.export-button {
    width: 100%;
    padding: 8px;
    background: #10b981;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.875rem;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.export-button:hover {
    background: #059669;
}

/* Time Control Panel */
.starmap-time-panel {
    width: 320px;
}

.time-control-btn {
    padding: 6px 10px;
    background: #4b5563;
    color: #e5e7eb;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
    transition: all 0.2s ease;
}

.time-control-btn:hover {
    background: #6b7280;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.time-control-btn:active {
    transform: translateY(0);
    box-shadow: none;
}

.time-step-btn {
    padding: 6px 10px;
    background: #4b5563;
    color: #e5e7eb;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
    transition: all 0.15s ease;
}

.time-step-btn:hover {
    background: #6b7280;
    color: #ffffff;
    transform: scale(1.05);
}

.time-step-btn:active {
    transform: scale(0.98);
    background: #374151;
}

.time-input-group {
    margin-bottom: 10px;
}

.time-input-label {
    color: #d1d5db;
    font-size: 0.875rem;
    display: block;
    margin-bottom: 4px;
}

.time-input-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}

.time-input {
    flex: 1;
    padding: 6px;
    background: #1f2937;
    border: 1px solid #4b5563;
    color: #e5e7eb;
    border-radius: 4px;
    font-size: 0.875rem;
}

.time-presets {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-bottom: 15px;
}

.time-step-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    margin-bottom: 15px;
}

/* Location Settings */
.location-section {
    border-top: 1px solid #4b5563;
    padding-top: 10px;
    margin-bottom: 10px;
}

.location-title {
    color: #d1d5db;
    font-size: 0.875rem;
    margin-bottom: 8px;
    font-weight: 600;
}

.location-presets {
    width: 100%;
    padding: 4px;
    background: #1f2937;
    border: 1px solid #4b5563;
    color: #e5e7eb;
    border-radius: 4px;
    font-size: 0.75rem;
    margin-bottom: 8px;
}

.location-input-group {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.location-input-label {
    color: #9ca3af;
    font-size: 0.75rem;
    width: 30px;
}

.location-input {
    width: 70px;
    padding: 4px;
    margin-right: 8px;
    background: #1f2937;
    border: 1px solid #4b5563;
    color: #e5e7eb;
    border-radius: 4px;
    font-size: 0.75rem;
}

.location-hemisphere {
    display: flex;
    gap: 6px;
    margin-left: auto;
}

.location-hemisphere label {
    color: #d1d5db;
    font-size: 0.75rem;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.location-hemisphere input[type="radio"] {
    margin-right: 2px;
}

.location-name {
    color: #9ca3af;
    font-size: 0.7rem;
    font-style: italic;
}

/* Status Display */
.time-status {
    border-top: 1px solid #4b5563;
    padding-top: 10px;
}

.lst-display {
    color: #9ca3af;
    font-size: 0.75rem;
}

.lst-value {
    color: #e5e7eb;
    font-family: monospace;
}

.time-status-message {
    color: #fbbf24;
    font-size: 0.75rem;
    margin-top: 4px;
    display: none;
}

/* Panel Close Button */
.panel-close-btn {
    color: #9ca3af;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.25rem;
    padding: 0;
    transition: color 0.2s ease, transform 0.2s ease;
}

.panel-close-btn:hover {
    color: #ef4444;
    transform: rotate(90deg);
}

/* Slider Styles */
.magnitude-slider-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.magnitude-slider {
    flex: 1;
}

.magnitude-value {
    color: #d1d5db;
    font-size: 0.875rem;
    width: 30px;
}

/* Star Hop Settings */
.starhop-setting-group {
    margin-bottom: 6px;
}

.starhop-slider-container {
    display: flex;
    align-items: center;
    gap: 8px;
}

.starhop-slider {
    flex: 1;
}

.starhop-slider-value {
    color: #d1d5db;
    font-size: 0.8rem;
    width: 45px;
}

.starhop-hint {
    color: #9ca3af;
    font-size: 0.7rem;
    margin-top: 2px;
}

.finder-fov-input {
    width: 70px;
    padding: 2px 4px;
    background: #1f2937;
    border: 1px solid #4b5563;
    color: #e5e7eb;
    border-radius: 4px;
    font-size: 0.8rem;
}

.fov-calc-btn {
    padding: 2px 8px;
    background: #3b82f6;
    border: none;
    color: white;
    border-radius: 4px;
    font-size: 0.75rem;
    cursor: pointer;
}

.fov-calc-btn:hover {
    background: #2563eb;
}

/* FOV Calculator Modal */
.fov-calc-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.fov-calc-dialog {
    background: #1f2937;
    border: 1px solid #4b5563;
    border-radius: 8px;
    width: 320px;
    max-width: 90vw;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.fov-calc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #4b5563;
}

.fov-calc-header h4 {
    margin: 0;
    color: #e5e7eb;
    font-size: 1rem;
}

.fov-calc-body {
    padding: 16px;
}

.fov-calc-formula {
    font-size: 0.75rem;
    color: #9ca3af;
    margin: 0 0 16px 0;
    padding: 8px;
    background: #111827;
    border-radius: 4px;
    text-align: center;
}

.fov-calc-field {
    margin-bottom: 12px;
}

.fov-calc-field label {
    display: block;
    font-size: 0.8rem;
    color: #d1d5db;
    margin-bottom: 4px;
}

.fov-calc-field input {
    width: 100%;
    padding: 6px 10px;
    background: #111827;
    border: 1px solid #4b5563;
    color: #e5e7eb;
    border-radius: 4px;
    font-size: 0.9rem;
}

.fov-calc-field input:focus {
    outline: none;
    border-color: #3b82f6;
}

.fov-calc-field select,
.fov-calc-select {
    width: 100%;
    padding: 6px 10px;
    background: #111827;
    border: 1px solid #4b5563;
    border-radius: 4px;
    color: #e5e7eb;
    font-size: 0.85rem;
    cursor: pointer;
}

.fov-calc-field select:focus,
.fov-calc-select:focus {
    outline: none;
    border-color: #3b82f6;
}

.fov-calc-result {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background: #111827;
    border-radius: 4px;
    margin-top: 16px;
}

.fov-calc-result span {
    color: #d1d5db;
    font-size: 0.9rem;
}

.fov-calc-value {
    font-size: 1.2rem !important;
    font-weight: bold;
    color: #3b82f6 !important;
}

.fov-calc-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid #4b5563;
}

.fov-calc-cancel, .fov-calc-apply {
    padding: 6px 16px;
    border: none;
    border-radius: 4px;
    font-size: 0.85rem;
    cursor: pointer;
}

.fov-calc-cancel {
    background: #4b5563;
    color: #e5e7eb;
}

.fov-calc-cancel:hover {
    background: #6b7280;
}

.fov-calc-apply {
    background: #3b82f6;
    color: white;
}

.fov-calc-apply:hover {
    background: #2563eb;
}

/* Help Overlay */
.starmap-help-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    pointer-events: none;
    padding: 12px 20px;
    animation: helpFadeIn 0.5s ease-out;
}

.starmap-help-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background: rgba(17, 24, 39, 0.88);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 8px;
    padding: 10px 20px;
    pointer-events: auto;
}

.starmap-help-items {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    align-items: center;
    justify-content: center;
}

.starmap-help-item {
    color: #d1d5db;
    font-size: 0.85rem;
    white-space: nowrap;
}

.starmap-help-item i {
    color: #60a5fa;
    margin-right: 4px;
    width: 16px;
    text-align: center;
}

.starmap-help-dismiss {
    background: rgba(59, 130, 246, 0.2);
    border: 1px solid rgba(59, 130, 246, 0.4);
    color: #93c5fd;
    padding: 4px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
    white-space: nowrap;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.starmap-help-dismiss:hover {
    background: rgba(59, 130, 246, 0.4);
    color: #ffffff;
}

@keyframes helpFadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.starmap-help-overlay.fade-out {
    animation: helpFadeOut 0.3s ease-in forwards;
}

@keyframes helpFadeOut {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-10px); }
}

/* Orientation Overlay (phones in portrait) */
/* Tablet: stack items */
@media (max-width: 768px) {
    .starmap-help-content {
        flex-direction: column;
        gap: 8px;
        padding: 10px 16px;
    }

    .starmap-help-items {
        gap: 6px 14px;
    }

    .starmap-help-item {
        font-size: 0.78rem;
    }
}

/* Atlas and Night Mode Canvas Styles */
.starmap-canvas.atlas-mode {
    background: white !important;
}

.starmap-canvas.night-mode {
    background: #330000 !important;
}

/* Loading Overlay */
.starmap-loading-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background: #0a0a0a;
    z-index: 998;
    transition: opacity 0.4s ease;
}

.starmap-loading-overlay.fade-out {
    opacity: 0;
    pointer-events: none;
}

.starmap-loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #374151;
    border-top-color: #60a5fa;
    border-radius: 50%;
    animation: spinLoader 0.8s linear infinite;
}

@keyframes spinLoader {
    to { transform: rotate(360deg); }
}

.starmap-loading-text {
    color: #9ca3af;
    font-size: 0.9rem;
}

/* Loading progress steps */
.starmap-loading-steps {
    display: flex;
    gap: 24px;
    margin-top: 8px;
}

.starmap-loading-step {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #4b5563;
    font-size: 0.8rem;
    transition: color 0.3s ease;
}

.starmap-loading-step.active {
    color: #9ca3af;
}

.starmap-loading-step.done {
    color: #60a5fa;
}

.starmap-step-icon {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #374151;
    transition: background 0.3s ease;
}

.starmap-loading-step.active .starmap-step-icon {
    background: #9ca3af;
    animation: pulse-dot 1s ease-in-out infinite;
}

.starmap-loading-step.done .starmap-step-icon {
    background: #60a5fa;
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

@media (max-width: 480px) {
    .starmap-loading-steps {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }
}

/* Help overlay: show desktop or touch hints based on device */
.starmap-help-touch {
    display: none;
}

/* Icon hidden by default on view mode button (shown only on mobile) */
.starmap-btn-icon {
    display: none;
}

/* ============================================
   MOBILE: phones (max-width 480px)
   ============================================ */
@media (max-width: 480px) {
    /* --- Step 1: Responsive Header --- */
    .starmap-header {
        height: 44px;
        padding: 6px 8px;
        gap: 6px;
    }

    .starmap-header-left {
        gap: 6px;
        min-width: 0;
        flex: 1;
    }

    #starMapTitle {
        display: none;
    }

    .starmap-search-container {
        flex: 1;
        min-width: 80px;
        max-width: 140px;
    }

    .starmap-search-input {
        width: 100%;
        font-size: 0.8rem;
        padding: 4px 4px 4px 24px;
    }

    .starmap-header-right {
        gap: 4px;
        flex-shrink: 0;
    }

    /* Hide button labels, show icon-only */
    .starmap-btn-label {
        display: none;
    }

    /* Show icon on view mode button */
    .starmap-btn-icon {
        display: inline;
    }

    .starmap-header-right .btn-sm {
        padding: 0.375rem 0.5rem;
        font-size: 0.85rem;
        min-width: 40px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Canvas container adjusts to shorter header and status bar */
    .starmap-canvas-container {
        top: 44px;
        bottom: 20px;
    }

    /* --- Step 3: Panels as Bottom Sheets --- */
    .starmap-panel {
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100% !important;
        max-height: 60vh;
        overflow-y: auto;
        border-radius: 12px 12px 0 0;
        animation: slideUpPanel 0.25s ease-out;
    }

    .starmap-settings-panel {
        width: 100% !important;
    }

    .starmap-functions-panel {
        width: 100% !important;
    }

    .starmap-time-panel {
        width: 100% !important;
    }

    /* --- Step 4: Larger Zoom Controls --- */
    .starmap-zoom-btn {
        width: 48px;
        height: 48px;
        font-size: 24px;
    }

    .starmap-zoom-controls {
        bottom: 12px;
        right: 12px;
    }

    /* --- Step 5: Compact Status Bar --- */
    .starmap-status-bar {
        height: 20px;
        padding: 2px 8px;
        font-size: 0.7rem;
    }

    #starMapHelp,
    #starMapLocation {
        display: none;
    }

    /* --- Step 6: Show touch help, hide desktop help --- */
    .starmap-help-desktop {
        display: none;
    }

    .starmap-help-touch {
        display: flex;
    }

    .starmap-help-content {
        flex-direction: column;
        gap: 8px;
        padding: 8px 12px;
    }

    .starmap-help-item {
        font-size: 0.75rem;
    }

    /* --- Search results dropdown: extend right from container, not left --- */
    .starmap-search-results {
        min-width: 250px;
        max-width: calc(100vw - 16px);
        left: 0;
        right: auto;
    }

    /* --- View mode dropdown --- */
    .view-mode-menu {
        right: 0;
        left: auto;
    }

    /* --- Selection UI compact layout: two lines (name + buttons) --- */
    #starMapSelectionUI {
        top: 4px !important;
        padding: 6px 8px !important;
        font-size: 12px;
        max-width: 98% !important;
    }

    #selectionObjectName {
        font-size: 13px !important;
        margin-right: 0 !important;
        width: 100%;
        text-align: center;
        margin-bottom: 4px;
    }

    #starMapSelectionUI button {
        padding: 8px 12px !important;
        font-size: 13px !important;
        min-height: 36px;
    }

    #starMapSelectionUI button:last-child {
        padding: 8px 16px !important;
        min-width: 40px;
    }
}

@keyframes slideUpPanel {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

/* ============================================
   MOBILE LANDSCAPE: phones rotated sideways
   Hide navbar + compact header to maximize canvas
   ============================================ */
@media (orientation: landscape) and (max-height: 500px) {
    /* Hide the site navbar entirely */
    body > nav {
        display: none !important;
    }

    /* Container fills the whole screen */
    .star-map-container {
        top: 0;
    }

    /* Compact header: single tight row */
    .starmap-header {
        height: 32px;
        padding: 2px 8px;
        gap: 6px;
    }

    /* Hide title to save space */
    #starMapTitle {
        display: none;
    }

    .starmap-header-left {
        gap: 6px;
        min-width: 0;
        flex: 1;
    }

    .starmap-search-container {
        flex: 1;
        min-width: 80px;
        max-width: 160px;
    }

    .starmap-search-input {
        width: 100%;
        font-size: 0.75rem;
        padding: 2px 4px 2px 22px;
        height: 26px;
    }

    .starmap-search-icon {
        font-size: 0.65rem;
        left: 6px;
    }

    .starmap-header-right {
        gap: 3px;
        flex-shrink: 0;
    }

    /* Icon-only buttons */
    .starmap-btn-label {
        display: none;
    }

    .starmap-btn-icon {
        display: inline;
    }

    .starmap-header-right .btn-sm {
        padding: 4px 8px;
        font-size: 0.8rem;
        min-width: 34px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Canvas takes remaining space — header 32px, no status bar */
    .starmap-canvas-container {
        top: 32px;
        bottom: 0;
    }

    /* Hide status bar — coordinates shown on canvas overlay */
    .starmap-status-bar {
        display: none;
    }

    /* Panels as side sheets instead of bottom sheets */
    .starmap-panel {
        top: 36px;
        right: 4px;
        max-height: calc(100vh - 40px);
        width: 280px !important;
    }

    .starmap-settings-panel,
    .starmap-functions-panel,
    .starmap-time-panel {
        width: 280px !important;
    }

    /* Smaller zoom controls */
    .starmap-zoom-btn {
        width: 32px;
        height: 32px;
        font-size: 18px;
    }

    .starmap-zoom-controls {
        bottom: 8px;
        right: 8px;
    }

    /* Compact search results */
    .starmap-search-results {
        min-width: 250px;
        max-width: calc(100vw - 16px);
    }

    /* Compact help overlay */
    .starmap-help-content {
        padding: 6px 12px;
    }

    .starmap-help-item {
        font-size: 0.7rem;
    }

    /* Compact selection UI: two lines (name + buttons) */
    #starMapSelectionUI {
        top: 2px !important;
        padding: 4px 6px !important;
        font-size: 11px;
    }

    #selectionObjectName {
        font-size: 11px !important;
        margin-right: 0 !important;
        width: 100%;
        text-align: center;
        margin-bottom: 2px;
    }

    #starMapSelectionUI button {
        padding: 6px 10px !important;
        font-size: 12px !important;
        min-height: 32px;
    }

    #starMapSelectionUI button:last-child {
        padding: 6px 14px !important;
        min-width: 36px;
    }

    /* View mode dropdown */
    .view-mode-menu {
        right: 0;
        left: auto;
    }
}

/* Print styles — hide UI chrome, show only the canvas */
@media print {
    .starmap-header,
    .starmap-status-bar,
    .starmap-zoom-controls,
    .starmap-settings-panel,
    .starmap-functions-panel,
    .starmap-time-control,
    nav,
    footer {
        display: none !important;
    }

    .star-map-container {
        position: static;
        top: auto;
        left: auto;
        right: auto;
        bottom: auto;
        background: white;
    }

    .starmap-canvas-container {
        width: 100%;
        height: auto;
        padding: 0;
    }

    .starmap-canvas {
        max-width: 100%;
        height: auto !important;
    }
}

/* ============================================================
   NIGHT VISION MODE — Star Map UI Chrome
   ============================================================ */

/* Header bar */
body[data-theme="night"] .starmap-header {
    background: #2d0a0a;
}

body[data-theme="night"] .starmap-title {
    color: #fca5a5;
}

/* Search input */
body[data-theme="night"] .starmap-search-input {
    background-color: #3d1010;
    border-color: #7f1d1d;
    color: #fca5a5;
}

body[data-theme="night"] .starmap-search-icon {
    color: #993333;
}

/* Search results dropdown */
body[data-theme="night"] .starmap-search-results {
    background: #2d0a0a;
    border-color: #7f1d1d;
}

/* Zoom buttons */
body[data-theme="night"] .starmap-zoom-btn {
    background: #3d1010;
    color: #fca5a5;
    border-color: #7f1d1d;
}

body[data-theme="night"] .starmap-zoom-btn:hover {
    background: #4d1515;
}

body[data-theme="night"] .starmap-gyro-btn.gyro-active {
    background: #7f1d1d;
    border-color: #dc2626;
    color: #fca5a5;
    box-shadow: 0 0 8px rgba(220, 38, 38, 0.4);
}

/* Status bar */
body[data-theme="night"] .starmap-status-bar {
    background: #2d0a0a;
    color: #993333;
}

/* View mode menu */
body[data-theme="night"] .view-mode-menu {
    background: #3d1010;
    border-color: #7f1d1d;
}

body[data-theme="night"] .view-mode-menu-item {
    color: #fca5a5;
}

body[data-theme="night"] .view-mode-menu-item:hover {
    background: #4d1515;
}

body[data-theme="night"] .view-mode-menu-item.with-border {
    border-top-color: #7f1d1d;
}

/* Panels */
body[data-theme="night"] .starmap-panel {
    background-color: #3d1010;
}

body[data-theme="night"] .starmap-panel-header {
    border-bottom-color: #7f1d1d;
}

body[data-theme="night"] .starmap-panel-title {
    color: #fca5a5;
}

/* Settings panel */
body[data-theme="night"] .settings-tabs {
    border-bottom-color: #7f1d1d;
}

body[data-theme="night"] .settings-tab {
    color: #993333;
}

body[data-theme="night"] .settings-tab.active {
    background: #4d1515;
    color: #fca5a5;
}

body[data-theme="night"] .settings-section-title {
    color: #fca5a5;
}

body[data-theme="night"] .settings-label {
    color: #d4a0a0;
}

body[data-theme="night"] .settings-sublabel {
    color: #993333;
}

/* Time controls */
body[data-theme="night"] .time-control-btn {
    background: #4d1515;
    color: #fca5a5;
}

body[data-theme="night"] .time-control-btn:hover {
    background: #662222;
}

body[data-theme="night"] .time-step-btn {
    background: #4d1515;
    color: #fca5a5;
}

body[data-theme="night"] .time-step-btn:hover {
    background: #662222;
    color: #fca5a5;
}

body[data-theme="night"] .time-input-label {
    color: #d4a0a0;
}

body[data-theme="night"] .time-input {
    background: #2d0a0a;
    border-color: #7f1d1d;
    color: #fca5a5;
}

/* Location settings */
body[data-theme="night"] .location-section {
    border-top-color: #7f1d1d;
}

body[data-theme="night"] .location-title {
    color: #d4a0a0;
}

body[data-theme="night"] .location-presets {
    background: #2d0a0a;
    border-color: #7f1d1d;
    color: #fca5a5;
}

body[data-theme="night"] .location-input {
    background: #2d0a0a;
    border-color: #7f1d1d;
    color: #fca5a5;
}

body[data-theme="night"] .location-input-label {
    color: #993333;
}

body[data-theme="night"] .location-hemisphere label {
    color: #d4a0a0;
}

body[data-theme="night"] .location-name {
    color: #993333;
}

/* Time status */
body[data-theme="night"] .time-status {
    border-top-color: #7f1d1d;
}

body[data-theme="night"] .lst-display {
    color: #993333;
}

body[data-theme="night"] .lst-value {
    color: #fca5a5;
}

body[data-theme="night"] .time-status-message {
    color: #f87171;
}

/* Export button */
body[data-theme="night"] .export-button {
    background: #991b1b;
    color: #fca5a5;
}

body[data-theme="night"] .export-button:hover {
    background: #7f1d1d;
}

/* Functions section title */
body[data-theme="night"] .functions-section-title {
    color: #fca5a5;
}

/* FOV calculator button */
body[data-theme="night"] .fov-calc-btn {
    background: #991b1b;
    color: #fca5a5;
}

body[data-theme="night"] .fov-calc-btn:hover {
    background: #7f1d1d;
}

/* Finder FOV input */
body[data-theme="night"] .finder-fov-input {
    background: #2d0a0a;
    border-color: #7f1d1d;
    color: #fca5a5;
}

/* Star hop hints */
body[data-theme="night"] .starhop-hint {
    color: #993333;
}

body[data-theme="night"] .starhop-slider-value {
    color: #d4a0a0;
}

body[data-theme="night"] .magnitude-value {
    color: #d4a0a0;
}

/* FOV Calculator Modal */
body[data-theme="night"] .fov-calc-dialog {
    background: #2d0a0a;
    border-color: #7f1d1d;
}

body[data-theme="night"] .fov-calc-header {
    border-bottom-color: #7f1d1d;
}

body[data-theme="night"] .fov-calc-header h4 {
    color: #fca5a5;
}

body[data-theme="night"] .fov-calc-formula {
    color: #993333;
    background: #1a0505;
}

body[data-theme="night"] .fov-calc-field label {
    color: #d4a0a0;
}

body[data-theme="night"] .fov-calc-field input {
    background: #1a0505;
    border-color: #7f1d1d;
    color: #fca5a5;
}

body[data-theme="night"] .fov-calc-field input:focus {
    border-color: #ef4444;
}

body[data-theme="night"] .fov-calc-field select,
body[data-theme="night"] .fov-calc-select {
    background: #1a0505;
    border-color: #7f1d1d;
    color: #fca5a5;
}

body[data-theme="night"] .fov-calc-field select:focus,
body[data-theme="night"] .fov-calc-select:focus {
    border-color: #ef4444;
}

body[data-theme="night"] .fov-calc-result {
    background: #1a0505;
}

body[data-theme="night"] .fov-calc-result span {
    color: #d4a0a0;
}

body[data-theme="night"] .fov-calc-value {
    color: #f87171 !important;
}

body[data-theme="night"] .fov-calc-footer {
    border-top-color: #7f1d1d;
}

body[data-theme="night"] .fov-calc-cancel {
    background: #4d1515;
    color: #fca5a5;
}

body[data-theme="night"] .fov-calc-cancel:hover {
    background: #662222;
}

body[data-theme="night"] .fov-calc-apply {
    background: #991b1b;
    color: #fca5a5;
}

body[data-theme="night"] .fov-calc-apply:hover {
    background: #7f1d1d;
}

/* Panel close button */
body[data-theme="night"] .panel-close-btn {
    color: #993333;
}

body[data-theme="night"] .panel-close-btn:hover {
    color: #ef4444;
}

/* Help overlay */
body[data-theme="night"] .starmap-help-content {
    background: rgba(26, 5, 5, 0.88);
    border-color: rgba(239, 68, 68, 0.3);
}

body[data-theme="night"] .starmap-help-item {
    color: #d4a0a0;
}

body[data-theme="night"] .starmap-help-item i {
    color: #f87171;
}

body[data-theme="night"] .starmap-help-dismiss {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.4);
    color: #fca5a5;
}

body[data-theme="night"] .starmap-help-dismiss:hover {
    background: rgba(239, 68, 68, 0.4);
    color: #fca5a5;
}

/* Loading overlay */
body[data-theme="night"] .starmap-loading-overlay {
    background: #0d0202;
}

body[data-theme="night"] .starmap-loading-spinner {
    border-color: #3d1010;
    border-top-color: #f87171;
}

body[data-theme="night"] .starmap-loading-text {
    color: #993333;
}

body[data-theme="night"] .starmap-loading-step.done {
    color: #f87171;
}

body[data-theme="night"] .starmap-loading-step.done .starmap-step-icon {
    background: #f87171;
}

/* Header buttons in night mode */
body[data-theme="night"] .starmap-header .btn-sm {
    background: #3d1010;
    border-color: #7f1d1d;
    color: #fca5a5;
}

body[data-theme="night"] .starmap-header .btn-sm:hover {
    background: #4d1515;
}

/* Selection UI night mode */
body[data-theme="night"] #starMapSelectionUI {
    background: rgba(45, 10, 10, 0.95) !important;
    border-color: #7f1d1d !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5) !important;
}

body[data-theme="night"] #selectionObjectName {
    color: #fca5a5 !important;
}

body[data-theme="night"] #starMapSelectionUI button {
    background: #991b1b !important;
    color: #fca5a5 !important;
    border-color: #7f1d1d !important;
}

body[data-theme="night"] #starMapSelectionUI button:hover {
    background: #b91c1c !important;
}