:root{
  --bg1:#05070d; --bg2:#0a1122; --bg3:#0b1328;
  --txt:#eaf0ff; --muted:#a7b1d6; --stroke:rgba(255,255,255,.12);
  --glass:rgba(255,255,255,.06); --accent:#b9c8ff;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;color:var(--txt);font-family:"Scheherazade New",system-ui,-apple-system,"Segoe UI",Tahoma,Arial;
  background:radial-gradient(1100px 680px at 50% -10%, var(--bg3), var(--bg2) 45%, var(--bg1) 100%);
  overflow-x:hidden;overflow-y:auto;padding:20px;
}
.header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.brand{display:flex;align-items:center;gap:12px}
.brand h1{margin:0;font-size:20px}
.actions{display:flex;gap:10px;align-items:center}
.btn{background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));color:var(--txt);padding:10px 14px;border-radius:12px;border:1px solid var(--stroke);cursor:pointer}
.container{display:flex;flex-direction:column;gap:18px}
.covers-row {display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden; padding-bottom: 8px; -ms-overflow-style: none; scrollbar-width: none;}
.covers-row::-webkit-scrollbar {display: none;}
.card{min-width:180px;background:linear-gradient(180deg, rgba(8,12,22,.55), rgba(8,12,22,.38));border-radius:12px;padding:12px;border:1px solid var(--stroke);box-shadow:0 10px 30px rgba(0,0,0,.45);flex:0 0 auto}
.cover{width:156px;height:220px;border-radius:8px;object-fit:cover;background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));display:block;margin:0 auto}
.manga-title{text-align:center;margin-top:8px;color:var(--accent);font-weight:700}
.empty{color:var(--muted);text-align:center;padding:40px;border:1px dashed rgba(255,255,255,0.04);border-radius:12px}
.chapters-panel{background:linear-gradient(180deg, rgba(8,12,22,.45), rgba(8,12,22,.30));padding:14px;border-radius:12px;border:1px solid var(--stroke)}
.chapter-item{display:flex;justify-content:space-between;align-items:center;padding:10px;border-bottom:1px solid rgba(255,255,255,0.03)}
.chapter-item:last-child{border-bottom:0}
.chapter-title{font-weight:700}
.reader{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:linear-gradient(180deg, rgba(6,10,18,.88), rgba(6,10,18,.94));z-index:9999}
.reader.show{display:flex}
.reader-box{width:min(920px,96vw);height:min(84vh,820px);background:linear-gradient(180deg, rgba(8,12,22,.95), rgba(8,12,22,.92));border-radius:12px;padding:12px;border:1px solid var(--stroke);display:grid;grid-template-rows:40px 1fr 64px}
.reader-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px}
.reader-stage{display:grid;place-items:center;overflow:hidden;background:#06080f;border-radius:8px}
.reader-img{max-width:100%;max-height:100%;object-fit:contain;image-rendering:auto;}
.reader-controls{display:flex;gap:10px;align-items:center;justify-content:center;padding:8px}
.small{font-size:13px;color:var(--muted)}
.scrollable-col{max-height:60vh;overflow:auto;padding-right:8px}
.search-row{display:flex;gap:8px;align-items:center}
.badge{display:inline-block;padding:6px 8px;border-radius:999px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.04);color:var(--muted)}
@media (max-width:720px){ .cover{width:120px;height:170px} .card{min-width:140px} .reader-box{width:94vw;height:86vh} }
* {
  font-family: "Scheherazade New", system-ui, -apple-system, "Segoe UI", Tahoma, Arial !important;
  
}
*{
  user-select: none;
}
footer a {
  color: inherit;
  text-decoration: none;
}
footer a:hover {
  text-decoration: underline;
}