* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* ==========================================
   GLOBAL SELECTION PREVENT
   ========================================== */
body, #space-matrix, .constellation, .beast-container, img, video, svg, #spaceship-title-container, .vice-text-container {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

input, textarea {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

body {
    background-color: #050311;
    color: #ffffff;
    width: 100vw;
}

/* ==========================================
   INTRO SCENE: DESK -> BOX -> SPACE
   ========================================== */
#intro-scene {
    position: relative;
    /* 560vh => 460vh of travel, split into distinct stages (see the phase
       constants in app.js). The box-opening scrub still only occupies a
       short slice of that so it stays snappy; the extra depth all goes to
       the dive and the descent, which is where there is something to look at. */
    /* 560vh => 460vh of travel. Shortening this to 340vh was a mistake: a
       phone momentum flick covers ~2000px in half a second, and over a short
       travel that demands ~200 frame updates/sec when rAF caps at 60 and the
       decoder at ~78 — so it skipped and juddered. A long travel asks for
       fewer frames per flick. Granularity for slow scrolling is bought with
       frame RATE instead (the clip is 48fps), which costs nothing at speed
       because fast scrolling is capped by rAF either way. */
    height: 560vh;
    z-index: 200;
}

#intro-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    background: #050505;
    perspective: 1800px;
}

/* Carries the room footage; the dive-zoom scales this whole layer. */
#room-scene {
    position: absolute;
    inset: 0;
    transform-origin: 50% 46%;
    will-change: transform;
    background: #050505;
}

/* The proxy and the full-quality clip occupy the same box; only the opacity
   differs, so the hand-over is a swap of identical framing rather than a
   reflow. */
#room-video-lq,
#room-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    /* Pure decoration — nothing listens to either video element. Left at the
       default (auto), a real touch compositor can hit-test a playing video
       slightly differently from a static box; taking it out of hit-testing
       entirely removes that as a way for a tap on a card sitting above it to
       land on the video instead. */
    pointer-events: none;
}
#room-video-lq { z-index: 2; }
#room-video    { z-index: 3; opacity: 0; }
#room-video.shown    { opacity: 1; }
/* Opacity only — deliberately still rendered. The proxy stays loaded beneath
   the full-quality clip as a safety net: if that one ever fails to paint, the
   hero falls back to the proxy image instead of going blank. */
#room-video-lq.faded { opacity: 0; }

/* Warm bloom that rises with the tree, lifting the room out of darkness as
   the branches light. Screen-blended so it adds light rather than washing. */
#grow-glow {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    opacity: 0;
    /* Was mix-blend-mode: screen. Blending samples what is underneath, and
       what is underneath is the video — so every seek invalidated a
       full-viewport blend. Over near-black footage plain alpha compositing
       of a warm gradient is visually almost the same; the stops are lifted
       a little to make up the difference. */
    background:
        radial-gradient(ellipse 30% 34% at 50% 52%, rgba(255, 206, 138, 0.62) 0%, rgba(255, 168, 82, 0.24) 45%, transparent 72%),
        radial-gradient(ellipse 62% 52% at 50% 55%, rgba(255, 150, 70, 0.17) 0%, transparent 70%);
    will-change: opacity;
}

/* ==========================================
   SERVICE BRANCHES
   One per branch of the tree. Each is revealed as its branch grows, so the
   tree itself becomes the navigation rather than a separate menu.
   ========================================== */
#branch-layer {
    position: absolute;
    inset: 0;
    z-index: 6;
    pointer-events: none;
}

.branch {
    position: absolute;
    left: var(--bx);
    top: var(--by);
    display: flex;
    align-items: center;
    gap: 0;
    /* Absolutely positioned with only `left` set, the assembly would be
       shrink-to-fit into the gap between the anchor and the right edge — at
       left:70% on a 375pt phone that is 112px, which crushed the card long
       before its max-width applied. max-content opts out of that clamp and
       lets .branch-card's own max-width do the limiting. */
    width: max-content;
    transform: translate(-50%, -50%);
    opacity: 0;
    pointer-events: none;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
    /* Promote to its own layer so the fade/slide is composited rather than
       repainted through everything stacked over the video. No `contain:
       paint` here — it would clip to the branch box and cut off both the
       card's drop shadow and the dot's glow, which extend well outside it. */
    will-change: opacity, transform;
}

/* Right-hand branches read outward from the trunk, so mirror the order. */
.branch[data-side="right"] { flex-direction: row-reverse; }

.branch.lit {
    opacity: 1;
    pointer-events: auto;
}

/* Slide in from the trunk side as the branch forms. */
.branch[data-side="left"]  { transform: translate(-50%, -50%) translateX(26px); }
.branch[data-side="right"] { transform: translate(-50%, -50%) translateX(-26px); }
.branch.lit[data-side="left"],
.branch.lit[data-side="right"] { transform: translate(-50%, -50%) translateX(0); }

.branch-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #ffd79a;
    box-shadow: 0 0 12px rgba(255, 190, 120, 0.95), 0 0 26px rgba(255, 160, 70, 0.5);
    flex-shrink: 0;
}

.branch-line {
    width: 46px;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 200, 140, 0) 0%, rgba(255, 200, 140, 0.75) 100%);
    flex-shrink: 0;
}
.branch[data-side="right"] .branch-line {
    background: linear-gradient(270deg, rgba(255, 200, 140, 0) 0%, rgba(255, 200, 140, 0.75) 100%);
}

.branch-card {
    display: block;
    padding: 11px 16px;
    margin: 0 10px;
    border-radius: 7px;
    /* No backdrop-filter here on purpose. Blurring the backdrop forces the
       browser to re-read and re-blur the region behind each card, and the
       backdrop is a video being seeked on every frame of scroll — so five
       cards meant five full re-blurs per scrubbed frame, scaling with
       viewport area. That was the desktop lag. A slightly more opaque solid
       reads almost identically over night footage and costs nothing. */
    background: rgba(12, 9, 6, 0.9);
    border: 1px solid rgba(255, 190, 120, 0.28);
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.6);
    white-space: nowrap;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.branch[data-side="right"] .branch-card { text-align: right; }

/* Guarded on a real pointer. On iOS Safari the first tap of an element that
   has :hover styles only applies the hover state — the click lands on the
   SECOND tap. That is why a branch had to be touched twice to open. Behind
   (hover: hover) touch devices never enter this rule and the first tap
   activates. */
@media (hover: hover) and (pointer: fine) {
    .branch:hover .branch-card {
        border-color: rgba(255, 210, 150, 0.8);
        box-shadow: 0 12px 40px rgba(0,0,0,0.7), 0 0 26px rgba(255, 170, 80, 0.28);
        transform: translateY(-2px);
    }
}

/* Touch gets an immediate pressed state instead, so a tap still feels alive. */
.branch:active .branch-card {
    border-color: rgba(255, 210, 150, 0.8);
    box-shadow: 0 12px 40px rgba(0,0,0,0.7), 0 0 26px rgba(255, 170, 80, 0.28);
}
.branch { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

.branch-tag {
    display: block;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.6rem;
    letter-spacing: 2.5px;
    color: rgba(255, 190, 120, 0.85);
    margin-bottom: 3px;
}

.branch-title {
    display: block;
    font-size: 0.98rem;
    font-weight: 700;
    letter-spacing: 0.2px;
    color: #fff4e6;
    margin-bottom: 2px;
}

.branch-sub {
    display: block;
    font-size: 0.73rem;
    color: rgba(240, 220, 200, 0.6);
}

/* Portrait phones keep the same left/right fan as desktop, sitting against
   the branch ends — the cards just get narrower and the connector shorter so
   two of them still fit either side of the trunk on a 375pt screen. */
@media (max-width: 900px), (orientation: portrait) {
    /* Portrait crops the frame tighter, so branches sit at different
       coordinates than in landscape. --px/--py mark the branch END: the
       dot is pinned there and the card hangs outboard of it. */
    .branch { left: var(--px, var(--bx)); top: var(--py, var(--by)); }

    /* Re-order so the connector points INTO the tree instead of away from
       it: card outboard, then line, then the dot sitting on the branch end.
       (DOM order is line, dot, card, so both sides need explicit order.) */
    .branch[data-side="left"],
    .branch[data-side="right"] { flex-direction: row; }

    .branch[data-side="left"]  .branch-card { order: 1; }
    .branch[data-side="left"]  .branch-line { order: 2; }
    .branch[data-side="left"]  .branch-dot  { order: 3; }

    .branch[data-side="right"] .branch-dot  { order: 1; }
    .branch[data-side="right"] .branch-line { order: 2; }
    .branch[data-side="right"] .branch-card { order: 3; }

    /* Pin the dot on the anchor rather than centring the whole assembly:
       left cards end at the branch, right cards start from it. */
    .branch[data-side="left"]  { transform: translate(-100%, -50%) translateX(22px); }
    .branch[data-side="right"] { transform: translate(0, -50%) translateX(-22px); }
    .branch.lit[data-side="left"]  { transform: translate(-100%, -50%) translateX(0); }
    .branch.lit[data-side="right"] { transform: translate(0, -50%) translateX(0); }

    .branch-line { width: 16px; }

    /* Identical rectangles, so the five read as an ordered set rather than
       five differently-shaped strips. */
    /* Width is capped by the geometry, not by taste: a left card runs from its
       anchor back past the dot (7), the line (16) and the margin (6), so at
       --px 46% on a 375pt screen anything over ~137px runs off the edge. */
    .branch-card {
        width: 34vw;
        max-width: 137px;
        min-height: 80px;   /* title + two subtitle lines, so all five match */
        margin: 0 6px;
        padding: 8px 11px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        white-space: normal;
    }

    .branch-tag   { font-size: 0.5rem;  letter-spacing: 1.6px; margin-bottom: 2px; }
    .branch-title { font-size: 0.74rem; line-height: 1.2;  margin-bottom: 3px; }
    .branch-sub   { display: block; font-size: 0.56rem; line-height: 1.3; }

    .branch-dot { width: 7px; height: 7px; }
}

/* Very narrow phones: drop the second line so the cards stay compact enough
   to sit beside the trunk rather than crowding it. */
@media (max-width: 400px) {
    .branch-card  { width: 35vw; padding: 7px 9px; min-height: 76px; }
    .branch-title { font-size: 0.7rem; }
    .branch-sub   { font-size: 0.54rem; }
    .branch-line  { width: 12px; }
}

/* ==========================================
   AUTHENTICATION & SUBSCRIPTION CORNER (HUD DOCK)
   ========================================== */
#auth-corner {
    position: fixed;
    top: 25px;
    right: 35px;
    z-index: 1000;
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}



.dock-bracket {
    position: absolute;
    width: 6px;
    height: 6px;
    border: 2px solid #d2d5db;
    pointer-events: none;
}

.dock-bracket.top-left {
    top: -2px;
    left: -2px;
    border-right: none;
    border-bottom: none;
}

.dock-bracket.bottom-right {
    bottom: -2px;
    right: -2px;
    border-left: none;
    border-top: none;
}

