:root{
  --bg:#F7F8FC; --surface:#FFFFFF; --line:#EDEEF3; --text:#1A1D29; --muted:#8A8FA3;
  --accent:#5B5FEF; --accent-soft:#EEEEFD; --gold:#F5A623;
  --shadow:0 1px 2px rgba(20,20,43,0.04), 0 4px 12px rgba(20,20,43,0.05);
}
html[data-theme="dark"]{
  --bg:#0F1015; --surface:#191A22; --line:#26272F; --text:#EDEDF2; --muted:#8B8D9B;
  --accent:#7B7FFF; --accent-soft:#232342; --gold:#FFC857;
  --shadow:0 1px 2px rgba(0,0,0,0.3), 0 4px 14px rgba(0,0,0,0.35);
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  background:var(--bg); color:var(--text); font-family:'Inter',sans-serif;
  min-height:100vh; -webkit-font-smoothing:antialiased; padding-bottom:70px;
}
a{color:inherit; text-decoration:none;}

header{position:sticky; top:0; z-index:50; background:var(--bg); padding:16px 18px 12px; border-bottom:1px solid var(--line);}
.header-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;}
.logo{font-size:19px; font-weight:800; letter-spacing:-0.02em; display:flex; align-items:center; gap:7px; cursor:pointer;}
.logo-dot{width:9px; height:9px; border-radius:3px; background:var(--accent);}
.theme-btn{width:36px; height:36px; border-radius:50%; background:var(--surface); box-shadow:var(--shadow); display:flex; align-items:center; justify-content:center; cursor:pointer; border:none;}
.theme-btn svg{width:18px; height:18px; stroke:var(--text); fill:none;}
.search-wrap{position:relative; display:block;}
.search-wrap input{width:100%; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:11px 14px 11px 38px; color:var(--text); font-size:14.5px; outline:none; box-shadow:var(--shadow);}
.search-wrap input:focus{border-color:var(--accent);}
.search-wrap input::placeholder{color:var(--muted);}
.search-wrap svg{position:absolute; left:12px; top:50%; transform:translateY(-50%); width:17px; height:17px; stroke:var(--muted);}

