/* Redesign (Turn 3+) components. Loaded last; every color reads a token from themes.css.
 * Selectors are scoped under .hud-shell so they win over the legacy rules in style.css. */

:root {
  /* Fixed cover-attribute tag colors (same in every palette, like rarity). */
  --tag-foil: linear-gradient(90deg, oklch(0.62 0.19 20), oklch(0.62 0.17 300), oklch(0.62 0.13 220));
  --tag-virgin-bg: oklch(0.95 0 0);
  --tag-virgin-tx: oklch(0.2 0 0);
  --tag-homage: oklch(0.48 0.2 275);
  --tag-bw-bg: oklch(0.3 0 0);
  --tag-bw-tx: oklch(0.95 0 0);
  --tag-blank-bg: oklch(0.9 0.01 80);
  --tag-blank-tx: oklch(0.25 0.01 80);
  --tag-grail: linear-gradient(90deg, oklch(0.78 0.15 80), oklch(0.68 0.17 50));
  --tag-grail-tx: oklch(0.18 0.03 60);
  --tag-on-dark: oklch(0.99 0 0);
}

/* ---------- Shared controls ---------- */
.hud-shell :is(input[type="text"], input[type="search"], input[type="email"], input[type="password"], input[type="number"], input[type="url"], input[type="date"], select, textarea):not([type="checkbox"]) {
  min-height: 38px;
}

.hud-shell :is(.lc-btn, .lc-cover-btn, .rail-chip, .rail-rarity, .own-seg-btn, .rail-run, .rail-switch, .filter-chip, .density-btn, .sort-select):hover {
  border-color: var(--ac);
  background: color-mix(in oklab, var(--ac) 12%, var(--hov));
}

/* ---------- Catalog grid ---------- */
.hud-shell .gallery-grid.density-standard,
.hud-shell .gallery-grid.density-compact {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: var(--gp);
}

html[data-density="compact"] .hud-shell .gallery-grid.density-standard {
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
}

/* Covers view: art-first tiles. Ignores density. */
.hud-shell .gallery-grid.density-compact {
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 16px;
}

/* ---------- Loot card (3a) ---------- */
.hud-shell .variant-card.lc {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--ln);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: none;
  transform: none;
  color: var(--tx);
  font-family: var(--bf);
  padding: 0;
  min-width: 0;
  cursor: pointer;
}

.hud-shell .variant-card.lc:hover,
.hud-shell .variant-card.lc:focus-visible {
  border-color: var(--ac);
  box-shadow: var(--gl);
  transform: none;
}

.hud-shell .variant-card.lc::before,
.hud-shell .variant-card.lc::after {
  display: none;
}

.hud-shell .lc-cover {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--bg);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
}

/* !important: legacy .card-media rules force 2:3 on game and merch cards. */
.hud-shell .lc .lc-cover { aspect-ratio: 3 / 4 !important; height: auto !important; }
.hud-shell .lc .lc-cover-book { aspect-ratio: 2 / 3 !important; }
.hud-shell .lc .lc-cover-game { aspect-ratio: 3 / 4 !important; }
.hud-shell .lc .lc-cover-card { aspect-ratio: 5 / 7 !important; }
.hud-shell .lc .lc-cover-merch { aspect-ratio: 3 / 4 !important; }

/* Item art is always full color. */
.hud-shell .lc-cover .card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  filter: none !important;
  opacity: 1 !important;
  border-radius: 0;
}

.hud-shell .lc-rarity {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 3px 8px;
  border-radius: var(--r2);
  /* Solid dark plate on every theme so the light tier colors read over any cover art. */
  background: color-mix(in oklab, var(--dk) 10%, #05070b);
  border: 1px solid currentColor;
  box-shadow: 0 1px 4px color-mix(in oklab, #000 45%, transparent);
  font: 700 10px var(--mf);
  letter-spacing: 0.08em;
  line-height: 1.3;
}

.lc-rarity.is-bronze, .rail-rarity.is-bronze { color: var(--rar-bronze); }
.lc-rarity.is-silver, .rail-rarity.is-silver { color: var(--rar-silver); }
.lc-rarity.is-gold, .rail-rarity.is-gold { color: var(--rar-gold); }
.lc-rarity.is-platinum, .rail-rarity.is-platinum { color: var(--rar-platinum); }
.lc-rarity.is-legendary, .rail-rarity.is-legendary { color: var(--rar-legendary); }
.lc-rarity.is-celestial, .rail-rarity.is-celestial { color: var(--rar-celestial); }

.hud-shell .lc-cover-btns {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  gap: 4px;
}

.hud-shell .lc-cover-btn {
  width: 26px;
  height: 26px;
  min-height: 0;
  padding: 0;
  border-radius: var(--r2);
  background: var(--dk);
  border: 1px solid var(--ln);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ac);
  font: 700 8px var(--mf);
  text-decoration: none;
  box-shadow: none;
}

.hud-shell .lc-cover-btn .card-quick-icon { width: 13px; height: 13px; }

.hud-shell .lc-body {
  flex: 1 1 0%;
  padding: 12px 14px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  background: transparent;
  border: 0;
}

.hud-shell .lc-kicker {
  font: 500 10px var(--mf);
  letter-spacing: 0.06em;
  color: var(--di);
  text-transform: uppercase;
}

.hud-shell .lc .lc-title {
  font: 600 14px/1.3 var(--bf);
  margin: 3px 0 0;
  color: var(--tx);
  letter-spacing: 0;
  text-transform: none;
  white-space: normal;
  overflow: visible;
  display: block;
  -webkit-line-clamp: unset;
  text-shadow: none;
}

.hud-shell .lc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
  padding: 0;
  border: 0;
}

.lc-tag {
  padding: 2px 6px;
  border-radius: 4px;
  font: 700 9.5px var(--mf);
  letter-spacing: 0.04em;
  line-height: 1.4;
  color: var(--tag-on-dark);
}

.lc-tag-foil { background: var(--tag-foil); }
.lc-tag-virgin { background: var(--tag-virgin-bg); color: var(--tag-virgin-tx); }
.lc-tag-homage { background: var(--tag-homage); }
.lc-tag-bw { background: var(--tag-bw-bg); color: var(--tag-bw-tx); }
.lc-tag-blank { background: var(--tag-blank-bg); color: var(--tag-blank-tx); }
.lc-tag-grail { background: var(--tag-grail); color: var(--tag-grail-tx); }
.lc-tag-plain { background: var(--hov); color: var(--tx); border: 1px solid var(--ln); }
.lc-tag-hc { background: oklch(0.42 0.06 55); }
.lc-tag-pb { background: oklch(0.42 0.01 250); }
.lc-tag-signed { background: oklch(0.5 0.13 150); }
.lc-tag-deluxe { background: oklch(0.48 0.15 300); }
.lc-tag-ks { background: oklch(0.52 0.15 150); }
.lc-tag-official { background: oklch(0.5 0.1 230); }
.lc-tag-blind { background: oklch(0.5 0.13 160); }
.lc-tag-con { background: oklch(0.55 0.14 50); }
.lc-tag-promo { background: oklch(0.48 0.2 275); }

/* 4c–4f tailored covers: volume badge, product type, card number, blind-box strip. */
.hud-shell .lc-vol {
  position: absolute;
  top: 10px;
  left: 10px;
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r2);
  background: var(--ac);
  color: var(--ink);
  font: 700 15px var(--hf);
  box-shadow: var(--gl);
}

.hud-shell .lc-type {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 3px 9px;
  border-radius: 12px;
  border: 1px solid var(--ac);
  background: color-mix(in oklab, var(--sh) 70%, transparent);
  color: var(--ac);
  font: 700 9.5px var(--mf);
  letter-spacing: 0.08em;
}

.hud-shell .lc-num {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 3px 7px;
  border-radius: var(--r2);
  background: color-mix(in oklab, var(--sh) 78%, transparent);
  color: var(--tx);
  font: 700 10.5px var(--mf);
}

.hud-shell .lc-card .lc-cover-btns { top: auto; bottom: 10px; }

.hud-shell .lc-blind {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  border-radius: var(--r2);
  border: 1px solid var(--ln);
  background: color-mix(in oklab, var(--sh) 72%, transparent);
  color: var(--tx);
  font: 700 9.5px var(--mf);
  letter-spacing: 0.08em;
}

.hud-shell .lc-blind span { margin-right: auto; }
.hud-shell .lc-blind i { width: 14px; height: 14px; border-radius: 3px; background: color-mix(in oklab, var(--ac) 30%, var(--hov)); }
.hud-shell .lc-merch .lc-cover-btns { top: 10px; }
.hud-shell .gallery-grid.density-standard:has(> .lc-game) { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

.hud-shell .lc-details {
  font-size: 12px;
  line-height: 1.45;
  color: var(--mu);
  overflow-wrap: anywhere;
}

.hud-shell .lc-meta {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

.hud-shell .lc-facts {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, auto);
  gap: 1px;
  background: var(--ln);
  border: 1px solid var(--ln);
  border-radius: var(--r2);
  overflow: hidden;
  font: 500 11.5px/1.3 var(--mf);
  color: var(--tx);
}

.hud-shell .lc-fact {
  padding: 6px 7px;
  background: var(--bg);
  min-width: 0;
  overflow-wrap: break-word;
}

.hud-shell .lc-fact-k {
  font-size: 9px;
  color: var(--di);
  letter-spacing: 0.06em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hud-shell .lc-actions {
  margin-top: auto;
  padding: 10px 14px 14px;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 8px;
  border: 0;
  background: transparent;
}

.hud-shell .lc-actions > * { flex: 0 0 auto; min-height: 0; height: auto; }

.hud-shell .lc-actions > .card-rating-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 48px;
  align-items: center;
  gap: 0 6px;
  margin: 0;
  font: 600 9px/1.25 var(--mf);
  letter-spacing: 0.08em;
  color: var(--di);
  width: 100%;
}

.hud-shell .lc-actions > .card-rating-row + .card-rating-row { margin-top: -3px; }
.hud-shell .lc-actions .card-rating-label { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: auto; }
.hud-shell .lc-actions .card-rating-val { font: 500 10.5px var(--mf); letter-spacing: 0; color: var(--mu); white-space: nowrap; }
.hud-shell .lc-actions .rating-avg-count { display: none; }
.hud-shell .lc-actions :is(.rating-star, .rating-glyph) { font-size: 12.5px; width: auto; min-width: 0; padding: 0 0.5px; line-height: 1; }
.hud-shell .lc-actions .rating-stars,
.hud-shell .lc-actions .rating-avg { gap: 0; }

.hud-shell .lc-btns {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 5px;
}

.hud-shell .lc .lc-btn {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 5px 9px;
  border-radius: var(--r2);
  background: var(--hov);
  border: 1px solid var(--ln);
  color: var(--tx);
  font: 500 11px/1.25 var(--bf);
  letter-spacing: 0;
  text-transform: none;
  text-align: center;
  text-wrap: balance;
  box-shadow: none;
}

.hud-shell .lc .lc-btn-ic { color: var(--ac); font-weight: 700; flex: 0 0 auto; }

/* Compact density: details on one line, buttons stack. */
html[data-density="compact"] .hud-shell .density-standard .lc-details {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html[data-density="compact"] .hud-shell .density-standard .lc-details br { display: none; }
html[data-density="compact"] .hud-shell .density-standard .lc-btns { flex-direction: column; }

/* Covers view: cover plus title only. */
.hud-shell .gallery-grid.density-compact .lc-body { padding: 10px 12px 12px; gap: 4px; }
.hud-shell .gallery-grid.density-compact :is(.lc-tags, .lc-details, .lc-meta, .lc-actions) { display: none; }
.hud-shell .gallery-grid.density-compact .lc .lc-title { font-size: 13px; }

/* ---------- Theme studio (3c): right-hand drawer, catalog reflows beside it ---------- */
.hud-shell .theme-menu.ts {
  position: fixed;
  top: var(--topbar-h, 59px);
  right: 0;
  bottom: 0;
  left: auto;
  width: 384px;
  max-width: 100vw;
  max-height: none;
  z-index: 900;
  display: flex;
  flex-direction: column;
  padding: 0;
  gap: 0;
  border: 0;
  border-left: 1px solid var(--ln);
  border-radius: 0;
  background: var(--bg);
  box-shadow: none;
  color: var(--tx);
  font: 400 13px var(--bf);
  overflow: hidden;
}

.hud-shell .theme-menu.ts[hidden] { display: none; }
html.studio-open .hud-shell .app-frame { padding-right: 384px; }

.hud-shell .ts-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--ln);
}

.hud-shell .ts-title { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hud-shell .ts-kicker { font: 600 10px var(--mf); letter-spacing: 0.14em; color: var(--ac); }
.hud-shell .ts-name { font: 600 19px var(--hf); color: var(--tx); text-shadow: none; }
.hud-shell .ts-step { display: flex; gap: 6px; flex: 0 0 auto; }

.hud-shell .ts-btn {
  min-width: 30px;
  height: 30px;
  min-height: 0;
  padding: 0 9px;
  border: 1px solid var(--ln);
  border-radius: var(--r2);
  background: var(--dk);
  color: var(--tx);
  font: 600 12px var(--bf);
  cursor: pointer;
}

.hud-shell .ts-filter { display: flex; flex-direction: column; gap: 10px; padding: 14px 20px; border-bottom: 1px solid var(--ln); }

.hud-shell .ts-search {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--ln);
  border-radius: var(--r2);
  background: var(--card);
  color: var(--tx);
  font: 400 12.5px var(--bf);
}

.hud-shell .ts-groups { display: flex; flex-wrap: wrap; gap: 6px; }

.hud-shell .ts-chip {
  padding: 4px 9px;
  border: 1px solid var(--ln);
  border-radius: var(--r2);
  background: transparent;
  color: var(--tx);
  font: 400 11.5px var(--bf);
  cursor: pointer;
}

.hud-shell .ts-chip .ts-chip-n { color: var(--mu); }
.hud-shell .ts-chip.is-on { background: var(--ac); border-color: var(--ac); color: var(--ink); font-weight: 600; }
.hud-shell .ts-chip.is-on .ts-chip-n { color: var(--ink); }

.hud-shell .ts-body {
  flex: 1 1 0%;
  min-height: 160px;
  overflow: auto;
  padding: 12px 20px;
  display: block;
  max-height: none;
}

.hud-shell .ts-body .theme-group-label {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin: 6px 0 8px;
  padding: 0;
  border: 0;
  background: none;
  font: 600 10px var(--mf);
  letter-spacing: 0.14em;
  color: var(--di);
  text-transform: uppercase;
  cursor: default;
}

.hud-shell .ts-body .theme-group-label::before,
.hud-shell .ts-body .theme-group-label::after { display: none; }
.hud-shell .ts-body .theme-group-label[hidden],
.hud-shell .ts-body .theme-group-grid[hidden],
.hud-shell .ts-body .theme-choice[hidden] { display: none; }

.hud-shell .ts-body .theme-group-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 10px; margin-bottom: 10px; }

.hud-shell .ts-body .theme-choice {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--tx);
  font: 400 11.5px var(--bf);
  text-align: left;
  cursor: pointer;
  box-shadow: none;
}

.hud-shell .ts-body .theme-swatch {
  display: block;
  width: 100%;
  height: 46px;
  border-radius: var(--r2);
  border: 1px solid color-mix(in oklab, var(--tx) 18%, transparent);
  background:
    linear-gradient(var(--tx), var(--tx)) 10px 12px / 46% 3px no-repeat,
    linear-gradient(var(--mu), var(--mu)) 10px 20px / 30% 3px no-repeat,
    linear-gradient(var(--ac), var(--ac)) calc(100% - 8px) 50% / 10px 64% no-repeat,
    var(--card);
}

.hud-shell .ts-body .theme-choice:hover .theme-swatch { outline: 1px solid var(--ac); }
.hud-shell .ts-body .theme-choice[aria-checked="true"] .theme-swatch { outline: 2px solid var(--ac); outline-offset: 1px; }
.hud-shell .ts-body .theme-choice[aria-checked="true"] .theme-choice-label { color: var(--ac); font-weight: 600; }

.hud-shell .ts-display { padding: 14px 20px; border-top: 1px solid var(--ln); }
.hud-shell .ts-display .ts-section { margin: 0 0 10px; }
.hud-shell .ts .theme-menu-options { display: flex; flex-direction: column; gap: 10px; padding: 0; border: 0; background: none; }
.hud-shell .ts .theme-option { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.hud-shell .ts .theme-option-label { font: 400 13px var(--bf); color: var(--tx); text-transform: none; letter-spacing: 0; }

.hud-shell .ts .theme-seg {
  display: flex;
  padding: 2px;
  border: 1px solid var(--ln);
  border-radius: var(--r2);
  background: var(--card);
  gap: 0;
}

.hud-shell .ts .theme-seg-btn {
  padding: 4px 10px;
  min-height: 0;
  border: 0;
  border-radius: var(--r2);
  background: transparent;
  color: var(--mu);
  font: 400 12px var(--bf);
  box-shadow: none;
}

.hud-shell .ts .theme-seg-btn[aria-pressed="true"] { background: var(--ac); color: var(--ink); font-weight: 600; }

.hud-shell .ts-foot { display: flex; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--ln); }

.hud-shell .ts-reset,
.hud-shell .ts-done {
  flex: 1 1 0%;
  min-height: 38px;
  border-radius: var(--r2);
  font: 600 13px var(--bf);
  cursor: pointer;
}

.hud-shell .ts-reset { border: 1px solid var(--ln); background: var(--dk); color: var(--tx); }
.hud-shell .ts-done { border: 1px solid var(--ac); background: var(--ac); color: var(--ink); }

@media (max-width: 860px) {
  html.studio-open .hud-shell .app-frame { padding-right: 0; }
  .hud-shell .theme-menu.ts { width: 100vw; top: 0; z-index: 3000; }
}

/* ---------- Item page (3d) ---------- */
#variant-modal-backdrop.ip {
  position: fixed;
  inset: var(--topbar-h, 56px) 0 0 0;
  z-index: 800;
  display: none;
  padding: 0;
  background: var(--bg);
  backdrop-filter: none;
  align-items: stretch;
  justify-content: stretch;
}

#variant-modal-backdrop.ip.open { display: block; }
html.studio-open #variant-modal-backdrop.ip { right: 384px; }

#variant-modal-backdrop .ip-window {
  position: relative;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--tx);
  font: 400 13px var(--bf);
  animation: none;
}

#variant-modal-backdrop .ip-backdrop { position: absolute; inset: 0 0 auto 0; height: 760px; overflow: hidden; pointer-events: none; }
#variant-modal-backdrop .ip-backdrop::after { content: ""; position: absolute; inset: 0; background: linear-gradient(color-mix(in oklab, var(--bg) 72%, transparent), var(--bg)); }
#variant-modal-backdrop .ip-backdrop-img { position: absolute; inset: -60px; width: calc(100% + 120px); height: calc(100% + 120px); object-fit: cover; filter: blur(48px) saturate(1.3); opacity: 0.32; }

#variant-modal-backdrop .ip-crumbs {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 36px;
  border: 0;
  background: none;
  font: 500 11px var(--mf);
  letter-spacing: 0.1em;
  color: var(--mu);
}

#variant-modal-backdrop .ip-crumb-id { color: var(--tx); font: inherit; letter-spacing: inherit; background: none; border: 0; padding: 0; }
#variant-modal-backdrop .ip-spacer { flex: 1 1 0%; }
#variant-modal-backdrop .ip-nav { display: flex; align-items: center; gap: 6px; }
#variant-modal-backdrop .ip-nav-count { font: 500 11px var(--mf); color: var(--mu); }

#variant-modal-backdrop .ip-icon-btn {
  min-width: 28px;
  height: 28px;
  min-height: 0;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: var(--r2);
  background: var(--dk);
  border: 1px solid var(--ln);
  color: var(--tx);
  font: 600 12px var(--bf);
  box-shadow: none;
}

#variant-modal-backdrop .ip-grid {
  position: relative;
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 40px;
  padding: 8px 36px 32px;
  background: none;
  border: 0;
}

#variant-modal-backdrop .ip-left { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

