/* SimPort interface: dark chrome, teal accents, Bruck typography.
   Presentation only; control order, labels and gameplay behavior stay intact. */
:root {
  --ui-bg: #1e2422;
  --ui-bg2: #252b29;
  --ui-bg3: #1a1f1d;
  --ui-border: #3a4540;
  --ui-border-light: #4a5550;
  --ui-text: #c0c8c0;
  --ui-text-bright: #e0e8e0;
  --ui-text-dim: #728472;
  --ui-accent: #4a9b8e;
  --ui-accent2: #357a70;
  --ui-green: #5aab6e;
  --ui-red: #c05a4a;
  --ui-yellow: #c0a04a;
  --btn-face: #2a3230;
  --btn-hi: #3a4540;
  --btn-sh: #151a18;
  --font: 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  --font-display: Optima, 'Avenir Next', 'Segoe UI', sans-serif;
  --zone-residential: #3a2820;
  --zone-industrial: #3a3520;
  --zone-community: #2a2a3a;
}
body { font-size: 12px; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font-family: var(--font); }
button { transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease; }
button:focus-visible, [tabindex]:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--ui-accent); outline-offset: 2px;
}
button:disabled { opacity: .45; cursor: default; }
#menubar { height: 46px; border-bottom: 1px solid var(--ui-border); gap: 4px; padding: 0 8px; }
.menu-group { align-items: center; gap: 2px; min-width: 0; }
.menu-btn { border: 1px solid transparent; background: transparent; border-radius: 6px 6px 2px 2px; padding: 7px 10px; font-size: 12px; letter-spacing: .02em; white-space: nowrap; }
.menu-btn:hover { background: var(--btn-hi); border-color: var(--ui-border-light); }
.menu-btn:active { border-color: var(--ui-accent); background: #2a4a40; }
.menu-btn.toggle-btn { font-size: 10px; letter-spacing: .06em; }
.menu-btn.toggle-btn.active { background: #2a4a40; border-color: #4a8a7a; color: #b0d8cc; }
#identity-display { padding: 0 10px; font-size: 11px; }
#date-display { font-family: var(--font); font-size: 15px; letter-spacing: .06em; padding: 0 12px; white-space: nowrap; font-variant-numeric: tabular-nums; box-sizing: border-box; min-width: 108px; text-align: center; }
#app-version { color: var(--ui-text-dim); font-size: 9px; letter-spacing: 0; }
#menubar-rotate { flex-shrink: 0; }
.view-btn, .menubar-rot-btn, .speed-btn { border: 1px solid var(--ui-border-light); border-radius: 4px; background: var(--btn-face); color: var(--ui-text-bright); }
#toolbar { border-right: 1px solid var(--ui-border); padding: 6px; gap: 4px; }
.cat-btn { background: transparent; border: 1px solid transparent; border-bottom-color: var(--ui-border-light); border-radius: 10px 10px 3px 3px; gap: 5px; }
.cat-btn:hover { color: var(--ui-text-bright); background: #2a3a35; border-color: #4a5a50; }
.cat-label, .tool-label { font-family: var(--font); font-size: 10px; font-weight: 600; letter-spacing: .04em; line-height: 1.35; color: var(--ui-text); }
.cat-count-badge { background: #2a3a35; color: #8ab8b0; border: 1px solid #3a5a4a; border-radius: 4px; font-size: 9px; font-family: var(--font); }
.cat-row.open > .cat-btn, .sidebar-action-btn.active { background: #2a4a40; border: 1px solid #4a7a6a; box-shadow: inset 3px 0 #4a9b8e; }
.cat-row.open > .cat-btn .cat-label, .sidebar-action-btn.active .cat-label { color: #b0d8cc; }
.cat-row.open > .cat-btn::after { border-left-color: #4a9b8e; }
.cat-panel, .dropdown-menu, .floating-window, .sim-modal, #report-modal-box, #ng-panel {
  border: 1px solid #3a4a44; border-radius: 10px 10px 4px 4px;
  background: var(--ui-bg2); box-shadow: 0 8px 24px #0a0e0c40; color: var(--ui-text);
}
.cat-panel-title, .floating-window-title, #report-modal-header, #ng-header {
  background: #2a3230; color: var(--ui-text-bright); border-bottom: 1px solid #3a4a44;
  font-family: var(--font-display); font-size: 14px; font-weight: 600; letter-spacing: .04em;
}
.cat-panel-title { padding: 10px 12px; }
.cat-panel-items .tool-btn, .tool-btn { border: 1px solid #3a4a44; border-radius: 6px; background: #2a3230; color: var(--ui-text); }
.tool-btn:hover, .cat-panel-items .tool-btn:hover { background: #3a4540; color: var(--ui-text-bright); }
.tool-btn.active, .cat-panel-items .tool-btn.active { background: #2a4a40; border-color: #4a9b8e; color: #b0d8cc; }
.cat-panel-items .tool-btn:hover .tool-label, .cat-panel-items .tool-btn.active .tool-label { color: #b0d8cc; }
.tool-btn.tool-unaffordable { border-color: #6a4a2a; background: #302a22; }
.tool-btn.tool-unaffordable:hover { background: #3a3228; }
.dropdown-menu { padding: 5px; min-width: 200px; }
.menu-item { padding: 8px 12px; font-size: 12px; border-radius: 3px; }
.menu-item:hover { background: #2a4a40; color: #e0e8e0; }
.menu-item.menu-item-active { color: #4a9b8e; }
#info-panel { border-left: 1px solid var(--ui-border); padding: 12px 10px; }
.info-label, #info-panel h3 { font-family: var(--font-display); font-size: 10px; letter-spacing: .09em; font-weight: 600; }
.info-value { font-size: 14px; line-height: 1.4; font-weight: 600; font-variant-numeric: tabular-nums; }
.info-value-hero { font-family: var(--font); font-size: 23px; font-weight: 500; font-variant-numeric: tabular-nums; }
.info-section { padding: 6px 0; gap: 4px; }
.group-label-positive { color: #5aab6e; }
.group-label-negative { color: #c07050; }
.group-label-sub { opacity: 1; font-size: 9px; }
.power-bar-wrap, .zone-bar-wrap, .zone-bar-centered-wrap { border-radius: 3px; height: 5px; border: none; background: #1a2420; }
.zone-bar-demand-res { background: #5b8974; }
.zone-bar-demand-ops { background: #b48851; }
.zone-bar-demand-com { background: #8d80a4; }
.zone-bar-demand-rsr { background: #4e9194; }
#statusbar { background: #1a1f1d; border-top: 1px solid #3a4540; font: 11px var(--font); color: #8a9888; }
#speed-controls { border: 1px solid #3a4540; border-radius: 6px; padding: 3px; background: #252b29; gap: 3px; }
.speed-btn.active { background: #2c6668; color: #e0f0e8; }
#paused-indicator { background: #252b29; color: #4a9b8e; border-color: #3a4540; font-family: var(--font-display); letter-spacing: .09em; }
#minimap-container {
  bottom: 12px; right: 12px; padding: 5px; overflow: hidden;
  background: var(--ui-bg2); border: 1px solid #3a4a44; border-radius: 10px 10px 4px 4px;
  box-shadow: 0 8px 24px #0a0e0c40;
}
#minimap { border-radius: 6px 6px 2px 2px; box-shadow: inset 0 0 0 1px #3a4540; cursor: pointer; }
.floating-window-body { font-size: 12px; line-height: 1.5; }
.floating-window-close, #report-modal-close { color: #8ab8b0; background: transparent; border: 1px solid transparent; border-radius: 4px; }
.floating-window-close:hover { background: #4a2a20; color: #e08060; }
.sim-modal { padding: 20px; }
.sim-modal-title { font-family: var(--font-display); font-size: 19px; }
.sim-modal-buttons button { border-radius: 5px; padding: 7px 16px; }
.sim-modal-buttons button.primary { color: #e0f0e8; background: #286b70; }
.sim-modal-buttons button:hover { background: #3a4540; color: #e0e8e0; }
.sim-modal-buttons button.primary:hover { background: #235a60; color: #e0f0e8; }
.sim-modal-input, #report-form input, #report-form textarea, #report-form select { background: #1a2420; color: #c0c8c0; border: 1px solid #3a4a44; border-radius: 4px; }
#cute-tooltip { background: #252b29; color: #c0c8c0; border: 1px solid #3a4a44; box-shadow: 0 5px 16px #0a0e0c40; font-family: var(--font); }
#advisor-bubble { background: #252b29; border: 1px solid #3a4a44; box-shadow: 0 6px 20px #0a0e0c40; border-radius: 12px 12px 5px 5px; }
#advisor-tail { border-top-color: #252b29; }
#advisor-text { color: #c0c8c0; font-size: 12px; line-height: 1.55; }
#advisor-name, #advisor-role, #advisor-dismiss-btn, #advisor-dismiss-btn:hover { color: #8ab8a8; }
#advisor-bubble button { color: #8ab8a8; }
.comms-tabs, .spo-tabs { background: #1e2422; border-color: #3a4540; }
.comms-tab, .spo-tab { color: #728472; font-family: var(--font); }
.comms-tab:hover, .spo-tab:hover { color: #c0c8c0; background: #2a3a35; }
.comms-tab.comms-tab-active, .spo-tab-active { color: #4a9b8e; border-color: #4a8a7a; background: #2a3a35; }
.comms-entry-text, .comms-tip-text, .comms-advisor-name, .comms-entry-name, .comms-section-title { color: #c0c8c0; }
.comms-entry-date, .comms-advisor-role, .comms-no-alerts { color: #728472; }
.comms-tip-tag { background: #2a3a35; color: #8ab8b0; }
.comms-entry, .comms-tip-item, .comms-advisor-row { border-bottom-color: #3a4540; }
.comms-entry:hover, .comms-advisor-row:hover { background: #2a3230; }
.comms-advisor-mute-btn { background: #2a3230; color: #8ab8a8; border-color: #3a4a44; }
.spo-ship-card, .spo-event-card, .spo-broadcast { background: #2a3230; border-color: #3a4a44; border-radius: 5px; }
.spo-ship-name, .spo-ship-reason, .spo-rep-level, .spo-broadcast-label { color: #c0c8c0; }
.spo-ship-meta, .spo-ship-type, .spo-empty, .spo-footer, .spo-rep-label, .spo-rep-value, .spo-broadcast-hint, .spo-event-ship, .spo-event-meta, .spo-log-list li, .spo-log-list li:first-child { color: #728472; }
.spo-event-type, .spo-event-effect, .spo-broadcast-active { color: #5aab6e; }
.spo-btn { background: #2a3230; color: #8ab8b0; border-color: #3a5a4a; border-radius: 4px; }
.spo-btn:hover:not(:disabled) { background: #2a4a40; color: #c0d8cc; }
.spo-btn-distress, .spo-distress, .spo-urgent { color: #e08060; }
.spo-btn-compute { color: #5aa0b8; }
.spo-btn-social { color: #a090b0; }
.spo-btn:disabled, .spo-btn-disabled { background: #252b29; color: #5a6a5a; border-color: #3a4540; }
.spo-broadcast-form input { background: #1a2420; color: #c0c8c0; border-color: #3a4a44; }
.spo-rep-track, .spo-event-progress { background: #1a2420; }
#tuning-dashboard { font-family: var(--font); --ink:#c0c8c0; --muted:#728472; --accent:#c07050; --accent-2:#4a9b8e; }
#tuning-dashboard .td-panel { background: #252b29; border: 1px solid #3a4a44; border-radius: 12px 12px 4px 4px; }
@keyframes instrument-reveal { from { opacity: .5; } to { opacity: 1; } }
.dropdown-menu:not([hidden]), .cat-row.open .cat-panel, .floating-window:not([hidden]) { animation: instrument-reveal 100ms ease-out; }
@media (prefers-reduced-motion: reduce) { button { transition: none; } .dropdown-menu, .cat-panel, .floating-window { animation: none !important; } }
@media (max-width: 1200px) { .menu-btn { padding-inline: 6px; } #date-display { padding-inline: 8px; } #identity-display { max-width: 100px; padding-inline: 6px; } }
/* Compact secondary controls use the same materials as the main toolbar. */
.sidebar-action-btn .tool-label { font-size: 8px; letter-spacing: 0; word-break: normal; }
.diag-item { background: #2a3230; border-top-color: #3a4540; border-right-color: #3a4540; border-bottom-color: #3a4540; border-radius: 3px; padding: 7px 5px; }
.diag-item:hover { background: #3a4540; }
.diag-text { font-size: 11px; }
.diag-hint { font-size: 10px; line-height: 1.4; }
#advisor-speaker { color: #8ab8a8; }
#advisor-role { color: #728472; font-size: 9px; }
@media (max-width: 1100px) {
  #menubar { overflow-x: auto; scrollbar-width: thin; }
  .menu-group { flex: 0 0 auto; }
  #date-display, #identity-display { flex-shrink: 0; }
}

/* Painted sidebar symbols use smooth sampling and their original fine contours. */
.cat-icon.bruck-icon { image-rendering: auto; filter: none; }

.cat-panel-items .tool-btn .tool-icon.bruck-icon, #splash-art { image-rendering: auto; filter: none; }

/* Smooth painted portraits, interior illustrations and animated inhabitants. */
#advisor-face, .comms-entry-portrait img, .cutaway-art-wrap img,
.cutaway-fallback img, .cutaway-occupant { image-rendering: auto; }