/*
Theme Name: WP YoteNov
Theme URI: https://kizucode.com/wordpress/themes/wp-yotenov/
Author: KizuCode
Author URI: https://kizucode.com/users/kizu/
Description: Manga reading theme built on Madara Core
Version: 0.0.1
Text Domain: wp-yotenov
*/

:root {
    --color-bg-deep: #000000;
    --color-page-bg: #0a0a0a;
    --color-surface: #121212;
    --color-surface-elevated: #1a1a1a;
    --color-accent: #e91e63;
    --color-accent-hot: #ff2d55;
    --color-accent-muted: rgba(233, 30, 99, 0.14);
    --color-text: #ffffff;
    --color-text-muted: #9ca3af;
    --color-border-subtle: rgba(255, 255, 255, 0.08);
    --color-ruby-400: #fb7185;
    --color-star: #fbbf24;
    --color-reader-p-hover-bg: #f43f5e0d;
    --color-reader-p-hover-line: #f43f5e4d;

    /* Reader settings: font stacks + reading-theme presets (single token source) */
    --reader-font-stack-sans: "Nunito Sans", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
    --reader-font-stack-geom: "Georama", ui-sans-serif, system-ui, sans-serif;
    --reader-font-stack-serif: Georgia, "Times New Roman", serif;
    --reader-font-stack-lora: "Lora", Georgia, serif;
    --reader-font-stack-merri: "Merriweather", Georgia, serif;
    --reader-font-stack-basker: "Libre Baskerville", Georgia, serif;
    --reader-font-stack-bitter: "Bitter", Georgia, serif;
    --reader-font-stack-robo: "Roboto", ui-sans-serif, system-ui, sans-serif;
    --reader-font-stack-disp: "Bebas Neue", Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
    --reader-font-stack-mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    --reader-font-stack-dyslexic: "Atkinson Hyperlegible", "Nunito Sans", ui-sans-serif, system-ui, sans-serif;

    --reader-preset-light-bg: #f0f0f5;
    --reader-preset-light-text: #16181f;
    --reader-preset-light-muted: #5c6378;
    --reader-preset-light-hover-bg: color-mix(in srgb, var(--color-accent) 10%, transparent);
    --reader-preset-light-hover-line: color-mix(in srgb, var(--color-accent) 38%, transparent);

    --reader-preset-oled-bg: #000000;
    --reader-preset-oled-text: #ececec;
    --reader-preset-oled-muted: #9ca3af;
    --reader-preset-oled-hover-bg: color-mix(in srgb, var(--color-accent) 12%, transparent);
    --reader-preset-oled-hover-line: color-mix(in srgb, var(--color-accent) 45%, transparent);

    --reader-preset-sepia-bg: #f4ecd8;
    --reader-preset-sepia-text: #3d3428;
    --reader-preset-sepia-muted: #6b5f52;
    --reader-preset-sepia-hover-bg: color-mix(in srgb, var(--color-accent) 10%, transparent);
    --reader-preset-sepia-hover-line: color-mix(in srgb, var(--color-accent) 35%, transparent);

    --reader-preset-green-bg: #e8f2e4;
    --reader-preset-green-text: #1a2e1f;
    --reader-preset-green-muted: #4a6354;
    --reader-preset-green-hover-bg: color-mix(in srgb, var(--color-accent) 9%, transparent);
    --reader-preset-green-hover-line: color-mix(in srgb, var(--color-accent) 34%, transparent);

    --reader-preset-pink-bg: #f8e8ef;
    --reader-preset-pink-text: #2f1a28;
    --reader-preset-pink-muted: #6b4d5f;
    --reader-preset-pink-hover-bg: color-mix(in srgb, var(--color-accent) 11%, transparent);
    --reader-preset-pink-hover-line: color-mix(in srgb, var(--color-accent) 36%, transparent);

    --reader-preset-slate-bg: #1e2a38;
    --reader-preset-slate-text: #e8eef5;
    --reader-preset-slate-muted: #9fb0c3;
    --reader-preset-slate-hover-bg: color-mix(in srgb, var(--color-accent) 12%, transparent);
    --reader-preset-slate-hover-line: color-mix(in srgb, var(--color-accent) 42%, transparent);

    --reader-preset-graphite-bg: #1a1a1a;
    --reader-preset-graphite-text: #e4e4e4;
    --reader-preset-graphite-muted: #9ca3af;
    --reader-preset-graphite-hover-bg: color-mix(in srgb, var(--color-accent) 11%, transparent);
    --reader-preset-graphite-hover-line: color-mix(in srgb, var(--color-accent) 40%, transparent);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html.dark {
    color-scheme: dark;
}

html.light {
    color-scheme: light;
    --color-bg-deep: #ffffff;
    --color-page-bg: #f7f7fb;
    --color-surface: #ffffff;
    --color-surface-elevated: #f1f3f9;
    --color-accent: #d71f56;
    --color-accent-hot: #b51745;
    --color-accent-muted: color-mix(in srgb, var(--color-accent) 14%, transparent);
    --color-text: #151821;
    --color-text-muted: #596275;
    --color-border-subtle: color-mix(in srgb, var(--color-text) 12%, transparent);
    --color-ruby-400: #be244f;
    --color-star: #c98500;
}

body {
    margin: 0;
    font-family: "Nunito Sans", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
    background: var(--color-page-bg);
    color: var(--color-text);
}

body:has(.overlay.active) {
    overflow: hidden;
}

body.reader-page {
    --reader-font-size: 18px;
    --reader-line-height: 1.8;
    --reader-max-width: 52ch;
}

main {
    min-height: 60vh;
}

/* Avoid flash of unstyled layout before Swiper adds layout + swiper-initialized */
main .swiper {
    opacity: 0;
    transition-property: opacity;
    transition-duration: 300ms;
    transition-timing-function: ease-out;
}

main .swiper.swiper-initialized {
    opacity: 1;
}

.sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip.sr:focus {
    position: fixed;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 100000;
    width: auto;
    height: auto;
    padding: 0.75rem 1rem;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
    background: var(--color-surface-elevated);
    border: 1px solid var(--color-border-subtle);
    border-radius: 0.5rem;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--color-text);
}

header {
    position: relative;
    z-index: 100;
    background: var(--color-bg-deep);
    border-bottom: 1px solid var(--color-border-subtle);
}

header .inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.25rem;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.25rem;
    min-height: 72px;
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    text-decoration: none;
    color: var(--color-text);
    min-width: 0;
}

.logo img {
    display: block;
    width: 40px;
    height: 40px;
    object-fit: contain;
    flex-shrink: 0;
}

.logo .placeholder {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 0.5rem;
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--color-accent) 35%, transparent),
        var(--color-surface-elevated)
    );
    border: 1px solid var(--color-border-subtle);
    flex-shrink: 0;
}

.logo .name {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1;
}

.logo .accent {
    color: var(--color-accent);
}

header nav.desktop {
    display: flex;
    justify-content: center;
    min-width: 0;
}

header nav.desktop .menu {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

header nav.desktop .menu a.link {
    position: relative;
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--color-text-muted);
    padding: 0.5rem 1.1rem;
    border-radius: 10px;
    transition: color 0.15s ease, background 0.15s ease;
}

header nav.desktop .menu a.link:hover {
    color: var(--color-text);
}

header nav.desktop .menu a.link.current {
    color: var(--color-accent);
    background: var(--color-accent-muted);
}

.tools {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.65rem;
    justify-content: flex-end;
    min-width: 0;
}

.tools .sep {
    width: 1px;
    height: 28px;
    background: var(--color-border-subtle);
    margin: 0 0.15rem;
}

.tools button.search {
    appearance: none;
    margin: 0;
    font: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: color-mix(in srgb, var(--color-text) 42%, transparent);
    background: color-mix(in srgb, var(--color-text) 2%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-text) 6%, transparent);
    border-radius: 0.75rem;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.tools button.search:hover {
    color: color-mix(in srgb, var(--color-text) 75%, transparent);
    background: color-mix(in srgb, var(--color-text) 5%, transparent);
    border-color: color-mix(in srgb, var(--color-text) 10%, transparent);
}

.tools button.search:hover i {
    color: var(--color-accent);
}

.tools button.theme-toggle {
    appearance: none;
    margin: 0;
    font: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.5rem;
    padding: 0.55rem 0.75rem;
    color: color-mix(in srgb, var(--color-text) 42%, transparent);
    background: color-mix(in srgb, var(--color-text) 2%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-text) 6%, transparent);
    border-radius: 0.75rem;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.tools button.theme-toggle span {
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.tools button.theme-toggle:hover {
    color: color-mix(in srgb, var(--color-text) 85%, transparent);
    background: color-mix(in srgb, var(--color-text) 5%, transparent);
    border-color: color-mix(in srgb, var(--color-text) 10%, transparent);
}

.tools button.theme-toggle:hover i {
    color: var(--color-accent);
}

.tools button.open-desktop {
    display: none;
    gap: 0.65rem;
    max-width: 220px;
    padding: 0.55rem 0.65rem 0.55rem 0.85rem;
    text-align: left;
}

.tools button.open-desktop span {
    flex: 1;
    min-width: 0;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--color-text) 22%, transparent);
}

.tools button.open-mobile {
    padding: 0.55rem;
    min-width: 2.5rem;
    min-height: 2.5rem;
}

.tools .burger {
    display: none;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    min-height: 2.5rem;
    margin: 0;
    padding: 0;
    font: inherit;
    cursor: pointer;
    color: color-mix(in srgb, var(--color-text) 42%, transparent);
    background: color-mix(in srgb, var(--color-text) 2%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-text) 6%, transparent);
    border-radius: 0.75rem;
}

.tools .burger:hover {
    color: color-mix(in srgb, var(--color-text) 85%, transparent);
    background: color-mix(in srgb, var(--color-text) 5%, transparent);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    border: none;
    border-radius: 9999px;
    padding: 0.65rem 1.35rem;
    cursor: pointer;
    transition: filter 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.btn.solid {
    background: var(--color-accent);
    color: var(--color-text);
}

.btn.solid:hover {
    filter: brightness(1.08);
}

.btn.ghost {
    background: transparent;
    color: var(--color-text-muted);
}

.btn.ghost:hover {
    color: var(--color-text);
}

.btn.block {
    width: 100%;
    justify-content: center;
}

@media (min-width: 768px) {
    .tools button.open-desktop {
        display: inline-flex;
    }

    .tools button.open-mobile {
        display: none;
    }
}

@media (max-width: 900px) {
    header .inner {
        gap: 0.75rem;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    header nav.desktop .menu a.link {
        padding: 0.45rem 0.55rem;
        font-size: 0.68rem;
    }

    .logo .name {
        font-size: 0.9rem;
    }

    .tools button.open-desktop {
        max-width: 160px;
    }
}

@media (max-width: 767px) {
    header .inner {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        gap: 0.75rem;
    }

    header nav.desktop {
        display: none;
    }

    .tools .btn,
    .tools .sep {
        display: none;
    }

    .tools button.theme-toggle {
        min-width: 2.5rem;
        padding: 0.55rem;
    }

    .tools button.theme-toggle span {
        display: none;
    }

    .tools .burger {
        display: inline-flex;
    }

    .tools {
        margin-left: auto;
        gap: 0.5rem;
    }
}

.reader-head {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 120;
    width: 100%;
    padding-top: env(safe-area-inset-top, 0px);
    box-sizing: border-box;
    border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
    background: color-mix(in srgb, var(--color-bg-deep) 94%, transparent);
    backdrop-filter: blur(6px);
    transform: translateY(0);
    transition: transform 0.28s ease, visibility 0.28s ease;
    will-change: transform;
}

/* Scroll down: hide bar; scroll up / top: show */
body.reader-head-scroll-hidden .reader-head {
    transform: translateY(calc(-100% - 1px));
    visibility: hidden;
    pointer-events: none;
}

/* Offset chapter body so it sits below fixed reader header */
body.reader-page #content {
    padding-top: calc(env(safe-area-inset-top, 0px) + 3rem + 1px);
    transition: padding-top 0.28s ease;
}

body.reader-page.reader-head-scroll-hidden #content {
    padding-top: env(safe-area-inset-top, 0px);
}

