/* ============================================================
   MANGA THEME — STYLESHEET (Mobile First)
   Version: 2.0
   Breakpoints: mobile default | tablet 640px | desktop 1024px
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700;900&display=swap');

/* === CSS VARIABLES === */
:root {
  --primary:       #FFD100;
  --primary-hover: #E5BC00;
  --primary-light: #FFFBE5;
  --primary-dark:  #C9A000;
  --nav-bg:        #1A1A1A;
  --white:         #FFFFFF;
  --bg:            #F5F5F5;
  --text:          #1A1A1A;
  --text-sec:      #555;
  --text-muted:    #999;
  --border:        #E8E8E8;
  --red:           #FF3B3B;
  --orange:        #FF8C00;
  --green:         #00C058;
  --shadow-sm:     0 1px 4px rgba(0,0,0,0.07);
  --shadow:        0 2px 12px rgba(0,0,0,0.09);
  --shadow-lg:     0 8px 32px rgba(0,0,0,0.14);
  --radius-sm:     4px;
  --radius:        8px;
  --radius-lg:     14px;
  --transition:    0.2s ease;
  --container:     1200px;
  --font:          'Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif;
}

/* === RESET === */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:14px;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
ul,ol{list-style:none}
button{cursor:pointer;border:none;background:none;font-family:var(--font)}
input,textarea,select{font-family:var(--font)}

/* === SKIP LINK === */
.skip-link{position:absolute;top:-40px;left:6px;background:var(--primary);color:var(--nav-bg);padding:6px 12px;border-radius:0 0 4px 4px;font-size:13px;font-weight:700;z-index:9999;transition:top .2s}
.skip-link:focus{top:0}

/* === CONTAINER === */
.container{max-width:var(--container);margin:0 auto;padding:0 12px}
@media(min-width:640px){.container{padding:0 16px}}
@media(min-width:1024px){.container{padding:0 20px}}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{background:var(--nav-bg);position:sticky;top:0;z-index:1000;box-shadow:0 2px 10px rgba(0,0,0,0.3)}
.header-inner{display:flex;align-items:center;height:48px;gap:10px;padding:0 12px}
@media(min-width:1024px){.header-inner{height:56px;padding:0 20px;max-width:var(--container);margin:0 auto}}

/* Logo */
.site-logo{display:flex;align-items:center;flex-shrink:0}
.logo-text{background:var(--primary);color:var(--nav-bg);font-weight:900;font-size:18px;padding:3px 9px;border-radius:5px;letter-spacing:-.5px}
@media(min-width:1024px){.logo-text{font-size:20px}}

