/* styles.css */
* { box-sizing: border-box; }
html,body { height:100%; margin:0; font-family: "Merriweather", serif; color: #2c3e50; background: #f8f9fa; }
body[data-theme="dark"]{ background:#1a1a1a; color: #ecf0f1; }
.topbar{ display:flex; align-items:center; justify-content:space-between; padding:12px 20px; background:rgba(255,255,255,0.6); backdrop-filter: blur(6px); border-bottom:1px solid rgba(44,62,80,0.06); position:sticky; top:0; z-index:20; }
.brand a { font-family: "Roboto", sans-serif; font-weight:700; font-size:1.1rem; text-decoration:none; color:inherit; }
.nav-actions { display:flex; align-items:center; gap:10px; }
.btn { font-family: "Roboto", sans-serif; font-size:0.95rem; padding:8px 12px; border-radius:8px; border:0; cursor:pointer; background:transparent; transition: transform .12s ease, box-shadow .12s ease; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.08); }
.btn.primary { background: linear-gradient(180deg,#3498db,#2b86d6); color:white; }
.btn.subtle { opacity:0.85; border:1px solid rgba(44,62,80,0.06); padding:7px 10px; border-radius:6px; }
.search-wrap { position:relative; display:flex; align-items:center; gap:8px; }
.search-input { width:220px; padding:8px 10px; border-radius:10px; border:1px solid rgba(44,62,80,0.08); font-size:0.95rem; outline:none; }
.dropdown { position:relative; }
.dropdown-menu { position:absolute; right:0; top:110%; background:var(--menu-bg,#fff); border-radius:10px; padding:8px; min-width:220px; box-shadow:0 10px 30px rgba(0,0,0,0.08); display:none; max-height:300px; overflow:auto; }
.container{ display:grid; grid-template-columns: 280px 1fr; gap:24px; max-width:1100px; margin:28px auto; padding:0 18px; }
.sidepanel{ display:flex; flex-direction:column; gap:18px; }
.chapter-container{ background: linear-gradient(180deg, rgba(255,255,255,0.7), rgba(255,255,255,0.5)); padding:28px; border-radius:12px; box-shadow:0 10px 40px rgba(2,6,23,0.04); min-height:60vh; overflow:auto; }
.chapter-cover { width:100%; max-height:320px; object-fit:cover; border-radius:10px; margin-bottom:14px; box-shadow: 0 8px 30px rgba(0,0,0,0.08); }
.content .chapter-body { line-height:1.6; font-size:1.05rem; font-family: "Merriweather", serif; white-space:pre-wrap; }
.reader-controls { display:flex; gap:12px; margin-top:18px; align-items:center; }
.toc-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:6px; }
.search-results { position:absolute; top:140%; left:0; right:0; z-index:30; background:white; border-radius:8px; padding:8px; box-shadow: 0 10px 30px rgba(0,0,0,0.08); display:none; }
.search-results.show { display:block; max-height:240px; overflow:auto; }
.footer { text-align:center; padding:18px; opacity:0.8; font-size:0.95rem; }
@media (max-width:900px){ .container{ grid-template-columns: 1fr; padding:0 12px; } .sidepanel{ order:2; display:flex; flex-direction:row; gap:12px; overflow:auto; } .chapter-container{ order:1; padding:18px; } .search-input { width:140px; } }