/* =========================================================
   Shared
   ========================================================= */
:root {
  --bg:#f6f3ec; --surface:#fffdf8; --fg:#25221d; --muted:#7b7569; --line:#e7e1d3;
  --accent:#2f6f5e; --accent-fg:#fff; --bar:#e9a93a;
  --shadow:0 1px 2px rgba(40,30,10,.08), 0 8px 20px rgba(40,30,10,.09);
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#121412; --surface:#1b1e1b; --fg:#ece9e1; --muted:#9a9689; --line:#2a2e2a;
    --accent:#7cc4a8; --accent-fg:#0c1a14; --bar:#f0b84a;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 24px rgba(0,0,0,.35);
  }
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html, body { margin:0; }
body { font:16px/1.45 var(--sans); background:var(--bg); color:var(--fg); -webkit-font-smoothing:antialiased; }
a { color:var(--accent); }
button { font:inherit; cursor:pointer; }

/* =========================================================
   Library
   ========================================================= */
header.top {
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 16px; padding-top:calc(12px + env(safe-area-inset-top));
  background:color-mix(in srgb, var(--bg) 85%, transparent);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.brand { font-family:var(--serif); font-size:1.3rem; font-weight:700; letter-spacing:.01em; white-space:nowrap; }
.actions { display:flex; align-items:center; gap:10px; }
.actions form { margin:0; }
.addbtn {
  display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  background:var(--accent); color:var(--accent-fg); font-weight:600; font-size:.92rem;
  padding:9px 16px; border-radius:999px; box-shadow:0 2px 8px rgba(47,111,94,.3);
  transition:transform .12s, filter .12s;
}
.addbtn:hover { filter:brightness(1.08); }
.addbtn:active { transform:scale(.97); }
.addbtn input { display:none; }
.iconlink { display:inline-flex; padding:8px; border-radius:50%; color:var(--muted); }
.iconlink:hover { background:var(--line); color:var(--fg); }

main { max-width:1000px; margin:0 auto; padding:18px 16px 60px; }
.flash {
  background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--accent);
  padding:11px 14px; border-radius:10px; margin-bottom:18px; font-size:.92rem; box-shadow:var(--shadow);
}

