*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Segoe UI',system-ui,sans-serif;background:#071233;color:#eef2ff;line-height:1.6}
a{color:#f5c542;text-decoration:none}
header{display:flex;justify-content:space-between;align-items:center;padding:10px 18px;background:#0a1a42;border-bottom:2px solid #c9a227;position:sticky;top:0;z-index:9}
.brand{display:flex;align-items:center;gap:10px;color:#fff}
.brand img{width:52px;height:52px;border-radius:12px}
.brand strong{display:block;font-size:20px;line-height:1.1}
.brand small{color:#f5c542;letter-spacing:3px;font-weight:700}
nav a{margin-left:16px;color:#eef2ff;font-weight:600}
main{max-width:1150px;margin:0 auto;padding:20px 14px 40px}
.hero{text-align:center;padding:28px 10px 10px}
.hero img{width:170px;height:170px;border-radius:26px;box-shadow:0 10px 40px rgba(245,197,66,.35)}
.hero h1{font-size:36px;margin-top:14px}
.hero h1 span{color:#f5c542}
.hero p{color:#c7d2fe}
.search{margin:16px auto;max-width:480px;display:flex;gap:8px}
.search input{flex:1;padding:12px;border-radius:10px;border:1px solid #33477e;background:#0d2050;color:#fff;font-size:16px}
.search button{padding:12px 20px;border:0;border-radius:10px;background:#b8860b;color:#fff;font-weight:700;cursor:pointer}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;margin-top:18px}
.card{background:#0d2050;border:1px solid #26386e;border-radius:16px;overflow:hidden}
.card img{width:100%;height:300px;object-fit:contain;background:#0a1a42;padding:10px}
.card-body{padding:14px 16px 18px}
.cat{color:#f5c542;font-size:13px;font-weight:700}
.card h2{font-size:20px;margin:6px 0}
.card h2 a{color:#fff}
.card p{color:#c7d2fe;font-size:14px}
.btns{display:flex;gap:8px;margin:14px 0 8px;flex-wrap:wrap}
.btn{padding:10px 14px;border-radius:9px;font-weight:700;color:#fff}
.btn.read{background:#1d4ed8}.btn.dl{background:#15803d}
.btns.big .btn{font-size:17px;padding:13px 20px}
.wa{font-size:14px}
.detail{display:flex;gap:26px;flex-wrap:wrap;margin-top:10px}
.detail .cover{width:300px;max-width:100%;border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,.5)}
.detail h1{font-size:30px;margin:6px 0}
.author{color:#c7d2fe}
.share{display:flex;gap:14px;margin:10px 0}
.page{background:#0d2050;border:1px solid #26386e;border-radius:16px;padding:24px}
.page h1{margin-bottom:12px}
.reader-head{text-align:center;margin-bottom:12px}
.reader{width:100%;height:82vh;border:1px solid #26386e;border-radius:12px;background:#fff}
.none{text-align:center;padding:40px;color:#c7d2fe}
footer{text-align:center;padding:26px 14px;border-top:2px solid #c9a227;background:#0a1a42;color:#c7d2fe}
footer img{width:64px;border-radius:14px}
.copy{font-size:13px;margin-top:6px}
@media(max-width:640px){.hero h1{font-size:27px}nav a{margin-left:9px;font-size:14px}.card img{height:260px}}