/* copyright Razvan Malciu - razvan.malciu@gmail.com */
/* Obiectele animate din prima pagina (Night Bridge: glob, Radome: antena, Bitstream: retea). Se incarca doar pe prima pagina, doar la temele cu obiect. */
.ch-hero .ch-chart { display: none; }
.hero-obj { position: relative; margin: 0; min-width: 0; }
.hero-obj canvas { display: block; width: 100%; aspect-ratio: 1 / 0.92; touch-action: pan-y; cursor: grab; border-radius: 12px; }
.hero-obj canvas:active { cursor: grabbing; }
.hero-obj canvas:focus-visible { outline: 2px solid var(--t-accent); outline-offset: 4px; }
.hero-bitstream canvas { cursor: crosshair; }

/* Cartusele HUD peste obiect */
.hud { position: absolute; display: flex; flex-direction: column; gap: 3px; max-width: 62%; padding: 9px 12px; border-radius: 8px; background: color-mix(in srgb, var(--t-deep) 90%, transparent); border: 1px solid var(--t-line); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); font-family: var(--font-mono); pointer-events: none; }
.hud-k { display: flex; align-items: center; gap: 7px; font-size: 10.5px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--t-accent); }
.hud-v { font-size: 12.5px; color: var(--ink); white-space: nowrap; }
.hud-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--t-accent); box-shadow: 0 0 8px var(--t-accent); }
.hud-ap { right: 0; top: 4%; }
.hud-rp { right: 0; bottom: 22%; }
.hud-wl { left: 0; bottom: 14%; }
.hud-tl { left: 0; top: 0; }
.hud-tr { right: 0; top: 0; text-align: right; }
.hud-tr .hud-k { justify-content: flex-end; }
.hud-bl { left: 0; top: 21%; }
.hud-v[data-bs-sum] { white-space: normal; }
.hud-meter { display: block; width: 150px; height: 6px; margin-top: 4px; border-radius: 3px; background: var(--t-surf2); overflow: hidden; }
.hud-meter span { display: block; height: 100%; width: 90%; background: var(--t-accent); transition: width .2s linear, background-color .3s; }

/* Indicatii si comenzi sub obiect */
.hero-hint { margin: 8px 0 0; font-family: var(--font-mono); font-size: 12px; color: var(--muted); text-align: center; }
.hero-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 16px; margin-top: 10px; }
.hero-controls .hero-hint { margin: 0; }
.hero-toggle { min-height: 40px; padding: 0 16px; border-radius: 8px; border: 1px solid var(--t-accent); background: var(--t-surf); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }
.hero-toggle:hover { background: var(--t-surf2); }
.hero-toggle:focus-visible { outline: 2px solid var(--t-accent); outline-offset: 2px; }
.hero-toggle[aria-pressed="true"] { background: var(--t-accent); color: var(--t-accent-ink); }

