:root {
  --bg:#faf8f3; --fg:#222; --muted:#7a766d; --card:#fff; --border:#e4dfd3; --accent:#3b4a6b;
  --fs:19px; --lh:1.6; --measure:36rem;
  --hl-yellow:rgba(255,220,0,.4); --hl-green:rgba(80,200,120,.38); --hl-blue:rgba(90,160,255,.35); --hl-pink:rgba(255,105,160,.35);
  --top:calc(52px + env(safe-area-inset-top)); --bot:calc(64px + env(safe-area-inset-bottom));
}
body[data-theme="sepia"] { --bg:#f1e6cf; --fg:#4a3b26; --muted:#8a7757; --card:#f8efdc; --border:#dccda9; --accent:#7a5b2e; }
body[data-theme="dark"] { --bg:#1c1d21; --fg:#d6d6d2; --muted:#8b8c90; --card:#26272c; --border:#38393f; --accent:#8fb0ff; }
body[data-theme="black"] { --bg:#000; --fg:#c8c8c4; --muted:#7c7d80; --card:#121214; --border:#26272b; --accent:#8fb0ff; }
body[data-font="serif"] { --ff:Georgia,"Iowan Old Style","Palatino Linotype",serif; }
body[data-font="sans"] { --ff:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
body[data-font="mono"] { --ff:ui-monospace,Menlo,Consolas,monospace; }

* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html { scroll-behavior:auto; }
body { margin:0; background:var(--bg); color:var(--fg); font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
[hidden] { display:none !important; }
button { font:inherit; color:inherit; background:none; border:0; cursor:pointer; padding:0; }
.icon-btn { width:42px; height:42px; display:inline-grid; place-items:center; border-radius:10px; font-weight:600; flex:none; }
.icon-btn:active, .text-btn:active { background:var(--border); }
.icon-btn svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.icon-btn.on svg { fill:var(--accent); stroke:var(--accent); }
.text-btn { padding:8px 12px; border-radius:10px; color:var(--muted); }

.topbar { display:flex; align-items:center; gap:2px; padding:env(safe-area-inset-top) 8px 0 12px; height:var(--top); }
.topbar h1 { flex:1; font-size:1.3rem; margin:0; }
.title { flex:1; min-width:0; font-size:.95rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:0 4px; }

/* Library */
.shelf { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:18px; padding:12px 16px 32px; max-width:900px; margin:0 auto; }
.card { text-align:left; display:flex; flex-direction:column; gap:8px; }
.cover { aspect-ratio:2/3; border-radius:6px 10px 10px 6px; padding:14px 12px; color:#fff; display:flex; flex-direction:column; justify-content:space-between; box-shadow:0 3px 10px rgba(0,0,0,.25), inset 4px 0 0 rgba(0,0,0,.18); }
.cover b { font-family:Georgia,serif; font-size:1.05rem; line-height:1.2; text-shadow:0 1px 2px rgba(0,0,0,.3); }
.cover span { font-size:.75rem; opacity:.9; }
.card .meta { font-size:.8rem; color:var(--muted); }
.mini-prog { height:3px; background:var(--border); border-radius:2px; overflow:hidden; }
.mini-prog i { display:block; height:100%; background:var(--accent); }

/* Reader */
.bar { position:fixed; left:0; right:0; background:var(--bg); z-index:20; transition:transform .22s; }
#rHeader { top:0; border-bottom:1px solid var(--border); }
#rFooter { bottom:0; border-top:1px solid var(--border); padding-bottom:env(safe-area-inset-bottom); }
body.chrome-hidden #rHeader { transform:translateY(-100%); }
body.chrome-hidden #rFooter { transform:translateY(100%); }
#progBar { height:3px; background:var(--border); } #progBar i { display:block; height:100%; width:0; background:var(--accent); }
.foot-row { display:flex; justify-content:space-between; align-items:center; padding:4px 8px; }
#content { max-width:var(--measure); margin:0 auto; padding:calc(var(--top) + 18px) 20px calc(var(--bot) + 40px); font-family:var(--ff); font-size:var(--fs); line-height:var(--lh); }
body[data-justify="1"] #content p { text-align:justify; hyphens:auto; }
#content .part { text-align:center; text-transform:uppercase; letter-spacing:.18em; font-size:.65em; color:var(--muted); margin:2rem 0 .5rem; }
#content h2.ch-title { font-size:1.7em; line-height:1.2; text-align:center; margin:.4em 0 1.6em; padding-bottom:.8em; border-bottom:1px solid var(--border); }
#content h2.ch-title small { display:block; font-size:.4em; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); font-weight:400; margin-bottom:.8em; }
#content [data-p] { scroll-margin-top:calc(var(--top) + 10px); }
#content p { margin:0 0 .9em; text-indent:0; }
#content h3 { font-size:1.25em; margin:1.6em 0 .6em; }
#content blockquote { margin:1em 0; padding-left:1em; border-left:3px solid var(--border); font-style:italic; color:var(--muted); }
#content hr { border:0; text-align:center; margin:1.6em 0; color:var(--muted); }
#content hr::before { content:"* * *"; letter-spacing:.5em; }
#content .bm { box-shadow:-10px 0 0 -6px var(--accent); }
#content .flash { animation:flash 1.6s; }
@keyframes flash { 0%,60% { background:var(--hl-yellow); } 100% { background:transparent; } }
.chapter-nav { display:flex; gap:12px; margin-top:2.5rem; font-family:system-ui,sans-serif; font-size:1rem; }
.chapter-nav button { flex:1; padding:14px; border:1px solid var(--border); border-radius:12px; background:var(--card); }
.chapter-nav button:disabled { opacity:.35; }
mark.hl { color:inherit; border-radius:2px; cursor:pointer; }
mark.c-yellow { background:var(--hl-yellow); } mark.c-green { background:var(--hl-green); }
mark.c-blue { background:var(--hl-blue); } mark.c-pink { background:var(--hl-pink); }
mark.has-note { border-bottom:2px solid var(--accent); }

#selBar { position:fixed; left:50%; transform:translateX(-50%); bottom:calc(var(--bot) + 12px); z-index:30; display:flex; align-items:center; gap:10px; background:var(--card); border:1px solid var(--border); border-radius:999px; padding:8px 14px; box-shadow:0 6px 24px rgba(0,0,0,.28); }
.dot { width:30px; height:30px; border-radius:50%; border:2px solid var(--card); outline:1px solid var(--border); }
.dot.c-yellow { background:#f5d400; } .dot.c-green { background:#4fc477; } .dot.c-blue { background:#5a9fff; } .dot.c-pink { background:#ff6ba3; }
.dot.sel { outline:2px solid var(--accent); }
.pill { padding:7px 14px; border-radius:999px; background:var(--accent); color:var(--bg); font-weight:600; font-size:.9rem; }
.pill.ghost { background:none; color:var(--muted); border:1px solid var(--border); }
.pill.danger { background:none; color:#d6453d; border:1px solid currentColor; }

/* Sheets */
#scrim { position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:40; }
.sheet { position:fixed; left:0; right:0; bottom:0; z-index:50; max-height:82vh; max-width:640px; margin:0 auto; display:flex; flex-direction:column; background:var(--bg); border-radius:18px 18px 0 0; border:1px solid var(--border); box-shadow:0 -8px 30px rgba(0,0,0,.3); padding-bottom:env(safe-area-inset-bottom); }
.sheet-head { display:flex; align-items:center; justify-content:space-between; padding:6px 8px 0 18px; }
.sheet-head h2 { margin:0; font-size:1.05rem; }
.sheet-body { overflow-y:auto; padding:8px 18px 20px; -webkit-overflow-scrolling:touch; }
.list { list-style:none; margin:0; padding:0; }
.list li { border-bottom:1px solid var(--border); }
.list .row { display:flex; align-items:flex-start; gap:8px; }
.list .row > button.main { flex:1; text-align:left; padding:12px 0; min-width:0; }
.list .part-h { font-size:.7rem; text-transform:uppercase; letter-spacing:.15em; color:var(--muted); padding:14px 0 4px; border:0; }
.list .cur { color:var(--accent); font-weight:700; }
.sub { font-size:.8rem; color:var(--muted); display:block; margin-top:2px; }
.quote { display:block; border-left:4px solid; padding-left:10px; }
.quote.c-yellow { border-color:#f5d400; } .quote.c-green { border-color:#4fc477; } .quote.c-blue { border-color:#5a9fff; } .quote.c-pink { border-color:#ff6ba3; }
.note-text { display:block; margin-top:6px; font-size:.92rem; }
.tabs { display:flex; gap:6px; margin-bottom:8px; }
.tabs button { flex:1; padding:9px; border-radius:10px; border:1px solid var(--border); font-size:.9rem; }
.tabs button.on { background:var(--accent); color:var(--bg); border-color:var(--accent); }
.empty { color:var(--muted); text-align:center; padding:24px 0; }
.field { display:flex; align-items:center; gap:12px; margin:14px 0; } .field label { width:90px; color:var(--muted); font-size:.9rem; }
.field input[type=range] { flex:1; accent-color:var(--accent); }
.seg { display:flex; gap:6px; flex:1; } .seg button { flex:1; padding:9px 4px; border:1px solid var(--border); border-radius:10px; background:var(--card); }
.seg button.on { border-color:var(--accent); outline:1px solid var(--accent); }
.seg .t-light { background:#faf8f3; color:#222; } .seg .t-sepia { background:#f1e6cf; color:#4a3b26; }
.seg .t-dark { background:#1c1d21; color:#d6d6d2; } .seg .t-black { background:#000; color:#c8c8c4; }
input[type=search], textarea { width:100%; font:inherit; font-size:16px; padding:11px 12px; border-radius:10px; border:1px solid var(--border); background:var(--card); color:var(--fg); }
textarea { min-height:110px; resize:vertical; }
.actions { display:flex; gap:10px; margin-top:12px; justify-content:flex-end; }
.colors { display:flex; gap:12px; margin:12px 0; }
mark.q { background:var(--hl-yellow); color:inherit; }
#toast { position:fixed; left:50%; bottom:calc(var(--bot) + 70px); transform:translateX(-50%); background:#222; color:#fff; padding:9px 16px; border-radius:999px; font-size:.9rem; z-index:60; max-width:90vw; }