:root {
  color-scheme: dark;
  --bg: #020510;
  --panel: rgba(5, 12, 28, 0.92);
  --panel-soft: rgba(8, 19, 39, 0.78);
  --line: rgba(77, 215, 255, 0.28);
  --line-strong: #34d7ff;
  --text: #e9f8ff;
  --muted: #86a7b8;
  --blue: #35a7ff;
  --green: #43e59d;
  --red: #ff5267;
  --white: #e9f8ff;
  --gold: #ffcc66;
  --radius: 14px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--bg); color: var(--text); }
button, input { font: inherit; }
button { color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.app-shell { position: relative; width: 100%; height: 100%; min-height: 480px; overflow: hidden; background: radial-gradient(circle at 50% 45%, #07172e 0, #020510 58%, #010208 100%); }
#galaxy { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
#galaxy.dragging { cursor: grabbing; }

.topbar {
  position: absolute; z-index: 10; top: 0; left: 0; right: 0; min-height: 72px;
  display: grid; grid-template-columns: 260px minmax(260px, 1fr) auto;
  align-items: center; gap: 18px; padding: 11px 18px;
  background: linear-gradient(180deg, rgba(3,8,20,.97), rgba(3,8,20,.78));
  border-bottom: 1px solid var(--line); backdrop-filter: blur(14px);
}
.brand { display: flex; align-items: center; gap: 11px; letter-spacing: .08em; }
.brand-mark { width: 34px; aspect-ratio: 1; display: block; border: 1px solid var(--line-strong); transform: rotate(30deg); box-shadow: 0 0 18px rgba(52,215,255,.35), inset 0 0 12px rgba(52,215,255,.16); }
.brand strong { display: block; font-size: 13px; font-weight: 700; }
.brand span:last-child { display: block; margin-top: 3px; font-size: 10px; color: var(--line-strong); }

.search { display: flex; height: 40px; border: 1px solid var(--line); background: rgba(4,13,28,.8); clip-path: polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px); }
.search input { flex: 1; min-width: 0; border: 0; outline: 0; padding: 0 13px; color: var(--text); background: transparent; }
.search input::placeholder { color: #668497; }
.search button, .top-actions button, .zoom-controls button, .context-actions button, .route-actions button, .bookmarks-popover button {
  border: 1px solid var(--line); background: rgba(9,28,50,.72); cursor: pointer;
}
.search button { padding: 0 15px; border-width: 0 0 0 1px; color: var(--line-strong); }
.top-actions { display: flex; gap: 8px; }
.icon-action { min-height: 38px; padding: 7px 10px; font-size: 12px; white-space: nowrap; }
.icon-action:hover, .icon-action.active { border-color: var(--line-strong); background: rgba(32,143,184,.16); }

.status-strip {
  position: absolute; z-index: 7; top: 83px; left: 18px; display: flex; align-items: center; gap: 13px;
  padding: 8px 11px; color: var(--muted); font-size: 11px; background: rgba(3,10,24,.68);
  border: 1px solid rgba(77,215,255,.15); backdrop-filter: blur(8px);
}
.status-strip span { display: inline-flex; align-items: center; gap: 5px; }
.status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; box-shadow: 0 0 8px currentColor; }
.status-dot.blue { color: var(--blue); background: var(--blue); }
.status-dot.green { color: var(--green); background: var(--green); }
.status-dot.red { color: var(--red); background: var(--red); }
.status-dot.white { color: var(--white); background: var(--white); }
.status-strip .coordinates { padding-left: 9px; border-left: 1px solid var(--line); color: var(--text); font-variant-numeric: tabular-nums; }

.economy-hud {
  position: absolute; z-index: 8; top: 126px; left: 18px; display: flex; align-items: stretch; gap: 1px;
  background: rgba(77,215,255,.14); border: 1px solid rgba(77,215,255,.18); backdrop-filter: blur(10px);
}
.colony-shortcut, .hud-resource { min-width: 106px; padding: 9px 12px; background: rgba(3,10,24,.9); border: 0; }
.colony-shortcut { min-width: 142px; color: var(--text); text-align: left; cursor: pointer; }
.colony-shortcut:hover { background: rgba(19,62,92,.92); }
.colony-shortcut span, .hud-resource span { display: block; color: var(--muted); font-size: 9px; letter-spacing: .09em; text-transform: uppercase; }
.colony-shortcut strong, .hud-resource strong { display: block; margin-top: 3px; color: var(--text); font-size: 13px; font-variant-numeric: tabular-nums; }
.hud-resource.energy strong { color: var(--green); }
.hud-resource.energy { text-align:left; cursor:pointer; }
.hud-resource.energy:hover { background:rgba(19,62,92,.92); }

.detail-panel {
  position: absolute; z-index: 9; top: 88px; right: 18px; width: min(350px, calc(100% - 36px)); max-height: calc(100% - 250px);
  display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line);
  clip-path: polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px);
  box-shadow: 0 18px 70px rgba(0,0,0,.38); backdrop-filter: blur(16px);
}
.detail-panel.collapsed { display: none; }
.panel-head { display: flex; justify-content: space-between; gap: 14px; padding: 18px 18px 13px; border-bottom: 1px solid var(--line); }
.eyebrow { display: block; margin-bottom: 5px; color: var(--line-strong); font-size: 10px; letter-spacing: .14em; }
.panel-head h1 { margin: 0; font-size: 19px; font-weight: 600; }
.close-button, .popover-head button { width: 30px; height: 30px; border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 22px; }
.detail-content { padding: 16px 18px; overflow: auto; color: var(--muted); font-size: 13px; }
.detail-content p { margin: 0 0 12px; }
.data-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(77,215,255,.12); border: 1px solid rgba(77,215,255,.12); }
.datum { padding: 10px; background: rgba(4,14,30,.96); }
.datum span { display: block; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.datum strong { display: block; margin-top: 4px; color: var(--text); font-size: 13px; font-weight: 600; }
.resource-line { margin-top: 14px; padding: 11px; border-left: 2px solid var(--gold); background: rgba(255,204,102,.07); color: var(--text); }
.point-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 12px; }
.point-chip { width:100%; padding: 7px; text-align: center; border: 1px solid var(--line); color: var(--muted); background: rgba(4,14,30,.72); font:inherit; cursor:pointer; }
.point-chip:hover { color:var(--text); border-color:rgba(52,215,255,.65); background:rgba(52,215,255,.09); }
.point-chip.selected { color: var(--text); border-color: var(--line-strong); box-shadow: inset 0 0 13px rgba(52,215,255,.12); }
.position-fleet-list { display:grid; gap:6px; margin-top:12px; padding:11px; border:1px solid var(--line); background:rgba(52,215,255,.05); }.position-fleet-list > strong { color:var(--line-strong); font-size:10px; letter-spacing:.07em; text-transform:uppercase; }.position-fleet-list > span { display:flex; justify-content:space-between; gap:10px; color:var(--text); font-size:12px; }.position-fleet-list small { color:var(--muted); }
.context-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 13px 18px 18px; border-top: 1px solid var(--line); }
.context-actions button, .route-actions button { min-height: 36px; padding: 8px 12px; }
.context-actions button.primary, .route-actions button.primary { border-color: var(--line-strong); background: rgba(52,167,255,.22); }
.context-actions button.danger { border-color: rgba(255,82,103,.72); background: rgba(255,82,103,.13); color: #ff9da9; }
button:disabled { opacity: .4; cursor: not-allowed; }

.route-card { position: absolute; z-index: 11; left: 50%; bottom: 22px; transform: translateX(-50%); width: min(620px, calc(100% - 420px)); min-width: 380px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 13px 15px; background: var(--panel); border: 1px solid var(--line-strong); box-shadow: 0 14px 60px rgba(0,0,0,.45); }
.route-card strong { display: block; font-size: 13px; }
.route-actions { display: flex; gap: 8px; flex-shrink: 0; }
.route-card[hidden] { display: none; }

.bookmarks-popover { position: absolute; z-index: 14; top: 72px; right: 18px; width: 300px; max-height: 360px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 20px 60px rgba(0,0,0,.45); }
.bookmarks-popover[hidden] { display: none; }
.popover-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.bookmarks-list { padding: 8px; overflow: auto; max-height: 300px; }
.bookmark-row { width: 100%; display: flex; justify-content: space-between; gap: 8px; padding: 9px; color: var(--text); border: 0; background: transparent; text-align: left; cursor: pointer; }
.bookmark-row:hover { background: rgba(52,215,255,.08); }
.empty-state { padding: 18px; color: var(--muted); text-align: center; }

.colony-modal { position: absolute; z-index: 40; inset: 0; display: grid; place-items: stretch; padding: 0; background: #030817; }
.colony-modal[hidden] { display: none; }
.colony-window { width: 100%; height: 100dvh; max-height: none; overflow: hidden; display: flex; flex-direction: column; background: #050c1c; border: 0; border-top: 1px solid var(--line-strong); box-shadow: none; clip-path: none; }
.colony-head { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; padding:18px 22px; border-bottom:1px solid var(--line); }
.colony-head h2 { margin: 0; font-size: 25px; }
.colony-back { min-height:36px; display:inline-flex; align-items:center; gap:7px; padding:7px 10px; border:1px solid var(--line); color:var(--text); background:rgba(9,36,60,.9); cursor:pointer; }
.colony-back[hidden] { display:none; }
.colony-back:hover { border-color:var(--line-strong); }
.colony-tabs { display: flex; padding: 0 22px; border-bottom: 1px solid var(--line); scrollbar-width:none; }
.colony-tabs::-webkit-scrollbar,.subtabs::-webkit-scrollbar { display:none; }
.colony-tabs button { padding: 13px 16px; border: 0; border-bottom: 2px solid transparent; color: var(--muted); background: transparent; cursor: pointer; }
.colony-tabs button.active { color: var(--line-strong); border-bottom-color: var(--line-strong); }
.colony-content { flex: 1 1 auto; min-height: 0; padding: 20px 22px 24px; overflow: auto; }
.prototype-note { margin: 0 0 16px; padding: 10px 12px; border-left: 2px solid var(--gold); color: #f3dfb0; background: rgba(255,204,102,.08); font-size: 12px; }
.resource-cards, .building-grid, .fleet-grid { display: grid; gap: 10px; }
.resource-cards { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.building-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 18px; }
.fleet-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.resource-card, .building-card, .fleet-card { padding: 14px; border: 1px solid var(--line); background: rgba(7,21,41,.72); }
.resource-card > span, .building-card .meta, .fleet-card span { display: block; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .07em; }
.resource-card strong { display: block; margin: 5px 0 2px; font-size: 19px; }
.resource-card small, .building-card small, .fleet-card small { color: var(--muted); }
.energy-summary-button { width:100%; color:var(--text); text-align:left; cursor:pointer; }
.energy-summary-button:hover { border-color:var(--line-strong); background:rgba(12,35,60,.88); }
.energy-summary-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; margin-bottom:16px; border:1px solid var(--line); background:rgba(77,215,255,.14); }
.energy-summary-grid article { display:grid; gap:6px; padding:16px; background:#071426; }
.energy-summary-grid span { color:var(--muted); font-size:10px; letter-spacing:.07em; text-transform:uppercase; }
.energy-summary-grid strong { font-size:22px; }
.energy-negative { color:var(--red); }
.energy-report-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.energy-report-grid > section { padding:18px; border:1px solid var(--line); background:rgba(7,21,41,.72); }
.energy-report-grid h3 { margin:0 0 12px; }
.energy-report-row { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:11px 0; border-bottom:1px solid rgba(77,215,255,.13); }
.energy-report-row > div { display:flex; align-items:center; gap:9px; }
.energy-report-row span { color:var(--muted); }
.energy-report-row span strong,.energy-report-row span small { display:block; }
.energy-report-row span strong { color:var(--text); }
.energy-report-row span small { margin-top:2px; }
.energy-report-row.total { margin-top:8px; border-top:1px solid var(--line-strong); border-bottom:0; }
.energy-formula-note { margin:16px 0 0; padding:11px 12px; border-left:2px solid var(--line-strong); color:var(--muted); background:rgba(52,215,255,.06); font-size:11px; line-height:1.5; }
.building-card { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 12px; }
.building-card h3, .fleet-card h3 { margin: 3px 0 7px; font-size: 15px; }
.building-card p, .fleet-card p { margin: 0 0 10px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.building-card button, .fleet-card button, .prototype-action { min-height: 35px; padding: 7px 11px; color: var(--text); border: 1px solid var(--line); background: rgba(9,36,60,.9); cursor: pointer; }
.building-card button:hover, .fleet-card button:hover, .prototype-action:hover { border-color: var(--line-strong); }
.building-card button:disabled, .fleet-card button:disabled { cursor: not-allowed; }
.fleet-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 8px; }
.fleet-actions button { flex: 1 1 130px; }
.fleet-card small { color: var(--muted); }
.fleet-card.selected-fleet { border-color: rgba(53,167,255,.85); box-shadow: inset 0 0 22px rgba(53,167,255,.08); }
.split-fleet { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.split-fleet summary { color: #dff8ff; cursor: pointer; }
.split-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin: 10px 0; }
.split-grid label { display: grid; gap: 4px; color: var(--muted); font-size: 11px; }
.split-grid input { min-width: 0; padding: 7px 8px; color: var(--text); border: 1px solid var(--line); background: rgba(2,10,22,.9); }
.cargo-section { margin: 14px 0; padding: 12px; border: 1px solid rgba(255,204,102,.3); background: rgba(255,204,102,.04); }
.cargo-hold { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.cargo-resource { display: grid; grid-template-columns: minmax(120px,1fr) 86px 58px auto auto; gap: 6px; align-items: center; margin-top: 7px; }
.cargo-resource input { min-width: 0; padding: 7px; color: var(--text); border: 1px solid var(--line); background: rgba(2,10,22,.9); }
.cargo-resource button { min-height: 32px; padding: 6px 9px; color: var(--text); border: 1px solid var(--line); background: rgba(9,36,60,.9); }
@media (max-width: 620px) { .cargo-resource { grid-template-columns: 78px 58px 1fr 1fr; } .cargo-resource > span { grid-column:1 / -1; } }
.order-card { margin-top: 16px; padding: 13px; border: 1px solid rgba(67,229,157,.38); background: rgba(67,229,157,.07); }
.order-line { display: flex; justify-content: space-between; gap: 18px; align-items: center; }
.progress-track { height: 6px; margin-top: 10px; background: rgba(255,255,255,.08); overflow: hidden; }
.progress-track i { display: block; height: 100%; background: linear-gradient(90deg,var(--blue),var(--green)); }
.section-title { margin: 22px 0 10px; font-size: 18px; }
.empty-fleet { padding: 26px; color: var(--muted); text-align: center; border: 1px dashed var(--line); }

.zoom-controls { position: absolute; z-index: 8; left: 18px; bottom: 22px; display: grid; gap: 6px; }
.zoom-controls button { width: 40px; height: 40px; font-size: 18px; }
.zoom-controls button:hover { border-color: var(--line-strong); }
.minimap-shell { position: absolute; z-index: 8; right: 18px; bottom: 22px; width: 220px; height: 180px; background: rgba(3,10,24,.78); border: 1px solid var(--line); backdrop-filter: blur(10px); }
#minimap { display: block; width: 100%; height: 100%; }
.toast { position: absolute; z-index: 30; left: 50%; top: 92px; transform: translate(-50%, -12px); padding: 9px 13px; color: var(--text); background: rgba(5,17,34,.94); border: 1px solid var(--line); opacity: 0; pointer-events: none; transition: .2s ease; }
.toast.visible { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 1100px) {
  .topbar { grid-template-columns: 1fr auto; }
  .search { grid-column: 1 / -1; grid-row: 2; }
  .topbar { min-height: 118px; }
  .status-strip { top: 128px; }
  .economy-hud { top: 171px; }
  .detail-panel { top: 128px; max-height: calc(100% - 350px); }
  .route-card { width: min(560px, calc(100% - 300px)); }
}

@media (max-width: 700px) {
  .app-shell { min-height: 560px; }
  .topbar { padding: 8px 10px; gap: 8px; }
  .brand strong { font-size: 11px; }
  .brand-mark { width: 28px; }
  .top-actions { gap: 4px; }
  .icon-action { padding: 5px 7px; font-size: 10px; }
  .status-strip { left: 10px; right: 10px; overflow: hidden; white-space: nowrap; }
  .economy-hud { top: 169px; left: 10px; right: 10px; overflow-x: auto; }
  .colony-shortcut, .hud-resource { min-width: 96px; }
  .resource-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .building-grid, .fleet-grid { grid-template-columns: 1fr; }
  .colony-modal { padding: 0; }
  .colony-window { height: 100dvh; max-height: none; }
  .status-strip span:not(.coordinates) { display: none; }
  .status-strip .coordinates { border: 0; padding: 0; }
  .detail-panel { top: auto; left: 10px; right: 10px; bottom: 10px; width: auto; max-height: 43%; }
  .detail-panel.collapsed { display: none; }
  .minimap-shell { right: 10px; bottom: 10px; width: 140px; height: 110px; }
  .zoom-controls { left: 10px; bottom: 10px; }
  .zoom-controls button { width: 36px; height: 36px; }
  .route-card { left: 10px; right: 10px; bottom: 10px; transform: none; width: auto; min-width: 0; flex-direction: column; align-items: stretch; }
  .route-actions button { flex: 1; }
  .bookmarks-popover { top: 118px; right: 10px; left: 10px; width: auto; }
}

@media (max-width: 430px) {
  .top-actions .icon-action:first-child { display: none; }
  .brand span:last-child { display: none; }
  .point-list { grid-template-columns: repeat(2, 1fr); }
}

/* HUD gestionale */
.topbar-spacer { min-width: 0; }
.hud-resource.endgame strong { color: #d7b4ff; }
.main-menu { position: absolute; z-index: 16; top: 126px; left: 18px; width: 48px; overflow: hidden; border: 1px solid var(--line); background: rgba(3,10,24,.94); box-shadow: 0 14px 50px rgba(0,0,0,.34); backdrop-filter: blur(14px); transition: width .2s ease; }
.main-menu.expanded { width: 190px; }
.main-menu button { width: 100%; min-height: 46px; display: grid; grid-template-columns: 46px 1fr auto; align-items: center; padding: 0; border: 0; border-bottom: 1px solid rgba(77,215,255,.12); color: var(--muted); background: transparent; text-align: left; cursor: pointer; }
.main-menu button:hover { color: var(--text); background: rgba(52,215,255,.1); }
.main-menu-toggle { color: var(--line-strong) !important; }
.menu-glyph, .main-menu-toggle > span:first-child { display: grid; place-items: center; width: 46px; font-size: 18px; }
.menu-label { white-space: nowrap; }
.menu-count { margin-right: 10px; min-width: 20px; padding: 2px 5px; border-radius: 9px; color: var(--line-strong); background: rgba(52,215,255,.1); text-align: center; font-size: 10px; }
.economy-hud { left: 76px; }
.engine-power { display: grid; grid-template-columns: 1fr auto; gap: 5px 12px; align-items: center; margin-top: 10px; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.engine-power input { grid-column: 1 / -1; width: 230px; accent-color: var(--line-strong); }
.engine-power output { color: var(--text); font-variant-numeric: tabular-nums; }
.colony-window { width:100%; height:100dvh; max-height:none; }
.empty-state.compact { display: grid; gap: 4px; padding: 12px; border: 1px dashed var(--line); }
.empty-state.large { min-height: 210px; display: grid; place-content: center; gap: 8px; border: 1px dashed var(--line); background: rgba(7,21,41,.42); }
.empty-state.large strong { color: var(--text); font-size: 18px; }
.empty-state.large span { max-width: 520px; }
.compact-resources { grid-template-columns: repeat(6,minmax(0,1fr)); margin-bottom: 16px; }
.compact-resources .resource-card { padding: 10px 11px; }
.compact-resources .resource-card strong { font-size: 14px; }
.resource-card-head { display:flex; align-items:center; gap:8px; min-width:0; }
.resource-card-head > span:last-child { display:block; min-width:0; overflow:hidden; color:var(--muted); font-size:10px; text-overflow:ellipsis; text-transform:uppercase; letter-spacing:.07em; white-space:nowrap; }
.resource-icon { --resource-color:var(--line-strong); position:relative; z-index:2; flex:0 0 auto; width:28px; height:24px; display:inline-grid; place-items:center; color:var(--resource-color); border:1px solid color-mix(in srgb,var(--resource-color) 65%,transparent); border-radius:4px; background:color-mix(in srgb,var(--resource-color) 11%,#061326); font-size:10px; font-weight:800; line-height:1; text-transform:none; letter-spacing:0; cursor:help; }
.resource-icon.small { width:30px; height:26px; font-size:10px; }
.resource-icon.tiny { width:17px; height:15px; margin-right:4px; font-size:7px; vertical-align:-3px; }
.resource-ferrite { --resource-color:#c8d7df; }.resource-silicio { --resource-color:#57dcff; }.resource-chronite { --resource-color:#7a9cff; }.resource-xenolitio { --resource-color:#d67cff; }.resource-titanioNero { --resource-color:#ad8cff; }.resource-energy { --resource-color:#ffd45c; }.resource-area { --resource-color:#67e8a5; }
.resource-icon[data-tooltip]::after { content:attr(data-tooltip); position:absolute; z-index:80; left:0; top:calc(100% + 8px); width:max-content; max-width:min(230px,calc(100vw - 48px)); display:none; padding:7px 9px; color:var(--text); border:1px solid var(--line); background:#071426; box-shadow:0 10px 30px rgba(0,0,0,.5); font-size:11px; font-weight:400; line-height:1.35; text-transform:none; letter-spacing:0; white-space:normal; pointer-events:none; }
.resource-icon[data-tooltip]:hover::after,.resource-icon[data-tooltip]:focus::after { display:block; }
.colony-overview-grid { display: grid; grid-template-columns: minmax(0,2fr) minmax(260px,1fr); gap: 14px; }
.planet-visual { position: relative; min-height: 285px; overflow: hidden; border: 1px solid var(--line); background: radial-gradient(circle at 74% 20%,rgba(52,215,255,.22),transparent 12%),linear-gradient(180deg,#071b34 0 46%,#183041 47%,#0c1b29 100%); }
.planet-horizon { position: absolute; inset: 34% -10% -35%; border-radius: 50% 50% 0 0; background: radial-gradient(ellipse at 46% 25%,#42636e 0,#1b3948 34%,#0b1e2d 72%); box-shadow: inset 0 18px 45px rgba(86,189,209,.16); }
.structure-pip { position: absolute; bottom: 48%; width: 50px; height: 60px; border: 1px solid var(--line-strong); background: linear-gradient(135deg,rgba(52,215,255,.18),rgba(5,17,34,.95)); clip-path: polygon(24% 0,76% 0,100% 70%,78% 100%,22% 100%,0 70%); box-shadow: 0 0 22px rgba(52,215,255,.22); }
.structure-pip.p1 { left: 28%; transform: scale(.8); }.structure-pip.p2 { left: 48%; bottom: 55%; }.structure-pip.p3 { right: 25%; transform: scale(.65); }
.planet-caption { position: absolute; left: 16px; right: 16px; bottom: 14px; display: grid; gap: 3px; }
.planet-caption span,.planet-caption small { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .09em; }.planet-caption strong { font-size: 21px; }
.colony-facts,.fleet-detail-grid > section { padding: 18px; border: 1px solid var(--line); background: rgba(7,21,41,.72); }.colony-facts h3,.fleet-detail-grid h3 { margin: 0 0 14px; }
.fact-row { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid rgba(77,215,255,.12); color: var(--muted); }.fact-row strong { color: var(--text); }.fact-row.total { margin-top: 8px; color: var(--text); }
.activity-board { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-top: 14px; }.activity-board > div { min-height: 78px; padding: 12px; border: 1px solid var(--line); background: rgba(7,21,41,.72); }.activity-board > div > span:first-child { display: block; margin-bottom: 7px; color: var(--line-strong); font-size: 9px; letter-spacing: .1em; }.activity-board small,.activity-board span { color: var(--muted); font-size: 11px; }
.subtabs { display: flex; gap: 6px; margin-bottom: 14px; scrollbar-width:none; }.subtabs button { min-width: 130px; padding: 9px 13px; border: 1px solid var(--line); color: var(--muted); background: rgba(7,21,41,.72); cursor: pointer; }.subtabs button.active { color: var(--text); border-color: var(--line-strong); background: rgba(52,167,255,.14); }
.unit-silhouette { float: right; display: grid; place-items: center; width: 62px; height: 44px; color: var(--line-strong); border: 1px solid var(--line); background: radial-gradient(circle,rgba(52,215,255,.15),transparent 70%); font-size: 28px; }
.catalog-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }.ship-catalog-card { min-height: 205px; }
.queue-stack { display: grid; gap: 8px; }.queue-stack .order-card { margin: 0; }.order-line > div { display: grid; gap: 3px; }.order-line small { color: var(--muted); font-size: 9px; letter-spacing: .08em; }.queue-cancel { flex: 0 0 30px; width: 30px; height: 30px; border: 1px solid rgba(255,82,103,.42); color: #ff9da9; background: rgba(255,82,103,.08); cursor: pointer; }
.order-line em { color:var(--green); font-size:10px; font-style:normal; }
.production-workspace { display:grid; grid-template-columns:minmax(560px,1.15fr) minmax(390px,.85fr); gap:14px; align-items:start; }
.ship-production-list,.production-detail-column { min-width:0; display:grid; gap:10px; }
.ship-production-card { min-width:0; display:grid; grid-template-columns:132px minmax(0,1fr); overflow:visible; border:1px solid rgba(77,215,255,.22); background:rgba(7,21,41,.72); cursor:pointer; }
.ship-production-card:hover { border-color:rgba(77,215,255,.55); background:rgba(11,35,58,.78); }
.ship-production-card.selected { border-color:var(--line-strong); box-shadow:inset 3px 0 0 var(--line-strong),0 0 20px rgba(52,215,255,.08); }
.ship-sample.medium { min-height:178px; }
.ship-sample.medium span { font-size:44px; }
.ship-production-copy { min-width:0; display:grid; align-content:center; gap:9px; padding:13px; }
.ship-production-title { display:flex; align-items:baseline; justify-content:space-between; gap:16px; }
.ship-production-title h3 { margin:0; font-size:17px; }
.ship-production-title strong { color:var(--line-strong); font-size:9px; text-align:right; text-transform:uppercase; letter-spacing:.06em; }
.ship-logistics-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(92px,1fr)); gap:5px; }
.ship-logistics-stats > span { display:grid; gap:2px; padding:6px 8px; color:var(--muted); border:1px solid rgba(77,215,255,.13); background:rgba(2,11,24,.48); font-size:8px; text-transform:uppercase; }
.ship-logistics-stats strong { color:var(--text); font-size:10px; text-transform:none; }
.ship-military-stats { display:flex; flex-wrap:wrap; gap:6px; }
.ship-stat { position:relative; z-index:3; display:grid; grid-template-columns:22px auto; grid-template-rows:auto auto; align-items:center; column-gap:6px; min-width:112px; padding:5px 7px; color:var(--muted); border:1px solid rgba(77,215,255,.15); background:rgba(4,16,32,.7); font-size:8px; cursor:help; }
.ship-stat > i { grid-row:1 / 3; display:grid; place-items:center; width:22px; height:22px; color:var(--line-strong); border:1px solid rgba(77,215,255,.3); border-radius:50%; font-style:normal; }
.ship-stat > strong { color:var(--text); font-size:9px; }
.ship-stat[data-tooltip]::after { content:attr(data-tooltip); position:absolute; z-index:90; left:0; top:calc(100% + 6px); width:220px; display:none; padding:8px 9px; color:var(--text); border:1px solid var(--line); background:#071426; box-shadow:0 12px 32px rgba(0,0,0,.58); font-size:10px; font-weight:400; line-height:1.4; pointer-events:none; }
.ship-stat[data-tooltip]:hover::after,.ship-stat[data-tooltip]:focus::after { display:block; }
.ship-order-controls { display:grid; grid-template-columns:auto minmax(180px,1fr) auto; gap:8px; align-items:center; }
.ship-order-controls .quantity-stepper input { width:62px; }
.ship-order-controls button { min-height:36px; padding:7px 10px; border:1px solid var(--line); color:var(--text); background:rgba(9,36,60,.9); cursor:pointer; }
.ship-order-controls > button { border-color:var(--line-strong); background:rgba(52,167,255,.16); }
.ship-order-controls button:disabled { opacity:.42; cursor:not-allowed; }
.ship-batch-cost { color:var(--muted); font-size:10px; }
.ship-batch-cost.missing,.missing-text { color:#ff8796 !important; }
.production-detail-column { position:sticky; top:72px; }
.ship-production-detail { overflow:visible; border:1px solid var(--line); background:rgba(7,21,41,.72); }
.ship-production-detail .ship-sample.large { min-height:270px; border-right:0; border-bottom:1px solid var(--line); }
.ship-production-detail .ship-sample.large span { font-size:86px; }
.ship-production-detail .ship-sample.large i { width:260px; height:88px; }
.ship-production-detail-copy { padding:17px; }
.ship-production-detail-copy h3 { margin:4px 0 9px; font-size:23px; }
.ship-production-detail-copy > p { margin:0 0 13px; color:var(--muted); font-size:12px; line-height:1.5; }
.ship-production-detail-copy .ship-logistics-stats,.ship-production-detail-copy .ship-military-stats { margin-bottom:11px; }
.atomic-note { display:block; margin-top:13px; padding:10px 11px; color:#bdebd6; border-left:2px solid var(--green); background:rgba(67,229,157,.06); font-size:10px; line-height:1.45; }
.data-table { min-width: 820px; border: 1px solid var(--line); }.table-head,.table-row { display: grid; align-items: stretch; }.table-head { color: var(--muted); background: rgba(20,54,79,.72); font-size: 10px; text-transform: uppercase; letter-spacing: .07em; }.table-head span { padding: 10px 12px; }.table-row { width: 100%; padding: 0; border: 0; border-top: 1px solid rgba(77,215,255,.12); color: var(--text); background: rgba(7,21,41,.58); text-align: left; cursor: default; }.table-row:hover { background: rgba(52,215,255,.08); }.table-row > span,.table-row > strong { min-width: 0; padding: 13px 12px; overflow-wrap: anywhere; }.table-row span { color: var(--muted); font-weight: 400; }.table-row small { display: block; margin-top: 4px; color: var(--muted); font-weight: 400; }.data-table:not(.empire-table):not(.fleet-table) .table-head,.data-table:not(.empire-table):not(.fleet-table) .table-row { grid-template-columns: 1.1fr 1fr .8fr .5fr; }.empire-table .table-head,.empire-table .table-row { grid-template-columns: 1.05fr .7fr 1.6fr 1fr 1fr 1fr; }.fleet-table .table-head,.fleet-table .table-row { grid-template-columns: 1.2fr 1fr 1fr 1fr .8fr; }
.fleet-name-button { min-width:0; display:grid; align-content:center; gap:3px; padding:13px 12px; border:0; color:var(--text); background:transparent; text-align:left; cursor:pointer; }.fleet-name-button strong { font-size:14px; }.fleet-name-button:hover { color:var(--line-strong); background:rgba(52,215,255,.08); }.table-location { border-left:1px solid transparent !important; border-right:1px solid transparent !important; }.table-location:hover { border-color:rgba(52,215,255,.35) !important; box-shadow:inset 3px 0 0 var(--line-strong); }
.fleet-filter-banner { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:12px; padding:13px 15px; border:1px solid var(--line-strong); background:rgba(52,167,255,.1); }.fleet-filter-banner > div { display:grid; gap:3px; }.fleet-filter-banner span { color:var(--line-strong); font-size:9px; letter-spacing:.09em; }.fleet-filter-banner strong { font-size:15px; }.fleet-filter-banner small { color:var(--muted); }.fleet-filter-banner button { min-height:36px; padding:8px 12px; border:1px solid var(--line); color:var(--text); background:rgba(9,36,60,.9); cursor:pointer; }.fleet-filter-banner button:hover { border-color:var(--line-strong); }.fleet-empty-row { grid-column:1 / -1; display:grid; justify-items:center; gap:5px; padding:28px 16px; border-top:1px solid rgba(77,215,255,.12); color:var(--muted); text-align:center; }.fleet-empty-row strong { color:var(--text); }
.production-planner { display: grid; grid-template-columns: 1.2fr 1fr .6fr 1.5fr auto; gap: 10px; align-items: end; padding: 16px; border: 1px solid var(--line); background: rgba(7,21,41,.72); }.production-planner > div,.production-planner label { display: grid; gap: 5px; }.production-planner span,.production-planner label { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .07em; }.production-planner strong { color: var(--text); font-size: 14px; }.production-planner small { color: var(--muted); text-transform: none; letter-spacing: 0; }.production-planner select,.production-planner input,.production-planner button { min-height: 40px; padding: 8px 10px; border: 1px solid var(--line); color: var(--text); background: rgba(2,10,22,.9); }.production-planner button { cursor: pointer; border-color: var(--line-strong); background: rgba(52,167,255,.16); }
.empire-queue-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(420px,1fr)); gap:12px; }.empire-queue-card { min-width:0; padding:14px; border:1px solid var(--line); background:rgba(7,21,41,.72); }.empire-queue-card > header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:12px; padding-bottom:10px; border-bottom:1px solid rgba(77,215,255,.14); }.empire-queue-card > header > div { display:grid; gap:3px; }.empire-queue-card > header > div:last-child { text-align:right; }.empire-queue-card header span,.empire-queue-card header small { color:var(--muted); font-size:9px; letter-spacing:.07em; text-transform:uppercase; }.empire-queue-card header h3 { margin:0; }.empire-queue-card > h4 { margin:16px 0 8px; color:var(--muted); font-size:10px; letter-spacing:.07em; text-transform:uppercase; }.colony-production-controls { display:grid; grid-template-columns:minmax(150px,1fr) 90px minmax(190px,1.2fr) auto; gap:8px; align-items:end; }.colony-production-controls label,.colony-production-controls > div { display:grid; gap:4px; color:var(--muted); font-size:9px; letter-spacing:.06em; text-transform:uppercase; }.colony-production-controls select,.colony-production-controls input,.colony-production-controls button { min-width:0; min-height:38px; padding:7px 9px; border:1px solid var(--line); color:var(--text); background:#020a16; }.colony-production-controls button { border-color:var(--line-strong); background:rgba(52,167,255,.16); cursor:pointer; }.colony-production-controls small { line-height:1.35; letter-spacing:0; text-transform:none; }.colony-production-unavailable { display:grid; gap:4px; padding:12px; border:1px solid rgba(255,82,103,.35); color:#ffb2bb; background:rgba(255,82,103,.07); }.colony-production-unavailable span { color:var(--muted); font-size:10px; }.empire-production-command { display:grid; grid-template-columns:minmax(240px,1fr) minmax(320px,1.5fr) auto; gap:16px; align-items:center; padding:18px; border:1px solid var(--line-strong); background:linear-gradient(135deg,rgba(9,38,66,.9),rgba(5,17,34,.84)); }.empire-production-command > div { display:grid; gap:4px; }.empire-production-command span,.empire-production-command small { color:var(--muted); font-size:9px; letter-spacing:.07em; text-transform:uppercase; }.empire-production-command h3,.empire-production-command p { margin:0; }.empire-production-command p { color:var(--muted); font-size:10px; }.empire-production-command button { min-height:42px; padding:9px 14px; border:1px solid var(--line-strong); color:var(--text); background:rgba(52,167,255,.18); cursor:pointer; }
.fleet-sticky { position: sticky; z-index: 2; top: -20px; display: grid; grid-template-columns: 1.5fr repeat(3,1fr); gap: 1px; margin: -20px -22px 18px; padding: 10px 22px; background: rgba(3,10,24,.98); border-bottom: 1px solid var(--line); }.fleet-sticky > div,.fleet-sticky > label { display: grid; align-content: center; gap: 5px; padding: 7px 10px; border: 1px solid rgba(77,215,255,.12); color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }.fleet-sticky strong { color: var(--text); font-size: 12px; text-transform: none; letter-spacing: 0; }.fleet-sticky label > div { display: flex; }.fleet-sticky input { min-width: 0; flex: 1; padding: 7px; border: 1px solid var(--line); color: var(--text); background: rgba(2,10,22,.9); }.fleet-sticky button { padding: 7px 9px; border: 1px solid var(--line); color: var(--text); background: rgba(9,36,60,.9); cursor: pointer; }
.fleet-detail-grid { display: grid; grid-template-columns: minmax(240px,.7fr) minmax(0,2fr); gap: 14px; }.fleet-detail-grid .fleet-card { padding: 0; border: 0; background: transparent; }.move-workspace { min-height: 280px; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 24px; border: 1px dashed var(--line); text-align: center; }.move-workspace p { max-width: 650px; color: var(--muted); }.primary-action { min-height: 42px; padding: 9px 16px; border: 1px solid var(--line-strong); color: var(--text); background: rgba(52,167,255,.2); cursor: pointer; }
.location-label { position:relative; min-width:0; display:grid !important; align-content:center; gap:3px; padding:10px 12px !important; border:0 !important; color:var(--text) !important; background:transparent !important; text-align:left; cursor:pointer; }
.location-label strong { min-width:0; overflow:hidden; color:var(--text); font-size:12px; text-overflow:ellipsis; white-space:nowrap; }.location-label small { margin:0 !important; color:var(--muted); font-size:10px; }.location-label:hover { color:var(--line-strong) !important; background:rgba(52,215,255,.08) !important; }.location-label[data-tooltip]::after { content:attr(data-tooltip); position:absolute; z-index:20; left:10px; top:calc(100% - 3px); width:max-content; max-width:250px; display:none; padding:7px 9px; border:1px solid var(--line); color:var(--text); background:#071426; box-shadow:0 10px 28px rgba(0,0,0,.55); font-size:10px; line-height:1.4; }.location-label[data-tooltip]:hover::after { display:block; }
.fleet-overview { display:grid; grid-template-columns:minmax(250px,.42fr) minmax(0,1.58fr); gap:14px; align-items:start; }.fleet-overview > aside,.fleet-overview > section { min-width:0; padding:18px; border:1px solid var(--line); background:rgba(7,21,41,.72); }.fleet-overview h3 { margin:0 0 14px; }.fleet-composition { position:sticky; top:92px; }.fleet-operations { display:grid; gap:7px; margin-top:16px; }.fleet-operations button,.move-planner button,.destination-choices button { min-height:36px; padding:7px 10px; border:1px solid var(--line); color:var(--text); background:rgba(9,36,60,.9); cursor:pointer; }.fleet-operations button:hover,.move-planner button:hover,.destination-choices button:hover { border-color:var(--line-strong); }.fleet-operations .danger-action { border-color:rgba(255,82,103,.7); color:#ffb2bb; background:rgba(255,82,103,.11); }
.unit-logistics-grid { display:grid; gap:10px; }.unit-logistics-card { min-width:0; display:grid; grid-template-columns:150px minmax(0,1fr); overflow:visible; border:1px solid rgba(77,215,255,.2); background:rgba(3,13,29,.58); }.ship-sample { position:relative; min-height:150px; display:grid; place-items:center; overflow:hidden; border-right:1px solid var(--line); background:radial-gradient(circle,rgba(52,215,255,.18),transparent 45%),linear-gradient(145deg,#0a2740,#06101f); }.ship-sample span { position:relative; z-index:1; color:var(--line-strong); font-size:54px; text-shadow:0 0 22px rgba(52,215,255,.55); }.ship-sample i { position:absolute; width:120px; height:45px; border:1px solid rgba(52,215,255,.18); border-radius:50%; transform:rotate(-12deg); }.unit-logistics-copy { min-width:0; padding:14px; }.unit-logistics-copy > span { color:var(--line-strong); font-size:9px; letter-spacing:.09em; }.unit-logistics-copy h4 { margin:3px 0 11px; font-size:17px; }.logistics-specs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }.logistics-specs > span { display:grid; gap:3px; padding:8px; color:var(--muted); border:1px solid rgba(77,215,255,.12); font-size:9px; text-transform:uppercase; }.logistics-specs strong { color:var(--text); font-size:11px; text-transform:none; }.individual-assets { display:grid; gap:5px; margin-top:8px; }.individual-assets > div { display:flex; flex-wrap:wrap; justify-content:space-between; gap:5px 12px; padding:7px 9px; border-left:2px solid var(--line); color:var(--muted); background:rgba(52,215,255,.04); font-size:10px; }.individual-assets strong { color:var(--text); }.unit-logistics-card .cargo-section { margin:10px 0 0; }
.ship-sample.has-image { background:#020914; }
.ship-sample.has-image img { width:100%; height:100%; min-height:inherit; display:block; object-fit:cover; object-position:center; filter:saturate(.9) contrast(1.04); }
.ship-production-card .ship-sample.has-image img,.unit-logistics-card .ship-sample.has-image img,.move-unit-row .ship-sample.has-image img { box-sizing:border-box; object-fit:contain; padding:4px; transform:scale(1.3); }
.ship-production-detail .ship-sample.large.has-image img { object-fit:cover; padding:0; transform:none; }
.unit-logistics-card.compact { grid-template-columns:90px minmax(0,1fr); }.unit-logistics-card.compact .ship-sample { min-height:96px; }.unit-logistics-card.compact .ship-sample span { font-size:38px; }.unit-logistics-card.compact .unit-logistics-copy { display:grid; align-content:center; gap:8px; padding:11px 12px; }.unit-title-line { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }.unit-title-line h4 { margin:0; }.unit-title-line > strong { color:var(--line-strong); font-size:10px; text-transform:uppercase; }.logistics-specs.inline { grid-template-columns:repeat(auto-fit,minmax(125px,1fr)); }.logistics-specs.inline > span,.cargo-summary-button { min-height:50px; display:grid; align-content:center; gap:3px; padding:8px 10px; color:var(--muted); border:1px solid rgba(77,215,255,.18); background:rgba(4,16,32,.76); font-size:9px; text-align:left; text-transform:uppercase; }.cargo-summary-button { position:relative; color:var(--line-strong); border-color:rgba(52,215,255,.6); background:linear-gradient(180deg,rgba(20,69,96,.82),rgba(7,29,50,.9)); box-shadow:0 3px 0 rgba(20,91,122,.7),inset 0 1px 0 rgba(255,255,255,.08); cursor:pointer; transform:translateY(-2px); }.cargo-summary-button:hover { border-color:var(--line-strong); background:linear-gradient(180deg,rgba(28,91,125,.92),rgba(9,39,65,.96)); box-shadow:0 4px 0 rgba(20,91,122,.8),0 0 18px rgba(52,215,255,.14); }.cargo-summary-button:active { box-shadow:0 1px 0 rgba(20,91,122,.8); transform:translateY(1px); }.cargo-summary-button strong,.supply-inline strong { color:var(--text); font-size:11px; text-transform:none; }.cargo-summary-button small { min-width:0; overflow:hidden; color:var(--muted); font-size:8px; text-overflow:ellipsis; text-transform:none; white-space:nowrap; }
.fleet-popup-backdrop { position:fixed; z-index:70; inset:0; display:grid; place-items:center; padding:24px; background:rgba(0,3,10,.78); backdrop-filter:blur(8px); }.fleet-popup { width:min(900px,100%); max-height:min(760px,calc(100dvh - 48px)); display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--line-strong); background:#050c1c; box-shadow:0 28px 90px rgba(0,0,0,.72); }.fleet-popup > header { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 18px; border-bottom:1px solid var(--line); }.fleet-popup h3 { margin:0; font-size:21px; }.fleet-popup header button { width:34px; height:34px; border:0; color:var(--muted); background:transparent; font-size:24px; cursor:pointer; }.cargo-popup-summary { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; border-bottom:1px solid var(--line); background:rgba(77,215,255,.12); }.cargo-popup-summary span { display:grid; gap:4px; padding:12px 18px; color:var(--muted); background:#071426; font-size:9px; text-transform:uppercase; }.cargo-popup-summary strong { color:var(--text); font-size:15px; text-transform:none; }.fleet-popup .prototype-note { margin:12px 18px 0; }.cargo-popup-resources { min-height:0; display:grid; gap:7px; padding:14px 18px; overflow:auto; }.cargo-popup-resources article { display:grid; grid-template-columns:minmax(180px,1fr) 110px 90px 90px; gap:7px; align-items:center; }.cargo-popup-resources article:has([data-fleet-cargo-max]) { grid-template-columns:minmax(180px,1fr) 110px 58px 90px 90px; }.cargo-popup-resources article > div { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:9px; min-width:0; padding:7px 10px; border:1px solid var(--line); background:rgba(7,21,41,.72); }.cargo-popup-resources article > div span { color:var(--muted); }.cargo-popup-resources input,.cargo-popup-resources button { min-width:0; min-height:38px; padding:7px 9px; border:1px solid var(--line); color:var(--text); background:#020a16; }.cargo-popup-resources button { background:rgba(9,36,60,.9); cursor:pointer; }.cargo-individual-breakdown { margin:0 18px 18px; padding:11px 12px; border:1px solid var(--line); color:var(--muted); }.cargo-individual-breakdown summary { color:var(--text); cursor:pointer; }.cargo-individual-breakdown > div { display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid rgba(77,215,255,.1); font-size:11px; }.cargo-individual-breakdown strong { color:var(--text); }
.mining-status { display:grid; grid-template-columns:1.2fr repeat(4,1fr); gap:1px; margin-top:14px; border:1px solid rgba(67,229,157,.45); background:rgba(67,229,157,.14); }.mining-status > div { display:grid; align-content:center; gap:4px; min-height:75px; padding:12px; background:#071b24; }.mining-status span { color:var(--green); font-size:9px; letter-spacing:.08em; text-transform:uppercase; }.mining-status strong { font-size:13px; }.mining-status small { color:var(--muted); }
.move-units > .prototype-note { margin:0 0 8px; }.move-unit-row.committed { opacity:.58; }
.move-planner { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(300px,.7fr); gap:14px; align-items:start; }.move-units,.move-route-panel { min-width:0; padding:18px; border:1px solid var(--line); background:rgba(7,21,41,.72); }.move-units .section-heading > div { display:flex; gap:6px; }.move-unit-row { display:grid; grid-template-columns:80px minmax(180px,1fr) auto; gap:12px; align-items:center; padding:10px 0; border-bottom:1px solid rgba(77,215,255,.12); }.move-unit-row .ship-sample { min-height:64px; border:1px solid var(--line); }.move-unit-row .ship-sample span { font-size:28px; }.move-unit-row > div:nth-child(2) { display:grid; gap:3px; }.move-unit-row > div:nth-child(2) span,.move-unit-row > div:nth-child(2) small { color:var(--muted); font-size:10px; }.quantity-stepper { display:flex; }.quantity-stepper input { width:70px; min-height:36px; padding:7px; border:1px solid var(--line); color:var(--text); background:#020a16; text-align:center; }.quantity-stepper button { min-width:36px; }.move-power { display:grid; grid-template-columns:1fr auto; gap:6px 12px; margin-top:16px; color:var(--muted); font-size:11px; }.move-power input { grid-column:1 / -1; width:100%; accent-color:var(--line-strong); }.move-route-panel { display:grid; gap:9px; }.move-route-panel h3 { margin:0 0 6px; }.move-preview { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:6px; padding:12px; border:1px solid rgba(67,229,157,.34); background:rgba(67,229,157,.06); }.move-preview > div { display:grid; gap:3px; }.move-preview span { color:var(--muted); font-size:9px; text-transform:uppercase; }.move-preview strong { font-size:12px; }.move-preview p,.move-preview button { grid-column:1 / -1; }.move-preview p { margin:4px 0; font-size:10px; }.move-preview.error { display:block; color:#ff9da9; border-color:rgba(255,82,103,.55); background:rgba(255,82,103,.08); }.move-preview.muted { display:block; color:var(--muted); border-color:var(--line); background:transparent; }.excluded-ships { color:#ff9da9; }.eligible-ships { color:var(--green); }.destination-choices { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px; }.destination-choices section { min-width:0; padding:16px; border:1px solid var(--line); background:rgba(7,21,41,.55); }.destination-choices h3 { margin:0 0 10px; }.destination-choices button { width:100%; display:flex; justify-content:space-between; gap:10px; margin-top:6px; text-align:left; }.destination-choices button span { color:var(--muted); }
.auto-scout-panel { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:14px 20px; align-items:center; margin-bottom:14px; padding:16px 18px; border:1px solid rgba(52,167,255,.35); background:linear-gradient(135deg,rgba(9,38,66,.86),rgba(5,17,34,.8)); }.auto-scout-panel.active { border-color:rgba(67,229,157,.48); box-shadow:inset 3px 0 0 var(--green); }.auto-scout-panel h3 { margin:3px 0 6px; }.auto-scout-panel p { max-width:760px; margin:0; color:var(--muted); font-size:11px; line-height:1.5; }.auto-scout-panel > button { min-width:180px; min-height:42px; grid-column:2; grid-row:1 / span 2; }.auto-scout-panel > small { grid-column:1 / -1; color:#ffb1bc; }.auto-scout-facts { display:flex; flex-wrap:wrap; gap:7px; }.auto-scout-facts span { display:grid; gap:3px; min-width:130px; padding:8px 10px; border:1px solid rgba(77,215,255,.16); color:var(--muted); font-size:9px; text-transform:uppercase; }.auto-scout-facts strong { color:var(--text); font-size:11px; text-transform:none; }
.auto-scout-bases { display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; }.auto-scout-bases label { display:grid; grid-template-columns:auto 1fr; gap:2px 7px; min-width:150px; padding:8px 10px; border:1px solid rgba(77,215,255,.2); background:rgba(4,17,31,.55); cursor:pointer; }.auto-scout-bases input { grid-row:1 / span 2; align-self:center; accent-color:var(--green); }.auto-scout-bases span { color:var(--text); font-size:11px; }.auto-scout-bases small { color:var(--muted); font-size:9px; }.auto-scout-toggle { display:flex; gap:8px; align-items:center; margin-top:10px; color:var(--muted); font-size:10px; }.auto-scout-toggle input { accent-color:var(--green); }
.intel-timestamp { display:grid; gap:3px; margin:12px 0; padding:11px 12px; border-left:3px solid #f0b45b; background:rgba(240,180,91,.08); }.intel-timestamp strong { color:#ffd79a; font-size:10px; text-transform:uppercase; letter-spacing:.08em; }.intel-timestamp span { color:var(--text); font-size:12px; }.intel-timestamp small { color:var(--muted); font-size:9px; }
.logistics-automation { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:14px 20px; align-items:center; margin-bottom:14px; padding:16px 18px; border:1px solid rgba(240,180,91,.32); background:linear-gradient(135deg,rgba(48,33,13,.55),rgba(5,17,34,.82)); }.logistics-automation.active { border-color:rgba(67,229,157,.48); box-shadow:inset 3px 0 0 var(--green); }.logistics-automation h3 { margin:3px 0 6px; }.logistics-automation p { max-width:760px; margin:0; color:var(--muted); font-size:11px; line-height:1.5; }.logistics-automation > button { min-width:180px; min-height:42px; grid-column:2; grid-row:1 / span 2; }.logistics-automation > small { grid-column:1 / -1; color:#ffb1bc; }.automation-select { display:grid; gap:5px; max-width:420px; margin-top:12px; color:var(--muted); font-size:9px; text-transform:uppercase; letter-spacing:.08em; }.automation-select select { min-height:38px; padding:0 10px; border:1px solid rgba(77,215,255,.25); background:#07172a; color:var(--text); }
.target-card { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px; border: 1px solid rgba(255,82,103,.45); background: rgba(255,82,103,.07); }.target-card > div { display: grid; gap: 5px; }.target-card span,.target-card small { color: var(--muted); }.target-card button { padding: 9px 14px; border: 1px solid var(--red); color: #ffc4cb; background: rgba(255,82,103,.12); cursor: pointer; }.target-card.allied { border-color: rgba(67,229,157,.42); background: rgba(67,229,157,.06); }
.coordinate-search { max-width: 650px; margin: 0 auto 24px; }.coordinate-search > label { display: block; margin-bottom: 8px; font-size: 18px; }.coordinate-search > div { display: flex; }.coordinate-search input { flex: 1; min-width: 0; padding: 12px; border: 1px solid var(--line); color: var(--text); background: rgba(2,10,22,.9); }.coordinate-search button { padding: 10px 16px; border: 1px solid var(--line-strong); color: var(--text); background: rgba(52,167,255,.18); cursor: pointer; }.coordinate-search small { display: block; margin-top: 7px; color: var(--muted); }.coordinate-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }.coordinate-columns section { min-width: 0; }.section-heading { display: flex; align-items: center; justify-content: space-between; }.section-heading h3 { margin: 0 0 10px; }.section-heading span { color: var(--muted); font-size: 11px; }.coordinate-row { display: grid; grid-template-columns: minmax(140px,.8fr) minmax(160px,1.2fr) 36px; gap: 6px; margin-bottom: 6px; }.coordinate-row > button:first-child { display: grid; gap: 3px; padding: 9px 10px; border: 1px solid var(--line); color: var(--text); background: rgba(7,21,41,.72); text-align: left; cursor: pointer; }.coordinate-row > button span { color: var(--muted); font-size: 10px; }.coordinate-row input { min-width: 0; padding: 9px; border: 1px solid var(--line); color: var(--text); background: rgba(2,10,22,.9); }.coordinate-row .row-delete { width: 36px; border: 1px solid rgba(255,82,103,.35); color: #ff9da9; background: rgba(255,82,103,.06); cursor: pointer; }.coordinate-columns section:first-child .coordinate-row { grid-template-columns: 1fr 36px; }

@media (max-width:1100px) {
  .topbar { min-height:72px; grid-template-columns:1fr auto; }
  .status-strip { top:83px; }
  .economy-hud { top:126px; }
  .detail-panel { top:88px; max-height:calc(100% - 250px); }
  .main-menu { top:126px; }
  .compact-resources { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .production-planner { grid-template-columns:repeat(2,1fr); }
  .production-planner button { min-height:42px; }
  .colony-production-controls { grid-template-columns:1fr 90px; }
  .colony-production-controls > div,.colony-production-controls > button { grid-column:1 / -1; }
  .empire-production-command { grid-template-columns:1fr; }
  .production-workspace { grid-template-columns:1fr; }
  .production-detail-column { position:static; }
}
@media (max-width:700px) {
  .empire-queue-grid { grid-template-columns:1fr; }
  .colony-production-controls { grid-template-columns:1fr; }
  .colony-production-controls > div,.colony-production-controls > button { grid-column:auto; }
  .main-menu { top:126px; left:10px; }
  .economy-hud { top:126px; left:68px; }
  .colony-content { padding:16px; }
  .colony-tabs { padding:0 12px; overflow-x:auto; }
  .colony-tabs button { white-space:nowrap; }
  .colony-overview-grid,.fleet-detail-grid,.coordinate-columns { grid-template-columns:1fr; }
  .activity-board { grid-template-columns:1fr; }
  .catalog-grid { grid-template-columns:1fr; }
  .ship-production-card { grid-template-columns:92px minmax(0,1fr); }
  .ship-sample.medium { min-height:150px; }
  .ship-order-controls { grid-template-columns:1fr; }
  .ship-order-controls .quantity-stepper { width:100%; }
  .ship-order-controls .quantity-stepper input { flex:1; width:auto; }
  .fleet-sticky { position:static; grid-template-columns:1fr 1fr; margin:-16px -16px 16px; padding:10px 16px; }
  .fleet-overview,.move-planner,.destination-choices { grid-template-columns:1fr; }.fleet-composition { position:static; }.unit-logistics-card,.unit-logistics-card.compact { grid-template-columns:1fr; }.ship-sample,.unit-logistics-card.compact .ship-sample { min-height:88px; border-right:0; border-bottom:1px solid var(--line); }.logistics-specs.inline { grid-template-columns:1fr 1fr; }.mining-status { grid-template-columns:1fr 1fr; }.auto-scout-panel,.logistics-automation { grid-template-columns:1fr; }.auto-scout-panel > button,.logistics-automation > button { width:100%; grid-column:1; grid-row:auto; }.move-units .section-heading { align-items:flex-start; flex-direction:column; }.move-units .section-heading > div { width:100%; }.move-units .section-heading button { flex:1; }.move-unit-row { grid-template-columns:60px 1fr; }.move-unit-row .quantity-stepper { grid-column:1 / -1; }.quantity-stepper input { flex:1; }.fleet-popup-backdrop { padding:8px; }.fleet-popup { max-height:calc(100dvh - 16px); }.cargo-popup-summary { grid-template-columns:1fr; }.cargo-popup-resources article { grid-template-columns:80px 1fr 1fr; }.cargo-popup-resources article:has([data-fleet-cargo-max]) { grid-template-columns:80px 58px 1fr 1fr; }.cargo-popup-resources article > div { grid-column:1 / -1; }
  .subtabs { overflow-x:auto; }
  .data-table { min-width:760px; }
  .coordinate-row { grid-template-columns:1fr 36px; }
  .coordinate-row input { grid-column:1 / -1; grid-row:2; }
  .route-card { z-index:45; }
  .detail-panel { top:auto; left:10px; right:10px; bottom:10px; width:auto; max-height:43%; }
}

/* Gestione strutture */
.structures-workspace { display:grid; grid-template-columns:minmax(390px,1fr) minmax(430px,1.08fr); gap:14px; align-items:start; }
.structures-list { display:grid; gap:8px; }
.structure-list-card { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 14px; align-items:center; min-height:106px; padding:12px 14px; border:1px solid var(--line); background:rgba(7,21,41,.66); cursor:pointer; transition:border-color .15s ease,background .15s ease; }
.structure-list-card:hover,.structure-list-card.selected { border-color:var(--line-strong); background:rgba(12,35,60,.78); }
.structure-list-card.selected { box-shadow:inset 3px 0 0 var(--line-strong); }
.structure-name-row { display:flex; align-items:baseline; justify-content:space-between; gap:10px; min-width:0; }
.structure-name-row h3 { min-width:0; margin:0; overflow:hidden; font-size:15px; text-overflow:ellipsis; white-space:nowrap; }
.structure-name-row > span { flex:0 0 auto; color:var(--muted); font-size:9px; letter-spacing:.06em; text-transform:uppercase; }
.structure-compact-effect { color:var(--muted); font-size:11px; }
.structure-compact-effect strong { color:var(--text); }
.structure-next-row { display:flex; align-items:center; flex-wrap:wrap; gap:4px 7px; color:var(--muted); font-size:10px; }
.structure-next-row > .requirement-chips { display:contents; }
.structure-next-row > span:first-child { color:var(--text); white-space:nowrap; }
.structure-time { padding-left:7px; border-left:1px solid var(--line); color:var(--gold); white-space:nowrap; }
.structure-list-card > button { grid-column:2; grid-row:1 / 4; min-width:105px; min-height:38px; padding:8px 11px; border:1px solid var(--line); background:rgba(9,36,60,.9); cursor:pointer; }
.structure-list-card > button:hover { border-color:var(--line-strong); }
.next-label { display:inline-block; margin-top:5px; color:var(--text); }
.requirement-chips { display:flex; flex-wrap:wrap; gap:5px; margin:6px 0; }
.requirement-chip { display:inline-flex; align-items:center; padding:3px 6px; border:1px solid rgba(67,229,157,.28); color:#9cebc7; background:rgba(67,229,157,.06); font-size:10px; white-space:nowrap; }
.requirement-chip.missing { border-color:rgba(255,82,103,.75); color:#ff8796; background:rgba(255,82,103,.13); font-weight:700; }
.requirement-chips.detailed { display:grid; grid-template-columns:repeat(auto-fit,minmax(105px,1fr)); gap:7px; }
.requirement-tile { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:2px 7px; min-width:0; padding:8px; border:1px solid rgba(67,229,157,.28); color:#9cebc7; background:rgba(67,229,157,.06); }
.requirement-tile > .resource-icon { grid-row:1 / 3; }
.requirement-tile > strong { min-width:0; overflow:hidden; color:var(--text); font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.requirement-tile > span:not(.resource-icon) { color:inherit; font-size:12px; font-weight:700; }
.requirement-tile > small { grid-column:1 / -1; color:var(--muted); font-size:9px; }
.requirement-tile.missing { border-color:rgba(255,82,103,.75); color:#ff8796; background:rgba(255,82,103,.13); }
.structures-right { min-width:0; }
.structure-detail-panel { overflow:hidden; border:1px solid var(--line); background:rgba(7,21,41,.72); }
.structure-graphic { position:relative; min-height:210px; display:grid; place-items:center; overflow:hidden; border-bottom:1px solid var(--line); background:radial-gradient(circle at 50% 42%,rgba(52,215,255,.2),transparent 30%),linear-gradient(180deg,#071b34,#061326); }
.structure-graphic > span { position:relative; z-index:1; display:grid; place-items:center; width:112px; height:86px; color:var(--line-strong); border:1px solid var(--line-strong); background:linear-gradient(135deg,rgba(52,215,255,.2),rgba(4,13,28,.96)); clip-path:polygon(18% 0,82% 0,100% 50%,82% 100%,18% 100%,0 50%); box-shadow:0 0 34px rgba(52,215,255,.3); font-size:28px; font-weight:700; }
.structure-graphic i { position:absolute; width:260px; height:80px; border:1px solid rgba(52,215,255,.14); border-radius:50%; transform:rotate(-8deg); }.structure-graphic i:nth-of-type(2){width:330px;transform:rotate(12deg)}.structure-graphic i:nth-of-type(3){width:410px;transform:rotate(-22deg)}
.structure-detail-copy { padding:18px; }
.structure-detail-copy h3 { margin:0 0 16px; font-size:22px; }
.detail-stat { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding:9px 0; border-bottom:1px solid rgba(77,215,255,.12); }.detail-stat > span:first-child { color:var(--muted); font-size:11px; }.detail-stat > strong { text-align:right; }
.detail-stat.requirements-block { display:block; }.detail-stat.requirements-block > span:first-child { display:block; margin-bottom:7px; }
.structure-description { margin:14px 0; color:var(--muted); font-size:12px; line-height:1.55; }
.structure-detail-actions { display:grid; grid-template-columns:1fr .75fr 1fr; gap:8px; }.structure-detail-actions button,.dismantle-confirm button { min-height:40px; padding:8px 11px; border:1px solid var(--line); color:var(--text); background:rgba(9,36,60,.9); cursor:pointer; }.structure-detail-actions button:first-child { border-color:var(--line-strong); background:rgba(52,167,255,.16); }.structure-detail-actions .danger-action,.dismantle-confirm .danger-action { border-color:rgba(255,82,103,.7); color:#ffb2bb; background:rgba(255,82,103,.11); }
.dismantle-preview { display:grid; gap:4px; margin-top:12px; padding:10px 12px; border-left:2px solid var(--gold); color:#f3dfb0; background:rgba(255,204,102,.07); font-size:11px; }.dismantle-preview.blocked { border-left-color:var(--red); color:#ff9da9; background:rgba(255,82,103,.07); }
.dismantle-confirm { margin-top:12px; padding:14px; border:1px solid rgba(255,82,103,.62); background:rgba(42,9,20,.72); }.dismantle-confirm p { color:#d7aeb5; font-size:12px; line-height:1.5; }.dismantle-confirm > div { display:flex; justify-content:flex-end; gap:8px; }
.levels-modal { position:absolute; z-index:6; inset:0; display:grid; place-items:center; padding:24px; background:rgba(0,3,10,.76); backdrop-filter:blur(7px); }
.levels-window { width:min(980px,100%); max-height:90%; display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--line-strong); background:#050c1c; box-shadow:0 24px 80px rgba(0,0,0,.68); }
.levels-window > header { display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid var(--line); }.levels-window h3 { margin:0; font-size:20px; }.levels-window header button { width:32px; height:32px; border:0; color:var(--muted); background:transparent; font-size:22px; cursor:pointer; }
.levels-table { overflow:auto; padding:0 14px 14px; }.levels-head,.levels-row { min-width:840px; display:grid; grid-template-columns:.45fr 1.3fr 1.15fr .62fr .75fr .65fr; }.levels-head { position:sticky; top:0; z-index:1; color:var(--muted); background:#0d2238; font-size:10px; text-transform:uppercase; letter-spacing:.07em; }.levels-head span,.levels-row > * { padding:10px 11px; }.levels-row { border-bottom:1px solid rgba(77,215,255,.12); color:var(--muted); }.levels-row.current { color:var(--text); background:rgba(52,215,255,.1); box-shadow:inset 3px 0 0 var(--line-strong); }.levels-row.queued { color:#b7dfff; background:rgba(53,167,255,.06); }
@media (max-width:900px) { .structures-workspace { grid-template-columns:1fr; }.structure-detail-panel { margin-top:2px; } }
@media (max-width:760px) { .energy-summary-grid,.energy-report-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:520px) { .structure-list-card { grid-template-columns:1fr; }.structure-list-card > button { grid-column:1; grid-row:auto; width:100%; }.structure-name-row { align-items:flex-start; flex-direction:column; gap:3px; }.structure-detail-actions { grid-template-columns:1fr; }.levels-modal { padding:8px; }.requirement-chips.detailed { grid-template-columns:repeat(2,minmax(0,1fr)); }.energy-summary-grid,.energy-report-grid { grid-template-columns:1fr; }.colony-head { padding:14px 12px; }.colony-back span:last-child { display:none; } }

.mailbox-toolbar { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:14px; padding:16px; border:1px solid var(--line); background:rgba(7,21,41,.72); }
.mailbox-toolbar h3 { margin:4px 0 0; font-size:22px; }
.mailbox-toolbar p { margin:6px 0 0; color:var(--muted); font-size:11px; }
.mailbox-toolbar button { min-height:38px; padding:8px 12px; border:1px solid rgba(255,82,103,.65); color:#ffb2bb; background:rgba(255,82,103,.1); cursor:pointer; }
.mailbox-toolbar button:disabled { opacity:.45; cursor:not-allowed; }
.mailbox-bulk { display:flex; justify-content:space-between; gap:12px; margin-bottom:8px; color:var(--muted); font-size:11px; }
.mailbox-bulk label { color:var(--text); cursor:pointer; }
.mailbox-list { display:grid; gap:8px; }
.mailbox-card { display:grid; grid-template-columns:28px minmax(0,1fr) auto; gap:10px; align-items:start; padding:13px 14px; border:1px solid var(--line); background:rgba(7,21,41,.68); }
.mailbox-card.unread { border-left:3px solid var(--line-strong); background:rgba(15,42,66,.82); }
.mailbox-card.protected { border-left-color:var(--gold); }
.mailbox-check { padding-top:2px; cursor:pointer; }
.mailbox-check input { accent-color:var(--line-strong); }
.mailbox-card-head { display:flex; justify-content:space-between; gap:12px; }
.mailbox-card-head strong { color:var(--text); }
.mailbox-card-head time { flex:0 0 auto; color:var(--muted); font-size:10px; }
.mailbox-card-copy > small { color:var(--line-strong); font-size:10px; }
.mailbox-card-copy p { margin:7px 0 4px; color:var(--muted); font-size:12px; line-height:1.45; }
.mailbox-card-copy em { color:#e9c776; font-size:10px; font-style:normal; }
.mailbox-card-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; }
.mailbox-card-actions button { min-height:30px; padding:6px 8px; border:1px solid var(--line); color:var(--text); background:rgba(9,36,60,.9); cursor:pointer; font-size:10px; }
.mailbox-card-actions button:hover { border-color:var(--line-strong); }
.mailbox-card-actions .danger-action { border-color:rgba(255,82,103,.65); color:#ffb2bb; background:rgba(255,82,103,.08); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (max-width:620px) { .mailbox-toolbar { align-items:stretch; flex-direction:column; }.mailbox-toolbar button { width:100%; }.mailbox-card { grid-template-columns:24px minmax(0,1fr); }.mailbox-card-actions { grid-column:2; justify-content:flex-start; }.mailbox-card-head { flex-direction:column; gap:3px; } }