#variant-modal-backdrop .ip-cover {
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--ac) 40%, transparent), var(--gl), 0 20px 40px color-mix(in oklab, var(--sh) 45%, transparent);
  background: var(--card);
  border: 0;
  padding: 0;
  aspect-ratio: auto;
  min-height: 0;
}

#variant-modal-backdrop .ip-cover .modal-cover-img { width: 100%; height: auto; max-height: none; display: block; object-fit: cover; filter: none; opacity: 1; border-radius: 0; }
#variant-modal-backdrop .ip-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; padding: 0; border: 0; background: none; }

#variant-modal-backdrop .ip-actions .modal-action-btn,
#variant-modal-backdrop .ip-actions .modal-locg-btn {
  min-height: 38px;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: var(--r2);
  font: 600 13px var(--bf);
  text-transform: none;
  letter-spacing: 0;
  text-decoration: none;
  box-shadow: none;
  width: auto;
}

#variant-modal-backdrop .ip-primary { background: var(--ac); color: var(--ink); border: 1px solid var(--ac); box-shadow: var(--gl); }
#variant-modal-backdrop .ip-outline { background: transparent; color: var(--ac); border: 1px solid color-mix(in oklab, var(--ac) 60%, transparent); }
#variant-modal-backdrop .ip-outline.active { background: color-mix(in oklab, var(--ac) 14%, transparent); }
#variant-modal-backdrop .ip-actions-dark .ip-dark { font-size: 12px; padding: 8px; min-height: 38px; }

#variant-modal-backdrop .ip-dark {
  background: var(--dk);
  border: 1px solid var(--ln);
  color: var(--tx);
}

#variant-modal-backdrop .ip-ic { color: var(--ac); }
#variant-modal-backdrop .ip-ic-locg { font: 700 9px var(--mf); }

#variant-modal-backdrop .ip-right { display: flex; flex-direction: column; gap: 18px; min-width: 0; padding: 0; border: 0; background: none; }
#variant-modal-backdrop .ip-titlebar { display: flex; align-items: flex-start; gap: 16px; }
#variant-modal-backdrop .ip-titles { flex: 1 1 0%; min-width: 0; }
#variant-modal-backdrop .ip-kicker { font: 500 11px var(--mf); letter-spacing: 0.1em; color: var(--mu); }
#variant-modal-backdrop .ip-title { font: 600 34px/1.12 var(--hf); margin: 6px 0 4px; color: var(--tx); text-wrap: pretty; text-shadow: none; letter-spacing: 0; text-transform: none; }
#variant-modal-backdrop .ip-subline { font-size: 15px; color: var(--mu); }
#variant-modal-backdrop .ip-subline:empty { display: none; }

#variant-modal-backdrop .ip-editor {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 5px 5px 10px;
  border-radius: var(--r2);
  border: 1px dashed color-mix(in oklab, var(--ac) 45%, transparent);
  font: 600 9.5px var(--mf);
  letter-spacing: 0.12em;
  color: var(--mu);
}

#variant-modal-backdrop .ip-editor[hidden] { display: none; }
#variant-modal-backdrop .ip-editor .ip-dark { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; min-height: 0; border-radius: var(--r2); font: 600 12px var(--bf); letter-spacing: 0; }

#variant-modal-backdrop .ip-tags { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 0; }
#variant-modal-backdrop .ip-tag { padding: 4px 9px; border-radius: var(--r2); font-size: 10.5px; letter-spacing: 0; }

#variant-modal-backdrop .ip-rarity {
  padding: 4px 10px;
  border-radius: var(--r2);
  border: 1px solid currentColor;
  background: color-mix(in oklab, var(--sh) 35%, transparent);
  font: 700 11px var(--mf);
  letter-spacing: 0.1em;
}

#variant-modal-backdrop .ip-rarity.is-bronze { color: var(--rar-bronze); }
#variant-modal-backdrop .ip-rarity.is-silver { color: var(--rar-silver); }
#variant-modal-backdrop .ip-rarity.is-gold { color: var(--rar-gold); }
#variant-modal-backdrop .ip-rarity.is-platinum { color: var(--rar-platinum); }
#variant-modal-backdrop .ip-rarity.is-legendary { color: var(--rar-legendary); }
#variant-modal-backdrop .ip-rarity.is-celestial { color: var(--rar-celestial); }

#variant-modal-backdrop .ip-status { padding: 4px 9px; border-radius: var(--r2); background: var(--dk); border: 1px solid var(--ln); color: var(--mu); font: 700 10.5px var(--mf); }

#variant-modal-backdrop .ip-rating {
  display: grid;
  grid-template-columns: auto auto auto auto;
  justify-content: start;
  align-items: center;
  gap: 10px 16px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

#variant-modal-backdrop .ip-rating[style*="none"] { display: none; }
#variant-modal-backdrop .ip-rating .modal-rating-label { font: 600 10px var(--mf); letter-spacing: 0.1em; color: var(--di); }
#variant-modal-backdrop .ip-rating :is(.rating-star, .rating-glyph) { font-size: 20px; width: auto; padding: 0 1px; min-height: 0; }
#variant-modal-backdrop .ip-rating .rating-avg-count { display: none; }
#variant-modal-backdrop .ip-rating-num { font: 600 14px var(--hf); color: var(--tx); }
#variant-modal-backdrop .ip-rating-hint { font-size: 12px; color: var(--mu); }
body:not(.user-logged-in) #variant-modal-backdrop .ip-rating .is-mine { display: none; }

#variant-modal-backdrop .ip-facts-wrap { display: flex; flex-direction: column; gap: 6px; }

#variant-modal-backdrop .ip-facts {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 1px;
  background: var(--ln);
  border: 1px solid var(--ln);
  border-radius: var(--r);
  overflow: hidden;
}

#variant-modal-backdrop .ip-fact { padding: 12px 14px; background: var(--card); min-width: 0; }
#variant-modal-backdrop .ip-fact-k { font: 500 10px var(--mf); letter-spacing: 0.1em; color: var(--di); }
#variant-modal-backdrop .ip-fact-v { font: 600 17px var(--hf); margin-top: 2px; color: var(--tx); overflow-wrap: anywhere; }
#variant-modal-backdrop .ip-suggest { font-size: 12px; color: var(--mu); }
#variant-modal-backdrop .ip-link { padding: 0; min-height: 0; border: 0; background: none; color: var(--ac); font: 600 12px var(--bf); cursor: pointer; }

#variant-modal-backdrop .ip-lower { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
#variant-modal-backdrop .ip-lower:has(.ip-set[hidden]) { grid-template-columns: minmax(0, 1fr); }
#variant-modal-backdrop .ip-tabs-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
#variant-modal-backdrop .ip-tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--ln); font-size: 13.5px; }

#variant-modal-backdrop .ip-tab {
  padding: 8px 0;
  min-height: 0;
  margin-bottom: -1px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: none;
  color: var(--mu);
  font: 400 13.5px var(--bf);
  box-shadow: none;
  cursor: pointer;
}

#variant-modal-backdrop .ip-tab.is-on { border-bottom-color: var(--ac); color: var(--tx); font-weight: 600; }
#variant-modal-backdrop .ip-tab-n { font: 400 11px var(--mf); color: var(--di); }
#variant-modal-backdrop .ip-editor-mini { margin-left: 6px; padding: 1px 5px; border: 1px dashed var(--ln); border-radius: var(--r2); font: 600 9px var(--mf); letter-spacing: 0.1em; color: var(--di); }

#variant-modal-backdrop .ip-table {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  border: 1px solid var(--ln);
  border-radius: var(--r);
  overflow: hidden;
  font-size: 13px;
  margin: 0;
  padding: 0;
  background: none;
}

#variant-modal-backdrop .ip-table .data-row { display: contents; }

#variant-modal-backdrop .ip-table .data-key,
#variant-modal-backdrop .ip-table .data-val {
  padding: 10px 14px;
  background: var(--card);
  border-bottom: 1px solid var(--ln);
  min-width: 0;
}

#variant-modal-backdrop .ip-table .data-key { font: 500 10.5px var(--mf); letter-spacing: 0.1em; color: var(--di); text-transform: uppercase; display: flex; align-items: center; }
#variant-modal-backdrop .ip-table .data-val { color: var(--tx); overflow-wrap: anywhere; text-align: left; }
#variant-modal-backdrop .ip-notes { margin: 0; padding: 14px; border: 1px solid var(--ln); border-radius: var(--r); background: var(--card); }
#variant-modal-backdrop .ip-notes-title { font: 600 10px var(--mf); letter-spacing: 0.12em; color: var(--di); margin-bottom: 6px; }
#variant-modal-backdrop .ip-empty { color: var(--mu); font-size: 12.5px; }
#variant-modal-backdrop .ip-pane[hidden] { display: none; }

#variant-modal-backdrop .ip-set {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border-radius: var(--r);
  border: 1px solid var(--ln);
  background: var(--card);
}

#variant-modal-backdrop .ip-set[hidden] { display: none; }
#variant-modal-backdrop .ip-set-head { display: flex; justify-content: space-between; align-items: baseline; font: 600 11px var(--mf); letter-spacing: 0.12em; }
#variant-modal-backdrop .ip-set-total { color: var(--ac); }
#variant-modal-backdrop .ip-set-pct { color: var(--di); }
#variant-modal-backdrop .ip-set-progress { height: 5px; border-radius: 2px; background: var(--hov); overflow: hidden; }
#variant-modal-backdrop .ip-set-progress span { display: block; height: 100%; background: var(--ac); }
#variant-modal-backdrop .ip-set-filter { width: 100%; padding: 7px 10px; border-radius: var(--r2); border: 1px solid var(--ln); background: var(--bg); color: var(--tx); font: 400 12px var(--bf); }
#variant-modal-backdrop .ip-set-segs { display: grid; grid-template-columns: repeat(4, 1fr); padding: 2px; border-radius: var(--r2); background: var(--bg); }
#variant-modal-backdrop .ip-set-seg { padding: 5px 0; min-height: 0; border: 0; border-radius: var(--r2); background: transparent; color: var(--mu); font: 400 11px var(--bf); cursor: pointer; }
#variant-modal-backdrop .ip-set-seg.is-on { background: var(--card); color: var(--tx); }
#variant-modal-backdrop .ip-set-seg-n { font-family: var(--mf); opacity: 0.7; }
#variant-modal-backdrop .ip-set-list { max-height: 420px; overflow: auto; display: flex; flex-direction: column; gap: 2px; margin: 0 -6px; padding: 0 6px; }

#variant-modal-backdrop .ip-set-group {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) 46px auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 6px;
  min-height: 0;
  border: 0;
  border-radius: var(--r2);
  background: none;
  color: var(--tx);
  font: 600 10.5px var(--mf);
  letter-spacing: 0.1em;
  text-align: left;
  cursor: pointer;
}

#variant-modal-backdrop .ip-set-group:hover { background: var(--hov); }
#variant-modal-backdrop .ip-set-caret { color: var(--di); }
#variant-modal-backdrop .ip-set-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#variant-modal-backdrop .ip-set-bar { height: 3px; border-radius: 2px; background: var(--hov); overflow: hidden; }
#variant-modal-backdrop .ip-set-bar span { display: block; height: 100%; background: var(--ac); }
#variant-modal-backdrop .ip-set-n { color: var(--mu); }
#variant-modal-backdrop .ip-set-items { display: flex; flex-direction: column; gap: 2px; padding-left: 14px; margin-bottom: 4px; }

#variant-modal-backdrop .ip-set-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 4px 6px;
  min-height: 0;
  border: 0;
  border-radius: var(--r2);
  background: transparent;
  color: var(--tx);
  text-align: left;
  cursor: pointer;
}

#variant-modal-backdrop .ip-set-item:hover { background: var(--hov); }
#variant-modal-backdrop .ip-set-item.is-current { background: color-mix(in oklab, var(--ac) 14%, transparent); }
#variant-modal-backdrop .ip-set-item img { width: 26px; height: 38px; object-fit: cover; border-radius: 3px; flex: 0 0 auto; filter: none; }
#variant-modal-backdrop .ip-set-item-text { flex: 1 1 0%; min-width: 0; display: flex; flex-direction: column; }
#variant-modal-backdrop .ip-set-item-title { font: 600 12px var(--bf); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#variant-modal-backdrop .ip-set-item-sub { font: 400 10px var(--mf); color: var(--mu); }
#variant-modal-backdrop .ip-set-state { font: 700 10px var(--mf); color: var(--di); white-space: nowrap; }
#variant-modal-backdrop .ip-set-state.is-owned,
#variant-modal-backdrop .ip-set-state.is-want { color: var(--ac); }

#variant-modal-backdrop .ip-hints {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 36px;
  border-top: 1px solid var(--ln);
  background: none;
  font: 500 11px var(--mf);
  color: var(--ac);
}

#variant-modal-backdrop .ip-url { color: var(--ac); }

@media (max-width: 1100px) {
  #variant-modal-backdrop .ip-grid { grid-template-columns: minmax(0, 1fr); padding: 8px 16px 24px; gap: 20px; }
  #variant-modal-backdrop .ip-left { max-width: 360px; width: 100%; margin: 0 auto; }
  #variant-modal-backdrop .ip-lower { grid-template-columns: minmax(0, 1fr); }
  #variant-modal-backdrop .ip-facts { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #variant-modal-backdrop .ip-crumbs,
  #variant-modal-backdrop .ip-hints { padding-left: 16px; padding-right: 16px; }
}

@media (max-width: 860px) {
  #variant-modal-backdrop .ip-icon-btn { min-width: 44px; height: 44px; }
  #variant-modal-backdrop .ip-tab { min-height: 44px; }
  #variant-modal-backdrop .ip-title { font-size: 26px; }
  #variant-modal-backdrop .ip-hints { display: none; }
}

/* ---------- Edit listing (3f) ---------- */
#item-editor-modal .item-editor-window {
  max-width: 1160px;
  width: calc(100vw - 32px);
  padding: 0;
  background: var(--bg);
  border: 1px solid var(--ln);
  border-radius: var(--r);
  box-shadow: 0 20px 60px color-mix(in oklab, var(--sh) 45%, transparent), var(--gl);
  color: var(--tx);
  font: 400 13px var(--bf);
}

#item-editor-modal .item-editor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--ln);
  background: none;
}

#item-editor-modal .item-editor-title-group { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
#item-editor-modal .ie-kicker { font: 600 10px var(--mf); letter-spacing: 0.14em; color: var(--ac); }
#item-editor-modal #item-editor-title { font: 600 19px var(--hf); letter-spacing: 0; text-transform: none; color: var(--tx); text-shadow: none; margin: 0; }
#item-editor-modal .item-editor-grid { grid-template-columns: 220px minmax(0, 1fr); gap: 0; }
#item-editor-modal .item-editor-media-col { padding: 18px; border-right: 1px solid var(--ln); background: var(--card); }
#item-editor-modal .item-editor-fields-col { padding: 18px 20px; }

#item-editor-modal .ie-section {
  margin: 14px 0 8px;
  font: 600 10px var(--mf);
  letter-spacing: 0.14em;
  color: var(--ac);
}

#item-editor-modal .ie-section:first-child { margin-top: 0; }
#item-editor-modal label { font: 400 12px var(--bf); color: var(--mu); text-transform: none; letter-spacing: 0; }
#item-editor-modal .auth-input { background: var(--card); border: 1px solid var(--ln); border-radius: var(--r2); color: var(--tx); font: 400 13px var(--bf); min-height: 38px; }
#item-editor-modal .auth-input:focus { border-color: var(--ac); outline: none; }
#item-editor-modal .readonly-id { font-family: var(--mf); color: var(--mu); }
#item-editor-modal .editor-id-badge { font: 600 9.5px var(--mf); color: var(--ac); letter-spacing: 0.1em; background: none; border: 0; }
#item-editor-modal .form-row-5col { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }

#item-editor-modal .ie-auto {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px dashed var(--ln);
  border-radius: var(--r2);
  font-size: 11.5px;
  color: var(--mu);
}

#item-editor-modal .ie-auto strong { color: var(--tx); font-size: 13px; white-space: nowrap; }
#item-editor-modal .ie-auto-tag { font: 600 9.5px var(--mf); letter-spacing: 0.12em; color: var(--di); }
#item-editor-modal .ie-attr-row { display: flex; flex-wrap: wrap; gap: 6px; grid-template-columns: none; }

#item-editor-modal .ie-attr {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border: 1px solid var(--ln);
  border-radius: var(--r2);
  background: transparent;
  color: var(--tx);
  font: 600 11px var(--mf);
  cursor: pointer;
}

#item-editor-modal .ie-attr input { position: absolute; opacity: 0; pointer-events: none; }
#item-editor-modal .ie-attr:has(input:checked) { border-color: var(--ac); background: color-mix(in oklab, var(--ac) 18%, transparent); color: var(--ac); }
#item-editor-modal .ie-attr:has(input:focus-visible) { outline: 2px solid var(--ac); outline-offset: 1px; }

#item-editor-modal .ie-finish {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
  padding: 12px;
  border-radius: var(--r2);
  background: var(--card);
  border: 1px solid var(--ln);
}

#item-editor-modal .ie-finish-head { display: flex; justify-content: space-between; align-items: center; }
#item-editor-modal .ie-seg { display: flex; gap: 2px; }
#item-editor-modal .ie-seg-btn { padding: 4px 10px; min-height: 0; border: 0; border-radius: var(--r2); background: transparent; color: var(--mu); font: 400 12px var(--bf); cursor: pointer; }
#item-editor-modal .ie-seg-btn.is-on { background: var(--ac); color: var(--ink); font-weight: 600; }
#item-editor-modal .ie-finish-value { padding: 8px 10px; border: 1px dashed var(--ln); border-radius: var(--r2); }
#item-editor-modal .ie-finish-name { font: 600 13px var(--mf); color: var(--ac); }
#item-editor-modal .ie-finish-why { font-size: 11.5px; color: var(--mu); }
#item-editor-modal .ie-finish-groups { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
#item-editor-modal .ie-finish-groups-label { font: 500 9.5px var(--mf); letter-spacing: 0.1em; color: var(--di); margin-right: 4px; }
#item-editor-modal .ie-finish-chip { padding: 2px 7px; border: 1px solid var(--ln); border-radius: var(--r2); font: 500 10px var(--mf); color: var(--mu); }
#item-editor-modal .ie-finish-chip.is-on { border-color: var(--ac); color: var(--ac); }

#item-editor-modal .item-editor-footer {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 24px;
  border-top: 1px solid var(--ln);
  background: var(--bg);
}

#item-editor-modal .item-editor-footer button {
  min-height: 38px;
  padding: 8px 14px;
  border-radius: var(--r2);
  border: 1px solid var(--ln);
  background: var(--dk);
  color: var(--tx);
  font: 600 12.5px var(--bf);
  text-transform: none;
  letter-spacing: 0;
  box-shadow: none;
}

#item-editor-modal #editor-action-delete-btn { color: var(--bad); border-color: color-mix(in oklab, var(--bad) 50%, transparent); }
#item-editor-modal #editor-action-save-add-btn { color: var(--ac); border-color: var(--ac); background: transparent; }
#item-editor-modal #editor-action-save-btn { background: var(--ac); border-color: var(--ac); color: var(--ink); box-shadow: var(--gl); }

@media (max-width: 860px) {
  #item-editor-modal .item-editor-grid { grid-template-columns: minmax(0, 1fr); }
  #item-editor-modal .form-row-5col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #item-editor-modal .item-editor-footer { flex-direction: column; }
  #item-editor-modal .item-editor-footer button { min-height: 44px; }
}

/* ---------- List view (3b ledger) ---------- */
.hud-shell .gallery-grid.density-list { display: block; }

.hud-shell .ll {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--ln);
  border-radius: var(--r);
  background: var(--card);
  overflow: hidden;
  font: 400 12.5px var(--bf);
  color: var(--tx);
}

.hud-shell .ll-head,
.hud-shell .ll-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 84px 116px 124px 56px 76px 92px 92px 112px;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--ln);
}

.hud-shell .ll-head { font: 600 10px var(--mf); letter-spacing: 0.1em; color: var(--di); }
.hud-shell .ll-th { display: flex; gap: 5px; align-items: center; min-width: 0; white-space: nowrap; overflow: hidden; }

