/* ═══════════════════════════════════════════════════════════════════════════
   LIGHTCONE · 50 — ÁLLANDÓ KRÓM  (a vonat írja, 2026-10-01)
   felső sáv · év-chip · fül-sín · user-sáv · fab-sor · cmd-panel · esemény-sáv ·
   verify-sáv · csillag-tipp · hover-tipp · egyértelműsítő · szűrő-panel ·
   címke-réteg + térkép-jelölők · preloader · pwa-kártya · útvonal-építő · csillagkép-építő.
   Minden szám tokenből. Id-ra nem célzunk. A z-index literálok a meglévő létra (contract §z).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── KÖZÖS DECK: a térkép fölött lebegő dobozok egy háttér, egy keret ─────── */
.top-bar, .year-chip, .event-banner, .verify-bar, .cmd-panel, .build-hud, .route-builder,
.starfilter-panel, .star-disambig-popover, .star-tooltip, .hover-tip, .pwa-install-card {
    background: var(--surface-deck);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border: var(--bw) solid var(--g-22); border-radius: var(--r);
    color: var(--text-base); font-size: var(--fs-body); letter-spacing: var(--ls-body); line-height: var(--lh);
    box-shadow: 0 0 0 1px rgba(0,0,0,.6), var(--glow-sm);
}

