:root{
  --bg:#0b0f14; --bg2:#0f151c; --panel:#131a23; --panel2:#0e141b; --line:#1e2a36;
  --txt:#d7e2ec; --dim:#8698aa; --accent:#2dd4bf; --accent2:#14b8a6;
  --live:#22c55e; --dead:#ef4444; --warn:#f59e0b;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:#0b0f14;background-image:linear-gradient(180deg,#0f1822 0,#0b0f14 520px);
  background-repeat:no-repeat;color:var(--txt);font:14px/1.5 Inter,system-ui,Segoe UI,Roboto,sans-serif}
.mono{font-family:var(--mono)}
.muted{color:var(--dim)}
.wrap{max-width:1500px;margin:0 auto;padding:16px}

header.top{display:flex;align-items:center;gap:12px;padding:12px 16px;border:1px solid var(--line);
  border-radius:14px;background:linear-gradient(180deg,var(--panel),var(--panel2));margin-bottom:14px}
.logo{font-weight:800;letter-spacing:.6px}
.logo b{color:var(--accent)}
.spacer{flex:1}
.pill{font-size:12px;color:var(--dim);border:1px solid var(--line);padding:3px 10px;border-radius:999px}

.btn{background:linear-gradient(180deg,var(--accent),var(--accent2));color:#04201c;border:0;font-weight:700;
  padding:10px 18px;border-radius:10px;cursor:pointer;transition:filter .15s, transform .1s}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent;color:var(--txt);border:1px solid var(--line);font-weight:600}
.btn:disabled{opacity:.45;cursor:not-allowed;filter:none}
.btn.pulse{animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(45,212,191,.55)}
  50%{box-shadow:0 0 0 10px rgba(45,212,191,0)}
}

.grid{display:grid;grid-template-columns:minmax(360px,1fr) minmax(520px,1.2fr);gap:14px;align-items:start}
.panel{border:1px solid var(--line);border-radius:14px;background:linear-gradient(180deg,var(--panel),var(--panel2));
  transition:opacity .3s, filter .3s, box-shadow .3s, border-color .3s}
.panel h3{margin:0;padding:12px 14px;border-bottom:1px solid var(--line);font-size:13px;letter-spacing:.4px;
  color:var(--dim);text-transform:uppercase;display:flex;align-items:center;gap:8px}
.num{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--line);
  color:var(--txt);font-size:12px;font-weight:700}
.pad{padding:14px}

