@import "https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;500;600;700;800&display=swap";:root{--bg:#050608;--panel:#121212;--border:#242832;--text:#cbd5e1;--text-strong:#f8fafc;--muted:#64748b;--accent:#8b5cf6;--danger:#e11d48;color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font:16px/1.45 Fira Sans,system-ui,Segoe UI,sans-serif}#root{min-height:100vh}body{margin:0}button,input,textarea,select{font:inherit}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline-offset:2px;outline:2px solid #60a5fa}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.app-shell{min-height:100vh;color:var(--text);background:var(--bg);grid-template-columns:260px 1fr;display:grid}.sidebar{border-right:1px solid var(--border);background:#0d1117;flex-direction:column;gap:28px;padding:28px 18px;display:flex}.brand{align-items:center;gap:14px;min-height:58px;display:flex}.brand-mark{color:#fff;background:linear-gradient(135deg,#7c3aed,#2563eb);border-radius:8px;place-items:center;width:52px;height:52px;display:grid;box-shadow:0 16px 34px #7c3aed57}.brand strong,.brand span{display:block}.brand strong{color:var(--text-strong);font-size:18px}.brand span,.status-card small,.empty-preview span,.job-heading p,.history-dock p{color:var(--muted)}.side-nav{gap:8px;display:grid}.side-nav button,.history-dock button,.icon-button,.mode-tabs button,.material,.material-summary-header button,.material-picker-modal footer button,.panel-actions button,.preview-actions button,.preview-actions a{cursor:pointer}.side-nav button{color:#8aa0bd;height:46px;font:inherit;background:0 0;border:1px solid #0000;border-radius:6px;align-items:center;gap:12px;padding:0 12px;transition:background .18s,color .18s,border-color .18s;display:flex}.side-nav button:hover,.side-nav button.active{color:#f8fafc;background:#7c3aed29;border-color:#7c3aed6b}.status-card{border:1px solid var(--border);background:#111827;border-radius:8px;gap:10px;margin-top:auto;padding:16px;display:grid}.status-card div,.top-actions,.pill,.panel-actions,.preview-actions{align-items:center;gap:10px;display:flex}.status-card strong{color:#34d399}.workspace{grid-template-rows:76px 1fr;min-width:0;display:grid;position:relative}.topbar{border-bottom:1px solid var(--border);background:#0a0c12f0;justify-content:space-between;align-items:center;padding:0 26px;display:flex}.eyebrow{color:#a78bfa;text-transform:uppercase;font-size:12px;font-weight:700;display:block}h1,h2,p{margin:0}h1{color:var(--text-strong);font-size:20px;line-height:1.2}h2{color:var(--text-strong);font-size:20px}.pill{border-radius:999px;min-height:34px;padding:0 14px;font-weight:700}.pill.ok{color:#bbf7d0;background:#22c55e29}.pill.warn{color:#fde68a;background:#f59e0b29}.icon-button{border:1px solid var(--border);width:38px;height:38px;color:var(--text);background:#121722;border-radius:8px;place-items:center;display:grid}.workbench{grid-template-columns:456px minmax(0,1fr);min-height:0;display:grid}.control-panel{border-right:1px solid var(--border);background:var(--panel);grid-template-rows:auto 1fr auto;min-height:calc(100vh - 76px);display:grid}.mode-tabs{border-bottom:1px solid var(--border);grid-template-columns:repeat(4,1fr);display:grid}.mode-tabs button{min-height:86px;color:var(--muted);font:inherit;background:0 0;border:0;border-bottom:2px solid #0000;place-items:center;font-weight:700;transition:color .18s,border-color .18s,background .18s;display:grid}.mode-tabs button.active{color:#f8fafc;background:#60a5fa14;border-bottom-color:#60a5fa}.mode-tabs button.disabled{opacity:.5}.panel-scroll{align-content:start;gap:22px;min-height:0;padding:24px;display:grid;overflow:auto}.upload-zone{min-height:132px;color:var(--muted);background:#11151c;border:1px dashed #334155;border-radius:8px;place-items:center;gap:8px;display:grid}.upload-zone input{display:none}.upload-zone strong{color:var(--text-strong)}.material-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;display:grid}.material-picker-summary{gap:10px;display:grid}.material-summary-header{justify-content:space-between;align-items:center;gap:12px;display:flex}.material-summary-header span,.material-picker-modal header p{color:var(--muted);font-size:13px}.material-summary-header button{color:#dbeafe;min-height:34px;font:inherit;background:#315ca538;border:1px solid #315ca5;border-radius:8px;padding:0 12px;font-weight:800;transition:background .18s,border-color .18s}.material-summary-header button:hover{background:#3b82f64d;border-color:#60a5fa}.material{border:1px solid var(--border);min-width:0;color:var(--text);text-align:left;background:#10151e;border-radius:8px;align-items:center;gap:8px;padding:10px;display:flex}.material span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.material small{color:var(--muted);margin-left:auto;font-size:12px}.material.active{color:#dbeafe;background:#2563eb2e;border-color:#3b82f6}.field{gap:10px;display:grid}.field span{color:var(--text-strong);font-weight:700}.field input,.field textarea,.field select{box-sizing:border-box;border:1px solid var(--border);width:100%;color:var(--text-strong);font:inherit;background:#11151c;border-radius:8px;outline:none;padding:13px 14px}.field textarea{resize:vertical;min-height:146px}.field input:focus,.field textarea:focus,.field select:focus{border-color:#60a5fa;box-shadow:0 0 0 3px #60a5fa29}.input-with-unit{position:relative}.input-with-unit input{padding-right:44px}.input-with-unit em{color:var(--muted);font-style:normal;position:absolute;top:50%;right:14px;transform:translateY(-50%)}.field small{color:var(--muted);text-align:right}.field-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;display:grid}.panel-actions{border-top:1px solid var(--border);background:#0c1119f5;padding:16px 20px}.panel-actions button,.preview-actions button,.preview-actions a{border:1px solid var(--border);min-height:48px;color:var(--text-strong);font:inherit;border-radius:8px;justify-content:center;align-items:center;gap:8px;font-weight:800;text-decoration:none;display:inline-flex}.panel-actions .secondary{background:#242830;width:34%}.panel-actions .primary{background:#315ca5;border-color:#315ca5;flex:1}.panel-actions .primary:disabled{cursor:not-allowed;opacity:.55}button:disabled{cursor:wait;opacity:.66}.preview-panel{background:#050608;place-items:center;min-height:calc(100vh - 76px);padding:34px;display:grid}.empty-preview{text-align:center;place-items:center;gap:14px;max-width:560px;display:grid}.empty-preview strong{color:var(--text-strong);font-size:26px}.progress-preview{border:1px solid var(--border);text-align:center;background:#0f141d;border-radius:8px;place-items:center;gap:14px;min-height:280px;padding:34px;display:grid}.progress-preview svg{color:#93c5fd}.progress-preview strong{color:var(--text-strong);font-size:24px}.progress-preview span{max-width:460px;color:var(--muted);line-height:1.7}.progress-preview.failed,.progress-preview.needs_config{background:#7f1d1d1f;border-color:#ef444447}.progress-preview.failed svg,.progress-preview.needs_config svg{color:#fecaca}.job-detail{gap:22px;width:min(720px,100%);display:grid}.job-heading{text-align:center;gap:10px;display:grid}.job-state{color:#dbeafe;text-transform:uppercase;background:#3b82f62e;border-radius:999px;justify-self:center;padding:6px 12px;font-size:12px;font-weight:800}.job-state.completed{color:#bbf7d0;background:#22c55e2e}.job-state.failed,.job-state.needs_config{color:#fecaca;background:#ef444429}.video-frame{border:1px solid var(--border);background:#111827;border-radius:8px;overflow:hidden}.video-frame video{width:100%;max-height:68vh;display:block}.notice.error{color:#fecaca;background:#ef44441f;border:1px solid #ef44444d;border-radius:8px;padding:12px}.preview-actions{justify-content:center}.preview-actions button,.preview-actions a{background:#141a24;min-width:150px;padding:0 18px}.history-dock{border:1px solid var(--border);background:#111827f0;border-radius:8px;gap:10px;width:250px;padding:14px;display:grid;position:fixed;bottom:18px;right:18px}.history-dock h2{font-size:15px}.history-dock button{border:1px solid var(--border);color:var(--text);text-align:left;background:#0f141d;border-radius:8px;gap:3px;padding:10px;display:grid}.history-dock button span{color:var(--text-strong);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.history-dock small{color:var(--muted)}.toast{color:#fde68a;background:#181208f5;border:1px solid #f59e0b5c;border-radius:8px;max-width:420px;padding:12px 16px;position:fixed;top:94px;right:24px}.page-panel{background:#050608;align-content:start;gap:18px;min-height:calc(100vh - 76px);padding:28px;display:grid}.records-header{justify-content:space-between;align-items:center;display:flex}.records-header button,.record-actions button,.record-actions a{border:1px solid var(--border);min-height:38px;color:var(--text-strong);font:inherit;background:#141a24;border-radius:8px;justify-content:center;align-items:center;gap:8px;padding:0 12px;text-decoration:none;display:inline-flex}.records-list,.material-table,.settings-grid,.provider-list{gap:12px;display:grid}.record-row,.material-row,.settings-grid>div{border:1px solid var(--border);background:#0f141d;border-radius:8px;gap:10px;padding:14px;display:grid}.record-row{grid-template-columns:minmax(0,1fr) auto auto;align-items:center}.record-row>button{min-width:0;color:var(--text);font:inherit;text-align:left;background:0 0;border:0;gap:6px;display:grid}.record-row strong,.material-row span{color:var(--text-strong);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.record-row span,.material-row small,.settings-grid p,.empty-text{color:var(--muted)}.record-actions{gap:8px;display:flex}.material-row{grid-template-columns:minmax(0,1fr) auto auto auto;align-items:center}.material-row strong{color:#bbf7d0;font-size:13px}.material-row a{color:#93c5fd;text-decoration:none}.settings-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.provider-option{border:1px solid var(--border);color:var(--text);background:#10151e;border-radius:8px;gap:12px;padding:12px 14px;display:grid}.provider-option.active{background:#2563eb2e;border-color:#3b82f6}.provider-main{color:inherit;text-align:left;background:0 0;border:0;justify-content:space-between;align-items:center;gap:12px;padding:0;display:flex}.provider-option span,.provider-main span{gap:5px;min-width:0;display:grid}.provider-option strong{color:var(--text-strong)}.provider-option small{color:var(--muted);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.provider-option em{color:#dbeafe;background:#3b82f62e;border-radius:999px;flex:none;padding:5px 9px;font-size:12px;font-style:normal;font-weight:800}.test-row{gap:8px;display:flex}.test-row button{border:1px solid var(--border);min-height:38px;color:var(--text-strong);font:inherit;background:#141a24;border-radius:8px;justify-content:center;align-items:center;gap:8px;padding:0 12px;display:inline-flex}.test-result{border-radius:8px;gap:6px;padding:10px;display:grid}.test-result.ok{color:#bbf7d0;background:#22c55e1f}.test-result.error{color:#fecaca;background:#ef44441f}.test-result span{color:var(--muted);line-height:1.5}.modal-backdrop{z-index:20;background:#000000ad;place-items:center;padding:22px;display:grid;position:fixed;inset:0}.confirm-modal{border:1px solid var(--border);width:min(940px,100%);max-height:min(860px,92vh);color:var(--text);background:#0f141d;border-radius:8px;gap:18px;padding:20px;display:grid;overflow:auto}.material-picker-modal{border:1px solid var(--border);width:min(720px,100%);max-height:min(720px,90vh);color:var(--text);background:#0f141d;border-radius:8px;grid-template-rows:auto minmax(0,1fr) auto;gap:16px;padding:20px;display:grid}.confirm-modal header,.confirm-modal footer,.material-picker-modal header,.material-picker-modal footer{justify-content:space-between;align-items:center;gap:14px;display:flex}.material-picker-modal header h2,.material-picker-modal header p{margin:0}.material-picker-modal header div{gap:6px;display:grid}.material-picker-grid{grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:10px;min-height:0;padding-right:4px;display:grid;overflow:auto}.confirm-modal header p,.confirm-section p{color:var(--muted)}.confirm-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid}.confirm-section{border:1px solid var(--border);background:#10151e;border-radius:8px;gap:8px;padding:12px;display:grid}.confirm-section h3{color:var(--text-strong);margin:0;font-size:15px}.confirm-materials{flex-wrap:wrap;gap:8px;display:flex}.confirm-materials span{color:#dbeafe;background:#3b82f62e;border-radius:999px;padding:6px 10px;font-size:12px;font-weight:700}.prompt-editor{min-height:220px}.prompt-chat{border:1px solid var(--border);background:#10151e;border-radius:8px;gap:10px;padding:12px;display:grid}.prompt-chat textarea{min-height:86px}.prompt-chat button{min-height:42px;color:var(--text-strong);font:inherit;background:#315ca5;border:1px solid #315ca5;border-radius:8px;justify-content:center;justify-self:end;align-items:center;gap:8px;padding:0 14px;font-weight:800;display:inline-flex}.structured-prompt{border:1px solid var(--border);background:#10151e;border-radius:8px;padding:12px}.structured-prompt summary{cursor:pointer;color:var(--text-strong);font-weight:800}.structured-prompt pre{max-height:180px;color:var(--muted);white-space:pre-wrap;overflow:auto}.confirm-modal footer button{border:1px solid var(--border);min-height:44px;color:var(--text-strong);font:inherit;border-radius:8px;justify-content:center;align-items:center;gap:8px;padding:0 16px;font-weight:800;display:inline-flex}.material-picker-modal footer button{border:1px solid var(--border);min-height:42px;color:var(--text-strong);font:inherit;border-radius:8px;justify-content:center;align-items:center;padding:0 16px;font-weight:800;display:inline-flex}.confirm-modal footer .secondary,.material-picker-modal footer .secondary{background:#242830}.confirm-modal footer .primary,.material-picker-modal footer .primary{background:#315ca5;border-color:#315ca5}.spin{animation:.9s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@media (width<=1100px){.app-shell{grid-template-columns:84px 1fr}.brand div:last-child,.side-nav span,.status-card{display:none}.workbench{grid-template-columns:1fr}.control-panel{border-right:0;border-bottom:1px solid var(--border);min-height:auto}}@media (width<=720px){.app-shell{grid-template-columns:1fr}.sidebar{display:none}.topbar,.workbench{min-width:0}.topbar{align-items:flex-start;gap:12px;height:auto;padding:16px}.mode-tabs{grid-template-columns:repeat(2,1fr)}.field-row{grid-template-columns:1fr}.history-dock{display:none}.record-row,.material-row,.settings-grid{grid-template-columns:1fr}}
