:root{--bg:#1f2329;--panel:#2a2f37;--ink:#eef1f5;--mute:#9aa4b2;--acc:#e8a33d;--acc2:#2f8f83;--err:#ff7b72;--line:#3a414c}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
.hidden{display:none!important}
.center{min-height:100%;display:flex;align-items:center;justify-content:center;padding:18px}
.card{width:100%;max-width:420px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px}
.card h1{font-size:1.35rem;margin:.4rem 0 .2rem}
.card .by{color:var(--acc);margin:0 0 .6rem;font-weight:600}
.card .desc{color:var(--mute);font-size:.92rem;margin:.2rem 0 1rem}
.cover{display:block;max-width:150px;border-radius:6px;margin:0 auto 12px;box-shadow:0 4px 18px #0008}
.tabs{display:flex;gap:6px;margin-bottom:12px}
.tabs button{flex:1}
button,.btn{background:#39414d;color:var(--ink);border:1px solid var(--line);border-radius:9px;padding:9px 13px;font:inherit;cursor:pointer;text-decoration:none;display:inline-block}
button:hover{background:#444d5a}
button.pri{background:var(--acc);color:#1b1305;border-color:var(--acc);font-weight:700}
button.on{outline:2px solid var(--acc)}
button.sm{padding:5px 9px;font-size:.85rem}
button.danger{background:#5a2a2a;border-color:#7a3a3a}
input,select,textarea{width:100%;background:#171a1f;color:var(--ink);border:1px solid var(--line);border-radius:9px;padding:10px;font:inherit;margin:4px 0 10px}
label{font-size:.88rem;color:var(--mute)}
.msg{min-height:1.3em;font-size:.9rem;color:var(--err)}
.msg.ok{color:#6fd39a}
/* reader */
#reader{position:fixed;inset:0;display:flex;flex-direction:column;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#bar{display:flex;align-items:center;gap:6px;padding:8px 10px;padding-top:max(8px,env(safe-area-inset-top));background:var(--panel);border-bottom:1px solid var(--line)}
#bar .t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600;font-size:.95rem}
#bar button{padding:7px 10px}
#bar input{width:58px;margin:0;padding:6px;text-align:center}
#bar .of{color:var(--mute);font-size:.85rem;white-space:nowrap}
#scroller{flex:1;overflow:auto;background:#12151a;-webkit-overflow-scrolling:touch}
#pages{position:relative;padding:8px 0;margin:0 auto;width:min(calc(var(--z,1)*100%),calc(var(--z,1)*900px))}
.pg{position:relative;background:#fff;margin:0 0 10px;aspect-ratio:595/842;box-shadow:0 2px 10px #0009}
.pg canvas{display:none;width:100%;height:auto;pointer-events:none}
.pg .n{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#b8bec7;font-size:1.1rem;pointer-events:none}
.pg.err .n{pointer-events:auto}
.pg.err .n button{color:#222}
#panel{position:absolute;top:52px;bottom:0;left:0;width:min(88%,380px);background:var(--panel);border-right:1px solid var(--line);padding:12px;overflow:auto;z-index:5;box-shadow:6px 0 24px #000a}
#panel h3{margin:.2rem 0 .6rem;font-size:1rem}
#panel .it{display:block;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:10px 4px}
#panel .it small{color:var(--mute);float:right}
#panel .l2{padding-left:18px;font-size:.93rem}
#panel .l3{padding-left:34px;font-size:.88rem;color:#cbd2dc}
#panel .sn{display:block;color:var(--mute);font-size:.82rem}
#toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:#000c;padding:8px 14px;border-radius:20px;font-size:.88rem;z-index:9}
@media print{body *{display:none!important}body:before{content:"Printing is disabled for this book.";display:block;padding:40px;font:20px sans-serif;color:#000}}
/* admin */
.wrap{max-width:860px;margin:0 auto;padding:14px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px;margin:12px 0}
table{width:100%;border-collapse:collapse;font-size:.9rem}
th,td{text-align:left;padding:8px 6px;border-bottom:1px solid var(--line);vertical-align:middle}
td .row{display:flex;gap:5px;flex-wrap:wrap}
.bar{height:12px;background:#171a1f;border-radius:6px;overflow:hidden;margin:8px 0}
.bar>i{display:block;height:100%;width:0;background:var(--acc2)}
pre.log{background:#171a1f;border-radius:8px;padding:10px;max-height:180px;overflow:auto;font-size:.82rem;white-space:pre-wrap}
.tag{padding:2px 8px;border-radius:10px;font-size:.78rem;background:#39414d}
.tag.approved{background:#1f5a40}.tag.pending{background:#6b5314}.tag.revoked{background:#5a2a2a}
.nav{display:flex;gap:6px;flex-wrap:wrap}