:root {
/* Main Colors */
--color-scheme: dark;
--primary-color: #966fff;
--primary-color-dark-shade: #7b57dd;
--primary-color-darker-shade: #6443be;
--primary-color-darkest-shade: #4e329b;
--error-color: #FF5555;
--bs-body-bg: #121216;
--body-text-color: #d1d1d1;
/* Scrollbar */
--primary-color-scrollbar: rgba(140, 0, 255, 0.75);
/* Navbar */
--navbar-bg-color: #17181b;
--navbar-text-color: #d1d1d1;
--navbar-fa-icon-color: #d1d1d1;
--navbar-btn-hover-outline-color: rgba(255, 255, 255, 1);
/* Side Nav */
--side-nav-bg-color: rgba(68,71,90,.4);
--side-nav-mobile-bg-color: rgba(68,71,90,.3);
--side-nav-openclose-transition: .15s ease-in-out;
--side-nav-box-shadow: rgba(0,0,0,.5);
--side-nav-mobile-box-shadow: 3px 0em 5px 10em rgb(0 0 0 / 50%);
--side-nav-hover-text-color: #F8F8F2;
--side-nav-hover-bg-color: var(--primary-color);
--side-nav-color: #F8F8F2;
--side-nav-border-radius: 5px;
--side-nav-border: none;
--side-nav-border-closed: none;
--side-nav-border-transition: .5s ease-in-out;
--side-nav-companion-bar-transistion: .15s linear;
--side-nav-bg-color-transition: .5s ease-in-out;
--side-nav-closed-bg-color: transparent;
--side-nav-item-active-color: var(--primary-color-dark-shade);
--side-nav-item-active-text-color: #F8F8F2;
--side-nav-active-bg-color: var(--primary-color);
--side-nav-overlay-color: #414c6e;
/* Inputs */
--input-bg-color: #282A36;
--input-bg-readonly-color: rgb(94, 81, 141);
--input-focused-border-color: #ccc;
--input-text-color: #d1d1d1;
--input-placeholder-color: #aeaeae;
--input-border-color: #ccc;
--input-focus-boxshadow-color: rgb(255 255 255 / 50%);
--input-range-color: var(--primary-color);
--input-range-active-color: var(--primary-color-darker-shade);
/* Buttons */
--btn-focus-boxshadow-color: rgb(255 255 255 / 50%);
--btn-primary-text-color: #F8F8F2;
--btn-primary-bg-color: var(--primary-color);
--btn-primary-border-color: var(--primary-color);
--btn-primary-hover-text-color: #F8F8F2;
--btn-primary-hover-bg-color: var(--primary-color);
--btn-primary-hover-border-color: rgb(255 255 255 / 50%);
--btn-alt-bg-color: #343b58;
--btn-alt-border-color: #363e5c;
--btn-alt-hover-bg-color: #303753;
--btn-alt-focus-bg-color: #282e44;
--btn-alt-focus-boxshadow-color: rgb(255 255 255 / 50%);
--btn-fa-icon-color: #F8F8F2;
--btn-disabled-bg-color: #1c1d25;
--btn-disabled-text-color: #F8F8F2;
--btn-disabled-border-color: #3e4347;
/* Nav */
--nav-tab-border-color: var(--primary-color);
--nav-tab-text-color: var(--body-text-color);
--nav-tab-bg-color: var(--primary-color);
--nav-tab-hover-border-color: var(--primary-color);
--nav-tab-active-text-color: #F8F8F2;
--nav-tab-border-hover-color: transparent;
--nav-tab-hover-text-color: var(--body-text-color);
--nav-tab-hover-bg-color: var(--primary-color);
--nav-tab-border-top: var(--primary-color);
--nav-tab-border-left: var(--primary-color);
--nav-tab-border-bottom: var(--primary-color);
--nav-tab-border-right: var(--primary-color);
--nav-tab-hover-border-top: var(--primary-color);
--nav-tab-hover-border-left: var(--primary-color);
--nav-tab-hover-border-bottom: var(--bs-body-bg);
--nav-tab-hover-border-right: var(--primary-color);
--nav-tab-active-hover-bg-color: var(--primary-color);
--nav-link-bg-color: var(--primary-color);
--nav-link-active-text-color: #F8F8F2;
--nav-link-text-color: #F8F8F2;
--nav-header-text-color: #F8F8F2;
--nav-header-bg-color: RGB(68, 71, 90);
/* Toasts */
--toast-success-bg-color: rgba(80,250,123, .9);
--toast-error-bg-color: #ff5555;
--toast-info-bg-color: #8BE9FD;
--toast-warning-bg-color: #FFB86C;
/* Checkboxes */
--checkbox-checked-bg-color: var(--primary-color);
--checkbox-border-color: var(--input-focused-border-color);
--checkbox-focus-border-color: var(--primary-color);
--checkbox-focus-boxshadow-color: rgb(255 255 255 / 50%);
/* Tagbadge */
--tagbadge-border-color: rgba(239, 239, 239, .125);
--tagbadge-text-color: var(--body-text-color);
--tagbadge-bg-color: var(--nav-tab-hover-bg-color);
--tagbadge-filled-border-color: rgba(239, 239, 239, .125);
--tagbadge-filled-text-color: var(--body-text-color);
--tagbadge-filled-bg-color: var(--primary-color);
/* List items */
--list-group-item-text-color: var(--body-text-color);
--list-group-item-bg-color: #282a36;
--list-group-item-border-color: rgba(239, 239, 239, .125);
--list-group-hover-text-color: #F8F8F2;
--list-group-hover-bg-color: rgb(22, 27, 34);
--list-group-active-border-color: none;
/* Popover */
--popover-body-bg-color: var(--navbar-bg-color);
--popover-body-text-color: var(--navbar-text-color);
--popover-outerarrow-color: transparent;
--popover-arrow-color: transparent;
--popover-bg-color: black;
--popover-border-color: black;
/* Pagination */
--pagination-active-link-border-color: var(--primary-color);
--pagination-active-link-bg-color: var(--primary-color);
--pagination-active-link-text-color: #F8F8F2;
--pagination-link-border-color: rgba(68, 71, 90, .125);
--pagination-link-text-color: #F8F8F2;
--pagination-link-bg-color: rgba(1, 4, 9, .5);
--pagination-focus-border-color: var(--primary-color);
--pagination-link-hover-color: var(--primary-color);
/* Progress */
--progress-striped-animated-color: linear-gradient(45deg, rgba(132, 74, 198, 0.75) 25%, rgba(92, 51, 138, 0.75) 25%, rgba(89, 51, 138, 0.75) 50%, rgba(128, 74, 198, 0.75) 50%, rgba(132, 74, 198, 0.75) 75%, rgba(92, 51, 138, 0.75) 75%, rgba(92, 51, 138, 0.75));
--progress-bg-color: var(--nav-header-bg-color);
--progress-bar-color: var(--primary-color-dark-shade);
/* Dropdown */
--dropdown-item-hover-text-color: #F8F8F2;
--dropdown-item-hover-bg-color: var(--primary-color-dark-shade);
--dropdown-item-text-color: var(--navbar-text-color);
--dropdown-item-bg-color: var(--navbar-bg-color);
--dropdown-overlay-color: rgba(0,0,0,.5);
/* Accordion */
--accordion-header-text-color: #F8F8F2;
--accordion-header-bg-color: rgba(189, 147, 249, .8);
--accordion-body-bg-color: rgba(189, 147, 249, .50);
--accordion-body-border-color: rgba(68, 71, 90, .75);
--accordion-body-text-color: var(--body-text-color);
--accordion-header-collapsed-text-color: #F8F8F2;
--accordion-header-collapsed-bg-color: #44475a;
--accordion-button-focus-border-color: unset;
--accordion-button-focus-box-shadow: unset;
--accordion-active-body-bg-color: #44475a;
/* Breadcrumb */
--breadcrumb-bg-color: #292d32;
--breadcrumb-item-text-color: var(--body-text-color);
/* Rating star */
--ratingstar-color: #bd93f9;
--ratingstar-star-empty: #b0c4de;
--ratingstar-star-filled: var(--primary-color);
/* Global */
--hr-color: rgba(239, 239, 239, .125);
--accent-bg-color: rgba(1, 4, 9, .5);
--accent-text-color: lightgrey;
--grid-breakpoints-xs: $grid-breakpoint-xs;
--grid-breakpoints-sm: $grid-breakpoint-sm;
--grid-breakpoints-md: $grid-breakpoint-md;
--grid-breakpoints-lg: $grid-breakpoint-lg;
--grid-breakpoints-xl: $grid-breakpoint-xl;
--body-font-family: "EBGaramond", "Helvetica Neue", sans-serif;
--brand-font-family: "Spartan", sans-serif;
/* Card */
--card-bg-color: rgba(40,42,54,.5);
--card-text-color: var(--body-text-color);
--card-border-width: 2px 2px 2px 2px;
--card-border-style: solid;
--card-border-color: rgba(142, 145, 149, 0.1);
--card-progress-bar-color: var(--primary-color);
--card-overlay-bg-color: rgba(0, 0, 0, 0.1);
--card-overlay-hover-bg-color: rgba(0, 0, 0, 0.4);
/* Slider */
--slider-text-color: #F8F8F2;
/* Manga Reader */
--manga-reader-overlay-filter: blur(10px);
--manga-reader-overlay-bg-color: rgba(0,0,0,.5);
--manga-reader-overlay-text-color: #F8F8F2;
--manga-reader-bg-color: black;
--manga-reader-next-highlight-bg-color: rgba(80, 148, 250, 0.5);
--manga-reader-prev-highlight-bg-color: rgba(158, 98, 164, 0.5);
/* Radios */
--radio-accent-color: var(--primary-color);
--radio-hover-accent-color: var(--primary-color);
--radio-focus-boxshadow-color: rgb(255 255 255 / 50%);
/* Carousel */
--carousel-header-text-color: var(--body-text-color);
--carousel-header-text-decoration: none;
--carousel-hover-header-text-decoration: none;
/** Drawer */
--drawer-background-color: black;
--drawer-bg-color: #44475a;
--drawer-text-color: #F8F8F2;
/** Event Widget */
--event-widget-bg-color: rgb(1, 4, 9);
--event-widget-item-bg-color: rgb(1, 4, 9);
--event-widget-text-color: var(--body-text-color);
--event-widget-item-border-color: rgba(53, 53, 53, .5);
--event-widget-border-color: rgba(1, 4, 9, .5);
/* Search */
--search-result-text-lite-color: initial;
/* Bulk Selection */
--bulk-selection-text-color: var(--navbar-text-color);
--bulk-selection-highlight-text-color: var(--primary-color);
/* Card list */
--card-list-item-bg-color: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.15) 1%, rgba(0,0,0,0) 100%);
}
/* Otherwise Progressbar stays green, bug is reported. */
.progress-bar {
background-color: var(--primary-color) !important;
}
/* Make the Kavita fit the Theme */
.navbar-brand {
color: var(--primary-color) !important;
.logo.img-placeholder {
filter: hue-rotate(108deg);
}
}
/* >>> AFRODUCK folders: generated by _tool/design/build/apply/gen-theme.pl -- edit the generator, not this block >>> */
/* 1. Collections page: only the six top folders */
body app-all-collections .card-detail-layout-item:has(.card-item-container[aria-label*="\25B8"]) { display: none !important; }
body app-all-collections virtual-scroller .total-padding { display: none !important; }
body app-all-collections .jump-bar { display: none !important; }
body app-all-collections app-side-nav-companion-bar h5 { visibility: hidden; }
/* 2. folder pages: no placeholder folder cards (library 10); a pure folder drops its empty grid and "1 item" */
body app-collection-detail .card-detail-layout-item:has(a[href^="/library/10/series/"]) { display: none !important; }
body app-collection-detail .viewport-container:has(.card-detail-layout-item:only-child a[href^="/library/10/series/"]) { display: none !important; }
body app-collection-detail:has(.card-detail-layout-item:only-child a[href^="/library/10/series/"]) .subtitle-with-actionables { visibility: hidden; }
body app-collection-detail .jump-bar { display: none !important; }
/* 3. tiles:
then one bare per sub-folder (labels and colours below, per collection id) */
body app-collection-detail app-read-more .read-more-cont > div { max-width: none !important; display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-start; font-size: 0; }
body app-collection-detail app-read-more .read-more-cont > div > p { flex: 0 0 100%; margin: 0 0 .1rem; font-size: .85rem; }
body app-collection-detail app-read-more .read-more-cont > div > p > a { display: inline-block; padding: .2rem .75rem; border-radius: 1rem; border: 1px solid rgba(255,255,255,.22); color: inherit !important; text-decoration: none !important; }
body app-collection-detail app-read-more .read-more-cont > div > p > a::before { content: "\2191\00a0"; }
body app-collection-detail app-read-more .read-more-cont > div > p > a:hover { border-color: var(--primary-color, #966fff); }
body app-collection-detail app-read-more .read-more-cont > div > a { position: relative; display: flex; align-items: flex-end; box-sizing: border-box; width: 10rem; height: 14.19rem; padding: .6rem .7rem; border-radius: .35rem; overflow: hidden; background-color: #1c1c22; background-image: linear-gradient(160deg, rgba(150,111,255,.45), rgba(18,18,22,.92)); background-size: cover; background-position: center; box-shadow: 0 2px 8px rgba(0,0,0,.5); color: #fff !important; text-decoration: none !important; font-size: .95rem; font-weight: 600; line-height: 1.2; text-shadow: 0 1px 3px rgba(0,0,0,.85); transition: transform .12s, box-shadow .12s; }
body app-collection-detail app-read-more .read-more-cont > div > a:hover { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(0,0,0,.6), 0 0 0 2px var(--primary-color, #966fff); }
body app-collection-detail .read-more-link { display: inline-block; margin-top: .4rem; padding: .35rem .8rem; border-radius: .4rem; border: 1px solid rgba(255,255,255,.22); cursor: pointer; font-size: 0; }
body app-collection-detail .read-more-link:has(.fa-caret-down)::after { content: "Show all folders"; font-size: .85rem; }
body app-collection-detail .read-more-link:has(.fa-caret-up)::after { content: "Show fewer"; font-size: .85rem; }
body app-collection-detail a[href="collections"]::after { content: "Collections"; }
body app-collection-detail a[href="collections/33"]::after { content: "Books"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/33"] { background-image: url(/afroduck/tiles/books.webp?v=e354176c); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/33"]::after { font-size: 0; }
body app-collection-detail a[href="collections/39"]::after { content: "Light Novels"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/39"] { background-image: url(/afroduck/tiles/light-novels.webp?v=28653179); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/39"]::after { font-size: 0; }
body app-collection-detail a[href="collections/40"]::after { content: "Manga"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/40"] { background-image: url(/afroduck/tiles/manga.webp?v=76479b22); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/40"]::after { font-size: 0; }
body app-collection-detail a[href="collections/41"]::after { content: "Comics"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/41"] { background-image: url(/afroduck/tiles/comics.webp?v=57bd9465); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/41"]::after { font-size: 0; }
body app-collection-detail a[href="collections/42"]::after { content: "Manhwa"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/42"] { background-image: url(/afroduck/tiles/manhwa.webp?v=42d867c1); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/42"]::after { font-size: 0; }
body app-collection-detail a[href="collections/43"]::after { content: "Manhua"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/43"] { background-image: url(/afroduck/tiles/manhua.webp?v=b5b92c14); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/43"]::after { font-size: 0; }
body app-collection-detail a[href="collections/44"]::after { content: "Adventure"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/44"] { background-image: url(/afroduck/tiles/books--adventure.webp?v=94ec2cf6); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/44"]::after { font-size: 0; }
body app-collection-detail a[href="collections/45"]::after { content: "Classics"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/45"] { background-image: url(/afroduck/tiles/books--classics.webp?v=05b9132f); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/45"]::after { font-size: 0; }
body app-collection-detail a[href="collections/46"]::after { content: "Dark Academia"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/46"] { background-image: url(/afroduck/tiles/books--dark-academia.webp?v=61b1bda8); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/46"]::after { font-size: 0; }
body app-collection-detail a[href="collections/47"]::after { content: "Fantasy"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/47"] { background-image: url(/afroduck/tiles/books--fantasy.webp?v=2dd57924); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/47"]::after { font-size: 0; }
body app-collection-detail a[href="collections/48"]::after { content: "Historical Fiction"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/48"] { background-image: url(/afroduck/tiles/books--historical-fiction.webp?v=cc1d5993); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/48"]::after { font-size: 0; }
body app-collection-detail a[href="collections/49"]::after { content: "Horror"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/49"] { background-image: url(/afroduck/tiles/books--horror.webp?v=bccd2ebd); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/49"]::after { font-size: 0; }
body app-collection-detail a[href="collections/50"]::after { content: "Literary Fiction"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/50"] { background-image: url(/afroduck/tiles/books--literary-fiction.webp?v=597cd265); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/50"]::after { font-size: 0; }
body app-collection-detail a[href="collections/51"]::after { content: "Mystery & Crime"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/51"] { background-image: url(/afroduck/tiles/books--mystery-crime.webp?v=6a90f1c0); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/51"]::after { font-size: 0; }
body app-collection-detail a[href="collections/156"]::after { content: "Non-Fiction"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/156"] { background-image: url(/afroduck/tiles/books--non-fiction.webp?v=d7b79a88); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/156"]::after { font-size: 0; }
body app-collection-detail a[href="collections/53"]::after { content: "Romance"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/53"] { background-image: url(/afroduck/tiles/books--romance.webp?v=13bc9bab); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/53"]::after { font-size: 0; }
body app-collection-detail a[href="collections/34"]::after { content: "Science Fiction"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/34"] { background-image: url(/afroduck/tiles/books--science-fiction.webp?v=58090e84); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/34"]::after { font-size: 0; }
body app-collection-detail a[href="collections/35"]::after { content: "Warhammer"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/35"] { background-image: url(/afroduck/tiles/books--science-fiction--warhammer.webp?v=4ade52e4); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/35"]::after { font-size: 0; }
body app-collection-detail a[href="collections/54"]::after { content: "30k \B7 The Horus Heresy"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/54"] { background-image: url(/afroduck/tiles/books--science-fiction--warhammer--30k-the-horus-heresy.webp?v=b172b4c7); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/54"]::after { font-size: 0; }
body app-collection-detail a[href="collections/55"]::after { content: "Rulebooks & Lore"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/55"] { background-image: url(/afroduck/tiles/books--science-fiction--warhammer--30k-the-horus-heresy--rulebooks-lore.webp?v=4d83ca81); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/55"]::after { font-size: 0; }
body app-collection-detail a[href="collections/36"]::after { content: "40k"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/36"] { background-image: url(/afroduck/tiles/books--science-fiction--warhammer--40k.webp?v=3cfe80f9); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/36"]::after { font-size: 0; }
body app-collection-detail a[href="collections/56"]::after { content: "Adepta Sororitas"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/56"] { background-image: url(/afroduck/tiles/books--science-fiction--warhammer--40k--adepta-sororitas.webp?v=76488fe2); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/56"]::after { font-size: 0; }
body app-collection-detail a[href="collections/57"]::after { content: "Adeptus Mechanicus"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/57"] { background-image: url(/afroduck/tiles/books--science-fiction--warhammer--40k--adeptus-mechanicus.webp?v=34c98f98); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/57"]::after { font-size: 0; }
body app-collection-detail a[href="collections/58"]::after { content: "Anthologies & Collections"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/58"] { background-image: url(/afroduck/tiles/books--science-fiction--warhammer--40k--anthologies-collections.webp?v=3d3b537f); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/58"]::after { font-size: 0; }
body app-collection-detail a[href="collections/59"]::after { content: "Astra Militarum"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/59"] { background-image: url(/afroduck/tiles/books--science-fiction--warhammer--40k--astra-militarum.webp?v=c3d7052d); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/59"]::after { font-size: 0; }
body app-collection-detail a[href="collections/60"]::after { content: "Cadia"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/60"] { background-image: url(/afroduck/tiles/books--science-fiction--warhammer--40k--astra-militarum--cadia.webp?v=3c5e5ab9); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/60"]::after { font-size: 0; }
body app-collection-detail a[href="collections/61"]::after { content: "Death Korps of Krieg"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/61"] { background-image: url(/afroduck/tiles/books--science-fiction--warhammer--40k--astra-militarum--death-korps-of-krieg.webp?v=e818eeb6); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/61"]::after { font-size: 0; }
body app-collection-detail a[href="collections/62"]::after { content: "Gaunt's Ghosts & Sabbat Worlds"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/62"] { background-image: url(/afroduck/tiles/books--science-fiction--warhammer--40k--astra-militarum--gaunt-s-ghosts-sabbat-worlds.webp?v=9847ee85); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/62"]::after { font-size: 0; }
body app-collection-detail a[href="collections/63"]::after { content: "Chaos"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/63"] { background-image: url(/afroduck/tiles/books--science-fiction--warhammer--40k--chaos.webp?v=39c735b7); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/63"]::after { font-size: 0; }
body app-collection-detail a[href="collections/64"]::after { content: "Alpha Legion"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/64"] { background-image: url(/afroduck/tiles/books--science-fiction--warhammer--40k--chaos--alpha-legion.webp?v=57fcfdea); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/64"]::after { font-size: 0; }
body app-collection-detail a[href="collections/65"]::after { content: "Black Legion"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/65"] { background-image: url(/afroduck/tiles/books--science-fiction--warhammer--40k--chaos--black-legion.webp?v=99e03261); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/65"]::after { font-size: 0; }
body app-collection-detail a[href="collections/66"]::after { content: "Death Guard"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/66"] { background-image: url(/afroduck/tiles/books--science-fiction--warhammer--40k--chaos--death-guard.webp?v=c3fc247f); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/66"]::after { font-size: 0; }
body app-collection-detail a[href="collections/67"]::after { content: "Emperor's Children"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/67"] { background-image: url(/afroduck/tiles/books--science-fiction--warhammer--40k--chaos--emperor-s-children.webp?v=12503fde); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/67"]::after { font-size: 0; }
body app-collection-detail a[href="collections/68"]::after { content: "Iron Warriors"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/68"] { background-image: url(/afroduck/tiles/books--science-fiction--warhammer--40k--chaos--iron-warriors.webp?v=0fcffe72); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/68"]::after { font-size: 0; }
body app-collection-detail a[href="collections/69"]::after { content: "Night Lords"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/69"] { background-image: url(/afroduck/tiles/books--science-fiction--warhammer--40k--chaos--night-lords.webp?v=8d9b381e); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/69"]::after { font-size: 0; }
body app-collection-detail a[href="collections/70"]::after { content: "Thousand Sons"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/70"] { background-image: url(/afroduck/tiles/books--science-fiction--warhammer--40k--chaos--thousand-sons.webp?v=6b19d0ab); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/70"]::after { font-size: 0; }
body app-collection-detail a[href="collections/71"]::after { content: "Word Bearers"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/71"] { background-image: url(/afroduck/tiles/books--science-fiction--warhammer--40k--chaos--word-bearers.webp?v=40129208); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/71"]::after { font-size: 0; }
body app-collection-detail a[href="collections/72"]::after { content: "World Eaters"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/72"] { background-image: url(/afroduck/tiles/books--science-fiction--warhammer--40k--chaos--world-eaters.webp?v=4eea05e5); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/72"]::after { font-size: 0; }
body app-collection-detail a[href="collections/73"]::after { content: "Imperium"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/73"] { background-image: url(/afroduck/tiles/books--science-fiction--warhammer--40k--imperium.webp?v=cf462d12); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/73"]::after { font-size: 0; }
body app-collection-detail a[href="collections/74"]::after { content: "Inquisition"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/74"] { background-image: url(/afroduck/tiles/books--science-fiction--warhammer--40k--inquisition.webp?v=5bf35557); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/74"]::after { font-size: 0; }
body app-collection-detail a[href="collections/75"]::after { content: "Necromunda"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/75"] { background-image: url(/afroduck/tiles/books--science-fiction--warhammer--40k--necromunda.webp?v=7cdd9367); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/75"]::after { font-size: 0; }
body app-collection-detail a[href="collections/76"]::after { content: "Rulebooks & Codexes"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/76"] { background-image: url(/afroduck/tiles/books--science-fiction--warhammer--40k--rulebooks-codexes.webp?v=0dcb0507); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/76"]::after { font-size: 0; }
body app-collection-detail a[href="collections/37"]::after { content: "Space Marines"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/37"] { background-image: url(/afroduck/tiles/books--science-fiction--warhammer--40k--space-marines.webp?v=cfa88f10); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/37"]::after { font-size: 0; }
body app-collection-detail a[href="collections/77"]::after { content: "Black Templars"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/77"] { background-image: url(/afroduck/tiles/books--science-fiction--warhammer--40k--space-marines--black-templars.webp?v=f032ddf3); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/77"]::after { font-size: 0; }
body app-collection-detail a[href="collections/78"]::after { content: "Blood Angels"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/78"] { background-image: url(/afroduck/tiles/books--science-fiction--warhammer--40k--space-marines--blood-angels.webp?v=aac39a32); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/78"]::after { font-size: 0; }
body app-collection-detail a[href="collections/79"]::after { content: "Blood Ravens"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/79"] { background-image: url(/afroduck/tiles/books--science-fiction--warhammer--40k--space-marines--blood-ravens.webp?v=7cc2e710); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/79"]::after { font-size: 0; }
body app-collection-detail a[href="collections/80"]::after { content: "Carcharodons"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/80"] { background-image: url(/afroduck/tiles/books--science-fiction--warhammer--40k--space-marines--carcharodons.webp?v=c2a37b66); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/80"]::after { font-size: 0; }
body app-collection-detail a[href="collections/81"]::after { content: "Crimson Fists"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/81"] { background-image: url(/afroduck/tiles/books--science-fiction--warhammer--40k--space-marines--crimson-fists.webp?v=bfc171e8); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/81"]::after { font-size: 0; }
body app-collection-detail a[href="collections/82"]::after { content: "Dark Angels"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/82"] { background-image: url(/afroduck/tiles/books--science-fiction--warhammer--40k--space-marines--dark-angels.webp?v=18d04214); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/82"]::after { font-size: 0; }
body app-collection-detail a[href="collections/83"]::after { content: "Deathwatch"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/83"] { background-image: url(/afroduck/tiles/books--science-fiction--warhammer--40k--space-marines--deathwatch.webp?v=7ba16a83); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/83"]::after { font-size: 0; }
body app-collection-detail a[href="collections/84"]::after { content: "Flesh Tearers"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/84"] { background-image: url(/afroduck/tiles/books--science-fiction--warhammer--40k--space-marines--flesh-tearers.webp?v=2c523f4a); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/84"]::after { font-size: 0; }
body app-collection-detail a[href="collections/85"]::after { content: "Grey Knights"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/85"] { background-image: url(/afroduck/tiles/books--science-fiction--warhammer--40k--space-marines--grey-knights.webp?v=5c36a839); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/85"]::after { font-size: 0; }
body app-collection-detail a[href="collections/86"]::after { content: "Imperial Fists"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/86"] { background-image: url(/afroduck/tiles/books--science-fiction--warhammer--40k--space-marines--imperial-fists.webp?v=b4692bf5); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/86"]::after { font-size: 0; }
body app-collection-detail a[href="collections/87"]::after { content: "Iron Hands"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/87"] { background-image: url(/afroduck/tiles/books--science-fiction--warhammer--40k--space-marines--iron-hands.webp?v=82e73dcf); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/87"]::after { font-size: 0; }
body app-collection-detail a[href="collections/88"]::after { content: "Other Chapters"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/88"] { background-image: url(/afroduck/tiles/books--science-fiction--warhammer--40k--space-marines--other-chapters.webp?v=f229dc47); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/88"]::after { font-size: 0; }
body app-collection-detail a[href="collections/89"]::after { content: "Raven Guard"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/89"] { background-image: url(/afroduck/tiles/books--science-fiction--warhammer--40k--space-marines--raven-guard.webp?v=51a3f908); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/89"]::after { font-size: 0; }
body app-collection-detail a[href="collections/90"]::after { content: "Salamanders"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/90"] { background-image: url(/afroduck/tiles/books--science-fiction--warhammer--40k--space-marines--salamanders.webp?v=cd2c4e22); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/90"]::after { font-size: 0; }
body app-collection-detail a[href="collections/91"]::after { content: "Scythes of the Emperor"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/91"] { background-image: url(/afroduck/tiles/books--science-fiction--warhammer--40k--space-marines--scythes-of-the-emperor.webp?v=34832d62); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/91"]::after { font-size: 0; }
body app-collection-detail a[href="collections/92"]::after { content: "Silver Skulls"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/92"] { background-image: url(/afroduck/tiles/books--science-fiction--warhammer--40k--space-marines--silver-skulls.webp?v=3ccdaf42); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/92"]::after { font-size: 0; }
body app-collection-detail a[href="collections/93"]::after { content: "Soul Drinkers"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/93"] { background-image: url(/afroduck/tiles/books--science-fiction--warhammer--40k--space-marines--soul-drinkers.webp?v=80faa092); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/93"]::after { font-size: 0; }
body app-collection-detail a[href="collections/38"]::after { content: "Space Wolves"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/38"] { background-image: url(/afroduck/tiles/books--science-fiction--warhammer--40k--space-marines--space-wolves.webp?v=edf45b7b); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/38"]::after { font-size: 0; }
body app-collection-detail a[href="collections/94"]::after { content: "Ultramarines"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/94"] { background-image: url(/afroduck/tiles/books--science-fiction--warhammer--40k--space-marines--ultramarines.webp?v=2698f80f); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/94"]::after { font-size: 0; }
body app-collection-detail a[href="collections/95"]::after { content: "White Scars"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/95"] { background-image: url(/afroduck/tiles/books--science-fiction--warhammer--40k--space-marines--white-scars.webp?v=ad5b78cc); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/95"]::after { font-size: 0; }
body app-collection-detail a[href="collections/96"]::after { content: "Warzones & Events"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/96"] { background-image: url(/afroduck/tiles/books--science-fiction--warhammer--40k--warzones-events.webp?v=0dca27d6); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/96"]::after { font-size: 0; }
body app-collection-detail a[href="collections/97"]::after { content: "Xenos"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/97"] { background-image: url(/afroduck/tiles/books--science-fiction--warhammer--40k--xenos.webp?v=6ff21067); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/97"]::after { font-size: 0; }
body app-collection-detail a[href="collections/98"]::after { content: "Aeldari"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/98"] { background-image: url(/afroduck/tiles/books--science-fiction--warhammer--40k--xenos--aeldari.webp?v=e620d396); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/98"]::after { font-size: 0; }
body app-collection-detail a[href="collections/99"]::after { content: "Drukhari"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/99"] { background-image: url(/afroduck/tiles/books--science-fiction--warhammer--40k--xenos--drukhari.webp?v=6ef27f5d); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/99"]::after { font-size: 0; }
body app-collection-detail a[href="collections/100"]::after { content: "Necrons"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/100"] { background-image: url(/afroduck/tiles/books--science-fiction--warhammer--40k--xenos--necrons.webp?v=370b97f9); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/100"]::after { font-size: 0; }
body app-collection-detail a[href="collections/101"]::after { content: "Orks"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/101"] { background-image: url(/afroduck/tiles/books--science-fiction--warhammer--40k--xenos--orks.webp?v=e8c8fa67); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/101"]::after { font-size: 0; }
body app-collection-detail a[href="collections/102"]::after { content: "T'au"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/102"] { background-image: url(/afroduck/tiles/books--science-fiction--warhammer--40k--xenos--t-au.webp?v=ab4ef40e); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/102"]::after { font-size: 0; }
body app-collection-detail a[href="collections/103"]::after { content: "Tyranids"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/103"] { background-image: url(/afroduck/tiles/books--science-fiction--warhammer--40k--xenos--tyranids.webp?v=abfc1b59); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/103"]::after { font-size: 0; }
body app-collection-detail a[href="collections/104"]::after { content: "Age of Sigmar"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/104"] { background-image: url(/afroduck/tiles/books--science-fiction--warhammer--age-of-sigmar.webp?v=4ec27d32); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/104"]::after { font-size: 0; }
body app-collection-detail a[href="collections/105"]::after { content: "Realmgate Wars"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/105"] { background-image: url(/afroduck/tiles/books--science-fiction--warhammer--age-of-sigmar--realmgate-wars.webp?v=aed9d2b8); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/105"]::after { font-size: 0; }
body app-collection-detail a[href="collections/106"]::after { content: "Rulebooks & Lore"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/106"] { background-image: url(/afroduck/tiles/books--science-fiction--warhammer--age-of-sigmar--rulebooks-lore.webp?v=ed0fb217); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/106"]::after { font-size: 0; }
body app-collection-detail a[href="collections/107"]::after { content: "The Old World"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/107"] { background-image: url(/afroduck/tiles/books--science-fiction--warhammer--age-of-sigmar--the-old-world.webp?v=4f471c34); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/107"]::after { font-size: 0; }
body app-collection-detail a[href="collections/108"]::after { content: "Blood Bowl"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/108"] { background-image: url(/afroduck/tiles/books--science-fiction--warhammer--age-of-sigmar--the-old-world--blood-bowl.webp?v=fd304a9f); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/108"]::after { font-size: 0; }
body app-collection-detail a[href="collections/109"]::after { content: "Gotrek & Felix"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/109"] { background-image: url(/afroduck/tiles/books--science-fiction--warhammer--age-of-sigmar--the-old-world--gotrek-felix.webp?v=57460745); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/109"]::after { font-size: 0; }
body app-collection-detail a[href="collections/110"]::after { content: "Time of Legends"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/110"] { background-image: url(/afroduck/tiles/books--science-fiction--warhammer--age-of-sigmar--the-old-world--time-of-legends.webp?v=484db06b); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/110"]::after { font-size: 0; }
body app-collection-detail a[href="collections/111"]::after { content: "Crime & Horror"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/111"] { background-image: url(/afroduck/tiles/books--science-fiction--warhammer--crime-horror.webp?v=c29f89a5); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/111"]::after { font-size: 0; }
body app-collection-detail a[href="collections/112"]::after { content: "Warhammer Crime"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/112"] { background-image: url(/afroduck/tiles/books--science-fiction--warhammer--crime-horror--warhammer-crime.webp?v=95233c7b); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/112"]::after { font-size: 0; }
body app-collection-detail a[href="collections/113"]::after { content: "Warhammer Horror"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/113"] { background-image: url(/afroduck/tiles/books--science-fiction--warhammer--crime-horror--warhammer-horror.webp?v=b933ea9b); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/113"]::after { font-size: 0; }
body app-collection-detail a[href="collections/157"]::after { content: "Thriller"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/157"] { background-image: url(/afroduck/tiles/books--thriller.webp?v=9788b31a); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/157"]::after { font-size: 0; }
body app-collection-detail a[href="collections/115"]::after { content: "Young Adult & Children's"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/115"] { background-image: url(/afroduck/tiles/books--young-adult-children-s.webp?v=46814347); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/115"]::after { font-size: 0; }
body app-collection-detail a[href="collections/116"]::after { content: "Adventure"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/116"] { background-image: url(/afroduck/tiles/comics--adventure.webp?v=6b9662b4); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/116"]::after { font-size: 0; }
body app-collection-detail a[href="collections/117"]::after { content: "Crime & Noir"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/117"] { background-image: url(/afroduck/tiles/comics--crime-noir.webp?v=3fa3a9ab); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/117"]::after { font-size: 0; }
body app-collection-detail a[href="collections/118"]::after { content: "Fantasy"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/118"] { background-image: url(/afroduck/tiles/comics--fantasy.webp?v=8b607588); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/118"]::after { font-size: 0; }
body app-collection-detail a[href="collections/119"]::after { content: "Horror"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/119"] { background-image: url(/afroduck/tiles/comics--horror.webp?v=0e7b62eb); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/119"]::after { font-size: 0; }
body app-collection-detail a[href="collections/120"]::after { content: "Science Fiction"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/120"] { background-image: url(/afroduck/tiles/comics--science-fiction.webp?v=e9da668c); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/120"]::after { font-size: 0; }
body app-collection-detail a[href="collections/121"]::after { content: "Warhammer"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/121"] { background-image: url(/afroduck/tiles/comics--science-fiction--warhammer.webp?v=55349ec7); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/121"]::after { font-size: 0; }
body app-collection-detail a[href="collections/122"]::after { content: "30k \B7 The Horus Heresy"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/122"] { background-image: url(/afroduck/tiles/comics--science-fiction--warhammer--30k-the-horus-heresy.webp?v=e6fe8da1); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/122"]::after { font-size: 0; }
body app-collection-detail a[href="collections/123"]::after { content: "40k"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/123"] { background-image: url(/afroduck/tiles/comics--science-fiction--warhammer--40k.webp?v=18590843); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/123"]::after { font-size: 0; }
body app-collection-detail a[href="collections/124"]::after { content: "Superhero"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/124"] { background-image: url(/afroduck/tiles/comics--superhero.webp?v=9ab7e81d); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/124"]::after { font-size: 0; }
body app-collection-detail a[href="collections/125"]::after { content: "Action & Adventure"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/125"] { background-image: url(/afroduck/tiles/light-novels--action-adventure.webp?v=09c0086e); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/125"]::after { font-size: 0; }
body app-collection-detail a[href="collections/126"]::after { content: "Comedy"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/126"] { background-image: url(/afroduck/tiles/light-novels--comedy.webp?v=8ad4959f); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/126"]::after { font-size: 0; }
body app-collection-detail a[href="collections/127"]::after { content: "Fantasy"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/127"] { background-image: url(/afroduck/tiles/light-novels--fantasy.webp?v=5472cf2a); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/127"]::after { font-size: 0; }
body app-collection-detail a[href="collections/128"]::after { content: "Isekai"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/128"] { background-image: url(/afroduck/tiles/light-novels--isekai.webp?v=fbe21bd9); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/128"]::after { font-size: 0; }
body app-collection-detail a[href="collections/129"]::after { content: "Mystery & Horror"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/129"] { background-image: url(/afroduck/tiles/light-novels--mystery-horror.webp?v=94deef8f); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/129"]::after { font-size: 0; }
body app-collection-detail a[href="collections/130"]::after { content: "Romance"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/130"] { background-image: url(/afroduck/tiles/light-novels--romance.webp?v=3261686f); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/130"]::after { font-size: 0; }
body app-collection-detail a[href="collections/131"]::after { content: "Science Fiction"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/131"] { background-image: url(/afroduck/tiles/light-novels--science-fiction.webp?v=337acbc5); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/131"]::after { font-size: 0; }
body app-collection-detail a[href="collections/132"]::after { content: "Slice of Life"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/132"] { background-image: url(/afroduck/tiles/light-novels--slice-of-life.webp?v=4e41985f); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/132"]::after { font-size: 0; }
body app-collection-detail a[href="collections/133"]::after { content: "Action & Adventure"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/133"] { background-image: url(/afroduck/tiles/manga--action-adventure.webp?v=ac45b1c6); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/133"]::after { font-size: 0; }
body app-collection-detail a[href="collections/134"]::after { content: "Comedy"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/134"] { background-image: url(/afroduck/tiles/manga--comedy.webp?v=fa16ab54); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/134"]::after { font-size: 0; }
body app-collection-detail a[href="collections/135"]::after { content: "Fantasy"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/135"] { background-image: url(/afroduck/tiles/manga--fantasy.webp?v=e95ffb26); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/135"]::after { font-size: 0; }
body app-collection-detail a[href="collections/136"]::after { content: "Horror"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/136"] { background-image: url(/afroduck/tiles/manga--horror.webp?v=ac87d24c); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/136"]::after { font-size: 0; }
body app-collection-detail a[href="collections/137"]::after { content: "Isekai"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/137"] { background-image: url(/afroduck/tiles/manga--isekai.webp?v=b8e16e9b); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/137"]::after { font-size: 0; }
body app-collection-detail a[href="collections/138"]::after { content: "Mystery & Suspense"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/138"] { background-image: url(/afroduck/tiles/manga--mystery-suspense.webp?v=a271bdf7); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/138"]::after { font-size: 0; }
body app-collection-detail a[href="collections/139"]::after { content: "Romance"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/139"] { background-image: url(/afroduck/tiles/manga--romance.webp?v=41947b4a); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/139"]::after { font-size: 0; }
body app-collection-detail a[href="collections/140"]::after { content: "Science Fiction"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/140"] { background-image: url(/afroduck/tiles/manga--science-fiction.webp?v=830b8fb6); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/140"]::after { font-size: 0; }
body app-collection-detail a[href="collections/141"]::after { content: "Slice of Life"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/141"] { background-image: url(/afroduck/tiles/manga--slice-of-life.webp?v=a94da4e3); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/141"]::after { font-size: 0; }
body app-collection-detail a[href="collections/142"]::after { content: "Sports"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/142"] { background-image: url(/afroduck/tiles/manga--sports.webp?v=01b9fabd); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/142"]::after { font-size: 0; }
body app-collection-detail a[href="collections/143"]::after { content: "Action & Adventure"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/143"] { background-image: url(/afroduck/tiles/manhwa--action-adventure.webp?v=5747dc9c); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/143"]::after { font-size: 0; }
body app-collection-detail a[href="collections/144"]::after { content: "Fantasy"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/144"] { background-image: url(/afroduck/tiles/manhwa--fantasy.webp?v=b1a91d76); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/144"]::after { font-size: 0; }
body app-collection-detail a[href="collections/145"]::after { content: "Murim (Martial Arts)"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/145"] { background-image: url(/afroduck/tiles/manhwa--murim-martial-arts.webp?v=0474def6); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/145"]::after { font-size: 0; }
body app-collection-detail a[href="collections/146"]::after { content: "Regression & Reincarnation"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/146"] { background-image: url(/afroduck/tiles/manhwa--regression-reincarnation.webp?v=25cdfbe0); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/146"]::after { font-size: 0; }
body app-collection-detail a[href="collections/147"]::after { content: "Romance"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/147"] { background-image: url(/afroduck/tiles/manhwa--romance.webp?v=4a98d061); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/147"]::after { font-size: 0; }
body app-collection-detail a[href="collections/148"]::after { content: "Horror & Thriller"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/148"] { background-image: url(/afroduck/tiles/manhwa--horror-thriller.webp?v=97260fe3); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/148"]::after { font-size: 0; }
body app-collection-detail a[href="collections/149"]::after { content: "Drama & Slice of Life"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/149"] { background-image: url(/afroduck/tiles/manhwa--drama-slice-of-life.webp?v=83d7e666); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/149"]::after { font-size: 0; }
body app-collection-detail a[href="collections/150"]::after { content: "Action & Adventure"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/150"] { background-image: url(/afroduck/tiles/manhua--action-adventure.webp?v=b66dbfe4); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/150"]::after { font-size: 0; }
body app-collection-detail a[href="collections/151"]::after { content: "Cultivation (Xianxia & Xuanhuan)"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/151"] { background-image: url(/afroduck/tiles/manhua--cultivation-xianxia-xuanhuan.webp?v=aa446cc5); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/151"]::after { font-size: 0; }
body app-collection-detail a[href="collections/152"]::after { content: "Martial Arts (Wuxia)"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/152"] { background-image: url(/afroduck/tiles/manhua--martial-arts-wuxia.webp?v=5d4ff96b); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/152"]::after { font-size: 0; }
body app-collection-detail a[href="collections/153"]::after { content: "Fantasy"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/153"] { background-image: url(/afroduck/tiles/manhua--fantasy.webp?v=d3bf8a66); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/153"]::after { font-size: 0; }
body app-collection-detail a[href="collections/154"]::after { content: "Romance"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/154"] { background-image: url(/afroduck/tiles/manhua--romance.webp?v=cffebedd); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/154"]::after { font-size: 0; }
body app-collection-detail a[href="collections/155"]::after { content: "Reincarnation & Transmigration"; }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/155"] { background-image: url(/afroduck/tiles/manhua--reincarnation-transmigration.webp?v=78b3bebf); }
body app-collection-detail app-read-more .read-more-cont > div > a[href="collections/155"]::after { font-size: 0; }
/* 4. Reading Orders: the universes only on /lists; folder pages are tiles (apply-orders.pl) */
body app-reading-lists virtual-scroller .total-padding { display: none !important; }
body app-reading-lists .jump-bar { display: none !important; }
body app-reading-lists app-side-nav-companion-bar h5 { visibility: hidden; }
body app-reading-list-detail:has(.read-more-cont > div > a[href^="lists/"]) .info-container .mt-3.mb-3, body app-reading-list-detail:has(.read-more-cont > div > a[href^="lists/"]) .upper-details, body app-reading-list-detail:has(.read-more-cont > div > a[href^="lists/"]) .carousel-tabs-container, body app-reading-list-detail:has(.read-more-cont > div > a[href^="lists/"]) .carousel-tabs-container ~ div { display: none !important; }
body app-reading-list-detail:has(.read-more-cont > div > a[href^="lists/"]) .info-container > .image-container { pointer-events: none; }
body app-reading-list-detail:has(.read-more-cont > div > a[href^="lists/"]) .info-container app-read-more .read-more-cont { max-width: none !important; }
body app-reading-list-detail app-read-more .read-more-cont > div:has(> a[href^="lists/"]) { max-width: none !important; display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-start; font-size: 0; }
body app-reading-list-detail app-read-more .read-more-cont > div > p:first-child:has(> a[href^="lists"]) { flex: 0 0 100%; margin: 0 0 .6rem; font-size: .85rem; }
body app-reading-list-detail app-read-more .read-more-cont > div > p > a[href^="lists"] { display: inline-block; padding: .2rem .75rem; border-radius: 1rem; border: 1px solid rgba(255,255,255,.22); color: inherit !important; text-decoration: none !important; }
body app-reading-list-detail app-read-more .read-more-cont > div > p > a[href^="lists"]::before { content: "\2191\00a0"; }
body app-reading-list-detail app-read-more .read-more-cont > div > p > a[href^="lists"]:hover { border-color: var(--primary-color, #966fff); }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href^="lists/"] { position: relative; display: flex; align-items: flex-end; box-sizing: border-box; width: 10rem; height: 14.19rem; padding: .6rem .7rem; border-radius: .35rem; overflow: hidden; background-color: #1c1c22; background-image: linear-gradient(160deg, rgba(150,111,255,.45), rgba(18,18,22,.92)); background-size: cover; background-position: center; box-shadow: 0 2px 8px rgba(0,0,0,.5); color: #fff !important; text-decoration: none !important; font-size: .95rem; font-weight: 600; line-height: 1.2; text-shadow: 0 1px 3px rgba(0,0,0,.85); transition: transform .12s, box-shadow .12s; }
body app-reading-list-detail:has(.read-more-cont > div > a[href^="lists/"]) .read-more-link { display: inline-block; margin-top: .4rem; padding: .35rem .8rem; border-radius: .4rem; border: 1px solid rgba(255,255,255,.22); cursor: pointer; font-size: 0; }
body app-reading-list-detail:has(.read-more-cont > div > a[href^="lists/"]) .read-more-link:has(.fa-caret-down)::after { content: "Show all"; font-size: .85rem; }
body app-reading-list-detail:has(.read-more-cont > div > a[href^="lists/"]) .read-more-link:has(.fa-caret-up)::after { content: "Show fewer"; font-size: .85rem; }
body app-reading-list-detail a[href="lists"]::after { content: "Reading Orders"; }
body app-reading-lists .card-detail-layout-item:has(a.title-link[href="/lists/73"]),
body app-reading-lists .card-detail-layout-item:has(a.title-link[href="/lists/74"]),
body app-reading-lists .card-detail-layout-item:has(a.title-link[href="/lists/75"]),
body app-reading-lists .card-detail-layout-item:has(a.title-link[href="/lists/76"]),
body app-reading-lists .card-detail-layout-item:has(a.title-link[href="/lists/77"]),
body app-reading-lists .card-detail-layout-item:has(a.title-link[href="/lists/78"]),
body app-reading-lists .card-detail-layout-item:has(a.title-link[href="/lists/79"]),
body app-reading-lists .card-detail-layout-item:has(a.title-link[href="/lists/48"]),
body app-reading-lists .card-detail-layout-item:has(a.title-link[href="/lists/58"]),
body app-reading-lists .card-detail-layout-item:has(a.title-link[href="/lists/49"]),
body app-reading-lists .card-detail-layout-item:has(a.title-link[href="/lists/55"]),
body app-reading-lists .card-detail-layout-item:has(a.title-link[href="/lists/56"]),
body app-reading-lists .card-detail-layout-item:has(a.title-link[href="/lists/57"]),
body app-reading-lists .card-detail-layout-item:has(a.title-link[href="/lists/65"]),
body app-reading-lists .card-detail-layout-item:has(a.title-link[href="/lists/64"]),
body app-reading-lists .card-detail-layout-item:has(a.title-link[href="/lists/63"]),
body app-reading-lists .card-detail-layout-item:has(a.title-link[href="/lists/60"]),
body app-reading-lists .card-detail-layout-item:has(a.title-link[href="/lists/59"]),
body app-reading-lists .card-detail-layout-item:has(a.title-link[href="/lists/52"]),
body app-reading-lists .card-detail-layout-item:has(a.title-link[href="/lists/50"]),
body app-reading-lists .card-detail-layout-item:has(a.title-link[href="/lists/53"]),
body app-reading-lists .card-detail-layout-item:has(a.title-link[href="/lists/54"]),
body app-reading-lists .card-detail-layout-item:has(a.title-link[href="/lists/51"]),
body app-reading-lists .card-detail-layout-item:has(a.title-link[href="/lists/1"]),
body app-reading-lists .card-detail-layout-item:has(a.title-link[href="/lists/47"]),
body app-reading-lists .card-detail-layout-item:has(a.title-link[href="/lists/2"]),
body app-reading-lists .card-detail-layout-item:has(a.title-link[href="/lists/3"]),
body app-reading-lists .card-detail-layout-item:has(a.title-link[href="/lists/15"]),
body app-reading-lists .card-detail-layout-item:has(a.title-link[href="/lists/16"]),
body app-reading-lists .card-detail-layout-item:has(a.title-link[href="/lists/17"]),
body app-reading-lists .card-detail-layout-item:has(a.title-link[href="/lists/38"]),
body app-reading-lists .card-detail-layout-item:has(a.title-link[href="/lists/4"]),
body app-reading-lists .card-detail-layout-item:has(a.title-link[href="/lists/5"]),
body app-reading-lists .card-detail-layout-item:has(a.title-link[href="/lists/6"]),
body app-reading-lists .card-detail-layout-item:has(a.title-link[href="/lists/7"]),
body app-reading-lists .card-detail-layout-item:has(a.title-link[href="/lists/8"]),
body app-reading-lists .card-detail-layout-item:has(a.title-link[href="/lists/9"]),
body app-reading-lists .card-detail-layout-item:has(a.title-link[href="/lists/10"]),
body app-reading-lists .card-detail-layout-item:has(a.title-link[href="/lists/11"]),
body app-reading-lists .card-detail-layout-item:has(a.title-link[href="/lists/12"]),
body app-reading-lists .card-detail-layout-item:has(a.title-link[href="/lists/13"]),
body app-reading-lists .card-detail-layout-item:has(a.title-link[href="/lists/14"]),
body app-reading-lists .card-detail-layout-item:has(a.title-link[href="/lists/18"]),
body app-reading-lists .card-detail-layout-item:has(a.title-link[href="/lists/19"]),
body app-reading-lists .card-detail-layout-item:has(a.title-link[href="/lists/20"]),
body app-reading-lists .card-detail-layout-item:has(a.title-link[href="/lists/21"]),
body app-reading-lists .card-detail-layout-item:has(a.title-link[href="/lists/22"]),
body app-reading-lists .card-detail-layout-item:has(a.title-link[href="/lists/23"]),
body app-reading-lists .card-detail-layout-item:has(a.title-link[href="/lists/24"]),
body app-reading-lists .card-detail-layout-item:has(a.title-link[href="/lists/25"]),
body app-reading-lists .card-detail-layout-item:has(a.title-link[href="/lists/26"]),
body app-reading-lists .card-detail-layout-item:has(a.title-link[href="/lists/27"]),
body app-reading-lists .card-detail-layout-item:has(a.title-link[href="/lists/28"]),
body app-reading-lists .card-detail-layout-item:has(a.title-link[href="/lists/29"]),
body app-reading-lists .card-detail-layout-item:has(a.title-link[href="/lists/30"]),
body app-reading-lists .card-detail-layout-item:has(a.title-link[href="/lists/31"]),
body app-reading-lists .card-detail-layout-item:has(a.title-link[href="/lists/32"]),
body app-reading-lists .card-detail-layout-item:has(a.title-link[href="/lists/33"]),
body app-reading-lists .card-detail-layout-item:has(a.title-link[href="/lists/34"]),
body app-reading-lists .card-detail-layout-item:has(a.title-link[href="/lists/35"]),
body app-reading-lists .card-detail-layout-item:has(a.title-link[href="/lists/36"]),
body app-reading-lists .card-detail-layout-item:has(a.title-link[href="/lists/37"]),
body app-reading-lists .card-detail-layout-item:has(a.title-link[href="/lists/39"]),
body app-reading-lists .card-detail-layout-item:has(a.title-link[href="/lists/40"]),
body app-reading-lists .card-detail-layout-item:has(a.title-link[href="/lists/41"]),
body app-reading-lists .card-detail-layout-item:has(a.title-link[href="/lists/42"]),
body app-reading-lists .card-detail-layout-item:has(a.title-link[href="/lists/43"]),
body app-reading-lists .card-detail-layout-item:has(a.title-link[href="/lists/44"]),
body app-reading-lists .card-detail-layout-item:has(a.title-link[href="/lists/45"]),
body app-reading-lists .card-detail-layout-item:has(a.title-link[href="/lists/46"]) { display: none !important; }
body app-reading-list-detail a[href="lists/67"]::after { content: "Cosmere"; }
body app-reading-lists .reading-list-card:has(a.title-link[href="/lists/67"]) .summary-text { font-size: 0 !important; }
body app-reading-lists .reading-list-card:has(a.title-link[href="/lists/67"]) .summary-text::before { content: "Brandon Sanderson's shared universe. Read the whole Cosmere in order, or Mistborn and The Stormlight Archive on their own."; font-size: .9rem; }
body app-reading-lists .reading-list-card:has(a.title-link[href="/lists/67"]) .meta-line { font-size: 0 !important; }
body app-reading-lists .reading-list-card:has(a.title-link[href="/lists/67"]) .meta-line::before { content: "3 reading orders"; font-size: .8rem; }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/67"] { background-image: url(/afroduck/tiles/rl-folder--cosmere.webp?v=474d6537); }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/67"]::after { font-size: 0; }
body app-reading-list-detail a[href="lists/68"]::after { content: "David Gemmell"; }
body app-reading-lists .reading-list-card:has(a.title-link[href="/lists/68"]) .summary-text { font-size: 0 !important; }
body app-reading-lists .reading-list-card:has(a.title-link[href="/lists/68"]) .summary-text::before { content: "David Gemmell's heroic fantasy: the Drenai saga in story order, and the Sipstrassi tales linked by the stones of power."; font-size: .9rem; }
body app-reading-lists .reading-list-card:has(a.title-link[href="/lists/68"]) .meta-line { font-size: 0 !important; }
body app-reading-lists .reading-list-card:has(a.title-link[href="/lists/68"]) .meta-line::before { content: "3 reading orders"; font-size: .8rem; }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/68"] { background-image: url(/afroduck/tiles/rl-folder--david-gemmell.webp?v=4188195e); }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/68"]::after { font-size: 0; }
body app-reading-list-detail a[href="lists/69"]::after { content: "Eternal Champion"; }
body app-reading-lists .reading-list-card:has(a.title-link[href="/lists/69"]) .summary-text { font-size: 0 !important; }
body app-reading-lists .reading-list-card:has(a.title-link[href="/lists/69"]) .summary-text::before { content: "Michael Moorcock's multiverse of the Eternal Champion: Elric, Corum, Hawkmoon, Erekos\EB , von Bek and Jerry Cornelius."; font-size: .9rem; }
body app-reading-lists .reading-list-card:has(a.title-link[href="/lists/69"]) .meta-line { font-size: 0 !important; }
body app-reading-lists .reading-list-card:has(a.title-link[href="/lists/69"]) .meta-line::before { content: "3 reading orders"; font-size: .8rem; }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/69"] { background-image: url(/afroduck/tiles/rl-folder--eternal-champion.webp?v=c3afae30); }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/69"]::after { font-size: 0; }
body app-reading-list-detail a[href="lists/70"]::after { content: "Malazan"; }
body app-reading-lists .reading-list-card:has(a.title-link[href="/lists/70"]) .summary-text { font-size: 0 !important; }
body app-reading-lists .reading-list-card:has(a.title-link[href="/lists/70"]) .summary-text::before { content: "Steven Erikson's Malazan Book of the Fallen, its novellas and its prequel, in publication or story order."; font-size: .9rem; }
body app-reading-lists .reading-list-card:has(a.title-link[href="/lists/70"]) .meta-line { font-size: 0 !important; }
body app-reading-lists .reading-list-card:has(a.title-link[href="/lists/70"]) .meta-line::before { content: "2 reading orders"; font-size: .8rem; }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/70"] { background-image: url(/afroduck/tiles/rl-folder--malazan.webp?v=65bc89ce); }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/70"]::after { font-size: 0; }
body app-reading-list-detail a[href="lists/71"]::after { content: "Stephen King"; }
body app-reading-lists .reading-list-card:has(a.title-link[href="/lists/71"]) .summary-text { font-size: 0 !important; }
body app-reading-lists .reading-list-card:has(a.title-link[href="/lists/71"]) .summary-text::before { content: "Stephen King's connected universe: the Dark Tower and everything tied to it, plus Castle Rock, Derry and Jerusalem's Lot."; font-size: .9rem; }
body app-reading-lists .reading-list-card:has(a.title-link[href="/lists/71"]) .meta-line { font-size: 0 !important; }
body app-reading-lists .reading-list-card:has(a.title-link[href="/lists/71"]) .meta-line::before { content: "5 reading orders"; font-size: .8rem; }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/71"] { background-image: url(/afroduck/tiles/rl-folder--stephen-king.webp?v=02a7ea38); }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/71"]::after { font-size: 0; }
body app-reading-list-detail a[href="lists/72"]::after { content: "Warhammer"; }
body app-reading-lists .reading-list-card:has(a.title-link[href="/lists/72"]) .summary-text { font-size: 0 !important; }
body app-reading-lists .reading-list-card:has(a.title-link[href="/lists/72"]) .summary-text::before { content: "Games Workshop's universes: the Horus Heresy, the 41st millennium, the Old World and the Mortal Realms, faction by faction."; font-size: .9rem; }
body app-reading-lists .reading-list-card:has(a.title-link[href="/lists/72"]) .meta-line { font-size: 0 !important; }
body app-reading-lists .reading-list-card:has(a.title-link[href="/lists/72"]) .meta-line::before { content: "47 reading orders"; font-size: .8rem; }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/72"] { background-image: url(/afroduck/tiles/rl-folder--warhammer.webp?v=e4a8063a); }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/72"]::after { font-size: 0; }
body app-reading-list-detail a[href="lists/73"]::after { content: "Sipstrassi Tales"; }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/73"] { background-image: url(/afroduck/tiles/rl-folder--david-gemmell--sipstrassi-tales.webp?v=2c0dfd5a); }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/73"]::after { font-size: 0; }
body app-reading-list-detail a[href="lists/74"]::after { content: "40k"; }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/74"] { background-image: url(/afroduck/tiles/rl-folder--warhammer--40k.webp?v=a14c6210); }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/74"]::after { font-size: 0; }
body app-reading-list-detail a[href="lists/75"]::after { content: "Age of Sigmar"; }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/75"] { background-image: url(/afroduck/tiles/rl-folder--warhammer--age-of-sigmar.webp?v=00a8c259); }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/75"]::after { font-size: 0; }
body app-reading-list-detail a[href="lists/76"]::after { content: "Astra Militarum"; }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/76"] { background-image: url(/afroduck/tiles/rl-folder--warhammer--40k--astra-militarum.webp?v=ae851fb4); }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/76"]::after { font-size: 0; }
body app-reading-list-detail a[href="lists/77"]::after { content: "Chaos"; }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/77"] { background-image: url(/afroduck/tiles/rl-folder--warhammer--40k--chaos.webp?v=20ea44b6); }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/77"]::after { font-size: 0; }
body app-reading-list-detail a[href="lists/78"]::after { content: "Space Marines"; }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/78"] { background-image: url(/afroduck/tiles/rl-folder--warhammer--40k--space-marines.webp?v=bb8dc1ac); }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/78"]::after { font-size: 0; }
body app-reading-list-detail a[href="lists/79"]::after { content: "Xenos"; }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/79"] { background-image: url(/afroduck/tiles/rl-folder--warhammer--40k--xenos.webp?v=e83f64c7); }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/79"]::after { font-size: 0; }
body app-reading-list-detail a[href="lists/61"]::after { content: "Solar Cycle"; }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/61"] { background-image: url(/afroduck/tiles/rl--solar-cycle.webp?v=4861b353); }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/61"]::after { font-size: 0; }
body app-reading-list-detail a[href="lists/62"]::after { content: "The Witcher"; }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/62"] { background-image: url(/afroduck/tiles/rl--the-witcher.webp?v=fc89e51b); }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/62"]::after { font-size: 0; }
body app-reading-list-detail a[href="lists/48"]::after { content: "Mistborn"; }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/48"] { background-image: url(/afroduck/tiles/rl--cosmere--mistborn.webp?v=c61b6d9a); }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/48"]::after { font-size: 0; }
body app-reading-list-detail a[href="lists/58"]::after { content: "Reading Order"; }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/58"] { background-image: url(/afroduck/tiles/rl--cosmere--reading-order.webp?v=695fd4df); }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/58"]::after { font-size: 0; }
body app-reading-list-detail a[href="lists/49"]::after { content: "The Stormlight Archive"; }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/49"] { background-image: url(/afroduck/tiles/rl--cosmere--the-stormlight-archive.webp?v=9caa013c); }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/49"]::after { font-size: 0; }
body app-reading-list-detail a[href="lists/55"]::after { content: "Drenai"; }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/55"] { background-image: url(/afroduck/tiles/rl--david-gemmell--drenai--chronological-order.webp?v=4cf1d252); }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/55"]::after { font-size: 0; }
body app-reading-list-detail a[href="lists/56"]::after { content: "Chronological Order"; }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/56"] { background-image: url(/afroduck/tiles/rl--david-gemmell--sipstrassi-tales--chronological-order.webp?v=600761be); }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/56"]::after { font-size: 0; }
body app-reading-list-detail a[href="lists/57"]::after { content: "Publication Order"; }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/57"] { background-image: url(/afroduck/tiles/rl--david-gemmell--sipstrassi-tales--publication-order.webp?v=8de1b0ea); }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/57"]::after { font-size: 0; }
body app-reading-list-detail a[href="lists/65"]::after { content: "Elric"; }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/65"] { background-image: url(/afroduck/tiles/rl--eternal-champion--elric--chronological-order.webp?v=169c9de0); }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/65"]::after { font-size: 0; }
body app-reading-list-detail a[href="lists/64"]::after { content: "Publication Order"; }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/64"] { background-image: url(/afroduck/tiles/rl--eternal-champion--publication-order.webp?v=63e86cfc); }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/64"]::after { font-size: 0; }
body app-reading-list-detail a[href="lists/63"]::after { content: "Reading Order"; }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/63"] { background-image: url(/afroduck/tiles/rl--eternal-champion--reading-order.webp?v=3e1761d1); }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/63"]::after { font-size: 0; }
body app-reading-list-detail a[href="lists/60"]::after { content: "Chronological Order"; }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/60"] { background-image: url(/afroduck/tiles/rl--malazan--chronological-order.webp?v=52340df7); }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/60"]::after { font-size: 0; }
body app-reading-list-detail a[href="lists/59"]::after { content: "Publication Order"; }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/59"] { background-image: url(/afroduck/tiles/rl--malazan--publication-order.webp?v=27d27af5); }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/59"]::after { font-size: 0; }
body app-reading-list-detail a[href="lists/52"]::after { content: "Castle Rock"; }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/52"] { background-image: url(/afroduck/tiles/rl--stephen-king--castle-rock--publication-order.webp?v=5da63ce6); }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/52"]::after { font-size: 0; }
body app-reading-list-detail a[href="lists/50"]::after { content: "Connected Universe"; }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/50"] { background-image: url(/afroduck/tiles/rl--stephen-king--connected-universe--publication-order.webp?v=a1fc8dcb); }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/50"]::after { font-size: 0; }
body app-reading-list-detail a[href="lists/53"]::after { content: "Derry"; }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/53"] { background-image: url(/afroduck/tiles/rl--stephen-king--derry--publication-order.webp?v=5d9b2e23); }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/53"]::after { font-size: 0; }
body app-reading-list-detail a[href="lists/54"]::after { content: "Jerusalem's Lot"; }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/54"] { background-image: url(/afroduck/tiles/rl--stephen-king--jerusalem-s-lot--chronological-order.webp?v=56d30843); }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/54"]::after { font-size: 0; }
body app-reading-list-detail a[href="lists/51"]::after { content: "The Dark Tower"; }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/51"] { background-image: url(/afroduck/tiles/rl--stephen-king--the-dark-tower--publication-order.webp?v=7b694fec); }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/51"]::after { font-size: 0; }
body app-reading-list-detail a[href="lists/1"]::after { content: "30k \B7 The Horus Heresy"; }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/1"] { background-image: url(/afroduck/tiles/rl--warhammer--30k-the-horus-heresy--reading-order.webp?v=0c40b291); }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/1"]::after { font-size: 0; }
body app-reading-list-detail a[href="lists/47"]::after { content: "Warhammer Crime"; }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/47"] { background-image: url(/afroduck/tiles/rl--warhammer--crime-horror--warhammer-crime--reading-order.webp?v=89a4588d); }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/47"]::after { font-size: 0; }
body app-reading-list-detail a[href="lists/2"]::after { content: "Adepta Sororitas"; }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/2"] { background-image: url(/afroduck/tiles/rl--warhammer--40k--adepta-sororitas--timeline.webp?v=b8f0aeda); }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/2"]::after { font-size: 0; }
body app-reading-list-detail a[href="lists/3"]::after { content: "Adeptus Mechanicus"; }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/3"] { background-image: url(/afroduck/tiles/rl--warhammer--40k--adeptus-mechanicus--timeline.webp?v=ed8b5b61); }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/3"]::after { font-size: 0; }
body app-reading-list-detail a[href="lists/15"]::after { content: "Imperium"; }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/15"] { background-image: url(/afroduck/tiles/rl--warhammer--40k--imperium--timeline.webp?v=552a32f5); }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/15"]::after { font-size: 0; }
body app-reading-list-detail a[href="lists/16"]::after { content: "Inquisition"; }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/16"] { background-image: url(/afroduck/tiles/rl--warhammer--40k--inquisition--timeline.webp?v=c6d4880c); }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/16"]::after { font-size: 0; }
body app-reading-list-detail a[href="lists/17"]::after { content: "Necromunda"; }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/17"] { background-image: url(/afroduck/tiles/rl--warhammer--40k--necromunda--timeline.webp?v=16e4253e); }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/17"]::after { font-size: 0; }
body app-reading-list-detail a[href="lists/38"]::after { content: "Timeline (novels & novellas)"; }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/38"] { background-image: url(/afroduck/tiles/rl--warhammer--40k--timeline-novels-novellas.webp?v=a6f57669); }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/38"]::after { font-size: 0; }
body app-reading-list-detail a[href="lists/4"]::after { content: "Gaunt's Ghosts & Sabbat Worlds"; }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/4"] { background-image: url(/afroduck/tiles/rl--warhammer--40k--astra-militarum--gaunt-s-ghosts-sabbat-worlds--reading-order.webp?v=1a130f92); }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/4"]::after { font-size: 0; }
body app-reading-list-detail a[href="lists/5"]::after { content: "Timeline"; }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/5"] { background-image: url(/afroduck/tiles/rl--warhammer--40k--astra-militarum--timeline.webp?v=184a62bc); }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/5"]::after { font-size: 0; }
body app-reading-list-detail a[href="lists/6"]::after { content: "Alpha Legion"; }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/6"] { background-image: url(/afroduck/tiles/rl--warhammer--40k--chaos--alpha-legion--timeline.webp?v=9ea94414); }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/6"]::after { font-size: 0; }
body app-reading-list-detail a[href="lists/7"]::after { content: "Black Legion"; }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/7"] { background-image: url(/afroduck/tiles/rl--warhammer--40k--chaos--black-legion--timeline.webp?v=3207c4ce); }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/7"]::after { font-size: 0; }
body app-reading-list-detail a[href="lists/8"]::after { content: "Death Guard"; }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/8"] { background-image: url(/afroduck/tiles/rl--warhammer--40k--chaos--death-guard--timeline.webp?v=1a1d19c6); }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/8"]::after { font-size: 0; }
body app-reading-list-detail a[href="lists/9"]::after { content: "Emperor's Children"; }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/9"] { background-image: url(/afroduck/tiles/rl--warhammer--40k--chaos--emperor-s-children--timeline.webp?v=8ab7d5fb); }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/9"]::after { font-size: 0; }
body app-reading-list-detail a[href="lists/10"]::after { content: "Iron Warriors"; }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/10"] { background-image: url(/afroduck/tiles/rl--warhammer--40k--chaos--iron-warriors--timeline.webp?v=be89783b); }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/10"]::after { font-size: 0; }
body app-reading-list-detail a[href="lists/11"]::after { content: "Night Lords"; }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/11"] { background-image: url(/afroduck/tiles/rl--warhammer--40k--chaos--night-lords--timeline.webp?v=c3b8f099); }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/11"]::after { font-size: 0; }
body app-reading-list-detail a[href="lists/12"]::after { content: "Thousand Sons"; }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/12"] { background-image: url(/afroduck/tiles/rl--warhammer--40k--chaos--thousand-sons--timeline.webp?v=449fa481); }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/12"]::after { font-size: 0; }
body app-reading-list-detail a[href="lists/13"]::after { content: "Word Bearers"; }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/13"] { background-image: url(/afroduck/tiles/rl--warhammer--40k--chaos--word-bearers--timeline.webp?v=72948ed7); }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/13"]::after { font-size: 0; }
body app-reading-list-detail a[href="lists/14"]::after { content: "World Eaters"; }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/14"] { background-image: url(/afroduck/tiles/rl--warhammer--40k--chaos--world-eaters--timeline.webp?v=ccfd3e16); }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/14"]::after { font-size: 0; }
body app-reading-list-detail a[href="lists/18"]::after { content: "Black Templars"; }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/18"] { background-image: url(/afroduck/tiles/rl--warhammer--40k--space-marines--black-templars--timeline.webp?v=0e02a7da); }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/18"]::after { font-size: 0; }
body app-reading-list-detail a[href="lists/19"]::after { content: "Blood Angels"; }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/19"] { background-image: url(/afroduck/tiles/rl--warhammer--40k--space-marines--blood-angels--timeline.webp?v=e3cdb4b2); }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/19"]::after { font-size: 0; }
body app-reading-list-detail a[href="lists/20"]::after { content: "Blood Ravens"; }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/20"] { background-image: url(/afroduck/tiles/rl--warhammer--40k--space-marines--blood-ravens--timeline.webp?v=13fc7698); }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/20"]::after { font-size: 0; }
body app-reading-list-detail a[href="lists/21"]::after { content: "Carcharodons"; }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/21"] { background-image: url(/afroduck/tiles/rl--warhammer--40k--space-marines--carcharodons--timeline.webp?v=60c46b1e); }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/21"]::after { font-size: 0; }
body app-reading-list-detail a[href="lists/22"]::after { content: "Crimson Fists"; }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/22"] { background-image: url(/afroduck/tiles/rl--warhammer--40k--space-marines--crimson-fists--timeline.webp?v=111d9325); }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/22"]::after { font-size: 0; }
body app-reading-list-detail a[href="lists/23"]::after { content: "Dark Angels"; }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/23"] { background-image: url(/afroduck/tiles/rl--warhammer--40k--space-marines--dark-angels--timeline.webp?v=4462f4fd); }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/23"]::after { font-size: 0; }
body app-reading-list-detail a[href="lists/24"]::after { content: "Deathwatch"; }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/24"] { background-image: url(/afroduck/tiles/rl--warhammer--40k--space-marines--deathwatch--timeline.webp?v=6f97e8fd); }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/24"]::after { font-size: 0; }
body app-reading-list-detail a[href="lists/25"]::after { content: "Flesh Tearers"; }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/25"] { background-image: url(/afroduck/tiles/rl--warhammer--40k--space-marines--flesh-tearers--timeline.webp?v=e7305c49); }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/25"]::after { font-size: 0; }
body app-reading-list-detail a[href="lists/26"]::after { content: "Grey Knights"; }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/26"] { background-image: url(/afroduck/tiles/rl--warhammer--40k--space-marines--grey-knights--timeline.webp?v=63f90e09); }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/26"]::after { font-size: 0; }
body app-reading-list-detail a[href="lists/27"]::after { content: "Imperial Fists"; }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/27"] { background-image: url(/afroduck/tiles/rl--warhammer--40k--space-marines--imperial-fists--timeline.webp?v=a81ffc25); }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/27"]::after { font-size: 0; }
body app-reading-list-detail a[href="lists/28"]::after { content: "Iron Hands"; }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/28"] { background-image: url(/afroduck/tiles/rl--warhammer--40k--space-marines--iron-hands--timeline.webp?v=921088a2); }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/28"]::after { font-size: 0; }
body app-reading-list-detail a[href="lists/29"]::after { content: "Other Chapters"; }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/29"] { background-image: url(/afroduck/tiles/rl--warhammer--40k--space-marines--other-chapters--timeline.webp?v=ef0c9d2d); }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/29"]::after { font-size: 0; }
body app-reading-list-detail a[href="lists/30"]::after { content: "Raven Guard"; }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/30"] { background-image: url(/afroduck/tiles/rl--warhammer--40k--space-marines--raven-guard--timeline.webp?v=a42b8d69); }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/30"]::after { font-size: 0; }
body app-reading-list-detail a[href="lists/31"]::after { content: "Salamanders"; }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/31"] { background-image: url(/afroduck/tiles/rl--warhammer--40k--space-marines--salamanders--timeline.webp?v=6520d3d4); }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/31"]::after { font-size: 0; }
body app-reading-list-detail a[href="lists/32"]::after { content: "Scythes of the Emperor"; }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/32"] { background-image: url(/afroduck/tiles/rl--warhammer--40k--space-marines--scythes-of-the-emperor--timeline.webp?v=91bc0772); }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/32"]::after { font-size: 0; }
body app-reading-list-detail a[href="lists/33"]::after { content: "Silver Skulls"; }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/33"] { background-image: url(/afroduck/tiles/rl--warhammer--40k--space-marines--silver-skulls--timeline.webp?v=bc6f0ff9); }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/33"]::after { font-size: 0; }
body app-reading-list-detail a[href="lists/34"]::after { content: "Soul Drinkers"; }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/34"] { background-image: url(/afroduck/tiles/rl--warhammer--40k--space-marines--soul-drinkers--timeline.webp?v=ee3f8ca9); }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/34"]::after { font-size: 0; }
body app-reading-list-detail a[href="lists/35"]::after { content: "Space Wolves"; }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/35"] { background-image: url(/afroduck/tiles/rl--warhammer--40k--space-marines--space-wolves--timeline.webp?v=e75731e0); }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/35"]::after { font-size: 0; }
body app-reading-list-detail a[href="lists/36"]::after { content: "Ultramarines"; }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/36"] { background-image: url(/afroduck/tiles/rl--warhammer--40k--space-marines--ultramarines--timeline.webp?v=5679e2e4); }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/36"]::after { font-size: 0; }
body app-reading-list-detail a[href="lists/37"]::after { content: "White Scars"; }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/37"] { background-image: url(/afroduck/tiles/rl--warhammer--40k--space-marines--white-scars--timeline.webp?v=9f491393); }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/37"]::after { font-size: 0; }
body app-reading-list-detail a[href="lists/39"]::after { content: "Aeldari"; }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/39"] { background-image: url(/afroduck/tiles/rl--warhammer--40k--xenos--aeldari--timeline.webp?v=8f88da8f); }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/39"]::after { font-size: 0; }
body app-reading-list-detail a[href="lists/40"]::after { content: "Drukhari"; }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/40"] { background-image: url(/afroduck/tiles/rl--warhammer--40k--xenos--drukhari--timeline.webp?v=6c95a897); }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/40"]::after { font-size: 0; }
body app-reading-list-detail a[href="lists/41"]::after { content: "Necrons"; }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/41"] { background-image: url(/afroduck/tiles/rl--warhammer--40k--xenos--necrons--timeline.webp?v=04321ca1); }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/41"]::after { font-size: 0; }
body app-reading-list-detail a[href="lists/42"]::after { content: "Orks"; }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/42"] { background-image: url(/afroduck/tiles/rl--warhammer--40k--xenos--orks--timeline.webp?v=a4ce2765); }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/42"]::after { font-size: 0; }
body app-reading-list-detail a[href="lists/43"]::after { content: "T'au"; }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/43"] { background-image: url(/afroduck/tiles/rl--warhammer--40k--xenos--t-au--timeline.webp?v=b901e085); }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/43"]::after { font-size: 0; }
body app-reading-list-detail a[href="lists/44"]::after { content: "Tyranids"; }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/44"] { background-image: url(/afroduck/tiles/rl--warhammer--40k--xenos--tyranids--timeline.webp?v=9f709148); }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/44"]::after { font-size: 0; }
body app-reading-list-detail a[href="lists/45"]::after { content: "Era Order"; }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/45"] { background-image: url(/afroduck/tiles/rl--warhammer--age-of-sigmar--era-order.webp?v=09983a9f); }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/45"]::after { font-size: 0; }
body app-reading-list-detail a[href="lists/46"]::after { content: "The Old World"; }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/46"] { background-image: url(/afroduck/tiles/rl--warhammer--age-of-sigmar--the-old-world--timeline.webp?v=3dad708c); }
body app-reading-list-detail app-read-more .read-more-cont > div > a[href="lists/46"]::after { font-size: 0; }
/* ---- Ultrachromic look ---- */
400;500;600;700;800&display=swap');
/* ==========================================================================
AFRODUCK Ultrachromic -- Kavita 0.9.1.4, dressed like the Jellyfin
"Ultrachromic" theme. Appended AFTER DarkNight + the generated
"AFRODUCK folders" block: it restyles that block, it never undoes it.
Note: an @import only works at the very top of a stylesheet. Kavita
injects this file after DarkNight, so the @import above is ignored there;
the @font-face rules below load the same Google font either way.
========================================================================== */
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 200 800; font-display: block;
src: url(/afroduck/fonts/LDIoaomQNQcsA88c7O9yZ4KMCoOg4Ko40yyygA.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 200 800; font-display: block;
src: url(/afroduck/fonts/LDIoaomQNQcsA88c7O9yZ4KMCoOg4Ko20yw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* ---------- 1. tokens (beat DarkNight's ":root" block) ---------- */
:root body {
--uc-bg: #101010;
--uc-surface: #181818;
--uc-raised: #222222;
--uc-line: rgba(255,255,255,.08);
--uc-fg: #f2f2f2;
--uc-muted: #9a9a9a;
--uc-accent: #00a4dc;
--uc-accent-soft: rgba(0,164,220,.18);
--uc-glass: rgba(16,16,16,.55);
--uc-round: 18px;
--uc-round-s: 6px;
--uc-font: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
--uc-header: 60px;
--uc-tabs-row: 0px;
--primary-color: #00a4dc;
--primary-color-dark-shade: #0092c4;
--primary-color-darker-shade: #007dab;
--primary-color-darkest-shade: #006a91;
--primary-color-scrollbar: rgba(0,164,220,.6);
--error-color: #ff5d5d;
--bs-body-bg: #101010;
--body-text-color: #f2f2f2;
--body-font-family: var(--uc-font);
--brand-font-family: var(--uc-font);
--navbar-bg-color: var(--uc-glass);
--navbar-text-color: #f2f2f2;
--navbar-fa-icon-color: #d6d6d6;
--side-nav-bg-color: transparent;
--side-nav-mobile-bg-color: transparent;
--side-nav-closed-bg-color: transparent;
--side-nav-hover-bg-color: rgba(255,255,255,.06);
--side-nav-active-bg-color: rgba(255,255,255,.1);
--side-nav-item-active-color: transparent;
--side-nav-item-active-text-color: #fff;
--side-nav-text-color: var(--uc-muted);
--side-nav-color: var(--uc-muted);
--input-bg-color: rgba(255,255,255,.07);
--input-bg-readonly-color: rgba(255,255,255,.04);
--input-text-color: #f2f2f2;
--input-placeholder-color: #8a8a8a;
--input-border-color: rgba(255,255,255,.14);
--input-focused-border-color: var(--uc-accent);
--input-focus-boxshadow-color: rgba(0,164,220,.35);
--searchbar-bg-color: rgba(255,255,255,.07);
--input-hint-border-color: rgba(255,255,255,.18);
--input-hint-text-color: #8a8a8a;
--btn-primary-text-color: #fff;
--btn-primary-bg-color: var(--uc-accent);
--btn-primary-border-color: var(--uc-accent);
--btn-primary-hover-text-color: #fff;
--btn-primary-hover-bg-color: #0092c4;
--btn-primary-hover-border-color: #0092c4;
--btn-alt-bg-color: rgba(255,255,255,.1);
--btn-alt-border-color: transparent;
--btn-alt-hover-bg-color: rgba(255,255,255,.16);
--btn-alt-focus-bg-color: rgba(255,255,255,.16);
--btn-fa-icon-color: #f2f2f2;
--btn-focus-boxshadow-color: rgba(0,164,220,.45);
--btn-disabled-bg-color: rgba(255,255,255,.05);
--btn-disabled-border-color: transparent;
--nav-tab-border-color: transparent;
--nav-tab-text-color: var(--uc-muted);
--nav-tab-bg-color: rgba(255,255,255,.1);
--nav-tab-hover-border-color: transparent;
--nav-tab-active-text-color: #fff;
--nav-tab-hover-text-color: #fff;
--nav-tab-hover-bg-color: rgba(255,255,255,.06);
--nav-tab-border-top: transparent; --nav-tab-border-left: transparent; --nav-tab-border-bottom: transparent; --nav-tab-border-right: transparent;
--nav-tab-hover-border-top: transparent; --nav-tab-hover-border-left: transparent; --nav-tab-hover-border-bottom: transparent; --nav-tab-hover-border-right: transparent;
--nav-tab-active-hover-bg-color: rgba(255,255,255,.14);
--nav-link-bg-color: rgba(255,255,255,.1);
--nav-header-bg-color: #222;
--tagbadge-border-color: transparent;
--tagbadge-text-color: #e6e6e6;
--tagbadge-bg-color: rgba(255,255,255,.09);
--tagbadge-filled-border-color: transparent;
--tagbadge-filled-text-color: #7fd5f3;
--tagbadge-filled-bg-color: var(--uc-accent-soft);
--list-group-item-bg-color: var(--uc-surface);
--list-group-item-border-color: var(--uc-line);
--list-group-hover-bg-color: var(--uc-raised);
--popover-body-bg-color: var(--uc-raised);
--popover-bg-color: var(--uc-raised);
--popover-border-color: var(--uc-line);
--pagination-active-link-border-color: var(--uc-accent);
--pagination-active-link-bg-color: var(--uc-accent);
--pagination-link-bg-color: rgba(255,255,255,.06);
--pagination-focus-border-color: var(--uc-accent);
--pagination-link-hover-color: var(--uc-accent);
--progress-bg-color: rgba(0,0,0,.45);
--progress-bar-color: var(--uc-accent);
--progress-striped-animated-color: linear-gradient(45deg, rgba(0,164,220,.75) 25%, rgba(0,120,160,.75) 25%, rgba(0,120,160,.75) 50%, rgba(0,164,220,.75) 50%, rgba(0,164,220,.75) 75%, rgba(0,120,160,.75) 75%, rgba(0,120,160,.75));
--dropdown-item-hover-text-color: #fff;
--dropdown-item-hover-bg-color: var(--uc-accent-soft);
--dropdown-item-text-color: #e6e6e6;
--dropdown-item-bg-color: var(--uc-raised);
--dropdown-overlay-color: rgba(0,0,0,.55);
--accordion-header-text-color: #f2f2f2;
--accordion-header-bg-color: var(--uc-raised);
--accordion-body-bg-color: var(--uc-surface);
--accordion-body-border-color: var(--uc-line);
--accordion-header-collapsed-text-color: #d6d6d6;
--accordion-header-collapsed-bg-color: var(--uc-surface);
--accordion-active-body-bg-color: var(--uc-surface);
--breadcrumb-bg-color: transparent;
--ratingstar-color: var(--uc-accent);
--ratingstar-star-filled: var(--uc-accent);
--checkbox-checked-bg-color: var(--uc-accent);
--checkbox-focus-border-color: var(--uc-accent);
--radio-accent-color: var(--uc-accent);
--radio-hover-accent-color: var(--uc-accent);
--input-range-color: var(--uc-accent);
--input-range-active-color: #0092c4;
--toast-info-bg-color: var(--uc-accent);
--hr-color: var(--uc-line);
--accent-bg-color: rgba(255,255,255,.05);
--card-bg-color: transparent;
--card-text-color: #f2f2f2;
--card-border-width: 0;
--card-border-color: transparent;
--card-progress-bar-color: var(--uc-accent);
--card-overlay-bg-color: transparent;
--card-overlay-hover-bg-color: rgba(0,0,0,.25);
--drawer-background-color: var(--uc-surface);
--drawer-bg-color: var(--uc-surface);
--drawer-text-color: #f2f2f2;
--event-widget-bg-color: var(--uc-surface);
--event-widget-item-bg-color: var(--uc-raised);
--event-widget-border-color: var(--uc-line);
--manga-reader-next-highlight-bg-color: rgba(0,164,220,.45);
--carousel-header-text-color: #f2f2f2;
--bulk-selection-highlight-text-color: var(--uc-accent);
--card-list-item-bg-color: var(--uc-surface);
--search-list-group-item-bg-color: var(--uc-raised);
font-family: var(--uc-font);
background-color: var(--uc-bg);
color: var(--uc-fg);
}
body .progress-bar { background-color: var(--uc-accent) !important; }
body a { color: var(--uc-accent); }
body a:hover { color: #3dbbe8; }
body a.dark-exempt, body a.btn-icon { color: inherit; }
body h1, body h2, body h3, body h4, body h5, body h6,
body button, body input, body select, body textarea, body .btn { font-family: var(--uc-font); }
body ::selection { background: rgba(0,164,220,.4); }
/* ---------- 2. page frame: content scrolls UNDER the frosted header ---------- */
/* Kavita sizes and to "100vh - --nav-offset": zero it on both while a page with the companion bar shows */
:root:has(> body .companion-bar), body:has(.companion-bar) { --nav-offset: 0px; }
body .fullpage-background { background-color: var(--uc-bg); }
body .content-wrapper { padding: 0 !important; }
body .companion-bar {
padding-top: calc(var(--uc-header) + var(--uc-tabs-row));
height: calc(var(--vh, 1vh) * 100) !important;
-webkit-mask-image: none !important; mask-image: none !important;
}
body .content-wrapper:has(> app-side-nav) .companion-bar { margin-left: 0 !important; }
/* only while the Settings menu is open (closed, Kavita renders no container and the page goes back to the left edge) */
body .content-wrapper:has(> app-preference-nav .side-nav-container) .companion-bar { margin-left: calc(14.875rem + 1rem) !important; }
body .content-wrapper:has(> app-preference-nav):not(:has(> app-preference-nav .side-nav-container)) .companion-bar { margin-left: 0 !important; }
body app-preference-nav .side-nav-container { top: calc(var(--uc-header) + .5rem) !important; background: var(--uc-surface) !important; border-radius: var(--uc-round) !important; }
body .main-container { padding-left: 22px !important; padding-right: 22px !important; }
/* ---------- 3. the frosted header ---------- */
body .navbar {
height: var(--uc-header) !important;
background-color: var(--uc-glass) !important;
-webkit-backdrop-filter: blur(15px); backdrop-filter: blur(15px);
border-bottom: 1px solid var(--uc-line);
box-shadow: none;
}
body .navbar > .container-fluid { height: 100%; padding: 0 22px; gap: 10px; flex-wrap: nowrap; }
/* the hamburger only matters for Settings' own side nav; the main nav is the tabs */
body:has(app-side-nav) .navbar .side-nav-toggle { display: none !important; }
body .navbar .side-nav-toggle { margin: 0 !important; width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.07); font-size: 1rem; }
body .navbar .side-nav-toggle:hover { background: rgba(255,255,255,.14); }
body .navbar-brand {
margin: 0 !important; color: #fff !important; font-family: var(--uc-font) !important; font-weight: 800; font-size: 1.05rem;
display: flex; align-items: center; gap: 8px; flex: 0 0 auto;
}
body .navbar-brand app-image { display: none !important; }
body .navbar-brand::before {
content: "K"; width: 26px; height: 26px; border-radius: 8px; background: var(--uc-accent); color: #fff;
display: grid; place-items: center; font-size: .8rem; font-weight: 800; flex: 0 0 26px;
}
body .navbar-brand .logo { display: inline !important; margin: 0 !important; line-height: 1 !important; max-height: none !important; }
body .navbar-brand .logo span { color: #fff; font-weight: 800; letter-spacing: -.01em; }
/* the search keeps to the right, after the tabs */
body .navbar .navbar-nav.col { flex: 0 1 340px !important; min-width: 0; margin-left: auto !important; margin-right: 6px !important; }
body .navbar .typeahead-input { width: 100% !important; border-radius: 999px !important; border: 1px solid transparent; background-color: rgba(255,255,255,.07) !important; }
body .navbar .typeahead-input.focused { border-color: rgba(0,164,220,.6) !important; background-color: rgba(255,255,255,.1) !important; }
body .navbar .typeahead-input .search { min-height: 36px; align-items: center; }
body .navbar .typeahead-input .search::before { content: "\f002"; font-family: "Font Awesome 7 Free", "Font Awesome 6 Free", "Font Awesome 5 Free"; font-weight: 900; color: var(--uc-muted); font-size: .8rem; padding-left: 14px; line-height: 1; }
body .navbar .typeahead-input input { color: #f2f2f2; font-size: .85rem; padding: 0 8px !important; left: 0 !important; }
body .navbar .typeahead-input input::placeholder { color: var(--uc-muted); opacity: 1; }
body .navbar .input-hint { border-radius: 999px !important; padding: 1px 8px !important; margin: 0 8px 0 0 !important; font-size: .7rem !important; }
body .navbar .nav-item:not(.search) { opacity: 1 !important; }
body .navbar .btn-icon, body .navbar .nav-item > .btn, body .navbar .dropdown-toggle.btn {
border-radius: 999px !important; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 0 !important; color: #e6e6e6 !important;
}
body .navbar .btn-icon:hover, body .navbar .dropdown-toggle.btn:hover { background: rgba(255,255,255,.08) !important; }
body .navbar .dropdown-toggle.btn .fw-bold { font-weight: 600 !important; font-size: .9rem; }
body .navbar .profile-icon { color: #e6e6e6; }
/* the search results sheet */
body app-grouped-typeahead .dropdown { top: calc(var(--uc-header) + var(--uc-tabs-row)) !important; margin-top: 8px !important; }
body app-grouped-typeahead .list-group { border-radius: var(--uc-round); overflow: hidden auto; border: 1px solid var(--uc-line); box-shadow: 0 18px 40px rgba(0,0,0,.6); }
body app-grouped-typeahead .list-group-item { background-color: var(--uc-raised) !important; border-color: var(--uc-line) !important; }
body app-grouped-typeahead .list-group:empty { border: 0; box-shadow: none; }
body app-grouped-typeahead .list-group-item:hover, body app-grouped-typeahead .list-group-item.active { background-color: #2c2c2c !important; }
body app-grouped-typeahead .section-header { color: var(--uc-accent) !important; font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
/* ---------- 4. Kavita's side nav becomes the header's pill tabs ---------- */
body app-side-nav .side-nav-container:not(.hidden) {
position: fixed !important; top: 0 !important; left: 142px !important; right: auto !important; z-index: 1041 !important;
width: auto !important; max-width: calc(100vw - 142px - 560px); transition: none !important; height: var(--uc-header) !important;
padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
background: transparent !important; overflow: visible !important; visibility: visible !important; display: flex; align-items: center;
}
body app-side-nav .side-nav {
display: flex !important; flex-direction: row; align-items: center; gap: 4px; height: auto !important; width: 100%;
overflow-x: auto !important; overflow-y: hidden !important; scrollbar-width: none; padding: 0 !important;
}
body app-side-nav .side-nav::-webkit-scrollbar { display: none; }
body app-side-nav .side-nav > * { flex: 0 0 auto; }
body app-side-nav .side-nav-item {
width: auto !important; min-height: 0 !important; height: auto !important; padding: .45rem .85rem !important; border-radius: 999px !important;
color: var(--uc-muted) !important; background: transparent !important; font: 600 .9rem/1.3 var(--uc-font) !important; white-space: nowrap; overflow: visible !important;
transition: color .15s, background-color .15s;
}
body app-side-nav .side-nav-item:hover { color: #fff !important; background: rgba(255,255,255,.06) !important; }
body app-side-nav .side-nav-item.active { color: #fff !important; background: rgba(255,255,255,.1) !important; }
body app-side-nav .side-nav-item .active-highlight,
body app-side-nav .side-nav-item .phone-hidden,
body app-side-nav .side-nav-item .card-actions { display: none !important; }
body app-side-nav .side-nav-item .side-nav-text { display: block !important; min-width: 0 !important; opacity: 1 !important; overflow: visible !important; word-break: normal !important; }
body app-side-nav .side-nav-item .side-nav-text > div { min-width: 0 !important; width: auto !important; }
/* labels, exactly as asked */
body app-side-nav a.side-nav-item[href^="/browse/"] .side-nav-text > div,
body app-side-nav a.side-nav-item[href="/want-to-read"] .side-nav-text > div { font-size: 0 !important; }
body app-side-nav a.side-nav-item[href^="/browse/"] .side-nav-text > div::before { content: "Authors"; font-size: .9rem; }
body app-side-nav a.side-nav-item[href="/want-to-read"] .side-nav-text > div::before { content: "Want to Read"; font-size: .9rem; }
/* only the five tabs: libraries, All Series, bookmarks, smart filters, "More" and the edit items stay out of the header */
body app-side-nav .side-nav > :not(app-side-nav-item),
body app-side-nav .side-nav > app-side-nav-item:not(:has(> a.side-nav-item[href="/home"], > a.side-nav-item[href="/collections"], > a.side-nav-item[href="/lists"], > a.side-nav-item[href="/want-to-read"], > a.side-nav-item[href^="/browse/"])) { display: none !important; }
body app-side-nav .sidenav-bottom,
body app-side-nav .side-nav-overlay { display: none !important; }
/* ---------- 5. page titles, section rows ---------- */
body app-side-nav-companion-bar > div { padding-top: 6px; }
body app-side-nav-companion-bar h2, body app-side-nav-companion-bar h4 {
font-size: 1.5rem !important; font-weight: 800 !important; letter-spacing: -.01em; color: #fff; margin: 0;
}
body app-side-nav-companion-bar h5, body app-side-nav-companion-bar h6 {
color: var(--uc-muted); font-size: .85rem !important; font-weight: 500 !important; margin: 4px 0 0;
}
body app-side-nav-companion-bar .btn-icon, body app-side-nav-companion-bar .btn-secondary {
width: 40px; height: 40px; border-radius: 50% !important; display: inline-grid; place-items: center; border: 0 !important;
background: rgba(255,255,255,.07) !important; color: #e6e6e6 !important;
}
body app-side-nav-companion-bar .btn-icon:hover { background: rgba(255,255,255,.14) !important; }
body .carousel-container .header, body .carousel-container h4.header { margin: 0 0 12px !important; }
body .carousel-container .section-title {
color: #fff !important; font-size: 1.15rem !important; font-weight: 700 !important; text-decoration: none !important; padding: 0 !important;
}
body .carousel-container .section-title:hover { color: var(--uc-accent) !important; }
body .carousel-container .carousel-btn {
width: 36px; height: 36px; border-radius: 50% !important; padding: 0 !important; margin-left: 6px;
background: rgba(255,255,255,.07) !important; color: #e6e6e6 !important; border: 0 !important;
}
body .carousel-container .carousel-btn:hover { background: rgba(255,255,255,.14) !important; }
body .carousel-container .carousel-btn:disabled { opacity: .35; }
body app-carousel-reel swiper-container { padding-bottom: 6px; }
body app-dashboard .main-container { padding-top: 18px; }
body app-dashboard app-carousel-reel { display: block; margin-bottom: 14px; }
/* ---------- 6. cards: Jellyfin posters (rounded, title below, floating progress) ---------- */
body .card-detail-layout-item,
body .card-item-container,
body .card-item-container.card { background: transparent !important; border: 0 !important; box-shadow: none !important; }
body .card-item-container .overlay {
position: relative; border-radius: var(--uc-round) !important; overflow: hidden; background: var(--uc-raised);
box-shadow: 0 8px 20px rgba(0,0,0,.35); transition: transform .15s ease-in-out, box-shadow .15s ease-in-out;
}
body .card-item-container .overlay img { border-radius: var(--uc-round) !important; object-fit: cover; }
body .card-item-container .card-overlay,
body .card-item-container .overlay-information,
body .card-item-container .badge-container { border-radius: var(--uc-round) !important; }
body .card-item-container:hover .overlay {
transform: scale(1.04); box-shadow: 0 0 0 3px var(--uc-accent), 0 14px 28px rgba(0,0,0,.5);
}
body .card-item-container .overlay-information--centered { background: rgba(0,0,0,.55) !important; }
body .card-item-container .overlay-information--centered:hover { background: var(--uc-accent) !important; }
/* floating progress bar inside the poster */
body .card-item-container .progress-banner {
position: absolute !important; left: 10px; right: 10px; bottom: 10px; width: auto !important; height: 5px !important; z-index: 12;
border-radius: 99px; overflow: hidden; background: transparent; pointer-events: auto;
}
body .card-item-container .progress-banner:has(.progress) { background: rgba(0,0,0,.45); }
body .card-item-container .progress-banner p { margin: 0 !important; height: 100%; }
body .card-item-container .progress-banner .progress { height: 5px !important; background: transparent !important; border-radius: 99px; }
body .card-item-container .progress-banner .progress-bar { border-radius: 99px; }
body .card-item-container .download { bottom: 22px !important; }
/* blue count badge */
body .card-item-container .count { top: 10px !important; right: 10px !important; z-index: 12; }
body .card-item-container .count .badge {
min-width: 26px; height: 26px; padding: 0 7px; border-radius: 99px !important; background: rgba(0,164,220,.85) !important;
display: inline-grid; place-items: center; font: 700 .75rem/1 var(--uc-font); color: #fff;
}
/* unread marker: a small blue dot instead of the corner triangle */
body .card-item-container .not-read-badge {
top: 12px !important; left: 12px !important; right: auto !important; width: 10px !important; height: 10px !important;
transform: none !important; border-radius: 50%; background: var(--uc-accent) !important; box-shadow: 0 0 0 2px rgba(16,16,16,.55);
}
body .card-item-container .bulk-mode { top: 10px !important; left: 10px !important; z-index: 13; }
/* title under the poster */
body .card-item-container .card-title-container { padding: 6px 0 0 !important; background: transparent !important; min-height: 32px; }
body .card-item-container .card-title-container app-series-format { display: none; }
body .card-item-container .card-title-container .card-title {
padding: 2px 0 !important; font: 600 .9rem/1.25 var(--uc-font) !important; color: var(--uc-fg); text-align: center; max-width: none !important;
}
body .card-item-container .card-title-container .card-title a { color: var(--uc-fg) !important; text-decoration: none !important; }
body .card-item-container .card-title-container .card-actions { opacity: .55; transition: opacity .15s; }
body .card-item-container:hover .card-title-container .card-actions { opacity: 1; }
body .card-item-container .meta-title { border-radius: 0 0 var(--uc-round) var(--uc-round); background: rgba(16,16,16,.8) !important; }
/* grids breathe a little more */
body #card-detail-layout-items-container.grid { row-gap: 14px !important; }
/* ---------- 7. buttons, chips, tabs, menus, modals ---------- */
body .btn { border-radius: 999px; font-weight: 600; }
body .btn-primary { background: var(--uc-accent); border-color: var(--uc-accent); color: #fff; }
body .btn-primary:hover { background: #0092c4; border-color: #0092c4; }
body .btn-outline-primary { color: #fff; border-color: rgba(0,164,220,.7); }
body .btn-outline-primary:hover { background: var(--uc-accent); border-color: var(--uc-accent); color: #fff; }
body .btn-secondary, body .btn-outline-secondary { border-radius: 999px; }
body .btn-actions { border-radius: 50% !important; }
body .badge.bg-primary, body .badge.text-bg-primary { background-color: var(--uc-accent) !important; }
body .tagbadge, body app-tag-badge .tagbadge { border-radius: 999px !important; border: 0 !important; font-weight: 600; font-size: .8rem; padding: .3rem .75rem !important; }
body .nav-tabs { border-bottom: 0 !important; gap: 6px; }
body .nav-tabs .nav-link {
border: 0 !important; border-radius: 999px !important; padding: .5rem 1rem !important; font-weight: 600; font-size: .9rem;
color: var(--uc-muted) !important; background: transparent !important;
}
body .nav-tabs .nav-link:hover { color: #fff !important; background: rgba(255,255,255,.06) !important; }
body .nav-tabs .nav-link.active { color: #fff !important; background: var(--uc-accent) !important; }
body .nav-tabs .nav-link .badge { background: rgba(0,0,0,.28) !important; color: #fff !important; font-weight: 700; }
body .nav-tabs .nav-link.active::before { display: none; }
body .dropdown-menu {
background: var(--uc-raised) !important; border: 1px solid var(--uc-line) !important; border-radius: 12px !important;
box-shadow: 0 14px 34px rgba(0,0,0,.6); padding: 6px !important;
}
body .dropdown-item { border-radius: 8px; color: #e6e6e6 !important; font-size: .88rem; padding: .45rem .8rem; }
body .dropdown-item:hover, body .dropdown-item:focus, body .dropdown-item.active { background: var(--uc-accent-soft) !important; color: #fff !important; }
body .dropdown-divider { border-color: var(--uc-line); }
body .modal-content {
background: var(--uc-surface) !important; color: var(--uc-fg); border: 1px solid var(--uc-line) !important; border-radius: var(--uc-round) !important;
box-shadow: 0 24px 60px rgba(0,0,0,.65);
}
body .modal-header, body .modal-footer { border-color: var(--uc-line) !important; }
body .modal-backdrop.show { opacity: .7; }
body .offcanvas { background: var(--uc-surface) !important; color: var(--uc-fg); border-color: var(--uc-line) !important; }
body .form-control, body .form-select {
background-color: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); color: var(--uc-fg); border-radius: 10px;
}
body .form-control:focus, body .form-select:focus { border-color: var(--uc-accent); box-shadow: 0 0 0 .2rem rgba(0,164,220,.25); background-color: rgba(255,255,255,.1); color: #fff; }
body .form-check-input:checked { background-color: var(--uc-accent); border-color: var(--uc-accent); }
body .input-group-text { background: rgba(255,255,255,.1) !important; color: #e6e6e6 !important; border-color: rgba(255,255,255,.12) !important; }
body .dropdown-menu .submenu-toggle { border-radius: 8px; padding: .45rem .8rem !important; font-size: .88rem; }
body .modal-content .nav-pills .nav-link { border-radius: 999px; font-weight: 600; }
body .modal-content .nav-pills .nav-link.active { background: var(--uc-accent) !important; color: #fff !important; }
body .tooltip-inner { background: var(--uc-raised); color: #f2f2f2; border: 1px solid var(--uc-line); border-radius: 8px; font-family: var(--uc-font); }
body .read-more-link { color: var(--uc-accent) !important; font-weight: 600; }
body hr { border-color: var(--uc-line); opacity: 1; }
body .jump-bar .btn { color: var(--uc-muted) !important; font-weight: 600; }
body .jump-bar .btn:hover { color: var(--uc-accent) !important; }
body .jump-bar .flip-button-back { color: var(--uc-accent); }
/* ---------- 8. folder pages (the generated "AFRODUCK folders" block, restyled) ---------- */
/* the big collection cover beside the tiles goes: the page reads crumb -> tiles -> posters, like the concept */
body app-collection-detail .container-fluid > .row.mb-3 > .col-md-2 { display: none !important; }
body app-collection-detail .container-fluid > .row.mb-3 > .col-md-10 { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; margin-top: 4px !important; }
body app-collection-detail .container-fluid > .row.mb-3 { margin-bottom: 6px !important; }
body app-collection-detail .container-fluid > .row.mb-3 > hr { margin: 14px 12px 2px; width: calc(100% - 24px); }
body app-collection-detail app-read-more .read-more-cont > div { gap: 22px 16px !important; }
body app-collection-detail app-read-more .read-more-cont > div > p { margin: 0 0 2px !important; }
body app-collection-detail app-read-more .read-more-cont > div > p > a {
padding: .3rem .85rem !important; border: 0 !important; border-radius: 999px !important; background: rgba(255,255,255,.07);
color: var(--uc-muted) !important; font-weight: 600; font-size: .85rem;
}
body app-collection-detail app-read-more .read-more-cont > div > p > a:hover { color: #fff !important; background: rgba(255,255,255,.13); }
body app-collection-detail app-read-more .read-more-cont > div > a {
border-radius: var(--uc-round) !important; box-shadow: 0 10px 26px rgba(0,0,0,.45) !important;
transition: transform .15s ease-in-out, box-shadow .15s ease-in-out !important;
}
body app-collection-detail app-read-more .read-more-cont > div > a:hover {
transform: scale(1.04) !important; box-shadow: 0 0 0 3px var(--uc-accent), 0 14px 28px rgba(0,0,0,.5) !important;
}
body app-collection-detail .read-more-link {
margin-top: 14px !important; padding: .45rem 1rem !important; border: 0 !important; border-radius: 999px !important;
background: rgba(255,255,255,.08); color: #fff !important;
}
body app-collection-detail .read-more-link:hover { background: rgba(255,255,255,.14); }
body app-collection-detail .read-more-link::after { font-weight: 600; }
/* ---------- 9. series page = a Jellyfin item page ---------- */
/* Kavita's colorscape (colours taken from this cover) becomes the blurred backdrop at the top, fading into the page */
body .fullpage-background { opacity: 0 !important; }
body app-series-detail, body app-reading-list-detail { display: block; position: relative; isolation: isolate; }
body app-series-detail::before, body app-reading-list-detail::before {
content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: calc(-1 * (var(--uc-header) + var(--uc-tabs-row))); height: 560px; pointer-events: none;
background:
radial-gradient(55% 85% at 12% 10%, var(--colorscape-primary-color, #262626) 0%, transparent 70%),
radial-gradient(50% 80% at 88% 0%, var(--colorscape-darker-color, #1c1c1c) 0%, transparent 72%),
radial-gradient(45% 75% at 55% 30%, var(--colorscape-complementary-color, #333) 0%, transparent 75%),
radial-gradient(40% 60% at 35% 0%, var(--colorscape-lighter-color, #202020) 0%, transparent 70%);
filter: blur(28px) brightness(.55) saturate(1.2);
-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 100%);
opacity: .9;
}
body app-series-detail > .main-container,
body app-reading-list-detail .main-container .main-container { margin-top: 0 !important; padding-top: 70px !important; }
/* poster left, text right */
body app-series-detail .info-container,
body app-reading-list-detail .info-container { display: flex !important; flex-wrap: nowrap !important; gap: 28px; align-items: flex-end; margin: 0 0 22px !important; }
body app-series-detail .info-container > .image-container,
body app-reading-list-detail .info-container > .image-container {
flex: 0 0 220px !important; max-width: 220px !important; width: 220px !important; padding: 0 !important; margin: 0 !important; align-self: flex-start;
}
body app-series-detail .info-container > div:not(.image-container),
body app-reading-list-detail .info-container > div:not(.image-container) { flex: 1 1 auto !important; min-width: 0; max-width: none !important; width: auto !important; padding: 0 !important; }
body app-series-detail .image-container img,
body app-reading-list-detail .image-container img { border-radius: var(--uc-round) !important; box-shadow: 0 18px 40px rgba(0,0,0,.6); width: 100% !important; height: auto !important; aspect-ratio: 2 / 3; object-fit: cover; }
body app-series-detail .image-container .card-overlay,
body app-series-detail .image-container .overlay-information { border-radius: var(--uc-round) !important; }
body app-series-detail h4.title,
body app-reading-list-detail h4.title { font-size: 2.4rem !important; font-weight: 800 !important; letter-spacing: -.02em; line-height: 1.05 !important; margin: 0 0 4px !important; color: #fff; }
body app-series-detail h4.title > span { display: inline-block; }
body app-series-detail .subtitle { color: var(--uc-muted); font-weight: 600; margin: 0 !important; }
body app-series-detail .subtitle:empty { display: none; }
/* the metadata line as chips */
body app-metadata-detail-row > div { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 8px !important; }
body app-metadata-detail-row > div > * {
display: inline-flex !important; align-items: center; gap: 6px; margin: 0 !important; min-height: 30px; padding: .3rem .75rem;
border-radius: 999px; background: rgba(255,255,255,.09); font-size: .8rem !important; font-weight: 600; color: #ededed; line-height: 1.2;
}
body app-metadata-detail-row .publisher-img-container > div { cursor: pointer; }
body app-metadata-detail-row app-age-rating-image img { width: 22px !important; height: 22px !important; }
body app-metadata-detail-row > div > span:has(app-age-rating-image) { padding: .2rem .55rem; }
body app-series-detail app-external-rating .badge { background: rgba(255,255,255,.09) !important; border-radius: 999px !important; padding: .3rem .75rem .3rem .4rem !important; font-weight: 600; height: 30px; display: inline-flex; align-items: center; gap: 4px; }
body app-series-detail app-external-rating { display: block; }
body app-series-detail .info-container .mt-2.mb-2:has(> app-external-rating) { margin: 0 0 6px !important; }
/* round action buttons, a blue primary pill */
body app-series-detail .info-container .btn-group .btn-outline-primary,
body app-reading-list-detail .info-container .btn-group .btn-outline-primary {
height: 44px; background: var(--uc-accent) !important; border: 0 !important; color: #fff !important; font-weight: 700; padding: 0 20px;
border-radius: 999px 0 0 999px !important; display: inline-flex; align-items: center;
}
body app-series-detail .info-container .btn-group .dropdown-toggle-split,
body app-reading-list-detail .info-container .btn-group .dropdown-toggle-split {
padding: 0 14px 0 10px !important; border-radius: 0 999px 999px 0 !important; border-left: 1px solid rgba(0,0,0,.18) !important;
}
body app-series-detail .info-container .btn-group .btn-outline-primary:hover,
body app-reading-list-detail .info-container .btn-group .btn-outline-primary:hover { background: #0092c4 !important; }
body app-series-detail .info-container .btn-actions,
body app-series-detail .info-container .btn-actions .btn,
body app-reading-list-detail .info-container .btn-actions,
body app-reading-list-detail .info-container .btn-actions .btn {
width: 44px; height: 44px; padding: 0 !important; border-radius: 50% !important; display: inline-flex !important; align-items: center; justify-content: center;
background: rgba(255,255,255,.1) !important; border: 0 !important; color: #fff !important; line-height: 1 !important;
}
body .btn-actions .btn > span:empty { display: none; }
body app-series-detail .info-container div.btn-actions,
body app-reading-list-detail .info-container div.btn-actions { background: transparent !important; }
body app-series-detail .info-container .btn-actions:hover,
body app-series-detail .info-container .btn-actions .btn:hover,
body app-reading-list-detail .info-container .btn-actions .btn:hover { background: rgba(255,255,255,.18) !important; }
body app-series-detail .info-container div.btn-actions:hover,
body app-reading-list-detail .info-container div.btn-actions:hover { background: transparent !important; }
body app-series-detail .info-container .mt-3.mb-3 { margin: 14px 0 6px !important; }
/* summary + details */
body app-series-detail .info-container app-read-more .read-more-cont,
body app-reading-list-detail .info-container app-read-more .read-more-cont { color: #cfcfcf; line-height: 1.6; max-width: 72ch; font-size: .95rem; }
body app-series-detail .upper-details .fw-bold,
body app-reading-list-detail .upper-details .fw-bold { color: var(--uc-muted); font-size: .72rem; font-weight: 700 !important; text-transform: uppercase; letter-spacing: .06em; }
body app-series-detail .upper-details,
body app-reading-list-detail .upper-details { margin-top: 8px !important; margin-bottom: 0 !important; }
body app-series-detail .upper-details .badge-expander .content,
body app-reading-list-detail .upper-details .badge-expander .content { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; font-size: .85rem; }
body app-series-detail .upper-details .badge-expander .content > span,
body app-reading-list-detail .upper-details .badge-expander .content > span { display: none; }
body app-series-detail .upper-details .badge-expander .content > a,
body app-reading-list-detail .upper-details .badge-expander .content > a {
padding: .25rem .7rem; border-radius: 999px; background: rgba(255,255,255,.09); color: #ededed !important; font-weight: 600; text-decoration: none !important; margin: 0 !important;
}
body app-series-detail .upper-details .badge-expander .content > a:hover,
body app-reading-list-detail .upper-details .badge-expander .content > a:hover { background: rgba(255,255,255,.16); }
body app-series-detail .upper-details .row > div:not(:has(a[href^="/person/"])) .badge-expander .content > a[href^="javascript"]:not(.ms-1) { background: var(--uc-accent-soft); color: #7fd5f3 !important; }
body app-series-detail .upper-details .row > div > div > a.font-size { font-size: .85rem; font-weight: 600; color: #ededed !important; }
/* tabs + volumes grid */
body app-series-detail .carousel-tabs-container,
body app-reading-list-detail .carousel-tabs-container { margin: 6px 0 10px !important; border: 0 !important; }
/* the volumes grid follows the poster width with the concept's gaps */
body app-series-detail .tab-content .card-container {
grid-template-columns: repeat(auto-fill, var(--card-image-width)) !important; gap: 8px 16px !important; justify-content: start !important;
}
body app-series-detail .tab-content .card-container > * { width: var(--card-image-width); }
/* the series cover: hover overlay spans the poster, progress floats inside it, "continue from" sits under it */
body app-series-detail app-cover-image { display: block; position: relative; }
body app-series-detail app-cover-image .overlay-information { left: 0 !important; width: 100% !important; border-radius: var(--uc-round) !important; }
body app-series-detail app-cover-image .progress-banner.series {
position: absolute !important; left: 12px; right: 12px; top: calc(var(--uc-poster, 220px) * 1.5 - 30px); bottom: auto; height: 18px; border-radius: 99px; overflow: hidden; z-index: 5;
background: rgba(0,0,0,.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
body app-series-detail app-cover-image .progress-banner.series .progress { height: 18px !important; background: transparent !important; border-radius: 99px; }
body app-series-detail app-cover-image .progress-banner.series .progress-bar { border-radius: 99px; overflow: visible; }
body app-series-detail app-cover-image .progress-banner.series span { font: 700 .7rem/1 var(--uc-font); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
body app-series-detail app-cover-image .under-image .continue-from {
position: static !important; margin-top: 10px; background: transparent !important; color: var(--uc-muted) !important; font-size: .8rem !important; font-weight: 600; padding: 0 !important;
}
/* ---------- 10. reading lists ---------- */
body app-reading-lists .card-detail-layout-item > .px-1 { padding: 0 8px !important; }
body .reading-list-card {
background: var(--uc-surface) !important; border: 1px solid var(--uc-line) !important; border-radius: var(--uc-round) !important;
transition: border-color .15s, background-color .15s, transform .15s;
}
body .reading-list-card:hover { border-color: rgba(0,164,220,.55) !important; background: #1c1c1c !important; }
body .reading-list-card .title-link { color: #fff !important; font-weight: 700; text-decoration: none !important; }
body .reading-list-card .title-link:hover { color: var(--uc-accent) !important; }
body .reading-list-card .cover-container img { border-radius: 12px !important; box-shadow: 0 8px 20px rgba(0,0,0,.35); }
body .reading-list-card .meta-line { color: var(--uc-muted); font-weight: 600; font-size: .8rem; }
body .reading-list-card .summary-text { color: #cfcfcf; }
body .reading-list-card .tag-pill { background: rgba(255,255,255,.09) !important; border: 0 !important; color: #e6e6e6 !important; font-weight: 600; padding: .3rem .7rem; }
/* list page: storyline rows as rounded surfaces */
body app-reading-list-detail h4.title { font-size: 2rem !important; }
body app-reading-list-detail h4.title .ms-1 { color: var(--uc-muted); font-weight: 600; font-size: .55em; letter-spacing: 0; }
body app-reading-list-detail #rl-filter { border-radius: 999px !important; padding-left: 16px; height: 38px; }
body app-draggable-ordered-list .example-box {
background: var(--uc-surface) !important; border: 1px solid var(--uc-line) !important; border-radius: var(--uc-round) !important; margin: 0 0 10px !important; overflow: hidden;
}
body app-draggable-ordered-list .example-box:hover { border-color: rgba(255,255,255,.16) !important; }
body app-draggable-ordered-list .list-container { background: transparent !important; }
body .reading-list-item { background: transparent !important; }
body .reading-list-item .overlay { border-radius: 12px !important; box-shadow: 0 8px 18px rgba(0,0,0,.35); }
body .reading-list-item .overlay img { border-radius: 12px !important; }
body .reading-list-item .not-read-badge { top: 8px !important; right: 8px !important; width: 10px !important; height: 10px !important; border: 0 !important; border-radius: 50%; background: var(--uc-accent); box-shadow: 0 0 0 2px rgba(16,16,16,.55); }
body .reading-list-item .title-row { color: #fff; font-weight: 700; }
body .reading-list-item .chapter-number { color: var(--uc-accent) !important; font-weight: 700; text-decoration: none !important; }
body .reading-list-item .release-date, body .reading-list-item .text-muted { color: var(--uc-muted) !important; }
/* ---------- 11. authors (Kavita's "Browse People", relabelled) ---------- */
body app-browse-people app-side-nav-companion-bar h2 > span { font-size: 0 !important; }
body app-browse-people app-side-nav-companion-bar h2 > span::before { content: "Authors"; font-size: 1.5rem; }
body app-person-card .card-item-container { background: transparent !important; border: 0 !important; }
body app-person-card .card-item-container .overlay {
width: 150px !important; height: 150px !important; margin: 4px auto 0; border-radius: 50% !important; overflow: hidden;
background: var(--uc-raised) !important; box-shadow: 0 8px 20px rgba(0,0,0,.4); transition: transform .15s ease-in-out, box-shadow .15s ease-in-out;
}
body app-person-card .card-item-container .overlay app-image, body app-person-card .card-item-container .overlay img { width: 150px !important; height: 150px !important; border-radius: 50% !important; object-fit: cover; object-position: top; }
body app-person-card .card-item-container .overlay .card-overlay { border-radius: 50% !important; }
body app-person-card .card-item-container .missing-img { color: #5a5a5a; }
body app-person-card .card-item-container:hover .overlay { transform: scale(1.04); box-shadow: 0 0 0 3px var(--uc-accent), 0 14px 28px rgba(0,0,0,.5); }
body app-person-card .card-body { padding: 10px 2px 0 !important; }
body app-person-card .card-body .card-title { font: 600 .9rem/1.25 var(--uc-font) !important; color: var(--uc-fg); padding: 0 !important; }
body app-person-card .tag-meta { display: flex !important; justify-content: center !important; gap: 10px; color: var(--uc-muted); font-size: .76rem; font-weight: 500; }
body app-person-card .tag-meta > * { margin: 0 !important; }
/* ---------- 12. person page: photo, name, bio, works ---------- */
body app-person-detail > .main-container { position: relative; padding-top: 22px !important; }
body app-person-detail > .main-container > div:first-child {
position: absolute; z-index: 2; top: 50px; left: calc(22px + 170px + 28px); right: 22px;
}
body app-person-detail > .main-container > div:first-child h2.title {
display: flex; align-items: center; gap: 6px; flex-direction: row-reverse; justify-content: flex-end;
font-size: 2.2rem !important; font-weight: 800 !important; letter-spacing: -.02em; line-height: 1.1;
}
body app-person-detail > .main-container > div:first-child h2.title app-card-actionables .btn { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.07); display: inline-flex; align-items: center; justify-content: center; padding: 0; }
body app-person-detail > .main-container > div:first-child h2.title app-card-actionables .btn > span:empty { display: none; }
body app-person-detail .main-container.pt-2 { margin: 0 !important; padding: 0 !important; }
body app-person-detail .info-container { display: flex !important; flex-wrap: nowrap !important; gap: 28px; align-items: flex-start; margin: 0 0 18px !important; min-height: 170px; }
body app-person-detail .info-container > .image-container {
display: block !important; flex: 0 0 170px !important; max-width: 170px !important; width: 170px !important; padding: 0 !important; margin: 0 !important;
}
body app-person-detail .info-container .person-badge {
width: 170px !important; height: 170px !important; max-height: none !important; border-radius: 50% !important; overflow: hidden; background: var(--uc-raised) !important;
box-shadow: 0 0 0 4px rgba(0,164,220,.35), 0 16px 34px rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center;
}
body app-person-detail .info-container .person-badge app-image, body app-person-detail .info-container .person-badge img { width: 170px !important; height: 170px !important; object-fit: cover; }
body app-person-detail .info-container .person-badge i { font-size: 4.5rem !important; height: auto !important; color: #555; }
body app-person-detail .info-container > div:not(.image-container) { flex: 1 1 auto !important; max-width: none !important; width: auto !important; padding: 84px 0 0 !important; margin: 0 !important; }
body app-person-detail .info-container app-read-more { padding: 0 !important; }
body app-person-detail .info-container > div:not(.image-container) > .row { margin: 0 !important; padding: 0 !important; }
body app-person-detail .info-container app-read-more .read-more-cont { color: #cfcfcf; line-height: 1.6; max-width: 72ch; font-size: .95rem; padding: 0; }
body app-person-detail .info-container .fw-bold { color: var(--uc-muted); font-size: .72rem; font-weight: 700 !important; text-transform: uppercase; letter-spacing: .06em; padding: 0; margin-top: 12px !important; }
body app-person-detail .info-container .badge-expander .content { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
body app-person-detail .info-container .badge-expander .content > span:not(:has(*)) { display: none; }
body app-person-detail .info-container .badge-expander .content > a,
body app-person-detail .info-container .badge-expander .content > span:has(*) {
font-size: .8rem; font-weight: 600; padding: .3rem .75rem; border-radius: 999px; background: var(--uc-accent-soft); color: #7fd5f3 !important; text-decoration: none !important;
}
body app-person-detail .info-container > div:not(.image-container) > .row > div { padding: 0; }
body app-person-detail > .main-container > .row.mt-2 { margin: 0 !important; padding: 0 !important; }
body app-person-detail > .main-container > .row.mt-2 > * { padding: 0 !important; }
body app-person-detail .row.mt-2:empty, body app-person-detail .row.pt-3:empty { display: none; }
/* ---------- 13. want to read + empty states ---------- */
body app-want-to-read app-side-nav-companion-bar h4 { font-size: 0 !important; }
body app-want-to-read app-side-nav-companion-bar h4::before { content: "Want to Read"; font-size: 1.5rem; }
body app-want-to-read .main-container.ps-0 { padding-left: 22px !important; }
body .viewport-container.empty .card-container > p {
display: inline-flex; align-items: center; gap: 10px; margin: 18px 0 0; padding: 18px 22px; border-radius: var(--uc-round);
background: var(--uc-surface); border: 1px solid var(--uc-line); color: var(--uc-muted); font-weight: 600;
}
body .viewport-container.empty .card-container > p::before { content: "\f005"; font-family: "Font Awesome 7 Free", "Font Awesome 6 Free", "Font Awesome 5 Free"; font-weight: 400; color: var(--uc-accent); font-size: 1.1rem; }
/* ---------- 14. widths: tabs inline from 1200 px, a second glass row below it ---------- */
@media (min-width: 1200px) {
/* the tabs are fixed-positioned over this gap, so the search can never slide under them */
body .navbar-brand { margin-right: 540px !important; }
}
@media (max-width: 1199.98px) {
:root body { --uc-tabs-row: 46px; }
body app-side-nav .side-nav-container:not(.hidden) {
top: var(--uc-header) !important; left: 0 !important; right: 0 !important; width: 100% !important; max-width: none !important;
height: var(--uc-tabs-row) !important; padding: 0 16px !important; z-index: 1039 !important;
background: var(--uc-glass) !important; -webkit-backdrop-filter: blur(15px); backdrop-filter: blur(15px); border-bottom: 1px solid var(--uc-line) !important;
}
body app-side-nav .side-nav-item { padding: .4rem .8rem !important; }
}
@media (max-width: 767.98px) {
body .navbar > .container-fluid { padding: 0 14px; gap: 8px; }
body .navbar .navbar-nav.col { flex: 1 1 auto !important; width: auto !important; margin-right: 0 !important; }
body .navbar .input-hint { display: none !important; }
body .navbar .nav-item > .btn, body .navbar .btn-icon { width: 36px; padding: 0 !important; }
body .navbar .btn-outline-secondary.primary-text { width: 36px; height: 36px; border-radius: 50% !important; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center; border: 0; background: rgba(255,255,255,.07); }
body app-side-nav .side-nav-container:not(.hidden) { padding: 0 10px !important; }
body .main-container { padding-left: 14px !important; padding-right: 14px !important; }
}
@media (max-width: 1199.98px) {
body app-side-nav .side-nav { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); padding-right: 24px !important; }
}
@media (max-width: 575.98px) {
/* phone posters, like the concept's 118 px strips (Kavita reads these two variables when it draws a card) */
:root body { --card-image-width: 6.875rem; --card-image-height: 10rem; }
body .card-item-container .card-title-container .card-title { font-size: .82rem !important; }
body .card-item-container .count .badge { min-width: 22px; height: 22px; font-size: .68rem; }
}
/* ---------- 15. tablets + phones: item pages as Jellyfin's mobile layout ---------- */
@media (max-width: 991.98px) {
/* poster + title side by side, buttons/summary/details full width below (the text column's children join the grid) */
body app-series-detail .info-container,
body app-reading-list-detail .info-container {
--uc-poster: 160px; display: grid !important; grid-template-columns: var(--uc-poster) minmax(0, 1fr); column-gap: 18px; row-gap: 0; align-items: start;
}
body app-series-detail .info-container > .image-container,
body app-reading-list-detail .info-container > .image-container {
display: block !important; grid-column: 1; grid-row: 1 / span 4; width: var(--uc-poster) !important; max-width: var(--uc-poster) !important; flex: none !important;
/* Kavita turns this cover into a faint full-screen background below 992 px: keep it a poster */
position: relative !important; top: auto !important; left: auto !important; height: auto !important; max-height: none !important; pointer-events: auto !important;
}
body app-series-detail .info-container > .image-container app-image img,
body app-reading-list-detail .info-container > .image-container app-image img {
opacity: 1 !important; filter: none !important; position: static !important; width: 100% !important; max-width: 100% !important; height: auto !important; max-height: none !important; object-fit: cover !important;
}
body app-series-detail .info-container > div:not(.image-container),
body app-reading-list-detail .info-container > div:not(.image-container) { display: contents !important; }
body app-series-detail .info-container > div:not(.image-container) > *,
body app-reading-list-detail .info-container > div:not(.image-container) > * { grid-column: 2; min-width: 0; }
body app-series-detail .info-container > div:not(.image-container) > :is(.mt-3, .mt-2.mb-3, .upper-details),
body app-reading-list-detail .info-container > div:not(.image-container) > :is(.mt-3, .mt-2, .upper-details) { grid-column: 1 / -1; }
body app-series-detail .info-container > div:not(.image-container) > .mt-3.mb-3,
body app-reading-list-detail .info-container > div:not(.image-container) > .mt-3.mb-3 { margin-top: 16px !important; }
body app-series-detail h4.title { font-size: 2rem !important; }
body app-series-detail app-cover-image .progress-banner.series,
body app-series-detail app-cover-image .under-image { display: none !important; }
body app-series-detail > .main-container,
body app-reading-list-detail .main-container .main-container { padding-top: 40px !important; }
}
@media (max-width: 767.98px) {
body app-series-detail .info-container,
body app-reading-list-detail .info-container { --uc-poster: 120px; column-gap: 16px; }
body app-series-detail h4.title, body app-reading-list-detail h4.title { font-size: 1.6rem !important; }
body app-metadata-detail-row > div { gap: 6px; margin: 10px 0 6px !important; }
body app-metadata-detail-row > div > * { min-height: 26px; padding: .2rem .6rem; font-size: .72rem !important; }
body app-series-detail > .main-container,
body app-reading-list-detail .main-container .main-container { padding-top: 30px !important; }
body app-series-detail .upper-details .row > .col-6 { padding-right: 10px !important; }
/* person: a smaller photo, the name beside it */
body app-person-detail > .main-container > div:first-child { top: 30px; left: calc(14px + 96px + 16px); right: 14px; }
body app-person-detail > .main-container > div:first-child h2.title { font-size: 1.5rem !important; }
body app-person-detail .info-container { gap: 16px; min-height: 96px; }
body app-person-detail .info-container > .image-container { flex: 0 0 96px !important; max-width: 96px !important; width: 96px !important; }
body app-person-detail .info-container .person-badge,
body app-person-detail .info-container .person-badge app-image,
body app-person-detail .info-container .person-badge img { width: 96px !important; height: 96px !important; }
body app-person-detail .info-container .person-badge { box-shadow: 0 0 0 3px rgba(0,164,220,.35), 0 10px 24px rgba(0,0,0,.5); }
body app-person-detail .info-container > div:not(.image-container) { padding-top: 46px !important; }
body app-person-detail .row.mt-2 { padding: 0 !important; }
}
@media (max-width: 575.98px) {
/* Kavita writes "repeat(auto-fill, 10rem)" inline on the grid: follow the phone poster width instead */
body #card-detail-layout-items-container.grid:not([style*="minmax"]) { grid-template-columns: repeat(auto-fill, var(--card-image-width)) !important; column-gap: 0 !important; justify-content: space-between !important; }
}
@media (max-width: 575.98px) {
/* reading lists: one card per row */
body #card-detail-layout-items-container.grid[style*="minmax"] { grid-template-columns: 1fr !important; }
/* authors: smaller photos so three fit a row */
body app-person-card .card-item-container { width: var(--card-image-width) !important; }
body app-person-card .card-item-container .overlay,
body app-person-card .card-item-container .overlay app-image,
body app-person-card .card-item-container .overlay img { width: 96px !important; height: 96px !important; }
body app-person-card .card-body .card-title { font-size: .8rem !important; }
body app-person-card .tag-meta { flex-direction: column; gap: 0; align-items: center; font-size: .7rem; }
}
/* ---------- 16. settings: its own side nav as a rounded panel under the header ---------- */
body app-preference-nav .side-nav-container.preference { left: 16px !important; height: calc(var(--vh, 1vh) * 100 - var(--uc-header) - 1.5rem) !important; padding: 8px 0 !important; border: 1px solid var(--uc-line) !important; }
body app-preference-nav .side-nav-header { color: var(--uc-muted) !important; font-size: .72rem !important; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
body app-preference-nav .side-nav-item { border-radius: 999px !important; margin: 1px 10px 1px 0; width: auto !important; }
body app-preference-nav .side-nav-item.active { background: var(--uc-accent-soft) !important; }
body app-preference-nav .side-nav-item.active .side-nav-text { color: #fff !important; }
body app-preference-nav .side-nav-item .active-highlight { display: none; }
@media (max-width: 991.98px) {
body app-preference-nav .side-nav-container.preference { top: 0 !important; left: 0 !important; height: 100dvh !important; border-radius: 0 !important; padding-top: calc(var(--uc-header) + 8px) !important; z-index: 1039 !important; }
body .content-wrapper:has(> app-preference-nav) .companion-bar,
body .content-wrapper:has(> app-preference-nav .side-nav-container) .companion-bar { margin-left: 0 !important; }
/* the menu's backdrop sat ABOVE the menu (z 1041 vs 1039): an opaque blue-grey screen hid everything. It now dims the page under the menu */
body app-preference-nav .side-nav-overlay { z-index: 1038 !important; background-color: rgba(0,0,0,.6) !important; }
/* Kavita pins the menu list itself at top 0 (fixed): start it under the header so "Account" is not hidden */
body app-preference-nav .side-nav-container.preference .side-nav { top: calc(var(--uc-header) + 4px) !important; height: calc(100dvh - var(--uc-header) - 4px) !important; }
}
/* ---------- 17. review fixes (critic pass) ---------- */
/* a series with no cover: a quiet book glyph on the poster surface instead of Kavita's red "!" error image */
body .card-item-container .overlay:has(> app-image > img[src*="error-placeholder"]) { background: linear-gradient(160deg, #2a2a2a 0%, #1b1b1b 100%) !important; }
body .card-item-container .overlay > app-image > img[src*="error-placeholder"] { opacity: 0 !important; }
body .card-item-container .overlay:has(> app-image > img[src*="error-placeholder"])::before {
content: "\f02d"; position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none;
font: 900 2.6rem/1 "Font Awesome 7 Free", "Font Awesome 6 Free", "Font Awesome 5 Free"; color: rgba(255,255,255,.13);
}
/* the tab you are "inside" stays lit: folder pages -> Collections, a list -> Reading Lists, a person -> Authors */
body:has(app-collection-detail) app-side-nav a.side-nav-item[href="/collections"],
body:has(app-reading-list-detail) app-side-nav a.side-nav-item[href="/lists"],
body:has(app-person-detail) app-side-nav a.side-nav-item[href^="/browse/"] { color: #fff !important; background: rgba(255,255,255,.1) !important; }
/* the publisher was the one info chip without its pill (Kavita's component rule outranked ours) */
body app-metadata-detail-row > div > .publisher-img-container { background: rgba(255,255,255,.09) !important; border-radius: 999px !important; padding: .3rem .75rem !important; }
/* writer/genre chips never break inside the pill (they wrapped to two lines on phones) */
body app-series-detail .upper-details .badge-expander .content > a,
body app-reading-list-detail .upper-details .badge-expander .content > a { display: inline-block; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
/* search sheet: one dark sheet (the nested result lists had their own rounded border, so covers showed through the corners) */
body app-grouped-typeahead #dropdown.list-group { background: var(--uc-raised) !important; }
body app-grouped-typeahead .list-group .list-group { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; background: transparent !important; }
body app-grouped-typeahead .section-header { padding-top: .7rem !important; padding-bottom: .35rem !important; }
body app-grouped-typeahead .section-header h5 { font: 700 .75rem/1.2 var(--uc-font) !important; letter-spacing: .06em; color: var(--uc-accent) !important; margin: 0 !important; }
body app-grouped-typeahead .list-group-item .text-light { color: var(--uc-muted) !important; font-size: .78rem; }
/* filter panel: Kavita's select2 boxes were still the stock grey-blue with a white border and an orange focus ring */
body .select2-container--default .select2-selection {
background-color: rgba(255,255,255,.07) !important; border: 1px solid rgba(255,255,255,.12) !important; border-radius: 10px !important; color: var(--uc-fg) !important; min-height: 38px;
}
body .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--uc-fg) !important; line-height: 36px !important; padding-left: 12px !important; }
body .select2-container--default .select2-selection--single .select2-selection__arrow { height: 36px !important; }
body .select2-container--default .select2-selection--single .select2-selection__arrow b { border-top-color: var(--uc-muted) !important; }
body .select2-container--default.select2-container--open .select2-selection,
body .select2-container--default.select2-container--focus .select2-selection { border-color: var(--uc-accent) !important; }
body .select2-container--default .select2-selection--multiple .select2-selection__choice {
background: rgba(255,255,255,.1) !important; border: 0 !important; border-radius: 999px !important; color: #f2f2f2 !important; font-weight: 600; font-size: .82rem; padding: 2px 10px !important;
}
body .select2-container--default .select2-selection__choice__remove { color: var(--uc-muted) !important; border: 0 !important; }
body .select2-container--default .select2-selection__clear { color: var(--uc-muted) !important; }
body .select2-dropdown {
background: var(--uc-raised) !important; border: 1px solid var(--uc-line) !important; border-radius: 12px !important; overflow: hidden; box-shadow: 0 14px 34px rgba(0,0,0,.6); margin-top: 4px;
}
body .select2-container--default .select2-results__option { background: transparent !important; color: #e6e6e6 !important; padding: .45rem .8rem !important; font-size: .88rem; }
body .select2-container--default .select2-results__option--highlighted,
body .select2-container--default .select2-results__option--highlighted[aria-selected],
body .select2-container--default .select2-results__option[aria-selected="true"] { background: var(--uc-accent-soft) !important; color: #fff !important; }
body .select2-container--default .select2-search--dropdown .select2-search__field,
body .select2-container--default .select2-search--inline .select2-search__field { background: rgba(255,255,255,.07) !important; border: 1px solid rgba(255,255,255,.14) !important; border-radius: 8px !important; color: #f2f2f2 !important; outline: 0 !important; box-shadow: none !important; }
body .select2-container--default .select2-search--inline .select2-search__field { border: 0 !important; background: transparent !important; }
body .select2-container--default .select2-search--dropdown .select2-search__field:focus { border-color: var(--uc-accent) !important; }
/* unchecked checkboxes were near-invisible on the dark panels */
body .form-check-input:not(:checked) { border-color: rgba(255,255,255,.32) !important; }
@media (max-width: 575.98px) {
/* reading lists on a phone keep a small cover (Kavita drops it below 576 px) */
body .reading-list-card .cover-container.d-none { display: block !important; width: 72px !important; height: 102px !important; flex: 0 0 72px !important; }
}
body app-metadata-detail-row > div > .publisher-img-container > div { line-height: 1.2 !important; height: auto !important; min-height: 0 !important; }
/* switches: Bootstrap's knob is dark grey, invisible on these panels */
body .form-switch .form-check-input:not(:checked) { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23bdbdbd'/%3e%3c/svg%3e") !important; }
/* reading-list cards: a tag that does not fit ends in "..." instead of being cut at the card edge */
body .reading-list-card .tag-row > .tag-pill { flex: 0 0 auto; }
body .reading-list-card .tag-row > .tag-pill:last-child { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 767.98px) {
/* list page on a phone: Kavita's 3rem column padding left the writer chips ~95 px */
body app-reading-list-detail .upper-details .col-6.pe-5,
body app-series-detail .upper-details .col-6.pe-5 { padding-right: 10px !important; }
}
@media (max-width: 575.98px) {
/* authors on a phone: three to a row (3 x 110 px did not fit beside the letter bar, leaving two names and a hole) */
body app-browse-people #card-detail-layout-items-container.grid:not([style*="minmax"]) { grid-template-columns: repeat(auto-fill, 102px) !important; }
body app-browse-people app-person-card .card-item-container { width: 102px !important; }
}
/* ---------- 18. hover like the user's Jellyfin (2026-10-03): the WHOLE card grows (poster + title together), the poster
darkens with a round read button in the middle; no blue rings; rows/grids get room so a grown card is never clipped ---------- */
body { --card-overlay-hover-bg-color: rgba(0,0,0,.45); --uc-grow: 1.06; }
/* undo the poster-only zoom + ring */
body .card-item-container:hover .overlay,
body app-person-card .card-item-container:hover .overlay { transform: none !important; box-shadow: 0 8px 20px rgba(0,0,0,.35) !important; }
/* the card as one unit */
body .card-item-container { transition: transform .2s ease, filter .2s ease; transform-origin: 50% 50%; will-change: transform; }
body .card-item-container:hover { transform: scale(var(--uc-grow)); z-index: 20; position: relative; }
body .card-item-container:hover .overlay { box-shadow: 0 16px 34px rgba(0,0,0,.6) !important; }
/* darken overlay over the whole poster */
body .card-item-container .card-overlay { height: 100% !important; border-radius: var(--uc-round) !important; background-color: rgba(0,0,0,0) !important; transition: background-color .2s ease; }
body .card-item-container:hover .card-overlay { background-color: rgba(0,0,0,.45) !important; }
/* round read button in the centre (white glass, never blue) */
body .card-item-container .overlay-information--centered { background: transparent !important; }
body .card-item-container .overlay-information--centered .read-btn {
width: 54px !important; height: 54px !important; border-radius: 50% !important; display: grid !important; place-items: center;
background: rgba(255,255,255,.16) !important; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
border: 1px solid rgba(255,255,255,.28) !important; color: #fff !important; font-size: 1.15rem !important; padding: 0 !important;
}
body .card-item-container .overlay-information--centered .read-btn:hover,
body .card-item-container .overlay-information--centered:hover { background: rgba(255,255,255,.26) !important; }
/* folder tiles: same grow + darken, no ring */
body app-collection-detail app-read-more .read-more-cont > div > a { transition: transform .2s ease, box-shadow .2s ease !important; }
body app-collection-detail app-read-more .read-more-cont > div > a:hover {
transform: scale(var(--uc-grow)) !important; box-shadow: inset 0 0 0 999px rgba(0,0,0,.28), 0 16px 34px rgba(0,0,0,.6) !important; z-index: 2;
}
/* reading-list cards and links: neutral hover */
body .reading-list-card:hover { border-color: rgba(255,255,255,.18) !important; }
body .reading-list-card .title-link:hover { color: #fff !important; }
/* row titles stay white and still */
body .carousel-container .section-title,
body .carousel-container .section-title:hover,
body .carousel-container .section-title:focus { color: #fff !important; transform: none !important; text-decoration: none !important; }
/* room to grow: carousels and grids get padding (and the same negative margin, so the layout does not move) */
body app-carousel-reel swiper-container { padding: 14px 12px 18px !important; margin: -14px -12px -12px !important; }
body #card-detail-layout-items-container { padding: 12px 10px !important; }
body app-collection-detail app-read-more .read-more-cont > div { padding: 8px 6px !important; }
@media (prefers-reduced-motion: reduce) {
body .card-item-container, body app-collection-detail app-read-more .read-more-cont > div > a { transition: none !important; }
}
/* 18b. the read button's container never turns blue; the in-poster title band (meta-title) is hidden -- the title sits under the poster */
body app-entity-card .card-item-container .overlay-information--centered,
body app-entity-card .card-item-container .overlay-information--centered:hover,
body .card-item-container .overlay-information .overlay-information--centered:hover { background: transparent !important; box-shadow: none !important; }
body app-entity-card .card-item-container .overlay-information--centered .read-btn:hover { background: rgba(255,255,255,.28) !important; }
body .card-item-container .meta-title, body .card-item-container:hover .meta-title { display: none !important; }
/* 18c. carousels clip inside their own shadow frame (.swiper, overflow hidden, no CSS part): the room goes INSIDE it, on the
exposed "wrapper" part, which also opens up the gap between a row's title and its cards; the outer container stops clipping */
body app-carousel-reel swiper-container { padding: 0 !important; margin: 0 !important; }
body app-carousel-reel swiper-container::part(wrapper) { padding-top: 18px; padding-bottom: 22px; }
body .carousel-container { overflow: visible !important; }
body .carousel-container .header, body .carousel-container h4.header { margin: 0 0 4px !important; }
/* the first card of a row grows to the right so its left edge is never cut */
body app-carousel-reel swiper-slide:first-child .card-item-container { transform-origin: 0 50%; }
/* grids and folder tiles: a little more air above the first row */
body #card-detail-layout-items-container { padding: 18px 12px 14px !important; }
body app-collection-detail app-read-more .read-more-cont > div { padding: 14px 8px 10px !important; }
/* ---------- 19. "Reading Lists" is called "Reading Orders" (the user's wording, 2026-10-03) ---------- */
body app-side-nav a.side-nav-item[href="/lists"] .side-nav-text > div { font-size: 0 !important; }
body app-side-nav a.side-nav-item[href="/lists"] .side-nav-text > div::before { content: "Reading Orders"; font-size: .9rem; }
body app-reading-lists app-side-nav-companion-bar h4 > span { font-size: 0 !important; }
body app-reading-lists app-side-nav-companion-bar h4 > span::before { content: "Reading Orders"; font-size: 1.5rem; }
/* ===== 20. Form controls (2026-10-04): native dropdown lists stay readable.
Windows/Firefox paint a