.dock-content {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dock-divider {
    width: 1px;
    height: 20px;
    background: linear-gradient(180deg, transparent, rgba(210, 213, 219, 0.35), transparent);
    margin: 0 2px;
}

.auth-btn {
    background: rgba(8, 20, 38, 0.6);
    border: 1px solid rgba(210, 213, 219, 0.25);
    color: #a3c7e6;
    padding: 8px 16px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.8rem;
    letter-spacing: 1px;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    overflow: hidden;
}

.auth-btn i {
    font-size: 0.85rem;
    transition: transform 0.3s ease;
}

.auth-btn:hover {
    background: rgba(210, 213, 219, 0.15);
    color: #d2d5db;
    border-color: rgba(210, 213, 219, 0.6);
    box-shadow: 0 0 15px rgba(210, 213, 219, 0.3);
    transform: translateY(-1px);
}

.auth-btn:hover i {
    transform: scale(1.15);
}

.auth-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Subscriptions Button */
.auth-btn.sub-nav-btn {
    background: rgba(255, 215, 0, 0.08);
    border-color: rgba(255, 215, 0, 0.35);
    color: #ffd700;
}

.auth-btn.sub-nav-btn:hover {
    background: rgba(255, 215, 0, 0.2);
    color: #ffffff;
    border-color: #ffd700;
    box-shadow: 0 0 18px rgba(255, 215, 0, 0.4);
}

/* Sign-Up CTA Button */
.auth-btn.sign-up.cta-btn {
    background: linear-gradient(135deg, rgba(255, 214, 170, 0.2) 0%, rgba(255, 176, 102, 0.15) 100%);
    border-color: #d2d5db;
    color: #ffffff;
    font-weight: bold;
    text-shadow: 0 0 8px rgba(210, 213, 219, 0.5);
}

.auth-btn.sign-up.cta-btn:hover {
    background: linear-gradient(135deg, #ffd6aa 0%, #ffb066 100%);
    color: #040912;
    text-shadow: none;
    box-shadow: 0 0 20px rgba(210, 213, 219, 0.6);
    border-color: #ffb066;
}

/* Logout Button */
.auth-btn.logout-btn {
    background: rgba(255, 0, 85, 0.08);
    border-color: rgba(255, 0, 85, 0.3);
    color: #ff4d88;
}

.auth-btn.logout-btn:hover {
    background: #ff0055;
    color: #ffffff;
    border-color: #ff0055;
    box-shadow: 0 0 15px rgba(255, 0, 85, 0.5);
}

/* Agent User Badge */
.user-badge {
    font-family: 'Share Tech Mono', monospace;
    color: #ffb066;
    font-size: 0.8rem;
    letter-spacing: 1px;
    padding: 7px 12px;
    background: rgba(255, 176, 102, 0.08);
    border: 1px solid rgba(255, 176, 102, 0.3);
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.user-status-dot {
    width: 6px;
    height: 6px;
    background-color: #ffb066;
    border-radius: 50%;
    box-shadow: 0 0 8px #ffb066;
    animation: statusPulse 2s infinite alternate;
}

@keyframes statusPulse {
    0% { opacity: 0.4; transform: scale(0.9); }
    100% { opacity: 1; transform: scale(1.1); }
}

/* Credits Badge */
.credit-badge {
    font-family: 'Share Tech Mono', monospace;
    color: #ffd700;
    font-size: 0.8rem;
    letter-spacing: 1px;
    padding: 7px 12px;
    background: rgba(255, 215, 0, 0.08);
    border: 1px solid rgba(255, 215, 0, 0.35);
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.15);
}

/* HUD Dock Bar & Slots — the whole dock is styled in the inline <style> at
   the top of index.html, where it sits with the theme switch it depends on.
   The rules that used to live here gave every slot its own colour AND beat
   the dock's own rules on specificity (.hud-slot.credits over .hud-slot), so
   the yellow coins and pink logout survived every attempt to unify them. */

/* ==========================================
   PREMIUM WAVE BACKGROUND
   ========================================== */
#space-matrix {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    background: #08080a;
}

.premium-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 55% at 50% 0%, rgba(255,255,255,0.035) 0%, transparent 60%),
        radial-gradient(ellipse 100% 70% at 50% 100%, rgba(0,0,0,0.55) 0%, transparent 65%),
        linear-gradient(160deg, #0c0c10 0%, #121218 45%, #050507 100%);
}

.nebula-layer {
    position: absolute;
    inset: 0;
    /* Restrained monochrome wash — no colored nebula blobs, just soft
       tonal depth. Swap this layer out once the background GIF is in. */
    background:
        radial-gradient(ellipse 42% 34% at 16% 22%, rgba(255, 255, 255, 0.05) 0%, transparent 70%),
        radial-gradient(ellipse 38% 42% at 86% 78%, rgba(255, 255, 255, 0.035) 0%, transparent 70%),
        radial-gradient(ellipse 48% 38% at 72% 12%, rgba(255, 255, 255, 0.025) 0%, transparent 70%);
    animation: nebula-drift 75s ease-in-out infinite alternate;
    will-change: transform;
}

@keyframes nebula-drift {
    0%   { transform: translate(0, 0) scale(1); }
    100% { transform: translate(-2.5%, 2%) scale(1.06); }
}

.starfield-layer {
    position: absolute;
    inset: -10%;
    width: 120%;
    height: 120%;
    background-repeat: repeat;
    pointer-events: none;
    will-change: opacity, transform;
}

.starfield-far {
    background-size: 600px 600px;
    opacity: 0.55;
    animation: star-twinkle-far 7s ease-in-out infinite, star-drift-far 140s linear infinite;
}

.starfield-near {
    background-size: 820px 820px;
    opacity: 0.85;
    animation: star-twinkle-near 4.5s ease-in-out infinite, star-drift-near 200s linear infinite;
}

/* Spacetime fabric: a dotted grid that dips toward the sun and planets,
   simulating gravitational curvature. Drawn/animated in app.js. */
#gravity-grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    opacity: 0.85;
    mix-blend-mode: screen;
}

@keyframes star-twinkle-far {
    0%, 100% { opacity: 0.4; }
    50%      { opacity: 0.62; }
}
@keyframes star-twinkle-near {
    0%, 100% { opacity: 0.68; }
    50%      { opacity: 0.92; }
}
@keyframes star-drift-far {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(-600px, -300px); }
}
@keyframes star-drift-near {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(410px, -410px); }
}

.grain-overlay {
    position: absolute;
    inset: 0;
    opacity: 0.045;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    background-size: 180px 180px;
}

/* ==========================================
   SPACESHIP TITLE DISPLAY
   ========================================== */
#spaceship-title-container {
    position: fixed;
    top: 40px;
    left: 40px;
    z-index: 500;
    display: flex;
    align-items: center;
    gap: 15px;
    pointer-events: none;
    animation: mothership-hover 6s ease-in-out infinite alternate;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.mothership-svg {
    width: 280px; 
    height: auto;
    filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.9));
    transform: rotate(2deg);
}

.engine-flame {
    transform-origin: 25px 50px;
    animation: thruster-pulse 0.1s infinite alternate;
    will-change: transform, opacity;
}

@keyframes thruster-pulse {
    0% { transform: scaleX(1) scaleY(1); opacity: 0.8; }
    100% { transform: scaleX(1.3) scaleY(1.1); opacity: 1; }
}

.tractor-beam-title {
    position: relative;
    padding: 15px 35px;
    border-left: 5px dashed #d2d5db;
    background: linear-gradient(90deg, rgba(210, 213, 219, 0.25) 0%, rgba(210, 213, 219, 0.05) 40%, transparent 100%);
    border-radius: 4px;
    box-shadow: -15px 0 35px rgba(210, 213, 219, 0.2);
    overflow: hidden;
}

.tractor-beam-title::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(210, 213, 219, 0.1) 3px, transparent 4px);
    pointer-events: none;
    animation: scanline 4s linear infinite;
    will-change: transform;
}

@keyframes scanline {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(100%); }
}

.tractor-beam-title h1 {
    font-family: 'Share Tech Mono', monospace;
    font-size: 3rem;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: 2px;
    line-height: 1.1;
    text-shadow: 0 0 10px #d2d5db, 0 0 25px rgba(210, 213, 219, 0.6);
    margin: 0;
    position: relative;
    z-index: 2;
}

.tractor-beam-title h1 span {
    display: block;
    font-size: 2rem;
    color: #d2d5db;
    letter-spacing: 12px;
    text-shadow: none;
}

@keyframes mothership-hover {
    0% { transform: translateY(0px) rotate(0deg); }
    100% { transform: translateY(-15px) rotate(1.5deg); }
}

/* ==========================================
   BOTTOM-LEFT HANDWRITING TEXT CONTAINER
   ========================================== */
.vice-text-container {
    position: fixed;
    bottom: 30px;
    left: 40px;
    z-index: 500;
    pointer-events: none;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.vice-line {
    font-family: 'Caveat', 'Rock Salt', cursive, sans-serif;
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.2rem;
    letter-spacing: 1px;
}

body.warping .tactical-grid,
body.warping #blackboard-bg,
body.warping #spaceship-title-container {
    opacity: 0 !important;
    transition: opacity 0.5s ease;
}

/* ==========================================
   CAMERA VIEWPORT & SOLAR SYSTEM
   ========================================== */
#spaceship-viewport {
    position: fixed;
    inset: 0;
    /* Above #space-matrix and the #tour-scene spacer so the nodes are
       actually reachable by the mouse. */
    z-index: 5;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    transform-origin: center center;
    will-change: transform;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1400px;
}

/* ==========================================
   THE VAULT — DESCENT TUNNEL
   Light-gates receding into Z. The camera flies through them on scroll,
   which is what sells "a small box is impossibly deep inside".
   ========================================== */
#descent-tunnel {
    position: fixed;
    inset: 0;
    /* Must sit above #intro-scene (z-index 200) — the tunnel takes over the
       screen as the camera passes through the box opening. */
    z-index: 250;
    pointer-events: none;
    perspective: 620px;
    perspective-origin: 50% 50%;
    opacity: 0;
    background: radial-gradient(ellipse 70% 70% at 50% 50%, rgba(4,4,5,0.35) 0%, #010101 78%);
    will-change: opacity;
}

#descent-tunnel .gate {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 62vmin;
    height: 62vmin;
    margin: -31vmin 0 0 -31vmin;
    border: 1px solid rgba(255, 214, 170, 0.5);
    border-radius: 3px;
    box-shadow: 0 0 26px rgba(255, 190, 130, 0.28), inset 0 0 34px rgba(255, 190, 130, 0.1);
    transform: translateZ(calc(var(--i) * -420px)) rotate(calc(var(--i) * 7deg));
    will-change: transform, opacity;
}

/* ==========================================
   THE VAULT — CORE & MODULE NODES
   All vector: razor sharp at any zoom, unlike the old planet bitmaps.
   ========================================== */
#vault-stage {
    position: relative;
    /* Kept clear of the right-hand nav rail so node labels and rail chips
       don't collide at the core overview. */
    width: min(74vw, 78vh);
    height: min(74vw, 78vh);
    z-index: 10;
    will-change: transform;
}

#trace-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

#trace-layer .trace-base line {
    stroke: rgba(210, 213, 219, 0.16);
    stroke-width: 0.28;
}

#trace-layer .trace-live line {
    stroke: #ffd9ac;
    stroke-width: 0.5;
    stroke-linecap: round;
    filter: drop-shadow(0 0 1.6px rgba(255, 200, 140, 0.9));
    stroke-dasharray: 4 96;
    stroke-dashoffset: 100;
    opacity: 0;
    transition: opacity 0.5s ease;
}

#trace-layer .trace-live line.live {
    opacity: 1;
    animation: trace-pulse 1.9s linear infinite;
}

@keyframes trace-pulse {
    0%   { stroke-dashoffset: 100; }
    100% { stroke-dashoffset: 0; }
}

#vault-core {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30%;
    height: 30%;
    transform: translate(-50%, -50%) scale(var(--core-scale, 1));
    display: flex;
    align-items: center;
    justify-content: center;
    will-change: transform;
}

#vault-core svg { width: 100%; height: 100%; overflow: visible; }

.core-ring {
    fill: none;
    stroke: rgba(210, 213, 219, 0.5);
    stroke-width: 1.4;
    transform-origin: 100px 100px;
}
.ring-outer {
    stroke-dasharray: 10 14;
    animation: core-spin 26s linear infinite;
}
.ring-mid {
    stroke-dasharray: 3 9;
    stroke: rgba(255, 214, 170, 0.55);
    animation: core-spin 17s linear infinite reverse;
}
@keyframes core-spin { to { transform: rotate(360deg); } }

.core-chassis {
    fill: rgba(255, 255, 255, 0.03);
    stroke: rgba(228, 230, 234, 0.7);
    stroke-width: 1.6;
    stroke-linejoin: round;
}

.core-nucleus {
    fill: #fff3e2;
    filter: drop-shadow(0 0 22px rgba(255, 200, 140, 0.9));
}

