/* ==========================================================================
   GALAXY-UX-BRIDGE.CSS
   Applies the new visual identity (tokens.css / galaxy-ux.css) onto the
   EXISTING Million Star Galaxy chrome in index.php, without rewriting the
   app markup. Loaded LAST in <head> so it wins ties against the inline
   <style> and tailwind-utilities.css.

   Rollback: remove the two <link> tags added to index.php (tokens is
   pulled in by the @import below) and the original inline design returns.
   ========================================================================== */

@import url('tokens.css');

/* Typography reverted 2026-09-04 — keep the original app fonts (no webfont swap). */

/* ---------- Text colour — warm cream instead of cold white ---------- */
#ui-layer .text-white,
#create-modal .text-white,
#view-modal .text-white,
#account-modal .text-white { color: var(--ink); }
.text-gray-200 { color: var(--ink-dim); }
.text-gray-400,
.text-gray-500 { color: var(--ink-faint); }

/* ---------- Accent — gold replaces cyan ---------- */
.text-cyan-200,
.text-cyan-300,
.text-cyan-400,
.text-cyan-500 { color: var(--gold); }
#hud-brand-baseline { color: var(--gold); }
.quote-author { color: var(--gold); }

.border-cyan-500,
.border-cyan-900 { border-color: var(--gold); }

.bg-cyan-600,
.bg-cyan-500,
.bg-cyan-900 { background-color: var(--gold); }
.hover\:bg-cyan-500:hover,
.hover\:bg-cyan-800:hover { background-color: var(--gold); }

.from-blue-600 { --tw-gradient-from: var(--gold); }
.to-cyan-500 { --tw-gradient-to: var(--gold); }

/* Brand mark glow (inline text-shadow needs !important) */
#hud-brand-panel h1 {
    margin: 0;
    line-height: 1;
    color: var(--ink);
    text-shadow: 0 0 22px var(--gold-focus) !important;
}
#hud-brand-panel h1 i { color: var(--gold) !important; }

/* ---------- Surfaces — deep navy panels, quiet 4px corners ---------- */
.glass-panel {
    background: linear-gradient(180deg, #0d1424f2, #0a0f1cf5);
    border: 1px solid var(--line);
    box-shadow: 0 8px 24px -6px #00000090;
    color: var(--ink);
    border-radius: var(--radius-soft);
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
}

/* Keep dynamic account and HUD text inside its surface at every viewport width. */
#hud-ui,
#hud-ui *,
#account-modal,
#account-modal * {
    box-sizing: border-box;
}

#hud-topbar {
    gap: 18px;
}

#hud-brand-panel {
    padding: 14px;
}

#hud-actions {
    gap: 10px;
}

#account-profile-panel {
    min-width: 0;
    max-width: 100%;
}

#account-profile-panel > [data-account-section] {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 14px;
    overflow-wrap: anywhere;
    word-break: normal;
}

#account-profile-panel input,
#account-profile-panel textarea,
#account-profile-panel select,
#account-profile-panel button {
    max-width: 100%;
}

@media (max-width: 768px) {
    #hud-topbar {
        gap: 14px;
    }

    #hud-brand-panel {
        padding: 12px;
    }

    #hud-actions {
        gap: 8px;
    }

    #account-profile-panel > [data-account-section] {
        padding: 12px;
    }

    #hud-language-menu {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        width: min(196px, calc(100vw - 24px));
        max-width: calc(100vw - 24px);
        overflow-x: hidden;
    }

    #hud-language-menu .hud-language-option {
        width: 100%;
        min-width: 0;
    }
}

/* ---------- Form fields ---------- */
input, textarea, select {
    background: var(--deep-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-soft);
    color: var(--ink);
}
input::placeholder, textarea::placeholder { color: var(--ink-faint); }
input:focus, textarea:focus, select:focus {
    background: var(--deep-2);
    border-color: var(--gold);
    box-shadow: 0 0 0 1px var(--gold-focus);
    outline: none;
}

/* ---------- Buttons ---------- */
#hud-ui button,
#create-modal button,
#view-modal button,
#account-modal button { font-family: var(--font-ui); }

#create-modal button,
#view-modal button,
#account-modal button { border-radius: var(--radius-soft); }

/* Primary actions -> solid gold on void */
#hud-warp-go,
#hud-warp-panel button,
#create-login-cta button,
#btn-account-login,
#account-forgot-send,
#account-reset-submit,
#btn-account-save-settings {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--void) !important;
}
#hud-warp-go:hover,
#hud-warp-panel button:hover,
#btn-account-login:hover { filter: brightness(1.08); }

/* Autopilot has a real active state: gold fill, matching chamfer and inset contour. */
#btn-autopilot {
    --hud-action-fill: var(--deep-2);
    --hud-action-line: var(--gold);
    border: 1px solid transparent !important;
    background:
        linear-gradient(var(--hud-action-fill), var(--hud-action-fill)) padding-box,
        linear-gradient(var(--hud-action-line), var(--hud-action-line)) border-box !important;
    color: var(--ink);
}
#btn-autopilot.is-active {
    --hud-action-fill: var(--gold);
    --hud-action-line: #f8d78a;
    color: var(--void) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.38), inset 0 -1px 0 rgba(82,52,10,.36), 0 0 18px var(--gold-focus) !important;
}
#btn-autopilot:hover { filter: brightness(1.08); }

/* The share control opens into a named action, then confirms the copy in place. */
#coord-share-btn {
    min-width: 28px;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid transparent !important;
    border-radius: 0 !important;
    clip-path: polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
    background: linear-gradient(var(--deep-2),var(--deep-2)) padding-box, linear-gradient(var(--gold),var(--gold)) border-box !important;
    color: var(--gold);
    transition: width .2s var(--ease), padding .2s var(--ease), background .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
}
#coord-share-btn-text { max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap; }
#coord-share-shell:hover #coord-share-btn,
#coord-share-shell:focus-within #coord-share-btn,
#coord-share-btn.is-copied {
    width: auto;
    padding: 0 10px;
    gap: 7px;
    background: linear-gradient(var(--gold),var(--gold)) padding-box, linear-gradient(#f8d78a,#f8d78a) border-box !important;
    color: var(--void);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.38), inset 0 -1px 0 rgba(82,52,10,.36), 0 0 14px var(--gold-focus);
}
#coord-share-shell:hover #coord-share-btn-text,
#coord-share-shell:focus-within #coord-share-btn-text,
#coord-share-btn.is-copied #coord-share-btn-text { max-width: 9rem; opacity: 1; }
#coord-share-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

