/* 本体ダッシュボードの CSS のコピー（コメントのみ除去）。直接編集しない — tools/sync-real.mjs で本体から同期する */


:root {
  
  color-scheme: light dark;
  --bg: #f6f7fa;
  --surface: #ffffff;
  --surface-2: #eef0f5;
  --ink: #1c2333;
  --muted: #5a6478;
  --faint: #8b93a7;
  --line: #dfe3ec;
  --accent: #3a56b4;
  --accent-soft: #e7ebf8;
  --ok: #257d55;
  --ok-soft: #e2f2ea;
  --warn: #9a6b12;
  --warn-soft: #f7edd6;
  --crit: #b03a37;
  --crit-soft: #f9e5e4;
  --review: #22707e;
  --review-soft: #dff0f2;
  --hover: #f0f3fa;
  
  --code-bg: #edeff6;
  --code-line: #ccd3e4;
  
  --gauge-track: #b0b8cc;
  
  --diff-del-bg: #ffebe9;
  --diff-add-bg: #dafbe1;
  --diff-del-ink: #cf222e;
  --diff-add-ink: #1a7f37;
  
  --diff-add-row: #e2fbe8;
  --diff-del-row: #ffe9e7;
  --diff-add-gut: #c6f6d0;
  --diff-del-gut: #ffd3d0;
  
  --slack: #611f69;
  --mono: "SF Mono", ui-monospace, Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #12151d;
    --surface: #1a1f2b;
    --surface-2: #222837;
    --ink: #e8ebf2;
    --muted: #a3acc1;
    --faint: #6f788d;
    --line: #2b3244;
    --accent: #90a5ee;
    --accent-soft: #232c47;
    --ok: #57c28f;
    --ok-soft: #1b3229;
    --warn: #dcb04d;
    --warn-soft: #372c15;
    --crit: #e57a76;
    --crit-soft: #3c211f;
    --review: #62b9c6;
    --review-soft: #16333a;
    --hover: #202636;
    
    --code-bg: #2c3346;
    --code-line: #434c67;
    --gauge-track: #4a536b;
    --diff-del-bg: rgba(248, 81, 73, 0.16);
    --diff-add-bg: rgba(46, 160, 67, 0.18);
    --diff-del-ink: #f85149;
    --diff-add-ink: #3fb950;
    --diff-add-row: rgba(63, 185, 80, 0.22);
    --diff-del-row: rgba(248, 81, 73, 0.20);
    --diff-add-gut: rgba(63, 185, 80, 0.38);
    --diff-del-gut: rgba(248, 81, 73, 0.34);
    --slack: #b47cc4; 
  }
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }
html, body { margin: 0; }

body {
  min-height: 100vh;
  display: flex;
  background: var(--bg);
  color: var(--ink);
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  font-size: 14.5px;
  line-height: 1.75;
}
.content { flex: 1 1 auto; min-width: 0; padding: 20px 24px 60px; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible, tr:focus-visible, .run-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.muted { color: var(--faint); font-size: 12px; }
.mono { font-family: var(--mono); }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.sidebar {
  flex: none;
  width: 210px;
  position: sticky;
  top: 0;
  align-self: flex-start; 
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-right: 1px solid var(--line);
  padding: 12px 10px;
}
body.nav-collapsed .sidebar { width: 58px; padding-left: 8px; padding-right: 8px; }
body.nav-collapsed .sb-label { display: none; }

.sb-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 10px 24px;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--ink);
}
.sb-brand:hover { text-decoration: none; }

.sb-mark {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  object-fit: cover;
  background: var(--surface-2);
}
body.nav-collapsed .sb-brand { justify-content: center; padding-left: 0; padding-right: 0; }

.sb-nav {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 10px;
  margin: 0 -10px;
}

.sb-group { display: flex; flex-direction: column; gap: 6px; }
.sb-group + .sb-group { margin-top: 18px; }
.sb-glabel {
  padding: 0 10px 1px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--faint);
}
body.nav-collapsed .sb-group + .sb-group {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.sb-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 10px;
  border-radius: 8px;
  color: var(--muted);
  font-size: 13.5px;
}
.sb-item:hover { background: var(--hover); color: var(--ink); text-decoration: none; }
.sb-item.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }

.sb-item.on::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 11px;
  bottom: 11px;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: var(--accent);
}
.sb-item .icon { width: 17px; height: 17px; }
.sb-item .navbadge { margin-left: auto; }

.sb-alert { margin-left: auto; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--crit); }
body.nav-collapsed .sb-item { justify-content: center; padding: 11px 0; }
body.nav-collapsed .sb-item.on::before { left: -8px; }
body.nav-collapsed .sb-item .navbadge {
  position: absolute;
  top: 2px;
  right: 3px;
  margin: 0;
  min-width: 15px;
  line-height: 14px;
  font-size: 9.5px;
  padding: 0 4px;
}
body.nav-collapsed .sb-alert { position: absolute; top: 5px; right: 8px; margin: 0; }

.sb-foot { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--line); }

.sb-status {
  display: block;
  padding: 6px 8px 7px;
  border-radius: 8px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--faint);
}
.sb-status:hover { background: var(--hover); color: var(--faint); text-decoration: none; }
.sb-srow { display: flex; align-items: center; gap: 7px; min-width: 0; }
.sb-gauge + .sb-gauge,
.sb-slotrow + .sb-slotrow { margin-top: 6px; }
.sb-shead { margin-bottom: 8px; }
.sb-shead .sb-lv { font-size: 11px; padding: 1px 7px; }

.sb-status .num { margin-left: auto; min-width: 26px; text-align: right; color: var(--muted); }

.sb-bar { flex: 1; min-width: 0; max-width: 72px; height: 6px; margin: 0; }

.sb-gauge + .sb-slotrow { margin-top: 9px; } 
.sb-slabel { width: 58px; flex: none; }

.sb-status .slotbox { gap: 3px; width: 72px; flex: none; flex-wrap: nowrap; }
.sb-status .slotbox .slot {
  flex: 0 1 12px;
  width: auto;
  min-width: 0;
  height: 8px;
  border-radius: 2px;
  border-width: 1px;
}
body.nav-collapsed .sb-status { padding: 6px 3px 7px; }
body.nav-collapsed .sb-shead { justify-content: center; margin-bottom: 7px; }

body.nav-collapsed .sb-shead .sb-lv {
  padding: 0;
  background: none;
  font-size: 0;
}
body.nav-collapsed .sb-shead .sb-lv .icon { width: 17px; height: 17px; margin: 0; }

body.nav-collapsed .sb-slotrow { display: none; }

.sb-health {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px 10px 8px;
  font-size: 11.5px;
  color: var(--faint);
  line-height: 1.6;
}
.sb-hline { display: flex; align-items: center; min-width: 0; }
.sb-hline .dot { flex: none; }
.sb-hline .sb-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.nav-collapsed .sb-health { align-items: center; padding-left: 0; padding-right: 0; }
body.nav-collapsed .sb-hline .dot { margin-right: 0; }
.sb-collapse {
  font: inherit;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 7px 10px;
  border: none;
  border-radius: 8px;
  background: none;
  color: var(--faint);
  cursor: pointer;
}
.sb-collapse:hover { background: var(--hover); color: var(--ink); }
.sb-collapse .icon { width: 16px; height: 16px; }
body.nav-collapsed .sb-collapse { justify-content: center; padding-left: 0; padding-right: 0; }

.page-head {
  position: sticky;
  top: 0;
  z-index: 5;
  margin: -20px -24px 16px;
  padding: 20px 24px 10px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}
.ghost-btn {
  font: inherit;
  font-size: 12px;
  margin-left: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 2px 12px;
  color: var(--muted);
  background: var(--surface);
  cursor: pointer;
}
.ghost-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.ghost-btn:disabled { opacity: 0.5; cursor: default; }
.page-head h1 { font-size: 19px; margin: 0; font-weight: 700; }
.page-head h1 a { color: var(--ink); }

.health { display: inline-flex; gap: 14px; align-items: baseline; font-size: 12px; flex-wrap: wrap; }

.badge {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  border-radius: 5px;
  padding: 2px 9px;
  white-space: nowrap;
  line-height: 1.6;
}
.b-run { background: var(--accent-soft); color: var(--accent); }
.b-ok { background: var(--ok-soft); color: var(--ok); }
.b-warn { background: var(--warn-soft); color: var(--warn); }
.b-crit { background: var(--crit-soft); color: var(--crit); }
.b-rev { background: var(--review-soft); color: var(--review); }
.b-mute { background: var(--surface-2); color: var(--faint); }

.b-sched { background: var(--surface-2); color: var(--accent); }

.b-hold { background: var(--surface-2); color: var(--ink); }

.b-rank3 { background: var(--muted); color: var(--surface); }
.b-rank2 { background: var(--surface-2); color: var(--ink); }
.b-rank1 { background: var(--surface-2); color: var(--faint); }
.chip {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 11px;
  color: var(--muted);
  white-space: nowrap;
  background: var(--surface);
}

a.chip { color: var(--accent); }
a.chip:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); text-decoration: none; }
span.chip { background: var(--surface-2); border-color: transparent; }

.ir-ticket .ir-ticket-id { font-family: var(--mono); font-size: 11.5px; font-weight: 600; }
.ir-ticket .spm { margin-left: 9px; }
.ir-ticket .spm-v { gap: 2px; }
.ir-ticket .spm-v b { font-size: 11.5px; }
.ir-ticket .spm-u { font-size: 9px; }
.ir-ticket .spm-bar { width: 28px; height: 4px; }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; vertical-align: 1px; }
.dot.live { background: var(--ok); animation: pulse 1.6s ease-in-out infinite; }
.dot.dead { background: var(--crit); }
@keyframes pulse { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .dot.live { animation: none; } }

.show-scrollbar::-webkit-scrollbar { width: 10px; height: 10px; }

.show-scrollbar::-webkit-scrollbar-track,
.show-scrollbar::-webkit-scrollbar-corner {
  background: color-mix(in srgb, var(--gauge-track) 32%, transparent);
}
.show-scrollbar::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--faint) 65%, transparent);
  border-radius: 999px;
  
  border: 2px solid transparent;
  background-clip: padding-box;
}
.show-scrollbar::-webkit-scrollbar-thumb:hover { background: var(--faint); background-clip: padding-box; }

.ovcards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
  align-items: stretch;
}
.ovcard {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 13px 16px;
  min-width: 0;
}
.ovcard.guard-warn { border-color: var(--warn); }
.ovcard.guard-crit { border-color: var(--crit); box-shadow: 0 0 0 1px var(--crit); }
.ovcard .t {
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--faint);
  margin-bottom: 7px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4px 8px;
  
  flex-wrap: wrap;
  min-height: 22px; 
}

.ovcard .t > span { display: inline-flex; align-items: center; min-width: 0; }
.ovcard .big { font-size: 16px; font-weight: 700; margin-bottom: 4px; }

.big-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 2px 10px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.big-row .big { margin-bottom: 0; }
.ovcard .rest { font-size: 12.5px; color: var(--muted); line-height: 1.7; overflow-wrap: anywhere; }
.ovcard .rest .logline {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.seg { display: inline-flex; gap: 3px; }
.seg button {
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 1px 9px;
  color: var(--muted);
  background: var(--surface);
  cursor: pointer;
}
.seg button:hover:not(.on) { border-color: var(--accent); color: var(--accent); }
.seg button.on { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }

.seg a { font-size: 11px; border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; color: var(--muted); }
.seg a:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.seg a.on { background: var(--accent); color: var(--bg); border-color: var(--accent); }

.spm { display: inline-flex; align-items: center; gap: 6px; }
.spm-v { display: inline-flex; align-items: baseline; gap: 3px; }

.spm-v b { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.spm-u { font-size: 9.5px; color: var(--faint); }
.spm-bar { flex: none; width: 40px; height: 4px; border-radius: 2px; background: var(--gauge-track); overflow: hidden; }
.spm-bar i { display: block; height: 100%; border-radius: 2px; background: var(--muted); }

.spm.stack { flex-direction: column; align-items: flex-end; gap: 3px; }
.spm.stack .spm-v b { font-size: 15px; }

.spm.none .spm-v b { color: var(--faint); }
.spm.none .spm-bar { opacity: 0.4; }

.spm.over .spm-v b { color: var(--faint); text-decoration: line-through; }
.spm.over .spm-bar i { background: var(--faint); }

.gauge { margin-bottom: 7px; }

.gauge-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 8px; font-size: 12px; }
.gauge-head > span:last-child { white-space: nowrap; margin-left: auto; }
.gauge-bar {
  position: relative;
  height: 9px;
  background: var(--gauge-track);
  border-radius: 4px;
  margin: 3px 0 2px;
  
}
.gauge-bar i { display: block; height: 100%; border-radius: 4px; }
.gauge-bar i.ok { background: var(--ok); }
.gauge-bar i.warn { background: var(--warn); }
.gauge-bar i.crit { background: var(--crit); }

.gauge-bar i.stale { background: var(--muted); }
.gauge-bar .tick {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  margin-left: -1px;
  background: var(--ink);
  border-radius: 1px;
  opacity: 0.75;
}

.gauge-bar .tick.pick {
  top: -5px;
  bottom: -5px;
  background: var(--accent);
  box-shadow: 0 0 0 1px var(--surface);
  opacity: 1;
}

.t-actions { display: inline-flex; align-items: center; gap: 6px; }

.ghost-btn.icon-btn { margin-left: 0; padding: 3px 5px; line-height: 0; }

.costbar {
  display: flex;
  height: 9px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--surface-2);
  margin: 4px 0 5px;
}
.costbar i { display: block; height: 100%; }

.cseg-out { background: var(--accent); }
.cseg-cr { background: var(--review); }
.cseg-cw { background: var(--ok); }
.cseg-in { background: var(--warn); }
.cost-legend { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 11px; color: var(--muted); }
.cost-legend .lgsq { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 7px 12px; margin: 9px 0 4px; }
.stat .lb { font-size: 10.5px; color: var(--faint); line-height: 1.4; white-space: nowrap; }
.stat .vl { font-size: 15.5px; font-weight: 700; color: var(--ink); line-height: 1.3; }
.model-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 5px; }
.model-chips .chip { font-size: 11px; padding: 1px 9px; }

.model-chip .price { color: var(--faint); font-size: 10.5px; margin-left: 6px; }

.slot-row { display: flex; align-items: center; gap: 10px; margin: 7px 0; font-size: 12.5px; }
.slot-label { width: 72px; flex-shrink: 0; }

.slot-row .day-gauge { flex: 1; min-width: 96px; max-width: 196px; }
.slot-outside { color: var(--warn); font-weight: 600; }

.slot-row > .num { margin-left: auto; }

.slot-row .slotbox { flex: 1; min-width: 0; }
.slot-row .slotbox .slot { flex: 0 1 26px; width: auto; min-width: 0; }
.slotbox { display: flex; gap: 5px; }

.slot {
  display: inline-block;
  width: 26px;
  height: 14px;
  border-radius: 4px;
  border: 1.5px dashed var(--line);
  background: transparent;
}
.slot.run { background: var(--accent); border: 1.5px solid var(--accent); }
.slot.wait { background: var(--warn); border: 1.5px solid var(--warn); }
.slot.pend { background: var(--faint); border: 1.5px solid var(--faint); opacity: 0.7; }

.slot-legend { display: flex; flex-wrap: wrap; gap: 3px 12px; font-size: 11.5px; margin-top: 8px; }
.slot-legend-item { display: inline-flex; align-items: center; gap: 5px; }
.slot.legend-sq { width: 12px; height: 10px; margin: 0; flex: none; }

.ctrl-sep { border-top: 1px solid var(--line); margin: 10px 0 8px; }
.ctrl-note { display: flex; align-items: flex-start; gap: 6px; font-size: 12px; margin: 4px 0; }

.ovcard .rest .ctrl-note .icon { flex: none; width: 13px; height: 13px; margin: 2.5px 0 0; }
.ctrl-warn .icon { color: var(--warn); }
.ctrl-crit .icon { color: var(--crit); }
.slot.legend-sq:first-child { margin-left: 0; }

