:root {
  --bg: #1b222e;
  --panel: #1e293b;
  --line: hsla(0, 0%, 100%, .085);
  --fg: #e8eef6;
  --muted: rgba(203, 213, 225, .58);
  --acc: #38bdf8;
  --acc2: #dddddd;
  --ok: #34d399;
  --warn: #fbbf24;
  --err: #f87171;
  --radius: 8px;
  --font: 'acumin-pro', system-ui, -apple-system, sans-serif;
  --mono: 'acumin-pro', system-ui, sans-serif;
  --mono-lg: 'Big Shoulders Display', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; }
.num { font-variant-numeric: tabular-nums; }
.stat .v, .price-tile .v {
  font-family: var(--mono-lg);
  font-variant-numeric:
    tabular-nums
    lining-nums;
  font-weight: 800;
  font-size: 2rem;
  letter-spacing: .01em;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 14px/1.5 var(--font);
}

a { color: var(--acc2); }
h1 { font-family: var(--mono-lg); font-weight: 800; font-size: 2.25rem; margin: 0 0 1.25rem; }
h2 { font-family: var(--mono-lg); font-weight: 800; font-size: 1.5rem; margin: 2rem 0 .75rem; letter-spacing: .01em; }
.muted { color: var(--muted); }
.err { color: var(--err); }

.topbar {
  display: flex; align-items: center; gap: 1.5rem;
  padding: .75rem 1.25rem .75rem 1.5rem; background: var(--panel); border-bottom: 1px solid var(--line);
  position: relative;
}
.topbar .brand { color: var(--fg); font-weight: 700; white-space: nowrap; display: inline-flex; align-items: center; }
.brand-mark svg { overflow: visible; display: block; }
.brand-mark .fan-1, .brand-mark .fan-2, .brand-mark .fan-front {
  transform-box: fill-box; transform-origin: 50% 100%; transition: transform .25s ease;
}
.brand-mark .fan-1 { transform: rotate(-20deg); }
.brand-mark .fan-2 { transform: rotate(-40deg); }
.brand-mark .fan-front { transform: rotate(0deg); }
.brand-mark:hover .fan-1 { transform: rotate(-27deg); }
.brand-mark:hover .fan-2 { transform: rotate(-54deg); }

@keyframes login-fan-breathe {
  0%, 100% { transform: rotate(-20deg); }
  50%      { transform: rotate(-27deg); }
}
@keyframes login-fan-breathe-2 {
  0%, 100% { transform: rotate(-40deg); }
  50%      { transform: rotate(-54deg); }
}
.login-brand-mark .fan-1 { animation: login-fan-breathe 3s ease-in-out infinite; }
.login-brand-mark .fan-2 { animation: login-fan-breathe-2 3s ease-in-out infinite; }
.topbar nav { display: flex; gap: 1rem; flex: 1; }
.topbar nav a { color: var(--muted); padding: .25rem 0; white-space: nowrap; border-bottom: 2px solid transparent; }
.topbar nav a:hover { color: var(--fg); border-bottom-color: var(--line); }
.topbar nav a.active { color: var(--fg); border-bottom-color: var(--acc); }
.nav-toggle-cb { display: none; }
.nav-toggle-btn { display: none; }
.nav-logout { display: none; }
a { text-decoration: none; }

.search-trigger-btn {
  display: flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem;
  background: none; border: 0; border-radius: var(--radius);
  color: var(--muted); cursor: pointer; flex-shrink: 0;
}
.search-trigger-btn:hover { color: var(--fg); background: var(--bg); }

@media (max-width: 720px) {
  .topbar { flex-wrap: nowrap; gap: .75rem; padding: .625rem .875rem .625rem 1.5rem; }
  .search-trigger-btn { order: 2; margin-left: auto; }
  .nav-toggle-btn {
    display: flex; align-items: center; justify-content: center;
    width: 2.25rem; height: 2.25rem;
    background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
    font-size: 1.125rem; cursor: pointer; color: var(--fg); order: 3;
  }
  .logout-desktop { display: none; }
  .topbar nav {
    display: none; flex-direction: column; gap: 0;
    position: fixed; top: 56px; left: 0; right: 0;
    max-height: calc(100vh - 56px); overflow-y: auto;
    background: var(--panel); border-bottom: 1px solid var(--line);
    padding: .5rem 0; z-index: 50;
  }
  .topbar nav a { padding: .75rem 1.25rem; border-bottom: 1px solid var(--line); }
  .topbar nav a.active { border-bottom: 1px solid var(--line); border-left: 3px solid var(--acc); padding-left: calc(1.25rem - 3px); }
  .nav-logout { display: block; color: var(--err); }
  .nav-toggle-cb:checked ~ nav { display: flex; }
}

.wrap { max-width: 1100px; margin: 0 auto; padding: 2rem 1.5rem 4rem; }
.wrap.narrow { max-width: 380px; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; }
.stat {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.stat .k { color: var(--muted); font-size: .8125rem; }
.stat .v { font-family: var(--mono); font-size: 1.5rem; }
.stat .sub { color: var(--muted); font-size: .75rem; }
.stat.warn .v { color: var(--warn); }

.bar { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; margin-bottom: 1.5rem; }
.stack { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.row { display: flex; flex-wrap: wrap; gap: 1rem; width: 100%; }
label { display: flex; flex-direction: column; gap: .25rem; font-size: .8125rem; color: var(--muted); }
label.inline { flex-direction: row; align-items: center; gap: .5rem; }

input, select, textarea {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--fg);
  font: inherit;
  padding: .5rem .625rem;
}

@media (max-width: 600px) {
  input, select, textarea { font-size: 16px; }
}
textarea { font-family: var(--mono); font-size: .8125rem; width: 100%; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--acc); outline-offset: 1px; }

.btn {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--fg);
  font: inherit;
  padding: .5rem 1rem;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
.btn:hover { border-color: var(--acc); }
.btn.ghost { color: var(--muted); }

.grid { width: 100%; border-collapse: collapse; font-size: .875rem; }
.grid td, .grid th { border-bottom: 1px solid var(--line); padding: .5rem .625rem; text-align: left; }
.grid td.num, .grid th.num { text-align: right; font-family: var(--mono); }

@media (max-width: 700px) {
  .slot-detail, .deck-detail {
    overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%;
  }
  .slot-detail table.sheet-table {
    min-width: 480px;
  }

  #composition table.grid { table-layout: fixed; width: 100%; }
  #composition table.grid td, #composition table.grid th {
    white-space: normal; word-break: break-word;
  }
}

.tabs {
  display: flex; gap: .5rem; border-bottom: 1px solid var(--line); margin-bottom: 1.5rem;
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs button {
  background: none; border: 0; border-bottom: 2px solid transparent;
  color: var(--muted); font: inherit; padding: .5rem .75rem; cursor: pointer;
  white-space: nowrap; flex-shrink: 0;
}
.tabs button.on { color: var(--fg); border-bottom-color: var(--acc); }
.tab { display: none; }
.tab.on { display: block; }

.log { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
       padding: 1rem; font-family: var(--mono); font-size: .8125rem; white-space: pre-wrap; }

.verdict { border-left: 3px solid var(--line); padding: .75rem 1rem; margin: 0 0 1rem; background: var(--panel); }
.verdict.good { border-left-color: var(--ok); }
.verdict.mid  { border-left-color: var(--warn); }
.verdict.bad  { border-left-color: var(--err); }

/* ---- Editor ---- */
.wrap.wide { max-width: 1400px; }

.steps { display: flex; gap: .5rem; margin: 1.5rem 0; }
.steps .step {
  flex: 1;
  justify-content: center;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--muted); font: inherit; padding: .5rem 1rem; cursor: pointer;
  display: flex; align-items: center; gap: .5rem;
}
.steps .step b {
  background: var(--line); color: var(--fg); border-radius: 50%;
  width: 1.5em; height: 1.5em; display: grid; place-items: center; font-size: .75rem;
}
.steps .step.on { color: var(--fg); border-color: var(--acc); }
.steps .step.on b { background: var(--acc); }
.pane { display: none; }
.pane.on { display: block; }

fieldset.slot {
  border: 1px solid var(--line); border-left-width: 3px; border-radius: var(--radius);
  margin: 0 0 1rem; padding: .75rem 1rem;
}
fieldset.slot.ok  { border-left-color: var(--ok); }
fieldset.slot.bad { border-left-color: var(--warn); }
fieldset.slot legend { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: 0 .5rem; }
fieldset.slot .lbl { width: 22ch; }
fieldset.slot .cnt { width: 5ch; }
fieldset.slot .sum { font-family: var(--mono); color: var(--muted); }
fieldset.slot.ok .sum  { color: var(--ok); }
fieldset.slot.bad .sum { color: var(--warn); }
.grid.tight td { padding: .25rem .375rem; border: 0; }
.pct { width: 9ch; text-align: right; }

.lnk { background: none; border: 0; color: var(--muted); font: inherit; cursor: pointer; padding: .25rem .5rem; }
.lnk:hover { color: var(--acc); }
.btn-sm { padding: .25rem .625rem; font-size: .8125rem; }

