/* ═══════════════════════════════════════════════════════════════════════
   Binders (2026-10-07): the bot's /binder, on the site — closed covers on a profile shelf, one binder opened on its own page,
   and the editor on the dashboard. The covers copy the bot's renderer (src/ui/binderbookart.js): leatherette in nine colours,
   a zip round three sides, a stitched spine, a card window or a foil emblem, the name stamped in foil.
   ═══════════════════════════════════════════════════════════════════════ */
.bnd { --base:#17171c; --hi:#2a2a32; --tape:#0e0e12; --tooth:#a7adb4; --tooth2:#565c63; --stitch:#8e8e9a;
  position:relative; aspect-ratio: 300 / 372; width:100%; border-radius:14px 18px 18px 14px; isolation:isolate; container-type:inline-size;
  background:
    radial-gradient(120% 80% at 30% 0%, color-mix(in srgb, var(--hi) 85%, transparent), transparent 60%),
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.05) 50%, transparent 51%) 0 0 / 5px 5px,
    radial-gradient(1px 1px at 70% 60%, rgba(0,0,0,.18) 50%, transparent 51%) 0 0 / 4px 4px,
    var(--base);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -2px 0 rgba(0,0,0,.35), 0 18px 34px rgba(0,0,0,.55), 0 4px 10px rgba(0,0,0,.4);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.bnd.c-black  { --base:#17171c; --hi:#2a2a32; --tape:#0e0e12; --tooth:#a7adb4; --tooth2:#565c63; --stitch:#8e8e9a; }
.bnd.c-red    { --base:#7e1d1d; --hi:#a23434; --tape:#2a0a0a; --tooth:#b89a5e; --tooth2:#5e4620; --stitch:#e2b088; }
.bnd.c-orange { --base:#b0521c; --hi:#d2713a; --tape:#3e1806; --tooth:#b89a5e; --tooth2:#5e4620; --stitch:#f4c8a4; }
.bnd.c-pink   { --base:#a63e73; --hi:#c85e93; --tape:#3e1027; --tooth:#e8c6d6; --tooth2:#8e6276; --stitch:#f6cfe0; }
.bnd.c-purple { --base:#3b2266; --hi:#55348e; --tape:#150a24; --tooth:#a7adb4; --tooth2:#565c63; --stitch:#cdb8f0; }
.bnd.c-navy   { --base:#1b2550; --hi:#2d3b78; --tape:#0a1026; --tooth:#a7adb4; --tooth2:#565c63; --stitch:#a9b8ec; }
.bnd.c-teal   { --base:#145a60; --hi:#217a82; --tape:#061e21; --tooth:#a7adb4; --tooth2:#565c63; --stitch:#bfe6e6; }
.bnd.c-green  { --base:#1e4b33; --hi:#2e6b49; --tape:#0a1c12; --tooth:#b89a5e; --tooth2:#5e4620; --stitch:#cfe3c0; }
.bnd.c-white  { --base:#ddd7cb; --hi:#f7f3ec; --tape:#8a8476; --tooth:#b89a5e; --tooth2:#5e4620; --stitch:#9e9584; }
/* the zip: tape round the top, the open edge and the bottom, teeth down its middle, a pull at the top corner */
.bnd .zip { position:absolute; inset:0 0 0 9%; border-radius:0 18px 18px 0; pointer-events:none; z-index:2;
  border:7px solid var(--tape); border-left:0; }
.bnd .zip::before { content:''; position:absolute; inset:-5px -5px -5px auto; width:3px; border-radius:2px;
  background:repeating-linear-gradient(180deg, var(--tooth) 0 2px, var(--tooth2) 2px 3px, transparent 3px 4px); }
.bnd .zip::after { content:''; position:absolute; left:0; right:-5px; top:-5px; height:3px;
  background:repeating-linear-gradient(90deg, var(--tooth) 0 2px, var(--tooth2) 2px 3px, transparent 3px 4px);
  box-shadow:0 calc(var(--h, 360px)) 0 0 transparent; }
.bnd .zip i { position:absolute; left:0; right:-5px; bottom:-5px; height:3px;
  background:repeating-linear-gradient(90deg, var(--tooth) 0 2px, var(--tooth2) 2px 3px, transparent 3px 4px); }
.bnd .pull { position:absolute; z-index:3; top:2px; right:16%; width:9px; height:22px; border-radius:3px 3px 5px 5px;
  background:linear-gradient(90deg, #6b7178, #e6e9ec 45%, #8c9298); box-shadow:0 2px 3px rgba(0,0,0,.5); }
.bnd .pull::after { content:''; position:absolute; left:2px; right:2px; bottom:4px; height:6px; border-radius:2px; background:rgba(0,0,0,.45); }
/* the spine: a darker band, stitched */
.bnd .spine { position:absolute; inset:0 auto 0 0; width:9%; border-radius:14px 0 0 14px; z-index:1;
  background:linear-gradient(90deg, rgba(0,0,0,.42), rgba(0,0,0,.12) 70%, rgba(255,255,255,.06)); }
.bnd .spine::after { content:''; position:absolute; top:6%; bottom:6%; right:22%; border-right:1.5px dashed var(--stitch); opacity:.55; }
/* the face: a stitched panel holding a window or an emblem */
.bnd .face { position:absolute; left:17%; right:11%; top:9%; bottom:20%; z-index:1; display:grid; place-items:center; }
.bnd .face::before { content:''; position:absolute; inset:-5%; border:1.5px dashed var(--stitch); border-radius:10px; opacity:.4; }
.bnd .win { position:relative; height:100%; aspect-ratio: 63 / 88; border-radius:8px; overflow:hidden; background:#0b0b10;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.6), 0 0 0 3px color-mix(in srgb, var(--base) 70%, #000), 0 0 0 4px rgba(255,255,255,.08); }
.bnd .win img { width:100%; height:100%; object-fit:cover; }
.bnd .win::after { content:''; position:absolute; inset:0; background:linear-gradient(125deg, rgba(255,255,255,.28), transparent 32%, transparent 64%, rgba(255,255,255,.1) 78%, transparent 90%); }
.bnd .emb { width:62%; aspect-ratio:1; filter: drop-shadow(0 1px 0 rgba(255,255,255,.15)) drop-shadow(0 -1px 0 rgba(0,0,0,.55)); }
.bnd.c-white .emb { filter: drop-shadow(0 1px 0 rgba(255,255,255,.7)) drop-shadow(0 -1px 0 rgba(0,0,0,.25)); }
.bnd .emb svg { width:100%; height:100%; display:block; }
/* the name, stamped in foil */
.bnd .nm { position:absolute; left:15%; right:9%; bottom:7%; z-index:1; text-align:center; font-family:var(--font-d); font-weight:700;
  font-size:7cqw; letter-spacing:.06em; text-transform:uppercase; line-height:1.15;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  background:linear-gradient(100deg, #8c6a22, #f6e3a0 28%, #c39a3e 50%, #fff1be 74%, #9e7a2c); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.6)); }
.bnd.c-white .nm { background:linear-gradient(100deg, #5a400c, #a07a26 30%, #6e5012 50%, #b48c34 75%, #5a400c); -webkit-background-clip:text; background-clip:text; filter:drop-shadow(0 1px 0 rgba(255,255,255,.6)); }
.bnd .nm.two { white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; bottom:4.5%; }
.bnd.sm .pull { height:16px; width:7px; }
.bnd.sm .zip { border-width:5px; }

/* ── the shelf: closed binders standing on a desk ── */
.shelf { position:relative; display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:26px 22px; padding:26px 22px 30px; border-radius:var(--r-lg);
  background: radial-gradient(90% 60% at 50% 0%, rgba(168,120,255,.10), transparent 70%), linear-gradient(180deg, rgba(255,255,255,.025), rgba(0,0,0,.25)), var(--bg1);
  box-shadow: inset 0 0 0 1px var(--line), inset 0 -40px 60px -30px rgba(0,0,0,.6); }
.shelf-item { display:flex; flex-direction:column; gap:10px; color:inherit; text-decoration:none; min-width:0; }
.shelf-item:hover .bnd, .shelf-item:focus-visible .bnd { transform: translateY(-6px) rotate(-1deg); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 -2px 0 rgba(0,0,0,.35), 0 28px 44px rgba(0,0,0,.6), 0 0 0 2px rgba(168,120,255,.55); }
.shelf-item .bnd::after { content:''; position:absolute; left:6%; right:6%; bottom:-14px; height:14px; border-radius:50%; background:radial-gradient(closest-side, rgba(0,0,0,.6), transparent); z-index:-1; }
.si-meta { display:grid; gap:4px; font-size:.8rem; color:var(--muted); min-width:0; }
.si-meta b { color:var(--text); font-weight:700; font-size:.9rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.si-meta .si-rule { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.si-bar { height:4px; border-radius:4px; background:rgba(255,255,255,.08); overflow:hidden; }
.si-bar i { display:block; height:100%; width:var(--w); background:linear-gradient(90deg, var(--violet), var(--pink)); border-radius:4px; }
.si-bar.done i { background:linear-gradient(90deg, var(--gold), #fff1be); }
.shelf-new { display:grid; place-items:center; aspect-ratio:300/372; border-radius:16px; border:2px dashed var(--line-2); color:var(--muted); text-align:center; padding:12px; cursor:pointer; background:rgba(255,255,255,.02); transition:.2s var(--ease); font:inherit; }
.shelf-new:hover { border-color:var(--violet); color:var(--text); background:rgba(168,120,255,.06); }
.shelf-new .plus { font-size:2rem; line-height:1; font-family:var(--font-d); }
.shelf-new small { display:block; margin-top:6px; }
.shelf-item.on .bnd { box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 0 0 3px var(--violet), 0 24px 40px rgba(0,0,0,.6); transform:translateY(-4px); }

/* ── one binder, opened ── */
.bp-head { display:grid; grid-template-columns:auto 1fr auto; gap:18px; align-items:center; padding:30px 0 18px; }
.bp-head .bnd { width:84px; }
.bp-title h1 { font-family:var(--font-d); font-size:clamp(1.35rem, 3vw, 2rem); letter-spacing:-.03em; line-height:1.1; margin:4px 0 6px; }
.bp-title .back { color:var(--muted); text-decoration:none; font-size:.85rem; display:inline-flex; align-items:center; gap:8px; }
.bp-title .back:hover { color:var(--text); }
.bp-title .back .av-wrap { margin-right:12px; }
.bp-sub { color:var(--muted); font-size:.92rem; display:flex; flex-wrap:wrap; gap:6px 12px; align-items:center; }
.bp-sub b { color:var(--text); }
.chip { display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px; font-size:.75rem; font-weight:700; background:rgba(168,120,255,.14); color:var(--text); box-shadow:inset 0 0 0 1px var(--line-2); }
.chip.gold { background:rgba(255,201,77,.14); box-shadow:inset 0 0 0 1px rgba(255,201,77,.4); color:#ffe39a; }
.bp-actions { display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.bp-others { display:flex; gap:8px; flex-wrap:wrap; margin:0 0 16px; }
.bp-others a { font-size:.8rem; text-decoration:none; padding:5px 12px; border-radius:999px; background:rgba(255,255,255,.04); color:var(--muted); box-shadow:inset 0 0 0 1px var(--line); }
.bp-others a.on, .bp-others a:hover { color:var(--text); background:rgba(168,120,255,.16); box-shadow:inset 0 0 0 1px var(--line-2); }
.bp-prog { display:flex; align-items:center; gap:12px; margin:0 0 18px; font-size:.85rem; color:var(--muted); }
.bp-prog .si-bar { flex:1; height:6px; }

/* the spread: the open cover round two black pages of side-loading pockets */
.spread-wrap { perspective:2400px; }
.spread { --base:#17171c; --hi:#2a2a32; --stitch:#8e8e9a; position:relative; display:grid; grid-template-columns:1fr 1fr; gap:0; padding:16px; border-radius:20px;
  background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--hi) 70%, transparent), transparent 70%), var(--base);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 30px 60px rgba(0,0,0,.6), 0 8px 18px rgba(0,0,0,.45); transform-style:preserve-3d; }
.spread.c-red { --base:#7e1d1d; --hi:#a23434; --stitch:#e2b088; } .spread.c-orange { --base:#b0521c; --hi:#d2713a; --stitch:#f4c8a4; }
.spread.c-pink { --base:#a63e73; --hi:#c85e93; --stitch:#f6cfe0; } .spread.c-purple { --base:#3b2266; --hi:#55348e; --stitch:#cdb8f0; }
.spread.c-navy { --base:#1b2550; --hi:#2d3b78; --stitch:#a9b8ec; } .spread.c-teal { --base:#145a60; --hi:#217a82; --stitch:#bfe6e6; }
.spread.c-green { --base:#1e4b33; --hi:#2e6b49; --stitch:#cfe3c0; } .spread.c-white { --base:#ddd7cb; --hi:#f7f3ec; --stitch:#9e9584; }
.spread::before { content:''; position:absolute; inset:7px; border:1.5px dashed var(--stitch); border-radius:15px; opacity:.35; pointer-events:none; }
.spread::after { content:''; position:absolute; top:10px; bottom:10px; left:50%; width:22px; transform:translateX(-50%); pointer-events:none; z-index:4;
  background:linear-gradient(90deg, transparent, rgba(0,0,0,.55) 40%, rgba(0,0,0,.65) 50%, rgba(0,0,0,.55) 60%, transparent); }
.sheet { position:relative; background:linear-gradient(180deg, #121216, #0b0b0e); padding:14px; display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; min-width:0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), inset 0 10px 30px rgba(0,0,0,.6); backface-visibility:hidden; }
.sheet.l { border-radius:10px 2px 2px 10px; margin-right:8px; } .sheet.r { border-radius:2px 10px 10px 2px; margin-left:8px; }
.sheet .pno { position:absolute; bottom:-1px; font-size:.68rem; color:rgba(255,255,255,.28); font-family:var(--font-m); transform:translateY(100%); padding-top:2px; }
.sheet.l .pno { left:12px; } .sheet.r .pno { right:12px; }
.pocket { position:relative; aspect-ratio:63/88; border-radius:5px; background:linear-gradient(180deg, #1c1c22, #141418); min-width:0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.pocket::after { content:''; position:absolute; inset:0; border-radius:5px; pointer-events:none; z-index:2;   /* the clear sleeve */
  background:linear-gradient(115deg, rgba(255,255,255,.14), transparent 26%, transparent 70%, rgba(255,255,255,.06) 84%, transparent 92%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.pocket::before { content:''; position:absolute; top:6%; bottom:6%; right:-1px; width:2px; border-radius:2px; background:rgba(255,255,255,.12); z-index:3; }   /* the side-loading slit */
.pocket a, .pocket .gh { position:absolute; inset:3px; border-radius:4px; overflow:hidden; display:block; }
.pocket img { width:100%; height:100%; object-fit:cover; display:block; }
.pocket a { transition:transform .2s var(--ease); }
.pocket a:hover { transform:scale(1.045); z-index:5; box-shadow:0 10px 26px rgba(0,0,0,.6); }
.pocket .gh img { filter:grayscale(1) brightness(.55) contrast(.9); opacity:.42; }
.pocket .gh .gl { position:absolute; left:6%; right:6%; bottom:6%; padding:4px 5px; border-radius:4px; background:rgba(6,3,13,.78); font-size:.62rem; line-height:1.25; color:var(--muted); text-align:center; }
.pocket .gh .gl b { color:var(--text); display:block; font-size:.66rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pocket .gh .gq { position:absolute; top:7%; left:50%; transform:translateX(-50%); font-family:var(--font-d); font-size:.62rem; letter-spacing:.08em; color:rgba(255,255,255,.55); background:rgba(0,0,0,.5); padding:2px 7px; border-radius:999px; }
.pocket .bdgs { position:absolute; top:5px; left:5px; display:flex; gap:3px; z-index:4; }
.pocket .bdgs .bdg { font-size:.6rem; padding:1px 5px; }
.pocket.vacant::after { background:linear-gradient(115deg, rgba(255,255,255,.07), transparent 30%); }
/* the turning leaf */
.leaf { position:absolute; top:16px; bottom:16px; width:calc(50% - 16px - 8px); z-index:6; transform-style:preserve-3d; transition:transform .62s cubic-bezier(.45,.05,.25,1); pointer-events:none; }
.leaf.fwd { left:calc(50% + 8px); transform-origin:left center; }
.leaf.back { right:calc(50% + 8px); transform-origin:right center; }
.leaf .sheet { position:absolute; inset:0; margin:0; }
.leaf .sheet.b { transform:rotateY(180deg); }
.leaf.fwd.go { transform:rotateY(-180deg); }
.leaf.back.go { transform:rotateY(180deg); }
.bp-nav { display:flex; align-items:center; justify-content:center; gap:14px; margin:22px 0 4px; }
.bp-nav button.pg { width:44px; height:44px; border-radius:50%; border:0; background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px var(--line-2); cursor:pointer; font-size:1.2rem; transition:.2s; }
.bp-nav button.pg:hover:not(:disabled) { background:rgba(168,120,255,.22); }
.bp-nav button.pg:disabled { opacity:.3; cursor:default; }
.bp-nav > div { flex:0 1 260px; min-width:120px; display:grid; gap:6px; }
.bp-dots { display:flex; gap:6px; flex-wrap:wrap; justify-content:center; }
.bp-dots button { width:9px; height:9px; border-radius:50%; border:0; padding:0; background:rgba(255,255,255,.18); cursor:pointer; }
.bp-dots button.on { background:var(--violet); box-shadow:0 0 0 3px rgba(168,120,255,.25); }
.bp-where { font-size:.8rem; color:var(--muted); text-align:center; font-family:var(--font-m); }
.bp-hint { text-align:center; color:var(--dim); font-size:.78rem; margin-top:6px; }

/* ── a trainer's partner: the trainer they wear and their favourite Pokémon (the profile header) ── */
.partner { --type:#735797; position:relative; display:flex; align-items:flex-end; gap:4px; height:136px; width:268px; padding:0 14px 10px; border-radius:var(--r-lg); overflow:hidden; text-decoration:none; color:inherit;
  background: radial-gradient(70% 90% at 72% 70%, color-mix(in srgb, var(--type) 55%, transparent), transparent 70%), linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.25)), var(--bg2);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--type) 45%, transparent), 0 12px 30px rgba(0,0,0,.4); }
.partner::before { content:''; position:absolute; left:8%; right:8%; bottom:16px; height:16px; border-radius:50%; background:radial-gradient(closest-side, rgba(0,0,0,.55), transparent); }
.partner .tr { position:relative; width:128px; height:128px; image-rendering:pixelated; flex:none; margin:0 -26px -14px -22px; }
.partner .pk { position:relative; width:118px; height:118px; object-fit:contain; flex:none; margin-left:auto; filter:drop-shadow(0 8px 14px rgba(0,0,0,.45)); animation:pkIdle 4.5s ease-in-out infinite; }
.partner .dexno { position:absolute; right:12px; top:6px; font-family:var(--font-d); font-size:1.7rem; font-weight:800; color:rgba(255,255,255,.06); letter-spacing:-.04em; }
.partner .cap { position:absolute; left:12px; top:9px; font-size:.7rem; color:var(--muted); letter-spacing:.04em; display:flex; gap:6px; align-items:center; z-index:2; }
.partner .cap b { color:var(--text); }
.partner .sh { color:#ffe39a; }
.partner.shiny .pk { filter:drop-shadow(0 0 14px rgba(255,227,154,.45)) drop-shadow(0 8px 14px rgba(0,0,0,.45)); }
.partner .spark { position:absolute; width:10px; height:10px; background:#fff6c8; clip-path:polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); animation:twinkle 2.4s ease-in-out infinite; }
@keyframes pkIdle { 0%, 100% { transform:translateY(0); } 50% { transform:translateY(-4px); } }
@keyframes twinkle { 0%, 100% { opacity:0; transform:scale(.4); } 50% { opacity:1; transform:scale(1); } }
.partner.only-tr { width:140px; }
/* the partner bond (Round 2): ten hearts, each filled by --f (0–1) */
.partner .bondh { position:absolute; right:12px; top:11px; display:flex; gap:3px; z-index:2; }
.partner .bondh i { width:11px; height:10px; background:linear-gradient(90deg, #ff6fa5 calc(var(--f) * 100%), rgba(255,255,255,.18) calc(var(--f) * 100%)); clip-path:path('M5.5 10 C-1 5.5 0.5 0 3.2 0 C4.6 0 5.2 1 5.5 1.6 C5.8 1 6.4 0 7.8 0 C10.5 0 12 5.5 5.5 10 Z'); }
.partner.empty-look { align-items:center; padding:30px 16px 14px; border:1.5px dashed var(--line-2); box-shadow:none; background:rgba(255,255,255,.02); }
.partner.empty-look::before { display:none; }
.partner.empty-look p { font-size:.8rem; color:var(--muted); line-height:1.45; margin:0; }
.partner.empty-look b { color:var(--text); } .partner.only-pk .tr { display:none; }
.prof-head.has-partner { grid-template-columns:auto 1fr auto auto; }
@media (max-width: 860px) { .prof-head.has-partner { grid-template-columns:auto 1fr; } .prof-head.has-partner .partner { grid-column:1 / -1; width:100%; } }

/* ── the dashboard: my binders + the editor ── */
.bx { display:grid; grid-template-columns:240px minmax(0, 1fr); gap:24px; margin-top:16px; padding:22px; border-radius:var(--r-lg); background:var(--bg1); box-shadow:inset 0 0 0 1px var(--line-2); }
.bx[hidden] { display:none; }
.bx-prev { display:grid; gap:12px; align-content:start; position:sticky; top:84px; }
.bx-prev .bnd { width:100%; }
.bx-prev .cost { font-size:.78rem; color:var(--muted); text-align:center; }
.bx-form { display:grid; gap:18px; min-width:0; }
.bx-row { display:grid; gap:8px; }
.bx-row > label, .bx-lbl { font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); display:flex; gap:10px; align-items:center; }
.bx-lbl .note { text-transform:none; letter-spacing:0; font-weight:500; color:var(--dim); }
.bx-name { display:flex; gap:8px; }
.bx-name input { flex:1; min-width:0; }
.seg { justify-self:start; display:inline-flex; padding:3px; border-radius:12px; background:rgba(255,255,255,.04); box-shadow:inset 0 0 0 1px var(--line); }
.seg button { border:0; background:none; padding:7px 14px; border-radius:9px; font-size:.82rem; font-weight:600; color:var(--muted); cursor:pointer; }
.seg button.on { background:rgba(168,120,255,.22); color:var(--text); box-shadow:inset 0 0 0 1px var(--line-2); }
.swatches { display:flex; flex-wrap:wrap; gap:10px; }
.sw { position:relative; width:46px; height:46px; border-radius:12px; border:0; cursor:pointer; box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 4px 10px rgba(0,0,0,.4); transition:transform .15s; }
.sw:hover { transform:translateY(-2px); }
.sw.on { box-shadow:0 0 0 3px var(--bg1), 0 0 0 5px var(--violet); }
.sw.locked::after { content:'🔒'; position:absolute; right:-6px; bottom:-6px; font-size:.75rem; background:var(--bg3); border-radius:50%; width:20px; height:20px; display:grid; place-items:center; box-shadow:0 0 0 1px var(--line-2); }
.emblems { display:flex; flex-wrap:wrap; gap:8px; }
.emblems button { width:52px; height:52px; border-radius:12px; border:0; padding:9px; cursor:pointer; background:rgba(255,255,255,.04); box-shadow:inset 0 0 0 1px var(--line); }
.emblems button.on { background:rgba(255,201,77,.12); box-shadow:inset 0 0 0 2px rgba(255,201,77,.6); }
.emblems svg { width:100%; height:100%; }
.covers { display:flex; gap:8px; overflow-x:auto; padding:2px 2px 8px; scrollbar-width:thin; }
.covers button { flex:none; width:58px; aspect-ratio:63/88; border-radius:6px; border:0; padding:0; overflow:hidden; cursor:pointer; opacity:.75; box-shadow:inset 0 0 0 1px var(--line); }
.covers button img { width:100%; height:100%; object-fit:cover; }
.covers button.on { opacity:1; box-shadow:0 0 0 2px var(--bg1), 0 0 0 4px var(--gold); }
.buyline { display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:.85rem; color:var(--muted); }
.buyline b { color:var(--text); }
.wallet { display:flex; gap:12px; font-size:.82rem; color:var(--muted); }
.wallet b { color:var(--text); }
.pockets-ed { display:grid; grid-template-columns:repeat(9, minmax(0, 1fr)); gap:8px; padding:12px; border-radius:12px; background:linear-gradient(180deg, #121216, #0b0b0e); box-shadow:inset 0 0 0 1px rgba(255,255,255,.05); }
.pockets-ed .pocket { cursor:grab; }
.pockets-ed .pocket.drag { opacity:.35; }
.pockets-ed .pocket.over { box-shadow:0 0 0 2px var(--violet); }
.pockets-ed .pocket .rm { position:absolute; top:-6px; right:-6px; z-index:6; width:20px; height:20px; border-radius:50%; border:0; background:var(--bg4); color:var(--text); font-size:.7rem; line-height:1; cursor:pointer; box-shadow:0 0 0 1px var(--line-2); opacity:0; transition:opacity .15s; }
.pockets-ed .pocket:hover .rm { opacity:1; }
/* Wave 2: ‹ › reorder for phones (always shown where there is no hover), the picker's pages, the rule editor, the cover picker past 60 */
.pockets-ed .pocket .mv { position:absolute; left:50%; bottom:-8px; transform:translateX(-50%); display:flex; gap:2px; z-index:6; opacity:0; transition:opacity .15s; }
.pockets-ed .pocket:hover .mv, .pockets-ed .pocket:focus-within .mv { opacity:1; }
.pockets-ed .pocket .mv button { width:22px; height:18px; border:0; border-radius:6px; background:var(--bg4); color:var(--text); font-size:.8rem; line-height:1; cursor:pointer; box-shadow:0 0 0 1px var(--line-2); padding:0; }
.pockets-ed .pocket .mv button:disabled { opacity:.35; cursor:default; }
@media (hover: none) { .pockets-ed .pocket .rm, .pockets-ed .pocket .mv { opacity:1; } .pockets-ed { gap:12px 8px; } }
.pick-nav { display:flex; align-items:center; justify-content:center; gap:10px; margin-top:8px; font-size:.8rem; color:var(--muted); }
.pick-nav .pg { width:30px; height:30px; border-radius:50%; border:0; background:rgba(255,255,255,.06); color:var(--text); cursor:pointer; box-shadow:inset 0 0 0 1px var(--line); }
.pick-nav .pg:disabled { opacity:.35; cursor:default; }
.rule-ed { display:grid; grid-template-columns:minmax(0, 1.2fr) minmax(0, 1fr) auto; gap:8px; align-items:center; }
.rule-ed .field { width:100%; }
.covers.all { flex-wrap:wrap; overflow:visible; }
.covers-more { justify-self:start; margin-top:4px; }
.bx-foot .danger { color:#ff9a9a; }
.bx-foot .danger:hover { box-shadow:inset 0 0 0 1px rgba(255,120,120,.5); }
@media (max-width: 600px) { .rule-ed { grid-template-columns:1fr; } }
.pockets-ed .pg-sep { grid-column:1 / -1; font-size:.68rem; color:var(--dim); font-family:var(--font-m); letter-spacing:.06em; margin:2px 0 -2px; }
.picker { display:grid; gap:10px; }
.picker .search input { width:100%; }
.pick-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(78px, 1fr)); grid-auto-rows:max-content; align-content:start; gap:8px; max-height:340px; overflow:auto; padding:4px; }
.pick-grid button { position:relative; display:block; border:0; padding:0; border-radius:6px; overflow:hidden; cursor:pointer; background:var(--bg3); box-shadow:inset 0 0 0 1px var(--line); }
.pick-grid button img { width:100%; height:auto; aspect-ratio:63/88; object-fit:cover; display:block; }
.pick-grid button.in { opacity:.35; cursor:default; }
.pick-grid button.in::after { content:'✓ in'; position:absolute; inset:auto 4px 4px auto; font-size:.65rem; background:var(--bg0); padding:1px 5px; border-radius:6px; }
.bx-smart { padding:12px 14px; border-radius:12px; background:rgba(62,224,208,.06); box-shadow:inset 0 0 0 1px rgba(62,224,208,.25); font-size:.86rem; color:var(--muted); }
.bx-smart b { color:var(--text); }
.bx-foot { display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:space-between; padding-top:6px; border-top:1px solid var(--line); }
.bx-foot .saved { color:var(--green); font-size:.82rem; }
@media (max-width: 860px) { .bx { grid-template-columns:1fr; } .bx-prev { position:static; max-width:200px; margin:0 auto; } .pockets-ed { grid-template-columns:repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .spread { grid-template-columns:1fr; padding:10px; }
  .spread::after { display:none; }
  .spread .sheet.r { display:none; }
  .spread .sheet.l { margin:0; border-radius:10px; }
  .spread.show-r .sheet.l { display:none; } .spread.show-r .sheet.r { display:grid; margin:0; border-radius:10px; }
  .sheet { gap:6px; padding:8px; }
  .bp-head { grid-template-columns:auto 1fr; } .bp-actions { grid-column:1 / -1; justify-content:flex-start; }
  .shelf { grid-template-columns:repeat(2, 1fr); padding:18px 14px; gap:22px 16px; }
}
@media (prefers-reduced-motion: reduce) { .leaf { transition:none; } .partner .pk, .partner .spark { animation:none; } }