.mod-head { display: grid; gap: var(--s4); padding: var(--s6) 0 var(--s5); border-bottom: 1px solid var(--line); }
@media (min-width: 1080px) { .mod-head { grid-template-columns: minmax(0, 1fr) 280px; gap: var(--s6); align-items: end; } }
.mod-head .num-big { font: 700 3.5rem/1 var(--font-num); color: var(--faint); letter-spacing: -.04em; }
.mod-head h1 { font: 700 var(--fs-h1)/1.12 var(--font-ui); margin: var(--s2) 0 var(--s3); letter-spacing: -.02em; }
.mod-head .sum { font: var(--fs-read)/1.6 var(--font-read); margin: 0; max-width: 60ch; }
.mod-stats { padding: var(--s4); display: grid; gap: var(--s3); }
.mod-stats .row { display: flex; justify-content: space-between; font-size: var(--fs-sm); }
.mod-layout { display: grid; gap: var(--s6); padding-top: var(--s5); }
@media (min-width: 1080px) { .mod-layout { grid-template-columns: minmax(0, 1fr) 280px; } }
.lvl-pick { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; margin-bottom: var(--s4); font-size: var(--fs-sm); color: var(--muted); }
.chap-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.chap { display: grid; grid-template-columns: 48px 1fr; gap: var(--s1) var(--s3); padding: var(--s4) 0; border-bottom: 1px solid var(--line); position: relative; }
@media (min-width: 720px) { .chap { grid-template-columns: 56px 1fr 200px; align-items: start; } }
.chap .cn { font: 700 1.25rem/1.3 var(--font-num); color: var(--faint); grid-row: span 3; }
.chap h2 { margin: 0; font: 700 var(--fs-h4)/1.35 var(--font-ui); }
.chap h2 a { color: var(--ink); text-decoration: none; }
.chap h2 a::after { content: ""; position: absolute; inset: 0; }
.chap h2 a:hover { text-decoration: underline; }
.chap:hover { background: linear-gradient(90deg, transparent, var(--surface-2) 30%, transparent); }
.chap p { margin: 0; font: var(--fs-ui)/1.5 var(--font-read); color: var(--text); grid-column: 2; }
.chap .tags { grid-column: 2; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.chap .tag { font: 600 11px/1 var(--font-ui); padding: 4px 7px; border-radius: 4px; background: var(--surface-2); color: var(--muted); display: inline-flex; gap: 4px; align-items: center; }
.chap .tag.dec { background: var(--accent-soft); color: var(--accent-ink); }
.chap .side-info { grid-column: 2; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font-size: var(--fs-xs); color: var(--muted); margin-top: 6px; }
@media (min-width: 720px) { .chap .side-info { grid-column: 3; grid-row: 1 / span 3; flex-direction: column; align-items: flex-end; margin: 0; } }
.mins { display: inline-flex; gap: 8px; font-family: var(--font-num); font-size: var(--fs-xs); }
.mins span { opacity: .55; }
.mins span.on { opacity: 1; font-weight: 700; color: var(--ink); }
.status { display: inline-flex; gap: 6px; align-items: center; font-weight: 600; }
.status.done { color: var(--good); }
.status.prog { color: var(--accent-ink); }
.depth-badges { display: inline-flex; gap: 3px; }
.depth-badges .badge.lvl.off { background: var(--surface-3); color: var(--faint); }
.mod-aside h2 { font: 700 var(--fs-xs)/1.3 var(--font-ui); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 0 var(--s3); }
.mod-aside ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.mod-aside a { display: flex; gap: var(--s2); padding: 8px; border-radius: var(--radius-sm); color: var(--text); text-decoration: none; font-size: var(--fs-sm); }
.mod-aside a:hover { background: var(--surface-2); }
.mod-aside a[aria-current] { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
.mod-aside .n { font-family: var(--font-num); color: var(--faint); width: 22px; }