:root {
  --bg: #f4f1ea;
  --bg-2: #ebe6db;
  --surface: #ffffff;
  --surface-2: #f7f5f0;
  --line: #ddd6c8;
  --text: #1f1f21;
  --muted: #6b6b6f;
  --accent: #2f6fed;
  --accent-ink: #ffffff;
  --gold: #e7a90f;
  --danger: #d63c3c;
  --leather: #2e2e31;
  --leather-2: #242426;
  --pocket: rgba(255, 255, 255, 0.07);
  --pocket-line: rgba(255, 255, 255, 0.14);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.08);
  --radius: 14px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #161617;
    --bg-2: #1c1c1e;
    --surface: #222224;
    --surface-2: #2a2a2c;
    --line: #39393d;
    --text: #ededed;
    --muted: #a1a1a6;
    --accent: #68a4ff;
    --accent-ink: #141415;
    --leather: #2a2a2d;
    --leather-2: #1f1f21;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 30px rgba(0, 0, 0, 0.35);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #161617;
  --bg-2: #1c1c1e;
  --surface: #222224;
  --surface-2: #2a2a2c;
  --line: #39393d;
  --text: #ededed;
  --muted: #a1a1a6;
  --accent: #68a4ff;
  --accent-ink: #141415;
  --leather: #2a2a2d;
  --leather-2: #1f1f21;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  min-height: 100vh;
}
h1, h2, h3, h4 { font-family: "Space Grotesk", Inter, sans-serif; line-height: 1.2; margin: 0; }
h3 { font-size: 1rem; }
h4 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 14px 0 6px; }
p { margin: 0.4em 0; }
a { color: inherit; }
img { display: block; }
.muted { color: var(--muted); }
.xs { font-size: 12px; }
.center { text-align: center; }
.error { color: var(--danger); font-size: 14px; }
.hint { font-size: 13px; color: var(--muted); margin: 6px 0; }
.row { display: flex; align-items: center; }
.row.gap { gap: 8px; }
.row.wrap { flex-wrap: wrap; }
.row.between { justify-content: space-between; gap: 8px; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }

/* Buttons & inputs */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--line); background: var(--surface); color: var(--text);
  border-radius: 10px; padding: 8px 14px; font: inherit; font-weight: 500;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, transform 0.05s;
}
.btn:hover { border-color: var(--accent); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.ghost:hover { background: var(--surface-2); }
.btn.danger { color: var(--danger); }
.btn.lg { padding: 12px 22px; font-size: 16px; }
.btn.sm { padding: 6px 10px; font-size: 14px; }
.btn.xs { padding: 4px 9px; font-size: 13px; border-radius: 8px; }
.btn.block { width: 100%; margin-top: 10px; }
.btn.icon { padding: 8px; }

input, select {
  font: inherit; color: var(--text); background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; min-width: 0;
}
input:focus-visible, select:focus-visible, .btn:focus-visible, .pocket:focus-visible, .result:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; cursor: pointer; }
.toggle input { accent-color: var(--accent); }

/* Top bar */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px max(16px, calc((100vw - 1440px) / 2));
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
/* The star from the 2Star Studio logo. */
.brand-mark { flex: none; width: 40px; height: 40px; }
.brand-mark img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25)); }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-text strong { font-family: "Space Grotesk", sans-serif; font-size: 17px; white-space: nowrap; }
.brand-text small { color: var(--muted); font-size: 11px; }
.topnav { display: flex; gap: 4px; align-items: center; }
.topnav .btn.on { background: var(--surface-2); }

main { padding: 20px max(16px, calc((100vw - 1440px) / 2)) 48px; }

/* Library */
.hero {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap;
  padding: 28px 0 32px;
}
.hero h1 { font-size: clamp(28px, 4vw, 44px); max-width: 16ch; }
.hero p { color: var(--muted); max-width: 52ch; font-size: 17px; }
.binder-shelf {
  display: grid; gap: 22px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.binder-tile {
  position: relative; display: flex; aspect-ratio: 3 / 3.7;
  border-radius: 10px 16px 16px 10px; overflow: hidden; text-decoration: none;
  background: var(--cover); color: #fff; box-shadow: var(--shadow);
  transition: transform 0.2s;
}
.binder-tile[data-light="true"] { color: #1f1f21; }
.binder-tile:hover { transform: translateY(-4px) rotate(-0.5deg); }
.binder-spine {
  width: 22px; flex: none;
  background: linear-gradient(90deg, rgba(0,0,0,0.35), rgba(0,0,0,0.1) 60%, rgba(255,255,255,0.15));
}
.binder-cover {
  flex: 1; display: flex; flex-direction: column; justify-content: flex-end; padding: 16px;
  background: radial-gradient(120% 80% at 80% 0%, rgba(255,255,255,0.18), transparent 60%);
}
.binder-cover h3 { font-size: 19px; }
.binder-cover p { font-size: 12px; opacity: 0.8; margin: 4px 0 0; }
.binder-fan { position: relative; flex: 1; }
.binder-fan img {
  position: absolute; width: 42%; top: 12%; left: calc(14% + var(--i) * 12%);
  border-radius: 5px; box-shadow: 0 4px 12px rgba(0,0,0,0.35);
  transform: rotate(calc((var(--i) - 1.5) * 7deg));
}
.binder-tile.new {
  align-items: center; justify-content: center; flex-direction: column; gap: 4px;
  background: transparent; color: var(--muted); border: 2px dashed var(--line);
  font: inherit; font-weight: 600; cursor: pointer; box-shadow: none;
}
.binder-tile.new span { font-size: 40px; font-weight: 300; }

/* Binder view */
.binder-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.binder-title { font-size: 22px; display: flex; align-items: center; gap: 10px; }
.binder-title::before { content: ""; width: 12px; height: 26px; border-radius: 3px; background: var(--cover); }
.page-label { font-weight: 600; font-size: 14px; min-width: 120px; text-align: center; }

/* The binder on top, the card picker underneath it. */
.binder-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; }
.pages-wrap { min-width: 0; }

.spread {
  display: grid; gap: 4px; padding: 14px;
  background: linear-gradient(160deg, var(--leather), var(--leather-2));
  border-radius: 18px; box-shadow: var(--shadow);
}
.spread.two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; }
.spread.two .page:first-child { border-right: 2px solid rgba(0,0,0,0.35); }
.page {
  padding: 8px 12px 14px; border-radius: 12px;
  transition: background 0.2s;
}
.spread.two .page.active { background: rgba(255,255,255,0.03); }
.page-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; color: #ececec; }
.page-name {
  flex: 1; min-width: 0; width: 0; background: transparent; border: 1px solid transparent; color: inherit;
  font-family: "Space Grotesk", sans-serif; font-weight: 700; padding: 4px 6px;
}
.page-name:hover, .page-name:focus { border-color: rgba(255,255,255,0.2); background: rgba(0,0,0,0.2); }
.page-head .btn.ghost { color: #c8c8cc; }
.page-head .btn.ghost:hover { background: rgba(255,255,255,0.08); }
.harmony {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600;
  background: rgba(0,0,0,0.3); padding: 3px 8px 3px 4px; border-radius: 99px;
}
.harmony i { width: 14px; height: 14px; border-radius: 50%; }

.pockets {
  display: grid; gap: clamp(5px, 1vw, 10px);
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  max-width: calc(var(--cols) * 190px); margin: 0 auto;
}
.pocket {
  position: relative; aspect-ratio: 63 / 88; border-radius: 7px; cursor: pointer;
  background: var(--pocket); border: 1px solid var(--pocket-line);
  transition: transform 0.15s, box-shadow 0.15s, opacity 0.2s;
}
.pocket::after {
  /* plastic sleeve sheen */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(125deg, rgba(255,255,255,0.14), transparent 35%, transparent 70%, rgba(255,255,255,0.06));
}
.pocket img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }
.pocket.empty { display: grid; place-items: center; color: rgba(255,255,255,0.3); font-size: 26px; font-weight: 300; }
.pocket.empty:hover { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.7); }
.pocket:not(.empty):hover { transform: translateY(-3px) scale(1.02); z-index: 2; box-shadow: 0 10px 24px rgba(0,0,0,0.45); }
.pocket.sel { box-shadow: 0 0 0 3px var(--gold); }
.pocket.drop { box-shadow: 0 0 0 3px var(--accent); background: rgba(104,164,255,0.18); }
.hue-dot {
  position: absolute; right: 5px; bottom: 5px; width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.85); box-shadow: 0 1px 3px rgba(0,0,0,0.5); z-index: 1;
}
.score-badge {
  position: absolute; left: 5px; top: 5px; z-index: 1;
  font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 99px; color: #fff;
  background: color-mix(in srgb, #2ebd6b calc(var(--s) * 1%), #c73d3d);
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

.slot-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 44px;
  padding: 8px 4px; font-size: 14px;
}
.page-strip { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 8px; }
.strip-page {
  flex: none; display: grid; grid-template-columns: repeat(var(--cols), 7px); gap: 2px;
  padding: 6px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface); cursor: pointer;
}
.strip-page.on { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); }
.strip-page i { width: 7px; height: 10px; border-radius: 1.5px; background: var(--bg-2); }
.strip-page i.f { background: var(--muted); }

