:root {
  --bg0: #05080f;
  --bg1: #0a1220;
  --panel: rgba(10, 18, 32, 0.82);
  --panel-2: rgba(12, 22, 38, 0.94);
  --line: rgba(80, 180, 255, 0.16);
  --line-strong: rgba(80, 220, 255, 0.38);
  --text: #e9f4ff;
  --muted: #7f97b3;
  --cyan: #35e7ff;
  --blue: #4da3ff;
  --mint: #4dffd2;
  --purple: #7b6cff;
  --green: #3dff9a;
  --yellow: #ffd15a;
  --red: #ff6b86;
  --glow: 0 0 24px rgba(53, 231, 255, 0.18);
  --radius: 22px;
  --font: "SF Pro Display", "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background:
    radial-gradient(900px 500px at 15% 0%, rgba(53,231,255,.12), transparent 50%),
    radial-gradient(800px 500px at 90% 10%, rgba(77,163,255,.10), transparent 45%),
    linear-gradient(180deg, #05080f 0%, #08111d 45%, #060b14 100%);
  overflow: hidden;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
.muted { color: var(--muted); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; color: var(--muted); }

.app-shell {
  height: 100vh;
  display: grid;
  grid-template-columns: 250px 1fr;
  background-image:
    linear-gradient(rgba(53,231,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(53,231,255,.03) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* Sidebar */
.sidebar {
  border-right: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(8,14,24,.95), rgba(6,10,18,.98));
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
}
.sidebar::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: linear-gradient(180deg, transparent, rgba(53,231,255,.55), transparent);
  box-shadow: 0 0 18px rgba(53,231,255,.45);
}
.brand { display:flex; gap:12px; align-items:center; padding: 4px 8px 10px; }
.brand-mark {
  width: 42px; height: 42px; border-radius: 14px;
  display:grid; place-items:center; font-weight:900; color:#041018;
  background: linear-gradient(135deg, var(--cyan), var(--blue));
  box-shadow: 0 0 28px rgba(53,231,255,.35);
}
.brand-text strong { display:block; font-size: 14px; }
.brand-text span { color: var(--muted); font-size: 12px; }
.nav { display:flex; flex-direction:column; gap:8px; }
.nav-item {
  border: 1px solid transparent;
  background: transparent;
  border-radius: 16px;
  padding: 12px 12px;
  display:flex; align-items:center; gap:12px;
  color: var(--muted);
  text-align:left;
  transition: .18s ease;
}
.nav-item .ni {
  width: 34px; height: 34px; border-radius: 12px;
  display:grid; place-items:center;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.04);
}
.nav-item .nt { display:flex; flex-direction:column; gap:2px; }
.nav-item .nt b { font-size: 13px; font-weight: 700; color: #d7e7f8; }
.nav-item .nt i { font-style: normal; font-size: 11px; color: var(--muted); }
.nav-item:hover {
  border-color: rgba(53,231,255,.18);
  background: rgba(53,231,255,.05);
  color: var(--text);
}
.nav-item.active {
  border-color: rgba(53,231,255,.35);
  background: linear-gradient(90deg, rgba(53,231,255,.14), rgba(77,163,255,.05));
  box-shadow: inset 0 0 0 1px rgba(53,231,255,.08), var(--glow);
}
.nav-item.active .ni {
  color: #041018;
  background: linear-gradient(135deg, var(--cyan), var(--blue));
  border: none;
}
.sidebar-foot { margin-top:auto; display:flex; flex-direction:column; gap:10px; }
.pool-pill {
  border: 1px solid rgba(61,255,154,.28);
  color: #9dffe0;
  background: rgba(61,255,154,.08);
  border-radius: 999px;
  padding: 10px 12px;
  font-size: 12px;
  text-align:center;
}
.ghost-btn {
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  border-radius: 12px;
  padding: 10px 12px;
  color: var(--muted);
}

/* Main */
.main {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: 78px 1fr 190px;
}
.topbar {
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  background: rgba(6,10,18,.55);
  backdrop-filter: blur(14px);
}
.project-box {
  min-width: 220px;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 10px 14px;
  background: rgba(255,255,255,.03);
}
.project-box span { display:block; font-size: 11px; }
.project-box strong { font-size: 14px; }
.top-stats { display:flex; gap:14px; flex:1; justify-content:center; }
.stat-block {
  min-width: 150px;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 10px 14px;
  background: rgba(255,255,255,.025);
}
.stat-label { color: var(--muted); font-size: 11px; }
.stat-value { margin-top: 4px; font-size: 18px; font-weight: 800; letter-spacing: .2px; }
.stat-value.good { color: var(--green); text-shadow: 0 0 18px rgba(61,255,154,.25); }
.bar {
  margin-top: 8px; height: 6px; border-radius: 999px;
  background: rgba(255,255,255,.06); overflow:hidden;
}
.bar i {
  display:block; height:100%;
  background: linear-gradient(90deg, var(--cyan), var(--blue));
  box-shadow: 0 0 12px rgba(53,231,255,.55);
}
.top-actions { display:flex; gap:10px; }
.btn {
  border: 1px solid var(--line);
  background: rgba(255,255,255,.04);
  color: var(--text);
  border-radius: 12px;
  padding: 10px 14px;
  transition: .15s ease;
}
.btn:hover { border-color: var(--line-strong); box-shadow: var(--glow); }
.btn.primary {
  border: none;
  color: #041018;
  font-weight: 800;
  background: linear-gradient(135deg, var(--cyan), var(--blue));
  box-shadow: 0 8px 28px rgba(53,231,255,.22);
}
.btn.danger { border-color: rgba(255,107,134,.35); color: #ffb4c0; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.link-btn {
  border: none; background: transparent; color: var(--cyan); font-size: 12px;
}

.content {
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 16px;
  padding: 16px 18px 8px;
}
.workspace {
  min-width: 0; min-height: 0;
  overflow: auto;
  padding-right: 4px;
}
.right-panel {
  min-height: 0;
  overflow: auto;
  display:flex;
  flex-direction:column;
  gap: 12px;
}

/* Overview cards */
.hero-grid {
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.studio-card {
  position: relative;
  border: 1px solid rgba(80,200,255,.18);
  border-radius: 24px;
  padding: 22px;
  min-height: 190px;
  background:
    radial-gradient(circle at 20% 20%, rgba(53,231,255,.10), transparent 40%),
    linear-gradient(180deg, rgba(14,24,40,.92), rgba(8,14,24,.96));
  box-shadow: 0 18px 40px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.03);
  overflow: hidden;
}
.studio-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(53,231,255,.55), transparent 35%, transparent 65%, rgba(77,163,255,.35));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.studio-card .icon {
  width: 52px; height: 52px; border-radius: 16px;
  display:grid; place-items:center; font-size: 22px;
  color: var(--cyan);
  background: rgba(53,231,255,.08);
  border: 1px solid rgba(53,231,255,.22);
  box-shadow: 0 0 22px rgba(53,231,255,.18);
  margin-bottom: 14px;
}
.studio-card h3 {
  margin: 0;
  font-size: 22px;
  letter-spacing: .2px;
}
.studio-card h3 small {
  display:block;
  margin-top: 4px;
  color: #9fdfff;
  font-size: 14px;
  font-weight: 600;
}
.studio-card p {
  margin: 10px 0 16px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
.studio-card .btn {
  min-width: 170px;
  border-radius: 999px;
  border-color: rgba(53,231,255,.35);
  color: #bff6ff;
  background: rgba(53,231,255,.06);
}
.studio-card .btn:hover {
  background: linear-gradient(135deg, rgba(53,231,255,.18), rgba(77,163,255,.12));
}

.panel {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--panel-2);
  box-shadow: 0 14px 36px rgba(0,0,0,.22);
  padding: 14px;
}
.panel h3 {
  margin: 0 0 12px;
  font-size: 13px;
  color: #c7ddf5;
  letter-spacing: .3px;
}
.status-hero {
  border-radius: 18px;
  padding: 16px;
  text-align:center;
  background: linear-gradient(180deg, rgba(53,231,255,.16), rgba(53,231,255,.04));
  border: 1px solid rgba(53,231,255,.28);
  box-shadow: var(--glow);
  margin-bottom: 12px;
}
.status-hero .big {
  font-size: 28px;
  font-weight: 900;
  color: var(--cyan);
  text-shadow: 0 0 20px rgba(53,231,255,.35);
}
.status-hero .sub { color: var(--muted); font-size: 12px; margin-top: 4px; }
.metric-row {
  display:grid; grid-template-columns: 1fr 1fr; gap:10px; margin-bottom: 12px;
}
.metric-box {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px;
  background: rgba(255,255,255,.02);
}
.metric-box .k { color: var(--muted); font-size: 11px; }
.metric-box .v { margin-top: 4px; font-weight: 800; }
.spark {
  height: 42px;
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(53,231,255,.10), transparent),
    repeating-linear-gradient(90deg, rgba(53,231,255,.18), rgba(53,231,255,.18) 2px, transparent 2px, transparent 10px);
  margin-top: 8px;
  position: relative;
  overflow:hidden;
}
.spark::after {
  content:"";
  position:absolute; left:0; right:0; bottom:8px; height:2px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  box-shadow: 0 0 10px var(--cyan);
}
.model-list { display:flex; flex-direction:column; gap:8px; }
.model-item {
  display:flex; justify-content:space-between; align-items:center;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  background: rgba(255,255,255,.02);
  font-size: 13px;
}
.dot {
  width: 8px; height: 8px; border-radius: 50%;
  display:inline-block; margin-right: 6px;
  background: var(--green);
  box-shadow: 0 0 10px rgba(61,255,154,.7);
}
.chart-box {
  height: 90px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(53,231,255,.08), transparent),
    repeating-linear-gradient(0deg, rgba(255,255,255,.04), rgba(255,255,255,.04) 1px, transparent 1px, transparent 18px);
  position: relative;
  overflow: hidden;
}
.chart-line {
  position:absolute; left:10px; right:10px; bottom:14px; height:54px;
  background:
    radial-gradient(circle at 10% 80%, rgba(53,231,255,.0) 0 8px, transparent 9px),
    linear-gradient(110deg, transparent 0 8%, rgba(53,231,255,.85) 12%, rgba(77,163,255,.7) 45%, rgba(53,231,255,.9) 78%, transparent 92%);
  clip-path: polygon(0 80%, 12% 70%, 24% 62%, 36% 50%, 48% 42%, 60% 30%, 72% 28%, 84% 18%, 100% 12%, 100% 100%, 0 100%);
  opacity: .9;
}
.bars {
  display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; align-items:end; height: 92px;
}
.bars .b {
  border-radius: 10px 10px 4px 4px;
  background: linear-gradient(180deg, var(--cyan), rgba(77,163,255,.25));
  box-shadow: 0 0 16px rgba(53,231,255,.18);
}
.bars .lbl { text-align:center; color: var(--muted); font-size: 11px; margin-top: 6px; }

