/* =============================================================
   xs3 Theme — "Ink & Paper" 水墨书香
   Design: Blue-gray tones, serif accents, paper texture feel
   Mobile-first responsive, WCAG AA contrast
   ============================================================= */

/* === Reset === */
*,*::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:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",system-ui,-apple-system,sans-serif;color:var(--c-text);background:var(--c-bg);line-height:1.7}
a{color:inherit;text-decoration:none;transition:color .2s}
ul,ol{list-style:none}
img{max-width:100%;display:block}
input,button,textarea{font:inherit;border:none;outline:none}
h1,h2,h3,h4,h5,h6{font-weight:700;line-height:1.3}

/* === Tokens === */
:root{
    --c-brand:#3d5a80;
    --c-brand-dark:#293d56;
    --c-brand-light:#5c7ea3;
    --c-accent:#e07a5f;
    --c-accent-light:#f2a78d;
    --c-bg:#f7f6f2;
    --c-surface:#fff;
    --c-surface-alt:#f0efe9;
    --c-text:#2d3436;
    --c-text-2:#636e72;
    --c-text-3:#999;
    --c-border:#e4e2db;
    --c-divider:#ebe9e3;
    --shadow-sm:0 1px 4px rgba(0,0,0,.06);
    --shadow-md:0 2px 12px rgba(0,0,0,.08);
    --shadow-lg:0 6px 24px rgba(0,0,0,.1);
    --r:6px;
    --r-lg:10px;
    --max-w:1140px;
    --hdr-h:56px;
}

