/* HumAva — editor and admin room (phase 2). Builds on app.css: same tokens, same Resonance
   look (aubergine-black, coral, pearl-lilac; Unbounded / Figtree / IBM Plex Mono). */
body.suite{background-attachment:fixed}
.suite .top{position:sticky}
.suite .top nav a[aria-current="page"]{color:var(--ink)}
.suite .top nav a[aria-current="page"]::after{transform:scaleX(1)}
.suite .back{margin-left:12px}
@media (max-width:980px){.suite .back{margin-left:auto}}
.suite h2{font:500 20px/1.2 var(--disp);letter-spacing:-.01em;margin:0}
.suite h3{font:500 15px/1.2 var(--disp);margin:0 0 12px;letter-spacing:-.01em}
.suite input,.suite select,.suite textarea{font:400 15px/1.4 var(--body);color:var(--ink);background:var(--base);border:1px solid var(--line);border-radius:10px;padding:10px 12px;width:100%}
.suite textarea{resize:vertical}
.suite input:focus,.suite select:focus,.suite textarea:focus{outline:none;border-color:var(--lilac);box-shadow:0 0 0 3px rgba(191,174,255,.15)}
.suite input[type=color]{width:46px;height:40px;padding:3px;cursor:pointer}
.suite input[type=range]{padding:0;accent-color:var(--coral);border:0;background:none}
.suite .f{display:flex;flex-direction:column;gap:6px;margin:0 0 12px;font:500 14px var(--body)}
.suite .f > span em{font-style:normal;color:var(--dim);font-weight:400;margin-left:6px}
.suite .f.inline{flex-direction:row;align-items:center;gap:10px;margin:0}
.suite .f.inline input,.suite .f.inline select{width:auto;min-width:150px}
.suite .hint{color:var(--mute);font-size:13px;margin:8px 0 0}
.suite .tick{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--mute);cursor:pointer;margin:0 0 10px}
.suite .tick input{width:auto;accent-color:var(--coral)}
.icobtn.sm{width:36px;height:36px;font-size:18px}
.icobtn:disabled{opacity:.35;cursor:not-allowed}
a.btn.off{opacity:.45;pointer-events:none}

/* ── editor layout ── */
.ed{padding:18px var(--pad) 60px;max-width:1500px;margin:0 auto}
.bar{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center;padding:14px 18px;border:1px solid var(--line);border-radius:var(--r);background:rgba(22,12,28,.7);margin-bottom:18px}
.bar .tools{display:flex;gap:8px;align-items:center;margin-left:auto;flex-wrap:wrap}
.ed-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:22px;align-items:start}
@media (max-width:1100px){.ed-grid{grid-template-columns:1fr}}
.ed-right{border:1px solid var(--line);border-radius:var(--r);background:var(--base2);padding:18px;position:sticky;top:80px;max-height:calc(100vh - 100px);overflow:auto}
@media (max-width:1100px){.ed-right{position:static;max-height:none}}
.ed-right fieldset{border:0;border-top:1px solid var(--line);padding:14px 0 6px;margin:12px 0 0}
.ed-right legend{font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--lilac);padding:0 8px 0 0}

