@import url('https://fonts.googleapis.com/css2?family=Cabin:wght@400;600;700&display=swap');

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

:root {
    --bg: #0f1117;
    --surface: #1a1d27;
    --surface2: #22263a;
    --border: #2e3350;
    --text: #e2e8f0;
    --text-muted: #64748b;
    --accent: #818cf8;
    --accent-dim: #3730a3;
    --bar-bg: rgba(15,17,23,.93);
    --drawer-bg: rgba(15,17,23,.97);
    --nav-color: rgba(255,255,255,.2);
    --nav-color-hover: rgba(255,255,255,.75);
    --nav-bg-hover: rgba(255,255,255,.05);
    --bar-h: 52px;
    --nav-w: 60px;
}

html.light {
    --bg: #f1f5f9;
    --surface: #ffffff;
    --surface2: #f8fafc;
    --border: #e2e8f0;
    --text: #1e293b;
    --text-muted: #94a3b8;
    --accent: #6366f1;
    --accent-dim: #ede9fe;
    --bar-bg: rgba(255,255,255,.95);
    --drawer-bg: rgba(248,250,252,.98);
    --nav-color: rgba(0,0,0,.18);
    --nav-color-hover: rgba(0,0,0,.55);
    --nav-bg-hover: rgba(0,0,0,.05);
}

html, body {
    height: 100%;
    font-family: 'Cabin', sans-serif;
    background: var(--bg);
    color: var(--text);
    overflow: hidden;
    user-select: none;
}

/* ── Utility ───────────────────────────────────────────── */
.hidden { display: none !important; }

/* ── Library ───────────────────────────────────────────── */
#library {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--bg);
}

/* Header */
.lib-header {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0 1.25rem;
    height: var(--bar-h);
    background: var(--bar-bg);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.lib-brand {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--accent);
    white-space: nowrap;
    letter-spacing: -0.01em;
}

.lib-search-wrap {
    flex: 1;
    max-width: 360px;
    position: relative;
    display: flex;
    align-items: center;
}

.lib-search-icon {
    position: absolute;
    left: 0.65rem;
    width: 0.9rem;
    height: 0.9rem;
    stroke: var(--text-muted);
    pointer-events: none;
}

#lib-search {
    width: 100%;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    padding: 0.4rem 0.75rem 0.4rem 2.1rem;
    font-size: 0.82rem;
    font-family: 'Cabin', sans-serif;
    color: var(--text);
    outline: none;
    transition: border-color .15s;
}

#lib-search:focus { border-color: var(--accent); }
#lib-search::placeholder { color: var(--text-muted); }

.lib-theme-btn {
    position: static !important;
    box-shadow: none !important;
    margin-left: auto;
    flex-shrink: 0;
}

/* Main grid area */
.lib-main {
    flex: 1;
    padding: 1.5rem 1.25rem 2rem;
    overflow-y: auto;
}

/* Manga grid */
.manga-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 1rem;
}

/* Manga card */
.manga-card {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    border-radius: 0.6rem;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border);
    transition: transform .15s, box-shadow .15s, border-color .15s;
}

.manga-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,.35);
    border-color: var(--accent);
}

.manga-cover {
    position: relative;
    aspect-ratio: 2 / 3;
    background: var(--surface2);
    overflow: hidden;
}

.manga-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .2s;
}

.manga-card:hover .manga-cover img { transform: scale(1.04); }

.manga-cover-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--accent);
    background: var(--surface2);
    letter-spacing: -0.02em;
}

.manga-ch-badge {
    position: absolute;
    bottom: 0.4rem;
    right: 0.4rem;
    background: rgba(0,0,0,.72);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    padding: 0.15rem 0.45rem;
    border-radius: 9999px;
    backdrop-filter: blur(4px);
}

.manga-info {
    padding: 0.5rem 0.55rem 0.55rem;
}

.manga-title {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.35;
}