/* Studio pages */
.page-head {
  display:flex; justify-content:space-between; align-items:flex-end; gap:12px; margin-bottom: 14px;
}
.page-head h2 { margin:0; font-size: 24px; }
.page-head p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.studio-layout {
  display:grid;
  grid-template-columns: 1.35fr .9fr;
  gap: 14px;
  min-height: 420px;
}
.canvas-panel, .control-panel {
  border: 1px solid var(--line);
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 30%, rgba(53,231,255,.07), transparent 40%),
    linear-gradient(180deg, rgba(12,20,34,.92), rgba(8,13,22,.96));
  box-shadow: 0 18px 40px rgba(0,0,0,.25);
  min-height: 420px;
}
.canvas-panel {
  display:grid; place-items:center; overflow:hidden; position:relative;
}
.canvas-empty { text-align:center; color: var(--muted); padding: 24px; }
.canvas-empty h3 { margin:0 0 8px; color: var(--text); }
.preview-media { max-width:100%; max-height:100%; object-fit: contain; }
.control-panel { padding: 14px; overflow:auto; }
.field { margin-bottom: 10px; }
.field label { display:block; margin-bottom:6px; color: var(--muted); font-size: 12px; }
.field input, .field select, .field textarea {
  width: 100%;
  border: 1px solid var(--line);
  background: rgba(0,0,0,.28);
  border-radius: 12px;
  padding: 10px 12px;
  outline: none;
}
.field textarea { min-height: 110px; resize: vertical; line-height: 1.45; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: rgba(53,231,255,.55);
  box-shadow: 0 0 0 3px rgba(53,231,255,.12);
}
.row { display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
.actions { display:flex; gap:8px; flex-wrap:wrap; }
.actions .btn { flex: 1; }
.chips { display:flex; flex-wrap:wrap; gap:8px; }
.chip {
  border:1px solid var(--line); border-radius:999px; padding:6px 10px;
  background: rgba(255,255,255,.03); color: var(--muted); font-size:12px;
}
.chip.active {
  color:#041018; font-weight:800; border:none;
  background: linear-gradient(135deg, var(--cyan), var(--blue));
}
.dropzone {
  border:1px dashed rgba(80,180,255,.35);
  border-radius: 14px;
  padding: 14px;
  text-align:center;
  color: var(--muted);
  background: rgba(255,255,255,.02);
}
.dropzone:hover { border-color: rgba(53,231,255,.6); color: var(--text); }
.refs { display:flex; flex-wrap:wrap; gap:8px; }
.ref-item {
  width: 72px; height: 72px; border-radius: 12px; overflow:hidden;
  border:1px solid var(--line); position:relative; background:#000;
}
.ref-item img, .ref-item video { width:100%; height:100%; object-fit:cover; }
.ref-item button {
  position:absolute; top:4px; right:4px; width:20px; height:20px; border:none;
  border-radius:50%; background: rgba(0,0,0,.65); color:#fff; font-size:12px;
}
.asset-grid {
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}
.asset-card {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 12px;
  background: rgba(255,255,255,.03);
}
.asset-card img, .asset-cover {
  width:100%; height:120px; object-fit:cover; border-radius:12px; background:#000;
  display:grid; place-items:center; color: var(--muted);
}
.asset-card h4 { margin: 10px 0 4px; font-size: 14px; }
.asset-card p { margin:0; color: var(--muted); font-size: 12px; }

/* Bottom dock */
.bottom-dock {
  display:grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 14px;
  padding: 0 18px 16px;
  min-height: 0;
}
.dock-card {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(8,14,24,.82);
  padding: 12px 14px;
  min-height: 0;
  overflow: auto;
}
.dock-head {
  display:flex; justify-content:space-between; align-items:center; margin-bottom: 8px;
}
.dock-head h3 { margin:0; font-size: 13px; color:#c7ddf5; }
.task-list, .gallery-strip { display:flex; flex-direction:column; gap:8px; }
.task-item, .gallery-item {
  display:flex; justify-content:space-between; gap:10px; align-items:center;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px 10px;
  background: rgba(255,255,255,.02);
}
.task-item .title, .gallery-item .title { font-size: 13px; }
.task-item .sub, .gallery-item .sub { color: var(--muted); font-size: 11px; margin-top: 2px; }
.badge {
  font-size: 11px; border-radius: 999px; padding: 4px 8px; border: 1px solid var(--line);
}
.badge.running, .badge.queued { color: var(--yellow); border-color: rgba(255,209,90,.35); }
.badge.succeeded { color: var(--green); border-color: rgba(61,255,154,.35); }
.badge.failed { color: var(--red); border-color: rgba(255,107,134,.35); }

/* Modal / toast */
.toast-wrap {
  position: fixed; right: 18px; bottom: 18px; z-index: 50;
  display:flex; flex-direction:column; gap:8px;
}
.toast {
  min-width: 240px; max-width: 420px;
  border:1px solid var(--line); border-radius:14px; padding:12px 14px;
  background: rgba(10,16,28,.96); box-shadow: 0 18px 40px rgba(0,0,0,.35);
}
.toast.error { border-color: rgba(255,107,134,.45); }
.toast.ok { border-color: rgba(61,255,154,.45); }
.modal-mask {
  position:fixed; inset:0; background: rgba(0,0,0,.55); display:none; place-items:center; z-index:60;
}
.modal-mask.show { display:grid; }
.modal {
  width: min(520px, calc(100vw - 32px));
  border:1px solid var(--line); border-radius:18px; background:#101a2a; padding:16px;
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
}
.modal h3 { margin:0 0 12px; }
.hidden { display:none !important; }

@media (max-width: 1280px) {
  .content { grid-template-columns: 1fr 280px; }
  .studio-layout { grid-template-columns: 1fr; }
}
@media (max-width: 980px) {
  .app-shell { grid-template-columns: 88px 1fr; }
  .brand-text, .nav-item .nt i, .sidebar-foot { display:none; }
  .nav-item { justify-content:center; }
  .content { grid-template-columns: 1fr; }
  .right-panel { display:none; }
  .bottom-dock { grid-template-columns: 1fr; }
  .hero-grid { grid-template-columns: 1fr; }
}


/* ===== Edit Studio professional workflow ===== */
.edit-page {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.edit-page-head { margin-bottom: 0; flex: 0 0 auto; }
.edit-head-actions { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
.edit-head-actions .btn:disabled,
.edit-control-panel .btn:disabled,
.mask-tools .btn:disabled {
  opacity: .45;
  cursor: not-allowed;
}
.edit-page .studio-layout.edit-layout,
.edit-layout {
  flex: 1;
  min-height: 0;
  grid-template-columns: minmax(0, 1.7fr) minmax(300px, .85fr);
  gap: 12px;
  height: 100%;
  display: grid;
}
.edit-canvas-panel {
  display:block;
  padding:0;
  overflow:hidden;
  min-height: 0;
  height: 100%;
}
.edit-control-panel {
  min-height: 0;
  height: 100%;
  overflow: auto;
}
.edit-stage {
  height: 100%;
  min-height: 0;
  display:flex;
  flex-direction:column;
}
.edit-stage-head {
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding: 10px 12px; border-bottom: 1px solid var(--line);
  flex: 0 0 auto;
}
.edit-stage-tags { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.pill {
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid rgba(53,231,255,.35);
  color:#bff6ff; background: rgba(53,231,255,.08);
  border-radius:999px; padding:6px 10px; font-size:12px;
}
.pill.soft {
  border-color: rgba(255,255,255,.12);
  color: var(--muted);
  background: rgba(255,255,255,.04);
}
.edit-stage-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 0;
}
.edit-asset-rail {
  border-right: 1px solid var(--line);
  background: rgba(0,0,0,.22);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.edit-asset-rail-head {
  display:flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 8px 6px;
  flex: 0 0 auto;
}
.edit-asset-rail-head strong { font-size: 12px; }
.edit-asset-rail-list {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 6px 8px 10px;
  scrollbar-width: thin;
}
.edit-asset-rail-actions {
  display:flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border-top: 1px solid var(--line);
  flex: 0 0 auto;
}
.edit-asset-rail-actions .btn {
  width: 100%;
  padding: 8px 6px;
  font-size: 12px;
}
.edit-main-stage {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.mask-wrap {
  position: relative;
  flex: 1;
  min-height: 0;
  background:
    linear-gradient(45deg, rgba(255,255,255,.03) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255,255,255,.03) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(255,255,255,.03) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(255,255,255,.03) 75%),
    #070d16;
  background-size: 24px 24px;
  background-position: 0 0, 0 12px, 12px -12px, -12px 0;
  display:grid;
  place-items:center;
  overflow:hidden;
}
.mask-wrap.empty { place-items: center; }
.mask-base {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  display:block;
  pointer-events: none;
  user-select: none;
}
.mask-canvas {
  position:absolute; inset:0;
  width:100%; height:100%;
  cursor: crosshair;
  touch-action: none;
}
.mask-tools {
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  padding: 10px 12px; border-top: 1px solid var(--line);
  background: rgba(0,0,0,.18);
  flex: 0 0 auto;
}
.mask-tools.is-disabled { opacity: .55; }
.brush-label {
  display:flex; align-items:center; gap:8px;
  color: var(--muted); font-size: 12px;
}
.brush-label input[type="range"] { width: 120px; }
.panel-note {
  border: 1px solid rgba(53,231,255,.22);
  background: rgba(53,231,255,.06);
  color: #bfefff;
  border-radius: 12px;
  padding: 8px 10px;
  font-size: 12px;
  margin-bottom: 10px;
}
.compare-stage {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  min-height: 0;
}
.compare-pane {
  position: relative;
  min-width: 0;
  min-height: 0;
  display:grid;
  place-items:center;
  background: #000;
  border-right: 1px solid rgba(255,255,255,.08);
  overflow: hidden;
}
.compare-pane:last-child { border-right: none; }
.compare-pane img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #000;
}
.compare-label {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(0,0,0,.62);
  border: 1px solid rgba(255,255,255,.12);
  color: #d7e7f8;
}
.edit-thumb {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #000;
  padding: 0;
  cursor: pointer;
  position: relative;
}
.edit-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.edit-thumb:hover {
  border-color: rgba(53,231,255,.45);
  box-shadow: 0 0 14px rgba(53,231,255,.12);
}
.edit-thumb.active {
  border-color: rgba(53,231,255,.85);
  box-shadow: 0 0 0 2px rgba(53,231,255,.25), 0 0 18px rgba(53,231,255,.18);
}
.edit-thumb.active::after {
  content: "已选";
  position: absolute;
  left: 4px;
  top: 4px;
  font-size: 10px;
  padding: 2px 5px;
  border-radius: 999px;
  background: rgba(53,231,255,.9);
  color: #041018;
  font-weight: 700;
}
.edit-thumb-empty {
  color: var(--muted);
  font-size: 11px;
  padding: 14px 4px;
  text-align: center;
  line-height: 1.4;
}
.edit-selected-base {
  display:flex;
  align-items:center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px;
  background: rgba(255,255,255,.02);
}
.edit-selected-base img {
  width: 54px;
  height: 54px;
  object-fit: cover;
  border-radius: 8px;
  background: #000;
}
.edit-selected-placeholder {
  width: 54px;
  height: 54px;
  border-radius: 8px;
  display:grid;
  place-items:center;
  background: rgba(255,255,255,.04);
  border: 1px dashed var(--line);
  color: var(--muted);
  font-size: 11px;
}
@media (max-width: 1180px) {
  .edit-layout { grid-template-columns: 1fr; }
  .edit-control-panel { height: auto; max-height: 46vh; }
  .edit-stage-body { grid-template-columns: 84px minmax(0,1fr); }
}

/* ===== Queue focus layout ===== */
.app-shell.focus-studio .bottom-dock,
.app-shell.focus-overview .bottom-dock,
.app-shell.focus-queue .bottom-dock,
.app-shell.focus-assets .bottom-dock,
.app-shell.focus-edit .bottom-dock,
.app-shell.focus-generate .bottom-dock,
.app-shell.focus-video .bottom-dock {
  display: none !important;
}
.app-shell.focus-studio .main,
.app-shell.focus-overview .main,
.app-shell.focus-queue .main,
.app-shell.focus-assets .main,
.app-shell.focus-edit .main,
.app-shell.focus-generate .main,
.app-shell.focus-video .main {
  grid-template-rows: 78px 1fr;
}
.app-shell.focus-overview .workspace {
  overflow: auto;
  min-height: 0;
}
.app-shell.focus-edit .workspace,
.app-shell.focus-generate .workspace,
.app-shell.focus-video .workspace,
.app-shell.focus-assets .workspace {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.app-shell.focus-edit .canvas-panel,
.app-shell.focus-edit .control-panel,
.app-shell.focus-generate .canvas-panel,
.app-shell.focus-generate .control-panel,
.app-shell.focus-video .canvas-panel,
.app-shell.focus-video .control-panel {
  min-height: 0;
}
.app-shell.focus-edit .studio-layout,
.app-shell.focus-generate .studio-layout,
.app-shell.focus-video .studio-layout {
  min-height: 0;
  height: 100%;
}

.app-shell.hide-right .content {
  grid-template-columns: 1fr;
}
.app-shell.hide-right .right-panel {
  display: none !important;
}

/* ===== Queue list items (thumbnail only) ===== */
.queue-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
.queue-stats .qstat,
.queue-stats button.qstat {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255,255,255,.03);
  padding: 12px 14px;
}
.queue-stats .qstat .k { color: var(--muted); font-size: 12px; margin-bottom: 6px; }
.queue-stats .qstat .v { font-size: 22px; font-weight: 700; }
.queue-stats .qstat.ok .v { color: var(--green); }
.queue-stats .qstat.bad .v { color: var(--red); }
.queue-stats .qstat.run .v { color: var(--yellow); }

.queue-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.queue-item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(255,255,255,.02);
}
.queue-item.clickable { cursor: pointer; }
.queue-item.clickable:hover {
  border-color: rgba(53,231,255,.4);
  box-shadow: 0 0 16px rgba(53,231,255,.1);
}
.queue-thumb {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #000;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
}
.queue-thumb img,
.queue-thumb video {
  width: 64px !important;
  height: 64px !important;
  max-width: 64px !important;
  max-height: 64px !important;
  object-fit: cover !important;
  display: block;
}
.queue-thumb-empty {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 11px;
  text-align: center;
  padding: 4px;
  background: rgba(255,255,255,.03);
}
.queue-main { min-width: 0; }
.queue-main .title {
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.queue-main .sub {
  color: var(--muted);
  font-size: 11px;
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.queue-main .err {
  color: #ff9aab;
  font-size: 11px;
  margin-top: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.queue-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.queue-side .btn { padding: 7px 10px; font-size: 12px; }
@media (max-width: 980px) {
  .queue-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .queue-item { grid-template-columns: 64px 1fr; }
  .queue-side { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; }
}

.queue-page {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}
.queue-topbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}
.queue-topbar h2 {
  margin: 0;
  font-size: 22px;
}
.queue-topbar p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}
.queue-top-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.date-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px 10px;
  color: var(--muted);
  font-size: 12px;
  background: rgba(255,255,255,.03);
}
.date-filter input[type="date"] {
  border: none;
  outline: none;
  background: transparent;
  color: var(--text);
}
.queue-filter-hint {
  margin-top: -2px;
}
.queue-stats button.qstat {
  text-align: left;
  cursor: pointer;
  transition: .15s ease;
  width: 100%;
  color: inherit;
}
.queue-stats button.qstat:hover {
  border-color: rgba(53,231,255,.4);
}
.queue-stats button.qstat.active {
  border-color: rgba(53,231,255,.7);
  box-shadow: 0 0 0 1px rgba(53,231,255,.2), 0 0 18px rgba(53,231,255,.12);
  background: rgba(53,231,255,.06);
}
.queue-panel {
  flex: 1;
  min-height: 0;
  overflow: auto;
}


/* ===== Studio shared pages ===== */
.studio-page {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.studio-page .page-head { flex: 0 0 auto; margin-bottom: 0; }
.generate-layout,
.video-layout {
  flex: 1;
  min-height: 0;
  height: 100%;
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, .88fr);
}
.studio-canvas-panel {
  display: block !important;
  padding: 0 !important;
  overflow: hidden;
  height: 100%;
  min-height: 0;
}
.studio-stage {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.studio-stage-main {
  flex: 1;
  min-height: 0;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 30%, rgba(53,231,255,.07), transparent 40%),
    #070d16;
}
.studio-stage-main .preview-media {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.studio-stage-main .canvas-empty { padding: 24px; }

.studio-asset-panel {
  flex: 0 0 auto;
  border-top: 1px solid var(--line);
  background: rgba(0,0,0,.2);
  padding: 8px 10px 10px;
}
.studio-asset-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.studio-asset-head strong { display:block; font-size: 12px; }
.studio-asset-head .mono { display:block; margin-top: 2px; font-size: 11px; }
.studio-asset-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: thin;
}
.studio-asset-thumb {
  position: relative;
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #000;
  padding: 0;
  cursor: pointer;
}
.studio-asset-thumb img,
.studio-asset-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.studio-asset-thumb:hover {
  border-color: rgba(53,231,255,.45);
  box-shadow: 0 0 14px rgba(53,231,255,.12);
}
.studio-asset-thumb.active {
  border-color: rgba(53,231,255,.85);
  box-shadow: 0 0 0 2px rgba(53,231,255,.22);
}
.studio-asset-tag {
  position: absolute;
  left: 4px;
  bottom: 4px;
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 999px;
  background: rgba(0,0,0,.7);
  color: #d7e7f8;
}
.studio-asset-empty {
  color: var(--muted);
  font-size: 12px;
  padding: 18px 8px;
}

/* ===== Assets library ===== */
.assets-page {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.assets-page .page-head { flex: 0 0 auto; margin-bottom: 0; }
.media-library {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(8,14,24,.72);
  padding: 12px;
  overflow: hidden;
}
.media-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  flex: 0 0 auto;
}
.media-tabs { display:flex; flex-wrap:wrap; gap:8px; }
.media-tabs .chip { min-width: 64px; text-align:center; }
.media-search {
  min-width: 200px;
  flex: 1;
  border: 1px solid var(--line);
  background: rgba(0,0,0,.25);
  border-radius: 12px;
  padding: 10px 12px;
  outline: none;
  color: var(--text);
}
.media-search:focus {
  border-color: rgba(53,231,255,.55);
  box-shadow: 0 0 0 3px rgba(53,231,255,.12);
}
.media-stats {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}
.media-grid {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px;
  align-content: start;
  align-items: start;
  padding-right: 4px;
  padding-bottom: 8px;
}
.media-card {
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255,255,255,.03);
  cursor: pointer;
  transition: .15s ease;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: auto;
  height: auto;
  flex-shrink: 0;
}
.media-card:hover {
  border-color: rgba(53,231,255,.4);
  box-shadow: 0 10px 24px rgba(0,0,0,.28), 0 0 20px rgba(53,231,255,.12);
  transform: translateY(-2px);
}
.media-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  min-height: 160px;
  flex: 0 0 auto;
  background:
    linear-gradient(45deg, rgba(255,255,255,.04) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255,255,255,.04) 25%, transparent 25%),
    #0b1220;
  background-size: 18px 18px;
  background-position: 0 0, 0 9px;
  overflow: hidden;
}
.media-thumb img,
.media-thumb video {
  width: 100% !important;
  height: 100% !important;
  min-width: 100%;
  min-height: 100%;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
  border-radius: 0 !important;
  background: #0b1220;
}
.media-thumb.is-broken::after {
  content: "图片加载失败";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 12px;
  background: rgba(8,14,24,.82);
}
.media-kind {
  position: absolute;
  left: 8px;
  top: 8px;
  z-index: 2;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(0,0,0,.65);
  border: 1px solid rgba(255,255,255,.1);
  color: #d7e7f8;
  backdrop-filter: blur(6px);
}
.media-meta {
  padding: 8px 10px 2px;
  flex: 0 0 auto;
}
.media-meta .name {
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.media-meta .sub {
  color: var(--muted);
  font-size: 11px;
  margin-top: 2px;
}
.media-actions {
  display: flex;
  gap: 6px;
  padding: 8px 10px 10px;
  flex: 0 0 auto;
}
.media-actions .btn {
  flex: 1;
  padding: 7px 6px;
  font-size: 12px;
}
/* hover quick actions overlay on thumb for denser browsing */
.media-thumb .media-hover-actions {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  gap: 6px;
  padding: 10px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.78));
  opacity: 0;
  transform: translateY(6px);
  transition: .16s ease;
}
.media-card:hover .media-thumb .media-hover-actions {
  opacity: 1;
  transform: translateY(0);
}
.media-thumb .media-hover-actions .btn {
  flex: 1;
  padding: 7px 6px;
  font-size: 12px;
  backdrop-filter: blur(6px);
  background: rgba(12,20,34,.82);
}
.btn.danger {
  border-color: rgba(255,107,134,.35);
  color: #ffb3c1;
}
.btn.danger:hover {
  border-color: rgba(255,107,134,.6);
  background: rgba(255,107,134,.08);
}
.media-empty {
  flex: 1;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--muted);
  min-height: 220px;
}
.media-empty h3 { margin: 0 0 8px; color: var(--text); }

