:root { --brand:#b4532a; --ink:#1c1c1c; --viewer:#2b2724; --bar:#36312d; --side:#221f1c; --paper:#fbf8f1; --aspect:2/3; }
* { box-sizing:border-box; }
html, body { margin:0; height:100%; overflow:hidden; background:var(--viewer); color:#fff;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; }
.bar { position:relative; z-index:20; height:56px; background:var(--bar); display:flex; align-items:center; gap:16px; padding:0 20px; box-shadow:0 1px 0 rgba(0,0,0,.35); }
.bar .title { font-size:15px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bar .title .by { font-weight:400; color:#cfc6bd; }
.bar .count { margin-left:auto; font-size:13px; display:flex; align-items:center; gap:6px; color:#ddd; }
.bar .count b { background:#1b1816; padding:3px 9px; border-radius:4px; font-weight:500; }
.bar .dl { color:#fff; text-decoration:none; font-size:13px; font-weight:600; background:var(--brand); padding:7px 12px; border-radius:6px; }
.bar .dl[hidden] { display:none; }
.menu { background:none; border:0; color:#fff; width:36px; height:36px; border-radius:6px; cursor:pointer; display:grid; place-items:center; padding:0; }
.menu:hover { background:rgba(255,255,255,.1); }
.menu span { display:block; width:18px; height:2px; background:#fff; box-shadow:0 -6px 0 #fff, 0 6px 0 #fff; }
.layout { display:flex; height:calc(100% - 56px); }
.side { width:180px; flex:none; background:var(--side); border-right:1px solid rgba(0,0,0,.4); overflow-y:auto; padding:18px 0 40px; scrollbar-width:thin; }
.side[hidden] { display:none; }
.thumb { display:block; width:100%; background:none; border:0; padding:8px 22px 12px; cursor:pointer; color:#ddd; font:inherit; }
.thumb .frame { position:relative; display:block; width:100%; aspect-ratio:var(--aspect); background:var(--paper); border:3px solid transparent; border-radius:2px; box-shadow:0 1px 4px rgba(0,0,0,.5); overflow:hidden; }
.thumb.current .frame { border-color:#e8a37e; }
.thumb img { display:block; width:100%; height:100%; object-fit:cover; }
.thumb.locked img { filter:blur(3px); transform:scale(1.08); }
.thumb .n { display:block; text-align:center; font-size:12px; margin-top:7px; }
.doc { flex:1; overflow-y:auto; padding:24px 16px 80px; display:flex; flex-direction:column; align-items:center; gap:18px; }
.page { position:relative; flex:none; width:min(720px, 100%); aspect-ratio:var(--aspect); background:var(--paper); box-shadow:0 2px 10px rgba(0,0,0,.45); overflow:hidden; }
.page img { display:block; width:100%; height:100%; object-fit:cover; }
.page.locked img { filter:blur(10px); transform:scale(1.06); }
.page.locked::after { content:""; position:absolute; inset:0; background:rgba(255,255,255,.12); }
.gate { position:fixed; inset:0; z-index:30; display:flex; align-items:center; justify-content:center; padding:20px; pointer-events:none; opacity:0; transition:opacity .25s; }
.gate.show { opacity:1; }
.gate.show .card { pointer-events:auto; }
.gate .card { background:#fff; color:var(--ink); border-radius:20px; padding:26px 28px; width:min(520px,100%); box-shadow:0 20px 60px rgba(0,0,0,.45); }
.gate h2 { margin:0 0 6px; font-size:22px; font-weight:650; letter-spacing:-.01em; }
.gate .sub { margin:0 0 16px; font-size:14px; line-height:1.5; color:#5d5650; }
.gate .sub:empty { display:none; }
.gate form { display:flex; gap:10px; }
.gate form[hidden] { display:none; }
.gate input { flex:1; min-width:0; font:inherit; font-size:17px; padding:14px 16px; border:1.5px solid #d9d4cc; border-radius:10px; outline:none; }
.gate input:focus { border-color:var(--ink); }
.gate input.hp { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.gate button { font:inherit; font-size:16px; font-weight:600; background:#111; color:#fff; border:0; border-radius:10px; padding:14px 22px; cursor:pointer; white-space:nowrap; }
.gate button:disabled { opacity:.5; cursor:default; }
.gate .hint { margin:12px 0 0; font-size:13px; line-height:1.5; color:#666; }
.gate .hint:empty { display:none; }
.gate .hint a { color:var(--brand); cursor:pointer; text-decoration:underline; }
.gate .err { color:#b3261e; }
.gate input.code { letter-spacing:.3em; text-align:center; font-size:22px; }
@media (max-width:760px) {
  .side { position:absolute; top:56px; bottom:0; left:0; z-index:15; width:140px; box-shadow:4px 0 16px rgba(0,0,0,.4); }
  .thumb { padding:6px 14px 10px; }
  .bar { gap:10px; padding:0 12px; }
  .bar .title .by { display:none; }
}
@media (max-width:520px) {
  .gate form { flex-direction:column; }
  .gate .card { padding:22px 20px; }
  .gate h2 { font-size:19px; }
}
/* Library page */
.lib { height:100%; overflow-y:auto; padding:48px 20px 80px; }
.lib h1 { max-width:1080px; margin:0 auto 28px; font-size:28px; font-weight:650; letter-spacing:-.01em; }
.lib .grid { max-width:1080px; margin:0 auto; display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:28px; }
.lib a { color:#fff; text-decoration:none; display:block; }
.lib .cover { display:block; width:100%; aspect-ratio:2/3; object-fit:cover; background:var(--paper); border-radius:3px; box-shadow:0 4px 18px rgba(0,0,0,.45); transition:transform .15s; }
.lib a:hover .cover { transform:translateY(-3px); }
.lib .t { display:block; margin-top:12px; font-size:16px; font-weight:600; line-height:1.3; }
.lib .m { display:block; margin-top:4px; font-size:13px; color:#bfb6ad; }
html.library, html.library body { overflow:auto; }