/* ============================================================
   AI Studio Siu · 商业化 UI 主题
   方向：克制、专业、层级清晰，保留高信息密度但弱化实验室感
   ============================================================ */
:root{
  --bg:#07111f;
  --bg-2:#0a1526;
  --surface:rgba(13,22,38,.82);
  --surface-2:rgba(17,27,46,.9);
  --surface-3:rgba(9,15,27,.96);
  --surface-elev:rgba(255,255,255,.03);
  --text:#eef4ff;
  --muted:#90a1ba;
  --muted-2:#6f7f98;
  --border:rgba(141,164,198,.14);
  --border-strong:rgba(141,164,198,.24);
  --border-accent:rgba(94,170,255,.32);
  --primary:#4f8cff;
  --primary-2:#7c6dff;
  --primary-soft:rgba(79,140,255,.14);
  --primary-soft-2:rgba(124,109,255,.14);
  --success:#2fc48a;
  --warning:#f5b74f;
  --danger:#ff6b6b;
  --err:#ff6b6b;
  --ok:#2fc48a;
  --warn:#f5b74f;
  --shadow:0 18px 60px rgba(0,0,0,.42);
  --shadow-soft:0 10px 28px rgba(0,0,0,.22);
  --radius:16px;
  --radius-lg:22px;
  --mono:ui-monospace,"Cascadia Code",Consolas,Menlo,monospace;
  --sans:"PingFang SC","Microsoft YaHei UI","Segoe UI",system-ui,sans-serif;
  --side-w:282px;
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:
    radial-gradient(1100px 520px at 12% -6%, rgba(79,140,255,.18), transparent 62%),
    radial-gradient(850px 420px at 90% 0%, rgba(124,109,255,.12), transparent 58%),
    linear-gradient(180deg,var(--bg),var(--bg-2) 68%,#050b16);
  color:var(--text);
  font-family:var(--sans);
  font-size:14px;
  line-height:1.6;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse at center, black 24%, transparent 84%);
  opacity:.45;
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(680px 260px at 8% 104%, rgba(79,140,255,.12), transparent 65%),
    radial-gradient(720px 320px at 92% 96%, rgba(124,109,255,.1), transparent 68%);
  opacity:.9;
}

#root{
  position:relative;
  z-index:1;
  height:100vh;
  display:flex;
  flex-direction:column;
}

/* ---------- Header ---------- */
header{
  height:64px;
  flex:none;
  display:flex;
  align-items:center;
  gap:14px;
  padding:0 20px;
  background:rgba(6,12,22,.72);
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(18px);
  position:relative;
  z-index:20;
  box-shadow:0 12px 36px rgba(0,0,0,.18);
}
header::after{
  content:"";
  position:absolute;
  inset:auto 0 -1px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(79,140,255,.55),rgba(124,109,255,.55),transparent);
}
header .btn+.btn{margin-left:4px}
.logo{
  display:flex;
  align-items:center;
  gap:11px;
  font-weight:700;
  font-size:15px;
  letter-spacing:.01em;
}
.logo .mark{
  width:30px;
  height:30px;
  border-radius:8px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  box-shadow:0 12px 30px rgba(79,140,255,.24);
  color:#fff;
  font-size:14px;
}
.logo .sub{
  display:block;
  margin-top:-1px;
  color:var(--muted);
  font-family:var(--mono);
  font-size:10px;
  font-weight:500;
  letter-spacing:.14em;
}
.header-spacer{flex:1}
.gpu-chip{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 12px;
  border-radius:8px;
  border:1px solid rgba(79,140,255,.26);
  background:rgba(255,255,255,.025);
  color:var(--text);
  font-family:var(--mono);
  font-size:11px;
  cursor:pointer;
  transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease,background .15s ease;
}
.gpu-chip i{
  width:7px;height:7px;border-radius:50%;
  background:var(--muted);
  animation:pulse 2.6s infinite;
}
.gpu-chip.busy i{
  background:var(--success);
  box-shadow:0 0 10px rgba(47,196,138,.55);
}
.gpu-chip:hover{
  transform:translateY(-1px);
  border-color:rgba(79,140,255,.42);
  box-shadow:0 0 0 1px rgba(79,140,255,.12),0 10px 24px rgba(0,0,0,.18);
}
@keyframes pulse{0%,100%{opacity:.38}50%{opacity:1}}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:36px;
  padding:8px 15px;
  border-radius:11px;
  cursor:pointer;
  font-size:13px;
  border:1px solid var(--border-strong);
  background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01));
  color:var(--text);
  transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease,background .15s ease,color .15s ease,opacity .15s ease;
  white-space:nowrap;
}
.btn:hover:not(:disabled){
  transform:translateY(-1px);
  border-color:rgba(79,140,255,.42);
  box-shadow:0 10px 24px rgba(0,0,0,.18);
}
.btn:disabled{opacity:.42;cursor:not-allowed;transform:none;box-shadow:none}
.btn.primary{
  border:none;
  color:#fff;
  font-weight:600;
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  box-shadow:0 12px 26px rgba(79,140,255,.22);
}
.btn.primary:hover:not(:disabled){filter:brightness(1.06)}
.btn.green{
  border:none;
  color:#fff;
  font-weight:600;
  background:linear-gradient(135deg,#1bb76e,#17a589);
  box-shadow:0 12px 26px rgba(27,183,110,.18);
}
.btn.green:hover:not(:disabled){filter:brightness(1.05)}
.btn.danger{
  border:none;
  color:#fff;
  background:linear-gradient(135deg,#ea5455,#d83e47);
  box-shadow:0 12px 26px rgba(232,84,85,.16);
}
.btn.busy{
  opacity:1;
  cursor:progress;
  animation:renderBusyPulse 1.1s ease-in-out infinite;
  box-shadow:0 0 0 1px rgba(47,196,138,.28),0 0 18px rgba(47,196,138,.16);
}
@keyframes renderBusyPulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.12)}}
.btn.sm{
  min-height:28px;
  padding:5px 10px;
  font-size:12px;
  border-radius:9px;
}
.btn.ghost{
  background:rgba(255,255,255,.01);
}
#back-hall{font-weight:600;letter-spacing:.02em}

