:root {
  color-scheme: dark;
  --ground: #08060b;
  --rail: rgba(255,255,255,.035);
  --panel: rgba(21,16,25,.78);
  --panel-strong: #17121b;
  --line: rgba(255,255,255,.11);
  --muted: rgba(248,244,250,.62);
  --subtle: rgba(248,244,250,.38);
  --text: #fbf7fc;
  --pink: #f0a1ff;
  --pink-soft: rgba(240,161,255,.13);
  --cyan: #66d9ff;
  --green: #53e39b;
  --amber: #ffd27a;
  --danger: #ff8585;
  --shadow: 0 24px 80px rgba(0,0,0,.38);
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--ground); color: var(--text); font-family: "DM Sans", system-ui, sans-serif; }
button, input, textarea, select { font: inherit; }
button { color: inherit; cursor: pointer; }
.shell { min-height: 100vh; display: flex; background: radial-gradient(circle at 72% -10%, rgba(240,161,255,.11), transparent 34rem), var(--ground); }
.rail { width: 82px; border-right: 1px solid var(--line); background: var(--rail); display:flex; flex-direction:column; align-items:center; padding: 18px 12px; gap: 22px; position:fixed; inset:0 auto 0 0; z-index:2; }
.brand { display:grid; place-items:center; width:48px; height:48px; border:1px solid var(--line); border-radius:13px; background:linear-gradient(145deg,rgba(240,161,255,.32),rgba(87,72,95,.14)); box-shadow:0 0 30px rgba(240,161,255,.16); font:700 16px "Space Mono",monospace; color:var(--pink); }
.nav { display:flex; flex-direction:column; gap:7px; width:100%; flex:1; }
.nav button, .rail-footer button { width:56px; height:47px; border:1px solid transparent; border-radius:10px; background:transparent; color:var(--muted); font-size:17px; transition:.18s ease; }
.nav button:hover, .rail-footer button:hover, .nav button.active { color:var(--text); background:var(--pink-soft); border-color:rgba(240,161,255,.3); }
.nav small { display:none; }
.rail-footer { display:grid; gap:8px; }
.content { margin-left:82px; min-height:100vh; width:calc(100% - 82px); }
.topbar { height:72px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; padding:0 34px; position:sticky; top:0; z-index:1; backdrop-filter:blur(18px); background:rgba(8,6,11,.73); }
.eyebrow { color:var(--pink); font:700 10px "Space Mono",monospace; letter-spacing:.16em; text-transform:uppercase; }
.topbar h1 { margin:6px 0 0; font-size:22px; letter-spacing:-.03em; }
.top-actions { display:flex; align-items:center; gap:10px; }
.pill { display:inline-flex; align-items:center; gap:8px; color:var(--muted); border:1px solid var(--line); padding:8px 11px; border-radius:999px; font:11px "Space Mono",monospace; }
.dot { width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 12px currentColor; }
.avatar { width:34px; height:34px; border-radius:50%; border:1px solid rgba(240,161,255,.4); background:var(--pink-soft); color:var(--pink); font-weight:700; }
.screen { padding:32px 34px 44px; max-width:1700px; margin:auto; }
.hero { display:flex; justify-content:space-between; gap:24px; align-items:flex-end; margin-bottom:28px; }
.hero h2 { margin:8px 0 7px; font-size:clamp(28px,4vw,48px); letter-spacing:-.055em; line-height:1; }
.hero p { color:var(--muted); max-width:620px; margin:0; line-height:1.6; }
.button { border:1px solid var(--line); background:rgba(255,255,255,.06); border-radius:8px; padding:11px 15px; font-weight:700; transition:.18s ease; }
.button:hover { border-color:rgba(240,161,255,.65); transform:translateY(-1px); }
.button.primary { color:#1d0e23; border-color:transparent; background:linear-gradient(135deg,var(--pink),#dba7ff); }
.button.ghost { background:transparent; color:var(--muted); }
.grid { display:grid; gap:16px; }
.metrics { grid-template-columns:repeat(4,minmax(0,1fr)); margin-bottom:16px; }
.card { border:1px solid var(--line); background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018)); border-radius:13px; padding:18px; box-shadow:var(--shadow); }
.metric-label { color:var(--muted); font-size:12px; }
.metric-value { font-size:30px; margin-top:9px; letter-spacing:-.04em; }
.metric-meta { color:var(--subtle); font:10px "Space Mono",monospace; margin-top:12px; }
.main-grid { grid-template-columns:minmax(0,1.5fr) minmax(300px,.8fr); align-items:stretch; }
.section-title { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.section-title h3 { margin:0; font-size:16px; }
.section-title span { color:var(--subtle); font:10px "Space Mono",monospace; }
.pipeline { min-height:340px; display:flex; flex-direction:column; }
.bars { display:flex; align-items:flex-end; gap:7px; height:180px; padding:12px 2px 0; border-bottom:1px solid var(--line); }
.bar { flex:1; min-width:8px; height:var(--height); border-radius:5px 5px 2px 2px; background:linear-gradient(180deg,var(--pink),rgba(240,161,255,.08)); opacity:.8; }
.chart-caption { display:flex; justify-content:space-between; color:var(--subtle); font:10px "Space Mono",monospace; margin-top:13px; }
.queue-list { display:grid; gap:10px; }
.queue-item { display:grid; grid-template-columns:42px minmax(0,1fr) auto; gap:12px; align-items:center; border:1px solid var(--line); border-radius:9px; padding:11px; background:rgba(255,255,255,.025); }
.queue-icon { width:42px; height:42px; border-radius:8px; display:grid; place-items:center; background:repeating-linear-gradient(135deg,rgba(255,255,255,.09) 0 7px,transparent 7px 14px); color:var(--pink); }
.queue-item strong { display:block; font-size:12px; line-height:1.35; }
.queue-item small { color:var(--subtle); font:9px "Space Mono",monospace; }
.progress { height:5px; border-radius:999px; background:rgba(255,255,255,.1); overflow:hidden; margin-top:8px; }
.progress i { display:block; height:100%; background:linear-gradient(90deg,var(--cyan),var(--pink)); width:var(--progress); }
.modules { grid-template-columns:repeat(5,minmax(0,1fr)); margin-top:16px; }
.module { min-height:135px; display:flex; flex-direction:column; justify-content:space-between; }
.module .icon { color:var(--pink); font-size:22px; }
.module strong { font-size:14px; }
.module p { margin:6px 0 0; color:var(--muted); font-size:11px; line-height:1.45; }
.studio-shell { display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:16px; }
.toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:15px; flex-wrap:wrap; }
.toolbar .group { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.table-wrap { overflow:auto; border:1px solid var(--line); border-radius:11px; }
.jobs-table { width:100%; border-collapse:collapse; min-width:720px; }
.jobs-table th, .jobs-table td { text-align:left; padding:13px 12px; border-bottom:1px solid var(--line); vertical-align:top; }
.jobs-table th { color:var(--subtle); font:10px "Space Mono",monospace; text-transform:uppercase; letter-spacing:.08em; }
.jobs-table td { color:var(--muted); font-size:12px; }
.jobs-table tr:last-child td { border-bottom:0; }
.jobs-table tr.selected { background:var(--pink-soft); }
.status { display:inline-flex; gap:7px; align-items:center; font:10px "Space Mono",monospace; text-transform:uppercase; }
.status b { width:7px; height:7px; border-radius:50%; background:var(--amber); }
.status.succeeded b { background:var(--green); }.status.failed b { background:var(--danger); }.status.running b { background:var(--cyan); animation:pulse 1.5s infinite; }
.inspector { position:sticky; top:90px; height:max-content; }
.preview { min-height:220px; border:1px dashed var(--line); border-radius:10px; display:grid; place-items:center; color:var(--subtle); margin-bottom:16px; background:radial-gradient(circle at 50% 30%,rgba(240,161,255,.15),transparent 60%); }
.inspector dl { margin:0; display:grid; grid-template-columns:1fr 1fr; gap:13px; }.inspector dt { color:var(--subtle); font:9px "Space Mono",monospace; text-transform:uppercase; }.inspector dd { margin:3px 0 0; font-size:12px; }
.form-grid { display:grid; gap:12px; }.field { display:grid; gap:6px; }.field label { color:var(--muted); font-size:12px; }.field input, .field textarea, .field select { color:var(--text); background:rgba(0,0,0,.2); border:1px solid var(--line); border-radius:8px; padding:11px; outline:none; }.field textarea { min-height:130px; resize:vertical; }.field input:focus, .field textarea:focus, .field select:focus { border-color:var(--pink); box-shadow:0 0 0 3px var(--pink-soft); }
.modal-backdrop { position:fixed; inset:0; z-index:5; background:rgba(0,0,0,.68); backdrop-filter:blur(12px); display:grid; place-items:center; padding:20px; }.modal { width:min(620px,100%); max-height:90vh; overflow:auto; border:1px solid var(--line); border-radius:14px; padding:23px; background:var(--panel-strong); box-shadow:var(--shadow); }.modal-header { display:flex; justify-content:space-between; gap:15px; margin-bottom:18px; }.modal h2 { margin:4px 0; }.modal p { margin:0; color:var(--muted); font-size:12px; line-height:1.5; }.modal-actions { display:flex; justify-content:flex-end; gap:9px; margin-top:19px; }.workspace-list { display:grid; gap:9px; margin:17px 0; }.workspace { display:flex; justify-content:space-between; gap:12px; align-items:center; border:1px solid var(--line); border-radius:9px; padding:12px; background:rgba(255,255,255,.025); }.workspace.active { background:var(--pink-soft); border-color:rgba(240,161,255,.4); }.workspace small { display:block; color:var(--subtle); font:9px "Space Mono",monospace; margin-top:5px; }
.login { min-height:100vh; display:grid; place-items:center; padding:24px; background:radial-gradient(circle at 50% 10%,rgba(240,161,255,.18),transparent 35rem),var(--ground); }.login-card { width:min(460px,100%); text-align:center; }.login-mark { width:76px; height:76px; display:grid; place-items:center; margin:0 auto 24px; border-radius:21px; border:1px solid rgba(240,161,255,.35); color:var(--pink); font:700 26px "Space Mono",monospace; background:linear-gradient(145deg,rgba(240,161,255,.28),rgba(255,255,255,.03)); box-shadow:0 0 80px rgba(240,161,255,.18); }.login h1 { font-size:42px; letter-spacing:-.06em; margin:0; }.login p { color:var(--muted); line-height:1.6; }.login .button { margin-top:13px; width:100%; }.hidden { display:none !important; }
.archive-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }.archive-card { display:grid; gap:10px; }.archive-preview { min-height:180px; border:1px solid var(--line); border-radius:10px; overflow:hidden; display:grid; place-items:center; background:rgba(0,0,0,.2); color:var(--subtle); }.archive-preview img,.archive-preview video { width:100%; height:180px; object-fit:cover; }.archive-actions { display:flex; gap:8px; flex-wrap:wrap; }.inspector-output { display:grid; gap:10px; margin-bottom:14px; }.inspector-output img,.inspector-output video { width:100%; max-height:260px; object-fit:contain; border-radius:8px; border:1px solid var(--line); }
@keyframes pulse { 50% { opacity:.25; } }
@media (max-width: 980px) { .metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }.main-grid, .studio-shell { grid-template-columns:1fr; }.inspector { position:static; }.modules,.archive-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width: 640px) { .rail { width:62px; padding:13px 8px; }.brand { width:44px; height:44px; }.nav button, .rail-footer button { width:46px; }.content { margin-left:62px; width:calc(100% - 62px); }.topbar { padding:0 16px; height:64px; }.topbar h1 { font-size:17px; }.topbar .pill { display:none; }.screen { padding:23px 15px 32px; }.hero { align-items:flex-start; flex-direction:column; }.hero h2 { font-size:34px; }.metrics { grid-template-columns:1fr 1fr; gap:10px; }.card { padding:14px; }.metric-value { font-size:24px; }.modules,.archive-grid { grid-template-columns:1fr 1fr; }.module { min-height:120px; }.queue-item { grid-template-columns:36px minmax(0,1fr); }.queue-item .button { grid-column:2; justify-self:start; }.studio-shell { gap:12px; }.jobs-table { min-width:0; display:block; }.jobs-table thead { display:none; }.jobs-table tbody, .jobs-table tr, .jobs-table td { display:block; width:100%; }.jobs-table tr { border-bottom:1px solid var(--line); padding:12px; }.jobs-table tr:last-child { border-bottom:0; }.jobs-table td { border:0; padding:3px 0; }.jobs-table td:first-child { padding-top:0; }.jobs-table td:last-child { font-family:"Space Mono",monospace; font-size:10px; }.inspector { max-height:55vh; overflow:auto; }.inspector.open { position:fixed; inset:auto 10px 10px 72px; z-index:4; box-shadow:0 18px 80px #000; } }