/* ===== 00-foundation.css ===== */
/* Capital Empire — Station UI (Neocom / fleet instrumentation)
   Source of truth: docs/AESTHETIC.md
   Redesign pass: unified cold industrial chrome. Map stays the hero. */

:root {
  /* Station steel — dense, muted, no neon */
  --bg-deep: #0a0c0f;
  --bg-dark: #101317;
  --bg-panel: #15191e;
  --bg-panel-top: #1a1f26;
  --bg-input: #0c0e12;
  --border: #262c34;
  --border-bright: #3a424e;
  --border-accent: #3d4a55;
  --text: #b8c0c8;
  --text-dim: #6e7780;
  --text-bright: #e4e8ec;
  --accent: #6a8f9e;          /* cold steel, not neon cyan */
  --accent-dim: #4a6774;
  --accent-glow: rgba(106, 143, 158, 0.12);
  --positive: #5f8f7a;
  --positive-dim: rgba(95, 143, 122, 0.18);
  --negative: #a04848;
  --negative-dim: rgba(160, 72, 72, 0.18);
  --warning: #b8864a;
  --warning-dim: rgba(184, 134, 74, 0.16);
  --metal-highlight: rgba(255, 255, 255, 0.035);
  --shadow: rgba(0, 0, 0, 0.55);
  --panel-bg: rgba(18, 22, 28, 0.97);
  --panel-bg-top: rgba(22, 27, 34, 0.98);
  --panel-blur: 0px;
  --overlay-bg: rgba(8, 10, 12, 0.82);
  --rail-w: 52px;
  --row-h: 28px;
  --font-ui: "Titillium Web", "Segoe UI", sans-serif;
  --font-display: "Saira Condensed", "Titillium Web", sans-serif;
  --ease: 0.1s linear;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  font-family: var(--font-ui);
  font-size: 14px;
  background: var(--bg-deep);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea {
  font-family: inherit;
  color: inherit;
}

#app {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.hidden { display: none !important; }

.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;
}

/* —— Shared station chrome —— */
.ce-panel,
.structure-card,
.inventory-card,
.exchange-panel,
.galaxy-card,
.production-tree-card,
.ic-shop-card,
.org-card,
.planet-info-card,
.chat-window,
.login-card,
.death-card,
.travel-loading-card {
  background: var(--panel-bg);
  backdrop-filter: blur(var(--panel-blur));
  -webkit-backdrop-filter: blur(var(--panel-blur));
  border: 1px solid var(--border-bright);
  box-shadow: 0 10px 28px var(--shadow), inset 0 1px 0 var(--metal-highlight);
  border-radius: 0;
}

.ce-btn,
.galaxy-btn,
.exchange-submit,
.structure-submit,
.chat-send,
.death-respawn-btn,
.collect-terrain-btn,
.spaceport-port-btn,
.market-trade-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 28px;
  padding: 5px 12px;
  border: 1px solid var(--border-bright);
  border-radius: 0;
  background: rgba(8, 12, 16, 0.65);
  color: var(--text);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: border-color var(--ease), color var(--ease), background var(--ease);
}

.ce-btn:hover,
.galaxy-btn:hover,
.exchange-submit:hover,
.structure-submit:hover,
.chat-send:hover,
.death-respawn-btn:hover,
.collect-terrain-btn:hover:not(:disabled),
.spaceport-port-btn:hover,
.market-trade-btn:hover {
  border-color: var(--accent);
  color: var(--text-bright);
  background: rgba(0, 184, 212, 0.08);
}

.ce-btn:disabled,
.galaxy-btn:disabled,
.exchange-submit:disabled,
.collect-terrain-btn:disabled,
.corner-icon-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.galaxy-btn-accent,
.exchange-submit,
.structure-submit,
.chat-send,
.death-respawn-btn,
#login {
  border-color: var(--accent-dim);
  color: var(--accent);
  background: rgba(0, 184, 212, 0.1);
}

.galaxy-btn-accent:hover,
.exchange-submit:hover,
.structure-submit:hover,
.chat-send:hover,
.death-respawn-btn:hover,
#login:hover {
  border-color: var(--accent);
  background: rgba(0, 184, 212, 0.18);
  color: var(--text-bright);
}

.structure-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}
.structure-btn-secondary:hover {
  border-color: var(--border-bright);
  color: var(--text);
}

input[type="text"],
input[type="number"],
input[type="search"],
select,
textarea,
.login-form input,
.market-search-input,
.chat-input,
.structure-form-row input,
.structure-form-row select,
.exchange-form-row input,
.exchange-form-row select,
.org-form-row input,
.org-form-row select,
.estructura-pop-row input {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 0;
  color: var(--text-bright);
  padding: 7px 10px;
  font-size: 0.85rem;
  outline: none;
  transition: border-color var(--ease), box-shadow var(--ease);
}

input:focus,
select:focus,
textarea:focus,
.login-form input:focus,
.market-search-input:focus,
.chat-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-glow);
}

/* —— Game shell —— */
#app > main {
  flex: 1;
  min-height: 0;
  position: relative;
  display: flex;
  flex-direction: column;
}

#game-container {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #05080c;
}

#canvas {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: auto;
}

#ui-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 20;
}

#ui-overlay > * {
  pointer-events: auto;
}

.float-layer {
  position: absolute;
  inset: 0;
  pointer-events: none !important;
  z-index: 40;
  overflow: visible;
}
.float-layer * { pointer-events: none !important; }
#ui-overlay > .float-layer { pointer-events: none !important; }

.float-delta {
  position: absolute;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  text-shadow: 0 1px 2px #000;
  animation: floatDelta 1.4s ease-out forwards;
}
.float-delta.delta-positive { color: var(--positive); }
.float-delta.delta-negative { color: var(--negative); }
@keyframes floatDelta {
  0% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-28px); }
}

#layer-info.sr-only { /* keep */ }
#player-badge { color: var(--accent); }
.travel-status { color: var(--warning); margin-left: 6px; }

/* —— Login —— */
#login-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 50% 20%, rgba(0, 184, 212, 0.07), transparent 55%),
    var(--overlay-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 500;
}
#login-overlay.hidden { display: none; }

.login-card {
  width: min(380px, 92vw);
  padding: 28px 28px 24px;
  position: relative;
}
.login-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--accent), transparent 70%);
}
.login-card h1 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.35rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-bright);
}
.login-subtitle {
  margin: 0 0 22px;
  font-size: 0.78rem;
  color: var(--text-dim);
  letter-spacing: 0.04em;
}
.login-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.login-form input { width: 100%; }
.login-form #login,
.login-form #register {
  width: 100%;
  min-height: 36px;
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}
.login-error {
  display: block;
  margin-top: 12px;
  min-height: 1.2em;
  font-size: 0.78rem;
  color: var(--negative);
}

/* —— Overlays: travel / death —— */
.travel-loading-overlay,
.death-overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 800;
}
.travel-loading-overlay.hidden,
.death-overlay.hidden { display: none; }

.travel-loading-card,
.death-card {
  min-width: 240px;
  padding: 22px 26px;
  text-align: center;
}
.travel-loading-spinner {
  width: 28px;
  height: 28px;
  margin: 0 auto 14px;
  border: 2px solid var(--border-bright);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.travel-loading-text {
  font-size: 0.85rem;
  color: var(--text-dim);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.death-title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 1.1rem;
  letter-spacing: 0.1em;
  color: var(--negative);
  text-transform: uppercase;
}
.death-sub {
  margin: 0 0 18px;
  font-size: 0.85rem;
  color: var(--text-dim);
}
.death-respawn-btn { min-width: 140px; }

/* —— Side Neocom —— */
.side-menu {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--rail-w);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 6px;
  background: linear-gradient(180deg, rgba(10, 14, 20, 0.94), rgba(8, 12, 16, 0.88));
  border-right: 1px solid var(--border);
  box-shadow: inset -1px 0 0 var(--metal-highlight);
  z-index: 30;
  overflow-y: auto;
  overflow-x: hidden;
}

.side-menu-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 100%;
  min-height: 44px;
  padding: 6px 2px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  transition: color var(--ease), border-color var(--ease), background var(--ease);
}
.side-menu-item::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: transparent;
  transition: background var(--ease);
}
.side-menu-item:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--border);
}
.side-menu-item.active-menu,
.side-menu-item.active,
.weapon-btn.active,
#iso-mode-btn.active {
  color: var(--accent);
  border-color: var(--border-accent);
  background: rgba(0, 184, 212, 0.07);
}
.side-menu-item.active-menu::before,
.side-menu-item.active::before,
.weapon-btn.active::before,
#iso-mode-btn.active::before {
  background: var(--accent);
}

.side-menu-item-primary { color: var(--text); }
.side-menu-item-primary:hover { color: var(--accent); }
.side-menu-item-secondary { }
.side-menu-item#combat-hp-btn { min-height: 48px; }
.side-menu-item#credits-btn,
.side-menu-item#ic-btn { flex-direction: column; }

.side-menu-icon {
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1;
}
.side-menu-icon.side-menu-currency { color: inherit; }
.side-menu-item-primary .side-menu-icon { font-size: 0.68rem; }

.side-menu-amount {
  font-variant-numeric: tabular-nums;
  font-size: 0.62rem;
  color: inherit;
  opacity: 0.9;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.side-menu-weapons {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 4px 0;
  padding: 4px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.side-menu-avatar,
.profile-btn-color.side-menu-avatar,
.profile-avatar,
.profile-btn-color {
  width: 28px;
  height: 28px;
  border: 1px solid var(--border-bright);
  background: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0;
  position: relative;
}
.profile-btn-skin-canvas {
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: pixelated;
}
.profile-btn:hover .profile-btn-color {
  border-color: var(--accent);
}

/* —— Entity directory (top-left, right of rail) —— */
.entity-dir-panel {
  position: absolute;
  left: calc(var(--rail-w) + 10px);
  top: 10px;
  width: min(280px, calc(100vw - var(--rail-w) - 24px));
  max-height: min(42vh, 360px);
  display: flex;
  flex-direction: column;
  background: var(--panel-bg);
  backdrop-filter: blur(var(--panel-blur));
  -webkit-backdrop-filter: blur(var(--panel-blur));
  border: 1px solid var(--border-bright);
  box-shadow: 0 8px 22px var(--shadow), inset 0 1px 0 var(--metal-highlight);
  z-index: 28;
}

.entity-dir-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.entity-dir-tab {
  flex: 1;
  min-height: 30px;
  padding: 6px 4px;
  border: none;
  border-right: 1px solid var(--border);
  background: transparent;
  color: var(--text-dim);
  font-family: var(--font-display);
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.entity-dir-tab:last-child { border-right: none; }
.entity-dir-tab:hover { color: var(--text); background: rgba(255,255,255,0.03); }
.entity-dir-tab.active {
  color: var(--accent);
  background: rgba(0, 184, 212, 0.06);
  box-shadow: inset 0 -2px 0 var(--accent);
}

.entity-dir-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
  padding: 8px;
  gap: 6px;
}
.entity-dir-scope {
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.entity-dir-info { display: none; }
.entity-dir-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  min-height: 0;
  flex: 1;
}
.entity-dir-list li { margin: 0; }
.entity-dir-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  width: 100%;
  min-height: var(--row-h);
  padding: 6px 8px;
  border: 1px solid transparent;
  border-bottom: 1px solid rgba(26, 37, 48, 0.8);
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.entity-dir-item:hover {
  background: rgba(0, 184, 212, 0.06);
  border-color: var(--border);
}
.entity-dir-item:disabled {
  opacity: 0.4;
  cursor: default;
}
.entity-dir-item-name {
  font-size: 0.8rem;
  color: var(--text-bright);
}
.entity-dir-item-meta {
  font-size: 0.68rem;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.entity-dir-empty {
  padding: 16px 8px;
  font-size: 0.75rem;
  color: var(--text-dim);
  font-style: italic;
}

/* —— Cell info —— */
.cell-info-panel {
  position: absolute;
  left: calc(var(--rail-w) + 10px);
  top: calc(10px + min(42vh, 360px) + 8px);
  width: min(280px, calc(100vw - var(--rail-w) - 24px));
  background: var(--panel-bg);
  backdrop-filter: blur(var(--panel-blur));
  -webkit-backdrop-filter: blur(var(--panel-blur));
  border: 1px solid var(--border-bright);
  box-shadow: 0 8px 22px var(--shadow), inset 0 1px 0 var(--metal-highlight);
  z-index: 29;
}
.cell-info-panel.hidden { display: none; }
.cell-info-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  background: var(--panel-bg-top);
}
#cell-info-title {
  flex: 1;
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-bright);
}
#cell-info-body {
  padding: 10px;
  font-size: 0.8rem;
}
#cell-info-body .row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 0;
  border-bottom: 1px solid rgba(26, 37, 48, 0.6);
}
#cell-info-body .label { color: var(--text-dim); }
#cell-info-body .collect-row { margin-top: 8px; }
.collect-terrain-btn { width: 100%; }
#cell-info-body .collect-status span:last-child { color: var(--text-dim); font-size: 0.72rem; }