@media (prefers-reduced-motion: reduce) {
    .reader-head {
        transition: none;
    }

    body.reader-page #content {
        transition: none;
    }

    body.reader-head-scroll-hidden .reader-head {
        transform: none;
        visibility: visible;
        pointer-events: auto;
    }

    body.reader-page.reader-head-scroll-hidden #content {
        padding-top: calc(env(safe-area-inset-top, 0px) + 3rem + 1px);
    }
}

.reader-head .inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 3rem;
    max-width: 1440px;
    margin: 0 auto;
    padding: 8px 20px;
}

.reader-head .left {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 0.65rem;
}

.reader-head .back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 0.5rem;
    text-decoration: none;
    color: color-mix(in srgb, var(--color-text) 75%, transparent);
}

.reader-head .meta {
    display: grid;
    min-width: 0;
    max-width: min(56vw, 460px);
}

.reader-head .meta strong {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.reader-head .meta span {
    margin-top: 0.1rem;
    font-size: 0.78rem;
    color: color-mix(in srgb, var(--color-text) 45%, transparent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.reader-head .right {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-shrink: 0;
}

.reader-head .right a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.55rem;
    height: 1.55rem;
    text-decoration: none;
    color: color-mix(in srgb, var(--color-text) 70%, transparent);
}

.reader-head .right .reader-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.55rem;
    height: 1.55rem;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    color: color-mix(in srgb, var(--color-text) 70%, transparent);
    cursor: pointer;
    font: inherit;
}

.reading-content-wrap {
    padding: 1.25rem 1rem 3rem;
}

.reading-content-wrap .content-area {
    max-width: 980px;
    margin: 0 auto;
}

.reading-content-wrap .read-container {
    /* max-width: var(--reader-max-width, 820px); */
    margin: 0 auto;
    font-size: var(--reader-font-size, 1.1rem);
    line-height: var(--reader-line-height, 1.9);
}

/* Reader font (html token from cookie SSR — inc/Helpers/ReaderCookie.php) */
html.font-sans .reading-content-wrap .read-container { font-family: var(--reader-font-stack-sans); }
html.font-geom .reading-content-wrap .read-container { font-family: var(--reader-font-stack-geom); }
html.font-serif .reading-content-wrap .read-container { font-family: var(--reader-font-stack-serif); }
html.font-lora .reading-content-wrap .read-container { font-family: var(--reader-font-stack-lora); }
html.font-merri .reading-content-wrap .read-container { font-family: var(--reader-font-stack-merri); }
html.font-basker .reading-content-wrap .read-container { font-family: var(--reader-font-stack-basker); }
html.font-bitter .reading-content-wrap .read-container { font-family: var(--reader-font-stack-bitter); }
html.font-robo .reading-content-wrap .read-container { font-family: var(--reader-font-stack-robo); }
html.font-disp .reading-content-wrap .read-container { font-family: var(--reader-font-stack-disp); }
html.font-mono .reading-content-wrap .read-container { font-family: var(--reader-font-stack-mono); }
html.font-dyslexic .reading-content-wrap .read-container { font-family: var(--reader-font-stack-dyslexic); }

/* Reading palette: header + canvas (html tokens: light|dark + system|clair|oled|…) */
html.light.clair .reader-head,
html.light.clair .reading-content-wrap {
    --color-text: var(--reader-preset-light-text);
    --color-text-muted: var(--reader-preset-light-muted);
    --color-reader-p-hover-bg: var(--reader-preset-light-hover-bg);
    --color-reader-p-hover-line: var(--reader-preset-light-hover-line);
}

html.light.clair .reader-head {
    --color-bg-deep: var(--reader-preset-light-bg);
    border-bottom-color: color-mix(in srgb, var(--color-text) 8%, transparent);
    background: color-mix(in srgb, var(--reader-preset-light-bg) 94%, transparent);
}

html.light.clair .reading-content-wrap {
    background: var(--reader-preset-light-bg);
    color: var(--color-text);
}

html.dark.oled .reader-head,
html.dark.oled .reading-content-wrap {
    --color-text: var(--reader-preset-oled-text);
    --color-text-muted: var(--reader-preset-oled-muted);
    --color-reader-p-hover-bg: var(--reader-preset-oled-hover-bg);
    --color-reader-p-hover-line: var(--reader-preset-oled-hover-line);
}

html.dark.oled .reader-head {
    --color-bg-deep: var(--reader-preset-oled-bg);
    border-bottom-color: color-mix(in srgb, var(--color-text) 8%, transparent);
    background: color-mix(in srgb, var(--reader-preset-oled-bg) 94%, transparent);
}

html.dark.oled .reading-content-wrap {
    background: var(--reader-preset-oled-bg);
    color: var(--color-text);
}

html.light.sepia .reader-head,
html.light.sepia .reading-content-wrap {
    --color-text: var(--reader-preset-sepia-text);
    --color-text-muted: var(--reader-preset-sepia-muted);
    --color-reader-p-hover-bg: var(--reader-preset-sepia-hover-bg);
    --color-reader-p-hover-line: var(--reader-preset-sepia-hover-line);
}

html.light.sepia .reader-head {
    --color-bg-deep: var(--reader-preset-sepia-bg);
    border-bottom-color: color-mix(in srgb, var(--color-text) 8%, transparent);
    background: color-mix(in srgb, var(--reader-preset-sepia-bg) 94%, transparent);
}

html.light.sepia .reading-content-wrap {
    background: var(--reader-preset-sepia-bg);
    color: var(--color-text);
}

html.light.green .reader-head,
html.light.green .reading-content-wrap {
    --color-text: var(--reader-preset-green-text);
    --color-text-muted: var(--reader-preset-green-muted);
    --color-reader-p-hover-bg: var(--reader-preset-green-hover-bg);
    --color-reader-p-hover-line: var(--reader-preset-green-hover-line);
}

html.light.green .reader-head {
    --color-bg-deep: var(--reader-preset-green-bg);
    border-bottom-color: color-mix(in srgb, var(--color-text) 8%, transparent);
    background: color-mix(in srgb, var(--reader-preset-green-bg) 94%, transparent);
}

html.light.green .reading-content-wrap {
    background: var(--reader-preset-green-bg);
    color: var(--color-text);
}

html.light.pink .reader-head,
html.light.pink .reading-content-wrap {
    --color-text: var(--reader-preset-pink-text);
    --color-text-muted: var(--reader-preset-pink-muted);
    --color-reader-p-hover-bg: var(--reader-preset-pink-hover-bg);
    --color-reader-p-hover-line: var(--reader-preset-pink-hover-line);
}

html.light.pink .reader-head {
    --color-bg-deep: var(--reader-preset-pink-bg);
    border-bottom-color: color-mix(in srgb, var(--color-text) 8%, transparent);
    background: color-mix(in srgb, var(--reader-preset-pink-bg) 94%, transparent);
}

html.light.pink .reading-content-wrap {
    background: var(--reader-preset-pink-bg);
    color: var(--color-text);
}

html.dark.slate .reader-head,
html.dark.slate .reading-content-wrap {
    --color-text: var(--reader-preset-slate-text);
    --color-text-muted: var(--reader-preset-slate-muted);
    --color-reader-p-hover-bg: var(--reader-preset-slate-hover-bg);
    --color-reader-p-hover-line: var(--reader-preset-slate-hover-line);
}

html.dark.slate .reader-head {
    --color-bg-deep: var(--reader-preset-slate-bg);
    border-bottom-color: color-mix(in srgb, var(--color-text) 8%, transparent);
    background: color-mix(in srgb, var(--reader-preset-slate-bg) 94%, transparent);
}

html.dark.slate .reading-content-wrap {
    background: var(--reader-preset-slate-bg);
    color: var(--color-text);
}

html.dark.graphite .reader-head,
html.dark.graphite .reading-content-wrap {
    --color-text: var(--reader-preset-graphite-text);
    --color-text-muted: var(--reader-preset-graphite-muted);
    --color-reader-p-hover-bg: var(--reader-preset-graphite-hover-bg);
    --color-reader-p-hover-line: var(--reader-preset-graphite-hover-line);
}

html.dark.graphite .reader-head {
    --color-bg-deep: var(--reader-preset-graphite-bg);
    border-bottom-color: color-mix(in srgb, var(--color-text) 8%, transparent);
    background: color-mix(in srgb, var(--reader-preset-graphite-bg) 94%, transparent);
}

html.dark.graphite .reading-content-wrap {
    background: var(--reader-preset-graphite-bg);
    color: var(--color-text);
}

.reading-content-wrap .reading-content {
    font-size: inherit;
    line-height: inherit;
}

.reader-text p:first-child {
    margin-top: 0;
}

/* Chapter body: paragraph hover (rose tint + left line — tokens in :root) */
.reading-content-wrap .reader-text p {
    margin: 0.85rem 0;
    padding: 0.55rem 0.85rem;
    border-left: 3px solid transparent;
    border-radius: 0.35rem;
    transition: background-color 0.18s ease, border-color 0.18s ease;
}

.reading-content-wrap .reader-text p:hover {
    background: var(--color-reader-p-hover-bg);
    border-left-color: var(--color-reader-p-hover-line);
}

/* Bottom chapter nav: prev / next + retour au novel */
.reader-chapter-nav-footer {
    margin-top: 2rem;
    width: 100%;
}

.reader-chapter-nav-footer__row--chapters {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    align-items: stretch;
}

@media (max-width: 640px) {
    .reader-chapter-nav-footer__row--chapters {
        grid-template-columns: 1fr;
    }
}

.reader-chapter-nav-footer__row--chapters > a:only-child {
    grid-column: 1 / -1;
}

.reader-chapter-nav-footer__link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.85rem 1rem;
    border-radius: 0.75rem;
    text-decoration: none;
    min-height: 4.25rem;
    box-sizing: border-box;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.reader-chapter-nav-footer__link--prev {
    background: #c8eadc;
    color: #1a2f28;
    box-shadow: 0 1px 0 rgba(26, 47, 40, 0.08);
}

.reader-chapter-nav-footer__link--next {
    background: #e84d6d;
    color: #fff;
    box-shadow: 0 4px 16px rgba(232, 77, 109, 0.38);
}

.reader-chapter-nav-footer__link--prev:hover,
.reader-chapter-nav-footer__link--next:hover {
    transform: translateY(-1px);
}

.reader-chapter-nav-footer__link--next:hover {
    box-shadow: 0 6px 20px rgba(232, 77, 109, 0.48);
}

.reader-chapter-nav-footer__icon-wrap {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
}

.reader-chapter-nav-footer__link--prev .reader-chapter-nav-footer__icon-wrap {
    background: rgba(26, 47, 40, 0.12);
    color: #1a2f28;
}

.reader-chapter-nav-footer__link--next .reader-chapter-nav-footer__icon-wrap {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

.reader-chapter-nav-footer__text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    flex: 1;
    min-width: 0;
    text-align: left;
}

.reader-chapter-nav-footer__text--end {
    text-align: right;
    align-items: flex-end;
}

.reader-chapter-nav-footer__kicker {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity: 0.88;
}

.reader-chapter-nav-footer__link--next .reader-chapter-nav-footer__kicker {
    color: rgba(255, 255, 255, 0.92);
}

.reader-chapter-nav-footer__title {
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1.25;
    word-break: break-word;
}

.reader-chapter-nav-footer__novel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 0.85rem auto 0;
    padding: 0.65rem 1.25rem;
    max-width: 22rem;
    border-radius: 0.75rem;
    background: #c8eadc;
    color: #1a2f28;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.15s ease;
}

.reader-chapter-nav-footer__novel:hover {
    background: #b5e3d0;
}

.reader-chapter-nav-footer__novel i {
    font-size: 1rem;
    opacity: 0.9;
}

/* Chapter list side panel (reader) */
.reader-chapter-list-sheet {
    width: min(100%, 28rem);
}

.reader-chapter-list-top h2 {
    font-size: 0.8125rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-text);
}

.reader-chapter-list-subtitle {
    margin-top: 0.35rem;
}

