:root{
  --bg: #0b1020;
  --bg2: #0d1630;
  --panel: rgba(255,255,255,.06);
  --panel2: rgba(255,255,255,.08);
  --stroke: rgba(255,255,255,.10);
  --muted: rgba(255,255,255,.64);
  --text: rgba(255,255,255,.92);

  --accent: #62d0ff;
  --accent2: #a168ff;

  --radius: 22px;
  --shadow: 0 18px 48px rgba(0,0,0,.35);

  --fontSize: 18px;
  --lineHeight: 1.75;
  --margins: 22px;
  --contentMax: 980px;
  --safeBottom: env(safe-area-inset-bottom, 0px);
}

body[data-theme="light"]{
  --bg: #f6f7fb;
  --bg2: #eef2ff;
  --panel: rgba(20, 25, 40, .06);
  --panel2: rgba(20, 25, 40, .08);
  --stroke: rgba(20, 25, 40, .10);
  --muted: rgba(20,25,40,.62);
  --text: rgba(15,18,30,.92);
}

body[data-theme="sepia"]{
  --bg: #f7edd6;
  --bg2: #f2e3c4;
  --panel: rgba(32, 20, 8, .06);
  --panel2: rgba(32, 20, 8, .08);
  --stroke: rgba(32, 20, 8, .12);
  --muted: rgba(32,20,8,.62);
  --text: rgba(24, 16, 8, .92);
}

*{ box-sizing: border-box; }
html,body{ height:100%; overflow:hidden; }
body{
  margin:0;
  overflow:hidden;
  overflow:hidden;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color: var(--text);
  background:
    radial-gradient(1200px 700px at 20% 10%, rgba(98,208,255,.08), transparent 65%),
    radial-gradient(1000px 680px at 80% 20%, rgba(161,104,255,.07), transparent 65%),
    linear-gradient(180deg, var(--bg), var(--bg2));
}

.app{
  min-height: 100dvh;
  display:flex;
  flex-direction:column;
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 14px 10px;
  gap: 10px;
}

.brand{
  display:flex;
  gap: 10px;
  align-items:center;
  min-width:0;
}
.logo{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(98,208,255,.28), rgba(161,104,255,.28));
  display:grid;
  place-items:center;
  border: 1px solid var(--stroke);
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
  flex: 0 0 auto;
}
.brandText{ min-width:0; }
.title{
  font-weight: 700;
  letter-spacing: .2px;
  font-size: 16px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.subtitle{
  font-size: 12px;
  color: var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  margin-top: 2px;
}

.topActions{
  display:flex;
  gap: 10px;
  align-items:center;
  flex: 0 0 auto;
}

.iconBtn{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: color-mix(in oklab, var(--panel) 70%, transparent);
  color: var(--text);
  cursor:pointer;
  display:grid;
  place-items:center;
  transition: transform 140ms ease, background 140ms ease;
}
.iconBtn:hover{ transform: translateY(-1px); background: color-mix(in oklab, var(--panel2) 75%, transparent); }
.iconBtn:active{ transform: translateY(0px) scale(.99); }
.ico{ font-size: 18px; line-height:1; }

.progressWrap{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 0 14px 10px;
}
.progressBar{
  height: 10px;
  flex: 1;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: color-mix(in oklab, var(--panel) 55%, transparent);
  overflow:hidden;
}
.progressFill{
  height:100%;
  width:0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
}
.progressMeta{
  font-size: 12px;
  color: var(--muted);
  min-width: 112px;
  text-align:right;
}

.main{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding: 4px 14px 0;
}

.paper{
  display:flex;
  flex-direction:column;
  width: min(1200px, 100%);
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
  background: color-mix(in oklab, var(--panel) 70%, transparent);
  box-shadow: var(--shadow);
  position:relative;
  overflow:hidden;
  min-height: 520px;
}

.paper::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity: .12;
  mix-blend-mode: overlay;
  background:
    radial-gradient(800px 500px at 20% 10%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(700px 480px at 80% 30%, rgba(255,255,255,.08), transparent 62%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.016) 0px, rgba(255,255,255,.016) 1px, transparent 1px, transparent 4px);
}
body[data-theme="light"] .paper::before,
body[data-theme="sepia"] .paper::before{
  opacity:.22;
  mix-blend-mode: multiply;
  background:
    radial-gradient(900px 600px at 25% 0%, rgba(0,0,0,.05), transparent 62%),
    radial-gradient(700px 520px at 80% 20%, rgba(0,0,0,.04), transparent 62%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.014) 0px, rgba(0,0,0,.014) 1px, transparent 1px, transparent 4px);
}

