/* Display pages + art panels (panels.js) */
.bp-disp { --bp-gap:12px; }
@media (max-width:560px) { .bp-disp { --bp-gap:8px; } }
.bp-head { display:flex; align-items:center; gap:8px; white-space:normal; overflow:visible; }
.bp-head .bp-t { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bp-chip { flex:none; font-size:10px; letter-spacing:.06em; padding:2px 7px; border-radius:999px; background:rgba(255,203,5,.14); color:var(--accent); }
.bp-hbtn { margin-left:auto; flex:none; border:1px solid var(--line); background:rgba(255,255,255,.05); color:var(--ink); font:inherit; font-size:11px; font-weight:800; letter-spacing:.04em;
  text-transform:uppercase; padding:3px 10px; border-radius:999px; cursor:pointer; }
.bp-hbtn + .bp-hbtn { margin-left:0; }
.bp-done { background:var(--accent); color:#1a1400; border-color:var(--accent); }
.bp-head-ed { flex-wrap:wrap; }
.bp-name { flex:1 1 140px; min-width:0; background:rgba(255,255,255,.06); border:1px solid var(--line); color:var(--ink); border-radius:8px; padding:4px 8px;
  font:inherit; font-size:13px; font-weight:800; text-transform:none; letter-spacing:0; }
.bp-tip { font-size:12px; color:var(--muted); margin:9px 2px 0; }

/* pockets on a display page */
.bp-disp .bcard { min-width:0; }
.bp-disp button.bcard { padding:0; border:0; background:none; color:inherit; font:inherit; text-align:left; cursor:pointer; display:block; }
.bpanel, .bp-disp button.bcard.bpanel { display:flex; flex-direction:column; }
.bpanel .bcard-img { position:relative; aspect-ratio:245/342; border-radius:8px; background:#0b0e22; }
.bp-art { position:absolute; inset:0; border-radius:8px; background-repeat:no-repeat; background-size:cover; background-position:center; box-shadow:inset 0 0 22px rgba(0,0,0,.45); }
.bp-art::after { content:""; position:absolute; inset:0; border-radius:inherit; background:radial-gradient(120% 120% at 50% 50%, transparent 62%, rgba(0,0,0,.26)); }
.bpanel .bsleeve { z-index:3; }
.bp-pack { position:absolute; z-index:1; left:14%; top:9%; width:72%; height:82%; object-fit:contain; filter:drop-shadow(0 8px 14px rgba(0,0,0,.55)); opacity:1 !important; }
.bp-lbl { position:absolute; inset:0; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; text-align:center; padding:12%; }
.bp-lbl b { font-size:clamp(9px,1.25vw,14px); letter-spacing:.12em; text-transform:uppercase; font-weight:800; color:#f6e7b0; text-shadow:0 1px 6px rgba(0,0,0,.6); line-height:1.25; }
.bp-lbl i { font-style:normal; font-size:clamp(7px,.9vw,10.5px); letter-spacing:.2em; color:rgba(246,231,176,.75); }
.bp-plus { display:none; }
.bp-empty .bp-plus, .bp-editing .bp-plus { display:flex; position:absolute; inset:0; align-items:center; justify-content:center; font-size:24px; font-weight:900; color:rgba(255,255,255,.18); }
.bp-editing .bp-plus { color:#1a1400; }
.bp-editing .bp-plus::before { content:""; position:absolute; width:32px; height:32px; border-radius:50%; background:rgba(255,203,5,.92); box-shadow:0 4px 14px rgba(0,0,0,.4); }
.bp-editing .bp-plus { font-size:0; }
.bp-editing .bp-plus::after { content:"+"; position:relative; font-size:21px; font-weight:900; color:#1a1400; }
.bp-editing .bp-slot { position:relative; }
.bp-editing .bp-slot .bcard-img { outline:1.5px dashed rgba(255,203,5,.6); outline-offset:2px; }
.bp-ghost .bcard-img { border:1.5px dashed rgba(255,255,255,.28); background:rgba(255,255,255,.02); }
.bp-ghost .bcard-img img { position:absolute; inset:0; opacity:.13 !important; filter:grayscale(1); object-fit:cover; }
.bp-gtx { position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; text-align:center; padding:8px; }
.bp-gtx b { font-size:12.5px; } .bp-gtx span { font-size:11px; color:var(--muted); line-height:1.3; }

/* the sheet */
.bp-ov { position:fixed; inset:0; z-index:70; background:rgba(4,6,18,.5); display:none; align-items:flex-end; justify-content:center; }
.bp-ov.show { display:flex; }
.bp-sheet { width:min(560px,100%); max-height:72vh; overflow:auto; overscroll-behavior:contain; background:var(--card,#1e2350); border:1px solid var(--line); border-bottom:0;
  border-radius:18px 18px 0 0; box-shadow:0 -14px 40px rgba(0,0,0,.5); display:flex; flex-direction:column; gap:12px;
  padding:10px max(16px, env(safe-area-inset-right,0px)) calc(16px + env(safe-area-inset-bottom,0px)) max(16px, env(safe-area-inset-left,0px)); color:var(--ink); }
@media (min-width:900px) { .bp-ov { align-items:center; } .bp-sheet { border-radius:18px; border-bottom:1px solid var(--line); max-height:84vh; } .bp-grab { display:none; } }
.bp-grab { width:40px; height:4px; border-radius:4px; background:rgba(255,255,255,.2); align-self:center; flex:none; }
.bp-top { display:flex; align-items:center; gap:10px; }
.bp-top b { font-size:16px; }
.bp-x { margin-left:auto; border:0; background:rgba(255,255,255,.08); color:var(--ink); width:32px; height:32px; border-radius:50%; font-size:16px; cursor:pointer; flex:none; }
.bp-sheet h4 { margin:0 0 7px; font-size:11.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); }
.bp-body { display:flex; flex-direction:column; gap:10px; min-height:0; }
.bp-seg, .bp-chips { display:flex; flex-wrap:wrap; gap:6px; }
.bp-seg button, .bp-chips button, .bp-btn { border:1px solid var(--line); background:rgba(255,255,255,.05); color:var(--ink); font:inherit; font-weight:750; font-size:13px; padding:6px 12px; border-radius:999px; cursor:pointer; }
.bp-seg button[aria-pressed="true"], .bp-chips button[aria-pressed="true"] { border-color:var(--accent); color:var(--accent); }
.bp-seg button:disabled { opacity:.35; cursor:default; }
.bp-tabs button[aria-pressed="true"] { background:var(--accent); color:#1a1400; }
.bp-btn.bp-go { background:var(--accent); color:#1a1400; border-color:var(--accent); }
.bp-opts { display:flex; flex-wrap:wrap; gap:8px; max-height:236px; overflow:auto; padding:2px; }
.bp-opt { width:58px; aspect-ratio:245/342; border-radius:6px; border:2px solid transparent; padding:0; background:#0b0e22; cursor:pointer; overflow:hidden; flex:none; }
.bp-opt img { width:100%; height:100%; object-fit:cover; display:block; }
.bp-opt.bp-sq { width:52px; aspect-ratio:1; }
.bp-opt.bp-packopt { background:#1d2456; } .bp-opt.bp-packopt img { object-fit:contain; padding:3px; }
.bp-opt.bp-on { opacity:.45; }
.bp-opt[aria-pressed="true"] { border-color:var(--accent); opacity:1; }
.bp-dots { display:flex; flex-wrap:wrap; gap:8px; }
.bp-dot { width:28px; height:28px; border-radius:50%; border:2px solid rgba(255,255,255,.15); cursor:pointer; padding:0; }
.bp-dot[aria-pressed="true"] { border-color:var(--ink); box-shadow:0 0 0 2px var(--accent); }
.bp-q { width:100%; background:rgba(255,255,255,.06); border:1px solid var(--line); color:var(--ink); border-radius:10px; padding:8px 10px; font:inherit; font-size:14px; }
.bp-hint { font-size:12.5px; color:var(--muted); margin:0; }
.bp-foot { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.bp-sp { flex:1; }
.bp-sheet button:focus-visible, .bp-disp button:focus-visible { outline:2px solid var(--accent2,#5f9bff); outline-offset:2px; }

.bp-sharp { font-size:12px; font-weight:800; padding:3px 9px; border-radius:999px; flex:none; }
.bp-sharp.ok { background:rgba(95,211,154,.14); color:#5fd39a; } .bp-sharp.mid { background:rgba(255,179,71,.14); color:#ffb347; }
.bp-invite { display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:space-between; max-width:760px; margin:0 auto 12px; padding:10px 14px;
  border:1px dashed rgba(255,203,5,.45); border-radius:14px; background:rgba(255,203,5,.06); font-size:13.5px; color:var(--muted); }
.bp-invite b { color:var(--accent); margin-right:6px; }
.bp-disp .bcard.bpocket, .bp-disp button.bcard { pointer-events:auto; }
.bp-ath { display:block; width:100%; height:100%; background-repeat:no-repeat; }

/* v6: sizes 1 / 2 wide / 3 wide / 2 by 2, fit mode, soft focus, mirror; display pages show art only (no price rows) */
.bp-disp .card-meta { display:none; }
.bp-disp .bpage-grid { gap:var(--bp-gap); }
.bpanel .bcard-img { overflow:visible; background:none; }
.bpanel:not(.sz-s) .bcard-img { aspect-ratio:auto; flex:1 1 auto; min-height:0; }
.bpanel.sz-w, .bpanel.sz-q { align-self:stretch; }
.bpanel.sz-r { aspect-ratio:2.25; }
.bp-artwrap { position:absolute; inset:0; overflow:hidden; border-radius:8px; background:#0b0e22; }
.bp-art.bp-bd { filter:blur(10px) brightness(.55) saturate(1.25); transform:scale(1.25); box-shadow:none; }
.bp-art.bp-bd::after { display:none; }
.bp-art.bp-fit { right:auto; bottom:auto; border-radius:5px; box-shadow:0 6px 18px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.12); }
.bsleeve.bp-cell { right:auto; bottom:auto; }
.bp-seam { position:absolute; z-index:2; background:linear-gradient(180deg,#141a40,#0b0e24); }
.bp-pack { left:50%; transform:translateX(-50%); width:auto; max-width:92%; height:84%; top:8%; }
.bp-grab-art { cursor:grab; }
.bp-edit { display:flex; flex-direction:column; gap:8px; }
.bp-edit .bp-seg { align-items:center; }
.bp-prev { position:relative; width:100%; margin:0 auto; cursor:grab; --bp-gap:8px; }
.bp-prev:active { cursor:grabbing; }
.bp-prev.sz-s { aspect-ratio:245/342; max-width:150px; } .bp-prev.sz-w { aspect-ratio:1.49; max-width:340px; }
.bp-prev.sz-r { aspect-ratio:2.25; max-width:440px; } .bp-prev.sz-q { aspect-ratio:.73; max-width:220px; }
.bp-prev .bcard-img { position:absolute; inset:0; aspect-ratio:auto; background:none; overflow:visible; border-radius:8px; }
.bp-mir { position:absolute; inset:0; }
.bp-art.bp-box { right:auto; bottom:auto; box-shadow:none; }
.bp-art.bp-box::after { display:none; }
.bp-art.bp-fit { border-radius:5px; box-shadow:0 6px 18px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.14); }
.bp-artwrap::after { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(120% 120% at 50% 50%, transparent 62%, rgba(0,0,0,.26)); }
.bp-sheet > * { flex-shrink:0; }

/* Nov 4: whole-page art panel */
.bpanel.sz-p { aspect-ratio:.725; align-self:stretch; }
.bp-prev.sz-p { aspect-ratio:.725; max-width:250px; }

/* Nov 4: missing cards (binder.js binderGhostHTML): a faded placeholder in the pocket */
button.bcard.bghost { padding:0; border:0; background:none; color:inherit; font:inherit; text-align:left; cursor:pointer; display:block; min-width:0; }
.bghost .bcard-img { position:relative; border:1.5px dashed rgba(255,255,255,.22); box-sizing:border-box; background:rgba(255,255,255,.025); border-radius:8px; }
.bghost .bcard-img img { opacity:.16 !important; filter:grayscale(1); }
.bghost:hover .bcard-img img, .bghost:focus-visible .bcard-img img { opacity:.4 !important; filter:grayscale(.4); }
.bghost .bg-tx { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; text-align:center; padding:8px; pointer-events:none; }
.bghost .bg-tx b { font-size:clamp(13px,1.6vw,18px); color:rgba(255,255,255,.75); }
.bghost .bg-tx span { font-size:clamp(10px,1.05vw,12.5px); color:rgba(255,255,255,.6); line-height:1.25; }
.bghost .bg-tx small { font-size:10.5px; color:var(--accent); margin-top:2px; }
.bghost .card-meta .c-sn { color:var(--muted); }
.bpage-sec .b-have { color:var(--accent); font-weight:800; }
/* whole page starts with the whole art across the middle; the blurred copy above and below is just color */
.bpanel.sz-p .bp-bd, .bp-prev.sz-p .bp-bd { filter:blur(24px) brightness(.5) saturate(1.35); transform:scale(1.5); }
.bpanel.sz-p .bp-fit, .bp-prev.sz-p .bp-fit { border-radius:3px; box-shadow:0 10px 30px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.12); }

/* ===== The tidy binder (lab, Nov 4 2026): cards first, one slim toolbar, settings in a sidebar or sheet ===== */
#binder.b-tidy .r-head, #binder.b-tidy #binderTabs, #binder.b-tidy #bpInvite, #binder.b-tidy .b-head-row { display:none !important; }
#binder.b-tidy .b-picker, #binder.b-tidy .b-pickwrap, #binder.b-tidy .b-xbtn { display:inline-flex !important; }
#binder.b-tidy .b-cardctl { background:none; border:0; box-shadow:none; padding:4px 0; margin:0 0 6px; backdrop-filter:none; -webkit-backdrop-filter:none; }
#binder.b-tidy .b-bar2 { gap:8px; }
#binder.b-tidy .b-bar2 > .deal-btn, #binder.b-tidy .b-bar2 > .b-popwrap > .deal-btn { background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.09); box-shadow:none; border-radius:11px; transition:background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); }
#binder.b-tidy .b-bar2 > .deal-btn:hover, #binder.b-tidy .b-bar2 > .b-popwrap > .deal-btn:hover { background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.16); }
#binder.b-tidy .b-bar2 > .deal-btn:active, #binder.b-tidy .b-bar2 > .b-popwrap > .deal-btn:active { transform:scale(.96); }
#binder.b-tidy .b-bar2 > .deal-btn.active, #binder.b-tidy .b-bar2 > .b-popwrap > .deal-btn.active { background:rgba(255,203,5,.12); border-color:rgba(255,203,5,.45); color:var(--accent); }
#binder.b-tidy .b-search { background:rgba(255,255,255,.035); border-color:rgba(255,255,255,.09); border-radius:11px; }
#binder.b-tidy #binderMeta { margin:0 0 12px; }
#binder.b-tidy .b-line { font-size:13px; gap:14px; color:var(--muted); opacity:.85; }
#binder.b-tidy .b-rule { font-size:12px; }
#binder.b-tidy .bpage { background:rgba(255,255,255,.022); border:1px solid rgba(255,255,255,.06); box-shadow:none; }
#binder.b-tidy .bpage-sec { font-size:11px; opacity:.6; letter-spacing:.08em; margin-bottom:6px; }
#binder.b-tidy .bpage-grid { row-gap:10px; }
/* the price sits on the card, not under it */
#binder.b-tidy .bcard { position:relative; }
#binder.b-tidy .bcard .card-meta { position:absolute; right:6px; bottom:6px; margin:0; padding:0; z-index:4; pointer-events:none; min-height:0; }
#binder.b-tidy .bcard .card-meta > *:not(.c-price) { display:none !important; }
#binder.b-tidy .bcard .c-price { display:inline-block; font-size:11px; font-weight:800; line-height:1; color:#fff; background:rgba(8,10,24,.8); border-radius:6px; padding:4px 6px; backdrop-filter:blur(4px); font-variant-numeric:tabular-nums; }
#binder.b-tidy.b-noprice .bcard .card-meta, #binder.b-tidy .bghost .card-meta, #binder.b-tidy .bpocket .card-meta, #binder.b-tidy .bcard.mural .card-meta { display:none !important; }
/* quieter placeholders */
#binder.b-tidy .bghost { border-style:solid !important; border-color:rgba(255,255,255,.06) !important; }
#binder.b-tidy .bghost img { opacity:.13 !important; }
#binder.b-tidy .bghost .bg-tx b { font-size:15px; }
#binder.b-tidy .bghost .bg-tx > span { font-size:12px; opacity:.72; }
#binder.b-tidy .bghost .bg-tx small { color:inherit !important; opacity:.55; font-weight:500; }
#binder.b-tidy .b-pager .deal-btn, #binder.b-tidy .b-pageinfo { background:rgba(255,255,255,.035); border-color:rgba(255,255,255,.1); box-shadow:none; }

/* toggles: a quiet track, the chosen option lifts out of it */
#binder.b-tidy .seg { background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.07); border-radius:11px; padding:3px; gap:2px; flex-wrap:wrap; height:auto; }
#binder.b-tidy .seg-btn { color:var(--muted); font-size:13px; font-weight:700; padding:7px 12px; border-radius:8px; min-height:0; transition:background var(--dur-1) var(--ease), color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); }
#binder.b-tidy .seg-btn:hover { color:var(--ink); background:rgba(255,255,255,.05); }
#binder.b-tidy .seg-btn:active { transform:scale(.95); }
#binder.b-tidy .seg-btn.active { background:linear-gradient(180deg,#434c9e,#353d86); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 2px 8px rgba(0,0,0,.35); }
#binder.b-tidy .seg-btn .seg-n { opacity:.6; font-weight:600; }
#binder.b-tidy .seg-btn:focus-visible, #binder.b-tidy .sw-row:focus-visible, #binder.b-tidy .bt-chip:focus-visible, #binder.b-tidy .ov-pg:focus-visible { outline:2px solid var(--accent2); outline-offset:2px; }

/* the settings panel */
#binder.b-tidy .b-tpanel { display:flex; flex-direction:column; gap:0; margin:0; padding:0 18px 22px; border:0; text-align:left;
  position:fixed; left:0; right:0; bottom:0; z-index:80; max-height:min(84vh,720px); overflow:auto; overscroll-behavior:contain;
  background:#11143a; border-top:1px solid rgba(255,255,255,.1); border-radius:20px 20px 0 0; box-shadow:0 -18px 48px rgba(0,0,0,.55);
  padding-bottom:calc(22px + env(safe-area-inset-bottom,0px)); animation:btUp var(--dur-2) var(--ease); }
#binder.b-tidy .bt-scrim { position:fixed; inset:0; z-index:79; background:rgba(4,5,14,.55); animation:btFade var(--dur-2) var(--ease); }
@keyframes btUp { from { transform:translateY(24px); opacity:0; } }
@keyframes btFade { from { opacity:0; } }
@keyframes btIn { from { transform:translateX(18px); opacity:0; } }
#binder.b-tidy .bt-head { position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:16px 0 10px; background:inherit; }
#binder.b-tidy .bt-head b { font-size:15px; font-weight:800; }
#binder.b-tidy .bt-x { width:34px; height:34px; border-radius:50%; border:0; background:rgba(255,255,255,.07); color:var(--ink); font-size:14px; cursor:pointer; }
#binder.b-tidy .bt-x:hover { background:rgba(255,255,255,.13); }
#binder.b-tidy .bt-grp { display:flex; flex-direction:column; gap:10px; padding:14px 0; border-top:1px solid rgba(255,255,255,.06); }
#binder.b-tidy .bt-grp h4 { margin:0; font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); opacity:.8; }
#binder.b-tidy .bt-row { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; min-width:0; }
#binder.b-tidy .bt-l { font-size:14px; color:var(--ink); }
#binder.b-tidy .bt-note { margin:0; font-size:13px; color:var(--muted); }
#binder.b-tidy .bt-link { align-self:flex-start; background:none; border:0; padding:2px 0; color:var(--accent2); font:inherit; font-size:13px; font-weight:700; cursor:pointer; }
#binder.b-tidy .bt-chips { display:flex; flex-wrap:wrap; gap:6px; }
#binder.b-tidy .bt-chip { border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.03); color:var(--muted); font:inherit; font-size:13px; font-weight:700; padding:7px 12px; border-radius:999px; cursor:pointer; transition:all var(--dur-1) var(--ease); }
#binder.b-tidy .bt-chip:hover { color:var(--ink); border-color:rgba(255,255,255,.2); }
#binder.b-tidy .bt-chip:active { transform:scale(.95); }
#binder.b-tidy .bt-chip.on { color:var(--accent); background:rgba(255,203,5,.12); border-color:rgba(255,203,5,.5); }
/* on/off switches */
#binder.b-tidy .sw-row { display:flex; align-items:center; justify-content:space-between; gap:14px; width:100%; background:none; border:0; padding:4px 0; color:var(--ink); font:inherit; font-size:14px; text-align:left; cursor:pointer; }
#binder.b-tidy .sw-l { display:flex; flex-direction:column; gap:2px; min-width:0; }
#binder.b-tidy .sw-l small { font-size:12px; color:var(--muted); }
#binder.b-tidy .sw { flex:0 0 auto; position:relative; width:42px; height:24px; border-radius:999px; background:rgba(255,255,255,.14); transition:background var(--dur-2) var(--ease); }
#binder.b-tidy .sw::after { content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.4); transition:transform var(--dur-2) var(--ease); }
#binder.b-tidy .sw-row[aria-checked="true"] .sw { background:var(--accent); }
#binder.b-tidy .sw-row[aria-checked="true"] .sw::after { transform:translateX(18px); }
#binder.b-tidy .sw-row:active .sw::after { width:22px; }
#binder.b-tidy .sw-row[aria-checked="true"]:active .sw::after { transform:translateX(14px); }
/* computers: the panel is a sidebar that stays open, and the pages make room for it */
@media (min-width:1100px) {
  #binder.b-tidy.b-side .bt-scrim { display:none; }
  #binder.b-tidy.b-side .b-tpanel { left:auto; top:0; bottom:0; right:0; width:340px; max-height:none; border-radius:0; border-top:0; border-left:1px solid rgba(255,255,255,.08); box-shadow:-12px 0 40px rgba(0,0,0,.35); padding-top:env(safe-area-inset-top,0px); animation:btIn var(--dur-2) var(--ease); }
  #binder.b-tidy.b-side .results { padding-right:356px; }
  #binder.b-tidy .bt-grp .seg-btn { padding:6px 10px; }
}
@media (prefers-reduced-motion:reduce) { #binder.b-tidy .b-tpanel, #binder.b-tidy .bt-scrim, #binder.b-tidy .b-ovw-in { animation:none; } #binder.b-tidy .sw, #binder.b-tidy .sw::after { transition:none; } }

/* every page at a glance */
#binder.b-tidy .b-ovw { position:fixed; inset:0; z-index:90; background:rgba(4,5,14,.7); display:flex; align-items:center; justify-content:center; padding:24px; animation:btFade var(--dur-2) var(--ease); }
#binder.b-tidy .b-ovw-in { width:min(1040px,100%); max-height:88vh; overflow:auto; overscroll-behavior:contain; background:#11143a; border:1px solid rgba(255,255,255,.1); border-radius:20px; padding:0 20px 22px; box-shadow:0 24px 64px rgba(0,0,0,.6); animation:btUp var(--dur-2) var(--ease); text-align:left; }
#binder.b-tidy .ov-cnt { font-weight:600; color:var(--muted); margin-left:4px; }
#binder.b-tidy .ov-body { display:flex; flex-direction:column; gap:10px; }
#binder.b-tidy .ov-sec { margin:10px 0 0; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); }
#binder.b-tidy .ov-sec span { color:var(--muted); font-weight:600; letter-spacing:0; text-transform:none; margin-left:6px; }
#binder.b-tidy .ov-pages { display:grid; grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:12px; }
#binder.b-tidy .ov-pg { position:relative; display:flex; flex-direction:column; gap:6px; align-items:stretch; padding:6px; border-radius:10px; border:1px solid rgba(255,255,255,.07); background:rgba(255,255,255,.035); cursor:pointer; transition:transform var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); }
#binder.b-tidy .ov-pg:hover { transform:translateY(-2px); border-color:rgba(255,255,255,.2); }
#binder.b-tidy .ov-pg.on { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
#binder.b-tidy .ov-grid { display:grid; gap:2px; }
#binder.b-tidy .ov-grid img, #binder.b-tidy .ov-gh { display:block; width:100%; aspect-ratio:.716; border-radius:2px; object-fit:cover; }
#binder.b-tidy .ov-gh { background:rgba(255,255,255,.06); }
#binder.b-tidy .ov-n { font-size:11px; font-weight:700; color:var(--muted); text-align:center; font-variant-numeric:tabular-nums; }
#binder.b-tidy .ov-pg.on .ov-n { color:var(--accent); }
#binder.b-tidy .ov-disp { min-height:120px; justify-content:space-between; }
#binder.b-tidy .ov-dlab { flex:1; display:flex; align-items:center; justify-content:center; font-size:12px; color:var(--muted); border-radius:6px; background:linear-gradient(135deg,rgba(255,203,5,.12),rgba(95,155,255,.12)); }
@media (max-width:560px) {
  #binder.b-tidy .b-ovw { padding:0; align-items:flex-end; }
  #binder.b-tidy .b-ovw-in { max-height:90vh; border-radius:20px 20px 0 0; padding:0 14px calc(18px + env(safe-area-inset-bottom,0px)); }
  #binder.b-tidy .ov-pages { grid-template-columns:repeat(3,1fr); gap:8px; }
}
#binder.b-tidy .bghost, #binder.b-tidy .bghost .bcard-img { border-style:solid !important; border-color:rgba(255,255,255,.07) !important; }
/* the old header buttons (Wishlist, Favorites, Set completion) live in the ⋯ menu now, on every screen size */
#binder.b-tidy .b-pop > button.b-more-sm { display:block; }
#binder.b-tidy .b-pop > button.b-more-sm:first-of-type ~ button.b-more-sm { display:block; }
/* Art group in the drawer */
#binder.b-tidy .bt-acts { display:flex; flex-direction:column; gap:8px; }
#binder.b-tidy .bt-btn { display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:8px 10px; border-radius:12px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.03); color:var(--ink); font:inherit; cursor:pointer; transition:background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); }
#binder.b-tidy .bt-btn:hover { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16); }
#binder.b-tidy .bt-btn:active { transform:scale(.98); }
#binder.b-tidy .bt-btn > span:last-child { display:flex; flex-direction:column; gap:1px; min-width:0; }
#binder.b-tidy .bt-btn b { font-size:14px; }
#binder.b-tidy .bt-btn small { font-size:12px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; }
#binder.b-tidy .bt-btn-th { flex:0 0 auto; width:38px; height:52px; border-radius:6px; overflow:hidden; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.06); position:relative; }
#binder.b-tidy .bt-btn-th img, #binder.b-tidy .bt-btn-th .cover-art, #binder.b-tidy .bt-btn-th svg { width:100%; height:100%; object-fit:cover; display:block; }
#binder.b-tidy .bt-btn-plus { font-size:20px; color:var(--accent); border:1px dashed rgba(255,203,5,.45); background:rgba(255,203,5,.06); }
/* page labels */
#binder.b-tidy .bpage-lab { display:block; margin:0 0 6px; padding:2px 4px; border:0; background:none; font:inherit; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); opacity:0; cursor:text; border-radius:6px; transition:opacity var(--dur-1) var(--ease), background var(--dur-1) var(--ease); }
#binder.b-tidy .bpage:hover .bpage-lab, #binder.b-tidy .bpage-lab:focus-visible { opacity:.55; }
#binder.b-tidy .bpage-lab.has { opacity:1; color:var(--ink); font-size:12px; }
#binder.b-tidy .bpage-lab:hover { background:rgba(255,255,255,.05); opacity:1; }
@media (hover:none) { #binder.b-tidy .bpage-lab { opacity:.26; } #binder.b-tidy .bpage-lab.has { opacity:1; } }
#binder.b-tidy .bpage-lab-in { display:block; width:min(100%,280px); margin:0 0 6px; padding:4px 8px; font:inherit; font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--ink); background:rgba(255,255,255,.06); border:1px solid var(--accent2); border-radius:6px; outline:none; }
#binder.b-tidy .ov-lab { display:block; font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* big pages: 4×4 and up get smaller tags, 5×5 and 6×6 drop the placeholder text */
#binder.b-tidy .b-d4 .bpage-grid { row-gap:6px; column-gap:6px; }
#binder.b-tidy .b-d4 .bcard .c-price { font-size:9.5px; padding:2px 4px; border-radius:4px; }
#binder.b-tidy .b-d4 .bcard .card-meta { right:3px; bottom:3px; }
#binder.b-tidy .b-d4 .bghost .bg-tx small { display:none; }
#binder.b-tidy .b-dense .bghost .bg-tx > span { display:none; }
#binder.b-tidy .b-dense .bghost .bg-tx b { font-size:11px; }
#binder.b-tidy .b-dense .bcard .card-meta { display:none !important; }
#binder.b-tidy .b-dense .fav-btn, #binder.b-tidy .b-dense .bsleeve { display:none; }
/* cover studio: pick the card */
.cv-picks .cs-th img { width:100%; height:100%; object-fit:cover; }
.cs-note { margin:0 0 10px; font-size:13px; color:var(--muted); }
#binder.b-tidy .bt-row.bt-wide { flex-direction:column; align-items:stretch; gap:8px; }
#binder.b-tidy .bt-row.bt-wide .seg { display:flex; flex-wrap:nowrap; }
#binder.b-tidy .bt-row.bt-wide .seg-btn { flex:1 1 0; padding-inline:0; text-align:center; justify-content:center; }
/* move tray */
.b-traybar { position:fixed; left:50%; transform:translateX(-50%); bottom:calc(14px + env(safe-area-inset-bottom,0px)); z-index:85; display:flex; align-items:center; gap:14px; width:min(720px,calc(100% - 24px)); padding:10px 12px 10px 14px; border-radius:16px; background:#151a45; border:1px solid rgba(255,203,5,.45); box-shadow:0 18px 44px rgba(0,0,0,.6); animation:btUp var(--dur-2) var(--ease); }
.b-traybar .tb-cards { display:flex; flex:0 0 auto; align-items:center; padding-left:6px; }
.b-traybar .tb-cards img { width:34px; aspect-ratio:.716; border-radius:3px; margin-left:-12px; box-shadow:0 2px 6px rgba(0,0,0,.5); transform:rotate(calc((var(--i) - 3) * 3deg)); }
.b-traybar .tb-cards img:first-child { margin-left:0; }
.b-traybar .tb-more { margin-left:6px; font-size:12px; font-weight:800; color:var(--accent); }
.b-traybar .tb-txt { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.b-traybar .tb-txt b { font-size:14px; }
.b-traybar .tb-txt span { font-size:12px; color:var(--muted); }
.b-traybar .deal-btn { flex:0 0 auto; }
@media (max-width:560px) { .b-traybar { flex-wrap:wrap; gap:8px 10px; } .b-traybar .tb-txt { flex-basis:calc(100% - 120px); } .b-traybar .deal-btn { flex:1; } }
#binder.traying .bpage .bcard:not(.bpocket):not(.bghost) { cursor:copy; }
#binder.traying .bpage .bcard:not(.bpocket):not(.bghost):hover { outline:2px dashed var(--accent); outline-offset:3px; }
#binder.traying .bp-drop { border:2px dashed rgba(255,203,5,.55) !important; background:rgba(255,203,5,.06) !important; cursor:copy; padding:0; font:inherit; }
#binder.traying .bp-drop:hover { background:rgba(255,203,5,.14) !important; }
#binder.traying .b-pager { margin-bottom:96px; }
.bs-tray { gap:10px; }
#binder.b-tidy .b-tnote { display:flex; align-items:center; gap:12px; margin:8px 0 4px; padding:10px 12px; border-radius:12px; background:rgba(95,155,255,.1); border:1px solid rgba(95,155,255,.35); font-size:13px; color:var(--muted); animation:btUp var(--dur-2) var(--ease); }
#binder.b-tidy .b-tnote b { color:var(--ink); }
#binder.b-tidy .b-tnote span { flex:1; min-width:0; }

/* ===== Pocket editor v2 (Nov 4 2026) ===== */
.bp-sheet { background:#11143a; border-color:rgba(255,255,255,.1); gap:14px; }
.bp-top > div { display:flex; flex-direction:column; min-width:0; flex:1; }
.bp-top small { font-size:12px; color:var(--muted); }
.bp-top .bp-go { padding:7px 18px; border-radius:10px; }
.bp-x2 { border:0; background:rgba(255,255,255,.08); color:var(--ink); width:34px; height:34px; border-radius:50%; font-size:14px; cursor:pointer; flex:none; }
.bp-seg2 { display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:2px; padding:3px; border-radius:12px; background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.08); }
.bp-seg2 button { border:0; background:none; color:var(--muted); font:inherit; font-weight:800; font-size:13px; padding:8px 0; border-radius:9px; cursor:pointer; transition:background var(--dur-1) var(--ease), color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); }
.bp-seg2 button:hover { color:var(--ink); }
.bp-seg2 button:active { transform:scale(.95); }
.bp-seg2 button[aria-pressed="true"] { background:linear-gradient(180deg,#434c9e,#353d86); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 2px 8px rgba(0,0,0,.35); }
.bp-seg2 button[aria-disabled="true"] { opacity:.32; }
.bp-szrow button { font-size:12px; }
.bp-chips2 { display:flex; flex-wrap:wrap; gap:6px; }
.bp-chips2 button { border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.03); color:var(--muted); font:inherit; font-size:12.5px; font-weight:800; padding:6px 12px; border-radius:999px; cursor:pointer; transition:all var(--dur-1) var(--ease); }
.bp-chips2 button[aria-pressed="true"] { color:var(--accent); border-color:rgba(255,203,5,.5); background:rgba(255,203,5,.1); }
.bp-chips2.bp-sets { max-height:96px; overflow:auto; }
/* the four choices for an empty pocket */
.bp-choose { display:grid; gap:8px; grid-template-columns:1fr 1fr; }
.bp-ch { display:flex; gap:10px; align-items:center; text-align:left; padding:12px; border-radius:14px; border:1px solid rgba(255,255,255,.09); background:rgba(255,255,255,.035); color:var(--ink); font:inherit; cursor:pointer; transition:background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); }
.bp-ch:hover { background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.18); }
.bp-ch:active { transform:scale(.97); }
.bp-ch b { display:block; font-size:14.5px; } .bp-ch small { display:block; font-size:12px; color:var(--muted); line-height:1.35; }
.bp-ch-ic { flex:none; width:38px; height:52px; border-radius:6px; box-shadow:0 2px 8px rgba(0,0,0,.4); }
.bp-ic-card { background:linear-gradient(160deg,#ffe27a,#f0a830); border:2px solid #d9d9e0; }
.bp-ic-art { background:radial-gradient(circle at 60% 35%,#ffd84a 0 16%,transparent 17%),linear-gradient(160deg,#3fa7ff,#1a2a66 70%,#2f9a55 71%); }
.bp-ic-tex { background:repeating-conic-gradient(from 0deg at 50% 60%,#7b3fd0 0 12deg,#3d2270 12deg 24deg); }
.bp-ic-paint { background:radial-gradient(circle at 30% 30%,#ff7ac8 0 14%,transparent 15%),radial-gradient(circle at 70% 60%,#4fd17a 0 16%,transparent 17%),radial-gradient(circle at 40% 78%,#ffd84a 0 12%,transparent 13%),#1b1f3b; }
@media (max-width:420px) { .bp-choose { grid-template-columns:1fr; } }
/* preview with the adjustments beside it */
.bp-edit2 { display:grid; grid-template-columns:minmax(0,128px) minmax(0,1fr); gap:14px; align-items:center; }
.bp-edit2 .bp-prev { max-width:none; margin:0; }
.bp-edit2 .bp-prev.sz-w, .bp-edit2 .bp-prev.sz-r { grid-column:1 / -1; max-width:360px; justify-self:center; width:100%; }
.bp-adj { display:flex; flex-direction:column; gap:10px; min-width:0; }
.bp-adj h4 { margin:0; }
.bp-adjrow { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.bp-zoom { display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--muted); }
.bp-zoom input[type=range] { flex:1; min-width:0; accent-color:var(--accent); }
.bp-sw { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; padding:2px 0; border:0; background:none; color:var(--ink); font:inherit; font-size:13.5px; text-align:left; cursor:pointer; }
.bp-sw > span { display:flex; flex-direction:column; } .bp-sw small { font-size:11.5px; color:var(--muted); }
.bp-sw i { flex:none; position:relative; width:38px; height:22px; border-radius:999px; background:rgba(255,255,255,.14); transition:background var(--dur-2) var(--ease); }
.bp-sw i::after { content:""; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.4); transition:transform var(--dur-2) var(--ease); }
.bp-sw[aria-checked="true"] i { background:var(--accent); } .bp-sw[aria-checked="true"] i::after { transform:translateX(16px); }
.bp-link { border:0; background:none; padding:2px 0; color:var(--accent2,#5f9bff); font:inherit; font-size:13px; font-weight:800; cursor:pointer; }
.bp-link.bp-danger { color:#ff8a8a; }
.bp-sharp { font-size:12px; font-weight:800; }
.bp-sharp.ok { color:#6fe0a4; } .bp-sharp.mid { color:#ffc861; }
.bp-sizes { display:flex; flex-direction:column; gap:7px; }
.bp-foot { display:flex; justify-content:center; padding-top:2px; }
.bp-anyc { position:relative; overflow:hidden; background:conic-gradient(red,yellow,lime,cyan,blue,magenta,red); }
.bp-anyc.on { border-color:var(--ink); box-shadow:0 0 0 2px var(--accent); }
.bp-anyc input { position:absolute; inset:-8px; width:48px; height:48px; opacity:0; cursor:pointer; }
.bp-dot.sm { width:24px; height:24px; }
/* patterns */
.bp-pats { gap:10px; max-height:300px; }
.bp-pt { width:68px; aspect-ratio:auto; background:none; border:0; display:flex; flex-direction:column; gap:4px; overflow:visible; }
.bp-pt span { display:block; width:100%; aspect-ratio:245/342; border-radius:7px; border:2px solid transparent; box-shadow:0 2px 6px rgba(0,0,0,.35); }
.bp-pt[aria-pressed="true"] span { border-color:var(--accent); }
.bp-pt small { font-size:10.5px; color:var(--muted); text-align:center; line-height:1.2; }
.bp-opt.bp-pt[aria-pressed="true"] { border-color:transparent; }
/* paint */
.bp-paintbox { display:flex; justify-content:center; }
.bp-pcv { position:relative; width:min(100%,var(--pw,210px)); border-radius:10px; overflow:hidden; box-shadow:0 8px 22px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.16); touch-action:none; }
.bp-pcv.sz-s { --pw:210px; aspect-ratio:245/342; } .bp-pcv.sz-w { --pw:380px; aspect-ratio:1.49; } .bp-pcv.sz-r { --pw:460px; aspect-ratio:2.25; }
.bp-pcv.sz-q { --pw:290px; aspect-ratio:.73; } .bp-pcv.sz-p { --pw:330px; aspect-ratio:.725; }
.bp-pcv canvas { position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none; cursor:crosshair; }
.bp-pslv { position:absolute; inset:0; pointer-events:none; background:linear-gradient(125deg,rgba(255,255,255,.14),transparent 30%); }
.bp-brushes button { font-size:12px; }
.bp-pdot { flex:none; width:var(--d); height:var(--d); border-radius:50%; border:1.5px solid rgba(255,255,255,.4); }
.bp-acts { display:flex; gap:6px; }
.bp-acts .bp-btn { border-radius:10px; }
.bp-acts .bp-btn:disabled { opacity:.35; cursor:default; }
.bp-pmeta { font-size:12px; color:var(--muted); }
.bp-h4 { font-size:11.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); font-weight:800; }
/* tips */
.bp-coach { position:relative; display:flex; flex-direction:column; gap:3px; background:#1b2160; border:1px solid rgba(95,155,255,.45); border-radius:14px; padding:11px 13px; box-shadow:0 10px 26px rgba(0,0,0,.4); animation:btUp var(--dur-2) var(--ease); }
.bp-cn { font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#7fb0ff; }
.bp-coach b { font-size:14px; } .bp-coach small { font-size:12.5px; color:var(--muted); line-height:1.45; } .bp-coach small b { font-size:inherit; color:var(--ink); }
.bp-coach-r { display:flex; justify-content:space-between; align-items:center; margin-top:6px; }
.bp-btn.sm { padding:5px 14px; font-size:12.5px; border-radius:9px; }
.bp-coach-pg { margin-top:10px; }
.bp-pulse .bcard-img { animation:bpPulse 1.6s ease-in-out infinite; }
@keyframes bpPulse { 0%,100% { box-shadow:0 0 0 0 rgba(255,203,5,.0); } 50% { box-shadow:0 0 0 4px rgba(255,203,5,.35), 0 0 22px rgba(255,203,5,.45); } }
@media (prefers-reduced-motion:reduce) { .bp-pulse .bcard-img { animation:none; box-shadow:0 0 0 3px rgba(255,203,5,.4); } }
/* layouts */
.bp-lays { display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); }
.bp-lay { display:flex; flex-direction:column; gap:5px; text-align:left; padding:10px; border-radius:14px; border:1px solid rgba(255,255,255,.09); background:rgba(255,255,255,.035); color:var(--ink); font:inherit; cursor:pointer; transition:background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); }
.bp-lay:hover { background:rgba(255,255,255,.07); border-color:rgba(255,203,5,.5); }
.bp-lay:active { transform:scale(.97); }
.bp-lay b { font-size:14px; } .bp-lay small { font-size:12px; color:var(--muted); line-height:1.35; }
.bp-lm { display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr); gap:3px; aspect-ratio:.73; padding:5px; border-radius:8px; background:rgba(255,255,255,.05); }
.bp-lm i { display:block; border-radius:3px; background-color:#20264f; background-size:cover; background-position:center; min-height:0; }
.bp-lm i.lm-art { background-size:220%; filter:saturate(1.1); }
.bp-lm i.lm-e { background:rgba(255,255,255,.05); border:1px dashed rgba(255,255,255,.18); }
/* example binders */
.id-sheet { width:min(820px,100%); }
.bp-sp { flex:1; }
.id-grid { display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); }
.id-tile { display:flex; flex-direction:column; gap:5px; text-align:left; padding:8px; border-radius:14px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.03); color:var(--ink); font:inherit; cursor:pointer; transition:transform var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); }
.id-tile:hover { transform:translateY(-2px); border-color:rgba(255,203,5,.45); }
.id-tile img { width:100%; aspect-ratio:.82; object-fit:cover; object-position:top; border-radius:9px; display:block; background:#0b0e22; }
.id-tile b { font-size:13.5px; } .id-tile small { font-size:12px; color:var(--muted); line-height:1.35; }
.id-detail { display:grid; gap:18px; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; }
@media (max-width:640px) { .id-detail { grid-template-columns:1fr; } }
.id-big { width:100%; border-radius:12px; display:block; box-shadow:0 10px 30px rgba(0,0,0,.5); }
.id-txt { display:flex; flex-direction:column; gap:10px; }
.id-txt h3 { margin:0; font-size:22px; }
.id-txt p { margin:0; font-size:14px; color:var(--muted); line-height:1.55; }
.id-tip b { color:var(--accent); margin-right:4px; }
.id-pick { align-self:flex-start; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); background:rgba(255,203,5,.1); border:1px solid rgba(255,203,5,.4); border-radius:999px; padding:3px 9px; }
.id-acts { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:4px; }
.id-acts .bp-go { padding:9px 18px; border-radius:11px; font-size:14px; }
.id-foot { display:flex; justify-content:center; }
.bp-sheet .bp-sharp { background:none !important; padding:0 !important; border:0 !important; }
.bp-lm i.lm-art { background-size:auto; filter:none; }
.id-h { margin:4px 0 0; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); }
.id-h span { text-transform:none; letter-spacing:0; font-weight:500; color:var(--muted); margin-left:6px; }
.id-exs { display:flex; gap:14px; overflow-x:auto; padding:2px 2px 8px; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; }
.id-ex { flex:0 0 auto; width:186px; display:flex; flex-direction:column; gap:5px; scroll-snap-align:start; }
.id-ex .bp-ex { max-width:100%; padding:8px; border-radius:12px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); box-sizing:border-box; width:186px !important; }
.id-ex .bp-ex .bpage-grid { display:grid; gap:6px; }
.id-ex .bp-ex .bcard { margin:0; }
.id-ex .bp-ex .bcard-img { position:relative; aspect-ratio:245/342; border-radius:5px; overflow:hidden; }
.id-ex .bp-ex .bpanel:not(.sz-s) .bcard-img { aspect-ratio:auto; height:100%; overflow:visible; }
.id-ex .bp-ex .bpanel.sz-s .bcard-img { overflow:visible; }
.id-ex .bp-ex .bcard-img img { width:100%; height:100%; object-fit:cover; display:block; }
.id-ex .bp-ex .bpocket .bcard-img { background:rgba(255,255,255,.05); }
.id-ex b { font-size:13.5px; } .id-ex small { font-size:12px; color:var(--muted); line-height:1.35; }
.id-ex .bp-btn { align-self:flex-start; margin-top:2px; }
.id-set { border-style:dashed; border-color:rgba(255,203,5,.4); }
.id-setart { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; aspect-ratio:.82; padding:8px; border-radius:9px; background:#0b0e22; }
.id-setart i { border-radius:3px; background:linear-gradient(160deg,#ffe27a,#d99a2b); }
.id-setart i.m { background:rgba(255,255,255,.07); border:1px dashed rgba(255,255,255,.2); }
/* example spreads: binder pages with a spine, in the gallery and the big view */
.ex-spread { display:flex; align-items:stretch; justify-content:center; gap:0; padding:10px; border-radius:16px;
  background:linear-gradient(160deg,#232a68,#141a42); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08), 0 14px 34px rgba(0,0,0,.45); }
.ex-spread.ex-stack { flex-direction:column; align-items:center; gap:12px; }
.ex-spine { flex:none; width:16px; margin:0 6px; border-radius:8px; background:linear-gradient(90deg,rgba(0,0,0,.45),rgba(255,255,255,.06) 45%,rgba(0,0,0,.45));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04); position:relative; }
.ex-spine::before, .ex-spine::after { content:""; position:absolute; left:50%; width:8px; height:8px; margin-left:-4px; border-radius:50%; background:#0a0d24; box-shadow:inset 0 1px 2px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.08); }
.ex-spine::before { top:22%; } .ex-spine::after { bottom:22%; }
.bp-ex { --bp-gap:5px; padding:6px; border-radius:8px; background:linear-gradient(180deg,rgba(8,10,30,.55),rgba(8,10,30,.35)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.05); box-sizing:border-box; max-width:100%; }
.bp-ex .bpage-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--bp-gap); }
.bp-ex .bcard { margin:0; min-width:0; }
.bp-ex .bcard-img { position:relative; aspect-ratio:245/342; border-radius:4px; overflow:hidden; background:rgba(255,255,255,.04); }
.bp-ex .bpanel:not(.sz-s) .bcard-img { aspect-ratio:auto; height:100%; overflow:visible; background:none; }
.bp-ex .bpanel.sz-s .bcard-img { overflow:visible; background:none; }
.bp-ex .ex-card .bcard-img img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.bp-ex .bsleeve { position:absolute; inset:0; pointer-events:none; border-radius:inherit; background:linear-gradient(125deg,rgba(255,255,255,.18),transparent 32%); }
/* gallery tiles */
.id-ex.id-ex2 { width:306px; }
.id-exbtn { position:relative; padding:0; border:0; background:none; cursor:zoom-in; border-radius:16px; text-align:left; transition:transform var(--dur-1) var(--ease); }
.id-exbtn:hover { transform:translateY(-2px); }
.id-exbtn .ex-spread { padding:7px; }
.id-exbtn .ex-spine { width:10px; margin:0 4px; }
.id-zoom { position:absolute; right:10px; bottom:10px; font-size:11px; font-weight:800; color:#fff; background:rgba(8,10,24,.75); border-radius:999px; padding:4px 9px; opacity:0; transition:opacity var(--dur-1) var(--ease); }
.id-exbtn:hover .id-zoom, .id-exbtn:focus-visible .id-zoom { opacity:1; }
@media (hover:none) { .id-zoom { opacity:1; } }
.id-ex .bp-ex { width:auto; }
/* big view */
.ex-ov { position:fixed; inset:0; z-index:95; background:rgba(3,4,12,.86); display:none; align-items:center; justify-content:center; padding:max(10px, env(safe-area-inset-top,0px)) 12px max(10px, env(safe-area-inset-bottom,0px)); }
.ex-ov.show { display:flex; animation:btFade var(--dur-2) var(--ease); }
.ex-box { display:flex; flex-direction:column; gap:14px; max-width:100%; max-height:100%; overflow:auto; color:var(--ink); }
.ex-top { display:flex; align-items:flex-start; gap:12px; }
.ex-top > div { flex:1; display:flex; flex-direction:column; min-width:0; }
.ex-top b { font-size:20px; } .ex-top small { font-size:13px; color:var(--muted); }
.ex-stage { display:flex; justify-content:center; }
.ex-stage .ex-spread { animation:btUp var(--dur-3) var(--ease); }
.ex-foot { display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; }
.ex-foot .bp-btn { border-radius:10px; padding:8px 16px; }
.ex-foot .bp-btn:disabled { opacity:.35; cursor:default; }
.ex-n { font-size:12.5px; color:var(--muted); min-width:52px; text-align:center; }
/* ideas in plain sight */
#binder.b-tidy .b-ideabtn { color:var(--accent); }
.b-exinv { display:flex; align-items:center; gap:16px; margin:0 0 14px; padding:12px 14px; border-radius:16px; background:linear-gradient(120deg,rgba(255,203,5,.07),rgba(95,155,255,.07)); border:1px dashed rgba(255,203,5,.35); animation:btUp var(--dur-2) var(--ease); }
.b-exinv-art { flex:none; padding:0; border:0; background:none; cursor:zoom-in; border-radius:14px; transition:transform var(--dur-1) var(--ease); }
.b-exinv-art:hover { transform:translateY(-2px) rotate(-.6deg); }
.b-exinv-art .ex-spread { padding:5px; } .b-exinv-art .ex-spine { width:8px; margin:0 3px; } .b-exinv-art .bp-ex { --bp-gap:3px; padding:3px; }
.b-exinv-t { display:flex; flex-direction:column; gap:3px; min-width:0; }
.b-exinv-k { font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); }
.b-exinv-t b { font-size:16px; } .b-exinv-t small { font-size:12.5px; color:var(--muted); line-height:1.4; max-width:46ch; }
.b-exinv-acts { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:6px; }
.b-exinv-x { color:var(--muted); }
@media (max-width:560px) { .b-exinv { gap:12px; padding:10px; } .b-exinv-t small { display:none; } .b-exinv-t b { font-size:14.5px; } .b-exinv-acts { gap:10px; margin-top:4px; } .b-exinv-acts .bp-btn { padding:5px 10px; } }
/* add cards picker */
.ac-sheet { width:min(860px,100%); }
.ac-filters { display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between; }
.ac-filters .bp-chips2 { flex:1 1 300px; max-height:76px; overflow:auto; }
.ac-n { opacity:.6; font-weight:600; margin-left:2px; }
.ac-sort { flex:0 0 auto; min-width:200px; }
.ac-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:10px; max-height:min(52vh,560px); overflow:auto; padding:2px; overscroll-behavior:contain; }
.ac-card { position:relative; padding:0; border:2px solid transparent; border-radius:8px; background:#0b0e22; cursor:pointer; display:flex; flex-direction:column; overflow:hidden; transition:transform var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); }
.ac-card:active { transform:scale(.96); }
.ac-card img { width:100%; aspect-ratio:245/342; object-fit:cover; display:block; }
.ac-card.on { border-color:var(--accent); }
.ac-card.on img { filter:brightness(.8); }
.ac-chk { position:absolute; top:6px; right:6px; width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:900; background:rgba(8,10,24,.55); color:transparent; border:2px solid rgba(255,255,255,.7); transition:all var(--dur-1) var(--ease); }
.ac-card.on .ac-chk { background:var(--accent); color:#1a1400; border-color:var(--accent); }
.ac-q { position:absolute; top:6px; left:6px; font-size:10.5px; font-weight:800; color:#fff; background:rgba(8,10,24,.8); border-radius:5px; padding:2px 5px; }
.ac-from { font-size:10.5px; color:var(--muted); padding:4px 6px; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ac-foot { display:flex; align-items:center; gap:12px; position:sticky; bottom:-16px; background:#11143a; padding:10px 0 2px; border-top:1px solid rgba(255,255,255,.08); }
.ac-foot span b { color:var(--accent); }
.ac-foot .bp-go:disabled { opacity:.4; cursor:default; }
.b-addempty { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:12px; }
.b-addempty .bp-go { padding:10px 18px; border-radius:12px; font-size:14px; }
#binder .bp-addpk { cursor:pointer; padding:0; font:inherit; border:0; background:none; }
#binder .bp-addpk .bcard-img { display:flex; align-items:center; justify-content:center; }
#binder .bp-addpk .bcard-img span { font-size:22px; color:rgba(255,255,255,.25); transition:color var(--dur-1) var(--ease); }
#binder .bp-addpk:hover .bcard-img span { color:var(--accent); }
@media (max-width:560px) { .ac-grid { grid-template-columns:repeat(3,1fr); gap:7px; } .ac-sort { min-width:0; flex:1 1 100%; } }
.b-emptycard { grid-column:1 / -1; justify-self:center; display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; max-width:420px; margin:28px auto; padding:26px 22px; border-radius:20px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); }
.b-ec-pg { display:grid; grid-template-columns:repeat(3,26px); gap:5px; padding:8px; border-radius:10px; background:rgba(255,255,255,.04); margin-bottom:6px; }
.b-ec-pg i { height:36px; border-radius:4px; border:1px dashed rgba(255,255,255,.18); background:rgba(255,255,255,.03); }
.b-ec-pg i:nth-child(5) { border:1px solid rgba(255,203,5,.6); background:rgba(255,203,5,.12); }
.b-emptycard b { font-size:17px; } .b-emptycard small { font-size:13.5px; color:var(--muted); line-height:1.45; }
.b-ec-acts { display:flex; gap:10px; margin-top:8px; flex-wrap:wrap; justify-content:center; }
.b-ec-acts .bp-btn { padding:9px 18px; border-radius:12px; font-size:14px; }
#binder.b-tidy .bt-danger { color:#ff8a8a; }
.toast-undo { position:fixed; left:50%; bottom:calc(22px + env(safe-area-inset-bottom,0px)); transform:translate(-50%,20px); z-index:200; display:flex; align-items:center; justify-content:space-between; gap:14px; width:min(460px, calc(100% - 24px)); box-sizing:border-box;
  padding:10px 10px 10px 16px; border-radius:14px; background:#1b2160; border:1px solid rgba(255,255,255,.14); color:var(--ink); font-size:14px; box-shadow:0 14px 36px rgba(0,0,0,.55); opacity:0; pointer-events:none; transition:opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); }
.toast-undo.show { opacity:1; transform:translate(-50%,0); pointer-events:auto; }
.toast-undo button { flex:none; border:0; border-radius:10px; padding:7px 14px; background:var(--accent); color:#1a1400; font:inherit; font-weight:800; cursor:pointer; }
.b-emptycard { max-width:520px; }
.b-ec-opts { display:grid; grid-template-columns:1fr 1fr; gap:8px; width:100%; margin-top:16px; padding-top:16px; border-top:1px solid rgba(255,255,255,.08); }
.b-ec-opts button { display:flex; flex-direction:column; gap:2px; text-align:left; padding:10px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.03); color:var(--ink); font:inherit; cursor:pointer; transition:background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); min-width:0; }
.b-ec-opts button:hover { background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.16); }
.b-ec-opts b { font-size:13.5px; } .b-ec-opts small { font-size:12px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; }
.b-ec-opts .b-ec-del b { color:#ff8a8a; }
@media (max-width:420px) { .b-ec-opts { grid-template-columns:1fr; } }
/* the "see it big" label sits above the cards in the preview */
.id-exbtn .ex-spread, .b-exinv-art .ex-spread { position:relative; z-index:0; isolation:isolate; }
.id-zoom { z-index:10; left:50%; right:auto; bottom:50%; transform:translate(-50%,50%); white-space:nowrap; box-shadow:0 4px 14px rgba(0,0,0,.5); pointer-events:none; }
@media (hover:none) { .id-zoom { left:auto; right:10px; bottom:10px; transform:none; } }
/* wanted placeholders */
#binder .bwant .bcard-img { outline:1.5px dashed rgba(127,176,255,.55); outline-offset:-1px; }
#binder .bwant img { opacity:.22 !important; filter:saturate(.6); }
#binder .bwant .bw-tag { position:absolute; top:6px; left:6px; font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#cfe0ff; background:rgba(40,70,160,.75); border-radius:5px; padding:2px 6px; }
#binder .bwant[draggable="true"] { cursor:grab; }
.ac-mode { margin:0 0 2px; }
.ac-card.ac-here { opacity:.4; cursor:default; }
/* drag between pages */
#binder.b-dragging .b-pager .deal-btn:not(:disabled) { outline:2px dashed rgba(255,203,5,.6); outline-offset:2px; }
#binder.b-dragging #binderGrid { box-shadow:inset 36px 0 0 -30px rgba(255,203,5,.35), inset -36px 0 0 -30px rgba(255,203,5,.35); }
#binder.b-dragging .bcard:not(.bpocket):hover { outline:2px solid var(--accent); outline-offset:2px; }
/* ===== Edit mode ===== */
#binder.b-tidy .b-editbtn.on { background:var(--accent) !important; color:#1a1400 !important; border-color:var(--accent) !important; font-weight:800; }
#binder.b-editing .bpage { outline:1.5px dashed rgba(255,203,5,.4); outline-offset:3px; }
#binder.b-editing .bpage .bcard:not(.bpocket) { cursor:pointer; }
#binder.b-editing .bpage .bcard:not(.bpocket):hover .bcard-img { box-shadow:0 0 0 2px var(--accent); }
#binder.b-editing .bcard .card-meta { display:none !important; }
#binder.b-editing .bpage-lab { opacity:.55; }
.bp-ins { display:flex; gap:8px; justify-content:flex-start; margin:0 0 6px; }
.bp-ins button { border:1px dashed rgba(255,203,5,.5); background:rgba(255,203,5,.06); color:var(--accent); font:inherit; font-size:12px; font-weight:800; border-radius:999px; padding:4px 11px; cursor:pointer; }
.bp-ins button:hover { background:rgba(255,203,5,.14); }
.b-tghost { position:fixed; z-index:300; pointer-events:none; opacity:.92; transform:scale(1.06) rotate(-2deg); box-shadow:0 18px 40px rgba(0,0,0,.6); border-radius:8px; overflow:hidden; transition:transform .12s ease; }
.b-tghost .card-meta { display:none; }
#binder .b-tsrc { opacity:.35; }
#binder .b-tover .bcard-img { box-shadow:0 0 0 3px var(--accent), 0 0 22px rgba(255,203,5,.45); }
.b-editbar { display:flex; align-items:center; gap:10px; margin:0 0 10px; padding:8px 12px; border-radius:12px; background:rgba(255,203,5,.08); border:1px solid rgba(255,203,5,.3); font-size:13px; color:var(--muted); }
.b-editbar b { color:var(--accent); }
@media (max-width:430px) { #binder.b-tidy .b-ideabtn { display:none !important; } #binder.b-tidy .b-bar2 { gap:6px; } }
/* design pages on 5×5 and 6×6 grids: tighter gaps, quieter labels */
.bp-disp .bpage-grid.bp-dense { gap:5px; }
.bp-disp .bp-dense .bp-lbl b { font-size:9px; } .bp-disp .bp-dense .bp-lbl i { display:none; }
.bp-disp .bp-dense .bp-plus::before { width:20px !important; height:20px !important; }
/* pocket editor: two columns on computers, using the room */
.bp-cols { display:flex; flex-direction:column; gap:14px; min-width:0; }
.bp-left, .bp-right { display:flex; flex-direction:column; gap:14px; min-width:0; }
.bp-left:empty { display:none; }
@media (min-width:1000px) {
  #bpSheet .bp-sheet { width:min(1180px,94vw); max-height:90vh; padding:16px 22px 22px; }
  #bpSheet .bp-cols { display:grid; grid-template-columns:minmax(320px,420px) minmax(0,1fr); gap:24px; align-items:start; }
  #bpSheet .bp-cols.bp-one { grid-template-columns:1fr; }
  #bpSheet .bp-left { position:sticky; top:0; }
  #bpSheet .bp-edit2 { grid-template-columns:1fr; gap:16px; }
  #bpSheet .bp-edit2 .bp-prev { max-width:300px; width:100%; justify-self:center; }
  #bpSheet .bp-edit2 .bp-prev.sz-w, #bpSheet .bp-edit2 .bp-prev.sz-r, #bpSheet .bp-edit2 .bp-prev.sz-row { max-width:420px; }
  #bpSheet .bp-pcv { width:min(100%, calc(var(--pw,210px) * 1.45)); }
  #bpSheet .bp-opts { max-height:62vh; gap:10px; }
  #bpSheet .bp-opt { width:96px; }
  #bpSheet .bp-pt { width:104px; }
  #bpSheet .bp-pats { max-height:62vh; }
  #bpSheet .bp-choose { grid-template-columns:repeat(4,1fr); }
  #bpSheet .bp-ch { flex-direction:column; align-items:flex-start; padding:16px; }
  #bpSheet .bp-ch-ic { width:56px; height:78px; }
}
/* quick page size from the toolbar */
.b-sizepop { min-width:340px; padding:12px !important; display:flex; flex-direction:column; gap:10px; }
.b-sizepop .bsp-row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.b-sizepop .bsp-row > span { font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.b-sizepop .seg { flex-wrap:wrap; justify-content:flex-end; }
@media (max-width:560px) { .b-sizepop { min-width:0; width:min(320px,calc(100vw - 24px)); } .b-sizepop .bsp-row { flex-direction:column; align-items:flex-start; } }
.bp-paintcols .bp-right { order:-1; }
@media (min-width:1000px) {
  #bpSheet .bp-paintcols .bp-right { order:0; }
  #bpSheet .bp-paintcols .bp-paintbox { align-items:flex-start; }
  #bpSheet .bp-paintcols .bp-pcv { width:min(100%, calc(var(--pw,210px) * 2.1), calc((90vh - 200px) * var(--ar, .72))); }
  #bpSheet .bp-opts { display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); }
  #bpSheet .bp-opt { width:auto; }
  #bpSheet .bp-pats { grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); }
  #bpSheet .bp-pt { width:auto; }
}
/* All my cards is a view, not a binder */
.b-pick .bi-all span small { display:block; }
.b-pick .bi-h { font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); padding:4px 12px 2px; }
#binder.b-tidy .b-picker-all { border-style:dashed !important; color:var(--muted) !important; }
.b-allbar, .b-editbar { margin:10px 0 12px !important; }
.b-allbar { display:flex; align-items:center; gap:12px; padding:9px 12px; border-radius:12px; background:rgba(95,155,255,.08); border:1px solid rgba(95,155,255,.3); font-size:13px; color:var(--muted); }
.b-allbar b { color:var(--ink); } .b-allbar span { flex:1; min-width:0; }
.b-allbar .bp-btn, .b-editbar .bp-btn { flex:none; }
/* breathing room in the sheets */
.bp-sheet { row-gap:16px; }
.bp-sheet .bp-top { padding-top:4px; }
#bpSheet .bp-tabs2, #addSheet .ac-mode { margin-bottom:2px; }
.bp-sheet .bp-hint { margin:0; }
#binder.b-editing .bpage { margin-top:4px; }
#binder.b-tidy .bbinder-tag { top:6px !important; bottom:auto !important; left:6px !important; max-width:calc(100% - 12px); font-size:10.5px; padding:2px 6px; border-radius:6px; background:rgba(8,10,24,.78); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media (max-width:560px) { .b-allbar { font-size:12.5px; padding:8px 10px; } .b-allbar .b-allbar-long { display:none; } }
@media (min-width:561px) { .b-allbar .b-allbar-short { display:none; } }
@media (max-width:560px) { #binder.b-tidy .bbinder-tag { font-size:9px; padding:1px 5px; top:4px !important; left:4px !important; max-width:62%; opacity:.92; } }
/* ===== Edit canvas ===== */
#binder.b-cv .bpage-grid { user-select:none; -webkit-user-select:none; }
#binder.b-cv .bpage .bcard, #binder.b-cv .bp-disp .bcard { cursor:pointer; }
#binder.b-cv .bp-editing .bp-slot .bcard-img { outline:none; }
#binder.b-cv .bpage { outline:1px dashed rgba(255,255,255,.14); outline-offset:3px; }
.cv-sel { position:absolute; z-index:6; pointer-events:none; border:3px solid var(--accent); border-radius:10px; box-shadow:0 0 0 2000px rgba(4,6,18,.0), 0 0 0 1px rgba(0,0,0,.4), 0 0 26px rgba(255,203,5,.45); background:rgba(255,203,5,.08); transition:left .08s, top .08s, width .08s, height .08s; }
.cv-sel span { position:absolute; top:-12px; left:10px; font-size:11px; font-weight:800; color:#1a1400; background:var(--accent); border-radius:6px; padding:2px 7px; box-shadow:0 2px 6px rgba(0,0,0,.4); }
.cv-tray { position:fixed; z-index:66; color:var(--ink); background:#11143a; display:flex; flex-direction:column; box-shadow:0 -14px 40px rgba(0,0,0,.5);
  left:0; right:0; bottom:0; border-top:1px solid rgba(255,255,255,.1); border-radius:18px 18px 0 0; padding:10px max(14px, env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(14px, env(safe-area-inset-left,0px)); }
.cv-tray.cv-open { height:min(46vh,440px); }
.cv-head { display:flex; flex-direction:column; gap:8px; flex:none; }
.cv-row { display:flex; align-items:center; gap:10px; justify-content:space-between; }
.cv-msg { font-size:13px; color:var(--muted); min-width:0; } .cv-msg b { color:var(--ink); font-size:14px; } .cv-msg small { display:block; font-size:12px; }
.cv-acts { display:flex; gap:6px; align-items:center; flex:none; flex-wrap:wrap; justify-content:flex-end; }
.cv-btn { border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.05); color:var(--ink); font:inherit; font-size:12.5px; font-weight:800; padding:6px 11px; border-radius:10px; cursor:pointer; white-space:nowrap; }
.cv-btn:hover:not(:disabled) { background:rgba(255,255,255,.1); } .cv-btn:disabled { opacity:.35; cursor:default; }
.cv-btn.cv-danger { color:#ff9a9a; } .cv-btn.cv-go { background:var(--accent); color:#1a1400; border-color:var(--accent); padding:9px 16px; align-self:flex-start; }
.cv-x { width:30px; height:30px; border-radius:50%; border:0; background:rgba(255,255,255,.08); color:var(--ink); cursor:pointer; }
.cv-tabs { display:grid; grid-template-columns:repeat(4,1fr); gap:2px; padding:3px; border-radius:11px; background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.08); }
.cv-tabs button { border:0; background:none; color:var(--muted); font:inherit; font-size:13px; font-weight:800; padding:7px 0; border-radius:8px; cursor:pointer; }
.cv-tabs button[aria-pressed="true"] { background:linear-gradient(180deg,#434c9e,#353d86); color:#fff; }
.cv-body { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; display:flex; flex-direction:column; gap:8px; padding-top:10px; }
.cv-tray:not(.cv-open) .cv-body { display:none; }
.cv-q { width:100%; box-sizing:border-box; padding:9px 12px; border-radius:10px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04); color:var(--ink); font:inherit; font-size:14px; }
.cv-sec { font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-top:4px; }
.cv-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(70px,1fr)); gap:7px; }
.cv-art, .cv-card, .cv-pack { padding:0; border:2px solid transparent; border-radius:7px; aspect-ratio:245/342; background-color:#0b0e22; background-repeat:no-repeat; cursor:pointer; overflow:hidden; transition:transform .1s, border-color .1s; }
.cv-art:hover, .cv-card:hover, .cv-pack:hover, .cv-pat:hover span { border-color:var(--accent); }
.cv-art:active, .cv-card:active, .cv-pack:active { transform:scale(.95); }
.cv-card img { width:100%; height:100%; object-fit:cover; display:block; }
.cv-pack { background:#1d2456; } .cv-pack img { width:100%; height:100%; object-fit:contain; padding:4px; box-sizing:border-box; }
.cv-pats { grid-template-columns:repeat(auto-fill,minmax(74px,1fr)); }
.cv-pat { padding:0; border:0; background:none; color:var(--muted); font:inherit; display:flex; flex-direction:column; gap:3px; cursor:pointer; }
.cv-pat span { display:block; aspect-ratio:245/342; border-radius:7px; border:2px solid transparent; }
.cv-pat small { font-size:10.5px; text-align:center; }
.cv-dots { display:flex; flex-wrap:wrap; gap:7px; }
.cv-dot { width:28px; height:28px; border-radius:50%; border:2px solid rgba(255,255,255,.15); padding:0; cursor:pointer; position:relative; overflow:hidden; }
.cv-dot[aria-pressed="true"] { border-color:#fff; box-shadow:0 0 0 2px var(--accent); }
.cv-anyc { background:conic-gradient(red,yellow,lime,cyan,blue,magenta,red); } .cv-anyc input { position:absolute; inset:-8px; width:48px; height:48px; opacity:0; cursor:pointer; }
.cv-chips { display:flex; flex-wrap:wrap; gap:6px; }
.cv-chips button { border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.03); color:var(--muted); font:inherit; font-size:12px; font-weight:800; padding:5px 10px; border-radius:999px; cursor:pointer; }
.cv-hint { margin:0; font-size:13px; color:var(--muted); }
#binder.b-cv .results { padding-bottom:96px; }
#binder.b-cv.b-cv-sel .results { padding-bottom:calc(min(46vh,440px) + 24px); }
@media (min-width:1000px) {
  .cv-tray { left:auto; top:0; right:0; bottom:0; width:380px; height:auto !important; border-radius:0; border-top:0; border-left:1px solid rgba(255,255,255,.08); box-shadow:-12px 0 40px rgba(0,0,0,.35); padding:16px 18px 18px; }
  .cv-tray:not(.cv-open) .cv-body { display:flex; }
  #binder.b-cv .results, #binder.b-cv.b-cv-sel .results { padding-right:396px; padding-bottom:24px; }
  .cv-row { flex-direction:column; align-items:stretch; } .cv-acts { justify-content:flex-start; }
  .cv-grid { grid-template-columns:repeat(4,1fr); }
}
.cv-how { margin:0; padding-left:18px; color:var(--muted); font-size:13px; display:grid; gap:4px; } .cv-how li::marker { color:var(--accent); font-weight:800; }
.cv-msg b { white-space:nowrap; }
@media (max-width:999px) {
  .cv-row { gap:8px; } .cv-msg { flex:1; } .cv-btn { padding:6px 9px; font-size:12px; }
  #binder.b-cv-sel ~ .toast, body:has(#binder.b-cv-sel) #toast { bottom:calc(min(46vh,440px) + 16px) !important; }
}
/* the Adjust box, right after picking art */
.cv-adj { display:flex; flex-direction:column; gap:8px; padding:11px 12px; border-radius:12px; background:rgba(255,203,5,.07); border:1px solid rgba(255,203,5,.28); flex:none; }
.cv-adj-h { display:flex; align-items:baseline; justify-content:space-between; gap:8px; } .cv-adj-h b { font-size:14px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cv-lnk { border:0; background:none; color:var(--muted); font:inherit; font-size:12.5px; font-weight:800; cursor:pointer; padding:2px 0; text-decoration:underline; text-underline-offset:3px; }
.cv-zoom { display:flex; align-items:center; gap:10px; font-size:12.5px; font-weight:800; color:var(--muted); } .cv-zoom input { flex:1; accent-color:var(--accent); height:28px; }
.cv-adj .cv-btn.cv-go { padding:7px 16px; }
@media (max-width:999px) { .cv-adj { padding:9px 11px; gap:6px; } .cv-adj .cv-hint { font-size:12px; } }
.cv-btn.cv-go:hover:not(:disabled) { background:#ffd84a; }
.cv-adj-h .cv-lnk { margin-left:auto; } .cv-adj-h .cv-btn.cv-go { padding:5px 14px; align-self:center; }
.cv-q-btn { font-weight:900; font-size:14px; }
/* help sheet with clips */
.cvh { position:fixed; inset:0; z-index:90; background:rgba(4,6,18,.72); display:flex; align-items:center; justify-content:center; padding:16px; animation:cvhIn .16s ease-out; }
@keyframes cvhIn { from { opacity:0 } to { opacity:1 } }
.cvh-box { width:min(400px,100%); max-height:calc(100dvh - 32px); overflow:auto; background:#141844; color:var(--ink); border:1px solid rgba(255,255,255,.1); border-radius:18px; padding:14px 18px 18px; box-shadow:0 24px 60px rgba(0,0,0,.55); display:flex; flex-direction:column; gap:10px; }
.cvh-top { display:flex; align-items:center; justify-content:space-between; } .cvh-n { font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.cvh-clip { display:flex; justify-content:center; background:#0b0e26; border-radius:12px; padding:8px; min-height:200px; align-items:center; }
.cvh-clip img { display:block; width:auto; max-width:100%; max-height:min(46dvh,420px); border-radius:8px; }
.cvh h3 { margin:2px 0 0; font-size:18px; text-wrap:balance; } .cvh p { margin:0; font-size:14px; color:var(--muted); line-height:1.45; }
.cvh .cvh-foot { font-size:13px; padding:8px 10px; border-radius:10px; background:rgba(255,255,255,.04); }
.cvh-dots { display:flex; justify-content:center; gap:7px; } .cvh-dots button { width:8px; height:8px; padding:0; border-radius:50%; border:0; background:rgba(255,255,255,.22); cursor:pointer; } .cvh-dots button[aria-pressed="true"] { background:var(--accent); width:20px; border-radius:4px; }
.cvh-nav { display:flex; justify-content:space-between; gap:8px; } .cvh-nav .cv-btn { padding:9px 16px; font-size:13.5px; } .cvh-nav .cv-go { align-self:auto; }
@media (max-width:560px) { .cvh { align-items:flex-end; padding:0; } .cvh-box { width:100%; border-radius:18px 18px 0 0; padding-bottom:calc(18px + env(safe-area-inset-bottom,0px)); max-height:96dvh; } .cvh-clip img { max-height:44dvh; } }
.cv-adj { position:sticky; top:0; z-index:2; background:linear-gradient(rgba(255,203,5,.08),rgba(255,203,5,.08)), #141844; box-shadow:0 6px 12px -6px rgba(0,0,0,.5); }
.cv-body { scroll-padding-top:120px; }
/* phone: no "save image" menu on a long press, so hold-and-drag works on iPhone */
#binder.b-cv .bpage-grid, #binder.b-cv .bpage-grid * { -webkit-touch-callout:none; -webkit-user-drag:none; }
/* fold the tools down to see the whole page */
.cv-grip { display:none; }
@media (max-width:999px) {
  .cv-tray.cv-open .cv-grip, .cv-tray.cv-mini .cv-grip { display:flex; justify-content:center; width:100%; border:0; background:none; padding:2px 0 8px; margin-top:-4px; cursor:pointer; flex:none; }
  .cv-grip i { width:42px; height:5px; border-radius:3px; background:rgba(255,255,255,.3); }
  .cv-tray.cv-mini .cv-tabs, .cv-tray.cv-mini .cv-body { display:none; }
  #binder.b-cv.b-cv-sel.b-cv-mini .results { padding-bottom:140px; }
  body:has(#binder.b-cv-mini) #toast { bottom:130px !important; }
}
/* the card being moved */
#binder.b-cv .bcard.cv-moving { outline:3px dashed var(--accent); outline-offset:3px; border-radius:8px; opacity:.75; }
#binder.b-cv-moving .bpage-grid .bcard:not(.cv-moving) { cursor:copy; }
/* quick sizes */
.cv-sizes { display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; flex:none; padding:1px; } .cv-sizes::-webkit-scrollbar { display:none; }
.cv-sizes button { flex:none; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04); color:var(--muted); font:inherit; font-size:12.5px; font-weight:800; padding:6px 12px; border-radius:999px; cursor:pointer; white-space:nowrap; }
.cv-sizes button[aria-pressed="true"] { background:var(--accent); border-color:var(--accent); color:#1a1400; }
@media (min-width:1000px) { .cv-sizes { flex-wrap:wrap; overflow:visible; } }
@media (max-width:999px) { .cv-tray.cv-open .cv-row .cv-msg, .cv-tray.cv-mini .cv-row .cv-msg { display:none; } .cv-tray.cv-open .cv-row .cv-acts, .cv-tray.cv-mini .cv-row .cv-acts { flex:1; justify-content:flex-start; flex-wrap:nowrap; } .cv-tray .cv-row .cv-acts .cv-x:last-child { margin-left:auto; } }
/* Edit help (Nov 4): a quiet nudge in the tray for first-timers instead of a pop-up; the clips are 2x for sharp screens */
.cv-nudge { display:flex; align-items:center; gap:10px; padding:10px 10px 10px 13px; margin:0 0 12px; border-radius:12px;
  background:linear-gradient(135deg,rgba(95,155,255,.16),rgba(95,155,255,.06)); border:1px solid rgba(95,155,255,.28); }
.cv-nudge > div { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:1px; }
.cv-nudge b { font-size:13.5px; }
.cv-nudge small { font-size:12px; color:var(--muted); }
.cv-nudge .cv-btn { flex:none; }
.cv-watch { display:inline-block; margin:2px 0 12px; }
.cvh-box { width:min(420px,100%); }
.cvh-clip img { width:auto; height:auto; max-width:min(360px,100%); max-height:min(62dvh,560px); }
@media (max-width:560px) { .cvh-clip img { max-height:46dvh; } }
/* desktop: the clip big on the left, the words beside it (phones keep the stacked sheet) */
@media (min-width:900px) and (min-height:600px) {
  .cvh { padding:28px; }
  .cvh-box { width:auto; max-width:min(980px,100%); max-height:calc(100dvh - 56px); display:grid; grid-template-columns:auto minmax(260px,320px);
    grid-auto-rows:min-content; column-gap:26px; row-gap:12px; padding:22px 24px 22px 22px; align-content:start; }
  .cvh-box > * { grid-column:2; }
  .cvh-box > .cvh-clip { grid-column:1; grid-row:1 / span 8; min-height:0; padding:10px; }
  .cvh-clip img { max-width:min(540px,52vw); max-height:calc(100dvh - 120px); }
  .cvh h3 { font-size:21px; margin-top:6px; } .cvh p { font-size:15px; }
  .cvh-dots { justify-content:flex-start; margin-top:6px; }
}
/* Edit: drag cards and art to move them; corner dot stretches the shape (Nov 4) */
.cv-sel .cv-hdl { position:absolute; right:-9px; bottom:-9px; width:18px; height:18px; border-radius:50%; background:var(--accent); border:3px solid #141844;
  box-shadow:0 2px 8px rgba(0,0,0,.5); pointer-events:auto; cursor:nwse-resize; touch-action:none; }
.cv-sel .cv-hdl:hover { transform:scale(1.15); }
.cv-sel span.cv-mvtab { pointer-events:auto; cursor:grab; touch-action:none; }
.cv-drop { position:absolute; z-index:7; pointer-events:none; border:3px dashed var(--accent2); border-radius:10px; background:rgba(95,155,255,.16); }
.cv-ghost { opacity:.88; transform:rotate(-2deg) scale(1.03); box-shadow:0 18px 40px rgba(0,0,0,.55); border-radius:10px; transition:none; }
.cv-lifted { opacity:.3; }
@media (hover:hover) { #binder.b-cv .bpage-grid .bcard:not(.bp-empty):not(.bp-grab-art) { cursor:grab; } }
#binder.b-cv-drag, #binder.b-cv-drag * { cursor:grabbing !important; user-select:none; }
/* Edit (desktop): a selected art piece's controls float beside it on the page */
.cv-float { position:absolute; z-index:12; display:flex; align-items:center; gap:8px; padding:7px 8px 7px 12px; border-radius:14px; white-space:nowrap;
  background:rgba(20,24,68,.97); border:1px solid rgba(255,255,255,.14); box-shadow:0 14px 34px rgba(0,0,0,.55); backdrop-filter:blur(6px); }
.cv-float .cv-zoom { display:flex; align-items:center; gap:8px; margin:0; font-size:12.5px; font-weight:800; color:var(--muted); }
.cv-float .cv-zr { width:130px; }
.cv-float .cv-btn { padding:6px 11px; font-size:12.5px; }
.cv-float .cv-lnk { font-size:12.5px; }
/* The overlay's backdrop blur makes #binder the box that fixed things sit in, so the Edit tray scrolled away with
   the pages (found while recording the reel, Nov 5). The backdrop is nearly opaque anyway: no blur while editing. */
#binder.b-cv { backdrop-filter:none; -webkit-backdrop-filter:none; }
.b-exinv-new { display:inline-block; padding:1px 7px; margin-right:4px; border-radius:999px; background:var(--accent); color:#1a1400; font-size:10px; font-weight:900; letter-spacing:.06em; }

/* What's new: binder art (one-time pop-up for returning players) */
#confirmMsg .ba-news { display:flex; flex-direction:column; gap:8px; text-align:left; }
#confirmMsg .ba-news img { width:100%; max-height:46vh; object-fit:cover; object-position:top; border-radius:12px; box-shadow:0 12px 30px rgba(0,0,0,.45); background:#0b0e26; }
#confirmMsg .ba-news-k { align-self:flex-start; margin-top:4px; padding:2px 9px; border-radius:999px; background:var(--accent); color:#1a1400; font-size:11px; font-weight:900; letter-spacing:.06em; }
#confirmMsg .ba-news b { font-size:20px; }
#confirmMsg .ba-news p { margin:0; font-size:14.5px; line-height:1.45; color:var(--muted); }
/* Set binders (Nov 2026): "70 of 207" with a thin bar; tap shows what's missing */
#binder .b-prog { display:inline-flex; align-items:center; gap:8px; font:inherit; color:inherit; background:none; border:0; padding:2px 0; cursor:pointer; }
#binder .b-prog-bar { display:inline-block; width:72px; height:5px; border-radius:9px; background:rgba(120,130,200,.22); overflow:hidden; flex:none; }
#binder .b-prog-bar i { display:block; height:100%; border-radius:9px; background:linear-gradient(90deg,#7ab4ff,#ffd42e); }
#binder .b-prog-pct { font-variant-numeric:tabular-nums; }
#binder .b-prog:hover .b-prog-pct { color:var(--ink); text-decoration:underline; }
@media (max-width:560px) { #binder .b-prog-bar { width:44px; } }
/* Binder art wall: "Post yours" (Nov 2026, preview) */
.mw-post { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:0 0 14px; padding:10px 12px; border-radius:12px; font-size:13px; color:var(--muted);
  background:rgba(255,212,46,.07); border:1px solid rgba(255,212,46,.3); }
.mw-post b { color:var(--ink); }
/* Design page share sheet (Nov 2026) */
.dsh { text-align:left; display:flex; flex-direction:column; gap:8px; }
.dsh-prev { display:flex; justify-content:center; align-items:center; min-height:120px; margin-bottom:4px; }
.dsh-prev img { display:block; max-width:100%; max-height:46vh; border-radius:10px; box-shadow:0 12px 30px rgba(0,0,0,.45); }
.dsh-load { color:var(--muted); font-size:13px; }
.dsh-k { font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-top:6px; }
.dsh-row { display:grid; grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)); gap:8px; }
.dsh-row button { display:flex; flex-direction:column; align-items:flex-start; gap:2px; text-align:left; font:inherit; color:var(--ink); cursor:pointer;
  padding:10px 12px; border-radius:12px; background:rgba(120,130,200,.1); border:1px solid rgba(120,130,200,.3); }
.dsh-row button:hover { border-color:var(--accent, #ffd42e); }
.dsh-row button b { font-size:13.5px; } .dsh-row button small { font-size:11.5px; color:var(--muted); }

/* how it works clips in the design tray (Nov 7 2026) */
.cv-howbox { display:flex; gap:12px; align-items:center; margin:2px 0 10px; padding:10px; border-radius:14px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); flex:none; }
.cv-howbox[hidden] { display:none; }
.cv-howv { flex:none; width:118px; aspect-ratio:480/566; border-radius:10px; overflow:hidden; background:#0b0e26; box-shadow:0 4px 14px rgba(0,0,0,.35); }
.cv-howv video { width:100%; height:100%; object-fit:cover; display:block; }
.cv-howt { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.cv-howt b { font-size:15px; }
.cv-howt small { font-size:13px; line-height:1.4; color:var(--muted); }
.cv-howdots { display:flex; gap:7px; margin-top:4px; }
.cv-howdots button { width:9px; height:9px; padding:0; border:0; border-radius:50%; background:rgba(255,255,255,.22); cursor:pointer; }
.cv-howdots button[aria-pressed="true"] { background:#ffcb05; width:22px; border-radius:6px; }
.cv-howx { align-self:flex-start; margin-top:2px; padding:0; font-size:12.5px; }
.cv-q-btn.on { background:rgba(255,203,5,.22); color:#ffe27a; }
@media (min-width:1000px) {
  .cv-howbox { flex-direction:column; align-items:stretch; }
  .cv-howv { width:100%; max-width:300px; align-self:center; }
}
@media (max-width:999px) {
  .cv-tray.cv-howon .cv-head .cv-msg { display:none; }   /* the clip says it */
  .cv-tray.cv-howon .cv-head .cv-acts { flex:1; justify-content:flex-start; }
  .cv-tray .cv-head .cv-acts [data-cv="exit"] { margin-left:auto; }
  .cv-tray:not(.cv-open):not(.cv-howon) .cv-head .cv-row { flex-wrap:wrap; row-gap:8px; }
  .cv-tray:not(.cv-open):not(.cv-howon) .cv-head .cv-msg { flex:1 1 100%; }
}

/* Ideas sheet cleanup (Nov 7 2026): page designs as a grid of even tiles instead of one sideways row */
#ideaSheet .id-exs { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:22px 18px; overflow:visible; padding:4px 0 0; scroll-snap-type:none; }
#ideaSheet .id-ex, #ideaSheet .id-ex.id-ex2 { width:auto; min-width:0; display:flex; flex-direction:column; gap:8px; }
#ideaSheet .id-ex .bp-ex { width:calc((100% - 30px) / 2) !important; flex:none; padding:5px; }
#ideaSheet .id-exbtn { display:flex; justify-content:center; width:100%; }
#ideaSheet .id-exbtn .ex-spread { width:100%; box-sizing:border-box; }
#ideaSheet .ex-one .bp-ex { width:58% !important; }
.id-exmeta { display:flex; flex-direction:column; gap:3px; min-height:58px; }
.id-exmeta b { font-size:15px; display:flex; align-items:center; gap:7px; }
.id-exmeta small { font-size:12.5px; color:var(--muted); line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.id-new { font-style:normal; font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:2px 7px; border-radius:999px; background:#ffcb05; color:#1c1500; }
#ideaSheet .id-use { align-self:flex-start; margin-top:0; }
.id-more { display:flex; justify-content:center; margin:2px 0 6px; }
#ideaSheet .id-h { margin-top:14px; }
#ideaSheet .id-h:first-of-type { margin-top:4px; }
@media (max-width:560px) { #ideaSheet .id-exs { grid-template-columns:1fr; gap:26px; } }
/* labels scale with their pocket (Nov 7 2026), so small previews don't overflow; older browsers keep the clamp sizes above */
@supports (container-type:size) {
  .bp-lbl { container-type:size; }
  .bp-lbl b { font-size:clamp(5px,10.5cqw,15px); }
  .bp-lbl i { font-size:clamp(4px,7cqw,11px); }
  .bp-lbl { gap:4cqw; }
}

/* Card view actions, grouped (Nov 7 2026, preview: zoomActions2 in binder.js) */
#zoom.zm2 #zoomActions + .deal-btn { display:none; }   /* only the corner close */
#zoom.zm2 #zoomActions { display:block; }
.zm2:not(#zoom) { display:flex; flex-direction:column; gap:12px; margin-top:4px; }
.zm2:not(#zoom) button { font:inherit; color:var(--ink); cursor:pointer; }
.zm2-main { display:grid; grid-template-columns:repeat(auto-fit, minmax(120px, 1fr)); gap:8px; }
.zm2-tile { display:flex; align-items:center; gap:10px; padding:11px 12px; border-radius:14px; text-align:left; min-width:0;
  border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.045); transition:transform .15s ease, border-color .15s ease, background .15s ease; }
.zm2-tile:hover { transform:translateY(-2px); border-color:rgba(255,255,255,.3); background:rgba(255,255,255,.07); }
.zm2-tile.lead { grid-column:1 / -1; border-color:rgba(255,203,5,.6); background:linear-gradient(180deg, rgba(255,203,5,.2), rgba(255,203,5,.07)); box-shadow:0 6px 18px rgba(255,203,5,.12); }
.zm2-tile.lead .zt-t { color:#ffe27a; }
.zt-ic { flex:none; width:34px; height:34px; display:flex; align-items:center; justify-content:center; font-size:19px; border-radius:10px; background:rgba(255,255,255,.07); }
.zm2-tile.lead .zt-ic { background:rgba(255,203,5,.22); }
.zt-tx { display:flex; flex-direction:column; min-width:0; }
.zt-t { font-size:14.5px; font-weight:800; line-height:1.2; }
.zt-tx small { font-size:12px; color:var(--muted); line-height:1.3; }
.zm2-tile.lead .zt-tx small { color:#f6e7b0; }
.zm2-marks { display:flex; flex-wrap:wrap; gap:7px; }
.zm2-chip { display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:999px; font-size:13px !important; font-weight:700;
  border:1px solid rgba(255,255,255,.16); background:none; color:var(--muted) !important; transition:all .15s ease; }
.zm2-chip:hover { border-color:rgba(255,255,255,.35); color:var(--ink) !important; }
.zm2-chip.on { color:#1c1500 !important; background:#ffcb05; border-color:#ffcb05; }
.zm2-other { display:flex; flex-wrap:wrap; gap:6px 14px; }
.zm2-link { display:inline-flex; align-items:center; gap:6px; padding:4px 0; border:0; background:none; font-size:13px !important; font-weight:700; color:var(--accent) !important; }
.zm2-link small { color:var(--muted); font-weight:500; }
.zm2-tidy { border-top:1px solid rgba(255,255,255,.08); padding-top:8px; }
.zm2-tidy summary { list-style:none; cursor:pointer; display:flex; align-items:baseline; gap:8px; padding:4px 0; font-size:13px; font-weight:800; color:var(--muted); }
.zm2-tidy summary::-webkit-details-marker { display:none; }
.zm2-tidy summary::after { content:"Show"; margin-left:auto; font-size:12px; font-weight:700; color:var(--accent); }
.zm2-tidy[open] summary::after { content:"Hide"; }
.zm2-tidy summary small { font-weight:500; font-size:12px; }
.zm2-tidyin { display:flex; flex-wrap:wrap; gap:7px; padding-top:8px; }
.zm2-tbtn { display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:10px; font-size:13px !important; font-weight:700;
  border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.04); }
.zm2-tbtn small { color:var(--muted); font-weight:500; }
.zm2-tbtn.danger { color:#ff9b9b !important; border-color:rgba(255,120,120,.35); }
.zm2-tbtn.danger.armed { color:#fff !important; background:#d33c3c; border-color:#d33c3c; }
.zm2-move { display:flex; align-items:center; gap:8px; width:100%; font-size:13px; color:var(--muted); }
.zm2-move select { flex:1; min-width:0; }
/* compact secondary tiles, one-line chips, details row */
.zm2-main { grid-template-columns:1fr 1fr; }
.zm2-main.three { grid-template-columns:repeat(3, minmax(0,1fr)); }
.zm2-tile:not(.lead) { flex-direction:column; align-items:center; text-align:center; gap:6px; padding:11px 6px 10px; }
.zm2-tile:not(.lead) .zt-tx { align-items:center; }
.zm2-tile:not(.lead) .zt-t { font-size:13.5px; }
.zm2-tile:not(.lead) .zt-tx small { font-size:11.5px; }
.zm2-marks { gap:6px; }
.zm2-chip { padding:6px 10px; font-size:12.5px !important; gap:5px; }
#zoom.zm2 #zoomMoreBtn { display:flex; width:100%; align-items:baseline; justify-content:space-between; border:0; border-top:1px solid rgba(255,255,255,.08); border-radius:0;
  background:none; padding:10px 0 4px; font-size:13px; font-weight:800; color:var(--muted); box-shadow:none; }
#zoom.zm2 #zoomMoreBtn::after { content:"Show"; font-size:12px; font-weight:700; color:var(--accent); }
#zoom.zm2:not(.zm-brief) #zoomMoreBtn::after { content:"Hide"; }
.zm2-marks { display:grid; grid-template-columns:repeat(auto-fit, minmax(66px, 1fr)); gap:6px; }
.zm2-chip { flex-direction:column; justify-content:center; gap:3px; padding:8px 4px 7px; border-radius:12px; font-size:11.5px !important; text-align:center; white-space:nowrap; }
.zm2-chip > span { font-size:17px; line-height:1; }
.zm2-tbtn .zt-t { font-size:13px; font-weight:700; }
.zm2-tbtn > span:first-child { font-size:13px; }
.zm2-move select { padding:6px 10px; font-size:13px; }
/* desktop: a fuller card view (Nov 7 2026) */
@media (min-width:900px) {
  /* buttons sit right under the value box, card text and details below them (Nov 8 2026) */
  #zoom.zm2 .zm-head { order:0; } #zoom.zm2 .zm-lead { order:1; } #zoom.zm2 #zoomActions { order:2; }
  #zoom.zm2 .zm-rooms { order:3; } #zoom.zm2 #zoomMoreBtn { order:4; } #zoom.zm2 .zm-cols { order:5; }
  .zm2:not(#zoom) { gap:14px; }
  .zm2-tile.lead { padding:14px 16px; }
  .zm2-tile.lead .zt-ic { width:42px; height:42px; font-size:22px; }
  .zm2-tile.lead .zt-t { font-size:16.5px; }
  .zm2-tile:not(.lead) { padding:14px 8px 12px; }
  .zm2-tile:not(.lead) .zt-ic { width:40px; height:40px; font-size:21px; }
  .zm2-chip { padding:10px 4px 9px; font-size:12.5px !important; }
}
/* phones: the buttons come right after your copy; card text and details after them; a tighter value box (Nov 7 2026) */
@media (max-width:899px) {
  #zoom.zm2 .zm-head { order:0; } #zoom.zm2 .zm-lead { order:1; } #zoom.zm2 #zoomActions { order:2; }
  #zoom.zm2 .zm-rooms { order:3; } #zoom.zm2 #zoomMoreBtn { order:4; } #zoom.zm2 .zm-cols { order:5; }
  #zoom.zm2 .zm-lead { padding:10px 12px; gap:5px; }
  #zoom.zm2 .zm-lead .zl-rows { flex-direction:row; flex-wrap:wrap; gap:2px 12px; font-size:12px; }
  #zoom.zm2 .zoom-meta { gap:10px; }
}
.zm2-main.four { grid-template-columns:1fr 1fr; }
.zm2-main.one { grid-template-columns:1fr; }
.zm2-main.one .zm2-tile { flex-direction:row; justify-content:center; gap:10px; }
.zm2-note { font-size:12.5px; line-height:1.45; color:var(--muted); margin-top:-4px; }
.zm2-note b { color:var(--ink); }
@media (min-width:900px) { .zm2-main.four { grid-template-columns:repeat(4, minmax(0,1fr)); } }