/* Empty / loading states */
.lib-state {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 4rem 1rem;
    color: var(--text-muted);
    text-align: center;
}

.lib-state svg { width: 2.5rem; height: 2.5rem; stroke: var(--text-muted); opacity: .5; }

.lib-state-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
}

.lib-state-sub {
    font-size: 0.8rem;
    line-height: 1.5;
    max-width: 280px;
}

.lib-state-path {
    font-size: 0.75rem;
    font-family: monospace;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 0.4rem;
    padding: 0.3rem 0.65rem;
    color: var(--accent);
}

/* ── Manga Detail page ──────────────────────────────────── */
#manga-detail {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    overflow: hidden;
}

/* Hero */
.detail-hero {
    position: relative;
    flex-shrink: 0;
    overflow: hidden;
    padding: 3rem 1.25rem 1.75rem;
    min-height: 220px;
}

.detail-hero-blur {
    position: absolute;
    inset: -20px;
    background-size: cover;
    background-position: center top;
    filter: blur(28px) brightness(.45) saturate(1.4);
    transform: scale(1.08);
    pointer-events: none;
}

.detail-hero-fade {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 40%, var(--bg) 100%);
    pointer-events: none;
}

.detail-back-btn {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9999px;
    background: rgba(0,0,0,.45);
    border: none;
    color: #fff;
    cursor: pointer;
    backdrop-filter: blur(4px);
    transition: background .15s;
}
.detail-back-btn:hover { background: rgba(0,0,0,.65); }
.detail-back-btn svg { width: 1.1rem; height: 1.1rem; stroke: currentColor; }

.detail-hero-body {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 1.1rem;
    align-items: flex-end;
}

.detail-cover-wrap {
    flex-shrink: 0;
}

.detail-cover {
    width: 110px;
    aspect-ratio: 2/3;
    object-fit: cover;
    border-radius: 0.5rem;
    box-shadow: 0 8px 32px rgba(0,0,0,.6);
    display: block;
    background: var(--surface2);
}

.detail-hero-meta {
    flex: 1;
    min-width: 0;
    padding-bottom: 0.25rem;
}

.detail-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.25;
    margin-bottom: 0.2rem;
}

.detail-alt-title {
    font-size: 0.75rem;
    color: rgba(255,255,255,.6);
    margin-bottom: 0.35rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.detail-author {
    font-size: 0.78rem;
    color: rgba(255,255,255,.75);
    margin-bottom: 0.5rem;
}

.detail-badges { display: flex; gap: 0.4rem; flex-wrap: wrap; }

.detail-badge {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.18rem 0.55rem;
    border-radius: 9999px;
    border: 1px solid;
    white-space: nowrap;
}

.badge-ongoing  { color: #4ade80; border-color: #4ade80; }
.badge-completed{ color: #818cf8; border-color: #818cf8; }
.badge-hiatus   { color: #fbbf24; border-color: #fbbf24; }
.badge-cancelled{ color: #f87171; border-color: #f87171; }
.badge-year     { color: rgba(255,255,255,.55); border-color: rgba(255,255,255,.25); }

/* Scrollable body */
.detail-body {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem 1.25rem 3rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Start reading */
.detail-start-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.65rem 1.5rem;
    border-radius: 0.6rem;
    background: var(--accent);
    color: #fff;
    border: none;
    font-size: 0.9rem;
    font-weight: 700;
    font-family: 'Cabin', sans-serif;
    cursor: pointer;
    transition: background .15s, transform .15s;
    align-self: flex-start;
}
.detail-start-btn svg { width: 1rem; height: 1rem; stroke: currentColor; }
.detail-start-btn:hover { background: #6366f1; transform: translateY(-1px); }

/* Description */
.detail-desc-wrap { display: flex; flex-direction: column; gap: 0.4rem; }

.detail-desc {
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.6;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}

.detail-desc.expanded {
    display: block;
    -webkit-line-clamp: unset;
}

.detail-desc-more {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: none;
    border: none;
    color: var(--accent);
    font-size: 0.78rem;
    font-weight: 600;
    font-family: 'Cabin', sans-serif;
    cursor: pointer;
    padding: 0;
    align-self: flex-start;
}
.detail-desc-more svg { width: 0.85rem; height: 0.85rem; stroke: currentColor; transition: transform .2s; }
.detail-desc-more.expanded svg { transform: rotate(180deg); }

/* Tags */
.detail-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.detail-tag {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 9999px;
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--text-muted);
    white-space: nowrap;
}

/* Chapter list */
.detail-ch-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--border);
}

.detail-ch-count {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text);
}

.detail-ch-actions { display: flex; align-items: center; gap: 0.1rem; }

.detail-ch-list { display: flex; flex-direction: column; }

.detail-ch-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background .1s;
    border-radius: 0.35rem;
    padding-left: 0.5rem;
}
.detail-ch-item:last-child { border-bottom: none; }
.detail-ch-item:hover { background: var(--surface); }
.detail-ch-item:hover .detail-ch-name { color: var(--accent); }

/* Read-toggle button (the leading chapter icon) */
.detail-ch-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    background: none;
    border: none;
    color: var(--accent);
    cursor: pointer;
    transition: background .12s, color .12s;
}
.detail-ch-icon:hover { background: var(--surface2); }
.detail-ch-icon svg { width: 1rem; height: 1rem; stroke: currentColor; }