.core-pulse {
    fill: none;
    stroke: rgba(255, 214, 170, 0.8);
    stroke-width: 1.2;
    transform-origin: 100px 100px;
    animation: core-emit 2.8s ease-out infinite;
}
@keyframes core-emit {
    0%   { transform: scale(1);   opacity: 0.85; }
    100% { transform: scale(3.1); opacity: 0; }
}

.core-label {
    position: absolute;
    top: 108%;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.72rem;
    letter-spacing: 4px;
    color: rgba(228, 230, 234, 0.65);
    white-space: nowrap;
}

.vault-node {
    position: absolute;
    left: var(--nx);
    top: var(--ny);
    width: 15%;
    height: 15%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: auto;
    opacity: 0.25;
    filter: grayscale(1);
    transition: opacity 0.6s ease, filter 0.6s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.vault-node.energised { opacity: 1; filter: grayscale(0); }
.vault-node.focused:hover { transform: translate(-50%, -50%) scale(1.1); }

/* The focused node advertises that it, specifically, is the live target. */
.vault-node.focused .node-face {
    border-color: rgba(255, 214, 170, 0.95);
    box-shadow: 0 0 38px rgba(255, 190, 130, 0.5), inset 0 1px 0 rgba(255,255,255,0.12);
}

/* Only the node the camera is parked on is clickable. At the core overview
   nothing is — you scroll to a module or use the right-hand rail, which is
   what makes the zoom-scroll meaningful rather than decorative. */
.vault-node {
    pointer-events: none;
    cursor: default;
}

.vault-node.focused {
    pointer-events: auto;
    cursor: pointer;
}

.node-face {
    position: relative;
    z-index: 2;
    width: 62%;
    height: 62%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, rgba(22,22,25,0.96), rgba(8,8,9,0.98));
    border: 1px solid rgba(210, 213, 219, 0.32);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.vault-node.energised .node-face {
    border-color: rgba(255, 214, 170, 0.75);
    box-shadow: 0 0 26px rgba(255, 190, 130, 0.3), inset 0 1px 0 rgba(255,255,255,0.1);
}

.node-icon {
    width: 52%;
    height: 52%;
    fill: none;
    stroke: rgba(210, 213, 219, 0.75);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke 0.5s ease;
}
.vault-node.energised .node-icon { stroke: #fff0dc; }

.node-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px dashed rgba(210, 213, 219, 0.3);
    opacity: 0;
    transition: opacity 0.35s ease;
    animation: core-spin 14s linear infinite;
}
.vault-node.energised .node-ring { opacity: 0.55; }
.vault-node.focused:hover .node-ring { opacity: 1; border-color: rgba(255, 214, 170, 0.7); }

.node-label {
    position: absolute;
    top: 104%;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 12px;
    border-radius: 4px;
    background: rgba(8, 8, 9, 0.92);
    border: 1px solid rgba(210, 213, 219, 0.22);
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.66rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap;
    color: rgba(228, 230, 234, 0.8);
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}
.vault-node.energised .node-label { opacity: 0.85; }
.vault-node.focused:hover .node-label { opacity: 1; color: #fff; border-color: rgba(255, 214, 170, 0.6); }

.vault-node.active .node-label,
.vault-node.active .node-ring { opacity: 0 !important; }

/* ==========================================
   HUD MODULE OVERLAY & LANDED STATE VISIBILITY
   ========================================== */
#cinematic-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 600;
    display: flex;
    align-items: center;
}

.module-details {
    position: absolute;
    right: -60%;
    width: 32%;             /* Reduced from 40% */
    max-width: 420px;       /* Reduced from 550px for a tighter horizontal profile */
    background: rgba(4, 9, 18, 0.95);
    border: 1px solid rgba(210, 213, 219, 0.3);
    border-left: 4px solid #d2d5db;
    padding: 25px 30px;     /* Compacted internal padding */
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 20px 60px rgba(0,0,0,0.9);
    will-change: transform, opacity;
}

.corner-bracket { position: absolute; width: 8px; height: 8px; border: 2px solid rgba(255, 178, 102, 0.75); transition: border-color 0.6s ease; }
body.in-space .corner-bracket { border-color: rgba(210, 213, 219, 0.7); }
.module-details .corner-bracket, .hud-modal-content .corner-bracket { border-color: rgba(210, 213, 219, 0.7); }
.top-left { top: -2px; left: -2px; border-right: none; border-bottom: none; }
.top-right { top: -2px; right: -2px; border-left: none; border-bottom: none; }
.bottom-left { bottom: -2px; left: -2px; border-right: none; border-top: none; }
.bottom-right { bottom: -2px; right: -2px; border-left: none; border-top: none; }

.module-tag {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.8rem;
    color: #d2d5db;
    letter-spacing: 2px;
    display: block;
    margin-bottom: 8px;
}

.module-details h2 { 
    font-size: 1.8rem;      /* Reduced title scale from 2.5rem */
    margin-bottom: 10px; 
    text-transform: uppercase; 
    font-weight: 800; 
    letter-spacing: 1px; 
}

.module-details p { 
    font-size: 0.88rem;     /* Scaled text font size */
    line-height: 1.5; 
    margin-bottom: 20px; 
    color: #a3b8cc; 
}

.stats-grid { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 10px; 
    margin-bottom: 20px; 
}

.stat-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255,255,255,0.08);
    padding: 8px 12px;
    border-radius: 4px;
    font-family: 'Share Tech Mono', monospace;
}

.stat-title { font-size: 0.65rem; color: rgba(255, 255, 255, 0.4); display: block; margin-bottom: 4px; }
.stat-value { font-size: 1rem; font-weight: bold; color: #fff; }

/* Directly under the action button, where someone who has read the panel is
   already looking. It used to sit alone in the far top-left corner as
   DISENGAGE TRACKING, which nobody read as "go back". */
#return-btn {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    width: 100%;
    margin-top: 10px;
    background: none;
    color: rgba(210, 213, 219, 0.72);
    border: 1px solid rgba(210, 213, 219, 0.22);
    padding: 9px 20px;
    border-radius: 4px;
    font-size: 0.72rem;
    font-family: 'Share Tech Mono', monospace;
    letter-spacing: 2px;
    cursor: pointer;
    opacity: 0;
    transition: all 0.3s ease;
}

#return-btn:hover {
    color: #fff;
    border-color: rgba(210, 213, 219, 0.6);
    background: rgba(210, 213, 219, 0.07);
}

.action-btn {
    width: 100%;
    padding: 12px;
    font-size: 0.85rem;
    font-weight: bold;
    font-family: 'Share Tech Mono', monospace;
    letter-spacing: 2px;
    text-transform: uppercase;
    background: transparent;
    color: #fff;
    border: 1px solid rgba(210, 213, 219, 0.6);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.action-btn:hover {
    background: #d2d5db;
    color: #000;
    box-shadow: 0 0 25px rgba(210,213,219,0.5);
}

/* Active Landed States */
body.landed #cinematic-overlay { pointer-events: all; }
body.landed #return-btn { opacity: 1; }
body.landed .module-details { right: 5%; opacity: 1; }  /* Positioned neatly away from canvas center */

/* Hide UI Overlays on Planet Touch / Landing */
body.landed #spaceship-title-container,
body.landed #auth-corner,
body.landed .vice-text-container,
body.landed .constellation {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ==========================================
   GAS GIANT ATMOSPHERE (BACKTEST FORM)
   ========================================== */
#gas-giant-atmosphere {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.8s ease-in-out !important;
    background: rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

#gas-giant-atmosphere.active {
    opacity: 1;
    pointer-events: all;
}

.submission-console {
    position: relative;
    z-index: 10;
    background: rgba(4, 9, 18, 0.98) !important;
    border: 1px solid rgba(255, 176, 102, 0.4);
    border-top: 4px solid #ffb066;
    padding: 34px 38px;
    width: min(96%, 1020px);
    max-width: 1020px;
    max-height: 92vh;
    overflow-y: auto;
    border-radius: 6px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.8) !important;
    transform: translateY(50px) scale(0.95);
    transition: transform 0.4s ease-out, opacity 0.4s ease-out !important;
    will-change: transform;
}

#gas-giant-atmosphere.active .submission-console {
    transform: translateY(0) scale(1);
}

#abort-console-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    background: transparent;
    color: #ff0055;
    border: 1px solid #ff0055;
    padding: 6px 12px;
    font-family: 'Share Tech Mono', monospace;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.3s ease;
}

#abort-console-btn:hover { background: #ff0055; color: #fff; box-shadow: 0 0 15px rgba(255,0,85,0.5); }

.console-header h2 {
    font-family: 'Share Tech Mono', monospace;
    color: #ffb066;
    font-size: 2rem;
    margin-bottom: 15px;
    letter-spacing: 1px;
}

.console-header p {
    color: #a3b8cc;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 30px;
}

.input-group { margin-bottom: 20px; text-align: left; }
.input-group label {
    display: block;
    font-family: 'Share Tech Mono', monospace;
    color: #ffb066;
    font-size: 0.8rem;
    margin-bottom: 8px;
    letter-spacing: 1px;
}

.input-group input, .input-group textarea {
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 176, 102, 0.3);
    color: #fff;
    padding: 12px 15px;
    font-family: 'Inter', sans-serif;
    border-radius: 4px;
    outline: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.input-group input:focus, .input-group textarea:focus {
    border-color: #ffb066;
    box-shadow: 0 0 15px rgba(255,176,102,0.2);
}

