:root {
  color-scheme: dark;
  --background: #070b0a;
  --panel: #101815;
  --line: #315f4c;
  --text: #d8f7e6;
  --muted: #91b8a5;
  --accent: #68f5ad;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--background); color: var(--text); }
a { color: var(--accent); }
header { display: flex; align-items: center; gap: 1rem; padding: .8rem 1rem; border-bottom: 1px solid var(--line); }
header h1 { flex: 1; margin: 0; font-size: 1.05rem; overflow-wrap: anywhere; }
button, input { font: inherit; }
button { color: var(--text); background: var(--panel); border: 1px solid var(--line); padding: .45rem .7rem; cursor: pointer; }
button:disabled { cursor: wait; opacity: .7; }
main { width: min(76rem, 100%); margin: 0 auto; padding: 1rem; }
.login, .maintenance { width: min(30rem, calc(100% - 2rem)); margin: 12vh auto; padding: 1.2rem; border: 1px solid var(--line); background: var(--panel); }
.login label { display: grid; gap: .35rem; margin: .8rem 0; }
.login input { width: 100%; padding: .55rem; color: var(--text); background: var(--background); border: 1px solid var(--line); }
.error, .preview { color: #ffce78; }
.library { display: grid; gap: .7rem; padding: 0; list-style: none; }
.library li { display: grid; gap: .25rem; padding: .8rem; border: 1px solid var(--line); background: var(--panel); }
.library span { color: var(--muted); }
.reader-navigation-status { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: .8rem; padding: .55rem 1rem; border-bottom: 1px solid var(--line); background: #0b1511; }
.reader-navigation-message { flex: 1; }
.reader-layout { display: grid; grid-template-columns: minmax(13rem, 19rem) minmax(0, 1fr); gap: 1rem; width: min(96rem, 100%); }
.sidebar { min-width: 0; }
.scroll-list { max-height: calc(100vh - 11rem); overflow: auto; border: 1px solid var(--line); }
.list-item { display: block; padding: .5rem .65rem; border-bottom: 1px solid #1c352a; text-decoration: none; }
.list-item.read::after { content: " ✓"; color: var(--muted); }
.reader-content { min-width: 0; }
.reader-content article, .reader-shell { padding: 1rem; border: 1px solid var(--line); background: var(--panel); }
.reader-content pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; line-height: 1.65; }
.nav-row { display: flex; align-items: center; justify-content: space-between; gap: .65rem; margin: .8rem 0; }
.nav-row a, .nav-row .disabled { padding: .45rem .6rem; border: 1px solid var(--line); }
.nav-row .disabled { color: var(--muted); }

@media (max-width: 760px) {
  .reader-layout { grid-template-columns: 1fr; }
  .scroll-list { max-height: 14rem; }
  .nav-row { flex-wrap: wrap; }
}