:root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--bg:#080a0f;--panel:rgba(16,19,27,.9);--line:#252b38;--muted:#8b94a6;--text:#f4f7fb;--accent:#a7ff4f;--danger:#ff6575;--blue:#6fa8ff}
*{box-sizing:border-box}html{background:var(--bg);scroll-behavior:smooth}body{margin:0;min-height:100vh;background:radial-gradient(circle at 78% 2%,rgba(126,255,71,.09),transparent 27rem),radial-gradient(circle at 8% 30%,rgba(91,116,255,.07),transparent 24rem),var(--bg);color:var(--text)}button,input,textarea{font:inherit}.app-bg{position:fixed;inset:0;pointer-events:none;opacity:.3;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:40px 40px}.shell{position:relative;max-width:1280px;margin:auto;padding:22px 24px 48px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:flex;align-items:center;gap:11px;color:var(--text);text-decoration:none}.brand-mark{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;background:var(--accent);color:#071006;font-weight:950;font-size:20px}.brand strong{display:block;font-size:18px}.brand small{display:block;color:#70798b;font-size:8px;font-weight:800;letter-spacing:.18em}.top-actions{display:flex;align-items:center;gap:14px}.connection{display:flex;align-items:center;gap:7px;color:#aab2c0;font-size:12px}.connection i{width:7px;height:7px;border-radius:50%;background:#8b94a6}.connection.ok i{background:var(--accent)}.connection.bad i{background:var(--danger)}
.button{border:1px solid #343c4b;background:#171c25;color:#e9edf4;border-radius:10px;padding:10px 14px;cursor:pointer;font-weight:750;transition:.18s ease;white-space:nowrap}.button:hover{transform:translateY(-1px);border-color:#4a5568}.button:disabled{opacity:.45;cursor:not-allowed;transform:none}.button-primary{background:var(--accent);border-color:var(--accent);color:#091007}.button-ghost{background:transparent}.button-danger{border-color:rgba(255,101,117,.35);color:#ff8794;background:rgba(255,101,117,.06)}.button.small{padding:7px 10px;font-size:11px}.button.full{width:100%}
.hero{padding:62px 0 35px;display:flex;justify-content:space-between;align-items:flex-end;gap:30px}.eyebrow{margin:0 0 8px;color:#788296;font-size:10px;font-weight:900;letter-spacing:.18em}.hero h1{font-size:clamp(38px,6vw,70px);line-height:.98;letter-spacing:-.055em;margin:0;max-width:800px}.hero h1 span{color:var(--accent)}.hero-copy{max-width:710px;color:#929bad;font-size:14px;line-height:1.7;margin:18px 0 0}.hero-badge{border:1px solid var(--line);background:rgba(17,21,29,.7);padding:10px 13px;border-radius:999px;color:#9da6b6;font-size:11px;white-space:nowrap}.pulse{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);margin-right:7px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px}.stats article{background:rgba(15,18,25,.72);border:1px solid var(--line);border-radius:12px;padding:15px 16px}.stats span{font-size:9px;font-weight:850;letter-spacing:.14em;color:#697386}.stats strong{display:block;font-size:19px;margin:7px 0 2px}.stats small{color:#747e91;font-size:10px}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:12px}.main-column,.side-column{display:flex;flex-direction:column;gap:12px}.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 15px 50px rgba(0,0,0,.12)}.panel-head{padding:19px 20px 14px;display:flex;align-items:flex-start;justify-content:space-between;gap:15px}.panel-head.compact{padding-bottom:13px}.panel h2{font-size:17px;margin:0}.step-chip{font-size:8px;font-weight:900;letter-spacing:.13em;color:#818b9d;border:1px solid #303746;padding:6px 8px;border-radius:6px}
.source-controls{display:flex;align-items:end;gap:10px;padding:4px 20px 13px}.field{display:flex;flex:1;flex-direction:column;gap:7px;padding:0 20px 12px}.source-controls .field{padding:0}.field span{font-size:10px;color:#7e889a;font-weight:700}.field input,.field textarea{width:100%;background:#0b0e14;border:1px solid #303746;color:#fff;border-radius:9px;padding:11px 12px;outline:none;resize:vertical}.field input:focus,.field textarea:focus{border-color:#71805d;box-shadow:0 0 0 3px rgba(167,255,79,.06)}.status{min-height:22px;padding:0 20px;font-size:11px;color:#818b9d}.status.error{color:#ff8491}.status.success{color:#a8f779}
.vod-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;padding:0 20px 20px}.vod-card{position:relative;border:1px solid #2a313e;background:#10141b;border-radius:11px;padding:13px;transition:.18s}.vod-card.selected{border-color:#5e744b;background:#141a15}.vod-thumb{height:90px;margin:-13px -13px 11px;border-radius:10px 10px 0 0;overflow:hidden;background:#171c25}.vod-thumb img{width:100%;height:100%;object-fit:cover;display:block}.vod-title{font-size:13px;font-weight:750;line-height:1.35;min-height:36px}.vod-meta{display:flex;gap:7px;flex-wrap:wrap;color:#727d90;font-size:10px;margin:8px 0 12px}.vod-actions{display:flex;justify-content:space-between;align-items:center;gap:8px}.vod-actions .button{font-size:10px;padding:7px 9px}.selected-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 9px rgba(167,255,79,.8)}.empty-state{grid-column:1/-1;text-align:center;border:1px dashed #2c3441;border-radius:11px;padding:32px 15px;color:#7d8798}.empty-icon{font-size:28px;color:#566071;margin-bottom:7px}.empty-state strong{display:block;color:#aeb6c3;font-size:12px}.empty-state p{font-size:10px;margin:6px 0 0}
.pipeline{padding:5px 20px 20px;display:flex;align-items:center;gap:7px;overflow-x:auto}.pipe-item{min-width:135px;display:grid;grid-template-columns:25px 34px 1fr;align-items:center;gap:8px;border:1px solid #292f3b;background:#10141b;border-radius:10px;padding:10px}.pipe-item>b{font-size:8px;color:#596477}.pipe-icon{width:31px;height:31px;display:grid;place-items:center;border-radius:8px;background:#191f29;color:var(--accent);font-size:10px;font-weight:900}.pipe-item strong{font-size:10px;display:block}.pipe-item small{display:block;color:#6f798a;font-size:8px;margin-top:3px;line-height:1.25}.pipe-line{height:1px;min-width:12px;background:#2d3542}
.job-row{display:grid;grid-template-columns:minmax(0,1fr) 100px 85px 70px;align-items:center;gap:12px;border-top:1px solid #222936;padding:13px 20px}.job-row:first-child{border-top:0}.job-name{font-size:11px;font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.job-id{font-size:8px;color:#626d7e;margin-top:4px}.job-stage{font-size:9px;color:#8e98aa}.empty-row{padding:28px 20px;color:#697386;text-align:center;font-size:11px}.status-pill{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:5px 8px;font-size:8px;font-weight:900;letter-spacing:.08em}.status-pill.neutral{background:#202631;color:#8b96a8}.status-pill.active{background:rgba(167,255,79,.1);color:var(--accent)}.status-pill.done{background:rgba(111,168,255,.1);color:#8ebcff}.status-pill.failed{background:rgba(255,101,117,.1);color:#ff8592}
.preview{height:205px;margin:0 20px;border-radius:11px;position:relative;overflow:hidden;border:1px solid #29303d;background:#090c12}.preview video,.preview img{width:100%;height:100%;object-fit:cover;display:block}.preview-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:28px 28px}.preview-content{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:linear-gradient(180deg,transparent 30%,rgba(0,0,0,.72))}.preview-play{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:rgba(167,255,79,.13);color:var(--accent);margin-bottom:10px}.preview-content strong{font-size:12px}.preview-content small{color:#a0a9b8;font-size:9px;margin-top:5px}.selected-meta{padding:13px 20px;display:grid;gap:8px}.selected-meta div{display:flex;justify-content:space-between;gap:12px}.selected-meta span{color:#687386;font-size:9px}.selected-meta strong{max-width:240px;text-align:right;font-size:9px;color:#b8c0cd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.selected-panel .full{margin:0 20px 20px;width:calc(100% - 40px)}
.progress-empty{padding:17px 20px 25px;text-align:center}.ring{width:46px;height:46px;display:grid;place-items:center;border:1px solid #36404e;border-radius:50%;color:#758095;margin:0 auto 10px}.progress-empty strong{font-size:11px}.progress-empty p{font-size:9px;line-height:1.5;color:#697486;max-width:250px;margin:5px auto}.job-title{padding:0 20px 12px;font-size:11px;font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.progress-track{height:5px;margin:0 20px;background:#252c38;border-radius:99px;overflow:hidden}.progress-track span{display:block;width:0;height:100%;background:var(--accent);border-radius:inherit;transition:width .3s}.progress-label{display:flex;justify-content:space-between;padding:7px 20px 12px;color:#778195;font-size:9px}.progress-label b{color:#c5cbd5}.progress-steps{padding:0 20px 4px;display:grid;grid-template-columns:repeat(5,1fr);gap:3px}.progress-steps span{height:4px;border-radius:4px;background:#272e39}.progress-steps span.on{background:var(--accent)}.job-error{margin:10px 20px 0;padding:9px;border:1px solid rgba(255,101,117,.25);background:rgba(255,101,117,.06);border-radius:8px;color:#ff9aa5;font-size:9px}
.review-panel{padding-bottom:17px}.review-media{margin:0 20px 12px;border:1px solid #29303d;border-radius:10px;overflow:hidden;background:#090c12}.review-media video{display:block;width:100%;max-height:230px;background:#000}.thumb-preview{margin:0 20px 12px;min-height:80px;border:1px dashed #303746;border-radius:9px;overflow:hidden}.thumb-preview img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}.review-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 20px}.review-note{font-size:8px;color:#687386;line-height:1.5;margin:10px 20px 0}.guard-panel{padding:15px 18px}.guard{display:flex;gap:10px;align-items:flex-start}.guard-icon{width:28px;height:28px;display:grid;place-items:center;border-radius:8px;background:rgba(167,255,79,.1);color:var(--accent);font-weight:900}.guard strong{font-size:10px}.guard p{font-size:9px;color:#697486;line-height:1.45;margin:3px 0 0}.guard code{color:#9ba5b5}footer{display:flex;justify-content:space-between;gap:15px;color:#525c6d;font-size:9px;padding:22px 3px}
@media(max-width:960px){.layout{grid-template-columns:1fr}.side-column{display:grid;grid-template-columns:1fr 1fr}.selected-panel,.review-panel,.guard-panel{grid-column:1/-1}.hero{padding-top:45px}.stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:650px){.shell{padding:12px 10px calc(90px + env(safe-area-inset-bottom))}.topbar{position:sticky;top:0;z-index:20;padding:8px 2px;background:rgba(8,10,15,.88);backdrop-filter:blur(14px)}.brand-mark{width:34px;height:34px}.top-actions .connection{display:none}.top-actions .button{padding:9px 10px;font-size:10px}.hero{display:block;padding:34px 3px 22px}.hero h1{font-size:40px}.hero-copy{font-size:12px;line-height:1.6}.hero-badge{display:inline-block;margin-top:15px}.stats{grid-template-columns:1fr 1fr;gap:7px}.stats article{padding:12px}.stats strong{font-size:16px}.stats small{font-size:9px}.panel{border-radius:12px}.panel-head{padding:15px 13px 11px}.source-controls{display:block;padding:4px 13px 10px}.source-controls .button{width:100%;margin-top:8px}.field{padding-left:13px;padding-right:13px}.source-controls .field{padding:0}.status{padding:0 13px}.vod-grid{grid-template-columns:1fr;padding:0 13px 13px}.vod-thumb{height:150px}.vod-title{min-height:0}.side-column{display:flex}.preview{height:210px;margin:0 13px}.selected-meta{padding:12px 13px}.selected-panel .full{margin:0 13px 13px;width:calc(100% - 26px)}.job-row{grid-template-columns:minmax(0,1fr) auto;gap:7px;padding:12px 13px}.job-row .job-stage{display:none}.job-row .button{font-size:9px}.pipeline{padding:4px 13px 13px}.pipe-item{min-width:124px}.review-media{margin:0 13px 12px}.review-actions{grid-template-columns:1fr;padding:0 13px}.review-note{margin-left:13px;margin-right:13px}.thumb-preview{margin-left:13px;margin-right:13px}footer{display:block;line-height:1.7;padding:18px 3px}.hero-badge{font-size:10px}}
@media(max-width:380px){.hero h1{font-size:35px}.stats article{padding:10px}.stats small{display:none}.top-actions .button{font-size:9px}.vod-thumb{height:125px}}