.reader-chapter-list-controls {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
    padding: 0.65rem 1rem 0.75rem;
    flex-shrink: 0;
    border-bottom: 1px solid var(--color-border-subtle);
}

.reader-chapter-list-search {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    padding: 0.45rem 0.65rem;
    border-radius: 0.65rem;
    border: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
    background: color-mix(in srgb, var(--color-bg-deep) 55%, transparent);
    color: color-mix(in srgb, var(--color-text) 55%, transparent);
}

.reader-chapter-list-search-input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    font: inherit;
    font-size: 0.8125rem;
    color: var(--color-text);
    outline: none;
}

.reader-chapter-list-search-input::placeholder {
    color: color-mix(in srgb, var(--color-text) 38%, transparent);
}

.reader-chapter-list-sort {
    flex-shrink: 0;
    width: 2.65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.65rem;
    border: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
    background: color-mix(in srgb, var(--color-text) 4%, transparent);
    color: var(--color-text);
    cursor: pointer;
    font-size: 1rem;
}

.reader-chapter-list-sort[aria-pressed="true"] {
    background: color-mix(in srgb, var(--color-text) 10%, transparent);
}

.reader-chapter-list-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 0.5rem 0.65rem 0.75rem;
}

.reader-chapter-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.reader-chapter-list-item {
    margin: 0;
    padding: 0;
}

.reader-chapter-list-link {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.75rem 0.5rem;
    text-decoration: none;
    color: inherit;
    border-radius: 0.65rem;
    transition: background 0.15s ease;
}

.reader-chapter-list-link:hover {
    background: color-mix(in srgb, var(--color-text) 5%, transparent);
}

.reader-chapter-list-link.is-current {
    background: color-mix(in srgb, var(--color-accent) 14%, transparent);
    outline: 1px solid color-mix(in srgb, var(--color-accent) 35%, transparent);
}

.reader-chapter-list-badge {
    flex-shrink: 0;
    min-width: 2.25rem;
    padding: 0.25rem 0.35rem;
    text-align: center;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1.2;
    border-radius: 0.45rem;
    background: color-mix(in srgb, var(--color-text) 8%, transparent);
    color: color-mix(in srgb, var(--color-text) 72%, transparent);
}

.reader-chapter-list-text {
    flex: 1;
    min-width: 0;
}

.reader-chapter-list-title {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--color-text);
}

.reader-chapter-list-date {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--color-text) 45%, transparent);
}

.reader-chapter-list-empty {
    margin: 0;
    padding: 1.5rem 0.75rem;
    font-size: 0.8125rem;
    color: color-mix(in srgb, var(--color-text) 52%, transparent);
    text-align: center;
}

.reader-chapter-list-footer {
    flex-shrink: 0;
    padding: 0.75rem 1rem 1rem;
    border-top: 1px solid var(--color-border-subtle);
    background: color-mix(in srgb, var(--color-text) 2%, transparent);
}

.reader-chapter-list-pager {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.reader-chapter-list-pager:empty {
    display: none;
}

a.reader-chapter-list-page-btn {
    flex: 1;
    min-width: 6rem;
    box-sizing: border-box;
    margin: 0;
    padding: 0.65rem 0.5rem;
    font: inherit;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    color: var(--color-text);
    border-radius: 0.65rem;
    border: 1px solid color-mix(in srgb, var(--color-text) 14%, transparent);
    background: color-mix(in srgb, var(--color-bg-deep) 40%, transparent);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

a.reader-chapter-list-page-btn:hover {
    background: color-mix(in srgb, var(--color-text) 8%, transparent);
    border-color: color-mix(in srgb, var(--color-text) 22%, transparent);
}

#reader-chapter-list-panel .backdrop {
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    background: color-mix(in srgb, var(--color-bg-deep) 78%, transparent);
}

.panel.overlay {
    position: fixed;
    inset: 0;
    z-index: 999;
    display: flex;
    justify-content: flex-end;
    visibility: hidden;
    pointer-events: none;
    transition: visibility 0s linear 0.28s;
}

.panel.overlay.active {
    visibility: visible;
    pointer-events: auto;
    transition: visibility 0s;
}

.panel .backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: color-mix(in srgb, var(--color-bg-deep) 72%, transparent);
    backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity 0.28s ease;
}

.panel.overlay.active .backdrop {
    opacity: 1;
}

/* Optional: no dim/blur behind sheet (live preview). Default panels keep dark + blur above. */
.panel--backdrop-clear .backdrop {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.panel .sheet {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: min(100%, 20rem);
    height: 100%;
    background: var(--color-bg-deep);
    border-left: 1px solid var(--color-border-subtle);
    box-shadow: -12px 0 40px color-mix(in srgb, var(--color-bg-deep) 45%, transparent);
    transform: translateX(100%);
    transition: transform 0.28s ease;
}

.panel.overlay.active .sheet {
    transform: translateX(0);
}

.panel .top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1rem 0.75rem;
    border-bottom: 1px solid var(--color-border-subtle);
    flex-shrink: 0;
}

.panel .top h2 {
    margin: 0;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--color-text) 45%, transparent);
}

.panel .x {
    appearance: none;
    margin: 0;
    padding: 0.5rem;
    border: none;
    font: inherit;
    color: color-mix(in srgb, var(--color-text) 42%, transparent);
    background: color-mix(in srgb, var(--color-text) 4%, transparent);
    border-radius: 0.65rem;
    cursor: pointer;
}

.panel nav {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 0.75rem 0.75rem 1rem;
}

.panel .menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.panel .menu li + li {
    margin-top: 0.25rem;
}

.panel .menu a.link {
    display: block;
    padding: 0.85rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--color-text-muted);
    border-radius: 0.75rem;
    transition: background 0.15s ease, color 0.15s ease;
}

.panel .menu a.link:hover {
    color: var(--color-text);
    background: color-mix(in srgb, var(--color-text) 4%, transparent);
}

.panel .menu a.link.current {
    color: var(--color-accent);
    background: var(--color-accent-muted);
}

.panel .cta {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    padding: 1rem 1rem 1.25rem;
    border-top: 1px solid var(--color-border-subtle);
    flex-shrink: 0;
}

.panel.is-elevated {
    z-index: 1200;
}

.panel .sheet.sheet-lg {
    width: min(100%, 26rem);
}

.panel .sheet-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.75rem 1rem 1rem;
    -webkit-overflow-scrolling: touch;
}

.panel .bottom {
    flex-shrink: 0;
    padding: 0.85rem 1rem 1.1rem;
    border-top: 1px solid var(--color-border-subtle);
    background: color-mix(in srgb, var(--color-text) 1.5%, transparent);
}

.panel-kicker {
    margin: 0.35rem 0 0;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--color-text) 42%, transparent);
}

.panel .top h2 + .panel-kicker {
    margin-top: 0.35rem;
}

.panel .sheet-lg .top h2 {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-text);
}

/* Global form controls (side panels, modals, settings) */
.field-section {
    margin-bottom: 1.25rem;
}

.field-section--grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

@media (max-width: 520px) {
    .field-section--grid-2 {
        grid-template-columns: 1fr;
    }
}

.field-row--between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.field-label {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--color-text) 55%, transparent);
}

.field-label i {
    color: var(--color-accent);
    font-size: 0.75rem;
}

.field-value-accent {
    font-size: 0.8125rem;
    font-weight: 800;
    color: var(--color-accent);
}

.field-heading {
    margin: 0 0 0.65rem;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--color-text) 48%, transparent);
}

.control-stepper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-step {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border-radius: 9999px;
    border: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
    background: color-mix(in srgb, var(--color-text) 4%, transparent);
    color: var(--color-text);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

.btn-step:hover {
    border-color: color-mix(in srgb, var(--color-accent) 45%, transparent);
    color: var(--color-accent);
}

.control-range {
    flex: 1;
    min-width: 0;
    height: 0.35rem;
    accent-color: var(--color-accent);
    cursor: pointer;
}

.control-range--block {
    width: 100%;
}

.field-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    gap: 0.25rem 0.5rem;
    align-items: center;
}

.field-pair-hint {
    font-size: 0.55rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--color-text) 38%, transparent);
}

.field-pair-hint--end {
    text-align: right;
}

.field-pair-label {
    grid-column: 1 / -1;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--color-text) 50%, transparent);
}

.field-pair .control-range {
    grid-column: 1 / -1;
}

.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.gap-tight {
    gap: 0.45rem;
}

@media (max-width: 520px) {
    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

.chip {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.35rem;
    padding: 0.35rem 0.5rem;
    border-radius: 0.65rem;
    border: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
    background: color-mix(in srgb, var(--color-text) 3%, transparent);
    color: var(--color-text);
    cursor: pointer;
    font: inherit;
}

.chip:hover {
    border-color: color-mix(in srgb, var(--color-accent) 35%, transparent);
}

.chip[aria-pressed="true"] {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-accent) 35%, transparent);
}

.chip[aria-pressed="true"]::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0.45rem;
    width: 0.35rem;
    height: 0.35rem;
    margin-top: -0.175rem;
    border-radius: 9999px;
    background: var(--color-accent);
}

.chip__text {
    font-size: 0.8125rem;
    font-weight: 700;
    padding-right: 0.75rem;
}

.chip[data-font="sans"] .chip__text { font-family: var(--reader-font-stack-sans); }
.chip[data-font="geom"] .chip__text { font-family: var(--reader-font-stack-geom); }
.chip[data-font="serif"] .chip__text { font-family: var(--reader-font-stack-serif); }
.chip[data-font="lora"] .chip__text { font-family: var(--reader-font-stack-lora); }
.chip[data-font="merri"] .chip__text { font-family: var(--reader-font-stack-merri); }
.chip[data-font="basker"] .chip__text { font-family: var(--reader-font-stack-basker); }
.chip[data-font="bitter"] .chip__text { font-family: var(--reader-font-stack-bitter); }
.chip[data-font="robo"] .chip__text { font-family: var(--reader-font-stack-robo); }
.chip[data-font="disp"] .chip__text { font-family: var(--reader-font-stack-disp); font-size: 1rem; letter-spacing: 0.04em; }
.chip[data-font="mono"] .chip__text { font-family: var(--reader-font-stack-mono); }
.chip[data-font="dyslexic"] .chip__text { font-family: var(--reader-font-stack-dyslexic); }

.palette-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 4.25rem;
    padding: 0.45rem 0.25rem;
    border-radius: 0.75rem;
    border: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
    background: color-mix(in srgb, var(--color-text) 3%, transparent);
    color: color-mix(in srgb, var(--color-text) 72%, transparent);
    cursor: pointer;
    font: inherit;
}

.palette-btn:hover {
    border-color: color-mix(in srgb, var(--color-accent) 35%, transparent);
    color: var(--color-text);
}

.palette-btn[aria-pressed="true"] {
    border-color: var(--color-accent);
    color: var(--color-accent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-accent) 40%, transparent);
}

.palette-btn__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9999px;
    background: color-mix(in srgb, var(--color-text) 8%, transparent);
    color: inherit;
    font-size: 0.95rem;
}

.palette-btn[data-palette="light"] .palette-btn__icon {
    background: color-mix(in srgb, var(--reader-preset-light-bg) 90%, var(--color-text));
    color: var(--reader-preset-light-text);
}

.palette-btn[data-palette="oled"] .palette-btn__icon {
    background: var(--reader-preset-oled-bg);
    color: var(--reader-preset-oled-text);
}

.palette-btn[data-palette="sepia"] .palette-btn__icon {
    background: var(--reader-preset-sepia-bg);
    color: var(--reader-preset-sepia-text);
}

.palette-btn[data-palette="green"] .palette-btn__icon {
    background: var(--reader-preset-green-bg);
    color: var(--reader-preset-green-text);
}

.palette-btn[data-palette="pink"] .palette-btn__icon {
    background: var(--reader-preset-pink-bg);
    color: var(--reader-preset-pink-text);
}

.palette-btn[data-palette="slate"] .palette-btn__icon {
    background: var(--reader-preset-slate-bg);
    color: var(--reader-preset-slate-text);
}