.submit-system-btn {
    width: 100%;
    background: rgba(255, 176, 102, 0.1);
    color: #ffb066;
    border: 1px solid #ffb066;
    padding: 15px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 1.1rem;
    letter-spacing: 2px;
    cursor: pointer;
    margin-top: 10px;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.submit-system-btn:hover {
    background: #ffb066;
    color: #000;
    box-shadow: 0 0 25px rgba(255,176,102,0.6);
}

/* ==========================================
   TACTICAL UPLINK MODAL STYLES
   ========================================== */
#tactical-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(2, 6, 12, 0.88);
    backdrop-filter: blur(12px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

#tactical-modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.tactical-modal-card {
    position: relative;
    width: 90%;
    max-width: 520px;
    background: rgba(6, 16, 26, 0.95);
    border: 1px solid rgba(255, 176, 102, 0.4);
    box-shadow: 0 0 35px rgba(255, 176, 102, 0.25), inset 0 0 15px rgba(255, 176, 102, 0.1);
    padding: 40px 30px;
    text-align: center;
    transform: scale(0.85);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#tactical-modal-overlay.active .tactical-modal-card {
    transform: scale(1);
}

.launch-stage {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.rocket-svg {
    width: 70px;
    height: 70px;
    filter: drop-shadow(0 0 10px #ffb066);
    transform: translateY(0);
}

#tactical-modal-overlay.active .rocket-svg {
    animation: launchAscent 2.5s infinite ease-in-out;
}

@keyframes launchAscent {
    0% { transform: translateY(5px) scale(0.98); }
    50% { transform: translateY(-12px) scale(1.02); }
    100% { transform: translateY(5px) scale(0.98); }
}

.rocket-flame {
    animation: pulseFlame 0.15s infinite alternate;
}

@keyframes pulseFlame {
    0% { transform: scaleY(0.8); opacity: 0.7; }
    100% { transform: scaleY(1.3); opacity: 1; }
}

.hyper-rings {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.hyper-rings span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(255, 178, 102, 0.85);
    border-radius: 50%;
    animation: expandRing 2s infinite linear;
    opacity: 0;
}
body.in-space .hyper-rings span { border-color: rgba(210, 213, 219, 0.85); }

.hyper-rings span:nth-child(1) { animation-delay: 0s; }
.hyper-rings span:nth-child(2) { animation-delay: 0.6s; }
.hyper-rings span:nth-child(3) { animation-delay: 1.2s; }

@keyframes expandRing {
    0% { width: 10px; height: 10px; opacity: 1; }
    100% { width: 120px; height: 120px; opacity: 0; }
}

.modal-status-tag {
    font-family: 'Share Tech Mono', monospace;
    color: #ffb066;
    font-size: 0.75rem;
    letter-spacing: 2px;
    margin-bottom: 8px;
}

.tactical-modal-card h2 {
    font-family: 'Share Tech Mono', monospace;
    font-size: 1.8rem;
    color: #ffffff;
    margin: 0 0 12px 0;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.tactical-modal-card #modal-message {
    font-family: 'Inter', sans-serif;
    color: #a0aec0;
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 25px;
}

.modal-action-btn {
    width: 100%;
    padding: 12px;
    background: transparent;
    border: 1px solid #ffb066;
    color: #ffb066;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.95rem;
    letter-spacing: 1.5px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.modal-action-btn:hover {
    background: #ffb066;
    color: #040912;
    box-shadow: 0 0 20px rgba(255, 176, 102, 0.6);
}

/* ==========================================
   SUBSCRIPTION MODAL & PRICING TIERS
   ========================================== */
#subscription-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(2, 6, 12, 0.92);
    backdrop-filter: blur(12px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9997;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

#subscription-modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.subscription-modal-card {
    position: relative;
    width: 92%;
    max-width: 960px;
    max-height: 90vh;
    overflow-y: auto;
    background: rgba(6, 16, 26, 0.95);
    border: 1px solid rgba(255, 215, 0, 0.4);
    box-shadow: 0 0 45px rgba(255, 215, 0, 0.15);
    padding: 40px 30px;
    transform: scale(0.9);
    transition: transform 0.3s ease;
    border-radius: 6px;
}

#subscription-modal-overlay.active .subscription-modal-card {
    transform: scale(1);
}

.sub-header {
    text-align: center;
    margin-bottom: 30px;
}

.sub-header h2 {
    font-family: 'Share Tech Mono', monospace;
    font-size: 2.2rem;
    color: #ffffff;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.sub-header p {
    color: #8fa3b8;
    font-size: 0.9rem;
    max-width: 600px;
    margin: 0 auto;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 20px;
}

.tier-card {
    position: relative;
    background: rgba(4, 9, 18, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.3s ease;
}

.tier-card:hover {
    border-color: rgba(255, 178, 102, 0.4);
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

.tier-card.featured {
    background: rgba(255, 178, 102, 0.04);
    border: 1px solid #ffb066;
    box-shadow: 0 0 25px rgba(255, 178, 102, 0.2);
}

body.in-space .tier-card:hover { border-color: rgba(210, 213, 219, 0.4); }
body.in-space .tier-card.featured {
    background: rgba(210, 213, 219, 0.04);
    border: 1px solid #d2d5db;
    box-shadow: 0 0 25px rgba(210, 213, 219, 0.18);
}

.tier-card.featured .tier-name,
.tier-card.featured .tier-price { color: #ffb066 !important; }
body.in-space .tier-card.featured .tier-name,
body.in-space .tier-card.featured .tier-price { color: #d2d5db !important; }

.popular-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #ffb066;
    color: #1a0f06;
    font-family: 'Share Tech Mono', monospace;
    font-weight: bold;
    font-size: 0.65rem;
    padding: 3px 12px;
    border-radius: 12px;
    letter-spacing: 1px;
}
body.in-space .popular-badge { background: #d2d5db; color: #0a0a0b; }

.tier-name {
    font-family: 'Share Tech Mono', monospace;
    font-size: 1.1rem;
    color: #ffffff;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.tier-price {
    font-family: 'Share Tech Mono', monospace;
    font-size: 2.2rem;
    font-weight: bold;
    color: #ffffff;
    margin-bottom: 8px;
}

.tier-price span {
    font-size: 0.8rem;
    color: #718096;
}

.tier-desc {
    font-size: 0.8rem;
    color: #8fa3b8;
    margin-bottom: 20px;
    min-height: 38px;
}

.tier-features {
    list-style: none;
    margin-bottom: 25px;
    text-align: left;
}

.tier-features li {
    font-size: 0.8rem;
    color: #d0dbe5;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tier-features i {
    color: #ffb066;
    font-size: 0.75rem;
}

.tier-features i.unavailable {
    color: #ff0055;
}

.tier-btn {
    width: 100%;
    padding: 12px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.85rem;
    letter-spacing: 1px;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.tier-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #ffffff;
}

.tier-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.tier-btn.featured-btn {
    background: rgba(255, 178, 102, 0.1);
    border-color: #ffb066;
    color: #ffb066;
}

.tier-btn.featured-btn:hover {
    background: #ffb066;
    color: #1a0f06;
    box-shadow: 0 0 20px rgba(255, 178, 102, 0.5);
}

body.in-space .tier-btn.featured-btn {
    background: rgba(210, 213, 219, 0.1);
    border-color: #d2d5db;
    color: #d2d5db;
}

body.in-space .tier-btn.featured-btn:hover {
    background: #d2d5db;
    color: #0a0a0b;
    box-shadow: 0 0 20px rgba(210, 213, 219, 0.4);
}

/* ==========================================
   AUTHENTICATION HUD MODAL & OAUTH
   ========================================== */
#auth-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(2, 6, 12, 0.88);
    backdrop-filter: blur(12px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9998;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

#auth-modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.auth-modal-card {
    position: relative;
    width: 90%;
    max-width: 440px;
    background: rgba(6, 16, 26, 0.95);
    border: 1px solid rgba(210, 213, 219, 0.4);
    box-shadow: 0 0 35px rgba(210, 213, 219, 0.25);
    padding: 35px 30px;
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

#auth-modal-overlay.active .auth-modal-card {
    transform: scale(1);
}

.auth-tabs {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
    border-bottom: 1px solid rgba(255, 178, 102, 0.25);
    padding-bottom: 10px;
}

.auth-tab {
    background: transparent;
    border: none;
    color: #718096;
    font-family: 'Share Tech Mono', monospace;
    font-size: 1.1rem;
    cursor: pointer;
    letter-spacing: 1px;
    padding: 5px 10px;
    transition: all 0.3s ease;
}

.auth-tab.active {
    color: #ffb066;
    border-bottom: 2px solid #ffb066;
    text-shadow: 0 0 8px rgba(255, 178, 102, 0.6);
}
body.in-space .auth-tab.active {
    color: #d2d5db;
    border-bottom: 2px solid #d2d5db;
    text-shadow: 0 0 8px rgba(210, 213, 219, 0.6);
}

.abort-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: transparent;
    border: none;
    color: #ff0055;
    font-size: 1.2rem;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.abort-btn:hover {
    transform: scale(1.2);
}

.oauth-divider {
    position: relative;
    text-align: center;
    margin: 25px 0 18px;
}

.oauth-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background: rgba(210, 213, 219, 0.2);
    z-index: 1;
}

.oauth-divider span {
    position: relative;
    z-index: 2;
    background: #06101a;
    padding: 0 12px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.7rem;
    color: #718096;
    letter-spacing: 1px;
}

.oauth-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.oauth-btn {
    width: 100%;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff;
    padding: 12px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.85rem;
    letter-spacing: 1px;
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s ease;
}

.oauth-btn:hover {
    border-color: #ffb066;
    color: #ffb066;
    background: rgba(255, 176, 102, 0.1);
    box-shadow: 0 0 15px rgba(255, 176, 102, 0.3);
}
body.in-space .oauth-btn:hover {
    border-color: #d2d5db;
    color: #d2d5db;
    background: rgba(210, 213, 219, 0.1);
    box-shadow: 0 0 15px rgba(210, 213, 219, 0.3);
}

/* Ensure modal content container handles scroll correctly */
.modal-body, #systemsGrid, #systemDetailView {
    max-height: 70vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #d2d5db #071927;
}

/* ==========================================
   RESPONSIVE OVERRIDES
   ========================================== */
@media (max-width: 900px) {
    #spaceship-title-container {
        top: 90px;
        left: 20px;
        flex-direction: column;
        align-items: flex-start;
    }
    .mothership-svg { width: 140px; }
    .tractor-beam-title h1 { font-size: 1.5rem; }
    .tractor-beam-title h1 span { font-size: 1rem; letter-spacing: 6px; }

    #auth-corner {
        top: 15px;
        right: 15px;
        padding: 5px 8px;
    }

    .dock-content {
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 6px;
    }

    .dock-divider {
        display: none;
    }

    .pricing-grid {
        grid-template-columns: 1fr;
    }

    .module-details {
        width: 85%;
        max-width: none;
        padding: 25px;
    }

    body.landed .module-details {
        right: 50%;
        transform: translateX(50%);
    }
}

/* ==========================================
   BACKTEST REPORT DASHBOARD
   Chart roles are declared as tokens so every plot is written against a
   role rather than raw hex. Sequential (amber) carries magnitude; the
   diverging pair carries P&L polarity with a neutral gray midpoint.
   ========================================== */
.rpt-overlay {
    --surface-0: #08080a;
    --surface-1: #0e0e11;
    --surface-2: #16161a;
    --hairline:  rgba(210, 213, 219, 0.13);
    --text-primary:   #f2f3f5;
    --text-secondary: #a8abb3;
    --text-muted:     #6f737c;

    /* Chart palette — validated against this surface with the dataviz
       validator (all five checks pass: lightness band L 0.48–0.67, chroma
       floor, CVD separation, normal-vision floor, contrast).
       Worst adjacent CVD ΔE 8.9 (deutan); normal-vision ΔE 28.3.

       NOTE ON THE P&L PAIR: a literal green/red scored ΔE 4.6 under
       deuteranopia — far under the 8 threshold — meaning roughly 1 in 12 men
       could not tell profit from loss. The "profit" hue is pushed toward
       teal, which keeps the green reading while actually surviving CVD.
       Sign prefixes and the legend carry the meaning too, so colour is
       never the only channel. */

    /* sequential — magnitude */
    --seq-1: #c08438;
    --seq-2: #9a6a2d;
    --seq-3: #6f4c20;
    --seq-track: rgba(210, 213, 219, 0.08);

    /* diverging — P&L polarity, neutral gray midpoint */
    --pos: #12a184;
    --neg: #e2564e;
    --mid: #6f737c;

    /* UI accent stays the brand amber — it never shares a plot with the
       P&L pair, so it is free of the in-chart adjacency constraint. */
    --accent: #f0b25a;

    position: fixed;
    inset: 0;
    z-index: 11000;
    display: none;
    background: var(--surface-0);
    overflow: hidden;
}
.rpt-overlay.active { display: block; }

.rpt-shell {
    display: flex;
    flex-direction: column;
    height: 100%;
    animation: rpt-in 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes rpt-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Header */
.rpt-head {
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 28px 16px;
    border-bottom: 1px solid var(--hairline);
    background: linear-gradient(180deg, var(--surface-1), var(--surface-0));
}
.rpt-eyebrow {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.66rem;
    letter-spacing: 2.5px;
    color: var(--accent);
    margin-bottom: 6px;
}
.rpt-head h2 {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.2px;
    color: var(--text-primary);
    margin: 0 0 6px;
}
.rpt-sub {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.72rem;
    color: var(--text-secondary);
}
.rpt-dot-sep { width: 3px; height: 3px; border-radius: 50%; background: var(--text-muted); }

.rpt-head-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.rpt-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 5px;
    border: 1px solid var(--hairline);
    background: var(--surface-2);
    color: var(--text-secondary);
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.74rem;
    letter-spacing: 1.2px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.22s ease;
}
.rpt-btn:hover { color: var(--text-primary); border-color: rgba(210,213,219,0.35); }
.rpt-btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: #17120a;
    font-weight: 700;
}
.rpt-btn-primary:hover { background: #ffc673; border-color: #ffc673; color: #17120a; }
.rpt-btn-primary[aria-disabled="true"] { opacity: 0.4; pointer-events: none; }

/* Body */
.rpt-body {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 20px 28px 40px;
}

.rpt-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 14px;
    margin-bottom: 18px;
    border-radius: 5px;
    border: 1px solid rgba(240, 178, 90, 0.28);
    background: rgba(240, 178, 90, 0.07);
    color: var(--text-secondary);
    font-size: 0.8rem;
    line-height: 1.5;
}
/* `display:flex` above outranks the default [hidden]{display:none}, so the
   sample-data note has to opt out explicitly or it shows on real reports. */
.rpt-note[hidden] { display: none; }
.rpt-note i { color: var(--accent); margin-top: 2px; }
.rpt-note code {
    font-family: 'Share Tech Mono', monospace;
    background: rgba(255,255,255,0.07);
    padding: 1px 5px;
    border-radius: 3px;
    color: var(--accent);
}

/* Hero + KPI row */
.rpt-hero-row {
    display: grid;
    grid-template-columns: minmax(230px, 0.9fr) 3fr;
    gap: 14px;
    margin-bottom: 14px;
}
.rpt-hero, .rpt-kpi {
    background: var(--surface-1);
    border: 1px solid var(--hairline);
    border-radius: 7px;
    padding: 16px 18px;
}
.rpt-hero { display: flex; flex-direction: column; justify-content: center; }
.rpt-hero-value {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -1.5px;
    color: var(--text-primary);
    margin: 4px 0;
}
.rpt-hero-value.pos { color: var(--pos); }
.rpt-hero-value.neg { color: var(--neg); }
.rpt-hero-meta { font-size: 0.76rem; color: var(--text-muted); }

.rpt-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: 10px;
}
.rpt-kpi-label {
    display: block;
    font-size: 0.68rem;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 5px;
}
.rpt-kpi-value {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.4px;
}
.rpt-kpi-sub { display: block; font-size: 0.68rem; color: var(--text-muted); margin-top: 3px; }