/* ── FELSŐ SÁV: cellák vízszintes paddinggal, cellák közt függőleges vonal ── */
.top-bar {
    position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: var(--z-chrome-top);   /* [mega-vonat 10-03 UI-17] a króm-létra tokenből (ebben a fájlban 10 helyen; az értékek változatlanok) */
    display: flex; align-items: stretch; max-width: calc(100% - 2 * var(--sec-gap)); overflow: hidden;
    white-space: nowrap; pointer-events: none;   /* a térkép-drag átmegy a sávon… */
}
.top-bar .top-cell {
    pointer-events: auto;                        /* …de a cella title-tippje él (2026-08-18 lecke) */
    display: flex; align-items: center; gap: var(--gap-s); flex: 0 1 auto; min-width: 0;   /* (mega-vonat ui #33) szűk ablakban a cella zsugorodik, ellipszissel, nem vágódik le némán */
    height: var(--ctl-h); padding: 0 var(--pad-x); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.top-bar .top-cell > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.top-bar .top-cell + .top-cell { border-left: var(--bw) solid var(--line); }
.top-bar .top-label { color: var(--text-muted); letter-spacing: var(--ls-head); }
.top-bar .top-year, .top-bar .top-stars, .top-bar .top-probes, .top-bar .top-atlas, .top-bar .top-pop,
.top-bar .top-output, .top-bar .top-knowledge, .top-bar .top-kardashev, .top-bar .cmd-count {
    color: var(--text-bright); font-variant-numeric: tabular-nums;
}
.top-bar .top-trend { line-height: 1; }
.top-bar .top-trend:empty { display: none; }
.top-bar .top-trend.up { color: var(--accent-bright); }
.top-bar .top-trend.flat { color: var(--text-dim); }
.top-bar .top-trend.down { color: var(--danger); }
/* a CMD-cella kapcsoló: kattintható, üresen halk */
.top-bar .top-cell--toggle { cursor: pointer; transition: background .12s; }
.top-bar .top-cell--toggle:hover { background: var(--g-08); }
.top-bar .top-cell--toggle.is-off .top-label,
.top-bar .top-cell--toggle.is-off .cmd-count { color: var(--text-dim); }
@media (max-width: 1500px) { .top-bar .top-cell { padding: 0 var(--pad-x-s); } }

/* ── ÉV-CHIP: a modálok órája (nyílt égen a sáv Y-cellája beszél) — a JS írja a right-ot ── */
.year-chip {
    position: fixed; top: 14px; right: 92px; z-index: calc(var(--z-toast) + 300);
    display: none; align-items: center; gap: var(--gap-s);
    height: calc(var(--ctl-h) + 2 * var(--bw)); padding: 0 var(--pad-x);
    color: var(--text-bright); font-variant-numeric: tabular-nums; pointer-events: auto; user-select: none;
}
.year-chip .top-label { color: var(--text-muted); letter-spacing: var(--ls-head); }
body:has(.system-modal:not(.hidden)) .year-chip, body:has(.planet-modal:not(.hidden)) .year-chip,
body:has(.missions-modal:not(.hidden)) .year-chip, body:has(.atlas-modal:not(.hidden)) .year-chip,
body:has(.fleet-modal:not(.hidden)) .year-chip, body:has(.seti-modal:not(.hidden)) .year-chip,
body:has(.realm-modal:not(.hidden)) .year-chip, body:has(.bridge-modal:not(.hidden)) .year-chip,
body:has(.detail-modal:not(.hidden)) .year-chip { display: flex; }

/* ── USER-SÁV: a név (széles kijelzőn) + a ⏻ ikon-gomb, a sáv magasságán ── */
.user-bar {
    position: absolute; top: 14px; right: 16px; z-index: var(--z-chrome-bar);
    display: flex; align-items: center; gap: var(--gap);
    height: calc(var(--ctl-h) + 2 * var(--bw)); white-space: nowrap;
}
.user-badge { color: var(--text-muted); max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
body.is-supporter .user-badge::before { content: "⟡ "; color: var(--gold); }
body.is-patron .user-badge::before { content: "★︎ "; color: var(--gold); }
.user-badges { margin-left: var(--gap-s); color: var(--amber); letter-spacing: var(--ls-head); }
.user-badge-glyph { cursor: help; }
@media (max-width: 1540px) { .user-badge { display: none; } }
/* ⏻ = .btn--icon + .btn--danger */
.logout-btn {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 var(--ctl-h);
    width: var(--ctl-h); height: var(--ctl-h); padding: 0; line-height: 1; font-size: var(--fs-body);
    color: var(--danger); background: rgba(255,77,77,.06);
    border: var(--bw) solid rgba(255,77,77,.45); border-radius: var(--r); cursor: pointer;
}
.logout-btn:hover { background: rgba(255,77,77,.12); border-color: var(--danger); color: var(--danger-bright); }

/* ── FÜL-SÍN: navigációs króm. Egyforma négyzet-gombok, glif + címke, egy méret ── */
.tab-rail {
    display: flex; flex-direction: column; align-items: center; gap: var(--gap-s);
    padding: var(--pad-y) 0; min-height: 0; overflow-y: auto; scrollbar-width: none;
    background: var(--bg-base); border-left: var(--bw) solid var(--line); border-right: var(--bw) solid var(--line);
}
.tab-rail::-webkit-scrollbar { display: none; }
.rail-btn {
    position: relative; flex: 0 0 auto;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--gap-s);
    width: calc(var(--ctl-h) * 2); height: calc(var(--ctl-h) * 2); padding: 0 var(--gap-s);
    color: var(--text-muted); background: transparent;
    border: var(--bw) solid transparent; border-radius: var(--r);
    cursor: pointer; transition: color .12s, background .12s, border-color .12s;
}
.rail-btn .rail-glyph { font-size: var(--fs-title); line-height: 1; }
.rail-btn .rail-label { font-size: var(--fs-btn); letter-spacing: var(--ls-btn); line-height: 1; white-space: nowrap; }
.rail-btn:hover { color: var(--accent-bright); background: var(--g-06); border-color: var(--g-14); }
.rail-btn.active { color: var(--text-bright); background: var(--g-12); border-color: var(--g-30); }
.rail-btn.active::before {
    content: ""; position: absolute; left: calc(-1 * var(--bw)); top: var(--pad-y); bottom: var(--pad-y);
    width: 2px; background: var(--accent); box-shadow: var(--glow-sm);
}
/* a logó: ugyanaz a négyzet, alatta vízszintes vonal választ el a fülektől */
.rail-btn.rail-logo { color: var(--accent); margin-bottom: var(--gap); }
.rail-btn.rail-logo::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: calc(-1 * (var(--gap) + var(--gap-s)) / 2 - var(--bw));
    border-top: var(--bw) solid var(--line);
}
.rail-btn.rail-logo svg { width: 26px; height: 26px; filter: drop-shadow(var(--glow-sm)); }
.rail-btn.rail-logo:hover { color: var(--accent-bright); }
/* számláló-jelvény a sarokban (.chip--count a teli zöldön) */
.rail-btn .rail-badge {
    position: absolute; top: 2px; right: 2px;
    display: inline-flex; align-items: center; justify-content: center;
    min-width: var(--badge-h); height: var(--badge-h); padding: 0 var(--gap-s);   /* [mega-vonat 10-03 UI-15] EGY számláló-jelvény méret (--badge-h) */
    font-size: var(--fs-btn); font-weight: var(--fw-bold); line-height: 1; font-variant-numeric: tabular-nums;
    color: var(--bg-base); background: var(--accent); border-radius: var(--r); box-shadow: var(--glow-sm);
}
.rail-btn .rail-badge.hidden { display: none; }
.rail-btn .rail-badge.fresh { animation: chrome-badge-pulse .9s ease-in-out 0s 3; }
.rail-btn--alert::after {
    content: ""; position: absolute; top: var(--gap-s); right: var(--gap-s);
    width: 6px; height: 6px; border-radius: 50%; background: var(--amber); box-shadow: var(--glow-amber);
}