/* ---------- Layout ---------- */
.shell{
  flex:1;
  display:flex;
  min-height:0;
}
.side{
  width:var(--side-w);
  flex:none;
  background:rgba(11,18,31,.76);
  backdrop-filter:blur(16px);
  border-right:1px solid var(--border);
  overflow-y:auto;
  padding:16px 14px 20px;
}
.main{
  flex:1;
  min-width:0;
  overflow-y:auto;
  padding:20px 22px 28px;
  position:relative;
}
.main > :first-child{margin-top:0}

.page-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:18px;
  margin:0 0 18px;
  padding:18px 18px 16px;
  border:1px solid var(--border);
  border-radius:20px;
  background:
    radial-gradient(620px 220px at 92% 0%, rgba(124,109,255,.12), transparent 70%),
    radial-gradient(520px 220px at 8% 0%, rgba(79,140,255,.1), transparent 72%),
    rgba(255,255,255,.02);
  box-shadow:var(--shadow-soft);
  backdrop-filter:blur(16px);
}
.page-head h2{
  font-size:24px;
  line-height:1.15;
  letter-spacing:.01em;
  margin-top:6px;
}
.page-head p{
  margin-top:8px;
  max-width:780px;
  color:var(--muted);
  font-size:13px;
}
.page-kicker{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--muted);
}
.page-summary{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:8px;
}
.summary-chip{
  display:inline-flex;
  align-items:center;
  min-height:31px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.02);
  color:var(--muted);
  font-size:12px;
  white-space:nowrap;
}
.summary-chip strong{color:var(--text);font-weight:600}

.dash-metrics{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin:0 0 16px;
}
.dash-metric{
  min-height:92px;
  padding:13px 14px;
  border:1px solid var(--border);
  border-radius:16px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.012)),
    rgba(10,17,30,.72);
  box-shadow:var(--shadow-soft);
}
.dash-metric.primary{
  background:
    radial-gradient(320px 120px at 20% 0%, rgba(79,140,255,.14), transparent 62%),
    linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.012));
}
.dash-metric label{
  display:block;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}
.dash-metric b{
  display:block;
  margin-top:7px;
  font-size:20px;
  line-height:1.05;
  color:var(--text);
}
.dash-metric span{
  display:block;
  margin-top:7px;
  color:var(--muted);
  font-size:11px;
  line-height:1.45;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.mini-track{
  height:6px;
  margin-top:12px;
  border-radius:999px;
  background:rgba(141,164,198,.13);
  overflow:hidden;
}
.mini-track i{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,var(--primary),var(--success));
}

.side h3{
  font-size:12px;
  color:var(--muted);
  letter-spacing:.14em;
  margin:2px 4px 12px;
  display:flex;
  align-items:center;
  gap:8px;
  text-transform:uppercase;
}
.side h3::before{
  content:"";
  width:3px;
  height:12px;
  border-radius:2px;
  background:linear-gradient(180deg,var(--primary),var(--primary-2));
}

