.mf-studio{
  --bg:#0a0a0b; --card:#141416; --card-2:#0f0f11; --line:#222226; --line-2:#2c2c31;
  --text:#ededed; --mut:#8a8a92; --dim:#5e5e66; --light:#f4f4f6; --ok:#4ade80; --err:#ff6b6b; --proc:#b9a8ff;
  display:flex; flex-direction:column;
  width:100vw; max-width:100vw; margin:0 calc(50% - 50vw); min-height:100vh;
  background:
    radial-gradient(900px 400px at 70% -5%, rgba(120,110,160,.10), transparent 60%),
    radial-gradient(600px 300px at 10% 110%, rgba(90,90,120,.08), transparent 60%),
    var(--bg);
  color:var(--text); border:0; border-radius:0; overflow:hidden;
  font-family:inherit; text-align:left;
}
.mf-studio-body{ display:grid; grid-template-columns:1fr 340px; flex:1; min-height:0; }
@media(max-width:860px){ .mf-studio-body{ grid-template-columns:1fr } }

/* SHARED TOP NAV */
.mf-topnav{ display:flex; align-items:center; gap:20px; padding:13px 20px; border-bottom:1px solid var(--line); }
.mf-topnav-logo{ display:flex; align-items:center; gap:9px; font-size:14px; font-weight:700; letter-spacing:-.01em; }
.mf-topnav-mark{ width:26px; height:26px; border-radius:8px; background:var(--light); color:#0a0a0b; font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center; }
.mf-topnav-tabs{ display:flex; gap:6px; }
.mf-topnav-tab{ padding:7px 15px; border-radius:999px; font-size:13px; font-weight:600; color:var(--mut); text-decoration:none; border:1px solid transparent; transition:all .15s; }
.mf-topnav-tab:hover{ color:var(--text); background:rgba(255,255,255,.04); }
.mf-topnav-tab.is-active{ color:var(--text); background:rgba(255,255,255,.06); border-color:var(--line-2); }
.mf-studio *{ box-sizing:border-box }

/* MAIN */
.mf-main{ display:flex; flex-direction:column; min-width:0; padding:18px; }
.mf-canvas{
  position:relative; flex:1; border-radius:20px; min-height:300px;
  background:
    radial-gradient(420px 220px at 50% 40%, rgba(150,140,190,.10), transparent 65%),
    linear-gradient(160deg, var(--card) 0%, var(--card-2) 100%);
  border:1px solid var(--line);
  box-shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 18px 50px -30px rgba(0,0,0,.9);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.mf-canvas-empty{ text-align:center; color:var(--mut); max-width:320px; padding:24px; }
.mf-canvas-icon{
  width:54px; height:54px; margin:0 auto 14px; border-radius:50%;
  background:var(--card-2); border:1px solid var(--line-2);
  display:flex; align-items:center; justify-content:center; font-size:18px; color:var(--text);
}
.mf-canvas-empty p{ font-size:13px; line-height:1.5; margin:0; }
.mf-canvas-video{ width:100%; height:100%; object-fit:contain; background:#000; }
.mf-download{
  position:absolute; top:12px; right:12px; z-index:3;
  display:inline-flex; align-items:center; gap:4px;
  background:var(--light); color:#0a0a0b; text-decoration:none;
  border:1px solid var(--light); border-radius:10px; padding:7px 12px;
  font-size:12px; font-weight:600; transition:filter .15s;
}
.mf-download:hover{ filter:brightness(.95); }
.mf-canvas-loading{ text-align:center; }
.mf-spinner{
  width:46px; height:46px; margin:0 auto 12px; border-radius:50%;
  border:3px solid var(--line-2); border-top-color:var(--text); animation:mf-spin .8s linear infinite;
}
@keyframes mf-spin{ to{ transform:rotate(360deg) } }
.mf-loading-label{ font-size:13px; color:var(--text); font-weight:600; }

/* PROMPT TOOLS */
.mf-prompt-tools{ display:flex; align-items:center; gap:8px; margin:14px 0 8px; }
.mf-ptool{
  display:inline-flex; align-items:center; gap:5px;
  background:var(--card); color:var(--text); border:1px solid var(--line-2);
  border-radius:999px; padding:8px 13px; font-size:12px; font-weight:600; cursor:pointer;
  font-family:inherit; transition:all .15s;
}
.mf-ptool:hover{ border-color:#3a3a42; background:#191919; }
.mf-ptool:disabled{ opacity:.45; cursor:default; }
.mf-ptool-del{ padding:8px 11px; border-radius:50%; color:var(--mut); }
.mf-ptool-del:hover{ border-color:var(--err); color:var(--err); }
.mf-ptool-spacer{ flex:1; }
.mf-saved-select{
  background:var(--card); color:var(--text); border:1px solid var(--line-2);
  border-radius:999px; padding:8px 12px; font-size:12px; font-family:inherit; cursor:pointer; max-width:200px;
}

/* PROMPT BAR */
.mf-promptbar{
  display:flex; align-items:center; gap:10px;
  background:var(--card); border:1px solid var(--line); border-radius:16px; padding:8px 8px 8px 12px;
  box-shadow:0 1px 0 rgba(255,255,255,.03) inset;
}
.mf-icon-btn{
  flex:0 0 auto; width:40px; height:40px; border-radius:50%;
  background:var(--card-2); border:1px solid var(--line-2); color:var(--text);
  font-size:16px; cursor:pointer; transition:border-color .15s;
}
.mf-icon-btn:hover{ border-color:#44444c }
.mf-thumb{ flex:0 0 auto; width:40px; height:40px; border-radius:50%; overflow:hidden; border:1px solid var(--line-2); }
.mf-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.mf-promptbar textarea{
  flex:1; resize:none; background:transparent; border:0; outline:0; color:var(--text);
  font-size:14px; font-family:inherit; line-height:1.4; max-height:120px; padding:9px 4px;
}
.mf-promptbar textarea::placeholder{ color:var(--dim) }
.mf-run{
  flex:0 0 auto; background:var(--light); color:#0a0a0b; border:0; border-radius:11px;
  padding:11px 20px; font-size:14px; font-weight:600; cursor:pointer; transition:filter .15s;
}
.mf-run:hover{ filter:brightness(.95) }
.mf-run:disabled{ opacity:.5; cursor:default }

/* HISTORY */
.mf-history-wrap{ margin-top:16px; }
.mf-history-title{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--dim); margin-bottom:8px; }
.mf-history{ display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; }
.mf-hist-tile{
  flex:0 0 auto; width:60px; height:90px; border-radius:10px; overflow:hidden; position:relative;
  background:var(--card-2); border:1px solid var(--line-2); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.mf-hist-del{
  position:absolute; top:3px; right:3px; z-index:2; width:18px; height:18px; padding:0;
  border-radius:50%; border:0; background:rgba(0,0,0,.7); color:#fff; font-size:10px; line-height:1;
  cursor:pointer; opacity:0; transition:opacity .12s;
}
.mf-hist-tile:hover .mf-hist-del{ opacity:1; }
.mf-hist-del:hover{ background:var(--err); }
.mf-hist-tile video{ width:100%; height:100%; object-fit:cover; }
.mf-hist-state{ font-size:14px; font-weight:700; color:var(--mut); }
.mf-hist-state.mf-proc{ color:var(--proc) }
.mf-hist-state.mf-err{ color:var(--err) }

/* SETTINGS PANEL */
.mf-settings{ background:rgba(255,255,255,.012); border-left:1px solid var(--line); padding:18px; overflow-y:auto; }
@media(max-width:860px){ .mf-settings{ border-left:0; border-top:1px solid var(--line) } }
.mf-settings-head{ font-size:13px; font-weight:600; color:var(--text); margin-bottom:16px; }
.mf-engine-card{
  background:linear-gradient(160deg, var(--card) 0%, var(--card-2) 100%);
  border:1px solid var(--line); border-radius:14px; padding:12px; margin-bottom:18px;
}
.mf-engine-select{
  width:100%; background:var(--card-2); color:var(--text); border:1px solid var(--line-2);
  border-radius:10px; padding:9px 10px; font-size:13px; font-weight:600; cursor:pointer;
}
.mf-engine-note{ font-size:11px; color:var(--mut); line-height:1.45; margin:8px 2px 0; }
.mf-field{ margin-bottom:16px; }
.mf-field:not(.mf-field-check) > label{ display:block; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--dim); margin-bottom:7px; }
.mf-field select{
  width:100%; background:var(--card-2); color:var(--text); border:1px solid var(--line-2);
  border-radius:10px; padding:9px 10px; font-size:13px; cursor:pointer;
}
.mf-aspect-toggle{ display:flex; gap:6px; }
.mf-ar{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:5px;
  background:var(--card-2); color:var(--mut); border:1px solid var(--line-2); border-radius:11px;
  padding:9px 4px; font-size:11px; font-weight:600; cursor:pointer; transition:all .15s;
}
.mf-ar:hover{ border-color:#3a3f4b }
.mf-ar.active{ border-color:var(--light); color:var(--text); background:rgba(244,244,246,.06); }
.mf-ar-glyph{ display:block; border:1.6px solid currentColor; border-radius:2px; }
.mf-ar-land{ width:20px; height:12px; }
.mf-ar-port{ width:12px; height:20px; }
.mf-field-check{ margin-top:4px; }
.mf-switch{ display:flex; align-items:center; gap:10px; cursor:pointer; font-size:13px; color:var(--text); }
.mf-switch input{ display:none; }
.mf-switch-track{ position:relative; width:38px; height:22px; border-radius:22px; background:var(--line-2); transition:background .15s; flex:0 0 auto; }
.mf-switch-track::after{ content:''; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff; transition:transform .15s; }
.mf-switch input:checked + .mf-switch-track{ background:var(--light); }
.mf-switch input:checked + .mf-switch-track::after{ transform:translateX(16px); background:#0a0a0b; }
.mf-result-msg{ font-size:12px; margin-top:8px; min-height:16px; }
.mf-result-msg.mf-err{ color:var(--err) }
.mf-result-msg.mf-ok{ color:var(--ok) }

.mf-studio-locked{ padding:18px; border:1px solid #222226; border-radius:16px; background:#141416; color:#8a8a92; }

/* REFERENCE PHOTOS (single-clip) */
#mf-member{ width:100%; background:var(--card-2,#15151a); border:1px solid var(--line-2,#26262c); color:var(--text,#e8e8ea); border-radius:8px; padding:8px 10px; font-size:13px; }
.mf-refs-thumbs{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:8px; }
.mf-ref{ position:relative; width:40px; height:40px; border-radius:6px; overflow:hidden; border:1px solid var(--line-2,#26262c); }
.mf-ref img{ width:100%; height:100%; object-fit:cover; display:block; }
.mf-ref-del{ position:absolute; top:0; right:0; width:15px; height:15px; padding:0; border:0; background:rgba(0,0,0,.7); color:#fff; font-size:8px; line-height:1; cursor:pointer; }
.mf-ref-add{ font-size:12px; padding:7px 11px; border-radius:8px; border:1px dashed var(--line-2,#26262c); background:transparent; color:var(--mut,#8a8a92); cursor:pointer; }
.mf-ref-add:hover{ border-color:var(--accent,#6366f1); color:var(--text,#e8e8ea); }