/* ── DISPLAY FONT (wishmaker wordmark + hero) ── */
/* Terminal Grotesque by Raphaël Bastide — SIL Open Font License 1.1 */
@font-face {
  font-family:'Terminal Grotesque';
  src:url('../fonts/terminal-grotesque.woff2') format('woff2'),
      url('../fonts/terminal-grotesque.woff') format('woff');
  font-weight:normal;font-style:normal;font-display:swap;
}
:root { --font-display:'Terminal Grotesque','Inter',system-ui,sans-serif; }

/* ── BODY FONT (everything except wordmark/display) ── */
/* JetBrains Mono (variable, wght) via Fontsource — SIL Open Font License 1.1 */
@font-face {
  font-family:'JetBrains Mono';
  src:url('../fonts/jetbrains-mono-normal.woff2') format('woff2');
  font-weight:400 800;font-style:normal;font-display:swap;
}
@font-face {
  font-family:'JetBrains Mono';
  src:url('../fonts/jetbrains-mono-italic.woff2') format('woff2');
  font-weight:400 800;font-style:italic;font-display:swap;
}
:root { --font-body:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace; }

/* ── WISHMAKER TOKENS ────────────────────────── */
/* Starlight (light) — ivory canvas · navy ink · Jirachi gold */
:root {
  /* Surfaces */
  --bg:       #FBF5E4;
  --surface:  #FFFFFF;
  --surface-2:#F4EFDD;
  --surface-3:#ECE6CF;
  /* Borders (navy tint) */
  --hairline:     rgba(42,49,87,.07);
  --border:       rgba(42,49,87,.13);
  --border-strong:rgba(42,49,87,.24);
  /* Text */
  --ink:   #2A3157;
  --ink-2: #5B6189;
  --ink-3: #8A8DA8;
  --ink-4: #B8BBCE;
  /* Accent — Jirachi gold */
  --accent:      #F2C84B;
  --accent-fill: #F2C84B;
  --accent-ink:  #7A5C00;
  --accent-tint: rgba(242,200,75,.12);
  /* Jirachi palette */
  --star-teal: #5FB8A6;
  --star-pink: #EFA9C0;
  /* Redesign additions — derived from --ac-rgb below so every Pokémon
     theme in js/themes.js gets a correct value automatically, no JS
     changes needed. --shadow-color adapts light/dark per the design
     spec but doesn't vary per accent color (no --ink RGB triplet exists
     yet to derive it from). */
  --accent-wash: rgb(var(--ac-rgb) / .08);
  --accent-line: rgb(var(--ac-rgb) / .35);
  --shadow-color: rgba(42,49,87,.12);
  /* Status */
  --ok:     #5E8C61;
  --warn:   #B08A3E;
  --danger: #B5524A;
  /* Radii */
  --r:13px;--rl:18px;
  /* Legacy aliases */
  --e-bg:var(--bg);
  --e-s1:var(--surface);
  --e-s2:var(--surface-2);
  --e-s3:var(--surface-3);
  --e-b1:var(--hairline);
  --e-b2:var(--border);
  --e-b3:var(--border-strong);
  --e-t1:var(--ink);
  --e-t2:var(--ink-2);
  --e-t3:var(--ink-3);
  --e-t4:var(--ink-4);
  --e-ac:var(--accent);
  --e-at:var(--accent-fill);
  /* RGB triplets */
  --ac-rgb: 242 200 75;
  --ok-rgb: 94 140 97;
  --glass: rgba(255,255,255,.72);
}
/* Midnight Wish (dark) — deep navy · warm gold */
[data-theme="dark"]{
  --bg:       #0E1228;
  --surface:  #161B33;
  --surface-2:#1E2442;
  --surface-3:#252B50;
  --hairline:     rgba(244,241,228,.07);
  --border:       rgba(244,241,228,.13);
  --border-strong:rgba(244,241,228,.24);
  --ink:   #F4F1E4;
  --ink-2: #9CA0BD;
  --ink-3: #6B7094;
  --ink-4: #4A4E6A;
  --accent:      #FCE38A;
  --accent-fill: #FCE38A;
  --accent-ink:  #2D1E00;
  --accent-tint: rgba(252,227,138,.12);
  --star-teal: #7DD8C4;
  --star-pink: #F4B8D0;
  --accent-wash: rgb(var(--ac-rgb) / .08);
  --accent-line: rgb(var(--ac-rgb) / .35);
  --shadow-color: rgba(0,0,0,.4);
  --ok:     #6EC9A7;
  --warn:   #F2C84B;
  --danger: #FF7B72;
  --ac-rgb: 252 227 138;
  --ok-rgb: 110 201 167;
  --glass: rgba(20,25,48,.68);
}

