/* Character screen I — live TFA chrome. Tabs swap the center only. */
#page.ux { max-width: none; width: 100%; }

.gui-desk { position: relative; }
.gui-desk[hidden] { display: none !important; }

.stage-pause {
  display: grid;
  place-items: center;
  min-height: 320px;
  background: #071018;
  border: 1px solid #1d4e66;
  text-align: center;
  padding: 32px 20px;
}
.stage-pause[hidden] { display: none !important; }
.stage-pause p {
  margin: 0 0 14px;
  color: var(--cyan);
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: 13px;
}
.stage-pause button {
  background: #102838;
  color: var(--cyan);
  border: 1px solid #2a6a88;
  padding: 10px 16px;
  font: inherit;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}
.stage-pause button:hover,
.stage-pause button:focus { border-color: var(--cyan); outline: none; }

#win-i.win { width: 100%; position: relative; }
#win-i .win-x { margin-left: 8px; }
#win-i .win-restore {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  min-width: 32px;
  margin-left: 8px;
  border: 1px solid #2a6a88;
  background: #102030;
  color: var(--cyan);
  cursor: pointer;
  padding: 0;
  display: grid;
  place-items: center;
}
#win-i .win-restore[hidden] { display: none !important; }
#win-i .win-restore svg {
  width: 14px;
  height: 14px;
  display: block;
}
#win-i .win-restore:hover,
#win-i .win-restore:focus {
  border-color: var(--cyan);
  color: var(--cyan);
  background: #102838;
  outline: none;
}
#win-i .i-wallet {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}
.i-wallet-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 10px 5px;
  border: 1px solid #1d4e66;
  background: #05080c;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.i-wallet-item strong {
  color: var(--cyan);
  font-size: 14px;
  letter-spacing: .04em;
}
.i-wallet-item.currency strong,
.credit-chip.currency strong {
  color: var(--amber);
}
.i-screen {
  display: flex;
  flex-direction: column;
  background: #05080c;
  min-height: 640px;
}
.i-tabs {
  display: flex;
  justify-content: center;
  gap: 0;
  border-bottom: 1px solid #1d4e66;
  flex: 0 0 auto;
}
.i-tabs button {
  flex: 1;
  max-width: 200px;
  background: transparent;
  color: var(--muted);
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 12px 6px;
  font: inherit;
  font-size: 11px;
  letter-spacing: .12em;
  cursor: pointer;
  text-transform: uppercase;
}
.i-tabs button[aria-selected="true"] {
  color: var(--cyan);
  border-bottom-color: var(--cyan);
  background: rgba(90, 220, 235, .06);
  box-shadow: inset 0 0 12px rgba(90, 220, 235, .08);
}

.i-body {
  display: grid;
  grid-template-columns: 250px 1fr 260px;
  gap: 0;
  flex: 1;
  min-height: 480px;
}
@media (max-width: 980px) {
  .i-body { grid-template-columns: 1fr; }
}

