@import url("styles/tokens.css");
@import url("styles/shell.css");
@import url("styles/components.css");
@import url("styles/views.css");



/*
   Public Empire Rising Calculator shell. The splash is intentionally neutral;
   authentication is not required for the public build.
*/

.splash {
  position: fixed; inset: 0; z-index: 9999;
  background: radial-gradient(ellipse at center, #1a0a2e 0%, #0a0015 60%, #000 100%);
  display: flex; align-items: center; justify-content: center;
  font-family: "JetBrains Mono", monospace;
  overflow: hidden;
}
.splash.hidden { display: none; }

/* scanlines overlay */
.splash-scanlines {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,45,149,.03) 2px, rgba(255,45,149,.03) 4px);
  pointer-events: none; z-index: 2;
}

/* floating particles */
.splash-particles {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
}
.splash-particles::before, .splash-particles::after {
  content: ''; position: absolute;
  width: 4px; height: 4px; background: var(--accent);
  border-radius: 50%; box-shadow: 0 0 6px var(--accent);
  animation: float-up 4s infinite ease-in;
}
.splash-particles::before { left: 15%; top: 80%; animation-delay: 0s; }
.splash-particles::after  { left: 75%; top: 70%; animation-delay: 2s; width: 3px; height: 3px; }
@keyframes float-up {
  0% { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(-60vh) scale(0); opacity: 0; }
}

.splash-scene {
  position: relative; z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 1.5rem;
  max-width: 600px; width: 90%; text-align: center;
}

/* NEON SIGN */
.neon-sign { margin-bottom: 0.5rem; }
.neon-text {
  display: block; font-family: "Orbitron", monospace;
  font-size: 4rem; font-weight: 900; letter-spacing: 8px;
  color: #ff2d95; text-shadow: 0 0 20px #ff2d95, 0 0 60px #ff2d95, 0 0 100px #c01860, 0 0 140px #ff2d95;
  animation: neon-flicker 3s infinite;
}
.neon-sub {
  display: block; font-family: "Orbitron", monospace;
  font-size: 1rem; letter-spacing: 12px; color: var(--purple-dim);
  text-shadow: 0 0 10px var(--purple), 0 0 30px var(--purple);
  margin-top: -0.25rem;
}
@keyframes neon-flicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; }
  20%, 24%, 55% { opacity: 0.85; }
}

/* BAR SCENE — CMG members on stools, trading jokes via speech bubbles */
.bar-scene {
  background: rgba(10,0,20,.6); border: 1px solid rgba(255,45,149,.2);
  border-radius: 8px; padding: 1rem 1rem 0.75rem; width: 100%;
  box-shadow: inset 0 0 40px rgba(255,45,149,.05);
}
.bar-shelf {
  font-size: 1.125rem; letter-spacing: 8px; opacity: 0.55;
  padding-bottom: 0.5rem; margin-bottom: 3.25rem;
  border-bottom: 1px solid rgba(0,240,255,.15);
  text-shadow: 0 0 12px rgba(0,240,255,.4);
}
.bar-counter {
  display: flex; justify-content: space-around; align-items: flex-end;
  position: relative;
}
.barfly { position: relative; display: flex; flex-direction: column; align-items: center; width: 19%; }
.barfly-ava {
  font-size: 1.75rem; line-height: 1;
  animation: barfly-bob 3.2s ease-in-out infinite;
}
.barfly:nth-child(1) .barfly-ava { animation-delay: 0s; }
.barfly:nth-child(2) .barfly-ava { animation-delay: 0.6s; }
.barfly:nth-child(3) .barfly-ava { animation-delay: 1.2s; }
.barfly:nth-child(4) .barfly-ava { animation-delay: 1.8s; }
.barfly:nth-child(5) .barfly-ava { animation-delay: 2.4s; }
@keyframes barfly-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
.barfly.speaking .barfly-ava { animation: barfly-talk 0.4s ease-in-out infinite; }
@keyframes barfly-talk {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-2px) rotate(-4deg); }
}
.barfly-name {
  font-size: 0.5625rem; letter-spacing: 1px; color: var(--muted);
  margin-top: 0.25rem; text-transform: uppercase;
}
.barfly.speaking .barfly-name { color: var(--accent); text-shadow: 0 0 8px var(--accent); }
.barfly-bubble {
  position: absolute; bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%) scale(0.8); transform-origin: bottom center;
  min-width: 150px; max-width: 220px;
  background: rgba(20,5,35,.95); border: 1px solid var(--accent);
  border-radius: 8px; padding: 0.4rem 0.6rem;
  font-size: 0.625rem; font-style: italic; color: var(--text);
  line-height: 1.4; text-align: center;
  opacity: 0; pointer-events: none; z-index: 5;
  box-shadow: 0 0 16px rgba(255,45,149,.25);
  transition: opacity .3s, transform .3s;
}
.barfly-bubble::after {
  content: ''; position: absolute; top: 100%; left: 50%; margin-left: -5px;
  border: 5px solid transparent; border-top-color: var(--accent);
}
.barfly-bubble.show {
  opacity: 1; transform: translateX(-50%) scale(1);
  animation: bubble-pop .3s ease-out;
}
@keyframes bubble-pop {
  0% { transform: translateX(-50%) scale(0.6); }
  70% { transform: translateX(-50%) scale(1.05); }
  100% { transform: translateX(-50%) scale(1); }
}
.barkeep .barfly-ava { font-size: 2rem; }
.bar-counter-top {
  height: 8px; margin-top: 0.375rem; border-radius: 3px;
  background: linear-gradient(90deg, rgba(139,44,245,.35), rgba(255,45,149,.35), rgba(139,44,245,.35));
  box-shadow: 0 2px 12px rgba(255,45,149,.2);
}

/* PASSWORD GATE */
.splash-gate {
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  width: 100%; max-width: 340px;
}
.gate-label {
  font-family: "Orbitron", monospace; font-size: 0.6875rem;
  letter-spacing: 2px; color: var(--muted);
  text-shadow: 0 0 8px var(--purple);
}
.gate-input-wrap {
  display: flex; align-items: center; gap: 0.5rem;
  background: rgba(0,0,0,.6); border: 1px solid var(--accent);
  border-radius: 4px; padding: 0.5rem 0.75rem; width: 100%;
  box-shadow: 0 0 12px rgba(255,45,149,.15);
}
.gate-prompt { color: var(--accent); font-weight: 700; font-size: 1rem; }
.gate-input-wrap input {
  flex: 1; background: transparent; border: none; outline: none;
  color: var(--cyan); font-family: "JetBrains Mono", monospace;
  font-size: 0.875rem; caret-color: var(--accent);
}
.gate-input-wrap input::placeholder { color: rgba(255,45,149,.3); }
.gate-btn {
  width: 100%; background: transparent;
  border: 1px solid var(--accent); border-radius: 4px;
  color: var(--accent); font-family: "Orbitron", monospace;
  font-size: 0.75rem; letter-spacing: 3px; padding: 0.625rem;
  cursor: pointer; transition: all .2s;
  text-shadow: 0 0 8px var(--accent);
}
.gate-btn:hover {
  background: var(--accent); color: #fff;
  box-shadow: 0 0 20px var(--accent), 0 0 40px rgba(255,45,149,.4);
}
.gate-error {
  color: var(--bad); font-size: 0.625rem;
  min-height: 1rem; text-shadow: 0 0 8px var(--bad);
}

/* ambient footer chatter */
.ambient-chatter {
  display: flex; gap: 1.5rem; flex-wrap: wrap; justify-content: center;
  font-size: 0.5625rem; color: var(--muted); opacity: 0.5;
}

/* ═══════════════════════════════════════════════════════════════════════
   MAIN APP — hidden behind splash until authenticated
   ═══════════════════════════════════════════════════════════════════════ */

body.locked > header,
body.locked > .playerbar,
body.locked > main,
body.locked > footer { display: none; }

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Monaco, Consolas, monospace;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  position: relative;
}

/* subtle grid overlay */
body::before {
  content: '';
  position: fixed; inset: 0;
  background-image:
    linear-gradient(rgba(255,45,149,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,45,149,.03) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 0;
}
body::after {
  content: '';
  position: fixed; inset: 0;
  background: repeating-linear-gradient(0deg,
    transparent 0px, transparent 3px, rgba(0,0,0,.08) 3px, rgba(0,0,0,.08) 4px);
  pointer-events: none;
  z-index: 0;
}

/* ---- neon scrollbars ---- */
* { scrollbar-width: thin; scrollbar-color: var(--accent-dim) var(--bg); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--accent-dim), var(--purple-dim));
  border-radius: 5px; border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--accent), var(--purple));
}

/* ---- neon text selection ---- */
::selection { background: var(--accent); color: #fff; }

/* =====================================================================
   REDUCED MOTION
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0s !important;
  }
  body::before, body::after { display: none; }
  /* 0s card-in with `both` fill kept every plan card at opacity 0 for a frame
     and could leave flicker on slow paints; drop the entrance entirely. */
  .calc-result .flow-card, .calc-result .recipe-card, .calc-result .kpi-tile,
  .calc-result .cost-panel, .calc-multi .flow-card, .calc-multi .recipe-card,
  .calc-multi .kpi-tile, .calc-multi .cost-panel { animation: none; }
}

/* =====================================================================
   HEADER
   ===================================================================== */
header {
  position: relative; z-index: 20; /* above .playerbar (z:1) so the "More" dropdown overhangs it */
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #0d0d1a 0%, #07070d 100%);
  display: flex; flex-direction: column; gap: 10px;
}
/* animated neon strip under the header */
header::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg,
    transparent, var(--cyan), var(--accent), var(--purple), transparent);
  background-size: 200% 100%;
  opacity: .55;
  animation: strip-flow 9s linear infinite;
  pointer-events: none;
}
@keyframes strip-flow {
  from { background-position: 0% 0; }
  to   { background-position: 200% 0; }
}
.brand { display: flex; align-items: center; gap: 14px; }
.crest {
  width: 3rem; height: 3rem; flex: 0 0 3rem;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--accent);
  border-radius: 6px;
  color: var(--accent-bright);
  font-family: "Orbitron", "JetBrains Mono", ui-monospace, monospace;
  font-weight: 900; font-size: 0.875rem; letter-spacing: 2px;
  background: #0a0a14;
  box-shadow: var(--glow-pink), inset 0 0 20px #ff2d9510;
  text-shadow: 0 0 8px var(--accent);
  animation: crest-pulse 3s ease-in-out infinite;
  position: relative; overflow: hidden;
}
/* logo image variant of the crest */
.crest-logo {
  width: 3rem; height: 3rem; flex: 0 0 3rem;
  object-fit: contain;
  border-radius: 6px;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,.55));
}
/* scanline sweep across the crest */
.crest::after {
  content: '';
  position: absolute; left: -20%; right: -20%; top: -60%; height: 35%;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.14), transparent);
  transform: rotate(8deg);
  animation: crest-scan 5s linear infinite;
  pointer-events: none;
}
@keyframes crest-scan {
  0%   { top: -60%; }
  60%, 100% { top: 140%; }
}
@keyframes crest-pulse {
  0%, 100% { box-shadow: var(--glow-pink); }
  50% { box-shadow: 0 0 18px #ff2d9566, 0 0 40px #ff2d9533; }
}
.brand-text h1 {
  margin: 0;
  font-family: "Orbitron", "JetBrains Mono", sans-serif;
  font-size: 1.125rem; font-weight: 700; letter-spacing: 1px;
  color: var(--text);
  text-transform: uppercase;
}
.brand-sub {
  font-size: 0.75rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
}
.nav-bar { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
nav { display: flex; gap: 4px; flex-wrap: wrap; }
/* Main tabs = a single non-wrapping strip; scrolls horizontally when narrow
   instead of stacking into multiple rows. The 8 Reference sections live in the
   "More" dropdown to the right. */
.nav-bar > nav {
  flex: 1 1 auto; min-width: 0;
  flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.nav-bar > nav::-webkit-scrollbar { display: none; }
.nav-bar > nav .tab { flex: 0 0 auto; white-space: nowrap; }

/* ---- "More ▾" overflow dropdown (Reference sections) ---- */
.nav-more { position: relative; flex: 0 0 auto; }
.nav-more-btn {
  background: transparent; color: var(--muted);
  border: none; border-bottom: 2px solid transparent;
  padding: 0.375rem 0.75rem; cursor: pointer;
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1.5px;
  font-family: "Orbitron", "JetBrains Mono", ui-monospace, monospace;
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  transition: color .15s, border-color .15s, text-shadow .15s;
}
.nav-more-btn:hover { color: var(--text); border-bottom-color: var(--line-bright); }
.nav-more-btn.active {
  color: var(--accent); border-bottom-color: var(--accent);
  text-shadow: 0 0 10px var(--accent);
}
.nav-more-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.nav-more-btn .more-caret { font-size: 0.7em; transition: transform .15s; }
.nav-more-btn[aria-expanded="true"] .more-caret { transform: rotate(180deg); }

.nav-more-menu {
  position: absolute; top: calc(100% + 7px); right: 0; z-index: 60;
  flex-direction: column; align-items: stretch; gap: 1px;
  min-width: 190px; max-height: 70vh; overflow-y: auto;
  padding: 6px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 12px 34px rgba(0,0,0,.55), 0 0 0 1px rgba(255,45,149,.06);
}
.nav-more-menu[hidden] { display: none; }
.nav-more-menu .tab {
  border-bottom: none; border-radius: 5px;
  text-align: left; padding: 0.5rem 0.6rem; white-space: nowrap;
}
.nav-more-menu .tab:hover {
  background: var(--panel2); color: var(--text); border-bottom-color: transparent;
}
.nav-more-menu .tab.active {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--accent); border-bottom-color: transparent; animation: none;
}
.nav-more-menu .tab + .tab { border-top: 1px solid color-mix(in srgb, var(--line) 55%, transparent); }
.tab {
  background: transparent;
  color: var(--muted);
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0.375rem 0.75rem;
  cursor: pointer;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-family: "Orbitron", "JetBrains Mono", ui-monospace, monospace;
  transition: color .15s, border-color .15s, text-shadow .15s;
}
.tab:hover { color: var(--text); border-bottom-color: var(--line-bright); }
.tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  text-shadow: 0 0 10px var(--accent);
  animation: tab-glow 3s ease-in-out infinite;
}
/* gentle breathing glow on the active tab = functional "you are here" cue */
@keyframes tab-glow {
  0%, 100% { text-shadow: 0 0 8px color-mix(in srgb, var(--accent) 70%, transparent); }
  50%      { text-shadow: 0 0 14px var(--accent), 0 0 22px color-mix(in srgb, var(--accent) 45%, transparent); }
}
.tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---- Theme bar ---- */
.theme-bar {
  display: flex; align-items: center; gap: 6px; margin-left: auto;
}
.theme-btn, .mute-btn {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 4px; padding: 0.25rem 0.45rem; cursor: pointer;
  font-size: 0.875rem; line-height: 1; color: var(--muted);
  transition: border-color .15s, box-shadow .15s, color .15s;
}
.theme-btn:hover, .mute-btn:hover { border-color: var(--accent-dim); color: var(--text); }
.theme-btn.active {
  border-color: var(--accent);
  box-shadow: 0 0 6px #ff2d9544;
  color: var(--accent-bright);
}
.theme-btn:focus-visible, .mute-btn:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}
/* Muted is a state to notice, not a selection — warn, so it does not read as
   "this theme is active" alongside the six buttons next to it. */
.mute-btn.active {
  border-color: var(--warn); color: var(--warn);
  box-shadow: 0 0 6px rgba(255,107,181,.27);
}
.theme-bar-sep {
  width: 1px; align-self: stretch; margin: 0.1rem 0.15rem;
  background: var(--line);
}

/* ---- Font-size slider ---- */
.size-slider {
  display: flex; align-items: center; gap: 4px;
}
.size-slider label {
  font-size: 0.75rem; color: var(--muted);
  font-family: "Orbitron", "JetBrains Mono", monospace;
  letter-spacing: 0.5px; white-space: nowrap;
}
.size-slider input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: clamp(140px, 22vw, 220px); height: 2rem;
  background: transparent;
  border-radius: 2px; outline: none; cursor: pointer;
  padding: 0; border: none;
  touch-action: pan-y;
}
.size-slider input[type="range"]::-webkit-slider-runnable-track {
  height: 8px; background: var(--line); border-radius: 999px;
}
.size-slider input[type="range"]::-moz-range-track {
  height: 8px; background: var(--line); border-radius: 999px;
}
.size-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px;
  margin-top: -7px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 6px #00f0ff44;
  cursor: pointer; border: none;
}
.size-slider input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--cyan); box-shadow: 0 0 6px #00f0ff44;
  cursor: pointer; border: none;
}
.size-slider input[type="range"]:focus-visible {
  outline: 2px solid var(--cyan); outline-offset: 3px;
}
.size-control {
  display: grid; grid-template-columns: 44px auto minmax(140px, 1fr) auto 44px;
  align-items: center; gap: 0.3rem; min-width: 0;
}
.size-step {
  min-width: 44px; min-height: 44px; padding: 0;
  border: 1px solid var(--line-bright); border-radius: 6px;
  background: var(--panel); color: var(--text); cursor: pointer;
  font: 700 1.15rem/1 "JetBrains Mono", monospace;
}
.size-step:hover { border-color: var(--cyan); color: var(--cyan); }
.size-step:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.size-bound { color: var(--muted); font-size: 0.58rem; white-space: nowrap; }
.size-label {
  font-size: 0.7rem; color: var(--cyan); font-weight: 700;
  min-width: 2.2rem; text-align: center;
  font-family: "Orbitron", "JetBrains Mono", monospace;
}

main {
  position: relative; z-index: 1;
  padding: 1.25rem;
  max-width: 1100px;
  margin: 0 auto;
}
@media (min-width: 1800px) {
  main { max-width: 1600px; padding: 1.5rem; }
}
@media (min-width: 3000px) {
  main { max-width: 2200px; padding: 2rem; }
}
/* Gear 1.10 is a wide explorer on high-resolution displays. Keep the wider
   canvas opt-in to its active view so compact tabs retain their proportions. */
@media (min-width: 2000px) {
  main:has(> #view-patch-changes.active) { max-width: 1800px; }
}
@media (min-width: 3000px) {
  main:has(> #view-patch-changes.active) { max-width: 2200px; }
}
.view { display: none; }
.view.active { display: block; }

.controls {
  display: flex; gap: 0.625rem; flex-wrap: wrap;
  margin-bottom: 1rem; align-items: flex-end;
}
.controls label {
  display: flex; flex-direction: column;
  font-size: 0.78rem; color: var(--muted); gap: 3px;
  text-transform: uppercase; letter-spacing: 1px;
}

input, button, select {
  background-color: var(--panel);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0.5rem 0.625rem;
  font-size: 0.8125rem;
  font-family: "JetBrains Mono", ui-monospace, monospace;
}
input:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  animation: focus-pulse 1.6s ease-in-out infinite;
}
@keyframes focus-pulse {
  0%, 100% { box-shadow: 0 0 6px color-mix(in srgb, var(--accent) 28%, transparent); }
  50%      { box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 55%, transparent), 0 0 20px color-mix(in srgb, var(--accent) 28%, transparent); }
}
#calc-item[readonly] {
  cursor: pointer;
  user-select: none;
  background: var(--panel2);
  border-style: dashed;
}
#calc-item[readonly]:hover {
  border-color: var(--accent-dim);
}
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
select {
  cursor: pointer; appearance: none; padding-right: 1.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6' fill='%23ff2d95'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}
button {
  cursor: pointer;
  background: linear-gradient(135deg, var(--accent), var(--purple));
  color: #fff; border: none; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px;
  font-size: 0.75rem; padding: 0.5rem 0.875rem;
  transition: box-shadow .2s, transform .12s;
  box-shadow: 0 0 10px #ff2d9522;
}
button:hover { box-shadow: var(--glow-pink), 0 0 20px #8b2cf544; transform: translateY(-1px); }
/* tactile press — button physically depresses (easing = natural snap) */
button:active { transform: translateY(1px) scale(.98); box-shadow: 0 0 6px #ff2d9522; transition-duration: .05s; }

table {
  width: 100%; border-collapse: collapse;
  margin-top: 0.625rem; font-size: 0.8125rem;
}
th, td {
  text-align: left; padding: 0.5rem 0.625rem;
  border-bottom: 1px solid var(--line);
}
th {
  color: var(--accent); font-weight: 600; user-select: none;
  text-transform: uppercase; font-size: 0.75rem;
  letter-spacing: 1px;
  font-family: "Orbitron", "JetBrains Mono", ui-monospace, monospace;
}
tbody tr:hover { background: rgba(255,45,149,.04); }

.tag {
  display: inline-block; padding: 1px 8px; border-radius: 3px;
  font-size: 0.6875rem;
  background: var(--panel); border: 1px solid var(--line);
  color: var(--muted); margin: 1px 2px;
}
.tag.mine { border-color: var(--cyan); color: var(--cyan); box-shadow: 0 0 6px #00f0ff22; }
.tag.have { border-color: var(--accent); color: var(--accent-bright); }
.tag.short { border-color: var(--bad); color: var(--bad); }

.card {
  background: linear-gradient(135deg, var(--panel) 0%, var(--panel2) 100%);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.875rem 1rem;
  margin-bottom: 0.875rem;
  box-shadow: 0 2px 0 #00000060;
  transition: border-color .2s, box-shadow .2s, transform .15s;
}
.card:hover {
  border-color: var(--line-bright);
  box-shadow: 0 2px 0 #00000060, 0 0 16px color-mix(in srgb, var(--accent) 18%, transparent);
  transform: translateY(-1px);
}
.card h3 { margin: 0 0 0.5rem; font-size: 0.875rem; color: var(--text); }

.section-title {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--cyan);
  margin: 1.125rem 0 0.375rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.25rem;
  cursor: pointer;
  user-select: none;
  display: flex; align-items: center; gap: 0.5rem;
}
.section-title::after {
  content: '▾';
  font-size: 0.625rem;
  transition: transform .2s;
  color: var(--muted);
}
.section-title.collapsed::after {
  transform: rotate(-90deg);
}
.section-title:hover {
  color: var(--cyan-dim);
  background: rgba(0,240,255,0.04);
}

.kv { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px dashed var(--line); }
.kv span:last-child { font-variant-numeric: tabular-nums; }
.shortfall { color: var(--warn); }
.ok { color: var(--cyan); }
.muted { color: var(--muted); }

footer {
  position: relative; z-index: auto;
  padding: 0.6rem 1.25rem;
  border-top: 1px solid var(--line);
  color: var(--muted); font-size: 0.6875rem; text-align: center;
  overflow: hidden;
}

/* ---- guild status bar (footer feature manifest) ---- */
.footer-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 0.35rem 0.65rem;
}
.footer-operator {
  font-weight: 700; color: var(--accent-bright); letter-spacing: 0.5px;
  text-transform: uppercase; margin-right: 0.5rem;
  font-size: 0.7rem;
}
.footer-chip {
  display: inline-flex; align-items: center; gap: 0.2rem;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--line-bright);
  font-size: 0.65rem;
  white-space: nowrap;
  transition: border-color .2s, background .2s;
}
.footer-chip:hover {
  border-color: var(--accent-dim);
  background: var(--bg-hover);
}
/* The author display:inline-flex above outranks the UA [hidden] rule, so the
   offline/update chips must hide explicitly until their state is active. */
.footer-chip[hidden] { display: none; }

/* ---- trust status bar (data freshness / offline / update) ---- */
.trust-chip { font-size: 0.625rem; }
.trust-data { color: var(--muted); border-style: dashed; cursor: help; }
.trust-online { color: var(--warn); border-color: var(--warn); }
.trust-update { color: var(--cyan); border-color: var(--accent); }
.trust-reload {
  margin-left: 0.2rem; padding: 0.05rem 0.4rem;
  font: inherit; font-weight: 700; color: var(--cyan);
  background: transparent; border: 1px solid var(--accent-dim);
  border-radius: 999px; cursor: pointer;
}
.trust-reload:hover,
.trust-reload:focus-visible {
  background: var(--accent-dim); color: var(--text); outline: none;
}

/* ---- icons (scale with font via rem) ---- */
.icon { display: inline-flex; width: 1.375rem; height: 1.375rem; margin-right: 0.375rem; vertical-align: middle; align-items: center; justify-content: center; }
.icon img { width: 1.375rem; height: 1.375rem; object-fit: contain; border-radius: 2px; background: #1a1a2e; }
.icon-missing { background: transparent; }
.icon-badge { display: inline-flex; width: 1.375rem; height: 1.375rem; align-items: center; justify-content: center; border-radius: 2px; background: var(--accent); color: #fff; font-weight: 700; font-size: 0.6875rem; }
tr td:first-child { white-space: nowrap; }
.hint { font-size: 0.75rem; margin: 0 0 0.875rem; font-style: italic; color: var(--muted); }
.calc-help {
  margin: 0 0 0.875rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: color-mix(in srgb, var(--panel) 55%, transparent);
}
.calc-help summary {
  cursor: pointer;
  padding: 0.4rem 0.6rem;
  color: var(--muted);
  font-size: 0.6875rem;
  letter-spacing: 0.4px;
}
.calc-help summary:hover, .calc-help summary:focus-visible { color: var(--text); }
.calc-help .hint { padding: 0 0.6rem; margin-bottom: 0.6rem; }
/* Gear tab: stat guide — the five damage channels at a glance */
.gear-stat-guide { margin: 0; }
.gear-stat-guide .hint { font-style: normal; color: var(--muted); }
.gear-stat-guide .hint p { margin: 0.4rem 0; font-size: 0.6875rem; line-height: 1.45; }
.gear-stat-guide .hint p:first-child { margin-top: 0; }
.stat-guide-table { width: 100%; border-collapse: collapse; font-size: 0.6875rem; margin: 0.35rem 0; }
.stat-guide-table th, .stat-guide-table td { text-align: left; padding: 0.2rem 0.4rem; border-bottom: 1px solid var(--line); }
.stat-guide-table th { color: var(--accent); font-family: "Orbitron", monospace; font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.4px; }
.stat-guide-table td:first-child { font-weight: 700; color: var(--text); white-space: nowrap; }
.dest-input { width: 7rem !important; min-width: 7rem !important; }
.checkbox-label { display: inline-flex !important; flex-direction: row !important; align-items: center; gap: 5px; cursor: pointer; font-size: 0.6875rem; color: var(--muted); }
.checkbox-label input { accent-color: var(--accent); width: auto; padding: 0; }
.toggle-button {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 9rem; max-width: 100%;
  background: var(--panel); color: var(--muted);
  border: 1px solid var(--line); box-shadow: none;
  text-transform: none; letter-spacing: 0; white-space: normal;
  line-height: 1.25; text-align: center;
}
.toggle-button:hover { border-color: var(--accent-dim); color: var(--text); box-shadow: none; }
.toggle-button.active {
  border-color: var(--cyan); color: var(--cyan);
  background: color-mix(in srgb, var(--cyan) 12%, var(--panel));
  box-shadow: 0 0 8px color-mix(in srgb, var(--cyan) 24%, transparent);
}
.toggle-button.active:hover { border-color: var(--cyan); color: var(--cyan); }
.footer-credits { color: var(--muted); }
.footer-credits a { color: var(--cyan); text-decoration: none; }
.footer-credits a:hover { text-decoration: underline; }

/* player bar */
.playerbar {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 8px;
  padding: 0.5rem 1.25rem;
  background: var(--bg2);
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.player-label { color: var(--muted); font-size: 0.8rem; }
.playerbar select { background-color: var(--panel); border: 1px solid var(--line); padding: 0.25rem 1.25rem 0.25rem 0.5rem; font-size: 0.82rem; }
.playerbar button {
  background: linear-gradient(135deg, var(--accent), var(--purple));
  color: #fff; border: none; border-radius: 4px;
  padding: 0.3125rem 0.625rem; font-weight: 600; cursor: pointer;
  font-size: 0.75rem; letter-spacing: 1px; box-shadow: none;
}
.playerbar button:hover { box-shadow: var(--glow-pink); }
.player-active { color: var(--accent); font-size: 0.6875rem; margin-left: auto; text-shadow: 0 0 8px var(--accent); }

/* =====================================================================
   MATERIAL DASHBOARD — horizontal bar chart for acquire items
   ===================================================================== */
.dashboard {
  background: var(--panel2);
  border: 1px solid var(--line-bright);
  border-radius: 6px;
  padding: 0.875rem 1rem;
  margin-bottom: 0.875rem;
}
.dashboard-header {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.625rem;
}
.dashboard-title {
  font-weight: 700; color: var(--accent-bright);
  font-size: 0.75rem; text-transform: uppercase;
  letter-spacing: 1px;
  font-family: "Orbitron", "JetBrains Mono", monospace;
}
.dashboard-total { font-size: 0.75rem; color: var(--muted); }
.dashboard-total b { color: var(--warn); }

.mat-row {
  display: grid;
  grid-template-columns: minmax(6rem, 13rem) minmax(60px, 1fr) auto;
  align-items: center; gap: 0.6rem;
  padding: 0.25rem 0;
  font-size: 0.6875rem;
}
.mat-row + .mat-row { border-top: 1px solid rgba(255,255,255,.03); }
.mat-label {
  min-width: 0;
  display: flex; align-items: center; gap: 0.3rem;
}
.mat-name { min-width: 0; overflow-wrap: anywhere; }
.mat-label .icon { width: 1rem; height: 1rem; flex: 0 0 auto; }
.mat-label .icon img { width: 1rem; height: 1rem; }
.mat-bar-track {
  height: 8px;
  background: var(--bg); border-radius: 4px;
  overflow: hidden; position: relative;
  min-width: 60px;
}
.mat-bar-fill {
  height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, var(--warn), var(--accent));
  transition: width .4s ease;
  position: relative;
  overflow: hidden;
  /* Grow from zero on render. The width is set inline and the rows are rebuilt
     each time, so the transition above never had a start value to animate from
     — the bars just appeared. Seeing them extend makes the relative magnitudes
     land, which is the whole point of the chart. */
  animation: mat-bar-grow .45s cubic-bezier(.22,.9,.3,1) both;
}
@keyframes mat-bar-grow { from { width: 0 !important; } }
.mat-bar-fill.has-owned {
  background: linear-gradient(90deg, var(--cyan), var(--accent));
}
/* moving light sweep on the bar */
.mat-bar-fill::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  background-size: 200% 100%;
  animation: bar-shimmer 2.8s linear infinite;
}
@keyframes bar-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -100% 0; }
}
.mat-bar-fill::after {
  content: ''; position: absolute; right: 0; top: 0;
  width: 2px; height: 100%;
  background: var(--bg);
}
/* owned-coverage marker — thin cyan line along the bottom of the track */
.mat-bar-owned {
  position: absolute; left: 0; bottom: 0; height: 2px;
  background: var(--cyan);
  box-shadow: 0 0 6px var(--cyan);
  border-radius: 1px;
  pointer-events: none;
}
.mat-numbers {
  width: 6rem; min-width: 6rem; text-align: right;
  font-size: 0.625rem; color: var(--muted);
  white-space: nowrap;
}
.mat-numbers b { color: var(--text); }