/* ── BASE RESET ─────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;font-family:var(--font-body);overflow:hidden}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-thumb{background:rgba(128,128,128,.3);border-radius:3px}
.view{display:none;height:100vh;flex-direction:column}
.view.active{display:flex}

/* ════ DASHBOARD ════ */
#view-dashboard{background:var(--e-bg);color:var(--e-t1)}
.dh{display:flex;align-items:center;justify-content:space-between;padding:0 28px;height:52px;background:var(--e-s1);border-bottom:1px solid var(--e-b1);flex-shrink:0}
.d-logo{font-size:17px;font-weight:700;color:var(--e-t1);letter-spacing:-.3px;font-family:var(--font-body)}
.d-logo em{font-style:normal;color:var(--e-ac)}
.db{flex:1;overflow-y:auto;padding:36px 40px;max-width:1080px;width:100%;margin:0 auto}
.db::-webkit-scrollbar{width:5px}
.db h1{font-size:26px;font-weight:700;color:var(--e-t1);letter-spacing:-.5px;margin-bottom:4px}
.db-sub{color:var(--e-t3);font-size:13.5px;margin-bottom:40px;line-height:1.6}
.d-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:40px}
.d-stat{background:var(--e-s1);border:1px solid var(--e-b1);border-radius:var(--r);padding:18px 22px}
.d-sv{font-size:30px;font-weight:700;color:var(--e-t1);line-height:1;margin-bottom:3px}
.d-sl{font-size:11px;color:var(--e-t3);font-weight:500;letter-spacing:.01em}
.d-sh{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.d-sh h2{font-size:15px;font-weight:600;color:var(--e-t1)}
.d-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;margin-bottom:60px}
.bc{background:var(--bg);border-radius:10px;overflow:hidden;cursor:pointer;box-shadow:0 8px 18px var(--shadow-color);transition:transform .15s ease,box-shadow .15s ease;position:relative}
.bc:hover{transform:translateY(-3px);box-shadow:0 14px 26px var(--shadow-color)}
.bc-thumb{height:110px;background:var(--e-s2);display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--e-b1);position:relative;overflow:hidden}
.bc-mini{display:grid;gap:3px;opacity:.65}
.bc-slot{background:var(--e-b2);border-radius:2px}
.bc-slot.f{background:var(--e-ac);opacity:.55}
.bc-meta{padding:12px 14px 13px}
.bc-tag{font-size:10px;color:var(--accent-ink);background:var(--accent);border:none;border-radius:5px;padding:2px 8px;display:inline-block;margin-bottom:6px;font-weight:700;letter-spacing:.03em}
.bc-name{font-size:13px;font-weight:600;color:var(--e-t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:3px}
.bc-info{font-size:11px;color:var(--e-t3)}
.bc-acts{position:absolute;top:7px;right:7px;display:flex;gap:4px;opacity:0;transition:.18s}
.bc:hover .bc-acts{opacity:1}
.nc{border:1.5px dashed var(--e-b2);border-radius:var(--r);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;cursor:pointer;min-height:178px;transition:all .18s;color:var(--e-t3)}
.nc:hover{border-color:var(--e-ac);background:rgb(var(--ac-rgb)/.05);color:var(--e-t1)}
.nc-icon{width:38px;height:38px;border-radius:50%;background:var(--e-s2);border:1px solid var(--e-b2);display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--e-t3);transition:all .18s}
.nc:hover .nc-icon{color:var(--e-ac);border-color:rgb(var(--ac-rgb)/.35)}
.nc p{font-size:13px;font-weight:500}
/* dash buttons */
.xb{display:inline-flex;align-items:center;gap:5px;background:var(--e-s2);border:1px solid var(--e-b1);border-radius:8px;color:var(--e-t2);font-size:11px;font-weight:600;padding:7px 12px;cursor:pointer;transition:all .18s;font-family:var(--font-body)}
.xb:hover{background:var(--e-s3);border-color:var(--e-b2);color:var(--e-t1)}
.xb-p{background:var(--e-at);border-color:var(--e-at);color:var(--accent-ink)}
.xb-p:hover{opacity:.88}
.xb-sm{padding:5px 9px;font-size:10px}
.bc-edit{padding:5px 7px}
.bc-edit svg{display:block}
.xb-d{border-color:rgba(200,70,70,.3);color:#e07575}
.xb-d:hover{background:rgba(200,70,70,.08)}

/* ════ EDITOR ════ */
#view-editor{background:var(--e-bg);color:var(--e-t1);overflow:hidden}
.eh{display:flex;align-items:center;gap:10px;padding:0 18px;height:52px;background:var(--e-s1);border-bottom:1px solid var(--e-b1);flex-shrink:0}
.eh-logo{font-size:15px;font-weight:700;color:var(--e-t1);white-space:nowrap;letter-spacing:-.2px}
.eh-logo em{font-style:normal;color:var(--e-ac)}
.eh-sep{width:1px;height:22px;background:var(--e-b1);flex-shrink:0}
.bn-edit{background:transparent;border:1px solid transparent;border-radius:7px;color:var(--e-t1);font-size:13px;font-weight:600;padding:5px 9px;font-family:var(--font-body);transition:border-color .18s;max-width:180px}
.bn-edit:hover{border-color:var(--e-b2)}
.bn-edit:focus{border-color:var(--e-b3);outline:none;background:var(--e-s2)}
.et-tag{font-size:10px;color:var(--accent-ink);background:var(--accent);border:none;border-radius:5px;padding:2px 8px;font-weight:700;letter-spacing:.03em;white-space:nowrap}
.eh-r{margin-left:auto;display:flex;gap:7px;align-items:center}
.sd{font-size:11px;color:var(--e-t3)}
.sd.on{color:var(--ok)}
.tg-btn{display:flex;align-items:center;gap:6px;padding:5px 11px;background:var(--e-s2);border:1px solid var(--e-b2);border-radius:20px;cursor:pointer;font-size:11px;color:var(--e-t2);font-family:var(--font-body);font-weight:500;transition:all .18s;white-space:nowrap}
.tg-btn:hover{border-color:var(--e-b3);color:var(--e-t1)}
.eb{display:grid;height:calc(100vh - 52px);overflow:hidden;transition:grid-template-columns .22s ease}
.eb.no-trans{transition:none!important}
.lp,.rp{transition:opacity .18s ease;overflow:hidden}
.eb.hide-left .lp{opacity:0;pointer-events:none}
.eb.hide-right .rp{opacity:0;pointer-events:none}
.eb.hide-both .lp,.eb.hide-both .rp{opacity:0;pointer-events:none}
.rs-h{cursor:col-resize;background:transparent;z-index:15;user-select:none;position:relative;transition:background .12s;flex-shrink:0}
.rs-h::after{content:'';position:absolute;top:0;bottom:0;left:-4px;right:-4px}
.rs-h:hover,.rs-h.rs-active{background:var(--e-b2)}
.panel-tog{
  position:absolute;top:50%;transform:translateY(-50%);
  z-index:20;width:18px;height:44px;
  background:var(--e-s1);border:1px solid var(--e-b2);
  color:var(--e-t3);font-size:10px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .18s,color .18s,opacity .18s;
  line-height:1;
}
.panel-tog:hover{background:var(--e-s2);color:var(--e-t1)}
.panel-tog.left{left:0;border-radius:0 6px 6px 0;border-left:none}
.panel-tog.right{right:0;border-radius:6px 0 0 6px;border-right:none}
.lp{background:var(--e-s1);border-right:1px solid var(--e-b1);display:flex;flex-direction:column;overflow:hidden;min-width:0}
.pts{display:flex;border-bottom:1px solid var(--e-b1);flex-shrink:0}
.pt{flex:1;padding:10px 4px;text-align:center;font-size:10px;font-weight:600;letter-spacing:.03em;cursor:pointer;color:var(--e-t3);border-bottom:2px solid transparent;transition:all .18s}
.pt.on{color:var(--e-t1);border-bottom-color:var(--e-ac)}
.pt:hover:not(.on){color:var(--e-t2)}
.ps{flex:1;overflow-y:auto;padding:13px}
.ps::-webkit-scrollbar{width:4px}
.ps::-webkit-scrollbar-thumb{background:var(--e-b2)}
.tc{display:none}.tc.on{display:block}
.sl{font-size:10px;font-weight:600;letter-spacing:.02em;color:var(--e-t3);display:block;margin-bottom:7px}
.ei{background:var(--e-s2);border:1px solid var(--e-b2);border-radius:8px;color:var(--e-t1);font-family:var(--font-body);font-size:12px;padding:8px 11px;outline:none;transition:border-color .18s;width:100%}
.ei::placeholder{color:var(--e-t3)}
.ei:focus{border-color:var(--e-b3)}
.es{background:var(--e-s2);border:1px solid var(--e-b2);border-radius:8px;color:var(--e-t1);font-family:var(--font-body);font-size:11px;padding:7px 26px 7px 10px;outline:none;cursor:pointer;width:100%;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236e6e73'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center;transition:border-color .18s}
.es:disabled{opacity:.45;cursor:not-allowed}
.es:focus{border-color:var(--e-b3)}
.eb2{display:inline-flex;align-items:center;gap:5px;background:var(--hairline);border:none;border-radius:8px;color:var(--ink);font-family:var(--font-body);font-size:11.5px;font-weight:600;padding:6px 12px;cursor:pointer;transition:all .18s;white-space:nowrap}
.eb2:hover{background:var(--surface-2)}
.eb2:active{transform:scale(.97)}
.eb2-sm{padding:5px 9px;font-size:10px;border-radius:7px}
.eb2-p{background:var(--accent);border-color:transparent;color:var(--accent-ink);font-weight:700}
.eb2-p:hover{box-shadow:0 0 0 3px var(--accent-tint);filter:brightness(1.08)}
.eb2-a{background:var(--accent);border-color:transparent;color:var(--accent-ink);font-weight:700}
.eb2-a:hover{box-shadow:0 0 0 3px var(--accent-tint);filter:brightness(1.08)}
.eb2-g{background:transparent;border-color:transparent;color:var(--ink-3)}
.eb2-g:hover{background:var(--surface-2);color:var(--ink-2)}
.eb2-d{background:transparent;border:1px solid rgba(192,69,58,.35);color:#e07a70}
.eb2-d:hover{background:rgba(192,69,58,.1)}
.c-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:5px}
.c-tile{background:var(--e-s2);border:1px solid var(--e-b1);border-radius:8px;overflow:hidden;cursor:grab;aspect-ratio:7/9.5;position:relative;transition:all .18s}
.c-tile:hover{border-color:transparent;transform:scale(1.04);box-shadow:0 8px 16px var(--shadow-color);z-index:2}
.c-tile img{width:100%;height:100%;object-fit:cover;display:block}
.c-tile-n{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(0,0,0,.85));padding:10px 4px 4px;font-size:8px;color:#fff;text-align:center;font-weight:500;pointer-events:none}
.c-tile[draggable=true]{cursor:grab}
.c-tile[draggable=true]:active{cursor:grabbing}
.empty-s{text-align:center;padding:26px 8px;color:var(--e-t3);font-size:12px;grid-column:1/-1;line-height:1.6}
.spin-w{display:flex;align-items:center;justify-content:center;gap:8px;padding:24px;color:var(--e-t3);font-size:12px;grid-column:1/-1}
.spin{display:inline-block;width:14px;height:14px;border:2px solid var(--e-b2);border-top-color:var(--e-ac);border-radius:50%;animation:spin .6s linear infinite;flex-shrink:0}
@keyframes spin{to{transform:rotate(360deg)}}
.load-more-bar{
  position:sticky;bottom:0;left:0;right:0;
  background:transparent;
  border-top:none;
  padding:10px 13px;
  margin:0 -13px -13px;
  display:none;
}
.load-more-bar.visible{display:block}
.load-more-bar .eb2{width:100%;justify-content:center;font-size:12px;padding:9px}
.uz{border:2px dashed var(--e-b2);border-radius:12px;padding:22px 10px;text-align:center;cursor:pointer;transition:all .2s;margin-bottom:12px}
.uz:hover,.uz.dov{border-color:var(--e-b3);background:var(--e-s2)}
.uz-ic{font-size:24px;margin-bottom:5px;color:var(--e-t3);line-height:0}
.uz-ic svg{display:inline-block}
.uz p{font-size:12px;color:var(--e-t3)}
.uz small{font-size:10px;color:var(--e-t4)}
/* Uploads: fixed-height tiles whose width follows each image's aspect ratio */
.up-grid{display:flex;flex-wrap:wrap;gap:6px;align-content:flex-start}
.up-tile{height:200px;width:auto;max-width:320px;flex:0 0 auto;background:var(--e-s2);border:1px solid var(--e-b1);border-radius:8px;overflow:hidden;cursor:grab;position:relative;transition:border-color .18s}
.up-tile:hover{border-color:var(--e-b3)}
.up-tile img{height:100%;width:auto;object-fit:cover;display:block}
.up-del{position:absolute;top:3px;right:3px;background:rgba(0,0,0,.7);border:none;border-radius:50%;width:17px;height:17px;font-size:10px;color:#fff;cursor:pointer;display:none;align-items:center;justify-content:center}
.up-tile:hover .up-del{display:flex}
.up-crop{position:absolute;top:3px;right:24px;background:rgba(0,0,0,.7);border:none;border-radius:50%;width:17px;height:17px;padding:0;color:#fff;cursor:pointer;display:none;align-items:center;justify-content:center}
.up-crop svg{width:11px;height:11px}
.up-tile:hover .up-crop{display:flex}

/* ── crop modal ──────────────────────────────── */
#cropStage{position:relative;max-width:100%;margin:16px auto 0;overflow:hidden;border-radius:8px;background:#000;line-height:0;touch-action:none}
#cropStage img{display:block;max-width:100%;max-height:60vh;width:auto;height:auto;margin:0 auto;user-select:none;-webkit-user-drag:none}
.crop-rect{position:absolute;box-shadow:0 0 0 9999px rgba(0,0,0,.55);border:1.5px solid #fff;cursor:move;touch-action:none}
.crop-handle{position:absolute;width:16px;height:16px;background:#fff;border:1.5px solid var(--e-ac);border-radius:50%;touch-action:none}
.crop-handle[data-h="nw"]{left:-8px;top:-8px;cursor:nwse-resize}
.crop-handle[data-h="ne"]{right:-8px;top:-8px;cursor:nesw-resize}
.crop-handle[data-h="sw"]{left:-8px;bottom:-8px;cursor:nesw-resize}
.crop-handle[data-h="se"]{right:-8px;bottom:-8px;cursor:nwse-resize}
.ca{background:var(--e-bg);overflow:hidden;display:flex;flex-direction:column;align-items:center;position:relative}
.ca-center{flex:1;display:flex;align-items:center;justify-content:center;width:100%;min-height:0}
/* Floating frosted toolbar pill (redesign) — was a full-width sticky bar
   with a bottom border; now a centered, blurred, self-sized pill that
   sits in normal flow above the canvas. Same flex-wrap/center layout, so
   every icon/popover inside keeps working unchanged. */
.ct{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center;flex-shrink:0;
  width:fit-content;max-width:calc(100% - 32px);margin:14px auto 4px;
  padding:8px 10px;border-radius:14px;
  background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid var(--border);
  box-shadow:0 12px 30px var(--shadow-color);
  position:relative;z-index:10;}
.zg{display:flex;align-items:center;gap:6px}
.zg input[type=range]{width:80px;-webkit-appearance:none;height:4px;background:var(--e-s3);border-radius:2px;border:none;padding:0;outline:none}
.zg input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;background:var(--e-ac);cursor:pointer}
.zv{font-size:11px;color:var(--e-t3);font-weight:600;min-width:34px}
.ts{width:1px;height:18px;background:var(--border);flex-shrink:0}
.pc{font-size:12px;color:var(--e-t2);font-weight:500;min-width:90px;text-align:center}
.sw2{background:var(--e-s1);border:1px solid var(--e-b1);border-radius:18px;padding:18px 22px 14px;display:inline-flex;flex-direction:column;align-items:center;box-shadow:0 16px 60px rgba(0,0,0,.25)}
.sw-hdr{position:relative;display:flex;align-items:center;justify-content:center;width:100%;margin-bottom:12px}
.sw-acts{position:absolute;right:0;top:50%;transform:translateY(-50%);display:flex;gap:4px}
.sw-lbl{font-size:10px;color:var(--e-t3);font-weight:600;letter-spacing:.01em;font-style:italic}
.p-spread{display:flex;gap:16px;align-items:flex-start;justify-content:center}
.p-spread.single-page{justify-content:center}
.b-page{background:var(--e-bg);border-radius:7px;padding:10px;border:1px solid var(--e-b1);position:relative}
.sg{display:grid;gap:5px;position:relative}
.slot{background:var(--e-s2);border:1.5px dashed var(--e-b2);border-radius:5px;position:relative;overflow:hidden;cursor:pointer;transition:all .18s;display:flex;align-items:center;justify-content:center}
.slot:hover{border-color:var(--e-b3);background:var(--e-s3)}
.slot.filled{border-style:solid;border-color:transparent;background:var(--e-bg)}
.slot.filled:hover{border-color:var(--e-b2);transform:scale(1.04);z-index:2}
.slot.sel{border-style:solid;border-color:var(--e-ac)!important;box-shadow:0 0 0 1px var(--e-ac);z-index:2}
.slot.dov2{border-color:var(--e-ac)!important;background:rgb(var(--ac-rgb)/.15)!important;border-style:solid!important;box-shadow:inset 0 0 0 2px var(--e-ac);}
.slot img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.s-ph{display:flex;flex-direction:column;align-items:center;gap:2px;pointer-events:none}
.s-ph .sp-p{font-size:16px;color:var(--e-b2);line-height:1}
.s-ph .sp-d{font-size:7px;color:var(--e-t4);font-weight:700;letter-spacing:.05em}
.s-x{position:absolute;top:5px;right:5px;background:rgba(18,18,22,.45);border:none;border-radius:5px;width:20px;height:20px;color:rgba(255,255,255,.9);cursor:pointer;display:none;align-items:center;justify-content:center;z-index:5;padding:0;backdrop-filter:blur(2px)}
.s-x:hover{background:rgba(18,18,22,.7)}
.s-x svg{display:block}
.s-x:hover{background:rgba(0,0,0,.88)}
.slot:hover .s-x{display:flex}
.rp{background:var(--e-s1);border-left:1px solid var(--e-b1);display:flex;flex-direction:column;overflow:hidden;min-width:0}
.rp-h{padding:13px 14px 9px;border-bottom:1px solid var(--e-b1);font-size:11px;font-weight:600;letter-spacing:.02em;color:var(--e-t3);flex-shrink:0}
.rp-b{flex:1;overflow-y:auto;padding:13px}
.rp-b::-webkit-scrollbar{width:4px}
.rp-b::-webkit-scrollbar-thumb{background:var(--e-b2)}
.rp-tc{display:none}.rp-tc.on{display:block}
.rp-em{font-size:12px;color:var(--e-t3);line-height:1.7}
.ir{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid var(--e-b1);font-size:11px}
.ir:last-child{border-bottom:none}
.ik{color:var(--e-t3);font-weight:600;font-size:9.5px;letter-spacing:.02em}
.iv{color:var(--e-t2)}
.iv.ok{color:var(--e-ac)}
.mg{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:6px}
.mo{background:var(--e-s2);border:1px solid var(--e-b1);border-radius:7px;padding:7px 3px;cursor:pointer;text-align:center;transition:all .18s;font-size:9.5px;color:var(--e-t3);font-weight:700}
.mo:hover{border-color:var(--e-b2);color:var(--e-t1)}
.mo.on{background:rgb(var(--ac-rgb)/.15);border-color:var(--e-ac);color:var(--e-ac)}
.fr{display:flex;border:1px solid var(--e-b1);border-radius:7px;overflow:hidden;margin-top:6px}
.fo{flex:1;padding:6px 3px;text-align:center;font-size:9.5px;font-weight:700;cursor:pointer;color:var(--e-t3);transition:all .15s}
.fo.on{background:rgb(var(--ac-rgb)/.15);color:var(--e-ac)}
.ib{display:flex;flex-direction:column;gap:5px;margin-top:12px}
.a-hint{font-size:10px;color:var(--e-t3);margin-bottom:8px;line-height:1.6}
.a-hint a{color:var(--e-ac);text-decoration:none}
.a-hint a:hover{text-decoration:underline}
.lang-filters{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.lang-pill{display:flex;align-items:center;cursor:pointer;user-select:none}
.lang-pill input{display:none}
.lang-pill span{
  display:inline-flex;flex-direction:column;align-items:center;
  padding:6px 10px;border-radius:8px;font-size:11px;font-weight:700;
  background:var(--e-s2);border:1px solid var(--e-b2);
  color:var(--e-t3);transition:all .18s;line-height:1.2;
}
.lang-pill .lf-sub{font-size:9px;font-weight:400;color:var(--e-t4);letter-spacing:0;text-transform:none}
.lang-pill input:checked+span{
  background:rgb(var(--ac-rgb)/.15);border-color:var(--e-ac);color:var(--e-t1);
}
.lang-pill input:checked+span .lf-sub{color:var(--e-at)}
.lang-pill:hover span{border-color:var(--e-b3);color:var(--e-t2)}
.c-tile .lang-badge{
  position:absolute;top:3px;left:3px;
  background:rgba(0,0,0,.72);color:#fff;
  font-size:8px;font-weight:700;letter-spacing:.04em;
  padding:1px 5px;border-radius:4px;pointer-events:none;
  line-height:1.6;
}
.c-tile .lang-flag{
  padding:0;background:none;border-radius:3px;overflow:hidden;
  width:18px;height:12px;display:block;line-height:0;
  box-shadow:0 0 0 1px rgba(0,0,0,.25),0 1px 2px rgba(0,0,0,.35);
}
.c-tile .lang-flag svg{display:block;width:100%;height:100%}
.pw-key-status{display:inline-block;font-size:9px;font-weight:700;letter-spacing:.04em;padding:1px 7px;border-radius:4px}
.pw-key-missing{background:rgba(200,70,70,.12);color:#e07070;border:1px solid rgba(200,70,70,.28)}
.pw-key-ok{background:var(--accent);color:var(--accent-ink);border:none}
.c-tile-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--e-s2)}
.c-tile-star{position:absolute;top:3px;right:3px;background:rgba(0,0,0,.55);border:none;border-radius:50%;width:20px;height:20px;font-size:12px;color:#ccc;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transition:opacity .15s,background .15s,color .15s;z-index:4;padding:0;line-height:1;font-family:sans-serif}
.c-tile:hover .c-tile-star{opacity:1}
.c-tile-star.on{color:var(--accent)}
.c-tile-star:hover{background:rgba(0,0,0,.82)!important;opacity:1!important}
.c-tile-star svg{display:block}
.url-add{display:flex;gap:6px;margin-bottom:10px}
/* modals */
.mo-ov{position:fixed;inset:0;background:rgba(10,12,20,.55);display:none;align-items:center;justify-content:center;z-index:900;backdrop-filter:blur(9px) saturate(1.1);-webkit-backdrop-filter:blur(9px) saturate(1.1)}
.mo-ov.open{display:flex}
/* Unified modal surface — translucent, glassy, rounded (shared by all modals) */
.mo-box,.sd-box{background:color-mix(in srgb,var(--e-s1) 84%,transparent);backdrop-filter:blur(22px) saturate(1.4);-webkit-backdrop-filter:blur(22px) saturate(1.4);border:1px solid color-mix(in srgb,var(--e-b2) 75%,transparent);box-shadow:0 24px 70px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.06)}
.mo-box{border-radius:18px;padding:28px;width:450px;max-width:92vw}
.mo-box h2{font-size:18px;font-weight:700;color:var(--e-t1);margin-bottom:7px;letter-spacing:-.2px}
.mo-box p{font-size:13px;color:var(--e-t3);margin-bottom:18px;line-height:1.6}
.mo-box label{font-size:10px;font-weight:700;color:var(--e-t3);letter-spacing:.02em;display:block;margin-bottom:5px;margin-top:13px}
.mo-box label:first-of-type{margin-top:0}
.mo-btns{display:flex;gap:9px;justify-content:flex-end;margin-top:20px}
/* Binder-settings modal packs multiple buttons (clear page/delete on the
   left, export [desktop only]/cancel/apply on the right) -- too many to
   fit one row at the modal's default 450px width without spilling past
   the box. Group them into two flex clusters that wrap onto their own
   line independently, rather than letting the whole row overflow
   uncontained. margin-left:auto on the right cluster keeps cancel/apply
   pinned to the bottom-right corner even when it wraps onto its own
   line -- justify-content:space-between alone only right-aligns it
   while both clusters still share one line. */
.mo-btns-wrap{flex-wrap:wrap;row-gap:10px;justify-content:space-between}
.mo-btns-left,.mo-btns-right{display:flex;flex-wrap:wrap;gap:9px}
.mo-btns-right{margin-left:auto}
/* Page-removal confirm is a small, centered modal (thumbnails already
   centered via .rp-thumbs) -- keep cancel/remove centered under them
   instead of the default bottom-right alignment used by wider modals. */
#moRemovePage .mo-btns{justify-content:center}
.bt-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-top:5px}
.bt-opt{background:var(--e-s2);border:1px solid var(--e-b1);border-radius:9px;padding:11px 9px;cursor:pointer;text-align:center;transition:all .18s}
.bt-opt:hover{border-color:var(--e-b2)}
.bt-opt.on{border-color:var(--e-ac);background:rgb(var(--ac-rgb)/.1)}
.bt-ic{font-size:22px;margin-bottom:3px;display:block}
.bt-nm{font-size:12px;font-weight:700;color:var(--e-t2)}
.bt-sb{font-size:10px;color:var(--e-t3)}
.clr-row{display:flex;align-items:center;gap:9px;margin-top:6px;margin-bottom:2px}
input[type=color]{width:34px;height:28px;border:1px solid var(--e-b2);border-radius:6px;padding:2px 3px;background:var(--e-s2);cursor:pointer;flex-shrink:0;-webkit-appearance:none}
input[type=color]::-webkit-color-swatch-wrapper{padding:0;border-radius:4px}
input[type=color]::-webkit-color-swatch{border:none;border-radius:4px}
.clr-hex{font-size:11px;color:var(--e-t3);font-family:var(--font-body);font-weight:500;letter-spacing:.04em}
.ic-btn{position:relative;background:transparent;border:1px solid transparent;border-radius:7px;width:26px;height:26px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--e-t4);transition:background .18s,border-color .18s,color .18s;flex-shrink:0;padding:0}
.ic-btn:hover{background:var(--e-s2);border-color:var(--e-b2);color:var(--e-t1)}
.ic-btn:active{transform:scale(.95)}
#g-tip{position:fixed;background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:8px 11px;font-size:10.5px;font-weight:700;font-family:var(--font-body);color:var(--ink);white-space:nowrap;pointer-events:none;z-index:9999;box-shadow:0 12px 24px var(--shadow-color);opacity:0;transition:opacity .15s;display:none}
#g-tip::after{content:'';position:absolute;top:-4px;right:12px;width:8px;height:8px;background:var(--surface-2);border-left:1px solid var(--border);border-top:1px solid var(--border);transform:rotate(45deg)}
/* longer explanatory tips (eg. binder-mode help) need to wrap + keep the
   blank line between paragraphs instead of collapsing onto one line */
#g-tip.g-tip-multi{white-space:pre-line;max-width:260px;line-height:1.55}
/* Bottom-left, width:fit-content per the redesign (was bottom-center). */
.toast{position:fixed;bottom:22px;left:50%;transform:translate(-50%,14px);background:var(--e-s1);border:1px solid var(--e-b2);border-radius:10px;padding:9px 18px;font-size:12px;color:var(--e-t1);z-index:2000;opacity:0;transition:all .26s;pointer-events:none;box-shadow:0 6px 28px rgba(0,0,0,.5);white-space:nowrap;width:fit-content;max-width:calc(100% - 44px)}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.ok{border-color:rgb(var(--ac-rgb)/.5)}
.toast.err{border-color:rgba(200,70,70,.4)}
.app-footer{background:var(--e-s1);border-top:1px solid var(--e-b1);padding:5px 20px;font-size:9px;color:var(--e-t3);text-align:center;line-height:1.5;font-style:italic;flex-shrink:0}
.ca{padding-bottom:20px}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.fi{animation:fadeIn .3s ease both}
@keyframes slideIn{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}
.si{animation:slideIn .22s ease}
.gh{opacity:.35}
/* ─── COLLECTION TRACKING (imported binders) ──
   Un-owned cards render in black & white; checking the
   top-left box brings the card back to full colour. */
.slot img{transition:filter .3s ease,opacity .3s ease}
.slot.unowned img{filter:grayscale(1);opacity:.82}
.slot .own-chk{position:absolute;top:5px;left:5px;z-index:3;display:flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:none;border-radius:5px;background:rgba(18,18,22,.45);color:rgba(255,255,255,.9);cursor:pointer;opacity:.4;transition:opacity .15s,background .15s;backdrop-filter:blur(2px)}
.slot:hover .own-chk{opacity:1}
/* owned → checkbox hidden until the slot is hovered, so the card stays clean */
.slot .own-chk.on{background:rgb(var(--ok-rgb)/.78);opacity:0;pointer-events:none}
.slot:hover .own-chk.on{opacity:.9;pointer-events:auto}
.slot .own-chk:hover{background:rgba(18,18,22,.7)}
.slot .own-chk.on:hover{background:rgb(var(--ok-rgb)/.95)}
/* binder thumbnail page strip (home screen auto-scroll) */
.bc-mini-wrap{overflow:hidden;position:relative}
.bc-mini-strip{display:flex;height:100%;transition:transform .7s cubic-bezier(.4,0,.2,1)}
/* ─── SETTINGS EXTRAS ────────────────────────── */
.set-help{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;background:var(--surface-3,var(--border));color:var(--ink-2);font-size:10px;font-weight:700;cursor:help;vertical-align:1px;margin-left:4px}
.set-check{width:16px;height:16px;accent-color:var(--accent);cursor:pointer}
/* holo intensity + reduce motion (body classes from prefs) */
body.holo-subtle .vh-fx{opacity:.35 !important}
body.holo-off .vh-fx{display:none}
body.holo-off .slot.vh-reverse,body.holo-off .slot.vh-holo{box-shadow:none}
body.reduce-motion .vh-fx{animation:none}
body.reduce-motion *{animation-duration:.01s !important;transition-duration:.01s !important}
/* ─── HOLO / REVERSE VARIANT SLOTS ──────────── */
.slot.vh .vh-fx{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;
  background:
    linear-gradient(115deg,transparent 12%,rgba(255,255,255,.30) 26%,transparent 40%),
    linear-gradient(115deg,transparent 16%,rgba(255,64,160,.38) 32%,rgba(64,224,255,.42) 46%,rgba(255,232,96,.36) 58%,rgba(96,255,168,.38) 72%,transparent 88%);
  background-size:250% 250%,250% 250%;mix-blend-mode:hard-light;opacity:.7;
  animation:vh-shimmer 4s ease-in-out infinite alternate}
@keyframes vh-shimmer{0%{background-position:0% 50%,0% 50%}100%{background-position:100% 50%,100% 50%}}
.slot.vh-reverse{box-shadow:0 0 10px 2px rgba(96,140,255,.6)}
.slot.vh-holo{box-shadow:0 0 10px 2px rgba(255,196,64,.6)}
.slot .vh-chip{position:absolute;top:5px;right:5px;z-index:3;display:flex;align-items:center;justify-content:center;width:16px;height:16px;color:#fff;background:rgba(18,18,22,.55);border-radius:4px;pointer-events:none;backdrop-filter:blur(2px)}
.slot.vh-reverse .vh-chip{background:rgba(72,110,235,.75)}
.slot.vh-holo .vh-chip{background:rgba(212,150,20,.8)}
/* ─── MASTER-SET PROGRESS (spread toolbar) ───── */
.ct-prog{display:flex;align-items:center;gap:8px;padding:0 6px 0 12px;border-left:1px solid var(--e-b1)}
.ct-prog-txt{font-size:10.5px;font-weight:600;color:var(--e-t3);white-space:nowrap}
.ct-prog-bar{width:90px;height:4px;border-radius:2px;background:var(--e-b2);overflow:hidden}
.ct-prog-fill{display:block;height:100%;background:var(--star-teal);border-radius:2px;transition:width .3s ease}
/* Set progress (dashboard card) */
.bc-prog{height:3px;border-radius:2px;background:var(--e-b2);overflow:hidden;margin-top:4px;}
.bc-prog-fill{height:100%;background:var(--star-teal);border-radius:2px;}
/* Set badge on dashboard card */
.bc-set-badge{display:inline-block;font-size:9px;font-weight:700;color:var(--accent-ink);background:var(--accent);border:none;border-radius:4px;padding:1px 6px;margin-left:5px;vertical-align:middle;letter-spacing:.02em;}
/* Card search modal */
.cm-box{width:min(1140px,96vw);height:92vh;padding:0;display:flex;flex-direction:column}
.cm-hdr{display:flex;align-items:flex-start;justify-content:space-between;padding:20px 22px 0;flex-shrink:0}
.cm-hdr h2{margin-bottom:3px}
.cm-slot-lbl{font-size:11px;color:var(--e-t3);margin-top:1px}
.cm-tabs{display:flex;border-bottom:1px solid var(--e-b1);padding:0 10px;margin-top:14px;flex-shrink:0;gap:2px}
.cm-tab{padding:8px 12px;font-size:11px;font-weight:600;letter-spacing:.01em;cursor:pointer;color:var(--e-t3);border-bottom:2px solid transparent;transition:all .15s;position:relative;bottom:-1px;white-space:nowrap}
.cm-tab.on{color:var(--e-t1);border-bottom-color:var(--e-ac)}
.cm-tab:hover:not(.on){color:var(--e-t2)}
.cm-badge{background:var(--e-ac);color:var(--accent-ink);font-size:9px;font-weight:700;border-radius:8px;padding:1px 5px;margin-left:3px;line-height:1;display:inline-block;vertical-align:middle}
.cm-pane{display:none;flex:1;overflow-y:auto;padding:14px 22px 18px;min-height:0;flex-direction:column}
.cm-pane.on{display:flex}
#mt-search{padding:0;overflow:hidden}
.cm-search-layout{display:flex;flex:1;min-height:0;overflow:hidden}
.cm-filters{width:210px;flex-shrink:0;padding:16px 14px;border-right:1px solid var(--e-b1);display:flex;flex-direction:column;gap:0;overflow-y:auto}
.cm-filters .sl{margin-top:8px;margin-bottom:4px;display:block}
.cm-filters .sl:first-of-type,.cm-filters .a-hint+.sl{margin-top:0}
.cm-results{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;position:relative}
/* Floating "database incomplete" bubble */
.missing-bubble{position:absolute;right:16px;bottom:14px;z-index:20;width:300px;max-width:calc(100% - 32px);padding:13px 15px 14px;border-radius:14px;background:color-mix(in srgb,var(--e-s1) 78%,transparent);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);border:1px solid color-mix(in srgb,var(--e-b2) 70%,transparent);box-shadow:0 12px 36px rgba(0,0,0,.22);animation:mb-rise .26s cubic-bezier(.34,1.04,.64,1) both}
@keyframes mb-rise{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
.missing-bubble-x{position:absolute;top:8px;right:9px;width:20px;height:20px;border:none;background:none;color:var(--e-t3);font-size:15px;line-height:1;cursor:pointer;border-radius:50%;display:flex;align-items:center;justify-content:center}
.missing-bubble-x:hover{background:var(--e-s3);color:var(--e-t1)}
.missing-bubble-title{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--e-t1);margin-bottom:5px}
.missing-bubble-dot{width:7px;height:7px;border-radius:50%;background:#f0a23b;box-shadow:0 0 0 3px color-mix(in srgb,#f0a23b 28%,transparent);flex-shrink:0}
.missing-bubble-body{font-size:11.5px;line-height:1.55;color:var(--e-t2)}
.missing-bubble-body a{color:var(--e-ac);font-weight:600;text-decoration:none}
.missing-bubble-body a:hover{text-decoration:underline}
/* ─── DRAG-TO-EDGE PAGE TURN HINT ────────────── */
.detail-center.edge-l::before,.detail-center.edge-r::after{
  content:'';position:absolute;top:0;bottom:0;width:64px;z-index:30;pointer-events:none;
  animation:edge-pulse 1.1s ease-in-out infinite}
.detail-center.edge-l::before{left:0;background:linear-gradient(to right,var(--accent-tint),transparent)}
.detail-center.edge-r::after{right:0;background:linear-gradient(to left,var(--accent-tint),transparent)}
@keyframes edge-pulse{0%,100%{opacity:.45}50%{opacity:1}}

/* CSV import result bubble — same look, but fixed to the viewport since it
   lives in the normal page flow (collection page) rather than inside a
   modal with its own positioned container. */
.import-bubble{position:fixed;right:20px;bottom:20px;z-index:200}
.missing-bubble-dot.dot-ok{background:var(--ok);box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 28%,transparent)}
.missing-bubble-dot.dot-err{background:var(--danger);box-shadow:0 0 0 3px color-mix(in srgb,var(--danger) 28%,transparent)}
.cm-cg-wrap{flex:1;overflow-y:auto;min-height:0;padding:12px 14px 6px}
.cm-cg-wrap .c-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));margin-top:0}
/* Collection / favorites / uploads grids in the card modal: match search tile size */
#mt-collection .c-grid,#mt-favorites .c-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.cm-pgbar{flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:10px;padding:9px 14px 10px;border-top:1px solid var(--e-b1)}
.cm-pglbl{font-size:12px;color:var(--e-t3);font-weight:600;min-width:56px;text-align:center}
/* Empty slot hover */
.slot:not(.filled):hover{background:rgb(var(--ac-rgb)/.07)!important;border-color:var(--e-ac)!important;border-style:solid!important}
.slot:not(.filled):hover .sp-p{color:var(--e-ac);font-size:20px}
/* Card pile button on tiles */
.c-tile-pile{position:absolute;top:26px;right:3px;background:rgba(0,0,0,.55);border:none;border-radius:50%;width:20px;height:20px;font-size:12px;color:#bbb;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transition:opacity .15s;z-index:4;padding:0;line-height:1;font-family:sans-serif}
.c-tile:hover .c-tile-pile{opacity:1}
.c-tile-pile.in-pile{color:var(--e-ac)}
.c-tile-pile:hover{background:rgba(0,0,0,.82)!important;opacity:1!important}
.c-tile-pile svg{display:block}

/* ─── Merge gap handles ─────────────────────── */
.mg-handle{position:absolute;display:flex;align-items:center;justify-content:center;z-index:15;background:transparent;border:none;padding:0;cursor:pointer}
.mg-handle.mg-h{transform:translateX(-50%)}
.mg-handle.mg-v{transform:translateY(-50%)}
.mg-icon{width:20px;height:20px;border-radius:50%;background:var(--surface);border:1px solid var(--border);box-shadow:0 2px 10px rgba(0,0,0,.14);display:flex;align-items:center;justify-content:center;color:var(--ink-3);opacity:0;transition:opacity .15s,transform .15s,color .12s;pointer-events:none}
.mg-handle:hover .mg-icon{opacity:1;color:var(--ink);transform:scale(1.12)}
/* Unmerge button — always visible on merged slots */
.s-mg-un{position:absolute;top:3px;right:3px;width:15px;height:15px;border-radius:50%;background:rgba(0,0,0,.55);border:none;color:rgba(255,255,255,.85);cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:6;padding:0;transition:background .15s,color .15s}
.s-mg-un:hover{background:rgba(0,0,0,.82);color:#fff}
/* Shift the ✕ clear button left when unmerge button is showing */
.slot.merged:hover .s-x{right:29px}

/* ─── PHASE 10: Motion & Vibrancy ────────────── */

/* Modal box entrance */
@keyframes mo-rise{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.mo-ov.open .mo-box{animation:mo-rise .22s cubic-bezier(.34,1.04,.64,1) both}
.mo-ov.open .av-box{animation:mo-rise .22s cubic-bezier(.34,1.04,.64,1) both}

/* Card modal — wider box entrance */
.mo-ov.open .cm-box{animation:mo-rise .22s cubic-bezier(.34,1.04,.64,1) both}

/* Smooth panel open/close via grid-template-columns transition */
#appBody{transition:grid-template-columns .32s cubic-bezier(.65,0,.35,1)}

/* Sidebar entrance on load */
@keyframes sidebar-in{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
.sidebar{animation:sidebar-in .28s .05s cubic-bezier(.4,0,.2,1) both}

/* Inspector panel slide in */
@keyframes insp-in{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}
#appBody.insp-open .insp{animation:insp-in .2s cubic-bezier(.4,0,.2,1) both}

/* Spread canvas fade on view switch */
@keyframes view-fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
#viewLibrary,#viewEditor{animation:view-fade .2s .04s ease both}

/* Binder cards stagger */
.bc{animation:fadeIn .25s ease both}
.bc:nth-child(1){animation-delay:.03s}
.bc:nth-child(2){animation-delay:.07s}
.bc:nth-child(3){animation-delay:.11s}
.bc:nth-child(4){animation-delay:.15s}
.nc{animation:fadeIn .25s .18s ease both}

/* Toolbar buttons */
.btn-icon{transition:background .15s,color .15s,opacity .12s}
.btn-icon:hover{background:var(--surface-2)}
.btn-icon.active{background:var(--surface-3);color:var(--ink)}

/* Reduced motion override */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ─── WISHMAKER: Star + Constellation ──────── */

/* Subtle constellation field behind the canvas */
.ca{
  background-image:
    radial-gradient(circle,rgba(42,49,87,.12) 1px,transparent 1px),
    radial-gradient(circle,rgba(42,49,87,.07) 1px,transparent 1px),
    radial-gradient(circle,rgba(42,49,87,.05) 1px,transparent 1px);
  background-size:80px 80px,55px 55px,35px 35px;
  background-position:0 0,22px 30px,44px 12px;
}
[data-theme="dark"] .ca{
  background-image:
    radial-gradient(circle,rgba(252,227,138,.18) 1px,transparent 1px),
    radial-gradient(circle,rgba(252,227,138,.09) 1px,transparent 1px),
    radial-gradient(circle,rgba(125,216,196,.07) 1px,transparent 1px);
  background-size:80px 80px,55px 55px,35px 35px;
  background-position:0 0,22px 30px,44px 12px;
}

/* ─── MULTI-CARD ADD MODE ────────────────────── */
.c-tile.multi-on,.up-tile.multi-on{outline:3px solid var(--e-ac);outline-offset:-1px;box-shadow:0 0 0 4px color-mix(in srgb,var(--e-ac) 25%,transparent)}
.c-tile.multi-on::after,.up-tile.multi-on::after{content:'';position:absolute;top:4px;left:4px;width:18px;height:18px;border-radius:50%;z-index:6;background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='%231a1408'%20d='m9.55%2015.15l8.475-8.475q.3-.3.7-.3t.7.3t.3.713t-.3.712l-9.175%209.2q-.3.3-.7.3t-.7-.3L4.55%2013q-.3-.3-.288-.712t.313-.713t.713-.3t.712.3z'/%3E%3C/svg%3E") center/13px no-repeat,var(--e-ac)}
.cm-multibar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 22px;border-top:1px solid var(--e-b1);flex-shrink:0;background:var(--e-s1)}
.cm-multi-count{font-size:12.5px;font-weight:600;color:var(--e-t2)}

/* ─── SIDEBAR BINDER CONTEXT MENU ──────────── */
.ctx-menu{position:fixed;z-index:200;min-width:160px;padding:5px;background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:0 12px 32px rgba(0,0,0,.22);animation:mb-rise .14s ease both}
.ctx-item{display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;border:none;background:none;color:var(--ink);font-family:inherit;font-size:12.5px;font-weight:500;text-align:left;cursor:pointer;border-radius:7px}
.ctx-item:hover{background:var(--surface-2)}
.ctx-item svg{flex-shrink:0;color:var(--accent)}
/* Binder drag-to-reorder */
.src-row[draggable=true]{cursor:grab}
.src-row.binder-dragging,.bc.binder-dragging{opacity:.45}
.src-row.drop-before{box-shadow:inset 0 3px 0 -1px var(--accent)}
.src-row.drop-after{box-shadow:inset 0 -3px 0 -1px var(--accent)}
.bc.drop-before{box-shadow:inset 3px 0 0 -1px var(--accent)}
.bc.drop-after{box-shadow:inset -3px 0 0 -1px var(--accent)}

/* ─── PRINT MODAL ────────────────────────────── */
.print-check{display:flex;align-items:center;gap:8px;margin-top:13px;font-size:12px;font-weight:500;color:var(--e-t2);cursor:pointer;text-transform:none;letter-spacing:normal}
.print-check input{width:15px;height:15px;cursor:pointer;accent-color:var(--accent)}
.print-head{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:14px;margin-bottom:7px}
.print-info{font-size:11px;color:var(--e-t3);font-weight:600;white-space:nowrap}
/* ─── PAGE PICKER (print + pdf select) ───────── */
.page-picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px;max-height:340px;overflow-y:auto;padding:8px;border:1px solid var(--e-b1);border-radius:10px;background:color-mix(in srgb,var(--e-s2) 55%,transparent)}
.pp-page{position:relative;cursor:pointer;border:2px solid transparent;border-radius:8px;padding:5px;transition:border-color .12s,opacity .12s;background:var(--e-s1)}
.pp-page:not(.on){opacity:.45}
.pp-page.on{border-color:var(--e-ac)}
.pp-thumb{display:flex;align-items:center;justify-content:center;background:var(--e-s2);border-radius:5px;padding:6px;box-sizing:border-box;min-height:120px}
.pp-grid{display:grid;gap:2px;height:118px;width:auto}
.pp-cell{border-radius:2px;background:var(--e-s3,#cfcfd4);overflow:hidden;background-size:cover;background-position:center;background-repeat:no-repeat}
/* ─── remove-page confirm (mobile) ───────────── */
.rp-thumbs{display:flex;gap:12px;justify-content:center;margin:14px 0}
.rp-thumbs .pp-thumb{flex:1;max-width:140px}
.rp-thumbs .pp-lbl{text-align:center;font-size:10.5px;color:var(--e-t3);margin-top:5px}
.pp-lbl{font-size:10.5px;font-weight:600;color:var(--e-t2);text-align:center;margin-top:4px}
.pp-page.on::after{content:'';position:absolute;top:7px;right:7px;width:18px;height:18px;border-radius:50%;z-index:2;background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='%231a1408'%20d='m9.55%2015.15l8.475-8.475q.3-.3.7-.3t.7.3t.3.713t-.3.712l-9.175%209.2q-.3.3-.7.3t-.7-.3L4.55%2013q-.3-.3-.288-.712t.313-.713t.713-.3t.712.3z'/%3E%3C/svg%3E") center/13px no-repeat,var(--e-ac)}
.page-picker .empty-s{grid-column:1/-1;text-align:center;font-size:12px;color:var(--e-t3);padding:24px}

/* ─── PDF SCOPE ──────────────────────────────── */

/* ─── COVER PAGE ─────────────────────────────── */
.cover-page{position:relative;border-radius:9px;overflow:hidden;cursor:pointer;border:1px solid var(--e-b1);box-shadow:0 6px 24px rgba(0,0,0,.18);display:flex;align-items:center;justify-content:center;background-color:var(--e-s2)}
.cover-page .cover-inner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:8%;text-align:center}
.cover-title{font-family:var(--font-display,inherit);font-size:clamp(18px,4vw,40px);font-weight:700;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.7),0 1px 3px rgba(0,0,0,.8);line-height:1.2;letter-spacing:.01em}
.cover-empty{color:var(--e-t3);display:flex;flex-direction:column;align-items:center;gap:5px}
.cover-empty-ic{font-size:30px;color:var(--e-ac);opacity:.7}
.cover-empty-sub{font-size:11px;opacity:.7}
.cover-edit-btn{position:absolute;bottom:10px;right:10px;border:none;border-radius:7px;background:rgba(0,0,0,.55);color:#fff;font-family:inherit;font-size:11px;font-weight:600;padding:6px 11px;cursor:pointer;backdrop-filter:blur(6px);opacity:0;transition:opacity .15s}
.cover-page:hover .cover-edit-btn{opacity:1}
.cover-art-prev{height:150px;border-radius:10px;border:1px solid var(--e-b1);background:var(--e-s2) center/cover no-repeat;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--e-t3);margin-bottom:8px}
.cover-art-actions{display:flex;gap:8px}

/* ─── PAGE OVERVIEW ──────────────────────────── */
.overview-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;max-height:420px;overflow-y:auto;padding:6px;margin-top:6px}
.ov-page{position:relative;border:2px solid var(--e-b1);border-radius:8px;padding:5px;background:var(--e-s1);cursor:grab;transition:border-color .12s,opacity .12s,transform .12s}
.ov-page.cover{border-color:var(--e-ac)}
.ov-page.ov-dragging{opacity:.4}
.ov-page.ov-over{border-color:var(--e-ac);transform:scale(1.03)}
.ov-cover-thumb{display:flex;align-items:center;justify-content:center;height:118px;border-radius:5px;background:var(--e-s2) center/cover no-repeat;font-size:11px;font-weight:700;color:var(--e-t2);text-align:center;padding:6px;box-sizing:border-box}
.ov-lbl{font-size:10.5px;font-weight:600;color:var(--e-t2);text-align:center;margin-top:4px}

/* ─── BINDER SEARCH POPOVER ──────────────────── */
.binder-search-wrap{position:relative;display:inline-flex}
/* position:fixed (not absolute), positioned via JS in toggleBinderSearch()
   -- .ct (the toolbar this lives in) needs overflow-x:auto on mobile for
   horizontal scroll safety, which per spec also computes overflow-y to
   auto, silently clipping any position:absolute popover trying to escape
   vertically below it (same fix as .adm-ov-menu in css/admin.css). */
.binder-search-pop{position:fixed;z-index:60;display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:0 12px 32px rgba(0,0,0,.2);animation:mb-rise .14s ease both}
.binder-search-pop input{width:200px;font-family:inherit;font-size:12.5px;color:var(--ink);background:var(--surface-2);border:1px solid var(--border);border-radius:7px;padding:7px 10px;outline:none}
.binder-search-pop input:focus{border-color:var(--accent)}
.binder-search-count{font-size:11px;color:var(--ink-3);font-weight:600;white-space:nowrap;min-width:34px;text-align:center}
.bs-nav{display:flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0;border:none;border-radius:6px;background:var(--surface-2);color:var(--ink-2);cursor:pointer;transition:background .12s,color .12s}
.bs-nav:hover:not(:disabled){background:var(--accent);color:var(--accent-ink)}
.bs-nav:disabled{opacity:.35;cursor:default}
/* highlighted slots when searching the binder */
.slot.search-hit{outline:3px solid color-mix(in srgb,var(--accent) 60%,transparent);outline-offset:1px;z-index:3}
.slot.search-current{outline:3px solid var(--accent);outline-offset:1px;box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 30%,transparent);z-index:4}
.slot.search-dim{opacity:.28}
.ic-btn:disabled{opacity:.35;cursor:default;pointer-events:none}

/* ─── SLEEVES TAB ────────────────────────────── */
#mt-sleeves .c-grid{grid-template-columns:repeat(auto-fill,minmax(115px,1fr))}

.btn-icon.active{color:var(--accent)}

/* ─── SETTINGS PAGE ──────────────────────────── */
/* Redesign: flat divided list (top-border between rows) instead of
   individually boxed cards -- .settings-list drops its own row gap since
   each row's border-top now provides the separation. */
.settings-list{display:flex;flex-direction:column;gap:0}
.settings-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;background:transparent;border:none;border-top:1px solid var(--hairline);border-radius:0}
.settings-list .settings-row:first-child{border-top:none}
.settings-row-text{flex:1;min-width:0}
.settings-row-title{font-size:13px;font-weight:600;color:var(--ink);margin-bottom:3px}
.settings-row-desc{font-size:11.5px;color:var(--ink-3);line-height:1.5}
/* .select defaults to width:100% (fine inside its own narrow column
   elsewhere), which inside a settings-row let it inflate to whatever share
   of the row's ~975px width the flex algorithm handed it — up to 800px+ for
   a two-word dropdown — squeezing the description into two lines. Every
   settings dropdown gets one fixed, shared width instead: wide enough for
   the longest option text across all of them ("jirachi (default)" /
   "next to each card"), so they're both compact and lined up with each
   other rather than each claiming its own arbitrary share of the row. */
.settings-row .select{flex:none;width:190px}
/* Theme swatch grid (redesign) -- replaces the old plain <select> for
   colorTheme with clickable Pokémon sprite icons, per the design. */
/* Theme row stacks vertically (subtext on top, swatches on their own
   full-width row below) instead of squeezing 8 swatches into a narrow
   column beside the text. */
.settings-row:has(.theme-swatch-grid){flex-direction:column;align-items:stretch;gap:12px}
.theme-swatch-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:10px;width:100%}
.theme-swatch{display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer;padding:6px;border-radius:10px;background:transparent;border:none;box-shadow:0 0 0 2px transparent;transition:background .15s,box-shadow .15s;font-family:inherit;outline:none}
.theme-swatch:hover{background:var(--hairline)}
.theme-swatch.on{background:var(--hairline);box-shadow:0 0 0 2px var(--accent)}
.theme-swatch-icon{width:40px;height:40px;display:flex;align-items:center;justify-content:center}
.theme-swatch-icon img{width:40px;height:40px;object-fit:contain;image-rendering:pixelated;display:block}
.theme-swatch[data-t="deoxys"] .theme-swatch-icon img,
.theme-swatch[data-t="darkrai"] .theme-swatch-icon img,
.theme-swatch[data-t="arceus"] .theme-swatch-icon img{width:32px;height:32px}
.theme-swatch span{font-size:9px;color:var(--ink-3)}
/* align-items:flex-start (not flex-end) so every row's checkbox lands in
   the same left column regardless of how long its label is -- flex-end
   was right-aligning each row's own edge, letting differently-sized
   labels (english vs japanese) throw the checkboxes out of alignment. */