.hud-shell .ll-sort,
.hud-shell .ll-filter {
  padding: 0;
  min-height: 0;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  cursor: pointer;
}

.hud-shell .ll-sort:hover { color: var(--tx); background: none; }
.hud-shell .ll-ind,
.hud-shell .ll-filter.is-on { color: var(--ac); }
.hud-shell .ll-filter { opacity: 0.55; font-size: 8.5px; }
.hud-shell .ll-filter:hover,
.hud-shell .ll-filter.is-on { opacity: 1; background: none; }

.hud-shell .ll-row { align-items: center; padding: 8px 16px; cursor: pointer; }
.hud-shell .ll-row:hover { background: var(--hov); }
.hud-shell .ll-row:last-child { border-bottom: 0; }
.hud-shell .ll-item { display: flex; align-items: center; gap: 12px; min-width: 0; }
.hud-shell .ll-thumb { width: 34px; height: 50px; object-fit: cover; border-radius: 3px; flex: 0 0 auto; filter: none; opacity: 1; }
.hud-shell .ll-item-text { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.hud-shell .ll-title { font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.hud-shell .ll-sub { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; min-width: 0; }
.hud-shell .ll-id { font: 400 10.5px var(--mf); color: var(--di); overflow-wrap: anywhere; }
.hud-shell .ll-sub .lc-tag { padding: 1px 5px; border-radius: 3px; font-size: 9px; white-space: nowrap; }

.hud-shell .ll-clamp {
  min-width: 0;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hud-shell .ll-mono { font-family: var(--mf); }
.hud-shell .ll-mu { color: var(--mu); }
.hud-shell .ll-rarity { font: 700 10.5px var(--mf); letter-spacing: 0.06em; color: var(--mu); }
.hud-shell .ll-rarity.is-bronze { color: var(--rar-bronze); }
.hud-shell .ll-rarity.is-silver { color: var(--rar-silver); }
.hud-shell .ll-rarity.is-gold { color: var(--rar-gold); }
.hud-shell .ll-rarity.is-platinum { color: var(--rar-platinum); }
.hud-shell .ll-rarity.is-legendary { color: var(--rar-legendary); }
.hud-shell .ll-rarity.is-celestial { color: var(--rar-celestial); }

.hud-shell .ll-mine { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; min-width: 0; }
.hud-shell .ll-qty { font: 700 11px var(--mf); color: var(--ac); }
.hud-shell .ll-want { font-size: 11.5px; color: var(--ac); white-space: nowrap; }

.hud-shell .ll-badge {
  width: 17px;
  height: 17px;
  border-radius: 3px;
  border: 1px solid color-mix(in oklab, var(--ac) 50%, transparent);
  color: var(--ac);
  font: 700 9.5px var(--mf);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hud-shell .ll-rating { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; min-width: 0; }
.hud-shell .ll-rating-grid { display: grid; grid-template-columns: auto 34px; align-items: center; gap: 3px 6px; }
.hud-shell .ll-rating-grid .card-rating-val { font: 500 10.5px var(--mf); color: var(--mu); }
.hud-shell .ll-rating-grid .rating-avg-count { display: none; }
.hud-shell .ll-rating-grid :is(.rating-star, .rating-glyph) { font-size: 11px; width: auto; padding: 0 0.5px; min-height: 0; }
body:not(.user-logged-in) .hud-shell .ll-rating-grid :is(.ll-mine-stars, [data-rating-mine-text]) { display: none; }
.hud-shell .ll-btns { display: flex; gap: 4px; }

.hud-shell .ll-btn {
  width: 28px;
  height: 28px;
  min-height: 0;
  padding: 0;
  border-radius: var(--r2);
  background: var(--dk);
  border: 1px solid var(--ln);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ac);
  font-weight: 700;
  box-shadow: none;
}

.hud-shell .ll-empty { padding: 24px 16px; color: var(--mu); }

.ll-menu {
  position: absolute;
  z-index: 3000;
  min-width: 200px;
  max-height: 320px;
  overflow: auto;
  padding: 6px;
  background: var(--card);
  border: 1px solid var(--ln);
  border-radius: var(--r2);
  box-shadow: 0 12px 30px color-mix(in oklab, var(--sh) 50%, transparent);
  color: var(--tx);
  font: 400 12.5px var(--bf);
}

.ll-menu-row { display: flex; gap: 8px; align-items: center; padding: 5px 6px; border-radius: var(--r2); cursor: pointer; }
.ll-menu-row:hover { background: var(--hov); }
.ll-menu-row span:nth-of-type(1) { flex: 1 1 0%; }
.ll-menu-n { font: 500 10.5px var(--mf); color: var(--mu); }
.ll-menu-clear { margin-top: 4px; width: 100%; padding: 6px; border: 1px solid var(--ln); border-radius: var(--r2); background: var(--hov); color: var(--tx); cursor: pointer; }

@media (max-width: 1100px) {
  .hud-shell .ll-head,
  .hud-shell .ll-row { grid-template-columns: minmax(0, 1fr) 84px 92px 112px; }
  .hud-shell .ll-head > :nth-child(n+3):nth-child(-n+7),
  .hud-shell .ll-row > :nth-child(n+3):nth-child(-n+7) { display: none; }
}

/* ---------- Rail filters ---------- */
.hud-shell .rail-filters-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 16px;
  border-top: 1px solid var(--ln);
}

.hud-shell .rail-reset {
  background: none;
  border: 0;
  padding: 0;
  min-height: 0;
  font-size: 11.5px;
  color: var(--ac);
  cursor: pointer;
}

.hud-shell .own-seg {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 3px;
  border-radius: var(--r2);
  background: var(--card);
  font-size: 11.5px;
  text-align: center;
}

.hud-shell .own-seg-btn {
  padding: 6px 0;
  border: 1px solid transparent;
  border-radius: var(--r2);
  background: transparent;
  color: var(--mu);
  font: inherit;
  cursor: pointer;
}

.hud-shell .own-seg-btn .side-count { display: none; }
.hud-shell .own-seg-btn.is-on { background: color-mix(in oklab, var(--ac) 22%, var(--card)); color: var(--tx); }

.hud-shell .rail-filters { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.hud-shell .rail-group { display: flex; flex-direction: column; gap: 7px; }
.hud-shell .rail-group-head { display: flex; justify-content: space-between; align-items: baseline; }
.hud-shell .rail-group-label { font-size: 12px; color: var(--mu); }
.hud-shell .rail-run-state { font: 500 10.5px var(--mf); color: var(--ac); }

.hud-shell .rail-rarity-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.hud-shell .rail-rarity {
  padding: 5px 4px;
  border-radius: var(--r2);
  border: 1px solid color-mix(in oklab, currentColor 45%, transparent);
  background: transparent;
  font: 600 10px var(--mf);
  text-align: center;
  cursor: pointer;
}

.hud-shell .rail-rarity.is-on {
  border-color: currentColor;
  background: color-mix(in oklab, currentColor 14%, transparent);
}

.hud-shell .rail-chip-row { display: flex; gap: 5px; flex-wrap: wrap; }

.hud-shell .rail-chip {
  padding: 4px 9px;
  border-radius: var(--r2);
  border: 1px solid var(--ln);
  background: transparent;
  color: var(--tx);
  font: 400 11.5px var(--bf);
  cursor: pointer;
}

.hud-shell .rail-chip.is-on { background: var(--ac); color: var(--ink); border-color: var(--ac); font-weight: 600; }
.hud-shell .rail-chip-n { opacity: 0.85; }

.hud-shell .rail-run-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 3px;
}

.hud-shell .rail-run {
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: stretch;
  padding: 0;
  border: 0;
  background: transparent;
  font: 600 10px var(--mf);
  color: var(--di);
  cursor: pointer;
  text-align: center;
}

.hud-shell .rail-run:hover { background: transparent; color: var(--tx); }
.hud-shell .rail-run-bar { height: 4px; border-radius: 2px; background: var(--hov); }
.hud-shell .rail-run.is-on { color: var(--tx); }
.hud-shell .rail-run.is-on .rail-run-bar { background: var(--ac); }

.hud-shell .rail-switch {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--r2);
  border: 1px solid var(--ln);
  background: transparent;
  color: var(--tx);
  font: 400 12px var(--bf);
  text-align: left;
  cursor: pointer;
}

.hud-shell .rail-switch-label { flex: 1 1 0%; }
.hud-shell .rail-switch .rail-chip-n { font: 500 10.5px var(--mf); color: var(--di); }
.hud-shell .rail-switch-track { position: relative; flex: 0 0 auto; width: 26px; height: 14px; border-radius: 7px; background: var(--hov); }
.hud-shell .rail-switch-knob { position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; border-radius: 50%; background: var(--mu); transition: left 0.15s; }
.hud-shell .rail-switch.is-on .rail-switch-track { background: color-mix(in oklab, var(--ac) 45%, var(--hov)); }
.hud-shell .rail-switch.is-on .rail-switch-knob { left: 14px; background: var(--ac); }

/* ---------- Toolbar chips ---------- */
.hud-shell .filter-chip {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  white-space: nowrap;
  padding: 4px 6px 4px 10px;
  border-radius: var(--r2);
  border: 1px solid transparent;
  background: color-mix(in oklab, var(--ac) 16%, var(--card));
  color: var(--tx);
  font: 400 12.5px var(--bf);
  cursor: pointer;
}

.hud-shell .filter-chip-group,
.hud-shell .filter-chip-x { color: var(--mu); }
.hud-shell .filter-chip-x { padding: 0 3px; }

/* ---------- Shell (3a): top bar ---------- */
.hud-shell .topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 22px;
  border-bottom: 1px solid var(--ln);
  background-color: var(--bg);
  background-image: var(--px);
  box-shadow: none;
  backdrop-filter: none;
}

.hud-shell .top-logo { gap: 8px; color: var(--tx); text-decoration: none; }
.hud-shell .top-logo-text { font: 700 17px var(--hf); letter-spacing: 0.14em; color: var(--tx); text-shadow: none; }
.hud-shell .top-logo-text span { color: var(--ac); text-shadow: var(--tg); }
.hud-shell .top-logo .loot-mark { color: var(--ac); }

.hud-shell .search-container { flex: 1 1 0%; position: relative; }

.hud-shell .search-container .search-input {
  width: 100%;
  min-height: 38px;
  padding: 9px 40px 9px 34px;
  background: var(--card);
  border: 1px solid var(--ln);
  border-radius: var(--r2);
  color: var(--tx);
  font: 400 13px var(--bf);
  box-shadow: none;
}

.hud-shell .search-container .search-input::placeholder { color: var(--mu); }
.hud-shell .search-container .search-input:focus { border-color: var(--ac); outline: none; box-shadow: 0 0 0 1px var(--ac); }
.hud-shell .search-container .search-icon { color: var(--mu); }

.hud-shell .search-container::after {
  content: "/";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font: 500 10px var(--mf);
  padding: 2px 6px;
  border: 1px solid var(--ln);
  border-radius: 4px;
  color: var(--mu);
  pointer-events: none;
}

.hud-shell .search-container:focus-within::after { display: none; }

.hud-shell .telemetry-strip { display: flex; gap: 20px; background: none; border: 0; padding: 0; box-shadow: none; }

.hud-shell .telemetry-strip .hud-stat-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: none;
  border: 0;
  padding: 0;
  box-shadow: none;
  min-width: 0;
}

.hud-shell .telemetry-strip .stat-label { font: 500 10px var(--mf); letter-spacing: 0.06em; color: var(--mu); }
.hud-shell .telemetry-strip .stat-val { font: 600 15px var(--hf); color: var(--tx); text-shadow: none; }

.hud-shell .theme-picker-btn {
  width: 34px;
  height: 34px;
  border-radius: var(--r2);
  border: 1px solid var(--ln);
  background: var(--card);
  color: var(--ac);
}

/* ---------- Shell (3a): command rail ---------- */
.hud-shell .app-sidebar { background-color: var(--bg); background-image: var(--px); border-right: 1px solid var(--ln); }

.hud-shell .sidebar-body {
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font: 400 13px var(--bf);
}

.hud-shell .inv-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  width: 100%;
  padding: 14px;
  border: 1px solid var(--ln);
  border-radius: var(--r);
  background: var(--card);
  color: var(--tx);
  text-align: left;
  box-shadow: none;
  cursor: pointer;
  font: 400 13px var(--bf);
}

.hud-shell .inv-card:hover { border-color: var(--ac); }
.hud-shell .inv-card[aria-selected="true"] { border-color: var(--ac); box-shadow: var(--gl); }
.hud-shell .inv-head { display: flex; justify-content: space-between; align-items: center; }
.hud-shell .inv-title { font: 600 15px var(--hf); letter-spacing: 0.04em; color: var(--tx); text-transform: none; }
.hud-shell .inv-view { display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--ac); }
.hud-shell .inv-line { display: flex; align-items: baseline; gap: 8px; }
.hud-shell .inv-big { font: 600 30px/1 var(--hf); color: var(--ac); }
.hud-shell .inv-of { font-size: 13px; color: var(--mu); }
.hud-shell .inv-spacer { flex: 1 1 0%; }
.hud-shell .inv-pct { font: 600 12px var(--mf); color: var(--mu); }
.hud-shell .inv-track { display: block; height: 4px; border-radius: 2px; background: var(--hov); overflow: hidden; }
.hud-shell .inv-track .progress-bar { display: block; height: 100%; background: var(--ac); box-shadow: none; }
.hud-shell .inv-card .inventory-suffix { font-size: 11.5px; color: var(--mu); }
.hud-shell .inv-stats { display: grid; grid-template-columns: repeat(3, 1fr); padding-top: 10px; border-top: 1px solid var(--ln); }
.hud-shell .inv-stat { display: flex; flex-direction: column; gap: 1px; text-align: center; }
.hud-shell .inv-stat + .inv-stat { border-left: 1px solid var(--ln); }
.hud-shell .inv-stat-n { font: 600 18px var(--bf); color: var(--tx); }
.hud-shell .inv-stat-l { font: 400 11.5px var(--bf); color: var(--mu); }
.hud-shell .inv-locked { display: none; font-size: 12.5px; color: var(--mu); line-height: 1.5; }

/* The rail scrolls, so its blocks keep their natural height instead of being squeezed (and clipped) to fit. */
.hud-shell .sidebar-body > * { flex-shrink: 0; }

/* Signed out: locked box. */
.hud-shell .inv-card.is-locked { border-style: dashed; }
.hud-shell .inv-card.is-locked :is(.inv-line, .inv-track, .inv-stats, .inventory-suffix) { display: none; }
.hud-shell .inv-card.is-locked .inv-locked { display: block; }
.hud-shell .inv-card.is-locked .inv-view { color: var(--di); }

.hud-shell .side-launch {
  display: flex;
  justify-content: space-between;
  padding: 7px 10px;
  border: 0;
  border-radius: var(--r2);
  background: transparent;
  color: var(--tx);
  font: 400 13px var(--bf);
  box-shadow: none;
}

.hud-shell .side-launch:hover { background: var(--hov); }
.hud-shell .side-launch .launch-label { font: inherit; letter-spacing: 0; text-transform: none; }
.hud-shell .side-launch .launch-count { font: 500 11px var(--mf); color: var(--mu); }
.hud-shell #hud-drops-launcher-btn .launch-count { color: var(--ac); font-weight: 600; }

.hud-shell .side-label { font: 600 10px var(--mf); letter-spacing: 0.14em; color: var(--di); margin: 6px 0 4px 10px; }

.hud-shell .pillar-toggle-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 7px 10px;
  border: 0;
  border-radius: var(--r2);
  background: transparent;
  color: var(--tx);
  box-shadow: none;
}

.hud-shell .pillar-toggle-btn:hover { background: var(--hov); }
.hud-shell .pillar-toggle-btn .pillar-label { font: 600 13px var(--bf); text-transform: none; letter-spacing: 0; }
.hud-shell .pillar-toggle-btn .pillar-count { font: 500 11px var(--mf); color: var(--mu); }
.hud-shell .pillar-toggle-btn.active { background: transparent; border: 0; box-shadow: none; }

.hud-shell .sub-bar-group {
  flex-direction: column;
  gap: 1px;
  width: auto;
  margin: 2px 0 6px 12px;
  padding-left: 8px;
  border-left: 1px solid color-mix(in oklab, var(--ac) 35%, transparent);
}

/* Sub-category counts line up with the category counts above them. */
.hud-shell .sub-bar-group .sub-mode-btn { padding-right: 10px; }

.hud-shell .sub-mode-btn,
.hud-shell .side-series-btn {
  display: flex;
  justify-content: space-between;
  padding: 6px 8px;
  border: 0;
  border-radius: var(--r2);
  background: transparent;
  color: var(--tx);
  font: 400 12.5px var(--bf);
  box-shadow: none;
}

.hud-shell :is(.sub-mode-btn, .side-series-btn):hover { background: var(--hov); }
.hud-shell :is(.sub-mode-count, .side-series-count) { font: 400 10.5px var(--mf); color: var(--mu); }

.hud-shell :is(.sub-mode-btn, .side-series-btn).active {
  background: color-mix(in oklab, var(--ac) 16%, transparent);
  color: var(--ac);
  font-weight: 600;
  box-shadow: none;
}

.hud-shell :is(.sub-mode-btn, .side-series-btn).active :is(.sub-mode-count, .side-series-count) { color: var(--ac); }

/* ---------- Shell (3a): content head + toolbar ---------- */
.hud-shell .app-main { background-color: var(--bg); background-image: var(--px); }

.hud-shell .content-head .site-breadcrumbs {
  font: 500 11px var(--mf);
  letter-spacing: 0.1em;
  color: var(--mu);
  text-transform: uppercase;
}

.hud-shell .content-head :is(.crumb-pillar, .crumb-mode, .crumb-sep) { font: inherit; color: inherit; text-shadow: none; }
.hud-shell .content-head .view-count { display: none; }

/* Breadcrumb reads "CATALOG / <pillar>", and the sub-mode becomes the page title (the SEO h1 stays visually hidden). */
.hud-shell .content-head .site-breadcrumbs { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; }
.hud-shell .content-head .crumb-pillar::before { content: attr(data-prefix); }
.hud-shell .content-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.hud-shell .nw-admin { display: flex; align-items: center; gap: 8px; padding: 5px 5px 5px 10px; border-radius: var(--r2); border: 1px dashed color-mix(in oklab, var(--ac) 45%, transparent); }
.hud-shell .nw-admin[hidden] { display: none; }
.hud-shell .ip-editor-tag { font: 600 9.5px var(--mf); letter-spacing: 0.12em; color: var(--mu); }
.hud-shell .nw-new-post { padding: 6px 12px; min-height: 0; border: 1px solid var(--ac); border-radius: var(--r2); background: var(--ac); color: var(--ink); font: 600 12.5px var(--bf); cursor: pointer; }

/* ---------- Shared dialog shell (4g–4l, 5a–5i): every modal reads the tokens ---------- */
.modal-backdrop:not(.ip) {
  background: color-mix(in oklab, var(--sh) 62%, transparent);
  backdrop-filter: blur(3px);
}

.modal-backdrop:not(.ip) > .modal-window {
  background: var(--card);
  border: 1px solid color-mix(in oklab, var(--ac) 30%, var(--ln));
  border-radius: var(--r);
  box-shadow: 0 20px 60px color-mix(in oklab, var(--sh) 45%, transparent), var(--gl);
  color: var(--tx);
  font-family: var(--bf);
}

.modal-backdrop:not(.ip) :is(.auth-input, input[type="text"], input[type="email"], input[type="password"], input[type="url"], input[type="search"], input[type="number"], input[type="date"], select, textarea) {
  min-height: 38px;
  background: var(--bg);
  border: 1px solid var(--ln);
  border-radius: var(--r2);
  color: var(--tx);
  font: 400 13px var(--bf);
}

