.reader { display:grid; grid-template-columns: 1fr 260px; gap:16px; height:calc(100vh - 72px); }
.reader aside { overflow-y:auto; padding:12px; border:1px solid var(--border); border-radius:8px; background:var(--panel); }
.reader .texto { overflow-y:auto; font-family:var(--font-serif); font-size:18px; line-height:1.65; max-width:720px; margin:0 auto; padding:0 8px; }
.reader .texto p { margin: 0.9em 0; }
.reader header { grid-column: 1 / -1; display:flex; gap:12px; align-items:center; padding:6px 0; border-bottom:1px solid var(--border); }
.reader header h1 { margin:0; flex:1; font-family:var(--font-serif); font-size:18px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.reader header .count { color:var(--muted); font-size:13px; white-space:nowrap; }
.hl { padding:1px 0; border-radius:2px; cursor:pointer; }
.hl-yellow { background:var(--hl-yellow); }
.hl-green  { background:var(--hl-green); }
.hl-blue   { background:var(--hl-blue); }
.hl-pink   { background:var(--hl-pink); }
.hl-toolbar { position:fixed; background:var(--panel); border:1px solid var(--border); border-radius:24px; padding:6px; display:none; gap:4px; box-shadow:0 4px 16px rgba(0,0,0,0.22); z-index:100; touch-action:manipulation; }
.hl-toolbar.visible { display:flex; }
.hl-toolbar button { width:32px; height:32px; border-radius:50%; border:2px solid transparent; cursor:pointer; padding:0; touch-action:manipulation; }
.hl-toolbar .c-yellow { background:#ffd94a; }
.hl-toolbar .c-green  { background:#7ed957; }
.hl-toolbar .c-blue   { background:#5aa7ff; }
.hl-toolbar .c-pink   { background:#ff7ab6; }
.hl-toolbar .note     { background:var(--panel); color:var(--fg); border:1px solid var(--border); font-weight:600; }
.sidebar-hl { padding:8px 24px 8px 8px; border-left:3px solid transparent; cursor:pointer; margin-bottom:8px; position:relative; }
.sidebar-hl .hl-del { position:absolute; top:4px; right:4px; width:20px; height:20px; padding:0; border:0; border-radius:50%; background:transparent; color:var(--muted); font-size:16px; line-height:1; cursor:pointer; opacity:0.4; }
.sidebar-hl:hover .hl-del, .sidebar-hl .hl-del:focus { opacity:1; color:#c33; background:rgba(0,0,0,0.05); }
.sidebar-hl.c-yellow { border-color:#ffd94a; }
.sidebar-hl.c-green  { border-color:#7ed957; }
.sidebar-hl.c-blue   { border-color:#5aa7ff; }
.sidebar-hl.c-pink   { border-color:#ff7ab6; }
.sidebar-hl .preview { font-size:13px; color:var(--fg); }
.sidebar-hl .note-txt { font-size:12px; color:var(--muted); margin-top:4px; }
@media (max-width: 860px) {
  .reader { grid-template-columns: 1fr; height:auto; gap:8px; }
  .reader aside { max-height:38vh; order:2; }
  .reader .texto { order:1; max-width:100%; padding:0 4px; font-size:17px; }
  .reader header h1 { font-size:16px; }
}