/*
Theme Name: Madara-Child
Description:  A child theme for Madara - WordPress Theme for Manga, Novel sites
Author:       Madara
Author URI:   https://mangabooth.com/
Template: madara
Tags: one-column, two-columns, right-sidebar, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, translation-ready
Version: 1.0.5
*/

/* ========== Comic Dekho - CSS Variables ========== */
:root {
    --cd-ink: #0a0809;
    --cd-pap: #f2f2f2;          /* neutral off-white — text and borders on dark */
    --cd-red: #e0213f;
    --cd-dk: #4a0b17;
    --cd-mu: #9b8f91;
    --cd-ln: #3a2f33;

    /* Dark surfaces. Every panel that used to be a light block uses one of
       these, so nothing on the site is lighter than the page itself. */
    --cd-surf: #151213;
    --cd-surf-2: #1e1a1b;
    --cd-glass: rgba(255, 255, 255, 0.12);

    /* Member early access. Gold marks a chapter a member can read before it
       opens to everyone — a different perk from the red "locked" state, so it
       gets its own colour rather than a tint of the site accent. */
    --cd-gold: #f5b041;
    --cd-gold-bright: #ffc85a;
    --cd-gold-soft: #d9b877;
    --cd-gold-bg: #15120e;

    /* Type stack. Dela is a heavy display face — it only belongs on large
       headings and numerals. Inter carries Latin body/UI text; Zen Kaku stays
       behind it so Japanese glyphs (見, ゴゴゴ, ホーム, …) still resolve. */
    --cd-font-ui: "Inter", "Zen Kaku Gothic New", system-ui, -apple-system, sans-serif;
    --cd-font-display: "Dela Gothic One", "Zen Kaku Gothic New", sans-serif;
}

/* ========== Global Base ========== */
html {
    scroll-padding-top: calc(72px + env(safe-area-inset-top, 0px));
}

body {
    background-color: var(--cd-ink) !important;
    color: var(--cd-pap) !important;
    font-family: var(--cd-font-ui) !important;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Madara sets Poppins on its own wrapper - keep the whole page on one stack */
body .wrap,
body .body-wrap,
body .site-content,
body .c-page-content,
body .content-area,
body main,
body article,
body .wp-manga,
body .entry-content,
body .post-content {
    font-family: var(--cd-font-ui);
}

body::before {
    content: "";
    position: fixed;
    inset: 0 0 auto;
    height: env(safe-area-inset-top, 0px);
    z-index: 30;
    background: var(--cd-ink);
}

/* Remove madara's default backgrounds */
body .wrap,
body .body-wrap,
body .site-content,
body .c-page-content,
body .content-area {
    background-color: transparent !important;
    background-image: none !important;
}

/* ========== Header - Comic Dekho Style ========== */
.site-header.cd-header {
    position: sticky;
    top: env(safe-area-inset-top, 0px);
    z-index: 999;
    background: var(--cd-ink);
    border-bottom: 3px solid var(--cd-red);
    margin: 0;
    padding: 0;
}

.cd-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.cd-hd {
    display: flex;
    align-items: center;
    gap: 26px;
    height: 64px;
}

.cd-lg {
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    color: var(--cd-pap);
    text-decoration: none;
}

.cd-lg span {
    font-family: var(--cd-font-display);
    font-size: 1.25rem;
    font-weight: 400;
    letter-spacing: 0.01em;
}

.cd-hk {
    font-family: var(--cd-font-display);
    font-style: normal;
    font-size: 1.25rem;
    line-height: 1;
    background: var(--cd-red);
    color: var(--cd-pap);
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    transform: rotate(-6deg);
}

.cd-nav {
    display: flex;
    gap: 22px;
    flex: 1;
}

.cd-nav a,
.cd-nav-list li a {
    padding: 6px 0;
    font-weight: 700;
    color: var(--cd-mu);
    border-bottom: 3px solid transparent;
    white-space: nowrap;
    text-decoration: none;
    transition: color 0.15s, border-color 0.15s;
}

.cd-nav a:hover,
.cd-nav a.on,
.cd-nav-list li a:hover,
.cd-nav-list li.current-menu-item > a,
.cd-nav-list li.current-menu-ancestor > a {
    color: var(--cd-pap);
    border-color: var(--cd-red);
}

/* Submenu support */
.cd-nav-list {
    display: flex;
    gap: 22px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.cd-nav-list li {
    position: relative;
    display: inline-block;
}

.cd-nav-list .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--cd-ink);
    border: 2px solid var(--cd-pap);
    padding: 8px 0;
    min-width: 160px;
    z-index: 100;
    list-style: none;
}

.cd-nav-list li:hover > .sub-menu,
.cd-nav-list li:focus-within > .sub-menu {
    display: block;
}

.cd-nav-list .sub-menu li {
    display: block;
}

.cd-nav-list .sub-menu a {
    display: block;
    padding: 8px 16px;
    border: none;
    color: var(--cd-pap);
    font-weight: 500;
    font-size: 0.95rem;
}

.cd-nav-list .sub-menu a:hover {
    background: var(--cd-red);
    color: #fff;
}

/* Search form - desktop */
.cd-sr-form {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cd-sr {
    background: transparent;
    border: 2px solid var(--cd-ln);
    padding: 7px 12px;
    width: 210px;
    min-width: 0;
    font: inherit;
    color: var(--cd-pap);
}

.cd-sr:focus {
    border-color: var(--cd-pap);
    outline: 0;
}

.cd-sr-submit {
    background: transparent;
    border: 2px solid var(--cd-ln);
    color: var(--cd-mu);
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    cursor: pointer;
    padding: 0;
}

.cd-sr-submit:hover {
    border-color: var(--cd-pap);
    color: var(--cd-pap);
}

/* Mobile search bar */
.cd-sb {
    display: none;
    margin-left: auto;
    width: 40px;
    height: 40px;
    place-items: center;
    background: transparent;
    border: 2px solid var(--cd-ln);
    cursor: pointer;
    color: var(--cd-mu);
}

.cd-sb:hover {
    border-color: var(--cd-pap);
    color: var(--cd-pap);
}

.cd-sbar {
    display: none;
    position: relative;
    padding: 0 20px 12px;
    background: var(--cd-ink);
}

.cd-sbar.open {
    display: block;
}

.cd-sbar .cd-sr-form-mobile {
    width: 100%;
}

.cd-sbar .cd-sr {
    width: 100%;
    font-size: 16px;
    padding-right: 48px;
}

.cd-sbar .cd-sr::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

.cd-sx {
    position: absolute;
    top: 0;
    bottom: 12px;
    right: 20px;
    width: 44px;
    display: grid;
    place-items: center;
    background: none;
    border: 0;
    color: var(--cd-mu);
    cursor: pointer;
}

.cd-sx:hover {
    color: var(--cd-pap);
}

/* Mobile menu button */
.cd-mb {
    display: none;
    width: 40px;
    height: 40px;
    place-items: center;
    background: transparent;
    border: 2px solid var(--cd-ln);
    cursor: pointer;
    color: var(--cd-mu);
}

.cd-mb:hover {
    border-color: var(--cd-pap);
    color: var(--cd-pap);
}

/* Mobile menu panel */
.cd-mm {
    display: none;
}

.cd-mm.open {
    position: fixed;
    left: 0;
    right: 0;
    top: calc(59px + env(safe-area-inset-top, 0px));
    bottom: 0;
    z-index: 998;
    display: block;
    padding: 18px 20px calc(24px + env(safe-area-inset-bottom, 0px));
    background: var(--cd-ink);
    overflow-y: auto;
    list-style: none;
    margin: 0;
}

.cd-mm-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

.cd-mm li {
    display: block;
    list-style: none;
    margin: 0;
    padding: 0;
}

.cd-mm a {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 16px;
    border: 3px solid var(--cd-pap);
    color: var(--cd-pap);
    font-family: var(--cd-font-ui);
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1.2;
    text-decoration: none;
}

.cd-mm a small {
    font-family: var(--cd-font-ui);
    font-weight: 500;
    font-size: 0.8rem;
    color: var(--cd-mu);
}

.cd-mm a:hover,
.cd-mm a:active {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--cd-pap);
    color: var(--cd-pap);
}

.cd-mm a.on {
    background: var(--cd-red);
    border-color: var(--cd-red);
    color: #fff;
}

.cd-mm a:hover small,
.cd-mm a:active small,
.cd-mm a.on small {
    color: inherit;
    opacity: 0.75;
}

.cd-mm.open a {
    animation: cd-mi 0.28s both;
    animation-delay: calc(var(--i, 0) * 35ms);
}

/* Stagger animation via nth-child when JS sets --i not available */
.cd-mm.open li:nth-child(1) a { animation-delay: 0ms; }
.cd-mm.open li:nth-child(2) a { animation-delay: 35ms; }
.cd-mm.open li:nth-child(3) a { animation-delay: 70ms; }
.cd-mm.open li:nth-child(4) a { animation-delay: 105ms; }
.cd-mm.open li:nth-child(5) a { animation-delay: 140ms; }
.cd-mm.open li:nth-child(6) a { animation-delay: 175ms; }
.cd-mm.open li:nth-child(7) a { animation-delay: 210ms; }
.cd-mm.open li:nth-child(n+8) a { animation-delay: 245ms; }

/* Account rows live outside .cd-mm-list, so they need their own turn in the
 * stagger — without this they pop in before the nav items do. */
.cd-mm.open .cd-mm-acct { animation: cd-mi 0.28s both; }
.cd-mm.open .cd-mm-acct-links a:nth-child(1) { animation-delay: 0ms; }
.cd-mm.open .cd-mm-acct-links a:nth-child(2) { animation-delay: 35ms; }
.cd-mm.open .cd-mm-acct-links a:nth-child(3) { animation-delay: 70ms; }
.cd-mm.open .cd-mm-acct-links a:nth-child(4) { animation-delay: 105ms; }
.cd-mm.open .cd-mm-signout { animation: cd-mi 0.28s both 245ms; }

@media (prefers-reduced-motion: reduce) {
    .cd-mm.open .cd-mm-acct,
    .cd-mm.open .cd-mm-signout,
    .cd-mm.open .cd-mm-acct-links a {
        animation: none;
    }
}

@keyframes cd-mi {
    from {
        opacity: 0;
        transform: translateX(-14px);
    }
}

/* ========== Header account area (coin plugin) ========== */
.cd-signin {
    padding: 7px 16px;
    border: 2px solid var(--cd-red);
    color: var(--cd-pap);
    font-weight: 700;
    font-size: 0.9rem;
    white-space: nowrap;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}

.cd-signin:hover {
    background: var(--cd-red);
    color: #fff;
}

.cd-acct {
    position: relative;
    flex-shrink: 0;
}

.cd-acct-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px 5px 5px;
    background: transparent;
    border: 2px solid var(--cd-ln);
    color: var(--cd-pap);
    font: inherit;
    font-weight: 700;
    font-size: 0.88rem;
    cursor: pointer;
    transition: border-color 0.15s;
}

/* Shared avatar circle: picture when set, first letter otherwise */
.cd-user-avatar,
.cd-acct-avatar,
.cd-mm-acct-avatar {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    background: var(--cd-red);
    color: #fff;
    font-family: var(--cd-font-display);
    line-height: 1;
    text-transform: uppercase;
}

.cd-acct-avatar {
    width: 30px;
    height: 30px;
    font-size: 0.9rem;
}

.cd-acct-avatar img,
.cd-mm-acct-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cd-acct-toggle:hover,
.cd-acct-toggle[aria-expanded="true"] {
    border-color: var(--cd-pap);
}

.cd-coin-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border-radius: 999px;
    background: rgba(255, 182, 72, 0.12);
    color: #ffb648;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.7;
    white-space: nowrap;
}

.cd-coin-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #ffb648;
}

/* Daily reward chip
 *
 * Sits just left of the account block so it reads as part of "your coins", not
 * as a banner. It only exists while today's reward is uncollected, so a reader
 * who has already claimed sees nothing at all — no permanent nag.
 */
.cd-claim-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 8px;
    padding: 5px 11px;
    border: 1px solid rgba(245, 176, 65, 0.35);
    border-radius: 999px;
    background: rgba(245, 176, 65, 0.1);
    color: var(--cd-gold-soft);
    font-family: var(--cd-font-ui);
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.cd-claim-chip:hover,
.cd-claim-chip:focus-visible {
    background: rgba(245, 176, 65, 0.2);
    border-color: rgba(245, 176, 65, 0.65);
    color: var(--cd-gold-bright);
}

.cd-claim-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--cd-gold-bright);
    box-shadow: 0 0 0 0 rgba(255, 200, 90, 0.55);
    animation: cd-claim-pulse 2.2s ease-out infinite;
}

@keyframes cd-claim-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(255, 200, 90, 0.55); }
    70%  { box-shadow: 0 0 0 7px rgba(255, 200, 90, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 200, 90, 0); }
}

.cd-claim-amt {
    color: var(--cd-gold-bright);
    font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
    .cd-claim-dot {
        animation: none;
    }
}

/* ========== Email verification banner ==========
   Sits between the header and the content, on every page, until the address
   is confirmed. Red rather than the site's gold accent: gold marks a reward
   waiting to be collected, and this is the opposite — a reward being withheld. */
.cd-verify-bar {
    background: linear-gradient(90deg, #b8132c, var(--cd-red));
    color: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.25);
}

.cd-verify-bar[hidden] {
    display: none;
}

.cd-verify-in {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 10px;
    padding-bottom: 10px;
    min-height: 46px;
}

.cd-verify-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
}

.cd-verify-txt {
    min-width: 0;
    flex: 1;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 2px 8px;
    font-size: 13.5px;
    line-height: 1.35;
}