.hero-carousel{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; margin:16px 0 8px;}
.hero-carousel::-webkit-scrollbar{display:none;}
.hero-slide{flex:0 0 100%; scroll-snap-align:start; padding:0 18px;}
.hero{border-radius:20px; overflow:hidden; position:relative; aspect-ratio:16/9; box-shadow:var(--shadow); background:var(--line); display:block;}
.hero img{width:100%; height:100%; object-fit:cover; display:block;}
.hero-overlay{position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.75) 100%); display:flex; flex-direction:column; justify-content:flex-end; padding:16px;}
.hero-tag{align-self:flex-start; background:var(--accent); color:#fff; font-size:10.5px; font-weight:700; padding:4px 10px; border-radius:20px; margin-bottom:8px; text-transform:uppercase;}
.hero-title{color:#fff; font-size:18px; font-weight:800; line-height:1.25;}
.hero-meta{color:rgba(255,255,255,0.85); font-size:12.5px; margin-top:4px; display:flex; align-items:center; gap:4px;}
.hero-meta svg{width:13px; height:13px; fill:var(--gold);}
.hero-dots{display:flex; justify-content:center; gap:5px; margin:8px 0 4px;}
.hero-dots span{width:6px; height:6px; border-radius:50%; background:var(--line);}
.hero-dots span.active{background:var(--accent); width:16px; border-radius:4px;}

.section-head{display:flex; align-items:center; justify-content:space-between; padding:22px 18px 12px;}
.section-head h2{font-size:16.5px; font-weight:700; letter-spacing:-0.01em;}

.carousel{display:flex; gap:12px; overflow-x:auto; padding:0 18px 6px;}
.carousel::-webkit-scrollbar{display:none;}
.carousel .card{flex:0 0 128px;}
.continue-card{flex:0 0 128px; display:block;}
.continue-card .thumb-wrap{width:100%; aspect-ratio:3/4; border-radius:14px; overflow:hidden; box-shadow:var(--shadow); position:relative; background:var(--line);}
.continue-card img{width:100%; height:100%; object-fit:cover;}
.continue-card .progress-bar{height:4px; background:var(--line); border-radius:3px; margin-top:8px; overflow:hidden;}
.continue-card .progress-fill{height:100%; background:var(--accent);}
.continue-card .cname{font-size:12px; font-weight:600; margin-top:6px; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.continue-card .cprog{font-size:11px; color:var(--muted); margin-top:2px;}

.grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:14px; padding:0 18px 20px;}
.card{background:var(--surface); border-radius:16px; overflow:hidden; box-shadow:var(--shadow); display:block;}
.card .thumb-wrap{position:relative; width:100%; aspect-ratio:3/4; background:var(--line);}
.card .thumb{width:100%; height:100%; object-fit:cover; display:block;}
.badge{position:absolute; top:8px; left:8px; font-size:10px; font-weight:700; padding:3px 8px; border-radius:7px; background:rgba(255,255,255,0.92); color:#1A1D29; text-transform:uppercase;}
.badge-hot{position:absolute; top:8px; right:8px; background:#FF4757; color:white; font-size:10px; font-weight:700; padding:3px 7px; border-radius:7px;}
.card .info{padding:10px 11px 12px;}
.card .title{font-size:13px; font-weight:600; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.card .meta-row{margin-top:7px; display:flex; align-items:center; justify-content:space-between; font-size:11.5px; color:var(--muted);}
.card .rating{display:flex; align-items:center; gap:3px; color:var(--gold); font-weight:600;}
.card .rating svg{width:12px; height:12px; fill:var(--gold);}
.card .chapter-pill{background:var(--accent-soft); color:var(--accent); padding:2px 8px; border-radius:20px; font-weight:600; font-size:10.5px;}

.state-msg{padding:50px 18px; text-align:center; color:var(--muted); font-size:14px;}

.bottom-nav{position:fixed; bottom:0; left:0; right:0; z-index:60; background:var(--surface); border-top:1px solid var(--line); display:flex; padding:8px 6px calc(8px + env(safe-area-inset-bottom));}
.nav-item{flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; cursor:pointer; color:var(--muted); padding:4px;}
.nav-item.active{color:var(--accent);}
.nav-item svg{width:21px; height:21px; stroke:currentColor; fill:none;}
.nav-item span{font-size:10.5px; font-weight:600;}

.back-btn{position:fixed; top:14px; left:14px; z-index:110; width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,0.9); box-shadow:var(--shadow); display:flex; align-items:center; justify-content:center; cursor:pointer;}
.back-btn svg{width:19px; height:19px; stroke:#1A1D29;}
.detail-backdrop{position:relative; height:260px; overflow:hidden;}
.detail-backdrop img{width:100%; height:100%; object-fit:cover; filter:blur(20px) brightness(0.45); transform:scale(1.2);}
.detail-overlay-content{position:absolute; inset:0; display:flex; align-items:flex-end; padding:18px; gap:14px;}
.detail-cover{width:100px; aspect-ratio:3/4; border-radius:12px; object-fit:cover; flex-shrink:0; box-shadow:0 4px 20px rgba(0,0,0,0.4); border:2px solid rgba(255,255,255,0.2);}
.detail-title{font-size:17px; font-weight:800; line-height:1.25; color:#fff;}
.detail-latest{font-size:12px; color:rgba(255,255,255,0.7); margin-top:6px;}
.detail-stats-row{display:flex; align-items:center; gap:12px; margin-top:8px; flex-wrap:wrap;}
.stat-chip{display:flex; align-items:center; gap:4px; font-size:12px; font-weight:600; color:#fff;}
.stat-chip svg{width:13px; height:13px;}
.stat-chip.rating svg{fill:var(--gold);}
.status-pill{background:var(--accent); color:#fff; font-size:10.5px; font-weight:700; padding:3px 10px; border-radius:20px;}
.detail-tags{display:flex; flex-wrap:wrap; gap:6px; padding:16px 18px 0;}
.tag{font-size:11px; padding:4px 10px; border-radius:20px; background:var(--surface); color:var(--muted); font-weight:500; box-shadow:var(--shadow);}

.update-info-row{display:flex; margin:16px 18px 0; background:var(--surface); border-radius:14px; box-shadow:var(--shadow); overflow:hidden;}
.update-info-col{flex:1; padding:12px 14px; text-align:center;}
.update-info-col:first-child{border-right:1px solid var(--line);}
.update-info-col .lbl{font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:0.03em;}
.update-info-col .val{font-size:13px; font-weight:700; margin-top:3px;}

.see-all-chapter-btn{
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin:16px 18px 0; padding:13px; border-radius:24px; border:1.5px solid var(--accent);
  color:var(--accent); font-weight:700; font-size:13.5px; cursor:pointer; background:transparent;
}
.see-all-chapter-btn svg{width:16px; height:16px; stroke:var(--accent);}

.detail-syn-head{padding:20px 18px 6px; font-size:15px; font-weight:800;}
.detail-syn{padding:0 18px 90px; font-size:13.5px; line-height:1.7; color:var(--muted);}

.continue-bar{
  position:fixed; bottom:0; left:0; right:0; z-index:105;
  padding:14px 18px calc(14px + env(safe-area-inset-bottom)); background:var(--surface);
  border-top:1px solid var(--line);
}
.continue-bar button, .continue-bar a.btn-fill{
  display:block; width:100%; height:48px; line-height:48px; text-align:center; border-radius:24px;
  background:var(--accent); color:#fff; font-weight:700; font-size:14px; border:none; cursor:pointer;
}

.chapter-panel-header{position:sticky; top:0; z-index:5; background:var(--accent); color:#fff; padding:16px 18px; display:flex; align-items:center; gap:14px;}
.chapter-panel-header .cp-back{cursor:pointer;}
.chapter-panel-header .cp-back svg{width:20px; height:20px; stroke:#fff;}
.chapter-panel-header h3{font-size:16px; font-weight:700;}
.chapter-panel-sort{display:flex; justify-content:flex-end; gap:10px; padding:14px 18px 8px; font-size:13px; font-weight:600;}
.cp-sort-opt{color:var(--muted); display:inline-block;}
.cp-sort-opt.active{color:var(--accent);}
.cp-sort-divider{color:var(--line);}
.chapter-panel-search{padding:0 18px 14px;}
.chapter-panel-search input{width:100%; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:11px 14px; font-size:13.5px; color:var(--text); outline:none;}
.cp-list{padding:0 18px 30px;}
.cp-item{display:flex; align-items:center; gap:12px; padding:10px; margin-bottom:8px; background:var(--surface); border-radius:12px; box-shadow:var(--shadow);}
.cp-item img{width:44px; height:58px; object-fit:cover; border-radius:8px; background:var(--line);}
.cp-item .cp-num{font-size:13.5px; font-weight:700;}
.cp-item .cp-date{font-size:11.5px; color:var(--muted); margin-top:2px;}

#reader{position:relative; background:#000; min-height:100vh;}
.reader-topbar, .reader-bottombar{
  position:fixed; left:0; right:0; z-index:210; transition:transform .2s, opacity .2s;
  background:rgba(15,15,20,0.92);
}
.reader-topbar{top:0; padding:12px 14px; display:flex; align-items:center; gap:12px;}
.reader-topbar.hidden{transform:translateY(-100%); opacity:0;}
.reader-topbar .rt-back{width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,0.1); display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;}
.reader-topbar .rt-back svg{width:18px; height:18px; stroke:#fff;}
.reader-topbar .rt-titles{flex:1; overflow:hidden;}
.reader-topbar .rt-manga-title{font-size:11.5px; color:rgba(255,255,255,0.6); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.reader-topbar .rt-chapter{font-size:14.5px; font-weight:700; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.reader-topbar .rt-icon{width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,0.1); display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;}
.reader-topbar .rt-icon svg{width:16px; height:16px; stroke:#fff;}

.reader-bottombar{bottom:0; padding:12px 14px calc(12px + env(safe-area-inset-bottom)); display:flex; align-items:center; justify-content:space-between; gap:10px;}
.reader-bottombar.hidden{transform:translateY(100%); opacity:0;}
.rb-nav-btn{flex:1; display:flex; align-items:center; justify-content:center; gap:6px; padding:11px 8px; border-radius:12px; background:rgba(255,255,255,0.08); color:#fff; font-size:12.5px; font-weight:600; cursor:pointer; border:none;}
.rb-nav-btn svg{width:14px; height:14px; stroke:#fff;}
.rb-nav-btn.disabled{opacity:0.3; pointer-events:none;}
.rb-chapters-btn{width:44px; height:44px; border-radius:12px; background:rgba(255,255,255,0.08); display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;}
.rb-chapters-btn svg{width:18px; height:18px; stroke:#fff;}

#readerContent img{width:100%; display:block;}
.reader-loading{padding:90px 20px; text-align:center; color:#999; font-size:13px;}

.settings-group{margin:0 18px 18px; background:var(--surface); border-radius:16px; box-shadow:var(--shadow); overflow:hidden;}
.settings-row{display:flex; align-items:center; justify-content:space-between; padding:14px 16px; font-size:13.5px; font-weight:600; border-bottom:1px solid var(--line);}
.settings-row:last-child{border-bottom:none;}
.settings-row .val{color:var(--muted); font-weight:500; font-size:12.5px;}
.settings-row.danger{color:#FF4757; cursor:pointer; background:none; border:none; width:100%; text-align:left; font-family:inherit;}
.about-box{margin:0 18px 30px; padding:18px; background:var(--surface); border-radius:16px; box-shadow:var(--shadow); text-align:center;}
.about-box .app-name{font-size:16px; font-weight:800; margin-bottom:10px;}
.about-box .line{font-size:12.5px; color:var(--muted); line-height:1.9;}
.about-box .line b{color:var(--text);}