/* Factory Layout tab + Admin tab (main content). */
/* ── Factory Layout ──────────────────────────────────────────────────────────── */
.layout-page { padding: 4px 0 40px; }
.layout-controls {
  display: flex;
  gap: 16px;
  align-items: flex-end;
  flex-wrap: wrap;
  padding: 14px 16px;
}
.layout-field { display: flex; flex-direction: column; gap: 5px; }
.layout-field label { font-size: 11px; color: var(--clr-text-dim); text-transform: uppercase; letter-spacing: 0.04em; }
.layout-field select, .layout-field input {
  background: #141720;
  color: var(--clr-text);
  border: 1px solid var(--clr-border);
  border-radius: 5px;
  padding: 8px 10px;
  font-size: 13px;
  min-width: 150px;
}
.layout-field input[type=number] { min-width: 90px; }
.layout-check { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--clr-stat-label);
  text-transform: none; letter-spacing: 0; cursor: pointer; padding: 7px 0; }
.layout-check input { width: auto; min-width: 0; margin: 0; }
.layout-status { font-size: 12px; color: var(--clr-text-dim); }

.layout-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 3px;
  background: #1e3a5f;
  color: var(--clr-accent);
  vertical-align: middle;
}
.layout-tag.tier-2 { background: #1c3320; color: var(--clr-green); }
.layout-tag.tier-3 { background: #2a2a40; color: #a89aff; }
.layout-tag.tier-4 { background: #3a2418; color: #ffb066; }

.layout-planets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 820px) { .layout-planets { grid-template-columns: 1fr; }
}
/* Factory Layout cards now share the .pp-card frame (gradient + 9px + shadow); these
   rules only lay out the card's internals. */
.layout-card-name { font-size: 14px; color: var(--clr-text); margin-left: 6px; text-transform: none; }
.layout-card-x { margin-left: auto; }
.layout-card-body { display: flex; gap: 14px; align-items: center; padding: 14px 16px; }
.layout-card-info { font-size: 12px; color: #9aa3ba; line-height: 1.7; }
.layout-card-info b { color: var(--clr-accent); }
.layout-card-structs { color: var(--clr-text); margin-bottom: 4px; }
.layout-card-structs b { color: #fff; }
.layout-card-meta { color: var(--clr-text-dim); }
.layout-card-meta b { color: var(--clr-text); }

/* download/copy buttons — identical for both <a> and <button> */
.layout-btn {
  display: inline-block; box-sizing: border-box; background: #1e3a5f; color: var(--clr-accent);
  border: 1px solid #2d5a8a; border-radius: 5px; padding: 5px 12px; font-size: 11px;
  line-height: 1.5; font-family: inherit; text-decoration: none; cursor: pointer;
  transition: background 0.15s; vertical-align: middle;
}
.layout-btn:hover { background: #254a78; }
.layout-bundle-btn { background: #1c3a26; color: #7ee0a0; border-color: #2c6a44; align-self: flex-end; }
.layout-bundle-btn:hover { background: #245235; }
a.plan-action-btn { text-decoration: none; display: inline-block; }

.layout-card-x { background: none; border: none; color: var(--clr-text-dim); font-size: 14px; cursor: pointer; padding: 2px 6px; }
.layout-card-x:hover { color: #e07a7a; background: none; }
.layout-card-line { font-size: 12px; color: var(--clr-text); }
.layout-card-line b { color: var(--clr-accent); }
.layout-card-isk { font-size: 13px; color: #cfe0ff; margin-top: 4px; }
.layout-card-isk b { color: #ffe08a; font-size: 14px; }
.layout-card-isk.isk-neg b { color: #ff8a8a; }
.layout-card-isk .layout-sub { color: var(--clr-text-dim); font-size: 11px; margin-left: 4px; }
.layout-card-res { font-size: 11px; color: #7e9a7e; margin-top: 3px; }
.layout-card-res b { color: #9bd29b; }
.layout-card-res.res-warn { color: #d8b46a; }
.layout-card-res.res-warn b { color: #ffce6b; }
.layout-card-res.res-over { color: #e07a7a; font-weight: 600; }
.layout-card-res.res-over b { color: #ff8a8a; }
/* "needs only CCn" — the layout fits a lower command centre than the one selected. Muted CPU
   readout on extractor cards (power grid is the real constraint there). */
.layout-card-res .layout-sub { color: var(--clr-text-dim); opacity: .75; }
.layout-mincc { color: #5ab4e6; text-decoration: none; border-bottom: 1px dotted #5ab4e6; }
.layout-mincc:hover { color: #8fd0f5; }
.layout-warn { color: #d8b46a; }
/* Command-centre ladder on extractor cards: what each CCU level fits on this planet. */
.layout-cc-ladder { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 5px; }
.layout-cc-lad-lbl { font-size: 11px; color: var(--clr-text-dim); margin-right: 4px; }
.layout-cc-step { font-size: 11px; line-height: 1.2; padding: 2px 6px; cursor: pointer;
  border: 1px solid var(--clr-border); border-radius: 4px; background: transparent;
  color: var(--clr-text-dim); }
.layout-cc-step span { font-weight: 700; color: #9bd29b; margin-left: 3px; }
.layout-cc-step:hover { border-color: #5ab4e6; color: #cfe6f5; }
.layout-cc-step.is-cur { border-color: #5ab4e6; color: #cfe6f5; background: rgba(90,180,230,.12); }
.layout-cc-step.is-flat span { color: var(--clr-text-dim); }
.layout-cc-step.is-over { opacity: .5; }
.layout-cc-step.is-over span { color: #e07a7a; }
.layout-max { color: var(--clr-label); font-size: 10px; }
/* controls bar pinned to the bottom of every card → aligns across the row */
.layout-card-controls {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 12px 16px; border-top: 1px solid #1f2533;
}
.layout-card-controls label { font-size: 11px; color: var(--clr-text-dim); display: flex; align-items: center; gap: 6px; }
.layout-card-controls input, .layout-card-controls select {
  background: #0f1219; color: var(--clr-text); border: 1px solid #2a3142; border-radius: 4px;
  padding: 4px 6px; font-size: 12px;
}
.layout-card-controls input { width: 52px; }
.layout-card-controls select { width: 56px; }
/* The two action buttons share a full row below the compact controls. */
.layout-card-controls .layout-btn { flex: 1 1 calc(50% - 4px); text-align: center; }

/* searchable add box with persistent results */
.layout-search-field { position: relative; }
.layout-search-field input { min-width: 260px; }
.layout-results {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 30; margin-top: 4px;
  background: #141720; border: 1px solid #2d3550; border-radius: 6px;
  max-height: 320px; overflow-y: auto; box-shadow: 0 10px 28px rgba(0,0,0,0.55);
}
.layout-result { padding: 7px 10px; font-size: 13px; color: var(--clr-text); cursor: pointer; display: flex; align-items: center; gap: 8px; }
.layout-result:hover { background: #1e2435; }
.layout-result.is-added { opacity: 0.5; }
.layout-result-added { color: var(--clr-green); font-size: 11px; margin-left: auto; }
.layout-result-empty { padding: 7px 10px; color: var(--clr-text-dim); font-size: 12px; }

/* preview map */
.layout-svg { width: 300px; max-width: 46%; height: auto; border: 1px solid var(--clr-border); border-radius: 8px; flex-shrink: 0; }
.layout-svg .lp-links line { stroke: #46597a; stroke-width: 1.5; stroke-linecap: round; opacity: 0.65; }
.layout-svg circle { stroke-width: 1.4; }
.layout-svg .lp-hub  { fill: #cfe0ff; stroke: #5b7fb0; }       /* launchpad / storage */
.layout-svg .lp-ecu  { fill: #ff9d5c; stroke: #7a4422; }       /* extractor control unit */
.layout-svg .lp-t1   { fill: #8fd0a0; stroke: #2c4a36; }       /* P1 basic factory */
.layout-svg .lp-t2   { fill: var(--clr-green); stroke: #1c3320; }
.layout-svg .lp-t3   { fill: #a89aff; stroke: #2a2a40; }
.layout-svg .lp-t4   { fill: #ffce6b; stroke: #5a4416; }

/* site footer (donation) */
/* Nav visibility — all conditional tabs hidden by default.
   A <head> script reads localStorage and sets classes on <html> before first paint
   so the correct state applies without any visible jump. */
#dashboardNavTab,
#adminNavGroup,
#adminMobileTab,
#industryNavGroup,
.tab[data-tab="analyze"],
.tab[data-tab="planetary"],
.tab[data-tab="characters"],
.tab[data-tab="planetdb"],
.tab[data-tab="layout"],
.tab[data-tab="reactions"],
.tab[data-tab="industry"],
.tab[data-tab="contribute"],
.tab[data-pimode="refill"],
.tab[data-pimode="build"] { display: none; }

html.nav-li #dashboardNavTab,
html.nav-li .tab[data-tab="analyze"],
html.nav-li .tab[data-tab="planetary"],
html.nav-li .tab[data-tab="characters"],
html.nav-li .tab[data-tab="contribute"],
html.nav-li .tab[data-pimode="refill"],
html.nav-li .tab[data-pimode="build"] { display: flex; }

/* The Industry group header is only worth drawing when something sits under it. Both of its
   items are feature-gated AND login-gated, so a logged-out visitor used to get a bare "Industry"
   heading with nothing beneath it. Tie the group's own visibility to the same conditions as its
   contents. (_hideEmptyNavGroups() in planetary.js covers the cases CSS can't see — a feature
   switched off at runtime, or a group page-restriction hiding the last item.) */
html.nav-li.nav-feat-reactions #industryNavGroup,
html.nav-li.nav-feat-industry #industryNavGroup { display: flex; }
.nav-group-empty { display: none; }

html.nav-adm #adminNavGroup,
html.nav-grpmgr #adminNavGroup { display: flex; }
/* A pure group manager (not a site admin) only sees their own group's sub-nav items — the
   site-admin-only ones (stats/features/users/submissions/bugs/baskets/wallet/cleanup/groups
   CRUD) are hidden per-button by _applyAdminNavVisibility() in planetary.js, not by CSS, since
   which buttons qualify is a JS-side list, not a fixed selector. */
html.nav-feat-layout .tab[data-tab="layout"] { display: flex; }
html.nav-li.nav-feat-pdb .tab[data-tab="planetdb"] { display: flex; }
html.nav-li.nav-feat-reactions .tab[data-tab="reactions"] { display: flex; }
html.nav-li.nav-feat-industry .tab[data-tab="industry"] { display: flex; }

/* Donation note pinned to the bottom of the sticky sidebar — always on screen,
   no scrolling to the page foot to find it. */
.sidebar-discord {
  display: block; margin-top: auto; padding: 12px 13px 8px; border-top: 1px solid var(--clr-border);
  font-size: 12px; color: var(--clr-text-soft); line-height: 1.5;
  text-decoration: none;
}
.sidebar-discord:hover { background: #131825; }
.sidebar-discord-hd {
  font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: var(--clr-text-dim); margin-bottom: 6px;
}
.sidebar-discord-txt strong { color: #7289da; font-weight: 700; }
.sidebar-discord-ico { display: none; text-align: center; font-size: 16px; color: #7289da; padding: 4px 0; }
body.nav-collapsed .sidebar-discord { padding: 12px 0 8px; }
body.nav-collapsed .sidebar-discord-full { display: none; }
body.nav-collapsed .sidebar-discord-ico { display: block; }

.sidebar-donate {
  padding: 12px 13px 4px; border-top: 1px solid var(--clr-border);
  font-size: 12px; color: var(--clr-text-soft); line-height: 1.5;
}
.sidebar-donate-hd {
  font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: var(--clr-text-dim); margin-bottom: 6px;
}
.sidebar-donate-txt strong { color: #ffce6b; font-weight: 700; }
/* Compact heart shown only in the collapsed icon rail (hidden when expanded). */
.sidebar-donate-ico { display: none; text-align: center; font-size: 16px; color: #ffce6b; padding: 4px 0; }
body.nav-collapsed .sidebar-donate { padding: 12px 0 4px; }
body.nav-collapsed .sidebar-donate-full { display: none; }
body.nav-collapsed .sidebar-donate-ico { display: block; }
.mobile-donate { display: none; }
.mobile-discord { display: none; }

/* ── Admin tab ──────────────────────────────────────────────────────────────── */
.admin-page { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.admin-section { padding: 16px 18px; }
.admin-hint { font-size: 12px; color: var(--clr-text-soft); margin: 4px 0 12px; line-height: 1.5; }
.admin-stats-group { margin-bottom: 18px; }
.admin-stats-heading { font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--clr-text-dim); margin-bottom: 8px; }
.admin-prom-status { font-size: 12px; font-weight: 600; }
.admin-prom-off   { color: var(--clr-text-dim); }
.admin-prom-on    { color: #4caf82; }
.admin-prom-warn  { color: #ffce6b; }

/* DB Cleanup table */
.cleanup-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 16px; }
.cleanup-table th { text-align: left; font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--clr-text-dim); padding: 0 10px 8px; }
.cleanup-table th:first-child { padding-left: 0; }
.cleanup-row td { padding: 9px 10px; border-top: 1px solid var(--clr-border); vertical-align: top; }
.cleanup-row td:first-child { padding-left: 0; }
.cleanup-row-empty td { opacity: 0.45; }
.cleanup-check { width: 28px; }
.cleanup-cat { font-weight: 600; color: var(--clr-text-bright); white-space: nowrap; }
.cleanup-count { white-space: nowrap; color: #dbe1ee; }
.cleanup-count strong { color: #e07b5a; }
.cleanup-detail { color: var(--clr-text-soft); font-size: 12px; }
.cleanup-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.cleanup-run-btn { background: #5c2020; border: 1px solid #8a3030; color: #f0a0a0;
  border-radius: 6px; padding: 7px 18px; font-size: 13px; cursor: pointer; }
.cleanup-run-btn:hover:not(:disabled) { background: #7a2828; }
.cleanup-run-btn:disabled { opacity: 0.4; cursor: default; }
.cleanup-refresh-btn { background: none; border: 1px solid #2a3050; color: #7c879c;
  border-radius: 6px; padding: 7px 14px; font-size: 13px; cursor: pointer; }
.cleanup-refresh-btn:hover { color: var(--clr-text-bright); }
.cleanup-status { font-size: 12px; color: var(--clr-text-soft); }

/* Settings modal */
.settings-modal-box {
  background: #141720;
  border: 1px solid var(--clr-border);
  border-radius: 10px;
  width: min(860px, 94vw);
  height: min(680px, 86vh);  /* fixed height so sections don't resize the modal */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.settings-modal-hdr {
  display: flex;
  align-items: center;
  padding: 16px 20px 14px;
  border-bottom: 1px solid var(--clr-border);
  flex-shrink: 0;
}
.settings-modal-title { font-size: 15px; font-weight: 700; color: #c0ccdf; letter-spacing: 0.4px; }
.settings-modal-layout {
  display: flex;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}
.settings-modal-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 10px;
  width: 150px;
  flex-shrink: 0;
  border-right: 1px solid var(--clr-border);
  overflow-y: auto;
}
.settings-nav-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  border-radius: 7px;
  border: none;
  background: none;
  color: #7a8aaa;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s, color 0.12s;
  width: 100%;
}
.settings-nav-item:hover { background: #1a2035; color: #a8b8cc; }
.settings-nav-item.active { background: #1e2a3e; color: #7abfe8; }
.settings-nav-ico {
  font-size: 11px;
  font-weight: 700;
  min-width: 22px;
  height: 22px;
  background: #1b2535;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #5a8ab8;
  flex-shrink: 0;
}
.settings-nav-item.active .settings-nav-ico { background: #1e3450; color: #7abfe8; }
.settings-modal-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
  min-width: 0;
}
.settings-section { display: flex; flex-direction: column; gap: 16px; }
.settings-sec-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--clr-border);
}
.settings-sec-title { font-size: 14px; font-weight: 700; color: #a8b8cc; margin: 0; }
.settings-char-btns { display: flex; gap: 8px; }
.settings-subsec {
  padding-top: 14px;
  border-top: 1px solid #161b28;
}
.settings-subsec-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: #5e7aaa;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.settings-subsec-hint { font-size: 12px; color: #5a6a88; line-height: 1.6; margin-bottom: 10px; }
.settings-account-body { display: flex; flex-direction: column; gap: 14px; }
.settings-account-hint { font-size: 13px; color: #6a7a9a; line-height: 1.6; margin: 0; }

/* Mobile admin sub-page navigation (hidden on desktop, shown on mobile) */
.admin-mobile-page-nav {
  display: none;  /* shown via mobile media query */
}

/* Settings button in header — same border/background as Rescan */
.header-settings-btn {
  background: #1a2838;
  border: 1px solid #2a3a4a;
  border-radius: 4px;
  color: #8aa0c0;
  font-size: 18px;
  font-family: inherit;
  cursor: pointer;
  padding: 4px 10px 5px;
  margin-right: 6px;
  line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.header-settings-btn:hover { background: #1e3348; color: var(--clr-accent); }

/* Notifications */
.notif-section { margin-bottom: 20px; }
.notif-section-hint { font-size: 12px; color: #5a6a88; line-height: 1.6; margin-bottom: 10px; }
.notif-pref-actions { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.notif-section-title { font-size: 12px; font-weight: 700; letter-spacing: 0.6px; color: #5e7aaa;
  text-transform: uppercase; margin-bottom: 8px; }
.notif-channel-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.notif-channel-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px;
  background: #161b28; border: 1px solid var(--clr-border); border-radius: 7px; flex-wrap: wrap; }
.notif-channel-type { font-weight: 600; color: #dbe1ee; min-width: 110px; }
.notif-channel-preview { font-size: 12px; color: #6a7a9a; flex: 1; }
.notif-channel-toggle { font-size: 12px; color: var(--clr-text-soft); display: flex; align-items: center; gap: 4px; }
.notif-channel-delete { background: #1e1525; border: 1px solid #3a2545; color: #a070c0;
  border-radius: 5px; padding: 4px 10px; font-size: 12px; cursor: pointer; }
.notif-channel-delete:hover { background: #2a1a35; }
.notif-add-details { margin-top: 6px; }
.notif-add-details summary { font-size: 13px; color: #7a9abf; cursor: pointer; padding: 4px 0; }
.notif-add-form { display: flex; flex-direction: column; gap: 8px; padding: 10px;
  background: #10131c; border: 1px solid var(--clr-border); border-radius: 7px; margin-top: 6px; }
.notif-add-form label { font-size: 13px; color: var(--clr-text-soft); display: flex; flex-direction: column; gap: 3px; }
.notif-config-input { background: #161b28; border: 1px solid #1f2840; border-radius: 5px;
  padding: 5px 9px; color: #dbe1ee; font-size: 13px; font-family: monospace; }
.notif-add-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.notif-status-msg { font-size: 12px; color: #7a9abf; margin-left: 4px; }
.notif-prefs-row { display: flex; flex-direction: column; gap: 8px; }
.notif-prefs-row label { font-size: 13px; color: var(--clr-text-soft); display: flex; align-items: center; gap: 8px; }
.notif-log { font-size: 12px; }
.notif-log-table { width: 100%; border-collapse: collapse; }
.notif-log-table th { text-align: left; color: #5e7aaa; padding: 4px 6px; border-bottom: 1px solid var(--clr-border); }
.notif-log-table td { padding: 4px 6px; border-bottom: 1px solid #10131c; color: var(--clr-text-soft); }
.notif-ok { color: #5aaa70; }
.notif-err { color: #d07070; }
.notif-empty { font-size: 12px; color: #4a5570; padding: 6px 0; }

/* Settings: aligned field rows — label left, control right, one per row with a hairline
   divider. Replaces an ad-hoc inline "label text + input + unit text" flow that misaligned
   badly once a subsection had several rows of differing label length (each row's input
   landed in a different horizontal spot — the "squished and asymmetric" look). */
.settings-field-list { display: flex; flex-direction: column; }
.settings-field-row {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 11px 2px; border-bottom: 1px solid #161b28;
}
.settings-field-row:last-child { border-bottom: none; }
/* Matches the app-wide `label { text-transform: uppercase }` convention (see Notifications'
   "WARN ME ... HOURS IN ADVANCE") — these are <span>s, not <label>s, so that global rule
   doesn't reach them; applied explicitly to stay visually consistent with the rest of the app
   rather than reading as a different, unrelated style bolted onto the same modal. */
.settings-field-label {
  font-size: 12px; color: #8a94b0; text-transform: uppercase; letter-spacing: 0.8px;
  line-height: 1.4;
}
.settings-field-control {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
  font-size: 12px; color: #8a94b0; text-transform: uppercase; letter-spacing: 0.8px; white-space: nowrap;
}
.settings-field-input {
  width: 60px; background: #161b28; border: 1px solid #1f2840; border-radius: 5px;
  padding: 5px 8px; color: #dbe1ee; text-align: center; font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.settings-field-input:focus { outline: none; border-color: #3a6a9a; }

/* 2-col grid for on/off toggle lists (e.g. muted alert kinds) — a single long column of
   checkboxes reads as a wall of text; pairing them side by side is calmer and more compact. */
.settings-toggle-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px 24px; }
.settings-toggle-row {
  display: flex; align-items: center; gap: 9px; padding: 8px 2px;
  font-size: 13px; color: var(--clr-text-soft); cursor: pointer;
}
.settings-toggle-row input[type="checkbox"] { accent-color: var(--clr-accent); width: 15px; height: 15px; flex-shrink: 0; }
@media (max-width: 560px) {
  .settings-toggle-grid { grid-template-columns: 1fr; }
}

/* Account self-deletion */
.account-delete-btn { background: #3a1515; border: 1px solid #6a2828; color: #e07070;
  border-radius: 6px; padding: 7px 16px; font-size: 13px; cursor: pointer; }
.account-delete-btn:hover:not(:disabled) { background: #5a2020; }
.account-delete-btn:disabled { opacity: 0.4; cursor: default; }
.delete-account-confirm-row { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; }
.delete-account-confirm-lbl { font-size: 12px; color: var(--clr-text-soft); }
.admin-add-row { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
/* Labeled moon-goo add row: a title above each field, button aligned to the inputs' baseline. */
.goo-add-row { align-items: flex-end; }
.goo-field { display: flex; flex-direction: column; gap: 3px; }
.goo-field-grow { flex: 1 1 240px; min-width: 200px; }
.goo-field-grow .bug-input { width: 100%; }
.goo-field-lbl { font-size: 11px; color: var(--clr-text-dim); }
.goo-add-btn { align-self: flex-end; }
/* Inline labels on each editable row so a saved material's ISK/unit + Quantity are titled too. */
.goo-inline { display: flex; flex-direction: column; gap: 2px; }
.goo-inline-lbl { font-size: 9.5px; color: var(--clr-text-dim); }
.admin-list { display: flex; flex-direction: column; gap: 6px; }
.admin-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; background: #161b28; border: 1px solid var(--clr-border); border-radius: 7px; }
.admin-name { font-weight: 600; color: #dbe1ee; }
.admin-meta { font-size: 11px; color: var(--clr-text-dim); margin-left: auto; }
.admin-tag { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: #ffce6b; border: 1px solid #5a4416; border-radius: 4px; padding: 1px 6px; margin-left: auto; }

.grp-mgr-chip {
  display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--clr-text-dim);
  background: #1c2030; border: 1px solid #2a3142; border-radius: 4px; padding: 2px 4px 2px 8px;
}
.grp-mgr-remove {
  background: none; border: none; color: #b0b0b0; cursor: pointer; font-size: 13px; line-height: 1;
  padding: 2px 4px; border-radius: 3px;
}
.grp-mgr-remove:hover { background: #3a2430; color: #ff8a8a; }

/* basket editor */
.basket-row { padding: 8px 10px; background: #161b28; border: 1px solid var(--clr-border); border-radius: 7px; margin-bottom: 6px; }
.basket-row-head { display: flex; align-items: center; gap: 10px; }
.basket-row-items { font-size: 11px; color: var(--clr-text-soft); margin-top: 4px; }
.basket-tag { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; border-radius: 4px; padding: 1px 6px; }
.basket-tag-mine { color: #7fd0a0; border: 1px solid #2c5a40; }
.basket-tag-global { color: #ffce6b; border: 1px solid #5a4416; }
.basket-global-row { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--clr-text-soft); margin-bottom: 10px; }
.basket-global-row input { margin: 0; }
.basket-editor { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--clr-border); }
.basket-editor-title { font-weight: 600; color: #dbe1ee; margin-bottom: 10px; }
.basket-fields { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.basket-fields label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--clr-text-soft); }
.basket-num { max-width: 120px; }
.basket-add-item { position: relative; max-width: 360px; margin-bottom: 10px; }
.basket-add-item input { width: 100%; }
.basket-items { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.basket-item-row { display: flex; align-items: center; gap: 10px; padding: 5px 8px; background: #161b28; border: 1px solid var(--clr-border); border-radius: 6px; }
.basket-item-name { flex: 1; color: var(--clr-text); font-size: 13px; }
.basket-editor-actions { display: flex; gap: 8px; align-items: center; }

/* ── Reactions: gamified per-character slot loadout ─────────────────────────── */
/* Suggest-products call to action — used to be a tiny .pp-add-btn crammed into the "Reactions"
   card's title bar alongside Clear all/Connect a character, easy to miss now that there are
   TWO ways to fill a slot (this algorithm-driven suggestion flow, or clicking an empty "+" slot
   directly for a manual pick). Its own row, plain <button> (the app's default prominent blue
   gradient, not the small muted pp-add-btn treatment), with a hint pointing at the alternative. */
.rx-suggest-cta {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 4px 2px 14px;
}
.rx-suggest-cta .pp-card-hint { flex: 1 1 260px; }

.rx-reconnect-note {
  margin-bottom: 10px; padding: 8px 10px; border-radius: 6px; font-size: 12px;
  color: #e6b455; background: rgba(230, 180, 85, 0.08); border: 1px solid rgba(230, 180, 85, 0.25);
}
.rx-reconnect-btn {
  background: none; border: none; padding: 0; font: inherit; color: #5ab4e6;
  text-decoration: underline; cursor: pointer;
}
.rx-reconnect-btn:hover { color: #7cc6f0; }
.rx-char-row {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 10px 0; border-bottom: 1px solid var(--clr-border);
}
.rx-char-row:last-child { border-bottom: none; }
.rx-char-label { width: 130px; flex: 0 0 130px; font-weight: 600; color: #dbe1ee; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Reaction completion bars — job-detail modal + metrics "total complete" + dashboard. */
.rx-prog-wrap { display: flex; flex-direction: column; gap: 8px; }
.rx-prog-row { display: flex; flex-direction: column; gap: 3px; }
.rx-prog-head { display: flex; justify-content: space-between; font-size: 11px; color: var(--clr-text-dim); }
.rx-prog-track { height: 8px; background: #12161f; border: 1px solid var(--clr-border); border-radius: 5px; overflow: hidden; }
.rx-prog-fill { height: 100%; background: linear-gradient(90deg, #3a7bd5, #5aa9e6); border-radius: 5px; transition: width 0.3s; }
.rx-prog-fill.rx-prog-done { background: linear-gradient(90deg, #2f9e6f, #46c88a); }

.rx-slot-row { display: flex; gap: 8px; flex-wrap: wrap; }
.rx-slot {
  width: 70px; height: 70px; flex: 0 0 auto; position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-radius: 8px; background: #161b28; border: 1px solid var(--clr-border);
}
.rx-slot-filled { border-color: #3a5a82; background: linear-gradient(160deg, #1b2a3d, #16202e); cursor: pointer; transition: border-color 0.15s; }
.rx-slot-filled:hover { border-color: #5aa9e6; }
/* Running slot now leads with the product NAME (below the icon, same spot a planned slot shows
   it) and demotes the countdown to a small top-right corner badge — a running slot used to show
   only the timer, never what it was making. */
.rx-slot-filled-label { font-size: 9px; color: #8fb8dd; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 62px; }
.rx-slot-timer-corner {
  position: absolute; top: -6px; right: -5px; font-size: 8.5px; line-height: 1;
  color: var(--clr-text-dim); background: #12161f; border: 1px solid var(--clr-border);
  border-radius: 4px; padding: 2px 4px; white-space: nowrap;
}
.rx-slot-empty { border-style: dashed; opacity: 0.45; cursor: pointer; transition: opacity 0.15s, border-color 0.15s; }
.rx-slot-empty:hover { opacity: 0.85; border-color: #5aa9e6; }
.rx-slot-pending {
  border-color: #7a2a2a; background: linear-gradient(160deg, #2a1a1a, #221515);
  cursor: pointer;
}
.rx-slot-pending:hover { border-color: #a83a3a; }
.rx-slot-icon { width: 36px; height: 36px; border-radius: 4px; }
/* An overlay badge (like the ⊘ cancel badge), NOT inline text — a long product name already
   fills the single-line, ellipsis-truncated name/timer text to its max-width, so appending the
   run count there just got truncated away along with the overflowing name. Bottom-right corner
   keeps it clear of the ⊘ badge (top-right, pending slots only) and always visible regardless
   of how the name/timer text itself wraps or clips. */
.rx-slot-runs {
  position: absolute; bottom: -5px; right: -5px; font-size: 9px; line-height: 1;
  color: #cfe0f0; background: #12161f; border: 1px solid var(--clr-border); border-radius: 4px;
  padding: 2px 4px; white-space: nowrap;
}
.rx-slot-empty-mark { font-size: 22px; color: var(--clr-text-dim); }
.rx-slot-pending-badge {
  position: absolute; top: -5px; right: -5px; font-size: 13px; line-height: 1;
  color: #ff8a8a; background: #1a1010; border: 1px solid #7a2a2a; border-radius: 50%;
  width: 16px; height: 16px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background 0.15s, border-color 0.15s;
  /* The ⊘ glyph's own ink sits below the vertical center of its em-box in most fonts (more
     whitespace above than below) — flexbox centering + padding-bottom alone still left it
     reading ~1px low. transform is a direct, predictable pixel nudge (unlike padding, which
     only indirectly shifts the flex-centered position by half its value) — stack it with the
     padding for the full correction. */
  padding-bottom: 2px;
  transform: translateY(-1px);
}
.rx-slot-pending-badge:hover { background: #3a1515; border-color: #a83a3a; }
.rx-slot-pending-label { font-size: 9px; color: #c87a7a; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 62px; }

/* An orphan running job (installed in-game, not in the plan): amber dashed edge to set it apart
   from a planned running slot, plus a small "⊕ plan" pill to adopt it into the recurring plan. */
.rx-slot-orphan { border-style: dashed; border-color: #b08a3a; }
.rx-slot-orphan-badge {
  position: absolute; top: -7px; left: -5px; font-size: 8px; line-height: 1; white-space: nowrap;
  color: #f0c860; background: #241d0e; border: 1px solid #7a5f2a; border-radius: 6px;
  padding: 2px 4px; cursor: pointer; transition: background 0.15s, border-color 0.15s;
}
.rx-slot-orphan-badge:hover { background: #3a2f14; border-color: #b08a3a; color: #ffe08a; }

/* A <details><summary class="pp-card-title"> used as a foldable card header: the plain
   .pp-card-title class alone renders fine as a <div>, but a <summary> defaults to
   display:list-item — without overriding that, the flex/full-width background from
   .pp-card-title never applies and the bar's background clips to the text's own width instead
   of spanning the card. rx-fold-summary fixes the display AND hides the native disclosure
   marker (Safari/older Chrome still draw one even under flex) in favor of the explicit
   rx-fold-caret, which is also just plain easier to spot as "this is clickable" than a bare
   cursor:pointer. */
.rx-fold-summary { cursor: pointer; display: flex !important; list-style: none; }
.rx-fold-summary::-webkit-details-marker { display: none; }
.rx-fold-caret { display: inline-block; transition: transform 0.15s; color: var(--clr-text-dim); margin-right: 6px; }
details[open] > .rx-fold-summary .rx-fold-caret { transform: rotate(90deg); }
.rx-fold-caret.rx-fold-caret-open { transform: rotate(90deg); }

/* Full opportunity list: click a row to fold out the secondary dimensions (steps, job cost,
   sell-order price, ISK/m³, market depth) as a wrapped block below it, instead of cramming them
   in as more table columns — the table only ever has the 6 core columns, so it never overflows
   regardless of how many rows are expanded. */
.rx-opp-row { cursor: pointer; }
.rx-opp-row:hover { background: rgba(90, 169, 230, 0.06); }
.rx-opp-detail-row td { padding: 0; border-top: none; }
.rx-opp-detail {
  display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 8px 14px 12px;
  background: #131722; border-top: 1px dashed var(--clr-border); font-size: 12px;
}
.rx-opp-detail-chip { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.rx-opp-detail-chip b { color: var(--clr-text-bright); }

/* Live cost/profit preview inside the manual "assign a product to this slot" modal — same
   bordered-callout treatment as .rx-advisor so it reads as "here's what this would cost you",
   not just more form chrome. */
.rx-manual-preview {
  margin-top: 12px; padding: 10px 12px; background: #16202e; border: 1px solid #2d5a8a;
  border-left: 3px solid #5aa9e6; border-radius: 6px; font-size: 12px;
}
.rx-manual-preview-row { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 3px; }
.rx-manual-preview-row:last-of-type { margin-bottom: 0; }
/* NOT .pp-card-hint here — that maps to --clr-hint (#3a4460), a near-black tone meant for the
   main card background (#151926ish); against this callout's lighter #16202e blue it read as
   barely legible. --clr-text-soft is the same muted-but-actually-readable tone .rx-advisor's
   own body text already uses successfully in this exact blue-callout shape. */
.rx-manual-preview-label { color: var(--clr-text-soft); }
.rx-manual-preview-units { color: var(--clr-text-soft); font-weight: 400; }
.rx-manual-preview-row b { color: var(--clr-text-bright); }
/* an-ok/an-warn are normally only ever used compounded onto another class elsewhere in this
   app (.an-stat.an-ok, .padfill-pct.an-ok, ...) — standalone, as the Profit row uses them, they
   carried no color at all. Give them one here so profit vs. loss is actually distinguishable. */
.rx-manual-preview-row .an-ok { color: var(--clr-green-alt); }
.rx-manual-preview-row .an-warn { color: var(--clr-amber); }
.rx-manual-preview-breakeven { margin-top: 6px; padding-top: 6px; border-top: 1px solid #2d5a8a; color: var(--clr-text-soft); }
.rx-manual-preview-chain { margin-top: 6px; padding-top: 6px; border-top: 1px solid #2d5a8a; color: var(--clr-amber); }
.rx-manual-preview-chain b { color: var(--clr-text-bright); }

/* Custom searchable product combobox in the manual-assign modal — click with an empty query to
   browse every reachable product, type to filter by substring anywhere in the name. */
.rx-man-product-wrap { position: relative; width: 100%; }
.rx-man-product-dropdown {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 30; margin-top: 3px;
  max-height: 220px; overflow-y: auto; background: #11141c; border: 1px solid var(--clr-border);
  border-radius: 6px; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.85);
}
.rx-man-product-row { display: flex; align-items: center; gap: 8px; padding: 6px 10px; cursor: pointer; font-size: 13px; color: var(--clr-text); }
.rx-man-product-row img { width: 20px; height: 20px; border-radius: 3px; flex: 0 0 auto; }
.rx-man-product-row:hover, .rx-man-product-row.rx-man-product-active { background: #1c2436; }
.rx-man-product-empty { padding: 10px; color: var(--clr-hint); font-size: 12px; text-align: center; }

/* Per-character suggestion cards on the results page */
.rx-sugg-card { margin-bottom: 12px; }
.rx-sugg-hdr { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.rx-sugg-hdr .rx-char-label { width: auto; flex: 0 0 auto; overflow: visible; }
.rx-sugg-row { display: flex; align-items: center; gap: 10px; padding: 7px 9px; background: #161b28; border: 1px solid var(--clr-border); border-radius: 7px; margin-bottom: 6px; }
.rx-sugg-icon { width: 28px; height: 28px; border-radius: 4px; flex: 0 0 auto; }
.rx-sugg-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rx-sugg-name { font-size: 13px; color: var(--clr-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rx-sugg-meta { font-size: 11px; color: var(--clr-text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rx-sugg-chain { font-size: 11px; color: #e0c07a; white-space: normal; margin-top: 2px; }
.rx-sugg-reward { font-size: 13px; font-weight: 600; color: #7fd0a0; flex: 0 0 auto; white-space: nowrap; }
.rx-sugg-assign-btn {
  background: #1e3a5f; color: var(--clr-accent); border: 1px solid #2d5a8a;
  border-radius: 5px; padding: 5px 12px; font-size: 11px; cursor: pointer; flex: 0 0 auto;
}
.rx-sugg-assign-btn:hover { background: #254a78; }
.rx-sugg-assign-btn:disabled { opacity: 0.5; cursor: default; background: #1a2838; color: #6a88aa; border-color: #2a3a4a; }

.rx-totals-summary {
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--clr-border);
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  font-size: 14px; color: var(--clr-text);
}
.rx-totals-profit { font-size: 16px; font-weight: 600; color: #7fd0a0; }

.rx-shop-sec-title { font-weight: 600; color: #dbe1ee; margin: 10px 0 6px; }
.rx-shop-sec-title:first-child { margin-top: 0; }

.rx-diff-covered { opacity: 0.55; }
.rx-diff-covered td:nth-child(4) { color: #7fd0a0; }

.rx-advisor {
  margin-top: 12px; padding: 10px 12px; background: #16202e; border: 1px solid #2d5a8a;
  border-left: 3px solid #5aa9e6; border-radius: 6px;
}
.rx-advisor-title { font-weight: 600; color: var(--clr-accent); margin-bottom: 6px; font-size: 12px; }
.rx-advisor ul { margin: 0; padding-left: 18px; font-size: 12px; color: var(--clr-text-soft); }
.rx-advisor li { margin-bottom: 3px; }
/* A hint with an "Apply" button — plain inline text + button used to let a long product name
   overflow the card and shove the button onto its own broken-looking line. Flex row instead:
   the text wraps normally within its own space, and the button either stays at the end of the
   last line or drops to a clean new row with real spacing, never mid-word. Top-aligned (not
   centered) so the button sits at a fixed, predictable spot next to the first line of text
   regardless of how many lines the text itself wraps to. */
.rx-hint-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.rx-hint-row .rx-sugg-assign-btn { margin-top: 1px; }
.rx-hint-text { flex: 1 1 240px; min-width: 0; }

/* Customer orders (fixed-unit jobs for another player) */
.rx-order-row {
  display: flex; align-items: center; gap: 12px; padding: 9px 10px; background: #161b28;
  border: 1px solid var(--clr-border); border-radius: 7px; margin-bottom: 6px; cursor: pointer;
}
.rx-order-row:hover { background: #1c2436; }
.rx-order-info { flex: 1; min-width: 0; }
.rx-order-name { font-size: 13px; color: var(--clr-text); }
.rx-order-bar {
  width: 90px; flex: 0 0 auto; height: 8px; background: #10141e; border: 1px solid var(--clr-border);
  border-radius: 4px; overflow: hidden;
}
.rx-order-bar-fill { height: 100%; background: #3a7ac0; border-radius: 3px 0 0 3px; }
.rx-order-slot-tag {
  font-size: 9px; color: #e0c07a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
}

/* Reactions local/alliance market setup card (local_market flag) */
.rx-mkt-list { margin: 4px 0 12px; }
.rx-mkt-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border: 1px solid #232a3a;
  border-radius: 6px; margin-bottom: 4px; background: #141a26; }
.rx-mkt-row.rx-mkt-jita { opacity: 0.65; border-style: dashed; }
.rx-mkt-pri { min-width: 20px; text-align: center; color: var(--clr-text-soft); font-size: 12px; }
.rx-mkt-kind { min-width: 66px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--clr-text-soft); }
.rx-mkt-name { flex: 1; color: var(--clr-text); font-size: 13px; }
.rx-mkt-ctrl { display: flex; gap: 3px; }
.rx-mkt-ctrl .pp-add-btn { padding: 2px 7px; }
.rx-mkt-search { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; }
.rx-mkt-search input { flex: 1 1 240px; padding: 6px 9px; background: #10151f; border: 1px solid #2a3242;
  border-radius: 6px; color: var(--clr-text); }
#rxMarketSearchResults { flex-basis: 100%; }
.rx-mkt-result { display: flex; align-items: center; gap: 10px; padding: 5px 8px; border-bottom: 1px solid #1e2532; }

/* Per-line price source badge (which market priced a shopping-list / opportunity row) */
.rx-price-source { font-size: 10px; text-transform: uppercase; letter-spacing: 0.03em; padding: 1px 6px;
  border-radius: 4px; background: #1b2740; color: #7fa8e0; margin-left: 6px; }
.rx-price-source.rx-src-jita { background: #232a3a; color: var(--clr-text-soft); }

.rx-onboard-connect { padding: 10px 20px; font-size: 14px; font-weight: 600;
  border: none; border-radius: 8px; cursor: pointer; background: #2f6fb0; color: #fff; }
.rx-onboard-connect:hover { background: #3a82cc; }
.rx-onboard-connect { width: 100%; }

/* Onboarding wizard steps (inside #rxOnboardModal) */
.rx-onboard-step { border: 1px solid #232a3a; border-radius: 8px; padding: 12px 14px; margin-bottom: 12px;
  background: #121824; }
.rx-onboard-step-h { display: flex; align-items: center; gap: 8px; font-weight: 600;
  color: var(--clr-text-bright); font-size: 14px; }
.rx-onboard-step-b { margin-top: 10px; }
.rx-onboard-num { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
  border-radius: 50%; background: #2f6fb0; color: #fff; font-size: 12px; flex: 0 0 auto; }

.rx-onboard-opt { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600;
  color: var(--clr-text-soft); background: #232a3a; padding: 1px 7px; border-radius: 10px; margin-left: 8px; }
.rx-onboard-foot { display: flex; justify-content: flex-end; margin-top: 4px; }
.rx-onboard-foot .rx-onboard-connect { width: auto; min-width: 160px; }
.rx-onboard-connect:disabled { background: #2a3242; color: var(--clr-text-soft); cursor: not-allowed; }
.rx-gate-card { max-width: 720px; margin: 0 auto; }

/* Character list + market-character picker (onboarding step 1). NOTE: scoped rx-gate-* names —
   the dashboard's own slot rows already use .rx-char-row/.rx-char-label, so reusing those here
   collided and shifted the slot layout. */
.rx-gate-charlist { margin-bottom: 8px; }
.rx-gate-charrow { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 10px; border: 1px solid #232a3a; border-radius: 6px; margin-bottom: 4px; background: #141a26; }
.rx-gate-charname { color: var(--clr-text); font-size: 13px; font-weight: 600; }
.rx-gate-reader { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #7fa8e0; cursor: pointer; }
.rx-gate-tag { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--clr-text-soft);
  background: #232a3a; padding: 1px 7px; border-radius: 10px; }

/* ── Industry / Manufacturing planner tab ─────────────────────────────────────────────────── */
.admin-preview-tag { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--clr-text-soft);
  background: #232a3a; padding: 1px 7px; border-radius: 10px; vertical-align: middle; }
.ind-slots { margin: 4px 0 14px; }
.ind-slot-tot { font-size: 13px; color: var(--clr-text-soft); margin-bottom: 6px; }
.ind-slot-tot b { color: #fff; }
.ind-slot-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ind-slot-chip { background: #161b28; border: 1px solid var(--clr-border); border-radius: 12px; padding: 2px 10px; font-size: 12px; color: #cdd6e6; }
.ind-slot-sub { color: var(--clr-text-soft); font-size: 10px; margin-left: 2px; }
.ind-plan-form { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
/* Preview and Add to build are one decision — wrapping them apart reads as two unrelated buttons. */
.ind-plan-actions { display: flex; gap: 12px; align-items: flex-end; }
.ind-field { display: flex; flex-direction: column; gap: 5px; }
.ind-field-grow { flex: 1 1 320px; }
.ind-field label { font-size: 11px; color: var(--clr-text-dim); text-transform: uppercase; letter-spacing: 0.04em; }
.ind-plan-form input {
  background: #141720; color: var(--clr-text); border: 1px solid var(--clr-border);
  border-radius: 5px; padding: 8px 10px; font-size: 13px;
}
.ind-search-wrap { position: relative; width: 100%; }
.ind-search-wrap input { width: 100%; box-sizing: border-box; }
.ind-field input[type="number"] { width: 90px; }
.ind-primary-btn, .ind-secondary-btn {
  padding: 8px 16px; font-size: 13px; border-radius: 5px; cursor: pointer; border: 1px solid transparent;
}
.ind-primary-btn { background: #1e3a5f; color: var(--clr-accent); border-color: #2d5a8a; }
.ind-primary-btn:hover:not(:disabled) { background: #254a78; }
.ind-secondary-btn { background: #161b28; color: #9fb4d8; border-color: var(--clr-border); }
.ind-secondary-btn:hover:not(:disabled) { background: #1b2233; color: #fff; }
.ind-primary-btn:disabled, .ind-secondary-btn:disabled { opacity: 0.45; cursor: default; }
.ind-search-results { position: absolute; z-index: 200; left: 0; right: 0; top: 100%; margin-top: 2px;
  background: #10141e; border: 1px solid var(--clr-border); border-radius: 8px; max-height: 320px; overflow-y: auto; box-shadow: 0 8px 24px rgba(0,0,0,.5); }
.ind-search-row { padding: 7px 12px; cursor: pointer; font-size: 13px; color: #cdd6e6; }
.ind-search-row:hover { background: #1b2233; color: #fff; }
.ind-search-empty { padding: 8px 12px; font-size: 12px; color: var(--clr-text-soft); }
.ind-pick-hint { font-size: 12px; color: var(--clr-text-soft); margin-top: 6px; }
.an-stat-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--clr-text-soft); margin-bottom: 3px; }
.ind-details { margin-top: 12px; }
.ind-details > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: #9fb4d8; padding: 4px 0; }
.ind-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 6px; }
.ind-table th { text-align: left; color: var(--clr-text-soft); font-weight: 600; padding: 4px 8px; border-bottom: 1px solid var(--clr-border); }
.ind-table td { padding: 4px 8px; border-bottom: 1px solid #1a2030; color: #cdd6e6; }
.ind-table .ind-num { text-align: right; font-variant-numeric: tabular-nums; }
.ind-table .ind-src { color: var(--clr-text-soft); font-size: 12px; }
.ind-tree { margin-top: 6px; font-size: 13px; }
.ind-tree-row { padding: 2px 0; color: #cdd6e6; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ind-tree-name { color: #fff; }
.ind-tree-qty { color: var(--clr-text-soft); font-variant-numeric: tabular-nums; }
.ind-tree-cost { color: var(--clr-accent); font-size: 12px; margin-left: auto; }
.ind-badge { font-size: 10px; text-transform: uppercase; letter-spacing: .03em; padding: 1px 6px; border-radius: 8px; }
.ind-build { background: #163524; color: #7fdca6; }
.ind-buy { background: #2a2130; color: #d9a7e0; }
.ind-unres { background: #3a2226; color: #e69aa0; }
.ind-wave-jobs { display: flex; flex-wrap: wrap; gap: 6px; }
.ind-wave-job { background: #161b28; border: 1px solid var(--clr-border); border-radius: 8px; padding: 2px 8px; font-size: 12px; color: #cdd6e6; }
.ind-bp-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; font-size: 12px; }
.ind-bp-ok { color: #7fdca6; }
.ind-bp-hint { color: var(--clr-text-soft); }
.ind-bp-btn { background: #161b28; border: 1px solid var(--clr-border); color: #9fb4d8; border-radius: 6px; padding: 4px 10px; font-size: 12px; cursor: pointer; }
.ind-bp-btn:hover { background: #1b2233; color: #fff; }
.ind-bp-connect { background: #163524; border-color: #2c6a44; color: #7fdca6; }
.ind-bp-connect:hover { background: #1c4a30; }
.ind-owned { font-size: 10px; background: #163a3a; color: #7fe0d0; padding: 1px 6px; border-radius: 8px; }
.ind-install { margin-top: 14px; }
.ind-install-title { font-size: 13px; color: #9fb4d8; margin: 8px 0 6px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ind-install-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px solid #1a2030; font-size: 13px; flex-wrap: wrap; }
.ind-run-char { font-size: 12px; color: var(--clr-text-soft); }
.ind-later { margin-top: 8px; }

#indResult { display: block; margin-top: 16px; }
#indResult:empty { margin-top: 0; }
#indResult:not(:empty) { margin-bottom: 18px; }
.ind-opt-check { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; font-size: 12px; color: var(--clr-text-soft); cursor: pointer; }
.ind-opt-check input { width: auto; margin: 0; }
.ind-speed-badge { font-size: 10px; background: #2a2130; color: #d9a7e0; padding: 1px 6px; border-radius: 8px; }
.ind-setup-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 12px; flex-wrap: wrap; }
.ind-setup-summary { font-size: 13px; color: var(--clr-text-soft); }
.ind-setup-summary b { color: #fff; }
.ind-connect-reminder { font-size: 12px; color: #d8b46a; background: #241f14; border: 1px solid #3a3322; border-radius: 6px; padding: 7px 12px; margin-bottom: 12px; }
.ind-link-btn { background: none; border: none; color: var(--clr-accent); cursor: pointer; font-size: 12px; padding: 0; text-decoration: underline; text-underline-offset: 2px; }
.ind-modal-section { margin-top: 16px; }
.ind-modal-h { font-size: 13px; color: #9fb4d8; margin: 0 0 8px; }
.ind-lifetime { margin: 4px 0 14px; }
.ind-lifetime:empty { margin: 0; }
/* Collapsible build tree (nested <details>) */
.ind-tree-node > .ind-tree-sum { cursor: pointer; list-style: none; padding: 3px 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; }
.ind-tree-node > .ind-tree-sum::-webkit-details-marker { display: none; }
.ind-tree-node > .ind-tree-sum::before { content: '\25B8'; color: var(--clr-text-soft); font-size: 10px; width: 10px; display: inline-block; }
.ind-tree-node[open] > .ind-tree-sum::before { content: '\25BE'; }
.ind-tree-node > .ind-tree-sum:hover { color: #fff; }
.ind-tree-kids { padding-left: 14px; margin-left: 4px; border-left: 1px solid #1a2030; }
.ind-tree-leaf { padding: 3px 0 3px 16px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; color: #cdd6e6; }
/* Step-by-step "what to do now" */
.ind-steps { margin: 14px 0; }
.ind-steps-title { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--clr-text-soft); margin-bottom: 8px; }
.ind-step { padding: 10px 12px; border: 1px solid var(--clr-border); border-radius: 8px; background: #12161f; margin-bottom: 8px; }
.ind-step-now { border-color: #2c6a44; background: linear-gradient(180deg,#13241a,#12161f); }
.ind-step-later { opacity: .92; }
.ind-step-done { border-style: dashed; background: none; }
.ind-step-hd { display: flex; align-items: center; gap: 9px; font-size: 14px; color: #fff; font-weight: 600; flex-wrap: wrap; }
.ind-step-num { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: #1e3a5f; color: var(--clr-accent); font-size: 12px; font-weight: 700; flex-shrink: 0; }
.ind-step-now .ind-step-num { background: #1c4a30; color: #7fdca6; }
.ind-step-tag { font-size: 10px; text-transform: uppercase; letter-spacing: .03em; background: #163524; color: #7fdca6; padding: 1px 7px; border-radius: 8px; font-weight: 600; }
.ind-step-when { font-size: 11px; color: var(--clr-text-soft); font-weight: 400; }
.ind-step-note { font-size: 11px; color: var(--clr-text-soft); font-weight: 400; font-style: italic; }
.ind-step-body { margin-top: 7px; font-size: 13px; color: #cdd6e6; }
.ind-step-body.ind-wave-jobs { display: flex; flex-wrap: wrap; gap: 6px; }
.ind-marginal-badge { font-size: 10px; background: #2a2a30; color: #b8c0cc; padding: 1px 6px; border-radius: 8px; }
/* What the shortcut cost you on this line, and the way to overrule it for this one material. */
.ind-shop-note { font-size: 11px; color: var(--clr-text-soft); }
.ind-shop-force { font-size: 10px; background: #1e3a5f; color: var(--clr-accent); border: 1px solid #2d5a8a;
  border-radius: 8px; padding: 1px 7px; cursor: pointer; }
.ind-shop-force:hover { background: #254a78; }
.ind-forced-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.ind-forced-lbl { font-size: 11px; color: var(--clr-text-soft); }
.ind-forced-chip { font-size: 11px; background: #1b2a1e; color: var(--clr-green); border: 1px solid #2c4a33;
  border-radius: 10px; padding: 2px 8px; cursor: pointer; }
.ind-forced-chip:hover { background: #233a28; }
.ind-forced-x { color: var(--clr-text-soft); margin-left: 2px; }
/* Overrides carried by a queued order, and the customer status link. */
.ind-oc-margin { display: inline-flex; align-items: center; gap: 2px; font-size: 11px; color: var(--clr-text-soft); }
.ind-oc-mrg { width: 52px; background: #0e121b; color: var(--clr-text); border: 1px solid var(--clr-border);
  border-radius: 4px; padding: 2px 4px; font-size: 11px; }
.ind-oc-mrgtag { font-size: 10px; background: #16211a; color: var(--clr-green); border: 1px solid #2c4a33;
  border-radius: 8px; padding: 0 6px; margin-left: 4px; }
.ind-oc-forced { font-size: 10px; background: #1b2a1e; color: var(--clr-green); border: 1px solid #2c4a33;
  border-radius: 8px; padding: 0 6px; margin-left: 4px; cursor: pointer; }
.ind-oc-share { background: none; border: 0; color: var(--clr-accent); cursor: pointer; font-size: 12px; padding: 0 3px; }
/* Blueprint ME/TE on a queued order: the tag on the chip, and the pair of inputs in the editor.
   Amber rather than green — it's an assumption you made, not a saving the engine found. */
.ind-oc-metetag { font-size: 10px; background: #241f16; color: #d8b46a; border: 1px solid #4a3f2c;
  border-radius: 8px; padding: 0 6px; margin-left: 4px; white-space: nowrap; }
.ind-oc-mete { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: var(--clr-text-dim); }
.ind-oc-mt { width: 46px; background: #0e121b; color: var(--clr-text); border: 1px solid var(--clr-border);
  border-radius: 4px; padding: 2px 4px; font-size: 11px; }
.ind-oc-share:hover { color: #d5e4ff; }
.ind-share-box { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; background: #141a26;
  border: 1px solid var(--clr-border); border-radius: 8px; padding: 8px 10px; margin-bottom: 10px; }
.ind-share-lbl { font-size: 11px; color: var(--clr-text-soft); text-transform: uppercase; letter-spacing: .06em; }
.ind-share-url { flex: 1 1 260px; min-width: 0; background: #0e121b; color: var(--clr-text);
  border: 1px solid var(--clr-border); border-radius: 5px; padding: 5px 8px; font-size: 12px; }
.ind-share-open { font-size: 12px; color: var(--clr-accent); text-decoration: none; }
.ind-share-revoke { font-size: 11px; background: none; color: var(--clr-red); border: 1px solid #4a2a2f;
  border-radius: 5px; padding: 4px 9px; cursor: pointer; }
.ind-share-x { background: none; border: 0; color: var(--clr-text-soft); cursor: pointer; font-size: 12px; }
/* ME/TE a build step was costed at — colour-coded by where the number came from, since "assumed
   from a contract copy" and "your own researched print" are very different confidence levels. */
.ind-wave-who { font-size: 10px; margin-left: 6px; padding: 0 6px; border-radius: 8px;
  background: #16202c; color: #8fb4d8; border: 1px solid #24344a; }
.ind-mete { font-size: 10px; margin-left: 6px; padding: 0 6px; border-radius: 8px; cursor: pointer;
  background: #1a2030; color: var(--clr-text-soft); border: 1px solid #262d3d; }
.ind-mete:hover { border-color: #3a4460; }
.ind-mete-owned { color: var(--clr-green); border-color: #2c4a33; background: #16211a; }
.ind-mete-contract { color: var(--clr-accent); border-color: #2d4a6a; background: #151d2a; }
.ind-mete-override { color: #e0b84a; border-color: #4a3f22; background: #221d12; }
.ind-mete-default { color: var(--clr-red); border-color: #4a2a2f; background: #221316; }
.ind-mete-edit { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; font-size: 10px;
  color: var(--clr-text-soft); }
.ind-mete-edit input { width: 46px; background: #0e121b; color: var(--clr-text); border: 1px solid var(--clr-border);
  border-radius: 4px; padding: 1px 4px; font-size: 11px; }
.ind-mete-ok { font-size: 10px; background: #1e3a5f; color: var(--clr-accent); border: 1px solid #2d5a8a;
  border-radius: 6px; padding: 1px 7px; cursor: pointer; }
.ind-mete-clr { font-size: 10px; background: none; color: var(--clr-text-soft); border: 0; cursor: pointer; }
.ind-step-items > summary { font-size: 11px; color: var(--clr-text-soft); cursor: pointer; padding: 4px 0 0; list-style: none; }
.ind-step-items > summary::-webkit-details-marker { display: none; }
.ind-step-items > summary::before { content: '\25B8 '; }
.ind-step-items[open] > summary::before { content: '\25BE '; }
.ind-step-items[open] > .ind-wave-jobs { margin-top: 6px; }
#indQueueResult { margin-top: 12px; }
#indQueueResult:empty { margin-top: 0; }
/* Industry card spacing + padded bodies (fixes squished cards) */
#tab-industry .pp-card { margin-bottom: 18px; }
#tab-industry .pp-card:last-child { margin-bottom: 0; }
.ind-body { padding: 16px; }
.ind-body > .pp-sub:first-child { margin-top: 0; }
/* Top-aligned: the options column is several rows tall now, and bottom-aligning the Facility
   select against it stranded the select at the bottom with a hole above it. */
.ind-plan-opts { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; margin-top: 14px; }
.ind-plan-opts select { background: #141720; color: var(--clr-text); border: 1px solid var(--clr-border); border-radius: 5px; padding: 8px 10px; font-size: 13px; min-width: 230px; }
.ind-plan-opts .ind-opt-check { margin: 0 0 4px; }
/* "Build everything" is a master switch: it disables BOTH the speed toggle and the savings
   slider. Sharing one flex row with them read as three peer controls (and bottom-aligning a
   checkbox against a slider looked broken), so it now sits above them with the two things it
   overrides indented beneath — the greying-out then reads as a consequence, not a glitch. */
.ind-opt-group { display: flex; flex-direction: column; gap: 8px; flex: 1 1 320px; min-width: 0; }
.ind-opt-master { font-weight: 600; color: var(--clr-text);
  /* Indented by exactly the governed block's border+padding so the two checkboxes line up in one
     column, with the rule running down their left edge from this row — the master sits at the top
     of the line it owns instead of beside it. */
  padding-left: 13px; }
/* The rule starts inside the master row (negative margin eaten back by the padding) so it reads as
   a bracket hanging off "Build everything" rather than a line floating below it. */
.ind-opt-governed { display: flex; flex-direction: column; gap: 8px;
  margin-top: -17px; padding-top: 17px;
  padding-left: 11px; border-left: 2px solid #2b3446; }
.ind-opt-governed .ind-field-marg { min-width: 0; }
.ind-shop-bar { display: flex; align-items: center; gap: 12px; margin: 4px 0 10px; }
.ind-copy-btn { background: #1e3a5f; color: var(--clr-accent); border: 1px solid #2d5a8a; border-radius: 5px; padding: 5px 12px; font-size: 12px; cursor: pointer; }
.ind-copy-btn:hover { background: #254a78; }
.ind-shop-tot { font-size: 12px; color: var(--clr-text-soft); }
/* Build pipeline — a MATRIX: rows are buildings, columns are stages */
.ind-pipe-hint { font-size: 11px; color: var(--clr-text-soft); margin: 6px 0 0; }
.ind-pipe-scroll { overflow-x: auto; padding: 10px 0 12px; }
/* Columns FLEX to the available width (minmax with a 0 floor lets them shrink below content, which
   `auto`/`min-content` would not) so the matrix fits the card instead of forcing a scrollbar. The
   96px minimum is the readability floor — past that many stages it scrolls rather than squashing. */
.ind-pipe { display: grid; grid-template-columns: 84px repeat(var(--ind-cols), minmax(96px, 1fr));
  column-gap: 3px; row-gap: 0; align-items: stretch; width: 100%; }
.ind-pipe-corner { border-bottom: 1px solid var(--clr-border); position: sticky; left: 0; background: #12141d; z-index: 2; }
.ind-pipe-hd { font-size: 9px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--clr-text-soft);
  padding: 0 3px 5px; display: flex; justify-content: space-between; align-items: center; gap: 4px;
  border-bottom: 1px solid var(--clr-border); min-width: 0; }
.ind-pipe-hd { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ind-pipe-hd span { background: #1c2030; color: #9fb4d8; border-radius: 8px; padding: 0 7px; font-size: 10px; }
.ind-pipe-hd-flow::after { content: '\203A'; color: var(--clr-text-soft); opacity: .55; font-size: 15px; line-height: 1; }
.ind-pipe-hd-final { color: var(--clr-accent); }
.ind-pipe-hd-final span { background: #1e3a5f; color: var(--clr-accent); }
/* Building row: a persistent labelled band you can read straight across */
.ind-pipe-rowlbl { padding: 8px 6px 8px 0; border-right: 1px solid var(--clr-border);
  border-bottom: 1px solid #1a2030; display: flex; flex-direction: column; justify-content: flex-start;
  position: sticky; left: 0; background: #12141d; z-index: 2; }
.ind-pipe-rowname { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ind-pipe-rowsub { font-size: 10px; color: var(--clr-text-soft); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ind-row-rx .ind-pipe-rowname { color: #d9a7e0; }
.ind-row-mfg .ind-pipe-rowname { color: #7fdca6; }
.ind-row-buy .ind-pipe-rowname { color: #cbb8d6; }
.ind-pipe-cell { display: flex; flex-direction: column; gap: 4px; padding: 8px 0;
  border-bottom: 1px solid #1a2030; min-width: 0; }
.ind-pipe-card { border: 1px solid var(--clr-border); border-left: 3px solid var(--clr-border); border-radius: 5px;
  padding: 4px 6px; background: #12161f; min-width: 0; overflow: hidden;
  transition: opacity .12s, border-color .12s, background .12s; }
.ind-pipe-build { border-left-color: #3a9668; }
.ind-pipe-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; color: #eef2f8; font-size: 11px; line-height: 1.25; overflow-wrap: anywhere; }
.ind-pipe-meta { display: flex; align-items: center; gap: 5px; margin-top: 2px; font-size: 10px;
  color: var(--clr-text-soft); flex-wrap: wrap; }
.ind-pipe-qty { font-variant-numeric: tabular-nums; }
.ind-pipe-runs { font-variant-numeric: tabular-nums; }
.ind-pipe-final .ind-pipe-hd { color: var(--clr-accent); }
.ind-pipe-final .ind-pipe-hd span { background: #1e3a5f; color: var(--clr-accent); }
.ind-pipe-final .ind-pipe-card { border-color: #2d5a8a; border-left-color: var(--clr-accent); background: #16233a; }
.ind-pipe-more { font-size: 11px; color: var(--clr-text-soft); padding: 5px 2px; }
.ind-pipe-buys { border-style: dashed; border-left-style: solid; border-left-color: #7a6a8a; background: #15121b; cursor: pointer; }
.ind-pipe-buys:hover { border-color: var(--clr-accent); background: #191527; }
.ind-pipe-buys .ind-pipe-name { color: #cbb8d6; }
/* Hover trace: dim everything, light up the hovered step + what it feeds / is fed by */
.ind-pipe-focus .ind-pipe-card { opacity: .28; }
.ind-pipe-focus .ind-hi-self { opacity: 1; border-color: var(--clr-accent); border-left-color: var(--clr-accent); background: #16233a; box-shadow: inset 0 0 0 1px var(--clr-accent); }
.ind-pipe-focus .ind-hi-out { opacity: 1; border-color: #3a9668; border-left-color: #7fdca6; background: #13241a; }
.ind-pipe-focus .ind-hi-in { opacity: 1; border-color: #7a6a8a; border-left-color: #cbb8d6; background: #191527; }
/* Shopping list split by build stage — matches the pipeline's "Buy" stage numbering */
.ind-shop-stage { margin-top: 16px; }
.ind-shop-stage:first-of-type { margin-top: 4px; }
.ind-shop-stage-hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; font-weight: 600; color: #9fb4d8; padding: 4px 0; border-bottom: 1px solid #1a2030; }
.ind-copy-sm { padding: 3px 9px; font-size: 11px; }
.ind-shop-flash { animation: indShopFlash 1.2s ease-out; }
@keyframes indShopFlash { 0% { background: #1e3a5f; } 100% { background: transparent; }
}
.ind-pipe-buys .ind-pipe-meta { color: #8a7a96; font-size: 10px; }
/* Build-structure config in the market manager */
.rx-mkt-build-badge { font-size: 10px; color: #7fdca6; margin-left: 8px; }

.rx-build-chk { display: flex; align-items: center; gap: 7px; font-size: 13px; color: #cdd6e6; margin: 6px 0 2px; cursor: pointer; }
.rx-build-chk input { width: auto; margin: 0; }
.rx-rig-row { font-size: 12px; color: var(--clr-text-soft); margin: 2px 0 6px 22px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rx-rig-row select { background: #141720; color: var(--clr-text); border: 1px solid var(--clr-border); border-radius: 4px; padding: 3px 6px; font-size: 12px; }
.ind-gate-steps { margin: 10px 0 16px; padding-left: 20px; color: #cdd6e6; font-size: 14px; line-height: 1.9; }
.ind-gate-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.ind-gate-note { margin-top: 14px; font-size: 12px; opacity: 0.85; }
/* Markets & Logistics: separated pricing vs build sections */
.rx-mkt-sec { margin-bottom: 18px; }
.rx-mkt-sec-h { font-size: 12px; font-weight: 600; color: #9fb4d8; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 8px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.rx-build-card { border: 1px solid var(--clr-border); border-radius: 7px; background: #12161f; padding: 10px 12px; margin-bottom: 10px; }
.rx-build-hd { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.rx-build-hd .rx-mkt-name { font-weight: 600; color: #fff; }
.rx-build-rm { margin-left: auto; }
.rx-build-foot { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
/* Queue progress (from real ESI jobs) */
/* Live state badge on a pipeline card + stage counter */
.ind-pipe-state { font-size: 9px; text-transform: uppercase; letter-spacing: .03em; padding: 1px 5px; border-radius: 7px; }
.ind-st-done { background: #163524; color: #7fdca6; }
.ind-st-run { background: #1e3a5f; color: #8fc3ff; }
.ind-st-part { background: #3a3322; color: #e0c98a; }
.ind-pipe-is-done { opacity: .72; }
.ind-pipe-is-done .ind-pipe-name { text-decoration: line-through; text-decoration-color: #3a966855; }
.ind-pipe-is-run { border-left-color: var(--clr-accent); }
.ind-pipe-hd .ind-hd-done { background: #163524; color: #7fdca6; }
/* Stock sources (hangars / containers you allow the planner to draw from) */
.ind-src-hd { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ind-src-help { font-size: 11px; color: var(--clr-text-soft); margin: 6px 0 8px; }
.ind-src-list { display: flex; flex-direction: column; gap: 2px; max-height: 260px; overflow-y: auto; }
.ind-src-row { display: flex; align-items: center; gap: 9px; padding: 5px 6px; border-radius: 5px; cursor: pointer; font-size: 13px; }
.ind-src-row:hover { background: #161b28; }
.ind-src-row input { width: auto; margin: 0; }
.ind-src-name { color: #eef2f8; }
.ind-src-meta { margin-left: auto; font-size: 11px; color: var(--clr-text-soft); }
.ind-src-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.ind-src-del { margin-left: 8px; background: none; border: none; color: #e69aa0; cursor: pointer; font-size: 13px; padding: 0 4px; }
.ind-src-del:hover { color: #ff6b74; }
.ind-paste { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--clr-border); border-radius: 6px; background: #12161f; }
.ind-paste input, .ind-paste textarea { width: 100%; background: #141720; color: var(--clr-text); border: 1px solid var(--clr-border); border-radius: 5px; padding: 7px 9px; font-size: 13px; margin-bottom: 7px; }
.ind-paste textarea { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; resize: vertical; }
.ind-reauth { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 10px 0; padding: 9px 12px;
  border: 1px solid #3a3322; border-radius: 6px; background: #241f14; }
.ind-reauth-txt { flex: 1; min-width: 240px; font-size: 12px; color: #d8b46a; line-height: 1.45; }
.ind-reauth-txt b { color: #f0d9a0; }
/* Marginal-saving slider */
.ind-field-marg { min-width: 300px; }
.ind-field-marg label { display: block; font-size: 12px; color: var(--clr-text-soft); margin-bottom: 4px; }
.ind-field-marg label b { color: var(--clr-accent); font-variant-numeric: tabular-nums; }
.ind-field-marg input[type=range] { width: 100%; accent-color: var(--clr-accent); margin: 0; padding: 0; }
.ind-marg-hint { font-size: 11px; color: var(--clr-text-soft); margin-top: 3px; }
/* The quote knob sits alongside the build options rather than inside the governed block — it has
   nothing to do with build-vs-buy, it's what you charge for the result. */
.ind-field-margin { flex: 1 1 260px; }
.ind-field-margin label b { color: var(--clr-green); }
/* Live read-out of what the slider position costs you — updates while dragging, off the sweep. */
.ind-marg-live { font-size: 11px; color: var(--clr-text-soft); margin-top: 4px; font-variant-numeric: tabular-nums; }
.ind-marg-live b { color: var(--clr-text); font-weight: 600; }
/* Curve being refetched: dim what's shown rather than clearing the line (no flicker). */
.ind-marg-live.ind-marg-stale { opacity: 0.45; }
.ind-marg-est { color: var(--clr-text-dim); font-size: 11px; }
.ind-marg-live b.ind-live-good { color: var(--clr-green); }
.ind-marg-live b.ind-live-bad { color: var(--clr-amber); }
/* Planning loader — centered, and tall enough that the page doesn't collapse then jump */
.ind-loading { display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; min-height: 220px; padding: 32px 20px; text-align: center; }
.ind-spinner { width: 30px; height: 30px; border-radius: 50%; border: 3px solid #1e2636;
  border-top-color: var(--clr-accent); animation: indSpin .8s linear infinite; }
@keyframes indSpin { to { transform: rotate(360deg); }
}
.ind-loading-msg { font-size: 15px; font-weight: 600; color: #eef2f8; }
.ind-loading-sub { font-size: 12px; color: var(--clr-text-soft); max-width: 420px; line-height: 1.5; }
@media (prefers-reduced-motion: reduce) { .ind-spinner { animation-duration: 2.4s; }
}
/* Preview (simulated) progress */
.ind-sim-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ind-sim-row input[type=range] { flex: 1; min-width: 160px; accent-color: var(--clr-accent); }
.ind-sim-row input[type=range]:disabled { opacity: .4; }
.ind-sim-banner { font-size: 12px; color: #d8b46a; background: #241f14; border: 1px solid #3a3322;
  border-radius: 6px; padding: 7px 12px; margin-bottom: 8px; }
/* Status-first layout */
.ind-status-head { margin-bottom: 10px; }
/* Pipeline card states — done / cooking / waiting, readable at a glance */
.ind-pipe-is-done { border-color: #2c6a44; border-left-color: #3a9668; background: #101a14; }
.ind-pipe-is-done .ind-pipe-name { color: #9fd8b8; }
.ind-pipe-is-run { border-color: var(--clr-accent); border-left-color: var(--clr-accent);
  background: #14203a; box-shadow: 0 0 0 1px rgba(90,160,255,.25); }
.ind-pipe-is-run .ind-pipe-name { color: #dceaff; }
.ind-pipe-is-wait { opacity: .5; border-style: dashed; }
.ind-pipe-is-wait .ind-pipe-name { color: #93a0b4; }
.ind-st-wait { background: #23262e; color: #93a0b4; }
.ind-st-run { background: #1e3a5f; color: #8fc3ff; }
/* Order chips in the status header — each says where that order actually is */
.ind-status-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.ind-status-head > button { flex: 0 0 auto; }
.ind-order-chips { flex: 1; display: flex; flex-wrap: wrap; gap: 6px; min-width: 200px; }
.ind-order-chip { display: inline-flex; align-items: center; gap: 7px; padding: 4px 6px 4px 10px;
  border: 1px solid var(--clr-border); border-left: 3px solid var(--clr-border); border-radius: 6px;
  background: #12161f; font-size: 13px; color: #eef2f8; }
.ind-order-chip b { color: var(--clr-accent); font-variant-numeric: tabular-nums; }
.ind-oc-complete { border-left-color: #3a9668; }
.ind-oc-building { border-left-color: var(--clr-accent); }
.ind-oc-waiting  { border-left-color: #4a4458; opacity: .8; }
.ind-oc-state { font-size: 10px; text-transform: uppercase; letter-spacing: .03em; padding: 1px 6px;
  border-radius: 8px; background: #1c2030; color: #9fb4d8; }
.ind-oc-complete .ind-oc-state { background: #163524; color: #7fdca6; }
.ind-oc-building .ind-oc-state { background: #1e3a5f; color: #8fc3ff; }
.ind-oc-del { background: none; border: none; color: #6b7688; cursor: pointer; font-size: 12px; padding: 0 2px; }
.ind-oc-del:hover { color: #ff6b74; }
/* "Do this now" — per-character instructions with visible slots */
.ind-do-title { font-size: 13px; color: #9fb4d8; margin: 14px 0 8px; }
.ind-do-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.ind-do-char { border: 1px solid var(--clr-border); border-left: 3px solid var(--clr-accent);
  border-radius: 7px; background: #12161f; padding: 10px 12px; }
.ind-do-hd { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ind-do-who { font-size: 14px; font-weight: 600; color: #fff; }
.ind-do-count { font-size: 11px; color: var(--clr-accent); }
.ind-do-slots { display: flex; gap: 10px; flex-wrap: wrap; margin: 7px 0 8px; }
/* The pip strip is the flexible part: it shrinks and wraps rather than pushing the count out of
   the card, since the count is the bit that has to stay readable. */
.ind-slotset { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; min-width: 0; flex: 1 1 auto; }
/* Four tiles a row, max. The shared .an-stats is a free-wrapping flex row, which on a wide screen
   strung seven or eight metrics into one long line nobody scans — a grid caps it and keeps the
   tiles a consistent width instead of stretching the last one across the gap. */
#indStatusBody .an-stats, #indResult .an-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px;
}
@media (min-width: 761px) {
  #indStatusBody .an-stats, #indResult .an-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.ind-do-slots { display: flex; flex-direction: column; gap: 3px; }
.ind-slotrow { display: flex; align-items: center; gap: 7px; font-size: 10px; min-width: 0; }
.ind-slotlbl { width: 52px; flex: none; text-transform: uppercase; letter-spacing: .04em;
  color: var(--clr-text-soft); }
.ind-slotrow-mfg .ind-slotlbl { color: #8fb4d8; }
.ind-slotrow-rx .ind-slotlbl { color: #d9a7e0; }
.ind-slotset { display: inline-flex; gap: 3px; align-items: center; }
.ind-slotnum { color: var(--clr-text-soft); white-space: nowrap; flex: none;
  font-variant-numeric: tabular-nums; }
.ind-slotnum b { color: var(--clr-text); }
.ind-pip { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.ind-pip-busy { background: #3a4252; }
.ind-pip-open { background: transparent; border: 1px solid #333c50; }
.ind-pip-fill { background: var(--clr-accent); box-shadow: 0 0 4px rgba(90,160,255,.6); }
.ind-pip-rx.ind-pip-fill { background: #d9a7e0; box-shadow: 0 0 4px rgba(217,167,224,.6); }
.ind-pip-none { font-size: 10px; color: var(--clr-text-soft); }
.ind-do-jobs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
/* Two lines per job: NAME on its own row, then runs/activity/duration beneath it. These cards
   sit in a ~320px grid column, and sharing one row meant the name was the only flexible column
   — ellipsis cut "Crystalline Carbonide Armor Plate" down to "Crystalline …", which doesn't
   identify the product at all. Full-width name, no truncation, meta line reads left-to-right. */
.ind-do-job { display: flex; align-items: center; gap: 4px 7px; font-size: 12px; color: #cdd6e6; flex-wrap: wrap; min-width: 0; }
.ind-do-name { color: #eef2f8; flex: 1 1 100%; min-width: 0; overflow-wrap: anywhere; }
.ind-do-dur { margin-left: auto; }   /* duration pins right on the meta line */
.ind-do-runs, .ind-do-act, .ind-do-dur { flex: 0 0 auto; white-space: nowrap; }
.ind-do-runs { color: var(--clr-text-soft); font-variant-numeric: tabular-nums; }
.ind-do-runs { cursor: help; }   /* title carries the job count + run total */
.ind-do-act { font-size: 9px; text-transform: uppercase; letter-spacing: .03em; padding: 1px 5px; border-radius: 7px; }
.ind-do-manufacturing { background: #163524; color: #7fdca6; }
.ind-do-reaction { background: #2a2130; color: #d9a7e0; }
.ind-do-dur { margin-left: auto; color: var(--clr-text-soft); font-variant-numeric: tabular-nums; }
.ind-do-blocked { font-size: 12px; color: #d8b46a; margin-top: 8px; }
.ind-big-btn { font-size: 14px; padding: 10px 18px; margin-top: 6px; }
#indPlanModal .ind-plan-form, #indPlanModal .ind-plan-opts { margin-top: 12px; }
#indPlanModal #indResult:not(:empty) { margin-top: 14px; }
.ind-field-label { min-width: 190px; }
.ind-field-label input { width: 100%; }
.ind-oc-for { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em;
  background: #2a2130; color: #d9a7e0; padding: 1px 7px; border-radius: 8px; max-width: 140px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ind-oc-pos { font-size: 10px; font-weight: 700; color: var(--clr-accent); background: #1e3a5f;
  border-radius: 8px; padding: 1px 6px; font-variant-numeric: tabular-nums; }
.ind-oc-eta { font-size: 11px; color: var(--clr-text-soft); font-variant-numeric: tabular-nums; }
.ind-oc-complete .ind-oc-pos { background: #163524; color: #7fdca6; }
.ind-slot-excl { margin-top: 10px; font-size: 12px; color: var(--clr-text-soft); }
.ind-slot-excl b { color: #9fb4d8; }
.ind-slot-excl span { border-bottom: 1px dotted #4a5468; cursor: help; }
.ind-slot-excl-why { font-size: 11px; margin-top: 3px; opacity: .85; }
/* Informational, not an error: a missing blueprint is usually just one we can't see (corp hangar),
   and it never blocks or changes a build decision — so it must not look like a failure. */
.ind-bp-note { margin: 12px 0; padding: 10px 13px; border: 1px solid #3a4356; border-left: 3px solid #5a7ba6;
  border-radius: 6px; background: #161b26; font-size: 13px; color: #cdd6e6; }
.ind-bp-note b { color: #eef2f8; }
.ind-bp-warn-sub { font-size: 11.5px; color: #8fa0b8; margin-top: 5px; line-height: 1.5; }
.ind-bp-nm { color: #eef2f8; flex: 1 1 auto; min-width: 0; }
.ind-bp-rows { display: flex; flex-direction: column; gap: 5px; margin: 8px 0 4px; }
.ind-bp-row2 { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 12.5px; }
.ind-bp-px { flex: 0 0 auto; text-align: right; color: #e6d0b8; display: flex; flex-direction: column; align-items: flex-end; }
.ind-bp-px b { color: #ffe0b0; font-variant-numeric: tabular-nums; }
.ind-bp-sub2 { font-size: 11px; color: #b39a9a; }
/* Background jobs admin page */
.job-st { font-size: 10px; text-transform: uppercase; letter-spacing: .03em; padding: 1px 7px; border-radius: 8px; }
.job-ok { background: #163524; color: #7fdca6; }
.job-error { background: #3a2226; color: #e69aa0; }
.job-running { background: #1e3a5f; color: #8fc3ff; }
.job-detail { color: var(--clr-text-soft); font-size: 11.5px; max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.job-sub { font-size: 10.5px; color: var(--clr-text-soft); margin-top: 2px; }
.job-toggle { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 11px; color: var(--clr-text-soft); }
.job-toggle input { width: auto; margin: 0; }
.job-row-off { opacity: .55; }
.job-off { background: #23262e; color: #93a0b4; }
.job-never-run { background: #2a2620; color: #d8b46a; }
.job-queued { font-size: 11px; color: var(--clr-accent); }
.ind-bp-need { display: block; font-size: 10.5px; color: #8fa0b8; margin-top: 1px; }
/* Inline order editing */
.ind-oc-edit { background: none; border: none; color: #6b7688; cursor: pointer; font-size: 12px; padding: 0 2px; }
.ind-oc-edit:hover { color: var(--clr-accent); }
.ind-oc-editing { gap: 6px; padding: 5px 8px; border-left-color: var(--clr-accent); }
.ind-oc-name { color: #eef2f8; font-size: 12px; }
.ind-oc-qty { width: 56px; }
.ind-oc-lbl { width: 170px; }
.ind-oc-qty, .ind-oc-lbl { background: #141720; color: var(--clr-text); border: 1px solid var(--clr-border);
  border-radius: 4px; padding: 3px 6px; font-size: 12px; margin: 0; }
.ind-oc-ok { background: #1e3a5f; color: var(--clr-accent); border: 1px solid #2d5a8a; border-radius: 4px;
  padding: 3px 10px; font-size: 11px; cursor: pointer; }
.ind-oc-cancel { background: none; border: none; color: var(--clr-text-soft); font-size: 11px; cursor: pointer; }
/* Queue order modal */
.ind-ord-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0; }
.ind-ord-list { display: flex; flex-direction: column; gap: 4px; margin: 8px 0 12px; max-height: 320px; overflow-y: auto; }
.ind-ord-row { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border: 1px solid var(--clr-border);
  border-radius: 6px; background: #12161f; font-size: 13px; }
.ind-ord-pos { flex: 0 0 22px; text-align: center; font-size: 11px; font-weight: 700; color: var(--clr-accent);
  background: #1e3a5f; border-radius: 8px; padding: 1px 0; }
.ind-ord-nm { flex: 1; color: #eef2f8; display: flex; align-items: center; gap: 7px; min-width: 0; }
.ind-ord-nm b { color: var(--clr-accent); }
.ind-ord-btn { background: #161b28; border: 1px solid var(--clr-border); color: #9fb4d8; border-radius: 4px;
  padding: 2px 8px; cursor: pointer; font-size: 11px; }
.ind-ord-btn:disabled { opacity: .3; cursor: default; }
.ind-ord-btn:hover:not(:disabled) { background: #1b2233; color: #fff; }
.ind-do-runs b { color: var(--clr-accent); font-variant-numeric: tabular-nums; }
.ind-opt-muted { opacity: .45; }