/* Bitstream: legenda si fisa dispozitivului */
.bs-legend { position: absolute; right: 0; top: 0; display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 9px 12px; list-style: none; border-radius: 8px; background: color-mix(in srgb, var(--t-deep) 90%, transparent); border: 1px solid var(--t-line); font-family: var(--font-mono); font-size: 11px; color: var(--ink); pointer-events: none; }
.bs-legend li { display: flex; align-items: center; gap: 7px; }
.bs-legend li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.bs-legend .st-ok::before { background: #4DFF9A; }
.bs-legend .st-expiring::before { background: #FFC24D; }
.bs-legend .st-expired::before { background: #FF6A5C; }
.bs-legend .st-quarantine::before { background: #FF5FD2; }
.bs-tip { position: absolute; z-index: 2; display: flex; flex-direction: column; gap: 2px; min-width: 190px; max-width: 240px; padding: 10px 12px; border-radius: 8px; background: var(--t-deep); border: 1px solid var(--t-accent); font-family: var(--font-mono); font-size: 12px; color: var(--ink); pointer-events: none; box-shadow: 0 12px 28px -12px rgba(0, 0, 0, .8); }
.bs-tip[hidden] { display: none; }
.bs-tip strong { font-family: var(--font-body); font-size: 14px; color: var(--t-accent); }
.bs-tip [data-tip-x].is-bad { color: #FF8A7E; }
.bs-tip [data-tip-x].is-warn { color: #FFD27A; }
.bs-tip [data-tip-x].is-q { color: #FF8FE0; }

@media (max-width: 960px) {
    .hero-obj { order: 0; max-width: 560px; width: 100%; margin: 0 auto; }
}
@media (max-width: 560px) {
    .hud { padding: 6px 8px; max-width: 70%; }
    .hud-v { font-size: 10.5px; }
    .hud-k { font-size: 9px; letter-spacing: 1px; }
    .hud-meter { width: 110px; }
    .bs-legend { font-size: 10px; padding: 6px 8px; }
    /* pe telefon cartusele Bitstream trec sub obiect, ca sa nu-l acopere */
    .hero-bitstream .hud, .bs-legend { position: static; max-width: none; margin-top: 8px; }
    .bs-legend { flex-direction: row; flex-wrap: wrap; gap: 6px 14px; }
    .hero-bitstream canvas { aspect-ratio: 1 / 1.25; }
}
@media (prefers-reduced-motion: no-preference) {
    .hud-dot { animation: hero-blink 1.4s steps(2, start) infinite; }
}
@media (prefers-reduced-motion: reduce) {
    .hud-dot { animation: none; }
}
@keyframes hero-blink { 0% { opacity: 1; } 100% { opacity: .25; } }

/* ===== Radome: film pe pasi (scena 3D + pagina web a ACU + fereastra AntennaPilot) ===== */
.ch-hero-in:has(.rd-film) { grid-template-columns: minmax(0, 1fr); gap: 30px; }
.rd-film { width: 100%; max-width: none; }
.rd-film canvas { cursor: default; touch-action: auto; border-radius: 0; aspect-ratio: auto; }
.rd-top { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 14px; align-items: stretch; }
.rd-scene { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 10px; background: #04080f; border: 1px solid var(--t-line); }
.rd-scene canvas { display: block; width: 100%; height: 100%; }
.rd-caption { position: absolute; left: 12px; top: 12px; max-width: min(560px, calc(100% - 160px)); margin: 0; padding: 9px 12px; border-left: 3px solid var(--t-accent); border-radius: 6px; background: rgba(4, 9, 16, .84); color: #eaf4fa; font-size: 14px; line-height: 1.4; }
.rd-fallback { position: absolute; inset: auto 12px 12px 12px; margin: 0; padding: 10px 12px; border-radius: 6px; background: rgba(4, 9, 16, .9); color: #eaf4fa; }
.rd-compass { position: absolute; right: 10px; bottom: 10px; width: 132px; height: 132px; }
.rc-ring { fill: rgba(4, 10, 18, .82); stroke: #5cc8ff; stroke-width: 1.2; }
.rc-tick { stroke: #9fd3ef; stroke-width: .8; }
.rc-tick.rc-big { stroke-width: 1.6; }
.rc-card { fill: #eaf4fa; font: 600 11px "IBM Plex Mono", monospace; text-anchor: middle; }
.rc-ship { fill: #e8eef2; stroke: #0a1520; stroke-width: 1; }
.rc-sat { stroke: #f4c542; stroke-width: 2.4; stroke-dasharray: 4 3; }
.rc-sat.is-bad { stroke: #ff6a5c; }
.rc-wrong { stroke: #ffc24d; stroke-width: 1.6; stroke-dasharray: 2 3; }
.rc-hdg { fill: #ffffff; font: 600 9px "IBM Plex Mono", monospace; text-anchor: middle; }

/* pagina web a ACU, ca in browser */
.dac { display: flex; flex-direction: column; min-width: 0; border: 2px solid #8f95ff; background: #0000a8; color: #ffffff; font-family: "Times New Roman", Times, serif; }
.dac-title { padding: 2px 10px; background: #c9c9da; color: #00007a; font-weight: 700; font-size: 17px; text-align: center; }
.dac-body { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 12px; padding: 12px; flex: 1; }
.dac-side { display: flex; flex-direction: column; gap: 10px; }
.dac-leds { margin: 0; padding: 4px; list-style: none; border: 1px solid #ffffff; }
.dac-leds li { display: flex; align-items: center; gap: 6px; padding: 2px 4px; margin: 2px 0; border: 1px solid #ffffff; font-weight: 700; font-size: 14px; }
.dac-leds i { flex: none; width: 13px; height: 13px; border-radius: 50%; background: #00008a; border: 1px solid #6a6aff; }
.dac-leds li.is-on i { background: #26ff4a; border-color: #b9ffc6; box-shadow: 0 0 6px #26ff4a; }
/* pe ACU, Blocked si Error se aprind rosu */
.dac-leds li[data-dac-led="blk"].is-on i, .dac-leds li[data-dac-led="err"].is-on i { background: #ff2a1a; border-color: #ffb3aa; box-shadow: 0 0 6px #ff2a1a; }
.dac-ctrl { display: flex; flex-direction: column; gap: 6px; padding: 6px; border: 1px solid #ffffff; }
.dac-ctrl-h { font-weight: 700; }
.dac-btn { padding: 3px 6px; border: 1px solid #7a7a7a; border-radius: 3px; background: #ececec; color: #000000; font-family: Arial, sans-serif; font-size: 12px; text-align: center; }
.dac-btn.is-press { background: #b8b8b8; box-shadow: inset 1px 1px 2px #555555; }
.dac-grid { display: grid; grid-template-columns: minmax(0, max-content) minmax(5em, 1fr) minmax(0, max-content) minmax(3.4em, 1fr); gap: 8px 6px; align-content: start; margin: 0; }
.dac-grid dt { font-weight: 700; font-size: 13.5px; line-height: 1.15; text-align: right; align-self: center; }
.dac-grid dd { display: flex; align-items: center; gap: 4px; margin: 0; }
.dac-grid dd span { min-width: 0; padding: 2px 4px; background: #4646a6; border: 1px solid #9a9ae6; color: #ffffff; font-family: Arial, sans-serif; font-size: 13px; }
.dac-grid dd span:first-child { flex: 1 1 auto; }
.dac-h { flex: none; width: 2.2em; text-align: center; }

/* pasii si bara de timp */
.rd-steps { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 14px; align-items: center; margin-top: 14px; }
.rd-buttons { display: flex; gap: 6px; }
.rd-btn { min-width: 44px; min-height: 40px; padding: 0 12px; border: 1px solid var(--t-accent); border-radius: 8px; background: var(--t-surf); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }
.rd-btn:hover { background: var(--t-surf2); }
.rd-btn:focus-visible, .rd-bar:focus-visible { outline: 2px solid var(--t-accent); outline-offset: 2px; }
.rd-bar { position: relative; height: 12px; border-radius: 6px; background: var(--t-surf2); border: 1px solid var(--t-line); cursor: pointer; touch-action: none; }
.rd-bar span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; background: var(--t-accent); }
.rd-steplist { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: rdstep; }
.rd-steplist li { position: relative; padding: 8px 10px 8px 34px; border: 1px solid var(--t-line); border-radius: 8px; background: var(--t-surf); color: var(--text); font-size: 13px; line-height: 1.4; cursor: pointer; counter-increment: rdstep; }
.rd-steplist li::before { content: counter(rdstep); position: absolute; left: 9px; top: 8px; width: 18px; height: 18px; border-radius: 50%; background: var(--t-surf2); color: var(--ink); font: 600 11px/18px "IBM Plex Mono", monospace; text-align: center; }
.rd-steplist li.is-done { opacity: .7; }
.rd-steplist li.is-current { border-color: var(--t-accent); background: var(--t-surf2); color: var(--ink); opacity: 1; }
.rd-steplist li.is-current::before { background: var(--t-accent); color: var(--t-accent-ink); }

/* fereastra AntennaPilot (culorile aplicatiei, independente de tema) */
.aps { margin-top: 16px; border: 1px solid #2a4c51; border-radius: 8px; background: #0b1e21; color: #dce8e9; font-family: "IBM Plex Sans", system-ui, sans-serif; font-size: 12px; overflow: hidden; }
.aps-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 8px 12px; background: #0f2a2e; border-bottom: 1px solid #2a4c51; color: #b9cbcd; }
.aps-bar em { font-style: normal; color: #ffffff; font-family: "IBM Plex Mono", monospace; }
.aps-brand b { font-weight: 700; color: #ffffff; } .aps-brand b + b { color: #3ed6a8; }
.aps-ok { padding: 3px 9px; border-radius: 3px; background: #3ed6a8; color: #06231a; font-weight: 600; }
.aps-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .75fr) minmax(0, 1.25fr); grid-template-areas: "status ind trend" "calc calc log" "view view map"; gap: 1px; background: #2a4c51; }
.aps-card { min-width: 0; padding: 10px 12px; background: #0f2427; }
.aps-card h4 { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: #ffffff; }
.aps-card h4 small { margin-left: 8px; font-weight: 400; color: #9fb3b6; font-size: 11px; }
.aps-status { grid-area: status; } .aps-ind { grid-area: ind; } .aps-trend { grid-area: trend; } .aps-calc { grid-area: calc; } .aps-log { grid-area: log; } .aps-view { grid-area: view; } .aps-map { grid-area: map; }
.aps-card dl { display: grid; grid-template-columns: repeat(2, max-content minmax(0, 1fr)); gap: 9px 14px; margin: 0; }
.aps-calc dl { grid-template-columns: repeat(2, max-content minmax(0, 1fr)); max-width: 520px; }
.aps-card dt { color: #9fb3b6; white-space: nowrap; }
.aps-card dd { margin: 0; color: #ffffff; font-family: "IBM Plex Mono", monospace; font-weight: 500; white-space: nowrap; }
.aps-card dd.aps-g { color: #3ed6a8; }
.aps-card dd.is-low, .aps-card dd.is-over { color: #ff8a7e; }
.aps-leds { display: grid; gap: 7px; margin: 0 0 10px; padding: 0; list-style: none; }
.aps-leds li { display: flex; align-items: center; gap: 8px; color: #dce8e9; }
.aps-leds i { width: 9px; height: 9px; border-radius: 50%; background: #4e6266; }
.aps-leds li.is-on i { background: #3ed6a8; box-shadow: 0 0 6px #3ed6a8; }
.aps-leds li[data-ap-led="srch"].is-on i { background: #f4c542; box-shadow: 0 0 6px #f4c542; }
.aps-leds li[data-ap-led="blk"].is-on i, .aps-leds li[data-ap-led="err"].is-on i { background: #ff6a5c; box-shadow: 0 0 6px #ff6a5c; }
.aps-ctl, .aps-auto { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.aps-sub { color: #ffffff; font-weight: 600; }
.aps-btn { padding: 4px 9px; border: 1px solid #2f5a60; border-radius: 3px; background: #17353a; color: #ffffff; white-space: nowrap; }
.aps-btn.aps-on, .aps-btn.is-press { background: #3ed6a8; border-color: #3ed6a8; color: #06231a; }
.aps-in { padding: 2px 8px; border: 1px solid #5a7a7f; background: #ffffff; color: #000000; font-style: normal; font-family: "IBM Plex Mono", monospace; }
.aps-auto { margin-top: 12px; }
.aps-state { margin: 10px 0 0; font-family: "IBM Plex Mono", monospace; font-size: 11.5px; color: #a8e9d4; }
.aps-state.is-alert { color: #ffcf6b; }
.aps-trend canvas { display: block; width: 100%; height: 160px; }
.aps-log ol { height: 210px; margin: 0; padding: 6px 8px; overflow: auto; list-style: none; background: #08181a; border: 1px solid #23434a; font-family: "IBM Plex Mono", monospace; font-size: 10.5px; line-height: 1.45; color: #cfdcdd; }
.aps-log li { white-space: pre-wrap; word-break: break-all; }
.aps-log li.is-ev { color: #7fe7ff; }
.aps-log li.is-warn { color: #ffcf6b; }
.aps-views { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.aps-views canvas { display: block; width: 100%; height: 250px; background: #0c2023; border: 1px solid #1f3d42; }
.aps-map canvas { display: block; width: 100%; height: 280px; background: #aad3df; }

@media (max-width: 1100px) {
    .rd-top { grid-template-columns: minmax(0, 1fr); }
    .aps-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "status status" "ind trend" "calc log" "view view" "map map"; }
}
@media (max-width: 700px) {
    .rd-scene { aspect-ratio: 4 / 3.4; }
    .rd-compass { width: 96px; height: 96px; }
    .rd-caption { max-width: calc(100% - 24px); font-size: 13px; }
    .rd-steps { grid-template-columns: minmax(0, 1fr); }
    .dac-body { grid-template-columns: minmax(0, 1fr); }
    .dac-side { flex-direction: row; flex-wrap: wrap; }
    .dac-grid { grid-template-columns: max-content minmax(0, 1fr); }
    .aps-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "status" "ind" "trend" "calc" "log" "view" "map"; }
    .aps-card dl { grid-template-columns: repeat(2, max-content minmax(0, 1fr)); }
    .aps-calc dl { grid-template-columns: max-content minmax(0, 1fr); }
    .aps-views { grid-template-columns: minmax(0, 1fr); }
}

/* ===== Polar aurora: scena 3D + panoul cu valorile calculate ===== */
.ch-hero-in:has(.au-film) { grid-template-columns: minmax(0, 1fr); gap: 30px; }
.au-film { width: 100%; max-width: none; }
.au-film canvas { cursor: default; touch-action: auto; border-radius: 0; aspect-ratio: auto; }
.au-top { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 14px; align-items: stretch; }
.au-scene { position: relative; width: 100%; min-height: 520px; overflow: hidden; border-radius: 10px; background: #02050a; border: 1px solid var(--t-line); }
.au-scene canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: pan-y; }
.au-scene canvas:active { cursor: grabbing; }
.au-hint { position: absolute; right: 10px; bottom: 10px; max-width: calc(100% - 20px); padding: 4px 8px; border-radius: 6px; background: rgba(2, 6, 12, .75); color: #cfe0ea; font: 11px "IBM Plex Mono", monospace; }
.au-panel { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 12px; border: 1px solid var(--t-line); border-radius: 10px; background: var(--t-surf); color: var(--text); }
.au-panel h4 { margin: 0; font-size: 14px; color: var(--ink); }
.au-vals { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 12px; margin: 0; font-size: 13px; }
.au-vals dt { color: var(--muted); }
.au-vals dd { margin: 0; color: var(--ink); font-family: "IBM Plex Mono", monospace; text-align: right; }
.au-chart { display: block; width: 100%; height: 130px; }
.au-map { display: block; width: 100%; height: 300px; background: #aad3df; border-radius: 6px; }
.au-attr { margin: 0; font-size: 11px; color: var(--muted); }
.au-steps { grid-template-columns: auto minmax(0, 1fr); }
.au-range { width: 100%; accent-color: var(--t-accent); }
@media (max-width: 1100px) { .au-top { grid-template-columns: minmax(0, 1fr); } .au-scene { min-height: 0; aspect-ratio: 16 / 10; } .au-map { height: 260px; } }
@media (max-width: 700px) { .au-scene { aspect-ratio: 4 / 3.6; } .au-hint { display: none; } .au-scene .rd-caption { font-size: 11.5px; line-height: 1.35; padding: 6px 9px; } }

/* ===== Data flow: harta neon a retelei navei ===== */
.ch-hero-in:has(.df-film) { grid-template-columns: minmax(0, 1fr); gap: 30px; }
.df-film { width: 100%; max-width: none; }
.df-stage { position: relative; }
.df-film canvas { aspect-ratio: 16 / 8.6; border-radius: 10px; border: 1px solid var(--t-line); cursor: default; touch-action: pan-y; background: #02070e; }
.df-hud { left: 10px; top: auto; bottom: 10px; max-width: 32%; }
.df-hud .df-event { white-space: normal; line-height: 1.4; }
.df-card { position: absolute; right: 10px; bottom: 10px; display: flex; flex-direction: column; gap: 4px; width: min(340px, calc(100% - 20px)); padding: 11px 13px; border-radius: 8px; background: color-mix(in srgb, var(--t-deep) 92%, transparent); border: 1px solid var(--t-accent); box-shadow: 0 0 22px -8px var(--t-accent); color: var(--ink); font-size: 13px; line-height: 1.45; pointer-events: none; }
.df-card[hidden] { display: none; }
.df-card strong { font-size: 15px; color: var(--t-accent); }
.df-sub { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); }
.df-count { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.df-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0 0; padding: 0; list-style: none; font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); }
.df-legend li { display: flex; align-items: center; gap: 7px; }
.df-legend li::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); }
.df-legend .df-https { --c: #4fd8ff; }
.df-legend .df-dns { --c: #8fa8ff; }
.df-legend .df-nmea { --c: #4dff9a; }
.df-legend .df-ntp { --c: #f2f7fa; }
.df-legend .df-smb { --c: #b58cff; }
.df-legend .df-syslog { --c: #ffc24d; }
.df-legend .df-quar { --c: #ff5fd2; }
.df-legend .df-vpn { --c: #ff5a4e; }
@media (max-width: 700px) {
    .df-film canvas { aspect-ratio: 3 / 4.6; }
    .df-stage { display: flex; flex-direction: column; }
    .df-hud { position: static; order: -1; max-width: none; margin-bottom: 8px; }
    .df-card { position: static; width: auto; margin-top: 8px; }
}

/* ===== Holo ship: nava holografica + zonele cu produse ===== */
.ch-hero-in:has(.hl-film) { grid-template-columns: minmax(0, 1fr); gap: 30px; }
.hl-film { width: 100%; max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; align-items: stretch; }
.hl-stage { position: relative; min-width: 0; min-height: 540px; overflow: hidden; border-radius: 10px; border: 1px solid var(--t-line); background: #02070e; }
.hl-film canvas { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; cursor: grab; touch-action: pan-y; }
.hl-tags { position: absolute; inset: 0; pointer-events: none; }
.hl-tag { position: absolute; left: 0; top: 0; padding: 3px 8px; border-radius: 4px; border: 1px solid rgba(95, 227, 255, .45); background: rgba(2, 8, 16, .72); color: #bff6ff; font: 11px var(--font-mono); white-space: nowrap; transition: border-color .2s, color .2s, box-shadow .2s; }
.hl-tag.is-on { border-color: #ffb848; color: #ffd28a; box-shadow: 0 0 14px -2px rgba(255, 184, 72, .6); }
.hl-zones { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.hl-zone { padding: 12px 13px; border: 1px solid var(--t-line); border-radius: 10px; background: var(--t-surf); transition: border-color .2s, box-shadow .2s; }
.hl-zone.is-on { border-color: #ffb848; box-shadow: 0 0 22px -10px rgba(255, 184, 72, .8); }
.hl-zone h4 { margin: 0 0 4px; font-size: 14px; color: var(--t-accent); }
.hl-zone.is-on h4 { color: #ffd28a; }
.hl-zone p { margin: 0 0 6px; font-size: 12.5px; line-height: 1.45; color: var(--text); }
.hl-zone ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.hl-zone a { font-weight: 600; color: var(--ink); }
.hl-zone li span { display: block; font-size: 11.5px; color: var(--muted); }
@media (max-width: 1000px) {
    .hl-film { grid-template-columns: minmax(0, 1fr); }
    .hl-stage { min-height: 0; aspect-ratio: 16 / 9.5; }
    .hl-zones { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}
@media (max-width: 700px) {
    .hl-stage { aspect-ratio: 4 / 3.8; }
    .hl-hud { max-width: 75%; }
    .hl-tag { font-size: 10px; padding: 2px 6px; }
}

/* ===== Constellation: Pamantul cu LEO, MEO si GEO + panoul legaturilor ===== */
.ch-hero-in:has(.cs-film) { grid-template-columns: minmax(0, 1fr); gap: 30px; }
.cs-film { width: 100%; max-width: none; }
.cs-top { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 14px; align-items: stretch; }
.cs-scene { position: relative; width: 100%; min-height: 540px; overflow: hidden; border-radius: 10px; background: #02060c; border: 1px solid var(--t-line); }
.cs-film canvas { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; cursor: grab; touch-action: pan-y; }
.cs-views { position: absolute; left: 10px; top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.cs-views .rd-btn[aria-pressed="true"] { border-color: var(--t-accent); color: var(--t-accent); }
.cs-tip { position: absolute; z-index: 2; display: flex; flex-direction: column; gap: 2px; max-width: 250px; padding: 9px 11px; border-radius: 8px; background: var(--t-deep); border: 1px solid var(--t-accent); font: 12px var(--font-mono); color: var(--ink); pointer-events: none; }
.cs-tip[hidden] { display: none; }
.cs-tip strong { font: 600 13px var(--font-body); color: var(--t-accent); }
.cs-tag { position: absolute; left: 0; top: 0; padding: 2px 7px; border-radius: 4px; font: 11px var(--font-mono); white-space: nowrap; pointer-events: none; background: rgba(1, 4, 10, .75); }
.cs-tag.is-ship { color: #ff9be6; border: 1px solid rgba(255, 95, 210, .6); }
.cs-tag.is-geo { color: #ffd28a; border: 1px solid rgba(255, 184, 72, .6); }
.cs-legend { display: flex; flex-direction: column; gap: 5px; margin: 0; padding: 0; list-style: none; font-size: 12px; color: var(--muted); }
.cs-legend li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.cs-legend b { font: 500 11.5px var(--font-mono); color: var(--ink); }
.cs-sw { width: 10px; height: 10px; border-radius: 50%; }
@media (max-width: 1100px) { .cs-top { grid-template-columns: minmax(0, 1fr); } .cs-scene { min-height: 0; aspect-ratio: 16 / 10; } }
@media (max-width: 700px) { .cs-scene { aspect-ratio: 4 / 4.2; } .cs-hint { display: none; } .cs-views { left: 6px; top: 6px; gap: 4px; } .cs-views .rd-btn { padding: 5px 9px; font-size: 12px; } }

/* ===== Storm cell: replica ferestrei RoutePilot ===== */
.ch-hero-in:has(.rp-film) { grid-template-columns: minmax(0, 1fr); gap: 30px; }
.rp-film { width: 100%; max-width: 940px; margin: 0 auto; }
.rpw { overflow: hidden; border: 1px solid #22384e; border-radius: 10px; background: #0b1622; color: #dbe7ef; font: 13px "IBM Plex Sans", Arial, sans-serif; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8); }
.rpw-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 8px 12px; background: #08111b; border-bottom: 1px solid #22384e; }
.rpw-brand { margin-right: 6px; font-weight: 700; font-size: 16px; color: #fff; }
.rpw-pill { padding: 3px 10px; border: 1px solid #2c4a62; border-radius: 12px; font-size: 11px; line-height: 1.25; color: #c8d8e4; }
.rpw-pill.is-ok { border-color: #2fd48a; color: #8ff0c0; }
.rpw-speed { margin-left: auto; font-weight: 700; color: #ffd400; letter-spacing: .3px; }
.rpw-body { display: grid; grid-template-columns: 270px minmax(0, 1fr); }
.rpw-side { display: flex; flex-direction: column; gap: 12px; padding: 12px; border-right: 1px solid #22384e; background: #0d1a27; }
.rpw-sum { display: flex; flex-direction: column; gap: 2px; padding: 10px; border: 1px solid #6d7a2a; border-radius: 8px; background: #121c10; color: #ffd84d; font-weight: 700; text-align: center; }
.rpw-wps h4 { margin: 0 0 8px; color: #fff; font-size: 15px; }
.rpw-wps ol { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.rpw-wps li { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border: 1px solid #2a4258; border-radius: 8px; background: #0a1520; }
.rpw-wps li.is-dep { border-left: 3px solid #2fd4a0; }
.rpw-wpn { font-weight: 700; color: #fff; }
.rpw-wpi { font-size: 11.5px; color: #ffd84d; }
.rpw-wps label { font-size: 11.5px; color: #a9bccb; }
.rpw-wps select { margin-left: 4px; padding: 2px 4px; border: 1px solid #2c4a62; border-radius: 4px; background: #0b1622; color: #fff; font: inherit; }
.rpw-note { margin: 0; font-size: 11.5px; line-height: 1.45; color: #9fb3c2; }
.rpw-map { position: relative; min-width: 0; background: #aad3df; }
.rpw-map canvas { display: block; width: 100%; aspect-ratio: 774 / 1094; border-radius: 0; cursor: crosshair; touch-action: pan-y; }
.rpw-layers { position: absolute; left: 10px; top: 10px; display: flex; flex-wrap: wrap; gap: 4px; padding: 5px; border-radius: 6px; background: rgba(8, 17, 27, .88); }
.rpw-layers button { padding: 5px 10px; border: 1px solid #2c4a62; border-radius: 4px; background: #0d1a27; color: #4fe0c0; font: 600 12px "IBM Plex Sans", Arial, sans-serif; cursor: pointer; }
.rpw-layers button[aria-pressed="true"] { background: #1fb79a; border-color: #1fb79a; color: #02140f; }
.rpw-card { position: absolute; right: 10px; top: 10px; width: min(300px, 46%); max-height: calc(100% - 90px); overflow: auto; padding: 10px 12px; border-radius: 8px; background: rgba(10, 18, 28, .9); font-size: 12px; color: #dbe7ef; }
.rpw-fold { float: right; margin: -2px -4px 0 6px; padding: 2px 7px; border: 1px solid #2c4a62; border-radius: 4px; background: #0d1a27; color: #fff; font-size: 11px; cursor: pointer; }
.rpw-card.is-folded { width: auto; }
.rpw-card.is-folded [data-rp="card"] { display: none; }
.rpw-card h5 { margin: 8px 0 4px; font-size: 11.5px; letter-spacing: .5px; text-transform: uppercase; color: #3fd0d8; }
.rpw-ch { margin-bottom: 4px; text-align: center; font-size: 11.5px; color: #a9bccb; }
.rpw-ch small { color: #4fe0c0; }
.rpw-r { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0; }
.rpw-r span { color: #a9bccb; }
.rpw-r b { font-weight: 600; color: #fff; text-align: right; }
.rpw-pop { position: absolute; z-index: 3; display: flex; flex-direction: column; gap: 2px; width: 220px; padding: 8px 10px; border-radius: 6px; background: rgba(8, 17, 27, .95); border: 1px solid #3fd0d8; font-size: 11.5px; color: #dbe7ef; pointer-events: none; }
.rpw-pop[hidden] { display: none; }
.rpw-bottom { position: absolute; left: 10px; right: 10px; bottom: 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 8px 12px; border-radius: 10px; background: rgba(8, 17, 27, .92); font-size: 12px; color: #fff; }
.rpw-bottom input[type="range"] { flex: 1 1 160px; accent-color: #1f8fff; }
.rpw-bottom button { padding: 4px 10px; border: 1px solid #2c4a62; border-radius: 6px; background: #0d1a27; color: #fff; font: 600 12px "IBM Plex Sans", Arial, sans-serif; cursor: pointer; }
.rpw-t { padding: 1px 6px; border-radius: 4px; background: #1c2b3a; color: #a9bccb; font-size: 11px; }
.rpw-attr { position: absolute; right: 0; bottom: 0; padding: 2px 6px; background: rgba(255, 255, 255, .8); color: #333; font: 10px Arial, sans-serif; }
@media (max-width: 900px) {
    .rpw-body { grid-template-columns: minmax(0, 1fr); }
    .rpw-side { order: 2; border-right: 0; border-top: 1px solid #22384e; }
    .rpw-card { position: static; width: auto; max-height: none; border-radius: 0; }
    .rpw-bottom { position: static; border-radius: 0; }
    .rpw-attr { position: static; display: block; text-align: right; }
    .rpw-speed { margin-left: 0; }
}

/* ===== AGC Gate: decizia Autocorrect din AntennaPilot ===== */
.ch-hero-in:has(.ag-film) { grid-template-columns: minmax(0, 1fr); gap: 30px; }
.ag-film { width: 100%; max-width: none; }
.ag-scen { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; }
.ag-scen-k { margin-right: 4px; font: 600 12px var(--font-mono); color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
.ag-scen .rd-btn { padding: 6px 12px; font-size: 13px; }
.ag-scen .rd-btn[aria-pressed="true"] { border-color: var(--t-accent); color: var(--t-accent); }
.ag-aps { margin-top: 0; }
.ag-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr); grid-template-areas: "status trend" "calc log"; gap: 1px; background: #23434a; }
.ag-status { grid-area: status; } .ag-trend { grid-area: trend; } .ag-calc { grid-area: calc; } .ag-log { grid-area: log; }
.ag-status dl { grid-template-columns: max-content minmax(0, 1fr); }
.ag-trend canvas { display: block; width: 100%; height: 200px; }
.ag-thr { padding: 2px 6px; border: 1px solid #5a7a7f; background: #ffffff; color: #000000; font: 12px "IBM Plex Mono", monospace; }
.ag-gate { cursor: pointer; font: inherit; }
.ag-steps { display: flex; flex-direction: column; gap: 4px; margin: 10px 0 0; padding: 0; list-style: none; font-size: 12px; }
.ag-steps li { padding: 4px 8px; border-left: 3px solid #4e6266; background: #0b1e21; color: #dce8e9; }
.ag-steps li.ag-ok, .ag-steps li.ag-go { border-color: #3ed6a8; }
.ag-steps li.ag-go { color: #a8e9d4; }
.ag-steps li.ag-warn { border-color: #ffcf6b; }
.ag-steps li.ag-block { border-color: #ff6a5c; color: #ffb3aa; }
.ag-log ol { height: 230px; }
@media (max-width: 900px) { .ag-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "status" "trend" "calc" "log"; } }

/* ===== Terminal: fluxurile de bord ===== */
.ch-hero-in:has(.tm-film) { grid-template-columns: minmax(0, 1fr); gap: 30px; }
.tm-film { width: 100%; max-width: none; }
.tm-win { overflow: hidden; border: 1px solid #1f3128; border-radius: 10px; background: #040706; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9); }
.tm-bar { display: flex; align-items: center; gap: 7px; padding: 8px 12px; background: #0b100e; border-bottom: 1px solid #1f3128; font: 12px "IBM Plex Mono", monospace; color: #8fb3a0; }
.tm-bar i { width: 11px; height: 11px; border-radius: 50%; background: #3a4a42; }
.tm-bar i:nth-child(1) { background: #ff5f57; } .tm-bar i:nth-child(2) { background: #febc2e; } .tm-bar i:nth-child(3) { background: #28c840; }
.tm-bar span { margin-left: 8px; }
.tm-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px; border-bottom: 1px solid #14211b; }
.tm-tabs button { padding: 3px 10px; border: 1px solid #2a4236; border-radius: 4px; background: transparent; color: #5f7d6d; font: 12px "IBM Plex Mono", monospace; cursor: pointer; }
.tm-tabs button[aria-pressed="true"] { border-color: #7dffb0; color: #7dffb0; }
.tm-out { height: 420px; margin: 0; padding: 10px 12px; overflow: auto; font: 12px/1.5 "IBM Plex Mono", monospace; color: #b8d4c4; white-space: pre-wrap; word-break: break-all; }
.tm-nmea { color: #7dffb0; } .tm-sys { color: #8fb8ff; } .tm-bad { color: #ff7a6e; } .tm-acu { color: #7fe7ff; } .tm-ntp { color: #ffd27a; } .tm-cmd { color: #ffffff; } .tm-info { color: #d6e6dc; }
.tm-in { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-top: 1px solid #14211b; font: 13px "IBM Plex Mono", monospace; color: #7dffb0; }
.tm-in input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: #ffffff; font: inherit; caret-color: #7dffb0; }
@media (max-width: 700px) { .tm-out { height: 360px; font-size: 11px; } }

/* ===== Circuit: produsele ca cipuri pe placa ===== */
.ch-hero-in:has(.ci-film) { grid-template-columns: minmax(0, 1fr); gap: 30px; }
.ci-film { width: 100%; max-width: none; }
.ci-stage { position: relative; }
.ci-film canvas { aspect-ratio: 16 / 8.6; border-radius: 10px; border: 1px solid #1d3a2a; cursor: default; touch-action: pan-y; }
.ci-card { position: absolute; z-index: 2; display: flex; flex-direction: column; gap: 4px; width: min(300px, calc(100% - 20px)); padding: 12px 14px; border-radius: 8px; background: rgba(3, 14, 9, .95); border: 1px solid #7dffb0; box-shadow: 0 0 24px -8px #7dffb0; font-size: 13px; color: #e8f3ec; }
.ci-card[hidden] { display: none; }
.ci-card strong { font-size: 15px; color: #7dffb0; }
.ci-s { font: 11.5px var(--font-mono); color: #9fbfae; }
.ci-h { margin-top: 4px; font: 600 11px var(--font-mono); letter-spacing: 1px; text-transform: uppercase; color: #d6b45a; }
.ci-card ul { margin: 0; padding-left: 16px; }
.ci-card a { margin-top: 6px; color: #7dffb0; font-weight: 600; }
@media (max-width: 700px) { .ci-film canvas { aspect-ratio: 3 / 4.4; } }