/* PROXIMA // Later visual refinements: audio controls, campaign cards, readability, update notice, save warning (third <style> block). Loaded last so it wins over earlier rules. */
.px-audio-controls {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 7px;
  border: 1px solid hsl(calc(var(--th-h) + -1.9) calc(28.1% * var(--th-s)) calc(27.3% + var(--th-l)));
  background: hsl(calc(var(--th-bh) + -30.7) calc(17.1% * var(--th-bs)) 8%);
  border-radius: 5px;
  white-space: nowrap;
  flex: 0 0 auto;
}
.px-audio-toggle {
  background: #2a2b21;
  color: hsl(calc(var(--th-h) + 1.3) calc(64.3% * var(--th-s)) calc(69.2% + var(--th-l)));
  border: 1px solid hsl(calc(var(--th-h) + -0.3) calc(31.8% * var(--th-s)) calc(33.9% + var(--th-l)));
  padding: 6px 8px;
  min-height: 30px;
  border-radius: 3px;
  font:
    800 10px Consolas,
    monospace;
  letter-spacing: 0.7px;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s;
}
.px-audio-toggle:hover {
  background: hsl(calc(var(--th-h) + -1.4) calc(22.9% * var(--th-s)) calc(18.8% + var(--th-l)));
  border-color: hsl(calc(var(--th-h) + -1.2) calc(66.3% * var(--th-s)) calc(62.7% + var(--th-l)));
}
.px-audio-toggle[aria-pressed='false'] {
  background: hsl(calc(var(--th-bh) + -20) calc(8.3% * var(--th-bs)) 9.4%);
  color: #a3a7a1;
  border-color: #4b504c;
}
.px-audio-volume {
  width: 64px !important;
  min-width: 64px !important;
  height: 7px !important;
  margin: 0 !important;
  padding: 0 !important;
  accent-color: hsl(calc(var(--th-h) + -2.2) calc(53.5% * var(--th-s)) calc(55.3% + var(--th-l)));
  cursor: pointer;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.px-audio-level {
  min-width: 25px;
  text-align: right;
  color: #b0b8ad;
  font:
    700 10px Consolas,
    monospace;
}
.px-audio-gate {
  position: fixed;
  right: 18px;
  bottom: 16px;
  z-index: 20;
}
@media (max-width: 1220px) {
  .px-audio-controls {
    padding: 3px 5px;
    gap: 4px;
  }
  .px-audio-volume {
    width: 47px !important;
    min-width: 47px !important;
  }
  .px-audio-level {
    display: none;
  }
}
@media (max-width: 850px) {
  .px-audio-controls {
    gap: 5px;
  }
  .topbar .px-audio-volume,
  .topbar .px-audio-level {
    display: none;
  }
  .px-audio-gate {
    right: 9px;
    bottom: 9px;
  }
}
@media (max-width: 480px) {
  .px-audio-gate .px-audio-volume,
  .px-audio-gate .px-audio-level {
    display: none;
  }
  .px-audio-toggle {
    font-size: 9px;
    padding: 5px;
  }
}

.pxu-slot-wrap.pxm-has-sockets {
  display: flex;
  flex-direction: column;
  align-self: stretch;
}
.pxu-slot-wrap.pxm-has-sockets > .pxu-slot {
  height: auto;
  min-height: 80px;
  flex: 1 1 auto;
}
.pxu-slot-wrap.pxm-has-sockets > .pxm-sockets {
  flex: 0 0 auto;
}
.pxm-sockets {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 3px;
  background: hsl(calc(var(--th-bh) + -5) calc(21.4% * var(--th-bs)) 5.5%);
  border: 1px solid #455146;
  border-top: 0;
  min-width: 0;
}
.pxm-socket {
  flex: 1 1 42%;
  min-width: 0;
  max-width: 100%;
  cursor: pointer;
  border: 1px solid #414d46;
  background: hsl(calc(var(--th-bh) + -20) calc(13.3% * var(--th-bs)) 11.8%);
  color: #9baa9c;
  padding: 4px 5px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 31px;
  overflow: hidden;
  transition:
    background 0.12s,
    border-color 0.12s;
}
.pxm-socket span {
  font:
    700 8px Consolas,
    monospace;
  text-transform: uppercase;
  letter-spacing: 0.25px;
}
.pxm-socket strong {
  font:
    700 9px Consolas,
    monospace;
  color: #c9cbbd;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pxm-socket.filled {
  background: #283027;
  border-color: hsl(calc(var(--th-h) + -3.4) calc(28.7% * var(--th-s)) calc(42.4% + var(--th-l)));
}
.pxm-socket.filled strong {
  color: hsl(calc(var(--th-h) + 1.9) calc(64% * var(--th-s)) calc(70.6% + var(--th-l)));
}
.pxm-socket:hover,
.pxm-socket:focus-visible {
  border-color: hsl(calc(var(--th-h) + 0.1) calc(63% * var(--th-s)) calc(66.1% + var(--th-l)));
  background: #354034;
}
.pxm-socket.pxu-drop-on {
  outline: 2px dashed hsl(calc(var(--th-h) + -0.3) calc(64.6% * var(--th-s)) calc(67.8% + var(--th-l)));
  outline-offset: -2px;
}
.pxm-quick-assign {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  margin-top: 9px;
  border-top: 1px solid #3b453b;
  padding-top: 9px;
}
.pxm-quick-assign label {
  display: grid;
  gap: 5px;
  color: #aeb9a6;
  font:
    700 10px Consolas,
    monospace;
}
.pxm-quick-assign select {
  min-width: 0;
  background: hsl(calc(var(--th-bh) + -17) calc(22.7% * var(--th-bs)) 8.6%);
  color: hsl(calc(var(--th-h) + 4.6) calc(48.9% * var(--th-s)) calc(81.6% + var(--th-l)));
  border: 1px solid hsl(calc(var(--th-h) + 6.2) calc(19.1% * var(--th-s)) calc(34.9% + var(--th-l)));
  padding: 7px;
}
.pxm-quick-assign button {
  align-self: end;
  background: hsl(calc(var(--th-h) + 0) calc(26.1% * var(--th-s)) calc(18% + var(--th-l)));
  color: hsl(calc(var(--th-h) + 0.3) calc(77.3% * var(--th-s)) calc(74.1% + var(--th-l)));
  border: 1px solid hsl(calc(var(--th-h) + 0) calc(32.7% * var(--th-s)) calc(38.4% + var(--th-l)));
  padding: 9px;
  cursor: pointer;
  font:
    700 10px Consolas,
    monospace;
}
.pxm-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483600;
  background: hsl(calc(var(--th-bh) + 15) calc(60% * var(--th-bs)) 2% / 0.8);
  display: grid;
  place-items: center;
  padding: 18px;
  overflow: auto;
}
.pxm-modal {
  width: min(620px, 96vw);
  max-height: min(82vh, 700px);
  overflow: auto;
  background: linear-gradient(
    145deg,
    hsl(calc(var(--th-bh) + -20) calc(15.4% * var(--th-bs)) 10.2%),
    hsl(calc(var(--th-bh) + 1) calc(26.3% * var(--th-bs)) 7.5%)
  );
  border: 1px solid hsl(calc(var(--th-h) + -4) calc(37.1% * var(--th-s)) calc(41.8% + var(--th-l)));
  box-shadow: 0 20px 70px #000b;
  color: hsl(calc(var(--th-h) + 4.3) calc(29.8% * var(--th-s)) calc(81.6% + var(--th-l)));
  padding: 15px;
}
.pxm-modal header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid #3a453c;
  padding-bottom: 12px;
}
.pxm-modal header small {
  color: hsl(calc(var(--th-h) + -1.5) calc(31.8% * var(--th-s)) calc(57.5% + var(--th-l)));
  font:
    700 10px Consolas,
    monospace;
  letter-spacing: 1px;
}
.pxm-modal h3 {
  font:
    800 17px Consolas,
    monospace;
  margin: 6px 0 0;
  color: hsl(calc(var(--th-h) + 2) calc(77.2% * var(--th-s)) calc(77.6% + var(--th-l)));
}
.pxm-modal header button,
.pxm-current button {
  background: hsl(calc(var(--th-h) + 10.7) calc(17.1% * var(--th-s)) calc(16.1% + var(--th-l)));
  color: hsl(calc(var(--th-h) + -0.2) calc(74.8% * var(--th-s)) calc(75.1% + var(--th-l)));
  border: 1px solid hsl(calc(var(--th-h) + -4.6) calc(28.5% * var(--th-s)) calc(37.8% + var(--th-l)));
  padding: 8px;
  cursor: pointer;
  font:
    700 10px Consolas,
    monospace;
}
.pxm-modal p {
  font:
    11px/1.55 Consolas,
    monospace;
  color: #adbeb7;
}
.pxm-current {
  display: flex;
  align-items: center;
  gap: 9px;
  justify-content: space-between;
  flex-wrap: wrap;
  border: 1px solid #3e4d43;
  padding: 10px;
  margin: 12px 0;
  background: hsl(calc(var(--th-bh) + -17) calc(23.8% * var(--th-bs)) 8.2%);
}
.pxm-current > span {
  font:
    700 10px Consolas,
    monospace;
  color: #a7b3a4;
}
.pxm-current > strong {
  font:
    800 12px Consolas,
    monospace;
  color: hsl(calc(var(--th-h) + 2.8) calc(61.1% * var(--th-s)) calc(77.8% + var(--th-l)));
}
.pxm-list {
  display: grid;
  gap: 5px;
  max-height: 310px;
  overflow: auto;
}
.pxm-list button {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  text-align: left;
  align-items: center;
  border: 1px solid #44564b;
  background: hsl(calc(var(--th-bh) + -25) calc(15.8% * var(--th-bs)) 11.2%);
  color: hsl(calc(var(--th-h) + 2) calc(28.4% * var(--th-s)) calc(84.1% + var(--th-l)));
  padding: 10px;
  cursor: pointer;
}
.pxm-list button:hover {
  border-color: hsl(calc(var(--th-h) + -4.8) calc(53% * var(--th-s)) calc(60.8% + var(--th-l)));
  background: #32352a;
}
.pxm-list button span {
  display: grid;
  gap: 5px;
}
.pxm-list button b {
  font:
    700 11px Consolas,
    monospace;
}
.pxm-list button strong {
  font:
    700 10px Consolas,
    monospace;
  white-space: nowrap;
  color: hsl(calc(var(--th-h) + -3) calc(65.6% * var(--th-s)) calc(76.1% + var(--th-l)));
}
.pxm-empty,
.pxm-modal footer {
  padding: 10px;
  color: #a7b5aa;
  font:
    10px/1.6 Consolas,
    monospace;
}
.pxm-modal footer {
  border-top: 1px solid #354439;
  margin-top: 12px;
}
@media (max-width: 660px) {
  .pxm-socket {
    flex-basis: 100%;
  }
  .pxm-quick-assign {
    grid-template-columns: 1fr;
  }
  .pxm-current {
    align-items: flex-start;
  }
}