/* ===== Media lightbox (immersive viewer) ===== */
.media-lightbox {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  background:
    radial-gradient(1200px 700px at 50% 20%, rgba(53,231,255,.08), transparent 60%),
    rgba(2, 6, 14, 0.88);
  backdrop-filter: blur(14px) saturate(1.1);
  padding: 18px;
}
.media-lightbox.hidden { display: none !important; }
.media-lightbox-shell {
  width: min(1480px, calc(100vw - 24px));
  height: min(96vh, calc(100vh - 24px));
  display: grid;
  grid-template-columns: minmax(0, 1fr) 118px;
  gap: 14px;
  align-items: stretch;
}
.media-lightbox-stage {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  border: 1px solid rgba(120, 180, 255, 0.18);
  background:
    linear-gradient(180deg, rgba(12,18,30,.72), rgba(6,10,18,.9)),
    #05080f;
  box-shadow:
    0 28px 80px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.04);
  overflow: hidden;
}
.media-lightbox-top {
  position: absolute;
  left: 0; right: 0; top: 0;
  z-index: 3;
  padding: 14px 16px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,0));
}
.media-lightbox-titlebox {
  max-width: min(70%, 720px);
  pointer-events: none;
}
.media-lightbox-titlebox strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: #f5f8ff;
  text-shadow: 0 2px 12px rgba(0,0,0,.45);
}
.media-lightbox-titlebox .mono {
  margin-top: 4px;
  font-size: 11px;
  color: rgba(210, 224, 245, 0.72);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.media-lightbox-body {
  flex: 1;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 56px 18px 42px;
  overflow: auto;
  background:
    radial-gradient(circle at 50% 40%, rgba(255,255,255,.03), transparent 55%),
    #000;
}
.media-lightbox-body img.media-lightbox-media,
.media-lightbox-body video.media-lightbox-media,
.media-lightbox-body img,
.media-lightbox-body video {
  width: auto;
  height: auto;
  max-width: min(100%, 1100px);
  max-height: none;
  min-height: min(78vh, 860px);
  object-fit: contain;
  border-radius: 10px;
  background: #000;
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
}
/* 长图：尽量用满宽度，完整纵向展示 */
.media-lightbox:not(.is-video) .media-lightbox-body img.media-lightbox-media,
.media-lightbox:not(.is-video) .media-lightbox-body img {
  width: min(100%, 920px);
  max-width: min(100%, 920px);
  min-height: 0;
  height: auto;
}
.media-lightbox.is-video .media-lightbox-body video {
  width: min(100%, 1280px);
  max-height: calc(100vh - 150px);
  min-height: 0;
}
.media-lightbox-hint {
  position: absolute;
  left: 16px;
  bottom: 12px;
  z-index: 3;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  color: rgba(230,240,255,.78);
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.08);
  pointer-events: none;
}
.media-lightbox-rail {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 8px;
  border-radius: 22px;
  border: 1px solid rgba(90, 190, 255, 0.22);
  background:
    linear-gradient(180deg, rgba(18, 34, 56, 0.96), rgba(10, 18, 32, 0.96));
  box-shadow:
    0 18px 40px rgba(0,0,0,.4),
    inset 0 0 0 1px rgba(53,231,255,.08),
    0 0 24px rgba(53,231,255,.12);
  backdrop-filter: blur(10px);
}
.lb-rail-spacer { flex: 1 1 auto; min-height: 8px; }
.lb-action {
  appearance: none;
  border: 1px solid rgba(120, 190, 255, 0.22);
  background: linear-gradient(180deg, rgba(34, 54, 84, 0.95), rgba(20, 34, 56, 0.95));
  color: #eaf4ff;
  border-radius: 16px;
  min-height: 74px;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
  box-shadow: 0 8px 18px rgba(0,0,0,.22);
}
.lb-action .lb-ico {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 14px;
  color: #071018;
  background: linear-gradient(180deg, #8ff0ff, #35e7ff);
  box-shadow: 0 0 16px rgba(53,231,255,.45);
}
.lb-action .lb-txt {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  text-align: center;
  line-height: 1.2;
}
.lb-action:hover {
  transform: translateY(-1px) scale(1.02);
  border-color: rgba(53,231,255,.55);
  box-shadow:
    0 10px 22px rgba(0,0,0,.28),
    0 0 22px rgba(53,231,255,.18);
}
.lb-action.primary {
  border-color: rgba(53,231,255,.55);
  background: linear-gradient(180deg, rgba(28, 78, 98, 0.98), rgba(14, 42, 58, 0.98));
  box-shadow:
    0 10px 24px rgba(0,0,0,.28),
    0 0 24px rgba(53,231,255,.22);
}
.lb-action.primary .lb-ico {
  background: linear-gradient(180deg, #d8fbff, #5cf0ff);
}
.lb-action.danger {
  border-color: rgba(255, 120, 140, 0.35);
  background: linear-gradient(180deg, rgba(64, 28, 40, 0.95), rgba(36, 16, 24, 0.95));
}
.lb-action.danger .lb-ico {
  color: #fff;
  background: linear-gradient(180deg, #ff8aa0, #ff4d6d);
  box-shadow: 0 0 16px rgba(255,77,109,.35);
}
.lb-action:active { transform: translateY(0) scale(.99); }

@media (max-width: 900px) {
  .media-lightbox { padding: 10px; }
  .media-lightbox-shell {
    width: 100%;
    height: calc(100vh - 16px);
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0,1fr) auto;
  }
  .media-lightbox-rail {
    flex-direction: row;
    align-items: stretch;
    overflow-x: auto;
    padding: 8px;
  }
  .lb-rail-spacer { display: none; }
  .lb-action {
    min-width: 88px;
    min-height: 64px;
    flex: 1 0 auto;
  }
  .media-lightbox-body { padding: 52px 10px 18px; }
  .media-lightbox:not(.is-video) .media-lightbox-body img {
    width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 1180px) {
  .generate-layout,
  .video-layout {
    grid-template-columns: 1fr;
  }
}


/* ===== In-stage generation animation + curtain reveal + fullscreen ===== */
.preview-stage {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
}
.preview-stage.is-empty,
.preview-stage.is-busy {
  place-items: center;
}
.preview-frame {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.preview-frame.fill {
  width: 100%;
  height: 100%;
}
.preview-frame .preview-media,
.preview-frame .mask-base,
.preview-stage .preview-media {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  display: block !important;
  border-radius: 8px;
  background: #000;
  opacity: 1;
  visibility: visible;
}
/* 生成/视频台舞台内预览强制可见 */
.gen-wrap,
.gen-wrap.has-media,
.mask-wrap.gen-wrap {
  display: grid !important;
  place-items: center;
  overflow: hidden;
}
.gen-wrap > .preview-stage,
.mask-wrap.gen-wrap > .preview-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.gen-wrap .preview-fs-btn,
.preview-stage .preview-fs-btn {
  position: absolute;
  right: 12px;
  top: 12px;
  z-index: 6;
}
.preview-fs-btn {
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 6;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.55);
  color: #e7f3ff;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  backdrop-filter: blur(8px);
}
.preview-fs-btn:hover {
  border-color: rgba(53,231,255,.5);
  color: #fff;
  background: rgba(8,18,30,.8);
}

/* curtain like blinds/curtains opening */
.curtain-layer {
  pointer-events: none;
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  z-index: 4;
  opacity: 0;
}
.curtain-layer i {
  display: block;
  height: 100%;
  background:
    linear-gradient(90deg, rgba(6,12,20,.96), rgba(10,20,34,.88)),
    repeating-linear-gradient(
      90deg,
      rgba(53,231,255,.08) 0 2px,
      transparent 2px 14px
    );
  transform: translateX(0);
  box-shadow: inset 0 0 30px rgba(53,231,255,.08);
}
.curtain-layer i:last-child {
  background:
    linear-gradient(270deg, rgba(6,12,20,.96), rgba(10,20,34,.88)),
    repeating-linear-gradient(
      90deg,
      rgba(53,231,255,.08) 0 2px,
      transparent 2px 14px
    );
}
.preview-stage.reveal-pending .curtain-layer,
.mask-wrap.reveal-pending .curtain-layer {
  opacity: 1;
}
.preview-stage.is-revealing .curtain-layer,
.mask-wrap.is-revealing .curtain-layer {
  opacity: 1;
}
.preview-stage.is-revealing .curtain-layer i:first-child,
.mask-wrap.is-revealing .curtain-layer i:first-child {
  animation: curtainLeft 1.15s cubic-bezier(.2,.8,.2,1) forwards;
}
.preview-stage.is-revealing .curtain-layer i:last-child,
.mask-wrap.is-revealing .curtain-layer i:last-child {
  animation: curtainRight 1.15s cubic-bezier(.2,.8,.2,1) forwards;
}
.preview-stage.is-revealing .preview-media,
.mask-wrap.is-revealing .preview-media {
  animation: mediaFadeIn 1.05s ease forwards;
}
@keyframes curtainLeft {
  0% { transform: translateX(0); filter: brightness(1); }
  100% { transform: translateX(-105%); filter: brightness(1.15); }
}
@keyframes curtainRight {
  0% { transform: translateX(0); filter: brightness(1); }
  100% { transform: translateX(105%); filter: brightness(1.15); }
}
@keyframes mediaFadeIn {
  0% { opacity: .15; transform: scale(1.02); filter: blur(6px); }
  55% { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: scale(1); filter: blur(0); }
}

/* busy animation inside stage */
.stage-busy {
  width: min(520px, calc(100% - 28px));
  display: grid;
  gap: 16px;
  justify-items: center;
  text-align: center;
  padding: 18px 16px;
}
.stage-busy-visual {
  position: relative;
  width: min(420px, 78vw);
  height: 220px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(53,231,255,.2);
  background:
    radial-gradient(circle at 50% 40%, rgba(53,231,255,.14), transparent 42%),
    linear-gradient(180deg, rgba(12,20,34,.9), rgba(6,10,18,.96));
  box-shadow: 0 0 40px rgba(53,231,255,.08);
}
.stage-orbit {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.stage-orbit span {
  position: absolute;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--cyan);
  border-right-color: rgba(77,163,255,.5);
  animation: spin 1s linear infinite;
}
.stage-orbit span:nth-child(2) {
  width: 58px;
  height: 58px;
  animation-duration: 1.35s;
  animation-direction: reverse;
  border-top-color: #8af7ff;
  border-right-color: transparent;
}
.stage-orbit i {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle, #9ffff4, rgba(53,231,255,.2));
  box-shadow: 0 0 20px rgba(53,231,255,.55);
}
.stage-scan {
  position: absolute;
  left: 8%;
  right: 8%;
  height: 2px;
  top: 20%;
  background: linear-gradient(90deg, transparent, rgba(53,231,255,.85), transparent);
  box-shadow: 0 0 18px rgba(53,231,255,.55);
  animation: scanY 2.1s ease-in-out infinite;
}
.stage-shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.08) 48%, transparent 66%);
  animation: shimmer 1.8s linear infinite;
}
@keyframes scanY {
  0% { top: 18%; opacity: .2; }
  50% { top: 72%; opacity: 1; }
  100% { top: 18%; opacity: .2; }
}
@keyframes shimmer {
  0% { transform: translateX(-60%); }
  100% { transform: translateX(60%); }
}
.stage-busy-copy strong {
  display: block;
  font-size: 16px;
  margin-bottom: 6px;
}
.stage-busy-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.stage-busy-meta {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  gap: 14px;
  color: var(--muted);
  font-size: 12px;
}
.stage-busy-bar {
  margin: 12px auto 0;
  width: min(280px, 70%);
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  overflow: hidden;
}
.stage-busy-bar i {
  display: block;
  height: 100%;
  width: 30%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--cyan), var(--blue), var(--cyan));
  background-size: 200% 100%;
  animation: progressflow 1.25s ease-in-out infinite;
}