/* ---- Mine site contribution mini-chart ---- */
.dashboard-sites {
  margin-top: 0.625rem; padding-top: 0.5rem;
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 0.375rem;
  font-size: 0.625rem;
}
.dashboard-sites .site-chip {
  display: flex; align-items: center; gap: 0.25rem;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 3px; padding: 0.125rem 0.5rem;
  color: var(--muted);
}
.dashboard-sites .site-chip .site-dot {
  width: 8px; height: 8px; border-radius: 50%;
  flex: 0 0 auto;
}
.dashboard-sites .site-chip b { color: var(--text); }

/* =====================================================================
   PLAN TOP — KPI STRIP + COST PANEL
   ===================================================================== */
.plan-top { margin-bottom: 0.75rem; }

/* compact KPI tiles — one per headline count, equal height, neon top edge */
.kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 0.65rem;
}
.kpi-tile {
  --kpi: var(--accent-bright);
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.2rem;
  padding: 0.65rem 0.5rem 0.55rem;
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  transition: border-color .2s, transform .15s;
}
.kpi-tile:hover { border-color: var(--kpi); transform: translateY(-1px); }
.kpi-tile::before {
  content: ''; position: absolute; top: 0; left: 12%; right: 12%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--kpi), transparent);
  opacity: .75;
}
.kpi-icon {
  font-size: 1.125rem; line-height: 1;
  color: var(--kpi);
  font-variant-emoji: text;
}
.kpi-value {
  font-family: "Orbitron", "JetBrains Mono", monospace;
  font-size: 1.625rem; font-weight: 700; line-height: 1.15;
  color: var(--kpi); font-variant-numeric: tabular-nums;
}
.kpi-label {
  font-size: 0.6875rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: 1px;
}
.kpi-detail { color: var(--text); font-size: 0.58rem; font-variant-numeric: tabular-nums; }
.kpi-acq { --kpi: var(--warn); }
.kpi-mat { --kpi: var(--cyan); }
.kpi-stp { --kpi: var(--purple); }
.kpi-spl { --kpi: var(--surplus); }

/* full-width cost panel with fees/materials split bar + breakdown */
.cost-panel {
  margin-top: 0.65rem;
  background: var(--panel2);
  border: 1px solid var(--line-bright);
  border-radius: 6px;
  padding: 0.6rem 0.75rem 0.5rem;
}
.cost-panel-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.cost-panel-title {
  font-family: "Orbitron", "JetBrains Mono", monospace;
  font-size: 0.8125rem; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--muted);
}
.cost-panel-total {
  font-family: "Orbitron", "JetBrains Mono", monospace;
  font-size: 1.5rem; font-weight: 700;
  color: var(--warn); font-variant-numeric: tabular-nums;
}
.cost-panel-unknown {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.75rem; font-weight: 400; color: var(--muted);
}
.cost-split { margin: 0.5rem 0 0.15rem; display: flex; flex-direction: column; gap: 0.28rem; }
.cost-split-bar {
  height: 6px; border-radius: 999px; overflow: hidden;
  background: var(--panel); display: flex;
}
.cost-split-seg.fees { background: linear-gradient(90deg, var(--accent-dim), var(--accent)); }
.cost-split-seg.mats { background: linear-gradient(90deg, var(--cyan-dim), var(--cyan)); }
.cost-split-legend {
  display: flex; justify-content: space-between; gap: 0.5rem;
  font-size: 0.75rem; color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* three headline figures — investment, cost/unit, net-to-guild/unit */
.cost-hero {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin: 0.4rem 0 0.35rem;
}
.cost-hero-block {
  display: flex; flex-direction: column; gap: 0.12rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.5rem 0.65rem 0.45rem;
}
.cost-hero-label {
  font-family: "Orbitron", "JetBrains Mono", monospace;
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--muted);
}
.cost-hero-value {
  font-family: "Orbitron", "JetBrains Mono", monospace;
  font-size: 1.25rem; font-weight: 700; line-height: 1.2;
  color: var(--fg); font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.cost-hero-invest .cost-hero-value { font-size: 1.5rem; color: var(--warn); }
.cost-hero-net .cost-hero-value { color: var(--ok); }
.cost-hero-sub {
  font-size: 0.625rem; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 767px) {
  .cost-hero { grid-template-columns: 1fr; }
}

/* per-unit pricing table — one row per final item the plan produces */
.unit-panel {
  margin-top: 0.65rem;
  background: var(--panel2);
  border: 1px solid var(--line-bright);
  border-radius: 6px;
  padding: 0.6rem 0.75rem 0.5rem;
}
.unit-head-note {
  font-size: 0.6875rem; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.unit-scroll { overflow-x: auto; margin-top: 0.4rem; }
.unit-table {
  width: 100%; border-collapse: collapse;
  font-size: 0.75rem; font-variant-numeric: tabular-nums;
}
.unit-table th {
  padding: 0.32rem 0.45rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.8px;
  text-transform: uppercase; color: var(--muted); white-space: nowrap;
}
.unit-table td {
  padding: 0.34rem 0.45rem;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.unit-table tbody tr:hover { background: var(--panel); }
.unit-table tbody tr:last-child td { border-bottom: none; }
.unit-table .up-item { display: flex; align-items: center; gap: 0.4rem; min-width: 11rem; }
.unit-table .up-num { text-align: right; font-weight: 600; }
.unit-table th.up-num { text-align: right; }
.unit-table .up-net { color: var(--ok); }
.unit-table .up-na { color: var(--muted); font-weight: 400; }
.unit-note {
  margin-top: 0.42rem; padding-top: 0.35rem;
  border-top: 1px solid var(--border);
  font-size: 0.6875rem; color: var(--muted); line-height: 1.55;
}

/* =====================================================================
   CALCULATOR PLAN
   ===================================================================== */
.card.plan { padding: 1rem; }
.plan-hero-note {
  display: flex; align-items: baseline; gap: 0.4rem;
  font-size: 0.75rem; color: var(--muted);
  padding-bottom: 0.6rem; margin-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}
.plan-hero-note::before { content: '▸'; color: var(--accent); text-shadow: 0 0 6px rgba(255,45,149,.5); }
.plan-hero-note > span { min-width: 0; }
.single-head .plan-summary-qty { white-space: nowrap; flex-shrink: 0; }
.content-link, .content-link:visited { color: var(--text); text-decoration: underline; text-underline-offset: .2em; }
.content-link:hover { text-decoration-thickness: .15em; }
.content-link:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
.plan-hero-note b { color: var(--text); font-weight: 600; }
.plan-hero-note.has-stock b { color: var(--cyan); }

/* ---- staggered fade-in ---- */
@keyframes card-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Entrance animation belongs to plan BUILDS, not to every internal re-render:
   it used to fire on .section too, so toggling a section folded, ticking a
   checkbox, or any in-place refresh re-faded the whole checklist. Scope it to
   the containers that are replaced wholesale by a calculation, and pause it
   for reduced-motion users (the keyframes above stay for the hover states). */
.calc-result .flow-card, .calc-result .recipe-card, .calc-result .kpi-tile,
.calc-result .cost-panel, .calc-multi .flow-card, .calc-multi .recipe-card,
.calc-multi .kpi-tile, .calc-multi .cost-panel {
  animation: card-in .3s ease both;
}
.stagger-0 { animation-delay: 0s; }
.stagger-1 { animation-delay: .04s; }
.stagger-2 { animation-delay: .08s; }
.stagger-3 { animation-delay: .12s; }
.stagger-4 { animation-delay: .16s; }
.stagger-5 { animation-delay: .20s; }
.stagger-6 { animation-delay: .24s; }
.stagger-7 { animation-delay: .28s; }
.stagger-8 { animation-delay: .32s; }
.stagger-9 { animation-delay: .36s; }

/* ═══════════════════════════════════════════════════════════════════════
   NEON CYBERPUNK PLAN SECTIONS
   ═══════════════════════════════════════════════════════════════════════ */

/* timeline connector — glowing vertical line linking section badges */
.section {
  display: flex; gap: 0.875rem; margin-top: 1.25rem; align-items: flex-start;
  position: relative;
}
.section::before {
  content: '';
  position: absolute; left: 0.8125rem; top: 2rem; bottom: -1.25rem;
  width: 2px;
  background: linear-gradient(180deg, var(--cyan-dim), var(--accent-dim), var(--purple-dim));
  opacity: 0.4;
  z-index: 1;
  pointer-events: none;
}
.section:last-of-type::before { display: none; }

/* section badges — larger, glowing, animated */
.section-badge {
  flex: 0 0 auto; width: 2rem; height: 2rem; border-radius: 5px;
  display: grid; place-items: center;
  font-weight: 700; font-size: 0.875rem;
  font-family: "Orbitron", "JetBrains Mono", monospace;
  color: #fff;
  position: relative; z-index: 2;
  transition: opacity .25s, filter .25s;
}
/* Only step 1 pulses, and only until it's done — four badges throbbing at once
   was constant motion carrying no information. Now the pulse means one thing:
   "start here". */
.section.step-1 .section-badge { animation: badge-pulse 3s ease-in-out infinite; }
.section.done .section-badge { animation: none; opacity: .45; filter: saturate(.4); }
/* a finished step should recede rather than compete with what's left to do */
.section.done .section-title { opacity: .6; }
.section.flash-target { border-radius: 8px; }
@keyframes badge-pulse {
  0%, 100% { box-shadow: 0 0 8px currentColor; }
  50%      { box-shadow: 0 0 18px currentColor, 0 0 30px currentColor; }
}
.section.step-1 .section-badge {
  background: var(--cyan); color: #000;
  box-shadow: 0 0 10px #00f0ff66, 0 0 20px #00f0ff22;
}
.section.step-2 .section-badge {
  background: var(--accent);
  box-shadow: 0 0 10px #ff2d9566, 0 0 20px #ff2d9522;
}
.section.step-3 .section-badge {
  background: var(--purple);
  box-shadow: 0 0 10px #8b2cf566, 0 0 20px #8b2cf522;
}
.section.step-4 .section-badge {
  background: linear-gradient(135deg, var(--accent), var(--purple));
  box-shadow: 0 0 14px #ff2d9566, 0 0 24px #8b2cf544;
}

.section-body { flex: 1 1 auto; min-width: 0; }
.section-content.collapsed { display: none; }

/* section titles — neon accented */
.section-title {
  font-family: "Orbitron", "JetBrains Mono", monospace;
  font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: 0.375rem;
  margin-bottom: 0.625rem;
  transition: color .2s, background .2s;
  padding: 0.25rem 0.375rem; border-radius: 4px;
}
.section-title:hover { background: rgba(0,240,255,0.04); }
.section.step-1 .section-title { color: var(--cyan); }
.section.step-2 .section-title { color: var(--accent-bright); }
.section.step-3 .section-title { color: var(--purple); }
.section.step-4 .section-title { color: var(--accent-bright); }
.section-title::after {
  content: '▾'; font-size: 0.625rem; transition: transform .2s;
}
.section-title.collapsed::after { transform: rotate(-90deg); }

/* ═══════════════════════════════════════════════════════════════════════
   NEON FLOW CARDS (transport & acquire)
   ═══════════════════════════════════════════════════════════════════════ */

.flow-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: 0.5rem;
}
.flow-card {
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 6px; padding: 0.625rem 0.75rem;
  transition: border-color .2s, box-shadow .2s, transform .15s;
  position: relative; min-width: 0; overflow: visible;
}
/* NOTE: previously a decorative inset:0 magenta sheen (rgba(255,45,149,.03)).
   iOS Safari's full-page screenshot renders low-alpha gradient overlays on
   overflow:hidden elements as fully OPAQUE, so this pseudo painted a solid
   black/magenta diagonal over the card content in exported screenshots. The
   sheen was imperceptible on-screen (3% alpha), so it's removed rather than
   worked around. Do not reintroduce an inset overlay here. */
.flow-card.move {
  border-left: 2px solid var(--cyan);
  box-shadow: inset 2px 0 6px -2px rgba(0,240,255,.15);
  display: flex; align-items: flex-start; min-width: 0;
}
.flow-card.get {
  border-left: 2px solid var(--accent-dim);
  box-shadow: inset 2px 0 6px -2px rgba(255,45,149,.12);
  display: flex; align-items: flex-start; gap: 0.5rem; min-width: 0;
}
.flow-card-body { flex: 1 1 auto; min-width: 0; }
.flow-card.get .transport-check { margin-top: 0.15rem; }
/* obtain checkboxes use the accent (pink) rather than transport cyan */
.flow-card.get .transport-check:hover .checkmark {
  border-color: var(--accent); box-shadow: 0 0 6px rgba(255,45,149,.3);
}
.flow-card.get .transport-check input:checked + .checkmark {
  background: var(--accent); border-color: var(--accent);
}
.flow-card.get .transport-check input:checked + .checkmark::after { color: #fff; }

/* selectable mine sites — pick where to gather each material (cost varies by
   colony owner / tax rate, which only the player knows) */
.mine-picks {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem;
  margin-top: 0.35rem;
}
.mine-picks-label {
  font-size: 0.625rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.5px; margin-right: 0.1rem;
}
.mine-pick {
  font-family: inherit; font-size: 0.6875rem; line-height: 1.2;
  background: var(--panel2); color: var(--fg-dim);
  border: 1px solid var(--line); border-radius: 4px;
  padding: 0.15rem 0.45rem; cursor: pointer;
  transition: border-color .12s, color .12s, background .12s, box-shadow .12s;
}
.mine-pick:hover { border-color: var(--accent-dim); color: var(--text); box-shadow: none; transform: none; }
.mine-pick.active {
  border-color: var(--accent); color: var(--accent-bright);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  box-shadow: 0 0 6px rgba(255,45,149,.25);
  cursor: default;
}
.mine-pick.active:focus-visible,
.mine-pick.active:hover { border-color: var(--accent); }
.mine-pick:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.obtain-batch.progress-run {
  display: block; margin-top: 0.4rem;
  padding: .35rem .6rem; border: 1px solid var(--accent-dim);
  border-radius: 4px; background: rgba(255,45,149,.12);
  color: var(--accent-bright); font-size: .6875rem;
  font-weight: 700; cursor: pointer;
}
.obtain-batch.progress-run:hover {
  border-color: var(--accent); background: rgba(255,45,149,.2);
  box-shadow: 0 0 10px rgba(255,45,149,.18);
}
.flow-card.get.done .mine-picks { opacity: 0.6; }

/* source picker on Move cards — same idea as "mine at", cyan to match the
   transport section rather than the pink used for Obtain */
.src-picks {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem;
  margin-top: 0.35rem;
}
.src-picks-label {
  font-size: 0.625rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.5px; margin-right: 0.1rem;
}
.src-pick {
  font-family: inherit; font-size: 0.6875rem; line-height: 1.2;
  background: var(--panel2); color: var(--fg-dim);
  border: 1px solid var(--line); border-radius: 4px;
  padding: 0.15rem 0.45rem; cursor: pointer;
  text-transform: none; letter-spacing: 0; font-weight: 500; box-shadow: none;
  transition: border-color .12s, color .12s, background .12s;
}
.src-pick:hover { border-color: var(--cyan); color: var(--text); box-shadow: none; transform: none; }
/* currently being drawn from (may be more than one on a split) */
.src-pick.using {
  border-color: var(--cyan); color: var(--cyan);
  background: color-mix(in srgb, var(--cyan) 14%, transparent);
  font-weight: 600;
}
/* explicitly pinned by the player — outranks "using" visually */
.src-pick.pinned {
  border-color: var(--accent); color: var(--accent-bright);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  font-weight: 700;
}
.src-pin { margin-right: 0.15rem; font-size: 0.625rem; }
.src-pick .src-pick-q { opacity: .65; font-size: 0.625rem; }
.src-pick:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; }
.flow-card.move.done .src-picks { opacity: 0.6; }

/* split-stack breakdown — "60 Andromeda + 40 Aurelia = 100" */
.split-note {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem;
  margin-top: 0.35rem; font-size: 0.6875rem; color: var(--muted);
}
.split-badge {
  font-size: 0.5625rem; font-weight: 700; letter-spacing: 0.5px;
  text-transform: uppercase; color: var(--cyan);
  border: 1px solid var(--cyan-dim); border-radius: 3px; padding: 0 0.3rem;
}
.split-part { color: var(--muted); font-variant-numeric: tabular-nums; }
/* the portion coming from THIS colony group */
.split-part.here { color: var(--text); font-weight: 700; }
.split-part.here .split-where { color: var(--cyan); }
.split-where { opacity: .8; }
.split-plus { color: var(--muted); opacity: .6; }
.split-total { color: var(--text); font-weight: 600; margin-left: 0.1rem; }
.flow-card.move.split { border-left-color: var(--cyan-dim); }
.transport-split-note { color: var(--cyan); font-weight: 400; }
/* Move cards now stack the chip above the picker, so top-align the checkbox */
.flow-card.move { align-items: flex-start; }
.flow-card.move .flow-card-body { flex: 1 1 auto; min-width: 0; }
.flow-card.move .transport-check { margin-top: 0.15rem; }

/* The grouped cargo transfer is the next action players most often miss. Keep
   it visually louder only while it is the current objective; future cargo
   moves should remain quiet until mining/refining work is complete. */
.flow-card.move-batch-action.current-objective:not(.done) {
  border: 2px solid var(--cyan);
  background: color-mix(in srgb, var(--cyan) 10%, var(--panel2));
  box-shadow: 0 0 14px rgba(0,240,255,.2), inset 3px 0 8px -3px rgba(0,240,255,.28);
}
.flow-card.move-batch-action.current-objective:not(.done) .flow-name {
  color: var(--text);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .01em;
}
.flow-card.move-batch-action.current-objective:not(.done) .colony-work-move-items {
  font-size: .8rem;
  color: var(--text);
}
.move-all-cargo-btn {
  display: block; width: 100%; margin-top: .55rem; min-height: 2.2rem;
  padding: .45rem .65rem; border: 1px solid var(--cyan);
  border-radius: 5px; background: color-mix(in srgb, var(--cyan) 12%, var(--panel));
  color: var(--text); font-family: inherit; font-size: .78rem; font-weight: 700; line-height: 1.2; cursor: pointer;
  text-align: center; transition: background .15s, border-color .15s, box-shadow .15s;
}
.move-all-cargo-btn:hover:not(:disabled),
.move-all-cargo-btn:focus-visible {
  border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--panel));
  box-shadow: 0 0 10px rgba(0,240,255,.2);
}
.move-all-cargo-btn.done,
.move-all-cargo-btn:disabled {
  border-color: var(--good); background: color-mix(in srgb, var(--good) 12%, var(--panel));
  color: var(--good); cursor: default; opacity: .85;
}

.flow-card:hover {
  border-color: var(--accent-dim);
  transform: translateY(-1px);
  box-shadow: 0 2px 12px rgba(255,45,149,.1);
}

/* ═══════════════════════════════════════════════════════════════════════
   NEON TRANSPORT FLOW
   ═══════════════════════════════════════════════════════════════════════ */