/* —— Corner HUD —— */
.corner-actions {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  z-index: 26;
}
.corner-stack {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.corner-icon-btn {
  min-width: 52px;
  min-height: 36px;
  padding: 6px 10px;
  border: 1px solid var(--border-bright);
  background: var(--panel-bg);
  backdrop-filter: blur(var(--panel-blur));
  color: var(--text-dim);
  cursor: pointer;
  transition: border-color var(--ease), color var(--ease), background var(--ease);
}
.corner-icon-btn:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(0, 184, 212, 0.08);
}
.corner-icon-btn.hidden { display: none; }
.corner-label {
  font-family: var(--font-display);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
}

.nav-readout {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  background: rgba(8, 12, 16, 0.72);
  font-variant-numeric: tabular-nums;
}
.nav-readout .nav-hud {
  font-size: 0.7rem;
  color: var(--text-dim);
  letter-spacing: 0.04em;
}

/* —— Context menu —— */
.action-context-menu {
  position: fixed;
  z-index: 5000;
  min-width: 140px;
  background: var(--panel-bg-top);
  border: 1px solid var(--border-bright);
  box-shadow: 0 10px 28px var(--shadow);
}
.action-context-menu.hidden { display: none; }
.action-context-menu .action-menu-list {
  list-style: none;
  margin: 0;
  padding: 4px 0;
}
.action-context-menu .action-menu-list li { margin: 0; }
.action-context-menu .action-menu-option {
  display: block;
  width: 100%;
  padding: 8px 14px;
  border: none;
  background: transparent;
  color: var(--text);
  text-align: left;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.action-context-menu .action-menu-option:hover,
.action-context-menu .action-menu-option:focus {
  background: rgba(0, 184, 212, 0.1);
  color: var(--accent);
  outline: none;
}

/* —— Chat —— */
/* Full overlay host so absolute left/top from drag stay on-screen;
   pointer-events none so it never steals map clicks when closed/open outside the window. */
#ui-overlay #chat-container,
.chat-container {
  position: absolute;
  inset: 0;
  width: auto;
  left: 0;
  bottom: auto;
  z-index: 55;
  pointer-events: none !important;
}
.chat-container.chat-closed .chat-window { display: none; }
.chat-container .chat-window {
  display: flex;
  flex-direction: column;
  pointer-events: auto;
  position: absolute;
  left: calc(var(--rail-w) + 12px);
  bottom: 12px;
  top: auto;
  width: min(420px, calc(100vw - var(--rail-w) - 24px));
  max-height: min(46vh, 420px);
  min-height: 220px;
}
.chat-window.minimized { max-height: none; min-height: 0; }
.chat-window.minimized .chat-window-body { display: none; }

.chat-window-header,
.draggable-window-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--panel-bg-top);
  border-bottom: 1px solid var(--border);
  cursor: move;
  flex-shrink: 0;
}
.chat-window-title {
  flex: 1;
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-bright);
}
.chat-panel-minimize,
.inventory-close,
.exchange-close {
  margin-left: auto;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-dim);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px 8px;
}
.chat-panel-minimize:hover,
.inventory-close:hover,
.exchange-close:hover {
  color: var(--text-bright);
  border-color: var(--border);
  background: rgba(255,255,255,0.04);
}

.chat-window-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
  padding: 0;
}
.chat-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-bottom: 1px solid var(--border);
  background: rgba(8, 12, 16, 0.35);
}
.chat-tab,
.chat-tab-add {
  min-height: 28px;
  padding: 5px 10px;
  border: none;
  border-right: 1px solid var(--border);
  background: transparent;
  color: var(--text-dim);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}
.chat-tab:hover,
.chat-tab-add:hover { color: var(--text); background: rgba(255,255,255,0.03); }
.chat-tab.active {
  color: var(--accent);
  box-shadow: inset 0 -2px 0 var(--accent);
  background: rgba(0, 184, 212, 0.05);
}
.chat-tab-code { position: relative; padding-right: 22px; }
.chat-tab-close {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 0.75rem;
  padding: 0 4px;
}
.chat-tab-pane {
  display: none;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}
.chat-tab-pane.active { display: flex; }
.chat-messages {
  list-style: none;
  margin: 0;
  padding: 8px 10px;
  overflow-y: auto;
  flex: 1;
  min-height: 120px;
  font-size: 0.8rem;
}
.chat-message-row {
  display: flex;
  gap: 8px;
  padding: 3px 0;
  border-bottom: 1px solid rgba(26, 37, 48, 0.45);
}
.chat-username { color: var(--accent); margin-right: 6px; }
.chat-time { color: var(--text-dim); font-size: 0.65rem; margin-left: auto; font-variant-numeric: tabular-nums; }
.chat-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
  padding: 8px;
  border-top: 1px solid var(--border);
  background: rgba(8, 12, 16, 0.4);
}
.chat-input { width: 100%; min-width: 0; }
.chat-char-count {
  grid-column: 1 / -1;
  font-size: 0.62rem;
  color: var(--text-dim);
  text-align: right;
}
.chat-send { min-width: 64px; }

.info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 1px solid var(--border-bright);
  color: var(--text-dim);
  font-size: 0.65rem;
  cursor: help;
}

/* ===== 01-windows.css ===== */
/* —— Station windows (inventory / structure / profile) —— */
.structure-panel,
.inventory-panel,
.market-panel,
.production-tree-panel,
.galaxy-panel-window,
#house-panel,
#factory-panel,
#profile-panel,
#spaceport-panel,
#planet-info-panel {
  position: absolute;
  z-index: 50;
  pointer-events: none;
}
.structure-panel > *,
.inventory-panel > *,
.market-panel > *,
.production-tree-panel > *,
.galaxy-panel-window > *,
#house-panel > *,
#factory-panel > *,
#profile-panel > *,
#spaceport-panel > *,
#planet-info-panel > * {
  pointer-events: auto;
}

.structure-panel.hidden,
.inventory-panel.hidden,
.market-panel.hidden,
.production-tree-panel.hidden { display: none; }

.structure-panel .structure-card,
.inventory-card,
.galaxy-card,
.production-tree-card,
.ic-shop-card,
.org-card,
.planet-info-card {
  position: absolute;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  max-height: min(88vh, 820px);
}

.structure-header,
.inventory-header,
.galaxy-header,
.production-tree-header,
.exchange-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--panel-bg-top);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  cursor: move;
}

.structure-header h2,
.inventory-header h2,
.galaxy-header h2,
.production-tree-header h2,
.exchange-header h2 {
  margin: 0;
  flex: 1;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-bright);
}

.estructura-title {
  cursor: pointer;
  border-radius: 3px;
  padding: 2px 4px;
  margin: -2px -4px;
  transition: background 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}
.estructura-title:hover {
  background: rgba(0, 184, 212, 0.12);
  color: var(--accent, #00b8d4);
  box-shadow: inset 0 0 0 1px rgba(0, 184, 212, 0.35);
}
.estructura-title-input {
  min-width: 8rem;
  max-width: 14rem;
  flex: 1;
  padding: 4px 8px;
  border: 1px solid var(--accent, #00b8d4);
  background: rgba(8, 14, 20, 0.95);
  color: var(--text);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.estructura-title-input.hidden { display: none; }

.structure-body,
.inventory-body,
.galaxy-body,
.production-tree-body,
.exchange-body,
.org-body,
.planet-info-body {
  padding: 10px 12px 12px;
  overflow: auto;
  min-height: 0;
  flex: 1;
  background: rgba(8, 12, 16, 0.35);
}

.structure-hint,
.inventory-hint,
.galaxy-hint,
.production-tree-hint,
.exchange-hint {
  margin: 0 0 10px;
  font-size: 0.72rem;
  color: var(--text-dim);
  line-height: 1.35;
}

.structure-form-row,
.exchange-form-row,
.org-form-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.structure-form-row label,
.exchange-form-row label,
.org-form-row label {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
  min-width: 72px;
}
.structure-form-row input,
.structure-form-row select,
.exchange-form-row input,
.exchange-form-row select {
  flex: 1;
  min-width: 100px;
}
.structure-status,
.exchange-form-status,
.ic-shop-status {
  margin-top: 8px;
  min-height: 1.2em;
  font-size: 0.75rem;
  color: var(--text-dim);
}

.inventory-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}
.inventory-table th {
  text-align: left;
  padding: 6px;
  color: var(--text-dim);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
  background: rgba(16, 24, 34, 0.7);
}
.inventory-table td {
  padding: 6px;
  border-bottom: 1px solid rgba(26, 37, 48, 0.7);
  font-variant-numeric: tabular-nums;
}
.inventory-table tbody tr:hover td {
  background: rgba(0, 184, 212, 0.05);
}

/* Profile */
.profile-identity-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.profile-identity-row .profile-username {
  font-family: var(--font-display);
  letter-spacing: 0.06em;
  color: var(--text-bright);
}
.profile-skin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: 8px;
  margin: 8px 0 6px 0;
}
.profile-skin-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 4px;
  border: 1px solid var(--border);
  background: rgba(8, 14, 22, 0.55);
  color: var(--text);
  cursor: pointer;
  min-height: 96px;
}
.profile-skin-btn:hover {
  border-color: var(--accent);
  background: rgba(0, 184, 212, 0.12);
}
.profile-skin-btn.selected {
  border-color: var(--text-bright);
  box-shadow: 0 0 0 1px var(--text-bright);
}
.profile-skin-btn.locked {
  opacity: 0.72;
}
.profile-skin-preview {
  width: 56px;
  height: 56px;
  image-rendering: pixelated;
  background: rgba(0, 0, 0, 0.25);
}
.profile-skin-name {
  font-size: 0.7rem;
  line-height: 1.15;
  text-align: center;
  color: var(--text-bright);
}
.profile-skin-price {
  font-size: 0.68rem;
  font-weight: 700;
  color: #c9971a;
  letter-spacing: 0.02em;
}
.profile-skin-status {
  min-height: 1.1em;
  margin: 0 0 10px 0;
}
.profile-color-palette {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 14px;
}
.profile-color-swatch {
  width: 22px;
  height: 22px;
  border: 1px solid var(--border-bright);
  cursor: pointer;
  padding: 0;
}
.profile-color-swatch.active,
.profile-color-swatch:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-glow);
}
.profile-list {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  max-height: 160px;
  overflow-y: auto;
  border: 1px solid var(--border);
}
.profile-list-item {
  padding: 7px 10px;
  border-bottom: 1px solid rgba(26, 37, 48, 0.8);
  font-size: 0.8rem;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.profile-list-item:hover {
  background: rgba(0, 184, 212, 0.07);
  color: var(--accent);
}
.profile-list-empty {
  padding: 12px;
  color: var(--text-dim);
  font-style: italic;
  font-size: 0.78rem;
}

.credits-inline {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border: 1px solid var(--border);
  background: rgba(8, 12, 16, 0.45);
  font-variant-numeric: tabular-nums;
  font-size: 0.75rem;
}
.credits-inline-icon {
  font-family: var(--font-display);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  color: var(--accent);
}
.estructura-credits-inline { margin-left: 8px; }

/* —— IC shop (premium, still station language) —— */
.side-menu-item#ic-btn { flex-direction: column; }
.ic-shop-card {
  min-width: min(400px, 94vw);
  max-width: 460px;
}
.ic-shop-card .structure-header h2 {
  color: var(--accent);
  letter-spacing: 0.12em;
}
.ic-balance-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid var(--border-accent);
  background:
    linear-gradient(120deg, rgba(0, 184, 212, 0.1), transparent 55%),
    rgba(8, 12, 16, 0.45);
}
.ic-balance-label {
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.ic-balance-value {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.ic-pack-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ic-pack-btn {
  --ic-tier: var(--accent);
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 2px 12px;
  align-items: center;
  width: 100%;
  padding: 12px;
  border: 1px solid var(--border-bright);
  background: rgba(8, 12, 16, 0.55);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--ease), background var(--ease);
}
.ic-pack-btn::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--ic-tier);
}
.ic-pack-btn:hover {
  border-color: var(--ic-tier);
  background: rgba(0, 184, 212, 0.08);
}
.ic-pack-btn[data-tier="starter"] { --ic-tier: #5ec8ff; }
.ic-pack-btn[data-tier="pilot"] { --ic-tier: #2aa89a; }
.ic-pack-btn[data-tier="captain"] { --ic-tier: #c9971a; }
.ic-pack-btn[data-tier="admiral"] { --ic-tier: #b8895a; }
.ic-pack-amount {
  grid-row: 1 / span 2;
  min-width: 3.8rem;
  padding: 6px 4px;
  border: 1px solid color-mix(in srgb, var(--ic-tier) 40%, var(--border));
  background: rgba(0, 0, 0, 0.28);
  text-align: center;
  line-height: 1.05;
}
.ic-pack-amount-value {
  display: block;
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--text-bright);
  font-variant-numeric: tabular-nums;
}
.ic-pack-amount-unit {
  display: block;
  margin-top: 2px;
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  color: var(--ic-tier);
  text-transform: uppercase;
}
.ic-pack-name {
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-bright);
}
.ic-pack-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  color: var(--text-dim);
}
.ic-pack-bonus {
  display: inline-block;
  padding: 1px 6px;
  border: 1px solid color-mix(in srgb, var(--ic-tier) 50%, transparent);
  color: var(--ic-tier);
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  border-radius: 0;
}
.ic-pack-buy {
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  min-width: 5rem;
}
.ic-pack-price {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  color: var(--text-bright);
  font-size: 0.9rem;
}
.ic-pack-cta {
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ic-tier);
}