/* Panel */
.panel {
  display: flex; flex-direction: column; scroll-margin-top: 72px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
.panel-body { padding: 16px 18px 22px; }
.card-block { padding: 12px 0; border-top: 1px solid var(--line); display: grid; gap: 8px; }
.card-block:first-child { border-top: 0; padding-top: 0; }

.search { display: flex; gap: 6px; flex-wrap: wrap; }
.search input { flex: 1 1 160px; }
.chip {
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--c) 60%, transparent); color: var(--text);
  background: color-mix(in srgb, var(--c) 18%, transparent); padding: 3px 9px; border-radius: 99px;
}
.chip.static { cursor: default; }
.chip:not(.static):hover { background: color-mix(in srgb, var(--c) 35%, transparent); }

.results { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; margin-top: 8px; }
.result {
  position: relative; padding: 0; border: 0; background: var(--bg-2); border-radius: 5px; cursor: grab;
  aspect-ratio: 63 / 88; transition: transform 0.12s;
}
.result:hover { transform: scale(1.05); z-index: 1; }
.result img { width: 100%; height: 100%; object-fit: cover; border-radius: 5px; }

/* Hue slider and segmented buttons */
.hue-slider {
  width: 100%; appearance: none; height: 14px; border-radius: 99px; padding: 0; border: 0;
  background: linear-gradient(90deg, hsl(0 75% 55%), hsl(60 75% 55%), hsl(120 75% 50%), hsl(180 75% 50%), hsl(240 75% 60%), hsl(300 75% 58%), hsl(360 75% 55%));
}
.hue-slider::-webkit-slider-thumb { appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid var(--text); cursor: pointer; }
.hue-slider::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 3px solid var(--text); cursor: pointer; }
.seg { display: flex; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 3px; width: 100%; }
.seg button {
  flex: 1; font: inherit; font-size: 12px; font-weight: 600; padding: 6px 2px; border: 0; border-radius: 7px;
  background: transparent; color: var(--muted); cursor: pointer;
}
.seg button.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,0.12); }
/* Card finder */
.finder { display: grid; gap: 10px; }
.chip.on, .chip.on:not(.static):hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.filter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; padding: 10px 12px; }
.filter { display: grid; gap: 3px; font-size: 12px; font-weight: 600; color: var(--muted); }
.filter select, .filter input { width: 100%; font-size: 14px; font-weight: 400; padding: 6px 8px; background: var(--surface); }
.pills { display: flex; flex-wrap: wrap; gap: 5px; }
.pill {
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; padding: 3px 10px; border-radius: 99px;
  border: 1px solid var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--text);
}
.pill span { opacity: 0.6; margin-left: 2px; }
.pill.ghost { border-color: var(--line); background: transparent; color: var(--muted); }
.find-status { font-size: 14px; font-weight: 600; margin: 12px 0 4px; }
.find-status .muted { font-weight: 400; }
.find-actions { margin-top: 12px; }
.spinner {
  display: inline-block; width: 12px; height: 12px; vertical-align: -1px; margin-left: 4px;
  border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }


/* Smart search and prices */
.understood { font-size: 13px; margin: 0 0 6px; display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.understood .tag { background: color-mix(in srgb, var(--gold) 22%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 55%, transparent); border-radius: 99px; padding: 1px 8px; font-weight: 600; }
.price-box { margin-top: 8px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); }
.price-head { display: flex; align-items: baseline; gap: 8px; }
.price-head strong { font-family: "Space Grotesk", sans-serif; font-size: 24px; color: #1f9d55; }
.price-table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 6px 0; }
.price-table th { text-align: left; color: var(--muted); font-weight: 600; font-size: 12px; }
.price-table td, .price-table th { padding: 3px 6px 3px 0; }
.price-table tbody tr + tr td { border-top: 1px solid var(--line); }
.tcg-link { font-weight: 600; color: var(--accent); }

/* Card picker under the binder */
.picker-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px 6px; }
.picker-head h2 { font-size: 20px; }
.picker-head p { margin: 2px 0 0; font-size: 14px; }
.picker.flash { animation: picker-flash 1.1s ease-out; }
@keyframes picker-flash { 0% { box-shadow: 0 0 0 3px var(--gold), var(--shadow); } 100% { box-shadow: var(--shadow); } }
.panel .results { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 12px; }
.panel .results.captioned { row-gap: 28px; }
/* Search tab: filters beside the results on wide screens */
.picker-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
@media (min-width: 900px) {
  .picker-split { grid-template-columns: 320px minmax(0, 1fr); }
  .picker-split > .finder { position: sticky; top: 76px; }
}
.panel-body > .card-block, .panel-body > .hue-picker { max-width: 1100px; }

/* Suggestions */
.suggest-head { display: flex; align-items: flex-start; gap: 10px; }
.suggest-head .hint { flex: 1; margin-top: 0; }
.results.captioned { row-gap: 26px; }
.caption {
  position: absolute; left: 0; right: 0; top: 100%; margin-top: 3px;
  font-size: 10.5px; line-height: 1.2; color: var(--muted); text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sheet .dialog-body { max-height: min(86vh, 900px); overflow-y: auto; }
.sheet h2 { font-size: 19px; }
.sheet h4 { margin: 4px 0 0; }
.pocket-name {
  position: absolute; inset: 0; display: none; place-items: center; padding: 8px; text-align: center;
  font-size: 12px; font-weight: 600; color: #ececec;
}
.pocket.noimg img { visibility: hidden; }
.pocket.noimg .pocket-name { display: grid; }
.toast { display: flex; align-items: center; gap: 12px; }
.toast-action { font: inherit; font-weight: 700; background: none; border: 0; color: inherit; text-decoration: underline; cursor: pointer; padding: 0; }

/* Collection progress */
.collected { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.progress { display: inline-block; width: 70px; height: 6px; border-radius: 99px; background: color-mix(in srgb, currentColor 18%, transparent); overflow: hidden; }
.progress i { display: block; height: 100%; background: #2ebd6b; }
.binder-cover .progress { display: block; width: 100%; margin-top: 8px; }
.pocket.missing img { filter: grayscale(1) brightness(0.75); opacity: 0.55; }
.missing-tag {
  position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); z-index: 1;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  background: rgba(0, 0, 0, 0.7); color: #fff; padding: 2px 8px; border-radius: 99px;
}
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }


/* Dialogs */
.dialog {
  border: 1px solid var(--line); border-radius: 18px; padding: 0; width: min(460px, calc(100vw - 32px));
  background: var(--surface); color: var(--text); box-shadow: 0 30px 80px rgba(0,0,0,0.35);
}
.dialog.wide { width: min(760px, calc(100vw - 32px)); }
.dialog::backdrop { background: rgba(12, 12, 13, 0.55); backdrop-filter: blur(3px); }
.dialog-body { padding: 22px; display: grid; gap: 14px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.field { display: grid; gap: 5px; font-size: 14px; font-weight: 500; }
.settings-section { display: grid; gap: 10px; }
.settings-section p { font-size: 14px; margin: 0; }
.cover-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.cover-swatch { width: 32px; height: 32px; border-radius: 8px; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--line); cursor: pointer; }
.cover-swatch.on { box-shadow: 0 0 0 3px var(--accent); }

.card-detail { grid-template-columns: minmax(0, 300px) 1fr; align-items: start; gap: 22px; }
.card-detail img { width: 100%; border-radius: 12px; box-shadow: var(--shadow); }
.card-detail dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 14px; margin: 14px 0; }
.card-detail dt { color: var(--muted); }
.card-detail dd { margin: 0; }
.similar { margin-bottom: 14px; }
.similar h4 { margin-top: 0; }
.palette { display: flex; gap: 6px; margin-bottom: 12px; }
.palette span { width: 36px; height: 36px; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1); }