.transport-flow {
  display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap;
  margin: 0.375rem 0 0.125rem;
}
.transport-hop {
  display: inline-flex; align-items: center; gap: 0.2rem;
  background: rgba(139,44,245,.08); border: 1px solid rgba(139,44,245,.25);
  border-radius: 4px; padding: 0.15rem 0.4rem;
  font-size: 0.6875rem;
  transition: border-color .2s;
}
.transport-hop:hover { border-color: var(--purple); }
.transport-hop .tag.src { background: transparent; color: var(--purple); font-weight: 600; }
.transport-qty { color: var(--cyan); font-weight: 700; margin: 0 0.125rem; }
.transport-flow .flow-arrow {
  color: var(--accent); font-size: 0.9375rem; margin: 0 0.125rem;
  text-shadow: 0 0 6px rgba(255,45,149,.4);
}
.transport-flow .tag.dest {
  background: var(--accent); color: #fff; font-weight: 600;
  border-radius: 4px; padding: 0.15rem 0.45rem; font-size: 0.6875rem;
  box-shadow: 0 0 8px rgba(255,45,149,.3);
}

/* ═══════════════════════════════════════════════════════════════════════
   TRANSPORT GROUPS (colony-grouped transfers)
   ═══════════════════════════════════════════════════════════════════════ */

.transport-summary {
  font-size: 0.8125rem; color: var(--fg-dim); margin-bottom: 0.75rem;
  font-weight: 600;
}

.transport-group {
  margin-top: 0.75rem;
  margin-bottom: 1rem;
}
.colony-work-summary {
  color: var(--muted); font-size: 0.75rem; margin-bottom: 0.65rem;
}
.colony-work-group {
  margin-top: 0.7rem; border: 1px solid var(--line); border-radius: 8px;
  background: color-mix(in srgb, var(--panel2) 72%, transparent);
  overflow: hidden;
}
.colony-work-head {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--cyan) 7%, transparent);
}
.colony-work-toggle { cursor: pointer; }
.colony-work-toggle:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; }
.colony-work-group.complete:not(.expanded) .colony-work-list { display: none; }
.colony-work-group.complete:not(.expanded) .colony-work-head {
  border-bottom: 0;
  background: color-mix(in srgb, var(--good) 9%, transparent);
}
.colony-work-group.complete:not(.expanded) .colony-work-head::after {
  content: '✓ complete · click to reopen';
  margin-left: auto; color: var(--good); font-size: 0.625rem;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.colony-work-count {
  margin-left: auto; color: var(--muted); font-size: 0.6875rem;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.colony-work-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 0.5rem; padding: 0.55rem;
}
.colony-work-action { min-width: 0; }
.colony-work-refine-card { min-width: 0; }
.colony-work-refine-card > .recipe-card { width: 100%; margin-bottom: 0; }
.colony-work-action.recipe-card { padding: 0.65rem 0.75rem; }
.colony-work-action .step-math { display: block; margin-top: 0.45rem; }
.colony-work-action .flow-need { overflow-wrap: anywhere; }
.colony-work-action .mine-progress { margin-top: 0.45rem; }
.colony-work-move-items {
  display: flex; flex-direction: column; gap: 0.25rem;
  margin-top: 0.45rem; color: var(--fg-dim); font-size: 0.6875rem;
}
.colony-work-move-item { overflow-wrap: anywhere; }

.transport-group-head {
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0.375rem 0.625rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 5px;
  margin-bottom: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 600;
}

.transport-group-icon { font-size: 1rem; }

.transport-group-colony {
  color: var(--cyan);
  font-family: "Orbitron", "JetBrains Mono", monospace;
  font-size: 0.75rem;
  letter-spacing: 0.5px;
}

.transport-group-arrow {
  color: var(--accent);
  font-size: 0.9375rem;
  text-shadow: 0 0 6px rgba(255,45,149,.4);
}

.transport-group-count {
  margin-left: auto;
  font-size: 0.6875rem;
  color: var(--fg-dim);
  background: var(--panel2);
  padding: 0.125rem 0.5rem;
  border-radius: 3px;
}

/* ── Transfer checkboxes ── */

.transport-check {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem; height: 1.25rem;
  flex-shrink: 0;
  cursor: pointer;
  margin-right: 0.5rem;
}

.transport-check input[type="checkbox"] {
  position: absolute; opacity: 0; width: 0; height: 0;
}

.transport-check .checkmark {
  width: 1.1rem; height: 1.1rem;
  border: 2px solid var(--line);
  border-radius: 3px;
  display: grid; place-items: center;
  transition: all 0.15s;
  background: var(--panel);
}

.transport-check:hover .checkmark {
  border-color: var(--cyan);
  box-shadow: 0 0 6px rgba(0,240,255,.3);
}

.transport-check input:checked + .checkmark {
  background: var(--cyan);
  border-color: var(--cyan);
  /* brief pop so a tick reads as registered — these boxes are the one thing you
     click repeatedly while working through a plan */
  animation: tick-pop .22s ease-out;
}
@keyframes tick-pop {
  0%   { transform: scale(.65); }
  55%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}

.transport-check input:checked + .checkmark::after {
  content: '✓';
  color: #000;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
}

/* One next action leads the itinerary; completed cards stay deliberately quiet. */
.flow-card.current-objective,
.recipe-card.current-objective {
  position: relative;
  z-index: 1;
  border-width: 2px;
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--panel2));
  box-shadow: 0 0 16px rgba(255,45,149,.2);
  transform: scale(1.015);
}
.flow-card.current-objective .flow-name,
.recipe-card.current-objective .rc-cb-label {
  color: var(--text);
  font-size: 1.05rem;
  font-weight: 800;
}
.flow-card.current-objective::before,
.recipe-card.current-objective::before {
  content: 'NEXT OBJECTIVE';
  position: absolute;
  top: -0.55rem;
  right: .65rem;
  left: auto;
  bottom: auto;
  width: max-content;
  max-width: calc(100% - 1.3rem);
  padding: .12rem .35rem;
  border-radius: 3px;
  border: 1px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, var(--panel));
  color: var(--accent-bright);
  font-size: .55rem;
  font-weight: 900;
  letter-spacing: .08em;
  line-height: 1.2;
  white-space: nowrap;
  z-index: 2;
}
.recipe-card.refine.current-objective::before {
  border-color: var(--purple);
  background: color-mix(in srgb, var(--purple) 16%, var(--panel));
  color: var(--purple);
}
@media (prefers-reduced-motion: reduce) {
  .flow-card.current-objective,
  .recipe-card.current-objective { transform: none; }
}

@media (max-width: 767px) {
  .flow-card.current-objective,
  .recipe-card.current-objective { transform: none; }
}



.flow-card.move.done,
.flow-card.get.done {
  opacity: 0.62;
  border-left-color: var(--fg-dim);
  box-shadow: none;
  text-decoration: none;
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
  align-items: center;
}

/* Keep the item chip, but fold the completed row's secondary details. */
.flow-card.move.done .split-note,
.flow-card.move.done .src-picks,
.flow-card.get.done .flow-need,
.flow-card.get.done .mine-picks,
.flow-card.get.done .mine-progress {
  display: none;
}
.flow-card.move.done .flow-card-body,
.flow-card.get.done .flow-card-body {
  display: flex;
  align-items: center;
}
.flow-card.move-batch-action.done .flow-card-body {
  display: block;
}
.flow-card.done .flow-chip { margin: 0; }

.flow-card.move.done .flow-name,
.flow-card.get.done .flow-name {
  text-decoration: line-through;
  text-decoration-color: var(--fg-dim);
}

.flow-card.move.done:hover,
.flow-card.get.done:hover {
  opacity: 0.75;
  transform: none;
  box-shadow: none;
}

/* Partial quantity indicator (item split across multiple colonies) */

.flow-qty-partial {
  font-size: 0.6875rem;
  color: var(--fg-dim);
  font-weight: 400;
}

/* ═══════════════════════════════════════════════════════════════════════
   NEON RECIPE CARDS (produce / manufacture)
   ═══════════════════════════════════════════════════════════════════════ */

.recipe-card {
  background: var(--panel2); border: 1px solid var(--line);
  border-radius: 6px; padding: 0.75rem; margin-bottom: 0.625rem;
  border-left: 3px solid var(--accent);
  transition: border-color .2s, box-shadow .2s, transform .15s;
  position: relative; min-width: 0;
}
.recipe-card::before {
  content: ''; position: absolute; top: 0; left: 0; bottom: 0;
  width: 3px; border-radius: 3px 0 0 3px;
  transition: box-shadow .2s;
}
.recipe-card.refine {
  border-left-color: var(--purple);
  box-shadow: inset 3px 0 8px -3px rgba(139,44,245,.2);
}
.recipe-card.refine::before { box-shadow: 0 0 10px rgba(139,44,245,.3); }
.recipe-card.manufacture {
  border-left-color: var(--accent);
  box-shadow: inset 3px 0 8px -3px rgba(255,45,149,.2);
}
.recipe-card.manufacture::before { box-shadow: 0 0 10px rgba(255,45,149,.3); }
.section[data-section="manufacture"] .section-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: .75rem;
}
.section[data-section="manufacture"] .recipe-card { margin-bottom: 0; }
.recipe-card.compact-manufacture .recipe-flow {
  grid-template-columns: minmax(0, 1fr);
  gap: .45rem;
}
.recipe-card.compact-manufacture .flow-inputs { width: 100%; }
.recipe-card.compact-manufacture .flow-arrow.big { transform: rotate(90deg); }
.recipe-card.compact-manufacture .flow-output { width: 100%; }
.recipe-card:hover {
  border-color: var(--accent-dim);
  transform: translateY(-1px);
  box-shadow: 0 2px 16px rgba(255,45,149,.12);
}
.recipe-card.refine:hover { box-shadow: inset 3px 0 8px -3px rgba(139,44,245,.3), 0 2px 14px rgba(139,44,245,.1); }
.recipe-card.manufacture:hover { box-shadow: inset 3px 0 8px -3px rgba(255,45,149,.3), 0 2px 14px rgba(255,45,149,.1); }

/* Produce step checkbox — matches transport/obtain checkmark style */
.rc-cb-row { display: flex; align-items: flex-start; gap: 0.4rem; margin-bottom: 0.35rem; min-width: 0; }
.rc-cb-row .transport-check { margin-top: 0; }
.rc-cb-label { min-width: 0; color: var(--text); font-weight: 600; overflow-wrap: anywhere; word-break: break-word; }
.recipe-card.done { opacity: 0.55; }
.recipe-card.done .rc-cb-label { text-decoration: line-through; color: var(--muted); }
/* A fully recorded step keeps its checkbox and reset control, but folds the
   recipe flow away so the remaining work stays easy to scan. */
.recipe-card.progress-complete { padding: 0.55rem 0.75rem; }
.recipe-card.progress-complete .rc-cb-row { margin-bottom: 0; }
.recipe-card.progress-complete .recipe-flow { display: none; }
.recipe-card.progress-complete .production-progress { margin-top: 0.25rem; padding: 0.35rem 0.5rem; }
.recipe-card.progress-complete .production-progress-track,
.recipe-card.progress-complete .production-progress-note { display: none; }
.recipe-card.progress-complete .production-progress-actions { margin-top: 0.25rem; }
/* Produce checkmarks use pink accent (matching obtain section) */
.recipe-card .transport-check input:checked + .checkmark { background: var(--accent); border-color: var(--accent); }
.recipe-card .transport-check input:checked + .checkmark::after { color: #fff; }
.recipe-card .transport-check:hover .checkmark { border-color: var(--accent); box-shadow: 0 0 6px rgba(255,45,149,.3); }
/* ═══════════════════════════════════════════════════════════════════════
   PLAN SUMMARY BAR — glassmorphism
   ═══════════════════════════════════════════════════════════════════════ */

.single-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "kicker main route" "note note note";
  align-items: center;
  gap: .35rem .75rem;
  padding: .7rem .9rem;
  margin-bottom: .75rem;
  border: 1px solid var(--line-bright);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  background: linear-gradient(105deg, color-mix(in srgb, var(--accent) 14%, var(--panel2)), var(--panel));
  box-shadow: 0 0 20px color-mix(in srgb, var(--accent) 12%, transparent);
}
.single-head-kicker { grid-area: kicker; color: var(--accent-bright); font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.single-head-main { grid-area: main; display: flex; align-items: center; gap: .6rem; min-width: 0; }
.single-head-main .plan-summary-icon { width: 2.25rem; height: 2.25rem; }
.single-head-main .plan-summary-title { font-size: .95rem; }
.single-head-route { grid-area: route; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .35rem; }
.single-head-badge { padding: .3rem .5rem; border: 1px solid color-mix(in srgb, var(--accent) 60%, var(--line)); border-radius: 4px; background: color-mix(in srgb, var(--accent) 12%, var(--panel)); color: var(--text); font-size: .62rem; font-weight: 700; }
.single-head-badge.refine { border-color: color-mix(in srgb, var(--purple) 70%, var(--line)); color: var(--accent-bright); }
.single-head-note { grid-area: note; color: var(--muted); font-size: .62rem; line-height: 1.35; }
@media (max-width: 760px) {
  .single-head { grid-template-columns: 1fr; grid-template-areas: "kicker" "main" "route" "note"; }
  .single-head-route { justify-content: flex-start; }
}

.prod-code {
  display: flex; flex-wrap: wrap; gap: .55rem 1rem; align-items: center;
  margin: .7rem 0; padding: .65rem .8rem;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
  border-radius: 6px; background: color-mix(in srgb, var(--accent) 8%, var(--panel));
}
.prod-code-entry { display: inline-flex; align-items: center; gap: .25rem; }
.prod-code-label { color: var(--muted); font-weight: 700; }
.prod-code-val { letter-spacing: .08em; }

.plan-summary {
  position: sticky; top: 0; z-index: 10;
  /* Theme tokens, not a hardcoded dark rgba(): light/faction themes kept a
     dark glass bar on a light page and vice versa. */
  background: color-mix(in srgb, var(--bg2) 92%, transparent);
  border: 1px solid var(--line-bright);
  border-radius: 8px;
  padding: 0.625rem 0.875rem;
  margin-bottom: 0.75rem;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 0.5rem;
  backdrop-filter: blur(12px);
  box-shadow: 0 2px 20px rgba(0,0,0,.4), 0 0 0 1px rgba(255,45,149,.08);
}
.plan-summary-main {
  display: flex; align-items: center; gap: 0.6rem;
  font-weight: 700; font-size: 0.9375rem;
  flex-wrap: wrap;
}
.plan-summary-icon {
  width: 2.5rem; height: 2.5rem; flex: 0 0 auto;
  display: grid; place-items: center;
  background: var(--panel2);
  border: 1px solid var(--accent-dim);
  border-radius: 6px;
  box-shadow: var(--glow-pink);
}
.plan-summary-icon .icon { width: 1.75rem; height: 1.75rem; }
.plan-summary-icon .icon img { width: 1.75rem; height: 1.75rem; }
.plan-summary-title {
  color: var(--text);
  font-family: "Orbitron", "JetBrains Mono", monospace;
  font-size: 0.875rem; letter-spacing: 0.5px; text-transform: uppercase;
}
.plan-summary-qty {
  color: var(--accent-bright);
  font-family: "Orbitron", "JetBrains Mono", monospace;
  font-size: 0.875rem;
  text-shadow: 0 0 8px rgba(255,45,149,.4);
}
.plan-summary-arrow { color: var(--accent); font-size: 1rem; text-shadow: 0 0 6px rgba(255,45,149,.5); }
.plan-summary-dest {
  color: var(--cyan); font-weight: 600; font-size: 0.75rem; letter-spacing: 0.5px;
  border: 1px solid rgba(0,240,255,.3); border-radius: 999px;
  padding: 0.12rem 0.6rem;
  background: rgba(0,240,255,.05);
}
/* thin neon accent along the top edge of the summary bar */
.plan-summary::before {
  content: '';
  position: absolute; top: 0; left: 10px; right: 10px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), var(--cyan), transparent);
  opacity: .7;
  pointer-events: none;
}

/* ---- plan action buttons (copy list / share link) ---- */
.plan-actions {
  display: flex; gap: 0.5rem; margin-top: 0.5rem; flex-wrap: wrap;
}
.plan-actions button {
  flex: 1 1 12rem;
  background: transparent; color: var(--muted);
  border: 1px solid var(--line); border-radius: 6px;
  padding: 0.5rem 0.75rem; cursor: pointer;
  font-size: 0.6875rem; letter-spacing: 1px; box-shadow: none;
  transition: color .15s, border-color .15s, box-shadow .15s;
}
.plan-actions button:hover {
  color: var(--text); border-color: var(--accent-dim);
  box-shadow: 0 0 8px #ff2d9522; transform: none;
}

/* ---- recent calculations row ---- */
.recent-row {
  display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap;
  margin: -0.25rem 0 0.875rem;
}
.recent-label {
  font-size: 0.625rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: 1.5px;
  font-family: "Orbitron", "JetBrains Mono", monospace;
}
.recent-chip {
  display: inline-flex; align-items: center; gap: 0.3rem;
  background: var(--panel2); color: var(--text);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 0.2rem 0.625rem 0.2rem 0.3rem;
  font-size: 0.6875rem; font-family: inherit;
  text-transform: none; letter-spacing: normal; font-weight: normal;
  cursor: pointer; box-shadow: none;
  transition: border-color .15s, box-shadow .15s, transform .12s;
}
.recent-chip .icon, .recent-chip .icon img { width: 1.125rem; height: 1.125rem; }
.recent-chip .recent-q { color: var(--cyan); font-weight: 700; }
.recent-chip:hover {
  border-color: var(--cyan);
  box-shadow: 0 0 8px #00f0ff33;
  transform: translateY(-1px);
}
.recent-chip:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; }

/* ---- saved production plans ---- */
.saved-plans { margin: 0.5rem 0; }
.saved-plans-head { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); margin-bottom: 0.35rem; }
.saved-plans-list { display: flex; flex-direction: column; gap: 0.35rem; }
.saved-plan { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 0.4rem 0.6rem; }
.sp-info { display: flex; flex-direction: column; min-width: 0; }
.sp-name { font-weight: 600; font-size: 0.8rem; }
.sp-meta { font-size: 0.68rem; color: var(--muted); }
.sp-actions { display: flex; gap: 0.25rem; flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════════════════
   STAT CARDS & DASHBOARD
   ═══════════════════════════════════════════════════════════════════════ */

.stat-cards { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.stat-card {
  /* rem so the card tracks its own (scaling) number/label text */
  flex: 1 1 6rem; min-width: 5.5rem;
  background: var(--panel2); border: 1px solid var(--line);
  border-radius: 6px; padding: 0.5rem 0.625rem;
  text-align: center; transition: border-color .2s;
}
.stat-card:hover { border-color: var(--accent-dim); }
.stat-card .stat-num {
  font-size: 1.25rem; font-weight: 700;
  font-family: "Orbitron", "JetBrains Mono", monospace;
  color: var(--accent-bright);
}
.stat-card .stat-label {
  font-size: 0.5625rem; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--muted); margin-top: 0.125rem;
}
.stat-card .stat-icon { font-size: 1.1rem; display: block; margin-bottom: 0.125rem; }

.plan { border: 1px solid var(--line-bright); border-radius: 8px; padding: 1rem; }
.plan .shortfall { color: var(--accent-bright); font-size: 0.8125rem; margin-bottom: 0.5rem; }
.plan .ok { color: var(--cyan); font-size: 0.8125rem; margin-bottom: 0.5rem; }

/* apply plan button — neon glow */
.apply-plan {
  display: block; width: 100%; margin-top: 1rem;
  background: linear-gradient(135deg, var(--cyan-dim), var(--accent), var(--purple));
  color: #fff; border: none; border-radius: 6px;
  padding: 0.75rem; font-weight: 700; font-size: 0.875rem;
  cursor: pointer; text-align: center;
  box-shadow: 0 0 16px rgba(255,45,149,.25), 0 2px 8px rgba(0,0,0,.3);
  transition: box-shadow .2s, transform .15s;
}
.apply-plan:hover {
  box-shadow: 0 0 24px rgba(255,45,149,.4), 0 4px 12px rgba(0,0,0,.4);
  transform: translateY(-1px);
}
.apply-plan.applied { opacity: .6; pointer-events: none; }
.apply-plan-note {
  margin-top: .85rem;
  padding: .6rem .7rem;
  border-left: 3px solid var(--cyan);
  border-radius: 4px;
  background: color-mix(in srgb, var(--cyan) 7%, var(--panel2));
  color: var(--fg-dim);
  font-size: .68rem;
  line-height: 1.5;
}
.apply-plan.ready-to-apply {
  border: 2px solid var(--cyan);
  box-shadow: 0 0 18px rgba(0,240,255,.45), 0 0 34px rgba(255,45,149,.3), 0 2px 10px rgba(0,0,0,.35);
  animation: apply-plan-ready 1.6s ease-in-out infinite;
}
@keyframes apply-plan-ready {
  0%, 100% { transform: translateY(0); filter: brightness(1); }
  50% { transform: translateY(-2px); filter: brightness(1.2); }
}
@media (prefers-reduced-motion: reduce) {
  .apply-plan.ready-to-apply { animation: none; filter: brightness(1.15); }
}

/* internal weapon id shown beside the real name, so the two can be tied back
   together when checking data */
.wpn-id {
  margin-left: 0.4rem; font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.625rem; color: var(--muted); opacity: .7;
}
.wpn-id.unnamed { color: var(--warn); opacity: 1; font-style: italic; }

/* ── Player-facing batch progress tracker ── */
.production-progress {
  width: 100%; margin-top: 0.6rem; padding: 0.55rem 0.65rem;
  background: rgba(139,44,245,.08); border: 1px solid var(--line);
  border-radius: 5px; text-align: left;
}
.production-progress.complete {
  border-color: var(--ok); background: rgba(34,197,94,.08);
}
.production-progress-head {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.35rem 0.55rem;
  font-size: 0.6875rem;
}
.production-progress-title {
  color: var(--purple); font-weight: 700; letter-spacing: .6px;
  text-transform: uppercase;
}
.production-progress-count { color: var(--text); }
.production-progress-remaining { min-width: 0; margin-left: auto; color: var(--accent-bright); font-weight: 700; overflow-wrap: anywhere; }
.production-progress.complete .production-progress-remaining { color: var(--ok); }
.production-progress-track {
  height: 6px; margin: 0.4rem 0; overflow: hidden;
  background: var(--panel); border: 1px solid var(--line); border-radius: 999px;
}
.production-progress-fill {
  display: block; height: 100%; min-width: 0;
  background: linear-gradient(90deg, var(--purple), var(--accent));
  border-radius: inherit; transition: width .2s ease;
}
.production-progress.complete .production-progress-fill { background: var(--ok); }
.production-progress-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; }
.production-progress .progress-run {
  padding: .35rem .6rem; border: 1px solid var(--accent-dim);
  border-radius: 4px; background: rgba(255,45,149,.12); color: var(--accent-bright);
  font-size: .6875rem; font-weight: 700; cursor: pointer;
}
.production-progress .progress-run:hover:not(:disabled) {
  border-color: var(--accent); background: rgba(255,45,149,.2);
  box-shadow: 0 0 10px rgba(255,45,149,.18);
}
.production-progress .progress-run:disabled { opacity: .7; cursor: default; }
.production-progress .progress-reset { padding: .32rem .5rem; font-size: .625rem; }
.production-progress-note { display: block; margin-top: .35rem; color: var(--muted); font-size: .6rem; line-height: 1.3; }

/* Mine and Refine share the same progress geometry. Keep labels and controls
   inside narrow cards instead of clipping them at the card edge. */
.batch-progress {
  width: 100%; min-width: 0; max-width: 100%;
  overflow-wrap: anywhere; word-break: break-word;
}
.batch-progress-head,
.batch-progress-actions {
  min-width: 0; max-width: 100%;
  flex-wrap: wrap;
}
.batch-progress-head { row-gap: .2rem; }
.batch-progress-actions { display: flex; align-items: center; gap: .4rem; }
.batch-progress-run,
.batch-progress-reset {
  max-width: 100%; white-space: normal; overflow-wrap: anywhere;
}
.batch-progress-run { flex: 1 1 10rem; }
.batch-progress-reset { flex: 0 1 auto; }

/* ── Production cost (per step + plan total) ── */
.step-cost {
  margin-top: 0.3rem; font-size: 0.6875rem; color: var(--warn);
  display: flex; align-items: baseline; gap: 0.4rem; justify-content: center;
}
.step-cost b { font-size: 0.8125rem; font-weight: 700; }
.step-cost-sub { color: var(--muted); font-size: 0.625rem; }
/* an unpriced path says so rather than showing a misleading number */
.step-cost.unknown { color: var(--muted); font-style: italic; }
/* per-material acquisition cost on an Obtain card */
.need-cost { color: var(--warn); font-weight: 700; }
.need-cost-sub { color: var(--muted); font-size: 0.625rem; }
/* Colony tax is a surcharge, the faction cut is money coming back — opposite
   directions, so they must not read as the same kind of number. */
.tax-sub { color: var(--warn); }
/* --ok, not --surplus: money coming back should read as good, and --surplus is
   a registered @property so it always resolves and would swallow a fallback. */
.rebate-sub { color: var(--ok); font-weight: 600; }

/* ---- Gear picker ----
   Three bands: a title bar, one row of controls, one line of help. The controls
   had no flex container at all, so the help text landed BETWEEN the search box
   and the sort menu and stretched the whole modal apart. */