.detail-ch-info { flex: 1; min-width: 0; }

.detail-ch-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color .1s;
}

.detail-ch-pages {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 0.1rem;
}

.detail-ch-chevron svg { width: 0.9rem; height: 0.9rem; stroke: var(--text-muted); }

/* ── Old landing styles (unused — kept for reference) */
/* #landing {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    overflow-y: auto;
}

.landing-card {
    width: 100%;
    max-width: 480px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 1.25rem;
    padding: 2.5rem 2rem 2rem;
    box-shadow: 0 20px 60px rgba(0,0,0,.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.landing-icon svg {
    width: 80px;
    height: 80px;
    stroke: var(--accent);
    stroke-width: 1.5;
    filter: drop-shadow(0 4px 16px rgba(129,140,248,.35));
}

.landing-card h1 {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text);
}

.landing-sub {
    font-size: 0.85rem;
    color: var(--text-muted);
    text-align: center;
}

.landing-btns {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    margin-top: 0.25rem;
}

.btn-open {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.6rem 1.1rem;
    border-radius: 0.6rem;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
    background: var(--accent);
    color: #fff;
    border: none;
}

.btn-open svg { width: 1rem; height: 1rem; flex-shrink: 0; }

.btn-open:hover { background: #6366f1; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(99,102,241,.4); }

.btn-open-secondary {
    background: var(--surface2);
    color: var(--text);
    border: 1px solid var(--border);
}

.btn-open-secondary:hover { background: var(--border); transform: translateY(-1px); box-shadow: none; }

.btn-open input { display: none; }

.drop-zone {
    width: 100%;
    border: 2px dashed var(--border);
    border-radius: 0.75rem;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-muted);
    font-size: 0.82rem;
    transition: border-color .15s, background .15s, color .15s;
    cursor: default;
}

.drop-zone svg { width: 1.75rem; height: 1.75rem; stroke: currentColor; }

.drop-zone.drag-over {
    border-color: var(--accent);
    background: rgba(129,140,248,.08);
    color: var(--accent);
}

/* Recent */
.recent-section { width: 100%; }

.recent-heading {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.recent-list { display: flex; flex-direction: column; gap: 0.35rem; }

.recent-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.75rem;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text);
    transition: border-color .12s, background .12s;
}

.recent-item:hover { border-color: var(--accent); background: rgba(129,140,248,.07); }

