html, body {
    margin: 0;
    height: 100%;
    background: #000;
    color: #e8eefc;
    font-family: "Metropolis",Helvetica,Arial,sans-serif, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans";
    overflow: hidden;
}

#app {
    position: fixed;
    inset: 0;
}

.panel {
    position: fixed;
    top: 16px;
    left: 16px;
    z-index: 10;
    display: inline-flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px;
    min-width: 260px;
    background: rgba(15, 23, 42, .35);
    border: 1px solid rgba(148, 163, 184, .25);
    border-radius: 12px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    user-select: none;
    max-width: 400px;
}

.panel h1 {
    font-size: 14px;
    margin: 0 0 4px 0;
    opacity: .9;
}

.row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.row label {
    white-space: nowrap;
    min-width: 104px;
    opacity: .9;
}

.row input[type="range"] {
    width: 160px;
}

.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(56, 189, 248, .15);
    border: 1px solid rgba(56, 189, 248, .35);
    color: #cbeafe;
    font-size: 12px;
}

.hint {
    font-size: 12px;
    opacity: .8;
    line-height: 1.3;
}

.selection {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 10;
    padding: 8px 12px;
    border-radius: 10px;
    background: rgba(30, 41, 59, .35);
    border: 1px solid rgba(148, 163, 184, .25);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    font-size: 13px;
}

/* CSS2D labels */
.label {
    pointer-events: none;
    color: #e5e7eb;
    font-size: 12px;
    background: rgba(17, 24, 39, .45);
    border: 1px solid rgba(148, 163, 184, .25);
    padding: 2px 6px;
    border-radius: 6px;
    white-space: nowrap;
}

button {
    border: 1px solid rgba(148, 163, 184, .35);
    background: rgba(59, 130, 246, .18);
    color: #e5edff;
    padding: 4px 10px;
    border-radius: 8px;
    cursor: pointer;
}

button.toggled {
    background: rgba(34, 197, 94, .2);
    border-color: rgba(34, 197, 94, .45);
}


.panel .list{display:flex;flex-wrap:wrap;gap:6px;max-height:160px;overflow:auto}
.panel .list-title{width:100%;margin:6px 0 2px;font-weight:600;opacity:.8}
.panel .chip{padding:4px 8px;border-radius:999px;border:1px solid #39414a;background:#11161c;color:#eaf1ff;cursor:pointer;white-space:nowrap}
.panel .chip:hover{background:#18202a}


.row.list-row{align-items:flex-start}
.row.list-row label{padding-top:4px}
.row.list-row .list{flex:1;min-height:32px}

/* ──────────────────────────────────────────
   Pretty scrollbar for the panel body list
   ────────────────────────────────────────── */
#panel, .panel .list{
   scrollbar-width: thin;
   scrollbar-color: rgba(148,163,184,.55) transparent;
  /* keep the nice no-jump behavior but remove the extra left gutter */
  scrollbar-gutter: stable;
}

/* Chrome / Edge / Safari */
.panel .list::-webkit-scrollbar{
  width: 10px;
  height: 10px;
}

.panel .list::-webkit-scrollbar-track{
  background: rgba(15,23,42,.15);   /* 深色半透明軌道，配合玻璃感面板 */
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(148,163,184,.18);
}

.panel .list::-webkit-scrollbar-thumb{
  background: linear-gradient(
    180deg,
    rgba(203,213,225,.9),
    rgba(148,163,184,.75)
  );
  border-radius: 999px;
  border: 2px solid rgba(15,23,42,.25); /* 內縮縫隙，視覺更細 */
}

.panel .list::-webkit-scrollbar-thumb:hover{
  background: rgba(226,232,240,.95);
}

.panel .list::-webkit-scrollbar-thumb:active{
  background: rgba(248,250,252,1);
}

.panel .list::-webkit-scrollbar-corner{
  background: transparent;
}
.list-subtitle{
    margin: 10px 0 6px;
    font-size: 12px;
    letter-spacing: .02em;
    opacity: .7;
}
.moons-sep{
    border: 0;
    height: 1px;
    margin: 10px 0 12px;
    background: linear-gradient(to right, transparent, rgba(255,255,255,.16), transparent);
}

.moon-row{
    display:flex;
    flex-wrap:nowrap;
    gap:8px;
    overflow-x:auto;
    padding:2px 2px 6px;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: rgba(148,163,184,.55) transparent;
}
.moon-row .chip{ scroll-snap-align:start; }

.moon-row::-webkit-scrollbar{ height:8px; }
.moon-row::-webkit-scrollbar-track{
    background: rgba(15,23,42,.15);
    border-radius:999px;
    box-shadow: inset 0 0 0 1px rgba(148,163,184,.18);
}
.moon-row::-webkit-scrollbar-thumb{
    background: linear-gradient(180deg, rgba(203,213,225,.9), rgba(148,163,184,.75));
    border-radius:999px;
    border:2px solid rgba(15,23,42,.25);
}
.moon-row::-webkit-scrollbar-thumb:hover{ background: rgba(226,232,240,.95); }

.moon-line{
    display:grid;
    grid-template-columns: max-content 1fr;
    align-items:center;
    column-gap:10px;
    margin: 4px 0;
}


.moon-host{
    font-size: 12px;
    opacity: .8;
    white-space:nowrap;
}
.moon-host::after{
    content: ":";
    margin-left: 6px;
    opacity: .5;
}

.moon-row{
    display:flex;
    flex-wrap:nowrap;
    gap:8px;
    overflow-x:auto;
    overflow-y:hidden;
    padding:2px 2px 6px;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: rgba(148,163,184,.55) transparent;
    min-height: 32px;
	min-width: 100px;
}
.moon-row .chip{ scroll-snap-align:start; }

.moon-row::-webkit-scrollbar{ height:8px; }
.moon-row::-webkit-scrollbar-track{
    background: rgba(15,23,42,.15);
    border-radius:999px;
    box-shadow: inset 0 0 0 1px rgba(148,163,184,.18);
}
.moon-row::-webkit-scrollbar-thumb{
    background: linear-gradient(180deg, rgba(203,213,225,.9), rgba(148,163,184,.75));
    border-radius:999px;
    border:2px solid rgba(15,23,42,.25);
}
.moon-row::-webkit-scrollbar-thumb:hover{ background: rgba(226,232,240,.95); }

.moons-sep{
    border: 0;
    height: 1px;
    margin: 8px 0 10px;
    background: linear-gradient(to right, transparent, rgba(255,255,255,.16), transparent);
}
.moon-host{min-width: 50px; text-align:right; padding-right:8px; }

.moon-row{
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
}

.mobile-panel{
    position: fixed;
    inset: 0 auto 0 0;
    width: min(76vw, 320px);
    max-width: 90vw;
    transform: translateX(-100%);
    transition: transform .24s ease;
    z-index: 40;
    backdrop-filter: blur(8px);
    box-shadow: 2px 0 20px rgba(0,0,0,.35);
}
.mobile-panel.mobile-panel-open{ transform: translateX(0); }

.panel-toggle{
    position: fixed;
    left: 10px; top: 10px;
    width: 36px; height: 32px;
    display: grid; place-items: center;
    gap: 3px; padding: 4px 6px;
    z-index: 50;
    border-radius: 10px;
    background: rgba(15,23,42,.6);
    border: 1px solid rgba(148,163,184,.28);
    box-shadow: 0 2px 10px rgba(0,0,0,.3);
}
.panel-toggle .bar{
    display:block; width: 18px; height: 2px;
    background: linear-gradient(90deg, #e2e8f0, #94a3b8);
    border-radius: 2px;
}

@media (min-width: 821px){
    .mobile-panel{ position: static; transform: none; width: auto; max-width: none; box-shadow: none; }
    .panel-toggle{ display:none; }
}

.tap-deselect{ cursor: pointer; }
@media (max-width: 820px){
    .tap-deselect::after{
        content: " (tap to deselect)";
        font-size: 11px; opacity: .55; margin-left: 6px;
    }
}
@media (max-width: 820px) and (orientation: portrait){
    #panel.mobile-panel{
        width: clamp(320px, 84vw, 440px); /* 原本 ~76vw → 提到 84vw，上限 440px */
    }
}

@media (max-width: 1180px) and (orientation: landscape){
    #panel.mobile-panel{
        width: clamp(360px, 56vw, 600px); /* 56vw，上限 600px；iPad 1024px寬約到 ~570px */
    }
}