/* —— Orgs —— */
.org-card {
  min-width: min(440px, 94vw);
  max-width: 520px;
  min-height: min(70vh, 520px);
  max-height: min(88vh, 720px);
}
.org-card .org-body,
.org-card .structure-body {
  overflow: auto;
  min-height: 0;
  flex: 1;
}
.org-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 12px;
  border: 1px solid var(--border);
}
.org-tab {
  flex: 1;
  padding: 7px 8px;
  border: none;
  border-right: 1px solid var(--border);
  background: rgba(8, 12, 16, 0.4);
  color: var(--text-dim);
  cursor: pointer;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.org-tab:last-child { border-right: none; }
.org-tab:hover { color: var(--text); }
.org-tab.active {
  color: var(--accent);
  background: rgba(0, 184, 212, 0.08);
  box-shadow: inset 0 -2px 0 var(--accent);
}
/* JS toggles .hidden on panes — do NOT require .active */
.org-tab-pane { display: block; }
.org-tab-pane.hidden { display: none !important; }
.org-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  max-height: 220px;
  overflow-y: auto;
}
.org-list-item {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(26, 37, 48, 0.8);
  cursor: pointer;
}
.org-list-item:hover { background: rgba(0, 184, 212, 0.06); }
.org-list-name { color: var(--text-bright); font-size: 0.82rem; }
.org-list-meta { color: var(--text-dim); font-size: 0.7rem; }
.org-mine-summary,
.org-mine-header,
.org-members,
.org-create-forms { font-size: 0.8rem; }
.banner-editor { display: flex; flex-direction: column; gap: 10px; }
.banner-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.banner-label {
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.banner-elements {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.banner-el-btn {
  padding: 5px 8px;
  border: 1px solid var(--border);
  background: rgba(8, 12, 16, 0.5);
  color: var(--text);
  cursor: pointer;
  font-size: 0.72rem;
}
.banner-el-btn:hover { border-color: var(--accent); color: var(--accent); }
.banner-el-btn.locked { opacity: 0.45; }
.banner-el-price { color: var(--warning); margin-left: 4px; }
#banner-preview {
  border: 1px solid var(--border-bright);
  background: #0a0e14;
}

/* —— Research block —— */
.estructura-research-block {
  margin: 0;
  padding: 10px;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.14);
}
.estructura-research-row { margin-top: 8px; }
.estructura-research-active {
  margin: 6px 0 0;
  padding: 6px 8px;
  font-size: 0.75rem;
  color: var(--accent);
  border-left: 2px solid var(--accent);
  background: rgba(0, 0, 0, 0.25);
}

/* —— Exchange tabs shared —— */
.exchange-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  background: rgba(8, 12, 16, 0.35);
}
.exchange-tab,
.estructura-tab {
  flex: 1;
  min-height: 30px;
  padding: 6px 8px;
  border: none;
  border-right: 1px solid var(--border);
  background: transparent;
  color: var(--text-dim);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}
.exchange-tab:last-child,
.estructura-tab:last-child { border-right: none; }
.exchange-tab:hover,
.estructura-tab:hover { color: var(--text); }
.exchange-tab.active,
.estructura-tab.active {
  color: var(--accent);
  box-shadow: inset 0 -2px 0 var(--accent);
  background: rgba(0, 184, 212, 0.05);
}
.exchange-tab-panel { display: none; }
.exchange-tab-panel.active { display: block; }
.exchange-section-title,
.factory-section-title,
.house-inventory-title,
.house-workers-at-title,
.factory-workers-title,
.factory-inventory-title {
  margin: 0 0 6px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.exchange-section-desc { font-size: 0.72rem; color: var(--text-dim); margin: 0 0 10px; line-height: 1.35; }
.exchange-market-name-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}
.exchange-market-label { font-size: 0.75rem; color: var(--text-dim); }
.exchange-market-edit-btn {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-dim);
  padding: 2px 6px;
  cursor: pointer;
  font-size: 0.7rem;
}
.exchange-market-edit-btn:hover { color: var(--accent); border-color: var(--accent); }

/* ===== drag_panels.css ===== */
/* Draggable window: header has cursor move */
.draggable-window-header {
  cursor: move;
}

/* Panels: no overlay blur — only the window card is transparent + blur; overlay passes clicks so multiple windows work */
.inventory-panel {
  position: fixed;
  inset: 0;
  z-index: 900;
  pointer-events: none;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0;
}

.inventory-panel.hidden {
  display: none;
}

.inventory-panel .inventory-card {
  position: absolute;
  left: 16px;
  top: 80px;
  pointer-events: auto;
}

.inventory-card {
  background: var(--panel-bg);
  backdrop-filter: blur(var(--panel-blur));
  -webkit-backdrop-filter: blur(var(--panel-blur));
  border: 1px solid var(--border-bright);
  border-radius: 0;
  min-width: 220px;
  max-width: 260px;
  max-height: 50vh;
  overflow: hidden;
  box-shadow: 0 10px 32px var(--shadow), inset 0 1px 0 var(--metal-highlight);
  display: flex;
  flex-direction: column;
}


/* ===== house_factory_start.css ===== */
/* House & Factory panels (draggable) */
.structure-panel {
  position: fixed;
  inset: 0;
  z-index: 950;
  pointer-events: none;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.structure-panel.hidden {
  display: none;
}

.structure-panel .structure-card {
  position: absolute;
  /* Mismo estilo de anclaje inicial que inventory: esquina superior izquierda,
     sin transform, para que el drag funcione igual en todas las ventanas. */
  left: 16px;
  top: 80px;
  transform: none;
  pointer-events: auto;
}

#spaceport-panel .spaceport-card.structure-card {
  width: min(640px, calc(100vw - 32px));
  max-width: min(640px, calc(100vw - 32px));
  min-width: min(480px, calc(100vw - 32px));
  max-height: min(88vh, 720px);
  overflow: auto;
}

.spaceport-port-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}

.spaceport-port-btn {
  text-align: left;
  padding: 8px 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.85rem;
}

.spaceport-port-btn:hover,
.spaceport-port-btn.active {
  border-color: var(--accent);
  background: rgba(0, 184, 212, 0.12);
}

.spaceport-trade-block .exchange-table {
  width: 100%;
}

.planet-info-card {
  width: min(340px, calc(100vw - 32px));
  max-height: min(88vh, 720px);
  overflow: auto;
}

.structure-interior-map-card {
  width: min(300px, calc(100vw - 32px));
  max-height: min(88vh, 520px);
  overflow: auto;
}

.structure-interior-map-wrap {
  display: flex;
  justify-content: center;
  padding: 8px 0 4px;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(80, 120, 180, 0.14), transparent 55%),
    #05080c;
  border: 1px solid var(--border);
  cursor: crosshair;
}

#structure-interior-map {
  display: block;
  width: 220px;
  height: 180px;
  image-rendering: auto;
}

.planet-info-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.planet-info-skin-wrap {
  display: flex;
  justify-content: center;
  padding: 8px 0 4px;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(80, 120, 180, 0.18), transparent 55%),
    radial-gradient(ellipse at 70% 80%, rgba(20, 30, 50, 0.5), transparent 60%),
    #0a1018;
  border-radius: 0;
}

#planet-info-skin {
  display: block;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 8px 24px rgba(0,0,0,0.45);
}

.planet-info-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 180px;
  overflow: auto;
}

.planet-info-list li {
  display: grid;
  grid-template-columns: 88px 1fr 52px;
  gap: 8px;
  align-items: center;
  font-size: 0.82rem;
  color: var(--text-dim);
}

.planet-info-list .el-sym {
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.04em;
}

.planet-info-bar {
  height: 6px;
  border-radius: 0;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
}

.planet-info-bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #c9a227);
  border-radius: 0;
}

.planet-info-stats {
  display: grid;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--text-dim);
}

.planet-info-stats .stat-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.planet-info-stats .stat-row strong {
  color: var(--text);
  font-weight: 600;
}

.planet-info-owner {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.planet-info-owner .swatch {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

#estructura-panel .estructura-exchange.exchange-panel {
  max-width: min(98vw, 1480px);
  min-width: min(880px, 98vw);
  width: min(98vw, 1380px);
}

#estructura-panel .exchange-body {
  max-height: min(82vh, 900px);
}

.estructura-toolbar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}

.estructura-modules-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.9fr);
  gap: 14px;
  align-items: start;
}

.estructura-modules-main,
.estructura-modules-side {
  min-width: 0;
}

.estructura-modules-side {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: sticky;
  top: 0;
}

.estructura-live-hint:empty {
  display: none;
}

.estructura-banner-sep {
  opacity: 0.45;
  margin: 0 2px;
}

.estructura-pop-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 4px;
}

.estructura-pop-inline label {
  font-size: 0.75rem;
  color: var(--text-dim);
}

.estructura-pop-inline input {
  width: 64px;
  padding: 4px 6px;
  font-size: 0.8rem;
}

.estructura-pop-save {
  padding: 4px 8px !important;
  font-size: 0.72rem !important;
  min-width: 0;
}

.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;
}

.estructura-inv-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.85fr);
  gap: 10px;
  margin-bottom: 10px;
  align-items: stretch;
}

.estructura-struct-credits-dup {
  color: var(--text-dim);
  font-size: 0.8rem;
}

.estructura-units-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(220px, 0.7fr);
  gap: 14px;
  align-items: start;
}

@media (max-width: 960px) {
  #estructura-panel .estructura-exchange.exchange-panel {
    min-width: 0;
    width: min(98vw, 1380px);
  }
  .estructura-modules-layout,
  .estructura-inv-top,
  .estructura-units-layout {
    grid-template-columns: 1fr;
  }
  .estructura-modules-side {
    position: static;
  }
}

.estructura-add-row {
  display: flex;
  gap: 8px;
  margin: 0 0 12px 0;
  align-items: center;
}

.estructura-add-row select {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 0.85rem;
}

.estructura-stock-list {
  list-style: none;
  margin: 0 0 12px 0;
  padding: 0;
  max-height: min(56vh, 480px);
  overflow-y: auto;
  border: 1px solid var(--border);
}

.estructura-units-list {
  list-style: none;
  margin: 0 0 12px 0;
  padding: 0;
  max-height: min(52vh, 420px);
  overflow-y: auto;
  border: 1px solid var(--border);
}

.estructura-units-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
  color: var(--text);
}

.estructura-units-list li:last-child {
  border-bottom: none;
}

.estructura-units-assign-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 14px;
}

.estructura-units-assign-row label {
  font-size: 0.8rem;
  color: var(--text-dim);
}

.estructura-units-assign-row select {
  flex: 1;
  min-width: 160px;
  padding: 8px 10px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text);
}

.estructura-units-provisional {
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.estructura-slots-banner {
  margin: 0;
  padding: 8px 12px;
  background: rgba(0, 184, 212, 0.1);
  border: 1px solid var(--border-bright);
  color: var(--text);
  font-size: 0.82rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
}

.estructura-slots-banner.slots-full {
  background: var(--negative-dim);
  border-color: rgba(184, 50, 50, 0.45);
}

.estructura-slots-banner.slots-ok {
  background: var(--positive-dim);
  border-color: rgba(42, 168, 154, 0.4);
}

.exchange-section-title {
  margin: 12px 0 6px 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.estructura-slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
  margin: 0;
  max-height: min(52vh, 520px);
  overflow-y: auto;
  padding: 2px;
}

.estructura-slot {
  border: 1px dashed var(--border);
  background: rgba(0, 0, 0, 0.18);
  padding: 12px;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.estructura-slot.compact {
  padding: 8px 10px;
  min-height: 0;
  gap: 4px;
}

.estructura-slot.compact .name {
  font-size: 0.85rem;
}

.estructura-slot.compact .desc {
  font-size: 0.72rem;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.estructura-slot.compact .estructura-slot-label {
  font-size: 0.65rem;
}

.estructura-slot.compact .estructura-module-meta,
.estructura-slot.compact .cost {
  font-size: 0.7rem;
}

.estructura-slot.compact .estructura-slot-actions .exchange-submit {
  padding: 4px 8px;
  font-size: 0.7rem;
}

.estructura-slot.status-active {
  border-style: solid;
  border-color: var(--accent);
  background: rgba(0, 184, 212, 0.08);
}

.estructura-slot.status-unbuilt,
.estructura-slot.status-ready {
  border-style: solid;
  border-color: var(--warning);
  background: var(--warning-dim);
}

.estructura-slot.status-building {
  border-style: solid;
  border-color: var(--warning);
  background: var(--warning-dim);
}

.estructura-build-bar {
  height: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(212, 160, 23, 0.35);
  overflow: hidden;
}

.estructura-build-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, rgba(212, 160, 23, 0.55), rgba(43, 184, 168, 0.65));
  transition: width 0.2s linear;
}

.estructura-slot-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-dim);
}