.palette-btn[data-palette="graphite"] .palette-btn__icon {
    background: var(--reader-preset-graphite-bg);
    color: var(--reader-preset-graphite-text);
}

.palette-btn[data-palette="system"] .palette-btn__icon {
    background: color-mix(in srgb, var(--color-accent) 18%, transparent);
    color: var(--color-accent);
}

.palette-btn__label {
    font-size: 0.55rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.2;
}

.panel-footer-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 2.75rem;
    padding: 0 1rem;
    border-radius: 0.75rem;
    border: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
    background: color-mix(in srgb, var(--color-text) 4%, transparent);
    color: color-mix(in srgb, var(--color-text) 78%, transparent);
    font: inherit;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
}

.panel-footer-btn:hover {
    border-color: color-mix(in srgb, var(--color-accent) 40%, transparent);
    color: var(--color-accent);
}

.modal.overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 15vh 1rem 1rem;
}

.modal.overlay.active {
    display: flex;
}

.modal .backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: color-mix(in srgb, var(--color-bg-deep) 80%, transparent);
    backdrop-filter: blur(10px);
}

.modal .box {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 42rem;
    background: color-mix(in srgb, var(--color-surface) 96%, transparent);
    backdrop-filter: blur(24px);
    border: 1px solid color-mix(in srgb, var(--color-text) 6%, transparent);
    border-radius: 1rem;
    box-shadow: 0 20px 50px color-mix(in srgb, var(--color-bg-deep) 50%, transparent);
    max-height: min(85vh, 640px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.modal form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* Search modal: height follows content (no empty tall column) */
#search-modal.search-modal .search-modal__box {
    max-height: min(90vh, 40rem);
}

#search-modal.search-modal .search-modal__form {
    flex: 0 1 auto;
    min-height: 0;
}

.modal .row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid color-mix(in srgb, var(--color-text) 6%, transparent);
    background: color-mix(in srgb, var(--color-text) 2%, transparent);
}

.modal .row .ico {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    font-size: 1rem;
    color: var(--color-accent);
}

.modal .row .ico::after {
    content: "";
    position: absolute;
    inset: -0.35rem;
    border-radius: 9999px;
    background: color-mix(in srgb, var(--color-accent) 35%, transparent);
    filter: blur(12px);
    z-index: -1;
    opacity: 0.85;
}

.modal .row input[type="search"] {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    padding: 0;
    font-family: "Nunito Sans", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text);
    outline: none;
}

.modal .row input::placeholder {
    color: color-mix(in srgb, var(--color-text) 12%, transparent);
}

.modal .row button.x {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: none;
    border-radius: 0.5rem;
    font-size: 0.95rem;
    color: color-mix(in srgb, var(--color-text) 28%, transparent);
    background: transparent;
    cursor: pointer;
}

.modal .row button.x:hover {
    color: var(--color-text);
    background: color-mix(in srgb, var(--color-text) 6%, transparent);
}

.search-live-panel {
    flex: 0 1 auto;
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid color-mix(in srgb, var(--color-text) 6%, transparent);
    background: color-mix(in srgb, var(--color-text) 4%, transparent);
}

.search-live-results {
    flex: 0 1 auto;
    max-height: min(50vh, 26rem);
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0.25rem 0.75rem 0.5rem;
    -webkit-overflow-scrolling: touch;
}

.search-live-mount {
    width: 100%;
}

.search-live-idle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2.25rem 1.5rem 2rem;
    gap: 1.1rem;
}

.search-live-idle__icon {
    font-size: 2.75rem;
    line-height: 1;
    color: color-mix(in srgb, var(--color-text) 35%, transparent);
    opacity: 0.85;
}

.search-live-idle__lines {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    max-width: 20rem;
}

.search-live-idle__lines span {
    display: block;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--color-text) 38%, transparent);
    line-height: 1.35;
}

.search-live-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.search-live-item {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.65rem 0.5rem;
    margin: 0 -0.35rem;
    border-radius: 0.5rem;
    text-decoration: none;
    color: inherit;
    transition: background 0.12s ease;
}

.search-live-item:hover,
.search-live-item:focus-visible {
    background: color-mix(in srgb, var(--color-accent) 12%, transparent);
    outline: none;
}

.search-live-item__thumb {
    flex-shrink: 0;
    width: 3.15rem;
    height: 4.75rem;
    border-radius: 0.4rem;
    overflow: hidden;
    background: color-mix(in srgb, var(--color-text) 10%, var(--color-surface));
    box-shadow: 0 0.15rem 0.5rem rgba(0, 0, 0, 0.18);
}

.search-live-item__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.search-live-item__thumb--empty {
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--color-accent) 22%, var(--color-surface)),
        color-mix(in srgb, var(--color-text) 8%, var(--color-surface))
    );
}

.search-live-item__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding-top: 0.1rem;
}

.search-live-item__title {
    font-size: 0.75rem;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.search-live-item__meta {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--color-text) 48%, transparent);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    overflow: hidden;
}

.search-live-empty {
    margin: 0;
    padding: 1rem 0.75rem;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: color-mix(in srgb, var(--color-text) 45%, transparent);
    text-align: center;
}

.search-live-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    margin: 0;
    padding: 1.25rem 1rem;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: color-mix(in srgb, var(--color-text) 70%, transparent);
    text-align: center;
}

.search-live-loading__icon {
    display: inline-flex;
    color: var(--color-accent);
    font-size: 1rem;
}

.search-live-loading__text {
    flex: 0 1 auto;
}

.search-live-error {
    margin: 0;
    padding: 1rem 0.75rem;
    font-size: 0.8125rem;
    color: color-mix(in srgb, #f87171 80%, var(--color-text));
    text-align: center;
}

.search-live-more {
    margin: 0;
    padding: 0.5rem 0.5rem 0.65rem;
    border-top: 1px solid color-mix(in srgb, var(--color-text) 6%, transparent);
}

.search-live-more__link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--color-accent);
}

.search-live-more__link:hover,
.search-live-more__link:focus-visible {
    color: var(--color-accent-hot);
}

.modal .hint {
    margin: 0;
    padding: 0.85rem 1.25rem 1rem;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: color-mix(in srgb, var(--color-text) 40%, transparent);
    flex-shrink: 0;
}

.modal .foot {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.85rem 1.25rem;
    border-top: 1px solid color-mix(in srgb, var(--color-text) 6%, transparent);
    background: color-mix(in srgb, var(--color-text) 1.5%, transparent);
}

.modal .foot a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    color: color-mix(in srgb, var(--color-text) 42%, transparent);
    transition: color 0.15s ease;
}

.modal .foot a:hover {
    color: var(--color-accent);
}

.modal .foot i {
    font-size: 0.75rem;
}

#search-modal .search-modal-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    padding: 0.95rem 1.25rem;
    border-top: 1px solid color-mix(in srgb, var(--color-text) 6%, transparent);
    background: color-mix(in srgb, var(--color-text) 2%, transparent);
    flex-shrink: 0;
}

#search-modal .search-modal-foot__link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    color: color-mix(in srgb, var(--color-text) 42%, transparent);
    transition: color 0.15s ease;
}

#search-modal .search-modal-foot__link:hover,
#search-modal .search-modal-foot__link:focus-visible {
    color: var(--color-accent);
}

#search-modal .search-modal-foot__link i {
    font-size: 0.75rem;
}

#search-modal .search-modal-foot__submit {
    margin: 0;
    padding: 0.35rem 0;
    border: none;
    border-radius: 0.35rem;
    background: transparent;
    cursor: pointer;
    font: inherit;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--color-text) 55%, transparent);
    transition: color 0.15s ease;
}

#search-modal .search-modal-foot__submit:hover,
#search-modal .search-modal-foot__submit:focus-visible {
    color: var(--color-accent);
}

/* Universal modal: header + scroll body + footer (search uses form-only; settings uses this layout) */
.modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.25rem 0.75rem;
    border-bottom: 1px solid color-mix(in srgb, var(--color-text) 6%, transparent);
    flex-shrink: 0;
}

.modal-head h2 {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-text);
}

.modal-subtitle {
    margin: 0.35rem 0 0;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--color-text) 42%, transparent);
}

.modal-head .x {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: none;
    border-radius: 0.5rem;
    font-size: 0.95rem;
    color: color-mix(in srgb, var(--color-text) 32%, transparent);
    background: transparent;
    cursor: pointer;
}

.modal-head .x:hover {
    color: var(--color-text);
    background: color-mix(in srgb, var(--color-text) 6%, transparent);
}

.modal-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0.75rem 1.25rem 1rem;
    -webkit-overflow-scrolling: touch;
}

.modal-foot {
    flex-shrink: 0;
    padding: 0.85rem 1.25rem 1.1rem;
    border-top: 1px solid color-mix(in srgb, var(--color-text) 6%, transparent);
    background: color-mix(in srgb, var(--color-text) 1.5%, transparent);
}

/* 404 */
.page-error {
    min-height: min(70vh, 42rem);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.25rem 3rem;
    box-sizing: border-box;
}

.page-error-inner {
    width: 100%;
    max-width: 32rem;
    text-align: center;
}

.page-error-code {
    margin: 0 0 0.35rem;
    font-size: clamp(3rem, 12vw, 5rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    color: color-mix(in srgb, var(--color-text) 18%, transparent);
}

.page-error-title {
    margin: 0 0 0.65rem;
    font-size: clamp(1.35rem, 4vw, 1.65rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--color-text);
}

.page-error-lead {
    margin: 0 0 1.5rem;
    font-size: 0.95rem;
    line-height: 1.55;
    color: color-mix(in srgb, var(--color-text) 58%, transparent);
}

.page-error-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    justify-content: center;
}

/* Manga archive + novel search results (shared layout) */
.page-manga-archive,
.page-manga-search {
    padding-bottom: 2rem;
}

/* Generic site search (non–wp-manga) */
.page-search-fallback {
    padding-bottom: 2rem;
}

.search-fallback-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.search-fallback-item__link {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 0.65rem;
    text-decoration: none;
    color: inherit;
    background: color-mix(in srgb, var(--color-surface) 88%, transparent);
    border: 1px solid var(--color-border-subtle);
    transition: border-color 0.15s ease, background 0.15s ease;
}

.search-fallback-item__link:hover,
.search-fallback-item__link:focus-visible {
    border-color: color-mix(in srgb, var(--color-accent) 35%, transparent);
    background: color-mix(in srgb, var(--color-accent) 8%, var(--color-surface));
}

.search-fallback-item__title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-text);
}

.search-fallback-item__type {
    flex-shrink: 0;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--color-text) 45%, transparent);
}

.manga-archive-hero {
    position: relative;
    overflow: hidden;
    padding: 2rem 1.25rem 1.5rem;
    margin: 0 0 1.5rem;
    background: radial-gradient(ellipse 85% 65% at 50% 0%, color-mix(in srgb, var(--color-accent) 22%, transparent) 0%, transparent 58%),
        linear-gradient(180deg, color-mix(in srgb, #1a0a10 55%, var(--color-page-bg)) 0%, var(--color-page-bg) 100%);
    border-bottom: 1px solid var(--color-border-subtle);
}

@media (min-width: 768px) {
    .manga-archive-hero {
        padding: 2.5rem 2rem 1.75rem;
    }
}

.manga-archive-hero__glow {
    position: absolute;
    inset: -40% -20% auto;
    height: 85%;
    background: radial-gradient(ellipse at 50% 0%, rgba(231, 57, 109, 0.18) 0%, transparent 55%);
    pointer-events: none;
}

.manga-archive-hero__inner {
    position: relative;
    z-index: 1;
    max-width: 80rem;
    margin: 0 auto;
}

.manga-archive-hero__top {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: end;
    margin-bottom: 1.75rem;
}

@media (min-width: 768px) {
    .manga-archive-hero__top {
        grid-template-columns: 1fr auto;
        gap: 2rem;
    }
}

.manga-archive-hero__title {
    margin: 0 0 0.65rem;
    font-size: clamp(1.75rem, 5vw, 2.75rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.manga-archive-hero__title-line {
    display: block;
}

.manga-archive-hero__title-line--light {
    color: var(--color-text);
}

.manga-archive-hero__title-line--accent {
    color: var(--color-accent);
}

.manga-archive-hero__lead {
    margin: 0;
    max-width: 38rem;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--color-text-muted);
}

.manga-archive-hero__count {
    text-align: left;
}

@media (min-width: 768px) {
    .manga-archive-hero__count {
        text-align: right;
        padding-bottom: 0.15rem;
    }
}

.manga-archive-hero__count-num {
    display: block;
    font-size: clamp(2.25rem, 5vw, 3rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--color-text);
}

.manga-archive-hero__count-label {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--color-text-muted) 95%, transparent);
}

.manga-archive-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
    padding: 0.75rem 0.85rem;
    border-radius: 0.85rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border-subtle);
}

