/* ============================================================
   PDF Library — styles
   Dark, on-brand. Loaded by pdf-library.html.
   Sections: tokens · header · buttons/inputs · auth · library grid
   · reader (continuous-scroll pages) · popovers (bookmarks/search).
   ============================================================ */

:root{
  --bg:oklch(0.16 0.04 285);--bg2:oklch(0.13 0.035 290);--panel:oklch(0.21 0.03 285/.55);
  --ink:oklch(0.96 0.02 90);--sub:oklch(0.64 0.03 280);--dim:oklch(0.45 0.03 285);
  --primary:oklch(0.88 0.165 92);--accent:oklch(0.66 0.20 12);--good:oklch(0.82 0.16 150);
  --glass:oklch(0.99 0.04 90/.06);--line:oklch(0.95 0.08 90/.14);
  --font:"Hanken Grotesk",system-ui,sans-serif;--mono:"JetBrains Mono",ui-monospace,monospace;--disp:"Sora",sans-serif;
}
*{margin:0;box-sizing:border-box}
body{background:#0f0e14;color:var(--ink);font-family:var(--font);min-height:100vh}
/* full-page background photo, image only — fixed GPU layer (mobile-smooth) */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:url("../assets/hero3.jpg") center center/cover no-repeat}
a{color:var(--primary);text-decoration:none}
.wrap{max-width:1100px;margin:0 auto;padding:0 18px}
header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 22px;max-width:1140px;margin:0 auto;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--disp);font-weight:800}.brand svg{color:var(--primary)}
.hbar{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;color:var(--sub);flex-wrap:wrap}
.badge{padding:3px 9px;border-radius:999px;border:1px solid var(--line);background:var(--glass)}
.badge.cloud{color:var(--good)} .badge.local{color:var(--primary)}
.back{font-size:13px;color:var(--sub)}.back:hover{color:var(--ink)}
.btn{font-family:var(--mono);font-size:13px;color:var(--ink);background:var(--glass);border:1px solid var(--line);border-radius:10px;padding:9px 14px;cursor:pointer;transition:.16s;display:inline-flex;align-items:center;gap:7px}
.btn:hover{border-color:var(--primary);color:var(--primary);transform:translateY(-1px)}
.btn.primary{background:var(--primary);color:oklch(0.2 0.04 90);border-color:transparent;font-weight:700}
.btn.primary:hover{color:oklch(0.2 0.04 90)}
.btn.icon{padding:8px 11px}
input[type=text],input[type=email],input[type=number]{font:inherit;font-size:14px;color:var(--ink);background:var(--bg2);border:1px solid var(--line);border-radius:9px;padding:9px 12px}
input:focus{outline:2px solid var(--primary);border-color:transparent}

/* auth (cloud mode only) */
#auth{display:none;max-width:420px;margin:8vh auto;text-align:center;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:30px;backdrop-filter:blur(12px)}
#auth h2{font-family:var(--disp);font-size:22px;margin-bottom:6px}
#auth p{color:var(--sub);font-size:14px;margin-bottom:18px}
#auth .row{display:flex;gap:8px}#auth input{flex:1}
#authMsg{font-family:var(--mono);font-size:12px;color:var(--good);margin-top:12px;min-height:16px}

/* library grid + book cards */
#library{display:none}
.libbar{display:flex;align-items:center;gap:10px;margin:6px 0 22px;flex-wrap:wrap}
.libbar .grow{flex:1;min-width:140px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}
.book{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;cursor:pointer;transition:.18s;backdrop-filter:blur(8px)}
.book:hover{transform:translateY(-3px);border-color:oklch(0.88 0.165 92/.4)}
.cover{aspect-ratio:3/4;background:linear-gradient(160deg,oklch(0.3 0.06 285),oklch(0.18 0.04 290));display:grid;place-items:center;position:relative}
.cover canvas,.cover img{width:100%;height:100%;object-fit:cover}
.cover .ph{font-family:var(--disp);font-weight:800;font-size:34px;color:oklch(0.7 0.1 90/.5)}
.book .meta{padding:11px 12px}
.book .t{font-size:13px;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
.book .sub{font-family:var(--mono);font-size:10.5px;color:var(--sub);margin-top:6px;display:flex;justify-content:space-between}
.pbar{height:4px;background:oklch(0.5 0.03 285/.4)}.pbar i{display:block;height:100%;background:var(--primary)}
.book .del{position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:8px;background:oklch(0.1 0.03 300/.6);border:1px solid var(--line);color:var(--sub);display:grid;place-items:center;opacity:0;transition:.16s;font-size:13px}
.book:hover .del{opacity:1}.book .del:hover{color:var(--accent);border-color:var(--accent)}
.empty{text-align:center;color:var(--sub);padding:60px 20px;font-family:var(--mono);font-size:14px}
.empty b{color:var(--ink)}

/* reader: full-screen, vertical continuous-scroll page stack */
#reader{display:none;position:fixed;inset:0;z-index:50;background:var(--bg2);flex-direction:column}
#reader.show{display:flex}
.rtop{display:flex;align-items:center;gap:8px;padding:9px 12px;background:oklch(0.12 0.03 290/.92);border-bottom:1px solid var(--line);backdrop-filter:blur(10px);flex-wrap:wrap}
.rtop .title{font-weight:600;font-size:13px;max-width:30ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rtop .spacer{flex:1}
.pageInd{font-family:var(--mono);font-size:12px;color:var(--sub);display:flex;align-items:center;gap:6px}
.pageInd input{width:54px;padding:5px 7px;text-align:center}
#canvasWrap{flex:1;overflow:auto;display:flex;justify-content:center;padding:20px;scroll-behavior:smooth}
#pages{display:flex;flex-direction:column;align-items:center;gap:16px;height:max-content}
.pg{background:oklch(0.32 0.02 285/.25);border-radius:2px}                 /* page placeholder until rendered */
.pgcanvas{display:block;box-shadow:0 8px 30px oklch(0 0 0/.45);background:#fff;border-radius:2px}
.reader-night .pgcanvas{filter:invert(1) hue-rotate(180deg)}              /* reading themes */
.reader-sepia .pgcanvas{filter:sepia(.5) brightness(.95)}
.rnav{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);display:flex;gap:8px;background:oklch(0.12 0.03 290/.9);border:1px solid var(--line);border-radius:999px;padding:6px;backdrop-filter:blur(8px)}
.pop{position:absolute;top:54px;right:12px;width:min(320px,92vw);max-height:70vh;overflow:auto;background:oklch(0.14 0.03 290/.97);border:1px solid var(--line);border-radius:14px;padding:14px;display:none;z-index:5;backdrop-filter:blur(12px)}
.pop.show{display:block}
.pop h4{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--primary);margin-bottom:10px}
.pop .item{padding:8px 10px;border-radius:8px;font-size:13px;cursor:pointer;display:flex;justify-content:space-between;gap:8px}
.pop .item:hover{background:var(--glass)} .pop .item .x{color:var(--dim)} .pop .item .x:hover{color:var(--accent)}
.pop .none{color:var(--sub);font-size:12px;font-family:var(--mono)}
#searchPop input{width:100%;margin-bottom:10px}
footer{text-align:center;color:var(--dim);font-size:12px;font-family:var(--mono);padding:26px}
@media(max-width:560px){.rtop .title{max-width:14ch}.rtop .btn{padding:8px 10px}}