:root{
  --bg:#0d0f12;--panel:#14171c;--panel2:#191d23;--line:#2a3038;--text:#f4f5f7;--muted:#969eaa;
  --accent:#f0b84c;--accent2:#d69b2d;--danger:#e36666;--slot:#101216;--shadow:0 18px 60px rgba(0,0,0,.35);
  /* Classic-theme fallbacks for tokens the pixel theme owns (redefined inside
     the pixel-only block for body.pixel-theme). Some JS — auth.js's always-
     injected sign-in style block, and the card-title default color — reads
     these regardless of which theme is active, so they must never resolve to
     nothing when pixel-theme is off. */
  --box:#161a20;--box-2:#0f1319;--ink:#f4f5f7;
  --sans:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  --pixel:system-ui,Segoe UI,sans-serif;
  --pixel-orange:#3d6fd0;--pixel-yellow:#4a7bd0;
  --authgate-backdrop:radial-gradient(circle at 30% 20%,#1b2230,#0d0f12);
  --authgate-input-bg:#0f1319;--authgate-input-color:#f4f5f7;
}
*{box-sizing:border-box}html,body{margin:0;height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text)}
.ui-sprite-sheet{position:absolute;pointer-events:none}
button,input,textarea,select{font:inherit}button{cursor:pointer}.hidden{display:none!important}.app-shell{display:grid;grid-template-columns:250px 1fr;height:100vh;overflow:hidden;transition:grid-template-columns .22s cubic-bezier(.2,.8,.2,1)}
/* Icon size for buttons whose emoji got swapped for an inline <svg><use>
   (New binder, Export, Binder settings, Add card, refresh, lock badge).
   Theme-agnostic — must NOT live inside the pixel-only block below, or
   these buttons render with unsized (huge) icons in classic mode. */