/* progressive steps */
.step.dim{opacity:.4;filter:saturate(.45) brightness(.6);pointer-events:none}
.step.active .num{background:var(--accent);color:#04201c}
.step.done{opacity:.95}
.step.done .num{background:var(--live);color:#04231a}

label{display:block;font-size:12px;color:var(--dim);margin:10px 0 5px;text-transform:uppercase;letter-spacing:.4px}
input,textarea,select{width:100%;background:var(--bg2);border:1px solid var(--line);color:var(--txt);
  border-radius:10px;padding:10px 12px;font:14px var(--mono);outline:none}
input:focus,textarea:focus,select:focus{border-color:var(--accent)}
textarea{min-height:150px;resize:vertical;line-height:1.5}
.row{display:flex;gap:10px;align-items:center}
.hint{font-size:12px;color:var(--dim);margin-top:6px}
.count{font-size:12px;color:var(--warn)}

.rail{display:grid;grid-template-rows:auto 1fr;gap:14px}
#logs{font-family:var(--mono);font-size:13.5px;line-height:1.7;height:230px;overflow:auto;padding:12px 14px;
  color:#c7d6e5;white-space:pre-wrap;word-break:break-word}
#logs .ln{padding:1px 0}
#logs .ok{color:var(--live)}
#logs .bad{color:var(--dead)}
#logs .step{color:var(--accent)}

#verdicts{max-height:600px;overflow:auto;padding:6px}
.v{border:1px solid var(--line);border-radius:12px;margin:8px;background:var(--bg2);overflow:hidden;transition:transform .1s}
.v.LIVE{background:linear-gradient(180deg,rgba(34,197,94,.08),rgba(34,197,94,.025));border-color:rgba(34,197,94,.28)}
.v.DEAD{background:linear-gradient(180deg,rgba(239,68,68,.07),rgba(239,68,68,.025));border-color:rgba(239,68,68,.26)}
.v .head{display:flex;align-items:center;gap:10px;padding:11px 13px;cursor:pointer}
.tag{font-weight:800;font-size:12px;padding:4px 10px;border-radius:7px;letter-spacing:.4px;
  min-width:56px;text-align:center;display:inline-block}
.tag.LIVE{background:#15803d;color:#dffbe8}
.tag.DEAD{background:#b91c1c;color:#ffe6e6}
.card{font-family:var(--mono);font-size:13.5px;font-weight:600;color:#eaf2f8}
.right{margin-left:auto;display:flex;align-items:center;gap:8px}
.res{font-size:12px;font-weight:800;padding:4px 10px;border-radius:7px;min-width:92px;text-align:center}
.v.LIVE .res{background:#15803d;color:#dffbe8}
.v.DEAD .res{background:#b91c1c;color:#ffe6e6}
.amt{font-size:12px;font-family:var(--mono);padding:4px 10px;border-radius:7px;
  background:#26364a;color:#e2f0ff;border:1px solid #3a5069;min-width:120px;text-align:center}
.v .raw{display:none;border-top:1px solid var(--line);padding:10px 13px}
.v.open .raw{display:block}
.v .raw .lnk{color:var(--dim);font-size:12px;word-break:break-all}
.v .raw pre{margin:6px 0 0;white-space:pre-wrap;word-break:break-all;color:#8ff0e6;font-size:12px}
.vamount{padding:8px 14px 0;color:var(--dim);font-size:12.5px}

.foot{padding:10px 14px;border-top:1px solid var(--line);display:flex;gap:10px;align-items:center}
.stat{font-size:12px;color:var(--dim)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--dim);display:inline-block}
.dot.on{background:var(--live);box-shadow:0 0 8px var(--live)}

/* modal */
.modal{position:fixed;inset:0;display:none;place-items:center;background:rgba(3,7,10,.72);z-index:50;padding:20px}
.modal.show{display:grid}
.modal-box{width:min(420px,94vw);border:1px solid var(--line);border-radius:16px;padding:22px;
  background:linear-gradient(180deg,var(--panel),var(--panel2));text-align:center;box-shadow:0 30px 80px -20px #000}
.modal-title{font-weight:800;color:var(--dead);margin-bottom:8px}
.modal-msg{color:var(--txt);font-size:14px;margin-bottom:18px;line-height:1.5;word-break:break-word}
.btn.sm{padding:6px 12px;font-size:12px}
.modal-box.wide{width:min(740px,96vw);text-align:left;max-height:86vh;display:flex;flex-direction:column}
.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.modal-title2{font-weight:800;color:var(--accent);font-size:17px;letter-spacing:.4px}
.stats{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:12px}
.statbox{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:10px;text-align:center}
.statbox .sv{font-size:20px;font-weight:800;font-family:var(--mono)}
.statbox .sl{font-size:11px;color:var(--dim);text-transform:uppercase;letter-spacing:.4px;margin-top:2px}
.statbox.live .sv{color:#4ade80}
.statbox.dead .sv{color:#f87171}
.histlist{overflow:auto;border:1px solid var(--line);border-radius:10px;background:var(--bg2)}
.hrow{display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:12.5px}
.hrow:last-child{border-bottom:0}
.hrow.LIVE{background:rgba(34,197,94,.06)}
.hrow.DEAD{background:rgba(239,68,68,.05)}
.htime{color:var(--dim);font-size:11px;min-width:132px}
.hcard{font-weight:600;color:#eaf2f8}
.hres{margin-left:auto;color:var(--dim)}

.center{min-height:100vh;display:grid;place-items:center}
.login-box{width:380px;border:1px solid var(--line);border-radius:16px;padding:26px;
  background:linear-gradient(180deg,var(--panel),var(--panel2));text-align:center}
.login-box .k{font-size:12px;color:var(--dim);text-transform:uppercase;letter-spacing:1px}
.err{color:var(--dead);font-size:12px;min-height:16px;margin-top:8px}

/* mobile */
@media (max-width: 980px){
  .wrap{padding:10px}
  .grid{grid-template-columns:1fr;gap:10px}
  .rail{grid-template-rows:auto auto}
  #logs{height:170px}
  #verdicts{max-height:none}
  .v .head{flex-wrap:wrap;gap:6px}
  .v .reason{margin-left:0;width:100%}
}
@media (max-width: 560px){
  body{font-size:13px}
  .login-box{width:92vw;padding:20px}
  .pad{padding:12px}
  .btn{width:100%;padding:12px 16px}
  .row{flex-wrap:wrap}
  .row .btn{flex:1 1 auto}
  input,textarea,select{font-size:16px}
  textarea{min-height:120px}
  .stats{grid-template-columns:repeat(3,1fr)}
  .modal-box.wide{width:96vw}
  .htime{display:none}
}