/* ============================================================
   Gachord — custom.css
   Tailwind-complement layer. Tokens, component classes,
   keyframes, and WYSIWYG canvas styles that don't belong
   in utility classes.
   ============================================================ */

:root {
  --bg:          #09090f;
  --s1:          #111118;
  --s2:          #18181f;
  --s3:          #1e1e28;
  --s4:          #252533;
  --bd:          #27273a;
  --bd-hi:       #38385a;
  --acc:         #7c6bf0;
  --acc-hi:      #9080ff;
  --acc-glow:    rgba(124,107,240,.28);
  --acc-subtle:  rgba(124,107,240,.1);
  --txt:         #e4e4f0;
  --txt2:        #8888aa;
  --txt3:        #5c5c80;       /* bumped for WCAG AA */
  --red:         #e05260;
  --red-subtle:  rgba(224,82,96,.12);
  --red-border:  rgba(224,82,96,.28);
  --green:       #4cde82;
  --green-subtle:rgba(76,222,130,.12);
  --green-border:rgba(76,222,130,.28);

  --sidebar-w:      220px;
  --topbar-h:       52px;
  --content-max:    960px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--txt);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  min-height: 100vh;
  background-image:
    radial-gradient(ellipse 60% 40% at 15% -5%, rgba(124,107,240,.07) 0%, transparent 60%),
    radial-gradient(ellipse 50% 30% at 85% 110%, rgba(124,107,240,.05) 0%, transparent 55%);
}

/* Scrollbar */
::-webkit-scrollbar        { width: 6px; height: 6px; }
::-webkit-scrollbar-track  { background: var(--s1); }
::-webkit-scrollbar-thumb  { background: var(--bd-hi); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--acc); }

/* ── Component classes ─────────────────────────────────────── */

.panel {
  background: var(--s1);
  border: 1px solid var(--bd);
  border-radius: 14px;
  padding: 20px;
  transition: border-color .15s;
  animation: fadeUp .2s ease both;
}
.panel:focus-within { border-color: var(--bd-hi); }
.panel + .panel { margin-top: 12px; }

.panel-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--txt3);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.panel-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--bd);
}

/* Inputs */
.inp {
  width: 100%;
  background: var(--s2);
  border: 1px solid var(--bd);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 13px;
  font-family: inherit;
  color: var(--txt);
  transition: border-color .15s, box-shadow .15s;
  outline: none;
}
.inp:focus {
  border-color: var(--acc);
  box-shadow: 0 0 0 3px var(--acc-glow);
  outline: 2px solid transparent;
}
.inp::placeholder { color: var(--txt3); }
select.inp { cursor: pointer; }
textarea.inp { resize: none; }

/* Hide native spin buttons on number inputs */
input.inp[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input.inp[type="number"]::-webkit-outer-spin-button,
input.inp[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.lbl {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--txt3);
  margin-bottom: 6px;
}

.field-hint { font-size: 11px; color: var(--txt3); margin-top: 4px; text-align: right; }

.lbl-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.lbl-row-left { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.lbl-row-left .lbl { display: inline-block; }

/* ── Info tooltip — small hover hint anchored to a discreet ⓘ glyph ───────── */

.info-tip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-left: 4px;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  font-family: ui-serif, Georgia, serif;  /* italic-friendly serif "i" */
  font-style: italic;
  color: var(--txt3);
  background: var(--s3);
  border: 1px solid var(--bd);
  cursor: help;
  vertical-align: middle;
  transition: color .15s, border-color .15s, background .15s;
  user-select: none;
}
.info-tip::after { content: 'i'; transform: translateY(-.5px); }
.info-tip:hover,
.info-tip:focus-visible {
  color: var(--acc-hi);
  border-color: var(--acc);
  background: var(--acc-subtle);
  outline: none;
}

.info-tip__bubble {
  position: absolute;
  bottom: calc(100% + 9px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: max-content;
  max-width: 240px;
  padding: 8px 10px;
  background: var(--s1);
  border: 1px solid var(--bd-hi);
  border-radius: 8px;
  font-family: 'Inter', system-ui, sans-serif;
  font-style: normal;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0;
  color: var(--txt);
  text-align: left;
  text-transform: none;
  pointer-events: none;
  opacity: 0;
  z-index: 30;
  box-shadow:
    0 8px 24px rgba(0, 0, 0, .6),
    0 0 0 1px rgba(0, 0, 0, .25);
  transition: opacity .14s ease, transform .14s ease;
}
.info-tip__bubble strong {
  color: var(--acc-hi);
  font-weight: 700;
}
.info-tip__bubble::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--bd-hi);
}
.info-tip__bubble::before {
  content: '';
  position: absolute;
  top: calc(100% - 1px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--s1);
  z-index: 1;
}

.info-tip:hover .info-tip__bubble,
.info-tip:focus .info-tip__bubble,
.info-tip:focus-visible .info-tip__bubble {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* When the bubble would clip on the left edge, opt-in via .info-tip--right
   to anchor it from the icon's left side instead of centred. */
.info-tip--right .info-tip__bubble {
  left: 0;
  transform: translateX(0) translateY(4px);
}
.info-tip--right .info-tip__bubble::after,
.info-tip--right .info-tip__bubble::before {
  left: 6px;
  transform: translateX(0);
}
.info-tip--right:hover .info-tip__bubble,
.info-tip--right:focus .info-tip__bubble,
.info-tip--right:focus-visible .info-tip__bubble {
  transform: translateX(0) translateY(0);
}

/* ── Pity switch — hardware-style toggle for premium pity controls ────────── */

.pity-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.pity-switch input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: inherit;
}

.pity-switch__track {
  position: relative;
  width: 32px;
  height: 18px;
  flex-shrink: 0;
  background: var(--s3);
  border: 1px solid var(--bd);
  border-radius: 5px;
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, .55),
    inset 0 0 0 1px rgba(0, 0, 0, .15);
  transition:
    background .22s ease,
    border-color .18s ease,
    box-shadow .22s ease;
}

.pity-switch__knob {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: linear-gradient(180deg, #a8a8c0 0%, #7a7a96 100%);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, .6),
    inset 0 1px 0 rgba(255, 255, 255, .35),
    inset 0 -1px 0 rgba(0, 0, 0, .25);
  transition:
    transform .26s cubic-bezier(.4, 1.55, .55, 1),
    background .22s ease,
    box-shadow .22s ease;
}
/* Subtle ridges on the knob — micro-detail for the "studio gear" feel. */
.pity-switch__knob::before {
  content: '';
  position: absolute;
  inset: 3px 4px;
  background: repeating-linear-gradient(
    180deg,
    rgba(0, 0, 0, .15) 0 1px,
    transparent 1px 3px
  );
  border-radius: 1px;
  opacity: .5;
}

.pity-switch__label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--txt3);
  font-feature-settings: "tnum";
  width: 22px;
  text-align: left;
  transition: color .18s ease, text-shadow .18s ease;
}
.pity-switch__label::before { content: 'off'; }

/* ── ON state ──────────────────────────────────────────────────────────────── */

.pity-switch input:checked + .pity-switch__track {
  background: linear-gradient(180deg, #6c5ce7 0%, #5343c4 100%);
  border-color: var(--acc-hi);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, .25),
    inset 0 -1px 1px rgba(0, 0, 0, .25),
    0 0 0 3px var(--acc-glow);
}
.pity-switch input:checked + .pity-switch__track .pity-switch__knob {
  transform: translateX(14px);
  background: linear-gradient(180deg, #ffffff 0%, #d8d4f0 100%);
  box-shadow:
    0 1px 3px rgba(0, 0, 0, .7),
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(124, 107, 240, .25);
}
.pity-switch input:checked ~ .pity-switch__label {
  color: var(--acc-hi);
  text-shadow: 0 0 8px rgba(124, 107, 240, .55);
}
.pity-switch input:checked ~ .pity-switch__label::before { content: 'on'; }

/* ── Hover / focus ─────────────────────────────────────────────────────────── */

.pity-switch:hover:not(:has(input:disabled)) .pity-switch__track {
  border-color: var(--bd-hi);
}
.pity-switch:hover:not(:has(input:disabled)) input:checked + .pity-switch__track {
  filter: brightness(1.08);
}
.pity-switch input:focus-visible + .pity-switch__track {
  outline: 2px solid var(--acc);
  outline-offset: 3px;
}

/* ── Disabled (free guild) — sealed behind diagonal stripes ───────────────── */

.pity-switch:has(input:disabled) {
  cursor: not-allowed;
}
.pity-switch:has(input:disabled) .pity-switch__track {
  background: repeating-linear-gradient(
    -45deg,
    var(--s3) 0 4px,
    var(--s2) 4px 8px
  );
  border-color: var(--bd);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .4);
  opacity: .5;
}
.pity-switch:has(input:disabled) .pity-switch__knob {
  background: linear-gradient(180deg, #4a4a5a 0%, #353545 100%);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .4);
}
.pity-switch:has(input:disabled) .pity-switch__label {
  color: var(--txt3);
  opacity: .5;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all .15s;
  border: none;
  outline: none;
  white-space: nowrap;
  letter-spacing: -.1px;
}
.btn:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }

.btn-primary {
  background: linear-gradient(135deg, #6c5ce7, #8878ff);
  color: #fff;
  box-shadow: 0 2px 12px var(--acc-glow);
  position: relative;
  overflow: hidden;
}
.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.12) 50%, transparent 60%);
  transform: translateX(-100%);
  transition: transform .4s;
}
.btn-primary:hover::after { transform: translateX(100%); }
.btn-primary:hover { filter: brightness(1.12); box-shadow: 0 4px 20px rgba(124,107,240,.45); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); filter: brightness(1); }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.btn-ghost {
  background: transparent;
  color: var(--txt2);
  border: 1px solid var(--bd);
}
.btn-ghost:hover { background: var(--s3); border-color: var(--bd-hi); color: var(--txt); }
.btn-ghost:disabled,
.btn-ghost:disabled:hover { opacity: .45; cursor: not-allowed; background: transparent; color: var(--txt3); border-color: var(--bd); }

.btn-danger {
  background: var(--red-subtle);
  color: var(--red);
  border: 1px solid var(--red-border);
}
.btn-danger:hover { background: rgba(224,82,96,.2); border-color: rgba(224,82,96,.45); }

.btn-sm  { padding: 5px 12px; font-size: 12px; border-radius: 6px; }
.btn-xs  { padding: 3px 9px;  font-size: 11px; border-radius: 5px; }
.btn-icon { padding: 6px; }

.reset-btn {
  background: none;
  border: none;
  font-family: inherit;
  font-size: 11px;
  color: var(--txt3);
  cursor: pointer;
  padding: 3px 4px;
  border-radius: 4px;
  transition: color .1s;
  margin-top: 4px;
}
.reset-btn:hover { color: var(--txt2); }

/* Toggle */
.toggle-label { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; user-select: none; font-size: 12px; }
.toggle-label span { color: var(--txt3); transition: color .15s; }
.toggle-label:has(input:checked) span { color: var(--red); }
.toggle-wrap { position: relative; display: inline-flex; align-items: center; }
.toggle-wrap input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle-track {
  width: 34px; height: 18px;
  background: var(--s4);
  border: 1px solid var(--bd);
  border-radius: 9px;
  transition: background .15s, border-color .15s;
  position: relative;
}
.toggle-wrap input:checked ~ .toggle-track { background: var(--red); border-color: var(--red-border); }
.toggle-thumb {
  position: absolute;
  top: 2px; left: 2px;
  width: 12px; height: 12px;
  background: white;
  border-radius: 50%;
  transition: transform .15s;
  box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.toggle-wrap input:checked ~ .toggle-track .toggle-thumb { transform: translateX(16px); }

/* Toast */
#toast {
  position: fixed;
  top: 20px; right: 20px;
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
  transform: translateY(-6px);
  backdrop-filter: blur(12px);
}
#toast.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
#toast.ok   { background: var(--green-subtle); border: 1px solid var(--green-border); color: var(--green); box-shadow: 0 4px 20px rgba(76,222,130,.15); }
#toast.warn { background: rgba(243,156,18,.10); border: 1px solid rgba(243,156,18,.42); color: #f39c12; box-shadow: 0 4px 20px rgba(243,156,18,.18); }
#toast.err  { background: var(--red-subtle);   border: 1px solid var(--red-border);   color: var(--red);   box-shadow: 0 4px 20px rgba(224,82,96,.15); }

/* Drop zone */
.drop-zone {
  border: 1.5px dashed var(--bd-hi);
  border-radius: 8px;
  padding: 12px 16px;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  color: var(--txt3);
  font-size: 12px;
  user-select: none;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
}
.drop-zone:hover  { border-color: var(--acc); background: var(--acc-subtle); color: var(--txt2); }
.drop-zone.drag-over { border-color: var(--acc); background: var(--acc-subtle); color: var(--txt2); }

/* Card tile */
.card-tile {
  background: var(--s1);
  border: 1px solid var(--bd);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color .15s, box-shadow .2s, transform .15s;
}
.card-tile:hover {
  border-color: color-mix(in srgb, var(--tile-rarity, var(--bd-hi)) 55%, var(--bd-hi));
  box-shadow:
    0 10px 32px rgba(0,0,0,.5),
    0 0 0 1px color-mix(in srgb, var(--tile-rarity, transparent) 35%, transparent),
    0 0 36px -10px color-mix(in srgb, var(--tile-rarity, transparent) 70%, transparent);
  transform: translateY(-3px);
}
.card-tile img { width: 100%; object-fit: cover; display: block; }
.card-tile-no-preview {
  background: var(--s3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--txt3);
  font-size: 11px;
  text-align: center;
  padding: 8px;
  aspect-ratio: 180 / 305;
  width: 100%;
  position: relative;
  overflow: hidden;
}
.card-tile-no-preview::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.04), transparent);
  animation: shimmer 1.6s infinite;
}
.card-tile-actions {
  display: flex;
  border-top: 1px solid var(--bd);
  opacity: 0;
  transform: translateY(2px);
  transition: opacity .15s ease, transform .15s ease;
}
.card-tile:hover .card-tile-actions,
.card-tile:focus-within .card-tile-actions {
  opacity: 1;
  transform: translateY(0);
}
@media (hover: none) {
  .card-tile-actions { opacity: 1; transform: none; }
}
.card-tile-actions button {
  flex: 1;
  padding: 8px;
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  background: none;
  border: none;
  transition: background .12s, color .12s;
}
.card-tile-actions button:first-child { color: #a5b4fc; border-radius: 0 0 0 11px; }
.card-tile-actions button:first-child:hover { background: rgba(124,107,240,.12); }
.card-tile-actions button:last-child { color: var(--red); border-left: 1px solid var(--bd); border-radius: 0 0 11px 0; }
.card-tile-actions button:last-child:hover { background: var(--red-subtle); }

/* Card grid */
.cards-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 480px) { .cards-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .cards-grid { grid-template-columns: repeat(4, 1fr); } }

/* Category + pool section shared chrome */
.cat-header, .pool-sec-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--s2);
  border: 1px solid var(--bd);
  border-radius: 10px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.cat-header:hover, .pool-sec-header:hover { background: var(--s3); border-color: var(--bd-hi); }
.pool-sec-header { flex-wrap: wrap; margin-bottom: 6px; }

.cat-chevron {
  background: none;
  border: none;
  color: var(--txt3);
  cursor: pointer;
  padding: 2px;
  font-size: 16px;
  line-height: 1;
  transition: color .1s;
  display: flex;
  align-items: center;
}
.cat-chevron:hover { color: var(--txt2); }
.cat-chevron span { display: inline-block; transition: transform .15s ease; }
.cat-title { font-size: 13px; font-weight: 600; color: var(--txt); flex: 1; }
.cat-count { font-size: 12px; font-weight: 400; color: var(--txt3); margin-left: 4px; }

