/* Shared three-zone workspace, inspector, rails and command dashboard. */
.ref-workspace-page { min-height: calc(100dvh - 84px); }
.ref-workspace-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 390px); gap: 10px; align-items: stretch; min-height: calc(100dvh - 84px); }
.ref-workspace-main { min-width: 0; display: grid; grid-template-rows: minmax(390px, 1fr) auto; gap: 10px; }

.ref-hero-stage, .ref-system-stage, .ref-galaxy-stage { position: relative; min-height: 390px; overflow: hidden; border: 1px solid rgba(105, 184, 239, .22); border-radius: 14px; background: #06101c; box-shadow: var(--inner-glow), 0 18px 55px rgba(0,0,0,.24); }
.ref-hero-image, .ref-system-space, .ref-galaxy-nebula { position: absolute; inset: 0; }
.ref-hero-image picture, .ref-hero-image img, .ref-system-space picture, .ref-system-space img, .ref-galaxy-nebula picture, .ref-galaxy-nebula img { width: 100%; height: 100%; display: block; object-fit: cover; }
.ref-hero-gradient { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4, 10, 19, .86) 0%, rgba(4, 10, 19, .42) 48%, rgba(4, 10, 19, .1) 75%), linear-gradient(0deg, rgba(4, 10, 19, .88), transparent 52%); }
.ref-hero-copy { position: absolute; left: 22px; top: 22px; right: 22px; max-width: 620px; z-index: 3; }
.ref-hero-copy h1 { margin: 6px 0 4px; font-size: clamp(32px, 3.2vw, 50px); line-height: .98; letter-spacing: -.035em; }
.ref-hero-copy p { margin: 0; color: #c0d0df; font-size: 13px; }
.ref-inline-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.ref-inline-tags span { padding: 4px 9px; border: 1px solid rgba(118, 188, 239, .19); border-radius: 999px; background: rgba(4, 12, 22, .66); color: #b2c1cf; font-size: 13px; letter-spacing: .06em; }

.ref-queue-banner { position: relative; margin-top: 12px; max-width: 620px; min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 14px; border: 1px solid rgba(244, 189, 88, .42); border-radius: 11px; background: linear-gradient(90deg, rgba(73, 50, 12, .78), rgba(26, 29, 33, .76)); box-shadow: 0 12px 34px rgba(0,0,0,.2); }
.ref-queue-banner.is-free { border-color: rgba(77, 224, 170, .28); background: linear-gradient(90deg, rgba(14, 56, 49, .65), rgba(20, 28, 34, .72)); }
.ref-queue-banner span, .ref-queue-banner strong, .ref-queue-banner small { display: block; }
.ref-queue-banner span { color: var(--amber); font-size: 13px; font-weight: 800; letter-spacing: .12em; }
.ref-queue-banner.is-free span { color: var(--green); }
.ref-queue-banner strong { margin-top: 2px; font-size: 13px; }
.ref-queue-banner small { margin-top: 2px; color: #a9b7c5; font-size: 13px; }
.ref-queue-banner em { color: #ffe2a1; font-size: 21px; font-weight: 780; font-style: normal; white-space: nowrap; }

.ref-resource-bar, .ref-env-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: -82px; padding: 0 12px 12px; position: relative; z-index: 4; }
.ref-env-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ref-resource-chip, .ref-env-metric { min-width: 0; min-height: 68px; display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid rgba(112, 184, 238, .2); border-radius: 10px; background: rgba(6, 16, 28, .9); backdrop-filter: blur(12px); box-shadow: 0 12px 32px rgba(0,0,0,.18); }
.ref-resource-chip .nv-icon { width: 18px; height: 18px; color: var(--cyan); stroke: currentColor; flex: 0 0 auto; }
.ref-resource-chip span, .ref-resource-chip small, .ref-resource-chip strong, .ref-resource-chip em, .ref-env-metric span, .ref-env-metric strong, .ref-env-metric small { display: block; min-width: 0; }
.ref-resource-chip span { overflow: hidden; }
.ref-resource-chip small, .ref-env-metric span { color: #7390aa; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.ref-resource-chip strong, .ref-env-metric strong { margin-top: 2px; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ref-resource-chip em, .ref-env-metric small { margin-top: 2px; color: var(--green); font-size: 13px; font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ref-env-metric { display: block; min-height: 64px; }
.ref-env-metric small { color: #73879a; }

.ref-selection-rail { border: 1px solid rgba(105, 184, 239, .2); border-radius: 14px; background: rgba(5, 14, 25, .9); padding: 10px; box-shadow: var(--inner-glow); }
.ref-rail-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 2px 9px; }
.ref-rail-head h2 { margin: 2px 0 0; font-size: 16px; }
.ref-selection-grid { display: grid; grid-template-columns: repeat(5, minmax(168px, 1fr)); gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; scrollbar-color: rgba(94, 203, 255, .2) transparent; }
.ref-selection-card { min-width: 0; min-height: 92px; display: grid; grid-template-columns: 94px minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px; border: 1px solid rgba(110, 183, 236, .14); border-radius: 11px; background: rgba(9, 21, 36, .86); color: var(--text-1); text-align: left; cursor: pointer; transition: border-color var(--fast), background var(--fast), transform var(--fast); }
.ref-selection-card:hover:not(.disabled) { transform: translateY(-1px); border-color: rgba(94, 203, 255, .38); background: rgba(13, 31, 49, .94); }
.ref-selection-card.active { border-color: rgba(244, 189, 88, .65); box-shadow: inset 0 0 0 1px rgba(244, 189, 88, .16); background: linear-gradient(135deg, rgba(41, 35, 22, .96), rgba(9, 21, 36, .94)); }
.ref-selection-card.disabled { opacity: .46; cursor: default; }
.ref-selection-card > div { position: relative; height: 70px; border-radius: 8px; overflow: hidden; background: #0b1725; }
.ref-selection-card > div picture, .ref-selection-card > div img { width: 100%; height: 100%; display: block; object-fit: cover; }
.ref-selection-card > span { min-width: 0; }
.ref-selection-card strong, .ref-selection-card small, .ref-selection-card em { display: block; }
.ref-selection-card strong { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ref-selection-card small { margin-top: 3px; color: #8ea0b1; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ref-selection-card em { margin-top: 5px; color: var(--text-3); font-size: 13px; font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ref-selection-card em.good { color: var(--green); }
.ref-selection-card em.warn { color: var(--amber); }
.ref-selection-card em.cyan { color: var(--cyan); }
.ref-placeholder-icon, .ref-unknown-art { display: grid !important; place-items: center; height: 100%; color: #567087; font-size: 28px; background: radial-gradient(circle, rgba(94, 203, 255, .12), transparent 68%); }
.ref-city-select { display: flex; align-items: center; gap: 8px; color: var(--text-3); font-size: 13px; }
.ref-city-select select { min-width: 150px; height: 32px; border: 1px solid rgba(110, 183, 236, .2); border-radius: 8px; color: var(--text-1); background: #0a1727; padding: 0 10px; }