.manga-archive-toolbar__filters-head {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    width: 100%;
    margin-bottom: 0.15rem;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-text);
}

@media (min-width: 900px) {
    .manga-archive-toolbar__filters-head {
        width: auto;
        margin-bottom: 0;
        margin-right: 0.25rem;
    }
}

.manga-archive-toolbar__filters-head i {
    color: var(--color-accent);
    font-size: 0.85rem;
}

.manga-archive-toolbar__select {
    flex: 1 1 10rem;
    min-width: 0;
    padding: 0.55rem 2rem 0.55rem 0.75rem;
    border-radius: 0.6rem;
    border: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
    background-color: color-mix(in srgb, var(--color-bg-deep) 65%, var(--color-surface));
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239ca3af' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.65rem center;
    color: color-mix(in srgb, var(--color-text) 88%, transparent);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    appearance: none;
}

.manga-archive-toolbar__select:hover {
    border-color: color-mix(in srgb, var(--color-accent) 35%, transparent);
}

.manga-archive-toolbar__views {
    display: inline-flex;
    gap: 0.35rem;
    margin-left: auto;
}

.manga-archive-toolbar__view-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
    border-radius: 0.5rem;
    background: transparent;
    color: color-mix(in srgb, var(--color-text) 55%, transparent);
    cursor: pointer;
    font-size: 0.95rem;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.manga-archive-toolbar__view-btn.is-active {
    background: color-mix(in srgb, var(--color-accent) 28%, transparent);
    border-color: color-mix(in srgb, var(--color-accent) 45%, transparent);
    color: var(--color-accent-hot);
}

.manga-archive-toolbar__search-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    margin-top: 0.25rem;
    padding: 0.65rem 1rem;
    border: none;
    border-radius: 0.65rem;
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hot) 100%);
    color: #fff;
    font: inherit;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--color-accent) 35%, transparent);
    transition: filter 0.15s ease, transform 0.15s ease;
}

.manga-archive-toolbar__search-btn:hover {
    filter: brightness(1.06);
}

@media (min-width: 900px) {
    .manga-archive-toolbar__search-btn {
        width: auto;
        margin-top: 0;
        margin-left: 0.35rem;
    }
}

/* Manga archive — grid + list + pagination (sizes in rem / fr; 6 columns from ~62rem up) */
.manga-archive-main {
    max-width: 80rem;
    margin: 0 auto;
    padding: 0 1.25rem 2.5rem;
}

.manga-archive-empty {
    margin: 2rem 0;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.95rem;
}

.manga-archive-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem 0.85rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (min-width: 36rem) {
    .manga-archive-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 48rem) {
    .manga-archive-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 62rem) {
    .manga-archive-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

.manga-archive-card {
    margin: 0;
    min-width: 0;
}

.manga-archive-card__link {
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: 0.85rem;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.manga-archive-card__link:hover {
    transform: translateY(-0.2rem);
}

.manga-archive-card__link:focus-visible {
    outline: 0.125rem solid var(--color-accent);
    outline-offset: 0.2rem;
}

.manga-archive-card__cover {
    position: relative;
    aspect-ratio: 2 / 3;
    border-radius: 0.65rem;
    overflow: hidden;
    background: color-mix(in srgb, var(--color-text) 8%, var(--color-surface));
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.22);
}

.manga-archive-card__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.manga-archive-card__placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(
        145deg,
        color-mix(in srgb, var(--color-accent) 25%, var(--color-surface)) 0%,
        color-mix(in srgb, var(--color-text) 12%, var(--color-surface)) 100%
    );
}

.manga-archive-card__badge {
    position: absolute;
    z-index: 2;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.2;
    border-radius: 999px;
    padding: 0.28rem 0.45rem;
    white-space: nowrap;
}

.manga-archive-card__badge--status {
    top: 0.45rem;
    right: 0.45rem;
    color: #fff;
}

.manga-archive-card__badge--ongoing {
    background: linear-gradient(135deg, #e7396d 0%, #c21b4a 100%);
}

.manga-archive-card__badge--completed {
    background: linear-gradient(135deg, #22c55e 0%, #15803d 100%);
}

.manga-archive-card__badge--canceled,
.manga-archive-card__badge--hold,
.manga-archive-card__badge--upcoming {
    background: color-mix(in srgb, var(--color-text-muted) 75%, #334155);
    color: #f8fafc;
}

.manga-archive-card__badge--rating {
    left: 0.45rem;
    bottom: 0.45rem;
    right: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border-radius: 0.4rem;
    padding: 0.25rem 0.45rem;
    background: rgba(15, 15, 20, 0.78);
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: none;
    font-size: 0.72rem;
}

.manga-archive-card__badge--rating .fa-star {
    color: #fbbf24;
    font-size: 0.65rem;
}

.manga-archive-card__body {
    padding: 0.65rem 0.15rem 0;
}

.manga-archive-card__title {
    margin: 0 0 0.35rem;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    color: var(--color-text);
}

.manga-archive-card__chapters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.manga-archive-card__chapters .fa-book-open {
    font-size: 0.7rem;
    opacity: 0.85;
}

/* List view */
.page-manga-archive--list .manga-archive-grid {
    grid-template-columns: 1fr;
    gap: 0.65rem;
}

.page-manga-archive--list .manga-archive-card__link {
    display: grid;
    grid-template-columns: 5.5rem 1fr;
    gap: 0.85rem 1rem;
    align-items: center;
    padding: 0.5rem 0.65rem;
    border-radius: 0.75rem;
    background: color-mix(in srgb, var(--color-surface) 92%, transparent);
    border: 1px solid var(--color-border-subtle);
}

.page-manga-archive--list .manga-archive-card__link:hover {
    transform: none;
    border-color: color-mix(in srgb, var(--color-accent) 35%, transparent);
}

.page-manga-archive--list .manga-archive-card__cover {
    width: 5.5rem;
    aspect-ratio: 2 / 3;
    box-shadow: 0 0.25rem 0.875rem rgba(0, 0, 0, 0.2);
}

.page-manga-archive--list .manga-archive-card__body {
    padding: 0;
    min-width: 0;
}

.page-manga-archive--list .manga-archive-card__title {
    font-size: 0.92rem;
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

.manga-archive-pagination {
    margin-top: 2rem;
}

.manga-archive-pagination .pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}

.manga-archive-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.35rem;
    min-height: 2.35rem;
    padding: 0 0.5rem;
    border-radius: 0.5rem;
    border: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
    font-size: 0.8rem;
    font-weight: 600;
    color: color-mix(in srgb, var(--color-text) 85%, transparent);
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.manga-archive-pagination .page-numbers:hover,
.manga-archive-pagination .page-numbers:focus-visible {
    border-color: color-mix(in srgb, var(--color-accent) 45%, transparent);
    color: var(--color-text);
}

.manga-archive-pagination .page-numbers.current {
    background: color-mix(in srgb, var(--color-accent) 28%, transparent);
    border-color: color-mix(in srgb, var(--color-accent) 45%, transparent);
    color: var(--color-accent-hot);
}

.manga-archive-pagination .page-numbers.dots {
    border: none;
    min-width: auto;
}

/* Home: .hero, one .slider pattern (scoped descendants), .announce */
.page-home {
    padding-bottom: 2.5rem;
}

.tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 0.65rem;
}

.tag {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: 0.5rem;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-ruby-400);
    background: color-mix(in srgb, var(--color-accent) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-accent) 20%, transparent);
}

.hero {
    margin-bottom: 2rem;
    padding: 1.75rem 1.25rem 0;
}

.hero .grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    align-items: start;
    max-width: 1280px;
    margin: 0 auto;
}

@media (min-width: 1280px) {
    .hero .grid {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    .hero .grid > *:first-child {
        grid-column: span 8;
    }

    .hero .grid > aside {
        grid-column: span 4;
    }

    .hero.solo .grid > *:first-child {
        grid-column: 1 / -1;
    }
}

.hero .grid > * {
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding-top: clamp(1.5rem, 4vw, 2.75rem);
    min-height: 0;
}
.hero .announce {
    padding: 1rem !important;
    margin-top: clamp(1.5rem, 4vw, 2.75rem);
}

/* One slider block: shared shell + .surface (spotlight) or .fill (announce) */
.slider {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.announce .slider {
    flex: 1 1 auto;
    min-height: 0;
}

.slider > .controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: fit-content;
    max-width: 100%;
    margin: 0.85rem auto 0;
    padding: 0.35rem 0.65rem;
    border-radius: 9999px;
    background: color-mix(in srgb, var(--color-surface) 92%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-text) 18%, transparent);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--color-bg-deep) 45%, transparent);
}

.announce .slider > .controls {
    margin-top: 6px;
}

.slider > .controls button {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    margin: 0;
    padding: 0;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--color-text) 14%, transparent);
    background: color-mix(in srgb, var(--color-surface-elevated) 85%, transparent);
    color: var(--color-text);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    position: static !important;
    inset: auto !important;
    transform: none !important;
    margin-top: 0 !important;
}

.slider > .controls button::after {
    display: none;
}

.slider > .controls button i {
    font-size: 0.8125rem;
    line-height: 1;
}

.slider > .controls button:hover {
    background: var(--color-accent-hot);
    border-color: transparent;
}

.slider > .controls .pagination.swiper-pagination-horizontal {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    width: auto;
    margin: 0;
}

.slider > .controls .pagination .swiper-pagination-bullet {
    width: 6px;
    height: 6px;
    margin: 0 !important;
    opacity: 1;
    background: color-mix(in srgb, var(--color-text) 10%, transparent);
    transition: width 0.35s ease, background 0.35s ease, box-shadow 0.35s ease;
}

.slider > .controls .pagination .swiper-pagination-bullet-active {
    width: 2rem;
    border-radius: 9999px;
    background: var(--color-accent-hot);
    box-shadow: 0 0 10px color-mix(in srgb, var(--color-accent) 40%, transparent);
}

/* Spotlight card */
.slider > .surface {
    position: relative;
    overflow: visible;
    border-radius: 1rem;
    border: 1px solid color-mix(in srgb, var(--color-surface-elevated) 80%, transparent);
    box-shadow: 0 10px 15px -3px color-mix(in srgb, var(--color-bg-deep) 25%, transparent);
    height: 190px;
    flex: 0 0 auto;
    touch-action: pan-y;
    background: linear-gradient(
        to right,
        color-mix(in srgb, var(--color-accent) 10%, transparent),
        color-mix(in srgb, var(--color-surface) 95%, transparent),
        color-mix(in srgb, var(--color-surface) 95%, transparent)
    );
}

@media (min-width: 768px) {
    .slider > .surface {
        height: 248px;
    }
}

.slider > .surface > .swiper {
    position: relative;
    z-index: 1;
    height: 100%;
}

.slider > .surface .swiper-slide {
    height: 100%;
}

.slider > .surface .swiper.swiper-fade .swiper-slide:not(.swiper-slide-active) {
    pointer-events: none;
}

.slider > .surface .blobs {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    border-radius: 1rem;
    pointer-events: none;
}

.slider > .surface .blobs > div {
    position: absolute;
    width: 16rem;
    height: 16rem;
    border-radius: 50%;
    filter: blur(48px);
}

.slider > .surface .blobs > div:first-child {
    top: -8rem;
    left: -8rem;
    background: color-mix(in srgb, var(--color-accent) 20%, transparent);
    opacity: 0.6;
}

