:root {
  --bg: #0f1419;
  --panel: #182029;
  --panel-2: #1f2a35;
  --border: #2c3a48;
  --text: #e6edf3;
  --muted: #8b9bab;
  --accent: #4c9aff;
  --ok: #3fb950;
  --error: #f85149;
  --foil: #d2a8ff;
  --etched: #f0b72f;
  color-scheme: dark;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
}
[hidden] { display: none !important; }
button, input, select { font: inherit; color: inherit; }
input, select {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 8px;
}
input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
button {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
}
button:hover { border-color: var(--accent); }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
button.danger { border-color: var(--error); color: var(--error); }
button.icon { padding: 2px 8px; color: var(--muted); }
kbd {
  display: inline-block;
  min-width: 1.6em;
  padding: 0 5px;
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--panel-2);
  font: 12px/1.6 ui-monospace, monospace;
  text-align: center;
}
.muted { color: var(--muted); }
.mono { font-family: ui-monospace, monospace; }
.error { color: var(--error); }
.info { color: var(--muted); }

.topbar {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
}
.topbar nav { display: flex; gap: 4px; flex-wrap: wrap; }
.topbar nav a { color: var(--muted); text-decoration: none; padding: 4px 10px; border-radius: 6px; }
.topbar nav a:hover { color: var(--text); }
.topbar nav a.active { color: var(--text); background: var(--panel-2); }

/* ---- entry ---- */
.context {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  align-items: center;
  padding: 12px 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}