.pool-sec-title {
  font-size: 13px;
  font-weight: 600;
  flex: 1;
  min-width: 80px;
}
.pool-sec-title { color: var(--txt); }
.pool-sec-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* Pool entries */
.pool-entry {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border-radius: 8px;
  background: var(--s1);
  border: 1px solid var(--bd);
  border-left-width: 3px;
  margin-bottom: 3px;
  transition: background .1s;
}
.pool-entry:hover { background: var(--s2); }
.pool-entry.bl { opacity: .45; }
.pool-entry.pe { opacity: .7; }
.pool-entry.locked .pool-entry-name { color: var(--txt3); }
.pool-entry.locked .pool-status-sel { opacity: .55; }
.pool-entry-locked { flex-shrink: 0; }
.pool-entry-name { font-size: 13px; color: var(--txt); flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pool-rarity-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.pool-edit-btn {
  flex-shrink: 0;
  opacity: 0;
  transition: opacity .15s;
  font-size: 13px;
  padding: 2px 5px;
}
.pool-entry:hover .pool-edit-btn { opacity: 1; }
.pool-status-sel {
  font-size: 11px;
  font-family: inherit;
  background: var(--s3);
  border: 1px solid var(--bd);
  border-radius: 5px;
  color: var(--txt);
  cursor: pointer;
  padding: 3px 6px;
  flex-shrink: 0;
  outline: none;
}
.pool-filter {
  font-size: 12px;
  background: var(--s3);
  border: 1px solid var(--bd);
  border-radius: 6px;
  padding: 4px 8px;
  color: var(--txt);
  font-family: inherit;
  outline: none;
  width: 100px;
  transition: border-color .12s;
}
.pool-filter:focus { border-color: var(--acc); }
.pool-filter::placeholder { color: var(--txt3); }

/* Rarity colors */
.rarity-common    { color: #95A5A6; }
.rarity-uncommon  { color: #2ECC71; }
.rarity-rare      { color: #3498DB; }
.rarity-epic      { color: #9B59B6; }
.rarity-legendary { color: #F1C40F; }
.rarity-mythic    { color: #E74C3C; }

/* Empty state */
.empty-state {
  padding: 48px 20px;
  text-align: center;
  color: var(--txt3);
  font-size: 13px;
  line-height: 1.7;
}

/* ── Sidebar navigation ────────────────────────────────────── */

.app-shell {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: var(--sidebar-w);
  background: var(--s1);
  border-right: 1px solid var(--bd);
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  flex-shrink: 0;
  z-index: 30;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 10px 12px;
  border-bottom: 1px solid var(--bd);
  margin-bottom: 6px;
}
.sidebar-brand-icon {
  width: 36px; height: 36px;
  object-fit: contain;
  filter: drop-shadow(0 3px 12px var(--acc-glow));
  flex-shrink: 0;
}
.sidebar-brand-text { min-width: 0; overflow: hidden; }
.sidebar-brand-title { font-size: 14px; font-weight: 700; letter-spacing: -.2px; color: var(--txt); }
.sidebar-brand-sub   { font-size: 10px; color: var(--txt3); font-family: monospace;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px; }

.nav-group-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--txt3);
  padding: 12px 10px 4px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--txt2);
  font-size: 13px;
  font-weight: 500;
  background: none;
  border: none;
  font-family: inherit;
  text-align: left;
  width: 100%;
  transition: background .12s, color .12s;
}
.nav-item:hover { background: var(--s3); color: var(--txt); }
.nav-item.active {
  background: var(--acc-subtle);
  color: var(--acc-hi);
  box-shadow: inset 0 0 0 1px rgba(124,107,240,.25);
}
.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
.nav-item-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Sidebar notification badge (e.g. unread support tickets). */
.nav-badge {
  flex-shrink: 0;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--danger, #ff5566);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .25);
}
.nav-badge[hidden] { display: none; }

/* Subtle "unread" left-rail accent on support ticket list cards. */
.support-ticket-card {
  position: relative;
  display: block;
  transition: border-color .12s, transform .12s;
}
.support-ticket-card.unread {
  border-left: 3px solid var(--acc);
  padding-left: 9px;
}
.support-ticket-card.resolved { opacity: .65; }

/* Inline conversation preview embedded in each ticket card. */
.support-ticket-card-preview {
  margin-top: 10px;
  border: 1px solid var(--bd);
  border-radius: 6px;
  background: rgba(0,0,0,.18);
  padding: 10px 12px;
}
.support-ticket-card-msg {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 8px;
  font-size: 12.5px;
  line-height: 1.5;
}
.support-ticket-card-msg + .support-ticket-card-msg {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--bd);
}
.support-ticket-card-msg-arrow {
  color: var(--txt3);
  font-size: 11px;
  line-height: 1.7;
  font-weight: 700;
}
.support-ticket-card-msg-arrow.from-admin { color: var(--acc); }
.support-ticket-card-msg-arrow.from-owner { color: var(--warn); }

.support-ticket-card-msg-meta {
  font-size: 10.5px;
  color: var(--txt3);
  letter-spacing: .04em;
  margin-bottom: 2px;
}
.support-ticket-card-msg-meta .who {
  color: var(--txt2);
  font-weight: 600;
  margin-right: 6px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.support-ticket-card-msg-body {
  color: var(--txt);
  white-space: pre-wrap;
  word-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.support-ticket-card-msg-empty {
  color: var(--txt3);
  font-style: italic;
  font-size: 11.5px;
}

.support-ticket-card .open-thread-hint {
  margin-top: 8px;
  text-align: right;
  font-size: 11px;
  color: var(--txt3);
  opacity: 0;
  transition: opacity .14s;
  letter-spacing: .04em;
}
.support-ticket-card:hover .open-thread-hint { opacity: 1; }
.support-ticket-card:hover { transform: translateY(-1px); }

.nav-divider {
  height: 1px;
  background: var(--bd);
  margin: 10px 10px 6px;
}

.sidebar-footer {
  margin-top: auto;
  padding: 10px 10px 2px;
  border-top: 1px solid var(--bd);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.sidebar-version {
  font-size: 10px;
  color: var(--txt3);
  font-family: monospace;
}

/* Top bar (mobile) */
.topbar {
  display: none;
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  height: var(--topbar-h);
  background: rgba(17,17,24,.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--bd);
  align-items: center;
  padding: 0 12px;
  gap: 12px;
  z-index: 35;
}
.topbar-hamburger {
  width: 40px; height: 40px;
  background: var(--s3);
  border: 1px solid var(--bd);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--txt);
  transition: background .12s, border-color .12s;
}
.topbar-hamburger:hover { background: var(--s4); border-color: var(--bd-hi); }
.topbar-brand { display: flex; align-items: center; gap: 8px; min-width: 0; }
.topbar-brand-icon {
  width: 28px; height: 28px;
  object-fit: contain;
  flex-shrink: 0;
}
.topbar-title { font-size: 14px; font-weight: 700; color: var(--txt); }
.topbar-section { font-size: 12px; color: var(--txt3); margin-left: auto; }

/* Main content */
.app-main {
  flex: 1;
  min-width: 0;
  padding: 28px clamp(16px, 4vw, 40px) 80px;
}
.app-container {
  max-width: var(--content-max);
  margin: 0 auto;
  width: 100%;
}
.section-head {
  margin-bottom: 24px;
}
.section-head h1 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.3px;
  color: var(--txt);
  margin: 0 0 4px;
}
.section-head p {
  font-size: 13px;
  color: var(--txt3);
  margin: 0;
  line-height: 1.6;
}

/* Settings grid */
.settings-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.settings-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (max-width: 1100px) { .settings-grid-3 { grid-template-columns: repeat(2, 1fr); } }

/* ── Rarity weights panel — editorial console ───────────
   Mirrors the landing's #rarities .controls aesthetic:
   color-stripe top, mono numerals, divider grid.
   The distribution bar above the grid stays as the live viz. */

.rw-stack { display: flex; flex-direction: column; gap: 18px; }

.rw-bar-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--txt3);
}
.rw-bar-head .rw-bar-tag { color: var(--txt2); }

.rarity-bar {
  display: flex;
  height: 14px;
  border-radius: 999px;
  overflow: hidden;
  background:
    repeating-linear-gradient(45deg,
      rgba(255,255,255,.02) 0 6px,
      transparent 6px 12px),
    var(--s3);
  border: 1px solid var(--bd);
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,.5),
    0 0 0 4px rgba(124,107,240,0);
  transition: box-shadow .35s;
}
.rw-stack:focus-within .rarity-bar {
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,.5),
    0 0 0 4px var(--acc-subtle);
}
.rarity-bar-seg {
  height: 100%;
  transition: width .35s cubic-bezier(.2,.8,.2,1), filter .2s;
  min-width: 0;
  position: relative;
}
.rarity-bar-seg + .rarity-bar-seg { box-shadow: -1px 0 0 rgba(0,0,0,.35); }

/* Drag handles sitting on segment seams — redistribute weight between
   two adjacent rarities, total stays invariant. */
.rw-bar-stage {
  position: relative;
  margin-top: 8px;
  padding-block: 6px;
}
.rw-handles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.rw-handle {
  position: absolute;
  top: 50%;
  left: 0;
  width: 22px;
  height: 26px;
  padding: 0;
  background: transparent;
  border: 0;
  transform: translate(-50%, -50%);
  cursor: ew-resize;
  pointer-events: auto;
  transition: left .35s cubic-bezier(.2,.8,.2,1);
  display: flex;
  align-items: center;
  justify-content: center;
  outline: 0;
}
.rw-handle::before {
  content: '';
  width: 4px;
  height: 22px;
  border-radius: 2px;
  background: linear-gradient(180deg, #d8d8e8, #8e8eb0);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.55),
    0 2px 6px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.3);
  transition: transform .15s cubic-bezier(.2,.8,.2,1), box-shadow .2s, background .2s;
}
.rw-handle:hover::before {
  transform: scaleY(1.1);
  background: linear-gradient(180deg, #ffffff, #b0b0d8);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.6),
    0 0 14px var(--acc-glow),
    0 3px 10px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.4);
}
.rw-handle.is-active { transition: none; z-index: 2; }
.rw-handle.is-active::before {
  transform: scaleY(1.18);
  background: linear-gradient(180deg, #ffffff, var(--acc-hi));
  box-shadow:
    0 0 0 1px rgba(0,0,0,.65),
    0 0 18px var(--acc),
    0 4px 14px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.5);
}
.rw-handle:disabled,
.rw-handle[disabled] {
  cursor: not-allowed;
  opacity: .4;
}
.rw-handle:disabled:hover::before {
  transform: none;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.55),
    0 2px 6px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.3);
}

.rw-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1px;
  background: var(--bd);
  border: 1px solid var(--bd);
  border-radius: 12px;
  overflow: hidden;
}
@media (max-width: 1100px) { .rw-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .rw-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px)  { .rw-grid { grid-template-columns: 1fr; } }

.rw-cell {
  display: block;
  position: relative;
  padding: 18px 18px 14px;
  background: var(--s2);
  cursor: text;
  transition: background .2s;
  margin: 0;
}
.rw-cell:hover, .rw-cell:focus-within { background: var(--s3); }
.rw-cell::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--c, var(--acc));
  box-shadow: 0 0 12px var(--c, var(--acc));
  opacity: .85;
  transition: height .15s, box-shadow .2s, opacity .15s;
}
.rw-cell:focus-within::before {
  height: 3px;
  opacity: 1;
  box-shadow: 0 0 16px var(--c, var(--acc)), 0 0 32px var(--c, var(--acc));
}
.rw-cell:has(input:disabled),
.rw-cell.is-disabled {
  cursor: not-allowed;
  opacity: .55;
}
.rw-cell:has(input:disabled)::before,
.rw-cell.is-disabled::before { opacity: .3; box-shadow: none; }

.rw-name {
  display: block;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--txt2);
  margin-bottom: 10px;
  white-space: nowrap;
}
.rw-input {
  width: 100%;
  background: transparent;
  border: 0;
  padding: 0;
  outline: 0;
  color: var(--c, var(--acc-hi));
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 500;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
  appearance: textfield;
  cursor: text;
}
.rw-input::-webkit-outer-spin-button,
.rw-input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.rw-input:focus { color: #fff; }
.rw-input:disabled { color: var(--txt3); cursor: not-allowed; }

.rw-pct {
  display: block;
  margin-top: 6px;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--txt3);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

.rw-foot {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--bd);
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--txt3);
}
.rw-foot-sum { display: inline-flex; align-items: baseline; gap: 8px; }
.rw-foot-sum b {
  color: var(--acc-hi);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
.rw-foot .reset-btn { margin: 0; }

@media (max-width: 599px) {
  .settings-grid-3 { grid-template-columns: 1fr; }
  .settings-grid-2 { grid-template-columns: 1fr; }
  .settings-grid-rarity { grid-template-columns: 1fr; }
}
.input-row { display: flex; gap: 8px; align-items: center; }
@media (max-width: 479px) {
  .input-row { flex-wrap: wrap; }
  .input-row .inp { flex: 1 1 100%; }
}

/* Autosave status chip */
.autosave-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--s3);
  border: 1px solid var(--bd);
  border-radius: 999px;
  font-size: 11px;
  color: var(--txt3);
  transition: opacity .3s, color .15s;
}
.autosave-chip.saving { color: var(--acc-hi); border-color: rgba(124,107,240,.4); }
.autosave-chip.saved  { color: var(--green);  border-color: var(--green-border); }
.autosave-chip.error  { color: var(--red);    border-color: var(--red-border); }
.autosave-chip.idle   { opacity: .4; }
.autosave-chip::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* ── Card drawer (centred modal) ──────────────────────────── */

#card-drawer {
  position: fixed;
  top: 50%;
  left: 50%;
  width: calc(100% - 32px);
  max-width: 880px;
  max-height: 92vh;
  background:
    radial-gradient(120% 100% at 100% 0%, color-mix(in srgb, var(--preview-tint, var(--acc)) 8%, transparent), transparent 50%),
    var(--s1);
  border: 1px solid var(--bd);
  border-radius: 16px;
  box-shadow: 0 24px 80px rgba(0,0,0,.8);
  z-index: 50;
  display: flex;
  flex-direction: column;
  transform: translateX(-50%) translateY(-48%) scale(.97);
  opacity: 0;
  pointer-events: none;
  transition: transform .25s cubic-bezier(.4,0,.2,1), opacity .2s ease, background .4s ease;
}
#card-drawer.drawer-open {
  transform: translateX(-50%) translateY(-50%) scale(1);
  opacity: 1;
  pointer-events: auto;
}

#drawer-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(4px);
  z-index: 40;
}
#drawer-backdrop.show { display: block; }

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--bd);
  flex-shrink: 0;
}
.drawer-title { font-size: 15px; font-weight: 600; color: var(--txt); }
.drawer-close {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: none;
  border: none;
  color: var(--txt3);
  font-size: 22px;
  cursor: pointer;
  border-radius: 6px;
  transition: background .1s, color .1s;
  line-height: 1;
}
.drawer-close:hover { background: var(--s3); color: var(--txt); }

.drawer-body { flex: 1; overflow-y: auto; padding: 20px; }

.drawer-preview-img {
  width: 100%;
  height: auto;
  max-height: 260px;
  object-fit: contain;
  border-radius: 8px;
  display: block;
  border: 1px solid var(--bd);
  background: var(--s3);
}
.drawer-preview-ph {
  width: 100%;
  height: 200px;
  background: var(--s3);
  border: 1px solid var(--bd);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--txt3);
  font-size: 11px;
  text-align: center;
  padding: 10px;
  position: relative;
  overflow: hidden;
}
.drawer-preview-ph::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.04), transparent);
  animation: shimmer 1.6s infinite;
}

.drawer-footer {
  display: flex;
  gap: 8px;
  padding: 16px 20px;
  border-top: 1px solid var(--bd);
  flex-shrink: 0;
}

/* Type dropdown */
.category-dropdown {
  position: absolute;
  top: 100%; left: 0; right: 0;
  z-index: 60;
  background: var(--s1);
  border: 1px solid var(--bd);
  border-radius: 8px;
  margin-top: 4px;
  max-height: 160px;
  overflow-y: auto;
  box-shadow: 0 10px 30px rgba(0,0,0,.7);
}
.category-option {
  padding: 8px 12px;
  font-size: 12px;
  cursor: pointer;
  color: var(--txt2);
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background .1s;
}
.category-option:hover, .category-option.ac-active { background: var(--s3); color: var(--txt); }

/* ── Modal ─────────────────────────────────────────────────── */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(6px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: fadeIn .15s ease both;
}
.modal-box {
  background: var(--s1);
  border: 1px solid var(--bd);
  border-radius: 14px;
  padding: 22px;
  max-width: 380px;
  width: 100%;
  box-shadow: 0 24px 64px rgba(0,0,0,.7);
  animation: popIn .18s cubic-bezier(.4,0,.2,1) both;
}
.modal-box h3 { font-size: 16px; font-weight: 700; color: var(--txt); margin: 0 0 8px; }
.modal-box p  { font-size: 13px; color: var(--txt2); margin: 0 0 16px; line-height: 1.6; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

/* ── Layout-reset source picker ────────────────────────────────
   Single-select picker opened by the Reset action in the layout
   identity card. Rows behave like radio inputs; the active row
   is committed by Enter / OK / dblclick. */
.layout-reset-picker {
  max-width: 480px;
  width: 100%;
  padding: 0;
  display: flex;
  flex-direction: column;
  max-height: min(80vh, 640px);
}
.lrp-head {
  padding: 20px 22px 14px;
  border-bottom: 1px dashed var(--bd);
}
.lrp-head h3 { font-size: 15px; font-weight: 700; margin: 0 0 6px; color: var(--txt); }
.lrp-sub {
  font-size: 12px;
  color: var(--txt3);
  margin: 0;
  line-height: 1.55;
}
.lrp-sub strong { color: var(--txt2); font-weight: 600; }

.lrp-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
}
.lrp-row {
  display: grid;
  grid-template-columns: 18px 28px 1fr;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--txt);
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: background 120ms ease, border-color 120ms ease;
}
.lrp-row:hover {
  background: var(--s2);
  border-color: var(--bd);
}
.lrp-row.is-active {
  background: var(--acc-subtle);
  border-color: var(--acc);
}
.lrp-row:focus-visible { outline: none; }
.lrp-row-radio {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 2px solid var(--bd-hi);
  background: transparent;
  position: relative;
  flex-shrink: 0;
  transition: border-color 120ms ease;
}
.lrp-row.is-active .lrp-row-radio { border-color: var(--acc); }
.lrp-row.is-active .lrp-row-radio::after {
  content: '';
  position: absolute;
  inset: 2px;
  background: var(--acc);
  border-radius: 999px;
  box-shadow: 0 0 6px var(--acc-glow);
}
.lrp-row-icon {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  background: var(--s2);
  border-radius: 8px;
  border: 1px solid var(--bd);
  flex-shrink: 0;
}
.lrp-row.is-active .lrp-row-icon {
  background: var(--s1);
  border-color: var(--acc);
}
.lrp-row-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.lrp-row-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--txt);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lrp-row-hint {
  font-size: 11px;
  color: var(--txt3);
  line-height: 1.4;
}
.lrp-row-hint.is-warn { color: #d6a23c; }

/* Toggle row between the source list and the action footer.
   When `.is-disabled`, the row is dimmed and the checkbox is non-interactive
   (used for the guild-default-target case where we don't mirror assets). */
.lrp-toggle {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 14px 4px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--bd);
  background: var(--s2);
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
  user-select: none;
}
.lrp-toggle:hover:not(.is-disabled) {
  border-color: var(--bd-hi);
  background: rgba(255, 255, 255, .02);
}
.lrp-toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
  accent-color: var(--acc);
  cursor: pointer;
  flex-shrink: 0;
}
.lrp-toggle-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.lrp-toggle-text strong {
  font-size: 12px;
  font-weight: 600;
  color: var(--txt);
}
.lrp-toggle-hint {
  font-size: 11px;
  color: var(--txt3);
  line-height: 1.4;
}
.lrp-toggle.is-disabled {
  opacity: .55;
  cursor: not-allowed;
}
.lrp-toggle.is-disabled input { cursor: not-allowed; }

.lrp-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 22px 20px;
  border-top: 1px dashed var(--bd);
}

/* ── Layout editor / WYSIWYG ───────────────────────────────── */