.set-langs{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.set-lang{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:500;color:var(--ink-2);cursor:pointer;white-space:nowrap}
.set-lang.on{color:var(--ink)}
.set-lang input{width:15px;height:15px;cursor:pointer;accent-color:var(--accent)}
.set-lang input:disabled{cursor:not-allowed;opacity:.6}

/* Wish sparkle: "Wish granted ✦" toast gets a golden glow */
.toast.wish{border-color:var(--accent);box-shadow:0 6px 28px rgba(242,200,75,.28);}
[data-theme="dark"] .toast.wish{box-shadow:0 6px 28px rgba(252,227,138,.22);}

/* ─── SLOT DETAIL MODAL ──────────────────────── */
.sd-box{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:14px;border-radius:18px;padding:30px 26px 24px;width:min(340px,92vw);max-height:90vh;overflow-y:auto;text-transform:lowercase}
.mo-ov.open .sd-box{animation:mo-rise .22s cubic-bezier(.34,1.04,.64,1) both}
.sd-x{position:absolute;top:12px;right:12px;width:26px;height:26px;display:flex;align-items:center;justify-content:center;border:none;border-radius:50%;background:var(--e-s2);color:var(--e-t3);font-size:13px;cursor:pointer;transition:all .15s;z-index:2}
.sd-x:hover{background:var(--e-s3);color:var(--e-t1)}
/* true pokémon card ratio (63×88mm) — 7/9.7 was slightly off, so object-fit
   cover shaved a sliver off the artwork */
/* flex-shrink:0 — as a flex child this was being squashed vertically when the
   sheet's content got tall, distorting the card's proportions */
.sd-img-wrap{align-self:center;width:170px;aspect-ratio:63/88;flex-shrink:0;border-radius:11px;overflow:hidden;background:var(--e-s2);box-shadow:0 10px 28px rgba(0,0,0,.20)}
.sd-img-wrap img{width:100%;height:100%;object-fit:cover;display:block}
.sd-name{font-size:17px;font-weight:700;color:var(--e-t1);line-height:1.25;text-align:center}
.sd-meta{display:flex;flex-direction:column;gap:0;border:1px solid var(--e-b1);border-radius:10px;overflow:hidden;background:var(--e-s2)}
.sd-meta-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:12px;padding:8px 12px}
.sd-meta-row+.sd-meta-row{border-top:1px solid var(--e-b1)}
.sd-mk{color:var(--e-t3);flex-shrink:0}
.sd-mv{color:var(--e-t1);font-weight:600;text-align:right;min-width:0;overflow-wrap:anywhere}
.sd-note{font-size:12px;color:var(--e-t3);text-align:center;padding:12px;line-height:1.4}
.sd-section-label{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:lowercase;color:var(--e-t3);margin-bottom:-7px}
#sdDataForm{display:flex;flex-direction:column;gap:4px;margin-top:10px}
.sd-data-lbl{font-size:10px;font-weight:700;letter-spacing:.04em;color:var(--e-t3);margin-top:8px}
.sd-data-lbl:first-child{margin-top:0}
.sd-data-btns{display:flex;gap:8px;margin-top:10px}
.sd-data-btns .eb2{flex:1;justify-content:center}
.sd-card-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sd-btn{display:flex;align-items:center;justify-content:center;gap:6px;padding:9px 8px;border:1px solid var(--e-b2);border-radius:9px;background:var(--e-s2);color:var(--e-t2);font-family:inherit;font-size:11.5px;font-weight:600;cursor:pointer;transition:all .15s}
.sd-btn:hover{border-color:var(--e-b3);color:var(--e-t1);background:var(--e-s3)}
.sd-btn svg{flex-shrink:0}
.sd-btn.sd-btn-active{border-color:var(--e-ac);color:var(--e-ac);background:color-mix(in srgb,var(--e-ac) 9%,transparent)}
.sd-fr{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.sd-slot-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sd-slot-actions .eb2{justify-content:center;text-transform:lowercase}
#sdFitSection,#sdSlotSection,#sdVariantSection{display:flex;flex-direction:column;gap:8px}
.eb2.on{border-color:var(--e-ac);color:var(--e-ac);background:color-mix(in srgb,var(--e-ac) 9%,transparent)}
/* ─── HOMEPAGE COLLECTION / FAVORITES PREVIEWS ── */
.home-cards{display:grid;grid-template-columns:repeat(8,1fr);gap:10px}
.home-card{aspect-ratio:63/88;border-radius:7px;overflow:hidden;cursor:pointer;background:var(--surface-2);border:1px solid var(--border);transition:transform .15s ease,box-shadow .15s ease}
.home-card:hover{transform:scale(1.04);box-shadow:0 10px 20px var(--shadow-color)}
.home-card img{width:100%;height:100%;object-fit:cover;display:block}
.home-empty{font-size:12px;color:var(--ink-4);padding:22px 0 4px;text-align:center}
/* page-overview per-page delete (matches the slot remove button) */
.ov-page{position:relative}
.ov-page .ov-del{position:absolute;top:5px;right:5px;display:none;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:none;border-radius:5px;background:rgba(18,18,22,.45);color:rgba(255,255,255,.9);cursor:pointer;z-index:3;backdrop-filter:blur(2px)}
.ov-page:hover .ov-del{display:flex}
.ov-page .ov-del:hover{background:rgba(18,18,22,.7)}
#sdFitSection .sd-section-label,#sdSlotSection .sd-section-label{margin-bottom:0}


/* ─── ACCOUNT / CLOUD POPOVER ──────────────────
   Redesigned per design_handoff_wishmaker_redesign "login_profile_handoff"
   (Profile Popover Mockups 1a signed-out + 1c signed-in, minus the
   admin-dashboard button and sync-status row per that handoff's README —
   admin access lives in settings/account, sync status on the toolbar icon).
   Colors are theme CSS vars (not the handoff's literal hex) so this follows
   whatever theme the visitor has chosen, defaulting to jirachi dark. */
.user-pop{position:fixed;z-index:120;width:270px;background:radial-gradient(ellipse at 50% 0%,var(--surface-2),var(--bg));border:1px solid var(--border);border-radius:14px;box-shadow:0 24px 50px var(--shadow-color);padding:18px;font-family:var(--font-body);animation:mb-rise .16s ease both;box-sizing:border-box}
.pp-heading{font-family:var(--font-body);font-weight:700;font-size:15px;color:var(--ink);margin-bottom:14px}
.user-sub{font-size:11.5px;line-height:1.55;color:var(--ink-3);margin-bottom:11px}
.user-input{width:100%;font-family:var(--font-body);font-size:11.5px;color:var(--ink);background:var(--hairline);border:1px solid var(--border);border-radius:7px;padding:9px 11px;margin-bottom:8px;outline:none;box-sizing:border-box}
.user-input::placeholder{color:var(--ink-3)}
.user-input:focus{border-color:var(--accent)}
.user-btns{display:flex;gap:8px;margin-top:4px}
.user-btns .eb2{flex:1;justify-content:center}
.user-msg{font-size:11px;line-height:1.45;color:var(--accent);margin-top:9px;min-height:0;word-break:break-word}
.btn-icon.signed-in{color:var(--ok)}
.btn-icon.active{color:var(--accent)}

/* popover — pill action buttons (sign in/create account, settings/sign out,
   oauth) share this pair, sized per-context via the rules further down */
.pp-btn-solid{font-family:var(--font-body);font-weight:700;color:var(--accent-ink);background:var(--accent);border:none;border-radius:7px;cursor:pointer;text-align:center}
.pp-btn-outline{font-family:var(--font-body);font-weight:600;color:var(--ink);background:var(--hairline);border:1px solid var(--border);border-radius:7px;cursor:pointer;text-align:center}
.pp-btn-outline:hover,.pp-btn-solid:hover{filter:brightness(1.06)}

/* signed out — tabs kept (vs. the mockup's two-button pair) since the
   popover has always toggled sign-in/create-account this way; reskinned
   to the new palette only, not restructured */
.user-tabs{display:flex;gap:6px;margin-bottom:11px}
.user-tab{flex:1;font-family:var(--font-body);font-size:11px;font-weight:700;color:var(--ink);background:var(--hairline);border:1px solid var(--border);border-radius:7px;padding:8px 6px;cursor:pointer;transition:all .15s}
.user-tab.on{color:var(--accent-ink);background:var(--accent);border-color:var(--accent)}
#authSubmitBtn{width:100%;padding:9px 0;font-size:11px;margin-bottom:8px}
.user-or{display:flex;align-items:center;gap:7px;margin:10px 0;font-size:9px;letter-spacing:.06em;text-transform:lowercase;color:var(--ink-3)}
.user-or::before,.user-or::after{content:'';flex:1;height:1px;background:var(--hairline)}
.user-oauth{display:flex;gap:7px}
.user-oauth .pp-btn-outline{flex:1;padding:8px 0;font-size:10.5px;text-transform:lowercase}

/* signed in — avatar + username/email row, needs-username prompt (option
   1d, restyled into this same panel per how the flow already works),
   settings/sign-out pair */
.pp-user-row{display:flex;align-items:center;gap:10px;margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--hairline)}
/* button (was a div) so it's keyboard/click-accessible as the avatar-picker
   trigger (openAvatarPopover) -- border/padding/cursor reset since buttons
   carry their own UA defaults that a plain div never had to fight. Circular
   (was border-radius:9px) to match the sprite-avatar treatment everywhere
   else in the picker (52px/60px/64px/50px circles, all border-radius:50%). */