.gear-picker-toolbar {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  padding: 0.6rem 0.75rem 0;
}
.gear-picker-toolbar input[type=text] { flex: 1 1 8rem; min-width: 7rem; }
/* background-COLOR, never the shorthand. The base `select` rule draws the
   dropdown chevron as a background-image with no-repeat and a right-edge
   position; the shorthand resets those two while the per-theme rules later in
   this file re-apply the image, so the arrow tiles across the whole control.
   Every other select rule here uses background-color for the same reason. */
.gear-picker-toolbar input[type=text],
.gear-picker-toolbar select {
  background-color: var(--panel); color: var(--text);
  border: 1px solid var(--line); border-radius: 4px;
  padding: 0.25rem 0.4rem; font-size: 0.6875rem;
}
.gear-picker-toolbar select { padding-right: 1.4rem; }
.gear-picker-toolbar select { flex: 0 1 auto; max-width: 100%; }
.gear-picker-toolbar input:focus, .gear-picker-toolbar select:focus {
  outline: none; border-color: var(--accent);
}
.gpi-help {
  margin: 0.5rem 0.75rem 0; padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.625rem; line-height: 1.5; color: var(--muted);
}
.gpi-help b { color: var(--text); }

/* Rows: icon | name+meta | price. A fixed price column keeps the numbers in a
   readable column instead of ragged against the names. */
.gear-picker-item {
  display: grid; grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 0.6rem; align-items: center;
  padding: 0.45rem 0.5rem;
  border: 1px solid transparent; border-radius: 5px;
}
.gear-picker-item + .gear-picker-item { border-top-color: var(--line); }
.gpi-main { min-width: 0; }
.gpi-name { line-height: 1.25; }
.gpi-faction { display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; margin-top: 0.1rem; }

.gpi-cost { text-align: right; min-width: 8.5rem; }
.gpi-cost-lbl {
  display: block; font-size: 0.5rem; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--muted); line-height: 1.2;
}
.gpi-net {
  display: block; font-weight: 700; font-size: 1rem; line-height: 1.15;
  font-variant-numeric: tabular-nums; color: var(--warn);
}
.gpi-cost-sub {
  display: block; font-size: 0.5625rem; color: var(--muted);
  font-variant-numeric: tabular-nums; line-height: 1.3;
}
/* dimmer than the per-piece figures — it is context, not the comparison */
.gpi-cost-run {
  display: block; font-size: 0.5rem; color: var(--muted); opacity: 0.75;
  font-variant-numeric: tabular-nums; line-height: 1.3;
}
/* the cheapest option earns a word, not just a colour */
.gpi-tag {
  font-size: 0.5rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; padding: 0.05rem 0.3rem; border-radius: 999px;
  background: var(--ok); color: #06120a;
}
.gpi-cost.unknown { font-size: 0.625rem; font-style: italic; color: var(--muted); }
/* cheapest to the guild, which is the whole point of the comparison */
.gpi-cost.best .gpi-net { color: var(--ok); }
.gear-picker-item.gpi-best { border-color: var(--ok); }
.gpi-w { font-weight: 700; }
.gpi-w-heavy { color: var(--warn); }
.gpi-w-light { color: var(--good); }
.gpi-w-unknown { color: var(--muted); font-style: italic; font-weight: 400; }

/* ---- Colony tax editor ---- */
.calc-tax {
  margin: 0.5rem 0 0.25rem; padding: 0.4rem 0.6rem;
  border: 1px solid var(--border); border-radius: 8px; background: var(--panel);
}
.calc-tax > summary {
  cursor: pointer; font-size: 0.8125rem; font-weight: 600;
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
}
.ct-note { color: var(--muted); font-weight: 400; font-size: 0.75rem; }
.ct-hint { font-size: 0.75rem; margin: 0.45rem 0 0.5rem; line-height: 1.45; }
/* ---- Cost breakdown inside the total-cost card ---- */
.cost-breakdown {
  margin-top: 0.45rem; padding-top: 0.4rem;
  border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 0.1rem;
  text-align: left;
}
.cb-row {
  display: grid; grid-template-columns: 1fr auto auto;
  gap: 0.5rem; align-items: baseline;
  font-size: 0.75rem; line-height: 1.5;
}
.cb-label { min-width: 0; color: var(--muted); overflow-wrap: anywhere; }
.cb-val   { font-variant-numeric: tabular-nums; font-weight: 600; }
/* fixed width so the percentages line up into a readable column */
.cb-pct   { font-variant-numeric: tabular-nums; color: var(--muted); min-width: 3.8rem; text-align: right; }

.cb-base .cb-val  { color: var(--fg); }
.cb-add  .cb-val  { color: var(--warn); }
.cb-sub  .cb-val  { color: var(--ok); }
.cb-total {
  border-top: 1px solid var(--border); margin-top: 0.15rem; padding-top: 0.2rem;
  font-size: 0.8125rem;
}
.cb-total .cb-label { color: var(--fg); font-weight: 600; }
.cb-total .cb-val   { color: var(--warn); font-weight: 700; }
.cb-unit .cb-val { color: var(--fg); }
.cb-back .cb-val, .cb-net .cb-val { color: var(--ok); }
.cb-net {
  border-top: 1px dashed var(--border); margin-top: 0.15rem; padding-top: 0.2rem;
}
.cb-net .cb-label { color: var(--fg); font-weight: 600; }

/* At phone widths, especially at the supported 150% text size, the value and
   percentage columns must not squeeze the descriptive label to zero width. */
@media (max-width: 520px) {
  .cb-row { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
  .cb-pct { grid-column: 2; grid-row: 2; min-width: 0; }
}

/* ---- Colonies tab ---- */
.col-toolbar {
  display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
  margin: 0.5rem 0 0.75rem;
}
.col-toolbar input[type=text], #col-search {
  padding: 0.3rem 0.5rem; border: 1px solid var(--border); border-radius: 6px;
  background: var(--panel); color: var(--fg); font-size: 0.8125rem; min-width: 12rem;
}
.col-grid {
  display: grid; gap: 0.6rem;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.col-card {
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--panel); padding: 0.55rem 0.65rem;
  display: flex; flex-direction: column; gap: 0.4rem;
}
/* CMG's own colonies are the ones worth spending at — findable at a glance. */
.col-card.cc-own-col { border-color: var(--accent); }
/* worlds with no production read as reference, not as something to act on */
.col-card.cc-info { opacity: 0.72; }
.cc-head { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.cc-name {
  font-size: 0.85rem; font-weight: 600; flex: 1 1 auto;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cc-badge, .cc-taxbadge {
  font-size: 0.5625rem; font-weight: 700; letter-spacing: 0.04em;
  padding: 0.05rem 0.35rem; border-radius: 999px; flex: 0 0 auto;
}
.cc-badge { background: var(--accent); color: #fff; }
.cc-taxbadge { background: var(--warn); color: #12121e; }
.cc-mines { font-size: 0.7rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: 0.2rem; }
.cc-mines span {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 4px; padding: 0.02rem 0.3rem;
  display: inline-flex; align-items: center; gap: 0.15rem;
}
.cc-mines span b { color: var(--fg); font-size: 0.65rem; }
.cc-mines img, .cc-mines .icon { width: 14px; height: 14px; }
/* the ore you searched for, so a hit is findable inside a busy card */
.cc-mines span.cc-hit { border-color: var(--accent); color: var(--fg); }
.cc-controls {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  border-top: 1px solid var(--border); padding-top: 0.4rem;
  min-width: 0;
}
.cc-controls.cc-none { font-size: 0.6875rem; font-style: italic; }
/* Native selects otherwise size themselves from the longest faction name and
   can escape narrower grid cards. Keep ownership on a stable full-width row. */
.cc-own {
  display: flex; align-items: center; gap: 0.3rem; cursor: pointer;
  font-size: 0.75rem; width: 100%; min-width: 0;
}
.cc-own select { width: 100%; max-width: 100%; min-width: 0; }
.cc-own select[multiple] { min-height: 4.5rem; }

/* ---- Colonies player workspace ---- */
.colonies-shell { max-width: 1180px; margin: 0 auto; }
.colonies-hero { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: 1rem 1.1rem; border: 1px solid var(--line-bright); border-radius: 14px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, var(--panel2)), var(--panel)); }
.colonies-hero .view-title { margin: 0.15rem 0 0.25rem; }
.colonies-hero p { max-width: 650px; margin: 0; color: var(--muted); line-height: 1.5; }
.colonies-local-badge { flex: 0 0 auto; padding: 0.4rem 0.65rem; border: 1px solid var(--line-bright); border-radius: 999px; color: var(--ok); font-size: 0.7rem; white-space: nowrap; }
.colonies-overview { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem; margin: 0.75rem 0; }
.col-metric { padding: 0.65rem 0.75rem; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; }
.col-metric b { display: block; color: var(--accent-bright); font: 700 1.25rem/1.1 "JetBrains Mono", monospace; }
.col-metric span { display: block; margin-top: 0.25rem; color: var(--muted); font-size: 0.68rem; }
.colonies-toolbar { align-items: end; padding: 0.75rem; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.colonies-search, .colonies-filter { display: flex; flex-direction: column; gap: 0.25rem; color: var(--muted); font-size: 0.68rem; font-weight: 600; }
.colonies-search { flex: 1 1 280px; }
.colonies-search input, .colonies-filter select { width: 100%; min-height: 2.35rem; }
.colonies-filter { flex: 0 0 18rem; max-width: 100%; }
.colonies-legacy-filter { padding-bottom: 0.55rem; }
.colonies-world-data { margin-left: auto; }
.colonies-world-data summary { cursor: pointer; min-height: 2.35rem; display: inline-flex; align-items: center; padding: 0.4rem 0.65rem; border: 1px solid var(--line-bright); border-radius: 7px; color: var(--text); font-size: 0.72rem; }
.colonies-world-data > div { display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.4rem; padding: 0.5rem; border: 1px solid var(--line); border-radius: 8px; background: var(--panel2); }
.colonies-world-data .muted { flex: 1 1 100%; font-size: 0.65rem; }
.danger { color: var(--bad) !important; }
.colonies-section-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin: 1.25rem 0 0.55rem; }
.colonies-section-head h4 { margin: 0.15rem 0 0; font: 700 1rem/1.2 "Orbitron", sans-serif; color: var(--text); }
.colonies-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
.colonies-card { min-width: 0; padding: 0.8rem; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); box-shadow: 0 5px 18px rgba(0,0,0,.12); }
.colonies-card-owned { border-color: var(--accent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent), 0 8px 22px rgba(0,0,0,.16); }
.colonies-card:focus-within { border-color: var(--accent-bright); }
.colonies-card-head, .colonies-card-status { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.6rem; }
.colonies-card h5 { margin: 0.15rem 0 0; font-size: 1rem; color: var(--text); }
.icon-action { min-width: 2.35rem; min-height: 2.35rem; padding: 0.35rem; border: 1px solid var(--line); border-radius: 7px; background: var(--panel2); color: var(--text); cursor: pointer; }
.icon-action:hover, .icon-action:focus-visible { border-color: var(--accent); color: var(--accent-bright); }
.owner-list { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; min-width: 0; margin-top: 0.65rem; }
.owner-chip { display: inline-flex; padding: 0.25rem 0.45rem; border-radius: 999px; background: color-mix(in srgb, var(--accent) 18%, var(--panel2)); border: 1px solid color-mix(in srgb, var(--accent) 50%, var(--line)); color: var(--text); font-size: 0.65rem; font-weight: 700; }
.owner-chip-empty { color: var(--muted); background: var(--panel2); border-color: var(--line); }
.owner-alliance-label { flex-basis: 100%; color: var(--accent-bright); font-size: 0.62rem; }
.colony-tax-value { flex: 0 0 auto; margin-top: 0.75rem; color: var(--muted); font-size: 0.68rem; }
.colony-tax-value b { color: var(--warn); font-size: 0.78rem; }
.colony-lore-teaser { margin-top: 0.55rem; color: var(--muted); font-size: 0.63rem; line-height: 1.4; }
.colony-lore { margin-top: 0.65rem; border-top: 1px solid var(--line); padding-top: 0.5rem; }
.colony-lore > summary { cursor: pointer; color: var(--accent-bright); font-size: 0.68rem; font-weight: 700; }
.colony-lore-body { display: grid; gap: 0.55rem; margin-top: 0.55rem; }
.colony-lore-description { margin: 0; color: var(--text); font-size: 0.68rem; line-height: 1.55; }
.colony-lore-facts { display: grid; gap: 0.35rem; margin: 0; }
.colony-lore-facts > div { display: grid; grid-template-columns: minmax(6.5rem, .35fr) minmax(0, 1fr); gap: 0.5rem; padding: 0.35rem 0.45rem; border-radius: 5px; background: var(--panel2); font-size: 0.63rem; line-height: 1.4; }
.colony-lore-facts dt { color: var(--muted); font-weight: 700; }
.colony-lore-facts dd { margin: 0; color: var(--text); }
.colony-lore-points { color: var(--muted); font-size: 0.63rem; line-height: 1.4; }
.colony-lore-points b { color: var(--text); }
.colony-lore-points ul { margin: 0.25rem 0 0 1rem; padding: 0; }
.colony-lore-source { margin: 0; font-size: 0.58rem; line-height: 1.45; }
.colonies-resources { margin-top: 0.8rem; padding-top: 0.65rem; border-top: 1px solid var(--line); }
.colonies-label { display: block; margin-bottom: 0.35rem; color: var(--muted); font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.resource-list { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.resource-chip { display: inline-flex; align-items: center; gap: 0.25rem; max-width: 100%; padding: 0.25rem 0.35rem; border: 1px solid var(--line); border-radius: 6px; background: var(--panel2); color: var(--text); font-size: 0.68rem; }
.resource-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resource-chip b { color: var(--muted); font: 600 0.62rem "JetBrains Mono", monospace; }
.resource-chip-hit { border-color: var(--accent); }
.colony-editor { margin-top: 0.75rem; border-top: 1px solid var(--line); padding-top: 0.55rem; }
.colony-editor summary { cursor: pointer; color: var(--accent-bright); font-size: 0.7rem; font-weight: 700; }
.colony-editor-body { display: grid; gap: 0.65rem; margin-top: 0.65rem; }
.colony-editor fieldset { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.35rem; margin: 0; padding: 0; border: 0; }
.colony-editor legend { grid-column: 1/-1; margin-bottom: 0.1rem; color: var(--muted); font-size: 0.68rem; font-weight: 700; }
.owner-check { display: flex; align-items: center; gap: 0.35rem; min-height: 2rem; color: var(--text); font-size: 0.68rem; cursor: pointer; }
.owner-check input { accent-color: var(--accent); }
.owner-check-clear { grid-column: 1/-1; color: var(--muted); }
.tax-editor { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: 0.68rem; }
.tax-editor input { width: 4.2rem; min-height: 2rem; margin-right: 0.2rem; text-align: right; }
.editor-hint { margin: 0; font-size: 0.62rem; line-height: 1.4; }
.colonies-empty { padding: 1.2rem; border: 1px dashed var(--line-bright); border-radius: 10px; color: var(--muted); text-align: center; }
.colonies-reference[hidden] { display: none; }
.colonies-reference-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; }
.reference-world-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.45rem; min-width: 0; padding: 0.55rem 0.65rem; border: 1px solid var(--line); border-radius: 8px; background: var(--panel2); }
.reference-world-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-size: 0.72rem; font-weight: 600; }
.reference-world-label { margin-left: auto; color: var(--muted); font-size: 0.58rem; white-space: nowrap; }
.reference-world-card .icon-action { min-width: 2rem; min-height: 2rem; padding: 0.2rem; }
.reference-world-card .colony-lore { grid-column: 1 / -1; width: 100%; }
.colonies-guide-copy { max-width: 850px; color: var(--muted); font-size: 0.75rem; line-height: 1.55; }
.colonies-guide-copy h4 { color: var(--text); }
@media (max-width: 1000px) { .colonies-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .colonies-reference-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .colonies-hero { flex-direction: column; } .colonies-overview { grid-template-columns: repeat(2, 1fr); } .colonies-toolbar { align-items: stretch; } .colonies-filter, .colonies-search { flex-basis: 100%; } .colonies-legacy-filter { padding-bottom: 0; } .colonies-world-data { margin-left: 0; } .colonies-grid, .colonies-reference-grid { grid-template-columns: 1fr; } .colonies-card { padding: 0.75rem; } }
@media (prefers-reduced-motion: reduce) { .colonies-card, .icon-action { transition: none !important; } }


.cc-rate { display: flex; align-items: center; gap: 0.2rem; margin-left: auto; }
.cc-rate input {
  width: 3.6rem; padding: 0.15rem 0.25rem; font-size: 0.75rem;
  text-align: right; border: 1px solid var(--border); border-radius: 4px;
  background: var(--bg); color: var(--fg);
}
.cc-pct { color: var(--muted); font-size: 0.6875rem; }
/* ---- Mining slot guide ---- */
.slot-guide {
  margin: 0 0 0.75rem; padding: 0.5rem 0.75rem;
  border: 1px solid var(--border); border-radius: 8px; background: var(--panel);
}
.slot-guide > summary {
  cursor: pointer; font-size: 0.8125rem; font-weight: 600;
}
.slot-guide h4 {
  margin: 0.85rem 0 0.3rem; font-size: 0.8125rem; color: var(--accent);
}
.slot-guide p { margin: 0.35rem 0; font-size: 0.8125rem; line-height: 1.5; }
.slot-guide ul { margin: 0.3rem 0 0.3rem 1.1rem; padding: 0; }
.slot-guide li { font-size: 0.8125rem; line-height: 1.5; margin: 0.2rem 0; }
.slot-guide q { font-style: italic; }

/* energy / cooling sliders */
.ct-slots {
  display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap;
  margin: 0.5rem 0 0.15rem;
}
.ct-slot {
  display: flex; align-items: center; gap: 0.4rem;
  font-size: 0.75rem; font-weight: 600;
}
.ct-slot input[type=range] { width: 8.5rem; accent-color: var(--accent); }
.ct-slot output {
  min-width: 1.5rem; text-align: right;
  font-variant-numeric: tabular-nums; color: var(--warn);
}
.ct-rate { display: flex; align-items: center; gap: 0.15rem; flex: 0 0 auto; }
.ct-rate input {
  width: 3.6rem; padding: 0.15rem 0.25rem; font-size: 0.75rem;
  text-align: right; border: 1px solid var(--border); border-radius: 4px;
  background: var(--panel); color: var(--fg);
}
.ct-pct { color: var(--muted); font-size: 0.6875rem; }

/* ── Mining slots panel (calculator) ── */
.mine-slots {
  margin-top: 1rem; padding: 0.75rem 0.875rem;
  background: var(--panel2); border: 1px solid var(--line);
  border-left: 3px solid var(--cyan); border-radius: 6px;
  min-width: 0; overflow: visible;
}
.mine-slots-head {
  font-family: "Orbitron", "JetBrains Mono", monospace;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--cyan); margin-bottom: 0.6rem;
  line-height: 1.35;
}
.mine-slots-hint {
  display: block; margin-top: 0.25rem;
  max-width: 62rem;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.625rem; font-weight: 400; letter-spacing: 0;
  text-transform: none; color: var(--muted); line-height: 1.45;
  overflow-wrap: anywhere;
}
.mine-slots-none, .mine-slots-foot { font-size: 0.6875rem; }
.mine-slots-foot { margin-top: 0.6rem; line-height: 1.4; }
.mine-row {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.9fr) minmax(4.5rem, auto) minmax(0, 1.6fr);
  align-items: center; column-gap: 0.65rem; row-gap: 0.45rem;
  padding: 0.5rem 0.55rem; border-radius: 5px;
  border-top: 1px solid rgba(255,255,255,.04);
}
/* something the current plan is still short of — mine this first */
.mine-row.wanted { background: color-mix(in srgb, var(--cyan) 7%, transparent); }
.mine-row-item { display: flex; align-items: center; gap: 0.4rem; min-width: 0; }
.mine-row-item .icon { flex: 0 0 auto; }
.mine-row-item .icon, .mine-row-item .icon img { width: 1.75rem; height: 1.75rem; }
.mine-row-item .icon img { background: transparent; }
.mine-row-name {
  min-width: 0; font-size: 0.75rem; font-weight: 600; line-height: 1.3;
  overflow-wrap: anywhere;
}
.mine-need {
  min-width: 0; font-size: 0.6875rem; color: var(--cyan); line-height: 1.3;
  overflow-wrap: anywhere;
}
.mine-need.muted { color: var(--muted); }
.mine-have { min-width: 0; font-size: 0.6875rem; color: var(--muted); white-space: nowrap; }
.mine-row.mining-complete .mine-acts { display: none; }
.mine-row.mining-complete .mine-row-name { text-decoration: line-through; color: var(--muted); }
.mine-need.complete { color: var(--good, var(--cyan)); }
.mine-progress {
  grid-column: 1 / -1; width: 100%; min-width: 0; margin: 0;
  padding-top: 0.15rem;
}
.mine-progress-head {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.25rem 0.5rem;
  font-size: 0.625rem; color: var(--cyan); font-variant-numeric: tabular-nums;
  line-height: 1.35;
}
.mine-progress-remaining { color: var(--muted); }
.mine-progress-track {
  height: 0.3rem; margin-top: 0.25rem; overflow: hidden;
  background: var(--line); border-radius: 99px;
}
.mine-progress-fill {
  display: block; height: 100%; min-width: 0;
  background: linear-gradient(90deg, var(--cyan-dim), var(--cyan));
  border-radius: inherit; transition: width .2s ease;
}
.mine-progress.complete .mine-progress-fill {
  background: linear-gradient(90deg, var(--cyan), var(--good, var(--cyan)));
}
.mine-progress-reset {
  margin-top: 0.3rem; padding: 0.15rem 0.45rem;
  background: transparent; color: var(--muted);
  border: 1px solid var(--line); border-radius: 4px;
  font: inherit; font-size: 0.625rem; cursor: pointer;
}
.mine-progress-reset:hover { border-color: var(--cyan); color: var(--cyan); }

.mine-acts {
  grid-column: 4; display: flex; align-items: center; justify-content: flex-end;
  gap: 0.25rem; min-width: 0; margin-left: 0; flex-wrap: wrap;
}
.mine-log {
  background: var(--panel); color: var(--fg-dim);
  border: 1px solid var(--line); border-radius: 4px;
  padding: 0.2rem 0.5rem; font-size: 0.6875rem; cursor: pointer;
  text-transform: none; letter-spacing: 0; font-weight: 600; box-shadow: none;
}
.mine-log:hover { border-color: var(--cyan); color: var(--cyan); box-shadow: none; transform: none; }
/* the efficient pull gets the emphasis */
.mine-log.full {
  min-width: 4.5rem; min-height: 2.75rem;
  padding: 0.45rem 0.8rem; font-size: 0.8rem;
  border-color: var(--cyan); color: var(--cyan);
  background: color-mix(in srgb, var(--cyan) 14%, transparent);
}
.mine-qty {
  width: 5.5rem; min-width: 0; background-color: var(--panel); color: var(--text);
  border: 1px solid var(--line); border-radius: 4px;
  padding: 0.2rem 0.35rem; font-size: 0.6875rem; font-family: inherit;
}
.mine-qty:focus { outline: none; border-color: var(--cyan); }

/* Keep status text readable, then move controls to their own row before they can collide. */
@media (max-width: 900px) {
  .mine-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  }
  .mine-acts {
    grid-column: 1 / -1; justify-content: flex-start;
  }
}

/* On phones, every mining action gets a predictable full-width grid cell. */
@media (max-width: 560px) {
  .mine-slots { padding: 0.7rem; }
  .mine-slots-head { letter-spacing: 0.5px; }
  .mine-row {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 0.5rem; row-gap: 0.4rem; padding: 0.55rem 0.35rem;
  }
  .mine-row-item { grid-column: 1 / -1; }
  .mine-need { grid-column: 1; }
  .mine-have { grid-column: 2; text-align: right; }
  .mine-progress { grid-column: 1 / -1; }
  .mine-acts {
    grid-column: 1 / -1; display: grid;
    grid-template-columns: minmax(4.5rem, 1.2fr) repeat(2, minmax(3rem, 1fr)) minmax(6rem, 1.5fr);
    gap: 0.35rem; width: 100%;
  }
  .mine-log, .mine-qty { width: 100%; min-height: 2.5rem; }
  .mine-log { padding: 0.4rem 0.35rem; }
  .mine-log.full { min-height: 2.75rem; }
  .mine-qty { padding: 0.35rem; }
}

/* plan legend */
.plan-legend {
  display: flex; gap: 1rem; flex-wrap: wrap;
  font-size: 0.6875rem; color: var(--muted);
  margin-top: 0.75rem; padding: 0.5rem 0.75rem;
  background: var(--panel2); border-radius: 6px;
  border: 1px solid var(--line); align-items: center;
}
.legend-chip {
  display: inline-block; width: 0.75rem; height: 0.75rem; border-radius: 2px;
  margin-right: 0.25rem; vertical-align: middle;
  box-shadow: 0 0 4px currentColor;
}
.legend-move { background: var(--cyan); }
.legend-get { background: var(--warn); }
.legend-produce { background: var(--purple); }
.legend-surplus { background: var(--surplus); }

/* ---- surplus badge ---- */
.surplus-badge {
  display: inline-block; font-size: 0.625rem;
  padding: 1px 5px; border-radius: 3px;
  background: rgba(245,158,11,.15);
  color: var(--surplus); border: 1px solid var(--surplus);
  margin-left: 0.375rem; cursor: help;
}
.step-math { font-size: 0.625rem; color: var(--muted); margin-top: 2px; text-align: center; }

