:root{
  --bg:#f5f6fa;--bg2:#ffffff;--bg3:#eef0f6;--fg:#1a1d29;--fg2:#5b6070;--fg3:#8a90a3;--line:#e3e6ee;--line2:#d2d6e2;
  --accent:#4f46e5;--accent2:#6366f1;--accent-soft:#eef0ff;--ok:#16a34a;--ok-soft:#dcfce7;--warn:#d97706;--warn-soft:#fef3c7;--err:#dc2626;--err-soft:#fee2e2;--info:#0284c7;--info-soft:#e0f2fe;
  --shadow:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.08);--shadow2:0 10px 30px rgba(16,24,40,.12);--radius:12px;--sidebar:248px;--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
[data-theme=dark]{--bg:#0f1117;--bg2:#171a23;--bg3:#1f2330;--fg:#e6e8ef;--fg2:#a2a8bb;--fg3:#6f758a;--line:#262b3a;--line2:#333a4d;--accent:#818cf8;--accent2:#6366f1;--accent-soft:#232647;--ok-soft:#14321f;--warn-soft:#3a2a10;--err-soft:#3d1717;--info-soft:#0f2a3d;--shadow:0 1px 2px rgba(0,0,0,.4);--shadow2:0 10px 30px rgba(0,0,0,.5)}
*{box-sizing:border-box}html,body{margin:0;height:100%}
body{font:14px/1.5 -apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","PingFang SC","Microsoft YaHei",sans-serif;background:var(--bg);color:var(--fg)}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0 0 .5rem;font-weight:650;letter-spacing:-.01em}h1{font-size:1.45rem}h2{font-size:1.15rem}h3{font-size:1rem}
code,pre{font-family:var(--mono);font-size:12.5px}
pre{background:var(--bg3);border:1px solid var(--line);border-radius:8px;padding:.75rem;overflow:auto;max-height:60vh;white-space:pre-wrap;word-break:break-word}
/* layout */
.app{display:flex;min-height:100vh}
.sidebar{width:var(--sidebar);flex:0 0 var(--sidebar);background:var(--bg2);border-right:1px solid var(--line);position:sticky;top:0;height:100vh;overflow-y:auto;display:flex;flex-direction:column}
.brand{display:flex;align-items:center;gap:.6rem;padding:1rem 1.1rem;border-bottom:1px solid var(--line)}
.brand .logo{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--accent),#22d3ee);display:grid;place-items:center;color:#fff;font-weight:800}
.brand b{font-size:15px;display:block;line-height:1.1}.brand small{color:var(--fg3);font-size:11px}
.nav{padding:.5rem .6rem;flex:1}.nav .group{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--fg3);padding:.9rem .6rem .3rem;font-weight:600}
.nav a{display:flex;align-items:center;gap:.55rem;padding:.42rem .6rem;border-radius:8px;color:var(--fg2);font-weight:500}
.nav a:hover{background:var(--bg3);text-decoration:none;color:var(--fg)}.nav a.active{background:var(--accent-soft);color:var(--accent)}
.nav a .ico{width:20px;text-align:center;font-size:15px}.nav a .dot{margin-left:auto}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;background:var(--fg3)}.dot.on{background:var(--ok);box-shadow:0 0 0 3px rgba(22,163,74,.18)}.dot.off{background:var(--err)}.dot.busy{background:var(--warn);animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.4}}
.sidebar .foot{padding:.8rem 1rem;border-top:1px solid var(--line);font-size:12px;color:var(--fg3);display:flex;justify-content:space-between;align-items:center}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 85%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);padding:.7rem 1.5rem;display:flex;align-items:center;gap:1rem}
.topbar h1{margin:0;font-size:1.2rem}.topbar .spacer{flex:1}.topbar .crumbs{color:var(--fg3);font-size:12px}
.content{padding:1.4rem 1.5rem 3rem;max-width:1400px;width:100%}
@media(max-width:900px){.sidebar{position:fixed;left:-260px;transition:left .2s;z-index:50}.sidebar.open{left:0}.content{padding:1rem}.menu-btn{display:inline-flex!important}}
.menu-btn{display:none}
/* cards */
.card{background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.1rem 1.2rem;margin-bottom:1.1rem}
.card.tight{padding:.7rem .9rem}.card h2,.card h3{display:flex;align-items:center;gap:.5rem}.card h2 .spacer,.card h3 .spacer{flex:1}
.grid{display:grid;gap:1rem}.g2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}.g3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}.g4{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.tile{background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius);padding:.9rem 1rem;box-shadow:var(--shadow)}
.tile .k{font-size:11.5px;color:var(--fg3);text-transform:uppercase;letter-spacing:.06em;font-weight:600}.tile .v{font-size:1.65rem;font-weight:700;line-height:1.2;margin:.15rem 0}.tile .s{font-size:12px;color:var(--fg2)}
/* buttons */
.btn{display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .85rem;border-radius:8px;border:1px solid var(--line2);background:var(--bg2);cursor:pointer;font-weight:500;font-size:13px;line-height:1.2;transition:.15s;white-space:nowrap}
.btn:hover{background:var(--bg3);border-color:var(--fg3)}.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}.btn.primary:hover{background:var(--accent2)}
.btn.danger{color:var(--err);border-color:color-mix(in srgb,var(--err) 40%,var(--line2))}.btn.danger:hover{background:var(--err-soft)}
.btn.ok{color:var(--ok)}.btn.sm{padding:.25rem .55rem;font-size:12px}.btn.xs{padding:.12rem .4rem;font-size:11.5px}.btn.ghost{border-color:transparent;background:transparent}.btn.ghost:hover{background:var(--bg3)}
.btn .spin{width:12px;height:12px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.btnrow{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
/* forms */
.field{display:flex;flex-direction:column;gap:.3rem;margin-bottom:.8rem}.field label{font-size:12.5px;font-weight:600;color:var(--fg2)}.field .help{font-size:11.5px;color:var(--fg3)}
.input,select.input,textarea.input{width:100%;padding:.5rem .7rem;border:1px solid var(--line2);border-radius:8px;background:var(--bg2);color:var(--fg);outline:none;transition:.15s}
.input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}textarea.input{min-height:110px;resize:vertical}textarea.code{font-family:var(--mono);font-size:12.5px;min-height:220px;white-space:pre;tab-size:2}
.row{display:flex;gap:.8rem;flex-wrap:wrap}.row>.field{flex:1;min-width:160px}
.switch{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;user-select:none}.switch input{display:none}.switch i{width:36px;height:20px;border-radius:999px;background:var(--line2);position:relative;transition:.2s}.switch i:after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:.2s;box-shadow:0 1px 2px rgba(0,0,0,.3)}.switch input:checked+i{background:var(--ok)}.switch input:checked+i:after{left:18px}
.checks{display:flex;flex-wrap:wrap;gap:.4rem}.checks label{display:inline-flex;align-items:center;gap:.3rem;padding:.25rem .6rem;border:1px solid var(--line2);border-radius:999px;font-size:12.5px;cursor:pointer}.checks input:checked+span{color:var(--accent);font-weight:600}
/* tables */
.table{width:100%;border-collapse:collapse;font-size:13px}.table th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--fg3);font-weight:600;padding:.5rem .6rem;border-bottom:1px solid var(--line)}
.table td{padding:.55rem .6rem;border-bottom:1px solid var(--line);vertical-align:middle}.table tr:hover td{background:var(--bg3)}.table td.num{text-align:right;font-variant-numeric:tabular-nums}
.table .actions{white-space:nowrap;text-align:right}.tablewrap{overflow-x:auto}
.ellipsis{max-width:380px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
/* badges */
.badge{display:inline-flex;align-items:center;gap:.3rem;padding:.12rem .55rem;border-radius:999px;font-size:11.5px;font-weight:600;background:var(--bg3);color:var(--fg2);white-space:nowrap}
.badge.queued{background:var(--info-soft);color:var(--info)}.badge.processing{background:var(--warn-soft);color:var(--warn)}.badge.completed,.badge.published,.badge.pass,.badge.ok,.badge.supported,.badge.done{background:var(--ok-soft);color:var(--ok)}
.badge.failed,.badge.halted,.badge.block,.badge.refuted,.badge.error,.badge.fail{background:var(--err-soft);color:var(--err)}.badge.skipped,.badge.warn,.badge.draft,.badge.unverified,.badge.misleading,.badge.retired,.badge.pending{background:var(--warn-soft);color:var(--warn)}
.badge.active{background:var(--ok-soft);color:var(--ok)}
.chip{display:inline-flex;align-items:center;gap:.35rem;padding:.25rem .6rem;border-radius:8px;background:var(--bg3);border:1px solid var(--line);font-size:12.5px;font-weight:500}
.chip .x{cursor:pointer;color:var(--fg3);margin-left:.2rem}.chip .x:hover{color:var(--err)}.chip.draggable{cursor:grab}.chip.over{outline:2px dashed var(--accent)}
/* pipeline bar */
.pipe{display:flex;gap:4px;align-items:center;flex-wrap:wrap}.pipe .step{width:22px;height:8px;border-radius:4px;background:var(--line2);position:relative}
.pipe .step.done{background:var(--ok)}.pipe .step.cur{background:var(--warn);animation:pulse 1.2s infinite}.pipe .step.fail{background:var(--err)}.pipe .step.halt{background:var(--err)}
.pipe.big .step{width:auto;height:auto;padding:.3rem .6rem;font-size:12px;font-weight:600;color:var(--fg2);background:var(--bg3);border:1px solid var(--line)}
.pipe.big .step.done{background:var(--ok-soft);color:var(--ok);border-color:transparent}.pipe.big .step.cur{background:var(--warn-soft);color:var(--warn);animation:none;border-color:var(--warn)}.pipe.big .step.fail,.pipe.big .step.halt{background:var(--err-soft);color:var(--err)}
.pipe .arrow{color:var(--fg3);font-size:11px}
/* flow diagram */
.flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:.6rem}
.flow .node{border:1px solid var(--line);border-radius:10px;padding:.55rem .6rem;background:var(--bg2);position:relative;cursor:pointer;transition:.15s}
.flow .node:hover{border-color:var(--accent);transform:translateY(-1px)}.flow .node .t{font-weight:600;font-size:12.5px;display:flex;align-items:center;gap:.35rem}.flow .node .m{font-size:11px;color:var(--fg3);margin-top:.2rem}
.flow .node .bar{position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:10px 0 0 10px}
.flow .node .cnt{position:absolute;right:.5rem;top:.45rem;font-size:11px;font-weight:700;background:var(--warn-soft);color:var(--warn);padding:0 .4rem;border-radius:999px}
/* tabs */
.tabs{display:flex;gap:.2rem;border-bottom:1px solid var(--line);margin-bottom:1rem;overflow-x:auto}.tabs button{background:none;border:none;padding:.55rem .9rem;cursor:pointer;color:var(--fg2);font-weight:500;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tabs button.active{color:var(--accent);border-bottom-color:var(--accent)}.tabs button:hover{color:var(--fg)}
/* timeline */
.tl{list-style:none;padding:0;margin:0}.tl li{display:grid;grid-template-columns:70px 14px 1fr;gap:.6rem;padding:.35rem 0;position:relative}
.tl li .t{font-size:11px;color:var(--fg3);font-family:var(--mono);padding-top:.2rem}.tl li .c{width:12px;height:12px;border-radius:50%;margin-top:.3rem;border:2px solid var(--bg2);box-shadow:0 0 0 1px var(--line2)}
.tl li:before{content:"";position:absolute;left:75.5px;top:22px;bottom:-6px;width:1px;background:var(--line)}.tl li:last-child:before{display:none}
.tl .who{font-weight:600;font-size:12.5px}.tl .sum{color:var(--fg2)}.tl .meta{font-size:11px;color:var(--fg3)}.tl details{margin-top:.2rem}.tl summary{cursor:pointer;font-size:11.5px;color:var(--accent)}
/* misc */
.muted{color:var(--fg3)}.small{font-size:12px}.mono{font-family:var(--mono)}.right{text-align:right}.center{text-align:center}.mt{margin-top:1rem}.mb0{margin-bottom:0}.nowrap{white-space:nowrap}.flex{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}.spacer{flex:1}
.empty{padding:2rem;text-align:center;color:var(--fg3)}.empty .big{font-size:2rem}
.kv{display:grid;grid-template-columns:max-content 1fr;gap:.25rem 1rem;font-size:13px}.kv dt{color:var(--fg3)}.kv dd{margin:0;word-break:break-word}
.md{line-height:1.7;max-width:820px}.md h1{font-size:1.5rem}.md h2{font-size:1.2rem;margin-top:1.4rem}.md h3{font-size:1.05rem;margin-top:1.1rem}.md p{margin:.6rem 0}.md blockquote{border-left:3px solid var(--line2);margin:.6rem 0;padding-left:.8rem;color:var(--fg2)}.md ul,.md ol{padding-left:1.4rem}.md img{max-width:100%}
.prog{height:6px;background:var(--bg3);border-radius:3px;overflow:hidden}.prog i{display:block;height:100%;background:var(--accent)}
.json{font-family:var(--mono);font-size:12px;white-space:pre-wrap;word-break:break-word}.json .k{color:#7c3aed}.json .s{color:#0f766e}.json .n{color:#b45309}.json .b{color:#be185d}
[data-theme=dark] .json .k{color:#c4b5fd}[data-theme=dark] .json .s{color:#5eead4}[data-theme=dark] .json .n{color:#fbbf24}
/* modal & toast */
.modal-bg{position:fixed;inset:0;background:rgba(10,12,20,.55);z-index:100;display:flex;align-items:flex-start;justify-content:center;padding:4vh 1rem;overflow:auto;backdrop-filter:blur(2px)}
.modal{background:var(--bg2);border-radius:14px;box-shadow:var(--shadow2);width:min(880px,100%);max-height:92vh;display:flex;flex-direction:column;border:1px solid var(--line)}
.modal.wide{width:min(1180px,100%)}.modal .mh{display:flex;align-items:center;padding:.9rem 1.2rem;border-bottom:1px solid var(--line)}.modal .mh h2{margin:0;flex:1}.modal .mb{padding:1.1rem 1.2rem;overflow:auto}.modal .mf{padding:.8rem 1.2rem;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:.5rem}
.toasts{position:fixed;right:1rem;bottom:1rem;z-index:200;display:flex;flex-direction:column;gap:.5rem}.toast{background:var(--fg);color:var(--bg);padding:.6rem .9rem;border-radius:10px;box-shadow:var(--shadow2);font-size:13px;max-width:380px;animation:in .2s}
.toast.ok{background:var(--ok);color:#fff}.toast.err{background:var(--err);color:#fff}.toast.warn{background:var(--warn);color:#fff}@keyframes in{from{transform:translateY(8px);opacity:0}}
.skeleton{background:linear-gradient(90deg,var(--bg3),var(--line),var(--bg3));background-size:200% 100%;animation:sk 1.2s infinite;border-radius:6px;height:14px}@keyframes sk{to{background-position:-200% 0}}
.log{font-family:var(--mono);font-size:12px;background:var(--bg3);border-radius:8px;padding:.6rem;max-height:70vh;overflow:auto}.log div{padding:.1rem 0;border-bottom:1px dashed var(--line)}.log .WARNING{color:var(--warn)}.log .ERROR{color:var(--err)}.log .lg{color:var(--fg3)}
.hero{display:flex;gap:1rem;align-items:center}.hero .big-ico{width:56px;height:56px;border-radius:14px;display:grid;place-items:center;font-size:28px;color:#fff}
.stepper{display:flex;flex-direction:column;gap:.4rem}.stepper .item{display:flex;align-items:center;gap:.5rem;padding:.4rem .6rem;border:1px solid var(--line);border-radius:8px;background:var(--bg2)}.stepper .item .n{width:22px;height:22px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-size:11.5px;font-weight:700}
.diff-add{background:var(--ok-soft)}.diff-del{background:var(--err-soft);text-decoration:line-through}