/* =====================================================
   xs2 Theme - Novel Website
   Design: Red, Clean, Atmospheric, Mobile-first
   ===================================================== */

/* === Reset & Base === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif; color: #333; background: #f5f5f5; line-height: 1.6; }
a { color: #333; text-decoration: none; transition: color .2s; }
a:hover { color: #c62f2f; }
ul, ol { list-style: none; }
img { max-width: 100%; height: auto; display: block; }
input, button { font-family: inherit; font-size: inherit; border: none; outline: none; }
.clearfix::after { content: ''; display: table; clear: both; }
h1, h2, h3, h4, h5, h6 { font-weight: 600; }

/* === CSS Variables === */
:root {
    --primary: #c62f2f;
    --primary-dark: #a82525;
    --primary-light: #e85454;
    --bg-white: #fff;
    --bg-gray: #f5f5f5;
    --bg-dark: #1a1a2e;
    --text-main: #333;
    --text-sub: #777;
    --text-light: #999;
    --border: #eee;
    --shadow: 0 2px 12px rgba(0,0,0,.08);
    --radius: 8px;
    --max-width: 1200px;
    --header-height: 60px;
}

/* === Layout Container === */
.xs2-wrap { max-width: var(--max-width); margin: 0 auto; padding: 0 16px; }

/* =====================================================
   Header
   ===================================================== */
