/* Classic theme — "binder on the playmat".
   Loaded after style.css. Every rule is scoped to body:not(.pixel-theme), so the
   pixel theme never sees it. Borrowed from the gear collectors actually own: a
   padded zip binder in the binder's own colour with a stitched edge, clear
   pocket pages on metal rings, a neoprene playmat on the desk, and a graded-slab
   label for the binder's value. One family (Archivo): expanded width for names
   and numbers, normal width for everything else. */

body:not(.pixel-theme) {
  --mat: #22304d;
  --mat-deep: #151e33;
  --vinyl: #1e222b;
  --vinyl-2: #272c37;
  --vinyl-line: #353c4a;
  --gold: #e8b54a;
  --gold-ink: #1d1505;
  --slab: #eef1f4;
  --slab-red: #c8322b;
  --text: #e8ecf1;
  --muted: #8f99a8;
  --accent: var(--gold);
  --line: var(--vinyl-line);
  --sans: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  color-scheme: dark;
  scrollbar-color: #414958 transparent;
  font-family: var(--sans);
  background: var(--vinyl);
  color: var(--text);
}

/* ---------- Type ---------- */
body:not(.pixel-theme) .brand strong,
body:not(.pixel-theme) .topbar h1,
body:not(.pixel-theme) .binder-total,
body:not(.pixel-theme) .library-head h2 {
  font-stretch: 125%;
  font-weight: 800;
  letter-spacing: -0.01em;
}
body:not(.pixel-theme) .topbar h1 { font-size: 26px; margin: 0; line-height: 1.1; }
body:not(.pixel-theme) .brand strong { font-size: 15px; }
body:not(.pixel-theme) .brand span { color: var(--muted); }
/* The heading already says what it is; tracked-out labels above it were noise. */
body:not(.pixel-theme) .topbar .eyebrow { display: none; }
body:not(.pixel-theme) .library-head .eyebrow {
  letter-spacing: 0; text-transform: none; font-size: 12px; font-weight: 600; color: var(--muted);
}

/* ---------- Chrome: sidebar, header, library all sit on the binder vinyl ---------- */
body:not(.pixel-theme) .sidebar,
body:not(.pixel-theme) .topbar,
body:not(.pixel-theme) .library-panel {
  background: var(--vinyl);
  border-color: var(--vinyl-line);
}
body:not(.pixel-theme) .topbar { border-bottom: 1px solid var(--vinyl-line); }