/* ensure gen dock styles still exist as mini status */
.gen-progress-dock {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 70;
  width: min(420px, calc(100vw - 24px));
}
.gen-progress-dock.hidden { display: none !important; }
.gen-progress-dock.minimized .gen-progress-card {
  padding: 10px 12px;
}
.gen-progress-dock.minimized .gen-progress-line,
.gen-progress-dock.minimized .gen-loading-meta,
.gen-progress-dock.minimized .gen-progress-text p {
  display: none;
}
.gen-progress-card {
  border: 1px solid rgba(53,231,255,.28);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(14,24,40,.96), rgba(8,14,24,.98));
  box-shadow: 0 18px 40px rgba(0,0,0,.4);
  padding: 12px 12px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.gen-progress-left {
  display: flex;
  gap: 10px;
  align-items: center;
  min-width: 0;
}
.gen-mini-orbit {
  width: 34px;
  height: 34px;
  position: relative;
  flex: 0 0 auto;
}
.gen-mini-orbit span {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--cyan);
  animation: spin 1s linear infinite;
}
.gen-mini-orbit .core {
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background: rgba(53,231,255,.5);
  box-shadow: 0 0 12px rgba(53,231,255,.4);
}
.gen-progress-text {
  min-width: 0;
}
.gen-progress-text strong {
  display: block;
  font-size: 13px;
}
.gen-progress-text p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}
.gen-progress-line {
  margin-top: 8px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  overflow: hidden;
}
.gen-progress-line i {
  display: block;
  height: 100%;
  width: 28%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--cyan), var(--blue), var(--cyan));
  background-size: 200% 100%;
  animation: progressflow 1.2s ease-in-out infinite;
}
.gen-loading-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
  color: var(--muted);
  font-size: 11px;
}
.gen-progress-actions {
  display: flex;
  gap: 6px;
  flex: 0 0 auto;
}
.gen-progress-actions .btn {
  padding: 7px 8px;
  font-size: 12px;
}