/* ── FAB-SOR: a térkép alján, egy sorban, a .btn recept geometriája ─────── */
.fab-cluster {
    position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: var(--z-chrome-fab);
    display: flex; align-items: center; gap: var(--gap); flex-wrap: nowrap;
}
.fab-pill {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--gap-s); flex: 0 0 auto;
    height: var(--ctl-h); padding: 0 var(--ctl-pad-x);
    font-size: var(--fs-btn); font-weight: 500; letter-spacing: var(--ls-btn); line-height: 1; white-space: nowrap;
    color: var(--accent); background: var(--surface-deck);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border: var(--bw) solid var(--g-30); border-radius: var(--r);
    cursor: pointer; user-select: none; text-decoration: none;
    transition: background .12s, border-color .12s, color .12s;
}
.fab-pill .fab-icon { font-size: var(--fs-body); line-height: 1; }
.fab-pill:hover { background: var(--g-12); border-color: var(--surface-edge-strong); color: var(--accent-bright); }
.fab-pill.is-active { background: var(--g-18); border-color: var(--accent); color: var(--text-bright); box-shadow: var(--glow-sm); }
.fab-pill.is-off { color: var(--text-muted); border-color: var(--g-14); }


/* a súgó: borostyán (= figyelem) — a sor vége */
.fab-pill--guide { color: var(--amber); border-color: rgba(251,191,36,.45); background: var(--surface-deck); }
.fab-pill--guide:hover { color: var(--amber); border-color: var(--amber); background: rgba(251,191,36,.12); }
.fab-pill--guide.fg-btn-nudge { animation: chrome-amber-pulse 2.2s ease-in-out 3; }
/* a szűrő találat-száma a ⧉ FT gombban */
.starfilter-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: var(--badge-h); height: var(--badge-h); padding: 0 var(--gap-s); margin-left: var(--gap-s);   /* [UI-15] --badge-h */
    font-size: var(--fs-btn); font-weight: var(--fw-bold); line-height: 1; font-variant-numeric: tabular-nums;
    color: var(--bg-base); background: var(--accent); border-radius: var(--r);
}
.starfilter-badge.hidden { display: none; }

/* ── a régi #hud (rejtve; a horgok élnek) ── */
.hud { position: absolute; top: 64px; left: 16px; z-index: var(--z-chrome-hud); padding: var(--pad-y) var(--pad-x); pointer-events: none; }
.hud-label { color: var(--text-muted); margin-right: var(--gap-s); letter-spacing: var(--ls-head); }