.filters { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.filters button {
  font: inherit;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 15px;
  color: var(--muted);
  background: var(--surface);
  cursor: pointer;
}
.filters button:hover { border-color: var(--accent); color: var(--accent); }
.filters button.on { background: var(--accent); color: var(--bg); border-color: var(--accent); }

.tablewrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
table.jobs { border-collapse: collapse; width: 100%; min-width: 980px; font-size: 13.5px; }
table.jobs th {
  font-size: 11.5px;
  letter-spacing: 0.05em;
  color: var(--faint);
  text-align: left;
  padding: 10px;
  border-bottom: 1px solid var(--line);
  font-weight: 600;
  white-space: nowrap;
  background: var(--surface-2);
}
table.jobs td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.jobs tbody tr { cursor: pointer; }
table.jobs tbody tr:hover { background: var(--hover); }

table.jobs tbody tr.attn { background: color-mix(in srgb, var(--warn) 7%, transparent); }
table.jobs tbody tr.attn:hover { background: color-mix(in srgb, var(--warn) 14%, transparent); }
table.jobs tr:last-child td { border-bottom: none; }
table.jobs .jid { font-family: var(--mono); font-size: 12px; color: var(--ink); font-weight: 600; }
table.jobs .sub {
  color: var(--faint);
  font-size: 12px;
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
table.jobs .sm { color: var(--faint); font-size: 12px; white-space: nowrap; }

.ctxbar {
  display: block;
  width: 110px;
  height: 4px;
  border-radius: 2px;
  background: var(--gauge-track);
  margin: 4px 0 5px;
  overflow: hidden;
}
.ctxbar i { display: block; height: 100%; border-radius: 2px; }
.ctxbar i.ok { background: var(--ok); }
.ctxbar i.warn { background: var(--warn); }
.ctxbar i.crit { background: var(--crit); }

.ir-ctx,
.ctx-mini {
  display: inline-flex;
  align-items: center;
}
.ctx-mini { font-size: 11px; color: var(--faint); }
.ir-ctx .ctxbar,
.ctx-mini .ctxbar { width: 38px; height: 4px; margin: 0 0 0 7px; }

.dr-ctx .ctxbar { width: 26px; height: 3px; margin-left: 5px; }
table.jobs .cell-line { display: block; white-space: nowrap; }

table.jobs .spm.cell-line { display: flex; margin-top: 2px; }

table.jobs .link-line { display: flex; align-items: center; gap: 6px; }
table.jobs .link-line a { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
table.jobs .link-line a .icon { margin-right: 0; }
table.jobs td a { position: relative; z-index: 1; } 

.tstat { display: inline-flex; align-items: center; flex: none; }

.tstat-green { color: #448361; }
.tstat-red { color: #d44c47; }
.tstat-pink { color: #c14c8a; }
.tstat-blue { color: #337ea9; }
.tstat-gray { color: #a6a299; }
@media (prefers-color-scheme: dark) {
  .tstat-green { color: #2d9964; }
  .tstat-red { color: #cd4945; }
  .tstat-pink { color: #c94079; }
  .tstat-blue { color: #2e7cd1; }
  .tstat-gray { color: #7f7f7f; }
}

.pr-state { display: inline-flex; align-items: center; flex: none; }
.pr-state .icon { width: 13px; height: 13px; margin-right: 0; }
.pr-open { color: #1a7f37; }
.pr-merged { color: #8250df; }
.pr-closed { color: #cf222e; }
.pr-draft { color: var(--faint); }
@media (prefers-color-scheme: dark) {
  .pr-open { color: #3fb950; }
  .pr-merged { color: #a371f7; }
  .pr-closed { color: #f85149; }
}

body.detail,
body.split {
  height: 100vh;
  overflow: hidden;
}
body.detail .content,
body.split .content {
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding-bottom: 20px;
}

body.detail .page-head,
body.split .page-head { position: static; margin-bottom: 10px; flex-shrink: 0; }
.meta-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; flex-shrink: 0; }
.detail-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  
  grid-template-columns: 400px minmax(0, 1fr);
  gap: 16px;
}
@media (max-width: 980px) { .detail-grid { grid-template-columns: 320px minmax(0, 1fr); } }
#left-col { overflow-y: auto; min-width: 0; padding-right: 2px; }

#right-col { display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; }

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 13px 16px;
  margin-bottom: 12px;
}
.panel-title {
  font-size: 11.5px;
  letter-spacing: 0.05em;
  color: var(--faint);
  font-weight: 600;
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.panel-note { letter-spacing: 0; font-weight: 400; text-align: right; }
.note { margin: 0; font-size: 13.5px; white-space: pre-wrap; overflow-wrap: anywhere; }
.pending-item { border-left: 3px solid var(--warn); padding: 3px 11px; margin-bottom: 8px; font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; }
.pending-item .muted { display: block; }

.wait-panel { border-color: var(--warn); }
.wait-until { margin: 0 0 4px; font-size: 15px; font-weight: 700; }
.wait-until .muted { font-size: 12.5px; font-weight: 400; }
.wait-panel .note { font-size: 12.5px; line-height: 1.65; }
.wait-act { display: flex; margin-top: 9px; }
.wait-act .ghost-btn { margin-left: 0; }
.wait-result { margin: -6px 0 12px; }

.runs { font-size: 12.5px; color: var(--muted); }
.run-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 8px;
  margin: 0 -8px; 
  border-radius: 6px;
  line-height: 1.7;
  white-space: nowrap;
}
.run-row.clickable { cursor: pointer; }
.run-row.clickable:hover { background: var(--hover); }
.run-row.current { background: var(--accent-soft); }
.run-row.current .run-num { color: var(--accent); }
.run-row.gone { opacity: 0.55; }
.run-num { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--faint); width: 2.4em; flex: none; }
.run-time { font-size: 12px; color: var(--ink); flex: none; }
.run-mid { display: flex; align-items: baseline; gap: 6px; flex: 1; min-width: 0; overflow: hidden; }

.run-turns { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 11px; color: var(--faint); flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.run-flag {
  flex: none;
  font-size: 10.5px;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0 5px;
  color: var(--faint);
  line-height: 1.6;
}
.run-flag.warn { border-color: var(--warn); color: var(--warn); background: var(--warn-soft); }
.run-end { margin-left: auto; flex: none; }
.run-row .badge { font-size: 11px; padding: 1px 8px; line-height: 1.5; }
.run-row .badge .icon { width: 11px; height: 11px; }
.run-sep { color: var(--faint); font-size: 11px; text-align: center; margin: 4px 0; }
.tokrow { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); border-bottom: 1px dashed var(--line); padding: 3px 0; gap: 10px; }
.tokrow:last-child { border-bottom: none; }
.tokrow b { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; }
.tokrow.cost { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 6px; }
.tokrow.cost span { color: var(--ink); font-weight: 600; }

.rowcost {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--faint);
  margin-left: 10px;
  display: inline-block;
  min-width: 56px;
  text-align: right;
}
table.jobs a.sublink { font-size: 12px; }
.logpre {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.6;
  background: var(--surface-2);
  border-radius: 6px;
  padding: 8px 10px;
  overflow-x: auto;
  white-space: pre;
  margin: 8px 0 0;
}

.nowbar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 9px 14px;
  margin-bottom: 10px;
  font-size: 13.5px;
  flex-shrink: 0;
}
.nowbar-label { font-size: 11.5px; letter-spacing: 0.08em; color: var(--accent); font-weight: 700; flex-shrink: 0; }
.nowbar #now-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.nowbar .badge { margin-left: auto; flex-shrink: 0; }
.tl-controls { display: flex; gap: 18px; align-items: center; font-size: 13px; color: var(--muted); margin-bottom: 8px; flex-shrink: 0; flex-wrap: wrap; }
.tl-controls label { display: flex; gap: 6px; align-items: center; cursor: pointer; white-space: nowrap; }

.tl-wrap { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }

.jump-latest {
  position: absolute;
  
  right: 32px;
  bottom: 18px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.jump-latest:hover { border-color: var(--accent); color: var(--accent); }
.jump-latest .icon { width: 16px; height: 16px; }

.tl {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  position: relative; 
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 18px 14px 30px;
}

.composer { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; flex-shrink: 0; }

.composer-box { position: relative; display: flex; }
.composer textarea {
  font: inherit;
  font-size: 13.5px;
  line-height: 1.55;
  width: 100%;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  
  padding: 10px 66px 10px 12px;
  
  resize: none;
  min-height: 64px;
  max-height: 180px;
  overflow-y: auto;
}
.composer textarea:focus { outline: none; border-color: var(--accent); }
.composer textarea:disabled { opacity: 0.6; }
#composer-send { position: absolute; right: 9px; bottom: 9px; margin-left: 0; background: transparent; }

.composer-foot { display: flex; align-items: center; gap: 10px; }

#composer-stop { margin-left: auto; flex-shrink: 0; }
#composer-stop .icon { width: 12px; height: 12px; margin-right: 5px; vertical-align: -2px; }

.composer-stopped {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--warn);
  background: var(--warn-soft); border: 1px solid var(--warn);
  border-radius: 8px; padding: 6px 10px;
}
.composer-stopped .icon { flex-shrink: 0; }
#composer-note { font-size: 12px; color: var(--faint); min-width: 0; }
#composer-note.ok { color: var(--ok); }
#composer-note.err { color: var(--crit); }

.ev.flash { animation: evflash 1.6s ease-out; }
@keyframes evflash {
  0%, 35% { background: var(--accent-soft); }
  100% { background: transparent; }
}
@media (prefers-reduced-motion: reduce) { .ev.flash { animation: none; } }
.ev {
  
  position: relative; padding: 0 0 12px 20px; font-size: 13.5px;
  
  content-visibility: auto;
  contain-intrinsic-size: auto 44px;
}
.ev::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--line);
}
.ev::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--faint);
  z-index: 1; 
}
.ev.tool::before { border-color: var(--accent); }
.ev.think::before { border-color: var(--review); }
.ev.txt::before { border-color: var(--ok); }
.ev.usr::before { border-color: var(--warn); }
.ev .ts { font-family: var(--mono); font-size: 11px; color: var(--faint); margin-right: 8px; }
.ev .kind { font-size: 11.5px; font-weight: 700; margin-right: 6px; }
.ev.tool .kind { color: var(--accent); font-family: var(--mono); }
.ev.think .kind { color: var(--review); }
.ev.txt .kind { color: var(--ok); }
.ev.usr .kind { color: var(--warn); }

.ev .body { color: var(--muted); overflow-wrap: anywhere; }

.ev .body.full {
  color: var(--ink);
  border-left: 2px solid var(--ok);
  padding-left: 9px;
  margin-top: 3px;
}
.ev code {
  font-family: var(--mono);
  font-size: 12px;
  background: var(--surface-2);
  border-radius: 4px;
  padding: 0 5px;
  overflow-wrap: anywhere;
}

.ev details summary { cursor: pointer; color: var(--muted); border-radius: 5px; }
.ev details summary:hover { color: var(--ink); background: var(--hover); }

.ev details pre,
details.ev pre,
.ev .code-card pre {
  font-family: var(--mono);
  font-size: 12px;
  background: var(--surface-2);
  border-radius: 6px;
  padding: 8px 12px;
  margin: 6px 0 0;
  overflow-x: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--muted);
}

.ev .ev-note { color: var(--faint); font-size: 12px; }

.ev.act > summary,
.ev.act .act-line {
  display: flex;
  align-items: baseline;
  gap: 6px;
  overflow: hidden;
  white-space: nowrap;
  border-radius: 5px;
}

.ev.act > summary { cursor: pointer; list-style: none; padding: 1px 4px; margin-left: -4px; }
.ev.act > summary::-webkit-details-marker { display: none; }
.ev.act > summary:hover { background: var(--hover); }
.ev.act .ts { flex: none; }
.act-k {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--accent);
}
.act-k.navi { color: var(--review); }
.act-k .icon { width: 12px; height: 12px; }
.act-sub { flex: none; font-family: var(--mono); font-size: 11.5px; color: var(--muted); }

.act-t {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.act-note {
  flex: 0 5 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--faint);
  font-size: 12px;
}

.act-st { flex: none; margin-left: auto; padding-left: 8px; font-size: 11.5px; font-family: var(--mono); }
.act-st.run { color: var(--faint); font-style: italic; }
.act-st.ok,
.act-st.mute { color: var(--faint); }
.act-st.bad { color: var(--crit); font-weight: 700; }
.ev.act.failed > summary,
.ev.act.rich.failed .act-line { background: var(--crit-soft); }
.ev.act.failed::before { border-color: var(--crit); }
.act-body { margin-top: 4px; }
.act-h { font-size: 11.5px; font-weight: 700; color: var(--muted); margin-top: 6px; }
.act-h.muted { font-weight: 400; color: var(--faint); }

.longtext > pre { margin-top: 4px; }
.longtext > .md { margin-top: 4px; background: var(--surface-2); border-radius: 6px; padding: 8px 12px; }
.longtext > .muted { font-size: 12px; margin-top: 3px; }
.longtext.res-bad > pre,
.longtext.res-bad > .md { color: var(--ink); border-left: 3px solid var(--crit); }

.ev.act.rich .act-line { white-space: normal; }
.ev.act.rich .msg-item,
.ev.act.rich .kv-list,
.ev.act.rich > code { margin-top: 4px; }
.ev.act.rich > .ev-note { display: block; margin-top: 2px; }

.ev.orphan .kind { color: var(--faint); }
.ev.orphan.failed .kind { color: var(--crit); }

.ev.think .peek {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--faint);
  font-size: 12.5px;
}
.ev.think > summary { display: flex; align-items: baseline; gap: 6px; overflow: hidden; }

.tl-group {
  position: relative;
  
  padding: 0 0 6px 20px;
  font-size: 11px;
  content-visibility: auto;
  contain-intrinsic-size: auto 18px;
}

.tl-group::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--line);
}

.tl-group[open] { padding-bottom: 12px; }
.tl-group > summary {
  display: flex;
  align-items: baseline;
  gap: 6px;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
  border-radius: 5px;
  
  padding: 3px 4px 3px 61px;
  margin-left: -4px;
}
.tl-group > summary::-webkit-details-marker { display: none; }
.tl-group > summary:hover { background: var(--hover); }

.grp-mark { flex: none; color: var(--faint); letter-spacing: 2px; }
.grp-count { flex: none; color: var(--muted); }

.grp-stats {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--faint);
}
.grp-err { flex: none; margin-left: 8px; font-weight: 700; color: var(--crit); }
.grp-body { margin: 4px 0 0; padding-left: 10px; border-left: 2px solid var(--line); }

.grp-body > .ev { padding: 0 0 2px 0; font-size: 12.5px; }
.grp-body > .ev::before,
.grp-body > .ev::after { display: none; }

.diff {
  font-family: var(--mono);
  font-size: 12px;
  background: var(--surface-2);
  border-radius: 6px;
  padding: 6px 0;
  margin-top: 6px;
  overflow-x: auto;
}
.dline { display: flex; padding: 0 10px; white-space: pre-wrap; overflow-wrap: anywhere; }
.dline .dmark { flex: none; width: 14px; user-select: none; }
.dline .dtext { flex: 1; min-width: 0; }
.dline .dtext:empty::after { content: "\a0"; } 
.dline.ctx { color: var(--faint); }
.dline.del { background: var(--diff-del-bg); }
.dline.del .dmark { color: var(--diff-del-ink); font-weight: 700; }
.dline.add { background: var(--diff-add-bg); }
.dline.add .dmark { color: var(--diff-add-ink); font-weight: 700; }

.ev .prompt-body { margin-top: 4px; display: flex; flex-direction: column; gap: 6px; }
.sec-fold summary { font-size: 12px; color: var(--faint); display: inline-flex; align-items: center; gap: 4px; }
.sec-fold summary .icon { width: 12px; height: 12px; }
.sec-title { font-size: 11.5px; font-weight: 700; color: var(--muted); margin-top: 2px; }
.sec-body { overflow-wrap: anywhere; color: var(--ink); }

.msg-item {
  border-left: 3px solid var(--line);
  background: var(--surface-2);
  border-radius: 0 6px 6px 0;
  padding: 6px 11px;
}
.msg-item .msg-head {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 2px;
}
.msg-item .msg-head .icon { width: 12px; height: 12px; }
.msg-item .msg-text { overflow-wrap: anywhere; color: var(--ink); }

.msg-item.in.slack,

.msg-item.in.dashboard { border-left-color: var(--warn); background: var(--warn-soft); }
.msg-item.in.pr { border-left-color: var(--accent); }

.ev .kind.navi { color: var(--review); }
.ev.tool.navi::before { border-color: var(--review); }

.msg-item.out { border-left-color: var(--slack); }

.kv-list { margin-top: 4px; display: flex; flex-direction: column; gap: 2px; }
.kv-row { display: flex; gap: 8px; align-items: baseline; font-size: 12.5px; }
.kv-key { flex: none; font-family: var(--mono); color: var(--review); }
.kv-key::after { content: " →"; color: var(--faint); }
.kv-val { font-family: var(--mono); font-size: 12px; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }

.ev.sys { font-size: 12.5px; }
.ev.sys::before { border-color: var(--line); }
.ev.sys .kind { color: var(--faint); font-weight: 600; }

.tl-sep {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0;
  color: var(--faint);
  font-size: 12px;
}
.tl-sep::before,
.tl-sep::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.tl-sep span { display: inline-flex; align-items: center; gap: 5px; }
.tl-sep .icon { width: 12px; height: 12px; }
.ev .u-panel {
  border-left: 3px solid var(--warn);
  background: var(--surface-2);
  border-radius: 0 6px 6px 0;
  padding: 5px 11px;
  margin-top: 4px;
  overflow-wrap: anywhere;
  color: var(--ink);
}

:root {
  --hl-comment: #7c8598;
  --hl-string: #197a52;
  --hl-number: #9a5b12;
  --hl-keyword: #6a4bb8;
  --hl-attr: #1f6fa8;
}
@media (prefers-color-scheme: dark) {
  :root {
    --hl-comment: #6f788d;
    --hl-string: #7fd0a3;
    --hl-number: #e2b06a;
    --hl-keyword: #b9a4f5;
    --hl-attr: #79bce8;
  }
}
.hl-c { color: var(--hl-comment); font-style: italic; }
.hl-s { color: var(--hl-string); }
.hl-n { color: var(--hl-number); }
.hl-k { color: var(--hl-keyword); }
.hl-a { color: var(--hl-attr); }

.jres { font-size: 12.5px; }
.jres-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.jres-count { font-size: 11.5px; font-weight: 700; color: var(--muted); }
.jitem {
  border-left: 2px solid var(--line);
  padding: 3px 0 3px 9px;
  margin-bottom: 5px;
  overflow-wrap: anywhere;
}
.jitem-head { display: flex; align-items: baseline; gap: 8px; }
.jitem-t { font-weight: 600; color: var(--ink); }
.jitem-d { margin-left: auto; flex: none; font-family: var(--mono); font-size: 11px; color: var(--faint); }
.jitem-s { color: var(--muted); margin-top: 1px; }
.jkv { display: flex; flex-direction: column; gap: 1px; margin-top: 2px; }
.jkv-row { display: flex; gap: 8px; align-items: baseline; }
.jkv-row.nest { flex-direction: column; gap: 0; }
.jkv-row.nest > .jkv { margin-left: 12px; border-left: 1px solid var(--line); padding-left: 8px; }
.jkv-k { flex: none; font-family: var(--mono); font-size: 11.5px; color: var(--faint); }
.jkv-k::after { content: ":"; }
.jkv-v { color: var(--ink); overflow-wrap: anywhere; }
.jkv-v.mono { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }

.md { white-space: normal; overflow-wrap: anywhere; }
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md-p { margin: 0 0 6px; line-height: 1.65; }
.md-h { font-weight: 700; margin: 10px 0 4px; line-height: 1.4; }
.md-h1, .md-h2 { font-size: 1.08em; }
.md-h3, .md-h4, .md-h5, .md-h6 { font-size: 1em; color: var(--muted); }
.md-list { margin: 0 0 6px; padding-left: 1.4em; }
.md-list li { margin: 1px 0; line-height: 1.6; }
.md-list .md-list { margin-bottom: 0; }
.md-quote {
  margin: 0 0 6px;
  padding: 2px 0 2px 10px;
  border-left: 2px solid var(--line);
  color: var(--muted);
}
.md-pre {
  font-family: var(--mono);
  font-size: 12px;
  background: var(--code-bg);
  border: 1px solid var(--code-line);
  border-radius: 6px;
  padding: 8px 12px;
  margin: 0 0 6px;
  overflow-x: auto;
  white-space: pre;
  color: var(--ink);
}
.md-hr { border: none; border-top: 1px solid var(--line); margin: 8px 0; }

.md-table-wrap { overflow-x: auto; margin: 0 0 6px; }
.md-table { border-collapse: collapse; font-size: 12.5px; }
.md-table th,
.md-table td { border: 1px solid var(--line); padding: 3px 9px; text-align: left; vertical-align: top; }
.md-table th { background: var(--surface-2); font-weight: 700; white-space: nowrap; }
.md-table td.a-r, .md-table th.a-r { text-align: right; }
.md-table td.a-c, .md-table th.a-c { text-align: center; }

.md code {
  font-family: var(--mono);
  font-size: 0.9em;
  background: var(--code-bg);
  border: 1px solid var(--code-line);
  border-radius: 4px;
  padding: 0.5px 5px;
}

.md a code { border-color: transparent; background: none; padding: 0; color: inherit; }

.md-list li.md-task { list-style: none; margin-left: -1.1em; display: flex; align-items: flex-start; gap: 7px; }

.md-task .md-task-tx { flex: 1; min-width: 0; }
.md-task .md-check {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-top: 0.24em;
  border: 1.5px solid var(--faint);
  border-radius: 3px;
}
.md-task .md-check .icon { width: 11px; height: 11px; }
.md-task.on .md-check { background: var(--ok); border-color: var(--ok); color: var(--surface); }

.md-task.on { color: var(--muted); }
.md s { color: var(--faint); }
.md a { color: var(--accent); }

.md a .icon { width: 11px; height: 11px; margin-left: 2px; vertical-align: -1px; }

.icon { width: 15px; height: 15px; flex: none; vertical-align: -2px; }

.ovcard .t .icon,
.panel-title .icon { width: 13px; height: 13px; margin-right: 5px; vertical-align: -2.5px; }
.chip .icon { width: 12px; height: 12px; margin-right: 5px; vertical-align: -2px; }
.badge .icon { width: 12px; height: 12px; margin-right: 4px; vertical-align: -2px; }
table.jobs a .icon { width: 13px; height: 13px; margin-right: 4px; vertical-align: -3px; }
.nowbar-label .icon { width: 12px; height: 12px; margin-right: 4px; vertical-align: -1.5px; }
.filters button .icon { width: 13px; height: 13px; margin-right: 5px; vertical-align: -2.5px; }
.ovcard .rest .icon { width: 12px; height: 12px; margin-right: 4px; vertical-align: -2px; }
.pending-item .icon { width: 12px; height: 12px; margin-right: 4px; vertical-align: -2px; }
.ev .kind .icon { width: 12px; height: 12px; margin-right: 3px; vertical-align: -2px; }

.ghost-btn.icon-btn .icon { width: 12px; height: 12px; margin-right: 0; vertical-align: baseline; }

.tstat .icon,
table.jobs a .tstat .icon,
.chip .tstat .icon { width: 16px; height: 16px; margin-right: 0; }

.icon.spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .icon.spin { animation: none; } }

.icon.ext,
.chip .icon.ext,
.inbox-row .ir-go .icon.ext,
.decision .ir-chips .icon.ext,
.head-ctx .chip .icon.ext,
.ovcard .rest .auth-go .icon.ext,
table.jobs a .icon.ext {
  width: 11px;
  height: 11px;
  margin-left: 4px;
  margin-right: 0;
  vertical-align: -1px;
  opacity: 0.75;
}

a.ghost-btn { text-decoration: none; }
a.ghost-btn:hover { text-decoration: none; }

.ghost-btn { display: inline-flex; align-items: center; gap: 5px; }

.page-head .ghost-btn ~ .ghost-btn { margin-left: 0; }

.settings-layout {
  display: grid;
  grid-template-columns: 170px minmax(0, 900px);
  gap: 28px;
  justify-content: center;
  align-items: start;
}
.settings-layout > .save-bar { grid-column: 2; }
.settings-toc {
  position: sticky;
  top: 84px; 
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
}
.settings-toc a { color: var(--muted); padding: 6px 10px; border-radius: 6px; }
.settings-toc a:hover { background: var(--hover); color: var(--ink); text-decoration: none; }
.settings-toc a.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.settings-section { scroll-margin-top: 84px; } 
.settings-search {
  font: inherit;
  font-size: 13px;
  width: 240px;
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
}
@media (max-width: 1080px) {
  .settings-layout { grid-template-columns: 1fr; }
  .settings-toc { display: none; }
  .settings-layout > .save-bar { grid-column: auto; }
}
.settings { display: flex; flex-direction: column; gap: 16px; max-width: 900px; margin: 0 auto; }
.settings-section {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 6px 20px 10px;
}
.settings-section h2 { font-size: 14px; margin: 12px 0 4px; color: var(--muted); font-weight: 700; }
.setting {
  position: relative;
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 4px 20px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}
.setting:first-of-type { border-top: none; }

.setting.changed::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 2px;
  background: var(--accent);
}
.setting .name { font-weight: 600; }
.setting .key { font-size: 11px; overflow-wrap: anywhere; }
.setting .desc {
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
  white-space: pre-line;
}
.setting input[type="text"],
.setting input[type="password"],
.setting input[type="number"],
.setting select {
  font: inherit;
  font-size: 13px;
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 5px 9px;
  max-width: 100%;
}
.setting input[type="text"] { font-family: var(--mono); width: 320px; }
.setting input[type="number"] { width: 90px; }
.control-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.control-pair { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; }

.control-pair select { width: 170px; }

.hint.ignored { color: var(--warn); }
.hint { color: var(--faint); font-size: 12px; }

.control-auto { display: flex; align-items: flex-start; gap: 10px; }
.control-auto > .ghost-btn { margin-left: 0; margin-top: 3px; flex: none; }

.switch { position: relative; display: inline-block; width: 40px; height: 22px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch i {
  position: absolute;
  inset: 0;
  cursor: pointer;
  background: var(--line);
  border-radius: 22px;
  transition: background 0.15s;
}
.switch i::before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  left: 3px;
  top: 3px;
  background: var(--surface);
  border-radius: 50%;
  transition: transform 0.15s;
}
.switch input:checked + i { background: var(--ok); }
.switch input:checked + i::before { transform: translateX(18px); }
.switch input:focus-visible + i { outline: 2px solid var(--accent); outline-offset: 2px; }
.switch-state { font-size: 13px; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.chip-x {
  border: none;
  background: none;
  cursor: pointer;
  color: inherit;
  font: inherit;
  padding: 0 0 0 5px;
}
.chip-x .icon { width: 11px; height: 11px; vertical-align: -1px; }
.chip-x:hover { color: var(--crit); }

.secret-field { position: relative; display: inline-block; width: min(480px, 100%); }
.setting .secret-field input {
  width: 100%;
  padding-right: 36px;
  font-family: var(--mono);
}
.secret-eye {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: none;
  
  color: var(--muted);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 4px;
}
.secret-eye:hover:not(:disabled) { background: var(--hover); color: var(--ink); }
.secret-eye:disabled { opacity: 0.4; cursor: default; }

body[data-page="home"] .sm { font-size: 12px; }

body[data-page="home"] .panel-title { align-items: center; min-height: 24px; }

.day-bar { display: block; margin: 1px 0 0; height: 8px; }

.day-bar i {
  position: absolute;
  top: 0;
  bottom: 0;
  height: auto;
  
  border-radius: 2px;
  background: var(--faint);
}
.day-bar i.ok { background: var(--ok); }

.day-range {
  margin-top: 3px;
  text-align: center;
  white-space: nowrap;
  font-size: 10px;
  line-height: 1;
  color: var(--faint);
}

.origin-cards {
  display: grid;
  
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 10px;
}

.origin-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  
  background: var(--bg);
}

.origin-card.tone-warn { border-color: var(--warn); background: var(--warn-soft); }
.origin-card.tone-crit { border-color: var(--crit); background: var(--crit-soft); }

.origin-card.tone-warn .muted, .origin-card.tone-crit .muted { color: var(--muted); }
.origin-head { display: flex; align-items: center; gap: 10px; }
.origin-name { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13.5px; }
.origin-name .icon { width: 15px; height: 15px; }
.origin-head .badge { margin-left: auto; flex: none; }
.origin-desc { margin-top: -3px; }

.origin-when { font-size: 13px; color: var(--ink); }

.origin-meta { display: flex; flex-wrap: wrap; gap: 4px 8px; }
.origin-meta > * + *::before { content: "・"; color: var(--faint); margin-right: 4px; }
.origin-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.origin-card.tone-warn .origin-foot, .origin-card.tone-crit .origin-foot { border-top-color: color-mix(in srgb, var(--line) 60%, transparent); }
.origin-foot .ghost-btn { margin-left: auto; flex: none; }

.panel-foot { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line); }

