/* MijnDex collector refinement: crisp scans, readable full-size view and a proper binder. */
:root{--md-ink:#203852;--md-muted:#6c859d;--md-line:#dce7f2;--md-blue:#2779d8}
/* Display entire scanned card, not a fitted art crop. Smaller card surfaces
   use sufficiently large responsive WebP files; detail always uses the PNG. */
.page .card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,166px),1fr));gap:21px 15px;align-items:start}
.page .card-tile{min-width:0;border-radius:9px;background:transparent!important;box-shadow:none!important;transform:none;cursor:pointer}
.page .card-tile .card-art{aspect-ratio:63/88;display:flex;align-items:center;justify-content:center;min-width:0;overflow:visible;padding:2px!important}
.page .card-tile .card-art img{display:block;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain!important;object-position:center!important;image-rendering:auto;filter:drop-shadow(0 7px 9px #19385723);border-radius:5px;transform:none}
.page .card-tile:hover .card-art img{transform:translateY(-3px)!important;filter:drop-shadow(0 9px 12px #19385735)}
.page .card-tile h3{font-size:13px;line-height:1.4;margin:9px 3px 3px;color:var(--md-ink)}
.page .card-tile p{font-size:11px;line-height:1.5;margin:0 3px;color:var(--md-muted)}
/* Lists overview: compact editorial covers with actual cards from the list. */
.lists-landing{display:grid;gap:27px}
.lists-hero{display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid var(--md-line);padding:6px 3px 25px}
.lists-hero h1{font:810 clamp(32px,4vw,51px)/1.08 var(--font);letter-spacing:-.045em;color:var(--md-ink);margin:10px 0}
.lists-hero p{font-size:13px;color:var(--md-muted);margin:0;line-height:1.6}
.lists-summary{display:grid;justify-items:center;min-width:138px;border-left:1px solid var(--md-line);padding:8px 12px 8px 26px}
.lists-summary strong{font-size:37px;color:#225f9a;line-height:1;font-weight:850}
.lists-summary span{font-size:12px;color:#254a6d;font-weight:750}
.lists-summary small{color:var(--md-muted);font-size:10px;white-space:nowrap;margin-top:5px}
.lists-toolbar{display:flex;justify-content:space-between;gap:18px;align-items:center;flex-wrap:wrap}
.lists-toolbar-heading{display:flex;align-items:baseline;gap:13px}
.lists-toolbar-heading h2{font-size:21px;color:var(--md-ink);letter-spacing:-.02em;margin:0}
.lists-toolbar-heading>span{font-size:12px;color:var(--md-muted)}
.lists-toolbar-actions{display:flex;gap:9px;flex-wrap:wrap}
.collection-list-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:17px}
.collection-list-card{display:flex;flex-direction:column;min-width:0;background:#fff;border:1px solid #d9e5f2;color:var(--md-ink);border-radius:11px;overflow:hidden;transition:transform .16s,border-color .16s,box-shadow .16s;box-shadow:0 4px 16px #2249700b}
.collection-list-card:hover{transform:translateY(-3px);border-color:#94bce7;box-shadow:0 12px 30px #305f8f1b}
.collection-list-card:focus-visible{outline:3px solid #257bea;outline-offset:3px}
.list-cover{height:180px;position:relative;overflow:hidden;background:linear-gradient(145deg,#e5eff9,#cddff1)}
.list-cover-binder{background:linear-gradient(140deg,#143957,#235478 50%,#12304e)}
.list-cover-art{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.cover-preview{position:absolute;width:92px;height:128px;border-radius:4px;filter:drop-shadow(0 8px 8px #0d315237);transform:rotate(-8deg) translateX(-57px);transition:transform .2s}
.cover-preview img{width:100%;height:100%;object-fit:contain!important;display:block;border-radius:4px}
.cover-preview-1{transform:rotate(1deg) translateX(0);z-index:2}
.cover-preview-2{transform:rotate(9deg) translateX(57px);z-index:3}
.collection-list-card:hover .cover-preview-0{transform:rotate(-11deg) translateX(-65px)}
.collection-list-card:hover .cover-preview-2{transform:rotate(12deg) translateX(65px)}
.list-cover-count{position:absolute;right:10px;bottom:10px;z-index:5;padding:6px 9px;color:#123a58;background:#fffffff1;border-radius:5px;font-size:11px;font-weight:750}
.list-cover-binder .list-cover-count{color:#d9e9ff;background:#071b33b8;border:1px solid #ffffff2c}
.cover-empty{display:grid;justify-items:center;align-content:center;gap:8px;color:#5583ae}
.list-cover-binder .cover-empty{color:#d8e9fa}
.cover-empty span{font-size:55px;line-height:1}
.cover-empty small{font-size:12px}
.list-card-info{display:flex;flex-direction:column;padding:18px 17px 17px;flex:1;min-height:165px}
.list-card-overline{display:flex;justify-content:space-between;gap:9px;color:#487caa;text-transform:uppercase;font-weight:750;letter-spacing:.06em;font-size:9px}
.list-card-overline span:last-child{color:#869ab0;letter-spacing:0;text-transform:none}
.list-card-info h3{font-size:20px;font-weight:800;letter-spacing:-.025em;margin:12px 0 7px;overflow-wrap:anywhere}
.list-card-info p{font-size:12px;color:#7890a5;line-height:1.55;margin:0 0 16px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.list-card-action{margin-top:auto;border-top:1px solid #e7eef7;padding-top:13px;display:flex;justify-content:space-between;font-size:12px;font-weight:730;color:#226caf}
.list-card-action span{font-size:17px}
.list-welcome{background:#fff;border:1px dashed #a4c4e2;border-radius:11px;min-height:280px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;padding:32px;text-align:center}
.list-welcome-art{font-size:50px;color:#538fcd}
.list-welcome h3{font-size:24px;color:var(--md-ink);margin:0}
.list-welcome p{max-width:320px;color:var(--md-muted);font-size:12px;line-height:1.5}
.list-detail-header{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin:14px 0 28px;padding-bottom:23px;border-bottom:1px solid var(--md-line)}
.list-detail-header h1{font:820 clamp(28px,3.5vw,43px)/1.1 var(--font);letter-spacing:-.04em;color:var(--md-ink);margin:9px 0}
.list-detail-header p{color:var(--md-muted);font-size:13px;margin:6px 0 16px}
.list-detail-meta{display:flex;flex-wrap:wrap;gap:12px;color:#517996;font-weight:700;font-size:11px}
.list-detail-meta span+span{border-left:1px solid #c6dce9;padding-left:12px}
.list-detail-actions{display:flex;flex-wrap:wrap;gap:8px}
.page .list-card-grid{row-gap:22px}
.list-card-grid .card-tile{position:relative}
.list-tile-label{padding:4px 3px 3px;display:flex;flex-direction:column;align-items:flex-start;gap:5px}
.list-tile-label h3{margin:0!important}
.list-tile-label p{white-space:normal!important;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.list-tile-bottom{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin-top:4px}
.list-qty{color:#1f72bf;font-weight:800;font-size:12px}
.list-remove{font-size:11px;color:#9c5361;border:0;background:none;padding:5px 0;cursor:pointer}
.list-remove:hover{text-decoration:underline;color:#b53648}
/* Binder: actual 3x3 pockets. No cover-cropping, no upscaled 240px files. */
.binder-section{max-width:1020px;margin:0 auto 15px}
.binder-toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:0 0 12px}
.binder-toolbar>div{display:flex;flex-direction:column;gap:4px}
.binder-toolbar strong{color:#1c4166;font-size:16px}
.binder-toolbar span{color:#728a9d;font-size:11px}
.binder-toolbar button[aria-pressed="true"]{background:#205e9e;color:#fff;border-color:#205e9e}
.binder-shell{display:grid;grid-template-columns:29px minmax(0,1fr);border-radius:11px;background:linear-gradient(120deg,#142538,#2a4766 56%,#152c48);border:2px solid #16334f;padding:16px 17px 18px 3px;box-shadow:0 13px 35px #19344d26}
.binder-rings{display:flex;flex-direction:column;justify-content:space-around;align-items:center;padding:10px 0}
.binder-rings i{width:24px;height:42px;border:5px solid #b7c9d9;border-left:0;display:block;border-radius:0 12px 12px 0;box-shadow:1px 2px 2px #00172d80}
.binder-page{background:linear-gradient(135deg,#263f5d,#142941);border:1px solid #89b1d03d;border-radius:7px;padding:11px;box-shadow:inset 0 1px 13px #031628ab}
.binder-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}
.binder-slot{aspect-ratio:63/88!important;position:relative;display:grid;place-items:center;min-width:0;max-width:100%;overflow:hidden;background:linear-gradient(145deg,#0b1c30,#172e47);border:1px solid #a5c6dd50;border-radius:7px;box-shadow:inset 0 0 0 2px #05142463,0 3px 8px #081a3273;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.binder-slot:after{pointer-events:none;content:'';position:absolute;inset:4px;border:2px solid #ffffff14;border-radius:5px;box-shadow:inset 0 0 20px #06182b40}
.binder-slot:hover{border-color:#9fc9f1}
.binder-slot:focus-visible{outline:3px solid #73b9ff;outline-offset:1px}
.binder-slot img{width:96%;height:96%;max-width:96%;max-height:96%;object-fit:contain!important;object-position:center!important;image-rendering:auto;display:block;filter:none;transform:none!important;border-radius:4px}
.binder-slot.empty:before{content:none!important}
.binder-slot-empty{color:#b3d0e039;font-size:21px;font-weight:700}
.binder-card-caption{position:absolute;bottom:4px;left:5px;right:5px;z-index:4;background:#10243bd9;color:#fff;border-radius:4px;padding:5px;text-align:center;font-size:10px;opacity:0;transition:opacity .18s;pointer-events:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.binder-slot:hover .binder-card-caption,.binder-slot:focus-visible .binder-card-caption{opacity:1}
.binder-section.is-moving .binder-slot{cursor:grab}
.binder-slot.selected{outline:3px solid #76bfec!important;outline-offset:-4px}
.binder-help{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:14px 0 2px;color:#6c859a;font-size:11px}
/* A normal card dialog presents original source. Click it to read text. */
.detail-image-wrap{min-width:0;display:flex;align-items:flex-start;justify-content:center}
.detail-enlarge{display:flex;flex-direction:column;align-items:center;gap:9px;border:0;background:transparent;color:#285b87;padding:0;max-width:100%;width:100%;text-align:center;font-weight:740;font-size:12px;cursor:zoom-in}
.detail-enlarge img{width:100%;max-width:100%;height:auto;max-height:70vh;object-fit:contain!important;border-radius:6px;box-shadow:0 10px 23px #1d42602b}
.detail-enlarge span{padding:7px 12px;border-radius:5px;border:1px solid #cddfec;background:#edf5ff}
.detail-enlarge:hover span{background:#dfefff}
body.md-zoom-open{overflow:hidden}
.md-card-zoom{position:fixed;inset:0;z-index:9999;background:#07111ef7;display:flex;flex-direction:column;color:#fff}
.md-card-zoom-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px clamp(12px,2vw,30px);background:#102034;border-bottom:1px solid #ffffff26}
.md-card-zoom-top>div:first-child{display:grid;gap:3px;min-width:0}
.md-card-zoom-top strong{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.md-card-zoom-top span{color:#abbdd1;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.md-card-zoom-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}
.md-card-zoom-actions button{border:1px solid #ffffff36;border-radius:5px;background:#263d56;color:#fff;min-width:37px;height:36px;font-size:19px;cursor:pointer}
.md-card-zoom-actions output{min-width:65px;font-size:11px;text-align:center}
.md-card-zoom-stage{overflow:auto;flex:1;min-height:0;display:flex;align-items:safe center;justify-content:safe center;padding:19px;overscroll-behavior:contain}
.md-card-zoom-stage img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain!important;box-shadow:0 12px 35px #000a;flex-shrink:0}
.md-card-zoom-stage img.is-enlarged{max-width:none!important;max-height:none!important}
.md-card-zoom>p{color:#9caec0;text-align:center;font-size:11px;padding:7px 12px;margin:0;background:#101e30}
@media (max-width:760px){
 .page .card-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:17px 11px}
 .page .card-tile h3{font-size:12px}
 .page .card-tile p{font-size:11px}
 .lists-hero{gap:8px;padding-bottom:15px}
 .lists-hero h1{font-size:31px}
 .lists-hero p{font-size:11px}
 .lists-summary{min-width:85px;padding:9px 4px 9px 12px}
 .lists-summary strong{font-size:27px}
 .lists-summary small{font-size:9px;white-space:normal;text-align:center}
 .lists-toolbar-actions{width:100%;gap:6px}
 .lists-toolbar-actions .btn{flex:1;min-width:0;white-space:nowrap;padding:9px 7px;font-size:11px}
 .collection-list-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .list-cover{height:143px}
 .cover-preview{width:69px;height:98px;transform:rotate(-8deg) translateX(-38px)}
 .cover-preview-1{transform:rotate(1deg) translateX(0)}
 .cover-preview-2{transform:rotate(9deg) translateX(38px)}
 .list-card-info{padding:13px 11px 12px;min-height:155px}
 .list-card-overline{font-size:8px;gap:5px}
 .list-card-info h3{font-size:15px}
 .list-card-info p{font-size:10px}
 .list-detail-header{align-items:flex-start;flex-direction:column}
 .list-detail-actions{width:100%}
 .binder-shell{grid-template-columns:17px minmax(0,1fr);padding:7px 7px 8px 0}
 .binder-rings i{width:13px;height:23px;border-width:3px}
 .binder-page{padding:6px}
 .binder-grid{gap:5px}
 .binder-slot{border-radius:3px}
 .binder-slot img{width:99%;height:99%;max-width:99%;max-height:99%}
 .binder-card-caption{display:none}
 .binder-help{font-size:10px}
 .detail-enlarge img{max-height:51vh}
 .md-card-zoom-top{align-items:flex-start;padding:9px;gap:7px}
 .md-card-zoom-top strong{font-size:12px}
 .md-card-zoom-actions{gap:2px}
 .md-card-zoom-actions button{min-width:30px;height:32px;font-size:17px}
 .md-card-zoom-actions output{min-width:47px;font-size:9px}
 .md-card-zoom-stage{padding:7px}
}
@media(max-width:390px){.collection-list-grid{grid-template-columns:1fr}.list-cover{height:170px}}
@media(prefers-reduced-motion:reduce){.collection-list-card,.cover-preview,.binder-slot{transition:none}}