.modal-backdrop:not(.ip) :is(.auth-input, input, select, textarea):focus { border-color: var(--ac); outline: none; box-shadow: 0 0 0 1px var(--ac); }
.modal-backdrop:not(.ip) label { color: var(--mu); }
.modal-backdrop:not(.ip) .form-hint { color: var(--mu); font-size: 11.5px; }
.modal-backdrop:not(.ip) .modal-close-btn { background: none; border: 0; color: var(--mu); box-shadow: none; }
.modal-backdrop:not(.ip) .modal-close-btn:hover { color: var(--tx); }

/* Sign in (4g) */
#auth-modal-backdrop .auth-modal-window { max-width: 420px; padding: 0; overflow: hidden; }
#auth-modal-backdrop .auth-modal-header { display: flex; justify-content: space-between; align-items: center; padding: 18px 24px; border-bottom: 1px solid var(--ln); background: none; }
#auth-modal-backdrop .auth-header-title-group { display: flex; flex-direction: column; gap: 2px; }
.auth-kicker { font: 600 10px var(--mf); letter-spacing: 0.14em; color: var(--ac); }
#auth-modal-backdrop #auth-modal-title { font: 600 19px var(--hf); letter-spacing: 0; text-transform: none; color: var(--tx); margin: 0; text-shadow: none; }
#auth-modal-backdrop .auth-tabs { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--ln); background: none; padding: 0; gap: 0; }
#auth-modal-backdrop .auth-tab-btn { padding: 14px; min-height: 44px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; color: var(--mu); font: 400 13.5px var(--bf); text-transform: none; letter-spacing: 0; box-shadow: none; }
#auth-modal-backdrop .auth-tab-btn.active { color: var(--tx); font-weight: 600; border-bottom-color: var(--ac); background: none; }
#auth-modal-backdrop .auth-modal-body { padding: 20px 24px; display: flex; flex-direction: column; gap: 12px; }
#auth-modal-backdrop .auth-sso { display: flex; flex-direction: column; gap: 10px; }
#auth-modal-backdrop .auth-sso-btn { min-height: 40px; justify-content: center; border: 1px solid var(--ln); border-radius: var(--r2); background: var(--dk); color: var(--tx); font: 600 13px var(--bf); }
#auth-modal-backdrop .auth-sso-divider { color: var(--mu); font-size: 12px; }
#auth-modal-backdrop .auth-form { gap: 12px; }
#auth-modal-backdrop .auth-submit-btn { min-height: 40px; border: 0; border-radius: var(--r2); background: var(--ac); color: var(--ink); font: 600 13.5px var(--bf); text-transform: none; letter-spacing: 0; box-shadow: var(--gl); }
#auth-modal-backdrop .auth-text-btn,
#auth-modal-backdrop .auth-link { padding: 0; min-height: 0; border: 0; background: none; color: var(--ac); font: 400 13px var(--bf); cursor: pointer; text-decoration: none; }
#auth-modal-backdrop .auth-link { font-weight: 600; font-size: 12px; }
#auth-modal-backdrop .auth-footer-notice { display: flex; flex-direction: column; gap: 8px; margin: 8px -24px -20px; padding: 14px 24px; border-top: 1px solid var(--ln); background: none; }
#auth-modal-backdrop .guest-notice-text { font-size: 12px; color: var(--mu); }
.auth-meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 6px; }
.auth-meter i { height: 4px; border-radius: 2px; background: var(--hov); }
.auth-meter i.is-on { background: var(--ac); }

/* Account menu (4g) */
.hud-shell .account-trigger { min-height: 34px; padding: 6px 10px; border: 1px solid var(--ln); border-radius: var(--r2); background: var(--card); color: var(--tx); font: 600 13px var(--bf); }

.hud-shell .account-dropdown.am {
  width: 300px;
  padding: 0;
  border: 1px solid color-mix(in oklab, var(--ac) 30%, var(--ln));
  border-radius: var(--r);
  background: var(--card);
  box-shadow: 0 20px 50px color-mix(in oklab, var(--sh) 45%, transparent), var(--gl);
  overflow: hidden;
}

.hud-shell .am-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--ln); }
.hud-shell .am-head[hidden],
.hud-shell .am-group[hidden] { display: none; }
.hud-shell .am-avatar { width: 40px; height: 40px; border-radius: var(--r2); background: var(--ac); color: var(--ink); display: flex; align-items: center; justify-content: center; font: 700 15px var(--hf); }
.hud-shell .am-who { display: flex; flex-direction: column; }
.hud-shell .am-who strong { font: 600 15px var(--hf); color: var(--tx); }
.hud-shell .am-who span { font-size: 12px; color: var(--mu); }
.hud-shell .am-group { display: flex; flex-direction: column; padding: 6px 0; border-bottom: 1px solid var(--ln); }
.hud-shell .am-group:last-child { border-bottom: 0; }
.hud-shell .am .tools-dropdown-wrap { display: contents; }
.hud-shell .am .tools-dropdown-wrap[style*="none"] { display: none !important; }
.hud-shell .am .tools-dropdown-menu { display: flex; flex-direction: column; position: static; padding: 0; margin: 0; border: 0; background: none; box-shadow: none; opacity: 1; visibility: visible; transform: none; min-width: 0; }
.hud-shell .am .tools-menu-divider { display: none !important; }
.hud-shell .am .user-profile-pill { display: flex; flex-direction: column; }
.hud-shell .am .user-profile-pill[style*="none"] { display: none !important; }

.hud-shell .am-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 38px;
  padding: 8px 16px;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--tx);
  font: 400 13.5px var(--bf);
  text-align: left;
  box-shadow: none;
  cursor: pointer;
}

.hud-shell .am-item:hover { background: var(--hov); }
.hud-shell .am-item .menu-item-title { font: inherit; color: inherit; text-transform: none; letter-spacing: 0; }
.hud-shell .am-ic { width: 16px; color: var(--ac); text-align: center; flex: 0 0 auto; }
.hud-shell .am-ic-hot { color: var(--warn); }
.hud-shell .am-n { margin-left: auto; font: 500 11px var(--mf); color: var(--mu); }
.hud-shell .am-role { margin-left: auto; padding: 1px 6px; border: 1px dashed var(--ln); border-radius: var(--r2); font: 600 9px var(--mf); letter-spacing: 0.1em; color: var(--di); }

/* Footer (4o): brand and disclaimer left, three stacked links right, no Feedback button. */
.hud-shell .site-global-footer.sf {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px 40px;
  align-items: start;
  margin-top: 32px;
  padding: 28px 36px 30px;
  border-top: 1px solid var(--ln);
  background-color: var(--bg);
  background-image: var(--px);
  text-align: left;
}

.hud-shell .sf-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.hud-shell .sf-brand { font: 700 15px var(--hf); letter-spacing: 0.14em; color: var(--tx); }
.hud-shell .sf-brand span { color: var(--ac); text-shadow: var(--tg); }
.hud-shell .sf .footer-disclaimer { margin: 0; max-width: 640px; font-size: 12.5px; line-height: 1.6; color: var(--mu); text-align: left; }
.hud-shell .sf .footer-affiliate-note { margin: 0; font-size: 12px; color: var(--di); text-align: left; }
.hud-shell .sf-links { display: flex; flex-direction: column; align-items: stretch; gap: 8px; min-width: 190px; }
.hud-shell .sf-link { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 8px 14px; border-radius: var(--r2); border: 1px solid var(--ln); background: var(--card); color: var(--tx); font: 600 13px var(--bf); white-space: nowrap; text-decoration: none; }
.hud-shell .sf-link:hover { border-color: var(--ac); background: color-mix(in oklab, var(--ac) 12%, var(--hov)); }
.hud-shell .sf-link span { color: var(--ac); }
.hud-shell .sf-bottom { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 16px; padding-top: 16px; border-top: 1px solid var(--ln); font: 500 11px var(--mf); color: var(--di); }
.hud-shell .sf .footer-copyright { margin: 0; font: inherit; color: inherit; }

@media (max-width: 860px) {
  .hud-shell .site-global-footer.sf { grid-template-columns: minmax(0, 1fr); padding: 24px 16px; }
  .hud-shell .sf-link { min-height: 44px; }
  .hud-shell .am-item { min-height: 44px; }
}

/* ---------- Upcoming drops (4b) ---------- */
.hud-shell .drops-section { padding: 0; background: none; border: 0; max-width: none; width: 100%; margin: 0; }
.hud-shell .drops-section > .drops-header { display: none; }
.hud-shell .drops-section .drops-list { display: flex; flex-direction: column; gap: 18px; max-width: none; padding: 0; }
.hud-shell .dr-summary { align-self: flex-end; margin-top: -6px; font: 500 12px var(--mf); color: var(--ac); }
.hud-shell .dr-group { display: flex; flex-direction: column; gap: 8px; padding: 0; border: 0; background: none; margin: 0; }
.hud-shell .dr-group-head { display: flex; justify-content: space-between; padding: 0; border: 0; background: none; font: 600 11px var(--mf); letter-spacing: 0.14em; color: var(--ac); }
.hud-shell .dr-shown { font: 500 11px var(--mf); color: var(--mu); letter-spacing: 0.04em; }
.hud-shell .dr-list { display: flex; flex-direction: column; border: 1px solid var(--ln); border-radius: var(--r); background: var(--card); overflow: hidden; }

.hud-shell .drops-item-card.dr-row {
  display: grid;
  grid-template-columns: 56px 46px minmax(0, 1fr) 150px 110px 150px;
  align-items: center;
  gap: 16px;
  width: auto;
  padding: 14px 18px;
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--ln);
  border-radius: 0;
  background: none;
  box-shadow: none;
  transform: none;
  cursor: pointer;
}

.hud-shell .drops-item-card.dr-row:last-child { border-bottom: 0; }
.hud-shell .drops-item-card.dr-row:hover { background: var(--hov); transform: none; }
.hud-shell .dr-date { display: flex; flex-direction: column; align-items: center; }
.hud-shell .dr-day { font: 600 22px/1 var(--hf); color: var(--tx); }
.hud-shell .dr-wd { font: 500 10px var(--mf); color: var(--mu); margin-top: 4px; }
.hud-shell .dr-tba { font: 500 11px var(--mf); color: var(--mu); }
.hud-shell .drops-item-card .dr-thumb { width: 46px; height: 62px; object-fit: cover; border-radius: 3px; filter: none; opacity: 1; margin: 0; }
.hud-shell .drops-item-card.dr-row,
.hud-shell .dr-info { text-align: left; }
.hud-shell .dr-info { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.hud-shell .dr-kicker { font: 500 10px var(--mf); letter-spacing: 0.08em; color: var(--di); }
.hud-shell .dr-title { font: 600 14px var(--bf); color: var(--tx); }
.hud-shell .dr-sub { font-size: 12px; color: var(--mu); }
.hud-shell .dr-pill { justify-self: start; }
.hud-shell .dr-count { font: 500 12px var(--mf); color: var(--mu); }

.hud-shell .dr-want {
  min-height: 34px;
  padding: 6px 12px;
  border: 1px solid var(--ln);
  border-radius: var(--r2);
  background: var(--dk);
  color: var(--tx);
  font: 600 12px var(--bf);
  cursor: pointer;
}

.hud-shell .dr-want.is-on { border-color: var(--ac); color: var(--ac); background: transparent; }

@media (max-width: 1100px) {
  .hud-shell .drops-item-card.dr-row { grid-template-columns: 44px 40px minmax(0, 1fr); row-gap: 8px; }
  .hud-shell .dr-pill { grid-column: 3; }
  .hud-shell .dr-count { grid-column: 3; }
  .hud-shell .dr-want { grid-column: 1 / -1; min-height: 44px; }
}

/* ---------- News (4a) ---------- */
.hud-shell .news-section,
.hud-shell .news-section .news-list { padding: 0; background: none; border: 0; max-width: none; width: 100%; margin: 0; display: block; }
.hud-shell .news-section .drops-header.news-header { display: none; }
.hud-shell .nw-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.hud-shell .nw-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.hud-shell .nw-feature {
  padding: 28px;
  border: 1px solid var(--ln);
  border-radius: var(--r);
  background: var(--card);
  box-shadow: none;
}

.hud-shell .nw-meta { display: flex; align-items: center; gap: 10px; font: 500 11px var(--mf); letter-spacing: 0.08em; color: var(--mu); text-transform: uppercase; margin: 0; }
.hud-shell .nw-new { padding: 2px 7px; border: 1px solid var(--ac); border-radius: 10px; color: var(--ac); font: 700 9.5px var(--mf); }
.hud-shell .nw-title { font: 600 30px/1.2 var(--hf); margin: 10px 0 12px; color: var(--tx); text-shadow: none; letter-spacing: 0; text-transform: none; }
.hud-shell .nw-body { font: 400 15px/1.6 var(--bf); color: var(--tx); }
.hud-shell .nw-feature .news-comments-bar { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--ln); }
.hud-shell .nw-feature .news-comments-toggle { padding: 0; min-height: 0; border: 0; background: none; color: var(--ac); font: 400 13px var(--bf); cursor: pointer; }
.hud-shell .nw-feature .news-comments-caret { display: none; }
.hud-shell .nw-copy { padding: 6px 12px; min-height: 0; border: 1px solid var(--ln); border-radius: var(--r2); background: var(--dk); color: var(--ac); font: 600 12px var(--bf); cursor: pointer; }
.hud-shell .nw-feature .news-comments { margin-top: 16px; display: flex; flex-direction: column-reverse; gap: 16px; }
.hud-shell .nw-feature .news-comments[hidden] { display: none; }
.hud-shell .nw-feature .news-comment-form { display: flex; gap: 12px; align-items: flex-start; }
.hud-shell .nw-feature .news-comment-input { flex: 1 1 0%; min-height: 64px; padding: 12px; border: 1px solid var(--ac); border-radius: var(--r2); background: var(--bg); color: var(--tx); font: 400 13px var(--bf); resize: vertical; }
.hud-shell .nw-feature .news-comment-form-row { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.hud-shell .nw-feature .news-comment-submit { padding: 8px 16px; min-height: 38px; border: 0; border-radius: var(--r2); background: var(--ac); color: var(--ink); font: 600 13px var(--bf); cursor: pointer; }
.hud-shell .nw-feature .news-comment-counter { font: 500 10px var(--mf); color: var(--di); }
.hud-shell .nw-feature .news-comment-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }

.hud-shell .nw-feature .news-comment {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  column-gap: 12px;
  row-gap: 3px;
  padding: 0;
  border: 0;
  background: none;
}

.hud-shell .nw-feature .news-comment > :not(.nw-avatar) { grid-column: 2; }
.hud-shell .nw-avatar { grid-row: 1 / span 3; width: 34px; height: 34px; border-radius: var(--r2); background: var(--hov); color: var(--ac); display: flex; align-items: center; justify-content: center; font: 700 11px var(--mf); }
.hud-shell .nw-feature .news-comment-meta { margin: 0; font-size: 13px; color: var(--tx); }
.hud-shell .nw-feature .news-comment-author { font-weight: 600; }
.hud-shell .nw-stamp { font: 400 10.5px var(--mf); color: var(--mu); margin-left: 6px; }
.hud-shell .nw-feature .news-comment-body { margin: 0; font-size: 13.5px; color: var(--tx); }
.hud-shell .nw-feature .news-comment.is-deleted .news-comment-author,
.hud-shell .nw-feature .news-comment.is-deleted .news-comment-body { color: var(--mu); font-style: italic; }
.hud-shell .nw-feature .news-comment-actions { display: flex; gap: 12px; }
.hud-shell .nw-feature .news-comment-action { padding: 0; min-height: 0; border: 0; background: none; color: var(--ac); font: 400 12px var(--bf); cursor: pointer; }
.hud-shell .nw-feature .news-comment-signin { align-self: flex-start; padding: 8px 14px; border: 1px solid var(--ac); border-radius: var(--r2); background: none; color: var(--ac); cursor: pointer; }

.hud-shell .nw-earlier-label { margin: 14px 0 0; }
.hud-shell .nw-earlier { border: 1px solid var(--ln); border-radius: var(--r); background: var(--card); overflow: hidden; }

.hud-shell .nw-row {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) auto;
  gap: 16px;
  width: 100%;
  padding: 18px;
  min-height: 0;
  border: 0;
  border-bottom: 1px solid var(--ln);
  background: none;
  color: var(--tx);
  text-align: left;
  cursor: pointer;
}

.hud-shell .nw-row:last-child { border-bottom: 0; }
.hud-shell .nw-row:hover { background: var(--hov); }
.hud-shell .nw-row-date { font: 500 11px var(--mf); color: var(--mu); }
.hud-shell .nw-row-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hud-shell .nw-row-title { font: 600 14px var(--bf); }
.hud-shell .nw-row-excerpt { font-size: 13px; color: var(--mu); }
.hud-shell .nw-row-n { font: 500 11px var(--mf); color: var(--ac); }

.hud-shell .nw-drops { display: flex; flex-direction: column; gap: 4px; padding: 16px; border: 1px solid var(--ln); border-radius: var(--r); background: var(--card); }
.hud-shell .nw-drops-head { display: flex; justify-content: space-between; align-items: baseline; font: 600 10px var(--mf); letter-spacing: 0.14em; color: var(--ac); margin-bottom: 6px; }
.hud-shell .nw-link { padding: 0; min-height: 0; border: 0; background: none; color: var(--ac); font: 600 12px var(--bf); cursor: pointer; letter-spacing: 0; }

.hud-shell .nw-drop {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 6px 0;
  min-height: 0;
  border: 0;
  background: none;
  color: var(--tx);
  text-align: left;
  cursor: pointer;
}

.hud-shell .nw-drop img { width: 34px; height: 48px; object-fit: cover; border-radius: 3px; flex: 0 0 auto; }
.hud-shell .nw-drop-text { flex: 1 1 0%; min-width: 0; display: flex; flex-direction: column; }
.hud-shell .nw-drop-title { font: 600 13px var(--bf); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-shell .nw-drop-date { font: 400 10.5px var(--mf); color: var(--mu); }

.hud-shell .nw-pill { padding: 3px 8px; border-radius: 10px; border: 1px solid currentColor; font: 600 10px var(--mf); white-space: nowrap; color: var(--ac); background: color-mix(in oklab, currentColor 12%, transparent); }
.hud-shell .nw-pill.is-upcoming { color: var(--ok); }
.hud-shell .nw-pill.is-late-pledge,
.hud-shell .nw-pill.is-crowdfunded { color: var(--warn); }
.hud-shell .nw-pill.is-in-production { color: var(--rar-celestial); }

@media (max-width: 1100px) {
  .hud-shell .nw-grid { grid-template-columns: minmax(0, 1fr); }
  .hud-shell .nw-feature { padding: 18px; }
  .hud-shell .nw-title { font-size: 24px; }
}
.hud-shell .content-head .crumb-sep { display: none; }
.hud-shell .content-head .crumb-mode {
  flex-basis: 100%;
  margin-top: 4px;
  font: 600 28px/1.15 var(--hf);
  letter-spacing: 0;
  text-transform: none;
  color: var(--tx);
}

.hud-shell .content-head #hud-main-title {
  display: block;
  font: 600 28px/1.15 var(--hf);
  margin-top: 4px;
  color: var(--tx);
  text-shadow: none;
  letter-spacing: 0;
  text-transform: none;
}

.hud-shell .content-head :is(#hud-badge-text, .hud-subtitle) { display: none; }

.hud-shell .catalog-sticky {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--ln);
  border-radius: var(--r2);
  background: var(--bg);
  font-size: 12.5px;
}

.hud-shell .catalog-sticky .content-toolbar { display: contents; }

.hud-shell .catalog-sticky .results-info-bar {
  order: -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  padding: 0;
  border: 0;
  background: none;
}

.hud-shell .catalog-sticky .results-count { color: var(--mu); margin-right: 6px; font: 400 12.5px var(--bf); }
.hud-shell .catalog-sticky .results-count strong { color: var(--tx); font-family: var(--mf); }
.hud-shell .catalog-sticky .active-filter-row { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; border: 0; }
.hud-shell .catalog-sticky .active-filter-row[hidden] { display: none; }
.hud-shell .catalog-sticky .filter-clear { background: none; border: 0; color: var(--ac); font-size: 12px; cursor: pointer; min-height: 0; }
.hud-shell .catalog-sticky .filter-tabs-row { order: 5; flex-basis: 100%; }
.hud-shell .catalog-sticky .select-wrapper { order: 2; }

