:root {
  --bg-color: #f4f4f4;
  --text-color: #333;
  --card-bg: #fff;
  --primary-color: #1E90FF;
}
body.dark {
  --bg-color: #121212;
  --text-color: #f4f4f4;
  --card-bg: #1e1e1e;
  --primary-color: #1E90FF;
}
body { font-family: Arial, sans-serif; margin:0; background-color: var(--bg-color); color: var(--text-color); scroll-behavior: smooth; }
header { background-color: var(--primary-color); color: white; padding:1rem; display:flex; justify-content:space-between; align-items:center; position:sticky; top:0; z-index:100; }
header h1{margin:0;} header p{margin:0; font-size:0.9rem;}
#theme-toggle{background:none; border:none; color:white; font-size:1.2rem; cursor:pointer;}
#progress-bar-container{position:sticky; top:60px; width:100%; height:4px; background-color: rgba(0,0,0,0.1); z-index:90;}
#progress-bar{width:0%; height:100%; background-color:var(--primary-color); transition: width 0.1s ease-out;}
#floating-title{position:fixed; top:60px; left:50%; transform:translateX(-50%); background-color:rgba(0,0,0,0.7); color:white; padding:0.3rem 1rem; border-radius:20px; font-size:1rem; z-index:100;}
#floating-title.hidden{display:none;}
#main-content{padding:1rem;}
.comic-card{background-color: var(--card-bg); border-radius:10px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,0.1); cursor:pointer; margin-bottom:1rem; transition: transform 0.2s;}
.comic-card:hover{transform:scale(1.02);}
.comic-card img{width:100%; height:auto;}
.comic-card h2{padding:0.5rem; font-size:1.1rem;}
.chapter-btn{display:block; width:100%; margin:0.5rem 0; padding:0.8rem; background-color:var(--primary-color); color:white; border:none; border-radius:8px; cursor:pointer; font-size:1rem; text-align:left;}
.chapter-btn:hover{background-color:#187bcd;}
img.chapter-image{width:100%; margin-bottom:1rem; border-radius:5px;}