/* 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: 9px; 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: 9px; 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: 9px; }
.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: 8px; 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: 8px; 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: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ref-selection-card small { margin-top: 3px; color: #8ea0b1; font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ref-selection-card em { margin-top: 5px; color: var(--text-3); font-size: 8px; 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: 9px; }
.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; }

.ref-inspector { min-width: 0; min-height: 100%; position: relative; display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid rgba(105, 184, 239, .22); border-radius: 14px; background: linear-gradient(180deg, rgba(9, 20, 35, .98), rgba(5, 13, 24, .98)); box-shadow: var(--inner-glow), -14px 0 45px rgba(0,0,0,.14); }
.ref-inspector-head { padding: 4px 2px 9px; border-bottom: 1px solid rgba(110, 183, 236, .12); }
.ref-inspector-head h2 { margin: 4px 0 0; font-size: clamp(24px, 2.2vw, 34px); line-height: 1; letter-spacing: -.025em; }
.ref-inspector-head p { margin: 10px 0 0; color: #aab9c7; font-size: 12px; line-height: 1.48; }
.ref-inspector-block { padding: 10px; border: 1px solid rgba(110, 183, 236, .15); border-radius: 10px; background: rgba(14, 28, 46, .72); }
.ref-inspector-block > span { display: block; margin-bottom: 5px; color: #75a9d4; font-size: 8px; font-weight: 760; letter-spacing: .14em; }
.ref-inspector-block > strong { display: block; font-size: 13px; }
.ref-inspector-block > small { display: block; margin-top: 4px; color: #8295a7; font-size: 9px; line-height: 1.35; }
.ref-inspector-block ul { margin: 4px 0 0; padding-left: 17px; color: #c4d2df; font-size: 10px; line-height: 1.7; }
.ref-cost-row { display: flex; justify-content: space-between; gap: 16px; padding: 7px 8px; border: 1px solid rgba(112, 184, 238, .12); border-radius: 8px; background: rgba(18, 36, 57, .7); font-size: 10px; }
.ref-cost-row + .ref-cost-row { margin-top: 6px; }
.ref-cost-row span { color: #9eafbf; }
.ref-cost-row strong { color: #e9f5ff; }
.ref-inspector-stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
.ref-inspector-stat-grid > div { padding: 8px; border-radius: 8px; background: rgba(8, 19, 32, .78); }
.ref-inspector-stat-grid small, .ref-inspector-stat-grid strong { display: block; }
.ref-inspector-stat-grid small { color: #7890a5; font-size: 8px; text-transform: uppercase; }
.ref-inspector-stat-grid strong { margin-top: 3px; font-size: 14px; }
.ref-inspector-action { margin-top: auto; padding-top: 5px; }
.ref-inspector-action > small { display: block; margin-top: 6px; color: #73869a; font-size: 8px; text-align: center; }

.ref-unlock-chain { display: grid; gap: 7px; }
.ref-unlock-chain > div { display: flex; align-items: center; gap: 9px; padding: 7px; border: 1px solid rgba(112, 184, 238, .12); border-radius: 8px; }
.ref-unlock-chain > div i { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: rgba(94, 203, 255, .1); color: var(--cyan); }
.ref-unlock-chain > div .nv-icon { width: 13px; height: 13px; stroke: currentColor; }
.ref-unlock-chain > div span, .ref-unlock-chain > div strong, .ref-unlock-chain > div small { display: block; }
.ref-unlock-chain > div strong { font-size: 10px; }
.ref-unlock-chain > div small { margin-top: 2px; color: #7d91a4; font-size: 8px; }
.ref-unlock-chain > div.done { border-color: rgba(77,224,170,.22); }
.ref-unlock-chain > div.done i { color: var(--green); background: rgba(77,224,170,.1); }
.ref-unlock-chain > div.current { border-color: rgba(244,189,88,.3); }
.ref-unlock-chain > div.current i { color: var(--amber); background: rgba(244,189,88,.1); }
.ref-unlock-chain > div.locked { opacity: .55; }
.ref-unlock-chain > b { width: 1px; height: 7px; margin: -7px 0 -7px 19px; background: rgba(112, 184, 238, .2); }

.ref-page-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 16px; border: 1px solid rgba(105, 184, 239, .2); border-radius: 13px; background: rgba(7, 17, 29, .88); }
.ref-page-header h1 { margin: 4px 0 4px; font-size: 24px; }
.ref-page-header p { margin: 0; color: #9fb0c0; font-size: 10px; }
.ref-header-actions { display: flex; gap: 8px; }
.ref-quick-action { min-width: 116px; display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; text-align: left; background: rgba(13, 28, 45, .88); }
.ref-quick-action strong { font-size: 10px; }
.ref-quick-action small { color: #8396a8; font-size: 8px; }
.ref-quick-action .nv-icon { grid-row: 1 / 3; grid-column: 2; align-self: center; }
.ref-metric-strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-top: 9px; }
.ref-metric { min-height: 70px; padding: 10px 12px; border: 1px solid rgba(105, 184, 239, .17); border-radius: 11px; background: rgba(10, 22, 37, .84); }
.ref-metric span, .ref-metric strong, .ref-metric small { display: block; }
.ref-metric span { color: #7793aa; font-size: 8px; letter-spacing: .1em; text-transform: uppercase; }
.ref-metric strong { margin-top: 4px; font-size: 17px; }
.ref-metric small { margin-top: 3px; color: #8294a6; font-size: 8px; }
.ref-metric.cyan { border-top-color: var(--cyan); }
.ref-metric.green { border-top-color: var(--green); }
.ref-metric.amber { border-top-color: var(--amber); }
.ref-metric.violet { border-top-color: var(--violet); }
.ref-dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(330px, .82fr); gap: 9px; margin-top: 9px; }
.ref-panel { min-width: 0; padding: 12px; border: 1px solid rgba(105, 184, 239, .18); border-radius: 12px; background: rgba(7, 17, 30, .9); box-shadow: var(--inner-glow); }
.ref-colony-status { grid-row: span 2; min-height: 380px; position: relative; overflow: hidden; background: linear-gradient(180deg, rgba(8,20,35,.94), rgba(4,12,22,.96)); }
.ref-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ref-panel-head h2 { margin: 3px 0 0; font-size: 16px; }
.ref-colony-summary { display: grid; grid-template-columns: 150px minmax(0,1fr); gap: 14px; margin-top: 14px; align-items: center; }
.ref-colony-thumb { height: 110px; border-radius: 10px; overflow: hidden; border: 1px solid rgba(105,184,239,.18); }
.ref-colony-thumb picture, .ref-colony-thumb img { width: 100%; height: 100%; display:block; object-fit:cover; }
.ref-colony-summary strong { font-size: 18px; }
.ref-colony-summary p { color: #9fb0bf; font-size: 10px; }
.ref-priority-card { position: absolute; left: 12px; right: 12px; bottom: 12px; min-height: 150px; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 18px; border: 1px solid rgba(94,203,255,.18); border-radius: 12px; background: radial-gradient(circle at 66% 25%, rgba(77,224,170,.15), transparent 32%), linear-gradient(135deg, #07111d, #0b1727); }
.ref-priority-card h3 { margin: 6px 0 4px; font-size: 24px; max-width: 360px; }
.ref-priority-card p { margin: 0; color:#9fb0bf; font-size: 11px; max-width: 430px; }
.ref-task-list, .ref-warning-list, .ref-feed-list { display: grid; gap: 7px; margin-top: 10px; }
.ref-task-row, .ref-warning-row, .ref-feed-row { min-height: 54px; display: grid; align-items: center; gap: 9px; padding: 8px; border: 1px solid rgba(105,184,239,.13); border-radius: 9px; background: rgba(12,25,42,.68); }
.ref-task-row { grid-template-columns: 28px minmax(0,1fr) auto; cursor:pointer; }
.ref-task-icon, .ref-feed-row > span { width: 28px; height: 28px; display:grid; place-items:center; color:var(--cyan); border-radius:50%; background:rgba(94,203,255,.08); }
.ref-task-icon .nv-icon, .ref-feed-row .nv-icon { width:14px;height:14px;stroke:currentColor; }
.ref-task-row strong, .ref-task-row small, .ref-warning-row strong, .ref-warning-row small, .ref-feed-row strong, .ref-feed-row small { display:block; }
.ref-task-row strong, .ref-warning-row strong, .ref-feed-row strong { font-size:10px; }
.ref-task-row small, .ref-warning-row small, .ref-feed-row small { margin-top:2px;color:#8295a7;font-size:8px; }
.ref-task-row em, .ref-warning-row em { color:#8ea2b5;font-size:8px;font-style:normal; }
.ref-warning-row { grid-template-columns: 7px minmax(0,1fr) auto; }
.ref-warning-row > i { width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px currentColor; }
.ref-warning-row.warn > i { background:var(--amber); }
.ref-warning-row.danger > i { background:var(--red); }
.ref-feed-row { grid-template-columns: 28px minmax(0,1fr); }
.ref-intel-art { height: 82px; margin-top: 10px; border-radius: 8px; overflow:hidden; }
.ref-intel-art picture, .ref-intel-art img { width:100%;height:100%;display:block;object-fit:cover; }
.ref-progress-row { margin-top: 8px; display:grid;grid-template-columns:1fr auto;gap:5px;font-size:8px; }
.ref-progress-row span { color:#93a5b6; }
.ref-progress-row i { grid-column:1/-1;height:4px;border-radius:999px;background:#16253a;overflow:hidden; }
.ref-progress-row b { display:block;height:100%;background:linear-gradient(90deg,var(--cyan),var(--violet)); }
.ref-intel-panel .ref-secondary-button { width:100%;margin-top:10px; }
.ref-empty-compact { padding:12px;border:1px dashed rgba(105,184,239,.18);border-radius:9px;color:#93a5b6; }
.ref-empty-compact strong, .ref-empty-compact small { display:block; }
.ref-empty-compact strong { color:#dce9f4;font-size:10px; }
.ref-empty-compact small { margin-top:3px;font-size:8px; }
.ref-empty-compact button { margin-top:9px;min-height:30px;padding:5px 9px;font-size:9px; }

@media (max-width: 1500px) {
  .ref-workspace-grid { grid-template-columns: minmax(0, 1fr) 320px; }
  .ref-selection-grid { grid-template-columns: repeat(5, minmax(150px, 1fr)); }
  .ref-selection-card { grid-template-columns: 74px minmax(0,1fr); }
  .ref-selection-card > div { height: 62px; }
  .ref-resource-bar { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: -112px; }
  .ref-env-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: -102px; }
  .ref-metric-strip { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1030px) {
  .ref-workspace-grid { grid-template-columns: 1fr; }
  .ref-inspector { min-height: auto; }
  .ref-workspace-main { grid-template-rows: auto auto; }
  .ref-hero-stage, .ref-system-stage, .ref-galaxy-stage { min-height: 430px; }
  .ref-dashboard-grid { grid-template-columns: 1fr; }
  .ref-colony-status { grid-row: auto; min-height: 410px; }
  .ref-command-header { align-items:flex-start; }
  .ref-header-actions { flex-wrap:wrap; }
}
@media (max-width: 720px) {
  .view-stage { padding: 8px; }
  .ref-hero-copy { left: 15px; right:15px; top:15px; }
  .ref-resource-bar, .ref-env-strip { grid-template-columns: 1fr 1fr; margin-top:0; padding:8px 0 0; }
  .ref-selection-grid { grid-template-columns: repeat(5, 180px); }
  .ref-page-header { display:block; }
  .ref-header-actions { margin-top:10px; }
  .ref-metric-strip { grid-template-columns: 1fr 1fr; }
  .ref-colony-summary { grid-template-columns:1fr; }
  .ref-priority-card { position:relative;left:auto;right:auto;bottom:auto;margin-top:14px; }
  .ref-colony-status { min-height:auto; }
}