/* ============================================================
   FREEDOM Studio — animation lab
   ============================================================ */

.studio-head{display:flex;justify-content:space-between;gap:26px;align-items:flex-end;flex-wrap:wrap;margin-bottom:26px}
.studio-head h2{margin:14px 0 10px}
.studio-head p{max-width:62ch;font-size:1rem}

.studio{
  display:grid;grid-template-columns:238px minmax(0,1fr) 306px;gap:16px;
  border:1px solid var(--line);border-radius:20px;padding:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.012));
  box-shadow:var(--shadow);
}

/* ---------- sidebar ---------- */
.lab-side{display:flex;flex-direction:column;gap:6px;min-width:0}
.side-title{
  display:flex;justify-content:space-between;align-items:center;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted-2);padding:4px 6px 10px;
}
.side-title span{color:var(--mint)}
.group-lab{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted-2);padding:14px 6px 7px;display:flex;align-items:center;gap:8px;
}
.group-lab::after{content:"";flex:1;height:1px;background:var(--line)}
.mod{
  display:flex;gap:11px;align-items:center;text-align:left;width:100%;
  padding:9px 10px;border-radius:11px;border:1px solid transparent;background:none;
  cursor:pointer;transition:.2s;color:var(--muted);
}
.mod:hover{background:rgba(255,255,255,.05);color:var(--text)}
.mod.on{background:rgba(92,242,192,.1);border-color:rgba(92,242,192,.4);color:var(--text)}
.mod .mi{
  width:30px;height:30px;flex:0 0 auto;border-radius:8px;display:grid;place-items:center;
  background:rgba(255,255,255,.06);border:1px solid var(--line);font-family:var(--mono);font-size:.72rem;color:var(--blue);
}
.mod.on .mi{background:rgba(92,242,192,.16);border-color:rgba(92,242,192,.4);color:var(--mint)}
.mod .mt{min-width:0}
.mod .mt b{display:block;font-size:.85rem;font-weight:620;color:inherit}
.mod .mt i{font-style:normal;font-family:var(--mono);font-size:.63rem;color:var(--muted-2);letter-spacing:.05em}
.side-foot{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);display:grid;gap:9px}
.side-foot .row{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.7rem;color:var(--muted-2)}
.side-foot .row b{color:#cdd6e8;font-weight:600}

/* ---------- main stage ---------- */
.lab-main{min-width:0;display:flex;flex-direction:column;gap:11px}
.lab-toolbar{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.lt-name{display:flex;align-items:center;gap:11px;min-width:0}
.lt-name h3{font-size:1.06rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lt-btns{display:flex;gap:7px;align-items:center}
.ibtn{
  width:36px;height:34px;border-radius:9px;border:1px solid var(--line-strong);
  background:rgba(255,255,255,.05);color:var(--muted);display:grid;place-items:center;cursor:pointer;transition:.2s;
}
.ibtn:hover{background:rgba(255,255,255,.11);color:var(--text);transform:translateY(-1px)}
.ibtn.on{background:rgba(92,242,192,.14);border-color:rgba(92,242,192,.45);color:var(--mint)}
.ibtn svg{width:15px;height:15px}
.fps-pill{
  font-family:var(--mono);font-size:.72rem;color:var(--muted);padding:7px 11px;border-radius:9px;
  border:1px solid var(--line);background:rgba(0,0,0,.3);display:flex;gap:6px;align-items:center;
}
.fps-pill b{color:var(--mint);font-weight:600;min-width:22px;text-align:right}

.stage{
  position:relative;height:clamp(400px,56vh,600px);border-radius:15px;overflow:hidden;
  background:radial-gradient(120% 120% at 50% 0%,#0a1020 0%,#05070e 55%,#04060c 100%);
  border:1px solid var(--line);cursor:crosshair;touch-action:none;
}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.stage #cvgl{display:none}
.stage #cvfx{display:none;z-index:2;pointer-events:none}
.stage.fx #cvfx{display:block}
.stage.gl #cv2d{display:none}
.stage.gl #cvgl{display:block}
.stage::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:15px;
  box-shadow:inset 0 0 60px -18px rgba(92,242,192,.28);
}
.stage-hint{
  position:absolute;left:14px;top:13px;z-index:3;font-family:var(--mono);font-size:.7rem;
  color:rgba(220,232,250,.75);background:rgba(4,6,12,.62);border:1px solid var(--line);
  padding:5px 10px;border-radius:7px;backdrop-filter:blur(6px);pointer-events:none;
  max-width:calc(100% - 40px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.stage-stats{
  position:absolute;right:14px;bottom:13px;z-index:3;font-family:var(--mono);font-size:.68rem;
  color:var(--muted-2);background:rgba(4,6,12,.6);border:1px solid var(--line);
  padding:5px 10px;border-radius:7px;pointer-events:none;max-width:calc(100% - 28px);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.stage-pause{
  position:absolute;inset:0;z-index:4;display:none;place-items:center;pointer-events:none;
  background:rgba(4,6,12,.35);backdrop-filter:blur(1.5px);
}
.stage-pause.show{display:grid}
.stage-pause span{
  font-family:var(--mono);font-size:.8rem;letter-spacing:.3em;text-transform:uppercase;
  border:1px solid var(--line-strong);background:rgba(6,9,16,.85);padding:11px 22px;border-radius:100px;color:var(--mint);
}

.stage-foot{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.pals{display:flex;gap:7px;flex-wrap:wrap}
.pal{
  display:flex;align-items:center;gap:8px;padding:6px 12px 6px 7px;border-radius:100px;cursor:pointer;
  border:1px solid var(--line);background:rgba(255,255,255,.03);font-family:var(--mono);
  font-size:.68rem;color:var(--muted);transition:.2s;
}
.pal:hover{border-color:var(--line-strong);color:var(--text)}
.pal.on{border-color:rgba(92,242,192,.5);background:rgba(92,242,192,.09);color:var(--mint)}
.pal i{width:34px;height:14px;border-radius:100px;display:block}
.seed{font-family:var(--mono);font-size:.72rem;color:var(--muted-2)}
.seed b{color:var(--mint);font-weight:600}
.mod-desc{font-size:.9rem;color:var(--muted);border-top:1px solid var(--line);padding-top:11px}
.mod-desc b{color:#dbe4f5;font-weight:600}

/* ---------- right panel ---------- */
.lab-panel{display:flex;flex-direction:column;gap:10px;min-width:0}
.p-title{
  font-family:var(--mono);font-size:.67rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);
  padding:8px 2px 3px;display:flex;justify-content:space-between;align-items:center;
}
.p-title::after{content:"";flex:1;height:1px;background:var(--line);margin-left:10px}
#params{display:grid;gap:12px}

.ctrl{display:block}
.ctrl-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:6px}
.ctrl-head span{font-size:.82rem;color:#b7c1d6}
.ctrl-val{font-family:var(--mono);font-size:.74rem;color:var(--mint);font-weight:600}
.ctrl input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:5px;border-radius:5px;outline:none;
  background:linear-gradient(90deg,rgba(92,242,192,.75) var(--fill,50%),rgba(255,255,255,.1) var(--fill,50%));
  cursor:pointer;
}
.ctrl input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:15px;height:15px;border-radius:50%;background:#eafff7;
  border:3px solid #0b1220;box-shadow:0 0 0 2px rgba(92,242,192,.75),0 3px 10px rgba(0,0,0,.6);cursor:grab;
}
.ctrl input[type=range]::-moz-range-thumb{
  width:13px;height:13px;border-radius:50%;background:#eafff7;border:3px solid #0b1220;
  box-shadow:0 0 0 2px rgba(92,242,192,.75);cursor:grab;
}
.ctrl select,.ctrl input[type=text]{
  width:100%;padding:9px 11px;border-radius:9px;border:1px solid var(--line-strong);
  background:rgba(0,0,0,.34);font-size:.85rem;outline:none;transition:.2s;font-family:var(--mono);
}
.ctrl select:focus,.ctrl input[type=text]:focus{border-color:rgba(92,242,192,.55);box-shadow:0 0 0 3px rgba(92,242,192,.12)}
.ctrl.check{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 11px;border:1px solid var(--line);border-radius:9px;background:rgba(255,255,255,.03)}
.ctrl.check span{font-size:.83rem;color:#b7c1d6}
.switch{position:relative;width:38px;height:21px;flex:0 0 auto;cursor:pointer}
.switch input{opacity:0;width:100%;height:100%;margin:0;cursor:pointer;position:relative;z-index:2}
.switch i{
  position:absolute;inset:0;border-radius:100px;background:rgba(255,255,255,.14);transition:.25s;
}
.switch i::after{
  content:"";position:absolute;top:3px;left:3px;width:15px;height:15px;border-radius:50%;
  background:#cfd8ea;transition:.25s;
}
.switch input:checked + i{background:rgba(92,242,192,.42)}
.switch input:checked + i::after{transform:translateX(17px);background:#eafff7}

#presets{display:flex;flex-wrap:wrap;gap:7px}
#presets .chip{font-size:.74rem;padding:6px 12px}
.api{
  display:block;font-family:var(--mono);font-size:.7rem;line-height:1.7;color:#9fe9d0;
  background:rgba(0,0,0,.4);border:1px solid var(--line);border-radius:11px;padding:12px;
  white-space:pre-wrap;word-break:break-all;max-height:150px;overflow:auto;
}
.api .k{color:var(--blue)}
.api .s{color:var(--amber)}

/* ---------- post-FX rack ---------- */
.fxbox{display:grid;gap:12px}

/* ---------- source image ---------- */
.imgbox{display:grid;gap:10px}
.img-prev{
  height:92px;border-radius:11px;border:1px dashed var(--line-strong);background:rgba(0,0,0,.3);
  display:grid;place-items:center;overflow:hidden;
}
.img-prev span{font-family:var(--mono);font-size:.7rem;color:var(--muted-2);letter-spacing:.08em}
.img-prev img{width:100%;height:100%;object-fit:cover;display:block}
.img-acts{display:flex;gap:8px}
.img-acts .btn{flex:1}
.img-note{font-size:.74rem;color:var(--muted-2);line-height:1.5}

/* ---------- filmstrip ---------- */
.filmstrip{display:flex;align-items:center;gap:12px;min-height:54px;border-top:1px solid var(--line);padding-top:11px}
.fs-track{display:flex;gap:9px;overflow-x:auto;padding-bottom:4px;flex:1;min-width:0}
.fs-empty{font-family:var(--mono);font-size:.72rem;color:var(--muted-2)}
.fs-empty kbd{
  font-family:var(--mono);font-size:.68rem;background:rgba(255,255,255,.08);border:1px solid var(--line-strong);
  border-bottom-width:2px;border-radius:5px;padding:1px 6px;color:#d5deef;
}
.fs-thumb{
  position:relative;flex:0 0 auto;width:88px;height:52px;border-radius:8px;overflow:hidden;
  border:1px solid var(--line);cursor:pointer;padding:0;background:#05070e;transition:.2s;
}
.fs-thumb:hover{border-color:rgba(92,242,192,.5);transform:translateY(-2px)}
.fs-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.fs-thumb .fs-tag{
  position:absolute;left:0;right:0;bottom:0;font-family:var(--mono);font-size:.55rem;color:#cfe6dd;
  background:rgba(4,6,12,.78);padding:2px 4px;text-align:center;letter-spacing:.04em;
  opacity:0;transition:.2s;
}
.fs-thumb:hover .fs-tag{opacity:1}
.fs-thumb .fs-dl{
  position:absolute;top:3px;right:3px;width:19px;height:19px;border-radius:6px;display:grid;place-items:center;
  background:rgba(4,6,12,.8);border:1px solid var(--line-strong);color:var(--mint);font-size:.7rem;line-height:1;
}
.fs-thumb .fs-dl:hover{background:rgba(92,242,192,.25)}

/* slot-machine flash */
.stage.slot::before{
  content:"";position:absolute;inset:0;z-index:5;pointer-events:none;
  background:rgba(92,242,192,.14);animation:slotflash .14s linear infinite;
}
@keyframes slotflash{0%{opacity:.15}50%{opacity:.6}100%{opacity:.15}}

/* ---------- notes / tips ---------- */
.studio-notes{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:20px}
.note{padding:20px 22px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.03)}
.note h4{font-size:.95rem;margin-bottom:8px;display:flex;gap:9px;align-items:center}
.note h4 svg{width:16px;height:16px;color:var(--mint)}
.note p{font-size:.86rem}
.note kbd{
  font-family:var(--mono);font-size:.7rem;background:rgba(255,255,255,.08);border:1px solid var(--line-strong);
  border-bottom-width:2px;border-radius:6px;padding:1px 7px;color:#d5deef;
}

.tips{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:16px}
.tip{
  padding:17px 18px;border-radius:13px;border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01));transition:.25s;cursor:pointer;
}
.tip:hover{transform:translateY(-4px);border-color:rgba(110,168,255,.45);box-shadow:0 20px 40px -26px rgba(110,168,255,.7)}
.tip b{display:block;font-size:.88rem;margin-bottom:6px}
.tip span{font-size:.8rem;color:var(--muted)}
.tip i{font-style:normal;font-family:var(--mono);font-size:.63rem;color:var(--blue);letter-spacing:.1em;text-transform:uppercase;display:block;margin-bottom:9px}

@media(max-width:1180px){
  .studio{grid-template-columns:210px minmax(0,1fr);}
  .lab-panel{grid-column:1 / -1;border-top:1px solid var(--line);padding-top:14px}
  .tips{grid-template-columns:1fr 1fr}
}
@media(max-width:820px){
  .studio{grid-template-columns:1fr}
  .lab-side{flex-direction:row;overflow-x:auto;gap:8px;padding-bottom:6px}
  .lab-side .side-title,.lab-side .side-foot,.lab-side .group-lab{display:none}
  .mod{width:auto;flex:0 0 auto}
  .studio-notes{grid-template-columns:1fr}
  .tips{grid-template-columns:1fr}
  .stage{height:56vh;min-height:330px}
}