.xs2-header { background: var(--primary); position: sticky; top: 0; z-index: 1000; box-shadow: 0 2px 8px rgba(198,47,47,.3); }
.xs2-header .xs2-wrap { display: flex; align-items: center; height: var(--header-height); gap: 16px; }
.xs2-header__logo a { color: #fff; font-size: 22px; font-weight: 700; white-space: nowrap; letter-spacing: 1px; }
.xs2-header__logo img { height: 36px; }

/* Nav */
.xs2-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.xs2-nav a { color: rgba(255,255,255,.85); padding: 6px 14px; border-radius: 4px; font-size: 14px; transition: background .2s, color .2s; white-space: nowrap; }
.xs2-nav a:hover, .xs2-nav a.active { background: rgba(255,255,255,.15); color: #fff; }

/* Search */
.xs2-search { position: relative; flex-shrink: 0; }
.xs2-search__input { width: 220px; height: 36px; padding: 0 36px 0 14px; border-radius: 18px; background: rgba(255,255,255,.2); color: #fff; border: 1px solid rgba(255,255,255,.25); transition: all .3s; }
.xs2-search__input::placeholder { color: rgba(255,255,255,.6); }
.xs2-search__input:focus { background: #fff; color: #333; border-color: #fff; width: 280px; }
.xs2-search__input:focus::placeholder { color: #aaa; }
.xs2-search__btn { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; cursor: pointer; color: rgba(255,255,255,.7); font-size: 16px; }
.xs2-search__input:focus ~ .xs2-search__btn { color: var(--primary); }

/* Hamburger */
.xs2-hamburger { display: none; width: 36px; height: 36px; align-items: center; justify-content: center; cursor: pointer; color: #fff; font-size: 22px; border-radius: 4px; flex-shrink: 0; }
.xs2-hamburger:hover { background: rgba(255,255,255,.15); }

/* Lang Switch */
.xs2-lang { position: relative; margin-left: 8px; }
.xs2-lang__current { color: rgba(255,255,255,.85); cursor: pointer; padding: 4px 8px; font-size: 13px; border: 1px solid rgba(255,255,255,.3); border-radius: 4px; }
.xs2-lang__dropdown { position: absolute; top: 100%; right: 0; background: #fff; border-radius: 4px; box-shadow: var(--shadow); min-width: 80px; display: none; z-index: 10; overflow: hidden; }
.xs2-lang:hover .xs2-lang__dropdown { display: block; }
.xs2-lang__dropdown a { display: block; padding: 8px 14px; font-size: 13px; color: #333; }
.xs2-lang__dropdown a:hover { background: #f5f5f5; color: var(--primary); }

/* =====================================================
   Mobile Sidebar
   ===================================================== */
.xs2-sidebar-mask { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 2000; opacity: 0; visibility: hidden; transition: all .3s; }
.xs2-sidebar-mask.active { opacity: 1; visibility: visible; }
.xs2-sidebar { position: fixed; left: -280px; top: 0; width: 280px; height: 100%; background: #fff; z-index: 2001; transition: left .3s ease; overflow-y: auto; }
.xs2-sidebar-mask.active .xs2-sidebar { left: 0; }
.xs2-sidebar__header { background: var(--primary); padding: 30px 20px; text-align: center; }
.xs2-sidebar__header img { width: 60px; height: 60px; border-radius: 50%; margin: 0 auto 10px; border: 2px solid rgba(255,255,255,.3); }
.xs2-sidebar__header span { color: #fff; font-size: 16px; font-weight: 600; }
.xs2-sidebar__close { position: absolute; top: 12px; right: 12px; color: rgba(255,255,255,.7); font-size: 20px; cursor: pointer; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; }
.xs2-sidebar__nav a { display: flex; align-items: center; padding: 14px 24px; border-bottom: 1px solid #f0f0f0; color: #333; font-size: 15px; gap: 12px; }
.xs2-sidebar__nav a:hover { background: #fff5f5; color: var(--primary); }
.xs2-sidebar__nav i { font-size: 18px; width: 24px; text-align: center; color: var(--primary); }

/* =====================================================
   Section Titles
   ===================================================== */
.xs2-section { margin-bottom: 24px; }
.xs2-section__title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 2px solid var(--primary); }
.xs2-section__title h2 { font-size: 18px; color: #333; position: relative; padding-left: 12px; }
.xs2-section__title h2::before { content: ''; position: absolute; left: 0; top: 2px; bottom: 2px; width: 4px; background: var(--primary); border-radius: 2px; }
.xs2-section__title a.more { color: var(--text-sub); font-size: 13px; }
.xs2-section__title a.more:hover { color: var(--primary); }

/* =====================================================
   Card Panel
   ===================================================== */
.xs2-panel { background: var(--bg-white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; margin-bottom: 24px; }

/* =====================================================
   Book Cover Grid (Horizontal Scroll for recommendations)
   ===================================================== */
.xs2-book-scroll { display: flex; gap: 14px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 8px; scrollbar-width: thin; scrollbar-color: #ddd transparent; }
.xs2-book-scroll::-webkit-scrollbar { height: 4px; }
.xs2-book-scroll::-webkit-scrollbar-track { background: transparent; }
.xs2-book-scroll::-webkit-scrollbar-thumb { background: #ddd; border-radius: 2px; }
.xs2-book-scroll .xs2-book-card { flex: 0 0 130px; width: 130px; scroll-snap-align: start; }

/* Scroll covers: explicit height to avoid padding-bottom % bug in flex */
.xs2-book-scroll .xs2-book-card__cover { height: 173px; padding-bottom: 0; }

/* Book Card */
.xs2-book-card { display: block; text-align: center; transition: transform .2s; }
.xs2-book-card:hover { transform: translateY(-4px); }
.xs2-book-card__cover {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 133.33%; /* 3:4 aspect ratio */
    border-radius: 6px;
    overflow: hidden;
    background: #f0f0f0;
    margin-bottom: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,.1);
}
.xs2-book-card__cover img {
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: none;
    object-fit: cover !important;
    display: block;
}
.xs2-book-card__name { font-size: 13px; color: #333; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.4; }
.xs2-book-card__author { font-size: 12px; color: var(--text-light); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Book Card Grid (for non-scroll displays) */
.xs2-book-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }

/* =====================================================
   Book List (Detailed, for search/author/channel)
   ===================================================== */
.xs2-book-list { }
.xs2-book-item { display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--border); }
.xs2-book-item:last-child { border-bottom: none; }
.xs2-book-item__cover { flex: 0 0 90px; }
.xs2-book-item__cover-inner {
    position: relative;
    width: 90px;
    height: 0;
    padding-bottom: 133.33%;
    border-radius: 6px;
    overflow: hidden;
    background: #f0f0f0;
    box-shadow: 0 2px 6px rgba(0,0,0,.1);
}
.xs2-book-item__cover-inner img {
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: none;
    object-fit: cover !important;
    display: block;
}
.xs2-book-item__info { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.xs2-book-item__info h3 { font-size: 16px; margin-bottom: 6px; }
.xs2-book-item__info h3 a { color: #333; }
.xs2-book-item__info h3 a:hover { color: var(--primary); }
.xs2-book-item__labels { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.xs2-book-item__labels span { font-size: 12px; padding: 2px 8px; background: #f5f5f5; border-radius: 3px; color: var(--text-sub); }
.xs2-book-item__labels a { font-size: 12px; padding: 2px 8px; background: #f5f5f5; border-radius: 3px; color: var(--text-sub); }
.xs2-book-item__labels a:hover { background: #fff0f0; color: var(--primary); }
.xs2-book-item__desc { font-size: 13px; color: var(--text-sub); line-height: 1.6; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-bottom: 6px; }
.xs2-book-item__latest { font-size: 13px; color: var(--text-light); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.xs2-book-item__latest a { color: var(--primary); }
.xs2-book-item__action { flex: 0 0 auto; display: flex; align-items: center; }

/* =====================================================
   Update List (table-like)
   ===================================================== */
.xs2-update-list { }
.xs2-update-row { display: flex; align-items: center; padding: 10px 0; border-bottom: 1px solid #f5f5f5; font-size: 14px; gap: 12px; }
.xs2-update-row:last-child { border-bottom: none; }
.xs2-update-row:hover { background: #fafafa; }
.xs2-update-row__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xs2-update-row__name a { font-weight: 500; }
.xs2-update-row__chapter { flex: 2; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xs2-update-row__chapter a { color: var(--text-sub); }
.xs2-update-row__chapter a:hover { color: var(--primary); }
.xs2-update-row__date { flex: 0 0 50px; font-size: 12px; color: var(--text-light); text-align: right; }

/* =====================================================
   Ranking
   ===================================================== */
.xs2-rank-tabs { display: flex; gap: 0; border-bottom: 2px solid var(--border); margin-bottom: 16px; }
.xs2-rank-tabs a { padding: 8px 18px; font-size: 14px; color: var(--text-sub); cursor: pointer; position: relative; transition: color .2s; }
.xs2-rank-tabs a.active { color: var(--primary); font-weight: 600; }
.xs2-rank-tabs a.active::after { content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 2px; background: var(--primary); }
.xs2-rank-list { }
.xs2-rank-item { display: flex; align-items: center; padding: 8px 0; gap: 12px; }
.xs2-rank-item + .xs2-rank-item { border-top: 1px solid #f8f8f8; }
.xs2-rank-num { width: 24px; height: 24px; border-radius: 4px; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; }
.xs2-rank-num.top1 { background: #ff4d4f; }
.xs2-rank-num.top2 { background: #ff7a45; }
.xs2-rank-num.top3 { background: #ffa940; }
.xs2-rank-num.normal { background: #d9d9d9; color: #666; }
.xs2-rank-item__info { flex: 1; min-width: 0; }
.xs2-rank-item__info h4 { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xs2-rank-item__info h4 a { color: #333; }
.xs2-rank-item__info h4 a:hover { color: var(--primary); }
.xs2-rank-item__info p { font-size: 12px; color: var(--text-light); }
.xs2-rank-item__cover { width: 50px; height: 66px; border-radius: 4px; overflow: hidden; flex-shrink: 0; background: #f0f0f0; }
.xs2-rank-item__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Top1 featured rank item */
.xs2-rank-featured { display: flex; gap: 14px; padding: 12px 0; margin-bottom: 8px; border-bottom: 1px solid var(--border); }
.xs2-rank-featured__cover { width: 80px; height: 106px; border-radius: 6px; overflow: hidden; flex-shrink: 0; background: #f0f0f0; box-shadow: 0 2px 8px rgba(0,0,0,.1); }
.xs2-rank-featured__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.xs2-rank-featured__info { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.xs2-rank-featured__info h3 { font-size: 16px; margin-bottom: 4px; }
.xs2-rank-featured__info h3 a { color: #333; }
.xs2-rank-featured__info h3 a:hover { color: var(--primary); }
.xs2-rank-featured__info .tag { display: inline-block; font-size: 11px; background: var(--primary); color: #fff; padding: 1px 8px; border-radius: 3px; margin-bottom: 4px; }
.xs2-rank-featured__info p { font-size: 13px; color: var(--text-sub); }

/* =====================================================
   Two Column Layout
   ===================================================== */
.xs2-layout { display: flex; gap: 24px; }
.xs2-layout__main { flex: 1; min-width: 0; }
.xs2-layout__side { flex: 0 0 340px; }

/* =====================================================
   Breadcrumb
   ===================================================== */
.xs2-breadcrumb { font-size: 13px; color: var(--text-sub); padding: 12px 0; }
.xs2-breadcrumb a { color: var(--text-sub); }
.xs2-breadcrumb a:hover { color: var(--primary); }
.xs2-breadcrumb span { margin: 0 6px; }

/* =====================================================
   Category Tags (Channel page)
   ===================================================== */
.xs2-category-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.xs2-category-bar a { display: inline-block; padding: 6px 18px; border-radius: 20px; font-size: 14px; background: #fff; color: var(--text-sub); border: 1px solid var(--border); transition: all .2s; }
.xs2-category-bar a:hover, .xs2-category-bar a.active { background: var(--primary); color: #fff; border-color: var(--primary); }

/* =====================================================
   Book Detail (book.html)
   ===================================================== */
.xs2-book-detail { display: flex; gap: 24px; }
.xs2-book-detail__cover { flex: 0 0 180px; }
.xs2-book-detail__cover-img { position: relative; width: 180px; height: 240px; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 16px rgba(0,0,0,.15); background: #f0f0f0; }
.xs2-book-detail__cover-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.xs2-book-detail__meta { flex: 1; min-width: 0; }
.xs2-book-detail__meta h1 { font-size: 24px; margin-bottom: 12px; color: #222; }
.xs2-book-detail__meta-row { font-size: 14px; color: var(--text-sub); margin-bottom: 8px; }
.xs2-book-detail__meta-row a { color: var(--primary); }
.xs2-book-detail__actions { display: flex; gap: 12px; margin-top: 20px; flex-wrap: wrap; }

/* =====================================================
   Buttons
   ===================================================== */
.xs2-btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 28px; border-radius: 6px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all .2s; white-space: nowrap; }
.xs2-btn--primary { background: var(--primary); color: #fff; }
.xs2-btn--primary:hover { background: var(--primary-dark); color: #fff; }
.xs2-btn--outline { background: transparent; color: var(--primary); border: 1px solid var(--primary); }
.xs2-btn--outline:hover { background: var(--primary); color: #fff; }
.xs2-btn--sm { padding: 6px 16px; font-size: 13px; }
.xs2-btn--block { width: 100%; }
.xs2-btn--ghost { background: rgba(255,255,255,.15); color: #fff; border: 1px solid rgba(255,255,255,.4); }
.xs2-btn--ghost:hover { background: rgba(255,255,255,.25); color: #fff; }

/* =====================================================
   Chapter Tabs
   ===================================================== */
.xs2-tabs { display: flex; gap: 0; border-bottom: 2px solid var(--border); margin-bottom: 16px; }
.xs2-tabs a { padding: 10px 20px; font-size: 14px; color: var(--text-sub); cursor: pointer; position: relative; transition: color .2s; display: flex; align-items: center; gap: 6px; }
.xs2-tabs a.active { color: var(--primary); font-weight: 600; }
.xs2-tabs a.active::after { content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 2px; background: var(--primary); }

/* Tab content */
.xs2-tab-content { display: none; }
.xs2-tab-content.active { display: block; }

/* =====================================================
   Chapter List
   ===================================================== */
.xs2-chapter-list { column-count: 3; column-gap: 16px; }
.xs2-chapter-list li { break-inside: avoid; margin-bottom: 0; }
.xs2-chapter-list li a { display: block; padding: 8px 4px; font-size: 13px; color: var(--text-sub); border-bottom: 1px dashed #eee; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xs2-chapter-list li a:hover { color: var(--primary); }

/* Chapter recent list (single col) */
.xs2-chapter-recent li { margin-bottom: 0; }
.xs2-chapter-recent li a { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid #f5f5f5; }
.xs2-chapter-recent li a span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; color: #333; }
.xs2-chapter-recent li a small { flex-shrink: 0; font-size: 12px; color: var(--text-light); margin-left: 12px; }

/* =====================================================
   Reading Page
   ===================================================== */
.xs2-reader { max-width: 820px; margin: 0 auto; }
.xs2-reader__toolbar { display: flex; justify-content: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.xs2-reader__toolbar a { font-size: 13px; color: var(--text-sub); display: flex; align-items: center; gap: 4px; padding: 6px 12px; border-radius: 4px; transition: all .2s; }
.xs2-reader__toolbar a:hover { background: #f5f5f5; color: var(--primary); }
.xs2-reader__title { text-align: center; padding: 24px 0 12px; }
.xs2-reader__title h1 { font-size: 22px; color: #222; }
.xs2-reader__info { text-align: center; font-size: 13px; color: var(--text-light); padding-bottom: 20px; border-bottom: 1px solid var(--border); margin-bottom: 24px; }
.xs2-reader__content { font-size: 18px; line-height: 1.9; color: #333; padding: 0 10px; word-wrap: break-word; }
.xs2-reader__content p { margin-bottom: 1em; text-indent: 2em; }

/* Reading page navigation */
.xs2-reader__pager { display: flex; justify-content: center; gap: 12px; padding: 24px 0; flex-wrap: wrap; }
.xs2-reader__pager a { flex: 0 0 auto; }
.xs2-reader__pager a.disabled { opacity: .4; pointer-events: none; }

/* Reading settings panel */
.xs2-settings-panel { position: fixed; bottom: -100%; left: 0; right: 0; background: #fff; z-index: 3000; transition: bottom .3s; box-shadow: 0 -4px 20px rgba(0,0,0,.15); border-radius: 16px 16px 0 0; padding: 24px 20px; max-width: 500px; margin: 0 auto; }
.xs2-settings-panel.active { bottom: 0; }
.xs2-settings-panel__close { position: absolute; top: 12px; right: 16px; font-size: 18px; color: var(--text-sub); cursor: pointer; }
.xs2-settings-row { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.xs2-settings-row label { flex: 0 0 40px; font-size: 14px; color: var(--text-sub); }
.xs2-settings-row .options { display: flex; gap: 8px; flex-wrap: wrap; }
.xs2-settings-row .options a { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; cursor: pointer; border: 2px solid transparent; }
.xs2-settings-row .options a:hover { border-color: var(--primary); }
.xs2-settings-row .font-size-ctrl { display: flex; align-items: center; gap: 12px; }
.xs2-settings-row .font-size-ctrl input { width: 50px; text-align: center; border: 1px solid #ddd; border-radius: 4px; padding: 4px; }
.xs2-settings-row .font-size-ctrl a { width: 32px; height: 32px; border-radius: 50%; background: #f0f0f0; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; cursor: pointer; }
.xs2-settings-row .font-size-ctrl a:hover { background: var(--primary); color: #fff; }

/* Background colors for settings */
.bg-opt-0 { background: #fff; border-color: #ddd !important; }
.bg-opt-1 { background: #f5f0e0; }
.bg-opt-2 { background: #e0f0e0; }
.bg-opt-3 { background: #e0e0f0; }
.bg-opt-4 { background: #2c2c2c; }

/* Night mode */
body.night-mode { background: #1a1a1a; color: #ccc; }
body.night-mode a { color: #ccc; }
body.night-mode a:hover { color: var(--primary-light); }
body.night-mode .xs2-panel { background: #2c2c2c; box-shadow: 0 2px 12px rgba(0,0,0,.3); }
body.night-mode .xs2-section__title { border-bottom-color: #444; }
body.night-mode .xs2-section__title h2 { color: #ddd; }
body.night-mode .xs2-breadcrumb, body.night-mode .xs2-breadcrumb a { color: #999; }
/* Book detail */
body.night-mode .xs2-book-detail__meta h1 { color: #eee; }
body.night-mode .xs2-book-detail__meta-row { color: #aaa; }
body.night-mode .xs2-book-detail__meta-row a { color: var(--primary-light); }
/* Tabs */
body.night-mode .xs2-tabs { border-bottom-color: #444; }
body.night-mode .xs2-tabs a { color: #999; }
body.night-mode .xs2-tabs a.active { color: var(--primary-light); }
body.night-mode .xs2-rank-tabs { border-bottom-color: #444; }
body.night-mode .xs2-rank-tabs a { color: #999; }
body.night-mode .xs2-rank-tabs a.active { color: var(--primary-light); }
/* Chapter lists */
body.night-mode .xs2-chapter-recent li a { border-bottom-color: #3a3a3a; }
body.night-mode .xs2-chapter-recent li a span { color: #ccc; }
body.night-mode .xs2-chapter-recent li a small { color: #888; }
body.night-mode .xs2-chapter-list li a { color: #bbb; border-bottom-color: #3a3a3a; }
body.night-mode .xs2-chapter-list li a:hover { color: var(--primary-light); }
/* Rank items */
body.night-mode .xs2-rank-item { border-top-color: #3a3a3a; }
body.night-mode .xs2-rank-item__info h4 a { color: #ccc; }
body.night-mode .xs2-rank-item__info p { color: #888; }
body.night-mode .xs2-rank-featured { border-bottom-color: #3a3a3a; }
body.night-mode .xs2-rank-featured__info h3 a { color: #ddd; }
body.night-mode .xs2-rank-featured__info p { color: #999; }
/* Book list items */
body.night-mode .xs2-book-item { border-bottom-color: #3a3a3a; }
body.night-mode .xs2-book-item__info h3 a { color: #ddd; }
body.night-mode .xs2-book-item__labels span,
body.night-mode .xs2-book-item__labels a { background: #3a3a3a; color: #aaa; }
body.night-mode .xs2-book-item__desc { color: #999; }
body.night-mode .xs2-book-item__latest { color: #888; }
body.night-mode .xs2-book-item__latest a { color: var(--primary-light); }
/* Update list */
body.night-mode .xs2-update-row { border-bottom-color: #3a3a3a; }
body.night-mode .xs2-update-row:hover { background: #333; }
body.night-mode .xs2-update-row__name a { color: #ccc; }
body.night-mode .xs2-update-row__chapter a { color: #999; }
body.night-mode .xs2-update-row__date { color: #777; }
/* Book card */
body.night-mode .xs2-book-card__name { color: #ccc; }
body.night-mode .xs2-book-card__author { color: #888; }
body.night-mode .xs2-book-card__cover { background: #3a3a3a; }
/* Category bar */
body.night-mode .xs2-category-bar a { background: #3a3a3a; color: #aaa; border-color: #444; }
body.night-mode .xs2-category-bar a:hover,
body.night-mode .xs2-category-bar a.active { background: var(--primary); color: #fff; border-color: var(--primary); }
/* Buttons */
body.night-mode .xs2-btn--outline { border-color: var(--primary-light); color: var(--primary-light); }
/* History */
body.night-mode .xs2-history-item { border-bottom-color: #3a3a3a; }
body.night-mode .xs2-history-item__info h4 a { color: #ddd; }
body.night-mode .xs2-history-item__info p { color: #999; }
/* Reader */
body.night-mode .xs2-reader__title h1 { color: #eee; }
body.night-mode .xs2-reader__content { color: #ccc; }
body.night-mode .xs2-reader__info { color: #888; }
body.night-mode .xs2-reader__toolbar a { color: #999; }
body.night-mode .xs2-reader__toolbar a:hover { background: #3a3a3a; color: var(--primary-light); }
body.night-mode .xs2-reader__pager a.disabled { opacity: .3; }
/* Search input */
body.night-mode .xs2-search__input { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.15); }
/* Footer */
body.night-mode .xs2-footer { background: #111; }
/* Settings panel */
body.night-mode .xs2-settings-panel { background: #2c2c2c; color: #ccc; }
body.night-mode .xs2-settings-panel__close { color: #999; }
body.night-mode .xs2-settings-row label { color: #aaa; }
/* Pagination */
body.night-mode .xs2-pages a, body.night-mode .xs2-pages span { border-color: #444; color: #999; }
body.night-mode .xs2-pages span.current { background: var(--primary); color: #fff; border-color: var(--primary); }

/* Reading background modes - affects whole site */
body.readbg-0 { background: #f5f5f5; }
body.readbg-0 .xs2-panel { background: #fff; }
body.readbg-0 .xs2-reader__content { background: #fff; }

body.readbg-1 { background: #e8e0c8; }
body.readbg-1 .xs2-panel { background: #f5f0e0; }
body.readbg-1 .xs2-reader__content { background: #f5f0e0; }
body.readbg-1 .xs2-header { background: #a08050; }
body.readbg-1 .xs2-footer { background: #5a4a30; }

body.readbg-2 { background: #c8e0c8; }
body.readbg-2 .xs2-panel { background: #e0f0e0; }
body.readbg-2 .xs2-reader__content { background: #e0f0e0; }
body.readbg-2 .xs2-header { background: #4a8a4a; }
body.readbg-2 .xs2-footer { background: #2a4a2a; }

body.readbg-3 { background: #c8c8e8; }
body.readbg-3 .xs2-panel { background: #e0e0f0; }
body.readbg-3 .xs2-reader__content { background: #e0e0f0; }
body.readbg-3 .xs2-header { background: #5050a0; }
body.readbg-3 .xs2-footer { background: #2a2a5a; }

body.readbg-4 { background: #1a1a1a; color: #bbb; }
body.readbg-4 a { color: #bbb; }
body.readbg-4 .xs2-panel { background: #2c2c2c; box-shadow: 0 2px 12px rgba(0,0,0,.3); }
body.readbg-4 .xs2-reader__content { background: #2c2c2c; color: #bbb; }
body.readbg-4 .xs2-header { background: #222; }
body.readbg-4 .xs2-footer { background: #111; }
body.readbg-4 .xs2-section__title { border-bottom-color: #444; }
body.readbg-4 .xs2-section__title h2 { color: #ddd; }
body.readbg-4 .xs2-book-card__name { color: #ccc; }
body.readbg-4 .xs2-book-card__author { color: #888; }
body.readbg-4 .xs2-chapter-recent li a { border-bottom-color: #3a3a3a; }
body.readbg-4 .xs2-chapter-recent li a span { color: #ccc; }
body.readbg-4 .xs2-chapter-list li a { color: #bbb; border-bottom-color: #3a3a3a; }
body.readbg-4 .xs2-tabs { border-bottom-color: #444; }
body.readbg-4 .xs2-tabs a { color: #999; }
body.readbg-4 .xs2-tabs a.active { color: var(--primary-light); }
body.readbg-4 .xs2-reader__title h1 { color: #eee; }
body.readbg-4 .xs2-reader__info { color: #888; }
body.readbg-4 .xs2-reader__toolbar a { color: #999; }
body.readbg-4 .xs2-settings-panel { background: #2c2c2c; color: #ccc; }
body.readbg-4 .xs2-btn--outline { border-color: var(--primary-light); color: var(--primary-light); }

/* =====================================================
   History Page
   ===================================================== */
.xs2-history-list { }
.xs2-history-item { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.xs2-history-item:last-child { border-bottom: none; }
.xs2-history-item__cover { width: 56px; height: 74px; border-radius: 4px; overflow: hidden; flex-shrink: 0; background: #f0f0f0; }
.xs2-history-item__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.xs2-history-item__info { flex: 1; min-width: 0; }
.xs2-history-item__info h4 { font-size: 15px; margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xs2-history-item__info h4 a { color: #333; }
.xs2-history-item__info p { font-size: 13px; color: var(--text-light); }
.xs2-history-item__info p a { color: var(--primary); }
.xs2-history-item__actions { display: flex; gap: 8px; flex-shrink: 0; }

/* =====================================================
   Pagination
   ===================================================== */
.xs2-pages { display: flex; justify-content: center; align-items: center; gap: 6px; padding: 24px 0; }
.xs2-pages a, .xs2-pages span { padding: 6px 14px; border-radius: 4px; font-size: 14px; border: 1px solid var(--border); color: var(--text-sub); }
.xs2-pages a:hover { border-color: var(--primary); color: var(--primary); }
.xs2-pages span.current { background: var(--primary); color: #fff; border-color: var(--primary); }

/* =====================================================
   Home Portal Layout
   ===================================================== */
body.home-page {
   background:
      radial-gradient(circle at top, rgba(198,47,47,.05), transparent 34%),
      linear-gradient(180deg, #faf7f2 0%, #f2ece4 100%);
}

.xs2-home-main {
   padding-top: 16px;
   padding-bottom: 24px;
}

.xs2-home-panel {
   background: rgba(255,255,255,.95);
   border: 1px solid #e8ddd2;
   box-shadow: 0 1px 4px rgba(73, 39, 19, .06);
}

.xs2-home-panel__hd {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin: 0 12px;
   padding: 12px 0 10px;
   border-bottom: 2px solid var(--primary);
}

.xs2-home-panel__hd h2 {
   position: relative;
   padding-left: 12px;
   font-size: 18px;
   font-weight: 600;
   color: #333;
}

.xs2-home-panel__hd h2::before {
   content: '';
   position: absolute;
   left: 0;
   top: 2px;
   bottom: 2px;
   width: 4px;
   border-radius: 2px;
   background: var(--primary);
}

.xs2-home-panel__hd a {
   color: var(--text-sub);
   font-size: 13px;
}

.xs2-home-panel__hd a:hover {
   color: var(--primary);
}

.xs2-home-mast {
   display: grid;
   grid-template-columns: 250px minmax(0, 1fr);
   gap: 14px;
   margin-bottom: 16px;
}

.xs2-home-collect-list {
   padding: 10px 12px 12px;
}

.xs2-home-collect-list li {
   display: grid;
   grid-template-columns: 20px minmax(0, 1fr) 64px;
   align-items: center;
   gap: 8px;
   min-width: 0;
   padding: 5px 0;
   border-bottom: 1px dotted #e8ddd2;
   font-size: 13px;
}

.xs2-home-collect-list li:last-child {
   border-bottom: none;
}

.xs2-home-rank-no {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 20px;
   height: 20px;
   border-radius: 3px;
   background: #d1d1d1;
   color: #fff;
   font-size: 12px;
   font-weight: 700;
}

.xs2-home-collect-list li:nth-child(-n+3) .xs2-home-rank-no {
   background: var(--primary);
}

.xs2-home-collect-list a,
.xs2-home-collect-list em {
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   font-style: normal;
}

.xs2-home-collect-list em {
   text-align: right;
   color: #9b8f85;
   font-size: 12px;
}

.xs2-home-recommend-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 0 18px;
   padding: 12px 14px 10px;
}

.xs2-home-recommend-item {
   display: grid;
   grid-template-columns: 112px minmax(0, 1fr);
   gap: 12px;
   padding: 12px 0;
   border-bottom: 1px dotted #e6ddd4;
   min-width: 0;
}

.xs2-home-recommend-grid .xs2-home-recommend-item:nth-last-child(-n+2) {
   border-bottom: none;
}

.xs2-home-recommend-item__cover {
   width: 112px;
   height: 149px;
   overflow: hidden;
   border: 1px solid #eadfd4;
   background: #f3eee8;
}

.xs2-home-recommend-item__cover img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.xs2-home-recommend-item__body {
   min-width: 0;
}

.xs2-home-recommend-item__body h3 {
   margin-bottom: 4px;
   font-size: 26px;
   line-height: 1.15;
   font-weight: 400;
   color: #5b5248;
}

.xs2-home-recommend-item__body h3 a {
   color: inherit;
}

.xs2-home-recommend-item__meta {
   margin-bottom: 2px;
   font-size: 13px;
   color: #8f847a;
}

.xs2-home-recommend-item__desc {
   margin-top: 6px;
   font-size: 13px;
   color: #7a7067;
   line-height: 1.8;
}

.xs2-home-channel-grid {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 14px;
   margin-bottom: 16px;
}

.xs2-home-category-feature {
   display: grid;
   grid-template-columns: 82px minmax(0, 1fr);
   gap: 10px;
   padding: 12px;
   border-bottom: 1px dotted #e6ddd4;
}

.xs2-home-category-feature__cover {
   width: 82px;
   height: 108px;
   overflow: hidden;
   border: 1px solid #eadfd4;
   background: #f3eee8;
}

.xs2-home-category-feature__cover img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.xs2-home-category-feature__body {
   min-width: 0;
   font-size: 12px;
   color: #8f847a;
   line-height: 1.7;
}

.xs2-home-category-feature__body h3 {
   margin-bottom: 4px;
   font-size: 20px;
   line-height: 1.1;
   font-weight: 400;
   color: #5b5248;
}

.xs2-home-category-feature__body h3 a {
   color: inherit;
}

.xs2-home-text-list {
   padding: 8px 12px 12px;
}

.xs2-home-text-list li {
   display: grid;
   grid-template-columns: minmax(0, 1fr) 64px;
   align-items: center;
   gap: 8px;
   min-width: 0;
   padding: 5px 0;
   font-size: 13px;
}

.xs2-home-text-list a,
.xs2-home-text-list span {
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.xs2-home-text-list span {
   text-align: right;
   color: #9a8f84;
   font-size: 12px;
}

.xs2-home-cover-strip-panel {
   padding: 16px 14px;
   margin-bottom: 16px;
}

.xs2-home-cover-strip {
   display: grid;
   grid-template-columns: repeat(6, minmax(0, 1fr));
   gap: 16px;
}

.xs2-home-cover-card {
   display: block;
   min-width: 0;
   text-align: center;
}

.xs2-home-cover-card__img {
   display: block;
   height: 158px;
   margin-bottom: 8px;
   overflow: hidden;
   border: 1px solid #eadfd4;
   background: #f3eee8;
}

.xs2-home-cover-card__img img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.xs2-home-cover-card strong,
.xs2-home-cover-card em {
   display: block;
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   font-style: normal;
}

.xs2-home-cover-card strong {
   color: #5f564d;
   font-size: 13px;
}

.xs2-home-cover-card em {
   color: #9c9084;
   font-size: 12px;
}

.xs2-home-bottom-grid {
   display: grid;
   grid-template-columns: 250px minmax(0, 1fr) 250px;
   gap: 14px;
   margin-bottom: 16px;
}

.xs2-home-media-list,
.xs2-home-thumb-list {
   padding: 12px 12px 2px;
}

.xs2-home-media-item,
.xs2-home-thumb-item {
   display: grid;
   grid-template-columns: 74px minmax(0, 1fr);
   gap: 10px;
   min-width: 0;
   margin-bottom: 12px;
}

.xs2-home-media-item__cover,
.xs2-home-thumb-item__cover {
   width: 74px;
   height: 98px;
   overflow: hidden;
   border: 1px solid #eadfd4;
   background: #f3eee8;
}

.xs2-home-media-item__cover img,
.xs2-home-thumb-item__cover img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.xs2-home-media-item__body,
.xs2-home-thumb-item__body {
   min-width: 0;
   font-size: 12px;
   color: #8f847a;
   line-height: 1.7;
}

.xs2-home-media-item__body h3,
.xs2-home-thumb-item__body h3 {
   margin-bottom: 4px;
   font-size: 18px;
   line-height: 1.15;
   font-weight: 400;
   color: #5b5248;
}

.xs2-home-media-item__body h3 a,
.xs2-home-thumb-item__body h3 a {
   color: inherit;
}

.xs2-home-simple-rank {
   padding: 0 12px 12px;
}

.xs2-home-simple-rank li {
   display: grid;
   grid-template-columns: 20px minmax(0, 1fr) 58px;
   align-items: center;
   gap: 8px;
   min-width: 0;
   padding: 5px 0;
   font-size: 13px;
}

.xs2-home-simple-rank li span {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 20px;
   height: 20px;
   border-radius: 3px;
   background: #e26f48;
   color: #fff;
   font-size: 12px;
}

.xs2-home-simple-rank a,
.xs2-home-simple-rank em {
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   font-style: normal;
}

.xs2-home-simple-rank em {
   text-align: right;
   color: #9c9084;
   font-size: 12px;
}

.xs2-home-simple-rank--tight {
   padding-top: 2px;
}

.xs2-home-right-stack {
   display: grid;
   gap: 14px;
}

.xs2-home-updates-panel {
   min-width: 0;
}

.xs2-home-updates-head,
.xs2-home-updates-list li {
   display: grid;
   grid-template-columns: 44px 128px minmax(0, 1fr) 72px;
   align-items: center;
   gap: 10px;
   min-width: 0;
}

.xs2-home-updates-head {
   padding: 10px 14px 8px;
   font-size: 12px;
   color: #9b8f84;
   border-bottom: 1px solid #ece2d8;
}

.xs2-home-updates-list li {
   padding: 7px 14px;
   font-size: 13px;
   border-bottom: 1px dotted #ece2d8;
}

.xs2-home-updates-list li:last-child {
   border-bottom: none;
}

.xs2-home-updates-cat {
   color: #9c9084;
}

.xs2-home-updates-book,
.xs2-home-updates-chapter,
.xs2-home-updates-time {
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.xs2-home-updates-chapter {
   color: #7e7367;
}

.xs2-home-updates-time {
   text-align: right;
   color: #a1958b;
   font-size: 12px;
}

.xs2-home-links-panel {
   margin-bottom: 0;
}

.xs2-home-links {
   display: flex;
   flex-wrap: wrap;
   gap: 18px;
   padding: 14px 12px;
   font-size: 13px;
}

.xs2-home-links a {
   color: #7b7065;
}

.xs2-home-links a:hover {
   color: var(--primary);
}

/* =====================================================
   Footer
   ===================================================== */
.xs2-footer { background: #2c2c2c; color: rgba(255,255,255,.6); margin-top: 40px; padding: 30px 0; }
.xs2-footer__links { display: flex; justify-content: center; gap: 20px; margin-bottom: 16px; flex-wrap: wrap; }
.xs2-footer__links a { color: rgba(255,255,255,.6); font-size: 13px; }
.xs2-footer__links a:hover { color: #fff; }
.xs2-footer__copy { text-align: center; font-size: 12px; color: rgba(255,255,255,.4); }
.xs2-footer__copy a { color: rgba(255,255,255,.5); margin: 0 4px; }

/* =====================================================
   Responsive
   ===================================================== */

/* Tablet */
@media (max-width: 1024px) {
    .xs2-layout { flex-direction: column; }
    .xs2-layout__side { flex: none; }
    .xs2-book-grid { grid-template-columns: repeat(5, 1fr); }
    .xs2-chapter-list { column-count: 2; }
    .xs2-book-detail__cover { flex: 0 0 140px; }
    .xs2-book-detail__cover-img { width: 140px; height: 186px; }
}

/* Mobile */
@media (max-width: 768px) {
    :root { --header-height: 52px; }

   .xs2-header .xs2-wrap {
      height: auto;
      min-height: var(--header-height);
      flex-wrap: wrap;
      row-gap: 8px;
      padding-top: 8px;
      padding-bottom: 8px;
   }

    .xs2-nav { display: none; }
    .xs2-hamburger { display: flex; }
    .xs2-lang { display: none; }
   .xs2-header__logo { flex: 1; min-width: 0; }
   .xs2-header__logo a { display: block; overflow: hidden; text-overflow: ellipsis; }
   .xs2-search {
      order: 4;
      flex: 0 0 100%;
      width: 100%;
   }
   .xs2-search__input { width: 100%; height: 38px; }
   .xs2-search__input:focus { width: 100%; }
    .xs2-header__logo a { font-size: 18px; }

    .xs2-panel { padding: 14px; }
    .xs2-book-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
    .xs2-book-scroll .xs2-book-card { flex: 0 0 105px; }

    .xs2-book-scroll .xs2-book-card__cover { height: 140px; padding-bottom: 0; }

    .xs2-book-item { gap: 12px; }
    .xs2-book-item__cover { flex: 0 0 70px; }
    .xs2-book-item__cover-inner { width: 70px; height: 93px; padding-bottom: 0; }
    .xs2-book-item__info h3 { font-size: 15px; }
    .xs2-book-item__action { display: none; }

    .xs2-book-scroll .xs2-book-card { width: 105px; }

    .xs2-update-row { font-size: 13px; }
    .xs2-update-row__chapter { display: none; }
    .xs2-update-row__date { flex: 0 0 44px; }

    .xs2-chapter-list { column-count: 1; }

    .xs2-book-detail { flex-direction: column; align-items: center; text-align: center; }
    .xs2-book-detail__cover { flex: none; }
    .xs2-book-detail__cover-img { width: 140px; height: 186px; margin: 0 auto; }
    .xs2-book-detail__meta h1 { font-size: 20px; }
    .xs2-book-detail__actions { justify-content: center; }

    .xs2-reader__content { font-size: 16px; padding: 0; }
    .xs2-reader__title h1 { font-size: 18px; }

    .xs2-rank-tabs a { padding: 6px 12px; font-size: 13px; }
    .xs2-category-bar a { padding: 4px 14px; font-size: 13px; }

    .xs2-history-item__actions { flex-direction: column; }

    .xs2-footer { padding: 20px 0; }
    .xs2-footer__links { gap: 12px; }
}

@media (max-width: 480px) {
    .xs2-book-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
    .xs2-book-scroll .xs2-book-card { flex: 0 0 95px; }
    .xs2-book-scroll .xs2-book-card__cover { height: 127px; }
   .xs2-search { display: block; }
   .xs2-header__logo { flex: 1; min-width: 0; }

    .xs2-book-detail__cover-img { width: 110px; height: 146px; }
    .xs2-btn { padding: 8px 20px; font-size: 13px; }
}

@media (max-width: 1024px) {
   .xs2-home-mast {
      grid-template-columns: 1fr;
   }

   .xs2-home-channel-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }

   .xs2-home-cover-strip {
      grid-template-columns: repeat(3, minmax(0, 1fr));
   }

   .xs2-home-bottom-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }

   .xs2-home-right-stack {
      grid-column: 1 / -1;
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }
}

@media (max-width: 768px) {
   .xs2-home-panel__hd h2 {
      font-size: 16px;
   }

   .xs2-home-recommend-grid {
      grid-template-columns: 1fr;
      gap: 0;
   }

   .xs2-home-recommend-grid .xs2-home-recommend-item:nth-last-child(-n+2) {
      border-bottom: 1px dotted #e6ddd4;
   }

   .xs2-home-recommend-grid .xs2-home-recommend-item:last-child {
      border-bottom: none;
   }

   .xs2-home-recommend-item__body h3 {
      font-size: 22px;
   }

   .xs2-home-channel-grid,
   .xs2-home-bottom-grid,
   .xs2-home-right-stack {
      grid-template-columns: 1fr;
   }

   .xs2-home-cover-strip {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
   }

   .xs2-home-cover-card__img {
      height: 148px;
   }

   .xs2-home-updates-head,
   .xs2-home-updates-list li {
      grid-template-columns: 1fr 68px;
   }

   .xs2-home-updates-head span:nth-child(1),
   .xs2-home-updates-head span:nth-child(3),
   .xs2-home-updates-list .xs2-home-updates-cat,
   .xs2-home-updates-list .xs2-home-updates-chapter {
      display: none;
   }

   .xs2-home-updates-time {
      text-align: right;
   }
}

@media (max-width: 480px) {
   .xs2-home-main {
      padding-top: 12px;
   }

   .xs2-home-panel__hd {
      margin: 0 10px;
      padding: 10px 0 8px;
   }

   .xs2-home-panel__hd h2 {
      padding-left: 12px;
      font-size: 15px;
   }

   .xs2-home-collect-list li {
      grid-template-columns: 20px minmax(0, 1fr);
   }

   .xs2-home-collect-list em {
      display: none;
   }

   .xs2-home-recommend-grid {
      padding-left: 10px;
      padding-right: 10px;
   }

   .xs2-home-recommend-item {
      grid-template-columns: 88px minmax(0, 1fr);
      gap: 10px;
   }

   .xs2-home-recommend-item__cover {
      width: 88px;
      height: 118px;
   }

   .xs2-home-recommend-item__body h3 {
      font-size: 18px;
   }

   .xs2-home-recommend-item__meta,
   .xs2-home-recommend-item__desc,
   .xs2-home-category-feature__body,
   .xs2-home-media-item__body,
   .xs2-home-thumb-item__body {
      font-size: 12px;
   }

   .xs2-home-cover-strip {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }

   .xs2-home-cover-card__img {
      height: 138px;
   }

   .xs2-home-category-feature,
   .xs2-home-media-item,
   .xs2-home-thumb-item {
      grid-template-columns: 66px minmax(0, 1fr);
   }

   .xs2-home-category-feature__cover,
   .xs2-home-media-item__cover,
   .xs2-home-thumb-item__cover {
      width: 66px;
      height: 88px;
   }

   .xs2-home-text-list li {
      grid-template-columns: minmax(0, 1fr) 64px;
   }

   .xs2-home-simple-rank li {
      grid-template-columns: 20px minmax(0, 1fr) 56px;
   }

   .xs2-home-text-list span,
   .xs2-home-simple-rank em {
      display: block;
   }

   .xs2-home-updates-head {
      grid-template-columns: 1fr 60px;
      padding-left: 10px;
      padding-right: 10px;
   }

   .xs2-home-updates-list li {
      grid-template-columns: 1fr 60px;
      padding-left: 10px;
      padding-right: 10px;
   }

   .xs2-home-links {
      gap: 12px;
      padding: 12px 10px;
   }
}

/* =====================================================
   Utility
   ===================================================== */
.text-ellipsis-1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-ellipsis-2 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.hide-pc { display: none !important; }
.hide-mobile { }
@media (max-width: 768px) {
    .hide-pc { display: block !important; }
    .hide-mobile { display: none !important; }
}