@media (max-width: 768px) {
    #coord-share-shell { width: 100%; }
    #coord-display {
        width: auto;
        min-width: 0;
        flex: 1 1 auto;
    }
    #coord-share-btn { flex: 0 0 auto; }
    #coord-share-btn.is-copied { max-width: min(12rem, calc(100vw - 84px)); }
}

/* ---------- Hero: "Créer une étoile" — the claim gesture, warm gold ---------- */
#btn-create-star {
    background: var(--gold);
    border: none;
    color: var(--void);
    box-shadow: 0 8px 24px -6px #00000090, 0 0 30px -6px var(--gold-focus);
}
#btn-create-star i,
#btn-create-star span { color: var(--void); }
#btn-create-star:hover { filter: brightness(1.06); }
#btn-create-star{ gap:8px; padding-left:14px; padding-right:14px; }

/* ---------- Crosshair reticle -> gold (blocked state stays red) ---------- */
.reticle-part { background: var(--gold); box-shadow: 0 0 8px var(--gold); }

/* ---------- Reservation-info accents ---------- */
.info-tab-title { color: var(--gold); }
.info-tab-subtitle { color: var(--ink-dim); }
.info-tab-highlight { color: var(--ink); }

/* ==========================================================================
   First-visit hero value proposition (#msg-hero). Fail-safe: stays hidden
   until the controller script reveals it, so no JS = no hero (app intact).
   ========================================================================== */
#msg-hero{
    position:fixed; inset:0; z-index:45;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center; padding:24px;
    background:radial-gradient(ellipse at 50% 38%, #05070cad 0%, #05070ce8 58%, #05070cf7 100%);
    -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
    font-family:var(--font-ui);
    animation:msgHeroIn .5s var(--ease) both;
}
#msg-hero[hidden], #msg-hero.msg-hero-hidden{ display:none; }
#msg-hero .msg-hero-inner{ max-width:640px; width:100%; }
#msg-hero .msg-hero-eyebrow{
    font-family:var(--font-mono); font-size:11px; letter-spacing:.28em; text-transform:uppercase;
    color:var(--gold); margin:0 0 14px;
}
#msg-hero .msg-hero-title{
    font-size:clamp(1.7rem, 6vw, 3rem); line-height:1.12; font-weight:700;
    color:var(--ink); margin:0 0 14px; letter-spacing:-.01em;
}
#msg-hero .msg-hero-sub{
    font-size:clamp(.95rem, 2.6vw, 1.15rem); line-height:1.55;
    color:var(--ink-dim); margin:0 auto 26px; max-width:34em;
}
#msg-hero .msg-hero-actions{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
#msg-hero .msg-hero-cta{
    background:var(--gold); color:var(--void); border:none;
    padding:15px 30px; font-size:1rem; font-weight:600; cursor:pointer;
    font-family:var(--font-ui);
    box-shadow:0 8px 24px -6px #00000090, 0 0 30px -6px var(--gold-focus);
    clip-path:polygon(var(--chamfer) 0,100% 0,100% calc(100% - var(--chamfer)),calc(100% - var(--chamfer)) 100%,0 100%,0 var(--chamfer));
}
#msg-hero .msg-hero-cta:hover{ filter:brightness(1.06); }
#msg-hero .msg-hero-ghost{
    background:none; color:var(--ink-dim); border:1px solid var(--line);
    padding:15px 26px; font-size:1rem; cursor:pointer; border-radius:var(--radius-soft);
    font-family:var(--font-ui);
}
#msg-hero .msg-hero-ghost:hover{ border-color:var(--gold); color:var(--ink); }
#msg-hero .msg-hero-trust{
    display:flex; flex-wrap:wrap; gap:8px 20px; justify-content:center;
    margin-top:26px; font-size:12px; color:var(--ink-faint);
    font-family:var(--font-mono); letter-spacing:.02em;
}
#msg-hero .msg-hero-trust span{ display:inline-flex; align-items:center; gap:6px; }
#msg-hero .msg-hero-trust i{ color:var(--gold); }
#msg-hero .msg-hero-concept{
    padding:6px 13px; border:1px solid var(--line); border-radius:999px;
    background:#0d142466; color:var(--ink-dim);
    transition:border-color .3s, color .3s, transform .3s, box-shadow .3s;
    animation:msgHeroConceptPulse 2.8s var(--ease) infinite;
}
#msg-hero .msg-hero-concept:nth-child(2){ animation-delay:.35s; }
#msg-hero .msg-hero-concept:nth-child(3){ animation-delay:.7s; }
#msg-hero .msg-hero-concept:hover{ border-color:var(--gold); color:var(--ink); transform:translateY(-1px); }
@keyframes msgHeroConceptPulse{
    0%,100%{ box-shadow:0 0 0 0 rgba(212,175,55,0); border-color:var(--line); }
    50%{ box-shadow:0 0 15px -3px var(--gold-focus); border-color:var(--gold); }
}
#msg-hero .msg-hero-controls{
    margin-top:22px; padding-top:18px; border-top:1px solid var(--line);
}
#msg-hero .msg-hero-controls:empty{ border-top:none; margin-top:0; padding-top:0; }
#msg-hero .msg-hero-controls-title{
    font-family:var(--font-mono); font-size:11px; letter-spacing:.24em; text-transform:uppercase;
    color:var(--gold); margin-bottom:10px;
}
#msg-hero .msg-hero-controls-list{
    list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px 18px;
    justify-content:center; font-size:13px; color:var(--ink-dim); font-family:var(--font-ui);
}
#msg-hero .msg-hero-controls-list li{ display:inline-flex; align-items:center; gap:8px; }
#msg-hero .msg-hero-controls-list i{ color:var(--gold); width:16px; text-align:center; }
@media (prefers-reduced-motion: reduce){ #msg-hero .msg-hero-concept{ animation:none; } }
#msg-hero .msg-hero-close{
    position:absolute; top:calc(14px + env(safe-area-inset-top)); right:16px;
    width:40px; height:40px; border-radius:50%; border:1px solid var(--line);
    background:#0d1424cc; color:var(--ink-dim); cursor:pointer; font-size:20px; line-height:1;
}
#msg-hero .msg-hero-close:hover{ color:var(--ink); border-color:var(--gold); }
@keyframes msgHeroIn{ from{ opacity:0; } to{ opacity:1; } }
@media (max-width:480px){
    #msg-hero{ padding:20px; }
    #msg-hero .msg-hero-actions{ flex-direction:column; }
    #msg-hero .msg-hero-cta, #msg-hero .msg-hero-ghost{ width:100%; }
}
@media (prefers-reduced-motion: reduce){
    *, *::before, *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        scroll-behavior:auto !important;
        transition-duration:.01ms !important;
    }
    #msg-hero{ animation:none; }
}

