:root {
  --bg: #070a08;
  --panel: rgba(17, 21, 18, 0.92);
  --panel-2: #111612;
  --stroke: rgba(255,255,255,.09);
  --stroke-strong: rgba(255,255,255,.14);
  --text: #f4f7f4;
  --muted: #929a93;
  --muted2: #697069;
  --accent: #d7ff50;
  --accent-2: #baf22e;
  --danger: #ff6c6c;
  --warn: #ffcc66;
  --success: #66e59a;
  --shadow: 0 24px 80px rgba(0,0,0,.45);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; }
body { min-height: 100vh; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
.bg-noise { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(circle at 14% 12%, rgba(215,255,80,.08), transparent 24%), radial-gradient(circle at 86% 0%, rgba(73,125,255,.06), transparent 24%), linear-gradient(180deg, rgba(255,255,255,.018), transparent 18%); }
.topbar { height: 78px; position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; padding: 0 34px; border-bottom: 1px solid var(--stroke); background: rgba(7,10,8,.84); backdrop-filter: blur(18px); }
.brand { display:flex; align-items:center; gap:12px; }
.brand-mark { width: 38px; height: 38px; display:grid; place-items:center; border-radius: 11px; color:#0a0d09; background: var(--accent); font-weight:900; box-shadow: 0 0 32px rgba(215,255,80,.2); }
.brand-title { font-weight: 850; letter-spacing: .12em; font-size: 14px; }
.brand-title span { color: var(--accent); }
.brand-sub { color: var(--muted2); font-size: 11px; margin-top: 3px; }
.top-actions { display:flex; gap:10px; align-items:center; }
.wallet-badge { padding: 9px 12px; border: 1px solid var(--stroke); border-radius: 10px; color: var(--muted); font-size: 12px; cursor:pointer; }
.wallet-badge:hover { border-color: var(--stroke-strong); color:var(--text); }
.ghost-btn, .primary-btn { border: 1px solid var(--stroke); border-radius: 10px; padding: 10px 14px; background:#101410; color:var(--text); }
.ghost-btn:hover { border-color: var(--stroke-strong); background:#151a15; }
.primary-btn { background: var(--accent); border-color: var(--accent); color:#0a0d09; font-weight:800; }
.ghost-btn.mini { padding:8px 11px; font-size:12px; }
.shell { width:min(1180px, calc(100% - 36px)); margin: 34px auto 80px; position:relative; z-index:1; }
.studio-card { background: var(--panel); border: 1px solid var(--stroke); border-radius: 22px; padding: 22px; box-shadow: var(--shadow); }
.upload-zone { min-height: 128px; border: 1px dashed var(--stroke-strong); border-radius: 16px; display:grid; grid-template-columns: 58px 1fr auto; gap:18px; align-items:center; padding:20px; background:linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.012)); transition:.2s; }
.upload-zone.dragover { border-color: var(--accent); background: rgba(215,255,80,.05); }
.upload-plus { width:52px; height:72px; border-radius:8px; background:#171b18; border:1px solid var(--stroke); display:grid; place-items:center; font-size:30px; color:#858d86; transform:rotate(-4deg); }
.upload-title { font-size:15px; margin-bottom:8px; }
.upload-sub { color:var(--muted); font-size:13px; line-height:1.65; }
.upload-btn { border:1px solid var(--stroke-strong); color:var(--text); background:#181d19; border-radius:11px; padding:12px 14px; white-space:nowrap; }
.upload-btn:hover { border-color:var(--accent); }
.reference-list { margin-top:14px; display:flex; flex-wrap:wrap; gap:10px; }
.reference-item { min-width:190px; max-width:260px; display:flex; align-items:center; gap:10px; padding:10px; border:1px solid var(--stroke); border-radius:12px; background:#0e120f; }
.reference-thumb { width:44px; height:44px; border-radius:8px; object-fit:cover; background:#1b211c; display:grid; place-items:center; color:var(--muted); overflow:hidden; }
.reference-thumb video, .reference-thumb img { width:100%; height:100%; object-fit:cover; }
.reference-info { flex:1; min-width:0; }
.reference-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
.reference-type { color:var(--muted2); font-size:10px; margin-top:4px; }
.ref-remove { border:0; background:transparent; color:var(--muted); font-size:17px; padding:4px; }
.uploading { opacity:.65; }
.prompt-box { position:relative; margin-top:16px; border:1px solid var(--stroke); border-radius:16px; background:#0d110e; }
.prompt-box textarea { width:100%; min-height:170px; resize:vertical; border:0; outline:none; background:transparent; color:var(--text); padding:18px 18px 38px; line-height:1.75; font-size:15px; }
.prompt-box textarea::placeholder { color:#636a64; }
.prompt-meta { position:absolute; bottom:12px; right:15px; color:var(--muted2); font-size:11px; }
.config-row { display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.select-pill { min-height:48px; border:1px solid var(--stroke); background:#151a16; color:var(--text); border-radius:12px; padding:0 14px; display:flex; align-items:center; gap:10px; }
.select-pill select { appearance:none; border:0; outline:0; background:transparent; color:var(--text); font-weight:650; min-width:240px; cursor:pointer; }
.select-pill select option { background:#151a16; }
.pill-icon { color:var(--accent); opacity:.9; }
.fixed-pill { color:#d4d9d4; font-size:13px; }
.summary-pill { color:#d4d9d4; font-size:13px; }
.params-panel { margin-top:14px; display:grid; grid-template-columns: 1.2fr 1.2fr 1.8fr 1fr 1fr; gap:18px; padding:18px; border:1px solid var(--stroke); border-radius:16px; background:#0c100d; }
.control-label { color:var(--muted); font-size:12px; margin-bottom:11px; }
.control-between { display:flex; justify-content:space-between; gap:10px; }
.control-between strong { color:var(--accent); }
.chips { display:flex; flex-wrap:wrap; gap:7px; }
.chip { border:1px solid var(--stroke); background:#151a16; color:#adb5ae; border-radius:8px; padding:7px 9px; font-size:11px; }
.chip.active { border-color:rgba(215,255,80,.65); background:rgba(215,255,80,.10); color:var(--accent); }
input[type=range] { width:100%; accent-color:var(--accent); }
.range-hints { display:flex; justify-content:space-between; color:var(--muted2); font-size:10px; }
.text-input, .field input { width:100%; border:1px solid var(--stroke); background:#101510; color:var(--text); border-radius:10px; padding:11px 12px; outline:none; }
.text-input:focus, .field input:focus { border-color:rgba(215,255,80,.55); }
.switch-row { display:flex; align-items:center; gap:9px; color:#c2c8c2; font-size:12px; cursor:pointer; }
.switch-row input { display:none; }
.switch { width:38px; height:22px; background:#252b26; border-radius:999px; position:relative; transition:.2s; }
.switch:after { content:""; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#7e867f; transition:.2s; }
.switch-row input:checked + .switch { background:rgba(215,255,80,.25); }
.switch-row input:checked + .switch:after { left:19px; background:var(--accent); }
.action-row { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-top:18px; }
.cost-note { color:var(--muted2); font-size:11px; }
.generate-btn { min-width:220px; border:0; border-radius:13px; padding:15px 18px; display:flex; align-items:center; justify-content:space-between; background:var(--accent); color:#0a0d09; font-weight:900; letter-spacing:.03em; box-shadow:0 10px 30px rgba(215,255,80,.12); }
.generate-btn:hover { background:#e3ff77; }
.generate-btn:disabled { opacity:.45; cursor:not-allowed; }
.tasks-section { margin-top:34px; }
.section-head { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:14px; }
.eyebrow { color:var(--accent); font-size:10px; font-weight:800; letter-spacing:.18em; margin-bottom:4px; }
h2, h3 { margin:0; }
h2 { font-size:20px; }
.tasks-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px; }
.task-card { border:1px solid var(--stroke); border-radius:16px; overflow:hidden; background:#0f130f; }
.task-media { aspect-ratio:16/9; background:#090c0a; position:relative; display:grid; place-items:center; }
.task-media video { width:100%; height:100%; object-fit:contain; background:#000; }
.task-progress { width:78%; text-align:center; }
.progress-track { height:6px; border-radius:999px; overflow:hidden; background:#252c26; }
.progress-bar { height:100%; width:0; background:var(--accent); transition:.35s; }
.progress-text { color:var(--muted); font-size:11px; margin-top:9px; }
.task-body { padding:14px; }
.task-topline { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.task-status { font-size:11px; font-weight:800; color:var(--warn); }
.task-status.completed { color:var(--success); }
.task-status.failed { color:var(--danger); }
.task-prompt { margin-top:9px; color:#c7cec8; font-size:12px; line-height:1.55; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.task-meta { color:var(--muted2); font-size:10px; margin-top:9px; }
.task-error { color:#ff9494; font-size:11px; line-height:1.5; margin-top:8px; word-break:break-word; }
.task-links { display:flex; gap:8px; margin-top:10px; }
.task-links a { color:var(--accent); font-size:11px; text-decoration:none; }
.empty-state { grid-column:1/-1; border:1px dashed var(--stroke); border-radius:16px; padding:42px; text-align:center; color:var(--muted2); }
.hidden { display:none !important; }
.toast { position:fixed; z-index:80; left:50%; bottom:32px; transform:translate(-50%, 20px); opacity:0; pointer-events:none; background:#161b17; border:1px solid var(--stroke-strong); border-radius:11px; padding:11px 15px; box-shadow:var(--shadow); font-size:12px; transition:.2s; }
.toast.show { opacity:1; transform:translate(-50%,0); }
.toast.error { border-color:rgba(255,108,108,.4); color:#ffb2b2; }
.modal { position:fixed; z-index:70; inset:0; display:grid; place-items:center; }
.modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.7); backdrop-filter:blur(5px); }
.modal-card { width:min(560px, calc(100% - 30px)); position:relative; z-index:1; border:1px solid var(--stroke); border-radius:18px; background:#0d110e; padding:22px; box-shadow:var(--shadow); }
.modal-head { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:20px; }
.icon-btn { border:1px solid var(--stroke); color:var(--muted); background:#151a16; border-radius:9px; width:34px; height:34px; font-size:18px; }
.field { display:block; margin-top:14px; }
.field span { display:block; color:var(--muted); font-size:12px; margin-bottom:8px; }
.saved-key-hint { margin-top:8px; color:var(--muted2); font-size:11px; }
.security-note { margin-top:16px; padding:12px; border-radius:10px; background:#111611; color:#8c958d; font-size:11px; line-height:1.6; }
.security-note code { color:#c9d1ca; }
.modal-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:20px; }
@media (max-width: 980px) {
  .params-panel { grid-template-columns:repeat(2,1fr); }
  .control-group.wide { grid-column:1/-1; }
}
@media (max-width: 760px) {
  .topbar { padding:0 16px; }
  .wallet-badge { display:none; }
  .shell { width:min(100% - 20px, 1180px); margin-top:16px; }
  .studio-card { padding:14px; border-radius:16px; }
  .upload-zone { grid-template-columns:50px 1fr; }
  .upload-btn { grid-column:1/-1; width:100%; }
  .select-pill { width:100%; }
  .select-pill select { min-width:0; width:100%; }
  .params-panel { grid-template-columns:1fr; }
  .control-group.wide { grid-column:auto; }
  .action-row { flex-direction:column; align-items:stretch; }
  .generate-btn { width:100%; }
  .tasks-grid { grid-template-columns:1fr; }
}