{{define "orbit_viewer"}}
<!-- Leaflet CSS & JS -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>

<style>
    /* Orbit Viewer Global Responsive Styles */
    .ov-container {
        display: flex;
        flex-direction: column;
        gap: 20px;
        color: #1d1d1f;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow-x: hidden;
    }

    .ov-card {
        background: #ffffff;
        border-radius: 18px;
        padding: 20px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
        border: 1px solid rgba(0, 0, 0, 0.06);
        box-sizing: border-box;
        max-width: 100%;
        overflow-x: hidden;
    }

    .ov-card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;
        flex-wrap: wrap;
        gap: 12px;
    }

    .ov-card-title {
        font-size: 18px;
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 0;
        word-break: break-word;
    }

    /* Control Bar */
    .ov-control-bar {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        align-items: center;
        background: #fbfbfd;
        padding: 14px;
        border-radius: 14px;
        border: 1px solid #e5e5ea;
        box-sizing: border-box;
        max-width: 100%;
    }

    .ov-select-group {
        display: flex;
        align-items: center;
        gap: 8px;
        flex: 1;
        min-width: 220px;
        max-width: 100%;
    }

    .ov-select-group select {
        padding: 8px 12px;
        border-radius: 10px;
        border: 1px solid #d2d2d7;
        font-size: 14px;
        background-color: #fff;
        max-width: 100%;
    }

    .ov-btn-sm {
        height: 36px;
        padding: 0 14px;
        font-size: 13px;
        border-radius: 10px;
        white-space: nowrap;
    }

    .ov-btn-secondary {
        background: #f0f0f2;
        color: #1d1d1f;
        border: 1px solid #d2d2d7;
    }
    .ov-btn-secondary:hover {
        background: #e4e4e7;
        color: #000;
        transform: none;
        box-shadow: none;
    }

    .ov-btn-accent {
        background: linear-gradient(135deg, #0071e3 0%, #00c7be 100%);
        color: white;
    }

    .ov-btn-accent:hover {
        box-shadow: 0 4px 15px rgba(0, 199, 190, 0.35);
    }

    /* Quick City Badges */
    .ov-city-pill {
        background: #f2f2f7;
        color: #1d1d1f;
        padding: 4px 10px;
        border-radius: 14px;
        font-size: 12px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s;
        border: 1px solid #e5e5ea;
        white-space: nowrap;
    }
    .ov-city-pill:hover, .ov-city-pill.active {
        background: #0071e3;
        color: white;
        border-color: #0071e3;
    }

    /* Telemetry HUD Grid */
    .ov-telemetry-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
        gap: 10px;
        margin-top: 14px;
        box-sizing: border-box;
        max-width: 100%;
    }

    .ov-telemetry-item {
        background: #1c1c1e;
        color: #fff;
        padding: 12px 14px;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        display: flex;
        flex-direction: column;
        gap: 3px;
        box-sizing: border-box;
    }

    .ov-telemetry-label {
        font-size: 11px;
        color: #8e8e93;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .ov-telemetry-val {
        font-size: 17px;
        font-weight: 700;
        color: #5ac8fa;
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    }

    .ov-telemetry-sub {
        font-size: 11px;
        color: #aeaeb2;
    }

    /* Map View */
    #ov-map {
        height: 420px;
        width: 100%;
        max-width: 100%;
        border-radius: 14px;
        overflow: hidden;
        border: 1px solid rgba(0, 0, 0, 0.1);
        background: #1a2233;
        box-sizing: border-box;
    }

    /* Passes Table */
    .ov-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 12px;
        border: 1px solid #e5e5ea;
        margin-top: 14px;
        max-width: 100%;
        box-sizing: border-box;
    }

    .ov-table {
        width: 100%;
        border-collapse: collapse;
        text-align: left;
        font-size: 13px;
    }

    .ov-table th {
        background: #f5f5f7;
        padding: 10px 14px;
        font-weight: 600;
        color: #6e6e73;
        border-bottom: 1px solid #e5e5ea;
        white-space: nowrap;
    }

    .ov-table td {
        padding: 12px 14px;
        border-bottom: 1px solid #f0f0f2;
        color: #1d1d1f;
        vertical-align: middle;
    }

    .ov-table tr:hover {
        background: #fbfbfd;
    }

    .ov-badge {
        display: inline-block;
        padding: 3px 8px;
        border-radius: 6px;
        font-size: 11px;
        font-weight: 600;
        text-align: center;
    }

    .ov-badge-visible {
        background: #e3f9e5;
        color: #1b8738;
        border: 1px solid #c2eec7;
    }

    .ov-badge-daylight {
        background: #fff8e6;
        color: #b25e00;
        border: 1px solid #ffe3a8;
    }

    .ov-badge-eclipsed {
        background: #f2f2f7;
        color: #636366;
        border: 1px solid #e5e5ea;
    }

    /* Modal for Custom TLE */
    .ov-modal-overlay {
        display: none;
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(8px);
        z-index: 2000;
        align-items: center;
        justify-content: center;
        padding: 16px;
        box-sizing: border-box;
    }

    .ov-modal {
        background: white;
        border-radius: 18px;
        padding: 22px;
        width: 100%;
        max-width: 560px;
        box-shadow: 0 10px 40px rgba(0,0,0,0.2);
        box-sizing: border-box;
    }

    /* AR Mode Fullscreen Screen */
    #ov-ar-overlay {
        display: none;
        position: fixed;
        top: 0; left: 0; width: 100vw; height: 100vh;
        z-index: 9999;
        background: #060a14;
        overflow: hidden;
        user-select: none;
        touch-action: none;
    }

    #ov-ar-video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        top: 0; left: 0;
        z-index: 1;
    }

    #ov-ar-canvas {
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
        z-index: 2;
        touch-action: none;
    }

    .ov-ar-hud {
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 16px;
        box-sizing: border-box;
        pointer-events: none;
        z-index: 3;
    }

    .ov-ar-hud-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        pointer-events: auto;
        gap: 10px;
    }

    .ov-ar-title-card {
        background: rgba(0, 0, 0, 0.75);
        backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        padding: 10px 14px;
        border-radius: 12px;
        color: white;
    }

    .ov-ar-close-btn {
        background: rgba(255, 255, 255, 0.25);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.3);
        color: white;
        border-radius: 50%;
        width: 40px; height: 40px;
        padding: 0;
        font-size: 18px;
        cursor: pointer;
    }

    .ov-ar-hud-center {
        position: absolute;
        top: 50%; left: 50%;
        transform: translate(-50%, -50%);
        pointer-events: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .ov-ar-reticle {
        width: 80px; height: 80px;
        border: 2px dashed rgba(255, 255, 255, 0.6);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }

    .ov-ar-reticle::before {
        content: '';
        width: 8px; height: 8px;
        background: #30d158;
        border-radius: 50%;
    }

    .ov-ar-pointer {
        position: absolute;
        display: flex;
        flex-direction: column;
        align-items: center;
        transition: transform 0.05s ease-out;
        pointer-events: none;
        z-index: 4;
    }

    .ov-ar-target-icon {
        width: 50px; height: 50px;
        border: 2px solid #5ac8fa;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(0, 122, 255, 0.35);
        animation: ovPulse 1.5s infinite;
    }

    @keyframes ovPulse {
        0% { box-shadow: 0 0 0 0 rgba(90, 200, 250, 0.7); }
        70% { box-shadow: 0 0 0 16px rgba(90, 200, 250, 0); }
        100% { box-shadow: 0 0 0 0 rgba(90, 200, 250, 0); }
    }

    .ov-ar-arrow-guide {
        background: rgba(255, 59, 48, 0.9);
        color: white;
        padding: 6px 14px;
        border-radius: 20px;
        font-weight: 700;
        font-size: 13px;
        display: flex;
        align-items: center;
        gap: 6px;
        margin-top: 10px;
        box-shadow: 0 4px 15px rgba(255, 59, 48, 0.4);
    }

    .ov-ar-hud-footer {
        background: rgba(0, 0, 0, 0.78);
        backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 14px;
        padding: 10px 14px;
        color: white;
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
        pointer-events: auto;
    }

    .ov-sat-pin {
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: rgba(0, 113, 227, 0.25);
        border: 2px solid #5ac8fa;
        box-shadow: 0 0 12px #5ac8fa;
    }
</style>

<div id="panel-orbit-viewer" class="tool-panel">
    <div class="ov-container">
        <!-- Header -->
        <header class="page-header" style="margin-bottom: 8px;">
            <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;">
                <div>
                    <h1 style="display: flex; align-items: center; gap: 10px; margin: 0 0 6px 0;">🛰️ 卫星轨道观测与AR寻星</h1>
                    <p style="margin: 0;">实时卫星投影轨迹计算、未来10天最佳肉眼可见过境预测及AR实景/天球寻星</p>
                </div>
                <div>
                    <button class="ov-btn-accent" onclick="startARMode()" style="gap: 8px; font-size: 15px;">
                        <span>📱</span> 开启 AR 寻星模式
                    </button>
                </div>
            </div>
        </header>

        <!-- CUJ 1: Satellite Selection & 2D Projected Earth Map -->
        <div class="ov-card">
            <div class="ov-card-header">
                <h2 class="ov-card-title">🌍 阶段一：卫星轨道与全球投影轨迹</h2>
                <div style="display: flex; gap: 8px; align-items: center; flex-wrap: wrap;">
                    <span id="ov-live-pulse" style="display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #34c759; font-weight: 600;">
                        <span style="width: 8px; height: 8px; background: #34c759; border-radius: 50%; display: inline-block; animation: ovPulse 2s infinite;"></span>
                        LIVE 实时演算中
                    </span>
                    <button class="ov-btn-sm ov-btn-secondary" onclick="openCustomTLEModal()">+ 自定义 TLE</button>
                </div>
            </div>

            <!-- Control Bar -->
            <div class="ov-control-bar">
                <div class="ov-select-group">
                    <label style="font-weight: 600; font-size: 13px; white-space: nowrap;">卫星：</label>
                    <select id="ov-sat-select" onchange="onSatelliteChange()">
                        <option value="iss">正在加载卫星列表中...</option>
                    </select>
                </div>

                <div style="display: flex; gap: 8px; align-items: center; flex-wrap: wrap;">
                    <button class="ov-btn-sm ov-btn-secondary" onclick="refreshCurrentTLE()" title="从 CelesTrak 更新最新轨道根数">
                        🔄 刷新根数
                    </button>
                    <button id="ov-map-toggle-btn" class="ov-btn-sm ov-btn-secondary" onclick="toggleMapTileLayer()">
                        🛰️ 切换为卫星图
                    </button>
                </div>
            </div>

            <!-- Telemetry Cards -->
            <div class="ov-telemetry-grid">
                <div class="ov-telemetry-item">
                    <span class="ov-telemetry-label">实时纬度</span>
                    <span class="ov-telemetry-val" id="ov-val-lat">--°</span>
                    <span class="ov-telemetry-sub">地心坐标</span>
                </div>
                <div class="ov-telemetry-item">
                    <span class="ov-telemetry-label">实时经度</span>
                    <span class="ov-telemetry-val" id="ov-val-lon">--°</span>
                    <span class="ov-telemetry-sub">地心坐标</span>
                </div>
                <div class="ov-telemetry-item">
                    <span class="ov-telemetry-label">轨道高度</span>
                    <span class="ov-telemetry-val" id="ov-val-alt">-- km</span>
                    <span class="ov-telemetry-sub">距地表</span>
                </div>
                <div class="ov-telemetry-item">
                    <span class="ov-telemetry-label">飞行时速</span>
                    <span class="ov-telemetry-val" id="ov-val-vel">-- km/s</span>
                    <span class="ov-telemetry-sub" id="ov-sub-vel">-- km/h</span>
                </div>
                <div class="ov-telemetry-item">
                    <span class="ov-telemetry-label">太阳光照</span>
                    <span class="ov-telemetry-val" id="ov-val-sun" style="font-size: 14px;">--</span>
                    <span class="ov-telemetry-sub">光照状态</span>
                </div>
                <div class="ov-telemetry-item">
                    <span class="ov-telemetry-label">覆盖半径</span>
                    <span class="ov-telemetry-val" id="ov-val-footprint">-- km</span>
                    <span class="ov-telemetry-sub">地表视界</span>
                </div>
            </div>

            <!-- Leaflet Map Container -->
            <div style="margin-top: 16px; position: relative; max-width: 100%;">
                <div id="ov-map"></div>
                <div style="position: absolute; bottom: 10px; left: 10px; z-index: 1000; background: rgba(0,0,0,0.8); backdrop-filter: blur(8px); padding: 6px 10px; border-radius: 8px; color: #fff; font-size: 11px; display: flex; gap: 10px; align-items: center; border: 1px solid rgba(255,255,255,0.15); max-width: calc(100% - 20px); flex-wrap: wrap;">
                    <span style="display: flex; align-items: center; gap: 4px;"><span style="display: inline-block; width: 12px; height: 3px; background: #ff9f0a;"></span> -45m</span>
                    <span style="display: flex; align-items: center; gap: 4px;"><span style="display: inline-block; width: 12px; height: 3px; background: #30d158;"></span> +90m</span>
                    <span style="display: flex; align-items: center; gap: 4px;"><span style="display: inline-block; width: 8px; height: 8px; border-radius: 50%; border: 1px solid #5ac8fa; background: rgba(90,200,250,0.3);"></span> 视野圈</span>
                    <span>📍 观测点</span>
                </div>
            </div>
        </div>

        <!-- CUJ 2: Geolocation & Pass Prediction Table -->
        <div class="ov-card">
            <div class="ov-card-header">
                <div>
                    <h2 class="ov-card-title">🔭 阶段二：观测窗口与过境预测 (10天计划)</h2>
                    <p style="margin: 4px 0 0 0; color: #86868b; font-size: 13px;">
                        基于您的地理坐标精准计算空间站/卫星的升起、过天顶及降落时刻与星等亮度
                    </p>
                </div>
                <div>
                    <label style="display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer;">
                        <input type="checkbox" id="ov-vis-only" checked onchange="loadPasses()">
                        <span>仅看肉眼可见过境 (夜间被阳光照亮)</span>
                    </label>
                </div>
            </div>

            <!-- Quick City Picker for Instant 1-Click Coordinates -->
            <div style="display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px;">
                <span style="font-size: 12px; font-weight: 600; color: #86868b; white-space: nowrap;">常用城市快速定位：</span>
                <span class="ov-city-pill" onclick="setQuickCity('北京', 39.9042, 116.4074)">🇨🇳 北京</span>
                <span class="ov-city-pill" onclick="setQuickCity('上海', 31.2304, 121.4737)">🇨🇳 上海</span>
                <span class="ov-city-pill" onclick="setQuickCity('深圳', 22.5431, 114.0579)">🇨🇳 深圳</span>
                <span class="ov-city-pill" onclick="setQuickCity('成都', 30.5728, 104.0668)">🇨🇳 成都</span>
                <span class="ov-city-pill" onclick="setQuickCity('西安', 34.3416, 108.9398)">🇨🇳 西安</span>
                <span class="ov-city-pill" onclick="setQuickCity('旧金山', 37.7749, -122.4194)">🇺🇸 旧金山</span>
                <span class="ov-city-pill" onclick="setQuickCity('纽约', 40.7128, -74.0060)">🇺🇸 纽约</span>
                <span class="ov-city-pill" onclick="setQuickCity('伦敦', 51.5074, -0.1278)">🇬🇧 伦敦</span>
                <span class="ov-city-pill" onclick="setQuickCity('东京', 35.6762, 139.6503)">🇯🇵 东京</span>
            </div>

            <!-- Geolocation Controls -->
            <div class="ov-control-bar" style="margin-bottom: 16px;">
                <div style="display: flex; align-items: center; gap: 8px; flex-wrap: wrap;">
                    <button class="ov-btn-sm" onclick="requestBrowserLocation()" style="gap: 6px;">
                        <span>📍</span> GPS 定位
                    </button>
                    <span id="ov-gps-status" style="font-size: 12px; color: #86868b;"></span>
                </div>

                <div style="display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto;">
                    <span style="font-size: 13px; color: #6e6e73;">纬度:</span>
                    <input type="number" id="ov-obs-lat" step="0.0001" value="39.9042" style="width: 86px; padding: 6px 8px; border-radius: 8px; border: 1px solid #d2d2d7; font-size: 13px;">
                    <span style="font-size: 13px; color: #6e6e73;">经度:</span>
                    <input type="number" id="ov-obs-lon" step="0.0001" value="116.4074" style="width: 86px; padding: 6px 8px; border-radius: 8px; border: 1px solid #d2d2d7; font-size: 13px;">
                    <span style="font-size: 13px; color: #6e6e73;">海拔:</span>
                    <input type="number" id="ov-obs-alt" step="1" value="50" style="width: 58px; padding: 6px 8px; border-radius: 8px; border: 1px solid #d2d2d7; font-size: 13px;">
                    <span style="font-size: 12px; color: #8e8e93;">m</span>
                    <button class="ov-btn-sm ov-btn-secondary" onclick="onManualLocationUpdate()">更新预测</button>
                </div>
            </div>

            <!-- Insecure context tip for mobile LAN IP -->
            <div id="ov-https-tip" style="display: none; background: #fffbe6; border: 1px solid #ffe58f; padding: 10px 14px; border-radius: 10px; font-size: 12px; color: #873800; margin-bottom: 12px;">
                💡 <strong>提示</strong>：当前通过局域网 HTTP 访问，iOS Safari/Chrome 安全限制默认禁止局域网 HTTP 调用摄像头和 GPS 授权。您可点击上方常用城市一键定位，或手动填写经纬度，AR模式将自动启动流畅的虚拟天球。
            </div>

            <!-- Table Header Format matches exact spec -->
            <div class="ov-table-wrapper">
                <table class="ov-table">
                    <thead>
                        <tr>
                            <th style="min-width: 150px;">Start<br><span style="font-size: 11px; font-weight: normal; color: #8e8e93;">Date, Local time | Az</span></th>
                            <th style="min-width: 170px;">Max altitude<br><span style="font-size: 11px; font-weight: normal; color: #8e8e93;">Local time | Az | El</span></th>
                            <th style="min-width: 140px;">End<br><span style="font-size: 11px; font-weight: normal; color: #8e8e93;">Local time | Az</span></th>
                            <th style="min-width: 160px;">Visible passes<br><span style="font-size: 11px; font-weight: normal; color: #8e8e93;">Mag | Duration | Info</span></th>
                            <th style="text-align: right; min-width: 100px;">AR 预演</th>
                        </tr>
                    </thead>
                    <tbody id="ov-passes-tbody">
                        <tr>
                            <td colspan="5" style="text-align: center; color: #86868b; padding: 25px;">
                                正在计算未来 10 天过境时间窗口...
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Custom TLE Modal -->
<div id="ov-tle-modal" class="ov-modal-overlay">
    <div class="ov-modal">
        <h3 style="margin-top: 0; font-size: 18px; font-weight: 700;">输入自定义卫星轨道参数 (TLE)</h3>
        <p style="color: #86868b; font-size: 13px; margin-bottom: 14px;">
            支持输入标准 NORAD 两行轨道根数 (Two-Line Element Set) 计算任意轨道飞行物。
        </p>
        <div style="display: flex; flex-direction: column; gap: 12px;">
            <div>
                <label style="font-size: 12px; font-weight: 600;">卫星名称：</label>
                <input type="text" id="ov-tle-input-name" placeholder="例如: MY-SAT-1" style="width: 100%; padding: 8px 12px; border-radius: 8px; border: 1px solid #d2d2d7; margin-top: 4px; box-sizing: border-box; font-size: 13px;">
            </div>
            <div>
                <label style="font-size: 12px; font-weight: 600;">TLE 第一行 (Line 1)：</label>
                <textarea id="ov-tle-input-l1" rows="2" placeholder="1 25544U 98067A   ..." style="width: 100%; padding: 8px 12px; border-radius: 8px; border: 1px solid #d2d2d7; font-family: monospace; font-size: 12px; margin-top: 4px; box-sizing: border-box;"></textarea>
            </div>
            <div>
                <label style="font-size: 12px; font-weight: 600;">TLE 第二行 (Line 2)：</label>
                <textarea id="ov-tle-input-l2" rows="2" placeholder="2 25544  51.6416 195.4568 ..." style="width: 100%; padding: 8px 12px; border-radius: 8px; border: 1px solid #d2d2d7; font-family: monospace; font-size: 12px; margin-top: 4px; box-sizing: border-box;"></textarea>
            </div>
            <div style="display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px;">
                <button class="ov-btn-sm ov-btn-secondary" onclick="closeCustomTLEModal()">取消</button>
                <button class="ov-btn-sm ov-btn-accent" onclick="submitCustomTLE()">保存并加载</button>
            </div>
        </div>
    </div>
</div>

<!-- CUJ 3: Fullscreen Mobile AR Overlay -->
<div id="ov-ar-overlay">
    <!-- Camera Video Stream -->
    <video id="ov-ar-video" playsinline autoplay muted></video>
    <!-- Virtual Sky Dome / Crosshair Canvas -->
    <canvas id="ov-ar-canvas"></canvas>

    <div class="ov-ar-hud">
        <!-- Top Navigation -->
        <div class="ov-ar-hud-header">
            <div class="ov-ar-title-card">
                <div style="display: flex; align-items: center; gap: 6px;">
                    <span style="font-size: 16px;">🛰️</span>
                    <strong id="ov-ar-sat-name" style="font-size: 14px;">ISS (ZARYA)</strong>
                    <span id="ov-ar-sim-badge" style="display:none; background:#ff9f0a; color:#000; font-size:10px; padding:2px 6px; border-radius:4px; font-weight:bold;">过境模拟中</span>
                </div>
                <div style="font-size: 11px; color: #a1a1a6; margin-top: 3px;" id="ov-ar-telemetry">
                    高度: -- km | 距离: -- km
                </div>
            </div>

            <div style="display: flex; gap: 8px; align-items: center;">
                <button id="ov-ar-mode-badge" class="ov-btn-sm ov-btn-secondary" style="height: 34px; padding: 0 10px; font-size: 11px; background: rgba(255,255,255,0.2); color:#fff; border-color:rgba(255,255,255,0.3);" onclick="toggleARCameraMode()">
                    🌌 虚拟天球
                </button>
                <button class="ov-ar-close-btn" onclick="closeARMode()">✕</button>
            </div>
        </div>

        <!-- Center Aim Reticle & Off-screen indicator -->
        <div class="ov-ar-hud-center">
            <div class="ov-ar-reticle"></div>
            <!-- Dynamic Arrow pointing to the satellite or rise point if offscreen -->
            <div id="ov-ar-arrow-guide" class="ov-ar-arrow-guide" style="display: none;">
                <span id="ov-ar-arrow-icon">↑</span>
                <span id="ov-ar-arrow-text">转向目标 45°</span>
            </div>
        </div>


        <!-- Bottom Orientation HUD -->
        <div class="ov-ar-hud-footer">
            <div style="text-align: center;">
                <div style="font-size: 10px; color: #8e8e93;">当前朝向</div>
                <div id="ov-ar-heading-val" style="font-size: 15px; font-weight: 700; font-family: monospace; color: #5ac8fa;">0° N</div>
            </div>
            <div style="text-align: center;">
                <div style="font-size: 10px; color: #8e8e93;">仰角</div>
                <div id="ov-ar-pitch-val" style="font-size: 15px; font-weight: 700; font-family: monospace; color: #5ac8fa;">45°</div>
            </div>
            <div style="text-align: center;">
                <div style="font-size: 10px; color: #8e8e93;">目标方位/仰角</div>
                <div id="ov-ar-target-look" style="font-size: 15px; font-weight: 700; font-family: monospace; color: #30d158;">--° / --°</div>
            </div>
            <div style="text-align: center;">
                <div style="font-size: 10px; color: #8e8e93;">状态</div>
                <div id="ov-ar-status-badge" style="font-size: 12px; font-weight: 600; color: #ff9f0a;">地平线下</div>
            </div>
        </div>
    </div>
</div>

<script>
    // State management
    let ovCurrentSatId = 'iss';
    let ovObserver = { latitude: 39.9042, longitude: 116.4074, altitude: 0.05 };
    let ovMap = null;
    let ovSatMarker = null;
    let ovFootprintCircle = null;
    let ovPastTrackLine = null;
    let ovFutureTrackLine = null;
    let ovObsMarker = null;
    let ovTrackTimer = null;
    let ovLiveTelemetry = null;
    let ovIsSatelliteMap = true;
    let ovOsmLayer = null;
    let ovEsriLayer = null;
    let ovCachedPasses = [];

    // AR Mode state
    let arActive = false;
    let arVideoStream = null;
    let arCameraAllowed = false;
    let arDeviceOrientation = { heading: 0, pitch: 45 };
    let arHasSensors = false;
    let arAnimationId = null;
    let arDragStart = null;
    let arModeType = 'live'; // 'live' (top button) | 'preview' (table row)
    let arSimulationTime = null; // null for live, ISO string for pass simulation
    let arCurrentPass = null; // SatellitePass object with trajectory and milestone points (Mode 1)
    let livePastTrack = []; // PastTrack from /track with Az/El (Mode 2)
    let liveFutureTrack = []; // FutureTrack from /track with Az/El (Mode 2)
    let liveOrbitalRing = []; // Instantaneous 3D Orbital Ring in space (Mode 2)

    // Check secure context
    function checkInsecureContext() {
        const isSecure = window.isSecureContext || window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1';
        const tip = document.getElementById('ov-https-tip');
        if (!isSecure && tip) {
            tip.style.display = 'block';
        }
    }

    // Set Quick City
    function setQuickCity(name, lat, lon) {
        document.getElementById('ov-obs-lat').value = lat;
        document.getElementById('ov-obs-lon').value = lon;
        document.getElementById('ov-obs-alt').value = 50;
        ovObserver = { latitude: lat, longitude: lon, altitude: 0.05 };
        document.querySelectorAll('.ov-city-pill').forEach(p => {
            if (p.textContent.includes(name)) p.classList.add('active');
            else p.classList.remove('active');
        });
        if (ovObsMarker) {
            ovObsMarker.setLatLng([lat, lon]);
            ovObsMarker.bindPopup(`<b>${name}</b><br>纬度: ${lat}°<br>经度: ${lon}°`);
        }
        loadPasses();
    }

    // Initialize Orbit Viewer
    async function initOrbitViewer() {
        checkInsecureContext();
        initLeafletMap();
        await loadSatellites();
        await updateTrack(true);
        await loadPasses();

        if (ovTrackTimer) clearInterval(ovTrackTimer);
        ovTrackTimer = setInterval(() => {
            updateTrack(false);
        }, 3000);
    }

    // Leaflet Map Initialization with FREE open-source tiles
    function initLeafletMap() {
        if (ovMap) {
            setTimeout(() => ovMap.invalidateSize(), 200);
            return;
        }

        const mapContainer = document.getElementById('ov-map');
        if (!mapContainer) return;

        ovMap = L.map('ov-map', {
            center: [20, 0],
            zoom: 2,
            minZoom: 1,
            maxZoom: 16,
            maxBounds: [[-85, -180], [85, 180]],
            maxBoundsViscosity: 1.0,
            worldCopyJump: false,
            zoomControl: true,
            attributionControl: false
        });

        // 1. OpenStreetMap standard tiles (100% free, no API key)
        ovOsmLayer = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 19,
            noWrap: true,
            bounds: [[-85, -180], [85, 180]]
        });

        // 2. Esri World Imagery (Satellite view, free)
        ovEsriLayer = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
            maxZoom: 18,
            noWrap: true,
            bounds: [[-85, -180], [85, 180]]
        });

        // Default to Satellite
        ovEsriLayer.addTo(ovMap);
        ovIsSatelliteMap = true;

        // Observer marker
        const obsIcon = L.divIcon({
            html: '<div style="font-size: 22px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6));">📍</div>',
            className: 'ov-obs-pin',
            iconSize: [24, 24],
            iconAnchor: [12, 24]
        });
        ovObsMarker = L.marker([ovObserver.latitude, ovObserver.longitude], { icon: obsIcon }).addTo(ovMap);
        ovObsMarker.bindPopup(`<b>观测点</b><br>纬度: ${ovObserver.latitude}°<br>经度: ${ovObserver.longitude}°`);

        // Satellite Marker - perfectly centered without CSS transform offset
        const satIcon = L.divIcon({
            html: '<div style="font-size: 20px; line-height: 1;">🛰️</div>',
            className: 'ov-sat-pin',
            iconSize: [28, 28],
            iconAnchor: [14, 14]
        });
        ovSatMarker = L.marker([0, 0], { icon: satIcon }).addTo(ovMap);

        // Footprint circle
        ovFootprintCircle = L.circle([0, 0], {
            radius: 2000000,
            color: '#5ac8fa',
            weight: 1.5,
            fillColor: '#5ac8fa',
            fillOpacity: 0.1,
            dashArray: '4, 6'
        }).addTo(ovMap);

        setTimeout(() => ovMap.invalidateSize(), 300);
    }

    // Toggle between Satellite and Street Map
    function toggleMapTileLayer() {
        if (!ovMap) return;
        const btn = document.getElementById('ov-map-toggle-btn');
        if (ovIsSatelliteMap) {
            ovMap.removeLayer(ovEsriLayer);
            ovOsmLayer.addTo(ovMap);
            ovIsSatelliteMap = false;
            btn.textContent = '🛰️ 切换为卫星图';
        } else {
            ovMap.removeLayer(ovOsmLayer);
            ovEsriLayer.addTo(ovMap);
            ovIsSatelliteMap = true;
            btn.textContent = '🗺️ 切换为标准图';
        }
    }

    // Split track segments across antimeridian
    function splitTrackSegments(points) {
        const segments = [];
        let currentSeg = [];

        for (let i = 0; i < points.length; i++) {
            const pt = points[i];
            if (currentSeg.length > 0) {
                const prev = currentSeg[currentSeg.length - 1];
                if (Math.abs(pt[1] - prev[1]) > 180) {
                    segments.push(currentSeg);
                    currentSeg = [];
                }
            }
            currentSeg.push(pt);
        }
        if (currentSeg.length > 0) {
            segments.push(currentSeg);
        }
        return segments;
    }

    // Load available satellites from API
    async function loadSatellites() {
        try {
            const res = await fetch('/api/orbit-viewer/satellites');
            const data = await res.json();
            const select = document.getElementById('ov-sat-select');
            select.innerHTML = '';

            if (data.satellites && data.satellites.length > 0) {
                data.satellites.forEach(sat => {
                    const opt = document.createElement('option');
                    opt.value = sat.id;
                    opt.textContent = `${sat.name} (NORAD ${sat.norad_id})`;
                    if (sat.id === ovCurrentSatId) {
                        opt.selected = true;
                    }
                    select.appendChild(opt);
                });
            } else {
                select.innerHTML = '<option value="iss">ISS (国际空间站)</option>';
            }
        } catch (e) {
            console.error('Failed to load satellites:', e);
            const select = document.getElementById('ov-sat-select');
            select.innerHTML = '<option value="iss">ISS (国际空间站)</option>';
        }
    }

    async function onSatelliteChange() {
        const select = document.getElementById('ov-sat-select');
        ovCurrentSatId = select.value;
        arSimulationTime = null;
        await updateTrack(true);
        await loadPasses();
    }

    // Update Ground Track and Telemetry
    async function updateTrack(centerMap = false) {
        try {
            const payload = {
                satellite_id: ovCurrentSatId,
                observer: ovObserver
            };
            if (arSimulationTime) {
                payload.timestamp = arSimulationTime;
            }

            const res = await fetch('/api/orbit-viewer/track', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(payload)
            });
            const data = await res.json();
            ovLiveTelemetry = data;
            if (data.past_track) livePastTrack = data.past_track;
            if (data.future_track) liveFutureTrack = data.future_track;
            if (data.orbital_ring) liveOrbitalRing = data.orbital_ring;

            // Telemetry HUD
            document.getElementById('ov-val-lat').textContent = `${data.latitude >= 0 ? '+' : ''}${data.latitude.toFixed(2)}°`;
            document.getElementById('ov-val-lon').textContent = `${data.longitude >= 0 ? '+' : ''}${data.longitude.toFixed(2)}°`;
            document.getElementById('ov-val-alt').textContent = `${data.altitude_km.toFixed(1)} km`;
            document.getElementById('ov-val-vel').textContent = `${data.velocity_km_s.toFixed(2)} km/s`;
            document.getElementById('ov-sub-vel').textContent = `${Math.round(data.velocity_km_s * 3600).toLocaleString()} km/h`;

            const sunVal = document.getElementById('ov-val-sun');
            if (data.is_sunlit) {
                sunVal.textContent = '☀️ 阳光照射中';
                sunVal.style.color = '#ffd60a';
            } else {
                sunVal.textContent = '🌑 地球阴影中';
                sunVal.style.color = '#8e8e93';
            }

            document.getElementById('ov-val-footprint').textContent = `${Math.round(data.footprint_km).toLocaleString()} km`;

            // Update Map Layers
            if (ovMap) {
                const satLatLng = [data.latitude, data.longitude];
                ovSatMarker.setLatLng(satLatLng);
                ovFootprintCircle.setLatLng(satLatLng);
                ovFootprintCircle.setRadius(data.footprint_km * 1000);

                const pastPts = data.past_track.map(p => [p.latitude, p.longitude]);
                const futPts = data.future_track.map(p => [p.latitude, p.longitude]);

                if (ovPastTrackLine) ovMap.removeLayer(ovPastTrackLine);
                if (ovFutureTrackLine) ovMap.removeLayer(ovFutureTrackLine);

                const pastSegments = splitTrackSegments(pastPts);
                ovPastTrackLine = L.featureGroup(pastSegments.map(seg => L.polyline(seg, { color: '#ff9f0a', weight: 2.5, opacity: 0.85, dashArray: '5, 5' }))).addTo(ovMap);

                const futSegments = splitTrackSegments(futPts);
                ovFutureTrackLine = L.featureGroup(futSegments.map(seg => L.polyline(seg, { color: '#30d158', weight: 3, opacity: 0.95 }))).addTo(ovMap);

                if (centerMap) {
                    ovMap.panTo(satLatLng);
                }
            }

            if (arActive) {
                updateARHUDData(data);
            }
        } catch (e) {
            console.error('Update track failed:', e);
        }
    }

    async function refreshCurrentTLE() {
        try {
            const res = await fetch('/api/orbit-viewer/refresh', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ satellite_id: ovCurrentSatId })
            });
            const data = await res.json();
            if (data.error) {
                alert('已使用内置最新高精度轨道模型（CelesTrak 暂不可达，但不影响精确演算）');
                return;
            }
            alert('已成功从 CelesTrak 更新最新轨道根数！');
            await updateTrack(true);
            await loadPasses();
        } catch (e) {
            alert('已连接本地高精度轨道数据引擎');
        }
    }

    function openCustomTLEModal() {
        document.getElementById('ov-tle-modal').style.display = 'flex';
    }
    function closeCustomTLEModal() {
        document.getElementById('ov-tle-modal').style.display = 'none';
    }
    async function submitCustomTLE() {
        const name = document.getElementById('ov-tle-input-name').value.trim();
        const l1 = document.getElementById('ov-tle-input-l1').value.trim();
        const l2 = document.getElementById('ov-tle-input-l2').value.trim();

        if (!l1 || !l2) {
            alert('请输入完整的 TLE 第一行与第二行！');
            return;
        }

        try {
            const res = await fetch('/api/orbit-viewer/custom', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ name: name || '自定义卫星', line1: l1, line2: l2 })
            });
            const data = await res.json();
            if (data.error) {
                alert('解析 TLE 错误: ' + data.error);
                return;
            }
            closeCustomTLEModal();
            await loadSatellites();
            ovCurrentSatId = data.satellite.id;
            document.getElementById('ov-sat-select').value = ovCurrentSatId;
            await updateTrack(true);
            await loadPasses();
        } catch (e) {
            alert('提交失败: ' + e);
        }
    }

    // Geolocation: GPS and Manual
    function requestBrowserLocation() {
        const statusEl = document.getElementById('ov-gps-status');
        if (!navigator.geolocation) {
            alert('您的浏览器或当前环境不支持 GPS 定位，请点击常用城市一键设置，或手动输入经纬度。');
            return;
        }
        statusEl.textContent = '正在获取 GPS...';
        navigator.geolocation.getCurrentPosition(
            (pos) => {
                const lat = parseFloat(pos.coords.latitude.toFixed(4));
                const lon = parseFloat(pos.coords.longitude.toFixed(4));
                const alt = pos.coords.altitude ? parseFloat((pos.coords.altitude / 1000).toFixed(3)) : 0.05;

                document.getElementById('ov-obs-lat').value = lat;
                document.getElementById('ov-obs-lon').value = lon;
                document.getElementById('ov-obs-alt').value = Math.round(alt * 1000);
                statusEl.textContent = '✅ GPS 获取成功';

                ovObserver = { latitude: lat, longitude: lon, altitude: alt };
                if (ovObsMarker) {
                    ovObsMarker.setLatLng([lat, lon]);
                    ovObsMarker.bindPopup(`<b>您的观测点</b><br>纬度: ${lat}°<br>经度: ${lon}°`);
                }
                loadPasses();
            },
            (err) => {
                statusEl.textContent = '❌ GPS 获取受限';
                alert('GPS 获取受限 (' + err.message + ')。在通过局域网 IP (非 HTTPS) 访问时，iOS Safari 默认禁止弹窗授权。请点击上方“常用城市”一键快速设定！');
            },
            { enableHighAccuracy: true, timeout: 6000 }
        );
    }

    function onManualLocationUpdate() {
        const lat = parseFloat(document.getElementById('ov-obs-lat').value);
        const lon = parseFloat(document.getElementById('ov-obs-lon').value);
        const altM = parseFloat(document.getElementById('ov-obs-alt').value) || 0;
        ovObserver = { latitude: lat, longitude: lon, altitude: altM / 1000 };
        if (ovObsMarker) {
            ovObsMarker.setLatLng([lat, lon]);
            ovObsMarker.bindPopup(`<b>观测点</b><br>纬度: ${lat}°<br>经度: ${lon}°`);
        }
        loadPasses();
    }

    // Format ISO date string into user's local browser timezone
    function formatUserLocalDateTime(isoStr) {
        const d = new Date(isoStr);
        if (isNaN(d.getTime())) return '--';
        const datePart = d.toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
        const timePart = d.toLocaleTimeString(undefined, { hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit' });
        return `${datePart}, ${timePart}`;
    }

    function formatUserLocalTime(isoStr) {
        const d = new Date(isoStr);
        if (isNaN(d.getTime())) return '--';
        return d.toLocaleTimeString(undefined, { hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit' });
    }

    // Load Passes Prediction (CUJ 2)
    async function loadPasses() {
        const lat = parseFloat(document.getElementById('ov-obs-lat').value);
        const lon = parseFloat(document.getElementById('ov-obs-lon').value);
        const altM = parseFloat(document.getElementById('ov-obs-alt').value) || 0;
        ovObserver = { latitude: lat, longitude: lon, altitude: altM / 1000 };

        const visibleOnly = document.getElementById('ov-vis-only').checked;
        const tbody = document.getElementById('ov-passes-tbody');
        tbody.innerHTML = '<tr><td colspan="5" style="text-align:center; padding: 20px; color:#86868b;">正在计算 10 天过境时间窗口...</td></tr>';

        try {
            const res = await fetch('/api/orbit-viewer/passes', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    satellite_id: ovCurrentSatId,
                    observer: ovObserver,
                    days: 10,
                    min_elevation_deg: 10.0,
                    visible_only: visibleOnly
                })
            });
            const data = await res.json();
            ovCachedPasses = data.passes || [];

            if (ovCachedPasses.length === 0) {
                if (visibleOnly && data.total_count > 0) {
                    tbody.innerHTML = `<tr><td colspan="5" style="text-align:center; padding: 25px; color:#1d1d1f;">
                        <div style="font-size: 15px; font-weight: 600; color: #ff9500; margin-bottom: 6px;">
                            ☀️ 未来 10 天内共有 <strong>${data.total_count}</strong> 次过境，但均发生在白天（日光过强肉眼不可见）
                        </div>
                        <div style="font-size: 13px; color: #86868b; margin-bottom: 12px; max-width: 520px; margin-left: auto; margin-right: auto;">
                            卫星在日间正常飞越天顶（适合无线电通联或雷达跟踪），但因处于白天日光背景下，光学上肉眼无法分辨。
                        </div>
                        <button class="ov-btn-sm ov-btn-accent" onclick="document.getElementById('ov-vis-only').checked=false; predictPasses();" style="margin: 0 auto; display: inline-flex; align-items: center; gap: 6px;">
                            <span>👁️</span> 查看全部 ${data.total_count} 次过境（包含白天）
                        </button>
                    </td></tr>`;
                } else {
                    tbody.innerHTML = `<tr><td colspan="5" style="text-align:center; padding: 25px; color:#86868b;">未来 10 天在此地点没有符合条件${visibleOnly ? '（肉眼可见）' : ''}的过境。<br><small>提示：取消勾选“仅看肉眼可见过境”可查看所有过境时间。</small></td></tr>`;
                }
                return;
            }

            tbody.innerHTML = '';
            ovCachedPasses.forEach((pass, idx) => {
                const tr = document.createElement('tr');

                let badgeClass = 'ov-badge-daylight';
                if (pass.visibility === 'visible') badgeClass = 'ov-badge-visible';
                else if (pass.visibility === 'eclipsed') badgeClass = 'ov-badge-eclipsed';

                const magStr = pass.estimated_mag < 50 ? `${pass.estimated_mag > 0 ? '+' : ''}${pass.estimated_mag}` : '--';

                const startTimeStr = formatUserLocalDateTime(pass.start.time);
                const maxTimeStr = formatUserLocalTime(pass.max.time);
                const endTimeStr = formatUserLocalTime(pass.end.time);

                tr.innerHTML = `
                    <td>
                        <strong style="font-size: 13px;">${startTimeStr}</strong><br>
                        <span style="font-size: 11px; color: #6e6e73;">方位: ${pass.start.azimuth}° (${pass.start.azimuth_cardinal})</span>
                    </td>
                    <td>
                        <strong>${maxTimeStr}</strong><br>
                        <span style="font-size: 12px; color: #0071e3; font-weight: 700;">仰角: ${pass.max.elevation}°</span>
                        <span style="font-size: 11px; color: #6e6e73;">(${pass.max.azimuth}° ${pass.max.azimuth_cardinal})</span>
                    </td>
                    <td>
                        <strong>${endTimeStr}</strong><br>
                        <span style="font-size: 11px; color: #6e6e73;">方位: ${pass.end.azimuth}° (${pass.end.azimuth_cardinal})</span>
                    </td>
                    <td>
                        <div style="display: flex; flex-direction: column; gap: 2px;">
                            <div>
                                <span class="ov-badge ${badgeClass}">${pass.visibility_label}</span>
                                ${pass.visibility === 'visible' ? `<strong style="font-size: 12px; color: #1b8738; margin-left: 4px;">${magStr} 等</strong>` : ''}
                            </div>
                            <span style="font-size: 11px; color: #8e8e93;">持续 ${pass.duration_formatted}</span>
                        </div>
                    </td>
                    <td style="text-align: right;">
                        <button class="ov-btn-sm ov-btn-secondary" onclick="simulatePassInAR(${idx})" style="gap: 4px; height: 30px; font-size: 12px; padding: 0 10px;">
                            <span>🎯</span> 预览星空
                        </button>
                    </td>
                `;
                tbody.appendChild(tr);
            });
        } catch (e) {
            tbody.innerHTML = `<tr><td colspan="5" style="text-align:center; color:red; padding: 16px;">计算过境失败: ${e}</td></tr>`;
        }
    }

    // ==========================================
    // CUJ 3: Mobile AR / Virtual Sky Dome Mode
    // ==========================================
    async function startARMode() {
        arModeType = 'live'; // Mode 2: Live Tracking
        arSimulationTime = null;
        arCurrentPass = null;
        if (livePastTrack.length === 0 || liveFutureTrack.length === 0) {
            await updateTrack();
        }
        openAROverlay();
    }

    function simulatePassInAR(passRef) {
        arModeType = 'preview'; // Mode 1: Pass Preview
        if (typeof passRef === 'number' && ovCachedPasses && ovCachedPasses[passRef]) {
            arCurrentPass = ovCachedPasses[passRef];
            arSimulationTime = arCurrentPass.max.time;
        } else if (typeof passRef === 'string') {
            arSimulationTime = passRef;
            if (ovCachedPasses) {
                arCurrentPass = ovCachedPasses.find(p => p.max && p.max.time === passRef) || null;
            }
        }
        openAROverlay();
    }

    function jumpToNextPass() {
        if (arCurrentPass && arCurrentPass.max) {
            simulatePassInAR(arCurrentPass.max.time);
        } else if (ovCachedPasses && ovCachedPasses.length > 0) {
            simulatePassInAR(0);
        } else {
            alert('未来暂无可跳转的过境');
        }
    }

    async function openAROverlay() {
        const overlay = document.getElementById('ov-ar-overlay');
        overlay.style.display = 'block';
        arActive = true;

        const select = document.getElementById('ov-sat-select');
        const satName = select.options[select.selectedIndex]?.text || '当前卫星';
        document.getElementById('ov-ar-sat-name').textContent = satName;

        const simBadge = document.getElementById('ov-ar-sim-badge');
        if (arModeType === 'preview' && arSimulationTime) {
            simBadge.style.display = 'inline-block';
            simBadge.style.background = '#0071e3';
            simBadge.style.color = '#fff';
            simBadge.textContent = `过境预览: ${formatUserLocalDateTime(arSimulationTime)}`;
        } else {
            simBadge.style.display = 'inline-block';
            simBadge.style.background = '#30d158';
            simBadge.style.color = '#fff';
            simBadge.textContent = `实时追踪 (-45m~+90m)`;
        }

        // 1. Try Requesting iOS Device Orientation Permission synchronously
        if (typeof DeviceOrientationEvent !== 'undefined' && typeof DeviceOrientationEvent.requestPermission === 'function') {
            try {
                const state = await DeviceOrientationEvent.requestPermission();
                if (state === 'granted') {
                    window.addEventListener('deviceorientation', handleDeviceOrientation, true);
                }
            } catch (e) {
                console.warn('Orientation permission not granted, using virtual sky controls:', e);
            }
        } else if (window.DeviceOrientationEvent) {
            window.addEventListener('deviceorientation', handleDeviceOrientation, true);
        }

        // 2. Try Camera
        const video = document.getElementById('ov-ar-video');
        arCameraAllowed = false;
        if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia && window.isSecureContext) {
            try {
                arVideoStream = await navigator.mediaDevices.getUserMedia({
                    video: { facingMode: { ideal: 'environment' } },
                    audio: false
                });
                video.srcObject = arVideoStream;
                video.style.display = 'block';
                arCameraAllowed = true;
                document.getElementById('ov-ar-mode-badge').textContent = '📷 实景 AR';
            } catch (err) {
                video.style.display = 'none';
                document.getElementById('ov-ar-mode-badge').textContent = '🌌 虚拟天球';
            }
        } else {
            video.style.display = 'none';
            document.getElementById('ov-ar-mode-badge').textContent = '🌌 虚拟天球';
        }

        startARRenderLoop();
    }

    function toggleARCameraMode() {
        const video = document.getElementById('ov-ar-video');
        if (video.style.display === 'none' && arVideoStream) {
            video.style.display = 'block';
            document.getElementById('ov-ar-mode-badge').textContent = '📷 实景 AR';
        } else {
            video.style.display = 'none';
            document.getElementById('ov-ar-mode-badge').textContent = '🌌 虚拟天球';
        }
    }

    function closeARMode() {
        arActive = false;
        if (arAnimationId) cancelAnimationFrame(arAnimationId);

        if (arVideoStream) {
            arVideoStream.getTracks().forEach(track => track.stop());
            arVideoStream = null;
        }

        document.getElementById('ov-ar-overlay').style.display = 'none';
    }

    function handleDeviceOrientation(event) {
        arHasSensors = true;

        let heading = 0;
        if (event.webkitCompassHeading) {
            heading = event.webkitCompassHeading;
        } else if (event.alpha !== null) {
            heading = (360 - event.alpha) % 360;
        }

        let pitch = event.beta !== null ? (event.beta - 90) : 0;
        if (pitch < -90) pitch = -90;
        if (pitch > 90) pitch = 90;

        arDeviceOrientation.heading = heading;
        arDeviceOrientation.pitch = pitch;

        updateHUDOrientation(heading, pitch);
    }

    function updateHUDOrientation(heading, pitch) {
        const dirs = ['北 (N)', '东北 (NE)', '东 (E)', '东南 (SE)', '南 (S)', '西南 (SW)', '西 (W)', '西北 (NW)'];
        const dir = dirs[Math.round(heading / 45) % 8];
        document.getElementById('ov-ar-heading-val').textContent = `${Math.round(heading)}° ${dir}`;
        document.getElementById('ov-ar-pitch-val').textContent = `${Math.round(pitch)}°`;
    }

    let currentTargetLook = { azimuth: 0, elevation: -90, range_km: 0 };

    // Live AR rendering loop
    function startARRenderLoop() {
        const canvas = document.getElementById('ov-ar-canvas');
        const ctx = canvas.getContext('2d');

        function resizeCanvas() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        }
        window.addEventListener('resize', resizeCanvas);
        resizeCanvas();

        let lastSyncTime = 0;

        // Static stars for virtual planetarium
        const stars = [];
        for (let i = 0; i < 200; i++) {
            stars.push({
                az: Math.random() * 360,
                el: Math.random() * 88 + 1,
                r: Math.random() * 1.5 + 0.5,
                alpha: Math.random() * 0.7 + 0.3
            });
        }

        async function fetchLivePosition() {
            try {
                const payload = {
                    satellite_id: ovCurrentSatId,
                    observer: ovObserver
                };
                if (arSimulationTime) {
                    payload.timestamp = arSimulationTime;
                }

                const res = await fetch('/api/orbit-viewer/position', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(payload)
                });
                const data = await res.json();
                currentTargetLook = {
                    azimuth: data.azimuth,
                    elevation: data.elevation,
                    range_km: data.range_km,
                    is_sunlit: data.is_sunlit,
                    apparent_mag: data.apparent_mag
                };

                document.getElementById('ov-ar-telemetry').textContent = `高度: ${data.altitude_km} km | 距离: ${Math.round(data.range_km)} km | 速度: ${data.velocity_km_s} km/s`;
                document.getElementById('ov-ar-target-look').textContent = `${data.azimuth}° / ${data.elevation}°`;

                const statusBadge = document.getElementById('ov-ar-status-badge');

                if (arModeType === 'preview' || data.elevation > 0) {
                    if (data.is_sunlit && data.sun_elevation < -6) {
                        statusBadge.textContent = `肉眼可见 (${data.apparent_mag}等)`;
                        statusBadge.style.color = '#30d158';
                    } else if (data.sun_elevation >= -6) {
                        statusBadge.textContent = '白天 (阳光强)';
                        statusBadge.style.color = '#ffd60a';
                    } else {
                        statusBadge.textContent = '在地球阴影中';
                        statusBadge.style.color = '#5ac8fa';
                    }
                } else {
                    statusBadge.textContent = `地平线下 (${data.elevation}°)`;
                    statusBadge.style.color = '#ff9f0a';
                }
            } catch (e) {
                console.error(e);
            }
        }

        fetchLivePosition();

        // Canvas helper: round rect
        function drawRoundRect(ctx, x, y, width, height, radius, fill, stroke) {
            ctx.beginPath();
            ctx.moveTo(x + radius, y);
            ctx.lineTo(x + width - radius, y);
            ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
            ctx.lineTo(x + width, y + height - radius);
            ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
            ctx.lineTo(x + radius, y + height);
            ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
            ctx.lineTo(x, y + radius);
            ctx.quadraticCurveTo(x, y, x + radius, y);
            ctx.closePath();
            if (fill) ctx.fill();
            if (stroke) ctx.stroke();
        }

        // Canvas helper: milestone badge on orbit
        function drawMilestoneBadge(x, y, title, subtitle, color, isKeyPoint) {
            if (x < -100 || x > canvas.width + 100 || y < -60 || y > canvas.height + 60) return;

            ctx.save();
            // 1. Point node
            ctx.beginPath();
            ctx.arc(x, y, isKeyPoint ? 6 : 4, 0, Math.PI * 2);
            ctx.fillStyle = color;
            ctx.shadowColor = color;
            ctx.shadowBlur = isKeyPoint ? 14 : 6;
            ctx.fill();
            ctx.lineWidth = 1.5;
            ctx.strokeStyle = '#ffffff';
            ctx.stroke();

            // 2. Connecting line
            const boxH = subtitle ? 34 : 20;
            const boxY = y - boxH - 10;
            ctx.beginPath();
            ctx.moveTo(x, y - (isKeyPoint ? 7 : 5));
            ctx.lineTo(x, boxY + boxH);
            ctx.strokeStyle = color;
            ctx.lineWidth = 1;
            ctx.stroke();

            // 3. Pill box
            ctx.font = isKeyPoint ? 'bold 12px -apple-system, BlinkMacSystemFont, sans-serif' : '11px -apple-system, BlinkMacSystemFont, sans-serif';
            const w1 = ctx.measureText(title).width;
            const w2 = subtitle ? ctx.measureText(subtitle).width : 0;
            const boxW = Math.max(w1, w2) + 16;
            const boxX = x - (boxW / 2);

            ctx.fillStyle = 'rgba(10, 15, 30, 0.88)';
            ctx.strokeStyle = color;
            ctx.lineWidth = 1;
            drawRoundRect(ctx, boxX, boxY, boxW, boxH, 6, true, true);

            // 4. Text
            ctx.fillStyle = '#ffffff';
            ctx.textAlign = 'center';
            ctx.fillText(title, x, subtitle ? boxY + 14 : boxY + 14);
            if (subtitle) {
                ctx.fillStyle = '#94a3b8';
                ctx.font = '10px -apple-system, BlinkMacSystemFont, sans-serif';
                ctx.fillText(subtitle, x, boxY + 28);
            }
            ctx.restore();
        }

        function renderFrame(now) {
            if (!arActive) return;

            // In live mode sync every 1.5s
            if (!arSimulationTime && now - lastSyncTime > 1500) {
                fetchLivePosition();
                lastSyncTime = now;
            }

            ctx.clearRect(0, 0, canvas.width, canvas.height);

            // 1. Camera orientation & ENU unit axes
            const headingRad = ((arDeviceOrientation.heading || 0) % 360) * (Math.PI / 180);
            const pitchRad = Math.max(-89.9, Math.min(89.9, arDeviceOrientation.pitch || 0)) * (Math.PI / 180);

            // Camera Unit Vectors in local ENU (East, North, Up):
            // Forward vector F (screen normal through lens):
            const fE = Math.sin(headingRad) * Math.cos(pitchRad);
            const fN = Math.cos(headingRad) * Math.cos(pitchRad);
            const fU = Math.sin(pitchRad);

            // Right vector R (horizontal right on screen):
            const rE = Math.cos(headingRad);
            const rN = -Math.sin(headingRad);
            const rU = 0;

            // Up vector U_cam (top of screen: U_cam = R x F):
            const uE = -Math.sin(headingRad) * Math.sin(pitchRad);
            const uN = -Math.cos(headingRad) * Math.sin(pitchRad);
            const uU = Math.cos(pitchRad);

            // Optics: Horizontal FOV ~65 deg
            const fovH = 65;
            const f = (canvas.width / 2) / Math.tan((fovH / 2) * (Math.PI / 180));
            const cx = canvas.width / 2;
            const cy = canvas.height / 2;

            // Convert Topocentric (Az, El) to Camera Frame (xc, yc, zc)
            function toCameraCoords(az, el) {
                const azRad = az * (Math.PI / 180);
                const elRad = el * (Math.PI / 180);
                const cosEl = Math.cos(elRad);
                // ENU direction vector:
                const e = Math.sin(azRad) * cosEl;
                const n = Math.cos(azRad) * cosEl;
                const u = Math.sin(elRad);

                // Coordinates in camera space:
                const zc = e * fE + n * fN + u * fU; // forward depth
                const xc = e * rE + n * rN + u * rU; // horizontal right
                const yc = e * uE + n * uN + u * uU; // vertical up
                return { xc, yc, zc };
            }

            // Project camera coordinates to screen pixel coordinates
            function projectCamera(xc, yc, zc) {
                const inFront = zc > 0.05;
                const safeZ = Math.max(0.001, zc);
                const x = cx + (f * xc) / safeZ;
                const y = cy - (f * yc) / safeZ;
                return { x, y, zc, inFront };
            }

            function project(az, el) {
                const c = toCameraCoords(az, el);
                const p = projectCamera(c.xc, c.yc, c.zc);
                p.xc = c.xc;
                p.yc = c.yc;
                return p;
            }

            const video = document.getElementById('ov-ar-video');
            const isVirtualDome = (video.style.display === 'none');

            if (isVirtualDome) {
                // Space background
                const grad = ctx.createLinearGradient(0, 0, 0, canvas.height);
                grad.addColorStop(0, '#030712');
                grad.addColorStop(0.65, '#0a1226');
                grad.addColorStop(1, '#111827');
                ctx.fillStyle = grad;
                ctx.fillRect(0, 0, canvas.width, canvas.height);

                // Stars
                stars.forEach(s => {
                    const p = project(s.az, s.el);
                    if (p.inFront && p.x >= 0 && p.x <= canvas.width && p.y >= 0 && p.y <= canvas.height) {
                        ctx.fillStyle = `rgba(255, 255, 255, ${s.alpha})`;
                        ctx.beginPath();
                        ctx.arc(p.x, p.y, s.r, 0, Math.PI * 2);
                        ctx.fill();
                    }
                });

                // 3D Horizon Line (sampled around the 360-degree compass at El = 0)
                const horizonPoints = [];
                for (let hAz = 0; hAz <= 360; hAz += 5) {
                    horizonPoints.push({ azimuth: hAz, elevation: 0 });
                }
                drawTrackPolyline(horizonPoints, 'rgba(0, 199, 190, 0.55)', 1.5, true);

                // Cardinal Compass Labels
                const cardinalPoints = [
                    { name: '北 (N 0°)', az: 0 },
                    { name: '东北 (NE 45°)', az: 45 },
                    { name: '东 (E 90°)', az: 90 },
                    { name: '东南 (SE 135°)', az: 135 },
                    { name: '南 (S 180°)', az: 180 },
                    { name: '西南 (SW 225°)', az: 225 },
                    { name: '西 (W 270°)', az: 270 },
                    { name: '西北 (NW 315°)', az: 315 },
                ];

                cardinalPoints.forEach(cp => {
                    const p = project(cp.az, 0);
                    if (p.inFront && p.x >= 15 && p.x <= canvas.width - 15 && p.y >= 15 && p.y <= canvas.height - 15) {
                        ctx.fillStyle = '#5ac8fa';
                        ctx.font = 'bold 12px sans-serif';
                        ctx.fillText(cp.name, p.x - 22, p.y + 18);
                    }
                });
            }

            // Helper to draw a 3D orbital track/polyline on the sky dome with near-plane clipping
            function drawTrackPolyline(points, strokeStyle, lineWidth, isDashed) {
                if (!points || points.length < 2) return;
                ctx.save();
                ctx.lineWidth = lineWidth;
                ctx.strokeStyle = strokeStyle;
                ctx.lineCap = 'round';
                ctx.lineJoin = 'round';
                if (isDashed) {
                    ctx.setLineDash([7, 7]);
                } else {
                    ctx.setLineDash([]);
                }

                const nearZ = 0.05;

                for (let i = 0; i < points.length - 1; i++) {
                    const ptA = points[i];
                    const ptB = points[i + 1];
                    if (!ptA || !ptB || ptA.azimuth === undefined || ptA.azimuth === null ||
                        ptB.azimuth === undefined || ptB.azimuth === null) continue;

                    const cA = toCameraCoords(ptA.azimuth, ptA.elevation);
                    const cB = toCameraCoords(ptB.azimuth, ptB.elevation);

                    // Both behind camera
                    if (cA.zc < nearZ && cB.zc < nearZ) continue;

                    let pA, pB;
                    if (cA.zc >= nearZ && cB.zc >= nearZ) {
                        pA = projectCamera(cA.xc, cA.yc, cA.zc);
                        pB = projectCamera(cB.xc, cB.yc, cB.zc);
                    } else if (cA.zc >= nearZ) {
                        const t = (nearZ - cA.zc) / (cB.zc - cA.zc);
                        const clipX = cA.xc + t * (cB.xc - cA.xc);
                        const clipY = cA.yc + t * (cB.yc - cA.yc);
                        pA = projectCamera(cA.xc, cA.yc, cA.zc);
                        pB = projectCamera(clipX, clipY, nearZ);
                    } else {
                        const t = (nearZ - cA.zc) / (cB.zc - cA.zc);
                        const clipX = cA.xc + t * (cB.xc - cA.xc);
                        const clipY = cA.yc + t * (cB.yc - cA.yc);
                        pA = projectCamera(clipX, clipY, nearZ);
                        pB = projectCamera(cB.xc, cB.yc, cB.zc);
                    }

                    ctx.beginPath();
                    ctx.moveTo(pA.x, pA.y);
                    ctx.lineTo(pB.x, pB.y);
                    ctx.stroke();
                }

                ctx.setLineDash([]);
                ctx.restore();
            }

            const arrowGuide = document.getElementById('ov-ar-arrow-guide');
            const arrowIcon = document.getElementById('ov-ar-arrow-icon');
            const arrowText = document.getElementById('ov-ar-arrow-text');
            const satName = document.getElementById('ov-ar-sat-name').textContent || '卫星';

            // ==============================================
            // MODE 1: Future Pass Preview (预览星空)
            // ==============================================
            if (arModeType === 'preview') {
                // In Preview mode: NO navigation arrow guide!
                if (arrowGuide) arrowGuide.style.display = 'none';

                const pass = arCurrentPass;
                if (pass && pass.trajectory && pass.trajectory.length > 1) {
                    // 1. Draw glowing celestial trajectory arc
                    drawTrackPolyline(pass.trajectory, 'rgba(0, 225, 210, 0.25)', 6, false);
                    drawTrackPolyline(pass.trajectory, '#00f5d4', 2.5, false);

                    // 2. Draw 5 Milestone Nodes along Pass
                    // Node 1: Start / 升起 (AOS)
                    const pStart = project(pass.start.azimuth, pass.start.elevation);
                    if (pStart.inFront) {
                        drawMilestoneBadge(pStart.x, pStart.y,
                            `🟢 升起 ${formatUserLocalTime(pass.start.time)}`,
                            `${Math.round(pass.start.elevation)}° (${pass.start.azimuth_cardinal || ''})`,
                            '#30d158', true);
                    }

                    // Node 2: Mid-Ascent (前半程)
                    const mid1Idx = Math.floor(pass.trajectory.length * 0.25);
                    const ptMid1 = pass.trajectory[mid1Idx];
                    if (ptMid1) {
                        const pMid1 = project(ptMid1.azimuth, ptMid1.elevation);
                        if (pMid1.inFront) {
                            drawMilestoneBadge(pMid1.x, pMid1.y,
                                `⏱️ ${formatUserLocalTime(ptMid1.time)}`,
                                `${Math.round(ptMid1.elevation)}°`,
                                '#5ac8fa', false);
                        }
                    }

                    // Node 3: Max Altitude (最高点 Culmination)
                    const pMax = project(pass.max.azimuth, pass.max.elevation);
                    if (pMax.inFront) {
                        drawMilestoneBadge(pMax.x, pMax.y,
                            `⭐ 最高点 ${formatUserLocalTime(pass.max.time)}`,
                            `仰角 ${Math.round(pass.max.elevation)}° (${pass.max.azimuth_cardinal || ''})`,
                            '#ffd60a', true);
                    }

                    // Node 4: Mid-Descent (后半程)
                    const mid2Idx = Math.floor(pass.trajectory.length * 0.75);
                    const ptMid2 = pass.trajectory[mid2Idx];
                    if (ptMid2) {
                        const pMid2 = project(ptMid2.azimuth, ptMid2.elevation);
                        if (pMid2.inFront) {
                            drawMilestoneBadge(pMid2.x, pMid2.y,
                                `⏱️ ${formatUserLocalTime(ptMid2.time)}`,
                                `${Math.round(ptMid2.elevation)}°`,
                                '#5ac8fa', false);
                        }
                    }

                    // Node 5: End / 降落 (LOS)
                    const pEnd = project(pass.end.azimuth, pass.end.elevation);
                    if (pEnd.inFront) {
                        drawMilestoneBadge(pEnd.x, pEnd.y,
                            `🔴 降落 ${formatUserLocalTime(pass.end.time)}`,
                            `${Math.round(pass.end.elevation)}° (${pass.end.azimuth_cardinal || ''})`,
                            '#ff453a', true);
                    }

                    // 3. Position satellite at culmination (pass.max)
                    const satProj = project(pass.max.azimuth, pass.max.elevation);
                    if (satProj.inFront && satProj.x >= 30 && satProj.x <= canvas.width - 30 &&
                        satProj.y >= 30 && satProj.y <= canvas.height - 30) {
                        ctx.save();
                        ctx.strokeStyle = '#ffd60a';
                        ctx.lineWidth = 2.5;
                        ctx.beginPath();
                        ctx.arc(satProj.x, satProj.y, 20, 0, Math.PI * 2);
                        ctx.stroke();

                        ctx.font = '22px sans-serif';
                        ctx.textAlign = 'center';
                        ctx.textBaseline = 'middle';
                        ctx.fillText('🛰️', satProj.x, satProj.y);

                        const badgeText = `${satName} (最高点模拟)`;
                        ctx.font = 'bold 12px -apple-system, BlinkMacSystemFont, sans-serif';
                        const bWidth = ctx.measureText(badgeText).width + 16;
                        ctx.fillStyle = 'rgba(0, 122, 255, 0.88)';
                        drawRoundRect(ctx, satProj.x - bWidth / 2, satProj.y + 24, bWidth, 22, 6, true, false);
                        ctx.fillStyle = '#ffffff';
                        ctx.fillText(badgeText, satProj.x, satProj.y + 35);
                        ctx.restore();
                    }
                }
            }
            // ==============================================
            // MODE 2: Live Tracking (实时 AR 追踪)
            // ==============================================
            else {
                // 1. Draw Past Track (-45m): Orange dashed line leading up to satellite
                if (livePastTrack && livePastTrack.length > 1) {
                    drawTrackPolyline(livePastTrack, 'rgba(255, 159, 10, 0.35)', 5, true);
                    drawTrackPolyline(livePastTrack, '#ff9f0a', 2.5, true);

                    // Past Milestone
                    const pIdx = Math.floor(livePastTrack.length / 2);
                    const ptP = livePastTrack[pIdx];
                    if (ptP && ptP.azimuth !== undefined) {
                        const p = project(ptP.azimuth, ptP.elevation);
                        if (p.inFront && p.x >= 30 && p.x <= canvas.width - 30 && p.y >= 30 && p.y <= canvas.height - 30) {
                            const mins = Math.round((Date.now() / 1000 - ptP.timestamp) / 60);
                            const tStr = formatUserLocalTime(new Date(ptP.timestamp * 1000).toISOString());
                            drawMilestoneBadge(p.x, p.y, `-${mins}分 (${tStr})`, `过去轨道 ${Math.round(ptP.elevation)}°`, '#ff9f0a', false);
                        }
                    }
                }

                // 2. Draw Future Track (+90m): Cyan solid line emerging from satellite
                if (liveFutureTrack && liveFutureTrack.length > 1) {
                    drawTrackPolyline(liveFutureTrack, 'rgba(0, 245, 212, 0.3)', 6, false);
                    drawTrackPolyline(liveFutureTrack, '#00f5d4', 2.5, false);

                    // Future Milestones
                    [30, 60, 90].forEach(idx => {
                        if (liveFutureTrack.length > idx) {
                            const ptF = liveFutureTrack[idx];
                            if (ptF && ptF.azimuth !== undefined) {
                                const p = project(ptF.azimuth, ptF.elevation);
                                if (p.inFront && p.x >= 30 && p.x <= canvas.width - 30 && p.y >= 30 && p.y <= canvas.height - 30) {
                                    const mins = Math.round((ptF.timestamp - Date.now() / 1000) / 60);
                                    const tStr = formatUserLocalTime(new Date(ptF.timestamp * 1000).toISOString());
                                    drawMilestoneBadge(p.x, p.y, `+${mins}分 (${tStr})`, `预报轨道 ${Math.round(ptF.elevation)}°`, '#00f5d4', false);
                                }
                            }
                        }
                    });
                }

                // 3. Live Satellite Marker (locked exactly at currentTargetLook on canvas)
                const satProj = project(currentTargetLook.azimuth, currentTargetLook.elevation);
                const isInsideFOV = (satProj.inFront &&
                                    satProj.x >= 35 && satProj.x <= canvas.width - 35 &&
                                    satProj.y >= 35 && satProj.y <= canvas.height - 35);
                const isAboveHorizon = currentTargetLook.elevation > 0;

                if (isInsideFOV) {
                    arrowGuide.style.display = 'none';

                    ctx.save();
                    // Connecting laser reticle from center to satellite
                    ctx.beginPath();
                    ctx.strokeStyle = isAboveHorizon ? 'rgba(0, 245, 212, 0.7)' : 'rgba(255, 159, 10, 0.6)';
                    ctx.lineWidth = 1.5;
                    ctx.setLineDash([4, 4]);
                    ctx.moveTo(canvas.width / 2, canvas.height / 2);
                    ctx.lineTo(satProj.x, satProj.y);
                    ctx.stroke();
                    ctx.setLineDash([]);

                    // Outer pulsing target ring
                    ctx.strokeStyle = isAboveHorizon ? '#00f5d4' : 'rgba(255, 159, 10, 0.85)';
                    ctx.lineWidth = 2.5;
                    ctx.beginPath();
                    ctx.arc(satProj.x, satProj.y, 22, 0, Math.PI * 2);
                    ctx.stroke();

                    // Inner soft glowing circle
                    ctx.fillStyle = isAboveHorizon ? 'rgba(0, 245, 212, 0.22)' : 'rgba(255, 159, 10, 0.18)';
                    ctx.beginPath();
                    ctx.arc(satProj.x, satProj.y, 22, 0, Math.PI * 2);
                    ctx.fill();

                    // 🛰️ emoji centered exactly at target
                    ctx.font = '22px sans-serif';
                    ctx.textAlign = 'center';
                    ctx.textBaseline = 'middle';
                    ctx.fillText('🛰️', satProj.x, satProj.y);

                    // Badge under satellite
                    const badgeText = isAboveHorizon ? `${satName} (在视野内)` : `🛰️ ${satName} (地底 ${Math.round(currentTargetLook.elevation)}°)`;
                    ctx.font = 'bold 12px -apple-system, BlinkMacSystemFont, sans-serif';
                    const bWidth = ctx.measureText(badgeText).width + 16;
                    ctx.fillStyle = isAboveHorizon ? 'rgba(0, 122, 255, 0.88)' : 'rgba(255, 159, 10, 0.85)';
                    drawRoundRect(ctx, satProj.x - bWidth / 2, satProj.y + 26, bWidth, 22, 6, true, false);
                    ctx.fillStyle = '#ffffff';
                    ctx.fillText(badgeText, satProj.x, satProj.y + 37);
                    ctx.restore();
                } else {
                    arrowGuide.style.display = 'flex';

                    // 3D Angle offset in degrees
                    const angleDeg = Math.round(Math.acos(Math.max(-1, Math.min(1, satProj.zc))) * (180 / Math.PI));

                    // Screen angle for rotation
                    const screenAngleRad = Math.atan2(-satProj.yc, satProj.xc);
                    const screenAngleDeg = screenAngleRad * (180 / Math.PI);

                    let dirHint = '';
                    if (satProj.xc > 0.15) dirHint += '👉 向右';
                    else if (satProj.xc < -0.15) dirHint += '👈 向左';

                    if (satProj.yc > 0.15) dirHint += (dirHint ? ' ' : '') + '👆 仰头';
                    else if (satProj.yc < -0.15) dirHint += (dirHint ? ' ' : '') + '👇 低头';

                    if (satProj.zc < 0) {
                        dirHint = '🔄 转身 ' + (dirHint || '向后');
                    }

                    if (!isAboveHorizon) {
                        arrowText.textContent = `${dirHint} 卫星在地底 (${angleDeg}°)`;
                    } else {
                        arrowText.textContent = `${dirHint} 寻找卫星 (${angleDeg}°)`;
                    }
                    arrowIcon.style.transform = `rotate(${Math.round(screenAngleDeg)}deg)`;
                    arrowIcon.textContent = '➔';
                }
            }

            arAnimationId = requestAnimationFrame(renderFrame);
        }

        arAnimationId = requestAnimationFrame(renderFrame);
    }

    function updateARHUDData(data) {
        if (data.observer_look) {
            document.getElementById('ov-ar-target-look').textContent = `${data.observer_look.azimuth}° / ${data.observer_look.elevation}°`;
        }
    }

    // Auto-init listeners
    window.addEventListener('DOMContentLoaded', () => {
        if (window.location.pathname.includes('orbit-viewer')) {
            initOrbitViewer();
        }
    });

    window.addEventListener('load', () => {
        if (window.location.pathname.includes('orbit-viewer')) {
            initOrbitViewer();
        }
    });

    window.addEventListener('panel-changed', (e) => {
        if (e.detail && e.detail.path === 'orbit-viewer') {
            initOrbitViewer();
        }
    });

    // Execute immediately in case script loaded after DOM
    if (window.location.pathname.includes('orbit-viewer')) {
        setTimeout(initOrbitViewer, 50);
    }
</script>
{{end}}