@media (max-width:480px){
    #btn-autopilot{
        height:44px;
        min-height:44px;
    }
    #coord-share-btn{
        min-width:44px;
        width:44px;
        height:44px;
        padding:0;
        gap:0;
        border-radius:var(--radius-soft);
        border-color:var(--gold-focus);
        background:var(--gold-dim);
        color:var(--ink);
    }
    #hud-language-trigger,
    #hud-music-btn,
    #hud-account-btn{
        width:44px;
        min-width:44px;
        height:44px;
        min-height:44px;
    }
    #hud-music-btn,
    #hud-account-btn{ flex-basis:44px; }
    #hud-language-menu{
        grid-template-columns:repeat(4,minmax(0,1fr));
        width:min(196px,calc(100vw - 24px));
        max-width:calc(100vw - 24px);
        left:auto;
        right:0;
    }
    .hud-language-option{
        width:100%;
        min-width:0;
        height:44px;
    }
}

#hud-brand-panel .mt-1:has(#coord-share-btn){ gap:8px; flex-wrap:wrap; }
#btn-autopilot{
    display:inline-flex;
    align-items:center;
    box-sizing:border-box;
    height:32px;
    min-height:32px;
    padding-top:0;
    padding-bottom:0;
}
#coord-share-btn{
    min-height:32px;
    min-width:32px;
    width:32px;
    height:32px;
    padding:0;
    gap:0;
    border:1px solid var(--gold-focus);
    border-radius:var(--radius-soft);
    background:var(--gold-dim);
    color:var(--ink);
}
#coord-share-btn:hover,
#coord-share-btn:focus-visible{
    background:var(--gold);
    border-color:var(--gold);
    color:var(--void);
    box-shadow:none;
}

#view-modal .view-share-star-btn{
    display:inline-flex;
    align-items:center;
    min-height:32px;
    margin-top:0;
    padding:0 10px;
    gap:7px;
    border:1px solid var(--gold-focus);
    border-radius:var(--radius-soft);
    background:var(--gold-dim);
    color:var(--ink);
    font-size:11px;
    font-weight:600;
    letter-spacing:0;
}
#view-modal .view-share-star-btn:hover,
#view-modal .view-share-star-btn:focus-visible{
    background:var(--gold);
    border-color:var(--gold);
    color:var(--void);
    box-shadow:none;
}

/* ==========================================================================
   Menu coherence + content safe zones (2026-09-04)
   Keeps every menu on the gold/navy identity and stops words overlapping.
   ========================================================================== */

/* Language menu — keep the tile shape neutral; selection is a round marker. */
#hud-language-menu .hud-language-option:hover{ border-color:var(--gold); color:var(--ink); }
#hud-language-menu .hud-language-option.is-active{
    background:rgba(8,13,26,.96); border-color:rgba(231,178,92,.42); color:var(--ink); box-shadow:none;
}

/* Reservation-info tabs — gold active tab (was cyan) */
#reservation-info-tabs .reservation-tab-btn.bg-cyan-900\/40{
    background:var(--gold-dim); border-color:var(--gold); color:var(--gold);
}

/* Primary "claim" CTAs — coherent gold instead of blue gradients */
#create-modal #btn-submit.create-submit-reserve{
    background:var(--gold); border:1px solid var(--gold); color:var(--void);
    box-shadow:0 -14px 22px -10px #05070ce6, 0 0 26px -8px var(--gold-focus), inset 0 1px 0 rgba(255,255,255,0.16);
}
#create-modal .create-step-cta{
    background:var(--gold); border:1px solid var(--gold); color:var(--void);
    box-shadow:0 0 26px -8px var(--gold-focus), inset 0 1px 0 rgba(255,255,255,0.18);
}

/* Reservation banner + claim-coords — embed in navy/gold, drop the teal tint */
#create-modal #create-reservation-banner{
    background:linear-gradient(180deg,#0d1424e6,#0a0f1cf0); border-color:var(--gold-focus);
}
#create-modal #create-terms-coords{ background:var(--gold-dim); border-color:var(--gold-focus); }
#create-modal #create-terms-coords-values{ color:var(--gold); }

/* The reservation CTA follows the terms in normal scroll flow. */
#create-modal #create-terms-block{ padding-bottom:0; }

/* Top HUD controls wrap instead of colliding on narrow widths */
#hud-actions{ flex-wrap:wrap; justify-content:flex-end; }

/* Account modal — reasonable margin + text safety on the stacked forms.
   space-y-2 left buttons only 8px from fields with cramped padding. */
#account-modal button.w-full{ min-height:44px; padding-top:11px; padding-bottom:11px; }
#account-modal #btn-account-login,
#account-modal #account-forgot-send,
#account-modal #account-reset-submit{ margin-top:18px; letter-spacing:.06em; }
#account-modal #account-login-create-hint{ margin-top:10px; }

/* Verify + mission accents — align emerald/cyan/amber to the gold/navy identity */
#account-modal #btn-account-verify-code,
#create-modal #btn-pending-verify-code{
    background:var(--gold); border:1px solid var(--gold); color:var(--void)!important;
}
#account-modal #btn-account-verify-resend,
#create-modal #btn-pending-verify-resend{
    background:transparent; border:1px solid var(--line); color:var(--ink-dim);
}
#account-modal #btn-account-verify-resend:hover,
#create-modal #btn-pending-verify-resend:hover{ border-color:var(--gold); color:var(--ink); }

#account-modal #account-verify-delay-note,
#create-modal #pending-verify-delay-note,
#create-modal #pending-verify-code-wait,
#account-modal #account-mission-snapshot-card,
#account-modal #account-mission-ops-card{
    background:#0d1424b3; border-color:var(--gold-focus);
}
#create-modal #pending-verify-delay-note,
#create-modal #pending-verify-code-wait,
#account-modal #account-verify-delay-note{
    display:flex;
    align-items:flex-start;
    gap:8px;
}
.pending-verification-note-icon{
    flex:0 0 auto;
    margin-top:2px;
}
#account-modal .text-amber-300{ color:var(--gold); }

/* Primary account buttons must beat the #account-modal button navy base (spec 1,0,1),
   otherwise they render void text on navy = invisible. Scope to #account-modal (2,0,0). */
#account-modal #btn-account-login,
#account-modal #account-forgot-send,
#account-modal #account-reset-submit,
#account-modal #btn-account-save-settings{
    background:var(--gold); border-color:var(--gold); color:var(--void)!important;
}
/* Danger actions -> red-coded for consistency */
#account-modal #btn-account-logout,
#account-modal #btn-account-delete{
    background:var(--err-bg); border-color:var(--err-border); color:var(--err)!important;
}

