/* ============================================================
   望遠鏡模擬 Telescope Simulator — 工作台版面（2026-09-24 改版）
   左：標題＋數據＋設定（獨立捲動）　右：工具列／天空圖（填滿高度）／可見度 dock
   沉浸模式：天空圖 viewport 變全螢幕，疊上地景大氣（WebGL）與 HUD
   ============================================================ */
.ts-app {
    --ts-side: 320px;
    display: grid;
    grid-template-columns: var(--ts-side) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "head stage" "side stage";
    height: calc(100vh - var(--navbar-height));
    height: calc(100dvh - var(--navbar-height));
    overflow: hidden;
    background: transparent;   /* 外框透出全站星空；觀景窗 .ts-stage 自己有底色 */
}

/* ── 標題 ── */
.ts-head {
    grid-area: head;
    display: flex; align-items: flex-start; gap: 10px;
    padding: 14px 16px 12px max(16px, env(safe-area-inset-left));
    background: var(--color-surface);
    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border-subtle);
}
.ts-back {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; margin-top: 1px; border-radius: var(--radius-md);
    color: var(--color-text-muted); border: 1px solid var(--color-border);
    transition: color var(--transition-fast), border-color var(--transition-fast);
}
.ts-back:hover { color: var(--color-text); border-color: var(--color-text-muted); }
.ts-back svg { width: 15px; height: 15px; }
.ts-head-text { min-width: 0; }
.ts-head h1 { font-size: 1.12rem; font-weight: var(--font-weight-bold); letter-spacing: -0.01em; line-height: 1.35; }
.ts-head p { margin-top: 3px; font-size: 0.74rem; color: var(--color-text-muted); line-height: 1.5; }

/* ── 側欄 ── */
.ts-side {
    grid-area: side;
    overflow-y: auto; overscroll-behavior: contain;
    padding: 12px 14px calc(20px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
    background: var(--color-surface);
    border-right: 1px solid var(--color-border);
    display: flex; flex-direction: column; gap: 12px;
    scrollbar-width: thin;
}
.ts-side > * { flex-shrink: 0; }     /* 欄高固定時別把數據卡（overflow:hidden）壓扁 */

.ts-readout {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
    background: var(--color-border); border: 1px solid var(--color-border);
    border-radius: var(--radius-lg); overflow: hidden;
}
.ts-stat { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; background: var(--color-surface-elevated); min-width: 0; }
.ts-stat-wide { grid-column: 1 / -1; }
.ts-stat-k { font-size: 0.66rem; color: var(--color-text-muted); letter-spacing: 0.03em; }
.ts-stat-v { font-size: 0.9rem; font-weight: var(--font-weight-semibold); color: var(--color-text); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts-stat-wide .ts-stat-v { font-size: 1.15rem; color: var(--color-accent); }

.ts-sec { border-top: 1px solid var(--color-border-subtle); padding-top: 12px; }
.ts-sec-title {
    display: flex; align-items: center; gap: 7px; margin-bottom: 9px;
    font-size: 0.78rem; font-weight: var(--font-weight-semibold); color: var(--color-text-secondary);
    letter-spacing: 0.04em;
}
.ts-sec-title svg { width: 15px; height: 15px; color: var(--color-accent); flex: none; }

.ts-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 10px; }
.ts-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ts-field-full { grid-column: 1 / -1; }
.ts-field label { font-size: 0.7rem; color: var(--color-text-muted); font-weight: var(--font-weight-medium); }

.ts-field input, .ts-select {
    width: 100%; min-width: 0; height: 34px; padding: 0 9px;
    background: var(--color-surface-elevated); color: var(--color-text);
    border: 1px solid var(--color-border); border-radius: var(--radius-md);
    font-size: 0.82rem; font-family: var(--font-primary); font-variant-numeric: tabular-nums;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}
.ts-select {
    cursor: pointer; appearance: none; -webkit-appearance: none; padding-right: 26px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23918da5' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat; background-position: right 7px center;
}
.ts-field input:hover, .ts-select:hover { border-color: color-mix(in srgb, var(--color-text-muted) 45%, var(--color-border)); }
.ts-field input:focus, .ts-select:focus { outline: none; border-color: var(--color-accent); }

.ts-inline { display: flex; align-items: center; gap: 6px; }
.ts-inline input { flex: 1; }
.ts-sep { color: var(--color-text-muted); font-size: 0.8rem; flex: none; }

.ts-btn {
    height: 34px; padding: 0 13px; flex: none;
    background: var(--color-accent); color: var(--color-accent-text);
    border-radius: var(--radius-md); font-size: 0.78rem; font-weight: var(--font-weight-semibold);
    white-space: nowrap; transition: background var(--transition-fast);
}
.ts-btn:hover { background: var(--color-accent-hover); }
.ts-btn-ghost { background: transparent; color: var(--color-text-secondary); border: 1px solid var(--color-border); }
.ts-btn-ghost:hover { background: var(--color-surface-elevated); color: var(--color-text); }
.ts-btn-block { width: 100%; }

.ts-tiles-head {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    margin-top: 10px; padding: 7px 8px; border-radius: var(--radius-md);
    font-size: 0.72rem; color: var(--color-text-muted); text-align: left;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.ts-tiles-head:hover { background: var(--color-surface-elevated); color: var(--color-text); }
.ts-chevron { width: 14px; height: 14px; flex: none; transition: transform var(--transition-fast); }
.ts-tiles-head[aria-expanded="true"] .ts-chevron { transform: rotate(180deg); }
.ts-tiles-body { margin-top: 4px; display: grid; gap: 3px; max-height: 190px; overflow-y: auto; }
.ts-tile-item {
    font-size: 0.7rem; color: var(--color-text-secondary); font-variant-numeric: tabular-nums;
    padding: 4px 8px; background: var(--color-surface-elevated); border-radius: var(--radius-sm);
}
.ts-tile-item b { color: var(--color-accent); margin-right: 4px; }

/* ── 資料來源（側欄最底；手機就是整頁最底） ── */
.ts-credits { font-size: 0.7rem; line-height: 1.55; color: var(--color-text-muted); }
.ts-credits-list { display: grid; gap: 9px; margin: 0; }
.ts-credits-list dt { font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); }
.ts-credits-list dd { margin: 1px 0 0; overflow-wrap: anywhere; }
.ts-credits a { color: var(--color-text-secondary); text-decoration: underline; text-decoration-color: var(--color-border); text-underline-offset: 2px; }
.ts-credits a:hover { color: var(--color-accent); text-decoration-color: currentColor; }
.ts-credits-surveys { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 2px; }
.ts-credits-surveys b { font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); margin-right: 3px; }
.ts-credits-legal { display: block; margin-top: 3px; font-size: 0.64rem; line-height: 1.5; opacity: 0.85; }
.ts-credits-note { margin-top: 10px; font-size: 0.66rem; line-height: 1.5; opacity: 0.85; }

