@import url('/collector-xp-feedback.css?v=1');
@import url('/vault-motion.css?v=1');
@import url('/badge-motion.css?v=1');
@import url('/collection-home.css?v=1');
@import url('/collection-tidy.css?v=1');
@import url('/collector-levels.css?v=3');
@import url('/browse-navigation.css?v=1');
.vault-grade{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;flex:none;vertical-align:middle;position:relative;min-width:52px;max-width:76px;isolation:isolate;}
.vault-grade .score-square.vault-medal{position:relative;display:flex;align-items:center;justify-content:center;min-width:48px;min-height:38px;width:48px;height:38px;padding:3px 6px;border-radius:6px;border:2px solid;box-shadow:inset 0 1px 1px #ffffff60,0 3px 0 #05091285;overflow:hidden;}
.vault-grade .score-digits{position:relative;z-index:2;font:900 19px/1 'DM Sans',Arial,system-ui,sans-serif!important;color:#15202a;letter-spacing:0!important;text-shadow:0 1px 0 #ffffff55;white-space:nowrap;font-variant-numeric:tabular-nums;}
.vault-grade-label{font:900 8px/1.2 'DM Sans',Arial,system-ui,sans-serif;letter-spacing:1.05px;white-space:nowrap;}
.vault-bronze .vault-medal{background:repeating-linear-gradient(135deg,#ffffff0a 0 1px,transparent 1px 5px),linear-gradient(145deg,#edbb90,#c28350 48%,#dfaa7d 70%,#ac7046);border-color:#edbf98;}
.vault-bronze .vault-grade-label{color:#e8b38c;}
.vault-silver .vault-medal{background:linear-gradient(135deg,#f4fbff,#b2c4d3 42%,#e4eef7 65%,#91a9bc);border-color:#e2f0fa;}
.vault-silver .vault-grade-label{color:#d3e2ef;}
.vault-gold .vault-medal{background:linear-gradient(135deg,#fff3b5,#dfad42 42%,#f9dc84 68%,#c8942c);border-color:#ffe69b;}
.vault-gold .vault-grade-label{color:#f5d781;}
.vault-grade.vault-diamond{min-width:72px;gap:2px;}
.vault-grade .score-square.vault-gem{width:64px;height:64px;min-width:64px;min-height:64px;border:0;border-radius:0;padding:0;background:none;box-shadow:none;overflow:visible;filter:drop-shadow(0 2px 5px #dba54a30);}
.vault-facets{position:absolute;inset:0;width:100%;height:100%;z-index:0;}
.vault-grade .vault-gem .score-digits{font-size:20px!important;margin-top:4px;color:#132c3a;text-shadow:0 1px 0 #fff9;}
.vault-crown{position:absolute;top:8px;left:0;right:0;text-align:center;z-index:2;color:#704a14;font:900 13px/1 Georgia,serif;}
.vault-diamond .vault-grade-label{color:#ffe3a0;font-size:7px;letter-spacing:.7px;}
.vault-grade:after{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;}
.vault-celebrate:after{background:radial-gradient(circle at 10% 20%,#fff8cf 0 2px,transparent 3px),radial-gradient(circle at 90% 25%,#fff 0 2px,transparent 3px),radial-gradient(circle at 85% 75%,#a6edff 0 2px,transparent 3px),radial-gradient(circle at 15% 70%,#ffd568 0 2px,transparent 3px);animation:vault-sparkle 950ms ease-out 1;}
.vault-celebrate .vault-gem{animation:vault-award 950ms ease-out 1;}
@keyframes vault-sparkle{0%{opacity:0;transform:scale(.6)}30%{opacity:1}100%{opacity:0;transform:scale(1.35)}}
@keyframes vault-award{0%,100%{filter:drop-shadow(0 2px 5px #dba54a30)}40%{filter:drop-shadow(0 0 10px #ffe3a0aa)}}
.card-foot:has(.vault-grade){flex-wrap:wrap;min-height:82px;gap:8px;}
.card-foot .rating:has(.vault-grade){white-space:normal;}
.podium-entry .vault-grade{margin-top:auto;}
.book-foot:has(.vault-grade){align-items:center;gap:8px;}
.vault-grade-key{margin:0 0 19px;padding:11px 13px;background:#152033;border:1px solid #43516a;border-radius:7px;color:#e1e9f4;font:700 11px/1.5 'DM Sans',Arial,system-ui,sans-serif;}
.vault-grade-key summary{cursor:pointer;display:list-item;font-size:12px;letter-spacing:.3px;}
.vault-grade-key summary span{color:#aabbd2;font-weight:500;margin-left:7px;}
.vault-grade-ranges{display:flex;align-items:stretch;flex-wrap:wrap;gap:8px;margin-top:12px;}
.vault-range{display:flex;flex:1 1 105px;align-items:center;justify-content:center;gap:9px;padding:10px;background:#0d1624;border:1px solid #34445d;border-radius:5px;}
.vault-range strong{font:800 12px/1.4 'DM Sans',Arial,sans-serif;font-variant-numeric:tabular-nums;color:#e4ebf5;}
.vault-range small{display:block;font-size:9px;color:#aebdd2;font-weight:500;}
#vaultGradePreview{margin-top:10px;min-height:60px;display:flex;align-items:center;}
.vault-unrated{color:#b7c2d1;font:600 12px/1.4 'DM Sans',Arial,sans-serif;}
@media(max-width:490px){.vault-grade .score-square.vault-medal{min-width:42px;width:42px;height:35px;min-height:35px;}.vault-grade .score-square.vault-gem{min-width:60px;width:60px;height:60px;min-height:60px;}.vault-grade.vault-diamond{min-width:70px;}.vault-grade .score-digits{font-size:17px!important;}.vault-grade .vault-gem .score-digits{font-size:19px!important;}.vault-grade-label{font-size:7px;}.vault-range{flex-basis:calc(50% - 8px);padding:8px 5px;}.vault-grade-key{padding:10px;}}
@media(prefers-reduced-motion:reduce){.vault-celebrate:after,.vault-celebrate .vault-gem{animation:none!important;}}

/* Shared grade borders follow the rendered score on every collection view. */
:is(.comic-card,.book,.podium-entry):has(.vault-grade.vault-bronze){border-color:#edbf98!important;border-width:2px!important;}
:is(.comic-card,.book,.podium-entry):has(.vault-grade.vault-silver){border-color:#e2f0fa!important;border-width:2px!important;}
:is(.comic-card,.book,.podium-entry):has(.vault-grade.vault-gold){border-color:#ffe69b!important;border-width:2px!important;}
:is(.comic-card,.book,.podium-entry):has(.vault-grade.vault-diamond){border-color:#d5f5ff!important;border-width:2px!important;outline:1px solid #f1c768;outline-offset:-5px;}
/* Keep keyboard focus distinct from the perfect-score gold accent. */
:is(.comic-card,.book,.podium-entry):has(.vault-grade):focus-visible{outline:3px solid #fff!important;outline-offset:3px!important;}

/* Small, consistent comic status icons; text remains accessible. */
.tag-ordered{--book-status-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%207h11v10H3zM14%2010h4l3%204v3h-7M3%2011H1M3%2014H1%22%2F%3E%3Ccircle%20cx%3D%226.5%22%20cy%3D%2218%22%20r%3D%222%22%2F%3E%3Ccircle%20cx%3D%2217.5%22%20cy%3D%2218%22%20r%3D%222%22%2F%3E%3C%2Fsvg%3E");}
.tag-owned{--book-status-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%206C9%204%205%204%202%205v14c3-1%207-1%2010%201%203-2%207-2%2010-1V5c-3-1-7-1-10%201v14M5%208h4M5%2012h4m10-3%202%202%203-4%22%2F%3E%3C%2Fsvg%3E");}
.tag-preordered{--book-status-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%2218%22%20height%3D%2216%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M7%203v4M17%203v4M3%2010h18m-9%203%201%202%202%20.3-1.5%201.4.4%202-1.9-1-1.9%201%20.4-2L9%2015.3l2-.3Z%22%2F%3E%3C%2Fsvg%3E");}
.tag-reading{--book-status-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%206C9%204%205%204%202%205v14c3-1%207-1%2010%201%203-2%207-2%2010-1V5c-3-1-7-1-10%201v14M5%208h4M5%2012h4M15%208h4M15%2012h4%22%2F%3E%3C%2Fsvg%3E");}
.tag-wanted{--book-status-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20.8%204.6a5.5%205.5%200%200%200-7.8%200L12%205.7l-1.1-1.1a5.5%205.5%200%200%200-7.8%207.8L12%2021l8.8-8.6a5.5%205.5%200%200%200%200-7.8Z%22%2F%3E%3C%2Fsvg%3E");}
.tag-unchecked{--book-status-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%2216%22%20height%3D%2216%22%20rx%3D%223%22%20stroke-dasharray%3D%223%203%22%2F%3E%3C%2Fsvg%3E");}

.cover-label,.book-status{display:inline-flex;align-items:center;gap:5px;line-height:1.2;}
.cover-label{max-width:calc(100% - 48px);}
.cover-label:before,.book-status:before{content:'';display:block;flex:none;width:16px;height:16px;background:currentColor;-webkit-mask:var(--book-status-icon) center/contain no-repeat;mask:var(--book-status-icon) center/contain no-repeat;}
.book-status{margin-top:10px;padding:5px 7px;border:1px solid currentColor;border-radius:4px;font:800 10px/1.2 'DM Sans',Arial,system-ui,sans-serif;}
.book-status.tag-owned{color:#a9efbd;background:#a9efbd12;}
.book-status.tag-ordered{color:#ffe186;background:#ffe18612;}
.book-status.tag-preordered{color:#ff92aa;background:#ff92aa12;}
.book-status.tag-reading{color:#7dcdff;background:#7dcdff12;}
.book-status.tag-wanted{color:#bca0ff;background:#bca0ff12;}
.book-status.tag-unchecked{color:#a8b6c9;}
.comic-grid.list-view .cover-label{display:inline-flex;top:6px;left:5px;padding:3px;font-size:0;gap:0;max-width:none;}
.comic-grid.list-view .cover-label:before{width:14px;height:14px;}
body[data-universe="Ratings"] .ratings-flat .cover-label{gap:3px;max-width:calc(100% - 42px);}
body[data-universe="Ratings"] .ratings-flat .cover-label:before{width:12px;height:12px;}

/* Ratings is a first-class navigation button, outside the collapsed menus. */
.universe-nav{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;flex-basis:315px;min-width:270px;}
.universe-nav>.hero-menu{grid-column:1 / -1;}
.ratings-nav-button,.navlinks a.ratings-nav-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:10px 13px;background:#ffe276;color:#171d29;border:2px solid #0b101b;border-radius:4px;box-shadow:3px 3px 0 #050913;font:900 12px/1.2 'DM Sans',Arial,system-ui,sans-serif;letter-spacing:.5px;white-space:nowrap;text-decoration:none;}
.ratings-nav-button svg{width:18px;height:18px;flex:none;fill:currentColor;}
.ratings-nav-button:hover,.navlinks a.ratings-nav-button:hover{background:#fff0af;color:#171d29;border-color:#ffe276;}
.ratings-nav-button[aria-current="page"]{background:#fff0af;border-color:#ffe276;box-shadow:0 0 0 1px #ffe276;}
.ratings-nav-button:focus-visible{outline:3px solid #fff;outline-offset:3px;}
@media(max-width:780px){.universe-nav{min-width:0;flex-basis:auto;}.ratings-nav-button{align-self:stretch;}}

/* Quiet collection tools, with primary navigation and Add Comic kept visible. */
.top-actions .backup-menu{flex:0 0 auto!important;z-index:90;}
.top-actions .backup-menu>#backupButton{width:44px;min-width:44px;min-height:44px;padding:0;font-size:24px;display:inline-flex;align-items:center;justify-content:center;}
.tools-menu-dots{font:900 26px/1 Arial,system-ui,sans-serif;letter-spacing:1px;}
.backup-pop{min-width:240px;max-width:calc(100vw - 32px);z-index:90;}
.tools-menu-heading{padding:8px 11px 6px;color:#aabbd2;font:800 10px/1.3 'DM Sans',Arial,system-ui,sans-serif;letter-spacing:1px;text-transform:uppercase;}
.backup-pop #resetBtn{border-top:1px solid #455168;margin-top:5px;border-radius:0;}
.backup-pop button:focus-visible{outline:2px solid #ffe276;outline-offset:-2px;background:#394257;}
/* Collector tools stay visible while the collection remains the focus. */
.collector-hub-link{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:10px;padding:10px 14px;border:1px solid #50627c;border-radius:8px;background:#223048;color:#edf2ff;text-decoration:none;font-weight:800;font-size:14px}.collector-hub-link small{font-size:11px;font-weight:500;color:#bdc9da}.tools-hub-link{display:block;padding:12px;color:#edf2ff;text-decoration:none;border-bottom:1px solid #3b4860}.collector-home-link{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:18px 0;padding:18px 20px;border:1px solid #52647c;border-radius:12px;background:linear-gradient(120deg,#25334b,#172130);color:#f5f7ff;text-decoration:none}.collector-home-link strong{display:block;font-size:19px}.collector-home-link small{display:block;margin-top:5px;color:#bec9d9}.rating-review-editor{grid-column:1/-1;margin-top:12px;padding-top:14px;border-top:1px solid #455269}.rating-review-editor summary{cursor:pointer;font-weight:700}.rating-review-editor label{display:block;margin-top:12px}.rating-review-editor textarea{display:block;width:100%;min-height:78px;margin-top:5px;padding:10px;color:#f6f7fa;background:#172133;border:1px solid #53627b;border-radius:7px;resize:vertical}.rating-review-editor input[type=checkbox]{width:auto}.book-status.tag-collection{background:#263c50;color:#d7efff}.tag-collection{--book-status-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M3 4h7v16H3zM10 4h7v16h-7zM17 6l4-1 3 14-4 1z'/%3E%3C/svg%3E")}
@media(max-width:600px){.collector-hub-link small{display:none}.collector-home-link{padding:14px}.collector-home-link strong{font-size:16px}.collector-home-link small{font-size:12px}}