.pp-avatar{width:36px;height:36px;border-radius:50%;background:var(--accent-tint);border:none;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;font-family:var(--font-body);font-weight:700;font-size:14px;color:var(--accent);flex-shrink:0;overflow:hidden}
.pp-avatar.has-img{background:var(--surface-2)}
.pp-avatar img{width:100%;height:100%;object-fit:cover;image-rendering:pixelated}
.pp-user-meta{min-width:0}
.user-email{font-size:12.5px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp-email-sub{font-size:10px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp-needname-desc{font-size:11px;color:var(--ink-2);line-height:1.5;margin:0 0 10px}
#userSetName{margin-bottom:14px}
#userSetName .user-input{margin-bottom:10px}
#userSetName .pp-btn-solid{width:100%;padding:9px 0;font-size:11px}
.user-btns .pp-btn-solid,.user-btns .pp-btn-outline{flex:1;padding:9px 0;font-size:11px}

/* ─── LOCK SCREEN ──────────────────────────────
   Redesigned per "loading_screen_handoff" (#lockLoading) and
   "login_profile_handoff" (#lockForm, option 1b — borderless, full
   starfield, no card). Create-account keeps the lock screen's existing
   mechanic (relabel + sliding email field + back arrow) restyled, since
   neither mockup covers that state on its own. */
.lock-screen{position:fixed;inset:0;z-index:600;overflow-y:auto}
.lock-form{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 25%,var(--surface),var(--bg) 75%)}
.lock-stars{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.ll-star{position:absolute;border-radius:50%;background:var(--ink);animation:llStarLife ease-in-out infinite}
.ll-star.ll-glow{box-shadow:0 0 6px color-mix(in srgb,var(--ink) 60%,transparent)}
.ll-star.ll-glow-accent{background:var(--accent);box-shadow:0 0 6px rgb(var(--ac-rgb)/.6)}
@keyframes llStarLife{0%{transform:translateY(6px);opacity:0}20%{opacity:1}50%{opacity:.35}80%{opacity:1}100%{transform:translateY(-6px);opacity:0}}
.lock-back{position:fixed;top:20px;left:20px;z-index:2;display:flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;border:1px solid var(--border);border-radius:9px;background:var(--hairline);color:var(--ink-2);cursor:pointer;transition:background .15s,color .15s}
.lock-back:hover{background:var(--surface-2);color:var(--ink)}
.lock-form-inner{position:relative;z-index:1;width:100%;max-width:300px;padding:32px 28px;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center;animation:mb-rise .2s ease both}
.lock-wordmark-static{font-family:var(--font-body);font-weight:700;font-size:30px;letter-spacing:.02em;color:var(--ink);margin:0}
.lock-fields{width:100%;display:flex;flex-direction:column;gap:9px}
.lock-input{width:100%;font-family:var(--font-body);font-size:12.5px;color:var(--ink);background:transparent;border:none;border-bottom:1px solid var(--border-strong);border-radius:0;padding:8px 2px;outline:none;box-sizing:border-box;text-align:left}
.lock-input::placeholder{color:var(--ink-3)}
.lock-input:focus{border-bottom-color:var(--accent)}
.lock-actions{width:100%;display:flex;gap:8px}
.lock-btn{flex:1;font-family:var(--font-body);font-size:11.5px;padding:10px 0;border-radius:8px;cursor:pointer;text-align:center}
.lock-btn-solid{font-weight:700;color:var(--accent-ink);background:var(--accent);border:none}
.lock-btn-outline{font-weight:600;color:var(--ink);background:transparent;border:1px solid var(--border-strong)}
.lock-oauth-block{width:100%}
.lock-legal{margin-top:18px;font-size:10.5px;line-height:1.5;color:var(--ink-3);text-align:center}
.lock-legal a{color:var(--ink-2);text-decoration:underline}
.lock-legal a:hover{color:var(--accent)}
.lock-oauth{display:flex;gap:8px;margin-top:2px}
.lock-oauth-btn{flex:1;font-family:var(--font-body);font-size:11px;font-weight:600;color:var(--ink);background:var(--hairline);border:1px solid var(--border);border-radius:8px;padding:9px 0;cursor:pointer;text-transform:lowercase}
.lock-oauth-btn:hover{background:var(--surface-2)}

/* ── loading overlay (post sign-in, pre initial-sync) ── */
.lock-loading{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 30%,var(--surface),var(--bg) 75%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;transition:opacity .45s ease,filter .45s ease;opacity:1;filter:blur(0px)}
.lock-loading.revealed{opacity:0;filter:blur(16px)}
.ll-wordmark{font-family:var(--font-body);font-weight:700;font-size:26px;letter-spacing:.03em;color:var(--ink);display:flex;position:relative;z-index:1}
.ll-wordmark span{display:inline-block;animation:llShimmer 1.6s ease-in-out infinite}
@keyframes llShimmer{0%,100%{opacity:.3}50%{opacity:1}}
.ll-status{font-family:var(--font-body);font-size:13px;color:var(--ink-2);display:flex;align-items:baseline;position:relative;z-index:1}
.ll-dots{display:inline-flex;margin-left:2px}
.ll-dots span:nth-child(1){animation:lld1 1.8s infinite}
.ll-dots span:nth-child(2){animation:lld2 1.8s infinite}
.ll-dots span:nth-child(3){animation:lld3 1.8s infinite}
@keyframes lld1{0%{opacity:1}88%{opacity:1}92%,100%{opacity:0}}
@keyframes lld2{0%,18%{opacity:0}22%{opacity:1}88%{opacity:1}92%,100%{opacity:0}}
@keyframes lld3{0%,38%{opacity:0}42%{opacity:1}88%{opacity:1}92%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .ll-star,.ll-wordmark span,.ll-dots span{animation:none !important}
}

/* ─── ANNOUNCEMENT BANNER ────────────────────── */
.app-banner{position:relative;z-index:50;display:flex;align-items:center;justify-content:center;gap:10px;padding:8px 40px;font-size:12.5px;font-weight:600;text-align:center;background:var(--accent);color:var(--accent-ink)}
.app-banner.lvl-warn{background:var(--danger);color:#fff}
.app-banner.lvl-success{background:var(--ok);color:#fff}
.app-banner-x{position:absolute;right:12px;top:50%;transform:translateY(-50%);border:none;background:none;color:inherit;font-size:16px;cursor:pointer;opacity:.7}
.app-banner-x:hover{opacity:1}

/* ─── SETTINGS PAGE TABS ─────────────────────────
   .admin-tabs/.admin-tab used to be shared with the old in-app admin
   dashboard (#viewAdmin) too; that view is gone now -- admin is its own
   standalone page (admin.html + css/admin.css). Only the settings page's
   own pill-tab strip (#setTabs) uses these two classes now. */
.admin-tabs{display:flex;flex-wrap:wrap;gap:4px;padding:14px 18px 0;border-bottom:1px solid var(--e-b1)}
.admin-tab{font-family:inherit;font-size:11.5px;font-weight:600;color:var(--e-t3);background:none;border:none;border-bottom:2px solid transparent;padding:8px 11px;cursor:pointer;position:relative;bottom:-1px}
.admin-tab.on{color:var(--e-t1);border-bottom-color:var(--e-ac)}
.admin-tab:hover:not(.on){color:var(--e-t2)}

/* ─── INLINE TEXT EDITOR ─────────────────────── */
body.te-on [data-te-editable]{outline:1px dashed color-mix(in srgb,var(--accent) 60%,transparent);outline-offset:2px;border-radius:3px;cursor:text;transition:background .12s,outline-color .12s}
body.te-on [data-te-editable]:hover{outline-style:solid;background:color-mix(in srgb,var(--accent) 12%,transparent)}
body.te-on [data-te-editable]:focus{outline:2px solid var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent)}
#teBar{position:fixed;z-index:2000;left:50%;bottom:22px;transform:translateX(-50%);display:flex;align-items:center;gap:10px;padding:9px 12px 9px 16px;border-radius:12px;background:var(--surface);border:1px solid var(--border);box-shadow:0 12px 40px rgba(0,0,0,.28);font-family:ui-monospace,monospace}
#teBar .te-bar-dot{width:8px;height:8px;border-radius:50%;background:var(--ink-3)}
#teBar.te-bar-dirty .te-bar-dot{background:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent)}
#teBar .te-bar-lbl{font-size:12px;color:var(--ink-2);margin-right:4px;min-width:150px}

/* ─── CARD IMAGE ZOOM (card detail modal) ──────
   Reuses .mo-ov (redesign) for the shared blurred overlay; z-index bumped
   above regular modals since this opens from on top of the slot-detail
   modal. Content is unboxed -- a floating close badge over the image
   corner, matching the design's lightbox (no surrounding panel). */
#sdZoom{z-index:1200}
#sdZoom.open{animation:mo-fade .15s ease both}
#sdZoomImg{max-width:min(70vw,320px);max-height:82vh;object-fit:contain;border-radius:12px;
  box-shadow:0 40px 80px rgba(0,0,0,.6);cursor:default;display:block}
#sdZoomX{position:absolute;top:-14px;right:-14px;width:28px;height:28px;
  display:flex;align-items:center;justify-content:center;border:1px solid var(--e-b2);border-radius:8px;
  background:var(--e-s1);color:var(--e-t1);font-size:13px;cursor:pointer;transition:background .15s}
#sdZoomX:hover{background:var(--e-s2)}
#sdImg{cursor:zoom-in}

/* ─── AVATAR PICKER ──────────────────────────
   Per design_handoff_wishmaker_redesign "avatar_picker_handoff": 2a
   (settings → account, tabbed in-page overlay) + 2b (user popover,
   continuous scroll, no tabs). Colors are theme vars, defaulting to
   jirachi dark like every other redesigned surface this session.
   Sprites are 40×40 pixel art -- image-rendering:pixelated everywhere
   they're scaled up so they stay crisp instead of blurring. */
.av-row{display:flex;align-items:center;gap:12px}
.av-swatch{width:52px;height:52px;border-radius:50%;overflow:hidden;background:var(--surface-2);border:2px solid var(--border);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-body);font-weight:700;font-size:18px;color:var(--accent)}
.av-swatch img{width:100%;height:100%;object-fit:cover;image-rendering:pixelated}