.recent-item svg { width: 0.9rem; height: 0.9rem; stroke: var(--text-muted); flex-shrink: 0; }

.recent-item-count {
    margin-left: auto;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
}

.recent-item-del {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0 0.1rem;
    display: flex;
    align-items: center;
    font-size: 0.85rem;
    line-height: 1;
    border-radius: 3px;
    transition: color .1s;
}

.recent-item-del:hover { color: #f87171; }
*/

/* ── Reader ────────────────────────────────────────────── */
#reader {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    display: flex;
    flex-direction: column;
    background: var(--bg);
}

/* Bars — fixed to the viewport so their placement never depends on the stage
   height (which collapses when the page-viewport goes position:fixed in strip). */
.reader-bar {
    position: fixed;
    left: 0;
    right: 0;
    height: var(--bar-h);
    background: var(--bar-bg);
    backdrop-filter: blur(8px);
    border-color: var(--border);
    display: flex;
    align-items: center;
    padding: 0 0.75rem;
    gap: 0.5rem;
    z-index: 20;
    transition: opacity .2s;
}

.top-bar { top: 0; border-bottom: 1px solid var(--border); }
.bot-bar { bottom: 0; border-top: 1px solid var(--border); }

.reader-title {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}

.bar-spacer { flex: 1; }

.bar-controls {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.control-group {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    padding: 0 0.35rem;
    border-right: 1px solid var(--border);
}

.control-group:last-child { border-right: none; }

.bar-btn {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.5rem;
    border-radius: 0.4rem;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 600;
    transition: background .12s, color .12s;
    white-space: nowrap;
}

/* Lucide SVGs inside bar buttons */
.bar-btn svg { width: 1rem; height: 1rem; flex-shrink: 0; stroke: currentColor; }

.bar-btn:hover { background: var(--surface2); color: var(--text); }

.bar-btn.active {
    background: var(--accent-dim);
    color: var(--accent);
}

.zoom-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted);
    min-width: 2.8rem;
    text-align: center;
}

/* Stage — a plain positioned box; children are absolute overlays so there is no
   flex-height ambiguity anywhere in the chain. */
.reader-stage {
    flex: 1;
    min-height: 0;
    display: flex;
    position: relative;
    overflow: hidden;
}

/* Nav buttons — fixed overlays on the left/right edges, between the bars
   (viewport-anchored like the page viewport, above it so they stay clickable). */
.nav-btn {
    position: fixed;
    top: var(--bar-h);
    bottom: var(--bar-h);
    width: var(--nav-w);
    background: none;
    border: none;
    color: var(--nav-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color .15s, background .15s;
    z-index: 6;
}

.nav-prev { left: 0; }
.nav-next { right: 0; }

#reader.bars-hidden .nav-btn { top: 0; bottom: 0; }

.nav-btn svg { width: 2rem; height: 2rem; stroke: currentColor; stroke-width: 2.5; }

.nav-btn:hover { color: var(--nav-color-hover); background: var(--nav-bg-hover); }

.nav-btn:disabled { opacity: 0; pointer-events: none; }

/* Page viewport — fixed between the two bars (viewport-anchored, so it never
   depends on the flex-height chain). Flex-centers the page. */
.page-viewport {
    position: fixed;
    top: var(--bar-h);
    bottom: var(--bar-h);
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: grab;
    z-index: 1;
}

/* Fullscreen hides the bars → use the full viewport height */
#reader.bars-hidden .page-viewport { top: 0; bottom: 0; }

.page-viewport.grabbing { cursor: grabbing; }

/* page-inner is content-sized (holds the image); the image's own viewport-unit
   sizing means page-inner never needs a definite height — no circular deps. */
.page-inner {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* fit-width: let the viewport scroll vertically, anchored to the top */
.page-viewport.scroll-y {
    align-items: flex-start;
    overflow-y: auto;
    overflow-x: hidden;
}

#page-img {
    display: block;
    transform-origin: center center;
    pointer-events: none;
}

/* Fit page — sized in VIEWPORT UNITS so it always resolves regardless of how
   the ancestor flex/position chain computes heights. Full page always visible. */
#page-img.fit-page {
    max-width:  calc(100vw - 2 * var(--nav-w));
    max-height: calc(100vh - 2 * var(--bar-h));
    width: auto;
    height: auto;
}