.binder { border: 1px solid var(--acc); border-radius: var(--radius); padding: 1rem 1.25rem; margin-top: 1.5rem; }
.binder fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: .5rem .75rem; }
.binder legend { color: var(--muted); font-size: .75rem; padding: 0 .375rem; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { flex-direction: row; align-items: center; gap: .25rem; color: var(--fg); font-size: .8125rem; }

.preview { margin: 1rem 0; }
.preview .count { font-family: var(--mono); font-size: 1.25rem; }
.preview .count.ok  { color: var(--ok); }
.preview .count.bad { color: var(--err); }
.thumbs { display: flex; flex-wrap: wrap; gap: .5rem; }
.thumbs figure { margin: 0; width: 84px; }
.thumbs img { width: 100%; border-radius: 4px; display: block; background: var(--panel); }
.thumbs figcaption { color: var(--muted); font-size: .6875rem; text-align: center; }

tr.st-ungebunden td:first-child { color: var(--muted); }
tr.st-gebunden   td:first-child { color: var(--warn); }
tr.st-abweichung td:first-child { color: var(--err); }
tr.st-geprueft   td:first-child { color: var(--ok); }

.orphans { border: 1px solid var(--line); border-radius: var(--radius); padding: .75rem 1rem; margin-bottom: 1rem; }
.orphans code { color: var(--fg); }
tr.st-verwaist td { opacity: .55; }

.count .delta { font-size: .75em; color: var(--muted); }
.contrib { margin: .25rem 0 .5rem 1.25rem; padding: 0; color: var(--muted); font-size: .8125rem; }
.contrib code { color: var(--fg); }
.grid.tight td.small { font-size: .6875rem; }
details summary { cursor: pointer; color: var(--muted); font-size: .8125rem; }

label.grow { flex: 1 1 22ch; }
label.grow input { width: 100%; }

.num.warn { color: var(--warn); }
td.small { font-size: .75rem; }

.hist-wrap { position: relative; }
.hist {
  display: flex; align-items: flex-end; gap: 1px;
  height: 140px; overflow: hidden;
  margin-top: 1.5rem; border-bottom: 1px solid var(--line);
  position: relative;
}
.hist .bar { flex: 1; background: var(--line); min-height: 1px; margin-bottom: 0; display: block; }
.hist .bar:hover { background: var(--muted); }
.hist .bar.price { background: var(--acc); }
.hist .bar.overflow {
  background: repeating-linear-gradient(
    45deg, var(--line), var(--line) 3px, transparent 3px, transparent 6px);
  border-left: 1px solid var(--muted);
}
.hist-price {
  position: absolute; top: 0; bottom: 0; width: 2px;
  background: var(--acc); pointer-events: none;
}
.hist-axis { display: flex; justify-content: space-between;
  font-size: .75rem; color: var(--muted); margin-top: .25rem; }
.hist-price-row { position: relative; height: 1.2rem; font-size: .75rem; }
.hist-price-row .price-label {
  position: absolute; transform: translateX(-50%);
  color: var(--acc); white-space: nowrap;
}
.hist-price-row .price-out { color: var(--warn); }

.dd-booster { margin-top: 1.5rem; }
.dd-booster h3 { font-size: 1rem; margin: 0 0 .25rem; }
details summary { cursor: pointer; padding: .375rem 0; }
.warn { color: var(--warn); font-size: .8125rem; }

.conc { margin: .5rem 0 1rem; }
.conc h4 { font-size: .875rem; margin: 0 0 .5rem; color: var(--muted); font-weight: 600; }

.conc-bar { display: flex; height: 2rem; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.conc-bar { display: flex; min-width: 0; max-width: 100%; overflow: hidden; }
.conc-seg { display: flex; align-items: center; overflow: hidden; cursor: default; border-right: 1px solid var(--bg); min-width: 2px; flex-shrink: 1; }
.conc-seg:last-child { border-right: 0; }
.conc-seg-label { padding: 0 .5rem; font-size: .75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--bg); font-weight: 600; }
.conc-seg-0 { background: var(--acc); }
.conc-seg-1 { background: #ff6b4a; }
.conc-seg-2 { background: #d29922; }
.conc-seg-3 { background: #e0a95f; }
.conc-seg-4 { background: #c98b5f; }
.conc-seg-rest { background: var(--line); }
.conc-note { margin-top: .5rem; }

.conc-pop {
  position: absolute; z-index: 50; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .625rem .75rem; font-size: .8125rem;
  box-shadow: 0 4px 16px rgba(0,0,0,.4); pointer-events: none; max-width: 260px;
}
.conc-pop-link { pointer-events: auto; }
.conc-pop.hidden { display: none; }
.conc-pop-title { font-weight: 600; margin-bottom: .375rem; }
.conc-pop-row { display: flex; justify-content: space-between; gap: 1rem; color: var(--muted); }
.conc-pop-row span:last-child { color: var(--fg); font-family: var(--mono); }
.conc-pop-link { margin-top: .5rem; padding-top: .5rem; border-top: 1px solid var(--line); color: var(--acc2); font-size: .75rem; }

.conc-seg-link { cursor: pointer; }

.grid.overview th { cursor: pointer; user-select: none; white-space: nowrap; }
.grid.overview th.sorted { color: var(--fg); }
.grid.overview tbody tr.clk { cursor: pointer; }
.grid.overview tbody tr.clk:hover td { background: var(--panel); }
.grid.overview tbody tr.good td:first-child { box-shadow: inset 3px 0 var(--ok); }
.grid.overview tbody tr.mid  td:first-child { box-shadow: inset 3px 0 var(--warn); }
.grid.overview tbody tr.bad  td:first-child { box-shadow: inset 3px 0 var(--err); }

.progress { height: 8px; background: var(--line); border-radius: 4px; overflow: hidden; margin: .5rem 0 .25rem; }
.progress-bar { height: 100%; background: var(--acc); transition: width .15s; }
#batch { margin: 0 0 1.5rem; font-size: .8125rem; color: var(--muted); }
#batch .err { display: block; margin-top: .25rem; }

.preview-box { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; margin-top: 1rem; }
.preview-box.stale { border-left: 3px solid var(--warn); }
.preview-box .stale-note { color: var(--warn); font-size: .8125rem; margin-top: .25rem; }

.hidden { display: none; }

.browse-layout { display: grid; grid-template-columns: 1fr 320px; gap: 2rem; align-items: start; }
.browse-sidebar { position: sticky; top: 1.5rem; }
@media (max-width: 900px) {
  .browse-layout { grid-template-columns: minmax(0, 1fr); }
  .browse-sidebar { position: static; }
  .browse-layout-product-detail .browse-sidebar { order: -1; }
  .browse-layout-profile .browse-sidebar { order: -1; }

  /* Karten-Seite: einzelne Bloecke statt Kopf/Sidebar en bloc neu sortieren */
  .card-page > div, .card-page > aside { display: contents; }
  .card-page #cardTop { order: 1; }
  .card-page #cardImg { order: 2; }
  .card-page #cardPriceTile { order: 3; }
  .card-page #cardLegality { order: 4; }
  .card-page #cardTabs { order: 5; }
  .card-page .tab { order: 6; }

  /* Das display:contents-Flatten macht jedes Element zu einem eigenen Grid-Item —
     der sonst nur zwischen Haupt-/Sidebar-Spalte wirkende gap:2rem würde sich sonst
     zusätzlich zum h2-Top-Margin des Tab-Inhalts aufsummieren. */
  .card-page.browse-layout { gap: .5rem; }
  .card-page #cardTabs { margin-bottom: 0; }
}

.set-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .5rem; justify-content: start; }

@media (max-width: 480px) {
  .set-grid { grid-template-columns: repeat(3, 1fr); gap: .375rem; justify-content: normal; }
}
.set-tile {
  position: relative;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: .625rem; text-align: center; cursor: pointer;
}
.set-tile:hover { border-color: var(--acc); }
.set-tile.sel { border-color: var(--acc); background: color-mix(in srgb, var(--acc) 15%, var(--panel)); }
.set-tile .set-icon { width: 28px; height: 28px; margin-bottom: .375rem; filter: invert(1); }
.set-tile .set-name { font-size: .75rem; }
.set-tile .badge-new {
  position: absolute; top: -8px; left: -8px;
  background: var(--acc); color: var(--fg); font-size: .625rem;
  padding: .125rem .5rem; border-radius: 999px;
}

.prod-group { margin-bottom: 1.5rem; }
.prod-group h3 { font-size: .9375rem; margin: 0 0 .5rem; color: var(--muted); }
.prod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .75rem; justify-content: start; }
.prod-tile {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: .75rem 1rem; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.prod-tile:hover { border-color: var(--acc); }
.prod-tile.sel { border-color: var(--acc); background: color-mix(in srgb, var(--acc) 15%, var(--panel)); }
.prod-tile .prod-name { font-size: .875rem; }
.prod-tile .prod-price { font-family: var(--mono); text-align: right; }
.prod-tile .prod-price-sub { display: block; font-size: .6875rem; color: var(--muted); font-family: var(--font); }
.prod-tile.disabled { cursor: default; opacity: .5; }
.prod-tile.disabled:hover { border-color: var(--line); }

.preview-box { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; margin-top: 1rem; }
.preview-box.stale { border-left: 3px solid var(--warn); }
.preview-box .stale-note { color: var(--warn); font-size: .8125rem; margin: .5rem 0; }
.preview-box .btn { margin-top: .75rem; }
.preview-box .prod-name { font-size: 1rem; font-weight: 600; margin-bottom: .75rem; }

.settings-box { margin-top: 1rem; border: 1px solid var(--line); border-radius: var(--radius); padding: .75rem 1rem; }
.settings-box summary { cursor: pointer; color: var(--muted); }
.settings-box form { display: flex; flex-direction: column; gap: .75rem; margin-top: .75rem; }
.settings-box label { width: 100%; }
.settings-box input, .settings-box select { width: 100%; }

.stats-table td:first-child { color: var(--muted); }
.stats-table .sub { display: block; color: var(--muted); font-size: .75rem; font-family: var(--font); }
.realization-note { margin-top: .75rem; }
.foot-note { margin-top: 1rem; font-size: .8125rem; }

.slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .875rem; margin: 1rem 0; }

@media (max-width: 460px) {
  .slot-grid { grid-template-columns: 1fr; gap: .625rem; }
}
@media (min-width: 461px) and (max-width: 600px) {
  .slot-grid { grid-template-columns: repeat(2, 1fr); gap: .625rem; }
}
.slot-tile {
  position: relative;
  aspect-ratio: 63 / 88;
  background: linear-gradient(180deg, var(--panel), color-mix(in srgb, var(--panel) 85%, black));
  border: 2px solid var(--line); border-radius: 10px;
  padding: .625rem .5rem .5rem; cursor: pointer; text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.slot-tile:hover { border-color: var(--acc2); transform: translateY(-2px); }
.slot-tile.sel { border-color: var(--acc); box-shadow: 0 0 0 1px var(--acc); }
.slot-tile.slot-rare { border-color: var(--warn); }
.slot-tile.slot-foil {
  border: 2px solid transparent;
  background:
    linear-gradient(180deg, var(--panel), color-mix(in srgb, var(--panel) 85%, black)) padding-box,
    linear-gradient(135deg, #ff6b4a, #ffd76b, #6bffb8, #6bb8ff, #bc8cff) border-box;
}
.slot-tile.slot-foil.sel {
  box-shadow: 0 0 0 1px #bc8cff;
}
.slot-tile .slot-art {
  flex: 1; display: flex; align-items: center; justify-content: center;
}
.slot-tile .slot-set-icon { width: 28px; height: 28px; opacity: .5; filter: invert(1); }
.slot-tile .slot-title { font-weight: 600; font-size: .75rem; line-height: 1.2; }
.slot-tile .slot-sub { color: var(--muted); font-size: .6875rem; margin: .125rem 0 .375rem; }
.slot-tile .slot-stats { display: flex; flex-direction: column; gap: .1875rem; width: 100%; border-top: 1px solid var(--line); padding-top: .375rem; }
.slot-tile .slot-stat {
  display: flex; align-items: center; justify-content: center; gap: .25rem;
  font-family: var(--mono); font-size: .6875rem; color: var(--fg);
}
.slot-tile .slot-stat:nth-child(2) { white-space: normal; text-align: center; }
.slot-tile .slot-stat svg { flex-shrink: 0; opacity: .6; }
.slot-detail { margin-top: .75rem; scroll-margin-top: 1rem; }

.slot-badge {
  position: absolute; top: -.5rem; left: -.5rem;
  background: var(--fg); color: var(--bg); font-size: .6875rem; font-weight: 700;
  min-width: 1.5rem; height: 1.5rem; border-radius: 999px;
  display: flex; align-items: center; justify-content: center; padding: 0 .375rem;
  cursor:default
}

.sheet-table { border: 1px solid var(--line); border-radius: var(--radius); border-collapse: separate; border-spacing: 0; overflow: hidden; }
.sheet-table th, .sheet-table td { border-bottom: 1px solid var(--line); }
.sheet-table tr:last-child td { border-bottom: 0; }
.sheet-table th.sortable { cursor: pointer; user-select: none; }
.sheet-table th.sortable:hover { color: var(--fg); }
.sheet-table th.sorted { color: var(--fg); }
.sheet-table th.sorted::after { content: ' ▲'; font-size: .625rem; }
.sheet-table th.sorted.sorted-desc::after { content: ' ▼'; }

.price-tile {
  display: flex; justify-content: space-between; align-items: baseline;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: .75rem 1rem; margin-bottom: 1rem;
}
.price-tile .k { color: var(--muted); font-size: .8125rem; }
.price-tile .v { font-family: var(--mono); font-size: 1.5rem; }

.views-table { table-layout: fixed; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; border-collapse: separate; border-spacing: 0; }
.views-table th { white-space: nowrap; font-size: .75rem; padding: .625rem .5rem; }
.views-table tr { background: transparent; }
.views-table tr:not(:last-child) td { border-bottom: 1px solid var(--line); }
.views-table td { padding: .625rem .5rem; vertical-align: middle; }
.views-table td:first-child { color: var(--fg); font-weight: 600; font-size: .8125rem; padding-left: .5rem; }
.views-table td.good { background: color-mix(in srgb, var(--ok) 16%, transparent); }
.views-table td.mid  { background: color-mix(in srgb, var(--warn) 16%, transparent); }
.views-table td.bad  { background: color-mix(in srgb, var(--err) 16%, transparent); }
.views-table tr.sel td:first-child { border-left: 3px solid var(--acc2); }
.views-table tr:not(.sel) td:first-child { border-left: 3px solid transparent; }
.view-label { white-space: nowrap; cursor: default; }

.grid.overview { border-spacing: 0; font-size: .8125rem; }
.grid.overview th, .grid.overview td { padding: .375rem .5rem; }
.grid.overview .view-group-head { text-align: center; padding: .375rem .5rem; }
.grid.overview .view-spacer { width: .5rem; padding: 0; border-bottom: 0; }

.grid.overview td.good { background: color-mix(in srgb, var(--ok) 16%, transparent); }
.grid.overview td.mid  { background: color-mix(in srgb, var(--warn) 16%, transparent); }
.grid.overview td.bad  { background: color-mix(in srgb, var(--err) 16%, transparent); }

.score-cell { max-width: 4rem; }
.dot-row { line-height: 1.3; }
.score-cell .dot { font-size: .5rem; }

.score-cell .dot { letter-spacing: .05em; }
.score-cell .dot-good { color: var(--ok); }
.score-cell .dot-mid  { color: var(--muted); }
.score-cell .dot-bad  { color: var(--err); }

.ext-link {
  display: inline-block; font-size: .625rem; font-weight: 700;
  border: 1px solid var(--line); border-radius: 3px; padding: .0625rem .25rem;
  color: var(--muted); vertical-align: middle;
}
.ext-link:hover { border-color: var(--acc2); color: var(--fg); }
.prod-links { margin: -.75rem 0 1rem; font-size: .8125rem; }
.prod-links a { margin-right: .75rem; }

.zero-foil-details { margin-top: .5rem; }
.zero-foil-details summary { cursor: pointer; color: var(--fg); }
.zero-foil-deck { margin-top: .5rem; color: var(--muted); font-size: .8125rem; }
.zero-foil-deck strong { color: var(--fg); }

.back-link { display: inline-block; margin-bottom: .75rem; }

.row-hidden { opacity: .45; }
.hide-btn { background: none; border: 0; cursor: pointer; font-size: 1rem; padding: .125rem .375rem; }
.hide-btn:hover { background: var(--panel); border-radius: 4px; }

.stale-icon { color: var(--warn); margin-left: .25rem; cursor: help; font-size: .75rem; }

.preview-box .price-tile { margin: .75rem 0; }
.preview-box .views-table { margin: .75rem 0; }
.preview-box .btn { margin-top: .75rem; }

.trend-title { font-size: .875rem; margin: 1rem 0 .5rem; color: var(--muted); font-weight: 600; }
.trend-legend { display: flex; gap: 1rem; font-size: .75rem; color: var(--muted); margin-top: .375rem; align-items: center; }
.trend-dot { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; margin-right: .25rem; }
.trend-dot-ev { background: var(--acc); }
.trend-dot-price { background: var(--acc2); }
.trend-note { margin-top: .375rem; }
.trend-count { margin-top: .25rem; font-size: .6875rem; color: var(--muted); }

.grid.movers tr.clk { cursor: pointer; }
.grid.movers tr.clk:hover td { background: color-mix(in srgb, var(--fg) 4%, transparent); }
.grid.movers td.good { color: var(--ok); }
.grid.movers td.bad  { color: var(--err); }

.grid.movers th.sortable { cursor: pointer; user-select: none; }
.grid.movers th.sortable:hover { color: var(--fg); }

.input-suffix { display: flex; align-items: center; gap: .375rem; }
.input-suffix input { width: 100%; }
.input-suffix .suffix { color: var(--muted); font-size: .8125rem; white-space: nowrap; }

@media (max-width: 720px) {
  #step2, #previewBox { scroll-margin-top: 1rem; }
}

@media (max-width: 700px) {
  .views-table { table-layout: fixed; width: 100%; }
  .views-table td, .views-table th { white-space: normal; word-break: break-word; }
  .views-table td:first-child { word-break: normal; }
}

.hist-wrap, .hist, .trend-spark { max-width: 100%; }
svg { max-width: 100%; height: auto; }

/* Flex- und Grid-Container haben per Spezifikation min-width:auto auf ihren Kindern,
   wodurch Inhalte mit langem Text (nowrap) sich weigern zu schrumpfen und den
   Container sprengen — die haeufigste Ursache fuer mobile Horizontal-Overflow. */
.browse-layout, .dd-booster, .slot-grid, .cards, .conc-bar, .trend-legend,
.score-cell, .bar.form-row, .steps, .tabs, #cardImg {
  min-width: 0;
}
.browse-layout > *, .slot-grid > *, .cards > * {
  min-width: 0;
}

/* Zusammensetzung: Karten-Ansicht ist Default-versteckt, Tabelle ist Default sichtbar */
.comp-cards { display: none; }

.comp-cards-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; margin-bottom: .5rem; }
.comp-card { border-bottom: 1px solid var(--line); padding: .625rem 0; }
.comp-card:last-child { border-bottom: 0; }
.comp-card-row1 { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; }
.comp-card-name { font-weight: 600; }
.comp-card-val { font-family: var(--mono); flex-shrink: 0; }
.comp-card-row2 { font-size: .75rem; margin-top: .125rem; }

@media (max-width: 600px) {
  .comp-table { display: none; }
  .comp-cards { display: block; }
}

/* Slot-Kacheln: bei sehr schmaler Breite von Hochformat-Karte auf kompakte Zeile umstellen */
@media (max-width: 460px) {
  .slot-tile {
    aspect-ratio: auto; flex-direction: row; align-items: center;
    padding: .625rem; gap: .75rem; text-align: left;
  }
  .slot-tile .slot-art { flex: 0 0 auto; padding: 0; }
  .slot-tile .slot-set-icon { width: 26px; height: 26px; }
  .slot-tile .slot-info { flex: 1; min-width: 0; text-align: left; }
  .slot-tile .slot-title { font-size: .8125rem; }
  .slot-tile .slot-sub { margin: 0 0 .25rem; }
  .slot-tile .slot-stats {
    flex-direction: row; flex-wrap: wrap; justify-content: flex-start;
    gap: .375rem .75rem; border-top: 0; padding-top: 0;
  }
  .slot-badge { position: static; flex: 0 0 auto; margin-right: -.375rem; }
}

.conc-pop-link { display: inline-block; margin-top: .5rem; padding-top: .5rem; border-top: 1px solid var(--line); color: var(--acc2); font-size: .75rem; }

/* Deck-/Bogen-Detailtabellen: auf schmalen Screens Seltenheit + P(Zug) ausblenden,
   damit Karte/Preis/EV-Beitrag ohne horizontales Scrollen lesbar bleiben. */
@media (max-width: 480px) {
  .slot-detail .sheet-table:not(.deck-table) th:nth-child(2), .slot-detail .sheet-table:not(.deck-table) td:nth-child(2),
  .slot-detail .sheet-table:not(.deck-table) th:nth-child(3), .slot-detail .sheet-table:not(.deck-table) td:nth-child(3) {
    display: none;
  }
  .slot-detail table.sheet-table:not(.deck-table) { min-width: 0; }
}

@media (max-width: 700px) {
  .deck-detail table.deck-table { table-layout: fixed; width: 100%; min-width: 0; }
  .deck-detail table.deck-table td, .deck-detail table.deck-table th {
    white-space: normal; word-break: break-word;
  }
}

.ov-cards { display: none; }

.ov-card { border: 1px solid var(--line); border-radius: var(--radius); padding: .75rem; margin-bottom: .75rem; }
.ov-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; cursor: pointer; }
.ov-card-name { font-weight: 600; }
.ov-card-cat { font-weight: 400; font-size: .75rem; margin-top: .125rem; }
.ov-card-score { flex-shrink: 0; }
.ov-card-toggle {
  width: 100%; text-align: center; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); color: var(--fg); font-weight: 600;
  font-size: .875rem; padding: .625rem; margin-top: .625rem; cursor: pointer;
}
.ov-card-toggle:active { border-color: var(--acc); }
.ov-card-details { margin-top: .625rem; border-top: 1px solid var(--line); padding-top: .625rem; }
.ov-card-details.hidden { display: none; }
.ov-card-detail-head, .ov-card-detail-row {
  display: grid; grid-template-columns: 1fr auto auto; gap: .75rem;
  padding: .25rem 0; font-size: .8125rem;
}
.ov-card-detail-head { color: var(--muted); font-size: .75rem; }
.ov-card-detail-label { color: var(--fg); }
.ov-card-hide {
  width: 100%; margin-top: .5rem; background: none; border: 0;
  color: var(--muted); padding: .375rem; font-size: .75rem; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
.ov-card-hide:active { color: var(--err); }

@media (max-width: 700px) {
  table.grid.overview { display: none; }
  .ov-cards { display: block; }
}
.ov-card-price-row {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: .5rem; padding-top: .5rem; border-top: 1px solid var(--line);
}
.ov-card-price-label { font-size: .8125rem; }
.ov-card-price { font-family: var(--mono); font-weight: 700; font-size: 1.125rem; color: var(--fg); }

.mv-cards { display: none; }

.mv-card { border: 1px solid var(--line); border-radius: var(--radius); padding: .75rem; margin-bottom: .625rem; }
.mv-card.clk { cursor: pointer; }
.mv-card-name { font-weight: 600; }
.mv-card-sub { font-size: .8125rem; margin-top: .125rem; }
.mv-card-prices { font-family: var(--mono); font-size: .8125rem; margin-top: .375rem; }
.mv-card-delta { font-family: var(--mono); font-weight: 700; margin-top: .25rem; }
.mv-card-delta.good { color: var(--ok); }
.mv-card-delta.bad { color: var(--err); }

@media (max-width: 700px) {
  table.grid.movers { display: none; }
  .mv-cards { display: block; }
}

/* Filterleiste auf Mobile einklappbar */
.filter-toggle-btn { display: none; margin-bottom: .75rem; }
@media (max-width: 700px) {
  .filter-toggle-btn { display: inline-block; }
  #movFilter { display: none; }
  #movFilter.open { display: flex; }
}

/* Karten-Sortierleiste, nur auf Mobile sichtbar (Tabellen-Header-Klick gibt es dort nicht) */
.mv-sort-bar { display: none; }
@media (max-width: 700px) {
.mv-sort-bar { display: flex; gap: .5rem; margin-bottom: .75rem; }
.mv-sort-bar select { flex: 1; }
.mv-sort-bar #mvSortDir {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--fg); font: inherit; padding: .5rem .75rem; cursor: pointer; white-space: nowrap;
}
.mv-sort-bar #mvSortDir:hover { border-color: var(--acc); }
}

/* Card-Layout aufgeraeumt: Name/Delta prominent, Rest sekundaer */
.mv-card { display: flex; flex-direction: column; gap: .25rem; }
.mv-card-name { font-weight: 600; font-size: .9375rem; }
.mv-card-sub { font-size: .75rem; }
.mv-card-prices { font-size: .8125rem; order: 3; }
.mv-card-delta { font-size: 1rem; order: 2; }

.tilt-wrap {
  position: relative;
  margin-bottom: 1rem;
}
.tilt-img {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 63 / 88;
  object-fit: contain;
  display: block;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  transition: transform .15s ease-out;
  will-change: transform;
}

.good { color: var(--ok); }
.bad { color: var(--err); }
.mid { color: var(--warn); }

.dot { font-size: .625rem; letter-spacing: .05em; }
.dot-good { color: var(--ok); }
.dot-mid  { color: var(--muted); }
.dot-bad  { color: var(--err); }

.digest-cols {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start;
}
@media (max-width: 700px) {
  .digest-cols { grid-template-columns: 1fr; }
}
.set-ov-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.25rem; }
.set-ov-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 1.25rem; cursor: pointer;
  display: flex; flex-direction: column; justify-content: space-between; gap: 1rem;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.set-ov-card:hover {
  border-color: var(--acc);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
.set-ov-head { display: flex; align-items: center; gap: 1rem; }
.set-ov-icon-wrap {
  width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--bg);
  border: 1px solid var(--line); display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.set-ov-icon { width: 1.875rem; height: 1.875rem; filter: invert(1); }
.set-ov-name {
  font-family: var(--mono-lg); font-weight: 700; font-size: 1.375rem;
  letter-spacing: .01em; line-height: 1.2;
}
.set-ov-sub { font-size: .75rem; margin-top: .375rem; }
.set-ov-stats { display: flex; align-items: center; justify-content: center; gap: 1.5rem; border-top: 1px solid var(--line); padding-top: .875rem; text-align: center; }
.set-ov-stats .k { color: var(--muted); font-size: .75rem; }
.set-ov-stats .v { font-family: var(--mono); font-size: .9375rem; font-weight: 600; }

.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1.25rem; }