/* ── CMD-PANEL: úton lévő parancsok — panel-fej, sorok vonallal ─────────── */
.cmd-panel {
    position: absolute; top: 60px; left: 50%; transform: translateX(-50%); z-index: var(--z-chrome-cmd);
    display: flex; flex-direction: column; width: 400px; max-width: calc(100% - 2 * var(--sec-gap)); max-height: 60vh; overflow: hidden;
}
.cmd-panel.hidden { display: none; }
.cmd-panel-header, .build-hud-header, .route-builder-header, .sf-head, .star-disambig-popover .disambig-header {
    display: flex; align-items: center; gap: var(--gap); flex: none;
    min-height: calc(var(--ctl-h) + 2 * var(--pad-y)); padding: 0 var(--pad-x);
    font-weight: var(--fw-bold); letter-spacing: var(--ls-head); color: var(--text-bright); white-space: nowrap;
    border-bottom: var(--bw) solid var(--line-strong); background: var(--g-04);
}
.cmd-panel-header + div { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.cmd-panel-row {
    display: flex; flex-direction: column; gap: var(--gap-s);
    padding: var(--pad-y) var(--pad-x); border-top: var(--bw) solid var(--g-08); cursor: pointer;
}
.cmd-panel-row:first-child { border-top: 0; }
.cmd-panel-row:hover { background: var(--g-06); }
.cmd-panel-row .cpr-line1, .cmd-panel-row .cpr-line2 { display: flex; justify-content: space-between; align-items: baseline; gap: var(--gap-l); min-width: 0; white-space: nowrap; }
.cmd-panel-row .cpr-type { color: var(--accent); font-weight: var(--fw-bold); letter-spacing: var(--ls-head); }
.cmd-panel-row .cpr-probe { color: var(--text-bright); overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cmd-panel-row .cpr-line2 { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.cmd-panel-row .cpr-eta { color: var(--text-base); }
.cmd-panel-empty, .build-hud-empty { padding: var(--pad-y) var(--pad-x); color: var(--text-muted); }

/* ── ESEMÉNY-SÁV és VERIFY-SÁV: csík (border-left) + padding a csík és a szöveg közt ── */
.event-banner, .verify-bar {
    position: absolute; left: 50%; transform: translateX(-50%);
    display: flex; align-items: center; gap: var(--gap-l);
    max-width: min(720px, calc(100% - 2 * var(--sec-gap))); padding: var(--pad-y) var(--pad-x);
}
.event-banner {
    top: 60px; z-index: var(--z-chrome-bar); cursor: pointer;
    border-left: 2px solid var(--accent); color: var(--text-bright);
    animation: chrome-glow-pulse 1.4s ease-in-out infinite;
}
.event-banner.hidden, .verify-bar.hidden { display: none; }
.event-banner:hover { background: var(--surface-2); }
.event-banner .banner-prefix { color: var(--accent); font-weight: var(--fw-bold); letter-spacing: var(--ls-head); white-space: nowrap; flex: none; }
.event-banner .event-banner-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.verify-bar { top: 104px; z-index: var(--z-chrome-verify); border-left: 2px solid var(--amber); color: var(--amber); }
.verify-bar .verify-bar-text { flex: 1 1 auto; min-width: 0; }
/* a „resend" = .btn--amber */
.verify-bar button:not(.verify-bar-close) {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    height: var(--ctl-h); padding: 0 var(--ctl-pad-x);
    font-size: var(--fs-btn); letter-spacing: var(--ls-btn); line-height: 1; white-space: nowrap;
    color: var(--amber); background: rgba(251,191,36,.06);
    border: var(--bw) solid rgba(251,191,36,.45); border-radius: var(--r); cursor: pointer;
}
.verify-bar button:not(.verify-bar-close):hover { background: rgba(251,191,36,.12); border-color: var(--amber); }
.verify-bar button:disabled { opacity: .45; cursor: default; }

/* ── A KRÓM IKON-GOMBJAI (×): .btn--icon + .btn--quiet ─────────────────── */
.event-banner .event-banner-close, .verify-bar .verify-bar-close, .build-hud-cancel, .sf-close {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 var(--ctl-h);
    width: var(--ctl-h); height: var(--ctl-h); padding: 0; margin: 0 0 0 auto; line-height: 1;
    font-size: var(--fs-body); color: var(--text-muted); background: transparent;
    border: var(--bw) solid var(--g-14); border-radius: var(--r); cursor: pointer;
}
.event-banner .event-banner-close:hover, .verify-bar .verify-bar-close:hover, .build-hud-cancel:hover, .sf-close:hover {
    color: var(--accent-bright); background: var(--g-08); border-color: var(--surface-edge-strong);
}

/* ── CSILLAG-TIPP (térkép-hover) és HOVER-TIPP (data-tip) ───────────────── */
.star-tooltip {
    position: absolute; z-index: var(--z-chrome-hud); pointer-events: none; white-space: nowrap;
    padding: var(--pad-y) var(--pad-x); transform: translate(12px, -50%);
}
.star-tooltip b { color: var(--text-bright); }
.star-tooltip small { color: var(--text-muted); }
/* mérhető rejtve: opacity + visibility, NEM display:none (contract §7) */
.hover-tip {
    position: fixed; top: 0; left: 0; z-index: var(--z-tip); pointer-events: none;
    max-width: 260px; padding: var(--pad-y) var(--pad-x); color: var(--text-muted);
    text-transform: none;   /* (mega-vonat ui #7) a JS nagybetűsít (upperKeepGreek): a c és a görög marad */
    opacity: 0; visibility: hidden; transition: opacity .12s ease;
}
.hover-tip.visible { opacity: 1; visibility: visible; }

/* ── EGYÉRTELMŰSÍTŐ: több csillag egy ponton ───────────────────────────── */
.star-disambig-popover { position: fixed; z-index: var(--z-sticky); min-width: 220px; max-width: 320px; overflow: hidden; }
.star-disambig-list { max-height: 240px; overflow-y: auto; }
.star-disambig-list > li { padding: var(--pad-y) var(--pad-x); border-top: var(--bw) solid var(--g-08); cursor: pointer; }
.star-disambig-list > li:first-child { border-top: 0; }
.star-disambig-list > li:hover { background: var(--g-06); }
.star-disambig-list .star-name { color: var(--text-bright); }
.star-disambig-list .star-meta { color: var(--text-muted); }
.star-disambig-list .disambig-more { cursor: default; color: var(--text-muted); }
.star-disambig-list .disambig-more:hover { background: transparent; }
.disambig-footer { padding: var(--pad-y) var(--pad-x); color: var(--text-muted); border-top: var(--bw) solid var(--line); }

/* ── CSILLAG-SZŰRŐ panel: fej · csoportok (alcím + pipa-sorok) · presetek ── */
.starfilter-panel {
    position: absolute; left: 18px; bottom: 60px; z-index: var(--z-chrome-filter);
    width: 300px; max-height: min(62vh, 560px); overflow-y: auto;
}
.starfilter-panel.hidden { display: none; }
.sf-head { position: sticky; top: 0; z-index: 2; background: var(--surface-deck); }
.sf-head .sf-union { margin-left: auto; color: var(--text-muted); font-weight: 400; letter-spacing: var(--ls-body); overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sf-head .sf-union + .sf-close { margin-left: 0; }
.sf-body { display: flex; flex-direction: column; }
.sf-group { padding: var(--pad-y) var(--pad-x); border-top: var(--bw) solid var(--line); }
.sf-group:first-child { border-top: 0; }
.sf-group-h { display: flex; align-items: center; min-height: var(--row-h); font-weight: var(--fw-bold); letter-spacing: var(--ls-head); color: var(--text-bright); }
.sf-items { display: flex; flex-direction: column; }
.sf-item {
    display: flex; align-items: center; gap: var(--gap); min-height: var(--ctl-h); padding: 0 var(--pad-x-s);
    border-radius: var(--r); cursor: pointer; color: var(--text-base); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sf-item:hover { background: var(--g-06); }
.sf-item.on { color: var(--text-bright); background: var(--g-08); }
.sf-item input { width: 12px; height: 12px; margin: 0; flex: none; accent-color: var(--accent); }
.sf-swatch { width: 10px; height: 10px; border-radius: var(--r); display: inline-block; flex: none; }
.sf-presets { padding: var(--pad-y) var(--pad-x) var(--pad-x); border-top: var(--bw) solid var(--line); }
.sf-preset-row { display: flex; flex-wrap: wrap; gap: var(--gap-s); margin-bottom: var(--gap); }
/* preset = .chip (gomb) */
.sf-preset {
    display: inline-flex; align-items: center; gap: var(--gap-s); height: var(--chip-h); padding: 0 var(--pad-x-s);   /* [mega-vonat 10-03 UI-15] tokenből */
    font-size: var(--fs-btn); letter-spacing: var(--ls-btn); line-height: 1; white-space: nowrap;
    color: var(--accent); background: var(--g-06); border: var(--bw) solid var(--g-18); border-radius: var(--r); cursor: pointer;
}
.sf-preset:hover { color: var(--accent-bright); border-color: var(--surface-edge-strong); }
.sf-preset-x { color: var(--text-dim); padding-left: var(--gap-s); }
.sf-preset-x:hover { color: var(--danger-bright); }
.sf-empty { color: var(--text-muted); }
.sf-preset-actions, .sf-save-row { display: flex; align-items: center; gap: var(--gap); }
.sf-save-row { margin-top: var(--gap); }
.sf-save-row.hidden { display: none; }
/* gombok: .sf-btn = .btn--primary, .sf-btn--ghost = .btn */
.sf-btn {
    display: inline-flex; align-items: center; justify-content: center; flex: 1 1 0; min-width: 0;
    height: var(--ctl-h); padding: 0 var(--ctl-pad-x);
    font-size: var(--fs-btn); letter-spacing: var(--ls-btn); line-height: 1; white-space: nowrap;
    color: var(--text-bright); background: var(--g-16); border: var(--bw) solid var(--accent); border-radius: var(--r); cursor: pointer;
}
.sf-btn:hover { background: var(--g-22); }
.sf-btn--ghost { color: var(--accent); background: var(--g-06); border-color: var(--g-30); }
.sf-btn--ghost:hover { color: var(--accent-bright); background: var(--g-12); border-color: var(--surface-edge-strong); }
.sf-save-input {
    flex: 1 1 auto; min-width: 0; height: var(--ctl-h); padding: 0 var(--ctl-pad-x);
    font-size: var(--fs-body); color: var(--text-bright); background: var(--g-04);
    border: var(--bw) solid var(--g-22); border-radius: var(--r);
}
.sf-save-input:focus { border-color: var(--accent); background: var(--g-06); }
.sf-save-input::placeholder { color: var(--text-dim); }

/* ── CÍMKE-RÉTEG és TÉRKÉP-JELÖLŐK. A transformot a CSS2DRenderer írja inline — itt SOHA. ── */
.map-container { position: relative; overflow: hidden; background: radial-gradient(ellipse at center, var(--bg-base) 0%, var(--bg-deep) 80%); }
.star-canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.label-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
.star-label {
    color: rgba(51,255,102,.75); font-size: var(--fs-body); font-weight: 500; letter-spacing: var(--ls-body);
    white-space: nowrap; pointer-events: none; transition: opacity .15s ease;
    text-shadow: 0 0 4px rgba(0,0,0,.9), 0 0 8px rgba(0,0,0,.6);
}
.star-label.is-named { color: var(--text-bright); font-weight: 600; }
.star-label.is-home { color: var(--accent); font-weight: var(--fw-bold); letter-spacing: var(--ls-head); }
.star-label.is-bayer { color: rgba(150,200,165,.78); }
.star-label.is-rogue { color: var(--fromdark-text); font-style: italic; }
.star-label.has-hz-candidate { color: var(--text-bright); }
.star-label.has-hz-candidate::first-letter { color: var(--accent); }
.star-label.has-prime-site, .star-label.has-ruins, .star-label.has-colony, .star-label.has-installation { color: var(--text-bright); }
.star-label.has-prime-site::first-letter { color: var(--gold-prime); }
.star-label.has-ruins::first-letter { color: var(--bronze-ruins); }
.star-label.has-colony::first-letter { color: var(--accent-bright); }
.star-label.has-installation::first-letter { color: var(--accent); }
.star-label.is-fleet-target { color: var(--text-base); }
.star-label.is-fleet-target::first-letter { color: var(--info); }
.user-constellation-label {
    color: var(--gold); font-size: var(--fs-body); letter-spacing: var(--ls-head); font-style: italic;
    opacity: .85; pointer-events: none; white-space: nowrap;
}
.seti-map-marker {
    /* SETI-kapcsolat jelölő a térképen: halk halo, nem gyűrű (Peter 2026-10-02: „inkább valami kis plusz halóval operáljunk") */
    width: 26px; height: 26px; border: 0; border-radius: 50%;
    background: radial-gradient(circle, rgba(51, 255, 102, .30) 0%, rgba(51, 255, 102, .10) 45%, transparent 70%);
    box-shadow: none; pointer-events: none; animation: chrome-fade-pulse 2.6s ease-in-out infinite;
}
.build-select-ring {
    width: var(--ctl-h); height: var(--ctl-h); border: 2px solid var(--gold); border-radius: 50%;
    box-shadow: var(--glow-gold); pointer-events: none; animation: chrome-fade-pulse 1.4s ease-in-out infinite;
}
.berserker-map-marker { color: var(--danger); font-size: var(--fs-title); pointer-events: auto; cursor: help; animation: chrome-fade-pulse 2.5s ease-in-out infinite; }
.star-flag-marker { color: var(--danger); font-size: var(--fs-title); line-height: 1; white-space: nowrap; pointer-events: auto; cursor: pointer; }
.star-flag-g { position: relative; left: -30px; display: inline-block; }   /* a CSS2D transformja mellett: eltolás belső elemen */
.star-flag-auto { margin-left: 3px; }
.star-flag-auto--amber { color: var(--amber); }
.star-flag-auto--danger { color: var(--danger); }
/* ⚑︎ HELD · ⟐ THE SEAT · ⛒ — 3D-térkép jelölők (2026-10-02): a felirat belső elemen tolva, hogy a csillagmag szabad maradjon */
.garrison-map-marker { color: var(--accent); font-size: var(--fs-body); line-height: 1; white-space: nowrap; pointer-events: auto; cursor: pointer; text-shadow: var(--glow-sm); }
.garrison-map-g { position: relative; top: -18px; display: inline-block; }
.seat-map-marker { color: var(--amber); font-size: var(--fs-body); line-height: 1; white-space: nowrap; pointer-events: auto; cursor: pointer; }
.seat-map-g { position: relative; top: -16px; display: inline-block; }
.interdict-map-marker { color: var(--danger); font-size: var(--fs-body); line-height: 1; opacity: .7; pointer-events: auto; cursor: pointer; }

/* ── PRELOADER: a szertartás-kivétel (kánon) — a címet a főcím-tokenből szorozzuk ── */
.preloader { display: flex; align-items: center; justify-content: center; transition: opacity .55s ease-out; }
.preloader.preloader-hidden { opacity: 0; pointer-events: none; }
.preloader-inner { display: flex; flex-direction: column; align-items: center; gap: calc(var(--sec-gap) * 2); }
.preloader-title {
    font-size: calc(var(--fs-title) * 3); font-weight: var(--fw-bold); letter-spacing: .55em; padding-left: .55em;
    color: var(--accent); text-shadow: var(--glow-lg); animation: chrome-fade-pulse 2.6s ease-in-out infinite;
}
.preloader-scanbox {
    position: relative; width: 360px; max-width: 80vw; padding: var(--pad-y) var(--pad-x); text-align: center; overflow: hidden;
    background: var(--surface-deck); border: var(--bw) solid var(--g-22); border-radius: var(--r);
}
.preloader-sweep {
    position: absolute; top: 0; left: -45%; width: 45%; height: 100%;
    background: linear-gradient(90deg, transparent, var(--g-16), transparent); animation: chrome-sweep 1.5s linear infinite;
}
.preloader .scan-line { position: relative; z-index: 1; color: var(--accent); letter-spacing: var(--ls-head); }
.preloader .scan-line.scan-complete { color: var(--accent-bright); }

/* ── PWA-KÁRTYA: csak mobilon, ha nem rejtett (a JS offsetParent-tel nem mér rá: fix marad) ── */
.pwa-install-card { display: none; }
.pwa-install-card.hidden { display: none !important; }   /* a .hidden törvény ismétlése — a lenti :not(.hidden) mellett */
.pwa-install-text { color: var(--text-base); }
.pwa-install-acts { display: flex; justify-content: flex-end; gap: var(--gap); margin-top: var(--gap-l); }
.pwa-install-acts button {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    height: var(--ctl-h); padding: 0 var(--ctl-pad-x);
    font-size: var(--fs-btn); letter-spacing: var(--ls-btn); line-height: 1; white-space: nowrap;
    color: var(--accent); background: var(--g-06); border: var(--bw) solid var(--g-30); border-radius: var(--r); cursor: pointer;
}
.pwa-install-later { color: var(--text-muted); background: transparent; border-color: var(--g-14); }
.pwa-install-go { color: var(--text-bright); background: var(--g-16); border-color: var(--accent); box-shadow: var(--glow-sm); }

/* ── ÚTVONAL-ÉPÍTŐ: fej · lábak · állapot · telemetria-pipa · név · gombsor ── */
.route-builder {
    position: fixed; top: 14px; left: 16px; z-index: var(--z-shell);
    display: flex; flex-direction: column; width: 300px; max-width: calc(100vw - 32px); overflow: hidden;
    border-color: var(--g-30);
}
body.dock-open .route-builder { left: calc(var(--dock-w) + 16px); }
body.dock-narrow .route-builder { left: 316px; }
.route-builder-list { padding: var(--gap-s) var(--pad-x); max-height: 240px; overflow-y: auto; }
.route-builder-list .rb-leg { display: flex; align-items: center; gap: var(--gap); min-height: var(--row-h); }
.route-builder-list .rb-leg + .rb-leg { border-top: var(--bw) solid var(--g-08); }
.route-builder-list .rb-leg-n { color: var(--text-muted); min-width: 14px; font-variant-numeric: tabular-nums; }
.route-builder-list .rb-leg-name { flex: 1 1 auto; min-width: 0; color: var(--text-bright); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.route-builder-list .rb-leg-d { color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.route-builder-list .rb-leg-ops { display: flex; gap: var(--gap-s); flex: none; }
/* ▲ ▼ × = .btn--icon + .btn--quiet */
.route-builder-list .rb-op {
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--ctl-h); height: var(--ctl-h); padding: 0; line-height: 1; font-size: var(--fs-btn);
    color: var(--text-muted); background: transparent; border: var(--bw) solid var(--g-14); border-radius: var(--r); cursor: pointer;
}
.route-builder-list .rb-op:hover:not(:disabled) { color: var(--accent-bright); border-color: var(--surface-edge-strong); background: var(--g-08); }
.route-builder-list .rb-op--x:hover:not(:disabled) { color: var(--amber); border-color: var(--amber); }
.route-builder-list .rb-op:disabled { opacity: .3; cursor: default; }
/* az állapot-sor osztályát a JS lecseréli (muted/error/success) — a lista utáni testvérként célzunk */
.route-builder-list + div { padding: var(--gap-s) var(--pad-x); min-height: var(--row-h); }
.route-builder .error { color: var(--danger); }
.route-builder .success { color: var(--accent-bright); }
/* telemetria-pipa = .check; név = .ctl */
.route-builder .probe-instrumented-toggle {
    display: flex; align-items: center; gap: var(--gap); min-height: var(--ctl-h); margin: 0 var(--pad-x);
    color: var(--text-muted); cursor: pointer; user-select: none;
}
.route-builder .probe-instrumented-toggle:has(input:checked) { color: var(--text-bright); }
.route-builder .probe-instrumented-toggle input { width: 12px; height: 12px; margin: 0; flex: none; accent-color: var(--accent); }
.route-builder .probe-name-input {
    display: flex; width: calc(100% - 2 * var(--pad-x)); margin: var(--gap-s) var(--pad-x) var(--pad-y);
    height: var(--ctl-h); padding: 0 var(--ctl-pad-x); min-width: 0;
    font-size: var(--fs-body); color: var(--text-bright); background: var(--g-04);
    border: var(--bw) solid var(--g-22); border-radius: var(--r);
}
.route-builder .probe-name-input:focus { border-color: var(--accent); background: var(--g-06); }
.route-builder .probe-name-input::placeholder { color: var(--text-dim); }
.route-builder-actions { display: flex; gap: var(--gap); padding: var(--pad-y) var(--pad-x); border-top: var(--bw) solid var(--line-strong); background: var(--g-04); }
.route-builder-actions > button {
    display: inline-flex; align-items: center; justify-content: center; flex: 1 1 0; min-width: 0;
    height: var(--ctl-h); padding: 0 var(--ctl-pad-x);
    font-size: var(--fs-btn); letter-spacing: var(--ls-btn); line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    color: var(--accent); background: var(--g-06); border: var(--bw) solid var(--g-30); border-radius: var(--r); cursor: pointer;
}
.route-builder-actions > button:hover:not(:disabled) { color: var(--accent-bright); background: var(--g-12); border-color: var(--surface-edge-strong); }
.route-builder-actions > button:first-child { color: var(--text-bright); background: var(--g-16); border-color: var(--accent); box-shadow: var(--glow-sm); }   /* LAUNCH = .btn--primary */
.route-builder-actions > button:disabled { opacity: .45; cursor: default; box-shadow: none; }

/* ── CSILLAGKÉP-ÉPÍTŐ ───────────────────────────────────────────────────── */
.build-hud {
    position: absolute; top: 60px; left: 50%; transform: translateX(-50%); z-index: var(--z-chrome-build);
    display: flex; flex-direction: column; width: 340px; max-width: calc(100% - 2 * var(--sec-gap)); max-height: calc(100vh - 240px); overflow: hidden;
    border-color: var(--g-30);
}
.build-hud-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.build-hud-hint { padding: var(--pad-y) var(--pad-x); color: var(--text-muted); }
.build-hud-list { flex: 1 1 auto; min-height: 0; max-height: 240px; overflow-y: auto; padding: 0 var(--pad-x); }
.build-hud-list > li { display: flex; align-items: center; gap: var(--gap); min-height: var(--row-h); border-top: var(--bw) solid var(--g-08); }
.build-hud-list > li:first-child { border-top: 0; }
.build-hud-list .rank { color: var(--text-muted); min-width: 18px; font-variant-numeric: tabular-nums; }
.build-hud-list .name { flex: 1 1 auto; min-width: 0; color: var(--text-bright); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.build-hud-list .remove {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: var(--ctl-h); height: var(--ctl-h); padding: 0; line-height: 1; font-size: var(--fs-body);
    color: var(--text-muted); background: transparent; border: var(--bw) solid var(--g-14); border-radius: var(--r); cursor: pointer;
}
.build-hud-list .remove:hover { color: var(--danger-bright); border-color: var(--danger); }
.build-hud-list > .build-hud-empty { border-top: 0; padding: 0; }
.build-hud-actions { display: flex; align-items: center; gap: var(--gap); padding: var(--pad-y) var(--pad-x); border-top: var(--bw) solid var(--line-strong); background: var(--g-04); }
.build-hud-name {
    flex: 1 1 auto; min-width: 0; height: var(--ctl-h); padding: 0 var(--ctl-pad-x);
    font-size: var(--fs-body); color: var(--text-bright); background: var(--g-04);
    border: var(--bw) solid var(--g-22); border-radius: var(--r);
}
.build-hud-name:focus { border-color: var(--accent); background: var(--g-06); }
.build-hud-name::placeholder { color: var(--text-dim); }
.build-hud-save {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    height: var(--ctl-h); padding: 0 var(--ctl-pad-x);
    font-size: var(--fs-btn); letter-spacing: var(--ls-btn); line-height: 1; white-space: nowrap;
    color: var(--text-bright); background: var(--g-16); border: var(--bw) solid var(--accent); border-radius: var(--r); cursor: pointer; box-shadow: var(--glow-sm);
}
.build-hud-save:hover:not(:disabled) { background: var(--g-22); }
.build-hud-save:disabled { opacity: .45; cursor: default; box-shadow: none; }
.build-hud-status { padding: 0 var(--pad-x) var(--pad-y); min-height: var(--row-h); }
.build-hud-status:empty { display: none; }

/* ── MOZGÁS: saját kulcskockák (a régi fájlé kiürül) ───────────────────── */
@keyframes chrome-glow-pulse { 0%, 100% { box-shadow: 0 0 0 1px rgba(0,0,0,.6), var(--glow-sm); } 50% { box-shadow: 0 0 0 1px rgba(0,0,0,.6), var(--glow-lg); } }
@keyframes chrome-amber-pulse { 0%, 100% { box-shadow: none; } 50% { box-shadow: var(--glow-amber); } }
@keyframes chrome-badge-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.25); } }
@keyframes chrome-fade-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes chrome-sweep { from { left: -45%; } to { left: 100%; } }
@media (prefers-reduced-motion: reduce) {
    .preloader-title, .event-banner, .fab-pill--guide.fg-btn-nudge { animation: none; }
    .preloader-sweep { animation: none; opacity: .5; left: 28%; }
}

/* ── MOBIL-SZÉLESSÉG (≤768, a régi 10878/11158 blokk): a lebegők a sín helyén indulnak ── */


/* ── remainder 2026-10-02 ── (remB) */
.output-cell { position: relative; }   /* az OP-cella abszolút gyermekeinek (lüktető jelzés) horgonya */
/* ⇤ a dokk-sáv csak dokkolt állapotban él; keskeny ablakban a valós szélessége a fátyol-vágás (30-shells) 300 px-éhez igazodik */
body:not(.dock-open):not(.dock-narrow) .dock-rail { display: none; }
body.dock-narrow .dock-rail { width: 300px; }