@media (min-width: 821px){
    #panel.mobile-panel{ position: static; transform: none; width: auto; max-width: none; box-shadow: none; }
}

#panel{
    max-height: calc(100svh - 16px - env(safe-area-inset-bottom));
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
}


#panelToggle{
    top: calc(10px + env(safe-area-inset-top));
    left: calc(10px + env(safe-area-inset-left));
}
.moon-row{
    overflow-x: auto;
    white-space: nowrap;
    gap: 10px;
    scrollbar-width: thin;
}

#hud-time .hud-chip.active{
    border-color: rgba(245,158,11,0.55);
    box-shadow: inset 0 0 0 1px rgba(245,158,11,0.35);
}

/* Tooltip */
#hud-time .hud-tip{
    position:absolute; left:0; bottom:100%; transform:translateY(-8px);
    z-index:10000; display:none;
    background:rgba(15,16,20,.96); color:#e8eaed;
    border:1px solid rgba(255,255,255,.08); border-radius:10px;
    padding:8px 10px; box-shadow:0 12px 30px rgba(0,0,0,.35);
    pointer-events: none;
}
#hud-time .hud-tip h4{ margin:0 0 6px 0; font-size:11px; opacity:.9; }
#hud-time .hud-tip table{ border-collapse:collapse; font-size:11px; }
#hud-time .hud-tip td{ padding:2px 8px 2px 0; white-space:nowrap; }
#hud-time .hud-tip tr:nth-child(even){ opacity:.9; }


.orbit-groups{
    display: grid;
    grid-template-columns: repeat(2, max-content);
    column-gap: 16px;          /* horizontal space between items */
    row-gap: 6px;              /* vertical space between rows */
    margin-left: 10px;         /* keep spacing after "Show Orbits" */
    align-items: center;
}
.orbit-groups label{ white-space: nowrap; }
.orbit-groups input{ margin-right: 6px; }

/* Optional: slightly tighter on very narrow screens */
@media (max-width: 420px){
    .orbit-groups{
        column-gap: 12px;
        row-gap: 4px;
    }
}


#bootOverlay {
    position: fixed; inset: 0; display: flex;
    align-items: center; justify-content: center;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(2px);
    z-index: 9999;
    font: 600 14px/1.2 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    color: #fff;
    transition: opacity .28s ease;
}
#bootOverlay.hidden { opacity: 0; pointer-events: none; }
#bootOverlay .spinner {
    width: 42px; height: 42px; border-radius: 50%;
    border: 3px solid rgba(255,255,255,.25); border-top-color: #fff;
    animation: spin 1s linear infinite; margin-right: 12px;
}
#bootOverlay #bootOverlayMsg { letter-spacing: .3px; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
@keyframes spin { to { transform: rotate(360deg) } }
@media (prefers-reduced-motion: reduce) { #bootOverlay .spinner { animation: none } }