@media (max-width: 480px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); gap: .625rem; }
}
.card-grid-item {
  display: flex; flex-direction: column; color: var(--fg); border: 1px solid var(--line);
  border-radius: 10px; padding: .625rem; background: var(--panel); transition: border-color .15s;
  height: 100%;
}
.card-grid-item .card-grid-body { flex: 1; display: flex; flex-direction: column; }
.card-grid-item .card-grid-name { flex: 1; margin-top: .25rem; padding-bottom: .5rem; margin-bottom: .5rem; border-bottom: 1px solid var(--line); }
.card-grid-prices { margin-top: auto; padding-top: .5rem; }
.card-grid-item:hover { border-color: var(--acc); }
.card-grid-item img {
  width: 100%; aspect-ratio: 63/88; object-fit: cover; border-radius: 6px;
  display: block; margin-bottom: .5rem; background: var(--bg);
}
.card-grid-placeholder {
  width: 100%; aspect-ratio: 63/88; border-radius: 6px; background: var(--bg);
  border: 1px solid var(--line); display: flex; align-items: center; justify-content: center;
  margin-bottom: .5rem;
}
.card-grid-name { font-size: .8125rem; font-weight: 600; line-height: 1.25; }
.card-grid-sub { font-size: .75rem; margin-top: .125rem; }
.card-grid-prices { display: flex; gap: .375rem; margin-top: .5rem; }
.card-grid-price-tile {
  flex: 1; text-align: center; background: var(--bg); border: 1px solid var(--line);
  border-radius: 6px; padding: .25rem .375rem;
}
.card-grid-price-label { display: block; font-size: .5625rem; text-transform: uppercase; letter-spacing: .02em; }

