/* moon.css - Moon Theme: all [data-theme="moon"] selectors
   Extracted from main.css during Sun/Moon decoupling. */

        [data-theme="moon"] {
            --bg: #0a0a0a;
            --fg: #f0f0f0;
            --accent: #ff4d5a;
            --muted: #a8a8a8;
            --border: rgba(255,255,255,0.12);
            --nav-bg: rgba(20, 20, 20, 0.85);
            --panel-bg: #0d0d0d;
            --hal-ring-base: #c026d3; /* Moon: magenta */
            --hal-glow-base: #c026d3; /* Moon: magenta */
            
            /* Typography variables for MOON theme (Dark Retro-Tech Terminal) */
            --font-sans: 'Avenue X', 'Inter', sans-serif;
            --font-display: 'Disket Mono', 'JetBrains Mono', monospace;
            --font-mono: 'JetBrains Mono', monospace;
            --font-hero: 'OTF Glusp', 'Disket Mono', monospace;
        }
        /* Sun-only panels, tabs, nav items and title-blocks must never render
           under Moon - even if they still carry .active from a previous Sun
           session. .panel-content.active (specificity 0,2,0) would otherwise
           beat the global [data-sun-only]{display:none} (0,1,0) and keep a
           Sun-only panel visible after switching back to Moon. */
        [data-theme="moon"] .panel-content[data-sun-only],
        [data-theme="moon"] .panel-tab[data-sun-only],
        [data-theme="moon"] .panel-nav-item[data-sun-only],
        [data-theme="moon"] .title-block[data-sun-only] { display: none !important; }
        [data-theme="moon"] .mz-glow {
            filter: drop-shadow(0 0 2px var(--accent));
        }
        [data-theme="moon"] .sun-icon {
            opacity: 0;
            transform: scale(0.25) rotate(90deg);
            filter: blur(4px);
        }
        [data-theme="moon"] .moon-icon {
            opacity: 1;
            transform: scale(1) rotate(0deg);
            filter: blur(0px);
        }
        [data-theme="moon"] .hero-bg { opacity: 0.18; filter: brightness(1.4); }
        /* Moon Hero dot-matrix particle field - full-bleed texture layer above the photo */
        [data-theme="moon"] #moon-gl { display: flex; align-items: center; justify-content: center; }
        /* DOM fallback: CSS dot pattern when WebGL is unavailable */
        [data-theme="moon"] #gl.dm-fallback {
            background-image: radial-gradient(rgba(255,77,90,0.55) 1px, transparent 1.6px);
            background-size: 26px 26px;
            opacity: 0.32;
        }
        /* ---- Moon hero enhancements (Live Diagnostic Console) ---- */
        [data-theme="moon"] .hsb-rec-wrap { display: inline-flex; align-items: center; gap: 5px; }
        [data-theme="moon"] .hsb-rec {
            width: 9px; height: 9px; border-radius: 50%; background: var(--accent);
            display: inline-block; animation: mzRecBlink 1.1s steps(1) infinite;
        }
        [data-theme="moon"] .hsb-extra { display: inline; }
        [data-theme="moon"] .tc-extra { display: block; margin-top: 12px; }
        [data-theme="moon"] .tc-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: 6px; }
        [data-theme="moon"] .tc-k { color: var(--muted); font-size: var(--fs-2xs); }
        [data-theme="moon"] .tc-v { color: var(--fg); font-weight: 700; font-size: var(--fs-2xs); }
        [data-theme="moon"] #heroSpark {
            display: block; width: 100%; height: 42px; margin-top: 10px;
            border: 1px solid var(--border); background: rgba(0,0,0,0.25);
        }
        [data-theme="moon"] .tc-scan {
            display: block; width: 100%; margin-top: 10px; border: 1px solid var(--border);
            color: var(--accent); background: transparent; padding: 7px; font: inherit;
            font-size: var(--fs-2xs); letter-spacing: 0.16em; text-transform: uppercase;
            cursor: pointer; transition: background 0.2s, border-color 0.2s;
        }
        [data-theme="moon"] .tc-scan:hover { border-color: var(--accent); background: rgba(255,77,90,0.07); }
        @keyframes mzRecBlink { 50% { opacity: 0.15; } }
        @media (prefers-reduced-motion: reduce) {
            [data-theme="moon"] .hsb-rec { animation: none; }
        }
        [data-theme="moon"] .monozen-chassis .status-bar .left::before {
            content: '>';
            color: var(--accent);
            font-weight: 700;
            font-size: 11px;
            opacity: 0.6;
            margin-right: 2px;
        }
        [data-theme="moon"] .glyph-matrix-canvas.active {
            opacity: 0.25;
        }
        [data-theme="moon"] .modal-close-btn {
            border-color: rgba(255,255,255,0.15);
        }
        [data-theme="moon"] .modal-close-btn:hover {
            border-color: var(--accent);
            box-shadow: 0 0 12px -4px var(--accent);
        }
        [data-theme="moon"] #modalOverlay.open .modal-corner-br {
            opacity: 0.4;
        }
        [data-theme="moon"] .modal-card h2 {
            position: relative;
            padding-left: 1.1ch;
        }
        [data-theme="moon"] .modal-card h2::before {
            content: '>';
            position: absolute;
            left: 0;
            color: var(--accent);
            font-weight: 700;
            font-size: 0.7em;
            top: 0.08em;
        }
    [data-theme="moon"] .hd-card {
        border-color: rgba(255,255,255,0.08);
    }
    [data-theme="moon"] .hd-card:hover {
        border-color: var(--accent);
    }
    [data-theme="moon"] .hd-advisory {
        border-top-color: rgba(255,255,255,0.08);
    }

    /* VISITOR SCAN: harvested data woven into the Moon hero console (readout terminal) */
    [data-theme="moon"] .session-block {
        margin-top: 14px;
        padding: 14px 16px;
        border: 1px solid var(--border);
        border-left: 3px solid var(--accent);
        background: rgba(255,77,90,0.04);
        opacity: 0;
        transform: translateY(6px);
        transition: opacity 0.5s ease, transform 0.5s ease;
    }
    [data-theme="moon"] .session-block.revealed { opacity: 1; transform: none; }
    [data-theme="moon"] .session-block.pulse { animation: sesPulse 1.1s ease-out; }
    @keyframes sesPulse {
        0% { box-shadow: 0 0 0 0 rgba(255,77,90,0.5); }
        100% { box-shadow: 0 0 0 14px rgba(255,77,90,0); }
    }
    [data-theme="moon"] .session-block .sess-head {
        color: var(--accent); font-weight: 700; font-size: var(--fs-sm);
        letter-spacing: 0.08em; margin-bottom: 8px;
    }
    [data-theme="moon"] .session-block .srow {
        display: flex; gap: 12px; padding: 2px 0; font-size: var(--fs-sm); line-height: 1.5;
    }
    [data-theme="moon"] .session-block .sk { color: var(--muted); min-width: 84px; opacity: 0.8; flex: none; }
    [data-theme="moon"] .session-block .sv { color: var(--fg); word-break: break-word; }
    [data-theme="moon"] .session-block .sv.a { color: var(--accent); }
    [data-theme="moon"] .session-block .sv.dim { color: var(--muted); }
    [data-theme="moon"] .panel-content.active::after {
        opacity: 0.5;
    }
    [data-theme="moon"] .section-title-prompt {
        position: relative;
        padding-left: 1.1ch;
    }
    [data-theme="moon"] .section-title-prompt::before {
        content: '>';
        position: absolute;
        left: 0;
        color: var(--accent);
        font-weight: 700;
    }
    [data-theme="moon"] h2.section-title-prompt::before {
        font-size: 0.7em;
        top: 0.08em;
    }
    [data-theme="moon"] .section-prompt-inline {
        color: var(--accent);
        font-weight: 700;
        font-family: 'JetBrains Mono', monospace;
        margin-right: 0.25em;
    }
    [data-theme="moon"] .panel-coord {
        border-color: rgba(255,255,255,0.08);
    }
    [data-theme="moon"] .section-divider .sd-line::after {
        background: var(--accent);
        opacity: 0.6;
    }
    [data-theme="moon"] .section-divider .sd-label {
        opacity: 0.85;
    }
    [data-theme="moon"] .tl-item::before {
        content: '';
        position: absolute;
        left: -33px;
        top: 6px;
        width: 8px;
        height: 1px;
        background: var(--accent);
        opacity: 0;
        transition: opacity 0.3s;
    }
    [data-theme="moon"] .tl-item:hover::before {
        opacity: 0.5;
    }
    [data-theme="moon"] #workTimeline {
        position: relative;
    }
    [data-theme="moon"] [data-panel="registry"] .group:hover .mz {
        filter: drop-shadow(0 0 4px var(--accent));
        transition: filter 0.3s;
    }
    [data-theme="moon"] .stack-card {
        border-color: rgba(255,255,255,0.06);
    }
    [data-theme="moon"] .stack-card:hover {
        border-color: var(--accent);
    }
    [data-theme="moon"] .stack-card::before {
        background: var(--accent);
        opacity: 0.3;
    }
    [data-theme="moon"] .stack-card:hover::before {
        opacity: 1;
    }
    @media (max-width: 768px) {
        [data-theme="sun"] [data-panel="projects"] .project-card-sun {
            transform: none !important;
        }
    }
    [data-theme="moon"] #threeGlobeContainer {
  border: none;
  box-shadow: inset 0 0 60px rgba(0,0,0,0.5);
}
    [data-theme="moon"] #threeGlobeContainer::before {
  content: '';
  position: absolute;
  inset: 8px;
  pointer-events: none;
  z-index: 2;
  background:
    /* top-left L-bracket */
    linear-gradient(to right, var(--accent) 2px, transparent 2px) 0 0 / 20px 2px no-repeat,
    linear-gradient(to bottom, var(--accent) 2px, transparent 2px) 0 0 / 2px 20px no-repeat,
    /* bottom-right L-bracket */
    linear-gradient(to left, var(--accent) 2px, transparent 2px) 100% 100% / 20px 2px no-repeat,
    linear-gradient(to top, var(--accent) 2px, transparent 2px) 100% 100% / 2px 20px no-repeat;
  opacity: 0.5;
}
    [data-theme="moon"] #threeGlobeContainer::after {
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.45) 100%);
}
    [data-theme="moon"] #globeTooltip {
  border-left-style: dashed;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3), inset 0 0 0 0 transparent;
  backdrop-filter: blur(16px) saturate(200%);
  -webkit-backdrop-filter: blur(16px) saturate(200%);
}
    [data-theme="moon"] .preview-canvas-wrap {
        position: relative; width: 100%; max-width: 100%; height: auto;
        margin: 0 0 18px; aspect-ratio: 16/9;
        background: rgba(0,0,0,0.5);
        border: 1px solid rgba(255,255,255,0.08);
        box-shadow: inset 0 0 24px rgba(0,0,0,0.6);
    }
    [data-theme="moon"] .preview-canvas-wrap canvas {
        width: 100%; height: 100%; display: block;
        image-rendering: pixelated; image-rendering: crisp-edges;
    }
    [data-theme="moon"] .preview-canvas-wrap .pc-corner {
        position: absolute; width: 10px; height: 10px;
        border-color: var(--accent); border-style: solid;
        opacity: 0.7; pointer-events: none; z-index: 2;
    }
    [data-theme="moon"] .preview-canvas-wrap .pc-tl { top: 4px; left: 4px; border-width: 1px 0 0 1px; }
    [data-theme="moon"] .preview-canvas-wrap .pc-tr { top: 4px; right: 4px; border-width: 1px 1px 0 0; }
    [data-theme="moon"] .preview-canvas-wrap .pc-bl { bottom: 4px; left: 4px; border-width: 0 0 1px 1px; }
    [data-theme="moon"] .preview-canvas-wrap .pc-br { bottom: 4px; right: 4px; border-width: 0 1px 1px 0; }
    [data-theme="moon"] .moon-browser {
        display: flex; gap: 0; min-height: 520px;
        position: relative;
    }
    [data-theme="moon"] .moon-index-col {
        width: 38%; flex: none;
        border-right: 1px solid rgba(255,255,255,0.08);
        position: relative; z-index: 2;
    }
    [data-theme="moon"] .moon-preview-col {
        width: 62%; flex: none;
        position: relative; z-index: 2;
        display: flex; flex-direction: column; justify-content: center;
        padding: 32px 36px;
    }
    [data-theme="moon"] .scan-grid {
        position: absolute; inset: 0; pointer-events: none; z-index: 0;
        background:
            repeating-linear-gradient(to right,  rgba(255,255,255,0.03) 0 1px, transparent 1px calc(100%/14)),
            repeating-linear-gradient(to bottom, rgba(255,255,255,0.03) 0 1px, transparent 1px calc(100%/10));
    }
    [data-theme="moon"] .idx-row {
        position: relative;
        padding: 18px 20px; cursor: pointer;
        display: flex; align-items: center; gap: 14px;
        border-bottom: 1px solid rgba(255,255,255,0.04);
        transition: opacity 0.25s ease;
        font-family: 'JetBrains Mono', monospace;
    }
    [data-theme="moon"] .idx-row::before {
        content: ''; position: absolute; inset: 0;
        background: rgba(255,77,90,0.06);
        transform: scaleY(0); transform-origin: bottom;
        transition: transform 0.35s cubic-bezier(0.19,1,0.22,1);
    }
    [data-theme="moon"] .idx-row::after {
        content: ''; position: absolute; left: 0; top: 50%;
        width: 2px; height: 0; background: var(--accent);
        transform: translateY(-50%);
        transition: height 0.3s cubic-bezier(0.19,1,0.22,1);
    }
    [data-theme="moon"] .idx-row:focus-visible::before { transform: scaleY(1); }
    [data-theme="moon"] .idx-row.active::before { transform: scaleY(1); background: rgba(255,77,90,0.1); }
    [data-theme="moon"] .idx-row.active::after { height: 60%; }
    [data-theme="moon"] .idx-row .idx-num {
        font-size: 10px; color: rgba(255,255,255,0.3);
        letter-spacing: 0.04em; width: 32px; flex: none;
        position: relative; z-index: 1;
    }
    [data-theme="moon"] .idx-row .idx-title {
        font-size: 11px; font-weight: 500; text-transform: uppercase;
        letter-spacing: 0.08em; color: rgba(255,255,255,0.7);
        position: relative; z-index: 1;
        transition: color 0.25s ease;
    }
    [data-theme="moon"] .idx-row:hover .idx-title { color: #fff; }
    [data-theme="moon"] .idx-row.active .idx-title { color: #fff; }
    [data-theme="moon"] .moon-preview {
        display: grid;
        grid-template-rows: auto auto auto auto auto;
        gap: 18px;
        max-width: 100%;
    }
    [data-theme="moon"] .moon-preview .preview-progress {
        display: flex; align-items: center; gap: 10px;
        font-family: 'JetBrains Mono', monospace;
        font-size: 9px; color: rgba(255,255,255,0.35);
        letter-spacing: 0.1em; text-transform: uppercase;
        padding-bottom: 10px;
        border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    [data-theme="moon"] .moon-preview .preview-track {
        flex: 1; height: 2px; background: rgba(255,255,255,0.08);
        position: relative;
    }
    [data-theme="moon"] .moon-preview .preview-track .preview-fill {
        height: 100%; background: var(--accent);
        transition: width 0.4s cubic-bezier(0.19,1,0.22,1);
        width: 0%;
        box-shadow: 0 0 8px rgba(255,77,90,0.4);
    }
    [data-theme="moon"] .moon-preview .preview-pips {
        display: flex; gap: 4px;
    }
    [data-theme="moon"] .moon-preview .preview-pips .pip {
        width: 6px; height: 6px;
        border: 1px solid rgba(255,255,255,0.18);
        transition: background 0.3s ease, border-color 0.3s ease;
    }
    [data-theme="moon"] .moon-preview .preview-pips .pip.active {
        background: var(--accent); border-color: var(--accent);
        box-shadow: 0 0 6px rgba(255,77,90,0.5);
    }
    [data-theme="moon"] .moon-preview .preview-title {
        font-family: 'JetBrains Mono', monospace;
        font-size: 22px; font-weight: 700; text-transform: uppercase;
        letter-spacing: 0.1em; color: #fff; line-height: 1.2;
        min-height: 1.3em;
        text-shadow: 0 0 24px rgba(255,77,90,0.15);
    }
    [data-theme="moon"] .moon-preview .preview-canvas-wrap {
        margin: 0;
    }
    [data-theme="moon"] .moon-preview .preview-specs {
        display: grid;
        grid-template-columns: 64px 1fr;
        gap: 4px 14px;
        font-family: 'JetBrains Mono', monospace;
        font-size: 10px; letter-spacing: 0.04em;
        padding: 10px 12px;
        background: rgba(255,255,255,0.02);
        border: 1px solid rgba(255,255,255,0.05);
    }
    [data-theme="moon"] .moon-preview .preview-specs .spec-label {
        color: rgba(255,255,255,0.3); text-transform: uppercase;
        letter-spacing: 0.08em;
    }
    [data-theme="moon"] .moon-preview .preview-specs .spec-value {
        color: rgba(255,255,255,0.85); text-transform: uppercase;
    }
    [data-theme="moon"] .moon-preview .preview-desc {
        font-family: 'Inter', sans-serif;
        font-size: 12px; color: rgba(255,255,255,0.55); line-height: 1.7;
        min-height: 3em;
        max-width: 52ch;
    }
    [data-theme="moon"] .moon-preview .preview-chips {
        display: flex; flex-wrap: wrap; gap: 6px;
        margin-top: -4px;
    }
    [data-theme="moon"] .moon-preview .preview-chips .pchip {
        font-family: 'JetBrains Mono', monospace;
        font-size: 9px; letter-spacing: 0.04em; text-transform: uppercase;
        padding: 4px 9px; border: 1px solid rgba(255,255,255,0.12);
        color: rgba(255,255,255,0.5);
        background: rgba(255,255,255,0.02);
        transition: border-color 0.25s ease, color 0.25s ease;
    }
    [data-theme="moon"] .moon-preview .preview-chips .pchip:hover {
        border-color: var(--accent);
        color: rgba(255,255,255,0.85);
    }
    [data-theme="moon"] #project-grid { display: none; }
    @media (max-width: 1024px) {
        [data-theme="moon"] .moon-browser { display: none !important; }
        [data-theme="moon"] #project-grid { display: grid !important; }
    }
    [data-theme="moon"] .hero-reticle .ret-outer { animation: retSpinSlow 120s linear infinite; transform-origin: 50% 50%; transform-box: view-box; }
    [data-theme="moon"] .hero-reticle .ret-inner { animation: retSpinRev 50s linear infinite; transform-origin: 50% 50%; transform-box: view-box; }
    [data-theme="moon"], [data-theme="moon"] * { cursor: none !important; }
    [data-theme="moon"] .schematic-node { display: none; }
    [data-theme="moon"] .stamp-palette { display: none; }
    [data-theme="moon"] .snap-btn.snapped {
      transform: scale(1.06);
      box-shadow: 0 0 0 2px var(--accent), 0 0 24px -8px var(--accent);
    }
    [data-theme="moon"] .snap-btn.snapped .snap-ring {
      position: absolute; inset: -3px; border: 1px solid var(--accent);
      border-radius: 0;
      opacity: 0.5; pointer-events: none;
      animation: snapPulse 1.4s ease-in-out infinite;
    }
    [data-theme="moon"] .globe-marker .g-label { color: var(--fg); opacity: 0.55; }
    [data-theme="moon"] .globe-point-label {
      color: var(--accent);
      text-shadow: 0 0 6px rgba(0,0,0,0.8), 0 0 12px rgba(0,0,0,0.6);
      opacity: 0.65;
    }
    [data-theme="moon"] #mz-trail{display:block}
    [data-theme="moon"] #scroll-rail .rail-pct{position:absolute;right:8px;
      font-family:"JetBrains Mono",monospace;font-size:9px;color:var(--accent);
      opacity:.6;transform:translateY(-50%)}

    /* ============================================================
       MOON PANEL ENHANCEMENTS - credentials filter / toolchain inspector.
       These structures live in index.html but are
       hidden on Sun (via the `hidden` attribute + no display override)
       and revealed only under [data-theme="moon"]. Sun panels are
       untouched.
       ============================================================ */
    /* Moon-only containers stay hidden until the build actually succeeds
       (gated by `.moon-panels-built` on <html>). If the build JS fails to run
       - e.g. a stale cached panel-system.js - the original shared panels
       remain visible instead of collapsing to a blank panel. */
    [data-theme="moon"] #moonToolInspector { display: none; }

    [data-theme="moon"].moon-panels-built #stackCount { display: none !important; }
    [data-theme="moon"].moon-panels-built .moon-tc-wrap { display: flex; gap: 0; align-items: stretch; border: 1px solid var(--border); }
    [data-theme="moon"].moon-panels-built #stackGrid { flex: 1 1 auto; border-right: 1px solid var(--border); padding: 18px 20px; }
    [data-theme="moon"].moon-panels-built #moonToolInspector { display: block; width: 300px; flex: 0 0 300px; }
    [data-theme="moon"] .stack-card.sel { border-color: var(--accent); background: rgba(255,77,90,.07); color: var(--accent); }



    /* ---- Registry: Moon issuer filter (4.0 card grid) ---- */
    [data-theme="moon"] #moonCredFilter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
    [data-theme="moon"] #moonCredCount { display: block; }
    [data-theme="moon"] #moonCredFilter .cf-btn { font-family: 'JetBrains Mono', monospace; font-size: var(--fs-2xs); font-weight: 500; letter-spacing: var(--ls-mono); text-transform: uppercase; padding: 6px 14px; border: 1px solid var(--border); background: var(--nav-bg); color: var(--muted); cursor: pointer; transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s, background-color 0.2s; }
    [data-theme="moon"] #moonCredFilter .cf-btn:hover { color: var(--fg); border-color: var(--accent); }
    [data-theme="moon"] #moonCredFilter .cf-btn:active { transform: scale(0.96); }
    [data-theme="moon"] #moonCredFilter .cf-btn.active { color: var(--accent); border-color: var(--accent); background: rgba(230, 57, 70, 0.04); }

    /* ---- Toolchain: evidence inspector ---- */
    [data-theme="moon"] .mz-inspector { padding: 22px 24px; }
    [data-theme="moon"] .mz-insp-empty { color: var(--muted); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
    [data-theme="moon"] .mz-inspector .insp { font-size: 10.5px; letter-spacing: .2em; color: var(--muted); text-transform: uppercase; }
    [data-theme="moon"] .mz-inspector h3 { font-size: 22px; text-transform: uppercase; margin: 6px 0 4px; letter-spacing: -.02em; color: var(--fg); }
    [data-theme="moon"] .mz-inspector .blurb { color: var(--muted); font-size: 12px; margin-bottom: 20px; }
    [data-theme="moon"] .mz-inspector .used-h { font-size: 10.5px; letter-spacing: .16em; color: var(--accent); text-transform: uppercase; border-bottom: 1px solid var(--border); padding-bottom: 8px; margin-bottom: 6px; }
    [data-theme="moon"] .mz-inspector .use { display: grid; grid-template-columns: 56px 1fr; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--border); }
    [data-theme="moon"] .mz-inspector .use .ref { color: var(--accent); font-weight: 700; cursor: pointer; }
    [data-theme="moon"] .mz-inspector .use .ref:hover { text-decoration: underline; }
    [data-theme="moon"] .mz-inspector .use .what { font-size: 13px; }
    [data-theme="moon"] .mz-inspector .use .what .role { color: var(--muted); font-size: 11.5px; margin-top: 3px; }
    [data-theme="moon"] .mz-inspector .use .what .role b { color: var(--fg); }

    @media (max-width: 860px) {
      [data-theme="moon"] .moon-tc-wrap { flex-direction: column; }
      [data-theme="moon"] #stackGrid { border-right: none; }
      [data-theme="moon"] #moonToolInspector { width: auto; flex: 1 1 auto; border-top: 1px solid var(--border); }
    }

    /* ============================================================
       NAV CAPSULE TILT (Moon-only) - faithful to mockup
       .nav (frame, holds perspective, never rotates)
         › .nav-plane (the glass pill that TILTS)
         › .nav-inner content
       .nav-corner-group is a sibling of .nav-plane → stays OUTSIDE the
       tilt, then counter-rotates each frame so the brackets framing the
       active item read axis-aligned while the pill tilts (depth differential).
       ============================================================ */
    [data-theme="moon"] .nav {
        perspective: 900px;
        transition: filter 0.18s ease;
    }
    [data-theme="moon"] .nav-plane {
        position: relative;
        background: var(--nav-bg);
        border: 1px solid var(--border);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        transform-style: preserve-3d;
        transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
        transition: transform 0.12s ease-out, filter 0.18s ease;
        will-change: transform;
    }
    /* faint top sheen that shifts with tilt = catches "light", sells the 3D */
    [data-theme="moon"] .nav-plane::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,var(--sheen,0.05)) 50%, transparent 60%);
        opacity: 0.9;
        mix-blend-mode: screen;
    }
    [data-theme="moon"] .nav.is-tilted .nav-plane {
        filter: drop-shadow(var(--sh-x, 0px) var(--sh-y, 14px) 26px rgba(0,0,0,0.55));
    }

    /* ---- Globe "open command center" affordance (hero globe) ---- */
    [data-theme="moon"] #threeGlobeContainer { cursor: grab; }
    [data-theme="moon"] .globe-open-chip {
        position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%);
        background: var(--nav-bg); border: 1px solid var(--border);
        border-left: 2px solid var(--accent); color: var(--fg);
        font-family: var(--mono, monospace); font-size: 9px; letter-spacing: 0.16em;
        padding: 6px 12px; border-radius: 2px; cursor: pointer; z-index: 12;
        text-transform: uppercase; transition: background 0.2s, border-color 0.2s, opacity 0.2s;
        opacity: 0.82;
    }
    [data-theme="moon"] .globe-open-chip:hover { opacity: 1; background: rgba(255,77,90,0.12); border-color: var(--accent); }
    [data-theme="sun"] .globe-open-chip { display: none; }

    /* ---- Globe Command Center (Moon mission-control modal) ---- */
    [data-theme="moon"] .globe-station {
        position: fixed; inset: 0; z-index: 5000; display: flex;
        align-items: center; justify-content: center; padding: 24px;
    }
    [data-theme="moon"] .globe-station[hidden] { display: none; }
    [data-theme="moon"] .gs-backdrop {
        position: absolute; inset: 0; background: rgba(5,5,5,0.82);
        backdrop-filter: blur(6px); opacity: 0; transition: opacity 0.28s ease;
    }
    [data-theme="moon"] .globe-station.open .gs-backdrop { opacity: 1; }

    [data-theme="moon"] .gs-panel {
        position: relative; width: min(1180px, 100%); height: min(760px, 92vh);
        background: var(--bg, #0a0a0a); border: 1px solid var(--border, rgba(255,255,255,0.12));
        border-radius: 10px; overflow: hidden; display: flex; flex-direction: column;
        box-shadow: 0 30px 80px rgba(0,0,0,0.6); transform: translateY(14px) scale(0.98);
        opacity: 0; transition: transform 0.28s cubic-bezier(.19,1,.22,1), opacity 0.28s ease;
    }
    [data-theme="moon"] .globe-station.open .gs-panel { transform: translateY(0) scale(1); opacity: 1; }

    [data-theme="moon"] .gs-head {
        display: flex; align-items: center; justify-content: space-between;
        padding: 14px 18px; border-bottom: 1px solid var(--border, rgba(255,255,255,0.12));
        background: linear-gradient(180deg, rgba(255,255,255,0.03), transparent);
    }
    [data-theme="moon"] .gs-title {
        font-family: var(--mono, monospace); font-size: 12px; letter-spacing: 0.18em;
        color: var(--fg); text-transform: uppercase; display: flex; align-items: center; gap: 8px;
    }
    [data-theme="moon"] .gs-dot {
        width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
        box-shadow: 0 0 10px var(--accent); animation: gsPulse 1.6s ease-in-out infinite;
    }
    @keyframes gsPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
    [data-theme="moon"] .gs-sub {
        font-family: var(--mono, monospace); font-size: 10px; letter-spacing: 0.1em;
        color: var(--muted, #a8a8a8); margin-top: 3px;
    }
    [data-theme="moon"] .gs-close {
        background: transparent; border: 1px solid var(--border, rgba(255,255,255,0.12));
        color: var(--fg); width: 30px; height: 30px; border-radius: 3px; cursor: pointer;
        font-size: 13px; line-height: 1; transition: border-color 0.2s, color 0.2s;
    }
    [data-theme="moon"] .gs-close:hover { border-color: var(--accent); color: var(--accent); }

    [data-theme="moon"] .gs-body { flex: 1; display: flex; min-height: 0; }
    [data-theme="moon"] .gs-view { flex: 1; display: flex; min-width: 0; border-right: 1px solid var(--border, rgba(255,255,255,0.12)); }
    [data-theme="moon"] .gs-canvas-wrap { position: relative; flex: 1; min-width: 0; background: radial-gradient(120% 90% at 50% 40%, #141414, #0a0a0a 70%); }
    [data-theme="moon"] #stationGlobeCanvas { width: 100%; height: 100%; display: block; cursor: grab; }

    [data-theme="moon"] .gs-reticle-readout {
        position: absolute; left: 16px; top: 14px; pointer-events: none;
        font-family: var(--mono, monospace); letter-spacing: 0.06em;
        border-left: 2px solid var(--accent); padding: 6px 10px; background: rgba(10,10,10,0.5);
    }
    [data-theme="moon"] .gs-lock-name { font-size: 13px; color: var(--fg); text-transform: uppercase; }
    [data-theme="moon"] .gs-lock-coord { font-size: 11px; color: var(--accent); margin-top: 2px; }
    [data-theme="moon"] .gs-lock-dom { font-size: 9px; color: var(--muted, #a8a8a8); margin-top: 2px; letter-spacing: 0.14em; }
    [data-theme="moon"] .gs-hint {
        position: absolute; left: 0; right: 0; bottom: 12px; text-align: center;
        font-family: var(--mono, monospace); font-size: 9px; letter-spacing: 0.16em;
        color: var(--muted, #a8a8a8); opacity: 0.6; text-transform: uppercase; pointer-events: none;
    }

    [data-theme="moon"] .gs-telemetry {
        width: 280px; flex-shrink: 0; display: flex; flex-direction: column;
        border-left: 1px solid var(--border, rgba(255,255,255,0.12)); background: rgba(255,255,255,0.015);
    }
    [data-theme="moon"] .gs-tele-head {
        font-family: var(--mono, monospace); font-size: 10px; letter-spacing: 0.18em;
        color: var(--accent); padding: 12px 14px; border-bottom: 1px solid var(--border, rgba(255,255,255,0.12));
        text-transform: uppercase;
    }
    [data-theme="moon"] .gs-log {
        flex: 1; overflow-y: auto; padding: 10px 14px; font-family: var(--mono, monospace);
        font-size: 10px; line-height: 1.7; color: var(--muted, #a8a8a8);
    }
    [data-theme="moon"] .gs-log-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    [data-theme="moon"] .gs-log-ts { color: var(--accent); opacity: 0.7; margin-right: 6px; }

    [data-theme="moon"] .gs-deck {
        width: 270px; flex-shrink: 0; padding: 14px; overflow-y: auto;
        display: flex; flex-direction: column; gap: 16px; background: rgba(255,255,255,0.015);
    }
    [data-theme="moon"] .gs-group { border: 1px solid var(--border, rgba(255,255,255,0.1)); border-radius: 6px; padding: 12px; }
    [data-theme="moon"] .gs-group-h {
        font-family: var(--mono, monospace); font-size: 9px; letter-spacing: 0.2em;
        color: var(--muted, #a8a8a8); text-transform: uppercase; margin-bottom: 10px;
    }
    [data-theme="moon"] .gs-chips { display: flex; flex-wrap: wrap; gap: 6px; }
    [data-theme="moon"] .gs-chip {
        display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
        background: transparent; border: 1px solid var(--border, rgba(255,255,255,0.14));
        color: var(--muted, #a8a8a8); font-family: var(--mono, monospace); font-size: 9px;
        letter-spacing: 0.08em; padding: 6px 9px; border-radius: 3px; text-transform: uppercase;
        transition: border-color 0.18s, color 0.18s, background 0.18s;
    }
    [data-theme="moon"] .gs-chip-dot { width: 7px; height: 7px; border-radius: 50%; }
    [data-theme="moon"] .gs-chip.active { color: var(--fg); border-color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.06); }
    [data-theme="moon"] .gs-chip:not(.active) { opacity: 0.45; }

    [data-theme="moon"] .gs-lever {
        display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
        background: transparent; border: 1px solid var(--border, rgba(255,255,255,0.14));
        color: var(--muted, #a8a8a8); font-family: var(--mono, monospace); font-size: 10px;
        letter-spacing: 0.08em; padding: 9px 10px; border-radius: 3px; cursor: pointer;
        text-transform: uppercase; margin-bottom: 8px; transition: border-color 0.18s, color 0.18s, background 0.18s;
    }
    [data-theme="moon"] .gs-lever:hover { border-color: rgba(255,255,255,0.4); color: var(--fg); }
    [data-theme="moon"] .gs-lever.active { color: var(--fg); border-color: var(--accent); background: rgba(255,77,90,0.1); }
    [data-theme="moon"] .gs-lever-ico { color: var(--accent); }
    [data-theme="moon"] .gs-slider {
        display: flex; flex-direction: column; gap: 6px; font-family: var(--mono, monospace);
        font-size: 9px; letter-spacing: 0.14em; color: var(--muted, #a8a8a8); text-transform: uppercase;
    }
    [data-theme="moon"] .gs-slider input[type=range] { width: 100%; accent-color: var(--accent); }
    [data-theme="moon"] .gs-stat {
        display: flex; justify-content: space-between; align-items: baseline;
        font-family: var(--mono, monospace); font-size: 10px; letter-spacing: 0.06em;
        padding: 5px 0; border-bottom: 1px dashed rgba(255,255,255,0.08); color: var(--muted, #a8a8a8);
    }
    [data-theme="moon"] .gs-stat b { color: var(--fg); }
    [data-theme="moon"] .gs-stats .gs-group-h { margin-bottom: 4px; }
    [data-theme="moon"] .gs-search { display: flex; flex-direction: column; gap: 8px; position: relative; }
    [data-theme="moon"] .gs-search-input {
      width: 100%; box-sizing: border-box; background: rgba(255,255,255,0.04);
      border: 1px solid var(--border, rgba(255,255,255,0.14)); color: var(--fg);
      font-family: var(--mono, monospace); font-size: 10px; letter-spacing: 0.1em;
      text-transform: uppercase; padding: 8px 10px; border-radius: 3px; outline: none;
      transition: border-color 0.18s;
    }
    [data-theme="moon"] .gs-search-input:focus { border-color: var(--accent); }
    [data-theme="moon"] .gs-search-input::placeholder { color: var(--muted, #a8a8a8); opacity: 0.7; }
    [data-theme="moon"] .gs-lever.gs-go { margin-bottom: 0; }
    [data-theme="moon"] .gs-roster {
      display: flex; flex-direction: column; gap: 0; margin-top: 8px;
      font-family: var(--mono, monospace); font-size: 9px; letter-spacing: 0.1em;
      color: var(--muted, #a8a8a8); text-transform: uppercase;
    }
     [data-theme="moon"] .gs-roster-row {
       display: flex; justify-content: space-between; align-items: center;
       padding: 4px 6px; margin: 0 -6px; border-bottom: 1px dashed rgba(255,255,255,0.08);
       cursor: pointer; border-radius: 2px; transition: background 0.15s, color 0.15s;
     }
     [data-theme="moon"] .gs-roster-row:hover {
       background: rgba(255,255,255,0.06); color: var(--accent);
     }
     [data-theme="moon"] .gs-roster-row b { color: var(--fg); }
     [data-theme="moon"] .gs-roster-row:hover b { color: var(--accent); }
     [data-theme="moon"] .gs-roster-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; margin-right: 6px; }

    /* Custom search result dropdown hover */
    [data-theme="moon"] .gs-search-results { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
    [data-theme="moon"] .gs-search-row:hover { background: rgba(255,255,255,0.06); }
    [data-theme="moon"] .gs-search-row:last-child { border-bottom: none !important; }

    /* L-05: prevent hero status-bar overflow on narrow viewports - the
       LOCAL/UTC extras are Moon-only decorations, so gate the hide on Moon. */
    @media (max-width: 640px) {
      [data-theme="moon"] .hsb-extra { display: none; }
    }

    /* M-05 / M-20: user-visible fallback. Serves two states via classes:
       .is-loading -> spinner ("INITIALIZING UPLINK"), only shown by the
       controller's min-display gate so fast/cached builds never flash it.
       .is-error   -> offline glyph ("GLOBE OFFLINE" / "STATION OFFLINE"). */
    [data-theme="moon"] .globe-fallback {
      position: absolute; inset: 0; z-index: 5;
      display: flex; align-items: center; justify-content: center;
      text-align: center; padding: 24px;
      color: var(--muted, #a8a8a8); pointer-events: none;
      font-family: 'Disket Mono', monospace;
    }
    [data-theme="moon"] .globe-fallback[hidden] { display: none; }
    /* Both inner blocks are hidden until a state class selects one. */
    [data-theme="moon"] .globe-fallback-inner { display: none; flex-direction: column; align-items: center; gap: 8px; }
    [data-theme="moon"] .globe-fallback.is-loading .gf-loading { display: flex; }
    [data-theme="moon"] .globe-fallback.is-error .gf-error { display: flex; }
    [data-theme="moon"] .globe-fallback-glyph { font-size: 28px; color: var(--accent); opacity: 0.7; }
    [data-theme="moon"] .globe-fallback-title { margin: 0; font-size: 12px; letter-spacing: 0.18em; color: var(--fg, #fff); }
    [data-theme="moon"] .globe-fallback-sub { font-size: 11px; max-width: 260px; line-height: 1.5; opacity: 0.8; }
    /* Spinner: a thin reticle ring that sweeps - reads as "acquiring signal". */
    [data-theme="moon"] .globe-fallback-spinner {
      width: 34px; height: 34px; border-radius: 50%;
      border: 2px solid rgba(140, 140, 140, 0.22);
      border: 2px solid color-mix(in srgb, var(--accent) 22%, transparent);
      border-top-color: var(--accent);
      animation: mzGlobeSpin 0.8s linear infinite;
    }
    @keyframes mzGlobeSpin { to { transform: rotate(360deg); } }
    @media (prefers-reduced-motion: reduce) {
      [data-theme="moon"] .globe-fallback-spinner { animation: none; border-top-color: color-mix(in srgb, var(--accent) 55%, transparent); }
    }
    [data-theme="moon"] .stamp-mark { display: none !important; }

    /* Reticle Frame Lock - Focus Pillars */
    [data-theme="moon"] .ipanel { position: relative; }
    [data-theme="moon"] .ipanel::before,
    [data-theme="moon"] .ipanel::after {
        content: '';
        position: absolute;
        width: 14px;
        height: 14px;
        pointer-events: none;
        z-index: 4;
        opacity: 0.35;
        transition: opacity 0.25s ease, transform 0.25s ease;
    }
    [data-theme="moon"] .ipanel::before {
        top: 12px;
        left: 12px;
        border-top: 2px solid var(--accent);
        border-left: 2px solid var(--accent);
    }
    [data-theme="moon"] .ipanel::after {
        bottom: 12px;
        right: 12px;
        border-bottom: 2px solid var(--accent);
        border-right: 2px solid var(--accent);
    }
    [data-theme="moon"] .ipanel:hover::before {
        opacity: 1;
        transform: translate(2px, 2px);
    }
    [data-theme="moon"] .ipanel:hover::after {
        opacity: 1;
        transform: translate(-2px, -2px);
    }