.ly-editor-layout { display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 900px) { .ly-editor-layout { flex-direction: row; align-items: flex-start; gap: 20px; } }
.ly-stage-col { flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; width: 360px; max-width: 100%; }
.ly-preview-controls { width: 100%; }
@media (max-width: 899px) {
  .ly-stage-col { width: min(360px, calc(100vw - 64px)); }
  #ly-stage { width: 100% !important; height: auto !important; aspect-ratio: 360/610; overflow: hidden; }
}

.seg-ctrl {
  display: inline-flex;
  background: var(--s3);
  border: 1px solid var(--bd);
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
  flex-wrap: wrap;
}
.seg-ctrl label {
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  color: var(--txt2);
  transition: background .12s, color .12s;
  user-select: none;
}
.seg-ctrl label:hover { color: var(--txt); }
.seg-ctrl input { position: absolute; opacity: 0; pointer-events: none; }
.seg-ctrl input:checked + span {
  background: var(--s1);
  color: var(--txt);
  box-shadow: 0 1px 3px rgba(0,0,0,.5);
  border-radius: 6px;
  padding: 5px 10px;
  display: inline-block;
}
.seg-ctrl label > span { display: inline-block; padding: 5px 10px; border-radius: 6px; }

/* ── Layout editor — background / shiny upload slots ──────────
   Each slot is a card with a large portrait-ratio preview, a label,
   and a single action bar that swaps between idle and pending states
   via :has() — no DOM changes needed when the JS toggles the
   .bg-pending-row.hidden class. */

.bg-slot {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--s2);
  border: 1px solid var(--bd);
  border-radius: 14px;
  padding: 12px;
  position: relative;
  min-width: 0;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.bg-slot:hover {
  border-color: var(--bd-hi);
}
/* Slot lights up as a unit while a pending upload is staged. */
.bg-slot:has(.bg-pending-row:not(.hidden)) {
  border-color: rgba(124, 107, 240, .55);
  box-shadow: 0 0 0 1px rgba(124, 107, 240, .25),
              0 6px 20px rgba(124, 107, 240, .14);
}

.bg-preview-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 180 / 305;
  background: var(--s3);
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--bd);
}
.bg-preview-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.bg-preview-spinner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--txt3);
  overflow: hidden;
}
.bg-preview-spinner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.05), transparent);
  animation: shimmer 1.6s infinite;
}

.bg-pending-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--acc);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  letter-spacing: .06em;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .35),
              0 0 0 2px rgba(124, 107, 240, .25);
}

.bg-rarity-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  text-align: center;
  line-height: 1;
  padding: 2px 0;
}

/* ── Cards drawer — asset slot (Image / Full Art) ─────────────
   Mirrors .bg-slot from the Layout tab: a single tile that doubles
   as portrait preview + drop target, with an action bar (Upload /
   Download / Remove) below. data-state drives the wrap border —
   dashed in the empty state, solid once an image is loaded or
   staged — plus a subtle accent glow while a new file is staged. */

.drawer-asset-slot {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--s2);
  border: 1px solid var(--bd);
  border-radius: 12px;
  padding: 12px;
  position: relative;
  min-width: 0;
  transition: border-color .15s, box-shadow .15s;
}
.drawer-asset-slot:hover { border-color: var(--bd-hi); }
.drawer-asset-slot[data-state="staged"] {
  border-color: rgba(124, 107, 240, .55);
  box-shadow: 0 0 0 1px rgba(124, 107, 240, .25),
              0 6px 20px rgba(124, 107, 240, .14);
}

.drawer-asset-wrap {
  position: relative;
  width: 100%;
  max-width: 220px;
  aspect-ratio: 180 / 305;
  margin: 0 auto;
  background: var(--s3);
  border-radius: 8px;
  overflow: hidden;
  border: 1px dashed var(--bd);
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
.drawer-asset-slot[data-state="loaded"] .drawer-asset-wrap,
.drawer-asset-slot[data-state="staged"] .drawer-asset-wrap {
  border-style: solid;
}
.drawer-asset-wrap:hover,
.drawer-asset-wrap.drag-over {
  border-color: var(--acc);
  background: var(--acc-subtle);
}

.drawer-asset-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: var(--s3);
}
.drawer-asset-img[hidden] { display: none; }

.drawer-asset-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  text-align: center;
  font-size: 12px;
  color: var(--txt3);
  pointer-events: none;
  line-height: 1.4;
}
.drawer-asset-empty u { color: var(--acc); text-decoration: underline; }
.drawer-asset-empty[hidden] { display: none; }

.drawer-asset-remove-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(224, 82, 96, .55);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  pointer-events: none;
}
.drawer-asset-remove-overlay[hidden] { display: none; }

.drawer-asset-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  background: var(--acc);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 5px;
  letter-spacing: .08em;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .35),
              0 0 0 2px rgba(124, 107, 240, .25);
  pointer-events: none;
}
.drawer-asset-badge[hidden] { display: none; }

.drawer-asset-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.drawer-asset-actions > .btn { min-width: 0; }

.drawer-section-req { color: var(--red); font-weight: 700; }
.drawer-section-sub {
  color: var(--txt3);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-size: 11px;
}

/* Pool type header icon (still used by the Pool tab section headers) */
.pool-category-icon {
  width: 20px;
  height: 20px;
  border-radius: 3px;
  object-fit: cover;
  flex-shrink: 0;
}
.pool-category-icon-gen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
  user-select: none;
}

/* ───────────────────────────────────────────────────────────────────────────
   Categories tab — refined "card per category" layout
   --------------------------------------------------------------------------
   Each row is a 4-column grid: icon · identity · layout pill · delete.
   Goals: calmer hierarchy, inline-edit name, integrated layout assignment,
   destructive action visually quiet but reachable. The list collapses to a
   stacked layout below 720px.
   ───────────────────────────────────────────────────────────────────────── */
.cat-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cat-list:empty + .empty-state { margin-top: 0; }

.cat-card {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 18px;
  padding: 14px 16px 14px 14px;
  background: var(--s1);
  border: 1px solid var(--bd);
  border-radius: 12px;
  transition: border-color 160ms ease, background 160ms ease,
              box-shadow 200ms ease, transform 160ms ease;
}
.cat-card:hover { border-color: var(--bd-hi); }
.cat-card:focus-within {
  border-color: var(--acc);
  box-shadow: 0 0 0 3px var(--acc-glow);
}
.cat-card.is-draft {
  border-color: var(--acc);
  background:
    radial-gradient(120% 140% at 0% 0%, var(--acc-subtle), transparent 55%),
    var(--s1);
  animation: catCardEnter 320ms cubic-bezier(.2, .8, .2, 1);
}
@keyframes catCardEnter {
  from { transform: translateY(-4px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* ── Icon tile ── */
.cat-card-icon {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  border: 1px solid var(--bd);
  background: var(--s2);
  overflow: hidden;
  cursor: pointer;
  flex-shrink: 0;
  display: block;
  transition: border-color 160ms ease, transform 160ms ease;
}
.cat-card-icon:hover { border-color: var(--bd-hi); }
.cat-card-icon-img,
.cat-card-icon-gen {
  width: 100%;
  height: 100%;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  object-fit: cover;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.01em;
  user-select: none;
}
.cat-card-icon-gen-empty {
  background: var(--s3);
  color: var(--txt3);
  font-weight: 400;
  font-size: 24px;
}
.cat-card-icon-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: rgba(9, 9, 15, .76);
  color: var(--txt);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 180ms ease;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.cat-card-icon-overlay svg { stroke: var(--acc-hi); }
.cat-card-icon:hover .cat-card-icon-overlay { opacity: 1; }
.cat-card-icon-clear {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--bd);
  background: var(--s3);
  color: var(--txt2);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(.85);
  transition: opacity 180ms ease, transform 180ms ease,
              background 160ms ease, color 160ms ease, border-color 160ms ease;
  z-index: 2;
}
.cat-card-icon:hover .cat-card-icon-clear {
  opacity: 1;
  transform: scale(1);
}
.cat-card-icon-clear:hover {
  background: var(--red-subtle);
  border-color: var(--red-border);
  color: var(--red);
}

/* ── Body (name + meta) ── */
.cat-card-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cat-card-name {
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  color: var(--txt);
  letter-spacing: -.005em;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 4px 8px;
  margin: -4px -8px;             /* negate padding so the field looks borderless when idle */
  width: 100%;
  transition: background 140ms ease, border-color 140ms ease;
}
.cat-card-name::placeholder { color: var(--txt3); font-weight: 500; }
.cat-card-name:hover { background: var(--s2); }
.cat-card-name:focus {
  background: var(--s2);
  border-color: var(--acc);
  outline: none;
}
.cat-card-meta {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--txt3);
  flex-wrap: wrap;
  line-height: 1.4;
}
.cat-card-count { color: var(--txt2); font-weight: 500; }
.cat-card-sep { color: var(--bd-hi); }
.cat-card-layout-summary em {
  color: var(--acc-hi);
  font-style: normal;
  font-weight: 600;
}
.cat-card-meta-hint { color: var(--txt3); }
.cat-kbd {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border: 1px solid var(--bd);
  border-bottom-width: 2px;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  color: var(--txt2);
  background: var(--s2);
}

/* ── Layout pill (segmented: select + ↗ shortcut) ── */
.cat-card-pill {
  display: inline-flex;
  align-items: stretch;
  border-radius: 999px;
  border: 1px solid var(--bd);
  background: var(--s2);
  overflow: hidden;
  transition: background 140ms ease, border-color 140ms ease;
  max-width: 280px;
}
.cat-card-pill:hover { border-color: var(--bd-hi); }
.cat-card-pill.is-custom {
  background: var(--acc-subtle);
  border-color: var(--acc);
  box-shadow: 0 0 0 1px var(--acc-glow);
}
.cat-card-pill-dot {
  width: 8px;
  align-self: center;
  height: 8px;
  margin: 0 0 0 12px;
  border-radius: 999px;
  background: var(--bd-hi);
  flex-shrink: 0;
  transition: background 160ms ease, box-shadow 160ms ease;
}
.cat-card-pill.is-custom .cat-card-pill-dot {
  background: var(--acc-hi);
  box-shadow: 0 0 8px var(--acc-glow);
}
.cat-card-pill-select {
  font-family: inherit;
  border: 0;
  background: transparent;
  color: var(--txt);
  font-size: 12px;
  font-weight: 600;
  padding: 7px 22px 7px 10px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--txt3) 50%),
    linear-gradient(-45deg, transparent 50%, var(--txt3) 50%);
  background-position:
    calc(100% - 13px) 50%,
    calc(100% - 8px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  text-overflow: ellipsis;
  max-width: 200px;
}
.cat-card-pill-select:focus { outline: none; }
.cat-card-pill-select option {
  background: var(--s2);
  color: var(--txt);
}
.cat-card-pill-go {
  border: 0;
  border-left: 1px solid var(--bd);
  background: transparent;
  color: var(--txt2);
  padding: 0 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 140ms ease, background 140ms ease;
}
.cat-card-pill.is-custom .cat-card-pill-go { border-left-color: var(--acc); }
.cat-card-pill-go:hover {
  color: var(--acc-hi);
  background: rgba(255, 255, 255, .04);
}
.cat-card-pill-go:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: -1px;
}

/* ── Delete (ghost trash icon) ── */
.cat-card-delete {
  border: 0;
  background: transparent;
  color: var(--txt3);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 140ms ease, background 140ms ease;
}
.cat-card-delete:hover:not([disabled]) {
  color: var(--red);
  background: var(--red-subtle);
}
.cat-card-delete:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: -1px;
}
.cat-card-delete[disabled] {
  opacity: .35;
  cursor: not-allowed;
}

/* ── Draft row primary actions ── */
.cat-card-actions {
  grid-column: 3 / span 2;
  display: inline-flex;
  gap: 6px;
  justify-self: end;
}

/* ── Mobile (≤ 720px): two-row stack ── */
@media (max-width: 720px) {
  .cat-card {
    grid-template-columns: 56px 1fr auto;
    grid-template-areas:
      "icon body delete"
      "pill pill   pill";
    row-gap: 12px;
  }
  .cat-card .cat-card-icon       { grid-area: icon; }
  .cat-card .cat-card-body       { grid-area: body; }
  .cat-card .cat-card-pill       { grid-area: pill; max-width: none; }
  .cat-card .cat-card-delete     { grid-area: delete; align-self: start; }
  .cat-card-actions              { grid-area: pill; justify-self: stretch; }
  .cat-card-pill-select          { flex: 1 1 auto; max-width: none; }
}
.category-blocked-note {
  width: 100%;
  margin-top: 8px;
  padding: 8px 10px;
  background: var(--red-subtle);
  border: 1px solid var(--red-border);
  border-radius: 6px;
  font-size: 11px;
  color: var(--red);
}

/* Misc */
.hidden { display: none !important; }
.text-danger { color: var(--red); }
.text-muted  { color: var(--txt3); }
kbd {
  background: var(--s3);
  border: 1px solid var(--bd-hi);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 11px;
  color: var(--txt2);
  font-family: monospace;
}
.guild-badge {
  display: inline-block;
  padding: 2px 8px;
  background: var(--s3);
  border: 1px solid var(--bd);
  border-radius: 20px;
  font-family: 'Courier New', monospace;
  font-size: 11px;
  color: var(--txt2);
}

/* ── Card tile locked state ──────────────────────────── */
.card-tile-locked-state img,
.card-tile-locked-state .card-tile-no-preview { opacity: .55; filter: grayscale(40%); }
.card-tile-locked {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 2;
  pointer-events: none;
}

/* ── Premium / locked badges ──────────────────────────── */
.badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .5px;
  vertical-align: middle;
  white-space: nowrap;
  border: 1px solid transparent;
}
.badge-premium {
  background: linear-gradient(135deg, #f1c40f 0%, #e08a0d 100%);
  color: #1a1410;
  border-color: #f1c40f;
  box-shadow: 0 0 8px rgba(241, 196, 15, .35);
}
.badge-free {
  background: var(--s3);
  color: var(--txt3);
  border-color: var(--bd);
}
.badge-free--warn {
  background: linear-gradient(135deg, #f5c038 0%, #e8990a 100%);
  color: #1a1208;
  border-color: #f5c038;
  box-shadow: 0 0 8px rgba(245, 192, 56, .30);
}
.badge-free--full {
  background: linear-gradient(135deg, #f08c00 0%, #c2410c 100%);
  color: #fff;
  border-color: #f08c00;
  box-shadow: 0 0 10px rgba(240, 140, 0, .40);
}
.badge-free--danger {
  background: linear-gradient(135deg, #ff6b6b 0%, #c92a2a 100%);
  color: #fff;
  border-color: #ff6b6b;
  box-shadow: 0 0 10px rgba(255, 107, 107, .45);
}
.badge-locked {
  background: rgba(120, 120, 140, .15);
  color: var(--txt3);
  border-color: var(--bd);
}
.badge--link {
  cursor: pointer;
  transition: filter .15s ease, transform .15s ease;
}
.badge--link:hover  { filter: brightness(1.15); transform: translateY(-1px); }
.badge--link:active { transform: translateY(0); filter: brightness(.95); }
.premium-hint {
  font-size: 11px;
  color: var(--txt3);
  margin-left: 8px;
}
input[disabled].inp,
select[disabled].inp,
input.inp:disabled,
select.inp:disabled {
  opacity: .55;
  cursor: not-allowed;
}

/* ── Responsive shell ──────────────────────────────────────── */

@media (max-width: 899px) {
  .app-shell { display: block; }
  .sidebar {
    position: fixed;
    top: 0; left: 0;
    height: 100vh;
    width: min(280px, 82vw);
    transform: translateX(-100%);
    transition: transform .25s cubic-bezier(.4,0,.2,1);
    box-shadow: 18px 0 40px rgba(0,0,0,.6);
  }
  .sidebar.open { transform: translateX(0); }
  .topbar { display: flex; }
  .app-main { padding: 20px clamp(12px, 4vw, 20px) 80px; }

  .sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(2px);
    z-index: 29;
  }
  .sidebar-backdrop.show { display: block; }
}
@media (min-width: 900px) {
  .topbar { display: none !important; }
  .sidebar-backdrop { display: none !important; }
}

/* Mobile touch targets */
@media (max-width: 767px) {
  .inp { min-height: 40px; font-size: 16px; padding: 10px 12px; }
  .btn { min-height: 44px; padding: 10px 18px; }
  .btn-sm { min-height: 36px; padding: 8px 14px; }
  .btn-xs { min-height: 32px; padding: 6px 10px; }
  .section-head h1 { font-size: 18px; }
  .panel { padding: 16px; }
  #toast {
    left: 50%;
    right: auto;
    top: calc(var(--topbar-h) + 8px);
    transform: translateX(-50%) translateY(-6px);
    width: calc(100vw - 32px);
    max-width: 400px;
    text-align: center;
  }
  #toast.show { transform: translateX(-50%) translateY(0); }
  #card-drawer {
    inset: auto 0 0 0;
    top: auto;
    left: 0;
    width: 100%;
    max-width: 100%;
    border-radius: 16px 16px 0 0;
    border: none;
    border-top: 1px solid var(--bd);
    max-height: 92vh;
    transform: translateY(100%);
    opacity: 1;
    pointer-events: none;
  }
  #card-drawer.drawer-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .drawer-header { position: relative; padding-top: 20px; }
  .drawer-header::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 4px;
    background: var(--bd-hi);
    border-radius: 2px;
  }
  .drop-zone { min-height: 80px; border-style: solid; }
}

/* ── Keyframes ─────────────────────────────────────────────── */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes popIn {
  from { opacity: 0; transform: scale(.94) translateY(4px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ── Section pane + header ─────────────────────────────────── */

.section-pane { animation: fadeIn .2s ease both; }

.section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.section-header > div { min-width: 0; flex: 1 1 auto; }
.section-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.3px;
  color: var(--txt);
  margin: 0 0 4px;
}
.section-sub {
  font-size: 13px;
  color: var(--txt3);
  margin: 0;
  line-height: 1.6;
  max-width: 64ch;
}
@media (max-width: 767px) {
  .section-title { font-size: 18px; }
}

.reset-btn-compact { margin: 0; white-space: nowrap; }

/* ── Lbl variants ──────────────────────────────────────────── */

.lbl-sub { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--txt3); }
.lbl-required { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--red); }
.lbl-nomargin { margin: 0; }
.lbl-xs { font-size: 10px; }