/* 2a — avatar picker modal: real .mo-ov/.mo-box backdrop like every
   other modal (click-outside/Escape to close come free from app.js's
   shared handlers), sized to its actual content -- up to 9 region tabs
   and a max-4-tile grid per region -- instead of the old in-page panel
   that stretched across the whole settings pane regardless of how
   little it actually held. */
.av-box{width:560px;max-width:92vw;padding:22px;max-height:80vh;display:flex;flex-direction:column;box-sizing:border-box;overflow-y:auto} /* wide enough for all 9 region tabs on one row (measured ~488px unwrapped) */
.av-overlay-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;flex-shrink:0}
.av-overlay-title{font-size:13px;font-weight:700;color:var(--ink)}
.av-overlay-x{width:22px;height:22px;border-radius:6px;background:var(--hairline);border:none;color:var(--ink-2);display:flex;align-items:center;justify-content:center;font-size:10px;cursor:pointer;padding:0}
.av-overlay-x:hover{background:var(--surface-2);color:var(--ink)}
.av-tabs{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--hairline);flex-shrink:0}
.av-tab{font-family:var(--font-body);font-size:9.5px;font-weight:400;color:var(--ink-2);background:transparent;border:none;border-radius:6px;padding:7px 10px;cursor:pointer}
.av-tab.on{font-weight:700;color:var(--accent);background:var(--accent-tint)}
.av-grid{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.av-tile{display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;background:none;border:none;padding:0;font-family:var(--font-body)}
.av-tile-img{display:block;width:60px;height:60px;border-radius:50%;overflow:hidden;background:var(--bg);border:2.5px solid var(--border);transition:border-color .15s}
.av-tile-img img{width:100%;height:100%;object-fit:cover;image-rendering:pixelated}
.av-tile.on .av-tile-img{border-color:var(--accent)}
.av-overlay-actions{display:flex;justify-content:flex-end;margin-top:16px;flex-shrink:0}

/* 2b — popover (avatar clicked in the account popover). Anchored/sized
   the same way .user-pop is, replaces it visually while open. */
.av-pop{display:none;position:fixed;z-index:130;width:290px;background:radial-gradient(ellipse at 50% 0%,var(--surface-2),var(--surface));border:1px solid var(--border);border-radius:14px;padding:16px 18px;box-sizing:border-box;color:var(--ink);box-shadow:0 24px 50px var(--shadow-color);font-family:var(--font-body)}
.av-pop.open{display:block;animation:mb-rise .16s ease both}
.av-pop-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.av-pop-title{font-size:12px;font-weight:700}
.av-pop-x{width:18px;height:18px;border-radius:5px;background:var(--hairline);border:none;color:var(--ink-2);display:flex;align-items:center;justify-content:center;font-size:9px;cursor:pointer;padding:0}
.av-pop-scroll{height:220px;overflow-y:auto;scrollbar-width:none}
.av-pop-scroll::-webkit-scrollbar{display:none}
.av-pop-region-lbl{font-size:8px;color:var(--ink-3);letter-spacing:.05em;margin:10px 0 6px}
.av-pop-region-lbl:first-child{margin-top:0}
.av-pop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;justify-content:center}
.av-pop-tile{display:flex;flex-direction:column;align-items:center;cursor:pointer;background:none;border:none;padding:0;font-family:var(--font-body)}
.av-pop-tile-img{display:block;width:50px;height:50px;border-radius:50%;overflow:hidden;background:var(--bg);border:2px solid var(--border);transition:border-color .15s}
.av-pop-tile-img img{width:100%;height:100%;object-fit:cover;image-rendering:pixelated}
.av-pop-tile.on .av-pop-tile-img{border-color:var(--accent)}
.av-pop-chevron{position:absolute;bottom:4px;left:0;right:0;display:flex;justify-content:center;pointer-events:none;color:var(--ink-2)}
@keyframes avChevronBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
.av-pop-chevron svg{animation:avChevronBounce 1.6s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){ .av-pop-chevron svg{animation:none} }

@media (max-width:768px){
  .av-tabs{overflow-x:auto;flex-wrap:nowrap}
  .av-tab{flex-shrink:0}
  .av-pop{width:calc(100vw - 28px);max-width:290px}
}
@keyframes mo-fade{from{opacity:0}to{opacity:1}}