.cd-verify-txt b {
    font-weight: 700;
    letter-spacing: .01em;
}

.cd-verify-txt small {
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.82);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cd-verify-go {
    flex-shrink: 0;
    padding: 6px 14px;
    border-radius: 6px;
    background: #fff;
    color: var(--cd-red);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background .15s ease;
}

/* Specificity note: the theme's generic `a` rules are broad, so the hover
   state is scoped rather than !important. */
.cd-verify-bar .cd-verify-go:hover,
.cd-verify-bar .cd-verify-go:focus-visible {
    background: rgba(255, 255, 255, 0.9);
    color: var(--cd-dk);
    text-decoration: none;
}

.cd-verify-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.cd-verify-x:hover,
.cd-verify-x:focus-visible {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}

@media (max-width: 720px) {
    .cd-verify-in {
        gap: 9px;
        padding-top: 9px;
        padding-bottom: 9px;
    }

    /* The address is the least useful line on a phone — the button says
       enough, and two lines of red would push the first chapter off-screen. */
    .cd-verify-txt small {
        display: none;
    }

    .cd-verify-txt {
        font-size: 13px;
    }

    .cd-verify-go {
        padding: 6px 11px;
        font-size: 11px;
    }
}

.cd-vip {
    padding: 1px 6px;
    background: var(--cd-red);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.6;
}

.cd-acct-name {
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cd-acct-caret {
    opacity: 0.6;
    transition: transform 0.15s;
}

.cd-acct-toggle[aria-expanded="true"] .cd-acct-caret {
    transform: rotate(180deg);
}

.cd-acct-menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 210px;
    padding: 6px 0;
    background: var(--cd-ink);
    border: 2px solid var(--cd-pap);
    z-index: 1001;
    list-style: none;
}

.cd-acct.open .cd-acct-menu {
    display: block;
}

.cd-acct-menu a {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    padding: 10px 16px;
    color: var(--cd-pap);
    font-weight: 500;
    font-size: 0.92rem;
    text-decoration: none;
}

.cd-acct-menu a small {
    font-size: 0.72rem;
    color: var(--cd-mu);
}

.cd-acct-menu a:hover,
.cd-acct-menu a:focus-visible {
    background: var(--cd-red);
    color: #fff;
}

.cd-acct-menu a:hover small,
.cd-acct-menu a:focus-visible small {
    color: #fff;
    opacity: 0.75;
}

.cd-acct-menu .cd-acct-out {
    border-top: 1px solid var(--cd-ln);
    margin-top: 4px;
    padding-top: 12px;
}

/* Mobile account block inside the cd-mm panel */
.cd-mm-acct {
    margin: 0 0 14px;
    padding-bottom: 16px;
    border-bottom: 3px solid var(--cd-ln);
}

.cd-mm-acct-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
    padding: 12px 14px;
    border-left: 5px solid var(--cd-red);
    background: linear-gradient(90deg, rgba(224, 33, 63, 0.16), rgba(224, 33, 63, 0.02));
}

.cd-mm-acct-avatar {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--cd-red);
    color: #fff;
    font-family: var(--cd-font-display);
    font-size: 1.15rem;
    line-height: 1;
    text-transform: uppercase;
}

.cd-mm-acct-id {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.cd-mm-acct-id small {
    color: var(--cd-mu);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.cd-mm-acct-name {
    font-family: var(--cd-font-ui);
    font-weight: 700;
    font-size: 1.1rem;
    line-height: 1.2;
    color: var(--cd-pap);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Signed-in profile card sets the username apart from nav rows below it */
.cd-mm-acct-head .cd-coin-pill {
    font-size: 0.82rem;
}

.cd-mm-acct-links {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* .cd-mm a (0,1,1) out-specifies a bare .cd-mm-auth / .cd-mm-signout (0,1,0),
 * so these two are scoped to keep their own border and colour. */
.cd-mm-acct-links a,
.cd-mm .cd-mm-auth,
.cd-mm .cd-mm-signout {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 14px 16px;
    border: 3px solid var(--cd-pap);
    color: var(--cd-pap);
    font-family: var(--cd-font-ui);
    font-weight: 700;
    font-size: 1.1rem;
    line-height: 1.2;
    text-decoration: none;
}

.cd-mm-acct-links a small,
.cd-mm .cd-mm-auth small,
.cd-mm .cd-mm-signout small {
    font-family: var(--cd-font-ui);
    font-weight: 500;
    font-size: 0.8rem;
    color: var(--cd-mu);
}

.cd-mm-acct-links a:hover,
.cd-mm-acct-links a:active,
.cd-mm .cd-mm-auth:hover,
.cd-mm .cd-mm-auth:active {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--cd-pap);
    color: var(--cd-pap);
}

.cd-mm-acct-links a:hover small,
.cd-mm .cd-mm-auth:hover small {
    color: inherit;
    opacity: 0.75;
}

/* Sign out closes the panel, so it sits below the site nav with its own gap */
.cd-mm .cd-mm-signout {
    margin-top: 14px;
    border-color: var(--cd-red);
    color: #ff8a94;
}

.cd-mm .cd-mm-signout small {
    color: rgba(255, 138, 148, 0.7);
}

.cd-mm .cd-mm-signout:hover,
.cd-mm .cd-mm-signout:active {
    background: var(--cd-red);
    border-color: var(--cd-red);
    color: #fff;
}

.cd-mm .cd-mm-signout:hover small,
.cd-mm .cd-mm-signout:active small {
    color: #fff;
    opacity: 0.75;
}

/* Keep the mobile-only blocks out of the desktop dropdown view */
.cd-mm .cd-mm-acct,
.cd-mm .cd-mm-auth,
.cd-mm .cd-mm-signout {
    display: none;
}

.cd-mm .cd-mm-nav {
    margin-top: 0;
}

/* ========== Footer - Comic Dekho Style ========== */
.site-footer.cd-footer {
    margin-top: 72px;
    border-top: 3px solid var(--cd-red);
    padding: 36px 0 40px;
    color: var(--cd-mu);
    background: var(--cd-ink);
}

.cd-footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    flex-wrap: wrap;
}

.cd-footer-brand .cd-lg {
    margin-bottom: 0;
}

.cd-tg {
    font-family: var(--cd-font-display);
    font-size: clamp(2rem, 5vw, 3.4rem);
    line-height: 1;
    color: var(--cd-pap);
    margin: 14px 0 6px;
}

.cd-tg + p {
    margin: 0;
    font-size: 0.95rem;
}

.cd-footer-nav {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}

.cd-footer-nav a,
.cd-footer-nav-list li a {
    color: var(--cd-mu);
    text-decoration: none;
    font-weight: 500;
}

.cd-footer-nav a:hover,
.cd-footer-nav-list li a:hover {
    color: var(--cd-pap);
    text-decoration: underline;
}

/* ========== Hide madara's default header/footer elements ========== */
.c-header__top,
.main-navigation,
.search-main-menu,
.c-sub-header-nav,
.top-footer,
.bottom-footer {
    /* We keep these for structure but hide visually since we have custom markup */
}

/* Remove madara's default body-wrap padding */
.body-wrap {
    padding: 0 !important;
    margin: 0 !important;
}

.site-content {
    min-height: 60vh;
}

/* ========== Responsive ========== */
@media (max-width: 980px) {
    .cd-hd {
        gap: 14px;
    }
    .cd-hd .cd-sr-form {
        display: none;
    }
    .cd-nav,
    .cd-nav-list {
        gap: 14px;
    }
    .cd-sb {
        display: grid;
    }
    .cd-acct-name {
        display: none;
    }
}

@media (max-width: 720px) {
    .cd-hd {
        height: 56px;
        gap: 10px;
    }
    .cd-nav {
        display: none;
    }
    .cd-mb {
        display: grid;
    }
    .cd-sb {
        margin-left: auto;
    }
    /* Account lives in the mobile panel below 720px — the bar has no room */
    .cd-acct,
    .cd-signin {
        display: none;
    }
    /* The chip goes with it; the panel carries a Daily Rewards link instead. */
    .cd-claim-chip {
        display: none;
    }
    .cd-mm .cd-mm-acct {
        display: block;
    }
    .cd-mm .cd-mm-auth {
        display: flex;
        margin-top: 14px;
    }
    .cd-mm .cd-mm-signout {
        display: flex;
    }
}

@media (max-width: 400px) {
    .cd-acct-name {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cd-mm.open a {
        animation: none;
    }
}

/* ========== Homepage Styles ========== */
.cd-main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Featured hero carousel */
.cd-hero-carousel {
    position: relative;
    isolation: isolate;
    min-height: 355px;
    margin: 28px 0 0;
    overflow: hidden;
    background: #0d0b0e;
}

.cd-hero-bg,
.cd-hero-shade {
    position: absolute;
    inset: -24px;
    pointer-events: none;
}

.cd-hero-bg {
    background-position: center;
    background-size: cover;
    filter: blur(18px);
    opacity: 0.65;
    transform: scale(1.08);
    transition: background-image 400ms ease;
}

.cd-hero-shade {
    background: linear-gradient(90deg, rgba(13,11,14,0.82), rgba(13,11,14,0.28) 50%, rgba(13,11,14,0.82)),
                linear-gradient(0deg, rgba(13,11,14,0.98), transparent 25%);
}

.cd-hero-track-wrap {
    position: relative;
    z-index: 1;
    height: 355px;
    overflow: hidden;
    touch-action: pan-y;
}

.cd-hero-track {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 100%;
    transform: translate3d(0, 0, 0);
    transition: transform 500ms cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: transform;
}

.cd-hero-slide {
    flex: 0 0 220px;
    height: 315px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.58;
    transition: opacity 300ms ease;
}

.cd-hero-card {
    position: relative;
    display: block;
    width: 160px;
    height: 229px;
    overflow: hidden;
    border: 2px solid var(--cd-glass);
    border-radius: 5px;
    background: var(--cd-ln);
    box-shadow: 0 10px 28px rgba(0,0,0,0.38);
    color: var(--cd-pap);
    text-decoration: none;
    transform: scale(1);
    transition: width 300ms ease, height 300ms ease, border-color 300ms ease, transform 300ms ease;
}

.cd-hero-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cd-hero-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 52%, rgba(0,0,0,0.88));
}

.cd-hero-slide.is-active {
    opacity: 1;
}

.cd-hero-slide.is-active .cd-hero-card {
    width: 220px;
    height: 315px;
    border-color: var(--cd-pap);
    transform: scale(1);
}

.cd-hero-rating,
.cd-hero-caption {
    position: absolute;
    z-index: 1;
    opacity: 0;
    transition: opacity 200ms ease;
    font-weight: 700;
}

.cd-hero-rating {
    top: 10px;
    left: 10px;
    padding: 3px 7px;
    border-radius: 4px;
    background: rgba(0,0,0,0.78);
    color: #ffd34e;
    font-size: 0.78rem;
    font-weight: 700;
}

.cd-hero-caption {
    right: 10px;
    bottom: 12px;
    left: 10px;
    color: var(--cd-pap);
    font-family: var(--cd-font-ui);
    font-size: 1rem;
    line-height: 1.15;
    text-shadow: 2px 2px 0 var(--cd-ink);
}

.cd-hero-slide.is-active .cd-hero-rating,
.cd-hero-slide.is-active .cd-hero-caption {
    opacity: 1;
}

.cd-hero-dots {
    display: none;
    right: 0;
    bottom: 12px;
    left: 0;
    z-index: 2;
    display: flex;
    justify-content: center;
    gap: 6px;
}

.cd-hero-dot {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255,0.48);
    cursor: pointer;
}

.cd-hero-dot.is-active {
    width: 22px;
    border-radius: 5px;
    background: var(--cd-red);
}

.cd-hero-card:focus-visible {
    outline: 3px solid var(--cd-red);
    outline-offset: 3px;
}

@media (min-width: 768px) {
    .cd-hero-carousel,
    .cd-hero-track-wrap { min-height: 319px; height: 319px; }
    .cd-hero-slide { flex-basis: 195px; height: 279px; }
    .cd-hero-card { width: 155px; height: 222px; }
    .cd-hero-slide.is-active .cd-hero-card { width: 195px; height: 279px; }
}

@media (min-width: 1024px) {
    .cd-hero-carousel,
    .cd-hero-track-wrap { min-height: 348px; height: 348px; }
    .cd-hero-slide { flex-basis: 215px; height: 308px; }
    .cd-hero-card { width: 170px; height: 243px; }
    .cd-hero-slide.is-active .cd-hero-card { width: 215px; height: 308px; }
}

@media (prefers-reduced-motion: reduce) {
    .cd-hero-track,
    .cd-hero-card,
    .cd-hero-bg,
    .cd-hero-rating,
    .cd-hero-caption { transition: none; }
}

.cd-pg {
    display: grid;
    grid-template-columns: 1.55fr 1fr;
    grid-template-rows: 1fr auto;
    gap: 6px;
    margin: 28px 0 0;
}

.cd-pg > * {
    border: 2px solid var(--cd-glass);
}

.cd-p1 {
    position: relative;
    grid-row: span 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    min-height: 480px;
    padding: 28px;
    overflow: hidden;
    background: repeating-conic-gradient(from 0deg at 74% 36%, rgba(255,255,255,0.17) 0 0.8deg, transparent 0.8deg 6deg),
                radial-gradient(circle, rgba(0,0,0,0.4) 1.2px, transparent 1.6px) 0 0/7px 7px,
                linear-gradient(135deg, var(--cd-red), var(--cd-dk) 78%);
}

.cd-sfx {
    position: absolute;
    right: 14px;
    top: 4px;
    font-family: var(--cd-font-display);
    font-weight: 400;
    font-size: clamp(5rem, 13vw, 9rem);
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 2px var(--cd-pap);
    transform: rotate(-7deg);
    animation: cd-slam 0.5s 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.3) both;
}