.scroller{
  height: auto;
  max-height: none;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: var(--margins);
  padding-bottom: calc(var(--margins) + 14px);
}
.scroller::-webkit-scrollbar{ display:none; }

.flow{
  width: min(var(--contentMax), 100%);
  margin: 0 auto;
  font-size: var(--fontSize);
  line-height: var(--lineHeight);
  color: var(--text);
}

.flow h2.chapterHeading{
  margin: .1em 0 .8em;
  font-size: 1.5em;
  letter-spacing: .2px;
}
.flow h3{
  margin: 1.1em 0 .55em;
  font-size: 1.15em;
}
.flow p{ margin: 0 0 1em; }
.flow hr{
  border: none;
  border-top: 1px solid var(--stroke);
  margin: 1.25em 0;
  opacity: .7;
}
.flow blockquote{
  margin: 1.1em 0;
  padding: .75em .9em;
  border-left: 3px solid color-mix(in oklab, var(--accent) 70%, transparent);
  background: color-mix(in oklab, var(--panel) 60%, transparent);
  border-radius: 14px;
}
.flow img{
  display:block;
  max-width: 100%;
  height: auto;
  border-radius: 16px;
  border: 1px solid var(--stroke);
  margin: 1.1em auto;
  background: color-mix(in oklab, var(--panel) 55%, transparent);
}

.bottombar{
  position: static;
  padding: 12px;
  padding-bottom: calc(12px + var(--safeBottom));
  display:flex;
  align-items:center;
  gap: 10px;
  background: color-mix(in oklab, var(--panel) 72%, transparent);
  border-top: 1px solid var(--stroke);
}

.navBtn{
  width: 54px;
  height: 54px;
  border-radius: 18px;
  border: 1px solid var(--stroke);
  background: color-mix(in oklab, var(--panel) 75%, transparent);
  color: var(--text);
  cursor:pointer;
  display:grid;
  place-items:center;
}
.chev{ font-size: 26px; line-height:1; }

.pillBtn{
  flex: 1;
  height: 54px;
  border-radius: 18px;
  border: 1px solid color-mix(in oklab, var(--accent) 28%, var(--stroke));
  background: color-mix(in oklab, var(--panel2) 70%, transparent);
  color: var(--text);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  font-weight: 650;
}
.pillBtn .plus{ font-size: 18px; opacity: .9; }

.menuBtn{
  height: 54px;
  padding: 0 14px;
  border-radius: 18px;
  border: 1px solid var(--stroke);
  background: color-mix(in oklab, var(--panel) 75%, transparent);
  color: var(--text);
  cursor:pointer;
  display:flex;
  gap: 10px;
  align-items:center;
}
.hamb{ font-size: 20px; opacity:.9; }

.hint{
  margin: 12px 0 14px;
  font-size: 12px;
  color: var(--muted);
  text-align:center;
}


/* URL/Embed toggles */
body.no-footer .footer{ display:none !important; }
body.no-hint .hint{ display:none !important; }

.footer{
  display:flex;
  justify-content:center;
  gap: 10px;
  padding: 12px 14px 16px;
  color: var(--muted);
  font-size: 12px;
}
.footer a{ color: inherit; text-decoration:none; }
.footer a:hover{ text-decoration: underline; }