/* ── Input variants ────────────────────────────────────────── */

.inp-sm   { font-size: 12px; }
.inp-file { padding: 6px; }
.inp-file-sm {
  font-size: 12px;
  color: var(--txt2);
  width: 100%;
  margin-bottom: 8px;
}

/* ── Card drawer — form bits ───────────────────────────────── */

.drawer-preview-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
  padding: 16px;
  background: var(--s2);
  border: 1px solid var(--bd);
  border-radius: 10px;
}
.drawer-preview-col-group { width: 100%; }
.drawer-preview-previews {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  width: 100%;
}
.drawer-preview-previews > div {
  flex: 1;
  min-width: 0;
}
.drawer-preview-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--txt3);
  text-align: center;
  margin-bottom: 5px;
}
#drawer-normal-label { visibility: hidden; }
.drawer-preview-hint {
  font-size: 11px;
  color: var(--txt3);
  line-height: 1.6;
  text-align: center;
}

.drawer-form { display: flex; flex-direction: column; gap: 14px; }
.drawer-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 479px) { .drawer-grid-2 { grid-template-columns: 1fr; } }

/* Triple Triad stats — compact single-row layout */
.drawer-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.drawer-tt-row {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}
.drawer-tt-cell {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.drawer-tt-cap {
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--txt3);
  text-align: center;
}
.drawer-tt-inp {
  width: 56px;
  text-align: center;
  padding: 5px 6px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.drawer-tt-reset { margin-left: 4px; align-self: flex-end; }
.drawer-tt-state {
  font-size: 11px;
  color: var(--txt3);
  margin-left: auto;
  align-self: flex-end;
  padding-bottom: 4px;
}
.drawer-tt-state.is-override { color: var(--acc); }
.drawer-tt-default {
  font-size: 11px;
  color: var(--txt3);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}
.drawer-tt-default b {
  color: var(--txt2);
  font-weight: 600;
}
@media (max-width: 479px) {
  .drawer-tt-state { margin-left: 0; flex-basis: 100%; }
}

.drawer-file-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.drawer-del-btn {
  font-size: 11px;
  color: var(--red);
  background: none;
  border: none;
  font-family: inherit;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: background .12s;
}
.drawer-del-btn:hover { background: var(--red-subtle); }

.drawer-hint { font-size: 11px; color: var(--txt3); margin-bottom: 6px; line-height: 1.5; }

.drawer-author-footer {
  font-size: 11px;
  color: var(--txt3);
  line-height: 1.5;
  padding-top: 10px;
  margin-top: 12px;
  border-top: 1px solid var(--bd);
}
.drawer-author-footer .drawer-author-sep { margin: 0 6px; opacity: .6; }

.drawer-file-row {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.drawer-file-thumb {
  height: 32px; width: 32px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--bd);
}
.drawer-file-label {
  flex: 1;
  font-size: 12px;
  color: var(--txt3);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.drawer-file-clear {
  font-size: 12px;
  color: var(--red);
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.drawer-delete-btn { margin-left: auto; }

/* ── Shop Packs tab ──────────────────────────────────────────
   The collapsible-panel chrome below is shared with the Sets tab via
   `.set-*` aliases on every rule. Pack-only flourishes (the read-only
   Standard mirror, the pool-restriction picker) stay on their original
   `.pack-*` selectors. */

.packs-list, .sets-list { margin-top: 20px; display: flex; flex-direction: column; gap: 14px; }
.pack-panel, .set-panel { padding: 18px 20px; }
.pack-panel-head, .set-panel-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--bd);
}
.pack-panel-head-label, .set-panel-head-label {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: var(--txt);
  letter-spacing: .01em;
}
.pack-actions, .set-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}
.pack-panel-head-actions, .set-panel-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Drag handle (shared by .pack-panel and .set-panel rows). Pointer-events
   based; `touch-action: none` keeps the browser from intercepting the
   vertical pan during a finger drag. */
.drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 28px;
  margin-right: 2px;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--txt3);
  cursor: grab;
  font-size: 14px;
  line-height: 1;
  letter-spacing: -3px;
  border-radius: 6px;
  transition: color .12s, background .12s;
  touch-action: none;
  user-select: none;
  flex: 0 0 auto;
}
.drag-handle:hover:not(:disabled) { color: var(--txt); background: var(--s3); }
.drag-handle:active:not(:disabled) { cursor: grabbing; }
.drag-handle:disabled { opacity: .35; cursor: not-allowed; }

/* The row currently being dragged: lift it visually while keeping it in
   flow so the gap collapses correctly under the cursor. */
.set-panel.is-dragging,
.pack-panel.is-dragging {
  opacity: .94;
  box-shadow: 0 14px 36px rgba(0, 0, 0, .5);
  outline: 1px solid var(--acc);
  outline-offset: -1px;
  transform: translateZ(0);
  z-index: 5;
  position: relative;
}
/* Other rows in the list during a drag — paired with the FLIP helper in
   sortable.js. When the dragged row jumps to a new DOM slot, the helper
   transforms each shifted peer back to its old visual spot, then wipes the
   inline transform on the next frame so this transition glides it home.
   Matches the chevron's cubic-bezier so the two motions feel kindred. */
.has-dragging-child .set-panel:not(.is-dragging),
.has-dragging-child .pack-panel:not(.is-dragging) {
  transition: transform .22s cubic-bezier(.2, .7, .3, 1);
}

/* Virtual Standard pack — read-only mirror of guild_config. */
.pack-panel--standard {
  border-color: var(--acc-subtle, var(--bd));
  background: linear-gradient(180deg, color-mix(in srgb, var(--acc) 5%, transparent), transparent 60%);
}
.pack-panel--standard .inp[disabled],
.pack-panel--standard textarea[disabled] {
  opacity: .85;
  cursor: default;
}
.pack-panel-default-badge {
  display: inline-block;
  padding: 1px 8px;
  margin-right: 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--acc-hi);
  background: color-mix(in srgb, var(--acc) 18%, transparent);
  vertical-align: 1px;
}
.pack-panel-default-badge--off {
  color: var(--txt3);
  background: color-mix(in srgb, var(--txt3) 14%, transparent);
}
.pack-panel-readonly-hint {
  margin: -4px 0 14px;
  font-size: 12px;
  color: var(--txt3);
}

/* Compact "hidden Standard" placeholder. */
.pack-panel--restore { padding: 12px 16px; }
.pack-panel--restore .pack-panel-head {
  margin-bottom: 6px;
  padding-bottom: 8px;
}
.pack-panel--restore .pack-panel-readonly-hint {
  margin: 0;
}

/* Pool-restriction chips (Sets / Categories selectors per pack). */
.pack-filter-block {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 8px;
}
.pack-filter-label {
  flex: 0 0 88px;
  font-size: 12px;
  font-weight: 600;
  color: var(--txt2);
  letter-spacing: .02em;
  padding-top: 4px;
}
.pack-filter-chips {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* ── Shop Packs — collapsible panels ─────────────────────────────────
   Each pack collapses to a SINGLE-LINE summary so the admin can scan a long
   list at a glance. The whole head strip is the click target — chevron, name,
   meta numbers, mini-bar, and restriction pill all live inside the toggle
   button. Action buttons sit OUTSIDE the toggle so they don't fire collapse. */

.pack-panel-head, .set-panel-head {
  /* Single horizontal row; the title-label shrinks first (ellipsis) when
     space runs out, then the summary metas shrink as a group. */
  flex-wrap: nowrap;
  align-items: center;
  gap: 12px;
}
.pack-panel.is-collapsed .pack-panel-head,
.set-panel.is-collapsed  .set-panel-head {
  margin-bottom: 0;
  padding-bottom: 6px;
  border-bottom: none;
}

/* The entire collapsed panel is the click target — the toggle button is still
   the a11y entry point (keyboard / screen reader), but the whole surface
   visually invites a click. Hover lifts the panel slightly so the user sees
   that the inert-looking padding is also reactive. */
.pack-panel.is-collapsed,
.set-panel.is-collapsed {
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.pack-panel.is-collapsed:hover,
.set-panel.is-collapsed:hover {
  border-color: var(--bd-hi);
  background: color-mix(in srgb, var(--s2) 50%, var(--s1));
}
.pack-panel.is-collapsed:hover .pack-panel-chev,
.set-panel.is-collapsed:hover  .set-panel-chev {
  color: var(--acc-hi);
}

/* Toggle button — wraps chevron + label + summary so the whole strip is
   clickable. Action buttons live next to it as siblings. */
.pack-panel-toggle, .set-panel-toggle {
  flex: 1 1 auto;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px;
  margin: -4px -8px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .12s ease;
}
/* Hover affordance only when the panel is expanded — the panel-level hover
   already telegraphs interactivity for collapsed panels, so a second
   stacked tint would look noisy. */
.pack-panel:not(.is-collapsed) .pack-panel-toggle:hover,
.set-panel:not(.is-collapsed)  .set-panel-toggle:hover {
  background: color-mix(in srgb, var(--s2) 65%, transparent);
}
.pack-panel-toggle:focus-visible,
.set-panel-toggle:focus-visible {
  outline: 2px solid var(--acc-hi);
  outline-offset: 2px;
}
.pack-panel-toggle .pack-panel-head-label,
.set-panel-toggle  .set-panel-head-label {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Chevron rotates 0° (collapsed) → 90° (expanded). */
.pack-panel-chev, .set-panel-chev {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  font-size: 18px;
  line-height: 1;
  color: var(--txt2);
  transition: transform .15s cubic-bezier(.2,.7,.3,1), color .15s ease;
}
.pack-panel:not(.is-collapsed) .pack-panel-chev,
.set-panel:not(.is-collapsed)  .set-panel-chev {
  transform: rotate(90deg);
  color: var(--acc-hi);
}

/* Body — hidden in collapsed state. */
.pack-panel-body, .set-panel-body {
  animation: fadeUp .18s ease both;
}
.pack-panel.is-collapsed .pack-panel-body,
.set-panel.is-collapsed  .set-panel-body {
  display: none;
}

/* Left-spine accent: a subtle vertical line shows which panels are open. */
.pack-panel:not(.is-collapsed),
.set-panel:not(.is-collapsed) {
  box-shadow: inset 2px 0 0 var(--acc-subtle);
}
.pack-panel--standard:not(.is-collapsed) {
  box-shadow: inset 2px 0 0 var(--acc);
}

/* Summary strip — sits inline next to the title inside the toggle button.
   Visible only when the panel is collapsed; when expanded, the form body
   below shows everything in full so the inline summary becomes redundant. */
.pack-summary, .set-summary {
  display: none;
  align-items: center;
  gap: 10px;
  flex: 0 1 auto;
  min-width: 0;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--txt2);
  letter-spacing: .01em;
}
.pack-panel.is-collapsed .pack-summary,
.set-panel.is-collapsed  .set-summary {
  display: inline-flex;
}
.pack-summary-meta, .set-summary-meta {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--txt2);
}
.pack-summary-meta .sum-sep,
.set-summary-meta  .sum-sep {
  color: var(--txt3);
  margin: 0 5px;
}
.pack-summary-meta b,
.set-summary-meta  b {
  color: var(--txt);
  font-weight: 600;
}

/* Mini rarity distribution bar — 72×6, 5 colored segments proportional to weights. */
.pack-summary-bar, .set-summary-bar {
  display: inline-flex;
  flex: 0 0 auto;
  width: 72px;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--s3);
  gap: 1px;
  vertical-align: middle;
}
.pack-summary-bar > span,
.set-summary-bar  > span {
  display: block;
  height: 100%;
  flex: var(--w, 0);
  min-width: 0;
}

/* "+ New pack" / "+ New set" tile — rendered at the bottom of the list so the
   new draft is born exactly where the click happened. Visually echoes the
   collapsed panel height so the rhythm of the list stays even. */
.pack-new-tile, .set-new-tile {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 16px 22px;
  margin-top: 10px;
  border: 1.5px dashed var(--bd-hi);
  border-radius: 14px;
  background: transparent;
  color: var(--txt2);
  font: 600 14px/1.2 'Inter', system-ui, sans-serif;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease, transform .12s ease;
}
.pack-new-tile:hover:not([disabled]):not(.pack-new-tile--limit),
.set-new-tile:hover:not([disabled]):not(.set-new-tile--limit) {
  border-color: var(--acc-hi);
  border-style: solid;
  color: var(--txt);
  background: var(--acc-subtle);
}
.pack-new-tile:active:not([disabled]):not(.pack-new-tile--limit),
.set-new-tile:active:not([disabled]):not(.set-new-tile--limit) {
  transform: translateY(1px);
}
.pack-new-tile:focus-visible,
.set-new-tile:focus-visible {
  outline: 2px solid var(--acc-hi);
  outline-offset: 2px;
}
.pack-new-tile[disabled],
.set-new-tile[disabled] {
  opacity: .45;
  cursor: not-allowed;
}
.pack-new-tile-glyph, .set-new-tile-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1.5px solid currentColor;
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
}
.pack-new-tile:hover:not([disabled]):not(.pack-new-tile--limit) .pack-new-tile-glyph,
.set-new-tile:hover:not([disabled]):not(.set-new-tile--limit)   .set-new-tile-glyph {
  background: var(--acc-hi);
  color: var(--bg);
  border-color: var(--acc-hi);
}
.pack-new-tile-label, .set-new-tile-label {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--txt);
}
.pack-new-tile-hint, .set-new-tile-hint {
  flex: 1;
  font-size: 12px;
  font-weight: 400;
  color: var(--txt3);
  letter-spacing: .01em;
}
.pack-new-tile-hint code,
.set-new-tile-hint code {
  background: var(--s2);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 11px;
  color: var(--txt2);
}
.pack-new-tile--limit, .set-new-tile--limit {
  cursor: default;
  border-style: solid;
  border-color: var(--bd);
  color: var(--txt3);
}
.pack-new-tile--limit .pack-new-tile-glyph,
.set-new-tile--limit  .set-new-tile-glyph {
  color: var(--green, #2ecc71);
  border-color: currentColor;
}

/* Filter badge — only present when the pack has Sets/Categories selected. */
.pack-summary-restriction, .set-summary-restriction {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--acc-subtle);
  color: var(--acc-hi);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
}
.pack-summary-restriction::before,
.set-summary-restriction::before {
  content: '◈';
  font-size: 10px;
  opacity: .85;
}

/* Push the action buttons hard-right and keep them visible regardless of how
   wide the summary stretches. */
.pack-panel-head-actions, .set-panel-head-actions {
  flex: 0 0 auto;
  margin-left: auto;
}

/* ── Mobile: Sets & Shop Packs collapsible panels ─────────────────
   Below 767 px, the single-row head reflows into two zones:
     row 1: chevron + label (fills width, wraps if long) + actions
     row 2: summary strip (meta · mini bar · restriction pill), indented
            under the chevron column so the eye reads chevron → label →
            meta as one block.
   The collapse/expand JS doesn't change — only the layout reflows. */
@media (max-width: 767px) {
  .pack-panel, .set-panel {
    padding: 14px 16px;
  }

  /* Keep the desktop `align-items: center` so the drag-handle and the Delete
     button vertically center against the toggle's full height — visually
     anchoring the row even when the toggle has wrapped to two internal lines
     (label on top, summary strip below). */
  .pack-panel-head, .set-panel-head {
    flex-wrap: wrap;
    row-gap: 8px;
  }
  .pack-panel.is-collapsed .pack-panel-head,
  .set-panel.is-collapsed  .set-panel-head {
    padding-bottom: 4px;
  }

  /* Toggle stays inline with drag-handle and head-actions; its own internal
     flex wraps so chevron + label sit on row 1 and the summary span drops
     to row 2 (via flex: 0 0 100% on .pack-summary / .set-summary below). */
  .pack-panel-toggle, .set-panel-toggle {
    flex: 1 1 0;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    min-width: 0;
  }

  .pack-panel-toggle .pack-panel-head-label,
  .set-panel-toggle  .set-panel-head-label {
    flex: 1 1 0;
    max-width: none;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.25;
  }

  /* Summary strip drops to its own line, indented to align under the label.
     26 px = chevron 18 px + 8 px gap above. */
  .pack-summary, .set-summary {
    flex: 0 0 100%;
    margin-left: 26px;
    margin-top: 2px;
    flex-wrap: wrap;
    row-gap: 6px;
  }

  /* Bigger, thumb-friendly drag handle on touch screens — 44×44 matches the
     iOS HIG / Material Design minimum touch target. The grip glyph scales up
     in proportion; letter-spacing is widened to space the two ⋮ characters
     evenly within the larger button. */
  .drag-handle {
    width: 44px;
    height: 44px;
    font-size: 20px;
    letter-spacing: -2px;
    margin-right: 0;
  }

  /* Expanded-body Save / Create row — stack into a full-width primary so
     the thumb has a fat target. */
  .pack-actions, .set-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .pack-actions .btn, .set-actions .btn {
    width: 100%;
  }

  /* "+ New pack / + New set" CTA — drop the verbose hint line on phones,
     keep glyph + label so the action still reads. */
  .pack-new-tile, .set-new-tile {
    padding: 14px 16px;
    gap: 10px;
  }
  .pack-new-tile-hint, .set-new-tile-hint {
    display: none;
  }
}

/* Extra-narrow phones: shrink the summary metrics slightly so meta + mini
   bar + restriction pill stay on a single wrapped line as often as possible. */
@media (max-width: 480px) {
  .pack-summary-bar, .set-summary-bar {
    width: 56px;
  }
  .pack-summary-meta, .set-summary-meta {
    font-size: 11px;
  }
  .pack-summary-restriction, .set-summary-restriction {
    font-size: 10px;
    padding: 2px 7px;
  }
}

/* ── Types tab ─────────────────────────────────────────────── */