.cd-bd {
    background: rgba(10, 8, 9, 0.82);
    color: var(--cd-pap);
    border: 1px solid var(--cd-glass);
    padding: 1px 10px;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.cd-tt {
    font-family: var(--cd-font-display);
    font-size: clamp(2.4rem, 5.4vw, 4.5rem);
    line-height: 1.02;
    text-shadow: 4px 4px 0 var(--cd-ink);
    animation: cd-slam 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
    color: var(--cd-pap);
}

@keyframes cd-slam {
    from {
        transform: scale(1.3) rotate(-2deg);
        opacity: 0;
    }
}

.cd-p2 {
    background: var(--cd-surf);
    color: var(--cd-pap);
    padding: 24px;
}

.cd-p2 p {
    margin: 0 0 20px;
    max-width: 46ch;
}

.cd-p2 .cd-g {
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--cd-red);
}

.cd-btns {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.cd-btn {
    display: inline-block;
    padding: 11px 20px;
    font-weight: 700;
    border: 2px solid var(--cd-ln);
    background: transparent;
    color: var(--cd-pap);
    cursor: pointer;
    text-decoration: none;
    font-size: 0.95rem;
}

.cd-btn.p {
    background: var(--cd-red);
    border-color: var(--cd-red);
    color: #fff;
}

.cd-btn.p:hover {
    background: var(--cd-dk);
    border-color: var(--cd-red);
    color: #fff;
}

.cd-btn:not(.p):hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--cd-pap);
    color: var(--cd-pap);
}

.cd-p3 {
    background: var(--cd-red);
    padding: 18px 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #fff;
    text-decoration: none;
}

.cd-p3 b {
    font-family: var(--cd-font-display);
    font-size: clamp(3.4rem, 7vw, 5.4rem);
    line-height: 0.95;
    font-weight: 400;
}

.cd-p3:hover {
    background: var(--cd-dk);
    color: #fff;
}

/* Sections */
.cd-section {
    padding: 52px 0 0;
}

.cd-sh {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-bottom: 20px;
}

.cd-sh h2 {
    margin: 0;
    font-family: var(--cd-font-display);
    font-size: 1.7rem;
    line-height: 1.1;
    font-weight: 400;
    color: var(--cd-pap);
}

.cd-sh i {
    font-style: normal;
    color: var(--cd-red);
    font-weight: 700;
}

.cd-sh a {
    margin-left: auto;
    color: var(--cd-mu);
    font-size: 0.92rem;
    text-decoration: none;
}

.cd-sh a:hover {
    color: var(--cd-pap);
    text-decoration: underline;
}

/* Covers */
.cd-cv {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    aspect-ratio: 3/4;
    border: 2px solid var(--cd-glass);
    padding: 10px;
    overflow: hidden;
    background: radial-gradient(circle, rgba(0,0,0,0.4) 1.1px, transparent 1.5px) 0 0/6px 6px,
                linear-gradient(155deg, hsl(var(--h) 58% 36%), hsl(calc(var(--h) + 30) 50% 9%));
    text-decoration: none;
    transition: border-color 160ms ease;
}

.cd-cv::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.8));
}

.cd-cv > * {
    position: relative;
    z-index: 2;
}

.cd-cv img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.cd-cv i {
    align-self: flex-start;
    font-style: normal;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: rgba(10, 8, 9, 0.78);
    color: var(--cd-pap);
    border: 1px solid var(--cd-glass);
    padding: 1px 7px;
    margin-bottom: 6px;
}

.cd-cv b {
    font-family: var(--cd-font-ui);
    font-size: 0.95rem;
    line-height: 1.15;
    font-weight: 600;
    color: var(--cd-pap);
}

.cd-cv:hover {
    border-color: var(--cd-red);
}

.cd-cv:hover b {
    color: var(--cd-red);
}

/* Horizontal grid */
.cd-grid {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 14px;
    scrollbar-width: thin;
    scrollbar-color: var(--cd-red) var(--cd-ln);
}

.cd-grid .cd-cv {
    flex: 0 0 200px;
    scroll-snap-align: start;
}

/* Pagination */
.cd-pgn {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 22px;
}

.cd-pgn button,
.cd-pgn a {
    min-width: 42px;
    height: 42px;
    padding: 0 14px;
    background: transparent;
    border: 2px solid var(--cd-ln);
    font-weight: 700;
    cursor: pointer;
    color: var(--cd-pap);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cd-pgn button:hover:not(:disabled),
.cd-pgn a:hover {
    border-color: var(--cd-pap);
}

.cd-pgn button[aria-current="page"],
.cd-pgn a[aria-current="page"] {
    background: var(--cd-red);
    border-color: var(--cd-red);
    color: #fff;
}

.cd-pgn button:disabled {
    opacity: 0.35;
    cursor: default;
}

/* Columns layout */
.cd-cols {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 44px;
    align-items: start;
}

/* Tabs */
.cd-tabs {
    display: flex;
    gap: 22px;
    margin-bottom: 6px;
    border-bottom: 2px solid var(--cd-ln);
}

.cd-tabs button {
    background: none;
    border: 0;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    padding: 8px 0;
    font-weight: 700;
    color: var(--cd-mu);
    cursor: pointer;
    font-size: 0.95rem;
}

.cd-tabs button[aria-pressed="true"] {
    color: var(--cd-pap);
    border-color: var(--cd-red);
}

/* Thumbnail */
.cd-th {
    position: relative;
    display: block;
    aspect-ratio: 3/4;
    overflow: hidden;
    border: 2px solid var(--cd-glass);
    background: radial-gradient(circle, rgba(0,0,0,0.4) 1px, transparent 1.4px) 0 0/5px 5px,
                linear-gradient(155deg, hsl(var(--h) 58% 36%), hsl(calc(var(--h) + 30) 50% 9%));
}

.cd-th img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* List row */
.cd-row {
    display: grid;
    grid-template-columns: 60px 1fr auto;
    gap: 16px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px dashed var(--cd-ln);
    text-decoration: none;
    color: inherit;
}

.cd-row .cd-r {
    text-align: right;
}

.cd-row b {
    display: block;
    font-family: var(--cd-font-display);
    font-size: 2rem;
    line-height: 1;
    color: var(--cd-red);
    font-weight: 400;
}

.cd-row h3 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--cd-pap);
}

.cd-row p {
    margin: 0;
    color: var(--cd-mu);
    font-size: 0.88rem;
}

.cd-row time {
    display: block;
    margin-top: 6px;
    color: var(--cd-mu);
    font-size: 0.85rem;
    white-space: nowrap;
}

.cd-row:hover .cd-th {
    border-color: var(--cd-red);
}

.cd-row:hover h3 {
    color: var(--cd-red);
}

/* Sidebar */
/* Top Read This Week — a dark card on the dark page. */
.cd-side {
    background: var(--cd-surf);
    color: var(--cd-pap);
    border: 1px solid var(--cd-ln);
    padding: 6px 20px;
}

.cd-rk {
    display: grid;
    grid-template-columns: 46px 52px 1fr;
    gap: 12px;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid var(--cd-ln);
    text-decoration: none;
    color: inherit;
}

.cd-rk:last-child {
    border: 0;
}

.cd-rk b {
    font-family: var(--cd-font-display);
    font-size: 2.4rem;
    line-height: 1;
    font-weight: 400;
    color: var(--cd-mu);
}

.cd-rk:first-child b {
    color: var(--cd-red);
    font-size: 2.8rem;
}

.cd-rk h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--cd-pap);
}

.cd-rk p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--cd-mu);
}

.cd-rk:hover .cd-th {
    border-color: var(--cd-red);
}

.cd-rk:hover h3 {
    color: var(--cd-red);
}

/* Related series — poster cards, not the ranked list
 *
 * The sidebar row (.cd-rk) is built for a numbered top-five; it reads as a
 * chart. Recommendations are not ranked, so they get a plain cover grid
 * instead: art first, a gold type tag on the poster, the title underneath.
 */
.cd-relg {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 14px 12px;
}

.cd-rlc {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}

.cd-rlc .cd-th {
    aspect-ratio: 2 / 3;
    border: 1px solid rgba(245, 176, 65, 0.18);
    border-radius: 8px;
    transition: border-color 180ms ease;
}

.cd-rlc .cd-th img {
    transition: opacity 180ms ease;
}