/* Fit width — page fills the available width; viewport scrolls vertically */
#page-img.fit-width {
    width: calc(100vw - 2 * var(--nav-w));
    height: auto;
    max-width: none;
    max-height: none;
}

/* In fullscreen the bars are hidden, so the page may use the full viewport height */
#reader.bars-hidden #page-img.fit-page { max-height: 100vh; }

/* Long strip mode — the (already viewport-fixed) page viewport becomes the
   vertical scroll container. */
.page-viewport.strip-mode {
    display: block;
    align-items: initial;
    justify-content: initial;
    overflow-y: auto;
    overflow-x: hidden;
    cursor: default;
}

.strip-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 0;
    padding: 0;
}

/* Kill any sub-pixel seams between stacked pages */
.strip-container img { vertical-align: top; }

/* Column width is driven by --strip-w (set by the zoom controls); capped at the
   viewport width so it never needs horizontal scrolling. */
.strip-container img {
    display: block;
    width: var(--strip-w, 900px);
    max-width: 100%;
    height: auto;
    pointer-events: none;
}

/* Bottom bar */
.page-slider {
    flex: 1;
    min-width: 80px;
    accent-color: var(--accent);
    cursor: pointer;
    height: 4px;
}

.sm-btn {
    padding: 0.3rem;
    border-radius: 0.35rem;
}

.page-counter {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-muted);
    min-width: 4.5rem;
    text-align: right;
    white-space: nowrap;
}

/* Thumbnail toggle button */
.thumb-toggle {
    position: fixed;
    bottom: calc(var(--bar-h) + 0.75rem);
    right: 0.75rem;
    z-index: 30;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 9999px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color .12s, border-color .12s;
}

.thumb-toggle svg { width: 1rem; height: 1rem; stroke: currentColor; }
.thumb-toggle:hover { color: var(--accent); border-color: var(--accent); }
.thumb-toggle.active { color: var(--accent); border-color: var(--accent); background: rgba(129,140,248,.12); }

/* Thumbnail drawer */
.thumb-drawer {
    position: fixed;
    bottom: var(--bar-h);
    left: 0;
    right: 0;
    height: 110px;
    background: var(--drawer-bg);
    border-top: 1px solid var(--border);
    backdrop-filter: blur(8px);
    z-index: 25;
    overflow-x: auto;
    overflow-y: hidden;
}

.thumb-strip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    height: 100%;
}

.thumb-item {
    flex-shrink: 0;
    width: 68px;
    height: 94px;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color .12s;
    position: relative;
}

.thumb-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}

.thumb-item .thumb-num {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,.65);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    text-align: center;
    padding: 1px 0;
}

.thumb-item:hover { border-color: rgba(129,140,248,.6); }
.thumb-item.active { border-color: var(--accent); }

/* Auto-hide bars in fullscreen */
#reader.bars-hidden .top-bar,
#reader.bars-hidden .bot-bar,
#reader.bars-hidden .thumb-toggle { opacity: 0; pointer-events: none; }

#reader.bars-hidden .reader-stage { margin: 0; }

/* Smooth bar show on hover near edges */
#reader.bars-hidden:hover .top-bar,
#reader.bars-hidden:hover .bot-bar,
#reader.bars-hidden:hover .thumb-toggle { opacity: 1; pointer-events: auto; }