.categories-list { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.category-row.is-draft {
  border-color: var(--acc);
  box-shadow: 0 0 0 3px var(--acc-glow);
}
.category-row.is-draft .category-card-count {
  color: var(--acc-hi);
  font-weight: 600;
}

/* ── Cards toolbar ─────────────────────────────────────────── */

.cards-toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.cards-toolbar #cards-search { flex: 1 1 280px; min-width: 200px; }
.cards-toolbar #cards-sort { flex: 0 0 auto; min-width: 200px; }
.cards-toolbar #cards-result-count {
  flex: 0 0 auto;
  white-space: nowrap;
  margin-left: auto;
}
/* Per-tile full-art ⇄ normal swap button */
.card-tile { position: relative; }
.card-tile-swap {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--bd);
  border-radius: 50%;
  background: rgba(9, 9, 15, .72);
  color: var(--txt2);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s, color .15s, border-color .15s, background .15s;
  backdrop-filter: blur(4px);
  z-index: 2;
}
.card-tile:hover .card-tile-swap,
.card-tile:focus-within .card-tile-swap { opacity: 1; }
.card-tile-swap:hover {
  color: var(--acc-hi);
  border-color: var(--acc);
  background: rgba(9, 9, 15, .92);
}
@media (hover: none) {
  .card-tile-swap { opacity: .75; }
}
@media (max-width: 767px) {
  .cards-toolbar #cards-result-count { margin-left: 0; width: 100%; }
}

/* ── Cards stats strip (catalogue KPI panel) ──────────────── */

.cards-stats-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 18px 28px;
  padding: 20px 22px;
  margin-bottom: 18px;
  background:
    radial-gradient(140% 100% at 0% 0%, color-mix(in srgb, var(--acc) 10%, transparent), transparent 55%),
    radial-gradient(120% 120% at 100% 100%, color-mix(in srgb, var(--acc) 6%, transparent), transparent 55%),
    var(--s1);
  border: 1px solid var(--bd);
  border-radius: 14px;
  position: relative;
  overflow: hidden;
}
.cards-stats-strip::before {
  content: '';
  position: absolute;
  top: 0; left: 12%; right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--acc) 50%, transparent), transparent);
}
.cards-stats-cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.cards-stats-cell-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--txt3);
}
.cards-stats-cell-value {
  font-size: 26px;
  font-weight: 700;
  color: var(--txt);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.cards-stats-cell-value .cards-stats-of {
  font-size: 13px;
  font-weight: 500;
  color: var(--txt3);
  letter-spacing: 0;
}
.cards-stats-cell-sub {
  font-size: 11px;
  color: var(--txt3);
  line-height: 1.4;
}
.cards-stats-rarity-bar {
  display: flex;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--s3);
  margin-top: 2px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
}
.cards-stats-rarity-seg {
  height: 100%;
  transition: width .35s ease;
  min-width: 0;
}
.cards-stats-rarity-seg + .cards-stats-rarity-seg {
  border-left: 1px solid rgba(0,0,0,.4);
}
.cards-stats-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: 10px;
  color: var(--txt3);
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
.cards-stats-legend-row {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.cards-stats-legend-row::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--seg-color, var(--txt3));
  box-shadow: 0 0 6px -1px var(--seg-color, transparent);
}
.cards-stats-cell--locked .cards-stats-cell-value { color: var(--red); }

/* ── Cards search wrap + result pill ─────────────────────── */

.cards-search-wrap {
  position: relative;
  flex: 1 1 280px;
  min-width: 200px;
  display: flex;
}
.cards-search-wrap::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 50%;
  width: 13px;
  height: 13px;
  margin-top: -7px;
  border: 1.5px solid var(--txt3);
  border-radius: 50%;
  pointer-events: none;
  opacity: .7;
}
.cards-search-wrap::after {
  content: '';
  position: absolute;
  left: 22px;
  top: 50%;
  width: 6px;
  height: 1.5px;
  margin-top: 4px;
  background: var(--txt3);
  transform: rotate(45deg);
  transform-origin: 0 50%;
  border-radius: 1px;
  pointer-events: none;
  opacity: .7;
}
.cards-search-wrap .inp { width: 100%; padding-left: 34px; }
.cards-toolbar-end {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.cards-result-pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--s3);
  border: 1px solid var(--bd);
  font-size: 11px;
  color: var(--txt3);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.cards-result-pill:empty { display: none; }
@media (max-width: 767px) {
  .cards-toolbar-end { width: 100%; margin-left: 0; }
  .cards-result-pill:empty { display: none; }
}

/* ── Cards rarity chip filters ───────────────────────────── */

.cards-rarity-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 18px;
}
.cards-rarity-chips-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--txt3);
  margin-right: 4px;
}
.cards-rarity-chip {
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 5px 12px 5px 10px;
  border-radius: 999px;
  background: var(--s2);
  color: var(--txt3);
  border: 1px solid var(--bd);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-transform: capitalize;
  transition: background .12s, color .12s, border-color .12s, box-shadow .15s, transform .12s;
}
.cards-rarity-chip::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--chip-color, var(--txt3));
  box-shadow: 0 0 6px -1px var(--chip-color, transparent);
  flex-shrink: 0;
}
.cards-rarity-chip:hover {
  border-color: color-mix(in srgb, var(--chip-color) 40%, var(--bd-hi));
  color: var(--txt2);
}
.cards-rarity-chip[data-active="true"] {
  background: color-mix(in srgb, var(--chip-color) 16%, var(--s2));
  color: var(--txt);
  border-color: color-mix(in srgb, var(--chip-color) 55%, var(--bd));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--chip-color) 12%, transparent);
}
.cards-rarity-chip[data-active="true"]::before {
  box-shadow: 0 0 8px 0 var(--chip-color);
}
.cards-rarity-chips-clear {
  font-size: 11px;
  color: var(--txt3);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  margin-left: auto;
  transition: color .12s, background .12s;
  font-family: inherit;
}
.cards-rarity-chips-clear:hover { color: var(--txt2); background: var(--s2); }

/* Rarity picker (card drawer) — colored chips replacing the native <select>,
   whose <option> color is ignored in the open dropdown list on most platforms.
   Same rarity vocabulary as the filter chips, sized up as a primary control. */
.rarity-pick {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}
.rarity-pick-chip {
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 6px 13px 6px 11px;
  border-radius: 999px;
  background: var(--s2);
  color: var(--txt3);
  border: 1px solid var(--bd);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: background .12s, color .12s, border-color .12s, box-shadow .15s;
}
.rarity-pick-chip::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--chip-color, var(--txt3));
  box-shadow: 0 0 6px -1px var(--chip-color, transparent);
  flex-shrink: 0;
}
.rarity-pick-chip:hover {
  border-color: color-mix(in srgb, var(--chip-color) 40%, var(--bd-hi));
  color: var(--txt2);
}
.rarity-pick-chip[aria-checked="true"] {
  background: color-mix(in srgb, var(--chip-color) 18%, var(--s2));
  color: var(--txt);
  border-color: color-mix(in srgb, var(--chip-color) 60%, var(--bd));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--chip-color) 14%, transparent);
}
.rarity-pick-chip[aria-checked="true"]::before {
  box-shadow: 0 0 9px 0 var(--chip-color);
}
.rarity-pick-chip:focus-visible {
  outline: 2px solid var(--chip-color);
  outline-offset: 2px;
}

/* ── Card drawer split layout (preview hero + form col) ─── */

.drawer-body--split {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px 20px;
}
@media (min-width: 720px) {
  .drawer-body--split {
    display: grid;
    grid-template-columns: minmax(320px, 380px) 1fr;
    gap: 24px;
    padding: 22px 24px;
    align-items: start;
  }
}

.drawer-preview-col {
  position: relative;
  padding: 18px 16px 16px;
  border: 1px solid var(--bd);
  border-radius: 12px;
  background: var(--s2);
  overflow: hidden;
  transition: border-color .25s ease;
}
.drawer-preview-col::before {
  content: '';
  position: absolute;
  inset: -50%;
  background: conic-gradient(
    from 220deg at 50% 50%,
    color-mix(in srgb, var(--preview-tint, var(--acc)) 28%, transparent),
    transparent 28%,
    color-mix(in srgb, var(--preview-tint, var(--acc)) 14%, transparent) 50%,
    transparent 78%,
    color-mix(in srgb, var(--preview-tint, var(--acc)) 28%, transparent)
  );
  filter: blur(48px);
  opacity: .6;
  pointer-events: none;
  z-index: 0;
  animation: previewGlow 22s linear infinite;
}
@keyframes previewGlow {
  to { transform: rotate(360deg); }
}
.drawer-preview-col::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(9,9,15,.35) 100%);
  pointer-events: none;
  z-index: 0;
}
.drawer-preview-col > * { position: relative; z-index: 1; }
.drawer-preview-col {
  border-color: color-mix(in srgb, var(--preview-tint, var(--bd)) 32%, var(--bd));
}
@media (min-width: 720px) {
  .drawer-preview-col {
    position: sticky;
    top: 0;
    align-self: start;
  }
}
.drawer-preview-col-head {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--txt3);
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.drawer-preview-col-head::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--preview-tint, var(--bd)) 30%, var(--bd)), transparent);
}
.drawer-preview-col .drawer-preview-previews {
  flex-direction: column;
  gap: 16px;
  align-items: center;
}
.drawer-preview-col .drawer-preview-previews > div {
  flex: 0 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.drawer-preview-col .drawer-preview-img,
.drawer-preview-col .drawer-preview-ph {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: calc(64vh * 180 / 305);
  max-height: 64vh;
  aspect-ratio: 180 / 305;
  height: auto;
}
.drawer-preview-col .drawer-preview-img {
  background: rgba(9,9,15,.55);
  border-color: color-mix(in srgb, var(--preview-tint, var(--bd)) 24%, var(--bd));
  box-shadow: 0 14px 40px -14px rgba(0,0,0,.7);
}
.drawer-preview-col .drawer-preview-ph {
  background: rgba(9,9,15,.55);
  border-color: color-mix(in srgb, var(--preview-tint, var(--bd)) 24%, var(--bd));
}
.drawer-preview-col.has-fa .drawer-preview-img,
.drawer-preview-col.has-fa .drawer-preview-ph {
  max-width: calc(38vh * 180 / 305);
  max-height: 38vh;
}
.drawer-preview-col-hint {
  font-size: 11px;
  color: var(--txt3);
  line-height: 1.55;
  text-align: center;
  margin-top: 12px;
}
.drawer-preview-col-hint kbd {
  font-family: inherit;
  font-size: 10px;
  padding: 1px 5px;
  border: 1px solid var(--bd);
  border-radius: 4px;
  background: var(--s3);
  color: var(--txt2);
}

.drawer-form-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.drawer-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px 16px;
  border: 1px solid var(--bd);
  border-radius: 10px;
  background: rgba(255,255,255,.012);
}
.drawer-section-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--txt3);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.drawer-section-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--bd), transparent);
}
.drawer-section .drawer-form { gap: 12px; }

/* ── Layout editor — stage + rail ──────────────────────────── */

.ly-stage {
  position: relative;
  width: 360px;
  height: 610px;
  background: var(--s2);
  border: 1px solid var(--bd);
  border-radius: 8px;
  overflow: hidden;
  user-select: none;
  max-width: 100%;
}
@media (max-width: 899px) {
  .ly-stage {
    width: min(360px, 95vw);
    aspect-ratio: 360 / 610;
    height: auto;
  }
}
.ly-preview-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.ly-stage-layer { position: absolute; inset: 0; }
.ly-preview-spinner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--txt3);
  font-size: 12px;
  pointer-events: none;
}

/* Preview controls above the canvas */
.ly-preview-controls { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }

/* Rail */
.ly-rail { flex: 1; min-width: 240px; display: flex; flex-direction: column; }

/* Sections within the rail — separator style, no heavy card bg */
.ly-section { padding: 12px 0; border-top: 1px solid var(--bd); }
.ly-section:first-child { border-top: none; padding-top: 0; }
.ly-section:last-child { padding-bottom: 0; }
.ly-section-hd {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--txt3);
  margin-bottom: 8px;
}
.ly-section-hd-sub {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--acc-hi);
}

/* Card frame — 3 inline fields */
.ly-frame-grid {
  display: grid;
  grid-template-columns: 72px 72px 1fr;
  gap: 8px;
  align-items: start;
}
.ly-inline-color { display: flex; gap: 4px; align-items: center; margin-top: 3px; }
.ly-inline-color .inp-sm { flex: 1; min-width: 0; }
.ly-color-input-inline { display: block; margin-top: 0; flex-shrink: 0; }

.ly-elements-list { display: flex; flex-direction: column; gap: 4px; }

.ly-xy-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 6px;
}
@media (min-width: 600px) and (max-width: 899px) {
  .ly-xy-grid { grid-template-columns: repeat(4, 1fr); }
}

.ly-range { width: 100%; margin-bottom: 8px; }
.ly-radio-row { display: flex; gap: 8px; font-size: 11px; margin-bottom: 8px; }
.ly-field-block { margin-top: 6px; }

.ly-image-row {
  border-top: 1px solid var(--bd);
  margin-top: 8px;
  padding-top: 8px;
}

.ly-hint { font-size: 10px; color: var(--txt3); margin-bottom: 10px; line-height: 1.5; }
.ly-variant-row { display: flex; gap: 4px; align-items: stretch; }
.ly-variant-row .seg-ctrl { flex: 1; }
.ly-shiny-btn {
  flex-shrink: 0;
  padding: 6px 8px;
  font-size: 11px;
  font-weight: 500;
  font-family: inherit;
  color: var(--txt2);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.ly-shiny-btn:hover { color: var(--txt); background: var(--s2); }
.ly-shiny-btn.active {
  background: linear-gradient(90deg, #7a5c00 0%, #c8970a 40%, #ffe066 60%, #c8970a 80%, #7a5c00 100%);
  color: #fff8dc;
  border-color: #c8970a;
  box-shadow: 0 0 8px 1px rgba(200,151,10,.35);
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
}

/* Preview card combobox */
.ly-combo { position: relative; }
.ly-combo-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 0; right: 0;
  background: var(--s2);
  border: 1px solid var(--bd-hi);
  border-radius: 8px;
  max-height: 220px;
  overflow-y: auto;
  z-index: 200;
  box-shadow: 0 6px 20px rgba(0,0,0,.5);
}
.ly-combo-item {
  padding: 7px 12px;
  font-size: 13px;
  cursor: pointer;
  color: var(--txt2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ly-combo-item:hover { background: var(--s3); color: var(--txt); }
.ly-combo-item.active { color: var(--acc-hi); background: var(--acc-subtle); }
.ly-combo-more {
  padding: 5px 12px 7px;
  font-size: 11px;
  color: var(--txt3);
  font-style: italic;
  border-top: 1px solid var(--bd);
}

.bg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
}
@media (max-width: 480px) {
  .bg-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
}

.btn-block { width: 100%; }

/* Status chip — normalize alignment within flex header */
.section-header .autosave-chip { flex-shrink: 0; margin-top: 4px; }

/* ── Layout editor — stage overlay (drag / resize) ─────────── */

.ly-stage-el {
  position: absolute;
  background: transparent;
  border: 1px dashed rgba(124, 107, 240, .35);
  border-radius: 4px;
  cursor: move;
  user-select: none;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 3px;
  transition: border-color .1s;
}
.ly-stage-el:hover {
  border-color: rgba(124, 107, 240, .7);
}
.ly-stage-el.active {
  border: 2px solid var(--acc);
  box-shadow: 0 0 0 1px rgba(0,0,0,.25), 0 0 10px var(--acc-glow);
  z-index: 5;
}
.ly-stage-label {
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
  letter-spacing: .04em;
  white-space: nowrap;
  max-width: calc(100% - 4px);
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow:
    -1px -1px 0 #000, 1px -1px 0 #000,
    -1px  1px 0 #000, 1px  1px 0 #000,
    0 0 4px rgba(0,0,0,.8);
}

.ly-resize-handle {
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 12px;
  height: 12px;
  background: var(--acc);
  border: 2px solid var(--s1);
  border-radius: 50%;
  cursor: nwse-resize;
  z-index: 6;
  box-shadow: 0 1px 3px rgba(0,0,0,.6);
}

/* ── Layout editor — segmented rarity control ──────────────── */

.seg-ctrl-btn {
  flex: 1 1 auto;
  min-width: 0;
  padding: 6px 8px;
  font-size: 11px;
  font-weight: 500;
  color: var(--txt2);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  font-family: inherit;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.seg-ctrl-btn:hover:not(:disabled) { color: var(--txt); background: var(--s2); }
.seg-ctrl-btn:disabled { opacity: .35; cursor: not-allowed; }
.seg-ctrl-btn.active {
  background: var(--s1);
  color: var(--txt);
  border-color: var(--bd-hi);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}
@media (max-width: 520px) {
  .seg-ctrl { flex-wrap: wrap; width: 100%; }
  .seg-ctrl-btn { flex: 1 1 calc(33% - 4px); text-align: center; }
}

/* ── Layout editor — identity card ─────────────────────────────
   Groups the four layout-level actions (display · rename · reset ·
   delete) into one panel so the admin doesn't have to scan top↔bottom.
   States: data-state="default" | "inheriting" | "customized" tints
   the left rail and gates which actions show. */

.ly-identity-card {
  position: relative;
  padding: 14px 16px 14px 18px;
  margin-bottom: 14px;
  border-radius: 12px;
  border: 1px solid var(--bd);
  background:
    linear-gradient(135deg, rgba(124, 107, 240, .04), rgba(40, 60, 110, .015)),
    var(--s1);
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.ly-identity-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--bd-hi);
  transition: background .18s ease, box-shadow .18s ease;
}
.ly-identity-card[data-state="default"]::before     { background: #d6a23c; box-shadow: 0 0 14px rgba(214, 162, 60, .35); }
.ly-identity-card[data-state="inheriting"]::before  { background: var(--txt3); }
.ly-identity-card[data-state="customized"]::before  { background: var(--acc-hi); box-shadow: 0 0 14px var(--acc-glow); }
.ly-identity-card:focus-within {
  border-color: var(--bd-hi);
  box-shadow: 0 0 0 3px rgba(124, 107, 240, .12);
}

.ly-identity-eyebrow-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--bd);
  margin-bottom: 12px;
}
.ly-identity-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--txt3);
}