.cd-rlc .cd-th i {
    position: absolute;
    left: 7px;
    bottom: 7px;
    z-index: 1;
    padding: 2px 7px;
    border-radius: 4px;
    background: linear-gradient(135deg, #ffd36b, #f29b1d);
    color: #1c1203;
    font-family: var(--cd-font-ui);
    font-size: 10px;
    font-style: normal;
    font-weight: 800;
    letter-spacing: 0.03em;
    line-height: 1.4;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

.cd-rlc b {
    margin-top: 8px;
    font-family: var(--cd-font-ui);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 180ms ease;
}

.cd-rlc:hover .cd-th {
    border-color: rgba(245, 176, 65, 0.45);
}

.cd-rlc:hover .cd-th img {
    opacity: 0.6;
}

.cd-rlc:hover b {
    color: var(--cd-gold-bright);
}

.cd-genres-page .cd-sh h1 {
    margin: 0;
    font-family: var(--cd-font-display);
    font-size: 1.7rem;
    line-height: 1.1;
    font-weight: 400;
    color: var(--cd-pap);
}

.cd-gen {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--cd-ln);
    border: 1px solid var(--cd-ln);
}

.cd-gen a {
    background: var(--cd-ink);
    padding: 12px 12px;
    display: block;
    text-decoration: none;
}

.cd-gen a b {
    display: block;
    font-family: var(--cd-font-ui);
    font-size: 0.88rem;
    line-height: 1.25;
    font-weight: 600;
    color: var(--cd-pap);
}

.cd-gen a small {
    font-size: 0.72rem;
    color: var(--cd-mu);
}

.cd-gen a:hover {
    background: var(--cd-red);
}

.cd-gen a:hover b {
    color: #fff;
}

.cd-gen a:hover small {
    color: var(--cd-pap);
}

/* Responsive homepage */
@media (max-width: 980px) {
    .cd-cols {
        grid-template-columns: 1fr;
    }
    .cd-pg {
        grid-template-columns: 1fr;
    }
    .cd-p1 {
        grid-row: auto;
        min-height: 420px;
    }
    .cd-gen {
        grid-template-columns: repeat(3, 1fr);
    }
    .cd-main {
        display: flex;
        flex-direction: column;
    }
    .cd-main .cd-cols {
        display: contents;
    }
    #popular { order: 1; }
    #latest { order: 2; }
    #action { order: 3; }
    #romance { order: 4; }
    #topsec { order: 5; }
    #genres { order: 6; }
}

@media (max-width: 720px) {
    .cd-pg {
        margin-top: 16px;
    }
    .cd-p1 {
        min-height: 380px;
        padding: 20px;
    }
    .cd-p3 b {
        font-size: 3.6rem;
    }
    .cd-section {
        padding-top: 38px;
    }
    .cd-sh h2 {
        font-size: 1.4rem;
    }
    .cd-grid {
        margin: 0 -20px;
        padding: 0 20px 6px;
        scrollbar-width: none;
    }
    .cd-grid::-webkit-scrollbar {
        display: none;
    }
    .cd-grid .cd-cv {
        flex-basis: 150px;
    }
    .cd-tabs {
        overflow-x: auto;
        scrollbar-width: none;
    }
    .cd-tabs button {
        flex: none;
    }
    .cd-row {
        grid-template-columns: 52px 1fr auto;
        gap: 12px;
    }
    .cd-row b {
        font-size: 1.5rem;
    }
    .cd-gen {
        grid-template-columns: repeat(2, 1fr);
    }
    .cd-gen a {
        padding: 18px 14px;
    }
    .cd-footer-inner {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cd-sfx,
    .cd-tt,
    .cd-mm.open a {
        animation: none;
    }
}

/* ========== Breadcrumb ========== */
.cd-bc {
    padding-top: 22px;
    color: var(--cd-mu);
    font-size: 0.9rem;
    margin: 0;
}

.cd-bc a:hover {
    color: var(--cd-pap);
    text-decoration: underline;
}

.cd-bc span {
    margin: 0 8px;
}

.cd-bc b {
    color: var(--cd-pap);
    font-weight: 400;
}

/* ========== Page Title ========== */
.cd-top1 {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin: 14px 0 4px;
}

.cd-top1 h1 {
    margin: 0;
    font-family: var(--cd-font-display);
    font-size: clamp(2rem, 5vw, 3.4rem);
    line-height: 1.05;
    font-weight: 400;
    color: var(--cd-pap);
}

.cd-top1 i {
    font-style: normal;
    color: var(--cd-red);
    font-weight: 700;
    font-size: 1.2rem;
}

.cd-sub {
    margin: 0 0 22px;
    color: var(--cd-mu);
}

/* ========== Sort + count row ========== */
.cd-so {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 22px;
    color: var(--cd-mu);
    font-size: 0.9rem;
}

.cd-so .cd-btn {
    padding: 2px 14px;
    font-size: 0.88rem;
    border-color: var(--cd-ln);
    color: var(--cd-mu);
}

.cd-so .cd-btn:hover {
    border-color: var(--cd-pap);
    color: var(--cd-pap);
}

.cd-so .cd-btn.p,
.cd-so .cd-btn[aria-pressed="true"] {
    background: var(--cd-red);
    border-color: var(--cd-red);
    color: #fff;
}

.cd-so small {
    margin-left: auto;
    font-size: 0.9rem;
}

.cd-cnt {
    margin-left: auto;
    color: var(--cd-mu);
}

/* ========== Archive ranked grid ========== */
.cd-gd {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}

.cd-gd .cd-cv {
    aspect-ratio: 3/4;
    padding: 12px;
}

.cd-gd .cd-cv small {
    opacity: 0.85;
    font-size: 0.84rem;
}

.cd-rn {
    position: absolute;
    top: 6px;
    left: 10px;
    font-family: var(--cd-font-display);
    font-size: clamp(2.4rem, 5vw, 3.8rem);
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 2px var(--cd-pap);
    z-index: 2;
}

.cd-cv.t3 .cd-rn {
    color: var(--cd-red);
    -webkit-text-stroke: 0;
    text-shadow: 3px 3px 0 var(--cd-ink);
}

/* ========== Series Detail Page ========== */

/* Keep the cover compact on desktop; the info panel gets the priority. */
.cd-pg {
    grid-template-columns: minmax(220px, 0.38fr) 1fr;
}

@media (min-width: 981px) {
    .cd-pg .cd-cvp {
        max-height: 480px;
    }
}

/* Cover panel (left) */
.cd-pg .cd-cvp {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    aspect-ratio: 3/4;
    padding: 22px;
    overflow: hidden;
    border: 2px solid var(--cd-glass);
    background: repeating-conic-gradient(from 0deg at 74% 34%, rgba(255,255,255,0.17) 0 0.8deg, transparent 0.8deg 6deg),
                radial-gradient(circle, rgba(0,0,0,0.4) 1.2px, transparent 1.6px) 0 0/7px 7px,
                linear-gradient(135deg, var(--cd-red), var(--cd-dk) 78%);
}

.cd-cvp::after {
    content: "ゴゴゴ";
    position: absolute;
    right: 8px;
    top: 6px;
    font-family: var(--cd-font-display);
    font-weight: 400;
    font-size: 3.6rem;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 2px var(--cd-pap);
    transform: rotate(-7deg);
}

.cd-cvp img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.cd-cvp .cd-bd {
    position: absolute;
    left: 4px;
    bottom: 4px;
    top: auto;
    right: auto;
    z-index: 3;
    background: rgba(10, 8, 9, 0.82);
    color: var(--cd-pap);
    border: 1px solid var(--cd-glass);
    padding: 1px 8px;
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 0;
}

.cd-cvp strong {
    font-family: var(--cd-font-display);
    font-size: 1.9rem;
    line-height: 1.05;
    text-shadow: 3px 3px 0 var(--cd-ink);
    position: relative;
    z-index: 2;
    color: var(--cd-pap);
}

/* Compact series detail panel */
.cd-detail-pg .cd-inf {
    padding: 18px 22px;
}

.cd-detail-pg .cd-gn {
    gap: 5px;
    margin-bottom: 9px;
}

.cd-detail-pg .cd-gn a {
    padding: 1px 8px;
    border-width: 1px;
    font-size: 0.76rem;
}

.cd-detail-pg .cd-inf h1 {
    font-size: clamp(1.8rem, 3.4vw, 2.8rem);
    margin-bottom: 4px;
}

.cd-detail-pg .cd-aka {
    margin-bottom: 10px;
    font-size: 0.82rem;
}

.cd-detail-pg .cd-dl {
    gap: 0 18px;
    margin-bottom: 11px;
}

.cd-detail-pg .cd-dl div {
    padding: 5px 0;
    font-size: 0.82rem;
}

.cd-detail-pg .cd-tgs {
    margin-bottom: 10px;
}

.cd-detail-pg .cd-tgs h4 {
    margin-bottom: 5px;
    font-size: 0.8rem;
}

.cd-detail-pg .cd-tgs div {
    gap: 4px;
}

.cd-detail-pg .cd-tgs a {
    padding: 1px 7px;
    font-size: 0.72rem;
}

/* Rating is deliberately near the top and remains Madara-interactive. */
.cd-detail-pg .cd-rt-wrap {
    padding: 8px 10px 7px;
    margin: 0 0 10px;
    border: 1px solid var(--cd-ln);
    background: var(--cd-surf-2);
}

.cd-detail-pg .cd-rt-wrap .cd-rt {
    margin: 0 0 5px;
    font-size: 0.82rem;
}

.cd-detail-pg .cd-rt-wrap .cd-rt b {
    font-size: 1.9rem;
}

.cd-detail-pg .cd-post-rating {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 22px;
}

.cd-detail-pg .cd-post-rating .post-total-rating,
.cd-detail-pg .cd-post-rating .user-rating {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.cd-detail-pg .cd-post-rating .user-rating {
    cursor: pointer;
}

.cd-detail-pg .cd-post-rating .ratings_stars {
    color: var(--cd-red);
    font-size: 1.05rem;
    line-height: 1;
}

.cd-detail-pg .cd-post-rating .user-rating .ratings_stars {
    color: rgba(242, 242, 242, 0.32);
}

.cd-detail-pg .cd-post-rating .user-rating:hover .ratings_stars,
.cd-detail-pg .cd-post-rating .user-rating .ratings_stars:hover {
    color: var(--cd-red);
}

.cd-detail-pg .cd-post-rating .score {
    color: var(--cd-mu);
    font-size: 0.72rem;
    margin-left: 3px;
}

.cd-detail-pg .cd-btns {
    gap: 6px;
}

.cd-detail-pg .cd-btns .cd-btn {
    padding: 9px 14px;
    font-size: 0.82rem;
}

@media (min-width: 981px) {
    .cd-detail-pg .cd-cvp {
        min-height: 0;
        height: min(480px, 42vw);
        aspect-ratio: auto;
    }
}

@media (max-width: 980px) {
    .cd-detail-pg {
        grid-template-columns: minmax(220px, 0.5fr) 1fr;
    }
}

@media (max-width: 720px) {
    .cd-detail-pg {
        grid-template-columns: 1fr;
    }
    .cd-detail-pg .cd-cvp {
        min-height: 300px;
        height: auto;
        aspect-ratio: 3/4;
    }
    .cd-detail-pg .cd-inf {
        padding: 16px;
    }
}
/* Series info panel. Same surface as the rest of the site — the cream block is
   gone, and the type runs smaller so the whole panel fits a phone screen. */
.cd-pg .cd-inf {
    background: var(--cd-surf);
    color: var(--cd-pap);
    padding: 18px 20px 20px;
    border: 2px solid var(--cd-glass);
}

.cd-gn {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.cd-gn a {
    border: 1px solid var(--cd-ln);
    padding: 0 8px;
    line-height: 1.75;
    font-weight: 600;
    font-size: 0.74rem;
    color: var(--cd-mu);
    text-decoration: none;
    transition: color 140ms ease, border-color 140ms ease;
}

.cd-gn a:hover {
    background: var(--cd-red);
    border-color: var(--cd-red);
    color: #fff;
}

.cd-inf h1 {
    margin: 0 0 6px;
    font-family: var(--cd-font-display);
    font-size: clamp(1.5rem, 3.2vw, 2.4rem);
    line-height: 1.1;
    letter-spacing: -0.01em;
    font-weight: 400;
    color: var(--cd-pap);
}

.cd-aka {
    margin: 0 0 12px;
    color: var(--cd-mu);
    font-size: 0.78rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Collapsible details. Two rows show by default — the ones a reader scans for
   before deciding — and the rest sit behind "Show more". */
.cd-det {
    margin: 0 0 12px;
}

.cd-dl {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 20px;
    margin: 0;
}

.cd-dl div {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 5px 0;
    font-size: 0.78rem;
    border-bottom: 1px solid var(--cd-ln);
}

.cd-dl dt {
    color: var(--cd-mu);
}

.cd-dl dd {
    margin: 0;
    font-weight: 700;
    text-align: right;
    color: var(--cd-pap);
    overflow-wrap: anywhere;
}

.cd-dl dd.st {
    color: var(--cd-red);
}

/* The rows that wait for the toggle. */
.cd-dl .cd-dl-extra {
    display: none;
}

.cd-det.open .cd-dl .cd-dl-extra {
    display: flex;
}

/* Far tags trail the same toggle. `.cd-detail-pg .cd-tgs a` already sets the
   pill look, so this only has to win on display. */
.cd-detail-pg .cd-tgs a.cd-tg-extra {
    display: none;
}

#cd-inf.open .cd-tgs a.cd-tg-extra {
    display: inline-block;
}

.cd-det-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 8px;
    padding: 3px 10px;
    background: transparent;
    border: 1px solid var(--cd-ln);
    color: var(--cd-mu);
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
}

.cd-det-toggle:hover {
    border-color: var(--cd-pap);
    color: var(--cd-pap);
}

.cd-det-toggle svg {
    width: 11px;
    height: 11px;
    transition: transform 180ms ease;
}

.cd-det.open .cd-det-toggle svg {
    transform: rotate(180deg);
}

/* Tags sit with the details, above the buttons. */
.cd-tgs {
    margin: 0 0 12px;
}

.cd-tgs h4 {
    margin: 0 0 6px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cd-mu);
}

.cd-tgs div {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.cd-tgs a {
    background: var(--cd-surf-2);
    color: var(--cd-pap);
    border: 1px solid var(--cd-ln);
    padding: 0 7px;
    line-height: 1.7;
    font-size: 0.7rem;
    font-weight: 500;
    text-decoration: none;
}

.cd-tgs a:hover {
    background: var(--cd-red);
    border-color: var(--cd-red);
    color: #fff;
}

.cd-rt {
    margin: 0 0 12px;
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--cd-mu);
}

.cd-rt b {
    font-family: var(--cd-font-display);
    font-size: 1.8rem;
    line-height: 1;
    color: var(--cd-red);
    margin-right: 6px;
    font-weight: 400;
}

/* Synopsis */
.cd-syn {
    max-width: 70ch;
}

.cd-tx {
    position: relative;
    max-height: 7.5em;
    overflow: hidden;
}

.cd-tx::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3.4em;
    background: linear-gradient(transparent, var(--cd-ink));
}

.cd-syn.open .cd-tx {
    max-height: none;
}

.cd-syn.open .cd-tx::after,
.cd-syn.short .cd-tx::after {
    display: none;
}

.cd-sm {
    background: none;
    border: 0;
    padding: 0;
    color: var(--cd-red);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 4px;
    cursor: pointer;
}

.cd-sm:hover {
    color: var(--cd-pap);
}

.cd-syn.short .cd-sm {
    display: none;
}

/* Chapter list: locked and member rows share one card
 *
 * Both states are the same promise — this chapter is special — so they get the
 * same gold card on warm near-black. Only the badge differs: a lock and a
 * countdown when the reader cannot open it yet, a star when they already can.
 * One shell means the list never shows two competing alert styles.
 */
.cd-ch.cd-ch-card {
    display: grid;
    grid-template-columns: 56px 1fr;
    column-gap: 14px;
    align-items: start;
    padding: 16px 18px;
    margin: 0 0 10px;
    border: 1px solid rgba(245, 176, 65, 0.22);
    border-left: 3px solid var(--cd-gold);
    border-radius: 10px;
    background:
        linear-gradient(135deg, rgba(245, 176, 65, 0.12), rgba(245, 176, 65, 0.02) 55%),
        var(--cd-gold-bg);
    color: #fff;
    box-shadow: 0 10px 26px -14px rgba(245, 176, 65, 0.45);
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.cd-ch.cd-ch-card:hover {
    transform: translateX(3px);
    border-color: rgba(245, 176, 65, 0.55);
    border-left-color: var(--cd-gold-bright);
    box-shadow: 0 12px 30px -12px rgba(245, 176, 65, 0.6);
}

/* The shared list hover turns the title red; on the gold card that reads as an
   error, so the title brightens toward gold instead. */
.cd-ch.cd-ch-card:hover h3 {
    color: var(--cd-gold-bright);
}

.cd-ch.cd-ch-card:hover b {
    text-shadow: 0 0 22px rgba(245, 176, 65, 0.65);
}

.cd-ch.cd-ch-card > b {
    grid-row: 1 / span 2;
    font-size: 34px;
    line-height: 1;
    font-weight: 800;
    color: var(--cd-gold);
    text-shadow: 0 0 18px rgba(245, 176, 65, 0.4);
    padding-top: 2px;
}

.cd-ch.cd-ch-card > div {
    min-width: 0;
}

.cd-ch.cd-ch-card h3 {
    margin: 0;
    font-size: 17px;
    line-height: 1.3;
    color: #fff;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
}

.cd-ch.cd-ch-card > div > p:not(.cd-ch-unlock) {
    margin: 3px 0 0;
    font-size: 13px;
    color: #8f8676;
}

.cd-ch.cd-ch-card > time {
    grid-column: 2;
    margin-top: 8px;
    font-size: 12px;
    color: #7a7366;
}

.cd-ch .cd-ch-member-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 0;
    padding: 3px 10px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, #ffd36b, #f29b1d);
    color: #1c1203;
    font-family: var(--cd-font-ui);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.03em;
    line-height: 1.3;
    text-transform: none;
    vertical-align: middle;
    white-space: nowrap;
    box-shadow: 0 2px 10px -2px rgba(242, 155, 29, 0.55);
}

.cd-ch .cd-ch-member-badge .fa-star {
    font-size: 10px;
    color: #1c1203;
}

/* Same line in both states; only the wording differs. */
.cd-ch .cd-ch-unlock {
    margin: 10px 0 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--cd-gold-soft);
}

.cd-ch .cd-ch-unlock.is-ready {
    color: var(--cd-pap);
}

.cd-ch .cd-ch-unlock .cd-ch-unlock-t {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 8px;
    border: 1px solid rgba(245, 176, 65, 0.38);
    border-radius: 6px;
    background: rgba(245, 176, 65, 0.14);
    color: var(--cd-gold-bright);
    font-variant-numeric: tabular-nums;
}