/* Toasts */
.toasts { position: fixed; bottom: 18px; width: max-content; max-width: calc(100vw - 32px); left: 50%; transform: translateX(-50%); display: grid; gap: 8px; z-index: 50; }
.toast {
  background: var(--text); color: var(--bg); padding: 10px 16px; border-radius: 10px; font-size: 14px;
  box-shadow: var(--shadow); transition: opacity 0.4s, transform 0.4s;
}
.toast.warn { background: var(--danger); color: #fff; }
.toast.out { opacity: 0; transform: translateY(8px); }

/* Responsive */
@media (max-width: 1100px) {
  .binder-layout { grid-template-columns: 1fr; }
  .panel { position: static; max-height: none; }
}
@media (max-width: 640px) {
  .dialog.sheet { width: 100%; max-width: 100%; max-height: 92vh; margin: auto 0 0; inset: auto 0 0 0; border-radius: 18px 18px 0 0; }
  .sheet .dialog-body { max-height: 92vh; padding: 18px 16px 24px; }
  /* Keep the selected card's actions on screen while the page scrolls. */
  .slot-bar { position: sticky; bottom: 0; z-index: 5; background: var(--bg); border-top: 1px solid var(--line); margin: 0 -16px; padding: 8px 16px; }
  .spread { padding: 8px; border-radius: 12px; }
  .spread.two { grid-template-columns: 1fr; }
  .spread.two .page:first-child { border-right: 0; border-bottom: 2px solid rgba(0,0,0,0.35); }
  .page { padding: 6px 4px 10px; }
  .binder-shelf { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .brand-text small { display: none; }
  .card-detail { grid-template-columns: 1fr; }
  .card-detail img { max-width: 260px; margin: 0 auto; }
  .hero { padding: 12px 0 20px; }
  .panel .results { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
  .picker-head { padding: 14px 14px 4px; }
  .panel-body { padding: 12px 14px 18px; }
  .topnav .btn { padding: 8px 8px; font-size: 14px; }
}
@media (max-width: 440px) {
  .brand-text { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ===========================================================================
   Polish: icons, card motion, loading, page turns
   =========================================================================== */

.ico { flex: none; width: 16px; height: 16px; vertical-align: -3px; }
.ico.wide { width: auto; }
.swatch-ico { flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15); }
.gen {
  flex: none; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 5px;
  font: 700 10px/1 "Space Grotesk", sans-serif; background: var(--bg-2); color: var(--muted);
}

/* Tiles show a soft placeholder until the image arrives (no fades: they flicker when lists redraw). */
.result { background: var(--bg-2); }
body.scrolling .result:hover, body.scrolling .pocket:hover { transform: none; }

/* Tilt and glare under the pointer (Settings → Card effects). */
.result, .pocket:not(.empty), .detail-art > img, .lp-price-card { transform-style: preserve-3d; }
.tilting { transform: perspective(700px) rotateX(var(--rx, 0)) rotateY(var(--ry, 0)) scale(1.04) !important; z-index: 3; transition: transform 0.08s linear !important; }
.result.tilting::after, .pocket.tilting::after, .lp-price-card.tilting::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2; mix-blend-mode: soft-light;
  background:
    radial-gradient(circle at var(--gx) var(--gy), rgba(255, 255, 255, 0.75), transparent 45%),
    linear-gradient(115deg, transparent 20%, rgba(255, 120, 200, 0.25) 40%, rgba(120, 220, 255, 0.25) 55%, transparent 75%);
}
.detail-art > img { transition: transform 0.3s ease; }

/* Page turns */
.spread.turn-next .page { animation: turn-next 0.38s cubic-bezier(.2, .8, .2, 1); }
.spread.turn-prev .page { animation: turn-prev 0.38s cubic-bezier(.2, .8, .2, 1); }
@keyframes turn-next { from { opacity: 0; transform: translateX(28px) rotateY(-6deg); } }
@keyframes turn-prev { from { opacity: 0; transform: translateX(-28px) rotateY(6deg); } }

.price-tag {
  position: absolute; right: 4px; bottom: 4px; z-index: 2; font-size: 11px; font-weight: 700; letter-spacing: 0.01em;
  background: rgba(18, 18, 19, 0.84); color: #fff; padding: 1px 6px; border-radius: 99px; pointer-events: none;
  font-variant-numeric: tabular-nums;
}
.pocket .price-tag { right: auto; left: 5px; bottom: 5px; }
.value { color: var(--text); font-weight: 600; }

.to-top {
  position: fixed; right: 18px; bottom: 18px; z-index: 40; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; border: 1px solid var(--line); background: var(--surface); color: var(--text);
  box-shadow: var(--shadow); cursor: pointer; opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
}
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.to-top .ico { width: 18px; height: 18px; }

/* Focus and hover feel */
.btn { transition: background 0.15s, border-color 0.15s, transform 0.08s, box-shadow 0.15s; }
.btn.primary:hover { box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 35%, transparent); }
.btn .ico { width: 15px; height: 15px; }
.topnav .btn.on { color: var(--text); background: var(--surface-2); }

body.no-motion *, body.no-motion *::before, body.no-motion *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }

/* ===========================================================================
   Settings
   =========================================================================== */

.dialog.settings { width: min(540px, calc(100vw - 24px)); padding: 0; }
.settings-body { display: grid; gap: 18px; padding: 8px 20px 20px; max-height: min(86vh, 860px); overflow-y: auto; }
.settings-head { display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 2; background: var(--surface); padding: 12px 0 6px; }
.settings-head h2 { font-size: 20px; }
.set-group { display: grid; }
.set-group > h3, .set-group > summary h3 {
  font: 600 12px/1 Inter, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 0 4px 8px;
}
.set-list { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--surface-2); }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 14px; }
.set-row + .set-row { border-top: 1px solid var(--line); }
label.set-row { cursor: pointer; }
.set-row > div:first-child { display: grid; gap: 2px; min-width: 0; }
.set-row p { margin: 0; font-weight: 500; }
.set-row small { color: var(--muted); font-size: 12.5px; line-height: 1.35; }
.set-row select, .set-row input[type="password"] { max-width: 220px; font-size: 14px; padding: 6px 9px; background: var(--surface); }
.set-advanced summary h3 { margin-bottom: 8px; }
.settings-foot { text-align: center; padding-top: 4px; }