.hud-shell .catalog-sticky .sort-select {
  min-height: 32px;
  padding: 6px 28px 6px 12px;
  border: 1px solid var(--ln);
  background-color: var(--card);
  border-radius: var(--r2);
  color: var(--tx);
  font: 400 12.5px var(--bf);
  box-shadow: none;
}

.hud-shell .catalog-sticky .hide-vault-toggle { order: 3; }

.hud-shell .catalog-sticky .density-toggle {
  order: 4;
  flex: 0 0 auto;
  display: flex;
  border: 1px solid var(--ln);
  border-radius: var(--r2);
  overflow: hidden;
  background: var(--card);
  padding: 0;
  gap: 0;
}

.hud-shell .catalog-sticky .density-btn {
  padding: 6px 11px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--mu);
  font: 400 12.5px var(--bf);
  text-transform: none;
  letter-spacing: 0;
  box-shadow: none;
}

.hud-shell .catalog-sticky .density-btn.active {
  background: color-mix(in oklab, var(--ac) 22%, var(--card));
  color: var(--ac);
  font-weight: 600;
}

@media (max-width: 860px) {
  .hud-shell :is(.lc-btn, .own-seg-btn, .rail-chip, .rail-rarity, .rail-switch, .filter-chip, .density-btn) { min-height: 44px; }
  .hud-shell .lc-cover-btn { width: 44px; height: 44px; }
}

#auth-modal-backdrop .auth-sso-btn { width: 100%; }
.modal-backdrop:not(.ip) label { text-transform: none; letter-spacing: 0; font: 400 12px var(--bf); }
#auth-modal-backdrop .auth-sso-divider { text-transform: none; letter-spacing: 0; }