.carousel-wrap { position: relative; }
.carousel-track {
  display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x proximity;
  padding: .25rem .125rem .75rem; scrollbar-width: thin;
}
.carousel-track { align-items: stretch; }
.carousel-track .carousel-item {
  flex: 0 0 160px; scroll-snap-align: start; align-self: stretch; height: auto;
}
.carousel-btn {
  flex-shrink: 0; width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--panel); border: 1px solid var(--line); color: var(--fg);
  font-size: 1.125rem; line-height: 1; cursor: pointer; display: flex;
  align-items: center; justify-content: center;
}
.carousel-btn:hover { border-color: var(--acc); }

.carousel-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.carousel-header-btns { display: flex; gap: .5rem; }
.carousel-header-btns.hidden { display: none; }

@media (max-width: 700px) {
  .carousel-header-btns { display: none; }
}

.set-head-bar { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.set-head-bar h1 { margin: 0; font-size: 1.75rem; }
.set-head-stats {
  display: flex; gap: 1.5rem; margin-left: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: .75rem 1.25rem;
  max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.set-head-stats > div { flex-shrink: 0; text-align: center; }
.set-head-stats .k { color: var(--muted); font-size: .75rem; white-space: nowrap; }
.set-head-stats .v { font-family: var(--mono); font-size: 1.0625rem; font-weight: 700; white-space: nowrap; }

@media (max-width: 700px) {
  .set-head-stats { margin-left: 0; gap: 1.25rem; width: 100%; justify-content: center; }
}

@media (max-width: 420px) {
  .set-head-stats { gap: 1rem; padding: .625rem .875rem; }
  .set-head-stats .v { font-size: .9375rem; }
}

.mv-thumb {
  width: 40px; height: 56px; object-fit: cover; border-radius: 4px;
  flex-shrink: 0; background: var(--panel); vertical-align: middle;
}
.mv-thumb-placeholder {
  width: 40px; height: 56px; border-radius: 4px; flex-shrink: 0;
  background: var(--panel); border: 1px solid var(--line); display: inline-block; vertical-align: middle;
}
.mv-name-row { display: flex; align-items: center; gap: .625rem; }
.mv-name-col { min-width: 0; }
.mv-name-sub { display: block; margin-top: .125rem; }

.vol-bar-wrap { margin: .5rem 0 .25rem; }
.vol-bar {
  position: relative; height: 8px; border-radius: 4px;
  background: linear-gradient(90deg, var(--err), var(--warn), var(--ok));
  opacity: .35;
}
.vol-bar-marker {
  position: absolute; top: -3px; width: 2px; height: 14px;
  transform: translateX(-1px);
}
.vol-bar-marker-median { background: var(--muted); }
.vol-bar-marker-price { background: var(--fg); top: -5px; height: 18px; width: 3px; }
.vol-price-row { display: flex; align-items: center; gap: .5rem; margin-top: .625rem; padding-top: .5rem; border-top: 1px solid var(--line); }
.vol-price-label { font-size: .8125rem; font-weight: 600; }
.vol-bar-range { display: flex; justify-content: space-between; font-size: .6875rem; color: var(--muted); margin-top: .25rem; }
.vol-level-row { display: flex; align-items: center; gap: .625rem; margin-top: .375rem; }
.vol-level { font-weight: 700; font-size: .9375rem; }
.vol-skew { font-size: .75rem; padding: .125rem .5rem; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); }
.vol-note { margin-top: .25rem; }

.timeline { position: relative; padding-left: 1.75rem; margin-top: 1rem; }
.timeline::before {
  content: ''; position: absolute; left: .4375rem; top: .375rem; bottom: 0; width: 2px; background: var(--line);
}
.timeline-item { position: relative; margin-bottom: 1.75rem; }
.timeline-dot {
  position: absolute; left: -1.75rem; top: .3125rem; width: .875rem; height: .875rem;
  border-radius: 50%; background: var(--ok); border: 2px solid var(--bg);
}
.timeline-dot.bad { background: var(--err); }
.timeline-date { font-size: .75rem; color: var(--muted); margin-bottom: .25rem; }
.timeline-head { display: flex; align-items: center; gap: .625rem; flex-wrap: wrap; margin-bottom: .5rem; }
.timeline-head .carousel-header-btns { margin-left: auto; }
.timeline-label { font-weight: 600; }
.timeline-delta { font-size: .8125rem; font-weight: 700; }
.timeline-delta.good { color: var(--ok); }
.timeline-delta.bad { color: var(--err); }

.carousel-btn.faded { opacity: .35; pointer-events: none; }

.timeline-more { opacity: .6; }
.timeline-more-body {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .125rem; text-align: center;
}
.timeline-more-count { font-family: var(--mono-lg); font-weight: 800; font-size: 1.125rem; color: var(--acc); }

/* --- MTGX-Ergänzungen --- */
body.auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.auth-box { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 2rem; width: 100%; }
.auth-box h1 { text-align: center; }
.auth-box .error { color: var(--err); margin-bottom: .75rem; }
.auth-box input[type=text], .auth-box input[type=password] { width: 100%; margin-bottom: .75rem; }
.auth-box .btn { width: 100%; margin-top: .5rem; cursor: pointer; text-align: center; }

.progress-panel, .price-panel { margin: 1rem 0; padding: .75rem 1rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.progress-panel progress, .price-panel progress { width: 100%; height: .75rem; margin: .5rem 0; }

.st-done { color: var(--ok); }
.st-error { color: var(--err); font-weight: 700; }
.st-running { color: var(--warn); }
.st-pending { color: var(--muted); }

/* --- Erfassung (capture.php) --- */
.capture-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1rem; }
.cn-input { flex: 1; min-width: 8rem; font-family: var(--mono); font-size: 1.5rem; text-align: center; letter-spacing: .05em; }
.foil-toggle.on {
  background: linear-gradient(90deg, rgba(224,0,85,.55), rgba(0,136,255,.55));
  color: var(--fg);
  border-color: transparent;
}
.pack-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1rem; }
.browse-sidebar .capture-bar,
.browse-sidebar .pack-bar { flex-direction: column; align-items: stretch; }
.browse-sidebar .pack-bar .pack-btn,
.browse-sidebar .capture-bar > * { width: 100%; }
.pack-btn {
  background: var(--acc); border-color: var(--acc); color: var(--bg); font-weight: 700;
  animation: pack-start-pulse 1.4s ease-out infinite;
}
.pack-bar.open .pack-btn:not(.pack-btn-ready) {
  background: var(--panel); border-color: var(--line); color: var(--fg);
  animation: none;
}
.pack-bar select:disabled { opacity: .5; }
#packInfo { margin-left: auto; }