/* Modal */
.modal{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  display:none;
  align-items:center;
  justify-content:center;
  padding: 16px;
  z-index: 80;
}
.modal.open{ display:flex; }
.modalCard{
  width: min(720px, 100%);
  max-height: calc(100dvh - 32px);
  display:flex;
  flex-direction:column;
  border-radius: 22px;
  border: 1px solid var(--stroke);
  background: color-mix(in oklab, var(--bg) 92%, black);
  box-shadow: 0 26px 90px rgba(0,0,0,.55);
  overflow:hidden;
}
.modalHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 12px 12px 10px;
  border-bottom: 1px solid var(--stroke);
}
.modalTitle{ font-weight: 750; }
.modalBody{ padding: 12px; 
  overflow:auto;
  -webkit-overflow-scrolling: touch;
}


.card{
  border: 1px solid var(--stroke);
  background: color-mix(in oklab, var(--panel) 72%, transparent);
  border-radius: 18px;
  padding: 12px;
}
.label{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap: 12px;
  margin-bottom: 8px;
}
.label b{ font-weight: 750; }
.label span{ color: var(--muted); font-size: 12px; }

.row{ display:flex; gap: 10px; align-items:center; }
.grid{ display:grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px){ .grid{ grid-template-columns: 1fr; } }

select, input[type="range"], input[type="text"]{
  width:100%;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: color-mix(in oklab, var(--bg) 88%, black);
  color: var(--text);
  outline:none;
}

.btn{
  height: 44px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: color-mix(in oklab, var(--panel) 72%, transparent);
  color: var(--text);
  cursor:pointer;
}
.btn.primary{
  border-color: color-mix(in oklab, var(--accent) 38%, var(--stroke));
  background: linear-gradient(90deg, color-mix(in oklab, var(--accent) 30%, var(--panel2)), color-mix(in oklab, var(--accent2) 26%, var(--panel2)));
}
.btn.danger{
  border-color: color-mix(in oklab, #ff5b6b 45%, var(--stroke));
}

.list{ display:flex; flex-direction:column; gap: 10px; }
.bm{
  display:flex;
  gap: 12px;
  justify-content:space-between;
  align-items:flex-start;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid var(--stroke);
  background: color-mix(in oklab, var(--panel) 70%, transparent);
}
.bmTitle{ font-weight: 700; font-size: 13px; }
.bmMeta{ color: var(--muted); font-size: 12px; margin-top: 4px; }

/* Toast */
.toast{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(18px + var(--safeBottom));
  background: rgba(0,0,0,.78);
  color: white;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  display:none;
  z-index: 90;
  font-size: 13px;
}
.toast.show{ display:block; }

/* Fullscreen reading mode */
.fsHud{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 12px calc(10px + var(--safeBottom));
  display:none;
  z-index: 70;
  pointer-events:none;
}
.fsProgress{
  height: 6px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--stroke) 90%, transparent);
  background: color-mix(in oklab, var(--panel) 55%, transparent);
  overflow:hidden;
  opacity: .75;
}
.fsProgress > i{
  display:block;
  height:100%;
  width:0%;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  border-radius: 999px;
}

body.fs-reading .fsHud{ display:block; }
body.fs-reading .topbar,
body.fs-reading .progressWrap,
body.fs-reading .bottombar,
body.fs-reading .footer,
body.fs-reading .hint{
  display:none;
}

body.fs-reading .paper{
  display:flex;
  flex-direction:column; box-shadow: 0 30px 90px rgba(0,0,0,.60); }

/* Full-height layout in fullscreen/reading mode */
body.fs-reading .main{
  padding: 0;
  align-items: stretch;
}
body.fs-reading .paper{
  flex: 1;
  min-height: 0;
  height: 100%;
  width: 100%;
  border-radius: 0;
}