/* ---------- Submit an item (4h): same fields and chips as Edit listing ---------- */
#submission-modal .submission-modal-window { max-width: 1040px; padding: 0; }
#submission-modal .submission-modal-header { display: flex; justify-content: space-between; align-items: center; padding: 18px 24px; border-bottom: 1px solid var(--ln); background: none; }
#submission-modal #submission-modal-title { font: 600 19px var(--hf); letter-spacing: 0; text-transform: none; color: var(--tx); margin: 0; text-shadow: none; }
#submission-modal .submission-modal-subtitle { font-size: 12.5px; color: var(--mu); margin: 2px 0 0; }
#submission-modal .submission-form { padding: 18px 24px; }
#submission-modal .submission-label { font: 400 12px var(--bf); color: var(--mu); text-transform: none; letter-spacing: 0; }
#submission-modal .sub-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#submission-modal .sub-target-banner { border: 1px dashed color-mix(in oklab, var(--ac) 45%, transparent); border-radius: var(--r2); background: color-mix(in oklab, var(--ac) 8%, transparent); }
#submission-modal .sub-target-banner-badge { font: 600 10px var(--mf); letter-spacing: 0.12em; color: var(--ac); }
#submission-modal .ie-attr-row { display: flex; flex-wrap: wrap; gap: 6px; }
#submission-modal .ie-attr { position: relative; display: inline-flex; align-items: center; padding: 5px 10px; border: 1px solid var(--ln); border-radius: var(--r2); color: var(--tx); font: 600 11px var(--mf); cursor: pointer; }
#submission-modal .ie-attr input { position: absolute; opacity: 0; pointer-events: none; }
#submission-modal .ie-attr:has(input:checked) { border-color: var(--ac); background: color-mix(in oklab, var(--ac) 18%, transparent); color: var(--ac); }
#submission-modal .sub-finish { margin-top: 8px; padding: 8px 10px; border: 1px dashed var(--ln); border-radius: var(--r2); font-size: 12px; color: var(--mu); }
#submission-modal .ie-finish-name { font: 600 13px var(--mf); color: var(--ac); }
#submission-modal .ie-auto-tag { font: 600 9.5px var(--mf); letter-spacing: 0.12em; color: var(--di); }
#submission-modal .submission-form-footer { border-top: 1px solid var(--ln); margin: 14px -24px -18px; padding: 14px 24px; }
#submission-modal .submission-disclaimer { color: var(--mu); font-size: 12px; }
#submission-modal #submission-submit-btn { background: var(--ac); border-color: var(--ac); color: var(--ink); box-shadow: var(--gl); }
@media (max-width: 860px) { #submission-modal .sub-row-2 { grid-template-columns: 1fr; } }

/* ---------- Feedback + release notes (4i) ---------- */
#feedback-modal .feedback-modal-window { padding: 0; }
#feedback-modal .submission-modal-header { padding: 18px 24px; border-bottom: 1px solid var(--ln); }
#feedback-modal #feedback-modal-title { font: 600 19px var(--hf); letter-spacing: 0; text-transform: none; color: var(--tx); margin: 0; text-shadow: none; }
#feedback-modal .feedback-form { padding: 18px 24px; display: flex; flex-direction: column; gap: 12px; }
#feedback-modal .fb-label { font: 400 12px var(--bf); color: var(--mu); display: block; margin-bottom: 6px; }
#feedback-modal .fb-opt { float: right; font: 600 9.5px var(--mf); letter-spacing: 0.12em; color: var(--di); }
#feedback-modal .feedback-form-actions { display: flex; justify-content: flex-end; gap: 8px; margin: 6px -24px -18px; padding: 14px 24px; border-top: 1px solid var(--ln); }
#feedback-modal #feedback-submit-btn { background: var(--ac); border-color: var(--ac); color: var(--ink); box-shadow: var(--gl); }
#feedback-modal .rail-chip { padding: 6px 11px; border: 1px solid var(--ln); border-radius: var(--r2); background: var(--dk); color: var(--tx); font: 600 12px var(--bf); cursor: pointer; }
#feedback-modal .rail-chip.is-on { border-color: var(--ac); background: color-mix(in oklab, var(--ac) 16%, var(--dk)); color: var(--ac); }
#feedback-modal .rail-chip-row { display: flex; flex-wrap: wrap; gap: 6px; }

#system-changelog-modal .rn { max-width: 760px; width: 95vw; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.rn-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 24px; border-bottom: 1px solid var(--ln); }
.rn-head h2 { font: 600 19px var(--hf); margin: 2px 0 0; color: var(--tx); }
.rn-head-actions { display: flex; align-items: center; gap: 8px; }
.rn .am-role { padding: 1px 6px; border: 1px dashed var(--ln); border-radius: var(--r2); font: 600 9px var(--mf); letter-spacing: 0.1em; color: var(--di); }
.rn-btn { min-height: 32px; padding: 6px 12px; border: 1px solid var(--ln); border-radius: var(--r2); background: var(--dk); color: var(--tx); font: 600 12px var(--bf); cursor: pointer; }
.rn-meta { flex-shrink: 0; padding: 10px 24px; border-bottom: 1px solid var(--ln); font: 500 11px var(--mf); color: var(--mu); }
.rn-loading { display: flex; align-items: center; justify-content: center; gap: 0.75rem; padding: 3rem; color: var(--ac); font: 500 13px var(--mf); }
.rn-spin { display: inline-block; animation: rn-spin 1s linear infinite; }
@keyframes rn-spin { to { transform: rotate(360deg); } }
.rn-body { flex: 1; overflow-y: auto; padding: 8px 24px 16px; }
.rn-block { padding: 16px 0; border-bottom: 1px solid var(--ln); }
.rn-block:last-child { border-bottom: 0; }
.rn-block-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.rn-tag { padding: 3px 8px; border-radius: var(--r2); background: color-mix(in oklab, var(--ac) 18%, transparent); color: var(--ac); font: 700 11px var(--mf); }
.rn-date { font: 500 11px var(--mf); color: var(--mu); }
.rn-row { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; padding: 5px 0; font-size: 13px; line-height: 1.5; }
.rn-label { font: 600 10px var(--mf); letter-spacing: 0.1em; color: var(--di); padding-top: 3px; }
.rn-text { color: var(--tx); }
.rn-text strong { font-weight: 600; }
.rn-code { padding: 0 4px; border-radius: 3px; background: var(--hov); font: 500 0.9em var(--mf); }
.rn-p { color: var(--mu); white-space: pre-wrap; }
.rn-foot { display: flex; justify-content: flex-end; padding: 14px 24px; border-top: 1px solid var(--ln); }
.rn-done { min-height: 38px; padding: 8px 18px; border: 0; border-radius: var(--r2); background: var(--ac); color: var(--ink); font: 600 13px var(--bf); box-shadow: var(--gl); cursor: pointer; }
@media (max-width: 860px) { .rn-row { grid-template-columns: 1fr; gap: 2px; } }

/* ---------- Admin terminal (4j) ---------- */
#admin-modal-backdrop .admin-modal-window { max-width: 1240px; width: 95vw; padding: 0; }
#admin-modal-backdrop .admin-modal-header { display: flex; justify-content: space-between; align-items: center; padding: 18px 24px; border-bottom: 0; background: none; }
#admin-modal-backdrop #admin-modal-title { font: 600 19px var(--hf); letter-spacing: 0; text-transform: none; color: var(--tx); margin: 2px 0 0; text-shadow: none; }
#admin-modal-backdrop .admin-modal-body { padding: 0 24px 24px; gap: 16px; }
#admin-modal-backdrop .admin-tabs-bar { display: flex; gap: 4px; padding: 0; border-bottom: 1px solid var(--ln); background: none; overflow-x: auto; }
#admin-modal-backdrop .admin-tab-btn { padding: 10px 12px; min-height: 44px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; color: var(--mu); font: 400 13.5px var(--bf); text-transform: none; letter-spacing: 0; box-shadow: none; white-space: nowrap; }
#admin-modal-backdrop .admin-tab-btn.active { color: var(--tx); font-weight: 600; border-bottom-color: var(--ac); background: none; }
#admin-modal-backdrop .studio-badge-pending { padding: 1px 6px; border-radius: 9px; background: var(--ac); color: var(--ink); font: 700 10px var(--mf); }
#admin-modal-backdrop .admin-stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
#admin-modal-backdrop .admin-stat-box { padding: 16px; border: 1px solid var(--ln); border-radius: var(--r); background: var(--bg); box-shadow: none; }
#admin-modal-backdrop .admin-stat-label { font: 500 10px var(--mf); letter-spacing: 0.1em; color: var(--mu); }
#admin-modal-backdrop .admin-stat-val { font: 600 26px var(--hf); color: var(--tx); text-shadow: none; }
#admin-modal-backdrop :is(.admin-search-input, .admin-select) { background: var(--bg); border: 1px solid var(--ln); border-radius: var(--r2); color: var(--tx); }
#admin-modal-backdrop :is(.admin-refresh-btn, .admin-inspect-btn) { min-height: 32px; padding: 6px 12px; border: 1px solid var(--ln); border-radius: var(--r2); background: var(--dk); color: var(--tx); font: 600 12.5px var(--bf); text-transform: none; letter-spacing: 0; box-shadow: none; }
#admin-modal-backdrop .admin-inspect-btn { border: 0; background: none; color: var(--ac); padding: 4px 6px; }
#admin-modal-backdrop .admin-delete-user-btn { padding: 4px 6px; border: 0; background: none; color: var(--bad); font: 400 12px var(--bf); }
#admin-modal-backdrop .admin-table-container { border: 1px solid var(--ln); border-radius: var(--r); background: var(--bg); overflow: auto; }
#admin-modal-backdrop table { width: 100%; border-collapse: collapse; }
#admin-modal-backdrop th { padding: 12px 14px; border-bottom: 1px solid var(--ln); background: none; font: 600 10px var(--mf); letter-spacing: 0.1em; color: var(--di); text-align: left; }
#admin-modal-backdrop td { padding: 10px 14px; border-bottom: 1px solid var(--ln); background: none; color: var(--tx); font-size: 13px; }
#admin-modal-backdrop tbody tr:hover td { background: var(--hov); }
#admin-modal-backdrop .admin-user-avatar { width: 28px; height: 28px; border-radius: var(--r2); background: var(--hov); color: var(--ac); display: flex; align-items: center; justify-content: center; font: 700 11px var(--mf); }
#admin-modal-backdrop .admin-user-name { font-weight: 600; color: var(--tx); }
#admin-modal-backdrop .admin-user-id code { font: 400 10px var(--mf); color: var(--di); background: none; }
#admin-modal-backdrop :is(.admin-email-text, .admin-date-text) { font: 500 12px var(--mf); color: var(--mu); }
#admin-modal-backdrop .admin-meta-label { display: none; }
#admin-modal-backdrop .admin-inv-pill { padding: 0; border: 0; background: none; font: 600 12px var(--mf); color: var(--tx); }
#admin-modal-backdrop .admin-action-grid { display: flex; align-items: center; gap: 6px; }
#admin-modal-backdrop .admin-role-select { min-height: 32px; min-width: 116px; padding: 4px 8px; border: 1px solid var(--ln); border-radius: var(--r2); background: var(--dk); color: var(--tx); font: 400 12.5px var(--bf); }
#admin-modal-backdrop .admin-role-select:disabled { color: var(--ac); opacity: 1; }
@media (max-width: 860px) { #admin-modal-backdrop .admin-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
#admin-modal-backdrop .admin-badge-admin { padding: 1px 6px; border: 1px dashed var(--ln); border-radius: var(--r2); background: none; color: var(--di); font: 600 9px var(--mf); letter-spacing: 0.1em; }

/* ---------- Catalog studio (4k) ---------- */
#catalog-studio-modal .catalog-studio-window { max-width: 1440px; width: 96vw; padding: 0; }
#catalog-studio-modal .catalog-studio-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 24px; border-bottom: 1px solid var(--ln); background: none; }
#catalog-studio-modal #catalog-studio-title { font: 600 19px var(--hf); letter-spacing: 0; text-transform: none; color: var(--tx); margin: 2px 0 0; text-shadow: none; }
#catalog-studio-modal .studio-header-actions { display: flex; align-items: center; gap: 8px; }
#catalog-studio-modal .am-role { padding: 1px 6px; border: 1px dashed var(--ln); border-radius: var(--r2); font: 600 9px var(--mf); letter-spacing: 0.1em; color: var(--di); }
#catalog-studio-modal .cs-batch { border: 1px solid var(--ac); background: transparent; color: var(--ac); }
#catalog-studio-modal .cs-add { border: 1px solid var(--ac); background: var(--ac); color: var(--ink); box-shadow: var(--gl); }
#catalog-studio-modal .studio-btn { min-height: 36px; padding: 7px 14px; border-radius: var(--r2); font: 600 13px var(--bf); text-transform: none; letter-spacing: 0; }
#catalog-studio-modal .am-ic-hot { color: var(--warn); }
#catalog-studio-modal .catalog-studio-toolbar { padding: 14px 24px; border-bottom: 1px solid var(--ln); background: none; }
#catalog-studio-modal .studio-pillar-groups { display: flex; flex-wrap: wrap; gap: 16px 16px; align-items: flex-end; }
#catalog-studio-modal .studio-group { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--ln); border-radius: var(--r2); background: none; position: relative; margin-top: 16px; }
#catalog-studio-modal .studio-group::before { content: attr(data-label); position: absolute; top: -18px; left: 0; font: 600 9.5px var(--mf); letter-spacing: 0.12em; color: var(--di); }
#catalog-studio-modal .studio-type-btn { padding: 6px 10px; min-height: 0; border: 0; border-radius: var(--r2); background: none; color: var(--tx); font: 600 12.5px var(--bf); text-transform: none; letter-spacing: 0; box-shadow: none; white-space: nowrap; }
#catalog-studio-modal .studio-type-btn.active { background: var(--ac); color: var(--ink); }
#catalog-studio-modal .cs-n { font: 500 10.5px var(--mf); opacity: 0.75; }
#catalog-studio-modal .studio-admin-cluster { display: flex; gap: 8px; margin-top: 14px; }
#catalog-studio-modal .studio-admin-cluster .studio-type-btn { border: 1px solid var(--ln); padding: 8px 14px; }
#catalog-studio-modal .catalog-studio-body { background: none; }
#catalog-studio-modal :is(.studio-search-input, .studio-select) { background: var(--bg); border: 1px solid var(--ln); border-radius: var(--r2); color: var(--tx); min-height: 38px; }
#catalog-studio-modal table { width: 100%; border-collapse: collapse; }
#catalog-studio-modal th { padding: 12px 14px; border-bottom: 1px solid var(--ln); background: none; font: 600 10px var(--mf); letter-spacing: 0.1em; color: var(--di); text-align: left; }
#catalog-studio-modal td { padding: 10px 14px; border-bottom: 1px solid var(--ln); background: none; color: var(--tx); font-size: 13px; }
#catalog-studio-modal tbody tr:hover td { background: var(--hov); }
#catalog-studio-modal .studio-cover-thumb { width: 28px; height: 40px; object-fit: cover; border-radius: 3px; filter: none; opacity: 1; }
#catalog-studio-modal .studio-item-slug code { font: 500 10.5px var(--mf); color: var(--ac); background: none; text-transform: uppercase; }
#catalog-studio-modal .studio-item-title-text { font-weight: 600; color: var(--tx); }
#catalog-studio-modal .studio-item-preview-eye { display: none; }
#catalog-studio-modal .studio-meta-label { display: none; }
#catalog-studio-modal :is(.studio-cell-series, .studio-cell-creator) { color: var(--mu); }
#catalog-studio-modal .studio-cell-updated { font: 500 12px var(--mf); color: var(--mu); }
#catalog-studio-modal .studio-action-btn { width: 30px; height: 30px; min-height: 0; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--ln); border-radius: var(--r2); background: var(--dk); color: var(--tx); font-size: 12px; box-shadow: none; }
#catalog-studio-modal .studio-action-btn.delete { border-color: color-mix(in oklab, var(--bad) 55%, transparent); color: var(--bad); }
#catalog-studio-modal .studio-action-btn.disabled { opacity: 0.35; }
#catalog-studio-modal :is(.studio-status-pill, .status-badge) { padding: 2px 8px; border-radius: 10px; border: 1px solid currentColor; font: 600 10px var(--mf); background: color-mix(in oklab, currentColor 12%, transparent); }
#catalog-studio-modal .studio-actions-cell { display: flex; gap: 6px; justify-content: flex-end; }

/* ---------- Batch creator (4l) ---------- */
#batch-creator-modal .batch-creator-window { max-width: 960px; width: 95vw; max-height: 90vh; display: flex; flex-direction: column; padding: 0; }
#batch-creator-modal .catalog-studio-header { display: flex; justify-content: space-between; align-items: center; padding: 18px 24px; border-bottom: 1px solid var(--ln); background: none; }
#batch-creator-modal #batch-creator-title { font: 600 19px var(--hf); letter-spacing: 0; text-transform: none; color: var(--tx); margin: 2px 0 0; text-shadow: none; }
#batch-creator-modal .studio-header-actions { display: flex; align-items: center; gap: 8px; }
#batch-creator-modal .am-role { padding: 1px 6px; border: 1px dashed var(--ln); border-radius: var(--r2); font: 600 9px var(--mf); letter-spacing: 0.1em; color: var(--di); }
#batch-creator-modal .batch-creator-body { padding: 18px 24px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 18px; }
#batch-creator-modal .batch-template-card { padding: 16px; border: 1px solid var(--ln); border-radius: var(--r); background: var(--bg); }
#batch-creator-modal .bc-step { margin: 0 0 10px; font: 600 10.5px var(--mf); letter-spacing: 0.14em; color: var(--ac); }
#batch-creator-modal .editor-dropzone { border: 1px dashed var(--ln); border-radius: var(--r); background: var(--bg); padding: 26px; text-align: center; color: var(--tx); }
#batch-creator-modal .dropzone-sub { color: var(--mu); font-size: 12.5px; }
#batch-creator-modal .dropzone-meta { font: 500 10px var(--mf); color: var(--di); }
#batch-creator-modal .dropzone-browse-link { padding: 0; border: 0; background: none; color: var(--ac); cursor: pointer; font: inherit; }
#batch-creator-modal .bc-list-head { display: flex; justify-content: space-between; align-items: center; }
#batch-creator-modal .bc-link { padding: 0; min-height: 0; border: 0; background: none; color: var(--ac); font: 600 12px var(--bf); cursor: pointer; }
#batch-creator-modal .studio-items-table { width: 100%; border-collapse: collapse; border: 1px solid var(--ln); border-radius: var(--r); overflow: hidden; }
#batch-creator-modal th { padding: 10px 14px; border-bottom: 1px solid var(--ln); background: var(--bg); font: 600 10px var(--mf); letter-spacing: 0.1em; color: var(--di); text-align: left; }
#batch-creator-modal td { padding: 8px 14px; border-bottom: 1px solid var(--ln); background: var(--card); }
#batch-creator-modal .bc-col-photo { width: 64px; }
#batch-creator-modal .bc-col-id { width: 170px; }
#batch-creator-modal .bc-col-act { width: 52px; text-align: center; }
#batch-creator-modal .bc-thumb { display: block; width: 40px; height: 40px; object-fit: cover; border-radius: 4px; }
#batch-creator-modal .bc-thumb-empty { background: repeating-linear-gradient(135deg, var(--hov) 0 4px, var(--bg) 4px 8px); }
#batch-creator-modal .batch-item-id-input { font: 500 12px var(--mf); color: var(--ac); text-transform: uppercase; background: transparent; border-color: transparent; }
#batch-creator-modal .batch-item-title-input.is-invalid { border-color: var(--bad); }
#batch-creator-modal .batch-item-title-input.is-invalid::placeholder { color: var(--bad); }
#batch-creator-modal .bc-remove { width: 32px; height: 32px; min-height: 0; border: 0; background: none; color: var(--mu); cursor: pointer; }
#batch-creator-modal .bc-empty { text-align: center; padding: 2rem; color: var(--mu); font: 500 12px var(--mf); }
#batch-creator-modal .bc-progress-text { font: 500 12px var(--mf); color: var(--ac); margin-bottom: 6px; }
#batch-creator-modal .bc-progress { height: 8px; border-radius: 4px; background: var(--hov); overflow: hidden; }
#batch-creator-modal .bc-progress > div { height: 100%; background: var(--ac); transition: width 0.2s; }
#batch-creator-modal .bc-foot { display: flex; justify-content: space-between; align-items: center; padding: 14px 24px; border-top: 1px solid var(--ln); background: none; }
#batch-creator-modal .bc-foot-left { display: flex; align-items: center; gap: 12px; }
#batch-creator-modal .bc-check { font-size: 12px; color: var(--bad); }
#batch-creator-modal #batch-create-all-btn { min-height: 38px; border: 0; border-radius: var(--r2); background: var(--ac); color: var(--ink); font: 600 13px var(--bf); box-shadow: var(--gl); }
#batch-creator-modal .editor-cancel-btn { min-height: 38px; padding: 8px 14px; border: 1px solid var(--ln); border-radius: var(--r2); background: var(--dk); color: var(--tx); font: 600 13px var(--bf); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#batch-creator-modal .form-group { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
#batch-creator-modal :is(.form-row-2col, .form-row-3col) { display: grid; gap: 12px; }
#batch-creator-modal .form-row-2col { grid-template-columns: 1fr 1fr; }
#batch-creator-modal .form-row-3col { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#batch-creator-modal .auth-input { width: 100%; }
#batch-creator-modal #batch-create-all-btn { text-transform: none; letter-spacing: 0; }
@media (max-width: 860px) { #batch-creator-modal :is(.form-row-2col, .form-row-3col) { grid-template-columns: 1fr; } }

/* ---------- Achievements master switch (5f) ---------- */
#admin-modal-backdrop .ach-master { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 1px solid var(--ln); border-radius: var(--r); background: var(--bg); color: var(--tx); text-align: left; cursor: pointer; }
#admin-modal-backdrop .ach-master .rail-switch-label { flex: 1 1 0%; display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
#admin-modal-backdrop .ach-master .rail-switch-label span { font-size: 12px; color: var(--mu); }
#admin-modal-backdrop .rail-switch-track { position: relative; flex: 0 0 auto; width: 34px; height: 18px; border-radius: 9px; background: var(--hov); }
#admin-modal-backdrop .rail-switch-knob { position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--mu); transition: left 0.15s; }
#admin-modal-backdrop .ach-master.is-on .rail-switch-track { background: color-mix(in oklab, var(--ac) 45%, var(--hov)); }
#admin-modal-backdrop .ach-master.is-on .rail-switch-knob { left: 19px; background: var(--ac); }
#admin-modal-backdrop .ach-note { margin: 6px 0 10px; font-size: 12px; color: var(--mu); }
.hud-shell .achievement-close { padding: 0 6px; min-height: 0; border: 0; background: none; color: var(--mu); cursor: pointer; }

/* ---------- Show filters in the rail (5d) ---------- */
.hud-shell .content-toolbar .hide-vault-toggle { display: none !important; }
.hud-shell .show-switches { display: flex; flex-direction: column; gap: 6px; }
.hud-shell .show-switches[hidden], .hud-shell .show-switch[hidden] { display: none; }
.hud-shell .show-switch .rail-switch-label { display: flex; flex-direction: column; gap: 2px; text-align: left; }
.hud-shell .show-hint { font-size: 11.5px; line-height: 1.35; color: var(--mu); }
.hud-shell .own-hint { margin: 6px 0 0; }

/* ---------- Public vault (5a) ---------- */
#public-vault-modal .public-vault-window {
  max-width: none; width: 100%; height: 100vh; max-height: 100vh; border: 0; border-radius: 0;
  display: flex; flex-direction: column; overflow: auto;
  background-color: var(--bg); background-image: var(--px); color: var(--tx); font-family: var(--bf); box-shadow: none;
}
#public-vault-modal .pvx-top { display: flex; align-items: center; gap: 10px; padding: 12px 22px; border-bottom: 1px solid var(--ln); position: sticky; top: 0; z-index: 2; background: var(--bg); }
#public-vault-modal .pvx-logo { font: 700 17px var(--hf); letter-spacing: 0.14em; }
#public-vault-modal .pvx-logo span { color: var(--ac); text-shadow: var(--tg); }
#public-vault-modal .pvx-grow { flex: 1 1 0%; }
#public-vault-modal .pvx-btn, #share-vault-modal .ss-btn {
  padding: 8px 14px; min-height: 36px; border-radius: var(--r2); border: 1px solid var(--ln); background: var(--card); color: var(--tx);
  font: 500 12.5px var(--bf); cursor: pointer; white-space: nowrap;
}
#public-vault-modal .pvx-btn.is-primary, #share-vault-modal .ss-btn.is-primary { background: var(--ac); color: var(--ink); border-color: var(--ac); box-shadow: var(--gl); font-weight: 600; }
#public-vault-modal .pvx-btn[hidden] { display: none; }
#public-vault-modal :is(.pvx-btn:not(.is-primary), .pvx-pill, .pvx-sort):hover,
#share-vault-modal .ss-btn:not(.is-primary):hover { border-color: var(--ac); background: color-mix(in oklab, var(--ac) 12%, var(--hov)); }
#public-vault-modal .pvx-main { padding: 22px 26px 40px; display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 1440px; margin: 0 auto; box-sizing: border-box; }
#public-vault-modal .pvx-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
#public-vault-modal .pvx-kicker { font: 500 10.5px var(--mf); letter-spacing: 0.12em; color: var(--ac); }
#public-vault-modal .pvx-title { font: 600 26px var(--hf); margin: 4px 0 0; color: var(--tx); }
#public-vault-modal .pvx-sub { font: 500 11.5px var(--mf); color: var(--mu); margin-top: 4px; }
#public-vault-modal .pvx-stats { display: flex; gap: 22px; }
#public-vault-modal .pvx-stat { display: flex; flex-direction: column; align-items: center; font: 500 10px var(--mf); letter-spacing: 0.06em; color: var(--mu); }
#public-vault-modal .pvx-stat strong { font: 600 18px var(--hf); color: var(--tx); }
#public-vault-modal .pvx-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--ln); border-radius: var(--r); background: var(--card); }
#public-vault-modal .pvx-toolbar[hidden] { display: none; }
#public-vault-modal .pvx-search { flex: 1 1 200px; min-width: 200px; display: flex; align-items: center; gap: 6px; padding: 0 10px; min-height: 38px; border: 1px solid var(--ln); border-radius: var(--r2); background: var(--bg); color: var(--di); }
#public-vault-modal .pvx-search input { flex: 1 1 0%; min-width: 0; border: 0; background: none; color: var(--tx); font: 400 12.5px var(--bf); outline: none; min-height: 36px; }
#public-vault-modal .pvx-search-clear { border: 0; background: none; color: var(--mu); cursor: pointer; }
#public-vault-modal .pvx-types { display: flex; gap: 6px; flex-wrap: wrap; }
#public-vault-modal .pvx-pill { padding: 5px 10px; min-height: 30px; border-radius: var(--r2); border: 1px solid var(--ln); background: transparent; color: var(--tx); font: 400 12px var(--bf); cursor: pointer; white-space: nowrap; }
#public-vault-modal .pvx-pill[hidden] { display: none; }
#public-vault-modal .pvx-pill.is-on { border-color: var(--ac); background: color-mix(in oklab, var(--ac) 16%, transparent); color: var(--ac); }
#public-vault-modal .pvx-n { font: 500 10.5px var(--mf); opacity: 0.7; }
#public-vault-modal .pvx-sep { width: 1px; height: 22px; background: var(--ln); }
#public-vault-modal .pvx-sort { padding: 6px 12px; min-height: 32px; border-radius: var(--r2); border: 1px solid var(--ln); background: var(--card); color: var(--tx); font: 500 12px var(--bf); }
#public-vault-modal .pvx-state { color: var(--mu); font-size: 13px; padding: 24px 0; text-align: center; }
#public-vault-modal .pvx-error { display: flex; flex-direction: column; gap: 6px; align-items: center; }
#public-vault-modal .pvx-error strong { font: 600 18px var(--hf); color: var(--tx); }
#public-vault-modal .pvx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--gp); }
#public-vault-modal .pv-card { display: flex; flex-direction: column; background: var(--card); border: 1px solid color-mix(in oklab, var(--ac) 55%, var(--ln)); border-radius: var(--r); overflow: hidden; min-width: 0; cursor: pointer; }
#public-vault-modal .pv-card.is-wanted { border-color: var(--ln); border-style: dashed; }
#public-vault-modal .pv-card:hover, #public-vault-modal .pv-card:focus-visible { border-color: var(--ac); box-shadow: var(--gl); outline: none; }
#public-vault-modal .pv-cover { position: relative; }
#public-vault-modal .pv-img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; filter: none; opacity: 1; }
#public-vault-modal .lc-rarity { position: absolute; top: 8px; left: 8px; padding: 2px 7px; border-radius: 4px; background: color-mix(in oklab, var(--dk) 10%, #05070b); border: 1px solid currentColor; font: 700 10px var(--mf); letter-spacing: 0.04em; }
#public-vault-modal .pv-count { position: absolute; top: 8px; right: 8px; padding: 3px 7px; border-radius: 4px; background: var(--ac); color: var(--ink); font: 700 10.5px var(--mf); }
#public-vault-modal .pv-wanted { position: absolute; left: 8px; bottom: 8px; padding: 3px 7px; border-radius: 4px; background: var(--dk); border: 1px solid var(--ln); font: 700 10px var(--mf); color: var(--ac); }
#public-vault-modal .pv-body { padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
#public-vault-modal .pv-title { font-weight: 600; font-size: 13.5px; line-height: 1.3; }
#public-vault-modal .pv-line { font-size: 11.5px; color: var(--mu); }

/* ---------- Owner share settings (5a) ---------- */
#share-vault-modal .share-vault-window { width: min(400px, calc(100vw - 32px)); padding: 18px; display: flex; flex-direction: column; gap: 14px; background: var(--card); border: 1px solid var(--ln); border-radius: var(--r); color: var(--tx); }
#share-vault-modal .ss-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
#share-vault-modal .ss-kicker { font: 600 10px var(--mf); letter-spacing: 0.14em; color: var(--ac); }
#share-vault-modal .ss-title { font: 600 18px var(--hf); margin: 4px 0 0; color: var(--tx); }
#share-vault-modal .ss-switch { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r2); border: 1px solid var(--ln); background: transparent; color: var(--tx); text-align: left; cursor: pointer; }
#share-vault-modal .ss-switch.is-on { border-color: var(--ac); background: color-mix(in oklab, var(--ac) 8%, transparent); }
#share-vault-modal .ss-switch-text { flex: 1 1 0%; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#share-vault-modal .ss-switch-title { font-size: 12.5px; }
#share-vault-modal .ss-switch-desc { font-size: 11.5px; color: var(--mu); }
#share-vault-modal .rail-switch-track { position: relative; flex: 0 0 auto; width: 34px; height: 18px; border-radius: 9px; background: var(--hov); }
#share-vault-modal .rail-switch-knob { position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--mu); transition: left 0.15s; }
#share-vault-modal .ss-switch.is-on .rail-switch-track { background: color-mix(in oklab, var(--ac) 45%, var(--hov)); }
#share-vault-modal .ss-switch.is-on .rail-switch-knob { left: 19px; background: var(--ac); }
#share-vault-modal .ss-url-row { display: flex; gap: 6px; }
#share-vault-modal .ss-url-row.is-off { opacity: 0.55; }
#share-vault-modal .share-vault-url-input { flex: 1 1 0%; min-width: 0; min-height: 38px; padding: 0 10px; border: 1px solid var(--ln); border-radius: var(--r2); background: var(--bg); color: var(--tx); font: 500 11.5px var(--mf); }
#share-vault-modal .ss-note { margin: 0; font-size: 11.5px; line-height: 1.45; color: var(--mu); }
#share-vault-modal #share-vault-reset-btn { align-self: flex-start; }

@media (max-width: 760px) {
  #public-vault-modal .pvx-top { padding: 10px 16px; }
  #public-vault-modal .pvx-main { padding: 16px 16px 32px; }
  #public-vault-modal .pvx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #public-vault-modal :is(.pvx-btn, .pvx-pill, .pvx-sort) { min-height: 44px; }
  #public-vault-modal .pvx-stats { gap: 16px; }
}

/* ---------- Copy editor (5b): a panel beside the item page ---------- */
#copy-editor-backdrop { justify-content: flex-end; align-items: stretch; padding: 0; background: color-mix(in oklab, var(--sh) 25%, transparent); backdrop-filter: none !important; -webkit-backdrop-filter: none !important; z-index: 1400 !important; }
#copy-editor-backdrop .copy-editor-window {
  width: min(460px, 100vw); max-width: none; height: 100vh; max-height: 100vh; margin: 0; border-radius: 0;
  border: 0; border-left: 1px solid var(--ln); background: var(--card); color: var(--tx); font-family: var(--bf);
  display: flex; flex-direction: column; overflow: hidden; transform: none !important; box-shadow: -12px 0 40px color-mix(in oklab, var(--sh) 60%, transparent);
}
#copy-editor-backdrop .ce-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 16px 18px 12px; border-bottom: 1px solid var(--ln); }
#copy-editor-backdrop .ce-kicker { font: 600 10px var(--mf); letter-spacing: 0.14em; color: var(--ac); }
#copy-editor-backdrop .ce-title { font: 600 18px var(--hf); margin: 4px 0 0; color: var(--tx); }
#copy-editor-backdrop .ce-item { display: flex; gap: 12px; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--ln); }
#copy-editor-backdrop .ce-thumb { width: 44px; height: 58px; object-fit: cover; border-radius: var(--r2); border: 1px solid var(--ln); filter: none; opacity: 1; }
#copy-editor-backdrop .ce-item-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
#copy-editor-backdrop .ce-item-title { font-weight: 600; font-size: 13.5px; }
#copy-editor-backdrop .ce-item-meta { font: 500 11px var(--mf); color: var(--mu); letter-spacing: 0.04em; }
#copy-editor-backdrop .copy-editor-form { display: flex; flex-direction: column; flex: 1 1 0%; min-height: 0; }
#copy-editor-backdrop .ce-body { flex: 1 1 0%; overflow: auto; padding: 14px 18px; display: flex; flex-direction: column; gap: 16px; }
#copy-editor-backdrop .ce-section { display: flex; flex-direction: column; gap: 10px; }
#copy-editor-backdrop .ce-section-title { font: 600 10px var(--mf); letter-spacing: 0.14em; color: var(--mu); }
#copy-editor-backdrop .ce-grid { display: grid; gap: 10px; }
#copy-editor-backdrop .ce-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#copy-editor-backdrop .ce-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#copy-editor-backdrop .ce-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
#copy-editor-backdrop .ce-label { font: 500 10.5px var(--mf); letter-spacing: 0.06em; color: var(--mu); text-transform: uppercase; }
#copy-editor-backdrop .ce-label-row { display: flex; justify-content: space-between; align-items: baseline; }
#copy-editor-backdrop .ce-hint { font-size: 11px; color: var(--di); }
#copy-editor-backdrop .auth-input { min-height: 38px; width: 100%; box-sizing: border-box; padding: 0 10px; border: 1px solid var(--ln); border-radius: var(--r2); background: var(--bg); color: var(--tx); font: 400 13px var(--bf); }
#copy-editor-backdrop textarea.auth-input { padding: 8px 10px; resize: vertical; }
#copy-editor-backdrop .auth-input:focus { outline: none; border-color: var(--ac); }
#copy-editor-backdrop .ce-price { position: relative; display: block; }
#copy-editor-backdrop .ce-price > span { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--mu); font-size: 13px; }
#copy-editor-backdrop .ce-price .auth-input { padding-left: 22px; }
#copy-editor-backdrop .ce-switch { display: flex; align-items: center; gap: 10px; padding: 8px 10px; min-height: 38px; box-sizing: border-box; border: 1px solid var(--ln); border-radius: var(--r2); cursor: pointer; }
#copy-editor-backdrop .ce-switch-text { flex: 1 1 0%; font-size: 12.5px; }
#copy-editor-backdrop .ce-switch-input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
#copy-editor-backdrop .rail-switch-track { position: relative; flex: 0 0 auto; width: 34px; height: 18px; border-radius: 9px; background: var(--hov); }
#copy-editor-backdrop .rail-switch-knob { position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--mu); transition: left 0.15s; }
#copy-editor-backdrop .ce-switch:has(.ce-switch-input:checked) { border-color: var(--ac); background: color-mix(in oklab, var(--ac) 8%, transparent); }
#copy-editor-backdrop .ce-switch-input:checked ~ .rail-switch-track { background: color-mix(in oklab, var(--ac) 45%, var(--hov)); }
#copy-editor-backdrop .ce-switch-input:checked ~ .rail-switch-track .rail-switch-knob { left: 19px; background: var(--ac); }
#copy-editor-backdrop .ce-switch-input:focus-visible ~ .rail-switch-track { outline: 2px solid var(--ac); outline-offset: 2px; }
#copy-editor-backdrop .ce-qty { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px dashed var(--ln); border-radius: var(--r2); }
#copy-editor-backdrop .ce-qty-text { display: flex; flex-direction: column; gap: 3px; }
#copy-editor-backdrop .ce-stepper { display: flex; align-items: center; gap: 4px; }
#copy-editor-backdrop .ce-step { width: 32px; height: 32px; border: 1px solid var(--ln); border-radius: var(--r2); background: var(--bg); color: var(--tx); cursor: pointer; font-size: 15px; }
#copy-editor-backdrop .ce-step-val { width: 40px; height: 32px; text-align: center; border: 0; background: none; color: var(--tx); font: 600 14px var(--mf); }
#copy-editor-backdrop .ce-foot { display: flex; align-items: center; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--ln); }
#copy-editor-backdrop .ce-grow { flex: 1 1 0%; }
#copy-editor-backdrop .ce-btn { padding: 8px 14px; min-height: 36px; border-radius: var(--r2); border: 1px solid var(--ln); background: var(--card); color: var(--tx); font: 500 12.5px var(--bf); cursor: pointer; }
#copy-editor-backdrop .ce-btn:hover, #copy-editor-backdrop .ce-step:hover { border-color: var(--ac); background: color-mix(in oklab, var(--ac) 12%, var(--hov)); }
#copy-editor-backdrop .ce-btn.is-primary { background: var(--ac); color: var(--ink); border-color: var(--ac); box-shadow: var(--gl); font-weight: 600; }
#copy-editor-backdrop .ce-btn.is-danger { color: var(--bad); border-color: color-mix(in oklab, var(--bad) 45%, var(--ln)); }
#copy-editor-backdrop .ce-btn.is-danger:hover { background: color-mix(in oklab, var(--bad) 12%, var(--hov)); border-color: var(--bad); }
#copy-editor-backdrop .ce-btn:disabled { opacity: 0.6; cursor: default; }