.flow-chip { display: flex; align-items: center; gap: 0.5rem; min-width: 0; max-width: 100%; }
.flow-chip .icon { width: 2rem; height: 2rem; flex: 0 0 auto; }
/* no dark plate behind the art — it boxed the icon in and muddied the edges */
.flow-chip .icon img { width: 2rem; height: 2rem; background: transparent; }
.flow-chip .icon-badge { width: 2rem; height: 2rem; font-size: 0.875rem; border-radius: 4px; }
.flow-name {
  min-width: 0; flex: 1 1 auto; font-size: 0.75rem; line-height: 1.35;
  white-space: normal; overflow-wrap: anywhere; word-break: break-word;
}
.flow-qty {
  flex: 0 0 auto; margin-left: auto; white-space: nowrap;
  font-weight: 700; font-size: 0.75rem;
  background: var(--panel); border-radius: 4px; padding: 1px 7px;
}
.flow-qty.owned { color: var(--cyan); }
.flow-qty.need  { color: var(--warn); }
.flow-qty.made  { color: var(--accent-bright); }

.flow-move { display: flex; align-items: center; gap: 0.375rem; margin: 0.375rem 0 0.125rem; color: var(--cyan); font-size: 0.75rem; }
.flow-arrow { font-size: 0.875rem; }
.flow-dest { font-weight: 600; }
.flow-from, .flow-need, .flow-sites { font-size: 0.6875rem; color: var(--muted); margin-top: 0.25rem; }
.flow-from b { color: var(--cyan); }
.flow-sites .tag { margin-right: 0.25rem; }

/* recipe-flow internal layout: keep the connector between the complete input
   stack and the output card instead of letting it wrap beside one input. */
.recipe-flow { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 0.45rem; }
.flow-inputs { display: flex; flex-direction: column; gap: 0.25rem; width: 100%; min-width: 0; }
.flow-inputs-row { display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap; }

.flow-chip.input {
  display: flex; flex-direction: row; align-items: center; gap: 0.5rem;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 5px; padding: 0.35rem 0.6rem;
  min-width: 0; max-width: 100%; min-height: 2.9rem;
}
.flow-chip.input.owned  { border-color: var(--cyan); box-shadow: 0 0 6px #00f0ff22; }
.flow-chip.input.partial{ border-color: var(--warn); }
.flow-chip.input.need   { border-color: var(--bad); }
.flow-chip.input .icon,
.flow-chip.input .icon img,
.flow-chip.input .icon-badge { width: 2.125rem; height: 2.125rem; }
/* Let long captions wrap naturally beside the icon and quantity. */
.flow-chip.input .flow-name {
  font-size: 0.75rem; line-height: 1.25; max-width: none;
  display: block; overflow: visible; overflow-wrap: anywhere; word-break: break-word;
}
/* inputs stack in a column and stretch to equal width, so pushing the amount
   to the right edge lines the numbers up into a scannable column */
.flow-chip.input .flow-qty { margin-left: auto; font-size: 0.75rem; }

.chip-owned { font-size: 0.625rem; color: var(--cyan); }
.chip-new { font-size: 0.625rem; color: var(--warn); }
/* the "+" sits between stacked input chips — centre it under the column
   instead of hanging off the left edge now the chips are taller */
.flow-plus { color: var(--muted); font-weight: 700; }
.flow-inputs > .flow-plus { text-align: center; line-height: 1; font-size: 0.8125rem; opacity: .7; }
.flow-arrow.big { transform: rotate(90deg); justify-self: center; font-size: 1.25rem; color: var(--accent); text-shadow: 0 0 8px var(--accent); }
.flow-output { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; width: 100%; }
.flow-chip.output {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "process process process"
    "icon name quantity";
  align-items: center;
  column-gap: 0.6rem;
  row-gap: 0.35rem;
  background: var(--bg); border: 1px solid var(--accent-dim);
  border-radius: 5px; padding: 0.55rem 0.75rem;
  box-shadow: 0 0 8px #ff2d9515; min-width: 0; max-width: 100%;
}
.flow-chip.output > .proc { grid-area: process; justify-self: start; }
.flow-chip.output > .icon,
.flow-chip.output > .icon-badge { grid-area: icon; }
.flow-chip.output > .flow-name {
  grid-area: name;
  min-width: 0;
  overflow-wrap: break-word;
  word-break: normal;
}
.flow-chip.output > .flow-qty {
  grid-area: quantity;
  justify-self: end;
  margin-left: 0;
}
/* the output is the point of the step — give it the largest icon */
.flow-chip.output .icon,
.flow-chip.output .icon img,
.flow-chip.output .icon-badge { width: 2.75rem; height: 2.75rem; }
.flow-chip.output .icon-badge { font-size: 1.125rem; }
.flow-chip.output .flow-name {
  font-size: 0.8125rem; font-weight: 600; line-height: 1.25;
  max-width: none; overflow-wrap: break-word; word-break: normal;
}
.flow-chip.output .flow-qty { font-size: 0.8125rem; }

/* Refinement cards repeat in the colony-work grid, so their output chips are
   narrower than the single final-manufacture card. Give the item name a full
   row while keeping the process, icon, and quantity compact above it. */
.colony-work-refine-card .flow-chip.output {
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "process process"
    "icon quantity"
    "name name";
}

@media (max-width: 820px) {
  main { padding-inline: clamp(0.5rem, 4vw, 1.25rem); }
  .card.plan { padding: clamp(0.5rem, 3vw, 1rem); }
  .section { gap: 0.5rem; }
  .section-badge { width: 1.5rem; height: 1.5rem; font-size: 0.75rem; }
  .section::before { left: 0.7rem; top: 1.5rem; }
  .recipe-card,
  .colony-work-action.recipe-card { padding: 0.6rem; }
  .colony-work-list { padding: 0.45rem; }
  .recipe-flow { grid-template-columns: minmax(0, 1fr); gap: 0.45rem; }
  .flow-arrow.big { transform: rotate(90deg); justify-self: center; }
  .flow-output { width: 100%; }
  .flow-chip.output {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "process process"
      "icon quantity"
      "name name";
    padding: 0.45rem 0.5rem;
    column-gap: 0.45rem;
    row-gap: 0.4rem;
  }
  .flow-chip.output > .proc { grid-area: process; justify-self: start; }
  .flow-chip.output > .icon,
  .flow-chip.output > .icon-badge { grid-area: icon; }
  .flow-chip.output > .flow-name {
    grid-area: name;
    min-width: 0;
    overflow-wrap: break-word;
    word-break: normal;
  }
  .flow-chip.output > .flow-qty {
    grid-area: quantity;
    justify-self: end;
    margin-left: 0;
  }
  .flow-chip.input {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "input-icon input-quantity"
      "input-name input-name";
    column-gap: 0.45rem;
    row-gap: 0.3rem;
  }
  .flow-chip.input > .icon,
  .flow-chip.input > .icon-badge { grid-area: input-icon; }
  .flow-chip.input > .flow-name {
    grid-area: input-name;
    width: 100%;
  }
  .flow-chip.input > .flow-qty {
    grid-area: input-quantity;
    justify-self: end;
    margin-left: 0;
  }
  .flow-chip.input .flow-name,
  .rc-cb-label {
    overflow-wrap: break-word;
    word-break: normal;
  }
}

.flow-batches { font-size: 0.625rem; color: var(--muted); text-align: center; }
.flow-batches.batch-emphasis {
  color: var(--text);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: .02em;
}
.recipe-card .proc {
  display: inline-block; font-size: 0.5625rem; text-transform: uppercase;
  letter-spacing: 1px; padding: 1px 6px; border-radius: 3px;
}
.recipe-card .proc.refine { background: rgba(139,44,245,.2); color: var(--purple); }
.recipe-card .proc.manufacture { background: rgba(255,45,149,.2); color: var(--accent-bright); }

/* =====================================================================
   PICKER GRID — category-colored cards
   ===================================================================== */
.calc-picker {
  background: var(--bg2); border: 1px solid var(--line);
  border-radius: 6px; padding: 0.75rem;
  margin-bottom: 0.875rem;
  box-shadow: inset 0 0 30px rgba(139,44,245,.04);
}
.picker-controls { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.625rem; }
.picker-controls label { display: flex; flex-direction: column; font-size: 0.625rem; color: var(--muted); gap: 3px; text-transform: uppercase; letter-spacing: 1px; }
.picker-controls select, .picker-controls input { background-color: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 4px; padding: 0.3125rem 0.5rem; font-size: 0.75rem; }
.picker-controls input { min-width: 160px; }
.picker-controls select { padding-right: 1.375rem; }

.picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
  /* rem, not px: the cards inside scale with the font slider, so a fixed
     viewport showed steadily fewer rows as the text grew */
  gap: 5px; max-height: 18rem; overflow-y: auto; padding-right: 4px;
}
.pick-card {
  display: flex; align-items: center; gap: 0.375rem;
  background: var(--panel2); border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: 4px; padding: 0.375rem 0.5rem;
  cursor: pointer;
  font-family: inherit; font-size: inherit; color: inherit;
  text-transform: none; letter-spacing: normal; font-weight: normal;
  box-shadow: none; width: auto; margin: 0;
  transition: border-color .12s, background .12s, box-shadow .12s, transform .1s;
  overflow: hidden;
}
.pick-card:hover {
  background: var(--panel);
  border-color: var(--pc);
  box-shadow: 0 0 10px color-mix(in srgb, var(--pc) 35%, transparent);
  transform: translateX(2px);
}
.pick-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* category accent borders + per-category glow color */
.pick-card { --pc: var(--cat-other); border-left-color: var(--pc); }
.pick-card[data-category="Medical"]               { --pc: var(--cat-medical); }
.pick-card[data-category="Ammunition"]            { --pc: var(--cat-ammo); }
.pick-card[data-category="Weapons"]               { --pc: var(--cat-weapons); }
.pick-card[data-category="Food & Drink"]          { --pc: var(--cat-food); }
.pick-card[data-category="Implants & Electronics"]{ --pc: var(--cat-implants); }
.pick-card[data-category="Alien Materials"]       { --pc: var(--cat-alien); }
.pick-card[data-category="Armor"]                 { --pc: var(--cat-armor); }
.pick-card[data-category="Other"]                 { --pc: var(--cat-other); }

.pick-card .pick-icon { flex: 0 0 auto; }
.pick-card .pick-icon .icon { width: 1.5rem; height: 1.5rem; }
.pick-card .pick-icon .icon img { width: 1.5rem; height: 1.5rem; background: var(--panel); }
.pick-card .pick-name {
  font-size: 0.6875rem; line-height: 1.2; min-width: 0;
  overflow-wrap: anywhere;
  flex: 1 1 auto;
}
.pick-card .pick-have {
  font-size: 0.625rem; color: var(--muted);
  background: var(--bg); border-radius: 3px;
  padding: 1px 5px; white-space: nowrap; flex: 0 0 auto;
}
.pick-card .pick-have.have { color: var(--cyan); font-weight: 700; }
.pick-card .pick-type {
  font-size: 0.5rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.5px;
  background: var(--bg); border-radius: 2px;
  padding: 0 4px; white-space: nowrap; flex: 0 0 auto;
  opacity: .7;
}


/* =====================================================================
   ALL ITEMS
   ===================================================================== */
.controls .selall { display: inline-flex; align-items: center; gap: 5px; font-size: 0.6875rem; color: var(--muted); cursor: pointer; }
.controls .selall input { accent-color: var(--accent); }
.item-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13.75rem, 1fr)); gap: 0.625rem; margin-top: 0.75rem; }
.item-card {
  position: relative; display: flex; gap: 0.625rem;
  background: var(--panel2); border: 1px solid var(--line);
  border-radius: 4px; padding: 0.625rem;
  transition: border-color .12s, background .12s, box-shadow .12s;
}
.item-card:hover { border-color: var(--line-bright); }
.item-card.selected { border-color: var(--accent); background: rgba(255,45,149,.06); box-shadow: var(--glow-pink); }
.item-card .ic-sel { position: absolute; top: 8px; right: 8px; }
.item-card .ic-sel input { width: 1rem; height: 1rem; accent-color: var(--accent); cursor: pointer; }
.item-card .ic-icon { flex: 0 0 auto; width: 2.5rem; height: 2.5rem; }
.item-card .ic-icon .icon { width: 2.5rem; height: 2.5rem; }
.item-card .ic-icon .icon img { width: 2.5rem; height: 2.5rem; background: var(--panel); }
.item-card .ic-body { min-width: 0; flex: 1 1 auto; }
.item-card .ic-name { font-weight: 600; font-size: 0.8125rem; line-height: 1.15; padding-right: 1.125rem; }
.item-card .ic-meta { font-size: 0.6875rem; margin: 2px 0 5px; }
.item-card .ic-tags { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 5px; }
.item-card .ic-recipe { display: flex; flex-wrap: wrap; gap: 3px; }
.item-card .tag { font-size: 0.625rem; }

/* bulk bar */
.bulk-bar {
  display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; position: sticky; bottom: 0;
  margin-top: 0.875rem; padding: 0.75rem 0.875rem;
  background: linear-gradient(135deg, var(--panel) 0%, var(--bg2) 100%);
  border: 1px solid var(--line-bright); border-radius: 6px;
  box-shadow: 0 -4px 16px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,45,149,.1);
}
.bulk-bar label { display: inline-flex; align-items: center; gap: 5px; font-size: 0.6875rem; color: var(--muted); }
.bulk-bar select { background-color: var(--panel2); border: 1px solid var(--line); padding: 0.25rem 1.125rem 0.25rem 0.375rem; font-size: 0.75rem; }
.bulk-bar input[type="number"] { width: 4rem; background: var(--panel2); border: 1px solid var(--line); padding: 0.25rem 0.375rem; font-size: 0.75rem; color: var(--text); }
.bulk-count { font-weight: 700; color: var(--accent-bright); font-size: 0.75rem; }
.bulk-bar button { background: linear-gradient(135deg, var(--accent), var(--purple)); color: #fff; border: none; border-radius: 4px; padding: 0.375rem 0.75rem; font-weight: 700; cursor: pointer; font-size: 0.6875rem; }
.bulk-bar button:hover { box-shadow: var(--glow-pink); }
.bulk-bar button.ghost { background: transparent; color: var(--muted); border: 1px solid var(--line); }
.bulk-bar button.ghost:hover { color: var(--text); border-color: var(--accent-dim); box-shadow: none; }

/* =====================================================================
   CALCULATOR TRAY + APPLY
   ===================================================================== */
.controls .ghost, button.ghost {
  background: transparent; color: var(--muted);
  border: 1px solid var(--line); border-radius: 4px;
  padding: 0.4375rem 0.75rem; cursor: pointer;
  text-transform: uppercase; letter-spacing: 1px;
  font-size: 0.6875rem; box-shadow: none;
}
.controls .ghost:hover, button.ghost:hover { color: var(--text); border-color: var(--accent-dim); box-shadow: none; }
button.primary {
  background: linear-gradient(135deg, var(--accent), var(--purple));
  color: #fff; border: none; border-radius: 4px;
  padding: 0.4375rem 0.875rem; font-weight: 700; cursor: pointer;
  font-size: 0.6875rem; letter-spacing: 1px;
}
button.primary:hover { box-shadow: var(--glow-pink); }

.tray {
  background: var(--bg2); border: 1px solid var(--line-bright);
  border-radius: 6px; padding: 0.75rem 0.875rem; margin: 0.75rem 0;
  box-shadow: inset 0 0 20px rgba(255,45,149,.04);
}
.tray-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.625rem; }
.tray-title { font-weight: 700; color: var(--accent-bright); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; }
.tray-actions { display: flex; gap: 0.5rem; }
.tray-items { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tray-chip {
  display: flex; align-items: center; gap: 0.375rem;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 4px; padding: 0.25rem 0.625rem 0.25rem 0.375rem;
}
.tray-chip .tray-ic { width: 1.375rem; height: 1.375rem; }
.tray-chip .tray-ic .icon { width: 1.375rem; height: 1.375rem; }
.tray-chip .tray-nm { font-size: 0.75rem; }
.tray-q { display: inline-flex; align-items: center; gap: 2px; color: var(--muted); }
.tray-qin { width: 3.25rem; background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 3px; padding: 2px 4px; font-size: 0.6875rem; }
.tray-x { background: transparent; border: none; color: var(--bad); cursor: pointer; font-size: 0.8125rem; line-height: 1; padding: 2px 4px; min-width: 1.5rem; min-height: 1.5rem; }
.tray-x:hover { color: #ff5577; }

#calc-multi .multi-head { font-weight: 700; color: var(--accent-bright); margin: 1rem 0 0.5rem; font-size: 1rem; text-transform: uppercase; letter-spacing: 1px; text-shadow: 0 0 8px var(--accent); }
#calc-result.multi { display: none; }
/* The plan containers are smooth-scrolled to the top of the viewport after a
   calculation; without scroll-margin the sticky plan summary bar covered the
   first card of the result it just scrolled to. */
.calc-result, .calc-multi { scroll-margin-top: 4.5rem; }

/* =====================================================================
   INVENTORY / ZONE EDITOR
   ===================================================================== */
.editor {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 6px; padding: 0.75rem 0.875rem; margin-bottom: 0.875rem;
}
.editor h4 { margin: 0 0 0.625rem; font-size: 0.8125rem; color: var(--text); text-transform: uppercase; letter-spacing: 1px; }
.editor h4 span { color: var(--accent); }
.editor-row { display: flex; gap: 0.625rem; flex-wrap: wrap; align-items: flex-end; }
.editor-row label { display: flex; flex-direction: column; font-size: 0.625rem; color: var(--muted); gap: 3px; text-transform: uppercase; letter-spacing: 1px; }
.editor-row input, .editor-row select { background-color: var(--panel2); border: 1px solid var(--line); padding: 0.375rem 0.5rem; font-size: 0.75rem; min-width: 120px; }
.editor-row button { background: linear-gradient(135deg, var(--accent), var(--purple)); color: #fff; border: none; padding: 0.4375rem 0.75rem; font-weight: 700; cursor: pointer; height: fit-content; font-size: 0.6875rem; box-shadow: none; }
.editor-row button:hover { box-shadow: var(--glow-pink); }

button.x {
  background: transparent; border: none; color: var(--bad); cursor: pointer;
  font-size: 0.8125rem; padding: 0.25rem 0.375rem; line-height: 1; min-width: 1.75rem; min-height: 1.75rem;
}
button.x:hover { color: #ff5577; }

.pathpick {
  margin-bottom: 0.5rem;
  padding: 0.375rem 0.5rem;
  background: var(--panel2);
  border: 1px solid var(--line-bright);
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.pathpick::before { content: '⚙'; font-size: 0.8125rem; }
.pathpick select {
  background-color: var(--panel);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 3px 1.25rem 3px 6px;
  font-size: 0.75rem;
  color: var(--text);
  font-weight: 500;
  cursor: pointer;
}
.pathpick select:hover { border-color: var(--accent-dim); }
.pathpick select:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 1px var(--accent-dim); }
/* in-plan note is now read-only (the control moved to the top panel) */
.pathpick-static {
  color: var(--muted); font-weight: 500; min-width: 0;
  background: transparent; border-color: var(--line);
}
.pathpick-static .pathpick-label { flex: 0 0 auto; color: var(--fg-dim); text-transform: uppercase; letter-spacing: .04em; }
.pathpick-static .pathpick-materials { min-width: 0; flex: 1 1 12rem; overflow-wrap: anywhere; word-break: break-word; }
.pathpick-hint { flex: 1 1 100%; min-width: 0; color: var(--fg-dim); font-weight: 400; font-size: 0.6875rem; overflow-wrap: anywhere; }

/* ── Refinement-path panel in the controls (above the results) ── */
.calc-paths {
  margin: 0.5rem 0 0;
  padding: 0.6rem 0.75rem;
  background: var(--panel2);
  border: 1px solid var(--line-bright);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
}
.calc-paths-title {
  display: flex; align-items: center; gap: 0.45rem;
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--accent-bright);
  font-family: "Orbitron", "JetBrains Mono", monospace;
  margin-bottom: 0.55rem;
}
.calc-paths-badge {
  width: 1.5rem; height: 1.5rem; flex: 0 0 auto;
  display: grid; place-items: center;
  background: var(--accent); color: #000;
  border-radius: 4px; font-size: 0.8125rem;
  box-shadow: 0 0 10px #ff2d9566, 0 0 20px #ff2d9522;
}
.calc-paths-hint {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.625rem; font-weight: 400; letter-spacing: 0;
  text-transform: none; color: var(--muted);
}
.calc-paths-list { display: flex; flex-direction: column; gap: 0.4rem; }
.calc-path-row {
  display: grid; grid-template-columns: minmax(9rem, .34fr) minmax(0, 1fr);
  align-items: start; gap: 0.35rem 0.75rem;
  font-size: 0.8125rem;
}
.calc-path-item {
  display: inline-flex; align-items: center; gap: 0.35rem;
  min-width: 0; padding-top: .45rem; color: var(--text); font-weight: 600;
}
.calc-path-item .icon, .calc-path-item img { width: 1.25rem; height: 1.25rem; }
.calc-path-options { display: grid; gap: .35rem; min-width: 0; }
.calc-path-option {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .55rem;
  align-items: start; padding: .5rem .6rem; min-width: 0;
  border: 1px solid var(--line); border-radius: 5px;
  background: var(--panel); cursor: pointer;
  transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.calc-path-option:hover { border-color: var(--accent-dim); background: var(--panel2); }
.calc-path-option:focus-within { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-dim); }
.calc-path-option.selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--panel)); }
.calc-path-option input { margin: .15rem 0 0; accent-color: var(--accent); }
.calc-path-option-body { display: grid; gap: .2rem; min-width: 0; font-size: .65rem; line-height: 1.35; }
.calc-path-option-head { display: flex; flex-wrap: wrap; gap: .25rem .5rem; align-items: baseline; }
.calc-path-materials { color: var(--text); font-size: .78rem; overflow-wrap: anywhere; }
.calc-path-selected, .calc-path-not-selected { color: var(--accent-bright); font-size: .58rem; font-weight: 700; text-transform: uppercase; }
.calc-path-not-selected { color: var(--muted); font-weight: 500; }
.calc-path-cost { color: var(--ok); font-weight: 700; }
.calc-path-cost.unavailable { color: var(--muted); font-weight: 400; }
.calc-path-recommended {
  color: var(--ok); font-weight: 800; white-space: nowrap;
}
.calc-path-reason { color: var(--muted); font-size: .58rem; }
.calc-paths-help {
  margin-top: .55rem; color: var(--muted); font-size: .62rem; line-height: 1.45;
}
.calc-paths-help summary { cursor: pointer; color: var(--fg-dim); }
.calc-paths-help summary:hover { color: var(--text); }
.calc-paths-help > span { display: block; margin-top: .3rem; }
@media (max-width: 620px) {
  .calc-path-row { grid-template-columns: 1fr; }
  .calc-path-item { padding-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .calc-path-option { transition: none; }
}
.calc-paths-note {
  font-size: 0.7rem; color: var(--muted); opacity: 0.85;
  margin-top: 0.4rem; line-height: 1.35;
}
.calc-paths-note .cheap { color: var(--accent-bright); font-weight: 600; }

/* ── Inventory dashboard cards ── */
.inv-dashboard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.inv-dash-card {
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.625rem 0.75rem;
  text-align: center;
}
.idc-value {
  font-family: "Orbitron", "JetBrains Mono", monospace;
  font-size: 1.25rem; font-weight: 700;
  color: var(--cyan);
}
.idc-label {
  font-size: 0.6875rem; color: var(--muted);
  margin-top: 0.125rem;
  text-transform: uppercase; letter-spacing: 0.5px;
}

/* ── Inventory workspace layout ── */
.inventory-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}
.inventory-editor, .inventory-overview { min-width: 0; }
.inventory-overview { padding: 0.9rem; }
.inventory-editor-head, .inventory-overview-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.inventory-editor-head { margin-bottom: 1rem; }
.inventory-editor-head h4, .inventory-overview-head h4 {
  margin: 0.2rem 0 0.3rem;
}
.inventory-kicker {
  display: block;
  color: var(--accent-bright);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.inventory-intro {
  max-width: 58ch;
  margin: 0;
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.5;
}
.inventory-local-note, .inventory-overview-note {
  flex: 0 0 auto;
  padding: 0.25rem 0.45rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.56rem;
  line-height: 1.2;
  white-space: nowrap;
}
.inventory-zone-picker {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0.75rem;
  background: color-mix(in srgb, var(--cyan) 5%, var(--panel2));
  border: 1px solid var(--line-bright);
  border-radius: 6px;
}
.inventory-zone-picker label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: min(20rem, 100%);
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.inventory-zone-picker select {
  min-width: min(20rem, 100%);
  font-size: 0.78rem;
}
.inventory-step {
  display: inline-grid;
  place-items: center;
  width: 1.2rem;
  height: 1.2rem;
  margin-right: 0.25rem;
  border: 1px solid var(--cyan);
  border-radius: 50%;
  color: var(--cyan);
  font-size: 0.62rem;
  line-height: 1;
}
.inventory-add-flow {
  display: grid;
  gap: 0.7rem;
  margin-top: 1rem;
  padding: 0.85rem;
  background: color-mix(in srgb, var(--accent) 5%, var(--panel2));
  border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--line));
  border-radius: 7px;
}
.inventory-rapid-entry {
  position: sticky;
  top: 0.75rem;
  z-index: 3;
  display: grid;
  gap: 0.5rem;
  padding: 0.55rem;
  background: color-mix(in srgb, var(--accent) 9%, var(--panel2));
  border: 1px solid color-mix(in srgb, var(--accent) 65%, var(--line));
  border-radius: 5px;
  box-shadow: 0 0.3rem 0.8rem color-mix(in srgb, #000 26%, transparent);
}
.inventory-add-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}
.inventory-add-head strong { color: var(--text); font-size: 0.78rem; }
.inventory-add-hint { color: var(--muted); font-size: 0.61rem; }
.inventory-picker {
  min-width: 0;
  padding: 0.7rem;
  background: color-mix(in srgb, var(--cyan) 4%, var(--panel));
  border: 1px solid var(--line);
  border-radius: 6px;
}
.inventory-picker-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}
.inventory-picker-head strong {
  display: block;
  color: var(--text);
  font-size: 0.7rem;
}
.inventory-picker-note {
  display: block;
  margin-top: 0.15rem;
  color: var(--muted);
  font-size: 0.58rem;
}
.inventory-picker-mode {
  flex: 0 0 auto;
  color: var(--cyan);
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.inventory-picker-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 0 0 auto;
}
.qp-count {
  color: var(--muted);
  font-size: 0.56rem;
  white-space: nowrap;
}
.inventory-add-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 6.5rem auto;
  gap: 0.5rem;
  align-items: end;
}
.inventory-add-fields label, .inventory-item-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  color: var(--muted);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.inventory-field-label { color: var(--muted); }
.inventory-selected-item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  min-height: 2.1rem;
  padding: 0.35rem 0.55rem;
  background: var(--panel);
  border: 1px dashed var(--line-bright);
  border-radius: 4px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.inventory-selected-item.has-selection {
  border-style: solid;
  border-color: var(--cyan);
  color: var(--cyan);
}
.inventory-selected-item .icon,
.inventory-selected-item .icon img,
.inventory-selected-item .icon-badge { width: 1.5rem; height: 1.5rem; flex: 0 0 auto; }
.inventory-add-fields input {
  width: 100%;
  min-width: 0;
  min-height: 2.1rem;
  height: 2.1rem;
  flex: initial;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--line);
  padding: 0.5rem 0.6rem;
  font-size: 0.76rem;
}
.inventory-add-fields > button {
  min-height: 2.1rem;
  padding: 0.45rem 0.75rem;
  background: linear-gradient(135deg, var(--accent), var(--purple));
  color: #fff;
  border: none;
  border-radius: 5px;
  font-size: 0.68rem;
  font-weight: 800;
  white-space: nowrap;
}
.inventory-add-fields > button:hover { box-shadow: var(--glow-pink); }
.inventory-add-fields > button span { color: rgba(255,255,255,.78); }
.inventory-overview-head { margin-bottom: 0.7rem; }
.inventory-controls { margin: 0 0 0.7rem; align-items: stretch; }
.inventory-controls > #inv-search { flex: 1 1 12rem; min-width: 0; }
.inventory-controls button { margin-left: auto; }
#inv-table { min-width: 0; overflow-x: visible; }
#inv-table .inventory-table-desktop { min-width: 0; overflow-x: auto; }
.inventory-table-cards { display: none; }
.inventory-total-card {
  padding: 0.7rem;
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.inventory-total-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.inventory-total-card-item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  font-weight: 700;
}
.inventory-total-card-item .icon,
.inventory-total-card-item .icon img,
.inventory-total-card-item .icon-badge { width: 2rem; height: 2rem; flex: 0 0 auto; }
.inventory-total-qty {
  color: var(--cyan);
  font-family: "Orbitron", "JetBrains Mono", monospace;
  font-size: 0.9rem;
  white-space: nowrap;
}
.inventory-total-card-locations {
  margin-top: 0.55rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--line);
}
.inventory-total-card-label {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--muted);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.inventory-total-card-tags { display: flex; flex-wrap: wrap; gap: 0.2rem; }
.qp-browse {
  border-top: 1px solid var(--line);
  padding-top: 0.55rem;
}
.qp-browse > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  cursor: pointer;
  color: var(--cyan);
  font-size: 0.67rem;
  font-weight: 700;
  list-style-position: inside;
}
.qp-browse > summary:hover { color: var(--accent-bright); }
.qp-browse-note { color: var(--muted); font-size: 0.58rem; font-weight: 400; }
.qp-browse[open] > summary { margin-bottom: 0.55rem; }
.inventory-add-flow, .qp-browse, .quick-pick, .qp-grid { min-width: 0; max-width: 100%; }
.inventory-picker .qp-search { margin-bottom: 0.5rem; }