/* ── Theme toggle ───────────────────────────────────────── */
.theme-btn {
    position: fixed;
    top: 0.7rem;
    right: 0.7rem;
    z-index: 200;
    /* In the library header it's static — overridden by .lib-theme-btn */
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 9999px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
    transition: color .15s, border-color .15s, background .15s;
}
.theme-btn svg { width: 1rem; height: 1rem; stroke: currentColor; }
.theme-btn:hover { color: var(--accent); border-color: var(--accent); }

/* In reader the top bar is 52px tall — nudge button down to sit centred in it */
#reader:not(.hidden) ~ .theme-btn,
body:has(#reader:not(.hidden)) .theme-btn {
    top: calc(var(--bar-h) / 2 - 1.1rem);
}

/* ── Responsive ─────────────────────────────────────────── */

/* Touch / pointer-coarse devices (phones + tablets)
   Nav buttons become full-height transparent overlay zones so the
   image takes the entire screen width. */
@media (pointer: coarse) {
    /* Wider tap zones (keep the fixed top/bottom positioning from the base rule) */
    .nav-btn { width: 22%; min-width: 52px; }

    /* Nudge the chevron toward the edge so it doesn't sit on the image */
    .nav-prev { justify-content: flex-start; padding-left: 6px; }
    .nav-next { justify-content: flex-end;   padding-right: 6px; }

    /* Larger minimum tap targets throughout */
    .bar-btn    { min-height: 44px; min-width: 44px; }
    .sm-btn     { min-height: 44px; min-width: 44px; padding: 0 0.5rem; }
    .thumb-toggle { width: 2.75rem; height: 2.75rem; }

    /* Thumb items — slightly bigger for finger taps */
    .thumb-item { width: 74px; height: 102px; }
}

/* Narrow phones (≤ 600 px) */
@media (max-width: 600px) {
    /* Library grid: 2 columns */
    .manga-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
    .lib-main { padding: 1rem 0.75rem 1.5rem; }
    .lib-header { padding: 0 0.75rem; gap: 0.5rem; }
    .lib-brand { font-size: 0.9rem; }

    /* Reader top bar: hide zoom group, theme button already in header */
    .bar-controls .control-group:first-child { display: none; }
    .reader-title { max-width: 160px; }

    /* Bottom bar: compact */
    .page-counter { min-width: 3.5rem; font-size: 0.72rem; }
}

/* Very narrow (≤ 400 px) */
@media (max-width: 400px) {
    .landing-card { padding: 1.5rem 1rem; }
    .landing-card h1 { font-size: 1.3rem; }
    .reader-title { max-width: 110px; }
    .zoom-label { display: none; }
    /* Hide page counter on very narrow screens, rely on slider */
    .page-counter { display: none; }
}

/* ── Shelf headings (Continue / Library) ────────────────── */
.shelf-heading {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 0.75rem;
}
.shelf-heading svg { width: 1.05rem; height: 1.05rem; stroke: var(--accent); }

/* ── Continue Reading shelf ─────────────────────────────── */
.continue-section { margin-bottom: 1.5rem; }

.continue-row {
    display: flex;
    gap: 0.85rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
.continue-row::-webkit-scrollbar { height: 6px; }
.continue-row::-webkit-scrollbar-thumb { background: var(--border); border-radius: 9999px; }

.continue-card {
    flex: 0 0 auto;
    width: 110px;
    cursor: pointer;
}

.continue-cover {
    position: relative;
    width: 110px;
    aspect-ratio: 2 / 3;
    border-radius: 0.6rem;
    overflow: hidden;
    background: var(--surface2);
    border: 1px solid var(--border);
    transition: border-color .15s, box-shadow .15s;
}
.continue-card:hover .continue-cover {
    border-color: var(--accent);
    box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
.continue-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

.continue-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.32);
    opacity: 0;
    transition: opacity .15s;
}
.continue-card:hover .continue-play { opacity: 1; }
.continue-play svg {
    width: 2rem; height: 2rem;
    stroke: #fff; fill: rgba(255,255,255,.15);
}

