@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');
:root{--bg:#070a12;--surface:#0d1320;--surface-2:#111a2a;--surface-3:#172238;--line:#1d2a43;--line-hi:#30456e;--text:#edf2ff;--muted:#8796b7;--blue:#4c78ff;--blue-hi:#6d92ff;--green:#32d583;--amber:#fdb022;--red:#ff6677;--cyan:#5dd9ef;--radius:12px;--font:'DM Sans',sans-serif;--mono:'IBM Plex Mono',monospace}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:radial-gradient(1000px 600px at 70% -20%,#142146 0,transparent 62%),var(--bg);color:var(--text);font-family:var(--font)}button,input,textarea,select{font:inherit}button{color:inherit}.app-shell{min-height:100vh}.topbar{height:62px;display:flex;align-items:center;gap:20px;padding:0 18px;border-bottom:1px solid var(--line);background:rgba(9,14,25,.92);backdrop-filter:blur(12px);position:sticky;top:0;z-index:20}.brand{display:flex;align-items:center;gap:10px;min-width:260px}.brand-mark{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:linear-gradient(145deg,var(--blue-hi),#3157d7);font:700 12px var(--mono);box-shadow:0 5px 20px rgba(76,120,255,.3)}.brand>span:last-child{display:grid;line-height:1.05}.brand b{font-size:15px}.brand small{font-size:9px;letter-spacing:.16em;color:var(--muted);margin-top:4px}.nav-tabs{display:flex;gap:3px;padding:4px;background:var(--surface);border:1px solid var(--line);border-radius:10px}.nav-item{border:0;background:transparent;color:var(--muted);padding:7px 12px;border-radius:7px;font-size:12px;font-weight:600;cursor:pointer}.nav-item:hover{color:var(--text)}.nav-item.active{background:var(--blue);color:white;box-shadow:0 3px 10px rgba(76,120,255,.28)}.metrics{display:flex;gap:7px;margin-left:auto}.metric{display:flex;align-items:baseline;gap:5px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:6px 10px;white-space:nowrap}.metric b{font:600 12px var(--mono)}.metric span{font-size:9px;color:var(--muted);text-transform:uppercase}.live-status{display:flex;gap:7px;align-items:center;color:var(--muted);font-size:11px;white-space:nowrap}.status-dot{width:7px;height:7px;border-radius:50%;background:var(--amber)}.status-dot.online{background:var(--green);box-shadow:0 0 0 4px rgba(50,213,131,.12)}.status-dot.offline{background:var(--red)}
.notice{position:fixed;top:74px;right:18px;z-index:100;max-width:460px;display:flex;align-items:flex-start;gap:14px;padding:13px 14px;border:1px solid #334b78;background:#101a2d;color:var(--text);border-radius:10px;box-shadow:0 18px 50px rgba(0,0,0,.45);font-size:13px}.notice.error{border-color:#6b3441;background:#28131a;color:#ffc4ca}.notice button{border:0;background:transparent;color:inherit;font-size:18px;cursor:pointer;line-height:1}.hidden{display:none!important}.page{display:none}.page.active{display:block}.studio-page.active{display:grid;grid-template-columns:330px minmax(0,1fr);height:calc(100vh - 62px);overflow:hidden}.composer-panel{height:100%;overflow:auto;padding:24px 20px 36px;border-right:1px solid var(--line);background:rgba(8,12,21,.72)}.panel-heading{margin-bottom:20px}.panel-heading h1,.workspace-bar h1,.section-heading h1{font-size:20px;letter-spacing:-.02em;margin:3px 0 4px}.panel-heading>p:last-child,.section-heading>div>p:last-child{color:var(--muted);font-size:12px}.eyebrow{margin:0;color:var(--blue-hi);font:600 10px var(--mono);letter-spacing:.14em}.stack{display:flex;flex-direction:column;gap:14px}.segmented{display:flex;background:var(--surface);border:1px solid var(--line);padding:4px;border-radius:9px}.segment{flex:1;border:0;background:transparent;color:var(--muted);padding:8px;border-radius:6px;font-size:12px;font-weight:700;cursor:pointer}.segment.active{background:var(--surface-3);color:var(--text);box-shadow:0 1px 4px #0006}label{position:relative;display:grid;gap:6px;color:#c4cee4;font-size:11px;font-weight:600}.field-count{position:absolute;right:0;color:var(--muted);font:10px var(--mono)}.input-box{width:100%;min-width:0;border:1px solid var(--line);border-radius:8px;background:#090e19;color:var(--text);padding:10px 11px;outline:0;font-size:13px}.input-box:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(76,120,255,.12)}textarea.input-box{resize:vertical;line-height:1.5}.prompt-box{min-height:130px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.hint,.muted,.empty-state{color:var(--muted)}.hint{font-size:11px;margin:-6px 0 0;line-height:1.45}.hint code{color:var(--blue-hi);font:10px var(--mono)}.upload-row{display:grid;grid-template-columns:1fr 1fr;gap:9px}.file-drop{min-width:0;border:1px dashed var(--line-hi);border-radius:8px;padding:10px;background:var(--surface);cursor:pointer}.file-drop:hover{border-color:var(--blue)}.file-drop input{position:absolute;opacity:0;width:1px;height:1px}.file-drop span{display:block;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:400}.model-summary{padding:11px;border:1px solid var(--line);border-radius:8px;background:var(--surface);display:grid;gap:5px}.model-summary strong{font-size:12px}.model-summary>span{color:var(--muted);font-size:10px;line-height:1.35}.badges{display:flex;gap:5px;flex-wrap:wrap}.badge{padding:3px 6px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font:500 9px var(--mono)}.badge.good{color:var(--green);border-color:#276342}.btn{border:1px solid transparent;border-radius:8px;padding:9px 13px;font-weight:700;font-size:12px;cursor:pointer;transition:.15s ease}.btn:hover{transform:translateY(-1px)}.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}.btn-primary{background:var(--blue);color:white;box-shadow:0 4px 15px rgba(76,120,255,.25)}.btn-primary:hover{background:var(--blue-hi)}.btn-secondary{background:var(--surface-2);border-color:var(--line);color:var(--text)}.btn-danger{background:#29151c;border-color:#61303b;color:#ff9caa}.btn-small{padding:6px 8px;font-size:10px}.btn-generate{display:flex;justify-content:center;align-items:center;gap:12px;padding:11px}.btn kbd{font:9px var(--mono);padding:2px 5px;border:1px solid #ffffff45;border-radius:4px;background:#0002}.dispatch-result{min-height:34px;padding:8px 10px;border-radius:7px;background:var(--surface);color:var(--muted);font-size:10px;line-height:1.4}.result-id{font:10px var(--mono);word-break:break-all;margin:4px 0 0}
.results-workspace{height:100%;min-width:0;display:flex;flex-direction:column}.workspace-bar{min-height:76px;display:flex;align-items:center;gap:20px;padding:12px 18px;border-bottom:1px solid var(--line);background:rgba(12,18,31,.72)}.workspace-bar h1{margin-bottom:0}.status-pills{display:flex;gap:6px;flex-wrap:wrap}.status-pill{display:flex;gap:5px;align-items:center;border:1px solid var(--line);border-radius:999px;padding:5px 8px;color:var(--muted);font:9px var(--mono)}.status-pill b{color:var(--text);font-size:10px}.status-pill.processing{border-color:#2d5770}.status-pill.completed{border-color:#276342}.status-pill.failed{border-color:#61303b}.workspace-actions{margin-left:auto;display:flex;align-items:center;gap:10px}.filter-tabs{display:flex;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:3px}.filter-tabs button{border:0;background:transparent;color:var(--muted);padding:6px 8px;border-radius:5px;font-size:10px;cursor:pointer}.filter-tabs button.active{background:var(--surface-3);color:var(--text)}.zoom-control{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:9px;text-transform:uppercase}.zoom-control input{width:80px;accent-color:var(--blue)}.icon-button{width:32px;height:32px;border:1px solid var(--line);border-radius:8px;background:var(--surface);cursor:pointer;font-size:16px}.studio-grid{--columns:4;flex:1;overflow:auto;padding:14px;display:grid;grid-template-columns:repeat(var(--columns),minmax(150px,1fr));align-content:start;gap:11px}.result-card{min-width:0;border:1px solid var(--line);border-radius:11px;background:var(--surface);overflow:hidden;cursor:pointer;transition:border-color .15s,transform .15s}.result-card:hover{border-color:var(--line-hi);transform:translateY(-1px)}.result-card.failed,.result-card.uncertain,.result-card.delivery_failed{border-color:#5b2935}.result-visual{position:relative;aspect-ratio:16/10;background:linear-gradient(145deg,#101a30,#0a0f1b);display:grid;place-items:center;overflow:hidden}.result-visual img,.result-visual video{width:100%;height:100%;display:block;object-fit:cover}.result-visual video{pointer-events:none}.placeholder{display:grid;gap:10px;justify-items:center;color:var(--muted);font-size:11px;text-align:center;padding:16px}.spinner{width:22px;height:22px;border-radius:50%;border:2px solid #2d3c5c;border-top-color:var(--blue);animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.result-status{position:absolute;top:8px;left:8px;background:#080c15df;border:1px solid var(--line);border-radius:999px;padding:4px 7px;font:600 8px var(--mono);text-transform:uppercase}.result-status.completed{color:var(--green)}.result-status.processing,.result-status.delivering{color:var(--cyan)}.result-status.queued{color:var(--amber)}.result-status.failed,.result-status.uncertain,.result-status.delivery_failed{color:var(--red)}.result-body{padding:9px}.result-prompt{font-size:11px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;height:30px}.result-meta{display:flex;align-items:center;gap:5px;margin-top:8px;color:var(--muted);font:9px var(--mono)}.result-meta .spacer{flex:1}.card-action{border:0;background:var(--surface-3);color:var(--muted);border-radius:5px;padding:4px 6px;cursor:pointer;text-decoration:none}.card-action:hover{color:var(--text)}.result-error{color:#ff9caa;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:7px}.studio-empty{grid-column:1/-1;min-height:50vh;display:grid;place-content:center;justify-items:center;text-align:center;color:var(--muted)}.studio-empty strong{font-size:16px;color:var(--text);margin-bottom:5px}
.content-page{max-width:1480px;margin:auto;padding:30px 34px 70px}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:18px}.section-heading h1{font-size:25px}.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px}.two-column{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(280px,.7fr);gap:16px;align-items:start}.wide-left{grid-template-columns:minmax(0,1.5fr) minmax(260px,.5fr)}.mono,.code-block{font-family:var(--mono)}.code-block{white-space:pre-wrap;word-break:break-word;background:#090e19;border:1px solid var(--line);border-radius:8px;padding:14px;color:#c6d3f2;font-size:11px;margin:0}.account-form{display:grid;grid-template-columns:1fr 1.2fr 1.2fr auto auto;gap:11px;align-items:end;margin-bottom:15px}.check-label{display:flex;align-items:center;gap:7px;height:38px}.account-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:11px}.account-card{display:grid;gap:11px}.account-title{display:flex;justify-content:space-between;gap:10px}.account-title strong{font-family:var(--mono)}.account-title p{margin:3px 0}.account-meta{display:grid;grid-template-columns:1fr 1fr;gap:8px;font-size:11px}.account-meta span{color:var(--muted);display:block}.account-actions{display:flex;gap:7px;flex-wrap:wrap}.summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:9px;margin-bottom:12px}.summary-card{background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:12px}.summary-card b{display:block;font:600 19px var(--mono)}.summary-card span{color:var(--muted);font-size:10px}.table-wrap{overflow:auto;padding:0}table{width:100%;border-collapse:collapse;font-size:11px}th,td{padding:11px 12px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}th{color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.08em}td.error-cell{max-width:430px;white-space:normal}.status{font:600 9px var(--mono);text-transform:uppercase}.status.completed{color:var(--green)}.status.failed,.status.uncertain,.status.delivery_failed{color:var(--red)}.status.processing,.status.delivering{color:var(--cyan)}.status.queued{color:var(--amber)}.grid-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}.media-card{background:var(--surface);border:1px solid var(--line);border-radius:10px;overflow:hidden}.media-card video,.media-card img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#05070c}.media-caption{padding:10px;font:10px var(--mono);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.preview-dialog{width:min(1000px,92vw);max-height:92vh;padding:0;border:1px solid var(--line-hi);border-radius:14px;background:#080c15;color:var(--text);box-shadow:0 30px 100px #000c;overflow:auto}.preview-dialog::backdrop{background:#02040add;backdrop-filter:blur(8px)}.preview-close{position:fixed;margin:12px;right:max(4vw,calc((100vw - 1000px)/2));z-index:2;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:#090e19df;font-size:20px;cursor:pointer}.preview-dialog img,.preview-dialog video{display:block;width:100%;max-height:68vh;object-fit:contain;background:#03050a}.preview-copy{padding:16px 18px}.preview-copy h2{font-size:15px;margin:7px 0}.preview-copy p{color:var(--muted);font-size:11px;margin:0 0 12px}
.topbar-actions{display:flex;align-items:center;gap:12px;margin-left:auto}
.auth-pill{display:flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:6px 11px;color:var(--text);font-size:11px;font-weight:600;cursor:pointer;transition:border-color .15s,background-color .15s}
.auth-pill:hover{border-color:var(--blue);background:var(--surface-2)}
.auth-pill.connected{border-color:rgba(50,213,131,.35)}
.auth-pill.disconnected{border-color:rgba(255,102,119,.45)}
.auth-dialog{width:min(520px,94vw);max-height:90vh;padding:0;border:1px solid var(--line-hi);border-radius:14px;background:#080c15;color:var(--text);box-shadow:0 30px 100px #000c;overflow:visible}
.auth-dialog::backdrop{background:#02040add;backdrop-filter:blur(8px)}
.auth-card{padding:26px}
.auth-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;position:relative}
.auth-header h2{font-size:18px;margin:3px 0 5px}
.auth-header .preview-close{position:relative;margin:0;right:auto;top:auto;flex-shrink:0}
.input-with-action{display:flex;gap:8px;align-items:center}
.auth-alert{padding:10px 14px;border-radius:8px;font-size:12px;line-height:1.45}
.auth-alert.error{background:#28131a;border:1px solid #6b3441;color:#ffc4ca}
.auth-alert.good{background:#0e281c;border:1px solid #1c5e39;color:#9ce3bb}
.auth-status-card{display:flex;flex-direction:column;gap:5px;padding:14px;border-radius:9px;background:#090e19;border:1px solid var(--line)}
.auth-status-info{display:flex;align-items:center;gap:9px;font-size:13px}
.direct-link-box{display:grid;gap:8px;padding:14px;border-radius:9px;background:#090e19;border:1px solid var(--line);margin-top:4px}
@media(max-width:1200px){.brand{min-width:auto}.metrics .metric:nth-child(n+3){display:none}.studio-page.active{grid-template-columns:310px minmax(0,1fr)}.zoom-control{display:none}.studio-grid{--columns:3!important}}
@media(max-width:850px){.topbar{height:auto;min-height:62px;flex-wrap:wrap;padding:10px}.nav-tabs{order:3;width:100%;overflow:auto}.metrics{display:none}.studio-page.active{display:block;height:auto}.composer-panel{height:auto;border-right:0;border-bottom:1px solid var(--line)}.results-workspace{min-height:70vh}.workspace-bar{flex-wrap:wrap}.workspace-actions{margin-left:0;width:100%;justify-content:space-between}.studio-grid{min-height:65vh;overflow:visible;--columns:2!important}.content-page{padding:22px 16px}.two-column,.wide-left{grid-template-columns:1fr}.account-form{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.live-status{margin-left:auto}.nav-item{padding:7px 9px}.form-grid,.upload-row,.account-form{grid-template-columns:1fr}.workspace-bar{align-items:flex-start}.status-pills{order:3;width:100%}.filter-tabs button{padding:6px}.studio-grid{--columns:1!important}.result-visual{aspect-ratio:16/9}}

/* ==========================================================================
   VeoForge 2.2 Studio Updates: Batch Controls, Throughput HUD & Agent Docs
   ========================================================================== */
.batch-quick-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 12px;
  background: var(--surface-2, #0c121e);
  border: 1px solid var(--line, #1f293d);
  border-radius: 8px;
  margin: 6px 0 12px;
  font-size: 11px;
}
.batch-quick-pills {
  display: flex;
  align-items: center;
  gap: 5px;
}
.batch-quick-label {
  color: var(--muted, #94a3b8);
  font-weight: 500;
  font-size: 11px;
}
.btn-quick-batch {
  background: var(--surface, #141c2e);
  border: 1px solid var(--line, #1f293d);
  color: var(--text, #e2e8f0);
  border-radius: 6px;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s ease;
}
.btn-quick-batch:hover, .btn-quick-batch.active {
  background: var(--blue, #3b82f6);
  border-color: var(--blue, #3b82f6);
  color: #fff;
}
.batch-calc-preview {
  color: var(--muted, #94a3b8);
  font-size: 11px;
}
.batch-calc-preview b {
  color: var(--cyan, #38bdf8);
}

.throughput-hud {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 14px;
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid var(--line, #1f293d);
  border-radius: 999px;
  font-size: 11px;
  margin: 0 12px;
}
.hud-item {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--muted, #94a3b8);
}
.hud-item b {
  color: var(--text, #f8fafc);
  font-family: var(--mono, monospace);
  font-weight: 700;
}
.hud-icon {
  font-size: 12px;
}

.api-hero-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 20px;
  padding: 14px 18px;
  background: var(--surface-2, #0c121e);
  border: 1px solid var(--line, #1f293d);
  border-radius: 10px;
}
.btn-primary-hero {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
  border: 1px solid #3b82f6;
}
.btn-primary-hero:hover {
  background: linear-gradient(135deg, #1d4ed8, #1e40af);
}
.api-doc-header {
  margin-bottom: 14px;
}
.api-doc-header h2 {
  font-size: 18px;
  margin: 4px 0 6px;
}
.api-markdown-viewer {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.api-doc-section {
  border: 1px solid var(--line, #1f293d);
  border-radius: 9px;
  background: #070b14;
  padding: 16px;
}
.api-doc-section h3 {
  font-size: 13px;
  margin: 0 0 8px;
  color: #e2e8f0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.endpoint-badge {
  font-family: var(--mono, monospace);
  font-weight: 700;
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 4px;
  display: inline-block;
}
.endpoint-badge.post { background: #0c4a6e; color: #38bdf8; border: 1px solid #0284c7; }
.endpoint-badge.get { background: #064e3b; color: #34d399; border: 1px solid #059669; }
.api-doc-section p {
  color: var(--muted, #94a3b8);
  font-size: 12px;
  margin: 0 0 10px;
  line-height: 1.45;
}
.api-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
  font-size: 11px;
}
.api-table th {
  background: #0c121e;
  padding: 8px 10px;
  color: var(--muted, #94a3b8);
  font-weight: 600;
  text-align: left;
  border-bottom: 1px solid var(--line, #1f293d);
}
.api-table td {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(31, 41, 61, 0.5);
  vertical-align: top;
}
.api-table code {
  font-family: var(--mono, monospace);
  color: var(--cyan, #38bdf8);
  background: rgba(56, 189, 248, 0.1);
  padding: 2px 5px;
  border-radius: 4px;
}