:root{
  --bg:#0b0b12; --panel:#151520; --muted:#1c1c2a; --accent:#ff4fa3; --text:#e9e9f0; --sub:#9aa0b4; --line:#2b2b3b; --ok:#26c281; --warn:#ffbe4a; --err:#ff5e6c;
  --radius:16px; --radius-sm:10px; --shadow:0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
body{background:linear-gradient(180deg,#0a0a12 0,#0c0c13 60%,#090910 100%);color:var(--text);font:14px/1.25 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Helvetica Neue,Arial}
.app{display:grid;grid-template-rows:auto 1fr auto;min-height:100%}
.topbar{display:flex;gap:16px;align-items:center;padding:14px 20px;border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(10,10,18,.75);backdrop-filter: blur(8px);z-index:100;}
.brand{display:flex;gap:10px;align-items:center;font-weight:700;letter-spacing:.3px}
.badge{background:var(--accent);color:#fff;padding:2px 8px;border-radius:999px;font-size:11px;margin-left:6px}
.search{flex:1;display:flex;gap:10px}
.search input{flex:1;padding:10px 12px;border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--text)}
.btn{cursor:pointer;border:none;border-radius:10px;padding:10px 14px;display:inline-flex;gap:8px;align-items:center;background:var(--muted);color:var(--text);transition:.2s transform;text-decoration:none;}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:linear-gradient(135deg,#ff4fa3,#ff2b7e);color:#fff;}
.btn.ghost{background:transparent;border:1px solid var(--line)}

.layout{display:grid;grid-template-columns:260px 1fr 320px;gap:16px;padding:16px}
@media(max-width:1080px){.layout{grid-template-columns:1fr;}.right,.left{order:2}.center{order:1}}

.card{background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01));border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.left,.center,.right{min-height:0}

/* LEFT: Workflows */
.left{padding:14px}
.h{display:flex;align-items:center;justify-content:space-between;margin:6px 4px 12px}
.h h3{margin:0;font-size:13px;color:var(--sub);font-weight:600;letter-spacing:.4px;text-transform:uppercase}
.wf-list{display:flex;flex-direction:column;gap:8px;height:calc(100% - 36px);overflow:auto;padding-right:4px}
.wf{display:flex;align-items:center;gap:10px;border:1px solid var(--line);padding:10px;border-radius:12px;background:var(--panel);cursor:pointer;}
.wf.active{border-color:var(--accent);box-shadow:0 0 0 2px rgba(255,79,163,.25) inset}
.wf small{color:var(--sub);display:block;margin-top:2px}
.chip{font-size:11px;padding:2px 8px;border:1px solid var(--line);border-radius:999px;color:var(--sub)}

/* CENTER: Stage */
.center{display:grid;grid-template-rows:auto 1fr auto;gap:12px;padding:14px}
.stage{display:grid;grid-template-columns:1fr 1fr;gap:12px;height:100%}
@media(max-width:1280px){.stage{grid-template-columns:1fr}}
.drop{border:2px dashed var(--line);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;min-height:220px;background:radial-gradient(80% 60% at 50% 0%,rgba(255,79,163,.06),rgba(0,0,0,0));position:relative;overflow:hidden}
.drop input{position:absolute;inset:0;opacity:0;cursor:pointer}
.drop .hint{color:var(--sub);text-align:center;padding:26px}
.preview{position:relative;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;min-height:220px;background:var(--panel);display:flex;align-items:center;justify-content:center}
.preview img, .preview video{width:100%;height:100%;object-fit:contain;display:block}
.progress{height:8px;background:var(--line);border-radius:999px;overflow:hidden}
.progress > i{display:block;height:100%;width:0;background:linear-gradient(135deg,#7e5fff,#ff4fa3);transition:.2s width;}

/* CONTROLS (prompts + duration) */
.controls{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field{display:flex;flex-direction:column;gap:6px;min-width:0;}
.field label{color:var(--sub);font-size:12px}
.field textarea,
.field input[type="text"],
.field input[type="number"],
.field select{padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--panel);color:var(--text);width:100%}
.controls-row{display:grid;grid-template-columns:200px;gap:12px;margin-top:10px}

.toolbar{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-top:4px}
.status{color:var(--sub)}

/* RIGHT: Presets + History */
.right{padding:14px;display:grid;grid-template-rows:auto auto 1fr;gap:12px}
.preset-list,.history{max-height:280px;overflow:auto;display:flex;flex-wrap:wrap;gap:8px}
.preset{padding:8px 10px;border:1px solid var(--line);border-radius:12px;background:var(--panel);cursor:pointer}
.preset:hover{border-color:var(--accent)}
.history{flex-direction:column;}
.history-item{display:flex;gap:10px;align-items:center;border:1px solid var(--line);padding:8px;border-radius:10px;width:100%;background:var(--panel)}
.history-item img{width:42px;height:42px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
.muted{color:var(--sub)}

.footer{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;padding:14px 20px;border-top:1px solid var(--line);color:var(--sub)}
.kbd{border:1px solid var(--line);padding:2px 6px;border-radius:6px;background:#0d0d17;color:var(--text);font-size:12px}
.toast{position:fixed;right:16px;bottom:16px;background:var(--panel);border:1px solid var(--line);padding:10px 12px;border-radius:12px;box-shadow:var(--shadow);opacity:0;transform:translateY(6px);transition:.2s;z-index:200;}
.toast.show{opacity:1;transform:translateY(0)}
a.inline{color:var(--accent);text-decoration:none}
.preview .hint{color:var(--sub);text-align:center;padding:26px}

/* Dark mode hard reset for themes */
body.vv-i2v-active{ background:#0b0b12; color-scheme: dark; }
body.vv-i2v-active .site,
body.vv-i2v-active .site-content,
body.vv-i2v-active .content-area,
body.vv-i2v-active .entry,
body.vv-i2v-active .entry-content,
body.vv-i2v-active .container,
body.vv-i2v-active .wrap,
body.vv-i2v-active .page,
body.vv-i2v-active .post,
body.vv-i2v-active .wp-block-group{
  background: transparent !important; box-shadow: none !important;
}

/* Force dark controls */
body.vv-i2v-active input[type="text"],
body.vv-i2v-active input[type="number"],
body.vv-i2v-active input[type="search"],
body.vv-i2v-active input[type="password"],
body.vv-i2v-active textarea,
body.vv-i2v-active select,
.app input[type="text"],
.app input[type="number"],
.app input[type="search"],
.app input[type="password"],
.app textarea,
.app select{
  background: var(--panel) !important; color: var(--text) !imporant; border: 1px solid var(--line) !important; box-shadow: none !important;
}
.app ::placeholder{ color: var(--sub); opacity: .9; }
.app :focus{ outline: none; box-shadow: 0 0 0 2px rgba(255,79,163,.25) inset; }

/* Autofill fix */
body.vv-i2v-active input:-webkit-autofill,
body.vv-i2v-active textarea:-webkit-autofill,
body.vv-i2v-active select:-webkit-autofill{
  -webkit-text-fill-color: var(--text) !important;
  transition: background-color 9999s ease-out;
  box-shadow: 0 0 0 1000px var(--panel) inset !important;
}

/* Safety */
.app .card{ background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)) !important; }
.app .drop{ background: radial-gradient(80% 60% at 50% 0%, rgba(255,79,163,.06), rgba(0,0,0,0)); }
.app .preview{ background: var(--panel) !important; }

/* --- MODIFICATION: User Preset Delete Button --- */
.preset.user-preset {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
}