/* Desktop nav — hidden on mobile */
.main-nav{display:none}
@media(min-width:1024px){
  .main-nav{display:flex;align-items:center;gap:2px}
  .main-nav>a{color:rgba(255,255,255,.85);font-size:14px;padding:6px 11px;border-radius:var(--radius-sm);transition:var(--transition);white-space:nowrap}
  .main-nav>a:hover,.main-nav>a.active{color:var(--primary)}
}
.hot-tag{background:var(--red);color:#fff;font-size:9px;font-weight:700;padding:1px 4px;border-radius:3px;vertical-align:super;margin-left:1px;line-height:1.4}

/* Search — hidden on mobile */
.header-search{display:none}
@media(min-width:640px){
  .header-search{display:block;flex:1;max-width:220px;margin-left:auto;position:relative}
  .header-search input{width:100%;background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.14);color:#fff;padding:7px 34px 7px 12px;border-radius:16px;font-size:13px;transition:var(--transition)}
  .header-search input::placeholder{color:rgba(255,255,255,.45)}
  .header-search input:focus{outline:none;background:rgba(255,255,255,.17);border-color:var(--primary)}
  .search-btn{position:absolute;right:10px;top:50%;transform:translateY(-50%);color:rgba(255,255,255,.55);font-size:14px}
}

/* Header Actions */
.header-actions{display:flex;align-items:center;gap:10px;margin-left:auto}
@media(min-width:640px){.header-actions{margin-left:0}}
.header-actions a{color:rgba(255,255,255,.85);font-size:13px;white-space:nowrap;transition:var(--transition)}
.header-actions a:hover{color:var(--primary)}
.btn-vip{background:linear-gradient(135deg,#FFD100,#FF8C00);color:var(--nav-bg)!important;font-weight:700;padding:5px 12px;border-radius:14px;font-size:12px}

/* Avatar */
.header-avatar{width:30px;height:30px;border-radius:50%;background:#444;border:2px solid rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.8);font-size:13px;overflow:hidden;flex-shrink:0}
.header-avatar img{width:100%;height:100%;object-fit:cover}

/* Mobile menu button */
.mobile-menu-btn{display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.85);font-size:22px;padding:4px;flex-shrink:0}
@media(min-width:1024px){.mobile-menu-btn{display:none}}

/* hide-mobile / hide-desktop helpers */
.hide-mobile{display:none!important}
@media(min-width:640px){.hide-mobile{display:initial!important}}
.hide-desktop{display:initial}
@media(min-width:1024px){.hide-desktop{display:none!important}}

/* ============================================================
   MOBILE NAV DRAWER
   ============================================================ */
.mobile-nav-overlay{position:fixed;inset:0;z-index:2000;background:rgba(0,0,0,.55);opacity:0;visibility:hidden;transition:.25s ease}
.mobile-nav-overlay.active{opacity:1;visibility:visible}
.mobile-nav{position:absolute;top:0;left:0;bottom:0;width:260px;background:var(--nav-bg);padding:16px 0;overflow-y:auto;transform:translateX(-100%);transition:.28s cubic-bezier(.4,0,.2,1)}
.mobile-nav-overlay.active .mobile-nav{transform:translateX(0)}
.mobile-nav .logo-wrap{padding:0 20px 16px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:8px}
.mobile-nav a{display:block;padding:13px 24px;color:rgba(255,255,255,.82);font-size:15px;border-bottom:1px solid rgba(255,255,255,.05);transition:var(--transition)}
.mobile-nav a:hover{background:rgba(255,255,255,.04);color:var(--primary)}

/* ============================================================
   GENRE SUB-NAV
   ============================================================ */
.genre-nav{background:var(--white);border-bottom:1px solid var(--border);position:sticky;top:48px;z-index:100}
@media(min-width:1024px){.genre-nav{top:56px}}
.genre-nav-inner{display:flex;overflow-x:auto;scrollbar-width:none;padding:0 12px;max-width:var(--container);margin:0 auto}
.genre-nav-inner::-webkit-scrollbar{display:none}
.genre-nav a{padding:10px 12px;font-size:13px;color:var(--text-sec);white-space:nowrap;border-bottom:2px solid transparent;transition:var(--transition);flex-shrink:0}
@media(min-width:640px){.genre-nav a{padding:11px 15px;font-size:14px}}
.genre-nav a:hover{color:var(--primary)}
.genre-nav a.active{color:var(--primary);border-bottom-color:var(--primary);font-weight:700}

/* ============================================================
   FILTER BUTTON + BOTTOM DRAWER
   ============================================================ */
.filter-trigger-bar{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:var(--white);border-bottom:1px solid var(--border)}
@media(min-width:1024px){.filter-trigger-bar{display:none}}/* desktop shows full filter panel */

.btn-filter{display:flex;align-items:center;gap:6px;padding:7px 14px;background:var(--white);border:1.5px solid var(--border);border-radius:20px;font-size:13px;color:var(--text-sec);font-weight:500;transition:var(--transition)}
.btn-filter:hover,.btn-filter.active{border-color:var(--primary);color:var(--primary)}
.btn-filter .filter-count{background:var(--primary);color:var(--nav-bg);font-size:10px;font-weight:700;padding:1px 5px;border-radius:10px}

/* Filter Bottom Drawer */
.filter-drawer-overlay{position:fixed;inset:0;z-index:3000;background:rgba(0,0,0,.5);opacity:0;visibility:hidden;transition:.2s ease}
.filter-drawer-overlay.active{opacity:1;visibility:visible}
.filter-drawer{position:absolute;left:0;right:0;bottom:0;background:var(--white);border-radius:16px 16px 0 0;max-height:80vh;overflow-y:auto;transform:translateY(100%);transition:.3s cubic-bezier(.4,0,.2,1)}
.filter-drawer-overlay.active .filter-drawer{transform:translateY(0)}
.filter-drawer__header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--white);z-index:1}
.filter-drawer__header h3{font-size:16px;font-weight:700}
.filter-drawer__close{font-size:22px;color:var(--text-muted);padding:4px}
.filter-drawer__body{padding:0 0 16px}
.filter-drawer__footer{padding:12px 16px;border-top:1px solid var(--border);display:flex;gap:10px;position:sticky;bottom:0;background:var(--white)}
.btn-reset{flex:1;padding:12px;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-size:14px;font-family:var(--font);color:var(--text-sec);background:var(--white);transition:var(--transition)}
.btn-reset:hover{border-color:var(--primary);color:var(--primary)}
.btn-apply{flex:2;padding:12px;background:var(--primary);color:var(--nav-bg);border-radius:var(--radius-sm);font-size:14px;font-weight:700;font-family:var(--font);border:none;transition:var(--transition)}
.btn-apply:hover{background:var(--primary-hover)}

/* Filter panel — full version for desktop */
.filter-panel{display:none;background:var(--white);border-radius:var(--radius);border:1px solid var(--border);margin-bottom:20px;overflow:hidden}
@media(min-width:1024px){.filter-panel{display:block}}
.filter-row{display:flex;align-items:flex-start;padding:10px 20px;gap:14px;border-bottom:1px solid var(--border)}
.filter-row:last-child{border-bottom:none}
.filter-label{width:42px;flex-shrink:0;font-size:13px;color:var(--text-muted);padding-top:5px}
.filter-opts{display:flex;flex-wrap:wrap;gap:4px}
.filter-opt{padding:4px 12px;border-radius:4px;font-size:13px;cursor:pointer;color:var(--text-sec);transition:var(--transition)}
.filter-opt:hover{color:var(--primary)}
.filter-opt.active{background:var(--primary);color:var(--nav-bg);font-weight:700}

/* Drawer filter rows (same but different padding) */
.drawer-filter-row{padding:12px 16px;border-bottom:1px solid var(--border)}
.drawer-filter-row:last-child{border-bottom:none}
.drawer-filter-label{font-size:12px;color:var(--text-muted);margin-bottom:8px}
.drawer-filter-opts{display:flex;flex-wrap:wrap;gap:6px}
.drawer-filter-opt{padding:6px 14px;border-radius:20px;font-size:13px;border:1px solid var(--border);color:var(--text-sec);cursor:pointer;transition:var(--transition)}
.drawer-filter-opt:hover{border-color:var(--primary);color:var(--primary)}
.drawer-filter-opt.active{background:var(--primary);border-color:var(--primary);color:var(--nav-bg);font-weight:700}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
@media(min-width:640px){.section-head{margin-bottom:16px}}
.section-title{font-size:16px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:8px}
@media(min-width:640px){.section-title{font-size:18px}}
.section-title::before{content:'';display:block;width:4px;height:20px;background:var(--primary);border-radius:2px}
.section-more{font-size:12px;color:var(--text-muted);transition:var(--transition);white-space:nowrap}
.section-more:hover{color:var(--primary)}

/* ============================================================
   MANGA CARD
   ============================================================ */
.manga-card{position:relative}
.manga-card__link{display:block}
.manga-card__cover{position:relative;padding-top:133%;border-radius:var(--radius);overflow:hidden;background:#e8e8e8}
.manga-card__cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .32s ease}
.manga-card__link:hover .manga-card__cover img{transform:scale(1.05)}

.manga-card__badge{position:absolute;top:5px;left:5px;font-size:10px;font-weight:700;padding:2px 6px;border-radius:3px;line-height:1.4}
.badge-yellow{background:var(--primary);color:var(--nav-bg)}
.badge-red{background:var(--red);color:#fff}
.badge-green{background:var(--green);color:#fff}
.badge-gray{background:rgba(0,0,0,.45);color:#fff}

.manga-card__views{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(0,0,0,.65));padding:16px 6px 5px;color:rgba(255,255,255,.92);font-size:11px;display:flex;align-items:center;gap:3px}

.manga-card__info{padding:6px 2px 0}
.manga-card__title{font-size:13px;font-weight:500;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:2px}
.manga-card__meta{font-size:11px;font-weight:700;color:var(--orange)}

/* ============================================================
   MANGA GRID — MOBILE FIRST: 2 columns
   ============================================================ */
.manga-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px 10px}
@media(min-width:480px){.manga-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:768px){.manga-grid{grid-template-columns:repeat(4,1fr);gap:14px 12px}}
@media(min-width:1024px){.manga-grid{grid-template-columns:repeat(5,1fr);gap:16px 14px}}
@media(min-width:1280px){.manga-grid{grid-template-columns:repeat(6,1fr)}}

/* ============================================================
   HERO BANNER — hidden on mobile, visible on desktop
   ============================================================ */
.hero{display:none}
@media(min-width:1024px){
  .hero{display:block;position:relative;overflow:hidden;background:var(--nav-bg);height:320px}
  .hero-slide{position:absolute;inset:0;display:flex;align-items:center;padding:0 60px;opacity:0;transition:opacity .5s ease;pointer-events:none}
  .hero-slide.active{opacity:1;pointer-events:auto}
  .hero-slide__bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:brightness(.38)}
  .hero-slide__content{position:relative;z-index:1;max-width:500px}
  .hero-slide__badge{background:var(--primary);color:var(--nav-bg);font-size:11px;font-weight:700;padding:2px 9px;border-radius:3px;display:inline-block;margin-bottom:12px}
  .hero-slide__title{font-size:28px;font-weight:900;color:#fff;margin-bottom:10px;line-height:1.25}
  .hero-slide__desc{font-size:13px;color:rgba(255,255,255,.68);margin-bottom:22px;line-height:1.7}
  .hero-dots{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);display:flex;gap:7px;z-index:2}
  .hero-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.38);cursor:pointer;transition:var(--transition)}
  .hero-dot.active{background:var(--primary);width:22px;border-radius:4px}
  .hero-arrows{position:absolute;top:50%;transform:translateY(-50%);width:100%;display:flex;justify-content:space-between;padding:0 12px;z-index:2;pointer-events:none}
  .hero-arrow{width:36px;height:36px;border-radius:50%;background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.8);font-size:16px;cursor:pointer;pointer-events:auto;transition:var(--transition)}
  .hero-arrow:hover{background:rgba(0,0,0,.7);color:var(--primary)}
}

