:root{--mc-bg:#070b18;--mc-panel:#10182b;--mc-panel-2:#141f38;--mc-line:#243556;--mc-text:#eef4ff;--mc-muted:#8fa5ca;--mc-cyan:#55d8ff;--mc-violet:#a985ff;--mc-green:#55e19a;--mc-yellow:#ffd36b;--mc-red:#ff718b;--mc-shadow:0 18px 48px rgba(0,0,0,.24)}
body.monitor-page{background:radial-gradient(circle at 75% -10%,#24366b 0,#0e1730 28%,var(--mc-bg) 68%);color:var(--mc-text);min-height:100vh}
.monitor-shell{width:min(1600px,100%);margin:0 auto;padding:clamp(1rem,2vw,2rem);font-family:Inter,ui-sans-serif,system-ui,sans-serif}
.monitor-topbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.25rem}.monitor-kicker{color:var(--mc-cyan);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase}.monitor-title{margin:.25rem 0 0;font-size:clamp(1.55rem,3vw,2.55rem);letter-spacing:-.04em}.monitor-subtitle{margin:.35rem 0 0;color:var(--mc-muted);font-size:.9rem}.monitor-controls{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:flex-end}.monitor-button{border:1px solid var(--mc-line);border-radius:10px;background:#152340;color:var(--mc-text);padding:.65rem .8rem;cursor:pointer}.monitor-button:hover,.monitor-button:focus-visible{border-color:var(--mc-cyan);outline:none}.monitor-button.primary{background:linear-gradient(135deg,#18658a,#43338c);border-color:#4a8db8}.monitor-button[aria-pressed=true]{border-color:var(--mc-violet);box-shadow:0 0 0 2px #a985ff33 inset}
.monitor-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,360px);gap:1rem;margin-bottom:1rem}.monitor-hero-card,.monitor-panel{background:linear-gradient(145deg,#111c34ee,#0d1528ee);border:1px solid var(--mc-line);border-radius:18px;box-shadow:var(--mc-shadow)}.monitor-hero-card{padding:1.2rem;position:relative;overflow:hidden}.monitor-hero-card:after{content:"";position:absolute;inset:auto -15% -55% 40%;height:180px;background:radial-gradient(circle,#3ac7ef30,transparent 65%);pointer-events:none}.monitor-live-line{display:flex;align-items:center;gap:.55rem;color:var(--mc-muted);font-size:.82rem}.monitor-pulse{width:.6rem;height:.6rem;border-radius:50%;background:var(--mc-green);box-shadow:0 0 0 5px #55e19a1f;animation:monitor-pulse 1.7s infinite}.monitor-pulse.offline{background:var(--mc-red);animation:none}@keyframes monitor-pulse{50%{box-shadow:0 0 0 10px transparent}}
.monitor-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.65rem;margin-top:1rem}.monitor-metric{padding:.8rem;border:1px solid #24395d;border-radius:12px;background:#0c1427}.monitor-metric span{display:block;color:var(--mc-muted);font-size:.75rem}.monitor-metric strong{display:block;font-size:1.65rem;margin-top:.2rem}.monitor-metric.running strong{color:var(--mc-cyan)}.monitor-metric.queued strong{color:var(--mc-yellow)}.monitor-metric.success strong{color:var(--mc-green)}.monitor-metric.failed strong{color:var(--mc-red)}
.monitor-hud{padding:1rem}.monitor-hud h2{font-size:.95rem;margin:0 0 .8rem}.monitor-spark{height:78px;display:flex;align-items:end;gap:4px}.monitor-spark i{display:block;flex:1;min-height:8px;border-radius:4px 4px 1px 1px;background:linear-gradient(#55d8ff,#705cff);opacity:.8}.monitor-hud-note{color:var(--mc-muted);font-size:.78rem;margin:.75rem 0 0}
.monitor-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:1rem}.monitor-panel{padding:1rem;min-width:0}.monitor-panel.full{grid-column:1/-1}.monitor-panel-heading{display:flex;align-items:start;justify-content:space-between;gap:.75rem;margin-bottom:.85rem}.monitor-panel-heading h2{font-size:1.05rem;margin:0}.monitor-panel-heading p{font-size:.78rem;color:var(--mc-muted);margin:.25rem 0 0}.monitor-count{font-variant-numeric:tabular-nums;color:var(--mc-muted);font-size:.8rem}.monitor-job-list{display:grid;gap:.65rem}.monitor-job{border:1px solid #263b60;border-radius:13px;padding:.8rem;background:#0b1427;cursor:pointer;transition:border-color .15s,transform .15s}.monitor-job:hover,.monitor-job:focus-visible{border-color:var(--mc-cyan);transform:translateY(-1px);outline:none}.monitor-job.active{border-color:var(--mc-violet);box-shadow:0 0 0 1px #a985ff55}.monitor-job-top,.monitor-job-meta{display:flex;align-items:center;justify-content:space-between;gap:.6rem}.monitor-job-name{font-weight:650;min-width:0;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.monitor-job-id{font:11px ui-monospace,monospace;color:#9fc4ff}.monitor-status{display:inline-flex;align-items:center;gap:.35rem;border-radius:999px;padding:.24rem .55rem;font-size:.7rem;white-space:nowrap}.monitor-status:before{content:"";width:.4rem;height:.4rem;border-radius:50%;background:currentColor}.monitor-status.running{color:var(--mc-cyan);background:#55d8ff18}.monitor-status.queued{color:var(--mc-yellow);background:#ffd36b18}.monitor-status.succeeded{color:var(--mc-green);background:#55e19a18}.monitor-status.failed,.monitor-status.cancelled{color:var(--mc-red);background:#ff718b18}.monitor-status.draft{color:var(--mc-muted);background:#8fa5ca18}.monitor-job-prompt{color:var(--mc-muted);font-size:.78rem;line-height:1.35;margin:.55rem 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.monitor-job-meta{color:var(--mc-muted);font-size:.72rem}.monitor-job-meta b{color:#d9e5fb;font-weight:500}.monitor-empty{border:1px dashed #2c4268;border-radius:12px;padding:1.2rem;color:var(--mc-muted);text-align:center;font-size:.86rem}.monitor-log-panel{min-height:270px}.monitor-log-toolbar{display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap;margin-bottom:.6rem}.monitor-log-label{color:var(--mc-muted);font-size:.78rem}.monitor-log{margin:0;min-height:210px;max-height:48vh;overflow:auto;background:#060a14;border:1px solid #1e2d4a;border-radius:11px;padding:.85rem;color:#c9ddff;font:12px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap;overflow-wrap:anywhere}.monitor-log.stderr{color:#ffb5c0}.monitor-filter{display:flex;gap:.5rem;flex-wrap:wrap}.monitor-filter input,.monitor-filter select{background:#0b1427;color:var(--mc-text);border:1px solid var(--mc-line);border-radius:9px;padding:.55rem .65rem;min-width:0}.monitor-filter input{flex:1 1 220px}.monitor-footer{color:var(--mc-muted);font-size:.75rem;margin-top:1rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
body.monitor-light{--mc-bg:#eef3fa;--mc-panel:#fff;--mc-panel-2:#f7faff;--mc-line:#cbd7e8;--mc-text:#14213b;--mc-muted:#5e6f89;--mc-shadow:0 14px 36px #29456a18;background:linear-gradient(135deg,#eef4ff,#fbfdff 55%,#e6f5fb)}body.monitor-light .monitor-hero-card,body.monitor-light .monitor-panel{background:#ffffffdd}body.monitor-light .monitor-metric,body.monitor-light .monitor-job{background:#f7faff}body.monitor-light .monitor-log{background:#111a2a;color:#dbe8ff}
@media(max-width:1050px){.monitor-hero{grid-template-columns:1fr}.monitor-grid{grid-template-columns:1fr}.monitor-panel.full{grid-column:auto}}
@media(max-width:620px){.monitor-shell{padding:.75rem}.monitor-topbar{align-items:flex-start;flex-direction:column}.monitor-controls{justify-content:flex-start}.monitor-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.monitor-job-top{align-items:flex-start;flex-direction:column}.monitor-job-meta{display:grid;grid-template-columns:1fr 1fr;justify-content:initial}.monitor-log{max-height:42vh}.monitor-panel{padding:.8rem;border-radius:14px}}
@media(orientation:portrait) and (min-width:621px){.monitor-shell{max-width:780px}}