/* v1.23 CAMPAIGN // calm, operator-style personnel cards */
.px23-roster-shell {
  margin: 12px 0 30px;
}
.px23-overview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.px23-overview > div {
  background: hsl(calc(var(--th-bh) + 10) calc(19% * var(--th-bs)) 8.2%);
  border: 1px solid hsl(calc(var(--th-h) + 7.9) calc(12.8% * var(--th-s)) calc(26.1% + var(--th-l)));
  border-top: 2px solid hsl(calc(var(--th-h) + -1.9) calc(37.2% * var(--th-s)) calc(46.9% + var(--th-l)));
  padding: 13px 16px;
  min-width: 0;
}
.px23-overview b {
  display: block;
  font:
    800 26px Consolas,
    monospace;
  color: hsl(calc(var(--th-h) + -3.8) calc(57.3% * var(--th-s)) calc(70.6% + var(--th-l)));
}
.px23-overview small {
  font:
    700 9px Consolas,
    monospace;
  letter-spacing: 0.8px;
  color: #a8b4ad;
}
.px23-toolbar {
  display: flex;
  align-items: center;
  gap: 11px;
  flex-wrap: wrap;
  border: 1px solid #434638;
  background: hsl(calc(var(--th-bh) + 3.6) calc(17.1% * var(--th-bs)) 8%);
  padding: 10px 12px;
  margin-bottom: 15px;
}
.px23-tabs {
  display: flex;
  gap: 4px;
}
.px23-tabs button,
.px23-recruit button {
  width: auto;
  border: 1px solid hsl(calc(var(--th-h) + 4.6) calc(15.2% * var(--th-s)) calc(29.6% + var(--th-l)));
  background: hsl(calc(var(--th-bh) + 1.7) calc(13.8% * var(--th-bs)) 12.7%);
  color: hsl(calc(var(--th-h) + 2.7) calc(28.2% * var(--th-s)) calc(69.4% + var(--th-l)));
  font:
    800 10px Consolas,
    monospace;
  padding: 10px 12px;
  cursor: pointer;
}
.px23-tabs button.selected {
  color: hsl(calc(var(--th-h) + -2.9) calc(87.5% * var(--th-s)) calc(81.2% + var(--th-l)));
  background: hsl(calc(var(--th-h) + -1.2) calc(52.8% * var(--th-s)) calc(31.6% + var(--th-l)) / 0.2);
  border-color: hsl(calc(var(--th-h) + -3.5) calc(48.1% * var(--th-s)) calc(57.6% + var(--th-l)));
}
.px23-toolbar #px23-search {
  width: min(330px, 100%);
  flex: 1 1 220px;
  min-width: 180px;
  border-radius: 2px;
  background: hsl(calc(var(--th-bh) + 10) calc(25% * var(--th-bs)) 6.3%);
}
.px23-offline {
  margin-left: auto;
  color: #82b4a0;
  font:
    700 9px Consolas,
    monospace;
}
.px23-roster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 292px), 1fr));
  gap: 14px;
  align-items: start;
}
.px23-card {
  background: linear-gradient(
    155deg,
    hsl(calc(var(--th-bh) + 0.5) calc(16.9% * var(--th-bs)) 12.7%),
    hsl(calc(var(--th-bh) + 10) calc(20% * var(--th-bs)) 7.8%) 80%
  );
  border: 1px solid #4d4e3c;
  border-top: 2px solid hsl(calc(var(--th-h) + -2.3) calc(32.8% * var(--th-s)) calc(50.4% + var(--th-l)));
  min-width: 0;
  overflow: hidden;
}
.px23-card.is-inactive {
  opacity: 0.66;
}
.px23-card.is-downed {
  border-top-color: #b46b64;
}
.px23-card-top {
  padding: 9px 13px;
  border-bottom: 1px solid hsl(calc(var(--th-bh) + -15.9) calc(10.3% * var(--th-bs)) 21%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  color: #a5a99e;
  font:
    700 9px Consolas,
    monospace;
  letter-spacing: 0.45px;
}
.px23-active {
  width: auto;
  padding: 4px 7px;
  background: transparent;
  border: 1px solid #51554a;
  color: #9b9e99;
  font:
    800 9px Consolas,
    monospace;
  cursor: pointer;
}
.px23-active.is-on {
  border-color: #426557;
  color: #98cbaa;
}
.px23-card-hero {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 18px 14px 12px;
}
.px23-avatar {
  flex: none;
  width: 60px;
  height: 65px;
  display: grid;
  place-items: center;
  background: hsl(calc(var(--th-h) + -1.7) calc(64.3% * var(--th-s)) calc(32.9% + var(--th-l)) / 0.1);
  border: 1px solid hsl(calc(var(--th-h) + -4.8) calc(38.3% * var(--th-s)) calc(42% + var(--th-l)));
  clip-path: polygon(23% 0, 77% 0, 100% 24%, 100% 76%, 77% 100%, 23% 100%, 0 76%, 0 24%);
}
.px23-avatar span {
  font:
    900 22px Consolas,
    monospace;
  color: hsl(calc(var(--th-h) + -5.7) calc(61.7% * var(--th-s)) calc(64.1% + var(--th-l)));
}
.px23-identity {
  min-width: 0;
  flex: 1;
}
.px23-identity h3 {
  margin: 0 0 4px;
  font: 800 22px var(--head);
  line-height: 1.04;
  overflow-wrap: anywhere;
  color: hsl(calc(var(--th-h) + -5.4) calc(67.1% * var(--th-s)) calc(84.5% + var(--th-l)));
}
.px23-identity p {
  font:
    700 10px Consolas,
    monospace;
  color: hsl(calc(var(--th-h) + -3.4) calc(41% * var(--th-s)) calc(64.1% + var(--th-l)));
  margin: 0 0 6px;
}
.px23-card-location {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font:
    9px Consolas,
    monospace;
  color: #8ea29a;
}
.px23-vitals {
  padding: 2px 14px 12px;
  display: grid;
  gap: 10px;
}
.px23-meter > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 5px;
  font:
    700 10px Consolas,
    monospace;
}
.px23-meter strong {
  color: #a5b4a8;
}
.px23-meter b {
  color: #e5ebde;
}
.px23-track {
  height: 7px;
  background: hsl(calc(var(--th-bh) + 2.5) calc(28.6% * var(--th-bs)) 5.5%);
  border: 1px solid hsl(calc(var(--th-bh) + -23.5) calc(10.9% * var(--th-bs)) 23.3%);
  overflow: hidden;
}
.px23-track span {
  display: block;
  height: 100%;
  background: #8bba8b;
  transition: width 0.2s;
}
.px23-meter.is-shield .px23-track span {
  background: #83aebe;
}
.px23-meter.is-empty .px23-track span {
  background: #b6635e;
}
.px23-statrow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: #39413b;
  border-top: 1px solid #39413b;
  border-bottom: 1px solid #39413b;
}
.px23-statrow > div {
  background: hsl(calc(var(--th-bh) + 1) calc(17.9% * var(--th-bs)) 11%);
  text-align: center;
  padding: 9px 3px;
}
.px23-statrow small {
  display: block;
  font:
    800 9px Consolas,
    monospace;
  color: #9da89e;
}
.px23-statrow b {
  font:
    800 20px Consolas,
    monospace;
  color: hsl(calc(var(--th-h) + -4.3) calc(64.3% * var(--th-s)) calc(72.5% + var(--th-l)));
}
.px23-statuses {
  padding: 10px 13px;
  min-height: 45px;
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  align-items: center;
}
.px23-statuses button,
.px23-debuff {
  width: auto;
  border: 1px solid #7e6350;
  background: #49352735;
  color: hsl(calc(var(--th-h) + -10.6) calc(50.7% * var(--th-s)) calc(73.7% + var(--th-l)));
  padding: 5px 7px;
  font:
    700 9px Consolas,
    monospace;
  cursor: pointer;
}
.px23-debuff {
  cursor: default;
}
.px23-statuses small {
  font:
    700 9px Consolas,
    monospace;
  color: #7c998b;
}
.px23-actions {
  display: grid;
  grid-template-columns: 62px repeat(3, minmax(0, 1fr));
  gap: 5px;
  padding: 0 12px 9px;
}
.px23-damage-amount {
  font:
    700 8px Consolas,
    monospace;
  color: hsl(calc(var(--th-h) + 0.7) calc(13% * var(--th-s)) calc(68.4% + var(--th-l)));
  display: grid;
  gap: 3px;
}
.px23-damage-amount input {
  min-width: 0;
  max-width: 100%;
  height: 35px;
  padding: 5px;
  color: hsl(calc(var(--th-h) + 2.4) calc(48.3% * var(--th-s)) calc(82.5% + var(--th-l)));
  text-align: center;
  border-radius: 2px;
}
.px23-actions button {
  align-self: end;
  min-height: 35px;
  border: 1px solid #626051;
  color: hsl(calc(var(--th-h) + -1) calc(46.4% * var(--th-s)) calc(81% + var(--th-l)));
  background: hsl(calc(var(--th-bh) + -25) calc(10.3% * var(--th-bs)) 17.1%);
  font:
    800 9px Consolas,
    monospace;
  padding: 5px 2px;
  cursor: pointer;
}
.px23-actions .px23-damage {
  color: #e1a59b;
  border-color: #83504a;
}
.px23-actions .px23-heal {
  color: #a7d1ad;
  border-color: #456c54;
}
.px23-actions .px23-shield {
  color: #a5cddc;
  border-color: #4f7382;
}
.px23-card button:hover,
.px23-recruit button:hover {
  filter: brightness(1.16);
}
.px23-condition-picker {
  display: flex;
  padding: 0 12px 12px;
  gap: 5px;
}
.px23-condition-picker select {
  font-size: 10px;
  min-width: 0;
  height: 34px;
  border-radius: 2px;
  background: hsl(calc(var(--th-bh) + 7) calc(26.3% * var(--th-bs)) 7.5%);
}
.px23-condition-picker button {
  width: auto;
  flex: 0 0 63px;
  border: 1px solid hsl(calc(var(--th-h) + -4.7) calc(36.7% * var(--th-s)) calc(39% + var(--th-l)));
  color: hsl(calc(var(--th-h) + -2.3) calc(61.5% * var(--th-s)) calc(74.5% + var(--th-l)));
  background: hsl(calc(var(--th-h) + -4.2) calc(44.5% * var(--th-s)) calc(23.3% + var(--th-l)) / 0.2);
  font:
    800 9px Consolas,
    monospace;
  cursor: pointer;
}
.px23-card-detail {
  border-top: 1px solid #4e513d;
}
.px23-card-detail summary {
  list-style: none;
  cursor: pointer;
  padding: 12px;
  color: hsl(calc(var(--th-h) + -3.5) calc(22.8% * var(--th-s)) calc(66.5% + var(--th-l)));
  background: hsl(calc(var(--th-bh) + -5) calc(14.9% * var(--th-bs)) 9.2%);
  font:
    800 9px Consolas,
    monospace;
  display: flex;
  justify-content: space-between;
}
.px23-card-detail summary::-webkit-details-marker {
  display: none;
}
.px23-card-detail[open] summary {
  color: hsl(calc(var(--th-h) + -3.1) calc(58% * var(--th-s)) calc(72% + var(--th-l)));
}
.px23-card-detail > .px23-fields,
.px23-card-detail > label,
.px23-card-detail > .px23-card-foot {
  margin: 10px 12px;
}
.px23-fields {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}
.px23-fields label,
.px23-card-detail > label {
  display: grid;
  gap: 5px;
  color: hsl(calc(var(--th-h) + 1.4) calc(27.2% * var(--th-s)) calc(68.2% + var(--th-l)));
  font:
    700 9px Consolas,
    monospace;
}
.px23-fields input {
  padding: 5px;
  height: 32px;
  font-size: 11px;
  min-width: 0;
}
.px23-card-detail > label input,
.px23-card-detail textarea {
  font-size: 11px;
  background: hsl(calc(var(--th-bh) + 11.4) calc(33.3% * var(--th-bs)) 6.5%);
}
.px23-card-foot {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.px23-card-foot button {
  width: auto;
  border: 1px solid hsl(calc(var(--th-h) + 2.4) calc(12.4% * var(--th-s)) calc(30% + var(--th-l)));
  background: #252823;
  color: hsl(calc(var(--th-h) + 1.5) calc(19% * var(--th-s)) calc(68% + var(--th-l)));
  padding: 7px;
  font:
    800 9px Consolas,
    monospace;
  cursor: pointer;
}
.px23-card-foot .px23-remove {
  color: #bf8b82;
}
.px23-more {
  display: block;
  margin: 18px auto 0;
  border: 1px solid hsl(calc(var(--th-h) + -4.3) calc(38.8% * var(--th-s)) calc(45.5% + var(--th-l)));
  background: hsl(calc(var(--th-h) + -7.5) calc(30.8% * var(--th-s)) calc(15.3% + var(--th-l)));
  color: hsl(calc(var(--th-h) + -3.1) calc(58.9% * var(--th-s)) calc(71.4% + var(--th-l)));
  padding: 12px 25px;
  font:
    800 10px Consolas,
    monospace;
  cursor: pointer;
}
.px23-shown {
  text-align: center;
  font:
    9px Consolas,
    monospace;
  color: #7d9288;
  padding: 12px;
}
.px23-empty {
  grid-column: 1/-1;
  padding: 40px 10px;
  text-align: center;
  border: 1px dashed hsl(calc(var(--th-h) + -1.2) calc(18.1% * var(--th-s)) calc(28.2% + var(--th-l)));
  color: hsl(calc(var(--th-h) + 0) calc(18% * var(--th-s)) calc(65.1% + var(--th-l)));
}
.px23-recruit {
  margin-top: 15px;
  border: 1px solid hsl(calc(var(--th-h) + -0.5) calc(21.1% * var(--th-s)) calc(28.8% + var(--th-l)));
  background: hsl(calc(var(--th-bh) + 1.7) calc(20.9% * var(--th-bs)) 8.4%);
}
.px23-recruit > summary {
  cursor: pointer;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 20px;
  justify-content: space-between;
  font:
    800 11px Consolas,
    monospace;
  letter-spacing: 0.5px;
  color: hsl(calc(var(--th-h) + -2.6) calc(57.8% * var(--th-s)) calc(71.2% + var(--th-l)));
}
.px23-recruit > summary span {
  font-size: 9px;
  color: #9d9c8d;
}
.px23-recruit-body {
  border-top: 1px solid #383d34;
  padding: 14px;
  display: grid;
  gap: 15px;
}
.px23-recruit-block {
  display: grid;
  gap: 8px;
}
.px23-recruit-block > strong {
  font:
    800 10px Consolas,
    monospace;
  color: hsl(calc(var(--th-h) + -3.2) calc(48.7% * var(--th-s)) calc(69.4% + var(--th-l)));
}
.px23-addrow {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: end;
}
.px23-addrow > select,
.px23-addrow > input {
  flex: 1 1 170px;
  width: auto;
  min-width: 100px;
}
.px23-addrow > label {
  display: grid;
  gap: 3px;
  flex: 0 0 60px;
  font:
    700 9px Consolas,
    monospace;
  color: hsl(calc(var(--th-h) + 9.5) calc(12.4% * var(--th-s)) calc(65.1% + var(--th-l)));
}
.px23-addrow > label input {
  height: 35px;
  padding: 5px;
}
.px23-recruit p {
  margin: 0;
  color: #9fa79c;
  font-size: 11px;
}
@media (max-width: 800px) {
  .px23-roster-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
  }
  .px23-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .px23-toolbar #px23-search {
    width: 100%;
  }
  .px23-offline {
    margin-left: 0;
  }
}
@media (max-width: 420px) {
  .px23-roster-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .px23-actions {
    grid-template-columns: 59px repeat(3, minmax(0, 1fr));
  }
  .px23-recruit > summary span {
    display: none;
  }
}
/* Increase the most-used labels to readable sizes on ordinary displays. */
.px23-card-top {
  font-size: 10px;
}
.px23-meter > div:first-child {
  font-size: 11px;
}
.px23-statrow small {
  font-size: 10px;
}
.px23-actions button {
  font-size: 10px;
}
.px23-condition-picker button {
  font-size: 10px;
}
/* Equipment menus are intentionally click-only and constrained for smooth navigation. */
.pxu-menu-results {
  contain: layout style;
}
.pxu-global-overlay .pxu-menu-choice {
  contain: layout style;
}
.px23-roster-grid .px23-card {
  content-visibility: auto;
  contain-intrinsic-size: 390px;
}
/* v1.25: hosted release notifications; no motion or blur. */
.px-update-pill {
  position: fixed;
  bottom: 14px;
  right: 16px;
  z-index: 11003;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 11px;
  border: 1px solid hsl(calc(var(--th-h) + -1.9) calc(25.2% * var(--th-s)) calc(30.4% + var(--th-l)));
  border-radius: 6px;
  background: hsl(calc(var(--th-bh) + 15) calc(16.4% * var(--th-bs)) 10.8%);
  color: hsl(calc(var(--th-h) + -1.5) calc(42.9% * var(--th-s)) calc(76.7% + var(--th-l)));
  box-shadow: 0 4px 18px #0008;
  font:
    700 11px Consolas,
    monospace;
  letter-spacing: 0.4px;
  cursor: pointer;
  max-width: calc(100vw - 24px);
}
.px-update-pill:hover,
.px-update-pill:focus-visible {
  background: hsl(calc(var(--th-h) + 4.4) calc(20% * var(--th-s)) calc(16.7% + var(--th-l)));
  border-color: hsl(calc(var(--th-h) + -1.8) calc(50.8% * var(--th-s)) calc(64.1% + var(--th-l)));
  color: hsl(calc(var(--th-h) + 0.3) calc(100% * var(--th-s)) calc(88.8% + var(--th-l)));
  outline: none;
}
.px-update-pill.ready {
  border-color: hsl(calc(var(--th-h) + -7) calc(43.8% * var(--th-s)) calc(48.8% + var(--th-l)));
  background: hsl(calc(var(--th-h) + -2.5) calc(33.3% * var(--th-s)) calc(14.1% + var(--th-l)));
  color: hsl(calc(var(--th-h) + -2.5) calc(82.8% * var(--th-s)) calc(77.3% + var(--th-l)));
}
.px-update-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #908b77;
  flex: none;
}
.px-update-pill.ready .px-update-dot {
  background: hsl(calc(var(--th-h) + -3.9) calc(78.3% * var(--th-s)) calc(67.5% + var(--th-l)));
}
.px-update-backdrop {
  position: fixed;
  inset: 0;
  z-index: 11004;
  display: grid;
  place-items: center;
  padding: 18px;
  background: hsl(calc(var(--th-bh) + 25) calc(57.1% * var(--th-bs)) 2.7% / 0.8);
  backdrop-filter: none !important;
  animation: none !important;
  transition: none !important;
}
.px-update-modal {
  position: relative;
  max-width: 490px;
  width: 100%;
  padding: 25px 25px 22px;
  background: hsl(calc(var(--th-bh) + 18.1) calc(27.7% * var(--th-bs)) 9.2%);
  border: 1px solid hsl(calc(var(--th-h) + -7) calc(40.9% * var(--th-s)) calc(43.1% + var(--th-l)));
  border-top: 3px solid hsl(calc(var(--th-h) + -2.9) calc(68.1% * var(--th-s)) calc(64.3% + var(--th-l)));
  box-shadow: 0 14px 55px #000b;
  border-radius: 8px;
  color: hsl(calc(var(--th-h) + 10.7) calc(24.1% * var(--th-s)) calc(88.6% + var(--th-l)));
  font-family: var(--font), sans-serif;
  animation: none !important;
  transition: none !important;
}
.px-update-eyebrow {
  font:
    800 11px Consolas,
    monospace;
  letter-spacing: 2px;
  color: hsl(calc(var(--th-h) + -5.7) calc(38.8% * var(--th-s)) calc(59% + var(--th-l)));
  text-transform: uppercase;
}
.px-update-modal h2 {
  margin: 9px 0 9px;
  font:
    800 30px var(--head),
    sans-serif;
  letter-spacing: 0.6px;
  color: hsl(calc(var(--th-h) + -2.3) calc(100% * var(--th-s)) calc(91.2% + var(--th-l)));
}
.px-update-modal p {
  margin: 0 0 13px;
  line-height: 1.6;
  color: #bfc8c7;
}
.px-update-versions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 12px 13px;
  margin: 14px 0;
  background: hsl(calc(var(--th-bh) + 11.4) calc(17.5% * var(--th-bs)) 12.4%);
  border: 1px solid hsl(calc(var(--th-bh) + -10.5) calc(8.7% * var(--th-bs)) 24.9%);
  border-radius: 5px;
  font:
    700 12px Consolas,
    monospace;
  color: #d2dfd9;
}
.px-update-versions span {
  color: hsl(calc(var(--th-h) + -5.7) calc(38.8% * var(--th-s)) calc(59% + var(--th-l)));
}
.px-update-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
  flex-wrap: wrap;
}
.px-update-actions button {
  border-radius: 4px;
  padding: 10px 17px;
  font:
    800 12px Consolas,
    monospace;
  letter-spacing: 0.5px;
  cursor: pointer;
}
.px-update-later {
  background: hsl(calc(var(--th-bh) + 16.4) calc(17.1% * var(--th-bs)) 16.1%);
  color: #e6ecec;
  border: 1px solid #49565c;
}
.px-update-now {
  background: hsl(calc(var(--th-h) + -7.4) calc(48.2% * var(--th-s)) calc(44.7% + var(--th-l)));
  color: #10150e;
  border: 1px solid hsl(calc(var(--th-h) + -2.8) calc(60.5% * var(--th-s)) calc(67.3% + var(--th-l)));
}
.px-update-actions button:hover {
  filter: brightness(1.14);
}
.px-update-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  background: transparent;
  border: 1px solid #506063;
  border-radius: 3px;
  color: #bbc5c4;
  cursor: pointer;
}
.px-update-note {
  border-left: 2px solid hsl(calc(var(--th-h) + -8.2) calc(32% * var(--th-s)) calc(49% + var(--th-l)));
  padding: 6px 0 6px 12px;
  margin: 8px 0 0;
  color: #d2d7d0;
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.px-update-small {
  font-size: 11px !important;
  color: #a1b2ac !important;
  margin-top: 10px !important;
}
@media (max-width: 600px) {
  .px-update-pill {
    bottom: 8px;
    right: 8px;
    padding: 7px 10px;
    font-size: 10px;
  }
  .px-update-modal {
    padding: 22px 17px;
  }
  .px-update-modal h2 {
    font-size: 25px;
  }
  .px-update-actions button {
    flex: 1;
  }
}

.px-save-badge.failed {
  background: #5a1f1c;
  border: 1px solid #e0574a;
  color: #ffd9d4;
  padding: 6px 9px;
  border-radius: 2px;
  font-weight: 800;
  letter-spacing: 1px;
  cursor: pointer;
}
.px-save-badge.failed:hover {
  background: #7a2620;
}
#px-save-alert {
  position: fixed;
  top: 82px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  max-width: min(680px, calc(100vw - 32px));
  padding: 11px 14px;
  background: #2b1513;
  border: 1px solid #e0574a;
  border-left: 4px solid #ff6b5c;
  color: #ffe2dc;
  font-size: 12px;
  box-shadow: 0 12px 40px #000a;
}
#px-save-alert strong {
  letter-spacing: 1px;
  color: #ffb3a8;
}
#px-save-alert .btn {
  margin-left: auto;
}

