:root {
  --bg: #0f1115;
  --panel: #171a20;
  --panel2: #20242c;
  --fg: #e9ecf1;
  --muted: #8b93a1;
  --line: #2a2f39;
  --accent: #3b82f6;
  --accent-fg: #ffffff;
  --good: #3ecf8e;
  --bad: #f0616d;
  --foil: #7c3aed;
  --gold: #f5c542;
  --gold-fg: #3a2a00;
  --green: #2e9e57;
  --shade: rgba(0, 0, 0, 0.55);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --nav-h: 58px;
  --sold: #8a8a8a;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f3f4f7;
    --panel: #ffffff;
    --panel2: #e9ebf0;
    --fg: #15181e;
    --muted: #5d6675;
    --line: #dde0e7;
    --accent: #2563eb;
    --good: #15925a;
    --bad: #cf3347;
    --shade: rgba(20, 24, 32, 0.45);
  }
}
:root[data-theme="light"] {
    --bg: #f3f4f7;
    --panel: #ffffff;
    --panel2: #e9ebf0;
    --fg: #15181e;
    --muted: #5d6675;
    --line: #dde0e7;
    --accent: #2563eb;
    --good: #15925a;
    --bad: #cf3347;
    --shade: rgba(20, 24, 32, 0.45);
  }