/* ---------- Project list ---------- */
.proj{
  padding:12px 13px;
  border-radius:14px;
  border:1px solid var(--border);
  cursor:pointer;
  margin-bottom:10px;
  transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease,background .15s ease;
  background:rgba(255,255,255,.018);
}
.proj:hover{
  border-color:rgba(79,140,255,.34);
  transform:translateY(-1px);
  box-shadow:0 12px 26px rgba(0,0,0,.16);
}
.proj.on{
  border-color:rgba(79,140,255,.5);
  background:rgba(79,140,255,.08);
  box-shadow:0 0 0 1px rgba(79,140,255,.08),0 14px 30px rgba(0,0,0,.18);
}
.proj b{
  display:block;
  font-size:13px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  flex:1;
  min-width:0;
}
.proj .row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:6px;
  gap:8px;
}
.proj .bar{
  height:5px;
  border-radius:999px;
  background:rgba(141,164,198,.12);
  overflow:hidden;
  flex:1;
}
.proj .bar i{
  display:block;
  height:100%;
  background:linear-gradient(90deg,var(--primary),var(--primary-2));
  border-radius:999px;
}
.proj time{font-family:var(--mono);font-size:10px;color:var(--muted)}
.proj-top{display:flex;align-items:center;gap:6px}
.proj-desc{
  margin-top:5px;
  color:var(--muted);
  font-size:11px;
  line-height:1.45;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.proj-actions{display:flex;gap:2px;opacity:0;transition:opacity .15s ease}
.proj:hover .proj-actions{opacity:1}
.proj-btn{
  width:22px;
  height:22px;
  border:none;
  border-radius:7px;
  background:rgba(255,255,255,.06);
  color:var(--muted);
  font-size:12px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all .12s ease;
  padding:0;
  line-height:1;
}
.proj-btn:hover{background:rgba(255,255,255,.12);color:var(--text)}
.proj-btn.danger:hover{background:rgba(239,68,68,.18);color:#ff8d8d}

/* ---------- Cards ---------- */
.card{
  background:var(--surface);
  backdrop-filter:blur(16px);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-soft);
  padding:18px;
  margin-bottom:16px;
}
.card h3{
  font-size:14px;
  margin-bottom:12px;
  display:flex;
  align-items:center;
  gap:9px;
  letter-spacing:.01em;
}
.card h3::before{
  content:"";
  width:4px;
  height:16px;
  border-radius:2px;
  background:linear-gradient(180deg,var(--primary),var(--primary-2));
  box-shadow:0 0 10px rgba(79,140,255,.18);
}
.card h3 .hint{
  font-size:11px;
  color:var(--muted);
  font-weight:400;
  margin-left:auto;
  letter-spacing:0;
}

/* ---------- Badges ---------- */
.st{
  font-family:var(--mono);
  font-size:10.5px;
  padding:3px 9px;
  border-radius:999px;
  border:1px solid var(--border-strong);
  color:var(--muted);
  white-space:nowrap;
  background:rgba(255,255,255,.02);
}
.st.done{color:var(--success);border-color:rgba(47,196,138,.35);background:rgba(47,196,138,.08)}
.st.fail{color:var(--danger);border-color:rgba(255,107,107,.35);background:rgba(255,107,107,.08)}
.st.run{color:#66b5ff;border-color:rgba(102,181,255,.36);background:rgba(102,181,255,.08);animation:pulse 1.8s infinite}
.st.warn{color:var(--warning);border-color:rgba(245,183,79,.35);background:rgba(245,183,79,.08)}

/* ---------- Progress ---------- */
.pbar,.overall{
  height:7px;
  border-radius:999px;
  background:rgba(141,164,198,.12);
  overflow:hidden;
  position:relative;
}
.overall>i,.pbar>i{
  display:block;
  height:100%;
  border-radius:999px;
  width:0;
  background:linear-gradient(90deg,var(--primary),var(--primary-2));
  box-shadow:0 0 12px rgba(79,140,255,.18);
  transition:width .45s ease;
}
.overall>i::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent);
  animation:sheen 1.9s infinite;
}
@keyframes sheen{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

/* ---------- Hero / dashboard ---------- */
.hero{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(360px,.95fr);
  gap:18px;
}
.preview-col{min-width:0}
.preview{
  aspect-ratio:16/9;
  border-radius:18px;
  background:
    linear-gradient(180deg,rgba(4,10,20,.92),rgba(7,13,24,.98));
  border:1px solid var(--border);
  display:grid;
  place-items:center;
  overflow:hidden;
  position:relative;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);
}
.preview::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(420px 180px at 20% 0%, rgba(79,140,255,.12), transparent 70%),
    radial-gradient(420px 180px at 80% 100%, rgba(124,109,255,.1), transparent 72%);
  pointer-events:none;
}
.preview::after{
  content:"LIVE PREVIEW";
  position:absolute;
  top:12px;
  left:14px;
  z-index:2;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.22em;
  color:rgba(144,161,186,.72);
}
.preview video,.preview img{
  width:100%;
  height:100%;
  object-fit:contain;
  background:#000;
  display:block;
}
.preview span{color:var(--muted);font-size:12.5px;position:relative;z-index:2}
.meta-line{
  font-family:var(--mono);
  font-size:11px;
  color:var(--muted);
  margin-top:8px;
}
.ctrl-col{
  display:flex;
  flex-direction:column;
  gap:12px;
  min-width:0;
}
.ptitle{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.ptitle b{font-size:18px;letter-spacing:.01em}
.actions{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:9px;
}
.wf-group{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  padding:11px 12px;
  border-radius:14px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.02);
}
.wf-group .grp-label{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
  display:flex;
  align-items:center;
  gap:7px;
  margin-right:4px;
  flex:none;
}
.wf-group .grp-label::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--primary);
  box-shadow:0 0 8px rgba(79,140,255,.18);
}
.wf-group.render .grp-label::before{background:var(--success);box-shadow:0 0 8px rgba(47,196,138,.18)}
.wf-group.compose .grp-label::before{background:var(--primary-2);box-shadow:0 0 8px rgba(124,109,255,.18)}
.render-submit-hint{
  flex-basis:100%;
  margin-top:2px;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid rgba(47,196,138,.22);
  background:rgba(47,196,138,.08);
  color:#c6f6e5;
  font-size:11.5px;
}
.info-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:8px;
}
.info-item{
  background:rgba(255,255,255,.02);
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 11px;
}
.info-item label{
  display:block;
  font-size:10.5px;
  color:var(--muted);
  letter-spacing:.07em;
  text-transform:uppercase;
}
.info-item div{
  font-size:12.5px;
  margin-top:3px;
  word-break:break-word;
}