#flashWrap { position: relative; min-height: 96px; margin-bottom: 1rem; }
#flashTrack { padding: 0 20vw .75rem .125rem; gap: .625rem; }
.flash-card {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: .375rem;
  scroll-snap-align: end; padding: .625rem;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  height: 100%;
}
.flash-card-last { border-color: var(--acc); }
.flash-card img { height: 280px; width: auto; border-radius: 6px; background: var(--bg); display: block; }
.flash-card-cap { display: flex; flex-direction: column; align-items: center; gap: .1875rem; text-align: center; font-size: .75rem; max-width: 140px; color: var(--muted); }
.flash-card-cap strong { font-size: .8125rem; color: var(--fg); }
.flash-card .card-grid-prices { margin-top: auto; padding-top: .375rem; width: 100%; }
.flash-card-err {
  justify-content: center; min-width: 140px; padding: .75rem 1rem;
  background: color-mix(in srgb, var(--err) 12%, var(--panel));
  border: 1px solid var(--err); border-radius: 10px;
}
.flash-card-err-body { color: var(--err); font-weight: 600; font-size: .8125rem; text-align: center; }

@media (max-width: 900px) {
  .flash-card img { height: 150px; }
}
.price-hi { color: var(--warn) !important; font-weight: 700; }

.numpad { display: none; grid-template-columns: repeat(3, 1fr); gap: .375rem; margin-bottom: 1rem; }
.numpad button { height: 3.25rem; font-size: 1.25rem; font-weight: 600; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); color: var(--fg); }
.numpad button.alt { color: var(--muted); }
.numpad button.ok { background: var(--ok); color: var(--bg); border-color: var(--ok); }

.sess-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .5rem; }
.sess-list { max-height: 40vh; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.sess-row { display: flex; align-items: center; gap: .625rem; padding: .375rem .625rem; border-bottom: 1px solid var(--line); }
.sess-row:last-child { border-bottom: 0; }
.sess-row img, .sess-row .ph { width: 30px; height: 42px; border-radius: 4px; background: var(--bg); object-fit: cover; flex-shrink: 0; }
.sess-row .n { font-family: var(--mono); color: var(--muted); min-width: 3ch; }
.sess-row .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sess-row .fo { color: var(--warn); font-weight: 700; font-size: .75rem; }

@media (max-width: 600px) {
  .cn-input { display: none; }
  .numpad { display: grid; }
  .flash-card img { height: 72px; }
}

.num-display {
  display: none;
  text-align: center; font-family: var(--mono-lg); font-weight: 800;
  font-size: 2.5rem; letter-spacing: .1em; padding: .5rem;
  font-variant-numeric: tabular-nums; color: var(--fg);
}
@media (max-width: 600px) {
  .num-display { display: block; }
}

.numpad button, .foil-toggle, .pack-btn { touch-action: manipulation; }

.numpad button:disabled,
.foil-toggle:disabled,
#undo:disabled {
  opacity: .35;
  cursor: not-allowed;
}

/* --- Erfassen: eigenständiges Mobil-Layout mit fester Reihenfolge --- */
@media (max-width: 600px) {
  .capture-hide-mobile { display: none; }

  body.capture-page {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    overflow: hidden;
  }
  body.capture-page .wrap {
    margin: 0;
  }
  body.capture-page .topbar {
    padding: .5rem .75rem;
    flex-shrink: 0;
  }
  body.capture-page .back-link {
    display: none;
  }

  body.capture-step3 .wrap {
    flex: 1;
    display: grid;
    min-height: 0;
    overflow-y: auto;
    padding: .5rem .625rem;
    max-width: 100%;
    margin: 0;
    gap: .5rem;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr) auto auto;
    grid-template-areas:
      "packBtn  packBtn  packBtn"
      "altSet   undo     foil"
      "flash    flash    flash"
      "num      num      num"
      "pad      pad      pad";
  }

  /* Einzelkarten-Modus: keine Pack-Bar im DOM → obere Zeile + altSet-Spalte entfallen */
  body.capture-step3 .wrap:not(:has(#packBar)) {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    grid-template-areas:
      "undo     foil"
      "flash    flash"
      "num      num"
      "pad      pad";
  }

  /* Wrapper-Divs (inkl. #step3-Pane selbst) werden transparent,
     damit ihre Kinder direkt im Grid von .wrap platziert werden */
  body.capture-step3 #step3,
  body.capture-step3 .browse-layout,
  body.capture-step3 .browse-main,
  body.capture-step3 .browse-sidebar,
  body.capture-step3 .capture-bar,
  body.capture-step3 .pack-bar {
    display: contents;
  }

  body.capture-step3 #packBtn    { grid-area: packBtn; min-width: 0; }
  body.capture-step3 #altSet     { grid-area: altSet; min-width: 0; }
  body.capture-step3 #undo       { grid-area: undo; min-width: 0; }
  body.capture-step3 #foil       { grid-area: foil; min-width: 0; }
  body.capture-step3 #flashWrap  { grid-area: flash; min-height: 30dvh; margin-bottom: 0; position: relative; overflow: hidden; }
  body.capture-step3 #numDisplay { grid-area: num; padding: .25rem; font-size: 2.75rem; }
  body.capture-step3 #numpad     { grid-area: pad; gap: .5rem; }
  body.capture-step3 .numpad button { height: 3.75rem; font-size: 1.5rem; }

  body.capture-step3 #flashTrack {
    height: 100%;
  }
  body.capture-step3 .flash-card img {
    height: 100%;
    max-height: 30dvh;
    width: auto;
  }

  body.capture-step3 .pack-bar select,
  body.capture-step3 .pack-bar .pack-btn,
  body.capture-step3 .capture-bar select {
    font-size: .8125rem;
    padding: .5rem .625rem;
  }
}

@keyframes price-pulse {
  0%   { transform: scale(1); text-shadow: none; }
  35%  { transform: scale(1.45); text-shadow: 0 0 12px var(--warn); }
  60%  { transform: scale(0.9); text-shadow: 0 0 4px var(--warn); }
  80%  { transform: scale(1.1); text-shadow: none; }
  100% { transform: scale(1); text-shadow: none; }
}

.price-hi {
  color: var(--warn) !important;
  font-weight: 700;
  display: inline-block;
  animation: price-pulse .8s ease-out;
}

@keyframes pack-ready-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 55%, transparent); }
  50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--ok) 0%, transparent); }
}

@keyframes pack-start-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--acc) 55%, transparent); }
  50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--acc) 0%, transparent); }
}

.pack-btn-ready {
  animation: pack-ready-pulse 1.4s ease-out infinite;
  background: var(--ok);
  color: var(--bg);
  border-color: var(--ok);
}

.ms {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  display: inline-block;
}

.card-grid-mana {
  display: flex;
  gap: 2px;
  margin: 2px 0;
  font-size: 0.9rem;
}
.card-grid-mana .ms {
  width: 16px;
  height: 16px;
}

.colors { display:flex; gap:.25rem; }

.ci {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 4px;
  line-height: 0;
  border-radius: 50%;
  overflow: hidden;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--muted);
  font-weight: 700;
  cursor: pointer;
  font-size: 12px;
}
.ci .ms { width: 18px; height: 18px; opacity: .4; transition: opacity .15s; }
.ci.on .ms { opacity: 1; }
.ci.on { box-shadow: 0 0 0 2px var(--acc2) inset; }

