/* === RESET === */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth}
body{font-family:'PingFang SC','Microsoft YaHei',sans-serif;background:#0c0c14;color:#c8c8d4;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:#d4a0ff;text-decoration:none;transition:.25s}
a:hover{color:#eac8ff}
img{max-width:100%;height:auto;display:block}

/* === HEADER === */
#branding{background:linear-gradient(180deg,#12101e 0%,#0c0c14 100%);border-bottom:1px solid rgba(212,160,255,.08)}
.header-inner{max-width:1200px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.header-left{flex-shrink:0}
#site-title{font-size:1.8rem;font-weight:900;letter-spacing:4px;margin:0}
#site-title a{background:linear-gradient(135deg,#ff6b9d,#d4a0ff,#6bc5ff);-webkit-background-clip:text;background-clip:text;color:transparent}
#site-description{font-size:.7rem;color:rgba(212,160,255,.35);margin:2px 0 0;letter-spacing:2px}
.header-right{flex-shrink:0}
.header-search-form{display:flex}
.header-search-form input{background:rgba(255,255,255,.04);border:1px solid rgba(212,160,255,.15);border-right:none;color:#c8c8d4;padding:7px 14px;font-size:.8rem;border-radius:18px 0 0 18px;width:170px;outline:none;transition:.3s}
.header-search-form input:focus{border-color:rgba(212,160,255,.4);background:rgba(255,255,255,.08)}
.header-search-form input::placeholder{color:rgba(255,255,255,.2)}
.header-search-form button{background:linear-gradient(135deg,#d4a0ff,#ff6b9d);border:none;color:#0c0c14;padding:7px 16px;font-size:.8rem;font-weight:700;border-radius:0 18px 18px 0;cursor:pointer}

/* Mobile header buttons */
.mobile-header-btns{display:none;align-items:center;gap:8px}
.mobile-search-form{display:flex;align-items:center}
.mobile-search-form input{width:100px;background:rgba(255,255,255,.06);border:1px solid rgba(212,160,255,.15);color:#c8c8d4;padding:6px 10px;font-size:.75rem;border-radius:16px 0 0 16px;outline:none}
.mobile-search-form input::placeholder{color:rgba(255,255,255,.25)}
.mobile-search-form button{background:linear-gradient(135deg,#d4a0ff,#ff6b9d);border:none;color:#0c0c14;padding:6px 10px;font-size:.8rem;border-radius:0 16px 16px 0;cursor:pointer}
.mobile-menu-toggle{background:linear-gradient(135deg,#d4a0ff,#ff6b9d);border:none;cursor:pointer;padding:6px 12px;border-radius:16px;display:flex;align-items:center;gap:4px;z-index:1001}
.mobile-menu-toggle .menu-icon{font-size:1rem;color:#0c0c14;line-height:1}
.mobile-menu-toggle .menu-label{font-size:.72rem;font-weight:700;color:#0c0c14;letter-spacing:.5px}

/* NAV */
#access{background:rgba(12,12,20,.9);backdrop-filter:blur(12px);border-bottom:1px solid rgba(212,160,255,.06)}
.menu{list-style:none;display:flex;justify-content:center;flex-wrap:wrap;max-width:1200px;margin:0 auto}
.menu-item>a{display:block;padding:9px 15px;color:rgba(255,255,255,.55);font-size:.8rem;font-weight:500;white-space:nowrap;border-bottom:2px solid transparent;transition:.25s}
.menu-item>a:hover,.menu-item.active>a{color:#d4a0ff;border-bottom-color:#d4a0ff;background:rgba(212,160,255,.04)}

/* === MAIN === */
#main{max-width:1200px;margin:0 auto;padding:0 20px;min-height:60vh}

/* === SHELF SECTIONS (Novel-style) === */
.shelf-section{padding:28px 0;border-bottom:1px solid rgba(255,255,255,.03)}
.shelf-section:last-child{border-bottom:none}

.shelf-header{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:18px;padding:0 2px}
.shelf-title{font-size:1.15rem;font-weight:800;color:#e0e0ea;letter-spacing:1px}
.title-icon{margin-right:4px}
.shelf-sub{font-size:.72rem;color:rgba(212,160,255,.4);margin-left:10px;font-weight:400}
.shelf-more{font-size:.78rem;color:#d4a0ff;font-weight:600;opacity:.7}
.shelf-more:hover{opacity:1}

/* === FEATURE LAYOUT (Big cover + list) === */
.shelf-feature{display:grid;grid-template-columns:320px 1fr;gap:20px;margin-bottom:16px}

.feature-card{display:block;border-radius:10px;overflow:hidden;position:relative}
.feature-cover{position:relative;width:100%;aspect-ratio:3/4;overflow:hidden;background:#151520}
.feature-cover img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.4,0,.2,1)}
.feature-card:hover .feature-cover img{transform:scale(1.06)}
.feature-overlay{position:absolute;bottom:0;left:0;right:0;padding:50px 16px 16px;background:linear-gradient(transparent,rgba(12,12,20,.92))}
.feature-name{font-size:1.3rem;font-weight:800;color:#fff;margin:6px 0 2px}
.feature-desc{font-size:.78rem;color:rgba(255,255,255,.55)}
.feature-flag{font-size:1.4rem;position:absolute;top:12px;right:12px}
.feature-price{display:inline-block;margin-top:6px;background:linear-gradient(135deg,#ff6b9d,#d4a0ff);color:#0c0c14;padding:3px 10px;border-radius:4px;font-size:.72rem;font-weight:800}

.badge{position:absolute;top:10px;left:10px;padding:2px 10px;border-radius:3px;font-size:.65rem;font-weight:800;z-index:2}
.badge-hot{background:linear-gradient(135deg,#ff3366,#ff6b9d);color:#fff}
.badge-rank{background:rgba(212,160,255,.85);color:#0c0c14;border-radius:50%;width:22px;height:22px;display:flex;align-items:center;justify-content:center;padding:0;font-size:.65rem;top:6px;left:6px}

/* Right list */
.feature-list{display:flex;flex-direction:column;gap:10px;overflow:auto}
.list-item{display:flex;gap:12px;padding:8px;border-radius:8px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.03);transition:.3s}
.list-item:hover{background:rgba(212,160,255,.06);border-color:rgba(212,160,255,.12)}
.list-cover{width:56px;height:72px;border-radius:5px;overflow:hidden;flex-shrink:0;position:relative;background:#151520}
.list-cover img{width:100%;height:100%;object-fit:cover}
.list-info{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center}
.list-name{font-size:.85rem;font-weight:700;color:#e0e0ea;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.list-tags{font-size:.7rem;color:rgba(255,255,255,.4);margin:2px 0}
.list-price{font-size:.7rem;color:#ff6b9d;font-weight:700}

/* === Quick Tags === */
.tags-section{padding:18px 0 !important}
.quick-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.qtag{padding:6px 16px;border:1px solid rgba(212,160,255,.2);border-radius:20px;font-size:.78rem;color:rgba(212,160,255,.7);transition:.3s;background:rgba(212,160,255,.03)}
.qtag:hover{background:linear-gradient(135deg,#d4a0ff,#ff6b9d);color:#0c0c14;border-color:transparent}

/* === Main Zone === */
.main-zone{padding:32px 0}
.main-grid{grid-template-columns:repeat(4,1fr) !important;gap:16px !important}

/* === Latest Scroll === */
.latest-scroll{display:flex;gap:14px;overflow-x:auto;padding-bottom:10px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.latest-scroll::-webkit-scrollbar{height:4px}
.latest-scroll::-webkit-scrollbar-track{background:transparent}
.latest-scroll::-webkit-scrollbar-thumb{background:rgba(212,160,255,.15);border-radius:4px}

.latest-card{flex-shrink:0;width:140px;scroll-snap-align:start;border-radius:8px;overflow:hidden;background:#13131f;transition:.35s;border:1px solid rgba(255,255,255,.03)}
.latest-card:hover{transform:translateY(-3px);box-shadow:0 6px 20px rgba(212,160,255,.1);border-color:rgba(212,160,255,.1)}
.latest-cover{position:relative;aspect-ratio:3/4;overflow:hidden;background:#151520}
.latest-cover img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.latest-card:hover .latest-cover img{transform:scale(1.06)}
.latest-new-badge{position:absolute;top:6px;left:6px;background:linear-gradient(135deg,#00c9ff,#6bc5ff);color:#0c0c14;padding:2px 8px;border-radius:3px;font-size:.58rem;font-weight:800;letter-spacing:.5px}
.latest-info{padding:8px}
.latest-name{font-size:.78rem;font-weight:700;color:#e0e0ea;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.latest-tags{font-size:.62rem;color:rgba(255,255,255,.35);display:block;margin-top:2px}

/* === BOOK ROW (Bookshelf cards) === */
.book-row{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.compact-row{grid-template-columns:repeat(6,1fr)}

.book-card{display:block;border-radius:6px;overflow:hidden;transition:.35s;background:#13131f}
.book-card:hover{transform:translateY(-4px);box-shadow:0 8px 25px rgba(212,160,255,.12)}

.book-cover{position:relative;aspect-ratio:3/4;overflow:hidden;background:#151520}
.book-cover img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.book-card:hover .book-cover img{transform:scale(1.06)}
.book-overlay{position:absolute;bottom:0;left:0;right:0;padding:24px 6px 6px;background:linear-gradient(transparent,rgba(12,12,20,.88))}
.book-flag{font-size:.9rem;position:absolute;top:6px;right:6px;z-index:2}
.book-name{font-size:.72rem;font-weight:700;color:#fff;display:block}
.book-price{position:absolute;top:6px;left:6px;background:rgba(255,107,157,.85);color:#fff;padding:1px 6px;border-radius:3px;font-size:.58rem;font-weight:800}

.book-meta{padding:8px 6px}
.book-title{font-size:.7rem;font-weight:600;color:#c8c8d4;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:2px}
.book-sub{font-size:.6rem;color:rgba(255,255,255,.3)}

.mini-card .book-meta{display:none}

.no-image{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#333;font-size:.75rem;background:linear-gradient(135deg,#12101e,#1a1830)}

/* === TODAY SECTION === */
.today-section{background:linear-gradient(180deg,rgba(34,197,94,.04) 0%,transparent 100%);border-radius:12px;padding:28px 16px !important;margin-bottom:8px;border:1px solid rgba(34,197,94,.08)}
.today-card{border:1px solid rgba(34,197,94,.15)}
.today-card:hover{border-color:rgba(34,197,94,.3);box-shadow:0 8px 25px rgba(34,197,94,.12)}
.today-badge{position:absolute;top:6px;right:6px;background:rgba(34,197,94,.9);color:#fff;padding:3px 10px;border-radius:4px;font-size:.62rem;font-weight:800;z-index:3;letter-spacing:.5px;box-shadow:0 2px 8px rgba(34,197,94,.3)}

/* Detail page status */
.detail-status-bar{margin-bottom:14px}
.detail-status{display:inline-flex;align-items:center;gap:6px;padding:6px 16px;border-radius:6px;font-size:.85rem;font-weight:700}
.detail-status-on{background:rgba(34,197,94,.1);color:#22c55e;border:1px solid rgba(34,197,94,.25)}
.detail-status-off{background:rgba(100,100,120,.1);color:rgba(255,255,255,.4);border:1px solid rgba(100,100,120,.2)}

/* === READER DETAIL PAGE === */
.reader-page{max-width:900px;margin:0 auto;padding:15px 0 30px}

.reader-crumb{display:flex;align-items:center;gap:6px;padding:12px 0;font-size:.78rem;color:rgba(255,255,255,.3);flex-wrap:wrap}
.reader-crumb a{color:rgba(212,160,255,.5)}
.reader-crumb a:hover{color:#d4a0ff}
.crumb-sep{color:rgba(255,255,255,.15)}
.crumb-current{color:rgba(255,255,255,.6)}

/* Detail info section */
.detail-info-section{padding:20px 0;border-bottom:1px solid rgba(255,255,255,.04)}
.bd-title{font-size:1.4rem;font-weight:800;color:#fff;margin-bottom:12px;line-height:1.3}

.bd-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.bd-tag{padding:4px 12px;border-radius:4px;font-size:.75rem;background:rgba(212,160,255,.08);color:rgba(212,160,255,.7);border:1px solid rgba(212,160,255,.12)}

.bd-prices{margin-bottom:16px;display:flex;flex-direction:column;gap:6px}
.bd-price-row{display:flex;align-items:center;gap:10px}
.bd-price-label{font-size:.75rem;color:rgba(255,255,255,.35);width:50px;flex-shrink:0}
.bd-price-val{font-size:.85rem;font-weight:700;color:#ff6b9d}
.overnight-val{color:#ffb347}

.bd-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.bd-btn{padding:9px 18px;border-radius:6px;font-size:.8rem;font-weight:700;transition:.3s;display:inline-flex;align-items:center;gap:4px}
.bd-whatsapp{background:linear-gradient(135deg,#25d366,#128c7e);color:#fff}
.bd-telegram{background:linear-gradient(135deg,#0088cc,#0066aa);color:#fff}
.bd-channel{background:linear-gradient(135deg,#8b5cf6,#6d28d9);color:#fff}
.bd-back{background:rgba(255,255,255,.06);color:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.08)}
.bd-btn:hover{transform:translateY(-2px);opacity:.9;color:#fff}
.bd-back:hover{color:#d4a0ff;border-color:rgba(212,160,255,.2)}

/* Chapter sections */
.chapter-section{padding:24px 0;border-bottom:1px solid rgba(255,255,255,.03)}
.chapter-section:last-child{border-bottom:none}
.chapter-title{font-size:1rem;font-weight:700;color:#e0e0ea;margin-bottom:16px;display:flex;align-items:center;gap:8px}
.ch-icon{font-size:1.1rem}
.ch-count{font-size:.72rem;color:rgba(255,255,255,.3);font-weight:400;margin-left:auto}

.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.gallery-cell{position:relative;border-radius:6px;overflow:hidden;cursor:pointer;aspect-ratio:3/4;background:#151520}
.gallery-cell img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.gallery-cell:hover img{transform:scale(1.05)}
.cell-num{position:absolute;top:6px;left:6px;background:rgba(0,0,0,.5);color:rgba(255,255,255,.6);font-size:.6rem;padding:1px 6px;border-radius:3px}

.chat-grid{grid-template-columns:repeat(3,1fr)}
.chat-grid .gallery-cell{aspect-ratio:auto}

/* Video zone */
.video-zone{background:linear-gradient(180deg,rgba(212,160,255,.02) 0%,transparent 100%);border-radius:10px;padding:24px 16px !important;margin:16px 0}

.video-list{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}

.video-player{border-radius:10px;overflow:hidden;border:1px solid rgba(212,160,255,.08);background:#0a0a12;transition:.3s}
.video-player:hover{border-color:rgba(212,160,255,.2);box-shadow:0 4px 20px rgba(212,160,255,.06)}
.video-player video{width:100%;display:block;background:#000;aspect-ratio:16/9;object-fit:contain}
.video-label{padding:8px 12px;font-size:.75rem;color:rgba(212,160,255,.5);font-weight:600;background:rgba(12,12,20,.6)}

/* Video empty state */
.video-empty{text-align:center;padding:40px 20px;border:2px dashed rgba(212,160,255,.1);border-radius:12px;background:rgba(212,160,255,.02)}
.ve-icon{font-size:2.5rem;margin-bottom:12px;opacity:.4}
.ve-text{font-size:1rem;font-weight:700;color:rgba(255,255,255,.4);margin-bottom:4px}
.ve-sub{font-size:.78rem;color:rgba(255,255,255,.2)}

/* Bottom nav */
.reader-bottom{display:flex;justify-content:center;gap:12px;padding:24px 0;margin-top:20px}
.rb-btn{padding:10px 24px;border-radius:20px;font-size:.85rem;font-weight:600;transition:.3s;border:1px solid rgba(212,160,255,.2);color:rgba(212,160,255,.6);background:rgba(212,160,255,.03)}
.rb-btn:hover{background:linear-gradient(135deg,#d4a0ff,#ff6b9d);color:#0c0c14;border-color:transparent}
.rb-home{border-color:rgba(255,255,255,.1);color:rgba(255,255,255,.4)}
.rb-home:hover{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.2)}

/* Lightbox */
.lightbox{display:none;position:fixed;inset:0;background:rgba(10,10,18,.97);z-index:9999;justify-content:center;align-items:center;cursor:pointer}
.lightbox.active{display:flex}
.lightbox img{max-width:92%;max-height:92vh;object-fit:contain;border-radius:4px}
.lightbox-close{position:absolute;top:16px;right:24px;color:#d4a0ff;font-size:2.2rem;cursor:pointer;z-index:10000}

/* === CATEGORY / SEARCH PAGES === */
.category-page{padding:15px 0}
.girls-grid{display:grid;gap:12px}
.grid-6{grid-template-columns:repeat(6,1fr)}
.girl-card{border-radius:6px;overflow:hidden;background:#13131f;transition:.35s}
.girl-card:hover{transform:translateY(-4px);box-shadow:0 8px 25px rgba(212,160,255,.12)}
.girl-card-link{display:block;color:inherit}
.girl-thumbnail{position:relative;aspect-ratio:3/4;overflow:hidden;background:#151520}
.girl-thumbnail img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.girl-card:hover .girl-thumbnail img{transform:scale(1.06)}
.girl-info{padding:10px 8px}
.girl-title{font-size:.72rem;font-weight:600;color:#c8c8d4;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.read-more{font-size:.62rem;color:rgba(212,160,255,.4);display:block;margin-top:4px}

.search-box-page{max-width:480px;margin:0 auto 28px}
.page-search-form{display:flex}
.page-search-input{flex:1;background:rgba(255,255,255,.04);border:1px solid rgba(212,160,255,.15);border-right:none;color:#c8c8d4;padding:11px 16px;font-size:.9rem;border-radius:22px 0 0 22px;outline:none}
.page-search-input:focus{border-color:rgba(212,160,255,.4)}
.page-search-input::placeholder{color:rgba(255,255,255,.2)}
.page-search-btn{background:linear-gradient(135deg,#d4a0ff,#ff6b9d);border:none;color:#0c0c14;padding:11px 22px;font-size:.9rem;font-weight:700;border-radius:0 22px 22px 0;cursor:pointer}

.empty-state{text-align:center;padding:60px 20px;color:#444;font-size:1rem}

/* Flash */
.flash-msg{padding:10px 18px;margin:10px 0;border-radius:6px;font-size:.85rem}
.flash-success{background:rgba(212,160,255,.08);color:#d4a0ff;border:1px solid rgba(212,160,255,.2)}
.flash-error{background:rgba(255,107,157,.08);color:#ff6b9d;border:1px solid rgba(255,107,157,.2)}

/* === FOOTER === */
#colophon{background:#08080e;border-top:1px solid rgba(255,255,255,.03);padding:22px 0;margin-top:30px}
.footer-inner{max-width:1200px;margin:0 auto;text-align:center;color:rgba(255,255,255,.18);font-size:.72rem;letter-spacing:1px}

/* === RESPONSIVE === */
@media(max-width:1024px){
    .book-row{grid-template-columns:repeat(4,1fr)}
    .main-grid{grid-template-columns:repeat(4,1fr) !important}
    .compact-row{grid-template-columns:repeat(4,1fr)}
    .shelf-feature{grid-template-columns:260px 1fr}
    .gallery-grid{grid-template-columns:repeat(3,1fr)}
    .latest-card{width:130px}
    .grid-6{grid-template-columns:repeat(4,1fr)}
}

@media(max-width:768px){
    .mobile-header-btns{display:flex}
    .header-right{display:none}
    .header-left{flex:1;min-width:0}
    #access{max-height:0;overflow:hidden;transition:max-height .4s}
    #access.open{max-height:600px}
    .menu{flex-direction:column}
    .menu-item>a{padding:11px 20px;border-bottom:1px solid rgba(255,255,255,.03);font-size:.85rem}

    .shelf-feature{grid-template-columns:1fr;gap:14px}
    .feature-list{flex-direction:row;overflow-x:auto;gap:10px;padding-bottom:6px}
    .list-item{flex-shrink:0;width:220px}

    .book-row{grid-template-columns:repeat(3,1fr);gap:10px}
    .main-grid{grid-template-columns:repeat(3,1fr) !important;gap:10px !important}
    .compact-row{grid-template-columns:repeat(3,1fr)}
    .grid-6{grid-template-columns:repeat(3,1fr)}

    .latest-card{width:120px}

    .reader-page{display:flex;flex-direction:column}
    .detail-order-0{order:0}
    .detail-order-1{order:1}
    .detail-order-2{order:2}
    .detail-order-3{order:3}
    .detail-order-4{order:4}
    .detail-order-5{order:5}
    .detail-info-section{text-align:center}
    .bd-tags{justify-content:center}
    .bd-actions{justify-content:center}

    .gallery-grid{grid-template-columns:repeat(2,1fr)}
    .chat-grid{grid-template-columns:repeat(2,1fr)}

    .video-list{grid-template-columns:1fr}
    .video-zone{padding:18px 12px !important}

    .reader-bottom{flex-direction:column;align-items:center}
    .rb-btn{width:100%;max-width:260px;text-align:center}
}

@media(max-width:480px){
    #site-title{font-size:1.3rem;letter-spacing:2px}
    #site-description{font-size:.6rem}
    .shelf-title{font-size:1rem}
    .book-row{grid-template-columns:repeat(2,1fr);gap:8px}
    .main-grid{grid-template-columns:repeat(2,1fr) !important;gap:8px !important}
    .compact-row{grid-template-columns:repeat(3,1fr)}
    .grid-6{grid-template-columns:repeat(2,1fr)}
    .book-title{font-size:.62rem}
    .latest-card{width:110px}
    .bd-title{font-size:1.1rem}
    .bd-btn{padding:8px 14px;font-size:.75rem}
    .gallery-grid{grid-template-columns:repeat(2,1fr)}
    .video-list{grid-template-columns:1fr}
    .video-player video{max-height:280px}
    .video-empty{padding:30px 16px}
    .ve-icon{font-size:2rem}
    .ve-text{font-size:.9rem}
}