/* Lifetime energy packs — gold coherence + a clear recommended anchor for conversion */
#create-modal .create-lifetime-option-input:checked + .create-lifetime-option-card{
    border-color:var(--gold);
    background:radial-gradient(circle at 88% 12%, rgba(231,178,92,0.20), transparent 45%),
               linear-gradient(180deg, rgba(20,26,48,0.96), rgba(10,15,28,0.96));
    box-shadow:0 12px 28px -8px #00000080, 0 0 0 1px var(--gold-focus) inset;
}
#create-modal .create-lifetime-option-duration{ color:var(--gold); }
#create-modal .create-lifetime-option-input:checked + .create-lifetime-option-card .create-lifetime-option-check{
    border-color:var(--gold); background:var(--gold-dim); color:var(--gold); box-shadow:0 0 12px -2px var(--gold-focus);
}
#create-modal .create-lifetime-option-badge.is-highlight{
    border-color:var(--gold); background:var(--gold-dim); color:var(--gold);
}
#create-modal .create-lifetime-option:hover .create-lifetime-option-card{
    border-color:var(--gold-focus); box-shadow:0 10px 24px -8px #00000080, 0 0 0 1px var(--gold-focus) inset;
}
#create-modal .create-lifetime-option.is-recommended .create-lifetime-option-card{
    border-color:var(--gold-focus); box-shadow:0 0 0 1px var(--gold-focus) inset, 0 12px 26px -10px #00000090;
}
#create-modal .create-lifetime-option-ribbon{
    display:block; align-self:stretch; margin:-11px -11px 6px -11px; padding:4px 10px;
    background:var(--gold); color:var(--void); font-size:8.5px; font-weight:700; letter-spacing:.12em;
    text-transform:uppercase; text-align:center; border-radius:12px 12px 0 0;
}
/* Second anchor: "Best value" reads as a lighter, outlined banner vs the solid "Most popular" */
#create-modal .create-lifetime-option-ribbon.is-bestvalue{
    background:var(--deep-2); color:var(--gold); border-bottom:1px solid var(--gold-focus);
}
#create-modal .create-lifetime-option-permonth{
    display:block; margin-top:2px; font-size:8.5px; letter-spacing:.02em; color:var(--ink-faint);
}

/* ---------- Star labels — new "étiquette" shape, navy base, gold interactive ----------
   Each star's accent colour (border + glow) is set inline per-label and preserved. */
.star-label{ border-radius:var(--radius-soft); background:rgba(13,20,36,0.68); }
.star-label.interactive{ background:rgba(13,20,36,0.85); }
.star-label.interactive:hover{ background:var(--gold-dim); }
.star-label-base{ border-radius:var(--radius-soft); }

/* Final shape pass: content surfaces and text labels share the same quiet 4px edge.
   Round geometry remains reserved for compact, icon-only navigation controls. */
#ui-layer :is(.glass-panel, [class*="panel"], [class*="card"], [class*="badge"], [class*="tag"], [class*="chip"], [class*="notice"], [class*="alert"]),
#reservation-info-modal :is([class*="panel"], [class*="card"], [class*="badge"], [class*="tag"]),
#create-modal :is([class*="panel"], [class*="card"], [class*="badge"], [class*="tag"]),
#view-modal :is([class*="panel"], [class*="card"], [class*="badge"], [class*="tag"]),
#account-modal :is([class*="panel"], [class*="card"], [class*="badge"], [class*="tag"]){
    border-radius:var(--radius-soft) !important;
}

/* Remove ornamental side bars. Content hierarchy comes from spacing and headings. */
#create-modal > .glass-panel,
#view-founding-disclosure,
#account-modal .border-l-2,
#account-modal .border-l-4{
    border-left-width:0 !important;
    padding-left:0 !important;
}

/* A clipped CSS border cannot draw a diagonal edge reliably. Actions are instead
   solid to the cut edge, with a subtle inset highlight that clips cleanly. */
#create-modal button,
#view-modal button,
#account-modal button,
#hud-warp-panel button,
#btn-create-star,
#btn-autopilot{
    clip-path:polygon(var(--chamfer) 0,100% 0,100% calc(100% - var(--chamfer)),calc(100% - var(--chamfer)) 100%,0 100%,0 var(--chamfer));
    border-radius:0 !important;
}
#create-modal button:focus-visible,
#view-modal button:focus-visible,
#account-modal button:focus-visible,
#hud-warp-panel button:focus-visible,
#btn-create-star:focus-visible,
#btn-autopilot:focus-visible{
    outline:2px solid var(--gold);
    outline-offset:2px;
}

/* Generated account journal entries use the same unadorned text flow. */
#account-modal #account-mission-ops-card .border-l-2{
    border-left:0 !important;
    padding-left:0 !important;
}

/* ========================================================================
   Public interaction contract
   Frames stay quiet and square-edged; every textual or squared action is a
   slit with a contained contour. Circular touch navigation stays circular.
   ======================================================================== */
:root{
    --ui-slit-cut:7px;
    --ui-frame-fill:linear-gradient(180deg,rgba(16,26,48,.94),rgba(8,13,26,.94));
    --ui-frame-line:rgba(169,176,196,.22);
    --ui-action-fill:var(--deep-2);
    --ui-action-line:rgba(231,178,92,.9);
    --ui-action-ink:var(--ink);
}

#ui-layer :is(.glass-panel, .flight-bar, .flight-bar-remote-panel, .view-surface, .create-step-card, .create-field-card),
#reservation-info-modal > .glass-panel,
#create-modal > .glass-panel,
#view-modal > .glass-panel,
#account-modal > .glass-panel,
#music-modal > .glass-panel,
#base-modal > .glass-panel{
    border:1px solid var(--ui-frame-line) !important;
    background:var(--ui-frame-fill) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.055), 0 12px 28px -18px rgba(0,0,0,.92) !important;
}

#ui-layer :is(button, [role="button"]):not(.mobile-drive-btn):not(.control-pad),
#reservation-info-modal button,
#create-modal button:not(.password-visibility-toggle),
#view-modal button:not(.password-visibility-toggle),
#account-modal button:not(.password-visibility-toggle),
#music-modal button,
#base-modal button{
    --ui-action-fill:var(--deep-2);
    --ui-action-line:rgba(231,178,92,.9);
    --ui-action-ink:var(--ink);
    border:1px solid transparent !important;
    border-radius:0 !important;
    clip-path:polygon(var(--ui-slit-cut) 0,100% 0,100% calc(100% - var(--ui-slit-cut)),calc(100% - var(--ui-slit-cut)) 100%,0 100%,0 var(--ui-slit-cut)) !important;
    background:linear-gradient(var(--ui-action-fill),var(--ui-action-fill)) padding-box,linear-gradient(var(--ui-action-line),var(--ui-action-line)) border-box !important;
    color:var(--ui-action-ink) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(0,0,0,.48), 0 0 8px -5px rgba(231,178,92,.78) !important;
    transition:background .18s var(--ease),color .18s var(--ease),box-shadow .18s var(--ease),filter .18s var(--ease),transform .12s var(--ease) !important;
}