/* ── Quick-add item picker ── */
.quick-pick { margin-bottom: 0.25rem; }
.qp-cats { display: flex; gap: 0.25rem; flex-wrap: wrap; margin-bottom: 0.375rem; }
.qp-cat {
  font-size: 0.6875rem; padding: 0.2rem 0.55rem;
  border: 1px solid var(--line); border-radius: 3px;
  background: var(--panel); color: var(--muted); cursor: pointer;
  box-shadow: none; letter-spacing: .5px; font-weight: 600;
}
.qp-cat:hover { color: var(--text); border-color: var(--accent-dim); box-shadow: none; transform: none; }
.qp-cat.active {
  background: color-mix(in srgb, var(--accent) 18%, var(--panel));
  color: var(--accent-bright); border-color: var(--accent); font-weight: 600;
}

/* Icon-forward tiles: the art is the thing you scan for, the name is a caption.
   A fixed grid keeps every icon on the same baseline instead of ragged pills. */
.qp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
  gap: 0.3rem; margin-bottom: 0.25rem;
  min-height: 13rem;
  max-height: 13rem; overflow-y: auto;
  overflow-anchor: none;
  align-items: start;
  align-content: start;
}
.qp-item {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 0.2rem;
  padding: 0.4rem 0.25rem 0.3rem;
  border: 1px solid var(--line); border-radius: 5px;
  background: var(--panel2); color: var(--muted); cursor: pointer;
  font-size: 0.5625rem; line-height: 1.25; text-align: center;
  text-transform: none; letter-spacing: 0; font-weight: 500;
  box-shadow: none; transition: border-color .12s, background .12s;
}
/* big, unclipped icon — no dark plate behind it */
.qp-item .icon, .qp-item .icon img { width: 2.5rem; height: 2.5rem; }
.qp-item .icon { margin-right: 0; }
.qp-item .icon img { background: transparent; }
.qp-item .icon-badge { width: 2.5rem; height: 2.5rem; font-size: 1rem; border-radius: 4px; }
/* caption: at most two tidy lines, never a ragged overflow */
.qp-name {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; word-break: break-word; max-width: 100%;
}
/* beats `button:hover` (0,1,1), which would otherwise lift and glow each tile */
.qp-item:hover { border-color: var(--accent-dim); background: var(--panel); color: var(--text); transform: none; box-shadow: none; }
.qp-item.selected {
  border-color: var(--accent); color: var(--accent-bright);
  background: color-mix(in srgb, var(--accent) 12%, var(--panel2));
}
/* quantity already at this zone — a quiet corner badge, not a competing label */
.qp-have {
  position: absolute; top: 2px; right: 3px;
  color: var(--accent-bright); font-size: 0.5625rem; font-weight: 700;
  background: color-mix(in srgb, var(--bg) 75%, transparent);
  border-radius: 3px; padding: 0 3px; pointer-events: none;
}
.qp-mined { position: absolute; top: 2px; left: 3px; font-size: 0.5625rem; opacity: .75; pointer-events: none; }
.qp-manual { margin-top: 0.25rem; }
.qp-manual input { width: 100%; font-size: 0.75rem; }

.zone-row { align-items: center; }
.zone-total { margin-left: auto; font-size: 0.6875rem; }
.zone-body { display: flex; flex-direction: column; gap: 0.375rem; margin: 0.75rem 0; }
.zone-row-item {
  display: flex; align-items: center; gap: 0.625rem;
  background: var(--panel2); border: 1px solid var(--line);
  border-radius: 4px; padding: 0.4375rem 0.625rem;
  flex-wrap: wrap; /* lets the inline move form drop to its own line */
}
.zone-row-item .zr-ic { width: 1.875rem; height: 1.875rem; }
.zone-row-item .zr-ic .icon { width: 1.875rem; height: 1.875rem; }
.zone-row-item .zr-ic .icon img { width: 1.875rem; height: 1.875rem; background: var(--panel); }
/* The name opens the item card, so its hit area must be the TEXT only. With
   `flex: 1 1 auto` it stretched across the whole gap up to the quantity box, so
   clicking near that box — or starting a drag to select the number — landed on
   the link and opened the card unintentionally. */
.zone-row-item .zr-name { font-weight: 600; font-size: 0.8125rem; flex: 0 1 auto; min-width: 0; }
/* The card trigger lives on this inner span, not the flex item — keep it inline
   so its box is exactly the text and can never cover neighbouring blank space. */
.zone-row-item .zr-name .idp-link { display: inline; }
/* The stretching name used to push everything after it to the right. Restore
   that with auto margins instead: whichever comes first absorbs the free space,
   so the layout looks unchanged with or without a "mineable" tag. */
.zone-row-item > .tag.mine { margin-left: auto; }
.zone-row-item .zr-qty { margin-left: auto; }
.zone-row-item .zr-qty input { width: 4.5rem; background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 3px; padding: 0.25rem 0.375rem; font-size: 0.75rem; }
.zone-row-item .zr-x { background: transparent; border: none; color: var(--bad); cursor: pointer; font-size: 0.875rem; padding: 0.25rem 0.375rem; min-width: 1.75rem; min-height: 1.75rem; }
.zone-row-item .zr-x:hover { color: #ff5577; }
.zone-addrow { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.25rem; }
.zone-addrow.inventory-add-flow { display: grid; align-items: stretch; flex-wrap: initial; }
.zone-addrow .qp-manual input { flex: 1 1 200px; min-width: 160px; background: var(--panel); color: var(--text); border: 1px solid var(--line); padding: 0.4375rem 0.5625rem; font-size: 0.75rem; }
.zone-addrow input[type="number"], .zone-addrow #inv-qty { width: 5rem; background: var(--panel); color: var(--text); border: 1px solid var(--line); padding: 0.4375rem 0.5625rem; font-size: 0.75rem; }
/* DIRECT child only. As `.zone-addrow button` this (0,1,1) also matched every
   quick-picker tile nested inside, overriding .qp-item/.qp-cat (0,1,0) and
   painting the whole grid in the loud accent gradient. */
.zone-addrow > button { background: linear-gradient(135deg, var(--accent), var(--purple)); color: #fff; border: none; border-radius: 4px; padding: 0.4375rem 0.875rem; font-weight: 700; cursor: pointer; font-size: 0.6875rem; }
.zone-addrow > button:hover { box-shadow: var(--glow-pink); }

/* ── Zone move bar ── */
.zone-movebar { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.5rem; padding: 0.5rem 0.625rem; background: var(--panel2); border: 1px solid var(--accent-dim); border-radius: 6px; }
/* An author `display:flex` outranks the UA [hidden] rule, so without this the
   bar stayed on screen (with a stale count) even with nothing selected. */
.zone-movebar[hidden] { display: none; }
.movebar-hint { font-size: 0.625rem; color: var(--muted); flex-basis: 100%; }
.movebar-hint b { color: var(--cyan); font-weight: 700; }
.zone-movebar label { font-size: 0.6875rem; color: var(--muted); display: flex; align-items: center; gap: 0.375rem; }
.zone-movebar select { background-color: var(--panel); color: var(--text); border: 1px solid var(--line); padding: 0.25rem 1.4rem 0.25rem 0.5rem; font-size: 0.6875rem; border-radius: 4px; }
.zone-movebar button { background: var(--accent); color: #fff; border: none; border-radius: 4px; padding: 0.25rem 0.625rem; font-size: 0.6875rem; cursor: pointer; font-weight: 600; }
.zone-movebar button.ghost { background: transparent; color: var(--muted); border: 1px solid var(--line); }
.zr-cb { display: flex; align-items: center; }
/* rem so it keeps pace with the row text under the font slider — the plan's
   own checkboxes already scale, this one was stuck at a fixed 13px */
.zr-cb input { accent-color: var(--cyan); width: 0.8rem; height: 0.8rem; cursor: pointer; }

/* quick-picker search + states */
.qp-search {
  width: 100%; box-sizing: border-box; margin-bottom: 0.375rem;
  background: var(--panel); color: var(--text);
  border: 1px solid var(--line); border-radius: 4px;
  padding: 0.3rem 0.5rem; font-size: 0.75rem; font-family: inherit;
}
.qp-search:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 1px var(--cyan); }
/* grid-wide message rows (no matches / "+N more") */
.qp-empty { font-size: 0.6875rem; padding: 0.25rem 0; grid-column: 1 / -1; }

/* Keep the stock ledger and add-stock workflow as the primary full-width
   surface. The workspace overview follows below it so the repeated stocking
   task never gets squeezed into a skinny side rail. */
@media (max-width: 1180px) {
  .inventory-layout { grid-template-columns: 1fr; }
}
@media (min-width: 1181px) {
  .inventory-layout { grid-template-columns: minmax(0, 1fr); }
  .inventory-add-flow { overflow-anchor: none; }
  .qp-grid { max-height: none; overflow-y: visible; }
}
@media (min-width: 1800px) {
  .inventory-layout {
    gap: 1.25rem;
  }
  .inventory-editor-head { margin-bottom: 1.2rem; }
  .inventory-add-flow { padding: 1rem; }
  .qp-grid { grid-template-columns: repeat(auto-fill, minmax(6.25rem, 1fr)); gap: 0.4rem; }
}
@media (min-width: 3000px) {
  .inventory-layout { gap: 1.5rem; }
  .inventory-add-fields { grid-template-columns: minmax(0, 1fr) 8rem auto; }
  .inventory-intro { font-size: 0.75rem; }
  .qp-grid { grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: 0.45rem; }
}
@media (max-width: 720px) {
  main { padding-bottom: 5rem; }
  .inventory-editor, .inventory-overview { padding: 0.75rem; }
  .inventory-editor-head, .inventory-overview-head { flex-direction: column; gap: 0.55rem; }
  .inventory-local-note, .inventory-overview-note { align-self: flex-start; }
  .inventory-zone-picker { align-items: stretch; flex-direction: column; gap: 0.55rem; }
  .inventory-zone-picker label, .inventory-zone-picker select { min-width: 0; width: 100%; }
  .inventory-zone-picker .zone-total { margin-left: 0; }
  .inventory-add-head { align-items: flex-start; flex-direction: column; gap: 0.3rem; }
  .inventory-picker-head { flex-direction: column; gap: 0.25rem; }
  .inventory-picker-mode { align-self: flex-start; }
  .inventory-picker-meta { align-items: flex-start; flex-direction: column; gap: 0.15rem; }
  .inventory-add-fields { grid-template-columns: minmax(0, 1fr) 5.5rem; }
  .inventory-add-fields > button { grid-column: 1 / -1; width: 100%; }
  .inventory-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem; align-items: center; }
  .inventory-controls > #inv-search { grid-column: 1 / -1; width: 100%; }
  .inventory-controls button { margin-left: 0; }
  .qp-browse > summary { align-items: flex-start; flex-direction: column; gap: 0.15rem; }
  .qp-cats { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 0.25rem; scrollbar-width: thin; }
  .qp-cat { flex: 0 0 auto; min-height: 2rem; }
  .qp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 11rem; max-height: 11rem; }
  .qp-item { min-height: 5rem; }
  .inventory-table-desktop { display: none; }
  .inventory-table-cards { display: grid; gap: 0.5rem; }
  .zone-row-item { gap: 0.45rem; padding: 0.5rem; }
  .zone-row-item .zr-name { flex: 1 1 8rem; }
  .zone-row-item > .tag.mine { margin-left: 0; }
  .zone-row-item .zr-qty { margin-left: auto; }
  .zone-row-item .zr-move-btn { order: 5; }
  .zone-row-item .zr-x { order: 6; }
}

/* per-row partial move */
.zr-move-btn {
  background: transparent; border: 1px solid var(--cyan-dim); border-radius: 4px;
  color: var(--cyan); cursor: pointer; font-size: 0.625rem;
  padding: 0.2rem 0.5rem; line-height: 1.2; white-space: nowrap;
  text-transform: none; letter-spacing: 0; font-weight: 600; box-shadow: none;
}
.zr-move-btn:hover { border-color: var(--cyan); background: color-mix(in srgb, var(--cyan) 12%, transparent); box-shadow: none; transform: none; }
/* quantity presets inside the row's move form */
.zr-move-presets { display: inline-flex; gap: 0.15rem; }
.zr-preset {
  background: var(--panel); color: var(--muted);
  border: 1px solid var(--line); border-radius: 3px;
  padding: 0.1rem 0.4rem; font-size: 0.625rem; cursor: pointer;
  text-transform: none; letter-spacing: 0; font-weight: 600; box-shadow: none; min-width: 1.7rem;
}
.zr-preset:hover { border-color: var(--cyan); color: var(--cyan); box-shadow: none; transform: none; }
.zr-move {
  flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem;
  margin-top: 0.35rem; padding: 0.4rem 0.5rem;
  background: var(--panel2); border: 1px solid var(--cyan); border-radius: 5px;
}
.zr-move[hidden] { display: none; }
.zr-move-lbl { font-size: 0.6875rem; color: var(--muted); }
.zr-move-lbl b { color: var(--text); font-weight: 700; }
.zr-move-qty {
  width: 5rem; background: var(--panel); color: var(--text);
  border: 1px solid var(--line); border-radius: 3px; padding: 0.15rem 0.3rem; font-size: 0.6875rem;
}
/* background-COLOR, never the shorthand: the shorthand resets background-repeat
   and -position, and every theme re-applies the dropdown arrow image afterwards,
   which then tiled across the whole control. */
.zr-move-to {
  background-color: var(--panel); color: var(--text); border: 1px solid var(--line);
  border-radius: 3px; padding: 0.15rem 1.3rem 0.15rem 0.4rem; font-size: 0.6875rem; max-width: 12rem;
}
.zr-move-go {
  background: var(--cyan); color: #000; border: none; border-radius: 3px;
  padding: 0.2rem 0.6rem; font-size: 0.6875rem; font-weight: 700; cursor: pointer;
}
.zr-move-cancel {
  background: transparent; color: var(--muted); border: 1px solid var(--line);
  border-radius: 3px; padding: 0.2rem 0.5rem; font-size: 0.6875rem; cursor: pointer;
}

/* ── Inventory charts section ── */
.inv-charts-section { margin-bottom: 1rem; background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: 0; }
.inv-charts-summary { padding: 0.625rem 1rem; cursor: pointer; font-size: 0.8rem; color: var(--muted); user-select: none; }
.inv-charts-summary:hover { color: var(--cyan); }
/* two-up grid so the four charts pair off evenly instead of straggling */
.inv-charts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 1rem 1.25rem; padding: 0 1rem 1rem 1rem;
}
.inv-chart-wrap {
  min-width: 0; background: var(--panel); border: 1px solid var(--line);
  border-radius: 6px; padding: 0.7rem 0.8rem;
}
.inv-chart-wrap h5 {
  font-size: 0.7rem; color: var(--accent-bright); text-transform: uppercase;
  letter-spacing: 0.5px; margin: 0 0 0.5rem; font-weight: 700;
}
.inv-chart-wrap canvas { max-height: 260px; }
.inv-charts-note { padding: 0 1rem 1rem; font-size: 0.75rem; }
.inv-charts-note[hidden] { display: none; }

/* ── Item detail slide-out panel ── */
.inv-detail-overlay { display: none; }
.inv-detail-overlay.open { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 1000; display: flex; justify-content: flex-end; }
.inv-detail-panel { width: 380px; max-width: 90vw; height: 100%; background: var(--panel); border-left: 1px solid var(--line); padding: 1rem; overflow-y: auto; animation: slideIn 0.2s ease-out; }
@keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
.idp-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; }
.idp-name { font-family: "Orbitron"; font-size: 1rem; font-weight: 700; color: var(--cyan); }
.idp-close { margin-left: auto; background: none; border: none; color: var(--muted); font-size: 1.25rem; cursor: pointer; }
.idp-total { font-size: 0.875rem; margin-bottom: 0.75rem; }
.idp-link { cursor: pointer; color: var(--cyan); text-decoration: underline dotted; }
.idp-link:hover { color: var(--accent-bright); }
.idp-tags { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-bottom: 0.5rem; }
.idp-recipe { font-size: 0.75rem; padding: 0.2rem 0; border-bottom: 1px solid var(--line); }
.idp-calc { margin-top: 1rem; width: 100%; background: var(--accent); color: #fff; border: none; border-radius: 4px; padding: 0.5rem; font-weight: 600; font-size: 0.75rem; cursor: pointer; }
.idp-calc:hover { box-shadow: var(--glow-pink); }
.idp-close:hover { color: var(--accent); }

/* ── Screenshot scanner ── */
.ss-hint { font-size: 0.6875rem; color: var(--muted); margin: 0.25rem 0 0.5rem; }
.ss-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem; }
.ss-head .idp-close { margin-left: auto; }
.ss-container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(19rem, 23rem);
  gap: 1rem;
  flex: 1 1 auto;
  min-height: 0;
}
.ss-zoom-wrap {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  max-height: none;
  flex: none;
  padding: 0.25rem;
  background: color-mix(in srgb, var(--bg) 65%, var(--panel));
  border: 1px solid var(--line);
  border-radius: 6px;
}
.ss-container canvas { display: block; max-width: 100%; border-radius: 4px; }
.ss-matches {
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: none;
  min-height: 0;
  overflow: hidden;
  padding: 0.65rem;
  background: color-mix(in srgb, var(--panel2) 75%, var(--panel));
  border: 1px solid var(--line);
  border-radius: 6px;
}
.ss-matches-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.ss-matches-head h5 { margin: 0 0 0.45rem; }
.ss-matches-head span { color: var(--muted); font-size: 0.55rem; }
.ss-matches-list { min-height: 0; flex: 1 1 auto; max-height: none; overflow: auto; }
.ss-matches .vr-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--line);
}
.ss-matches .vr-actions button { flex: 1 1 8rem; }
.ss-match-item { display: flex; align-items: center; gap: 0.3rem; padding: 0.15rem 0; font-size: 0.6875rem; border-bottom: 1px solid var(--line); }
.ss-match-name { flex: 1; }
.ss-qty-preview { width: 4.5rem; height: 1.8rem; object-fit: contain; image-rendering: pixelated; background: #161616; border: 1px solid var(--line); border-radius: 3px; }
.ss-calibrated { color: var(--good); font-size: 0.5rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
.ss-match-qty input { width: 50px; font-size: 0.6875rem; padding: 0.1rem; }
.ss-match-rm { background: none; border: none; color: var(--bad); cursor: pointer; font-size: 0.75rem; }
.ss-scope-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem; margin-bottom: 0.45rem; color: var(--muted); font-size: 0.58rem; }
.ss-scope, .ss-candidate {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--panel2);
  color: var(--muted);
  cursor: pointer;
  font-size: 0.58rem;
  padding: 0.25rem 0.4rem;
  text-transform: none;
  letter-spacing: 0;
  box-shadow: none;
}
.ss-scope:hover, .ss-scope.active { border-color: var(--cyan); color: var(--cyan); box-shadow: none; transform: none; }
.ss-candidate-picker { margin-bottom: 0.5rem; padding: 0.45rem; border: 1px solid var(--cyan-dim); border-radius: 5px; background: color-mix(in srgb, var(--cyan) 5%, var(--panel2)); }
.ss-candidate-picker b { display: block; color: var(--text); font-size: 0.62rem; }
.ss-candidate-hint { display: block; margin: 0.15rem 0 0.35rem; color: var(--muted); font-size: 0.55rem; line-height: 1.35; }
.ss-candidate-search { width: 100%; margin-bottom: 0.35rem; font-size: 0.65rem; }
.ss-candidate-grid { display: flex; flex-wrap: wrap; gap: 0.25rem; max-height: 10rem; overflow-y: auto; }
.ss-candidate { flex: 1 1 6rem; min-width: 5.5rem; flex-direction: column; justify-content: center; min-height: 3.3rem; text-align: center; }
.ss-candidate:hover { border-color: var(--cyan); color: var(--cyan); box-shadow: none; transform: none; }
.ss-candidate .icon, .ss-candidate .icon img, .ss-candidate .icon-badge { width: 1.4rem; height: 1.4rem; }
.ss-candidate-empty { color: var(--muted); font-size: 0.6rem; padding: 0.35rem; }
.ss-confirmed-label { margin: 0.4rem 0 0.2rem; color: var(--accent-bright); font-size: 0.58rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
/* Screenshot mode: panel gets much wider, centered */
.inv-detail-panel.ss-mode {
  display: flex;
  flex-direction: column;
  width: min(94vw, 1480px);
  max-width: none;
  height: min(90vh, 900px);
  max-height: calc(100vh - 2rem);
  overflow: hidden;
}
.inv-detail-overlay.ss-center { justify-content: center !important; align-items: flex-start; padding-top: 1rem; }
.idp-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.inv-detail-panel h5 { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 1px; color: var(--accent-bright); margin: 0.875rem 0 0.375rem; }
.idp-table { width: 100%; border-collapse: collapse; font-size: 0.75rem; }
.idp-table th { text-align: left; color: var(--muted); font-weight: 600; padding: 0.2rem 0; border-bottom: 1px solid var(--line); }
.idp-table td { padding: 0.2rem 0; border-bottom: 1px solid var(--line); }
.idp-table .r { text-align: right; font-variant-numeric: tabular-nums; }

@media (max-width: 720px) {
  .inv-detail-overlay.ss-center {
    align-items: stretch;
    padding: 0.5rem;
  }
  .inv-detail-panel.ss-mode {
    width: 100%;
    max-width: none;
    height: calc(100dvh - 1rem);
    max-height: calc(100dvh - 1rem);
    padding: 0.75rem;
    border: 1px solid var(--line-bright);
    border-radius: 8px;
    animation: none;
  }
  .ss-container {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) minmax(11rem, 0.85fr);
    min-height: 0;
    gap: 0.5rem;
  }
  .ss-zoom-wrap {
    width: 100%;
    max-height: none;
  }
  .ss-zoom-wrap canvas {
    width: auto !important;
    max-width: 100%;
    height: auto !important;
    margin: 0 auto;
  }
  .ss-matches {
    width: 100%;
    min-width: 0;
    max-width: none;
    max-height: none;
  }
  .ss-matches-list { max-height: none; }
  .ss-match-item { min-height: 2rem; }
  .ss-candidate-grid { max-height: 24vh; }
  .ss-candidate { flex-basis: 5.25rem; }
}

