:root {
  --ink: #1f2328; --muted: #57606a; --faint: #8b949e; --rule: #e3e6ea; --rule2: #d0d4d9;
  --bg: #fdfdfb; --panel: #fafbfc; --hover: #f3f4f6; --accent: #2f5d8a; --accent-bg: #e8f0f8;
  --warn: #e0a800; --warn-ink: #7a5a00; --ok: #1a7f37; --no: #a40e26;
  --card: #fff; --card-q: #fcfcfc; --card-q-ink: #6e7781; --card-q-rule: #c4c9cf; --card-ip: #f3f7fc; --pulse: #dbe7f3; --pulse2: #e8f0f8;
  --diff-bg: #f6f8fa; --del-bg: #ffe3e6; --del-ink: #6e2a33; --add-bg: #dcffe4; --add-ink: #0f4d23; --tag-bg: #f1f2f4; --hunk-bg: #eef3f8;
  --sans: "Helvetica Neue", Inter, Arial, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --mono: ui-monospace, Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: var(--sans); font-size: 14px; line-height: 1.45; color: var(--ink); background: var(--bg); }
a { color: var(--accent); }
button { font: inherit; }
svg.i { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -4px; }
[hidden] { display: none !important; }

/* header */
#hdr { display: flex; align-items: center; gap: 10px; padding: 8px 16px; border-bottom: 1px solid var(--rule); background: var(--panel); position: sticky; top: 0; z-index: 5; }
#hdr .brand { font-weight: 700; font-size: 16px; margin-right: 8px; color: var(--ink); text-decoration: none; }
#hdr .sp { flex: 1; }
.ic { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 7px; color: var(--muted); position: relative; background: none; border: 0; cursor: pointer; text-decoration: none; padding: 0; }
.ic:hover { background: var(--hover); color: var(--ink); }
.ic.on { color: var(--ink); background: #e6e8eb; }
.ic.warn { color: #b07a00; }
.ic .n { position: absolute; top: -3px; right: -3px; background: var(--accent); color: #fff; font-size: 10px; font-weight: 700; border-radius: 999px; min-width: 16px; height: 16px; line-height: 16px; text-align: center; padding: 0 4px; }
.ic .n.y { background: var(--warn); color: var(--ink); }
.ic .n.g { background: var(--ok); }
.avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }

/* layout */
#layout { display: flex; min-height: calc(100vh - 50px); }
#main { flex: 1; min-width: 0; padding: 16px 20px 40px; }
#rail { width: 280px; flex: none; border-left: 1px solid var(--rule); padding: 12px 14px; background: #fff; }
@media (max-width: 1100px) { #rail { display: none; } }
.loading { color: var(--faint); padding: 40px; text-align: center; }
.err { color: var(--no); background: var(--del-bg); border-radius: 6px; padding: 8px 10px; margin: 8px 0; }
.empty { color: var(--faint); font-style: italic; padding: 12px 0; }

/* series strip + list */
.strip { display: flex; gap: 10px; align-items: center; margin: 4px 0 16px; flex-wrap: wrap; }
.cover { width: 64px; height: 64px; border-radius: 10px; background: #f1efe9; border: 2px solid transparent; display: flex; align-items: center; justify-content: center; font-size: 32px; line-height: 1; cursor: pointer; }
.cover:hover { border-color: var(--rule2); }
.cover.sel { border-color: var(--ink); }
.cover.dim { opacity: .45; }
.cover.add { border: 1.5px dashed var(--rule2); background: #fff; color: var(--faint); }
ul.rows { list-style: none; margin: 0; padding: 0; }
ul.rows li { display: flex; align-items: center; gap: 12px; padding: 7px 8px; border-radius: 6px; cursor: pointer; }
ul.rows li:hover { background: var(--hover); }
ul.rows .em { width: 28px; text-align: center; font-size: 18px; flex: none; }
ul.rows .date { color: var(--faint); font-variant-numeric: tabular-nums; min-width: 96px; font-size: 13px; }
ul.rows .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
ul.rows .t .sub { color: var(--faint); font-size: 12.5px; margin-left: 8px; }
ul.rows .icons { display: flex; gap: 2px; }
ul.rows .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--warn); display: inline-block; margin: 0 8px; }

/* toolbar + chips */
.tb { display: flex; align-items: center; gap: 8px; padding: 6px 0 10px; border-bottom: 1px solid var(--rule); margin-bottom: 14px; font-size: 13px; color: var(--muted); flex-wrap: wrap; }
.tb .path { color: var(--ink); font-family: var(--mono); font-size: 12px; }
.tb .right { margin-left: auto; display: flex; gap: 2px; align-items: center; }
.chip { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--rule2); border-radius: 999px; padding: 2px 9px 2px 6px; font-size: 12px; color: var(--ink); background: #fff; cursor: pointer; }
.chip:hover { background: var(--hover); }
.seg { display: inline-flex; border: 1px solid var(--rule2); border-radius: 6px; overflow: hidden; }
.seg .ic { border-radius: 0; width: 30px; height: 28px; }
.seg .ic.on { background: var(--ink); color: #fff; }
.pop { position: absolute; background: #fff; border: 1px solid var(--rule2); border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.14); padding: 10px 12px; min-width: 260px; z-index: 10; font-size: 13px; }
.pop h4 { margin: 0 0 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); }
.pop ul { list-style: none; margin: 0; padding: 0; }
.pop li { display: flex; align-items: center; gap: 6px; padding: 4px 0; }
.pop li a { flex: 1; text-decoration: none; color: var(--ink); }
.pop select, .pop input { font: inherit; width: 100%; margin-top: 6px; padding: 4px 6px; border: 1px solid var(--rule2); border-radius: 5px; }

/* rendered asciidoc */
.adoc { font-family: var(--serif); font-size: 17px; line-height: 1.55; max-width: 46rem; }
.adoc h1 { font-family: var(--sans); font-size: 26px; line-height: 1.2; margin: 0 0 6px; }
.adoc h2 { font-family: var(--sans); font-size: 19px; margin: 22px 0 8px; }
.adoc h3 { font-family: var(--sans); font-size: 16px; margin: 16px 0 6px; }
.adoc .meta { font-family: var(--mono); font-size: 12px; color: var(--faint); margin-bottom: 14px; }
.adoc p { margin: 0 0 10px; }
.adoc ul, .adoc ol { padding-left: 1.4em; margin: 4px 0 10px; }
.adoc li { margin: 2px 0; }
.adoc li p { margin: 0; }
.adoc table { border-collapse: collapse; width: 100%; margin: 10px 0; font-size: 15px; }
.adoc th, .adoc td { border: 1px solid var(--rule2); padding: 4px 8px; text-align: left; vertical-align: top; }
.adoc th { background: #f4f1ea; font-family: var(--sans); font-size: 13px; }
.adoc blockquote, .adoc .quoteblock { border-left: 3px solid var(--rule2); margin: 10px 0; padding: 2px 14px; color: var(--muted); }
.adoc hr { border: 0; border-top: 1px solid var(--rule2); margin: 18px 0; }
.adoc .admonitionblock td.icon { display: none; }
.adoc #toc { display: none; }

/* report view */
.report-frame { width: 100%; height: calc(100vh - 140px); border: 1px solid var(--rule); border-radius: 6px; background: #fff; }

/* settings */
.settings h2 { font-size: 15px; margin: 22px 0 8px; }
.settings table { border-collapse: collapse; width: 100%; font-size: 13px; }
.settings td, .settings th { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--rule); }
.settings th { color: var(--muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; }
.settings code.key { font-family: var(--mono); background: #f1efe9; padding: 4px 8px; border-radius: 4px; user-select: all; }
.btn { display: inline-block; border: 1px solid var(--rule2); border-radius: 6px; padding: 5px 12px; background: #fff; font-weight: 600; font-size: 13px; color: var(--ink); cursor: pointer; }
.btn.primary { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn.sm { padding: 2px 8px; font-size: 12px; }
.btn.warn { color: var(--no); border-color: #e4b1b9; }
input.txt { font: inherit; padding: 5px 8px; border: 1px solid var(--rule2); border-radius: 6px; }

/* rail */
#rail .group { font-size: 11px; color: var(--faint); text-transform: uppercase; letter-spacing: .5px; margin: 6px 0 6px; display: flex; align-items: center; gap: 4px; }
#rail .card { border: 1px solid var(--rule2); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; background: #fff; font-size: 12.5px; }

/* login */
.login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: #f6f7f8; }
.login-box { background: #fff; border: 1px solid var(--rule2); border-radius: 10px; padding: 26px 30px; width: 340px; text-align: center; }
.login-box .t { font-weight: 700; font-size: 18px; margin-bottom: 4px; }
.login-box .s { color: var(--muted); margin-bottom: 16px; }
.login-box .btn { width: 100%; padding: 9px; }
.login-box .foot { margin-top: 14px; font-size: 12px; }
.login-box form { text-align: left; margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.login-box label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.login-box input { font: inherit; padding: 6px 8px; border: 1px solid var(--rule2); border-radius: 6px; }

/* ---- editor (CodeMirror) ---- */
.editor-wrap { max-width: 50rem; }
.cm-editor { outline: none !important; }
.cm-editor .cm-scroller { font-family: inherit; line-height: 1.55; overflow: visible; }
.cm-editor .cm-content { font-family: var(--serif); font-size: 17px; padding: 8px 0 40vh; color: var(--ink); caret-color: var(--ink); }
.cm-editor .cm-line { padding: 1px 4px; }
.cm-editor .cm-activeLine { background: rgba(31, 35, 40, .035); }
.cm-editor .cm-selectionBackground, .cm-editor.cm-focused .cm-selectionBackground { background: #cfe3ff !important; }
.cm-editor .cm-hd { font-family: var(--sans); font-weight: 700; }
.cm-editor .cm-hd1 { font-size: 26px; line-height: 1.25; padding-top: 4px; }
.cm-editor .cm-hd2 { font-size: 19px; padding-top: 14px; }
.cm-editor .cm-hd3 { font-size: 16px; padding-top: 10px; }
.cm-editor .cm-hd4 { font-size: 15px; font-style: italic; }
.cm-editor .cm-attr { font-family: var(--mono); font-size: 12px; color: var(--faint); }
.cm-editor .cm-comment { color: var(--faint); font-style: italic; }
.cm-editor .cm-delim { color: var(--faint); font-family: var(--mono); font-size: 12px; }
.cm-editor .cm-marker { color: #c3c8ce; font-family: var(--mono); font-size: 0.8em; }
.cm-editor .cm-strong { font-weight: 700; }
.cm-editor .cm-em { font-style: italic; }
.cm-editor .cm-mono { font-family: var(--mono); font-size: 0.9em; background: #f1efe9; border-radius: 3px; }

.cm-editor .cm-number .cm-marker { color: #9aa1a9; }
.save-state { font-size: 12px; color: var(--muted); }
.save-state.dirty { color: var(--warn-ink); }
.save-state.err { color: var(--no); }
.stale-note { border: 1px solid #f0d27a; background: #fff8dc; color: var(--warn-ink); border-radius: 6px; padding: 6px 10px; margin: 0 0 10px; font-size: 13px; }

/* ---- pending page ---- */
.dfile { border: 1px solid var(--rule2); border-radius: 8px; margin-bottom: 14px; overflow: hidden; background: var(--card); }
.dfile .fh { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--diff-bg); border-bottom: 1px solid var(--rule2); font-family: var(--mono); font-size: 12px; flex-wrap: wrap; }
.dfile .fh .by { font-family: var(--sans); color: var(--muted); }
.dfile .fh .stat { margin-left: auto; font-family: var(--sans); font-size: 12px; }
.dfile .fh .stat .p { color: var(--ok); } .dfile .fh .stat .m { color: var(--no); }
.udiff { font-family: var(--mono); font-size: 12.5px; line-height: 1.45; white-space: pre-wrap; margin: 0; padding: 6px 0; overflow-x: auto; }
.udiff .hunk { color: var(--muted); background: var(--hunk-bg); display: block; padding: 0 12px; }
.udiff .c { display: block; padding: 0 12px; }
.udiff .d { display: block; padding: 0 12px; background: var(--del-bg); color: var(--del-ink); }
.udiff .a { display: block; padding: 0 12px; background: var(--add-bg); color: var(--add-ink); }
.udiff .meta { display: block; padding: 0 12px; color: var(--faint); }
.warnbox { border: 1px solid #f0d27a; background: #fff8dc; color: var(--warn-ink); border-radius: 6px; padding: 6px 12px; margin: 8px 12px; font-size: 13px; }
.errbox { border: 1px solid var(--no); background: var(--del-bg); color: var(--no); border-radius: 6px; padding: 6px 12px; margin: 8px 12px; font-size: 13px; }
.commit-row { display: flex; gap: 10px; align-items: flex-start; margin-top: 8px; max-width: 50rem; }
.commit-row textarea { flex: 1; font: inherit; padding: 8px 10px; border: 1px solid var(--rule2); border-radius: 6px; min-height: 52px; resize: vertical; }
.form { display: flex; flex-direction: column; gap: 8px; }
.form label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); }
.form input, .form select { font: inherit; padding: 5px 8px; border: 1px solid var(--rule2); border-radius: 6px; }

/* ---- task rail cards ---- */
#rail .group.ready, #rail .group.done { color: var(--ok); }
#rail .group.queued { color: var(--faint); }
#rail .group.in_progress { color: var(--accent); }
#rail .card { border: 1px solid var(--rule2); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; background: var(--card); font-size: 12.5px; color: var(--ink); }
#rail .card .card-head { cursor: pointer; }
#rail .card .who { display: flex; gap: 6px; align-items: center; color: var(--muted); font-size: 11px; margin-bottom: 3px; }
#rail .card .who b { color: var(--ink); }
#rail .card .who .k { margin-left: auto; color: var(--faint); }
#rail .card .title { font-weight: 600; margin-bottom: 3px; }
#rail .card .why { color: var(--ink); opacity: .85; margin-bottom: 6px; white-space: pre-wrap; }
#rail .card .why.clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#rail .card .other { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 11px; background: var(--tag-bg); border-radius: 4px; padding: 0 6px; margin-bottom: 4px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#rail .card .diff { font-family: var(--mono); font-size: 11px; line-height: 1.35; background: var(--diff-bg); border-radius: 4px; padding: 5px 6px; margin: 4px 0 6px; white-space: pre-wrap; max-height: 260px; overflow: auto; }
#rail .card .diff .d { background: var(--del-bg); color: var(--del-ink); display: block; }
#rail .card .diff .a { background: var(--add-bg); color: var(--add-ink); display: block; }
#rail .card .diff .h { color: var(--faint); display: block; }
#rail .card .diff .c { display: block; }
#rail .card .msg { border-top: 1px dashed var(--rule); padding-top: 5px; margin-top: 5px; white-space: pre-wrap; }
#rail .card .msg .who { margin-bottom: 1px; }
#rail .card textarea.reply { width: 100%; font: inherit; font-size: 12px; border: 1px solid var(--rule2); border-radius: 5px; padding: 4px 6px; margin: 6px 0 4px; resize: vertical; background: var(--card); color: var(--ink); }
#rail .card .acts { display: flex; gap: 2px; }
#rail .card .acts .ic { width: 28px; height: 28px; }
#rail .card .acts .ic.ok { color: var(--ok); } #rail .card .acts .ic.no { color: var(--no); }
#rail .card.dn { border-left: 4px solid var(--ok); }
#rail .card.q { border: 1.5px dashed var(--card-q-rule); color: var(--card-q-ink); background: var(--card-q); }
#rail .card.ip { border: 1.5px solid var(--accent); background: var(--card-ip); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 2px var(--pulse); } 50% { box-shadow: 0 0 0 5px var(--pulse2); } }
#rail .card .prog { display: flex; align-items: center; gap: 6px; color: var(--accent); font-size: 11px; margin: -2px 0 6px; font-weight: 600; }
#rail .card .prog .sp { width: 10px; height: 10px; border: 2px solid var(--pulse); border-top-color: var(--accent); border-radius: 50%; flex: none; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
#rail .card.sel { box-shadow: 0 0 0 2px var(--accent-bg); }
#rail .card.dim { opacity: .75; }
#rail .card .stale-tag { color: var(--no); font-size: 11px; }

/* ---- editor: selection toolbar and patch preview ---- */
.float-tb { position: absolute; display: inline-flex; gap: 2px; background: var(--ink); border-radius: 7px; padding: 3px; box-shadow: 0 2px 8px rgba(0,0,0,.28); z-index: 20; }
.float-tb .ic { color: #e6e8eb; width: 28px; height: 28px; }
.float-tb .ic:hover { background: #3a3f45; color: #fff; }
.cm-editor .cm-task-range { background: var(--pulse2); }
.cm-editor .cm-patch-del { background: var(--del-bg); text-decoration: line-through; text-decoration-color: #c93c4e; }
.cm-editor .cm-patch-add { background: var(--add-bg); color: var(--add-ink); padding: 1px 4px; white-space: pre-wrap; font-family: inherit; }
.cm-editor .cm-patch-add::before { content: '+ '; color: #1a7f37; font-family: var(--mono); font-size: .8em; }
.series-bar { display: flex; text-decoration: none; color: var(--ink); cursor: pointer; align-items: center; gap: 10px; padding: 6px 10px; margin: -6px 0 12px; border: 1px solid var(--rule); border-radius: 8px; background: #fff; }
.series-bar .em { font-size: 22px; }
.series-bar .st { font-weight: 600; }
.series-bar .sd { color: var(--muted); font-size: 13px; flex: 1; }
.series-bar .right { display: flex; gap: 2px; }

/* ---- left rail: the series ---- */
#left { width: 240px; flex: none; border-right: 1px solid var(--rule); background: #fff; padding: 10px 8px; position: sticky; top: 50px; height: calc(100vh - 50px); overflow: auto; font-size: 13px; }
#left.collapsed { width: 44px; padding: 8px 6px; }
#left .lh { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; }
#left .lt { flex: 1; font-weight: 600; color: var(--ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#left ul.lrows { list-style: none; margin: 0; padding: 0; }
#left ul.lrows li a { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 6px; color: var(--ink); text-decoration: none; }
#left ul.lrows li a:hover { background: var(--hover); }
#left ul.lrows li.cur a { background: #e6e8eb; font-weight: 600; }
#left ul.lrows li.drafted .t::after { content: ' ●'; color: var(--warn); font-size: 9px; vertical-align: middle; }
#left ul.lrows .d { color: var(--faint); font-size: 11px; min-width: 44px; font-variant-numeric: tabular-nums; }
#left ul.lrows .t { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#left ul.lrows .n { background: var(--accent); color: #fff; font-size: 10px; border-radius: 999px; padding: 0 5px; }
@media (max-width: 1100px) { #left { display: none; } }

/* ---- reading pane ---- */
.editor-row { display: flex; gap: 18px; align-items: flex-start; }
.editor-row #body { flex: 1; min-width: 0; }
#pane { width: 520px; flex: none; border: 1px solid var(--rule); border-radius: 8px; background: #fff; position: sticky; top: 60px; height: calc(100vh - 80px); display: flex; flex-direction: column; overflow: hidden; }
#pane .ph { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-bottom: 1px solid var(--rule); background: var(--panel); font-size: 12px; }
#pane .ph select { flex: 1; font: inherit; font-size: 12px; border: 1px solid var(--rule2); border-radius: 5px; padding: 3px 6px; background: #fff; min-width: 0; }
#pane .pane-frame { flex: 1; border: 0; width: 100%; }
@media (max-width: 1500px) { body.with-pane #rail { display: none; } body.with-pane #left { display: none; } }
.search { width: 220px; margin-right: 6px; }

/* ---- live mode: real bullets where the markers are hidden ---- */
.cm-editor .cm-li.cm-quiet { position: relative; }
.cm-editor .cm-li.cm-quiet::before { content: '•'; position: absolute; left: calc(var(--lvl, 1) * 1.5em - 1.1em); color: var(--muted); }
.cm-editor .cm-li.cm-quiet.cm-bullet::before { content: '◦'; }
.cm-editor .cm-li.cm-quiet.cm-li1::before { left: .4em; } .cm-editor .cm-li.cm-quiet.cm-li2::before { left: 1.9em; } .cm-editor .cm-li.cm-quiet.cm-li3::before { left: 3.4em; }
.cm-editor .cm-li.cm-quiet.cm-li4::before { left: 4.9em; } .cm-editor .cm-li.cm-quiet.cm-li5::before { left: 6.4em; } .cm-editor .cm-li.cm-quiet.cm-li6::before { left: 7.9em; }
.cm-editor.cm-live .cm-attr { font-size: 11px; opacity: .7; }
.ic[disabled] { opacity: .35; cursor: default; }

.cm-editor .cm-selectionLayer { z-index: 0 !important; }
.cm-editor .cm-content { position: relative; z-index: 1; }
.cm-editor .cm-line.cm-hidden-line { height: 0; line-height: 0; font-size: 0; padding: 0; overflow: hidden; }

/* ---- live mode: header fields ---- */
.cm-editor .cm-attr-live { font-family: var(--sans); font-size: 13px; }
.cm-attrw { display: inline-flex; align-items: center; gap: 8px; }
.cm-attrw .k { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--faint); min-width: 72px; }
.cm-attrw input { font: inherit; font-size: 13px; color: var(--ink); border: 0; border-bottom: 1px dashed var(--rule2); background: transparent; padding: 1px 2px; min-width: 14em; outline: none; }
.cm-attrw input:focus { border-bottom-color: var(--accent); }
.cm-attradd { display: flex; gap: 6px; padding: 2px 0 6px; }
.cm-attradd button { font: inherit; font-size: 11px; color: var(--faint); background: none; border: 1px dashed var(--rule2); border-radius: 999px; padding: 0 8px; cursor: pointer; }
.cm-attradd button:hover { color: var(--ink); border-color: var(--rule2); background: var(--hover); }

/* ---- dark theme: the same tokens, redefined ---- */
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="dark"], :root:not([data-theme="light"]):not([data-theme="dark"]).sys-dark {
  --ink: #e6e8eb; --muted: #a3acb5; --faint: #7d8590; --rule: #2b3138; --rule2: #3a424b;
  --bg: #121417; --panel: #181b1f; --hover: #22272e; --accent: #7fb0e0; --accent-bg: #1f2e3d;
  --warn: #d4a72c; --warn-ink: #e3c26a; --ok: #56b87a; --no: #f08d99;
  --card: #1b1f24; --card-q: #15181c; --card-q-ink: #8b949e; --card-q-rule: #3a424b; --card-ip: #172130; --pulse: #24364a; --pulse2: #1c2a3a;
  --diff-bg: #15181c; --del-bg: #3d1f24; --del-ink: #f6b3bb; --add-bg: #1c3524; --add-ink: #a7e0b6; --tag-bg: #262b31; --hunk-bg: #1f2a36;
}
:root[data-theme="dark"] body, :root.sys-dark:not([data-theme="light"]) body { background: var(--bg); }
:root[data-theme="dark"] #rail, :root[data-theme="dark"] #left, :root[data-theme="dark"] .pop,  :root[data-theme="dark"] .dfile, :root[data-theme="dark"] .series-bar, :root[data-theme="dark"] #pane, :root[data-theme="dark"] .login-box, :root[data-theme="dark"] .btn, :root[data-theme="dark"] .chip, :root[data-theme="dark"] input, :root[data-theme="dark"] select, :root[data-theme="dark"] textarea,
:root.sys-dark:not([data-theme="light"]) #rail, :root.sys-dark:not([data-theme="light"]) #left, :root.sys-dark:not([data-theme="light"]) .pop,  :root.sys-dark:not([data-theme="light"]) .dfile, :root.sys-dark:not([data-theme="light"]) .series-bar, :root.sys-dark:not([data-theme="light"]) #pane, :root.sys-dark:not([data-theme="light"]) .login-box, :root.sys-dark:not([data-theme="light"]) .btn, :root.sys-dark:not([data-theme="light"]) .chip, :root.sys-dark:not([data-theme="light"]) input, :root.sys-dark:not([data-theme="light"]) select, :root.sys-dark:not([data-theme="light"]) textarea { background: var(--panel); color: var(--ink); }
:root[data-theme="dark"] .ic.on, :root.sys-dark:not([data-theme="light"]) .ic.on { background: #2b3138; }
:root[data-theme="dark"] .cover, :root.sys-dark:not([data-theme="light"]) .cover { background: #22272e; }
:root[data-theme="dark"] .cover.sel, :root.sys-dark:not([data-theme="light"]) .cover.sel { border-color: var(--ink); }
:root[data-theme="dark"] .seg .ic.on, :root.sys-dark:not([data-theme="light"]) .seg .ic.on { background: var(--ink); color: var(--bg); }
:root[data-theme="dark"] .btn.primary, :root.sys-dark:not([data-theme="light"]) .btn.primary { background: var(--ink); color: var(--bg); border-color: var(--ink); }
:root[data-theme="dark"] .cm-editor .cm-activeLine, :root.sys-dark:not([data-theme="light"]) .cm-editor .cm-activeLine { background: rgba(255,255,255,.04); }
:root[data-theme="dark"] .cm-editor .cm-selectionBackground, :root.sys-dark:not([data-theme="light"]) .cm-editor .cm-selectionBackground { background: #2f4a66 !important; }
:root[data-theme="dark"] .cm-editor .cm-marker, :root.sys-dark:not([data-theme="light"]) .cm-editor .cm-marker { color: #4d565f; }
:root[data-theme="dark"] .cm-editor .cm-mono, :root.sys-dark:not([data-theme="light"]) .cm-editor .cm-mono, :root[data-theme="dark"] code, :root.sys-dark:not([data-theme="light"]) code { background: #22272e; }
:root[data-theme="dark"] .warnbox, :root.sys-dark:not([data-theme="light"]) .warnbox, :root[data-theme="dark"] .stale-note, :root.sys-dark:not([data-theme="light"]) .stale-note { background: #332b12; border-color: #5c4a14; }
:root[data-theme="dark"] .adoc th, :root.sys-dark:not([data-theme="light"]) .adoc th, :root[data-theme="dark"] .dfile .fh, :root.sys-dark:not([data-theme="light"]) .dfile .fh { background: #1f242a; }
:root[data-theme="dark"] .report-frame, :root.sys-dark:not([data-theme="light"]) .report-frame, :root[data-theme="dark"] .pane-frame, :root.sys-dark:not([data-theme="light"]) .pane-frame { background: #fdfdfb; }

/* ---- rail resize grip ---- */
.rail-grip { width: 6px; flex: none; cursor: col-resize; margin-right: -3px; margin-left: -3px; z-index: 2; background: transparent; }
.rail-grip:hover, body.resizing .rail-grip { background: var(--accent-bg); }
body.resizing { user-select: none; cursor: col-resize; }
body.resizing iframe { pointer-events: none; }
@media (max-width: 1100px) { .rail-grip { display: none; } }
body.with-pane .rail-grip { display: none; }
@media (min-width: 1500px) { body.with-pane .rail-grip { display: block; } }