:root{
  /* Dark theme (default) variables */
  --bg: #071019;             /* page background */
  --sidebar: #0b1220;        /* sidebar background */
  --card: #0f1724;           /* subtle card */
  --surface: #0b1216;        /* reading surface (dark) */
  --surface-text: #e6eef6;   /* readable text on dark surface */
  --muted: #9aa6b2;          /* secondary text */
  --accent: #2b7a78;         /* accent teal */
  --glass: rgba(255,255,255,0.03);
  --control-bg: rgba(255,255,255,0.04);
}
*{box-sizing:border-box}
/* default: dark theme */
.body, body{margin:0;font-family: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; background: var(--bg); color:var(--surface-text);}
.top{padding:28px 24px 8px 24px;max-width:1200px;margin:0 auto;box-sizing:border-box}
.top h1{margin:0;font-size:28px;letter-spacing:0.6px;color:var(--surface-text);text-align:center;display:block;width:100%}
.subtitle{margin:6px 0 0;color:var(--muted)}
.container{display:flex;gap:20px;padding:20px;align-items:flex-start;max-width:1200px;margin:0 auto}
.sidebar{width:300px}
.books-list{background:linear-gradient(180deg,var(--sidebar), rgba(15,20,36,0.6));padding:16px;border-radius:12px;box-shadow:0 6px 24px rgba(2,6,23,0.6)}
.books-list h2{margin:0 0 8px 0;color:var(--paper)}
#bookList{list-style:none;padding:0;margin:0;max-height:70vh;overflow:auto}
#bookList li{padding:12px;border-radius:8px;margin-bottom:10px;cursor:pointer;background:transparent;color:var(--surface-text);border:1px solid rgba(255,255,255,0.03)}
#bookList li:hover{transform:translateX(6px);transition:transform .18s}
#bookList li.active{background:linear-gradient(180deg, rgba(43,122,120,0.14), rgba(43,122,120,0.06));box-shadow:inset 0 0 0 1px rgba(43,122,120,0.12)}
.reader{flex:1;max-width:980px}
.reader-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;position:relative}
.reader-header h2{margin:0;color:var(--surface-text);margin-left:auto;margin-right:auto}
.meta{color:var(--muted);font-size:13px}
.chap-nav{display:flex;gap:8px;align-items:center;margin-top:12px}
.chap-nav select, .chap-nav button{background:var(--control-bg);border:1px solid rgba(15,20,36,0.06);color:var(--surface-text);padding:8px 10px;border-radius:8px}
.chap-nav select{color:var(--surface-text);min-width:260px}
.chap-nav button{background:var(--accent);color:#fff;border:none}
.content{background:var(--surface);padding:32px;border-radius:12px;margin-top:18px;line-height:1.8;color:var(--surface-text);font-size:18px;box-shadow:0 6px 28px rgba(2,6,23,0.5)}
.content h3{margin-top:0;color:var(--accent)}
.content p{color:var(--surface-text)}
.footnote{color:var(--muted);font-size:14px;margin-top:18px}
@media (max-width:900px){.container{flex-direction:column}.sidebar{width:100%}}

/* If viewport smaller than container, allow full width with padding preserved */
@media (max-width:1240px){
  .container{max-width:calc(100% - 40px);padding-left:20px;padding-right:20px}
}

/* Mobile: increase reading size for comfortable reading */
@media (max-width:600px){
  .content{font-size:20px;line-height:1.95;padding:22px}
  .reader-header h2{font-size:20px}
  .chap-nav select{min-width:140px}
}

/* make book list not show horizontal scrollbar and wrap long titles */
#bookList{overflow-x:hidden;}
#bookList li{white-space:normal;word-break:break-word}

/* Thin subtle scrollbar for book list and main content */
#bookList::-webkit-scrollbar, .content::-webkit-scrollbar, select::-webkit-scrollbar{height:10px;width:10px}
#bookList::-webkit-scrollbar-thumb, .content::-webkit-scrollbar-thumb, select::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.06);border-radius:8px}
#bookList::-webkit-scrollbar-track, .content::-webkit-scrollbar-track, select::-webkit-scrollbar-track{background:transparent}

/* Firefox scrollbar thin */
#bookList, .content, select{scrollbar-width:thin;scrollbar-color: rgba(255,255,255,0.06) transparent}

/* Light theme (user-controlled) */

/* Light theme (user-controlled) — swap variables when .light is present */
body.light{
  --bg: #f5f6f7;
  --sidebar: #ffffff;
  --card: #ffffff;
  --surface: #ffffff;        /* white reading surface */
  --surface-text: #0b1b1a;   /* dark text on light surface */
  --accent: #2b7a78;
  --control-bg: rgba(2,6,23,0.04);
}

body.light .books-list h2, body.light .top h1 { color: var(--surface-text); }

/* Theme toggle positioned at top-right of header */
.theme-toggle{position:absolute;top:22px;right:24px;display:flex;align-items:center;gap:8px}
.theme-toggle .theme-label{font-size:14px;color:var(--muted)}
.theme-toggle input{display:none}
.theme-toggle .switch{width:44px;height:24px;border-radius:999px;background:rgba(255,255,255,0.06);display:inline-block;position:relative;cursor:pointer}
.theme-toggle .switch::after{content:'';position:absolute;left:4px;top:4px;width:16px;height:16px;border-radius:50%;background:var(--surface-text);transition:transform .18s ease}
.theme-toggle input:checked + .switch{background:var(--accent)}
.theme-toggle input:checked + .switch::after{transform:translateX(20px);background:white}

/* adjust when header is centered */
.top{position:relative}

/* Images inside the reader: centered and responsive */
.content img{
  display:block;
  margin-left:auto;
  margin-right:auto;
  max-width:90%;
  height:auto;
  border-radius:8px;
  box-shadow: 0 6px 18px rgba(2,6,23,0.4);
}

/* If the image is wrapped in a figure with a caption */
.content figure{margin:20px 0;text-align:center}
.content figcaption{font-size:13px;color:var(--muted);margin-top:8px}