:root { --bg:#1e1f24; --panel:#26272d; --panel2:#2e2f36; --text:#eef0f5; --muted:#9a9ca8; --blue:#2e7dd1; --green:#38a060; --amber:#d08c28; --red:#aa3434; --grey:#464852; }
* { box-sizing:border-box } body { margin:0; background:var(--bg); color:var(--text); font:14px/1.5 system-ui,"Segoe UI",Roboto,sans-serif; height:100vh; display:flex; flex-direction:column }
header { display:flex; align-items:center; gap:16px; padding:10px 18px; background:var(--panel); border-bottom:1px solid #000 }
.brand { font-size:18px; font-weight:600; white-space:nowrap } .brand span { color:#9fc5ff; font-weight:400 }
.progress { flex:1; height:8px; background:var(--panel2); border-radius:4px; overflow:hidden } #progressBar { height:100%; width:0; background:var(--green); transition:width .4s }
.small { font-size:12px } .muted { color:var(--muted) } .amber { color:#e8b56a }
main { display:grid; grid-template-columns:340px 1fr; flex:1; min-height:0 }
nav { overflow:auto; padding:14px; display:flex; flex-direction:column; gap:8px; background:#222329 }
.stepBtn { display:flex; align-items:center; gap:10px; background:var(--panel); border:2px solid transparent; border-radius:10px; padding:12px; cursor:pointer; color:var(--text); text-align:left; font:inherit }
.stepBtn.active { border-color:var(--blue) } .stepBtn:hover { filter:brightness(1.1) }
.badge { width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; background:var(--grey); flex:none }
.badge.done { background:var(--green) } .badge.attention { background:var(--amber) } .badge.running { background:var(--blue); animation:pulse 1.2s infinite } .badge.ran { background:#3c5f8a }
@keyframes pulse { 50% { filter:brightness(1.5) } }
.detail { overflow:auto; padding:22px 26px } .detail h1 { margin:0 0 6px; font-size:20px }
#fields { display:flex; flex-direction:column; gap:10px; margin:16px 0; max-width:760px }
.fieldRow { display:flex; flex-direction:column; gap:3px } .fieldRow label { font-size:12px; color:var(--muted) }
.fieldRow input[type=text], .fieldRow input[type=password], .fieldRow select { background:var(--panel2); color:var(--text); border:1px solid #3a3b44; border-radius:6px; padding:8px 10px }
.checkRow { display:flex; gap:8px; align-items:flex-start; background:var(--panel); border-radius:8px; padding:8px 10px } .checkRow input { margin-top:3px }
.actions { display:flex; gap:10px; align-items:center; margin:14px 0 }
button { border:0; border-radius:6px; padding:9px 18px; color:#fff; cursor:pointer; font-weight:600 } button:hover { filter:brightness(1.12) } button:disabled { opacity:.45; cursor:default }
.primary{background:var(--blue)} .secondary{background:var(--grey)} .danger{background:var(--red)}
.log { background:#131417; border-radius:10px; padding:14px; font:12px/1.5 ui-monospace,Consolas,monospace; white-space:pre-wrap; word-break:break-word; max-height:46vh; overflow:auto; margin-top:6px }
.log .ok { color:#7fd49a } .log .fail { color:#ff9a9a }
@media (max-width:860px) { main { grid-template-columns:1fr; grid-template-rows:auto 1fr } nav { flex-direction:row; overflow-x:auto } .stepBtn { min-width:190px } }

.cmd { display:flex; gap:10px; align-items:center; background:#131417; border-radius:8px; padding:12px 14px }
.cmd code { flex:1; font:12.5px/1.5 ui-monospace,Consolas,monospace; color:#9fd0ff; word-break:break-all }
#fields code { font:12px ui-monospace,monospace; color:#9fd0ff }