*{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(#e0eaff,#e6faf7);color:#3b2a7a;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:#6f45d8;color:#fff}
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:#fff;border:0;border-radius:14px;padding:8px;box-shadow:0 3px 10px rgba(111,69,216,.2);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:#1aa3a3}
.badge{position:absolute;top:4px;right:4px;background:#1ab3b3;color:#fff;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 12px rgba(111,69,216,.25);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:#ffffffd9;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 #6f45d8}
#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:#1ab3b340}.sz i{background:#3373f2;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:#6f45d820;color:#6f45d8}
.md.on{background:#6f45d8;color:#fff}
#dlg{position:fixed;inset:0;background:#0006;display:flex;align-items:center;justify-content:center}
#dlg[hidden]{display:none}
.card{background:#fff;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:#e0e6ff}
.card .danger{background:#e0306a;color:#fff}