.ly-identity-switcher {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ly-identity-switcher-label {
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--txt3);
  font-weight: 600;
}
.ly-identity-switcher-select {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--bd);
  background: var(--s2);
  color: var(--txt);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 26px 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  max-width: 220px;
  text-overflow: ellipsis;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--txt3) 50%),
    linear-gradient(-45deg, transparent 50%, var(--txt3) 50%);
  background-position: calc(100% - 14px) 52%, calc(100% - 9px) 52%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  transition: border-color .14s ease, background-color .14s ease;
}
.ly-identity-switcher-select:hover { border-color: var(--bd-hi); }
.ly-identity-switcher-select:focus {
  outline: none;
  border-color: var(--acc);
  box-shadow: 0 0 0 3px var(--acc-glow);
}
.ly-identity-switcher-select option {
  background: var(--s2);
  color: var(--txt);
}

.ly-identity-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ly-identity-name-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  min-height: 36px;
}

/* Name lives as both static <span> and editable <input>; JS toggles
   their display. Both share metrics so layout doesn't jump on swap. */
.ly-identity-name-static,
.ly-identity-name-input {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.3px;
  color: var(--txt);
  line-height: 1.2;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
}
.ly-identity-name-static {
  padding: 4px 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: text;
  transition: background .14s ease, border-color .14s ease;
}
.ly-identity-card[data-state="default"] .ly-identity-name-static {
  cursor: default;
  color: var(--txt2);
  font-style: italic;
}
.ly-identity-name-static:not([data-readonly]):hover {
  background: var(--s2);
  border-color: var(--bd);
}
.ly-identity-name-input {
  padding: 4px 8px;
  border: 1px solid var(--acc);
  border-radius: 8px;
  background: var(--s2);
  font-family: inherit;
  outline: none;
  box-shadow: 0 0 0 3px var(--acc-glow);
  min-width: 12ch;
  flex: 1 1 240px;
}

.ly-identity-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.ly-identity-action {
  color: var(--txt2);
  background: transparent;
  border: 1px solid transparent;
  transition: color .14s ease, background .14s ease, border-color .14s ease;
}
.ly-identity-action:hover:not([disabled]) {
  border-color: var(--bd-hi);
  background: var(--s2);
}
.ly-identity-action-reset:hover:not([disabled]) {
  color: #f0c576;
  border-color: rgba(214, 162, 60, .35);
  background: rgba(214, 162, 60, .08);
}
.ly-identity-action-delete:hover:not([disabled]) {
  color: var(--red);
  border-color: var(--red-border);
  background: var(--red-subtle);
}
.ly-identity-action[disabled] {
  opacity: .35;
  cursor: not-allowed;
}

.ly-identity-meta {
  margin: 0;
  font-size: 12px;
  color: var(--txt3);
  line-height: 1.5;
  padding-left: 8px;
}
.ly-identity-meta strong {
  color: var(--txt2);
  font-weight: 600;
}

/* Mobile: stack eyebrow/switcher above, then name row, with actions
   floating off into their own row so the name has breathing room. */
@media (max-width: 640px) {
  .ly-identity-card { padding: 12px 14px 12px 16px; }
  .ly-identity-eyebrow-row { padding-bottom: 8px; margin-bottom: 10px; }
  .ly-identity-switcher { flex-wrap: wrap; }
  .ly-identity-switcher-select { flex: 1 1 140px; max-width: none; }
  .ly-identity-name-row { flex-direction: column; align-items: stretch; gap: 8px; }
  .ly-identity-actions { margin-left: 0; justify-content: flex-end; }
  .ly-identity-name-static,
  .ly-identity-name-input { font-size: 18px; }
}

/* ── Layout editor — Used-by section (kept below identity card) ── */

.ly-layout-usedby {
  padding: 12px 14px;
  margin-bottom: 14px;
  border-radius: 12px;
  border: 1px solid var(--bd);
  background: var(--s1);
}
.ly-layout-usedby-hd {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--txt3);
  margin-bottom: 10px;
}
.ly-usedby-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 32px;
}

/* ── Layout editor — variant bar (Normal / Full Art) ──────── */

.ly-variant-bar {
  display: flex;
  flex-direction: column;
  padding: 12px 16px;
  margin-bottom: 18px;
  border-radius: 10px;
  border: 1px solid var(--bd);
  background: linear-gradient(135deg, rgba(80, 120, 200, .08), rgba(40, 60, 110, .05));
  position: relative;
  transition: border-color .2s, background .2s;
}
.ly-variant-bar[data-variant="full_art"] {
  border-color: rgba(200, 130, 240, .55);
  background: linear-gradient(135deg, rgba(155, 89, 182, .14), rgba(70, 30, 110, .08));
}
.ly-variant-bar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.ly-variant-bar-title { display: flex; flex-direction: column; gap: 2px; }
.ly-variant-bar-eyebrow {
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--txt3);
  font-weight: 600;
}
.ly-variant-bar-name {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--txt);
  line-height: 1.2;
}
.ly-variant-bar[data-variant="full_art"] .ly-variant-bar-name {
  color: #d8a8ff;
}
.seg-ctrl-lg .seg-ctrl-btn {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
}

/* Disabled element row (e.g. image element in full-art mode) */
.ly-el-row.disabled {
  opacity: .4;
  cursor: not-allowed;
  pointer-events: none;
}
.ly-el-row .ly-el-row-note {
  margin-left: auto;
  font-size: 9px;
  letter-spacing: .04em;
  color: var(--txt3);
  text-transform: uppercase;
}

/* ── Layout editor — elements list rows ────────────────────── */

.ly-el-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  background: var(--s2);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.ly-el-row:hover { background: var(--s4); }
.ly-el-row.active {
  background: var(--acc-subtle);
  border-color: rgba(124, 107, 240, .4);
}
.ly-el-row.dim { opacity: .5; }
.ly-eye-btn {
  flex-shrink: 0;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--txt3);
  cursor: pointer;
  transition: color .12s, background .12s;
}
.ly-eye-btn:hover { color: var(--txt); background: var(--s4); }
.ly-eye-btn.on { color: var(--txt2); }
.ly-eye-btn.on:hover { color: var(--acc); background: var(--acc-subtle); }
.ly-el-label {
  flex: 1;
  font-size: 12px;
  color: var(--txt);
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ── Layout editor — rarity color grid ─────────────────────── */

.ly-rarity-color-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 8px;
}
.ly-rarity-color-cell {
  background: var(--s2);
  border: 1px solid var(--bd);
  border-top: 3px solid var(--rarity-col, var(--bd-hi));
  border-radius: 8px;
  padding: 8px;
  min-width: 0;
}
.ly-rarity-color-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--rarity-col, var(--txt2));
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ly-rarity-color-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.ly-rarity-color-tag {
  font-size: 10px;
  font-weight: 700;
  color: var(--txt3);
  width: 14px;
  flex-shrink: 0;
  text-align: center;
}
.ly-color-input {
  display: block;
  margin-top: 6px;
  width: 64px;
  height: 26px;
  border: 1px solid var(--bd);
  border-radius: 4px;
  cursor: pointer;
  padding: 2px;
  background: var(--s3);
}
.ly-rarity-color-row .ly-color-input {
  flex: 1;
  min-width: 0;
  width: auto;
  margin-top: 0;
  height: 24px;
}

/* ── Layout editor — slot action bar (idle ↔ pending) ──────── */

/* Both rows share the same flex layout. Only one is visible at a
   time: when a pending upload is staged, .bg-pending-row loses the
   .hidden class and :has() hides the idle .bg-actions row. */
.bg-actions,
.bg-pending-row {
  width: 100%;
  display: flex;
  gap: 6px;
  margin-top: auto;
}
.bg-pending-row { padding: 0; background: transparent; border: none; }
.bg-pending-row.hidden { display: none; }
.bg-slot:has(.bg-pending-row:not(.hidden)) > .bg-actions { display: none; }

/* The "Pending upload" label is redundant with the NEW badge; hide it
   while keeping the markup intact for screen readers if needed. */
.bg-pending-tag {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0);
}

/* Pending row contains a flex wrapper with the two buttons; flatten it. */
.bg-pending-row > .bg-pending-actions {
  display: contents;
}

/* All slot buttons share a clean, prominent shape. */
.bg-actions > .btn,
.bg-actions > .bg-upload-label,
.bg-pending-row .btn {
  flex: 1;
  min-width: 0;
  height: 32px;
  padding: 0 10px;
  font-size: 12px;
  line-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Reset, Download (idle) and Cancel (pending) collapse to fixed icon
   buttons so the primary Upload action keeps the spotlight. */
.bg-actions > .btn[data-bg-reset],
.bg-actions > .btn[data-shiny-reset],
.bg-actions > .btn[data-bg-download],
.bg-actions > .btn[data-shiny-download],
.bg-pending-row .btn[data-bg-cancel],
.bg-pending-row .btn[data-shiny-cancel] {
  flex: 0 0 36px;
  padding: 0;
  font-size: 14px;
}

.bg-upload-label {
  cursor: pointer;
  margin: 0;
}

/* ── Dashboard ─────────────────────────────────────────────── */

.panel-title-sub {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--txt3);
}

.dash-chart-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--txt3);
  font-size: 13px;
}

/* ── Hero panel: total pulls + sparkline ─────────────────── */
.dash-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 24px;
  align-items: stretch;
  margin-bottom: 12px;
  padding: 22px 24px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 100% at 0% 0%, rgba(124,107,240,.10) 0%, transparent 65%),
    linear-gradient(135deg, var(--s1) 0%, #14141d 100%);
  border: 1px solid var(--bd);
}
.dash-hero::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--bd-hi), transparent);
  opacity: .55;
  pointer-events: none;
}

.dash-hero-left { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.dash-hero-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--txt3);
  margin-bottom: 8px;
}
.dash-hero-value-row { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.dash-hero-value {
  font-size: clamp(40px, 6vw, 56px);
  font-weight: 800;
  letter-spacing: -1.4px;
  line-height: 1;
  color: var(--txt);
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #ffffff 0%, #b8b8d4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.dash-hero-delta {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  border-radius: 999px;
  background: var(--green-subtle);
  color: var(--green);
  border: 1px solid var(--green-border);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.dash-hero-delta.zero {
  background: var(--s3);
  color: var(--txt3);
  border-color: var(--bd);
}
.dash-hero-meta {
  margin-top: 12px;
  font-size: 12px;
  color: var(--txt2);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.dash-hero-meta-stat { font-variant-numeric: tabular-nums; }
.dash-hero-meta-sep  { color: var(--txt3); }

.dash-hero-right {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.dash-hero-spark-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--txt3);
  margin-bottom: 6px;
  text-align: right;
}
.dash-spark-wrap {
  flex: 1;
  position: relative;
  min-height: 110px;
  height: 110px;
}

@media (max-width: 720px) {
  .dash-hero { grid-template-columns: 1fr; gap: 18px; padding: 18px; }
  .dash-hero::before { display: none; }
  .dash-hero-spark-label { text-align: left; }
}

/* ── KPI strip ───────────────────────────────────────────── */
.dash-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}
@media (max-width: 1099px) { .dash-kpi-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .dash-kpi-grid { grid-template-columns: repeat(2, 1fr); } }

.dash-kpi {
  padding: 14px 16px;
  position: relative;
  overflow: hidden;
}
.dash-kpi::before {
  content: '';
  position: absolute;
  left: 0; top: 12px; bottom: 12px;
  width: 2px;
  background: var(--bd-hi);
  opacity: .35;
  border-radius: 0 1px 1px 0;
}
.dash-kpi--shiny::before     { background: linear-gradient(180deg, #fff8c2, #f1c40f); opacity: .8; }
.dash-kpi--fa::before        { background: linear-gradient(180deg, #d8a8ff, #9b59b6); opacity: .8; }
.dash-kpi--legendary::before { background: linear-gradient(180deg, #ffe066, #c8970a); opacity: .9; }
.dash-kpi--epic::before      { background: linear-gradient(180deg, #cb9eff, #9b59b6); opacity: .8; }
.dash-kpi--shards::before    { background: linear-gradient(180deg, #93d5ff, #3498db); opacity: .8; }

.dash-kpi-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--txt3);
  margin-bottom: 6px;
}
.dash-kpi-value {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.5px;
  color: var(--txt);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.dash-kpi-sub {
  font-size: 11px;
  color: var(--txt3);
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}

/* ── Charts row ──────────────────────────────────────────── */
.dash-charts-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
@media (max-width: 699px) { .dash-charts-row { grid-template-columns: 1fr; } }
.dash-chart-wrap { height: 220px; position: relative; }

/* ── Hall of Fame ────────────────────────────────────────── */
.dash-hof-panel { margin-bottom: 12px; }
.dash-hof {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
@media (max-width: 1099px) { .dash-hof { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 599px)  { .dash-hof { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 380px)  { .dash-hof { grid-template-columns: 1fr; } }

.dash-hof-card {
  --rcol: var(--bd-hi);
  position: relative;
  background: var(--s2);
  border: 1px solid var(--bd);
  border-radius: 12px;
  padding: 14px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 130px;
  overflow: hidden;
  transition: border-color .15s, transform .15s, box-shadow .2s;
}
.dash-hof-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--rcol) 16%, transparent) 0%, transparent 60%);
  pointer-events: none;
}
.dash-hof-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--rcol) 30%, var(--rcol) 70%, transparent);
}
.dash-hof-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--rcol) 50%, var(--bd));
  box-shadow: 0 10px 30px -12px color-mix(in srgb, var(--rcol) 30%, transparent);
}
.dash-hof-card--empty { opacity: .55; }
.dash-hof-card--empty:hover { transform: none; }

.dash-hof-rarity {
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--rcol);
  font-weight: 700;
  position: relative;
  text-shadow: 0 0 10px color-mix(in srgb, var(--rcol) 35%, transparent);
}
.dash-hof-tier {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--txt3);
  position: relative;
}
.dash-hof-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--txt);
  letter-spacing: -.2px;
  margin-top: auto;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  position: relative;
  line-height: 1.3;
}
.dash-hof-seq {
  font-size: 10px;
  color: var(--txt3);
  font-weight: 500;
  margin-left: 4px;
  font-variant-numeric: tabular-nums;
}
.dash-hof-stats {
  display: flex;
  align-items: baseline;
  gap: 6px;
  position: relative;
}
.dash-hof-stat-num {
  font-size: 20px;
  font-weight: 700;
  color: var(--txt);
  letter-spacing: -.5px;
  font-variant-numeric: tabular-nums;
}
.dash-hof-stat-lbl {
  font-size: 10px;
  color: var(--txt3);
  letter-spacing: .04em;
}
.dash-hof-variants {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  gap: 4px;
}
.dash-hof-variant {
  background: rgba(9, 9, 15, .6);
  border: 1px solid var(--bd);
  border-radius: 999px;
  font-size: 10px;
  padding: 2px 7px;
  color: var(--txt2);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  backdrop-filter: blur(2px);
}

/* ── Bottom row: collectors + recent pulls ───────────────── */
.dash-bottom-row {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 12px;
  align-items: stretch;
}
.dash-bottom-row > .panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
@media (max-width: 899px) { .dash-bottom-row { grid-template-columns: 1fr; } }

/* Cancel the .panel + .panel top-margin rule inside dashboard grids */
.dash-kpi-grid .panel + .panel,
.dash-charts-row .panel + .panel,
.dash-bottom-row .panel + .panel,
.dash-hof .panel + .panel { margin-top: 0; }

/* ── Top Collectors ──────────────────────────────────────── */
.dash-collectors-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  counter-reset: collector;
}
.dash-collector {
  position: relative;
  padding: 4px 0;
}
.dash-collector + .dash-collector { border-top: 1px solid var(--bd); padding-top: 14px; }

