/* ===== Evie Studio — creator portal (extends evie.css tokens) ===== */
.studio-body{overflow-x:hidden;background:var(--ink);}
/* author display rules (flex/grid) beat the UA [hidden] rule — enforce it */
[hidden]{display:none !important;}
.nav-wallet{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.nav-links a.active{color:var(--cream);}
.nav-links a.active::after{content:"";display:block;height:2px;background:var(--red);margin-top:4px;box-shadow:0 0 10px rgba(244,63,63,.6);}

/* layout: rail | work | gallery */
.studio{display:grid;grid-template-columns:248px 1fr 320px;gap:0;min-height:100vh;padding-top:64px;}
.studio>*{min-width:0;}

/* ---- tool rail ---- */
.rail{border-right:1px solid var(--hair);padding:26px 18px;display:flex;flex-direction:column;gap:10px;
  background:linear-gradient(180deg,rgba(18,18,18,.6),rgba(10,10,10,.2));position:sticky;top:64px;height:calc(100vh - 64px);}
.rail-head{margin-bottom:10px;}
.rail-sub{font-size:13px;color:var(--muted);margin-top:12px;line-height:1.5;}
.tool{display:flex;align-items:center;gap:13px;width:100%;text-align:left;cursor:pointer;font-family:inherit;
  background:rgba(248,236,220,.03);border:1px solid var(--hair);color:var(--cream);padding:13px 14px;transition:.2s;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);}
.tool:hover{border-color:rgba(244,63,63,.4);background:rgba(248,236,220,.05);}
.tool.active{border-color:var(--red);background:rgba(244,63,63,.10);box-shadow:0 0 30px rgba(244,63,63,.12) inset;}
.tool-ic{width:34px;height:34px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:18px;
  color:var(--red);border:1px solid rgba(244,63,63,.35);clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);}
.tool.active .tool-ic{background:rgba(244,63,63,.16);}
.tool-tx{display:flex;flex-direction:column;gap:2px;}
.tool-tx b{font-size:15px;font-weight:800;}
.tool-tx i{font-size:12px;color:var(--muted);font-style:normal;}
.rail-evie{margin-top:auto;display:flex;align-items:center;gap:13px;padding:13px 14px;border:1px solid rgba(255,180,122,.35);
  background:rgba(255,180,122,.06);clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);transition:.2s;}
.rail-evie:hover{border-color:var(--coral);background:rgba(255,180,122,.12);}
.re-orb{width:34px;height:34px;flex-shrink:0;border-radius:50%;background:radial-gradient(circle at 38% 34%,var(--coral),var(--red) 64%,#7a1414);box-shadow:0 0 18px rgba(244,63,63,.5);}

/* ---- workspace ---- */
.work{padding:34px clamp(20px,3vw,44px) 60px;max-width:840px;margin:0 auto;width:100%;}
.work-title{font-weight:900;font-size:clamp(30px,4vw,46px);letter-spacing:-.025em;}
.work-desc{font-size:16px;color:var(--muted);margin-top:8px;max-width:54ch;line-height:1.55;}

/* source image */
.src{margin-top:26px;}
.src-drop{position:relative;border:1.5px dashed var(--hair);background:rgba(248,236,220,.02);
  clip-path:var(--chamfer);min-height:180px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.2s;overflow:hidden;}
.src-drop:hover,.src-drop.over{border-color:rgba(244,63,63,.5);background:rgba(244,63,63,.04);}
.src-empty{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--muted);text-align:center;padding:24px;}
.src-plus{font-size:34px;color:var(--red);line-height:1;}
.src-empty b{color:var(--cream);font-size:16px;}
.src-empty i{font-size:13px;font-style:normal;}
.src-img{width:100%;max-height:340px;object-fit:contain;background:#000;}
.src-clear{position:absolute;top:10px;right:10px;width:30px;height:30px;border:none;cursor:pointer;color:#fff;
  background:rgba(10,10,10,.75);border:1px solid var(--hair);font-size:14px;
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);}

/* motion presets */
.motion{margin-top:26px;}
.motion-lab{font-size:12px;font-weight:800;letter-spacing:.18em;color:var(--red);}
.motion-lab span{color:var(--muted);font-weight:600;letter-spacing:.02em;}
.motion-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px;}
.mtile{cursor:pointer;font-family:inherit;text-align:left;background:rgba(248,236,220,.03);border:1px solid var(--hair);
  color:var(--cream);padding:0;overflow:hidden;transition:.18s;position:relative;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);}
.mtile:hover{border-color:rgba(244,63,63,.45);}
.mtile.active{border-color:var(--red);box-shadow:0 0 24px rgba(244,63,63,.18);}
.mtile.active::after{content:"";position:absolute;top:7px;right:7px;width:9px;height:9px;border-radius:50%;
  background:var(--red);box-shadow:0 0 10px rgba(244,63,63,.8);}
.mt-vid{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;background:#000;}
.mtile.no-vid .mt-vid{display:none;}
.mtile.no-vid{padding:11px 12px;}
.mt-cap{display:block;padding:8px 11px 10px;}
.mtile.active .mt-cap{background:rgba(244,63,63,.12);}
.mtile b{display:block;font-size:13px;font-weight:700;}
.mtile i{display:block;font-size:11px;color:var(--muted);font-style:normal;margin-top:2px;}

/* prompt */
.prompt-wrap{margin-top:26px;}
#prompt{width:100%;background:rgba(248,236,220,.04);border:1px solid var(--hair);color:var(--cream);font-family:inherit;
  font-size:16px;line-height:1.55;padding:16px 18px;resize:vertical;outline:none;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);}