/* Chapter list */
.cd-ch {
    display: grid;
    grid-template-columns: 78px 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px dashed var(--cd-ln);
    text-decoration: none;
    color: inherit;
}

.cd-ch b {
    font-family: var(--cd-font-display);
    font-size: 1.7rem;
    line-height: 1;
    color: var(--cd-red);
    font-weight: 400;
}

.cd-ch h3 {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--cd-pap);
}

.cd-ch h3 em {
    font-style: normal;
    background: var(--cd-red);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0 8px;
    margin-left: 8px;
}

.cd-ch p {
    margin: 0;
    color: var(--cd-mu);
    font-size: 0.86rem;
}

.cd-ch time {
    color: var(--cd-mu);
    font-size: 0.85rem;
    white-space: nowrap;
}

.cd-ch:hover h3 {
    color: var(--cd-red);
}

/* Comments */
.cm {
    max-width: 820px;
}

/* Reader page */
.cd-rw {
    max-width: 860px;
    margin: 0 auto;
}

.cd-rw.wide {
    max-width: 1100px;
}

.cd-rw h1 {
    margin: 14px 0 4px;
    font-family: var(--cd-font-display);
    font-size: clamp(1.7rem, 4.2vw, 2.8rem);
    line-height: 1.1;
    font-weight: 400;
    color: var(--cd-pap);
}

.cd-rw .cd-aka {
    margin: 0 0 16px;
    color: var(--cd-mu);
    font-size: 0.95rem;
}

.cd-rw .cd-aka a {
    color: var(--cd-pap);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.cd-rw .cd-aka a:hover {
    color: var(--cd-red);
}

/* ===== Reading navigation bar (madara wp-manga-nav inside cd-rb) =====
   Madara styles these with body.reading-manga .entry-header .select-*
   which beats plain .cd-rb selectors. Prefix with body.reading-manga
   and use !important only where madara uses float/padding hacks.    */

body.reading-manga .cd-rb {
    display: flex;
    gap: 8px;
    align-items: stretch;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

/* Hide madara's injected breadcrumb inside nav — cd-bc above already shows it */
body.reading-manga .cd-rb .entry-header_wrap {
    display: none !important;
}

/* Flatten wp-manga-nav wrapper — children become direct flex items of cd-rb */
body.reading-manga .cd-rb .wp-manga-nav {
    display: contents;
    margin: 0;
    padding: 0;
}

/* .select-view contains selects — keep it a flex row */
body.reading-manga .cd-rb .select-view {
    display: flex;
    gap: 8px;
    float: none !important;
    margin: 0 !important;
    flex: 1;
    min-width: 0;
    flex-wrap: wrap;
}

body.reading-manga .cd-rb .select-view > * {
    padding: 0 !important;
}

/* selectpickers fill available space */
body.reading-manga .cd-rb .c-selectpicker {
    flex: 1;
    min-width: 0;
    max-width: none !important;
}

body.reading-manga .cd-rb .c-selectpicker label {
    margin-bottom: 0;
    display: block;
}

/* hide the FontAwesome chevron icon madara adds */
body.reading-manga .cd-rb .c-selectpicker label:after {
    display: none;
}

body.reading-manga .cd-rb .c-selectpicker select.selectpicker,
body.reading-manga .cd-rb select {
    width: 100%;
    background: var(--cd-ink) !important;
    border: 2px solid var(--cd-ln) !important;
    border-radius: 0 !important;
    padding: 10px 12px !important;
    font-weight: 700;
    cursor: pointer;
    color: var(--cd-pap) !important;
    height: 100%;
    font-size: 0.95rem;
    appearance: auto !important;
    -webkit-appearance: auto !important;
    font-family: var(--cd-font-ui);
}

body.reading-manga .cd-rb .c-selectpicker select.selectpicker:focus,
body.reading-manga .cd-rb select:focus {
    border-color: var(--cd-pap) !important;
    outline: 0;
}

body.reading-manga .cd-rb .c-selectpicker select.selectpicker option {
    background: var(--cd-ink);
    color: var(--cd-pap);
}

/* .select-pagination wraps prev/next — flatten into flex */
body.reading-manga .cd-rb .select-pagination {
    display: contents;
    float: none !important;
    margin: 0 !important;
}

body.reading-manga .cd-rb .select-pagination > * {
    padding: 0 !important;
    display: contents;
}

body.reading-manga .cd-rb .nav-links {
    display: flex;
    gap: 8px;
    align-items: stretch;
    font-size: 0;
    margin: 0 !important;
}

body.reading-manga .cd-rb .nav-links > * {
    display: contents;
    padding: 0 !important;
    font-size: 0;
}

/* hide the hamburger icon inside nav-links */
body.reading-manga .cd-rb .nav-links .mobile-nav-btn {
    display: none !important;
}

/* Prev / Next / Manga Info buttons — beat madara's .nav-links > * a */
body.reading-manga .cd-rb .nav-links .nav-previous a,
body.reading-manga .cd-rb .nav-links .nav-next a,
body.reading-manga .cd-rb .nav-links .prev_page,
body.reading-manga .cd-rb .nav-links .next_page,
body.reading-manga .cd-rb .nav-links a.back {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 11px 20px !important;
    font-weight: 700;
    border: 2px solid var(--cd-pap) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--cd-pap) !important;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    font-size: 0.95rem !important;
    font-family: var(--cd-font-ui);
    line-height: 1.4;
}

/* kill madara's Ionicons :before icons */
body.reading-manga .cd-rb .nav-links .nav-previous a:before,
body.reading-manga .cd-rb .nav-links .nav-next a:before,
body.reading-manga .cd-rb .nav-links a.back:before {
    content: none !important;
    display: none !important;
    padding: 0 !important;
}

body.reading-manga .cd-rb .nav-links .nav-next a,
body.reading-manga .cd-rb .nav-links .next_page,
body.reading-manga .cd-rb .nav-links a.back {
    background: var(--cd-red) !important;
    border-color: var(--cd-red) !important;
    color: #fff !important;
}

body.reading-manga .cd-rb .nav-links .nav-next a:hover,
body.reading-manga .cd-rb .nav-links .next_page:hover,
body.reading-manga .cd-rb .nav-links a.back:hover {
    background: var(--cd-dk) !important;
    border-color: var(--cd-red) !important;
    color: #fff !important;
}

body.reading-manga .cd-rb .nav-links .nav-previous a:hover,
body.reading-manga .cd-rb .nav-links .prev_page:hover {
    background: var(--cd-dk) !important;
    border-color: var(--cd-red) !important;
    color: #fff !important;
}

body.reading-manga .cd-rb .nav-links .nav-previous.disabled a,
body.reading-manga .cd-rb .nav-links .nav-next.disabled a {
    opacity: 0.35;
    pointer-events: none;
}

/* Hide chapter-selection wrapper gap */
body.reading-manga .cd-rb .chapter-selection {
    flex: 1;
    min-width: 0;
}

/* Pager for paged reading mode */
body.reading-manga .cd-rb .wp-manga-pager {
    display: flex;
    gap: 8px;
    align-items: center;
    flex: 1;
}

body.reading-manga .cd-rb .wp-manga-pager a,
body.reading-manga .cd-rb .wp-manga-pager button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 20px;
    font-weight: 700;
    border: 2px solid var(--cd-pap);
    background: transparent;
    color: var(--cd-pap);
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    font-size: 0.95rem;
    border-radius: 0;
}

body.reading-manga .cd-rb .wp-manga-pager a:hover,
body.reading-manga .cd-rb .wp-manga-pager button:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--cd-pap);
}