.ci-R.on { background: #e88f7e; }
.ci-G.on { background: #7fc09a; }
.ci-C.on { background: #c8ccd4; }

.rar-icon {
  display: inline-block;
  width: 18px; height: 18px;
  vertical-align: -3px;
  margin-right: 3px;
  -webkit-mask: var(--icon) center/contain no-repeat;
  mask: var(--icon) center/contain no-repeat;
  background-color: currentColor;
}
.rar-icon.common   { color: #a6acb9; }
.rar-icon.uncommon { color: #8fa5b8; }
.rar-icon.rare     { color: var(--warn); }
.rar-icon.mythic   { color: #e0682f; }
.rar-icon.special  { color: #a566cc; }
.rar-icon.bonus    { color: var(--ok); }

.card-grid-sub { display: flex; justify-content: space-between; align-items: center; }
.card-grid-setinfo { display: inline-flex; align-items: center; }
.card-grid-mana { display: flex; align-items: center; gap: 2px; }
.card-grid-mana .ms { width: 15px; height: 15px; vertical-align: middle; margin-bottom: 0; }

.card-grid-fins { display: flex; align-items: center; gap: .375rem; flex-wrap: wrap; margin-top: .375rem; }
.fin-chip {
  font-size: .625rem; font-weight: 700; padding: .0625rem .375rem;
  border-radius: 999px; background: var(--bg); border: 1px solid var(--line); color: var(--fg);
  white-space: nowrap;
}
.fin-chip.foil {
  background: linear-gradient(90deg, rgba(224,0,85,.25), rgba(0,136,255,.25));
  color: var(--fg); border-color: transparent;
}

.filterbox { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1.5rem; }
.filter-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.filter-row-end { justify-content: space-between; }

#expCsv, #reset {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-top: .5rem;
  padding-bottom: .5rem;
  line-height: 1.5;
  box-sizing: border-box;
}
@media (max-width: 700px) {
  .filterbox { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
  .filter-row { display: contents; }

  .search-wrap { order: 1; grid-column: 1 / -1; }
  #set { order: 2; }
  #rarity { order: 3; }
  #finish { order: 4; }
  .select-narrow { order: 5; }
  .colors { order: 6; grid-column: 1 / -1; justify-content: center; }
  .select-wrap.select-sort { order: 7; }
  #expCsv { order: 8; }
  #reset { order: 9; }
}

.filter-row select { flex: 1; min-width: 140px; }

.search-wrap { position: relative; flex: 2; min-width: 260px; }
.search-wrap .search-ic {
  position: absolute; left: .55rem; top: 50%; transform: translateY(-50%);
  color: var(--muted); pointer-events: none;
}
.search-wrap input { width: 100%; padding-left: 1.9rem; }

.select-wrap { position: relative; flex: 0 1 180px; }
.select-wrap .select-ic {
  position: absolute; left: .55rem; top: 50%; transform: translateY(-50%);
  color: var(--muted); pointer-events: none;
}
.select-wrap select { width: 100%; padding-left: 1.9rem; }

.select-narrow { flex: 0 1 110px; }

.stock-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .375rem;
}

.stock-list li {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  padding: .375rem .5rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.tilt-img.lang-flipping {
  transition: transform .2s ease-in;
  transform: perspective(700px) rotateY(90deg) !important;
}

.lang-toggle {
  display: flex;
  gap: .375rem;
  justify-content: center;
  margin-bottom: 1rem;
}
.lang-toggle button {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--muted);
  font: inherit;
  font-size: .75rem;
  font-weight: 600;
  padding: .25rem .75rem;
  cursor: pointer;
}
.lang-toggle button.on {
  color: var(--fg);
  border-color: var(--acc);
}

.variant-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: .75rem;
}
.variant-tile {
  display: flex;
  flex-direction: column;
  color: var(--fg);
  text-align: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: .625rem;
  transition: border-color .15s;
}
.variant-tile:hover { border-color: var(--acc); }
.variant-tile img {
  width: 100%;
  aspect-ratio: 63/88;
  object-fit: cover;
  border-radius: 6px;
  display: block;
  margin-bottom: .375rem;
  background: var(--bg);
}
.variant-tile-ph {
  width: 100%;
  aspect-ratio: 63/88;
  border-radius: 6px;
  background: var(--bg);
  border: 1px solid var(--line);
  margin-bottom: .375rem;
}
.variant-tile-sub {
  font-size: .75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .1875rem;
}

.tilt-img.face-flipping {
  transition: transform .3s;
  transform: rotateY(180deg) scale(.96) !important;
}
.card-flip-btn {
  padding: .25rem .625rem;
  margin-left: .5rem;
}
.card-flip-btn span {
  display: inline-block;
  font-size: 1.125rem;
  transform: scale(1.25);
}

.set-ov-logo {
  flex: 1;
  min-width: 0;
  aspect-ratio: 3 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.set-ov-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.set-head-logo {
  width: 130px;
  aspect-ratio: 3 / 1;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.set-head-logo img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.logo-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .25rem;
  min-width: 160px;
}
.logo-preview {
  max-width: 110px;
  max-height: 36px;
  object-fit: contain;
}
.logo-cell input[type="file"] {
  font-size: .75rem;
  max-width: 100%;
}

.progress-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; align-items: start; }
.progset { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; container-type: inline-size; }
.progset.open .proghead { border-bottom: 1px solid var(--line); }
.proghead {
  width: 100%; display: grid;
  grid-template-columns: 20px 1fr auto auto 20px;
  grid-template-areas:
    "icon name count pct caret"
    "bar bar bar bar bar";
  align-items: center; row-gap: .5rem; column-gap: .625rem; padding: .625rem .75rem;
  background: var(--panel); border: 0; color: var(--fg); font: inherit; text-align: left; cursor: pointer;
}
.proghead img { grid-area: icon; }
.proghead .pname { grid-area: name; }
.proghead .n { grid-area: count; font-size: .9375rem; }
.proghead .pct { grid-area: pct; }
.proghead .caret { grid-area: caret; }
.proghead-track { grid-area: bar; height: 6px; }
.proghead:hover { background: color-mix(in srgb, var(--panel) 80%, var(--fg) 5%); }
.proghead img { width: 20px; height: 20px; filter: invert(1) opacity(.7); }
.proghead .pname { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proghead .track { height: 8px; background: var(--line); border-radius: 4px; overflow: hidden; }
.proghead .track > i { display: block; height: 100%; background: var(--acc2); border-radius: 4px; }
.proghead .n { text-align: right; font-family: var(--mono); font-size: .6875rem; color: var(--muted); }
.proghead .pct { text-align: right; font-weight: 700; font-size: .8125rem; }
.proghead .caret { color: var(--muted); transition: transform .15s; text-align: center; }
.progset.open .caret { transform: rotate(180deg); }

.progdetail { display: none; padding: .875rem; }
.progset.open .progdetail { display: flex; flex-direction: column; gap: 1.5rem; }

.prog-row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "label count"
    "track track";
  row-gap: .375rem;
  color: inherit;
}
.prog-row-label { grid-area: label; }
.prog-row .n { grid-area: count; text-align: right; font-family: var(--mono); font-size: .8125rem; color: var(--muted); }
.prog-row .track { grid-area: track; height: 8px; background: var(--line); border-radius: 4px; overflow: hidden; }
.prog-row .track > i { display: block; height: 100%; background: var(--acc2); border-radius: 4px; }

.is-loading{position:relative;min-height:80px;pointer-events:none;opacity:.5;transition:opacity .15s}
.is-loading::after{
  content:'';position:absolute;top:50%;left:50%;width:28px;height:28px;
  margin:-14px 0 0 -14px;border:3px solid var(--line);border-top-color:var(--acc);
  border-radius:50%;animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

.site-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .75rem;
  padding: 1.5rem;
  color: var(--muted);
  font-size: .75rem;
}
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--fg); }

.bhist-grid { display: flex; flex-direction: column; gap: .5rem; }
.bhist-row { container-type: inline-size; }


.bhist-head {
  grid-template-columns: 5.5rem 20px minmax(0, 1fr) 5rem 5rem 20px;
  grid-template-areas: "date icon name count value caret";
  column-gap: 1rem;
}
.bhist-head .bhist-meta-row { display: contents; }
.bhist-head .bhist-date { grid-area: date; font-family: var(--mono); font-size: .8125rem; color: var(--muted); white-space: nowrap; }
.bhist-head img { grid-area: icon; }
.bhist-head .pname { grid-area: name; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bhist-head .bhist-count { grid-area: count; white-space: nowrap; font-family: var(--mono); font-size: .8125rem; color: var(--muted); text-align: right; }
.bhist-head .bhist-value { grid-area: value; white-space: nowrap; font-family: var(--mono); font-weight: 700; font-size: .8125rem; text-align: right; }
.bhist-head .caret { grid-area: caret; }

@container (max-width: 560px) {
  .bhist-head {
    grid-template-columns: 20px minmax(0, 1fr) 20px;
    grid-template-areas:
      "icon name caret"
      "meta meta caret";
    row-gap: .375rem;
    align-items: center;
  }
  .bhist-head .pname { white-space: normal; overflow: visible; text-overflow: clip; font-size: .9375rem; }
  .bhist-head .bhist-meta-row {
    grid-area: meta;
    display: flex;
    align-items: baseline;
    gap: .75rem;
  }
  .bhist-head .bhist-date,
  .bhist-head .bhist-count { text-align: left; }
  .bhist-head .bhist-value { margin-left: auto; text-align: right; }
}


.bhist-detail { padding: .5rem; }
.bhist-detail .carousel-track { flex-wrap: nowrap; }
.bhist-detail .carousel-track .carousel-item { flex: 0 0 150px; }

.bhist-pullrate { display: block; text-align: center; }

.pgroup {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.25rem; margin-bottom: 1.25rem;
}
.pgroup-head { margin-bottom: .5rem; }

.pstat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; margin-top: 1rem; }
.pstat-box { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: .875rem; }
.pstat-box-head { color: var(--muted); font-size: .75rem; margin-bottom: .5rem; }
.pstat-row { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; padding: .25rem 0; font-size: .8125rem; }
.pstat-val { font-family: var(--mono); white-space: nowrap; }
.pstat-note { font-size: .75rem; white-space: nowrap; }
.pstat-tile-val { font-family: var(--mono-lg); font-weight: 800; font-size: 1.5rem; }

.pstat-bestpull { display: flex; gap: .75rem; align-items: center; text-decoration: none; color: var(--fg); }
.pstat-bestpull img { width: 48px; height: 67px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }

.pstat-row-wrap { padding: .25rem 0; }
.pstat-row-wrap .pstat-row { padding: 0; }
.pstat-note-line { font-size: .75rem; text-align: right; margin-top: .125rem; }
.pstat-note-line.good { color: var(--ok); }
.pstat-note-line.mid { color: var(--warn); }
.pstat-note-line.bad { color: var(--err); }
.pstat-note-line.muted { color: var(--muted); }

.grid.packstats th, .grid.packstats td { font-size: .8125rem; }
.pstat-toggle-row { cursor: pointer; }
.pstat-toggle-row:hover td { background: color-mix(in srgb, var(--fg) 4%, transparent); }
.pstat-detail-row td { background: var(--bg); padding: 1rem .625rem; }
.pstat-note-inline { font-size: .6875rem; white-space: nowrap; }
.pstat-note-inline.good { color: var(--ok); }
.pstat-note-inline.mid { color: var(--warn); }
.pstat-note-inline.bad { color: var(--err); }

.packstats-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.packstats-wrap table.grid.packstats { min-width: 640px; }

@media (max-width: 900px) {
  table.grid.packstats tbody tr td:nth-child(4),
  table.grid.packstats thead th:nth-child(4),
  table.grid.packstats tbody tr td:nth-child(5),
  table.grid.packstats thead th:nth-child(5) {
    display: none;
  }
}

.pstat-totals-row td { border-top: 2px solid var(--line); background: var(--panel); font-weight: 600; }

.timeline-dot.milestone {
  background: linear-gradient(135deg, var(--warn), #e0682f);
  display: flex; align-items: center; justify-content: center;
  width: 1.375rem; height: 1.375rem; left: -1.9375rem;
  color: #fff; font-size: .8125rem;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 25%, transparent);
  border: 2px solid var(--bg);
}

.milestone-item { margin-bottom: 2rem; }
.milestone-badge {
  display: inline-flex; align-items: center; gap: .625rem;
  margin-top: .5rem;
  background: var(--panel);
  border: 1px solid color-mix(in srgb, var(--warn) 40%, var(--line));
  border-radius: 999px;
  padding: .5rem 1rem; font-weight: 600; color: var(--fg);
}
.milestone-badge:hover { border-color: var(--warn); }
.milestone-badge-text { display: flex; flex-direction: column; line-height: 1.25; }
.milestone-badge-sub { font-weight: 400; font-size: .75rem; color: var(--muted); }
.milestone-set-icon {
  width: 1.25rem; height: 1.25rem; margin-right: 0; flex-shrink: 0;
}
.milestone-set-icon:not(.common):not(.uncommon):not(.rare):not(.mythic):not(.special) {
  color: var(--warn);
}

.profile-head { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 1.5rem; }
.profile-avatar {
  width: 140px; aspect-ratio: 140 / 100; max-width: 100%; overflow: hidden; flex-shrink: 0;
  border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line);
}
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }

#profileAvatar {
  position: relative; width: 100%; aspect-ratio: 140 / 100; overflow: hidden;
  padding: 0; display: block; margin-bottom: 1.25rem;
}
#profileAvatar.clk { cursor: pointer; }
#profileAvatar.clk:hover { border-color: var(--acc); }
#profileAvatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
#profileAvatar::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 60%;
  background: linear-gradient(to top, rgba(0,0,0,.75), transparent); pointer-events: none;
}