.btn-ico{width:16px;height:16px;flex:0 0 auto;display:inline-block;vertical-align:-3px}
.primary .btn-ico,.ghost .btn-ico{width:15px;height:15px}
.app-shell.sidebar-collapsed{grid-template-columns:0px 1fr}
.sidebar{background:#0b0d10;border-right:1px solid var(--line);padding:20px 14px;display:flex;flex-direction:column;gap:18px;min-width:0;overflow-y:auto;overflow-x:hidden;transition:padding .22s ease,opacity .18s ease}
.app-shell.sidebar-collapsed .sidebar{padding:0;border-right:0;opacity:0;pointer-events:none;width:0;min-width:0;overflow:hidden}
.brand{display:flex;align-items:center;gap:11px;padding:2px 5px 8px;position:relative}
.brand-text{flex:1;min-width:0}
.sidebar-close-btn{width:32px;height:32px;border-radius:8px;border:1px solid #28303a;background:#13181f;color:#8c98a7;display:grid;place-items:center;padding:0;cursor:pointer;transition:all .16s ease;margin-left:auto;flex-shrink:0}
.sidebar-close-btn:hover{background:#1f2631;border-color:#4d5d71;color:#fff;transform:scale(1.05)}
.brand-mark{width:38px;height:38px;border-radius:11px;background:linear-gradient(145deg,var(--accent),#8b5f10);display:grid;place-items:center;color:#16110a;font-weight:900;box-shadow:0 7px 24px rgba(240,184,76,.18)}
.brand strong{display:block;font-size:15px}.brand span{display:block;font-size:11px;color:var(--muted);margin-top:2px}.full{width:100%}.primary,.ghost,.danger-soft,.round,.chip{border:1px solid transparent;border-radius:10px;color:var(--text);padding:10px 13px;background:var(--panel2)}
.primary{background:var(--accent);color:#17130b;font-weight:800}.primary:hover{background:#f7c767}.ghost{border-color:var(--line);background:#14171b}.ghost:hover{background:#1c2026}.danger-soft{border-color:#512e2e;background:#241617;color:#f0b0b0}.round{width:38px;height:38px;padding:0;border-radius:50%;border-color:var(--line)}
.binder-list{display:flex;flex-direction:column;gap:6px;overflow:auto}.binder-item{display:flex;align-items:center;gap:9px;border:1px solid transparent;border-radius:10px;padding:10px 11px;color:#b9c0c9;cursor:pointer}.binder-item:hover{background:#13161a}.binder-item.active{background:#191d23;border-color:#313741;color:#fff}.binder-dot{width:8px;height:8px;border-radius:50%;background:#49515c}.binder-item.active .binder-dot{background:var(--accent);box-shadow:0 0 0 4px rgba(240,184,76,.10)}.side-bottom{margin-top:auto;display:flex;flex-direction:column;gap:8px}
.main{min-width:0;display:flex;flex-direction:column;height:100vh}.topbar{height:86px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 24px;background:#101317;gap:16px}
.topbar-left{display:flex;align-items:center;gap:14px;min-width:0}
.sidebar-toggle-btn{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:#14171b;color:#94a3b8;display:grid;place-items:center;padding:0;cursor:pointer;transition:all .18s ease;flex-shrink:0}
.sidebar-toggle-btn:hover{background:#1d232b;border-color:#485666;color:#fff;transform:translateY(-1px)}
.sidebar-toggle-btn:active{transform:scale(.95)}
.app-shell.sidebar-collapsed .sidebar-toggle-btn{border-color:#4f5e71;background:#192028;color:var(--accent);box-shadow:0 0 12px rgba(240,184,76,.15)}
.library-toggle-btn{display:inline-flex;align-items:center;gap:7px;transition:all .18s ease}
.library-toggle-btn.is-collapsed{border-color:#384352;color:#8e9aa8}
.library-toggle-btn.is-collapsed:hover{border-color:var(--accent);color:#fff}
.library-head-actions{display:flex;align-items:center;gap:7px}
.library-close-btn{width:30px;height:30px;border-radius:8px;border:1px solid #2b333e;background:#141920;color:#8c98a7;display:grid;place-items:center;padding:0;cursor:pointer;transition:all .16s ease;flex-shrink:0}
.library-close-btn:hover{background:#1f2732;border-color:#506073;color:#fff;transform:scale(1.05)}
.library-dock-btn{position:absolute;right:16px;top:16px;z-index:30;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:10px;background:linear-gradient(145deg,#1c242e,#11151b);border:1px solid #3c4856;color:#e2e8f0;font-size:12px;font-weight:750;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.5);transition:all .18s ease}
.library-dock-btn:hover{background:#25303c;border-color:var(--accent);color:#fff;transform:translateY(-1px);box-shadow:0 8px 24px rgba(240,184,76,.25)}
.library-dock-btn svg{color:var(--accent)}
.eyebrow{font-size:10px;letter-spacing:.16em;color:#777f8b;font-weight:800}.topbar h1{margin:4px 0 0;font-size:23px}.top-actions{display:flex;gap:8px}
.workspace{display:grid;grid-template-columns:minmax(0,1fr) 300px;min-height:0;flex:1}.binder-stage{min-width:0;overflow:auto;padding:18px 22px 26px}.stage-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.page-nav{display:flex;align-items:center;gap:11px}.page-nav span{font-size:13px;color:#c7ccd3;min-width:100px;text-align:center}.view-hint{font-size:11px;color:#707885}.spread{display:grid;grid-template-columns:minmax(280px,1fr) 16px minmax(280px,1fr);align-items:start;gap:0;max-width:1120px;margin:0 auto}.spine{height:100%;min-height:560px;background:linear-gradient(90deg,#0b0d10,#242a31,#0a0c0f);border-radius:8px;box-shadow:inset 0 0 18px #000}.page-wrap{min-width:0}.page-caption{font-size:11px;text-align:center;color:#707885;margin:0 0 8px}.binder-page{background:linear-gradient(145deg,#22262d,#171a1f);border:1px solid #333944;padding:18px;display:grid;gap:12px;min-height:560px;box-shadow:var(--shadow);border-radius:18px 6px 6px 18px}.page-wrap:last-child .binder-page{border-radius:6px 18px 18px 6px}.slot{position:relative;min-width:0;aspect-ratio:63/88;border:1px solid #323944;border-radius:10px;background:linear-gradient(145deg,#101318,#0b0d11);display:grid;place-items:center;overflow:hidden;transition:.12s ease}.slot.empty:before{content:'+';font-size:25px;color:#343b44}.slot.drag-over{outline:2px solid var(--accent);transform:scale(.985)}.slot img{width:100%;height:100%;object-fit:fill;display:block}.slot .slot-badge{position:absolute;right:5px;bottom:5px;background:rgba(7,9,11,.82);border:1px solid rgba(255,255,255,.14);border-radius:6px;padding:3px 5px;font-size:9px;color:#fff;opacity:0;transition:.12s}.slot:hover .slot-badge{opacity:1}
.library-panel{border-left:1px solid var(--line);background:#101317;padding:18px 14px;display:flex;flex-direction:column;min-height:0}.library-head{display:flex;justify-content:space-between;align-items:flex-start}.library-head h2{font-size:17px;margin:3px 0 12px}.pill{background:#232831;border:1px solid #343b46;border-radius:999px;padding:4px 8px;font-size:11px;color:#c8ced6}.search{width:100%;background:#0d1014;border:1px solid #2b313a;color:#fff;border-radius:10px;padding:10px 11px;outline:none}.search:focus{border-color:#6c7785}.filters{display:flex;gap:6px;margin:10px 0}.chip{font-size:10px;padding:6px 8px;border-radius:999px;border-color:#2b3138;color:#9da5b0;background:#14181d}.chip.active{background:#30291b;border-color:#6d5725;color:#f6ce79}.card-library{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;overflow:auto;padding-right:3px;align-content:start}.library-card{background:#15191e;border:1px solid #2a3038;border-radius:10px;overflow:hidden;cursor:grab;position:relative}.library-card:active{cursor:grabbing}.library-card img{width:100%;aspect-ratio:63/88;object-fit:fill;background:#0b0d10;display:block}.library-card-info{padding:7px}.library-card-name{font-size:11px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.library-card-meta{font-size:9px;color:#7e8792;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.owned-dot{position:absolute;top:6px;right:6px;width:8px;height:8px;border-radius:50%;background:#65c785;border:2px solid #101317}.owned-dot.wish{background:#d48686}
.binder-item:focus-visible,.slot:focus-visible,.library-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.66);display:grid;place-items:center;z-index:50;padding:20px}.modal{width:min(560px,95vw);max-height:92vh;overflow:auto;background:#171a1f;border:1px solid #343a43;border-radius:16px;box-shadow:0 25px 80px rgba(0,0,0,.6);padding:20px}.modal h3{margin:0 0 15px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.field{display:flex;flex-direction:column;gap:5px}.field.full-span{grid-column:1/-1}.field label{font-size:10px;color:#929ba7}.field input,.field textarea,.field select{background:#0f1216;border:1px solid #2d343e;color:#fff;border-radius:9px;padding:9px 10px;outline:none}.field textarea{min-height:88px;resize:vertical}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}.image-drop{border:1px dashed #424a56;border-radius:12px;min-height:150px;display:grid;place-items:center;text-align:center;color:#858e9a;padding:12px;background:#101317;cursor:pointer}.image-drop img{max-height:220px;max-width:100%;border-radius:8px}.check-row{display:flex;align-items:center;gap:8px;padding-top:20px}.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,16px);background:#22272e;color:#eef1f4;border:1px solid #3a424e;border-radius:10px;padding:10px 14px;font-size:12px;opacity:0;pointer-events:none;transition:.2s;z-index:80}.toast.show{opacity:1;transform:translate(-50%,0)}.empty-library{grid-column:1/-1;color:#717a86;font-size:12px;text-align:center;padding:30px 8px}.danger-link{margin-right:auto;background:transparent;border:0;color:#e88989;padding:8px}.muted{color:var(--muted)}
@media(max-width:1100px){.workspace{grid-template-columns:1fr 260px}.spread{grid-template-columns:1fr 12px 1fr}.binder-page{padding:11px;gap:8px;min-height:480px}.spine{min-height:480px}}
@media(max-width:850px){.app-shell{grid-template-columns:210px 1fr}.library-panel{display:none}.workspace{grid-template-columns:1fr}.view-hint{display:none}.spread{min-width:600px}.top-actions .ghost{padding:10px;gap:0}.top-actions .ghost .lock-label,.top-actions .ghost .library-toggle-label,.top-actions .ghost .btn-label{display:none}.main:not(.library-collapsed) .library-panel,.workspace:not(.library-collapsed) .library-panel{display:flex;position:fixed;left:0;right:0;bottom:0;height:70dvh;z-index:40;border-left:0;border-top:1px solid var(--line);box-shadow:0 -12px 40px rgba(0,0,0,.5)}}

/* v1.2 — animație de întors pagina */
.spread{position:relative;perspective:1800px;transform-style:preserve-3d}
.spread.turning{pointer-events:none}
.spread.turning .spine{box-shadow:inset 0 0 22px #000,0 0 28px rgba(0,0,0,.48)}
.binder-page.flip-out-next{transform-origin:left center;animation:flipOutNext .285s cubic-bezier(.4,0,.2,1) forwards;z-index:12}
.binder-page.flip-in-next{transform-origin:right center;animation:flipInNext .36s cubic-bezier(.2,.72,.18,1) both;z-index:12}
.binder-page.flip-out-prev{transform-origin:right center;animation:flipOutPrev .285s cubic-bezier(.4,0,.2,1) forwards;z-index:12}
.binder-page.flip-in-prev{transform-origin:left center;animation:flipInPrev .36s cubic-bezier(.2,.72,.18,1) both;z-index:12}
@keyframes flipOutNext{0%{transform:rotateY(0);filter:brightness(1);opacity:1;box-shadow:var(--shadow)}55%{filter:brightness(.72)}100%{transform:rotateY(-89deg);filter:brightness(.46);opacity:.82;box-shadow:-22px 10px 48px rgba(0,0,0,.48)}}
@keyframes flipInNext{0%{transform:rotateY(89deg);filter:brightness(.48);opacity:.76;box-shadow:24px 10px 48px rgba(0,0,0,.48)}45%{filter:brightness(.78)}100%{transform:rotateY(0);filter:brightness(1);opacity:1;box-shadow:var(--shadow)}}
@keyframes flipOutPrev{0%{transform:rotateY(0);filter:brightness(1);opacity:1;box-shadow:var(--shadow)}55%{filter:brightness(.72)}100%{transform:rotateY(89deg);filter:brightness(.46);opacity:.82;box-shadow:22px 10px 48px rgba(0,0,0,.48)}}
@keyframes flipInPrev{0%{transform:rotateY(-89deg);filter:brightness(.48);opacity:.76;box-shadow:-24px 10px 48px rgba(0,0,0,.48)}45%{filter:brightness(.78)}100%{transform:rotateY(0);filter:brightness(1);opacity:1;box-shadow:var(--shadow)}}
@media (prefers-reduced-motion:reduce){.binder-page.flip-out-next,.binder-page.flip-in-next,.binder-page.flip-out-prev,.binder-page.flip-in-prev{animation:none!important}}

/* v1.2 — hover cu informațiile cardului */
.card-tooltip{position:fixed;z-index:120;width:min(300px,calc(100vw - 28px));pointer-events:none;background:rgba(15,18,22,.97);border:1px solid #3a424d;border-radius:13px;padding:13px 14px;box-shadow:0 18px 55px rgba(0,0,0,.5);opacity:0;transform:translateY(5px) scale(.985);transition:opacity .11s ease,transform .11s ease;color:#f5f6f7;backdrop-filter:blur(10px)}
.card-tooltip.visible{opacity:1;transform:translateY(0) scale(1)}
.tooltip-title{font-size:18px;line-height:1.2;font-weight:850;margin-bottom:9px;overflow-wrap:anywhere;color:var(--card-title-color,#f5f6f7)}
.tooltip-row{display:grid;grid-template-columns:66px 1fr;gap:8px;align-items:start;font-size:11px;line-height:1.35;margin-top:4px}
.tooltip-row span{color:#7f8995;text-transform:uppercase;letter-spacing:.06em;font-size:9px;padding-top:2px}
.tooltip-row strong{font-size:11px;color:#d9dde2;font-weight:650;overflow-wrap:anywhere}
.tooltip-notes{border-top:1px solid #2e343c;margin-top:10px;padding-top:9px;color:#aab2bc;font-size:10px;line-height:1.45;white-space:pre-wrap;max-height:100px;overflow:hidden}
.slot:not(.empty),.library-card{transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease}
.slot:not(.empty):hover{border-color:#58616d;box-shadow:0 8px 24px rgba(0,0,0,.28)}
.library-card:hover{border-color:#4a535f;transform:translateY(-1px);box-shadow:0 9px 24px rgba(0,0,0,.26)}

/* v1.2 — formular card simplificat */
.required{color:#f0b84c;font-weight:900}.optional{color:#606975;font-size:9px;font-weight:500;margin-left:4px}
.image-preview-wrap{position:relative;display:grid;place-items:center;width:100%;min-height:130px}
.image-preview-wrap img{max-height:220px;max-width:100%;border-radius:8px}
.image-preview-wrap span{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);background:rgba(7,9,11,.86);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:5px 9px;font-size:9px;color:#d9dde3;white-space:nowrap;opacity:0;transition:.14s}
.image-drop:hover .image-preview-wrap span{opacity:1}
.field input:focus,.field textarea:focus,.field select:focus{border-color:#6c7785}

/* v1.3 — pagini nelimitate, jump și valoare binder */
.page-tools{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.jump-nav{display:flex;align-items:center;gap:7px;font-size:11px;color:#7d8692}.jump-nav input{width:72px;background:#0f1216;border:1px solid #2d343e;color:#fff;border-radius:9px;padding:8px 9px;outline:none}.jump-nav input:focus{border-color:#6c7785}.ghost.compact{padding:8px 10px;font-size:11px}.stage-toolbar{gap:14px;flex-wrap:wrap}.view-hint{margin-left:auto;text-align:right}
.binder-value-card{border:1px solid #2c333d;background:linear-gradient(145deg,#15191e,#101317);border-radius:13px;padding:12px;box-shadow:0 10px 26px rgba(0,0,0,.18)}.value-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.icon-mini{width:26px;height:26px;padding:0;border-radius:8px;background:#171b20;border:1px solid #2d343e;color:#9ca5b0;display:grid;place-items:center}.icon-mini:hover{background:#20252c;color:#fff}.binder-total{font-size:23px;line-height:1.1;font-weight:850;margin:9px 0 9px;letter-spacing:-.02em;overflow-wrap:anywhere}.currency-select{width:100%;background:#0f1216;border:1px solid #2d343e;color:#fff;border-radius:9px;padding:8px 9px;outline:none}.currency-select:focus{border-color:#6c7785}.value-meta{font-size:9px;line-height:1.45;color:#747d89;margin-top:8px}.price-input-row{display:grid;grid-template-columns:minmax(0,1fr) 110px;gap:8px}.price-input-row input,.price-input-row select{width:100%}.infinite-note{border:1px solid #2d343e;background:#101317;border-radius:10px;padding:10px 11px;color:#7f8995;font-size:10px;line-height:1.45}
@media(max-width:1100px){.page-tools{gap:8px}.jump-nav span{display:none}.view-hint{width:100%;text-align:left;margin-left:0}.binder-total{font-size:20px}}
@media(max-width:850px){.binder-value-card{display:none}.jump-nav{display:flex}.stage-toolbar{align-items:flex-start}.page-tools{width:100%;justify-content:space-between}}


/* v1.4 — modal sigur + wishlist alb-negru doar în binder */
.modal{position:relative}
.modal-close{position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:9px;border:1px solid #343b45;background:#11151a;color:#aeb6c0;font-size:24px;line-height:28px;font-weight:400;display:grid;place-items:center;padding:0;z-index:4}
.modal-close:hover{background:#222831;color:#fff;border-color:#4b5562}
.modal h3{padding-right:42px}
@keyframes modalNudge{0%,100%{transform:translateX(0)}25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
.modal.modal-nudge{animation:modalNudge .16s ease}
.slot.not-owned img{filter:grayscale(1)}

/* meniu card + preview 3D fullscreen */
.card-action-menu p{margin:-7px 0 18px;color:var(--muted);font-size:12px}.card-action-buttons{display:grid;grid-template-columns:1fr 1fr;gap:12px}.card-action-button{min-height:108px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;text-align:left;gap:7px;padding:18px}.card-action-button strong{font-size:17px;letter-spacing:.06em}.card-action-button span{font-size:10px;line-height:1.4;opacity:.72}
.preview-backdrop{position:fixed;inset:0;z-index:150;overflow:hidden;background:radial-gradient(circle at 50% 42%,#252b35 0,#11151a 40%,#07090c 100%);display:grid;grid-template-rows:auto 1fr auto;color:#fff;user-select:none}.preview-backdrop:before{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 25%,rgba(240,184,76,.055) 50%,transparent 75%)}.preview-topbar{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;padding:20px 24px}.preview-topbar div{display:flex;flex-direction:column;gap:4px}.preview-topbar span{font-size:9px;letter-spacing:.2em;color:var(--accent);font-weight:850}.preview-topbar strong{font-size:17px;max-width:70vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preview-close{width:42px;height:42px;border-radius:12px;border:1px solid #3b424c;background:rgba(13,16,20,.8);color:#d9dde3;font-size:27px;display:grid;place-items:center;padding:0}.preview-close:hover{background:#242a31;color:#fff}.preview-stage{position:relative;z-index:2;min-height:0;display:grid;place-items:center;perspective:1500px;cursor:grab;touch-action:none}.preview-stage:active{cursor:grabbing}.preview-card{position:relative;width:min(72vw,calc(72vh * 63 / 88),520px);aspect-ratio:63/88;transform-style:preserve-3d;will-change:transform;filter:drop-shadow(0 35px 45px rgba(0,0,0,.58))}.preview-card.animated{transition:transform .72s cubic-bezier(.2,.72,.15,1)}.preview-face{position:absolute;inset:0;overflow:hidden;border-radius:4.5% / 3.3%;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:#090b0e;border:1px solid rgba(255,255,255,.22);box-shadow:inset 0 0 0 1px rgba(0,0,0,.5)}.preview-face:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(112deg,transparent 18%,rgba(255,255,255,.18) 43%,transparent 58%);opacity:.42;mix-blend-mode:screen}.preview-face img{width:100%;height:100%;object-fit:fill;display:block}.preview-front{transform:translateZ(1px)}.preview-back{transform:rotateY(180deg) translateZ(1px)}.preview-controls{position:relative;z-index:3;display:flex;align-items:center;justify-content:center;gap:14px;padding:16px 20px 24px}.preview-controls span{font-size:10px;color:#77808c}.preview-controls button{min-width:122px}
@media(max-width:600px){.card-action-buttons{grid-template-columns:1fr}.card-action-button{min-height:82px}.preview-topbar{padding:14px}.preview-card{width:min(82vw,calc(68vh * 63 / 88))}.preview-controls{padding-bottom:18px}.preview-controls span{display:none}}
@media(prefers-reduced-motion:reduce){.preview-card.animated{transition:none}}

/* pop-up compact lângă cursor */
.card-context-layer{position:fixed;inset:0;z-index:140;background:transparent}.card-context-menu{position:fixed;width:220px;padding:7px;background:rgba(18,22,27,.98);border:1px solid #3a424d;border-radius:12px;box-shadow:0 16px 45px rgba(0,0,0,.52);backdrop-filter:blur(14px);animation:contextIn .12s ease-out}.card-context-title{padding:7px 9px 9px;font-size:11px;font-weight:750;color:#d9dde3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-bottom:1px solid #2c323a;margin-bottom:5px}.card-context-action{width:100%;border:0;border-radius:8px;background:transparent;color:#dce1e7;padding:9px 10px;display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left}.card-context-action:hover{background:#292f37}.card-context-action strong{font-size:11px;letter-spacing:.05em}.card-context-action span{font-size:9px;color:#7f8995}.card-context-action.accent strong{color:var(--accent)}@keyframes contextIn{from{opacity:0;transform:translateY(-4px) scale(.97)}to{opacity:1;transform:none}}

/* fețe 3D separate și drag controlat de aplicație */
.preview-card{filter:none}.preview-face{pointer-events:none;transform-style:preserve-3d;box-shadow:0 30px 55px rgba(0,0,0,.55),inset 0 0 0 1px rgba(0,0,0,.5)}.preview-face img{pointer-events:none;-webkit-user-drag:none;user-select:none}.preview-front{transform:rotateY(0deg) translateZ(2px)}.preview-back{transform:rotateY(180deg) translateZ(2px)}

/* polished form controls and card interaction */
.modal-close:hover{background:#7d2529;color:#fff;border-color:#df5b62;box-shadow:0 0 0 3px rgba(223,91,98,.13)}
.owned-toggle{grid-column:1/-1;display:flex;align-items:center;gap:13px;padding:13px 14px;border:1px solid #303741;border-radius:12px;background:linear-gradient(145deg,#12161b,#0e1115);cursor:pointer;transition:border-color .16s ease,background .16s ease,transform .16s ease}.owned-toggle:hover{border-color:#505a67;background:#171c22}.owned-toggle:active{transform:scale(.993)}.owned-toggle input{position:absolute;opacity:0;pointer-events:none}.owned-switch{position:relative;flex:0 0 58px;width:58px;height:32px;border-radius:999px;background:#292f37;border:1px solid #414954;box-shadow:inset 0 2px 5px rgba(0,0,0,.35);transition:.2s ease}.owned-switch span{position:absolute;width:24px;height:24px;left:3px;top:3px;border-radius:50%;background:#aab2bc;box-shadow:0 3px 9px rgba(0,0,0,.4);transition:.22s cubic-bezier(.2,.8,.2,1)}.owned-toggle input:checked+.owned-switch{background:linear-gradient(135deg,var(--accent),var(--accent2));border-color:#f4c66c}.owned-toggle input:checked+.owned-switch span{transform:translateX(26px);background:#16120b}.owned-toggle input:focus-visible+.owned-switch{outline:2px solid #fff;outline-offset:3px}.owned-copy{display:flex;flex-direction:column;gap:3px}.owned-copy strong{font-size:13px;color:#eef1f4}.owned-copy small{font-size:9px;color:#747e8a;line-height:1.35}
.preview-card{transition:scale .18s ease}.preview-card.animated{transition:transform .72s cubic-bezier(.2,.72,.15,1),scale .18s ease}.preview-card.dragging{scale:1.025}.preview-card.dragging .preview-face{box-shadow:0 38px 70px rgba(0,0,0,.66),0 0 28px rgba(240,184,76,.1),inset 0 0 0 1px rgba(255,255,255,.12)}.preview-card.dragging .preview-face:after{opacity:.75;animation:foilSweep 1.1s linear infinite}@keyframes foilSweep{from{transform:translateX(-70%)}to{transform:translateX(70%)}}

/* smooth, centered close buttons */
.modal-close,.preview-close{display:flex;align-items:center;justify-content:center;line-height:1;padding:0 0 3px;transition:background-color .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease}.modal-close:hover,.preview-close:hover{background:#8d242b;color:#fff;border-color:#f0646b;box-shadow:0 0 0 4px rgba(240,100,107,.14);transform:scale(1.07) rotate(3deg)}.modal-close:active,.preview-close:active{transform:scale(.94)}

/* animated native binder drag-and-drop */
.drag-source{opacity:.28;transform:scale(.94) rotate(-1deg)!important;filter:saturate(.55);box-shadow:inset 0 0 0 2px var(--accent)!important}.drag-card-ghost{position:fixed;left:-2000px;top:-2000px;z-index:9999;overflow:hidden;border-radius:12px;background:#11151a;border:2px solid rgba(240,184,76,.9);box-shadow:0 20px 45px rgba(0,0,0,.62),0 0 22px rgba(240,184,76,.25);transform:rotate(4deg) scale(1.05);opacity:.92;pointer-events:none}.drag-card-ghost img{width:100%;height:100%;object-fit:fill;display:block}.card-drag-active .slot{transition:transform .18s cubic-bezier(.2,.75,.2,1),border-color .18s ease,box-shadow .18s ease,opacity .18s ease}.card-drag-active .slot.empty{animation:slotReady 1.1s ease-in-out infinite}.card-drag-active .slot.drag-over{animation:none;transform:translateY(-5px) scale(1.035);border-color:var(--accent);outline:0;box-shadow:0 15px 34px rgba(0,0,0,.48),0 0 0 3px rgba(240,184,76,.2),inset 0 0 24px rgba(240,184,76,.07)}@keyframes slotReady{0%,100%{border-color:#323944;box-shadow:none}50%{border-color:#4a4437;box-shadow:inset 0 0 20px rgba(240,184,76,.035)}}

/* custom binder cover */
.spread.cover-mode{grid-template-columns:1fr;min-height:600px;place-items:center}.spread.cover-mode .page-wrap:first-child{width:min(440px,75vw);perspective:1500px}.spread.cover-mode .spine,.spread.cover-mode .page-wrap:last-child{display:none}.spread.cover-mode .page-caption{display:none}.binder-page.cover-page{min-height:0;padding:0;background:transparent;border:0;box-shadow:none;display:block;overflow:visible}.binder-cover{position:relative;width:100%;aspect-ratio:7/10;border-radius:16px 22px 22px 16px;overflow:hidden;background:radial-gradient(circle at 62% 25%,#313844,#14181e 56%,#090b0e);border:2px solid #454e5a;box-shadow:-16px 18px 0 #090b0e,-21px 24px 50px rgba(0,0,0,.62),inset 15px 0 22px rgba(0,0,0,.42),inset -2px 0 0 rgba(255,255,255,.12);transform-style:preserve-3d;transition:transform .16s ease-out,box-shadow .2s ease;cursor:pointer}.binder-cover:hover{box-shadow:-18px 22px 0 #080a0d,-25px 32px 64px rgba(0,0,0,.7),inset 15px 0 22px rgba(0,0,0,.4),0 0 30px rgba(240,184,76,.08)}.binder-cover>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}.cover-edge{position:absolute;left:0;top:0;bottom:0;width:30px;background:linear-gradient(90deg,rgba(0,0,0,.72),rgba(255,255,255,.08),rgba(0,0,0,.2));border-right:1px solid rgba(255,255,255,.12);box-shadow:8px 0 18px rgba(0,0,0,.28)}.cover-sheen{position:absolute;inset:-40%;background:linear-gradient(115deg,transparent 37%,rgba(255,255,255,.13) 48%,transparent 58%);transform:translateX(-45%);transition:transform .65s ease;pointer-events:none}.binder-cover:hover .cover-sheen{transform:translateX(42%)}.cover-title{position:absolute;left:44px;right:22px;bottom:24px;padding:17px 18px;border-radius:12px;background:rgba(8,10,13,.72);border:1px solid rgba(255,255,255,.15);backdrop-filter:blur(10px);box-shadow:0 12px 30px rgba(0,0,0,.35)}.cover-title span{display:block;font-size:8px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);font-weight:800}.cover-title strong{display:block;margin-top:5px;font-size:22px;line-height:1.08;overflow-wrap:anywhere}.cover-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:#78828e}.cover-placeholder span{width:90px;height:90px;border-radius:24px;display:grid;place-items:center;background:linear-gradient(145deg,var(--accent),#8b5f10);color:#17130b;font-size:30px;font-weight:950;box-shadow:0 18px 40px rgba(0,0,0,.35)}.cover-placeholder small{max-width:190px;text-align:center;line-height:1.5}
.cover-transition{opacity:0;transform:scale(.96) rotateY(6deg);transition:opacity .26s ease,transform .26s ease}.binder-cover-drop{position:relative;min-height:150px;border:1px dashed #46505d;border-radius:12px;display:grid;place-items:center;overflow:hidden;background:#0f1317;cursor:pointer;text-align:center;color:#87919d;transition:border-color .16s ease,background .16s ease}.binder-cover-drop:hover{border-color:var(--accent);background:#15191e}.binder-cover-drop img{width:100%;height:190px;object-fit:cover;display:block}.binder-cover-drop>span{position:absolute;left:50%;bottom:9px;transform:translateX(-50%);padding:5px 9px;border-radius:999px;background:rgba(5,7,9,.82);font-size:9px;color:#fff;white-space:nowrap}.binder-cover-drop div{display:flex;flex-direction:column;gap:6px}.binder-cover-drop small{font-size:9px;color:#646e7a}.cover-remove{align-self:flex-start;margin-top:6px;padding:5px 0;border:0;background:transparent;color:#d37b80;font-size:10px}.cover-remove:hover{color:#ff8d94}
@media(max-width:700px){.spread.cover-mode{min-height:500px}.spread.cover-mode .page-wrap:first-child{width:min(390px,82vw)}.cover-title strong{font-size:18px}}

/* bottom navigation dock, binder materials and subtle form hints */
.binder-nav-dock{position:sticky;bottom:14px;z-index:20;max-width:900px;margin:18px auto 0;padding:9px 12px;display:flex;align-items:center;justify-content:center;gap:13px;border:1px solid rgba(255,255,255,.12);border-radius:18px;background:linear-gradient(145deg,rgba(35,40,47,.94),rgba(15,18,22,.96));box-shadow:0 18px 45px rgba(0,0,0,.48),inset 0 1px rgba(255,255,255,.07);backdrop-filter:blur(16px)}.binder-nav-dock .page-nav{padding:3px;border-radius:13px;background:rgba(0,0,0,.2)}.binder-nav-dock .round{box-shadow:0 4px 12px rgba(0,0,0,.28);transition:transform .16s ease,background .16s ease,box-shadow .16s ease}.binder-nav-dock .round:hover:not(:disabled){transform:translateY(-2px) scale(1.06);box-shadow:0 7px 18px rgba(0,0,0,.38),0 0 0 2px rgba(240,184,76,.12)}.dock-divider{width:1px;height:28px;background:linear-gradient(transparent,#505864,transparent)}.binder-nav-dock .view-hint{margin-left:auto;max-width:310px}.field-hint{display:block;margin-top:6px;color:#737d89;font-size:9px;line-height:1.4}.optional-label{margin-left:5px;color:#747e89;font-size:8px;font-weight:500;text-transform:uppercase;letter-spacing:.08em}
.card-identity-lock{display:flex;align-items:center;gap:12px;margin:-2px 0 16px;padding:10px;border:1px solid #303842;border-radius:12px;background:linear-gradient(145deg,#12171d,#0d1014)}.card-identity-lock img{width:44px;height:62px;object-fit:cover;border-radius:6px;border:1px solid #48525f}.card-identity-lock div{min-width:0;display:flex;flex-direction:column;gap:4px}.card-identity-lock strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.card-identity-lock span{color:#84909d;font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.collection-form .date-field input[type=date]{min-height:38px;color-scheme:dark;letter-spacing:.02em}.collection-form .date-field input[type=date]::-webkit-calendar-picker-indicator{cursor:pointer;filter:invert(82%) sepia(50%) saturate(570%) hue-rotate(344deg);opacity:.9}
.spread{--page-a:#242a31;--page-b:#14181d;--page-edge:#3b434d;--pocket-a:#11151a;--pocket-b:#090c10;--theme-glow:rgba(148,158,171,.11)}.spread[data-binder-color="navy"]{--page-a:#1d3348;--page-b:#0b1723;--page-edge:#365b79;--pocket-a:#102536;--pocket-b:#08131d;--theme-glow:rgba(53,135,198,.18)}.spread[data-binder-color="burgundy"]{--page-a:#51252e;--page-b:#241014;--page-edge:#77414b;--pocket-a:#35171d;--pocket-b:#190a0d;--theme-glow:rgba(190,65,81,.15)}.spread[data-binder-color="forest"]{--page-a:#244535;--page-b:#102219;--page-edge:#3d6a54;--pocket-a:#173326;--pocket-b:#0a1911;--theme-glow:rgba(58,151,99,.15)}.spread[data-binder-color="royal"]{--page-a:#244a82;--page-b:#102347;--page-edge:#4977bd;--pocket-a:#173560;--pocket-b:#0b1935;--theme-glow:rgba(65,126,226,.2)}.spread[data-binder-color="purple"]{--page-a:#48315d;--page-b:#201329;--page-edge:#704f8a;--pocket-a:#311f40;--pocket-b:#170d1f;--theme-glow:rgba(155,91,204,.16)}.spread[data-binder-color="tan"]{--page-a:#765d42;--page-b:#392a1d;--page-edge:#9a7955;--pocket-a:#4c3928;--pocket-b:#251a11;--theme-glow:rgba(203,151,89,.16)}.spread .binder-page:not(.cover-page){background:linear-gradient(145deg,var(--page-a),var(--page-b));border-color:var(--page-edge);box-shadow:0 18px 38px rgba(0,0,0,.38),inset 0 1px rgba(255,255,255,.05),0 0 34px var(--theme-glow)}.spread .slot{border-color:color-mix(in srgb,var(--page-edge) 75%,#111);background:linear-gradient(145deg,var(--pocket-a),var(--pocket-b));box-shadow:inset 0 1px rgba(255,255,255,.035)}.spread .binder-cover:not(.has-image){background:radial-gradient(circle at 62% 25%,var(--page-a),var(--page-b) 58%,#090b0e);border-color:var(--page-edge)}

/* cartoon card move: lifted sticker, squash-and-pop target */
.drag-source{opacity:.42;animation:cartoonSource .42s ease-in-out infinite alternate!important;filter:saturate(.55) brightness(.8);outline:3px dashed rgba(240,184,76,.82);outline-offset:-5px}.drag-card-ghost{border:4px solid #fff;outline:3px solid #f0b84c;outline-offset:2px;border-radius:15px;box-shadow:8px 10px 0 #15191e,13px 16px 0 rgba(0,0,0,.26);transform:rotate(6deg) scale(1.08);opacity:.97}.drag-card-ghost:after{content:'MOVE!';position:absolute;right:-4px;top:-7px;padding:5px 8px;border-radius:999px;background:#f0b84c;color:#15110a;font-size:9px;font-weight:950;letter-spacing:.08em;border:2px solid #fff;transform:rotate(8deg)}.card-drag-active .slot.empty{animation:cartoonReady .72s ease-in-out infinite}.card-drag-active .slot.drag-over{animation:cartoonTarget .34s cubic-bezier(.2,1.5,.4,1) both;transform:none;border:3px solid #f0b84c;box-shadow:0 10px 0 rgba(0,0,0,.25),0 0 0 4px rgba(255,255,255,.78),0 0 0 7px rgba(240,184,76,.3)}@keyframes cartoonSource{from{transform:rotate(-3deg) scale(.91)}to{transform:rotate(3deg) scale(.96)}}@keyframes cartoonReady{0%,100%{transform:scale(1);filter:brightness(1)}50%{transform:scale(.97);filter:brightness(1.13)}}@keyframes cartoonTarget{0%{transform:scale(.9) rotate(-2deg)}65%{transform:scale(1.08) rotate(1deg)}100%{transform:scale(1.035)}}
@media(max-width:1100px){.binder-nav-dock{flex-wrap:wrap}.binder-nav-dock .view-hint{width:100%;max-width:none;text-align:center;margin:0}.dock-divider{display:none}}@media(max-width:650px){.binder-nav-dock{position:static}.binder-nav-dock .jump-nav{width:auto}.binder-nav-dock .view-hint{display:none}}
@media(prefers-reduced-motion:reduce){.drag-source,.card-drag-active .slot.empty,.card-drag-active .slot.drag-over{animation:none!important}}

/* App-owned select menus: same appearance on Windows, macOS and browser. */
.native-select-hidden{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;clip-path:inset(50%)!important}.custom-select{position:relative;min-width:0;width:100%}.custom-select-trigger{width:100%;min-height:39px;display:flex;align-items:center;gap:8px;padding:9px 10px;border:1px solid #2d343e;border-radius:9px;background:#0f1216;color:#fff;text-align:left;box-shadow:inset 0 1px rgba(255,255,255,.025);transition:border-color .16s ease,background .16s ease,box-shadow .16s ease}.custom-select-trigger:hover{background:#14191f;border-color:#495362}.custom-select.open .custom-select-trigger,.custom-select-trigger:focus-visible{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px rgba(240,184,76,.13)}.custom-select-trigger span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.custom-select-trigger b{margin-left:auto;color:#98a2ae;font-size:16px;font-weight:500;line-height:1;transform:translateY(-2px);transition:transform .16s ease}.custom-select.open .custom-select-trigger b{transform:translateY(1px) rotate(180deg)}.custom-select-menu{position:absolute;z-index:90;top:calc(100% + 6px);left:0;right:0;max-height:210px;padding:5px;overflow:auto;border:1px solid #454f5c;border-radius:11px;background:rgba(20,24,29,.99);box-shadow:0 16px 34px rgba(0,0,0,.5);backdrop-filter:blur(14px);opacity:0;visibility:hidden;transform:translateY(-5px) scale(.98);transform-origin:top;transition:opacity .14s ease,transform .14s ease,visibility .14s}.custom-select.open .custom-select-menu{opacity:1;visibility:visible;transform:none}.custom-select-option{width:100%;display:flex;align-items:center;gap:8px;padding:8px 9px;border:0;border-radius:7px;background:transparent;color:#cdd3db;text-align:left;font-size:12px;transition:background .12s ease,color .12s ease}.custom-select-option:hover,.custom-select-option.selected{background:#2a313a;color:#fff}.custom-select-option.selected:after{content:'✓';margin-left:auto;color:var(--accent);font-weight:900}.select-color-dot{display:inline-block;flex:0 0 13px;width:13px;height:13px;border-radius:50%;background:var(--select-color);border:1px solid rgba(255,255,255,.42);box-shadow:inset 0 1px rgba(255,255,255,.35),0 1px 4px rgba(0,0,0,.42)}.binder-color-control{display:flex;align-items:center;gap:8px}.binder-color-control .custom-select{flex:1}.binder-color-swatch{display:none}.price-input-row>.custom-select{min-width:0}.currency-select+.custom-select{margin-top:0}.binder-value-card>.custom-select{margin-top:0}

/* Set is a combobox, so it can both remember recent collections and accept a new one. */
.set-field{position:relative}.set-suggestions{position:absolute;z-index:95;top:calc(100% - 25px);left:0;right:0;max-height:195px;padding:5px;overflow:auto;border:1px solid #454f5c;border-radius:11px;background:rgba(20,24,29,.99);box-shadow:0 16px 34px rgba(0,0,0,.5);backdrop-filter:blur(14px);opacity:0;visibility:hidden;transform:translateY(-5px) scale(.98);transform-origin:top;transition:opacity .14s ease,transform .14s ease,visibility .14s}.set-suggestions.open{opacity:1;visibility:visible;transform:none}.set-suggestion{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 9px;border:0;border-radius:7px;background:transparent;color:#e0e4e8;text-align:left;font-size:12px}.set-suggestion:hover{background:#2a313a}.set-suggestion span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.set-suggestion small{flex:0 0 auto;color:#87919d;font-size:9px}.set-suggestion-empty{padding:9px;color:#88929e;font-size:11px}

/* Library filtering and sorting controls. */
.library-search-row{display:flex;align-items:center;gap:7px}.library-search-row .search{min-width:0}.library-sort-wrap{position:relative;flex:0 0 auto}.library-sort-button{width:38px;height:38px;padding:0;border:1px solid #303844;border-radius:10px;background:#151a20;color:#cbd2da;font-size:18px;line-height:1;transition:background .16s ease,border-color .16s ease,transform .16s ease}.library-sort-button:hover,.library-sort-button[aria-expanded="true"]{background:#202731;border-color:#5d6876;color:#fff;transform:translateY(-1px)}.library-sort-menu{position:absolute;z-index:40;right:0;top:calc(100% + 7px);width:185px;padding:5px;border:1px solid #3a4552;border-radius:12px;background:rgba(20,24,30,.98);box-shadow:0 16px 36px rgba(0,0,0,.46);backdrop-filter:blur(14px);visibility:hidden;opacity:0;transform:translateY(-5px) scale(.98);transform-origin:top right;transition:opacity .14s ease,transform .14s ease,visibility .14s}.library-sort-menu.open{visibility:visible;opacity:1;transform:none}.library-sort-menu button{width:100%;padding:8px 9px;border:0;border-radius:8px;background:transparent;color:#dce1e6;text-align:left;font-size:11px}.library-sort-menu button:hover{background:#2a323d}.library-sort-menu button.active{background:#28323e;color:#ffd775;font-weight:700}.tcg-filters{flex-wrap:wrap}.tcg-filters .chip{padding:6px 9px}.library-price-updated{margin-top:6px;color:#7d8792;font-size:9px;letter-spacing:.01em}.market-price-row{display:grid;grid-template-columns:minmax(0,1fr) 110px;align-items:center;gap:10px}.market-price-value{color:inherit;text-decoration:none}a.market-price-value:hover{text-decoration:underline}.market-price-row .market-price-value{min-width:0;font-size:clamp(20px,6.5vw,24px);font-weight:850;line-height:1.2;overflow-wrap:anywhere}.market-price-row>.custom-select{min-width:0}.market-price-source{margin-top:4px;color:inherit;opacity:.72;font-size:12px}.price-suggest{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:7px}.price-suggest-note{color:#9aa4af;font-size:10px;line-height:1.4;min-width:0;overflow-wrap:anywhere}

/* Keep the navigation as one focused control strip below the binder. */
.binder-nav-dock{max-width:max-content;min-width:365px;margin-top:22px;padding:8px 10px;gap:11px}.binder-nav-dock .page-nav{align-items:center}.binder-nav-dock .jump-nav{align-items:center;padding-right:2px}.binder-nav-dock .jump-nav input{appearance:textfield;-moz-appearance:textfield;width:58px;text-align:center;padding:8px 7px}.binder-nav-dock .jump-nav input::-webkit-outer-spin-button,.binder-nav-dock .jump-nav input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.binder-nav-dock .view-hint{display:none}@media(max-width:650px){.binder-nav-dock{min-width:0;width:max-content;max-width:100%;gap:7px}.binder-nav-dock .jump-nav span{display:none}.binder-nav-dock .dock-divider{display:block}.binder-nav-dock .page-nav span{min-width:82px;font-size:12px}}

/* Binder material selector: the swatch mirrors the selected color without taking focus away from the menu. */
.binder-color-control{display:flex;align-items:center;gap:10px}.binder-color-control select{flex:1}.binder-color-swatch{width:30px;height:30px;flex:0 0 30px;border-radius:50%;border:2px solid rgba(255,255,255,.34);box-shadow:inset 0 1px 2px rgba(255,255,255,.28),0 4px 12px rgba(0,0,0,.32);background:linear-gradient(145deg,#303640,#090b0e);transition:background .18s ease,transform .18s ease,box-shadow .18s ease}.binder-color-swatch:hover{transform:scale(1.08);box-shadow:inset 0 1px 2px rgba(255,255,255,.32),0 5px 16px rgba(0,0,0,.42)}.binder-color-swatch[data-color="navy"]{background:linear-gradient(145deg,#315b7d,#0b1723)}.binder-color-swatch[data-color="burgundy"]{background:linear-gradient(145deg,#83404c,#241014)}.binder-color-swatch[data-color="forest"]{background:linear-gradient(145deg,#397154,#102219)}.binder-color-swatch[data-color="royal"]{background:linear-gradient(145deg,#4b7fd0,#102347)}.binder-color-swatch[data-color="purple"]{background:linear-gradient(145deg,#79539c,#201329)}.binder-color-swatch[data-color="tan"]{background:linear-gradient(145deg,#ad855d,#392a1d)}.binder-color-swatch[data-color="orange"]{background:linear-gradient(145deg,#e47c28,#54230e)}

/* Binder size presets */
.binder-size-presets{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
}
.binder-size-preset{
  position:relative;
  min-width:0;
  min-height:82px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:11px 9px;
  overflow:hidden;
  color:#b7c0cb;
  border:1px solid #303844;
  border-radius:13px;
  background:linear-gradient(155deg,#151a20,#0d1014);
  box-shadow:inset 0 1px rgba(255,255,255,.035),0 5px 14px rgba(0,0,0,.18);
  transition:color .17s ease,border-color .17s ease,background .17s ease,box-shadow .17s ease,transform .17s ease;
}
.binder-size-preset:hover{
  color:#fff;
  border-color:#566170;
  background:linear-gradient(155deg,#1c222a,#11151a);
  transform:translateY(-2px);
  box-shadow:inset 0 1px rgba(255,255,255,.06),0 8px 19px rgba(0,0,0,.28);
}
.binder-size-preset.selected{
  color:#fff;
  border-color:#e9ad3d;
  background:linear-gradient(155deg,rgba(240,184,76,.19),rgba(240,184,76,.055) 62%,#101318);
  box-shadow:inset 0 0 0 1px rgba(255,209,116,.2),0 0 0 3px rgba(240,184,76,.1),0 8px 22px rgba(0,0,0,.3);
}
.binder-size-preset:focus-visible{
  outline:0;
  border-color:#ffd06b;
  box-shadow:0 0 0 3px rgba(240,184,76,.2);
}
.binder-size-pocket-preview{
  width:39px;
  height:39px;
  flex:0 0 39px;
  display:grid;
  grid-template-columns:repeat(var(--binder-preset-cols, var(--binder-preset-size, 3)),1fr);
  grid-template-rows:repeat(var(--binder-preset-rows, var(--binder-preset-size, 3)),1fr);
  gap:2px;
  padding:4px;
  border:1px solid #46505d;
  border-radius:8px;
  background:linear-gradient(145deg,#252c34,#15191e);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025),0 3px 8px rgba(0,0,0,.3);
  transition:border-color .17s ease,background .17s ease,transform .17s ease;
}
.binder-size-pocket-preview i{
  min-width:0;
  min-height:0;
  border-radius:2px;
  border:1px solid rgba(139,151,165,.36);
  background:rgba(4,6,8,.55);
}
.binder-size-preset.selected .binder-size-pocket-preview{
  border-color:#efb64d;
  background:linear-gradient(145deg,#5b4725,#211a0e);
  transform:rotate(-2deg);
}
.binder-size-preset.selected .binder-size-pocket-preview i{
  border-color:rgba(255,210,124,.48);
  background:rgba(10,8,4,.62);
}
.binder-size-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:3px;
}
.binder-size-copy strong{
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:12px;
  line-height:1.1;
}
.binder-size-copy small{
  color:#838e9a;
  font-size:10px;
  white-space:nowrap;
  transition:color .17s ease;
}
.binder-size-preset.selected .binder-size-copy small{color:#e8bd69}
@media(max-width:620px){
  .binder-size-presets{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.spread[data-binder-color="orange"]{--page-a:#a84d1d;--page-b:#47200d;--page-edge:#d27636;--pocket-a:#753513;--pocket-b:#321506;--theme-glow:rgba(232,119,39,.18)}

/* Subtle drag feedback: only the card in hand and the current destination react. */
.drag-source{opacity:.5;animation:none!important;transform:scale(.97) rotate(-1.25deg)!important;filter:saturate(.72) brightness(.86);outline:2px dashed rgba(240,184,76,.7);outline-offset:-5px}.drag-card-ghost{border:2px solid rgba(255,255,255,.9);outline:2px solid rgba(240,184,76,.82);outline-offset:1px;border-radius:12px;box-shadow:5px 7px 0 rgba(0,0,0,.28),0 14px 30px rgba(0,0,0,.4);transform:rotate(3deg) scale(1.025);opacity:.95}.drag-card-ghost:after{display:none}.card-drag-active .slot.empty{animation:none!important;filter:none;transform:none}.card-drag-active .slot.drag-over{animation:none!important;transform:scale(1.018);border:2px solid var(--accent);outline:0;box-shadow:0 8px 20px rgba(0,0,0,.3),0 0 0 3px rgba(240,184,76,.16),inset 0 0 16px rgba(240,184,76,.06)}

.title-color-picker{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid #2d343e;border-radius:10px;background:#0f1216;color:#8993a0;font-size:10px}.title-color-picker input[type="color"]{width:36px;height:30px;padding:2px;border:1px solid #4a5563;border-radius:8px;background:#171b20;cursor:pointer}.title-color-picker input[type="color"]::-webkit-color-swatch-wrapper{padding:0}.title-color-picker input[type="color"]::-webkit-color-swatch{border:0;border-radius:5px}

/* Collected copies have their own calm, tactile controls. */
.slot,.library-card img,.preview-card{aspect-ratio:.72/1}.preview-card{width:min(72vw,calc(72vh * .72),520px)}
.tooltip-title-library{color:#f5f6f7!important;background:none!important;-webkit-text-fill-color:#f5f6f7!important}.tooltip-title-gradient{display:flex;align-items:center;gap:7px;background:linear-gradient(110deg,color-mix(in srgb,var(--card-title-color) 78%,#000) 0%,var(--card-title-color) 48%,color-mix(in srgb,var(--card-title-color) 78%,#fff) 100%);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent}.tooltip-owned-check{font-size:14px;line-height:1;-webkit-text-fill-color:initial}.tooltip-price-market{color:#69d890!important}.tooltip-price-paid{color:#ff8089!important}.tooltip-notes span{display:block;margin-bottom:4px;color:#7f8995;text-transform:uppercase;letter-spacing:.06em;font-size:9px}
.card-identity-lock{position:relative;padding-right:54px}.card-identity-lock>.title-color-picker{position:absolute;right:10px;top:10px;padding:0;border:0;background:transparent}.title-color-trigger{width:31px;height:31px;border:2px solid rgba(255,255,255,.62);border-radius:50%;background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.8),transparent 19%),var(--title-dot-color);box-shadow:0 3px 10px rgba(0,0,0,.35),inset 0 1px rgba(255,255,255,.4);transition:transform .16s ease,box-shadow .16s ease}.title-color-trigger:hover{transform:scale(1.1);box-shadow:0 4px 14px rgba(0,0,0,.45),0 0 0 3px rgba(240,184,76,.14)}.title-color-menu{position:absolute;z-index:100;right:0;top:39px;width:145px;display:grid;grid-template-columns:repeat(4,1fr);gap:7px;padding:9px;border:1px solid #46505d;border-radius:12px;background:rgba(20,24,29,.99);box-shadow:0 16px 34px rgba(0,0,0,.5);opacity:0;visibility:hidden;transform:translateY(-5px) scale(.97);transition:.14s ease}.title-color-picker.open .title-color-menu{opacity:1;visibility:visible;transform:none}.title-color-choice{width:24px;height:24px;border-radius:50%;border:2px solid rgba(255,255,255,.28);background:var(--choice-color);box-shadow:inset 0 1px rgba(255,255,255,.45)}.title-color-choice.selected{outline:2px solid var(--accent);outline-offset:2px}
.collection-calendar{position:relative}.calendar-trigger{width:100%;min-height:39px;display:flex;align-items:center;justify-content:space-between;padding:9px 11px;border:1px solid #2d343e;border-radius:9px;background:#0f1216;color:#edf0f3;text-align:left;transition:border-color .16s ease,background .16s ease}.calendar-trigger:hover:not(:disabled){border-color:#505b69;background:#14191f}.calendar-trigger b{color:var(--accent);font-size:15px}.collection-calendar.disabled{opacity:.45}.calendar-popover{position:absolute;z-index:105;left:0;top:calc(100% + 7px);width:270px;padding:11px;border:1px solid #454f5c;border-radius:13px;background:rgba(20,24,29,.99);box-shadow:0 18px 38px rgba(0,0,0,.55);opacity:0;visibility:hidden;transform:translateY(-6px) scale(.98);transition:.14s ease}.collection-calendar.open .calendar-popover{opacity:1;visibility:visible;transform:none}.calendar-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.calendar-head strong{font-size:12px}.calendar-head button{width:28px;height:27px;padding:0;border:1px solid #38424e;border-radius:7px;background:#151a20;color:#e9edf2;font-size:19px;line-height:1}.calendar-weekdays,.calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}.calendar-weekdays{margin-bottom:4px}.calendar-weekdays span{font-size:8px;text-align:center;color:#77828e}.calendar-days i{height:29px}.calendar-day{height:29px;padding:0;border:1px solid transparent;border-radius:7px;background:transparent;color:#dce1e6;font-size:10px}.calendar-day:hover{background:#2a313a}.calendar-day.selected{background:var(--accent);color:#1a140b;font-weight:900}.calendar-clear{width:100%;margin-top:9px;padding:5px;border:0;background:transparent;color:#aab3be;font-size:10px}.calendar-clear:hover{color:#fff}
.title-color-picker{width:32px;height:32px;border-radius:50%;overflow:hidden;border:2px solid rgba(255,255,255,.55);background:transparent;box-shadow:0 3px 10px rgba(0,0,0,.35)}.title-color-picker input{width:42px;height:42px;margin:-5px;padding:0;border:0;background:transparent;cursor:pointer}.title-color-picker input::-webkit-color-swatch-wrapper{padding:0}.title-color-picker input::-webkit-color-swatch{border:0}.special-toggle{display:flex;align-items:center;gap:9px;padding:10px 12px;border:1px solid #394351;border-radius:10px;cursor:pointer}.special-toggle input{accent-color:#ffd166}.special-toggle span{color:#ffd166;font-size:17px}.slot:not(.empty):hover{z-index:2;transform:translateY(-3px);box-shadow:0 12px 22px rgba(0,0,0,.32)}.slot.special-card:after{content:'✦ ✧';position:absolute;inset:0;display:grid;place-items:center;color:rgba(255,220,116,.82);font-size:19px;letter-spacing:28px;pointer-events:none;text-shadow:0 0 12px #f3bd45;animation:specialSparkle 2.4s ease-in-out infinite}.slot.special-card{box-shadow:0 0 0 1px rgba(255,211,92,.7),0 0 17px rgba(255,194,65,.22)}@keyframes specialSparkle{50%{opacity:.35;transform:scale(1.08)}}.spread.cover-mode .page-wrap:first-child{width:min(540px,88vw)}.library-filter-wrap{position:relative;margin:10px 0}.library-filter-menu{display:none;position:absolute;z-index:40;left:0;right:0;max-height:300px;overflow:auto;padding:10px;border:1px solid #45505d;border-radius:12px;background:#171c22;box-shadow:0 18px 38px rgba(0,0,0,.5)}.library-filter-menu.open{display:block}.library-filter-menu label{display:flex;gap:8px;align-items:center;padding:5px;font-size:11px}.library-filter-menu .filter-title{margin:6px 0 4px;color:#8c97a4;font-size:9px;letter-spacing:.1em}.library-filter-menu button{margin-top:8px;width:100%}
.new-collection{position:relative}.new-collection-menu{display:none;position:absolute;z-index:45;top:calc(100% + 6px);left:0;right:0;padding:5px;border:1px solid #46515e;border-radius:10px;background:#191e25;box-shadow:0 14px 30px rgba(0,0,0,.45)}.new-collection-menu.open{display:grid}.new-collection-menu button{padding:9px;border:0;border-radius:7px;background:transparent;color:#e9edf2;text-align:left}.new-collection-menu button:hover{background:#2b333d}
.title-color-picker{position:absolute!important;right:10px;top:10px;width:38px;height:38px;padding:0;overflow:visible;border:0;background:transparent}.title-color-trigger{width:38px;height:38px;padding:0;border:2px solid #768292;border-radius:50%;background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.72),transparent 18%),var(--picker-color);box-shadow:0 3px 11px rgba(0,0,0,.35);cursor:pointer}.title-color-panel{position:absolute;right:0;top:45px;width:174px;padding:12px;border:1px solid #46515d;border-radius:12px;background:#181d24;box-shadow:0 18px 35px rgba(0,0,0,.52);display:none}.title-color-picker.open .title-color-panel{display:grid;gap:10px}.title-color-panel input{appearance:none;width:100%;height:8px;border-radius:999px;outline:none}.title-color-panel input::-webkit-slider-thumb{appearance:none;width:16px;height:16px;border:2px solid #fff;border-radius:50%;background:#161b21;box-shadow:0 2px 5px rgba(0,0,0,.4)}#titleHue{background:linear-gradient(90deg,#f44,#ffdb4d,#56dd74,#48b9ff,#b476ff,#ff6aa1,#f44)}#titleLight{background:linear-gradient(90deg,#181d25,var(--accent),#fff)}
.tooltip-title-special{animation:specialTitleGlow 1.35s ease-in-out infinite;text-shadow:0 0 9px color-mix(in srgb,var(--card-title-color) 75%,#ffd35d)}.slot.special-card:hover{transform:translateY(-7px) rotate(-1deg) scale(1.035);box-shadow:0 17px 32px rgba(0,0,0,.44),0 0 30px rgba(255,198,65,.55)}.slot.special-card:hover:after{animation-duration:.65s;font-size:25px}@keyframes specialTitleGlow{50%{filter:brightness(1.45) drop-shadow(0 0 8px rgba(255,210,96,.8));letter-spacing:.025em}}
.slot.special-card:after{display:none}.slot.special-card{box-shadow:none}.slot.special-card:hover:after{display:none}.slot.special-card:hover .slot-badge{opacity:1}.slot.special-card:hover{animation:specialCardHover .72s ease-in-out infinite alternate}@keyframes specialCardHover{from{filter:brightness(1.04) saturate(1.08)}to{filter:brightness(1.2) saturate(1.28)}}
.title-color-picker{box-sizing:border-box;width:38px;height:38px;padding:2px;border-radius:50%;overflow:hidden;display:block;background:#151a20;border:2px solid #5b6673;box-shadow:0 3px 10px rgba(0,0,0,.32)}.title-color-picker input[type="color"]{appearance:none;-webkit-appearance:none;display:block;width:30px;height:30px;margin:0;padding:0;border:0;border-radius:50%;clip-path:circle(50%);background:transparent}.title-color-picker input[type="color"]::-webkit-color-swatch-wrapper{padding:0}.title-color-picker input[type="color"]::-webkit-color-swatch{border:0;border-radius:50%}
.spread[data-binder-color="white"]{--page-a:#f2f4f5;--page-b:#cfd5da;--page-edge:#a7b0b9;--pocket-a:#dfe4e7;--pocket-b:#b9c1c7;--theme-glow:rgba(255,255,255,.25)}.spread[data-binder-color="white"] .binder-page{color:#12171c}.spread[data-binder-color="white"] .slot{border-color:#aab3bb}

/* The picker panel deliberately escapes the circular colour button.  These
   final rules supersede the legacy native-colour-input styles above. */
.card-identity-lock>.title-color-picker{position:absolute!important;right:10px;top:10px;box-sizing:border-box;width:38px;height:38px;padding:0;overflow:visible;display:block;border:0;border-radius:50%;background:transparent;box-shadow:none;z-index:20}.card-identity-lock>.title-color-picker.open{z-index:30}.card-identity-lock>.title-color-picker .title-color-trigger{display:block;width:38px;height:38px;margin:0;padding:0;border:2px solid #768292;border-radius:50%;background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.72),transparent 18%),var(--picker-color);box-shadow:0 3px 11px rgba(0,0,0,.35);cursor:pointer}.card-identity-lock>.title-color-picker .title-color-panel{z-index:200}

/* Compact, custom HSV picker: the panel exists only while its colour button is open. */
.card-identity-lock>.title-color-picker .title-color-panel{position:absolute;right:0;top:48px;width:224px;box-sizing:border-box;padding:12px;border:1px solid #4a5664;border-radius:14px;background:linear-gradient(145deg,#202731,#14191f);box-shadow:0 18px 42px rgba(0,0,0,.55);display:none;gap:11px;z-index:200}.card-identity-lock>.title-color-picker.open .title-color-panel{display:grid}.title-color-panel-head{display:flex;align-items:center;justify-content:space-between;color:#aeb8c4;font-size:10px;font-weight:750;letter-spacing:.08em;text-transform:uppercase}.title-color-panel-head output{color:#f0f3f6;font-size:10px;font-variant-numeric:tabular-nums;letter-spacing:.04em}.title-color-surface{position:relative;width:100%;height:116px;border:1px solid rgba(255,255,255,.18);border-radius:9px;overflow:hidden;cursor:crosshair;touch-action:none;background:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,hsl(var(--picker-hue) 100% 50%));box-shadow:inset 0 0 0 1px rgba(0,0,0,.22)}.title-color-cursor{position:absolute;display:block;width:14px;height:14px;border:2px solid #fff;border-radius:50%;box-shadow:0 1px 5px rgba(0,0,0,.7);transform:translate(-50%,-50%);pointer-events:none}.title-hue-row{display:grid;grid-template-columns:28px 1fr;align-items:center;gap:9px}.title-hue-row span{color:#9ca7b3;font-size:10px}.title-color-panel #titleHue{appearance:none;-webkit-appearance:none;width:100%;height:9px;margin:0;border:1px solid rgba(255,255,255,.18);border-radius:999px;outline:none;background:linear-gradient(90deg,#ff4d4d 0%,#ffd84f 16%,#50db6b 32%,#46c5ef 50%,#8065ef 66%,#f05eca 83%,#ff4d4d 100%)}.title-color-panel #titleHue::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:16px;height:16px;border:2px solid #fff;border-radius:50%;background:#20262d;box-shadow:0 2px 6px rgba(0,0,0,.55);cursor:grab}.title-color-panel #titleHue::-moz-range-thumb{width:13px;height:13px;border:2px solid #fff;border-radius:50%;background:#20262d;box-shadow:0 2px 6px rgba(0,0,0,.55);cursor:grab}

/* Library market link: direct visit with a compact edit affordance. */
.market-link-field{padding-top:1px}.market-link-actions{display:flex;align-items:center;gap:8px}.market-link-open{flex:1;border:1px solid #536172;border-radius:10px;padding:10px 12px;background:linear-gradient(145deg,#202a35,#151b22);color:#edf2f7;font-weight:780;text-align:left;transition:border-color .16s ease,transform .16s ease,background .16s ease}.market-link-open:hover{border-color:#7d91a7;background:#263342;transform:translateY(-1px)}.market-link-editor{display:none;margin-top:8px}.market-link-editor.open{display:block}.market-link-editor input{width:100%;box-sizing:border-box}

/* Calm reveals for menus and forms, with a dedicated expandable set list. */
@keyframes soft-modal-in{from{opacity:0;transform:translateY(6px) scale(.988)}to{opacity:1;transform:none}}@keyframes soft-fade-in{from{opacity:0}to{opacity:1}}.modal-backdrop{animation:soft-fade-in .16s ease-out}.modal{animation:soft-modal-in .18s cubic-bezier(.2,.75,.2,1)}.preview-backdrop{animation:soft-fade-in .18s ease-out}.library-filter-menu{display:block;max-height:330px;box-sizing:border-box;overflow:auto;visibility:hidden;opacity:0;transform:translateY(-5px) scale(.985);transform-origin:top;pointer-events:none;transition:opacity .16s ease,transform .16s ease,visibility .16s}.library-filter-menu.open{display:block;visibility:visible;opacity:1;transform:none;pointer-events:auto}.library-filter-menu label{border-radius:7px;transition:background .13s ease,color .13s ease}.library-filter-menu label:hover{background:#252d36}.filter-set-dropdown{position:relative}.filter-set-toggle{display:flex!important;align-items:center;justify-content:space-between;gap:8px;width:100%;margin:0!important;padding:8px 9px!important;border:1px solid #3c4754!important;border-radius:8px!important;background:#131820!important;color:#dce2e8!important;font-size:11px!important;text-align:left;transition:border-color .15s ease,background .15s ease}.filter-set-toggle:hover,.filter-set-dropdown.open .filter-set-toggle{border-color:#627184!important;background:#1b232d!important}.filter-set-toggle b{font-size:15px;font-weight:500;color:#9aa6b2;line-height:1;transition:transform .16s ease}.filter-set-dropdown.open .filter-set-toggle b{transform:rotate(180deg)}.filter-set-options{display:grid;grid-template-columns:1fr;max-height:0;margin-top:0;overflow:hidden;opacity:0;transform:translateY(-3px);transition:max-height .2s ease,margin .2s ease,opacity .16s ease,transform .16s ease}.filter-set-dropdown.open .filter-set-options{max-height:190px;margin-top:6px;overflow:auto;opacity:1;transform:none}.filter-set-options label{padding:6px 7px!important}.tooltip-title-library+.tooltip-row .tooltip-price-market,.tooltip-price-market{color:#69d890!important}
@media(prefers-reduced-motion:reduce){.modal-backdrop,.modal,.preview-backdrop{animation:none}.library-filter-menu,.filter-set-options,.filter-set-toggle b{transition:none}}

/* Safe binder-card actions and page jump move dialog. */
.card-context-action.danger{margin-top:4px;border-top:1px solid rgba(236,111,118,.2);color:#ff9da2}.card-context-action.danger:hover{background:rgba(132,40,47,.38);color:#fff}.card-context-action.danger strong{color:#ff858d}.modal-copy{margin:0 0 16px;color:#9ca7b3;font-size:12px;line-height:1.55}.modal-copy strong{color:#f0f3f6}.danger-confirm{border:1px solid #cf535b;border-radius:10px;padding:10px 14px;background:#a62f37;color:#fff;font-weight:850;transition:background .16s ease,transform .16s ease,box-shadow .16s ease}.danger-confirm:hover{background:#c53b45;box-shadow:0 5px 14px rgba(166,47,55,.28);transform:translateY(-1px)}
/* Shared PNG logo across the app shell and default binder cover. */
.brand-mark{display:block;object-fit:cover;background:none!important;color:transparent!important}.cover-placeholder img{width:90px;height:90px;border-radius:24px;object-fit:cover;box-shadow:0 18px 40px rgba(0,0,0,.35)}

/* Cover stays intentionally smaller than a binder page. */
.spread.cover-mode .page-wrap:first-child{width:min(470px,76vw)}

/* One-click catalog preset importer. */
.preset-import-button{width:100%;margin:0 0 10px;padding:8px 10px;border:1px solid #465565;border-radius:9px;background:linear-gradient(135deg,#1b2631,#151b21);color:#dce8f4;font-size:10px;font-weight:780;letter-spacing:.015em;text-align:left;transition:transform .16s ease,background .16s ease,border-color .16s ease}.preset-import-button:hover:not(:disabled){transform:translateY(-1px);border-color:#7895ae;background:linear-gradient(135deg,#243443,#182029)}.preset-import-button:disabled{opacity:.62;cursor:wait}

.library-set-folder{grid-column:1/-1;border:1px solid #222c36;border-radius:14px;overflow:hidden;background:linear-gradient(145deg,rgba(20,25,33,.88),rgba(14,18,24,.94));backdrop-filter:blur(8px);box-shadow:0 2px 8px rgba(0,0,0,.35);transition:border-color .2s ease,box-shadow .2s ease,transform .15s ease}
.library-set-folder:hover{border-color:#384859;box-shadow:0 4px 14px rgba(0,0,0,.45)}
.library-set-folder-head{width:100%;display:flex;align-items:center;min-height:68px;padding:10px 14px 10px 12px;border:0;background:transparent;color:#edf1f5;cursor:pointer;position:relative;transition:background .18s ease;gap:12px}
.library-set-folder-head:hover{background:rgba(255,255,255,.05)}
.library-set-folder-head.is-one-piece{padding-left:18px}

/* Left: Pokemon set logo frame (symmetrical fixed slot) */
.library-set-logo-frame{flex:0 0 78px;width:78px;height:48px;display:flex;align-items:center;justify-content:center;margin-left:4px;overflow:visible}
.library-set-logo-img{max-height:44px;max-width:72px;width:auto;height:auto;object-fit:contain;object-position:center center;margin:0 auto;filter:drop-shadow(0 2px 5px rgba(0,0,0,.75));transition:transform .2s ease;display:block}
.library-set-folder-head:hover .library-set-logo-img{transform:scale(1.08)}

/* Middle: Set Name in English - Accentuated & Prominent */
.library-set-title-wrap{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 6px}
.library-set-title-wrap.is-text-only{align-items:flex-start;justify-content:center;text-align:left;padding:0}
.library-set-release-date{
  display:block;
  font-size:11.5px;
  line-height:1.15;
  font-weight:600;
  letter-spacing:0.025em;
  color:#94a3b8;
  opacity:0.8;
  margin-top:3px;
  white-space:nowrap;
  transition:color .18s ease, opacity .18s ease;
}
.library-set-folder-head:hover .library-set-release-date{
  color:#cbd5e1;
  opacity:1;
}
.library-set-name{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:15px;
  font-weight:850;
  line-height:1.25;
  color:#ffffff;
  letter-spacing:.025em;
  text-shadow:0 2px 5px rgba(0,0,0,0.95), 0 0 10px rgba(255,255,255,0.22);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  text-overflow:ellipsis;
  transition:color .18s ease, text-shadow .18s ease, transform .18s ease;
}
.library-set-title-wrap.is-text-only .library-set-name{
  font-size:17.5px;
  font-weight:900;
  letter-spacing:.03em;
  color:#fffdf5;
  text-shadow:0 2px 6px rgba(0,0,0,0.95), 0 0 14px rgba(251,191,36,0.4);
}
.library-set-folder-head:hover .library-set-name{
  color:#ffffff;
  text-shadow:0 2px 6px rgba(0,0,0,1), 0 0 14px rgba(240,184,76,0.5);
  transform:scale(1.02);
}
.library-set-folder.open .library-set-name{
  color:#ffffff;
  text-shadow:0 2px 6px rgba(0,0,0,1), 0 0 12px rgba(240,184,76,0.4);
}

/* Right: Set code larger and centered, with card count below */
.library-set-meta-block{flex:0 0 auto;min-width:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 4px}
.library-set-code-lg{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:15.5px;font-weight:900;letter-spacing:.04em;color:var(--accent);line-height:1.15;text-align:center}
.library-set-count-sm{font-size:11px;font-weight:700;color:#94a3b8;margin-top:3px;white-space:nowrap;line-height:1}
.library-set-folder-caret{flex:0 0 auto;color:#94a3b8;font-size:16px;font-weight:800;margin-left:4px;transition:color .18s ease,transform .18s ease}
.library-set-folder-head:hover .library-set-folder-caret{color:#f1f5f9}
.library-set-folder-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;padding:0 9px 9px;border-top:1px solid #222c36}
.library-set-folder-grid .library-card{margin-top:9px}

/* Library owns its vertical scroll, including large preset folders. */
.library-panel{min-height:0;overflow:hidden}.card-library{min-height:0;flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;padding-bottom:14px}.library-set-folder-grid{max-height:none}

/* Large preset folders scroll inside themselves, independently of the Library shell. */
.library-panel{height:calc(100vh - 86px);min-height:0;overflow:hidden}.card-library{height:0;min-height:0;flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;padding-bottom:14px}.library-set-folder.open{display:flex;flex-direction:column;min-height:0}.library-set-folder.open .library-set-folder-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-height:calc(100vh - 270px);overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}.library-set-folder-head{flex:0 0 auto}

/* One continuous, app-styled Library scroll — folders stay in the same card flow. */
.library-panel{height:calc(100vh - 86px);min-height:0;overflow:hidden}.card-library{height:0;min-height:0;flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;padding:0 6px 14px 0;scrollbar-width:auto;scrollbar-color:#8ba2b8 #11161c}.card-library::-webkit-scrollbar{width:28px}.card-library::-webkit-scrollbar-track{margin:4px 0;border-radius:999px;background:#0c1015}.card-library::-webkit-scrollbar-thumb{min-height:84px;border:3px solid #0c1015;border-radius:999px;background:linear-gradient(180deg,#8ba2b8,#506273);box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}.card-library::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#acc3d8,#6d8194)}.card-library::-webkit-scrollbar-thumb:active{background:linear-gradient(180deg,#cbe0f4,#8fa3b7)}.library-set-folder.open{display:block}.library-set-folder.open .library-set-folder-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-height:none;overflow:visible;scrollbar-gutter:auto}.library-set-folder-head{position:relative;z-index:1}

/* Hard boundary for the Library viewport: its list, never the page, owns scrolling. */
.main{min-height:0}.workspace{height:calc(100vh - 86px);min-height:0;overflow:hidden}.library-panel{height:100%;min-height:0;overflow:hidden}.card-library{height:auto;min-height:0;max-height:none;flex:1 1 0;overflow-y:scroll;overflow-x:hidden;overscroll-behavior:contain}

/* Grid-based Library viewport: every card and expanded folder lives in one scrollable final row. */
.library-panel{height:100%;min-height:0;display:grid;grid-template-rows:auto auto auto auto minmax(0,1fr);gap:0;overflow:hidden}.library-head,.library-search-row,.library-filter-wrap,.preset-import-button{min-width:0}.card-library{height:100%;min-height:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:14px;overflow-y:auto!important;overflow-x:hidden;overscroll-behavior:contain}.library-card{min-width:0}.library-set-folder{margin-top:0}.library-set-folder-grid{gap:14px;padding:0 0 14px;border:0}.library-set-folder-grid .library-card{margin-top:0}

/* Clean Library layout: one scroll surface, full cards, no nested scrolling. */
.main{min-height:0}
.workspace{height:calc(100vh - 86px);min-height:0;overflow:hidden}
.library-panel{
  height:100%;
  min-height:0;
  display:block;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding:18px 10px 28px 14px;
  scrollbar-width:auto;
  scrollbar-color:#8ba2b8 #0c1116;
  overscroll-behavior:contain;
}
.library-panel::-webkit-scrollbar{width:28px}
.library-panel::-webkit-scrollbar-track{margin:4px 0;border-radius:999px;background:#0c1116}
.library-panel::-webkit-scrollbar-thumb{
  min-height:84px;
  border:3px solid #0c1116;
  border-radius:999px;
  background:linear-gradient(180deg,#8ba2b8,#506273);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25);
}
.library-panel::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#acc3d8,#6d8194)}
.library-panel::-webkit-scrollbar-thumb:active{background:linear-gradient(180deg,#cbe0f4,#8fa3b7);box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.card-library{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  align-content:start!important;
  gap:14px!important;
  width:100%;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow:visible!important;
  padding:0 2px 8px 0!important;
}
.library-card{
  min-width:0;
  height:auto!important;
  align-self:start;
  margin:0!important;
  overflow:hidden;
  content-visibility:auto;
  contain-intrinsic-size:140px 220px;
}
.library-card img{
  display:block;
  width:100%!important;
  height:auto!important;
  aspect-ratio:.72/1!important;
  object-fit:fill!important;
}
.library-card-info{position:relative;display:block;min-height:42px;padding:8px!important}
.library-set-folder{
  grid-column:1/-1;
  width:100%;
  height:auto!important;
  max-height:none!important;
  margin:0!important;
  overflow:visible!important;
}
.library-set-folder.open{display:block!important;height:auto!important;max-height:none!important;overflow:visible!important}
.library-set-folder-grid,
.library-set-folder.open .library-set-folder-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  align-content:start!important;
  gap:14px!important;
  width:100%;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow:visible!important;
  padding:14px 0 0!important;
  border:0!important;
}
.library-set-folder-grid .library-card{margin:0!important}
.library-set-toolbar{display:flex;align-items:center;gap:8px;padding:8px 10px;background:rgba(12,16,22,.75);border-bottom:1px solid rgba(255,255,255,.06)}
.library-set-search-wrap{position:relative;flex:1 1 auto;min-width:0;display:flex;align-items:center}
.library-set-search-icon{position:absolute;left:9px;font-size:11px;opacity:.55;pointer-events:none;line-height:1}
.library-set-search-input{width:100%;height:31px;padding:0 24px 0 27px;background:#0f141a;border:1px solid #283340;border-radius:6px;color:#f0f3f6;font-size:11px;outline:none;box-sizing:border-box;transition:border-color .15s ease,background .15s ease,box-shadow .15s ease}
.library-set-search-input:hover{border-color:#3b4b5e;background:#131922}
.library-set-search-input:focus{border-color:var(--accent,#e5a93c);background:#141b24;box-shadow:0 0 0 2px rgba(229,169,60,.15)}
.library-set-search-input::placeholder{color:#728091;font-size:11px}
.library-set-search-clear{position:absolute;right:6px;width:18px;height:18px;display:flex;align-items:center;justify-content:center;border:0;border-radius:50%;background:rgba(255,255,255,.1);color:#c0cad6;font-size:10px;cursor:pointer;padding:0;line-height:1;transition:background .12s ease,color .12s ease}
.library-set-search-clear:hover{background:rgba(255,255,255,.22);color:#fff}
.library-set-sort-btn{flex:0 0 auto;height:31px;padding:0 9px;display:flex;align-items:center;gap:5px;background:#121820;border:1px solid #2b3644;border-radius:6px;color:#c0cad6;font-size:11px;font-weight:600;cursor:pointer;white-space:nowrap;user-select:none;box-sizing:border-box;transition:background .15s ease,border-color .15s ease,color .15s ease,transform .1s ease}
.library-set-sort-btn:hover{background:#1b232c;border-color:#425266;color:#fff}
.library-set-sort-btn:active{transform:translateY(1px)}
.library-set-sort-btn.is-reversed{background:rgba(229,169,60,.14);border-color:rgba(229,169,60,.6);color:#ffcf70}
.library-set-sort-btn.is-reversed:hover{background:rgba(229,169,60,.22);border-color:rgba(229,169,60,.8);color:#ffe090}
.library-set-sort-icon{font-size:13px;line-height:1}
.library-set-empty-match{grid-column:1/-1;text-align:center;padding:20px 10px;color:#798797;font-size:12px;font-style:italic}
.library-set-more-wrap{grid-column:1/-1;display:flex;justify-content:center;padding:12px 8px}
.library-set-more-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 16px;background:var(--box-2,rgba(255,255,255,.08));border:1px solid rgba(255,255,255,.15);border-radius:8px;color:var(--ink,#e0e6ed);font-size:11px;font-weight:600;cursor:pointer;transition:all .15s ease}
.library-set-more-btn:hover{background:var(--pixel-orange,#ffa347);color:#111;border-color:transparent;transform:translateY(-1px)}
.library-era-group.is-my-cards{border-color:#4a3e20;background:linear-gradient(145deg,rgba(30,24,14,.85),rgba(18,15,9,.95));margin-bottom:12px;border-radius:12px;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.3)}
.library-era-group.is-my-cards:hover,.library-era-group.is-my-cards.open{border-color:#8c7336;box-shadow:0 4px 22px rgba(229,169,60,.14)}
.library-era-group.is-my-cards .library-era-text{color:#ffd777!important;font-weight:800}
.library-era-group.is-my-cards .library-set-folder-grid{padding:12px 10px!important;background:rgba(6,9,13,.4)}
.tag-custom{background:rgba(229,169,60,.18)!important;color:#ffd777!important;border:1px solid rgba(229,169,60,.38)!important;font-size:10px!important;font-weight:750!important;padding:2px 6px!important;border-radius:4px!important;letter-spacing:.03em}
/* Native drag image: fixed to the Library card canvas instead of inheriting a binder slot. */
.drag-card-ghost{
  position:fixed;
  left:-10000px;
  top:-10000px;
  display:block;
  box-sizing:border-box;
  aspect-ratio:.72/1;
  overflow:hidden;
  pointer-events:none;
  border:2px solid rgba(240,184,76,.96);
  border-radius:12px;
  background:#0b0d10;
  box-shadow:0 16px 34px rgba(0,0,0,.48);
  opacity:.98;
  transform:rotate(-2deg) scale(1.02);
}
.drag-card-ghost img{
  display:block;
  width:100%!important;
  height:100%!important;
  aspect-ratio:.72/1!important;
  object-fit:fill!important;
  background:#0b0d10;
}
/* Always-visible Library categories replace the previous sort and Filters controls. */
.library-panel{grid-template-rows:auto auto auto minmax(0,1fr)!important}
.library-quick-filters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:10px 0 14px}
.library-quick-filter{position:relative;min-width:0;padding:9px 6px;border:1px solid #33404d;border-radius:11px;background:linear-gradient(145deg,#171d24,#101419);box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 5px 13px rgba(0,0,0,.16);color:#aeb9c5;font-size:10px;font-weight:760;letter-spacing:.01em;transition:transform .17s ease,border-color .17s ease,background .17s ease,color .17s ease,box-shadow .17s ease}
.library-quick-filter:hover{transform:translateY(-1px);border-color:#697b8e;color:#edf3f8;background:linear-gradient(145deg,#202932,#151b22)}
.library-quick-filter.active{border-color:#e6b74d;background:linear-gradient(145deg,#45351c,#251e13);color:#ffe1a0;box-shadow:inset 0 1px 0 rgba(255,235,173,.12),0 0 0 1px rgba(232,182,71,.12),0 7px 16px rgba(0,0,0,.22)}
.library-quick-filter.active::after{content:'';position:absolute;right:8px;top:8px;width:5px;height:5px;border-radius:50%;background:#ffd267;box-shadow:0 0 8px rgba(255,202,91,.72)}
/* Binder delete confirmation is intentionally larger and easier to read. */
.delete-confirm-modal{width:min(640px,94vw);padding:30px 32px}
.delete-confirm-modal h3{margin-bottom:20px;font-size:28px}
.delete-confirm-copy{max-width:540px;margin-bottom:24px;font-size:19px;line-height:1.5;color:#c5ced8}
.delete-confirm-copy strong{color:#fff;font-size:1.08em;font-weight:850}
.delete-confirm-modal .modal-actions{margin-top:22px;gap:10px}
.delete-confirm-modal .modal-actions button{min-height:46px;padding:11px 19px;font-size:15px}

/* Card metadata: color-coded rarities and artwork variant badges */
.is-hidden{display:none!important}
.library-card-thumb{position:relative;display:block;width:100%;overflow:hidden}
/* Long-press on phones must pick the card up, not offer "save image": the press lands on the card, not the <img>. */
.library-card-thumb img{pointer-events:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.library-card-badges,.slot-badges{position:absolute;bottom:6px;right:6px;display:flex;align-items:center;justify-content:flex-end;pointer-events:none;z-index:4}
.variant-logo-badge{width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.65);border:1.5px solid rgba(255,255,255,.35);background:rgba(15,20,28,.88);backdrop-filter:blur(8px);transition:transform .18s cubic-bezier(0.2,0.8,0.2,1),box-shadow .18s ease;pointer-events:auto;cursor:help;flex-shrink:0;transform-origin:bottom right}
.variant-logo-badge:hover{transform:scale(1.25);box-shadow:0 4px 14px rgba(0,0,0,.9),0 0 10px rgba(255,255,255,.4);z-index:10}
.variant-logo-badge svg{width:22px;height:22px;display:block;pointer-events:none;border-radius:50%}
.variant-logo-badge.variant-masterball{border-color:rgba(168,85,247,.85);box-shadow:0 2px 8px rgba(0,0,0,.65),0 0 8px rgba(168,85,247,.5)}
.variant-logo-badge.variant-pokeball{border-color:rgba(239,68,68,.85);box-shadow:0 2px 8px rgba(0,0,0,.65),0 0 8px rgba(239,68,68,.5)}
.variant-logo-badge.variant-reverse{border-color:rgba(56,189,248,.85);box-shadow:0 2px 8px rgba(0,0,0,.65),0 0 8px rgba(56,189,248,.5)}
.variant-logo-badge.variant-jolly-roger{border-color:rgba(245,158,11,.85);box-shadow:0 2px 8px rgba(0,0,0,.65),0 0 8px rgba(245,158,11,.5)}
.variant-logo-badge.variant-foil{border-color:rgba(52,211,153,.85);box-shadow:0 2px 8px rgba(0,0,0,.65),0 0 8px rgba(52,211,153,.5)}
.variant-logo-badge.variant-first-edition{border-color:rgba(234,179,8,.85);box-shadow:0 2px 8px rgba(0,0,0,.65),0 0 8px rgba(234,179,8,.5)}
.variant-logo-badge.variant-winner{border-color:rgba(250,204,21,.85);box-shadow:0 2px 8px rgba(0,0,0,.65),0 0 8px rgba(250,204,21,.5)}
.variant-logo-badge.variant-stamped{border-color:rgba(244,63,94,.85);box-shadow:0 2px 8px rgba(0,0,0,.65),0 0 8px rgba(244,63,94,.5)}
.variant-logo-badge.variant-error{border-color:rgba(239,68,68,.85);box-shadow:0 2px 8px rgba(0,0,0,.65),0 0 8px rgba(239,68,68,.5)}
.rarity-badge,.variant-badge{max-width:72%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:3px 7px;background:rgba(8,11,15,.82);box-shadow:0 4px 12px rgba(0,0,0,.35);backdrop-filter:blur(7px);color:#fff;font-size:8px;font-weight:850;letter-spacing:.04em;text-transform:uppercase;transition:transform .15s ease,box-shadow .15s ease}
.library-card .rarity-badge{display:none!important}
.variant-badge{margin-left:auto;color:#dcecff;border-color:rgba(116,169,221,.45);background:rgba(15,31,48,.88)}
.variant-badge.variant-reverse{color:#c4f1f9;border-color:rgba(56,178,172,.5);background:rgba(12,42,48,.9);box-shadow:0 0 8px rgba(56,178,172,.3)}
.variant-badge.variant-pokeball{color:#ffcdd2;border-color:rgba(239,83,80,.5);background:rgba(55,14,14,.9);box-shadow:0 0 8px rgba(239,83,80,.3)}
.variant-badge.variant-masterball{color:#f3e8ff;border-color:rgba(168,85,247,.6);background:rgba(46,16,68,.9);box-shadow:0 0 10px rgba(168,85,247,.4)}
.variant-badge.variant-first-edition{color:#fef08a;border-color:rgba(234,179,8,.6);background:rgba(49,38,10,.9);box-shadow:0 0 8px rgba(234,179,8,.3)}
.variant-badge.variant-manga{color:#fdf4ff;border-color:rgba(217,70,239,.6);background:rgba(48,15,55,.9);box-shadow:0 0 10px rgba(217,70,239,.4)}
.variant-badge.variant-sp{color:#fed7aa;border-color:rgba(249,115,22,.6);background:rgba(52,24,11,.9);box-shadow:0 0 8px rgba(249,115,22,.3)}

/* Distinctive Rarity Color Themes (One Piece & Pokémon) */
/* Commons: subtle, muted slate grey */
.rarity-common, .rarity-badge.rarity-common{color:#b0bec5;border-color:rgba(148,163,184,.35);background:rgba(20,26,33,.88)}
/* Uncommons: subdued metallic pewter / light bronze */
.rarity-uncommon, .rarity-badge.rarity-uncommon{color:#e2e8f0;border-color:rgba(161,161,170,.4);background:rgba(28,34,42,.88)}
/* Rares: vibrant sapphire / electric blue */
.rarity-rare, .rarity-badge.rarity-rare{color:#93c5fd;border-color:rgba(96,165,250,.55);background:rgba(17,35,68,.9);box-shadow:0 0 10px rgba(59,130,246,.25)}
/* Double Rare / RR: bold violet / electric purple */
.rarity-double-rare, .rarity-badge.rarity-double-rare{color:#c084fc;border-color:rgba(168,85,247,.55);background:rgba(39,18,66,.9);box-shadow:0 0 10px rgba(168,85,247,.25)}
/* Super Rare (SR): royal amethyst glow */
.rarity-super-rare, .rarity-badge.rarity-super-rare{color:#e9d5ff;border-color:rgba(192,132,252,.6);background:rgba(49,20,84,.92);box-shadow:0 0 12px rgba(168,85,247,.35)}
/* Ultra Rare (UR): brilliant radiant gold */
.rarity-ultra-rare, .rarity-badge.rarity-ultra-rare{color:#fde68a;border-color:rgba(251,191,36,.65);background:rgba(53,37,12,.92);box-shadow:0 0 12px rgba(245,158,11,.35)}
/* Illustration Rare (IR / AR): luminous emerald teal */
.rarity-illustration-rare, .rarity-badge.rarity-illustration-rare{color:#5eead4;border-color:rgba(45,212,191,.6);background:rgba(13,46,45,.92);box-shadow:0 0 12px rgba(20,184,166,.35)}
/* Special Illustration Rare (SIR / SAR): neon magenta-pink prismatic gradient */
.rarity-special-illustration-rare, .rarity-badge.rarity-special-illustration-rare{color:#fbcfe8;border-color:rgba(244,114,182,.7);background:linear-gradient(135deg,rgba(70,14,53,.92),rgba(45,17,74,.92));box-shadow:0 0 14px rgba(236,72,153,.4)}
/* Hyper Rare (HR / Gold / Crown): shimmering metallic gold */
.rarity-hyper-rare, .rarity-badge.rarity-hyper-rare{color:#fef08a;border-color:rgba(250,204,21,.75);background:linear-gradient(135deg,rgba(68,49,11,.92),rgba(88,61,10,.92));box-shadow:0 0 14px rgba(250,204,21,.45)}
/* Secret Rare (SEC): fiery crimson ruby */
.rarity-secret-rare, .rarity-badge.rarity-secret-rare{color:#fca5a5;border-color:rgba(248,113,113,.65);background:rgba(60,16,18,.92);box-shadow:0 0 12px rgba(239,68,68,.35)}
/* Leader (L): imperial amber gold */
.rarity-leader, .rarity-badge.rarity-leader{color:#fef3c7;border-color:rgba(245,158,11,.65);background:rgba(58,35,11,.92);box-shadow:0 0 12px rgba(217,119,6,.35)}
/* ACE SPEC: iconic neon hot red */
.rarity-ace-spec, .rarity-badge.rarity-ace-spec{color:#ffe4e6;border-color:rgba(251,113,133,.7);background:rgba(76,14,31,.92);box-shadow:0 0 14px rgba(225,29,72,.45)}
/* Shiny Rare: crystalline diamond cyan */
.rarity-shiny, .rarity-badge.rarity-shiny{color:#cffafe;border-color:rgba(34,211,238,.6);background:rgba(12,46,56,.92);box-shadow:0 0 12px rgba(6,182,212,.35)}
/* Special / Treasure Rare: iridescent rainbow glow */
.rarity-special, .rarity-badge.rarity-special{color:#f3e8ff;border-color:rgba(216,180,254,.65);background:linear-gradient(135deg,rgba(56,19,65,.92),rgba(17,39,73,.92));box-shadow:0 0 14px rgba(168,85,247,.35)}
/* Promotional (P / Promo): tournament emerald */
.rarity-promo, .rarity-badge.rarity-promo{color:#a7f3d0;border-color:rgba(52,211,153,.6);background:rgba(12,47,32,.92);box-shadow:0 0 12px rgba(16,185,129,.35)}
.rarity-default, .rarity-badge.rarity-default{color:#ffd775;border-color:rgba(246,194,77,.48);background:rgba(43,31,12,.88)}
.tooltip-row strong.rarity-badge-inline{display:inline-block;padding:2px 8px;border-radius:999px;font-size:10px;line-height:1.3;text-transform:uppercase;font-weight:850;border:1px solid rgba(255,255,255,.25)}

/* Adjustable Library split view & collapsible drawers */
.workspace{
  --library-width:300px;
  grid-template-columns:minmax(0,1fr) 12px var(--library-width);
  position:relative;
  overflow:hidden;
  transition:grid-template-columns .22s cubic-bezier(.2,.8,.2,1);
}
.workspace .library-panel{width:var(--library-width);transition:opacity .16s ease,visibility .22s}
.workspace.library-collapsed{
  grid-template-columns:minmax(0,1fr) 0px 0px!important;
}
.workspace.library-collapsed .workspace-resizer{
  display:none!important;
}
.workspace.library-collapsed .library-panel{opacity:0;visibility:hidden;pointer-events:none}
.binder-stage{container-type:size}

/* Expanded spread when sidebars are collapsed */
.spread{
  transition:max-width .24s ease;
  /* A binder page is always card-shaped (63:88 regardless of grid size),
     so cap width by available height too — otherwise on a short viewport
     the width cap alone lets pages grow taller than the window. */
  max-width:min(1120px, calc((100dvh - 220px) * 1.43));
}
.binder-page,.spine{
  min-height:min(560px, calc(100dvh - 220px));
}
/* Capped by width AND by available height — a binder page is always
   card-shaped (63:88), so once width is unbounded (both panels closed)
   it must stop growing once the *pages* would run out of vertical room,
   or it balloons past the viewport instead of just filling it nicely. */
.workspace.library-collapsed .spread,
.main.library-collapsed .spread{
  max-width:min(1360px, calc(100% - 40px), calc((100dvh - 180px) * 1.48));
  max-height:calc(100dvh - 180px);
}
.app-shell.sidebar-collapsed .spread{
  max-width:min(1360px, calc((100dvh - 150px) * 1.5));
}
.app-shell.sidebar-collapsed .workspace.library-collapsed .spread,
.app-shell.sidebar-collapsed .main.library-collapsed .spread{
  max-width:min(1440px, calc(100% - 30px), calc((100dvh - 170px) * 1.5));
  max-height:calc(100dvh - 170px);
}
.workspace.library-collapsed .spread.cover-mode .page-wrap:first-child,
.main.library-collapsed .spread.cover-mode .page-wrap:first-child,
.app-shell.sidebar-collapsed .spread.cover-mode .page-wrap:first-child{
  width:min(540px,80vw,calc((100dvh - 180px) * .72));
}
.app-shell.sidebar-collapsed .workspace.library-collapsed .spread.cover-mode .page-wrap:first-child,
.app-shell.sidebar-collapsed .main.library-collapsed .spread.cover-mode .page-wrap:first-child{
  width:min(580px,82vw,calc((100dvh - 170px) * .72));
}
.workspace-resizer{
  position:relative;
  z-index:12;
  width:12px;
  min-width:12px;
  height:100%;
  cursor:col-resize;
  touch-action:none;
  outline:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.025),transparent);
}
.workspace-resizer::before{
  content:'';
  position:absolute;
  top:18px;
  bottom:18px;
  left:50%;
  width:2px;
  border-radius:999px;
  background:linear-gradient(180deg,transparent 0%,#36404b 12%,#4b5866 50%,#36404b 88%,transparent 100%);
  transform:translateX(-50%);
  transition:width .16s ease,background .16s ease,box-shadow .16s ease;
}
.workspace-resizer:hover::before,
.workspace-resizer:focus-visible::before,
.workspace.is-resizing .workspace-resizer::before{
  width:4px;
  background:linear-gradient(180deg,transparent 0%,#9b762f 12%,var(--accent) 50%,#9b762f 88%,transparent 100%);
  box-shadow:0 0 14px rgba(240,184,76,.32);
}
.workspace.is-resizing .binder-stage,
.workspace.is-resizing .library-panel{pointer-events:none}
body.library-resizing{cursor:col-resize!important;user-select:none!important}
.workspace>.library-panel{border-left:0}
.workspace .card-library,
.workspace .library-set-folder-grid,
.workspace .library-set-folder.open .library-set-folder-grid{
  grid-template-columns:repeat(auto-fill,minmax(120px,1fr))!important;
}
@media(max-width:850px){
  .workspace{grid-template-columns:1fr}
  .workspace-resizer{display:none}
}

/* Pokémon & Card Eras Styling */
.library-era-group{grid-column:1/-1;width:100%;border:1px solid #2d3844;border-radius:16px;overflow:hidden;background:linear-gradient(145deg,#161c24,#0e1218);box-shadow:0 4px 14px rgba(0,0,0,.18);margin-bottom:10px;transition:border-color .18s ease,box-shadow .18s ease}
.library-era-group.open{border-color:#485869}
.library-era-head{width:100%;display:grid;grid-template-columns:1fr auto 24px;gap:12px;align-items:center;min-height:58px;padding:14px 18px;border:0;background:transparent;color:#fff;cursor:pointer;text-align:left;transition:background .15s ease}
.library-era-head:hover{background:rgba(255,255,255,.05)}
.library-era-title{display:flex;align-items:center;gap:10px;min-width:0}
.library-era-badge{display:none!important}

.library-era-name{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:17px;
  font-weight:850;
  letter-spacing:.02em;
  line-height:1.2;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.library-era-icon{
  font-size:22px;
  line-height:1;
  flex-shrink:0;
}
.library-era-text{
  font-weight:850;
  letter-spacing:.015em;
  transition:color .18s ease,text-shadow .18s ease;
}
.library-era-tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:3px 9px;
  border-radius:7px;
  font-size:12.5px;
  font-weight:900;
  letter-spacing:.04em;
  margin-left:8px;
  transition:all .18s ease;
}
.library-era-tag.tag-en{
  background:#f1f5f9;
  color:#000000;
  border:1px solid rgba(0,0,0,0.3);
  box-shadow:0 1px 4px rgba(0,0,0,0.2);
}
.library-era-tag.tag-jp{
  background:#b91c1c;
  color:#ffffff;
  border:1px solid rgba(255,255,255,0.35);
  box-shadow:0 1px 6px rgba(185,28,28,0.45);
}
.library-era-head small{color:#9aa8b8;font-size:12px;font-weight:700;white-space:nowrap}
.library-era-caret{color:#a2b1c0;font-size:18px;text-align:center;font-weight:700}
.library-era-sets{padding:10px 12px 14px;border-top:1px solid #222c36;display:flex;flex-direction:column;gap:10px;background:rgba(9,13,17,.45)}
.library-era-sets .library-set-folder{border-color:#26313c;background:linear-gradient(145deg,rgba(20,26,34,.9),rgba(13,17,23,.95))}
.library-era-sets .library-set-folder:hover{border-color:#3a4a5b}
.library-era-sets .library-set-folder.open{border-color:#485e74;box-shadow:0 4px 18px rgba(0,0,0,.5)}
.library-era-sets .library-set-folder.open .library-set-folder-head{background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.07)}
.library-era-sets .library-set-folder.open .library-set-folder-grid{padding:12px;background:rgba(6,9,13,.55)}

/* Distinct cartoonish colors per Era */
/* Scarlet & Violet [EN] - Coral Scarlet */
.library-era-group[data-era-id="scarlet-and-violet-en"] .library-era-text{
  color:#ff5477;
  text-shadow:0 0 14px rgba(255,84,119,.3);
}
.library-era-group[data-era-id="scarlet-and-violet-en"]:hover,
.library-era-group[data-era-id="scarlet-and-violet-en"].open{
  border-color:rgba(255,84,119,.45);
  box-shadow:0 4px 18px rgba(255,84,119,.12);
}
.library-era-group[data-era-id="scarlet-and-violet-en"] .library-set-folder.open{
  border-color:rgba(255,84,119,.5);
  box-shadow:0 3px 16px rgba(255,84,119,.12);
}

/* Scarlet & Violet [JP] - Electric Violet */
.library-era-group[data-era-id="scarlet-and-violet-jp"] .library-era-text{
  color:#d946ef;
  text-shadow:0 0 14px rgba(217,70,239,.3);
}
.library-era-group[data-era-id="scarlet-and-violet-jp"]:hover,
.library-era-group[data-era-id="scarlet-and-violet-jp"].open{
  border-color:rgba(217,70,239,.45);
  box-shadow:0 4px 18px rgba(217,70,239,.12);
}
.library-era-group[data-era-id="scarlet-and-violet-jp"] .library-set-folder.open{
  border-color:rgba(217,70,239,.5);
  box-shadow:0 3px 16px rgba(217,70,239,.12);
}

/* Sword & Shield [EN] - Zacian Sky Cyan */
.library-era-group[data-era-id="sword-and-shield-en"] .library-era-text{
  color:#38bdf8;
  text-shadow:0 0 14px rgba(56,189,248,.3);
}
.library-era-group[data-era-id="sword-and-shield-en"]:hover,
.library-era-group[data-era-id="sword-and-shield-en"].open{
  border-color:rgba(56,189,248,.45);
  box-shadow:0 4px 18px rgba(56,189,248,.12);
}
.library-era-group[data-era-id="sword-and-shield-en"] .library-set-folder.open{
  border-color:rgba(56,189,248,.5);
  box-shadow:0 3px 16px rgba(56,189,248,.12);
}

/* Sword & Shield [JP] - Zamazenta Shield Ruby */
.library-era-group[data-era-id="sword-and-shield-jp"] .library-era-text{
  color:#fb7185;
  text-shadow:0 0 14px rgba(251,113,133,.3);
}
.library-era-group[data-era-id="sword-and-shield-jp"]:hover,
.library-era-group[data-era-id="sword-and-shield-jp"].open{
  border-color:rgba(251,113,133,.45);
  box-shadow:0 4px 18px rgba(251,113,133,.12);
}
.library-era-group[data-era-id="sword-and-shield-jp"] .library-set-folder.open{
  border-color:rgba(251,113,133,.5);
  box-shadow:0 3px 16px rgba(251,113,133,.12);
}

/* Sun & Moon [EN] - Solar Amber (☀️) */
.library-era-group[data-era-id="sun-and-moon-en"] .library-era-text{
  color:#f59e0b;
  text-shadow:0 0 14px rgba(245,158,11,.35);
}
.library-era-group[data-era-id="sun-and-moon-en"]:hover,
.library-era-group[data-era-id="sun-and-moon-en"].open{
  border-color:rgba(245,158,11,.45);
  box-shadow:0 4px 18px rgba(245,158,11,.12);
}
.library-era-group[data-era-id="sun-and-moon-en"] .library-set-folder.open{
  border-color:rgba(245,158,11,.5);
  box-shadow:0 3px 16px rgba(245,158,11,.12);
}

/* Sun & Moon [JP] - Lunar Indigo (🌙) */
.library-era-group[data-era-id="sun-and-moon-jp"] .library-era-text{
  color:#818cf8;
  text-shadow:0 0 14px rgba(129,140,248,.35);
}
.library-era-group[data-era-id="sun-and-moon-jp"]:hover,
.library-era-group[data-era-id="sun-and-moon-jp"].open{
  border-color:rgba(129,140,248,.45);
  box-shadow:0 4px 18px rgba(129,140,248,.12);
}
.library-era-group[data-era-id="sun-and-moon-jp"] .library-set-folder.open{
  border-color:rgba(129,140,248,.5);
  box-shadow:0 3px 16px rgba(129,140,248,.12);
}

/* Mega Evolution [EN] - Mega Emerald Green */
.library-era-group[data-era-id="mega-evolution-en"] .library-era-text{
  color:#34d399;
  text-shadow:0 0 14px rgba(52,211,153,.3);
}
.library-era-group[data-era-id="mega-evolution-en"]:hover,
.library-era-group[data-era-id="mega-evolution-en"].open{
  border-color:rgba(52,211,153,.45);
  box-shadow:0 4px 18px rgba(52,211,153,.12);
}
.library-era-group[data-era-id="mega-evolution-en"] .library-set-folder.open{
  border-color:rgba(52,211,153,.5);
  box-shadow:0 3px 16px rgba(52,211,153,.12);
}

/* Mega Evolution [JP] - Prism Lime */
.library-era-group[data-era-id="mega-evolution-jp"] .library-era-text{
  color:#a3e635;
  text-shadow:0 0 14px rgba(163,230,53,.3);
}
.library-era-group[data-era-id="mega-evolution-jp"]:hover,
.library-era-group[data-era-id="mega-evolution-jp"].open{
  border-color:rgba(163,230,53,.45);
  box-shadow:0 4px 18px rgba(163,230,53,.12);
}
.library-era-group[data-era-id="mega-evolution-jp"] .library-set-folder.open{
  border-color:rgba(163,230,53,.5);
  box-shadow:0 3px 16px rgba(163,230,53,.12);
}

/* One Piece (OP Series) - Pirate Gold / Amber */
.library-era-group[data-era-id="one-piece-series"] .library-era-text{
  color:#fbbf24;
  text-shadow:0 0 14px rgba(251,191,36,.3);
}
.library-era-group[data-era-id="one-piece-series"]:hover,
.library-era-group[data-era-id="one-piece-series"].open{
  border-color:rgba(251,191,36,.45);
  box-shadow:0 4px 18px rgba(251,191,36,.12);
}
.library-era-group[data-era-id="one-piece-series"] .library-set-folder.open{
  border-color:rgba(251,191,36,.5);
  box-shadow:0 3px 16px rgba(251,191,36,.12);
}

/* XY Series [EN] - Xerneas Fairy Sky Cyan */
.library-era-group[data-era-id="xy-series-en"] .library-era-text{
  color:#38bdf8;
  text-shadow:0 0 14px rgba(56,189,248,.35);
}
.library-era-group[data-era-id="xy-series-en"]:hover,
.library-era-group[data-era-id="xy-series-en"].open{
  border-color:rgba(56,189,248,.45);
  box-shadow:0 4px 18px rgba(56,189,248,.12);
}
.library-era-group[data-era-id="xy-series-en"] .library-set-folder.open{
  border-color:rgba(56,189,248,.5);
  box-shadow:0 3px 16px rgba(56,189,248,.12);
}

/* XY Series [JP] - Yveltal Dark Carmine */
.library-era-group[data-era-id="xy-series-jp"] .library-era-text{
  color:#f43f5e;
  text-shadow:0 0 14px rgba(244,63,94,.35);
}
.library-era-group[data-era-id="xy-series-jp"]:hover,
.library-era-group[data-era-id="xy-series-jp"].open{
  border-color:rgba(244,63,94,.45);
  box-shadow:0 4px 18px rgba(244,63,94,.12);
}
.library-era-group[data-era-id="xy-series-jp"] .library-set-folder.open{
  border-color:rgba(244,63,94,.5);
  box-shadow:0 3px 16px rgba(244,63,94,.12);
}

/* Black & White [EN] - Reshiram Pearl White */
.library-era-group[data-era-id="black-and-white-en"] .library-era-text{
  color:#f8fafc;
  text-shadow:0 0 14px rgba(248,250,252,.45);
}
.library-era-group[data-era-id="black-and-white-en"]:hover,
.library-era-group[data-era-id="black-and-white-en"].open{
  border-color:rgba(248,250,252,.5);
  box-shadow:0 4px 18px rgba(248,250,252,.15);
}
.library-era-group[data-era-id="black-and-white-en"] .library-set-folder.open{
  border-color:rgba(248,250,252,.5);
  box-shadow:0 3px 16px rgba(248,250,252,.12);
}

/* Black & White [JP] - Zekrom Obsidian Platinum */
.library-era-group[data-era-id="black-and-white-jp"] .library-era-text{
  color:#94a3b8;
  text-shadow:0 0 14px rgba(148,163,184,.45);
}
.library-era-group[data-era-id="black-and-white-jp"]:hover,
.library-era-group[data-era-id="black-and-white-jp"].open{
  border-color:rgba(148,163,184,.5);
  box-shadow:0 4px 18px rgba(148,163,184,.15);
}
.library-era-group[data-era-id="black-and-white-jp"] .library-set-folder.open{
  border-color:rgba(148,163,184,.5);
  box-shadow:0 3px 16px rgba(148,163,184,.12);
}

/* HeartGold & SoulSilver [EN] - Ho-Oh & Lugia Amber Gold */
.library-era-group[data-era-id="heartgold-soulsilver-en"] .library-era-text{
  color:#f59e0b;
  text-shadow:0 0 14px rgba(245,158,11,.45);
}
.library-era-group[data-era-id="heartgold-soulsilver-en"]:hover,
.library-era-group[data-era-id="heartgold-soulsilver-en"].open{
  border-color:rgba(245,158,11,.5);
  box-shadow:0 4px 18px rgba(245,158,11,.15);
}
.library-era-group[data-era-id="heartgold-soulsilver-en"] .library-set-folder.open{
  border-color:rgba(245,158,11,.5);
  box-shadow:0 3px 16px rgba(245,158,11,.12);
}

/* Platinum Series [EN] - Giratina Platinum Slate */
.library-era-group[data-era-id="platinum-series-en"] .library-era-text{
  color:#cbd5e1;
  text-shadow:0 0 14px rgba(203,213,225,.45);
}
.library-era-group[data-era-id="platinum-series-en"]:hover,
.library-era-group[data-era-id="platinum-series-en"].open{
  border-color:rgba(203,213,225,.5);
  box-shadow:0 4px 18px rgba(203,213,225,.15);
}
.library-era-group[data-era-id="platinum-series-en"] .library-set-folder.open{
  border-color:rgba(203,213,225,.5);
  box-shadow:0 3px 16px rgba(203,213,225,.12);
}

/* Diamond & Pearl [EN] - Dialga Brilliant Diamond Cyan */
.library-era-group[data-era-id="diamond-and-pearl-en"] .library-era-text{
  color:#38bdf8;
  text-shadow:0 0 14px rgba(56,189,248,.45);
}
.library-era-group[data-era-id="diamond-and-pearl-en"]:hover,
.library-era-group[data-era-id="diamond-and-pearl-en"].open{
  border-color:rgba(56,189,248,.5);
  box-shadow:0 4px 18px rgba(56,189,248,.15);
}
.library-era-group[data-era-id="diamond-and-pearl-en"] .library-set-folder.open{
  border-color:rgba(56,189,248,.5);
  box-shadow:0 3px 16px rgba(56,189,248,.12);
}

/* POP Series [EN] - Crimson Red */
.library-era-group[data-era-id="pop-series-en"] .library-era-text{
  color:#ef4444;
  text-shadow:0 0 14px rgba(239,68,68,.45);
}
.library-era-group[data-era-id="pop-series-en"]:hover,
.library-era-group[data-era-id="pop-series-en"].open{
  border-color:rgba(239,68,68,.5);
  box-shadow:0 4px 18px rgba(239,68,68,.15);
}
.library-era-group[data-era-id="pop-series-en"] .library-set-folder.open{
  border-color:rgba(239,68,68,.5);
  box-shadow:0 3px 16px rgba(239,68,68,.12);
}

/* EX Series [EN] - EX Fire Orange */
.library-era-group[data-era-id="ex-series-en"] .library-era-text{
  color:#f97316;
  text-shadow:0 0 14px rgba(249,115,22,.45);
}
.library-era-group[data-era-id="ex-series-en"]:hover,
.library-era-group[data-era-id="ex-series-en"].open{
  border-color:rgba(249,115,22,.5);
  box-shadow:0 4px 18px rgba(249,115,22,.15);
}
.library-era-group[data-era-id="ex-series-en"] .library-set-folder.open{
  border-color:rgba(249,115,22,.5);
  box-shadow:0 3px 16px rgba(249,115,22,.12);
}

/* Nintendo Promos [EN] - Black Star Yellow */
.library-era-group[data-era-id="nintendo-promos-en"] .library-era-text{
  color:#eab308;
  text-shadow:0 0 14px rgba(234,179,8,.45);
}
.library-era-group[data-era-id="nintendo-promos-en"]:hover,
.library-era-group[data-era-id="nintendo-promos-en"].open{
  border-color:rgba(234,179,8,.5);
  box-shadow:0 4px 18px rgba(234,179,8,.15);
}
.library-era-group[data-era-id="nintendo-promos-en"] .library-set-folder.open{
  border-color:rgba(234,179,8,.5);
  box-shadow:0 3px 16px rgba(234,179,8,.12);
}

/* e-Card Series [EN] - Dot-Code Sky Blue */
.library-era-group[data-era-id="ecard-series-en"] .library-era-text{
  color:#0284c7;
  text-shadow:0 0 14px rgba(2,132,199,.45);
}
.library-era-group[data-era-id="ecard-series-en"]:hover,
.library-era-group[data-era-id="ecard-series-en"].open{
  border-color:rgba(2,132,199,.5);
  box-shadow:0 4px 18px rgba(2,132,199,.15);
}
.library-era-group[data-era-id="ecard-series-en"] .library-set-folder.open{
  border-color:rgba(2,132,199,.5);
  box-shadow:0 3px 16px rgba(2,132,199,.12);
}

/* Neo Era [EN] - Mystic Purple */
.library-era-group[data-era-id="neo-series-en"] .library-era-text{
  color:#a855f7;
  text-shadow:0 0 14px rgba(168,85,247,.45);
}
.library-era-group[data-era-id="neo-series-en"]:hover,
.library-era-group[data-era-id="neo-series-en"].open{
  border-color:rgba(168,85,247,.5);
  box-shadow:0 4px 18px rgba(168,85,247,.15);
}
.library-era-group[data-era-id="neo-series-en"] .library-set-folder.open{
  border-color:rgba(168,85,247,.5);
  box-shadow:0 3px 16px rgba(168,85,247,.12);
}

/* Gym Heroes [EN] - Gym Badge Teal */
.library-era-group[data-era-id="gym-heroes-en"] .library-era-text{
  color:#2dd4bf;
  text-shadow:0 0 14px rgba(45,212,191,.45);
}
.library-era-group[data-era-id="gym-heroes-en"]:hover,
.library-era-group[data-era-id="gym-heroes-en"].open{
  border-color:rgba(45,212,191,.5);
  box-shadow:0 4px 18px rgba(45,212,191,.15);
}
.library-era-group[data-era-id="gym-heroes-en"] .library-set-folder.open{
  border-color:rgba(45,212,191,.5);
  box-shadow:0 3px 16px rgba(45,212,191,.12);
}

/* Base Set [EN] - Vintage Pokémon Amber Gold */
.library-era-group[data-era-id="base-set-en"] .library-era-text{
  color:#fbbf24;
  text-shadow:0 0 14px rgba(251,191,36,.45);
}
.library-era-group[data-era-id="base-set-en"]:hover,
.library-era-group[data-era-id="base-set-en"].open{
  border-color:rgba(251,191,36,.5);
  box-shadow:0 4px 18px rgba(251,191,36,.15);
}
.library-era-group[data-era-id="base-set-en"] .library-set-folder.open{
  border-color:rgba(251,191,36,.5);
  box-shadow:0 3px 16px rgba(251,191,36,.12);
}

/* Collections [EN] - Festive Gift Emerald Mint */
.library-era-group[data-era-id="collections-en"] .library-era-text{
  color:#34d399;
  text-shadow:0 0 14px rgba(52,211,153,.35);
}
.library-era-group[data-era-id="collections-en"]:hover,
.library-era-group[data-era-id="collections-en"].open{
  border-color:rgba(52,211,153,.5);
  box-shadow:0 4px 18px rgba(52,211,153,.15);
}
.library-era-group[data-era-id="collections-en"] .library-set-folder.open{
  border-color:rgba(52,211,153,.5);
  box-shadow:0 3px 16px rgba(52,211,153,.12);
}

/* Other Pokémon Sets - Celestial Lilac */
.library-era-group[data-era-id="other"] .library-era-text,
.library-era-group[data-era-id="other-en"] .library-era-text{
  color:#c084fc;
  text-shadow:0 0 14px rgba(192,132,252,.3);
}
.library-era-group[data-era-id="other"]:hover,
.library-era-group[data-era-id="other"].open,
.library-era-group[data-era-id="other-en"]:hover,
.library-era-group[data-era-id="other-en"].open{
  border-color:rgba(192,132,252,.45);
  box-shadow:0 4px 18px rgba(192,132,252,.12);
}
.library-era-group[data-era-id="other"] .library-set-folder.open,
.library-era-group[data-era-id="other-en"] .library-set-folder.open{
  border-color:rgba(192,132,252,.5);
  box-shadow:0 3px 16px rgba(192,132,252,.12);
}

/* Offline badge & Lock Binder controls */
.offline-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #fbbf24;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.03em;
  user-select: none;
  animation: pulse-badge 2s infinite ease-in-out;
}
@keyframes pulse-badge {
  0%, 100% { opacity: 0.88; }
  50% { opacity: 1; }
}
.offline-badge.hidden {
  display: none !important;
}

.lock-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 650;
  font-size: 13px;
  transition: all 0.18s ease;
  user-select: none;
}
.lock-btn .lock-icon {
  font-size: 14px;
  line-height: 1;
}
.lock-btn.is-locked {
  background: rgba(239, 68, 68, 0.14) !important;
  border-color: rgba(239, 68, 68, 0.45) !important;
  color: #fca5a5 !important;
}
.lock-btn.is-locked:hover {
  background: rgba(239, 68, 68, 0.22) !important;
  border-color: rgba(239, 68, 68, 0.65) !important;
}

.library-head {
  flex-wrap: wrap;
  row-gap: 8px;
}
.library-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
}
.library-lock-badge {
  display: inline-flex;
  align-items: center;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #fca5a5;
  font-size: 10px;
  font-weight: 750;
  padding: 2px 7px;
  border-radius: 6px;
  letter-spacing: 0.02em;
  user-select: none;
}
.library-lock-badge.hidden {
  display: none !important;
}

/* Locked mode interaction changes */
.library-panel.locked .library-card,
.binder-locked .library-card {
  cursor: pointer !important;
}
.library-panel.locked .library-card:active,
.binder-locked .library-card:active {
  cursor: pointer !important;
}
.binder-locked .slot {
  cursor: pointer !important;
}
.binder-locked .slot.empty {
  cursor: default !important;
}
.binder-locked .slot.drag-over {
  border-color: transparent !important;
  box-shadow: none !important;
}

.card-context-action:disabled {
  opacity: 0.38 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* In-place Library Drag & Drop Reordering */
.library-card.library-drop-target {
  outline: 2px solid #f59e0b !important;
  box-shadow: 0 0 18px rgba(245, 158, 11, 0.75) !important;
  transform: scale(1.06) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
  z-index: 10 !important;
}

.library-set-folder.library-drop-target > .library-set-folder-head {
  border-color: #f59e0b !important;
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.5) !important;
  background: rgba(245, 158, 11, 0.12) !important;
}

.library-era-group.library-drop-target > .library-era-head {
  border-color: #f59e0b !important;
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.5) !important;
  background: rgba(245, 158, 11, 0.12) !important;
}

.library-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-sync-btn {
  font-size: 11px !important;
  padding: 3px 8px !important;
  border-color: rgba(245, 158, 11, 0.4) !important;
  color: #fbbf24 !important;
  background: rgba(245, 158, 11, 0.08) !important;
  line-height: 1.3 !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}
.admin-sync-btn:hover {
  border-color: rgba(245, 158, 11, 0.8) !important;
  background: rgba(245, 158, 11, 0.18) !important;
}

.library-era-icon-img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  vertical-align: middle;
  border-radius: 3px;
  margin-right: 4px;
}

/* Bonus Admin Fields in Card Modal */
.admin-bonus-box {
  margin-top: 4px;
  padding: 12px 14px;
  background: rgba(245, 158, 11, 0.04);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: 8px;
}

.admin-bonus-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 13px;
  color: #fde68a;
}

.admin-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #e2e8f0;
  cursor: pointer;
  user-select: none;
}

.admin-checkbox-label input[type="checkbox"] {
  accent-color: #f59e0b;
  cursor: pointer;
}

.admin-bonus-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}

.custom-creation-box {
  margin-top: 10px;
  padding: 10px 12px;
  background: rgba(15, 23, 42, 0.6);
  border: 1px dashed rgba(245, 158, 11, 0.35);
  border-radius: 6px;
}

.custom-creation-box.is-hidden {
  display: none !important;
}

.custom-creation-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #fbbf24;
  margin-bottom: 8px;
}

.preview-admin-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Admin badge active state */
.admin-badge-active {
  background: rgba(245, 158, 11, 0.28) !important;
  border-color: rgba(245, 158, 11, 0.7) !important;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2);
}

/* Admin inline edit / add buttons (appear next to era/set heads in admin mode) */
.admin-inline-edit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 5px;
  color: #fbbf24;
  font-size: 11px;
  padding: 2px 6px;
  cursor: pointer;
  line-height: 1.4;
  margin: 2px 0 2px 4px;
  transition: background 0.12s, border-color 0.12s;
  vertical-align: middle;
}
.admin-inline-edit-btn:hover {
  background: rgba(245, 158, 11, 0.15);
  border-color: rgba(245, 158, 11, 0.6);
}

.admin-inline-add-btn {
  display: inline-flex;
  align-items: center;
  background: transparent;
  border: 1px dashed rgba(245, 158, 11, 0.35);
  border-radius: 5px;
  color: #fbbf24;
  font-size: 11px;
  padding: 2px 8px;
  cursor: pointer;
  line-height: 1.4;
  margin: 2px 0 2px 4px;
  transition: background 0.12s, border-color 0.12s;
  vertical-align: middle;
}
.admin-inline-add-btn:hover {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.6);
}

/* Admin footer row at bottom of library (Add Era) */
.admin-library-footer {
  padding: 10px 8px 4px;
  display: flex;
  gap: 8px;
  justify-content: center;
  border-top: 1px dashed rgba(245, 158, 11, 0.2);
  margin-top: 8px;
}



/* Brand mark and theme visibility toggles */
body:not(.pixel-theme) .pixel-mark { display: none !important; }
body:not(.pixel-theme) .classic-brand-mark { display: grid !important; }
body.pixel-theme .classic-brand-mark { display: none !important; }
body.pixel-theme .pixel-mark { display: block !important; }

body:not(.pixel-theme) #sceneThemeBtn { display: none !important; }
body.pixel-theme #sceneThemeBtn { display: flex !important; }

/* Theme checkbox styling in modal */
.theme-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  padding: 6px 0;
}
.theme-checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
  cursor: pointer;
}

/* Keyframes for pixel world */
@keyframes worldDrift{from{transform:scale(1.01) translate3d(-.35%,0,0)}to{transform:scale(1.025) translate3d(.35%,-.3%,0)}}
@keyframes worldLight{from{opacity:.72}to{opacity:1}}
@keyframes rareWobble{0%,100%{transform:rotate(-1.3deg)}50%{transform:rotate(1.3deg)}}

/* Everything below is pixel-theme-only cosmetic/geometry work.
   :where() keeps this block's own specificity at ZERO, so nesting it
   here can't let these rules out-rank sibling rules elsewhere in the
   file the way a real class-selector wrapper would. */
:where(body.pixel-theme) {


/* Pixel drawer collapse buttons & stage expansion */
  .sidebar-close-btn {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    border: 2px solid var(--ink);
    background: var(--box-2);
    color: var(--ink);
    display: grid;
    place-items: center;
    padding: 0;
    cursor: pointer;
    box-shadow: 2px 2px 0 var(--ink);
    margin-left: auto;
    flex-shrink: 0;
    transition: all .12s steps(2,end);
  }
  .sidebar-close-btn:hover {
    background: #fff;
    transform: translate(1px, 1px);
    box-shadow: 1px 1px 0 var(--ink);
  }
  .sidebar-toggle-btn {
    width: 38px;
    height: 38px;
    border-radius: 4px;
    border: 2px solid var(--ink);
    background: var(--box-2);
    color: var(--ink);
    display: grid;
    place-items: center;
    padding: 0;
    cursor: pointer;
    box-shadow: 2px 2px 0 var(--ink);
    flex-shrink: 0;
    transition: all .12s steps(2,end);
  }
  .sidebar-toggle-btn:hover {
    background: #fff;
    transform: translate(1px, 1px);
    box-shadow: 1px 1px 0 var(--ink);
  }
  .app-shell.sidebar-collapsed .sidebar-toggle-btn {
    background: var(--pixel-yellow);
    border-color: var(--ink);
    color: #2a1203;
    box-shadow: 2px 2px 0 var(--ink);
  }
  .library-toggle-btn {
    font-family: var(--sans);
    font-weight: 900;
    border: 2px solid var(--ink);
    background: var(--box);
    color: var(--ink);
    border-radius: 4px;
    box-shadow: 2px 2px 0 var(--ink);
  }
  .library-toggle-btn:hover {
    background: #fffdf2;
    transform: none;
  }
  .library-toggle-btn.is-collapsed {
    background: var(--pixel-yellow);
    color: #2a1203;
  }
  .library-close-btn {
    width: 30px;
    height: 30px;
    border-radius: 4px;
    border: 2px solid var(--ink);
    background: var(--box-2);
    color: var(--ink);
    display: grid;
    place-items: center;
    padding: 0;
    cursor: pointer;
    box-shadow: 2px 2px 0 var(--ink);
    flex-shrink: 0;
    transition: all .12s steps(2,end);
  }
  .library-close-btn:hover {
    background: #f2b0a6;
    color: #751d24;
    transform: translate(1px, 1px);
    box-shadow: 1px 1px 0 var(--ink);
  }
  /* Locked badge: solid pixel-bordered fill so it reads on cream (day) and ink (night) alike */
  .library-lock-badge {
    gap: 5px;
    padding: 3px 8px;
    border-radius: 3px;
    border: 2px solid var(--ink);
    box-shadow: 2px 2px 0 var(--ink);
    font-family: var(--sans);
    font-weight: 800;
  }
  .library-lock-badge .btn-ico {
    width: 11px;
    height: 11px;
  }
  .library-lock-badge {
    background: #f5d3ca;
    color: #7a1f1f;
  }
  &[data-scene="night"] .library-lock-badge {
    background: #4a1616;
    color: #ffd0c7;
    border-color: #7a2b2b;
  }
  .library-dock-btn {
    /* .workspace is display:contents, so this button is a direct grid item
       of .main — pin it to the stage's own cell (col 1 / row 2), not
       .main's full box, or it floats up into the topbar's row and
       overlaps the topbar buttons. */
    grid-column: 1;
    grid-row: 2;
    position: absolute;
    right: 16px;
    top: 16px;
    z-index: 30;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 4px;
    background: var(--box);
    border: 3px solid var(--ink);
    color: var(--ink);
    font-size: 11px;
    font-weight: 900;
    font-family: var(--sans);
    cursor: pointer;
    box-shadow: 4px 4px 0 var(--ink);
    transition: all .12s steps(2,end);
  }
  .library-dock-btn:hover {
    background: var(--pixel-yellow);
    color: #2a1203;
    box-shadow: 3px 3px 0 var(--ink);
    transform: translate(1px, 1px);
  }
  .library-dock-btn svg {
    color: var(--pixel-orange-deep);
  }
  .theme-checkbox-label {
    color: var(--ink);
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 800;
  }
  .theme-checkbox-label input[type="checkbox"] {
    accent-color: var(--pixel-orange);
  }
  &[data-scene="night"] .sidebar-close-btn,
  &[data-scene="night"] .sidebar-toggle-btn,
  &[data-scene="night"] .library-close-btn,
  &[data-scene="night"] .library-dock-btn {
    background: var(--box-2);
    color: #eef6ed;
    border-color: var(--ink);
    box-shadow: 2px 2px 0 #020b13;
  }
  &[data-scene="night"] .library-dock-btn:hover {
    background: #bf541a;
    color: #fff3ce;
  }

  /* Drawer collapse states for .main and .app-shell in pixel theme */
  .library-panel,
  .workspace-resizer {
    min-width: 0;
    overflow: hidden;
    transition: opacity .16s ease;
  }
  .main.library-collapsed,
  .workspace.library-collapsed {
    grid-template-columns: minmax(0, 1fr) 0px 0px !important;
  }
  .main.library-collapsed .workspace-resizer,
  .main.library-collapsed .library-panel,
  .workspace.library-collapsed ~ .library-panel,
  .workspace.library-collapsed .workspace-resizer,
  .workspace.library-collapsed .library-panel {
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .main.library-collapsed .spread:not(.cover-mode),
  .workspace.library-collapsed .spread:not(.cover-mode) {
    --binder-max: 1360px !important;
  }
  .app-shell.sidebar-collapsed .spread:not(.cover-mode) {
    --binder-max: 1360px !important;
  }
  .app-shell.sidebar-collapsed .main.library-collapsed .spread:not(.cover-mode),
  .app-shell.sidebar-collapsed .workspace.library-collapsed .spread:not(.cover-mode) {
    --binder-max: 1440px !important;
  }

/* 32-bit overworld + the Claude artifact's chunky binder UI. */
&{--pixel:"Press Start 2P","Courier New",monospace;--sans:Nunito,ui-sans-serif,system-ui,sans-serif;--box:#f8f4e4;--box-2:#e7dfc4;--ink:#14203c;--pixel-orange:#ff7a18;--pixel-orange-deep:#b8500c;--pixel-yellow:#ffcb05;--holo-1:#5ce1e6;--holo-2:#b57bff;--holo-3:#ff8fd0;--binder:#2f63c9;--binder-deep:#1a2c60;--accent:#ff7a18;--accent2:#b8500c;--authgate-backdrop:rgba(20,32,60,.28);--authgate-input-bg:#fff;--authgate-input-color:#14203c}
&{height:auto;min-height:100%;scroll-behavior:smooth}
&{overflow:auto;padding:1px 0 36px;background:#6f9f48;color:var(--ink);font-family:var(--sans)}
&::before,&::after{content:"";position:fixed;z-index:0;pointer-events:none}
&::before{inset:-2%;background:center/cover no-repeat url('/assets/binder-world-day.webp');image-rendering:pixelated;animation:worldDrift 32s steps(16,end) infinite alternate;will-change:transform}
&::after{inset:0;background:radial-gradient(ellipse at 52% 48%,transparent 25%,rgba(18,43,21,.14) 74%,rgba(8,24,15,.42));animation:worldLight 6s steps(6,end) infinite alternate}
&[data-scene="night"]::before{background-image:url('/assets/binder-world-night.webp')}
&[data-scene="night"]::after{background:radial-gradient(ellipse at 52% 48%,transparent 18%,rgba(3,16,32,.2) 70%,rgba(2,9,20,.68))}
.pixel-mark,.cover-pixel-mark{display:block;overflow:visible;image-rendering:pixelated}
.route-intro,.route-launch,.app-shell{position:relative;z-index:1;width:min(1160px,calc(100% - 44px));margin-left:auto;margin-right:auto}
.route-intro{width:min(700px,calc(100% - 44px));margin-top:44px;margin-bottom:26px;margin-left:max(22px,calc((100vw - 1160px)/2));padding:20px 22px;background:var(--box);border:4px solid var(--ink);box-shadow:6px 6px 0 var(--ink)}
.route-intro h1{margin:0;font:400 18px/1.55 var(--pixel);letter-spacing:-.03em}.route-intro h1 span{color:var(--pixel-orange);text-shadow:2px 2px 0 var(--pixel-orange-deep)}
.route-intro p{max-width:680px;margin:14px 0 0;color:#5c6472;font-size:14px;font-weight:800;line-height:1.7}
.route-launch{margin-bottom:16px}.route-launch a,.primary{display:inline-flex;align-items:center;justify-content:center;padding:10px 13px;background:var(--pixel-orange);color:#2a1203;border:3px solid var(--ink);border-radius:0;box-shadow:4px 4px 0 var(--ink);font:400 9px/1.5 var(--pixel);text-decoration:none;transition:transform .12s steps(2,end),box-shadow .12s steps(2,end)}
.route-launch a{background:var(--pixel-yellow)}.route-launch a:hover,.primary:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}.route-launch a:active,.primary:active{transform:translate(4px,4px);box-shadow:none}
.app-shell{height:676px;margin-bottom:52px;grid-template-columns:252px minmax(0,1fr);overflow:hidden;background:transparent;border:4px solid var(--ink);box-shadow:6px 6px 0 var(--ink),0 44px 80px -34px rgba(20,32,60,.5)}
.main{--library-width:296px;position:relative;display:grid;height:100%;min-width:0;min-height:0;grid-template-columns:minmax(0,1fr) 8px var(--library-width);grid-template-rows:86px minmax(0,1fr);background:transparent;transition:grid-template-columns .22s cubic-bezier(.2,.8,.2,1)}
.workspace{display:contents;--library-width:inherit}.topbar{grid-column:1/3;grid-row:1}.binder-stage{grid-column:1;grid-row:2}.workspace-resizer{grid-column:2;grid-row:1/3}.library-panel{grid-column:3;grid-row:1/3}
.sidebar,.topbar,.library-panel{background:var(--box);color:var(--ink);border-color:var(--ink);backdrop-filter:none;box-shadow:none}
.sidebar{padding:18px 14px 14px;gap:14px;border-right-width:4px}.topbar{height:auto;padding:0 16px;border-bottom:4px solid var(--ink)}.library-panel{height:100%;padding:16px 14px 28px;border-left:4px solid var(--ink);scrollbar-color:#7d91a5 var(--box-2)}
.brand{gap:10px;padding:2px 2px 8px}.brand-mark{width:34px;height:34px;flex:0 0 auto;border-radius:0;background:none;box-shadow:none}.brand strong,.topbar h1,.library-head h2{font-family:var(--pixel);letter-spacing:-.04em}.brand strong{font-size:9px;line-height:1.5}.brand span{margin-top:6px;color:#8a8f9c;font-size:11px;font-weight:800}.topbar h1{font-size:14px}.library-head h2{font-size:10px}
.eyebrow{color:#786d5b;font:400 7px/1.5 var(--pixel);letter-spacing:.06em}.top-actions{gap:7px}.scene-theme-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:126px;white-space:nowrap}.scene-theme-btn span:first-child{color:var(--pixel-orange);font-size:17px;line-height:1}.scene-theme-btn span:last-child{font:400 7px/1.4 var(--pixel)}
.binder-item{padding:10px;border:1px solid #a89d7e;border-radius:0;background:var(--box-2);color:#5c6472;box-shadow:2px 2px 0 rgba(20,32,60,.35);font:400 8px/1.5 var(--pixel);transition:transform .12s steps(2,end)}.binder-item:hover{background:#efe8ce;color:var(--ink);transform:translate(-1px,-1px)}.binder-item.active{background:var(--pixel-orange);border:3px solid var(--ink);color:var(--ink);box-shadow:4px 4px 0 var(--ink)}.binder-item.active .binder-dot{background:var(--pixel-yellow);box-shadow:none}
.binder-value-card{margin-top:auto;background:var(--box-2);border:2px solid var(--ink);border-radius:0;box-shadow:3px 3px 0 var(--ink)}.binder-total{color:#c55020;font:400 14px/1.4 var(--pixel)}
.ghost,.round,.danger-soft,.pill,.search,.currency-select,.library-quick-filter,.binder-nav-dock{border-radius:0;border-color:var(--ink)}
.ghost,.round,.danger-soft{background:var(--box);color:var(--ink);border-width:2px;box-shadow:3px 3px 0 var(--ink);transition:transform .12s steps(2,end),box-shadow .12s steps(2,end)}.ghost:hover,.round:hover:not(:disabled),.danger-soft:hover{background:#fff9e6;transform:translate(1px,1px);box-shadow:2px 2px 0 var(--ink)}.danger-soft{background:#f5d3ca;color:#8e2828}.search,.currency-select{background:#fff;color:var(--ink);border-width:2px}.pill{background:var(--box-2);color:#5c6472;border-width:2px}
.library-quick-filter{background:var(--box-2);color:#5c6472;border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink);font:400 6px/1.45 var(--pixel);transition:transform .12s steps(2,end)}.library-quick-filter:hover{background:#fff8df;color:var(--ink);transform:translate(1px,1px)}.library-quick-filter.active{background:var(--pixel-yellow);color:var(--ink);border-color:var(--ink);box-shadow:2px 2px 0 var(--ink)}.library-quick-filter.active::after{border-radius:0;background:var(--pixel-orange);box-shadow:none}
.workspace-resizer{width:8px;min-width:8px;background:var(--ink)}.workspace-resizer::before{top:20px;bottom:20px;width:3px;border-radius:0;background:var(--pixel-orange)}.workspace-resizer:hover::before,.workspace-resizer:focus-visible::before,.main.is-resizing .workspace-resizer::before{width:5px;background:var(--pixel-yellow);box-shadow:none}.main.is-resizing .binder-stage,.main.is-resizing .library-panel{pointer-events:none}
.binder-stage{min-width:0;overflow:auto;padding:28px 18px 16px;background:transparent}.spread{max-width:512px;grid-template-columns:minmax(0,1fr) 12px minmax(0,1fr);filter:drop-shadow(6px 7px 0 rgba(20,33,61,.5));transition:transform .2s steps(4,end),filter .2s steps(4,end),max-width .24s ease}.spread:not(.turning):hover{transform:translateY(-6px) rotateX(1deg);filter:drop-shadow(9px 12px 0 rgba(20,33,61,.56))}
.binder-page{min-height:0;padding:13px;gap:7px;border:4px solid var(--ink);border-radius:0!important;background:linear-gradient(180deg,var(--binder),var(--binder-deep));box-shadow:none!important}.spine{min-height:0;border-radius:0;background:linear-gradient(90deg,#17275a,#4e7bd5,#17275a)}.page-caption{color:var(--ink);font:400 7px/1.4 var(--pixel);text-shadow:1px 1px 0 rgba(248,244,228,.7)}
.slot{border:2px solid var(--ink);border-radius:0;background:#0e1836;box-shadow:inset 0 2px 6px rgba(0,0,0,.5);transform-style:preserve-3d;transform-origin:center;transition:transform .12s steps(3,end),box-shadow .12s steps(3,end)}.slot.empty::before{color:#39466e;font:400 11px/1 var(--pixel)}.slot:not(.empty):hover{z-index:6;transform:perspective(640px) translateY(-5px) rotateY(var(--tilt-y,0deg)) rotateX(var(--tilt-x,0deg));box-shadow:5px 6px 0 rgba(7,14,35,.82)}
.library-card{overflow:hidden;background:var(--box);color:var(--ink);border:2px solid var(--ink);border-radius:0;box-shadow:3px 3px 0 var(--ink);transform-style:preserve-3d;transform-origin:center;transition:transform .12s steps(3,end),box-shadow .12s steps(3,end)}.library-card:hover{z-index:6;border-color:var(--ink);transform:perspective(640px) translateY(-5px) rotateY(var(--tilt-y,0deg)) rotateX(var(--tilt-x,0deg));box-shadow:7px 8px 0 var(--ink)}
.library-card::after,.slot:not(.empty)::before{content:"";position:absolute;z-index:3;inset:0;pointer-events:none;opacity:0;mix-blend-mode:color-dodge;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.58),transparent 38%),linear-gradient(105deg,transparent 28%,var(--holo-1) 40%,var(--holo-2) 50%,var(--holo-3) 60%,transparent 72%);background-size:180% 180%,260% 260%;background-position:center,var(--mx,50%) var(--my,50%);transition:opacity .15s steps(3,end)}.library-card:hover::after,.slot:not(.empty):hover::before{opacity:.55}.library-card img,.slot img{transition:filter .18s steps(4,end),transform .18s steps(4,end)}.library-card:hover img,.slot:not(.empty):hover img{filter:saturate(1.15) contrast(1.06);transform:scale(1.02)}
.slot.special-card:not(:hover){animation:rareWobble 4.5s steps(12,end) infinite}.slot.special-card::before{opacity:.3}.slot.special-card::after{border-radius:0}
.binder-cover{border:4px solid var(--ink);border-radius:2px 5px 5px 2px;box-shadow:-8px 8px 0 rgba(7,14,35,.9),-13px 13px 0 rgba(20,33,61,.4);transition:transform .15s steps(4,end),box-shadow .15s steps(4,end)}.binder-cover:hover{box-shadow:-11px 12px 0 rgba(7,14,35,.92),-17px 18px 0 rgba(20,33,61,.44)}.cover-pixel-mark{width:92px;height:92px;margin:auto}.cover-placeholder img{display:none}
.binder-nav-dock{margin-top:14px;padding:8px 10px;background:var(--box);border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);backdrop-filter:none}.binder-nav-dock .page-nav{background:transparent}.binder-nav-dock .round{box-shadow:2px 2px 0 var(--ink)}.page-nav span,.jump-nav{color:var(--ink);font:400 7px/1.5 var(--pixel)}
.modal,.card-tooltip,.card-context-menu{background:var(--box);color:var(--ink);border:4px solid var(--ink);border-radius:0;box-shadow:7px 7px 0 var(--ink);backdrop-filter:none}.field input,.field textarea,.field select,.image-drop,.binder-cover-drop{background:#fff;color:var(--ink);border:2px solid var(--ink);border-radius:0}.modal-close,.preview-close{border:2px solid var(--ink);border-radius:0;background:var(--box-2);color:var(--ink);box-shadow:3px 3px 0 var(--ink)}.modal-close:hover,.preview-close:hover{background:#f2b0a6;color:#751d24;border-color:var(--ink);box-shadow:2px 2px 0 var(--ink);transform:translate(1px,1px)}
.preview-backdrop{background:rgba(20,32,60,.58);backdrop-filter:none}.preview-topbar,.preview-controls{margin:14px;background:var(--box);color:var(--ink);border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink)}.preview-topbar{padding:12px 14px}.preview-controls{justify-self:center;padding:10px 12px}.preview-controls span{color:#5c6472}
#authGate{background:rgba(20,32,60,.28)!important;backdrop-filter:none}#authGate .auth-card{background:var(--box)!important;color:var(--ink)!important;border:4px solid var(--ink)!important;border-radius:0!important;box-shadow:7px 7px 0 var(--ink)!important}#authGate .brand .pixel-mark{width:48px;height:48px}#authGate input{background:#fff!important;color:var(--ink)!important;border:2px solid var(--ink)!important;border-radius:0!important}
&[data-scene="night"]{--box:#0a2031;--box-2:#0d2a3d;--ink:#7aa7b1;--text:#f7f1d8;--muted:#9eb7c2;--line:#436a78;background:#071a28;color:#eef6ed}
&[data-scene="night"] .route-intro,&[data-scene="night"] .sidebar,&[data-scene="night"] .topbar,&[data-scene="night"] .library-panel,&[data-scene="night"] .library-card,&[data-scene="night"] .binder-value-card,&[data-scene="night"] .binder-nav-dock,&[data-scene="night"] .ghost,&[data-scene="night"] .round,&[data-scene="night"] .modal,&[data-scene="night"] .card-tooltip,&[data-scene="night"] .card-context-menu,&[data-scene="night"] #authGate .auth-card{background:var(--box);color:#eef6ed;border-color:var(--ink)}
&[data-scene="night"] .route-intro,&[data-scene="night"] .app-shell{box-shadow:6px 6px 0 #020b13}&[data-scene="night"] .route-intro p,&[data-scene="night"] .brand span,&[data-scene="night"] .library-card-meta{color:#a9c2ca}&[data-scene="night"] .binder-item,&[data-scene="night"] .library-quick-filter{background:var(--box-2);color:#d8e5e7;border-color:var(--ink)}&[data-scene="night"] .binder-item.active,&[data-scene="night"] .library-quick-filter.active{background:#bf541a;color:#fff3ce;border-color:#f6c84b;box-shadow:4px 4px 0 #020b13}&[data-scene="night"] .search,&[data-scene="night"] .currency-select,&[data-scene="night"] .field input,&[data-scene="night"] .field textarea,&[data-scene="night"] .field select,&[data-scene="night"] #authGate input{background:#061725!important;color:#eef6ed!important;border-color:var(--ink)!important}&[data-scene="night"] .page-nav span,&[data-scene="night"] .jump-nav,&[data-scene="night"] .page-caption{color:#eef6ed;text-shadow:1px 1px 0 #020b13}
@media(max-width:1100px){.app-shell{width:calc(100% - 28px);grid-template-columns:220px minmax(0,1fr)}.main{--library-width:260px}.binder-page{padding:9px;gap:6px}.spread{grid-template-columns:1fr 10px 1fr}.top-actions{gap:4px}.top-actions button{padding-inline:8px}}
@media(max-width:850px){.route-intro{width:calc(100% - 20px);margin:16px auto 28px}.route-launch{width:calc(100% - 20px)}.app-shell{width:calc(100% - 20px);height:calc(100dvh - 20px);grid-template-columns:180px minmax(0,1fr);margin-bottom:10px}.main{display:grid;grid-template-columns:1fr;grid-template-rows:86px minmax(0,1fr)}.topbar{grid-column:1;grid-row:1}.binder-stage{grid-column:1;grid-row:2;padding:18px 12px}.workspace-resizer{display:none}.library-panel{display:none}.main:not(.library-collapsed) .library-panel,.workspace:not(.library-collapsed) .library-panel{display:flex;position:fixed;left:0;right:0;bottom:0;height:70dvh;z-index:40;border:4px solid var(--ink);border-bottom:0;box-shadow:0 -8px 0 var(--ink)}.sidebar{padding:12px 9px}.scene-theme-btn{min-width:42px;padding-inline:9px}.scene-theme-btn span:last-child{display:none}}
@media(max-width:560px){.route-intro{padding:14px}.route-intro h1{font-size:12px}.route-intro p{font-size:13px}.app-shell{grid-template-columns:150px minmax(0,1fr)}.brand span,.side-bottom .ghost{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}&::before,&::after,.slot.special-card{animation:none!important}.route-launch a,.primary,.ghost,.round,.library-card,.library-card img,.slot,.slot img,.spread,.binder-cover{transition:none!important}.library-card:hover,.slot:not(.empty):hover{transform:none}}

/* Roomier working layout and clearer button hierarchy. */
.route-intro,.route-launch,.app-shell{width:min(1500px,calc(100% - 48px))}.route-intro{width:min(860px,calc(100% - 48px));margin-left:max(24px,calc((100vw - 1500px)/2))}.route-intro h1{font-size:20px}.route-intro p{max-width:800px;font-size:16px}
.app-shell{height:820px;grid-template-columns:270px minmax(0,1fr)}.main{--library-width:340px;grid-template-rows:100px minmax(0,1fr)}.sidebar{padding:22px 18px 18px;gap:18px}.topbar{padding:0 24px;gap:20px}.topbar h1{font-size:18px}.brand strong{font-size:11px}.brand span{font-size:13px}.eyebrow{font-size:9px}.library-panel{padding:20px 18px 32px}.library-head h2{font-size:13px}.search{min-height:44px;font-size:14px}.card-library,.library-set-folder-grid{gap:16px!important}
.primary{min-height:44px;padding:12px 16px;white-space:nowrap;font-size:10px;box-shadow:3px 3px 0 var(--ink)}.primary:hover{background:#ffa347;transform:none;box-shadow:3px 3px 0 var(--ink)}.primary:active{transform:translate(3px,3px);box-shadow:none}
.ghost,.round,.danger-soft{min-height:40px;padding:10px 12px;white-space:nowrap;background:var(--box-2);border:2px solid var(--ink);box-shadow:none;font:400 9px/1.35 var(--pixel)}.ghost:hover,.round:hover:not(:disabled),.danger-soft:hover{background:#fffdf2;transform:none;box-shadow:none}.ghost:active,.round:active:not(:disabled),.danger-soft:active{transform:translate(1px,1px)}.round{width:40px;padding:0}.lock-btn{background:transparent;border-color:transparent;color:#5c6472}.lock-btn:hover{background:rgba(20,32,60,.08)}.scene-theme-btn{width:100%;justify-content:flex-start;background:var(--box-2)}.top-actions{align-items:center;gap:10px}.top-actions button{flex:0 0 auto}.topbar>div:first-child{min-width:220px}.topbar h1{white-space:nowrap}.library-quick-filter{min-height:36px;padding:8px;font-size:7px}
.binder-stage{padding:44px 28px 24px}.spread{max-width:720px;grid-template-columns:minmax(0,1fr) 14px minmax(0,1fr);filter:none}.spread:not(.turning):hover{transform:none;filter:none}.binder-page{padding:16px;gap:10px}.spine{background:var(--ink)}.page-caption{margin-bottom:12px;font-size:9px}.binder-nav-dock{margin-top:24px;padding:10px 14px}.page-nav span,.jump-nav{font-size:9px}.spread.cover-mode .page-wrap:first-child{width:min(560px,78vw)}.binder-cover,.binder-cover:hover{box-shadow:none}.cover-title{box-shadow:none}
&[data-scene="night"] .ghost,&[data-scene="night"] .round,&[data-scene="night"] .danger-soft{background:var(--box-2);color:#eef6ed;border-color:var(--ink)}&[data-scene="night"] .lock-btn{background:transparent;border-color:transparent;color:#a9c2ca}&[data-scene="night"] .ghost:hover,&[data-scene="night"] .round:hover:not(:disabled){background:#15364a}
@media(max-width:1250px){.app-shell{width:calc(100% - 28px);grid-template-columns:230px minmax(0,1fr)}.main{--library-width:300px}.binder-stage{padding:32px 20px 20px}.spread{max-width:620px}.topbar{padding:0 16px}.top-actions{gap:6px}}
@media(max-width:850px){.route-intro{width:calc(100% - 20px);margin-left:auto}.app-shell{width:calc(100% - 20px);height:calc(100dvh - 20px);grid-template-columns:180px minmax(0,1fr)}.main{grid-template-rows:86px minmax(0,1fr)}.binder-stage{padding:22px 14px}.spread{max-width:720px}.topbar h1{font-size:14px}}

/* ============================================================
   Polish pass: binder-first stage, calm flat background,
   readable buttons, rebuilt sidebar, holo/tilt removed.
   ============================================================ */

/* --- background: static and flat, like the reference mock --- */
&::before{inset:0;transform:none;animation:none;will-change:auto}
&::after{
  inset:0;
  background:linear-gradient(180deg,rgba(8,22,14,.12),transparent 20% 80%,rgba(8,22,14,.24));
  animation:none;opacity:1;
}
&[data-scene="night"]::after{
  background:linear-gradient(180deg,rgba(2,10,22,.34),transparent 22% 78%,rgba(2,10,22,.5));
}

/* --- the binder is the hero: more room, larger spread --- */
.app-shell{height:min(880px,calc(100dvh - 84px))}
.binder-stage{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  padding:44px 34px 30px;
}
.spread{max-width:940px;width:100%;filter:none}
.spread:not(.turning):hover{transform:none;filter:none}
.binder-page{padding:18px;gap:11px;box-shadow:6px 9px 0 rgba(20,33,61,.42)!important}
.spine{background:var(--ink)}
.page-caption{font-size:9px;margin-bottom:14px}
.spread.cover-mode .page-wrap:first-child{width:min(620px,80vw)}

/* --- cards: no holo sweep, no tilt, just a clean lift --- */
.library-card::after,
.slot:not(.empty)::before{content:none!important;display:none!important}
.slot,.library-card{
  transform:none!important;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.slot:not(.empty):hover{
  transform:translateY(-3px)!important;
  box-shadow:4px 7px 0 rgba(7,14,35,.68)!important;z-index:4;
}
.library-card:hover{
  transform:translateY(-3px)!important;
  box-shadow:5px 8px 0 var(--ink)!important;z-index:4;
}
.library-card:hover img,
.slot:not(.empty):hover img{filter:none!important;transform:none!important}
.slot.special-card,
.slot.special-card:not(:hover){animation:none!important}
.slot.special-card{box-shadow:0 0 0 2px var(--pixel-yellow), 3px 5px 0 rgba(7,14,35,.55)}

/* --- buttons: Nunito labels, one clear hierarchy, real focus rings --- */
.primary,.ghost,.round,.danger-soft,.lock-btn,.compact,
.route-launch a,.binder-nav-dock .round,.icon-mini,.library-sort-button{
  font-family:var(--sans);font-weight:900;letter-spacing:.01em;text-transform:none;
  border-radius:4px;
  transition:background .12s ease, box-shadow .1s ease, transform .06s ease;
}
.primary,.route-launch a{
  font-size:13px;min-height:44px;padding:0 18px;gap:9px;
  background:var(--pixel-orange);color:#2a1203;
  border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink);
}
.primary:hover,.route-launch a:hover{background:#ff8c34;box-shadow:3px 3px 0 var(--ink);transform:none}
.primary:active,.route-launch a:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.route-launch a{background:var(--pixel-yellow)}
.route-launch a:hover{background:#ffd633}

.ghost,.compact,.icon-mini,.library-sort-button{
  font-size:12.5px;min-height:40px;padding:0 14px;
  background:var(--box);color:var(--ink);
  border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink);
}
.ghost:hover,.compact:hover,.icon-mini:hover,.library-sort-button:hover{
  background:#fffdf3;box-shadow:2px 2px 0 var(--ink);transform:none;
}
.ghost:active,.compact:active,.icon-mini:active,.library-sort-button:active{
  transform:translate(1px,1px);box-shadow:0 0 0 var(--ink);
}
.round,.binder-nav-dock .round{
  width:40px;min-height:40px;padding:0;display:inline-grid;place-items:center;
  background:var(--box);color:var(--ink);border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink);
}
.round:hover:not(:disabled){background:#fffdf3}
.round:active:not(:disabled){transform:translate(1px,1px);box-shadow:0 0 0 var(--ink)}
.icon-mini{width:30px;height:30px;min-height:0;padding:0;display:inline-grid;place-items:center}
.library-sort-button{width:38px;height:38px;min-height:0;padding:0;display:inline-grid;place-items:center;font-size:16px}

.danger-soft{
  font-size:12.5px;min-height:40px;padding:0 14px;
  background:#f6d8cf;color:#8e2828;border:2px solid #8e2828;box-shadow:2px 2px 0 #8e2828;
}
.danger-soft:hover{background:#f1c6ba;box-shadow:2px 2px 0 #8e2828;transform:none}
.danger-soft:active{transform:translate(1px,1px);box-shadow:0 0 0 #8e2828}

.lock-btn{background:transparent;border:2px solid transparent;box-shadow:none;color:#5c6472;gap:7px}
.lock-btn:hover{background:rgba(20,32,60,.08);box-shadow:none;transform:none}
.lock-btn.is-locked{color:#8e2828}
.lock-btn .lock-icon{
  display:inline-block;width:15px;height:15px;font-size:0;flex:0 0 auto;background:currentColor;
  -webkit-mask:center/contain no-repeat var(--ico-lock-open);
  mask:center/contain no-repeat var(--ico-lock-open);
}
.lock-btn.is-locked .lock-icon{-webkit-mask-image:var(--ico-lock);mask-image:var(--ico-lock)}

&{
  --ico-lock-open:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 7.5-2'/%3E%3C/svg%3E");
  --ico-lock:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E");
}

:where(.primary,.ghost,.round,.danger-soft,.lock-btn,.compact,.icon-mini,
  .library-sort-button,.library-quick-filter,.binder-item,.slot,.library-card,.route-launch a):focus-visible{
  outline:3px solid var(--pixel-yellow);outline-offset:2px;
}
.btn-ico{width:16px;height:16px;flex:0 0 auto;display:block}
.primary .btn-ico{width:15px;height:15px}

/* --- sidebar rebuilt --- */
.sidebar{padding:20px 16px 16px;gap:15px;border-right:4px solid var(--ink)}
.brand{gap:11px;align-items:center;padding:0 2px 12px;border-bottom:2px solid var(--box-2)}
.brand-mark{width:36px;height:36px}
.brand strong{font-family:var(--sans);font-weight:900;font-size:15px;letter-spacing:-.01em;line-height:1.1}
.brand span{font-family:var(--sans);font-weight:700;font-size:11px;color:#8a8f9c;margin-top:3px}
.eyebrow{
  font-family:var(--sans);font-weight:900;font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:#9a927f;
}
#newBinderBtn.full{width:100%}
.binder-list{gap:6px;margin:2px 0}
.binder-item{
  display:flex;align-items:center;gap:9px;padding:10px 11px;
  border:2px solid var(--ink);border-radius:4px;background:var(--box-2);color:#4a5262;
  font-family:var(--sans);font-weight:800;font-size:13px;
  box-shadow:2px 2px 0 rgba(20,32,60,.26);
  transition:background .12s ease, box-shadow .1s ease;
}
.binder-item:hover{background:#efe8ce;color:var(--ink);transform:none}
.binder-item.active{background:var(--pixel-orange);color:#2a1203;border-color:var(--ink);box-shadow:3px 3px 0 var(--ink)}
.binder-item>span:last-child{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.binder-dot{width:8px;height:8px;border-radius:50%;background:#b7ab88;flex:0 0 auto;box-shadow:none}
.binder-item.active .binder-dot{background:#2a1203;box-shadow:none}

.binder-value-card{
  margin-top:auto;padding:14px;background:var(--box-2);
  border:2px solid var(--ink);border-radius:4px;box-shadow:3px 3px 0 var(--ink);
}
.value-head{margin-bottom:0}
.binder-total{
  font-family:var(--sans);font-weight:900;font-size:22px;letter-spacing:-.02em;
  color:#c04f1e;font-variant-numeric:tabular-nums;margin:8px 0;
}
.value-meta{font-family:var(--sans);font-weight:700;font-size:10px;color:#8a8f9c;line-height:1.5}
.currency-select{
  min-height:36px;font-family:var(--sans);font-weight:800;font-size:12px;
  background:#fff;border:2px solid var(--ink);border-radius:4px;
}

.side-bottom{gap:8px;padding-top:12px;margin-top:14px;border-top:2px solid var(--box-2)}
.side-bottom .ghost,.side-bottom .danger-soft{width:100%;justify-content:flex-start;gap:9px}
.scene-theme-btn span:first-child{color:var(--pixel-orange);font-size:15px;line-height:1}
.scene-theme-btn span:last-child{font:900 12px/1.3 var(--sans)}
.account-row{font-family:var(--sans);font-weight:700;font-size:11px;color:#8a8f9c;padding:2px 2px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* --- topbar + library headings: calm, readable --- */
.topbar{gap:18px;flex-wrap:wrap;row-gap:8px}
.topbar h1,.library-head h2{font-family:var(--sans);font-weight:900;letter-spacing:-.01em}
.topbar h1{font-size:19px}
.library-head h2{font-size:15px}
.top-actions{gap:9px;align-items:center;flex-wrap:wrap;row-gap:8px}
.page-nav span,.jump-nav,.jump-nav span{font-family:var(--sans)!important;font-weight:800;font-size:12px!important;color:var(--ink)}
.jump-nav input{font-family:var(--sans);font-weight:800;border-radius:4px}
.library-quick-filter{
  font-family:var(--sans)!important;font-weight:800;font-size:11px!important;
  min-height:34px;border-radius:4px;box-shadow:2px 2px 0 var(--ink);
}
.library-quick-filter.active{background:var(--pixel-yellow);color:#2a1203}
.pill{font-family:var(--sans);font-weight:900;font-size:11px;border-radius:4px}
.search{font-family:var(--sans);font-weight:700;min-height:42px;border-radius:4px}

/* --- route intro: quieter, consistent with the app --- */
.route-intro h1{font-family:var(--sans);font-weight:900;font-size:22px;letter-spacing:-.01em}
.route-intro h1 span{
  font-family:var(--pixel);font-size:11px;margin-left:8px;
  color:var(--pixel-orange);text-shadow:2px 2px 0 var(--pixel-orange-deep);
}
.route-intro p{font-size:14px}

@media(max-width:1250px){.spread{max-width:640px}.binder-stage{padding:34px 22px 22px}}
@media(max-width:850px){.spread{max-width:720px}.binder-stage{padding:22px 14px}.app-shell{height:calc(100dvh - 20px)}}
@media(prefers-reduced-motion:reduce){
  .slot,.library-card,.primary,.ghost,.round,.danger-soft{transition:none!important}
}

/* ============================================================
   Polish pass 2: full-viewport responsive shell (no page
   scroll), library folders in the dialog-box style, binder
   fits the frame. Day scene is the default (see app.js).
   ============================================================ */

&{height:100%;min-height:0}
&{display:flow-root;overflow:hidden;margin:0;padding:0}

/* --- app fills the screen at every resolution --- */
.app-shell{
  position:relative;z-index:1;
  width:100%;height:100dvh;max-width:none;margin:0;
  border:0;box-shadow:none;
  grid-template-columns:clamp(216px,19vw,280px) minmax(0,1fr);
}
@media(min-width:1200px){
  .app-shell{
    width:min(1760px,calc(100% - 24px));height:calc(100dvh - 24px);
    margin:12px auto;
  }
}
/* no border/box-shadow "sticker frame" around the whole app — it read as
   an unfinished leftover edge once the sidebar/library panel collapse. */
.app-shell{border:0!important;box-shadow:none!important}

.main{
  --library-width:clamp(258px,24vw,360px);
  grid-template-rows:auto minmax(0,1fr);
  grid-template-columns:minmax(0,1fr) 8px var(--library-width);
}
.topbar{min-height:60px;height:auto;padding:10px clamp(14px,1.6vw,24px)}
.topbar h1{font-size:clamp(15px,1.5vw,20px)}
.sidebar{padding:clamp(14px,2vh,22px) clamp(12px,1vw,18px)}

/* --- binder stage: centred, binder scaled to fit the height --- */
.binder-stage{
  overflow:auto;
  padding:clamp(14px,3vh,44px) clamp(14px,2vw,34px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(8px,1.5vh,20px);
}
.spread{
  width:100%;margin:0 auto;
  max-width:min(980px, calc((100dvh - 240px) * 1.5));
}
.binder-page{
  min-height:min(52vh,520px);
  grid-template-columns:repeat(3,1fr);
}
.page-caption{margin-bottom:clamp(6px,1vh,12px)}
.binder-nav-dock{margin-top:0}

/* --- the binder itself sits in the frame: deeper blue, grounded --- */
&{--binder:#284f9e;--binder-deep:#15234c}
.binder-page{
  background:linear-gradient(180deg,var(--binder),var(--binder-deep));
  border:4px solid var(--ink);
  box-shadow:0 10px 0 rgba(20,33,61,.28), 6px 12px 0 rgba(20,33,61,.34)!important;
}
.spine{background:var(--ink)}
.slot{background:#0c1730;border:2px solid var(--ink)}
.slot.empty:before{color:#3c4c78}

/* --- library folders + cards: dialog-box style, not the old dark glass --- */
.library-panel{scrollbar-color:#b7ab88 var(--box-2)}
.library-set-folder,.library-era-group{
  background:var(--box)!important;
  border:2px solid var(--ink)!important;border-radius:4px!important;
  box-shadow:2px 2px 0 var(--ink)!important;backdrop-filter:none!important;
}
.library-set-folder.open,.library-era-group.open{border-color:var(--ink)!important}
.library-set-folder-head,.library-era-head{background:transparent;color:var(--ink)}
.library-set-folder-head:hover,.library-era-head:hover{background:rgba(20,32,60,.06)}
.library-set-name,.library-era-name,.library-era-text{
  font-family:var(--sans)!important;font-weight:900!important;
  color:var(--ink)!important;text-shadow:none!important;letter-spacing:-.01em!important;
}
.library-set-title-wrap.is-text-only .library-set-name{color:var(--ink)!important;text-shadow:none!important}
.library-set-folder-head:hover .library-set-name,
.library-set-folder.open .library-set-name{color:var(--ink)!important;text-shadow:none!important}
/* Release date: the base grey (#94a3b8 @ .8) vanished on the cream box. */
.library-set-release-date,.library-set-folder-head:hover .library-set-release-date{color:#5f5747!important;opacity:1!important}
.library-set-code-lg{color:var(--pixel-orange-deep)!important}
.library-set-count-sm,.library-set-folder-caret,.library-era-head{color:#7a7160!important}
.library-set-folder-grid{border-top:2px solid var(--box-2)!important}
.library-era-name{font-size:13px!important}
.library-era-tag{
  background:var(--box-2)!important;color:#5c6472!important;
  border:2px solid var(--ink)!important;border-radius:3px!important;
  font-family:var(--sans)!important;font-weight:900!important;
}
.library-set-logo-img{filter:none!important}

.library-card{
  background:var(--box)!important;color:var(--ink)!important;
  border:2px solid var(--ink)!important;border-radius:4px!important;
  box-shadow:2px 2px 0 var(--ink)!important;
}
.library-card-info,.library-card-name,.library-card-meta{color:var(--ink)}
.library-card-name{font-family:var(--sans);font-weight:900}
.library-card-meta{color:#7a7160!important;font-weight:700}
.owned-dot{border-color:var(--box)}

/* --- card hover tooltip: was styled for a dark card, unreadable once
   .card-tooltip's background became cream --box in day mode --- */
.tooltip-title-library{color:var(--ink)!important;-webkit-text-fill-color:var(--ink)!important}
.tooltip-row span,.tooltip-notes span{color:#7a7160!important}
.tooltip-row strong:not(.rarity-badge-inline){color:var(--ink)!important}
/* The per-card title colour (often near-white) vanished on the cream box: ink title, colour kept as an underline. */
.tooltip-title{background:none!important;color:var(--ink)!important;-webkit-text-fill-color:var(--ink)!important;text-shadow:none!important;text-decoration:underline 3px var(--card-title-color,transparent);text-underline-offset:5px}
.tooltip-notes{color:#4a4234!important;border-top-color:var(--box-2)!important}

/* --- night scene: real contrast, no muddy teal borders --- */
&[data-scene="night"]{--ink:#16324a;--box:#0b2233;--box-2:#0f2c40}
&[data-scene="night"] .library-set-folder,
&[data-scene="night"] .library-era-group,
&[data-scene="night"] .library-card{
  background:var(--box)!important;border-color:#25506d!important;box-shadow:2px 2px 0 #041521!important;
}
&[data-scene="night"] .library-set-name,
&[data-scene="night"] .library-era-name,
&[data-scene="night"] .library-card-name,
&[data-scene="night"] .library-card-info{color:#eef6ed!important}
&[data-scene="night"] .library-set-count-sm,
&[data-scene="night"] .library-card-meta{color:#9db4c0!important}
&[data-scene="night"] .binder-page{border-color:#25506d}
&[data-scene="night"] .slot{border-color:#25506d}
&[data-scene="night"] .tooltip-row span,
&[data-scene="night"] .tooltip-notes span{color:#9db4c0!important}
&[data-scene="night"] .tooltip-notes{color:#cfe0e6!important}

/* --- collapse cleanly on small screens --- */
@media(max-width:960px){
  .app-shell{grid-template-columns:196px minmax(0,1fr)}
  .main{grid-template-columns:1fr}
  .workspace-resizer,.library-panel{display:none}
  .spread{max-width:min(700px,94vw)}
}
@media(max-width:600px){
  .app-shell{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}
  .sidebar{
    grid-column:1;grid-row:1;
    flex-direction:row;flex-wrap:nowrap;align-items:center;gap:8px;
    padding:8px 10px;border-right:0;border-bottom:4px solid var(--ink);
    overflow-x:auto;
  }
  .sidebar .brand{border:0;padding:0;flex:0 0 auto}
  .sidebar .brand span,.sidebar .eyebrow,.sidebar .binder-value-card,.sidebar .side-bottom{display:none}
  .sidebar #newBinderBtn{flex:0 0 auto;width:auto;min-height:38px;padding:0 12px}
  .binder-list{flex-direction:row;gap:6px;margin:0;flex:1 1 auto;overflow-x:auto}
  .binder-item{flex:0 0 auto}
  .main{grid-column:1;grid-row:2}
  .topbar{flex-wrap:wrap;gap:8px}
  .binder-stage{padding:14px 10px}
}

/* Polish pass 2b — nav dock, binder frame, selects to the dialog-box style. */
.binder-nav-dock{
  background:var(--box)!important;border:3px solid var(--ink)!important;
  box-shadow:4px 4px 0 var(--ink)!important;backdrop-filter:none!important;color:var(--ink);
}
.binder-nav-dock .page-nav{background:transparent!important}
.binder-nav-dock .page-nav span,.binder-nav-dock .jump-nav,
.binder-nav-dock .jump-nav span,.binder-nav-dock #pageLabel{color:var(--ink)!important}
.binder-nav-dock .jump-nav input,#jumpPage{
  background:#fff!important;color:var(--ink)!important;border:2px solid var(--ink)!important;border-radius:4px!important;
}
.binder-nav-dock .dock-divider{background:var(--box-2)!important}

/* pixel frame on the binder page, whatever material colour it is */
.spread .binder-page:not(.cover-page){
  border:4px solid var(--ink)!important;
  box-shadow:0 10px 0 rgba(20,33,61,.22), 6px 13px 0 rgba(20,33,61,.3)!important;
}
.spread .slot{border:2px solid var(--ink)!important}

/* app-drawn select menus (currency, sort, etc.) in the cream style */
.custom-select-trigger{
  background:#fff!important;color:var(--ink)!important;
  border:2px solid var(--ink)!important;border-radius:4px!important;box-shadow:none!important;
  font-family:var(--sans)!important;font-weight:800!important;
}
.custom-select-trigger b{color:#5c6472!important}
.custom-select.open .custom-select-trigger,.custom-select-trigger:focus-visible{
  border-color:var(--ink)!important;box-shadow:0 0 0 3px var(--pixel-yellow)!important;
}
.custom-select-menu,.library-sort-menu,.set-suggestions,.new-collection-menu,
.library-filter-menu,.filter-set-options{
  background:var(--box)!important;border:2px solid var(--ink)!important;border-radius:4px!important;
  box-shadow:4px 4px 0 var(--ink)!important;backdrop-filter:none!important;color:var(--ink)!important;
}
.custom-select-option,.library-sort-menu button,.set-suggestion{color:var(--ink)!important}
.custom-select-option:hover,.custom-select-option.selected,
.library-sort-menu button:hover,.set-suggestion:hover{background:var(--box-2)!important;color:var(--ink)!important}
.custom-select-option.selected:after,.library-sort-menu button.active{color:var(--pixel-orange-deep)!important}

/* value-card outline visible on cream */
.binder-value-card{border:2px solid var(--ink)!important;box-shadow:3px 3px 0 var(--ink)!important}

/* Polish pass 2c — night contrast, closed-binder fit, tighter era list, icon alignment. */

/* --- night mode: readable text, visible borders --- */
&[data-scene="night"]{--box:#0d2537;--box-2:#12324a;--ink:#43708c;--muted:#9db4c0}
&[data-scene="night"] h1,
&[data-scene="night"] h2,
&[data-scene="night"] h3,
&[data-scene="night"] .brand strong,
&[data-scene="night"] .topbar h1,
&[data-scene="night"] .library-head h2,
&[data-scene="night"] .library-set-name,
&[data-scene="night"] .library-set-title-wrap.is-text-only .library-set-name,
&[data-scene="night"] .library-era-name,
&[data-scene="night"] .library-era-text,
&[data-scene="night"] .library-card-name,
&[data-scene="night"] .library-card-info,
&[data-scene="night"] .pager,
&[data-scene="night"] .binder-nav-dock,
&[data-scene="night"] .binder-nav-dock #pageLabel,
&[data-scene="night"] .binder-nav-dock .page-nav span,
&[data-scene="night"] .binder-nav-dock .jump-nav,
&[data-scene="night"] .jump-nav span,
&[data-scene="night"] .custom-select-trigger,
&[data-scene="night"] .custom-select-option,
&[data-scene="night"] .library-sort-menu button,
&[data-scene="night"] .binder-item{color:#eef4f6!important;text-shadow:none!important}
&[data-scene="night"] .eyebrow,
&[data-scene="night"] .library-set-count-sm,
&[data-scene="night"] .library-card-meta,
&[data-scene="night"] .value-meta,
&[data-scene="night"] .account-row,
&[data-scene="night"] .library-set-folder-caret{color:#93aab6!important}
/* :where() gives this block zero specificity, so the open/hover rules above (dark-teal --ink) beat the plain night rule. */
&[data-scene="night"] .library-set-folder-head:hover .library-set-name,
&[data-scene="night"] .library-set-folder.open .library-set-name{color:#eef4f6!important}
&[data-scene="night"] .library-set-release-date,
&[data-scene="night"] .library-set-folder-head:hover .library-set-release-date{color:#b8cbd5!important}
&[data-scene="night"] .search,
&[data-scene="night"] .custom-select-trigger,
&[data-scene="night"] .jump-nav input,
&[data-scene="night"] #jumpPage,
&[data-scene="night"] .field input,
&[data-scene="night"] .field textarea,
&[data-scene="night"] .field select{background:#081f2e!important;color:#eef4f6!important;border-color:var(--ink)!important}
&[data-scene="night"] .search::placeholder{color:#7c95a2}
&[data-scene="night"] .library-set-code-lg{color:#ffb066!important}
&[data-scene="night"] .binder-item.active{color:#2a1203!important}
&[data-scene="night"] .library-era-tag{background:#0f2c42!important;color:#bcd0d8!important}

/* --- closed binder / cover: sized to the viewport, never scrolls --- */
.binder-stage:has(.spread.cover-mode){justify-content:center;overflow:hidden}
.spread.cover-mode{min-height:0!important;align-items:center;justify-content:center}
.spread.cover-mode .page-wrap:first-child{
  width:auto!important;
  height:min(74vh, calc(100dvh - 220px))!important;
}
.spread.cover-mode .binder-cover{height:100%;width:auto;aspect-ratio:7/10;max-width:88vw}
.spread.cover-mode .binder-page.cover-page{height:100%}

/* --- library: tighter, calmer spacing between eras and sets --- */
.card-library{gap:8px!important}
.library-era-group{margin:0 0 6px!important}
.library-set-folder{margin:0!important}
.library-set-folder-grid,
.library-set-folder.open .library-set-folder-grid{gap:8px!important;padding-top:8px!important}
.library-set-folder-head,.library-era-head{min-height:0!important;padding:9px 11px!important}
.library-era-group.open .library-era-head{border-bottom:2px solid var(--box-2)}
.card-library>.library-card{align-self:start}

/* --- icons centred everywhere --- */
.primary,.ghost,.round,.danger-soft,.lock-btn,.compact,
.icon-mini,.library-sort-button,.scene-theme-btn,.route-launch a{
  display:inline-flex;align-items:center;justify-content:center;line-height:1;
}
.side-bottom .ghost,.side-bottom .danger-soft,.scene-theme-btn{justify-content:flex-start}
.btn-ico,.lock-btn .lock-icon{flex:0 0 auto}
.icon-mini svg,.round svg,.library-sort-button svg,.btn-ico{display:block}
.scene-theme-btn span{display:inline-flex;align-items:center;line-height:1}
.brand{align-items:center}
.brand>div{display:flex;flex-direction:column;justify-content:center}
.eyebrow{display:block;margin-bottom:2px}
.library-set-logo-frame{align-items:center;justify-content:center}
.library-set-logo-img{margin:auto;display:block}

/* Polish pass 2d — small tidies. */
.library-era-name{font-size:12px!important}
.library-era-head{grid-template-columns:minmax(0,1fr) auto 18px!important;gap:8px!important}
.library-era-title{min-width:0}
.library-set-name{font-size:12px!important;line-height:1.25!important}
/* cover title plate matches the dialog-box style */
.cover-title{
  background:var(--box)!important;border:3px solid var(--ink)!important;border-radius:4px!important;
  box-shadow:3px 3px 0 var(--ink)!important;backdrop-filter:none!important;
}
.cover-title span{color:var(--pixel-orange-deep)!important;font-weight:900}
.cover-title strong{color:var(--ink)!important;font-family:var(--sans);font-weight:900}
&[data-scene="night"] .cover-title strong{color:#eef4f6!important}

/* Pixel-art open binder: one frame, live grids for every 2x2–5x5 size. */
.spread:not(.cover-mode){
  --binder-accent:var(--page-a,#252a31);--binder-accent-deep:var(--page-b,#11151a);
  --binder-frame:url('/assets/open-binder-frame-midnight.png');
  isolation:isolate;position:relative;width:100%;max-width:min(1120px,calc((100dvh - 150px) * 1.777));
  aspect-ratio:1672/941;padding:6.45% 6.7%;grid-template-columns:minmax(0,1fr) 13% minmax(0,1fr);
  align-items:stretch;filter:none!important;background:none;
}
.spread:not(.cover-mode)::before{content:"";position:absolute;z-index:-1;inset:4.5% 3.4%;border-radius:5%;background:linear-gradient(180deg,var(--binder-accent),var(--binder-accent-deep))}
.spread:not(.cover-mode)::after{content:"";position:absolute;z-index:5;inset:0;pointer-events:none;background:var(--binder-frame) center/100% 100% no-repeat;image-rendering:pixelated}
.spread:not(.cover-mode) .page-wrap{position:relative;z-index:1;display:flex;min-width:0;min-height:0;align-items:center}
.spread:not(.cover-mode) .page-wrap::before{content:"";position:absolute;inset:0;background:color-mix(in srgb,var(--binder-accent) 12%,#eee8dc);box-shadow:none}
.spread:not(.cover-mode) .page-caption{display:none}
.spread:not(.cover-mode) .binder-page{position:relative;z-index:1;width:79%;height:100%;min-height:0;margin:auto;padding:0;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;grid-template-rows:repeat(var(--binder-rows),minmax(0,1fr));gap:10px}
.spread:not(.cover-mode) .spine{z-index:1;min-height:0;background:transparent}
.spread:not(.cover-mode) .slot{min-width:0;min-height:0;aspect-ratio:auto;border:0!important;background:transparent!important;box-shadow:none!important}.spread:not(.cover-mode) .slot:not(.empty):hover{box-shadow:none!important}.spread:not(.cover-mode) .slot.empty::before{color:color-mix(in srgb,var(--binder-accent) 65%,#14203c)}
.spread[data-binder-color="black"]{--binder-frame:url('/assets/open-binder-frame-midnight.png')}.spread[data-binder-color="white"]{--binder-frame:url('/assets/open-binder-frame-white.png');--binder-accent:#d8dde0;--binder-accent-deep:#9ca7ad}.spread[data-binder-color="navy"]{--binder-frame:url('/assets/open-binder-frame-navy.png')}.spread[data-binder-color="burgundy"]{--binder-frame:url('/assets/open-binder-frame-burgundy.png')}.spread[data-binder-color="forest"]{--binder-frame:url('/assets/open-binder-frame-forest.png')}.spread[data-binder-color="royal"]{--binder-frame:url('/assets/open-binder-frame-royal.png')}.spread[data-binder-color="purple"]{--binder-frame:url('/assets/open-binder-frame-purple.png')}.spread[data-binder-color="tan"]{--binder-frame:url('/assets/open-binder-frame-tan.png')}.spread[data-binder-color="orange"]{--binder-frame:url('/assets/open-binder-frame-orange.png');--binder-accent:#e47b27;--binder-accent-deep:#7e3514}
.spread[data-binder-size="2"] .binder-page{gap:16px}
.spread[data-binder-size="3"] .binder-page{gap:10px}.spread[data-binder-size="4"] .binder-page{gap:7px}.spread[data-binder-size="5"] .binder-page{gap:5px}
/* night: no grey page fill; the frame art stays cream, so the page matches it */
@media(max-width:960px){.spread:not(.cover-mode){max-width:min(900px,96vw)}}

/* Polish pass 2e — bigger open binder, no backdrop halo. */
.spread:not(.cover-mode){
  max-width:min(1520px, calc((100dvh - 140px) * 1.777))!important;
  padding:5.2% 5.4%!important;
  grid-template-columns:minmax(0,1fr) 10% minmax(0,1fr)!important;
}
/* flat backdrop tucked inside the frame — the dark gradient edge was reading as a shadow */
.spread:not(.cover-mode)::before{
  inset:6.5% 5%!important;
  background:var(--binder-accent)!important;
}
/* pockets fill the page area inside the frame */
.spread:not(.cover-mode) .binder-page{width:91%!important;gap:8px!important}
.spread[data-binder-size="2"] .binder-page{gap:12px!important}
.spread[data-binder-size="3"] .binder-page{gap:8px!important}
.spread[data-binder-size="4"] .binder-page{gap:6px!important}
.spread[data-binder-size="5"] .binder-page{gap:4px!important}
/* give the stage's whole height to the binder */
.binder-stage{padding:clamp(10px,2vh,24px) clamp(12px,1.4vw,22px)!important;gap:clamp(6px,1vh,12px)!important;justify-content:center}
.binder-nav-dock{margin-top:0!important}

/* ============================================================
   Polish pass 2f — open binder: cards always fit the frame's
   page area, nothing overflows, one knob to scale it all.
   CALIBRATE the --frame-* vars to each open-binder-frame PNG.
   ============================================================ */
.spread:not(.cover-mode){
  /* frame image proportions + where the two page rectangles sit inside it */
  --frame-ar: 2400 / 1655;  /* set to the PNG's width/height */
  --frame-pad-x: 2.5%;      /* spread edge -> page area, left & right */
  --frame-pad-y: 2.9%;      /* spread edge -> page area, top & bottom  */
  --frame-spine: 7.2%;      /* centre gutter width                     */
  --page-inset: 3.6%;       /* drawn page rectangle -> first pocket    */
  --binder-max: 2400px;     /* overall size cap — raise for a bigger binder */

  aspect-ratio: var(--frame-ar)!important;
  max-width: min(var(--binder-max), calc((100dvh - 148px) * 1.45))!important;
  padding: var(--frame-pad-y) var(--frame-pad-x)!important;
  grid-template-columns: minmax(0,1fr) var(--frame-spine) minmax(0,1fr)!important;
  align-items: stretch!important;
}
.spread:not(.cover-mode)::before{inset: var(--frame-pad-y) var(--frame-pad-x)!important;background: var(--binder-accent)!important;border-radius: 3%}
.spread:not(.cover-mode) .page-wrap{
  position: relative; min-width: 0; min-height: 0;
  display: block!important; overflow: hidden;   /* nothing spills past the frame */
}
.spread:not(.cover-mode) .page-wrap::before{inset: 0!important}
.spread:not(.cover-mode) .binder-page{
  position: absolute!important; inset: var(--page-inset)!important;
  width: auto!important; height: auto!important; margin: 0!important; padding: 0!important;
  display: grid!important;
  grid-template-columns: repeat(var(--binder-cols,3), 1fr)!important;
  grid-template-rows: repeat(var(--binder-rows,3), 1fr)!important;
  gap: clamp(4px, 1.1%, 10px)!important;
  background: transparent!important; border: 0!important; box-shadow: none!important;
}
.spread:not(.cover-mode)[data-binder-size="2"] .binder-page{gap: clamp(8px, 1.8%, 16px)!important}
.spread:not(.cover-mode)[data-binder-size="3"] .binder-page{gap: clamp(5px, 1.1%, 10px)!important}
.spread:not(.cover-mode)[data-binder-size="4"] .binder-page{gap: clamp(3px, 0.8%, 7px)!important}
.spread:not(.cover-mode)[data-binder-size="5"] .binder-page{gap: clamp(2px, 0.5%, 5px)!important}
.spread:not(.cover-mode) .slot{
  position: relative; aspect-ratio: auto!important;
  min-width: 0!important; min-height: 0!important; overflow: hidden;
  border: 0!important; background: transparent!important; box-shadow: none!important;
}
.spread:not(.cover-mode) .slot img{
  width: 100%!important; height: 100%!important;
  object-fit: contain!important;   /* whole card always visible, never stretched or cropped */
  display: block;
}
.spread:not(.cover-mode) .slot.empty::before{
  font: 400 clamp(9px,1.6vw,15px)/1 var(--pixel);
  color: color-mix(in srgb, var(--binder-accent) 60%, #14203c);
}
/* stage gives its whole height to the binder */
.binder-stage{padding: clamp(6px,1vh,12px) clamp(8px,.7vw,12px)!important; gap: clamp(6px,1vh,12px)!important; justify-content: center}
.binder-nav-dock{margin-top: 0!important}
@media(max-width:960px){.spread:not(.cover-mode){--binder-max: 96vw}}

}

/* Picked-up card (see beginCardDrag): a real card that follows the pointer,
   while the pocket it left shows empty instead of a faded shell. */
.drag-lift{position:fixed;left:0;top:0;z-index:9999;pointer-events:none;border-radius:6px;overflow:hidden;background:#1c2130;box-shadow:0 12px 22px rgba(6,12,28,.5);will-change:transform;backface-visibility:hidden}
.drag-lift img{width:100%;height:100%;display:block;object-fit:cover}
.slot.drag-source{opacity:1!important;animation:none!important;transform:none!important;filter:none!important;outline:0!important}
.slot.drag-source img{visibility:hidden}
#prevBtn.drag-over,#nextBtn.drag-over{outline:3px solid var(--accent);outline-offset:3px}
body.pixel-theme .drag-lift{border-radius:4px;border:3px solid #14203c;box-shadow:7px 8px 0 rgba(20,32,60,.55)}
/* Pointer drag: no native image drag or text selection; touch drags pockets instead of scrolling. */
.slot img,.library-card img{-webkit-user-drag:none;user-select:none}
.slot:not(.empty),.library-card{cursor:grab}
.slot:not(.empty){touch-action:none}
body.card-drag-active{cursor:grabbing;user-select:none}body.card-drag-active .slot,body.card-drag-active .library-card{cursor:grabbing}

/* ======== Pixel: same calm layout as classic, pixel skin kept ========
   Shelf of spines instead of the wide sidebar, value beside the title,
   icon-only header actions, library as a flat list. On phones the shelf
   becomes a slide-in drawer (mobile.css). */
@media all{
  body.pixel-theme .app-shell:not(.sidebar-collapsed){grid-template-columns:84px minmax(0,1fr)}
  body.pixel-theme .sidebar{padding:16px 0 14px;gap:14px;align-items:center}
  body.pixel-theme .brand{justify-content:center;border:0;padding:0}
  body.pixel-theme .brand .brand-text,
  body.pixel-theme .binder-value-card,
  body.pixel-theme .account-row,
  body.pixel-theme #sidebarToggleBtn{display:none!important}
  body.pixel-theme #newBinderBtn,body.pixel-theme #exportBinderBtn,body.pixel-theme #signOutBtn,body.pixel-theme #sceneThemeBtn{
    width:46px;height:46px;min-width:0;min-height:0;padding:0;font-size:0;flex:none;justify-content:center;gap:0}
  body.pixel-theme #sceneThemeLabel{display:none}
  body.pixel-theme .side-bottom{display:flex;flex-direction:column;align-items:center;gap:8px;border:0;margin-top:0;padding-top:0}

  /* Binders as spines: matching pixel art, name reading bottom-to-top. */
  body.pixel-theme .binder-list{flex:1;min-height:0;width:100%;display:flex;flex-direction:column;align-items:center;gap:10px;overflow-y:auto;padding:4px 0 8px;margin:0;scrollbar-width:none}
  body.pixel-theme .binder-item{
    --spine:#3a4150;--ink-on:#fff;
    position:relative;flex:none;width:44px;height:132px;padding:12px 0;
    writing-mode:vertical-rl;transform:rotate(180deg);
    display:flex;align-items:center;justify-content:center;
    background:var(--spine-img) center/100% 100% no-repeat,var(--spine);image-rendering:pixelated;
    color:var(--ink-on);border:0;border-radius:0;
    box-shadow:-3px -3px 0 rgba(20,32,60,.35);transition:transform .12s steps(2,end)}
  body.pixel-theme .binder-item .binder-dot{display:none}
  body.pixel-theme .binder-item>span:last-child{flex:none;max-height:80px;font:900 10px/1 var(--sans);letter-spacing:0;text-shadow:1px 1px 0 rgba(0,0,0,.35)}
  body.pixel-theme .binder-item:hover{color:var(--ink-on);transform:rotate(180deg) translateX(-3px)}
  body.pixel-theme .binder-item.active{color:var(--ink-on);outline:2px solid var(--pixel-orange);transform:rotate(180deg) translateX(-7px);box-shadow:-4px -4px 0 var(--ink)}
  body.pixel-theme .binder-item[data-color="black"]{--spine-img:url('/assets/binder-spine-midnight.png')}
  body.pixel-theme .binder-item[data-color="navy"]{--spine:#24527a;--spine-img:url('/assets/binder-spine-navy.png')}
  body.pixel-theme .binder-item[data-color="burgundy"]{--spine:#6b2b38;--spine-img:url('/assets/binder-spine-burgundy.png')}
  body.pixel-theme .binder-item[data-color="forest"]{--spine:#306444;--spine-img:url('/assets/binder-spine-forest.png')}
  body.pixel-theme .binder-item[data-color="royal"]{--spine:#3975c5;--spine-img:url('/assets/binder-spine-royal.png')}
  body.pixel-theme .binder-item[data-color="purple"]{--spine:#704c8b;--spine-img:url('/assets/binder-spine-purple.png')}
  body.pixel-theme .binder-item:is([data-color="white"],[data-color="tan"],[data-color="orange"]){--ink-on:#1d1a14}
  body.pixel-theme .binder-item[data-color="white"]{--spine:#ece6d2;--spine-img:url('/assets/binder-spine-white.png')}
  body.pixel-theme .binder-item[data-color="tan"]{--spine:#c49a68;--spine-img:url('/assets/binder-spine-tan.png')}
  body.pixel-theme .binder-item[data-color="orange"]{--spine:#ff8a2a;--spine-img:url('/assets/binder-spine-orange.png')}
  body.pixel-theme .binder-item:is([data-color="white"],[data-color="tan"],[data-color="orange"])>span:last-child{text-shadow:none}
  body.pixel-theme[data-scene="night"] .binder-item,body.pixel-theme[data-scene="night"] .binder-item.active{background:var(--spine-img) center/100% 100% no-repeat,var(--spine);color:var(--ink-on)!important}
}

/* Card menu (click a card): classic's light-on-dark colours were unreadable on the cream box. */
body.pixel-theme .card-context-menu{border:4px solid var(--ink);border-radius:0;box-shadow:7px 7px 0 var(--ink)}
body.pixel-theme .card-context-title{color:var(--ink);font-size:13px;font-weight:900;border-bottom:2px solid var(--box-2)}
body.pixel-theme .card-context-action{color:var(--ink);border-radius:0}
body.pixel-theme .card-context-action strong{font-size:12px;font-weight:900;white-space:nowrap}
body.pixel-theme .card-context-action span{color:#6b6352;font-weight:700}
body.pixel-theme .card-context-action:hover{background:var(--box-2)}
body.pixel-theme .card-context-action.accent strong{color:#c04f1e}
body.pixel-theme .card-context-action.danger{border-top:2px solid var(--box-2)}
body.pixel-theme .card-context-action.danger strong{color:#b3261e}
body.pixel-theme .card-context-action.danger:hover{background:#f6d6d2;color:#b3261e}
body.pixel-theme[data-scene="night"] :is(.card-context-title,.card-context-action){color:#eef6ed}
body.pixel-theme[data-scene="night"] .card-context-action span{color:#9db4c0}
body.pixel-theme[data-scene="night"] .card-context-action.accent strong{color:#ff9a4a}
body.pixel-theme[data-scene="night"] .card-context-action.danger strong{color:#ff858d}
body.pixel-theme[data-scene="night"] .card-context-action:hover{background:rgba(255,255,255,.08)}

/* Night: --ink is a mid blue there, too dim on the dark tooltip. */
body.pixel-theme[data-scene="night"] .tooltip-title,
body.pixel-theme[data-scene="night"] .tooltip-row strong:not(.rarity-badge-inline){color:#eef6ed!important;-webkit-text-fill-color:#eef6ed!important}

/* Header: title + value on one line, quiet icon actions, Add card stays loud. */
body.pixel-theme .topbar{padding-block:6px}
body.pixel-theme .topbar .eyebrow{display:none}
body.pixel-theme .topbar-left>div{display:flex;align-items:baseline;gap:14px;min-width:0}
body.pixel-theme .header-total{display:inline;padding:0;border:0;background:none;cursor:pointer;white-space:nowrap;
  font:900 18px/1 var(--sans);color:#c04f1e;font-variant-numeric:tabular-nums}
body.pixel-theme .header-total:hover{text-decoration:underline 2px;text-underline-offset:4px}
body.pixel-theme #editBinderBtn,body.pixel-theme #libraryToggleBtn,body.pixel-theme .lock-btn{width:40px;height:40px;min-width:0;padding:0;justify-content:center}
body.pixel-theme #editBinderBtn .btn-label,body.pixel-theme .library-toggle-label,body.pixel-theme .lock-label{display:none}

/* Library: heading says what it is; filters as tabs; sets as a flat list. */
body.pixel-theme .library-head .eyebrow{display:none}
body.pixel-theme .library-head .pill{background:none;border:0;box-shadow:none;padding:0;font:800 12px var(--sans);color:#8a8f9c}
body.pixel-theme .library-quick-filters{gap:16px!important;border-bottom:2px solid color-mix(in srgb,var(--ink) 35%,transparent)}
body.pixel-theme .library-quick-filter{background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;
  padding:8px 0!important;flex:none!important;border-bottom:3px solid transparent!important;margin-bottom:-2px;color:#8a8f9c!important}
body.pixel-theme .library-quick-filter.active{color:var(--ink)!important;border-bottom-color:var(--pixel-orange)!important}
body.pixel-theme .library-quick-filter::before,body.pixel-theme .library-quick-filter::after{display:none!important}
body.pixel-theme .library-era-group{border:0!important;background:none!important;box-shadow:none!important;margin:0 0 4px!important;padding:0!important}
body.pixel-theme .library-era-head{background:none!important;border:0!important;border-bottom:2px solid var(--ink)!important;box-shadow:none!important;border-radius:0!important}
body.pixel-theme .library-set-folder{border:0!important;background:none!important;box-shadow:none!important;margin:0!important}
body.pixel-theme .library-set-folder+.library-set-folder{border-top:2px dashed color-mix(in srgb,var(--ink) 35%,transparent)!important}
body.pixel-theme .library-set-folder-head{background:none!important;border:0!important;box-shadow:none!important}
body.pixel-theme .library-set-folder-head:hover{background:var(--box-2)!important}
body.pixel-theme .library-set-toolbar{background:var(--box-2)!important;border-top:2px dashed color-mix(in srgb,var(--ink) 25%,transparent)!important;border-bottom:2px dashed color-mix(in srgb,var(--ink) 25%,transparent)!important}
body.pixel-theme .library-set-search-input{border:2px solid var(--ink)!important;border-radius:0!important;background:var(--box)!important;color:var(--ink)!important}
body.pixel-theme .library-set-sort-btn{border:2px solid var(--ink)!important;border-radius:0!important;background:var(--box)!important;color:var(--ink)!important}
body.pixel-theme .library-set-sort-btn.is-reversed{background:var(--pixel-yellow)!important;color:#000!important}
body.pixel-theme .library-era-group.is-my-cards{border:2px solid var(--ink)!important;background:var(--box-2)!important;border-radius:0!important;margin-bottom:8px!important}
body.pixel-theme .library-era-group.is-my-cards .library-era-text{color:var(--ink)!important}

body.pixel-theme .library-era-sets{background:none!important}
body.pixel-theme .library-set-meta-block{justify-self:start;justify-content:flex-start;margin:0!important;padding:0!important}
body.pixel-theme .library-set-meta-block>*{margin:0!important}
body.pixel-theme .library-era-tag{background:none!important;border:0!important;box-shadow:none!important;padding:0!important;color:#8a8f9c!important}
/* Wider stage now, so height is the limit: leave room for the page nav below. */
body.pixel-theme .spread:not(.cover-mode){max-width:min(var(--binder-max,2400px),calc((100cqh - 68px) * 1.45))!important}
/* The frame inset used to be padding, but padding % resolves against the
   stage's width, not the binder's: once the library narrowed, the pages slid
   off the frame art and the cover colour showed through. Grid tracks resolve
   against the binder itself. Rows: 2.9% of width = 4.2% of height (1.45 ratio). */
body.pixel-theme .spread:not(.cover-mode){
  padding:0!important;
  grid-template-columns:var(--frame-pad-x) minmax(0,1fr) calc(var(--frame-spine) * .95) minmax(0,1fr) var(--frame-pad-x)!important;
  grid-template-rows:4.2% minmax(0,1fr) 4.2%!important}
body.pixel-theme .spread:not(.cover-mode)>.page-wrap:first-child{grid-area:2/2}
body.pixel-theme .spread:not(.cover-mode)>.spine{grid-area:2/3}
body.pixel-theme .spread:not(.cover-mode)>.page-wrap:last-child{grid-area:2/4}

/* Page nav: plain controls under the binder, no dialog box around them. */
body.pixel-theme .binder-nav-dock{background:none!important;border:0!important;box-shadow:none!important;padding:0!important;gap:14px!important}
body.pixel-theme .binder-nav-dock .dock-divider{display:none}
body.pixel-theme .binder-nav-dock .page-nav,body.pixel-theme .binder-nav-dock .jump-nav{background:var(--box)!important;border:2px solid var(--ink)!important;box-shadow:3px 3px 0 var(--ink)!important;padding:4px 8px!important}

/* ======== Pixel: Game Boy-era chrome ========
   Icons drawn on a 16px grid (square pixels, 2px strokes) replace the smooth
   line icons; headings use the pixel font (data stays in Nunito); floating
   boxes get stepped corners and the double frame of the games' dialog boxes.
   Icons are 16x16 SVG paths inlined as data URIs; edit the path data in place. */
body.pixel-theme :is(#newBinderBtn,#addCardBtn,#exportBinderBtn,#signOutBtn,#sceneThemeBtn,#editBinderBtn,#libraryToggleBtn,.lock-btn,#prevBtn,#nextBtn,#sortLibraryBtn)::before{
  content:'';display:block;width:18px;height:18px;flex:none;background:currentColor;
  -webkit-mask:var(--px) center/contain no-repeat;mask:var(--px) center/contain no-repeat}
body.pixel-theme :is(#newBinderBtn,#addCardBtn,#exportBinderBtn,#editBinderBtn) .btn-ico,
body.pixel-theme #libraryToggleBtn svg,body.pixel-theme .lock-btn .lock-icon,body.pixel-theme #sceneThemeIcon{display:none!important}
body.pixel-theme :is(#prevBtn,#nextBtn,#sortLibraryBtn){font-size:0!important;display:inline-flex;align-items:center;justify-content:center}
body.pixel-theme #addCardBtn{display:inline-flex;align-items:center;gap:8px}
body.pixel-theme :is(#newBinderBtn,#addCardBtn){--px:var(--px-plus)}
body.pixel-theme #exportBinderBtn{--px:var(--px-download)}
body.pixel-theme #signOutBtn{--px:var(--px-signout)}
body.pixel-theme #sceneThemeBtn{--px:var(--px-sun)}
body.pixel-theme[data-scene="night"] #sceneThemeBtn{--px:var(--px-moon)}
body.pixel-theme #editBinderBtn{--px:var(--px-gear)}
body.pixel-theme #libraryToggleBtn{--px:var(--px-panel)}
body.pixel-theme .lock-btn{--px:var(--px-unlock)}
body.pixel-theme .lock-btn.is-locked{--px:var(--px-lock)}
body.pixel-theme #prevBtn{--px:var(--px-left)}
body.pixel-theme #nextBtn{--px:var(--px-right)}
body.pixel-theme #sortLibraryBtn{--px:var(--px-sort)}

/* Pixel font for the few display words; names, prices and set data stay in Nunito. */
body.pixel-theme #binderTitle{font:400 15px/1.35 var(--pixel);letter-spacing:0}
body.pixel-theme .header-total{font:400 12px/1 var(--pixel)}
body.pixel-theme .library-head h2{font:400 12px/1.35 var(--pixel);letter-spacing:0}
body.pixel-theme #pageLabel{font:400 10px/1 var(--pixel)!important;letter-spacing:0}

/* Dialog boxes: stepped corners (border-image) and an inner frame line. */
body.pixel-theme :is(.card-tooltip,.card-context-menu,.modal,.binder-nav-dock .page-nav,.binder-nav-dock .jump-nav){
  border:4px solid transparent!important;border-image:var(--px-box-day) 4 / 4px stretch!important;
  border-radius:0!important;background-clip:padding-box!important;
  box-shadow:inset 0 0 0 2px var(--box),inset 0 0 0 4px var(--box-2),6px 6px 0 rgba(20,32,60,.45)!important}
body.pixel-theme .binder-nav-dock :is(.page-nav,.jump-nav){box-shadow:inset 0 0 0 2px var(--box),inset 0 0 0 4px var(--box-2),4px 4px 0 rgba(20,32,60,.45)!important}
body.pixel-theme[data-scene="night"] :is(.card-tooltip,.card-context-menu,.modal,.binder-nav-dock .page-nav,.binder-nav-dock .jump-nav){border-image-source:var(--px-box-night)!important}
body.pixel-theme{--px-plus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath fill='black' fill-rule='evenodd' d='M7 2h2v5h5v2H9v5H7V9H2V7h5z'/%3E%3C/svg%3E");--px-lock:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath fill='black' fill-rule='evenodd' d='M4 7V3h1V2h1V1h4v1h1v1h1v4h-2V3H6v4z M2 7h12v8H2z M7 9v4h2V9z'/%3E%3C/svg%3E");--px-unlock:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath fill='black' fill-rule='evenodd' d='M4 7V3h1V2h1V1h4v1h1v1h1v1h-2V3H6v4z M2 7h12v8H2z M7 9v4h2V9z'/%3E%3C/svg%3E");--px-gear:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cmask id='h'%3E%3Crect width='16' height='16' fill='white'/%3E%3Crect x='6' y='6' width='4' height='4' fill='black'/%3E%3C/mask%3E%3Cg mask='url%28%23h%29'%3E%3Crect x='6' y='0' width='4' height='3'/%3E%3Crect x='6' y='13' width='4' height='3'/%3E%3Crect x='0' y='6' width='3' height='4'/%3E%3Crect x='13' y='6' width='3' height='4'/%3E%3Crect x='2' y='2' width='3' height='3'/%3E%3Crect x='11' y='2' width='3' height='3'/%3E%3Crect x='2' y='11' width='3' height='3'/%3E%3Crect x='11' y='11' width='3' height='3'/%3E%3Cpath fill='black' fill-rule='evenodd' d='M5 3h6v2h2v6h-2v2H5v-2H3V5h2z'/%3E%3C/g%3E%3C/svg%3E");--px-panel:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath fill='black' fill-rule='evenodd' d='M1 2h14v12H1z M3 4v8h6V4z M11 4v8h2V4z'/%3E%3C/svg%3E");--px-sun:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath fill='black' fill-rule='evenodd' d='M6 4h4v1h1v1h1v4h-1v1h-1v1H6v-1H5v-1H4V6h1V5h1z'/%3E%3Crect x='7' y='0' width='2' height='2'/%3E%3Crect x='7' y='14' width='2' height='2'/%3E%3Crect x='0' y='7' width='2' height='2'/%3E%3Crect x='14' y='7' width='2' height='2'/%3E%3Crect x='2' y='2' width='2' height='2'/%3E%3Crect x='12' y='2' width='2' height='2'/%3E%3Crect x='2' y='12' width='2' height='2'/%3E%3Crect x='12' y='12' width='2' height='2'/%3E%3C/svg%3E");--px-moon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cmask id='c'%3E%3Crect width='16' height='16' fill='white'/%3E%3Cpath fill='black' transform='translate%285 -3%29' d='M5 1h6v1h2v2h1v2h1v4h-1v2h-1v2h-2v1H5v-1H3v-2H2v-2H1V6h1V4h1V2h2z'/%3E%3C/mask%3E%3Cg mask='url%28%23c%29'%3E%3Cpath fill='black' fill-rule='evenodd' d='M5 1h6v1h2v2h1v2h1v4h-1v2h-1v2h-2v1H5v-1H3v-2H2v-2H1V6h1V4h1V2h2z'/%3E%3C/g%3E%3C/svg%3E");--px-download:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath fill='black' fill-rule='evenodd' d='M7 1h2v6h3v1h-1v1h-1v1H9v1H7v-1H6V9H5V8H4V7h3z M1 11h2v2h10v-2h2v4H1z'/%3E%3C/svg%3E");--px-signout:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath fill='black' fill-rule='evenodd' d='M8 1h7v14H8v-2h5V3H8z M5 7h6v2H5z M5 4v8H4v-1H3v-1H2V9H1V7h1V6h1V5h1V4z'/%3E%3C/svg%3E");--px-left:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath fill='black' fill-rule='evenodd' d='M5 7h9v2H5z M5 4v8H4v-1H3v-1H2V9H1V7h1V6h1V5h1V4z'/%3E%3C/svg%3E");--px-right:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cg transform='matrix%28-1 0 0 1 16 0%29'%3E%3Cpath fill='black' fill-rule='evenodd' d='M5 7h9v2H5z M5 4v8H4v-1H3v-1H2V9H1V7h1V6h1V5h1V4z'/%3E%3C/g%3E%3C/svg%3E");--px-sort:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath fill='black' fill-rule='evenodd' d='M4 1h2v1h1v1h1v1H2V3h1V2h1z M4 4h2v11H4z'/%3E%3Cg transform='rotate%28180 8 8%29'%3E%3Cpath fill='black' fill-rule='evenodd' d='M4 1h2v1h1v1h1v1H2V3h1V2h1z M4 4h2v11H4z'/%3E%3C/g%3E%3C/svg%3E");--px-box-day:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' shape-rendering='crispEdges'%3E%3Cpath fill='%2314203c' fill-rule='evenodd' d='M2 0h8v1h1v1h1v8h-1v1h-1v1H2v-1H1v-1H0V2h1V1h1z M4 4v4h4V4z'/%3E%3C/svg%3E");--px-box-night:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' shape-rendering='crispEdges'%3E%3Cpath fill='%2343708c' fill-rule='evenodd' d='M2 0h8v1h1v1h1v8h-1v1h-1v1H2v-1H1v-1H0V2h1V1h1z M4 4v4h4V4z'/%3E%3C/svg%3E")}

/* ==========================================================================
   Inside Front Cover & Customization System (Spread 0)
   ========================================================================== */

/* Spread with inside cover on the left page */
.spread.has-inside-cover {
  align-items: stretch !important;
}

.spread.has-inside-cover .page-wrap:first-child {
  height: 100% !important;
  align-self: stretch !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
}

.spread.has-inside-cover .page-wrap:first-child::before {
  display: none !important;
}

.spread:not(.cover-mode) #leftPage.inside-cover-page {
  width: 100% !important;
  height: 100% !important;
  flex: 1 1 0% !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  grid-template-rows: none !important;
  grid-template-columns: none !important;
  gap: 0 !important;
}

/* Card pages use an absolute frame inset; the inside cover fills its wrapper. */
.spread.has-inside-cover #leftPage.inside-cover-page {
  position: relative !important;
  inset: auto !important;
}

.inside-cover-container {
  position: relative;
  width: 100%;
  height: 100%;
  flex: 1 1 0%;
  min-height: 480px;
  border-radius: 6px;
  background-color: var(--inside-cover-bg, #0e1013);
  background-image:
    radial-gradient(ellipse at 85% 50%, rgba(255, 255, 255, 0.04) 0%, transparent 60%),
    radial-gradient(ellipse at 15% 50%, rgba(0, 0, 0, 0.45) 0%, transparent 70%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.015) 0px, rgba(255, 255, 255, 0.015) 1px, transparent 1px, transparent 6px),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.015) 0px, rgba(255, 255, 255, 0.015) 1px, transparent 1px, transparent 6px);
  box-shadow:
    inset 0 0 0 1px var(--inside-cover-border, rgba(255, 255, 255, 0.07)),
    inset -18px 0 32px rgba(0, 0, 0, 0.6),
    inset 4px 0 18px rgba(0, 0, 0, 0.45),
    0 1px 0 rgba(255, 255, 255, 0.08),
    0 6px 14px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  user-select: none;
  display: flex;
  flex-direction: column;
}

/* Debossed perimeter stitching */
.inside-cover-container::before {
  content: '';
  position: absolute;
  inset: 9px;
  border: 1px dashed rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  pointer-events: none;
  z-index: 1;
}

/* Watermark deboss emblem (hidden / blank for now) */
.inside-cover-watermark {
  display: none !important;
}

/* Inside cover header and controls */
/* The strip only blocks clicks on its own buttons, so notes and stickers moved up
   there stay movable; the buttons sit on top of them. */
.inside-cover-header {
  position: relative;
  z-index: 15;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 14px 16px 8px;
  gap: 8px;
}

.inside-cover-tools {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}

.inside-cover-tools > *,
.inside-cover-menu {
  pointer-events: auto;
}

/* Near the page's top border the handles above an item would be cut off. */
.inside-cover-item.is-near-top > .inside-cover-rotate-handle {
  top: auto;
  bottom: -26px;
}

.inside-cover-note.is-near-top .note-draw-bar {
  top: calc(100% + 32px);
}

.inside-cover-sticker.is-near-top .inside-cover-item-del {
  top: auto;
  right: auto;
  bottom: -9px;
  left: -9px;
}

.inside-cover-lock-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: #1d2128;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  color: #e6edf3;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}
.inside-cover-lock-btn svg {
  display: block;
}

.inside-cover-lock-btn:hover {
  background: #2a3039;
  border-color: rgba(255, 255, 255, 0.28);
  transform: translateY(-1px);
}

.inside-cover-lock-btn.is-locked {
  background: #3a2f16;
  border-color: rgba(240, 184, 76, 0.45);
  color: #ffd666;
}

.inside-cover-lock-btn.is-locked:hover {
  background: #4a3c1b;
  border-color: rgba(240, 184, 76, 0.65);
}

.inside-cover-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #1d2128;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 20px;
  color: #e6edf3;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  font-size: 11px;
  font-weight: 600;
  padding: 5px 12px;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.inside-cover-add-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.28);
  transform: translateY(-1px);
}

.inside-cover-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 6px;
  background: #171a21;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
  padding: 5px;
  display: flex;
  flex-direction: column;
  min-width: 180px;
  z-index: 50;
}

.inside-cover-menu-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  background: none;
  border: none;
  color: #c9d1d9;
  font-size: 12px;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s ease, color 0.12s ease;
}

.inside-cover-menu-item:hover {
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
}

.inside-cover-canvas {
  position: relative;
  flex: 1 1 0%;
  width: 100%;
  height: 100%;
  min-height: 0;
  z-index: 2;
  overflow: visible;
}

/* Draggable items on the inside cover */
.inside-cover-item {
  position: absolute;
  touch-action: none;
  user-select: none;
  cursor: grab;
  z-index: 5;
  transition: box-shadow 0.15s ease;
}

.inside-cover-item.is-dragging {
  cursor: grabbing !important;
  z-index: 40 !important;
  opacity: 0.96;
}

.inside-cover-item.is-rotating {
  z-index: 40 !important;
}

/* Rotation handle on notes and stickers */
.inside-cover-rotate-handle {
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ffffff;
  color: #141820;
  border: 1.5px solid rgba(0, 0, 0, 0.35);
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.4);
  display: grid;
  place-items: center;
  cursor: grab;
  z-index: 30;
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.12s ease;
  touch-action: none;
  user-select: none;
}

.inside-cover-rotate-handle:hover {
  transform: translateX(-50%) scale(1.15);
  background: #f4f7fa;
}

.inside-cover-item:hover .inside-cover-rotate-handle,
.inside-cover-item.is-dragging .inside-cover-rotate-handle,
.inside-cover-item.is-rotating .inside-cover-rotate-handle {
  opacity: 1;
}

.inside-cover-item.is-rotating .inside-cover-rotate-handle {
  cursor: grabbing !important;
}

/* Sticky notes */
.inside-cover-note {
  width: 180px;
  min-height: 165px;
  border-radius: 3px;
  padding: 8px 10px 10px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35), 0 1px 4px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
}

/* Scotch tape strips on sticky notes */
.note-tape {
  position: absolute;
  width: 44px;
  height: 16px;
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15), inset 0 0 4px rgba(255, 255, 255, 0.28);
  border-radius: 1px;
  z-index: 15;
  pointer-events: none;
}

.note-tape-top-left {
  top: -7px;
  left: -11px;
  transform: rotate(-33deg);
}

.note-tape-bottom-right {
  bottom: -7px;
  right: -11px;
  transform: rotate(-33deg);
}

.inside-cover-note-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-height: 20px;
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  cursor: grab;
}

.note-color-picker {
  display: flex;
  align-items: center;
  gap: 4px;
}

.color-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.18);
  padding: 0;
  cursor: pointer;
  transition: transform 0.12s ease;
}

.color-dot:hover {
  transform: scale(1.3);
}

.color-dot.active {
  box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.55);
}

.dot-yellow { background: #fff3a8; }
.dot-pink   { background: #ffd5e5; }
.dot-blue   { background: #d0ebff; }
.dot-green  { background: #d3f9d8; }
.dot-purple { background: #e8d9ff; }
.dot-dark   { background: #2f3238; }

.note-tools-row {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  flex: none;
}

.note-tool-btn {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  background: transparent;
  border: 1px solid transparent;
  color: inherit;
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  opacity: 0.72;
  transition: background 0.12s ease, opacity 0.12s ease, color 0.12s ease;
  user-select: none;
}

.note-ico {
  width: 13px;
  height: 13px;
  display: block;
  pointer-events: none;
}

.note-tool-btn:hover {
  background: rgba(0, 0, 0, 0.1);
  opacity: 1;
}

.note-tool-btn:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 1px;
}

.note-tool-btn:disabled {
  opacity: 0.28;
  cursor: default;
  background: transparent;
}

/* Drawing tools float under the note (only in draw mode), so the note itself
   never changes size. */
.note-draw-bar {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  border-radius: 12px;
  background: #ffffff;
  color: #1d2330;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  white-space: nowrap;
  z-index: 31;
}

.inside-cover-note.is-drawing-mode .note-draw-bar {
  display: flex;
}

/* No tool selected: the whole note is a handle. */
.inside-cover-note.is-move-mode,
.inside-cover-note.is-move-mode .inside-cover-note-text {
  cursor: grab;
}

.inside-cover-note.is-move-mode .inside-cover-note-text {
  user-select: none;
}

.note-draw-bar .note-tool-btn:hover {
  background: rgba(0, 0, 0, 0.08);
}

.note-draw-bar .note-tool-btn.active {
  background: rgba(0, 0, 0, 0.1);
  border-color: rgba(0, 0, 0, 0.16);
}

.ink-dot {
  width: 14px;
  height: 14px;
  padding: 0;
  border-radius: 50%;
  background: var(--ink);
  border: 1.5px solid rgba(0, 0, 0, 0.22);
  cursor: pointer;
}

.ink-dot.active {
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 3.5px #1d2330;
}

.note-bar-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.size-btn {
  width: 20px;
  height: 20px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
}

.size-btn span {
  width: var(--d);
  height: var(--d);
  border-radius: 50%;
  background: #1d2330;
}

.size-btn[data-size="0"] { --d: 3px; }
.size-btn[data-size="1"] { --d: 6px; }
.size-btn[data-size="2"] { --d: 10px; }
.size-btn.is-eraser span { background: transparent; border: 1.5px solid #1d2330; }
.size-btn.is-eraser[data-size="0"] { --d: 6px; }
.size-btn.is-eraser[data-size="1"] { --d: 10px; }
.size-btn.is-eraser[data-size="2"] { --d: 15px; }

.size-btn:hover {
  background: rgba(0, 0, 0, 0.08);
}

.size-btn.active {
  background: rgba(0, 0, 0, 0.1);
  border-color: rgba(0, 0, 0, 0.16);
}

.note-bar-sep {
  width: 1px;
  height: 14px;
  margin: 0 3px;
  background: rgba(0, 0, 0, 0.15);
}

.note-delete-btn {
  margin-left: 3px;
}

.note-delete-btn:hover {
  background: #e53935;
  color: #fff;
}

.inside-cover-note.is-erasing .inside-cover-note-canvas {
  cursor: cell;
}

.note-tool-btn.active {
  background: rgba(0, 0, 0, 0.14);
  border-color: rgba(0, 0, 0, 0.18);
  opacity: 1;
}

.note-color-dark .note-tool-btn:hover {
  background: rgba(255, 255, 255, 0.16);
}

.note-color-dark .note-tool-btn.active {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.28);
}

/* Distinct red delete button */
.inside-cover-item-del {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #e53935;
  border: 1.5px solid #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
  display: grid;
  place-items: center;
  color: #ffffff;
  cursor: pointer;
  padding: 0;
  transition: transform 0.12s ease, background 0.12s ease;
  z-index: 30;
  touch-action: none;
  user-select: none;
}

.inside-cover-item-del:hover {
  background: #c62828;
  transform: scale(1.18);
}

.inside-cover-item-del svg {
  display: block;
  pointer-events: none;
}

/* Note body with centered text and overlay doodle canvas */
/* Same shape as the 360×280 doodle bitmap, whatever the header or text do, so a
   drawing never stretches (it used to when locking hid the toolbar). */
.inside-cover-note-body {
  position: relative;
  flex: none;
  width: 100%;
  aspect-ratio: 360 / 280;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 2px;
}

.inside-cover-note-text {
  width: 100%;
  max-height: 100%;
  overflow-y: auto;
  text-align: center;
  border: none;
  background: transparent;
  outline: none;
  font-family: 'Caveat', 'Kalam', cursive, sans-serif;
  font-size: 21px;
  line-height: 1.32;
  font-weight: 600;
  white-space: pre-wrap;
  word-break: break-word;
  padding: 4px 6px;
  cursor: text;
  box-sizing: border-box;
}

.inside-cover-note-text:empty::before {
  content: attr(data-placeholder);
  opacity: 0.42;
  pointer-events: none;
  display: block;
}

.inside-cover-note-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  border-radius: 2px;
}

.inside-cover-note.is-drawing-mode .inside-cover-note-canvas {
  pointer-events: auto;
  cursor: crosshair;
  z-index: 6;
}

.inside-cover-note.is-drawing-mode .inside-cover-note-text {
  pointer-events: none;
  user-select: none;
}

/* Note color variants */
.note-color-yellow { background: #fff6a6; color: #2e2402; }
.note-color-yellow .inside-cover-note-text { color: #2e2402; }

.note-color-pink { background: #ffd8e6; color: #3b0d20; }
.note-color-pink .inside-cover-note-text { color: #3b0d20; }

.note-color-blue { background: #d2ecff; color: #082d4f; }
.note-color-blue .inside-cover-note-text { color: #082d4f; }

.note-color-green { background: #d4fad9; color: #0c3d14; }
.note-color-green .inside-cover-note-text { color: #0c3d14; }

.note-color-purple { background: #ebd9ff; color: #2e164d; }
.note-color-purple .inside-cover-note-text { color: #2e164d; }

.note-color-dark { background: #252830; color: #f2f5f8; }
.note-color-dark .inside-cover-note-header { border-bottom-color: rgba(255, 255, 255, 0.12); }
.note-color-dark .inside-cover-note-text { color: #f2f5f8; }

/* Custom Stickers with authentic white die-cut contour stroke */
.inside-cover-sticker {
  display: inline-block;
  cursor: grab;
}

.inside-cover-sticker .inside-cover-item-del {
  position: absolute;
  top: -9px;
  right: -9px;
  z-index: 30;
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.12s ease, background 0.12s ease;
}

.inside-cover-sticker:hover .inside-cover-item-del,
.inside-cover-sticker.is-dragging .inside-cover-item-del,
.inside-cover-sticker.is-rotating .inside-cover-item-del {
  opacity: 1;
}

.inside-cover-sticker-img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  pointer-events: none;
  /* White die-cut outline, scaled with the sticker (--k = width / 140). */
  --o: calc(3px * var(--k, 1));
  --d: calc(2.2px * var(--k, 1));
  filter:
    drop-shadow(var(--o) 0 0 #ffffff)
    drop-shadow(calc(var(--o) * -1) 0 0 #ffffff)
    drop-shadow(0 var(--o) 0 #ffffff)
    drop-shadow(0 calc(var(--o) * -1) 0 #ffffff)
    drop-shadow(var(--d) var(--d) 0 #ffffff)
    drop-shadow(calc(var(--d) * -1) var(--d) 0 #ffffff)
    drop-shadow(var(--d) calc(var(--d) * -1) 0 #ffffff)
    drop-shadow(calc(var(--d) * -1) calc(var(--d) * -1) 0 #ffffff)
    drop-shadow(0 calc(6px * var(--k, 1)) calc(14px * var(--k, 1)) rgba(0, 0, 0, 0.5));
}

.inside-cover-sticker-resize {
  position: absolute;
  bottom: -7px;
  right: -7px;
  width: 18px;
  height: 18px;
  background: #ffffff;
  border: 1.5px solid rgba(0, 0, 0, 0.4);
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  cursor: nwse-resize;
  z-index: 26;
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.12s ease;
  touch-action: none;
}

.inside-cover-sticker-resize:hover {
  transform: scale(1.15);
}

.inside-cover-sticker:hover .inside-cover-sticker-resize,
.inside-cover-sticker.is-dragging .inside-cover-sticker-resize,
.inside-cover-sticker.is-rotating .inside-cover-sticker-resize {
  opacity: 1;
}

/* Locked inside cover mode */
.binder-locked .inside-cover-add-btn,
.binder-locked .inside-cover-menu,
.binder-locked .inside-cover-rotate-handle,
.binder-locked .inside-cover-item-del,
.binder-locked .inside-cover-sticker-resize,
.binder-locked .note-draw-bar,
.inside-cover-container.is-locked .note-draw-bar,
.inside-cover-container.is-locked .inside-cover-add-btn,
.inside-cover-container.is-locked .inside-cover-menu,
.inside-cover-container.is-locked .inside-cover-rotate-handle,
.inside-cover-container.is-locked .inside-cover-item-del,
.inside-cover-container.is-locked .inside-cover-sticker-resize {
  display: none !important;
}

.binder-locked .note-tools-row,
.binder-locked .note-color-picker,
.inside-cover-container.is-locked .note-tools-row,
.inside-cover-container.is-locked .note-color-picker {
  visibility: hidden !important;
}

.binder-locked .inside-cover-note-header,
.inside-cover-container.is-locked .inside-cover-note-header {
  border-bottom-color: transparent !important;
}

.binder-locked .inside-cover-note-text:empty::before,
.inside-cover-container.is-locked .inside-cover-note-text:empty::before {
  content: none;
}

.binder-locked .inside-cover-item,
.binder-locked .inside-cover-item *,
.inside-cover-container.is-locked .inside-cover-item,
.inside-cover-container.is-locked .inside-cover-item * {
  cursor: default !important;
}

.binder-locked .inside-cover-note-canvas,
.inside-cover-container.is-locked .inside-cover-note-canvas {
  pointer-events: none !important;
}

.binder-locked .inside-cover-note-text,
.inside-cover-container.is-locked .inside-cover-note-text {
  cursor: default !important;
}

/* -------------------------------------------------------------------------- */
/* v1.5 — Minimalist & Smooth Page Turn and Cover Transitions                 */
/* -------------------------------------------------------------------------- */

.spread {
  position: relative;
  perspective: 1600px;
}

.binder-page:is(.page-turn-fold-next, .page-turn-unfold-next, .page-turn-fold-prev, .page-turn-unfold-prev) {
  will-change: transform, opacity;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

/* Page Turn: Next */
.binder-page.page-turn-fold-next {
  transform-origin: left center;
  animation: smoothFoldNext 0.23s cubic-bezier(0.35, 0, 0.2, 1) forwards;
  z-index: 10;
}
.binder-page.page-turn-unfold-next {
  transform-origin: right center;
  animation: smoothUnfoldNext 0.26s cubic-bezier(0.2, 0.85, 0.25, 1) both;
  z-index: 10;
}

@keyframes smoothFoldNext {
  0% { transform: rotateY(0deg); filter: brightness(1); opacity: 1; }
  100% { transform: rotateY(-78deg); filter: brightness(0.65); opacity: 0.35; }
}

@keyframes smoothUnfoldNext {
  0% { transform: rotateY(78deg); filter: brightness(0.7); opacity: 0.4; }
  100% { transform: rotateY(0deg); filter: brightness(1); opacity: 1; }
}

/* Page Turn: Prev */
.binder-page.page-turn-fold-prev {
  transform-origin: right center;
  animation: smoothFoldPrev 0.23s cubic-bezier(0.35, 0, 0.2, 1) forwards;
  z-index: 10;
}
.binder-page.page-turn-unfold-prev {
  transform-origin: left center;
  animation: smoothUnfoldPrev 0.26s cubic-bezier(0.2, 0.85, 0.25, 1) both;
  z-index: 10;
}

@keyframes smoothFoldPrev {
  0% { transform: rotateY(0deg); filter: brightness(1); opacity: 1; }
  100% { transform: rotateY(78deg); filter: brightness(0.65); opacity: 0.35; }
}

@keyframes smoothUnfoldPrev {
  0% { transform: rotateY(-78deg); filter: brightness(0.7); opacity: 0.4; }
  100% { transform: rotateY(0deg); filter: brightness(1); opacity: 1; }
}

/* Smooth Cover Transitions */
.spread.closing-to-cover {
  transition: transform 0.24s cubic-bezier(0.35, 0, 0.2, 1), opacity 0.24s ease;
  transform: scale(0.97) rotateY(6deg);
  opacity: 0.15;
  pointer-events: none;
}

.spread.cover-mode.opening-from-cover .binder-cover {
  transition: transform 0.22s cubic-bezier(0.35, 0, 0.2, 1), opacity 0.22s ease;
  transform: scale(0.96) rotateY(-8deg);
  opacity: 0.2;
  pointer-events: none;
}

.spread.cover-mode .binder-cover.cover-settle {
  animation: coverSettleIn 0.24s cubic-bezier(0.2, 0.85, 0.25, 1);
}

@keyframes coverSettleIn {
  0% { transform: scale(0.96) rotateY(-6deg); opacity: 0.5; }
  100% { transform: scale(1) rotateY(0deg); opacity: 1; }
}

.spread.spread-reveal {
  animation: spreadRevealIn 0.24s cubic-bezier(0.2, 0.85, 0.25, 1);
}

@keyframes spreadRevealIn {
  0% { transform: scale(0.97) rotateY(6deg); opacity: 0.5; }
  100% { transform: scale(1) rotateY(0deg); opacity: 1; }
}

/* Binder Shelf Drag & Drop */
body.binder-drag-active {
  user-select: none !important;
  -webkit-user-select: none !important;
}

.binder-item {
  touch-action: none;
  cursor: grab;
  transition: transform 0.16s ease, box-shadow 0.16s ease, opacity 0.16s ease;
}
.binder-item:active {
  cursor: grabbing;
}
.binder-item.drag-source {
  opacity: 0.3 !important;
  transform: scale(0.94) !important;
  filter: saturate(0.6);
}

.binder-drop-indicator {
  width: 36px;
  height: 3px;
  background: var(--gold, #f0b84c);
  border-radius: 3px;
  box-shadow: 0 0 10px var(--gold, #f0b84c), 0 0 3px #fff;
  margin: 4px auto;
  pointer-events: none;
  animation: dropPulse 0.8s ease-in-out infinite alternate;
  flex: none;
}
@keyframes dropPulse {
  from { opacity: 0.7; transform: scaleX(0.9); }
  to { opacity: 1; transform: scaleX(1.1); }
}

.binder-drag-lift {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 99999;
  pointer-events: none;
  border-radius: 8px;
  width: 62px;
  height: 86px;
  box-shadow: 0 20px 42px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.18);
  will-change: transform;
  backface-visibility: hidden;
}
.mini-drag-binder {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  overflow: hidden;
  background: radial-gradient(circle at 65% 25%, rgba(255,255,255,0.18), transparent 60%), var(--binder-color, #2f3540);
  border: 1px solid rgba(255,255,255,0.22);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 6px;
  box-sizing: border-box;
}
.mini-drag-binder img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mini-binder-spine {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 11px;
  background: linear-gradient(90deg, rgba(0,0,0,.45), rgba(255,255,255,.18), rgba(0,0,0,.35));
  border-right: 1px solid rgba(255,255,255,.16);
  z-index: 2;
}
.mini-binder-label {
  position: relative;
  z-index: 3;
  margin-left: 8px;
  background: rgba(10, 12, 16, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  padding: 3px 5px;
  backdrop-filter: blur(6px);
}
.mini-binder-label span {
  display: block;
  font-size: 9px;
  font-weight: 750;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .workspace, .main { transition: none; }
}


/* In-app confirm dialog (askConfirm): above any open modal. */
.confirm-backdrop {
  z-index: 60;
}

.confirm-modal {
  width: min(400px, 92vw);
}

.confirm-modal p {
  margin: 0;
  line-height: 1.5;
}

/* Privacy / Terms links at the foot of the sidebar (both themes). */
.legal-links { display: flex; flex-direction: column; align-items: center; gap: 3px; padding-top: 2px; }
.legal-links a { color: var(--muted); font-size: 11px; line-height: 1.3; text-decoration: none; }
.legal-links a:hover, .legal-links a:focus-visible { color: var(--text); text-decoration: underline; }
body.pixel-theme .legal-links a { color: var(--ink); font: 400 7px/1.6 var(--pixel); opacity: .75; }
body.pixel-theme .legal-links a:hover, body.pixel-theme .legal-links a:focus-visible { color: var(--ink); opacity: 1; }