#ui-layer :is(button, [role="button"]):not(.mobile-drive-btn):not(.control-pad):is(:hover,:focus-visible),
#reservation-info-modal button:is(:hover,:focus-visible),
#create-modal button:not(.password-visibility-toggle):is(:hover,:focus-visible),
#view-modal button:not(.password-visibility-toggle):is(:hover,:focus-visible),
#account-modal button:not(.password-visibility-toggle):is(:hover,:focus-visible),
#music-modal button:is(:hover,:focus-visible),
#base-modal button:is(:hover,:focus-visible){
    --ui-action-line:#fff0b0;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.32), 0 0 0 1px rgba(255,240,176,.42), 0 0 18px -3px rgba(231,178,92,.78) !important;
    filter:brightness(1.1) drop-shadow(0 0 5px rgba(231,178,92,.68));
    outline:none;
}

#ui-layer :is(button, [role="button"]):not(.mobile-drive-btn):not(.control-pad):active,
#reservation-info-modal button:active,
#create-modal button:not(.password-visibility-toggle):active,
#view-modal button:not(.password-visibility-toggle):active,
#account-modal button:not(.password-visibility-toggle):active,
#music-modal button:active,
#base-modal button:active{
    transform:translateY(1px) !important;
    filter:brightness(.96);
    box-shadow:inset 0 2px 5px rgba(0,0,0,.34) !important;
}

#ui-layer :is(button, [role="button"]):not(.mobile-drive-btn):not(.control-pad):is(.is-active,[aria-pressed="true"],[aria-selected="true"]),
#reservation-info-modal button:is(.is-active,[aria-pressed="true"],[aria-selected="true"]),
#create-modal button:not(.password-visibility-toggle):is(.is-active,[aria-pressed="true"],[aria-selected="true"]),
#view-modal button:not(.password-visibility-toggle):is(.is-active,[aria-pressed="true"],[aria-selected="true"]),
#account-modal button:not(.password-visibility-toggle):is(.is-active,[aria-pressed="true"],[aria-selected="true"]),
#music-modal button:is(.is-active,[aria-pressed="true"],[aria-selected="true"]),
#base-modal button:is(.is-active,[aria-pressed="true"],[aria-selected="true"]){
    --ui-action-fill:var(--gold);
    --ui-action-line:#f8d78a;
    --ui-action-ink:var(--void);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.4), inset 0 -1px 0 rgba(82,52,10,.38), 0 0 18px -4px var(--gold-focus) !important;
}

#ui-layer :is(button, [role="button"]):not(.mobile-drive-btn):not(.control-pad):disabled,
#reservation-info-modal button:disabled,
#create-modal button:not(.password-visibility-toggle):disabled,
#view-modal button:not(.password-visibility-toggle):disabled,
#account-modal button:not(.password-visibility-toggle):disabled,
#music-modal button:disabled,
#base-modal button:disabled{
    --ui-action-fill:rgba(16,26,48,.58);
    --ui-action-line:rgba(169,176,196,.18);
    --ui-action-ink:var(--ink-faint);
    cursor:not-allowed;
    filter:none;
    box-shadow:none !important;
}

/* Semantic action colors retain one silhouette and one interaction grammar. */
#hud-warp-go,
#create-login-cta-button,
#create-modal #btn-submit.create-submit-reserve,
#create-modal .create-step-cta,
#account-modal :is(#btn-account-login,#account-forgot-send,#account-reset-submit,#btn-account-save-settings),
#view-modal :is(#btn-recharge,#btn-view-base-apply),
#base-modal #btn-view-base-apply{
    --ui-action-fill:var(--gold) !important;
    --ui-action-line:#f8d78a !important;
    --ui-action-ink:var(--void) !important;
}

#account-modal :is(#btn-account-logout,#btn-account-delete),
#view-modal .view-state-badge--danger{
    --ui-action-fill:var(--err-bg) !important;
    --ui-action-line:var(--err-border) !important;
    --ui-action-ink:var(--err) !important;
}

/* Coordinates are informational; share is aligned with the flight action. */
#hud-brand-panel #coord-share-shell{ width:100%; min-width:0; }
#hud-brand-panel #coord-display{ min-width:0; }
#hud-brand-panel #hud-flight-actions{ min-height:32px; }
#hud-brand-panel #coord-share-btn{ flex:0 0 auto; }

/* Header controls are anchored to the modal chrome, never part of its flow. */
#create-modal .modal-close-btn,
#view-modal .modal-close-btn,
#base-modal .modal-close-btn,
#account-modal .modal-close-btn,
#reservation-info-modal .modal-close-btn{
    position:absolute !important;
    top:.5rem !important;
    right:.5rem !important;
    left:auto !important;
    z-index:5;
    width:2.5rem !important;
    min-width:2.5rem !important;
    height:2.5rem !important;
    min-height:2.5rem !important;
    padding:0 !important;
    --ui-action-line:#fff0b0;
    background:linear-gradient(var(--deep-2),var(--deep-2)) padding-box,linear-gradient(var(--ui-action-line),var(--ui-action-line)) border-box !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(0,0,0,.5), 0 0 14px -4px rgba(231,178,92,.9) !important;
}
#create-modal .modal-close-btn:hover,
#view-modal .modal-close-btn:hover,
#base-modal .modal-close-btn:hover,
#account-modal .modal-close-btn:hover,
#reservation-info-modal .modal-close-btn:hover{
    --ui-action-line:#fff8d4;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.38), inset 0 -1px 0 rgba(0,0,0,.34), 0 0 20px -2px rgba(231,178,92,.96) !important;
}

/* No clearance is needed: the confirmation action is no longer fixed. */
#create-modal #create-terms-block{ padding-bottom:0; }
@media (max-width:600px){
    body #create-modal #btn-submit{
        position:static !important;
        min-height:3.5rem !important;
        padding:.65rem .85rem !important;
        font-size:.72rem !important;
        line-height:1.22 !important;
        letter-spacing:.09em !important;
    }
}