.estructura-slot .name {
  font-size: 0.92rem;
  color: var(--text-bright);
  font-weight: 600;
}

.estructura-slot .desc {
  font-size: 0.78rem;
  color: var(--text-dim);
  line-height: 1.35;
}

.estructura-slot .cost {
  font-size: 0.75rem;
  color: var(--accent);
}

.estructura-slot-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
}

.estructura-slot-actions .exchange-submit {
  padding: 6px 10px;
  font-size: 0.75rem;
}

.estructura-slot select {
  width: 100%;
  padding: 6px 8px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 0.8rem;
}

.estructura-slot-empty-hint {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  font-size: 0.85rem;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  min-height: 48px;
}

.estructura-footprint-block {
  margin: 0;
  padding: 10px;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.14);
}

.estructura-research-block {
  margin: 0;
  padding: 10px;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.14);
}

.estructura-research-block .exchange-section-title,
.estructura-footprint-block .exchange-section-title {
  margin-top: 0;
}

.estructura-footprint-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: nowrap;
}

.estructura-footprint-grid {
  display: grid;
  grid-auto-flow: dense;
  box-sizing: border-box;
  padding: 4px;
  margin: 0;
  gap: 2px;
  /* Transparent: only real footprint cells paint — no black AABB slab */
  background: transparent;
  border: 1px solid var(--border);
  width: max-content;
  height: max-content;
  max-width: 100%;
  overflow: hidden;
  flex: 0 0 auto;
  align-self: flex-start;
  touch-action: none;
  user-select: none;
}

.estructura-footprint-grid.is-painting {
  cursor: crosshair;
}

.estructura-cell-pads {
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* Prefer matching the shape height; fall back to a modest cap */
  max-height: min(42vh, var(--foot-grid-h, 220px));
  overflow-y: auto;
  min-width: 132px;
  max-width: 180px;
  padding: 6px;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.18);
  flex: 0 0 auto;
  align-self: flex-start;
}

.estructura-cell-pad {
  border: 1px solid var(--border-bright);
  background: rgba(10, 14, 18, 0.55);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  cursor: pointer;
  padding: 6px 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
  width: 100%;
}

.estructura-cell-pad .pad-swatch {
  width: 12px;
  height: 12px;
  border: 1px solid var(--border-bright);
  flex-shrink: 0;
}

.estructura-cell-pad .pad-label {
  flex: 1;
  min-width: 0;
  color: var(--text-bright);
}

.estructura-cell-pad .pad-count {
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.estructura-cell-pad.is-selected {
  border-color: var(--accent);
  background: rgba(0, 184, 212, 0.14);
}

.estructura-cell-pad:hover {
  border-color: var(--accent);
}

.estructura-footprint-cell {
  position: relative;
  box-sizing: border-box;
  width: var(--foot-cell, 28px);
  height: var(--foot-cell, 28px);
  margin: 0;
  padding: 0;
  border: 1px solid #3a4654;
  background: #3a424c;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 0.55rem;
  color: rgba(8, 12, 16, 0.85);
  font-weight: 600;
  touch-action: none;
}

.estructura-footprint-cell:hover {
  outline: 1px solid var(--accent);
  outline-offset: 1px;
}

.estructura-footprint-cell.is-slot {
  background: #1a7a8a;
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(0, 184, 212, 0.35);
}

.estructura-footprint-cell.is-selected-src {
  outline: 2px solid var(--warning);
  outline-offset: 0;
}

.estructura-footprint-cell.is-occupied::after {
  content: "";
  position: absolute;
  inset: 7px;
  background: rgba(255, 220, 120, 0.85);
}

.estructura-footprint-cell:disabled {
  cursor: not-allowed;
  opacity: 0.75;
}

.estructura-footprint-cell.is-placing {
  outline: 2px solid var(--warning);
  outline-offset: 0;
}

.profile-identity-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.profile-identity-row .profile-username {
  margin: 0;
}

.credits-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--border-bright);
  background: rgba(0, 184, 212, 0.1);
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 0.85rem;
  white-space: nowrap;
}

.credits-inline-icon {
  color: var(--warning);
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.estructura-credits-inline {
  margin-left: 10px;
}

.estructura-add-module-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 10px 0;
  align-items: center;
}

.estructura-add-module-row select {
  flex: 1 1 180px;
  min-width: 140px;
  padding: 6px 8px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text);
}

.estructura-credits-transfer {
  margin: 0;
  padding: 8px 10px;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.18);
  height: 100%;
  box-sizing: border-box;
}

.estructura-credits-transfer-Balances,
.estructura-credits-transfer-balances {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  font-size: 0.85rem;
  color: var(--text-dim);
}

.estructura-credits-transfer-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.estructura-credits-transfer-row input {
  width: 100px;
  padding: 6px 8px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text);
}

.estructura-slot .color-swatch {
  width: 14px;
  height: 14px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  display: inline-block;
  margin-right: 6px;
  vertical-align: middle;
}

.estructura-module-list {
  list-style: none;
  margin: 0 0 10px 0;
  padding: 0;
  border: 1px solid var(--border);
  max-height: min(36vh, 260px);
  overflow-y: auto;
}

.estructura-module-info {
  flex: 1;
  min-width: 180px;
}

.estructura-module-empty {
  padding: 12px;
  color: var(--text-dim);
  font-size: 0.8rem;
}

.estructura-pop-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0 0 12px 0;
}

.estructura-pop-row label {
  font-size: 0.8rem;
  color: var(--text-dim);
}

.estructura-pop-row input {
  width: 80px;
  padding: 6px 8px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text);
}

.estructura-module-meta {
  margin-top: 6px;
  font-size: 0.78rem;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.estructura-module-meta .countdown {
  color: var(--accent);
  font-weight: 600;
}

.estructura-module-meta .blocked {
  color: var(--negative);
}

.estructura-module-qty {
  display: flex;
  align-items: center;
  gap: 6px;
}

.estructura-module-qty .count {
  min-width: 1.5em;
  text-align: center;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--text-bright);
}

.estructura-stock-item {
  border-bottom: 1px solid var(--border);
}

.estructura-stock-item:last-child {
  border-bottom: none;
}

.estructura-stock-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  margin: 0;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 0.85rem;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
}

.estructura-stock-bar {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(255, 255, 255, 0.04);
  pointer-events: none;
}

.estructura-stock-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, rgba(43, 184, 168, 0.3), rgba(43, 184, 168, 0.55));
  transition: width 0.2s ease;
}

.estructura-stock-head .estructura-stock-name,
.estructura-stock-head .qty {
  position: relative;
  z-index: 1;
}

.estructura-stock-head .estructura-stock-name {
  flex: 1;
  min-width: 0;
}

/* Item sprites next to names (player + structure inventories) */
.item-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.item-sprite {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  object-fit: contain;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 3px;
}
.item-label-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inventory-table td .item-label {
  max-width: 100%;
}
.house-inventory-item .item-label,
.factory-inventory-item .item-label {
  flex: 1;
  min-width: 0;
}

.estructura-stock-head:hover {
  background: rgba(0, 184, 212, 0.08);
}

.estructura-stock-head .qty {
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  font-size: 0.8rem;
}

.estructura-stock-head .qty-incoming {
  color: var(--positive);
  font-weight: 600;
  margin-left: 4px;
}

.estructura-stock-item.expanded .estructura-stock-head {
  background: rgba(0, 184, 212, 0.18);
  border-bottom: 1px solid var(--border);
}

.estructura-stock-settings {
  display: none;
  padding: 8px 10px 10px;
  background: rgba(0, 0, 0, 0.18);
}

.estructura-stock-item.expanded .estructura-stock-settings {
  display: block;
}

.estructura-stock-settings .structure-form-row {
  margin-bottom: 6px;
}

.estructura-stock-settings .structure-form-row label {
  font-size: 0.75rem;
  color: var(--text-dim);
}

.estructura-stock-settings input[type="number"] {
  width: 100%;
  padding: 4px 6px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 0.8rem;
}

.estructura-stock-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

.estructura-stock-actions button {
  flex: 1;
  font-size: 0.75rem;
  padding: 6px 8px;
}

.estructura-stock-empty {
  padding: 12px 10px;
  color: var(--text-dim);
  font-size: 0.8rem;
}

.structure-card {
  background: var(--panel-bg);
  backdrop-filter: blur(var(--panel-blur));
  -webkit-backdrop-filter: blur(var(--panel-blur));
  border: 1px solid var(--border-bright);
  border-radius: 0;
  min-width: 240px;
  max-width: 320px;
  max-height: calc(100vh - 16px);
  box-shadow: 0 12px 40px var(--shadow), inset 0 1px 0 var(--metal-highlight);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.structure-header {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  background: var(--panel-bg-top);
  backdrop-filter: blur(var(--panel-blur));
  -webkit-backdrop-filter: blur(var(--panel-blur));
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  cursor: move;
  user-select: none;
}

.structure-header h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-bright);
  flex: 1;
  min-width: 0;
}

.structure-body {
  padding: 12px 14px;
  background: rgba(10, 14, 18, 0.6);
  backdrop-filter: blur(var(--panel-blur));
  -webkit-backdrop-filter: blur(var(--panel-blur));
  overflow-y: auto;
  min-height: 0;
}

.structure-hint {
  margin: 0 0 10px 0;
  font-size: 0.75rem;
  color: var(--text-dim);
}

.structure-form-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.structure-form-row label {
  min-width: 72px;
  color: var(--text-dim);
  font-size: 0.85rem;
}

.structure-form-row input,
.structure-form-row select {
  flex: 1;
  padding: 8px 10px;
  background: rgba(10, 14, 18, 0.9);
  border: 1px solid var(--border);
  border-radius: 0;
  color: var(--text-bright);
  font-size: 0.85rem;
}

.structure-form-row input:focus,
.structure-form-row select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-glow);
}

.structure-submit {
  padding: 8px 14px;
  background: linear-gradient(180deg, var(--accent-dim) 0%, var(--accent) 100%);
  border: 1px solid var(--accent);
  border-radius: 0;
  color: var(--bg-deep);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  width: 100%;
}

.structure-submit:hover {
  background: var(--accent);
  border-color: var(--accent);
}

.structure-status {
  margin-top: 8px;
  font-size: 0.75rem;
  color: var(--text-dim);
  min-height: 1.2em;
}

.structure-status.error {
  color: var(--negative);
}

.factory-section-title {
  margin: 12px 0 4px 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 6px;
}

.info-icon {
  font-size: 0.75rem;
  opacity: 0.7;
  cursor: help;
}

.structure-btn-secondary {
  margin-top: 6px;
  background: rgba(120, 120, 120, 0.3);
  border-color: var(--border);
  color: var(--text-dim);
}

.structure-btn-secondary:hover {
  background: rgba(120, 120, 120, 0.5);
  color: var(--text);
}

.factory-countdown {
  margin: 10px 0 0 0;
  font-size: 0.85rem;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.factory-countdown span {
  font-weight: 600;
}

.factory-workers-title {
  margin: 12px 0 4px 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.factory-workers-from-list {
  list-style: none;
  margin: 0 0 8px 0;
  padding: 0;
  max-height: 80px;
  overflow-y: auto;
}

.factory-workers-from-list li {
  padding: 4px 8px;
  font-size: 0.8rem;
  color: var(--text);
  border-bottom: 1px solid var(--border);
}

.factory-workers-from-list li:last-child {
  border-bottom: none;
}

.factory-inventory-title {
  margin: 12px 0 4px 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.factory-inventory-list {
  list-style: none;
  margin: 0 0 8px 0;
  padding: 0;
  max-height: 140px;
  overflow-y: auto;
}

.factory-inventory-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  margin-bottom: 4px;
  font-size: 0.85rem;
}

.factory-inventory-item span {
  flex: 1;
  color: var(--text);
}

.factory-inventory-item .qty {
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
}

.factory-withdraw-btn {
  padding: 4px 8px;
  font-size: 0.75rem;
  background: rgba(0, 184, 212, 0.2);
  border: 1px solid var(--border-accent);
  color: var(--accent);
  cursor: pointer;
  border-radius: 0;
}

.factory-withdraw-btn:hover {
  background: rgba(0, 184, 212, 0.35);
}

.factory-inventory-empty {
  padding: 8px;
  font-size: 0.8rem;
  color: var(--text-dim);
  font-style: italic;
}

.factory-salary-debug {
  margin: 4px 0;
  font-size: 0.8rem;
  color: var(--text-dim);
}
.factory-salary-debug.hidden {
  display: none;
}

.profile-username {
  margin: 0 0 8px 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-bright);
}

.profile-skin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: 8px;
  margin: 8px 0 6px 0;
}

.profile-skin-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 4px;
  border: 1px solid var(--border);
  background: rgba(8, 14, 22, 0.55);
  color: var(--text);
  cursor: pointer;
  min-height: 96px;
}