/* Chart cards */
.rpt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
    gap: 14px;
    margin-bottom: 14px;
}
.rpt-card {
    background: var(--surface-1);
    border: 1px solid var(--hairline);
    border-radius: 7px;
    padding: 16px 18px 12px;
    min-width: 0;
}
.rpt-card-wide { grid-column: 1 / -1; }
@media (min-width: 1180px) {
    .rpt-grid { grid-template-columns: repeat(3, 1fr); }
    .rpt-card-wide { grid-column: span 3; }
}
.rpt-card figcaption { margin-bottom: 12px; }
.rpt-card h3 {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 3px;
    letter-spacing: 0.1px;
}
.rpt-card figcaption p { font-size: 0.72rem; color: var(--text-muted); margin: 0; line-height: 1.4; }
.rpt-plot { position: relative; width: 100%; }
.rpt-plot svg { display: block; width: 100%; height: auto; overflow: visible; }

/* Recessive axes & grid */
.rpt-plot .grid-line { stroke: var(--hairline); stroke-width: 1; }
.rpt-plot .axis-text {
    fill: var(--text-muted);
    font-family: 'Share Tech Mono', monospace;
    font-size: 9px;
}
.rpt-plot .zero-line { stroke: rgba(210,213,219,0.4); stroke-width: 1; }
.rpt-plot .mark { transition: opacity 0.15s ease; }
.rpt-plot:hover .mark.dim { opacity: 0.35; }

/* Tooltip */
.rpt-tip {
    position: absolute;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -120%);
    background: rgba(4, 4, 5, 0.97);
    border: 1px solid rgba(210, 213, 219, 0.28);
    border-radius: 5px;
    padding: 7px 10px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.7rem;
    color: var(--text-primary);
    white-space: nowrap;
    box-shadow: 0 8px 26px rgba(0,0,0,0.75);
    transition: opacity 0.12s ease;
    z-index: 5;
}
.rpt-tip.show { opacity: 1; }
.rpt-tip .tip-k { color: var(--text-muted); }

