:root{--binder-page:#1f2636;--binder-pocket:#151b28;--binder-pocket-edge:#ffffff14;--binder-spine:#0f141e}.binder-cover{--cover-base:linear-gradient(160deg, var(--cover-light), var(--cover-dark));aspect-ratio:.78;background:var(--cover-base);color:var(--text);border-radius:5px 10px 10px 5px;display:block;position:relative;overflow:hidden;box-shadow:inset 0 1px #ffffff17,inset 0 -1px #0006,0 10px 24px #0008}.cover-leatherette{background:radial-gradient(#ffffff0d .6px, transparent 1.1px) 0 0 / 4px 4px, radial-gradient(#0000002e .7px, transparent 1.2px) 2px 3px / 5px 5px, var(--cover-base)}.cover-cloth{background:repeating-linear-gradient(45deg, #ffffff09 0 1px, transparent 1px 3px), repeating-linear-gradient(-45deg, #00000024 0 1px, transparent 1px 3px), var(--cover-base)}.cover-matte{background:radial-gradient(120% 80% at 30% 0%, #ffffff12, transparent 60%), var(--cover-base)}.cover-spine{background:var(--binder-spine);width:11%;position:absolute;inset:0 auto 0 0;box-shadow:inset -1px 0 #ffffff12}.cover-window{aspect-ratio:63/88;background:#0003;border-radius:4px;width:52%;position:absolute;top:11%;left:27%;overflow:hidden;box-shadow:inset 0 1px 4px #0009,0 0 0 1px #ffffff14}.cover-window img{object-fit:cover;width:100%;height:100%}.cover-text{gap:2px;display:grid;position:absolute;bottom:7%;left:18%;right:8%}.cover-name{-webkit-line-clamp:2;font-family:var(--font-display);letter-spacing:-.01em;overflow-wrap:anywhere;-webkit-box-orient:vertical;font-size:15px;font-weight:650;line-height:1.15;display:-webkit-box;overflow:hidden}.cover-meta{font-family:var(--font-mono);letter-spacing:.06em;text-transform:uppercase;font-size:10.5px}.shelf-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 16px;margin:24px 0 0;padding:0;list-style:none;display:grid}.shelf-item{width:100%;color:inherit;text-align:left;background:0 0;border:0;padding:0;text-decoration:none;display:block}.shelf-item:active .binder-cover{transform:scale(.98)}.shelf-caption{gap:1px;padding:10px 2px 0;display:grid}.shelf-name{white-space:nowrap;text-overflow:ellipsis;font-size:15px;font-weight:600;overflow:hidden}.shelf-count{color:var(--text-muted);font-size:13px}.shelf-new-face{aspect-ratio:.78;border:1.5px dashed var(--hairline);color:var(--text-muted);border-radius:5px 10px 10px 5px;place-items:center;font-size:34px;font-weight:300;display:grid}@media (width>=720px){.shelf-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (width>=1024px){.shelf-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:28px 22px}}.binder-preview{width:120px;margin:4px auto 22px}.binder-steppers{margin-top:14px}.binder-stepper{justify-content:space-between;align-items:center;gap:10px;display:flex}fieldset:disabled .chip>span,fieldset:disabled .binder-stepper{opacity:.5}.swatches{flex-wrap:wrap;gap:12px;margin-top:14px;display:flex}.swatch{position:relative}.swatch input{opacity:0;width:1px;height:1px;position:absolute}.swatch>span:first-of-type{border-radius:50%;width:40px;height:40px;display:block;box-shadow:inset 0 0 0 1px #ffffff1f}.swatch input:checked+span,.swatch input:focus-visible+span{outline:2px solid var(--accent);outline-offset:3px}.sheet-lead{color:var(--text-muted);margin-bottom:18px;font-size:14px}.binder-view{inset:calc(env(safe-area-inset-top) + var(--banner-h,0px)) 0 calc(var(--tabbar-h) + env(safe-area-inset-bottom)) 0;background:var(--bg);grid-template-rows:auto minmax(0,1fr) auto auto;grid-template-areas:"head""stage""tray""bar";display:grid;position:fixed}.binder-head{min-width:0;padding:10px var(--gutter) 4px;flex-wrap:wrap;grid-area:head;justify-content:space-between;align-items:center;gap:8px;display:flex}.binder-head .screen-back{flex:none;margin:0}.binder-title{min-width:0;font-family:var(--font-display);letter-spacing:-.01em;white-space:nowrap;text-overflow:ellipsis;flex:1 0 100%;order:3;font-size:19px;font-weight:650;overflow:hidden}.binder-actions{flex:none;gap:6px;display:flex}.binder-actions .tool,.binder-bar .tool{padding:0 12px}.tool[aria-pressed=true]{border-color:var(--text-muted);background:var(--surface-2)}.binder-stage{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;grid-area:stage;position:relative;overflow:clip}.binder-track{will-change:transform;width:0;height:0;position:absolute;top:50%;left:50%}.binder-spine{top:calc(var(--ph) / -2);width:12px;height:var(--ph);background:var(--binder-spine);border-radius:2px;position:absolute;left:-6px}.leaf{top:calc(var(--ph) / -2);width:var(--pw);height:var(--ph);transform-origin:0;transform-style:preserve-3d;will-change:transform;position:absolute;left:0}.binder-view[data-flat] .leaf{transform-style:flat}.face{grid-template-columns:repeat(var(--cols), var(--cw));grid-auto-rows:calc(var(--cw) * 88 / 63);gap:var(--gap);padding:var(--pad);background:var(--binder-page);backface-visibility:hidden;border-radius:0 8px 8px 0;place-content:center;display:grid;position:absolute;inset:0;box-shadow:inset 10px 0 14px -10px #000c,inset 0 1px #ffffff0d}.face-back{border-radius:8px 0 0 8px;transform:rotateY(180deg);box-shadow:inset -10px 0 14px -10px #000c,inset 0 1px #ffffff0d}.binder-view[data-flat] .face-back{transform:scaleX(-1)}.fold{border-radius:inherit;opacity:0;pointer-events:none;background:linear-gradient(90deg,#000b 0%,#0005 30%,#0000 70%);position:absolute;inset:0}.face-back .fold{background:linear-gradient(270deg,#000b 0%,#0005 30%,#0000 70%)}.pocket{background:var(--binder-pocket);min-width:0;box-shadow:inset 0 0 0 1px var(--binder-pocket-edge);border-radius:4px;position:relative}.pocket[data-target]{box-shadow:inset 0 0 0 2px var(--accent)}.pocket-card,.pocket-empty{color:inherit;background:0 0;border:0;border-radius:3px;padding:0;display:block;position:absolute;inset:3px;overflow:hidden}.pocket-empty:hover{background:#ffffff06}.pocket-card img{object-fit:cover;pointer-events:none;-webkit-user-drag:none;width:100%;height:100%}.pocket-card[data-source]{opacity:.3}.pocket[data-state=wanted] img,.drag-card[data-state=wanted] img{opacity:.35;filter:grayscale()}.pocket-wanted{color:var(--accent);font-family:var(--font-mono);font-size:clamp(8px, calc(var(--cw) * .1), 11px);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;background:#151b28eb;border-radius:999px;padding:2px 6px;position:absolute;bottom:6%;left:50%;transform:translate(-50%)}.binder-view[data-small] .pocket-wanted{border-style:solid;border-width:0 12px 12px 0;border-color:transparent var(--accent) transparent transparent;background:0 0;border-radius:0;width:0;height:0;padding:0;font-size:0;inset:0 0 auto auto;transform:none}.pocket-blank{border:1px solid var(--binder-pocket-edge);border-radius:inherit;height:100%;font-size:clamp(9px, calc(var(--cw) * .11), 13px);text-align:left;overflow-wrap:anywhere;align-content:start;gap:2px;padding:10%;line-height:1.2;display:grid}.pocket-blank .mono{color:var(--text-muted)}.pocket-mode{margin-bottom:18px}.pocket-whole{margin-bottom:12px}.art-pick{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));align-items:start;gap:8px;margin:16px 0 0;padding:0;list-style:none;display:grid}.pocket-page{grid-column:1/-1;grid-row:1 / span var(--rows)}.pocket-page .pocket-card img{object-fit:contain}.pocket-art-credit{align-content:end}.pocket-art-credit .mono{letter-spacing:.04em;text-transform:uppercase;margin-bottom:auto;font-size:.8em}.pocket-art-credit svg{color:var(--text-muted)}.edge-zone{pointer-events:none;transition:background .2s;position:absolute;top:0;bottom:0}.edge-left[data-on]{background:linear-gradient(90deg, color-mix(in srgb, var(--accent) 28%, transparent), transparent)}.edge-right[data-on]{background:linear-gradient(270deg, color-mix(in srgb, var(--accent) 28%, transparent), transparent)}.binder-opening{top:calc(50% - var(--ph) / 2);z-index:1000;width:var(--pw);height:var(--ph);transform-origin:0;backface-visibility:hidden;pointer-events:none;position:absolute}.binder-opening .binder-cover{aspect-ratio:auto;border-radius:4px 10px 10px 4px;width:100%;height:100%}.drag-card{width:var(--cw);aspect-ratio:63/88;background:var(--binder-pocket);border-radius:4px;position:relative;overflow:hidden;transform:rotate(-4deg)scale(1.06);box-shadow:0 18px 32px #000b}.drag-card img{object-fit:cover;width:100%;height:100%}.sleeve-sheen{pointer-events:none;background:linear-gradient(115deg,#0000 35%,#ffffff14 45%,#0000 55%);position:absolute;inset:0}.binder-bar{padding:6px var(--gutter);border-top:1px solid var(--hairline);grid-area:bar;align-items:center;gap:4px;display:flex}.bar-turn{border-radius:var(--radius-btn);width:44px;height:44px;color:var(--text);background:0 0;border:0;flex:none;place-items:center;display:grid}.bar-turn:first-child svg{transform:rotate(180deg)}.bar-turn:disabled{color:var(--text-muted);opacity:.4}.bar-page{border-radius:var(--radius-btn);min-width:0;min-height:44px;color:var(--text);background:0 0;border:0;justify-content:center;align-items:center;gap:10px;padding:0 10px;font-size:15px;display:inline-flex}.side-mark{gap:2px;display:inline-flex}.side-mark span{background:var(--surface-2);border-radius:1.5px;width:7px;height:11px}.side-mark[data-side=left] span:first-child,.side-mark[data-side=right] span:last-child{background:var(--text)}.bar-tray{margin-left:auto}.tray{border-top:1px solid var(--hairline);background:var(--surface);-webkit-touch-callout:none;flex-direction:column;grid-area:tray;height:36dvh;min-height:0;display:flex}.tray-head{justify-content:space-between;align-items:center;gap:8px;padding:8px 6px 0 16px;display:flex}.tray-tabs{flex:1;max-width:300px}.tray-tabs span{min-height:34px}.tray .tray-search{margin:8px 16px 6px}.tray-search input{height:40px!important}.tray-hint{color:var(--text-muted);padding:0 16px;font-size:12px}.tray-grid{overscroll-behavior:contain;flex:1;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));align-content:start;gap:12px 10px;margin:0;padding:10px 16px 16px;list-style:none;display:grid;overflow-y:auto}.tray-card{width:100%;color:inherit;text-align:left;-webkit-user-select:none;user-select:none;background:0 0;border:0;gap:4px;padding:0;display:grid}.tray-card[data-source]{opacity:.4}.tray-art{aspect-ratio:63/88;background:var(--surface-2);border-radius:4px;display:block;position:relative;overflow:hidden}.tray-art img{object-fit:cover;pointer-events:none;-webkit-user-drag:none;width:100%;height:100%}.tray-name{white-space:nowrap;text-overflow:ellipsis;font-size:11px;overflow:hidden}@media (width>=1024px){.binder-view{left:var(--rail-w);grid-template:"head""stage"minmax(0,1fr)"bar"/minmax(0,1fr);bottom:0}.binder-view[data-tray]{grid-template-columns:minmax(0,1fr) 340px;grid-template-areas:"head tray""stage tray""bar tray"}.binder-head{flex-wrap:nowrap;padding:22px 32px 8px}.binder-title{flex:auto;order:0}.binder-bar{border-top:0;justify-content:center;padding:10px 32px 16px}.bar-tray{margin-left:24px}.tray{border-top:0;border-left:1px solid var(--hairline);height:auto}.tray-head{padding-top:18px}.tray-grid{grid-template-columns:repeat(auto-fill,minmax(86px,1fr))}}.page-strip{margin:0 0 18px;padding:0;list-style:none}.page-strip li{border-bottom:1px solid var(--hairline);align-items:center;gap:8px;display:flex}.strip-jump{min-width:0;min-height:68px;color:inherit;text-align:left;background:0 0;border:0;flex:1;align-items:center;gap:14px;padding:8px 0;display:flex}.strip-mini{background:var(--binder-page);border-radius:3px;flex:none;gap:2px;width:40px;padding:3px;display:grid}.strip-mini span{aspect-ratio:63/88;background:var(--binder-pocket);border-radius:1px}.strip-mini span[data-state=filled]{background:var(--text-muted)}.strip-mini span[data-state=wanted]{background:#3a4459}.strip-mini span[data-state=art]{background:#5d6a85}.strip-text{gap:1px;display:grid}.strip-no{font-family:var(--font-mono);font-size:14px}.page-strip li[data-current] .strip-no{font-weight:700}.page-strip li[data-current] .strip-no:after{content:" · showing";color:var(--text-muted);font-weight:400}.strip-count{color:var(--text-muted);font-size:13px}.strip-tools{flex:none;gap:4px;display:flex}.strip-tool{border:1px solid var(--hairline);border-radius:var(--radius-btn-sm);min-width:40px;height:40px;color:var(--text);background:0 0;font-size:16px}.strip-tool:disabled{opacity:.35}.strip-confirm{color:var(--loss);padding:0 10px;font-size:13px}.binder-owner{color:var(--text-muted);font-weight:500}