.profile-skin-btn:hover {
  border-color: var(--accent);
  background: rgba(0, 184, 212, 0.12);
}

.profile-skin-btn.selected {
  border-color: var(--text-bright);
  box-shadow: 0 0 0 1px var(--text-bright);
}

.profile-skin-btn.locked {
  opacity: 0.72;
}

.profile-skin-preview {
  width: 56px;
  height: 56px;
  image-rendering: pixelated;
  background: rgba(0, 0, 0, 0.25);
}

.profile-skin-name {
  font-size: 0.7rem;
  line-height: 1.15;
  text-align: center;
  color: var(--text-bright);
}

.profile-skin-price {
  font-size: 0.68rem;
  font-weight: 700;
  color: #c9971a;
  letter-spacing: 0.02em;
}

.profile-skin-status {
  min-height: 1.1em;
  margin: 0 0 10px 0;
}

.profile-btn-skin-canvas {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: inherit;
  image-rendering: pixelated;
}

.profile-color-palette {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 12px 0;
}

.profile-color-swatch {
  width: 28px;
  height: 28px;
  border: 2px solid var(--border);
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}

.profile-color-swatch:hover {
  border-color: var(--accent);
}

.profile-color-swatch.selected {
  border-color: var(--text-bright);
  box-shadow: 0 0 0 2px var(--bg-deep), 0 0 0 3px var(--text-bright);
}

.profile-list {
  list-style: none;
  margin: 0 0 8px 0;
  padding: 0;
  max-height: 120px;
  overflow-y: auto;
}

.profile-list-item {
  padding: 6px 8px;
  margin-bottom: 4px;
  border: 1px solid var(--border);
  font-size: 0.85rem;
  cursor: pointer;
  color: var(--text);
}

.profile-list-item:hover {
  background: rgba(0, 184, 212, 0.15);
  border-color: var(--border-accent);
}

.profile-list-empty {
  padding: 6px 8px;
  font-size: 0.8rem;
  color: var(--text-dim);
  font-style: italic;
}

.house-countdown {
  margin: 8px 0;
  font-size: 0.85rem;
  color: var(--text-dim);
}

.house-inventory-title {
  margin: 12px 0 4px 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.house-inventory-list {
  list-style: none;
  margin: 0 0 8px 0;
  padding: 0;
  max-height: 140px;
  overflow-y: auto;
}

.house-inventory-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  margin-bottom: 4px;
  font-size: 0.85rem;
}

.house-inventory-item .item-type {
  flex: 1;
  color: var(--text);
}

.house-inventory-item .qty {
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
}

.house-inventory-empty {
  padding: 8px;
  font-size: 0.8rem;
  color: var(--text-dim);
  font-style: italic;
}

#house-panel .structure-card {
  max-width: 520px;
}

.house-panel-body {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  min-height: 0;
}

.house-panel-left {
  min-width: 0;
  overflow-y: auto;
}

.house-panel-right {
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-left: 1px solid var(--border);
  padding-left: 14px;
}

.house-workers-at-title {
  margin: 0 0 4px 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.house-workers-at-list {
  list-style: none;
  margin: 8px 0 0 0;
  padding: 0;
  flex: 1;
  min-height: 120px;
  max-height: 280px;
  overflow-y: auto;
}

.house-workers-at-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  margin-bottom: 6px;
  font-size: 0.85rem;
  background: rgba(255, 255, 255, 0.03);
}

.house-workers-at-item .factory-coords {
  font-variant-numeric: tabular-nums;
  color: var(--text-bright);
}

.house-workers-at-item .workers-count {
  color: var(--text);
}

.house-workers-at-item .salary {
  color: var(--text-dim);
  font-size: 0.8rem;
}

.house-workers-at-item .house-workers-at-extra {
  color: var(--text-dim);
  font-size: 0.78rem;
  margin-top: 2px;
}

.inventory-header {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  background: var(--panel-bg-top);
  backdrop-filter: blur(var(--panel-blur));
  -webkit-backdrop-filter: blur(var(--panel-blur));
  border-bottom: 1px solid var(--border);
}

.inventory-header h2 {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-bright);
}

.inventory-close {
  margin-left: auto;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-dim);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 0;
}

.inventory-close:hover {
  color: var(--text-bright);
  background: var(--metal-highlight);
  border-color: var(--border);
}

.inventory-body {
  padding: 10px 12px;
  background: rgba(10, 14, 18, 0.6);
  backdrop-filter: blur(var(--panel-blur));
  -webkit-backdrop-filter: blur(var(--panel-blur));
}

.inventory-hint {
  margin: 0 0 8px 0;
  font-size: 0.75rem;
  color: var(--text-dim);
}

.inventory-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}

.inventory-table th {
  text-align: left;
  padding: 6px 6px;
  color: var(--text-dim);
  font-weight: 600;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--border);
  background: rgba(18, 26, 36, 0.6);
}

.inventory-table td {
  padding: 6px 6px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}

.inventory-table tbody tr:last-child td {
  border-bottom: none;
}

.inventory-table td:last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
}


/* ===== market.css ===== */
/* Market — no overlay blur; only the exchange card blurs what's behind it */
.market-panel {
  position: fixed;
  inset: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.market-panel.hidden {
  display: none;
}
.market-panel .exchange-panel {
  pointer-events: auto;
}
.exchange-panel {
  background: var(--panel-bg);
  backdrop-filter: blur(var(--panel-blur));
  -webkit-backdrop-filter: blur(var(--panel-blur));
  border: 1px solid var(--border-bright);
  border-radius: 0;
  width: 96%;
  max-width: 920px;
  min-width: 640px;
  max-height: 92vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 16px 48px var(--shadow), inset 0 1px 0 var(--metal-highlight), 0 0 0 1px var(--border-accent);
}
.exchange-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background: var(--panel-bg-top);
  backdrop-filter: blur(var(--panel-blur));
  -webkit-backdrop-filter: blur(var(--panel-blur));
  border-bottom: 1px solid var(--border);
  border-radius: 0;
}
.exchange-header h2 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-bright);
  letter-spacing: 0.04em;
}
.exchange-market-name-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.exchange-market-label {
  font-size: 0.85rem;
  color: var(--text-dim);
  padding: 4px 10px;
  background: var(--bg-input);
  border-radius: 0;
  cursor: pointer;
  border: 1px solid var(--border);
  transition: border-color 0.15s, background 0.15s;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.exchange-market-label:hover {
  background: var(--metal-highlight);
  border-color: var(--border-bright);
}
.exchange-market-label.editing {
  cursor: text;
  white-space: normal;
  max-width: 280px;
}
.exchange-market-edit-btn {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 0.75rem;
  padding: 3px 8px;
  border-radius: 0;
  cursor: pointer;
  flex-shrink: 0;
}
.exchange-market-edit-btn:hover {
  color: var(--text-bright);
  background: var(--metal-highlight);
  border-color: var(--border-bright);
}
.exchange-market-label-input {
  width: 100%;
  min-width: 120px;
  padding: 4px 8px;
  font-size: 0.85rem;
  background: var(--bg-input);
  border: 1px solid var(--accent);
  border-radius: 0;
  color: var(--text-bright);
}
.exchange-market-label-input:focus {
  outline: none;
  box-shadow: 0 0 0 1px var(--accent-glow);
}
.exchange-close {
  margin-left: auto;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-dim);
  font-size: 1.35rem;
  cursor: pointer;
  padding: 2px 8px;
  line-height: 1;
  border-radius: 0;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.exchange-close:hover {
  color: var(--text-bright);
  background: var(--metal-highlight);
  border-color: var(--border);
}
.exchange-tabs {
  display: flex;
  gap: 0;
  padding: 0 18px;
  background: var(--panel-bg);
  backdrop-filter: blur(var(--panel-blur));
  -webkit-backdrop-filter: blur(var(--panel-blur));
  border-bottom: 1px solid var(--border);
}
.exchange-tab {
  padding: 11px 16px;
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  border-radius: 0;
  transition: color 0.15s, border-color 0.15s;
}
.exchange-tab:hover {
  color: var(--text-bright);
}
.exchange-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.exchange-body {
  padding: 18px 20px;
  overflow-y: auto;
  max-height: 72vh;
  background: rgba(10, 14, 18, 0.5);
  backdrop-filter: blur(var(--panel-blur));
  -webkit-backdrop-filter: blur(var(--panel-blur));
}
.exchange-tab-panel {
  display: none;
}
.exchange-tab-panel.active {
  display: block;
}
.exchange-order-type-toggle {
  display: flex;
  gap: 20px;
  margin-bottom: 12px;
}
.exchange-order-type-toggle label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--text);
}
.exchange-order-type-toggle input {
  accent-color: var(--accent);
}
.exchange-hint {
  font-size: 0.75rem;
  color: var(--text-dim);
  margin: 0 0 14px 0;
  line-height: 1.4;
}
.exchange-section-desc {
  font-size: 0.75rem;
  color: var(--text-dim);
  margin: 0 0 12px 0;
  line-height: 1.4;
}
.exchange-orderbook {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 0;
  background: var(--panel-bg);
  backdrop-filter: blur(var(--panel-blur));
  -webkit-backdrop-filter: blur(var(--panel-blur));
  border-radius: 0;
  border: 1px solid var(--border);
  overflow: hidden;
  min-height: 380px;
}
.market-search-pane {
  padding: 12px 14px;
  border-right: 1px solid var(--border);
  background: rgba(10, 14, 18, 0.55);
  backdrop-filter: blur(var(--panel-blur));
  -webkit-backdrop-filter: blur(var(--panel-blur));
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 220px;
}
.market-search-title {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.market-search-input {
  padding: 8px 10px;
  background: var(--bg-input);
  border-radius: 0;
  border: 1px solid var(--border);
  color: var(--text-bright);
  font-size: 0.9rem;
}
.market-search-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-glow);
}
.market-material-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 320px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.market-category {
  border: 1px solid var(--border);
  border-radius: 0;
  overflow: hidden;
}
.market-category-header {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 8px 10px;
  background: var(--panel-bg-top);
  border: none;
  border-radius: 0;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-dim);
  cursor: pointer;
  text-align: left;
  transition: background 0.15s ease, color 0.15s ease;
}
.market-category-header:hover {
  background: var(--metal-highlight);
  color: var(--text);
}
.market-category-label {
  flex: 1;
}
.market-category-count {
  font-weight: 500;
  opacity: 0.85;
}
.market-category-chevron {
  font-size: 0.65rem;
  transition: transform 0.2s ease;
}
.market-category.collapsed .market-category-chevron {
  transform: rotate(-90deg);
}
.market-category-items {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border);
}
.market-category.collapsed .market-category-items {
  display: none;
}
.market-material-item {
  padding: 8px 10px 8px 14px;
  border-radius: 0;
  font-size: 0.9rem;
  cursor: pointer;
  color: var(--text);
  border-left: 2px solid transparent;
}
.market-material-item:hover {
  background: var(--metal-highlight);
}
.market-material-item.active {
  background: rgba(0, 184, 212, 0.12);
  color: var(--accent);
  border-left-color: var(--accent);
}
.market-category-empty {
  padding: 12px 10px;
  font-size: 0.9rem;
  color: var(--text-dim);
  font-style: italic;
}
.market-orderbook-pane {
  display: grid;
  grid-template-rows: 1fr 1fr;
  min-height: 320px;
}
.market-bids-pane,
.market-asks-pane {
  position: relative;
  overflow: auto;
}
.market-bids-pane {
  border-bottom: 1px solid var(--border);
}
.market-pane-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--panel-bg-top);
  backdrop-filter: blur(var(--panel-blur));
  -webkit-backdrop-filter: blur(var(--panel-blur));
  border-bottom: 1px solid var(--border);
}
.market-pane-title {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}
.exchange-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.exchange-table th {
  text-align: left;
  padding: 10px 12px;
  color: var(--text-dim);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--border);
  background: rgba(18, 26, 36, 0.7);
}
.exchange-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.exchange-table tbody tr:hover td {
  background: rgba(42, 58, 74, 0.5);
}
.exchange-table tbody tr:last-child td {
  border-bottom: none;
}
.exchange-bid { color: var(--positive); }
.exchange-ask { color: var(--negative); }
.exchange-empty {
  color: var(--text-dim);
  font-style: italic;
  text-align: center;
  padding: 16px !important;
}
.market-order-user td {
  color: var(--accent);
}
.market-order-seller td {
  color: var(--positive);
}
#exchange-bids tr,
#exchange-asks tr {
  cursor: pointer;
}