/* iOS-style switch */
.switch {
  appearance: none; flex: none; position: relative; width: 44px; height: 26px; border-radius: 99px; padding: 0; margin: 0;
  background: color-mix(in srgb, var(--muted) 35%, transparent); border: 0; cursor: pointer; transition: background 0.2s;
}
.switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); transition: transform 0.2s cubic-bezier(.3, .7, .3, 1);
}
.switch:checked { background: #2ebd6b; }
.switch:checked::after { transform: translateX(18px); }
.switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.seg.compact { width: auto; }
.seg.compact button { padding: 6px 12px; font-size: 13px; }

/* ===========================================================================
   Home page
   =========================================================================== */

main.landing { padding: 0; }
body[data-view="home"] .topbar {
  background: rgba(20, 20, 21, 0.9); border-bottom-color: rgba(255, 255, 255, 0.08); color: #f2f2f2;
}
body[data-view="home"] .topbar .btn.ghost { color: #e8e8e8; }
body[data-view="home"] .topbar .btn.ghost:hover { background: rgba(255, 255, 255, 0.08); }
body[data-view="home"] .brand-text small { color: #a7a5b8; }

.lp-hero {
  --ink: #f4f2fb;
  position: relative; overflow: hidden; isolation: isolate; color: var(--ink);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: 24px;
  padding: 72px max(24px, calc((100vw - 1280px) / 2)) 96px; min-height: min(88vh, 860px);
  background: #141415;
}
.lp-aurora {
  position: absolute; inset: -20%; z-index: -1; filter: blur(60px); opacity: 0.9;
  background:
    radial-gradient(40% 35% at 70% 35%, rgba(232, 52, 59, 0.45), transparent 70%),
    radial-gradient(35% 30% at 85% 75%, rgba(242, 181, 58, 0.35), transparent 70%),
    radial-gradient(45% 40% at 25% 80%, rgba(200, 200, 210, 0.12), transparent 70%);
  animation: aurora 18s ease-in-out infinite alternate;
}
@keyframes aurora { to { transform: translate(-4%, 3%) rotate(8deg) scale(1.08); } }
.lp-hero::after {
  /* faint grain so the gradients don't band */
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.08; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.6) 0.6px, transparent 0.6px); background-size: 3px 3px;
}
.lp-eyebrow { font: 600 13px/1 Inter, sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: #f2b53a; margin-bottom: 18px; }
.lp-hero h1 { font-size: clamp(38px, 5.4vw, 70px); line-height: 1.02; letter-spacing: -0.03em; }
.lp-grad { background: linear-gradient(90deg, #ff6b5e, #f2b53a 45%, #7fd0ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lp-lede { font-size: clamp(16px, 1.4vw, 19px); color: #c9c6da; max-width: 46ch; margin: 20px 0 28px; }
.lp-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.btn.ghost-light { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.22); color: #fff; }
.btn.ghost-light:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.4); }
.lp-stats { display: flex; flex-wrap: wrap; gap: 10px 34px; margin: 38px 0 0; }
.lp-stats div { display: grid; gap: 2px; }
.lp-stats dt { font: 700 26px/1 "Space Grotesk", sans-serif; font-variant-numeric: tabular-nums; }
.lp-stats dd { margin: 0; color: #a7a5b8; font-size: 13px; }

/* The hero binder: an open two-page spread leaning back, with loose cards floating over it. */
.lp-stage { position: relative; height: min(64vh, 600px); perspective: 1600px; --px: 0; --py: 0; }
.lp-binder {
  position: absolute; left: 50%; top: 50%; width: min(640px, 100%);
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 16px;
  background: linear-gradient(150deg, #303033, #1c1c1e); border-radius: 18px;
  box-shadow: 0 50px 90px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transform: translate(-50%, -50%) rotateX(calc(24deg - var(--py) * 8deg)) rotateY(calc(-16deg + var(--px) * 10deg)) rotateZ(4deg);
  transition: transform 0.6s cubic-bezier(.2, .8, .2, 1);
}
.lp-binder::before {
  content: ""; position: absolute; left: 50%; top: 10px; bottom: 10px; width: 10px; transform: translateX(-50%);
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.45), rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.45)); border-radius: 4px;
}
.lp-page { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.lp-pocket {
  aspect-ratio: 63 / 88; border-radius: 6px; background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); overflow: hidden; position: relative;
}
.lp-pocket::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.18), transparent 35%, transparent 70%, rgba(255, 255, 255, 0.06));
}
.lp-pocket img, .lp-float img, .lp-thumb img, .lp-gcard img, .lp-mini img, .lp-sugg img, .lp-price-card img {
  width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit;
  opacity: 0; transition: opacity 0.5s;
}
.lp-stage img.ready, .lp-demo img.ready { opacity: 1; }
.lp-stage img.broken, .lp-demo img.broken { visibility: hidden; }
.dealt .lp-pocket img.ready { animation: deal 0.75s cubic-bezier(.2, .9, .25, 1.15) backwards; animation-delay: calc(var(--i) * 70ms + 150ms); }
.dealt .lp-page[data-page="1"] .lp-pocket img.ready { animation-delay: calc(var(--i) * 70ms + 700ms); }
@keyframes deal { from { opacity: 0; transform: translateY(-40px) rotate(-8deg) scale(1.15); } }

.lp-float {
  position: absolute; width: clamp(90px, 11vw, 150px); aspect-ratio: 63 / 88; border-radius: 9px; overflow: hidden;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.12);
  transform: translate(calc(var(--px) * var(--depth) * 1px), calc(var(--py) * var(--depth) * 1px)) rotate(var(--rot));
  transition: transform 0.4s cubic-bezier(.2, .8, .2, 1);
}
.lp-float::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.45) 46%, rgba(255, 160, 220, 0.25) 52%, transparent 66%);
  background-size: 250% 100%; animation: sheen 5.5s ease-in-out infinite; mix-blend-mode: soft-light;
}
@keyframes sheen { 0%, 40% { background-position: 130% 0; } 75%, 100% { background-position: -40% 0; } }
.lp-float.f1 { --rot: -10deg; --depth: 40; left: 2%; top: 4%; animation: bob 7s ease-in-out infinite; }
.lp-float.f2 { --rot: 8deg; --depth: 60; right: 0; top: 30%; animation: bob 8s ease-in-out -2s infinite; }
.lp-float.f3 { --rot: -4deg; --depth: 30; left: 30%; bottom: -2%; width: clamp(80px, 9vw, 125px); animation: bob 9s ease-in-out -4s infinite; }
@keyframes bob { 50% { translate: 0 -14px; } }
.lp-float img { opacity: 0; }
.dealt .lp-float img.ready { opacity: 1; animation: float-in 1s cubic-bezier(.2, .9, .3, 1.1) 1.2s backwards; }
@keyframes float-in { from { opacity: 0; transform: translateY(40px) scale(0.9); } }

/* Feature sections */
.lp-section { padding: 72px max(24px, calc((100vw - 1180px) / 2)); }
.lp-feature { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
.lp-feature.flip .lp-copy { order: 2; }
.lp-kicker { font: 600 13px/1 Inter, sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
.lp-copy h2 { font-size: clamp(28px, 3.2vw, 42px); letter-spacing: -0.02em; line-height: 1.08; margin-bottom: 16px; }
.lp-copy p { color: var(--muted); font-size: 17px; max-width: 44ch; }
.lp-demo {
  position: relative; border-radius: 24px; padding: 26px; min-height: 320px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); overflow: hidden;
}
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(.2, .8, .2, 1); }
.reveal.in { opacity: 1; transform: none; }

/* Search demo */
.lp-searchbar {
  display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-radius: 99px; font-size: 18px;
  background: var(--surface-2); border: 1px solid var(--line); min-height: 54px;
}
.lp-searchbar .ico { width: 18px; height: 18px; color: var(--muted); }
.lp-caret { width: 2px; height: 22px; background: var(--accent); animation: blink 1s steps(1) infinite; margin-left: -8px; }
@keyframes blink { 50% { opacity: 0; } }
.lp-chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 30px; margin: 14px 0; }
.lp-chip {
  font-size: 13px; font-weight: 600; padding: 3px 10px; border-radius: 99px;
  background: color-mix(in srgb, var(--gold) 20%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 55%, transparent);
  animation: pop 0.35s cubic-bezier(.2, .9, .3, 1.3) backwards; animation-delay: calc(var(--i) * 90ms);
}
@keyframes pop { from { opacity: 0; transform: scale(0.7); } }
.lp-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.lp-thumb { aspect-ratio: 63 / 88; border-radius: 7px; overflow: hidden; background: var(--bg-2); opacity: 0; transform: translateY(18px); transition: opacity 0.45s, transform 0.45s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--i) * 70ms + 150ms); }
.lp-thumbs.show .lp-thumb { opacity: 1; transform: none; }