/* ---------- Story grid ---------- */
.row2{
  display:grid;
  grid-template-columns:minmax(0,1fr) 350px;
  gap:16px;
  align-items:start;
}
.shots{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:12px;
}
.shot{
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
  cursor:pointer;
  background:
    radial-gradient(300px 100px at 20% 0%, rgba(79,140,255,.06), transparent 60%),
    rgba(255,255,255,.02);
  transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease,background .15s ease;
  position:relative;
}
.shot:hover{
  border-color:rgba(79,140,255,.35);
  transform:translateY(-1px);
  box-shadow:0 12px 26px rgba(0,0,0,.16);
}
.shot.sel{
  border-color:rgba(79,140,255,.52);
  box-shadow:0 0 0 1px rgba(79,140,255,.08),0 14px 32px rgba(0,0,0,.2);
}
.shot::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
.shot video,.shot img.thumb{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  display:block;
  background:#060a12;
}
.shot video.lazy-shot-video:not([src]){
  background:
    linear-gradient(135deg,rgba(79,140,255,.08),rgba(47,196,138,.04)),
    #060a12;
}
.shot .thumb-ph{
  width:100%;
  aspect-ratio:16/9;
  display:grid;
  place-items:center;
  color:var(--muted);
  font-size:11px;
  background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01));
}
.shot .body{padding:10px 12px}
.shot .t{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:6px;
}
.shot .t .st{margin-left:auto}
.shot .t b{
  font-family:var(--mono);
  font-size:12px;
  color:#9bc7ff;
}
.shot .msg{
  font-size:11px;
  color:var(--muted);
  margin-top:5px;
  min-height:15px;
  word-break:break-all;
}
.shot .foot{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:7px;
}
.tag{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:10px;
  min-height:21px;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid var(--border);
  color:var(--muted);
  background:rgba(255,255,255,.015);
}
.tag.host{color:#8ed2ff;border-color:rgba(79,140,255,.28);background:rgba(79,140,255,.08)}
.tag.broll{color:#ffd086;border-color:rgba(245,183,79,.28);background:rgba(245,183,79,.08)}

/* ---------- Log terminal ---------- */
.logs{
  background:linear-gradient(180deg,#050814,#070d18);
  border:1px solid var(--border);
  border-radius:12px;
  font-family:var(--mono);
  font-size:11px;
  line-height:1.7;
  color:#b9d8f1;
  height:300px;
  overflow-y:auto;
  padding:11px 12px;
  box-shadow:inset 0 0 24px rgba(0,0,0,.45);
}
.logs .t{color:#60708c;margin-right:8px}
.logs .e{color:#ff8585}
.logs .w{color:#ffd27e}

/* ---------- Forms ---------- */
.field{margin-bottom:15px}
.field>label{
  display:block;
  font-size:12.5px;
  color:var(--muted);
  margin-bottom:6px;
}
.field>label em{color:var(--danger);font-style:normal;margin-left:2px}
.input,textarea.input,select.input{
  width:100%;
  background:rgba(6,10,18,.72);
  border:1px solid var(--border-strong);
  border-radius:12px;
  color:var(--text);
  padding:10px 12px;
  font-size:13px;
  outline:none;
  transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;
  font-family:inherit;
}
.input:hover,textarea.input:hover,select.input:hover{border-color:rgba(79,140,255,.34)}
.input:focus{border-color:rgba(79,140,255,.6);box-shadow:0 0 0 3px rgba(79,140,255,.14)}
textarea.input{resize:vertical;line-height:1.7}
select.input option{background:#0f1728}
.radio-group{display:flex;gap:8px;flex-wrap:wrap}
.radio-pill{
  padding:8px 14px;
  border-radius:999px;
  border:1px solid var(--border-strong);
  cursor:pointer;
  font-size:12.5px;
  color:var(--muted);
  background:rgba(255,255,255,.015);
  transition:all .14s ease;
  user-select:none;
}
.radio-pill:hover{border-color:rgba(79,140,255,.42);color:#a9cbff}
.radio-pill.on{
  background:rgba(79,140,255,.12);
  border-color:rgba(79,140,255,.52);
  color:#a9cbff;
}
.tip{
  font-size:11.5px;
  color:var(--muted);
  line-height:1.6;
  margin-top:6px;
}
.count-row{
  display:flex;
  justify-content:space-between;
  font-family:var(--mono);
  font-size:11px;
  color:var(--muted);
  margin-top:6px;
}

/* ---------- Wizard steps ---------- */
.flowstrip{
  display:flex;
  align-items:center;
  gap:0;
  margin-bottom:18px;
  flex-wrap:wrap;
  overflow:hidden;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.02);
}
.fs-step{
  display:flex;
  align-items:center;
  gap:8px;
  padding:9px 14px;
  cursor:pointer;
  border-right:1px solid var(--border);
  background:transparent;
  transition:all .15s ease;
}
.fs-step:last-child{border-right:none}
.fs-step .n{
  width:22px;
  height:22px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-family:var(--mono);
  font-size:11px;
  border:1px solid var(--border-strong);
  color:var(--muted);
  background:rgba(255,255,255,.02);
}
.fs-step.cur{
  background:rgba(79,140,255,.08);
}
.fs-step.cur .n{
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  border:none;
  color:#fff;
}
.fs-step.done{cursor:pointer}
.fs-step.done .n{color:var(--success);border-color:rgba(47,196,138,.35)}
.fs-step.locked{cursor:not-allowed;opacity:.5}
.fs-step span{font-size:12.5px;white-space:nowrap}

/* ---------- Pick cards ---------- */
.grid-auto{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:12px;
}
.pick-card{
  border:1px solid var(--border);
  border-radius:15px;
  overflow:hidden;
  cursor:pointer;
  background:rgba(255,255,255,.02);
  position:relative;
  transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease;
}
.pick-card:hover{
  border-color:rgba(79,140,255,.34);
  transform:translateY(-1px);
  box-shadow:0 12px 26px rgba(0,0,0,.16);
}
.pick-card.sel{
  border-color:rgba(47,196,138,.48);
  box-shadow:0 0 0 1px rgba(47,196,138,.08),0 14px 32px rgba(0,0,0,.2);
}
.pick-card.sel .check{opacity:1}
.pick-card .cam-badge,
.shot .cam-badge{
  position:absolute;
  left:8px;
  top:8px;
  z-index:2;
  padding:3px 8px;
  border-radius:999px;
  background:rgba(12,20,35,.85);
  color:#dcecff;
  border:1px solid rgba(141,164,198,.24);
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.04em;
  box-shadow:0 8px 18px rgba(0,0,0,.16);
}
.pick-card .cam-badge.b,
.shot .cam-badge.b{
  background:rgba(80,66,160,.92);
  border-color:rgba(165,155,255,.3);
}
.check{
  position:absolute;
  top:8px;
  right:8px;
  width:26px;
  height:26px;
  border-radius:50%;
  background:var(--success);
  display:grid;
  place-items:center;
  color:#072117;
  font-weight:800;
  opacity:0;
  transition:opacity .15s ease;
  z-index:2;
  font-size:14px;
}
.pick-card .ph{
  width:100%;
  aspect-ratio:4/3;
  display:grid;
  place-items:center;
  color:var(--muted);
  background:
    radial-gradient(circle at 50% 30%, rgba(79,140,255,.12), transparent 44%),
    linear-gradient(180deg,#111b2e,#0a101c);
}
.pick-card .ph img{width:100%;height:100%;object-fit:cover}
.pick-card .body{padding:11px 12px 12px}
.pick-card .body b{font-size:13px;display:block;margin-bottom:4px}
.card-actions{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.vision-box{
  border:1px solid var(--border);
  border-radius:14px;
  background:rgba(255,255,255,.02);
  padding:11px 12px;
}
.camera-assign{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:10px;
  margin-top:10px;
}
.camera-assign.fixed{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.camera-slot{
  border:1px solid var(--border);
  border-radius:12px;
  background:rgba(255,255,255,.018);
  overflow:hidden;
}
.camera-slot.a .cam-title{background:linear-gradient(90deg,rgba(79,140,255,.95),rgba(79,140,255,.76))}
.camera-slot.b .cam-title{background:linear-gradient(90deg,rgba(124,109,255,.95),rgba(124,109,255,.76))}
.camera-slot .cam-title{
  padding:7px 10px;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.08em;
  color:#edf6ff;
  background:linear-gradient(90deg,rgba(79,140,255,.95),rgba(124,109,255,.76));
}
.camera-slot .ph{background:linear-gradient(180deg,#101a2e,#0a101c)}
.camera-slot .ph img{width:100%;height:100%;object-fit:cover;display:block}
.camera-slot .cam-name{
  padding:8px 10px;
  font-size:11.5px;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.cam-controls{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  padding:0 10px 10px;
}
.cam-controls .btn.sm{
  padding:4px 8px;
  min-height:26px;
  font-size:11px;
}
.vision-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.vision-tags span{
  font-size:10.5px;
  padding:2px 7px;
  border-radius:6px;
  background:rgba(79,140,255,.08);
  color:#9fcbff;
  border:1px solid rgba(79,140,255,.18);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}

/* ---------- Camera editor ---------- */
.cam-editor{
  position:relative;
  width:100%;
  max-width:520px;
  aspect-ratio:16/9;
  border:1px dashed var(--border-strong);
  border-radius:14px;
  background:linear-gradient(180deg,#0a111d,#08101a);
  overflow:hidden;
  margin-bottom:10px;
}
.cam-node{
  position:absolute;
  width:74px;
  height:44px;
  border-radius:9px;
  display:grid;
  place-items:center;
  color:#04121a;
  font-size:11px;
  font-weight:700;
  cursor:grab;
  user-select:none;
  box-shadow:0 6px 16px rgba(0,0,0,.3);
  z-index:2;
}
.cam-node:active{cursor:grabbing}
.cam-node.character{background:#55a7ff}
.cam-node.scene{background:#62d392}
.cam-node.camera{background:#f3b863}

/* ---------- Modal / toast ---------- */
.modal-mask{
  position:fixed;
  inset:0;
  background:rgba(2,6,14,.6);
  backdrop-filter:blur(10px);
  display:grid;
  place-items:center;
  z-index:100;
  animation:fade .18s ease;
}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(14px) scale(.99)}to{opacity:1;transform:none}}
.box{
  width:min(720px,92vw);
  max-height:86vh;
  overflow-y:auto;
  background:
    radial-gradient(560px 220px at 90% 0%, rgba(124,109,255,.12), transparent 70%),
    linear-gradient(180deg,rgba(16,24,39,.98),rgba(10,16,28,.98));
  border:1px solid rgba(141,164,198,.18);
  border-radius:22px;
  padding:22px;
  box-shadow:var(--shadow);
  animation:rise .22s ease;
}
.box h3{
  font-size:15px;
  margin-bottom:16px;
  display:flex;
  align-items:center;
  gap:9px;
}
.box h3::before{
  content:"";
  width:4px;
  height:15px;
  border-radius:2px;
  background:linear-gradient(180deg,var(--primary),var(--primary-2));
}
.box p{
  color:var(--muted);
  line-height:1.65;
}
.box .note{
  border:1px solid var(--border) !important;
  background:rgba(255,255,255,.02) !important;
  color:var(--text) !important;
  border-radius:14px !important;
}
.box .foot{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:18px;
  flex-wrap:wrap;
}
#toast-box{
  position:fixed;
  top:74px;
  right:18px;
  z-index:200;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.toast{
  padding:11px 16px;
  border-radius:12px;
  font-size:13px;
  animation:rise .2s ease;
  background:linear-gradient(180deg,rgba(16,24,39,.98),rgba(10,16,28,.98));
  border:1px solid var(--border);
  box-shadow:0 14px 30px rgba(0,0,0,.34);
  max-width:360px;
}
.toast.ok{border-color:rgba(47,196,138,.35)}
.toast.err{border-color:rgba(255,107,107,.35)}
.toast.warn{border-color:rgba(245,183,79,.35)}

/* ---------- Hall ---------- */
.hall-hero{
  position:relative;
  overflow:hidden;
  padding:28px 28px 24px;
  border-radius:22px;
  margin-bottom:18px;
  background:
    radial-gradient(620px 220px at 88% -24%, rgba(124,109,255,.18), transparent 70%),
    radial-gradient(560px 240px at 8% 0%, rgba(79,140,255,.12), transparent 70%),
    linear-gradient(180deg,rgba(17,26,43,.94),rgba(10,16,28,.98));
  border:1px solid var(--border);
  box-shadow:var(--shadow-soft);
}
.hall-hero::after{
  content:"";
  position:absolute;
  inset:auto -10% -50% auto;
  width:240px;
  height:240px;
  background:radial-gradient(circle, rgba(79,140,255,.12), transparent 68%);
  pointer-events:none;
}
.hall-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(340px,.9fr);
  gap:18px;
  align-items:stretch;
  position:relative;
  z-index:1;
}
.hall-hero-copy{min-width:0}
.hall-hero-banner{
  display:inline-flex;
  flex-direction:column;
  gap:4px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(79,140,255,.18);
  background:linear-gradient(135deg,rgba(79,140,255,.12),rgba(124,109,255,.08));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
  margin-bottom:16px;
}
.hall-hero-banner span{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:#a7cbff;
}
.hall-hero-banner b{
  font-size:14px;
  line-height:1.45;
  font-weight:600;
  color:var(--text);
}
.hall-hero h1{
  font-size:24px;
  margin-bottom:8px;
  letter-spacing:.01em;
}
.hall-hero p{
  color:var(--muted);
  font-size:13px;
  max-width:800px;
}
.hall-hero-proof{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:12px;
}
.hall-hero-proof span{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:5px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.02);
  color:var(--muted);
  font-size:11.5px;
}
.hall-hero-panel{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:16px;
  border:1px solid var(--border);
  border-radius:20px;
  background:rgba(255,255,255,.03);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
.hero-panel-head{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.panel-kicker{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted);
}
.hero-stats{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.hero-stats > div{
  padding:12px 12px 11px;
  border:1px solid var(--border);
  border-radius:14px;
  background:rgba(255,255,255,.02);
}
.hero-stats b{
  display:block;
  font-size:22px;
  line-height:1;
  letter-spacing:.01em;
  color:#f2f7ff;
}
.hero-stats span{
  display:block;
  margin-top:6px;
  font-size:11px;
  color:var(--muted);
}
.hero-workflow{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.hero-workflow > div{
  padding:11px 11px 10px;
  border:1px solid var(--border);
  border-radius:14px;
  background:rgba(255,255,255,.02);
}
.hero-workflow span{
  display:inline-grid;
  place-items:center;
  width:22px;
  height:22px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  color:#fff;
  font-family:var(--mono);
  font-size:11px;
  margin-bottom:8px;
}
.hero-workflow b{
  display:block;
  font-size:13px;
  margin-bottom:3px;
}
.hero-workflow p{
  margin:0;
  font-size:11.5px;
  color:var(--muted);
  line-height:1.55;
}
.hero-panel-foot{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.bm-monitor-card{
  overflow:hidden;
  background:
    radial-gradient(700px 220px at 90% -20%, rgba(124,109,255,.12), transparent 72%),
    radial-gradient(640px 240px at 12% 0%, rgba(79,140,255,.08), transparent 70%),
    var(--surface);
}
.bm-card-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:14px;
}
.bm-card-head h3,
.bm-card-head h4{
  font-size:16px;
  margin-top:3px;
  display:flex;
  align-items:center;
  gap:9px;
}
.bm-card-head h3::before,
.bm-card-head h4::before{
  content:"";
  width:4px;
  height:15px;
  border-radius:2px;
  background:linear-gradient(180deg,var(--primary),var(--primary-2));
  box-shadow:0 0 10px rgba(79,140,255,.16);
}
.bm-kicker{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
}
.bm-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.bm-monitor-body{min-height:120px}
.bm-grid{
  display:grid;
  grid-template-columns:minmax(300px,.92fr) minmax(340px,1.08fr);
  gap:14px;
}
.bm-card{
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px;
  background:rgba(255,255,255,.02);
  box-shadow:var(--shadow-soft);
}
.bm-desc{margin-top:6px;color:var(--muted);font-size:13px;line-height:1.6}
.bm-meta{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:14px;
}
.bm-meta > div,
.bm-mini-chip,
.bm-gpu-card,
.bm-api-card,
.bm-note{
  border:1px solid var(--border);
  border-radius:12px;
  background:rgba(255,255,255,.02);
}
.bm-meta > div{padding:10px 11px}
.bm-meta label,
.bm-gpu-metrics label{
  display:block;
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:4px;
}
.bm-meta span{display:block;font-size:12.5px;line-height:1.45;word-break:break-word}
.bm-chip-row{display:flex;gap:8px;flex-wrap:wrap}
.bm-mini-chip{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
}
.bm-mini-chip span{font-family:var(--mono);font-size:11px;color:var(--muted)}
.bm-runtime-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(280px,.92fr);
  gap:12px;
  margin-top:12px;
}
.bm-gpu-card{padding:14px}
.bm-gpu-top{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
  margin-bottom:10px;
}
.bm-gpu-name{font-size:14px;font-weight:700;margin-top:3px}
.bm-gpu-metrics{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  margin-bottom:10px;
}
.bm-gpu-metrics > div{
  padding:8px 9px;
  border:1px solid var(--border);
  border-radius:10px;
  background:rgba(255,255,255,.02);
}
.bm-gpu-metrics b{font-family:var(--mono);font-size:12px}
.bm-api-card{padding:14px}
.api-list{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.api-row{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
  padding:10px;
  border:1px solid var(--border);
  border-radius:11px;
  background:rgba(255,255,255,.02);
}
.api-row .api-method{
  display:inline-flex;
  align-items:center;
  padding:2px 8px;
  border-radius:999px;
  font-family:var(--mono);
  font-size:10px;
  margin-bottom:6px;
  border:1px solid rgba(79,140,255,.3);
  color:#9fcbff;
  background:rgba(79,140,255,.08);
}
.api-row .api-method.post{
  border-color:rgba(47,196,138,.3);
  color:#a2efcb;
  background:rgba(47,196,138,.08);
}
.api-row .api-path{font-size:12px;color:#dbeafe;word-break:break-all}
.api-desc{font-size:11px;color:var(--muted);margin-top:3px;line-height:1.45}
.bm-note{
  margin-top:12px;
  padding:10px 11px;
  font-size:11.5px;
  line-height:1.55;
  color:#c6d9ea;
}
.bm-note.err{border-color:rgba(255,107,107,.3);color:#ffd7d7;background:rgba(255,107,107,.08)}
.hall-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:14px;
}
.hall-proj{
  border:1px solid var(--border);
  border-radius:18px;
  padding:16px 16px 15px;
  cursor:pointer;
  background:
    radial-gradient(380px 120px at 20% 0%, rgba(79,140,255,.08), transparent 58%),
    var(--surface);
  backdrop-filter:blur(14px);
  transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease,background .15s ease;
}
.hall-proj:hover{
  transform:translateY(-2px);
  border-color:rgba(79,140,255,.38);
  box-shadow:0 14px 28px rgba(0,0,0,.18);
}
.hall-proj-head{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
}
.hall-proj-kicker{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:4px;
}
.hall-proj b{font-size:14px;line-height:1.25}
.hall-proj-summary{
  margin-top:8px;
  font-size:11.5px;
  color:var(--muted);
  line-height:1.5;
}
.hall-proj .meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.hall-proj-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:8px;
}
.hall-proj-time{
  font-size:10px;
  color:var(--muted);
}
.hall-proj-actions{display:flex;gap:6px;flex-wrap:wrap}
.hall-new{
  border:1px dashed var(--border-strong);
  border-radius:16px;
  display:grid;
  place-items:center;
  min-height:120px;
  color:var(--muted);
  cursor:pointer;
  transition:all .16s ease;
  font-size:13px;
  background:rgba(255,255,255,.016);
}
.hall-new:hover{
  border-color:rgba(79,140,255,.42);
  color:#a9cbff;
  box-shadow:0 12px 24px rgba(0,0,0,.14);
}

/* ---------- Voice task ---------- */
.vo-bar{display:flex;align-items:center;gap:12px}
.vo-bar audio{height:34px;max-width:340px}
.step-dots{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10px;color:var(--muted)}
.step-dots i{width:8px;height:8px;border-radius:50%;background:rgba(141,164,198,.18)}
.step-dots i.on{background:var(--primary);box-shadow:0 0 8px rgba(79,140,255,.18)}

/* ---------- Audio workbench ---------- */
.audio-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:14px;
}
.audio-tools-main{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.audio-toolbar audio{height:34px;max-width:360px}
.aw-master{display:flex;align-items:center;gap:12px;margin-top:10px;padding:8px 10px;border:1px solid var(--border);border-radius:12px;background:rgba(255,255,255,.03)}
.aw-master .tag{white-space:nowrap}
.aw-master audio{height:34px;max-width:420px;flex:1}
.audio-zoom{display:flex;align-items:center;gap:8px;font-size:12px}
.audio-zoom input{width:170px}
.audio-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 340px;
  gap:14px;
  align-items:start;
}
.audio-timeline-card{overflow:auto}
.aw-transport{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:10px 0 12px}
.aw-transport .btn{padding:7px 12px;line-height:1.2}
.aw-transport .time{font-family:var(--mono);font-size:13px;color:var(--text);min-width:148px;text-align:center;background:#0b1422;border:1px solid var(--border);border-radius:8px;padding:7px 10px;white-space:nowrap}
.aw-transport .time .sep{color:var(--muted);margin:0 4px}
.aw-transport .spacer{flex:1 1 auto}
.aw-transport .active-track{font-size:11.5px;color:var(--muted);white-space:nowrap}
.aw-transport .active-track b{color:#7df0d2}
.aw-transport .btn.split{border-color:rgba(255,92,138,.5);color:#ff9bb8}
.aw-transport .btn.split:hover{background:rgba(255,92,138,.14)}
.time-ruler{
  position:relative;
  height:28px;
  min-width:100%;
  border-bottom:1px solid var(--border);
  margin-top:2px;
}
.time-ruler span{
  position:absolute;
  top:5px;
  transform:translateX(-1px);
  font-family:var(--mono);
  font-size:10px;
  color:var(--muted);
  border-left:1px solid rgba(141,164,198,.22);
  padding-left:5px;
  height:22px;
}
.audio-timeline{min-width:100%;position:relative}
.aw-playhead{position:absolute;top:0;bottom:0;width:2px;background:#ff5c8a;box-shadow:0 0 10px rgba(255,92,138,.6);pointer-events:none;z-index:6;display:none}
.aw-playhead::before{content:"";position:absolute;top:0;left:-5px;width:12px;height:12px;background:#ff5c8a;clip-path:polygon(0 0,100% 0,50% 100%)}
.time-ruler{cursor:pointer;user-select:none}
.time-ruler .ruler-flag{position:absolute;top:0;bottom:0;width:2px;background:rgba(255,92,138,.55);pointer-events:none}
.audio-track-lane{cursor:crosshair}
.audio-track-lane.active{background:linear-gradient(90deg,rgba(125,240,210,.10) 1px,transparent 1px) 0 0/80px 100%,rgba(125,240,210,.05)}
.audio-track-head.active{border-right-color:#7df0d2;box-shadow:inset 3px 0 0 #7df0d2}
.clip-ops{display:flex;gap:6px;margin-top:4px}
.audio-track-row{
  display:grid;
  grid-template-columns:210px minmax(680px,1fr);
  min-height:88px;
  border-bottom:1px solid rgba(141,164,198,.1);
}
.audio-track-head{
  position:sticky;
  left:0;
  z-index:2;
  display:flex;
  flex-direction:column;
  gap:7px;
  padding:10px;
  background:#0b1422;
  border-right:1px solid var(--border);
}
.audio-track-head b{font-size:12px}
.audio-track-head label{font-size:11px;color:var(--muted)}
.mini-field{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:6px}
.mini-field .input{height:28px;padding:4px 6px;font-size:11px}
.audio-track-lane{
  position:relative;
  min-height:88px;
  background:
    linear-gradient(90deg,rgba(141,164,198,.08) 1px,transparent 1px) 0 0/80px 100%,
    rgba(255,255,255,.012);
}
.audio-clip{
  position:absolute;
  top:12px;
  height:64px;
  border:1px solid rgba(95,212,184,.35);
  background:linear-gradient(180deg,rgba(20,184,166,.18),rgba(14,116,144,.14));
  border-radius:8px;
  overflow:hidden;
  cursor:pointer;
  box-shadow:0 8px 18px rgba(0,0,0,.16);
}
.audio-clip:hover{border-color:rgba(125,235,210,.66)}
.audio-clip canvas{position:absolute;inset:0;width:100%;height:100%}
.audio-clip-label{
  position:absolute;
  left:8px;
  right:8px;
  bottom:6px;
  display:flex;
  justify-content:space-between;
  gap:8px;
  align-items:center;
  font-size:10px;
  color:#d9fff8;
  text-shadow:0 1px 4px rgba(0,0,0,.55);
}
.audio-clip-label b{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.muted-clip{opacity:.42;filter:saturate(.5)}
.audio-clip.selected{border-color:#5ff0d2;box-shadow:0 0 0 2px rgba(95,240,210,.55),0 8px 18px rgba(0,0,0,.2)}
.clip-handle{position:absolute;top:0;bottom:0;width:9px;cursor:ew-resize;z-index:3;display:flex;align-items:center;justify-content:center;touch-action:none}
.clip-handle.head{left:0}
.clip-handle.tail{right:0}
.clip-handle::before{content:"";width:3px;height:26px;border-radius:2px;background:rgba(223,255,248,0);transition:background .12s}
.audio-clip:hover .clip-handle::before{background:rgba(223,255,248,.5)}
.clip-handle:hover::before{background:#5ff0d2 !important}
.clip-handle:hover{background:rgba(95,240,210,.18)}
.clip-row{display:flex;justify-content:space-between;align-items:center;font-size:11.5px;color:var(--muted)}
.clip-slider{display:grid;gap:5px;margin-top:2px}
.clip-slider-head{display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted)}
.clip-slider input[type=range]{width:100%;accent-color:#5ff0d2}
.clip-slider-hint{font-size:10px;color:var(--muted);opacity:.82;line-height:1.4}
.audio-side{position:sticky;top:82px}
.clip-editor{display:grid;gap:9px}
.clip-editor p{
  margin:0;
  color:var(--muted);
  font-size:11.5px;
  line-height:1.55;
  max-height:86px;
  overflow:auto;
}
.clip-editor audio{width:100%;height:34px}
.clip-editor label{
  display:grid;
  grid-template-columns:88px minmax(0,1fr);
  gap:8px;
  align-items:center;
  color:var(--muted);
  font-size:11.5px;
}
.clip-editor label:has(input[type="checkbox"]){display:flex}
.clip-editor .input{height:32px;padding:5px 8px}
.audio-materials{display:grid;gap:8px;max-height:360px;overflow:auto}
.audio-material{
  display:flex;
  justify-content:space-between;
  gap:8px;
  align-items:center;
  padding:9px 10px;
  border:1px solid var(--border);
  background:#0b1422;
  border-radius:8px;
}
.audio-material b{
  display:block;
  max-width:210px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:12px;
}

.empty{
  padding:46px 0;
  text-align:center;
  color:var(--muted);
  font-size:13px;
  border:1px dashed rgba(141,164,198,.2);
  border-radius:16px;
  background:rgba(255,255,255,.015);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
}
.empty::before{
  content:"";
  display:block;
  width:40px;
  height:40px;
  margin:0 auto 10px;
  border-radius:14px;
  background:
    radial-gradient(circle at 30% 30%, rgba(79,140,255,.34), transparent 38%),
    linear-gradient(135deg,rgba(79,140,255,.2),rgba(124,109,255,.14));
  box-shadow:0 12px 24px rgba(0,0,0,.16);
}
.empty:has(.btn){
  padding:32px 22px;
}
.empty strong{
  display:block;
  font-size:14px;
  color:var(--text);
  margin-bottom:6px;
}
.mono{font-family:var(--mono)}
.muted{color:var(--muted)}
.flex{display:flex;align-items:center;gap:10px}
.right{margin-left:auto}

/* ---------- Utility ---------- */
.row{display:flex;align-items:center;gap:10px}
.hero-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.hero-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.hero-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.02);
  color:var(--muted);
  font-size:12px;
}
.hero-chip strong{color:var(--text);font-weight:600}
.section-quiet{
  color:var(--muted);
  font-size:12px;
}

@media (max-width:1200px){
  .hero{grid-template-columns:1fr}
  .dash-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bm-grid,.bm-runtime-grid{grid-template-columns:1fr}
  .bm-meta,.bm-gpu-metrics{grid-template-columns:1fr}
  .row2{grid-template-columns:1fr}
  .audio-layout{grid-template-columns:1fr}
  .audio-side{position:static}
  .hall-hero-grid{grid-template-columns:1fr}
  .hero-workflow{grid-template-columns:1fr 1fr}
}
@media (max-width:1080px){
  .side{
    position:fixed;
    left:0;
    top:64px;
    bottom:0;
    z-index:50;
    transform:translateX(-100%);
    transition:transform .2s ease;
    box-shadow:20px 0 40px rgba(0,0,0,.28);
  }
  .side.open{transform:none}
  .main{padding:18px 18px 24px}
  .hall-hero{padding:22px}
}
@media (max-width:720px){
  header{gap:10px;padding:0 14px}
  .logo{font-size:14px}
  .logo .sub{display:none}
  .hall-hero h1{font-size:22px}
  .hall-hero-banner{display:flex}
  .hall-hero-grid,.hero-workflow,.hero-stats{grid-template-columns:1fr}
  .page-head{padding:16px 16px 14px;align-items:flex-start;flex-direction:column}
  .page-head h2{font-size:21px}
  .page-summary{justify-content:flex-start}
  .hall-hero{padding:22px}
  .dash-metrics{grid-template-columns:1fr}
  .card,.bm-card,.box{border-radius:18px}
  .flowstrip{border-radius:18px}
  .fs-step{padding:8px 12px}
  .hero{gap:14px}
  .shots{grid-template-columns:1fr}
  .grid-auto{grid-template-columns:1fr}
  .bm-actions,.card-actions,.box .foot{width:100%}
}

/* ===== 音频工作台：片段列表（已移除时间轨道） ===== */
.aw-segments{display:grid;gap:14px;margin-top:10px}
.aw-track-group{border:1px solid var(--border);border-radius:14px;padding:10px 12px 12px;background:rgba(255,255,255,.02)}
.aw-track-group.active{border-color:rgba(95,240,210,.6);box-shadow:inset 0 0 0 1px rgba(95,240,210,.22)}
.aw-track-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;cursor:pointer;user-select:none;padding:4px 2px 8px;border-bottom:1px dashed var(--border);margin-bottom:10px}
.aw-track-head b{font-size:14px;color:var(--text)}
.aw-track-head .spacer{flex:1 1 auto}
.aw-track-head .aw-pick{font-size:11px;color:var(--muted);border:1px solid var(--border);border-radius:999px;padding:2px 9px;white-space:nowrap}
.aw-track-group.active .aw-track-head .aw-pick{color:#5ff0d2;border-color:rgba(95,240,210,.5)}

.aw-segment{border:1px solid var(--border);border-radius:12px;padding:10px 12px;margin-bottom:10px;background:#0b1422;transition:border-color .15s,box-shadow .15s}
.aw-segment:last-child{margin-bottom:0}
.aw-segment:hover{border-color:rgba(125,235,210,.5)}
.aw-segment.selected{border-color:#5ff0d2;box-shadow:0 0 0 2px rgba(95,240,210,.5)}
.aw-seg-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.aw-seg-head b{font-size:13.5px;color:var(--text)}
.aw-seg-head .mono{font-size:11.5px}
.aw-seg-head .spacer{flex:1 1 auto}
.aw-seg-head .btn{padding:4px 10px;font-size:11.5px}
.mini-check{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--muted);cursor:pointer}
.aw-seg-text{margin:6px 0 8px;font-size:12.5px;line-height:1.6;color:var(--muted)}
.aw-segment audio{width:100%;height:34px;margin:2px 0 8px}

.aw-seg-props{border-top:1px dashed var(--border);padding-top:9px;display:grid;gap:10px;cursor:default}
.aw-seg-fields{display:flex;gap:14px;flex-wrap:wrap}
.aw-seg-fields label{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--muted)}
.aw-seg-fields .input{width:84px;height:28px;padding:4px 6px;font-size:11.5px}
.aw-seg-fields .unit{color:var(--muted);font-size:11px}

.au-export-card{border-color:rgba(95,240,210,.45)}
.au-export-card b{color:#5ff0d2}
.au-path{font-size:11.5px;background:#0b1422;border:1px solid var(--border);border-radius:8px;padding:7px 9px;word-break:break-all;margin:8px 0}