/* Horizontal magnitude bars */
.hbar-wrap { display: flex; flex-direction: column; gap: 9px; padding-top: 2px; }
.hbar-row { display: grid; grid-template-columns: 70px 1fr 58px; align-items: center; gap: 10px; }
.hbar-label {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.7rem;
    color: var(--text-secondary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hbar-track { height: 14px; background: var(--seq-track); border-radius: 3px; overflow: hidden; }
.hbar-fill {
    display: block; height: 100%;
    background: var(--seq-1);
    border-radius: 0 3px 3px 0;
    transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.hbar-val {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.7rem; color: var(--text-muted); text-align: right; white-space: nowrap;
}
.rpt-empty { color: var(--text-muted); font-size: 0.78rem; padding: 16px 0; text-align: center; }

/* Legend */
.rpt-legend {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 8px;
    font-size: 0.7rem;
    color: var(--text-secondary);
}
.rpt-legend span { display: inline-flex; align-items: center; gap: 6px; }
.rpt-legend i {
    width: 9px; height: 9px; border-radius: 2px; display: inline-block;
}

/* Trade log */
.rpt-log-card { padding-bottom: 4px; }
.rpt-table-scroll { overflow-x: auto; max-height: 340px; overflow-y: auto; }
.rpt-table { width: 100%; border-collapse: collapse; font-size: 0.76rem; }
.rpt-table th {
    position: sticky;
    top: 0;
    background: var(--surface-2);
    color: var(--text-muted);
    font-family: 'Share Tech Mono', monospace;
    font-weight: 500;
    font-size: 0.66rem;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid var(--hairline);
    white-space: nowrap;
}
.rpt-table td {
    padding: 8px 10px;
    border-bottom: 1px solid rgba(210,213,219,0.06);
    color: var(--text-secondary);
    white-space: nowrap;
}
.rpt-table td.num, .rpt-table th.num { text-align: right; font-family: 'Share Tech Mono', monospace; }
.rpt-table tr:hover td { background: rgba(255,255,255,0.028); }
.rpt-tag {
    display: inline-flex; align-items: center; gap: 5px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.66rem; letter-spacing: 0.6px;
}
.rpt-tag::before { content: ''; width: 7px; height: 7px; border-radius: 2px; }
.rpt-tag.win  { color: var(--pos); }
.rpt-tag.win::before  { background: var(--pos); }
.rpt-tag.loss { color: var(--neg); }
.rpt-tag.loss::before { background: var(--neg); }
.val-pos { color: var(--pos); }
.val-neg { color: var(--neg); }

@media (max-width: 860px) {
    .rpt-head { flex-direction: column; align-items: stretch; padding: 14px 16px 12px; }
    .rpt-head-right { justify-content: flex-start; }
    .rpt-head h2 { font-size: 1.15rem; }
    .rpt-body { padding: 14px 16px 30px; }
    .rpt-hero-row { grid-template-columns: 1fr; }
    .rpt-hero-value { font-size: 2.2rem; }
}
@media (max-height: 560px) {
    .rpt-head { padding: 10px 14px 8px; }
    .rpt-head h2 { font-size: 1rem; margin-bottom: 2px; }
    .rpt-hero-value { font-size: 1.8rem; }
}

/* ==========================================
   ROTATE GATE + TOUCH SCROLL TUTORIAL
   ========================================== */
#rotate-gate,
#touch-tutorial {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    text-align: center;
    background:
        radial-gradient(ellipse 70% 60% at 50% 40%, rgba(38, 22, 10, 0.96) 0%, rgba(6, 5, 4, 0.99) 70%),
        #050403;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

#rotate-gate.show,
#touch-tutorial.show { display: flex; }

/* On desktop the card floats OVER the hero rather than replacing it — the
   desk photo is the hook, so it stays visible through a dimmed scrim. */
#touch-tutorial.over-hero {
    background: linear-gradient(180deg, rgba(4, 3, 2, 0.55) 0%, rgba(4, 3, 2, 0.82) 100%);
    backdrop-filter: blur(3px) saturate(0.9);
    -webkit-backdrop-filter: blur(3px) saturate(0.9);
    animation: hero-scrim-in 0.7s ease both;
}
@keyframes hero-scrim-in { from { opacity: 0; } to { opacity: 1; } }

#touch-tutorial.over-hero .tut-card {
    background: rgba(8, 6, 5, 0.72);
    border: 1px solid rgba(255, 176, 102, 0.22);
    border-radius: 10px;
    padding: 26px 30px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.rotate-inner, .tut-card {
    max-width: 340px;
    animation: gate-rise 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes gate-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

.rotate-icon { width: 108px; height: 108px; margin-bottom: 6px; }
.rotate-phone {
    fill: none;
    stroke: #ffd6aa;
    stroke-width: 3;
    transform-origin: 60px 50px;
    animation: rotate-tip 2.6s ease-in-out infinite;
}
.rotate-speaker { stroke: #ffd6aa; stroke-width: 2.4; stroke-linecap: round;
    transform-origin: 60px 50px; animation: rotate-tip 2.6s ease-in-out infinite; }
.rotate-arrow { fill: none; stroke: rgba(255, 176, 102, 0.75); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
@keyframes rotate-tip {
    0%, 55%  { transform: rotate(0deg); }
    80%,100% { transform: rotate(-90deg); }
}

.rotate-title, .tut-title {
    font-family: 'Share Tech Mono', monospace;
    font-size: 1.05rem;
    letter-spacing: 3px;
    color: #fff3e4;
    margin-bottom: 10px;
}

.rotate-copy, .tut-copy {
    font-size: 0.85rem;
    line-height: 1.55;
    color: rgba(240, 226, 210, 0.72);
    margin-bottom: 22px;
}

#rotate-dismiss, #tut-next {
    background: transparent;
    border: 1px solid rgba(255, 176, 102, 0.6);
    color: #ffd6aa;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.78rem;
    letter-spacing: 2px;
    padding: 11px 26px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
}
#rotate-dismiss { border-color: rgba(255, 176, 102, 0.3); color: rgba(255, 214, 170, 0.6); font-size: 0.68rem; }
#tut-next:active, #rotate-dismiss:active { background: rgba(255, 176, 102, 0.18); }

/* Animated swipe glyph */
.tut-glyph { position: relative; height: 84px; margin-bottom: 14px; }
.tut-finger {
    position: absolute;
    left: 50%;
    bottom: 8px;
    width: 20px;
    height: 20px;
    margin-left: -10px;
    border-radius: 50%;
    background: #ffd6aa;
    box-shadow: 0 0 20px rgba(255, 190, 130, 0.85);
    animation: tut-swipe 2.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.tut-trail {
    position: absolute;
    left: 50%;
    bottom: 14px;
    width: 2px;
    height: 54px;
    margin-left: -1px;
    background: linear-gradient(to top, rgba(255, 190, 130, 0.55), transparent);
    animation: tut-trail 2.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes tut-swipe {
    0%       { transform: translateY(0);     opacity: 0; }
    15%      { opacity: 1; }
    70%,100% { transform: translateY(-56px); opacity: 0; }
}
@keyframes tut-trail {
    0%       { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
    30%      { opacity: 1; }
    70%,100% { transform: scaleY(1); transform-origin: bottom; opacity: 0; }
}

.tut-dots { display: flex; gap: 7px; justify-content: center; margin-bottom: 20px; }
.tut-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: rgba(255, 214, 170, 0.28);
    transition: all 0.3s ease;
}
.tut-dot.active { background: #ffd6aa; box-shadow: 0 0 10px rgba(255,190,130,0.8); transform: scale(1.25); }

/* ==========================================
   SHORT / LANDSCAPE VIEWPORTS (phones held sideways)
   The module panel and the submission console both carry more content than
   fits in ~375px of height, so here they get bounded and made scrollable
   rather than running off the bottom of the screen.
   ========================================== */
@media (max-height: 560px) {

    /* Panel: pinned to the right, full available height, scrolls internally. */
    .module-details {
        width: 48% !important;
        max-width: 430px !important;
        top: 8px;
        bottom: 8px;
        padding: 14px 18px !important;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    body.landed .module-details {
        right: 10px !important;
        transform: none !important;
    }

    .module-details h2 { font-size: 1.1rem !important; margin-bottom: 6px; }
    .module-details p  { font-size: 0.74rem !important; line-height: 1.45; margin-bottom: 10px; }
    .module-tag        { font-size: 0.62rem; margin-bottom: 4px; }
    .stats-grid        { gap: 6px; margin-bottom: 10px; }
    .stat-card         { padding: 5px 8px; }
    .stat-title        { font-size: 0.55rem; }
    .stat-value        { font-size: 0.78rem; }
    .action-btn        { padding: 9px; font-size: 0.72rem; }

    /* Return button shrinks into the corner so it can't collide with the
       panel's heading — this was overlapping the title in landscape. */
    #return-btn {
        padding: 7px 10px !important;
        font-size: 0.62rem !important;
        letter-spacing: 1px !important;
        margin-top: 8px !important;
    }

    /* Submission console: was taller than the screen and unscrollable. */
    .submission-console {
        max-height: calc(100vh - 16px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        padding: 16px 18px !important;
        max-width: 560px;
    }
    .console-header h2 { font-size: 1.1rem; margin-bottom: 6px; }
    .console-header p  { font-size: 0.74rem; line-height: 1.4; margin-bottom: 12px; }
    .input-group       { margin-bottom: 10px; }
    .input-group label { font-size: 0.65rem; margin-bottom: 4px; }
    .input-group input, .input-group textarea { padding: 8px 10px; }
    /* The rows="6" attribute makes this taller than the whole viewport in
       landscape — override the computed height directly. */
    #system-rules      { height: 62px !important; min-height: 0 !important; resize: vertical; }
    .submit-system-btn { padding: 10px; font-size: 0.85rem; }
    #abort-console-btn { top: 10px; right: 10px; padding: 4px 9px; font-size: 0.7rem; }

    /* Other modals get the same treatment. */
    .tactical-modal-card,
    .subscription-modal-card,
    .auth-modal-card {
        max-height: calc(100vh - 16px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 18px 20px !important;
    }
    .launch-stage { width: 54px; height: 54px; margin-bottom: 8px; }
    .rocket-svg   { width: 38px; height: 38px; }
    .hud-modal-content { max-height: calc(100vh - 16px); overflow-y: auto; padding: 14px !important; }
    .system-grid  { max-height: none; }
}

/* ==========================================
   PERFORMANCE OVERRIDES
   ========================================== */
body.landed .orbit {
    animation-play-state: paused !important;
}

.gas-clouds,
.lightning-flash {
    display: none !important;
}

body.warping * {
    animation: none !important;
}

/* ==========================================
   DATABANK MODAL BASE
   ========================================== */
.hud-modal {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  backdrop-filter: blur(5px);
}
.hud-modal.hidden { display: none; }

.hud-modal-content {
  width: 85%;
  max-width: 900px;
  border: 1px solid rgba(210, 213, 219, 0.4);
  padding: 20px;
  color: #d8dade;
  font-family: monospace;
}

/* Header & Navigation */
.databank-header {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid rgba(210, 213, 219, 0.35);
  padding-bottom: 10px;
  margin-bottom: 20px;
}
.databank-header h2 { margin: 0; color: #e4e6ea; }
.close-btn, .back-btn {
  background: transparent;
  color: #e4e6ea;
  border: none;
  cursor: pointer;
  font-weight: bold;
}
.back-btn { margin-bottom: 20px; text-decoration: underline; }

/* Filter Bar */
.search-filter-bar {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
.search-filter-bar input {
  background: transparent;
  border: 1px solid #555;
  color: #e4e6ea;
  padding: 8px;
  width: 200px;
}
.tag {
  border: 1px solid rgba(210, 213, 219, 0.5);
  padding: 4px 8px;
  font-size: 12px;
  margin-right: 5px;
  border-radius: 3px;
  color: #d8dade;
}
.tag.active { background: #d8dade; color: #000; }

/* Grid & Cards */
.system-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 15px;
  max-height: 500px;
  overflow-y: auto;
}
.system-card {
  border: 1px solid #333;
  padding: 15px;
  cursor: pointer;
  transition: all 0.2s;
  background: rgba(255, 255, 255, 0.02);
}
.system-card:hover { border-color: rgba(210, 213, 219, 0.6); background: rgba(255, 255, 255, 0.04); }
.system-card h4 { margin: 0 0 10px 0; color: #fff; }
.system-card p { font-size: 13px; color: #aaa; margin-bottom: 15px; }

/* Detail View */
.detail-metrics {
  display: flex;
  gap: 20px;
  margin: 20px 0;
}
.metric-box {
  background: rgba(255, 255, 255, 0.06);
  padding: 15px;
  border-left: 3px solid rgba(210, 213, 219, 0.6);
  flex: 1;
}
.metric-box span { display: block; font-size: 12px; color: #aaa; }
.metric-box strong { font-size: 20px; color: #fff; }

.detail-actions {
  display: flex;
  gap: 15px;
  margin-top: 30px;
}
.action-btn {
  padding: 12px 24px;
  border: 1px solid rgba(210, 213, 219, 0.6);
  cursor: pointer;
  font-weight: bold;
}
.action-btn.primary { background: #d8dade; color: #000; }
.action-btn.secondary { background: transparent; color: #d8dade; }

/* ==========================================
   MOBILE FIXES: ZOOM LOCK & COMPACT DATABANK TAGS
   ========================================== */
@media (max-width: 768px) {

    /* 1. LOCK VIEWPORT & OVERFLOW ON MOBILE MODALS */
    html, body {
        width: 100% !important;
        max-width: 100vw !important;
    }

    /* On the root element overflow propagates to the viewport, so sticky
       still works. On BODY it does not: overflow-x:hidden turns body into a
       scroll container, and every position:sticky descendant silently stops
       sticking — which detached the whole desk scene and let it scroll away,
       leaving the page background (black) behind it.
       `clip` clips exactly the same way WITHOUT creating a scroll container. */
    html { overflow-x: hidden !important; }

    body { overflow-x: clip; }

    .hud-modal-content {
        width: 95vw !important;
        max-width: 95vw !important;
        padding: 15px !important;
    }

    /* Prevent iOS Safari auto-zooming when tapping text inputs */
    #databank-search,
    .search-filter-bar input,
    .input-group input,
    .input-group textarea {
        font-size: 16px !important;
    }

    /* 2. COMPACT SEARCH BAR & FILTER TAGS */
    .search-filter-bar {
        flex-direction: column;
        gap: 10px;
        align-items: stretch;
    }

    .search-filter-bar input {
        width: 100% !important;
    }

    .filter-tags {
        display: flex;
        flex-wrap: nowrap;
        gap: 6px;
        align-items: center;
    }

    /* Compact tag sizes for ALL, CRYPTO, FOREX */
    .filter-tags .tag, .tag {
        font-size: 0.65rem !important;
        padding: 3px 8px !important;
        letter-spacing: 0.5px;
        white-space: nowrap;
        margin-right: 0 !important;
    }
}

/* ==========================================
   PREMIUM DARK GLASS PANEL SYSTEM
   Shared "elegant, shining, dark" treatment for every dashboard/HUD
   surface: the planet module details, all modals, and the submission
   console. One coat of finish across the whole site.
   ========================================== */
.module-details,
.tactical-modal-card,
.subscription-modal-card,
.auth-modal-card,
.submission-console,
.hud-modal-content {
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    position: relative;
    transition: background 0.7s ease, border-color 0.7s ease, box-shadow 0.7s ease;
}

/* .module-details must stay absolutely positioned (it slides in from
   off-screen via left/right). */
.module-details {
    position: absolute;
}

/* .subscription-modal-card needs its own vertical scroll for the pricing
   grid — keep that instead of clipping it. */
.subscription-modal-card {
    overflow-y: auto;
    overflow-x: hidden;
}

/* module-details + the databank are only ever reachable once already in
   space, so they stay on the dark black/gray treatment permanently. */
.module-details,
.hud-modal-content {
    background: linear-gradient(160deg, rgba(15, 15, 17, 0.97) 0%, rgba(5, 5, 6, 0.98) 100%) !important;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.78), inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 45px rgba(255, 255, 255, 0.05) !important;
}

/* Everything else opens from the HUD dock, reachable at any time — so it
   follows the same autumn <-> space split as the dock itself. */
.tactical-modal-card,
.subscription-modal-card,
.auth-modal-card,
.submission-console {
    background: linear-gradient(160deg, rgba(30, 18, 10, 0.97) 0%, rgba(15, 9, 5, 0.98) 100%) !important;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 45px rgba(255, 150, 60, 0.09) !important;
}

/* .tactical-modal-card's border is left alone — it's the success/error
   status color, set inline by showTacticalModal(), not decorative chrome. */
.subscription-modal-card,
.auth-modal-card,
.submission-console {
    border-color: rgba(255, 178, 102, 0.4) !important;
}

.submission-console { border-top-color: #e8a34d !important; }
#abort-console-btn { color: #ffb066; border-color: #ffb066; }
#abort-console-btn:hover { background: #ffb066; color: #1a0f06; box-shadow: 0 0 15px rgba(255,176,102,0.5); }

body.in-space .tactical-modal-card,
body.in-space .subscription-modal-card,
body.in-space .auth-modal-card,
body.in-space .submission-console {
    background: linear-gradient(160deg, rgba(15, 15, 17, 0.97) 0%, rgba(5, 5, 6, 0.98) 100%) !important;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.78), inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 45px rgba(255, 255, 255, 0.05) !important;
}

body.in-space .subscription-modal-card,
body.in-space .auth-modal-card,
body.in-space .submission-console {
    border-color: rgba(210, 213, 219, 0.35) !important;
}

body.in-space .submission-console { border-top-color: #d2d5db !important; }
body.in-space #abort-console-btn { color: #d2d5db; border-color: #d2d5db; }
body.in-space #abort-console-btn:hover { background: #d2d5db; color: #0a0a0b; box-shadow: 0 0 15px rgba(210,213,219,0.4); }

.module-details::before,
.tactical-modal-card::before,
.subscription-modal-card::before,
.auth-modal-card::before,
.submission-console::before,
.hud-modal-content::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.055) 50%, transparent 65%);
    background-size: 260% 260%;
    animation: panel-shine 8s ease-in-out infinite;
    pointer-events: none;
}

@keyframes panel-shine {
    0%, 100% { background-position: 220% 220%; }
    50%      { background-position: -60% -60%; }
}

.module-details h2,
.tactical-modal-card h2,
.sub-header h2,
.auth-modal-card .auth-tab.active,
.console-header h2 {
    text-shadow: 0 0 18px currentColor;
    letter-spacing: 1.5px;
}

.module-details {
    letter-spacing: 0.2px;
}

.module-tag {
    text-shadow: 0 0 10px currentColor;
}

.stat-card {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.015) 100%);
    border: 1px solid rgba(255, 255, 255, 0.09);
    backdrop-filter: blur(6px);
}

/* ==========================================
   SCROLL FIX (kept last on purpose)
   ========================================== */
html {
    height: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}
body {
    height: auto !important;
    min-height: 100vh;
}
/* ==========================================================================
   AGENT PROFILE MODAL — wrapping
   The header row put the callsign and the email in one space-between flex
   row. On a phone that row is narrower than both, and the line breaker is
   allowed to split at the "@" and the dots, so an address ended up half on
   one line and half on the next. Each value is now unbreakable and the row
   is allowed to wrap instead, so a long value moves down whole.
   ========================================================================== */
.prof-head { flex-wrap: wrap; gap: 10px; }
.prof-email,
.prof-status,
.prof-stat-label { white-space: nowrap; }
.prof-row-top { flex-wrap: wrap; gap: 6px; }

@media (max-width: 480px) {
    /* Stack the header rather than squeezing two columns into ~340px. */
    .prof-head    { flex-direction: column; align-items: flex-start !important; }
    .prof-contact { text-align: left !important; }
    /* Four stat tiles left ~69px of content each, too narrow for the word
       COMPLETED at this size — two per row gives it space. */
    .prof-stats   { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ==========================================================================
   SERVICE PANEL — lead / capability rows / metric strip
   Replaces a paragraph slab plus four chunky boxes. The content is the same
   claims, restructured so it can be scanned: one lead line, three capability
   rows carrying the detail, then the metrics as a quiet strip rather than the
   loudest thing in the panel. Children fade in one after another, which is
   most of what makes it read as composed rather than dumped on screen.
   ========================================================================== */
.module-rule {
    display: block;
    width: 42px;
    height: 2px;
    margin: 0 0 14px;
    border-radius: 2px;
    opacity: 0.85;
}

.module-lead {
    font-size: 1.02rem !important;
    line-height: 1.45 !important;
    font-weight: 600;
    letter-spacing: 0.1px;
    margin-bottom: 10px !important;
}

.module-details #module-desc {
    font-size: 0.85rem;
    line-height: 1.6;
    color: rgba(214, 222, 232, 0.72);
    margin-bottom: 18px;
}

.module-points {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.module-point {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.module-point > i,
.module-point a > i:first-child {
    flex: 0 0 auto;
    width: 16px;
    margin-top: 2px;
    font-size: 0.85rem;
    text-align: center;
    opacity: 0.9;
}
.mp-body  { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mp-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: #eef2f6;
    letter-spacing: 0.2px;
}
.mp-text  {
    font-size: 0.76rem;
    line-height: 1.45;
    color: rgba(200, 210, 222, 0.62);
}

/* Contact rows are the action, so the whole row is the target. */
.module-point.is-link { padding: 0; }
.module-point.is-link a {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 11px 4px 11px 0;
    text-decoration: none;
    border-radius: 5px;
    transition: background 0.2s ease, padding-left 0.2s ease;
}
.module-point.is-link .mp-text { color: rgba(230, 238, 246, 0.9); }
.mp-go {
    margin-left: auto;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.28);
    transition: color 0.2s ease, transform 0.2s ease;
}
@media (hover: hover) and (pointer: fine) {
    .module-point.is-link a:hover {
        background: rgba(255, 255, 255, 0.045);
        padding-left: 8px;
    }
    .module-point.is-link a:hover .mp-go {
        color: rgba(255, 255, 255, 0.75);
        transform: translate(2px, -2px);
    }
}

/* Metrics: a quiet strip, not four competing boxes. */
.module-details .stats-grid {
    gap: 0 !important;
    margin-bottom: 22px !important;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.018);
}
.module-details .stat-card {
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 10px 12px !important;
    border-right: 1px solid rgba(255, 255, 255, 0.07) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
}
.module-details .stat-card:nth-child(2n)      { border-right: none !important; }
.module-details .stat-card:nth-last-child(-n+2) { border-bottom: none !important; }
.module-details .stat-title {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.58rem !important;
    letter-spacing: 1.4px;
    color: rgba(255, 255, 255, 0.38) !important;
}
.module-details .stat-value { font-size: 0.9rem !important; font-weight: 700; }

/* Staggered entrance. --i is set per child in openService(). */
@keyframes module-item-in {
    from { opacity: 0; transform: translateY(9px); }
    to   { opacity: 1; transform: none; }
}
body.landed .module-details .module-tag,
body.landed .module-details h2,
body.landed .module-details .module-rule,
body.landed .module-details .module-lead,
body.landed .module-details #module-desc,
body.landed .module-details .module-point,
body.landed .module-details .stat-card,
body.landed .module-details .action-btn {
    animation: module-item-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: calc(var(--i, 0) * 45ms + 120ms);
}
@media (prefers-reduced-motion: reduce) {
    body.landed .module-details * { animation: none !important; }
}

@media (max-width: 900px), (orientation: portrait) {
    .module-lead { font-size: 0.94rem !important; }
    .module-point { padding: 9px 0; }
    .mp-title { font-size: 0.78rem; }
    .mp-text  { font-size: 0.72rem; }
}


/* The two services that are not built yet, said once, under the prices. */
.sub-note {
    display: flex; align-items: flex-start; gap: 10px;
    margin: 18px 4px 2px; padding: 12px 14px;
    background: rgba(255, 217, 172, .05);
    border: 1px solid rgba(255, 217, 172, .18);
    border-left: 3px solid #ffd9ac;
    border-radius: 6px;
    font-size: .82rem; line-height: 1.55; color: rgba(228, 230, 234, .72);
}
.sub-note i { color: #ffd9ac; margin-top: 2px; flex: 0 0 auto; }
.sub-note b { color: #ffd9ac; font-weight: 600; }


/* =====================================================================
   SUBMISSION CONSOLE — two columns: the form, and everything you would
   otherwise have to leave the console to find (credits, your reports,
   what you actually get back).
   ===================================================================== */
.console-kicker {
    display: block; margin-bottom: 6px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.66rem; letter-spacing: 3px;
    color: rgba(255, 176, 102, 0.85);
}
.console-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 268px;
    gap: 26px;
    align-items: start;
}

.input-group label .ig-step {
    display: inline-grid; place-items: center;
    width: 17px; height: 17px; margin-right: 7px;
    border-radius: 50%;
    background: rgba(255, 176, 102, 0.16);
    color: #ffb066;
    font-size: 0.62rem; font-weight: 700;
    vertical-align: middle;
}
.ig-hint {
    display: block; margin-top: 6px;
    font-size: 0.72rem; color: rgba(255, 255, 255, 0.34);
}

.console-rail { display: flex; flex-direction: column; gap: 12px; }
.rail-card {
    background: rgba(0, 0, 0, 0.34);
    border: 1px solid rgba(255, 176, 102, 0.16);
    border-radius: 8px;
    padding: 14px;
}
.rail-credits { text-align: center; padding: 16px 14px 14px; }
.rail-credit-n {
    font-family: 'Share Tech Mono', monospace;
    font-size: 2.4rem; line-height: 1; font-weight: 700;
    color: #ffb066;
    text-shadow: 0 0 22px rgba(255, 176, 102, 0.4);
}
.rail-credit-l {
    margin-top: 5px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.6rem; letter-spacing: 2.2px;
    color: rgba(255, 255, 255, 0.45);
}
.rail-credit-who {
    margin-top: 9px; padding-top: 9px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.72rem; color: rgba(255, 255, 255, 0.5);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.rail-btn {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    width: 100%; padding: 11px 12px;
    background: none;
    border: 1px solid rgba(255, 176, 102, 0.32);
    border-radius: 6px;
    color: rgba(255, 214, 176, 0.9);
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.74rem; letter-spacing: 1.6px;
    cursor: pointer;
    transition: all 0.25s ease;
}
.rail-btn:hover {
    background: rgba(255, 176, 102, 0.1);
    border-color: rgba(255, 176, 102, 0.7);
    color: #fff;
}
.rail-btn.primary {
    background: rgba(255, 176, 102, 0.12);
    border-color: rgba(255, 176, 102, 0.55);
    color: #ffd6b0;
}
.rail-btn.primary:hover { background: rgba(255, 176, 102, 0.2); }

.rail-title {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.62rem; letter-spacing: 2.2px;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 10px;
}
.rail-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.rail-list li { display: flex; gap: 10px; align-items: flex-start; }
.rail-list i { color: #ffb066; font-size: 0.82rem; margin-top: 3px; flex: 0 0 14px; }
.rail-list span { font-size: 0.75rem; line-height: 1.45; color: rgba(255, 255, 255, 0.5); }
.rail-list b {
    display: block; margin-bottom: 1px;
    font-size: 0.79rem; font-weight: 600; color: rgba(255, 255, 255, 0.88);
}
.rail-foot {
    display: flex; gap: 9px; align-items: flex-start;
    margin: 0; padding: 0 2px;
    font-size: 0.71rem; line-height: 1.5; color: rgba(255, 255, 255, 0.38);
}
.rail-foot i { color: rgba(255, 176, 102, 0.6); margin-top: 2px; }

/* The rail drops under the form before it gets too narrow to read. */
@media (max-width: 860px), (orientation: portrait) {
    .console-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .console-rail { flex-direction: column; }
}


/* The service panel's key facts, without the four frames. The panel is
   narrow, so they sit two by two — but as plain type between two rules
   rather than as boxes, which were four more frames stacked immediately
   above the button the panel exists to get you to press.

   Scoped to .module-details and marked, because the rules that drew the
   frame are themselves `.module-details .stat-card { ... !important }`. */
.module-details .stats-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 13px 16px !important;
    margin: 18px 0 20px !important;
    padding: 14px 0 !important;
    border: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.09) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09) !important;
    border-radius: 0 !important;
    background: none !important;
    overflow: visible !important;
}
.module-details .stat-card,
.module-details .stat-card:nth-child(2n),
.module-details .stat-card:first-child,
.module-details .stat-card:nth-last-child(-n+2) {
    min-width: 0;
    display: flex; flex-direction: column; gap: 3px;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-align: left !important;
}
.module-details .stat-title {
    display: block;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.57rem !important;
    letter-spacing: 1.5px;
    color: rgba(255, 255, 255, 0.34) !important;
    margin-bottom: 0 !important;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.module-details .stat-value {
    font-size: 0.87rem !important;
    font-weight: 600 !important;
    white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}

/* An infinity sign needs less room than a number and reads better slightly
   larger. */
.rail-credit-n.is-unlimited { font-size: 3rem; line-height: 0.95; }


/* The pricing card scrolls when the viewport is short, but a bright native
   scrollbar down the inside edge of a dark premium panel looks like a
   rendering fault. It still scrolls — the track is simply not drawn. */
.subscription-modal-card {
    scrollbar-width: none;              /* Firefox */
    -ms-overflow-style: none;           /* old Edge */
}
.subscription-modal-card::-webkit-scrollbar { width: 0; height: 0; }


/* =====================================================================
   PRICING — premium pass
   ===================================================================== */
.sub-header p { max-width: 640px; margin-left: auto; margin-right: auto; }

/* --- monthly / yearly -------------------------------------------------- */
.billing-toggle {
    display: inline-flex;
    margin: 22px auto 4px;
    padding: 4px;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 40px;
}
.billing-toggle .bt-opt {
    display: inline-flex; align-items: center; gap: 8px;
    background: none; border: none; cursor: pointer;
    padding: 8px 20px; border-radius: 40px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.74rem; letter-spacing: 1.8px;
    color: rgba(255, 255, 255, 0.5);
    transition: all 0.25s ease;
}
.billing-toggle .bt-opt:hover { color: rgba(255, 255, 255, 0.85); }
.billing-toggle .bt-opt.active {
    background: rgba(255, 176, 102, 0.16);
    color: #ffb066;
    box-shadow: inset 0 0 0 1px rgba(255, 176, 102, 0.45);
}
body.in-space .billing-toggle .bt-opt.active {
    background: rgba(210, 213, 219, 0.14);
    color: #d2d5db;
    box-shadow: inset 0 0 0 1px rgba(210, 213, 219, 0.45);
}
.bt-save {
    background: #20b26c; color: #04160d;
    font-size: 0.58rem; font-weight: 700; letter-spacing: 1px;
    padding: 2px 7px; border-radius: 20px;
}

/* --- the cards --------------------------------------------------------- */
.pricing-grid { align-items: stretch; gap: 18px; margin-top: 26px; }

.tier-card {
    padding: 28px 22px 22px;
    background: linear-gradient(170deg, rgba(255,255,255,0.035), rgba(255,255,255,0.008));
    border-radius: 10px;
}
.tier-card.featured { transform: translateY(-6px); }
.tier-card.featured:hover { transform: translateY(-10px); }

.tier-price { display: flex; align-items: baseline; gap: 1px; margin-bottom: 2px; }
.tier-price .cur { font-size: 1.2rem; opacity: 0.7; align-self: flex-start; margin-top: 6px; }
.tier-price .amt { font-size: 2.9rem; line-height: 1; font-weight: 700; }
.tier-price .per {
    font-size: 0.9rem; font-weight: 400;
    color: rgba(255, 255, 255, 0.4); margin-left: 3px;
}
.tier-billed {
    font-size: 0.7rem; letter-spacing: 0.4px;
    color: rgba(255, 255, 255, 0.38);
    margin-bottom: 14px; min-height: 1em;
}

.tier-features li i.fa-infinity { color: #ffb066; }
.tier-features li b { color: #fff; font-weight: 600; }

/* --- the buttons ------------------------------------------------------- */
.tier-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.tier-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%;
}
.crypto-pay-btn {
    background: rgba(0, 255, 102, 0.05) !important;
    border: 1px solid rgba(0, 255, 102, 0.45) !important;
    color: #00ff66 !important;
    font-weight: 600;
}
.crypto-pay-btn:hover { background: rgba(0, 255, 102, 0.14) !important; }

/* --- the notes underneath ---------------------------------------------- */
.sub-notes { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.sub-notes .sub-note { margin: 0; }
.sub-note.quiet {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.08);
    border-left-color: rgba(0, 255, 102, 0.5);
}
.sub-note.quiet i { color: rgba(0, 255, 102, 0.75); }
.sub-note.quiet b { color: rgba(255, 255, 255, 0.85); }

@media (max-width: 860px), (orientation: portrait) {
    .pricing-grid { grid-template-columns: 1fr; }
    .tier-card.featured { transform: none; }
    .tier-card.featured:hover { transform: translateY(-4px); }
    .billing-toggle .bt-opt { padding: 7px 14px; font-size: 0.66rem; letter-spacing: 1.2px; }
}


/* A monthly-equivalent figure carries cents, so it needs a little less size
   to occupy the same width as a round monthly price. */
.tier-price.is-equiv .amt { font-size: 2.45rem; }
.tier-billed b { color: #20b26c; font-weight: 700; }

/* The tier button says an exact amount and must never wrap it onto a second
   line — a price broken across two rows reads as two prices. */
.tier-actions .tier-btn { white-space: nowrap; }


/* =====================================================================
   ACCOUNT PANEL — who you are, what you are on, what is left of it
   ===================================================================== */
.bt-avatar { display: block; border-radius: 50%; flex: 0 0 auto; }

.prof-card {
    background: rgba(210, 213, 219, 0.04);
    border: 1px solid rgba(210, 213, 219, 0.18);
    border-radius: 10px;
    padding: 18px;
    margin-bottom: 20px;
}
.prof-head {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding-bottom: 14px; margin-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.prof-id { display: flex; align-items: center; gap: 13px; min-width: 0; }
.prof-av { flex: 0 0 auto; line-height: 0; }
.prof-idtext { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.prof-name {
    font-family: 'Share Tech Mono', monospace;
    font-size: 1.15rem; font-weight: 700; letter-spacing: 1px; color: #e4e6ea;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.prof-plan {
    display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
    padding: 3px 10px; border-radius: 20px;
    border: 1px solid transparent;
    font-size: 0.72rem; font-weight: 600; letter-spacing: 0.4px;
}
.prof-manage {
    flex: 0 0 auto;
    background: none; border: 1px solid rgba(255, 176, 102, 0.35);
    color: #ffb066; border-radius: 5px; cursor: pointer;
    padding: 8px 13px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.68rem; letter-spacing: 1.4px;
    transition: all 0.25s ease;
}
.prof-manage:hover { background: rgba(255, 176, 102, 0.12); color: #fff; }

.prof-detail {
    display: flex; flex-wrap: wrap; gap: 6px 20px;
    margin-bottom: 14px;
    font-size: 0.78rem; color: rgba(255, 255, 255, 0.45);
}
.prof-detail span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.prof-detail i { color: rgba(255, 176, 102, 0.6); }

.prof-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.prof-stat {
    padding: 9px 10px; border-radius: 6px; text-align: center;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.prof-stat.accent {
    background: rgba(255, 215, 0, 0.09);
    border-color: rgba(255, 215, 0, 0.28);
}
.prof-stat-label {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.6rem; letter-spacing: 1.2px;
    color: rgba(255, 255, 255, 0.4); margin-bottom: 3px;
}
.prof-stat.accent .prof-stat-label { color: #ffd700; }
.prof-stat-value { font-size: 1.25rem; font-weight: 700; color: #fff; line-height: 1.1; }
.prof-stat.accent .prof-stat-value { color: #ffd700; }

/* The HUD badge holds a 22px avatar where an icon used to sit. */
.hud-slot.agent .hud-icon-box .bt-avatar { margin: 0 auto; }

@media (max-width: 700px), (orientation: portrait) {
    .prof-head { flex-direction: column; align-items: flex-start; }
    .prof-manage { width: 100%; }
    .prof-stats { grid-template-columns: repeat(2, 1fr); }
}


/* =====================================================================
   MY REPORTS — a case file per submitted system
   ===================================================================== */
.rl-overlay {
    position: fixed; inset: 0; z-index: 10050;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    background: rgba(2, 6, 12, 0.9);
    backdrop-filter: blur(8px);
}
.rl-overlay[hidden] { display: none; }

.rl-card {
    position: relative;
    width: min(1080px, 100%); max-height: 92vh;
    display: flex; flex-direction: column;
    padding: 28px 30px 24px;
    background: rgba(6, 12, 20, 0.97);
    border: 1px solid rgba(255, 176, 102, 0.35);
    border-top: 3px solid #ffb066;
    border-radius: 8px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.75);
    scrollbar-width: none;
}
.rl-close {
    position: absolute; top: 14px; right: 16px;
    background: none; border: none; cursor: pointer;
    color: rgba(255, 255, 255, 0.45); font-size: 1.7rem; line-height: 1;
}
.rl-close:hover { color: #ff5f7a; }

.rl-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 20px; flex-wrap: wrap;
    /* Room on the right for the close button, which otherwise lands on top
       of the last count. */
    padding: 0 34px 16px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
.rl-kicker {
    display: block; margin-bottom: 5px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.64rem; letter-spacing: 2.8px; color: rgba(255, 176, 102, 0.8);
}
.rl-head h2 {
    margin: 0; font-family: 'Share Tech Mono', monospace;
    font-size: 1.6rem; letter-spacing: 2px; color: #fff;
}
.rl-counts { display: flex; gap: 22px; }
.rl-count { text-align: right; }
.rl-count b { display: block; font-size: 1.35rem; font-weight: 700; line-height: 1; color: #fff; }
.rl-count span {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.58rem; letter-spacing: 1.4px; color: rgba(255, 255, 255, 0.4);
}

.rl-filters { display: flex; gap: 8px; margin: 16px 0 18px; }
.rl-filter {
    background: none; border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 30px; padding: 6px 16px; cursor: pointer;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.66rem; letter-spacing: 1.6px; color: rgba(255, 255, 255, 0.5);
    transition: all 0.2s ease;
}
.rl-filter:hover { color: #fff; border-color: rgba(255, 255, 255, 0.3); }
.rl-filter.active {
    background: rgba(255, 176, 102, 0.14);
    border-color: rgba(255, 176, 102, 0.55); color: #ffb066;
}

.rl-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px; overflow-y: auto; padding-right: 4px; min-height: 0;
    scrollbar-width: none;
}
.rl-grid::-webkit-scrollbar, .rl-card::-webkit-scrollbar { width: 0; }

/* Each submission is a case file: a number down the spine, the system's name,
   what came back from it. */
.rl-case {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column;
    padding: 16px 16px 14px 22px;
    background: linear-gradient(160deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    transition: border-color 0.25s ease, transform 0.25s ease;
}
.rl-case:hover { border-color: rgba(255, 176, 102, 0.45); transform: translateY(-3px); }
.rl-case::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    background: var(--case-tone, #8c9099);
}
.rl-case-no {
    position: absolute; right: 12px; bottom: 8px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 2.4rem; font-weight: 700; line-height: 1;
    color: rgba(255, 255, 255, 0.035); pointer-events: none;
}
.rl-case-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 10px; margin-bottom: 6px;
}
.rl-case-name {
    font-size: 1.02rem; font-weight: 600; color: #fff; line-height: 1.3;
    overflow-wrap: anywhere;
}
.rl-chip {
    flex: 0 0 auto; padding: 3px 9px; border-radius: 20px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.58rem; letter-spacing: 1.2px; white-space: nowrap;
    border: 1px solid currentColor;
}
.rl-case-date {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.68rem; letter-spacing: 0.8px;
    color: rgba(255, 255, 255, 0.35); margin-bottom: 12px;
}
.rl-case-foot {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-top: auto; padding-top: 12px;
    border-top: 1px dashed rgba(255, 255, 255, 0.1);
}
.rl-btn {
    display: inline-flex; align-items: center; gap: 7px;
    background: #f0b25a; color: #17120a; border: none;
    padding: 7px 14px; border-radius: 5px; cursor: pointer;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.72rem; font-weight: 700; letter-spacing: 1px;
}
.rl-btn:hover { filter: brightness(1.08); }
.rl-link {
    display: inline-flex; align-items: center; gap: 6px;
    color: rgba(210, 213, 219, 0.85); font-size: 0.78rem;
    text-decoration: none; font-weight: 600;
}
.rl-link:hover { color: #fff; text-decoration: underline; }
.rl-wait { display: inline-flex; align-items: center; gap: 7px; font-size: 0.78rem; }

.rl-empty {
    grid-column: 1 / -1;
    padding: 44px 24px; text-align: center;
    border: 1px dashed rgba(255, 255, 255, 0.16); border-radius: 8px;
    color: rgba(255, 255, 255, 0.5); font-size: 0.9rem; line-height: 1.7;
}
.rl-empty i { font-size: 2rem; color: rgba(255, 176, 102, 0.5); display: block; margin-bottom: 12px; }

/* The profile panel gets a way through to all this. */
.prof-actions { display: flex; gap: 9px; margin-top: 14px; }
.prof-actions .prof-btn { flex: 1; justify-content: center; }

@media (max-width: 700px), (orientation: portrait) {
    .rl-card { padding: 22px 16px 18px; }
    .rl-head h2 { font-size: 1.25rem; }
    .rl-counts { gap: 14px; }
    .rl-grid { grid-template-columns: 1fr; }
}


/* Profile editor: name and picture, in place, without another modal. */
.prof-av {
    position: relative; padding: 0; border: none; background: none;
    cursor: pointer; line-height: 0; border-radius: 50%;
}
.prof-av-pen {
    position: absolute; right: -2px; bottom: -2px;
    width: 20px; height: 20px; border-radius: 50%;
    display: grid; place-items: center;
    background: #ffb066; color: #17120a; font-size: 0.6rem;
    border: 2px solid #0a1018;
    opacity: 0; transition: opacity 0.2s ease;
}
.prof-av:hover .prof-av-pen { opacity: 1; }
.prof-edit {
    background: none; border: none; cursor: pointer; padding: 0 0 0 8px;
    color: rgba(255, 255, 255, 0.25); font-size: 0.7rem;
    transition: color 0.2s ease; vertical-align: middle;
}
.prof-edit:hover { color: #ffb066; }

.prof-editor {
    margin: 4px 0 14px; padding: 14px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 176, 102, 0.22);
    border-radius: 8px;
}
.prof-editor[hidden] { display: none; }
.prof-field { display: block; margin-bottom: 12px; text-align: left; }
.prof-field span {
    display: block; margin-bottom: 5px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.6rem; letter-spacing: 1.4px; color: rgba(255, 255, 255, 0.4);
}
.prof-field input {
    width: 100%; box-sizing: border-box;
    background: rgba(0, 0, 0, 0.55); color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 5px;
    padding: 9px 11px; font: inherit; font-size: 0.9rem;
}
.prof-field input:focus { outline: none; border-color: #ffb066; }
.prof-editor-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.prof-editor-row.end { justify-content: flex-end; margin-top: 12px; }
.prof-btn {
    display: inline-flex; align-items: center; gap: 7px;
    background: none; border: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.75); border-radius: 5px;
    padding: 8px 13px; cursor: pointer;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.68rem; letter-spacing: 1.2px;
    transition: all 0.2s ease;
}
.prof-btn:hover { color: #fff; border-color: rgba(255, 255, 255, 0.4); }
.prof-btn.save { background: #ffb066; border-color: #ffb066; color: #17120a; font-weight: 700; }
.prof-btn.save:hover { filter: brightness(1.08); }
.prof-btn.save:disabled { opacity: 0.6; cursor: default; }
.prof-btn.danger { border-color: rgba(255, 95, 122, 0.4); color: #ff5f7a; }
.prof-btn.ghost { border-color: transparent; color: rgba(255, 255, 255, 0.45); }
.prof-btn.wide { width: 100%; justify-content: center; padding: 11px; }
.prof-btn[hidden] { display: none; }
.prof-msg {
    flex: 1 1 auto; min-width: 0; text-align: left;
    font-size: 0.76rem; color: rgba(255, 255, 255, 0.45);
}
.prof-msg.bad { color: #ff5f7a; }