/* ============================================================
   Visage — studio
   Same neutral near-black and acid lime as the public pages.
   Panels separate by fill, not by heavy outlines.
   ============================================================ */

:root{
  --bg:      #0a0a0b;
  --bg-2:    #101012;
  --bg-3:    #161619;
  --bg-4:    #1d1d21;
  --line:    rgba(255,255,255,.09);
  --line-2:  rgba(255,255,255,.055);
  --txt:     #f4f4f6;
  --txt-2:   #9a9aa3;
  --txt-3:   #63636c;
  --acc:     #d4ff3f;
  --danger:  #ff6b6b;
  --r:       14px;
  --r-sm:    10px;

  /* Aliases the engine writes into inline styles. Keep them. */
  --muted:     var(--txt-3);
  --accent:    var(--acc);
  --accent-2:  var(--acc);
  --surface:   var(--bg-3);

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto,
          "Helvetica Neue", Arial, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box }

body.studio{
  margin:0;
  background:var(--bg);
  color:var(--txt);
  font-family:var(--sans);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}

h1,h2,h3,h4{ margin:0; font-weight:600; letter-spacing:-.015em }

a{ color:inherit; text-decoration:none }
img,svg{ display:block; max-width:100% }

::-webkit-scrollbar{ width:10px; height:10px }
::-webkit-scrollbar-track{ background:transparent }
::-webkit-scrollbar-thumb{ background:var(--bg-4); border-radius:6px; border:3px solid var(--bg) }
::-webkit-scrollbar-thumb:hover{ background:#2a2a2f }

/* ---------------- buttons ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 18px;
  border:1px solid transparent;
  border-radius:var(--r-sm);
  background:var(--acc);
  color:#0a0a0b;
  font:inherit; font-size:13.5px; font-weight:600; letter-spacing:-.005em;
  cursor:pointer;
  transition:transform .12s ease, background .12s ease, border-color .12s ease,
             color .12s ease, opacity .12s ease;
  white-space:nowrap;
}
.btn svg{ width:17px; height:17px; flex:none }
.btn:hover{ background:#e2ff6b; transform:translateY(-1px) }
.btn:active{ transform:translateY(0) }
.btn:focus-visible{ outline:2px solid var(--acc); outline-offset:2px }
.btn:disabled{ opacity:.36; cursor:not-allowed; transform:none; pointer-events:none }

.btn.ghost{ background:transparent; color:var(--txt); border-color:var(--line) }
.btn.ghost:hover{ background:var(--bg-3); border-color:rgba(255,255,255,.18); transform:none }

.btn.full{ width:100% }
.btn.tiny{ padding:6px 13px; font-size:12.5px; border-radius:8px }
.btn.sm{ padding:6px 11px; font-size:12px }

.btn.rec{ background:var(--danger); color:#fff }
.btn.rec:hover{ background:#ff8080 }

/* ---------------- header ---------------- */
.top{
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  height:58px; padding:0 18px;
  background:rgba(10,10,11,.78);
  backdrop-filter:blur(18px) saturate(1.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  border-bottom:1px solid var(--line-2);
}
.brand{ display:inline-flex; align-items:center; gap:10px; font-size:14.5px; font-weight:600 }
.brand svg{ width:25px; height:25px; color:var(--acc); flex:none }

.top-r{ display:flex; align-items:center; gap:10px }

.acct{
  display:inline-flex; align-items:baseline; gap:6px;
  padding:6px 13px;
  background:var(--bg-3);
  border:1px solid var(--line);
  border-radius:999px;
}
.acct-lab{ font-size:12px; color:var(--txt-2); font-weight:500 }
.acct-num{
  font-size:13.5px; font-weight:700; color:var(--acc);
  font-variant-numeric:tabular-nums;
}
.acct-suf{ font-size:11px; color:var(--txt-3) }

/* ---------------- try-out bar ---------------- */
.trialbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:11px 18px;
  background:rgba(212,255,63,.07);
  border-bottom:1px solid rgba(212,255,63,.2);
  transition:background .2s ease, border-color .2s ease;
}
.trialbar div{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap }
.trialbar b{ font-size:13px; font-weight:600; color:var(--acc) }
.trialbar span{ font-size:12.5px; color:var(--txt-2) }
/* Armed but not spending: the budget only drains while frames come back. */
.trialbar.ready{ background:rgba(255,255,255,.025); border-bottom-color:var(--line) }
.trialbar.ready b{ color:var(--txt-2); font-weight:500 }
.trialbar.urgent{ background:rgba(255,107,107,.1); border-color:rgba(255,107,107,.32) }
.trialbar.urgent b{ color:#ff9d9d }

/* ---------------- layout ---------------- */
.layout{
  display:grid;
  grid-template-columns:318px minmax(0,1fr) 318px;
  gap:16px;
  padding:16px;
  height:calc(100vh - 58px);
}
body.studio:has(.trialbar) .layout{ height:calc(100vh - 105px) }

.rail{ display:flex; flex-direction:column; gap:14px; overflow-y:auto; overscroll-behavior:contain }
.rail::-webkit-scrollbar{ width:8px }
.rail::-webkit-scrollbar-thumb{ border-width:2px }

/* ---------------- cards ---------------- */
.card{
  padding:16px;
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:var(--r);
  flex:none;
}
.card-h{
  display:flex; align-items:center; gap:9px;
  margin-bottom:14px;
  font-size:11px; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase;
  color:var(--txt-2);
}
.card-h svg{ width:15px; height:15px; color:var(--txt-3); flex:none }
.card-h .sp{ flex:1 }
.card-h .state{
  font-size:11px; letter-spacing:0; text-transform:none;
  color:var(--txt-3); font-weight:500;
}

/* step number */
.card-h .n{
  display:grid; place-items:center;
  width:19px; height:19px; flex:none;
  border-radius:6px;
  background:var(--bg-4); border:1px solid var(--line);
  font-size:10.5px; font-weight:700; color:var(--txt-3);
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.card-h .n.done{ background:var(--acc); border-color:var(--acc); color:#0a0a0b }

/* ---------------- drop zone ---------------- */
.drop{
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:5px;
  min-height:132px; padding:20px 14px;
  border:1.5px dashed var(--line);
  border-radius:var(--r-sm);
  background:var(--bg);
  color:var(--txt-2);
  text-align:center; font-size:13px;
  cursor:pointer;
  transition:border-color .14s ease, background .14s ease, color .14s ease;
}
.drop svg{ width:26px; height:26px; color:var(--txt-3); margin-bottom:3px; transition:color .14s ease }
.drop b{ color:var(--txt); font-weight:600 }
.drop span{ font-size:11.5px; color:var(--txt-3) }
.drop:hover{ border-color:rgba(212,255,63,.45); color:var(--txt) }
.drop:hover svg{ color:var(--acc) }
.drop.over{ border-color:var(--acc); background:rgba(212,255,63,.06) }
.drop.has{
  min-height:64px;
  border-style:solid; border-color:rgba(212,255,63,.3);
  background:rgba(212,255,63,.05);
}
.drop.has svg{ color:var(--acc); width:22px; height:22px; margin-bottom:0 }

/* ---------------- photo row ---------------- */
.row{ display:flex; gap:11px; align-items:center; margin-top:12px }
.row img{
  width:58px; height:58px; flex:none;
  object-fit:cover;
  border-radius:9px;
  border:1px solid var(--line);
  background:var(--bg-4);
}
.row .meta{ min-width:0; flex:1 }
.row .nm{
  font-size:12.5px; font-weight:600; color:var(--txt);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.row .sz{ font-size:11.5px; color:var(--txt-3); font-variant-numeric:tabular-nums }

/* ---------------- fields ---------------- */
.field{ margin-bottom:12px }
.field:last-child{ margin-bottom:0 }

.lab{
  display:flex; align-items:baseline; justify-content:space-between; gap:8px;
  margin-bottom:6px;
  font-size:12px; font-weight:600; color:var(--txt-2);
}
.lab b{
  font-size:11.5px; font-weight:600; color:var(--txt-3);
  font-variant-numeric:tabular-nums;
}

select, input[type=text], input[type=password], input[type=number], input[type=email]{
  width:100%;
  padding:9px 12px;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  color:var(--txt);
  font:inherit; font-size:13.5px;
  transition:border-color .13s ease, box-shadow .13s ease;
  appearance:none;
}
select{
  padding-right:30px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%2363636c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 10px center;
  background-size:12px;
  cursor:pointer;
}
select:focus, input:focus{
  outline:none;
  border-color:var(--acc);
  box-shadow:0 0 0 3px rgba(212,255,63,.13);
}
select option{ background:var(--bg-3); color:var(--txt) }

.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:10px }
.grid2 .field{ margin-bottom:0 }

/* range */
input[type=range]{
  -webkit-appearance:none; appearance:none;
  width:100%; height:20px;
  background:transparent; cursor:pointer;
}
input[type=range]::-webkit-slider-runnable-track{
  height:3px; border-radius:3px;
  background:var(--bg-4);
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:13px; height:13px; margin-top:-5px;
  border-radius:50%;
  background:var(--acc);
  border:none;
  transition:transform .12s ease, box-shadow .12s ease;
}
input[type=range]::-webkit-slider-thumb:hover{ transform:scale(1.18); box-shadow:0 0 0 4px rgba(212,255,63,.16) }
input[type=range]::-moz-range-track{ height:3px; border-radius:3px; background:var(--bg-4) }
input[type=range]::-moz-range-thumb{
  width:13px; height:13px; border-radius:50%;
  background:var(--acc); border:none;
}

/* ---------------- pills ---------------- */
.pills{ display:flex; flex-wrap:wrap; gap:6px }
.pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 11px;
  background:var(--bg-3);
  border:1px solid var(--line);
  border-radius:999px;
  font-size:11.5px; color:var(--txt-2);
}
.pill b{ color:var(--txt); font-weight:600; font-variant-numeric:tabular-nums }

.dot{ width:6px; height:6px; border-radius:50%; background:var(--txt-3); flex:none }
.dot.live{ background:var(--acc); box-shadow:0 0 0 3px rgba(212,255,63,.18) }
.dot.cam{ background:#60a5fa }
.dot.rec{ background:var(--danger); animation:blink 1.1s ease-in-out infinite }
.dot.err{ background:var(--danger) }

@keyframes blink{ 0%,100%{ opacity:1 } 50%{ opacity:.25 } }

/* ---------------- consent ---------------- */
.consent{
  display:flex; align-items:flex-start; gap:10px;
  cursor:pointer;
  font-size:13px; color:var(--txt-2); line-height:1.5;
}
.consent input{
  width:16px; height:16px; margin:2px 0 0; flex:none;
  accent-color:var(--acc); cursor:pointer;
}
.consent.big{
  padding:14px;
  margin-bottom:16px;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  font-size:13.5px; color:var(--txt);
}

.warn{
  margin-top:12px; padding:12px 13px;
  border:1px solid rgba(212,255,63,.2);
  border-left:3px solid var(--acc);
  border-radius:8px;
  background:rgba(212,255,63,.045);
  font-size:12px; line-height:1.55; color:var(--txt-2);
}
.warn b{ display:block; margin-bottom:3px; color:var(--txt); font-weight:600 }

.hint{ font-size:11.5px; color:var(--txt-3); line-height:1.55 }
.hint b{ color:var(--txt-2); font-weight:600 }
.card > .hint{ margin-top:10px }

/* ---------------- stage ---------------- */
.stage{
  position:relative;
  display:flex; flex-direction:column;
  min-width:0;
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
}
.stage::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(560px 340px at 50% 0%, rgba(212,255,63,.05), transparent 68%);
}

.stage-inner{
  position:relative;
  flex:1; min-height:0;
  display:grid; place-items:center;
  padding:18px;
  background:
    linear-gradient(45deg, rgba(255,255,255,.012) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.012) 75%),
    linear-gradient(45deg, rgba(255,255,255,.012) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.012) 75%);
  background-size:22px 22px;
  background-position:0 0, 11px 11px;
}

.stage-inner canvas{
  max-width:100%; max-height:100%;
  aspect-ratio:4/3;
  object-fit:contain;
  border-radius:10px;
  background:#000;
  box-shadow:0 26px 60px -34px rgba(0,0,0,.95);
}

.badge{
  position:absolute; top:12px; left:12px;
  display:none; align-items:center; gap:6px;
  padding:5px 11px;
  background:var(--danger);
  color:#fff;
  border-radius:999px;
  font-size:10.5px; font-weight:700; letter-spacing:.11em;
}
.badge.show{ display:inline-flex; animation:blink 1.4s ease-in-out infinite }

/* empty state */
.empty{
  position:absolute; inset:0;
  display:grid; place-items:center;
  padding:24px;
  text-align:center;
  pointer-events:none;
  background:rgba(16,16,18,.86);
  backdrop-filter:blur(3px);
  z-index:2;
}
.empty > div{ max-width:380px }
.empty .ico{
  display:grid; place-items:center;
  width:52px; height:52px; margin:0 auto 16px;
  border-radius:15px;
  background:var(--bg-3); border:1px solid var(--line);
  color:var(--txt-3);
}
.empty .ico svg{ width:25px; height:25px }
.empty h3{ font-size:16.5px; margin-bottom:8px; letter-spacing:-.02em }
.empty p{ font-size:13px; color:var(--txt-2); margin:0; line-height:1.6 }

/* camera preview */
.pip-wrap{
  position:absolute; right:12px; bottom:12px; z-index:3;
  display:none;
  padding:5px;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:11px;
  box-shadow:0 14px 34px -18px rgba(0,0,0,.95);
}
.pip-wrap.on{ display:block }
.pip{
  display:block;
  width:132px; height:99px;
  object-fit:cover;
  border-radius:7px;
  background:#000;
  transform:scaleX(-1);
}
.pip-label{
  position:absolute; top:10px; left:10px;
  padding:2px 7px;
  background:rgba(10,10,11,.75);
  border-radius:5px;
  font-size:9.5px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--txt-2);
}

