:root{
  --bg:#f5f7fa;--bg2:#ffffff;--surface:#f0f2f5;--border:rgba(0,0,0,0.08);--border2:rgba(0,0,0,0.15);
  --text:#1a1a2e;--dim:#6b7a8d;--dim2:#9aa5b5;
  --accent:#00b368;--blue:#2196f3;--red:#e53935;--orange:#f59e0b;--purple:#7c3aed;--yellow:#f9ca24;
  --shadow:0 2px 8px rgba(0,0,0,0.04);--shadow-lg:0 10px 40px rgba(0,0,0,0.12);
}
body.dark{
  --bg:#0a0e13;--bg2:#111820;--surface:#161e29;--border:rgba(255,255,255,0.06);--border2:rgba(255,255,255,0.12);
  --text:#e8edf4;--dim:#7a8a9d;--dim2:#5a6a7d;
  --accent:#00d67e;--blue:#53bdeb;--red:#ff6b6b;--orange:#f9ca24;--purple:#a78bfa;--yellow:#ffd93d;
  --shadow:0 2px 8px rgba(0,0,0,0.3);--shadow-lg:0 10px 40px rgba(0,0,0,0.5);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
html{font-size:112%} /* Escala global x1.12 — afecta todo lo que usa rem */
body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--text);overflow:hidden;font-size:20px}
button,input,select,textarea{font-family:inherit;color:inherit}
code,pre,.mono{font-family:'JetBrains Mono',monospace}