/* brief highlight when we scroll something into view for the user */
.flash-target { animation: flash-target 1.2s ease-out; border-radius: 6px; }
@keyframes flash-target {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  25%      { box-shadow: 0 0 0 2px var(--accent), 0 0 14px rgba(255,45,149,.45); }
}

/* =====================================================================
   ITEM DETAIL POPUP (modal overlay)
   ===================================================================== */
.item-popup-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,.7); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .2s;
}
.item-popup-overlay.show { opacity: 1; }
.item-popup {
  background: var(--panel); border: 1px solid var(--line-bright);
  border-radius: 8px; padding: 1.25rem;
  max-width: 520px; width: 90vw; max-height: 80vh;
  overflow-y: auto; position: relative;
  box-shadow: 0 8px 32px rgba(0,0,0,.5), var(--glow-pink);
}
.ip-close {
  position: absolute; top: 0.5rem; right: 0.75rem;
  background: transparent; border: none; color: var(--muted);
  font-size: 1.5rem; cursor: pointer; padding: 0.25rem; line-height: 1;
  box-shadow: none; font-weight: normal; text-transform: none; letter-spacing: normal;
}
.ip-close:hover { color: var(--accent-bright); box-shadow: none; }
.ip-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }
.ip-header .ip-icon .icon { width: 3rem; height: 3rem; }
.ip-header .ip-icon .icon img { width: 3rem; height: 3rem; }
.ip-header h2 { margin: 0 0 0.25rem; font-size: 1rem; font-family: "Orbitron", sans-serif; }
.ip-tags { display: flex; gap: 0.25rem; flex-wrap: wrap; }
.ip-section { margin-top: 0.625rem; padding-top: 0.5rem; border-top: 1px solid var(--line); }
.ip-label { font-size: 0.625rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--cyan); margin-bottom: 0.375rem; }
.ip-recipe { display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap; }
.ip-chip { display: inline-flex; align-items: center; gap: 0.25rem; background: var(--panel2); border: 1px solid var(--line); border-radius: 4px; padding: 0.25rem 0.5rem; font-size: 0.75rem; }
.ip-chip .icon { width: 1.25rem; height: 1.25rem; }
.ip-chip .icon img { width: 1.25rem; height: 1.25rem; }
.ip-plus { color: var(--accent); font-weight: 700; }
.ip-batch { font-size: 0.625rem; color: var(--muted); margin-top: 0.25rem; }
.ip-grid { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.ip-link {
  display: inline-flex; align-items: center; gap: 0.25rem;
  background: var(--panel2); border: 1px solid var(--line);
  border-radius: 4px; padding: 0.25rem 0.5rem; cursor: pointer;
  font-size: 0.6875rem; color: var(--text); font-family: inherit;
  text-transform: none; letter-spacing: normal; font-weight: normal;
  box-shadow: none; transition: border-color .12s, box-shadow .12s;
}
.ip-link:hover { border-color: var(--accent-dim); box-shadow: 0 0 6px #ff2d9522; }
.ip-link .icon { width: 1.25rem; height: 1.25rem; }
.ip-link .icon img { width: 1.25rem; height: 1.25rem; }
.ip-inv { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.ip-stats { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.stat-badge { display: inline-block; font-size: 0.6875rem; background: var(--panel2); border: 1px solid var(--line); border-radius: 3px; padding: 0.125rem 0.5rem; color: var(--text); }
.ip-calc { display: block; width: 100%; margin-top: 0.25rem; }

/* =====================================================================
   TOAST + EMPTY STATE
   ===================================================================== */
#toast-area {
  position: fixed; bottom: 1rem; right: 1rem; z-index: 100;
  display: flex; flex-direction: column; gap: 0.5rem; pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: 0.75rem;
  background: var(--panel); border: 1px solid var(--line-bright);
  border-left: 3px solid var(--accent); border-radius: 4px;
  padding: 0.625rem 1rem; font-size: 0.75rem; color: var(--text);
  box-shadow: 0 4px 16px rgba(0,0,0,.4); pointer-events: auto;
  opacity: 0; transform: translateX(1.25rem);
  transition: opacity .25s, transform .25s; max-width: 380px;
}
.toast > span { min-width: 0; overflow-wrap: anywhere; }
.toast-close {
  flex: 0 0 44px; width: 44px; height: 44px; min-width: 44px; min-height: 44px;
  display: inline-grid; place-items: center; padding: 0;
  background: transparent; border: 1px solid var(--line-bright); color: var(--text);
  box-shadow: none; font-size: 1.1rem; line-height: 1;
}
.toast-close:hover { border-color: var(--accent); box-shadow: none; }
.toast.show { opacity: 1; transform: translateX(0); }
.toast.success { border-left-color: var(--cyan); box-shadow: 0 4px 16px rgba(0,0,0,.4), 0 0 10px #00f0ff22; }
.toast.error   { border-left-color: var(--bad); box-shadow: 0 4px 16px rgba(0,0,0,.4), 0 0 10px #ff225522; }
@media (max-width: 767px) {
  #toast-area { left: 0.75rem; right: 0.75rem; bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
  .toast { width: 100%; max-width: none; }
}

.empty-state {
  text-align: center; padding: 2.5rem 1.25rem;
}
.empty-state-icon {
  font-size: 3rem; margin-bottom: 0.75rem;
  animation: icon-glow 3s ease-in-out infinite;
}
@keyframes icon-glow {
  0%, 100% { filter: drop-shadow(0 0 6px var(--accent)); }
  50%      { filter: drop-shadow(0 0 16px var(--accent)); }
}
.empty-state h3 { font-family: "Orbitron", sans-serif; font-size: 1rem; margin-bottom: 0.5rem; }
.empty-state p { color: var(--muted); font-size: 0.8125rem; margin-bottom: 1.25rem; }
.empty-state-actions { display: flex; gap: 0.625rem; justify-content: center; flex-wrap: wrap; }

/* =====================================================================
   LIGHT THEME
   ===================================================================== */
[data-theme="light"] {
  --bg: #e8e6f0; --bg2: #f0eef5; --panel: #ffffff; --panel2: #f5f4fa;
  --line: #c8c6d8; --line-bright: #a8a6c0; --text: #1a1830; --muted: #57556d;
  --accent: #c01860; --accent-bright: #b01255; --accent-dim: #a01050;
  --cyan: #00658f; --cyan-dim: #005880; --purple: #5520aa; --purple-dim: #401880;
  --warn: #c01860; --bad: #cc0044; --good: #00658f; --surplus: #8f5400;
  --glow-pink: 0 0 8px #c0186044, 0 0 20px #c0186022;
  --glow-cyan: 0 0 8px #0070a044, 0 0 20px #0070a022;
  --glow-purple: 0 0 8px #5520aa44, 0 0 20px #5520aa22;
  --glow-surplus: 0 0 6px #b4530944;
  --cat-medical: #16a34a; --cat-ammo: #2563eb; --cat-weapons: #dc2626;
  --cat-food: #d97706; --cat-implants: #9333ea; --cat-alien: #db2777; --cat-armor: #ea580c;
}
[data-theme="light"] body { background: var(--bg); }
[data-theme="light"] body::before {
  background-image: linear-gradient(rgba(0,112,160,.04) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(0,112,160,.04) 1px, transparent 1px);
}
[data-theme="light"] body::after {
  background: repeating-linear-gradient(0deg, transparent 0px, transparent 3px, rgba(0,0,0,.03) 3px, rgba(0,0,0,.03) 4px);
}
[data-theme="light"] header { background: linear-gradient(180deg, #ffffff 0%, #f0eef5 100%); }
[data-theme="light"] .crest { background: #ffffff; text-shadow: 0 0 6px var(--accent); animation-duration: 4s; }
[data-theme="light"] tbody tr:hover { background: rgba(192,24,96,.04); }
[data-theme="light"] input:focus { box-shadow: 0 0 6px #c0186044; }
[data-theme="light"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6' fill='%23c01860'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center; background-size: 10px 6px;
}
[data-theme="light"] .item-card.selected { background: rgba(192,24,96,.05); }
[data-theme="light"] .icon img { background: #eeeeee; }
[data-theme="light"] .bulk-bar { box-shadow: 0 -4px 16px rgba(0,0,0,.1); }
[data-theme="light"] .card { box-shadow: 0 1px 2px rgba(0,0,0,.08); }
[data-theme="light"] .playerbar { background: #f5f4fa; }
[data-theme="light"] .toast { box-shadow: 0 4px 16px rgba(0,0,0,.1); }
[data-theme="light"] .plan-legend, [data-theme="light"] .dashboard { background: var(--panel2); }
[data-theme="light"] .plan-summary {
  background: rgba(255,255,255,.92);
  box-shadow: 0 2px 20px rgba(0,0,0,.08), 0 0 0 1px rgba(192,24,96,.08);
}
[data-theme="light"] .section::before { opacity: 0.2; }
[data-theme="light"] header::after { opacity: .35; }
[data-theme="light"] .crest::after { background: linear-gradient(180deg, transparent, rgba(192,24,96,.10), transparent); }
[data-theme="light"] .mat-bar-fill::before { background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent); background-size: 200% 100%; }
[data-theme="light"] ::selection { background: var(--accent); color: #fff; }
[data-theme="light"] .toast.success { box-shadow: 0 4px 16px rgba(0,0,0,.1); }
[data-theme="light"] .toast.error { box-shadow: 0 4px 16px rgba(0,0,0,.1); }
[data-theme="light"] .apply-plan { box-shadow: 0 0 16px rgba(192,24,96,.15), 0 2px 8px rgba(0,0,0,.1); }
[data-theme="light"] .apply-plan:hover { box-shadow: 0 0 24px rgba(192,24,96,.25), 0 4px 12px rgba(0,0,0,.15); }

/* ═══════════════════════════════════════════════════════════════════════
/* ═══════════════════════════════════════════════════════════════════════
/* ═══════════════════════════════════════════════════════════════════════
   TRANS THEME — blue + pink neon on light base
   ═══════════════════════════════════════════════════════════════════════ */
[data-theme="trans"] {
  --bg: #eef2ff; --bg2: #e4eafc; --panel: #ffffff; --panel2: #f5f2fa;
  --line: #c8d4f0; --line-bright: #a0b0e0; --text: #1a1a30; --muted: #626284;
  --accent: #0070a0; --accent-bright: #00658f; --accent-dim: #005880;
  --cyan: #b01855; --cyan-dim: #8b123f;
  --purple: #704090; --purple-dim: #653780;
  --warn: #a3154b; --bad: #b32647; --good: #00658f;
  --surplus: #8f5400;
  --glow-pink: 0 0 12px #f598b044, 0 0 30px #f598b822;
  --glow-cyan: 0 0 12px #4dc8f044, 0 0 30px #4dc8f022;
  --glow-purple: 0 0 12px #d0b0f044, 0 0 30px #d0b0f022;
  --glow-surplus: 0 0 8px #e0a03044;
  --cat-medical: #22c55e; --cat-ammo: #3b82f6; --cat-weapons: #ef4444;
  --cat-food: #f59e0b; --cat-implants: #a855f7; --cat-drugs: #22d3ee;
  --cat-alien: #ec4899; --cat-armor: #f97316; --cat-other: #6b7280;
}
[data-theme="trans"] body { background: var(--bg); }
[data-theme="trans"] body::before {
  background-image: linear-gradient(rgba(77,200,240,.04) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(245,152,176,.04) 1px, transparent 1px);
}
[data-theme="trans"] body::after {
  background: repeating-linear-gradient(0deg, transparent 0px, transparent 3px, rgba(0,0,0,.02) 3px, rgba(0,0,0,.02) 4px);
}
[data-theme="trans"] header { background: linear-gradient(180deg, #ffffff 0%, #f5f0fa 100%); }
[data-theme="trans"] header::after {
  background: linear-gradient(90deg, #4dc8f0, #f598b0, #ffffff, #f598b0, #4dc8f0);
  background-size: 200% 100%; opacity: .75; height: 3px;
  box-shadow: 0 0 10px rgba(77,200,240,.4), 0 0 20px rgba(245,152,176,.3);
  animation: strip-flow 9s linear infinite;
}
[data-theme="trans"] .crest { background: #fff; text-shadow: 0 0 8px var(--accent); animation-duration: 4s; }
[data-theme="trans"] tbody tr:hover { background: rgba(77,200,240,.05); }
[data-theme="trans"] input:focus, [data-theme="trans"] select:focus { box-shadow: 0 0 8px rgba(77,200,240,.4); }
[data-theme="trans"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6' fill='%230070a0'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center; background-size: 10px 6px;
}
[data-theme="trans"] .tab.active { border-bottom-color: var(--accent); color: var(--accent); }
[data-theme="trans"] .gear-stat-panel h4 { color: var(--accent); }

/* ═══════════════════════════════════════════════════════════════════════
   PRIDE THEME — rainbow neon on dark void
   Rainbow is poured into the chrome (bg, crest, tabs, buttons, focus,
   edges) so it reads as designed, not a flat default + one strip.
   ═══════════════════════════════════════════════════════════════════════ */
[data-theme="pride"] {
  --bg: #0a0612; --bg2: #120a22; --panel: #18142a; --panel2: #120e20;
  --line: #2a2248; --line-bright: #453a78;
  --text: #f0e8ff; --muted: #a99fd0;
  --accent: #ff2d95; --accent-bright: #ff6bb5; --accent-dim: #d81b60;
  --cyan: #00e5ff; --cyan-dim: #00b8d4;
  --purple: #b388ff; --purple-dim: #7c4dff;
  --warn: #ff9100; --bad: #ff1744; --good: #00e676;
  --surplus: #ffea00;
  /* rainbow gradient stops + a moving conic for the crest/buttons */
  --rainbow: linear-gradient(90deg, #ff2d95, #ff6d00, #ffea00, #00e676, #00e5ff, #d500f9, #ff2d95);
  --rainbow-soft: linear-gradient(90deg, #ff2d9544, #ff910044, #ffea0044, #00e67644, #00e5ff44, #d500f944, #ff2d9544);
  --glow-pink: 0 0 16px #ff2d9566, 0 0 40px #ff2d9522;
  --glow-cyan: 0 0 16px #00e5ff66, 0 0 40px #00e5ff22;
  --glow-purple: 0 0 16px #b388ff66, 0 0 40px #b388ff22;
  --glow-surplus: 0 0 10px #ffea0066;
  --cat-medical: #00e676; --cat-ammo: #448aff; --cat-weapons: #ff1744;
  --cat-food: #ff9100; --cat-implants: #d500f9; --cat-drugs: #00e5ff;
  --cat-alien: #ff4081; --cat-armor: #ff6d00; --cat-other: #90a4ae;
}
/* animated rainbow aurora wash behind the whole app */
[data-theme="pride"] body {
  background:
    radial-gradient(ellipse at 12% -5%, rgba(255,45,149,.18) 0%, transparent 42%),
    radial-gradient(ellipse at 88% -5%, rgba(0,229,255,.15) 0%, transparent 42%),
    radial-gradient(ellipse at 50% 105%, rgba(179,136,255,.18) 0%, transparent 45%),
    var(--bg);
}
[data-theme="pride"] body::before {
  background-image: linear-gradient(rgba(179,136,255,.05) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(0,229,255,.05) 1px, transparent 1px);
}
[data-theme="pride"] body::after {
  background: repeating-linear-gradient(0deg, transparent 0px, transparent 3px, rgba(0,0,0,.05) 3px, rgba(0,0,0,.05) 4px);
}
[data-theme="pride"] header {
  background: linear-gradient(180deg, #1a1030 0%, #0e0a20 100%);
  border-bottom: 1px solid transparent;
  background-image:
    linear-gradient(180deg, #1a1030 0%, #0e0a20 100%),
    var(--rainbow-soft);
  background-size: 100% 100%, 200% 100%;
  background-blend-mode: normal, overlay;
  animation: pride-header-bg 8s linear infinite;
}
@keyframes pride-header-bg { from { background-position: 0 0, 0 0; } to { background-position: 0 0, 200% 0; } }
[data-theme="pride"] header::after {
  background: var(--rainbow);
  background-size: 200% 100%; opacity: 1; height: 3px;
  box-shadow: 0 0 14px rgba(255,45,149,.5), 0 0 28px rgba(0,229,255,.4), 0 0 42px rgba(213,0,249,.4);
  animation: strip-flow 4.5s linear infinite;
}
/* crest = rotating rainbow ring */
[data-theme="pride"] .crest {
  border: 1.5px solid transparent;
  border-radius: 6px;
  background:
    linear-gradient(#0a0a14, #0a0a14) padding-box,
    var(--rainbow) border-box;
  background-size: 100% 100%, 200% 100%;
  color: #fff;
  text-shadow: 0 0 8px rgba(255,255,255,.7), 0 0 16px rgba(179,136,255,.5);
  box-shadow: 0 0 14px rgba(255,45,149,.3), 0 0 26px rgba(255,234,0,.12), 0 0 38px rgba(0,230,118,.15), 0 0 50px rgba(0,229,255,.2), inset 0 0 22px rgba(179,136,255,.12);
  animation: crest-pulse 3s ease-in-out infinite, pride-ring-spin 6s linear infinite;
}
[data-theme="pride"] .crest::after { background: linear-gradient(180deg, transparent, rgba(255,255,255,.18), transparent); }
@keyframes pride-ring-spin { from { background-position: 0 0, 0 0; } to { background-position: 0 0, 200% 0; } }
[data-theme="pride"] tbody tr:hover { background: rgba(179,136,255,.08); }
/* rainbow focus ring — sweep through the spectrum */
[data-theme="pride"] input:focus, [data-theme="pride"] select:focus {
  border-color: #b388ff;
  animation: focus-pulse 1.6s ease-in-out infinite, pride-focus-rainbow 3s linear infinite;
}
@keyframes pride-focus-rainbow {
  0%   { outline: 1px solid #ff2d95; outline-offset: 1px; }
  20%  { outline: 1px solid #ff9100; outline-offset: 1px; }
  40%  { outline: 1px solid #ffea00; outline-offset: 1px; }
  60%  { outline: 1px solid #00e676; outline-offset: 1px; }
  80%  { outline: 1px solid #00e5ff; outline-offset: 1px; }
  100% { outline: 1px solid #d500f9; outline-offset: 1px; }
}
[data-theme="pride"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6' fill='%23b388ff'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center; background-size: 10px 6px;
}
/* active tab = rainbow underline + breathing */
[data-theme="pride"] .tab.active {
  border-bottom-color: transparent;
  border-image: var(--rainbow) 1;
  color: #fff;
  background: linear-gradient(180deg, transparent 60%, rgba(255,255,255,.07) 100%);
  text-shadow: 0 0 8px rgba(255,255,255,.5), 0 0 16px rgba(179,136,255,.35);
  animation: tab-glow 3s ease-in-out infinite, pride-tab-rainbow 5s linear infinite;
}
[data-theme="pride"] .tab.active { background-size: 100% 100%, 200% 100%; }
@keyframes pride-tab-rainbow { from { background-position: 0 0, 0 0; } to { background-position: 0 0, 200% 0; } }
[data-theme="pride"] .gear-stat-panel h4 {
  background: var(--rainbow); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  animation: pride-stat-rainbow 4s linear infinite;
}
/* buttons show the FULL spectrum at once (static 100% — no sliding slice) */
[data-theme="pride"] button {
  background: var(--rainbow);
  background-size: 100% 100%;
  color: #0a0612; font-weight: 700;
  text-shadow: none;
  box-shadow: 0 0 10px rgba(255,45,149,.22), 0 0 18px rgba(255,234,0,.12), 0 0 26px rgba(0,229,255,.18);
}
[data-theme="pride"] button:hover { box-shadow: 0 0 20px rgba(255,45,149,.45), 0 0 30px rgba(0,230,118,.25), 0 0 42px rgba(0,229,255,.3); transform: translateY(-1px); }
@keyframes pride-btn-flow { from { background-position: 0 0; } to { background-position: 200% 0; } }
[data-theme="pride"] .apply-plan {
  background: linear-gradient(90deg, #ff2d95, #ff6d00, #ffea00, #00e676, #00e5ff, #d500f9, #ff2d95);
  background-size: 100% 100%;
  color: #fff; text-shadow: 0 0 8px rgba(0,0,0,.5);
}
[data-theme="pride"] .apply-plan:hover { box-shadow: 0 0 28px rgba(255,45,149,.5), 0 0 44px rgba(0,229,255,.4); }
/* category-colored card + picker edges echo the rainbow per type */
[data-theme="pride"] .card { border-left: 3px solid transparent; border-image: var(--rainbow) 1; }
[data-theme="pride"] .item-card { border-left-color: rgba(179,136,255,.4); box-shadow: inset 3px 0 8px -4px rgba(255,45,149,.25); }
[data-theme="pride"] .pick-card { border-left-width: 3px; }
[data-theme="pride"] .pick-card[data-category="Medical"]               { border-left-color: var(--cat-medical); }
[data-theme="pride"] .pick-card[data-category="Ammunition"]            { border-left-color: var(--cat-ammo); }
[data-theme="pride"] .pick-card[data-category="Weapons"]               { border-left-color: var(--cat-weapons); }
[data-theme="pride"] .pick-card[data-category="Food & Drink"]          { border-left-color: var(--cat-food); }
[data-theme="pride"] .pick-card[data-category="Implants & Electronics"]{ border-left-color: var(--cat-implants); }
[data-theme="pride"] .pick-card[data-category="Alien Materials"]       { border-left-color: var(--cat-alien); }
[data-theme="pride"] .pick-card[data-category="Armor"]                 { border-left-color: var(--cat-armor); }
[data-theme="pride"] .pick-card[data-category="Other"]                 { border-left-color: var(--cat-other); }
[data-theme="pride"] .pick-card:hover { border-color: var(--pc); box-shadow: 0 0 12px color-mix(in srgb, var(--pc) 45%, transparent); }
/* progress / material bars show the full spectrum at once (static) */
[data-theme="pride"] .mat-bar-track { background: var(--rainbow); background-size: 100% 100%; opacity: .25; }
[data-theme="pride"] .mat-bar-fill { background: var(--rainbow); background-size: 100% 100%; }
[data-theme="pride"] .mat-bar-owned { background: #fff; box-shadow: 0 0 8px #fff; }
[data-theme="pride"] .section::before {
  background: var(--rainbow);
  background-size: 100% 100%; opacity: .7;
}
[data-theme="pride"] .section .section-badge { background: var(--rainbow); background-size: 100% 100%; color: #0a0612; animation: badge-pulse 3s ease-in-out infinite; }
/* stat numbers shimmer through the FULL spectrum (warm→cool→warm) */
[data-theme="pride"] .stat-value:not(.warn), [data-theme="pride"] .stat-num {
  background: var(--rainbow); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  animation: pride-stat-rainbow 4s linear infinite;
}
@keyframes pride-stat-rainbow { from { background-position: 0 0; } to { background-position: 200% 0; } }
/* toast + req borders pick up rainbow edge */
[data-theme="pride"] .toast { border-left: 3px solid transparent; border-image: var(--rainbow) 1; }
[data-theme="pride"] .item-popup { box-shadow: 0 8px 32px rgba(0,0,0,.5), 0 0 24px rgba(255,45,149,.25), 0 0 40px rgba(0,230,118,.15), 0 0 56px rgba(0,229,255,.18); }

/* ═══════════════════════════════════════════════════════════════════════
   CMG THEME — corporate gold on black (cmgfom.com inspired)
   ═══════════════════════════════════════════════════════════════════════ */
[data-theme="cmg"] {
  --bg: #050505; --bg2: #0a0a0a; --panel: #171717; --panel2: #111111;
  --line: #262626; --line-bright: #3d3d3d; --text: #ffffff; --muted: #a89880;
  --accent: #f59e0b; --accent-bright: #fbbf24; --accent-dim: #b45309;
  --cyan: #fbbf24; --cyan-dim: #f59e0b;
  --purple: #b45309; --purple-dim: #92400e;
  --warn: #fbbf24; --bad: #ef4444; --good: #22c55e;
  --surplus: #f59e0b;
  --glow-pink: 0 0 14px #f59e0b55, 0 0 35px #f59e0b22;
  --glow-cyan: 0 0 14px #fbbf2455, 0 0 35px #fbbf2422;
  --glow-purple: 0 0 14px #b4530955, 0 0 35px #b4530922;
  --glow-surplus: 0 0 10px #f59e0b55;
  --cat-medical: #22c55e; --cat-ammo: #3b82f6; --cat-weapons: #ef4444;
  --cat-food: #f59e0b; --cat-implants: #a855f7; --cat-drugs: #22d3ee;
  --cat-alien: #ec4899; --cat-armor: #f97316; --cat-other: #6b7280;
}
[data-theme="cmg"] body {
  background: radial-gradient(ellipse at 50% 0%, rgba(245,158,11,.04) 0%, transparent 60%), var(--bg);
}
[data-theme="cmg"] body::before {
  background-image: linear-gradient(rgba(245,158,11,.025) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(245,158,11,.025) 1px, transparent 1px);
}
[data-theme="cmg"] header { background: linear-gradient(180deg, #0f0f0f 0%, #050505 100%); }
[data-theme="cmg"] header::after {
  background: linear-gradient(90deg, transparent, #f59e0b, #fbbf24, #f59e0b, transparent);
  background-size: 200% 100%; opacity: .55; height: 3px;
  box-shadow: 0 0 10px rgba(245,158,11,.5), 0 0 20px rgba(251,191,36,.3);
  animation: strip-flow 8s linear infinite;
}
[data-theme="cmg"] .crest {
  border-color: #f59e0b;
  box-shadow: 0 0 12px rgba(245,158,11,.3), 0 0 24px rgba(245,158,11,.15), inset 0 0 20px rgba(245,158,11,.08);
  text-shadow: 0 0 8px rgba(245,158,11,.4);
}
[data-theme="cmg"] .crest::after { background: linear-gradient(180deg, transparent, rgba(245,158,11,.08), transparent); }
[data-theme="cmg"] tbody tr:hover { background: rgba(245,158,11,.06); }
[data-theme="cmg"] input:focus, [data-theme="cmg"] select:focus { box-shadow: 0 0 10px rgba(245,158,11,.4); }
[data-theme="cmg"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6' fill='%23f59e0b'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center; background-size: 10px 6px;
}
[data-theme="cmg"] .tab.active {
  border-bottom-color: #f59e0b; color: #f59e0b;
  text-shadow: 0 0 8px rgba(245,158,11,.4);
}
[data-theme="cmg"] .gear-stat-panel h4 { color: #f59e0b; }
[data-theme="cmg"] ::selection { background: #f59e0b; color: #000; }

/* ── THEME EXTENSIONS: cards, tables, toasts (clean, no gimmicks) ── */
/* Trans */
[data-theme="trans"] .item-card { border-left: 2px solid rgba(77,200,240,.25); }
[data-theme="trans"] .gear-set-card { border-left: 2px solid rgba(77,200,240,.25); }
[data-theme="trans"] .plan-card { border-left: 2px solid rgba(77,200,240,.3); }
[data-theme="trans"] .toast { border-left: 2px solid #4dc8f0; }
[data-theme="trans"] th { color: #4dc8f0; }

/* Pride */
[data-theme="pride"] .item-card { border-left: 2px solid rgba(179,136,255,.3); }
[data-theme="pride"] .gear-set-card { border-left: 2px solid rgba(255,45,149,.3); }
[data-theme="pride"] .plan-card { border-left: 2px solid rgba(179,136,255,.3); }
[data-theme="pride"] .toast { border-left: 2px solid #b388ff; }
[data-theme="pride"] th { color: #b388ff; }
[data-theme="pride"] .gear-slot-stat .gss-val { color: #b388ff; }

/* CMG */
[data-theme="cmg"] .item-card { border-left: 2px solid rgba(245,158,11,.25); }
[data-theme="cmg"] .gear-set-card { border-left: 2px solid rgba(245,158,11,.25); }
[data-theme="cmg"] .plan-card { border-left: 2px solid rgba(245,158,11,.3); }
[data-theme="cmg"] .toast { border-left: 2px solid #f59e0b; }
[data-theme="cmg"] th { color: #f59e0b; }
[data-theme="cmg"] .gear-slot-stat .gss-val { color: #fbbf24; }

/* ═══════════════════════════════════════════════════════════════════════
   GEAR LOADOUT — paperdoll armor slots + stats
   ═══════════════════════════════════════════════════════════════════════ */

.gear-layout { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.gear-main { flex: 0 0 auto; min-width: 320px; }
.gear-title { font-family: "Orbitron", monospace; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 1px; color: var(--accent); margin-bottom: 0.75rem; }
.gear-loadout-hint { margin: -0.35rem 0 0.75rem; color: var(--muted); font-size: 0.65rem; line-height: 1.4; }

/* armor grid — animated neon */
.gear-paperdoll {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem;
  padding: 0.75rem; background: var(--panel2);
  border: 1px solid var(--line-bright); border-radius: 8px;
}
.gear-slot {
  position: relative; width: 140px; min-height: 110px; background: var(--panel);
  border: 2px dashed var(--line); border-radius: 8px;
  display: flex; flex-direction: column; align-items: center;
  justify-content: flex-start; gap: 0.2rem; padding: 0.5rem 0.375rem;
  cursor: pointer; text-align: center; position: relative;
  transition: border-color .2s, box-shadow .2s, transform .2s, background .3s;
}
.gear-slot:hover {
  border-color: var(--accent);
  box-shadow: 0 0 20px rgba(255,45,149,.35), inset 0 0 15px rgba(255,45,149,.05);
  transform: translateY(-2px);
}
.gear-slot:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
  border-color: var(--accent-bright);
}
.gear-slot.equipped {
  border-style: solid; border-color: var(--accent);
  box-shadow: 0 0 12px rgba(255,45,149,.3), inset 0 0 8px rgba(255,45,149,.04);
  background: linear-gradient(180deg, var(--panel2), rgba(255,45,149,.03));
  animation: gearEquipped 2s ease-in-out infinite alternate;
}
@keyframes gearEquipped {
  from { box-shadow: 0 0 10px rgba(255,45,149,.25), inset 0 0 6px rgba(255,45,149,.03); }
  to { box-shadow: 0 0 18px rgba(255,45,149,.4), inset 0 0 12px rgba(255,45,149,.06); }
}
.gear-slot.inactive { opacity: .45; border-color: var(--line); box-shadow: none; animation: none; }


.gear-toggle-guide {
  margin: -0.35rem 0 0.65rem; padding: 0.45rem 0.6rem;
  border-left: 3px solid var(--cyan); border-radius: 4px;
  background: rgba(77, 200, 240, .08); color: var(--muted);
  font-size: 0.68rem; line-height: 1.45;
}
.gear-toggle-control {
  position: absolute; top: 3px; right: 3px; z-index: 2;
  display: inline-flex; align-items: center; gap: 2px;
  padding: 2px 3px; border: 1px solid rgba(77, 200, 240, .35);
  border-radius: 4px; background: rgba(8, 12, 20, .86);
  color: var(--cyan); cursor: pointer; font-size: 0.42rem;
  line-height: 1; letter-spacing: .2px; text-transform: uppercase;
  user-select: none;
}
.gear-toggle-control.is-off { color: var(--muted); border-color: var(--line); }
.gear-toggle {
  position: static; width: 15px; height: 15px; margin: 0;
  accent-color: var(--accent); cursor: pointer; opacity: 0.95;
}
.gear-toggle-control:hover { border-color: var(--cyan); }
.gear-toggle-control:focus-within { outline: 1px solid var(--accent); outline-offset: 1px; }

.gear-slot-icon { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.gear-slot-icon img { width: 36px; height: 36px; object-fit: contain; }
.gear-slot-placeholder { color: var(--muted); font-size: 1.25rem; margin-top: 4px; transition: color .3s; }
.gear-slot:not(.equipped):hover .gear-slot-placeholder { color: var(--accent-dim); }
.gear-slot-label { font-size: 0.5625rem; text-transform: uppercase; color: var(--muted); letter-spacing: 0.5px; font-weight: 600; }
.gear-slot.equipped .gear-slot-label { color: var(--accent-bright); }
.gear-slot-name { font-size: 0.5625rem; color: var(--text); line-height: 1.2; word-break: break-word; max-width: 130px; }
.gear-slot-stats { display: flex; flex-wrap: wrap; gap: 0.125rem 0.375rem; justify-content: center; margin-top: 0.125rem; }
.gear-slot-stat {
  font-size: 0.5rem; color: var(--muted); background: rgba(255,45,149,.06);
  border: 1px solid rgba(255,45,149,.15); border-radius: 3px; padding: 0.0625rem 0.25rem;
}
.gear-slot-stat .gss-val { color: var(--cyan); font-weight: 700; }
.gear-sidebar { flex: 1 1 280px; display: flex; flex-direction: column; gap: 0.75rem; }
.gear-stat-panel { padding: 0.75rem; background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; }
.gear-stat-panel h4 { font-family: "Orbitron", monospace; font-size: 0.75rem; text-transform: uppercase; color: var(--accent); margin: 0 0 0.5rem 0; }
.gear-stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 0.375rem; }
.gear-stat-item { background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 0.25rem 0.375rem; text-align: center; }
.gear-stat-item .stat-val { font-size: 0.8125rem; font-weight: 700; color: var(--cyan); }
.gear-stat-item .stat-val.bad { color: var(--bad); }
.gear-stat-item .stat-val.prot-nerfed { color: #f472b6; text-shadow: 0 0 6px rgba(244,114,182,.4); }
.gear-stat-item .stat-label { font-size: 0.5625rem; text-transform: uppercase; color: var(--muted); letter-spacing: 0.3px; }

/* Gear readability pass — give the paperdoll and stats deliberate space. */
.gear-layout {
  display: grid;
  grid-template-columns: minmax(560px, 1.3fr) minmax(360px, 0.85fr);
  gap: 1.25rem;
  align-items: start;
}
.gear-main { min-width: 0; }
.gear-loadout-panel,
.gear-stat-panel {
  min-width: 0;
  padding: 1rem;
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.gear-loadout-panel .gear-title,
.gear-stat-panel h4 {
  margin: 0 0 0.65rem;
  font-family: "Orbitron", monospace;
  font-size: 0.85rem;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--accent);
}
.gear-loadout-panel .gear-paperdoll { margin: 0; }
.gear-loadout-panel .gear-toggle-guide { margin-top: 0.75rem; }
.gear-loadout-panel .gear-actions {
  margin-top: 0.25rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--line);
}
.gear-paperdoll {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
  padding: 1rem;
}
.gear-slot {
  width: auto;
  min-width: 0;
  min-height: 145px;
  gap: 0.35rem;
  padding: 0.7rem 0.5rem 0.6rem;
}
.gear-slot-icon,
.gear-slot-icon img { width: 48px; height: 48px; }
.gear-slot-placeholder { font-size: 1.5rem; }
.gear-slot-label { font-size: 0.65rem; }
.gear-slot-name {
  max-width: 100%;
  min-height: 2.6em;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  line-height: 1.3;
}
.gear-slot-stats { gap: 0.2rem 0.4rem; margin-top: 0.1rem; }
.gear-slot-stat { font-size: 0.58rem; padding: 0.1rem 0.3rem; }
.gear-sidebar {
  min-width: 0;
  align-self: start;
  position: static;
}
.gear-stat-panel { min-width: 0; padding: 1rem; }
.gear-stat-panel h4 { font-size: 0.85rem; margin-bottom: 0.65rem; }
.gear-stat-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 0.5rem; }
.gear-stat-item { padding: 0.45rem 0.5rem; }
.gear-stat-item .stat-val { font-size: 1rem; }
.gear-stat-item .stat-label { font-size: 0.62rem; }
.gear-secondary-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.85fr);
  gap: 1.25rem;
  align-items: start;
}
.gear-library-panel {
  min-width: 0;
  padding: 1rem;
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.gear-library-panel .gear-sets-head { margin-top: 0; }

/* Recovery/upkeep effects: show the raw inputs and the net character impact. */
.gear-effect-summary {
  margin-top: 0.75rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--line);
}
.gear-effect-summary[hidden] { display: none; }
.gear-effect-head {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  align-items: baseline;
  color: var(--text);
  font-size: 0.6875rem;
  font-weight: 700;
}
.gear-effect-formula {
  color: var(--muted);
  font-size: 0.58rem;
  font-weight: 400;
  white-space: nowrap;
}
.gear-effect-note {
  margin: 0.25rem 0 0.5rem;
  color: var(--muted);
  font-size: 0.625rem;
  line-height: 1.4;
}
.gear-effect-row {
  display: grid;
  grid-template-columns: minmax(80px, 1fr) auto;
  gap: 0.5rem;
  align-items: center;
  padding: 0.35rem 0;
  border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.gear-effect-name { color: var(--text); font-size: 0.65rem; font-weight: 700; }
.gear-effect-detail { color: var(--muted); font-size: 0.58rem; margin-top: 0.1rem; }
.gear-effect-values { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.25rem 0.5rem; font-size: 0.62rem; text-align: right; }
.gear-effect-values span { white-space: nowrap; }
.gear-effect-regen { color: var(--good); }
.gear-effect-drain { color: var(--bad); }
.gear-effect-net { font-weight: 700; }
.gear-effect-net.is-positive { color: var(--good); }
.gear-effect-net.is-negative { color: var(--bad); }
.gear-effect-net.is-balanced { color: var(--muted); }

@media (max-width: 1100px) {
  .gear-layout { grid-template-columns: 1fr; }
  .gear-sidebar { position: static; }
  .gear-secondary-row { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .gear-paperdoll { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0.65rem; gap: 0.5rem; }
  .gear-slot { min-height: 130px; padding: 0.6rem 0.35rem 0.5rem; }
  .gear-slot-name { font-size: 0.65rem; }
  .gear-stat-panel, .gear-library-panel { padding: 0.75rem; }
  .gear-effect-head { align-items: flex-start; flex-direction: column; gap: 0.15rem; }
  .gear-effect-row { grid-template-columns: 1fr; gap: 0.25rem; }
  .gear-effect-values { justify-content: flex-start; text-align: left; }
}

/* Gear panel: production-colony strip — the destination drives tax AND the CMG rebate */
.gear-cost-head-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.gear-cost-head-row h4 { margin: 0; }
.gear-dest-select { background-color: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 4px; padding: 0.2rem 0.4rem; font-size: 0.7rem; font-family: inherit; max-width: 140px; }
.gear-dest-status { margin: 0.4rem 0 0.5rem; font-size: 0.65rem; line-height: 1.45; }
.gear-dest-ok { color: var(--ok); }
.gear-dest-warn { color: var(--warn); }
.gear-dest-warn b, .gear-dest-ok b { color: var(--text); }
/* Gear panel: full calculator-style cost breakdown under the materials grid */
.gear-cost-head { font-size: 0.625rem; color: var(--muted); margin: 0 0 0.25rem; }
.gear-cost-head b { color: var(--text); }
.gear-cost-breakdown { grid-column: 1 / -1; margin-top: 0.4rem; }
.gear-cost-unknown { font-size: 0.6rem; color: var(--muted); margin-top: 0.3rem; }
.gear-stat-notice { grid-column: 1 / -1; font-size: 0.625rem; text-align: center; color: #f472b6; background: rgba(244,114,182,.08); border: 1px solid rgba(244,114,182,.2); border-radius: 3px; padding: 0.1875rem 0.5rem; margin-bottom: 0.25rem; }
.prot-badge { font-size: 0.5rem; font-weight: 400; color: #f472b6; opacity: .8; margin-left: 2px; vertical-align: middle; }
.gear-actions { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.gear-actions button { font-size: 0.6875rem; padding: 0.375rem 0.625rem; }
.gear-sets-list { display: flex; flex-direction: column; gap: 0.5rem; }
.gear-sets-head {
  font-family: "Orbitron", monospace; font-size: 0.75rem; letter-spacing: 2px;
  text-transform: uppercase; color: var(--accent); margin: 0.75rem 0 0.375rem;
  text-shadow: 0 0 10px rgba(255,45,149,.5);
}
.gear-library-sub { color: var(--muted); font-size: 0.625rem; line-height: 1.4; margin: 0 0 0.5rem; }
.gear-set-item {
  display: flex; align-items: flex-start; gap: 0.625rem;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 6px; padding: 0.625rem 0.75rem; font-size: 0.75rem;
  transition: border-color .2s, box-shadow .2s;
}
.gear-set-item:hover {
  border-color: var(--accent-dim);
  box-shadow: 0 0 14px rgba(255,45,149,.15);
}
.gear-set-item .gs-info { flex: 1; display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.gear-set-item .set-name { color: var(--text); font-weight: 700; font-size: 0.8125rem; }
.gear-set-item .set-meta { color: var(--muted); font-size: 0.625rem; }
.gear-set-item .gs-actions { display: flex; gap: 0.375rem; align-items: center; flex-shrink: 0; }
.gear-set-item .gs-actions button { font-size: 0.6875rem; padding: 0.25rem 0.625rem; }
.gear-set-item .gs-actions .ghost[style*="var(--bad)"] { font-size: 0.875rem; padding: 0 0.25rem; }

/* gear set stat pills — neon style */
.gs-stats { display: flex; flex-wrap: wrap; gap: 0.25rem 0.375rem; }
.gs-stat {
  font-size: 0.5625rem; color: var(--muted);
  background: rgba(255,45,149,.05); border: 1px solid rgba(255,45,149,.18);
  border-radius: 3px; padding: 0.125rem 0.375rem;
}
.gs-stat b { color: var(--cyan); font-weight: 700; margin-left: 1px; }

/* up/down vote column */
.gs-votes { display: flex; flex-direction: column; align-items: center; gap: 1px; flex-shrink: 0; }
.gs-vote {
  background: transparent; border: none; cursor: pointer; line-height: 1;
  font-size: 0.75rem; color: var(--muted); padding: 0 0.25rem;
  transition: color .15s, text-shadow .15s;
}
.gs-vote:hover { color: var(--text); }
.gs-vote.up.active { color: var(--cyan); text-shadow: 0 0 10px var(--cyan); }
.gs-vote.down.active { color: var(--bad); text-shadow: 0 0 10px var(--bad); }
.gs-score { font-size: 0.75rem; font-weight: 700; color: var(--muted); }
.gs-score.pos { color: var(--cyan); text-shadow: 0 0 6px rgba(0,240,255,.3); }
.gs-score.neg { color: var(--bad); text-shadow: 0 0 6px rgba(255,45,45,.3); }

/* gear picker modal */
.gear-picker-overlay { position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,.7); display: flex; align-items: center; justify-content: center; }
.gear-picker-overlay[hidden] { display: none; }
/* Wider than it was: at 500px every second armour name wrapped mid-word, which
   is what made the list feel twice as long as it is. Only the list scrolls, so
   the filters stay put while you page through. */
.gear-picker-modal {
  background: var(--bg2); border: 1px solid var(--line-bright); border-radius: 8px;
  width: 92%; max-width: 640px; max-height: 82vh;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 4px 32px rgba(0,0,0,.5);
}
@media (min-width: 2200px) {
  .gear-picker-modal { max-width: 800px; }
}
@media (min-width: 3200px) {
  .gear-picker-modal { max-width: 960px; }
}
.gear-picker-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.65rem 0.75rem; border-bottom: 1px solid var(--line);
  font-family: "Orbitron", monospace; font-size: 0.8125rem; color: var(--accent);
}
.gear-picker-head .ghost {
  width: 44px; min-width: 44px; height: 44px; min-height: 44px;
  display: inline-grid; place-items: center; padding: 0;
  font-size: 1rem; line-height: 1;
}
.gear-picker-body { padding: 0.4rem 0.5rem 0.6rem; overflow-y: auto; flex: 1 1 auto; }
.gear-picker-item { cursor: pointer; transition: background .15s, border-color .15s; }
.gear-picker-item:hover { background: var(--panel); border-color: var(--line-bright); }
.gear-picker-item:focus-visible {
  background: var(--panel); border-color: var(--accent);
  outline: 2px solid var(--accent); outline-offset: -2px;
}
.gear-picker-item .gpi-icon { width: 32px; height: 32px; flex-shrink: 0; }
.gear-picker-item .gpi-icon img { width: 32px; height: 32px; }
.gear-picker-item .gpi-name { font-size: 0.8125rem; color: var(--text); font-weight: 600; }
.gear-picker-item .gpi-faction { font-size: 0.625rem; color: var(--muted); }

.gear-picker-item.is-disabled {
  cursor: not-allowed; opacity: .48; filter: saturate(.55);
}
.gear-picker-item.is-disabled:hover { background: transparent; border-color: transparent; }
.item-tooltip .tt-summary { color: var(--accent); font-size: 0.625rem; font-weight: 700; margin: 2px 0 4px; }
.item-tooltip .tt-guidance { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 5px; font-size: 0.625rem; color: var(--muted); line-height: 1.35; }

/* quick-stats tooltip on item hover */
.item-tooltip {
  position: absolute; z-index: 10001; /* above gear-picker overlay (10000); still above gear-picker (100) and item-popup (200) */
  background: var(--bg2); border: 1px solid var(--line-bright);
  border-radius: 6px; padding: 0.5rem 0.625rem;
  font-size: 0.6875rem; pointer-events: none;
  box-shadow: 0 4px 16px rgba(0,0,0,.4); max-width: 280px;
}
.item-tooltip .tt-stat { display: flex; justify-content: space-between; gap: 0.25rem; align-items: center; }
.item-tooltip .tt-stat .tt-label { color: var(--muted); margin-right: auto; }
.item-tooltip .tt-stat .tt-old { color: var(--muted); text-decoration: line-through; font-size: 0.625rem; }
.item-tooltip .tt-stat .tt-arrow { color: var(--muted); font-size: 0.5625rem; }
.item-tooltip .tt-stat .tt-new { color: var(--cyan); font-weight: 700; }
.item-tooltip .tt-name { font-weight: 700; color: var(--accent); margin-bottom: 2px; }
.item-tooltip .tt-equipped { font-size: 0.5625rem; color: var(--muted); margin-bottom: 4px; }
.item-tooltip .tt-cost { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 5px; font-size: 0.625rem; color: var(--muted); }
.tt-gain { color: var(--good); font-weight: 700; font-size: 0.625rem; margin-left: 2px; }
.tt-loss { color: var(--bad); font-weight: 700; font-size: 0.625rem; margin-left: 2px; }

/* production materials block in hover tooltips */
.item-tooltip .tt-mats { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 5px; }
.item-tooltip .tt-mats-label { font-size: 0.5625rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 3px; }
.item-tooltip .tt-mats-row { display: flex; flex-wrap: wrap; gap: 3px 4px; align-items: center; }
/* multiple production paths: each path is its own block, stacked with a clear "or" divider */
.item-tooltip .tt-mats-row.tt-mats-multi { display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
.item-tooltip .tt-path { display: flex; flex-wrap: wrap; gap: 3px 4px; align-items: center; }
.item-tooltip .tt-or-divider {
  display: flex; align-items: center; gap: 6px; margin: 1px 0;
  color: var(--accent); font-size: 0.5625rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
}
.item-tooltip .tt-or-divider::before, .item-tooltip .tt-or-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}
.item-tooltip .tt-mat { display: inline-flex; align-items: center; gap: 3px; background: var(--bg-input); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; }
.item-tooltip .tt-mat .icon { width: 14px; height: 14px; margin-right: 0; }
.item-tooltip .tt-mat .icon img, .item-tooltip .tt-mat .icon-badge { width: 14px; height: 14px; font-size: 0.5625rem; }
.item-tooltip .tt-mat-name { color: var(--text); }
.item-tooltip .tt-mat-qty { color: var(--accent); font-weight: 700; }
.item-tooltip .tt-plus { color: var(--muted); font-size: 0.625rem; }
.item-tooltip .tt-batch { font-size: 0.5625rem; color: var(--muted); margin-top: 3px; }


/* theme preview swatches */
.theme-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 2px; border: 1px solid var(--line); margin-right: 3px; vertical-align: middle; }
.theme-swatch.dark { background: #0d0d1a; }
.theme-swatch.light { background: #f5f4fa; }
.theme-swatch.auto { background: linear-gradient(135deg, #0d0d1a 50%, #f5f4fa 50%); }
.theme-swatch.trans { background: linear-gradient(135deg, #5bcefa 33%, #f5a9b8 33%, #f5a9b8 66%, #ffffff 66%); }
.theme-swatch.pride { background: linear-gradient(180deg, #ff4081, #ff6d00, #ffd600, #00e676, #00b0ff, #651fff); }
.theme-swatch.cmg { background: #0a0a0a; border-color: #f59e0b; box-shadow: inset 0 0 4px #f59e0b44; }