:root { --addbg:#d7f5de; --delbg:#fbdadd; --bg:#fafafa; --fg:#1a1a1a; --mut:#666; --line:#ddd; --acc:#0b6bcb; --err:#b00020; --ok:#1b7f3b; }
@media (prefers-color-scheme: dark) { :root { --addbg:#12361f; --delbg:#4a1820; --bg:#16181c; --fg:#e8e8e8; --mut:#9aa; --line:#333; --acc:#6ab0ff; --err:#ff6b7a; --ok:#5fd68a; } }
* { box-sizing: border-box; }
body { margin:0; font:15px/1.5 system-ui,sans-serif; background:var(--bg); color:var(--fg); }
header { display:flex; gap:1rem; align-items:center; padding:.6rem 1rem; border-bottom:1px solid var(--line); }
header nav { display:flex; gap:1rem; flex:1; } a { color:var(--acc); }
main { max-width:1100px; margin:1rem auto; padding:0 1rem; }
table { border-collapse:collapse; width:100%; } th,td { text-align:left; padding:.35rem .6rem; border-bottom:1px solid var(--line); vertical-align:top; }
.err { color:var(--err); } .ok { color:var(--ok); } .mut { color:var(--mut); }
input,button { font:inherit; padding:.35rem .6rem; } button { cursor:pointer; }
form.inline { display:inline; } .card { border:1px solid var(--line); border-radius:6px; padding:.8rem 1rem; margin:.8rem 0; }

pre.job { white-space:pre-wrap; overflow-wrap:anywhere; overflow:auto; max-height:70vh; font-size:13px; }
pre.diff, pre.body { overflow:auto; max-height:70vh; border:1px solid var(--line); padding:.5rem; font-size:13px; }
.diff-add { display:block; background:var(--addbg); } .diff-del { display:block; background:var(--delbg); } .diff-ctx { display:block; }
textarea.body { width:100%; font:13px/1.4 ui-monospace,monospace; }
.warn { color:#b26a00; } @media (prefers-color-scheme: dark) { .warn { color:#ffb454; } }
.guide dl { display:grid; grid-template-columns:max-content 1fr; gap:.25rem 1rem; margin:.6rem 0; } .guide dt { font-weight:600; } .guide dd { margin:0; }
@media (max-width:600px) { .guide dl { grid-template-columns:1fr; } .guide dd { margin-bottom:.4rem; } }
.chart { width:100%; height:320px; margin:.8rem 0; }
button.pop { all:unset; cursor:pointer; text-decoration:underline dotted; text-underline-offset:3px; }
button.pop:focus-visible { outline:2px solid var(--acc); outline-offset:2px; }
.popover { max-width:min(32rem, calc(100vw - 32px)); padding:.8rem 1rem; border:1px solid var(--line); border-radius:6px; background:var(--bg); color:var(--fg); box-shadow:0 6px 24px rgba(0,0,0,.25); }
.popover p, .popover ul { margin:.4rem 0 0; } .popover ul { padding-left:1.2rem; }

.spin { display:inline-block; width:.9em; height:.9em; border:2px solid var(--line); border-top-color:var(--acc); border-radius:50%; animation:spin .8s linear infinite; vertical-align:-.1em; }
@keyframes spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation-duration:3s; } }
/* Selagi ada Cek berjalan, tombol Cek lain ditahan agar status tidak tertimpa. */
body:has(#jobstatus .running) form[hx-post] button { opacity:.5; pointer-events:none; }