#profileTitle {
  position: absolute; left: 0; right: 0; bottom: .5rem; z-index: 1;
  font-size: 1.625rem; margin: 0; text-align: center; color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,.5);
}

.profile-stats-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: .75rem; margin-bottom: 1.25rem; text-align: center;
}
.profile-stats-row .k { color: var(--muted); font-size: .8125rem; }
.profile-stats-row .v { font-weight: 600; font-size: 1.125rem; }

.profile-side-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-bottom: 1rem; }
.profile-side-row .profile-side-tile { margin-bottom: 0; }

.profile-side-tile {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: .875rem 1rem; margin-bottom: 1rem; text-align: center;
}
.profile-side-tile-title { color: var(--muted); font-weight: 400; font-size: .8125rem; line-height: 1.3; margin-bottom: .625rem; }
.profile-side-tile-logo { height: 4rem; margin-bottom: .375rem; display: flex; align-items: center; justify-content: center; }
.profile-side-tile-logo img { height: 100%; max-width: 100%; object-fit: contain; }
.profile-side-tile-sub-title { color: var(--muted); font-weight: 400; font-size: .875rem; line-height: 1.3; margin-bottom: .375rem; }
.profile-side-tile-sub { color: var(--fg); font-weight: 600; font-size: 1rem; }

.profile-best-card { display: flex; flex-direction: column; align-items: center; color: var(--fg); margin-top: .5rem; text-align: center; }
.profile-best-card-img { width: 110px; aspect-ratio: 63/88; object-fit: cover; border-radius: 6px; background: var(--bg); }
.profile-best-card-sub { font-size: .75rem; margin-top: .5rem; }
.profile-best-card-price { font-family: var(--mono); font-weight: 600; font-size: .9375rem; margin-top: .25rem; }

.profile-main-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.profile-main-head h2 { margin: 0; }

.profile-collection-btn { display: block; text-align: center; margin-bottom: 1rem; }

#favCardModal, #privacyModal, #priceSettingsModal, #deckModal, #importModal, #viewModal {
  background: var(--panel); color: var(--fg); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.25rem; width: 100%; max-width: 420px;
}
#favCardModal::backdrop, #privacyModal::backdrop, #priceSettingsModal::backdrop, #deckModal::backdrop, #importModal::backdrop, #viewModal::backdrop { background: rgba(0,0,0,.6); }
#importModal { max-width: 560px; }
.fav-card-modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .75rem; }
.fav-card-modal-head h2 { margin: 0; font-size: 1.125rem; }
#favCardSearch { width: 100%; margin-bottom: .5rem; }
#favCardResults { display: flex; flex-direction: column; gap: .25rem; max-height: 320px; overflow-y: auto; }
.fav-card-result { display: flex; align-items: center; gap: .5rem; padding: .375rem; cursor: pointer; border-radius: var(--radius); }
.fav-card-result:hover { background: var(--bg); }
.fav-card-result img { width: 32px; height: 45px; object-fit: cover; border-radius: 3px; }

.profile-side-tile .k { color: var(--muted); font-size: .8125rem; }
.profile-side-tile-left { text-align: left; }
.profile-side-tile-left .profile-side-tile-title { margin-bottom: .5rem; }
.profile-side-tile-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
.profile-side-tile-head .profile-side-tile-title { margin-bottom: 0; }
.profile-gear-btn {
  background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 1rem;
  padding: .125rem .25rem; line-height: 1; border-radius: 4px;
}
.profile-gear-btn:hover { color: var(--fg); background: var(--bg); }
.profile-friend-row { display: flex; align-items: center; gap: .5rem; padding: .375rem 0; color: var(--fg); }
.profile-friend-row:hover { color: var(--acc); }
.profile-friend-avatar {
  width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--bg); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 700; flex-shrink: 0;
}
#privacyModal { text-align: left; }
.profile-privacy-row { display: flex; flex-direction: row; align-items: center; gap: .5rem; font-size: .8125rem; padding: .375rem 0; cursor: pointer; text-align: left; }

#globalSearchModal {
  background: var(--panel); color: var(--fg); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 0; width: 100%; max-width: 560px; margin-top: 10vh;
}
#globalSearchModal::backdrop { background: rgba(0,0,0,.6); }
.gsearch-head { display: flex; align-items: center; gap: .625rem; padding: .875rem 1rem; border-bottom: 1px solid var(--line); }
.gsearch-head input { flex: 1; border: 0; background: none; color: var(--fg); font: inherit; font-size: 1rem; padding: .25rem 0; }
.gsearch-head input:focus { outline: none; }
.gsearch-results { max-height: 60vh; overflow-y: auto; padding: .5rem 0; }
.gsearch-group-label { padding: .5rem 1rem .25rem; font-size: .6875rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.gsearch-item { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; padding: .5rem 1rem; color: var(--fg); }
.gsearch-item:hover, .gsearch-item.sel { background: var(--bg); }
.gsearch-item-name { font-size: .875rem; }
.gsearch-item-sub { font-size: .75rem; white-space: nowrap; }
.gsearch-empty { padding: 1rem; text-align: center; }
.gsearch-all-link {
  display: block; text-align: center; padding: .75rem 1rem;
  border-top: 1px solid var(--line); color: var(--acc2); font-size: .8125rem;
}
.gsearch-all-link:hover { color: var(--fg); background: var(--bg); }

.carousel-track .news-card.carousel-item {
  flex: 0 0 420px; min-height: 280px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--panel) 92%, var(--acc) 4%), var(--panel));
  border: 1px solid var(--line); border-radius: 16px;
  overflow: hidden; display: flex; flex-direction: column;
}
.news-card-body { display: flex; flex-direction: column; gap: .75rem; padding: 1.5rem; flex: 1; }
.news-card-title {
  font-family: var(--mono-lg); font-weight: 800; font-size: 1.5rem;
  letter-spacing: .01em; line-height: 1.2;
}
.news-card-text { font-size: .875rem; line-height: 1.5; }
.carousel-track .news-card.carousel-item { transition: border-color .15s, transform .15s, box-shadow .15s; }
a.news-card { color: inherit; cursor: pointer; }
.carousel-track a.news-card.carousel-item:hover {
  border-color: var(--acc);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
.news-card-img-wrap {
  width: 100%; aspect-ratio: 400 / 225; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg); flex-shrink: 0;
}
.news-card-img-contain { max-width: 100%; max-height: 100%; object-fit: contain; }
.news-card-img-cover { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 700px) {
  .carousel-track .news-card.carousel-item { flex: 0 0 300px; min-height: auto; }
}