/* Reading options toolbar */
.cd-tl {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.cd-tl .cd-btn {
    padding: 6px 14px;
    font-size: 0.88rem;
    border-color: var(--cd-ln);
    color: var(--cd-mu);
}

.cd-tl .cd-btn[aria-pressed="true"] {
    background: var(--cd-red);
    border-color: var(--cd-red);
    color: #fff;
}

/* Reading container */
.cd-rd {
    border: 2px solid var(--cd-glass);
    background: var(--cd-ink);
}

/* Chapter images rendered by madara (wp-manga-chapter-img) */
.cd-rd img.wp-manga-chapter-img,
.cd-rd .page-break img {
    display: block;
    width: 100%;
    height: auto;
}

/* List style: all images stacked */
.cd-rd .page-break {
    border-bottom: 3px solid var(--cd-ink);
}

.cd-rd .page-break:last-child {
    border-bottom: 0;
}

/* End of chapter marker */
.cd-end {
    margin: 22px 0 0;
    text-align: center;
}

.cd-end b {
    display: block;
    font-family: var(--cd-font-display);
    font-size: 2.2rem;
    line-height: 1;
    color: var(--cd-red);
    margin-bottom: 4px;
    font-weight: 400;
}

.cd-end p {
    margin: 0 0 16px;
    color: var(--cd-mu);
}

/* Reading progress bar */
.cd-pr {
    position: fixed;
    left: 0;
    top: 0;
    height: 3px;
    width: 0;
    background: var(--cd-red);
    z-index: 1001;
    display: block;
}

/* Back to top button */
.cd-top {
    position: fixed;
    right: 18px;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    z-index: 14;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    padding: 0;
    background: var(--cd-red);
    border: 2px solid var(--cd-pap);
    color: #fff;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
}

.cd-top.show {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.cd-top:hover {
    background: var(--cd-dk);
    color: #fff;
}

/* Madara comment area overrides */
.cd-main .comment-respond input[type="text"],
.cd-main .comment-respond input[type="email"],
.cd-main .comment-respond input[type="url"],
.cd-main .comment-respond textarea,
.cd-main .comment-form input[type="text"],
.cd-main .comment-form input[type="email"],
.cd-main .comment-form textarea {
    background: transparent;
    border: 2px solid var(--cd-ln);
    color: var(--cd-pap);
    padding: 10px 12px;
    font-size: 16px;
    font-family: inherit;
}

.cd-main .comment-respond input:focus,
.cd-main .comment-respond textarea:focus,
.cd-main .comment-form input:focus,
.cd-main .comment-form textarea:focus {
    border-color: var(--cd-pap);
    outline: 0;
}

.cd-main .comment-respond .submit,
.cd-main .comment-form .submit {
    background: var(--cd-red);
    border: 2px solid var(--cd-red);
    color: #fff;
    padding: 11px 24px;
    font-weight: 700;
    cursor: pointer;
}

.cd-main .comment-respond .submit:hover,
.cd-main .comment-form .submit:hover {
    background: var(--cd-dk);
    border-color: var(--cd-red);
    color: #fff;
}

/* Responsive: detail, reader, archive */
@media (max-width: 980px) {
    .cd-cols {
        grid-template-columns: 1fr;
    }
    .cd-pg {
        grid-template-columns: 1fr;
    }
    .cd-pg .cd-cvp {
        aspect-ratio: auto;
        min-height: 300px;
    }
    .cd-gd {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 720px) {
    .cd-gd {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    .cd-pg .cd-inf {
        padding: 14px;
    }
    .cd-dl {
        grid-template-columns: 1fr;
    }
    .cd-btns .cd-btn {
        flex: 1;
        text-align: center;
    }
    .cd-ch {
        grid-template-columns: 62px 1fr;
        gap: 2px 12px;
    }
    .cd-ch b {
        grid-row: span 2;
        font-size: 1.45rem;
    }
    .cd-ch time {
        grid-column: 2;
    }
    /* The card is a two-row grid (content, then date); the number spans both. */
    .cd-ch.cd-ch-card b {
        grid-row: 1 / span 2;
        align-self: start;
        font-size: 30px;
        padding-top: 2px;
    }
    .cd-ch.cd-ch-card {
        padding: 14px 14px;
        margin-bottom: 8px;
    }
    body.reading-manga .cd-rb .nav-links .nav-previous a,
    body.reading-manga .cd-rb .nav-links .nav-next a,
    body.reading-manga .cd-rb .nav-links a.back {
        padding: 11px 12px !important;
    }
    .cd-tl {
        display: none;
    }
    .cd-rd {
        border-width: 2px;
    }
    .cd-so .cd-btn {
        padding: 2px 10px;
    }
}

@media (max-width: 560px) {
    body.reading-manga .cd-rb {
        flex-wrap: wrap;
    }
    body.reading-manga .cd-rb .c-selectpicker {
        width: 100%;
        flex: none;
    }
    .cf .cr {
        grid-template-columns: 1fr;
    }
}

/* ===== Mobile reader nav: undo Madara's hidden select/mobile-icon rules ===== */
@media (max-width: 600px) {
    body.reading-manga .cd-rb .wp-manga-nav {
        display: block !important;
        width: 100%;
        overflow: visible !important;
    }

    body.reading-manga .cd-rb .select-view {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        max-height: none !important;
        overflow: visible !important;
        width: 100%;
        float: none !important;
        margin: 0 0 8px !important;
        gap: 8px;
        flex-wrap: wrap;
    }

    body.reading-manga .cd-rb .select-view > * {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        max-height: none !important;
        width: 100%;
        flex: 1 1 100%;
    }

    body.reading-manga .cd-rb .select-view .c-selectpicker,
    body.reading-manga .cd-rb .select-view .chapter-selection {
        display: block !important;
        width: 100%;
        max-width: none !important;
        padding: 0 !important;
    }

    body.reading-manga .cd-rb .select-view .c-selectpicker select.selectpicker,
    body.reading-manga .cd-rb .select-view select {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100%;
        min-height: 38px;
    }

    body.reading-manga .cd-rb .select-pagination {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        max-height: none !important;
        position: static !important;
        float: none !important;
        width: 100%;
        margin: 0 !important;
        text-align: left !important;
    }

    body.reading-manga .cd-rb .select-pagination .nav-links {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100%;
        gap: 8px;
        justify-content: flex-start;
        margin: 0 !important;
    }

    body.reading-manga .cd-rb .select-pagination .nav-links > * {
        display: contents !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: auto;
        padding: 0 !important;
    }

    /* Madara turns these into 35px icon-only buttons on phones. */
    body.reading-manga .cd-rb .select-pagination .nav-links .nav-previous a,
    body.reading-manga .cd-rb .select-pagination .nav-links .nav-next a,
    body.reading-manga .cd-rb .select-pagination .nav-links a.prev_page,
    body.reading-manga .cd-rb .select-pagination .nav-links a.next_page,
    body.reading-manga .cd-rb .select-pagination .nav-links a.back {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: auto !important;
        min-width: 0;
        height: auto !important;
        max-height: none !important;
        padding: 10px 12px !important;
        text-indent: 0 !important;
        overflow: visible !important;
        font-size: 0.85rem !important;
        line-height: 1.35 !important;
    }

    body.reading-manga .cd-rb .select-pagination .nav-links .mobile-nav-btn {
        display: none !important;
    }
}

/* ===== Full-bleed chapter pages on tablet + mobile =====
   Keeps breadcrumb/title/nav inside .cd-main, but lets the actual
   reader image container stretch edge-to-edge on narrower screens. */
@media (max-width: 980px) {
    body.reading-manga .cd-rw .cd-rd {
        position: relative;
        left: 50%;
        right: 50%;
        width: 100vw;
        margin-left: -50vw;
        margin-right: -50vw;
        border-left: 0;
        border-right: 0;
    }

    body.reading-manga .cd-rw .cd-rd .page-break,
    body.reading-manga .cd-rw .cd-rd .reading-content,
    body.reading-manga .cd-rw .cd-rd .page-break img,
    body.reading-manga .cd-rw .cd-rd .reading-content img {
        display: block;
        width: 100%;
        max-width: 100%;
    }

    body.reading-manga .cd-rw .cd-rd img.wp-manga-chapter-img {
        width: 100%;
        max-width: 100%;
        height: auto;
    }
}


/* ===== Search page ===== */
.cd-search-page {
    max-width: 1040px;
    padding-bottom: 64px;
}

.cd-search-box {
    margin: 28px 0 42px;
    padding: 24px;
    border: 3px solid var(--cd-pap);
    background: var(--cd-ln);
}

.cd-search-box form {
    display: flex;
    gap: 8px;
}

.cd-search-box input {
    min-width: 0;
    flex: 1;
    border: 2px solid var(--cd-pap);
    border-radius: 0;
    padding: 13px 16px;
    background: var(--cd-ink);
    color: var(--cd-pap);
    font: inherit;
}

.cd-search-box input:focus {
    border-color: var(--cd-red);
    outline: 2px solid var(--cd-red);
    outline-offset: 1px;
}

.cd-search-box button {
    width: 58px;
    border: 2px solid var(--cd-red);
    background: var(--cd-red);
    color: #fff;
    font-size: 1.7rem;
    cursor: pointer;
}

.cd-search-box button:hover { background: var(--cd-red); color: #fff; }

.cd-search-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--cd-ln);
}

.cd-search-heading h1 {
    margin: 0;
    color: var(--cd-pap);
    font-family: var(--cd-font-display);
    font-size: clamp(1.35rem, 3vw, 2rem);
    font-weight: 400;
}

.cd-search-heading h1 span {
    color: var(--cd-red);
    font-family: var(--cd-font-ui);
    font-size: 0.8em;
}

.cd-search-all {
    color: var(--cd-mu);
    font-weight: 700;
    text-decoration: none;
}

.cd-search-all:hover { color: var(--cd-pap); }

.cd-search-list { margin-top: 8px; }

.cd-search-item {
    display: grid;
    grid-template-columns: 128px minmax(0, 1fr) auto;
    gap: 20px;
    align-items: start;
    padding: 22px 0;
    border-bottom: 1px dashed var(--cd-ln);
}

.cd-search-thumb {
    display: block;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border: 2px solid var(--cd-glass);
    background: var(--cd-ln);
}

.cd-search-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cd-search-thumb:hover { border-color: var(--cd-red); }

.cd-search-info { min-width: 0; }

.cd-search-title-row {
    display: flex;
    align-items: start;
    gap: 10px;
    margin-bottom: 12px;
}

.cd-search-title-row h2 {
    min-width: 0;
    flex: 1;
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.3;
}

.cd-search-title-row h2 a { color: var(--cd-pap); text-decoration: none; }
.cd-search-title-row h2 a:hover { color: var(--cd-red); }

.cd-search-type {
    flex-shrink: 0;
    padding: 1px 7px;
    background: rgba(10, 8, 9, 0.78);
    color: var(--cd-pap);
    border: 1px solid var(--cd-glass);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.cd-search-info p {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 10px;
    margin: 5px 0;
    color: var(--cd-mu);
    font-size: 0.88rem;
}

.cd-search-info p b { color: var(--cd-pap); }
.cd-search-info p span { overflow-wrap: anywhere; }

.cd-search-meta {
    display: flex;
    flex-direction: column;
    align-items: end;
    gap: 14px;
    min-width: 120px;
    padding-top: 4px;
    font-size: 0.8rem;
}

.cd-search-meta a { color: var(--cd-mu); text-decoration: none; }
.cd-search-meta a:hover { color: var(--cd-pap); }
.cd-search-meta strong { color: #ffd34e; font-size: 1rem; }

.cd-search-empty {
    margin-top: 24px;
    padding: 48px 24px;
    border: 2px dashed var(--cd-ln);
    color: var(--cd-mu);
    text-align: center;
}

.cd-search-empty h2 { margin: 0 0 8px; color: var(--cd-pap); }
.cd-search-empty p { margin: 0; }

@media (max-width: 640px) {
    .cd-search-page { padding-bottom: 36px; }
    .cd-search-box { margin: 18px 0 30px; padding: 16px; }
    .cd-search-item { grid-template-columns: 82px minmax(0, 1fr); gap: 12px; padding: 16px 0; }
    .cd-search-meta { grid-column: 2; flex-direction: row; align-items: center; justify-content: space-between; min-width: 0; padding-top: 0; }
    .cd-search-info p { grid-template-columns: 70px minmax(0, 1fr); gap: 6px; font-size: 0.78rem; }
    .cd-search-title-row { display: block; }
    .cd-search-type { display: inline-block; margin-top: 7px; }
    .cd-search-heading { align-items: start; flex-direction: column; gap: 8px; }
}

.cd-static-page {
    max-width: 900px;
    padding-bottom: 64px;
}

.cd-static-card,
.cd-404-card {
    margin-top: 28px;
    border: 1px solid var(--cd-ln);
    background: var(--cd-surf);
    color: var(--cd-pap);
}

.cd-static-header {
    padding: 32px 34px 26px;
    border-bottom: 1px solid var(--cd-ln);
    background: var(--cd-red);
    color: #fff;
}

.cd-static-kicker {
    display: inline-block;
    margin-bottom: 10px;
    color: var(--cd-pap);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.cd-static-header h1,
.cd-404-card h1 {
    margin: 0;
    color: inherit;
    font-family: var(--cd-font-display);
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 400;
    line-height: 1.08;
}

.cd-static-header p {
    margin: 12px 0 0;
    color: rgba(255,255,255,0.84);
}

.cd-static-content {
    padding: 32px 34px 38px;
    font-size: 1rem;
    line-height: 1.75;
}

.cd-static-content h2 {
    margin: 30px 0 8px;
    color: var(--cd-pap);
    font-family: var(--cd-font-ui);
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.2;
}

.cd-static-content h2:first-child { margin-top: 0; }
.cd-static-content p { margin: 0 0 16px; }
.cd-static-content ul,
.cd-static-content ol { margin: 0 0 18px; padding-left: 24px; }
.cd-static-content li { margin-bottom: 7px; }

.cd-static-content a {
    color: var(--cd-red);
    font-weight: 700;
    text-decoration: underline;
}

.cd-static-content a:hover { color: #ff8a94; }

.cd-contact-email {
    display: inline-block;
    padding: 10px 14px;
    border: 1px solid var(--cd-ln);
    background: var(--cd-surf-2);
    font-weight: 700;
}

.cd-contact-email a { color: var(--cd-pap); }

.cd-note {
    padding: 12px 14px;
    border-left: 4px solid var(--cd-red);
    background: var(--cd-surf-2);
    font-size: 0.9rem;
}

.cd-404-page {
    min-height: 55vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 48px;
    padding-bottom: 72px;
}

.cd-404-card {
    width: min(760px, 100%);
    margin: 0;
    padding: 44px 46px 50px;
    background: var(--cd-dk);
    color: var(--cd-pap);
    text-align: center;
}

.cd-404-number {
    display: block;
    color: var(--cd-red);
    font-family: var(--cd-font-display);
    font-size: clamp(5rem, 17vw, 10rem);
    line-height: 0.85;
    text-shadow: 5px 5px 0 var(--cd-ink);
}

.cd-404-card .cd-static-kicker { margin-top: 24px; }
.cd-404-card h1 { font-size: clamp(1.7rem, 4vw, 2.8rem); }
.cd-404-card p { max-width: 52ch; margin: 16px auto 28px; color: rgba(255, 255, 255,0.8); }

.cd-404-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.cd-404-actions .cd-btn { color: var(--cd-pap); border-color: var(--cd-ln); }
.cd-404-actions .cd-btn.p { color: #fff; border-color: var(--cd-red); }

@media (max-width: 600px) {
    .cd-static-page { padding-bottom: 36px; }
    .cd-static-card { margin-top: 18px; }
    .cd-static-header { padding: 24px 20px 20px; }
    .cd-static-content { padding: 24px 20px 28px; }
    .cd-404-page { padding-top: 28px; padding-bottom: 48px; }
    .cd-404-card { padding: 34px 20px 38px; }
    .cd-404-actions { display: grid; grid-template-columns: 1fr; }
    .cd-404-actions .cd-btn { text-align: center; }
}


/* Final series-detail overrides: keep these after all base/responsive rules. */
.cd-detail-pg {
    grid-template-columns: minmax(220px, 0.38fr) 1fr;
}

.cd-detail-pg .cd-inf {
    padding: 18px 22px !important;
}

.cd-detail-pg .cd-inf h1 {
    font-size: clamp(1.5rem, 3vw, 2.3rem);
    margin-bottom: 4px;
}

.cd-detail-pg .cd-gn {
    gap: 4px;
    margin-bottom: 9px;
}

.cd-detail-pg .cd-gn a {
    padding: 0 7px;
    font-size: 0.72rem;
}

.cd-detail-pg .cd-aka {
    margin-bottom: 10px;
    font-size: 0.76rem;
}

.cd-detail-pg .cd-dl {
    gap: 0 16px;
}

.cd-detail-pg .cd-dl div {
    padding: 4px 0;
    font-size: 0.76rem;
}

.cd-detail-pg .cd-tgs {
    margin-bottom: 10px;
}

.cd-detail-pg .cd-tgs h4 {
    margin-bottom: 5px;
    font-size: 0.66rem;
}

.cd-detail-pg .cd-tgs a {
    padding: 0 6px;
    font-size: 0.68rem;
}

.cd-detail-pg .cd-rt-wrap {
    padding: 8px 10px 7px;
    margin: 0 0 10px;
    border: 1px solid var(--cd-ln);
    background: var(--cd-surf-2);
}

.cd-detail-pg .cd-rt-wrap .cd-rt {
    margin: 0 0 5px;
    font-size: 0.76rem;
}

.cd-detail-pg .cd-rt-wrap .cd-rt b {
    font-size: 1.6rem;
}

.cd-detail-pg .cd-post-rating {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 22px;
}

.cd-detail-pg .cd-post-rating .post-total-rating,
.cd-detail-pg .cd-post-rating .user-rating {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.cd-detail-pg .cd-post-rating .user-rating {
    cursor: pointer;
}

.cd-detail-pg .cd-post-rating .ratings_stars {
    color: var(--cd-red);
    font-size: 1.05rem;
    line-height: 1;
}

.cd-detail-pg .cd-post-rating .user-rating .ratings_stars {
    color: rgba(242, 242, 242, 0.32);
}

.cd-detail-pg .cd-post-rating .user-rating:hover .ratings_stars,
.cd-detail-pg .cd-post-rating .user-rating .ratings_stars:hover {
    color: var(--cd-red);
}

.cd-detail-pg .cd-post-rating .score {
    color: var(--cd-mu);
    font-size: 0.72rem;
    margin-left: 3px;
}

.cd-detail-pg .cd-btns {
    gap: 6px;
}

.cd-detail-pg .cd-btns .cd-btn {
    padding: 9px 14px;
    font-size: 0.82rem;
}

@media (min-width: 981px) {
    .cd-detail-pg .cd-cvp {
        min-height: 0;
        height: min(480px, 42vw);
        aspect-ratio: auto;
    }
}

@media (max-width: 980px) {
    .cd-detail-pg {
        grid-template-columns: 1fr;
    }
}
/* Desktop and tablet keep the original cover dimensions. */
@media (max-width: 720px) {
    .cd-pg .cd-cvp,
    .cd-detail-pg .cd-cvp {
        box-sizing: border-box;
        width: min(100%, 225px);
        max-width: 225px;
        height: auto;
        min-height: 0;
        aspect-ratio: 214 / 300;
        justify-self: center;
    }

    .cd-pg .cd-cvp img,
    .cd-detail-pg .cd-cvp img {
        inset: 0;
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
        object-fit: contain;
    }
    /* Remove the giant Japanese "ゴゴゴ" text on mobile — it's decorative. */
    .cd-detail-pg .cd-cvp::after {
        content: none !important;
        display: none !important;
    }

    /* Bookmark: full-width row under the two main buttons on mobile. */
    .cd-detail-pg .cd-btns {
        flex-wrap: wrap;
    }

    .cd-detail-pg .cd-btns .cd-btn:not(#cd-bm) {
        flex: 1;
        text-align: center;
    }

    .cd-detail-pg .cd-btns #cd-bm {
        flex-basis: 100%;
        width: 100%;
        margin-top: 6px;
        text-align: center;
        font-size: 0.82rem;
        padding: 11px 16px;
    }

    .cd-detail-pg .cd-inf {
        padding: 14px !important;
    }

    /* One column on a phone: two columns would wrap the values off-screen. */
    .cd-dl {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

/* ========== Bookmark page (/bookmark/) ========== */
.cd-bm-page {
    max-width: 900px;
    padding-bottom: 64px;
}

.cd-bm-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin: 22px 0 26px;
    padding-bottom: 16px;
    border-bottom: 3px solid var(--cd-red);
}

.cd-bm-head h1 {
    margin: 8px 0 0;
    font-family: var(--cd-font-display);
    font-size: clamp(1.8rem, 4.5vw, 2.6rem);
    font-weight: 400;
    line-height: 1.1;
    color: var(--cd-pap);
}

.cd-bm-count {
    margin: 0;
    color: var(--cd-mu);
    font-size: 0.9rem;
    font-weight: 700;
    white-space: nowrap;
}

.cd-bm-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cd-bm-item {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
    padding: 14px;
    border: 2px solid var(--cd-ln);
    background: rgba(255,255,255,0.02);
    transition: border-color 0.15s, opacity 0.2s;
}

.cd-bm-item:hover {
    border-color: var(--cd-pap);
}

.cd-bm-item.is-removing {
    opacity: 0.4;
    pointer-events: none;
}

.cd-bm-cv {
    display: block;
    aspect-ratio: 3/4;
    overflow: hidden;
    border: 2px solid var(--cd-glass);
    background:
        radial-gradient(circle, rgba(0,0,0,0.4) 1.1px, transparent 1.5px) 0 0/6px 6px,
        linear-gradient(155deg, hsl(var(--h) 58% 36%), hsl(calc(var(--h) + 30) 50% 9%));
}

.cd-bm-cv img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cd-bm-body {
    min-width: 0;
}

.cd-bm-titlerow {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
}

.cd-bm-titlerow h2 {
    margin: 0;
    font-family: var(--cd-font-ui);
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.cd-bm-titlerow h2 a {
    color: var(--cd-pap);
    text-decoration: none;
}

.cd-bm-titlerow h2 a:hover {
    color: var(--cd-red);
}

.cd-bm-type {
    padding: 1px 7px;
    background: rgba(10, 8, 9, 0.78);
    color: var(--cd-pap);
    border: 1px solid var(--cd-glass);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.cd-bm-new {
    padding: 1px 7px;
    background: var(--cd-red);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 800;
}

.cd-bm-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin: 8px 0 0;
    color: var(--cd-mu);
    font-size: 0.84rem;
}

.cd-bm-ch {
    overflow-wrap: anywhere;
}

.cd-bm-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.cd-bm-actions .cd-btn {
    padding: 7px 14px;
    font-size: 0.85rem;
    border-color: var(--cd-ln);
    color: var(--cd-pap);
}

.cd-bm-actions .cd-btn.p {
    background: var(--cd-red);
    border-color: var(--cd-red);
    color: #fff;
}

.cd-bm-actions .cd-btn.p:hover {
    background: var(--cd-dk);
    border-color: var(--cd-red);
    color: #fff;
}

.cd-bm-actions .cd-btn:not(.p):hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--cd-pap);
    color: var(--cd-pap);
}

.cd-bm-remove {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    padding: 7px 12px;
    background: transparent;
    border: 2px solid transparent;
    color: var(--cd-mu);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}

.cd-bm-remove:hover,
.cd-bm-remove:focus-visible {
    border-color: var(--cd-red);
    color: var(--cd-red);
}

.cd-bm-remove:disabled {
    cursor: default;
    opacity: 0.5;
}

/* Empty / signed-out state */
.cd-bm-empty {
    margin-top: 28px;
    padding: 44px 28px;
    border: 1px solid var(--cd-ln);
    background: var(--cd-surf);
    color: var(--cd-pap);
    text-align: center;
}

.cd-bm-empty h2 {
    margin: 0 0 8px;
    font-family: var(--cd-font-ui);
    font-size: clamp(1.3rem, 3.4vw, 1.8rem);
    font-weight: 700;
    line-height: 1.2;
}

.cd-bm-empty p {
    max-width: 46ch;
    margin: 0 auto 22px;
    color: var(--cd-mu);
}

.cd-bm-empty .cd-btn {
    border-color: var(--cd-ln);
    color: var(--cd-pap);
}

.cd-bm-empty .cd-btn.p {
    background: var(--cd-red);
    border-color: var(--cd-red);
    color: #fff;
}

.cd-bm-empty .cd-btn.p:hover {
    background: var(--cd-red);
    border-color: var(--cd-red);
    color: #fff;
}

@media (max-width: 720px) {
    .cd-bm-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .cd-bm-item {
        grid-template-columns: 66px minmax(0, 1fr);
        gap: 12px;
        padding: 12px;
    }

    .cd-bm-titlerow h2 {
        font-size: 0.98rem;
    }

    .cd-bm-actions {
        margin-top: 12px;
    }

    .cd-bm-remove {
        margin-left: 0;
        padding: 6px 8px;
    }

    .cd-bm-remove span {
        display: none;
    }

    .cd-bm-empty {
        padding: 32px 18px;
    }
}

/* ========== Profile page (/profile/) ========== */
.cd-pf-page {
    max-width: 900px;
    padding-bottom: 64px;
}

/* Signed-in header: avatar, name, then coin/VIP stats */
/* Same treatment as the .cd-mm-acct-head card in the mobile menu:
 * red left bar, soft red wash, uppercase kicker over a bold name. */
.cd-pf-head {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin: 22px 0 26px;
    padding: 16px 18px;
    border-left: 5px solid var(--cd-red);
    background: linear-gradient(90deg, rgba(224, 33, 63, 0.16), rgba(224, 33, 63, 0.02));
}

.cd-pf-avatar {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--cd-red);
    background: var(--cd-red);
    color: #fff;
    font-family: var(--cd-font-display);
    font-size: 1.5rem;
    line-height: 1;
    text-transform: uppercase;
}

.cd-pf-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cd-pf-kicker {
    display: block;
    color: var(--cd-mu);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.cd-pf-id {
    min-width: 0;
    flex: 1;
}

.cd-pf-id h1 {
    margin: 0;
    font-family: var(--cd-font-display);
    font-size: clamp(1.4rem, 3.6vw, 1.9rem);
    font-weight: 400;
    line-height: 1.15;
    color: var(--cd-pap);
    overflow-wrap: anywhere;
}

.cd-pf-handle {
    margin: 4px 0 0;
    color: var(--cd-mu);
    font-size: 0.85rem;
}

/* Verification state, on the identity line so it is visible from any tab. */
.cd-pf-unverified,
.cd-pf-verified {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 7px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.cd-pf-unverified {
    background: rgba(224, 33, 63, 0.14);
    border: 1px solid rgba(224, 33, 63, 0.45);
    color: #ff8098;
}

.cd-pf-unverified::before {
    content: "!";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--cd-red);
    color: #fff;
    font-size: 9px;
    line-height: 1;
}

.cd-pf-verified {
    background: rgba(126, 211, 160, 0.12);
    border: 1px solid rgba(126, 211, 160, 0.35);
    color: #7ed3a0;
}

.cd-pf-verified::before {
    content: "✓";
    font-size: 11px;
    line-height: 1;
}

/* The resend block on the profile tab. */
.cd-pf-verify-box {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px 18px;
    align-items: center;
    margin-top: 22px;
    padding: 16px 18px;
    border: 1px solid rgba(224, 33, 63, 0.35);
    border-radius: 10px;
    background: rgba(224, 33, 63, 0.07);
}

.cd-pf-verify-copy b {
    display: block;
    margin-bottom: 3px;
    font-size: 0.92rem;
}

.cd-pf-verify-copy p {
    margin: 0;
    color: var(--cd-mu);
    font-size: 0.82rem;
    line-height: 1.55;
}

.cd-pf-verify-copy strong {
    color: var(--cd-pap);
    font-weight: 600;
}

.cd-pf-verify-msg {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.5;
}

.cd-pf-verify-msg:empty {
    display: none;
}

.cd-pf-verify-msg.is-error {
    color: #ff8098;
}

.cd-pf-verify-msg.is-success {
    color: #7ed3a0;
}

@media (max-width: 620px) {
    .cd-pf-verify-box {
        grid-template-columns: 1fr;
    }

    .cd-pf-verify-box .cd-btn {
        width: 100%;
    }
}

.cd-pf-stats {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.cd-pf-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 76px;
    padding: 8px 12px;
    border: 2px solid var(--cd-ln);
    text-decoration: none;
    color: var(--cd-pap);
}

a.cd-pf-stat:hover {
    border-color: var(--cd-pap);
}

.cd-pf-stat-value {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--cd-font-ui);
    font-size: 1.05rem;
    line-height: 1.3;
    color: #ffb648;
    font-weight: 700;
}

/* Coin dot matches the mobile menu's balance pill */
.cd-pf-stat-value .cd-coin-dot {
    width: 9px;
    height: 9px;
}

.cd-pf-stat.is-vip .cd-pf-stat-value {
    color: var(--cd-red);
}

.cd-pf-stat-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cd-mu);
}

/* Tabs */
.cd-pf-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 22px;
    padding-bottom: 14px;
    border-bottom: 3px solid var(--cd-ln);
}

.cd-pf-tab {
    display: flex;
    align-items: baseline;
    gap: 7px;
    padding: 9px 14px;
    border: 2px solid var(--cd-ln);
    color: var(--cd-mu);
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.cd-pf-tab small {
    font-size: 0.7rem;
    font-weight: 500;
    opacity: 0.7;
}

.cd-pf-tab:hover {
    border-color: var(--cd-pap);
    color: var(--cd-pap);
}

.cd-pf-tab.is-active {
    background: var(--cd-red);
    border-color: var(--cd-red);
    color: #fff;
}

.cd-pf-tab.is-active small {
    opacity: 0.8;
}

/* Panels */
.cd-pf-panel {
    padding: 22px;
    border: 2px solid var(--cd-ln);
    background: rgba(255,255,255,0.02);
}

.cd-pf-panel-title {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 0 0 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--cd-ln);
    font-family: var(--cd-font-ui);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--cd-pap);
}

.cd-pf-panel-title small {
    font-family: var(--cd-font-ui);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--cd-mu);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.cd-pf-empty {
    margin: 0 0 16px;
    color: var(--cd-mu);
}

/* Forms */
.cd-pf-form .cd-pf-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0 0 18px;
}

.cd-pf-field label {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--cd-pap);
}

.cd-pf-field input[type="text"],
.cd-pf-field input[type="email"],
.cd-pf-field input[type="password"] {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid var(--cd-ln);
    background: transparent;
    color: var(--cd-pap);
    font: inherit;
    font-size: 0.95rem;
}

.cd-pf-field input:focus {
    border-color: var(--cd-pap);
    outline: 0;
}

.cd-pf-field input:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    border-style: dashed;
}