/* Purchase confirmation: a single MSG panel rather than a stack of generic cards. */
.payment-confirmation-overlay{
    background:rgba(5,7,12,.84);
    backdrop-filter:blur(10px);
    isolation:isolate;
}
.payment-confirmation-card{
    width:min(100%,42rem);
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:var(--radius-soft);
    background:linear-gradient(180deg,rgba(16,26,48,.98),rgba(5,7,12,.98));
    box-shadow:0 28px 76px rgba(0,0,0,.64),0 0 0 1px rgba(231,178,92,.08);
    color:var(--ink);
}
.payment-confirmation-header{
    padding:2rem 2rem 1.7rem;
    text-align:center;
    border-bottom:1px solid var(--line);
    background:linear-gradient(135deg,rgba(231,178,92,.14),transparent 52%);
}
.payment-confirmation-mark{
    display:grid;
    place-items:center;
    width:3.5rem;
    height:3.5rem;
    margin:0 auto;
    border:1px solid var(--ok-border);
    border-radius:50%;
    background:var(--ok-bg);
    box-shadow:0 0 28px rgba(143,214,168,.16);
    color:var(--ok);
    font:700 1.55rem/1 var(--font-ui);
}
.payment-confirmation-kicker{
    margin:1rem 0 0;
    color:var(--gold);
    font:700 .7rem/1.3 var(--font-mono);
    letter-spacing:.12em;
    text-transform:uppercase;
}
.payment-confirmation-title{
    margin:.75rem 0 0;
    color:var(--ink);
    font:600 clamp(1.65rem,4vw,2.2rem)/1.08 var(--font-display);
    letter-spacing:0;
}
.payment-confirmation-intro{
    max-width:31rem;
    margin:.75rem auto 0;
    color:var(--ink-dim);
    font:400 .94rem/1.55 var(--font-ui);
}
.payment-confirmation-steps{ padding:.25rem 2rem; }
.payment-confirmation-step{
    display:grid;
    grid-template-columns:2.4rem minmax(0,1fr);
    gap:1rem;
    padding:1.3rem 0;
    border-bottom:1px solid var(--line-soft);
}
.payment-confirmation-step:last-child{ border-bottom:0; }
.payment-confirmation-step-number{
    padding-top:.15rem;
    color:var(--gold);
    font:700 .78rem/1.3 var(--font-mono);
}
.payment-confirmation-step h3{
    margin:0;
    color:var(--ink);
    font:600 .98rem/1.3 var(--font-ui);
}
.payment-confirmation-step p{
    margin:.35rem 0 0;
    color:var(--ink-dim);
    font:400 .88rem/1.5 var(--font-ui);
}
.payment-confirmation-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    padding:1.1rem 2rem;
    border-top:1px solid var(--line);
    background:rgba(5,7,12,.44);
}
.payment-confirmation-footer > p{
    max-width:22rem;
    margin:0;
    color:var(--ink-faint);
    font:400 .72rem/1.45 var(--font-ui);
}
.payment-confirmation-actions{ display:flex; flex-wrap:wrap; gap:.55rem; }
.payment-confirmation-actions button{
    min-height:2.5rem;
    padding:.55rem .85rem;
    border:1px solid var(--line);
    border-radius:var(--radius-soft);
    font:700 .75rem/1 var(--font-ui);
    letter-spacing:.04em;
    transition:filter .18s var(--ease),box-shadow .18s var(--ease);
}
.payment-confirmation-close{ background:var(--deep-2); color:var(--ink); }
.payment-confirmation-account{
    border-color:var(--gold) !important;
    background:var(--gold);
    color:var(--void);
    clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
}
.payment-confirmation-actions button:hover{ filter:brightness(1.1); }
.payment-confirmation-actions button:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
@media (max-width:600px){
    .payment-confirmation-header{ padding:1.6rem 1.25rem 1.4rem; }
    .payment-confirmation-steps{ padding:.2rem 1.25rem; }
    .payment-confirmation-footer{ align-items:stretch; flex-direction:column; padding:1rem 1.25rem; }
    .payment-confirmation-footer > p{ max-width:none; }
    .payment-confirmation-actions{ width:100%; }
    .payment-confirmation-actions button{ flex:1 1 0; }
}

/* Reservation flow: one compact surface geometry, no competing legacy radii. */
#create-modal > .glass-panel{
    --reservation-gutter:16px;
    box-sizing:border-box;
    padding:var(--reservation-gutter) !important;
    overflow-x:hidden;
}
#create-modal form,
#create-modal :is(.create-step-card,.create-field-card,.ui-note,#create-reservation-banner,#create-login-cta,#create-terms-block,#create-terms-coords){
    box-sizing:border-box;
    min-width:0;
    max-width:100%;
}
#create-modal :is(.ui-note,#create-reservation-banner,#create-login-cta,#create-terms-block,#create-terms-coords){
    border-radius:var(--radius-soft) !important;
}
#create-modal #create-login-cta{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    column-gap:12px;
    row-gap:10px;
}
#create-login-cta > :first-child{
    min-width:0;
    flex:1 1 auto;
    overflow-wrap:anywhere;
}
#create-login-cta > button{
    flex:0 0 auto;
    min-width:max-content;
}
#create-modal #create-submit-actions{
    margin-top:16px;
}
#create-modal #btn-submit{
    position:static !important;
    bottom:auto !important;
    z-index:auto;
    margin:0;
}
@media (max-width:360px){
    #create-login-cta{
        align-items:stretch;
        flex-direction:column;
    }
    #create-login-cta > button{ width:100%; }
}

/* Reservation layout contract: preserve these invariants at every viewport.
   1. The reading column has equal left/right gutters.
   2. Flow children fit that column; no child owns width beyond it.
   3. Actions share their row only when both labels remain readable.
   4. Structural surfaces use 4px corners; only dedicated circular controls differ. */
@media (max-width:600px){
    #create-modal > .glass-panel{
        --reservation-gutter:16px;
    }
    #create-modal :is(#create-form-shell,#create-step-flow,.create-step-card,.create-field-card,.ui-note,#create-reservation-banner,#create-login-cta,#create-terms-block,#create-terms-coords,#btn-submit){
        width:100%;
        max-width:100%;
        min-width:0;
        margin-left:0;
        margin-right:0;
    }
    #create-modal .create-step-card{ padding:0; }
    #create-modal .create-field-card{ padding:9px; }
}

/* Slit contour contract: the fill must sit inside a second, inset slit.
   A layered background is clipped only once and loses its diagonal border. */
