:root { --bg:#E9D8B4; --ink:#152028; --amber:#F5A623; --card:#F3E7CC; --muted:#5b5446; }
* { box-sizing: border-box; }
html, body { margin:0; height:100%; background:var(--bg); color:var(--ink); font-family: system-ui, sans-serif; }
#bar { position:sticky; top:0; z-index:5; display:flex; justify-content:space-between; align-items:center; padding:10px 16px; background:var(--ink); color:#fff; }
.brand .name { font-weight:700; font-size:20px; letter-spacing:.5px; }
.brand .byline { display:block; font-size:11px; color:var(--amber); }
button { font:inherit; border:0; border-radius:10px; padding:10px 16px; background:var(--ink); color:#fff; cursor:pointer; }
#bar button { background:transparent; border:1px solid #fff6; }
.panel { max-width:560px; margin:48px auto; padding:0 20px; }
.providers { display:flex; gap:10px; flex-wrap:wrap; margin:20px 0; }
.small { font-size:13px; color:var(--muted); }
.msg { color:#8a1f11; }
.tools { display:flex; gap:12px; align-items:center; padding:12px 16px; }
#q { flex:1; padding:10px 12px; border-radius:10px; border:1px solid #0002; background:var(--card); font:inherit; }
#grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:16px; padding:8px 16px 40px; }
.cell { cursor:pointer; }
.cover { aspect-ratio:5/8; background:#0001; border-radius:6px; overflow:hidden; display:flex; align-items:flex-end; }
.cell.audio .cover { aspect-ratio:1/1; }
.cover img { width:100%; height:100%; object-fit:cover; display:block; }
.cover .ph { padding:8px; font-size:13px; font-weight:600; }
.cell .t { font-size:13px; font-weight:600; margin-top:6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cell .a { font-size:12px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cell .bar { height:3px; background:#0002; margin-top:4px; } .cell .bar i { display:block; height:3px; background:var(--amber); }
#reader { position:fixed; inset:0; top:0; background:var(--bg); display:flex; flex-direction:column; z-index:10; }
#reader.fixed { background:#000; color:#fff; }
#rbar { display:flex; gap:12px; align-items:center; padding:8px 12px; background:var(--ink); color:#fff; }
#rtitle { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#page { flex:1; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; }
#page canvas, #page img { max-width:100%; max-height:100%; object-fit:contain; }
#page .txt { position:absolute; inset:24px; column-width:calc(100vw - 48px); column-gap:48px; height:calc(100% - 48px); overflow:hidden; font-family: Georgia, serif; font-size:19px; line-height:1.55; text-align:justify; }
#tapzones { position:absolute; inset:48px 0 0 0; display:grid; grid-template-columns:1fr 1fr 1fr; }
#toast { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background:var(--ink); color:#fff; padding:10px 16px; border-radius:10px; z-index:20; }