.doll-col, .center-col, .right-col {
  padding: 12px;
  border-right: 1px solid #16364a;
  min-height: 0;
}
.center-col {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.right-col { border-right: 0; }

.doll-stage {
  display: grid;
  grid-template-columns: 72px 1fr 88px;
  gap: 6px;
  align-items: stretch;
  min-height: 340px;
  cursor: grab;
  user-select: none;
  perspective: 700px;
}
.doll-stage:active { cursor: grabbing; }
.callouts {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 18px 0 48px;
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cyan);
}
.callouts.left { text-align: right; }
.figure-wrap { display: grid; place-items: center; position: relative; }
.figure {
  width: 92px;
  height: 220px;
  position: relative;
  transform: rotateY(var(--rot, 0deg));
  filter: drop-shadow(0 0 10px rgba(90, 220, 235, .25));
}
.suit { width: 100%; height: 100%; }
.suit .plate {
  fill: #121820;
  stroke: #3aa8c8;
  stroke-width: 1.2;
}
.suit .vis { fill: #5adceb; }
.suit .core { fill: #1a3040; stroke: #5adceb; stroke-width: 1; }
.suit .rear-helm { fill: #0c1822; stroke: #2a6a88; }
.suit .spine { fill: #1a3040; stroke: #5adceb; }
.suit .mount-mark {
  fill: #0a2434;
  stroke: #5adceb;
  stroke-width: 1.2;
}
#win-i[data-tab="tent"] .gear-callouts { display: none; }
#win-i[data-tab="tent"] .tent-callouts { display: flex; }
#win-i[data-tab="tent"] .suit-front { display: none; }
.suit-back { display: none; }
#win-i[data-tab="tent"] .suit-back { display: block; }
#win-i[data-tab="tent"] .tent-mounts { display: flex; }
#win-i[data-tab="tent"] .figure { transform: none; }
#win-i[data-tab="tent"] .doll-stage { cursor: default; }
.tent-callouts { display: none; }
.ordn-callouts { display: none; }
#win-i[data-tab="ordn"] .callouts.right.ordn-callouts { display: flex; justify-content: center; }
#win-i[data-tab="ordn"] .ordn-mounts { display: block; }
.tent-mounts {
  display: none;
  position: absolute;
  left: 50%;
  top: 28%;
  transform: translateX(-50%);
  flex-direction: column;
  gap: 10px;
  z-index: 2;
}
.ordn-mounts {
  display: none;
  position: absolute;
  left: 58%;
  top: 52%;
  z-index: 2;
}
.tent-mount {
  width: 34px;
  height: 22px;
  padding: 0;
  border: 1px solid #5adceb;
  background: rgba(10, 36, 52, .85);
  color: var(--cyan);
  cursor: copy;
  box-shadow: 0 0 8px rgba(90, 220, 235, .25);
}
.ordn-mount {
  width: 52px;
  height: 44px;
  padding: 0;
  border: 1px solid #5adceb;
  background: rgba(10, 36, 52, .92);
  color: var(--cyan);
  font: inherit;
  font-size: 8px;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: copy;
  box-shadow: 0 0 10px rgba(90, 220, 235, .3);
  position: relative;
}
.ordn-mount::before {
  content: "GRENADE";
  position: absolute;
  left: 50%;
  top: 4px;
  transform: translateX(-50%);
  font-size: 7px;
  letter-spacing: 0.08em;
  color: #82a8ba;
  pointer-events: none;
}
.ordn-mount::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 6px;
  transform: translateX(-50%);
  width: 14px;
  height: 18px;
  border: 1px solid #5adceb;
  border-radius: 2px 2px 4px 4px;
  box-shadow: inset 0 -2px 0 rgba(90, 220, 235, 0.35);
  pointer-events: none;
}
.tent-mount.on,
.ordn-mount.on {
  border-color: var(--amber);
  background: #2a2410;
  color: var(--amber);
}
.tent-mount.def.on {
  border-color: #5adceb;
  background: #102830;
  color: #7ec8e0;
}
.tent-mount:hover,
.tent-mount:focus,
.ordn-mount:hover,
.ordn-mount:focus {
  outline: none;
  border-color: var(--amber);
}
.tent-set {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #2a6280;
  background: #0c1c28;
  padding: 8px 10px;
  margin-bottom: 6px;
  cursor: default;
}
.tent-set.learned { border-color: var(--cyan); }
.tent-set.mounted { border-color: var(--amber); }
.tent-set.locked { opacity: .45; cursor: default; }
.tent-set .set-name {
  flex: 1;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cyan);
}
.tent-set .mode {
  background: #102030;
  color: var(--muted);
  border: 1px solid #1d4e66;
  padding: 2px 7px;
  font: inherit;
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}
.tent-set .mode.on {
  color: var(--cyan);
  border-color: var(--cyan);
}
.skill.equipped { border-color: var(--amber); }
.hint {
  font-size: 10px;
  color: var(--muted);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 8px 0 0;
  text-align: center;
}

.active-sets {
  margin-top: 8px;
  padding: 6px 8px;
  border: 1px solid rgba(90, 220, 235, 0.28);
  background: rgba(0, 12, 18, 0.72);
  font-size: 10px;
  line-height: 1.35;
}
.active-sets-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
}
.active-sets-head .tag {
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cyan);
  font-weight: 600;
}
.active-sets-head strong {
  font-variant-numeric: tabular-nums;
  color: #e8f7fb;
}
.active-sets > .hint {
  margin: 0 0 6px;
  opacity: 0.72;
  font-size: 9px;
}
.active-sets-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.active-set-row {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  gap: 6px;
  align-items: center;
  padding: 3px 4px;
  border: 1px solid rgba(90, 220, 235, 0.14);
  background: rgba(4, 18, 24, 0.55);
}
.active-set-row.on {
  border-color: rgba(90, 220, 235, 0.55);
  box-shadow: inset 0 0 8px rgba(90, 220, 235, 0.12);
}
.active-set-row.blocked {
  opacity: 0.45;
}
.active-set-row input {
  margin: 0;
  accent-color: var(--cyan);
}
.active-set-row .name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #d7eef3;
}
.active-set-row .meta {
  font-variant-numeric: tabular-nums;
  color: rgba(180, 220, 230, 0.85);
}
.loadout {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  margin-top: 10px;
}
.loadout .w {
  border: 1px solid #2a6280;
  height: 52px;
  background: #0c1c28;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 4px 2px;
  cursor: pointer;
}
.loadout .w.on { border-color: var(--cyan); box-shadow: inset 0 0 8px rgba(90, 220, 235, .2); }
.loadout .w b {
  font-size: 8px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.loadout .w .ico { width: 22px; height: 16px; margin-bottom: 2px; display: block; }

.craft-launch {
  display: flex;
  gap: 6px;
  flex: 0 0 auto;
  padding-top: 2px;
}
.craft-launch button {
  background: #0c1c28;
  color: var(--muted);
  border: 1px solid #2a6280;
  padding: 6px 12px;
  font: inherit;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}
.craft-launch button[aria-selected="true"] {
  color: var(--cyan);
  border-color: var(--cyan);
  background: #102838;
}
.inv-split {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
.inv-split.split {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 0;
}
.inv-split.split .grid {
  display: none !important;
}
.inv-split.split .craft-page {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.bag-tabs { display: flex; gap: 0; margin-bottom: 8px; }
.bag-tabs button {
  background: #0c1c28;
  color: var(--muted);
  border: 1px solid #1d4e66;
  border-bottom: 0;
  padding: 7px 10px;
  font: inherit;
  font-size: 11px;
  letter-spacing: .1em;
  cursor: pointer;
  text-transform: uppercase;
}
.bag-tabs button[aria-selected="true"] { color: var(--cyan); background: #102838; }
.craft-page {
  flex: 1 1 auto;
  min-height: 160px;
  overflow: hidden;
  background: #07141e;
  border: 1px solid #1d4e66;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.craft-page[hidden] { display: none !important; }
.craft-tools { display: flex; flex-direction: column; gap: 6px; flex: 0 0 auto; }
.craft-search-wrap { display: block; }
.craft-search {
  width: 100%;
  box-sizing: border-box;
  background: #0c1c28;
  color: var(--white);
  border: 1px solid #2a6280;
  padding: 7px 10px;
  font: inherit;
  font-size: 12px;
  letter-spacing: .04em;
}
.craft-search:focus {
  border-color: var(--cyan);
  outline: none;
}
.craft-filter-lab {
  color: var(--muted);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 6px 0;
  margin-right: 4px;
}
.craft-modes { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.craft-modes[hidden] { display: none !important; }
.craft-modes button {
  background: #0c1c28;
  color: var(--muted);
  border: 1px solid #2a6280;
  padding: 6px 10px;
  font: inherit;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}
.craft-modes button[aria-selected="true"] { color: var(--cyan); border-color: var(--cyan); background: #102838; }
.craft-body {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 8px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.craft-stacks {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
  overflow: hidden;
}
.craft-stack-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: scroll;
  scrollbar-width: thin;
  scrollbar-color: #2a6a88 #10202c;
}
.craft-catalog {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.craft-count {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  flex: 0 0 auto;
}
.craft-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: scroll;
  scrollbar-width: thin;
  scrollbar-color: #2a6a88 #10202c;
}
.craft-empty {
  margin: 0;
  padding: 12px 8px;
  color: var(--muted);
  font-size: 12px;
}
.craft-stack, .craft-row, .craft-parked {
  display: flex;
  gap: 8px;
  align-items: center;
  border: 1px solid #1d4e66;
  background: #0c2030;
  padding: 8px;
  flex: 0 0 auto;
}
.craft-stack .glyph, .craft-row .glyph, .craft-parked .glyph { width: 32px; height: 32px; flex: 0 0 32px; }
.craft-parked.empty {
  opacity: .72;
  border-style: dashed;
}
.craft-stack small, .craft-row small, .craft-parked small, .craft-kicker, .craft-note {
  display: block;
  color: var(--muted);
  font-size: 11px;
}
.craft-go {
  margin-left: auto;
  background: #102838;
  color: var(--cyan);
  border: 1px solid #2a6a88;
  padding: 6px 10px;
  font: inherit;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}
.craft-go:hover, .craft-go:focus { border-color: var(--cyan); outline: none; }
.craft-go:disabled {
  opacity: .4;
  cursor: not-allowed;
  color: var(--muted);
}
.craft-go:disabled:hover, .craft-go:disabled:focus { border-color: #2a6a88; }
@media (max-width: 980px) {
  .craft-body { grid-template-columns: 1fr; }
}
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 72px);
  gap: 6px;
  align-content: start;
  justify-content: start;
  min-height: 0;
  background: #07141e;
  border: 1px solid #1d4e66;
  padding: 8px;
}
.grid[hidden] { display: none !important; }
.item {
  width: 72px;
  height: 72px;
  box-sizing: border-box;
  background: #0c2030;
  border: 1px solid #24586e;
  color: var(--white);
  font-size: 10px;
  padding: 5px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: left;
  overflow: hidden;
  min-width: 0;
  flex: 0 0 auto;
}
.item:hover, .item:focus { border-color: var(--cyan); outline: none; }
.item.empty { opacity: .35; cursor: default; }
.item.dim { opacity: .38; filter: grayscale(.35); }
.item.parked {
  border-color: var(--cyan);
  box-shadow: inset 0 0 0 1px var(--cyan);
}
.item .n {
  color: var(--amber);
  font-size: 8px;
  letter-spacing: .04em;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.item > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.item.wide { grid-column: span 2; width: 150px; }
/* FS-GUI-010 rectangular Gear footprints */
#bag.gear-footprint {
  display: grid;
  grid-template-columns: repeat(10, 72px);
  grid-template-rows: repeat(6, 72px);
  gap: 4px;
  width: max-content;
  max-width: 100%;
  overflow: auto;
}
#bag.gear-footprint .item {
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
}
#bag.gear-footprint .item.footprint {
  z-index: 2;
  box-shadow: 0 0 0 1px rgba(61, 224, 255, 0.25);
}
#bag.gear-footprint .item.footprint.on {
  border-color: var(--cyan);
  box-shadow: 0 0 0 1px var(--cyan), 0 0 12px rgba(61, 224, 255, 0.35);
}
#bag.gear-footprint .item.empty {
  opacity: 0.28;
  z-index: 1;
}
.item .glyph {
  width: 56%;
  height: 40%;
  max-width: 40px;
  max-height: 32px;
  margin: 0 auto;
  background: transparent;
  clip-path: none;
  border: 0;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  overflow: hidden;
}
.item .glyph .ico {
  width: 100%;
  height: 100%;
  display: block;
}
.item.phonon .glyph,
.item.gem .glyph,
.item.jewel .glyph,
.item.art .glyph,
.item.mat .glyph {
  clip-path: none;
  background: transparent;
  border: 0;
  width: 56%;
  height: 40%;
  max-width: 40px;
  max-height: 32px;
}

.panel-kicker {
  margin: 0 0 10px;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.combat-bar {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 10px;
  flex: 0 0 auto;
}
.combat-bar .panel-kicker {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding-top: 8px;
}
.combat-pool {
  flex: 0 0 auto;
  margin: 0;
  padding-top: 8px;
  color: var(--amber);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.combat-pool strong {
  color: var(--cyan);
  font-size: 16px;
  letter-spacing: .04em;
  margin-left: 6px;
}
.credit-chip {
  flex: 0 0 auto;
  margin: 0;
  padding-top: 8px;
  color: var(--amber);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.credit-chip strong {
  color: var(--cyan);
  font-size: 16px;
  letter-spacing: .04em;
  margin-left: 6px;
}
.win-max {
  flex: 0 0 32px;
  align-self: flex-start;
  width: 32px;
  height: 32px;
  min-width: 32px;
  margin-left: auto;
  border: 1px solid #2a6a88;
  background: #102030;
  color: var(--cyan);
  cursor: pointer;
  padding: 0;
  display: grid;
  place-items: center;
  position: relative;
  z-index: 2;
}
.win-max[hidden] { display: none !important; }
.win-max svg {
  width: 14px;
  height: 14px;
  display: block;
}
.win-max:hover,
.win-max:focus {
  border-color: var(--cyan);
  color: var(--cyan);
  background: #102838;
  outline: none;
}
[data-panel="inv"]:not([hidden]),
[data-panel="combat"]:not([hidden]),
[data-panel="tent"]:not([hidden]),
[data-panel="ordn"]:not([hidden]),
[data-panel="chan"]:not([hidden]) {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
[data-panel="inv"] .grid {
  flex: 1 1 auto;
  min-height: 160px;
  overflow: auto;
}
.tree-list { display: flex; flex-direction: column; gap: 6px; }
.class-tabs, .subclass-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 8px;
}
.class-chip {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.class-tabs [data-class], .subclass-tabs button {
  background: #0c1c28;
  color: var(--muted);
  border: 1px solid #2a6280;
  padding: 7px 10px;
  font: inherit;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}
.class-tabs [data-class] {
  width: 100%;
  text-align: left;
  padding: 8px 10px 7px;
}
.class-tabs [data-class] small, .subclass-tabs button small {
  display: block;
  margin-top: 2px;
  font-size: 9px;
  letter-spacing: .06em;
  text-transform: none;
  color: #82a8ba;
}
.class-tabs .head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.class-tabs .lv {
  color: var(--cyan);
  font-size: 14px;
  letter-spacing: .04em;
  font-weight: 700;
}
.class-chip.locked .lv { color: var(--muted); }
.class-tabs .xp {
  display: block;
  height: 3px;
  margin: 6px 0 5px;
  background: #10202c;
  border: 1px solid #1d4e66;
  clear: both;
}
.class-tabs .xp i {
  display: block;
  height: 100%;
  background: var(--amber);
}
.class-tabs .pips {
  display: flex;
  gap: 4px;
}
.class-tabs .pips i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #143044;
  border: 1px solid #2a6280;
}
.class-tabs .pips i.on {
  background: var(--cyan);
  border-color: var(--cyan);
}
.class-tabs [data-class][aria-selected="true"],
.subclass-tabs button[aria-selected="true"] {
  color: var(--cyan);
  border-color: var(--cyan);
  background: rgba(90, 220, 235, .08);
}
.class-chip.active [data-class] {
  box-shadow: inset 3px 0 0 var(--cyan);
}
.class-chip.locked [data-class] {
  opacity: .78;
}
.class-chip.preview [data-class],
.class-chip.preview [data-class][aria-selected="true"] {
  color: var(--amber);
  border-color: var(--amber);
  background: rgba(232, 176, 74, .08);
  opacity: 1;
}
.class-chip .unlock {
  background: #102838;
  color: var(--amber);
  border: 1px solid var(--amber);
  padding: 5px 8px;
  font: inherit;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
}
.class-chip .unlock:hover,
.class-chip .unlock:focus {
  background: #2a2410;
  outline: none;
}
.subclass-tabs button.gated {
  opacity: .4;
  cursor: pointer;
}
.subclass-tabs button.gated[aria-selected="true"] {
  opacity: 1;
}
.tree-preview {
  margin: 0 0 8px;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--amber);
}
.combat-tree,
.skill-tree {
  flex: 1;
  min-height: 0;
  overflow: auto;
  position: relative;
}
.channels-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 4px 2px 16px;
  outline: none;
}
.chan-block {
  margin: 0 0 18px;
}
.chan-block h3 {
  margin: 0 0 8px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyan);
}
.chan-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.chan-row {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  grid-template-rows: auto auto;
  gap: 2px 10px;
  align-items: center;
  border: 1px solid #1e4a62;
  background: #0a1520;
  padding: 8px 10px;
}
.chan-row.core,
.chan-rows.core .chan-row {
  grid-template-columns: 1fr auto;
}
.chan-glyph {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #7fe9ff, #0a7ea8);
  box-shadow: 0 0 8px rgba(0, 200, 255, 0.45);
}
.chan-row[data-channel="thermal"] .chan-glyph { background: radial-gradient(circle at 30% 30%, #ffb070, #c45a12); }
.chan-row[data-channel="cryo"] .chan-glyph { background: radial-gradient(circle at 30% 30%, #b8e7ff, #3a7db8); }
.chan-row[data-channel="arc"] .chan-glyph { background: radial-gradient(circle at 30% 30%, #ffe56a, #c9a010); }
.chan-row[data-channel="toxin"] .chan-glyph { background: radial-gradient(circle at 30% 30%, #9dff7a, #3f8a22); }
.chan-row[data-channel="isotopic"] .chan-glyph { background: radial-gradient(circle at 30% 30%, #d4b0ff, #6a3cb8); }
.chan-row[data-channel="fission"] .chan-glyph { background: radial-gradient(circle at 30% 30%, #ff8f8f, #b82828); }
.chan-row[data-channel="plasma"] .chan-glyph { background: radial-gradient(circle at 30% 30%, #7affd6, #1a8a6a); }
.chan-row[data-channel="void"] .chan-glyph { background: radial-gradient(circle at 30% 30%, #c9c2ff, #4a3a8a); }
.chan-name {
  font-size: 13px;
  color: var(--white);
  letter-spacing: 0.04em;
}
.chan-val {
  font-size: 12px;
  color: var(--cyan);
  font-variant-numeric: tabular-nums;
}
.chan-note {
  grid-column: 2 / -1;
  font-size: 11px;
  color: #7a93a6;
}
.chan-rows.core .chan-note {
  grid-column: 1 / -1;
}

  display: block;
  flex: 1 1 auto;
  min-height: 160px;
  overflow: scroll;
  padding-right: 8px;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: #3a88a8 #10202c;
  cursor: grab;
  user-select: none;
}
.combat-tree-inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 100%;
  transform-origin: 0 0;
}
.combat-tree.is-panning,
.skill-tree.is-panning,
.combat-tree.is-panning .skill,
.skill-tree.is-panning .skill {
  cursor: grabbing;
}
.combat-tree::-webkit-scrollbar,
.skill-tree::-webkit-scrollbar,
.craft-list::-webkit-scrollbar,
.craft-stack-list::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.combat-tree::-webkit-scrollbar-track,
.skill-tree::-webkit-scrollbar-track,
.craft-list::-webkit-scrollbar-track,
.craft-stack-list::-webkit-scrollbar-track {
  background: #10202c;
  border: 1px solid #1d4e66;
}
.combat-tree::-webkit-scrollbar-thumb,
.skill-tree::-webkit-scrollbar-thumb,
.craft-list::-webkit-scrollbar-thumb,
.craft-stack-list::-webkit-scrollbar-thumb {
  background: #2a6a88;
  border: 1px solid #3a88a8;
}
.combat-tree::-webkit-scrollbar-thumb:hover,
.skill-tree::-webkit-scrollbar-thumb:hover,
.craft-list::-webkit-scrollbar-thumb:hover,
.craft-stack-list::-webkit-scrollbar-thumb:hover {
  background: var(--cyan);
}
#win-i[data-panel-max="combat"] [data-panel="combat"]:not([hidden]) {
  position: absolute;
  top: 40px;
  left: 0;
  right: 260px;
  bottom: 0;
  z-index: 8;
  display: flex;
  flex-direction: column;
  background: #05080c;
  padding: 12px 16px 16px;
  min-height: 0;
}
#win-i[data-panel-max="combat"] .right-col {
  position: relative;
  z-index: 9;
  background: #05080c;
}
#win-i[data-panel-max="inv"] [data-panel="inv"]:not([hidden]),
#win-i[data-panel-max="tent"] [data-panel="tent"]:not([hidden]),
#win-i[data-panel-max="ordn"] [data-panel="ordn"]:not([hidden]),
#win-i[data-panel-max="chan"] [data-panel="chan"]:not([hidden]) {
  position: absolute;
  top: 40px;
  left: 250px;
  right: 0;
  bottom: 0;
  z-index: 8;
  display: flex;
  flex-direction: column;
  background: #05080c;
  padding: 12px 16px 16px;
  min-height: 0;
}
#win-i[data-panel-max="inv"] [data-panel="inv"] .grid {
  grid-template-columns: repeat(auto-fill, 72px);
}
@media (max-width: 980px) {
  .craft-body { grid-template-columns: 1fr; }
  #win-i[data-panel-max="inv"] [data-panel="inv"]:not([hidden]),
  #win-i[data-panel-max="tent"] [data-panel="tent"]:not([hidden]),
  #win-i[data-panel-max="ordn"] [data-panel="ordn"]:not([hidden]),
  #win-i[data-panel-max="chan"] [data-panel="chan"]:not([hidden]) {
    left: 0;
  }
  #win-i[data-panel-max="combat"] [data-panel="combat"]:not([hidden]) {
    right: 0;
  }
}
.tree-band h5 {
  margin: 0 0 6px;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cyan);
}
.skill {
  position: relative;
  border: 1px solid #2a6280;
  padding: 10px;
  background: #0c1c28;
  cursor: pointer;
  font-size: 13px;
  color: var(--white);
}
.skill:hover, .skill.on { border-color: var(--cyan); }
.skill.learned { cursor: grab; }
.skill.learned:hover { border-color: var(--amber); }
.skill.cap { border-color: var(--amber); }
.skill-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}
.skill-pts {
  color: var(--cyan);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1;
}
.skill small { display: block; color: var(--muted); font-size: 10px; margin-top: 2px; }
.skill.preview { cursor: default; opacity: .72; }
.skill.preview:hover { border-color: #2a6280; }
.use-xp {
  display: block;
  height: 3px;
  margin: 8px 0 0;
  background: #10202c;
  border: 1px solid #1d4e66;
}
.use-xp i {
  display: block;
  height: 100%;
  background: var(--amber);
}
.skill-use {
  position: absolute;
  right: 8px;
  bottom: 8px;
  background: #102838;
  color: var(--amber);
  border: 1px solid var(--amber);
  padding: 2px 7px;
  font: inherit;
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
}
.skill-use:hover,
.skill-use:focus {
  background: #2a2410;
  outline: none;
}
.skill-equip { right: 62px; color: var(--cyan); border-color: var(--cyan); }

.stats .row {
  display: grid;
  grid-template-columns: 36px 1fr 28px 22px 22px;
  gap: 6px;
  align-items: center;
  margin: 6px 0;
  font-size: 12px;
}
.stats .meter { height: 8px; background: #10202c; }
.stats .meter i { display: block; height: 100%; background: var(--cyan); }
.stats button {
  background: #102838;
  color: var(--amber);
  border: 1px solid var(--amber);
  cursor: pointer;
  font-weight: 700;
  height: 22px;
  padding: 0;
}
.stats button.minus { color: var(--muted); border-color: #2a6a88; }
.stats button:disabled { opacity: .35; cursor: default; }
.level-block { margin-bottom: 10px; }
.level-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  color: var(--cyan);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 11px;
}
.level-row strong { font-size: 22px; letter-spacing: .06em; }
.xp-bar {
  height: 6px;
  background: #10202c;
  margin: 6px 0 10px;
  border: 1px solid #1d4e66;
}
.xp-bar i { display: block; height: 100%; background: var(--amber); }
.unspent { color: var(--amber); font-size: 11px; letter-spacing: .1em; margin: 0 0 8px; text-transform: uppercase; }
.commit {
  width: 100%;
  background: #102838;
  color: var(--cyan);
  border: 1px solid var(--cyan);
  padding: 7px 10px;
  font: inherit;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
}
.commit:disabled { opacity: .35; cursor: default; border-color: #2a6a88; color: var(--muted); }
.commit:not(:disabled):hover { background: #16485e; }

.dock { margin-top: 14px; }
.dock h4 {
  margin: 0 0 6px;
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--muted);
  text-transform: uppercase;
}
.dock table { width: 100%; border-collapse: collapse; font-size: 10px; }
.dock th { color: var(--muted); font-weight: 500; padding: 2px; }
.dock td {
  width: 22%;
  height: 32px;
  border: 1px solid #24586e;
  text-align: center;
  color: var(--cyan);
  cursor: pointer;
}
.dock td.on { background: #123044; }
.dock td.drop { border-color: var(--amber); background: #2a2410; }
.dock td.l-on { box-shadow: inset 0 0 0 1px var(--amber); }

.i-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  border-top: 1px solid #1d4e66;
  padding: 10px 12px;
  flex: 0 0 auto;
}
.i-vitals { display: flex; gap: 16px; flex-wrap: wrap; }
.i-vitals .v { min-width: 140px; }
.i-vitals .v span { font-size: 9px; letter-spacing: .12em; color: var(--muted); text-transform: uppercase; }
.i-vitals .v b { display: block; height: 7px; margin-top: 3px; }
.i-vitals .v.s b { background: var(--shield); width: 100%; }
.i-vitals .v.a b { background: var(--armor); width: 100%; }
.i-vitals .v.h b { background: var(--health); width: 100%; }
.close-i { color: var(--muted); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }

#win-inspect.win-over {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  background: #071018;
}
#win-inspect[hidden] { display: none !important; }

#win-rewrite.win-over {
  position: absolute;
  inset: 0;
  z-index: 11;
  display: flex;
  flex-direction: column;
  background: #071018;
}
#win-rewrite[hidden] { display: none !important; }
.rw-body {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(280px, 1.1fr) minmax(260px, 320px);
  gap: 0;
  flex: 1;
  min-height: 480px;
}
@media (max-width: 980px) {
  .rw-body { grid-template-columns: 1fr; }
}
.rw-slots, .rw-mode, .rw-offer {
  padding: 16px;
  border-right: 1px solid #16364a;
  overflow-y: auto;
}
.rw-offer { border-right: 0; }
.rw-slots h3, .rw-mode h3, .rw-offer h3, .ins-affix h3 {
  margin: 0 0 6px;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cyan);
}
.rw-slots p, .rw-mode p, .rw-offer p, .ins-affix p { color: var(--muted); font-size: 12px; }
.rw-slots h4 {
  margin: 12px 0 6px;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--amber);
}
.rw-slots h4:first-child { margin-top: 0; }
.rw-slot {
  display: block;
  width: 100%;
  margin: 0 0 6px;
  padding: 8px 10px;
  background: #082430;
  color: #d5e6ee;
  border: 1px solid #16364a;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.rw-slot.on { border-color: var(--cyan); color: var(--cyan); }
.rw-slot.empty { color: var(--muted); }
.rw-slot small { display: block; color: var(--muted); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.rw-slot strong { display: block; }
.rw-slot span { display: block; font-size: 11px; color: var(--muted); }
.rw-modes { display: flex; gap: 8px; margin: 0 0 14px; }
.rw-modes button {
  flex: 1;
  background: #082430;
  color: var(--muted);
  border: 1px solid #16364a;
  padding: 8px 10px;
  font: inherit;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
}
.rw-modes button.on { color: var(--cyan); border-color: var(--cyan); }
.rw-modes button:disabled { opacity: .4; cursor: not-allowed; }
.rw-sigils, .rw-groups { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 12px; }
.rw-sigils button, .rw-groups button {
  background: #082430;
  color: #d5e6ee;
  border: 1px solid #16364a;
  padding: 6px 10px;
  font: inherit;
  font-size: 11px;
  letter-spacing: .06em;
  cursor: pointer;
}
.rw-sigils button.on, .rw-groups button.on { color: var(--cyan); border-color: var(--cyan); }
.rw-bias-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  height: 88px;
  margin: 8px 0 10px;
  align-items: end;
}
.rw-bias-col {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
  background: #102838;
  position: relative;
}
.rw-bias-col i {
  display: block;
  width: 100%;
  background: var(--cyan);
  min-height: 4px;
}
.rw-bias-col span, .rw-bias-col small {
  position: absolute;
  left: 0; right: 0;
  text-align: center;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.rw-bias-col span { top: 6px; color: var(--muted); }
.rw-bias-col small { bottom: 6px; color: var(--cyan); }
.rw-mat {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 6px;
  font-size: 12px;
  color: #d5e6ee;
}
.rw-mat.short { color: var(--red); }
.rw-over {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.rw-over button {
  width: 28px;
  height: 28px;
  background: #082430;
  color: var(--cyan);
  border: 1px solid #16364a;
  font: inherit;
  cursor: pointer;
}
.rw-over strong { color: var(--cyan); min-width: 12px; text-align: center; }
.rw-etch {
  width: 100%;
  margin-top: 8px;
  background: #082430;
  color: var(--cyan);
  border: 1px solid var(--cyan);
  padding: 10px 12px;
  font: inherit;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
}
.rw-etch:hover, .rw-etch:focus { background: #0c3040; outline: none; }
.rw-etch:disabled { opacity: .4; cursor: not-allowed; }
.ins-affix {
  margin: 0 0 16px;
  padding: 0 0 14px;
  border-bottom: 1px solid #16364a;
  text-align: left;
}
.ins-affix[hidden],
.rewrite-open[hidden] { display: none !important; }
.ins-affix ul { list-style: none; margin: 0; padding: 0; }
.ins-affix li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 5px;
  font-size: 11px;
  color: #d5e6ee;
}
.ins-affix li span { color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }
.rewrite-open {
  width: 100%;
  margin: 0 0 16px;
  background: #082430;
  color: var(--cyan);
  border: 1px solid var(--cyan);
  padding: 10px 12px;
  font: inherit;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
}

.win-scrim {
  position: absolute;
  inset: 0;
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(5, 8, 12, .78);
  padding: 24px;
}
.win-scrim[hidden] { display: none !important; }
.win-confirm {
  width: min(440px, 100%);
}
.confirm-body {
  padding: 16px 18px 18px;
}
.confirm-body p {
  color: var(--muted);
  font-size: 13px;
  margin: 0 0 10px;
  line-height: 1.45;
}
#mc-order {
  color: var(--cyan);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 12px;
}
.confirm-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}
.confirm-actions #mc-cancel,
.confirm-actions #iv-cancel {
  flex: 1;
  background: #102838;
  color: var(--muted);
  border: 1px solid #2a6a88;
  padding: 7px 10px;
  font: inherit;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
}
.confirm-actions #mc-cancel:hover,
.confirm-actions #mc-cancel:focus,
.confirm-actions #iv-cancel:hover,
.confirm-actions #iv-cancel:focus {
  border-color: var(--cyan);
  color: var(--cyan);
  outline: none;
}
.confirm-actions .commit {
  flex: 1;
  width: auto;
}
.confirm-actions .hold {
  width: auto;
  margin-top: 0;
  flex: 1;
}
.ins-body {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(280px, 1.05fr) minmax(280px, 320px);
  gap: 0;
  flex: 1;
  min-height: 480px;
}
@media (max-width: 980px) {
  .ins-body { grid-template-columns: 1fr; }
}
.ins-chips, .ins-item, .ins-break { padding: 16px; border-right: 1px solid #16364a; overflow-y: auto; }
.ins-break { border-right: 0; }
.ins-chips h3, .ins-break h3 {
  margin: 0 0 6px;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cyan);
}
.ins-chips p, .ins-break p { color: var(--muted); font-size: 12px; }
.chip-inv { margin-top: 8px; }
.chip-inv .grid { min-height: 0; margin-bottom: 4px; }
.chip-inv .item { cursor: grab; }
.chip-inv h4 {
  margin: 12px 0 6px;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--amber);
}
.chip-inv h4:first-child { margin-top: 0; }
.ins-item { text-align: center; }
.ins-item .tier { color: var(--amber); letter-spacing: .16em; text-transform: uppercase; font-size: 11px; margin: 0; }
.ins-item h2 { margin: 4px 0; color: var(--amber); font-size: 22px; letter-spacing: .08em; }
.ins-item .kind { color: var(--muted); text-transform: uppercase; letter-spacing: .12em; font-size: 11px; }
.ins-verb {
  margin: 10px auto 0;
  max-width: 320px;
  text-align: left;
  font-size: 11px;
  letter-spacing: .04em;
}
.ins-verb[hidden] { display: none !important; }
.ins-verb-lane {
  margin: 0;
  padding: 8px 10px;
  border: 1px solid #1e4a62;
  background: rgba(10, 28, 40, .72);
  color: #b7d7e8;
}
.ins-verb-lane .tag {
  color: var(--cyan, #3ec7e8);
  letter-spacing: .14em;
  font-size: 10px;
}
.ins-verb-lane.origin .tag { color: var(--amber, #e8b03e); }
.ins-set {
  margin-top: 6px;
  padding: 6px 10px;
  border: 1px solid #2a3f55;
  color: #9bb4c4;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ins-set.empty { opacity: .55; }
.ins-set .hint {
  margin-left: 0.45rem;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  opacity: 0.75;
  color: var(--ink-dim, #9aa3ad);
}
.ins-set .tag {
  color: #8ad4c0;
  letter-spacing: .14em;
  font-size: 10px;
}
.ins-set-pips {
  display: inline-flex;
  gap: 4px;
  margin-left: auto;
}
.ins-set-pips i {
  display: inline-flex;
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  border: 1px solid #2a4a5e;
  color: #6a8494;
  font-style: normal;
  font-size: 9px;
}
.ins-set-pips i.on {
  border-color: #3ec7e8;
  color: #dff6ff;
  box-shadow: 0 0 6px rgba(62, 199, 232, .35);
}
.weapon {
  width: 48%;
  height: 72px;
  margin: 20px auto;
  display: grid;
  place-items: center;
  background: transparent;
  box-shadow: none;
  clip-path: none;
}
.weapon .ico { width: 100%; height: 100%; }
.sockets { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin: 12px 0; }
.sock {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px dashed #3a88a8;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 10px;
  background: transparent;
  cursor: pointer;
  padding: 0;
}
.sock.filled { border-style: solid; color: var(--cyan); background: #102838; }
.sock.locked {
  border-color: #1d3a4a;
  color: #3a5a6a;
  cursor: default;
  background: #08141c;
}
.ins-bore {
  width: 100%;
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid #16364a;
  text-align: left;
}
.ins-bore[hidden] { display: none !important; }
.ins-bore h3 {
  margin: 0 0 6px;
  color: var(--cyan);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.ins-bore p { margin: 0 0 8px; font-size: 12px; color: #d5e6ee; }
.ins-bore small { color: var(--muted); }
.ins-bore-go {
  width: 100%;
  background: #082430;
  color: var(--cyan);
  border: 1px solid var(--cyan);
  padding: 10px 12px;
  font: inherit;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
}
.ins-bore-go:hover,
.ins-bore-go:focus {
  background: #0c3040;
  outline: none;
}
.ins-bore-go:disabled {
  opacity: 0.4;
  cursor: default;
}
.chip-tabs { display: flex; flex-wrap: wrap; gap: 0; margin: 8px 0; }
.chip-tabs button {
  background: #0c1c28;
  color: var(--muted);
  border: 1px solid #1d4e66;
  padding: 7px 10px;
  font: inherit;
  font-size: 10px;
  letter-spacing: .1em;
  cursor: pointer;
  text-transform: uppercase;
}
.chip-tabs button[aria-selected="true"] { color: var(--cyan); background: #102838; border-color: var(--cyan); }
.chip-tabs button[hidden] { display: none !important; }
.sock-label {
  margin: 10px 0 6px;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.art-sock {
  width: 100%;
  min-height: 56px;
  border: 1px dashed #7a6ab0;
  display: grid;
  place-items: center;
  gap: 2px;
  color: #af82eb;
  font: inherit;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-top: 10px;
  background: #120818;
  cursor: pointer;
  padding: 8px;
}
.art-sock.filled { border-style: solid; }
.art-sock small { display: block; color: var(--muted); font-size: 10px; }
.art-sock strong { color: var(--amber); }
.art-sock[hidden] { display: none !important; }
.ins-parts {
  margin-top: 14px;
  text-align: left;
  border: 1px solid #1d4e66;
  background: #07141e;
  padding: 10px;
}
.ins-parts[hidden] { display: none !important; }
.ins-parts h3 {
  margin: 0 0 6px;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cyan);
}
.ins-parts > p { color: var(--muted); font-size: 11px; margin: 0 0 8px; }
.ins-part {
  display: block;
  border: 1px solid #1d4e66;
  background: #0c2030;
  margin-bottom: 4px;
}
.ins-part.open { border-color: var(--cyan); }
.ins-part-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  padding: 6px 8px;
  cursor: pointer;
}
.ins-part-h strong { display: block; font-size: 12px; color: var(--cyan); }
.ins-part-h small { display: block; color: var(--muted); font-size: 11px; }
.ins-vars {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0 8px 8px;
}
.ins-var {
  background: #07141e;
  color: var(--muted);
  border: 1px solid #1d4e66;
  font: inherit;
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 7px;
  cursor: pointer;
}
.ins-var.on { color: var(--cyan); border-color: var(--cyan); }
.ins-var.installed { color: #d5e6ee; }
.ins-stats {
  margin: 0 0 16px;
  padding: 0 0 14px;
  border-bottom: 1px solid #16364a;
  text-align: left;
}
.ins-stats[hidden],
.ins-install[hidden] { display: none !important; }
.ins-cadence {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  color: var(--cyan);
  font-size: 12px;
  letter-spacing: .05em;
  margin: 0 0 10px;
}
.ins-cadence small {
  color: var(--muted);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 10px;
}
.ins-stat {
  display: grid;
  grid-template-columns: 72px 1fr 28px 28px;
  gap: 6px;
  align-items: center;
  margin-bottom: 5px;
  font-size: 11px;
  color: #d5e6ee;
}
.ins-stat.frame { color: var(--muted); }
.ins-stat b { font-weight: 600; letter-spacing: .03em; }
.ins-stat .n { text-align: right; }
.ins-bar {
  position: relative;
  height: 6px;
  background: #102838;
  display: block;
  overflow: hidden;
}
.ins-bar i {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  display: block;
}
.ins-bar i.now { background: var(--cyan); }
.ins-bar i.ghost.up { background: #50d296; }
.ins-bar i.ghost.down { background: #eb5f69; }
.ins-stat em {
  font-style: normal;
  font-size: 10px;
  letter-spacing: .04em;
  text-align: right;
}
.ins-stat em.up { color: #50d296; }
.ins-stat em.down { color: #eb5f69; }
.ins-install {
  margin: 0 0 16px;
  padding: 0 0 14px;
  border-bottom: 1px solid #16364a;
  text-align: left;
}
.ins-install p { margin: 0 0 8px; }
.ins-install-go {
  width: 100%;
  background: #082430;
  color: var(--cyan);
  border: 1px solid var(--cyan);
  padding: 10px 12px;
  font: inherit;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
}
.ins-install-go:hover,
.ins-install-go:focus {
  background: #0c3040;
  outline: none;
}
.ins-break .warn { color: var(--red); text-transform: uppercase; letter-spacing: .1em; font-size: 11px; }
.ins-break .invoke-warn { color: #f0b446; }
.ins-break ul { color: #d5e6ee; font-size: 13px; padding-left: 1.1em; }
#ins-invoke {
  margin: 0 0 16px;
  padding: 0 0 14px;
  border-bottom: 1px solid #3a2a10;
}
#ins-invoke[hidden] { display: none !important; }
#ins-invoke h3 { color: #f0b446; }
.invoke-open {
  width: 100%;
  margin-top: 10px;
  background: #201808;
  color: #f0b446;
  border: 1px solid #f0b446;
  padding: 10px 12px;
  font: inherit;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}
.hold.invoke {
  background: #201808;
  color: #f0b446;
  border-color: #f0b446;
  flex: 1;
}
.hold.invoke .fill { background: rgba(240, 180, 70, .35); }
.hold {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin-top: 12px;
  background: #201018;
  color: var(--red);
  border: 1px solid var(--red);
  padding: 10px 12px;
  font: inherit;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}
.hold .fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  background: rgba(235, 95, 105, .35);
}
.chips-back { color: var(--green); font-size: 12px; }
.chips-back[hidden], #chips-lock[hidden] { display: none !important; }

.coach { font-size: 13px; color: var(--muted); margin: 0 0 12px; max-width: 80ch; }
.ux-note { border-left: 3px solid var(--amber); padding: 8px 12px; color: #d5e6ee; font-size: 13px; margin: 12px 0; }

.ins-fam { margin-top: 8px; font-size: 12px; color: #8fd; letter-spacing: 0.04em; }
.ins-fam .tag { color: #3de0ff; margin-right: 6px; }
.ins-fam .mw { color: #f6c; font-weight: 600; }
.ins-fam .bar { display: inline-block; width: 120px; height: 6px; background: #123; margin: 0 8px; vertical-align: middle; }
.ins-fam .bar > i { display: block; height: 100%; background: #3de0ff; }

/* Secure Locker lab (FS-GUI-009) */
.sl-desk { margin-top: 12px; }
.sl-win {
  border: 1px solid #2a6a88;
  background: #0a0e14;
  max-width: 1180px;
}
.sl-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 14px; border-bottom: 1px solid #2a6a88;
  background: #0e141c;
}
.sl-title { font-size: 15px; letter-spacing: .14em; color: #3de0ff; font-weight: 600; }
.sl-sub { font-size: 12px; color: #8a9aa8; letter-spacing: .08em; }
.sl-wallet {
  margin-left: auto; display: flex; gap: 10px; align-items: center;
  font-size: 12px; color: #b8a0ff;
}
.sl-wallet strong { color: #d8ccff; }
.sl-buy {
  font: inherit; font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  padding: 6px 10px; cursor: pointer;
  background: #201810; color: #e85a1a; border: 1px solid #e85a1a;
}
.sl-buy:hover { background: #2a2010; }
.sl-panes {
  display: grid; grid-template-columns: 1fr auto 1.35fr; gap: 0; min-height: 420px;
}
.sl-pane { padding: 12px 14px; border-right: 1px solid #1e303c; }
.sl-pane:last-child { border-right: none; border-left: 1px solid #3a2a66; }
.sl-transfer {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 14px; padding: 16px 10px; min-width: 118px;
  background: #0a1016; border-left: 1px solid #1e303c; border-right: 1px solid #3a2a66;
}
.sl-xfer {
  font: inherit; font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  padding: 10px 12px; cursor: pointer; width: 100%;
  background: #102028; color: #3de0ff; border: 1px solid #3de0ff;
}
.sl-xfer:hover { background: #163040; }
.sl-xfer:disabled { opacity: .35; cursor: not-allowed; }
.sl-xfer-hint {
  margin: 0; text-align: center; font-size: 10px; line-height: 1.4;
  color: #8a9aa8; letter-spacing: .06em;
}
.sl-pane h3 {
  margin: 0 0 8px; font-size: 12px; letter-spacing: .12em; color: #8a9aa8; font-weight: 600;
}
.sl-bag-inner, .sl-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.sl-bag-inner button, .sl-tab {
  font: inherit; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 10px; cursor: pointer;
  background: #141a22; color: #8a9aa8; border: 1px solid #2a4050;
}
.sl-bag-inner button[aria-selected="true"], .sl-tab.on {
  color: #3de0ff; border-color: #3de0ff; background: #102028;
}
.sl-tab.locked { color: #8b6cff; border-color: #5a4a88; border-style: dashed; }
.sl-filters {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px;
  font-size: 12px; color: #8a9aa8;
}
.sl-filters input, .sl-filters select {
  font: inherit; font-size: 12px; background: #0a1016; color: #d5e6ee;
  border: 1px solid #2a4050; padding: 5px 8px;
}
.sl-filters input { min-width: 160px; }
.sl-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px; min-height: 200px; align-content: start;
}
.sl-grid.sl-footprint {
  gap: 2px; background: #0a1016; border: 1px solid #1e303c; padding: 4px;
  min-height: 240px; overflow: auto;
}
.sl-cell.empty {
  background: #0e141c; border: 1px solid #1a2830; min-height: 0;
}
.sl-tile {
  text-align: left; font: inherit; cursor: grab;
  background: #121820; border: 1px solid #2a6a88; color: #d5e6ee;
  padding: 8px; min-height: 64px;
}
.sl-footprint .sl-tile {
  min-height: 0; padding: 4px 6px; overflow: hidden; z-index: 1;
}
.sl-footprint .sl-tile-name { font-size: 10px; line-height: 1.2; }
.sl-footprint .sl-tile-meta { font-size: 9px; }
.craft-parts-strip { margin-top: 12px; border-top: 1px solid #1e303c; padding-top: 10px; }
.craft-parts-list { display: flex; flex-direction: column; gap: 6px; }
.ins-var.bag-mod { border-color: #8b6cff; }
.sl-tile.on { outline: 1px solid #3de0ff; }
.sl-tile.q-legendary, .sl-tile.q-unique, .sl-tile.q-apex { border-color: #e85a1a; }
.sl-tile.q-unique, .sl-tile.q-apex { border-color: #8b6cff; }
.sl-tile-name { display: block; font-size: 12px; color: #e8f4fa; }
.sl-tile-meta { display: block; font-size: 10px; color: #8a9aa8; margin-top: 4px; letter-spacing: .04em; }
.sl-occ { font-size: 11px; color: #8a9aa8; margin-top: 10px; letter-spacing: .06em; }
.sl-empty { color: #8a9aa8; font-size: 13px; margin: 24px 0; }
.sl-foot {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: 8px 14px; border-top: 1px solid #1e303c; font-size: 11px; color: #8a9aa8; letter-spacing: .08em;
}
.sl-toast {
  margin: 10px 0 0; padding: 8px 12px; font-size: 12px;
  border-left: 3px solid #3de0ff; background: #0e141c; color: #d5e6ee;
}
.sl-toast[hidden] { display: none !important; }
.sl-clear {
  font: inherit; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 10px; cursor: pointer; background: transparent; color: #8a9aa8; border: 1px solid #2a4050;
}
@media (max-width: 900px) {
  .sl-panes { grid-template-columns: 1fr; }
  .sl-transfer { flex-direction: row; flex-wrap: wrap; min-width: 0; border: none; border-top: 1px solid #1e303c; border-bottom: 1px solid #3a2a66; }
  .sl-xfer { width: auto; }
  .sl-pane:last-child { border-left: none; border-top: 1px solid #3a2a66; }
}