body:not(.pixel-theme) .primary,
body:not(.pixel-theme) .ghost,
body:not(.pixel-theme) .round,
body:not(.pixel-theme) .danger-soft {
  border-radius: 8px;
  font-weight: 650;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  transition: background .15s ease, border-color .15s ease, transform .1s ease;
}
body:not(.pixel-theme) .primary {
  background: var(--gold);
  color: var(--gold-ink);
  border: 1px solid #f3cd78;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .18);
}
body:not(.pixel-theme) .primary:hover { background: #f0c25e; }
body:not(.pixel-theme) .primary:active,
body:not(.pixel-theme) .ghost:active { transform: translateY(1px); }
body:not(.pixel-theme) .ghost,
body:not(.pixel-theme) .round {
  background: transparent;
  border: 1px solid var(--vinyl-line);
  color: var(--text);
}
body:not(.pixel-theme) .ghost:hover,
body:not(.pixel-theme) .round:hover { background: var(--vinyl-2); border-color: #465063; }
body:not(.pixel-theme) .danger-soft { background: transparent; border: 1px solid #5a2b2f; color: #f0a3a3; }
body:not(.pixel-theme) .danger-soft:hover { background: #2c1a1d; }

/* Header actions: one loud button (Add card), the rest quiet. */
body:not(.pixel-theme) .top-actions { gap: 6px; align-items: center; }
body:not(.pixel-theme) .top-actions .ghost { border-color: transparent; color: #c3cad4; }
body:not(.pixel-theme) .top-actions .ghost:hover { border-color: var(--vinyl-line); color: var(--text); }
body:not(.pixel-theme) .top-actions .primary { margin-left: 4px; padding-inline: 16px; }

/* Lock: a drawn padlock instead of the emoji, gold when the binder is locked. */
body:not(.pixel-theme) .lock-btn .lock-icon { display: none; }
body:not(.pixel-theme) .lock-btn::before {
  content: ''; width: 16px; height: 16px; flex: 0 0 auto; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 7.5-2'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 7.5-2'/%3E%3C/svg%3E") center / contain no-repeat;
}
body:not(.pixel-theme) .lock-btn.is-locked::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E");
}
body:not(.pixel-theme) .top-actions .lock-btn.is-locked { color: var(--gold); border-color: #5c4a22; background: #2a2416; }
body:not(.pixel-theme) .lock-label { font-weight: 600; font-size: inherit; }

/* ---------- Shelf: a slim column of binder spines ---------- */
body:not(.pixel-theme) .app-shell:not(.sidebar-collapsed) { grid-template-columns: 78px minmax(0, 1fr); }
body:not(.pixel-theme) .sidebar { padding: 16px 0 14px; gap: 14px; align-items: center; }
body:not(.pixel-theme) .brand { justify-content: center; }
body:not(.pixel-theme) .brand .brand-text,
body:not(.pixel-theme) .binder-value-card,
body:not(.pixel-theme) .account-row { display: none !important; }
body:not(.pixel-theme) .brand-mark { width: 40px; height: 40px; }

/* Icon-only square buttons on the shelf; the label stays for screen readers. */
body:not(.pixel-theme) #newBinderBtn,
body:not(.pixel-theme) #exportBinderBtn,
body:not(.pixel-theme) #signOutBtn {
  width: 46px; height: 46px; min-width: 0; padding: 0 !important; font-size: 0; flex: none;
  display: flex !important; align-items: center !important; justify-content: center !important;
}
body:not(.pixel-theme) #newBinderBtn .btn-ico,
body:not(.pixel-theme) #exportBinderBtn .btn-ico { width: 20px; height: 20px; margin: 0 !important; display: block !important; flex: none !important; }
body:not(.pixel-theme) #newBinderBtn .btn-text,
body:not(.pixel-theme) #exportBinderBtn .btn-text { display: none !important; }
body:not(.pixel-theme) #signOutBtn::before {
  content: ''; width: 19px; height: 19px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 4h3a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-3M10 17l-5-5 5-5M5 12h11'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 4h3a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-3M10 17l-5-5 5-5M5 12h11'/%3E%3C/svg%3E") center / contain no-repeat;
}
body:not(.pixel-theme) .side-bottom { display: flex; flex-direction: column; align-items: center; gap: 8px; }

body:not(.pixel-theme) .binder-list {
  flex: 1; min-height: 0; width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  overflow-y: auto; padding: 4px 0 8px;
}
/* Each binder is its spine: its own cover colour, a paper label, name reading bottom-to-top. */
body:not(.pixel-theme) .binder-item {
  --spine: #2f3540;
  flex: none;
  width: 44px; height: 132px; padding: 10px 0;
  writing-mode: vertical-rl; transform: rotate(180deg);
  display: flex; align-items: center; justify-content: flex-start;
  border: 0; border-radius: 5px;
  background:
    linear-gradient(90deg, rgba(0,0,0,.28), rgba(255,255,255,.14) 42%, rgba(0,0,0,.22)),
    var(--spine);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.35), 0 3px 8px rgba(0,0,0,.35);
  transition: transform .15s ease, box-shadow .15s ease;
}
body:not(.pixel-theme) .binder-item::before,
body:not(.pixel-theme) .binder-item .binder-dot { display: none; }
body:not(.pixel-theme) .binder-item > span:last-child {
  max-height: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 8px 3px; border-radius: 2px;
  background: rgba(246, 247, 249, .9); color: #1a1d23;
  font-size: 11px; font-weight: 750; font-stretch: 110%;
}
body:not(.pixel-theme) .binder-item:hover { background: linear-gradient(90deg, rgba(0,0,0,.28), rgba(255,255,255,.14) 42%, rgba(0,0,0,.22)), var(--spine); transform: rotate(180deg) translateX(-3px); }
/* The open binder is pulled off the shelf. */
body:not(.pixel-theme) .binder-item.active {
  transform: rotate(180deg) translateX(-7px);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.35), -2px 0 0 var(--gold), 0 6px 14px rgba(0,0,0,.45);
}
body:not(.pixel-theme) .binder-item[data-color="black"] { --spine: #2f3540; }
body:not(.pixel-theme) .binder-item[data-color="white"] { --spine: #dfe4e8; }
body:not(.pixel-theme) .binder-item[data-color="navy"] { --spine: #24527a; }
body:not(.pixel-theme) .binder-item[data-color="burgundy"] { --spine: #6b2b38; }
body:not(.pixel-theme) .binder-item[data-color="forest"] { --spine: #306444; }
body:not(.pixel-theme) .binder-item[data-color="royal"] { --spine: #3975c5; }
body:not(.pixel-theme) .binder-item[data-color="purple"] { --spine: #704c8b; }
body:not(.pixel-theme) .binder-item[data-color="tan"] { --spine: #a07a51; }
body:not(.pixel-theme) .binder-item[data-color="orange"] { --spine: #df741d; }

/* ---------- Header: title and value on one line, quiet icon actions ---------- */
body:not(.pixel-theme) .topbar-left > div { display: flex; align-items: baseline; gap: 16px; min-width: 0; }
body:not(.pixel-theme) .header-total {
  padding: 0; border: 0; background: none; cursor: pointer;
  color: #aab3bf; font-size: 22px; font-weight: 600; font-stretch: 112%;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  text-decoration: underline dotted transparent; text-underline-offset: 5px;
  transition: color .15s ease, text-decoration-color .15s ease;
}
body:not(.pixel-theme) .header-total:hover { color: var(--text); text-decoration-color: currentColor; }
body:not(.pixel-theme) #editBinderBtn,
body:not(.pixel-theme) #libraryToggleBtn { font-size: 0; width: 40px; height: 40px; padding: 0; }
body:not(.pixel-theme) #editBinderBtn .btn-ico { width: 19px; height: 19px; }
body:not(.pixel-theme) .library-toggle-label,
body:not(.pixel-theme) .lock-label { display: none; }
body:not(.pixel-theme) .lock-btn { width: 40px; height: 40px; padding: 0; }
body:not(.pixel-theme) #editBinderBtn::after,
body:not(.pixel-theme) #libraryToggleBtn::after { content: none; }

/* ---------- Stage: the playmat ---------- */
/* No SVG-noise texture here: feTurbulence re-rasterises on every repaint and
   froze the renderer. Plain gradient only. */
body:not(.pixel-theme) .binder-stage {
  background: radial-gradient(120% 90% at 50% 35%, var(--mat) 0%, var(--mat-deep) 100%);
}

/* ---------- The binder: padded cover, stitched edge, rings, clear pockets ---------- */
body:not(.pixel-theme) .spread:not(.cover-mode) {
  --cover: #2c323c;
  --stitch: rgba(232, 181, 74, .55);
  grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr);
  padding: 22px;
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), transparent 30%, rgba(0,0,0,.16)),
    var(--cover);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -3px 0 rgba(0,0,0,.25),
    0 2px 0 rgba(0,0,0,.35),
    0 28px 60px rgba(0,0,0,.5);
}
body:not(.pixel-theme) .spread:not(.cover-mode)::before {
  content: ''; position: absolute; inset: 9px; border-radius: 14px; pointer-events: none;
  border: 2px dashed var(--stitch);
}
body:not(.pixel-theme) .spread[data-binder-color="white"]    { --cover: #e4e8eb; --stitch: rgba(60, 70, 82, .35); }
body:not(.pixel-theme) .spread[data-binder-color="navy"]     { --cover: #24527a; --stitch: rgba(255, 255, 255, .35); }
body:not(.pixel-theme) .spread[data-binder-color="burgundy"] { --cover: #6b2b38; --stitch: rgba(255, 214, 190, .4); }
body:not(.pixel-theme) .spread[data-binder-color="forest"]   { --cover: #306444; --stitch: rgba(236, 222, 170, .45); }
body:not(.pixel-theme) .spread[data-binder-color="royal"]    { --cover: #3975c5; --stitch: rgba(255, 255, 255, .45); }
body:not(.pixel-theme) .spread[data-binder-color="purple"]   { --cover: #704c8b; --stitch: rgba(255, 220, 250, .4); }
body:not(.pixel-theme) .spread[data-binder-color="tan"]      { --cover: #a07a51; --stitch: rgba(60, 38, 18, .45); }
body:not(.pixel-theme) .spread[data-binder-color="orange"]   { --cover: #df741d; --stitch: rgba(60, 25, 0, .45); }

body:not(.pixel-theme) .page-caption {
  color: rgba(255, 255, 255, .5); font-size: 11px; font-weight: 600; margin: 0 0 7px;
}
body:not(.pixel-theme) .spread[data-binder-color="white"] .page-caption,
body:not(.pixel-theme) .spread[data-binder-color="tan"] .page-caption,
body:not(.pixel-theme) .spread[data-binder-color="orange"] .page-caption { color: rgba(0, 0, 0, .5); }

/* Pages: black card-stock inserts. */
body:not(.pixel-theme) .spread:not(.cover-mode) .binder-page {
  background: linear-gradient(180deg, #121419, #0c0e11) !important;
  border: 0;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 1px 0 rgba(255,255,255,.08), 0 6px 14px rgba(0,0,0,.35);
  padding: 12px;
  gap: 9px;
}

/* Spread 0: Inside cover on left page stretches to full binder spread height */
body:not(.pixel-theme) .spread.has-inside-cover {
  align-items: stretch !important;
}
body:not(.pixel-theme) .spread.has-inside-cover .page-wrap:first-child {
  height: 100% !important;
  align-self: stretch !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
}
body:not(.pixel-theme) .spread.has-inside-cover .page-wrap:first-child::before {
  display: none !important;
}
body:not(.pixel-theme) .spread:not(.cover-mode) #leftPage.inside-cover-page {
  height: 100% !important;
  flex: 1 1 0% !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  gap: 0 !important;
}
body:not(.pixel-theme) .spread.has-inside-cover .inside-cover-container {
  height: 100% !important;
  flex: 1 1 0% !important;
  min-height: 0 !important;
  border-radius: 6px;
}

/* Spine: channel plus three D-rings. */
body:not(.pixel-theme) .spread:not(.cover-mode) .spine {
  --ring: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='14'%3E%3Cdefs%3E%3ClinearGradient id='g' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23f4f6f9'/%3E%3Cstop offset='.55' stop-color='%238c95a1'/%3E%3Cstop offset='1' stop-color='%23c7ced6'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='1' y='1' width='32' height='12' rx='6' fill='url(%23g)' stroke='%23000' stroke-opacity='.35'/%3E%3C/svg%3E");
  min-height: 0;
  border-radius: 6px;
  background:
    var(--ring) center 16% / 34px 14px no-repeat,
    var(--ring) center 50% / 34px 14px no-repeat,
    var(--ring) center 84% / 34px 14px no-repeat,
    linear-gradient(90deg, rgba(0,0,0,.42), rgba(255,255,255,.07) 50%, rgba(0,0,0,.42));
  box-shadow: inset 0 0 10px rgba(0, 0, 0, .45);
}

/* Pockets: clear plastic. Empty ones nearly vanish; the top lip catches light. */
body:not(.pixel-theme) .spread .slot {
  border: 0 !important;
  border-radius: 5px;
  background: rgba(255,255,255,.025) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.055) !important;
}
body:not(.pixel-theme) .slot::after {
  content: ''; display: block; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  animation: none; text-shadow: none; letter-spacing: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.13) 0 1.5px, transparent 1.5px);
}
/* Sleeve gloss only where there's a card behind the plastic. */
body:not(.pixel-theme) .slot:not(.empty):not(.drag-source)::after {
  background:
    linear-gradient(180deg, rgba(255,255,255,.2) 0 1.5px, transparent 1.5px),
    linear-gradient(118deg, transparent 38%, rgba(255,255,255,.09) 47%, transparent 56%);
}
body:not(.pixel-theme) .slot.empty::before { content: '+'; font-size: 22px; font-weight: 300; color: rgba(255,255,255,.12); transition: color .15s ease; }
body:not(.pixel-theme) .slot.empty:hover::before { color: rgba(255,255,255,.4); }
body:not(.pixel-theme) .spread .slot:not(.empty) { box-shadow: 0 3px 8px rgba(0,0,0,.45) !important; }
body:not(.pixel-theme) .slot:not(.empty):hover { transform: translateY(-2px); }

/* Card art placeholder: a woven card-back until the image arrives. */
body:not(.pixel-theme) .slot img,
body:not(.pixel-theme) .library-card img {
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.035) 0 6px, transparent 6px 12px),
    linear-gradient(180deg, #2a3144, #1c2130);
}

/* ---------- Page navigation: a tab under the binder, not floating over it ---------- */
body:not(.pixel-theme) .binder-nav-dock {
  margin: 18px auto 0;
  background: var(--vinyl);
  border: 1px solid var(--vinyl-line);
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .3);
  backdrop-filter: none;
}
body:not(.pixel-theme) .binder-nav-dock .round { width: 36px; height: 36px; border-radius: 8px; }
body:not(.pixel-theme) #pageLabel { font-weight: 650; font-variant-numeric: tabular-nums; color: var(--text); }
body:not(.pixel-theme) .jump-nav span { color: var(--muted); }
body:not(.pixel-theme) .jump-nav input { background: var(--mat-deep); border: 1px solid var(--vinyl-line); border-radius: 7px; color: var(--text); }

/* ---------- Library ---------- */
body:not(.pixel-theme) .library-panel { font-stretch: 88%; }
body:not(.pixel-theme) .search {
  background: var(--vinyl-2); border: 1px solid var(--vinyl-line); border-radius: 8px; color: var(--text);
}
body:not(.pixel-theme) .search:focus { border-color: var(--gold); }
body:not(.pixel-theme) .library-quick-filter {
  background: transparent; border: 1px solid var(--vinyl-line); border-radius: 999px; color: #b9c1cc; font-weight: 600;
}
body:not(.pixel-theme) .library-quick-filter.active { background: #2e2716; border-color: #6e5a2a; color: var(--gold); }
body:not(.pixel-theme) .library-card {
  background: var(--vinyl-2); border: 1px solid transparent; border-radius: 7px;
}
body:not(.pixel-theme) .library-card:hover { border-color: #4a5366; }

/* ---------- Focus ---------- */
body:not(.pixel-theme) :where(button, .binder-item, .slot, .library-card, input, select):focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  body:not(.pixel-theme) .slot,
  body:not(.pixel-theme) .primary,
  body:not(.pixel-theme) .ghost { transition: none; }
  body:not(.pixel-theme) .slot:not(.empty):hover { transform: none; }
}

/* Library set/era rows (both themes): the side-by-side layout squeezed the set name to ~23px
   at the library's default width. Stack name over code + count instead. */
body:not(.pixel-theme) .library-panel :where(.library-set-name, .library-era-title, .library-set-folder-head, .library-era-head) { font-family: var(--sans); }
body .library-set-folder-head {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) 14px;
  grid-template-areas: "logo title caret" "logo meta caret";
  column-gap: 16px;
  row-gap: 2px;
  align-items: center;
  text-align: left;
}
body .library-set-logo-frame { grid-area: logo; width: 78px; max-width: 78px; flex: none; display: flex; align-items: center; justify-content: center; }
body .library-set-title-wrap { grid-area: title; min-width: 0; text-align: left; align-self: end; }
body .library-set-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 750; }
body .library-set-meta-block { grid-area: meta; display: flex; align-items: baseline; gap: 8px; text-align: left; align-self: start; }
body .library-set-folder-caret { grid-area: caret; }
body .library-era-head {
  grid-template-columns: minmax(0, 1fr) 24px;
  grid-template-areas: "title caret" "meta caret";
  row-gap: 2px;
}
body .library-era-head > :nth-child(1) { grid-area: title; min-width: 0; }
body .library-era-head > :nth-child(2) { grid-area: meta; justify-self: start; }
body .library-era-head > .library-era-caret { grid-area: caret; }

/* Fit the whole spread (plus page nav) in the viewport instead of letting the
   nav float over the bottom row. ponytail: ratio tuned for square grids (3x3,
   4x4); non-square binders just fit a little loose. */
body:not(.pixel-theme) .spread:not(.cover-mode) {
  max-width: min(1120px, calc((100dvh - 250px) * 1.44));
  margin-inline: auto;
}
body .library-set-title-wrap { display: block; }
body .library-set-meta-block { flex-direction: row !important; }
body:not(.pixel-theme) .library-set-code-lg { font-size: 13px; }
body:not(.pixel-theme) .library-set-count-sm { color: var(--muted); }
body .library-era-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
body .library-era-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body .library-era-tag,
body .library-era-icon { flex: none; }
/* Pages size to their pockets, not a fixed min-height with dead space below. */
body:not(.pixel-theme) .spread:not(.cover-mode) .binder-page,
body:not(.pixel-theme) .spread:not(.cover-mode) .spine { min-height: 0 !important; }

/* ---------- Library as a flat list, not a stack of boxes ---------- */
body:not(.pixel-theme) .library-panel { box-shadow: inset 10px 0 18px -14px rgba(0, 0, 0, .7); }
body:not(.pixel-theme) .library-era-group {
  border: 0 !important; background: none !important; box-shadow: none !important;
  border-radius: 0 !important; margin: 0 0 4px !important; padding: 0 !important;
}
body:not(.pixel-theme) .library-era-head {
  padding: 14px 4px 8px !important; background: none !important;
  border: 0 !important; border-bottom: 1px solid var(--vinyl-line) !important; border-radius: 0 !important;
}
body:not(.pixel-theme) .library-set-folder {
  border: 0 !important; background: none !important; box-shadow: none !important;
  border-radius: 6px !important; margin: 0 !important;
}
body:not(.pixel-theme) .library-set-folder + .library-set-folder { border-top: 1px solid rgba(255, 255, 255, .05) !important; }
body:not(.pixel-theme) .library-set-folder-head { padding: 9px 6px !important; border-radius: 6px; background: none !important; }
body:not(.pixel-theme) .library-set-folder-head:hover { background: var(--vinyl-2) !important; }
body:not(.pixel-theme) .library-set-toolbar { background: rgba(0, 0, 0, .22); border-top: 1px solid var(--vinyl-line); border-bottom: 1px solid var(--vinyl-line); }
body:not(.pixel-theme) .library-set-search-input { background: var(--vinyl-2); border-color: var(--vinyl-line); color: var(--text); font-family: var(--sans); }
body:not(.pixel-theme) .library-set-search-input:focus { border-color: var(--gold); background: var(--vinyl); }
body:not(.pixel-theme) .library-set-sort-btn { background: var(--vinyl-2); border-color: var(--vinyl-line); color: var(--muted); font-family: var(--sans); }
body:not(.pixel-theme) .library-set-sort-btn:hover { background: var(--vinyl); color: var(--text); }
body:not(.pixel-theme) .library-set-sort-btn.is-reversed { background: rgba(229, 169, 60, .16); border-color: var(--gold); color: var(--gold); }
body:not(.pixel-theme) .library-era-group.is-my-cards { background: rgba(35, 28, 14, .45) !important; border: 1px solid rgba(229, 169, 60, .3) !important; border-radius: 8px !important; margin-bottom: 10px !important; }
body:not(.pixel-theme) .library-era-group.is-my-cards:hover,
body:not(.pixel-theme) .library-era-group.is-my-cards.open { border-color: rgba(229, 169, 60, .55) !important; box-shadow: 0 4px 16px rgba(0, 0, 0, .4) !important; }
body:not(.pixel-theme) .library-era-group.is-my-cards .library-era-text { color: var(--gold) !important; }
body:not(.pixel-theme) .library-era-group.is-my-cards .library-set-folder-grid { padding: 10px 8px !important; background: rgba(0, 0, 0, .2) !important; }

/* The shelf is already slim; its separate hide toggle only added a second ☰. */
body:not(.pixel-theme) #sidebarToggleBtn { display: none; }
body:not(.pixel-theme) .binder-list { scrollbar-width: none; }
/* Library toggle gets a "side panel" glyph so it isn't another ☰. */
body:not(.pixel-theme) #libraryToggleBtn svg { display: none; }
body:not(.pixel-theme) #libraryToggleBtn::before {
  content: ''; width: 19px; height: 19px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='M15 4v16'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='M15 4v16'/%3E%3C/svg%3E") center / contain no-repeat;
}
body:not(.pixel-theme) .library-set-meta-block { justify-self: start; justify-content: flex-start; margin: 0 !important; padding: 0 !important; }
body:not(.pixel-theme) .library-set-meta-block > * { margin: 0 !important; }

/* ======================= Pass 3: bigger binder, fewer artefacts ======================= */
body:not(.pixel-theme) {
  --ease: cubic-bezier(.32, .72, 0, 1);
  /* Shadows tinted to the navy stage instead of flat black. */
  --shadow-near: 0 2px 6px rgba(6, 12, 28, .45);
  --shadow-far: 0 30px 60px -18px rgba(6, 12, 28, .75);
}
body:not(.pixel-theme) :where(.primary, .ghost, .round, .binder-item, .slot, .library-set-folder-head, .library-quick-filter, .header-total) {
  transition-timing-function: var(--ease) !important;
  transition-duration: .25s !important;
}

/* Header: shorter, no rule line — the colour change is the edge. */
body:not(.pixel-theme) .topbar { height: 74px; padding-block: 12px !important; min-height: 0 !important; border-bottom: 0 !important; }

/* Binder: sized from the stage height so it fills the available space. Captions go —
   the page nav already says which pages are open. */
body:not(.pixel-theme) .binder-stage { padding: 6px 10px !important; display: flex; flex-direction: column; align-items: center; justify-content: center; }
body:not(.pixel-theme) .spread:not(.cover-mode) .page-caption { display: none; }
body:not(.pixel-theme) .spread:not(.cover-mode) {
  width: 100%;
  max-width: min(1280px, calc((100cqh - 58px) * 1.5));
  padding: 18px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -3px 0 rgba(0,0,0,.25), var(--shadow-near), var(--shadow-far);
  transition: padding .24s ease;
}
body:not(.pixel-theme) .spread:not(.cover-mode)::before { inset: 7px; }

/* When the library is closed, the binder expands to take up the full screen/stage comfortably */
body:not(.pixel-theme) .app-shell.library-collapsed,
body:not(.pixel-theme) .app-shell:has(.library-collapsed) {
  width: min(1800px, calc(100% - 20px)) !important;
  max-width: none !important;
  margin: 0 auto !important;
}

body:not(.pixel-theme) .workspace.library-collapsed,
body:not(.pixel-theme) .main.library-collapsed {
  grid-template-columns: minmax(0, 1fr) 0px 0px !important;
}

body:not(.pixel-theme) .workspace.library-collapsed .spread:not(.cover-mode),
body:not(.pixel-theme) .main.library-collapsed .spread:not(.cover-mode),
body:not(.pixel-theme) .library-collapsed .spread:not(.cover-mode) {
  max-width: min(calc(100% - 40px), calc((100cqh - 58px) * 1.48), 1360px) !important;
  max-height: calc(100cqh - 58px) !important;
  padding: clamp(14px, 1.4vw, 20px) !important;
}

/* 4x3 Big binder (wider 8-column spread) */
body:not(.pixel-theme) .workspace.library-collapsed .spread:not(.cover-mode)[data-binder-cols="4"][data-binder-rows="3"],
body:not(.pixel-theme) .main.library-collapsed .spread:not(.cover-mode)[data-binder-cols="4"][data-binder-rows="3"],
body:not(.pixel-theme) .library-collapsed .spread:not(.cover-mode)[data-binder-cols="4"][data-binder-rows="3"],
body:not(.pixel-theme) .workspace.library-collapsed .spread:not(.cover-mode)[data-binder-cols="4"]:not([data-binder-rows="4"]),
body:not(.pixel-theme) .main.library-collapsed .spread:not(.cover-mode)[data-binder-cols="4"]:not([data-binder-rows="4"]),
body:not(.pixel-theme) .library-collapsed .spread:not(.cover-mode)[data-binder-cols="4"]:not([data-binder-rows="4"]) {
  max-width: min(calc(100% - 40px), calc((100cqh - 58px) * 1.82), 1500px) !important;
  max-height: calc(100cqh - 58px) !important;
}

/* 4x4 XXL binder */
body:not(.pixel-theme) .workspace.library-collapsed .spread:not(.cover-mode)[data-binder-cols="4"][data-binder-rows="4"],
body:not(.pixel-theme) .main.library-collapsed .spread:not(.cover-mode)[data-binder-cols="4"][data-binder-rows="4"],
body:not(.pixel-theme) .library-collapsed .spread:not(.cover-mode)[data-binder-cols="4"][data-binder-rows="4"] {
  max-width: min(calc(100% - 40px), calc((100cqh - 58px) * 1.48), 1400px) !important;
  max-height: calc(100cqh - 58px) !important;
}

/* Cover mode (Page 0 cover / leftPage === -1) expands proportionally */
body:not(.pixel-theme) .workspace.library-collapsed .spread.cover-mode .page-wrap:first-child,
body:not(.pixel-theme) .main.library-collapsed .spread.cover-mode .page-wrap:first-child,
body:not(.pixel-theme) .library-collapsed .spread.cover-mode .page-wrap:first-child {
  width: min(540px, 80vw, calc((100dvh - 180px) * .72)) !important;
}

/* When sidebar is ALSO collapsed (true full screen view) */
body:not(.pixel-theme) .app-shell.sidebar-collapsed.library-collapsed,
body:not(.pixel-theme) .app-shell.sidebar-collapsed:has(.library-collapsed) {
  width: calc(100% - 16px) !important;
  margin: 0 auto !important;
}
body:not(.pixel-theme) .app-shell.sidebar-collapsed.library-collapsed .spread:not(.cover-mode),
body:not(.pixel-theme) .app-shell.sidebar-collapsed .library-collapsed .spread:not(.cover-mode) {
  max-width: min(calc(100% - 30px), calc((100cqh - 58px) * 1.5), 1440px) !important;
  max-height: calc(100cqh - 58px) !important;
}
body:not(.pixel-theme) .app-shell.sidebar-collapsed.library-collapsed .spread:not(.cover-mode)[data-binder-cols="4"][data-binder-rows="3"],
body:not(.pixel-theme) .app-shell.sidebar-collapsed .library-collapsed .spread:not(.cover-mode)[data-binder-cols="4"][data-binder-rows="3"],
body:not(.pixel-theme) .app-shell.sidebar-collapsed.library-collapsed .spread:not(.cover-mode)[data-binder-cols="4"]:not([data-binder-rows="4"]),
body:not(.pixel-theme) .app-shell.sidebar-collapsed .library-collapsed .spread:not(.cover-mode)[data-binder-cols="4"]:not([data-binder-rows="4"]) {
  max-width: min(calc(100% - 30px), calc((100cqh - 58px) * 1.86), 1580px) !important;
  max-height: calc(100cqh - 58px) !important;
}

/* Enlarge navigation controls and text when library is collapsed */
body:not(.pixel-theme) .app-shell.library-collapsed .binder-nav-dock,
body:not(.pixel-theme) .workspace.library-collapsed ~ .binder-nav-dock,
body:not(.pixel-theme) .library-collapsed .binder-nav-dock {
  gap: 22px !important;
  margin-top: 8px !important;
}
body:not(.pixel-theme) .app-shell.library-collapsed .binder-nav-dock .round,
body:not(.pixel-theme) .workspace.library-collapsed ~ .binder-nav-dock .round,
body:not(.pixel-theme) .library-collapsed .binder-nav-dock .round {
  width: 42px !important;
  height: 42px !important;
  font-size: 22px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
body:not(.pixel-theme) .app-shell.library-collapsed .binder-nav-dock .round:hover:not(:disabled),
body:not(.pixel-theme) .workspace.library-collapsed ~ .binder-nav-dock .round:hover:not(:disabled),
body:not(.pixel-theme) .library-collapsed .binder-nav-dock .round:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.14) !important;
  color: #fff !important;
  transform: translateY(-2px) scale(1.08) !important;
}
body:not(.pixel-theme) .app-shell.library-collapsed .binder-nav-dock #pageLabel,
body:not(.pixel-theme) .workspace.library-collapsed ~ .binder-nav-dock #pageLabel,
body:not(.pixel-theme) .library-collapsed .binder-nav-dock #pageLabel {
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
}
body:not(.pixel-theme) .app-shell.library-collapsed #jumpPage,
body:not(.pixel-theme) .library-collapsed #jumpPage {
  font-size: 13px !important;
  padding: 5px 8px !important;
  width: 58px !important;
}
body:not(.pixel-theme) .app-shell.library-collapsed #jumpBtn,
body:not(.pixel-theme) .library-collapsed #jumpBtn {
  font-size: 12px !important;
  padding: 5px 10px !important;
}

/* Page nav: plain controls under the binder, no floating box. */
body:not(.pixel-theme) .binder-nav-dock {
  background: none !important; border: 0 !important; box-shadow: none !important;
  margin-top: 6px !important; padding: 0 !important; min-width: 0 !important; gap: 18px !important;
}
body:not(.pixel-theme) .binder-nav-dock .round { border-color: transparent; color: #aab3bf; width: 34px; height: 34px; font-size: 18px; }
body:not(.pixel-theme) .binder-nav-dock .round:hover { background: rgba(255,255,255,.06); color: var(--text); }
body:not(.pixel-theme) .binder-nav-dock .dock-divider { display: none; }
body:not(.pixel-theme) #pageLabel { min-width: 0 !important; font-size: 14px; }
body:not(.pixel-theme) .jump-nav input { width: 46px !important; background: transparent !important; border: 0 !important; border-bottom: 1px solid #3d465a !important; border-radius: 0 !important; padding: 4px 2px !important; }
body:not(.pixel-theme) .jump-nav .ghost { border: 0; color: #aab3bf; padding: 6px 8px; }

/* Library head: the heading says what it is; the count is plain text. */
body:not(.pixel-theme) .library-head .eyebrow { display: none; }
body:not(.pixel-theme) .library-head .pill { background: none; border: 0; padding: 0; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }

/* One accent (gold) in the whole UI: eras and set codes go neutral, no emoji. */
body:not(.pixel-theme) .library-era-text { color: var(--text) !important; font-stretch: 112%; font-weight: 750; }
body:not(.pixel-theme) .library-era-icon { display: none; }
body:not(.pixel-theme) .library-era-tag { background: none !important; border: 0 !important; color: var(--muted) !important; padding: 0 !important; font-size: 11px; font-weight: 600; }
body:not(.pixel-theme) .library-era-head small { color: var(--muted) !important; }
body:not(.pixel-theme) .library-set-code-lg { color: #c9d0da !important; font-weight: 700; letter-spacing: .02em; }

/* Game filters as text tabs, not a row of bordered pills. */
body:not(.pixel-theme) .library-quick-filters { gap: 16px !important; border-bottom: 1px solid var(--vinyl-line); padding-bottom: 0; }
body:not(.pixel-theme) .library-quick-filter {
  background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  padding: 8px 0 !important; color: var(--muted) !important; font-size: 13px; flex: none !important;
  border-bottom: 2px solid transparent !important; margin-bottom: -1px;
}
body:not(.pixel-theme) .library-quick-filter:hover { color: var(--text) !important; }
body:not(.pixel-theme) .library-quick-filter.active { color: var(--text) !important; border-bottom-color: var(--gold) !important; }
body:not(.pixel-theme) .library-quick-filter.active::after,
body:not(.pixel-theme) .library-quick-filter.active::before { display: none !important; }

/* Search: a filled field, no outline box. */
body:not(.pixel-theme) .search { border-color: transparent !important; background: #2a303c !important; }
body:not(.pixel-theme) .search:focus { border-color: var(--gold) !important; }
body:not(.pixel-theme) .library-sort-button { background: transparent !important; border-color: transparent !important; }
body:not(.pixel-theme) .library-sort-button:hover { background: var(--vinyl-2) !important; }

/* Quiet buttons lose their 1px grey outline; hover gives the feedback. */
body:not(.pixel-theme) .ghost, body:not(.pixel-theme) .round { border-color: transparent; }
body:not(.pixel-theme) .primary { box-shadow: inset 0 -2px 0 rgba(0,0,0,.18), 0 4px 14px -6px rgba(232, 181, 74, .55); }
body:not(.pixel-theme) .primary:active, body:not(.pixel-theme) .ghost:active, body:not(.pixel-theme) .round:active { transform: scale(.97); }
body:not(.pixel-theme) .binder-nav-dock .page-nav,
body:not(.pixel-theme) .binder-nav-dock .jump-nav { background: none !important; border: 0 !important; box-shadow: none !important; }

/* ---------- Spines v2: stitched leather, name debossed (no paper label) ---------- */
body:not(.pixel-theme) .binder-item {
  --stitch: rgba(232, 181, 74, .6);
  --ink: rgba(255, 255, 255, .82);
  --deboss: 0 -1px 0 rgba(0, 0, 0, .55), 0 1px 0 rgba(255, 255, 255, .14);
  position: relative;
  width: 46px; height: 136px; padding: 14px 0; border-radius: 6px;
  justify-content: center;
  background:
    /* padded: light across the middle, rolling off at both edges */
    linear-gradient(90deg, rgba(0,0,0,.34) 0%, rgba(255,255,255,.1) 38%, rgba(255,255,255,.04) 62%, rgba(0,0,0,.3) 100%),
    /* faint leather grain */
    repeating-linear-gradient(115deg, rgba(255,255,255,.012) 0 2px, rgba(0,0,0,.018) 2px 4px),
    var(--spine);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.12), 0 4px 10px rgba(6,12,28,.5);
}
body:not(.pixel-theme) .binder-item:hover {
  background:
    linear-gradient(90deg, rgba(0,0,0,.34) 0%, rgba(255,255,255,.1) 38%, rgba(255,255,255,.04) 62%, rgba(0,0,0,.3) 100%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.012) 0 2px, rgba(0,0,0,.018) 2px 4px),
    var(--spine);
}
body:not(.pixel-theme) .binder-item::after {
  content: ''; position: absolute; inset: 4px; border-radius: 3px; pointer-events: none;
  border: 1.5px dashed var(--stitch);
}
body:not(.pixel-theme) .binder-item > span:last-child {
  background: none; padding: 0; border-radius: 0;
  color: var(--ink); text-shadow: var(--deboss);
  font-size: 11.5px; font-weight: 700; font-stretch: 112%; letter-spacing: .04em;
  max-height: calc(100% - 4px);
}
/* Open binder: pulled off the shelf, gold thread. */
body:not(.pixel-theme) .binder-item.active { --stitch: #f0c35e; box-shadow: inset 0 0 0 1px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.12), 0 8px 18px rgba(6,12,28,.6); }
/* Thread and lettering per cover colour, matching the open binder's stitching. */
body:not(.pixel-theme) .binder-item[data-color="navy"],
body:not(.pixel-theme) .binder-item[data-color="royal"]    { --stitch: rgba(255, 255, 255, .42); }
body:not(.pixel-theme) .binder-item[data-color="burgundy"],
body:not(.pixel-theme) .binder-item[data-color="purple"]   { --stitch: rgba(255, 214, 200, .45); }
body:not(.pixel-theme) .binder-item[data-color="forest"]   { --stitch: rgba(236, 222, 170, .5); }
body:not(.pixel-theme) .binder-item[data-color="white"],
body:not(.pixel-theme) .binder-item[data-color="tan"],
body:not(.pixel-theme) .binder-item[data-color="orange"] {
  --stitch: rgba(40, 28, 16, .45); --ink: rgba(20, 16, 12, .78);
  --deboss: 0 1px 0 rgba(255, 255, 255, .35), 0 -1px 0 rgba(0, 0, 0, .18);
}
body:not(.pixel-theme) .binder-item.active[data-color] { --stitch: #f0c35e; }