.mode-seg { display: inline-flex; gap: 0; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
.mode-seg button {
  border: none;
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  padding: 4px 10px;
  cursor: pointer;
}
.mode-seg button + button { border-left: 1px solid var(--line); }
.mode-seg button:hover:not(:disabled):not(.on) { color: var(--accent); }
.mode-seg button.on { background: var(--accent); color: var(--bg); cursor: default; }
.mode-seg button:disabled:not(.on) { opacity: 0.5; cursor: default; }

.mix-summary {
  margin-right: auto;
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--muted);
}

.mix-bars { display: grid; gap: 6px; margin-bottom: 14px; }
.mix-bar-row { display: flex; align-items: center; gap: 10px; }
.mix-bar-label { flex: none; width: 2.6em; font-size: 11.5px; color: var(--faint); }
.mix-bar {
  flex: 1 1 auto;
  display: flex;
  height: 12px;
  min-width: 0;
  background: var(--surface-2);
  border-radius: 4px;
  overflow: hidden;
}

.mix-bar i {
  display: block;
  height: 100%;
  box-sizing: border-box;
  border-right: 2px solid var(--surface);
}

.mix-bar i:last-child { border-right: none; }
.mix-bar-note { flex: none; width: 6.5em; text-align: right; }

.mix-cards {
  display: grid;
  
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  align-items: start; 
  gap: 10px;
}
.mix-card {
  display: grid;
  gap: 7px;
  align-content: start;
  padding: 10px 12px 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}

.mix-card.off { background: none; }
.mix-card.off .mix-label { color: var(--faint); }
.mix-card-head { display: flex; align-items: center; gap: 8px; }
.mix-card-set { display: flex; align-items: center; gap: 10px; }
.mix-card-stat { display: flex; align-items: center; gap: 10px; min-height: 20px; }
.mix-chip { flex: none; width: 10px; height: 10px; border-radius: 3px; }
.mix-toggle {
  flex: none;
  width: 3.2em;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  color: var(--muted);
  font-size: 11.5px;
  padding: 3px 0;
  cursor: pointer;
}
.mix-toggle.on { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.mix-toggle:hover:not(:disabled):not(.on) { color: var(--accent); border-color: var(--accent); }
.mix-toggle:disabled { opacity: 0.5; cursor: default; }
.mix-label { flex: 1 1 auto; min-width: 0; }
.mix-label {
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  padding: 4px 8px;
}
.mix-label:focus { outline: none; border-color: var(--accent); }
.mix-label:disabled { opacity: 0.6; }
.mix-label-static { flex: none; font-size: 13px; padding: 4px 0; }

.mix-desc { flex: 1 1 auto; min-width: 0; }

.mix-range {
  flex: 1 1 auto;
  min-width: 0;
  height: 18px;
  margin: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.mix-range.c0, .mix-rail.c0 { --slot-color: var(--accent); }
.mix-range.c1, .mix-rail.c1 { --slot-color: var(--review); }
.mix-range.c2, .mix-rail.c2 { --slot-color: var(--ok); }
.mix-range.c3, .mix-rail.c3 { --slot-color: var(--warn); }
.mix-range.c4, .mix-rail.c4 { --slot-color: var(--crit); }
.mix-rail.omakase { --slot-color: var(--faint); }
.mix-range, .mix-rail {
  --rail-bg: linear-gradient(
    to right,
    var(--slot-color, var(--faint)) 0 var(--fill, 0%),
    var(--surface-2) var(--fill, 0%) var(--room, 100%),
    var(--bg) var(--room, 100%) 100%
  );
}
.mix-range::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: var(--rail-bg);
}
.mix-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -5px;
  border: 2px solid var(--surface);
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 1px var(--line);
}
.mix-range::-moz-range-track { height: 6px; border-radius: 3px; background: var(--rail-bg); }
.mix-range::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 2px solid var(--surface);
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 1px var(--line);
}
.mix-range:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
.mix-range:disabled { cursor: default; opacity: 0.4; }
.mix-pct { flex: none; width: 3.2em; text-align: right; font-size: 13px; }

.mix-rail-wrap {
  position: relative;
  flex: 1 1 auto;
  min-width: 60px;
  display: flex;
  align-items: center;
}
.mix-rail { flex: 1 1 auto; height: 6px; border-radius: 3px; background: var(--rail-bg); }

.mix-mark {
  position: absolute;
  top: 50%;
  height: 13px;
  margin-top: -6.5px;
  width: 2px;
  margin-left: -1px;
  border-radius: 1px;
  background: var(--ink);
  pointer-events: none; 
}

.mix-card.off .mix-mark { display: none; }
.mix-stat-text { flex: none; font-size: 12px; color: var(--muted); }
.mix-gap { flex: none; }
.mix-next { flex: none; margin-left: auto; }

.mix-card-jobs { display: grid; gap: 3px; }
.mix-card-jobs:empty, .mix-card-recent:empty { display: none; }
.mix-job {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 3px 7px;
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--ink);
  font-size: 12.5px;
}
.mix-job:hover { background: var(--hover); color: var(--accent); text-decoration: none; }
.mix-job-dot { flex: none; margin-right: 0; }
.mix-job-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mix-job-ticket { flex: none; }

.mix-card-recent { display: flex; align-items: center; gap: 5px; flex-wrap: nowrap; min-width: 0; }
.mix-recent-label, .mix-recent-more { flex: none; white-space: nowrap; }
.mix-recent-chip {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 17em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 11.5px;
}
.mix-recent-chip:hover { color: var(--accent); text-decoration: none; }
.mix-del {
  flex: none;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 7px;
  background: none;
  color: var(--faint);
  cursor: pointer;
}
.mix-del:hover:not(:disabled) { color: var(--crit); border-color: var(--crit); background: var(--crit-soft); }
.mix-del:disabled { opacity: 0.4; cursor: default; }

.mix-seg.c0, .mix-chip.c0 { background: var(--accent); }
.mix-seg.c1, .mix-chip.c1 { background: var(--review); }
.mix-seg.c2, .mix-chip.c2 { background: var(--ok); }
.mix-seg.c3, .mix-chip.c3 { background: var(--warn); }
.mix-seg.c4, .mix-chip.c4 { background: var(--crit); }
.mix-seg.omakase, .mix-chip.omakase { background: var(--faint); }
.mix-seg.other, .mix-chip.other { background: var(--line); }
.mix-chip.off { background: none; border: 1px dashed var(--faint); }

.wait-cards {
  display: grid;
  
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 10px;
}

.wait-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  
  background: var(--bg);
  cursor: pointer;
}

.wait-card:hover, .wait-card:focus-visible { border-color: var(--accent); outline: none; }

.wait-card.tone-crit { border-color: var(--crit); background: var(--crit-soft); }
.wait-card.tone-crit .muted { color: var(--muted); }
.wait-head { display: flex; align-items: center; gap: 8px; }
.wait-head .badge { margin-left: auto; flex: none; }

.wait-what {
  font-size: 12.5px;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.wait-when { font-size: 13px; color: var(--ink); }
.wait-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.wait-card.tone-crit .wait-foot { border-top-color: color-mix(in srgb, var(--line) 60%, transparent); }
.wait-foot .jid { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.wait-foot .jid:hover { color: var(--accent); }
.wait-foot .ghost-btn { margin-left: auto; flex: none; }

.ghost-btn.danger-btn { border-color: var(--crit); color: var(--crit); }
.ghost-btn.danger-btn:hover:not(:disabled) { background: var(--crit-soft); border-color: var(--crit); color: var(--crit); }

.proc-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}

.proc-card {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 3px 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
}
.proc-head { grid-column: 1; display: flex; align-items: center; gap: 7px; font-weight: 600; font-size: 13.5px; }
.proc-head .dot { flex: none; margin: 0; }
.proc-state { grid-column: 1; }
.proc-card .ghost-btn { grid-column: 2; grid-row: 1 / span 2; margin: 0; }

.proc-row { display: flex; align-items: center; gap: 14px; padding: 10px 0; }
.proc-info { flex: 1; min-width: 0; }
.proc-info .sm { max-width: 46em; }
.proc-row .ghost-btn { margin-left: 0; flex: none; }

.proc-info .sm { max-width: 96ch; }

.danger-zone .panel-title span { color: var(--crit); }
.danger-zone.on { border-color: var(--crit); box-shadow: 0 0 0 1px var(--crit); }

.save-bar {
  position: sticky;
  bottom: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 900px;
  margin: 16px auto 0;
  padding: 10px 18px;
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
}
.save-note { font-weight: 600; }
.save-bar .muted { flex: 1; }

.primary-btn {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--bg);
  border-radius: 6px;
  padding: 5px 16px;
  cursor: pointer;
}
.primary-btn:hover:not(:disabled) { filter: brightness(1.08); }
.primary-btn:disabled { opacity: 0.5; cursor: default; }
.primary-btn.danger { background: var(--crit); border-color: var(--crit); }
.primary-btn .icon { width: 13px; height: 13px; }
.action-btn {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 5px 14px;
  color: var(--ink);
  background: var(--surface);
  cursor: pointer;
}
.action-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.action-btn:disabled { opacity: 0.5; cursor: default; }
.action-btn.danger:hover:not(:disabled) { border-color: var(--crit); color: var(--crit); background: var(--crit-soft); }
.action-btn .icon { width: 13px; height: 13px; }

.banner {
  max-width: 900px;
  margin: 0 auto 14px;
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--warn-soft);
  color: var(--warn);
  border: 1px solid var(--warn);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.banner-crit { background: var(--crit-soft); color: var(--crit); border-color: var(--crit); }