/* ── 舞台 ── */
.ts-stage {
    grid-area: stage;
    display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
    min-width: 0; min-height: 0;
    background: var(--color-bg);
}
.ts-stage:fullscreen { height: 100vh; }

.ts-toolbar {
    display: flex; align-items: center; gap: 8px 18px; flex-wrap: wrap;
    padding: 8px max(12px, env(safe-area-inset-right)) 8px 14px;
    background: var(--color-surface); border-bottom: 1px solid var(--color-border);
}
.ts-tool { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ts-tool > svg { width: 15px; height: 15px; color: var(--color-text-muted); flex: none; }
.ts-tool-k { font-size: 0.74rem; color: var(--color-text-muted); white-space: nowrap; }
.ts-toolbar .ts-select { width: auto; min-width: 150px; height: 32px; }

.ts-range {
    -webkit-appearance: none; appearance: none; width: 128px; height: 20px; background: transparent; cursor: pointer;
    --pct: 50%;
}
.ts-range::-webkit-slider-runnable-track {
    height: 4px; border-radius: 4px;
    background: linear-gradient(90deg, var(--color-accent) var(--pct), var(--color-border) var(--pct));
}
.ts-range::-moz-range-track { height: 4px; border-radius: 4px; background: var(--color-border); }
.ts-range::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--color-accent); }
.ts-range::-webkit-slider-thumb {
    -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6px; border-radius: 50%;
    background: var(--color-surface); border: 2px solid var(--color-accent); box-shadow: var(--shadow-sm);
}
.ts-range::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--color-surface); border: 2px solid var(--color-accent); }
.ts-range:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: 4px; }
.ts-range-v { min-width: 38px; font-size: 0.78rem; font-weight: var(--font-weight-semibold); color: var(--color-text); font-variant-numeric: tabular-nums; }

.ts-toolbar-r { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.ts-icon-btn {
    width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--radius-md); color: var(--color-text-secondary); border: 1px solid var(--color-border);
    transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}
.ts-icon-btn:hover { color: var(--color-text); background: var(--color-surface-elevated); border-color: var(--color-text-muted); }
.ts-icon-btn svg { width: 16px; height: 16px; }
.ts-immersive-btn {
    display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px 0 12px;
    border-radius: var(--radius-md); font-size: 0.8rem; font-weight: var(--font-weight-semibold); white-space: nowrap;
    color: #fff; background: linear-gradient(135deg, #451952, #662549 55%, #AE445A);
    box-shadow: 0 2px 10px rgba(174, 68, 90, 0.35);
    transition: filter var(--transition-fast), transform var(--transition-fast);
}
.ts-immersive-btn:hover { filter: brightness(1.12); }
.ts-immersive-btn:active { transform: translateY(1px); }
.ts-immersive-btn svg { width: 17px; height: 17px; }