/* === Utility === */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.clamp-1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.clamp-2{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.clamp-3{overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}

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

/* =============================================================
   Header
   ============================================================= */
.g-header{background:var(--c-brand);position:sticky;top:0;z-index:100;box-shadow:0 1px 8px rgba(61,90,128,.25)}
.g-header .g-wrap{display:flex;align-items:center;height:var(--hdr-h);gap:12px}
.g-logo a{color:#fff;font-size:20px;font-weight:800;letter-spacing:.5px;white-space:nowrap;font-family:"Noto Serif SC","STSong",serif}
.g-logo img{height:32px}

/* Nav */
.g-nav{display:flex;gap:2px;margin-left:auto}
.g-nav a{color:rgba(255,255,255,.82);padding:6px 14px;border-radius:var(--r);font-size:14px;transition:background .2s}
.g-nav a:hover,.g-nav a.on{background:rgba(255,255,255,.15);color:#fff}

/* Search */
.g-search{position:relative;flex-shrink:0}
.g-search__input{width:200px;height:34px;padding:0 34px 0 12px;border-radius:17px;background:rgba(255,255,255,.18);color:#fff;border:1px solid rgba(255,255,255,.22);transition:all .3s}
.g-search__input::placeholder{color:rgba(255,255,255,.55)}
.g-search__input:focus{background:#fff;color:var(--c-text);border-color:#fff;width:260px}
.g-search__input:focus::placeholder{color:#aaa}
.g-search__btn{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;cursor:pointer;color:rgba(255,255,255,.65);font-size:16px}
.g-search__input:focus~.g-search__btn{color:var(--c-brand)}

/* Hamburger (mobile) */
.g-hamburger{display:none;width:36px;height:36px;align-items:center;justify-content:center;cursor:pointer;color:#fff;font-size:22px;border-radius:var(--r);flex-shrink:0}

/* Lang */
.g-lang{position:relative;margin-left:4px}
.g-lang__trigger{color:rgba(255,255,255,.8);cursor:pointer;padding:3px 8px;font-size:13px;border:1px solid rgba(255,255,255,.28);border-radius:var(--r)}
.g-lang__drop{position:absolute;top:calc(100% + 4px);right:0;background:#fff;border-radius:var(--r);box-shadow:var(--shadow-md);min-width:76px;display:none;z-index:10;overflow:hidden}
.g-lang:hover .g-lang__drop{display:block}
.g-lang__drop a{display:block;padding:8px 14px;font-size:13px;color:var(--c-text)}
.g-lang__drop a:hover{background:var(--c-surface-alt);color:var(--c-brand)}

/* =============================================================
   Mobile Drawer
   ============================================================= */
.g-drawer-mask{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:200;opacity:0;visibility:hidden;transition:all .3s}
.g-drawer-mask.open{opacity:1;visibility:visible}
.g-drawer{position:fixed;left:-260px;top:0;width:260px;height:100%;background:var(--c-surface);z-index:201;transition:left .3s;overflow-y:auto}
.g-drawer-mask.open .g-drawer{left:0}
.g-drawer__head{background:var(--c-brand);padding:28px 20px;text-align:center;position:relative}
.g-drawer__head img{width:50px;height:50px;border-radius:50%;margin:0 auto 8px;border:2px solid rgba(255,255,255,.3)}
.g-drawer__head span{color:#fff;font-size:15px;font-weight:700}
.g-drawer__close{position:absolute;top:10px;right:10px;color:rgba(255,255,255,.7);font-size:18px;cursor:pointer;width:28px;height:28px;display:flex;align-items:center;justify-content:center}
.g-drawer__nav a{display:flex;align-items:center;padding:13px 22px;border-bottom:1px solid var(--c-divider);color:var(--c-text);font-size:15px;gap:10px}
.g-drawer__nav a:hover{background:#f5f5f0;color:var(--c-brand)}
.g-drawer__nav i{font-size:18px;width:22px;text-align:center;color:var(--c-brand)}

/* =============================================================
   Cards / Panels
   ============================================================= */
.g-card{background:var(--c-surface);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);padding:20px;margin-bottom:20px;border:1px solid var(--c-border)}

/* Section heading */
.g-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.g-hd__title{font-size:17px;color:var(--c-text);display:flex;align-items:center;gap:8px}
.g-hd__title::before{content:'';width:3px;height:18px;background:var(--c-accent);border-radius:2px;flex-shrink:0}
.g-hd__more{font-size:13px;color:var(--c-text-3)}
.g-hd__more:hover{color:var(--c-accent)}

/* =============================================================
   Book Cover (universal)
   ============================================================= */
.g-cover{position:relative;width:100%;height:0;padding-bottom:133.33%;border-radius:var(--r);overflow:hidden;background:var(--c-surface-alt)}
.g-cover img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}

/* =============================================================
   Book Scroll (horizontal)
   ============================================================= */
.g-scroll{display:flex;gap:14px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:6px;scrollbar-width:thin;scrollbar-color:#d5d3cc transparent}
.g-scroll::-webkit-scrollbar{height:3px}
.g-scroll::-webkit-scrollbar-thumb{background:#d5d3cc;border-radius:2px}
.g-scroll .g-book-thumb{flex:0 0 120px;width:120px;scroll-snap-align:start}

/* Book Thumb */
.g-book-thumb{display:block;text-align:center;transition:transform .2s}
.g-book-thumb:hover{transform:translateY(-3px)}
.g-book-thumb .g-cover{margin-bottom:6px;box-shadow:var(--shadow-sm)}
/* fixed height in scroll to avoid flex % issues */
.g-scroll .g-cover{height:160px;padding-bottom:0}
.g-book-thumb__name{font-size:13px;font-weight:500;color:var(--c-text);line-height:1.35}
.g-book-thumb__author{font-size:12px;color:var(--c-text-3)}

/* Book Grid */
.g-book-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}

/* =============================================================
   Book Item (list row)
   ============================================================= */
.g-book-item{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--c-divider)}
.g-book-item:last-child{border-bottom:none}
.g-book-item__cover{flex:0 0 80px;width:80px}
.g-book-item__cover .g-cover{height:107px;padding-bottom:0}
.g-book-item__body{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center}
.g-book-item__body h3{font-size:15px;margin-bottom:4px}
.g-book-item__body h3 a:hover{color:var(--c-brand)}
.g-book-item__tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:4px}
.g-book-item__tags span,.g-book-item__tags a{font-size:11px;padding:1px 8px;background:var(--c-surface-alt);border-radius:3px;color:var(--c-text-2)}
.g-book-item__tags a:hover{color:var(--c-brand);background:#e8ecf0}
.g-book-item__desc{font-size:13px;color:var(--c-text-2);line-height:1.6;margin-bottom:4px}
.g-book-item__meta{font-size:12px;color:var(--c-text-3);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.g-book-item__meta a{color:var(--c-brand)}
.g-book-item__action{flex:0 0 auto;display:flex;align-items:center}
.g-book-item__latest{font-size:12px;color:var(--c-text-3)}
.g-book-item__latest a{color:var(--c-brand)}
.g-book-item__latest a:hover{color:var(--c-accent)}
.g-book-item__name a:hover{color:var(--c-brand)}
.g-book-item__info{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:4px}
.g-book-item__name{font-size:15px;font-weight:600}

/* Sort toggle */
.g-sort-toggle{font-size:13px;color:var(--c-brand);cursor:pointer;display:flex;align-items:center;gap:4px}
.g-sort-toggle:hover{color:var(--c-accent)}

/* =============================================================
   Update Row
   ============================================================= */
.g-update{display:flex;align-items:center;padding:9px 0;border-bottom:1px solid var(--c-divider);font-size:14px;gap:10px}
.g-update:last-child{border-bottom:none}
.g-update:hover{background:var(--c-surface-alt);margin:0 -8px;padding:9px 8px;border-radius:var(--r)}
.g-update__name{flex:1;min-width:0;font-weight:500}
.g-update__name a{color:var(--c-text)}
.g-update__name a:hover{color:var(--c-brand)}
.g-update__chap{flex:2;min-width:0;color:var(--c-text-2)}
.g-update__chap a:hover{color:var(--c-brand)}
.g-update__date{flex:0 0 46px;font-size:12px;color:var(--c-text-3);text-align:right}

/* =============================================================
   Rankings
   ============================================================= */
.g-rank-bar{display:flex;border-bottom:2px solid var(--c-divider);margin-bottom:14px;gap:0}
.g-rank-bar a{padding:8px 16px;font-size:14px;color:var(--c-text-2);cursor:pointer;position:relative;transition:color .2s}
.g-rank-bar a.on{color:var(--c-brand);font-weight:700}
.g-rank-bar a.on::after{content:'';position:absolute;bottom:-2px;left:0;right:0;height:2px;background:var(--c-brand)}

.g-rank-top{display:flex;gap:14px;padding:12px 0 10px;margin-bottom:6px;border-bottom:1px solid var(--c-divider)}
.g-rank-top__cover{width:72px;height:96px;border-radius:var(--r);overflow:hidden;flex-shrink:0;background:var(--c-surface-alt);box-shadow:var(--shadow-sm)}
.g-rank-top__cover img{width:100%;height:100%;object-fit:cover}
.g-rank-top__info{flex:1;display:flex;flex-direction:column;justify-content:center}
.g-rank-top__info .badge{display:inline-block;font-size:11px;background:var(--c-accent);color:#fff;padding:1px 8px;border-radius:3px;margin-bottom:4px;width:fit-content}
.g-rank-top__info h3{font-size:15px;margin-bottom:2px}
.g-rank-top__info h3 a:hover{color:var(--c-brand)}
.g-rank-top__info p{font-size:13px;color:var(--c-text-2)}

.g-rank-row{display:flex;align-items:center;padding:7px 0;gap:10px}
.g-rank-row+.g-rank-row{border-top:1px solid var(--c-divider)}
.g-rank-num{width:22px;height:22px;border-radius:4px;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0}
.g-rank-num.n1{background:#e17055}.g-rank-num.n2{background:#f0932b}.g-rank-num.n3{background:#f6e58d;color:#7d6608}
.g-rank-num.nx{background:#ddd;color:#888}
.g-rank-row__info{flex:1;min-width:0}
.g-rank-row__info h4{font-size:14px;font-weight:500}
.g-rank-row__info h4 a:hover{color:var(--c-brand)}
.g-rank-row__info p{font-size:12px;color:var(--c-text-3)}

/* =============================================================
   Two-col Layout
   ============================================================= */
.g-layout{display:flex;gap:20px}
.g-layout__main{flex:1;min-width:0}
.g-layout__side{flex:0 0 320px}

/* =============================================================
   Breadcrumb
   ============================================================= */
.g-crumb{font-size:13px;color:var(--c-text-3);padding:10px 0}
.g-crumb a{color:var(--c-text-2)}
.g-crumb a:hover{color:var(--c-brand)}
.g-crumb span{margin:0 5px}

/* =============================================================
   Category Pills
   ============================================================= */
.g-pills{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.g-pills a{display:inline-block;padding:5px 16px;border-radius:18px;font-size:13px;background:var(--c-surface);color:var(--c-text-2);border:1px solid var(--c-border);transition:all .2s}
.g-pills a:hover,.g-pills a.on{background:var(--c-brand);color:#fff;border-color:var(--c-brand)}

/* =============================================================
   Book Detail
   ============================================================= */
.g-detail{display:flex;gap:24px}
.g-detail__cover{flex:0 0 160px}
.g-detail__img{width:160px;height:213px;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-md);background:var(--c-surface-alt)}
.g-detail__img img{width:100%;height:100%;object-fit:cover}
.g-detail__meta{flex:1;min-width:0}
.g-detail__meta h1{font-size:22px;margin-bottom:10px;color:var(--c-text)}
.g-detail__row{font-size:14px;color:var(--c-text-2);margin-bottom:6px}
.g-detail__row a{color:var(--c-brand)}
.g-detail__row a:hover{color:var(--c-accent)}
.g-detail__btns{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}

/* =============================================================
   Buttons
   ============================================================= */
.g-btn{display:inline-flex;align-items:center;justify-content:center;padding:9px 24px;border-radius:var(--r);font-size:14px;font-weight:600;cursor:pointer;transition:all .2s;white-space:nowrap}
.g-btn--brand{background:var(--c-brand);color:#fff}
.g-btn--brand:hover{background:var(--c-brand-dark);color:#fff}
.g-btn--outline{background:transparent;color:var(--c-brand);border:1px solid var(--c-brand)}
.g-btn--outline:hover{background:var(--c-brand);color:#fff}
.g-btn--accent{background:var(--c-accent);color:#fff}
.g-btn--accent:hover{background:#d0694e;color:#fff}
.g-btn--sm{padding:5px 14px;font-size:13px}
.g-btn--block{width:100%}
.g-btn--ghost{background:rgba(255,255,255,.15);color:#fff;border:1px solid rgba(255,255,255,.35)}
.g-btn--ghost:hover{background:rgba(255,255,255,.25);color:#fff}
.g-btn.disabled{opacity:.4;pointer-events:none}

/* =============================================================
   Tabs
   ============================================================= */
.g-tabs{display:flex;border-bottom:2px solid var(--c-divider);margin-bottom:14px}
.g-tabs a{padding:9px 18px;font-size:14px;color:var(--c-text-2);cursor:pointer;position:relative;display:flex;align-items:center;gap:5px;transition:color .2s}
.g-tabs a.on{color:var(--c-brand);font-weight:700}
.g-tabs a.on::after{content:'';position:absolute;bottom:-2px;left:0;right:0;height:2px;background:var(--c-brand)}
.g-tab-pane{display:none}
.g-tab-pane.on{display:block}

/* =============================================================
   Chapter List
   ============================================================= */
.g-chap-list{list-style:none}
.g-chap-list li a{display:block;padding:9px 6px;font-size:14px;color:var(--c-text-2);border-bottom:1px dashed var(--c-divider)}
.g-chap-list li a:hover{color:var(--c-brand);background:var(--c-surface-alt)}

.g-chap-recent li a{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px solid var(--c-divider)}
.g-chap-recent li a span{flex:1;font-size:14px;color:var(--c-text)}
.g-chap-recent li a small{flex-shrink:0;font-size:12px;color:var(--c-text-3);margin-left:10px}

/* =============================================================
   Reader
   ============================================================= */
.g-reader-wrap{padding-top:var(--hdr-h)}
.g-reader{max-width:780px;margin:0 auto}

/* Reader top bar (sticky) */
.g-reader-bar{position:fixed;top:0;left:0;right:0;height:var(--hdr-h);background:var(--c-brand);z-index:100;box-shadow:0 1px 8px rgba(61,90,128,.25)}
.g-reader-bar__inner{display:flex;align-items:center;height:100%;gap:12px}
.g-reader-bar__back{color:#fff;font-size:20px;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--r);flex-shrink:0}
.g-reader-bar__back:hover{background:rgba(255,255,255,.15);color:#fff}
.g-reader-bar__title{flex:1;min-width:0;font-size:16px;font-weight:700;color:#fff}
.g-reader-bar__settings{color:rgba(255,255,255,.8);font-size:20px;cursor:pointer;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:var(--r);flex-shrink:0}
.g-reader-bar__settings:hover{background:rgba(255,255,255,.15);color:#fff}
.g-reader-search{display:none}
.g-reader-search__form{position:relative}
.g-reader-search__input{width:100%;height:36px;padding:0 38px 0 12px;border-radius:18px;background:rgba(255,255,255,.18);color:#fff;border:1px solid rgba(255,255,255,.22)}
.g-reader-search__input::placeholder{color:rgba(255,255,255,.58)}
.g-reader-search__btn{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;cursor:pointer;color:rgba(255,255,255,.72);font-size:16px}

/* Reader head */
.g-reader__head{text-align:center;padding:28px 0 18px}
.g-reader__chap{font-size:21px;color:var(--c-text);margin-bottom:8px}
.g-reader__info{font-size:13px;color:var(--c-text-3)}
.g-reader__info a{color:var(--c-brand)}
.g-reader__info a:hover{color:var(--c-accent)}

/* Reader body */
.g-reader__body{font-size:18px;line-height:2;color:var(--c-text);padding:0 8px;word-wrap:break-word;border-top:1px solid var(--c-divider);padding-top:22px;margin-bottom:22px}
.g-reader__body p{margin-bottom:1em;text-indent:2em}

/* Reader pager */
.g-reader-pager{display:flex;justify-content:center;gap:10px;padding:22px 0;flex-wrap:wrap}

/* Settings mask */
.g-settings-mask{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:250;opacity:0;visibility:hidden;transition:all .3s}
.g-settings-mask.open{opacity:1;visibility:visible}

/* Settings panel */
.g-settings{position:fixed;bottom:-100%;left:50%;transform:translateX(-50%);width:100%;max-width:480px;background:var(--c-surface);z-index:300;transition:bottom .3s;box-shadow:0 -4px 20px rgba(0,0,0,.12);border-radius:14px 14px 0 0;padding:22px 18px}
.g-settings-mask.open .g-settings{bottom:0}
.g-settings__hd{display:flex;align-items:center;justify-content:space-between;font-size:16px;font-weight:700;color:var(--c-text);margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid var(--c-divider)}
.g-settings__hd span{cursor:pointer;color:var(--c-text-3);font-size:18px}
.g-settings__hd span:hover{color:var(--c-text)}
.g-settings__row{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.g-settings__row label{flex:0 0 40px;font-size:13px;color:var(--c-text-2);text-align:right}
.g-settings__ctrl{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.g-settings__ctrl button{padding:5px 16px;border-radius:var(--r);background:var(--c-surface-alt);color:var(--c-text);font-size:13px;cursor:pointer;border:1px solid var(--c-border);transition:all .2s}
.g-settings__ctrl button:hover{background:var(--c-brand);color:#fff;border-color:var(--c-brand)}
.g-settings__ctrl #fontSizeVal{min-width:36px;text-align:center;font-weight:700;font-size:15px;color:var(--c-text)}

/* BG options */
.g-bg-opt{display:inline-block;width:32px;height:32px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:border-color .2s}
.g-bg-opt:hover,.g-bg-opt.active{border-color:var(--c-brand)}
.g-bg-opt.bg0{background:#fff;border-color:#ddd}
.g-bg-opt.bg1{background:#f5f0e0}
.g-bg-opt.bg2{background:#e0f0e0}
.g-bg-opt.bg3{background:#e0e0f0}
.g-bg-opt.bg4{background:#2c2c2c}

/* Disabled button */
.g-btn--disabled{display:inline-flex;align-items:center;justify-content:center;padding:9px 24px;border-radius:var(--r);font-size:14px;font-weight:600;white-space:nowrap;background:var(--c-surface-alt);color:var(--c-text-3);border:1px solid var(--c-border);cursor:not-allowed;opacity:.5}

/* =============================================================
   History
   ============================================================= */
.g-hist-item{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--c-divider)}
.g-hist-item:last-child{border-bottom:none}
.g-hist-item__cover{flex:0 0 60px;width:60px;height:80px;border-radius:var(--r);overflow:hidden;background:var(--c-surface-alt)}
.g-hist-item__cover img{width:100%;height:100%;object-fit:cover}
.g-hist-item__info{flex:1;min-width:0}
.g-hist-item__info h3{font-size:15px;margin-bottom:3px;font-weight:600}
.g-hist-item__info h3 a:hover{color:var(--c-brand)}
.g-hist-item__info p{font-size:13px;color:var(--c-text-3);margin-bottom:2px}
.g-hist-item__info p a{color:var(--c-brand)}
.g-hist-item__info p a:hover{color:var(--c-accent)}
.g-hist-item__del{flex-shrink:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:50%;cursor:pointer;color:var(--c-text-3);transition:all .2s;font-size:14px}
.g-hist-item__del:hover{background:#fbe7e7;color:#e74c3c}

/* =============================================================
   Pagination
   ============================================================= */
.g-pages{display:flex;justify-content:center;align-items:center;gap:5px;padding:22px 0}
.g-pages a,.g-pages span{padding:5px 13px;border-radius:4px;font-size:14px;border:1px solid var(--c-border);color:var(--c-text-2)}
.g-pages a:hover{border-color:var(--c-brand);color:var(--c-brand)}
.g-pages span.current{background:var(--c-brand);color:#fff;border-color:var(--c-brand)}

/* =============================================================
   Footer
   ============================================================= */
.hide-mobile{display:block}

/* =============================================================
   Home Portal
   ============================================================= */
body.home-page{background:linear-gradient(180deg,#f7f6f2 0%,#f3f1eb 100%)}
.home-page .g-home-main{padding-top:20px}
.home-page .g-card{border-radius:0;box-shadow:0 1px 5px rgba(0,0,0,.05)}

.g-home-top{display:grid;grid-template-columns:minmax(0,1fr) 258px;gap:18px;margin-bottom:18px}
.g-home-showcase{padding:14px}
.g-home-showcase__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;padding-bottom:12px;border-bottom:1px solid var(--c-divider)}
.g-home-top-book{min-width:0}
.g-home-top-book__cover{display:block;height:220px;overflow:hidden;border:1px solid var(--c-border);background:var(--c-surface-alt);margin-bottom:8px}
.g-home-top-book__cover img{width:100%;height:100%;object-fit:cover}
.g-home-top-book h3{font-size:13px;font-weight:600;color:var(--c-text)}
.g-home-top-book h3 a:hover{color:var(--c-brand)}
.g-home-showcase__links{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px 18px;padding-top:12px}
.g-home-showcase__links a{position:relative;display:block;min-width:0;padding-left:12px;font-size:13px;color:var(--c-text-2)}
.g-home-showcase__links a::before{content:'';position:absolute;left:0;top:8px;width:4px;height:4px;border-radius:50%;background:var(--c-brand-light)}

.g-home-panel-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;padding-bottom:8px;border-bottom:2px solid var(--c-brand)}
.g-home-panel-title h2{display:flex;align-items:center;gap:8px;font-size:18px;color:var(--c-text)}
.g-home-panel-title h2::before{content:'';width:4px;height:18px;border-radius:2px;background:var(--c-brand)}

.g-home-promo{padding:14px}
.g-home-promo-item{display:grid;grid-template-columns:74px minmax(0,1fr);gap:10px;padding:10px 0;border-bottom:1px solid var(--c-divider)}
.g-home-promo-item:last-child{border-bottom:none;padding-bottom:0}
.g-home-promo-item__cover{width:74px;height:96px;overflow:hidden;border:1px solid var(--c-border);background:var(--c-surface-alt)}
.g-home-promo-item__cover img{width:100%;height:100%;object-fit:cover}
.g-home-promo-item__body{min-width:0;font-size:12px;color:var(--c-text-2);line-height:1.65}
.g-home-promo-item__body h3{font-size:15px;margin-bottom:4px}
.g-home-promo-item__body h3 a:hover{color:var(--c-brand)}

.g-home-block{padding:14px 14px 12px;margin-bottom:18px}
.g-home-block__head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px;padding-bottom:8px;border-bottom:2px solid var(--c-brand)}
.g-home-block__head h2{display:flex;align-items:center;gap:8px;font-size:18px;color:var(--c-brand)}
.g-home-block__head h2::before{content:'';width:4px;height:18px;border-radius:2px;background:var(--c-brand)}
.g-home-block__tags{display:flex;gap:16px;min-width:0;overflow:hidden}
.g-home-block__tags a{font-size:12px;color:var(--c-text-2);min-width:0}
.g-home-block__tags a:hover,.g-home-block__more:hover{color:var(--c-brand)}
.g-home-block__more{font-size:13px;color:var(--c-text-3)}

.g-home-block__body{display:grid;grid-template-columns:minmax(0,1fr) 252px;gap:16px;padding-top:14px;align-items:start}
.g-home-block__main{display:grid;grid-template-columns:230px minmax(0,1fr);gap:16px;align-items:start;min-width:0}
.g-home-feature{display:grid;grid-template-columns:94px minmax(0,1fr);gap:12px;min-width:0}
.g-home-feature__cover{width:94px;height:130px;overflow:hidden;border:1px solid var(--c-border);background:var(--c-surface-alt)}
.g-home-feature__cover img{width:100%;height:100%;object-fit:cover}
.g-home-feature__body{min-width:0;font-size:13px;color:var(--c-text-2);line-height:1.75}
.g-home-feature__body h3{font-size:16px;margin-bottom:4px;color:var(--c-text)}
.g-home-feature__body h3 a:hover{color:var(--c-brand)}
.g-home-feature__actions{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}

.g-home-coverline{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-self:start}
.g-home-coverline__item{display:block;min-width:0;text-align:center}
.g-home-coverline__img{display:block;height:180px;margin-bottom:8px;overflow:hidden;border:1px solid var(--c-border);background:var(--c-surface-alt)}
.g-home-coverline__img img{width:100%;height:100%;object-fit:cover}
.g-home-coverline__item strong{display:block;font-size:12px;font-weight:600;color:var(--c-text)}

.g-home-rankbox{border-left:1px solid var(--c-divider);padding-left:14px;min-width:0;align-self:start}
.g-home-rankbox__head{display:flex;align-items:center;justify-content:space-between;padding-bottom:8px;border-bottom:1px solid var(--c-divider);margin-bottom:8px}
.g-home-rankbox__head h3{font-size:15px;color:var(--c-text)}
.g-home-rankbox__head a{font-size:12px;color:var(--c-text-3)}
.g-home-rankbox__list li{display:grid;grid-template-columns:20px minmax(0,1fr) 56px;align-items:center;gap:8px;padding:6px 0;font-size:12px;min-width:0}
.g-home-rankbox__list li+li{border-top:1px dotted var(--c-divider)}
.g-home-rankbox__list span{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:3px;background:var(--c-brand-light);color:#fff;font-weight:700}
.g-home-rankbox__list li:nth-child(1) span{background:var(--c-accent)}
.g-home-rankbox__list li:nth-child(2) span{background:#f0932b}
.g-home-rankbox__list li:nth-child(3) span{background:#74b9ff}
.g-home-rankbox__list a,.g-home-rankbox__list em{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-style:normal}
.g-home-rankbox__list em{text-align:right;color:var(--c-text-3)}

.g-home-linkcloud{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px 18px;padding-top:12px;margin-top:6px;border-top:1px solid var(--c-divider);grid-column:1 / 3;align-self:start}
.g-home-linkcloud a{display:block;min-width:0;font-size:13px;color:var(--c-text-2)}

.g-home-bottom{display:grid;grid-template-columns:minmax(0,1fr) 258px;gap:18px}
.g-home-updates{padding:14px}
.g-home-updates__head,.g-home-updates__list li{display:grid;grid-template-columns:90px 120px minmax(0,1fr) 84px 52px;align-items:center;gap:10px;min-width:0}
.g-home-updates__head{padding:0 2px 8px;font-size:12px;color:var(--c-text-3);border-bottom:1px solid var(--c-divider)}
.g-home-updates__list li{padding:8px 2px;border-bottom:1px dotted var(--c-divider);font-size:13px}
.g-home-updates__list li:last-child{border-bottom:none}
.g-home-updates__cat,.g-home-updates__author,.g-home-updates__time{color:var(--c-text-3)}
.g-home-updates__book,.g-home-updates__chapter,.g-home-updates__author{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.g-home-updates__chapter:hover,.g-home-updates__book:hover{color:var(--c-brand)}
.g-home-updates__time{text-align:right;font-size:12px}

.g-home-sidepanels{display:grid;gap:18px}
.g-home-sidepanel{padding:14px}
.g-home-mini-rank li{display:grid;grid-template-columns:20px minmax(0,1fr) 52px;align-items:center;gap:8px;padding:6px 0;font-size:12px;min-width:0}
.g-home-mini-rank li+li{border-top:1px dotted var(--c-divider)}
.g-home-mini-rank span{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:3px;background:var(--c-brand-light);color:#fff;font-weight:700}
.g-home-mini-rank a,.g-home-mini-rank em{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-style:normal}
.g-home-mini-rank em{text-align:right;color:var(--c-text-3)}
.g-home-links{display:flex;flex-wrap:wrap;gap:10px 14px;font-size:13px}
.g-home-links a{color:var(--c-text-2)}
.g-home-links a:hover{color:var(--c-brand)}

.g-footer{background:var(--c-brand-dark);color:rgba(255,255,255,.55);margin-top:36px;padding:28px 0}
.g-footer__links{display:flex;justify-content:center;gap:18px;margin-bottom:14px;flex-wrap:wrap}
.g-footer__links a{color:rgba(255,255,255,.55);font-size:13px}
.g-footer__links a:hover{color:#fff}
.g-footer__copy{text-align:center;font-size:12px;color:rgba(255,255,255,.35)}
.g-footer__copy a{color:rgba(255,255,255,.45);margin:0 3px}

/* =============================================================
   Night mode
   ============================================================= */
body.night{--c-bg:#181818;--c-surface:#242424;--c-surface-alt:#2e2e2e;--c-text:#d0d0d0;--c-text-2:#a0a0a0;--c-text-3:#777;--c-border:#3a3a3a;--c-divider:#333}
body.night a{color:var(--c-text)}
body.night a:hover{color:var(--c-accent-light)}
body.night .g-card{background:var(--c-surface);border-color:var(--c-border);box-shadow:0 1px 4px rgba(0,0,0,.2)}
body.night .g-pills a{background:var(--c-surface-alt);border-color:var(--c-border);color:var(--c-text-2)}
body.night .g-cover{background:var(--c-surface-alt)}
body.night .g-footer{background:#111}
body.night .g-settings{background:var(--c-surface);color:var(--c-text)}
body.night .g-rank-num.nx{background:#444;color:#aaa}
body.night .g-btn--outline{border-color:var(--c-brand-light);color:var(--c-brand-light)}
body.night .g-pages a,body.night .g-pages span{border-color:var(--c-border);color:var(--c-text-2)}
body.night .g-update:hover{background:var(--c-surface-alt)}
body.night .g-reader-bar{background:#222;box-shadow:0 1px 8px rgba(0,0,0,.3)}
body.night .g-reader-search{background:#222}
body.night .g-settings{background:var(--c-surface);color:var(--c-text)}
body.night .g-settings__ctrl button{background:var(--c-surface-alt);color:var(--c-text);border-color:var(--c-border)}
body.night .g-hist-item__del:hover{background:#3a2020}

/* Reading BG modes */
body.rbg0{--c-bg:#f7f6f2;--c-surface:#fff}
body.rbg1{--c-bg:#e8e0c8;--c-surface:#f5f0e0}
body.rbg1 .g-header,body.rbg1 .g-reader-bar{background:#8a7040}body.rbg1 .g-footer{background:#5a4a30}
body.rbg1 .g-reader-search{background:#8a7040}
body.rbg2{--c-bg:#c8e0c8;--c-surface:#e0f0e0}
body.rbg2 .g-header,body.rbg2 .g-reader-bar{background:#4a7a4a}body.rbg2 .g-footer{background:#2a4a2a}
body.rbg2 .g-reader-search{background:#4a7a4a}
body.rbg3{--c-bg:#c8c8e8;--c-surface:#e0e0f0}
body.rbg3 .g-header,body.rbg3 .g-reader-bar{background:#4a4a8a}body.rbg3 .g-footer{background:#2a2a5a}
body.rbg3 .g-reader-search{background:#4a4a8a}
body.rbg4{--c-bg:#181818;--c-surface:#242424;--c-text:#bbb;--c-text-2:#999;--c-text-3:#666;--c-border:#3a3a3a;--c-divider:#333}
body.rbg4 a{color:#bbb}body.rbg4 .g-header,body.rbg4 .g-reader-bar{background:#222}body.rbg4 .g-footer{background:#111}
body.rbg4 .g-reader-search{background:#222}
body.rbg4 .g-card{background:#242424;border-color:#3a3a3a}
body.rbg4 .g-settings{background:#242424;color:#ccc}

/* =============================================================
   Responsive
   ============================================================= */
@media(max-width:1024px){
    .g-layout{flex-direction:column}
    .g-layout__side{flex:none}
    .g-book-grid{grid-template-columns:repeat(4,1fr)}
    .g-chap-list{column-count:2}
    .g-detail__cover{flex:0 0 130px}
    .g-detail__img{width:130px;height:173px}

   .g-home-top,.g-home-bottom{grid-template-columns:1fr}
   .g-home-block__body{grid-template-columns:1fr}
   .g-home-block__main{grid-template-columns:230px minmax(0,1fr)}
   .g-home-rankbox{grid-column:1 / -1;border-left:none;border-top:1px solid var(--c-divider);padding-left:0;padding-top:14px}
   .g-home-linkcloud{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:768px){
    :root{--hdr-h:50px}
   .g-header .g-wrap{height:auto;min-height:var(--hdr-h);flex-wrap:wrap;row-gap:8px;padding-top:8px;padding-bottom:8px}
    .g-nav{display:none}
    .g-hamburger{display:flex}
    .g-lang{display:none}
   .g-logo{flex:1;min-width:0}
   .g-logo a{display:block;overflow:hidden;text-overflow:ellipsis}
   .g-search{order:4;flex:0 0 100%;width:100%}
   .g-search__input{width:100%;height:36px}
   .g-search__input:focus{width:100%}
    .g-logo a{font-size:17px}
   .g-reader-search{display:block;position:fixed;top:var(--hdr-h);left:0;right:0;z-index:99;background:var(--c-brand);padding:8px 0;box-shadow:0 1px 8px rgba(61,90,128,.18)}
    .g-card{padding:14px;border-radius:var(--r)}
    .g-book-grid{grid-template-columns:repeat(3,1fr);gap:12px}
    .g-scroll .g-book-thumb{flex:0 0 100px;width:100px}
    .g-scroll .g-cover{height:133px}
    .g-book-item__cover{flex:0 0 66px;width:66px}
    .g-book-item__cover .g-cover{height:88px}
    .g-book-item{gap:10px}
    .g-book-item__action{display:none}
    .g-update__chap{display:none}
    .g-update__date{flex:0 0 42px}
    .g-detail{flex-direction:column;align-items:center;text-align:center}
    .g-detail__cover{flex:none}
    .g-detail__img{width:130px;height:173px;margin:0 auto}
    .g-detail__meta h1{font-size:19px}
    .g-detail__btns{justify-content:center}
    .g-reader__body{font-size:16px;padding:0}
    .g-reader__head h1,.g-reader__chap{font-size:18px}
    .g-reader-pager .g-btn,.g-reader-pager .g-btn--disabled{padding:7px 16px;font-size:13px}
    .g-rank-bar a{padding:6px 10px;font-size:13px}
    .g-pills a{padding:4px 12px;font-size:12px}
    .g-hist__ops{flex-direction:column}
    .g-footer{padding:18px 0}

   .hide-mobile{display:none!important}
   .g-home-showcase__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
   .g-home-showcase__links{grid-template-columns:repeat(2,minmax(0,1fr))}
   .g-home-block__head{grid-template-columns:minmax(0,1fr) auto;gap:10px}
   .g-home-block__main{grid-template-columns:1fr}
   .g-home-coverline{grid-template-columns:repeat(2,minmax(0,1fr))}
   .g-home-linkcloud{grid-template-columns:repeat(2,minmax(0,1fr));grid-column:auto}
   .g-home-rankbox__head h3{min-width:0}
   .g-home-rankbox__head a{flex-shrink:0}
   .g-home-updates__head,.g-home-updates__list li{grid-template-columns:minmax(0,1fr) 52px}
   .g-home-updates__head span:nth-child(-n+4),.g-home-updates__list .g-home-updates__cat,.g-home-updates__list .g-home-updates__chapter,.g-home-updates__list .g-home-updates__author{display:none}
}
@media(max-width:480px){
    .g-book-grid{grid-template-columns:repeat(3,1fr);gap:8px}
    .g-scroll .g-book-thumb{flex:0 0 90px;width:90px}
    .g-scroll .g-cover{height:120px}
   .g-search{display:block}
   .g-logo{flex:1;min-width:0}
    .g-detail__img{width:110px;height:147px}
    .g-btn{padding:7px 18px;font-size:13px}

   .home-page .g-home-main{padding-top:14px}
   .g-home-top,.g-home-bottom{gap:14px}
   .g-home-showcase,.g-home-promo,.g-home-block,.g-home-updates,.g-home-sidepanel{padding:12px}
   .g-home-top-book__cover{height:220px}
   .g-home-feature{grid-template-columns:82px minmax(0,1fr)}
   .g-home-feature__cover{width:82px;height:110px}
   .g-home-coverline__img{height:230px}
   .g-home-rankbox__list li{grid-template-columns:20px minmax(0,1fr) 46px}
   .g-home-linkcloud{grid-template-columns:1fr;grid-column:auto}
}