.banner-line { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.banner .ghost-btn { margin-left: 0; flex: none; }

@media (max-width: 720px) {
  .setting { grid-template-columns: 1fr; }
}

.action-note {
  width: 100%;
  font-size: 12px;
  color: var(--crit);
  display: flex;
  align-items: flex-start;
  gap: 5px;
}
.action-note .icon { width: 13px; height: 13px; flex: none; margin-top: 2px; }
.trigger-note { font-size: 12px; color: var(--faint); margin-top: 4px; }
.trigger-note.err { color: var(--crit); }
.inline-form .form-err { font-size: 12px; color: var(--crit); }

.copy-chip { cursor: pointer; font: inherit; font-family: var(--mono); }
.copy-chip:hover { border-color: var(--accent); color: var(--accent); }
.copy-chip.copied { border-color: var(--ok); color: var(--ok); }
.copy-chip .icon { width: 11px; height: 11px; margin-right: 3px; }

.stat .vl.warn { color: var(--warn); }

.jm-queue { max-width: 860px; display: flex; flex-direction: column; gap: 10px; }
.q-section {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin: 10px 2px 0;
}
.q-section:first-child { margin-top: 0; }
.q-section .s-label { font-size: 13px; font-weight: 700; color: var(--ink); }
.q-section .s-count {
  font-size: 11.5px;
  color: var(--faint);
  background: var(--surface-2);
  border-radius: 999px;
  padding: 0 8px;
}
.q-section .s-hint { font-size: 11.5px; color: var(--faint); }
.qcard {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px 11px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.qcard.flash { animation: qflash 1.6s ease-out 1; }
@keyframes qflash {
  0% { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
  100% { border-color: var(--line); box-shadow: none; }
}
.q-head { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.q-head .q-id { font-family: var(--mono); font-size: 11.5px; color: var(--faint); }
.q-head .q-arrow { color: var(--faint); font-size: 11.5px; }
.q-spacer { flex: 1; }
.q-date { font-size: 11.5px; color: var(--faint); }
.q-title { font-size: 15.5px; font-weight: 700; line-height: 1.55; }
.q-desc { font-size: 13px; color: var(--muted); line-height: 1.7; white-space: pre-wrap; }
.q-sub { font-size: 12px; color: var(--faint); line-height: 1.7; }
.q-sub .num { font-family: var(--mono); }
.q-prov { overflow-wrap: anywhere; }
.q-stale { font-size: 12px; color: var(--crit); display: flex; align-items: flex-start; gap: 5px; margin-top: 3px; }
.q-stale .icon { width: 13px; height: 13px; flex: none; margin-top: 2px; }

.q-note {
  font: inherit;
  font-size: 13px;
  line-height: 1.7;
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 7px 10px;
  width: 100%;
  resize: vertical;
}
.q-note::placeholder { color: var(--faint); }
.q-note:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.q-note-view {
  font-size: 13px;
  line-height: 1.7;
  background: var(--accent-soft);
  border-radius: 7px;
  padding: 7px 10px;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  overflow-wrap: anywhere;
}
.q-note-view .icon { width: 13px; height: 13px; flex: none; margin-top: 3px; color: var(--accent); }
.q-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.q-actions .ghost-btn { margin-left: 0; }
.q-more { display: inline-flex; align-items: center; gap: 3px; }
.q-more .icon { width: 13px; height: 13px; }
.q-err { font-size: 12px; color: var(--crit); display: flex; align-items: flex-start; gap: 5px; }
.q-err .icon { width: 13px; height: 13px; flex: none; margin-top: 2px; }
.q-detail {
  border-top: 1px dashed var(--line);
  padding-top: 9px;
  margin-top: 2px;
}
.q-why { font-size: 13px; line-height: 1.75; margin-bottom: 8px; }
.q-empty {
  color: var(--faint);
  font-size: 13px;
  text-align: center;
  padding: 34px 10px;
  background: var(--surface);
  border: 1px dashed var(--line);
  border-radius: 10px;
}

.diff {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.65;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.d-line { display: flex; gap: 6px; padding: 0 8px; white-space: pre-wrap; overflow-wrap: anywhere; }
.d-line .d-mark { flex: none; width: 0.8em; color: var(--faint); }
.d-add { background: var(--diff-add-bg); }
.d-add .d-mark { color: var(--diff-add-ink); }
.d-del { background: var(--diff-del-bg); }
.d-del .d-mark { color: var(--diff-del-ink); }
.d-gap {
  padding: 2px 8px;
  color: var(--faint);
  background: var(--surface-2);
  font-size: 11px;
}
.d-stat { font-family: var(--mono); font-size: 11.5px; white-space: nowrap; }
.d-plus { color: var(--diff-add-ink); }
.d-minus { color: var(--diff-del-ink); }

body.jm-page { --jm-col: minmax(380px, 520px); --jm-gap: 14px; }
.jm-grid {
  display: grid;
  grid-template-columns: var(--jm-col) minmax(0, 1fr);
  gap: var(--jm-gap);
  align-items: start;
}
@media (min-width: 901px) {
  
  body.jm-page #jm-cards {
    grid-template-columns: var(--jm-col) repeat(2, minmax(0, 1fr));
    gap: var(--jm-gap);
  }
  body.jm-page .jm-list-panel,
  body.jm-page .jm-pane {
    position: sticky;
    top: 8px;
    max-height: calc(100vh - 30px);
  }
}
@media (max-width: 900px) { .jm-grid { grid-template-columns: 1fr; } }

body.jm-page #jm-cards { margin-top: 18px; }

@media (min-width: 1200px) {
  body.jm-mode-queue .jm-main {
    display: grid;
    grid-template-columns: minmax(0, 860px) minmax(300px, 1fr);
    gap: var(--jm-gap);
    align-items: start;
  }
  body.jm-mode-queue #jm-cards {
    margin-top: 0;
    grid-template-columns: minmax(0, 1fr);
    position: sticky;
    top: 8px;
  }
}
.jm-list-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 76vh;
}

.jm-list-panel .filters { margin-bottom: 0; flex: none; gap: 6px; }
.jm-list-panel .filters button { padding: 3px 11px; }
.jm-search {
  font: inherit;
  font-size: 13px;
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 10px;
  width: 100%;
  flex: none;
}
.jm-search:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.jm-list { overflow-y: auto; min-height: 80px; }
.jm-row { padding: 7px 9px; border-radius: 8px; cursor: pointer; }
.jm-row:hover { background: var(--hover); }
.jm-row.on { background: var(--accent-soft); }
.jm-row .r-head { display: flex; align-items: baseline; gap: 7px; }
.jm-row .r-id { font-family: var(--mono); font-size: 11px; color: var(--faint); flex: none; }
.jm-row .r-title {
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.jm-row .r-desc {
  font-size: 11.5px;
  color: var(--faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.jm-row .badge { font-size: 10.5px; padding: 0 7px; flex: none; }
.jm-empty { color: var(--faint); font-size: 12.5px; padding: 8px 4px; }

.jm-pane {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 18px 22px;
  min-height: 320px;
  max-height: 76vh;
  overflow-y: auto;
}
.jm-pane .e-title { font-size: 17px; font-weight: 700; line-height: 1.5; margin: 2px 0 6px; }
.jm-pane .e-chips { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 10px; }
.jm-pane .e-chips .chip { font-size: 11px; }
.jm-meta {
  font-size: 12px;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
  margin-bottom: 4px;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 2px 12px;
}
.jm-meta .k { color: var(--faint); }
.jm-body { max-width: 46em; }
.jm-body .md-h {
  font-size: 12px;
  font-weight: 700;
  color: var(--review);
  letter-spacing: 0.06em;
  margin: 16px 0 4px;
}
.jm-body .md-p { margin: 4px 0; font-size: 13.5px; }
.jm-body .md-list { margin: 4px 0; padding-left: 20px; font-size: 13.5px; }

.jm-pane .e-actions {
  position: sticky;
  bottom: -18px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  margin: 16px -22px -18px;
  padding: 12px 22px 14px;
  background: var(--surface);
  border-radius: 0 0 10px 10px;
}
.jm-pane .e-actions .ghost-btn { margin-left: 0; }

.jm-pane .e-actions .inline-form { margin-top: 4px; }
.jm-placeholder { color: var(--faint); font-size: 13px; padding: 30px 10px; text-align: center; }
.archive-reason {
  background: var(--surface-2);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 12px;
}

.inline-form {
  background: var(--surface-2);
  border-radius: 8px;
  padding: 10px 12px;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.inline-form textarea,
.jm-editor textarea,
.jm-editor input,
.jm-editor select,
.inline-form input {
  font: inherit;
  font-size: 13px;
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 10px;
  width: 100%;
}
.inline-form textarea { min-height: 3.2em; resize: vertical; }
.inline-form .f-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.inline-form .f-row .ghost-btn { margin-left: 0; }
.inline-form .hint { font-size: 11.5px; }

.jm-editor { display: flex; flex-direction: column; gap: 10px; }
.jm-editor .f-label { font-size: 11.5px; font-weight: 700; color: var(--muted); margin-bottom: 2px; }
.jm-editor .f-label .req { color: var(--crit); margin-left: 3px; }
.jm-editor .f-hint { font-size: 11px; color: var(--faint); margin-top: 2px; }
.jm-editor textarea { resize: vertical; min-height: 3em; }
.jm-editor textarea.body-sec { min-height: 4.4em; }
.jm-editor .f-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.jm-editor .e-errors {
  background: var(--crit-soft);
  color: var(--crit);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12.5px;
}

.jm-editor .e-buttons {
  position: sticky;
  bottom: -18px;
  display: flex;
  gap: 10px;
  align-items: center;
  background: var(--surface);
  border-top: 1px solid var(--line);
  margin: 0 -22px -18px;
  padding: 12px 22px 14px;
  border-radius: 0 0 10px 10px;
}
.jm-editor .e-buttons .ghost-btn { margin-left: 0; }

.pl-row { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; margin: 3px 0; }
.pl-row .k { color: var(--faint); flex: none; min-width: 88px; }
.pl-links { display: flex; gap: 10px; margin-top: 6px; }

.navbadge {
  display: inline-block;
  min-width: 17px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--warn);
  color: var(--bg);
  font-size: 10.5px;
  font-weight: 700;
  text-align: center;
  line-height: 16px;
  margin-left: 2px;
}
.filters button .navbadge { margin-left: 6px; }

.navbadge.crit { background: var(--crit); }

body[data-page="inbox"] {
  --dec-rail-w: 300px;
  --rail-gutter: 20px;
  --pane-gap: 10px;
  --pane-gutter: 10px;
}

.ph-list { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; min-width: 0; }

body.dec-open .page-head { gap: var(--pane-gap); }
body.dec-open .ph-list { flex: none; width: calc(var(--dec-rail-w) + var(--rail-gutter)); }

.inbox-pane { flex: 1; min-height: 0; overflow-y: auto; }

.inbox-pane,
.dec-main {
  margin-right: -24px;
  padding-right: calc(24px + var(--pane-gutter));
}

body[data-page="inbox"] .content { padding-bottom: 0; }
.inbox-pane,
.dec-rail,
.dec-main { padding-bottom: 20px; }

.inbox-head-sum { font-size: 13px; color: var(--muted); }
.inbox-head-sum b { color: var(--ink); }
.inbox-head-sum.warn b { color: var(--warn); }
.inbox-head-sum.crit b { color: var(--crit); }

.inbox-list { display: flex; flex-direction: column; gap: 8px; max-width: 1240px; }

.inbox-row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) minmax(232px, 262px);
  gap: 16px;
  align-items: start;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: 10px;
}
.inbox-row.clickable { cursor: pointer; }
.inbox-row.clickable:hover { background: var(--hover); }

.inbox-row.clickable:hover .ir-go.primary { background: var(--accent); border-color: var(--accent); }

.inbox-row.w-warn { border-left-color: var(--warn); }
.inbox-row.w-crit { border-left-color: var(--crit); }

.inbox-working { margin-top: 26px; }
.inbox-sec-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 2px 2px;
  font-size: 13px;
  color: var(--muted);
}
.inbox-sec-head .icon { width: 16px; height: 16px; }
.inbox-sec-head b { color: var(--ink); }
.inbox-sec-count { font-size: 12px; font-variant-numeric: tabular-nums; }
.inbox-row.working { background: var(--surface-2); }
.inbox-row.working:hover { background: var(--hover); }

.inbox-row .ir-work-when { font-size: 11.5px; color: var(--muted); }

.inbox-row .ir-lead { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.inbox-row .ir-lead .badge { font-size: 11px; }
.inbox-row .ir-wait { line-height: 1.25; }
.inbox-row .ir-wait-num { font-size: 19px; font-weight: 700; }
.inbox-row .ir-wait.warn .ir-wait-num { color: var(--warn); }
.inbox-row .ir-wait.crit .ir-wait-num { color: var(--crit); }
.inbox-row .ir-wait-sub { font-size: 11px; color: var(--faint); white-space: nowrap; }

.inbox-row .ir-main { min-width: 0; }
.inbox-row .ir-title {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.inbox-row .ir-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-top: 5px;
  font-size: 12px;
}
.inbox-row .ir-chips .chip { font-size: 11px; }
.inbox-row .ir-chips .icon { width: 13px; height: 13px; margin-right: 3px; vertical-align: -2.5px; }

.inbox-row .ir-prs { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 2px 8px; }

.inbox-row .ir-prs-repo { display: inline-flex; align-items: center; color: var(--faint); }
.inbox-row .ir-pr { display: inline-flex; align-items: center; white-space: nowrap; }

.inbox-row .ir-mark { display: inline-flex; margin-left: 5px; }
.inbox-row .ir-mark .icon { width: 12px; height: 12px; margin: 0; }
.inbox-row .ci-pass, .inbox-row .rv-ok { color: var(--ok); }
.inbox-row .ci-fail, .inbox-row .rv-ng { color: var(--crit); }
.inbox-row .ci-pending { color: var(--warn); }

.inbox-row .ir-msg-box {
  margin-top: 8px;
  padding-left: 10px;
  border-left: 2px solid var(--line);
}
.inbox-row .ir-msg-box.from-human { border-left-color: var(--accent); }
.inbox-row .ir-msg-head {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  color: var(--faint);
  margin-bottom: 3px;
}
.inbox-row .ir-msg-head .icon { width: 13px; height: 13px; }

.inbox-row .ir-msg {
  max-width: 68ch;
  font-size: 13px;
  line-height: 1.7;
}
.inbox-row .ir-msg > :first-child { margin-top: 0; }
.inbox-row .ir-msg > :last-child { margin-bottom: 0; }
.inbox-row .ir-msg-box.is-error .ir-msg { color: var(--crit); }
.inbox-row .ir-msg-box.is-error { border-left-color: var(--crit); }

.inbox-row .ir-acts { display: flex; flex-direction: column; align-items: stretch; gap: 5px; }
.inbox-row .ir-go {
  display: grid;
  grid-template-columns: 15px 4.4em minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.35;
  text-align: left;
}
.inbox-row .ir-go:hover { border-color: var(--accent); text-decoration: none; background: var(--accent-soft); }

.inbox-row .ir-go-dest { font-size: 10.5px; color: var(--faint); letter-spacing: 0.02em; white-space: nowrap; }

.inbox-row .ir-go-repo {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 3px 0 0 2px;
  font-size: 10.5px;
  color: var(--faint);
  overflow-wrap: anywhere;
}
.inbox-row .ir-go-repo .icon { width: 12px; height: 12px; flex: 0 0 auto; }
.inbox-row .ir-go-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.inbox-row .d-slack > .icon:first-child { color: var(--slack); }
.inbox-row .d-internal > .icon:first-child { color: var(--faint); }

.inbox-row .ir-go .pr-state .icon,
.inbox-row .ir-go .tstat .icon { width: 15px; height: 15px; margin: 0; }

.inbox-row .ir-go.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
  font-weight: 600;
  padding: 8px 9px;
}
.inbox-row .ir-go.primary .ir-go-dest { color: var(--bg); opacity: 0.75; }

.inbox-row .ir-go.primary > .icon:first-child,
.inbox-row .ir-go.primary > :first-child .icon { color: var(--bg); }
.inbox-row .ir-go.primary:hover { filter: brightness(1.08); background: var(--accent); }
.inbox-row .ir-go .icon { width: 15px; height: 15px; margin: 0; flex: none; }

.inbox-row .ir-approve {
  display: flex;
  justify-content: center;
  gap: 5px;
  background: var(--ok);
  border-color: var(--ok);
  color: var(--bg);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  padding: 8px 9px;
}

.inbox-row .ir-approve:hover:not(:disabled) { filter: brightness(1.08); background: var(--ok); border-color: var(--ok); }
.inbox-row .ir-approve.counting:hover:not(:disabled) { background: var(--crit); border-color: var(--crit); }
.inbox-row .ir-approve.failed:hover:not(:disabled) { background: transparent; border-color: var(--crit); }

.inbox-row .ir-approve.counting { background: var(--crit); border-color: var(--crit); }
.inbox-row .ir-approve.done { background: transparent; border-color: var(--ok); color: var(--ok); }
.inbox-row .ir-approve.failed { background: transparent; border-color: var(--crit); color: var(--crit); font-weight: 400; }
.inbox-row .ir-approve:disabled { cursor: default; }
.inbox-row .ir-approve .ir-go-text { white-space: normal; text-align: center; }

.inbox-empty {
  text-align: center;
  padding: 54px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.inbox-empty .icon.big { width: 28px; height: 28px; color: var(--ok); margin: 0 0 6px; }
.inbox-empty .ie-title { font-size: 15px; font-weight: 700; }
.inbox-empty .ie-sub { font-size: 12.5px; color: var(--faint); margin-top: 2px; }

@media (max-width: 1080px) {
  .inbox-row { grid-template-columns: 140px minmax(0, 1fr); }
  .inbox-row .ir-acts { grid-column: 2; flex-direction: row; flex-wrap: wrap; margin-top: 8px; }
}

@media (max-width: 720px) {
  .inbox-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .inbox-row .ir-lead { flex-direction: row; align-items: center; gap: 10px; }
  .inbox-row .ir-acts { grid-column: 1; }
}

.usage-accounts { flex-wrap: wrap; gap: 3px; margin-bottom: 8px; }

.usage-accounts button .icon { width: 11px; height: 11px; margin-right: 4px; color: inherit; }

.usage-account-one { display: flex; align-items: center; gap: 5px; margin-top: 8px; color: var(--faint); }
.usage-account-one .icon { width: 13px; height: 13px; color: var(--faint); }

.ovcard .rest .auth-form { margin-top: 10px; }
.auth-form .auth-target { font-size: 13px; font-weight: 600; color: var(--ink); }

.auth-form .auth-go { margin-left: 0; align-self: flex-start; }

.auth-done {
  margin-top: 10px;
  background: var(--surface-2);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.auth-done-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ok);
}
.auth-done-head .icon { width: 14px; height: 14px; flex: none; }

.auth-done .auth-note { color: var(--warn); }
.auth-done .ghost-btn { align-self: flex-start; margin-top: 2px; }

.ask-navi { display: flex; align-items: flex-start; gap: 8px; max-width: 1240px; margin-bottom: 14px; }
.ask-navi textarea {
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  padding: 9px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.6;
  resize: none;
  overflow: hidden;
}
.ask-navi textarea:focus { outline: none; border-color: var(--accent); }
.ask-navi button {
  flex: none;
  padding: 9px 16px;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 8px;
  color: var(--bg);
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}
.ask-navi button:hover:not(:disabled) { filter: brightness(1.08); }
.ask-navi button:disabled { cursor: default; opacity: 0.7; }
.ask-navi .ask-note { align-self: center; font-size: 12px; color: var(--faint); }
.ask-navi .ask-note.ok { color: var(--ok); }
.ask-navi .ask-note.err { color: var(--crit); }

.inbox-row.thin { grid-template-columns: 150px minmax(0, 1fr) minmax(150px, 170px); }
.inbox-row .ir-preview {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--muted);
}
.inbox-row .ir-preview .icon { width: 13px; height: 13px; flex: none; align-self: center; color: var(--faint); }
.inbox-row .ir-preview.from-human .icon { color: var(--accent); }
.inbox-row .ir-preview.is-error { color: var(--crit); }
.inbox-row .ir-preview.is-error .icon { color: var(--crit); }
.inbox-row .ir-preview-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.inbox-row .ir-acts.thin .ir-go { grid-template-columns: 15px minmax(0, 1fr); }

.decision { display: flex; align-items: stretch; gap: var(--pane-gap); flex: 1; min-height: 0; }

.head-ctx .ir-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-top: 6px;
  font-size: 12px;
}
.head-ctx .ir-chips .chip { font-size: 11px; }
.head-ctx .ir-chips .icon { width: 13px; height: 13px; margin-right: 3px; vertical-align: -2.5px; }
.head-ctx .ir-prs { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 2px 8px; }

.head-ctx .ir-prs-repo { display: inline-flex; align-items: center; color: var(--faint); }
.head-ctx .ir-pr { display: inline-flex; align-items: center; white-space: nowrap; }

.head-ctx a.ir-pr { color: var(--accent); }
.head-ctx a.ir-pr:hover { text-decoration: underline; }

.decision .ir-mark { display: inline-flex; margin-left: 5px; }
.decision .ir-mark .icon { width: 12px; height: 12px; margin: 0; }
.decision .ci-pass, .decision .rv-ok { color: var(--ok); }
.decision .ci-fail, .decision .rv-ng { color: var(--crit); }
.decision .ci-pending { color: var(--warn); }

.head-ctx { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; font-size: 12.5px; }
.head-ctx .hc-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.head-ctx .badge { font-size: 11px; flex: none; }
.head-ctx .chip { font-size: 11px; flex: none; }
.head-ctx .chip .icon { width: 12px; height: 12px; margin-right: 3px; vertical-align: -2px; }
.head-ctx .ir-mark { display: inline-flex; margin-left: 4px; }
.head-ctx .ir-mark .icon { width: 11px; height: 11px; margin: 0; }
.head-ctx .ci-pass, .head-ctx .rv-ok { color: var(--ok); }
.head-ctx .ci-fail, .head-ctx .rv-ng { color: var(--crit); }
.head-ctx .ci-pending { color: var(--warn); }

.head-ctx .hc-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.head-ctx .hc-wait { color: var(--muted); font-size: 11.5px; white-space: nowrap; flex: none; }
.head-ctx .hc-wait.warn { color: var(--warn); }
.head-ctx .hc-wait.crit { color: var(--crit); }

.head-ctx .ir-chips { margin-top: 0; }

.dec-rail {
  flex: none;
  width: calc(var(--dec-rail-w) + var(--rail-gutter));
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-right: var(--rail-gutter);
}
.dec-main { flex: 1; min-width: 0; overflow-y: auto; }
.dr-head {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 2px 4px 6px;
  font-size: 12.5px;
  color: var(--muted);
}
.dr-head .icon { width: 14px; height: 14px; }

.dr-head-work { margin-top: 12px; }
.dr-item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
  font: inherit;
  font-size: 12.5px;
  line-height: 1.5;
  text-align: left;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}
.dr-item:hover { background: var(--hover); }
.dr-item.on { border-color: var(--accent); background: var(--accent-soft); }