/* the stage: a true-shape preview of the frame the render will make */
.stage-wrap{display:flex;justify-content:center;background:#07040a;border:1px solid var(--line);border-radius:var(--r);padding:16px;background-image:radial-gradient(circle at 50% 50%,rgba(255,92,138,.08),transparent 60%)}
.stage{position:relative;overflow:hidden;border-radius:10px;box-shadow:0 30px 80px -30px rgba(255,92,138,.35);container-type:inline-size;width:100%}
.stage.a169{aspect-ratio:16/9;max-width:100%}
.stage.a916{aspect-ratio:9/16;max-width:360px}
.stage.a11{aspect-ratio:1/1;max-width:540px}
.s-bg,.s-pr,.s-ov,.s-cap,.s-x{position:absolute;inset:0}
.s-pr img,.s-pr video{width:100%;height:100%;object-fit:cover;object-position:50% 18%;display:block}
.s-pr.left{right:auto;width:46%;border-right:3px solid var(--coral)}
.s-pr.right{left:auto;width:46%;border-left:3px solid var(--coral)}
.stage.a916 .s-pr.left{width:100%;height:56%;bottom:auto;border:0;border-bottom:3px solid var(--coral)}
.stage.a916 .s-pr.right{width:100%;height:56%;top:auto;border:0;border-top:3px solid var(--coral)}
.s-pr.circle{inset:auto 6% 10% auto;width:22.5%;aspect-ratio:1;height:auto;border-radius:50%;overflow:hidden;box-shadow:0 0 0 3px var(--coral),0 0 0 6px rgba(191,174,255,.5)}
.stage.a916 .s-pr.circle{width:56%;bottom:16%}
.stage.a11 .s-pr.circle{width:40%}
.ov{position:absolute;opacity:0;transform:translateY(8px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.ov.in{opacity:1;transform:none}
.ov.title{left:0;right:0;top:14%;text-align:center;font:500 6cqw/1.1 var(--disp);color:var(--pearl);text-shadow:0 3px 12px rgba(14,8,18,.7);padding:0 6%}
.stage.a916 .ov.title{font-size:8cqw}
.ov.lower{left:5%;top:70%;background:rgba(14,8,18,.78);border-left:4px solid var(--coral);padding:1.2cqw 2cqw;font:600 2.7cqw/1.2 var(--body);color:var(--pearl);max-width:60%}
.stage.a916 .ov.lower{top:74%;font-size:4.4cqw;max-width:84%}
.stage.a916 .s-pr.circle ~ .s-ov .ov.lower{top:41%}
.stage.a11 .ov.lower{max-width:46%}
.s-cap{display:flex;align-items:flex-end;justify-content:center;padding:0 8% 6.5%;pointer-events:none}
.s-cap span{background:rgba(18,8,20,.62);color:var(--pearl);font:700 3.1cqw/1.25 var(--body);padding:.4em .7em;border-radius:6px;text-align:center}
.stage.a916 .s-cap span{font-size:5cqw}
.s-x{pointer-events:none;opacity:0;background:var(--base)}
.s-x.go{animation:sx .6s var(--ease) forwards}
.s-x.go.circle{background:radial-gradient(circle,transparent 0,transparent 30%,var(--base) 31%);animation:sxc .6s var(--ease) forwards}
.s-x.go.slide{animation:sxs .6s var(--ease) forwards}
.s-x.go.none{animation:none}
@keyframes sx{0%{opacity:1}100%{opacity:0}}
@keyframes sxc{0%{opacity:1;transform:scale(.4)}100%{opacity:0;transform:scale(3)}}
@keyframes sxs{0%{opacity:1;transform:translateX(0)}100%{opacity:1;transform:translateX(-101%)}}

.transport{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:14px 0 26px}
.transport .f.inline{margin-left:auto}
.tl-head{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;margin-bottom:12px}
.timeline{list-style:none;margin:0;padding:12px;display:flex;gap:8px;overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--base2);min-height:120px;
  background-image:repeating-linear-gradient(90deg,transparent 0 59px,rgba(191,174,255,.06) 59px 60px)}
.tl-s{flex:1 1 0;min-width:150px;display:flex;flex-direction:column;gap:6px;padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--base3);cursor:grab;position:relative;transition:border-color .3s,transform .4s var(--ease)}
.tl-s:hover{border-color:var(--lilac)}
.tl-s.sel{border-color:var(--coral);box-shadow:0 0 0 1px var(--coral),0 10px 30px -14px rgba(255,92,138,.7)}
.tl-s.drag{opacity:.45}
.tl-s.over{transform:translateX(6px);border-style:dashed}
.tl-s .n{font:500 11px var(--mono);color:var(--coral)}
.tl-s .thumb{height:46px;border-radius:8px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.tl-s .thumb img{height:100%;width:auto}
.tl-s .thumb .vid{font-style:normal;color:var(--pearl)}
.tl-s .t{font-size:13px;line-height:1.3;color:var(--ink);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.tl-s .mono{font-size:10px}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:26px}
.card2{border:1px solid var(--line);border-radius:var(--r);background:var(--base2);padding:18px}
.card2.render .btn.primary{width:100%;justify-content:center;margin:4px 0 6px}
.card2 video{width:100%;border-radius:10px;margin:12px 0;background:#000}
.rprog{height:6px;border-radius:6px;background:var(--base);overflow:hidden;margin:6px 0}
.rprog i{display:block;height:100%;width:0;background:var(--iri);transition:width .6s var(--ease)}

.seg{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.seg button{flex:1;min-width:64px;font:500 13px var(--body);color:var(--mute);background:var(--base);border:1px solid var(--line);border-radius:10px;padding:9px 8px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px}
.seg button[aria-checked="true"]{border-color:var(--coral);color:var(--ink);background:rgba(255,92,138,.08)}
.ly{display:block;width:34px;height:20px;border-radius:3px;background:var(--base3);border:1px solid var(--line);position:relative;font-style:normal}
.ly::after{content:"";position:absolute;background:var(--lilac)}
.ly.full::after{inset:2px}
.ly.left::after{left:2px;top:2px;bottom:2px;width:45%}
.ly.right::after{right:2px;top:2px;bottom:2px;width:45%}
.ly.circle::after{right:3px;bottom:3px;width:9px;height:9px;border-radius:50%;background:var(--coral)}
.swatches{display:flex;gap:6px;flex-wrap:wrap}
.swatches button{width:24px;height:24px;border-radius:50%;border:1px solid var(--line);cursor:pointer}
.ovrow,.cue{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;margin-bottom:8px}
.cue{grid-template-columns:76px 1fr}
.ovrow .mono,.cue .mono{font-size:10px}

dialog{border:1px solid var(--line);border-radius:var(--r);background:var(--base2);color:var(--ink);padding:0;max-width:520px;width:calc(100% - 32px)}
dialog::backdrop{background:rgba(7,4,10,.7);backdrop-filter:blur(4px)}
.dlg{padding:22px}

/* ── admin room ── */
.adm{padding:22px var(--pad) 70px;max-width:1400px;margin:0 auto}
.adm-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;margin:10px 0 22px}
.adm-head h1{font:500 clamp(28px,4vw,46px)/1.05 var(--disp);letter-spacing:-.02em;margin:6px 0 0}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:24px}
.kpi{border:1px solid var(--line);border-radius:var(--r);padding:16px;background:var(--base2);position:relative;overflow:hidden}
.kpi b{display:block;font:500 30px/1 var(--disp);margin:8px 0 4px}
.kpi.coral b{color:var(--coral)}
.kpi.lilac b{color:var(--lilac)}
.kpi::after{content:"";position:absolute;right:-30px;top:-30px;width:90px;height:90px;border-radius:50%;border:1px solid rgba(255,92,138,.18);box-shadow:0 0 0 12px rgba(255,92,138,.05),0 0 0 26px rgba(191,174,255,.04)}
.adm-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:20px;align-items:start}
@media (max-width:1000px){.adm-grid{grid-template-columns:1fr}}
.panel2{border:1px solid var(--line);border-radius:var(--r);background:var(--base2);padding:18px;margin-bottom:20px}
.panel2 > header{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.ord{display:grid;grid-template-columns:1fr auto;gap:8px 14px;padding:12px 0;border-top:1px solid var(--line)}
.ord:first-child{border-top:0}
.ord .who{font-weight:600}
.ord .meta{font:400 12px var(--mono);color:var(--mute)}
.ord .msg{grid-column:1/-1;font-size:13px;color:var(--mute)}
.ord .acts{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.hrow{display:grid;grid-template-columns:14px 1fr auto;gap:10px;align-items:center;padding:9px 0;border-top:1px solid var(--line);font-size:14px}
.hrow:first-of-type{border-top:0}
.hrow .dotx{width:10px;height:10px;border-radius:50%;background:var(--bad);box-shadow:0 0 0 4px rgba(255,107,107,.12)}
.hrow.ok .dotx{background:var(--ok);box-shadow:0 0 0 4px rgba(127,240,196,.12)}
.hrow small{display:block;color:var(--mute);font-size:12px}
.hrow .mono{font-size:10px;text-align:right}
.rgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.rgrid figure{margin:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--base)}
.rgrid video,.rgrid img{width:100%;aspect-ratio:16/9;object-fit:cover;background:#000}
.rgrid figcaption{padding:8px 10px;font-size:12px;color:var(--mute)}
.rgrid audio{width:100%}
.empty2{color:var(--dim);font-size:14px;padding:10px 0}

/* phone: nothing may push the page sideways (measured: the editor ran off a 390px screen) */
.ed-grid > *{min-width:0}
@media (max-width:1100px){.ed-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:700px){
  .ed{padding:12px 14px 50px}
  .bar{padding:12px}
  .bar .f.inline{flex-wrap:wrap;width:100%}
  .bar .f.inline input,.bar .f.inline select{min-width:0;flex:1}
  .bar .tools{margin-left:0}
  .stage-wrap{padding:8px}
  .transport .f.inline{margin-left:0;width:100%}
  .transport .f.inline select{flex:1;min-width:0}
  .tl-s{min-width:128px}
  .adm{padding:14px 14px 50px}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpi b{font-size:24px}
}
.suite .row-btns{flex-direction:row;flex-wrap:wrap;justify-content:flex-start;align-items:center}
.suite .tl-head .row-btns{justify-content:flex-end}