.ctx { display: flex; align-items: center; gap: 8px; }
.ctx.grow { flex: 1; min-width: 260px; }
.ctx label, .ctx .label { color: var(--muted); white-space: nowrap; }
.set-input { width: 6.5em; font-size: 22px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.tag-wrap { position: relative; flex: 1; }
.tag-input { width: 100%; font-size: 20px; font-weight: 600; }
.count { font-size: 26px; min-width: 2ch; text-align: right; }
.segmented { display: inline-flex; }
.segmented button { border-radius: 0; margin-left: -1px; }
.segmented button:first-child { border-radius: 6px 0 0 6px; }
.segmented button:last-child { border-radius: 0 6px 6px 0; }
.segmented button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.segmented button[data-finish="foil"][aria-pressed="true"] { background: #8957e5; border-color: #8957e5; }
.segmented button[data-finish="etched"][aria-pressed="true"] { background: #9e6a03; border-color: #9e6a03; }

.suggestions {
  position: absolute;
  z-index: 20;
  top: 100%;
  left: 0;
  right: 0;
  margin: 2px 0 0;
  padding: 4px 0;
  list-style: none;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 8px 24px #0008;
}
.suggestions li { padding: 4px 10px; cursor: pointer; }
.suggestions li.active, .suggestions li:hover { background: var(--accent); color: #fff; }

.entry-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 16px;
  padding: 16px;
}
.buffer-panel {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 8px 24px;
  border-radius: 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  min-height: 140px;
}
.buffer {
  font: 700 104px/1 ui-monospace, monospace;
  min-width: 4ch;
  letter-spacing: 0.04em;
}
.buffer.empty { color: var(--border); }
#message { font-size: 20px; flex: 1; }
#message.error { color: var(--error); font-weight: 600; }
#message.info { color: var(--muted); }
.buffer-panel.flash { animation: flash 0.5s ease-out; }
@keyframes flash {
  0% { background: var(--error); border-color: var(--error); }
  100% { background: var(--panel); }
}
.pending-finish .finish { font-size: 22px; padding: 4px 12px; }

.last-card { display: flex; gap: 24px; margin-top: 16px; align-items: flex-start; }
.last-card .placeholder { color: var(--muted); font-size: 20px; padding: 40px 0; }
.card-img img, .card-img .noimg { width: 340px; aspect-ratio: 488 / 680; border-radius: 16px; display: block; }
.card-img .noimg { background: var(--panel-2); display: grid; place-items: center; padding: 16px; text-align: center; }
.card-img.shiny img { box-shadow: 0 0 0 3px var(--foil), 0 0 24px var(--foil); }
.card-info { display: flex; flex-direction: column; gap: 10px; font-size: 18px; }
.card-name { font-size: 34px; font-weight: 700; line-height: 1.15; }
.card-meta { font: 22px ui-monospace, monospace; color: var(--muted); }
.qty { margin-left: 8px; font-weight: 700; color: var(--ok); }

.finish { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.finish-nonfoil { background: var(--panel-2); color: var(--muted); }
.finish-foil { background: #8957e533; color: var(--foil); border: 1px solid var(--foil); }
.finish-etched { background: #9e6a0333; color: var(--etched); border: 1px solid var(--etched); }
.chips { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.chip { white-space: nowrap; padding: 1px 8px; border-radius: 999px; background: #4c9aff22; border: 1px solid #4c9aff66; font-size: 13px; }

.log-panel { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 12px; align-self: start; }
.log-panel h2 { margin: 0 0 8px; font-size: 14px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.log { list-style: none; margin: 0; padding: 0; }
.log li { display: flex; gap: 8px; align-items: baseline; padding: 4px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.log li:first-child { font-weight: 700; }
.log li.pending { opacity: 0.55; }
.log-num { font-family: ui-monospace, monospace; color: var(--muted); white-space: nowrap; }
.log-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log-tags { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 90px; }

.picker {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: #0b0f14f2;
  padding: 32px;
  overflow: auto;
}
.picker-head { font-size: 22px; margin-bottom: 16px; }
.picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; }
.option { position: relative; background: var(--panel); border: 2px solid var(--border); border-radius: 12px; padding: 8px; }
.option.selected { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent); }
.option img, .option .noimg { width: 100%; aspect-ratio: 146 / 204; border-radius: 8px; display: block; object-fit: cover; }
.option-key { position: absolute; top: 4px; left: 4px; background: var(--accent); color: #fff; font: 700 24px/1 ui-monospace, monospace; padding: 6px 10px; border-radius: 8px; }
.option-label { margin-top: 6px; font-weight: 600; }
.option-finishes { color: var(--muted); font-size: 13px; }

.help { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 8px 16px 24px; color: var(--muted); font-size: 13px; }

/* ---- collection ---- */
.filters, .retag-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px 16px; }
.filters { border-bottom: 1px solid var(--border); }
.retag-bar { position: sticky; top: 0; z-index: 5; background: var(--panel); border-bottom: 1px solid var(--border); }
.retag-bar .tag-wrap { flex: 0 1 280px; }
.retag-bar .tag-wrap input { width: 100%; }
.qty-input { width: 5em; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 5px 10px; border-bottom: 1px solid var(--border); }
th { color: var(--muted); font-weight: 600; font-size: 13px; position: sticky; top: 57px; background: var(--bg); }
tbody tr { cursor: pointer; user-select: none; }
tbody tr:hover { background: var(--panel); }
tbody tr.selected { background: #4c9aff26; }
td.name { font-weight: 500; }
#collection tr.spacer td { padding: 0; border: 0; }
.gc-star { color: #f0b72f; white-space: nowrap; cursor: help; }
.cmd-rank { padding: 0 16px 12px; }
.cmd-rank-table tbody tr { cursor: pointer; }
.cmd-rank-table tbody tr:hover { background: var(--panel-2); }
.cmd-rank-table tr.dim td { opacity: .55; }
.preview { position: fixed; right: 16px; bottom: 16px; width: 260px; border-radius: 12px; pointer-events: none; box-shadow: 0 8px 32px #000a; z-index: 10; }

/* ---- login ---- */
body.login { display: grid; place-items: center; min-height: 100vh; }
body.login form { display: flex; flex-direction: column; gap: 12px; width: 300px; padding: 32px; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; }
body.login h1 { margin: 0 0 8px; font-size: 22px; }

@media (max-width: 1000px) {
  .entry-main { grid-template-columns: 1fr; }
  .card-img img, .card-img .noimg { width: 240px; }
  .buffer { font-size: 72px; }
}

/* ---- prices ---- */
.num { text-align: right; white-space: nowrap; }
.price { font-variant-numeric: tabular-nums; }
.price.none { color: var(--muted); }
.price.usd { color: var(--etched); }
.price.value { font-weight: 600; }
.price .gbp, .price-secondary { color: var(--muted); font-size: 12px; }
.price-secondary { display: block; }
.card-price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.card-price .price { font-size: 26px; font-weight: 700; }
.card-price .price-secondary { display: inline; font-size: 15px; }
.small { font-size: 13px; }
.as-of { color: var(--muted); font-size: 13px; }
.as-of.stale { color: var(--etched); font-weight: 600; }
.session-value { color: var(--muted); font-variant-numeric: tabular-nums; }
.value-total { margin-left: auto; font-size: 18px; font-variant-numeric: tabular-nums; }
.price-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 8px 16px; border-bottom: 1px solid var(--border); }
.rate-input { width: 5em; }
.th-sort { background: none; border: none; padding: 0; color: inherit; font: inherit; cursor: pointer; }
.th-sort:hover { color: var(--text); }

/* ---- commander ---- */
.cmd-input { width: 22em; }
.cmd-header { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 16px; padding: 12px 16px 0; }
.cmd-header:empty { display: none; }
.cmd-header-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; flex: 1 1 320px; }
.cmd-header-text h2 { flex-basis: 100%; }
.cmd-cards { display: flex; gap: 10px; }
.cmd-card { margin: 0; width: 180px; display: flex; flex-direction: column; gap: 6px; }
.cmd-card img, .cmd-card .noimg { width: 100%; border-radius: 9px; display: block; }
.cmd-card .noimg { aspect-ratio: 488 / 680; display: grid; place-items: center; background: var(--panel-2); text-align: center; padding: 8px; }
@media (max-width: 600px) { .cmd-card { width: 140px; } }
.cmd-header h2 { margin: 0; font-size: 26px; }
.cmd-header a { color: var(--accent); }
#cmd-status { padding: 6px 16px; min-height: 1.4em; }
#cmd-status.warn { color: var(--etched); }
#cmd-results h3 { margin: 0; font-size: 16px; }
.retag-bar.static { position: static; }
tr.group-row td { background: var(--panel); color: var(--muted); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; cursor: default; }
.chip.deck { background: #3fb95022; border-color: #3fb95088; }
#cmd-missing tbody tr { cursor: default; }
#cmd-owned th, #cmd-missing th { top: 0; }
.cmd-input { max-width: 100%; }
@media (max-width: 760px) {
  .table-scroll { overflow-x: auto; }
  .table-scroll table { min-width: 640px; }
  .filters label, .cmd-input { width: 100%; }
}

/* ---- card filters ---- */
.chip-bar { display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 10px 16px; border-bottom: 1px solid var(--border); }
.fgroup { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.flabel { color: var(--muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin-right: 4px; }
.fchip { padding: 2px 9px; border-radius: 999px; font-size: 13px; line-height: 1.5; }
.fchip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.fchip.exclude { background: #f8514926; border-color: var(--error); color: var(--error); text-decoration: line-through; }
.fchip.fmode-toggle { color: var(--muted); border-style: dashed; }
.fchip.mana { width: 2em; padding: 2px 0; font-weight: 700; }
.fchip.mana-W.on { background: #f8f0d0; border-color: #f8f0d0; color: #222; }
.fchip.mana-U.on { background: #2d7ff9; border-color: #2d7ff9; }
.fchip.mana-B.on { background: #5a4a5e; border-color: #8a7a8e; }
.fchip.mana-R.on { background: #e5483c; border-color: #e5483c; }
.fchip.mana-G.on { background: #2e9d55; border-color: #2e9d55; }
.fchip.mana-C.on { background: #a0a8b0; border-color: #a0a8b0; color: #222; }
.fchip.mana-M.on { background: linear-gradient(135deg, #e5483c, #f0b72f, #2e9d55, #2d7ff9); border-color: #f0b72f; }
.fmode { padding: 2px 6px; font-size: 13px; }
.fnum { width: 4.2em; padding: 2px 6px; }
.fsub-wrap { flex: 0 0 150px; }
.fsub { width: 100%; padding: 2px 8px; }
.fclear { padding: 2px 10px; font-size: 13px; }
td.type-line { color: var(--muted); font-size: 13px; }
td.entered { color: var(--muted); font-size: 13px; white-space: nowrap; }

/* ---- languages ---- */
.lang-wrap { width: 9em; }
.lang-input { width: 100%; font-size: 18px; font-weight: 600; }
.lang-input.foreign { border-color: var(--etched); color: var(--etched); }
.lang-badge { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 4px; background: #f0b72f22; border: 1px solid var(--etched); color: var(--etched); font-size: 14px; font-weight: 700; }
.lang-badge.small { font-size: 11px; padding: 0 5px; margin-left: 6px; }

/* ---- locations ---- */
#entry-view { --loc-colour: #8b949e; }
#entry-view .context { border-top: 8px solid var(--loc-colour); }
#entry-view .buffer-panel { border-left: 16px solid var(--loc-colour); }
#entry-view .last-card .card-img img { outline: 4px solid var(--loc-colour); outline-offset: 3px; }
.loc-swatch { display: inline-block; width: 22px; height: 22px; border-radius: 5px; flex: none; }
.loc-wrap { width: 15em; }
.loc-input { width: 100%; font-size: 20px; font-weight: 700; }
.loc-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; flex: none; }
.loc-suggestions li { display: flex; align-items: center; }
.loc-suggestions li.create { color: var(--accent); font-style: italic; }
.loc-suggestions li.create.active { color: #fff; }
.loc-create { position: absolute; z-index: 21; top: 100%; left: 0; margin-top: 2px; display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; background: var(--panel-2); border: 1px solid var(--accent); border-radius: 6px; white-space: nowrap; box-shadow: 0 8px 24px #0008; }
.loc-create input[type=color] { width: 44px; height: 30px; padding: 0 2px; }
.card-location { display: flex; align-items: center; font-size: 20px; font-weight: 600; }
.loc-chip { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px 1px 6px; border-radius: 999px; font-size: 13px;
  white-space: nowrap; border: 1px solid color-mix(in srgb, var(--c) 60%, transparent); background: color-mix(in srgb, var(--c) 18%, transparent); }
.loc-chip::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.fchip.loc.on { background: color-mix(in srgb, var(--c) 45%, var(--panel-2)); border-color: var(--c); }
.fchip.loc::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; background: var(--c); }
.unsorted-banner { margin: 10px 16px 0; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--etched); background: #f0b72f18; color: var(--etched); }
.unsorted-banner a { color: inherit; font-weight: 700; }
#unconfirmed-banner { border-color: var(--accent); background: #4c9aff14; color: var(--text); }
#unconfirmed-banner .button-link { color: var(--text); }
a.chip-unconfirmed { text-decoration: none; color: var(--etched); border-color: var(--etched); }
.conflict { color: var(--etched); cursor: help; margin-left: 6px; }
.loc-filter { padding-bottom: 0; border-bottom: none; }

/* ---- locations page ---- */
.loc-page { padding: 16px; max-width: 1100px; }
.loc-new { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px; }
.loc-new input[type=text] { width: 16em; }
.loc-new .desc { width: 22em; }
.loc-table td { vertical-align: middle; }
.loc-table tbody tr { cursor: default; }
.loc-table input[type=text] { width: 100%; }
.loc-table input[type=color] { width: 44px; height: 30px; padding: 0 2px; }
.loc-table .order button { padding: 0 7px; }
.loc-table .system { color: var(--muted); font-size: 12px; margin-left: 6px; }
.loc-table tr.dragging { opacity: 0.4; }
.loc-table tr.drop-target { box-shadow: inset 0 3px 0 var(--accent); }
.loc-delete { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px 0; color: var(--error); }
.drag { cursor: grab; color: var(--muted); padding: 0 6px; user-select: none; }
@media (max-width: 760px) {
  .filters select { max-width: 100%; }
  .loc-wrap { width: 100%; }
  .loc-ctx { flex-wrap: wrap; width: 100%; }
}
.loc-page { max-width: 1300px; }
.loc-name { white-space: nowrap; }
.loc-name input { width: calc(100% - 24px); min-width: 12em; }
.tree-mark { color: var(--muted); margin-right: 6px; }
.loc-table select { max-width: 16em; }
.fchip.loc.child { border-style: dashed; }
.loc-wrap { width: 22em; }
.loc-table .order { white-space: nowrap; }
.loc-table td.loc-name { display: flex; align-items: center; gap: 6px; }
.loc-table td.loc-name input { flex: 1; width: auto; min-width: 11em; }
.loc-table td.loc-name .system { margin: 0; }
.loc-table td:nth-child(5) input { min-width: 14em; }

/* ---- notes ---- */
.notes-page { display: flex; flex-direction: column; gap: 10px; padding: 16px; height: calc(100vh - 60px); max-width: 1100px; }
.notes-bar { display: flex; align-items: center; gap: 14px; }
.notes-bar button { margin-left: auto; }
#notes-status.warn { color: var(--etched); }
.notes-text { flex: 1; min-height: 300px; resize: vertical; padding: 14px; font: 16px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px; color: var(--text); tab-size: 2; }
.notes-conflict { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 8px; border: 1px solid var(--error); background: #f8514918; }
.notes-history { display: flex; flex-direction: column; gap: 4px; max-height: 45vh; overflow: auto; padding: 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); }
.notes-history .rev { display: flex; text-align: left; gap: 0; border: none; background: none; padding: 4px 6px; }
.notes-history .rev:hover { background: var(--panel-2); }
.rev-preview { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rev-body { white-space: pre-wrap; margin: 6px 0 0; padding: 10px; background: var(--bg); border-radius: 6px; max-height: 35vh; overflow: auto; }
@media (max-width: 760px) { .notes-page { padding: 10px; height: calc(100vh - 120px); } }

/* ---- name search & set browser ---- */
.name-wrap { width: 16em; }
.name-input { width: 100%; }
.name-suggestions { min-width: 22em; }
.name-note { position: absolute; top: 100%; left: 0; margin-top: 2px; font-size: 12px; white-space: nowrap; }
.set-icon { width: 20px; height: 20px; flex: none; filter: invert(1) brightness(0.9); }
.name-picker { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; align-items: start; }
.name-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.name-grid .option { cursor: pointer; }
.name-grid .option img { aspect-ratio: 488 / 680; }
.print-set { display: flex; gap: 6px; align-items: flex-start; margin-top: 6px; font-size: 13px; line-height: 1.3; }
.print-preview { position: sticky; top: 0; }
.print-preview img { width: 100%; border-radius: 16px; display: block; }
.print-preview .print-set { font-size: 15px; }
.set-browser { position: fixed; inset: 0; z-index: 40; background: #0b0f14f5; padding: 20px; overflow: auto; display: flex; flex-direction: column; gap: 10px; }
.set-browser-head { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.set-browser-head input[type=search] { width: 22em; }
.set-browser-head button { margin-left: auto; }
.set-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.set-card { display: grid; grid-template-columns: 30px 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; text-align: left; padding: 8px; }
.set-card .set-icon { grid-row: span 2; width: 28px; height: 28px; }
.set-card-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set-card.active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
@media (max-width: 1000px) { .name-picker { grid-template-columns: 1fr; } .print-preview { display: none; } }
.option img.set-icon, .print-preview img.set-icon, .print-set img.set-icon { width: 20px; height: 20px; aspect-ratio: auto; border-radius: 0; object-fit: contain; }
.name-grid .option { display: flex; flex-direction: column; }
.name-grid .print-set { min-width: 0; }
.name-grid .print-set span { overflow-wrap: anywhere; }

/* ---- name mode ---- */
.name-box { flex: 1; display: flex; flex-direction: column; gap: 8px; position: relative; min-width: 0; }
.name-mode-label { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 14px; }
.name-mode-label strong { color: var(--accent); }
.name-mode-label button { padding: 2px 10px; font-size: 13px; }
.name-field { position: relative; }
.name-input-big { width: 100%; font-size: 34px; font-weight: 700; padding: 8px 14px; }
.name-results { position: absolute; z-index: 25; top: 100%; left: 0; right: 0; margin-top: 4px; display: grid; grid-template-columns: minmax(0, 1fr) 170px; gap: 10px;
  padding: 6px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px #0009; }
.name-list { list-style: none; margin: 0; padding: 0; }
.name-list li { padding: 5px 10px; border-radius: 5px; cursor: pointer; font-size: 17px; }
.name-list li.active { background: var(--accent); color: #fff; }
.name-preview img { width: 100%; border-radius: 8px; display: block; }
.name-preview .noimg { aspect-ratio: 488 / 680; display: grid; place-items: center; font-size: 12px; }
.name-note { min-height: 1.2em; font-size: 13px; }
.buffer-panel { flex-wrap: wrap; }
.name-box { flex: 1 1 100%; padding: 8px 0; }
.name-miss { display: flex; flex-direction: column; gap: 8px; padding: 10px 14px; border: 1px solid var(--etched); border-radius: 8px; background: #f0b72f14; font-size: 16px; }
.miss-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.miss-actions button:focus { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ---- auth ---- */
.auth-card { display: flex; flex-direction: column; gap: 14px; width: min(360px, calc(100vw - 32px)); padding: 28px; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; }
.auth-card h1 { margin: 0; font-size: 22px; }
.auth-card form { display: flex; flex-direction: column; gap: 12px; }
.auth-card label { display: flex; flex-direction: column; gap: 4px; color: var(--muted); font-size: 14px; }
.auth-card input { color: var(--text); font-size: 16px; }
.auth-card .error { margin: 0; padding: 8px 10px; border-radius: 6px; background: #f8514920; }
.auth-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); }
.auth-tabs button { border: none; border-bottom: 2px solid transparent; border-radius: 0; background: none; padding: 6px 12px; color: var(--muted); }
.auth-tabs button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); }
body.login .auth-card form { width: auto; padding: 0; background: none; border: none; border-radius: 0; }

/* Themes */
.th-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px 16px 4px; }
.th-head h1 { margin: 0; font-size: 22px; }
.th-search { display: flex; gap: 6px; flex: 1 1 320px; max-width: 520px; }
.th-search input { flex: 1; min-width: 0; }
.th-poolchip { position: relative; margin-left: auto; }
.pool-chip { border-radius: 999px; }
.pool-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; display: flex; flex-direction: column; gap: 10px; min-width: 280px;
  padding: 14px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 30px #0008; }
.th-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; padding: 6px 16px 0; border-bottom: 1px solid var(--border); }
.th-nav a { color: var(--muted); text-decoration: none; padding: 8px 2px; border-bottom: 2px solid transparent; }
.th-nav a.active { color: var(--text); border-bottom-color: var(--accent); }
.th-nav .grow { flex: 1; }
.badge { margin-left: 6px; font-size: 11px; padding: 1px 7px; border-radius: 999px; background: #4c9aff33; color: #9ccaff; }
#th-status { padding: 6px 16px 0; min-height: 1.4em; }
.th-body { padding: 8px 16px 48px; }
.th-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 12px; }
.small { font-size: 12px; }
.pips { display: inline-flex; gap: 2px; vertical-align: middle; }
.pip { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--c); color: #111; font-size: 11px; font-weight: 700; }
.th-toolbar select { max-width: 100%; }
.min-good input { vertical-align: middle; width: 120px; }
.tag-slice { margin-left: 6px; font-size: 11px; padding: 0 6px; border-radius: 999px; border: 1px dashed var(--muted); color: var(--muted); font-weight: 400; }
.theme-chips { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 3px; }
.theme-chip { font-size: 11px; line-height: 1.5; padding: 0 6px; border-radius: 999px; border: 1px solid var(--border); color: var(--text); text-decoration: none; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
a.theme-chip:hover { border-color: var(--accent); }
.theme-chip.r-payoff { border-color: #4c9aff88; }
.theme-chip.r-both { border-color: #d2a8ff88; }
.theme-chip.more-chip { color: var(--muted); cursor: help; }
td.name .theme-chips { margin-top: 2px; }
.card-tile { display: flex; flex-direction: column; min-width: 0; }
.card-face { position: relative; display: block; }
.theme-count { position: absolute; right: 2px; top: 2px; min-width: 14px; padding: 0 3px; border-radius: 7px; background: rgba(0, 0, 0, .65); color: #fff; font-size: 10px; line-height: 14px; text-align: center; }
.roles-in { color: var(--muted); margin-top: 2px; }
.theme-chip.combo-chip { border-color: #f0b72f99; color: #f0b72f; }
.combo-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 12px; align-items: center; padding: 6px 0; border-top: 1px solid var(--border); }
.combo-row .unowned { opacity: .45; }
.combo-filters { margin: 6px 0; }
@media (max-width: 900px) { .combo-row { grid-template-columns: minmax(0, 1fr); } }

/* card images */
.card-strip { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.card-img { padding: 0; border: 0; background: none; border-radius: 5px; overflow: hidden; line-height: 0; position: relative; }
.card-img img { display: block; width: 100%; height: auto; border-radius: 5px; }
.card-img.thumb { width: 52px; }
.q-pips { position: absolute; left: 4px; bottom: 4px; display: inline-flex; gap: 2px; padding: 2px 3px; border-radius: 3px; background: rgba(0, 0, 0, .55); line-height: 0; }
.q-pips span { width: 4px; height: 8px; border-radius: 1px; background: rgba(255, 255, 255, .3); }
.q-pips span.on { background: #f5d76e; }
.card-img.thumb .q-pips { left: 2px; bottom: 2px; padding: 1px 2px; }
.card-img.thumb .q-pips span { width: 3px; height: 6px; }
.th-quality { display: flex; align-items: center; gap: 6px; margin: 6px 0; }
.th-quality .q-pips { position: static; }
.buy-cell { display: grid; gap: 4px; min-width: 0; }
.card-img.grid { width: 146px; line-height: 1.3; text-align: left; }
.card-img .noimg { display: grid; place-items: center; aspect-ratio: 488 / 680; padding: 4px; font-size: 10px; line-height: 1.2; background: var(--panel-2); border: 1px solid var(--border); border-radius: 5px; }
.card-img.role-payoff { box-shadow: 0 0 0 2px #4c9aff99; }
.card-img.role-both { box-shadow: 0 0 0 2px #d2a8ff99; }
.card-cap { display: flex; flex-direction: column; padding: 4px 2px 0; }
.cap-name { font-size: 12px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cap-info { font-size: 11px; color: var(--muted); }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); gap: 12px; }
.card-grid .card-img.grid, .card-grid .card-tile { width: 100%; }
.more { font-size: 12px; color: var(--muted); padding: 0 4px; }
.th-preview { position: fixed; z-index: 50; width: 244px; border-radius: 10px; pointer-events: none; box-shadow: 0 10px 30px #000a; }
.th-modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: #000a; padding: 16px; }
.th-modal-body { display: flex; flex-wrap: wrap; gap: 18px; max-width: 720px; max-height: 90vh; overflow: auto; padding: 18px; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; }
.th-modal-img { width: 260px; max-width: 100%; border-radius: 12px; }
.th-modal-body > div { flex: 1 1 260px; }
.th-modal-body h3 { margin: 0 0 4px; }
.th-locs { padding-left: 18px; }
.oracle { white-space: pre-wrap; font-size: 13px; margin: 8px 0; }
mark { color: inherit; border-radius: 3px; padding: 0 1px; }
mark.ev-producer { background: #3fb95040; }
mark.ev-payoff { background: #4c9aff45; }
mark.ev-both { background: #d2a8ff45; }

/* overview */
.pair-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.pair-cell { display: flex; flex-direction: column; gap: 6px; min-height: 150px; padding: 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); color: inherit; text-decoration: none; }
.pair-cell:hover, .pair-cell.open { border-color: var(--accent); }
.pair-cell.empty { background: none; }
.pair-head { display: flex; justify-content: space-between; align-items: center; }
.pair-name { font-weight: 600; }
.group-name { font-weight: 600; margin-right: auto; padding-right: 6px; }
.pair-head .pips { margin-right: auto; }
.cell-theme { line-height: 1.3; }
.cell-theme.small .pair-name { font-weight: 500; }
.th-note { border-left: 3px solid var(--border); padding: 4px 12px; margin: 10px 0; color: var(--muted); }
.th-note p { margin: 4px 0; }
ul.plain { list-style: none; padding: 0; margin: 6px 0; }
.pkg-line .counts { white-space: nowrap; }
.pkg-line.nested { padding-left: calc(var(--depth) * 18px); border-top-style: dashed; }
.pkg-line.nested .pkg-line-name::before { content: '↳ '; color: var(--muted); }
.extends { margin-top: 12px; }
.extends h4 { margin: 8px 0 0; color: var(--muted); font-weight: 600; }
.five-cell { margin-top: 12px; padding: 10px; border: 1px solid var(--border); border-radius: 10px; }
.five-cell h4 { margin: 0 0 6px; }
.fixing-grid { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; margin: 6px 0; }
.fixing-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border: 1px solid var(--border); border-radius: 8px; color: inherit; text-decoration: none; }
.fixing-cell:hover { border-color: var(--accent); }
.curve-bar { position: relative; display: flex; align-items: flex-end; }
.curve-good { display: block; width: 100%; border-radius: 2px 2px 0 0; }
.slice-banner { padding: 6px 10px; border: 1px dashed var(--border); border-radius: 8px; }
.nav-chip.current { border-color: var(--accent); }
.card-themes li { margin: 4px 0; }
.card-themes li.dim { opacity: .6; }
.compare-picker input[type="search"] { min-width: 12em; }
.compare-head h3 { margin: 12px 0 6px; }
.compare-head .nav-chip { cursor: pointer; background: none; }
.theme-pairs { margin: 4px 0 10px; }
.theme-pairs .nav-chip { display: inline-flex; align-items: center; gap: 4px; }
.pair-none { margin: auto 0; }
.pair-panel { margin: 14px 0; padding: 12px; border: 1px solid var(--accent); border-radius: 10px; }
.pair-panel h3 { margin: 0 0 8px; }
.pkg-line { display: grid; grid-template-columns: minmax(150px, 1.2fr) auto auto minmax(140px, 1.6fr) auto auto; align-items: center; gap: 6px 12px; padding: 8px 0; border-top: 1px solid var(--border); }
.pkg-line-name { color: var(--text); font-weight: 600; text-decoration: none; }
.pkg-line-name:hover { text-decoration: underline; }
.pkg-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.th-section { margin-top: 16px; border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; }
.th-section > summary { cursor: pointer; font-weight: 600; padding: 4px 0; }
.th-section-open { margin-bottom: 20px; }
.th-section-open h3 { margin: 0 0 6px; }
.health-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin: 8px 0; }
.health-col h4 { margin: 0 0 6px; }
.curve { display: flex; align-items: flex-end; gap: 3px; height: 70px; }
.curve-bar { flex: 1; min-height: 2px; border-radius: 2px 2px 0 0; }
.curve-axis { display: flex; gap: 3px; }
.curve-axis span { flex: 1; text-align: center; }
.hbar { display: grid; grid-template-columns: 76px 1fr 32px; align-items: center; gap: 6px; font-size: 12px; margin-top: 6px; }
.hbar-track { height: 8px; background: var(--panel-2); border-radius: 4px; overflow: hidden; display: block; }
.hbar-track.big { height: 12px; margin: 8px 0; }
.hbar-fill { display: block; height: 100%; background: var(--accent); }
.hbar-n { text-align: right; color: var(--muted); }

/* discover */
.discover-feed { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }
.disc-card { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); }
.disc-card.focused, .disc-card:focus { outline: 2px solid var(--accent); outline-offset: 0; }
.disc-card.build-around { border-style: dashed; }
.disc-card header { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.disc-card h3 { margin: 0; font-size: 16px; flex: 1 1 auto; }
.disc-card .why { margin: 0; }
.disc-card .fits { margin: 0; }
.disc-card footer { display: flex; gap: 8px; margin-top: auto; }

/* shortlist */
.shortlist-totals { margin-bottom: 16px; max-width: 640px; }
.split { display: flex; flex-wrap: wrap; gap: 6px; }
.split-chip { font-size: 12px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--c); }
.shortlist-group h3 { margin: 18px 0 4px; }

/* theme page */
.theme-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.theme-head h2 { margin: 0; font-size: 24px; flex-basis: 100%; }
.theme-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 6px; }
.nav-chip { display: inline-block; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--border); color: var(--text); text-decoration: none; font-size: 13px; }
a.nav-chip:hover { border-color: var(--accent); }
.how-facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; }
.how-facts dt { color: var(--muted); }
.how-facts dd { margin: 0; }
.evidence { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; }
.ev-card { padding: 8px; border: 1px solid var(--border); border-radius: 8px; }

/* seed results */
.th-seed-results { margin: 8px 16px; padding: 12px; border: 1px solid var(--accent); border-radius: 10px; }
.seed-head { display: flex; align-items: center; gap: 12px; }
.seed-head h3 { margin: 0; }
.seed-head .icon { margin-left: auto; }
.seed-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.seed-group { margin: 8px 0; }

/* settings */
.th-lib th { position: static; }
.th-lib tr.dim td { opacity: 0.55; }
.th-editor { margin: 8px 0 16px; }
.json-editor { width: 100%; font: 13px/1.4 ui-monospace, monospace; background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 8px; }

@media (max-width: 900px) {
  .pair-grid, .health-grid { grid-template-columns: minmax(0, 1fr); }
  .fixing-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .pair-cell { min-height: 0; }
  .discover-feed { grid-template-columns: minmax(0, 1fr); }
  .seed-cols { grid-template-columns: minmax(0, 1fr); }
  .pkg-line { grid-template-columns: minmax(0, 1fr) auto; }
  .pkg-line .why, .pkg-line .counts, .pkg-line .card-strip, .pkg-line .pkg-actions { grid-column: 1 / -1; }
  .pkg-line .counts { white-space: normal; }
  .card-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
  .th-poolchip { margin-left: 0; }
}

/* ---- phones ---- */
.m-only { display: none; }
.lightbox { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 16px; background: #000d; }
.lightbox img { width: min(100%, 488px); max-height: 100%; object-fit: contain; border-radius: 4.5% / 3.3%; }
.lightbox .noimg { padding: 40px 20px; border-radius: 12px; background: var(--panel); }
.evidence { grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); }
.nav-chip { max-width: 100%; }

@media (max-width: 760px) {
  .m-hide { display: none !important; }
  .m-only { display: inline-block; }
  .topbar { padding: 4px 6px; gap: 8px; }
  .topbar .brand { display: none; }
  .topbar nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .topbar nav a { white-space: nowrap; padding: 8px 10px; }

  /* collection: filters behind a button, rows as cards */
  #collection-view:not(.show-more) .m-collapse { display: none; }
  #collection-view .filters { padding: 8px 10px; gap: 6px 10px; }
  #collection-view .filters > label:first-child { width: auto; flex: 1 1 0; display: flex; align-items: center; gap: 6px; }
  #collection-view .filters > label:first-child input { flex: 1; min-width: 0; }
  #collection-view .value-total { margin-left: 0; font-size: 16px; }
  .retag-bar { padding: 8px 10px; gap: 8px; }
  #collection, #cmd-owned, #cmd-missing, .cmd-rank-table { min-width: 0 !important; }
  #collection, #collection > *, #cmd-owned, #cmd-owned > *, #cmd-missing, #cmd-missing > *, .cmd-rank-table, .cmd-rank-table > * { display: block; }
  #collection thead tr, #cmd-owned thead tr, .cmd-rank-table thead tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 10px; }
  #collection thead th, #cmd-owned thead th, .cmd-rank-table thead th { position: static; padding: 0; border: 0; background: none; }
  #collection thead th:not(:has(button, input)), #cmd-owned thead th:not(:has(button, input)), .cmd-rank-table thead th:not(:has(button)) { display: none; }
  #collection thead .th-sort, #cmd-owned thead .th-sort, .cmd-rank-table thead .th-sort { padding: 3px 10px; border: 1px solid var(--border); border-radius: 999px; }
  #cmd-missing thead { display: none; }
  #collection tbody td, #cmd-owned tbody td, #cmd-missing tbody td, .cmd-rank-table tbody td { padding: 0; border: 0; text-align: left; min-width: 0; }
  #collection input[type=checkbox], #cmd-owned input[type=checkbox] { width: 22px; height: 22px; margin: 0; }

  #collection tr.spacer, #collection tr.spacer td { display: block; }
  #collection tbody tr[data-key] { display: grid; grid-template-columns: 30px auto auto auto auto minmax(0, 1fr) auto auto; gap: 3px 8px; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--border);
    grid-template-areas: "cb name name name name name value value" "cb set num fin cost type type type" "cb loc loc loc loc loc qty del" "cb tags tags tags tags tags tags tags"; }
  #collection tbody tr[data-key] > td:nth-child(1) { grid-area: cb; }
  #collection tbody tr[data-key] > td:nth-child(2) { grid-area: set; font-size: 13px; }
  #collection tbody tr[data-key] > td:nth-child(3) { grid-area: num; font-size: 13px; color: var(--muted); }
  #collection tbody tr[data-key] > td:nth-child(4) { grid-area: name; font-size: 16px; }
  #collection tbody tr[data-key] > td:nth-child(5) { grid-area: type; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #collection tbody tr[data-key] > td:nth-child(6) { grid-area: cost; }
  #collection tbody tr[data-key] > td:nth-child(7), #collection tbody tr[data-key] > td:nth-child(12), #collection tbody tr[data-key] > td:nth-child(13) { display: none; }
  #collection tbody tr[data-key] > td:nth-child(8) { grid-area: fin; }
  #collection tbody tr[data-key] > td:nth-child(9) { grid-area: loc; min-width: 0; }
  #collection tbody tr[data-key] > td:nth-child(9) .loc-chip { white-space: normal; }
  #collection tbody tr[data-key] > td:nth-child(10) { grid-area: tags; }
  #collection tbody tr[data-key] > td:nth-child(10):not(:has(.chip)) { display: none; }
  #collection tbody tr[data-key] > td:nth-child(11) { grid-area: qty; }
  #collection tbody tr[data-key] > td:nth-child(14) { grid-area: value; text-align: right; }
  #collection tbody tr[data-key] > td:nth-child(15) { grid-area: del; }
  #collection .qty-input { width: 4em; padding: 4px 6px; }

  /* commander */
  .cmd-header { padding: 10px 10px 0; }
  .cmd-card { width: 130px; }
  .cmd-header-text { flex: 1 1 150px; min-width: 0; }
  .cmd-header h2 { font-size: 20px; }
  #cmd-owned th, #cmd-missing th { top: auto; }
  .cmd-rank { padding: 0 0 12px; }
  #cmd-owned tbody tr.group-row, #cmd-owned tbody tr.group-row td { display: block; padding: 6px 10px; }
  #cmd-owned tbody tr:not(.group-row) { display: grid; grid-template-columns: 30px auto auto minmax(0, 1fr) auto; gap: 3px 10px; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--border);
    grid-template-areas: "cb name name name price" "cb syn inc qty qty" "cb locs locs locs locs"; }
  #cmd-owned tbody tr > td:nth-child(1) { grid-area: cb; }
  #cmd-owned tbody tr > td:nth-child(2) { grid-area: name; font-size: 16px; }
  #cmd-owned tbody tr > td:nth-child(3) { grid-area: syn; font-size: 13px; }
  #cmd-owned tbody tr > td:nth-child(4) { grid-area: inc; font-size: 13px; }
  #cmd-owned tbody tr > td:nth-child(5) { grid-area: qty; font-size: 13px; }
  #cmd-owned tbody tr > td:nth-child(6) { grid-area: locs; }
  #cmd-owned tbody tr > td:nth-child(7) { grid-area: price; text-align: right; }
  #cmd-owned tbody tr:not(.group-row) > td:nth-child(3)::before { content: 'synergy '; color: var(--muted); }
  #cmd-owned tbody tr:not(.group-row) > td:nth-child(4)::before { content: 'in '; color: var(--muted); }
  #cmd-owned tbody tr:not(.group-row) > td:nth-child(4):not(:empty)::after { content: ' of decks'; color: var(--muted); }
  #cmd-owned tbody tr:not(.group-row) > td:nth-child(5)::before { content: 'own '; color: var(--muted); }
  #cmd-missing tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 2px 10px; padding: 8px 10px; border-bottom: 1px solid var(--border);
    grid-template-areas: "name name price" "cat syn inc"; }
  #cmd-missing tbody td:nth-child(1) { grid-area: name; font-size: 16px; }
  #cmd-missing tbody td:nth-child(2) { grid-area: cat; font-size: 13px; }
  #cmd-missing tbody td:nth-child(3) { grid-area: syn; font-size: 13px; }
  #cmd-missing tbody td:nth-child(4) { grid-area: inc; font-size: 13px; }
  #cmd-missing tbody td:nth-child(5) { grid-area: price; text-align: right; }
  #cmd-missing tbody td:nth-child(3)::before { content: 'synergy '; color: var(--muted); }
  #cmd-missing tbody td:nth-child(4)::before { content: 'in '; color: var(--muted); }
  #cmd-missing tbody td:nth-child(4):not(:empty)::after { content: ' of decks'; color: var(--muted); }
  .cmd-rank-table tbody tr { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 12px; padding: 8px 10px; border-bottom: 1px solid var(--border); }
  .cmd-rank-table tbody td:nth-child(1) { flex: 1 1 calc(100% - 90px); font-size: 16px; }
  .cmd-rank-table tbody td:nth-child(2) { margin-left: auto; }
  .cmd-rank-table tbody td:nth-child(n+3) { font-size: 13px; }
  .cmd-rank-table tbody td:nth-child(7) { flex-basis: 100%; font-size: 12px; color: var(--muted); }
  .cmd-rank-table tbody tr:not(.dim) td:nth-child(3)::before { content: 'deck you own '; color: var(--muted); }
  .cmd-rank-table tbody td:nth-child(4):not(:empty)::before { content: 'free '; color: var(--muted); }
  .cmd-rank-table tbody td:nth-child(5):not(:empty)::before { content: 'recs '; color: var(--muted); }
  .cmd-rank-table tbody td:nth-child(7):not(:empty)::after { content: ' decks on EDHREC'; }
  #commander-view .retag-bar { position: static; }
  .card-tile .theme-chips { display: none; }
  .cmd-rank .retag-bar, .cmd-rank > p { padding-left: 10px; padding-right: 10px; }

  /* themes */
  .th-head { padding: 8px 10px 4px; gap: 8px; }
  .th-head h1 { font-size: 18px; }
  .th-search { order: 3; flex-basis: 100%; max-width: none; }
  .th-poolchip { margin-left: auto; }
  .th-nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 14px; padding: 0 10px; }
  .th-nav a { white-space: nowrap; }
  #th-status { padding: 4px 10px 0; }
  .th-body { padding: 8px 10px 40px; }
  .th-seed-results { margin: 8px 10px; }
  .theme-head h2 { font-size: 20px; }
  .th-modal { padding: 8px; }
  .th-modal-body { padding: 12px; max-height: 94vh; }
  .th-modal-img { width: 100%; max-width: 330px; margin: 0 auto; }
}

/* ---- decks ---- */
.dk-status { padding: 6px 16px 0; min-height: 1.4em; }
.dk-page { padding: 8px 16px 48px; }
.warn { color: var(--etched); }
.ok { color: var(--ok); }
.button-link { display: inline-block; padding: 6px 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel-2); color: var(--text); text-decoration: none; }
.button-link:hover { border-color: var(--accent); }
.button-link.primary { background: var(--accent); border-color: var(--accent); color: #fff; }

/* selection actions appear once rows are selected */
#collection-view:not(.has-selection) .retag-bar > :not(#selection-count, #collection-status) { display: none; }

/* a brand-new collection shows only the empty state */
#collection-view.empty > :not(.coll-tabs, #coll-empty, #coll-checklist) { display: none; }
.empty-state { max-width: 560px; margin: 48px auto; padding: 24px; text-align: center; border: 1px dashed var(--border); border-radius: 10px; }
.empty-state h2 { margin: 0 0 8px; font-size: 20px; }
.empty-state p { color: var(--muted); margin: 0 0 16px; line-height: 1.5; }
.loading { color: var(--muted); padding: 24px 16px; }

/* account menu */
.account-menu { margin-left: auto; position: relative; }
.account-menu summary { list-style: none; cursor: pointer; color: var(--muted); font-size: 13px; padding: 4px 10px; border-radius: 6px; }
.account-menu summary::-webkit-details-marker { display: none; }
.account-menu summary:hover, .account-menu[open] summary, .account-menu.active summary { color: var(--text); background: var(--panel-2); }
.account-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 50; min-width: 160px; display: flex; flex-direction: column; padding: 4px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px #0008; }
.account-pop a { color: var(--text); text-decoration: none; padding: 6px 10px; border-radius: 6px; }
.account-pop a:hover, .account-pop a.active { background: var(--panel-2); }

/* settings */
.settings-page { max-width: 720px; padding: 16px; }
.settings-page h1 { margin: 0 0 4px; font-size: 22px; }
.settings-page h2 { font-size: 16px; margin: 24px 0 4px; }
.feature-toggles { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.feature-toggle { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); cursor: pointer; }
.feature-toggle input { margin-top: 3px; }
.feature-toggle > span { display: flex; flex-direction: column; gap: 2px; }
.dk-empty { grid-column: 1 / -1; }
.empty-state p:last-child { margin-bottom: 0; }

/* getting-started checklist */
.checklist { margin: 12px 16px; padding: 12px 16px; border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 8px; background: var(--panel); }
#collection-view.empty .checklist { max-width: 560px; margin: 0 auto 24px; }
.ck-head { display: flex; align-items: center; gap: 8px; }
.ck-head .grow, .imp-head .grow { flex: 1; }
.checklist ol { list-style: none; padding: 0; margin: 8px 0; display: flex; flex-direction: column; gap: 4px; }
.checklist li.done { color: var(--muted); text-decoration: line-through; }
.ck-mark { display: inline-block; width: 18px; height: 18px; margin-right: 8px; border: 1px solid var(--border); border-radius: 50%; text-align: center; font-size: 12px; line-height: 16px; color: var(--ok); vertical-align: -3px; }
.checklist li.done .ck-mark { border-color: var(--ok); }
.checklist p { margin: 0; }

/* entry tips */
.entry-tip { display: flex; align-items: center; gap: 12px; margin: 12px 16px 0; padding: 10px 14px; border: 1px solid var(--accent); border-radius: 8px; background: #4c9aff14; }
.entry-tip .tip-text { flex: 1; line-height: 1.6; }
.entry-tip .tip-secondary { display: block; color: var(--muted); font-size: 13px; }

/* import */
.imp-page { max-width: 960px; padding: 16px; }
.imp-page h1 { margin: 0 0 4px; font-size: 22px; }
.imp-drop { margin: 16px 0 8px; padding: 24px; border: 2px dashed var(--border); border-radius: 10px; text-align: center; }
.imp-drop.over { border-color: var(--accent); background: #4c9aff10; }
.imp-drop p { margin: 4px 0; }
.imp-paste { margin-bottom: 12px; }
.imp-paste summary { cursor: pointer; color: var(--muted); }
.imp-paste input, .imp-paste textarea { display: block; width: 100%; margin: 6px 0; }
.imp-paste textarea { font-family: ui-monospace, monospace; background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 8px; }
.imp-status { min-height: 1.4em; margin: 8px 0; }
.imp-files { display: flex; flex-direction: column; gap: 10px; }
.imp-file { padding: 12px 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); display: flex; flex-direction: column; gap: 8px; }
.imp-file.bad { border-color: var(--error); }
.imp-file p { margin: 0; }
.imp-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.imp-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.imp-label { color: var(--muted); }
.imp-new, .imp-deck { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.imp-new input { min-width: 16em; }
.imp-issues summary { cursor: pointer; }
.imp-issues summary.warn { color: var(--etched); }
.imp-issues ul { margin: 6px 0 0; padding-left: 20px; }
.imp-footer { margin: 16px 0; }
.imp-done { margin-top: 16px; padding: 16px; border: 1px solid var(--ok); border-radius: 8px; }
.imp-warn { padding: 8px 10px; border: 1px solid var(--etched); border-radius: 6px; background: #f0b72f14; }
.imp-warn ul { margin: 6px 0; padding-left: 20px; }
.imp-warn summary { cursor: pointer; }
.imp-file .warn, .imp-done .warn { color: var(--etched); }
.imp-split .imp-values { margin: 4px 0 0; padding-left: 20px; }
.imp-tick { white-space: nowrap; }
.imp-split .imp-warn { margin-top: 6px; }
.imp-finishes p { margin: 0 0 4px; }
.imp-past { margin-top: 32px; }
.imp-past h2, .imp-confirm h2 { font-size: 18px; margin: 0 0 8px; }
.imp-past-table td { vertical-align: top; }
.imp-past-table tr.imp-target td { background: #4c9aff1f; }
.imported-from { margin-top: 2px; }
.imp-past-table td .imp-warn p { margin: 0; }
.imp-card { margin: 12px 0; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); }
.imp-card input[type=search] { width: 24em; max-width: 100%; }
.imp-options { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.imp-option { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px; width: 132px; }
.imp-option img { width: 122px; border-radius: 5px; }
.imp-option.current { border-color: var(--accent); }
.imp-option .noimg { display: flex; align-items: center; justify-content: center; width: 122px; height: 170px; color: var(--muted); }

.imp-done h2 { margin: 0 0 8px; font-size: 18px; }

/* welcome */
.wl-page { max-width: 820px; padding: 24px 16px 48px; }
.wl-page h1 { margin: 0 0 8px; font-size: 26px; }
.wl-page h2 { font-size: 17px; margin: 28px 0 8px; }
.wl-page .lead { font-size: 16px; color: var(--muted); margin: 0; }
.wl-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.wl-choice { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; text-align: left; padding: 14px; border-radius: 8px; background: var(--panel); }
.wl-choice strong { font-size: 15px; }
.wl-step { margin-top: 12px; }
.wl-step h3 { margin: 16px 0 4px; font-size: 15px; }
.wl-step p { margin: 0 0 8px; }
.wl-locs { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.wl-loc { display: flex; gap: 6px; }
.wl-loc input { width: 20em; max-width: 100%; }
.wl-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.wl-features { display: flex; flex-direction: column; gap: 8px; }
.wl-tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.wl-tool { display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); }
.wl-tool img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; border-radius: 5px; border: 1px solid var(--border); background: var(--bg); }
.wl-try { margin-top: auto; padding-top: 4px; }
.wl-phone { padding: 10px 14px; border: 1px solid var(--accent); border-radius: 8px; background: #4c9aff14; }
.wl-loc input.bad { border-color: var(--error); }
.boot-error { max-width: 520px; margin: 64px auto; padding: 24px; text-align: center; border: 1px solid var(--error); border-radius: 10px; }

.dk-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; margin-bottom: 12px; }
.dk-head h2 { margin: 0; }
.dk-new { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dk-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 12px; }
.dk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.dk-tile { display: flex; gap: 10px; padding: 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); color: inherit; text-decoration: none; }
.dk-tile:hover { border-color: var(--accent); }
.dk-tile img, .dk-tile-noimg { width: 76px; flex: none; aspect-ratio: 488 / 680; border-radius: 5px; object-fit: cover; }
.dk-tile-noimg { display: grid; place-items: center; background: var(--panel-2); color: var(--muted); font-size: 11px; text-align: center; }
.dk-tile-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dk-tile-name { font-weight: 600; overflow-wrap: anywhere; }
.dk-tile-meta { display: flex; align-items: center; gap: 6px; }
.dk-deck-head { display: flex; gap: 16px; align-items: flex-start; }
.dk-commanders { display: flex; gap: 8px; flex: none; }
.dk-commanders img { width: 150px; border-radius: 8px; cursor: zoom-in; }
.dk-deck-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.dk-deck-info h2 { margin: 0; font-size: 24px; }
.dk-facts { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.dk-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.dk-controls select { max-width: 16em; }
.dk-notes { width: 100%; font: inherit; background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; }
.dk-notes-wrap summary { cursor: pointer; color: var(--muted); }
.dk-warnings { margin: 12px 0 0; padding: 8px 12px; border: 1px solid var(--etched); border-radius: 8px; background: #f0b72f14; display: flex; flex-direction: column; gap: 4px; }
.dk-warnings ul { margin: 4px 0 0; padding-left: 18px; }
.dk-tabs { padding: 0; margin-top: 12px; }
.dk-body { padding-top: 12px; }
.dk-add { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.dk-add input[type=text] { flex: 1 1 260px; min-width: 0; }
.dk-move { border-radius: 8px; margin-bottom: 8px; }
.dk-cards td { vertical-align: middle; }
.dk-cards tbody tr { cursor: default; user-select: text; }
.dk-cards tr.sub-group td { color: var(--muted); font-size: 12px; padding-top: 10px; border-bottom: none; }
.dk-thumb { width: 34px; border-radius: 3px; display: block; cursor: zoom-in; }
.dk-name { background: none; border: none; padding: 0; text-align: left; font-weight: 500; cursor: zoom-in; }
.dk-name:hover { color: var(--accent); }
.dk-st { display: inline-block; padding: 0 7px; border-radius: 999px; font-size: 12px; white-space: nowrap; border: 1px solid var(--border); }
.dk-st-in_home, .dk-st-owned { color: var(--ok); border-color: #3fb95088; }
.dk-st-elsewhere { color: var(--etched); border-color: #f0b72f88; }
.dk-st-missing { color: var(--error); border-color: #f8514988; }
.dk-st-basic { color: var(--muted); }
.dk-actions { white-space: nowrap; }
.dk-actions select { padding: 2px 4px; font-size: 13px; }
.dk-pin select { max-width: 12em; padding: 2px 4px; font-size: 13px; }
.dk-pin .pinned { color: var(--foil); }
.dk-modal { flex-direction: column; flex-wrap: nowrap; min-width: min(480px, 100%); }
.dk-modal h3 { margin: 0; }
.dk-plan-group ul { margin: 4px 0 8px; padding-left: 20px; }
.dk-buy { width: auto; min-width: min(560px, 100%); }
.dk-buy tbody tr { cursor: default; }
.dk-pull-group h3 { margin: 14px 0 4px; font-size: 15px; }
.dk-analysis { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: 14px; }
.dk-panel { padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); }
.dk-panel h3 { margin: 0 0 6px; font-size: 16px; }
.dk-panel table { width: auto; }
.dk-panel tbody tr { cursor: default; }
.dk-curve { display: flex; gap: 6px; align-items: flex-end; height: 140px; }
.dk-curve-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; }
.dk-curve-bar { flex: 1; width: 100%; display: flex; flex-direction: column-reverse; justify-content: flex-start; }
.dk-curve-n { font-size: 12px; color: var(--muted); min-height: 1.2em; }
.dk-curve-mv { font-size: 12px; color: var(--muted); }
.dk-curve-perm { display: block; background: var(--accent); }
.dk-curve-spell { display: block; background: var(--foil); }
.dk-curve-bar > span:last-child { border-radius: 3px 3px 0 0; }
.dk-key { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: middle; }
.dk-bracket { font-size: 17px; font-weight: 600; }
.dk-import { width: 100%; font: 14px/1.45 ui-monospace, monospace; background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 8px; }
.dk-import-form { display: flex; flex-direction: column; gap: 8px; max-width: 900px; }
.dk-import-result { margin-top: 12px; max-width: 900px; }
.dk-history li { padding: 2px 0; }
@media (max-width: 760px) {
  .dk-page { padding: 8px 10px 40px; }
  .dk-status { padding: 4px 10px 0; }
  .dk-deck-head { flex-direction: column; }
  .dk-commanders img { width: 120px; }
  .dk-deck-info h2 { font-size: 20px; }
  .dk-cards, .dk-cards > tbody { display: block; min-width: 0 !important; }
  .dk-cards tr.group-row, .dk-cards tr.group-row td, .dk-cards tr.sub-group, .dk-cards tr.sub-group td { display: block; }
  .dk-cards tbody tr:not(.group-row):not(.sub-group) { display: grid; grid-template-columns: 26px 40px auto minmax(0, 1fr) auto; gap: 3px 8px; align-items: center; padding: 8px 4px; border-bottom: 1px solid var(--border);
    grid-template-areas: "cb img name name price" "cb img cost status qty" "cb img where where where" "cb img actions actions actions"; }
  .dk-cards td.dk-cost { grid-area: cost; }
  .dk-cards td { padding: 0; border: 0; }
  .dk-cards td.dk-cb { grid-area: cb; }
  .dk-cards td.dk-img { grid-area: img; align-self: start; }
  .dk-cards td.dk-namecell { grid-area: name; font-size: 16px; }
  .dk-cards td.dk-qty { grid-area: qty; }
  .dk-cards td.dk-status-cell { grid-area: status; }
  .dk-cards td.dk-where { grid-area: where; }
  .dk-cards td.dk-where:not(:has(.loc-chip)) { display: none; }
  .dk-cards td.dk-where .loc-chip { white-space: normal; }
  .dk-cards td.dk-price { grid-area: price; text-align: right; }
  .dk-cards td.dk-actions { grid-area: actions; }
  .dk-thumb { width: 40px; }
  .dk-cards input[type=checkbox] { width: 20px; height: 20px; margin: 0; }
}

/* ---- collection search ---- */
.qbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 16px 4px; position: relative; }
.qbox-wrap { position: relative; flex: 1 1 420px; min-width: 0; }
.qbox, .qbox-hl { font: 15px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; padding: 7px 10px; border: 1px solid transparent; border-radius: 6px; width: 100%; }
.qbox { position: relative; background: transparent; z-index: 1; border-color: var(--border); }
.qbox-hl { position: absolute; inset: 0; background: var(--panel-2); color: transparent; white-space: pre; overflow: hidden; pointer-events: none; }
.qbox-hl mark.q-bad { color: transparent; background: none; border-radius: 0; text-decoration: wavy underline var(--error); text-underline-offset: 4px; background-color: #f8514922; }
.qbox::-webkit-search-cancel-button { filter: invert(0.6); }
.q-help { font-weight: 700; color: var(--text); }
.qbar-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.qbar-actions select { max-width: 14em; }
#q-saved-actions { display: inline-flex; gap: 6px; }
.qsuggest { position: absolute; z-index: 25; top: 100%; left: 0; min-width: 320px; max-width: 100%; margin: 2px 0 0; padding: 4px 0; list-style: none;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 8px 24px #0008; max-height: 360px; overflow: auto; }
.qsuggest li { padding: 4px 10px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qsuggest li.active, .qsuggest li:hover { background: var(--accent); color: #fff; }
.qsuggest li.active .muted, .qsuggest li:hover .muted { color: #e6edf3cc; }
.q-issues { padding: 0 16px; font-size: 13px; min-height: 0; }
.q-issues code { font-size: 12px; color: var(--error); }
.qhelp { position: absolute; z-index: 40; top: 100%; left: 16px; right: 16px; max-height: 70vh; overflow: auto; padding: 12px 16px; background: var(--panel);
  border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 30px #000a; display: grid; gap: 4px; }
.qhelp h3 { margin: 8px 0 2px; font-size: 15px; }
.qhelp h4 { margin: 6px 0 2px; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.qhelp-sec dl { display: grid; grid-template-columns: max-content 1fr; gap: 2px 14px; margin: 0; font-size: 13px; }
.qhelp-sec dd { margin: 0; }
.qhelp-ex { padding: 0 6px; font-size: 12px; border-style: dashed; }
.qbuilder { padding: 4px 16px 8px; border-bottom: 1px solid var(--border); }
.qcustom { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-bottom: 6px; }
.qchip { padding: 1px 8px; border-radius: 999px; font: 12px ui-monospace, monospace; background: #4c9aff1a; border-color: #4c9aff66; }
.qsecs { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; }
.qsec { border: 1px solid var(--border); border-radius: 8px; background: var(--panel); }
.qsec[open] { flex: 1 1 300px; max-width: 560px; }
.qsec.set { border-color: #4c9aff88; }
.qsec > summary { cursor: pointer; padding: 4px 10px; font-size: 13px; list-style: none; display: flex; gap: 6px; align-items: baseline; white-space: nowrap; }
.qsec > summary::-webkit-details-marker { display: none; }
.qsec-label { font-weight: 600; }
.qsec-sum { color: var(--accent); max-width: 18em; overflow: hidden; text-overflow: ellipsis; }
.qsec-body { display: flex; flex-direction: column; gap: 6px; padding: 4px 10px 10px; }
.qsec-body input[type=text], .qsec-body input[type=search] { width: 100%; }
.qadder { display: inline-flex; flex: 1 1 200px; }
.qadder input { width: 100%; }
.qset-list { display: flex; flex-direction: column; max-height: 180px; overflow: auto; font-size: 13px; }
.fchip.rarity { min-width: 2.2em; }
.qloc { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; position: relative; }
.locpick { position: absolute; z-index: 45; top: 100%; left: 0; width: min(460px, calc(100vw - 32px)); margin-top: 4px; padding: 10px; display: flex; flex-direction: column; gap: 6px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 30px #000a; }
.locpick-tree { max-height: 50vh; overflow: auto; display: flex; flex-direction: column; }
.locpick-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto auto; align-items: center; gap: 6px; padding: 2px 4px 2px calc(4px + var(--depth) * 16px); border-radius: 5px; }
.locpick-row:hover { background: var(--panel-2); }
.locpick-row.on { background: #4c9aff1f; }
.locpick-row label { display: flex; align-items: center; gap: 6px; min-width: 0; cursor: pointer; }
.locpick-name { font-weight: 500; white-space: nowrap; }
.locpick-twist { border: none; background: none; padding: 0; width: 22px; color: var(--muted); }
.locpick-only { padding: 0 6px; font-size: 11px; color: var(--muted); }
.locpick-only.on { color: var(--accent); border-color: var(--accent); }
.locpick-n { white-space: nowrap; }
.locpick-foot { display: flex; justify-content: space-between; }
.loc-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: none; }
.results-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 8px 16px; border-bottom: 1px solid var(--border); }
.results-bar .segmented button { padding: 4px 12px; }
@media (max-width: 760px) {
  .qbar { padding: 8px 10px 4px; }
  .qbox-wrap { flex-basis: 100%; order: 0; }
  .qbar-actions { width: 100%; }
  .qbar-actions select { flex: 1; max-width: none; }
  .qbuilder { padding: 4px 10px 8px; }
  .qsec[open] { flex-basis: 100%; max-width: none; }
  .results-bar { padding: 8px 10px; }
  .qhelp { left: 6px; right: 6px; }
  .qhelp-sec dl { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .qbar-actions button, .qbar-actions .button-link, .qbar-actions select { padding: 4px 8px; font-size: 13px; }
  .qbar-actions select { flex: 1 1 140px; }
}

/* ---- goldfish ---- */
.gf-facts { margin: 6px 0; }
.gf-hand { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 8px 0; }
.gf-card { position: relative; padding: 0; border: none; background: none; border-radius: 7px; line-height: 0; cursor: zoom-in; }
.gf-card img { width: 100%; border-radius: 7px; display: block; }
.gf-card .noimg { display: grid; place-items: center; aspect-ratio: 488 / 680; padding: 8px; line-height: 1.3; background: var(--panel-2); border-radius: 7px; }
.gf-card.pick { cursor: pointer; }
.gf-card.pick:hover { outline: 3px solid var(--error); outline-offset: 2px; }
.gf-drawn { position: absolute; top: 6px; left: 6px; padding: 1px 6px; border-radius: 999px; background: #000b; color: #fff; font-size: 11px; line-height: 1.5; }
.gf-command { margin-top: 12px; }
.gf-command .gf-hand { grid-template-columns: repeat(auto-fill, minmax(110px, 140px)); }
@media (max-width: 760px) { .gf-hand { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } }
.dk-cards tr.last-basic td { border-bottom: 2px solid var(--muted); }
@media (max-width: 760px) { .dk-cards tbody tr.last-basic { border-bottom: 2px solid var(--muted); } }

/* ---- trade ---- */
.coll-tabs { padding: 0 16px; }
.chip.chip-trade { background: #3fb95026; border-color: #3fb950aa; color: #7ee28f; font-weight: 600; }
.chip.chip-notrade { background: #8b9bab22; border-color: #8b9bab; color: var(--muted); font-weight: 600; }
#trade-view .qbar { padding-top: 10px; }
.trade-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding: 6px 16px; }
.trade-controls select { max-width: 18em; }
.trade-summary { padding: 6px 16px; }
.trade-bulk { margin: 6px 16px; border-radius: 8px; }
.trade-list { padding: 0 16px 48px; }
.trade-row { border-bottom: 1px solid var(--border); padding: 8px 0; }
.trade-row.selected { background: #4c9aff14; }
.trade-main { display: grid; grid-template-columns: 24px 40px minmax(0, 1fr) auto auto; gap: 6px 12px; align-items: center; }
.trade-name .dk-name { font-size: 15px; }
.trade-reasons { margin-top: 4px; }
.reason { padding: 0 8px; border-radius: 999px; font-size: 12px; border: 1px solid var(--border); white-space: nowrap; }
.reason-good { border-color: #3fb95088; color: #7ee28f; }
.reason-warn { border-color: #f0b72f88; color: var(--etched); }
.trade-nums { text-align: right; white-space: nowrap; }
.trade-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.trade-copies { margin: 8px 0 0 70px; }
.trade-copies table { width: auto; }
.trade-copies td { padding: 3px 8px; }
.trade-copies tbody tr { cursor: default; }
@media (max-width: 760px) {
  .coll-tabs, .trade-controls, .trade-summary, .trade-list { padding-left: 10px; padding-right: 10px; }
  .trade-bulk { margin: 6px 10px; }
  .trade-main { grid-template-columns: 24px 40px minmax(0, 1fr); }
  .trade-nums { grid-column: 3; text-align: left; white-space: normal; }
  .trade-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .trade-copies { margin-left: 0; overflow-x: auto; }
}

/* mana symbols */
.mana-cost { display: inline-flex; align-items: center; gap: 1px; white-space: nowrap; }
.mana-sym { width: 16px; height: 16px; display: inline-block; vertical-align: middle; }
td.cost { white-space: nowrap; }
.dk-cards td.dk-cost { white-space: nowrap; }
.dk-pull-list { display: flex; flex-direction: column; }
.dk-pull-card { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 3px 4px; border-radius: 5px; cursor: zoom-in; }
.dk-pull-card:hover { background: var(--panel); }
.dk-pull-qty { min-width: 2.5em; color: var(--muted); }
.dk-pull-name { font-weight: 500; }
.dk-pull-card .set-icon { width: 18px; height: 18px; }
.dk-pull-card { cursor: pointer; }
.dk-pull-card.on { background: #3fb95018; }
.dk-pull-card.on .dk-pull-name { text-decoration: line-through; text-decoration-color: var(--muted); }
.dk-pull-card input[type=checkbox] { width: 18px; height: 18px; margin: 0; }

/* ---- trade pages (owner) ---- */
.tp { max-width: 1300px; padding: 12px 16px 40px; }
.tp h1 { font-size: 22px; margin: 6px 0 8px; }
.tp-card { border: 1px solid var(--border); border-radius: 10px; background: var(--panel); padding: 12px 14px; margin: 12px 0; max-width: 900px; }
.tp-card.off { opacity: 0.7; }
.tp-card-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.tp-card code { word-break: break-word; }
.tp-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.tp-link { flex: 1; min-width: 240px; font-family: ui-monospace, monospace; font-size: 13px; }
.tp-form { display: grid; gap: 10px; max-width: 900px; }
.tp-form label { display: grid; gap: 4px; }
.tp-form .tp-row label { display: inline-flex; align-items: center; gap: 6px; }
.tp-form textarea { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; font: inherit; }
.tp-q { display: grid; gap: 4px; }
.tp-q .qbar { padding: 0; border: none; }
.tp-preview { border: 1px dashed var(--border); border-radius: 10px; padding: 4px 0 12px; }
.badge { display: inline-block; padding: 1px 7px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--border); color: var(--muted); font-size: 12px; }

/* ---- trade pages (visitors) ---- */
.pg { padding: 0 0 40px; }
.pg-head { padding: 14px 16px 4px; }
.pg-head h1 { margin: 0 0 6px; font-size: 24px; }
.pg-desc { white-space: pre-wrap; margin: 0 0 6px; max-width: 900px; }
.pg-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 8px 16px; }
.pg-tools .fgroup { display: inline-flex; gap: 4px; align-items: center; }
.pg-status { padding: 0 16px; }
.pg-main { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; padding: 0 16px; align-items: start; }
.pg-results { position: relative; min-height: 160px; }
.pg-results.busy > * { opacity: 0.35; pointer-events: none; transition: opacity 0.15s 0.1s; }
.pg-results.busy::after {
  content: ''; position: fixed; left: 50%; top: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; z-index: 5;
  border: 5px solid #ffffff22; border-top-color: var(--accent); border-radius: 50%;
  background: var(--panel); box-shadow: 0 0 0 8px var(--panel), 0 6px 24px #000c;
  animation: pg-spin 0.7s linear infinite, pg-fade-in 0.15s 0.1s both;
}
@keyframes pg-spin { to { transform: rotate(360deg); } }
@keyframes pg-fade-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pg-results.busy::after { animation: pg-fade-in 0.15s 0.1s both; } }
.pg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.pg-tile { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.pg-tile > img, .pg-noimg { width: 100%; aspect-ratio: 488 / 680; border-radius: 4.75% / 3.5%; object-fit: cover; background: var(--panel-2); }
.pg-noimg { display: flex; align-items: center; justify-content: center; text-align: center; padding: 10px; color: var(--muted); }
.pg-tile-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.pg-prints { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 13px; }
.pg-prints li { display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: 6px; }
.pg-print { display: inline-flex; align-items: center; gap: 2px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pg img.set-icon { width: 16px; height: 16px; object-fit: contain; filter: invert(0.85); vertical-align: -3px; }
.pg-finish.foil { color: var(--foil); }
.pg-finish.etched { color: var(--etched); }
.pg-qty { color: var(--muted); }
.pg-price { font-variant-numeric: tabular-nums; }
.pg-add { padding: 2px 9px; }
.pg-table { width: 100%; border-collapse: collapse; }
.pg-table th, .pg-table td { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--border); }
.pg-table th.num, .pg-table td.num { text-align: right; }
.pg-table tr.pg-more td { border-top: none; }
.pg-picks { position: sticky; top: 10px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.pg-picks h2 { font-size: 16px; margin: 0 0 8px; }
.pg-picks ul { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 4px; max-height: 50vh; overflow: auto; }
.pg-picks li { display: grid; grid-template-columns: auto auto auto 1fr auto; align-items: center; gap: 4px; font-size: 13px; }
.pg-picks li.gone .pg-pick-name { text-decoration: line-through; color: var(--muted); }
.pg-pick-qty { min-width: 1.6em; text-align: center; }
.pg-pick-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pg-pick-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.pg-body .topbar nav, .pg-body .account-menu { display: none; }
@media (max-width: 760px) {
  .pg-main { grid-template-columns: 1fr; padding: 0 10px; }
  .pg-picks { position: static; order: -1; }
  .pg-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .pg-prints li { grid-template-columns: 1fr auto auto; }
  .pg-prints .pg-print { grid-column: 1 / -1; white-space: normal; }
  .pg-head, .pg-tools, .pg-status { padding-left: 10px; padding-right: 10px; }
  .tp { padding: 10px; }
}