/* Trade modal */
.market-trade-backdrop {
  position: fixed;
  inset: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1100;
}
.market-trade-modal {
  background: var(--panel-bg);
  backdrop-filter: blur(var(--panel-blur));
  -webkit-backdrop-filter: blur(var(--panel-blur));
  border-radius: 0;
  border: 1px solid var(--border-bright);
  padding: 14px 16px 12px;
  min-width: 260px;
  max-width: 320px;
  box-shadow: 0 16px 48px var(--shadow), inset 0 1px 0 var(--metal-highlight);
}
.market-trade-title {
  margin: 0 0 4px 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-bright);
}
.market-trade-info {
  margin: 0 0 10px 0;
  font-size: 0.8rem;
  color: var(--text-dim);
}
.market-trade-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.market-trade-row label {
  min-width: 64px;
  font-size: 0.8rem;
  color: var(--text-dim);
}
.market-trade-row input {
  flex: 1;
  padding: 7px 10px;
  background: var(--bg-input);
  border-radius: 0;
  border: 1px solid var(--border);
  color: var(--text-bright);
  font-size: 0.8rem;
}
.market-trade-row input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-glow);
}
.market-trade-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.market-trade-btn {
  padding: 7px 12px;
  border-radius: 0;
  border: 1px solid var(--border);
  font-size: 0.8rem;
  cursor: pointer;
}
.market-trade-btn.primary {
  background: linear-gradient(180deg, var(--accent-dim) 0%, var(--accent) 100%);
  color: var(--bg-deep);
  border-color: var(--accent);
}
.market-trade-btn.primary:hover {
  background: var(--accent);
  color: var(--bg-deep);
}
.market-trade-btn.secondary {
  background: linear-gradient(180deg, var(--metal-highlight) 0%, var(--bg-panel) 100%);
  color: var(--text);
  border-color: var(--border);
}
.market-trade-btn.secondary:hover {
  background: var(--border-bright);
  color: var(--text-bright);
  border-color: var(--border-bright);
}
.exchange-place {
  background: var(--panel-bg);
  backdrop-filter: blur(var(--panel-blur));
  -webkit-backdrop-filter: blur(var(--panel-blur));
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 14px;
}
.exchange-place h3,
.exchange-balance h3 {
  margin: 0 0 12px 0;
  font-size: 0.78rem;
  color: var(--text-dim);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.exchange-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.exchange-form-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.exchange-form-row label {
  min-width: 64px;
  color: var(--text-dim);
  font-size: 0.85rem;
}
.exchange-form-row select,
.exchange-form-row input {
  flex: 1;
  padding: 9px 12px;
  background: rgba(10, 14, 18, 0.8);
  border: 1px solid var(--border);
  border-radius: 0;
  color: var(--text-bright);
  font-size: 0.85rem;
  transition: border-color 0.15s;
}
.exchange-form-row select:focus,
.exchange-form-row input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-glow);
}
.exchange-submit {
  padding: 11px 18px;
  background: linear-gradient(180deg, var(--accent-dim) 0%, var(--accent) 100%);
  border: 1px solid var(--accent);
  border-radius: 0;
  color: var(--bg-deep);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.exchange-submit:hover {
  background: var(--accent);
  border-color: var(--accent);
}
.exchange-form-status {
  font-size: 0.75rem;
  color: var(--text-dim);
  min-height: 1.3em;
}
.exchange-form-status.error {
  color: var(--negative);
}
.exchange-balance {
  background: var(--panel-bg);
  backdrop-filter: blur(var(--panel-blur));
  -webkit-backdrop-filter: blur(var(--panel-blur));
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 14px;
}
.exchange-table-compact th,
.exchange-table-compact td {
  padding: 6px 10px;
  font-size: 0.82rem;
}
.exchange-table-compact tbody tr td:last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--text-bright);
}
.exchange-table-compact tbody tr:hover td {
  background: var(--metal-highlight);
}


/* ===== ptree.css ===== */
/* —— Production tree (tech-tree style, pan inside window) —— */
.production-tree-panel {
  z-index: 965;
}
.production-tree-card {
  width: min(98vw, 1280px);
  max-width: min(98vw, 1280px);
  min-width: 320px;
  left: 16px;
  top: 24px;
  background: var(--bg-panel);
  border: 1px solid var(--border-bright);
  box-shadow: 0 12px 36px var(--shadow), inset 0 1px 0 var(--metal-highlight);
  display: flex;
  flex-direction: column;
  max-height: min(92vh, 860px);
}
.ptree-zoom-controls {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ptree-zoom-label {
  min-width: 3.2rem;
  text-align: center;
  font-size: 0.72rem;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.production-tree-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.production-tree-header h2 {
  flex: 1;
  margin: 0;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  color: var(--text-bright);
}
.production-tree-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px 12px;
  min-height: 0;
  flex: 1;
}
.production-tree-hint {
  margin: 0;
  font-size: 0.72rem;
  color: var(--text-dim);
}
.ptree-viewport {
  position: relative;
  flex: 1;
  min-height: 440px;
  height: 520px;
  overflow: hidden;
  border: 1px solid var(--border-bright);
  background: #070b10;
  cursor: grab;
  touch-action: none;
}
.ptree-viewport.ptree-dragging {
  cursor: grabbing;
}
.ptree-world {
  position: absolute;
  left: 0;
  top: 0;
  width: 4200px;
  height: 900px;
  transform-origin: 0 0;
  will-change: transform;
  /* Avoid subpixel clipping of last era columns when scaled */
  overflow: visible;
}
.ptree-edges {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 2;
}
.ptree-edges path {
  fill: none;
  stroke: rgba(160, 180, 200, 0.28);
  stroke-width: 2;
}
.ptree-edges path.ptree-edge-hot {
  stroke: rgba(255, 215, 106, 0.85);
  stroke-width: 2.5;
}
.ptree-edges path.ptree-edge-era-neolithic { stroke: rgba(143, 188, 106, 0.4); }
.ptree-edges path.ptree-edge-era-metals { stroke: rgba(201, 132, 74, 0.45); }
.ptree-edges path.ptree-edge-era-classical { stroke: rgba(212, 196, 160, 0.4); }
.ptree-edges path.ptree-edge-era-industrial { stroke: rgba(184, 92, 56, 0.45); }
.ptree-edges path.ptree-edge-era-electric { stroke: rgba(230, 200, 74, 0.45); }
.ptree-edges path.ptree-edge-era-digital { stroke: rgba(94, 200, 255, 0.45); }
.ptree-nodes {
  position: absolute;
  inset: 0;
  z-index: 3;
}
.ptree-era-bands {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.ptree-era-band {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  border-left: 2px solid color-mix(in srgb, var(--era-accent) 55%, transparent);
  border-right: 1px solid color-mix(in srgb, var(--era-accent) 25%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--era-accent) 14%, transparent), transparent 28%),
    linear-gradient(90deg, color-mix(in srgb, var(--era-accent) 10%, #0a1018), color-mix(in srgb, var(--era-accent) 4%, #0a1018));
  opacity: 0.95;
}
.ptree-era-band.ptree-era-neolithic {
  background-image:
    radial-gradient(ellipse at 30% 20%, rgba(143, 188, 106, 0.12), transparent 50%),
    linear-gradient(180deg, rgba(60, 80, 40, 0.22), rgba(10, 16, 12, 0.15));
}
.ptree-era-band.ptree-era-metals {
  background-image:
    radial-gradient(ellipse at 40% 30%, rgba(201, 132, 74, 0.14), transparent 55%),
    linear-gradient(180deg, rgba(90, 50, 28, 0.24), rgba(14, 10, 8, 0.15));
}
.ptree-era-band.ptree-era-classical {
  background-image:
    radial-gradient(ellipse at 50% 15%, rgba(212, 196, 160, 0.12), transparent 50%),
    linear-gradient(180deg, rgba(70, 62, 48, 0.22), rgba(12, 12, 14, 0.15));
}
.ptree-era-band.ptree-era-industrial {
  background-image:
    radial-gradient(ellipse at 35% 40%, rgba(184, 92, 56, 0.14), transparent 55%),
    linear-gradient(180deg, rgba(50, 28, 20, 0.28), rgba(8, 8, 10, 0.18));
}
.ptree-era-band.ptree-era-electric {
  background-image:
    radial-gradient(ellipse at 45% 25%, rgba(230, 200, 74, 0.12), transparent 50%),
    linear-gradient(180deg, rgba(40, 36, 12, 0.26), rgba(8, 10, 14, 0.16));
}
.ptree-era-band.ptree-era-digital {
  background-image:
    radial-gradient(ellipse at 55% 20%, rgba(94, 200, 255, 0.12), transparent 50%),
    linear-gradient(180deg, rgba(16, 36, 56, 0.3), rgba(6, 10, 16, 0.18));
}
.ptree-era-label {
  position: absolute;
  z-index: 1;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--era-accent, var(--accent));
  border-bottom: 2px solid color-mix(in srgb, var(--era-accent, var(--accent)) 55%, transparent);
  padding: 2px 8px 6px 0;
  white-space: nowrap;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}
.ptree-era-sub {
  display: block;
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  margin-top: 2px;
  text-transform: none;
}
.ptree-node {
  position: absolute;
  z-index: 4;
  width: 148px;
  min-height: 62px;
  padding: 8px 10px;
  touch-action: none;
  border: 1px solid color-mix(in srgb, var(--era-accent, var(--border-bright)) 45%, var(--border-bright));
  background: rgba(14, 18, 24, 0.94);
  color: var(--text);
  cursor: pointer;
  user-select: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: border-color 0.12s, box-shadow 0.12s, background 0.12s, transform 0.12s;
}
.ptree-node:hover,
.ptree-node.ptree-selected {
  border-color: var(--era-accent, var(--accent));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--era-accent, var(--accent)) 45%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transform: translateY(-1px);
}
.ptree-node.ptree-kind-module {
  border-left: 3px solid var(--era-accent, var(--accent));
}
.ptree-node.ptree-kind-material {
  border-left: 3px solid color-mix(in srgb, var(--era-accent, #c9a227) 70%, #fff);
  border-radius: 0;
  background: rgba(18, 22, 28, 0.92);
}
.ptree-node.ptree-era-neolithic { background: rgba(18, 28, 16, 0.94); }
.ptree-node.ptree-era-metals { background: rgba(32, 20, 14, 0.94); }
.ptree-node.ptree-era-classical { background: rgba(28, 26, 20, 0.94); }
.ptree-node.ptree-era-industrial { background: rgba(28, 16, 12, 0.95); }
.ptree-node.ptree-era-electric { background: rgba(24, 22, 12, 0.95); }
.ptree-node.ptree-era-digital { background: rgba(12, 22, 34, 0.95); }
.ptree-node-kind {
  display: block;
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--era-accent, var(--text-dim)) 55%, var(--text-dim));
  margin-bottom: 2px;
}
.ptree-node-name {
  display: block;
  font-size: 0.8rem;
  color: var(--text-bright);
  line-height: 1.25;
}
.ptree-node-meta {
  display: block;
  margin-top: 4px;
  font-size: 0.65rem;
  color: var(--text-dim);
  line-height: 1.3;
}
.ptree-detail {
  min-height: 72px;
  max-height: 110px;
  overflow: auto;
  border: 1px solid var(--border);
  background: rgba(10, 14, 20, 0.9);
  padding: 8px 10px;
  font-size: 0.78rem;
  color: var(--text);
}
.ptree-detail-empty {
  color: var(--text-dim);
}
.ptree-detail h3 {
  margin: 0 0 4px;
  font-size: 0.85rem;
  color: var(--text-bright);
}
.ptree-detail .ptree-detail-row {
  color: var(--text-dim);
  margin-top: 2px;
}
.ptree-detail .ptree-detail-row strong {
  color: var(--text);
  font-weight: 500;
}


/* ===== galaxy.css ===== */
/* —— Galaxy map: fullscreen tactical overlay (Homeworld-style) —— */
.galaxy-panel-window {
  z-index: 980;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.galaxy-panel-window.hidden { display: none !important; }
.galaxy-panel-window .galaxy-card {
  position: absolute;
  inset: 0;
  left: 0;
  top: 0;
  width: 100%;
  max-width: none;
  min-width: 0;
  max-height: none;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #05070a;
  border: none;
  box-shadow: none;
  font-family: var(--font-ui);
  color: var(--text);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  pointer-events: auto;
}
.galaxy-panel-window .galaxy-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: nowrap;
  flex-shrink: 0;
  padding: 8px 14px;
  background: linear-gradient(180deg, rgba(12, 18, 26, 0.96), rgba(8, 12, 18, 0.82));
  border-bottom: 1px solid rgba(90, 110, 130, 0.45);
  cursor: default;
}
.galaxy-panel-window .galaxy-header h2 {
  margin: 0;
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--text-bright);
  text-transform: uppercase;
}
.galaxy-header .galaxy-hint {
  flex: 1 1 auto;
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--text-dim);
  font-family: var(--font-ui);
}
.galaxy-header-actions {
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
  align-items: center;
  flex-shrink: 0;
}
.galaxy-btn {
  font-family: var(--font-ui);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 10px;
  background: var(--bg-input) !important;
  color: var(--text-bright) !important;
  border: 1px solid var(--border-bright) !important;
  border-radius: 0;
  cursor: pointer;
}
.galaxy-btn:hover {
  border-color: var(--accent) !important;
  color: var(--text-bright) !important;
  background: #1a222a !important;
}
.galaxy-btn.hidden { display: none; }
.galaxy-btn-accent {
  border-color: var(--accent) !important;
  color: var(--text-bright) !important;
  background: #1a222a !important;
}
.galaxy-btn-accent:hover {
  background: rgba(0, 184, 212, 0.22) !important;
  color: var(--text-bright) !important;
}
.galaxy-panel-window .galaxy-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background: #05070a;
  display: flex;
  flex-direction: column;
}
.galaxy-hint,
.galaxy-selection {
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--text-dim);
  margin: 6px 0;
  font-family: var(--font-ui);
}
.galaxy-selection {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 2;
  margin: 0;
  max-width: min(52vw, 520px);
  color: var(--text-bright);
  min-height: 1.4em;
  font-variant-numeric: tabular-nums;
  border: 1px solid rgba(90, 110, 130, 0.5);
  background: rgba(8, 12, 18, 0.78);
  padding: 6px 10px;
  pointer-events: none;
}
.galaxy-canvas {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  background: #05070a;
  border: none;
  cursor: crosshair;
  image-rendering: auto;
}