.dr-top { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.dr-top .badge { font-size: 10.5px; padding: 1px 7px; }
.dr-top .badge .icon { width: 12px; height: 12px; }

.dr-dest {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10.5px;
  color: var(--faint);
  white-space: nowrap;
}
.dr-dest .icon { width: 12px; height: 12px; }

.dr-meta { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
.dr-wait { font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dr-wait.warn { color: var(--warn); }
.dr-wait.crit { color: var(--crit); }
.dr-title {
  font-weight: 600;
  
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dr-item.on .dr-title { color: var(--ink); }
.dr-pv {
  font-size: 11.5px;
  color: var(--faint);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dr-pv.is-error { color: var(--crit); }

.decision .dec-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 16px;
  margin-top: 14px;
  align-items: start;
}

.decision .dec-conv {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  min-width: 0;
}

.decision .dec-conv .jump-latest { right: 20px; bottom: 14px; }
.decision .dec-conv-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
}
.decision .dec-conv-head .icon { width: 15px; height: 15px; }

.decision .dec-live-toggle {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
}
.decision .dec-live-toggle:hover { background: var(--hover); color: var(--ink); }
.decision .dec-live-toggle .icon { width: 13px; height: 13px; }
.decision .dec-live-toggle.on {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

.decision .dec-live-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 0 4px 0 34px;
  color: var(--muted);
}
.decision .dec-live-icon { flex: none; width: 14px; height: 14px; margin-top: 3px; color: var(--faint); }
.decision .dec-live-stack { min-width: 0; max-width: min(72ch, 78%); }
.decision .dec-live-text { font-size: 12.5px; line-height: 1.65; overflow-wrap: anywhere; }
.decision .dec-live-text > :first-child { margin-top: 0; }
.decision .dec-live-text > :last-child { margin-bottom: 0; }
.decision .dec-live-text pre { max-width: 100%; overflow-x: auto; }

.decision #conv-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  max-height: 62vh;
  overflow-y: auto;
}

.decision .dec-msg { display: flex; align-items: flex-start; gap: 8px; max-width: 100%; }
.decision .dec-msg.mine { justify-content: flex-end; }
.decision .dec-av {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--surface-2);
  color: var(--muted);
}

.decision .dec-av.named { margin-top: 19px; }
.decision .dec-av .icon { width: 15px; height: 15px; }

.decision .dec-av .navi-icon { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.decision .dec-av.ghost { visibility: hidden; }
.decision .dec-stack { display: flex; flex-direction: column; min-width: 0; max-width: min(72ch, 78%); }
.decision .dec-msg.mine .dec-stack { align-items: flex-end; }
.decision .dec-who { font-size: 11px; color: var(--faint); margin: 0 0 3px 2px; }
.decision .dec-bubble {
  padding: 9px 13px;
  border-radius: 14px;
  border-top-left-radius: 4px;
  background: var(--surface-2);
  font-size: 13px;
  line-height: 1.75;
  overflow-wrap: anywhere;
}
.decision .dec-msg.mine .dec-bubble {
  border-top-left-radius: 14px;
  border-top-right-radius: 4px;
  background: var(--accent-soft);
}
.decision .dec-msg.pending .dec-bubble { opacity: 0.8; }
.decision .dec-bubble > :first-child { margin-top: 0; }
.decision .dec-bubble > :last-child { margin-bottom: 0; }
.decision .dec-bubble pre { max-width: 100%; overflow-x: auto; }
.decision .dec-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  padding: 0 3px;
  font-size: 10.5px;
  color: var(--faint);
}
.decision .dec-pending { color: var(--warn); }
.decision .dec-conv-empty { padding: 8px 2px; font-size: 12.5px; color: var(--faint); }
.decision .dec-conv-error { padding: 6px 2px; font-size: 12px; color: var(--crit); }
.decision .dec-msg-text { max-width: 90ch; font-size: 13px; line-height: 1.7; }
.decision .dec-msg-text > :first-child { margin-top: 0; }
.decision .dec-msg-text > :last-child { margin-bottom: 0; }

.decision .dec-live {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.decision .dec-live-head {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--faint);
}
.decision .dec-live-head .icon { width: 14px; height: 14px; }
.decision .dec-live-go {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-size: 12px;
  line-height: 1.35;
}
.decision .dec-live-go:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  text-decoration: none;
}

.decision .dec-gallery { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }

.decision .dg-grid {
  --dg-thumb-h: 116px;
  --dg-cap-h: 46px; 
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(166px, 1fr));
  gap: 12px;
}
.decision .dg-cell {
  position: relative;
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.decision .dg-cell.ok { border-color: color-mix(in srgb, var(--ok) 55%, var(--line)); }
.decision .dg-open {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: #000;
  cursor: zoom-in;
  position: relative;
}
.decision .dg-img {
  display: block;
  width: 100%;
  height: var(--dg-thumb-h);
  object-fit: cover;
  object-position: top;
}
.decision .dg-open:hover .dg-img { opacity: 0.86; }
.decision .dg-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.decision .dg-play .icon { width: 34px; height: 34px; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6)); }
.decision .dg-marks { position: absolute; top: 8px; right: 8px; display: flex; gap: 5px; }
.decision .dg-mark {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  background: var(--surface);
  border: 1px solid var(--line);
}
.decision .dg-mark .icon { width: 12px; height: 12px; }
.decision .dg-mark.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 55%, transparent); }
.decision .dg-mark.note { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 55%, transparent); }

.decision .dg-cap {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  
  height: calc(2 * 1.45em + 6px);
  padding: 6px 10px 0;
  margin-bottom: 6px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--muted);
}

body.lb-open { overflow: hidden; }

.lb-root { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; }
.lb-backdrop { position: absolute; inset: 0; background: rgba(8, 10, 16, 0.82); }

.lb-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(1600px, 94vw);
  height: 94vh;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.lb-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  flex: none;
}
.lb-pos { font-size: 12px; color: var(--faint); white-space: nowrap; }

.lb-zoom-wrap { display: flex; align-items: center; gap: 8px; min-width: 0; }
.lb-zoom-icon { width: 14px; height: 14px; color: var(--faint); flex: none; }
.lb-zoom {
  width: 132px;
  height: 18px;
  margin: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  --rail-bg: linear-gradient(
    to right,
    var(--accent) 0 var(--fill, 0%),
    var(--surface-2) var(--fill, 0%) 100%
  );
}
.lb-zoom::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: var(--rail-bg); }
.lb-zoom::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -5px;
  border: 2px solid var(--surface);
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 1px var(--line);
}
.lb-zoom::-moz-range-track { height: 6px; border-radius: 3px; background: var(--rail-bg); }
.lb-zoom::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 2px solid var(--surface);
  border-radius: 50%;
  background: var(--accent);
}

.lb-zoom-val { font-size: 11.5px; color: var(--muted); min-width: 38px; }
.lb-spacer { flex: 1; }
.lb-ok {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}

.lb-go {
  display: inline-flex;
  align-items: center;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  font-size: 12.5px;
}
.lb-go:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.lb-ok .icon { width: 15px; height: 15px; }
.lb-ok:hover { border-color: var(--ok); color: var(--ok); }
.lb-ok.on { background: var(--ok); border-color: var(--ok); color: var(--bg); }
.lb-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
}
.lb-icon-btn:hover { background: var(--hover); color: var(--ink); }
.lb-icon-btn .icon { width: 16px; height: 16px; }

.lb-body { display: flex; flex: 1 1 auto; min-height: 0; }

.lb-stage {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: center;
  background: #0b0d12;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
}

.lb-media {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  align-items: safe center;
  justify-content: safe center;
}
.lb-img { max-width: 100%; max-height: 100%; object-fit: contain; cursor: zoom-in; }
.lb-img.zoom { max-width: none; max-height: none; cursor: zoom-out; }

.lb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 76px;
  border: 0;
  border-radius: 10px;
  background: rgba(20, 24, 34, 0.72);
  color: #fff;
  cursor: pointer;
}
.lb-nav:hover:not(:disabled) { background: rgba(20, 24, 34, 0.92); }
.lb-nav:disabled { opacity: 0.25; cursor: default; }
.lb-nav .icon { width: 26px; height: 26px; }
.lb-prev { left: 10px; }
.lb-next { right: 10px; }

.lb-notes {
  flex: none;
  width: 400px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  padding: 12px;
  border-left: 1px solid var(--line);
}

.lb-cap {
  flex: none;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink);
  overflow-wrap: anywhere;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.lb-note { width: 100%; flex: none; }

@media (max-width: 1100px) {
  .lb-body { flex-direction: column; }
  .lb-notes { width: auto; border-left: 0; border-top: 1px solid var(--line); }
  .lb-notes .lb-threads { flex: 0 1 auto; max-height: 26vh; }
  
  .lb-notes .lb-note { max-height: 26vh; }
}

.decision .dec-story { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.decision .rv-head { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.decision .rv-head .icon { width: 16px; height: 16px; }

.decision .rv-loading { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--faint); }
.decision .rv-loading .icon { width: 13px; height: 13px; }

.decision .dg-skel { border-style: dashed; }
.decision .dg-skel-img { height: var(--dg-thumb-h); background: var(--hover); }
.decision .dg-skel-cap { height: var(--dg-cap-h); }
.decision .rv-skel-body {
  height: 160px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  background: var(--surface);
}
.decision .rv-count { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.decision .rv-count.done { color: var(--ok); font-weight: 600; }

.decision .rv-done { border: 1px solid transparent; border-radius: 8px; }
.decision .rv-done.on { border-color: var(--line); background: var(--surface-2); }
.decision .rv-done-fold {
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--muted);
  cursor: pointer;
}
.decision .rv-done.on .rv-done-fold { border-color: transparent; background: transparent; }
.decision .rv-done-fold:hover { border-color: var(--accent); color: var(--accent); }
.decision .rv-done.on .rv-done-fold:hover { border-color: transparent; }
.decision .rv-done-fold .icon { width: 13px; height: 13px; }
.decision .rv-done-fold .rv-done-caret { margin-left: auto; transition: transform 0.15s ease; }
.decision .rv-done.on .rv-done-caret { transform: rotate(180deg); }

.decision .rv-done-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 2px 8px 10px;
}
.decision .rv-nodefs { font-size: 11px; color: var(--warn); }

.decision .dec-prs { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.decision .rv-prs { display: flex; flex-wrap: wrap; gap: 6px; }
.decision .rv-prpill {
  font: inherit;
  font-size: 12px;
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  max-width: 100%;
  padding: 6px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
}
.decision .rv-prpill:hover { background: var(--hover); }

.decision .rv-prpill-num { font-family: var(--mono); font-weight: 600; }
.decision .rv-prpill-note { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.decision .rv-prpill.on { background: var(--accent-soft); border-color: var(--accent); color: var(--ink); font-weight: 700; }

.decision .rv-prpill-state {
  margin-left: 5px;
  font-size: 10.5px;
  font-weight: 400;
  color: var(--muted);
}
.decision .rv-prpill.done { opacity: 0.8; }
.decision .rv-prpill.done.on { opacity: 1; }

.decision .rv-unit {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.decision .rv-unit.auto { border-style: dashed; }
.decision .rv-unit.read { background: var(--bg); }
.decision .rv-unit-head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 14px;
  border: 0;
  background: transparent;
  font: inherit;
  text-align: left;
  color: var(--ink);
  cursor: pointer;
}
.decision .rv-unit-head:hover { background: var(--hover); }

.decision .rv-mark {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  color: transparent;
}
.decision .rv-mark .icon { width: 13px; height: 13px; }
.decision .rv-unit.read .rv-mark { background: var(--ok); border-color: var(--ok); color: var(--bg); }
.decision .rv-no { flex: none; font-size: 12px; color: var(--faint); }
.decision .rv-title { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 700; }
.decision .rv-unit.read .rv-title { color: var(--muted); font-weight: 600; }

.decision .dec-jm { margin-top: 4px; }
.decision .dec-jm-more {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted);
}
.decision .dec-jm-more:hover { color: var(--accent); }
.decision .dec-jm-more .icon { width: 14px; height: 14px; }
.decision .rv-note-icon {
  flex: none;
  display: none;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
}
.decision .rv-unit.read .rv-note-icon { display: inline-flex; }
.decision .rv-note-icon:hover {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
}
.decision .rv-note-icon .icon { width: 14px; height: 14px; }
.decision .rv-stat { flex: none; display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--faint); }
.decision .rv-add { color: var(--ok); }
.decision .rv-del { color: var(--crit); }
.decision .rv-caret { flex: none; width: 16px; height: 16px; color: var(--faint); transition: transform 0.12s ease; }
.decision .rv-unit.read .rv-caret { transform: rotate(-90deg); }
.decision .rv-unit-body { padding: 0 14px 12px; }
.decision .rv-summary { margin: 2px 0 10px; font-size: 13px; line-height: 1.75; max-width: 90ch; }
.decision .rv-summary > :first-child { margin-top: 0; }
.decision .rv-summary > :last-child { margin-bottom: 0; }
.decision .rv-empty { font-size: 12px; color: var(--faint); }

.decision .rv-file { margin-top: 8px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.decision .rv-file-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  font-size: 12px;
  cursor: pointer;
  list-style: none;
  background: var(--surface-2);
}
.decision .rv-file-head:hover { background: var(--hover); }
.decision .rv-file-head::-webkit-details-marker { display: none; }
.decision .rv-file-caret { width: 14px; height: 14px; flex: none; color: var(--faint); transition: transform 0.12s ease; }
.decision .rv-file[open] .rv-file-caret { transform: rotate(90deg); }
.decision .rv-file[open] .rv-file-head { border-bottom: 1px solid var(--line); }

.decision .rv-dir { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--faint); }
.decision .rv-file-name { flex: 1; min-width: 0; font-weight: 600; }
.decision .rv-fstatus {
  flex: none;
  padding: 0 7px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 10.5px;
  color: var(--muted);
}
.decision .rv-file-head .rv-add, .decision .rv-file-head .rv-del { flex: none; font-size: 11.5px; }

.decision .rv-fmark {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: -5px 0 -5px -5px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
}
.decision .rv-fmark:hover { background: var(--hover); }
.decision .rv-fmark-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  color: transparent;
}
.decision .rv-fmark:hover .rv-fmark-dot { border-color: var(--ok); color: color-mix(in srgb, var(--ok) 40%, transparent); }
.decision .rv-fmark .icon { width: 11px; height: 11px; }
.decision .rv-fmark.on .rv-fmark-dot { background: var(--ok); border-color: var(--ok); color: var(--bg); }
.decision .rv-file.checked .rv-file-head { opacity: 0.62; }
.decision .rv-file.checked .rv-file-head:hover { opacity: 1; }

.decision .rv-diff-wrap { overflow: auto; max-height: 560px; }
.decision .rv-diff {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.6;
}
.decision .rv-diff td { padding: 0; vertical-align: top; }
.decision .rv-diff .dl-n {
  width: 3.6em;
  min-width: 3.6em;
  padding: 0 8px;
  text-align: right;
  color: var(--faint);
  background: var(--surface);
  user-select: none;
  position: sticky;
  font-variant-numeric: tabular-nums;
}
.decision .rv-diff .dl-n:first-child { left: 0; }
.decision .rv-diff .dl-n:nth-child(2) { left: 3.6em; box-shadow: 1px 0 0 var(--line); }
.decision .rv-diff .dl-code { width: 100%; padding-left: 4px; white-space: pre; }
.decision .rv-diff .dl-sign { display: inline-block; width: 1em; color: var(--faint); }
.decision .rv-diff .dl-add { background: var(--diff-add-row); }
.decision .rv-diff .dl-add .dl-n { background: var(--diff-add-gut); color: var(--diff-add-ink); }
.decision .rv-diff .dl-add .dl-sign { color: var(--diff-add-ink); }
.decision .rv-diff .dl-del { background: var(--diff-del-row); }
.decision .rv-diff .dl-del .dl-n { background: var(--diff-del-gut); color: var(--diff-del-ink); }
.decision .rv-diff .dl-del .dl-sign { color: var(--diff-del-ink); }
.decision .rv-diff .dl-note td { color: var(--faint); font-style: italic; padding-left: 8px; }

.decision .rv-diff .dl-gap-cell {
  padding: 3px 10px;
  background: var(--surface-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
}
.decision .rv-diff-none { padding: 10px; font-size: 12px; color: var(--faint); }

.decision .rv-note-wrap {
  padding: 0 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}

.decision .rv-unit.read .rv-note-wrap { padding-top: 10px; }
.decision .rv-note-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 11.5px;
  cursor: pointer;
}
.decision .rv-note-btn:hover { background: var(--hover); color: var(--ink); }
.decision .rv-note-btn.written { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.decision .rv-note-btn .icon { width: 13px; height: 13px; }

.decision .rv-note {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.7;
  resize: none;
  overflow-y: hidden;
}
.decision .rv-note:focus, .lb-note:focus { outline: none; border-color: var(--accent); }

.lb-note {
  box-sizing: border-box;
  padding: 9px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.7;
  resize: none;
  max-height: 40vh;
}
.decision .rv-whole { margin-top: 2px; }

.rv-threads { display: flex; flex-direction: column; gap: 8px; }
.decision .rv-unit .rv-threads { padding: 0 14px 10px; }
.decision .rv-whole .rv-threads { margin-bottom: 8px; }
.rv-thread {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
  overflow: hidden;
}
.rv-thread.resolved { background: transparent; }
.rv-thread-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 11px;
  font-size: 11.5px;
}
.rv-thread-state { display: inline-flex; align-items: center; gap: 5px; color: var(--warn); font-weight: 600; }
.rv-thread-state .icon { width: 13px; height: 13px; }
.rv-thread-state.replied { color: var(--accent); }
.rv-thread-state.ok { color: var(--ok); }
.rv-resolve {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 11.5px;
  cursor: pointer;
}
.rv-resolve:hover:not(:disabled) { border-color: var(--ok); color: var(--ok); }
.rv-resolve:disabled { opacity: 0.6; cursor: default; }
.rv-resolve .icon { width: 13px; height: 13px; }
.rv-thread-body { display: flex; flex-direction: column; gap: 8px; padding: 0 11px 10px; }

.rv-reply { display: flex; flex-direction: column; align-items: flex-start; }
.rv-reply-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 11.5px;
  cursor: pointer;
}
.rv-reply-btn:hover { background: var(--hover); color: var(--ink); }
.rv-reply-btn .icon { width: 13px; height: 13px; }

.rv-reply-text {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 11px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  font-family: inherit;
  font-size: 12.5px;
  line-height: 1.7;
  resize: none;
  overflow-y: hidden;
}
.rv-reply-text:focus { outline: none; border-color: var(--accent); }
.rvm { border-left: 2px solid var(--line); padding-left: 9px; }
.rvm.mine { border-left-color: var(--accent); }
.rvm.navi { border-left-color: var(--ok); }
.rvm-who {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--faint);
  margin-bottom: 2px;
}
.rvm-av { width: 15px; height: 15px; border-radius: 999px; object-fit: cover; }
.rvm-at { color: var(--faint); }
.rvm-text { font-size: 12.5px; line-height: 1.7; max-width: 80ch; }
.rvm-text > :first-child { margin-top: 0; }
.rvm-text > :last-child { margin-bottom: 0; }

.rv-thread-peek {
  padding: 0 11px 9px;
  font-size: 12px;
  color: var(--faint);
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rv-thread-peek:hover { color: var(--ink); }
.rv-thread-peek.open { white-space: normal; }
.rv-open-threads {
  font-size: 11px;
  font-weight: 700;
  color: var(--warn);
  border: 1px solid color-mix(in srgb, var(--warn) 55%, transparent);
  border-radius: 999px;
  padding: 0 8px;
}
.decision .dg-mark.draft { color: var(--faint); }

.decision .dg-unknown-note { font-size: 11.5px; color: var(--faint); padding: 2px 2px 0; }

.lb-threads { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
.lb-threads > * { margin-top: auto; }

.decision .rv-send-right { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.decision .rv-sync { background: var(--surface); border-color: var(--line); color: var(--ink); }
.decision .rv-sync:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-soft); }
.decision .rv-sync:disabled { color: var(--faint); cursor: default; }

.decision .dec-quiz { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.decision .q-card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 11px 14px; }
.decision .q-card.answered { border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); }
.decision .q-card .rv-unit-head { padding: 0; }
.decision .q-card .rv-unit-head:hover { background: transparent; }
.decision .q-card .rv-note-wrap { padding: 8px 0 0; }
.decision .q-src {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; color: var(--muted); white-space: nowrap;
}
.decision .q-src .icon { width: 12px; height: 12px; }
.decision .q-src:hover { color: var(--accent); }
.decision .q-ask { margin-top: 6px; font-size: 13px; font-weight: 600; }
.decision .q-opts { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.decision .q-opt {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  font: inherit; font-size: 13px; line-height: 1.5; text-align: left;
  padding: 8px 12px; width: 100%;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface-2); color: var(--ink);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.decision .q-opt:hover { border-color: var(--accent); }
.decision .q-opt-line { display: inline-flex; align-items: center; gap: 7px; }

.decision .q-opt .icon { width: 14px; height: 14px; flex: none; visibility: hidden; }
.decision .q-opt.on { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 9%, var(--surface-2)); }
.decision .q-opt.on .icon { visibility: visible; color: var(--ok); }
.decision .q-opt.on .q-opt-label { font-weight: 700; }
.decision .q-rec {
  font-size: 10.5px; font-weight: 700; color: var(--ok);
  border: 1px solid color-mix(in srgb, var(--ok) 55%, transparent);
  border-radius: 999px; padding: 0 7px; white-space: nowrap;
}
.decision .q-opt-detail { font-size: 12px; color: var(--muted); padding-left: 21px; }