.media-lightbox.is-fullscreen .media-lightbox-shell {
  width: min(1560px, calc(100vw - 16px));
  height: calc(100vh - 16px);
}
.media-lightbox.is-fullscreen .media-lightbox-body {
  padding-top: 52px;
}

/* edit base frame needs full area */
.mask-wrap .preview-frame.fill.base-frame {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.mask-wrap .preview-frame.fill.base-frame .mask-base {
  max-width: 100%;
  max-height: 100%;
}
.mask-wrap .preview-frame.fill.base-frame .mask-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

@keyframes spin { to { transform: rotate(360deg); } }

@keyframes progressflow {
  0% { width: 12%; background-position: 0% 50%; }
  50% { width: 72%; background-position: 100% 50%; }
  100% { width: 18%; background-position: 0% 50%; }
}


/* ===== Generate / Video unified with Edit studio ===== */
.generate-page.edit-page,
.video-page.edit-page,
.generate-page,
.video-page {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.generate-layout.edit-layout,
.video-layout.edit-layout {
  flex: 1;
  min-height: 0;
  height: 100%;
  grid-template-columns: minmax(0, 1.7fr) minmax(300px, .85fr);
}
.gen-wrap .preview-stage {
  width: 100%;
  height: 100%;
}
.gen-tools { justify-content: flex-start; }
.gen-tools .mono { margin-right: auto; }

.selected-refs-card {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px;
  background: rgba(255,255,255,.02);
}
.selected-refs-placeholder {
  width: 54px;
  height: 54px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 4px;
  background: rgba(255,255,255,.04);
  border: 1px dashed var(--line);
  color: var(--muted);
  font-size: 10px;
  line-height: 1.25;
  flex: 0 0 auto;
}
.selected-refs-thumbs { display: flex; gap: 6px; flex: 0 0 auto; }
.selected-ref-thumb {
  position: relative;
  width: 54px;
  height: 54px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #000;
}
.selected-ref-thumb img,
.selected-ref-thumb video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.selected-ref-thumb button {
  position: absolute; top: 3px; right: 3px;
  width: 18px; height: 18px; border: none; border-radius: 50%;
  background: rgba(0,0,0,.7); color: #fff; font-size: 12px; line-height: 18px; padding: 0;
}
.video-asset-tabs {
  display: flex; gap: 6px; padding: 0 8px 8px; flex: 0 0 auto;
}
.video-asset-tabs .chip { flex: 1; text-align: center; padding: 6px 4px; }
.edit-asset-rail .studio-asset-thumb video,
.edit-asset-rail .edit-thumb video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* Edit page: no right panel clutter, more canvas */
.app-shell.focus-edit.hide-right .edit-layout {
  grid-template-columns: minmax(0, 1.85fr) minmax(320px, .8fr);
}

.preview-stage:not(.reveal-pending):not(.is-revealing) .curtain-layer,
.mask-wrap:not(.reveal-pending):not(.is-revealing) .curtain-layer {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}


/* ===== Preview visibility fix for generate/video stages ===== */
.edit-main-stage {
  height: 100%;
  min-height: 0;
  display: flex !important;
  flex-direction: column !important;
}
.mask-wrap.gen-wrap,
.gen-wrap {
  position: relative !important;
  flex: 1 1 auto !important;
  min-height: 280px !important;
  width: 100% !important;
  display: block !important;
  overflow: hidden !important;
}
.mask-wrap.gen-wrap > .preview-stage,
.gen-wrap > .preview-stage {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: grid !important;
  place-items: center !important;
}
.mask-wrap.gen-wrap .preview-frame,
.gen-wrap .preview-frame {
  position: relative !important;
  width: min(100%, 100%) !important;
  height: min(100%, 100%) !important;
  max-width: 100% !important;
  max-height: 100% !important;
  display: grid !important;
  place-items: center !important;
}
.mask-wrap.gen-wrap .preview-media,
.gen-wrap .preview-media,
.preview-stage.has-media .preview-media {
  position: relative !important;
  z-index: 2 !important;
  width: auto !important;
  height: auto !important;
  max-width: calc(100% - 16px) !important;
  max-height: calc(100% - 16px) !important;
  object-fit: contain !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  background: #000;
}
.mask-wrap.gen-wrap .preview-fs-btn,
.gen-wrap .preview-fs-btn,
.preview-stage .preview-fs-btn {
  position: absolute !important;
  right: 12px !important;
  top: 12px !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 8 !important;
}
.preview-stage:not(.reveal-pending):not(.is-revealing) .curtain-layer,
.mask-wrap:not(.reveal-pending):not(.is-revealing) .curtain-layer {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  z-index: 1 !important;
}



/* ===== Compact asset rail: filter + scroll + kind badge ===== */
.compact-asset-rail,
.edit-asset-rail {
  width: 102px;
  min-width: 102px;
  max-width: 112px;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.edit-asset-rail-head {
  flex: 0 0 auto;
  padding: 8px 8px 4px;
}
.edit-asset-rail-head strong { font-size: 12px; }
.rail-filter-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
  padding: 0 6px 6px;
  flex: 0 0 auto;
}
.rail-filter-tabs.single { grid-template-columns: 1fr; }
.rail-tab {
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  color: var(--muted);
  border-radius: 8px;
  padding: 4px 2px;
  font-size: 10px;
  line-height: 1.2;
  text-align: center;
}
.rail-tab.active {
  color: #041018;
  font-weight: 800;
  border: none;
  background: linear-gradient(135deg, var(--cyan), var(--blue));
}
.rail-search-wrap {
  padding: 0 6px 6px;
  flex: 0 0 auto;
}
.rail-search {
  width: 100%;
  border: 1px solid var(--line);
  background: rgba(0,0,0,.28);
  border-radius: 8px;
  padding: 6px 6px;
  font-size: 11px;
  color: var(--text);
  outline: none;
}
.rail-search:focus {
  border-color: rgba(53,231,255,.55);
  box-shadow: 0 0 0 2px rgba(53,231,255,.12);
}
.edit-asset-rail-list {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 2px 8px 8px !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(53,231,255,.35) transparent;
}
.edit-asset-rail-list::-webkit-scrollbar { width: 6px; }
.edit-asset-rail-list::-webkit-scrollbar-thumb {
  background: rgba(53,231,255,.28);
  border-radius: 999px;
}
.edit-asset-rail-list::-webkit-scrollbar-track { background: transparent; }
.rail-scroll-hint {
  flex: 0 0 auto;
  text-align: center;
  font-size: 10px;
  padding: 0 4px 4px;
  opacity: .7;
}
.edit-asset-rail-actions {
  flex: 0 0 auto !important;
}
.edit-asset-rail-actions .btn {
  padding: 7px 4px !important;
  font-size: 11px !important;
}
.edit-thumb {
  width: 72px;
  height: 72px;
}
.edit-thumb .thumb-kind,
.thumb-kind {
  position: absolute;
  right: 4px;
  bottom: 4px;
  left: auto;
  top: auto;
  font-size: 10px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 999px;
  background: rgba(0,0,0,.72);
  color: #d7e7f8;
  border: 1px solid rgba(255,255,255,.1);
  z-index: 2;
}
.thumb-kind.video {
  color: #041018;
  background: rgba(53,231,255,.9);
  border-color: transparent;
}
.thumb-kind.image {
  color: #eaf6ff;
  background: rgba(77,163,255,.75);
}
.edit-stage-body {
  grid-template-columns: 102px minmax(0, 1fr) !important;
}

/* reduce asset rail flash */
.edit-asset-rail-list .edit-thumb img,
.edit-asset-rail-list .edit-thumb video {
  content-visibility: auto;
  contain: paint;
}
.edit-asset-rail,
.compact-asset-rail {
  contain: layout style;
}



/* ===== Generate / Video perfect match with Edit ===== */
.app-shell.focus-generate.hide-right .edit-layout,
.app-shell.focus-video.hide-right .edit-layout,
.app-shell.focus-edit.hide-right .edit-layout {
  grid-template-columns: minmax(0, 1.85fr) minmax(320px, .8fr);
}
.generate-page .edit-control-panel,
.video-page .edit-control-panel,
.edit-page .edit-control-panel {
  padding: 14px;
}
.generate-page .panel-note,
.video-page .panel-note {
  margin-bottom: 12px;
}
.generate-page .edit-stage-head,
.video-page .edit-stage-head,
.edit-page .edit-stage-head {
  min-height: 48px;
}
.generate-page .mask-tools,
.video-page .mask-tools {
  min-height: 52px;
}
.generate-page .canvas-empty h3,
.video-page .canvas-empty h3 {
  font-size: 18px;
}
.generate-page .dropzone,
.video-page .dropzone {
  min-height: 46px;
  display: grid;
  place-items: center;
}
.generate-page #genPresets,
.video-page #videoModes {
  margin-bottom: 12px;
}
.generate-page .actions .btn,
.video-page .actions .btn,
.edit-page .actions .btn {
  min-height: 40px;
}
/* keep stage beautiful when empty */
.gen-wrap.empty,
.mask-wrap.empty {
  display: grid !important;
  place-items: center;
}



/* ===== Multi-task dock ===== */
.gen-progress-dock.multi .gen-progress-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}
.gen-progress-dock.multi .gen-progress-left { width: 100%; }
.gen-progress-dock.multi .gen-progress-actions {
  width: 100%;
  justify-content: flex-end;
}
.mtask-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 190px;
  overflow: auto;
}
.mtask-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px 10px;
  background: rgba(255,255,255,.03);
  cursor: pointer;
}
.mtask-item:hover {
  border-color: rgba(53,231,255,.4);
  box-shadow: 0 0 14px rgba(53,231,255,.1);
}
.mtask-title {
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mtask-sub {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}
.gen-progress-dock.minimized .mtask-list { display: none; }

.panel-note.soft {
  border-color: rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  color: var(--muted);
  margin-top: -2px;
  margin-bottom: 12px;
}



/* ===== Showcase / Case gallery (home) ===== */
.showcase-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
  height: 100%;
}
.showcase-page.immersive {
  padding-bottom: 24px;
}
.showcase-hero {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-end;
  padding: 20px 22px;
  border: 1px solid rgba(120, 190, 255, .16);
  border-radius: 24px;
  background:
    radial-gradient(circle at 10% 0%, rgba(53,231,255,.18), transparent 34%),
    radial-gradient(circle at 90% 10%, rgba(124,92,255,.16), transparent 30%),
    linear-gradient(180deg, rgba(14,22,38,.98), rgba(8,12,20,.98));
  box-shadow: 0 18px 40px rgba(0,0,0,.22);
  flex: 0 0 auto;
}
.showcase-hero.slim {
  padding: 18px 20px;
}
.showcase-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(53,231,255,.3);
  color: #bff6ff;
  background: rgba(53,231,255,.08);
  font-size: 12px;
  margin-bottom: 8px;
}
.showcase-hero h2 {
  margin: 0;
  font-size: 28px;
  letter-spacing: .2px;
}
.showcase-hero p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
  max-width: 720px;
}
.showcase-hero-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.showcase-toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  flex: 0 0 auto;
}
.showcase-toolbar.sticky {
  position: sticky;
  top: 0;
  z-index: 5;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 16px;
  background: rgba(10,16,28,.88);
  backdrop-filter: blur(12px);
}
.showcase-toolbar .media-search {
  margin-left: auto;
  min-width: 220px;
  max-width: 320px;
}
.showcase-feed {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-height: 0;
}
.showcase-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.showcase-section-head h3 {
  margin: 0;
  font-size: 18px;
}
.showcase-section-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
}
.showcase-count {
  color: #9ec2e8;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}
.showcase-masonry,
.showcase-grid.neat {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.case-card {
  margin: 0;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255,255,255,.03);
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
}
.case-card:hover {
  transform: translateY(-3px);
  border-color: rgba(53,231,255,.42);
  box-shadow: 0 16px 34px rgba(0,0,0,.3), 0 0 24px rgba(53,231,255,.12);
}
.case-card:hover .case-cover-img {
  transform: scale(1.04);
  filter: brightness(1.06) saturate(1.05);
}
.case-card:hover .case-cover-shade {
  opacity: .42;
}
.case-cover {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: #101826;
  flex: 0 0 auto;
}
.case-card.case-video .case-cover {
  aspect-ratio: 16 / 10;
}
.case-cover-img,
.case-cover-fallback {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .28s ease, filter .28s ease;
}
.case-cover-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.02) 0%, rgba(0,0,0,.04) 42%, rgba(0,0,0,.46) 100%);
  opacity: .9;
  pointer-events: none;
  transition: opacity .2s ease;
  z-index: 1;
}
.case-cover-glow,
.case-cover-pattern { display: none; }
.case-badge,
.case-tag {
  position: absolute;
  z-index: 3;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
  backdrop-filter: blur(8px);
}
.case-badge {
  left: 10px;
  top: 10px;
  color: #041018;
  font-weight: 800;
  background: linear-gradient(135deg, var(--cyan), var(--blue));
}
.case-tag {
  right: 10px;
  top: 10px;
  color: #e7f3ff;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.1);
}
.case-play {
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(0,0,0,.36);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(8px);
  z-index: 3;
  font-size: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.28);
}
.case-cover-meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: 28px 12px 12px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.55));
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.case-cover-meta strong {
  font-size: 14px;
  color: #fff;
}
.case-cover-meta span {
  font-size: 11px;
  color: rgba(230,242,255,.82);
}
.case-body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(8,12,20,.88);
  flex: 1 1 auto;
}
.case-body p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  min-height: 34px;
  max-height: 34px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.case-actions {
  display: flex;
  gap: 8px;
}
.case-actions .btn {
  flex: 1;
  padding: 8px 8px;
  font-size: 12px;
}
.media-empty.soft {
  border: 1px dashed rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 24px;
  text-align: center;
  color: var(--muted);
  background: rgba(255,255,255,.02);
}
.media-empty.soft h3 { margin: 0; font-size: 14px; font-weight: 600; }
@media (max-width: 1280px) {
  .showcase-masonry,
  .showcase-grid.neat { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .showcase-hero {
    flex-direction: column;
    align-items: stretch;
  }
  .showcase-hero-actions { justify-content: flex-start; }
  .showcase-toolbar .media-search {
    margin-left: 0;
    width: 100%;
    max-width: none;
  }
  .showcase-masonry,
  .showcase-grid.neat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .showcase-masonry,
  .showcase-grid.neat { grid-template-columns: 1fr; }
}


/* completed generation: stop spinning animation immediately */
.gen-progress-dock.is-done .gen-mini-orbit span,
.gen-progress-dock.is-done .gen-progress-line i {
  animation: none !important;
}
.gen-progress-dock.is-done .gen-mini-orbit span {
  border-top-color: #3dff9a;
  transform: none;
}
.gen-progress-dock.is-done .gen-progress-line i {
  width: 100%;
  background: linear-gradient(90deg, #3dff9a, #35e7ff);
}
.gen-progress-dock.is-done .gen-progress-card {
  border-color: rgba(61,255,154,.35);
}


/* ===== Full image fit in edit/generate/video stages (no bottom crop) ===== */
.edit-main-stage {
  height: 100% !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
.edit-main-stage > .mask-wrap,
.edit-main-stage > .mask-wrap.mask,
.edit-main-stage > .mask-wrap.compare,
.edit-main-stage > .mask-wrap.busy,
.edit-main-stage > .mask-wrap.empty,
.edit-main-stage > .mask-wrap.gen-wrap {
  position: relative !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  width: 100% !important;
  height: auto !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px !important;
  box-sizing: border-box !important;
}
.edit-main-stage .mask-tools {
  flex: 0 0 auto !important;
}

/* base image frame: fill available area, center content */
.mask-wrap .preview-frame.fill.base-frame,
.mask-wrap.mask .preview-frame.base-frame {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

/* force whole image visible */
.mask-wrap .mask-base,
.mask-wrap .preview-frame .mask-base,
.mask-wrap .preview-frame .preview-media,
.mask-wrap .compare-pane img,
.mask-wrap .compare-pane .preview-media,
.preview-stage.has-media .preview-media,
.gen-wrap .preview-media,
.mask-wrap.gen-wrap .preview-media {
  position: relative !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block !important;
}

/* canvas overlays image area via JS; keep full wrap hit area but don't force image cover */
.mask-wrap.mask .mask-canvas {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 3 !important;
}
.mask-wrap.mask .preview-fs-btn {
  z-index: 5 !important;
}

/* compare panes also fully contain */
.compare-stage {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
}
.compare-pane {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}
.compare-pane img,
.compare-pane .preview-media {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

/* generate/video stage: same full-fit behavior */
.mask-wrap.gen-wrap,
.gen-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px !important;
  box-sizing: border-box !important;
}
.mask-wrap.gen-wrap > .preview-stage,
.gen-wrap > .preview-stage {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.mask-wrap.gen-wrap .preview-frame,
.gen-wrap .preview-frame,
.preview-stage .preview-frame {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}


/* assets page: always show large image thumbs */
.assets-page .media-library {
  overflow: hidden;
}
.assets-page .media-grid {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.assets-page .media-card {
  min-height: 240px;
}
.assets-page .media-thumb {
  min-height: 170px;
}
@media (max-width: 980px) {
  .media-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
  .media-thumb { min-height: 140px; }
}


/* ===== Privacy asset root modal ===== */
.asset-root-modal {
  width: min(560px, calc(100vw - 28px));
}
.privacy-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(61,255,154,.35);
  color: #9dffe0;
  background: rgba(61,255,154,.1);
  font-size: 12px;
  margin-bottom: 10px;
}
.asset-root-desc {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
  margin: 0 0 14px;
}
.asset-root-desc strong { color: #d7fff0; }
.asset-root-tips {
  border: 1px dashed rgba(53,231,255,.25);
  background: rgba(53,231,255,.05);
  border-radius: 12px;
  padding: 10px 12px;
  margin: 0 0 14px;
  line-height: 1.55;
}
#assetRootModal .actions { margin-top: 4px; }
#assetRootModal.show,
#settingsModal.show { z-index: 100; }
.topbar .asset-root-pill {
  border: 1px solid rgba(61,255,154,.28);
  color: #9dffe0;
  background: rgba(61,255,154,.08);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 12px;
  max-width: 280px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar .asset-root-pill.warn {
  border-color: rgba(255,209,90,.4);
  color: #ffe6a8;
  background: rgba(255,209,90,.08);
}


/* privacy first-run modal polish */
.asset-root-modal {
  max-width: 560px;
}
.asset-root-modal .asset-root-desc {
  line-height: 1.65;
  color: var(--muted, #9aa4b2);
  margin: 8px 0 14px;
}
.asset-root-modal .asset-root-tips {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 10px 12px;
  margin: 10px 0 12px;
}
#assetRootModal .actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
#assetRootModal.show {
  z-index: 9999;
}


.case-official {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: #dbeafe;
  background: rgba(15, 23, 42, 0.72);
  border: 1px solid rgba(147, 197, 253, 0.35);
  backdrop-filter: blur(8px);
}


/* force hide bottom-right gen dock: progress lives in stage only */
.gen-progress-dock,
#genLoadingMask {
  display: none !important;
  pointer-events: none !important;
}


/* multi-task detail list inside stage */
.stage-busy {
  width: min(620px, calc(100% - 24px));
}
.stage-task-list {
  margin-top: 12px;
  width: min(560px, 100%);
  display: grid;
  gap: 8px;
  text-align: left;
  max-height: 180px;
  overflow: auto;
  padding-right: 2px;
}
.stage-task-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(53,231,255,.16);
  background: rgba(8,14,24,.72);
}
.stage-task-main { min-width: 0; flex: 1; }
.stage-task-title {
  font-size: 12px;
  font-weight: 700;
  color: #e8f7ff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stage-task-idx {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  margin-right: 6px;
  color: #8af7ff;
  font-variant-numeric: tabular-nums;
}
.stage-task-sub {
  margin-top: 2px;
  font-size: 11px;
  color: var(--muted, #9aa4b2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stage-task-badge {
  flex: 0 0 auto;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid transparent;
}
.stage-task-badge.run {
  color: #9ffff4;
  background: rgba(53,231,255,.12);
  border-color: rgba(53,231,255,.25);
}
.stage-task-badge.ok {
  color: #b7f7c8;
  background: rgba(46,204,113,.12);
  border-color: rgba(46,204,113,.28);
}
.stage-task-badge.fail {
  color: #ffc0c0;
  background: rgba(255,90,90,.12);
  border-color: rgba(255,90,90,.28);
}


/* ===== V2 Canvas ===== */
.app-shell.focus-canvas .bottom-dock { display: none !important; }
.app-shell.focus-canvas .right-panel { display: none !important; }
.app-shell.focus-canvas .workspace {
  grid-column: 1 / -1;
  min-height: calc(100vh - 96px);
  height: calc(100vh - 96px);
  overflow: hidden;
}
.canvas-page {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
.canvas-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(18,28,42,.95), rgba(10,16,26,.92));
}
.canvas-toolbar-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.canvas-toolbar-left strong {
  font-size: 16px;
  color: #e8f4ff;
}
.canvas-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.canvas-toolbar-actions .skill-btn {
  color: #c4b5fd;
  border-color: rgba(139, 92, 246, .35);
  background: rgba(91, 53, 177, .13);
}
.canvas-toolbar-actions .skill-btn:hover {
  color: #ede9fe;
  border-color: rgba(167, 139, 250, .7);
  background: rgba(109, 72, 198, .24);
}
.canvas-stage-wrap {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 12px;
  overflow: hidden;
  align-items: stretch;
}
.canvas-stage {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background:
    radial-gradient(circle at 20% 20%, rgba(56,189,248,.08), transparent 28%),
    radial-gradient(circle at 80% 0%, rgba(99,102,241,.08), transparent 24%),
    #070d16;
  cursor: grab;
  min-height: 0;
  height: 100%;
  overscroll-behavior: none;
  touch-action: none;
}
.canvas-stage:active { cursor: grabbing; }
.canvas-world {
  position: absolute;
  inset: 0;
  transform-origin: 0 0;
  will-change: transform;
}
.canvas-grid {
  position: absolute;
  inset: -2000px;
  background-image:
    linear-gradient(rgba(148,163,184,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,163,184,.08) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}
.canvas-empty-hint {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  color: #8aa0b8;
  font-size: 14px;
  text-align: center;
  padding: 18px 22px;
  border: 1px dashed rgba(125, 211, 252, .28);
  border-radius: 16px;
  background: rgba(8, 16, 28, .55);
  pointer-events: none;
  width: min(420px, 80%);
}
.canvas-card {
  position: absolute;
  left: 0;
  top: 0;
  width: 240px;
  border-radius: 16px;
  border: 1px solid rgba(148,163,184,.18);
  background: linear-gradient(180deg, rgba(17,27,41,.98), rgba(10,16,26,.98));
  box-shadow: 0 12px 30px rgba(0,0,0,.28);
  overflow: hidden;
  user-select: none;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.canvas-card:hover {
  border-color: rgba(56,189,248,.35);
}
.canvas-card.active {
  border-color: rgba(56,189,248,.85);
  box-shadow: 0 0 0 1px rgba(56,189,248,.35), 0 16px 36px rgba(0,0,0,.35);
}
.canvas-card.status-running,
.canvas-card.status-queued {
  border-color: rgba(250,204,21,.55);
}
.canvas-card.status-failed {
  border-color: rgba(248,113,113,.7);
}
.canvas-card.status-succeeded {
  border-color: rgba(52,211,153,.45);
}
.canvas-card-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  font-size: 11px;
  color: #9fb4cb;
  border-bottom: 1px solid rgba(148,163,184,.1);
}
.canvas-card-type {
  color: #7dd3fc;
  font-weight: 700;
}
.canvas-card-status {
  color: #cbd5e1;
}
.canvas-card-media {
  height: 170px;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.28);
  overflow: hidden;
}
.canvas-card-media img,
.canvas-card-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.canvas-card-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #8aa0b8;
  font-size: 13px;
  text-align: center;
  padding: 12px;
}
.canvas-card-empty small {
  color: #64748b;
  font-size: 11px;
}
.canvas-card-busy {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #fde68a;
  font-size: 12px;
}
.canvas-spinner {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid rgba(253, 230, 138, .25);
  border-top-color: #fde68a;
  animation: canvas-spin 0.9s linear infinite;
}
@keyframes canvas-spin {
  to { transform: rotate(360deg); }
}
.canvas-card-foot {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.canvas-card-foot strong {
  font-size: 13px;
  color: #e2e8f0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.canvas-card-foot span {
  font-size: 11px;
  color: #8aa0b8;
  line-height: 1.35;
  min-height: 30px;
}
.canvas-inspector {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 0;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-right: 2px;
  scrollbar-width: thin;
  scrollbar-color: rgba(53,231,255,.35) transparent;
}
.canvas-inspector::-webkit-scrollbar { width: 6px; }
.canvas-inspector::-webkit-scrollbar-thumb {
  background: rgba(53,231,255,.28);
  border-radius: 999px;
}
.canvas-inspector .panel,
.canvas-inspector .cv-panel {
  margin: 0;
  height: auto;
}
.canvas-inspector textarea {
  min-height: 88px;
  resize: vertical;
}

/* compact inspector form */
.cv-panel {
  padding: 14px 14px 16px !important;
}
.cv-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.cv-head h3 {
  margin: 2px 0 0;
  font-size: 16px;
  color: #e8f4ff;
}
.cv-kicker {
  font-size: 11px;
  color: #7dd3fc;
  letter-spacing: .04em;
  font-weight: 700;
}
.cv-status {
  flex: 0 0 auto;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  border: 1px solid rgba(148,163,184,.25);
  color: #cbd5e1;
  background: rgba(15,23,42,.7);
}
.cv-status.running, .cv-status.queued { color: #fde68a; border-color: rgba(250,204,21,.4); }
.cv-status.succeeded { color: #6ee7b7; border-color: rgba(52,211,153,.4); }
.cv-status.failed { color: #fca5a5; border-color: rgba(248,113,113,.45); }
.cv-panel .field.compact { margin-bottom: 10px; }
.cv-panel .field.compact > label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 12px;
  color: #9fb4cb;
}
.cv-panel .field.compact input,
.cv-panel .field.compact select,
.cv-panel .field.compact textarea {
  width: 100%;
  border-radius: 12px;
  font-size: 13px;
}
.cv-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.cv-workflow-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cv-workflow-chips .chip {
  padding: 6px 10px;
  font-size: 12px;
  border-radius: 999px;
}
.cv-muted { color: #7f93aa; font-size: 12px; line-height: 1.45; }
.cv-inline-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.cv-primary-actions { margin-top: 8px; }
.cv-primary-actions .cv-run,
.cv-primary-actions .btn.primary {
  width: 100%;
  min-height: 42px;
  font-weight: 700;
}
.cv-secondary-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.cv-secondary-actions .btn.mini,
.btn.mini {
  padding: 8px 6px;
  font-size: 12px;
  border-radius: 10px;
  min-height: 34px;
}
.btn.danger-lite {
  border-color: rgba(248,113,113,.35);
  color: #fecaca;
}
.selected-refs-card.compact {
  padding: 8px;
  min-height: 64px;
}
.selected-refs-card.compact .selected-refs-thumbs {
  gap: 6px;
}
.cv-error {
  margin-top: 10px;
  color: #ff8f8f;
  font-size: 12px;
  line-height: 1.4;
}
.cv-jobs {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(148,163,184,.12);
}
.cv-jobs-title {
  font-size: 12px;
  color: #9fb4cb;
  margin-bottom: 6px;
  font-weight: 700;
}
.cv-jobs-list {
  font-size: 12px;
  color: #b6c7da;
  line-height: 1.5;
}
.cv-jobs-list span { color: #7dd3fc; }

@media (max-width: 1100px) {
  .canvas-stage-wrap {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(360px, 1fr) minmax(280px, 42vh);
  }
  .canvas-stage {
    min-height: 360px;
  }
  .canvas-inspector {
    max-height: 42vh;
  }
  .cv-secondary-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.canvas-stage.drag-over {
  outline: 2px dashed rgba(56,189,248,.7);
  outline-offset: -8px;
  box-shadow: inset 0 0 0 9999px rgba(56,189,248,.05);
}


/* cross project jumps - HIGH CONTRAST, separate from cyan/blue canvas */
.cross-nav-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cross-jump,
.cross-jump-top {
  text-align: center;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-weight: 900;
  letter-spacing: .02em;
  border-radius: 14px;
  border: 2px solid transparent;
  padding: 12px 14px;
  line-height: 1.1;
  box-shadow: 0 10px 22px rgba(0,0,0,.28);
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}
.cross-jump:hover,
.cross-jump-top:hover {
  transform: translateY(-1px) scale(1.02);
  filter: brightness(1.05);
}
/* portal = amber gold */
.cross-jump.cross-portal {
  color: #1a1200 !important;
  background: linear-gradient(135deg, #ffd84a 0%, #ffb300 55%, #ff8a00 100%) !important;
  border-color: #ffe89a !important;
  box-shadow:
    0 0 0 2px rgba(255, 196, 0, .28),
    0 10px 22px rgba(255, 160, 0, .35) !important;
}
/* go write novel = hot magenta/pink - opposite of cyan canvas */
.cross-jump.cross-switch,
.cross-jump.primary,
.cross-jump-top {
  color: #fff7fb !important;
  background: linear-gradient(135deg, #ff3d9a 0%, #ff2d6f 48%, #ff6a3d 100%) !important;
  border-color: #ffb3d4 !important;
  box-shadow:
    0 0 0 2px rgba(255, 61, 154, .30),
    0 12px 24px rgba(255, 45, 111, .38) !important;
  animation: crossPulse 1.8s ease-in-out infinite;
}
.cross-jump-top {
  border-radius: 999px;
  padding: 10px 14px;
  min-height: 38px;
  font-size: 13px;
}
@keyframes crossPulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(255,61,154,.30), 0 12px 24px rgba(255,45,111,.38); }
  50% { box-shadow: 0 0 0 4px rgba(255,61,154,.18), 0 14px 28px rgba(255,45,111,.48); }
}
a.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
/* keep settings ghost button ordinary so jump buttons stand out */
.sidebar-foot .ghost-btn:not(.cross-jump) {
  opacity: .92;
}


/* ===== Canvas card full image view ===== */
.canvas-card-media { position: relative; }
.canvas-card-media img,
.canvas-card-media video { cursor: zoom-in; }
.canvas-view-full {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 3;
  border: 0;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  line-height: 1.2;
  color: #fff;
  background: rgba(8, 12, 22, 0.72);
  backdrop-filter: blur(6px);
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
}
.canvas-view-full:hover { background: rgba(20, 28, 48, 0.9); }
.canvas-card-media:hover .canvas-view-full { transform: translateY(-1px); }

.case-cover-img{width:100%;height:100%;object-fit:cover;display:block;}


/* Showcase facade covers */
.case-cover {
  position: relative;
  overflow: hidden;
  background: #111827;
  aspect-ratio: 3 / 4;
  min-height: 220px;
}
.case-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background:
    radial-gradient(circle at 50% 40%, rgba(255,255,255,.08), transparent 55%),
    linear-gradient(135deg, #1f2937, #0b1220);
}
.case-cover-fallback {
  width: 100%;
  height: 100%;
  min-height: 220px;
  background: linear-gradient(135deg, #1f2937, #0b1220);
}
.case-card.case-video .case-cover { aspect-ratio: 16 / 9; min-height: 160px; }



/* showcase thumb visibility */
.case-cover-img {
  background: #1f2937;
  min-height: 100%;
}
.case-cover-fallback[hidden] { display: none !important; }
.showcase-grid.neat .case-card { background: #0f172a; }

/* Adobe Vector-only controls: isolated from image/edit/video components. */
.vector-page .field-hint {
  margin-left: 6px;
  color: #7f93aa;
  font-size: 11px;
  font-weight: 500;
}
.vector-reference-box {
  width: 100%;
  min-height: 82px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  color: #d8e4f0;
  text-align: left;
  border: 1px dashed rgba(125, 211, 252, .38);
  border-radius: 12px;
  background: rgba(15, 23, 42, .62);
  cursor: pointer;
}
.vector-reference-box:hover {
  border-color: rgba(56, 189, 248, .8);
  background: rgba(14, 116, 144, .12);
}
.vector-reference-box.has-reference {
  cursor: default;
  border-style: solid;
}
.vector-reference-box img {
  width: 62px;
  height: 62px;
  flex: 0 0 62px;
  object-fit: cover;
  border-radius: 9px;
  background: #0b1220;
}
.vector-reference-plus {
  width: 52px;
  height: 52px;
  display: grid;
  flex: 0 0 52px;
  place-items: center;
  border-radius: 10px;
  color: #7dd3fc;
  font-size: 28px;
  background: rgba(14, 165, 233, .12);
}
.vector-reference-box small,
.vector-reference-meta span {
  display: block;
  margin-top: 4px;
  color: #8fa3b8;
  font-size: 11px;
  line-height: 1.35;
}
.vector-reference-meta {
  min-width: 0;
  flex: 1;
}
.vector-reference-meta strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vector-reference-box .btn {
  flex: 0 0 auto;
}
.vector-style-grid,
.vector-tone-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.vector-style-card {
  min-width: 0;
  padding: 5px;
  color: #b9c9da;
  font: inherit;
  font-size: 11px;
  line-height: 1.25;
  text-align: left;
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 10px;
  background: rgba(15, 23, 42, .56);
  cursor: pointer;
  transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.vector-style-card:hover {
  transform: translateY(-1px);
  border-color: rgba(125, 211, 252, .55);
}
.vector-style-card.active {
  color: #f0f9ff;
  border-color: #38bdf8;
  box-shadow: 0 0 0 2px rgba(56, 189, 248, .18);
  background: rgba(14, 116, 144, .18);
}
.vector-style-card > span:last-child {
  display: block;
  padding: 5px 2px 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vector-style-thumb {
  width: 100%;
  display: block;
  aspect-ratio: 1;
  border-radius: 7px;
  background-repeat: no-repeat;
  background-size: 400% 300%;
  background-position: calc(var(--sprite-x) * 33.333333%) calc(var(--sprite-y) * 50%);
  background-color: #111827;
}
.vector-style-thumb.effect {
  background-image: url("https://clio-assets.adobe.com/clio-playground/vector-styles/v0/groups/effects.jpg");
}
.vector-style-thumb.color {
  background-image: url("https://clio-assets.adobe.com/clio-playground/vector-styles/v0/groups/colors_1.jpg");
}
.vector-auto-tone {
  display: grid;
  place-items: center;
  color: #dbeafe;
  font-weight: 800;
  background:
    radial-gradient(circle at 25% 25%, rgba(244, 114, 182, .72), transparent 35%),
    radial-gradient(circle at 75% 30%, rgba(56, 189, 248, .76), transparent 36%),
    radial-gradient(circle at 50% 78%, rgba(250, 204, 21, .62), transparent 38%),
    #1e293b;
}
@media (max-width: 720px) {
  .vector-style-grid,
  .vector-tone-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}