/* ===== scroll.css ===== */
/* Scrollbar acorde al tema (metal / brutalist) — listas y paneles */
.house-workers-at-list,
.house-inventory-list,
.house-panel-left,
.structure-body,
.factory-workers-from-list,
.factory-inventory-list,
.chat-tab-pane .chat-messages {
  scrollbar-width: thin;
  scrollbar-color: var(--border-bright) var(--border);
  -webkit-overflow-scrolling: touch;
}

.house-workers-at-list::-webkit-scrollbar,
.house-inventory-list::-webkit-scrollbar,
.house-panel-left::-webkit-scrollbar,
.structure-body::-webkit-scrollbar,
.factory-workers-from-list::-webkit-scrollbar,
.factory-inventory-list::-webkit-scrollbar,
.chat-tab-pane .chat-messages::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.house-workers-at-list::-webkit-scrollbar-track,
.house-inventory-list::-webkit-scrollbar-track,
.house-panel-left::-webkit-scrollbar-track,
.structure-body::-webkit-scrollbar-track,
.factory-workers-from-list::-webkit-scrollbar-track,
.factory-inventory-list::-webkit-scrollbar-track,
.chat-tab-pane .chat-messages::-webkit-scrollbar-track {
  background: var(--border);
  border-left: 1px solid var(--border-bright);
}

.house-workers-at-list::-webkit-scrollbar-thumb,
.house-inventory-list::-webkit-scrollbar-thumb,
.house-panel-left::-webkit-scrollbar-thumb,
.structure-body::-webkit-scrollbar-thumb,
.factory-workers-from-list::-webkit-scrollbar-thumb,
.factory-inventory-list::-webkit-scrollbar-thumb,
.chat-tab-pane .chat-messages::-webkit-scrollbar-thumb {
  background: var(--border-bright);
  border: 1px solid var(--metal-highlight);
}

.house-workers-at-list::-webkit-scrollbar-thumb:hover,
.house-inventory-list::-webkit-scrollbar-thumb:hover,
.house-panel-left::-webkit-scrollbar-thumb:hover,
.structure-body::-webkit-scrollbar-thumb:hover,
.factory-workers-from-list::-webkit-scrollbar-thumb:hover,
.factory-inventory-list::-webkit-scrollbar-thumb:hover,
.chat-tab-pane .chat-messages::-webkit-scrollbar-thumb:hover {
  background: var(--border-accent);
}

.house-workers-at-list::-webkit-scrollbar-thumb:active,
.house-inventory-list::-webkit-scrollbar-thumb:active,
.house-panel-left::-webkit-scrollbar-thumb:active,
.structure-body::-webkit-scrollbar-thumb:active,
.factory-workers-from-list::-webkit-scrollbar-thumb:active,
.factory-inventory-list::-webkit-scrollbar-thumb:active,
.chat-tab-pane .chat-messages::-webkit-scrollbar-thumb:active {
  background: var(--accent-dim);
}

.chat-messages li.chat-message-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 3px 0;
  line-height: 1.35;
  word-break: break-word;
}

.chat-messages .chat-message-body {
  min-width: 0;
  flex: 1;
}

.chat-messages .chat-time {
  flex-shrink: 0;
  font-size: 0.65rem;
  color: var(--text-dim);
}

.chat-messages .chat-username {
  color: var(--accent);
  font-weight: 500;
  margin-right: 4px;
}

.chat-form {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

.chat-char-count {
  font-size: 0.6rem;
  color: var(--text-dim);
  flex-shrink: 0;
  min-width: 2.2em;
  text-align: right;
}

.chat-input {
  flex: 1;
  min-width: 0;
  padding: 6px 8px;
  font-size: 0.8rem;
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text);
  outline: none;
  border-radius: 0;
}

.chat-input:focus {
  border-color: var(--border-accent);
}

.chat-send {
  padding: 6px 10px;
  font-size: 0.78rem;
  background: var(--border-accent);
  border: 1px solid var(--accent-dim);
  color: var(--text-bright);
  cursor: pointer;
  border-radius: 0;
}

.chat-send:hover {
  background: var(--accent-dim);
}


/* ===== redesign overrides ===== */

/* Research / tech gating — station cyan, no purple */
.estructura-research-block {
  margin: 0;
  padding: 10px;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.14);
}
.estructura-research-row { margin-top: 8px; }
.estructura-research-active {
  margin: 6px 0 0;
  padding: 6px 8px;
  font-size: 0.75rem;
  color: var(--accent);
  border-left: 2px solid var(--accent);
  background: rgba(0, 0, 0, 0.25);
}
.ptree-node.ptree-locked {
  opacity: 0.45;
  filter: grayscale(0.35);
}
.ptree-node.ptree-locked .ptree-node-kind { color: var(--warning); }
.ptree-node.ptree-starter {
  box-shadow: inset 0 0 0 1px rgba(42, 168, 154, 0.45);
}
.ptree-detail-actions { margin-top: 10px; }

/* Panel positioning: layout slices win over 01-windows absolute stubs */
.structure-panel,
.inventory-panel {
  position: fixed;
  inset: 0;
  pointer-events: none;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.structure-panel { z-index: 950; }
.inventory-panel { z-index: 900; }
.structure-panel.hidden,
.inventory-panel.hidden { display: none; }
.structure-panel .structure-card,
.inventory-panel .inventory-card {
  position: absolute;
  left: 16px;
  top: 80px;
  transform: none;
  pointer-events: auto;
}

/* Planet bars — square track, accent fill */
.planet-info-bar {
  height: 6px;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.planet-info-bar > span {
  display: block;
  height: 100%;
  border-radius: 0;
  background: linear-gradient(90deg, var(--accent-dim), var(--warning));
}
.planet-info-skin-wrap {
  border-radius: 0;
}

/* Compact exchange headers (override market padding bloat) */
.exchange-header {
  padding: 8px 12px;
}
.exchange-header h2 {
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.exchange-tabs { padding: 0; }
.exchange-tab {
  flex: 1;
  min-height: 30px;
  padding: 6px 8px;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: none;
  box-shadow: none;
}
.exchange-tab.active {
  color: var(--accent);
  box-shadow: inset 0 -2px 0 var(--accent);
  background: rgba(0, 184, 212, 0.05);
}
.exchange-body {
  padding: 10px 12px 12px;
}

/* Align AESTHETIC token aliases used by older rules */

/* ===== station polish v2 — kill vibe chrome ===== */

/* Panels: opaque instrument surfaces, one hard edge, no glass theatre */
.ce-panel,
.structure-card,
.inventory-card,
.exchange-panel,
.galaxy-card,
.production-tree-card,
.ic-shop-card,
.org-card,
.planet-info-card,
.chat-window,
.login-card,
.death-card,
.travel-loading-card,
.entity-dir-panel,
.cell-info-panel {
  background: var(--panel-bg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--border);
  box-shadow: 0 8px 20px var(--shadow);
  border-radius: 0;
}

.structure-header,
.inventory-header,
.galaxy-header,
.production-tree-header,
.exchange-header,
.chat-window-header,
.cell-info-header,
.draggable-window-header {
  background: var(--bg-panel-top);
  border-bottom: 1px solid var(--border);
  padding: 6px 10px;
  min-height: 32px;
}

.structure-header h2,
.inventory-header h2,
.galaxy-header h2,
.production-tree-header h2,
.exchange-header h2,
.chat-window-title,
#cell-info-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-bright);
}

/* Kill neon accent fills on primary buttons */
.galaxy-btn-accent,
.exchange-submit,
.structure-submit,
.chat-send,
.death-respawn-btn,
#login,
.ce-btn {
  background: var(--bg-input);
  border: 1px solid var(--border-bright);
  color: var(--text-bright);
  box-shadow: none;
  text-shadow: none;
  border-radius: 0;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.78rem;
  font-weight: 600;
}
.galaxy-btn-accent:hover,
.exchange-submit:hover,
.structure-submit:hover,
.chat-send:hover,
.death-respawn-btn:hover,
#login:hover,
.ce-btn:hover {
  background: #1c222a;
  border-color: var(--accent);
  color: var(--text-bright);
}

/* Login: brand first, solid veil — no HUD bleed-through */
#login-overlay {
  background: #0a0c0f;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
#login-overlay:not(.hidden) ~ #ui-overlay,
#login-overlay:not(.hidden) ~ #canvas {
  visibility: hidden;
}
.login-card {
  width: min(360px, 92vw);
  padding: 22px 24px 20px;
  border: 1px solid var(--border-bright);
  background: var(--panel-bg);
}
.login-card::before { display: none !important; }
.login-card h1 {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.55rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-bright);
}
.login-subtitle {
  margin: 0 0 18px;
  font-size: 0.8rem;
  color: var(--text-dim);
  letter-spacing: 0.02em;
  text-transform: none;
}
.login-tabs {
  display: flex;
  gap: 0;
  margin: 0 0 14px;
  border-bottom: 1px solid var(--border);
}
.login-tab {
  flex: 1;
  min-height: 30px;
  padding: 6px 8px;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: transparent;
  color: var(--text-dim);
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}
.login-tab:hover { color: var(--text); }
.login-tab.active {
  color: var(--text-bright);
  border-bottom-color: var(--accent);
}
.login-form { display: flex; flex-direction: column; gap: 8px; }
.login-form.hidden { display: none; }
.login-form input[type="text"],
.login-form input[type="email"],
.login-form input[type="password"] {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border);
  padding: 8px 10px;
  font-size: 0.9rem;
  color: var(--text);
}
.login-form input:focus,
input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: none;
  outline: none;
}
#login, #register {
  width: 100%;
  min-height: 34px;
  margin-top: 4px;
}

/* Neocom rail — flat, dense, no gradient wash */
.side-menu {
  width: var(--rail-w);
  padding: 6px 4px;
  gap: 1px;
  background: #0e1115;
  border-right: 1px solid var(--border);
  box-shadow: none;
}
.side-menu-item {
  min-height: 40px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-dim);
}
.side-menu-item::before { display: none !important; }
.side-menu-item:hover {
  color: var(--text);
  background: #161b21;
  border-color: var(--border);
}
.side-menu-item.active-menu,
.side-menu-item.active,
.weapon-btn.active,
#iso-mode-btn.active {
  color: var(--text-bright);
  background: #1a222a;
  border-color: var(--border-bright);
  box-shadow: inset 2px 0 0 var(--accent);
}
.side-menu-icon {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.side-menu-amount {
  font-size: 0.65rem;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

/* Entity directory — compact readout */
.entity-dir-panel,
.cell-info-panel {
  background: var(--panel-bg);
  border: 1px solid var(--border);
  box-shadow: 0 6px 16px var(--shadow);
}
.entity-dir-tab {
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
}
.entity-dir-tab.active {
  color: var(--text-bright);
  background: #1a222a;
  box-shadow: inset 0 -2px 0 var(--accent);
}
.entity-dir-item:hover {
  background: #161b21;
  border-color: var(--border);
}
.entity-dir-item-name { color: var(--text-bright); font-size: 0.82rem; }
.entity-dir-item-meta { color: var(--text-dim); font-size: 0.7rem; }

/* Tabs shared */
.exchange-tab.active,
.estructura-tab.active,
.chat-tab.active,
.org-tab.active {
  color: var(--text-bright);
  background: #1a222a;
  box-shadow: inset 0 -2px 0 var(--accent);
}

/* IC shop — premium but sober */
.ic-shop-card .structure-header h2 {
  color: var(--text-bright);
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
}
.ic-balance-row {
  border: 1px solid var(--border);
  background: #12161c;
  box-shadow: none;
}
.ic-balance-value {
  color: var(--text-bright);
  text-shadow: none;
  font-size: 1.05rem;
}
.ic-pack-btn {
  border: 1px solid var(--border);
  background: #12161c;
  border-radius: 0;
}
.ic-pack-btn::before { width: 2px; background: var(--accent-dim); }
.ic-pack-btn:hover {
  border-color: var(--border-bright);
  background: #181e26;
}
.ic-pack-btn[data-tier] { --ic-tier: var(--accent); }
.ic-pack-amount {
  border: 1px solid var(--border);
  background: var(--bg-input);
}
.ic-pack-bonus {
  border: 1px solid var(--border);
  color: var(--warning);
  border-radius: 0;
}
.ic-pack-cta { color: var(--text-dim); }

/* Research — no purple leftovers */
.estructura-research-block {
  margin: 0;
  border: 1px solid var(--border);
  background: #12161c;
}
.estructura-research-active {
  color: var(--text);
  border-left: 2px solid var(--accent);
  background: #0e1216;
}

/* Nav / corner */
.nav-readout,
.corner-icon-btn {
  background: var(--panel-bg);
  border: 1px solid var(--border);
  box-shadow: none;
  border-radius: 0;
}
.corner-icon-btn:hover:not(:disabled) {
  border-color: var(--border-bright);
  color: var(--text-bright);
  background: #1a222a;
}

/* Kill leftover neon rgba accents from older slices */
.side-menu-item.active-menu,
.weapon-btn.active,
#iso-mode-btn.active {
  background: #1a222a;
}

/* Hard guarantee: decorative float deltas never block */
#inventory-float-layer,
#credits-float-layer {
  pointer-events: none !important;
}