/* LOGIN */
.login-screen{display:none;align-items:center;justify-content:center;height:100vh}
.login-box{background:var(--bg2);border:1px solid var(--border);border-radius:14px;padding:2rem;width:360px;text-align:center;box-shadow:var(--shadow-lg)}
.login-box .logo{width:60px;height:60px;border-radius:14px;background:linear-gradient(135deg,#00d67e,#00b368);display:inline-flex;align-items:center;justify-content:center;font-size:1.8rem;color:#000;margin-bottom:.6rem}
.login-box h1{font-size:1.5rem;margin-bottom:.2rem}
.login-box p{font-size:.85rem;color:var(--dim);margin-bottom:1rem}
.login-box input{width:100%;padding:.55rem .7rem;background:var(--bg);border:1px solid var(--border);border-radius:8px;font-size:.95rem;margin-bottom:.5rem}
.login-box button{width:100%;padding:.55rem;background:var(--accent);color:#000;border:none;border-radius:8px;font-size:.95rem;font-weight:800;cursor:pointer}
.login-box .err{color:var(--red);font-size:.8rem;margin-top:.3rem;display:none}

/* ---- Metrics footer (polling cada 5s) ---- */
.mf-bar{position:fixed;bottom:0;left:0;right:0;height:22px;background:rgba(15,20,25,.94);backdrop-filter:blur(6px);border-top:1px solid rgba(255,255,255,0.08);display:flex;align-items:center;justify-content:flex-end;gap:.9rem;padding:0 .8rem;font-family:'DM Sans','Segoe UI',system-ui,sans-serif;font-size:.645rem;color:#8a96a7;z-index:9998;user-select:none;font-variant-numeric:tabular-nums}
.mf-bar.collapsed{width:28px;left:auto;border-top:none;border-left:1px solid rgba(255,255,255,0.08);border-top-left-radius:6px;padding:0;justify-content:center;overflow:hidden}
.mf-bar.collapsed > *:not(.mf-toggle){display:none}
.mf-bar.collapsed .mf-toggle i{transform:rotate(180deg)}
.mf-item{display:flex;align-items:center;gap:.3rem;white-space:nowrap}
.mf-item i{font-size:.675rem;opacity:.6}
.mf-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.mf-dot.g{background:#00d67e}.mf-dot.y{background:#f9ca24}.mf-dot.r{background:#ff6b6b}
.mf-label{color:#6b7a8d;text-transform:uppercase;letter-spacing:.4px;font-size:.605rem;font-weight:700}
.mf-val{color:#e8edf4;font-weight:700}
.mf-sep{width:1px;height:10px;background:rgba(255,255,255,0.08)}
.mf-toggle{background:none;border:none;color:#6b7a8d;cursor:pointer;font-size:.675rem;padding:0 .2rem}
.mf-toggle:hover{color:#e8edf4}
body.mf-padded .app-wrap{padding-bottom:22px}

/* APP LAYOUT */
.app-wrap{display:none;flex-direction:column;height:100vh;overflow:hidden}
.topbar{display:flex;align-items:center;gap:.7rem;padding:.5rem 1rem;border-bottom:1px solid var(--border);background:var(--bg2);flex-shrink:0;height:48px}
.tb-logo{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,#00d67e,#00b368);display:flex;align-items:center;justify-content:center;font-size:1.1rem;color:#000}
.tb-brand{font-weight:900;font-size:1.1rem}
.tb-sub{font-size:.68rem;color:var(--dim);letter-spacing:.5px;text-transform:uppercase;font-weight:700}
.tb-spacer{flex:1}
.tb-live{display:flex;align-items:center;gap:.3rem;font-size:.72rem;color:var(--dim);padding:.25rem .5rem;background:var(--surface);border:1px solid var(--border);border-radius:6px}
.tb-live .dot{width:7px;height:7px;border-radius:50%;background:var(--dim2)}
.tb-live.on .dot{background:var(--accent);box-shadow:0 0 0 3px rgba(0,214,126,0.15);animation:pulse 2s infinite}
.tb-btn{padding:.3rem .55rem;border:1px solid var(--border);border-radius:6px;background:none;color:var(--dim);font-size:.73rem;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:.3rem;transition:.15s}
.tb-btn:hover{border-color:var(--accent);color:var(--accent)}
.tb-btn.primary{background:var(--accent);color:#000;border-color:var(--accent)}
.tb-btn .kbd{background:rgba(0,0,0,.1);padding:.05rem .3rem;border-radius:3px;font-size:.65rem;font-weight:800}
body.dark .tb-btn .kbd{background:rgba(255,255,255,.1)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}

/* METRICS BAR */
.metrics-bar{display:flex;gap:.5rem;padding:.5rem 1rem;border-bottom:1px solid var(--border);background:var(--bg2);flex-shrink:0}
.metric{flex:1;padding:.4rem .6rem;background:var(--surface);border:1px solid var(--border);border-radius:8px;display:flex;align-items:center;gap:.5rem;min-width:0}
.metric .mi{width:28px;height:28px;border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:.85rem}
.metric .mt{flex:1;min-width:0}
.metric .mv{font-size:1.15rem;font-weight:900;line-height:1}
.metric .ml{font-size:.65rem;color:var(--dim);font-weight:700;text-transform:uppercase;letter-spacing:.3px;margin-top:.1rem}
.metric canvas{flex-shrink:0}

/* FILTERS ROW */
.filters{display:flex;gap:.4rem;padding:.5rem 1rem;border-bottom:1px solid var(--border);background:var(--bg2);flex-shrink:0;align-items:center;flex-wrap:wrap}
.filters .search{flex:1;min-width:200px;position:relative}
.filters .search input{width:100%;padding:.4rem .6rem .4rem 2rem;background:var(--bg);border:1px solid var(--border);border-radius:7px;font-size:.83rem}
.filters .search i{position:absolute;left:.6rem;top:50%;transform:translateY(-50%);color:var(--dim);font-size:.75rem}
.chip{padding:.3rem .55rem;border:1px solid var(--border);border-radius:999px;background:var(--bg);color:var(--dim);font-size:.72rem;font-weight:700;cursor:pointer;transition:.15s;white-space:nowrap;display:inline-flex;align-items:center;gap:.3rem}
.chip:hover{border-color:var(--accent);color:var(--text)}
.chip.active{background:var(--accent);color:#000;border-color:var(--accent)}
.chip .c{opacity:.7;font-weight:800}
.chip.active .c{opacity:1}
.filters .view-picker{display:flex;gap:.2rem;padding:.15rem;background:var(--bg);border:1px solid var(--border);border-radius:8px}
.view-btn{padding:.25rem .5rem;border:none;background:none;color:var(--dim);font-size:.72rem;font-weight:700;cursor:pointer;border-radius:5px;display:inline-flex;align-items:center;gap:.25rem}
.view-btn.active{background:var(--surface);color:var(--text)}

/* MAIN AREA */
.main{flex:1;display:flex;min-height:0;overflow:hidden}
.list-pane{flex:1;min-width:0;display:flex;flex-direction:column;border-right:1px solid var(--border);background:var(--bg)}
.list-head{display:flex;align-items:center;gap:.4rem;padding:.35rem .8rem;font-size:.7rem;color:var(--dim);text-transform:uppercase;letter-spacing:.5px;font-weight:800;background:var(--bg2);border-bottom:1px solid var(--border);flex-shrink:0}
.list-head .ch-col{padding:.3rem}
.list-head .bulk{display:flex;align-items:center;gap:.3rem;margin-left:auto}
.list-head .bulk-action{padding:.2rem .5rem;background:var(--accent);color:#000;border:none;border-radius:4px;font-size:.68rem;font-weight:800;cursor:pointer}
.list-head .bulk-action.danger{background:var(--red);color:#fff}
.list-head .bulk-action.resolve{background:rgba(0,179,104,.15);color:var(--accent);border:1px solid rgba(0,179,104,.4)}

.list-body{flex:1;overflow-y:auto;padding:0}
/* Job group headers */
.jg-head{display:flex;align-items:center;gap:.5rem;padding:.45rem .8rem;background:var(--bg);border-bottom:1px solid var(--border);cursor:pointer;user-select:none;position:sticky;top:0;z-index:2}
.jg-head:hover{background:var(--surface)}
.jg-chev{font-size:.6rem;color:var(--dim);width:12px;text-align:center;transition:transform .2s}
.jg-icon{font-size:.75rem;color:var(--dim)}
.jg-icon.running{color:var(--accent)}
.jg-icon.queued,.jg-icon.pending_approval{color:var(--blue)}
.jg-icon.pending_review{color:var(--orange)}
.jg-icon.backlog{color:var(--dim)}
.jg-icon.failed{color:var(--red)}
.jg-icon.approved,.jg-icon.completed{color:var(--accent)}
.jg-icon.rejected{color:var(--red)}
.jg-label{font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--text)}
.jg-count{font-family:'JetBrains Mono',monospace;font-size:.7rem;color:var(--dim);background:var(--surface);padding:.1rem .4rem;border-radius:8px;font-weight:700}
.job-row{display:flex;align-items:center;gap:.5rem;padding:.55rem .8rem;border-bottom:1px solid var(--border);cursor:pointer;transition:background .1s;user-select:none}
/* Inline action buttons */
.jr-actions{display:flex;gap:.2rem;flex-shrink:0;margin-left:auto}
.jr-btn{border:none;border-radius:4px;cursor:pointer;padding:.2rem .4rem;font-size:.65rem;transition:all .15s;opacity:.6}
.jr-btn:hover{opacity:1;transform:scale(1.1)}
.jr-btn.retry{background:rgba(249,202,36,.15);color:var(--orange)}
.jr-btn.close,.jr-btn.approve{background:rgba(0,179,104,.12);color:var(--accent)}
.jr-btn.refine{background:rgba(33,150,243,.12);color:var(--blue)}
.jr-btn.del{background:rgba(255,107,107,.1);color:var(--red)}
.jr-btn.rollback{background:rgba(167,139,250,.12);color:var(--purple)}
.jr-btn.resolve{background:rgba(0,179,104,.15);color:var(--accent);border:1px solid rgba(0,179,104,.3)}
.job-row:hover{background:var(--surface)}
.job-row.selected{background:rgba(0,179,104,0.06);border-left:3px solid var(--accent);padding-left:calc(0.8rem - 3px)}
body.dark .job-row.selected{background:rgba(0,214,126,0.1)}
.job-row.focused{background:var(--surface);box-shadow:inset 2px 0 0 var(--blue)}
.job-row.checked{background:rgba(33,150,243,.06)}
.job-row input[type=checkbox]{cursor:pointer;flex-shrink:0}
.job-row .jr-ref{font-family:'JetBrains Mono',monospace;font-size:.7rem;color:var(--dim);flex-shrink:0;width:100px;overflow:hidden;text-overflow:ellipsis}
.job-row .jr-title{flex:1;min-width:0;font-size:.86rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.job-row .jr-title .jr-desc{color:var(--dim);font-weight:400;font-size:.78rem;margin-left:.4rem}
.job-row .jr-app{font-size:.65rem;padding:.1rem .35rem;background:rgba(249,202,36,.1);color:var(--orange);border-radius:3px;font-weight:800;flex-shrink:0;text-transform:uppercase;letter-spacing:.3px}
.job-row .jr-sev{font-size:.65rem;padding:.1rem .35rem;border-radius:3px;font-weight:800;flex-shrink:0;text-transform:uppercase}
.jr-sev.critical{background:rgba(255,71,87,.15);color:#ff4757}
.jr-sev.high{background:rgba(255,159,67,.15);color:var(--orange)}
.jr-sev.medium{background:rgba(83,189,235,.1);color:var(--blue)}
.jr-sev.low{background:rgba(167,139,250,.1);color:var(--purple)}
.job-row .jr-prio{font-family:'JetBrains Mono',monospace;font-size:.68rem;padding:.1rem .32rem;border-radius:3px;font-weight:800;flex-shrink:0;min-width:28px;text-align:center}
.jr-prio.p-hi{background:rgba(255,71,87,.15);color:#ff4757}
.jr-prio.p-md{background:rgba(255,159,67,.12);color:var(--orange)}
.jr-prio.p-lo{background:rgba(156,163,175,.12);color:#9ca3af}
.job-row .jr-eff{font-size:.62rem;padding:.05rem .28rem;border-radius:3px;font-weight:800;flex-shrink:0;background:rgba(156,163,175,.1);color:#9ca3af}
.jr-hot{color:#ff4757;font-size:.72rem;margin-left:.2rem}
.job-row .jr-status{flex-shrink:0;display:inline-flex;align-items:center;gap:.25rem;font-size:.68rem;padding:.15rem .4rem;border-radius:10px;font-weight:800}
.jr-status.backlog{background:rgba(156,163,175,.15);color:#9ca3af}
.jr-status.queued{background:rgba(83,189,235,.12);color:var(--blue)}
.jr-status.running{background:rgba(0,179,104,.15);color:var(--accent);animation:pulse 1.5s infinite}
.jr-status.pending_approval{background:rgba(83,189,235,.15);color:var(--blue)}
.jr-status.pending_review{background:rgba(249,202,36,.15);color:var(--orange)}
.jr-status.approved{background:rgba(0,179,104,.12);color:var(--accent)}
.jr-status.rejected{background:rgba(255,107,107,.12);color:var(--red)}
.jr-status.failed{background:rgba(255,107,107,.12);color:var(--red)}
.jr-status.refined{background:rgba(167,139,250,.12);color:var(--purple)}
.job-row .jr-sol{font-size:.7rem;color:var(--purple);flex-shrink:0}
.job-row .jr-age{font-size:.7rem;color:var(--dim);flex-shrink:0;width:50px;text-align:right}
.empty-state{text-align:center;padding:4rem 2rem;color:var(--dim)}
.empty-state i{font-size:2.5rem;opacity:.25;display:block;margin-bottom:.5rem}

/* GATE1 — visual indicators for security level on job rows */
.job-row.gate1-red{border-left:3px solid var(--red);padding-left:calc(0.8rem - 3px);background:rgba(255,107,107,.03)}
.job-row.gate1-black{border-left:3px solid #1a1a2e;padding-left:calc(0.8rem - 3px);background:rgba(0,0,0,.05);opacity:.7}
.job-row.gate1-yellow{border-left:3px solid var(--orange);padding-left:calc(0.8rem - 3px)}

/* DRAWER */
.drawer{display:none}
.drawer.open{transform:translateX(0);position:relative}
@media(min-width:1100px){.drawer.open{position:relative}}
.drawer-head{padding:.7rem 1rem;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:.5rem;flex-shrink:0}
.drawer-head .dh-ref{font-family:'JetBrains Mono',monospace;font-size:.73rem;color:var(--dim);padding:.15rem .4rem;background:var(--surface);border-radius:4px}
.drawer-head .dh-title{flex:1;min-width:0;font-size:.95rem;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drawer-close{background:none;border:none;color:var(--dim);cursor:pointer;padding:.3rem .5rem;border-radius:5px;font-size:1rem}
.drawer-close:hover{background:var(--surface);color:var(--text)}

/* ═══════════════════════════════════════════════
   CODE FACTORY — pipeline banner
   ═══════════════════════════════════════════════ */

/* Keyframes */
@keyframes conveyorMove{0%{background-position:0 0}100%{background-position:40px 0}}
@keyframes gearSpin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
@keyframes gearSpinSlow{0%{transform:rotate(0deg)}100%{transform:rotate(-360deg)}}
@keyframes arrowStream{0%{opacity:.2;transform:translateX(-4px)}50%{opacity:1;transform:translateX(4px)}100%{opacity:.2;transform:translateX(-4px)}}
@keyframes hotFlicker{0%,100%{text-shadow:0 0 6px rgba(255,71,87,.3)}50%{text-shadow:0 0 16px rgba(255,71,87,.7),0 0 30px rgba(255,71,87,.3)}}
@keyframes countBump{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
@keyframes ringPulse{0%,100%{box-shadow:0 0 0 0 rgba(0,179,104,.25)}50%{box-shadow:0 0 0 6px rgba(0,179,104,0)}}
@keyframes dataPacket{0%{left:0;opacity:0}10%{opacity:1}90%{opacity:1}100%{left:100%;opacity:0}}
@keyframes warnPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,107,107,.2)}50%{box-shadow:0 0 0 6px rgba(255,107,107,0)}}
@keyframes scanline{0%{top:-2px}100%{top:100%}}
@keyframes emergeUp{0%{opacity:0;transform:translateY(8px)}100%{opacity:1;transform:translateY(0)}}
/* ═══ Per-phase keyframes ═══ */

/* Backlog — weight dropping */
@keyframes stackDrop{0%{transform:translateY(-6px) scale(.8);opacity:0}40%{transform:translateY(2px) scale(1.05);opacity:1}55%{transform:translateY(-1px)}70%{transform:translateY(1px) scaleY(.92)}100%{transform:translateY(0) scale(1)}}
@keyframes pressureGlow{0%,100%{box-shadow:inset 0 -4px 12px rgba(255,160,40,.08)}50%{box-shadow:inset 0 -4px 20px rgba(255,100,20,.18)}}
@keyframes blockFall{0%{transform:translateY(-14px) rotate(8deg);opacity:0}60%{opacity:.7}100%{transform:translateY(14px) rotate(-4deg);opacity:0}}

/* Queue — marching dots */
@keyframes marchRight{0%{transform:translateX(-6px);opacity:.2}50%{opacity:1}100%{transform:translateX(6px);opacity:.2}}
@keyframes queuePulse{0%,100%{box-shadow:inset 0 0 10px rgba(0,179,104,.04)}50%{box-shadow:inset 0 0 18px rgba(0,179,104,.1)}}
@keyframes dotQueue{0%{left:10%;opacity:0}20%{opacity:.8}80%{opacity:.8}100%{left:90%;opacity:0}}

/* Running — stamp + sparks */
@keyframes robotStamp{0%,60%{transform:translateY(0)}70%{transform:translateY(4px) scale(1.1)}80%{transform:translateY(-1px) scale(.95)}100%{transform:translateY(0)}}
@keyframes packageEmit{0%{transform:translateX(0) scale(1);opacity:.9}60%{opacity:.6}100%{transform:translateX(28px) scale(.4);opacity:0}}
@keyframes sparkBurst{0%{transform:translate(0,0) scale(1);opacity:1}100%{transform:translate(var(--sx),var(--sy)) scale(0);opacity:0}}
@keyframes runGlow{0%,100%{box-shadow:inset 0 0 12px rgba(0,179,104,.06)}50%{box-shadow:inset 0 0 24px rgba(0,179,104,.14)}}

/* Review — scanning beam */
@keyframes eyeLook{0%,100%{transform:scale(1)}30%{transform:scale(1.15) rotate(-6deg)}60%{transform:scale(1.1) rotate(6deg)}}
@keyframes beamSweep{0%{left:5%;opacity:0}10%{opacity:.6}90%{opacity:.6}100%{left:85%;opacity:0}}
@keyframes lensFlare{0%,100%{filter:drop-shadow(0 0 4px rgba(33,150,243,.4))}50%{filter:drop-shadow(0 0 14px rgba(33,150,243,.8)) drop-shadow(0 0 28px rgba(100,180,255,.3))}}

/* Done — celebration */
@keyframes checkPop{0%,75%{transform:scale(1)}80%{transform:scale(1.35) rotate(-5deg)}87%{transform:scale(.88) rotate(3deg)}94%{transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes ringBurst{0%{box-shadow:0 0 0 0 rgba(0,220,104,.4)}70%{box-shadow:0 0 0 10px rgba(0,220,104,0)}100%{box-shadow:0 0 0 0 rgba(0,220,104,0)}}
@keyframes goldShine{0%{background-position:-50px 0}100%{background-position:50px 0}}
@keyframes starFloat{0%{transform:translateY(0) scale(1);opacity:.7}50%{transform:translateY(-8px) scale(.6);opacity:0}51%{transform:translateY(6px);opacity:0}100%{transform:translateY(0) scale(1);opacity:.7}}

/* Fail — catastrophe */
@keyframes disaster{0%{transform:translateX(0)}6%{transform:translateX(-4px) rotate(-1.5deg)}12%{transform:translateX(4px) rotate(1.5deg)}18%{transform:translateX(-3px) rotate(-1deg)}24%{transform:translateX(3px) rotate(1deg)}30%{transform:translateX(-1px)}36%{transform:translateX(0)}100%{transform:translateX(0)}}
@keyframes fireGlow{0%,100%{text-shadow:0 0 8px rgba(255,60,60,.6),0 0 20px rgba(255,40,0,.3)}50%{text-shadow:0 0 20px rgba(255,60,60,1),0 0 40px rgba(255,40,0,.6),0 0 60px rgba(255,0,0,.3)}}
@keyframes crackPulse{0%,100%{box-shadow:inset 0 0 20px rgba(255,50,50,.1),0 0 10px rgba(255,50,50,.2)}50%{box-shadow:inset 0 0 30px rgba(255,50,50,.25),0 0 25px rgba(255,50,50,.3)}}
@keyframes emberRise{0%{transform:translateY(0) scale(1);opacity:.8}100%{transform:translateY(-20px) translateX(var(--ex,3px)) scale(0);opacity:0}}
@keyframes smokeUp{0%{transform:translateY(0) scale(.5);opacity:.3}100%{transform:translateY(-16px) scale(1.5);opacity:0}}

/* Factory/total */
@keyframes factorySmoke{0%{transform:translateY(0) scale(.6);opacity:.15}100%{transform:translateY(-10px) scale(1.2);opacity:0}}

/* Container — animation speeds driven by JS activity level */
.mcflow{display:none;padding:0;border-bottom:1px solid var(--border);background:linear-gradient(180deg,var(--bg2) 0%,rgba(0,179,104,.02) 100%);position:relative;overflow:hidden;
  --mc-conveyor:12s;--mc-gear-fast:20s;--mc-gear-slow:30s;--mc-gear-br:40s;
  --mc-arrow:6s;--mc-packet:8s;--mc-bump:10s;--mc-scanline:6s;
  --mc-flicker:5s;--mc-warn:4s;--mc-ring:4s;
  --mc-conveyor-opacity:.25;--mc-gear-opacity:.1;--mc-arrow-opacity:.08}
.mcflow.visible{display:block;animation:emergeUp .4s ease}

/* Conveyor belt — dual-layer */
.mcflow::before{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:repeating-linear-gradient(90deg,var(--accent) 0,var(--accent) 8px,transparent 8px,transparent 14px,rgba(33,150,243,.6) 14px,rgba(33,150,243,.6) 22px,transparent 22px,transparent 28px,rgba(0,179,104,.4) 28px,rgba(0,179,104,.4) 36px,transparent 36px,transparent 40px);animation:conveyorMove var(--mc-conveyor) linear infinite;opacity:var(--mc-conveyor-opacity);transition:opacity 1.5s ease}
.mcflow::after{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:repeating-linear-gradient(90deg,transparent 0,transparent 60px,rgba(0,179,104,.15) 60px,rgba(0,179,104,.15) 120px);animation:conveyorMove calc(var(--mc-conveyor) * 2.5) linear infinite reverse}

/* Layout */
.mcflow-inner{display:flex;align-items:stretch;gap:0;width:100%;position:relative;z-index:1}

/* Steps */
.mcflow-step{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;padding:.8rem .5rem .7rem;position:relative;flex:1;min-width:0;transition:all .3s cubic-bezier(.4,0,.2,1);cursor:pointer;border-right:1px solid rgba(255,255,255,.02)}
.mcflow-step:last-child{border-right:none}
.mcflow-step:hover{background:rgba(255,255,255,.05);transform:translateY(-3px)}
.mcflow-step:hover .mc-icon{transform:scale(1.2)}
.mcflow-step:active{transform:translateY(0)}

/* Icon */
.mcflow-step .mc-icon{font-size:1.2rem;opacity:.3;transition:all .35s cubic-bezier(.4,0,.2,1);position:relative;z-index:1}

/* Count — the main number */
.mcflow-step .mc-count{font-family:'JetBrains Mono',monospace;font-size:1.5rem;font-weight:900;color:var(--text);transition:all .3s ease;line-height:1;position:relative;z-index:1}

/* Labels */
.mcflow-step .mc-label{font-size:.62rem;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--dim);white-space:nowrap;transition:color .3s}
.mcflow-step .mc-sub{font-size:.52rem;color:var(--dim);font-style:italic;white-space:nowrap;opacity:.5}
.mcflow-step .mc-spark{position:absolute;bottom:4px;right:4px;opacity:.3;pointer-events:none}
.mcflow-step:hover .mc-spark{opacity:.5}
.mcflow-step .mc-spark svg{display:block}

/* ── Active state (base) ── */
.mcflow-step.active{background:rgba(0,179,104,.04)}
.mcflow-step.active .mc-icon{opacity:1;color:var(--accent);filter:drop-shadow(0 0 6px rgba(0,179,104,.5))}
.mcflow-step.active .mc-count{color:var(--accent)}

/* ══ BACKLOG — pressure cooker, weight piling up ══ */
.mcflow-step.hot{animation:pressureGlow 2s ease-in-out infinite;background:linear-gradient(180deg,rgba(255,140,40,.03) 0%,rgba(255,80,20,.08) 100%)!important;border-bottom:2px solid rgba(255,140,40,.4)}
.mcflow-step.hot .mc-icon{color:#ff8c28;font-size:1.4rem;animation:stackDrop var(--mc-bump) ease-in-out infinite;filter:drop-shadow(0 0 10px rgba(255,140,40,.6))}
.mcflow-step.hot .mc-count{color:#ff6b1a;font-weight:900;animation:hotFlicker var(--mc-flicker) ease-in-out infinite}
.mcflow-step.hot .mc-label{color:#ff8c28}
/* Falling block particles */
.mc-blockfall{position:absolute;font-size:.5rem;color:rgba(255,140,40,.5);animation:blockFall 1.8s linear infinite;pointer-events:none}

/* ══ QUEUE — orderly march forward ══ */
.mcflow-step.is-queued{animation:queuePulse 2.5s ease-in-out infinite;background:linear-gradient(180deg,rgba(0,179,104,.02) 0%,rgba(0,179,104,.06) 100%)!important;border-bottom:2px solid rgba(0,179,104,.3)}
.mcflow-step.is-queued .mc-icon{animation:marchRight var(--mc-arrow) ease-in-out infinite;font-size:1.3rem;color:var(--accent);filter:drop-shadow(0 0 8px rgba(0,179,104,.5))}
.mcflow-step.is-queued .mc-label{color:var(--accent)}
/* Marching dots */
.mc-qdot{position:absolute;bottom:6px;width:4px;height:4px;border-radius:50%;background:var(--accent);animation:dotQueue 2s linear infinite;pointer-events:none;box-shadow:0 0 4px var(--accent)}

/* ══ RUNNING — full production, robot + packages + sparks ══ */
.mcflow-step.is-running{animation:runGlow 1.5s ease-in-out infinite;background:linear-gradient(180deg,rgba(0,220,104,.03) 0%,rgba(0,179,104,.08) 100%)!important;border-bottom:2px solid rgba(0,220,104,.5)}
.mcflow-step.is-running .mc-icon{animation:robotStamp var(--mc-bump) ease-in-out infinite;font-size:1.5rem;color:var(--accent);filter:drop-shadow(0 0 10px rgba(0,220,104,.6))}
.mcflow-step.is-running .mc-label{color:var(--accent);font-weight:900}
.mcflow-step.is-running .mc-packages{position:absolute;top:50%;right:-2px;pointer-events:none}
.mcflow-step.is-running .mc-pkg{position:absolute;font-size:1.1rem;color:var(--accent);animation:packageEmit var(--mc-bump) ease-out infinite;opacity:0}
.mcflow-step.is-running .mc-pkg:nth-child(2){animation-delay:calc(var(--mc-bump) * 0.33);top:-4px}
.mcflow-step.is-running .mc-pkg:nth-child(3){animation-delay:calc(var(--mc-bump) * 0.66);top:4px}
/* Sparks from stamp impact */
.mc-spark-dot{position:absolute;width:3px;height:3px;border-radius:50%;background:#5eff8a;box-shadow:0 0 6px #5eff8a;animation:sparkBurst .6s ease-out infinite;pointer-events:none}

/* ══ REVIEW — scanning inspection ══ */
.mcflow-step.is-review{background:linear-gradient(180deg,rgba(33,150,243,.02) 0%,rgba(33,150,243,.07) 100%)!important;border-bottom:2px solid rgba(33,150,243,.4)}
.mcflow-step.is-review .mc-icon{animation:eyeLook 2.5s ease-in-out infinite;font-size:1.5rem;color:var(--blue);animation:eyeLook 2.5s ease-in-out infinite,lensFlare 2s ease-in-out infinite}
.mcflow-step.is-review .mc-count{color:var(--blue)}
.mcflow-step.is-review .mc-label{color:var(--blue)}
/* Scanning beam line */
.mc-beam{position:absolute;top:20%;bottom:20%;width:2px;background:linear-gradient(180deg,transparent,rgba(33,150,243,.8),transparent);box-shadow:0 0 8px rgba(33,150,243,.5),0 0 16px rgba(33,150,243,.2);animation:beamSweep 2s ease-in-out infinite;pointer-events:none}

/* ══ DONE — celebration, delivered ══ */
.mcflow-step.is-done{background:linear-gradient(180deg,rgba(0,179,104,.02) 0%,rgba(0,220,130,.06) 100%)!important;border-bottom:2px solid rgba(0,220,130,.4)}
.mcflow-step.is-done .mc-icon{animation:checkPop 3.5s ease-in-out infinite;font-size:1.4rem;color:var(--accent);filter:drop-shadow(0 0 8px rgba(0,220,130,.5))}
.mcflow-step.is-done .mc-count{color:var(--accent);animation:ringBurst 3.5s ease-out infinite}
.mcflow-step.is-done .mc-label{color:var(--accent)}
/* Floating stars */
.mc-star{position:absolute;font-size:.45rem;color:rgba(0,220,130,.6);animation:starFloat 2s ease-in-out infinite;pointer-events:none}

/* ── Selected (filter active) ── */
.mcflow-step.selected{background:rgba(0,179,104,.1)!important;border-bottom:2px solid var(--accent);animation:ringPulse var(--mc-ring) ease-in-out infinite}
.mcflow-step.selected .mc-label{color:var(--accent)}
.mcflow-step.selected .mc-count{color:var(--accent)}

/* ── Total / En vuelo ── */
.mcflow-total{opacity:.85;position:relative}
.mcflow-total .mc-count{color:var(--blue)!important;font-size:1.3rem}
.mcflow-total.selected{background:rgba(33,150,243,.08)!important;border-bottom-color:var(--blue);animation:ringPulse var(--mc-ring) ease-in-out infinite}
.mcflow-total.selected .mc-label{color:var(--blue)}
/* Factory smoke */
.mc-smoke{position:absolute;top:2px;width:4px;height:4px;border-radius:50%;background:rgba(150,150,150,.2);animation:factorySmoke 2.5s ease-out infinite;pointer-events:none}

/* ══ CATASTROPHIC FAIL ══ */
.mcflow-step.warn{animation:disaster .5s ease-in-out infinite,crackPulse 1.2s ease-in-out infinite;background:linear-gradient(180deg,rgba(255,30,30,.04) 0%,rgba(255,0,0,.1) 100%)!important;border-left:3px solid rgba(255,40,40,.6);margin-left:10px}
.mcflow-step.warn .mc-count{color:#ff1a1a;font-weight:900;animation:fireGlow .6s ease-in-out infinite}
.mcflow-step.warn .mc-icon{color:#ff1a1a;font-size:1.6rem;filter:drop-shadow(0 0 12px rgba(255,30,0,.8)) drop-shadow(0 0 24px rgba(255,0,0,.4))}
.mcflow-step.warn .mc-label{color:#ff3030;font-weight:900;letter-spacing:1.2px;text-transform:uppercase}
.mcflow-step.warn.selected{background:rgba(255,20,20,.15)!important;border-bottom:2px solid #ff1a1a}
/* Embers rising */
.mc-ember{position:absolute;width:3px;height:3px;border-radius:50%;background:#ff4020;box-shadow:0 0 4px #ff6030;animation:emberRise 1.5s ease-out infinite;pointer-events:none}
/* Smoke wisps */
.mc-smoke-fail{position:absolute;width:6px;height:6px;border-radius:50%;background:rgba(100,100,100,.15);animation:smokeUp 2s ease-out infinite;pointer-events:none}

/* ── Arrows — data stream ── */
.mcflow-arrow{display:flex;align-items:center;color:var(--border2);font-size:.6rem;padding:0;flex-shrink:0;width:22px;justify-content:center;position:relative}
.mcflow-arrow i{opacity:.15;transition:all .3s ease}
.mcflow-arrow.lit i{opacity:var(--mc-arrow-opacity);color:var(--accent);animation:arrowStream var(--mc-arrow) ease-in-out infinite;filter:drop-shadow(0 0 4px rgba(0,179,104,.5));transition:opacity 1.5s ease}
/* data packet dot traveling through lit arrows */
.mcflow-arrow.lit::after{content:'';position:absolute;width:3px;height:3px;border-radius:50%;background:var(--accent);box-shadow:0 0 6px var(--accent);animation:dataPacket var(--mc-packet) linear infinite;top:50%;margin-top:-1.5px}

/* ── Gear decorations ── */
.mc-gear{position:absolute;font-size:1.1rem;opacity:var(--mc-gear-opacity);color:var(--accent);z-index:0;transition:opacity 1.5s ease}
.mc-gear-tl{top:3px;left:6px;animation:gearSpinSlow var(--mc-gear-slow) linear infinite}
.mc-gear-tr{top:3px;right:6px;animation:gearSpin var(--mc-gear-fast) linear infinite}
.mc-gear-br{bottom:3px;right:8px;animation:gearSpinSlow var(--mc-gear-br) linear infinite;font-size:.9rem}

/* ── Scanline on running step ── */
.mcflow-step.is-running .mc-icon{animation:robotStamp var(--mc-bump) ease-in-out infinite;font-size:1.5rem}
/* Package boxes emitting from robot */
.mcflow-step.is-running .mc-packages{position:absolute;top:50%;right:-2px;pointer-events:none}
.mcflow-step.is-running .mc-pkg{position:absolute;font-size:1.1rem;color:var(--accent);animation:packageEmit var(--mc-bump) ease-out infinite;opacity:0}
.mcflow-step.is-running .mc-pkg:nth-child(2){animation-delay:calc(var(--mc-bump) * 0.33);top:-4px}
.mcflow-step.is-running .mc-pkg:nth-child(3){animation-delay:calc(var(--mc-bump) * 0.66);top:4px}
/* scanline replaced by per-phase effects */

/* Pipeline (drawer) */
.pipeline{padding:.6rem 1rem;border-bottom:1px solid var(--border);background:var(--bg);overflow-x:auto}
.pipeline-inner{display:flex;align-items:center;gap:0;min-width:max-content}
.pl-step{display:flex;flex-direction:column;align-items:center;gap:.2rem;position:relative;padding:0 .5rem}
.pl-step .bullet{width:22px;height:22px;border-radius:50%;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:.65rem;font-weight:800;background:var(--bg2);color:var(--dim);flex-shrink:0;z-index:1}
.pl-step.done .bullet{background:var(--accent);border-color:var(--accent);color:#000}
.pl-step.current .bullet{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 0 0 3px rgba(33,150,243,.15)}
.pl-step.failed .bullet{background:var(--red);border-color:var(--red);color:#fff}
.pl-step .label{font-size:.63rem;font-weight:800;color:var(--dim);text-transform:uppercase;letter-spacing:.3px;white-space:nowrap}
.pl-step.done .label,.pl-step.current .label{color:var(--text)}
.pl-step .time{font-size:.6rem;color:var(--dim);white-space:nowrap}
.pl-conn{flex:1;min-width:30px;height:2px;background:var(--border);margin-bottom:1.3rem}
.pl-conn.done{background:var(--accent)}

/* Primary action bar */
.primary-bar{padding:.5rem 1rem;border-bottom:1px solid var(--border);display:flex;gap:.4rem;align-items:center;flex-wrap:wrap;background:var(--bg2)}
.primary-bar .p-btn{padding:.45rem .9rem;border:none;border-radius:7px;font-size:.8rem;font-weight:800;cursor:pointer;display:inline-flex;align-items:center;gap:.35rem;transition:.15s}
.primary-bar .p-btn.main{background:var(--accent);color:#000;font-size:.88rem;padding:.5rem 1rem}
.primary-bar .p-btn.main:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,179,104,.3)}
.primary-bar .p-btn.sec{background:var(--surface);color:var(--text);border:1px solid var(--border)}
.primary-bar .p-btn.sec:hover{border-color:var(--border2)}
.primary-bar .p-btn.danger{background:rgba(255,107,107,.1);color:var(--red);border:1px solid rgba(255,107,107,.3)}
.primary-bar .p-btn.danger:hover{background:rgba(255,107,107,.2)}
.primary-bar .p-btn.resolve{background:rgba(0,179,104,.1);color:var(--accent);border:1px solid rgba(0,179,104,.3)}
.primary-bar .p-btn.resolve:hover{background:rgba(0,179,104,.2)}

/* Drawer tabs */
.drawer-tabs{display:flex;gap:0;padding:0 1rem;background:var(--bg2);border-bottom:1px solid var(--border);flex-shrink:0}
.dt-btn{padding:.5rem .75rem;background:none;border:none;color:var(--dim);font-size:.78rem;font-weight:700;cursor:pointer;border-bottom:2px solid transparent;display:inline-flex;align-items:center;gap:.3rem}
.dt-btn:hover{color:var(--text)}
.dt-btn.active{color:var(--accent);border-bottom-color:var(--accent)}
.dt-btn .badge{font-size:.6rem;background:var(--surface);padding:.05rem .3rem;border-radius:8px;font-weight:800}

.drawer-body{flex:1;overflow-y:auto;padding:.8rem 1rem;background:var(--bg2)}
.dp-empty{text-align:center;padding:3rem 1rem;color:var(--dim)}
.dp-empty i{font-size:2rem;display:block;opacity:.25;margin-bottom:.5rem}

/* Overview tab */
.kv-grid{display:grid;grid-template-columns:auto 1fr;gap:.4rem .8rem;font-size:.82rem;margin-bottom:.8rem}
.kv-grid dt{color:var(--dim);font-weight:700;font-size:.73rem;text-transform:uppercase;letter-spacing:.3px;align-self:center}
.kv-grid dd{font-weight:500}
.kv-grid dd.mono{font-family:'JetBrains Mono',monospace;font-size:.77rem}
.desc-block{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:.6rem .8rem;font-size:.83rem;line-height:1.5;white-space:pre-wrap;margin-bottom:.6rem;max-height:240px;overflow-y:auto}
.resolution-block{background:rgba(0,179,104,.05);border:1px solid rgba(0,179,104,.3);border-radius:8px;padding:.6rem .8rem;font-size:.83rem;line-height:1.5;white-space:pre-wrap;margin-bottom:.6rem}
.error-block{background:rgba(255,107,107,.05);border:1px solid rgba(255,107,107,.3);border-radius:8px;padding:.6rem .8rem;font-size:.8rem;line-height:1.5;font-family:'JetBrains Mono',monospace;color:var(--red);white-space:pre-wrap;margin-bottom:.6rem}

/* Log tab */
.log-viewer{background:#0d1117;border:1px solid var(--border);border-radius:8px;padding:.6rem;font-family:'JetBrains Mono',monospace;font-size:.73rem;line-height:1.55;max-height:calc(100vh - 280px);overflow-y:auto;color:#c9d1d9}
body:not(.dark) .log-viewer{background:#1e1e1e;color:#e0e0e0}
.log-entry{display:flex;gap:.5rem;padding:.1rem 0}
.log-entry .lt{color:#7d8590;flex-shrink:0}
.log-entry .ll{flex-shrink:0;font-weight:700;width:45px;text-align:right}
.log-entry .ll.info{color:#58a6ff}
.log-entry .ll.warn{color:#d29922}
.log-entry .ll.error{color:#f85149}
.log-entry .lm{flex:1;min-width:0;white-space:pre-wrap;word-break:break-word}
.log-live-indicator{display:inline-flex;align-items:center;gap:.3rem;font-size:.7rem;color:var(--accent);margin-left:.5rem}
.log-live-indicator .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:pulse 1.5s infinite}

/* Diff tab */
.diff-files{margin-bottom:.5rem}
.diff-file-tab{padding:.3rem .55rem;background:var(--surface);border:1px solid var(--border);border-radius:6px 6px 0 0;cursor:pointer;display:inline-flex;align-items:center;gap:.3rem;font-size:.72rem;margin-right:.2rem;font-family:'JetBrains Mono',monospace}
.diff-file-tab.active{background:var(--bg);border-bottom-color:var(--bg);position:relative;top:1px}
.diff-file-tab .op{font-size:.6rem;font-weight:800;padding:.05rem .25rem;border-radius:3px;text-transform:uppercase}
.diff-file-tab .op.edit{background:rgba(83,189,235,.2);color:var(--blue)}
.diff-file-tab .op.create{background:rgba(0,179,104,.2);color:var(--accent)}
.diff-file-tab .op.delete{background:rgba(255,107,107,.2);color:var(--red)}
.diff-viewer{background:var(--bg);border:1px solid var(--border);border-radius:0 8px 8px 8px;overflow:hidden}
.diff-content{font-family:'JetBrains Mono',monospace;font-size:.73rem;line-height:1.5;overflow-x:auto;max-height:calc(100vh - 320px);overflow-y:auto}
.diff-line{display:block;padding:.05rem .6rem;white-space:pre;min-width:max-content}
.diff-line.add{background:rgba(0,179,104,.08);color:var(--accent)}
.diff-line.del{background:rgba(255,107,107,.08);color:var(--red)}
.diff-line.ctx{color:var(--dim)}
body.dark .diff-line.add{background:rgba(0,214,126,.12)}
body.dark .diff-line.del{background:rgba(255,107,107,.12)}

/* Solution tab */
.sol-summary{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:.5rem .7rem;margin-bottom:.5rem;display:flex;align-items:center;gap:.5rem;font-size:.78rem}
.sol-summary .sid{font-family:'JetBrains Mono',monospace;font-size:.7rem;color:var(--dim)}
.sol-summary .stat{background:var(--surface);padding:.1rem .35rem;border-radius:4px;font-size:.68rem;font-weight:800}
.sol-fbtn{padding:.2rem .45rem;font-size:.68rem;border:1px solid var(--border);background:none;color:var(--dim);border-radius:4px;cursor:pointer}
.sol-fbtn:hover{border-color:var(--accent);color:var(--accent)}
.sol-fbtn.danger:hover{border-color:var(--red);color:var(--red)}

/* Activity tab */
.activity-entry{padding:.4rem .5rem;border-left:2px solid var(--border);margin-left:.3rem;font-size:.78rem;position:relative}
.activity-entry::before{content:'';position:absolute;left:-5px;top:.7rem;width:8px;height:8px;border-radius:50%;background:var(--border)}
.activity-entry.info::before{background:var(--blue)}
.activity-entry.warn::before{background:var(--orange)}
.activity-entry.error::before{background:var(--red)}
.activity-entry .ae-t{color:var(--dim);font-size:.68rem}
.activity-entry .ae-m{line-height:1.5}

/* Command Palette */
.palette-bg{position:fixed;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(4px);z-index:100;display:none;align-items:flex-start;justify-content:center;padding-top:15vh}
.palette-bg.open{display:flex}
.palette{width:min(600px,92vw);background:var(--bg2);border:1px solid var(--border2);border-radius:12px;overflow:hidden;box-shadow:var(--shadow-lg)}
.palette-input{width:100%;border:none;background:none;padding:1rem 1.2rem;font-size:1rem;font-weight:500;outline:none;border-bottom:1px solid var(--border)}
.palette-input::placeholder{color:var(--dim)}
.palette-list{max-height:50vh;overflow-y:auto}
.palette-item{padding:.55rem 1rem;display:flex;align-items:center;gap:.5rem;cursor:pointer;border-bottom:1px solid var(--border)}
.palette-item:last-child{border-bottom:none}
.palette-item.focused{background:var(--surface)}
.palette-item .pi-icon{width:28px;height:28px;border-radius:6px;background:var(--surface);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:.8rem;color:var(--dim)}
.palette-item .pi-title{flex:1;min-width:0;font-size:.85rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.palette-item .pi-sub{font-size:.7rem;color:var(--dim);margin-top:.05rem}
.palette-item .pi-kbd{font-size:.65rem;color:var(--dim);background:var(--surface);padding:.1rem .35rem;border-radius:4px;flex-shrink:0}
.palette-hint{padding:.4rem .8rem;font-size:.68rem;color:var(--dim);background:var(--surface);display:flex;gap:.6rem;justify-content:center;border-top:1px solid var(--border)}

/* Toast */
.toast-wrap{position:fixed;bottom:1rem;right:1rem;z-index:200;display:flex;flex-direction:column;gap:.3rem}
.toast{padding:.5rem .8rem;border-radius:8px;font-size:.82rem;font-weight:600;max-width:360px;box-shadow:var(--shadow-lg);animation:slideIn .2s}
.toast.ok{background:var(--accent);color:#000}
.toast.err{background:var(--red);color:#fff}
.toast.info{background:var(--bg2);color:var(--text);border:1px solid var(--border2)}
@keyframes slideIn{from{transform:translateY(10px);opacity:0}to{transform:translateY(0);opacity:1}}

/* Modal generic */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;z-index:90}
.modal-bg.open{display:flex}

/* Job Detail Modal (80% pantalla) */
.job-modal-bg { cursor: default; }
.job-modal-panel {
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: 14px;
  width: 88vw;
  max-width: 1400px;
  height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.jm-head {
  padding: .7rem 1rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-shrink: 0;
  background: var(--bg2);
}
.jm-ref {
  font-family: 'JetBrains Mono', monospace;
  font-size: .73rem;
  color: var(--dim);
  padding: .15rem .4rem;
  background: var(--surface);
  border-radius: 4px;
  flex-shrink: 0;
}
.jm-title {
  flex: 1;
  min-width: 0;
  font-size: 1rem;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.jm-pipeline { flex-shrink: 0; }
.jm-body { flex: 1; overflow-y: auto; padding: .8rem 1rem; background: var(--bg2); }

.modal{background:var(--bg2);border:1px solid var(--border2);border-radius:12px;padding:1.2rem;width:460px;max-width:92vw;max-height:85vh;overflow-y:auto;box-shadow:var(--shadow-lg)}
.modal h3{font-size:1.05rem;margin-bottom:.8rem}
.modal label{font-size:.68rem;font-weight:800;color:var(--dim);text-transform:uppercase;display:block;margin:.4rem 0 .15rem}
.modal input,.modal select,.modal textarea{width:100%;padding:.4rem .6rem;background:var(--bg);border:1px solid var(--border);border-radius:6px;font-size:.85rem}
.modal textarea{resize:vertical;min-height:90px}
.modal-actions{display:flex;gap:.35rem;margin-top:.8rem;justify-content:flex-end}

/* Incidents view */
.incident-group{background:var(--bg2);border:1px solid var(--border);border-radius:10px;margin-bottom:.5rem;overflow:hidden}
.incident-head{padding:.6rem .8rem;display:flex;align-items:center;gap:.5rem;background:var(--surface);cursor:pointer;user-select:none}
.incident-head .ig-count{background:var(--red);color:#fff;font-size:.72rem;font-weight:800;padding:.15rem .5rem;border-radius:10px}
.incident-head .ig-sig{flex:1;font-family:'JetBrains Mono',monospace;font-size:.75rem;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.incident-head .ig-apps{font-size:.68rem;color:var(--dim)}
.incident-body{padding:.4rem .6rem;border-top:1px solid var(--border);display:none}
.incident-body.open{display:block}
.incident-job{padding:.25rem .4rem;font-size:.77rem;display:flex;gap:.5rem;cursor:pointer;border-radius:4px}
.incident-job:hover{background:var(--surface)}

/* Sparkline */
.spark{display:block}

/* Section switcher in topbar */
.section-switch{display:flex;gap:.1rem;padding:.15rem;background:var(--surface);border:1px solid var(--border);border-radius:8px;margin-left:.5rem}
.sect-btn{padding:.3rem .65rem;border:none;background:none;color:var(--dim);font-size:.75rem;font-weight:800;cursor:pointer;border-radius:6px;display:inline-flex;align-items:center;gap:.3rem;transition:.12s}
.sect-btn:hover{color:var(--text)}
.sect-btn.active{background:var(--bg2);color:var(--text);box-shadow:var(--shadow)}

/* Apps section */
.apps-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.8rem;padding:0 .2rem}
.apps-header h2{font-size:1.1rem;font-weight:900;display:flex;align-items:center;gap:.5rem}
.apps-grid{display:flex;flex-direction:column;gap:.3rem}
.app-row{display:flex;align-items:center;gap:.7rem;background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:.45rem .8rem;transition:.15s}
.app-row:hover{border-color:var(--border2);box-shadow:var(--shadow)}
.app-row .sem{width:10px;height:10px;border-radius:50%;background:var(--dim2);flex-shrink:0}
.app-row .sem.ok{background:var(--accent)}
.app-row .sem.warn{background:var(--orange)}
.app-row .sem.err{background:var(--red);animation:semPulse 1.8s ease-in-out infinite}
.app-row .sem.loading{background:var(--dim);animation:semPulse 1.2s ease-in-out infinite}
.ar-name{font-weight:900;font-size:.88rem;min-width:120px;flex-shrink:0}
.ar-meta{font-size:.7rem;color:var(--dim);display:flex;align-items:center;gap:.25rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:1}
.ar-meta i{color:var(--dim2);font-size:.65rem}
.ar-tkn{display:flex;align-items:center;gap:.2rem;flex-shrink:0}
.ar-tkn i{color:var(--accent);font-size:.65rem}
.ar-tkn code{font-family:'JetBrains Mono',monospace;font-size:.66rem;background:var(--surface);padding:.1rem .3rem;border-radius:4px;cursor:pointer;color:var(--dim)}
.ar-stats{font-size:.72rem;font-weight:700;flex-shrink:0;margin-left:auto}
.ar-actions{display:flex;gap:.2rem;flex-shrink:0}
.ar-actions button{padding:.2rem .35rem;font-size:.65rem;border:1px solid var(--border);background:var(--surface);color:var(--dim);border-radius:5px;cursor:pointer;font-weight:700}
.ar-actions button:hover{border-color:var(--accent);color:var(--accent)}
.ar-actions button.danger:hover{border-color:var(--red);color:var(--red)}
.app-card{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:.7rem .8rem;display:flex;gap:.6rem;transition:.15s}
.app-card:hover{border-color:var(--border2);box-shadow:var(--shadow)}
.app-card .ai{width:42px;height:42px;border-radius:10px;background:linear-gradient(135deg,rgba(0,179,104,.15),rgba(83,189,235,.12));display:flex;align-items:center;justify-content:center;font-size:1.25rem;color:var(--accent);flex-shrink:0;position:relative}
.app-card .ai .sem{position:absolute;top:-3px;right:-3px;width:13px;height:13px;border-radius:50%;border:2px solid var(--bg2);background:var(--dim2)}
.app-card .ai .sem.ok{background:var(--accent);box-shadow:0 0 6px rgba(0,179,104,.6)}
.app-card .ai .sem.warn{background:var(--orange);box-shadow:0 0 6px rgba(237,137,54,.6)}
.app-card .ai .sem.err{background:var(--red);box-shadow:0 0 6px rgba(235,83,83,.7);animation:semPulse 1.8s ease-in-out infinite}
.app-card .ai .sem.loading{background:var(--dim);animation:semPulse 1.2s ease-in-out infinite}
@keyframes semPulse{0%,100%{opacity:1}50%{opacity:.4}}
.app-card .ab{flex:1;min-width:0}
.app-card .an{font-weight:900;font-size:.95rem;margin-bottom:.15rem}
.app-card .ad{font-size:.72rem;color:var(--dim);line-height:1.5;margin-bottom:.15rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app-card .ad i{width:12px;color:var(--dim2);margin-right:.2rem}
.app-card .at{display:flex;align-items:center;gap:.25rem;margin-top:.3rem}
.app-card .at code{font-family:'JetBrains Mono',monospace;font-size:.68rem;background:var(--surface);padding:.12rem .35rem;border-radius:4px;cursor:pointer;color:var(--dim);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app-card .at code:hover{color:var(--text)}
.app-card .af{display:flex;flex-wrap:wrap;gap:.25rem;margin-top:.4rem}
.app-card .af button{padding:.22rem .45rem;font-size:.66rem;border:1px solid var(--border);background:var(--surface);color:var(--dim);border-radius:5px;cursor:pointer;font-weight:700;white-space:nowrap}
.app-card .af button:hover{border-color:var(--accent);color:var(--accent)}
.app-card .af button.danger:hover{border-color:var(--red);color:var(--red)}
.app-card .as{text-align:right;flex-shrink:0}
.app-card .as .asv{font-size:1.2rem;font-weight:900;color:var(--accent);line-height:1}
.app-card .as .asl{font-size:.6rem;color:var(--dim);font-weight:700;text-transform:uppercase}
.app-card .as .pct{font-size:.7rem;font-weight:800;margin-top:.2rem}

/* Wizard modal */
.wiz-modal{width:560px;max-width:94vw}
.wiz-panel{display:none}
.wiz-panel.active{display:block}
.dir-list{max-height:260px;overflow-y:auto;border:1px solid var(--border);border-radius:8px;background:var(--bg)}
.dir-item{padding:.4rem .6rem;cursor:pointer;font-size:.83rem;display:flex;align-items:center;gap:.35rem;border-bottom:1px solid var(--border);transition:.1s}
.dir-item:last-child{border-bottom:none}
.dir-item:hover{background:var(--surface)}
.dir-item.selected{background:rgba(0,179,104,.08);border-left:3px solid var(--accent);padding-left:calc(.6rem - 3px)}
.dir-item .di-badges{display:flex;gap:.2rem;margin-left:auto}
.dir-item .di-badge{font-size:.6rem;padding:.1rem .3rem;border-radius:3px;font-weight:800}
.dir-item .di-badge.pkg{background:rgba(0,179,104,.12);color:var(--accent)}
.dir-item .di-badge.eco{background:rgba(83,189,235,.12);color:var(--blue)}
.dir-item .di-badge.dbs{background:rgba(249,202,36,.12);color:var(--orange)}
.dir-item .di-badge.reg{background:rgba(167,139,250,.12);color:var(--purple)}

/* Schedules cards */
.sched-card{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:.7rem .9rem;margin-bottom:.5rem;display:flex;align-items:center;gap:.7rem}
.sched-card .sc-ic{width:38px;height:38px;border-radius:10px;background:rgba(167,139,250,.12);display:flex;align-items:center;justify-content:center;color:var(--purple);font-size:1.1rem;flex-shrink:0}
.sched-card .sc-main{flex:1;min-width:0}
.sched-card .sc-name{font-weight:800;font-size:.92rem;display:flex;align-items:center;gap:.4rem}
.sched-card .sc-desc{font-size:.72rem;color:var(--dim);margin-top:.15rem;line-height:1.4}
.sched-card .sc-meta{display:flex;gap:.8rem;margin-top:.25rem;font-size:.68rem;color:var(--dim)}
.sched-card .sc-meta strong{color:var(--text);font-weight:700}
.sched-card .sc-status{font-size:.62rem;padding:.12rem .35rem;border-radius:3px;font-weight:800;text-transform:uppercase}
.sched-card .sc-status.on{background:rgba(0,179,104,.15);color:var(--accent)}
.sched-card .sc-status.off{background:rgba(255,107,107,.1);color:var(--red)}
.sched-card .sc-actions{display:flex;gap:.3rem;flex-shrink:0}
.sched-card .sc-actions button{padding:.3rem .55rem;font-size:.7rem;border:1px solid var(--border);background:var(--surface);color:var(--dim);border-radius:5px;cursor:pointer;font-weight:700;display:inline-flex;align-items:center;gap:.25rem}
.sched-card .sc-actions button:hover{border-color:var(--accent);color:var(--accent)}

/* Setup docs section */
.setup-wrap{width:100%}
.setup-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;padding:0 .2rem}
.setup-header h2{font-size:1.15rem;font-weight:900;display:flex;align-items:center;gap:.5rem}
.doc-section{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:.8rem 1rem;margin-bottom:.7rem}
.doc-section h3{font-size:1rem;font-weight:800;margin-bottom:.4rem;display:flex;align-items:center;gap:.4rem}
.doc-section p{font-size:.82rem;color:var(--dim);line-height:1.55;margin:.3rem 0}
.doc-section p strong{color:var(--text)}
.doc-section pre{background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:.6rem .75rem;font-family:'JetBrains Mono',monospace;font-size:.73rem;line-height:1.6;overflow-x:auto;margin:.4rem 0;color:var(--accent);white-space:pre}
.doc-section code{font-family:'JetBrains Mono',monospace;font-size:.77rem;background:var(--surface);padding:.08rem .3rem;border-radius:3px;color:var(--text)}

/* Scrollbar */
.drawer-body::-webkit-scrollbar,.list-body::-webkit-scrollbar,.log-viewer::-webkit-scrollbar,.diff-content::-webkit-scrollbar,.palette-list::-webkit-scrollbar{width:8px;height:8px}
.drawer-body::-webkit-scrollbar-thumb,.list-body::-webkit-scrollbar-thumb,.log-viewer::-webkit-scrollbar-thumb,.diff-content::-webkit-scrollbar-thumb,.palette-list::-webkit-scrollbar-thumb{background:var(--border2);border-radius:4px}
.drawer-body::-webkit-scrollbar-track,.list-body::-webkit-scrollbar-track,.log-viewer::-webkit-scrollbar-track,.diff-content::-webkit-scrollbar-track,.palette-list::-webkit-scrollbar-track{background:transparent}

/* GitHub commits */
.gh-commit{padding:.5rem .6rem;border-bottom:1px solid var(--border);display:flex;flex-wrap:wrap;gap:.3rem .6rem;align-items:baseline}
.gh-commit:last-child{border-bottom:none}
.gh-sha{font-size:.7rem;background:var(--bg);padding:.1rem .4rem;border-radius:4px;color:var(--accent);font-weight:600;flex-shrink:0}
.gh-msg{font-size:.78rem;color:var(--text);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gh-meta{font-size:.65rem;color:var(--dim);width:100%}

/* Resolutions list */
.res-row{display:flex;align-items:center;gap:.6rem;padding:.4rem .8rem;border-bottom:1px solid var(--border);cursor:pointer;font-size:.78rem;flex-wrap:wrap}
.res-row:hover{background:var(--surface)}
.res-ref{font-family:'JetBrains Mono',monospace;font-size:.7rem;color:var(--dim);flex-shrink:0}
.res-app{font-size:.72rem;font-weight:700;color:var(--blue);flex-shrink:0}
.res-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text)}
.res-dur{font-size:.7rem;flex-shrink:0}
.res-chev{color:var(--dim);font-size:.65rem;flex-shrink:0;transition:.15s}
.res-detail{display:none;width:100%;flex-direction:column;gap:.25rem;padding:.3rem 0 .1rem 1.2rem;font-size:.75rem}
.res-row.open .res-detail{display:flex}
.res-row.open .res-chev{transform:rotate(180deg)}
.res-kv{display:flex;gap:.4rem}
.res-kv span{color:var(--dim);flex-shrink:0;min-width:90px;font-weight:700}

@media(max-width:900px){
  .drawer{width:100vw;position:fixed}
  .metrics-bar{overflow-x:auto}
}