.split-timeline { position: relative; margin-top: 1rem; }
.split-timeline::before {
  content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px;
  background: var(--line); transform: translateX(-1px);
}
.split-timeline-item {
  position: relative; width: 50%; margin-bottom: 1.25rem; display: flex; align-items: flex-start;
}
.split-timeline-item.self {
  left: 0; padding-right: 1.75rem; justify-content: flex-end; text-align: right;
}
.split-timeline-item.other {
  left: 50%; padding-left: 1.75rem; justify-content: flex-start; text-align: left;
}
.split-timeline-dot {
  position: absolute; top: .2rem; width: .875rem; height: .875rem; border-radius: 50%;
  background: var(--muted); border: 2px solid var(--bg); flex-shrink: 0;
}
.split-timeline-dot.good { background: var(--ok); }
.split-timeline-dot.milestone {
  background: linear-gradient(135deg, var(--warn), #e0682f);
  display: flex; align-items: center; justify-content: center;
  width: 1.125rem; height: 1.125rem; top: 0;
  color: #fff; font-size: .6875rem;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 25%, transparent);
  border: 2px solid var(--bg);
}
.split-timeline-item.self .split-timeline-dot.milestone { right: -.5625rem; }
.split-timeline-item.other .split-timeline-dot.milestone { left: -.5625rem; }
.split-timeline-item.self .split-timeline-dot { right: -.5rem; }
.split-timeline-item.other .split-timeline-dot { left: -.5rem; }
.split-timeline-date { font-size: .75rem; margin-bottom: .125rem; }
.split-timeline-label { font-weight: 600; font-size: .875rem; }

@media (max-width: 600px) {
  .split-timeline::before { left: 1rem; }
  .split-timeline-item, .split-timeline-item.self, .split-timeline-item.other {
    width: 100%; left: 0; padding-left: 2rem; padding-right: 0;
    justify-content: flex-start; text-align: left;
  }
  .split-timeline-item.self .split-timeline-dot,
  .split-timeline-item.other .split-timeline-dot { left: .5625rem; right: auto; }
  .split-timeline-item.self .split-timeline-dot.milestone,
  .split-timeline-item.other .split-timeline-dot.milestone { left: .4375rem; right: auto; }
}

input[type=checkbox] {
  appearance: none;
  box-sizing: border-box;
  width: 1.125rem; aspect-ratio: 1 / 1;
  padding: 0; margin: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  cursor: pointer;
  vertical-align: middle;
  position: relative;
  flex-shrink: 0;
  transition: border-color .15s, background .15s;
}
input[type=checkbox]:hover { border-color: var(--acc2); }
input[type=checkbox]:checked {
  background: var(--acc);
  border-color: var(--acc);
}
input[type=checkbox]:checked::after {
  content: '';
  position: absolute;
  left: 5px; top: 1px;
  width: 4px; height: 8px;
  border: solid var(--bg);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
input[type=checkbox]:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 1px;
}

.page-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.page-head h1 { margin: 0; }
.deck-form { display: flex; flex-direction: column; gap: .75rem; }
.deck-form input, .deck-form select, .deck-form textarea { width: 100%; }
.deck-form-actions { display: flex; justify-content: space-between; gap: .5rem; }

.deck-cols { columns: 2 340px; column-gap: 2rem; }
.deck-cols .prod-group { break-inside: avoid; }
.deck-rows td.deck-qty { width: 2rem; }
.deck-mana { text-align: right; white-space: nowrap; }
.deck-mana .ms { width: 15px; height: 15px; margin-left: 1px; }
.deck-dot { width: 1.5rem; text-align: center; }
.curve { display: grid; grid-template-columns: repeat(8, 1fr); gap: .375rem; height: 10rem; }
.curve-col { display: flex; flex-direction: column; align-items: center; gap: .25rem; min-height: 0; }
.curve-bar { flex: 1; width: 100%; min-height: 0; display: flex; align-items: flex-end; }
.curve-bar i { display: block; width: 100%; min-height: 2px; background: var(--acc); border-radius: 3px 3px 0 0; }
.curve-n { font-family: var(--mono); font-size: .75rem; min-height: 1.125rem; }
.curve-col .k { color: var(--muted); font-size: .75rem; }
#hoverCard { position: fixed; z-index: 60; width: 240px; pointer-events: none; }
#hoverCard img { width: 100%; aspect-ratio: 63 / 88; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.5); display: block; background: var(--panel); }
@media (max-width: 900px) {
  .deck-page .browse-sidebar { order: -1; }
}

body.builder-page .wrap { max-width: none; padding: 1rem 1.25rem; }
body.builder-page .site-footer { display: none; }
.builder { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 1rem; height: calc(100dvh - 65px - 2rem); min-height: 480px; }
.pool, .deck-panel { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.pool-filters { display: flex; flex-direction: column; gap: .5rem; margin-bottom: .75rem; }
.pool .search-wrap { min-width: 180px; }
.mv-chips { display: flex; gap: .25rem; }
.mv-chips button { min-width: 1.75rem; height: 1.75rem; padding: 0 .375rem; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font: inherit; font-size: .75rem; cursor: pointer; }
.mv-chips button.on { color: var(--fg); border-color: var(--acc); background: color-mix(in srgb, var(--acc) 15%, var(--panel)); }
.pool-grid { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; align-content: start; padding: .25rem; }
#poolSentinel { grid-column: 1 / -1; height: 1px; }
.pool-card { position: relative; cursor: pointer; user-select: none; -webkit-user-select: none; border-radius: 8px; }
.pool-card img, .pool-noimg { width: 100%; aspect-ratio: 63 / 88; border-radius: 8px; display: block; background: var(--panel); object-fit: cover; }
.pool-noimg { display: flex; align-items: center; justify-content: center; padding: .5rem; text-align: center; font-size: .8125rem; border: 1px solid var(--line); }
.pool-card:hover img { box-shadow: 0 0 0 2px var(--acc); }
.pool-card.illegal img { opacity: .35; }
.pool-badge { position: absolute; top: .375rem; left: .375rem; background: var(--acc); color: var(--bg); font-weight: 700; font-size: .75rem; padding: .125rem .5rem; border-radius: 999px; }
.pool-free { position: absolute; bottom: .375rem; right: .375rem; font-size: .6875rem; padding: .0625rem .375rem; border-radius: 999px; background: rgba(0,0,0,.7); color: var(--fg); }
.pool-free.bad { color: var(--err); }
.deck-panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.dp-head { padding: .75rem 1rem; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: .25rem; }
.dp-title { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; font-family: var(--mono-lg); font-weight: 800; font-size: 1.25rem; }
.dp-title a { color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.dp-title .muted { font-family: var(--font); font-weight: 400; font-size: .75rem; }
.dp-meta { display: flex; justify-content: space-between; gap: .5rem; font-size: .75rem; min-height: 1.125rem; }
.deck-panel .tabs { margin: 0; padding: 0 .5rem; }
.dp-list { flex: 1; min-height: 0; overflow-y: auto; padding: .25rem 0; }
.dl-row { position: relative; display: grid; grid-template-columns: 1.75rem minmax(0, 1fr) auto 1rem; gap: .375rem; align-items: center; padding: .25rem .75rem; cursor: pointer; }
.dl-row:hover { background: var(--bg); }
.dl-q { font-family: var(--mono); color: var(--muted); text-align: right; }
.dl-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-m { white-space: nowrap; }
.dl-m .ms { width: 14px; height: 14px; margin-left: 1px; }
.dl-dot { text-align: center; }
.dl-act { display: none; position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); background: var(--bg); border-radius: 6px; padding: 0 .125rem; }
.dl-row:hover .dl-act { display: flex; }
.dl-act button, .bl button { background: none; border: 0; color: var(--fg); cursor: pointer; font: inherit; width: 1.5rem; height: 1.5rem; border-radius: 4px; }
.dl-act button:hover, .bl button:hover { background: var(--line); }
@media (hover: none) {
  .dl-row { grid-template-columns: 1.75rem minmax(0, 1fr) auto 1rem auto; }
  .dl-act { display: flex; position: static; transform: none; background: none; }
}
.dp-foot { border-top: 1px solid var(--line); padding: .75rem 1rem; display: flex; flex-direction: column; gap: .75rem; }
.dp-basics { display: grid; grid-template-columns: repeat(5, 1fr); gap: .25rem; }
.bl { display: flex; flex-direction: column; align-items: center; gap: .125rem; }
.bl-ctl { display: flex; align-items: center; }
.bl .ms { width: 20px; height: 20px; }
.bl .num { min-width: 1.125rem; text-align: center; font-size: .8125rem; }
.bl-ctl button { width: 1.375rem; height: 1.375rem; }
.curve.mini { height: 4.5rem; gap: .25rem; }
.curve.mini .curve-n { font-size: .625rem; min-height: .875rem; }
.builder-tabs { display: none; }
@media (max-width: 900px) {
  .builder { grid-template-columns: minmax(0, 1fr); height: calc(100dvh - 65px - 5.5rem); }
  .builder-tabs { display: flex; margin: 0 0 .5rem; }
  .builder[data-pane="pool"] .deck-panel, .builder[data-pane="deck"] .pool { display: none; }
}

.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.seg button { height: 1.75rem; padding: 0 .75rem; background: var(--panel); border: 0; color: var(--muted); font: inherit; font-size: .75rem; cursor: pointer; }
.seg button:hover { color: var(--fg); }
.seg button.on { background: color-mix(in srgb, var(--acc) 22%, var(--panel)); color: var(--fg); font-weight: 600; }
.vo-btn { display: none; background: none; border: 0; color: var(--muted); cursor: pointer; padding: .25rem .375rem; border-radius: 4px; font-size: 1rem; line-height: 1; }
.vo-btn:hover { color: var(--fg); }
.builder.h .vo-btn { display: block; }
.view-toggle { display: flex; gap: .125rem; flex-shrink: 0; }
.vt-btn { background: none; border: 0; color: var(--muted); cursor: pointer; padding: .25rem .375rem; border-radius: 4px; line-height: 0; }
.vt-btn:hover { color: var(--fg); }
.vt-btn.on { color: var(--acc); background: var(--bg); }
.dp-stacks { display: none; --w: clamp(130px, 13vw, 190px); }
.st-col { flex: 0 0 auto; --strip: calc(var(--w) * .2); width: var(--w); }
.st-head { display: flex; justify-content: space-between; font-family: var(--mono); font-size: .75rem; padding: 0 .125rem; margin-bottom: .75rem; }
.st-card { position: relative; width: var(--w); margin: calc(var(--strip) - var(--w) * 88 / 63) 0 0; cursor: pointer; user-select: none; -webkit-user-select: none; }
.st-q { position: absolute; z-index: 1; top: -5px; left: -6px; min-width: 1.375rem; height: 1.375rem; padding: 0 .375rem; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--acc) 80%, transparent); color: var(--bg); font-weight: 700; font-size: .75rem; border-radius: 999px; box-shadow: 0 0 0 2px color-mix(in srgb, var(--panel) 70%, transparent); pointer-events: none; }
.st-card:first-child { margin-top: 0; }
.st-card img, .st-noimg { width: 100%; aspect-ratio: 63 / 88; border-radius: 6px; display: block; background: var(--panel); object-fit: cover; box-shadow: 0 -1px 0 rgba(0,0,0,.5); }
.st-noimg { border: 1px solid var(--line); font-size: .6875rem; padding: .25rem; }
.st-card:hover img { box-shadow: 0 0 0 2px var(--acc); }
.st-card.illegal img { outline: 2px solid var(--err); outline-offset: -2px; }
.st-dot { position: absolute; top: 2px; right: 3px; font-size: .625rem; line-height: 1; background: rgba(0,0,0,.55); border-radius: 999px; padding: 1px 3px; }
@media (max-width: 900px) {
  .view-toggle { display: none; }
}
@media (min-width: 901px) {
  .builder.h { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(340px, 50%); }
  .builder.h .pool-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .5rem; }
  .builder.h .deck-panel { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "head tabs foot" "stacks stacks stacks"; align-items: center; }
  .builder.h .dp-head { grid-area: head; border-bottom: 0; }
  .builder.h .deck-panel .tabs { grid-area: tabs; border-bottom: 0; }
  .builder.h .dp-foot { grid-area: foot; flex-direction: row; align-items: center; border-top: 0; padding: .375rem 1rem; }
  .builder.h .dp-basics { width: 340px; }
  .builder.h .curve.mini { display: none; }
  .builder.h .dp-list { display: none; }
  .builder.h .dp-stacks { grid-area: stacks; align-self: stretch; display: flex; align-items: flex-start; gap: .5rem; overflow: auto; padding: .5rem .75rem; border-top: 1px solid var(--line); }
}
@media (min-width: 901px) {
  .builder.h.exp { grid-template-rows: minmax(0, 1fr); }
  .builder.h.exp .pool { display: none; }
}