/* ============================================================
   TABS
   ============================================================ */
.tab-bar{display:flex;gap:6px;flex-wrap:wrap}
.tab-item{padding:5px 14px;border-radius:20px;font-size:13px;cursor:pointer;border:1px solid var(--border);color:var(--text-sec);transition:var(--transition)}
.tab-item:hover{border-color:var(--primary);color:var(--primary)}
.tab-item.active{background:var(--primary);border-color:var(--primary);color:var(--nav-bg);font-weight:700}

/* ============================================================
   RANKING — hidden on mobile, visible on desktop
   ============================================================ */
.ranking-sidebar{display:none}
@media(min-width:1024px){.ranking-sidebar{display:block}}

/* ============================================================
   RANKING WIDGET
   ============================================================ */
.rank-list{display:flex;flex-direction:column;gap:2px}
.rank-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--radius-sm);transition:var(--transition);cursor:pointer}
.rank-item:hover{background:var(--bg)}
.rank-num{width:20px;height:20px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0}
.rank-1{background:var(--red);color:#fff}
.rank-2{background:var(--orange);color:#fff}
.rank-3{background:var(--primary);color:var(--nav-bg)}
.rank-n{color:var(--text-muted)}
.rank-cover{width:42px;height:56px;border-radius:4px;overflow:hidden;flex-shrink:0;background:var(--border)}
.rank-cover img{width:100%;height:100%;object-fit:cover}
.rank-info{flex:1;min-width:0}
.rank-title{font-size:13px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rank-meta{font-size:11px;color:var(--text-muted);margin-top:2px}
.rank-hot{font-size:11px;color:var(--red)}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 20px;border-radius:var(--radius-sm);font-size:14px;font-weight:500;cursor:pointer;transition:var(--transition);border:none;font-family:var(--font)}
.btn-primary{background:var(--primary);color:var(--nav-bg)}
.btn-primary:hover{background:var(--primary-hover)}
.btn-outline{background:transparent;border:1.5px solid var(--border);color:var(--text)}
.btn-outline:hover{border-color:var(--primary);color:var(--primary)}
.btn-sm{padding:7px 16px;font-size:13px}
.btn-lg{padding:12px 28px;font-size:16px}

/* ============================================================
   PAGINATION
   ============================================================ */
.pagination{display:flex;align-items:center;justify-content:center;gap:5px;padding:24px 0}
.page-btn{min-width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);font-size:14px;border:1px solid var(--border);color:var(--text);transition:var(--transition);background:var(--white)}
.page-btn:hover{border-color:var(--primary);color:var(--primary)}
.page-btn.active{background:var(--primary);border-color:var(--primary);color:var(--nav-bg);font-weight:700}
.page-btn.disabled{color:var(--text-muted);pointer-events:none}

/* ============================================================
   BREADCRUMB
   ============================================================ */
.breadcrumb{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-muted);padding:10px 0;flex-wrap:wrap}
.breadcrumb a{color:var(--text-muted);transition:var(--transition)}
.breadcrumb a:hover{color:var(--primary)}
.breadcrumb .sep{color:var(--border)}