/* Bottom-right corner stack. On the operator-select and creation screens the
   sound bar (.px-audio-gate) sits in the corner, so the update pill goes above
   it instead of covering it; toasts go above whatever is there. */
body:has(.px-audio-gate) .px-update-pill {
  bottom: 68px;
}
body:has(.px-update-pill) .toast {
  bottom: 60px;
}
body:has(.px-audio-gate) .toast {
  bottom: 68px;
}
body:has(.px-audio-gate):has(.px-update-pill) .toast {
  bottom: 110px;
}
@media (max-width: 850px) {
  body:has(.px-audio-gate) .px-update-pill {
    bottom: 58px;
    right: 9px;
  }
  body:has(.px-audio-gate) .toast {
    bottom: 58px;
  }
  body:has(.px-audio-gate):has(.px-update-pill) .toast {
    bottom: 100px;
  }
}

/* Allegiance: panel on the character sheet and reputation tab, and the
   faction cards in the guided creator. */
.px-allegiance-panel {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 12px;
  align-items: center;
  margin-top: 12px;
  padding: 11px 12px;
  border: 1px solid hsl(calc(var(--th-h) + -2) calc(35% * var(--th-s)) calc(30% + var(--th-l)));
  border-left: 3px solid hsl(calc(var(--th-h) + -1) calc(70% * var(--th-s)) calc(58% + var(--th-l)));
  background: linear-gradient(
    120deg,
    hsl(calc(var(--th-h) + -3) calc(40% * var(--th-s)) calc(12% + var(--th-l)) / 0.55),
    hsl(calc(var(--th-bh) + 0) calc(14% * var(--th-bs)) 8%)
  );
}
.px-allegiance-panel-emblem {
  width: 58px;
  height: 58px;
  object-fit: contain;
  filter: drop-shadow(
    0 0 8px hsl(calc(var(--th-h) + 0) calc(70% * var(--th-s)) calc(50% + var(--th-l)) / 0.35)
  );
}
.px-allegiance-panel-body {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.px-allegiance-label {
  font:
    700 9px Consolas,
    monospace;
  letter-spacing: 1.6px;
  color: hsl(calc(var(--th-h) + -2) calc(45% * var(--th-s)) calc(58% + var(--th-l)));
}
.px-allegiance-panel-body strong {
  font-family: var(--head);
  font-size: 16px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: hsl(calc(var(--th-h) + -1) calc(80% * var(--th-s)) calc(72% + var(--th-l)));
}
.px-allegiance-panel-body small {
  color: #a9b0a8;
  font-size: 11px;
  line-height: 1.35;
}
.px-allegiance-panel-body select {
  margin-top: 5px;
  max-width: 340px;
}
.content > .px-allegiance-panel {
  margin: 0 0 16px;
  grid-template-columns: 76px 1fr;
}
.content > .px-allegiance-panel .px-allegiance-panel-emblem {
  width: 76px;
  height: 76px;
}
.px-allegiance-emblem {
  width: 74px;
  height: 74px;
  object-fit: contain;
  transition:
    transform 0.18s ease,
    filter 0.18s ease;
  filter: drop-shadow(
    0 0 6px hsl(calc(var(--th-h) + 0) calc(70% * var(--th-s)) calc(45% + var(--th-l)) / 0.25)
  );
}
.recruit-card:hover .px-allegiance-emblem,
.recruit-card.selected .px-allegiance-emblem {
  transform: scale(1.06);
  filter: drop-shadow(
    0 0 10px hsl(calc(var(--th-h) + 0) calc(75% * var(--th-s)) calc(58% + var(--th-l)) / 0.55)
  );
}
.px-allegiance-card .recruit-title {
  color: hsl(calc(var(--th-h) + -1) calc(70% * var(--th-s)) calc(76% + var(--th-l)));
}
.proxima-brand-logo,
.prox-seal img,
.px-select-avatar img,
.px-gate-brand img {
  object-fit: contain;
}

/* Species cards in the guided creator: each card carries its home faction's
   theme variables (inline style), so the crest, border and glow match it. */
.px-species-card {
  border-color: hsl(calc(var(--th-h) + -2) calc(30% * var(--th-s)) calc(26% + var(--th-l)));
  background: radial-gradient(
      circle at 50% 30%,
      hsl(calc(var(--th-h) + 0) calc(60% * var(--th-s)) calc(40% + var(--th-l)) / 0.16),
      transparent 62%
    ),
    linear-gradient(
      160deg,
      hsl(calc(var(--th-bh) + 0) calc(16% * var(--th-bs)) 10%),
      hsl(calc(var(--th-bh) + 0) calc(12% * var(--th-bs)) 6%)
    );
}
.px-species-card .recruit-emblem {
  height: 96px;
}
.px-species-card .px-species-sigil {
  width: 92px;
  height: 92px;
  color: hsl(calc(var(--th-h) + 0) calc(72% * var(--th-s)) calc(64% + var(--th-l)));
  stroke: hsl(calc(var(--th-h) + 0) calc(72% * var(--th-s)) calc(64% + var(--th-l)));
  filter: drop-shadow(
    0 0 7px hsl(calc(var(--th-h) + 0) calc(70% * var(--th-s)) calc(50% + var(--th-l)) / 0.35)
  );
}
.px-species-card .px-species-outer {
  stroke: hsl(calc(var(--th-h) + 0) calc(45% * var(--th-s)) calc(40% + var(--th-l)));
  stroke-width: 1.5;
  fill: hsl(calc(var(--th-h) + 0) calc(40% * var(--th-s)) calc(14% + var(--th-l)) / 0.55);
}
.px-species-card .px-species-inner {
  fill: none;
  stroke-width: 0.8;
  stroke-dasharray: 3 3;
  opacity: 0.8;
}
.px-species-card .px-species-ticks {
  stroke: hsl(calc(var(--th-h) + 0) calc(80% * var(--th-s)) calc(70% + var(--th-l)));
  stroke-width: 2;
}
/* the silhouette (first shape of the glyph) is filled with a soft tint */
.px-species-fill > * {
  display: none;
}
.px-species-fill > :first-child {
  display: inline;
  fill: hsl(calc(var(--th-h) + 0) calc(70% * var(--th-s)) calc(55% + var(--th-l)) / 0.2);
  stroke: none;
}
.px-species-card .px-species-glyph {
  stroke-width: 3.2;
}
.px-species-card .recruit-title {
  color: hsl(calc(var(--th-h) + 0) calc(55% * var(--th-s)) calc(88% + var(--th-l)));
}
.px-species-card .recruit-meta {
  color: hsl(calc(var(--th-h) + 0) calc(60% * var(--th-s)) calc(62% + var(--th-l)));
}
.px-species-faction {
  position: absolute;
  top: 9px;
  left: 10px;
  width: 24px;
  height: 24px;
  object-fit: contain;
  opacity: 0.85;
}
.px-species-stats {
  margin-top: auto;
  padding-top: 6px;
  width: 100%;
  border-top: 1px solid hsl(calc(var(--th-h) + 0) calc(30% * var(--th-s)) calc(24% + var(--th-l)));
  font:
    700 10px Consolas,
    monospace;
  letter-spacing: 0.6px;
  color: hsl(calc(var(--th-h) + 0) calc(40% * var(--th-s)) calc(72% + var(--th-l)));
}
.px-species-card:hover,
.px-species-card.selected {
  border-color: hsl(calc(var(--th-h) + 0) calc(75% * var(--th-s)) calc(60% + var(--th-l)));
  box-shadow:
    0 10px 28px #0008,
    0 0 0 1px hsl(calc(var(--th-h) + 0) calc(75% * var(--th-s)) calc(60% + var(--th-l)) / 0.35),
    inset 3px 0 hsl(calc(var(--th-h) + 0) calc(75% * var(--th-s)) calc(60% + var(--th-l)));
}
.px-species-card:hover .px-species-sigil,
.px-species-card.selected .px-species-sigil {
  color: hsl(calc(var(--th-h) + 0) calc(90% * var(--th-s)) calc(78% + var(--th-l)));
  stroke: hsl(calc(var(--th-h) + 0) calc(90% * var(--th-s)) calc(78% + var(--th-l)));
  filter: drop-shadow(
    0 0 11px hsl(calc(var(--th-h) + 0) calc(80% * var(--th-s)) calc(58% + var(--th-l)) / 0.6)
  );
}

/* Paragon and Renegade keep their own colors under every faction theme. */
.px-rep-meter:not(.renegade) {
  border-color: #2f6c96;
  border-left: 3px solid #3f9be0;
  background: linear-gradient(120deg, rgba(52, 123, 167, 0.18), transparent 60%), #0d151b;
}
.px-rep-meter:not(.renegade) strong,
.px-rep-meter:not(.renegade) h3 {
  color: #7cc4f2;
}
.px-rep-meter:not(.renegade) .fill {
  background: linear-gradient(90deg, #2b78b3, #59b5f0);
}
.px-rep-meter.renegade {
  border-color: #8e3434;
  border-left: 3px solid #e0504f;
  background: linear-gradient(120deg, rgba(170, 53, 54, 0.2), transparent 60%), #170e0f;
}
.px-rep-meter.renegade strong,
.px-rep-meter.renegade h3 {
  color: #f08a85;
}
.px-rep-meter.renegade .fill {
  background: linear-gradient(90deg, #a92f31, #e85b55);
}

/* Species body outline on the gear screen (js/species-art.js). */
.pxf-stop-a {
  stop-color: hsl(calc(var(--th-h) + 0) calc(12% * var(--th-s)) calc(42% + var(--th-l)));
}
.pxf-stop-b {
  stop-color: hsl(calc(var(--th-bh) + 0) calc(20% * var(--th-bs)) 8%);
}
.pxf-body > * {
  fill: url(#pxuGrad);
  stroke: hsl(calc(var(--th-h) + 0) calc(45% * var(--th-s)) calc(55% + var(--th-l)));
  stroke-width: 1.6;
  stroke-linejoin: round;
}
.pxf-body > .pxf-line {
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
}
.pxf-body > .pxf-tentacle {
  fill: none;
  stroke-width: 9;
  stroke-linecap: round;
  stroke: hsl(calc(var(--th-h) + 0) calc(30% * var(--th-s)) calc(36% + var(--th-l)));
}
.pxf-body > .pxf-back {
  opacity: 0.6;
}
.pxf-glow > * {
  fill: hsl(calc(var(--th-h) + 0) calc(90% * var(--th-s)) calc(70% + var(--th-l)));
  stroke: hsl(calc(var(--th-h) + 0) calc(90% * var(--th-s)) calc(70% + var(--th-l)));
  stroke-width: 2;
  filter: drop-shadow(0 0 4px hsl(calc(var(--th-h) + 0) calc(90% * var(--th-s)) calc(60% + var(--th-l))));
}
.pxu-figure {
  opacity: 0.32;
}
.pxu-figure-emblem {
  position: absolute;
  width: 34%;
  max-width: 150px;
  aspect-ratio: 1;
  object-fit: contain;
  bottom: 6%;
  right: 4%;
  opacity: 0.55;
}
.pxu-build-label {
  position: absolute;
  top: 2px;
  left: 0;
  font:
    700 9px Consolas,
    monospace;
  letter-spacing: 1.6px;
  color: hsl(calc(var(--th-h) + 0) calc(50% * var(--th-s)) calc(58% + var(--th-l)));
  pointer-events: none;
}

/* Campaign roster: faction emblem, level badge, faction grouping. */
.px23-avatar.has-emblem {
  background: none;
  border: 0;
  clip-path: none;
}
.px23-avatar img {
  width: 60px;
  height: 60px;
  object-fit: contain;
}
.px23-level-badge {
  display: inline-block;
  padding: 1px 6px;
  margin-right: 4px;
  border-radius: 3px;
  background: hsl(calc(var(--th-h) + 0) calc(50% * var(--th-s)) calc(40% + var(--th-l)) / 0.35);
  color: hsl(calc(var(--th-h) + 0) calc(70% * var(--th-s)) calc(80% + var(--th-l)));
  font-weight: 800;
}
.px23-faction {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  letter-spacing: 0.4px;
  color: hsl(calc(var(--th-h) + 0) calc(55% * var(--th-s)) calc(66% + var(--th-l)));
}
.px23-card:not(.has-faction) .px23-faction {
  color: #7f8a85;
}
.px23-card.has-faction {
  border-top: 2px solid hsl(calc(var(--th-h) + 0) calc(60% * var(--th-s)) calc(55% + var(--th-l)));
}
.px23-group {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 8px 0 0;
  padding-bottom: 6px;
  border-bottom: 1px solid #3b3f37;
  font: 700 13px var(--head, inherit);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #d9d6c8;
}
.px23-group img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}
.px23-group small {
  margin-left: auto;
  color: #8d968f;
  font-weight: 500;
}
.px23-toolbar select {
  width: auto;
  min-width: 150px;
}
.px23-fields .px23-wide {
  grid-column: 1 / -1;
}
#px-campaign-faction {
  width: auto;
  min-width: 140px;
}

/* Experience points (js/xp.js). */
.pxxp-panel {
  margin-top: 12px;
  padding: 11px 12px;
  border: 1px solid hsl(calc(var(--th-h) + -2) calc(35% * var(--th-s)) calc(30% + var(--th-l)));
  background: hsl(calc(var(--th-bh) + 0) calc(14% * var(--th-bs)) 8%);
  display: grid;
  gap: 7px;
}
.pxxp-panel.ready {
  border-color: hsl(calc(var(--th-h) + 0) calc(70% * var(--th-s)) calc(58% + var(--th-l)));
}
.pxxp-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.pxxp-label {
  font:
    700 9px Consolas,
    monospace;
  letter-spacing: 1.6px;
  color: hsl(calc(var(--th-h) + -2) calc(45% * var(--th-s)) calc(58% + var(--th-l)));
}
.pxxp-head b {
  font-size: 16px;
}
.pxxp-head small {
  margin-left: auto;
  color: #98a19a;
  font-size: 11px;
}
.pxxp-bar,
.px23-xpbar {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: #ffffff14;
  overflow: hidden;
}
.pxxp-bar i,
.px23-xpbar i {
  display: block;
  height: 100%;
  background: hsl(calc(var(--th-h) + 0) calc(65% * var(--th-s)) calc(58% + var(--th-l)));
}
.px23-xpbar {
  height: 3px;
  margin-top: 4px;
  max-width: 180px;
}
.pxxp-add {
  display: grid;
  grid-template-columns: 70px 1fr auto;
  gap: 5px;
}
.pxxp-log summary {
  cursor: pointer;
  color: #98a19a;
  font-size: 11px;
}
.pxxp-log div {
  display: flex;
  gap: 8px;
  padding: 3px 0;
  font-size: 12px;
  border-bottom: 1px solid #ffffff10;
}
.pxxp-log b {
  color: #9fd8a8;
  min-width: 56px;
}
.pxxp-log b.neg {
  color: #e6a29b;
}
.pxxp-log small {
  margin-left: auto;
  color: #8f9993;
}
.pxxp-recipients {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0;
}
.pxxp-recipients label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid #ffffff22;
  font-size: 12px;
  cursor: pointer;
}
.pxxp-recipients input {
  width: auto;
}
.pxxp-recipients small {
  color: #8f9993;
}
.pxxp-total {
  display: flex;
  align-items: end;
  gap: 8px;
  margin: 6px 0;
}
.pxxp-total label {
  display: grid;
  gap: 3px;
  font-size: 10.5px;
  color: var(--pxe-dim, #8f9993);
  width: 110px;
}
.pxxp-total span {
  font-size: 11px;
  color: var(--pxe-dim, #8f9993);
}
.pxxp-check {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 12px;
  color: var(--pxe-dim, #8f9993);
}
.pxxp-check input {
  width: auto !important;
}
.pxxp-mission {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: end;
}
.pxxp-mission > div {
  display: grid;
}
.pxxp-mission b {
  font-size: 24px;
}
.pxxp-mission small {
  color: #98a19a;
}
.pxxp-mission label {
  display: grid;
  gap: 3px;
  font-size: 11px;
  width: 140px;
}
.pxxp-campaign {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  padding: 9px 12px;
  margin-bottom: 15px;
  border: 1px solid #434638;
  background: hsl(calc(var(--th-bh) + 3.6) calc(17.1% * var(--th-bs)) 8%);
}
.pxxp-campaign b {
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.pxxp-campaign input,
.pxxp-campaign select {
  width: auto;
  min-width: 110px;
}
.pxxp-campaign input#pxxp-camp-reason {
  flex: 1;
  min-width: 160px;
}