:is(
    #ui-layer :is(button,[role="button"]):not(.mobile-drive-btn):not(.control-pad),
    #reservation-info-modal button,
    #create-modal button:not(.password-visibility-toggle),
    #view-modal button:not(.password-visibility-toggle),
    #account-modal button:not(.password-visibility-toggle),
    #music-modal button,
    #base-modal button
){
    isolation:isolate;
    background:var(--ui-action-line) !important;
}
:is(
    #ui-layer :is(button,[role="button"]):not(.mobile-drive-btn):not(.control-pad),
    #reservation-info-modal button,
    #create-modal button:not(.password-visibility-toggle),
    #view-modal button:not(.password-visibility-toggle),
    #account-modal button:not(.password-visibility-toggle),
    #music-modal button,
    #base-modal button
)::before{
    content:"";
    position:absolute;
    z-index:-1;
    inset:1px;
    clip-path:polygon(calc(var(--ui-slit-cut) - 1px) 0,100% 0,100% calc(100% - var(--ui-slit-cut) + 1px),calc(100% - var(--ui-slit-cut) + 1px) 100%,0 100%,0 calc(var(--ui-slit-cut) - 1px));
    background:var(--ui-action-fill);
    pointer-events:none;
}

/* Star-view contract: one reading grid, 4px structural surfaces, and no
   unbounded content. The close control is chrome, not a grid column. */
#view-modal #view-modal-border{
    box-sizing:border-box;
    overflow-x:hidden;
}
#view-modal .view-detail-header{
    grid-template-columns:44px minmax(0,1fr) !important;
    padding-right:52px;
}
#view-modal :is(.view-star-mark,.view-surface,.view-metric-card){
    box-sizing:border-box;
    min-width:0;
    max-width:100%;
    border-radius:var(--radius-soft) !important;
}
#view-modal :is(.view-feed-layout,.view-feed-main,.view-feed-aside,.view-essentials,.view-state-badges){
    min-width:0;
    max-width:100%;
}
#view-modal :is(.view-surface,.view-metric-card) :is(p,li,a,span){
    overflow-wrap:anywhere;
}
@media (max-width:640px){
    #view-modal #view-modal-border{ padding:16px !important; }
    #view-modal .view-detail-header{
        grid-template-columns:40px minmax(0,1fr) !important;
        padding-right:48px;
    }
}

/* Navigation controls retain the original blue navigation signal. This only
   changes color state; the shared slit geometry, dimensions, and spacing stay
   untouched. */
#ui-layer :is(
    #hud-language-trigger,
    #hud-music-btn,
    #hud-account-btn,
    #flight-bar-tab,
    #flight-bar .flight-bar-side-btn,
    #flight-bar .flight-ctrl-btn
){
    --ui-action-fill:rgba(8,22,42,.92) !important;
    --ui-action-line:rgba(20,57,91,.9) !important;
    --ui-action-ink:rgba(191,231,255,.92) !important;
    box-shadow:inset 0 1px 0 rgba(173,224,255,.07), inset 0 -1px 0 rgba(0,0,0,.54), 0 0 8px -5px rgba(14,65,104,.5) !important;
}

/* The navigation tab is part of the expanded bar, not a separate bordered button. */
#ui-layer #flight-bar-tab{
    border-radius:4px 4px 0 0 !important;
    border-bottom:0 !important;
    margin-bottom:-1px;
    background:linear-gradient(to bottom, rgba(8,22,42,.94) 0%, rgba(8,22,42,.88) 58%, rgba(6,16,32,.72) 100%) !important;
    box-shadow:none !important;
}
#ui-layer #flight-bar-tab:is(:hover,:focus-visible){ box-shadow:none !important; }
#flight-bar-btn-touch-forward{
    position:relative;
    display:flex;
}
#flight-bar-btn-touch-forward > .fa-rocket{
    color:rgba(191,231,255,.54);
    transition:color .14s ease, text-shadow .14s ease, transform .14s ease;
}
#ui-layer #flight-bar-btn-touch-forward.is-active{
    --ui-action-fill:rgba(11,62,99,.98) !important;
    --ui-action-line:rgba(125,211,252,.96) !important;
}
#ui-layer #flight-bar-btn-touch-forward.is-active > .fa-rocket{
    color:#dff8ff !important;
    text-shadow:0 0 5px rgba(125,211,252,.96), 0 0 12px rgba(0,156,255,.72);
}
#flight-bar-btn-touch-forward.is-active::after{
    content:'';
    position:absolute;
    left:12px;
    top:25px;
    width:7px;
    height:13px;
    transform:rotate(45deg);
    transform-origin:50% 0;
    border-radius:55% 55% 78% 78%;
    background:linear-gradient(180deg,#fff7d6 0%,#f8d78a 30%,#f28b3d 68%,rgba(242,139,61,0) 100%);
    box-shadow:0 0 5px rgba(248,215,138,.98), 0 0 9px rgba(242,137,61,.7);
    pointer-events:none;
    animation:flight-bar-thrust-flame .62s ease-in-out infinite alternate;
}
#ui-layer #flight-bar-btn-touch-forward.is-engaged{
    box-shadow:inset 0 1px 0 rgba(211,243,255,.25), inset 0 -1px 0 rgba(2,24,43,.5), 0 0 18px -3px rgba(0,156,255,.68) !important;
}
#ui-layer #flight-bar-btn-touch-forward.is-engaged > .fa-rocket{
    text-shadow:0 0 5px rgba(125,211,252,.96), 0 0 16px rgba(0,156,255,.98);
    transform:scale(1.12);
}
@keyframes flight-bar-thrust-flame{
    from{ transform:rotate(45deg) scaleY(.72); opacity:.72; }
    to{ transform:rotate(45deg) scaleY(1.08); opacity:1; }
}
.flight-bar-discovery-nudge #flight-bar-tab{
    animation:flight-bar-discovery-nudge .72s ease-in-out;
}
@keyframes flight-bar-discovery-nudge{
    0%,100%{ transform:translateY(0); }
    35%{ transform:translateY(-7px); }
    62%{ transform:translateY(2px); }
}
#ui-layer :is(
    #hud-language-trigger,
    #hud-music-btn,
    #hud-account-btn,
    #flight-bar-tab,
    #flight-bar .flight-bar-side-btn,
    #flight-bar .flight-ctrl-btn
):is(:hover,:focus-visible){
    --ui-action-fill:rgba(10,40,72,.96) !important;
    --ui-action-line:rgba(30,84,126,.94) !important;
    --ui-action-ink:#ffffff !important;
    box-shadow:inset 0 1px 0 rgba(211,243,255,.15), inset 0 -1px 0 rgba(0,0,0,.44), 0 0 13px -4px rgba(14,65,104,.48) !important;
    filter:brightness(1.03) drop-shadow(0 0 4px rgba(14,65,104,.45)) !important;
}
#ui-layer :is(
    #hud-language-trigger,
    #hud-music-btn,
    #hud-account-btn,
    #flight-bar-tab,
    #flight-bar .flight-bar-side-btn,
    #flight-bar .flight-ctrl-btn
):is(.is-active,[aria-pressed="true"],[aria-selected="true"]){
    --ui-action-fill:rgba(8,48,78,.98) !important;
    --ui-action-line:rgba(27,72,110,.94) !important;
    --ui-action-ink:#ffffff !important;
    box-shadow:inset 0 1px 0 rgba(196,232,255,.14), inset 0 -1px 0 rgba(2,24,43,.58), 0 0 11px -5px rgba(14,65,104,.48) !important;
}