/* ============================================================
   VIP MODAL
   ============================================================ */
.modal-overlay{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.62);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:.22s ease;backdrop-filter:blur(4px);padding:16px}
.modal-overlay.active{opacity:1;visibility:visible}
.vip-modal{background:var(--white);border-radius:var(--radius-lg);width:460px;max-width:100%;overflow:hidden;position:relative;transform:scale(.93) translateY(16px);transition:transform .25s cubic-bezier(.4,0,.2,1);box-shadow:var(--shadow-lg)}
.modal-overlay.active .vip-modal{transform:scale(1) translateY(0)}
.modal-close{position:absolute;top:13px;right:15px;z-index:1;color:rgba(255,255,255,.55);font-size:24px;line-height:1;cursor:pointer;transition:var(--transition)}
.modal-close:hover{color:#fff}
.vip-modal__top{background:linear-gradient(135deg,#1C1C1C,#2E2E2E);padding:24px 24px 20px;text-align:center;position:relative}
.vip-crown{font-size:36px;margin-bottom:6px}
.vip-modal__top h2{color:var(--primary);font-size:19px;font-weight:900;margin-bottom:5px}
.vip-modal__top p{color:rgba(255,255,255,.6);font-size:13px}
.vip-modal__body{padding:18px 20px}
.vip-benefits{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:16px}
.vip-benefit{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--text-sec)}
.vip-benefit::before{content:'✓';color:var(--green);font-weight:900;flex-shrink:0}
.vip-plans{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.vip-plan{border:2px solid var(--border);border-radius:var(--radius);padding:14px 10px;text-align:center;cursor:pointer;transition:var(--transition);position:relative}
.vip-plan:hover{border-color:var(--primary)}
.vip-plan.selected{border-color:var(--primary);background:var(--primary-light)}
.vip-plan__tag{position:absolute;top:-9px;left:50%;transform:translateX(-50%);background:var(--red);color:#fff;font-size:10px;font-weight:700;padding:1px 8px;border-radius:10px;white-space:nowrap}
.vip-plan__name{font-size:12px;color:var(--text-muted);margin-bottom:6px}
.vip-plan__price{font-size:24px;font-weight:900}
.vip-plan__price sub{font-size:13px;font-weight:400}
.vip-plan__save{font-size:11px;color:var(--red);margin-top:3px;min-height:16px}
.vip-modal__cta{width:100%;padding:13px;background:linear-gradient(135deg,#FFD100,#FF8C00);color:var(--nav-bg);font-size:15px;font-weight:900;border-radius:var(--radius-sm);border:none;cursor:pointer;transition:var(--transition);font-family:var(--font)}
.vip-modal__cta:hover{opacity:.9;transform:translateY(-1px)}
.vip-modal__note{text-align:center;font-size:12px;color:var(--text-muted);margin-top:10px}

/* ============================================================
   MANGA DETAIL PAGE
   ============================================================ */

/* Mobile: single column, cover top */
.detail-header{background:var(--white);padding:16px 0;border-bottom:1px solid var(--border)}
.detail-layout{display:flex;flex-direction:column;gap:16px}
.detail-cover{width:140px;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);flex-shrink:0}
.detail-cover img{width:100%;display:block}

/* On tablet+: side-by-side */
@media(min-width:640px){
  .detail-layout{flex-direction:row;gap:24px;align-items:flex-start}
  .detail-cover{width:180px}
}
@media(min-width:1024px){.detail-cover{width:200px}}

.detail-title{font-size:22px;font-weight:900;margin-bottom:6px;line-height:1.25}
@media(min-width:640px){.detail-title{font-size:26px}}
.detail-authors{font-size:13px;color:var(--text-sec);margin-bottom:12px}
.detail-authors a{color:var(--primary)}
.detail-stats{display:flex;gap:14px;font-size:12px;color:var(--text-muted);margin-bottom:12px;flex-wrap:wrap}
@media(min-width:640px){.detail-stats{font-size:13px;gap:20px}}
.detail-stat{display:flex;align-items:center;gap:4px}
.detail-tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.detail-tag{background:var(--bg);color:var(--text-sec);font-size:12px;padding:3px 10px;border-radius:3px}
.detail-desc{font-size:14px;color:var(--text-sec);line-height:1.8;margin-bottom:8px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.detail-desc.expanded{-webkit-line-clamp:unset}
.desc-toggle{color:var(--primary);font-size:13px;cursor:pointer;margin-bottom:16px;display:inline-block}
.detail-actions{display:flex;gap:10px;flex-wrap:wrap}
.detail-actions .btn{flex:1;min-width:110px;font-size:14px;padding:12px 16px}
@media(min-width:640px){.detail-actions .btn{flex:initial;min-width:unset}}

/* ============================================================
   CHAPTER SECTION — compact grid
   ============================================================ */
.chapter-section{background:var(--white);border-radius:var(--radius);margin-top:14px;overflow:hidden;border:1px solid var(--border)}
.chapter-head{padding:13px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}
.chapter-head h2{font-size:15px;font-weight:700}
.chapter-tabs{display:flex;gap:5px;overflow-x:auto;scrollbar-width:none}
.chapter-tabs::-webkit-scrollbar{display:none}
.chapter-tab{padding:4px 11px;border-radius:4px;font-size:12px;cursor:pointer;color:var(--text-muted);border:1px solid var(--border);transition:var(--transition);white-space:nowrap;flex-shrink:0}
.chapter-tab.active{background:var(--primary);border-color:var(--primary);color:var(--nav-bg);font-weight:700}
.chapter-count{font-size:12px;color:var(--text-muted)}

/* Chapter grid — compact buttons */
.chapter-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;padding:12px 14px}
@media(min-width:480px){.chapter-grid{grid-template-columns:repeat(5,1fr)}}
@media(min-width:640px){.chapter-grid{grid-template-columns:repeat(6,1fr);padding:14px 18px}}
@media(min-width:1024px){.chapter-grid{grid-template-columns:repeat(8,1fr)}}

.chapter-item{
  display:flex;align-items:center;justify-content:center;
  padding:8px 4px;border-radius:var(--radius-sm);font-size:12px;
  color:var(--text-sec);transition:var(--transition);cursor:pointer;
  border:1px solid var(--border);text-align:center;gap:2px;
  background:var(--white);line-height:1.3;
}
.chapter-item:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-light)}
.chapter-item.free{border-color:rgba(0,192,88,.3);background:rgba(0,192,88,.04)}
.chapter-item.free:hover{border-color:var(--green);color:var(--green)}
.chapter-item.locked{color:var(--text-muted);background:var(--bg)}
.chapter-item.locked:hover{border-color:var(--primary);color:var(--text-muted);cursor:pointer}
.icon-lock{font-size:10px;opacity:.7}
.icon-fire{font-size:10px;color:var(--red)}

/* VIP unlock banner inside chapter section */
.chapter-vip-banner{background:linear-gradient(135deg,#1a1a1a,#2d2d2d);padding:18px;text-align:center;border-top:1px solid rgba(255,209,0,.2)}
.chapter-vip-banner p{color:rgba(255,255,255,.75);font-size:13px;margin-bottom:12px}
.chapter-vip-banner .btn{font-size:14px;padding:10px 24px}

/* ============================================================
   CONTENT + SIDEBAR LAYOUT
   ============================================================ */
.content-sidebar-layout{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:1024px){.content-sidebar-layout{grid-template-columns:1fr 280px;gap:20px}}
.sidebar{display:none}
@media(min-width:1024px){.sidebar{display:flex;flex-direction:column;gap:14px}}

/* Sidebar blocks */
.sidebar-block{background:var(--white);border-radius:var(--radius);border:1px solid var(--border);overflow:hidden}
.sidebar-block__head{padding:13px 16px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:700}
.sidebar-block__head a{font-size:12px;color:var(--text-muted);font-weight:400}
.sidebar-block__head a:hover{color:var(--primary)}
.sidebar-manga-list{padding:10px 14px;display:flex;flex-direction:column;gap:12px}
.sm-item{display:flex;gap:10px;color:inherit;text-decoration:none}
.sm-cover{width:56px;height:75px;border-radius:4px;overflow:hidden;flex-shrink:0;background:var(--border)}
.sm-cover img{width:100%;height:100%;object-fit:cover}
.sm-info{flex:1;min-width:0}
.sm-title{font-size:13px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:3px}
.sm-author{font-size:12px;color:var(--text-muted);margin-bottom:2px}
.sm-update{font-size:11px;font-weight:700;color:var(--orange)}
.qa-list{padding:8px 14px}
.qa-item{padding:10px 0;border-bottom:1px solid var(--border)}
.qa-item:last-child{border-bottom:none}
.qa-tag{font-size:11px;background:var(--primary-light);color:var(--primary-dark);padding:1px 6px;border-radius:3px;margin-right:4px}
.qa-q{font-size:13px;font-weight:500;margin-bottom:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.qa-a{font-size:12px;color:var(--text-muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ============================================================
   COMMENTS
   ============================================================ */
.comments-section{background:var(--white);border-radius:var(--radius);margin-top:14px;border:1px solid var(--border);overflow:hidden}
.comments-head{padding:13px 16px;border-bottom:1px solid var(--border);font-size:15px;font-weight:700}
.comment-item{display:flex;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border)}
.comment-item:last-child{border-bottom:none}
.c-avatar{width:34px;height:34px;border-radius:50%;flex-shrink:0;background:var(--bg);overflow:hidden}
.c-avatar img{width:100%;height:100%;object-fit:cover}
.c-body{flex:1}
.c-header{display:flex;align-items:center;gap:7px;margin-bottom:3px;flex-wrap:wrap}
.c-name{font-size:13px;font-weight:700}
.c-date{font-size:12px;color:var(--text-muted)}
.c-text{font-size:13px;color:var(--text-sec);line-height:1.7}
.c-footer{display:flex;align-items:center;gap:12px;margin-top:7px}
.c-like,.c-reply{display:flex;align-items:center;gap:3px;font-size:12px;color:var(--text-muted);cursor:pointer;transition:var(--transition)}
.c-like:hover,.c-reply:hover{color:var(--primary)}

/* ============================================================
   READER PAGE
   ============================================================ */
.reader-page{background:#111;min-height:100vh}
.reader-header{position:fixed;top:0;left:0;right:0;z-index:200;height:48px;background:rgba(0,0,0,.92);border-bottom:1px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:12px;padding:0 14px}
.reader-title{color:rgba(255,255,255,.75);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.reader-progress-bar{position:fixed;top:48px;left:0;right:0;height:3px;z-index:200;background:rgba(255,255,255,.08)}
.reader-progress-fill{height:100%;background:var(--primary);width:0%;transition:width .1s linear}
.reader-nav{display:flex;align-items:center;gap:7px}
.reader-nav select{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.18);padding:5px 8px;border-radius:4px;font-size:12px;font-family:var(--font)}
.reader-nav-btn{color:rgba(255,255,255,.7);font-size:12px;padding:5px 10px;border-radius:4px;border:1px solid rgba(255,255,255,.18);transition:var(--transition);white-space:nowrap}
.reader-nav-btn:hover{border-color:var(--primary);color:var(--primary)}
.reader-content{max-width:800px;margin:0 auto;padding:51px 0 70px}
.reader-chapter-label{text-align:center;padding:20px 0 4px;color:rgba(255,255,255,.35);font-size:12px;border-top:1px solid rgba(255,255,255,.07)}
.reader-img{width:100%;display:block;background:#222;min-height:100px}
.reader-toolbar{position:fixed;right:14px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:7px;z-index:150}
.toolbar-btn{width:46px;height:46px;border-radius:50%;background:rgba(40,40,40,.92);border:1px solid rgba(255,255,255,.12);display:flex;flex-direction:column;align-items:center;justify-content:center;color:rgba(255,255,255,.75);font-size:10px;gap:2px;cursor:pointer;transition:var(--transition)}
.toolbar-btn:hover{background:rgba(60,60,60,.95);color:var(--primary);border-color:var(--primary)}
.toolbar-icon{font-size:16px}

/* Reader lock */
.reader-lock-wrap{position:relative;background:#111}
.reader-lock-blur{max-height:160px;overflow:hidden;filter:blur(10px) brightness(.5);pointer-events:none;user-select:none}
.reader-lock-blur img{width:100%}
.reader-lock-panel{position:absolute;inset:0;background:linear-gradient(transparent,rgba(17,17,17,.9) 35%,#111 58%);display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:0 20px 36px;text-align:center}
.lock-badge{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:20px;padding:4px 14px;font-size:12px;color:rgba(255,255,255,.6);margin-bottom:14px}
.reader-lock-panel h2{color:#fff;font-size:20px;font-weight:900;margin-bottom:6px}
.reader-lock-panel p{color:rgba(255,255,255,.6);font-size:13px;margin-bottom:18px;line-height:1.6}
.lock-plan-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:18px}
.lock-plan{background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.15);border-radius:var(--radius);padding:12px 18px;text-align:center;cursor:pointer;transition:var(--transition);min-width:120px;position:relative}
.lock-plan.featured{border-color:var(--primary);background:rgba(255,209,0,.08)}
.lock-plan__tag{position:absolute;top:-9px;left:50%;transform:translateX(-50%);background:var(--red);color:#fff;font-size:10px;font-weight:700;padding:2px 8px;border-radius:10px;white-space:nowrap}
.lock-plan__name{color:rgba(255,255,255,.55);font-size:12px;margin-bottom:5px}
.lock-plan__price{color:#fff;font-size:20px;font-weight:900}
.lock-plan__price sub{font-size:12px;font-weight:400}
.lock-plan__save{color:var(--red);font-size:11px;margin-top:3px}
.btn-unlock-vip{background:linear-gradient(135deg,#FFD100,#FF8C00);color:var(--nav-bg);font-size:15px;font-weight:900;padding:13px 36px;border-radius:var(--radius-sm);border:none;cursor:pointer;font-family:var(--font);transition:var(--transition)}
.btn-unlock-vip:hover{opacity:.9;transform:translateY(-1px)}
.lock-note{color:rgba(255,255,255,.35);font-size:12px;margin-top:10px}

/* ============================================================
   AUTH PAGES
   ============================================================ */
.auth-page{min-height:100vh;background:linear-gradient(135deg,#f5f5f5,#fffbe5);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 16px;position:relative;overflow:hidden}
.auth-page::before{content:'';position:absolute;top:-120px;right:-120px;width:350px;height:350px;border-radius:50%;background:rgba(255,209,0,.07);pointer-events:none}
.auth-card{background:var(--white);border-radius:var(--radius-lg);width:100%;max-width:420px;padding:32px 24px;box-shadow:var(--shadow-lg);position:relative;z-index:1}
@media(min-width:640px){.auth-card{padding:40px}}
.auth-logo{text-align:center;margin-bottom:22px}
.auth-title{font-size:20px;font-weight:900;text-align:center;margin-bottom:5px}
.auth-subtitle{font-size:13px;color:var(--text-muted);text-align:center;margin-bottom:24px}
.form-group{margin-bottom:14px}
.form-label{display:block;font-size:13px;font-weight:500;margin-bottom:5px;color:var(--text-sec)}
.form-control{width:100%;padding:11px 13px;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-size:14px;background:var(--bg);transition:var(--transition)}
.form-control:focus{outline:none;border-color:var(--primary);background:var(--white);box-shadow:0 0 0 3px rgba(255,209,0,.13)}
.form-control::placeholder{color:var(--text-muted)}
.form-error{font-size:12px;color:var(--red);margin-top:4px;display:none}
.form-control.error+.form-error{display:block}
.form-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.form-check{display:flex;align-items:flex-start;gap:8px;font-size:13px;color:var(--text-sec);cursor:pointer}
.form-check input[type="checkbox"]{accent-color:var(--primary);margin-top:2px;flex-shrink:0}
.form-check a{color:var(--primary)}
.auth-link{font-size:13px;color:var(--primary)}
.auth-link:hover{text-decoration:underline}
.auth-submit{width:100%;padding:13px;background:var(--primary);color:var(--nav-bg);font-size:15px;font-weight:900;border:none;border-radius:var(--radius-sm);cursor:pointer;font-family:var(--font);margin-top:8px;transition:var(--transition)}
.auth-submit:hover{background:var(--primary-hover)}
.auth-divider{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--text-muted);margin:18px 0}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:var(--border)}
.social-btns{display:grid;grid-template-columns:1fr;gap:10px}
.social-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:11px;border-radius:var(--radius-sm);border:1.5px solid var(--border);font-size:14px;cursor:pointer;transition:var(--transition);background:var(--white);font-family:var(--font)}
.social-btn:hover{border-color:#dadce0;background:#f8f9fa;box-shadow:0 1px 3px rgba(0,0,0,.1)}
.auth-footer{text-align:center;font-size:13px;color:var(--text-muted);margin-top:20px}
.auth-footer a{color:var(--primary);font-weight:700}
.password-field{position:relative}
.password-toggle{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--text-muted);cursor:pointer;font-size:15px}
.input-icon-group{position:relative}
.input-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text-muted);font-size:14px;pointer-events:none}
.input-icon~.form-control{padding-left:34px}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{background:var(--nav-bg);color:rgba(255,255,255,.55);padding:32px 0 0;margin-top:40px}
.footer-grid{display:grid;grid-template-columns:1fr;gap:24px;padding-bottom:28px}
@media(min-width:640px){.footer-grid{grid-template-columns:200px 1fr}}
.footer-brand .logo-text{font-size:20px;display:inline-block;margin-bottom:12px}
.footer-brand p{font-size:12px;line-height:1.9;color:rgba(255,255,255,.4);max-width:220px}
.footer-socials{display:flex;gap:10px;margin-top:12px}
.footer-social-icon{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.5);font-size:15px;transition:var(--transition)}
.footer-social-icon:hover{background:var(--primary);color:var(--nav-bg)}
.footer-links-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media(min-width:640px){.footer-links-grid{grid-template-columns:repeat(4,1fr)}}
.footer-col h4{color:rgba(255,255,255,.88);font-size:13px;font-weight:700;margin-bottom:12px}
.footer-col a{display:block;color:rgba(255,255,255,.45);font-size:12px;margin-bottom:8px;transition:var(--transition)}
.footer-col a:hover{color:var(--primary)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding:14px 0;text-align:center;font-size:12px;color:rgba(255,255,255,.3)}
.footer-bottom a{color:rgba(255,255,255,.35);margin:0 5px;transition:var(--transition)}
.footer-bottom a:hover{color:var(--primary)}

/* ============================================================
   SECTION SPACING
   ============================================================ */
.section{padding:20px 0}
@media(min-width:640px){.section{padding:28px 0}}
.section-inner{background:var(--white);border-radius:var(--radius);padding:16px;border:1px solid var(--border)}

/* ============================================================
   UTILITY
   ============================================================ */
.chapter-update{color:var(--orange)!important;font-size:11px!important;font-weight:700!important}
.badge-tag{display:inline-block;font-size:11px;font-weight:700;padding:2px 7px;border-radius:3px;line-height:1.5}
.bt-yellow{background:var(--primary);color:var(--nav-bg)}
.bt-red{background:var(--red);color:#fff}
.ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.text-muted{color:var(--text-muted)}
.text-orange{color:var(--orange)}