/**
 * 漫画模板样式 —— 话阅读页 / 作品详情页 / 作品列表页。
 * 前缀 xzai-mt-*（manga template），不影响主题样式。
 * 阅读页深色沉浸，作品页/列表页浅色卡片网格；全站响应式。
 */

.xzai-mt {
    --xzai-mt-ink: #17181d;
    --xzai-mt-bg: #141419;
    --xzai-mt-card: #ffffff;
    --xzai-mt-line: #e6e6ec;
    --xzai-mt-sub: #6b6f7b;
    --xzai-mt-accent: #e8443f;
    --xzai-mt-accent-2: #ff7a45;
}

/* ─────────────────────────── 通用：面包屑 ─────────────────────────── */
.xzai-mt .xzai-mt-crumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 13px;
    color: #9aa0ab;
    padding: 14px 16px;
    max-width: 1080px;
    margin: 0 auto;
}
.xzai-mt .xzai-mt-crumb a { color: #9aa0ab; text-decoration: none; }
.xzai-mt .xzai-mt-crumb a:hover { color: var(--xzai-mt-accent); }
.xzai-mt .xzai-mt-crumb i { font-style: normal; opacity: .5; }
.xzai-mt .xzai-mt-crumb span { color: #cfd3da; }

/* ─────────────────────────── 话阅读页 ─────────────────────────── */
.xzai-mt-reader {
    min-height: 60vh;
    background:
        radial-gradient(1200px 400px at 50% -100px, rgba(232, 68, 63, .12), transparent),
        var(--xzai-mt-bg);
    padding-bottom: 48px;
    color: #cfd3da;
}

.xzai-mt-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    max-width: 1080px;
    margin: 0 auto;
}
.xzai-mt-toolbar .xzai-mt-crumb { padding: 14px 16px; }
.xzai-mt-back-catalog {
    flex: none;
    margin: 0 16px;
    padding: 6px 14px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 999px;
    color: #cfd3da;
    font-size: 13px;
    text-decoration: none;
    transition: all .15s;
}
.xzai-mt-back-catalog:hover {
    border-color: var(--xzai-mt-accent);
    color: #fff;
    background: rgba(232,68,63,.15);
}

/* 作品信息条 */
.xzai-mt-strip-head {
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 820px;
    margin: 8px auto 4px;
    padding: 0 16px;
}
.xzai-mt-strip-cover img {
    display: block;
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.14);
}
.xzai-mt-strip-title {
    margin: 0;
    font-size: 20px;
    color: #f2f3f5;
    line-height: 1.3;
}
.xzai-mt-strip-title small {
    display: inline-block;
    margin-left: 10px;
    padding: 2px 10px;
    font-size: 12px;
    color: #fff;
    background: linear-gradient(135deg, var(--xzai-mt-accent), var(--xzai-mt-accent-2));
    border-radius: 999px;
    vertical-align: 2px;
}
.xzai-mt-strip-genre { margin: 4px 0 0; font-size: 12px; color: #7f848f; }

/* 阅读舞台：全宽深色，图片居中 */
.xzai-mt-stage {
    max-width: 900px;
    margin: 12px auto 0;
    padding: 12px;
    border-radius: 16px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.06);
}
.xzai-mt-stage img {
    border-radius: 8px;
}

/* 阅读器内部（配合 reader.css，这里只做深色适配） */
.xzai-mt-stage .xzai-manga-reader-nav a {
    color: #cfd3da;
    border-color: rgba(255,255,255,.16);
}
.xzai-mt-stage .xzai-manga-reader-nav a:hover {
    color: #fff;
    border-color: var(--xzai-mt-accent);
    background: rgba(232,68,63,.15);
}

.xzai-mt-foot { text-align: center; margin-top: 24px; }
.xzai-mt-btn {
    display: inline-block;
    padding: 10px 28px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--xzai-mt-accent), var(--xzai-mt-accent-2));
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    transition: opacity .15s;
}
.xzai-mt-btn:hover { opacity: .88; }