/* ---------- My copies tab (5b) ---------- */
#variant-modal-backdrop .ip-copies-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
#variant-modal-backdrop .ip-copies-stat { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border: 1px solid var(--ln); border-radius: var(--r2); background: var(--bg); }
#variant-modal-backdrop .ip-copies-stat span { font: 500 10px var(--mf); letter-spacing: 0.08em; color: var(--mu); }
#variant-modal-backdrop .ip-copies-stat strong { font: 600 17px var(--hf); color: var(--tx); }
#variant-modal-backdrop .ip-copies-table { display: flex; flex-direction: column; border: 1px solid var(--ln); border-radius: var(--r2); overflow: hidden; }
#variant-modal-backdrop .ip-copy-row { display: grid; grid-template-columns: 34px 1fr 1fr 80px 1.3fr 92px 64px; gap: 8px; align-items: center; padding: 8px 10px; font-size: 12.5px; border-top: 1px solid var(--ln); }
#variant-modal-backdrop .ip-copy-row:first-child { border-top: 0; }
#variant-modal-backdrop .ip-copy-row > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#variant-modal-backdrop .ip-copy-head { font: 500 10px var(--mf); letter-spacing: 0.08em; color: var(--mu); background: var(--bg); }
#variant-modal-backdrop .ip-copy-row.is-editing { background: color-mix(in oklab, var(--ac) 10%, transparent); box-shadow: inset 2px 0 0 var(--ac); }
#variant-modal-backdrop .ip-copy-n { font: 600 11px var(--mf); color: var(--mu); }
#variant-modal-backdrop .ip-copy-tag { font: 500 10px var(--mf); color: var(--ac); }
#variant-modal-backdrop .ip-copy-act { text-align: right; }
#variant-modal-backdrop .ip-copy-edit { padding: 4px 10px; min-height: 28px; border: 1px solid var(--ln); border-radius: var(--r2); background: var(--card); color: var(--tx); font: 500 12px var(--bf); cursor: pointer; }
#variant-modal-backdrop .ip-copy-edit:hover, #variant-modal-backdrop .ip-copies-add:hover { border-color: var(--ac); background: color-mix(in oklab, var(--ac) 12%, var(--hov)); }
#variant-modal-backdrop .ip-copy-editing { font: 600 11px var(--mf); color: var(--ac); }
#variant-modal-backdrop .ip-copies-add { margin-top: 10px; width: 100%; padding: 9px 12px; min-height: 38px; border: 1px dashed var(--ln); border-radius: var(--r2); background: transparent; color: var(--tx); font: 500 12.5px var(--bf); cursor: pointer; }

@media (max-width: 760px) {
  #copy-editor-backdrop .ce-grid-3 { grid-template-columns: minmax(0, 1fr); }
  #copy-editor-backdrop :is(.ce-btn, .ce-switch, .ce-step) { min-height: 44px; }
  #copy-editor-backdrop .ce-step { width: 44px; height: 44px; }
  #variant-modal-backdrop .ip-copies-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #variant-modal-backdrop .ip-copy-row { grid-template-columns: 30px 1fr 70px 64px; }
  #variant-modal-backdrop .ip-copy-row > :nth-child(3), #variant-modal-backdrop .ip-copy-row > :nth-child(5), #variant-modal-backdrop .ip-copy-row > :nth-child(6) { display: none; }
  #variant-modal-backdrop .ip-copy-edit { min-height: 44px; }
}

/* ---------- Inventory tools (5c) ---------- */
#vault-import-backdrop .it-window { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--card); border: 1px solid var(--ln); border-radius: var(--r); color: var(--tx); font-family: var(--bf); text-align: left; }
#vault-import-backdrop .it-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 16px 18px 12px; border-bottom: 1px solid var(--ln); }
#vault-import-backdrop .it-kicker { font: 600 10px var(--mf); letter-spacing: 0.14em; color: var(--ac); }
#vault-import-backdrop .it-title { font: 600 18px var(--hf); margin: 4px 0 0; color: var(--tx); text-transform: none; letter-spacing: 0; }
#vault-import-backdrop .it-close { width: 32px; height: 32px; border: 1px solid var(--ln); border-radius: var(--r2); background: transparent; color: var(--mu); cursor: pointer; }
#vault-import-backdrop .it-body { padding: 14px 18px 16px; display: flex; flex-direction: column; gap: 10px; overflow: auto; }
#vault-import-backdrop .it-body[hidden] { display: none; }
#vault-import-backdrop .it-section { font: 600 10px var(--mf); letter-spacing: 0.14em; color: var(--mu); margin-top: 4px; }
#vault-import-backdrop .it-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--ln); border-radius: var(--r2); background: var(--bg); }
#vault-import-backdrop .it-ic { flex: 0 0 auto; width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--r2); background: color-mix(in oklab, var(--ac) 12%, transparent); color: var(--ac); font-size: 15px; }
#vault-import-backdrop .it-text { flex: 1 1 0%; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#vault-import-backdrop .it-text strong { font-size: 13px; font-weight: 600; }
#vault-import-backdrop .it-text span { font-size: 11.5px; color: var(--mu); line-height: 1.4; }
#vault-import-backdrop .it-btn { padding: 7px 12px; min-height: 34px; border-radius: var(--r2); border: 1px solid var(--ln); background: var(--card); color: var(--tx); font: 500 12.5px var(--bf); cursor: pointer; white-space: nowrap; }
#vault-import-backdrop .it-btn[hidden] { display: none; }
#vault-import-backdrop :is(.it-btn:not(.is-primary):not(.is-danger), .it-close, .it-mode):hover { border-color: var(--ac); background: color-mix(in oklab, var(--ac) 12%, var(--hov)); }
#vault-import-backdrop .it-btn.is-primary { background: var(--ac); color: var(--ink); border-color: var(--ac); box-shadow: var(--gl); font-weight: 600; }
#vault-import-backdrop .it-btn.is-danger { background: var(--bad); color: var(--bg); border-color: var(--bad); font-weight: 600; }
#vault-import-backdrop .it-btn:disabled { opacity: 0.55; cursor: default; box-shadow: none; }
#vault-import-backdrop .it-file { font: 500 12px var(--mf); color: var(--mu); }
#vault-import-backdrop .it-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
#vault-import-backdrop .it-stat { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border: 1px solid var(--ln); border-radius: var(--r2); background: var(--bg); }
#vault-import-backdrop .it-stat span { font: 500 10px var(--mf); letter-spacing: 0.08em; color: var(--mu); }
#vault-import-backdrop .it-stat strong { font: 600 18px var(--hf); }
#vault-import-backdrop .it-warn { margin: 0; font-size: 12px; color: var(--warn); }
#vault-import-backdrop .it-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
#vault-import-backdrop .it-mode { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border: 1px solid var(--ln); border-radius: var(--r2); background: transparent; color: var(--tx); text-align: left; cursor: pointer; }
#vault-import-backdrop .it-mode strong { font-size: 13px; }
#vault-import-backdrop .it-mode span { font-size: 11.5px; color: var(--mu); line-height: 1.4; }
#vault-import-backdrop .it-mode.is-on { border-color: var(--ac); background: color-mix(in oklab, var(--ac) 10%, transparent); }
#vault-import-backdrop .it-mode[data-restore-mode="replace"].is-on { border-color: var(--bad); background: color-mix(in oklab, var(--bad) 10%, transparent); }
#vault-import-backdrop .it-foot { display: flex; align-items: center; gap: 8px; padding-top: 6px; }
#vault-import-backdrop .it-grow { flex: 1 1 0%; }
#vault-import-backdrop .it-need { font-size: 12px; color: var(--warn); }
#vault-import-backdrop .it-counts { display: flex; gap: 8px; flex-wrap: wrap; }
#vault-import-backdrop .it-count { padding: 4px 9px; border-radius: var(--r2); border: 1px solid var(--ln); font-size: 12px; }
#vault-import-backdrop .it-count strong { font-family: var(--mf); margin-left: 4px; }
#vault-import-backdrop .it-count.is-ok strong { color: var(--ok); }
#vault-import-backdrop .it-count.is-warn strong { color: var(--warn); }
#vault-import-backdrop .it-count.is-bad strong { color: var(--bad); }
#vault-import-backdrop .it-rows { display: flex; flex-direction: column; border: 1px solid var(--ln); border-radius: var(--r2); max-height: 320px; overflow: auto; }
#vault-import-backdrop .it-match { display: grid; grid-template-columns: minmax(0, 1fr) 16px minmax(0, 1.3fr) auto; align-items: center; gap: 8px; padding: 8px 10px; border-top: 1px solid var(--ln); font-size: 12.5px; }
#vault-import-backdrop .it-match:first-child { border-top: 0; }
#vault-import-backdrop .it-source { color: var(--mu); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#vault-import-backdrop .it-arrow { color: var(--di); }
#vault-import-backdrop .it-target { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#vault-import-backdrop .it-target.is-muted { color: var(--di); }
#vault-import-backdrop .it-tag { font: 600 10px var(--mf); letter-spacing: 0.06em; color: var(--mu); }
#vault-import-backdrop .it-tag.is-ok { color: var(--ok); }
#vault-import-backdrop .it-pick { grid-column: 3 / 5; min-height: 32px; padding: 0 8px; border: 1px solid color-mix(in oklab, var(--warn) 55%, var(--ln)); border-radius: var(--r2); background: var(--bg); color: var(--tx); font: 400 12.5px var(--bf); }

@media (max-width: 760px) {
  #vault-import-backdrop .it-row { flex-wrap: wrap; }
  #vault-import-backdrop .it-row .it-btn { width: 100%; }
  #vault-import-backdrop :is(.it-btn, .it-close, .it-mode, .it-pick) { min-height: 44px; }
  #vault-import-backdrop .it-close { width: 44px; }
  #vault-import-backdrop .it-modes { grid-template-columns: minmax(0, 1fr); }
  #vault-import-backdrop .it-match { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  #vault-import-backdrop .it-arrow { display: none; }
  #vault-import-backdrop .it-pick { grid-column: auto; }
}

/* ---------- Blind boxes on the item page (5e) ---------- */
#variant-modal-backdrop .ip-trail { padding: 2px 6px; border: 0; border-radius: var(--r2); background: none; color: var(--ac); font: 500 11px var(--mf); letter-spacing: 0.04em; cursor: pointer; }
#variant-modal-backdrop .ip-trail:hover { background: color-mix(in oklab, var(--ac) 12%, var(--hov)); }
#variant-modal-backdrop .ip-trail[hidden] { display: none; }
#variant-modal-backdrop .ip-box { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
#variant-modal-backdrop .ip-box[hidden] { display: none; }
#variant-modal-backdrop .ip-box-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font: 600 10.5px var(--mf); letter-spacing: 0.12em; color: var(--mu); }
#variant-modal-backdrop .ip-box-count { color: var(--ac); letter-spacing: 0.04em; }
#variant-modal-backdrop .ip-box-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 10px; }
#variant-modal-backdrop .ip-box-tile { display: flex; flex-direction: column; gap: 4px; padding: 8px; border: 1px solid var(--ln); border-radius: var(--r); background: var(--bg); color: var(--tx); text-align: left; cursor: pointer; min-width: 0; }
#variant-modal-backdrop .ip-box-tile:hover:not(:disabled) { border-color: var(--ac); background: color-mix(in oklab, var(--ac) 8%, var(--bg)); }
#variant-modal-backdrop .ip-box-tile.is-owned { border-color: color-mix(in oklab, var(--ok) 55%, var(--ln)); }
#variant-modal-backdrop .ip-box-tile:disabled { cursor: default; opacity: 0.7; }
#variant-modal-backdrop .ip-box-art { display: block; aspect-ratio: 1; border-radius: var(--r2); background: var(--card); overflow: hidden; }
#variant-modal-backdrop .ip-box-art img { width: 100%; height: 100%; object-fit: cover; display: block; filter: none; opacity: 1; }
#variant-modal-backdrop .ip-box-kind { font: 600 9.5px var(--mf); letter-spacing: 0.1em; color: var(--mu); }
#variant-modal-backdrop .ip-box-name { font-size: 12.5px; font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
#variant-modal-backdrop .ip-box-own { font: 700 10px var(--mf); color: var(--ok); }
#variant-modal-backdrop .ip-box-odds { font: 500 10.5px var(--mf); color: var(--mu); }
#variant-modal-backdrop .ip-box-chase { align-self: flex-start; padding: 1px 6px; border-radius: 4px; border: 1px solid var(--rar-gold); color: var(--rar-gold); font: 700 10px var(--mf); }
#variant-modal-backdrop .ip-box-parents { display: flex; flex-direction: column; gap: 6px; }
#variant-modal-backdrop .ip-box-parent { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--ln); border-radius: var(--r2); background: var(--bg); color: var(--tx); text-align: left; cursor: pointer; }
#variant-modal-backdrop .ip-box-parent:hover { border-color: var(--ac); background: color-mix(in oklab, var(--ac) 8%, var(--bg)); }
#variant-modal-backdrop .ip-box-parent-text { flex: 1 1 0%; display: flex; flex-direction: column; gap: 2px; }
#variant-modal-backdrop .ip-box-parent-text strong { font-size: 13px; }
#variant-modal-backdrop .ip-box-parent-text span { font-size: 11.5px; color: var(--mu); }
@media (max-width: 760px) {
  #variant-modal-backdrop .ip-box-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #variant-modal-backdrop :is(.ip-box-parent, .ip-trail) { min-height: 44px; }
}

/* ---------- Password reset (5g) ---------- */
.auth-lead { margin: 0 0 4px; font-size: 13px; line-height: 1.5; color: var(--mu); }
.auth-expiry { align-self: center; padding: 3px 8px; border-radius: var(--r2); border: 1px solid var(--ln); font: 600 10.5px var(--mf); letter-spacing: 0.08em; color: var(--warn); }
.auth-expiry.is-expired { color: var(--bad); border-color: color-mix(in oklab, var(--bad) 45%, var(--ln)); }
.auth-expiry[hidden] { display: none; }

/* ---------- Admin Backups tab (5h) ---------- */
#admin-modal-backdrop .bk-export { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--ln); border-radius: var(--r); background: var(--bg); }
#admin-modal-backdrop .bk-export-text { flex: 1 1 0%; display: flex; flex-direction: column; gap: 3px; }
#admin-modal-backdrop .bk-export-text strong { font-size: 13.5px; color: var(--tx); }
#admin-modal-backdrop .bk-export-text span { font-size: 12px; color: var(--mu); line-height: 1.45; }
#admin-modal-backdrop .bk-head { display: flex; align-items: center; gap: 10px; margin: 18px 0 8px; font: 600 10.5px var(--mf); letter-spacing: 0.12em; color: var(--mu); }
#admin-modal-backdrop .bk-keep { flex: 1 1 0%; letter-spacing: 0.04em; color: var(--di); }
#admin-modal-backdrop .bk-list { display: flex; flex-direction: column; border: 1px solid var(--ln); border-radius: var(--r2); overflow: hidden; }
#admin-modal-backdrop .bk-row { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-top: 1px solid var(--ln); }
#admin-modal-backdrop .bk-row:first-child { border-top: 0; }
#admin-modal-backdrop .bk-key { flex: 1 1 0%; min-width: 0; font: 500 12px var(--mf); color: var(--tx); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#admin-modal-backdrop .bk-size { font: 500 11.5px var(--mf); color: var(--mu); }
#admin-modal-backdrop .bk-btn { padding: 6px 12px; min-height: 32px; border-radius: var(--r2); border: 1px solid var(--ln); background: var(--card); color: var(--tx); font: 500 12px var(--bf); cursor: pointer; white-space: nowrap; letter-spacing: 0; }
#admin-modal-backdrop .bk-btn:hover:not(:disabled) { border-color: var(--ac); background: color-mix(in oklab, var(--ac) 12%, var(--hov)); }
#admin-modal-backdrop .bk-btn.is-primary { background: var(--ac); color: var(--ink); border-color: var(--ac); box-shadow: var(--gl); font-weight: 600; }
#admin-modal-backdrop .bk-btn:disabled { opacity: 0.6; }
#admin-modal-backdrop .bk-note { margin: 12px 0 0; font-size: 11.5px; color: var(--di); }
#admin-modal-backdrop #admin-backups-status { margin-bottom: 8px; font-size: 12px; color: var(--mu); }
@media (max-width: 760px) {
  #admin-modal-backdrop .bk-export { flex-direction: column; align-items: stretch; }
  #admin-modal-backdrop .bk-btn { min-height: 44px; }
}

/* ---------- Image viewer (5i) ---------- */
#image-lightbox-backdrop.iv { position: fixed; inset: 0; z-index: 2000; flex-direction: column; align-items: stretch; justify-content: stretch; padding: 0; background: color-mix(in oklab, var(--dk) 94%, transparent); backdrop-filter: none; color: var(--tx); font-family: var(--bf); }
#image-lightbox-backdrop .iv-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--ln); background: var(--bg); }
#image-lightbox-backdrop .iv-titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#image-lightbox-backdrop .iv-title { font: 600 15px var(--hf); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#image-lightbox-backdrop .iv-counter { font: 500 11px var(--mf); color: var(--mu); letter-spacing: 0.04em; }
#image-lightbox-backdrop .iv-tools { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
#image-lightbox-backdrop .iv-btn { display: inline-grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--ln); border-radius: var(--r2); background: var(--card); color: var(--tx); font-size: 15px; text-decoration: none; cursor: pointer; }
#image-lightbox-backdrop .iv-btn:hover { border-color: var(--ac); background: color-mix(in oklab, var(--ac) 12%, var(--hov)); }
#image-lightbox-backdrop .iv-zoom { min-width: 46px; text-align: center; font: 500 12px var(--mf); color: var(--mu); }
#image-lightbox-backdrop .iv-body { position: relative; width: 100%; max-width: none; margin: 0; flex: 1 1 0%; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 16px 64px; }
#image-lightbox-backdrop .iv-stage { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; }
#image-lightbox-backdrop .iv-stage.is-zoomed { overflow: auto; align-items: flex-start; justify-content: flex-start; }
#image-lightbox-backdrop .iv-stage img { max-width: 100%; max-height: 100%; object-fit: contain; filter: none; opacity: 1; border-radius: var(--r2); cursor: zoom-out; }
#image-lightbox-backdrop .iv-stage.is-zoomed img { margin: auto; cursor: zoom-out; }
#image-lightbox-backdrop .iv-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; align-items: center; justify-content: center; border: 1px solid var(--ln); border-radius: 50%; background: var(--card); color: var(--tx); font-size: 22px; cursor: pointer; z-index: 1; }
#image-lightbox-backdrop .iv-nav:hover { border-color: var(--ac); color: var(--ac); }
#image-lightbox-backdrop .iv-nav.prev { left: 12px; }
#image-lightbox-backdrop .iv-nav.next { right: 12px; }
#image-lightbox-backdrop .iv-thumbs { display: flex; gap: 8px; justify-content: center; padding: 10px 16px 14px; border-top: 1px solid var(--ln); background: var(--bg); overflow-x: auto; }
#image-lightbox-backdrop .iv-thumbs[hidden] { display: none; }
#image-lightbox-backdrop .iv-thumb { flex: 0 0 auto; width: 52px; height: 68px; padding: 0; border: 2px solid transparent; border-radius: var(--r2); background: var(--card); overflow: hidden; cursor: pointer; }
#image-lightbox-backdrop .iv-thumb.is-on { border-color: var(--ac); box-shadow: var(--gl); }
#image-lightbox-backdrop .iv-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; filter: none; opacity: 1; }
@media (max-width: 760px) {
  #image-lightbox-backdrop .iv-head { flex-wrap: wrap; padding: 10px 12px; }
  #image-lightbox-backdrop .iv-btn { width: 44px; height: 44px; }
  #image-lightbox-backdrop .iv-body { padding: 8px; }
  #image-lightbox-backdrop .iv-nav { top: auto; bottom: 12px; transform: none; }
}