.decision .dec-state {
  margin-top: 14px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: 10px;
}
.decision .dec-state.is-error { border-left-color: var(--crit); }
.decision .dec-state-head {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: var(--faint);
  margin-bottom: 4px;
}
.decision .dec-state-head .icon { width: 13px; height: 13px; }
.decision .dec-state .dec-msg-text { max-width: none; }

.decision .dec-side { display: flex; flex-direction: column; gap: 5px; }
.decision .dec-side-head { font-size: 11.5px; font-weight: 600; color: var(--faint); margin-bottom: 2px; }
.decision .dec-mat {
  display: grid;
  grid-template-columns: 15px 4.4em minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.35;
  text-align: left;
  background: var(--surface);
}
.decision .dec-mat:hover { border-color: var(--accent); text-decoration: none; background: var(--accent-soft); }
.decision .dec-mat .icon { width: 15px; height: 15px; margin: 0; flex: none; }
.decision .dec-mat .pr-state .icon,
.decision .dec-mat .tstat .icon { width: 15px; height: 15px; margin: 0; }
.decision .dec-mat .ir-go-dest { font-size: 10.5px; color: var(--faint); letter-spacing: 0.02em; white-space: nowrap; }
.decision .dec-mat .ir-go-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.decision .dec-mat.d-slack > .icon:first-child { color: var(--slack); }

.decision .dec-mat-marks { display: inline-flex; gap: 4px; }
.decision .dec-mat-marks .ir-mark { margin-left: 0; }

.decision .dec-mat-tail { display: inline-flex; align-items: center; gap: 6px; }

.decision .dec-act { margin-top: 14px; }

.decision .dec-reply {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.7;
  resize: none;
  overflow-y: hidden;
}
.decision .dec-reply:focus { outline: none; border-color: var(--accent); }
.decision .dec-act-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.decision .dec-act-row .ir-go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}
.decision .dec-act-row .icon { width: 15px; height: 15px; }
.decision .dec-send { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.decision .dec-send:hover:not(:disabled) { filter: brightness(1.08); background: var(--accent); border-color: var(--accent); }

.decision .dec-send:disabled,
.decision .ir-approve:disabled {
  background: transparent;
  border-color: var(--line);
  color: var(--faint);
  cursor: default;
}
.decision .ir-approve { background: var(--ok); border-color: var(--ok); color: var(--bg); }
.decision .ir-approve:hover:not(:disabled) { filter: brightness(1.08); background: var(--ok); border-color: var(--ok); }

.decision .dec-act-row .ir-go.counting { background: var(--crit); border-color: var(--crit); color: var(--bg); }
.decision .dec-act-row .ir-go.counting:hover:not(:disabled) { background: var(--crit); border-color: var(--crit); }
.decision .dec-act-row .ir-go.done { background: transparent; border-color: var(--ok); color: var(--ok); }
.decision .dec-act-row .ir-go.failed { background: transparent; border-color: var(--crit); color: var(--crit); font-weight: 400; }
.decision .dec-act-row .ir-go:disabled { cursor: default; }
.decision .dec-approve-blocked {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--faint);
}
.decision .dec-approve-blocked .icon { width: 14px; height: 14px; }

.decision .dec-passed {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  font-size: 12.5px;
  color: var(--muted);
}
.decision .dec-passed .icon { width: 14px; height: 14px; color: var(--faint); }
.decision .dec-passed-next {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 11.5px;
  cursor: pointer;
}
.decision .dec-passed-next:hover { border-color: var(--accent); color: var(--ink); }