.continue-progress {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 4px;
    background: rgba(0,0,0,.5);
}
.continue-progress span {
    display: block;
    height: 100%;
    background: var(--accent);
}

.continue-title {
    display: block;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--text);
    margin-top: 0.35rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.continue-ch {
    display: block;
    font-size: 0.68rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Library card progress bar ──────────────────────────── */
.card-progress {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 4px;
    background: rgba(0,0,0,.5);
}
.card-progress span {
    display: block;
    height: 100%;
    background: var(--accent);
}

/* ── Chapter read / current states ──────────────────────── */
.detail-ch-item.read .detail-ch-name { color: var(--text-muted); }
.detail-ch-item.read .detail-ch-icon { color: #4ade80; }

.detail-ch-item.current {
    background: var(--accent-dim);
    border-radius: 0.4rem;
}
.detail-ch-item.current .detail-ch-name { color: var(--accent); font-weight: 700; }

/* ── Reader toast ───────────────────────────────────────── */
.reader-toast {
    position: fixed;
    left: 50%;
    bottom: calc(var(--bar-h) + 1rem);
    transform: translateX(-50%) translateY(0.5rem);
    background: rgba(15,17,23,.92);
    color: #fff;
    border: 1px solid var(--border);
    border-radius: 9999px;
    padding: 0.45rem 1rem;
    font-size: 0.8rem;
    font-weight: 600;
    z-index: 300;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s, transform .2s;
    backdrop-filter: blur(8px);
}
.reader-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Between-chapters transition screen ─────────────────── */
.chapter-transition {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 150;
    background: var(--bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s;
}
.chapter-transition.show { opacity: 1; pointer-events: auto; }

.ct-spinner {
    width: 2.5rem;
    height: 2.5rem;
    stroke: var(--accent);
    animation: ct-spin 0.9s linear infinite;
}
@keyframes ct-spin { to { transform: rotate(360deg); } }

.ct-label {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
}
.ct-sub {
    font-size: 0.78rem;
    color: var(--text-muted);
    letter-spacing: 0.03em;
}

/* ── Chapter multi-select ───────────────────────────────── */
/* Round checkbox shown in the leading slot while selecting */
.ch-check {
    display: none;
    flex-shrink: 0;
    width: 1.3rem;
    height: 1.3rem;
    margin: 0 0.35rem;          /* match the 2rem footprint of the read-toggle icon */
    border-radius: 9999px;
    border: 2px solid var(--text-muted);
    align-items: center;
    justify-content: center;
    position: relative;
    transition: background .12s, border-color .12s;
}

/* In selection mode: swap the read-toggle icon + chevron for the checkbox */
#manga-detail.selecting .detail-ch-icon,
#manga-detail.selecting .detail-ch-chevron { display: none; }
#manga-detail.selecting .ch-check { display: flex; }

#manga-detail.selecting .detail-ch-item { cursor: pointer; user-select: none; }

#manga-detail.selecting .detail-ch-item.selected {
    background: var(--accent-dim);
    border-radius: 0.4rem;
}
#manga-detail.selecting .detail-ch-item.selected .ch-check {
    background: var(--accent);
    border-color: var(--accent);
}
/* CSS checkmark */
#manga-detail.selecting .detail-ch-item.selected .ch-check::after {
    content: '';
    width: 0.32rem;
    height: 0.6rem;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) translate(0, -1px);
}

/* Selection action bar (top of the detail view while selecting) */
.selection-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--bar-h);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0 0.5rem;
    background: var(--accent);
    color: #fff;
    z-index: 80;
    box-shadow: 0 2px 12px rgba(0,0,0,.3);
}
.selection-bar .bar-btn { color: #fff; }
.selection-bar .bar-btn:hover { background: rgba(255,255,255,.18); color: #fff; }
.sel-count { font-size: 0.9rem; font-weight: 700; margin-left: 0.25rem; }
.sel-actions { margin-left: auto; display: flex; gap: 0.15rem; }