/* Gradient demo */
.lp-gradient-demo { display: grid; align-content: center; gap: 20px; background: #1b1b1d; border-color: #2c2c2f; }
.lp-gradient-bar { max-width: 420px; width: 100%; justify-self: center; }
.lp-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; max-width: 420px; width: 100%; justify-self: center; }
.lp-gcard { aspect-ratio: 63 / 88; border-radius: 7px; overflow: hidden; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4); }
.lp-gradient-bar { display: flex; align-items: center; gap: 12px; color: #d9d6ea; font-weight: 600; font-size: 14px; }
.lp-gradient-bar i { flex: 1; height: 8px; border-radius: 99px; background: rgba(255, 255, 255, 0.1); position: relative; overflow: hidden; }
.lp-gradient-bar i::after {
  content: ""; position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); transition: transform 0.9s cubic-bezier(.2, .8, .2, 1);
  background: linear-gradient(90deg, hsl(0 75% 55%), hsl(60 75% 55%), hsl(120 60% 48%), hsl(190 70% 50%), hsl(240 70% 60%), hsl(300 70% 58%));
}
.lp-gradient-demo.sorted .lp-gradient-bar i::after { transform: none; }

/* Suggestion demo */
.lp-suggest-demo { display: grid; grid-template-columns: 1.3fr 1fr; gap: 22px; align-items: center; }
.lp-mini-page { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 12px; border-radius: 14px; background: linear-gradient(160deg, #303033, #1c1c1e); }
.lp-mini { aspect-ratio: 63 / 88; border-radius: 5px; overflow: hidden; background: rgba(255, 255, 255, 0.06); }
.lp-mini.empty { display: grid; place-items: center; color: rgba(255, 255, 255, 0.55); font-size: 22px; box-shadow: inset 0 0 0 2px #f2b53a; transition: box-shadow 0.6s; }
.lp-suggest-demo.pulse .lp-mini.empty { box-shadow: inset 0 0 0 2px #f2b53a, 0 0 22px rgba(242, 181, 58, 0.6); }
.lp-suggestions { display: grid; gap: 10px; }
.lp-sugg {
  display: grid; grid-template-columns: 52px 1fr; align-items: center; gap: 10px; padding: 8px; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--line);
}
.reveal.in .lp-sugg { animation: slide-in 0.6s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--i) * 150ms + 300ms); }
@keyframes slide-in { from { opacity: 0; transform: translateX(24px); } }
.lp-sugg img { aspect-ratio: 63 / 88; border-radius: 5px; height: auto; }
.lp-sugg span { font-size: 13px; font-weight: 600; justify-self: start; padding: 2px 9px; border-radius: 99px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--text); }