/* ── 天空圖 ── */
/* isolate：FOV 疊層的 z-index 關在地圖裡，不會蓋到導覽列 */
.ts-mapviewport { position: relative; min-height: 0; background: #05040c; isolation: isolate; overflow: hidden; }
#aladin-lite-div { width: 100%; height: 100%; }
.ts-loading {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: var(--space-md);
    color: rgba(255, 255, 255, 0.7); font-size: 0.85rem; z-index: 5;
}
.ts-spinner {
    width: 36px; height: 36px; border-radius: 50%;
    border: 3px solid rgba(243, 159, 90, 0.2); border-top-color: #F39F5A;
    animation: ts-spin 0.8s linear infinite;
}
@keyframes ts-spin { to { transform: rotate(360deg); } }
/* Aladin 內建的全螢幕鈕用不到（工具列有自己的） */
.ts-mapviewport .aladin-fullScreen-control { display: none !important; }

/* ── 可見度 dock ── */
.ts-dock { background: var(--color-surface); border-top: 1px solid var(--color-border); min-width: 0; }
.ts-dock-head {
    display: flex; align-items: center; gap: 12px; min-height: 42px;
    padding: 4px max(12px, env(safe-area-inset-right)) 4px 8px;
}
.ts-dock-toggle {
    display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 8px; flex: none;
    border-radius: var(--radius-md); color: var(--color-text);
    transition: background var(--transition-fast);
}
.ts-dock-toggle:hover { background: var(--color-surface-elevated); }
.ts-dock-toggle svg:first-child { width: 16px; height: 16px; color: var(--color-accent); }
.ts-dock-title { font-size: 0.84rem; font-weight: var(--font-weight-semibold); }
.ts-dock-toggle .ts-chevron { color: var(--color-text-muted); }
.ts-dock-toggle[aria-expanded="false"] .ts-chevron { transform: rotate(180deg); }
.ts-vis-coord {
    flex: 1; min-width: 0; font-size: 0.74rem; color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ts-dock-head .ts-select { width: auto; min-width: 128px; height: 32px; }
.ts-dock-body { border-top: 1px solid var(--color-border-subtle); }
.ts-dock-body[hidden] { display: none; }
.ts-vis-plot { height: clamp(140px, 24vh, 220px); padding: 2px 6px 0; position: relative; }
.ts-vis-placeholder {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    color: var(--color-text-muted); font-size: 0.82rem;
}

/* ── Toast ── */
.ts-toast {
    position: fixed; bottom: calc(var(--space-lg) + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%);
    display: flex; flex-direction: column; gap: var(--space-sm); z-index: 2000; pointer-events: none;
}
.ts-toast-item {
    padding: 10px 18px; border-radius: var(--radius-md);
    background: var(--color-surface-elevated); color: var(--color-text);
    border: 1px solid var(--color-border); box-shadow: var(--shadow-lg);
    font-size: 0.82rem; animation: ts-toast-in 0.3s ease;
}
.ts-toast-item.out { animation: ts-toast-out 0.3s ease forwards; }
.ts-toast-warning { border-left: 3px solid var(--color-amber); }
.ts-toast-error { border-left: 3px solid var(--color-rose); }
@keyframes ts-toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ts-toast-out { to { opacity: 0; transform: translateY(10px); } }

/* ============================================================
   沉浸模式
   ============================================================ */
html.ts-immersive-on, html.ts-immersive-on body { overflow: hidden; }
/* iPhone 沒有全螢幕 API：viewport 自己蓋滿畫面，導覽列也收起來（main 可能是自己的疊層環境） */
html.ts-immersive-on .site-navbar { display: none; }
.ts-mapviewport.is-immersive {
    position: fixed; inset: 0; z-index: 3000;
    width: 100vw; height: 100vh; height: 100dvh;
    background: #000;
}
.ts-mapviewport.is-immersive:fullscreen { width: 100%; height: 100%; }
.ts-mapviewport.is-immersive .aladin-location,
.ts-mapviewport.is-immersive .aladin-fov,
.ts-mapviewport.is-immersive .aladin-status-bar,
.ts-mapviewport.is-immersive .aladin-reticle,
.ts-mapviewport.is-immersive .aladin-widgets-toolbar,
.ts-mapviewport.is-immersive #aladin-tooltip-mouse,
.ts-mapviewport.is-immersive #fovOverlay { display: none !important; }

.sky { position: absolute; inset: 0; z-index: 10; color: rgba(236, 234, 246, 0.92); font-family: var(--font-primary); }
/* Aladin Lite 的嵌入條件：右下角的 Aladin logo 與連結要保留 —— 沉浸模式把它拉到畫布上層、放在控制列上方 */
.ts-mapviewport.is-immersive .aladin-logo-container {
    z-index: 40; right: max(14px, env(safe-area-inset-right)) !important;
    bottom: max(66px, calc(env(safe-area-inset-bottom) + 60px)) !important; opacity: 0.75;
    transition: opacity 0.2s ease;
}
/* 圖層面板打開時跟 logo 疊在同一角：logo 得在畫布上層所以蓋不到面板，就當作被面板遮住 */
.ts-mapviewport.is-immersive:has(#skyLayers:not([hidden])) .aladin-logo-container { opacity: 0; pointer-events: none; }
.sky[hidden] { display: none; }
.sky-gl, .sky-2d { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sky-gl { pointer-events: none; }
.sky-2d { touch-action: none; cursor: grab; outline: none; -webkit-user-select: none; user-select: none; }
.sky-2d:active { cursor: grabbing; }
.sky-fade { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity 0.35s ease; z-index: 30; }
.sky-fade.is-on { opacity: 1; transition: none; }

.sky-hud { position: absolute; inset: 0; pointer-events: none; z-index: 20; transition: opacity 0.6s ease; }
.sky-hud.is-idle { opacity: 0; }
.sky-hud button, .sky-hud select, .sky-hud input, .sky-hud label, .sky-panel, .sky-layers { pointer-events: auto; }
/* 隱藏時第一下只負責叫出 HUD，不能點到看不見的按鈕 */
.sky-hud.is-idle, .sky-hud.is-idle * { pointer-events: none !important; }

.sky-panel, .sky-btn, .sky-site, .sky-clock, .sky-phase, .sky-dir, .sky-layers, .sky-toast {
    background: rgba(12, 11, 26, 0.5);
    -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
    border: 1px solid rgba(255, 255, 255, 0.09);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}

/* 上排 */
.sky-top {
    position: absolute; left: 0; right: 0; top: 0;
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: max(12px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 0 max(14px, env(safe-area-inset-left));
}
.sky-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 38px; padding: 0 13px; border-radius: 12px;
    color: inherit; font-size: 0.8rem; font-weight: var(--font-weight-medium);
    transition: background var(--transition-fast), border-color var(--transition-fast);
}
.sky-btn:hover { background: rgba(40, 36, 70, 0.65); border-color: rgba(255, 255, 255, 0.18); }
.sky-btn svg { width: 16px; height: 16px; }
.sky-icon { width: 38px; padding: 0; }
.sky-site {
    display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 4px 0 11px; border-radius: 12px;
}
.sky-site svg { width: 15px; height: 15px; color: #F39F5A; flex: none; }
.sky-site select {
    appearance: none; -webkit-appearance: none; background: transparent; border: 0; color: inherit;
    font: 600 0.82rem var(--font-primary); height: 36px; padding: 0 22px 0 2px; cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23c9c5dc' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat; background-position: right 4px center;
}
.sky-site select option { color: #111; }
.sky-clock {
    display: inline-flex; align-items: baseline; gap: 8px; height: 38px; padding: 0 13px; border-radius: 12px;
    line-height: 38px; font-variant-numeric: tabular-nums;
}
.sky-clock b { font-size: 1.05rem; font-weight: 700; letter-spacing: 0.02em; }
.sky-clock span { font-size: 0.74rem; color: rgba(236, 234, 246, 0.7); }
.sky-phase {
    display: inline-flex; align-items: center; height: 30px; padding: 0 11px; border-radius: 999px;
    font-size: 0.72rem; color: rgba(236, 234, 246, 0.8);
}
.sky-phase[data-state="night"] { color: #b9c6ff; }
.sky-phase[data-state="twilight"] { color: #ffc58f; }
.sky-phase[data-state="day"] { color: #9fd8ff; }
.sky-top-r { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.sky-dir {
    display: inline-flex; align-items: center; height: 30px; padding: 0 11px; border-radius: 999px;
    font-size: 0.74rem; font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* 下排 */
.sky-bottom {
    position: absolute; left: 0; right: 0; bottom: 0;
    display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; flex-wrap: wrap;
    padding: 0 max(14px, env(safe-area-inset-right)) max(14px, calc(env(safe-area-inset-bottom) + 8px)) max(14px, env(safe-area-inset-left));
}
.sky-panel { display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 14px; }
.sky-panel button {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-width: 38px; height: 36px; padding: 0 10px; border-radius: 10px;
    color: inherit; font-size: 0.78rem; font-weight: var(--font-weight-medium); font-variant-numeric: tabular-nums; white-space: nowrap;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.sky-panel button:hover { background: rgba(255, 255, 255, 0.08); }
.sky-panel button svg { width: 16px; height: 16px; }
.sky-panel button.is-on, .sky-panel button[aria-pressed="true"], .sky-panel button[aria-expanded="true"] { background: rgba(243, 159, 90, 0.2); color: #ffc58f; }
.sky-rates { display: flex; gap: 1px; padding: 0 2px; }
.sky-sep { width: 1px; height: 20px; background: rgba(255, 255, 255, 0.12); margin: 0 4px; }
.sky-play .i-play { display: none; }
.sky-play.is-paused .i-play { display: block; }
.sky-play.is-paused .i-pause { display: none; }
.sky-speed { display: inline-flex; align-items: center; gap: 6px; padding: 0 8px; height: 36px; font-size: 0.74rem; }
.sky-speed svg { width: 15px; height: 15px; color: rgba(236, 234, 246, 0.7); }
.sky-speed .ts-range { width: 92px; --color-border: rgba(255, 255, 255, 0.18); --color-surface: #1b1830; --color-accent: #F39F5A; }
.sky-speed output { min-width: 34px; font-variant-numeric: tabular-nums; }
.sky-zoom { display: flex; gap: 1px; }
.sky-zoom button { font-size: 1.1rem; }

.sky-layers {
    position: absolute; right: max(14px, env(safe-area-inset-right)); bottom: max(66px, calc(env(safe-area-inset-bottom) + 60px));
    display: grid; gap: 2px; padding: 6px; border-radius: 14px; min-width: 220px;
}
.sky-layers[hidden] { display: none; }
.sky-survey {
    display: flex; flex-direction: column; gap: 5px; padding: 6px 8px 10px;
    margin-bottom: 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.7rem; color: rgba(236, 234, 246, 0.6);
}
.sky-survey select {
    appearance: none; -webkit-appearance: none; width: 100%; height: 34px; padding: 0 26px 0 10px;
    background: rgba(255, 255, 255, 0.06) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23c9c5dc' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat right 8px center;
    border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 8px;
    color: #fff; font: 500 0.8rem var(--font-primary); cursor: pointer;
}
.sky-survey select:focus { outline: none; border-color: #F39F5A; }
.sky-survey option, .sky-survey optgroup { color: #111; }
.sky-layers button {
    display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 12px; border-radius: 9px;
    color: rgba(236, 234, 246, 0.72); font-size: 0.8rem; text-align: left;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.sky-layers button::before {
    content: ''; flex: none; width: 16px; height: 16px; border-radius: 5px;
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    background: transparent center / 12px no-repeat;
}
.sky-layers button[aria-pressed="true"] { color: #fff; }
.sky-layers button[aria-pressed="true"]::before {
    background-color: #F39F5A; border-color: #F39F5A;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23140f22' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
}
.sky-layers button:hover { background: rgba(255, 255, 255, 0.07); }
.sky-layers kbd {
    margin-left: auto; font: 600 0.64rem var(--font-primary); color: rgba(236, 234, 246, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 4px; padding: 1px 5px;
}

.sky-toast {
    position: absolute; left: 50%; top: max(66px, calc(env(safe-area-inset-top) + 58px)); transform: translate(-50%, -8px);
    display: flex; align-items: center; gap: 12px; max-width: min(560px, calc(100% - 28px));
    padding: 9px 10px 9px 15px; border-radius: 12px; font-size: 0.8rem; line-height: 1.5;
    opacity: 0; pointer-events: none; transition: opacity 0.3s ease, transform 0.3s ease;
}
.sky-toast.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.sky-toast button {
    flex: none; height: 30px; padding: 0 12px; border-radius: 8px;
    background: rgba(243, 159, 90, 0.22); color: #ffc58f; font-size: 0.76rem; font-weight: 600;
}
.sky-toast button:hover { background: rgba(243, 159, 90, 0.32); }

/* ── 響應式 ── */
@media (max-width: 1180px) {
    .ts-app { --ts-side: 288px; }
}
@media (max-width: 960px) {
    .ts-speed .ts-tool-k { display: none; }
}
@media (max-width: 860px) {
    /* 手機／直式平板：標題 → 天空圖 → 設定，整頁捲動 */
    .ts-app {
        display: flex; flex-direction: column; height: auto; overflow: visible;
    }
    .ts-head { border-right: 0; padding: 12px 16px 10px; }
    .ts-stage { display: flex; flex-direction: column; order: 1; }
    .ts-side { order: 2; }
    .ts-mapviewport { height: 58vh; height: 58dvh; min-height: 320px; flex: none; }
    .ts-side { border-right: 0; border-top: 1px solid var(--color-border); overflow: visible; padding-bottom: calc(32px + env(safe-area-inset-bottom)); }
    .ts-toolbar { gap: 8px 12px; padding: 8px 12px; }
    .ts-tool-k { display: none; }
    .ts-toolbar .ts-select { min-width: 0; max-width: 42vw; }
    .ts-range { width: 96px; }
    .ts-field input, .ts-select { font-size: 16px; height: 40px; }       /* iOS 聚焦不縮放 */
    .ts-toolbar .ts-select, .ts-dock-head .ts-select { font-size: 16px; height: 36px; }
    .ts-btn { height: 40px; }
    .ts-icon-btn { width: 40px; height: 40px; }
    .ts-immersive-btn { height: 40px; }
    .ts-dock-head { flex-wrap: wrap; gap: 4px 10px; }
    .ts-vis-coord { order: 3; flex-basis: 100%; padding: 0 0 4px 10px; }
    .ts-dock-head .ts-select { margin-left: auto; }
}
@media (max-width: 560px) {
    .ts-toolbar-r { margin-left: 0; width: 100%; }
    .ts-immersive-btn { flex: 1; justify-content: center; }
    .ts-toolbar .ts-select { max-width: 40vw; }
    .ts-speed { flex: 1; min-width: 0; }
    .ts-speed .ts-range { flex: 1 1 60px; width: 60px; min-width: 0; }
    .ts-mapviewport .aladin-location { display: none !important; }   /* 窄螢幕放不下；座標看下方 dock */

    .sky-top { gap: 6px; }
    .sky-exit span { display: none; }
    .sky-exit { width: 38px; padding: 0; }
    .sky-phase, .sky-dir { display: none; }
    .sky-clock span { display: none; }
    .sky-bottom { flex-direction: column; align-items: stretch; gap: 8px; }
    .sky-panel { justify-content: space-between; overflow-x: auto; scrollbar-width: none; }
    .sky-panel::-webkit-scrollbar { display: none; }
    .sky-panel button { min-width: 36px; padding: 0 8px; height: 40px; }
    /* 手機：±1h 與縮放鈕收起來（有雙指縮放），工具鈕只留圖示 */
    #skyBack, #skyFwd, .sky-zoom, .sky-time .sky-sep { display: none; }
    .sky-tools > button > span { display: none; }
    .sky-tools > button { min-width: 44px; }
    .sky-speed { flex: 1; min-width: 0; }
    .sky-speed .ts-range { flex: 1 1 60px; width: 60px; min-width: 0; }
    .sky-layers { left: max(14px, env(safe-area-inset-left)); right: max(14px, env(safe-area-inset-right)); bottom: max(128px, calc(env(safe-area-inset-bottom) + 122px)); }
    .ts-mapviewport.is-immersive .aladin-logo-container { bottom: max(130px, calc(env(safe-area-inset-bottom) + 124px)) !important; }
}
@media (max-height: 520px) and (orientation: landscape) {
    .sky-phase { display: none; }
    .sky-bottom { padding-bottom: max(10px, env(safe-area-inset-bottom)); }
}

/* ── 沉浸模式：時鐘可以點、自訂日期時間 ── */
button.sky-clock { color: inherit; font-family: var(--font-primary); cursor: pointer; transition: background var(--transition-fast), border-color var(--transition-fast); }
button.sky-clock:hover, button.sky-clock[aria-expanded="true"] { background: rgba(40, 36, 70, 0.65); border-color: rgba(243, 159, 90, 0.45); }
.sky-clock-edit { width: 13px; height: 13px; align-self: center; color: rgba(236, 234, 246, 0.45); }
button.sky-clock:hover .sky-clock-edit { color: #F39F5A; }

.sky-timepop {
    position: absolute; z-index: 5; left: max(14px, env(safe-area-inset-left)); top: max(60px, calc(env(safe-area-inset-top) + 52px));
    width: min(340px, calc(100% - 28px)); padding: 14px; border-radius: 14px;
    background: rgba(14, 12, 30, 0.9); border: 1px solid rgba(255, 255, 255, 0.12);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}
.sky-timepop[hidden] { display: none; }
.sky-timepop-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.sky-timepop-head b { font-size: 0.86rem; }
.sky-timepop-tz { font-size: 0.7rem; color: rgba(236, 234, 246, 0.55); text-align: right; }
.sky-timepop-grid { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 8px; }
.sky-timepop-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 0.68rem; color: rgba(236, 234, 246, 0.6); }
.sky-timepop-grid input {
    width: 100%; height: 38px; padding: 0 8px; border-radius: 8px; text-align: center;
    background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.14); color: #fff;
    font: 600 1rem var(--font-primary); font-variant-numeric: tabular-nums; -moz-appearance: textfield;
}
.sky-timepop-grid input::-webkit-inner-spin-button, .sky-timepop-grid input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.sky-timepop-grid input:focus { outline: none; border-color: #F39F5A; background: rgba(243, 159, 90, 0.1); }
.sky-timepop-err { margin-top: 10px; font-size: 0.74rem; color: #ffb4a8; }
.sky-timepop-err[hidden] { display: none; }
.sky-timepop-actions { display: flex; align-items: center; gap: 6px; margin-top: 12px; }
.sky-timepop-gap { flex: 1; }
.sky-timepop-actions button {
    height: 34px; padding: 0 14px; border-radius: 9px; color: inherit; font-size: 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.14); transition: background var(--transition-fast);
}
.sky-timepop-actions button:hover { background: rgba(255, 255, 255, 0.08); }
.sky-timepop-actions .is-primary { background: #F39F5A; border-color: #F39F5A; color: #1a1020; font-weight: 700; }
.sky-timepop-actions .is-primary:hover { background: #f5b278; }

/* ── 沉浸模式：天氣與雲量預報小工具（左側） ── */
.sky-wx {
    position: absolute; left: max(14px, env(safe-area-inset-left)); top: max(62px, calc(env(safe-area-inset-top) + 54px));
    width: 268px; border-radius: 14px; overflow: hidden;
    background: rgba(14, 12, 30, 0.66); border: 1px solid rgba(255, 255, 255, 0.1);
    -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4);
}
.sky-wx-head {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; text-align: left; color: inherit;
}
.sky-wx-head:hover { background: rgba(255, 255, 255, 0.04); }
.sky-wx-ic { flex: none; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; color: #ffd08a; }
.sky-wx-svg { width: 28px; height: 28px; }
.sky-wx-title { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.sky-wx-title b { font-size: 0.86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sky-wx-title small { font-size: 0.68rem; color: rgba(236, 234, 246, 0.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sky-wx-cloud { font: 700 1.05rem var(--font-primary); font-variant-numeric: tabular-nums; color: #fff; }
.sky-wx-chev { width: 14px; height: 14px; flex: none; color: rgba(236, 234, 246, 0.5); transform: rotate(180deg); transition: transform var(--transition-fast); }
.sky-wx.is-collapsed .sky-wx-chev { transform: none; }
.sky-wx.is-collapsed .sky-wx-body { display: none; }
.sky-wx-body { padding: 2px 12px 11px; border-top: 1px solid rgba(255, 255, 255, 0.07); }
.sky-wx-body:empty { display: none; }
.sky-wx-spin { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(243, 159, 90, 0.25); border-top-color: #F39F5A; animation: ts-spin 0.8s linear infinite; }

.sky-wx-layers { display: grid; gap: 5px; padding: 9px 0 8px; }
.sky-wx-row { display: grid; grid-template-columns: 34px 1fr 38px; align-items: center; gap: 8px; font-size: 0.7rem; color: rgba(236, 234, 246, 0.7); }
.sky-wx-row i { height: 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.sky-wx-row b { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #9fb1d8, #e8ecf8); }
.sky-wx-row em { font-style: normal; text-align: right; font-variant-numeric: tabular-nums; color: #fff; }

.sky-wx-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 8px 0; border-top: 1px solid rgba(255, 255, 255, 0.07); }
.sky-wx-stats div { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; }
.sky-wx-stats b { display: inline-flex; align-items: center; gap: 2px; font-size: 0.86rem; font-variant-numeric: tabular-nums; }
.sky-wx-stats small { font-size: 0.6rem; color: rgba(236, 234, 246, 0.55); white-space: nowrap; }
.sky-wx .wx-wind-arrow { width: 13px; height: 13px; color: #ffd08a; }

.sky-wx-score { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 8px 0; border-top: 1px solid rgba(255, 255, 255, 0.07); font-size: 0.7rem; color: rgba(236, 234, 246, 0.7); }
.sky-wx-lvl { padding: 2px 8px; border-radius: 999px; font-weight: 700; color: #10141a; }
.sky-wx-lvl.is-excellent { background: #3fb37f; }
.sky-wx-lvl.is-good { background: #8ccf6a; }
.sky-wx-lvl.is-fair { background: #f0c04a; }
.sky-wx-lvl.is-poor { background: #f39f5a; }
.sky-wx-lvl.is-bad { background: #e0566f; color: #fff; }

.sky-wx-strip { display: grid; grid-template-columns: repeat(24, 1fr); gap: 2px; height: 34px; align-items: end; margin-top: 4px; }
.sky-wx-strip span { position: relative; height: 100%; border-radius: 2px; display: flex; align-items: flex-end; }
.sky-wx-strip span.is-night { background: rgba(120, 140, 220, 0.1); }
.sky-wx-strip span b { width: 100%; border-radius: 2px; background: rgba(214, 222, 242, 0.55); }
.sky-wx-strip span.is-now { outline: 1.5px solid #F39F5A; outline-offset: 1px; }
.sky-wx-strip span.is-now b { background: #F39F5A; }
.sky-wx-axis { display: flex; justify-content: space-between; margin-top: 3px; font-size: 0.6rem; color: rgba(236, 234, 246, 0.45); font-variant-numeric: tabular-nums; }
.sky-wx-note { padding: 10px 0 2px; font-size: 0.74rem; line-height: 1.55; color: rgba(236, 234, 246, 0.75); }
.sky-wx-retry { margin: 10px 0 2px; height: 30px; padding: 0 14px; border-radius: 8px; background: rgba(243, 159, 90, 0.2); color: #ffc58f; font-size: 0.76rem; }

@media (max-width: 560px) {
    .sky-wx { width: auto; right: max(62px, calc(env(safe-area-inset-right) + 48px)); top: max(58px, calc(env(safe-area-inset-top) + 50px)); }   /* 右邊留給全螢幕鈕 */
    .sky-wx.is-collapsed { right: auto; }
    .sky-wx.is-collapsed .sky-wx-title small { display: none; }
    .sky-timepop { top: max(58px, calc(env(safe-area-inset-top) + 50px)); }
    .sky-timepop-grid input { font-size: 16px; }        /* iOS 聚焦不放大 */
}
@media (max-height: 560px) and (orientation: landscape) {
    .sky-wx:not(.is-collapsed) .sky-wx-strip, .sky-wx:not(.is-collapsed) .sky-wx-axis { display: none; }
}

/* ── 沉浸模式：任意地點（2026-09-25）── */
.sky-busy {
    display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 11px; border-radius: 999px; font-size: 0.72rem;
    background: rgba(12, 11, 26, 0.5); border: 1px solid rgba(255, 255, 255, 0.09); color: rgba(236, 234, 246, 0.8);
}
.sky-busy[hidden] { display: none; }
.sky-busy i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(243, 159, 90, 0.25); border-top-color: #F39F5A; animation: ts-spin 0.8s linear infinite; }
.sky-pick {
    position: absolute; z-index: 6; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: min(560px, calc(100% - 28px)); max-height: calc(100% - 40px); overflow-y: auto; padding: 16px; border-radius: 16px;
    display: flex; flex-direction: column; gap: 10px; pointer-events: auto;
    background: rgba(14, 12, 30, 0.94); border: 1px solid rgba(255, 255, 255, 0.12);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
}
.sky-pick[hidden] { display: none; }
.sky-pick-head { display: flex; align-items: center; justify-content: space-between; }
.sky-pick-head b { font-size: 0.95rem; }
.sky-pick-x { width: 30px; height: 30px; border-radius: 8px; color: rgba(236, 234, 246, 0.7); }
.sky-pick-x:hover { background: rgba(255, 255, 255, 0.08); }
.sky-pick input {
    width: 100%; height: 38px; padding: 0 10px; border-radius: 9px; font: 500 0.86rem var(--font-primary); color: #fff;
    background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14);
}
.sky-pick input:focus { outline: none; border-color: #F39F5A; }
.sky-pick-search { display: flex; gap: 8px; }
.sky-pick-search button, .sky-pick-geo, .sky-pick-cancel, .sky-pick-go {
    flex: none; height: 38px; padding: 0 14px; border-radius: 9px; font: 600 0.8rem var(--font-primary);
    background: rgba(255, 255, 255, 0.08); color: rgba(236, 234, 246, 0.92); border: 1px solid rgba(255, 255, 255, 0.12);
    display: inline-flex; align-items: center; gap: 6px;
}
.sky-pick-search button:hover, .sky-pick-geo:hover, .sky-pick-cancel:hover { background: rgba(255, 255, 255, 0.14); }
.sky-pick-geo svg { width: 15px; height: 15px; }
.sky-pick-results { display: flex; flex-direction: column; max-height: 170px; overflow-y: auto; border-radius: 10px; background: rgba(255, 255, 255, 0.04); font-size: 0.78rem; color: rgba(236, 234, 246, 0.7); padding: 4px; }
.sky-pick-results[hidden] { display: none; }
.sky-pick-results button { text-align: left; padding: 7px 8px; border-radius: 7px; color: rgba(236, 234, 246, 0.9); font-size: 0.78rem; line-height: 1.4; }
.sky-pick-results button:hover { background: rgba(243, 159, 90, 0.18); }
.sky-pick-map { height: 260px; border-radius: 12px; overflow: hidden; background: #0b0a18; }
.sky-pick-map .leaflet-container { background: #0b0a18; font: inherit; }
.sky-pick-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: end; }
.sky-pick-row label, .sky-pick-name { display: flex; flex-direction: column; gap: 4px; font-size: 0.68rem; color: rgba(236, 234, 246, 0.6); }
.sky-pick-msg { font-size: 0.72rem; line-height: 1.55; color: rgba(236, 234, 246, 0.55); }
.sky-pick-msg.is-bad { color: #ff9b8a; }
.sky-pick-foot { display: flex; justify-content: flex-end; gap: 8px; }
.sky-pick-go { background: #F39F5A; color: #1a1020; border-color: transparent; }
.sky-pick-go:disabled { opacity: 0.45; cursor: default; }
@media (max-width: 560px) {
    .sky-pick { top: auto; bottom: max(10px, env(safe-area-inset-bottom)); transform: translateX(-50%); max-height: calc(100% - 70px); }
    .sky-pick-map { height: 200px; }
    .sky-pick-row { grid-template-columns: 1fr 1fr; }
    .sky-pick-geo { grid-column: 1 / -1; justify-content: center; }
    .sky-pick input { font-size: 16px; }
    .sky-busy span { display: none; }
}