.studio-body{height:100vh;overflow:hidden;display:flex;flex-direction:column;
  /* dark editor workspace — overrides the bright site theme */
  --ink:#0c0c0e;--panel:#16161a;--line:#2a2a31;--text:#e9e7e2;--muted:#9b988f;--red:#9b2330;
  background:#0a0a0c;color:#e9e7e2}
.studio-top{display:flex;align-items:center;gap:1.5rem;padding:.7rem 1.2rem;
  border-bottom:1px solid var(--line);background:#101013}
.studio-top .brand-text{color:#e9e7e2}
.format-pick{display:flex;align-items:center;gap:.5rem;margin-left:auto}
.format-pick label{color:var(--muted);font-size:.85rem;text-transform:uppercase;letter-spacing:1px}
.top-actions{display:flex;gap:.6rem}
select,textarea,input[type=text]{background:#1d1d22;color:var(--text);border:1px solid var(--line);
  border-radius:6px;padding:.5rem .6rem;font-family:'Inter',sans-serif;font-size:.9rem;width:100%}
select{width:auto;min-width:170px}

.studio-wrap{flex:1;display:grid;grid-template-columns:248px 1fr 256px;overflow:hidden}
.panel{background:#121215;border-right:1px solid var(--line);padding:1rem;overflow-y:auto}
.panel-props{border-right:none;border-left:1px solid var(--line)}
.panel h4{font-family:'Oswald';color:var(--gold);font-size:.95rem;text-transform:uppercase;
  letter-spacing:1px;margin:1.1rem 0 .55rem}
.panel h4:first-child{margin-top:0}
.badge{background:var(--gold);color:#1a1408;font-size:.62rem;padding:.1rem .4rem;border-radius:4px;
  font-family:'Inter';letter-spacing:0;vertical-align:middle}

.tool{display:block;width:100%;text-align:left;background:#1d1d22;color:var(--text);
  border:1px solid var(--line);border-radius:6px;padding:.55rem .7rem;margin-bottom:.4rem;
  cursor:pointer;font-size:.9rem}
.tool:hover{border-color:var(--gold);color:var(--gold)}
.btn.full{width:100%;margin-top:.5rem}
.ai-note{color:var(--muted);font-size:.76rem;margin-top:.5rem}
input[type=color]{width:100%;height:36px;background:#1d1d22;border:1px solid var(--line);
  border-radius:6px;cursor:pointer;padding:2px}
input[type=range]{width:100%;accent-color:var(--gold)}

.stage{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.7rem;padding:1.2rem;background:#0a0a0c;overflow:auto}
.stage-meta{display:flex;gap:1rem;color:var(--muted);font-size:.85rem}
.stage-meta span:first-child{color:var(--gold);font-family:'Oswald';letter-spacing:.5px}
.canvas-host{box-shadow:0 18px 50px #000b;line-height:0}
.canvas-host.is-disc{border-radius:50%;overflow:hidden;box-shadow:0 0 0 6px #0e0e10,0 18px 50px #000b}
.stage-hint{color:var(--muted);font-size:.78rem}

.prop-group{display:flex;flex-direction:column;gap:.35rem;margin-bottom:.8rem}
.prop-group label{color:var(--muted);font-size:.8rem;margin-top:.35rem}
.muted-note{color:var(--muted);font-size:.85rem;font-style:italic}
.layer-btns{display:grid;grid-template-columns:1fr 1fr;gap:.4rem;margin-top:.6rem}
.mini{background:#1d1d22;color:var(--text);border:1px solid var(--line);border-radius:5px;
  padding:.45rem;font-size:.8rem;cursor:pointer}
.mini:hover{border-color:var(--gold)}
.mini.danger:hover{border-color:var(--red);color:#e8838d}

.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(80px);
  background:var(--gold);color:#1a1408;padding:.7rem 1.3rem;border-radius:8px;font-weight:600;
  font-size:.9rem;transition:transform .25s;z-index:99;box-shadow:0 10px 30px #0009}
.toast.show{transform:translateX(-50%) translateY(0)}
.toast.err{background:var(--red);color:#fff}
.btn[disabled]{opacity:.5;cursor:wait}
.btn-mock{background:#1d1d22;border:1px solid var(--gold);color:var(--gold)}
.btn-mock:hover{background:var(--gold);color:#1a1408}

/* ---- Mockup modal ---- */
.mock-modal{position:fixed;inset:0;background:#000d;display:grid;place-items:center;z-index:200}
.mock-box{background:linear-gradient(160deg,#26262f,#141418);border:1px solid var(--line);
  border-radius:14px;padding:1.5rem 2rem 2rem;max-width:780px;width:92%;position:relative;text-align:center}
.mock-box h3{font-family:'Oswald';color:var(--gold);margin-bottom:1.1rem;font-size:1.3rem}
.mock-close{position:absolute;top:.6rem;right:.85rem;background:none;border:none;
  color:var(--muted);font-size:1.3rem;cursor:pointer}
.mock-close:hover{color:var(--text)}
.mock-stage{min-height:400px;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 38%,#43434f,#15151a);border-radius:10px;padding:2.5rem 1rem}
.mock-note{color:var(--muted);font-size:.83rem;margin-top:1rem}
.m-empty{background:#2a2a31;border:2px dashed #555;display:grid;place-items:center;
  color:var(--muted);font-size:.8rem;font-family:'Oswald';letter-spacing:1px}

/* CD jewel-case mockup */
.m-cd{position:relative;width:440px;height:360px;display:flex;align-items:center;justify-content:center}
.m-cd-disc{position:absolute;right:6px;width:300px;height:300px;border-radius:50%;z-index:1;
  background-size:cover;background-position:center;background-color:#c9c9cf;
  box-shadow:0 0 0 1px #0007,inset 0 0 46px #0006;filter:drop-shadow(0 16px 24px #0009)}
.m-cd-disc i{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px;
  border-radius:50%;background:#ededf0;box-shadow:0 0 0 7px #0009}
.m-cd-case{position:relative;width:338px;height:338px;border-radius:5px;overflow:hidden;z-index:2;
  transform:perspective(1500px) rotateY(-14deg);box-shadow:0 0 0 2px #ffffff26,22px 26px 46px #000a}
.m-cd-cover{width:100%;height:100%;background-size:cover;background-position:center;
  background-color:#23232a}
.m-cd-gloss{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(116deg,#fff0 36%,#ffffff4d 45%,#fff0 53%,#fff0 80%,#ffffff26 86%,#fff0 92%)}

/* Vinyl record + sleeve mockup */
.m-vinyl{position:relative;width:480px;height:360px;display:flex;align-items:center;justify-content:center}
.m-record{position:absolute;right:14px;width:340px;height:340px;border-radius:50%;z-index:1;
  background:repeating-radial-gradient(circle at 50% 50%,#080808 0 2px,#181818 2px 4px);
  box-shadow:0 0 0 1px #000,inset 0 0 70px #000;filter:drop-shadow(0 16px 26px #000b)}
.m-record-label{position:absolute;left:50%;top:50%;width:142px;height:142px;margin:-71px;
  border-radius:50%;background-size:cover;background-position:center;background-color:#d8b15a;
  display:grid;place-items:center}
.m-record-label i{width:14px;height:14px;border-radius:50%;background:#0a0a0c;box-shadow:0 0 0 2px #fff7}
.m-sleeve{position:relative;width:338px;height:338px;z-index:2;background-size:cover;
  background-position:center;background-color:#23232a;
  box-shadow:0 0 0 1px #ffffff26,10px 0 22px #0009}

@media(max-width:1000px){
  .studio-wrap{grid-template-columns:200px 1fr 220px}
}