/* continue-reading card */
.hero {
  display:flex; align-items:center; gap:18px; margin-bottom:28px; padding:16px;
  background:var(--surface); border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow);
}
.hero .cover { width:92px; flex:none; }
.hinfo { min-width:0; flex:1; }
.eyebrow { font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); font-weight:700; }
.hinfo h2 {
  font-family:var(--serif); font-size:1.25rem; line-height:1.25; margin:4px 0 2px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.hinfo .author { color:var(--muted); font-size:.88rem; }
.hbar { height:5px; border-radius:3px; background:var(--line); margin:12px 0 4px; overflow:hidden; }
.hbar i { display:block; height:100%; background:var(--accent); border-radius:3px; }
.hinfo small { color:var(--muted); }
.btn {
  display:inline-block; margin-top:10px; padding:9px 20px; border-radius:999px; text-decoration:none;
  background:var(--accent); color:var(--accent-fg); font-weight:600; font-size:.92rem;
}

/* section header + search */
.sechead { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.sechead h3 { font-family:var(--serif); font-size:1.1rem; margin:0; }
.sechead h3 small { font-family:var(--sans); font-weight:400; color:var(--muted); font-size:.82rem; margin-left:6px; }
.search {
  width:min(55%, 260px); padding:8px 14px; border-radius:999px; font-size:.92rem;
  border:1px solid var(--line); background:var(--surface); color:var(--fg); outline:none;
}
.search:focus { border-color:var(--accent); }

.empty { text-align:center; color:var(--muted); padding:70px 20px; }
.empty .big { font-size:3rem; }
.empty h3 { font-family:var(--serif); color:var(--fg); margin:10px 0 4px; }

/* grid */
.grid { list-style:none; margin:0; padding:0; display:grid; gap:22px 16px; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); }
.book { display:flex; flex-direction:column; min-width:0; }
.cover {
  position:relative; display:block; aspect-ratio:2/3; overflow:hidden;
  border-radius:4px 10px 10px 4px; background:var(--line); box-shadow:var(--shadow);
  transition:transform .15s ease, box-shadow .15s ease;
}
.cover::after { /* soft spine highlight */
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  box-shadow:inset 4px 0 5px -3px rgba(0,0,0,.35), inset 0 0 0 1px rgba(0,0,0,.06);
}
.book:hover .cover { transform:translateY(-4px); }
.cover img { width:100%; height:100%; object-fit:cover; display:block; }
.gen { display:flex; flex-direction:column; justify-content:space-between; height:100%; padding:16px 12px 14px 16px; color:#fff; font-family:var(--serif); }
.gen .gt { font-size:1rem; font-weight:700; line-height:1.2; word-break:break-word; display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden; text-shadow:0 1px 2px rgba(0,0,0,.25); }
.gen .ga { font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; opacity:.8; font-family:var(--sans); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pbar { position:absolute; left:0; right:0; bottom:0; height:4px; background:rgba(0,0,0,.4); z-index:2; }
.pbar i { display:block; height:100%; background:var(--bar); }
.badge { position:absolute; top:8px; left:12px; z-index:2; background:var(--accent); color:var(--accent-fg); font-size:.62rem; font-weight:800; letter-spacing:.06em; padding:2px 8px; border-radius:999px; }

.meta { padding:9px 2px 0; min-width:0; }
.title { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; color:var(--fg); text-decoration:none; font-weight:600; font-size:.9rem; line-height:1.25; }
.author { color:var(--muted); font-size:.78rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; }
.row { display:flex; align-items:center; justify-content:space-between; margin-top:4px; }
.row small { color:var(--muted); font-size:.75rem; }
.row form { margin:0; }
.del { background:none; border:0; padding:4px; color:var(--muted); opacity:.5; border-radius:6px; display:inline-flex; }
.del:hover { opacity:1; color:#d9534f; }

/* upload overlay */
#uploading { position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.45); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
.ubox { background:var(--surface); border-radius:16px; padding:22px 24px; width:min(86vw, 340px); text-align:center; box-shadow:var(--shadow); }
.ubar { height:8px; border-radius:4px; background:var(--line); overflow:hidden; margin:14px 0 8px; }
.ubar i { display:block; height:100%; width:0; background:var(--accent); transition:width .15s; }

/* =========================================================
   Login / install
   ========================================================= */
body.auth { display:flex; min-height:100vh; align-items:center; justify-content:center; padding:18px;
  background:radial-gradient(1200px 500px at 50% -10%, color-mix(in srgb, var(--accent) 18%, transparent), transparent), var(--bg); }
.card-auth { width:100%; max-width:370px; background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:30px 26px; box-shadow:var(--shadow); }
.card-auth h1 { font-family:var(--serif); text-align:center; margin:0 0 20px; font-size:1.5rem; }
.card-auth label { display:block; margin-bottom:14px; font-size:.82rem; font-weight:600; color:var(--muted); }
.card-auth input { display:block; width:100%; margin-top:5px; padding:12px; font-size:1rem; border:1px solid var(--line); border-radius:10px; background:var(--bg); color:var(--fg); outline:none; }
.card-auth input:focus { border-color:var(--accent); }
.card-auth button { width:100%; padding:12px; border:0; border-radius:999px; background:var(--accent); color:var(--accent-fg); font-weight:700; margin-top:4px; }
.err { color:#d9534f; font-size:.9rem; } .ok { color:#2a9d4b; }

/* =========================================================
   Reader
   ========================================================= */
html[data-theme=light] { --r-bg:#ffffff; --r-fg:#1b1b1b; --r-ui:rgba(255,255,255,.9);  --r-line:rgba(0,0,0,.1);       --r-muted:#7b7b7b; --r-acc:#2f6f5e; --r-panel:#ffffff; }
html[data-theme=sepia] { --r-bg:#f4ecd8; --r-fg:#5b4636; --r-ui:rgba(244,236,216,.92); --r-line:rgba(91,70,54,.18);  --r-muted:#8a7560; --r-acc:#8a5a2b; --r-panel:#f9f3e3; }
html[data-theme=dark]  { --r-bg:#121413; --r-fg:#d8d6cf; --r-ui:rgba(24,27,25,.92);    --r-line:rgba(255,255,255,.1); --r-muted:#8d8a82; --r-acc:#7cc4a8; --r-panel:#1c1f1d; }

body.reader { position:fixed; inset:0; overflow:hidden; background:var(--r-bg); color:var(--r-fg); transition:background .2s; }

#viewer {
  position:absolute; top:0; bottom:0; left:50%; transform:translateX(-50%);
  width:100%; max-width:760px;
  padding:calc(env(safe-area-inset-top) + 24px) 14px calc(env(safe-area-inset-bottom) + 34px);
}

#loading { position:absolute; inset:0; z-index:5; display:flex; flex-direction:column; gap:14px; align-items:center; justify-content:center; background:var(--r-bg); color:var(--r-muted); font-size:.95rem; }
.spin { width:34px; height:34px; border:3px solid var(--r-line); border-top-color:var(--r-acc); border-radius:50%; animation:sp .8s linear infinite; }
#loading.failed .spin { display:none; }
@keyframes sp { to { transform:rotate(360deg); } }

.bar-ui {
  position:absolute; left:0; right:0; z-index:10; color:var(--r-fg);
  background:var(--r-ui); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  transition:transform .22s ease;
}
#topbar { top:0; display:flex; align-items:center; gap:4px; padding:8px 8px; padding-top:calc(8px + env(safe-area-inset-top)); border-bottom:1px solid var(--r-line); transform:translateY(-110%); }
#bottombar { bottom:0; padding:8px 16px; padding-bottom:calc(10px + env(safe-area-inset-bottom)); border-top:1px solid var(--r-line); transform:translateY(110%); }
body.ui #topbar, body.ui #bottombar { transform:none; }
#title { flex:1; min-width:0; text-align:center; font-family:var(--serif); font-weight:600; font-size:1rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:0 6px; }
.ibtn { display:inline-flex; align-items:center; justify-content:center; min-width:40px; height:40px; background:none; border:0; border-radius:50%; color:inherit; text-decoration:none; font-family:var(--serif); font-size:1.05rem; font-weight:700; }
.ibtn:hover, .ibtn:active { background:var(--r-line); }

#where { text-align:center; font-size:.78rem; color:var(--r-muted); height:1.1em; margin-bottom:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.seekrow { display:flex; align-items:center; gap:12px; }
#pct { font-size:.82rem; font-variant-numeric:tabular-nums; min-width:2.8em; color:var(--r-muted); }
#seek { flex:1; accent-color:var(--r-acc); height:24px; margin:0; }

#progressline { position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--r-line); z-index:4; pointer-events:none; }
#progressline span { display:block; height:100%; width:0; background:var(--r-acc); transition:width .25s; }
#corner { position:absolute; right:14px; bottom:calc(8px + env(safe-area-inset-bottom)); z-index:4; font-size:.72rem; color:var(--r-muted); pointer-events:none; font-variant-numeric:tabular-nums; }
body.ui #corner { opacity:0; }

#scrim { position:absolute; inset:0; z-index:15; background:rgba(0,0,0,.35); }

#drawer {
  position:absolute; top:0; bottom:0; left:0; z-index:20; width:min(86vw, 350px); overflow-y:auto;
  background:var(--r-panel); color:var(--r-fg); box-shadow:6px 0 28px rgba(0,0,0,.3);
}
.drawer-head { position:sticky; top:0; display:flex; align-items:center; justify-content:space-between; padding:6px 8px 6px 18px; background:var(--r-panel); border-bottom:1px solid var(--r-line); font-family:var(--serif); font-size:1.05rem; }
#toc, #toc ul { list-style:none; margin:0; padding:0; }
#toc ul { padding-left:14px; }
#toc a { display:block; padding:11px 18px; color:var(--r-fg); text-decoration:none; font-size:.93rem; border-bottom:1px solid var(--r-line); }
#toc a:hover { background:var(--r-line); }

#settings {
  position:absolute; top:calc(56px + env(safe-area-inset-top)); right:10px; z-index:20; width:min(92vw, 300px);
  background:var(--r-panel); color:var(--r-fg); border:1px solid var(--r-line); border-radius:16px; padding:14px;
  box-shadow:0 12px 40px rgba(0,0,0,.35);
}
.slabel { font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--r-muted); margin:2px 0 8px; font-weight:700; }
.srow { display:flex; align-items:center; gap:8px; margin-bottom:14px; }
.srow:last-child { margin-bottom:0; }
.sbtn { flex:1; padding:9px 10px; border:1px solid var(--r-line); border-radius:10px; background:transparent; color:var(--r-fg); font-size:.95rem; }
.sbtn.on { border-color:var(--r-acc); color:var(--r-acc); font-weight:700; }
#f-val { min-width:56px; text-align:center; font-variant-numeric:tabular-nums; }
.swatch { height:42px; border-radius:10px; font-size:.82rem; font-weight:600; border:2px solid var(--r-line); }
.swatch[data-theme=light] { background:#fff; color:#1b1b1b; }
.swatch[data-theme=sepia] { background:#f4ecd8; color:#5b4636; }
.swatch[data-theme=dark]  { background:#121413; color:#d8d6cf; }
.swatch.on { border-color:var(--r-acc); }