:root { --bg:#f6f4ef; --ink:#1f1d1a; --muted:#7a746b; --line:#e2ddd3; --accent:#b4532a; --panel:#fffdf9; }
* { box-sizing:border-box; }
html,body { margin:0; height:100%; font:15px/1.5 -apple-system,"PingFang SC","Noto Sans SC",Segoe UI,sans-serif; color:var(--ink); background:var(--bg); }
body { display:grid; grid-template-columns:240px 1fr 380px; height:100vh; }
body.no-panel { grid-template-columns:240px 1fr; }
h1 { font-size:18px; margin:0 0 12px; letter-spacing:.02em; }
aside { background:var(--panel); border-right:1px solid var(--line); padding:16px; overflow:auto; }
#panel { border-right:0; border-left:1px solid var(--line); display:flex; flex-direction:column; padding:0; }
.upload { display:block; text-align:center; padding:8px; border:1px dashed var(--accent); color:var(--accent); border-radius:6px; cursor:pointer; margin-bottom:12px; }
.upload input { display:none; }
#books { list-style:none; padding:0; margin:0; }
#books li { padding:8px 10px; border-radius:6px; cursor:pointer; display:flex; justify-content:space-between; gap:6px; }
#books li:hover { background:var(--bg); }
#books li.active { background:#f1e6dc; }
#books li .del { color:var(--muted); visibility:hidden; }
#books li:hover .del { visibility:visible; }
#books small { display:block; color:var(--muted); }
#reader { display:flex; flex-direction:column; min-width:0; position:relative; }
#toolbar { display:flex; align-items:center; gap:8px; padding:8px 16px; border-bottom:1px solid var(--line); background:var(--panel); font-size:14px; }
#toolbar[hidden] { display:none; }
#title { font-weight:600; max-width:30%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.spacer { flex:1; }
.sep { width:1px; height:20px; background:var(--line); }
.muted { color:var(--muted); }
button, .upload { font:inherit; }
button { border:1px solid var(--line); background:#fff; border-radius:6px; padding:4px 10px; cursor:pointer; }
button:hover { border-color:var(--accent); color:var(--accent); }
button.primary { background:var(--accent); color:#fff; border-color:var(--accent); }
#pageInput { width:56px; text-align:center; font:inherit; padding:3px; border:1px solid var(--line); border-radius:6px; }
#viewer { flex:1; overflow:auto; padding:24px; display:flex; justify-content:center; align-items:flex-start; }
#empty { color:var(--muted); text-align:center; margin-top:20vh; }
.page { position:relative; box-shadow:0 2px 12px rgba(0,0,0,.15); background:#fff; --user-unit:1; --total-scale-factor:calc(var(--scale-factor) * var(--user-unit)); }
.page canvas { display:block; }
.textLayer ::selection { background:rgba(180,83,42,.35); }
#selToolbar { position:absolute; display:flex; gap:4px; background:var(--ink); padding:4px; border-radius:6px; z-index:10; }
#selToolbar[hidden] { display:none; }
#selToolbar button { background:transparent; color:#fff; border:0; }
#panel nav { display:flex; border-bottom:1px solid var(--line); }
#panel nav button { flex:1; border:0; border-radius:0; background:transparent; padding:10px; color:var(--muted); }
#panel nav button.active { color:var(--accent); box-shadow:inset 0 -2px var(--accent); }
#panel section { flex:1; display:flex; flex-direction:column; padding:12px; overflow:auto; gap:10px; }
#panel section[hidden] { display:none; }
#answers { flex:1; overflow:auto; display:flex; flex-direction:column; gap:10px; }
.msg { background:#fff; border:1px solid var(--line); border-radius:8px; padding:10px 12px; font-size:14px; }
.msg .q { font-weight:600; margin-bottom:6px; }
.msg .a { white-space:pre-wrap; }
.msg .meta { color:var(--muted); font-size:12px; margin-top:6px; display:flex; gap:8px; align-items:center; }
.msg .meta button { padding:1px 8px; font-size:12px; }
blockquote { margin:4px 0; padding:4px 10px; border-left:3px solid var(--accent); color:#4a453e; font-size:13px; white-space:pre-wrap; max-height:120px; overflow:auto; }
#quoteBox small, #noteQuote { color:var(--muted); font-size:12px; }
form { display:flex; flex-direction:column; gap:6px; }
textarea { font:inherit; padding:8px; border:1px solid var(--line); border-radius:6px; resize:vertical; }
.note { background:#fff; border:1px solid var(--line); border-radius:8px; padding:10px 12px; font-size:14px; }
.note .meta { color:var(--muted); font-size:12px; display:flex; justify-content:space-between; }
.note .meta a { cursor:pointer; color:var(--accent); }
.spinner { color:var(--muted); font-style:italic; }
@media (max-width:1100px) { body { grid-template-columns:200px 1fr 320px; } }