.slider > .surface .blobs > div:last-child {
    bottom: -8rem;
    right: -8rem;
    background: color-mix(in srgb, var(--color-accent) 10%, transparent);
    opacity: 0.4;
}

.slider > .surface .swiper-slide > a {
    position: relative;
    display: block;
    height: 100%;
    width: 100%;
    overflow: hidden;
    border-radius: 1rem;
    text-decoration: none;
    color: inherit;
}

.slider > .surface .swiper-slide > a > div:first-child {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: 1rem;
    overflow: hidden;
}

.slider > .surface .swiper-slide > a > div:first-child > div:first-child {
    position: relative;
    width: 100%;
    height: 100%;
}

.slider > .surface .swiper-slide > a > div:first-child img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 1rem;
    transition: transform 0.5s ease;
}

.slider > .surface .swiper-slide > a:hover > div:first-child img {
    transform: scale(1.05);
}

.slider > .surface .swiper-slide > a > div:first-child > div:last-child {
    position: absolute;
    inset: 0;
    z-index: 10;
    border-radius: 1rem;
    background: linear-gradient(
        to right,
        var(--color-bg-deep),
        color-mix(in srgb, var(--color-bg-deep) 80%, transparent),
        transparent
    );
}

.slider > .surface .swiper-slide > a > div:last-child {
    position: relative;
    z-index: 20;
    height: 100%;
}

.slider > .surface .swiper-slide > a > div:last-child > div {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(1.25rem, 3vw, 1.75rem);
    padding-right: clamp(32%, calc(0.4vw + 30.5%), 35%);
    border-radius: 1rem;
}

.slider > .surface .swiper-slide h2 {
    margin: 0 0 0.5rem;
    font-size: clamp(1.125rem, 2.5vw + 0.65rem, 2.25rem);
    font-weight: 900;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    line-height: 1.05;
    color: var(--color-text);
    transition: color 0.2s ease;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
}

.slider > .surface .swiper-slide > a:hover h2 {
    color: var(--color-ruby-400);
}

.slider > .surface .swiper-slide p {
    display: -webkit-box;
    margin: 0;
    padding: 0;
    font-size: 0.875rem;
    line-height: 1.375;
    font-weight: 500;
    color: color-mix(in srgb, var(--color-text) 55%, transparent);
    max-width: 32rem;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (min-width: 768px) {
    .slider > .surface .swiper-slide > a > div:last-child > div {
        gap: 0.5rem;
    }
}

.slider > .surface .floats {
    position: absolute;
    right: 0.5rem;
    top: -30%;
    z-index: 30;
    width: 40%;
    max-width: 260px;
    height: 130%;
    pointer-events: none;
    transition: transform 0.3s ease;
}

@media (min-width: 768px) {
    .slider > .surface .floats {
        right: 1.25rem;
        width: 34%;
        max-width: 300px;
    }
}

.slider > .surface .floats > div {
    position: absolute;
    inset: 0;
    transition: opacity 0.35s ease;
}

.slider > .surface .floats > div > div {
    position: relative;
    width: 100%;
    height: 100%;
}

.slider > .surface .floats img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom center;
    filter: drop-shadow(0 10px 28px color-mix(in srgb, var(--color-bg-deep) 55%, transparent));
    transition: transform 0.35s ease;
}

.slider > .surface:hover .floats img {
    transform: translateX(clamp(-1.25rem, -3vw, -0.5rem));
}

/* Announce column */
.announce {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    border-radius: 1rem;
    border: 1px solid color-mix(in srgb, var(--color-text) 5%, transparent);
    background: color-mix(in srgb, var(--color-text) 2%, transparent);
    padding: 0.75rem;
    min-height: 0;
}

@media (min-width: 768px) {
    .announce {
        padding: 1rem;
    }
}

/* Reusable: section heading row (icon + title | voir tout) */
.section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem 1rem;
}

.section-head:hover .icon-wrap {
    background: color-mix(in srgb, var(--color-accent) 20%, transparent);
}

.section-head .lead {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.section-head .icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.375rem;
    border-radius: 0.75rem;
    background: color-mix(in srgb, var(--color-accent) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-accent) 20%, transparent);
    color: var(--color-ruby-400);
    flex-shrink: 0;
    transition: background 0.15s ease;
}

.section-head .icon-wrap .icon {
    display: block;
    width: 1rem;
    height: 1rem;
    font-size: 1rem;
    line-height: 1;
}

.section-head .title {
    margin: 0;
    padding: 0 0 0 0.625rem;
    border-left: 2px solid color-mix(in srgb, var(--color-accent) 30%, transparent);
    font-size: clamp(0.875rem, 0.6vw + 0.72rem, 1rem);
    font-weight: 900;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    line-height: 1;
    color: var(--color-text);
}

@media (min-width: 768px) {
    .section-head .title {
        font-size: 1.125rem;
    }
}

.section-head .see-all {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-decoration: none;
    color: color-mix(in srgb, var(--color-text) 40%, transparent);
    background: color-mix(in srgb, var(--color-text) 3%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-text) 5%, transparent);
    white-space: nowrap;
    transition:
        color 0.15s ease,
        background-color 0.15s ease,
        border-color 0.15s ease;
}

.section-head .see-all:hover {
    color: var(--color-ruby-400);
    background: color-mix(in srgb, var(--color-accent) 10%, transparent);
    border-color: color-mix(in srgb, var(--color-accent) 30%, transparent);
}

.section-head .see-all-icon {
    font-size: 0.75rem;
    line-height: 1;
    transition: transform 0.15s ease;
}

.section-head .see-all:hover .see-all-icon {
    transform: translateX(2px);
}

.announce .section-head {
    margin-bottom: 0.75rem;
}

.slider > .fill {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
}

.slider > .fill > .swiper {
    height: 100%;
}

.slider > .fill .swiper-slide {
    height: auto;
}

.announce .slider .swiper-slide > div {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.announce .slider .swiper-slide a {
    display: block;
    border-radius: 0.75rem;
    border: 1px solid color-mix(in srgb, var(--color-text) 7%, transparent);
    background: color-mix(in srgb, var(--color-text) 3%, transparent);
    padding: 0.5rem;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.announce .slider .swiper-slide a:hover {
    background: color-mix(in srgb, var(--color-accent) 10%, transparent);
    border-color: color-mix(in srgb, var(--color-accent) 30%, transparent);
}

.announce .slider .swiper-slide a > div {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
}

.announce .slider .swiper-slide a > div > div:first-child {
    position: relative;
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    border-radius: 0.5rem;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
    background: color-mix(in srgb, var(--color-bg-deep) 30%, transparent);

    display: none;
}

.announce .slider .swiper-slide a > div > div:first-child img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.announce .slider .swiper-slide a > div > div:last-child {
    min-width: 0;
}

.announce .slider .swiper-slide a > div > div:last-child > div:first-child {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.announce .slider .swiper-slide h3 {
    margin: 0;
    min-width: 0;
    flex: 1 1 auto;
    font-size: clamp(12px, 0.35vw + 10.5px, 13px);
    font-weight: 900;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: var(--color-text);
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.announce .slider .swiper-slide a > div > div:last-child > div:first-child i {
    flex-shrink: 0;
    font-size: 0.75rem;
    color: color-mix(in srgb, var(--color-text) 45%, transparent);
}

.announce .slider .swiper-slide time {
    display: block;
    margin: 0.25rem 0 0;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--color-text) 35%, transparent);
}

/* Home: popular board (three columns; horizontal scroll on small viewports) */
.popular {
    margin-bottom: 3rem;
    padding: 0 1.25rem;
}

.popular .inner {
    max-width: 1280px;
    margin: 0 auto;
}

.popular .section-head {
    margin-bottom: 1.5rem;
}

.popular .board {
    overflow: hidden;
    border-radius: 1rem;
    background: color-mix(in srgb, var(--color-text) 3%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-text) 5%, transparent);
    padding: 0.75rem;
}

@media (min-width: 768px) {
    .popular .board {
        padding: 1rem;
    }
}

.popular .grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 1rem;
    margin: 0 -0.25rem;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.popular .grid::-webkit-scrollbar {
    display: none;
}

@media (min-width: 1024px) {
    .popular .grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.75rem;
        overflow: visible;
        scroll-snap-type: none;
        padding-bottom: 0;
        margin: 0;
        padding-left: 0;
        padding-right: 0;
    }
}

.popular .col {
    flex: 0 0 85vw;
    max-width: 20rem;
    scroll-snap-align: start;
    min-width: 0;
}

@media (min-width: 640px) {
    .popular .col {
        flex-basis: 320px;
    }
}

@media (min-width: 1024px) {
    .popular .col {
        flex: none;
        max-width: none;
        scroll-snap-align: unset;
    }
}

.popular .badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.625rem;
    padding: 0.25rem 0.625rem;
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--color-accent) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-accent) 25%, transparent);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    line-height: 1.2;
    color: color-mix(in srgb, var(--color-ruby-400) 92%, var(--color-text));
}

.popular .badge-fa {
    font-size: 0.875rem;
    line-height: 1;
    opacity: 0.95;
}

.popular .list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.popular .row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    border-radius: 0.75rem;
    background: color-mix(in srgb, var(--color-text) 3%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-text) 5%, transparent);
    text-decoration: none;
    color: inherit;
    transition:
        background-color 0.15s ease,
        border-color 0.15s ease;
}

.popular .row:hover {
    background: color-mix(in srgb, var(--color-accent) 10%, transparent);
    border-color: color-mix(in srgb, var(--color-accent) 30%, transparent);
}

.popular .rank {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.375rem;
    font-size: 10px;
    font-weight: 900;
    color: color-mix(in srgb, var(--color-ruby-400) 92%, var(--color-text));
    background: color-mix(in srgb, var(--color-accent) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-accent) 25%, transparent);
}

.popular .thumb {
    position: relative;
    flex-shrink: 0;
    width: 2.5rem;
    height: 3.5rem;
    overflow: hidden;
    border-radius: 0.375rem;
    border: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
}

.popular .thumb img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.popular .body {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 0.125rem;
    text-align: left;
}

.popular .novel-title {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    line-height: 1.25;
    color: color-mix(in srgb, var(--color-text) 90%, transparent);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    line-clamp: 1;
    -webkit-line-clamp: 1;
    overflow: hidden;
}

@media (min-width: 768px) {
    .popular .novel-title {
        font-size: 0.75rem;
    }
}

.popular .stat {
    margin: 0;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--color-text) 30%, transparent);
}

.popular .row-chevron {
    flex-shrink: 0;
    font-size: 0.875rem;
    line-height: 1;
    color: color-mix(in srgb, var(--color-text) 20%, transparent);
    transition: color 0.15s ease;
}

.popular .row:hover .row-chevron {
    color: var(--color-ruby-400);
}

.popular .foot {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
}

.popular .more {
    display: inline-block;
    padding: 0.375rem 1rem;
    border-radius: 9999px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    color: color-mix(in srgb, var(--color-text) 50%, transparent);
    background: color-mix(in srgb, var(--color-text) 3%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-text) 6%, transparent);
    cursor: pointer;
    transition:
        color 0.15s ease,
        background-color 0.15s ease,
        border-color 0.15s ease;
}

.popular .more:hover {
    color: var(--color-ruby-400);
    background: color-mix(in srgb, var(--color-accent) 10%, transparent);
    border-color: color-mix(in srgb, var(--color-accent) 30%, transparent);
}

/*
 * Horizontal manga sliders: shared chrome for `.featured-slider` and `.newreleases-slider` (comma selectors).
 */
.featured-slider,
.newreleases-slider {
    position: relative;
    margin-bottom: 3rem;
    padding: 0 1.25rem;
}

.featured-slider .featured-glow,
.newreleases-slider .newreleases-glow {
    position: absolute;
    left: -5rem;
    top: 50%;
    width: 16rem;
    height: 16rem;
    border-radius: 50%;
    pointer-events: none;
    background: color-mix(in srgb, var(--color-accent) 5%, transparent);
    filter: blur(100px);
    transform: translateY(-50%);
    z-index: 0;
}

.featured-slider .featured-inner,
.newreleases-slider .newreleases-inner {
    position: relative;
    z-index: 1;
    max-width: 1280px;
    margin: 0 auto;
}