/* no glitch shadows */
#login, .login-card, .side-menu, .structure-header h2, .ic-balance-value { text-shadow: none !important; filter: none; }

/* Thin station scrollbars (kill OS chrome vibe) */
.entity-dir-list,
.structure-body,
.inventory-body,
.exchange-body,
.production-tree-body,
.galaxy-body,
.org-body,
.chat-messages,
.side-menu {
  scrollbar-width: thin;
  scrollbar-color: #3a424e #12161c;
}
.entity-dir-list::-webkit-scrollbar,
.structure-body::-webkit-scrollbar,
.inventory-body::-webkit-scrollbar,
.exchange-body::-webkit-scrollbar,
.side-menu::-webkit-scrollbar,
.chat-messages::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.entity-dir-list::-webkit-scrollbar-track,
.structure-body::-webkit-scrollbar-track,
.inventory-body::-webkit-scrollbar-track,
.exchange-body::-webkit-scrollbar-track,
.side-menu::-webkit-scrollbar-track,
.chat-messages::-webkit-scrollbar-track {
  background: #12161c;
  border-left: 1px solid var(--border);
}
.entity-dir-list::-webkit-scrollbar-thumb,
.structure-body::-webkit-scrollbar-thumb,
.inventory-body::-webkit-scrollbar-thumb,
.exchange-body::-webkit-scrollbar-thumb,
.side-menu::-webkit-scrollbar-thumb,
.chat-messages::-webkit-scrollbar-thumb {
  background: #3a424e;
  border: 1px solid #262c34;
}
.entity-dir-list::-webkit-scrollbar-thumb:hover,
.structure-body::-webkit-scrollbar-thumb:hover {
  background: #4a5562;
}

.org-mine-header {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.org-mine-summary .org-form-row { margin-top: 8px; }
.org-members {
  margin-top: 8px;
  padding: 8px;
  border: 1px solid var(--border);
  background: #12161c;
  color: var(--text-dim);
  font-size: 0.75rem;
  line-height: 1.4;
}

.banner-el-btn.selected {
  border-color: var(--accent);
  color: var(--text-bright);
  background: #1a222a;
  box-shadow: inset 0 0 0 1px var(--accent);
}
#banner-preview {
  cursor: grab;
  touch-action: none;
}
.chat-join-code-bar {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 6px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  background: #12161c;
}
.chat-join-code-bar.hidden { display: none !important; }
.chat-join-code-bar .chat-input { min-width: 0; }
.chat-join-code-bar .chat-send { min-width: 44px; }


#estructura-slots-banner .estructura-spec-val {
  opacity: 0.75;
  font-weight: 400;
}
#estructura-slots-banner.spec-active .estructura-spec-val,
#estructura-slots-banner .estructura-spec-val.active {
  opacity: 1;
  color: #fbbf24;
  font-weight: 600;
}

.entity-info-card {
  min-width: 280px;
  max-width: 360px;
}
.entity-info-head {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}
.entity-info-banner {
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
  flex-shrink: 0;
}
.entity-info-banner.mini {
  width: 28px;
  height: 28px;
}
.entity-info-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-bright, #e8eef5);
}
.entity-info-sub {
  font-size: 0.75rem;
  color: var(--text-dim, #8b9bb4);
  margin-top: 2px;
}
.entity-info-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  color: inherit;
  padding: 8px 10px;
  margin: 4px 0;
  cursor: pointer;
  font: inherit;
}
.entity-info-link:hover {
  background: rgba(0, 184, 212, 0.08);
  border-color: rgba(0, 184, 212, 0.35);
}
.entity-info-link.compact {
  padding: 6px 8px;
}
.entity-info-link span {
  color: var(--text-dim, #8b9bb4);
  font-size: 0.72rem;
}
.entity-info-link strong {
  font-size: 0.85rem;
}
.entity-info-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.entity-info-list .entity-info-link {
  justify-content: flex-start;
}

.galaxy-main-row {
  display: flex;
  gap: 0;
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  position: relative;
}
.galaxy-map-col {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  position: relative;
  display: flex;
}
.galaxy-filters {
  flex: 0 0 200px;
  width: 200px;
  max-width: 220px;
  background: rgba(10, 14, 20, 0.88);
  border: none;
  border-left: 1px solid rgba(90, 110, 130, 0.45);
  padding: 10px 10px 12px;
  overflow-y: auto;
  max-height: none;
  height: 100%;
  font-family: var(--font-ui, "Titillium Web", sans-serif);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.galaxy-filters-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 6px;
}
.galaxy-filters-head h3 {
  margin: 0;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-bright, #e8eef5);
}
.galaxy-filters-hint {
  font-size: 0.68rem;
  color: var(--text-dim, #8b9bb4);
  margin: 0 0 8px;
  line-height: 1.35;
}
.galaxy-filter-yellow { color: #f5d76e; font-weight: 700; }
.galaxy-filter-section {
  margin-bottom: 10px;
}
.galaxy-filter-section h4 {
  margin: 0 0 4px;
  font-size: 0.7rem;
  color: var(--text-dim, #8b9bb4);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.galaxy-filter-checks {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.galaxy-filter-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  color: var(--text-bright, #e8eef5);
  cursor: pointer;
  user-select: none;
}
.galaxy-filter-check input {
  accent-color: #e6c35c;
}
.galaxy-filter-match-count {
  margin: 8px 0 0;
  font-size: 0.7rem;
  color: #f5d76e;
  border-top: 1px solid var(--border, #30363d);
  padding-top: 6px;
}
.galaxy-canvas.filter-match-frame {
  box-shadow: inset 0 0 0 2px #f5d76e, 0 0 0 1px rgba(245, 215, 110, 0.35);
}
.galaxy-filters-head .galaxy-btn {
  font-size: 0.65rem !important;
  padding: 2px 6px !important;
}
@media (max-width: 720px) {
  .galaxy-main-row { flex-direction: column; }
  .galaxy-filters {
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
    max-height: 34vh;
    height: auto;
    border-left: none;
    border-top: 1px solid rgba(90, 110, 130, 0.45);
  }
  .galaxy-header .galaxy-hint { display: none; }
  .galaxy-selection {
    max-width: calc(100% - 24px);
    font-size: 0.68rem;
  }
}

.galaxy-canvas { cursor: grab; }
.galaxy-canvas:active, .galaxy-canvas.grabbing { cursor: grabbing; }


/* ===== Login space stage v0.1 ===== */
#login-overlay {
  position: absolute;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #05070b;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
#login-overlay.hidden { display: none !important; }
.login-space-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;
}
.login-stage {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: min(400px, 92vw);
  animation: loginStageIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes loginStageIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
.login-brand {
  text-align: center;
  width: 100%;
}
.login-brand h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 6vw, 2.75rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-bright);
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55);
}
.login-brand .login-subtitle {
  margin: 8px 0 0;
  font-size: 0.85rem;
  color: rgba(184, 192, 200, 0.78);
  letter-spacing: 0.04em;
}
.login-version {
  display: inline-block;
  margin-top: 10px;
  padding: 2px 8px;
  border: 1px solid var(--border-bright);
  background: rgba(10, 12, 15, 0.55);
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
}
#login-overlay .login-card {
  width: 100%;
  padding: 18px 20px 16px;
  border: 1px solid var(--border-bright);
  background: rgba(18, 22, 28, 0.88);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
}
#login-overlay .login-card h1 { display: none; }
.login-changelog-link {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 6px 0 0;
  border: none;
  border-top: 1px solid var(--border);
  background: transparent;
  color: var(--text-dim);
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}
.login-changelog-link:hover { color: var(--accent); }
.profile-session-actions {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.profile-logout-btn {
  width: 100%;
  background: transparent;
  border-color: var(--negative);
  color: #d08080;
}
.profile-logout-btn:hover {
  background: var(--negative-dim);
}
.changelog-card {
  width: min(520px, 94vw);
  max-height: min(70vh, 640px);
}
.changelog-body {
  overflow: auto;
  max-height: min(58vh, 520px);
}
.changelog-content {
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--text);
}
.changelog-content h2 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-bright);
}
.changelog-content h3 {
  margin: 14px 0 6px;
  font-family: var(--font-display);
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}
.changelog-content ul {
  margin: 0 0 8px;
  padding-left: 1.15em;
}
.changelog-content li { margin: 3px 0; }
.changelog-content p { margin: 0 0 8px; color: var(--text-dim); }
#game-version-badge {
  position: absolute;
  right: 10px;
  bottom: 8px;
  z-index: 5;
  pointer-events: none;
  font-family: var(--font-display);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  color: rgba(110, 119, 128, 0.75);
}


/* ===== Locale / settings ===== */
.login-lang {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 12px;
}
.login-lang-label {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.locale-select {
  min-width: 140px;
  max-width: 100%;
  padding: 6px 8px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 0.85rem;
}
.locale-select:focus {
  border-color: var(--accent);
  outline: none;
}
.settings-lang-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 8px;
  font-size: 0.9rem;
  color: var(--text);
}
.settings-card {
  width: min(420px, 94vw);
}

/* --- Tutorial (outside-galaxy training grounds) --- */
.tutorial-overlay {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
  display: flex;
  justify-content: center;
  pointer-events: none;
  padding: 0 16px 20px;
}
.tutorial-overlay.hidden { display: none; }
.tutorial-card {
  pointer-events: auto;
  width: min(440px, 94vw);
  padding: 16px 18px 14px;
  background: linear-gradient(160deg, rgba(14, 22, 28, 0.94), rgba(8, 12, 16, 0.96));
  border: 1px solid rgba(120, 160, 140, 0.35);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  color: var(--text);
  font-family: var(--font-ui);
}
.tutorial-progress {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 6px;
}
.tutorial-title {
  margin: 0 0 8px;
  font-size: 1.15rem;
  font-weight: 650;
  color: #d7efe4;
}
.tutorial-body {
  margin: 0 0 8px;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--text);
}
.tutorial-hint {
  margin: 0 0 12px;
  font-size: 0.82rem;
  color: var(--accent);
  min-height: 1.2em;
}
.tutorial-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.tutorial-btn {
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  padding: 7px 14px;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  cursor: pointer;
}
.tutorial-btn:hover { border-color: var(--accent); color: var(--accent); }
.tutorial-btn-primary {
  background: rgba(70, 140, 110, 0.35);
  border-color: rgba(120, 180, 150, 0.55);
}
.tutorial-btn-ghost { opacity: 0.85; }
.tutorial-offer {
  position: fixed;
  top: 72px;
  right: 18px;
  z-index: 75;
  max-width: min(320px, 92vw);
}
.tutorial-offer.hidden { display: none; }
.tutorial-offer-card {
  padding: 14px 16px;
  background: linear-gradient(160deg, rgba(14, 22, 28, 0.94), rgba(8, 12, 16, 0.96));
  border: 1px solid rgba(120, 160, 140, 0.35);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
  color: var(--text);
  font-family: var(--font-ui);
}
.tutorial-offer-card strong {
  display: block;
  margin-bottom: 6px;
  color: #d7efe4;
}
.tutorial-offer-card p {
  margin: 0 0 12px;
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--text-dim);
}
body.tutorial-active #travel-to-galaxy-btn {
  opacity: 0.35;
  pointer-events: none;
}
body.tutorial-active #travel-enter-btn {
  opacity: 0.35;
  pointer-events: none;
}


/* CE galaxy fullscreen overrides */
#galaxy-panel.galaxy-panel-window {
  position: absolute;
  inset: 0;
  z-index: 980;
  width: 100%;
  height: 100%;
}
#galaxy-panel .galaxy-card {
  position: absolute !important;
  inset: 0 !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  max-height: none !important;
  background: #05070a !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
#galaxy-panel .galaxy-header {
  cursor: default !important;
  background: linear-gradient(180deg, rgba(12, 18, 26, 0.96), rgba(8, 12, 18, 0.82)) !important;
  border-bottom: 1px solid rgba(90, 110, 130, 0.45) !important;
  padding: 8px 14px !important;
}
#galaxy-panel .galaxy-body {
  padding: 0 !important;
  overflow: hidden !important;
  background: #05070a !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
}
#galaxy-panel .galaxy-canvas {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  border: none !important;
}