.dash-collector-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.dash-collector-rank {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  width: 26px;
  flex-shrink: 0;
  color: var(--txt3);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.dash-collector-rank[data-rank="1"] { color: #f1c40f; }
.dash-collector-rank[data-rank="2"] { color: #c0c0d0; }
.dash-collector-rank[data-rank="3"] { color: #cd7f32; }

.dash-collector-avatar {
  --hue: 250deg;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  letter-spacing: .04em;
  background: linear-gradient(135deg,
              hsl(var(--hue) 65% 38%),
              hsl(calc(var(--hue) + 40deg) 60% 50%));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 2px 8px rgba(0,0,0,.4);
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}

.dash-collector-id {
  flex: 1;
  min-width: 0;
}
.dash-collector-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--txt);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-collector-meta {
  font-size: 11px;
  color: var(--txt3);
  margin-top: 1px;
  font-variant-numeric: tabular-nums;
}

.dash-collector-count {
  flex-shrink: 0;
  text-align: right;
}
.dash-collector-count-num {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--txt);
  letter-spacing: -.4px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.dash-collector-count-lbl {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--txt3);
  font-weight: 600;
}

.dash-collector-bar {
  margin-top: 8px;
  display: flex;
  height: 8px;
  background: var(--s3);
  border-radius: 4px;
  overflow: visible; /* tooltips need to escape */
  position: relative;
  isolation: isolate;
}
.dash-collector-seg {
  height: 100%;
  position: relative;
  cursor: default;
  transition: filter .15s, transform .15s;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
}
.dash-collector-seg:first-child { border-radius: 4px 0 0 4px; }
.dash-collector-seg:last-child  { border-radius: 0 4px 4px 0; }
.dash-collector-seg:only-child  { border-radius: 4px; }
.dash-collector-seg + .dash-collector-seg { border-left: 1px solid rgba(0, 0, 0, .35); }

.dash-collector-seg:hover { filter: brightness(1.35) saturate(1.1); transform: scaleY(1.35); }

.dash-collector-seg::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(2px);
  background: var(--s1);
  color: var(--txt);
  border: 1px solid var(--bd-hi);
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .12s, transform .12s;
  z-index: 20;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .55);
}
.dash-collector-seg::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 1px);
  left: 50%;
  transform: translateX(-50%) translateY(2px);
  border: 5px solid transparent;
  border-top-color: var(--bd-hi);
  pointer-events: none;
  opacity: 0;
  transition: opacity .12s, transform .12s;
  z-index: 19;
}
.dash-collector-seg:hover::after,
.dash-collector-seg:hover::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.dash-collector-seg--common    { background: linear-gradient(180deg, #b8c1c2 0%, #95A5A6 100%); }
.dash-collector-seg--uncommon  { background: linear-gradient(180deg, #5fe092 0%, #2ECC71 100%); }
.dash-collector-seg--rare      { background: linear-gradient(180deg, #5dade2 0%, #3498DB 100%); }
.dash-collector-seg--epic      { background: linear-gradient(180deg, #c39bd3 0%, #9B59B6 100%); }
.dash-collector-seg--legendary { background: linear-gradient(180deg, #f7dc6f 0%, #F1C40F 100%); }
.dash-collector-seg--mythic    { background: linear-gradient(180deg, #ef8a80 0%, #E74C3C 100%); }

.dash-collector-pills {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.dash-pill {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--s3);
  border: 1px solid var(--bd);
  color: var(--txt2);
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}
.dash-pill--shiny { background: rgba(255,231,150,.10); color: #ffe066;  border-color: rgba(255,224,102,.32); }
.dash-pill--fa    { background: rgba(155,89,182,.10);  color: #cb9eff;  border-color: rgba(155,89,182,.3); }

/* ── Recent pulls ────────────────────────────────────────── */
.dash-recent-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
@media (max-width: 899px) {
  /* On stacked layout the panel has no fixed sibling to match — cap height. */
  .dash-recent-list { max-height: 360px; }
}
.dash-recent-empty {
  color: var(--txt3);
  font-size: 13px;
  padding: 20px 0;
  text-align: center;
}
.dash-recent-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 4px;
  border-bottom: 1px solid var(--bd);
  font-size: 13px;
}
.dash-recent-item:last-child { border-bottom: none; }
.dash-recent-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 8px currentColor;
}
.dash-recent-info {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-recent-variant { font-size: 11px; margin-left: 4px; opacity: .85; }
.dash-recent-meta {
  font-size: 11px;
  color: var(--txt3);
  flex-shrink: 0;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ── Billing pane ──────────────────────────────────────────────
   Editorial premium upgrade page. Borrows the visual vocabulary
   from landing.css's #tiers section (Fraunces italic gradient on
   <em>, violet wash on the highlighted tier, dashed-underline
   list items) but namespaces every class with `billing-` to
   avoid colliding with the rest of the admin SPA. The Fraunces
   font is loaded via the Google Fonts <link> in config.html. */

.billing-pane {
  --display: 'Fraunces', 'Times New Roman', serif;
  --mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;
  --rar-uncommon:  #2ECC71;
  --rar-rare:      #3498DB;
  --rar-epic:      #9B59B6;
  --rar-legendary: #F1C40F;

  padding: 8px 0 32px;
}

/* ── Eyebrow label (mono uppercase) ─────────────────────────── */

.billing-eyebrow {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--txt3);
}

/* ── Tier comparison grid ────────────────────────────────────── */

.billing-tiers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--bd);
  border: 1px solid var(--bd);
  border-radius: 18px;
  overflow: hidden;
  margin-bottom: 24px;
  animation: billingFadeUp .35s cubic-bezier(.2,.8,.2,1) both;
  animation-delay: 80ms;
}
@media (max-width: 720px) {
  .billing-tiers { grid-template-columns: 1fr; }
}

.billing-tier {
  position: relative;
  padding: clamp(24px, 2.6vw, 36px);
  background: var(--s1);
  display: flex;
  flex-direction: column;
}
.billing-tier--hi {
  background:
    linear-gradient(180deg, rgba(124,107,240,.08), transparent 60%),
    var(--s1);
}

.billing-tier-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  min-height: 20px;
}
.billing-tier-tag {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--txt3);
}
.billing-tier--hi .billing-tier-tag { color: var(--acc-hi); }

/* "● You are here" chip — only visible on the user's current tier */
.billing-tier-here {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--green);
  background: var(--green-subtle);
  border: 1px solid var(--green-border);
  border-radius: 999px;
  padding: 3px 9px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.billing-tier-here::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 6px var(--green);
  animation: billingPulse 2s ease-in-out infinite;
}

.billing-tier-name {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.05;
  letter-spacing: -.02em;
  font-variation-settings: "opsz" 36, "SOFT" 80;
  margin: 0 0 18px;
  color: var(--txt);
}
.billing-tier-name em {
  font-style: italic;
  background: linear-gradient(110deg,
                var(--rar-uncommon),
                var(--rar-rare)      35%,
                var(--rar-epic)      65%,
                var(--rar-legendary));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  padding: 0 .12em 0 .02em;
  margin: 0 -.02em;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}

.billing-tier-list {
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 1;
}
.billing-tier-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px dashed var(--bd);
  font-size: 13.5px;
  color: var(--txt2);
}
.billing-tier-list li:last-child { border-bottom: 0; }
.billing-tier--hi .billing-tier-list li { border-bottom-color: var(--bd-hi); }
.billing-tier-list b {
  color: var(--txt);
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: -.01em;
  white-space: nowrap;
}

/* CTA footer inside the Premium tier cell (Subscribe button + fine print) */
.billing-tier-cta {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--bd-hi);
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}
.billing-cta-note {
  margin: 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--txt3);
}

/* ── Receipt strip (Premium with Stripe sub) ─────────────────── */

.billing-receipt {
  background: var(--s2);
  border: 1px solid var(--bd);
  border-radius: 14px;
  padding: 18px 20px;
  animation: billingFadeUp .35s cubic-bezier(.2,.8,.2,1) both;
  animation-delay: 160ms;
}
.billing-receipt[data-tone="warn"] {
  border-color: rgba(241, 196, 15, .35);
  box-shadow: 0 0 0 1px rgba(241, 196, 15, .08) inset;
}
.billing-receipt[data-tone="warn"] .billing-receipt-head .billing-eyebrow::after {
  content: ' · cancellation scheduled';
  color: var(--rar-legendary);
  letter-spacing: .12em;
}

.billing-receipt-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--bd);
}

.billing-receipt-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 24px;
  row-gap: 8px;
  margin: 0;
  font-family: var(--mono);
  font-size: 12.5px;
}
.billing-receipt-grid dt {
  color: var(--txt3);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 11px;
  align-self: center;
}
.billing-receipt-grid dd {
  margin: 0;
  color: var(--txt);
  word-break: break-all;
}
.billing-receipt-grid dd[data-status="active"]     { color: var(--green); }
.billing-receipt-grid dd[data-status="cancelling"] { color: var(--rar-legendary); }

.billing-managed-by {
  margin: 16px 0 0;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--s2, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--bd);
  color: var(--txt2, var(--txt));
  font-size: 12.5px;
  line-height: 1.5;
}
.billing-managed-by strong {
  color: var(--txt);
  font-weight: 600;
}

/* ── Not-configured panel ────────────────────────────────────── */

.billing-not-configured {
  max-width: 520px;
  margin: 32px auto;
  padding: 36px 32px;
  background: var(--s1);
  border: 1px solid var(--bd);
  border-radius: 14px;
  text-align: center;
  animation: billingFadeUp .35s cubic-bezier(.2,.8,.2,1) both;
}
.billing-not-configured .billing-eyebrow { margin-bottom: 16px; }
.billing-not-configured-title {
  font-family: var(--display);
  font-weight: 400;
  font-style: italic;
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: -.015em;
  font-variation-settings: "opsz" 32, "SOFT" 80;
  margin: 0 0 14px;
  color: var(--txt);
}
.billing-not-configured p {
  margin: 0;
  color: var(--txt2);
  font-size: 14px;
}
.billing-not-configured code {
  font-family: var(--mono);
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--s2);
  color: var(--txt);
  border: 1px solid var(--bd);
}

/* ── Animations ──────────────────────────────────────────────── */

@keyframes billingFadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes billingPulse {
  0%, 100% { box-shadow: 0 0 6px var(--green); }
  50%      { box-shadow: 0 0 12px var(--green); }
}

/* ── Sets tab ──────────────────────────────────────────────────
   Panel chrome (collapsible header, summary strip, "+ New set" tile) is
   aliased off the Shop Packs rules higher up in this file. The bits below
   are sets-specific: the in-body members section + the add-cards picker
   modal. */

.set-panel.is-draft {
  border-color: var(--acc);
  box-shadow: 0 0 0 3px var(--acc-glow);
}

/* Members section inside each set's body */
.set-row-members { display: flex; flex-direction: column; gap: 6px; }
.set-row-members-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--txt3);
  font-weight: 700;
}
.set-row-members-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--bd);
  border-radius: 8px;
  background: var(--s2);
  min-height: 40px;
  align-items: center;
}
.set-row-member-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 4px 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--bd);
  background: var(--s3);
  font-size: 12px;
  color: var(--txt);
  max-width: 100%;
}
.set-row-member-rarity { font-size: 12px; flex: 0 0 auto; }
.set-row-member-name {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}
.set-row-member-lock {
  font-size: 11px;
  flex: 0 0 auto;
  cursor: help;
  opacity: .85;
}
.set-row-member-remove {
  border: 0;
  background: transparent;
  color: var(--txt3);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.set-row-member-remove:hover {
  background: var(--red);
  color: #fff;
}
.set-row-add-card {
  border: 1px dashed var(--bd);
  background: transparent;
  color: var(--txt2);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
.set-row-add-card:hover {
  color: var(--acc-hi);
  border-color: var(--acc);
  background: var(--acc-subtle);
}

/* Add-cards picker modal (Sets tab → "+ Add cards" button) */
.set-picker-modal {
  max-width: 720px;
  width: 100%;
  max-height: min(90vh, 720px);
  display: flex;
  flex-direction: column;
  padding: 0;
}
.set-picker-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px 8px;
  border-bottom: 1px solid var(--bd);
}
.set-picker-head h3 { margin: 0; font-size: 16px; font-weight: 700; }
.set-picker-sub {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--txt2);
}
.set-picker-toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  padding: 12px 22px;
  border-bottom: 1px solid var(--bd);
}
.set-picker-toolbar input[type="search"] { flex: 1 1 220px; min-width: 0; }
.set-picker-count {
  font-size: 12px;
  color: var(--txt3);
  margin-left: auto;
  white-space: nowrap;
}
.set-picker-list {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 6px 12px;
  background: var(--s2);
  min-height: 240px;
}
.set-picker-list .empty-state { margin: 16px; }
.set-picker-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  color: var(--txt);
}
.set-picker-row:hover { background: var(--s3); }
.set-picker-row.is-selected { background: var(--acc-subtle); }
.set-picker-row input[type="checkbox"] { flex: 0 0 auto; cursor: pointer; }
.set-picker-rarity { font-size: 14px; flex: 0 0 auto; }
.set-picker-name {
  flex: 1 1 auto;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.set-picker-meta {
  font-size: 11px;
  color: var(--txt3);
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}
.set-picker-lock {
  font-size: 12px;
  flex: 0 0 auto;
  cursor: help;
  opacity: .8;
}
.set-picker-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 22px;
  border-top: 1px solid var(--bd);
}

/* Cards drawer — Sets multi-select chips */
.drawer-sets-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--bd);
  border-radius: 8px;
  background: var(--s2);
  min-height: 40px;
}
.drawer-set-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--bd);
  background: var(--s3);
  color: var(--txt2);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.drawer-set-chip:hover { border-color: var(--bd-hi); color: var(--txt); }
.drawer-set-chip.is-on {
  background: var(--acc-subtle);
  border-color: var(--acc);
  color: var(--acc-hi);
}
.drawer-set-chip.is-on::before { content: "✓ "; }

/* Category already owned by a *different* named layout. Visually flags that
   clicking will *steal* the assignment; the chip's native `title` reveals
   which layout currently owns it. Dashed amber border + arrow glyph makes
   the difference scannable without dominating the wall of chips. */
.drawer-set-chip.has-other-layout {
  background: rgba(214, 162, 60, .06);
  border: 1px dashed rgba(214, 162, 60, .45);
  color: #d6a23c;
}
.drawer-set-chip.has-other-layout::before { content: "↗ "; opacity: .8; }
.drawer-set-chip.has-other-layout:hover {
  border-style: solid;
  border-color: #d6a23c;
  background: rgba(214, 162, 60, .14);
  color: #f0c576;
}

/* Wrapper around (toggle chip + edit ✎) so the two click targets read as one
   capsule. The wrapper paints the border + background once; inner buttons go
   transparent. `:has` picks up the chip's `is-on` toggle state so the wrapper
   tints accent when the card is in this set. */
.drawer-set-chip-wrap {
  display: inline-flex;
  align-items: stretch;
  border-radius: 999px;
  border: 1px solid var(--bd);
  background: var(--s3);
  overflow: hidden;
  transition: background 120ms ease, border-color 120ms ease;
}
.drawer-set-chip-wrap:has(.drawer-set-chip.is-on) {
  background: var(--acc-subtle);
  border-color: var(--acc);
}
.drawer-set-chip-wrap .drawer-set-chip {
  border: 0;
  background: transparent;
  border-radius: 0;
  padding: 4px 6px 4px 10px;
}
.drawer-set-chip-wrap .drawer-set-chip:hover {
  border-color: transparent;
  background: rgba(255, 255, 255, 0.04);
}
.drawer-set-chip-edit {
  border: 0;
  border-left: 1px solid var(--bd);
  background: transparent;
  padding: 4px 9px 4px 6px;
  font-size: 11px;
  color: var(--txt3);
  cursor: pointer;
  transition: color 120ms ease, background 120ms ease;
}
.drawer-set-chip-wrap:has(.drawer-set-chip.is-on) .drawer-set-chip-edit {
  border-left-color: var(--acc);
}
.drawer-set-chip-edit:hover {
  color: var(--acc-hi);
  background: rgba(255, 255, 255, 0.05);
}

/* "+ New set" action chip — visually distinct from toggle chips. */
.drawer-set-chip-add {
  border-style: dashed;
  background: transparent;
  color: var(--txt2);
}
.drawer-set-chip-add:hover {
  border-style: dashed;
  border-color: var(--acc);
  color: var(--acc-hi);
  background: var(--acc-subtle);
}
.drawer-set-chip-add::before { content: ""; }

/* Set create/edit dialog (inline modal triggered from the Cards drawer). */
.set-form-dialog { max-width: 460px; }
.set-form-dialog .lbl { display: block; margin-bottom: 4px; font-size: 12px; }
.set-form-dialog .inp { width: 100%; }
.set-form-dialog textarea.inp { resize: vertical; min-height: 64px; }

/* "Cards →" link in the Sets tab section sub-copy */
.link-like {
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--acc-hi);
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  font-size: inherit;
  font-family: inherit;
}
.link-like:hover { color: var(--acc); }

/* ── Catalog tab (cross-guild card sharing) ─────────────────────────── */
.cat-tabs {
  display: inline-flex;
  gap: 6px;
  padding: 4px;
  background: var(--s1);
  border: 1px solid var(--bd);
  border-radius: 8px;
  margin-bottom: 12px;
}
.cat-tab.btn-ghost {
  border: 1px solid transparent;
  background: transparent;
}
.cat-tab.cat-tab-active {
  background: var(--s3);
  color: var(--txt);
  border-color: var(--bd-hi);
}
.cat-list { display: flex; flex-direction: column; gap: 8px; }
.cat-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 12px;
  background: var(--s2, var(--s1));
  border: 1px solid var(--bd);
  border-radius: 8px;
}
.cat-row-main { flex: 1 1 auto; min-width: 0; }
.cat-row-title { font-weight: 600; color: var(--txt); }
.cat-row-author { color: var(--txt2); font-weight: 400; font-size: 12px; }
.cat-row-meta { font-size: 12px; color: var(--txt2); margin-top: 2px; }
.cat-row-desc { font-size: 12px; color: var(--txt2); margin-top: 4px; line-height: 1.45; }
.cat-row-actions {
  display: flex; flex-direction: column; gap: 4px;
  align-items: flex-end; flex: 0 0 auto;
}
.cat-row-stamp { font-size: 11px; color: var(--txt2); }
.cat-reason {
  margin-top: 6px; font-size: 12px; color: var(--red);
  background: var(--red-subtle); border: 1px solid var(--red-border);
  padding: 4px 8px; border-radius: 6px;
}
.cat-pill {
  display: inline-block; padding: 1px 7px; border-radius: 999px;
  font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  border: 1px solid;
}
.cat-pill-pending { color: #f1c40f; border-color: rgba(241,196,15,.4); background: rgba(241,196,15,.08); }
.cat-pill-ok      { color: #2ecc71; border-color: rgba(46,204,113,.4); background: rgba(46,204,113,.08); }
.cat-pill-bad     { color: var(--red); border-color: var(--red-border); background: var(--red-subtle); }
.cat-pill-muted   { color: var(--txt2); border-color: var(--bd); background: transparent; }
.cat-pill-update-pending {
  color: #f39c12; border-color: rgba(243,156,18,.45); background: rgba(243,156,18,.10);
}
.cat-update-badge {
  display: inline-block; padding: 1px 7px; border-radius: 999px;
  font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: #f39c12; background: rgba(243,156,18,.10);
  border: 1px solid rgba(243,156,18,.45); margin-left: 6px; vertical-align: middle;
}

/* ── Catalog row: gallery-shelf preview + "Yours" affordances ─────────── */
.cat-row {
  flex-wrap: wrap;
  row-gap: 12px;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.cat-row:hover { border-color: var(--bd-hi); }
.cat-row-main { flex: 1 1 60%; min-width: 0; }

/* The outer .cat-row-preview is a transparent flex host that forces the row
 * to wrap and aligns the visible shelf to the left of the row. The shelf
 * itself (.cat-row-shelf) hugs the actual tile content so its gradient /
 * border / scrollbar don't show a big empty patch on the right of the row.
 */
.cat-row-preview {
  flex: 0 0 100%;
  margin-top: 4px;
  display: flex;
  justify-content: flex-start;
  min-width: 0;
}
.cat-row-shelf {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 14px 12px 12px;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(124,107,240,.08) 0%, transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.02) 0%, rgba(0,0,0,.18) 100%);
  border: 1px solid rgba(255,255,255,.04);
  border-radius: 8px;
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--bd) transparent;
}
.cat-row-shelf::-webkit-scrollbar { height: 6px; }
.cat-row-shelf::-webkit-scrollbar-thumb { background: var(--bd); border-radius: 3px; }
.cat-row-thumb {
  position: relative;
  width: 88px; height: 149px;
  background:
    radial-gradient(60% 80% at 50% 30%, #2a2a3a 0%, #14141c 90%);
  border: 1px solid var(--bd);
  border-radius: 8px;
  overflow: hidden;
  flex: 0 0 auto;
  /* Card-hand effect: overlap + organic tilt set per-tile via inline vars. */
  margin-left: -14px;
  transform: rotate(var(--tilt, 0deg));
  transition: transform .22s cubic-bezier(.2,.7,.2,1.2),
              box-shadow .22s ease,
              z-index 0s;
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 6px 14px -8px rgba(0,0,0,.55);
  z-index: 1;
}
.cat-row-thumb:first-child { margin-left: 0; }
.cat-row-thumb:hover {
  transform: rotate(0deg) translateY(-6px) scale(1.06);
  z-index: 9;
  box-shadow:
    0 1px 0 rgba(255,255,255,.10) inset,
    0 18px 34px -10px rgba(0,0,0,.65),
    0 0 0 1px rgba(124,107,240,.45);
}
.cat-row-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.cat-row-thumb.is-fa {
  border-color: rgba(241,196,15,.40);
  box-shadow:
    0 0 0 1px rgba(241,196,15,.20) inset,
    0 6px 16px -8px rgba(241,196,15,.18),
    0 6px 14px -8px rgba(0,0,0,.55);
}
.cat-row-thumb.is-fa::after {
  content: '❖';
  position: absolute;
  top: 3px; right: 4px;
  font-size: 10px;
  color: rgba(241,196,15,.85);
  text-shadow: 0 1px 2px rgba(0,0,0,.7);
  pointer-events: none;
}
.cat-row-thumb-empty {
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border-style: dashed;
  color: var(--txt3);
  font-size: 14px;
  letter-spacing: 3px;
  margin-left: 0;
  transform: none;
}
.cat-row-thumb-empty::after { content: none; }
.cat-row--yours {
  position: relative;
  border-color: rgba(124,107,240,.32);
  background:
    linear-gradient(90deg, rgba(124,107,240,.06) 0%, transparent 60%),
    var(--s2, var(--s1));
}
.cat-row--yours::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--acc);
  border-radius: 8px 0 0 8px;
}
.cat-yours-pill {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--acc-hi, var(--acc));
  background: rgba(124,107,240,.12);
  border: 1px solid rgba(124,107,240,.42);
  vertical-align: middle;
  margin-left: 4px;
}
.cat-imported-pill {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #2ecc71;
  background: rgba(46,204,113,.10);
  border: 1px solid rgba(46,204,113,.40);
  vertical-align: middle;
  margin-left: 4px;
}
.cat-row--imported {
  border-color: rgba(46,204,113,.24);
  background:
    linear-gradient(90deg, rgba(46,204,113,.05) 0%, transparent 60%),
    var(--s2, var(--s1));
}
.cat-row--imported::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px;
  background: #2ecc71;
  border-radius: 8px 0 0 8px;
}
.cat-row { position: relative; }