/* the returned cloud frames — off-stage but still painted */
.offstage{
  position:fixed; left:-9999px; top:0;
  width:4px; height:4px;
  opacity:.01;
  pointer-events:none;
}

/* status line under the stage */
.hint-bar{
  min-height:20px; padding:0 18px 12px;
  font-size:12px; color:var(--txt-2);
  text-align:center;
}

/* ---------------- output card ---------------- */
/* Hidden until a recording actually exists — app.js adds .show */
.dl{ display:none }
.dl.show{ display:block }
.btn-row{ display:grid; grid-template-columns:1fr 1fr; gap:8px }

.stats{ display:grid; grid-template-columns:1fr 1fr; gap:8px }
.stat{
  padding:11px 12px;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  text-align:center;
}
.stat b{
  display:block;
  font-size:19px; font-weight:600; letter-spacing:-.02em;
  color:var(--txt);
  font-variant-numeric:tabular-nums;
}
.stat span{
  display:block; margin-top:2px;
  font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--txt-3);
}

/* ---------------- notices ---------------- */
.notice{
  margin-top:12px; padding:11px 12px;
  border-radius:var(--r-sm);
  font-size:12px; line-height:1.55;
  display:flex; align-items:flex-start; gap:9px;
}
/* An unsized inline SVG in a flex row stretches to fill — pin it. */
.notice svg{ width:15px; height:15px; flex:none; margin-top:1px; opacity:.9 }
.notice > span{ min-width:0; flex:1 }
.notice.warn{ background:rgba(255,180,80,.08); border:1px solid rgba(255,180,80,.26); color:#ffd6a0 }
.notice.good{ background:rgba(212,255,63,.07); border:1px solid rgba(212,255,63,.26); color:var(--acc) }
.notice.info{ background:rgba(255,255,255,.04); border:1px solid var(--line); color:var(--txt-2) }
.notice.bad{ background:rgba(255,107,107,.08); border:1px solid rgba(255,107,107,.28); color:#ffb4b4 }

/* ---------------- toasts ---------------- */
.toast-wrap{
  position:fixed; left:50%; bottom:22px; z-index:100;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  transform:translateX(-50%);
  pointer-events:none;
}
.toast{
  display:flex; align-items:center; gap:9px;
  max-width:min(92vw, 460px);
  padding:11px 16px;
  background:var(--bg-3);
  border:1px solid var(--line);
  border-radius:11px;
  box-shadow:0 20px 44px -22px rgba(0,0,0,.95);
  color:var(--txt);
  font-size:13px; line-height:1.5;
  animation:tin .22s ease;
  transition:opacity .22s ease, transform .22s ease;
}
.toast.good{ border-color:rgba(212,255,63,.32) }
.toast.bad{ border-color:rgba(255,107,107,.36); color:#ffd0d0 }
.toast.out{ opacity:0; transform:translateY(6px) }

@keyframes tin{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }

/* ---------------- gates ---------------- */
.gate{
  position:fixed; inset:0; z-index:200;
  display:grid; place-items:center;
  padding:24px;
  background:rgba(10,10,11,.86);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  overflow-y:auto;
  animation:tin .2s ease;
}
.gate[hidden]{ display:none }

.gate-box{
  width:100%; max-width:470px;
  padding:32px;
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:0 50px 110px -60px rgba(0,0,0,.98);
}
.gate-box h2{ font-size:23px; letter-spacing:-.028em; margin-bottom:12px; text-align:center }
.gate-p{ font-size:13.5px; color:var(--txt-2); margin-bottom:18px; text-align:center }

.gate-ico{
  display:grid; place-items:center;
  width:54px; height:54px; margin:0 auto 20px;
  border-radius:16px;
  background:var(--bg-3); border:1px solid var(--line);
  color:var(--acc);
}
.gate-ico svg{ width:27px; height:27px }

.gate-list{ margin:0 0 20px; padding:0; list-style:none }
.gate-list li{
  position:relative;
  padding:9px 0 9px 26px;
  font-size:13px; color:var(--txt-2);
  border-top:1px solid var(--line-2);
}
.gate-list li::before{
  content:''; position:absolute; left:3px; top:15px;
  width:10px; height:5px;
  border-left:2px solid var(--acc); border-bottom:2px solid var(--acc);
  transform:rotate(-45deg);
}

.gate-box .btn{ margin-top:8px }
.gate-box .btn + .btn{ margin-top:9px }
.gate-home{
  display:block; margin-top:18px;
  text-align:center; font-size:12.5px; color:var(--txt-3);
}
.gate-home:hover{ color:var(--acc) }

/* ---------------- responsive ---------------- */
@media (max-width:1180px){
  .layout{ grid-template-columns:290px minmax(0,1fr) 290px; gap:12px; padding:12px }
}
@media (max-width:980px){
  body.studio{ overflow:auto }
  .layout{
    grid-template-columns:1fr;
    height:auto;
  }
  body.studio:has(.trialbar) .layout{ height:auto }
  .rail{ overflow:visible }
  .stage{ min-height:56vh; order:-1 }
  .rail.l{ order:1 }
  .rail.r{ order:2 }
}
@media (max-width:560px){
  .top{ height:54px; padding:0 12px }
  .brand span{ display:none }
  .layout{ padding:10px; gap:10px }
  .trialbar{ flex-direction:column; align-items:flex-start; gap:9px; padding:11px 12px }
  .pip{ width:104px; height:78px }
  .gate-box{ padding:24px }
}