:root { --ink:#111a2d; --muted:#71809a; --sidebar:#121a2c; --sidebar-line:#26324a; --surface:#f4f7fb; --panel:#fff; --line:#e3e9f2; --cobalt:#2873ea; --cobalt-soft:#e8f0ff; --emerald:#0f9b75; --emerald-soft:#e5f5ef; --violet:#7758df; --violet-soft:#eeeaff; --amber:#ed9b22; --amber-soft:#fff2df; --red:#d74b5f; --shadow:0 12px 32px rgba(32,53,88,.07); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { background:var(--surface); color:var(--ink); font-family:"IBM Plex Sans",sans-serif; margin:0; min-height:100vh; }
a { color:inherit; text-decoration:none; }
button,input { font:inherit; }
.app-shell { display:flex; min-height:100vh; }
.sidebar { background:var(--sidebar); color:#d8e2f5; display:flex; flex:0 0 248px; flex-direction:column; min-height:100vh; padding:28px 18px 22px; position:sticky; top:0; height:100vh; }
.brand { align-items:center; display:flex; gap:12px; margin:2px 12px 44px; }
.brand-mark { align-items:center; background:linear-gradient(135deg,#4e9cff,#2665dd); border-radius:12px; box-shadow:0 9px 22px rgba(34,105,228,.28); color:#fff; display:flex; font:700 20px/1 "Space Mono",monospace; height:44px; justify-content:center; width:44px; }
.brand strong { color:#fff; display:block; font-size:20px; letter-spacing:-.6px; }.brand small { color:#8392ad; display:block; font-size:9px; font-weight:700; letter-spacing:1.3px; margin-top:4px; }
.side-nav { display:grid; gap:6px; }.side-nav a { align-items:center; border:1px solid transparent; border-radius:9px; color:#a8b5cb; display:flex; font-size:14px; font-weight:600; gap:13px; padding:13px 14px; }.side-nav a:hover { background:#1b2740; color:#fff; }.side-nav a.active { background:#223252; border-color:#2c4167; color:#fff; box-shadow:0 6px 20px rgba(0,0,0,.14); }.nav-icon { color:#78a5ff; font-size:18px; line-height:1; text-align:center; width:18px; }
.sidebar-footer { align-items:center; border-top:1px solid var(--sidebar-line); display:flex; gap:10px; margin-top:auto; padding:19px 12px 0; }.sidebar-footer strong { color:#eaf0fb; display:block; font-size:11px; }.sidebar-footer small { color:#8797b2; display:block; font-size:10px; margin-top:3px; }.live-dot { background:#3dd59f; border-radius:50%; box-shadow:0 0 0 5px rgba(61,213,159,.12); height:8px; width:8px; }
.workspace { min-width:0; width:100%; }.topbar { align-items:center; background:rgba(255,255,255,.92); border-bottom:1px solid var(--line); display:flex; height:78px; justify-content:space-between; padding:0 38px; position:sticky; top:0; z-index:3; }.search-shell { align-items:center; background:#eef2f8; border-radius:10px; color:#92a0b8; display:flex; gap:9px; max-width:360px; padding:0 14px; width:100%; }.search-shell span { font-size:23px; line-height:1; }.search-shell input { background:transparent; border:0; color:var(--ink); font-size:13px; height:42px; outline:0; width:100%; }.topbar-actions { align-items:center; display:flex; gap:13px; }.channel-link { color:#57708f; font-size:13px; font-weight:600; }.refresh-button,.button { border:0; border-radius:9px; cursor:pointer; font-size:13px; font-weight:700; min-height:40px; padding:9px 14px; }.refresh-button { background:var(--cobalt); box-shadow:0 8px 18px rgba(40,115,234,.2); color:#fff; }.refresh-button:hover,.button.primary:hover { background:#155bd0; }
main { margin:0 auto; max-width:1470px; padding:43px 40px 64px; }.dashboard-intro { align-items:end; display:flex; justify-content:space-between; margin-bottom:29px; }.eyebrow { color:#8a98ad; font-size:10px; font-weight:700; letter-spacing:1.25px; margin:0 0 9px; text-transform:uppercase; }h1,h2 { letter-spacing:-.6px; margin:0; }h1 { font-size:clamp(31px,4vw,42px); line-height:1.05; }h2 { font-size:20px; line-height:1.2; }.dashboard-intro p:not(.eyebrow) { color:var(--muted); font-size:15px; margin:9px 0 0; }.date-chip { align-items:center; background:#e9eef5; border-radius:10px; color:#48617e; display:flex; font-size:12px; font-weight:700; gap:8px; padding:13px 16px; }
.stats { display:grid; gap:16px; grid-template-columns:repeat(4,minmax(0,1fr)); margin-bottom:26px; }.metric-card { align-items:flex-start; background:var(--panel); border:1px solid var(--line); border-radius:15px; box-shadow:var(--shadow); display:flex; gap:15px; min-height:145px; padding:20px; }.metric-icon { align-items:center; border-radius:9px; display:flex; flex:0 0 43px; font-size:22px; height:43px; justify-content:center; }.metric-card p { color:#6e7b90; font-size:12px; font-weight:600; margin:3px 0 9px; }.metric-card strong { display:block; font-size:25px; letter-spacing:-.7px; line-height:1.05; }.metric-card small { color:#8390a4; display:block; font-size:10px; margin-top:8px; }.metric-blue .metric-icon { background:var(--cobalt-soft); color:var(--cobalt); }.metric-green .metric-icon { background:var(--emerald-soft); color:var(--emerald); }.metric-violet .metric-icon { background:var(--violet-soft); color:var(--violet); }.metric-amber .metric-icon { background:var(--amber-soft); color:var(--amber); }
.overview-grid { display:grid; gap:20px; grid-template-columns:minmax(0,1.7fr) minmax(280px,.7fr); margin-bottom:24px; }.panel { background:var(--panel); border:1px solid var(--line); border-radius:15px; box-shadow:var(--shadow); padding:24px; }.panel-heading { align-items:start; display:flex; justify-content:space-between; margin-bottom:20px; }.table-note { color:#8390a4; font-size:11px; margin:2px 0 0; }.job-card { background:linear-gradient(110deg,#f8fbff,#f6f9ff); border:1px solid #e3ebf8; border-radius:12px; padding:18px; }.job-card-heading { align-items:center; display:flex; justify-content:space-between; }.job-card-heading strong { font:700 13px/1 "Space Mono",monospace; }.job-progress-track { background:#e2eaf6; border-radius:99px; height:8px; margin:18px 0 10px; overflow:hidden; }.job-progress-track span { background:linear-gradient(90deg,var(--cobalt),#70a0ff); border-radius:inherit; display:block; height:100%; transition:width .45s ease; width:0; }.job-detail { color:#71809a; font:11px/1.5 "Space Mono",monospace; margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.pipeline-steps { align-items:center; color:#9ba7b8; display:flex; font-size:11px; font-weight:700; gap:9px; margin-top:18px; }.pipeline-steps span { color:#526987; }.pipeline-steps b { background:#d9e3f2; height:1px; min-width:30px; }.status { align-items:center; display:inline-flex; font:700 10px/1 "Space Mono",monospace; gap:6px; letter-spacing:.2px; text-transform:uppercase; }.status i { background:#8ca0b9; border-radius:50%; height:7px; width:7px; }.status.success { color:var(--emerald); }.status.success i { background:var(--emerald); }.status.failed { color:var(--red); }.status.failed i { background:var(--red); }.status.rendering,.status.running,.status.preparing { color:var(--cobalt); }.status.rendering i,.status.running i,.status.preparing i { animation:pulse 1.2s infinite; background:var(--cobalt); }.status.uploading { color:#bd7617; }.status.uploading i { animation:pulse 1.2s infinite; background:var(--amber); }@keyframes pulse {50% {opacity:.3;}}
.schedule-panel { background:linear-gradient(145deg,#17233b,#263a62); border-color:#263a62; color:#fff; }.schedule-panel .eyebrow { color:#91a8cf; }.schedule-panel h2,.schedule-panel p { color:#fff; }.schedule-badge { background:rgba(127,169,255,.18); border:1px solid rgba(161,192,255,.25); border-radius:99px; color:#a9c5ff; font:700 9px "Space Mono",monospace; letter-spacing:.7px; padding:6px 8px; }.schedule-time { color:#fff; font-size:43px; font-weight:700; letter-spacing:-1.6px; line-height:1; margin:28px 0 8px; }.schedule-time small { color:#a9c5ff; font:700 12px "Space Mono",monospace; letter-spacing:0; }.schedule-panel>p { color:#b5c3dc; font-size:12px; line-height:1.5; }.panel-link { align-items:center; border-top:1px solid rgba(190,210,245,.18); color:#dce9ff; display:flex; font-size:12px; font-weight:700; justify-content:space-between; margin-top:25px; padding-top:15px; }.panel-link span { color:#79a7ff; font-size:17px; }
.settings-section { margin-bottom:24px; }.settings-card { align-items:end; display:grid; gap:14px; grid-template-columns:minmax(190px,1.3fr) minmax(165px,1fr) minmax(180px,1fr) minmax(180px,1fr); }.toggle-row,.field { display:block; }.toggle-row strong,.field span { display:block; font-size:12px; font-weight:700; }.toggle-row small,.field small { color:#8390a4; display:block; font-size:10px; line-height:1.35; margin-top:4px; }.toggle-row input { accent-color:var(--cobalt); float:right; height:19px; margin:-24px 0 0; width:19px; }.field input { background:#f8faff; border:1px solid #dce5f1; border-radius:8px; margin-top:7px; padding:9px 10px; width:100%; }.schedule-fixed strong { display:block; font-size:12px; margin-top:8px; }.settings-actions { display:flex; gap:7px; grid-column:1/-1; }.button.primary { background:var(--cobalt); color:#fff; }.button.secondary { background:#edf2f8; color:#49617e; }.form-message { color:#71809a; font-size:11px; grid-column:1/-1; margin:0; }.form-message.error,.error-text { color:var(--red); }
.pool-section,.runs-section { margin-bottom:24px; }.pool-summary { background:#f3f7fb; border:1px solid #e5edf5; border-radius:9px; color:#506781; font:12px "Space Mono",monospace; margin-bottom:14px; padding:13px; }.table-shell { border:1px solid var(--line); border-radius:10px; overflow-x:auto; }.runs-table { border-collapse:collapse; min-width:900px; table-layout:fixed; width:100%; }.runs-table th { background:#f7f9fc; color:#8390a4; font-size:10px; font-weight:700; letter-spacing:.7px; padding:13px 14px; text-align:left; text-transform:uppercase; }.runs-table th:nth-child(1) { width:110px; }.runs-table th:nth-child(2) { width:36%; }.runs-table th:nth-child(3) { width:105px; }.runs-table th:nth-child(4) { width:80px; }.runs-table th:nth-child(5),.runs-table th:nth-child(6) { width:145px; }.runs-table th:nth-child(7) { width:105px; }.runs-table td { border-top:1px solid #edf1f6; font-size:12px; padding:13px 14px; vertical-align:middle; }.runs-table tbody tr:hover { background:#fbfdff; }.video-cell { align-items:center; display:flex; gap:12px; min-width:0; }.thumb { background:#e7edf5; border-radius:6px; display:block; flex:0 0 55px; height:42px; overflow:hidden; }.thumb img { height:100%; object-fit:cover; width:100%; }.empty-thumb { align-items:center; color:var(--muted); display:flex; justify-content:center; }.video-cell strong { display:block; font-size:12px; line-height:1.25; max-width:360px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.video-cell small,td small { color:#8390a4; display:block; font-size:10px; margin-top:4px; max-width:340px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.file-details { color:#8390a4; font-size:10px; margin-top:5px; max-width:340px; }.file-details summary { cursor:pointer; font:10px "Space Mono",monospace; }.file-details ul { background:#f7f9fc; border:1px solid var(--line); list-style:none; margin:6px 0 0; max-height:180px; overflow:auto; padding:6px 8px; }.file-details li { display:flex; gap:12px; justify-content:space-between; line-height:1.6; }.file-details li span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.file-details li strong { color:var(--ink); font-weight:500; white-space:nowrap; }.mono,time { color:#667895; font:10px/1.4 "Space Mono",monospace; }.table-actions { display:flex; flex-wrap:wrap; gap:6px; }.table-action { background:#eef3fa; border:1px solid #dbe5f3; border-radius:6px; cursor:pointer; display:inline-block; font-size:11px; font-weight:700; padding:6px 8px; white-space:nowrap; }.table-action:hover { background:var(--cobalt); color:#fff; }.empty-cell { color:#8390a4; padding:32px!important; text-align:center; }
.prompt-dialog { background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:0 20px 70px rgba(19,39,74,.25); color:var(--ink); max-width:min(780px,calc(100vw - 32px)); padding:24px; width:100%; }.prompt-dialog::backdrop { background:rgba(10,21,39,.58); }.dialog-heading { align-items:start; display:flex; justify-content:space-between; margin-bottom:18px; }.dialog-close { background:transparent; border:0; color:var(--ink); cursor:pointer; font-size:28px; line-height:.75; padding:4px; }.prompt-dialog pre { background:#f5f8fc; border:1px solid var(--line); font:11px/1.65 "Space Mono",monospace; margin:0; max-height:55vh; overflow:auto; padding:14px; white-space:pre-wrap; }
@media (max-width:1100px) { .sidebar { flex-basis:205px; }.stats { grid-template-columns:repeat(2,minmax(0,1fr)); }.settings-card { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:760px) { .app-shell { display:block; }.sidebar { height:auto; min-height:0; padding:16px; position:static; }.brand { margin:0 0 15px; }.side-nav { display:flex; gap:5px; overflow-x:auto; }.side-nav a { flex:0 0 auto; padding:9px 10px; }.side-nav a:not(.active) { display:none; }.sidebar-footer { display:none; }.topbar { height:62px; padding:0 16px; }.search-shell { max-width:none; }.channel-link { display:none; }main { padding:27px 16px 42px; }.dashboard-intro { align-items:start; flex-direction:column; gap:16px; }.overview-grid { grid-template-columns:1fr; }.settings-card { grid-template-columns:1fr; }.stats { gap:10px; }.metric-card { min-height:116px; padding:15px; }.metric-card strong { font-size:21px; }.panel { border-radius:12px; padding:17px; }.pipeline-steps { gap:6px; }.pipeline-steps b { min-width:14px; }.runs-table { min-width:820px; } }