.cd-pf-hint {
    display: block;
    margin: 0;
    color: var(--cd-mu);
    font-size: 0.8rem;
    line-height: 1.5;
}

.cd-pf-hint a {
    color: var(--cd-red);
    font-weight: 700;
}

.cd-pf-tg {
    display: inline-block;
    margin-left: 4px;
}

/* Avatar block — circular photo, camera badge, hover ring */
.cd-pf-avatar-upload {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 24px;
    padding-bottom: 22px;
    border-bottom: 1px dashed var(--cd-ln);
}

/* The real file input is hidden; both the camera badge and the button
 * are <label for> pointing at it, so either one opens the picker. */
.cd-pf-avatar-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.cd-pf-avatar-wrap {
    position: relative;
    flex-shrink: 0;
    width: 96px;
    height: 96px;
}

.cd-pf-avatar-wrap .cd-pf-avatar {
    margin: 0;
    padding: 0;
    border: 0;
}

.cd-pf-avatar-lg {
    display: block;
    width: 96px;
    height: 96px;
    padding: 3px;
    border: 2px solid var(--cd-red);
    border-radius: 50%;
    background: var(--cd-ln);
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.cd-pf-avatar-lg img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    background: var(--cd-ln);
    transition: opacity 0.25s;
}

.cd-pf-avatar-wrap:hover .cd-pf-avatar-lg {
    border-color: var(--cd-pap);
    box-shadow: 0 0 0 4px rgba(224, 33, 63, 0.18);
}

/* Camera badge, bottom-right of the circle */
.cd-pf-avatar-cam {
    position: absolute;
    right: -2px;
    bottom: -2px;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid var(--cd-ink);
    background: var(--cd-red);
    color: #fff;
    cursor: pointer;
    transition: transform 0.15s, background 0.15s;
}

.cd-pf-avatar-cam:hover {
    transform: scale(1.08);
    background: var(--cd-dk);
    color: #fff;
}

/* Uploading: ring spins, photo dims slightly */
.cd-pf-avatar-spinner {
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: var(--cd-red);
    border-right-color: var(--cd-red);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
}

.cd-pf-avatar-wrap[data-state="uploading"] .cd-pf-avatar-spinner {
    opacity: 1;
    animation: cd-pf-spin 0.8s linear infinite;
}