/* ==========================================================================
   Mobile (4m, 5j): bottom tab bar, sub-mode chips, Filters sheet,
   item page bottom bar, inventory rows, full-screen theme studio.
   ========================================================================== */
.m-only, .m-tabbar, .m-sheet, .m-sheet-backdrop { display: none !important; }

@media (max-width: 760px) {
  .m-only:not([hidden]) { display: revert !important; }
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }

  /* Bottom tab bar */
  .m-tabbar {
    display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr));
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 950;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    background: var(--bg); border-top: 1px solid var(--ln);
  }
  html:has(#variant-modal-backdrop.open) .m-tabbar,
  html.studio-open .m-tabbar,
  html.m-sheet-open .m-tabbar { display: none !important; }
  .m-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 52px; border: 0; background: none; color: var(--mu); font: 500 11px var(--bf); cursor: pointer; }
  .m-tab-ic { font-size: 17px; line-height: 1; }
  .m-tab.is-on { color: var(--ac); text-shadow: var(--tg); }
  .hud-shell ~ .scroll-top-btn, .scroll-top-btn { bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important; }

  /* Owned progress card */
  .hud-shell .m-progress:not([hidden]) { display: flex !important; align-items: center; gap: 8px; margin: 0 0 10px; padding: 12px 14px; border: 1px solid var(--ln); border-radius: var(--r); background: var(--card); }
  .hud-shell .m-progress-big { font: 600 20px var(--hf); color: var(--ac); text-shadow: var(--tg); }
  .hud-shell .m-progress-of { font-size: 12.5px; color: var(--mu); white-space: nowrap; }
  .hud-shell .m-progress-track { flex: 1 1 0%; height: 5px; border-radius: 3px; background: var(--hov); overflow: hidden; }
  .hud-shell .m-progress-track span { display: block; height: 100%; background: var(--ac); }
  .hud-shell .m-progress-pct { font: 500 11.5px var(--mf); color: var(--mu); }

  /* 5j inventory summary */
  .hud-shell .m-inv-summary:not([hidden]) { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 10px; border: 1px solid var(--ln); border-radius: var(--r); background: var(--card); overflow: hidden; }
  .hud-shell .m-sum { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 9px 4px; border-left: 1px solid var(--ln); }
  .hud-shell .m-sum:first-child { border-left: 0; }
  .hud-shell .m-sum span { font: 500 9.5px var(--mf); letter-spacing: 0.1em; color: var(--mu); }
  .hud-shell .m-sum strong { font: 600 16px var(--hf); color: var(--tx); }

  /* Sub-mode chips */
  .hud-shell .m-chips:not([hidden]) { display: flex !important; gap: 6px; overflow-x: auto; margin: 0 -16px 10px; padding: 0 16px; scrollbar-width: none; }
  .hud-shell .m-chips::-webkit-scrollbar { display: none; }
  .hud-shell .m-chip { flex: 0 0 auto; min-height: 44px; padding: 0 12px; border: 1px solid var(--ln); border-radius: var(--r2); background: var(--card); color: var(--tx); font: 500 13px var(--bf); white-space: nowrap; cursor: pointer; }
  .hud-shell .m-chip-n { font: 500 11px var(--mf); color: var(--mu); }
  .hud-shell .m-chip.is-on { border-color: var(--ac); background: color-mix(in oklab, var(--ac) 14%, transparent); color: var(--ac); }
  .hud-shell .m-chip.is-on .m-chip-n { color: var(--ac); }

  /* Filters button + sort on one row, density below */
  .hud-shell .content-toolbar { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .hud-shell .content-toolbar .select-wrapper { min-width: 0; width: auto !important; max-width: none !important; flex: none !important; }
  .hud-shell .content-toolbar .sort-select { width: 100% !important; max-width: none !important; }
  .hud-shell .telemetry-strip { display: none !important; }
  .hud-shell .content-toolbar .sort-select { width: 100%; min-height: 44px; }
  .hud-shell .content-toolbar .density-toggle { grid-column: 1 / -1; }
  .hud-shell .content-toolbar .density-btn { min-height: 44px; flex: 1 1 0%; }
  .hud-shell .m-filters-btn:not([hidden]) { display: block !important; min-height: 44px; padding: 0 12px; border: 1px solid var(--ln); border-radius: var(--r2); background: var(--card); color: var(--tx); font: 600 13px var(--bf); cursor: pointer; }
  .hud-shell .m-filters-btn.is-on { border-color: var(--ac); color: var(--ac); background: color-mix(in oklab, var(--ac) 10%, var(--card)); }
  .hud-shell .filter-chip, .hud-shell .filter-clear { min-height: 36px; }

  /* Filter sheet */
  .m-sheet-backdrop:not([hidden]) { display: block !important; position: fixed; inset: 0; z-index: 1500; background: color-mix(in oklab, var(--sh) 55%, transparent); }
  .m-sheet:not([hidden]) {
    display: flex !important; flex-direction: column; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1501;
    max-height: 86vh; border-top: 1px solid var(--ln); border-radius: 16px 16px 0 0; background: var(--bg); color: var(--tx); box-shadow: 0 -12px 40px color-mix(in oklab, var(--sh) 60%, transparent);
  }
  .m-sheet-grip { width: 40px; height: 4px; margin: 8px auto 2px; border-radius: 2px; background: var(--ln); }
  .m-sheet-body { flex: 1 1 0%; min-height: 0; overflow: auto; padding: 4px 16px 12px; }
  .m-sheet-body #side-filters { display: flex !important; flex-direction: column; gap: 14px; padding: 0; border: 0; }
  .m-sheet-body .rail-filters-head { position: sticky; top: 0; z-index: 1; padding: 8px 0; background: var(--bg); }
  .m-sheet-body .rail-filters-head .side-label { font: 600 18px var(--hf); letter-spacing: 0; text-transform: none; color: var(--tx); }
  .m-sheet-body :is(.rail-chip, .rail-rarity, .rail-run, .own-seg-btn, .rail-switch, .side-check, .rail-reset) { min-height: 44px; }
  .m-sheet-foot { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--ln); }
  .m-sheet-btn { min-height: 48px; border: 1px solid var(--ln); border-radius: var(--r2); background: var(--card); color: var(--tx); font: 600 14px var(--bf); cursor: pointer; }
  .m-sheet-btn.is-primary { background: var(--ac); border-color: var(--ac); color: var(--ink); box-shadow: var(--gl); }

  /* Item page: Add copy and Wishlist pinned to the bottom */
  #variant-modal-backdrop .ip-window { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); transform: none !important; }
  #variant-modal-backdrop .ip-actions:not(.ip-actions-dark) {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; margin: 0;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: var(--bg); border-top: 1px solid var(--ln);
  }
  #variant-modal-backdrop .ip-actions .modal-action-btn { min-height: 48px; }
  #variant-modal-backdrop :is(.ip-icon-btn, .ip-tab, .ip-dark, .ip-set-seg, .ip-set-group, .ip-set-item) { min-height: 44px; }
  #variant-modal-backdrop .ip-icon-btn { min-width: 44px; }

  /* Set panel collapses to one row */
  #variant-modal-backdrop .ip-set:not(.is-m-open) > :not(.ip-set-head) { display: none; }
  #variant-modal-backdrop .ip-set .ip-set-head { min-height: 52px; align-items: center; cursor: pointer; }
  #variant-modal-backdrop .ip-set .ip-set-head::after { content: "›"; margin-left: 8px; color: var(--ac); font-size: 16px; transition: transform 0.15s; }
  #variant-modal-backdrop .ip-set.is-m-open .ip-set-head::after { transform: rotate(90deg); }

  /* 5j inventory rows */
  .hud-shell .gallery-grid.density-list .ll-head { display: none; }
  .hud-shell .gallery-grid.density-list .ll-row {
    position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "item mine" "rar mine" "stars mine";
    align-items: center; gap: 2px 10px; min-height: 88px; padding: 10px 14px 10px 76px;
  }
  .hud-shell .gallery-grid.density-list .ll-row > :not(.ll-item):not(.ll-rarity):not(.ll-mine):not(.ll-rating) { display: none; }
  .hud-shell .gallery-grid.density-list .ll-item { grid-area: item; min-width: 0; }
  .hud-shell .gallery-grid.density-list .ll-thumb { position: absolute; left: 14px; top: 10px; width: 50px; height: 68px; object-fit: cover; border-radius: var(--r2); }
  .hud-shell .gallery-grid.density-list .ll-title { font-size: 14px; font-weight: 600; white-space: normal; }
  .hud-shell .gallery-grid.density-list .ll-sub .lc-tag { display: none; }
  .hud-shell .gallery-grid.density-list .ll-rarity { grid-area: rar; font-size: 11px; }
  .hud-shell .gallery-grid.density-list .ll-rating { grid-area: stars; }
  .hud-shell .gallery-grid.density-list .ll-rating-grid > :not(.ll-mine-stars) { display: none; }
  .hud-shell .gallery-grid.density-list .ll-btns { display: none; }
  .hud-shell .gallery-grid.density-list .ll-mine { grid-area: mine; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
  .hud-shell .gallery-grid.density-list .ll-mine::after { content: "›"; color: var(--mu); font-size: 16px; }
  .hud-shell .gallery-grid.density-list .ll-qty { font: 700 13px var(--mf); color: var(--ac); }
  html[data-catalog-mode="collection"] .hud-shell .inventory-toolbar { display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; scrollbar-width: none; }
  .hud-shell .inventory-toolbar .vault-mini-stat, .hud-shell .inventory-toolbar .vault-tool-btn { flex: 0 0 auto; min-height: 44px; }
  .hud-shell .inventory-toolbar .vault-tool-row { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 6px; flex: 0 0 auto; margin: 0; }

  /* Theme studio: full screen with a live preview card and big segments */
  .hud-shell .theme-menu.ts { inset: 0; width: 100vw; top: 0; z-index: 3000; }
  .hud-shell .ts .ts-preview { display: flex !important; align-items: center; gap: 12px; margin: 12px 16px 0; padding: 10px 12px; border: 1px solid var(--ln); border-radius: var(--r); background: var(--card); }
  .hud-shell .ts-preview-img { width: 40px; height: 54px; object-fit: cover; border-radius: var(--r2); }
  .hud-shell .ts-preview-text { flex: 1 1 0%; display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--mu); }
  .hud-shell .ts-preview-text strong { font-size: 13.5px; color: var(--tx); }
  .hud-shell .ts-preview-own { padding: 6px 12px; border-radius: var(--r2); background: var(--ac); color: var(--ink); font: 600 12px var(--bf); box-shadow: var(--gl); }
  .hud-shell .ts :is(.ts-btn, .ts-chip, .ts-search, .ts-reset, .ts-done) { min-height: 44px; }
  .hud-shell .ts .theme-seg { display: flex; }
  .hud-shell .ts .theme-seg-btn { flex: 1 1 0%; min-height: 44px; font-size: 13px; }
  .hud-shell .ts .ts-done { flex: 2 1 0%; }
  .hud-shell .theme-menu.ts { overflow-y: auto; }
  .hud-shell .ts .ts-body { flex: none; min-height: 0; overflow: visible; }
  .hud-shell .ts .ts-display { flex: none; overflow: visible; max-height: none; }
  .hud-shell .ts .theme-option { flex-direction: column; align-items: stretch; gap: 6px; }
  .hud-shell .ts .ts-foot { position: sticky; bottom: 0; z-index: 2; margin-top: auto; display: flex; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--bg); border-top: 1px solid var(--ln); }
}

/* ---------- Account linking (5g) ---------- */
.auth-link-card { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--ln); border-radius: var(--r); background: var(--bg); }
.auth-link-badge { flex: 0 0 auto; width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--r2); background: color-mix(in oklab, var(--ac) 16%, transparent); color: var(--ac); font: 700 16px var(--hf); }
.auth-link-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 12.5px; color: var(--mu); }
.auth-link-who > strong { font-size: 13.5px; color: var(--tx); overflow: hidden; text-overflow: ellipsis; }
.auth-link-who span strong { color: var(--tx); }

/* ---------- "Just added" strip (5i): image viewer only ---------- */
#image-lightbox-backdrop .ja { position: relative; flex-shrink: 0; margin: 0; border-width: 1px 0 0; border-radius: 0; border: 1px solid var(--ln); border-radius: var(--r); background: var(--card); overflow: hidden; }
#image-lightbox-backdrop .ja[hidden] { display: none; }
#image-lightbox-backdrop .ja-head { display: flex; align-items: center; gap: 6px; padding: 6px 10px 6px 14px; border-bottom: 1px solid var(--ln); }
#image-lightbox-backdrop .ja-title { font: 600 10px var(--mf); letter-spacing: 0.14em; color: var(--ac); }
#image-lightbox-backdrop .ja-grow { flex: 1 1 0%; }
#image-lightbox-backdrop .ja-arrow { width: 28px; height: 28px; border: 1px solid var(--ln); border-radius: var(--r2); background: transparent; color: var(--mu); font-size: 15px; line-height: 1; cursor: pointer; }
#image-lightbox-backdrop .ja-arrow:hover { border-color: var(--ac); color: var(--tx); background: color-mix(in oklab, var(--ac) 12%, var(--hov)); }
#image-lightbox-backdrop .ja-track { display: flex; gap: 8px; padding: 8px 14px 10px; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; }
#image-lightbox-backdrop .ja-track::-webkit-scrollbar { display: none; }
#image-lightbox-backdrop .ja-item { flex: 0 0 auto; width: 64px; display: flex; flex-direction: column; gap: 5px; padding: 0; border: 0; background: none; color: var(--mu); text-align: left; cursor: pointer; }
#image-lightbox-backdrop .ja-item img { width: 64px; height: 88px; object-fit: cover; border-radius: var(--r2); border: 1px solid var(--ln); filter: none; opacity: 1; display: block; }
#image-lightbox-backdrop .ja-item:hover img, #image-lightbox-backdrop .ja-item:focus-visible img { border-color: var(--ac); box-shadow: var(--gl); }
#image-lightbox-backdrop .ja-id { font: 500 9.5px var(--mf); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 760px) { #image-lightbox-backdrop .ja { display: none !important; } }


/* ---------- Fixes after phase 4 review ---------- */
/* Set panel: expanded groups no longer squeeze the group rows (the list scrolls instead). */
#variant-modal-backdrop :is(.ip-set-list, .ip-set-items) > * { flex-shrink: 0; }

/* The top bar (account menu, theme studio) sits above the item page; full-screen dialogs stay above it. */
.hud-shell .topbar { z-index: 1000; }

/* While the item page is open the catalog behind it does not scroll. */
html:has(#variant-modal-backdrop.open), html:has(#variant-modal-backdrop.open) body { overflow: hidden; }
#variant-modal-backdrop .ip-window { overscroll-behavior: contain; }

/* Pixelation: one stripe layer. Surfaces paint --px themselves, so the old ::after overlays are off. */
html[data-scanlines="on"] .hud-shell :is(.topbar, .app-sidebar, .content-head, .inventory-toolbar, .catalog-sticky, .modal-header-bar, .modal-details-panel, .footer-content)::after { display: none !important; }
html[data-scanlines="on"] .hud-shell :is(.content-head, .inventory-toolbar, .catalog-sticky) { background-image: none !important; }
html[data-scanlines="on"] .hud-shell .topbar { background-color: var(--bg) !important; background-image: var(--px) !important; }

/* Account menu: signed out it is narrow, and empty groups take no space. */
.hud-shell .account-dropdown.am:has(#account-menu-head[hidden]) { width: 220px; }
.hud-shell .am-group:not(:has(> :not([hidden]):not([style*="none"]))) { display: none; }

/* Upcoming Drops: the count line sits below the sticky toolbar instead of under it. */
.hud-shell .dr-summary { margin-top: 4px; }

/* Rail: News and Upcoming Drops sit closer together and to the blocks around them. */
.hud-shell #mode-btn-collection.inv-card { margin: 0; }
.hud-shell .side-launch { margin: 0; }
.hud-shell .side-launch + .side-launch { margin-top: -10px; }
.hud-shell .sidebar-body > .side-label { margin-top: 2px; }
.hud-shell .show-switch[data-rail-ratio] .rail-switch-label { display: block; }

/* Breathing room between the last rail group (Print run, Status...) and the switches at the bottom. */
.hud-shell #show-switches { margin-top: 14px; }
.hud-shell #side-section-collection { display: flex; flex-direction: column; gap: 7px; }
.hud-shell .side-launch .launch-label { font-weight: 600; }

/* The account menu opens above the theme studio. */
.hud-shell .account-menu { z-index: 950; }

/* Games, collectibles and merch fill the same portrait frame as comics and books. */
.hud-shell .lc :is(.lc-cover-game, .lc-cover-merch) .card-img { object-fit: cover !important; object-position: center !important; }

/* Rail: one separator above Filters, and readable section headings. */
.hud-shell .rail-filters-head { border-top: 0 !important; }
.hud-shell .app-sidebar .side-label { font: 600 13px var(--hf); letter-spacing: 0.08em; text-transform: uppercase; color: var(--mu); margin-left: 10px; }
.hud-shell .rail-filters-head .side-label { margin-left: 0; }
.hud-shell .sidebar-body > .side-label { margin: 0; padding: 12px 0 0 10px; border-top: 1px solid var(--ln); }







/* My Inventory stats: only the stat whose filter is on is highlighted. */
.hud-shell .inventory-toolbar .vault-mini-stat.vault-stat-primary:not(.is-on) { color: var(--mu) !important; font-weight: 500; border-color: var(--ln) !important; }
.hud-shell .inventory-toolbar .vault-mini-stat.vault-stat-primary:not(.is-on) .vstat-name { color: var(--mu) !important; font-weight: 500 !important; }
.hud-shell .inventory-toolbar .vault-mini-stat.vault-stat-primary:not(.is-on) .vstat-num { color: var(--tx) !important; }
.hud-shell .inventory-toolbar .vault-mini-stat.is-on { border-color: var(--ac) !important; background: color-mix(in oklab, var(--ac) 14%, var(--card)); color: var(--ac) !important; }
.hud-shell .inventory-toolbar .vault-mini-stat.is-on :is(.vstat-num, .vstat-name) { color: var(--ac) !important; font-weight: 700; }

/* Item page: room between the title and the edition line under it. */
#variant-modal-backdrop .ip-title { margin-bottom: 10px; }
#variant-modal-backdrop .modal-variant-subtitle.ip-subline { margin: 0 0 2px !important; }
#variant-modal-backdrop .ip-subline + .ip-subline { margin-top: 2px; }
.hud-shell .inventory-toolbar .vault-mini-stat:not(.is-on) .vstat-name { color: var(--mu) !important; }

/* Suggest an item: fields that do not apply to the chosen category are hidden. */
#submission-modal .submission-field[hidden], #submission-modal .sub-row-2[hidden], #submission-modal .ie-attr[hidden], #submission-modal .sub-finish[hidden] { display: none !important; }
#submission-modal .sub-row-2.is-single { grid-template-columns: minmax(0, 1fr); }
#submission-modal .submission-field-err:empty { display: none; }

/* Grid view: each card shares its row's tracks (CSS subgrid). A row is as tall as its tallest card needs,
   and the cover, title block, tags, details, facts and buttons line up across the row. */
.hud-shell .gallery-grid.density-standard { align-items: stretch; }
.hud-shell .gallery-grid.density-standard > .lc {
  display: grid !important;
  grid-row: span 6;
  grid-template-rows: subgrid;
  row-gap: 0;
}
.hud-shell .gallery-grid.density-standard > .lc > .lc-body {
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  row-gap: 8px;
  align-content: start;
}
.hud-shell .gallery-grid.density-standard > .lc > .lc-body > * { align-self: start; min-width: 0; }
.hud-shell .gallery-grid.density-standard > .lc > .lc-actions { align-self: end; }