.featured-slider .section-head,
.newreleases-slider .section-head {
    margin-bottom: 1.25rem;
}

.featured-slider .featured-viewport,
.newreleases-slider .newreleases-viewport {
    position: relative;
    padding: 0 2.75rem;
}

.featured-slider .featured-viewport:hover .featured-prev,
.featured-slider .featured-viewport:hover .featured-next,
.newreleases-slider .newreleases-viewport:hover .newreleases-prev,
.newreleases-slider .newreleases-viewport:hover .newreleases-next {
    opacity: 1;
}

.featured-slider .featured-viewport:hover .featured-prev.swiper-button-disabled,
.featured-slider .featured-viewport:hover .featured-next.swiper-button-disabled,
.newreleases-slider .newreleases-viewport:hover .newreleases-prev.swiper-button-disabled,
.newreleases-slider .newreleases-viewport:hover .newreleases-next.swiper-button-disabled {
    opacity: 0.35;
}

.featured-slider .featured-prev,
.featured-slider .featured-next,
.newreleases-slider .newreleases-prev,
.newreleases-slider .newreleases-next {
    position: absolute;
    top: 38%;
    z-index: 10;
    display: none;
    width: 2.5rem;
    height: 2.5rem;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 9999px;
    cursor: pointer;
    opacity: 0;
    color: var(--color-text);
    background: color-mix(in srgb, var(--color-surface-elevated) 90%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
    transition:
        opacity 0.15s ease,
        background-color 0.15s ease,
        border-color 0.15s ease;
}

.featured-slider .featured-prev,
.newreleases-slider .newreleases-prev {
    left: 0;
    transform: translate(-50%, -50%);
}

.featured-slider .featured-next,
.newreleases-slider .newreleases-next {
    right: 0;
    transform: translate(50%, -50%);
}

.featured-slider .featured-prev:hover:not(.swiper-button-disabled),
.featured-slider .featured-next:hover:not(.swiper-button-disabled),
.newreleases-slider .newreleases-prev:hover:not(.swiper-button-disabled),
.newreleases-slider .newreleases-next:hover:not(.swiper-button-disabled) {
    background: color-mix(in srgb, var(--color-accent) 20%, transparent);
    border-color: color-mix(in srgb, var(--color-accent) 50%, transparent);
}

.featured-slider .featured-prev.swiper-button-disabled,
.featured-slider .featured-next.swiper-button-disabled,
.newreleases-slider .newreleases-prev.swiper-button-disabled,
.newreleases-slider .newreleases-next.swiper-button-disabled {
    cursor: not-allowed;
}

@media (min-width: 768px) {
    .featured-slider .featured-prev,
    .featured-slider .featured-next,
    .newreleases-slider .newreleases-prev,
    .newreleases-slider .newreleases-next {
        display: inline-flex;
    }
}

.featured-slider .featured-prev i,
.featured-slider .featured-next i,
.newreleases-slider .newreleases-prev i,
.newreleases-slider .newreleases-next i {
    font-size: 1.25rem;
    line-height: 1;
}

.featured-slider .featured-swiper.swiper,
.newreleases-slider .newreleases-swiper.swiper {
    overflow: hidden;
    margin: 0;
    padding: 0 0 1rem;
    width: 100%;
    box-sizing: border-box;
}

.featured-slider .featured-swiper .swiper-slide.featured-slide,
.newreleases-slider .newreleases-swiper .swiper-slide.newreleases-slide {
    box-sizing: border-box;
    height: auto;
}

.featured-card {
    display: block;
    width: 100%;
    max-width: 100%;
    text-decoration: none;
    color: inherit;
    border-radius: 1rem;
    transition: transform 0.22s ease;
}

.featured-card:hover {
    transform: translateY(-3px);
}

.featured-cover {
    position: relative;
    aspect-ratio: 2 / 3;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    border-radius: 1rem;
    background: color-mix(in srgb, var(--color-surface) 50%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-text) 5%, transparent);
    transition: border-color 0.2s ease;
}

.featured-card:hover .featured-cover {
    border-color: color-mix(in srgb, var(--color-accent) 35%, transparent);
}

.featured-cover img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1);
    transition: transform 0.35s ease;
}

.featured-card:hover .featured-cover img {
    transform: scale(1.06);
}

.featured-shade {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        to top,
        color-mix(in srgb, var(--color-bg-deep) 88%, transparent) 0%,
        color-mix(in srgb, var(--color-bg-deep) 15%, transparent) 50%,
        transparent 85%
    );
    opacity: 0.85;
    transition: opacity 0.22s ease;
}

.featured-card:hover .featured-shade {
    opacity: 0.95;
}

.featured-pill {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.45rem;
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--color-bg-deep) 78%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--color-bg-deep) 45%, transparent);
    backdrop-filter: blur(10px);
}

.featured-pill-chapters {
    bottom: 0.5rem;
    left: 0.5rem;
}

.featured-pill-rating {
    top: 0.5rem;
    right: 0.5rem;
    gap: 0.25rem;
    padding: 0.15rem 0.4rem;
}

.featured-pill-fa {
    font-size: 0.7rem;
    line-height: 1;
    color: var(--color-ruby-400);
}

.featured-pill-text {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.04em;
    color: var(--color-text);
}

.featured-rating-inner {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.02em;
    color: var(--color-star);
}

.featured-star-fa {
    font-size: 0.65rem;
    line-height: 1;
    color: var(--color-star);
}

.featured-meta {
    margin-top: 0.75rem;
    padding: 0 0.15rem;
}

.featured-card-title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -0.02em;
    text-transform: none;
    color: color-mix(in srgb, var(--color-text) 94%, transparent);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    overflow: hidden;
    transition: color 0.2s ease;
}

.featured-card:hover .featured-card-title {
    color: var(--color-ruby-400);
}

/* New releases: same layout chrome as featured; cards are cover + title only */
.newreleases-card {
    display: block;
    width: 100%;
    max-width: 100%;
    text-decoration: none;
    color: inherit;
    border-radius: 1rem;
    transition: transform 0.22s ease;
}

.newreleases-card:hover {
    transform: translateY(-3px);
}

.newreleases-cover {
    position: relative;
    aspect-ratio: 2 / 3;
    width: 100%;
    overflow: hidden;
    border-radius: 1rem;
    background: color-mix(in srgb, var(--color-surface) 50%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-text) 5%, transparent);
    transition: border-color 0.2s ease;
}

.newreleases-card:hover .newreleases-cover {
    border-color: color-mix(in srgb, var(--color-accent) 35%, transparent);
}

.newreleases-cover img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}

.newreleases-card:hover .newreleases-cover img {
    transform: scale(1.06);
}

.newreleases-shade {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        to top,
        color-mix(in srgb, var(--color-bg-deep) 88%, transparent) 0%,
        color-mix(in srgb, var(--color-bg-deep) 15%, transparent) 50%,
        transparent 85%
    );
    opacity: 0.85;
}

.newreleases-meta {
    margin-top: 0.625rem;
    padding: 0 0.25rem;
}

.newreleases-card-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 900;
    line-height: 1.25;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--color-text) 90%, transparent);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    overflow: hidden;
    transition: color 0.2s ease;
}

.newreleases-card:hover .newreleases-card-title {
    color: var(--color-ruby-400);
}

@media (max-width: 1023px) {
    .featured-slider .featured-viewport,
    .newreleases-slider .newreleases-viewport {
        padding: 0 2.25rem;
    }
}

@media (max-width: 767px) {
    .featured-slider,
    .newreleases-slider {
        padding: 0 1rem;
    }

    .featured-slider .featured-viewport,
    .newreleases-slider .newreleases-viewport {
        padding: 0 0.25rem;
    }

    .featured-slider .featured-prev,
    .featured-slider .featured-next,
    .newreleases-slider .newreleases-prev,
    .newreleases-slider .newreleases-next {
        display: none;
    }

    .featured-card-title {
        font-size: 0.8125rem;
    }

    .newreleases-card-title {
        font-size: 0.875rem;
    }
}

@media (max-width: 479px) {
    .featured-slider,
    .newreleases-slider {
        padding: 0 0.75rem;
    }

    .featured-slider .featured-swiper.swiper,
    .newreleases-slider .newreleases-swiper.swiper {
        padding-left: 0.2rem;
        padding-right: 0.2rem;
    }
}

/* Manga single hero */
.single-hero {
    padding: 3rem 1.25rem 0;
    margin-bottom: 50px;
}

.single-hero .inner {
    max-width: 1440px;
    margin: 0 auto;
}

.single-hero .panel {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.6rem;
    /* padding: 1.8rem;
    border-radius: 1rem;
    border: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
    background: linear-gradient(
        110deg,
        color-mix(in srgb, var(--color-bg-deep) 95%, transparent),
        color-mix(in srgb, var(--color-surface-elevated) 88%, transparent)
    ); */
}

.single-hero .cover {
    position: relative;
    max-width: 250px;
}

.single-hero .cover img {
    display: block;
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border-radius: 0.9rem;
    border: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
}

.single-hero .status {
    position: absolute;
    top: 0.6rem;
    left: 0.6rem;
    z-index: 2;
    padding: 0.2rem 0.6rem;
    border-radius: 9999px;
    background: var(--color-accent);
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.08em;
}

.single-hero .content {
    min-width: 0;
}

.single-hero .tag-row a.tag {
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.single-hero .tag-row a.tag:hover,
.single-hero .tag-row a.tag:focus-visible {
    background: color-mix(in srgb, var(--color-accent) 18%, transparent);
    border-color: color-mix(in srgb, var(--color-accent) 38%, transparent);
    color: var(--color-accent-hot);
    outline: none;
}

.single-hero h1 {
    margin: 0 0 1rem;
    font-size: clamp(2.4rem, 6vw, 5.5rem);
    line-height: 0.95;
    text-transform: uppercase;
    letter-spacing: -0.03em;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
}

.single-hero .meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem 1.1rem;
    margin: 0 0 0.75rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: color-mix(in srgb, var(--color-text) 55%, transparent);
}

.single-hero .desc {
    max-width: 70ch;
    margin: 0 0 1.5rem;
    font-size: 1.04rem;
    line-height: 1.7;
    color: color-mix(in srgb, var(--color-text) 65%, transparent);
}