/* ─────────────────────────── 作品详情页 ─────────────────────────── */
.xzai-mt-series {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 16px 56px;
}
.xzai-mt-crumb-light a { color: var(--xzai-mt-sub); }
.xzai-mt-crumb-light span { color: var(--xzai-mt-ink); }
.xzai-mt-series .xzai-mt-crumb-light { color: #9aa0ab; }

/* 横幅 */
.xzai-mt-hero {
    display: flex;
    gap: 24px;
    margin-top: 10px;
    padding: 24px;
    border-radius: 18px;
    background: linear-gradient(135deg, #fff7f3, #fdeeee 60%, #f6f6fb);
    border: 1px solid var(--xzai-mt-line);
}
.xzai-mt-hero-cover img {
    display: block;
    width: 190px;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: 14px;
    box-shadow: 0 10px 28px rgba(23, 24, 29, .16);
}
.xzai-mt-hero-title {
    margin: 4px 0 10px;
    font-size: 26px;
    line-height: 1.25;
    color: var(--xzai-mt-ink);
}
.xzai-mt-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.xzai-mt-tag {
    padding: 3px 12px;
    font-size: 12px;
    color: var(--xzai-mt-accent);
    background: #fff;
    border: 1px solid #f3c9c7;
    border-radius: 999px;
}
.xzai-mt-tag-count { color: var(--xzai-mt-sub); border-color: var(--xzai-mt-line); }
.xzai-mt-hook {
    margin: 14px 0 0;
    font-size: 15px;
    line-height: 1.7;
    color: #3c3f47;
}
.xzai-mt-conflict {
    margin: 10px 0 0;
    font-size: 13px;
    line-height: 1.7;
    color: var(--xzai-mt-sub);
}
.xzai-mt-conflict b { color: var(--xzai-mt-accent); font-weight: 600; }

/* 区块 */
.xzai-mt-section { margin-top: 32px; }
.xzai-mt-sec-title {
    margin: 0 0 14px;
    font-size: 18px;
    color: var(--xzai-mt-ink);
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.xzai-mt-sec-title small { font-size: 12px; color: var(--xzai-mt-sub); font-weight: 400; }
.xzai-mt-worldview {
    font-size: 14px;
    line-height: 1.8;
    color: #3c3f47;
    background: #fafafc;
    border: 1px solid var(--xzai-mt-line);
    border-radius: 14px;
    padding: 16px 18px;
}

/* 话目录网格 */
.xzai-mt-ep-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
}
.xzai-mt-ep-card {
    display: block;
    text-decoration: none;
    background: var(--xzai-mt-card);
    border: 1px solid var(--xzai-mt-line);
    border-radius: 14px;
    overflow: hidden;
    transition: transform .15s, box-shadow .15s;
}
.xzai-mt-ep-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(23,24,29,.10);
}
.xzai-mt-ep-thumb {
    display: block;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: #f0f0f4;
}
.xzai-mt-ep-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.xzai-mt-ep-label {
    display: block;
    padding: 10px 12px 2px;
    font-size: 14px;
    font-weight: 600;
    color: var(--xzai-mt-ink);
}
.xzai-mt-ep-title {
    display: block;
    padding: 2px 12px 12px;
    font-size: 12px;
    color: var(--xzai-mt-sub);
    line-height: 1.5;
}

/* ─────────────────────────── 作品列表页 ─────────────────────────── */
.xzai-mt-archive {
    max-width: 1080px;
    margin: 0 auto;
    padding: 8px 16px 56px;
}
.xzai-mt-archive-head { text-align: center; margin: 18px 0 26px; }
.xzai-mt-archive-title {
    margin: 0 0 8px;
    font-size: 26px;
    color: var(--xzai-mt-ink);
}
.xzai-mt-archive-desc { margin: 0; font-size: 13px; color: var(--xzai-mt-sub); }
.xzai-mt-work-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
}
.xzai-mt-work-card {
    display: block;
    text-decoration: none;
    background: var(--xzai-mt-card);
    border: 1px solid var(--xzai-mt-line);
    border-radius: 16px;
    overflow: hidden;
    transition: transform .15s, box-shadow .15s;
}
.xzai-mt-work-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(23,24,29,.12);
}
.xzai-mt-work-thumb {
    display: block;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: #f0f0f4;
}
.xzai-mt-work-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .25s;
}
.xzai-mt-work-card:hover .xzai-mt-work-thumb img { transform: scale(1.04); }
.xzai-mt-work-title {
    display: block;
    padding: 12px 14px;
    font-size: 15px;
    font-weight: 600;
    color: var(--xzai-mt-ink);
    text-align: center;
}

/* 占位 */
.xzai-mt-noimg {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 120px;
    color: #b9bdc7;
    font-size: 13px;
}
.xzai-mt-empty {
    padding: 40px 0;
    text-align: center;
    color: var(--xzai-mt-sub);
    font-size: 14px;
}

/* ─────────────────────────── 全屏看模式 ─────────────────────────── */
/* 按钮：悬浮右下角，全屏后仍可见（用于退出） */
.xzai-mt-fs-toggle {
    position: fixed;
    right: 18px;
    bottom: 24px;
    z-index: 99990;
    padding: 9px 18px;
    border: none;
    border-radius: 999px;
    background: rgba(23, 24, 29, .82);
    color: #fff;
    font-size: 13px;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(23, 24, 29, .28);
    transition: background .15s, transform .15s;
    backdrop-filter: blur(4px);
}
.xzai-mt-fs-toggle:hover {
    background: var(--xzai-mt-accent);
    transform: translateY(-2px);
}

/* 全屏态：隐藏主题头尾与相关浮层，正文占满 */
body.xzai-mt-fs #header-box,
body.xzai-mt-fs header#header,
body.xzai-mt-fs footer#footer {
    display: none !important;
}
body.xzai-mt-fs .xzai-mt-archive {
    padding-top: 28px;
}
/* 全屏后网格稍微放宽，视觉更满 */
body.xzai-mt-fs .xzai-mt-archive {
    max-width: 1280px;
}

/* ─────────────────────────── 响应式 ─────────────────────────── */
@media (max-width: 640px) {
    .xzai-mt-hero { flex-direction: column; align-items: center; text-align: center; }
    .xzai-mt-hero-cover img { width: 150px; }
    .xzai-mt-tags, .xzai-mt-hero-info { justify-content: center; }
    .xzai-mt-hero-title { font-size: 22px; }
    .xzai-mt-ep-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
    .xzai-mt-work-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
}