body.fs-reading, body.fs-reading .app{
  height: 100dvh;
}
body.fs-reading .app{
  min-height: 100dvh;
}
body.fs-reading .main{
  flex: 1;
  min-height: 0;
}
body.fs-reading .scroller{
  flex: 1;
  min-height: 0;
  padding-bottom: calc(var(--margins) + 14px);
}


body.fs-reading.ui-visible .topbar{ display:flex; }
body.fs-reading.ui-visible .progressWrap{ display:block; }
body.fs-reading.ui-visible .bottombar{ display:flex; }
body.fs-reading.ui-visible .footer{ display:block; }


@media (prefers-reduced-motion: reduce){
  .iconBtn, .btn{ transition:none; }
}


/* ===== Reading Focus (Desktop) ===== */
@media (min-width: 900px){
  .app{
    padding-top: 12px;
  }

  .paper{
  display:flex;
  flex-direction:column;
    margin-top: 8px;
  }

  .bottombar{
    background: linear-gradient(180deg, transparent, rgba(0,0,0,.16));
  }

  .hint{
    opacity: .55;
  }

  body:not(.ui-active) .topbar,
  body:not(.ui-active) .progressWrap,
  body:not(.ui-active) .bottombar{
    opacity: .92;
  }
}

/* Footer should not intrude into reading */
.footer{
  margin-top: 18px;
  opacity: .6;
}

select option{ background: color-mix(in oklab, var(--bg) 92%, black); color: var(--text); }


/* ---------- v5 layout fixes ---------- */

/* Make reader controls NOT overlap text */
.scroller{
  flex: 1 1 auto;
  height: auto !important;
  max-height: none !important;
  padding-bottom: calc(var(--margins) + 12px) !important;
}
.bottombar{
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  background: color-mix(in oklab, var(--panel) 72%, transparent) !important;
  border-top: 1px solid var(--stroke);
}

/* Footer fixed so it doesn't affect reader height */
.footerFixed{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  pointer-events: auto;
  justify-content: center;
  padding-bottom: calc(12px + var(--safeBottom));
}
.main{
  padding-bottom: calc(54px + var(--safeBottom)); /* reserve for footer */
}

/* Reader height uses viewport minus chrome */
.paper{
  height: calc(100dvh - 140px); /* header+progress+main paddings */
  max-height: 760px;
}
@media (max-width: 760px){
  .paper{
    height: calc(100dvh - 120px);
    max-height: none;
  }
}

/* Chapter separators */
.chapterSep{
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--stroke) 90%, transparent), transparent);
  margin: 1.3em 0 1.1em;
  opacity: .9;
}
.chapterMeta{
  text-align:center;
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 1.2em;
  letter-spacing: .2px;
}

/* v6 sizing: paper consumes available viewport without making page scroll */
.paper{
  height: calc(100dvh - 170px); /* topbar+progress+hint spacing */
  max-height: 860px;
}
@media (max-width: 760px){
  .paper{ height: calc(100dvh - 150px); max-height: none; }
}

.logo img{width:28px;height:28px;object-fit:contain;filter: drop-shadow(0 6px 14px rgba(0,0,0,.25));}

/* v9 mobile modal sizing */
@media (max-width: 760px){
  .modal{ padding: 10px; }
  .modalCard{ border-radius: 18px; }
  .modalHead{ padding: 10px 10px 8px; }
  .modalBody{ padding: 10px; }
  .label b{ font-size: 13px; }
  .label span{ font-size: 11px; }
  select, input[type="range"], input[type="text"]{ padding: 9px 10px; border-radius: 12px; }
  .btn{ height: 42px; border-radius: 12px; }
  .grid{ gap: 10px; }
}

body.hide-images .flow img{ display:none !important; }


body.fs-reading .footer,
body.fs-reading .hint{
  display:none !important;
}


/* Modal small-screen */
@media (max-width: 420px){
  .modal{ padding: 10px; }
  .modalCard{ border-radius: 18px; }
  .modalBody{ padding: 10px; }
  .card{ padding: 10px; }
}