:root{--bg:#0f1113;--card:#181b1f;--line:#2a2e34;--fg:#e8e6e1;--mute:#8b9097;--accent:#f2a33a;
 font:15px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--fg);background:var(--bg);color-scheme:dark}
*{box-sizing:border-box}
body{margin:0;background:var(--bg)}
h1{font-size:1.15rem;margin:0}
h2{font-size:.95rem;margin:2rem 0 .75rem;text-transform:uppercase;letter-spacing:.06em;color:var(--mute)}
h3{font-size:.9rem;margin:1.2rem 0 .4rem}
.muted{color:var(--mute)}.small{font-size:.8rem;text-transform:none;letter-spacing:0}
button,input,select{font:inherit;color:inherit;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:.5rem .75rem}
button{cursor:pointer;background:var(--accent);color:#16120a;border-color:var(--accent);font-weight:600}
button.ghost{background:transparent;color:var(--fg);border-color:var(--line);font-weight:400}
button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.login{max-width:340px;margin:18vh auto 0;padding:0 16px;display:grid;gap:.9rem}
.login label{display:grid;gap:.3rem;color:var(--mute);font-size:.85rem}
#lerr{color:var(--accent);min-height:1.5em;margin:0}

header{display:flex;align-items:center;gap:1rem;padding:1rem 16px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg);z-index:2;flex-wrap:wrap}
.grow{flex:1}
.live{font-size:.85rem;color:var(--mute)}
.live::before{content:"";display:inline-block;width:.55rem;height:.55rem;border-radius:50%;background:var(--mute);margin-right:.45rem;vertical-align:.05em}
.live.on::before{background:var(--accent);animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:.3}}
@media (prefers-reduced-motion:reduce){.live.on::before{animation:none}}
#banner{margin:1rem 16px 0;padding:.6rem .8rem;border:1px solid var(--accent);border-radius:8px;color:var(--accent)}
main{max-width:1100px;margin:0 auto;padding:0 16px 4rem}

.chips{list-style:none;padding:0;margin:0 0 .8rem;display:flex;flex-wrap:wrap;gap:.4rem}
.chips li{border:1px solid var(--line);border-radius:999px;padding:.15rem .7rem;font-size:.85rem}
.chips li.on{border-color:var(--accent);color:var(--accent)}
.chips li.off{color:var(--mute);border-style:dashed}

.now{list-style:none;padding:0;margin:0;display:grid;gap:.75rem;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr))}
.now button,.list button{all:unset;cursor:pointer;display:block;width:100%;box-sizing:border-box;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:.9rem 1rem}
.now button{border-left:3px solid var(--accent)}
.now button:focus-visible,.list button:focus-visible{outline:2px solid var(--accent)}
.kind{font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:var(--accent)}
.now b{display:block;margin:.3rem 0;line-height:1.35}
.meta{font-size:.8rem;color:var(--mute);overflow-wrap:anywhere}
.tick{font-variant-numeric:tabular-nums}

.log{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:.8rem 1rem;margin:0;font:12px/1.55 ui-monospace,Consolas,monospace;color:var(--mute);max-height:300px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere}

.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.8rem}
.filters input{flex:1;min-width:200px}
.list{list-style:none;padding:0;margin:0;display:grid;gap:.4rem}
.list button{display:grid;grid-template-columns:1fr auto;gap:.15rem 1rem;padding:.65rem .9rem}
.list b{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st{font-size:.8rem;color:var(--mute);white-space:nowrap}
.st.running{color:var(--accent)}
.st.failed::before,.st.blocked::before{content:"✕ "}

dialog{background:var(--card);color:var(--fg);border:1px solid var(--line);border-radius:12px;width:min(900px,calc(100vw - 32px));max-height:85vh;padding:1.2rem}
dialog::backdrop{background:#000a}
#close{float:right}
dialog h2{text-transform:none;letter-spacing:0;color:var(--fg);font-size:1.1rem;margin:.3rem 0}
pre{white-space:pre-wrap;overflow-wrap:anywhere;font:12.5px/1.55 ui-monospace,Consolas,monospace;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:.7rem;max-height:40vh;overflow:auto}

/* graphe d'agent : GPT décide -> Claude exécute -> ... */
.graph{list-style:none;padding:0;margin:.5rem 0;position:relative}
.graph li{position:relative;padding:0 0 1rem 1.6rem}
.graph li::before{content:"";position:absolute;left:.42rem;top:1.1rem;bottom:0;width:1px;background:var(--line)}
.graph li:last-child::before{display:none}
.graph li::after{content:"";position:absolute;left:0;top:.35rem;width:.85rem;height:.85rem;border-radius:50%;border:2px solid var(--mute);background:var(--bg)}
.graph li.gpt::after{border-color:var(--fg)}
.graph li.ok::after{background:var(--fg);border-color:var(--fg)}
.graph li.ko::after{border-color:var(--accent)}
.graph li.cur::after{background:var(--accent);border-color:var(--accent);animation:pulse 1.6s infinite}
.graph .who{font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:var(--mute)}
.graph details{margin-top:.3rem}
.graph summary{cursor:pointer;color:var(--mute);font-size:.85rem}