#prompt:focus{border-color:rgba(244,63,63,.5);}
#prompt::placeholder{color:var(--muted2);}

/* params */
.params{display:flex;flex-wrap:wrap;gap:22px;margin-top:22px;}
.param label{display:block;font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--muted);margin-bottom:9px;text-transform:uppercase;}
.seg{display:inline-flex;border:1px solid var(--hair);clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);overflow:hidden;}
.seg button{background:transparent;border:none;border-right:1px solid var(--hair);color:var(--muted);font-family:inherit;
  font-size:13px;font-weight:600;padding:9px 14px;cursor:pointer;transition:.18s;}
.seg button:last-child{border-right:none;}
.seg button.active{background:var(--red);color:#fff;}
.seg button:hover:not(.active){color:var(--cream);}
#pSeconds{min-width:230px;}
#seconds{width:100%;accent-color:var(--red);height:4px;cursor:pointer;}

/* runbar */
.runbar{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:30px;
  border-top:1px solid var(--hair);padding-top:24px;}
.quote{display:flex;flex-direction:column;gap:2px;}
.q-credits{font-size:26px;font-weight:900;color:var(--coral);font-variant-numeric:tabular-nums;}
.q-note{font-size:12px;color:var(--muted2);letter-spacing:.02em;}
.btn.run{min-width:170px;justify-content:center;}
.btn.run[disabled]{opacity:.5;cursor:not-allowed;box-shadow:none;transform:none;}

/* result */
.result{margin-top:30px;border:1px solid var(--hair);clip-path:var(--chamfer);overflow:hidden;background:#000;}
.result-stage{display:flex;align-items:center;justify-content:center;background:#000;min-height:200px;}
.result-stage img,.result-stage video{width:100%;max-height:64vh;object-fit:contain;}
.result-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:14px 18px;background:rgba(10,10,10,.7);border-top:1px solid var(--hair);}
.result-meta{font-size:13px;color:var(--muted);}
.result-meta b{color:var(--coral);font-variant-numeric:tabular-nums;}
.result-acts{display:flex;gap:9px;}
.rb{background:rgba(248,236,220,.05);border:1px solid var(--hair);color:var(--cream);font-family:inherit;font-size:13px;
  font-weight:600;padding:8px 14px;cursor:pointer;transition:.18s;
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);}
.rb:hover{border-color:rgba(244,63,63,.45);color:var(--cream);}

/* working */
.working{margin-top:30px;border:1px solid var(--hair);clip-path:var(--chamfer);padding:40px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:10px;background:rgba(18,18,18,.5);}
.working b{font-size:17px;}
.working i{font-size:13px;color:var(--muted);font-style:normal;}
.spin{width:34px;height:34px;border:3px solid var(--hair);border-top-color:var(--red);border-radius:50%;animation:spin 1s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ---- gallery ---- */
.gallery{border-left:1px solid var(--hair);padding:26px 18px;position:sticky;top:64px;height:calc(100vh - 64px);overflow-y:auto;
  background:linear-gradient(180deg,rgba(18,18,18,.4),rgba(10,10,10,.1));}
.gal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;}
.gal-refresh{background:none;border:1px solid var(--hair);color:var(--muted);width:32px;height:32px;cursor:pointer;font-size:15px;
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);transition:.2s;}
.gal-refresh:hover{color:var(--cream);border-color:rgba(244,63,63,.4);}
.gal-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.gcard{position:relative;aspect-ratio:1/1;border:1px solid var(--hair);overflow:hidden;cursor:pointer;background:#000;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);transition:.2s;}
.gcard:hover{border-color:rgba(244,63,63,.5);}
.gcard img,.gcard video{width:100%;height:100%;object-fit:cover;}
.gcard .gtag{position:absolute;top:6px;left:6px;font-size:10px;font-weight:700;letter-spacing:.06em;color:#fff;
  background:rgba(10,10,10,.7);padding:3px 7px;clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px);}
.gal-empty{color:var(--muted);font-size:13px;line-height:1.6;margin-top:10px;}

/* toast */
.toast{position:fixed;left:50%;bottom:30px;transform:translateX(-50%);z-index:200;max-width:min(520px,90vw);
  background:rgba(18,18,18,.97);border:1px solid rgba(244,63,63,.5);color:var(--cream);font-size:14px;line-height:1.5;
  padding:14px 20px;box-shadow:0 20px 60px rgba(0,0,0,.6);clip-path:var(--chamfer);}
.toast a{color:var(--coral);text-decoration:underline;}

/* ---- responsive ---- */
@media(max-width:1180px){
  .studio{grid-template-columns:210px 1fr;}
  .gallery{grid-column:1/-1;position:static;height:auto;border-left:none;border-top:1px solid var(--hair);}
  .gal-grid{grid-template-columns:repeat(4,1fr);}
}
@media(max-width:760px){
  .nav-links{display:none;} .nav-burger{display:flex;}
  .studio{grid-template-columns:1fr;}
  .rail{position:static;height:auto;flex-direction:row;flex-wrap:wrap;border-right:none;border-bottom:1px solid var(--hair);}
  .rail-head{flex-basis:100%;} .rail .tool{flex:1 1 100%;min-width:0;} .rail-evie{flex-basis:100%;margin-top:6px;}
  .motion-grid{grid-template-columns:repeat(2,1fr);}
  .gal-grid{grid-template-columns:1fr 1fr;}
  .runbar{flex-direction:column;align-items:stretch;} .btn.run{width:100%;}
}
@media(prefers-reduced-motion:reduce){ .spin{animation:none;} }