/* ── Your submissions (drafts + in-review + rejects + withdrawn) ──────── */
.cat-your-submissions {
  margin: 4px 0 14px;
  padding: 10px 12px 12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.015) 0%, transparent 80%),
    rgba(124,107,240,.025);
  border: 1px dashed rgba(124,107,240,.28);
  border-radius: 10px;
}
.cat-your-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
}
.cat-your-label {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--txt2);
}
.cat-your-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  font-size: 11px; font-weight: 700;
  color: var(--acc-hi, var(--acc));
  background: rgba(124,107,240,.12);
  border: 1px solid rgba(124,107,240,.36);
  border-radius: 999px;
}
.cat-your-list { display: flex; flex-direction: column; gap: 6px; }
.cat-your-item {
  display: flex; gap: 10px; align-items: center;
  padding: 8px 10px;
  background: var(--s1);
  border: 1px solid var(--bd);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.cat-your-item:hover { border-color: var(--bd-hi); }
.cat-your-thumbs {
  display: flex; gap: 3px; flex: 0 0 auto;
}
.cat-your-thumbs .cat-row-thumb {
  width: 40px; height: 68px; border-radius: 5px;
  margin-left: 0;             /* override the gallery-shelf overlap */
  transform: none;            /* and the organic tilt */
  box-shadow: 0 2px 6px -3px rgba(0,0,0,.5);
}
.cat-your-thumbs .cat-row-thumb:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow:
    0 8px 14px -6px rgba(0,0,0,.55),
    0 0 0 1px rgba(124,107,240,.4);
}
.cat-your-thumbs .cat-row-thumb.is-fa::after { font-size: 9px; top: 1px; right: 2px; }
.cat-your-meta { flex: 1 1 auto; min-width: 0; }
.cat-your-title {
  font-weight: 600; font-size: 13px; color: var(--txt);
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.cat-your-actions {
  display: flex; flex-direction: column; gap: 4px;
  align-items: flex-end; flex: 0 0 auto;
}

@media (max-width: 720px) {
  .cat-row-actions { flex-basis: 100%; flex-direction: row; justify-content: flex-end; }
  .cat-row-thumb { width: 76px; height: 129px; margin-left: -12px; }
  .cat-your-item { flex-wrap: wrap; }
  .cat-your-thumbs { order: 2; }
  .cat-your-actions { order: 3; flex-basis: 100%; flex-direction: row; justify-content: flex-end; }
}

.cat-browse-bar { margin-bottom: 14px; }

/* ── Catalog search field ─────────────────────────────────────────────── */
.cat-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
  background:
    linear-gradient(180deg, rgba(124,107,240,.04) 0%, transparent 70%),
    var(--s2);
  border: 1px solid var(--bd);
  border-radius: 12px;
  padding: 0 10px 0 0;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
  isolation: isolate;
}
.cat-search::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(124,107,240,.45), transparent 40%, rgba(124,107,240,.25));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
  z-index: -1;
}
.cat-search:focus-within {
  border-color: var(--acc);
  box-shadow: 0 0 0 4px var(--acc-glow), 0 8px 24px -16px rgba(124,107,240,.55);
  background:
    linear-gradient(180deg, rgba(124,107,240,.07) 0%, transparent 70%),
    var(--s2);
}
.cat-search:focus-within::before { opacity: 1; }
.cat-search-icon {
  flex: 0 0 auto;
  width: 16px; height: 16px;
  margin: 0 8px 0 12px;
  color: var(--txt3);
  transition: color .15s ease;
}
.cat-search:focus-within .cat-search-icon { color: var(--acc-hi); }
.cat-search-inp {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--txt);
  font-family: inherit;
  font-size: 14px;
  letter-spacing: .005em;
  padding: 11px 8px 11px 0;
}
.cat-search-inp::placeholder { color: var(--txt3); }
.cat-search-inp::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.cat-search-clear {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 999px;
  background: rgba(255,255,255,.04);
  color: var(--txt2);
  cursor: pointer;
  transition: background .12s ease, color .12s ease, transform .12s ease;
  padding: 0;
}
.cat-search-clear:hover { background: var(--s3); color: var(--txt); transform: scale(1.08); }
.cat-search-clear:focus-visible {
  outline: none;
  background: var(--s3);
  color: var(--txt);
  box-shadow: 0 0 0 2px var(--acc-glow);
}
.cat-search-clear svg { width: 11px; height: 11px; }
.cat-search-kbd {
  flex: 0 0 auto;
  margin-left: 8px;
  font-family: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--txt3);
  background: var(--s1);
  border: 1px solid var(--bd);
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: 2px 6px;
  line-height: 1;
  user-select: none;
  transition: opacity .15s ease;
}
.cat-search:focus-within .cat-search-kbd { opacity: 0; pointer-events: none; }
@media (max-width: 540px) {
  .cat-search-kbd { display: none; }
}
.modal-label { display: block; font-size: 11px; color: var(--txt2); margin-top: 6px; margin-bottom: 4px; letter-spacing: .04em; }
.cat-cat-picker { display: flex; flex-direction: column; gap: 6px; max-height: 240px; overflow-y: auto; }
.cat-cat-pick {
  display: flex; align-items: center; gap: 8px; padding: 6px 10px;
  border: 1px solid var(--bd); border-radius: 6px; cursor: pointer; user-select: none;
}
.cat-cat-pick input:disabled + span { color: var(--txt2); }
.cat-publish-box { max-width: 640px; }

/* ── Catalog inspect modal — calque visuel de .gc-tile (collection page) */
.cat-inspect-box {
  width: min(92vw, 1280px);
  max-width: none;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}
.cat-inspect-header {
  position: sticky; top: 0; z-index: 3;
  padding: 16px 22px 10px;
  background: var(--s1);
  border-bottom: 1px solid var(--bd);
}
.cat-inspect-title {
  display: flex; align-items: flex-start; gap: 12px; justify-content: space-between;
}
.cat-inspect-title h3 {
  margin: 0; font-size: 18px; font-weight: 700; color: var(--txt); line-height: 1.25;
}
.cat-inspect-subtitle { margin-top: 4px; font-size: 12px; color: var(--txt2); }
.cat-inspect-desc {
  margin-top: 6px; font-size: 12px; color: var(--txt2); line-height: 1.5;
  font-style: italic;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cat-inspect-close {
  flex: 0 0 auto;
  width: 30px; height: 30px; border-radius: 50%;
  background: transparent; border: 1px solid var(--bd); color: var(--txt2);
  font-size: 16px; line-height: 1; cursor: pointer;
}
.cat-inspect-close:hover { background: var(--s3); color: var(--txt); }

.cat-inspect-toolbar {
  position: sticky; top: 0; z-index: 2;
  padding: 12px 22px;
  background: var(--s1);
  border-bottom: 1px solid var(--bd);
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
}
.cat-inspect-toolbar .cat-search { flex: 1 1 280px; min-width: 0; }
.cat-variant-seg {
  display: inline-flex; gap: 2px;
  background: var(--s3); border: 1px solid var(--bd);
  border-radius: 10px; padding: 3px;
  position: relative;
}
.cat-variant-seg button {
  background: transparent; border: 0; color: var(--txt2);
  padding: 6px 14px; border-radius: 7px;
  font-size: 12px; font-weight: 500; letter-spacing: .01em;
  cursor: pointer;
  transition: color .15s ease, background .15s ease;
}
.cat-variant-seg button:hover:not(:disabled) { color: var(--txt); }
.cat-variant-seg button.active {
  background: var(--s1); color: var(--txt);
  box-shadow: 0 1px 3px rgba(0,0,0,.5);
}
/* Full art active state — subtle holographic accent so the showcase mode reads. */
.cat-variant-seg button[data-variant="full_art"].active {
  background:
    linear-gradient(135deg, rgba(124,107,240,.22) 0%, rgba(241,196,15,.10) 60%, rgba(46,204,113,.16) 100%),
    var(--s1);
  color: var(--txt);
  box-shadow: 0 1px 3px rgba(0,0,0,.5), inset 0 0 0 1px rgba(124,107,240,.25);
}
.cat-variant-seg button:disabled { opacity: .35; cursor: not-allowed; }
.cat-filter-count { color: var(--txt2); font-size: 11px; margin-left: auto; font-variant-numeric: tabular-nums; }

.cat-inspect-body {
  flex: 1 1 auto; overflow-y: auto;
  padding: 16px 22px 22px;
}
.cat-inspect-footer {
  position: sticky; bottom: 0; z-index: 2;
  padding: 12px 22px;
  background: var(--s1);
  border-top: 1px solid var(--bd);
  display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap;
}
.cat-inspect-footer .left { margin-right: auto; }

/* Tiles — copy of .gc-tile, namespaced .cat-tile */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.85rem;
  transition: gap .25s ease;
}
/* Showcase grid: full-art mode renders larger, more cinematic tiles. */
.cat-grid.cat-grid--showcase {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.1rem;
}
@media (max-width: 540px) {
  .cat-grid,
  .cat-grid.cat-grid--showcase { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.cat-tile {
  position: relative;
  aspect-ratio: 180 / 305;
  background: #18181f;
  border: 1px solid #27273a;
  border-radius: 12px;
  overflow: hidden;
  transition: transform 220ms cubic-bezier(.2,.8,.2,1),
              border-color 140ms,
              box-shadow 220ms ease;
  --tile-rarity: #95A5A6;
}
.cat-tile:hover {
  transform: translateY(-3px);
  border-color: var(--tile-rarity);
  box-shadow: 0 12px 30px -18px rgba(0,0,0,.9),
              0 0 0 1px color-mix(in oklab, var(--tile-rarity) 35%, transparent);
}
.cat-tile.hidden { display: none; }
.cat-tile-img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  background: #09090f;
}
/* Subtle holographic sweep on tiles currently rendering full art. */
.cat-tile.is-fa::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(135deg,
      rgba(255,255,255,.10) 0%,
      transparent 25%,
      transparent 65%,
      color-mix(in oklab, var(--tile-rarity) 28%, transparent) 100%);
  mix-blend-mode: screen;
  opacity: .55;
  transition: opacity .2s ease;
}
.cat-tile.is-fa:hover::after { opacity: .8; }
.cat-tile-fa-btn {
  position: absolute; top: 6px; right: 6px;
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(0,0,0,.65);
  border: 1px solid rgba(255,255,255,.25);
  color: #fff; font-size: 13px; line-height: 1;
  cursor: pointer;
  opacity: 0; transition: opacity .12s, background .12s, border-color .12s, transform .12s;
  display: inline-flex; align-items: center; justify-content: center;
  z-index: 2;
}
.cat-tile:hover .cat-tile-fa-btn,
.cat-tile-fa-btn.active { opacity: 1; }
.cat-tile-fa-btn:hover { transform: scale(1.08); }
.cat-tile-fa-btn.active {
  background: var(--acc); border-color: var(--acc-hi);
  box-shadow: 0 0 12px -2px var(--acc-glow);
}
/* Subtle "FA available" marker — a small accent dot bottom-right when card
   has a full art and we're currently showing the normal variant. */
.cat-tile[data-has-fa="1"]:not(.is-fa)::before {
  content: "❖";
  position: absolute;
  bottom: 6px; right: 8px;
  font-size: 10px;
  color: rgba(255,255,255,.55);
  text-shadow: 0 1px 2px rgba(0,0,0,.7);
  pointer-events: none;
  z-index: 1;
  opacity: .7;
  transition: opacity .15s ease;
}
.cat-tile[data-has-fa="1"]:not(.is-fa):hover::before { opacity: 0; }
.cat-tile[data-rarity="common"]    { --tile-rarity: #95A5A6; }
.cat-tile[data-rarity="uncommon"]  { --tile-rarity: #2ECC71; }
.cat-tile[data-rarity="rare"]      { --tile-rarity: #3498DB; }
.cat-tile[data-rarity="epic"]      { --tile-rarity: #9B59B6; }
.cat-tile[data-rarity="legendary"] { --tile-rarity: #F1C40F; }
.cat-tile[data-rarity="mythic"]    { --tile-rarity: #E74C3C; }

/* Categories accordion */
.cat-cat-block { margin: 0 0 22px; }
.cat-cat-block.hidden { display: none; }
.cat-cat-block summary.cat-cat-summary {
  font-size: 13px; font-weight: 600; color: var(--txt);
  padding: 8px 0 10px; cursor: pointer; user-select: none;
  list-style: none;
  display: flex; align-items: center; gap: 8px;
}
.cat-cat-block summary.cat-cat-summary::-webkit-details-marker { display: none; }
.cat-cat-block summary.cat-cat-summary::before { content: '▾'; color: var(--txt3); width: 10px; }
.cat-cat-block:not([open]) summary.cat-cat-summary::before { content: '▸'; }
.cat-cat-icon {
  width: 22px; height: 22px; border-radius: 50%; object-fit: cover;
  border: 1px solid var(--bd); background: var(--s2);
  flex: 0 0 auto;
}
.cat-cat-icon-fallback {
  width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: #fff;
  flex: 0 0 auto;
}
.cat-cat-count { color: var(--txt2); font-weight: 400; margin-left: 4px; }

/* Sets / Layouts sections */
.cat-section { margin-top: 20px; }
.cat-section h4 {
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--txt3); margin: 0 0 10px;
}
.cat-set-row, .cat-layout-row {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 10px 12px;
  background: rgba(255,255,255,.012);
  border: 1px solid var(--bd);
  border-radius: 8px;
  margin-bottom: 8px;
}
.cat-set-meta { flex: 1 1 auto; min-width: 0; }
.cat-set-name { font-weight: 600; color: var(--txt); font-size: 13px; }
.cat-set-desc { color: var(--txt2); font-size: 12px; margin-top: 3px; line-height: 1.45; }
.cat-set-pill {
  display: inline-block; margin-left: 8px;
  padding: 1px 7px; border-radius: 999px;
  font-size: 10px; font-weight: 700;
  background: rgba(124,107,240,.15); color: var(--acc-hi);
  border: 1px solid rgba(124,107,240,.35);
}
.cat-set-thumbs {
  display: flex; gap: 4px; flex-wrap: wrap;
  flex: 0 1 auto; max-width: 60%;
}
.cat-set-thumb {
  width: 50px; aspect-ratio: 180/305;
  border: 1px solid var(--bd); border-radius: 4px; overflow: hidden;
  background: #09090f;
  flex: 0 0 auto;
}
.cat-set-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cat-set-thumb-more {
  width: 50px; aspect-ratio: 180/305;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px dashed var(--bd); border-radius: 4px;
  color: var(--txt2); font-size: 11px;
  flex: 0 0 auto;
}
.cat-layout-row { gap: 10px; align-items: center; }
.cat-layout-icon { color: var(--txt3); font-size: 14px; }
.cat-layout-name { color: var(--txt); font-size: 13px; }
.cat-layout-meta { color: var(--txt2); font-size: 11px; margin-left: 6px; }
.cat-layout-row--default {
  border-left: 2px solid var(--acc-hi);
  background: var(--acc-subtle);
}
.cat-layout-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--acc-glow);
  color: var(--acc-hi);
  font-size: 10px;
  letter-spacing: .04em;
  text-transform: uppercase;
  vertical-align: middle;
}

.cat-empty-filter {
  text-align: center; padding: 3rem 1rem;
  color: var(--txt2); font-size: 0.95rem;
  grid-column: 1 / -1;
}