/* Price demo */
.lp-price-demo { display: grid; grid-template-columns: 0.8fr 1fr; gap: 26px; align-items: center; }
.lp-price-card { aspect-ratio: 63 / 88; border-radius: 12px; overflow: hidden; position: relative; box-shadow: 0 24px 50px rgba(0, 0, 0, 0.35); }
.lp-price-panel { display: grid; gap: 4px; }
.lp-price-panel p { margin: 0; }
.lp-price-name { font: 700 20px/1.2 "Space Grotesk", sans-serif; display: flex; align-items: center; gap: 8px; }
.lp-price-value { font: 700 44px/1.1 "Space Grotesk", sans-serif; color: #1f9d55; margin-top: 14px !important; font-variant-numeric: tabular-nums; }
.lp-track { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; margin-top: 18px; font-size: 13px; color: var(--muted); }
.lp-track b { height: 8px; border-radius: 99px; background: var(--bg-2); overflow: hidden; }
.lp-track i { display: block; height: 100%; background: #2ebd6b; border-radius: inherit; transition: width 1s cubic-bezier(.2, .8, .2, 1); }
.lp-price-demo.swap .lp-price-card, .lp-price-demo.swap .lp-price-panel { animation: swap-in 0.6s cubic-bezier(.2, .8, .2, 1); }
@keyframes swap-in { from { opacity: 0; transform: translateY(14px); } }
.lp-price-demo.no-price { display: none; }

/* Steps, final call to action, footer */
.lp-steps h2 { font-size: clamp(26px, 3vw, 38px); text-align: center; margin-bottom: 34px; letter-spacing: -0.02em; }
.lp-steps ol { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.lp-steps li { padding: 24px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); }
.lp-steps b {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; margin-bottom: 14px;
  font: 700 16px/1 "Space Grotesk", sans-serif; color: #fff; background: linear-gradient(135deg, #e8343b, #f2b53a);
}
.lp-steps h3 { font-size: 18px; margin-bottom: 6px; }
.lp-steps p { color: var(--muted); margin: 0; }
.lp-final {
  margin: 0 max(24px, calc((100vw - 1180px) / 2)) 64px; padding: 64px 24px; border-radius: 28px; text-align: center;
  color: #fff; background: radial-gradient(60% 120% at 20% 0%, rgba(232, 52, 59, 0.55), transparent 60%), radial-gradient(60% 120% at 90% 100%, rgba(200, 200, 210, 0.14), transparent 60%), #161617;
}
.lp-final h2 { font-size: clamp(28px, 3.4vw, 44px); margin-bottom: 24px; letter-spacing: -0.02em; }
.lp-final .lp-cta { justify-content: center; }
.lp-final .btn:not(.primary) { background: rgba(255, 255, 255, 0.08); color: #fff; border-color: rgba(255, 255, 255, 0.25); }
.lp-footer { padding: 0 max(24px, calc((100vw - 1180px) / 2)) 48px; font-size: 13px; text-align: center; display: grid; gap: 6px; }
.lp-footer p { margin: 0; }

@media (max-width: 900px) {
  .lp-hero { grid-template-columns: 1fr; padding-top: 40px; padding-bottom: 40px; min-height: 0; }
  .lp-stage { height: 380px; margin-top: 8px; }
  .lp-binder { width: 92%; }
  .lp-feature, .lp-feature.flip { grid-template-columns: 1fr; gap: 28px; }
  .lp-feature.flip .lp-copy { order: 0; }
  .lp-section { padding-top: 64px; padding-bottom: 64px; }
  .lp-steps ol { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .lp-stage { height: 300px; }
  .lp-demo { padding: 18px; min-height: 0; }
  .lp-suggest-demo, .lp-price-demo { grid-template-columns: 1fr; }
  .lp-price-card { width: 60%; margin: 0 auto; }
  .lp-stats dt { font-size: 22px; }
  .lp-searchbar { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-aurora, .lp-float, .lp-float::after, .lp-caret { animation: none !important; }
  .reveal { opacity: 1; transform: none; }
}
@media (max-width: 640px) {
  .dialog.settings.sheet { width: 100%; max-width: 100%; }
  .settings-body { max-height: 88vh; padding: 4px 16px 24px; }
  .set-row select { max-width: 160px; }
}

/* Slicers: what suggestions and similar cards match on */
.factor-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 12px; }
.factor-chips > span { margin-right: 4px; }
.chip.factor { --c: var(--accent); padding: 4px 11px; font-size: 12.5px; background: transparent; border-color: var(--line); color: var(--muted); }
.chip.factor:not(.static):hover { background: var(--surface-2); color: var(--text); }
.chip.factor.on, .chip.factor.on:not(.static):hover { background: color-mix(in srgb, var(--accent) 14%, transparent); border-color: var(--accent); color: var(--text); }

/* Similar cards in the card details */
.similar-cards { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 16px; }
.similar-cards h3 { font-size: 17px; margin-bottom: 8px; }
.similar-cards .results { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
.similar-cards .results.captioned { row-gap: 26px; }
.similar-cards .result { cursor: pointer; }
.dialog.wide { max-height: 92vh; overflow-y: auto; }
.results.captioned { padding-bottom: 22px; }

/* ===========================================================================
   Slicers: filter sections of tappable chips
   =========================================================================== */
:root { interpolate-size: allow-keywords; }
.slicers { display: grid; }
.slicer { border-top: 1px solid var(--line); }
.slicer summary {
  list-style: none; display: flex; align-items: center; gap: 10px; padding: 11px 2px; cursor: pointer; user-select: none;
}
.slicer summary::-webkit-details-marker { display: none; }
.slicer summary::after {
  content: ""; margin-left: auto; flex: none; width: 7px; height: 7px; border: solid var(--muted); border-width: 0 1.6px 1.6px 0;
  transform: rotate(45deg) translateY(-2px); transition: transform 0.2s ease;
}
.slicer[open] summary::after { transform: rotate(225deg) translateY(-2px); }
.sl-title { font: 600 14px/1 Inter, sans-serif; }
.sl-sel { font-size: 12px; font-weight: 600; color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.slicer::details-content { block-size: 0; overflow: clip; transition: block-size 0.25s ease, content-visibility 0.25s allow-discrete; }
.slicer[open]::details-content { block-size: auto; }
.sl-body { padding: 0 0 14px; display: grid; gap: 10px; }
.sl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sl-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 7px; border-radius: 99px;
  border: 1px solid var(--line); background: var(--surface); color: var(--text); font: 500 13px/1.2 Inter, sans-serif; cursor: pointer;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.1s, opacity 0.2s;
}
.sl-chip:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.sl-chip:active { transform: scale(0.95); }
.sl-chip.on { background: color-mix(in srgb, var(--accent) 13%, var(--surface)); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.sl-chip.on span { font-weight: 600; }
.sl-chip .sl-count { font-style: normal; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.sl-chip .sl-count:empty { display: none; }
.sl-chip.none { opacity: 0.38; }
.sl-rarity .sl-chip.none, .sl-set .sl-chip.none, .sl-serie .sl-chip.none { display: none; }
.sl-chip .ico, .sl-chip .swatch-ico, .sl-chip .gen { flex: none; }
.sl-type .sl-chip .ico { width: 18px; height: 18px; }
.sl-set { max-height: 260px; overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; }
.sl-group { flex-basis: 100%; margin: 8px 2px 0; font: 700 11px/1 Inter, sans-serif; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.sl-group:first-child { margin-top: 0; }
.searching .sl-group { display: none; }
.sl-search { width: 100%; font-size: 14px; padding: 7px 10px; }
.sl-more { grid-template-columns: 1fr 1fr; }
.sl-more .filter input, .sl-more .filter select { background: var(--surface); }
#find-pills:empty { display: none; }
#find-results .results { animation: results-in 0.25s ease; }
@keyframes results-in { from { opacity: 0.4; transform: translateY(4px); } }

/* Slicer chips for similar cards and suggestions */
.chip.factor { display: inline-flex; align-items: center; gap: 5px; }
.chip.factor .ico { width: 14px; height: 14px; }

/* The shared filter column */
.filters-box > summary {
  list-style: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 12px 2px 10px; cursor: pointer;
  font: 700 15px/1.2 "Space Grotesk", sans-serif; border-top: 1px solid var(--line);
}
.filters-box > summary::-webkit-details-marker { display: none; }
.filters-box > summary small { flex-basis: 100%; font: 400 12px/1.3 Inter, sans-serif; color: var(--muted); }
.filters-count { min-width: 20px; padding: 1px 7px; border-radius: 99px; background: var(--accent); color: var(--accent-ink); font: 700 11px/1.5 Inter, sans-serif; text-align: center; }
.filters-count:empty { display: none; }
.filters-box > summary::after { content: ""; margin-left: auto; align-self: center; width: 7px; height: 7px; border: solid var(--muted); border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); transition: transform 0.2s; }
.filters-box[open] > summary::after { transform: rotate(225deg); }
.filters-box::details-content { block-size: 0; overflow: clip; transition: block-size 0.25s ease, content-visibility 0.25s allow-discrete; }
.filters-box[open]::details-content { block-size: auto; }
.tab-body { min-width: 0; }
.filters-box > summary small { order: 3; }
.filters-box > summary::after { order: 2; }

/* Page plan */
.plan-head h3 { font-size: 17px; }
.plan-head .hint { margin: 4px 0 10px; }
.plan-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 10px; }
.plan-page {
  display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 8px; padding: 14px;
  max-width: calc(var(--cols) * 150px + 28px); margin: 6px 0 12px;
  background: linear-gradient(160deg, var(--leather), var(--leather-2)); border-radius: 16px; box-shadow: var(--shadow);
}
.plan-pocket {
  position: relative; aspect-ratio: 63 / 88; padding: 0; border: 0; border-radius: 6px; overflow: hidden; cursor: pointer;
  background: rgba(255, 255, 255, 0.06); animation: plan-in 0.4s cubic-bezier(.2, .8, .2, 1) backwards;
}
.plan-pocket:nth-child(n) { animation-delay: calc(var(--d, 0) * 1ms); }
.plan-pocket img { width: 100%; height: 100%; object-fit: cover; }
.plan-pocket.empty { cursor: default; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.plan-pocket.new { box-shadow: 0 0 0 2px var(--gold); }
.new-tag {
  position: absolute; left: 4px; top: 4px; font: 700 10px/1 Inter, sans-serif; letter-spacing: 0.04em; text-transform: uppercase;
  background: var(--gold); color: #3a2a00; padding: 3px 6px; border-radius: 99px;
}
.plan-gradient { height: 10px; border-radius: 99px; max-width: calc(var(--cols, 4) * 150px + 28px); margin-bottom: 10px; }
@keyframes plan-in { from { opacity: 0; transform: translateY(8px) scale(0.97); } }

/* "How much colour" and "Gradient strength" sliders */
.amount { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 10px; font-size: 12px; font-weight: 600; color: var(--muted); max-width: 520px; }
.amount input { grid-column: 1 / -1; width: 100%; padding: 0; accent-color: var(--accent); background: none; border: 0; }
.amount output { grid-row: 1; grid-column: 2; justify-self: end; color: var(--text); }
.amount.idle { opacity: 0.55; }
#suggest-box > .amount, #plan-box > .amount { margin: 4px 0 10px; }

/* Press and hold for details */
.result, .pocket, .plan-pocket { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; touch-action: manipulation; }
.pressing { transform: scale(0.95) !important; transition: transform 0.45s ease-out !important; }

/* The sheet that opens from an empty pocket */
.pocket-sheet .dialog-body { gap: 12px; }
.sheet-head { display: flex; align-items: center; gap: 6px; }
.sheet-head h2 { font-size: 19px; margin-right: auto; }
.sheet-choices { display: grid; gap: 10px; }
.choice {
  display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; text-align: left; cursor: pointer;
  border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); color: var(--text); font: inherit;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
}
.choice:hover { border-color: var(--accent); }
.choice:active { transform: scale(0.98); }
.choice b { display: block; font: 600 16px/1.3 Inter, sans-serif; }
.choice small { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
.choice-ico { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.choice-ico .ico { width: 20px; height: 20px; }
.choice:first-child .choice-ico { background: color-mix(in srgb, var(--gold) 22%, transparent); color: #b5810b; }
.pocket-sheet .results { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.pocket-sheet .results.captioned { row-gap: 28px; }

/* "Match a hue" in the Colour filter */
.hue-filter { display: grid; gap: 8px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); }
.hue-filter .hue-row, .hue-filter .hue-modes { display: none; }
.hue-filter.on .hue-row { display: flex; align-items: center; gap: 10px; }
.hue-filter.on .hue-modes { display: flex; }
.hue-filter .hue-slider { flex: 1; min-width: 0; }
.hue-dot-big { flex: none; width: 22px; height: 22px; border-radius: 50%; background: hsl(var(--h) 75% 52%); box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--line); }
.hue-filter output { flex: none; width: 36px; text-align: right; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.hue-modes button { flex: 1; padding: 5px 4px; font-size: 12px; }
.pill-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; }

/* Binder tiles: edit / delete */
.binder-tile .tile-edit {
  position: absolute; top: 8px; right: 8px; z-index: 2; width: 32px; height: 32px; border-radius: 50%; border: 0; cursor: pointer;
  font: 700 16px/1 Inter, sans-serif; color: inherit; background: rgba(0, 0, 0, 0.22); opacity: 0; transition: opacity 0.15s;
}
.binder-tile:hover .tile-edit, .binder-tile:focus-within .tile-edit { opacity: 1; }
@media (hover: none) { .binder-tile .tile-edit { opacity: 1; } }
.dialog-actions .delete-binder { margin-right: auto; }
.picker-head { padding-bottom: 12px; border-bottom: 1px solid var(--line); }

/* Search modes: Name or Smart (AI) */
.search-modes { display: flex; gap: 4px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 11px; padding: 3px; }
.mode-btn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font: inherit; font-size: 13px; font-weight: 600; padding: 7px 8px; border: 0; border-radius: 8px;
  background: transparent; color: var(--muted); cursor: pointer; transition: background 0.15s, color 0.15s;
}
.mode-btn svg { width: 15px; height: 15px; }
.mode-btn small { font-size: 10px; font-weight: 700; letter-spacing: 0.04em; padding: 1px 5px; border-radius: 99px; border: 1px solid currentColor; opacity: 0.7; }
.mode-btn.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
.mode-btn[data-search-mode="smart"].on { color: var(--accent); }
.search-hint { margin: -4px 0 0; font-size: 12.5px; color: var(--muted); }
.filters-sub { display: block; font-size: 12px; font-weight: 400; margin-top: 1px; }
.smart-note {
  display: flex; gap: 8px; align-items: flex-start; margin: 4px 0 6px; padding: 9px 12px; border-radius: 10px; font-size: 13.5px;
  background: color-mix(in srgb, var(--accent) 9%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
}
.smart-note.local { background: var(--surface-2); border-color: var(--line); }
.smart-note svg { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--accent); }
.smart-note p { margin: 0; }
.smart-note p + p { margin-top: 3px; font-size: 12.5px; }
.find-status.thinking .spinner { margin: 0 4px 0 0; }
button.link { font: inherit; color: var(--accent); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }
.picker-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.picker-actions svg { width: 14px; height: 14px; vertical-align: -2px; }
@media (max-width: 640px) { .picker-head { flex-wrap: wrap; } .picker-actions { justify-content: flex-start; } }

/* Home page search demo: which mode is being shown */
.lp-mode-tag {
  flex: none; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 99px; background: var(--surface-2); color: var(--muted); border: 1px solid var(--line);
}
.lp-search-demo[data-mode="smart"] .lp-mode-tag { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.lp-search-demo[data-mode="smart"] .lp-mode-tag::before { content: "✦ "; }

/* Page tools: Reorder and Fill page */
.page-tool { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.page-tool svg { width: 14px; height: 14px; }
.page-tool:disabled { opacity: 0.4; }
@media (max-width: 520px) {
  .page-head { gap: 4px; }
  .page-head .harmony { display: none; }
  .page-tool { padding-inline: 7px; }
}

/* Moving cards: hold, drag, drop on a pocket or the bin */
.spread .pocket:not(.empty) { -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.spread .pocket img { -webkit-user-drag: none; }
.pocket.lifting { transform: scale(1.05); box-shadow: 0 12px 26px rgba(0, 0, 0, 0.5); z-index: 3; transition: transform 0.15s, box-shadow 0.15s; }
.pocket.drag-source { opacity: 0.25; transform: none; }
.pocket.drop { box-shadow: 0 0 0 3px var(--gold), 0 0 18px rgba(231, 169, 15, 0.45); }
.drag-ghost {
  position: fixed; left: 0; top: 0; z-index: 1000; pointer-events: none; margin: 0;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.55); border-radius: 8px; opacity: 0.95; transition: none;
}
.drag-bin {
  position: fixed; left: 50%; top: 14px; z-index: 999; display: flex; align-items: center; gap: 10px;
  padding: 14px 22px; border-radius: 99px; font-weight: 600; font-size: 14px;
  background: #2a2a2d; color: #f2f2f2; border: 2px dashed rgba(255, 255, 255, 0.35);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
  transform: translate(-50%, -160%); opacity: 0; pointer-events: none; transition: transform 0.2s ease, opacity 0.2s ease, background 0.15s;
}
body.dragging-card .drag-bin { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.drag-bin.drop { background: var(--danger); border-color: #fff; transform: translate(-50%, 0) scale(1.08); }
body.dragging-card { user-select: none; -webkit-user-select: none; }

/* Search results without a picture: name and set instead of hiding the card */
.result .tile-name { display: none; }
.result.noimg { display: block; background: linear-gradient(160deg, var(--surface-2), var(--bg-2)); border: 1px solid var(--line); }
.result.noimg img { visibility: hidden; position: absolute; }
.result.noimg .tile-name {
  position: absolute; inset: 0; display: grid; align-content: center; gap: 4px; padding: 8px; text-align: center;
  font-size: 12px; line-height: 1.25; color: var(--text);
}
.result.noimg .tile-name small { color: var(--muted); font-size: 11px; }

/* Card details: close in the top right corner */
.card-detail { position: relative; }
.detail-close { position: absolute; top: 4px; right: 4px; z-index: 2; width: 36px; height: 36px; font-size: 16px; }
.card-detail h2 { padding-right: 40px; }

/* Fill page pop-up: its own filters */
.fill-filters { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--surface-2); }
.fill-filters > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; cursor: pointer; list-style: none; font-weight: 700; }
.fill-filters > summary::-webkit-details-marker { display: none; }
.fill-filters > summary small { flex-basis: 100%; font-weight: 400; font-size: 12px; }
.fill-filters[open] > summary { margin-bottom: 6px; }
.fill-row { margin-top: 8px; }
.fill-row .sl-group { margin: 0 0 6px; font-size: 12px; font-weight: 600; color: var(--muted); }
.fill-filters .btn { margin-top: 10px; }

/* Pages manager */
.pages-btn { display: inline-flex; align-items: center; gap: 6px; }
.pages-btn svg { width: 14px; height: 14px; }
.pm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.pm-page {
  position: relative; display: grid; gap: 8px; padding: 10px; border-radius: 12px; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--line); transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
  -webkit-touch-callout: none; user-select: none; -webkit-user-select: none;
}
.pm-page:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.pm-page.current { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.pm-page.lifting { transform: scale(1.03); box-shadow: 0 12px 26px rgba(0, 0, 0, 0.35); }
.pm-page.drag-source { opacity: 0.3; }
.pm-page.drop-before, .pm-page.drop-after { border-color: var(--gold); }
.pm-page.drop-before::before, .pm-page.drop-after::before {
  content: ""; position: absolute; top: 6px; bottom: 6px; width: 5px; border-radius: 99px; background: var(--gold);
  box-shadow: 0 0 12px rgba(231, 169, 15, 0.6);
}
.pm-page.drop-before::before { left: -10px; }
.pm-page.drop-after::before { right: -10px; }
.pm-grip { flex: 0 0 auto !important; touch-action: none; cursor: grab; padding-inline: 10px; }
.pm-grip:active { cursor: grabbing; }
.grip-ico { vertical-align: -3px; }
.hint .grip-ico { width: 9px; height: 12px; vertical-align: -1px; }
.pm-thumb {
  display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: 3px; padding: 6px; border-radius: 8px;
  background: linear-gradient(150deg, var(--leather), var(--leather-2));
}
.pm-thumb img, .pm-thumb i { display: block; width: 100%; aspect-ratio: 63 / 88; border-radius: 2px; object-fit: cover; background: rgba(255, 255, 255, 0.07); }
.pm-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.pm-meta b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-meta small { color: var(--muted); font-size: 12px; white-space: nowrap; }
.pm-actions { display: flex; gap: 6px; }
.pm-actions .btn { flex: 1; }
.pm-add {
  display: grid; place-content: center; gap: 4px; min-height: 160px; border-radius: 12px; cursor: pointer;
  border: 2px dashed var(--line); background: transparent; color: var(--muted); font: inherit; font-weight: 600;
}
.pm-add span { font-size: 30px; font-weight: 300; line-height: 1; }
.pm-add:hover { border-color: var(--accent); color: var(--accent); }
.pm-ghost { padding: 10px; background: var(--surface-2); border: 1px solid var(--accent); }
body.dragging-page { user-select: none; -webkit-user-select: none; }
@media (max-width: 520px) { .pm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }

/* Placing a card: page, then pocket */
.place-card { width: 34px; aspect-ratio: 63 / 88; border-radius: 4px; object-fit: cover; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); }
.place-page { font: inherit; color: inherit; text-align: left; }
.place-pockets {
  display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 8px; padding: 12px; border-radius: 14px;
  background: linear-gradient(150deg, var(--leather), var(--leather-2)); max-width: calc(var(--cols, 3) * 140px + 24px);
}
.place-pocket {
  aspect-ratio: 63 / 88; padding: 0; border: 0; border-radius: 6px; overflow: hidden; cursor: pointer; position: relative;
  background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); transition: transform 0.12s, box-shadow 0.12s;
}
.place-pocket img { width: 100%; height: 100%; object-fit: cover; opacity: 0.55; }
.place-pocket.empty { display: grid; place-items: center; color: rgba(255, 255, 255, 0.55); font-weight: 600; }
.place-pocket:hover, .place-pocket:focus-visible { transform: scale(1.04); box-shadow: 0 0 0 3px var(--gold); }
.place-pocket:hover img { opacity: 0.85; }
.pm-page, .pm-thumb, .pm-meta { min-width: 0; }
.pm-actions { min-width: 0; }
.pm-actions .btn { min-width: 0; padding-inline: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 520px) { .pm-page { padding: 8px; } .pm-actions { gap: 4px; } .pm-actions .btn { font-size: 12px; } }

/* Card details: English / Japanese toggle under the picture */
.detail-art { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; }
.detail-art .seg { align-self: center; }
.lang-note { margin: 0; text-align: center; line-height: 1.5; }
.search-langs { align-self: flex-start; }

/* Account button in the top bar */
.account-btn img, .account-btn .avatar-letter { width: 26px; height: 26px; border-radius: 50%; display: block; }
.account-btn .avatar-letter { display: grid; place-items: center; background: var(--accent); color: #fff; font-weight: 600; font-size: 13px; }
.account-btn.signed-in { padding: 4px; }

/* Home page gradient demo: each card's main colour as a strip along its bottom edge */
.lp-gcard { position: relative; }
.lp-gcard i { position: absolute; left: 0; right: 0; bottom: 0; height: 7px; box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.35); }

.dialog-actions .copies { align-self: center; font-size: 13px; margin-right: auto; }

/* Desktop: the filter column stays in view and scrolls on its own when its open filters are taller
   than the window (otherwise the lower filters can't be reached until the page ends). */
@media (min-width: 900px) {
  .picker-split > .finder {
    max-height: calc(100vh - 92px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    padding-right: 6px;
  }
}
/* Moving a card: its current pocket is marked and can't be picked */
.place-pocket.from { outline: 2px solid var(--gold); outline-offset: -2px; cursor: default; }
.place-pocket.from img { opacity: 1; }

/* Ads (free users only, js/ads.js) */
/* Hidden until Google actually fills it (AdSense sets data-ad-status on the <ins>), so there are no empty boxes. */
/* Collapsed (but still full width, so Google can size the ad) until an ad actually arrives. */
.ad-box { height: 0; overflow: hidden; margin: 0; padding: 0; border: 0 solid var(--line); border-radius: 12px; background: var(--surface-2); }
.ad-box:has(ins[data-ad-status="filled"]) { height: auto; overflow: visible; margin: 18px 0; padding: 8px 10px 10px; border-width: 1px; min-height: 90px; }
.ad-label { display: block; font-size: 11px; color: var(--muted); margin-bottom: 6px; }
.ad-label a { color: var(--accent); }

/* Page value badge in the page header (Settings → Show prices on cards) */
.page-total { font-weight: 700; font-size: 13px; color: #9be2b0; background: rgba(0,0,0,0.3); padding: 3px 9px; border-radius: 99px; white-space: nowrap; }
.page-total small { font-weight: 500; color: #c8c8cc; }

/* Phones: the page name (and its value) on the first line, the page tools wrapping underneath,
   so the header never makes the page wider than the screen. */
.page { min-width: 0; }
@media (max-width: 640px) {
  .page-head { flex-wrap: wrap; row-gap: 6px; }
  .page-head .page-name { flex: 1 1 60%; width: auto; }
  .page-head .page-tool { flex: 1 1 auto; justify-content: center; font-size: 12px; }
}
@media (max-width: 420px) {
  .page-head .page-tool { padding-inline: 6px; gap: 3px; }
  .page-head .page-tool svg { width: 13px; height: 13px; }
}
/* Phones: card detail buttons as an even two-column grid */
@media (max-width: 640px) {
  .card-detail .dialog-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .card-detail .dialog-actions .btn { width: 100%; justify-content: center; }
  .card-detail .dialog-actions .copies { grid-column: 1 / -1; order: -1; margin: 0; }
  .card-detail .dialog-actions .btn.danger, .card-detail .dialog-actions .btn.primary:only-of-type { grid-column: 1 / -1; }
}

/* "Watch a short video or get Supporter" choice (js/rewarded.js) */
.reward-ask .dialog-body { max-width: 380px; }
.reward-choices { display: grid; gap: 8px; margin-top: 14px; }
.reward-choices .btn { width: 100%; justify-content: center; }

/* Page headers follow the page's own width, not the screen's: in a two-page spread on a
   landscape phone each page is narrow, so its tools wrap under the name the same way. */
.page { container-type: inline-size; container-name: page; }
@container page (max-width: 620px) {
  .page-head { flex-wrap: wrap; row-gap: 6px; }
  .page-head .page-name { flex: 1 1 50%; width: auto; }
  .page-head .page-tool { flex: 1 1 auto; justify-content: center; font-size: 12px; padding-inline: 6px; gap: 4px; }
  .page-head .page-tool svg { width: 13px; height: 13px; }
}
@container page (max-width: 380px) {
  .page-head .harmony { display: none; }
  .page-head .page-tool span { font-size: 11px; }
}
/* Nothing may make the page wider than the screen (that's what made phones zoom out). */
html, body { overflow-x: clip; }

/* Landscape phones: short screens. A slimmer top bar; cards fill the width and the page scrolls. */
@media (orientation: landscape) and (max-height: 520px) {
  .topbar { padding-block: 4px; }
  .brand-mark { width: 32px; height: 32px; }
  .brand-text small { display: none; }
  main { padding-top: 10px; }
  .binder-toolbar { margin-bottom: 8px; }
  .spread { padding: 8px; }
  .page { padding: 4px 8px 8px; }
  .slot-bar { position: static; }
  .dialog.sheet { max-height: 96dvh; }
  .sheet .dialog-body { max-height: 96dvh; }
}
@media (orientation: landscape) and (max-height: 520px) {
  /* One line per page header: tools show as icons (their names are in the tooltips). */
  .page-head { flex-wrap: nowrap; gap: 2px; margin-bottom: 4px; }
  .page-head .page-name { flex: 1 1 auto; width: 0; }
  .page-head .page-tool { flex: 0 0 auto; padding-inline: 7px; }
  .page-head .page-tool span { display: none; }
  .page-head .harmony { display: none; }
}