.cd-pf-avatar-wrap[data-state="uploading"] .cd-pf-avatar-lg img {
    opacity: 0.55;
}

.cd-pf-avatar-wrap[data-state="uploading"] .cd-pf-avatar-cam {
    opacity: 0;
    pointer-events: none;
}

/* Success: the ring flashes green once, so the change is felt, not just read */
.cd-pf-avatar-wrap[data-state="done"] .cd-pf-avatar-lg {
    border-color: #4caf7d;
    animation: cd-pf-pop 0.4s ease-out;
}

@keyframes cd-pf-spin {
    to { transform: rotate(360deg); }
}

@keyframes cd-pf-pop {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.06); }
    100% { transform: scale(1); }
}

/* Copy column: button, hint, message */
.cd-pf-avatar-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
    min-width: 0;
}

.cd-pf-avatar-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border: 2px solid var(--cd-pap);
    color: var(--cd-pap);
    font-weight: 700;
    font-size: 0.88rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.cd-pf-avatar-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--cd-pap);
}

.cd-pf-avatar-wrap[data-state="uploading"] ~ .cd-pf-avatar-copy .cd-pf-avatar-btn {
    opacity: 0.6;
    pointer-events: none;
}

.cd-pf-avatar-copy .cd-pf-hint {
    margin: 0;
}

.cd-pf-avatar-msg {
    margin: 0;
    min-height: 1.2em;
    font-size: 0.82rem;
    font-weight: 600;
}

.cd-pf-avatar-msg.is-success {
    color: #6fdc9e;
}

.cd-pf-avatar-msg.is-error {
    color: var(--cd-red);
}

/* Read-only fallback when avatar uploads are disabled in Madara */
.cd-pf-avatar-static {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Notices */
.cd-pf-notice {
    margin-bottom: 18px;
    padding: 12px 16px;
    border-left: 5px solid;
    font-size: 0.9rem;
    font-weight: 600;
}

.cd-pf-notice.is-success {
    border-color: #4caf7d;
    background: rgba(76,175,125,0.12);
    color: #8fe0b8;
}

.cd-pf-notice.is-error {
    border-color: var(--cd-red);
    background: rgba(224,33,63,0.12);
    color: #ff9aa8;
}

/* Panel actions */
.cd-pf-panel .cd-btn {
    border-color: var(--cd-pap);
    color: var(--cd-pap);
}

.cd-pf-panel .cd-btn.p {
    background: var(--cd-red);
    border-color: var(--cd-red);
    color: #fff;
}

.cd-pf-panel .cd-btn.p:hover {
    background: var(--cd-dk);
    border-color: var(--cd-red);
    color: #fff;
}

.cd-pf-panel .cd-btn:not(.p):hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--cd-pap);
    color: var(--cd-pap);
}

/* =====================================================================
 * Embedded wallet — retheme the plugin to Comic Dekho's palette
 * =====================================================================
 *
 * The plugin ships its own neutral grey/amber set on .cdc-wrap and
 * .cdc-wallet. Redefining those tokens here is the documented extension
 * point, so the wallet reads as part of this theme instead of a widget
 * dropped onto the page. No !important, no per-rule overrides — just the
 * token values.
 */
.cd-pf-panel .cdc-wallet {
    --cdc-bg: var(--cd-ink);
    --cdc-bg-2: rgba(255, 255, 255, 0.03);
    --cdc-bg-3: rgba(255, 255, 255, 0.07);
    --cdc-border: var(--cd-ln);
    --cdc-text: var(--cd-pap);
    --cdc-muted: var(--cd-mu);
    --cdc-accent: var(--cd-red);
    --cdc-accent-2: var(--cd-dk);
    --cdc-green: var(--cd-pap);
    --cdc-red: var(--cd-red);

    margin: 0;
}

/* The plugin's cards carry their own 22px padding; inside the profile panel
   that double-pads. Keep the border, drop the padding. */
.cd-pf-panel .cdc-wallet-card {
    padding: 16px 18px;
    border-radius: 8px;
}

.cd-pf-panel .cdc-wallet-card-coins {
    border-color: var(--cd-red);
}

.cd-pf-panel .cdc-wallet-card-member {
    border-color: var(--cd-pap);
}

/* Primary buttons inside the wallet follow the panel's action colours. */
.cd-pf-panel .cdc-wallet .cdc-btn-primary,
.cd-pf-panel .cdc-wallet .cdc-btn-primary:hover {
    background: var(--cd-red);
    color: #fff;
    border-color: var(--cd-red);
}

.cd-pf-panel .cdc-wallet .cdc-btn-primary:hover {
    background: var(--cd-dk);
    border-color: var(--cd-dk);
}

/* Guest state reuses the bookmark empty card */
.cd-pf-guest {
    margin-top: 28px;
}

/* =====================================================================
 * Locked chapter rows in the series chapter list
 * =====================================================================
 *
 * Each row shows its own release wait, so the list reads as a schedule
 * rather than thirty identical locks. The badge markup comes from the
 * plugin; these rules only place and colour it.
 */
.cd-ch .cdc-lock-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 0;
    padding: 3px 10px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, #ffd36b, #f29b1d);
    color: #1c1203;
    font-family: var(--cd-font-ui);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.03em;
    line-height: 1.3;
    text-transform: none;
    vertical-align: middle;
    white-space: nowrap;
    box-shadow: 0 2px 10px -2px rgba(242, 155, 29, 0.55);
}

.cd-ch .cdc-lock-badge .fa-lock {
    font-size: 10px;
    color: #1c1203;
}

/* The plugin's own member badge, for rows outside this theme's list. */
.cd-ch .cdc-lock-badge-member {
    border-color: rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.1);
    color: var(--cd-pap);
}

.cd-ch .cdc-lock-badge-member .fa-star {
    font-size: 0.58rem;
    color: var(--cd-red);
}

/* =====================================================================
 * Locked chapter panel — retheme the coins plugin
 * =====================================================================
 *
 * The plugin renders this in place of the pages when a chapter is not
 * readable. Its own palette is neutral grey/amber; redefining the tokens
 * is the documented extension point, same as the embedded wallet above.
 *
 * Scope is .cd-rd (the reading page's page container) rather than
 * .cdc-wrap, because this panel is printed outside the plugin's wrapper.
 */
.cd-rd .cdc-lock-panel {
    --cdc-bg: var(--cd-ink);
    --cdc-bg-2: rgba(255, 255, 255, 0.03);
    --cdc-bg-3: rgba(255, 255, 255, 0.06);
    --cdc-border: var(--cd-ln);
    --cdc-text: var(--cd-pap);
    --cdc-muted: var(--cd-mu);
    --cdc-accent: var(--cd-red);
    --cdc-accent-2: var(--cd-dk);
    --cdc-green: var(--cd-pap);
    --cdc-red: var(--cd-red);

    border-width: 2px;
}

/* Own background, so the icon disc and countdown need explicit colours —
   the plugin hardcodes an amber wash that reads as brown on this palette. */
.cd-rd .cdc-lock-panel .cdc-lock-icon {
    background: rgba(224, 33, 63, 0.14);
    color: var(--cd-red);
}

.cd-rd .cdc-lock-title {
    font-family: var(--cd-font-ui);
    font-weight: 700;
    font-size: 1.35rem;
    letter-spacing: 0.01em;
}

.cd-rd .cdc-lock-countdown {
    color: var(--cd-pap);
    border: 1px solid var(--cd-ln);
}

.cd-rd .cdc-lock-price-value {
    color: var(--cd-red);
}

/* The plugin's primary button is an amber gradient; site-wide primary
   actions are solid red. */
.cd-rd .cdc-lock-panel .cdc-btn-primary,
.cd-rd .cdc-lock-panel .cdc-btn-primary:hover {
    background: var(--cd-red);
    border-color: var(--cd-red);
    color: #fff;
}

.cd-rd .cdc-lock-panel .cdc-btn-primary:hover {
    background: var(--cd-dk);
    border-color: var(--cd-dk);
}

.cd-rd .cdc-lock-panel .cdc-btn-outline {
    background: transparent;
    border-color: var(--cd-ln);
    color: var(--cd-pap);
}

.cd-rd .cdc-lock-panel .cdc-btn-outline:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--cd-pap);
    color: var(--cd-pap);
}

@media (max-width: 720px) {
    /* Keep the card horizontal like the mobile menu's account block: avatar,
     * name, and the coin pill on one line. Only the stats strip drops below. */
    .cd-pf-head {
        flex-wrap: wrap;
        gap: 12px;
        padding: 14px;
    }

    .cd-pf-avatar {
        width: 46px;
        height: 46px;
        border-width: 2px;
        font-size: 1.15rem;
    }

    .cd-pf-id {
        flex: 1 1 auto;
    }

    .cd-pf-kicker {
        font-size: 0.62rem;
    }

    .cd-pf-id h1 {
        font-size: 1.05rem;
        line-height: 1.2;
    }

    .cd-pf-handle {
        font-size: 0.78rem;
    }

    /* Just the coin pill rides on the first row, next to the name. */
    .cd-pf-stats {
        flex: 0 0 auto;
        gap: 6px;
    }

    .cd-pf-stat {
        min-width: 0;
        padding: 5px 10px;
    }

    .cd-pf-stat-value {
        font-size: 0.9rem;
    }

    .cd-pf-stat-label {
        font-size: 0.6rem;
    }

    .cd-pf-tabs {
        gap: 5px;
    }

    .cd-pf-tab {
        flex: 1 1 calc(50% - 5px);
        justify-content: center;
        padding: 9px 10px;
        font-size: 0.84rem;
    }

    .cd-pf-tab small {
        display: none;
    }

    .cd-pf-panel {
        padding: 16px;
    }

    /* Embedded wallet: drop the plugin's own outer padding on small screens */
    .cd-pf-panel .cdc-wallet {
        padding: 0;
        max-width: none;
    }
}

/* ========== Bookmark button + modals ========== */
.cd-bm-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.cd-bm-icon {
    flex-shrink: 0;
    transition: fill 0.15s, transform 0.15s;
}

.cd-bm-btn.is-on {
    background: var(--cd-red);
    border-color: var(--cd-red);
    color: #fff;
}

/* .cd-btn:not(.p):hover is (0,3,0) and would repaint this button on hover,
 * so the saved state restates its colours at matching specificity. */
.cd-bm-btn.is-on:hover,
.cd-bm-btn.is-on:focus-visible {
    background: var(--cd-dk);
    border-color: var(--cd-red);
    color: #fff;
}

.cd-bm-btn.is-on .cd-bm-icon {
    fill: currentColor;
    transform: scale(1.05);
}

.cd-bm-btn:disabled {
    opacity: 0.65;
    cursor: default;
}

body.cd-modal-open {
    overflow: hidden;
}

.cd-modal[hidden] {
    display: none;
}

.cd-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: grid;
    place-items: center;
    padding: 20px;
}

.cd-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 8, 9, 0.82);
    backdrop-filter: blur(3px);
    animation: cd-modal-fade 0.18s ease-out;
}

.cd-modal-box {
    position: relative;
    width: 100%;
    max-width: 420px;
    padding: 26px;
    border: 3px solid var(--cd-pap);
    background: var(--cd-ink);
    color: var(--cd-pap);
    animation: cd-modal-rise 0.2s ease-out;
}

.cd-modal-box h2 {
    margin: 0 0 10px;
    font-family: var(--cd-font-ui);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--cd-pap);
}

.cd-modal-box p {
    margin: 0 0 22px;
    color: var(--cd-mu);
    font-size: 0.9rem;
    line-height: 1.6;
}

/* A quieter second line, e.g. "we'll bring you back to this series". */
.cd-modal-box p.cd-modal-note {
    margin-top: -10px;
    font-size: 0.82rem;
    color: var(--cd-mu);
    opacity: 0.75;
}

/* Member early-access dialog — a perk, so it is warmer than the others. */
.cd-early-ribbon {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    padding: 4px 10px;
    border-radius: 3px;
    background: rgba(224, 33, 63, 0.14);
    color: var(--cd-red);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.cd-early-ribbon .fa-star {
    font-size: 0.62rem;
}

.cd-modal-box .cd-early-chapter {
    margin: -6px 0 14px;
    color: var(--cd-pap);
    font-family: var(--cd-font-ui);
    font-size: 1.02rem;
    font-weight: 600;
}

.cd-modal-box .cd-early-wait {
    color: var(--cd-pap);
    font-weight: 800;
}

.cd-modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.cd-modal-actions .cd-btn {
    border-color: var(--cd-ln);
    color: var(--cd-pap);
}

.cd-modal-actions .cd-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--cd-pap);
    color: var(--cd-pap);
}

.cd-modal-actions .cd-btn.p {
    background: var(--cd-red);
    border-color: var(--cd-red);
    color: #fff;
}

.cd-modal-actions .cd-btn.p:hover {
    background: var(--cd-dk);
    border-color: var(--cd-red);
    color: #fff;
}

.cd-modal-actions .cd-btn-danger {
    border-color: var(--cd-red);
    color: #ff8a94;
}

.cd-modal-actions .cd-btn-danger:hover {
    background: var(--cd-red);
    border-color: var(--cd-red);
    color: #fff;
}

@keyframes cd-modal-fade {
    from { opacity: 0; }
}

@keyframes cd-modal-rise {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.98);
    }
}

@media (prefers-reduced-motion: reduce) {
    .cd-modal-backdrop,
    .cd-modal-box {
        animation: none;
    }
}

@media (max-width: 480px) {
    .cd-modal-box {
        padding: 20px;
    }

    .cd-modal-actions {
        flex-direction: column-reverse;
    }

    .cd-modal-actions .cd-btn {
        width: 100%;
        justify-content: center;
    }
}