* { box-sizing: border-box; }
[hidden] { display: none !important; } /* author display rules (e.g. .btn) must not defeat the hidden attribute */
/* No overflow:hidden here: Chrome's pull-to-refresh only works when the page itself can be pulled, and it's the
   only way to reload an installed app. The page can't scroll anyway, because everything in it is pinned (#app is
   position:fixed), so there's nothing that could push the tab bar off-screen. */
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg);
  color: var(--fg);
  font: 15px/1.4 var(--font);
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
}
a { color: var(--accent); }
h1 { font-size: 22px; margin: 4px 0 14px; }
h2 { font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.good { color: var(--good); }
.bad { color: var(--bad); }

/* The app is pinned to the real visible window instead of being sized with 100dvh. In an installed
   Android app, dvh came out one nav-bar too tall after a reload, which pushed the tab bar below the
   screen and let the whole page scroll. A fixed box can't be taller than the window it's fixed to. */
#app { position: fixed; inset: 0; display: flex; flex-direction: column; }
main { flex: 1; min-height: 0; position: relative; }
.view { position: absolute; inset: 0; display: none; flex-direction: column; }
.view.active { display: flex; }
.page { flex: 1; overflow-y: auto; padding: calc(14px + var(--safe-t)) 16px 24px; -webkit-overflow-scrolling: touch; }
.page.flush { padding-top: 6px; }

/* ---- bottom tabs ---- */
#tabs {
  display: flex;
  background: var(--panel);
  border-top: 1px solid var(--line);
  padding-bottom: var(--safe-b);
}
.tab {
  flex: 1; height: var(--nav-h); border: 0; background: none; color: var(--muted);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font: 600 11px var(--font); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.tab svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tab.active { color: var(--accent); }

/* ---- binder toolbar ---- */
.bar { padding: calc(10px + var(--safe-t)) 12px 6px; background: var(--bg); }
#search {
  width: 100%; height: 44px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--panel); color: var(--fg); padding: 0 14px; font: 16px var(--font);
}
#search:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.bar-row { display: flex; gap: 8px; margin-top: 8px; }
#sort {
  flex: 1; min-width: 0; height: 44px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--panel); color: var(--fg); padding: 0 10px; font: 14px var(--font);
}
.chip {
  height: 44px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--panel); color: var(--fg); font: 600 14px var(--font); cursor: pointer;
}
.chip.on { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
#binder-count { margin: 8px 2px 0; min-height: 17px; }

#scroller { flex: 1; overflow-y: auto; position: relative; -webkit-overflow-scrolling: touch; }
#grid { position: relative; }

/* ---- card tiles ---- */
.tile {
  position: absolute; left: 0; top: 0; padding: 0; border: 0; background: none;
  color: inherit; text-align: left; font: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent; contain: layout;
}
/* Scryfall's image rules: nothing is drawn over a card image, and it's never cropped or stretched.
   The art box is exactly the card's proportions; badges live in .strip underneath it. */
.tile .art {
  position: relative; display: block; width: 100%; height: var(--ih);
  border-radius: calc(var(--tw) * 0.045); overflow: hidden; background: var(--panel2);
}
.tile img { display: block; width: 100%; height: 100%; object-fit: contain; }
.tile img.broken { visibility: hidden; }
.tile .fallback {
  position: absolute; inset: 0; display: none; align-items: center; justify-content: center;
  padding: 8px; text-align: center; font-size: 12px; color: var(--muted);
}
.tile.noimg .fallback, .tile img.broken + .fallback { display: flex; }
.tile.foil .art { box-shadow: 0 0 0 2px #a78bfa; } /* outside the image, not over it */
/* Badges that don't fit wrap out of sight (whole, never half-cut); the least important comes last. */
.strip { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 4px; height: 20px; margin-top: 6px; overflow: hidden; }
.pill {
  flex: none; font: 700 11px/1 var(--font); padding: 4px 6px; border-radius: 6px;
  color: #fff; background: #1d1d1d; letter-spacing: 0.01em; white-space: nowrap;
}
.pill.price.mid { background: var(--green); }
.pill.price.high { background: var(--gold); color: var(--gold-fg); }
.pill.qty { background: var(--accent); color: var(--accent-fg); }
.pill.foilbadge { background: var(--foil); }
.cap { display: block; padding: 4px 2px 0; }
.cap b { display: block; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cap small { display: block; font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.empty { padding: 56px 28px; text-align: center; color: var(--muted); }
.empty .btn { margin-top: 16px; }

/* ---- generic components ---- */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px; margin-bottom: 14px; }
.card p { margin: 0 0 12px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px;
  border-radius: 12px; border: 1px solid var(--line); background: var(--panel2); color: var(--fg);
  font: 600 15px var(--font); cursor: pointer; text-decoration: none;
}
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.btn.danger { color: var(--bad); }
.btn[disabled] { opacity: 0.5; pointer-events: none; }
progress { width: 100%; height: 8px; margin: 0 0 12px; accent-color: var(--accent); }
.legal { margin-top: 20px; line-height: 1.5; }

/* ---- value tab ---- */
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.stat.wide { grid-column: 1 / -1; }
.stat .k { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.stat .v { font-size: 24px; font-weight: 700; margin-top: 2px; font-variant-numeric: tabular-nums; }
.stat.wide .v { font-size: 32px; }
.chart { width: 100%; height: auto; display: block; }
.chart .line { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.chart .area { fill: var(--accent); opacity: 0.14; }
.chart .dot { fill: var(--accent); }
.chart text { fill: var(--muted); font: 11px var(--font); }
.list { list-style: none; margin: 0; padding: 0; }
.list li {
  display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); cursor: pointer;
}
.list li:first-child { border-top: 0; }
.list img { width: 40px; height: 56px; border-radius: 4px; object-fit: cover; background: var(--panel2); flex: none; }
.list .grow { flex: 1; min-width: 0; }
.list .grow b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.list .amt { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }

/* ---- bottom sheet ---- */
#backdrop { position: fixed; inset: 0; background: var(--shade); opacity: 0; pointer-events: none; transition: opacity 0.2s; z-index: 20; }
#backdrop.show { opacity: 1; pointer-events: auto; }
#sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 21; max-height: 92%; overflow-y: auto;
  background: var(--panel); border-radius: 20px 20px 0 0; padding: 10px 18px calc(22px + var(--safe-b));
  transform: translateY(105%); transition: transform 0.25s ease; max-width: 640px; margin: 0 auto;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
#sheet.show { transform: none; }
.grabber { width: 40px; height: 4px; border-radius: 2px; background: var(--line); margin: 0 auto 12px; }
.detail-img { display: block; width: min(64vw, 300px); aspect-ratio: 488 / 680; border-radius: 4.5%; margin: 4px auto 14px; background: var(--panel2); object-fit: contain; }
.detail h3 { font-size: 20px; margin: 0; }
.detail .sub { color: var(--muted); margin: 2px 0 14px; }
.facts { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; margin: 0 0 16px; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.field { margin-bottom: 18px; }
.field > label, .field > .lbl { display: block; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.seg { display: flex; gap: 6px; flex-wrap: wrap; }
.seg button {
  min-height: 40px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--panel2); color: var(--fg); font: 600 14px var(--font); cursor: pointer;
}
.seg button.on { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.field input[type=number] {
  width: 120px; height: 44px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--panel2); color: var(--fg); padding: 0 12px; font: 16px var(--font);
}

#toast {
  position: fixed; left: 50%; bottom: calc(var(--nav-h) + var(--safe-b) + 16px); transform: translate(-50%, 20px);
  background: var(--fg); color: var(--bg); padding: 10px 16px; border-radius: 12px; font-weight: 600;
  opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; z-index: 30; max-width: 90vw; text-align: center;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ================= Sell / Watchlist / Bulk, Decks, settings ================= */
.tab { position: relative; }
.badge {
  position: absolute; top: 5px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: var(--good); color: #06210f; font: 700 11px/18px var(--font); text-align: center;
}
.segbar { display: flex; gap: 4px; padding: 4px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
.segbar button {
  flex: 1; height: 42px; border: 0; border-radius: 9px; background: none; color: var(--muted);
  font: 600 14px var(--font); cursor: pointer;
}
.segbar button.on { background: var(--accent); color: var(--accent-fg); }
#sell-summary { margin: 8px 2px 0; min-height: 17px; line-height: 1.35; }

.card-list { list-style: none; margin: 0; padding: 0; }
.card-list > li {
  display: flex; align-items: center; gap: 10px; padding: 10px 4px; border-top: 1px solid var(--line); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.card-list > li:first-child { border-top: 0; }
.card-list img { width: 44px; height: auto; aspect-ratio: 488 / 680; border-radius: 4px; object-fit: contain; background: var(--panel2); flex: none; }
.card-list .noart { width: 44px; aspect-ratio: 488 / 680; border-radius: 4px; background: var(--panel2); flex: none; }
.card-list .grow { flex: 1; min-width: 0; }
.card-list .grow b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-list .grow > span { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-list .amt { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; flex: none; line-height: 1.3; }
.card-list .amt small { display: block; font-weight: 500; color: var(--muted); font-size: 11px; }
.card-list li.picked { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.check {
  flex: none; width: 26px; height: 26px; border-radius: 8px; border: 2px solid var(--line); background: var(--panel2);
  display: grid; place-items: center; color: transparent; cursor: pointer;
}
.check svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
li.picked .check { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.tag { display: inline-block; font: 700 10px/1 var(--font); padding: 3px 6px; border-radius: 5px; letter-spacing: 0.04em; vertical-align: 1px; margin-right: 4px; }
.tag.sell { background: #1f6f43; color: #d6f5e2; }
.tag.trade { background: #7a6516; color: #fdf0bf; }
.tag.both { background: #2a5f9e; color: #dcebff; }
.tag.up { background: #1f6f43; color: #d6f5e2; }
.tag.down { background: #8a2f3b; color: #ffdde2; }
.tag.flat, .tag.new { background: var(--panel2); color: var(--muted); }
.subhead { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin: 18px 4px 6px; }
.note { margin: 0 4px 12px; font-size: 13px; color: var(--muted); line-height: 1.45; }
.page .card.tight { padding: 4px 14px; }

#picks-bar {
  flex: none; display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--panel);
  border-top: 1px solid var(--line);
}
#picks-bar .sum { flex: 1; min-width: 0; font-size: 13px; line-height: 1.3; }
#picks-bar .sum b { display: block; font-size: 15px; }
#picks-bar .btn { min-height: 44px; padding: 0 12px; font-size: 14px; }

/* sold cards in the binder */
/* A card marked sold is shown by a badge and a struck-through caption; its art is left untouched. */
.pill.soldbadge { background: var(--sold); }
.tile.sold .cap b, .tile.sold .cap small { text-decoration: line-through; opacity: 0.6; }

/* card sheet extras */
.spark { width: 100%; height: 56px; display: block; margin: 0 0 14px; }
.spark .line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.spark .area { fill: var(--accent); opacity: 0.12; }
.stepper { display: inline-flex; align-items: center; gap: 4px; }
.stepper button { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel2); color: var(--fg); font: 700 20px var(--font); cursor: pointer; }
.stepper output { min-width: 78px; text-align: center; font-weight: 600; }
.ck { background: var(--panel2); border-radius: 12px; padding: 10px 12px; margin: 0 0 14px; }
.ck .k { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.ck .line { display: flex; justify-content: space-between; gap: 12px; font-variant-numeric: tabular-nums; }

/* settings */
.setting { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); }
.setting:first-of-type { border-top: 0; }
.setting .txt { flex: 1; min-width: 0; }
.setting .txt b { display: block; font-weight: 600; }
.setting .txt span { display: block; font-size: 12px; color: var(--muted); line-height: 1.35; margin-top: 1px; }
.setting input[type=number] {
  width: 96px; height: 42px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel2);
  color: var(--fg); padding: 0 10px; font: 16px var(--font); text-align: right; flex: none;
}
.switch { position: relative; flex: none; width: 52px; height: 32px; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.switch i { position: absolute; inset: 0; border-radius: 16px; background: var(--panel2); border: 1px solid var(--line); transition: background 0.15s; }
.switch i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--muted); transition: transform 0.15s, background 0.15s; }
.switch input:checked + i { background: var(--accent); border-color: var(--accent); }
.switch input:checked + i::after { transform: translateX(20px); background: #fff; }
.switch input:focus-visible + i { outline: 2px solid var(--accent); outline-offset: 2px; }
.progress-label { font-size: 13px; color: var(--muted); margin: 0 0 8px; }

/* ================= Wishlist, alerts, printings ================= */
.badge.alert { background: var(--accent); color: var(--accent-fg); }
.searchrow { margin: 0 0 8px; }
.searchrow input {
  width: 100%; height: 44px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--panel); color: var(--fg); padding: 0 14px; font: 16px var(--font);
}
.searchrow input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.suggest { list-style: none; margin: 0 0 10px; padding: 4px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
.suggest button {
  display: block; width: 100%; text-align: left; min-height: 44px; padding: 0 12px; border: 0; border-radius: 8px;
  background: none; color: var(--fg); font: 500 15px var(--font); cursor: pointer;
}
.suggest button:active, .suggest button:hover { background: var(--panel2); }
.mini {
  min-height: 34px; padding: 0 12px; border-radius: 9px; border: 1px solid var(--line); background: var(--panel2);
  color: var(--fg); font: 600 13px var(--font); cursor: pointer;
}
.mini[disabled] { opacity: 0.55; cursor: default; }
.acts { display: flex !important; gap: 6px; flex-wrap: wrap; margin-top: 6px; white-space: normal !important; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); margin-right: 6px; vertical-align: 1px; }
.alertpanel input {
  width: 110px; height: 42px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel);
  color: var(--fg); padding: 0 10px; font: 16px var(--font); text-align: right;
}
.alertpanel label { color: var(--fg); }

/* Ko-fi card at the top of the Data tab: compact, text beside the button when there's room */
.card.support { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 16px; }
.card.support .txt { flex: 1 1 200px; min-width: 0; }
.card.support h2 { margin-bottom: 4px; }
.card.support p { margin: 0; font-size: 13px; line-height: 1.4; }
.card.support .btn { flex: none; }