.decision .dec-gone {
  text-align: center;
  padding: 54px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.decision .dec-gone .icon.big { width: 28px; height: 28px; color: var(--ok); margin: 0 0 6px; }
.decision .dec-next {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 12px;
  padding: 8px 14px;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 8px;
  color: var(--bg);
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}
.decision .dec-next .icon { width: 14px; height: 14px; }

@media (max-width: 1200px) {
  .decision .dec-body { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 980px) {
  .dec-rail { display: none; }
}

.backlog-head-sum { font-size: 13px; color: var(--muted); }
.backlog-head-sum b { color: var(--ink); }

.backlog-split {
  flex: 1;
  min-height: 0;
  display: grid;
  
  grid-template-columns: minmax(0, 540px) minmax(0, 1fr);
  gap: 16px;
}
@media (max-width: 1180px) { .backlog-split { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); } }

@media (max-width: 900px) {
  .backlog-split { grid-template-columns: minmax(0, 1fr); }
  .backlog-split .bs-detail { display: none; }
}

.bs-list { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.bs-list .filters { flex-shrink: 0; margin-bottom: 8px; }
.bs-list .backlog-list { flex: 1; min-height: 0; overflow-y: auto; padding-right: 4px; }

.bs-list .filters button .n { margin-left: 6px; font-weight: 700; font-variant-numeric: tabular-nums; }
.bs-list .filters button.zero { color: var(--faint); }
.bs-list .filters button.zero .n { font-weight: 400; opacity: 0.55; }

.bs-search {
  flex: none;
  font: inherit;
  font-size: 13px;
  width: 100%;
  padding: 6px 10px;
  margin-bottom: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
  color: var(--ink);
}
.bs-search::placeholder { color: var(--faint); }
.bs-search:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.backlog-sortbar {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: -2px 0 12px;
  flex-shrink: 0;
}
.bs-axis { display: flex; align-items: center; gap: 9px; }

.bs-axis .gk { flex: none; min-width: 50px; text-align: right; font-size: 11px; color: var(--faint); }

.bs-foldall {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  color: var(--muted);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.bs-foldall .icon { width: 12px; height: 12px; }
.bs-foldall:hover { border-color: var(--accent); color: var(--accent); }

.backlog-list { display: flex; flex-direction: column; gap: 8px; }

.backlog-row {
  display: grid;
  
  grid-template-columns: minmax(0, 1fr) max-content;
  gap: 12px;
  align-items: start;
  padding: 9px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.backlog-row.clickable { cursor: pointer; }
.backlog-row.clickable:hover { background: var(--hover); }

.backlog-row.on {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: inset 3px 0 0 var(--accent);
}

.backlog-row .bg-main { min-width: 0; }

.backlog-row .bg-title { display: flex; align-items: flex-start; gap: 6px; }
.backlog-row .bg-title .tx {
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.backlog-row .bg-rankslot { flex: none; display: flex; width: 48px; margin-top: 2px; }

.backlog-row .bg-title .badge {
  flex: 1;
  justify-content: center;
  font-size: 10.5px;
  padding: 1px 4px;
  border: 1px solid transparent;
}

.backlog-row .bg-meta .bg-mine { font-size: 10px; padding: 0 6px; }

.backlog-row .bg-title .badge .k { opacity: 0.6; font-weight: 400; margin-right: 3px; }

.backlog-row .bg-title .b-thin { background: transparent; border-color: var(--line); }

.backlog-row .bg-title .b-rank3.b-thin { color: var(--muted); border-color: var(--muted); }
.backlog-row .bg-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px 8px;
  margin-top: 4px;
  font-size: 11px;
}
.backlog-row .bg-meta .chip { font-size: 10.5px; padding: 1px 8px; }

.backlog-row .bg-ms { max-width: 200px; }
.backlog-row .bg-ms .tx { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.backlog-row .bg-tid { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--faint); }
.backlog-row .bg-meta .icon { width: 12px; height: 12px; margin-right: 3px; vertical-align: -2px; }

.backlog-row .bg-job.on { border-color: var(--accent); color: var(--accent); }

.backlog-row .bg-job.rel:not(.on) { color: var(--faint); }
.backlog-row .bg-job.rel:hover { color: var(--accent); }
.backlog-row .bg-due { display: inline-flex; align-items: center; font-weight: 600; color: var(--muted); }
.backlog-row .bg-due.warn { color: var(--warn); }
.backlog-row .bg-due.crit { color: var(--crit); }

.backlog-row .spm { padding-top: 1px; }

.bs-detail {
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 20px 24px 0;
}
.bs-head { flex: none; border-bottom: 1px solid var(--line); padding-bottom: 14px; }
.bs-scroll { flex: 1; min-height: 0; overflow-y: auto; padding-bottom: 28px; }
.bs-id { margin-bottom: 6px; }
.bs-tid { display: inline-flex; align-items: center; font-family: var(--mono); font-size: 12px; font-weight: 600; }
.bs-tid .icon { margin-right: 5px; }
.bs-title { margin: 0 0 10px; font-size: 19px; line-height: 1.45; }

.bs-title-edit { margin: 0 -6px 10px; padding: 1px 6px; border-radius: 6px; cursor: text; }
.bs-title-edit:hover { background: var(--hover); }
.bs-title-edit:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.bs-title-input {
  display: block; width: 100%;
  margin: 0 -6px 10px; padding: 1px 6px;
  font: inherit; font-size: 19px; font-weight: 700; line-height: 1.45;
  color: var(--ink); background: var(--bg);
  border: 1px solid var(--accent); border-radius: 6px;
  resize: none; overflow: hidden;
}
.bs-title-input:focus { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }

.bs-meta .bs-edit {
  font: inherit;
  font-size: 12px;
  display: inline-flex; align-items: center;
  cursor: pointer;
}
.bs-meta button.badge { border: 1px solid transparent; font-size: 11px; }
.bs-meta .bs-edit:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.bs-meta .bs-edit .bs-edit-cue { width: 11px; height: 11px; margin-left: 3px; opacity: 0.5; }
.bs-meta .bs-edit:disabled { cursor: default; opacity: 0.55; }
.bs-meta .bs-edit:disabled .bs-edit-cue { display: none; }
.bs-meta .bs-status .icon { margin-right: 4px; }

.bs-editnote { display: flex; align-items: center; gap: 5px; margin-top: 10px; font-size: 12.5px; color: var(--ok); }
.bs-editnote.err { color: var(--crit); }
.bs-editnote .icon { flex: none; width: 14px; height: 14px; }

.bs-pop {
  position: fixed; z-index: 60;
  min-width: 168px; max-width: 280px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
}
.bs-pop-head { padding: 2px 8px 6px; font-size: 11px; color: var(--faint); }
.bs-pop-list { display: flex; flex-direction: column; gap: 1px; max-height: 320px; overflow-y: auto; }
.bs-pop button {
  font: inherit; font-size: 13px; text-align: left;
  display: flex; align-items: baseline; gap: 8px;
  padding: 5px 9px; border: none; border-radius: 6px;
  background: none; color: var(--ink); cursor: pointer;
}
.bs-pop button:hover { background: var(--hover); }
.bs-pop button.on { background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.bs-pop-note { margin-left: auto; font-size: 10.5px; color: var(--faint); white-space: nowrap; }
.bs-pop-clear { color: var(--muted); }
.bs-pop-input {
  font: inherit; font-size: 13px; width: 100%;
  padding: 5px 8px; margin-bottom: 6px;
  color: var(--ink); background: var(--bg);
  border: 1px solid var(--line); border-radius: 6px;
}
.bs-pop-row { display: flex; gap: 6px; }
.bs-pop-ok { border: 1px solid var(--accent) !important; color: var(--accent); font-weight: 700; }
.bs-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.bs-meta .badge { font-size: 11px; border: 1px solid transparent; }
.bs-meta .b-thin { background: transparent; border-color: var(--line); }
.bs-meta .b-rank3.b-thin { color: var(--muted); border-color: var(--muted); }
.bs-meta .chip .icon { width: 13px; height: 13px; margin-right: 4px; }
.bs-meta .chip.over { color: var(--faint); text-decoration: line-through; }
.bs-meta .bg-due.warn { color: var(--warn); }
.bs-meta .bg-due.crit { color: var(--crit); }

.bs-handoff { margin-top: 14px; }
.bs-handnote {
  width: 100%; font: inherit; font-size: 12.5px; line-height: 1.6;
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px;
  padding: 7px 9px;
  
  resize: none; overflow: hidden; min-height: 3.4em;
}
.bs-handnote::placeholder { color: var(--faint); }
.bs-handnote:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.bs-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 12px; margin-top: 10px; }
.bs-actions .bs-note, .bs-actions .bs-blocked { margin-right: auto; }

.bs-run {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.bs-run .icon { width: 15px; height: 15px; }
.bs-run:hover:not(:disabled) { background: var(--accent); color: var(--surface); }

.bs-run:disabled { opacity: 0.4; cursor: not-allowed; border-color: var(--line); background: var(--surface-2); color: var(--faint); }
.bs-blocked { font-size: 12.5px; color: var(--faint); }
.bs-note { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--ok); }
.bs-note.err { color: var(--crit); }
.bs-note .icon { flex: none; width: 14px; height: 14px; }

.bs-body { margin-top: 16px; font-size: 13.5px; }

.bs-body > * { max-width: 76ch; }
.bs-body .md-table-wrap { max-width: 100%; }
.bs-loading { color: var(--faint); font-size: 12.5px; }
.bs-body-err { display: flex; align-items: center; gap: 5px; color: var(--crit); font-size: 12.5px; }
.bs-body-err .icon { flex: none; width: 14px; height: 14px; }
.bs-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 11.5px;
  color: var(--faint);
}
.bs-foot .linkish {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 11.5px;
  color: var(--accent);
  cursor: pointer;
}
.bs-foot .linkish:hover { text-decoration: underline; }

.bs-empty { text-align: center; padding: 64px 16px; color: var(--faint); }
.bs-empty .icon.big { width: 30px; height: 30px; margin: 0 0 8px; }

.backlog-list.grouped { gap: 14px; }
.bg-group > summary {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 2px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 700;
  list-style: none; 
}
.bg-group > summary::-webkit-details-marker { display: none; }
.bg-group > summary:hover { color: var(--accent); }
.bg-group > summary .icon { flex: none; width: 13px; height: 13px; color: var(--faint); }
.bg-group > summary .twist { transition: transform 0.12s ease; }
.bg-group[open] > summary .twist { transform: rotate(90deg); }
.bg-group .bgg-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bg-group .bgg-meta {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  font-weight: 400;
  color: var(--faint);
  white-space: nowrap;
}

.bg-group .bgg-n { display: inline-flex; align-items: baseline; justify-content: flex-end; gap: 2px; min-width: 38px; }
.bg-group .bgg-n b { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.bg-group .bgg-u { font-size: 9.5px; }
.bg-group .bgg-body { display: flex; flex-direction: column; gap: 8px; padding-top: 8px; }

.backlog-empty {
  text-align: center;
  padding: 42px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.backlog-empty .icon.big { width: 28px; height: 28px; color: var(--faint); margin: 0 0 6px; }
.backlog-empty .be-title { font-size: 14px; font-weight: 700; }
.backlog-empty .be-sub { font-size: 12px; color: var(--faint); margin-top: 2px; }

.backlog-empty .be-go {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 12px 4px 0;
  padding: 4px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12.5px;
}
.backlog-empty .be-go:hover { border-color: var(--accent); background: var(--accent-soft); text-decoration: none; }
.backlog-empty .be-go .icon { width: 14px; height: 14px; }

:root {
  --sr-1: #2a78d6; 
  --sr-2: #eb6834; 
  --sr-3: #1baf7a; 
  --sr-4: #eda100; 
  --sr-5: #e87ba4; 
  --sr-6: #008300; 
  --sr-7: #4a3aa7; 
  --sr-other: #9aa3b6; 
  --grid: #e9ecf3;
}
@media (prefers-color-scheme: dark) {
  :root {
    --sr-1: #3987e5;
    --sr-2: #d95926;
    --sr-3: #199e70;
    --sr-4: #c98500;
    --sr-5: #d55181;
    --sr-6: #008300;
    --sr-7: #9085e9;
    --sr-other: #5f6880;
    --grid: #262d3d;
  }
}

.afilters {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 16px 12px;
  margin-bottom: 14px;
}
.afilter-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding: 3px 0; }

.afilter-row > .k {
  flex: none;
  width: 72px;
  font-size: 11.5px;
  color: var(--faint);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.afilter-row .seg { flex-wrap: wrap; }

.afilter-row .seg button .cnt { margin-left: 5px; opacity: 0.65; font-size: 10px; }
.afilter-clear { margin-left: auto; }

body[data-page="analytics"] .ovcards { grid-template-columns: repeat(auto-fit, minmax(252px, 1fr)); }

.acard .big { font-size: 25px; font-weight: 700; line-height: 1.25; margin-bottom: 2px; }
.acard .big .unit { font-size: 15px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.acard .sub { font-size: 12.5px; color: var(--muted); line-height: 1.7; }
.acard .sub .it { white-space: nowrap; }
.acard .sub .sep { color: var(--line); margin: 0 7px; }

.delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11.5px;
  font-weight: 700;
  padding: 0 7px;
  border-radius: 9px;
  background: var(--surface-2);
  color: var(--muted);
  white-space: nowrap;
}
.delta.d-good { background: var(--ok-soft); color: var(--ok); }
.delta.d-bad { background: var(--crit-soft); color: var(--crit); }
.delta .icon { width: 11px; height: 11px; }

.achart-panel { margin-bottom: 18px; }

.achart-head { align-items: center; margin-bottom: 10px; flex-wrap: wrap; }

.achart-controls { display: flex; gap: 4px 18px; flex-wrap: wrap; align-items: center; }
.achart-group { display: inline-flex; align-items: center; gap: 6px; }
.achart-group .gk {
  font-size: 10.5px;
  color: var(--faint);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.seg.attached {
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  overflow: hidden;
  background: var(--surface);
}
.seg.attached button {
  white-space: nowrap;
  border: none;
  border-left: 1px solid var(--line);
  border-radius: 0;
  margin: 0;
  padding: 3px 11px;
  background: none;
}
.seg.attached button:first-child { border-left: none; }

.seg.attached button.on { background: var(--accent-soft); border-color: var(--accent-soft); }

.seg.attached button.on + button { border-left-color: var(--accent-soft); }
.seg.attached button:hover:not(.on) { background: var(--hover); color: var(--accent); }

.seg.attached button.on, .seg.attached button:hover { position: relative; z-index: 1; }
.achart-topline {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px 16px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.achart-legend { display: flex; flex-wrap: wrap; gap: 3px 14px; font-size: 11.5px; color: var(--muted); }
.achart-legend .lg { display: inline-flex; align-items: center; gap: 5px; }
.achart-legend .sw { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.achart-legend .sw.line { height: 2px; border-radius: 1px; }
.achart-legend .v { color: var(--ink); font-family: var(--mono); font-variant-numeric: tabular-nums; }
.achart-stat { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.achart { position: relative; }
.achart svg { display: block; width: 100%; }
.achart .gridline { stroke: var(--grid); stroke-width: 1; }
.achart .axisline { stroke: var(--line); stroke-width: 1; }
.achart .tick { fill: var(--faint); font-size: 10.5px; font-family: var(--mono); }
.achart .xtick { fill: var(--faint); font-size: 10.5px; }

.achart .weekend { fill: var(--ink); opacity: 0.035; }
.achart .avgline { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; opacity: 0.55; }

.achart .hit { fill: transparent; cursor: default; }

.achart .band-hl { fill: var(--ink); opacity: 0; transition: opacity 0.1s; pointer-events: none; }
.achart .band-hl.on { opacity: 0.05; }
.achart-empty { padding: 40px 0; text-align: center; color: var(--faint); font-size: 12.5px; }
.achart-note { margin-top: 8px; line-height: 1.7; }

.achart-tip {
  position: absolute;
  z-index: 6;
  pointer-events: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgb(0 0 0 / 18%);
  padding: 8px 11px;
  font-size: 12px;
  min-width: 168px;
  max-width: 260px;
}
.achart-tip .tip-h { font-weight: 700; color: var(--ink); margin-bottom: 3px; }
.achart-tip .tip-total { display: flex; justify-content: space-between; gap: 12px; color: var(--ink); font-weight: 700; border-bottom: 1px solid var(--line); padding-bottom: 4px; margin-bottom: 4px; }
.achart-tip .tip-row { display: flex; align-items: center; gap: 6px; color: var(--muted); line-height: 1.7; }
.achart-tip .tip-row .sw { width: 9px; height: 3px; border-radius: 2px; flex: none; }
.achart-tip .tip-row .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.achart-tip .tip-row .v { margin-left: auto; color: var(--ink); font-family: var(--mono); font-variant-numeric: tabular-nums; }
.achart-tip .tip-foot { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 4px; }

.atables { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.atables > .wide { grid-column: 1 / -1; }
.atable-panel { padding: 0; overflow: hidden; margin-bottom: 0; }
.atable-panel > .panel-title { padding: 11px 16px 9px; margin: 0; border-bottom: 1px solid var(--line); }
.atable-wrap { overflow-x: auto; }
table.atable { border-collapse: collapse; width: 100%; font-size: 13px; }
table.atable th {
  text-align: left;
  font-weight: 600;
  font-size: 11px;
  color: var(--faint);
  letter-spacing: 0.04em;
  padding: 7px 12px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
table.atable td { padding: 8px 12px; border-bottom: 1px solid var(--line); vertical-align: top; white-space: nowrap; }

table.atable td.jobcell { max-width: 460px; white-space: normal; }
table.atable td.jobcell .sub2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.atable tr:last-child td { border-bottom: none; }
table.atable .r { text-align: right; }
table.atable th.r { text-align: right; }

table.atable .sub2 { display: block; font-size: 11px; color: var(--faint); font-weight: 400; }
table.atable .jid { font-family: var(--mono); font-size: 12px; color: var(--ink); font-weight: 600; }
table.atable .nm { display: inline-flex; align-items: center; gap: 6px; max-width: 320px; }
table.atable .nm .sw { width: 9px; height: 9px; border-radius: 2px; flex: none; }
table.atable .nm .tx { overflow: hidden; text-overflow: ellipsis; }
table.atable tbody tr.clickable { cursor: pointer; }
table.atable tbody tr.clickable:hover { background: var(--hover); }
table.atable td a { position: relative; z-index: 1; }
.atable-empty { padding: 26px 16px; text-align: center; color: var(--faint); font-size: 12.5px; }

.sharebar { display: inline-block; width: 42px; height: 4px; border-radius: 2px; background: var(--gauge-track); vertical-align: 1px; margin-left: 7px; }
.sharebar > i { display: block; height: 100%; border-radius: 2px; background: var(--accent); }

@media (max-width: 1100px) {
  .atables { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .afilter-row > .k { width: 100%; }
}

.feed-head-sum { font-size: 13px; color: var(--muted); }
.feed-head-sum b { color: var(--ink); }
.feed-head-sum.warn b { color: var(--warn); }

.feed-windowbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -4px 0 12px;
}
.feed-windowbar .gk { font-size: 11px; color: var(--faint); }

.feed-onlyfail {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}
.feed-onlyfail .icon { width: 13px; height: 13px; }
.feed-onlyfail:hover { border-color: var(--crit); color: var(--crit); }
.feed-onlyfail.on { background: var(--crit-soft); border-color: var(--crit); color: var(--crit); }

.banner-info {
  background: var(--surface-2);
  color: var(--muted);
  border-color: var(--line);
  display: flex;
  
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.banner-info .icon { width: 14px; height: 14px; flex: none; }
.banner-info .ghost-btn { margin-left: auto; }

.feed-list { display: flex; flex-direction: column; gap: 6px; }

.feed-day {
  position: sticky;
  top: 0;
  z-index: 2;
  margin: 10px 0 2px;
  padding: 4px 0;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.feed-day:first-child { margin-top: 0; }
.feed-day .fd-label { font-size: 12px; font-weight: 700; color: var(--muted); }

.feed-row {
  display: grid;
  grid-template-columns: minmax(58px, max-content) minmax(0, 1fr) max-content;
  gap: 14px;
  align-items: center;
  padding: 7px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: 10px;
  
  content-visibility: auto;
  contain-intrinsic-size: auto 52px;
}

.feed-row.f-ng { border-left-color: var(--crit); }

.feed-row.f-mcp { border-left-color: var(--warn); }

.feed-row .fr-when { line-height: 1.35; white-space: nowrap; }
.feed-row .fr-clock { font-family: var(--mono); font-size: 13px; font-weight: 600; }
.feed-row .fr-cat { display: flex; align-items: center; gap: 3px; font-size: 11px; color: var(--faint); }
.feed-row .fr-cat .icon { width: 12px; height: 12px; }

.feed-row .fr-main { min-width: 0; }
.feed-row .fr-act { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: 13px; }
.feed-row .fr-act > .icon { width: 14px; height: 14px; color: var(--muted); flex: none; }
.feed-row .fr-verb { font-weight: 600; }

.feed-row .fr-target { color: var(--accent); font-weight: 600; }

.feed-row .fr-link { color: var(--ink); }
.feed-row .fr-link .icon.ext { width: 10px; height: 10px; opacity: 0.55; }
.feed-row .fr-link:hover { color: var(--accent); text-decoration: none; }
.feed-row .fr-link:hover .icon.ext { opacity: 1; }

.feed-row .fr-detail {
  font-size: 12px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.feed-row .fr-err {
  font-size: 12px;
  color: var(--crit);
  margin-top: 2px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.feed-row .fr-warn { font-size: 11.5px; color: var(--warn); margin-top: 2px; }

.feed-row .fr-right { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.feed-row .fr-top { display: flex; align-items: center; gap: 5px; }

.feed-row .fr-ok { display: inline-flex; color: var(--ok); }
.feed-row .fr-ok .icon { width: 13px; height: 13px; }
.feed-row .fr-top .badge { font-size: 10.5px; padding: 0 7px; }
.feed-row .fr-top .badge .icon { width: 11px; height: 11px; }
.feed-row .fr-top .chip { font-size: 10.5px; }
.feed-row .fr-idline { display: flex; align-items: center; gap: 6px; }
.feed-row .fr-jid {
  border: none;
  background: none;
  padding: 0;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--faint);
  cursor: pointer;
}
.feed-row .fr-jid:hover { color: var(--accent); text-decoration: underline; }
.feed-row .fr-detail-go { display: inline-flex; color: var(--faint); }
.feed-row .fr-detail-go .icon { width: 13px; height: 13px; }
.feed-row .fr-detail-go:hover { color: var(--accent); }
.feed-row .fr-ticket { font-family: var(--mono); font-size: 10.5px; color: var(--faint); }
.feed-row .fr-ticket:hover { color: var(--accent); }
.feed-row .fr-ticket .icon { width: 10px; height: 10px; }
.feed-row .fr-repo { font-size: 10.5px; color: var(--faint); }

.feed-note { padding: 12px 14px; font-size: 12px; color: var(--faint); text-align: center; }

.feed-empty {
  text-align: center;
  padding: 54px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.feed-empty .icon.big { width: 28px; height: 28px; color: var(--faint); margin: 0 0 6px; }
.feed-empty .fe-title { font-size: 15px; font-weight: 700; }
.feed-empty .fe-sub { font-size: 12.5px; color: var(--faint); margin-top: 2px; }

@media (max-width: 720px) {
  .feed-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .feed-row .fr-when { display: flex; align-items: center; gap: 8px; }
  .feed-row .fr-right { flex-direction: row; align-items: center; justify-content: space-between; width: 100%; }
}

.logs-head-sum { font-size: 12.5px; color: var(--muted); }
.logs-head-sum.warn { color: var(--warn); }
.logs-head-sum.crit { color: var(--crit); }
.logs-head-sum b { font-weight: 700; }

.logs-issues { flex: none; margin-bottom: 10px; }
.logs-issues-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.logs-issues-head .muted { font-size: 11.5px; color: var(--faint); }
.li-toggle {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 0; font-size: 13px; color: var(--ink);
  background: none; border: none; cursor: pointer;
}
.li-toggle .icon { width: 13px; height: 13px; color: var(--faint); transition: transform 0.12s; }
.li-toggle.is-open .icon { transform: rotate(90deg); }

.logs-issue-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 8px;
  max-height: 42vh;
  overflow: auto;
}

.logs-issue {
  padding: 9px 11px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: 8px;
}

.logs-issue.is-act { border-left-color: var(--crit); }
.logs-issue.is-settled { border-left-color: var(--warn); }

.logs-issue .li-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.logs-issue .li-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--faint); }
.logs-issue.is-act .li-dot { background: var(--crit); }
.logs-issue.is-settled .li-dot { background: var(--warn); }
.logs-issue .li-label { font-size: 13px; font-weight: 700; }
.logs-issue .li-count {
  margin-left: auto; font-size: 11.5px; color: var(--muted);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.logs-issue .li-live,
.logs-issue .li-settled {
  padding: 1px 6px; font-size: 10.5px; font-weight: 600; border-radius: 999px; white-space: nowrap;
}
.logs-issue .li-live { color: var(--crit); background: var(--crit-soft); }
.logs-issue .li-settled { color: var(--muted); background: var(--surface-2); }

.logs-issue .li-sample {
  margin: 5px 0 4px;
  font-family: var(--mono); font-size: 11px; color: var(--muted);
  white-space: pre-wrap; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.logs-issue .li-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums;
}
.logs-issue .li-src { font-family: var(--mono); font-size: 10.5px; }

.logs-issue .li-next {
  display: flex; align-items: start; gap: 6px;
  margin-top: 7px; padding-top: 7px;
  font-size: 12px; line-height: 1.5; color: var(--ink);
  border-top: 1px dashed var(--line);
}
.logs-issue .li-next .icon { width: 13px; height: 13px; flex: none; margin-top: 2px; color: var(--faint); }
.logs-issue.is-act .li-next .icon { color: var(--crit); }

.logs-issue .li-acts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.logs-issue .li-acts .ghost-btn { font-size: 11.5px; padding: 3px 8px; }
.logs-issue .li-acts .icon { width: 12px; height: 12px; }

.logs-issue .li-detail,
.log-line .ll-detail {
  margin: 6px 0 0; padding: 6px 8px;
  font-family: var(--mono); font-size: 10.5px; line-height: 1.5; color: var(--muted);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px;
  white-space: pre-wrap; overflow-wrap: anywhere; max-height: 260px; overflow: auto;
}
.logs-issue .li-note { margin-top: 6px; font-size: 11.5px; color: var(--muted); }
.logs-issue .li-note.bad { color: var(--crit); }
.logs-issue .li-note a { font-family: var(--mono); color: var(--accent); }

.logs-issues-empty { padding: 14px; text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.logs-issues-empty .icon.big { width: 20px; height: 20px; color: var(--ok); }
.logs-issues-empty .fe-title { font-size: 13px; font-weight: 700; }
.logs-issues-empty .fe-sub { font-size: 11.5px; color: var(--faint); margin-top: 2px; }

.logs-filterbar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.logs-filterbar .gk { font-size: 11px; color: var(--faint); }
.logs-filterbar .seg button .lt-alert {
  width: 6px; height: 6px; margin-left: 5px; border-radius: 50%;
  background: var(--crit); display: inline-block; vertical-align: 1px;
}

.logs-jobchip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px; font-size: 11.5px; font-family: var(--mono);
  background: var(--accent-soft); border: 1px solid var(--accent); border-radius: 6px;
}
.logs-jobchip .icon { width: 12px; height: 12px; }
.logs-jobchip a { color: var(--accent); }
.logs-jobchip .ghost-btn { font-size: 11px; padding: 1px 6px; }

.logs-search {
  flex: 1; min-width: 160px; max-width: 420px;
  padding: 5px 10px; font-size: 12.5px; font-family: var(--mono);
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: 6px;
}
.logs-search:focus { outline: none; border-color: var(--accent); }

.logs-follow {
  display: inline-flex; align-items: center; gap: 5px; margin-left: auto;
  padding: 5px 10px; font-size: 12px; color: var(--muted);
  background: var(--surface); border: 1px solid var(--line); border-radius: 6px; cursor: pointer;
}
.logs-follow:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }

.logs-follow:disabled { opacity: 0.4; cursor: default; }
.logs-follow.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.logs-follow .icon { width: 12px; height: 12px; }

body[data-page="logs"] .content {
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding-bottom: 20px;
}
.logs-body {
  position: relative;
  flex: 1 1 auto;
  min-height: 160px;
  overflow: auto;
  
  padding: 0 0 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.logs-body:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.log-day {
  position: sticky; top: 0; z-index: 1;
  padding: 6px 10px 4px;
  font-size: 11.5px; font-weight: 700; color: var(--muted);
  background: var(--surface-2);
  border-top: 1px solid var(--line);
}
.log-day:first-child { border-top: none; }
.log-day.is-undated { color: var(--faint); font-weight: 600; font-style: italic; }

.log-line {
  display: grid;
  grid-template-columns: 62px 84px 18px minmax(0, 1fr) auto;
  align-items: start;
  gap: 6px;
  padding: 1px 10px 1px 8px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.55;
  
  content-visibility: auto;
  contain-intrinsic-size: auto 19px;
}
.log-line:hover { background: var(--hover); }
.log-line .ll-time { color: var(--faint); font-variant-numeric: tabular-nums; font-size: 11px; padding-top: 1px; }
.log-line .ll-src {
  font-size: 10.5px; color: var(--faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding-top: 1px; cursor: pointer;
}
.log-line .ll-src:hover { color: var(--accent); }
.log-line .ll-src.is-job { color: var(--muted); }
.log-line .ll-gutter { display: flex; justify-content: center; padding-top: 2px; }
.log-line .ll-gutter .icon { width: 12px; height: 12px; }
.log-line .ll-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.log-line mark { background: var(--warn-soft); color: var(--ink); border-radius: 2px; }

.log-line .ll-detail { grid-column: 1 / -1; }

.log-line.lv-error { color: var(--crit); }
.log-line.lv-error .ll-gutter { color: var(--crit); }
.log-line.lv-warn .ll-gutter { color: var(--warn); }
.log-line.lv-info { color: var(--ink); }

.log-line.clamped .ll-text {
  
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.log-line .ll-more {
  align-self: start; margin-top: 1px; padding: 0 6px;
  font-size: 10.5px; color: var(--faint); white-space: nowrap;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 4px; cursor: pointer;
}
.log-line .ll-more:hover { border-color: var(--accent); color: var(--accent); }

.logs-note { padding: 8px 4px 0; font-size: 12px; color: var(--faint); text-align: center; }

.logs-empty { text-align: center; padding: 54px 16px; }
.logs-empty .icon.big { width: 28px; height: 28px; color: var(--faint); margin: 0 0 6px; }
.logs-empty .fe-title { font-size: 15px; font-weight: 700; }
.logs-empty .fe-sub { font-size: 12.5px; color: var(--faint); margin-top: 2px; }

body[data-page="logs"] .page-head,
body[data-page="logs"] .banner,
body[data-page="logs"] .logs-issues,
body[data-page="logs"] .logs-filterbar,
body[data-page="logs"] .logs-note { flex: none; }

@media (max-width: 720px) {
  .logs-follow { margin-left: 0; }
  .logs-issue-list { grid-template-columns: 1fr; max-height: 50vh; }
  
  .log-line { grid-template-columns: 56px 16px minmax(0, 1fr) auto; }
  .log-line .ll-src { display: none; }
}
}

.phases-split { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); }
@media (max-width: 1180px) { .phases-split { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); } }

.phases-list { display: flex; flex-direction: column; gap: 8px; }

.ph-card {
  border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px;
  background: var(--surface); cursor: pointer;
}
.ph-card:hover { border-color: var(--accent); }
.ph-card.selected { border-color: var(--accent); background: var(--accent-soft); }
.ph-card-head { display: flex; align-items: center; gap: 8px; }
.ph-card-title { font-weight: 700; font-size: 13.5px; min-width: 0; }

.ph-card-done { padding: 7px 12px; }
.ph-card-done .ph-card-title { font-weight: 600; color: var(--muted); }
.ph-card-sum { margin-left: auto; white-space: nowrap; }
.ph-fold-note { margin: -2px 2px 2px; }
.ph-prog { display: flex; gap: 10px; margin-top: 4px; }

.ph-bar { position: relative; height: 5px; border-radius: 3px; background: var(--gauge-track); margin-top: 5px; overflow: hidden; }
.ph-bar-fill2 { position: absolute; inset: 0 auto 0 0; background: var(--accent-soft); border-radius: 3px; }
.ph-bar-fill { position: absolute; inset: 0 auto 0 0; background: var(--accent); border-radius: 3px; }
.ph-units { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ph-units .chip { text-decoration: none; }
.ph-next { margin-top: 6px; }

.ph-incoming { margin-bottom: 12px; }
.ph-card-incoming { cursor: default; border-style: dashed; }
.ph-card-incoming:hover { border-color: var(--line); }

.ph-fold-btn { align-self: flex-start; margin: 8px 0 2px; padding: 3px 8px 3px 4px; }

.ph-detail-head { margin-bottom: 18px; }
.ph-detail-head h2 { font-size: 17px; margin: 0; }

.ph-detail-sum { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 7px; font-size: 12.5px; color: var(--muted); }
.ph-detail-sum .muted { color: var(--faint); }
.ph-sec { margin-top: 14px; }
.ph-sec-title { font-weight: 700; font-size: 12.5px; color: var(--faint); margin-bottom: 6px; }

.ph-sec { margin-top: 22px; }
.ph-unit-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; }

.ph-unit-name { flex: 1; min-width: 0; }
.ph-unit-row .chip { text-decoration: none; }

.ph-table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 13px; }
.ph-table th { text-align: left; font-size: 11.5px; color: var(--faint); font-weight: 600; padding: 4px 8px; border-bottom: 1px solid var(--line); }

.ph-table td { padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.ph-table td.num { text-align: right; font-variant-numeric: tabular-nums; }

.ph-specname { min-width: 0; }
.ph-specname .badge { margin-left: 6px; }
.ph-linkish {
  font: inherit; padding: 0; border: none; background: none; text-align: left;
  color: var(--ink); cursor: pointer; border-bottom: 1px solid transparent;
}
.ph-linkish:hover { color: var(--accent); border-bottom-color: var(--accent); }

.ph-specnote { margin-top: 2px; line-height: 1.5; }

.ph-badge-link { display: inline-flex; align-items: center; gap: 2px; text-decoration: none; }
.ph-badge-link:hover { filter: brightness(1.15); text-decoration: none; }
.ph-badge-go { width: 11px; height: 11px; opacity: 0.7; margin-right: -2px; }

.ph-table tr.ph-group td { border-bottom: none; padding: 14px 8px 2px; }
.ph-table tbody:first-of-type tr.ph-group td { padding-top: 4px; }
.ph-group-plain, .ph-group-btn {
  font-size: 11.5px; font-weight: 700; color: var(--faint); letter-spacing: 0.02em;
}
.ph-group-btn {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: inherit; padding: 2px 6px 2px 2px; margin-left: -2px;
  background: none; border: none; border-radius: 6px; cursor: pointer;
}
.ph-group-btn:hover { background: var(--hover); color: var(--ink); }
.ph-group-btn .icon { width: 13px; height: 13px; }

.ph-docline {
  display: flex; align-items: center; gap: 9px; width: 100%;
  font: inherit; font-size: 13px; text-align: left; cursor: pointer;
  padding: 9px 10px; margin-bottom: 2px;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: 9px;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.ph-docline:hover { border-color: var(--accent); background: var(--hover); }
.ph-docline-flat { cursor: default; background: transparent; border-style: dashed; }
.ph-docline-flat:hover { border-color: var(--line); background: transparent; }
.ph-docline-icon { width: 16px; height: 16px; flex: none; color: var(--accent); }
.ph-docline-name { font-weight: 700; }
.ph-docline:hover .ph-doc-card-go, .ph-docline:hover .ph-doc-card-chev { color: var(--accent); }

.ph-review-entry { margin-top: 22px; margin-bottom: 20px; }
.ph-detail-head + .ph-review-entry { margin-top: 16px; }
.ph-rv-note { font-size: 12.5px; color: var(--faint); padding: 14px 2px; }

.ph-doc-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px; }
.ph-doc-card {
  display: flex; align-items: center; gap: 13px; width: 100%;
  font: inherit; text-align: left; cursor: pointer;
  padding: 16px 18px;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: 11px;
  transition: border-color 0.12s ease, background 0.12s ease, transform 0.12s ease;
}
.ph-doc-card:hover { border-color: var(--accent); background: var(--hover); transform: translateY(-1px); }
.ph-doc-card:active { transform: none; }

.ph-doc-card.waiting { border-color: var(--review); }
.ph-doc-card.waiting .ph-doc-card-icon { color: var(--review); }
.ph-doc-card.waiting .ph-doc-card-go { color: var(--review); }
.ph-doc-card-icon { width: 19px; height: 19px; flex: none; color: var(--accent); }
.ph-doc-card-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 auto; }
.ph-doc-card-title { font-size: 13.5px; font-weight: 700; overflow-wrap: anywhere; }
.ph-doc-card-meta { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.ph-doc-card-quiet { font-size: 11.5px; color: var(--faint); }

.ph-doc-card-go { font-size: 11.5px; font-weight: 700; color: var(--faint); white-space: nowrap; transition: color 0.12s ease; }
.ph-doc-card:hover .ph-doc-card-go { color: var(--accent); }
.ph-doc-card-chev { width: 15px; height: 15px; flex: none; color: var(--faint); }
.ph-doc-card:hover .ph-doc-card-chev { color: var(--accent); }

.ph-pill {
  display: inline-flex; align-items: center;
  font-size: 11.5px; font-weight: 600;
  padding: 3px 9px; border-radius: 999px;
  background: var(--surface-2); color: var(--muted);
}
.ph-pill-draft { background: var(--warn-soft); color: var(--warn); }

.ph-pill-reply { color: var(--accent); }

.ph-pill-changed { background: var(--accent-soft); color: var(--accent); }

.ph-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font: inherit; font-size: 12.5px; font-weight: 600; line-height: 1.3;
  padding: 7px 12px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface); color: var(--ink);
  cursor: pointer; white-space: nowrap;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.ph-btn .icon { width: 14px; height: 14px; flex: none; margin: 0; }
.ph-btn:hover:not(:disabled) { background: var(--hover); border-color: var(--accent); color: var(--accent); }
.ph-btn:active:not(:disabled) { transform: translateY(1px); }

.ph-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.ph-btn-primary:disabled,
.ph-btn-approve:disabled {
  opacity: 1;
  background: transparent;
  border-color: var(--line);
  color: var(--muted); 
}
.ph-btn-ghost { background: transparent; }
.ph-btn-ghost.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.ph-btn-sm { font-size: 11.5px; padding: 4px 9px; border-radius: 7px; }
.ph-btn-icon { padding: 6px; }

.ph-table tr.ph-held td { opacity: 0.5; }
.ph-table tr.ph-held td .badge { opacity: 1; }
.ph-table td.ph-holdcell { text-align: right; white-space: nowrap; }

.ph-table tr.ph-held td.ph-holdcell { opacity: 1; }

.ph-table .ph-holdcell .ph-btn { color: var(--faint); border-color: transparent; }
.ph-table tr:hover .ph-holdcell .ph-btn,
.ph-table tr.ph-held .ph-holdcell .ph-btn { color: var(--muted); border-color: var(--line); }

.ph-btn-primary { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.ph-btn-primary:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); color: var(--bg); filter: brightness(1.08); }

.ph-btn-approve { background: var(--ok); border-color: var(--ok); color: var(--bg); margin-left: 8px; }
.ph-btn-approve:hover:not(:disabled) { background: var(--ok); border-color: var(--ok); color: var(--bg); filter: brightness(1.08); }

.ph-btn-approve.counting { background: var(--crit); border-color: var(--crit); }
.ph-btn-approve.counting:hover:not(:disabled) { background: var(--crit); border-color: var(--crit); }
.ph-btn-primary.counting { background: var(--crit); border-color: var(--crit); color: var(--bg); }
.ph-btn-primary.counting:hover:not(:disabled) { background: var(--crit); border-color: var(--crit); filter: none; }

.ph-btn-danger { background: transparent; border-color: var(--crit); color: var(--crit); }
.ph-btn-danger:hover:not(:disabled) { background: var(--crit-soft); border-color: var(--crit); color: var(--crit); }

.ph-btn-ghost.counting { background: var(--crit); border-color: var(--crit); color: var(--bg); }
.ph-btn-ghost.counting:hover:not(:disabled) { background: var(--crit); border-color: var(--crit); color: var(--bg); }

.ph-docswitch { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; min-width: 0; }
.ph-tab {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: 12.5px; font-weight: 600;
  padding: 5px 12px; border-radius: 999px;
  border: 1px solid transparent; background: transparent; color: var(--muted); cursor: pointer;
}
.ph-tab .icon { width: 14px; height: 14px; flex: none; }
.ph-tab:hover { background: var(--hover); color: var(--ink); }
.ph-tab.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); cursor: default; }
.ph-docchip { position: relative; overflow: hidden; min-width: 40px; justify-content: center; padding: 7px 11px; color: var(--ink); }

.ph-docchip:not(.on) { border-color: var(--line); }
.ph-docchip:disabled { cursor: default; }
.ph-docchip-no { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }

.ph-docchip::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: var(--pg, 0%);
  background: currentColor; opacity: 0.18; pointer-events: none;
  transition: width 0.3s ease;
}
.ph-docchip > * { position: relative; }

.ph-docchip.ghost { border-style: dashed; color: var(--faint); }
.ph-docchip.ghost:hover { background: transparent; color: var(--faint); }

.ph-docchip.done { color: var(--muted); }

.ph-bar-sep { width: 13px; height: 13px; color: var(--faint); flex: none; margin: 0 -2px; }
.ph-bar-doc {
  font-size: 13px; font-weight: 600; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}

.ph-docchip.waiting { border-color: var(--review); color: var(--review); }
.ph-docchip.waiting.on { background: var(--review-soft); }

.ph-docchip-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

.ph-progress-row { display: flex; align-items: center; gap: 10px; }

.ph-pg {
  position: relative; flex: 1 1 auto; min-width: 80px; height: 18px;
  display: flex; align-items: center; cursor: pointer;
}
.ph-pg-track {
  position: relative; width: 100%; height: 9px;
  background: var(--surface-2); border-radius: 4px; overflow: hidden;
}
.ph-pg-seg { position: absolute; top: 0; bottom: 0; }
.ph-pg-left { font-size: 11.5px; color: var(--faint); white-space: nowrap; font-variant-numeric: tabular-nums; }

.ph-pg-seg.s-read, .ph-map-seg.s-read { background: var(--line); }
.ph-pg-seg.s-unread, .ph-map-seg.s-unread { background: var(--gauge-track); }
.ph-pg-seg.s-changed, .ph-map-seg.s-changed { background: var(--accent); }

.ph-pg-seg.s-changed, .ph-map-seg.s-changed { z-index: 1; }
.ph-pg-seg.s-changed { min-width: 5px; }
.ph-map-seg.s-changed { min-height: 5px; }

.ph-pg-seg { box-shadow: inset 1px 0 0 var(--bg); }
.ph-map-seg { box-shadow: inset 0 1px 0 var(--bg); }
.ph-pg-seg:first-child, .ph-map-seg:first-child { box-shadow: none; }

.ph-pg-view, .ph-map-view {
  position: absolute; z-index: 2;
  box-shadow: inset 0 0 0 1px var(--bg), inset 0 0 0 2px var(--muted);
  border-radius: 3px; opacity: 0.85;
  transition: box-shadow 0.12s ease;
}
.ph-pg:hover .ph-pg-view, .ph-map:hover .ph-map-view {
  box-shadow: inset 0 0 0 1px var(--bg), inset 0 0 0 2px var(--ink);
}
.ph-pg-view { top: 0; bottom: 0; }
.ph-map-view { left: 0; right: 0; }

.ph-pg-view::before, .ph-map-view::before {
  content: ""; position: absolute; inset: 0;
  background: var(--bg); opacity: 0.3; border-radius: 2px;
}

.ph-reader-body { display: flex; flex: 1; min-height: 0; }
.ph-map {
  flex: none; width: 17px; padding: 8px 4px;
  display: flex; justify-content: center; cursor: pointer;
}
.ph-map-track {
  position: relative; width: 9px;
  background: var(--surface-2); border-radius: 4px; overflow: hidden;
}
.ph-map-seg { position: absolute; left: 0; right: 0; }

.ph-empty { color: var(--faint); font-size: 13px; padding: 24px 4px; }

body.ph-reading .page-head { display: none; }
body.ph-reading .content { padding: 0; }
body.ph-reading .backlog-split { gap: 0; grid-template-columns: minmax(0, 1fr); }
body.ph-reading .backlog-split .bs-list { display: none; }

body.ph-reading .backlog-split .bs-detail {
  display: flex; flex-direction: column; min-height: 0;
  overflow: hidden;
  border: none; border-radius: 0; background: var(--bg);
  padding: 0;
}
body.ph-reading #load-error { margin: 10px 16px 0; }

.ph-reader-root { display: flex; flex-direction: column; flex: 1; min-height: 0; }

.ph-scroll { flex: 1; min-width: 0; min-height: 0; overflow-y: auto; scrollbar-width: none; }
.ph-scroll::-webkit-scrollbar { width: 0; height: 0; }

.ph-bar-row {
  flex: none; z-index: 10;
  
  max-height: 70vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 7px;
  padding: 10px 28px 9px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.ph-bar-main, .ph-bar-sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ph-bar-spacer { flex: 1 1 auto; }
.ph-bar-title { font-weight: 700; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 0 1 auto; }
.ph-bar-label { font-size: 11px; color: var(--faint); }
.ph-bar-hint { font-size: 11.5px; color: var(--faint); }
.ph-bar-note { font-size: 12px; color: var(--muted); }
.ph-font { display: inline-flex; align-items: center; gap: 6px; }
.ph-font { margin-left: 10px; padding-left: 12px; border-left: 1px solid var(--line); }

.ph-updated {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; color: var(--accent);
  background: var(--accent-soft); border-radius: 8px;
  padding: 6px 10px;
}
.ph-updated .icon { width: 14px; height: 14px; flex: none; }

.ph-help {
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 14px; font-size: 12.5px; line-height: 1.7;
}
.ph-help-title { font-weight: 700; margin-bottom: 6px; }
.ph-help-list { margin: 0 0 8px; padding-left: 1.2em; color: var(--muted); }
.ph-help-list b { color: var(--ink); }

.ph-reader {
  font-size: var(--ph-fs, 16.5px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(250px, 24vw, 340px);
  gap: 28px;
  max-width: calc(64em + 340px + 28px);
  margin: 0 auto;
  padding: 14px 28px 40vh;
  align-items: start;
}
@media (max-width: 1000px) {
  .ph-reader { grid-template-columns: minmax(0, 1fr); max-width: 100%; padding: 14px 16px 30vh; }
}
.ph-col-doc { min-width: 0; }
.ph-doc-wrap { position: relative; }

.ph-doc {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 2em 2.4em 2.6em;
  
  line-height: 1.9;
}

.ph-doc-sec { position: relative; padding: 0.1em 0.8em; margin: 0 -0.8em; border-left: 3px solid transparent; }

.ph-doc-sec[data-kind="list"] { padding-top: 0.22em; padding-bottom: 0.22em; }
.ph-doc-sec[data-kind="list"] > .md-list { margin: 0; }
.ph-doc-sec[data-kind="list"] > .md-list > li { margin: 0; }
.ph-doc-sec[data-kind="list"] + .ph-doc-sec[data-kind="text"] { padding-top: 0.9em; }

.ph-doc-sec { transition: background-color 0.25s ease, border-left-color 0.25s ease; }
.ph-doc-sec.ph-changed { border-left-color: var(--accent); background: var(--accent-soft); }

.ph-doc-sec.ph-unread { border-left-color: var(--faint); }

.ph-doc-sec.ph-changed { cursor: pointer; }

.ph-doc-sec.ph-changed:hover, .ph-doc-sec.ph-preview { outline: 1px dashed var(--accent); z-index: 1; }

.ph-ackmark {
  font: inherit;
  position: absolute; top: 0; bottom: 0; right: -1.5em; width: 1.4em;
  display: flex; align-items: center; justify-content: center;
  padding: 0; border: none; border-radius: 7px;
  background: none; cursor: pointer;
}
.ph-ackmark:hover { background: var(--hover); }

.ph-ackmark-dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 0.95em; height: 0.95em;
  border: 1px solid var(--accent); border-radius: 999px;
  background: var(--surface); color: var(--accent);
}
.ph-ackmark .icon { width: 0.62em; height: 0.62em; }

.ph-doc-sec.ph-changed:hover .ph-ackmark-dot,
.ph-ackmark:hover .ph-ackmark-dot { background: var(--accent); color: var(--bg); }

.ph-ackmark.acked .ph-ackmark-dot { border-color: transparent; background: transparent; color: var(--faint); }
.ph-ackmark.acked:hover .ph-ackmark-dot { background: transparent; color: var(--ink); }

.ph-doc .md-h { margin: 1.4em 0 0.4em; }
.ph-doc .md-h1 { font-size: 1.5em; }
.ph-doc .md-h2 { font-size: 1.28em; }
.ph-doc .md-h3 { font-size: 1.1em; color: var(--ink); }
.ph-doc .md-h4, .ph-doc .md-h5, .ph-doc .md-h6 { font-size: 1em; color: var(--muted); }
.ph-doc .md-p { margin: 0 0 0.9em; line-height: inherit; }
.ph-doc .md-list { margin: 0 0 0.9em; }

.ph-doc .md-list li { line-height: inherit; margin: 0.5em 0; }

.ph-doc .md-list .md-list { margin-top: 0.35em; }
.ph-doc .md-list .md-list li { margin: 0.25em 0; }
.ph-doc .md-table { font-size: 0.85em; }
.ph-doc .md-pre { font-size: 0.82em; }
.ph-doc .md-hr { margin: 1.6em 0; }
.ph-doc-sec:first-child .md-h { margin-top: 0; }

mark.ph-anchor {
  background: var(--warn-soft); color: inherit;
  border-bottom: 2px solid var(--warn);
  border-radius: 2px; padding: 0.06em 0; cursor: pointer;
}
mark.ph-anchor.a-sent { background: var(--accent-soft); border-bottom-color: var(--accent); }
mark.ph-anchor.a-resolved { background: transparent; border-bottom: 1px dashed var(--faint); }
mark.ph-anchor.active { background: var(--warn); color: var(--bg); }
mark.ph-anchor.a-sent.active { background: var(--accent); color: var(--bg); }

.ph-gutter { position: relative; min-width: 0; }
.ph-gutter .ph-cmt { position: absolute; left: 0; right: 0; transition: top 0.15s ease; }

.ph-gutter.stacked { display: flex; flex-direction: column; gap: 8px; }
.ph-gutter.stacked .ph-cmt { position: static; }

.ph-gutter-empty {
  position: absolute; inset: 0 0 auto 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  padding: 14px 4px;
  border-left: 2px dashed var(--line);
  padding-left: 14px;
  color: var(--faint);
}
.ph-gutter-empty .icon { width: 15px; height: 15px; margin-bottom: 2px; }
.ph-gutter-empty-title { font-size: 12px; font-weight: 700; }
.ph-gutter-empty-sub { font-size: 11.5px; line-height: 1.5; }
.ph-gutter.stacked .ph-gutter-empty { display: none; }

.ph-cmt {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 11px 9px;
  font-size: 12.5px; line-height: 1.6;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  cursor: pointer;
}

.ph-cmt.s-draft { border-color: var(--warn); }
.ph-cmt.s-resolved { opacity: 0.72; }
.ph-cmt.active { border-color: var(--accent); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12); }

.ph-float {
  position: fixed; right: 20px; z-index: 20;
  width: min(340px, 34vw);
  display: flex; flex-direction: column; gap: 8px;
}
.ph-cmt.floating { box-shadow: 0 14px 34px rgba(0, 0, 0, 0.34); }

.ph-cmt-reply {
  margin: 7px 0 0 8px; padding: 5px 0 2px 10px;
  border-left: 2px solid var(--line);
}

.ph-cmt-reply.mine { border-left-color: var(--accent); }
.ph-cmt-reply-head { display: flex; align-items: center; gap: 5px; margin-bottom: 2px; }
.ph-cmt-reply-head .icon { width: 13px; height: 13px; color: var(--faint); }
.ph-cmt-reply-who { font-size: 10.5px; font-weight: 700; color: var(--muted); }
.ph-cmt-reply .md-p { margin: 0 0 0.3em; font-size: 12px; line-height: 1.65; }
.ph-cmt-reply .md-list { margin: 0 0 0.3em; font-size: 12px; }

.ph-cmt-replybox { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }

.ph-cmt-where {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  margin-top: 6px; font-size: 11.5px; color: var(--faint);
}
.ph-cmt-where .icon { width: 13px; height: 13px; }
.ph-cmt-where-text { color: var(--muted); }
.ph-cmt-where-sub { font-variant-numeric: tabular-nums; }

.ph-cmt-head { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; flex-wrap: wrap; }

.ph-cmt-no {
  font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--muted); background: var(--hover);
  border-radius: 4px; padding: 1px 5px;
}
.ph-cmt-re { font-size: 10.5px; color: var(--faint); }

.ph-cmt-state {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em;
}
.ph-cmt-state .icon { width: 12px; height: 12px; }
.ph-cmt-state.s-draft { color: var(--warn); }

.ph-cmt-state.s-wait { color: var(--muted); }
.ph-cmt-state.s-sent { color: var(--accent); }
.ph-cmt-state.s-resolved { color: var(--ok); }
.ph-cmt-time { font-size: 10.5px; color: var(--faint); font-variant-numeric: tabular-nums; }
.ph-cmt-scope { font-size: 11.5px; color: var(--faint); margin-bottom: 5px; }
.ph-cmt-quote {
  margin: 0 0 5px; padding: 3px 9px;
  font-size: 11.5px; color: var(--faint); line-height: 1.5;
  border-left: 3px solid var(--line);
  white-space: pre-wrap; overflow-wrap: anywhere;
  max-height: 5.4em; overflow: hidden;
}
.ph-cmt-quote.gone { text-decoration: line-through; text-decoration-color: var(--faint); }

.ph-cmt-quote.slim { max-height: 3em; }

.ph-cmt-note { font-size: 11px; color: var(--ok); margin-bottom: 5px; line-height: 1.5; }
.ph-cmt.s-draft .ph-cmt-note { color: var(--warn); }
.ph-cmt-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.ph-cmt-text {
  width: 100%; font: inherit; font-size: 12.5px; line-height: 1.6;
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px;
  padding: 7px 9px;
  
  resize: none; overflow: hidden; min-height: 3.6em;
}
.ph-cmt-text::placeholder { color: var(--faint); }
.ph-cmt-text:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ph-cmt-acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 7px; }

.ph-loose {
  border: 1px dashed var(--line); border-radius: 10px;
  padding: 6px 10px 8px; margin-bottom: 12px;
  background: var(--surface);
}
.ph-loose-head {
  display: flex; align-items: center; gap: 7px; width: 100%;
  font: inherit; font-size: 12.5px; font-weight: 700;
  background: none; border: none; color: var(--ink);
  padding: 4px 0; cursor: pointer; text-align: left;
}
.ph-loose-head .icon { width: 14px; height: 14px; flex: none; color: var(--faint); }
.ph-loose-sum { font-weight: 400; font-size: 11.5px; color: var(--faint); }

.ph-loose-body { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.ph-loose-resolved { margin-top: 6px; }