.single-hero .actions {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.single-hero .count {
    display: inline-flex;
    flex-direction: column;
    gap: 0.15rem;
}

.single-hero .count strong {
    font-size: 2.4rem;
    line-height: 1;
}

.single-hero .count span {
    font-size: 0.68rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: color-mix(in srgb, var(--color-text) 45%, transparent);
}

.single-hero .read {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.95rem 2rem;
    border-radius: 0.8rem;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.09em;
    color: #fff;
    background: linear-gradient(120deg, var(--color-accent), var(--color-accent-hot));
    box-shadow: 0 10px 28px color-mix(in srgb, var(--color-accent) 40%, transparent);
}

.single-hero .read:hover {
    filter: brightness(1.08);
}

@media (min-width: 900px) {
    .single-hero .panel {
        grid-template-columns: 250px minmax(0, 1fr);
        align-items: center;
        gap: 2.4rem;
        /* padding: 2rem; */
    }
}

.single-body {
    padding: 1.5rem 1.25rem 0;
}

.single-body .inner {
    max-width: 1440px;
    margin: 0 auto;
}

.single-body .layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

.single-body .main,
.single-body .side {
    min-width: 0;
}

/* .chapter-box,
.related-box {
    border-radius: 1rem;
    border: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
    background: color-mix(in srgb, var(--color-surface) 90%, transparent);
    padding: 1.35rem;
} */

.chapter-box .head,
.related-box .head {
    margin-bottom: 1.1rem;
}

.chapter-box .head h2,
.related-box .head h3 {
    margin: 0;
    font-size: 1.3rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.chapter-box .head p {
    margin: 0.2rem 0 0;
    font-size: 0.84rem;
    color: color-mix(in srgb, var(--color-text) 50%, transparent);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.chapter-box .tools {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.chapter-box .tools input,
.chapter-box .tools button {
    border: 1px solid color-mix(in srgb, var(--color-text) 9%, transparent);
    background: color-mix(in srgb, var(--color-bg-deep) 45%, transparent);
    color: var(--color-text);
    border-radius: 0.8rem;
    height: 2.75rem;
    padding: 0 1rem;
    font: inherit;
    font-size: 0.92rem;
}

.chapter-box .tools input {
    flex: 1;
    min-width: 0;
}

.chapter-box .tools button {
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 0.06em;
    cursor: pointer;
}

.chapter-box .tools button[data-order-mode="asc"] {
    border-color: color-mix(in srgb, var(--color-accent) 40%, transparent);
    color: #fff;
}

.chapter-box .grid-wrap {
    max-height: 31rem;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.chapter-box .grid-wrap.expanded {
    max-height: none;
}

.chapter-box .grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.7rem;
}

.chapter-box .more {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
}

.chapter-box .display-all {
    border: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
    border-radius: 9999px;
    height: 2.5rem;
    padding: 0 1.25rem;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text);
    background: color-mix(in srgb, var(--color-bg-deep) 45%, transparent);
    cursor: pointer;
}

.chapter-box .item {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    text-decoration: none;
    color: inherit;
    border: 1px solid color-mix(in srgb, var(--color-text) 7%, transparent);
    background: color-mix(in srgb, var(--color-bg-deep) 40%, transparent);
    border-radius: 0.9rem;
    padding: 0.85rem 0.95rem;
    min-height: 4.1rem;
}

.chapter-box .item:hover {
    border-color: color-mix(in srgb, var(--color-accent) 35%, transparent);
}

.chapter-box .num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.7rem;
    font-size: 0.92rem;
    font-weight: 900;
    color: color-mix(in srgb, var(--color-text) 75%, transparent);
    background: color-mix(in srgb, var(--color-text) 6%, transparent);
}

.chapter-box .txt {
    min-width: 0;
    display: grid;
    gap: 0.15rem;
}

.chapter-box .txt strong {
    font-size: 1rem;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chapter-box .txt small {
    font-size: 0.8rem;
    color: color-mix(in srgb, var(--color-text) 45%, transparent);
    text-transform: uppercase;
}

.related-list {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.related-list > li {
    margin: 0;
}

.related-card {
    display: flex;
    align-items: stretch;
    gap: 0.85rem;
    padding: 0.75rem 0.85rem;
    text-decoration: none;
    color: inherit;
    border-radius: 1.1rem;
    border: 1px solid color-mix(in srgb, var(--color-text) 6%, transparent);
    background: #121212;
    box-shadow: 0 0.15rem 0.5rem rgba(0, 0, 0, 0.35);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
    min-height: 4.75rem;
}

.related-card:hover,
.related-card:focus-visible {
    border-color: color-mix(in srgb, var(--color-accent) 28%, transparent);
    box-shadow: 0 0.25rem 0.85rem rgba(0, 0, 0, 0.45);
    outline: none;
}

.related-card__thumb {
    width: 3.25rem;
    height: 4.35rem;
    flex-shrink: 0;
    border-radius: 0.55rem;
    overflow: hidden;
    align-self: center;
    background: color-mix(in srgb, var(--color-text) 8%, #121212);
}

.related-card__thumb--empty {
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--color-accent) 18%, #121212),
        color-mix(in srgb, var(--color-text) 10%, #121212)
    );
}

.related-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.related-card__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.1rem 0;
}

.related-card__title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
}

.related-card__stats {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
}

.related-card__rating {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--color-accent);
}

.related-card__rating .fa-star {
    font-size: 0.65rem;
    color: var(--color-accent);
}

.related-card__rating-num {
    font-variant-numeric: tabular-nums;
}

.related-card__chapters {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #555;
}

@media (min-width: 900px) {
    .single-body .layout {
        grid-template-columns: minmax(0, 1fr) 360px;
        gap: 40px;
    }

    .chapter-box .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

footer {
    position: relative;
    margin-top: 3rem;
    border-top: 1px solid color-mix(in srgb, var(--color-text) 9%, transparent);
    background: var(--color-bg-deep);
    padding: 2.5rem 1.25rem 1.25rem;
    overflow: hidden;
}

.footer-glow {
    position: absolute;
    top: -8rem;
    right: -5rem;
    width: 18rem;
    height: 18rem;
    border-radius: 50%;
    pointer-events: none;
    background: color-mix(in srgb, var(--color-accent) 6%, transparent);
    filter: blur(100px);
}

.footer-inner {
    position: relative;
    z-index: 1;
    max-width: 1280px;
    margin: 0 auto;
}

.footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 2rem;
}

.footer-about .logo {
    margin-bottom: 0.9rem;
}

.footer-blurb {
    margin: 0;
    max-width: 34ch;
    color: color-mix(in srgb, var(--color-text) 62%, transparent);
    font-size: 0.92rem;
    line-height: 1.6;
}

.footer-title {
    margin: 0 0 0.8rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--color-text) 55%, transparent);
}

.footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.55rem;
}

.footer-link {
    display: inline-flex;
    text-decoration: none;
    font-size: 0.9rem;
    color: color-mix(in srgb, var(--color-text) 80%, transparent);
    transition: color 0.15s ease;
}

.footer-link:hover,
.footer-link.current {
    color: var(--color-ruby-400);
}

.footer-bottom {
    margin-top: 1.8rem;
    padding-top: 1rem;
    border-top: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
}

.footer-copy {
    margin: 0;
    color: color-mix(in srgb, var(--color-text) 52%, transparent);
    font-size: 0.82rem;
}

.footer-discord {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.42rem 0.75rem;
    border-radius: 9999px;
    text-decoration: none;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--color-text) 84%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-text) 14%, transparent);
    background: color-mix(in srgb, var(--color-surface) 56%, transparent);
    transition:
        color 0.15s ease,
        border-color 0.15s ease,
        background-color 0.15s ease;
}

.footer-discord:hover {
    color: var(--color-ruby-400);
    border-color: color-mix(in srgb, var(--color-accent) 42%, transparent);
    background: color-mix(in srgb, var(--color-accent) 10%, transparent);
}

@media (max-width: 1023px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }

    .footer-about {
        grid-column: 1 / -1;
    }
}

@media (max-width: 767px) {
    footer {
        padding: 2rem 1rem 1.1rem;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* --------------------------------------------------------------------------
   Blog post single (`single-post.php` / `templates/single-post.php`)
   -------------------------------------------------------------------------- */

.page-blog-single,
.page-singular {
    max-width: 720px;
    margin: 0 auto;
    padding: 2rem 1.25rem 3.5rem;
}

.blog-single__header {
    margin-bottom: 1.75rem;
}

.blog-single__cats {
    margin: 0 0 0.75rem;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.blog-single__cats a {
    color: var(--color-accent);
    text-decoration: none;
}

.blog-single__cats a:hover,
.blog-single__cats a:focus-visible {
    text-decoration: underline;
    outline: none;
}

.blog-single__cat-sep {
    margin: 0 0.35rem;
    color: var(--color-text-muted);
}

.blog-single__title {
    margin: 0 0 1rem;
    font-size: clamp(1.65rem, 4vw, 2.25rem);
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.blog-single__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.blog-single__meta-sep {
    opacity: 0.6;
}

.blog-single__figure {
    margin: 0 0 2rem;
    border-radius: 0.85rem;
    overflow: hidden;
    border: 1px solid var(--color-border-subtle);
    background: var(--color-surface);
}

.blog-single__image {
    display: block;
    width: 100%;
    height: auto;
    vertical-align: middle;
}

.entry-content.blog-single__content,
.singular-entry__content.entry-content {
    font-size: 1.05rem;
    line-height: 1.75;
    color: color-mix(in srgb, var(--color-text) 92%, transparent);
}

.entry-content.blog-single__content > *:first-child,
.singular-entry__content.entry-content > *:first-child {
    margin-top: 0;
}

.entry-content.blog-single__content > *:last-child,
.singular-entry__content.entry-content > *:last-child {
    margin-bottom: 0;
}

.entry-content.blog-single__content h2,
.entry-content.blog-single__content h3,
.entry-content.blog-single__content h4,
.singular-entry__content.entry-content h2,
.singular-entry__content.entry-content h3,
.singular-entry__content.entry-content h4 {
    margin: 2rem 0 0.75rem;
    line-height: 1.25;
    font-weight: 800;
    color: var(--color-text);
}

.entry-content.blog-single__content h2,
.singular-entry__content.entry-content h2 {
    font-size: 1.35rem;
}

.entry-content.blog-single__content h3,
.singular-entry__content.entry-content h3 {
    font-size: 1.15rem;
}

.entry-content.blog-single__content p,
.singular-entry__content.entry-content p {
    margin: 0 0 1.1rem;
}

.entry-content.blog-single__content a,
.singular-entry__content.entry-content a {
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.entry-content.blog-single__content a:hover,
.entry-content.blog-single__content a:focus-visible,
.singular-entry__content.entry-content a:hover,
.singular-entry__content.entry-content a:focus-visible {
    color: var(--color-accent-hot);
    outline: none;
}

.entry-content.blog-single__content ul,
.entry-content.blog-single__content ol,
.singular-entry__content.entry-content ul,
.singular-entry__content.entry-content ol {
    margin: 0 0 1.1rem;
    padding-left: 1.35rem;
}

.entry-content.blog-single__content blockquote,
.singular-entry__content.entry-content blockquote {
    margin: 1.5rem 0;
    padding: 0.75rem 0 0.75rem 1.1rem;
    border-left: 3px solid color-mix(in srgb, var(--color-accent) 55%, transparent);
    color: color-mix(in srgb, var(--color-text) 78%, transparent);
    font-style: italic;
}

.entry-content.blog-single__content pre,
.entry-content.blog-single__content code,
.singular-entry__content.entry-content pre,
.singular-entry__content.entry-content code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.92em;
}

.entry-content.blog-single__content pre,
.singular-entry__content.entry-content pre {
    padding: 1rem 1.1rem;
    border-radius: 0.5rem;
    overflow-x: auto;
    background: var(--color-surface);
    border: 1px solid var(--color-border-subtle);
}

.blog-single__page-links {
    margin: 2rem 0 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--color-border-subtle);
    font-size: 0.9rem;
}

.blog-single__page-links-label {
    font-weight: 700;
    margin-right: 0.35rem;
}

.blog-single__tags {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border-subtle);
}

.blog-single__tags-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: 0.65rem;
}

.blog-single__tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.blog-single__tags-list a {
    display: inline-block;
    padding: 0.35rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--color-text);
    border: 1px solid var(--color-border-subtle);
    background: color-mix(in srgb, var(--color-surface) 80%, transparent);
    transition:
        border-color 0.15s ease,
        background-color 0.15s ease,
        color 0.15s ease;
}

.blog-single__tags-list a:hover,
.blog-single__tags-list a:focus-visible {
    border-color: color-mix(in srgb, var(--color-accent) 45%, transparent);
    background: color-mix(in srgb, var(--color-accent) 10%, transparent);
    color: var(--color-accent-hot);
    outline: none;
}

.singular-entry__title {
    margin: 0 0 1.25rem;
    font-size: clamp(1.5rem, 3.5vw, 2rem);
    font-weight: 800;
    letter-spacing: -0.02em;
}

/* ==========================================================================
   Home hero spotlight — OVERRIDES ONLY
   Delete this entire block to restore theme defaults; nothing above is changed.
   ========================================================================== */

.hero .slider > .surface {
    overflow: hidden !important;
}

.hero .slider > .surface .floats {
    top: 0 !important;
    height: 100% !important;
}

.hero .slider > .surface .swiper-slide > a > div:last-child > div {
    padding-right: clamp(42%, 6vw + 34%, 54%) !important;
    box-sizing: border-box !important;
}

.hero .slider > .surface .floats img {
    inset: -40px !important;
    width: 100% !important;
    height: 140% !important;
    transform: rotate(15deg) !important;
    transform-origin: center center;
}

.hero .slider > .surface:hover .floats {
    transform: translateX(clamp(-1.25rem, -3vw, -0.5rem)) !important;
}