/* The language chooser is content selection rather than flight navigation.
   Its compact tiles use the product's quiet night/gold selection language. */
#ui-layer #hud-language-menu .hud-language-option{
    position:relative;
    z-index:2;
    isolation:isolate;
    box-sizing:border-box;
    border:1px solid rgba(231,178,92,.42) !important;
    border-radius:8px !important;
    clip-path:none !important;
    overflow:hidden;
    background-clip:padding-box;
    background:rgba(8,13,26,.96) !important;
    color:var(--ink) !important;
    box-shadow:0 2px 8px -6px rgba(231,178,92,.62) !important;
}
#ui-layer #hud-language-menu .hud-language-option:is(:hover,:focus-visible){
    border-color:var(--gold) !important;
    background:rgba(28,25,30,.98) !important;
    color:#fff8e7 !important;
    box-shadow:0 4px 12px -6px var(--gold-focus) !important;
    filter:none !important;
}
#ui-layer #hud-language-menu .hud-language-option.is-active{
    border-color:rgba(231,178,92,.42) !important;
    background:rgba(8,13,26,.96) !important;
    color:var(--ink) !important;
    box-shadow:0 2px 8px -6px rgba(231,178,92,.62) !important;
}
#ui-layer #hud-language-menu .hud-language-option.is-active::after{
    content:'';
    position:absolute;
    top:5px;
    right:5px;
    width:7px;
    height:7px;
    border-radius:50%;
    background:#f8d78a;
    box-shadow:0 0 7px var(--gold-focus);
    pointer-events:none;
}

/* The menu is wider than its 44px trigger. Do not inherit the generic
   glass-panel max-width, which otherwise collapses its four-column grid. */
#ui-layer #hud-language-menu{
    width:198px;
    max-width:calc(100vw - 16px) !important;
}
@media (max-width:768px){
    #ui-layer #hud-language-menu{
        width:min(196px,calc(100vw - 24px));
    }
}

/* The floating claim CTA is a primary action; its ink must stay void-black
   even when the shared action normalizer applies its inherited text colour. */
#ui-layer #btn-create-star{
    --ui-action-fill:var(--gold) !important;
    --ui-action-line:#f8d78a !important;
    --ui-action-ink:var(--void) !important;
    color:var(--void) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.26), inset 0 -1px 0 rgba(82,52,10,.42), 0 0 18px -6px var(--gold-focus) !important;
}
#ui-layer #btn-create-star :is(i,span){ color:var(--void) !important; }
#ui-layer #btn-create-star:is(:hover,:focus-visible){
    --ui-action-fill:#f8d78a !important;
    --ui-action-line:#fff0b0 !important;
    --ui-action-ink:var(--void) !important;
    color:var(--void) !important;
    filter:none !important;
}

/* Star editor: legacy cyan utility classes and inline field styles are
   reduced to one readable hierarchy of night surfaces and gold affordances. */
#create-modal :is(#create-section-identity,#create-section-noyau,#create-section-message,#create-section-validation,#create-section-visuals,#create-section-payment,#content-privacy-panel,#create-terms-block){
    border-color:var(--ui-frame-line) !important;
}
#create-modal :is(#create-section-core-color,#create-section-premium-texture,#create-section-rings,#create-section-satellites,#content-privacy-panel,.noyau-media-section,.create-step-card,.create-field-card){
    background:rgba(16,26,48,.54) !important;
    border:1px solid var(--ui-frame-line) !important;
    border-radius:var(--radius-soft) !important;
    box-shadow:none !important;
}
#create-modal :is(input:not([type="checkbox"]):not([type="color"]),textarea,select){
    background:var(--deep-2) !important;
    border-color:rgba(231,178,92,.3) !important;
    border-radius:var(--radius-soft) !important;
    color:var(--ink) !important;
    box-shadow:none !important;
}
#create-modal :is(input:not([type="checkbox"]):not([type="color"]),textarea,select):focus{
    border-color:var(--gold) !important;
    box-shadow:0 0 0 1px var(--gold-focus) !important;
}
#create-modal :is([id^="lbl-"],.noyau-media-label){ color:var(--gold) !important; }
#create-modal :is(.noyau-media-hint,#char-count,.ui-note-text,#create-mode-helper,#content-privacy-body){ color:var(--ink-faint) !important; }
#create-modal .noyau-card{
    background:rgba(8,13,26,.74) !important;
    border:1px solid var(--ui-frame-line) !important;
    border-radius:var(--radius-soft) !important;
    box-shadow:none !important;
}
#create-modal .noyau-card:hover{
    background:rgba(28,25,30,.92) !important;
    border-color:rgba(231,178,92,.58) !important;
}
#create-modal .noyau-card.active{
    background:rgba(70,54,25,.64) !important;
    border-color:var(--gold) !important;
    box-shadow:inset 0 1px 0 rgba(255,247,220,.12), 0 0 12px -6px var(--gold-focus) !important;
}
#create-modal .noyau-card :is(.noyau-label,.noyau-card.active .noyau-label){ color:var(--ink-dim) !important; }
#create-modal .noyau-card.active .noyau-label{ color:#fff8e7 !important; }
#create-modal :is(#create-terms-coords,#create-public-preview,#create-step-final-card,#create-submit-feedback){
    background:rgba(16,26,48,.74) !important;
    border-color:rgba(231,178,92,.3) !important;
    border-radius:var(--radius-soft) !important;
    box-shadow:none !important;
}

/* Existing component rules set text colour directly, so active gold needs an
   explicit final colour rather than relying only on the shared variable. */
#btn-autopilot.is-active,
#reservation-info-modal button[aria-selected="true"],
#create-modal button[aria-selected="true"],
#view-modal button[aria-selected="true"],
#account-modal button[aria-selected="true"],
#music-modal button[aria-selected="true"],
#base-modal button[aria-selected="true"]{
    color:var(--void) !important;
}

/* Compact eye controls and circular mobile steering are intentionally exempt. */
#create-modal .password-visibility-toggle,
#view-modal .password-visibility-toggle,
#account-modal .password-visibility-toggle{
    clip-path:none !important;
    box-shadow:none !important;
}
