*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;font-family:-apple-system,system-ui,sans-serif;background:linear-gradient(#12061c,#2a0b2e);color:#1a0f24;overscroll-behavior:none}
body{display:flex;flex-direction:column;padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left)}
header{display:flex;align-items:center;gap:8px;padding:10px 12px;background:#1c0b2b;color:#f3ecdc;border-bottom:2px solid #a3122f}
header h1{flex:1;margin:0;font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
header button{background:rgba(255,255,255,.18);color:#fff;border:0;border-radius:10px;font-size:17px;min-width:40px;height:38px;padding:0 10px}
header button:disabled{opacity:.4}
main{flex:1;overflow:auto;-webkit-overflow-scrolling:touch}
.grid{display:grid;gap:14px;padding:14px;padding-bottom:calc(14px + env(safe-area-inset-bottom))}
.books{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.pages{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}
.tile{background:#f3ecdc;border:0;border-radius:14px;padding:8px;box-shadow:0 3px 12px rgba(163,18,47,.35);text-align:center;color:inherit;font:inherit;position:relative}
.tile img{width:100%;display:block;border-radius:8px;aspect-ratio:612/792}
.tile b{display:block;margin-top:6px}.tile small{color:#a3122f}
.badge{position:absolute;top:4px;right:4px;background:#a3122f;color:#f3ecdc;border-radius:12px;padding:2px 7px;font-size:12px}
.num{position:absolute;bottom:12px;left:12px;background:#fffc;border-radius:9px;padding:1px 6px;font-size:12px;font-weight:700}
#color{flex:1;display:flex;flex-direction:column;overflow:hidden;height:100%}
#stage{flex:1;display:flex;align-items:center;justify-content:center;padding:8px;min-height:0}
#paper{position:relative;background:#fff;border-radius:8px;box-shadow:0 3px 14px rgba(163,18,47,.45);touch-action:none;overflow:hidden}
#paper canvas,#paper img{position:absolute;inset:0;width:100%;height:100%;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#paper img{pointer-events:none}
#tools{background:#f3ecdce6;padding:8px 10px calc(8px + env(safe-area-inset-bottom))}
#pal{display:flex;gap:9px;overflow-x:auto;padding:4px 2px 8px}
.sw{flex:0 0 36px;height:36px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1px #ccd}
.sw.on{box-shadow:0 0 0 3px #a3122f}
#row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.sz{width:38px;height:38px;border-radius:50%;border:0;background:transparent;display:flex;align-items:center;justify-content:center}
.sz.on{background:#a3122f33}.sz i{background:#4b1d6b;border-radius:50%;display:block}
#modes{margin-left:auto;display:flex;gap:6px}.md{border:0;border-radius:18px;padding:8px 9px;font-size:13px;white-space:nowrap;background:#4b1d6b22;color:#4b1d6b}
.md.on{background:#4b1d6b;color:#f3ecdc}
#dlg{position:fixed;inset:0;background:#0006;display:flex;align-items:center;justify-content:center}
#dlg[hidden]{display:none}
.card{background:#f3ecdc;border-radius:16px;padding:20px;text-align:center;max-width:300px}
.card button{font-size:16px;margin:6px;padding:10px 16px;border-radius:10px;border:0;background:#e3d9ef}
.card .danger{background:#a3122f;color:#fff}
.tile.cover .num{background:#4b1d6b;color:#f3ecdc}
header h1{font-family:Georgia,"Times New Roman",serif;letter-spacing:.5px}