:root {
  --bg: #050914;
  --bg-2: #0b2a62;
  --panel: rgba(13, 28, 52, 0.74);
  --panel-solid: #0f1b31;
  --ink: #f7fbff;
  --muted: #9fb4d2;
  --line: rgba(92, 166, 255, 0.28);
  --soft-line: rgba(150, 196, 255, 0.12);
  --accent: #2f9bff;
  --accent-ink: #f7fbff;
  --blue: #62b7ff;
  --danger: #ff6174;
  --ok: #58d4ff;
  --shadow: 0 34px 110px rgba(0, 0, 0, 0.42);
  --radius: 18px;
  --control-radius: 12px;
  font-family:
    ui-sans-serif,
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Display",
    "Segoe UI",
    sans-serif;
}

* {
  box-sizing: border-box;
  scrollbar-width: none;
}

*::-webkit-scrollbar {
  display: none;
}

body {
  margin: 0;
  min-height: 100dvh;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 16%, rgba(30, 112, 255, 0.34), transparent 34rem),
    linear-gradient(90deg, #05070d 0%, #09224f 44%, #050914 100%);
  color: var(--ink);
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image:
    radial-gradient(circle, rgba(139, 179, 242, 0.22) 1px, transparent 1.4px),
    linear-gradient(rgba(86, 126, 205, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(86, 126, 205, 0.055) 1px, transparent 1px);
  background-position:
    0 0,
    0 0,
    0 0;
  background-size:
    14px 14px,
    70px 70px,
    70px 70px;
  mask-image: radial-gradient(circle at 50% 14%, black, rgba(0, 0, 0, 0.72) 34rem, transparent 78rem);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.76), transparent 24%, transparent 76%, rgba(0, 0, 0, 0.76)),
    linear-gradient(180deg, rgba(3, 6, 10, 0.24), transparent 16rem, rgba(3, 6, 10, 0.66)),
    radial-gradient(circle at 50% 42%, transparent 0, transparent 34rem, rgba(0, 0, 0, 0.48) 67rem);
  pointer-events: none;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  border: 1px solid transparent;
  min-height: 36px;
  padding: 0 15px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: var(--ink);
  cursor: pointer;
  transition:
    transform 120ms ease,
    box-shadow 120ms ease,
    border-color 120ms ease,
    background 120ms ease;
  white-space: nowrap;
  box-shadow: inset 0 0 0 1px var(--soft-line);
}

button:hover {
  background: rgba(255, 255, 255, 0.12);
  box-shadow:
    inset 0 0 0 1px rgba(155, 191, 255, 0.28),
    0 12px 34px rgba(0, 0, 0, 0.22);
}

button:active {
  transform: translateY(1px);
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
  transform: none;
  box-shadow: inset 0 0 0 1px var(--soft-line);
}

button.primary {
  background: var(--accent);
  border-color: rgba(190, 224, 255, 0.58);
  color: var(--accent-ink);
  font-weight: 680;
  box-shadow: 0 14px 36px rgba(47, 155, 255, 0.24);
}

button.danger {
  background: rgba(255, 97, 116, 0.1);
  border-color: rgba(255, 97, 116, 0.3);
  color: #ff8b99;
}

button.ghost {
  background: rgba(255, 255, 255, 0.07);
}

button.small {
  min-height: 28px;
  padding: 0 10px;
  font-size: 12px;
}

input,
textarea,
select {
  width: 100%;
  border: 1px solid transparent;
  border-radius: var(--control-radius);
  background: rgba(255, 255, 255, 0.065);
  color: var(--ink);
  outline: none;
  box-shadow: inset 0 0 0 1px var(--soft-line);
}

input::placeholder,
textarea::placeholder {
  color: rgba(181, 196, 219, 0.52);
}

input,
select {
  height: 38px;
  padding: 0 11px;
}

select {
  color-scheme: dark;
}

textarea {
  resize: none;
  padding: 13px;
  line-height: 1.56;
}

input:focus,
textarea:focus,
select:focus {
  border-color: rgba(98, 183, 255, 0.76);
  box-shadow:
    inset 0 0 0 1px rgba(98, 183, 255, 0.58),
    0 0 0 4px rgba(47, 155, 255, 0.16);
}

label {
  display: grid;
  gap: 7px;
}

label span {
  color: var(--muted);
  font-size: 12px;
}

#app {
  width: 100vw;
  min-height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
}

.project-home,
.studio-shell {
  width: 100%;
  min-height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
}

.project-home {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  padding: 30px clamp(24px, 4vw, 56px) 38px;
}

.project-home-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-width: 0;
  width: min(1180px, 100%);
  justify-self: center;
  padding: 16px 20px;
  margin-bottom: 24px;
}

.project-home-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
  flex: 1 1 760px;
  align-self: center;
}

.project-home-actions .auth-user-label,
.project-home-actions .ghost,
.project-home-actions .primary {
  font-family: "SF Pro Text", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: 0;
  text-rendering: geometricPrecision;
}

.project-home-actions .auth-user-label {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 4px;
  color: rgba(198, 212, 233, 0.78);
  white-space: nowrap;
}

.project-home-actions .ghost,
.project-home-actions .primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 18px;
  border-radius: 12px;
  white-space: nowrap;
  overflow: visible;
}

.project-home-actions .ghost {
  color: rgba(235, 244, 255, 0.9);
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(145, 190, 255, 0.2);
}

.project-home-actions .primary {
  color: #031324;
  font-weight: 760;
}

.project-home-main {
  min-height: 0;
  width: min(1180px, 100%);
  justify-self: center;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
}

.project-home-card {
  min-height: 0;
  overflow: auto;
  padding: clamp(18px, 2.4vw, 28px);
  border: 1px solid rgba(139, 179, 242, 0.12);
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
    rgba(7, 13, 24, 0.62);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 32px 100px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(26px) saturate(1.25);
}

.canvas-entry-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  min-height: 132px;
  overflow: visible;
}

.blank-canvas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}
.blank-canvas-new {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  aspect-ratio: 16 / 10;
  border-radius: 14px;
  border: 1px dashed rgba(148, 184, 232, 0.3);
  background: rgba(255, 255, 255, 0.02);
  color: rgba(185, 198, 220, 0.82);
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease, transform 120ms ease;
}
.blank-canvas-new:hover {
  border-color: rgba(47, 155, 255, 0.6);
  background: rgba(22, 135, 255, 0.08);
  transform: translateY(-2px);
}
.blank-canvas-new-plus {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(148, 184, 232, 0.35);
  font-size: 24px;
  line-height: 1;
  color: #eaf2ff;
}
.blank-canvas-new-label {
  font-size: 13px;
}
.blank-canvas-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.blank-canvas-cover {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(148, 184, 232, 0.14);
  background: linear-gradient(180deg, rgba(16, 31, 51, 0.7), rgba(3, 8, 15, 0.9));
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: border-color 120ms ease, transform 120ms ease;
}
.blank-canvas-cover:hover {
  border-color: rgba(47, 155, 255, 0.5);
  transform: translateY(-2px);
}
.blank-canvas-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.blank-canvas-cover-empty {
  color: rgba(185, 198, 220, 0.5);
  font-size: 12px;
}
.blank-canvas-del {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 0;
  background: rgba(6, 10, 16, 0.7);
  color: rgba(255, 180, 180, 0.95);
  cursor: pointer;
  opacity: 0;
  transition: opacity 120ms ease, background 120ms ease;
  backdrop-filter: blur(4px);
}
.blank-canvas-cover:hover .blank-canvas-del,
.blank-canvas-del:focus-visible {
  opacity: 1;
}
.blank-canvas-del:hover {
  background: rgba(120, 20, 20, 0.85);
}
.blank-canvas-caption {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 2px;
}
.blank-canvas-caption strong {
  color: #eaf2ff;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: text;
}
.blank-canvas-caption span {
  color: rgba(185, 198, 220, 0.55);
  font-size: 12px;
}
.blank-canvas-rename-input {
  width: 100%;
  padding: 4px 6px;
  border-radius: 6px;
  border: 1px solid rgba(47, 155, 255, 0.6);
  background: rgba(2, 7, 14, 0.8);
  color: #eaf2ff;
  font-size: 14px;
}

.canvas-entry-card h2 {
  margin: 0;
  color: #f5f9ff;
  font-size: clamp(24px, 2.5vw, 34px);
  line-height: 1.08;
}

.canvas-entry-card p {
  margin: 8px 0 0;
  color: rgba(185, 198, 220, 0.72);
  font-size: 13px;
}

.studio-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 2px 2px 0;
}

.brand strong,
.brand span {
  display: block;
}

.brand strong {
  font-size: 15px;
  font-weight: 720;
}

.brand span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}

.mark {
  display: grid;
  place-items: center;
  width: 96px;
  height: 36px;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(9, 14, 35, 0.88);
  border: 1px solid rgba(137, 147, 255, 0.5);
  box-shadow: 0 16px 42px rgba(77, 161, 255, 0.22);
}

.pixel-toys-wordmark {
  position: relative;
  background-image: url("/pixel-toys-logo.png?v=202607040215");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.pixel-toys-wordmark::before {
  content: "";
  position: absolute;
  left: 71.5%;
  top: 7.8%;
  width: 9.2%;
  height: 15%;
  transform: translate(-50%, -50%) rotateY(0deg);
  transform-style: preserve-3d;
  border-radius: 999px;
  background:
    linear-gradient(90deg, #ff3346 0 42%, transparent 42% 58%, #ff3346 58% 100%);
  box-shadow: 0 0 10px rgba(255, 51, 70, 0.34);
  pointer-events: none;
  animation: pixelToysCopterSpin 0.58s linear infinite;
}

.pixel-toys-wordmark::after {
  content: "";
  position: absolute;
  left: 71.5%;
  top: 14.4%;
  width: 1.1%;
  height: 15.5%;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #ff3346;
  box-shadow: 0 0 8px rgba(255, 51, 70, 0.28);
  pointer-events: none;
}

@keyframes pixelToysCopterSpin {
  from {
    transform: translate(-50%, -50%) rotateY(0deg);
  }

  to {
    transform: translate(-50%, -50%) rotateY(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pixel-toys-wordmark::before {
    animation: none;
  }
}

/* Film Studio: project-level visual direction, kept separate from production
   assets so a style choice never masquerades as a character or scene asset. */
.modern-main:not([data-modern-view="filmstudio"]) .modern-film-studio-panel { display: none; }
.modern-main[data-modern-view="filmstudio"] .modern-source-panel,
.modern-main[data-modern-view="filmstudio"] .modern-kit-bar,
.modern-main[data-modern-view="filmstudio"] .modern-asset-image-panel,
.modern-main[data-modern-view="filmstudio"] .modern-storyboard-studio,
.modern-main[data-modern-view="filmstudio"] .modern-sequence,
.modern-main[data-modern-view="filmstudio"] .modern-workbench,
.modern-main[data-modern-view="filmstudio"] .modern-cut-panel { display: none; }
.modern-film-studio-panel { display: grid; gap: 16px; min-width: 0; padding: 20px 26px 30px; }
.modern-film-studio-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: end; padding-bottom: 17px; border-bottom: 1px solid var(--mv-line); }
.modern-film-studio-head h2 { margin: 7px 0 0; color: var(--mv-tx); font-size: clamp(21px, 2vw, 28px); font-weight: 540; letter-spacing: 0; }
.modern-film-studio-head p { max-width: 760px; margin: 9px 0 0; color: var(--mv-qt); font-size: 11px; line-height: 1.6; }
.modern-film-studio-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.modern-film-studio-actions button { min-height: 37px; padding: 0 13px; border: 1px solid var(--mv-line-2); border-radius: 5px; background: var(--mv-s2); color: var(--mv-mut); font-size: 11px; cursor: pointer; transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease; }
.modern-film-studio-actions button:hover:not(:disabled) { border-color: rgba(255,255,255,.3); background: var(--mv-s3); color: var(--mv-tx); }
.modern-film-studio-actions button.is-primary { border-color: var(--modern-signal); background: var(--modern-signal); color: #fff; box-shadow: 0 8px 22px -13px rgba(217,45,69,.9); }
.modern-film-studio-actions button.is-primary:hover:not(:disabled) { filter: brightness(1.08); }
.modern-film-studio-actions button:disabled { cursor: not-allowed; opacity: .42; }
.modern-film-studio-toggle { position: relative; display: inline-grid; grid-template-columns: minmax(94px, auto) 38px; align-items: center; gap: 9px; min-height: 37px; padding: 0 9px 0 11px; border: 1px solid var(--mv-line-2); border-radius: 5px; background: var(--mv-s2); color: var(--mv-mut); cursor: pointer; transition: background 180ms ease, border-color 180ms ease, color 180ms ease; }
.modern-film-studio-toggle:hover:not([aria-disabled="true"]) { border-color: rgba(255,255,255,.3); background: var(--mv-s3); color: var(--mv-tx); }
.modern-film-studio-toggle.is-enabled { border-color: rgba(217,45,69,.7); background: rgba(217,45,69,.09); color: var(--mv-tx); }
.modern-film-studio-toggle[aria-disabled="true"] { cursor: not-allowed; opacity: .48; }
.modern-film-studio-toggle-copy { display: grid; gap: 1px; line-height: 1.05; }
.modern-film-studio-toggle-copy strong { color: currentColor; font-size: 10px; font-weight: 560; }
.modern-film-studio-toggle-copy small { color: var(--mv-qt); font-size: 8.5px; }
.modern-film-studio-toggle input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.modern-film-studio-toggle-track { display: flex; align-items: center; width: 38px; height: 21px; padding: 2px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; background: rgba(0,0,0,.34); transition: background 180ms ease, border-color 180ms ease; }
.modern-film-studio-toggle-track span { width: 15px; height: 15px; border-radius: 50%; background: var(--mv-qt); box-shadow: 0 2px 5px rgba(0,0,0,.32); transition: transform 180ms cubic-bezier(.2,.8,.2,1), background 180ms ease; }
.modern-film-studio-toggle input:checked + .modern-film-studio-toggle-track { border-color: rgba(217,45,69,.78); background: var(--modern-signal); }
.modern-film-studio-toggle input:checked + .modern-film-studio-toggle-track span { transform: translateX(17px); background: #fff; }
.modern-film-studio-toggle input:focus-visible + .modern-film-studio-toggle-track { outline: 2px solid rgba(255,255,255,.78); outline-offset: 3px; }
.modern-film-studio-statusbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-height: 27px; color: var(--mv-qt); font-family: var(--mono); font-size: 9.5px; }
#modernFilmStudioStatus.is-busy { color: #e4ad64; }
#modernFilmStudioStatus.is-error { color: #f0a49a; }
.modern-film-studio-signals { display: inline-flex; flex-wrap: wrap; gap: 5px; }
.modern-film-studio-signals span, .modern-film-studio-selection { padding: 4px 7px; border: 1px solid var(--mv-line); border-radius: 4px; background: rgba(255,255,255,.025); color: var(--mv-mut); }
.modern-film-studio-selection { margin-left: auto; color: var(--mv-tx); }
.modern-film-studio-candidates { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; min-width: 0; }
.modern-film-studio-card { position: relative; min-width: 0; overflow: hidden; border: 1px solid var(--mv-line); border-radius: 6px; background: var(--mv-s1); box-shadow: var(--mv-hi); transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease; }
.modern-film-studio-card:hover { border-color: var(--mv-line-2); transform: translateY(-1px); }
.modern-film-studio-card.is-selected { border-color: rgba(217,45,69,.8); background: rgba(217,45,69,.07); box-shadow: 0 0 0 2px rgba(217,45,69,.16), var(--mv-hi); }
.modern-film-studio-card-select { position: absolute; z-index: 2; top: 9px; right: 9px; display: inline-flex; align-items: center; gap: 5px; min-height: 25px; padding: 0 8px 0 5px; border: 1px solid rgba(255,255,255,.2); border-radius: 4px; background: rgba(11,11,15,.78); color: var(--mv-mut); font-size: 9px; cursor: pointer; }
.modern-film-studio-card-select:hover, .modern-film-studio-card.is-selected .modern-film-studio-card-select { border-color: rgba(217,45,69,.72); color: #fff; }
.modern-film-studio-card-select:disabled { cursor: not-allowed; opacity: .58; }
.modern-film-studio-check { display: grid; place-items: center; width: 15px; height: 15px; border: 1px solid currentColor; border-radius: 3px; font-size: 10px; line-height: 1; }
.modern-film-studio-card.is-selected .modern-film-studio-check { background: var(--modern-signal); border-color: var(--modern-signal); }
.modern-film-studio-image { display: grid; place-items: center; aspect-ratio: 16 / 9; overflow: hidden; background: #11141b; color: var(--mv-qt); font-family: var(--mono); font-size: 9px; }
.modern-film-studio-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.modern-film-studio-card-body { display: grid; gap: 8px; padding: 11px 12px 12px; }
.modern-film-studio-card-title { display: grid; gap: 3px; min-width: 0; }
.modern-film-studio-card-title strong { color: var(--mv-tx); font-size: 12px; font-weight: 560; }
.modern-film-studio-card-title small { overflow: hidden; color: var(--mv-qt); font-family: var(--mono); font-size: 8.5px; text-overflow: ellipsis; white-space: nowrap; }
.modern-film-studio-card-body p { min-height: 31px; margin: 0; color: var(--mv-mut); font-size: 10px; line-height: 1.5; }
.modern-film-studio-palette { display: flex; flex-wrap: wrap; gap: 5px; }
.modern-film-studio-palette span { padding: 3px 6px; border: 1px solid var(--mv-line); border-radius: 3px; color: var(--mv-qt); font-size: 9px; }
.modern-film-studio-empty { display: grid; gap: 7px; place-items: center; min-height: 240px; padding: 24px; border: 1px dashed var(--mv-line-2); border-radius: 6px; color: var(--mv-qt); text-align: center; }
.modern-film-studio-empty strong { color: var(--mv-mut); font-size: 13px; font-weight: 500; }
.modern-film-studio-empty span { max-width: 420px; font-size: 10.5px; line-height: 1.5; }
.modern-film-studio-directive-wrap { display: grid; gap: 7px; padding-top: 14px; border-top: 1px solid var(--mv-line); }
.modern-film-studio-directive-wrap p { max-width: 920px; margin: 0; color: var(--mv-mut); font-size: 11px; line-height: 1.65; }
@media (max-width: 760px) {
  .modern-film-studio-panel { padding: 16px; }
  .modern-film-studio-head { grid-template-columns: 1fr; gap: 14px; }
  .modern-film-studio-actions { justify-content: flex-start; }
  .modern-film-studio-selection { margin-left: 0; }
}

.project-home-header .brand {
  flex: 0 1 190px;
  padding: 0;
}

.project-home-header .brand .mark {
  width: clamp(150px, 12vw, 190px);
  height: auto;
  aspect-ratio: 960 / 165;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
  overflow: visible;
}

.project-home-header .brand .pixel-toys-wordmark {
  background-color: transparent;
  background-size: contain;
}

.project-list {
  padding: 0;
  border-bottom: 0;
}

.project-list.project-home-card {
  padding: clamp(22px, 2.6vw, 34px);
}

.project-list {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.project-index-head {
  margin-bottom: 24px;
  padding: 0 2px 6px;
}

.section-label {
  display: block;
  margin-bottom: 8px;
  color: rgba(185, 198, 220, 0.62);
  font-size: 11px;
  font-weight: 680;
  letter-spacing: 0;
}

.project-index-head h2 {
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.02;
  letter-spacing: 0;
}

.project-index-head p {
  margin-top: 10px;
  color: rgba(185, 198, 220, 0.72);
  font-size: 14px;
}

.auth-dialog {
  width: min(760px, calc(100vw - 32px));
  max-height: min(720px, calc(100dvh - 32px));
  overflow: hidden;
  border: 1px solid rgba(150, 196, 255, 0.24);
  border-radius: 22px;
  padding: 0;
  background: transparent;
  color: var(--ink);
  box-shadow:
    0 34px 120px rgba(0, 0, 0, 0.54),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.auth-dialog::backdrop {
  background: rgba(2, 7, 16, 0.72);
  backdrop-filter: blur(16px) saturate(1.1);
}

.auth-dialog-shell {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(330px, 1fr);
  min-height: 480px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.025)),
    rgba(7, 15, 29, 0.94);
}

.auth-dialog-intro {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  padding: 30px;
  border-right: 1px solid rgba(150, 196, 255, 0.14);
  background:
    radial-gradient(circle at 18% 20%, rgba(47, 155, 255, 0.25), transparent 15rem),
    linear-gradient(150deg, rgba(18, 49, 96, 0.7), rgba(5, 12, 24, 0.2) 72%);
}

.auth-dialog-intro::after {
  position: absolute;
  right: -90px;
  bottom: -100px;
  width: 240px;
  height: 240px;
  border: 1px solid rgba(98, 183, 255, 0.24);
  border-radius: 50%;
  content: "";
  box-shadow: 0 0 0 22px rgba(98, 183, 255, 0.04), 0 0 0 44px rgba(98, 183, 255, 0.025);
}

.auth-dialog-brand,
.auth-dialog-signal {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: rgba(235, 244, 255, 0.86);
  font-size: 11px;
  font-weight: 760;
  letter-spacing: 0.08em;
}

.auth-dialog-brand-mark {
  display: block;
  width: 26px;
  height: 26px;
}

.auth-dialog-intro-copy {
  position: relative;
  z-index: 1;
  margin: auto 0;
  padding: 44px 0;
}

.auth-dialog-kicker,
.auth-dialog-signal-label {
  color: var(--blue);
  font-size: 10px;
  font-weight: 760;
  letter-spacing: 0.12em;
}

.auth-dialog-intro-copy h2 {
  max-width: 8ch;
  margin: 14px 0 0;
  font-size: 32px;
  font-weight: 720;
  line-height: 1.04;
}

.auth-dialog-intro-copy h2 em {
  color: var(--blue);
  font-style: normal;
}

.auth-dialog-intro-copy p {
  max-width: 24ch;
  margin: 18px 0 0;
  color: rgba(198, 212, 233, 0.76);
  font-size: 13px;
  line-height: 1.6;
}

.auth-dialog-signal {
  justify-content: flex-start;
  color: rgba(198, 212, 233, 0.66);
}

.auth-signal-line {
  width: 42px;
  height: 1px;
  background: var(--blue);
  box-shadow: 18px 0 18px rgba(98, 183, 255, 0.42);
}

.auth-signal-dot {
  width: 6px;
  height: 6px;
  margin-left: -4px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 14px rgba(98, 183, 255, 0.8);
}

.auth-dialog-panel {
  display: grid;
  align-content: center;
  gap: 18px;
  min-width: 0;
  padding: 32px clamp(24px, 4vw, 48px);
}

.auth-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.auth-dialog-head h2 {
  margin: 5px 0 0;
  font-size: 22px;
  line-height: 1.1;
}

.auth-dialog-close {
  position: relative;
  flex: 0 0 34px;
  width: 34px;
  min-height: 34px;
  padding: 0;
  border-color: rgba(150, 196, 255, 0.18);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  color: transparent;
}

.auth-dialog-close::before,
.auth-dialog-close::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 13px;
  height: 1px;
  background: currentColor;
  content: "";
  transform: translate(-50%, -50%) rotate(45deg);
}

.auth-dialog-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.auth-dialog-close:hover,
.auth-dialog-close:focus-visible {
  color: var(--ink);
  border-color: rgba(98, 183, 255, 0.5);
  background: rgba(98, 183, 255, 0.12);
}

.auth-modal-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px;
  padding: 3px;
  border: 1px solid rgba(150, 196, 255, 0.16);
  border-radius: 12px;
  background: rgba(4, 10, 20, 0.46);
}

.auth-modal-tabs button {
  min-height: 36px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: rgba(198, 212, 233, 0.66);
  font-size: 13px;
  font-weight: 680;
  box-shadow: none;
}

.auth-modal-tabs button:hover,
.auth-modal-tabs button:focus-visible {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.07);
  box-shadow: none;
}

.auth-modal-tabs button.is-active {
  background: rgba(98, 183, 255, 0.16);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(98, 183, 255, 0.34);
}

.auth-modal-form {
  display: grid;
  gap: 13px;
}

.auth-modal-form label {
  display: grid;
  gap: 7px;
}

.auth-modal-form label > span {
  color: rgba(216, 229, 249, 0.76);
  font-size: 12px;
}

.auth-modal-form input {
  height: 44px;
  border-color: rgba(150, 196, 255, 0.16);
  border-radius: 11px;
  padding: 0 13px;
  background: rgba(4, 10, 20, 0.55);
}

.auth-modal-code-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 9px;
}

.auth-modal-code-button {
  min-height: 44px;
  border-color: rgba(98, 183, 255, 0.3);
  background: rgba(98, 183, 255, 0.1);
  color: var(--blue);
  font-size: 12px;
  font-weight: 680;
}

.auth-modal-code-button:hover,
.auth-modal-code-button:focus-visible {
  border-color: rgba(98, 183, 255, 0.6);
  background: rgba(98, 183, 255, 0.17);
}

.auth-modal-message {
  min-height: 18px;
  margin: 0;
  color: rgba(198, 212, 233, 0.72);
  font-size: 12px;
  line-height: 1.45;
}

.auth-modal-submit {
  min-height: 46px;
  border-radius: 12px;
}

@media (max-width: 680px) {
  .auth-dialog {
    width: min(100vw - 20px, 480px);
    max-height: calc(100dvh - 20px);
    border-radius: 18px;
  }

  .auth-dialog-shell {
    display: block;
    min-height: 0;
    max-height: calc(100dvh - 20px);
    overflow: auto;
  }

  .auth-dialog-intro {
    min-height: 164px;
    padding: 22px 22px 20px;
    border-right: 0;
    border-bottom: 1px solid rgba(150, 196, 255, 0.14);
  }

  .auth-dialog-intro-copy {
    margin: 24px 0 0;
    padding: 0;
  }

  .auth-dialog-intro-copy h2 {
    max-width: none;
    margin-top: 9px;
    font-size: 25px;
  }

  .auth-dialog-intro-copy p,
  .auth-dialog-signal {
    display: none;
  }

  .auth-dialog-intro::after {
    right: -70px;
    bottom: -170px;
  }

  .auth-dialog-panel {
    padding: 23px 22px 25px;
  }
}

.project-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 50% 8%, rgba(91, 167, 255, 0.18), transparent 28rem),
    rgba(2, 5, 10, 0.66);
  backdrop-filter: blur(24px) saturate(1.2);
}

.project-modal-card {
  width: min(720px, 100%);
  max-height: min(860px, calc(100dvh - 48px));
  overflow: auto;
  padding: 20px;
  border: 1px solid rgba(139, 179, 242, 0.18);
  border-radius: 26px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.028)),
    rgba(7, 13, 24, 0.88);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 36px 110px rgba(0, 0, 0, 0.48);
}

.stack {
  display: grid;
  gap: 13px;
}

.two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}

.section-head.compact {
  align-items: center;
}

.section-head h2 {
  margin: 0;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 700;
}

.section-head p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
  word-break: break-all;
}

.section-head .path-line {
  display: none;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.upload-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

#scriptUpload,
#workflowScriptUpload,
#assetDescriptionUpload,
#assetUploadFile,
#assetStyleReferenceFile,
#storyboardUploadFile {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.upload-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 13px;
  border-radius: 999px;
  color: #dfe9ff;
  font-size: 12px;
  white-space: nowrap;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(145, 184, 255, 0.22);
  transition:
    background 120ms ease,
    box-shadow 120ms ease,
    transform 120ms ease;
}

.upload-pill:hover {
  background: rgba(255, 255, 255, 0.13);
  box-shadow:
    inset 0 0 0 1px rgba(47, 155, 255, 0.38),
    0 10px 30px rgba(0, 0, 0, 0.2);
}

.upload-pill:active {
  transform: translateY(1px);
}

#scriptUploadName,
#workflowScriptUploadName,
#assetUploadName,
#assetStyleReferenceName,
#storyboardUploadName {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 12px;
}

.script-upload-row {
  max-width: min(300px, 100%);
}

.script-upload-row > span {
  max-width: 132px;
}

.project-create-status {
  min-height: 18px;
  margin: -2px 0 0;
  color: rgba(199, 218, 244, 0.78);
  font-size: 12px;
  line-height: 1.4;
}

.project-create-status:empty {
  display: none;
}

.project-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.series-preflight-result {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(145, 184, 255, 0.22);
  border-radius: 8px;
  background: rgba(8, 13, 25, 0.44);
}

.series-preflight-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.series-preflight-head strong {
  color: #edf4ff;
}

.series-preflight-head span,
.series-preflight-result p {
  margin: 0;
  color: rgba(199, 218, 244, 0.72);
  font-size: 12px;
}

.series-preflight-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.series-preflight-grid section {
  min-width: 0;
  padding: 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
}

.series-preflight-grid h3 {
  margin: 0 0 7px;
  color: rgba(223, 233, 255, 0.82);
  font-size: 12px;
}

.series-preflight-grid ul {
  display: grid;
  gap: 5px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.series-preflight-grid li {
  overflow: hidden;
  color: rgba(237, 244, 255, 0.9);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.asset-upload-form {
  display: grid;
  grid-template-columns: minmax(190px, 0.85fr) minmax(240px, 1.2fr) auto;
  align-items: end;
  gap: 10px;
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid rgba(139, 179, 242, 0.13);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.038), rgba(255, 255, 255, 0.015)),
    rgba(4, 11, 22, 0.58);
}

.asset-upload-form label {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
}

.asset-upload-fields {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.asset-upload-fields input {
  width: 100%;
  min-height: 38px;
}

.asset-upload-form select {
  width: 100%;
  min-height: 38px;
  border-radius: 999px;
  background: rgba(2, 8, 17, 0.74);
  color: var(--text);
  font-size: 12px;
  text-overflow: ellipsis;
}

.asset-file-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 38px;
  padding: 3px;
  border: 1px solid rgba(139, 179, 242, 0.1);
  border-radius: 999px;
  background: rgba(2, 8, 17, 0.38);
}

.asset-upload-hint {
  grid-column: 1 / 3;
  min-width: 0;
  margin: -4px 0 0;
  color: rgba(185, 199, 220, 0.68);
  font-size: 11px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.asset-upload-form #assetUploadButton,
.asset-upload-form #storyboardUploadButton {
  grid-column: 3;
  min-width: 104px;
  min-height: 38px;
  padding: 0 16px;
  justify-self: end;
  white-space: nowrap;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.22),
    0 12px 30px rgba(47, 155, 255, 0.14);
}

.asset-style-console {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(150px, 0.58fr) minmax(220px, 1fr);
  gap: 10px;
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid rgba(139, 179, 242, 0.13);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.014)),
    rgba(4, 11, 22, 0.72);
}

.asset-style-console label {
  min-width: 0;
}

.asset-style-console span {
  color: var(--muted);
  font-size: 11px;
}

.asset-style-console select,
.asset-style-console input {
  border-radius: 8px;
  background: rgba(2, 8, 17, 0.74);
}

.style-preview {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-height: 26px;
  color: #aebcd3;
  font-size: 11px;
  line-height: 1.35;
}

.style-preview strong {
  color: #eef5ff;
  font-size: 11px;
  font-weight: 620;
  overflow-wrap: anywhere;
}

.style-reference-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.style-reference-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid rgba(139, 179, 242, 0.14);
  border-radius: 999px;
  background: rgba(2, 8, 17, 0.46);
  color: #dfe9ff;
  font-size: 12px;
  white-space: nowrap;
}

.style-reference-toggle input {
  width: 14px;
  height: 14px;
  margin: 0;
}

.style-reference-toggle input:disabled + span {
  color: var(--muted);
}

.style-chip {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(91, 167, 255, 0.11);
  color: #d9eaff;
  box-shadow: inset 0 0 0 1px rgba(91, 167, 255, 0.18);
}

.asset-file-row #assetUploadName {
  display: block;
  max-width: 100%;
}

.segmented {
  display: inline-grid;
  grid-auto-flow: column;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.075);
  box-shadow: inset 0 0 0 1px var(--soft-line);
}

.dialogue-skip-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 12px;
  color: var(--muted, rgba(255, 255, 255, 0.66));
  user-select: none;
}

.dialogue-skip-toggle input {
  width: 14px;
  height: 14px;
  accent-color: var(--accent, #6ea8fe);
  cursor: pointer;
}

.segmented label {
  display: block;
  cursor: pointer;
}

.segmented input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.segmented span {
  display: grid;
  place-items: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
  transition:
    background 120ms ease,
    color 120ms ease,
    box-shadow 120ms ease;
}

.segmented input:checked + span {
  background: rgba(255, 255, 255, 0.92);
  color: #07101e;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18);
}

.quality-pill {
  position: relative;
  grid-template-columns: auto 88px;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 0 6px 0 17px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 12px 34px rgba(47, 155, 255, 0.18);
}

.quality-pill span {
  color: var(--accent-ink);
  font-weight: 680;
}

.quality-pill select {
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(247, 251, 255, 0.16);
  background: rgba(247, 251, 255, 0.1);
  color: var(--accent-ink);
  box-shadow: inset 0 0 0 1px rgba(247, 251, 255, 0.08);
  font-weight: 680;
}

.asset-range-pill {
  box-shadow: 0 12px 34px rgba(91, 167, 255, 0.14);
}

.analyzer-segmented span {
  min-width: 128px;
}

.projects {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  align-content: start;
  gap: 18px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 2px 2px 12px;
  scroll-snap-type: none;
  scrollbar-width: none;
  min-height: 0;
}

.projects::-webkit-scrollbar {
  display: none;
}

.empty-projects {
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 220px;
  border: 1px dashed rgba(139, 179, 242, 0.2);
  border-radius: 20px;
  color: var(--muted);
  text-align: center;
  background: rgba(255, 255, 255, 0.025);
}

.empty-projects strong {
  color: var(--ink);
  font-size: 16px;
}

.project-card {
  position: relative;
  width: 100%;
  text-align: left;
  display: grid;
  align-content: space-between;
  gap: 34px;
  padding: 28px;
  min-height: 230px;
  border-radius: 26px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.072), rgba(255, 255, 255, 0.022)),
    rgba(8, 15, 27, 0.72);
  box-shadow:
    inset 0 0 0 1px rgba(139, 179, 242, 0.105),
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 18px 54px rgba(0, 0, 0, 0.2);
}

.project-card:hover {
  transform: translateY(-2px);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.094), rgba(255, 255, 255, 0.03)),
    rgba(9, 18, 34, 0.82);
}

.project-card:focus-visible {
  outline: 0;
  box-shadow:
    inset 0 0 0 1px rgba(47, 155, 255, 0.45),
    0 0 0 4px rgba(47, 155, 255, 0.12),
    0 18px 46px rgba(0, 0, 0, 0.26);
}

.project-card.active {
  background:
    radial-gradient(circle at 84% 0%, rgba(47, 155, 255, 0.08), transparent 15rem),
    linear-gradient(135deg, rgba(37, 67, 122, 0.72), rgba(13, 28, 54, 0.82));
  border-color: transparent;
  box-shadow:
    inset 0 0 0 1px rgba(47, 155, 255, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 24px 70px rgba(0, 0, 0, 0.3);
}

.project-card strong {
  overflow-wrap: anywhere;
  color: #f5f9ff;
  font-size: clamp(19px, 1.65vw, 25px);
  line-height: 1.26;
  font-weight: 760;
}

.project-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.project-card-title {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.project-card-title span {
  color: rgba(185, 198, 220, 0.62);
  font-size: 13px;
}

.project-delete {
  min-height: 32px;
  padding: 0 12px;
  flex: 0 0 auto;
  border-color: rgba(255, 97, 116, 0.16);
  background: rgba(255, 97, 116, 0.075);
  color: #ffacb6;
  font-size: 12px;
  box-shadow: inset 0 0 0 1px rgba(255, 97, 116, 0.1);
  opacity: 0;
  transform: translateY(-3px);
}

.project-card:hover .project-delete,
.project-card:focus-within .project-delete {
  opacity: 1;
  transform: translateY(0);
}

.project-delete:hover {
  background: rgba(255, 97, 116, 0.16);
  box-shadow:
    inset 0 0 0 1px rgba(255, 97, 116, 0.32),
    0 12px 34px rgba(255, 97, 116, 0.12);
}

.project-meta,
.status-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.075);
  color: #b9c6dc;
  font-size: 12px;
  box-shadow: inset 0 0 0 1px var(--soft-line);
}

.pill.ok {
  background: rgba(47, 155, 255, 0.1);
  color: var(--ok);
}

.pill.active {
  background: rgba(91, 167, 255, 0.13);
  color: #cfe5ff;
  box-shadow:
    inset 0 0 0 1px rgba(91, 167, 255, 0.32),
    0 0 18px rgba(91, 167, 255, 0.18);
}

.pill.warn {
  background: rgba(255, 97, 116, 0.12);
  color: var(--danger);
}

.muted {
  color: var(--muted);
  font-size: 12px;
}

.main {
  min-width: 0;
  min-height: 0;
  padding: 24px 0 0;
  overflow: scroll;
  scrollbar-width: none;
}

.main::-webkit-scrollbar {
  display: none;
}

.topbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  max-width: none;
  margin: 0;
  padding: 0 28px 18px;
}

.topbar > div:first-child {
  flex: 0 1 420px;
  min-width: 220px;
}

.topbar-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  justify-items: end;
  gap: 10px;
  flex: 1 1 720px;
  min-width: 0;
}

.workspace-controls {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 4px;
  border: 1px solid rgba(139, 179, 242, 0.13);
  border-radius: 999px;
  background: rgba(7, 14, 25, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 18px 48px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(22px) saturate(1.2);
}

.workspace-controls span {
  min-width: 46px;
  color: #dfe9ff;
  font-size: 12px;
  text-align: center;
}

.workspace-controls button {
  min-width: 30px;
}

.kicker {
  margin: 0 0 9px;
  color: #93a8c5;
  font-size: 11px;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  max-width: 1180px;
  font-size: clamp(28px, 2.3vw, 42px);
  line-height: 1.01;
  letter-spacing: -0.02em;
  font-weight: 780;
  text-shadow: 0 0 34px rgba(77, 161, 255, 0.12);
}

.workspace-viewport {
  width: 100%;
  height: calc(100dvh - 110px);
  overflow: auto;
  padding: 0 28px 80px;
  scrollbar-width: auto;
}

.workspace-viewport::-webkit-scrollbar {
  display: initial;
  width: 10px;
  height: 10px;
}

.workspace-viewport::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(139, 179, 242, 0.24);
}

.workspace {
  position: relative;
  width: 2200px;
  height: 1700px;
  max-width: none;
  margin: 0;
  transform: scale(var(--workspace-scale, 0.9));
  transform-origin: top left;
  display: block;
  border: 0;
  border-top: 1px solid rgba(139, 179, 242, 0.08);
  border-radius: 28px;
  background:
    radial-gradient(circle at 18px 18px, rgba(139, 179, 242, 0.08) 1px, transparent 1.4px),
    radial-gradient(circle at 50% 0%, rgba(32, 88, 180, 0.16), transparent 36rem),
    rgba(3, 8, 17, 0.18);
  background-size:
    24px 24px,
    auto,
    auto;
  overflow: visible;
  padding: 0;
  isolation: isolate;
}

.panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  min-width: 0;
  border: 1px solid rgba(139, 179, 242, 0.14);
  border-radius: 20px;
  background: var(--panel);
  backdrop-filter: blur(26px) saturate(1.3);
  padding: 15px;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}

.draggable-window {
  container-type: inline-size;
  position: absolute;
  z-index: 1;
  width: 520px;
  min-width: 0;
  min-height: 260px;
  max-width: none;
  resize: none;
  overflow: hidden;
  outline: 1px solid transparent;
  transition:
    outline-color 160ms ease,
    box-shadow 160ms ease;
}

.window-resize-handle {
  content: "";
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 8;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  cursor: nwse-resize;
  touch-action: none;
  background:
    linear-gradient(135deg, transparent 0 42%, rgba(210, 229, 255, 0.16) 42% 47%, transparent 47%),
    rgba(255, 255, 255, 0.035);
  box-shadow: inset 0 0 0 1px rgba(210, 229, 255, 0.12);
  opacity: 0.72;
  transition:
    opacity 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}

.window-resize-handle::after {
  content: "";
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 16px;
  height: 16px;
  border-right: 2px solid rgba(210, 229, 255, 0.42);
  border-bottom: 2px solid rgba(210, 229, 255, 0.42);
  border-radius: 0 0 5px;
  opacity: 1;
  pointer-events: none;
}

.draggable-window:hover .window-resize-handle,
.draggable-window:focus-within .window-resize-handle,
.draggable-window.resizing .window-resize-handle {
  opacity: 1;
  background:
    linear-gradient(135deg, transparent 0 42%, rgba(47, 155, 255, 0.32) 42% 47%, transparent 47%),
    rgba(47, 155, 255, 0.08);
  box-shadow:
    inset 0 0 0 1px rgba(47, 155, 255, 0.28),
    0 12px 30px rgba(0, 0, 0, 0.18);
}

.draggable-window:hover,
.draggable-window:focus-within {
  outline-color: rgba(180, 206, 255, 0.12);
}

.draggable-window.dragging,
.draggable-window.resizing {
  z-index: 9;
  user-select: none;
  transform: translateY(-1px);
  box-shadow:
    0 34px 110px rgba(0, 0, 0, 0.52),
    0 0 0 1px rgba(47, 155, 255, 0.2);
}

.draggable-window .section-head {
  flex: 0 0 auto;
  position: relative;
  z-index: 2;
  padding: 2px 2px 10px 2px;
  border-bottom: 1px solid rgba(139, 179, 242, 0.08);
  cursor: grab;
}

.draggable-window.dragging .section-head {
  cursor: grabbing;
}

.draggable-window textarea,
.draggable-window input,
.draggable-window select,
.draggable-window button,
.draggable-window a,
.draggable-window label,
.draggable-window .gallery,
.draggable-window .relation-canvas,
.draggable-window .segment-progress,
.draggable-window .asset-upload-form,
.draggable-window .storyboard-upload-form {
  cursor: auto;
}

.video-workflow {
  overflow: hidden;
  border-radius: 20px;
}

.panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), transparent 30%),
    radial-gradient(circle at 12% 0%, rgba(85, 154, 255, 0.11), transparent 18rem),
    radial-gradient(circle at 100% 8%, rgba(47, 155, 255, 0.035), transparent 17rem);
}

.flow-main,
.script-panel,
.storyboard-panel,
.asset-manifest-panel,
.asset-preview-panel,
.relation-panel,
.storyboard-grid-panel,
.seedance-panel,
.video-workflow {
  min-width: 0;
}

.video-workflow > .panel {
  width: 100%;
  height: 100%;
}

.rough-panel {
  grid-area: rough;
}

.editor {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  border-color: transparent;
  background: rgba(2, 7, 14, 0.66);
  color: #eaf2ff;
  caret-color: var(--accent);
  font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 12px;
  position: relative;
  z-index: 1;
}

.asset-preview-panel .gallery,
.asset-manifest-overview,
.relation-canvas,
.seedance-panel .editor,
.segment-progress,
.video-grid.rough,
.log {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

.asset-preview-panel .gallery,
.storyboard-grid-panel .gallery {
  align-content: start;
  padding: 2px 2px 12px;
}

.editor.tall {
  min-height: 0;
}

#assetGallery > .asset-card {
  align-self: start;
  height: max-content;
  min-height: max-content;
}

.compact-editor {
  min-height: 0;
}

.raw-data-store {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  margin: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  resize: none;
}

.config-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}

.config-row.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.video-settings {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 10px 0 14px;
}

.video-settings label {
  min-width: 0;
}

.video-settings span {
  color: var(--muted);
  font-size: 11px;
}

.video-settings select {
  margin-top: 6px;
  border-radius: 999px;
  background: rgba(2, 8, 17, 0.74);
}

.video-dialect-controls {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  margin-top: 6px;
}

.video-dialect-setting {
  min-width: 0;
}

.video-setting-label {
  display: block;
}

.video-setting-toggle {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  min-height: 30px;
  padding: 0 9px 0 44px;
  border: 1px solid rgba(146, 164, 190, .24);
  border-radius: 9px;
  background: rgba(255, 255, 255, .045);
  color: var(--muted);
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms ease;
}

.video-setting-toggle::before,
.modern-dialect-toggle::before {
  position: absolute;
  top: 50%;
  left: 8px;
  width: 28px;
  height: 16px;
  border: 1px solid rgba(146, 164, 190, .36);
  border-radius: 999px;
  background: rgba(5, 10, 18, .74);
  content: "";
  pointer-events: none;
  transform: translateY(-50%);
}

.video-setting-toggle::after,
.modern-dialect-toggle::after {
  position: absolute;
  top: 50%;
  left: 10px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(190, 202, 220, .72);
  content: "";
  pointer-events: none;
  transform: translateY(-50%);
  transition: transform 160ms ease, background 160ms ease;
}

.video-setting-toggle:hover {
  border-color: rgba(168, 194, 228, .46);
  background: rgba(255, 255, 255, .075);
  color: var(--text);
}

.video-setting-toggle:active {
  transform: scale(.97);
}

.video-setting-toggle input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.video-setting-toggle:has(input:checked)::before,
.modern-dialect-toggle:has(input:checked)::before {
  border-color: rgba(207, 83, 100, .74);
  background: rgba(207, 83, 100, .68);
}

.video-setting-toggle:has(input:checked)::after,
.modern-dialect-toggle:has(input:checked)::after {
  background: #fff;
  transform: translate(12px, -50%);
}

.video-setting-toggle:has(input:focus-visible),
.modern-dialect-toggle:has(input:focus-visible) {
  outline: 2px solid rgba(207, 83, 100, .8);
  outline-offset: 2px;
}

.video-setting-toggle input:disabled {
  cursor: not-allowed;
  opacity: .55;
}

.video-setting-toggle:has(input:checked) {
  border-color: rgba(207, 83, 100, .64);
  background: rgba(207, 83, 100, .14);
  color: #f4bec7;
}

.video-setting-toggle:has(input:checked) > span {
  color: #f4bec7;
}

.video-style-select {
  position: relative;
  display: block;
  flex: 1 1 auto;
  min-width: 0;
}

.video-style-select::after,
.modern-style-select::after {
  position: absolute;
  top: 50%;
  right: 11px;
  width: 6px;
  height: 6px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  color: var(--muted);
  content: "";
  pointer-events: none;
  transform: translateY(-65%) rotate(45deg);
}

.video-dialect-controls select {
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: 30px;
  margin-top: 0;
  padding: 0 29px 0 10px;
  border: 1px solid rgba(146, 164, 190, .24);
  border-radius: 9px;
  background: rgba(255, 255, 255, .035);
  color: var(--text);
  font-size: 11px;
  cursor: pointer;
  appearance: none;
}

.video-dialect-controls select:hover:not(:disabled) {
  border-color: rgba(168, 194, 228, .46);
  background: rgba(255, 255, 255, .07);
}

.video-dialect-controls select:focus-visible {
  border-color: rgba(207, 83, 100, .8);
  box-shadow: 0 0 0 2px rgba(207, 83, 100, .16);
  outline: 0;
}

.video-dialect-controls select:disabled {
  background: rgba(255, 255, 255, .018);
  color: rgba(170, 183, 205, .46);
}

.video-style-select:has(select:disabled)::after,
.modern-style-select:has(select:disabled)::after {
  color: rgba(170, 183, 205, .34);
}

.config-store {
  display: none;
}

.advanced-video-actions {
  position: relative;
  z-index: 1;
  margin-top: 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.035);
  box-shadow: inset 0 0 0 1px rgba(139, 179, 242, 0.08);
}

.advanced-video-actions summary {
  cursor: pointer;
  padding: 11px 12px;
  color: var(--muted);
  font-size: 12px;
}

.advanced-video-actions .actions {
  padding: 0 12px 12px;
}

.asset-manifest-overview {
  display: grid;
  gap: 10px;
  margin-bottom: 10px;
  overflow: visible;
}

.asset-manifest-panel .section-head {
  gap: 14px;
}

.asset-manifest-panel .section-head .actions {
  gap: 8px;
}

.asset-manifest-panel .section-head .actions button {
  min-height: 32px;
  padding: 0 13px;
  border-radius: 999px;
  border-color: rgba(210, 229, 255, 0.15);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.095), rgba(255, 255, 255, 0.032)),
    rgba(6, 13, 25, 0.72);
  color: #e9f1ff;
  font-size: 12px;
  font-weight: 620;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 10px 26px rgba(0, 0, 0, 0.16);
}

.asset-manifest-panel .section-head .actions button:hover {
  border-color: rgba(188, 213, 255, 0.26);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.05)),
    rgba(8, 17, 31, 0.86);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.13),
    0 14px 34px rgba(0, 0, 0, 0.22);
}

.asset-manifest-panel .section-head .actions button.primary {
  border-color: rgba(47, 155, 255, 0.24);
  background:
    linear-gradient(180deg, rgba(47, 155, 255, 0.15), rgba(47, 155, 255, 0.055)),
    rgba(7, 18, 17, 0.82);
  color: #eaf5ff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.11),
    0 12px 30px rgba(52, 120, 81, 0.16);
}

.asset-manifest-panel .section-head .actions button.primary:hover {
  border-color: rgba(47, 155, 255, 0.36);
  background:
    linear-gradient(180deg, rgba(47, 155, 255, 0.2), rgba(47, 155, 255, 0.075)),
    rgba(7, 20, 18, 0.9);
}

.asset-manifest-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: flex-start;
  gap: 8px;
}

.asset-manifest-summary .pill {
  flex: 0 0 auto;
  height: 26px;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.052);
  color: #bac8df;
  font-size: 11px;
  line-height: 1;
  box-shadow: inset 0 0 0 1px rgba(136, 171, 230, 0.1);
}

.asset-manifest-summary .pill.ok {
  background: rgba(47, 155, 255, 0.08);
  color: #d9ecff;
  box-shadow: inset 0 0 0 1px rgba(47, 155, 255, 0.16);
}

.asset-manifest-summary .pill.warn {
  background: rgba(255, 202, 97, 0.08);
  color: #ffe0a3;
  box-shadow: inset 0 0 0 1px rgba(255, 202, 97, 0.16);
}

.asset-manifest-running {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(88, 168, 255, 0.24);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(88, 168, 255, 0.12), rgba(88, 168, 255, 0.04)),
    rgba(4, 12, 25, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 16px 34px rgba(18, 101, 214, 0.12);
}

.asset-manifest-running strong {
  display: block;
  color: #d9ebff;
  font-size: 13px;
}

.asset-manifest-running p {
  margin: 3px 0 0;
  color: rgba(199, 218, 244, 0.72);
  font-size: 12px;
  line-height: 1.45;
}

.running-dot {
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: #3f9eff;
  box-shadow: 0 0 0 0 rgba(88, 168, 255, 0.42);
  animation: statusBeacon 1.15s ease-out infinite;
}

.asset-coverage-added {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  padding: 9px 10px;
  border: 1px solid rgba(47, 155, 255, 0.16);
  border-radius: 16px;
  background: rgba(47, 155, 255, 0.055);
}

.asset-coverage-added strong {
  color: rgba(232, 244, 255, 0.9);
  font-size: 12px;
  letter-spacing: 0;
}

.asset-manifest-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.manifest-group {
  min-width: 0;
  padding: 9px;
  border: 1px solid rgba(136, 171, 230, 0.1);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.046), rgba(255, 255, 255, 0.018)),
    rgba(5, 12, 24, 0.46);
}

.manifest-group h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 10px;
  color: #f5f9ff;
  font-size: 12px;
  letter-spacing: 0;
}

.manifest-add-btn {
  display: inline-grid;
  place-items: center;
  position: relative;
  width: 26px;
  height: 26px;
  min-height: 26px;
  padding: 0;
  border: 1px solid rgba(210, 229, 255, 0.16);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.035)),
    rgba(7, 15, 29, 0.72);
  color: transparent;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 10px 24px rgba(0, 0, 0, 0.2);
  transition:
    background 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease,
    transform 140ms ease;
}

.manifest-add-btn::before,
.manifest-add-btn::after {
  content: "";
  position: absolute;
  width: 11px;
  height: 1.5px;
  border-radius: 999px;
  background: #d8e6ff;
}

.manifest-add-btn::after {
  transform: rotate(90deg);
}

.manifest-add-btn:hover {
  border-color: rgba(47, 155, 255, 0.42);
  background:
    linear-gradient(180deg, rgba(47, 155, 255, 0.16), rgba(91, 167, 255, 0.08)),
    rgba(7, 15, 29, 0.82);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 0 0 3px rgba(47, 155, 255, 0.055),
    0 14px 30px rgba(0, 0, 0, 0.25);
}

.manifest-add-btn:active {
  transform: translateY(1px);
}

.manifest-add-btn:focus-visible {
  outline: none;
  border-color: rgba(47, 155, 255, 0.52);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 0 0 3px rgba(47, 155, 255, 0.12);
}

.manifest-name-list {
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
  gap: 6px;
  min-height: 34px;
  padding: 4px;
  margin: -4px;
  border: 1px dashed transparent;
  border-radius: 10px;
  transition:
    border-color 140ms ease,
    background 140ms ease,
    box-shadow 140ms ease;
}

.manifest-name-list[data-manifest-drop-type] {
  cursor: default;
}

.manifest-name[data-manifest-asset-id] {
  cursor: grab;
}

.manifest-name[data-manifest-asset-id]:active {
  cursor: grabbing;
}

.manifest-name.is-dragging {
  opacity: 0.48;
  border-color: rgba(115, 205, 255, 0.72);
  box-shadow: 0 0 0 2px rgba(47, 155, 255, 0.14);
}

.manifest-name-list.is-dragover {
  border-color: rgba(115, 205, 255, 0.82);
  background: rgba(45, 152, 255, 0.09);
  box-shadow: inset 0 0 0 1px rgba(115, 205, 255, 0.08);
}

.manifest-name,
.manifest-empty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 26px;
  padding: 5px 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.045);
  color: #dfe9fb;
  font-size: 11px;
  line-height: 1.25;
  box-shadow: inset 0 0 0 1px rgba(136, 171, 230, 0.075);
  overflow-wrap: anywhere;
}

.manifest-name.is-skipped {
  color: rgba(196, 206, 220, 0.66);
  background: rgba(255, 255, 255, 0.026);
  box-shadow: inset 0 0 0 1px rgba(136, 171, 230, 0.045);
}

.manifest-name-label {
  min-width: 0;
  overflow-wrap: anywhere;
}

.manifest-generate-toggle {
  flex: 0 0 auto;
  min-height: 24px;
  padding: 0 9px;
  border: 1px solid rgba(210, 229, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
  color: rgba(218, 231, 255, 0.78);
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
  transition:
    border-color 140ms ease,
    background 140ms ease,
    color 140ms ease;
}

.manifest-generate-toggle.is-on {
  border-color: rgba(47, 155, 255, 0.22);
  background: rgba(47, 155, 255, 0.09);
  color: #d9ecff;
}

.manifest-generate-toggle.is-off {
  border-color: rgba(170, 184, 205, 0.12);
  background: rgba(255, 255, 255, 0.028);
  color: rgba(190, 202, 220, 0.58);
}

.manifest-generate-toggle:hover,
.manifest-generate-toggle:focus-visible {
  border-color: rgba(47, 155, 255, 0.45);
  background: rgba(47, 155, 255, 0.12);
  color: #efffe9;
  outline: none;
}

.manifest-empty {
  color: var(--muted);
  background: rgba(255, 255, 255, 0.025);
}

.manual-asset-form {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(139, 179, 242, 0.14);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.048), rgba(255, 255, 255, 0.018)),
    rgba(4, 11, 22, 0.72);
}

.manual-asset-form-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.manual-asset-form-head strong {
  color: #f4f8ff;
  font-size: 13px;
}

.manual-asset-form input,
.manual-asset-form textarea {
  width: 100%;
  border: 1px solid rgba(139, 179, 242, 0.13);
  border-radius: 14px;
  background: rgba(2, 8, 17, 0.58);
  color: var(--text);
  font-size: 12px;
}

.manual-asset-form textarea {
  min-height: 74px;
  resize: vertical;
}

.manual-asset-form .manual-quality {
  justify-self: start;
}

.manual-reference-picker {
  padding: 0;
}

.manual-reference-list {
  min-height: 28px;
}

.manifest-item {
  display: grid;
  gap: 7px;
  padding: 8px 0;
  border-top: 1px solid rgba(136, 171, 230, 0.11);
}

.manifest-item:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.manifest-item div {
  display: grid;
  gap: 3px;
}

.manifest-item strong {
  font-size: 12px;
  overflow-wrap: anywhere;
}

.manifest-item span,
.manifest-item small {
  color: var(--muted);
  font-size: 10px;
  overflow-wrap: anywhere;
}

.manifest-item p {
  margin: 0;
  color: #dbe7f8;
  font-size: 11px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.relation-panel {
  min-height: 520px;
  background:
    radial-gradient(circle at 50% 0%, rgba(36, 93, 184, 0.26), transparent 28rem),
    rgba(7, 13, 24, 0.62);
}

.relation-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.relation-canvas {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 14px;
  margin: 0 -4px -2px;
  overflow: visible;
}

.relation-map-wrap {
  overflow: visible;
  max-height: none;
  padding: 8px 4px 10px;
}

.relation-map {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: 440px;
  border: 1px solid rgba(139, 179, 242, 0.13);
  border-radius: 24px;
  background:
    radial-gradient(circle at 38% 12%, rgba(91, 167, 255, 0.16), transparent 18rem),
    radial-gradient(circle at 72% 74%, rgba(47, 155, 255, 0.08), transparent 15rem),
    radial-gradient(circle, rgba(139, 179, 242, 0.13) 1px, transparent 1.4px),
    rgba(3, 8, 17, 0.36);
  background-size:
    auto,
    auto,
    18px 18px,
    auto;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 22px 80px rgba(0, 0, 0, 0.22);
}

.relation-lane-label {
  position: absolute;
  z-index: 2;
  overflow: hidden;
  color: rgba(220, 230, 246, 0.58);
  font-size: 10px;
  font-weight: 720;
  letter-spacing: 0;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.relation-map::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.032), transparent 24%, transparent 76%, rgba(255, 255, 255, 0.025));
  pointer-events: none;
}

.relation-map-edges {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.relation-map-edge {
  fill: none;
  stroke: rgba(139, 179, 242, 0.28);
  stroke-linecap: round;
  stroke-width: 1.35;
}

.relation-map-edge.sequence {
  stroke: rgba(47, 155, 255, 0.26);
  stroke-dasharray: 4 7;
}

.relation-map-edge.storyboard {
  stroke: rgba(255, 255, 255, 0.36);
  stroke-dasharray: 2 8;
}

.relation-map-edge.character {
  stroke: rgba(91, 167, 255, 0.36);
}

.relation-map-edge.scene {
  stroke: rgba(47, 155, 255, 0.3);
}

.relation-map-edge.prop,
.relation-map-edge.insert {
  stroke: rgba(255, 202, 97, 0.34);
}

.relation-map-edge.output {
  stroke: rgba(255, 255, 255, 0.3);
}

.relation-map-edge.warn {
  stroke: rgba(255, 97, 116, 0.42);
}

.relation-map-edge.active {
  stroke: rgba(91, 167, 255, 0.76);
  stroke-dasharray: 7 9;
}

.canvas-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.mini-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(139, 179, 242, 0.18);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025)),
    rgba(7, 14, 26, 0.72);
  color: #eff6ff;
  font-size: 11px;
  font-weight: 720;
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.mini-action:hover {
  border-color: rgba(170, 204, 255, 0.34);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.035)),
    rgba(12, 24, 43, 0.82);
}

.mini-action:disabled {
  cursor: wait;
  opacity: 0.55;
}

.relation-map-node {
  position: absolute;
  z-index: 1;
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 54px;
  padding: 8px 10px;
  border: 1px solid rgba(139, 179, 242, 0.17);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.022)),
    rgba(5, 12, 24, 0.88);
  box-shadow:
    0 18px 52px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.relation-map-node::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.045), transparent);
  opacity: 0;
  pointer-events: none;
}

.relation-map-node.source,
.relation-map-node.plan {
  background:
    linear-gradient(180deg, rgba(143, 190, 255, 0.13), rgba(255, 255, 255, 0.025)),
    rgba(7, 16, 32, 0.88);
}

.relation-map-node.output {
  background:
    linear-gradient(180deg, rgba(47, 155, 255, 0.12), rgba(255, 255, 255, 0.025)),
    rgba(7, 17, 18, 0.9);
}

.relation-map-node.asset.character {
  background:
    linear-gradient(180deg, rgba(91, 167, 255, 0.12), rgba(255, 255, 255, 0.022)),
    rgba(5, 12, 24, 0.9);
}

.relation-map-node.asset.scene {
  background:
    linear-gradient(180deg, rgba(47, 155, 255, 0.1), rgba(255, 255, 255, 0.022)),
    rgba(5, 15, 18, 0.9);
}

.relation-map-node.asset.prop,
.relation-map-node.asset.insert {
  background:
    linear-gradient(180deg, rgba(255, 202, 97, 0.1), rgba(255, 255, 255, 0.022)),
    rgba(18, 13, 6, 0.88);
}

.relation-map-node.asset.storyboard {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.026)),
    rgba(12, 14, 20, 0.9);
}

.relation-map-node.ok {
  border-color: rgba(47, 155, 255, 0.24);
}

.relation-map-node.warn {
  border-color: rgba(255, 97, 116, 0.38);
}

.relation-map-node.active {
  border-color: rgba(91, 167, 255, 0.48);
  box-shadow:
    0 20px 58px rgba(0, 0, 0, 0.32),
    0 0 0 1px rgba(91, 167, 255, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.relation-map-node.active::before {
  opacity: 0;
}

.relation-map-node strong {
  min-width: 0;
  overflow: hidden;
  color: #eef5ff;
  font-size: 12px;
  font-weight: 720;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.relation-map-node small {
  grid-column: 2;
  min-width: 0;
  overflow: hidden;
  color: #92a1b8;
  font-size: 10px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.relation-node-progress {
  position: absolute;
  right: 10px;
  bottom: 6px;
  left: 10px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(91, 167, 255, 0.82), rgba(47, 155, 255, 0.74));
  opacity: 0.65;
  transform-origin: left center;
}

.relation-node-progress::after {
  content: "";
  display: block;
  width: inherit;
  height: 100%;
  border-radius: inherit;
}

.relation-node-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #91acd8;
  box-shadow: 0 0 0 4px rgba(145, 172, 216, 0.1);
}

.relation-map-node.ok .relation-node-dot {
  background: var(--ok);
  box-shadow: 0 0 0 4px rgba(47, 155, 255, 0.11);
}

.relation-map-node.warn .relation-node-dot {
  background: var(--danger);
  box-shadow: 0 0 0 4px rgba(255, 97, 116, 0.12);
}

.relation-map-node.active .relation-node-dot {
  background: var(--blue);
  animation: statusBeacon 1.25s ease-in-out infinite;
  box-shadow:
    0 0 0 4px rgba(91, 167, 255, 0.13),
    0 0 20px rgba(91, 167, 255, 0.58);
}

.relation-empty-map {
  display: grid;
  place-items: center;
  min-height: 180px;
  border: 1px dashed rgba(136, 171, 230, 0.18);
  border-radius: 22px;
  color: var(--muted);
  font-size: 12px;
  background: rgba(255, 255, 255, 0.035);
}

.relation-map-note {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(136, 171, 230, 0.14);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.045);
}

.relation-map-note strong {
  font-size: 12px;
}

.relation-map-note div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.continuity-chip {
  max-width: 100%;
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(91, 167, 255, 0.09);
  color: #bdd9ff;
  font-size: 10px;
  box-shadow: inset 0 0 0 1px rgba(77, 161, 255, 0.15);
  overflow-wrap: anywhere;
}

.continuity-chip.ok {
  background: rgba(47, 155, 255, 0.1);
  color: #ddffcf;
  box-shadow: inset 0 0 0 1px rgba(47, 155, 255, 0.18);
}

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}

.asset-preview-panel .gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-auto-rows: max-content;
  align-items: start;
  overflow: auto;
  padding-right: 0;
}

@container (min-width: 700px) {
  .asset-preview-panel .gallery {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }

  .asset-upload-form {
    grid-template-columns: minmax(190px, 0.85fr) minmax(240px, 1.2fr) auto;
  }
}

@container (min-width: 820px) {
  .video-settings,
  .asset-manifest-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .segment-progress {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }

  .video-grid.rough {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
}

@container (max-width: 520px) {
  .section-head,
  .asset-reference-picker {
    flex-direction: column;
    grid-template-columns: 1fr;
  }

  .actions,
  .status-row,
  .segment-top,
  .segment-meta {
    justify-content: flex-start;
  }

  .video-settings,
  .asset-manifest-grid,
  .config-row.three {
    grid-template-columns: 1fr;
  }

  .segment-card {
    grid-template-columns: 1fr;
  }

  .segment-card .segment-actions {
    grid-column: 1;
    grid-row: auto;
    flex-direction: row;
    justify-content: flex-start;
  }
}

@container (max-width: 620px) {
  .asset-upload-form {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .asset-upload-fields {
    grid-template-columns: 1fr;
  }

  .asset-file-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .asset-upload-form #assetUploadButton,
  .asset-upload-form #storyboardUploadButton {
    width: 100%;
    justify-self: stretch;
  }
}

.asset-card,
.video-card,
.segment-card {
  overflow: hidden;
  border: 1px solid rgba(139, 179, 242, 0.13);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018)),
    rgba(5, 12, 24, 0.78);
  box-shadow:
    0 24px 68px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.asset-card {
  position: relative;
  cursor: zoom-in;
  transition:
    transform 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease;
}

.asset-card.is-missing {
  cursor: default;
  border-style: dashed;
  background:
    radial-gradient(circle at 50% 0%, rgba(91, 167, 255, 0.12), transparent 13rem),
    rgba(5, 12, 24, 0.72);
}

.asset-card.is-selected {
  border-color: rgba(47, 155, 255, 0.58);
  box-shadow:
    0 28px 82px rgba(0, 0, 0, 0.42),
    0 0 0 2px rgba(47, 155, 255, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.asset-card.is-failed {
  border-color: rgba(255, 97, 116, 0.42);
}

.asset-card.has-stale-asset {
  box-shadow:
    0 24px 68px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.asset-card:hover,
.asset-card:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(47, 155, 255, 0.36);
  box-shadow:
    0 28px 82px rgba(0, 0, 0, 0.44),
    0 0 0 1px rgba(47, 155, 255, 0.16);
  outline: none;
}

.asset-card.is-missing:hover,
.asset-card.is-missing:focus-visible {
  transform: none;
}

.asset-slot-select {
  position: absolute;
  top: 9px;
  left: 9px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  border-radius: 999px;
  background: rgba(4, 11, 22, 0.72);
  color: #f7fbff;
  font-size: 11px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.13),
    0 14px 38px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(16px) saturate(1.25);
}

.asset-card:not(.storyboard-card) > .asset-slot-select {
  display: none;
}

.asset-slot-select input {
  width: 15px;
  height: 15px;
  accent-color: var(--accent);
}

.sr-only {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.asset-tools {
  position: absolute;
  top: 9px;
  right: 9px;
  z-index: 2;
  display: flex;
  gap: 6px;
  opacity: 1;
  transform: translateY(0) scale(1);
  transition:
    opacity 140ms ease,
    transform 140ms ease;
}

.asset-tool {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  background: rgba(4, 11, 22, 0.72);
  color: #f7fbff;
  text-decoration: none;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 16px 42px rgba(0, 0, 0, 0.36);
  backdrop-filter: blur(16px) saturate(1.25);
  transition:
    border-color 140ms ease,
    background 140ms ease;
}

.asset-tool span {
  margin-top: -1px;
  color: inherit;
  font-size: 18px;
  line-height: 1;
}

.asset-card:hover .asset-tools,
.asset-card:focus-within .asset-tools,
.asset-tools:has(.asset-tool:focus-visible) {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.asset-tool:hover,
.asset-tool:focus-visible {
  border-color: rgba(47, 155, 255, 0.56);
  background: rgba(12, 25, 42, 0.9);
  outline: none;
}

.asset-regenerate span {
  font-size: 18px;
}

.asset-card.is-node-running {
  border-color: rgba(91, 167, 255, 0.38);
}

.asset-card.is-skipped {
  opacity: 0.72;
}

.asset-card.is-node-running .asset-missing-preview {
  box-shadow: inset 0 0 0 1px rgba(91, 167, 255, 0.18);
}

.node-beacon {
  display: inline-block;
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-right: 7px;
  border-radius: 999px;
  background: var(--blue);
  vertical-align: 1px;
  box-shadow:
    0 0 0 4px rgba(91, 167, 255, 0.12),
    0 0 18px rgba(91, 167, 255, 0.5);
  animation: statusBeacon 1.35s ease-in-out infinite;
}

.asset-delete span {
  margin-top: -2px;
  font-size: 20px;
}

.asset-delete:hover,
.asset-delete:focus-visible {
  border-color: rgba(255, 97, 116, 0.58);
  background: rgba(78, 12, 24, 0.88);
  color: #ffd7dc;
}

.asset-missing-preview {
  display: grid;
  place-content: center;
  gap: 8px;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 46px 16px 18px;
  text-align: center;
  background:
    radial-gradient(circle, rgba(139, 179, 242, 0.16) 1px, transparent 1.4px),
    rgba(3, 8, 17, 0.54);
  background-size: 18px 18px, auto;
}

.asset-missing-preview strong {
  color: #eef5ff;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.asset-missing-preview span {
  color: var(--muted);
  font-size: 11px;
}

.asset-card img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #07101e;
}

.asset-card-media {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #07101e;
}

.asset-card-media img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
}

/* 兼容旧缓存/旧模板中的直接图片节点，避免竖图按原始高度撑开资产网格。 */
#assetGallery > .asset-card > img {
  width: 100%;
  height: clamp(140px, 14vw, 220px);
  aspect-ratio: auto;
  object-fit: cover;
}

.asset-failure-ribbon {
  position: absolute;
  right: 10px;
  bottom: 62px;
  left: 10px;
  z-index: 2;
  padding: 8px 10px;
  border: 1px solid rgba(255, 97, 116, 0.3);
  border-radius: 12px;
  background: rgba(70, 10, 20, 0.78);
  color: #ffdce1;
  font-size: 11px;
  font-weight: 680;
  line-height: 1.25;
  text-align: center;
  backdrop-filter: blur(14px) saturate(1.2);
}

.asset-empty-state {
  display: grid;
  place-items: center;
  min-height: 180px;
  border: 1px dashed rgba(139, 179, 242, 0.2);
  border-radius: 18px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.035);
  font-size: 12px;
}

.storyboard-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  overflow: auto;
  align-content: start;
}

.storyboard-card {
  align-self: start;
  min-width: 0;
  padding: 8px;
  gap: 8px;
}

.storyboard-card img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015)),
    #050a12;
}

.storyboard-card .caption {
  min-height: 34px;
  padding: 0 2px 2px;
}

.storyboard-card .caption strong {
  font-size: 11px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.storyboard-card .caption small {
  display: none;
}

@container (max-width: 640px) {
  .storyboard-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.storyboard-missing-preview {
  aspect-ratio: 16 / 9;
  background:
    linear-gradient(90deg, rgba(210, 229, 255, 0.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(210, 229, 255, 0.08) 1px, transparent 1px),
    rgba(3, 8, 17, 0.54);
  background-size: 50% 33.333%, 50% 33.333%, auto;
}

.caption {
  padding: 9px;
  border-top: 1px solid var(--soft-line);
}

.caption strong {
  display: block;
  font-size: 12px;
  overflow-wrap: anywhere;
}

.caption span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
}

.caption small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.asset-slot-status.ok {
  color: var(--ok);
}

.asset-slot-status.skip {
  color: rgba(190, 202, 220, 0.68);
}

.asset-slot-status.warn,
.asset-slot-status.missing {
  color: var(--danger);
}

.asset-reference-picker {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
}

.asset-reference-picker select {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  color: var(--text);
  font-size: 11px;
}

.asset-reference-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 24px;
  align-items: center;
}

.ref-chip {
  max-width: 100%;
  padding: 5px 8px;
  border: 1px solid rgba(47, 155, 255, 0.22);
  border-radius: 999px;
  background: rgba(47, 155, 255, 0.08);
  color: #eaf5ff;
  font-size: 10px;
  overflow-wrap: anywhere;
}

.inline-status {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
}

.status-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.status-note {
  margin: 0;
  color: #cbd8ed;
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.status-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.status-grid > div {
  min-width: 0;
  padding: 10px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.045);
  box-shadow:
    inset 0 0 0 1px rgba(139, 179, 242, 0.09),
    0 14px 38px rgba(0, 0, 0, 0.16);
}

.status-grid span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 11px;
}

.status-grid strong {
  display: block;
  overflow-wrap: anywhere;
  font-size: 13px;
}

.job-details {
  overflow: hidden;
  border-radius: 18px;
  background: rgba(0, 0, 0, 0.32);
  box-shadow: inset 0 0 0 1px var(--soft-line);
}

.job-details summary {
  cursor: pointer;
  padding: 11px 12px;
  color: #dbe7fb;
  font-size: 12px;
}

.job-details pre {
  max-height: none;
  overflow: visible;
  margin: 0;
  padding: 12px;
  border-top: 1px solid var(--soft-line);
  color: #dbe7fb;
  font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 11px;
  line-height: 1.55;
  white-space: pre-wrap;
}

.progress-summary {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto minmax(90px, 1fr);
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.045);
  box-shadow:
    inset 0 0 0 1px rgba(139, 179, 242, 0.09),
    0 14px 38px rgba(0, 0, 0, 0.16);
}

.progress-summary strong {
  display: block;
  font-size: 16px;
}

.progress-summary span {
  color: var(--muted);
  font-size: 12px;
}

.segment-progress {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
  gap: 8px;
  overflow: visible;
  padding-right: 0;
}

.segment-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(82px, auto);
  gap: 7px 12px;
  align-items: center;
  padding: 10px;
  box-shadow: inset 0 0 0 1px var(--soft-line);
  min-width: 0;
}

.segment-card .segment-top,
.segment-card strong,
.segment-card .segment-meta,
.segment-card .segment-error,
.segment-card .meter {
  grid-column: 1;
}

.segment-card .segment-actions {
  grid-column: 2;
  grid-row: 1 / span 5;
  align-self: center;
  min-width: 82px;
}

.segment-card.active {
  border-color: rgba(77, 161, 255, 0.42);
  box-shadow:
    inset 0 0 0 1px rgba(91, 167, 255, 0.42),
    0 14px 38px rgba(91, 167, 255, 0.13);
}

.segment-card.ok {
  border-color: rgba(47, 155, 255, 0.32);
}

.segment-card.warn {
  border-color: rgba(255, 97, 116, 0.36);
}

.segment-top,
.segment-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.segment-index {
  display: inline-flex;
  align-items: center;
  color: #93b2eb;
  font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 11px;
}

.segment-card strong {
  min-height: auto;
  overflow-wrap: anywhere;
  font-size: 12px;
  line-height: 1.35;
}

.segment-meta {
  justify-content: flex-start;
  color: var(--muted);
  font-size: 11px;
}

.segment-meta a {
  color: var(--accent);
  text-decoration: none;
}

.segment-preview-button {
  min-height: 24px;
  border: 1px solid rgba(91, 167, 255, 0.34);
  border-radius: 7px;
  padding: 0 8px;
  background: rgba(91, 167, 255, 0.1);
  color: #cfe5ff;
  font: inherit;
  cursor: pointer;
}

.segment-preview-button:hover,
.segment-preview-button:focus-visible {
  border-color: rgba(91, 167, 255, 0.66);
  background: rgba(91, 167, 255, 0.18);
}

.segment-error {
  max-width: 100%;
  min-width: 0;
  padding: 6px 9px;
  border: 1px solid rgba(255, 97, 116, 0.22);
  border-radius: 12px;
  background: rgba(255, 97, 116, 0.08);
  color: #ffb8c1;
  font-size: 11px;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow-wrap: anywhere;
}

.segment-actions {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
}

.segment-action-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.segment-actions button {
  min-height: 28px;
  min-width: 72px;
  padding: 0 10px;
}

.segment-download-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  min-width: 28px;
  height: 28px;
  border: 1px solid rgba(166, 184, 210, 0.34);
  border-radius: 50%;
  background: rgba(166, 184, 210, 0.08);
  color: inherit;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}

.segment-download-button:hover {
  border-color: var(--accent, #2f9bff);
  background: rgba(47, 155, 255, 0.14);
  transform: translateY(-1px);
}

.segment-download-button:focus-visible {
  outline: 2px solid var(--accent, #2f9bff);
  outline-offset: 2px;
}

.segment-download-button svg {
  display: block;
}

.meter,
.mini-meter {
  position: relative;
  overflow: hidden;
  height: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.meter::after,
.mini-meter::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.32), transparent);
  transform: translateX(-100%);
  opacity: 0;
}

.mini-meter {
  height: 8px;
}

.meter i,
.mini-meter i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--blue));
  transition: width 220ms ease;
}

.segment-card.active .meter::after {
  opacity: 1;
  animation: meterFlow 1.1s linear infinite;
}

.meter.indeterminate i {
  width: 34% !important;
  animation: meterIndeterminate 1.2s ease-in-out infinite;
}

@keyframes meterIndeterminate {
  0% {
    transform: translateX(-115%);
  }
  100% {
    transform: translateX(315%);
  }
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  align-items: start;
}

.video-grid.rough {
  grid-template-columns: 1fr;
  overflow: visible;
}

.video-card video {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  background: #000;
}

.rough .video-card video {
  aspect-ratio: 9 / 16;
}

.jobs {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

.job {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(119, 161, 227, 0.14);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.055);
  font-size: 12px;
}

.job button {
  min-height: 26px;
}

.log {
  min-height: 260px;
  overflow: visible;
  margin: 0;
  padding: 12px;
  border-radius: 18px;
  background: rgba(0, 0, 0, 0.55);
  color: #dbe7fb;
  font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 11px;
  line-height: 1.55;
  white-space: pre-wrap;
}

.empty {
  max-width: 720px;
  margin: 18vh auto 0;
  padding: 42px 36px;
  border: 1px solid rgba(139, 179, 242, 0.12);
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.018)),
    rgba(7, 13, 24, 0.62);
  box-shadow: var(--shadow);
  backdrop-filter: blur(26px) saturate(1.3);
  text-align: center;
}

.empty h2 {
  margin: 0 0 12px;
  font-size: clamp(34px, 4.4vw, 58px);
  line-height: 1.01;
  letter-spacing: -0.02em;
  font-weight: 790;
}

.empty p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  max-width: 420px;
  padding: 12px 14px;
  border: 1px solid rgba(119, 161, 227, 0.2);
  border-radius: 18px;
  background: rgba(10, 19, 34, 0.9);
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow);
  font-size: 13px;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 34px;
  background:
    radial-gradient(circle at 50% 18%, rgba(50, 114, 208, 0.34), transparent 36rem),
    rgba(2, 6, 12, 0.82);
  backdrop-filter: blur(24px) saturate(1.2);
}

.lightbox figure {
  width: min(1380px, 94vw);
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(180, 206, 255, 0.22);
  border-radius: 24px;
  background: rgba(6, 13, 25, 0.9);
  box-shadow: 0 36px 120px rgba(0, 0, 0, 0.66);
}

.lightbox img,
.lightbox video {
  display: block;
  width: 100%;
  max-height: 78vh;
  object-fit: contain;
  background: #02060c;
}

.lightbox figcaption {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 13px 15px;
  border-top: 1px solid var(--soft-line);
}

.lightbox-caption-copy {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.lightbox figcaption strong {
  overflow-wrap: anywhere;
}

.lightbox figcaption span {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 12px;
}

.lightbox-prompt {
  max-width: 100%;
  margin: 0;
  color: #dceaff;
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.lightbox-download {
  flex: 0 0 auto;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(119, 161, 227, 0.28);
  border-radius: 8px;
  padding: 0 12px;
  background: rgba(36, 79, 139, 0.28);
  color: #dceaff;
  font-size: 12px;
  text-decoration: none;
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}

.lightbox-download:hover,
.lightbox-download:focus-visible {
  border-color: rgba(119, 161, 227, 0.7);
  background: rgba(45, 140, 255, 0.35);
  color: #fff;
}

.image-explore-card-preview[data-image-preview] {
  cursor: zoom-in;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.image-explore-card-preview[data-image-preview]:hover {
  border-color: rgba(45, 140, 255, 0.62);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  transform: translateY(-1px);
}

.image-explore-card-preview[data-image-preview]:focus-visible {
  outline: 2px solid var(--explore-blue);
  outline-offset: 3px;
}

.lightbox-close {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 21;
}

.lightbox-download-control {
  position: fixed;
  top: 20px;
  right: 72px;
  z-index: 21;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(119, 161, 227, 0.34);
  border-radius: 8px;
  background: rgba(10, 19, 34, 0.82);
  color: #dceaff;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24);
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease, transform 150ms ease;
}

.lightbox-download-control:hover,
.lightbox-download-control:focus-visible {
  border-color: rgba(119, 161, 227, 0.8);
  background: rgba(45, 140, 255, 0.42);
  color: #fff;
  transform: translateY(-1px);
}

.lightbox-download-control svg {
  display: block;
}

body.image-lightbox-open #imageExploreComposer {
  display: none !important;
}

#imageLightbox.image-only-preview {
  padding: 24px;
}

#imageLightbox.image-only-preview figure {
  width: fit-content;
  max-width: 96vw;
  max-height: 92vh;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#imageLightbox.image-only-preview img {
  width: auto;
  height: auto;
  max-width: 96vw;
  max-height: 92vh;
  object-fit: contain;
  background: transparent;
}

#imageLightbox.image-only-preview figcaption {
  display: none;
}

.hidden {
  display: none !important;
}

@media (max-width: 900px) {
  #app {
    max-height: none;
    overflow: visible;
  }

  .project-home,
  .studio-shell {
    max-height: none;
    overflow: visible;
  }

  .project-home {
    padding: 18px;
  }

  .project-home-header,
  .project-home-main {
    grid-template-columns: minmax(0, 1fr);
  }

  .project-home-header {
    display: grid;
    gap: 14px;
  }

  .project-home-actions {
    justify-content: flex-start;
    width: 100%;
  }

  .canvas-entry-card {
    align-items: flex-start;
    flex-direction: column;
  }

  .projects {
    grid-template-columns: minmax(0, 1fr);
  }

  .project-card {
    min-height: 190px;
    padding: 22px;
    border-radius: 22px;
  }

  .main {
    padding: 18px 18px 24px;
    overflow: visible;
  }

  .topbar {
    align-items: flex-start;
    flex-direction: column;
    padding: 0 2px 18px;
  }

  .topbar > div:first-child,
  .topbar-right {
    width: 100%;
  }

  .topbar-right {
    justify-content: flex-start;
  }

  .workspace-controls {
    display: none;
  }

  .workspace-viewport {
    height: auto;
    overflow: visible;
    padding: 0;
  }

  .workspace {
    position: static;
    width: auto;
    height: auto;
    transform: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "script"
      "manifest"
      "assets"
      "storyboards"
      "video";
    min-height: auto;
    overflow: visible;
    padding: 14px;
    border: 1px solid rgba(139, 179, 242, 0.08);
    border-radius: 26px;
  }

  .script-panel {
    grid-area: script;
  }

  .asset-manifest-panel {
    grid-area: manifest;
  }

  .asset-preview-panel {
    grid-area: assets;
  }

  .storyboard-grid-panel {
    grid-area: storyboards;
  }

  .seedance-panel {
    grid-area: seedance;
  }

  .video-workflow {
    grid-area: video;
  }

  .draggable-window {
    position: relative;
    left: auto !important;
    top: auto !important;
    width: auto;
    height: auto !important;
    max-width: none;
    resize: none;
    overflow: visible;
  }

  .window-resize-handle,
  .draggable-window .section-head::before {
    display: none;
  }

  .video-workflow {
    min-height: auto;
  }

  .asset-preview-panel .gallery {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }

  .storyboard-gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .segment-progress {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .brand {
    min-width: 0;
  }

  .workspace {
    position: static;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "script"
      "assets"
      "manifest"
      "storyboards"
      "video";
    min-height: auto;
    overflow: visible;
  }

  .video-workflow {
    grid-template-columns: 1fr;
  }

  .asset-manifest-grid {
    grid-template-columns: 1fr;
  }

  .topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .asset-preview-panel .gallery {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  }

  .storyboard-gallery {
    grid-template-columns: 1fr;
  }

  .segment-progress,
  .video-grid.rough,
  .asset-manifest-overview {
    overflow: visible;
  }
}

@media (max-width: 620px) {
  .main {
    padding: 14px;
  }

  .project-home,
  .studio-shell {
    padding: 12px;
  }

  .project-home-card {
    padding: 16px;
    border-radius: 22px;
  }

  .project-index-head h2 {
    font-size: 30px;
  }

  .project-card {
    min-height: 176px;
  }

  .two,
  .config-row {
    grid-template-columns: 1fr;
  }

  .config-row.three {
    grid-template-columns: 1fr;
  }

  .asset-style-console {
    grid-template-columns: 1fr;
  }

  .section-head {
    flex-direction: column;
  }

  .actions,
  .upload-row {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .quality-pill {
    grid-template-columns: auto minmax(78px, 1fr);
  }

  .asset-upload-form {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .asset-file-row {
    grid-template-columns: 1fr;
  }

  .asset-upload-form #assetUploadButton,
  .asset-upload-form #storyboardUploadButton {
    width: 100%;
    justify-self: stretch;
  }

  .gallery {
    grid-template-columns: 1fr;
  }

  .asset-card {
    flex-basis: min(86vw, 520px);
  }

  .asset-tools {
    opacity: 1;
    transform: none;
  }

  .status-grid {
    grid-template-columns: 1fr;
  }

  .segment-card {
    grid-template-columns: minmax(0, 1fr) minmax(82px, auto);
  }

  .segment-card .segment-top,
  .segment-card strong,
  .segment-card .segment-meta,
  .segment-card .segment-error,
  .segment-card .meter {
    grid-column: 1;
  }

  .segment-card .segment-actions {
    grid-column: 2;
  }

  .segment-card .segment-actions {
    grid-row: 1 / span 5;
    flex-direction: column;
    justify-content: center;
  }

  .lightbox {
    padding: 14px;
  }

  .lightbox figcaption {
    display: grid;
  }
}

@keyframes statusBeacon {
  0%,
  100% {
    transform: scale(1);
    box-shadow:
      0 0 0 4px rgba(91, 167, 255, 0.12),
      0 0 16px rgba(91, 167, 255, 0.38);
  }

  50% {
    transform: scale(1.22);
    box-shadow:
      0 0 0 8px rgba(91, 167, 255, 0.05),
      0 0 28px rgba(91, 167, 255, 0.68);
  }
}

@keyframes meterFlow {
  to {
    transform: translateX(100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .relation-map-node.active .relation-node-dot,
  .node-beacon,
  .pill.active,
  .segment-card.active .meter::after {
    animation: none;
  }
}

/* Visual refresh: compact production-desk surface. Function selectors stay intact. */
:root {
  --bg: #090b0f;
  --bg-2: #10141a;
  --panel: rgba(18, 23, 30, 0.94);
  --panel-solid: #12171e;
  --panel-2: #171d25;
  --ink: #eef2f6;
  --text: #eef2f6;
  --muted: #8f9aa8;
  --line: rgba(218, 226, 235, 0.13);
  --soft-line: rgba(218, 226, 235, 0.08);
  --accent: #74c0fc;
  --accent-ink: #06111c;
  --blue: #74c0fc;
  --danger: #ff7373;
  --ok: #9bd77c;
  --warn: #e6b450;
  --shadow: 0 18px 54px rgba(0, 0, 0, 0.34);
  --radius: 10px;
  --control-radius: 8px;
}

* {
  scrollbar-width: none;
}

*::-webkit-scrollbar {
  display: none;
}

body {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 180px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.024) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    #090b0f;
  background-size:
    auto,
    72px 72px,
    72px 72px,
    auto;
  color: var(--ink);
}

body::before,
body::after {
  display: none;
}

button {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 8px;
  border-color: var(--line);
  background: #1a2029;
  color: #e8eef6;
  box-shadow: none;
}

button:hover {
  border-color: rgba(116, 192, 252, 0.42);
  background: #202833;
  box-shadow: none;
}

button.primary,
.quality-pill {
  border-color: rgba(116, 192, 252, 0.5);
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: none;
}

button.danger {
  border-color: rgba(255, 115, 115, 0.35);
  background: rgba(255, 115, 115, 0.12);
  color: #ffd4d4;
}

button.ghost {
  background: rgba(255, 255, 255, 0.045);
}

button.small {
  min-height: 28px;
  border-radius: 7px;
}

input,
textarea,
select {
  border-color: var(--line);
  border-radius: 8px;
  background: #0d1117;
  color: var(--ink);
  box-shadow: none;
}

input:focus,
textarea:focus,
select:focus {
  border-color: rgba(116, 192, 252, 0.7);
  box-shadow: 0 0 0 3px rgba(116, 192, 252, 0.13);
}

textarea {
  line-height: 1.5;
}

label span,
.section-head p,
.muted {
  color: var(--muted);
}

.project-home {
  padding: 24px clamp(20px, 3vw, 44px) 32px;
}

.project-home-header,
.project-home-main {
  width: min(1240px, 100%);
}

.project-home-card,
.project-modal-card,
.empty {
  border-color: var(--line);
  border-radius: 12px;
  background: rgba(18, 23, 30, 0.94);
  box-shadow: var(--shadow);
  backdrop-filter: none;
}

.project-index-head h2 {
  font-size: clamp(26px, 2.6vw, 38px);
}

.section-label,
.kicker {
  color: #9aa6b5;
  text-transform: none;
  font-weight: 650;
}

.brand {
  padding: 0;
}

.brand strong {
  font-size: 14px;
}

.brand span {
  color: #8c98a6;
}

.mark {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border-color: var(--line);
  background: #151a21;
  box-shadow: none;
}

.workspace-controls {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(18, 23, 30, 0.96);
  box-shadow: none;
  backdrop-filter: none;
}

.project-modal {
  background: rgba(5, 7, 10, 0.74);
  backdrop-filter: blur(12px);
}

.section-head {
  margin-bottom: 8px;
  gap: 10px;
}

.section-head h2 {
  color: #f2f6fa;
  font-size: 13px;
  font-weight: 720;
}

.actions {
  gap: 6px;
}

.upload-pill,
.segmented,
.quality-pill,
.style-reference-toggle,
.mini-action,
.pill,
.continuity-chip,
.ref-chip {
  border-radius: 8px;
  box-shadow: none;
}

.upload-pill {
  border: 1px solid var(--line);
  background: #1a2029;
  color: #e8eef6;
}

.upload-pill:hover {
  border-color: rgba(116, 192, 252, 0.42);
  background: #202833;
  box-shadow: none;
}

.segmented {
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--line);
  background: #0d1117;
}

.segmented span {
  min-height: 28px;
  border-radius: 6px;
  color: #9aa6b5;
}

.segmented input:checked + span {
  background: #d9e2ec;
  color: #10141a;
  box-shadow: none;
}

.quality-pill {
  min-height: 36px;
  padding: 0 5px 0 12px;
  gap: 8px;
}

.quality-pill select {
  height: 30px;
  border-radius: 6px;
  background: rgba(6, 17, 28, 0.12);
  box-shadow: none;
}

.project-card {
  min-height: 190px;
  gap: 24px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #12171e;
  box-shadow: none;
}

.project-card:hover {
  background: #171d25;
  transform: translateY(-1px);
}

.project-card.active {
  border-color: rgba(116, 192, 252, 0.58);
  background: #17202a;
  box-shadow: inset 0 0 0 1px rgba(116, 192, 252, 0.16);
}

.project-card strong {
  font-size: clamp(18px, 1.4vw, 23px);
}

.project-delete {
  border-radius: 8px;
  background: rgba(255, 115, 115, 0.08);
  box-shadow: none;
}

.pill {
  min-height: 23px;
  border: 1px solid var(--soft-line);
  background: rgba(255, 255, 255, 0.045);
  color: #b6c0cc;
  box-shadow: none;
}

.pill.ok,
.style-chip.ok,
.continuity-chip.ok,
.ref-chip {
  border-color: rgba(155, 215, 124, 0.28);
  background: rgba(155, 215, 124, 0.1);
  color: #caf2b5;
}

.pill.active {
  border-color: rgba(116, 192, 252, 0.34);
  background: rgba(116, 192, 252, 0.12);
  color: #cce7ff;
  box-shadow: none;
}

.pill.warn {
  border-color: rgba(255, 115, 115, 0.28);
  background: rgba(255, 115, 115, 0.12);
  color: #ffc6c6;
}

.main {
  padding: 18px 0 0;
  overflow: hidden;
}

.topbar {
  align-items: center;
  min-height: 72px;
  padding: 0 28px 14px;
  border-bottom: 1px solid rgba(218, 226, 235, 0.06);
}

h1 {
  font-size: clamp(24px, 1.9vw, 34px);
  letter-spacing: 0;
  text-shadow: none;
}

.workspace-viewport {
  height: calc(100dvh - 92px);
  padding: 18px 28px 72px;
}

.workspace {
  border: 1px solid rgba(218, 226, 235, 0.08);
  border-radius: 12px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    #0b0e13;
  background-size: 36px 36px;
}

.panel,
.video-workflow > .panel {
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  padding: 14px;
  box-shadow: 0 14px 42px rgba(0, 0, 0, 0.28);
  backdrop-filter: none;
}

.panel::before {
  display: none;
}

.draggable-window {
  border-radius: 10px;
  transition:
    outline-color 140ms ease,
    box-shadow 140ms ease;
}

.draggable-window:hover,
.draggable-window:focus-within {
  outline-color: rgba(116, 192, 252, 0.24);
}

.draggable-window.dragging,
.draggable-window.resizing {
  box-shadow:
    0 22px 70px rgba(0, 0, 0, 0.48),
    0 0 0 1px rgba(116, 192, 252, 0.34);
}

.draggable-window .section-head {
  padding: 0 0 10px;
  border-bottom: 1px solid var(--soft-line);
}

.window-resize-handle {
  right: 9px;
  bottom: 9px;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.045);
  box-shadow: inset 0 0 0 1px var(--line);
}

.window-resize-handle::after {
  right: 7px;
  bottom: 7px;
  width: 12px;
  height: 12px;
  border-color: rgba(218, 226, 235, 0.52);
}

.draggable-window:hover .window-resize-handle,
.draggable-window:focus-within .window-resize-handle,
.draggable-window.resizing .window-resize-handle {
  background: rgba(116, 192, 252, 0.1);
  box-shadow: inset 0 0 0 1px rgba(116, 192, 252, 0.35);
}

.editor {
  border-color: var(--line);
  background: #0d1117;
  color: #dce6f0;
  caret-color: var(--accent);
}

.asset-style-console,
.asset-upload-form,
.manual-asset-form,
.advanced-video-actions,
.progress-summary,
.status-grid > div,
.job-details,
.log {
  border: 1px solid var(--soft-line);
  border-radius: 10px;
  background: rgba(13, 17, 23, 0.78);
  box-shadow: none;
}

.asset-style-console select,
.asset-style-console input,
.asset-upload-form select,
.manual-asset-form input,
.manual-asset-form textarea,
.video-settings select,
.asset-reference-picker select {
  border-radius: 8px;
  background: #0d1117;
  color: var(--ink);
}

.style-reference-toggle {
  border-color: var(--line);
  background: #0d1117;
}

.style-chip {
  border: 1px solid rgba(116, 192, 252, 0.24);
  background: rgba(116, 192, 252, 0.1);
  color: #cae6ff;
}

.asset-manifest-panel .section-head .actions button,
.asset-manifest-panel .section-head .actions button.primary {
  border-radius: 8px;
  background: #1a2029;
  color: #e8eef6;
  box-shadow: none;
}

.asset-manifest-panel .section-head .actions button.primary {
  border-color: rgba(116, 192, 252, 0.5);
  background: var(--accent);
  color: var(--accent-ink);
}

.asset-manifest-summary .pill,
.manifest-name,
.manifest-empty,
.manifest-generate-toggle {
  border-radius: 7px;
  box-shadow: none;
}

.manifest-group {
  border-color: var(--soft-line);
  border-radius: 10px;
  background: rgba(13, 17, 23, 0.62);
}

.manifest-add-btn {
  border-radius: 7px;
  background: #1a2029;
  box-shadow: none;
}

.manifest-add-btn:hover {
  border-color: rgba(116, 192, 252, 0.42);
  background: #202833;
  box-shadow: none;
}

.manifest-name {
  border: 1px solid var(--soft-line);
  background: rgba(255, 255, 255, 0.035);
}

.manifest-generate-toggle.is-on {
  border-color: rgba(155, 215, 124, 0.32);
  background: rgba(155, 215, 124, 0.1);
  color: #caf2b5;
}

.manifest-generate-toggle.is-off {
  border-color: rgba(159, 173, 190, 0.14);
  background: rgba(255, 255, 255, 0.025);
}

.relation-panel {
  min-height: 340px;
  background: var(--panel);
}

.relation-canvas {
  margin: 0;
}

.relation-map {
  min-height: 268px;
  border-color: var(--soft-line);
  border-radius: 10px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    #0d1117;
  background-size: 32px 32px;
  box-shadow: none;
}

.relation-map::before {
  display: none;
}

.relation-lane-label {
  color: #8996a5;
  font-weight: 650;
}

.relation-map-node {
  min-height: 50px;
  border-color: var(--line);
  border-radius: 8px;
  background: #141a22;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24);
}

.relation-map-node.source,
.relation-map-node.plan,
.relation-map-node.output,
.relation-map-node.asset.character,
.relation-map-node.asset.scene,
.relation-map-node.asset.prop,
.relation-map-node.asset.insert,
.relation-map-node.asset.storyboard {
  background: #141a22;
}

.relation-map-node.ok {
  border-color: rgba(155, 215, 124, 0.32);
}

.relation-map-node.warn {
  border-color: rgba(255, 115, 115, 0.38);
}

.relation-map-node.active {
  border-color: rgba(116, 192, 252, 0.55);
  box-shadow:
    0 10px 26px rgba(0, 0, 0, 0.26),
    0 0 0 1px rgba(116, 192, 252, 0.22);
}

.relation-map-edge {
  stroke: rgba(159, 173, 190, 0.3);
}

.relation-map-edge.active {
  stroke: rgba(116, 192, 252, 0.7);
}

.relation-node-dot,
.node-beacon {
  box-shadow: 0 0 0 4px rgba(116, 192, 252, 0.1);
}

.relation-map-note,
.asset-empty-state,
.empty-projects,
.relation-empty-map {
  border-color: var(--line);
  border-radius: 10px;
  background: rgba(13, 17, 23, 0.62);
}

.gallery {
  gap: 10px;
}

.asset-card,
.video-card,
.segment-card {
  border-color: var(--line);
  border-radius: 10px;
  background: #12171e;
  box-shadow: none;
}

.asset-card:hover,
.asset-card:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(116, 192, 252, 0.42);
  box-shadow: none;
}

.asset-card.is-selected {
  border-color: rgba(116, 192, 252, 0.7);
  box-shadow: inset 0 0 0 1px rgba(116, 192, 252, 0.24);
}

.asset-card.is-failed {
  border-color: rgba(255, 115, 115, 0.42);
  box-shadow: none;
}

.asset-card.is-node-running,
.segment-card.active {
  border-color: rgba(116, 192, 252, 0.5);
  box-shadow: inset 0 0 0 1px rgba(116, 192, 252, 0.18);
}

.asset-missing-preview,
.storyboard-missing-preview {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    #0d1117;
  background-size: 28px 28px;
}

.asset-card img,
.storyboard-card img {
  background: #0d1117;
}

.asset-tools {
  top: 8px;
  right: 8px;
  gap: 5px;
}

.asset-tool,
.asset-slot-select {
  width: 30px;
  height: 30px;
  min-height: 30px;
  border-radius: 8px;
  border-color: rgba(218, 226, 235, 0.2);
  background: rgba(13, 17, 23, 0.88);
  box-shadow: none;
  backdrop-filter: none;
}

.asset-tool:hover,
.asset-tool:focus-visible {
  border-color: rgba(116, 192, 252, 0.58);
  background: #1d2631;
}

.asset-delete:hover,
.asset-delete:focus-visible {
  border-color: rgba(255, 115, 115, 0.58);
  background: rgba(255, 115, 115, 0.16);
}

.caption {
  border-top-color: var(--soft-line);
}

.asset-slot-status.ok {
  color: #aee792;
}

.asset-slot-status.warn,
.asset-slot-status.missing {
  color: #ff9b9b;
}

.storyboard-gallery {
  gap: 10px;
}

.storyboard-card {
  padding: 7px;
}

.inline-status,
.progress-summary {
  margin-bottom: 10px;
}

.status-grid > div,
.progress-summary {
  padding: 9px;
}

.segment-progress {
  gap: 8px;
}

.segment-card {
  padding: 10px;
}

.segment-card.ok {
  border-color: rgba(155, 215, 124, 0.28);
}

.segment-card.warn {
  border-color: rgba(255, 115, 115, 0.34);
}

.segment-index {
  color: #9bcfff;
}

.segment-error {
  border-color: rgba(255, 115, 115, 0.28);
  border-radius: 8px;
  background: rgba(255, 115, 115, 0.1);
  color: #ffc6c6;
}

.meter,
.mini-meter {
  background: rgba(255, 255, 255, 0.08);
}

.meter i,
.mini-meter i {
  background: linear-gradient(90deg, #74c0fc, #9bd77c);
}

.toast {
  border-color: var(--line);
  border-radius: 10px;
  background: rgba(18, 23, 30, 0.96);
  box-shadow: 0 16px 46px rgba(0, 0, 0, 0.42);
  backdrop-filter: none;
}

.lightbox {
  background: rgba(5, 7, 10, 0.86);
  backdrop-filter: blur(12px);
}

.lightbox figure {
  border-color: var(--line);
  border-radius: 10px;
  background: #12171e;
}

.lightbox img {
  background: #0d1117;
}

@media (max-width: 900px) {
  .main {
    overflow: visible;
  }

  .workspace-viewport {
    height: auto;
    overflow: visible;
    padding: 0;
  }

  .workspace {
    border-radius: 12px;
    background: #0b0e13;
  }

  .project-card,
  .project-home-card {
    border-radius: 10px;
  }
}

@media (max-width: 620px) {
  .project-home-card,
  .project-card {
    border-radius: 10px;
  }
}

/* Frosted lightweight cards. Keeps the control-desk layout, softens the material. */
:root {
  --glass: rgba(20, 25, 32, 0.58);
  --glass-strong: rgba(20, 25, 32, 0.72);
  --glass-soft: rgba(255, 255, 255, 0.055);
  --glass-line: rgba(235, 242, 250, 0.15);
  --glass-line-soft: rgba(235, 242, 250, 0.09);
  --panel: var(--glass);
  --panel-solid: rgba(18, 23, 30, 0.78);
  --line: var(--glass-line);
  --soft-line: var(--glass-line-soft);
  --shadow: 0 20px 70px rgba(0, 0, 0, 0.26);
}

body {
  background:
    radial-gradient(circle at 16% 10%, rgba(116, 192, 252, 0.13), transparent 30rem),
    radial-gradient(circle at 88% 8%, rgba(155, 215, 124, 0.055), transparent 24rem),
    linear-gradient(90deg, rgba(255, 255, 255, 0.026) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px),
    linear-gradient(180deg, #0a0d12, #080a0e 48%, #0b0e13);
  background-size:
    auto,
    auto,
    72px 72px,
    72px 72px,
    auto;
}

.project-home-card,
.project-modal-card,
.empty,
.workspace-controls,
.panel,
.video-workflow > .panel,
.project-card,
.asset-card,
.video-card,
.segment-card,
.asset-style-console,
.asset-upload-form,
.manual-asset-form,
.advanced-video-actions,
.progress-summary,
.status-grid > div,
.job-details,
.relation-map-note,
.asset-empty-state,
.empty-projects,
.relation-empty-map,
.toast,
.lightbox figure {
  border-color: var(--glass-line);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.025)),
    var(--glass);
  box-shadow:
    0 18px 58px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.075);
  backdrop-filter: blur(20px) saturate(1.14);
  -webkit-backdrop-filter: blur(20px) saturate(1.14);
}

.project-card,
.asset-card,
.segment-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.022)),
    rgba(18, 23, 30, 0.56);
}

.project-card:hover,
.asset-card:hover,
.asset-card:focus-visible {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.034)),
    rgba(23, 30, 39, 0.64);
  box-shadow:
    0 22px 68px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.09);
}

.project-card.active,
.asset-card.is-selected {
  border-color: rgba(116, 192, 252, 0.62);
  background:
    linear-gradient(180deg, rgba(116, 192, 252, 0.15), rgba(255, 255, 255, 0.03)),
    rgba(18, 25, 34, 0.68);
  box-shadow:
    0 22px 70px rgba(0, 0, 0, 0.28),
    inset 0 0 0 1px rgba(116, 192, 252, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.workspace {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    radial-gradient(circle at 22% 16%, rgba(116, 192, 252, 0.08), transparent 28rem),
    rgba(9, 12, 17, 0.32);
  background-size:
    36px 36px,
    36px 36px,
    auto,
    auto;
}

.workspace::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.018);
  pointer-events: none;
}

.draggable-window.dragging,
.draggable-window.resizing {
  box-shadow:
    0 26px 84px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(116, 192, 252, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

button,
.upload-pill,
.mini-action,
.manifest-add-btn,
.manifest-generate-toggle,
.asset-tool,
.asset-slot-select {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.022)),
    rgba(24, 31, 40, 0.58);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
}

button:hover,
.upload-pill:hover,
.mini-action:hover,
.asset-tool:hover,
.asset-tool:focus-visible {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.034)),
    rgba(28, 37, 48, 0.7);
}

button.primary,
.quality-pill,
.asset-manifest-panel .section-head .actions button.primary {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.08)),
    rgba(116, 192, 252, 0.88);
  color: #06111c;
}

button.danger {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.018)),
    rgba(255, 115, 115, 0.14);
}

input,
textarea,
select,
.editor,
.asset-style-console select,
.asset-style-console input,
.asset-upload-form select,
.manual-asset-form input,
.manual-asset-form textarea,
.video-settings select,
.asset-reference-picker select,
.asset-file-row {
  border-color: var(--glass-line-soft);
  background: rgba(9, 12, 17, 0.56);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.segmented,
.style-reference-toggle,
.manifest-group,
.manifest-name,
.relation-map,
.asset-missing-preview,
.storyboard-missing-preview,
.segment-error,
.log {
  border-color: var(--glass-line-soft);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.018)),
    rgba(9, 12, 17, 0.44);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.relation-map {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 255, 255, 0.034) 1px, transparent 1px),
    rgba(9, 12, 17, 0.34);
  background-size: 32px 32px;
}

.relation-map-node {
  border-color: rgba(235, 242, 250, 0.16);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.03)),
    rgba(21, 27, 35, 0.74);
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.075);
  backdrop-filter: blur(14px) saturate(1.12);
  -webkit-backdrop-filter: blur(14px) saturate(1.12);
}

.relation-map-node.source,
.relation-map-node.plan,
.relation-map-node.output,
.relation-map-node.asset.character,
.relation-map-node.asset.scene,
.relation-map-node.asset.prop,
.relation-map-node.asset.insert,
.relation-map-node.asset.storyboard {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.03)),
    rgba(21, 27, 35, 0.74);
}

.asset-card img,
.storyboard-card img,
.lightbox img {
  background: rgba(9, 12, 17, 0.76);
}

.asset-failure-ribbon,
.caption,
.lightbox figcaption {
  backdrop-filter: blur(12px) saturate(1.08);
  -webkit-backdrop-filter: blur(12px) saturate(1.08);
}

.pill,
.style-chip,
.continuity-chip,
.ref-chip {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--glass-line-soft);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .project-home-card,
  .project-modal-card,
  .empty,
  .workspace-controls,
  .panel,
  .video-workflow > .panel,
  .project-card,
  .asset-card,
  .video-card,
  .segment-card {
    background: rgba(18, 23, 30, 0.92);
  }
}

@media (prefers-reduced-transparency: reduce) {
  .project-home-card,
  .project-modal-card,
  .empty,
  .workspace-controls,
  .panel,
  .video-workflow > .panel,
  .project-card,
  .asset-card,
  .video-card,
  .segment-card {
    background: rgba(18, 23, 30, 0.92);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* Green glass restoration: keep the newer card material, restore the original mood. */
:root {
  --bg: #05080d;
  --bg-2: #0b1d3b;
  --ink: #f7fbff;
  --text: #f7fbff;
  --muted: #91a0b7;
  --accent: #2f9bff;
  --accent-ink: #f7fbff;
  --blue: #5ba7ff;
  --ok: #2f9bff;
  --danger: #ff6174;
  --glass: rgba(8, 15, 28, 0.52);
  --glass-strong: rgba(10, 19, 34, 0.68);
  --glass-line: rgba(139, 179, 242, 0.18);
  --glass-line-soft: rgba(139, 179, 242, 0.1);
  --line: var(--glass-line);
  --soft-line: var(--glass-line-soft);
  --shadow: 0 24px 86px rgba(0, 0, 0, 0.34);
}

body {
  background:
    radial-gradient(circle at 48% 10%, rgba(45, 115, 220, 0.48), transparent 31rem),
    radial-gradient(circle at 70% 16%, rgba(40, 88, 162, 0.22), transparent 23rem),
    radial-gradient(circle at 78% 2%, rgba(47, 155, 255, 0.12), transparent 20rem),
    linear-gradient(90deg, #03060a 0%, #08152b 44%, #05080d 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  display: block;
  background-image:
    radial-gradient(circle, rgba(139, 179, 242, 0.18) 1px, transparent 1.4px),
    linear-gradient(rgba(86, 126, 205, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(86, 126, 205, 0.05) 1px, transparent 1px);
  background-size:
    14px 14px,
    70px 70px,
    70px 70px;
  mask-image: radial-gradient(circle at 50% 14%, black, rgba(0, 0, 0, 0.72) 34rem, transparent 78rem);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  display: block;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.64), transparent 24%, transparent 76%, rgba(0, 0, 0, 0.64)),
    linear-gradient(180deg, rgba(3, 6, 10, 0.18), transparent 16rem, rgba(3, 6, 10, 0.58));
  pointer-events: none;
}

.project-home-card,
.project-modal-card,
.empty,
.workspace-controls,
.panel,
.video-workflow > .panel,
.project-card,
.asset-card,
.video-card,
.segment-card,
.asset-style-console,
.asset-upload-form,
.manual-asset-form,
.advanced-video-actions,
.progress-summary,
.status-grid > div,
.job-details,
.relation-map-note,
.asset-empty-state,
.empty-projects,
.relation-empty-map,
.toast,
.lightbox figure {
  border-color: rgba(139, 179, 242, 0.17);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.095), rgba(255, 255, 255, 0.024)),
    radial-gradient(circle at 12% 0%, rgba(91, 167, 255, 0.12), transparent 18rem),
    rgba(8, 15, 28, 0.54);
  box-shadow:
    0 24px 86px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(22px) saturate(1.22);
  -webkit-backdrop-filter: blur(22px) saturate(1.22);
}

.panel,
.video-workflow > .panel {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.086), rgba(255, 255, 255, 0.02)),
    radial-gradient(circle at 100% 0%, rgba(47, 155, 255, 0.045), transparent 16rem),
    rgba(8, 15, 28, 0.56);
}

.project-card,
.asset-card,
.segment-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.074), rgba(255, 255, 255, 0.02)),
    rgba(7, 14, 26, 0.56);
}

.project-card:hover,
.asset-card:hover,
.asset-card:focus-visible {
  border-color: rgba(47, 155, 255, 0.34);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.034)),
    radial-gradient(circle at 100% 0%, rgba(47, 155, 255, 0.07), transparent 13rem),
    rgba(10, 20, 36, 0.68);
}

.project-card.active,
.asset-card.is-selected {
  border-color: rgba(47, 155, 255, 0.58);
  background:
    linear-gradient(180deg, rgba(47, 155, 255, 0.16), rgba(255, 255, 255, 0.03)),
    rgba(8, 23, 20, 0.62);
  box-shadow:
    0 24px 76px rgba(0, 0, 0, 0.34),
    0 0 0 1px rgba(47, 155, 255, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.workspace {
  background:
    radial-gradient(circle at 18px 18px, rgba(139, 179, 242, 0.08) 1px, transparent 1.4px),
    radial-gradient(circle at 50% 0%, rgba(32, 88, 180, 0.16), transparent 36rem),
    radial-gradient(circle at 86% 0%, rgba(47, 155, 255, 0.055), transparent 22rem),
    rgba(3, 8, 17, 0.18);
  background-size:
    24px 24px,
    auto,
    auto,
    auto;
}

button.primary,
.quality-pill,
.asset-manifest-panel .section-head .actions button.primary {
  border-color: rgba(255, 255, 255, 0.34);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.06)),
    #2f9bff;
  color: #f7fbff;
  box-shadow:
    0 12px 34px rgba(47, 155, 255, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

button.primary:hover,
.asset-manifest-panel .section-head .actions button.primary:hover {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.08)),
    #9dff55;
  border-color: rgba(255, 255, 255, 0.42);
  box-shadow:
    0 16px 42px rgba(47, 155, 255, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

button,
.upload-pill,
.mini-action,
.manifest-add-btn,
.manifest-generate-toggle,
.asset-tool,
.asset-slot-select {
  border-color: rgba(139, 179, 242, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.082), rgba(255, 255, 255, 0.022)),
    rgba(8, 15, 28, 0.6);
  color: #edf6ff;
}

button:hover,
.upload-pill:hover,
.mini-action:hover,
.asset-tool:hover,
.asset-tool:focus-visible {
  border-color: rgba(47, 155, 255, 0.36);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.034)),
    rgba(10, 22, 38, 0.74);
}

.segmented input:checked + span {
  background: rgba(47, 155, 255, 0.92);
  color: #f7fbff;
}

input:focus,
textarea:focus,
select:focus {
  border-color: rgba(47, 155, 255, 0.72);
  box-shadow:
    inset 0 0 0 1px rgba(47, 155, 255, 0.42),
    0 0 0 4px rgba(47, 155, 255, 0.1);
}

.relation-map {
  background:
    radial-gradient(circle at 38% 12%, rgba(91, 167, 255, 0.16), transparent 18rem),
    radial-gradient(circle at 72% 74%, rgba(47, 155, 255, 0.08), transparent 15rem),
    radial-gradient(circle, rgba(139, 179, 242, 0.12) 1px, transparent 1.4px),
    rgba(3, 8, 17, 0.34);
  background-size:
    auto,
    auto,
    18px 18px,
    auto;
}

.relation-map-node.ok,
.asset-card.is-selected,
.segment-card.ok {
  border-color: rgba(47, 155, 255, 0.36);
}

.relation-map-node.active,
.asset-card.is-node-running,
.segment-card.active {
  border-color: rgba(91, 167, 255, 0.56);
  box-shadow:
    0 18px 54px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(91, 167, 255, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.pill.ok,
.style-chip.ok,
.continuity-chip.ok,
.ref-chip,
.manifest-generate-toggle.is-on {
  border-color: rgba(47, 155, 255, 0.28);
  background: rgba(47, 155, 255, 0.1);
  color: #d8ffc9;
}

.pill.active {
  border-color: rgba(91, 167, 255, 0.35);
  background: rgba(91, 167, 255, 0.13);
  color: #cfe5ff;
}

.meter i,
.mini-meter i {
  background: linear-gradient(90deg, #2f9bff, #5ba7ff);
}

.node-beacon,
.relation-map-node.active .relation-node-dot {
  background: #5ba7ff;
  box-shadow:
    0 0 0 4px rgba(91, 167, 255, 0.14),
    0 0 18px rgba(91, 167, 255, 0.55);
}

button.danger {
  border-color: rgba(255, 97, 116, 0.36);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.018)),
    rgba(255, 97, 116, 0.14);
  color: #ffd6dc;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

button.danger:hover {
  border-color: rgba(255, 97, 116, 0.52);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.022)),
    rgba(255, 97, 116, 0.2);
}

.section-head h2 {
  color: #f7fbff;
}

.draggable-window .section-head {
  border-bottom-color: rgba(139, 179, 242, 0.1);
}

.draggable-window .section-head::after {
  content: "";
  position: absolute;
  right: 2px;
  bottom: -1px;
  left: 2px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(47, 155, 255, 0.26), transparent);
  opacity: 0.52;
  pointer-events: none;
}

.asset-tools {
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.34));
}

.asset-card.is-node-running::after,
.segment-card.active::after,
.relation-map-node.active::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(91, 167, 255, 0.08), transparent);
  opacity: 0.9;
}

.asset-card.is-node-running::after,
.segment-card.active::after {
  animation: runningSweep 1.8s ease-in-out infinite;
}

.segment-card {
  position: relative;
}

.segment-actions button:first-child {
  border-color: rgba(47, 155, 255, 0.32);
}

.asset-regenerate:not(:disabled) {
  border-color: rgba(47, 155, 255, 0.3);
}

.asset-delete {
  border-color: rgba(255, 97, 116, 0.24);
}

@keyframes runningSweep {
  0%,
  100% {
    opacity: 0.24;
  }

  50% {
    opacity: 0.9;
  }
}

/* Stable studio stack: predictable production layout over freeform canvas behavior. */
body.is-studio .workspace {
  width: min(1680px, 100%) !important;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "script manifest"
    "assets assets"
    "video video"
    "storyboards storyboards";
  gap: 18px;
  align-items: start;
  overflow: visible;
}

body.is-studio .script-panel {
  grid-area: script;
  min-height: 0;
}

body.is-studio .asset-manifest-panel {
  grid-area: manifest;
  min-height: 0;
}

body.is-studio .asset-preview-panel {
  grid-area: assets;
  min-height: 0;
}

body.is-studio .video-workflow {
  grid-area: video;
  min-height: 0;
}

body.is-studio .storyboard-grid-panel {
  grid-area: storyboards;
  min-height: 0;
}

body.is-studio .panel,
body.is-studio .video-workflow > .panel {
  height: auto;
  min-height: 0;
  overflow: visible;
}

body.is-studio .script-panel .editor {
  min-height: 340px;
}

body.is-studio .asset-manifest-overview {
  overflow: visible;
}

body.is-studio .asset-preview-panel .gallery,
body.is-studio .storyboard-grid-panel .gallery {
  overflow: visible;
  padding: 0;
}

body.is-studio .asset-preview-panel .gallery {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

body.is-studio .storyboard-gallery {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

body.is-studio .segment-progress {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  overflow: visible;
}

body.is-studio .video-settings {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

body.is-studio .asset-style-console {
  grid-template-columns: minmax(180px, 0.42fr) minmax(260px, 1fr);
}

body.is-studio .asset-upload-form {
  grid-template-columns: minmax(220px, 0.8fr) minmax(260px, 1.2fr) auto;
  align-items: end;
}

body.is-studio .asset-upload-hint {
  grid-column: 1 / 3;
}

body.is-studio .asset-upload-form #assetUploadButton,
body.is-studio .asset-upload-form #storyboardUploadButton {
  grid-column: 3;
  width: auto;
  justify-self: end;
}

@media (max-width: 980px) {
  body.is-studio .workspace {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "script"
      "manifest"
      "assets"
      "video"
      "storyboards";
  }

  body.is-studio .asset-style-console,
  body.is-studio .asset-upload-form {
    grid-template-columns: minmax(0, 1fr);
  }

  body.is-studio .asset-upload-hint,
  body.is-studio .asset-upload-form #assetUploadButton,
  body.is-studio .asset-upload-form #storyboardUploadButton {
    grid-column: auto;
    width: 100%;
    justify-self: stretch;
  }
}

/* Fixed adaptive studio layout: no module should require dragging to reveal content. */
body.is-studio #app,
body.is-studio .studio-shell {
  max-height: none;
  min-height: 100dvh;
  overflow: visible;
}

body.is-studio .main {
  min-height: 100dvh;
  padding: 18px 28px 42px;
  overflow: visible;
}

body.is-studio .topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  margin: -18px -28px 18px;
  padding: 14px 28px;
  align-items: center;
  background:
    linear-gradient(180deg, rgba(3, 7, 14, 0.88), rgba(3, 7, 14, 0.62)),
    rgba(3, 7, 14, 0.72);
  border-bottom: 1px solid rgba(139, 179, 242, 0.12);
  backdrop-filter: blur(22px) saturate(1.16);
  -webkit-backdrop-filter: blur(22px) saturate(1.16);
}

body.is-studio .workspace-controls {
  display: none;
}

body.is-studio .workspace-viewport {
  width: 100%;
  height: auto;
  overflow: visible;
  padding: 0;
}

body.is-studio .workspace {
  position: static;
  width: 100% !important;
  height: auto !important;
  min-height: 0;
  transform: none !important;
  display: grid;
  grid-template-columns: minmax(320px, 0.78fr) minmax(340px, 0.82fr) minmax(520px, 1.32fr) minmax(360px, 0.9fr);
  grid-template-areas:
    "script manifest assets video"
    "storyboards storyboards assets video";
  align-items: start;
  gap: 18px;
  padding: 18px;
  border: 1px solid rgba(139, 179, 242, 0.1);
  border-radius: 18px;
  overflow: visible;
}

body.is-studio .draggable-window,
body.is-studio .video-workflow {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  width: auto !important;
  height: auto !important;
  min-height: 0;
  max-width: none;
  overflow: visible;
  transform: none !important;
}

body.is-studio .window-resize-handle {
  display: none !important;
}

body.is-studio .draggable-window .section-head {
  cursor: default;
}

body.is-studio .script-panel {
  grid-area: script;
  min-height: 520px;
}

body.is-studio .asset-manifest-panel {
  grid-area: manifest;
  min-height: 520px;
}

body.is-studio .asset-preview-panel {
  grid-area: assets;
  min-height: 720px;
}

body.is-studio .storyboard-grid-panel {
  grid-area: storyboards;
}

body.is-studio .video-workflow {
  grid-area: video;
}

body.is-studio .video-workflow > .panel {
  min-height: 520px;
}

body.is-studio .panel {
  height: auto;
  overflow: visible;
}

body.is-studio .script-panel .editor {
  min-height: 410px;
}

body.is-studio .asset-manifest-overview,
body.is-studio .asset-preview-panel .gallery,
body.is-studio .storyboard-grid-panel .gallery,
body.is-studio .segment-progress,
body.is-studio .video-grid.rough,
body.is-studio .log {
  flex: initial;
  min-height: 0;
  overflow: visible;
}

body.is-studio .asset-preview-panel .gallery {
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  align-items: start;
  padding: 0;
}

body.is-studio .storyboard-gallery {
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  padding: 0;
}

body.is-studio .segment-progress {
  grid-template-columns: 1fr;
}

body.is-studio .asset-style-console,
body.is-studio .asset-upload-form,
body.is-studio .video-settings {
  grid-template-columns: minmax(0, 1fr);
}

body.is-studio .style-reference-row,
body.is-studio .asset-file-row {
  grid-template-columns: minmax(0, 1fr);
}

body.is-studio .asset-upload-form {
  align-items: stretch;
}

body.is-studio .asset-upload-form #assetUploadButton,
body.is-studio .asset-upload-form #storyboardUploadButton {
  grid-column: auto;
  width: 100%;
  justify-self: stretch;
}

body.is-studio .asset-upload-hint {
  grid-column: auto;
}

@media (max-width: 1500px) {
  body.is-studio .workspace {
    grid-template-columns: minmax(300px, 0.8fr) minmax(330px, 0.9fr) minmax(520px, 1.4fr);
    grid-template-areas:
      "script manifest assets"
      "video video assets"
      "storyboards storyboards storyboards";
  }

  body.is-studio .segment-progress {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
}

@media (max-width: 1180px) {
  body.is-studio .main {
    padding: 16px;
  }

  body.is-studio .topbar {
    margin: -16px -16px 16px;
    padding: 14px 16px;
  }

  body.is-studio .workspace {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "script"
      "manifest"
      "assets"
      "storyboards"
      "video";
    padding: 14px;
  }

  body.is-studio .script-panel,
  body.is-studio .asset-manifest-panel,
  body.is-studio .asset-preview-panel,
  body.is-studio .video-workflow > .panel {
    min-height: 0;
  }

  body.is-studio .script-panel .editor {
    min-height: 300px;
  }
}

/* Higgsfield-inspired studio shell: fixed production console with tabbed content. */
body.is-studio {
  overflow: auto;
}

body.is-studio #app,
body.is-studio .studio-shell {
  width: 100%;
  min-height: 100dvh;
  max-height: none;
  overflow: visible;
}

body.is-studio .studio-shell {
  --stage-max: 1680px;
  display: grid;
  grid-template-columns: 136px minmax(0, 1fr);
  gap: 0;
  background:
    radial-gradient(circle at 34% 0%, rgba(44, 119, 213, 0.34), transparent 34rem),
    radial-gradient(circle at 84% 10%, rgba(47, 155, 255, 0.08), transparent 28rem),
    linear-gradient(90deg, rgba(2, 5, 9, 0.86), rgba(5, 12, 24, 0.16) 28%, rgba(2, 5, 9, 0.32));
}

body.is-studio .studio-sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  min-height: 100dvh;
  padding: 18px 12px;
  border-right: 1px solid rgba(139, 179, 242, 0.12);
  background:
    linear-gradient(180deg, rgba(5, 10, 19, 0.84), rgba(3, 6, 11, 0.62)),
    rgba(5, 11, 20, 0.74);
  backdrop-filter: blur(24px) saturate(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
}

body.is-studio .studio-sidebar-brand {
  display: grid;
  gap: 10px;
  place-items: center;
  padding: 4px 4px 18px;
  text-align: center;
}

body.is-studio .studio-sidebar-brand .mark {
  width: min(112px, 100%);
  height: auto;
  aspect-ratio: 960 / 165;
  border-radius: 0;
  background-color: transparent;
  border: 0;
  box-shadow: none;
  overflow: visible;
}

body.is-studio .studio-sidebar-brand .pixel-toys-wordmark {
  background-size: contain;
  background-color: transparent;
}

body.is-studio .studio-sidebar-brand strong,
body.is-studio .studio-sidebar-brand span {
  display: block;
}

body.is-studio .studio-sidebar-brand strong {
  font-size: 12px;
  letter-spacing: 0;
}

body.is-studio .studio-sidebar-brand span {
  margin-top: 3px;
  color: rgba(192, 207, 232, 0.56);
  font-size: 10px;
}

body.is-studio .studio-sidebar-nav {
  display: grid;
  gap: 8px;
}

body.is-studio .studio-rail-button {
  justify-content: center;
  width: 100%;
  min-height: 40px;
  border-radius: 14px;
  padding: 0 10px;
  color: rgba(224, 237, 255, 0.76);
  background: rgba(255, 255, 255, 0.045);
  box-shadow: inset 0 0 0 1px rgba(139, 179, 242, 0.1);
}

body.is-studio .studio-rail-button:hover,
body.is-studio .studio-rail-button.is-active {
  color: #f9fff7;
  background:
    linear-gradient(135deg, rgba(47, 155, 255, 0.18), rgba(91, 167, 255, 0.1)),
    rgba(255, 255, 255, 0.06);
  box-shadow:
    inset 0 0 0 1px rgba(47, 155, 255, 0.26),
    0 18px 38px rgba(0, 0, 0, 0.2);
}

body.is-studio #studioCanvasButton {
  color: rgba(221, 237, 255, 0.88);
  background:
    linear-gradient(135deg, rgba(64, 143, 255, 0.16), rgba(89, 182, 255, 0.08)),
    rgba(255, 255, 255, 0.045);
  box-shadow: inset 0 0 0 1px rgba(91, 167, 255, 0.22);
}

body.is-studio #studioCanvasButton:hover {
  color: #f4fbff;
  box-shadow:
    inset 0 0 0 1px rgba(91, 167, 255, 0.42),
    0 18px 38px rgba(17, 75, 155, 0.2);
}

body.is-studio #studioCanvasButton:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

body.is-studio .main.studio-stage {
  min-height: 100dvh;
  padding: 18px clamp(18px, 2.2vw, 34px) 46px;
  overflow: visible;
}

body.is-studio .studio-topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  width: min(var(--stage-max), 100%);
  margin: 0 auto 16px;
  padding: 12px 16px;
  border: 1px solid rgba(139, 179, 242, 0.12);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(14, 25, 44, 0.72), rgba(7, 13, 24, 0.54)),
    rgba(6, 13, 24, 0.62);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 20px 70px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(28px) saturate(1.25);
  -webkit-backdrop-filter: blur(28px) saturate(1.25);
}

body.is-studio .studio-topbar .kicker {
  margin-bottom: 6px;
  text-transform: none;
  letter-spacing: 0;
}

body.is-studio .studio-topbar h1 {
  font-size: clamp(21px, 2vw, 32px);
  line-height: 1.08;
  letter-spacing: 0;
}

body.is-studio .project-display-name-form {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  gap: 8px;
  max-width: 520px;
  margin-top: 10px;
}

body.is-studio .project-display-name-form.hidden {
  display: none;
}

body.is-studio .project-display-name-form input {
  min-width: 0;
  height: 34px;
  border-radius: 12px;
  background: rgba(2, 8, 17, 0.5);
}

body.is-studio .topbar-right {
  justify-content: flex-end;
}

body.is-studio .status-pills {
  max-width: 420px;
  justify-content: flex-end;
}

body.is-studio .workspace-controls {
  display: none;
}

body.is-studio .workspace-viewport {
  width: min(var(--stage-max), 100%);
  height: auto;
  margin: 0 auto;
  padding: 0 0 46px;
  overflow: visible;
}

body.is-studio .workspace.studio-board {
  position: static;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  width: 100% !important;
  height: auto !important;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
  transform: none !important;
}

body.is-studio .studio-console,
body.is-studio .studio-flow-strip,
body.is-studio .studio-content-shell {
  border: 1px solid rgba(139, 179, 242, 0.12);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.026)),
    rgba(8, 16, 29, 0.6);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 28px 90px rgba(0, 0, 0, 0.26);
  backdrop-filter: blur(28px) saturate(1.24);
  -webkit-backdrop-filter: blur(28px) saturate(1.24);
}

body.is-studio .studio-console {
  padding: 16px;
}

body.is-studio .studio-console-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

body.is-studio .studio-console-head h2 {
  margin: 0;
  font-size: 20px;
}

body.is-studio .studio-console-head p {
  margin: 5px 0 0;
  max-width: 780px;
  color: rgba(199, 214, 238, 0.7);
  font-size: 13px;
  line-height: 1.5;
}

body.is-studio .studio-console-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

body.is-studio .studio-console-grid {
  display: grid;
  grid-template-columns: minmax(460px, 1.08fr) minmax(360px, 0.92fr);
  gap: 14px;
  align-items: stretch;
}

/* 制作流程步骤条:把四步操作按顺序、始终可见地排在剧本面板顶部,免得按钮分散/被滚动隐藏。 */
.workflow-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 12px 0 6px;
  padding: 12px 14px;
  border: 1px solid rgba(137, 195, 255, 0.22);
  border-radius: 12px;
  background: rgba(20, 32, 52, 0.55);
}

.workflow-steps .workflow-step {
  white-space: nowrap;
}

.workflow-step-arrow {
  color: rgba(150, 190, 245, 0.55);
  font-weight: 700;
  font-size: 13px;
}

.asset-panel-note {
  color: rgba(190, 207, 231, 0.6);
  font-size: 12px;
}

/* 分镜(视频提示词)可编辑表格:每镜一行,左侧镜头信息,右侧可编辑提示词。 */
.shots-table-hint {
  color: rgba(190, 207, 231, 0.62);
  font-size: 12px;
  margin: 4px 0 10px;
}
.shots-empty {
  color: rgba(190, 207, 231, 0.6);
  padding: 24px 12px;
  text-align: center;
}
.shot-row {
  display: grid;
  grid-template-columns: minmax(150px, 200px) 1fr;
  gap: 14px;
  align-items: start;
  padding: 14px 0;
  border-top: 1px solid rgba(137, 195, 255, 0.12);
}
.shot-meta {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-top: 4px;
}
.shot-meta strong {
  font-size: 14px;
  color: rgba(238, 247, 255, 0.95);
  word-break: break-all;
}
.shot-dur {
  font-size: 12px;
  color: rgba(150, 190, 245, 0.85);
}
.shot-refs {
  font-size: 11px;
  color: rgba(190, 207, 231, 0.58);
  word-break: break-all;
  line-height: 1.4;
}
.shot-prompt {
  width: 100%;
  min-height: 130px;
  box-sizing: border-box;
}
.shots-raw-details {
  margin-top: 16px;
}
.shots-raw-details > summary {
  cursor: pointer;
  color: rgba(150, 190, 245, 0.75);
  font-size: 12px;
  padding: 4px 0;
}

body.is-studio .draggable-window,
body.is-studio .video-workflow {
  position: static !important;
  left: auto !important;
  top: auto !important;
  width: auto !important;
  height: auto !important;
  max-width: none;
  min-height: 0;
  transform: none !important;
  overflow: visible;
}

body.is-studio .window-resize-handle {
  display: none !important;
}

body.is-studio .panel,
body.is-studio .video-workflow > .panel {
  height: auto;
  min-height: 0;
  border-radius: 20px;
  border-color: rgba(139, 179, 242, 0.13);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
    rgba(6, 13, 24, 0.58);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 20px 58px rgba(0, 0, 0, 0.22);
  overflow: visible;
}

body.is-studio .panel::before {
  opacity: 0.42;
}

body.is-studio .script-panel,
body.is-studio .asset-manifest-panel,
body.is-studio .asset-preview-panel,
body.is-studio .storyboard-grid-panel,
body.is-studio .video-workflow,
body.is-studio .video-workflow > .panel {
  grid-area: auto;
  min-height: 0;
}

body.is-studio .script-panel .editor {
  min-height: 300px;
  max-height: 46dvh;
  resize: vertical;
}

body.is-studio .asset-manifest-overview {
  overflow: visible;
}

body.is-studio .studio-flow-strip {
  padding: 12px;
}

body.is-studio .studio-flow-status {
  display: grid;
  grid-template-columns: repeat(6, minmax(120px, 1fr));
  gap: 10px;
}

body.is-studio .studio-flow-step {
  display: grid;
  align-content: center;
  justify-items: start;
  min-height: 58px;
  border-radius: 16px;
  padding: 10px 12px;
  text-align: left;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)),
    rgba(3, 9, 17, 0.42);
  box-shadow: inset 0 0 0 1px rgba(139, 179, 242, 0.1);
}

body.is-studio .studio-flow-step span {
  color: rgba(192, 207, 232, 0.62);
  font-size: 11px;
}

body.is-studio .studio-flow-step strong {
  margin-top: 4px;
  color: #f6fbff;
  font-size: 13px;
}

body.is-studio .studio-flow-step.ok {
  box-shadow: inset 0 0 0 1px rgba(47, 155, 255, 0.22);
}

body.is-studio .studio-flow-step.active {
  box-shadow:
    inset 0 0 0 1px rgba(47, 155, 255, 0.36),
    0 0 0 1px rgba(47, 155, 255, 0.05),
    0 14px 38px rgba(47, 155, 255, 0.08);
}

body.is-studio .studio-flow-step.warn {
  box-shadow: inset 0 0 0 1px rgba(255, 199, 92, 0.28);
}

body.is-studio .studio-content-shell {
  padding: 12px;
}

body.is-studio .studio-tabbar {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 4px;
  border-radius: 18px;
  background: rgba(2, 7, 14, 0.42);
  box-shadow: inset 0 0 0 1px rgba(139, 179, 242, 0.09);
}

body.is-studio .studio-tab-button {
  min-height: 38px;
  border-radius: 14px;
  color: rgba(216, 230, 252, 0.7);
  background: transparent;
  box-shadow: none;
}

body.is-studio .studio-tab-button:hover,
body.is-studio .studio-tab-button.is-active {
  color: #061007;
  background: var(--accent);
  box-shadow: 0 14px 34px rgba(47, 155, 255, 0.14);
}

body.is-studio .studio-tab-panels {
  padding-top: 12px;
}

body.is-studio .studio-tab-panel[hidden] {
  display: none !important;
}

body.is-studio .studio-tab-panel.is-active {
  display: block;
}

body.is-studio .asset-style-console {
  grid-template-columns: minmax(190px, 0.46fr) minmax(260px, 1fr);
  align-items: end;
}

body.is-studio .style-reference-row {
  grid-template-columns: minmax(240px, 1fr) auto auto;
}

body.is-studio .asset-file-row {
  grid-template-columns: auto minmax(0, 1fr);
}

body.is-studio .asset-upload-form {
  grid-template-columns: minmax(220px, 0.75fr) minmax(270px, 1fr) auto;
  align-items: end;
}

body.is-studio .asset-upload-hint {
  grid-column: 1 / 3;
}

body.is-studio .asset-upload-form #assetUploadButton,
body.is-studio .asset-upload-form #storyboardUploadButton {
  grid-column: 3;
  width: auto;
  justify-self: end;
}

body.is-studio .gallery,
body.is-studio .asset-preview-panel .gallery,
body.is-studio .storyboard-grid-panel .gallery {
  overflow: visible;
  padding: 0;
}

body.is-studio .asset-preview-panel .gallery {
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}

body.is-studio .storyboard-gallery {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.is-studio .storyboard-card img,
body.is-studio .storyboard-card .asset-missing-preview {
  aspect-ratio: 16 / 9;
}

body.is-studio .video-settings {
  grid-template-columns: repeat(4, minmax(150px, 1fr));
}

body.is-studio .segment-progress {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  overflow: visible;
}

body.is-studio .progress-summary {
  border-radius: 18px;
  background: rgba(4, 11, 21, 0.46);
}

body.is-studio .studio-log-panel {
  min-height: 420px;
}

body.is-studio .studio-log-content {
  display: grid;
  gap: 12px;
}

body.is-studio .studio-log-card {
  border: 1px solid rgba(139, 179, 242, 0.12);
  border-radius: 18px;
  padding: 13px;
  background: rgba(4, 11, 21, 0.48);
}

body.is-studio .studio-log-card > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

body.is-studio .studio-log-card pre,
body.is-studio .studio-log-card p,
body.is-studio .studio-log-empty {
  margin: 0;
  color: rgba(209, 224, 247, 0.72);
  font-size: 12px;
  line-height: 1.55;
  white-space: pre-wrap;
}

body.is-studio .storyboard-panel,
body.is-studio .seedance-panel,
body.is-studio .workflow-storage {
  display: none !important;
}

@media (prefers-reduced-motion: no-preference) {
  body.is-studio .studio-rail-button.is-active,
  body.is-studio .studio-tab-button.is-active {
    animation: studioSoftPulse 2.4s ease-in-out infinite;
  }
}

@keyframes studioSoftPulse {
  0%,
  100% {
    filter: brightness(1);
  }

  50% {
    filter: brightness(1.12);
  }
}

@media (max-width: 1320px) {
  body.is-studio .studio-shell {
    grid-template-columns: 108px minmax(0, 1fr);
  }

  body.is-studio .studio-sidebar-brand span {
    display: none;
  }

  body.is-studio .studio-console-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  body.is-studio .studio-flow-status {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.is-studio .video-settings {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  body.is-studio .studio-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  body.is-studio .studio-sidebar {
    position: static;
    min-height: 0;
    padding: 10px 14px;
    border-right: 0;
    border-bottom: 1px solid rgba(139, 179, 242, 0.12);
  }

  body.is-studio .studio-sidebar-brand {
    display: none;
  }

  body.is-studio .studio-sidebar-nav {
    display: flex;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  body.is-studio .studio-rail-button {
    width: auto;
    min-width: max-content;
  }

  body.is-studio .main.studio-stage {
    padding: 14px;
  }

  body.is-studio .studio-topbar {
    position: static;
    grid-template-columns: minmax(0, 1fr);
    border-radius: 20px;
  }

  body.is-studio .topbar-right,
  body.is-studio .status-pills {
    justify-content: flex-start;
  }

  body.is-studio .studio-console-head {
    display: grid;
  }

  body.is-studio .studio-console-actions {
    justify-content: flex-start;
  }

  body.is-studio .studio-flow-status,
  body.is-studio .video-settings,
  body.is-studio .asset-style-console,
  body.is-studio .asset-upload-form,
  body.is-studio .style-reference-row,
  body.is-studio .asset-file-row {
    grid-template-columns: minmax(0, 1fr);
  }

  body.is-studio .asset-upload-hint,
  body.is-studio .asset-upload-form #assetUploadButton,
  body.is-studio .asset-upload-form #storyboardUploadButton {
    grid-column: auto;
    width: 100%;
    justify-self: stretch;
  }

  body.is-studio .studio-tabbar {
    overflow-x: auto;
  }

  body.is-studio .studio-tab-button {
    min-width: max-content;
  }

  body.is-studio .script-panel .editor {
    min-height: 240px;
    max-height: none;
  }

  body.is-studio .storyboard-gallery {
    grid-template-columns: minmax(0, 1fr);
  }
}

body.is-studio #workspace.workspace.studio-board {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-areas: none !important;
}

body.is-studio #workspace.workspace.studio-board > .studio-console,
body.is-studio #workspace.workspace.studio-board > .studio-flow-strip,
body.is-studio #workspace.workspace.studio-board > .studio-content-shell {
  grid-column: 1 / -1 !important;
}

@media (max-width: 1180px) {
  body.is-studio .asset-style-console,
  body.is-studio .asset-upload-form,
  body.is-studio .style-reference-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.is-studio .asset-upload-hint,
  body.is-studio .asset-upload-form #assetUploadButton,
  body.is-studio .asset-upload-form #storyboardUploadButton {
    grid-column: auto;
    width: 100%;
    justify-self: stretch;
  }
}

/* Interaction cursor polish: clickable chips should never look like text fields. */
body.is-studio button,
body.is-studio [role="button"],
body.is-studio .studio-rail-button,
body.is-studio .studio-tab-button,
body.is-studio .studio-flow-step,
body.is-studio .studio-rail-link,
body.is-studio .topbar-link-button,
body.is-studio .upload-pill,
body.is-studio .segmented label,
body.is-studio .segmented span,
body.is-studio .quality-pill,
body.is-studio .quality-pill select,
body.is-studio .style-reference-toggle,
body.is-studio .style-reference-toggle input,
body.is-studio .manifest-generate-toggle,
body.is-studio .manifest-add-btn,
body.is-studio .asset-tool,
body.is-studio .mini-action,
body.is-studio .project-delete {
  cursor: pointer;
}

body.is-studio .studio-rail-link,
body.is-studio .topbar-link-button {
  display: inline-grid;
  place-items: center;
  text-decoration: none;
}

body.is-studio .studio-rail-link {
  width: 100%;
}

body.is-studio .topbar-link-button {
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 12px;
  font-weight: 680;
  box-shadow: 0 12px 34px rgba(47, 155, 255, 0.18);
}

body.is-studio button:disabled,
body.is-studio select:disabled,
body.is-studio input:disabled,
body.is-studio .asset-tool:disabled,
body.is-studio .manifest-generate-toggle:disabled {
  cursor: not-allowed;
}

/* Production Board display: boards are 16:9 horizontal sheets with a 3×3 grid. */
body.is-studio .storyboard-grid-panel {
  min-height: 0;
}

body.is-studio .storyboard-grid-panel .section-head {
  margin-bottom: 10px;
}

body.is-studio .storyboard-grid-panel .inline-status {
  margin: 0 0 10px;
}

body.is-studio .storyboard-upload-form {
  margin-bottom: 10px;
}

body.is-studio .storyboard-gallery {
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 10px;
  overflow: visible;
}

body.is-studio .storyboard-card {
  padding: 7px;
  border-radius: 16px;
}

body.is-studio .storyboard-card img,
body.is-studio .storyboard-card .asset-missing-preview,
body.is-studio .storyboard-missing-preview {
  aspect-ratio: 16 / 9 !important;
}

body.is-studio .storyboard-card .caption {
  min-height: 30px;
}

body.is-studio .storyboard-card .caption strong {
  font-size: 10.5px;
}

body.is-studio .storyboard-card .caption small,
body.is-studio .storyboard-card .asset-slot-status {
  font-size: 10px;
}

@media (min-width: 1320px) {
  body.is-studio .storyboard-gallery {
    grid-template-columns: repeat(4, minmax(158px, 1fr));
  }
}

/* Thermal guard: keep the studio usable without continuously driving the GPU. */
body.is-studio::before,
body.is-studio::after {
  display: none;
}

body.is-studio *,
body.is-studio *::before,
body.is-studio *::after {
  animation: none !important;
}

body.is-studio .studio-topbar,
body.is-studio .studio-sidebar,
body.is-studio .studio-console,
body.is-studio .studio-flow-strip,
body.is-studio .studio-content-shell,
body.is-studio .project-home-card,
body.is-studio .project-modal-card,
body.is-studio .empty,
body.is-studio .workspace-controls,
body.is-studio .panel,
body.is-studio .video-workflow > .panel,
body.is-studio .project-card,
body.is-studio .asset-card,
body.is-studio .video-card,
body.is-studio .segment-card,
body.is-studio .asset-style-console,
body.is-studio .asset-upload-form,
body.is-studio .manual-asset-form,
body.is-studio .advanced-video-actions,
body.is-studio .progress-summary,
body.is-studio .status-grid > div,
body.is-studio .job-details,
body.is-studio .relation-map-note,
body.is-studio .asset-empty-state,
body.is-studio .empty-projects,
body.is-studio .relation-empty-map,
body.is-studio .toast,
body.is-studio .lightbox figure {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.is-studio .asset-card.is-node-running::after,
body.is-studio .segment-card.active::after,
body.is-studio .relation-map-node.active::after,
body.is-studio .segment-card.active .meter::after {
  display: none !important;
}

body.is-studio .studio-flow-step.active,
body.is-studio .studio-rail-button.is-active,
body.is-studio .studio-tab-button.is-active {
  filter: none !important;
}

.auth-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 50% 8%, rgba(36, 108, 184, 0.18), transparent 32rem),
    linear-gradient(135deg, #070b12 0%, #111820 48%, #07090e 100%);
  color: #f7fbff;
}

.auth-shell {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 24px;
}

.auth-card {
  width: min(420px, 100%);
  border: 1px solid rgba(145, 181, 232, 0.14);
  border-radius: 16px;
  padding: 24px;
  background: rgba(18, 23, 29, 0.96);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.34);
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}

.auth-brand img {
  width: 58px;
  height: auto;
  image-rendering: pixelated;
}

.auth-brand strong,
.auth-brand span {
  display: block;
}

.auth-brand strong {
  font-size: 24px;
  line-height: 1.1;
}

.auth-brand span {
  margin-top: 4px;
  color: rgba(205, 219, 243, 0.62);
  font-size: 13px;
}

.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 18px;
}

.auth-tabs button {
  height: 38px;
  border: 1px solid rgba(145, 181, 232, 0.14);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(225, 236, 252, 0.68);
  cursor: pointer;
}

.auth-tabs button.is-active {
  border-color: rgba(104, 183, 255, 0.55);
  background: rgba(22, 135, 255, 0.18);
  color: #f7fbff;
}

.auth-code-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
}

.auth-code-row label {
  min-width: 0;
}

.auth-code-button {
  min-width: 104px;
  height: 46px;
  border: 1px solid rgba(182, 255, 88, 0.32);
  border-radius: 5px;
  background: rgba(182, 255, 88, 0.08);
  color: var(--auth-ink);
  font-size: 11px;
  font-weight: 750;
}

.auth-code-button:hover,
.auth-code-button:focus-visible {
  border-color: rgba(182, 255, 88, 0.75);
  background: rgba(182, 255, 88, 0.16);
}

.auth-code-button:disabled {
  cursor: wait;
  opacity: 0.58;
}

.auth-form {
  display: grid;
  gap: 14px;
}

.auth-form label {
  display: grid;
  gap: 7px;
}

.auth-form label span {
  color: rgba(216, 229, 249, 0.76);
  font-size: 13px;
}

.auth-form input {
  height: 42px;
  border: 1px solid rgba(145, 181, 232, 0.14);
  border-radius: 10px;
  padding: 0 12px;
  background: rgba(5, 8, 13, 0.86);
  color: #f7fbff;
  outline: none;
}

.auth-form input:focus {
  border-color: rgba(104, 183, 255, 0.64);
  box-shadow: 0 0 0 3px rgba(22, 135, 255, 0.14);
}

.auth-message {
  min-height: 20px;
  margin: 0;
  color: rgba(205, 219, 243, 0.68);
  font-size: 13px;
}

.auth-user-label {
  display: inline-flex;
  align-items: center;
  max-width: 160px;
  overflow: hidden;
  color: rgba(216, 229, 249, 0.68);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Blue-white canvas theme refresh. Keep layout/workflow unchanged. */
:root {
  --bg: #050914;
  --bg-2: #0b2a62;
  --panel: rgba(13, 28, 52, 0.74);
  --panel-solid: #0f1b31;
  --ink: #f7fbff;
  --text: #f7fbff;
  --muted: #9fb4d2;
  --line: rgba(92, 166, 255, 0.28);
  --soft-line: rgba(150, 196, 255, 0.12);
  --accent: #2f9bff;
  --accent-ink: #f7fbff;
  --blue: #62b7ff;
  --ok: #58d4ff;
  --glass: rgba(10, 24, 46, 0.62);
  --glass-strong: rgba(12, 30, 58, 0.78);
  --glass-line: rgba(150, 196, 255, 0.2);
  --glass-line-soft: rgba(150, 196, 255, 0.11);
}

body,
body.auth-page {
  background:
    radial-gradient(circle at 50% 14%, rgba(30, 112, 255, 0.32), transparent 34rem),
    linear-gradient(90deg, #05070d 0%, #09224f 44%, #050914 100%);
}

body::before {
  background-image:
    radial-gradient(circle, rgba(155, 207, 255, 0.2) 1px, transparent 1.4px),
    linear-gradient(rgba(90, 166, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(90, 166, 255, 0.055) 1px, transparent 1px);
}

button.primary,
button.primary:hover,
.quality-pill,
.asset-manifest-panel .section-head .actions button.primary,
.asset-manifest-panel .section-head .actions button.primary:hover {
  border-color: rgba(190, 224, 255, 0.58);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.05)),
    #2f9bff;
  color: #f7fbff;
  box-shadow:
    0 14px 36px rgba(47, 155, 255, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

input:focus,
textarea:focus,
select:focus {
  border-color: rgba(98, 183, 255, 0.76);
  box-shadow:
    inset 0 0 0 1px rgba(98, 183, 255, 0.58),
    0 0 0 4px rgba(47, 155, 255, 0.16);
}

.project-home-card,
.project-modal-card,
.empty,
.workspace-controls,
.panel,
.video-workflow > .panel,
.project-card,
.asset-card,
.video-card,
.segment-card,
.asset-style-console,
.asset-upload-form,
.manual-asset-form,
.advanced-video-actions,
.progress-summary,
.status-grid > div,
.job-details,
.relation-map-note,
.asset-empty-state,
.empty-projects,
.relation-empty-map,
.toast,
.lightbox figure,
.auth-card {
  border-color: rgba(150, 196, 255, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.092), rgba(255, 255, 255, 0.024)),
    rgba(10, 24, 46, 0.64);
}

.project-card.active,
.asset-card.is-selected,
.studio-tab-button.is-active,
.studio-rail-button.is-active,
.studio-flow-step.active {
  border-color: rgba(98, 183, 255, 0.58);
  background:
    linear-gradient(180deg, rgba(47, 155, 255, 0.18), rgba(255, 255, 255, 0.03)),
    rgba(10, 32, 64, 0.72);
}

.status-pill.ok,
.pill.ok,
.asset-slot-status.generated,
.studio-flow-step.complete {
  background: rgba(47, 155, 255, 0.1);
  color: #d9ecff;
  box-shadow: inset 0 0 0 1px rgba(47, 155, 255, 0.18);
}

.admin-page {
  min-height: 100vh;
  color: var(--ink);
  font-family:
    ui-sans-serif,
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Text",
    "SF Pro Display",
    "PingFang SC",
    "Microsoft YaHei",
    "Segoe UI",
    sans-serif;
  font-size: 14px;
  letter-spacing: 0;
}

.admin-shell {
  width: min(1440px, calc(100vw - 48px));
  margin: 0 auto;
  padding: 28px 0 44px;
}

.admin-header,
.admin-panel,
.admin-stat {
  border: 1px solid rgba(150, 196, 255, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.025)),
    rgba(10, 24, 46, 0.68);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.24);
}

.admin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-radius: 18px;
  padding: 18px;
}

.admin-page .brand strong {
  color: rgba(247, 251, 255, 0.96);
  font-size: 16px;
  font-weight: 760;
  letter-spacing: 0;
}

.admin-page .brand span {
  color: rgba(216, 229, 249, 0.62);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
}

.admin-actions,
.admin-panel-head,
.admin-row-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-home-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 14px;
  border: 1px solid rgba(150, 196, 255, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.035);
  color: rgba(235, 246, 255, 0.86);
  font-size: 13px;
  font-weight: 650;
  text-decoration: none;
}

.admin-home-link:visited,
.admin-home-link:hover,
.admin-home-link:focus {
  color: rgba(247, 251, 255, 0.96);
  text-decoration: none;
}

.admin-summary {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0;
}

.admin-stat {
  border-radius: 14px;
  padding: 16px;
}

.admin-stat span,
.admin-table td span,
.admin-table td small,
.admin-list-item span {
  display: block;
  color: rgba(216, 229, 249, 0.62);
  font-size: 12px;
}

.admin-stat strong {
  display: block;
  margin-top: 8px;
  font-size: 24px;
  font-weight: 760;
  line-height: 1;
}

.admin-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
  gap: 18px;
}

.admin-panel {
  border-radius: 18px;
  padding: 18px;
}

.admin-panel-wide {
  grid-column: span 1;
}

.admin-panel-head {
  justify-content: space-between;
  margin-bottom: 14px;
}

.admin-panel-head h2 {
  margin: 4px 0 0;
  font-size: 18px;
  font-weight: 760;
  letter-spacing: 0;
}

.admin-table-wrap {
  overflow-x: auto;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 880px;
}

.admin-table th,
.admin-table td {
  border-bottom: 1px solid rgba(150, 196, 255, 0.12);
  padding: 12px 10px;
  text-align: left;
  vertical-align: middle;
}

.admin-table th {
  color: rgba(216, 229, 249, 0.72);
  font-size: 12px;
  font-weight: 700;
}

.admin-table td {
  color: var(--ink);
  font-size: 13px;
}

.admin-table td strong,
.admin-list-item strong {
  display: block;
  font-size: 13px;
  font-weight: 680;
}

.admin-quota-input {
  width: 78px;
  height: 34px;
  border: 1px solid rgba(150, 196, 255, 0.2);
  border-radius: 9px;
  padding: 0 10px;
  background: rgba(5, 10, 19, 0.55);
  color: var(--ink);
}

.admin-row-actions {
  min-width: 238px;
}

.admin-row-actions button,
.admin-list-item button {
  height: 32px;
  border: 1px solid rgba(150, 196, 255, 0.2);
  border-radius: 9px;
  padding: 0 10px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(235, 246, 255, 0.86);
  cursor: pointer;
}

.admin-pill {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  height: 24px;
  border-radius: 999px;
  padding: 0 9px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(216, 229, 249, 0.72) !important;
  box-shadow: inset 0 0 0 1px rgba(150, 196, 255, 0.12);
}

.admin-pill.is-ok,
.admin-pill.is-admin {
  background: rgba(47, 155, 255, 0.16);
  color: #d9ecff !important;
  box-shadow: inset 0 0 0 1px rgba(47, 155, 255, 0.28);
}

.admin-pill.is-disabled {
  background: rgba(255, 255, 255, 0.04);
  color: rgba(216, 229, 249, 0.46) !important;
}

.admin-list {
  display: grid;
  gap: 10px;
  max-height: 460px;
  overflow: auto;
}

.admin-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid rgba(150, 196, 255, 0.12);
  border-radius: 12px;
  padding: 12px;
  background: rgba(6, 14, 27, 0.36);
}

.admin-empty,
.admin-message {
  color: rgba(216, 229, 249, 0.64);
  font-size: 13px;
}

.admin-message {
  min-height: 20px;
  margin: 16px 0 0;
}

.admin-message.is-error {
  color: #ffb3b3;
}

.password-dialog {
  width: min(440px, calc(100vw - 32px));
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--text);
}

.password-dialog::backdrop {
  background: rgba(2, 8, 18, 0.68);
  backdrop-filter: blur(8px);
}

.password-dialog-card {
  display: grid;
  gap: 14px;
  border: 1px solid rgba(150, 196, 255, 0.2);
  border-radius: 18px;
  padding: 20px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03)),
    #081629;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.38);
}

.password-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.password-dialog-head h2 {
  margin: 4px 0 0;
  font-size: 20px;
}

.password-dialog-card label {
  display: grid;
  gap: 7px;
}

.password-dialog-card label span {
  color: rgba(216, 229, 249, 0.76);
  font-size: 13px;
}

.password-dialog-card input {
  height: 42px;
  border: 1px solid rgba(150, 196, 255, 0.2);
  border-radius: 10px;
  padding: 0 12px;
  background: rgba(5, 10, 19, 0.62);
  color: var(--text);
}

.personal-center-profile {
  display: grid;
  gap: 6px;
  padding: 14px;
  border: 1px solid rgba(150, 196, 255, 0.16);
  border-radius: 12px;
  background: rgba(5, 10, 19, 0.42);
}

.personal-center-profile strong {
  color: var(--text);
  font-size: 16px;
}

.personal-center-profile span {
  color: rgba(216, 229, 249, 0.68);
  font-size: 12px;
}

.personal-center-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

@media (max-width: 1080px) {
  .admin-summary,
  .admin-grid {
    grid-template-columns: 1fr 1fr;
  }

  .admin-panel-wide {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  .admin-shell {
    width: min(100vw - 28px, 680px);
  }

  .admin-header,
  .admin-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .admin-summary,
  .admin-grid {
    grid-template-columns: 1fr;
  }
}

/* Storyboard document: a readable 15-second shot sheet, not an editor canvas. */
.storyboard-document {
  --storyboard-ink: #161616;
  --storyboard-rule: rgba(22, 22, 22, .28);
  --storyboard-paper: #f4f3ef;
  display: grid;
  gap: 14px;
  min-width: 0;
  color: var(--storyboard-ink);
}

.storyboard-document-toolbar,
.storyboard-document-sequence-head,
.storyboard-document-selection {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.storyboard-document-context,
.storyboard-document-actions,
.storyboard-document-context {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.storyboard-document-context strong,
.storyboard-document-context span:not(.modern-eyebrow) {
  color: var(--ink);
  white-space: nowrap;
}

.storyboard-document-format {
  padding: 5px 8px;
  border: 1px solid rgba(139, 179, 242, .32);
  border-radius: 6px;
  color: #a9c8f5;
  font: 700 11px/1.1 var(--mono, ui-monospace, monospace);
  letter-spacing: .04em;
}

.storyboard-document-actions button,
.storyboard-document-selection button {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(139, 179, 242, .24);
  border-radius: 7px;
  background: rgba(24, 31, 40, .72);
  color: var(--ink);
  font-weight: 650;
}

.storyboard-document-actions button.is-primary {
  border-color: rgba(215, 77, 96, .72);
  background: #d74d60;
  color: #fff;
}

.storyboard-document-actions button:disabled,
.storyboard-document-selection button:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.storyboard-document-board {
  overflow: hidden;
  border: 1px solid var(--storyboard-rule);
  background: var(--storyboard-paper);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .18);
}

.storyboard-document-footer span,
.storyboard-document-selection span {
  color: rgba(22, 22, 22, .58);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.storyboard-document-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
  background: #d8d7d1;
}

.storyboard-document-shot {
  display: grid;
  grid-template-rows: auto auto 1fr;
  min-width: 0;
  padding: 0;
  border: 1px solid rgba(22, 22, 22, .24);
  border-radius: 0;
  background: var(--storyboard-paper);
  color: var(--storyboard-ink);
  text-align: left;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.storyboard-document-shot:hover,
.storyboard-document-shot.is-active {
  border-color: #111;
  box-shadow: 0 5px 14px rgba(0, 0, 0, .16);
  transform: translateY(-1px);
}

.storyboard-document-shot.is-reused {
  border-color: #5b7598;
  box-shadow: inset 0 0 0 2px rgba(91, 117, 152, .28);
}

.storyboard-document-shot > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 27px;
  padding: 0 8px;
  border-bottom: 1px solid var(--storyboard-rule);
  font: 700 11px/1 var(--mono, ui-monospace, monospace);
}

.storyboard-document-shot > header b {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  margin-left: -5px;
  background: #111;
  color: #fff;
  font-size: 12px;
}

.storyboard-document-shot > header span {
  overflow: hidden;
  color: rgba(22, 22, 22, .7);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.storyboard-document-shot-frame {
  position: relative;
  min-height: 114px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-bottom: 1px solid var(--storyboard-rule);
  background: #e9e8e3;
}

.storyboard-document-shot-frame.has-media {
  background-image: var(--storyboard-board-image);
  background-position: var(--storyboard-board-position);
  background-size: 300% 300%;
  background-repeat: no-repeat;
}

.storyboard-document-shot-frame::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 48%, rgba(22, 22, 22, .08) 49%, transparent 50%), linear-gradient(25deg, transparent 58%, rgba(22, 22, 22, .08) 59%, transparent 60%);
  content: "";
  pointer-events: none;
}

.storyboard-document-shot-frame span {
  position: absolute;
  right: 7px;
  bottom: 6px;
  z-index: 1;
  padding: 3px 5px;
  background: rgba(244, 243, 239, .9);
  color: rgba(22, 22, 22, .72);
  font-size: 10px;
  font-weight: 700;
}

.storyboard-document-shot-copy {
  display: grid;
  align-content: start;
  gap: 4px;
  min-height: 110px;
  padding: 8px;
}

.storyboard-document-shot-copy strong {
  font-size: 12px;
}

.storyboard-document-shot-copy p,
.storyboard-document-shot-copy small {
  margin: 0;
  color: rgba(22, 22, 22, .78);
  font-size: 11px;
  line-height: 1.35;
}

.storyboard-document-shot-copy p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.storyboard-document-footer {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr) minmax(220px, .8fr);
  border-top: 1px solid var(--storyboard-rule);
}

.storyboard-document-footer > div {
  display: grid;
  align-content: start;
  gap: 5px;
  min-width: 0;
  padding: 12px 14px;
  border-right: 1px solid var(--storyboard-rule);
}

.storyboard-document-footer > div:last-child { border-right: 0; }
.storyboard-document-footer p { margin: 0; color: var(--storyboard-ink); font-size: 12px; line-height: 1.45; }
.storyboard-document-continuity strong { color: #315c85; font-size: 12px; line-height: 1.4; }

.storyboard-document-sequence {
  display: grid;
  gap: 10px;
  padding: 12px 0 0;
}

.storyboard-document-sequence-head strong { color: var(--ink); font-size: 13px; }
.storyboard-document-sequence-head > span { color: rgba(232, 238, 246, .62); font-size: 12px; }
.storyboard-document-sequence-track { display: flex; align-items: stretch; gap: 8px; overflow-x: auto; padding-bottom: 2px; }

.storyboard-document-part {
  display: grid;
  flex: 0 0 170px;
  gap: 5px;
  min-height: 72px;
  padding: 9px 10px;
  border: 1px solid rgba(139, 179, 242, .2);
  border-radius: 8px;
  background: rgba(24, 31, 40, .58);
  color: var(--ink);
  text-align: left;
}

.storyboard-document-part.is-current { border-color: #a9c8f5; background: rgba(76, 112, 156, .28); }
.storyboard-document-part.is-complete { border-color: rgba(87, 168, 119, .58); }
.storyboard-document-part header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.storyboard-document-part header b { font: 700 12px/1 var(--mono, ui-monospace, monospace); }
.storyboard-document-part header small { color: rgba(232, 238, 246, .64); font-size: 10px; }
.storyboard-document-part > span { color: rgba(232, 238, 246, .72); font: 600 11px/1.2 var(--mono, ui-monospace, monospace); }
.storyboard-document-part footer { color: rgba(232, 238, 246, .54); font-size: 10px; }
.storyboard-document-sequence-connector { align-self: center; color: rgba(169, 200, 245, .7); font: 700 10px/1 var(--mono, ui-monospace, monospace); white-space: nowrap; }

.storyboard-document-selection {
  padding: 10px 12px;
  border: 1px solid rgba(139, 179, 242, .15);
  border-radius: 8px;
  background: rgba(19, 25, 32, .38);
}

.storyboard-document-selection > div { display: grid; gap: 3px; min-width: 0; }
.storyboard-document-selection strong { color: var(--ink); font-size: 13px; }
.storyboard-document-selection small { overflow: hidden; color: rgba(232, 238, 246, .58); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 900px) {
  .storyboard-document-footer { grid-template-columns: 1fr 1fr; }
  .storyboard-document-footer > div:last-child { grid-column: 1 / -1; border-top: 1px solid var(--storyboard-rule); }
}

@media (max-width: 680px) {
  .storyboard-document-toolbar,
  .storyboard-document-selection { align-items: flex-start; flex-direction: column; }
  .storyboard-document-actions { width: 100%; flex-wrap: wrap; }
  .storyboard-document-actions button.is-primary { margin-left: auto; }
  .storyboard-document-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .storyboard-document-shot-frame { min-height: 90px; }
  .storyboard-document-footer { grid-template-columns: 1fr; }
  .storyboard-document-footer > div,
  .storyboard-document-footer > div:last-child { grid-column: auto; border-right: 0; border-top: 1px solid var(--storyboard-rule); }
  .storyboard-document-footer > div:first-child { border-top: 0; }
}

/* Storyboard workbench v2: match the dark production console, not a paper document. */
.storyboard-document {
  --storyboard-ink: var(--mv-tx);
  --storyboard-muted: var(--mv-mut);
  --storyboard-quiet: var(--mv-qt);
  --storyboard-line: var(--mv-line);
  --storyboard-line-strong: var(--mv-line-2);
  --storyboard-surface: var(--mv-s1);
  --storyboard-surface-2: var(--mv-s2);
  --storyboard-surface-3: var(--mv-s3);
  --storyboard-lime: var(--mv-lime);
  --storyboard-violet: var(--mv-vio);
  color: var(--storyboard-ink);
}
.storyboard-document-toolbar,
.storyboard-document-board,
.storyboard-document-selection {
  border: 1px solid var(--storyboard-line);
  border-radius: var(--mv-r, 8px);
  background: var(--mv-bg);
  box-shadow: var(--mv-hi);
}
.storyboard-document-toolbar {
  min-height: 52px;
  padding: 9px 12px;
}
.storyboard-document-context strong,
.storyboard-document-context span:not(.modern-eyebrow) { color: var(--storyboard-ink); }
.storyboard-document-format {
  border-color: rgba(200, 255, 46, .28);
  border-radius: 4px;
  background: rgba(200, 255, 46, .08);
  color: var(--storyboard-lime);
}
.storyboard-document-actions button,
.storyboard-document-selection button {
  min-height: 30px;
  border-color: var(--storyboard-line-strong);
  border-radius: 6px;
  background: var(--storyboard-surface-2);
  color: var(--storyboard-muted);
  font-size: 11px;
}
.storyboard-document-actions button:hover,
.storyboard-document-selection button:hover,
.storyboard-document-actions button:focus-visible,
.storyboard-document-selection button:focus-visible {
  border-color: var(--storyboard-lime);
  color: var(--storyboard-ink);
  outline: 0;
}
.storyboard-document-actions button.is-primary {
  border-color: transparent;
  background: var(--storyboard-lime);
  color: #0b0b0f;
  box-shadow: 0 4px 16px -6px rgba(200, 255, 46, .7);
}
.storyboard-document-board { overflow: hidden; }
.storyboard-document-footer span,
.storyboard-document-selection span { color: var(--storyboard-quiet); font-family: var(--mono); font-size: 9px; }
.storyboard-document-grid {
  gap: 16px;
  width: min(100%, 1360px);
  margin: 0 auto;
  padding: 22px;
  background: rgba(7, 10, 14, .88);
}
.storyboard-document-shot {
  overflow: hidden;
  border-color: var(--storyboard-line);
  border-radius: 10px;
  background: rgba(19, 25, 33, .98);
  color: var(--storyboard-ink);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .24), inset 0 1px rgba(255,255,255,.025);
}
.storyboard-document-shot:hover,
.storyboard-document-shot.is-active {
  border-color: rgba(200, 255, 46, .72);
  background: rgba(24, 32, 40, .98);
  box-shadow: 0 0 0 2px rgba(200,255,46,.1), 0 16px 32px rgba(0,0,0,.28);
  transform: translateY(-2px);
}
.storyboard-document-shot.is-reused {
  border-color: rgba(164, 126, 255, .62);
  box-shadow: inset 0 0 0 1px rgba(164,126,255,.2);
}
.storyboard-document-shot > header {
  min-height: 30px;
  border-bottom-color: var(--storyboard-line);
  color: var(--storyboard-quiet);
}
.storyboard-document-shot > header b {
  width: 25px;
  height: 25px;
  margin-left: -4px;
  background: var(--storyboard-lime);
  color: #0b0b0f;
  font-family: var(--mono);
  font-size: 11px;
}
.storyboard-document-shot > header span { color: var(--storyboard-lime); font-family: var(--mono); font-size: 10px; }
.storyboard-document-shot-frame {
  min-height: 0;
  aspect-ratio: 16 / 9;
  border-bottom-color: var(--storyboard-line);
  background: #0f151d;
}
.storyboard-document-shot-frame.has-media {
  background-image: var(--storyboard-board-image);
  background-position: var(--storyboard-board-position);
  background-size: 300% 300%;
  background-repeat: no-repeat;
  filter: saturate(.72) contrast(1.04);
}
.storyboard-document-shot-frame.storyboard-document-board-frame.has-media {
  background-position: center;
  background-size: cover;
}
.storyboard-document-shot-frame::after { display: none; }
.storyboard-document-shot-frame span {
  top: 50%;
  right: auto;
  bottom: auto;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid var(--storyboard-line-strong);
  border-radius: 4px;
  background: rgba(11,11,15,.72);
  color: var(--storyboard-muted);
  font-family: var(--mono);
  font-size: 9px;
}
.storyboard-document-shot-frame.has-media span {
  top: auto;
  right: 8px;
  bottom: 7px;
  left: auto;
  transform: none;
}
.storyboard-document-shot-copy {
  min-height: 112px;
  padding: 11px 12px 13px;
  background: rgba(13, 17, 23, .42);
}
.storyboard-document-shot-copy strong { color: var(--storyboard-ink); font-size: 12px; }
.storyboard-document-shot-copy p,
.storyboard-document-shot-copy small { color: var(--storyboard-muted); font-size: 11px; }
.storyboard-document-shot-copy small { font-family: var(--mono); font-size: 10px; }
.storyboard-document-footer { border-top-color: var(--storyboard-line); background: var(--storyboard-surface); }
.storyboard-document-footer > div { border-right-color: var(--storyboard-line); }
.storyboard-document-footer p { color: var(--storyboard-muted); font-size: 11px; }
.storyboard-document-continuity strong { color: var(--storyboard-lime); font-family: var(--mono); font-size: 11px; }
.storyboard-document-sequence { padding-top: 2px; }
.storyboard-document-sequence-head strong { color: var(--storyboard-ink); font-size: 12px; }
.storyboard-document-sequence-head > span { color: var(--storyboard-quiet); font-family: var(--mono); font-size: 10px; }
.storyboard-document-part {
  border-color: var(--storyboard-line);
  border-radius: 6px;
  background: var(--storyboard-surface);
  color: var(--storyboard-muted);
}
.storyboard-document-part.is-current { border-color: var(--storyboard-lime); background: rgba(200,255,46,.08); color: var(--storyboard-ink); }
.storyboard-document-part.is-complete { border-color: rgba(110,231,160,.42); }
.storyboard-document-part header small,
.storyboard-document-part > span,
.storyboard-document-part footer { color: var(--storyboard-quiet); }
.storyboard-document-sequence-connector { color: var(--storyboard-lime); }
.storyboard-document-selection { padding: 9px 12px; background: var(--storyboard-surface); }
.storyboard-document-selection strong { color: var(--storyboard-ink); font-size: 12px; }
.storyboard-document-selection small { color: var(--storyboard-quiet); font-size: 10px; }

@media (max-width: 680px) {
  .storyboard-document-grid { gap: 12px; padding: 14px; }
  .storyboard-document-shot-copy { min-height: 104px; padding: 10px; }
}

@media (max-width: 480px) {
  .storyboard-document-grid { grid-template-columns: 1fr; }
}

/* Storyboard runtime rail: one stable place for submission, phase, PART and recovery. */
.modern-storyboard-run-status {
  display: grid;
  grid-template-columns: minmax(172px, .85fr) minmax(260px, 1.45fr) minmax(180px, .9fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 62px;
  padding: 10px 12px;
  border: 1px solid var(--mv-line);
  border-radius: var(--mv-r, 8px);
  background: var(--mv-s1);
  color: var(--mv-tx);
  box-shadow: var(--mv-hi);
  transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}
.modern-storyboard-run-indicator,
.modern-storyboard-run-current,
.modern-storyboard-run-progress,
.modern-storyboard-run-summary { min-width: 0; }
.modern-storyboard-run-indicator,
.modern-storyboard-run-progress-head { display: flex; align-items: center; gap: 9px; }
.modern-storyboard-run-indicator > div,
.modern-storyboard-run-current,
.modern-storyboard-run-progress,
.modern-storyboard-run-summary { display: grid; gap: 4px; }
.modern-storyboard-run-indicator strong,
.modern-storyboard-run-current strong,
.modern-storyboard-run-summary strong { overflow: hidden; color: var(--mv-tx); font-size: 11px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.modern-storyboard-run-indicator small,
.modern-storyboard-run-current small { overflow: hidden; color: var(--mv-qt); font-size: 10px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.modern-storyboard-run-current .modern-eyebrow,
.modern-storyboard-run-summary-label,
.modern-storyboard-run-progress-head span { color: var(--mv-qt); font: 9px/1 var(--mono, ui-monospace, monospace); letter-spacing: .03em; text-transform: uppercase; }
.modern-storyboard-run-current strong { font: 650 11px/1.2 var(--mono, ui-monospace, monospace); }
.modern-storyboard-run-pulse { width: 9px; height: 9px; flex: none; border: 1px solid rgba(148, 163, 184, .5); border-radius: 50%; background: rgba(148, 163, 184, .65); }
.modern-storyboard-run-status.is-submitting,
.modern-storyboard-run-status.is-queued,
.modern-storyboard-run-status.is-running { border-color: rgba(226, 174, 94, .46); background: rgba(89, 64, 31, .18); }
.modern-storyboard-run-status.is-submitting .modern-storyboard-run-pulse,
.modern-storyboard-run-status.is-queued .modern-storyboard-run-pulse,
.modern-storyboard-run-status.is-running .modern-storyboard-run-pulse { border-color: var(--mv-amb); background: var(--mv-amb); box-shadow: 0 0 0 4px rgba(226, 174, 94, .1); animation: modernStoryboardRunPulse 1.7s ease-in-out infinite; }
.modern-storyboard-run-status.is-complete { border-color: rgba(110, 231, 160, .42); background: rgba(44, 94, 70, .16); }
.modern-storyboard-run-status.is-complete .modern-storyboard-run-pulse { border-color: var(--mv-ok); background: var(--mv-ok); box-shadow: 0 0 0 4px rgba(110, 231, 160, .08); }
.modern-storyboard-run-status.is-failed { border-color: rgba(239, 115, 126, .52); background: rgba(104, 39, 48, .2); }
.modern-storyboard-run-status.is-failed .modern-storyboard-run-pulse { border-color: var(--mv-bad); background: var(--mv-bad); box-shadow: 0 0 0 4px rgba(239, 115, 126, .08); }
.modern-storyboard-run-status.is-failed .modern-storyboard-run-detail { color: #f0a8af; }
.modern-storyboard-run-progress-head { justify-content: space-between; }
.modern-storyboard-run-progress-head strong { color: var(--mv-tx); font: 650 10px/1 var(--mono, ui-monospace, monospace); }
.modern-storyboard-run-meter { height: 5px; overflow: hidden; border-radius: 999px; background: rgba(148, 163, 184, .15); }
.modern-storyboard-run-meter span { display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--mv-lime); box-shadow: 0 0 12px rgba(200, 255, 46, .35); transform: scaleX(0); transform-origin: left center; transition: transform 280ms cubic-bezier(.16, 1, .3, 1), background-color 180ms ease; }
.modern-storyboard-run-status.is-submitting .modern-storyboard-run-meter span,
.modern-storyboard-run-status.is-queued .modern-storyboard-run-meter span,
.modern-storyboard-run-status.is-running .modern-storyboard-run-meter span { background: var(--mv-amb); box-shadow: 0 0 12px rgba(226, 174, 94, .3); }
.modern-storyboard-run-status.is-failed .modern-storyboard-run-meter span { background: var(--mv-bad); box-shadow: 0 0 12px rgba(239, 115, 126, .3); }
.modern-storyboard-run-summary { justify-items: end; }
.modern-storyboard-run-summary strong { font: 650 10px/1.2 var(--mono, ui-monospace, monospace); }
@keyframes modernStoryboardRunPulse {
  0%, 100% { transform: scale(.9); opacity: .72; }
  50% { transform: scale(1.12); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .modern-storyboard-run-status,
  .modern-storyboard-run-meter span { transition: none; }
  .modern-storyboard-run-status.is-submitting .modern-storyboard-run-pulse,
  .modern-storyboard-run-status.is-queued .modern-storyboard-run-pulse,
  .modern-storyboard-run-status.is-running .modern-storyboard-run-pulse { animation: none; }
}
@media (max-width: 760px) {
  .modern-storyboard-run-status { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .modern-storyboard-run-progress { grid-column: 1 / -1; }
  .modern-storyboard-run-summary { justify-items: start; }
}

/* TRIONN-inspired single-screen auth composition. */
body.auth-page {
  height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(circle at 53% 47%, rgba(16, 34, 54, 0.42), transparent 28rem),
    radial-gradient(circle at 22% 20%, rgba(255, 255, 255, 0.035), transparent 16rem),
    #030405;
  color: #f4f4f1;
}

body.auth-page::before {
  opacity: 0.42;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.12) 0.7px, transparent 1px),
    linear-gradient(115deg, transparent 0 48%, rgba(82, 112, 150, 0.16) 48.1% 48.3%, transparent 48.4% 100%);
  background-size: 46px 46px, 100% 100%;
}

.auth-page .auth-shell {
  position: relative;
  display: block;
  width: 100%;
  height: 100vh;
  min-height: 0;
  padding: clamp(18px, 2.2vw, 34px);
  overflow: hidden;
  isolation: isolate;
}

.auth-orbit-lines {
  position: absolute;
  inset: -12vh -8vw;
  z-index: -1;
  pointer-events: none;
}

.auth-orbit-lines span {
  position: absolute;
  left: -10%;
  width: 130%;
  height: 38vh;
  border-top: 1px solid rgba(116, 144, 178, 0.12);
  border-radius: 50%;
  transform: rotate(-11deg);
}

.auth-orbit-lines span:nth-child(1) {
  top: 17%;
}

.auth-orbit-lines span:nth-child(2) {
  top: 34%;
  transform: rotate(-18deg);
}

.auth-orbit-lines span:nth-child(3) {
  top: 57%;
  transform: rotate(-7deg);
}

.auth-page .auth-topbar,
.auth-footer {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.auth-page .auth-topbar {
  gap: 24px;
}

.auth-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: rgba(245, 246, 242, 0.92);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  text-decoration: none;
}

.auth-top-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: rgba(245, 246, 242, 0.62);
  font-size: 11px;
  font-weight: 700;
}

.auth-menu-dot {
  height: 28px;
  border: 1px solid rgba(245, 246, 242, 0.22);
  border-radius: 999px;
  padding: 0 12px;
  background: rgba(255, 255, 255, 0.03);
  color: rgba(245, 246, 242, 0.78);
  font-size: 11px;
}

.auth-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr) minmax(0, 0.7fr);
  align-items: center;
  gap: clamp(10px, 2.4vw, 44px);
  height: calc(100vh - clamp(110px, 13vh, 150px));
}

.auth-copy {
  z-index: 2;
  align-self: center;
  min-width: 0;
}

.auth-kicker {
  margin: 0 0 18px;
  color: rgba(245, 246, 242, 0.54);
  font-size: 11px;
  font-weight: 800;
}

.auth-copy h1 {
  max-width: 560px;
  margin: 0;
  color: rgba(245, 246, 242, 0.94);
  font-size: clamp(40px, 5.4vw, 112px);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: 0;
  overflow-wrap: break-word;
}

.auth-lead {
  width: min(340px, 90%);
  margin: 28px 0 0;
  color: rgba(245, 246, 242, 0.56);
  font-size: 14px;
  line-height: 1.45;
}

.auth-infinity-stage {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  min-width: 0;
  perspective: 1100px;
  transform-style: preserve-3d;
  overflow: visible;
}

.auth-infinity-canvas {
  width: min(100%, 540px);
  aspect-ratio: 1 / 1;
  height: auto;
  display: block;
  overflow: visible;
}

.auth-infinity-shadow {
  display: none;
}

@keyframes authInfinitySpin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.auth-page .auth-card {
  z-index: 2;
  justify-self: end;
  width: min(360px, 100%);
  border: 1px solid rgba(245, 246, 242, 0.11);
  border-radius: 16px;
  padding: clamp(17px, 1.8vw, 22px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
    rgba(7, 9, 12, 0.54);
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.48),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px);
}

.auth-page .auth-brand {
  margin-bottom: 18px;
}

.auth-page .auth-brand strong {
  color: rgba(245, 246, 242, 0.92);
  font-size: 22px;
}

.auth-page .auth-brand span {
  color: rgba(245, 246, 242, 0.48);
}

.auth-page .auth-tabs {
  border: 1px solid rgba(245, 246, 242, 0.12);
  border-radius: 999px;
  padding: 4px;
  background: rgba(255, 255, 255, 0.035);
}

.auth-page .auth-tabs button {
  height: 34px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(245, 246, 242, 0.54);
}

.auth-page .auth-tabs button.is-active {
  background: rgba(245, 246, 242, 0.92);
  color: #070809;
  box-shadow: none;
}

.auth-page .auth-form {
  gap: 12px;
}

.auth-page .auth-form label {
  gap: 6px;
}

.auth-page .auth-form label span {
  color: rgba(245, 246, 242, 0.56);
  font-size: 12px;
}

.auth-page .auth-form input {
  height: 40px;
  border-color: rgba(245, 246, 242, 0.13);
  border-radius: 999px;
  padding: 0 14px;
  background: rgba(255, 255, 255, 0.045);
  color: rgba(245, 246, 242, 0.94);
}

.auth-page .auth-form input:focus {
  border-color: rgba(245, 246, 242, 0.38);
  box-shadow: 0 0 0 4px rgba(245, 246, 242, 0.07);
}

.auth-page .auth-form button.primary {
  height: 42px;
  border-color: rgba(245, 246, 242, 0.82);
  border-radius: 999px;
  background: #f5f6f2;
  color: #060708;
  box-shadow: 0 14px 34px rgba(255, 255, 255, 0.12);
}

.auth-page .auth-message {
  min-height: 18px;
  color: rgba(245, 246, 242, 0.58);
  font-size: 12px;
}

.auth-footer {
  position: absolute;
  right: clamp(18px, 2.2vw, 34px);
  bottom: clamp(18px, 2.2vw, 34px);
  left: clamp(18px, 2.2vw, 34px);
  color: rgba(245, 246, 242, 0.48);
  font-size: 12px;
}

@media (max-width: 980px) {
  .auth-hero {
    grid-template-columns: 1fr minmax(320px, 390px);
  }

  .auth-infinity-stage {
    position: absolute;
    inset: 10% 18% auto auto;
    width: 54vw;
    opacity: 0.85;
  }

  .auth-page .auth-card {
    grid-column: 2;
  }
}

@media (max-width: 720px) {
  .auth-page .auth-shell {
    padding: 16px;
  }

  .auth-top-actions {
    display: none;
  }

  .auth-hero {
    display: grid;
    grid-template-columns: 1fr;
    align-content: center;
    height: calc(100vh - 84px);
  }

  .auth-copy h1 {
    font-size: clamp(42px, 13vw, 64px);
  }

  .auth-lead {
    display: none;
  }

  .auth-infinity-stage {
    inset: 16% -8% auto auto;
    width: 82vw;
  }

  .auth-page .auth-card {
    width: 100%;
    justify-self: stretch;
    margin-top: 18px;
  }

  .auth-footer {
    display: none;
  }
}

/* Default compact production UI. Advanced controls remain in the DOM for later re-enable. */
body:not(.show-advanced-ui) .studio-sidebar-nav [data-studio-tab="logs"],
body:not(.show-advanced-ui) .studio-tabbar [data-studio-tab="logs"],
body:not(.show-advanced-ui) .workspace-controls,
body:not(.show-advanced-ui) .studio-console-head p,
body:not(.show-advanced-ui) .studio-console-actions,
body:not(.show-advanced-ui) #scriptPath,
body:not(.show-advanced-ui) .analyzer-segmented,
body:not(.show-advanced-ui) [data-save],
body:not(.show-advanced-ui) #assetManifestText,
body:not(.show-advanced-ui) #storyboardUploadForm,
body:not(.show-advanced-ui) #refreshState,
body:not(.show-advanced-ui) #refreshStoryboards,
body:not(.show-advanced-ui) #videoConfigStatus,
body:not(.show-advanced-ui) .config-store {
  display: none !important;
}

body:not(.show-advanced-ui) .studio-topbar {
  min-height: 64px;
}

body:not(.show-advanced-ui) .studio-console-grid {
  grid-template-columns: minmax(0, 1fr);
}

body:not(.show-advanced-ui) .asset-manifest-panel {
  display: none;
}

/* Explore UI is local-feature-flagged; legacy production home remains available. */
:root {
  --explore-bg: #080d14;
  --explore-canvas: #0c1523;
  --explore-surface: #121b29;
  --explore-blue: #2d8cff;
  --explore-action: #a8ff36;
  --explore-ready: #43dd79;
  --explore-text: #edf4fc;
  --explore-muted: #7f90a7;
  --explore-line: #26364d;
}

body.is-explore-ui {
  background: var(--explore-bg);
  color: var(--explore-text);
}

.explore-home {
  min-height: 100vh;
  background: var(--explore-bg);
  color: var(--explore-text);
}

.explore-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  height: 48px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 18px;
  border-bottom: 1px solid var(--explore-line);
  background: #070b10;
}

.explore-topbar nav,
.explore-account-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.explore-topbar nav {
  min-width: 0;
  overflow-x: auto;
}

.explore-account-actions {
  margin-left: auto;
  position: relative;
}

.explore-brand,
.explore-topbar nav > button,
.explore-account-actions > button {
  min-height: 32px;
  border: 0;
  padding: 0 10px;
  background: transparent;
  color: var(--explore-muted);
}

.explore-account-actions > .explore-account-link {
  min-height: 32px;
  border: 0;
  padding: 0 10px;
  background: transparent;
  color: var(--explore-muted);
}

.explore-account-link {
  display: inline-flex;
  align-items: center;
  color: var(--explore-action) !important;
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.explore-account-actions > .explore-register-link {
  min-height: 28px;
  padding: 0 12px;
  border: 1px solid rgba(168, 255, 54, 0.62);
  border-radius: 6px;
  background: var(--explore-action);
  color: #07110b !important;
}

.explore-brand:hover,
.explore-brand.is-active,
.explore-topbar nav > button:hover,
.explore-topbar nav > button.is-active,
.explore-account-actions > button:hover,
.explore-account-actions > button.is-active {
  color: var(--explore-text);
  background: #121b29;
}

.explore-account-actions > .explore-account-link:hover,
.explore-account-actions > .explore-account-link:focus-visible {
  color: var(--explore-text);
  background: #121b29;
}

.explore-account-actions > .explore-register-link:hover,
.explore-account-actions > .explore-register-link:focus-visible {
  background: #c1ff6a;
  color: #07110b !important;
}

.explore-topbar .explore-brand {
  padding-left: 0;
  color: var(--explore-action);
  font-weight: 800;
}

.explore-brand .explore-brand-mark {
  display: block;
  width: 96px;
  height: auto;
  aspect-ratio: 960 / 165;
  flex: 0 0 96px;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
  overflow: visible;
}

.explore-main {
  width: min(1500px, calc(100% - 36px));
  margin: 0 auto;
  padding: 18px 0 42px;
}

.explore-feature-grid {
  display: grid;
  grid-template-columns: 1.45fr 1fr 1fr;
  gap: 10px;
}

.explore-feature,
.explore-tool-grid button,
.explore-project-card,
.explore-project-new {
  min-width: 0;
  border: 1px solid var(--explore-line);
  border-radius: 7px;
  background: var(--explore-surface);
  color: var(--explore-text);
  text-align: left;
}

.explore-feature {
  min-height: 160px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 7px;
  padding: 20px;
}

.explore-feature span,
.explore-tool-grid span,
.explore-project-card span {
  color: var(--explore-blue);
  font-size: 10px;
  text-transform: uppercase;
}

.explore-feature strong {
  font-size: 22px;
}

.explore-feature small,
.explore-tool-grid small,
.explore-project-card small {
  color: var(--explore-muted);
}

.explore-feature-primary {
  border-color: var(--explore-blue);
  background-color: #102850;
  background-image: radial-gradient(#31537b 1px, transparent 1px);
  background-size: 14px 14px;
}

.explore-tools,
.explore-productions {
  margin-top: 24px;
}

.explore-section-head {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.explore-section-head h2 {
  margin: 0;
  font-size: 16px;
}

.explore-section-head input {
  width: min(280px, 45vw);
  height: 34px;
  border: 1px solid var(--explore-line);
  border-radius: 6px;
  padding: 0 10px;
  background: #0d151f;
  color: var(--explore-text);
}

.explore-tool-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.explore-tool-grid button {
  min-height: 116px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 16px;
}

.explore-tool-grid strong,
.explore-project-card strong,
.explore-project-new strong {
  display: block;
  font-size: 14px;
}

.explore-project-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.explore-project-card,
.explore-project-new {
  min-height: 112px;
  padding: 16px;
}

.explore-project-new span {
  display: block;
  margin-bottom: 12px;
  color: var(--explore-action);
  font-size: 22px;
}

@media (max-width: 900px) {
  .explore-feature-grid {
    grid-template-columns: 1fr 1fr;
  }

  .explore-feature-primary {
    grid-column: 1 / -1;
  }

  .explore-tool-grid,
  .explore-project-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .explore-topbar {
    gap: 8px;
    padding: 0 10px;
  }

  .explore-account-actions > span {
    display: none;
  }

  .explore-main {
    width: min(100% - 20px, 1500px);
  }

  .explore-feature-grid,
  .explore-tool-grid,
  .explore-project-grid {
    grid-template-columns: 1fr;
  }

  .explore-feature-primary {
    grid-column: auto;
  }
}

/* Canvas-first Explore home. */
.video-showcase {
  width: min(1500px, calc(100% - 36px));
  margin: 0 auto;
  padding: 22px 0 8px;
  display: grid;
  grid-template-columns: minmax(220px, 0.62fr) minmax(0, 1.8fr);
  grid-template-rows: auto 1fr;
  gap: 12px 18px;
}

.video-showcase-lead {
  align-self: end;
  padding: 0 0 4px;
}

.video-showcase-kicker,
.video-slot-index {
  color: var(--explore-action);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.video-showcase-lead h1 {
  max-width: 9ch;
  margin: 8px 0 10px;
  color: #f4f7fb;
  font-size: clamp(30px, 4.1vw, 64px);
  line-height: 0.98;
  letter-spacing: -0.02em;
}

.video-showcase-lead p {
  margin: 0;
  color: var(--explore-muted);
  font-size: 12px;
}

.video-showcase-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.video-slot {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(117, 151, 192, 0.24);
  border-radius: 7px;
  background: #111b29;
}

.video-showcase-hero {
  grid-column: 2;
  grid-row: 1 / span 2;
  min-height: 360px;
}

.video-slot-card {
  aspect-ratio: 16 / 9;
}

.video-slot::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(137, 176, 220, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(137, 176, 220, 0.08) 1px, transparent 1px);
  background-size: 42px 42px;
  opacity: 0.7;
}

.video-slot::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(168, 255, 54, 0.16);
  pointer-events: none;
}

.video-slot-placeholder {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 5px;
  padding: 18px;
  background: linear-gradient(180deg, transparent 28%, rgba(5, 10, 16, 0.82) 100%);
}

.video-slot-placeholder strong {
  color: #eef5ff;
  font-size: 13px;
  font-weight: 650;
}

.video-slot-placeholder small {
  color: #7f90a7;
  font-size: 10px;
}

.video-slot-status {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  border: 1px solid rgba(168, 255, 54, 0.34);
  border-radius: 999px;
  padding: 4px 7px;
  color: var(--explore-action);
  font-size: 9px;
  line-height: 1;
}

.video-slot > video,
.video-slot > img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.video-slot.is-ready .video-slot-placeholder,
.video-slot.is-ready .video-slot-status {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 900px) {
  .video-showcase {
    grid-template-columns: 1fr;
  }

  .video-showcase-lead {
    padding-top: 4px;
  }

  .video-showcase-lead h1 {
    max-width: 12ch;
  }

  .video-showcase-hero {
    grid-column: auto;
    grid-row: auto;
    min-height: 0;
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 640px) {
  .video-showcase {
    width: min(100% - 20px, 1500px);
    padding-top: 16px;
  }

  .video-showcase-grid {
    grid-template-columns: 1fr;
  }

  .video-showcase-lead h1 {
    max-width: 10ch;
    font-size: 36px;
  }
}

/* Six-up video wall: the media carries the page, so the slots stay text-free. */
.video-showcase-six {
  display: block;
  width: min(1500px, calc(100% - 36px));
  margin: 0 auto;
  padding: 22px 0 8px;
}

.video-showcase-grid-six {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.video-showcase-grid-six .video-slot-card {
  aspect-ratio: 16 / 9;
}

.video-showcase-grid-six .video-slot-card:empty {
  background:
    linear-gradient(rgba(137, 176, 220, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(137, 176, 220, 0.05) 1px, transparent 1px),
    #111b29;
  background-size: 42px 42px;
}

.video-showcase-grid-six .video-slot > video {
  z-index: 1;
  object-fit: cover;
  background: #0b1119;
}

@media (max-width: 900px) {
  .video-showcase-grid-six {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .video-showcase-six {
    width: min(100% - 20px, 1500px);
    padding-top: 16px;
  }

  .video-showcase-grid-six {
    grid-template-columns: 1fr;
  }
}

/* Explore owns document scrolling; the studio shell keeps its fixed workspace layout. */
body.is-explore-ui {
  overflow-x: hidden;
  overflow-y: auto;
}

body.is-explore-ui #app {
  height: auto;
  min-height: 100dvh;
  max-height: none;
  overflow: visible;
}

body.is-explore-ui .explore-home,
body.is-explore-ui .explore-main,
body.is-explore-ui .explore-canvas-library {
  overflow: visible;
}

body.is-explore-ui .explore-home {
  min-height: 100dvh;
}

body.is-explore-ui .explore-canvas-library {
  padding-bottom: 48px;
}

.explore-home {
  min-height: 100vh;
  overflow-x: hidden;
  background: #080d14;
}

.explore-topbar {
  height: 44px;
  gap: 12px;
  padding: 0 12px;
  border-bottom-color: rgba(117, 151, 192, 0.18);
  background: #070b11;
}

.explore-topbar .explore-brand {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 0;
  color: #eef5ff;
}

.explore-brand > span:not(.explore-brand-mark) {
  font-size: 12px;
  font-weight: 800;
}

.explore-topbar nav {
  gap: 0;
}

.explore-topbar nav > button {
  min-height: 43px;
  border-radius: 0;
  padding: 0 8px;
  font-size: 11px;
  white-space: nowrap;
}

.explore-topbar nav > button:hover {
  background: transparent;
  color: #dce8f7;
}

.explore-topbar nav > button.is-active {
  background: transparent;
  color: var(--explore-action);
}

.explore-account-actions > button {
  width: 30px;
  min-height: 30px;
  padding: 0;
}

.explore-account-actions #exploreTeamButton {
  width: auto;
  min-width: 42px;
  padding: 0 7px;
  font-size: 10px;
}

.team-panel {
  position: absolute;
  top: 38px;
  right: 0;
  z-index: 80;
  width: min(360px, calc(100vw - 24px));
  max-height: min(620px, calc(100vh - 58px));
  overflow-y: auto;
  border: 1px solid rgba(117, 151, 192, 0.22);
  border-radius: 6px;
  padding: 12px;
  background: #0c131d;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.38);
  color: #e8f1fc;
}

.team-panel > header,
.team-summary-row,
.team-member-row,
.team-invite-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.team-panel > header {
  min-height: 30px;
  margin-bottom: 10px;
}

.team-panel > header button,
.team-member-actions button,
.explore-card-actions button {
  width: 28px;
  min-height: 28px;
  padding: 0;
}

#teamEmptyState,
#teamMemberState,
#teamProjectProgress,
#teamMemberList,
#teamOwnerControls {
  display: grid;
  gap: 8px;
}

#teamEmptyState form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
}

#teamEmptyState input {
  min-width: 0;
  height: 32px;
  border: 1px solid rgba(117, 151, 192, 0.2);
  border-radius: 5px;
  padding: 0 9px;
  background: #080e16;
  color: #e8f1fc;
}

#teamProjectProgress {
  margin-top: 10px;
}

.team-progress-item {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: stretch;
  gap: 7px;
  border: 1px solid rgba(117, 151, 192, 0.14);
  border-radius: 5px;
  padding: 9px;
  background: #101925;
  text-align: left;
  white-space: normal;
}

.team-progress-heading {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.team-progress-heading strong {
  min-width: 0;
  overflow: hidden;
  color: #e8f1fc;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-progress-heading small {
  flex-shrink: 0;
  border: 1px solid rgba(83, 158, 255, 0.34);
  border-radius: 4px;
  padding: 2px 5px;
  color: #5fa8ff;
  font-size: 10px;
  font-weight: 650;
  white-space: nowrap;
}

.team-progress-rail {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3px;
}

.team-progress-rail > span {
  min-width: 0;
  overflow: hidden;
  border-top: 2px solid rgba(117, 151, 192, 0.2);
  padding-top: 4px;
  color: #74859c;
  font-size: 10px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-progress-rail > span.is-complete {
  border-color: #34d67f;
  color: #34d67f;
}

.team-progress-rail > span.is-current {
  border-color: #5fa8ff;
  color: #5fa8ff;
}

.team-progress-counts,
.team-progress-editor {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  color: #74859c;
  font-size: 10px;
  line-height: 1.35;
  white-space: normal;
}

.team-progress-attention {
  min-width: 0;
  color: #f5c56f;
  font-size: 10px;
  line-height: 1.35;
  overflow-wrap: anywhere;
  white-space: normal;
}

.team-member-row small,
.team-panel-empty,
.team-invite-controls span {
  color: #74859c;
  font-size: 10px;
}

.team-member-row {
  min-height: 40px;
  border-bottom: 1px solid rgba(117, 151, 192, 0.1);
}

.team-member-row > span:first-child {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.team-member-actions {
  display: flex;
  gap: 3px;
}

.team-invite-controls {
  flex-wrap: wrap;
  margin-top: 6px;
}

.team-invite-controls code {
  padding: 5px 7px;
  border: 1px solid rgba(80, 211, 151, 0.28);
  border-radius: 4px;
  color: #7ee8ad;
  background: #09150f;
}

.canvas-home.explore-main {
  width: 100%;
  margin: 0;
  padding: 0 0 42px;
}

.explore-canvas-library {
  width: min(980px, calc(100% - 32px));
  margin: 0 auto;
  padding-top: 18px;
}

.explore-canvas-toolbar {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.explore-canvas-filters {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border-radius: 999px;
  padding: 3px;
  background: #111a27;
}

.explore-canvas-filters button {
  min-height: 28px;
  border: 0;
  border-radius: 999px;
  padding: 0 11px;
  background: transparent;
  color: #8090a5;
  font-size: 10px;
}

.explore-canvas-filters button.is-active {
  background: #273140;
  color: #eef5ff;
}

.explore-canvas-toolbar input {
  width: 160px;
  height: 30px;
  border: 1px solid rgba(121, 155, 199, 0.18);
  border-radius: 999px;
  padding: 0 12px;
  background: #0d141f;
  color: #e8f1fc;
}

.explore-canvas-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.explore-canvas-card {
  position: relative;
  min-width: 0;
  display: grid;
  gap: 5px;
  border: 0;
  padding: 0;
  background: transparent;
  color: #edf4fc;
  text-align: left;
}

.explore-canvas-card-open {
  min-width: 0;
  display: grid;
  gap: 5px;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}

.explore-canvas-preview {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(117, 151, 192, 0.16);
  border-radius: 6px;
  background-color: #141e2d;
  background-image: radial-gradient(rgba(103, 139, 187, 0.17) 0.7px, transparent 0.7px);
  background-size: 13px 13px;
}

.explore-canvas-card:hover .explore-canvas-preview,
.explore-canvas-card:focus-visible .explore-canvas-preview {
  border-color: var(--explore-blue);
}

.explore-canvas-preview img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.explore-production-preview video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.explore-production-preview video.is-broken {
  display: none;
}

.explore-production-preview img {
  opacity: 0.45;
}

.explore-production-preview > span {
  position: absolute;
  color: #b8c8dc;
  font-size: 10px;
}

.explore-canvas-plus {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(207, 221, 238, 0.32);
  border-radius: 50%;
  color: #dce8f6;
  font-size: 18px;
}

.explore-canvas-node-count {
  color: #71839b;
  font-size: 11px;
}

.explore-canvas-card > strong,
.explore-canvas-card-open > strong {
  overflow: hidden;
  padding: 0 3px;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.explore-canvas-card > small,
.explore-canvas-card-open > small,
.explore-canvas-empty {
  padding: 0 3px;
  color: #627188;
  font-size: 10px;
}

.image-explore-view {
  min-height: calc(100vh - 44px);
  padding: 24px 24px 250px;
  background: #090e15;
}

.image-explore-head {
  width: min(1260px, 100%);
  min-height: 58px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin: 0 auto 18px;
}

.image-explore-kicker {
  color: var(--explore-action);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.image-explore-head h1 {
  margin: 4px 0 3px;
  color: #f4f7fb;
  font-size: clamp(22px, 3vw, 34px);
  line-height: 1.05;
}

.image-explore-head p {
  margin: 0;
  color: #73839a;
  font-size: 11px;
}

.image-explore-clear {
  min-height: 30px;
  border: 1px solid rgba(117, 151, 192, 0.2);
  border-radius: 5px;
  padding: 0 10px;
  background: #101925;
  color: #9aabc0;
  font-size: 10px;
}

.image-explore-gallery {
  width: min(1260px, 100%);
  min-height: 260px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-content: start;
  gap: 12px;
  margin: 0 auto;
}

.image-explore-card {
  min-width: 0;
  display: grid;
  gap: 7px;
}

.image-explore-card-preview {
  position: relative;
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(117, 151, 192, 0.16);
  border-radius: 5px;
  background: #111b29;
}

.image-explore-card-preview img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.image-explore-card-preview > button {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  min-height: 28px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 7px;
  background: rgba(7, 11, 16, 0.76);
  color: #e9f1fb;
  font-size: 0;
  line-height: 1;
  opacity: 0;
  transform: scale(0.92);
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease, opacity 150ms ease, transform 150ms ease;
}

.image-explore-card-preview > button::before {
  content: "×";
  font-size: 21px;
  font-weight: 400;
  line-height: 1;
}

.image-explore-card:hover .image-explore-card-preview > button,
.image-explore-card:focus-within .image-explore-card-preview > button {
  opacity: 1;
  transform: scale(1);
}

.image-explore-card-preview > button:hover,
.image-explore-card-preview > button:focus-visible {
  border-color: rgba(255, 126, 143, 0.86);
  background: rgba(106, 28, 44, 0.9);
  color: #fff;
}

/* regen-icon */
.image-explore-card-preview > button[data-image-regenerate] {
  right: 44px;
}
.image-explore-card-preview > button[data-image-regenerate]::before {
  content: "\21BB";
  font-size: 17px;
  font-weight: 500;
}
.image-explore-card-preview > button[data-image-regenerate]:hover,
.image-explore-card-preview > button[data-image-regenerate]:focus-visible {
  border-color: rgba(126, 220, 143, 0.86);
  background: rgba(24, 104, 58, 0.9);
  color: #fff;
}

.image-explore-card-preview > button[data-image-reference-add] {
  right: 80px;
  width: auto;
  min-width: 76px;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.image-explore-card-preview > button[data-image-reference-add]::before {
  content: none;
}

.image-explore-card-preview > button[data-image-reference-add]:hover,
.image-explore-card-preview > button[data-image-reference-add]:focus-visible {
  border-color: rgba(101, 169, 255, 0.9);
  background: rgba(23, 76, 133, 0.92);
  color: #fff;
}

.image-explore-card.is-running .image-explore-card-preview {
  border-color: rgba(168, 255, 54, 0.36);
}

.image-explore-card.is-failed .image-explore-card-preview {
  border-color: rgba(255, 111, 111, 0.3);
  color: #f29393;
}

.image-explore-card.is-failed .image-explore-card-preview small {
  max-width: 80%;
  color: #c48282;
  font-size: 10px;
  text-align: center;
}

.image-explore-loader {
  width: 28px;
  height: 28px;
  border: 2px solid rgba(168, 255, 54, 0.22);
  border-top-color: var(--explore-action);
  border-radius: 50%;
  animation: image-explore-spin 0.9s linear infinite;
}

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

.image-explore-empty {
  width: min(520px, 100%);
  min-height: 180px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 6px;
  margin: 56px auto 0;
  border: 1px dashed rgba(117, 151, 192, 0.25);
  border-radius: 6px;
  color: #b9c8db;
  text-align: center;
}

.image-explore-empty span {
  color: #6d7e96;
  font-size: 11px;
}

.image-explore-composer {
  position: fixed;
  left: 50%;
  bottom: 18px;
  z-index: 30;
  width: min(940px, calc(100vw - 36px));
  display: grid;
  gap: 14px;
  margin: 0;
  transform: translateX(-50%);
  border: 1px solid rgba(255, 255, 255, 0.08); /* frosted-composer */
  border-radius: 16px;
  padding: 12px;
  background: rgba(17, 22, 28, 0.66);
  backdrop-filter: blur(22px) saturate(1.15);
  -webkit-backdrop-filter: blur(22px) saturate(1.15);
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.44), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.image-explore-prompt-row {
  min-width: 0;
  min-height: 86px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px;
  border: none;
  border-radius: 12px;
  background: transparent;
}

.image-explore-attach {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.04);
  color: #dce8f7;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
}

.image-explore-attach input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.image-explore-reference-list {
  display: flex;
  align-items: center;
  gap: 5px;
}

.image-explore-reference {
  position: relative;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  display: block;
}

.image-explore-reference img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 4px;
  object-fit: cover;
}

.image-explore-reference.is-uploading img {
  opacity: .5;
}

.image-explore-reference-loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 4px;
  background: rgb(8 13 20 / 32%);
}

.image-explore-reference-loading::after {
  width: 12px;
  height: 12px;
  border: 2px solid rgb(255 255 255 / 40%);
  border-top-color: #65a9ff;
  border-radius: 50%;
  content: "";
  animation: image-reference-spin .7s linear infinite;
}

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

.image-explore-reference button {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 16px;
  min-height: 16px;
  border: 1px solid #171c20;
  border-radius: 50%;
  padding: 0;
  background: #68798d;
  color: #fff;
  font-size: 11px;
  line-height: 1;
}

.image-explore-prompt-row textarea {
  min-width: 0;
  flex: 1 1 auto;
  max-width: none;
  min-height: 68px;
  box-sizing: border-box;
  resize: none;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 11px;
  box-shadow: none;
  outline: 0;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.04);
  color: #f1f5fa;
  font: inherit;
  font-size: 13px;
}

.image-explore-prompt-row textarea:focus,
.image-explore-prompt-row textarea:focus-visible {
  border-color: rgba(91, 167, 255, 0.84);
  box-shadow: 0 0 0 3px rgba(45, 140, 255, 0.18);
  outline: 0;
}

.image-explore-prompt-row textarea::placeholder {
  color: #788493;
}

.image-explore-storyboard-bar {
  min-width: 0;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
}

.image-explore-storyboard-toggle {
  width: 92px;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 9px;
  padding: 0 11px;
  background: rgba(255, 255, 255, 0.04);
  color: #aebdce;
  font-size: 10px;
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}

.image-explore-storyboard-toggle > span:first-child {
  color: #91a6bd;
  font-size: 16px;
  line-height: 1;
}

.image-explore-storyboard-toggle:hover,
.image-explore-storyboard-toggle:focus-visible,
.image-explore-storyboard-toggle.is-active {
  border-color: rgba(168, 255, 54, 0.56);
  background: rgba(168, 255, 54, 0.11);
  color: #ddffae;
  outline: none;
}

.image-explore-storyboard-options {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.image-explore-storyboard-count {
  min-height: 28px;
  padding: 0 8px;
}

.image-explore-storyboard-count select {
  max-width: 58px;
}

.image-explore-control-row {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: nowrap;
}

.image-explore-control,
.image-explore-count {
  flex: 0 0 auto;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 11px;
  padding: 0 8px;
  background: rgba(255, 255, 255, 0.04);
  color: #c8d3df;
  font-size: 10px;
}

.image-explore-control span,
.image-explore-count > span {
  flex: 0 0 auto;
  white-space: nowrap;
  color: #7f90a6;
}

.image-explore-model {
  width: 172px;
  min-width: 172px;
}

.image-explore-resolution {
  width: 92px;
  min-width: 92px;
}

.image-explore-ratio {
  width: 150px;
  min-width: 150px;
}

.image-explore-control select {
  width: auto;
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
  border: 0;
  outline: 0;
  background: transparent;
  color: #edf4fc;
  font: inherit;
}

.image-explore-count button {
  width: 21px;
  min-height: 22px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #dce8f7;
}

.image-explore-count output {
  min-width: 16px;
  color: #f1f6fc;
  text-align: center;
}

.image-explore-count {
  width: 92px;
  min-width: 92px;
  justify-content: space-between;
}

.image-explore-model select {
  width: 120px;
}

.image-explore-ratio select {
  width: 68px;
}

.image-explore-resolution select {
  width: 38px;
}

.image-explore-status {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  color: #8899ac;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.image-explore-storyboard-card {
  align-content: start;
}

.image-explore-storyboard-preview {
  aspect-ratio: 16 / 9;
}

.image-explore-storyboard-preview img {
  object-fit: contain;
  background: #07101e;
}

.image-explore-storyboard-preview small {
  color: #93a5ba;
  font-size: 10px;
}

.image-explore-storyboard-caption {
  display: grid;
  gap: 4px;
  padding: 1px 2px 0;
}

.image-explore-storyboard-caption strong {
  color: #e8f0fa;
  font-size: 11px;
}

.image-explore-storyboard-caption > span,
.image-explore-storyboard-caption > p,
.image-explore-storyboard-continuity-detail {
  color: #7f90a6;
  font-size: 10px;
  line-height: 1.4;
}

.image-explore-storyboard-caption p {
  margin: 0;
  overflow-wrap: anywhere;
}

.image-explore-storyboard-details {
  margin-top: 3px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 5px;
}

.image-explore-storyboard-details summary {
  cursor: pointer;
  color: #aac7e7;
  font-size: 10px;
}

.image-explore-storyboard-panels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  margin-top: 7px;
}

.image-explore-storyboard-panel {
  min-width: 0;
  display: grid;
  gap: 3px;
  border: 1px solid rgba(117, 151, 192, 0.14);
  border-radius: 5px;
  padding: 5px;
  background: rgba(255, 255, 255, 0.035);
}

.image-explore-storyboard-panel strong {
  color: #d7e5f4;
  font-size: 9px;
}

.image-explore-storyboard-panel span,
.image-explore-storyboard-panel small {
  color: #8496aa;
  font-size: 9px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.image-explore-storyboard-continuity-detail {
  display: block;
  margin-top: 7px;
}

.image-explore-generate {
  flex: 0 0 auto;
  min-width: 132px;
  min-height: 38px;
  border: 0;
  border-radius: 6px;
  padding: 0 18px;
  background: var(--explore-action);
  color: #111a0b;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.image-explore-generate:not(:disabled):hover,
.image-explore-generate:not(:disabled):focus-visible {
  border: 1px solid rgba(218, 255, 170, 0.96);
  background: #baff64;
  color: #071006;
  box-shadow:
    0 0 0 2px rgba(168, 255, 54, 0.22),
    0 8px 24px rgba(168, 255, 54, 0.24);
}

.image-explore-generate:disabled {
  cursor: wait;
  opacity: 0.55;
}

.asset-library-view {
  min-height: calc(100vh - 44px);
  padding: 24px 24px 80px;
  background: #090e15;
}

.asset-library-view-head {
  width: min(1260px, 100%);
  min-height: 58px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin: 0 auto 18px;
}

.asset-library-view-head h1 {
  margin: 4px 0 3px;
  color: #f4f7fb;
  font-size: clamp(22px, 3vw, 34px);
  line-height: 1.05;
}

.asset-library-view-head p {
  margin: 0;
  color: #73839a;
  font-size: 11px;
}

.asset-library-view-tools {
  display: flex;
  align-items: center;
  gap: 8px;
}

.asset-library-view-tools input {
  width: min(280px, 42vw);
  min-height: 32px;
  border: 1px solid rgba(117, 151, 192, 0.2);
  border-radius: 5px;
  padding: 0 10px;
  background: #101925;
  color: #edf4fc;
  font-size: 11px;
}

.asset-library-view-tools button {
  min-height: 32px;
  border: 1px solid rgba(117, 151, 192, 0.2);
  border-radius: 5px;
  padding: 0 10px;
  background: #101925;
  color: #b9c8db;
  font-size: 11px;
}

.asset-library-gallery {
  width: min(1260px, 100%);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-content: start;
  gap: 14px;
  margin: 0 auto;
}

.asset-library-card {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.asset-library-card-preview {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(117, 151, 192, 0.16);
  border-radius: 5px;
  background: #111b29;
  cursor: pointer;
}

.asset-library-card-preview img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.asset-library-card-body {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: 0 2px;
}

.asset-library-card-body strong,
.asset-library-card-body span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.asset-library-card-body strong {
  color: #e7eef8;
  font-size: 12px;
}

.asset-library-card-body span {
  color: #71839b;
  font-size: 10px;
}

.asset-library-card-actions {
  display: flex;
  gap: 6px;
}

.asset-library-card-actions > * {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  border: 1px solid rgba(117, 151, 192, 0.2);
  border-radius: 5px;
  padding: 0 8px;
  background: #101925;
  color: #b9c8db;
  font-size: 10px;
  text-decoration: none;
  cursor: pointer;
}

.asset-library-card-actions > *:hover {
  border-color: rgba(80, 171, 255, 0.48);
  color: #f1f6fc;
}

.workflow-asset-library {
  display: grid;
  gap: 10px;
  margin: 12px 0;
  padding: 12px;
  border: 1px solid rgba(117, 151, 192, 0.16);
  border-radius: 6px;
  background: rgba(9, 16, 26, 0.62);
}

.workflow-asset-library.hidden {
  display: none;
}

.workflow-asset-library-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.workflow-asset-library-head > div:first-child {
  display: grid;
  gap: 3px;
}

.workflow-asset-library-head strong {
  color: #e9f1fb;
  font-size: 12px;
}

.workflow-asset-library-head span {
  color: #71839b;
  font-size: 10px;
}

.workflow-asset-library-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.workflow-asset-library-actions input {
  width: 150px;
  min-height: 28px;
  border: 1px solid rgba(117, 151, 192, 0.18);
  border-radius: 5px;
  padding: 0 8px;
  background: #0c141f;
  color: #e9f1fb;
  font-size: 10px;
}

.workflow-asset-library-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.workflow-asset-library-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 7px;
  border: 1px solid rgba(117, 151, 192, 0.12);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.025);
}

.workflow-asset-library-card > img {
  width: 54px;
  height: 44px;
  border-radius: 4px;
  object-fit: cover;
  background: #111b29;
}

.workflow-asset-library-card > div:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.workflow-asset-library-card > div:nth-child(2) strong,
.workflow-asset-library-card > div:nth-child(2) span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workflow-asset-library-card > div:nth-child(2) strong {
  color: #e7eef8;
  font-size: 11px;
}

.workflow-asset-library-card > div:nth-child(2) span {
  color: #71839b;
  font-size: 9px;
}

.workflow-asset-library-card-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}

.workflow-asset-library-card-actions button {
  min-height: 26px;
  border: 1px solid rgba(117, 151, 192, 0.18);
  border-radius: 4px;
  background: #101925;
  color: #b9c8db;
  font-size: 10px;
  cursor: pointer;
}

.workflow-asset-library-card-actions button.primary {
  border-color: rgba(80, 171, 255, 0.4);
  background: rgba(30, 123, 220, 0.2);
  color: #e8f4ff;
}

.asset-empty-state {
  grid-column: 1 / -1;
  padding: 18px;
  color: #71839b;
  text-align: center;
  font-size: 11px;
}

.explore-card-meta {
  min-height: 22px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 3px;
  color: #627188;
  font-size: 9px;
}

.explore-card-meta > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scope-badge {
  flex: 0 0 auto;
  min-height: 18px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(117, 151, 192, 0.22);
  border-radius: 4px;
  padding: 0 5px;
  color: #9babc0;
  font-size: 8px;
}

.scope-badge.is-team {
  border-color: rgba(80, 211, 151, 0.34);
  color: #72dfa4;
}

.explore-card-actions {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-3px);
  transition: opacity 140ms ease, transform 140ms ease;
}

.explore-canvas-card:hover .explore-card-actions,
.explore-canvas-card:focus-within .explore-card-actions {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.explore-card-actions button {
  border: 1px solid rgba(117, 151, 192, 0.18);
  border-radius: 4px;
  background: #101925;
  color: #aebcd0;
}

.explore-card-actions .explore-card-delete {
  border-color: rgba(255, 97, 116, 0.28);
  background: rgba(82, 24, 34, 0.9);
  color: #ffacb6;
}

.explore-card-actions .explore-card-delete:hover {
  border-color: rgba(255, 97, 116, 0.52);
  background: rgba(125, 35, 50, 0.94);
  color: #fff0f2;
}

.team-resource-panel {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
  border: 1px solid rgba(117, 151, 192, 0.16);
  border-radius: 6px;
  padding: 10px;
  background: #0c131d;
}

.team-resource-tabs {
  display: flex;
  gap: 4px;
}

.team-resource-tabs button {
  min-height: 28px;
  border: 1px solid rgba(117, 151, 192, 0.16);
  border-radius: 4px;
  padding: 0 8px;
  background: #101925;
  color: #7f90a6;
}

.team-resource-tabs button.is-active {
  border-color: rgba(80, 211, 151, 0.38);
  color: #72dfa4;
}

#teamResourceList,
.team-reference-current {
  display: grid;
  gap: 6px;
}

.team-resource-row,
.team-reference-current article {
  min-height: 52px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid rgba(117, 151, 192, 0.1);
  padding: 5px 0;
}

.team-reference-current article {
  grid-template-columns: minmax(0, 1fr) auto;
}

.team-reference-current article > button {
  grid-column: 1 / -1;
  justify-self: end;
}

.team-reference-current article strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-resource-row img,
.team-resource-shot {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 4px;
  object-fit: cover;
  background: #151f2d;
}

.team-resource-row div,
.team-reference-current article div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.team-resource-row span,
.team-reference-current article div span {
  overflow: hidden;
  color: #718198;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-reference-status {
  border: 1px solid rgba(117, 151, 192, 0.2);
  border-radius: 4px;
  padding: 3px 5px;
  color: #9aabc0;
  font-size: 9px;
}

.team-reference-status.new-version {
  border-color: rgba(255, 191, 89, 0.38);
  color: #f5c56f;
}

.team-reference-status.source-unavailable {
  border-color: rgba(255, 111, 111, 0.32);
  color: #f29393;
}

@media (max-width: 760px) {
  .explore-topbar {
    gap: 6px;
  }

  .explore-brand > span:not(.explore-brand-mark),
  .explore-account-actions > span {
    display: none;
  }

  .explore-canvas-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .image-explore-view {
    padding-right: 12px;
    padding-left: 12px;
  }

  .image-explore-gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .image-explore-head p {
    max-width: 420px;
  }
}

@media (max-width: 500px) {
  .team-progress-heading {
    align-items: flex-start;
  }

  .team-progress-heading strong {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
  }

  .team-progress-counts,
  .team-progress-editor {
    overflow-wrap: anywhere;
  }

  .explore-canvas-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .explore-canvas-toolbar input {
    width: 100%;
  }

  .explore-canvas-grid {
    grid-template-columns: 1fr;
  }

  .image-explore-view {
    padding: 18px 10px 280px;
  }

  .image-explore-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .image-explore-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .image-explore-composer {
    width: calc(100vw - 20px);
    bottom: 8px;
  }

  .image-explore-prompt-row textarea {
    flex: 1 1 auto;
    max-width: none;
  }

  .image-explore-control-row {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .image-explore-status {
    flex-basis: 100%;
    order: 5;
  }

  .image-explore-generate {
    flex: 1;
  }
}

body.is-explore-ui .studio-shell {
  grid-template-columns: 64px minmax(0, 1fr);
  background: var(--explore-bg);
}

body.is-explore-ui .studio-sidebar {
  width: 64px;
  border-right: 1px solid var(--explore-line);
  background: #080d14;
}

body.is-explore-ui .studio-sidebar-brand {
  min-height: 54px;
  padding: 10px 8px;
}

body.is-explore-ui .studio-sidebar-nav {
  padding: 8px 10px 4px;
}

body.is-explore-ui .studio-sidebar-nav .studio-rail-button {
  width: 42px;
  min-height: 32px;
  padding: 0;
  overflow: hidden;
  font-size: 9px;
}

.studio-mode-rail {
  display: grid;
  gap: 8px;
  padding: 14px 8px;
}

.studio-mode-rail button {
  position: relative;
  width: 48px;
  min-height: 58px;
  padding: 8px 6px 7px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  border: 1px solid rgba(127, 144, 167, 0.25);
  border-radius: 11px;
  color: var(--explore-muted);
  background: #0e1622;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.02em;
  line-height: 1.15;
  white-space: nowrap;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.studio-mode-rail button::before {
  content: attr(data-nav-index);
  color: #63758d;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.studio-mode-rail button::after {
  position: absolute;
  top: 10px;
  right: 9px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  content: "";
  opacity: 0.35;
}

.studio-mode-rail button:hover {
  border-color: rgba(45, 140, 255, 0.58);
  color: var(--explore-text);
  background: #142237;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
  transform: translateX(2px);
}

.studio-mode-rail button:focus-visible {
  outline: 2px solid var(--explore-blue);
  outline-offset: 2px;
}

.studio-mode-rail button.is-active {
  border-color: rgba(45, 140, 255, 0.9);
  background: #152b4d;
  color: #f4f8ff;
  box-shadow: inset 3px 0 0 var(--explore-action), 0 10px 22px rgba(6, 25, 54, 0.36);
}

.studio-mode-rail button.is-active::before {
  color: var(--explore-action);
}

.studio-mode-rail button.is-active::after {
  background: var(--explore-action);
  box-shadow: 0 0 8px rgba(168, 255, 54, 0.7);
  opacity: 1;
}

[data-workspace-mode][hidden] {
  display: none !important;
}

[data-workspace-mode].is-active {
  min-width: 0;
  min-height: 0;
}

[data-asset-workspace-view="image"] .asset-library-only,
[data-asset-workspace-view="assets"] .asset-generation-only {
  display: none !important;
}

.asset-library-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  min-height: 0;
}

.asset-library-main {
  min-width: 0;
  overflow: auto;
}

.asset-inspector {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 10px;
  border-left: 1px solid var(--explore-line);
  padding: 14px;
  background: #0d151f;
}

.asset-inspector.hidden {
  display: none;
}

.asset-inspector header,
.asset-inspector header > div,
.asset-inspector-draft {
  display: flex;
  align-items: center;
}

.asset-inspector header {
  justify-content: space-between;
  gap: 10px;
}

.asset-inspector header > div {
  min-width: 0;
  align-items: flex-start;
  flex-direction: column;
}

.asset-inspector header span,
.asset-inspector > p,
.asset-inspector-draft {
  color: var(--explore-muted);
  font-size: 10px;
}

.asset-inspector textarea {
  width: 100%;
  min-height: 220px;
  resize: vertical;
  border: 1px solid var(--explore-blue);
  border-radius: 5px;
  padding: 10px;
  background: #080d14;
  color: var(--explore-text);
  line-height: 1.5;
}

.asset-inspector-draft {
  justify-content: space-between;
}

.asset-inspector pre {
  max-height: 150px;
  overflow: auto;
  white-space: pre-wrap;
  color: var(--explore-muted);
}

.asset-inspector-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.asset-inspector-regenerate {
  width: 100%;
  border-color: var(--explore-action);
  background: var(--explore-action);
  color: #101820;
  font-weight: 800;
}

.video-prompt-inspector {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding: 14px;
  border: 1px solid rgba(255, 99, 117, 0.42);
  border-radius: 8px;
  background: rgba(41, 12, 22, 0.52);
}

.video-prompt-inspector.hidden {
  display: none;
}

.video-prompt-inspector header,
.video-prompt-inspector header > div,
.video-prompt-inspector-draft,
.video-prompt-inspector-actions {
  display: flex;
  align-items: center;
}

.video-prompt-inspector header {
  justify-content: space-between;
  gap: 10px;
}

.video-prompt-inspector header > div {
  min-width: 0;
  align-items: flex-start;
  flex-direction: column;
}

.video-prompt-inspector header span,
.video-prompt-inspector-draft {
  color: var(--explore-muted);
  font-size: 10px;
}

.video-prompt-inspector textarea {
  width: 100%;
  min-height: 180px;
  resize: vertical;
  border: 1px solid rgba(255, 132, 146, 0.7);
  border-radius: 5px;
  padding: 10px;
  background: #150a10;
  color: var(--explore-text);
  line-height: 1.5;
}

.video-prompt-inspector-draft {
  justify-content: space-between;
}

.video-prompt-inspector-failure {
  margin: 0;
  color: #ff9aa7;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
}

.video-prompt-inspector-actions {
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

body.is-explore-ui .studio-tabbar {
  display: none;
}

@media (max-width: 720px) {
  body.is-explore-ui .studio-shell {
    display: block;
  }

  body.is-explore-ui .studio-sidebar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 40;
    width: auto;
    height: 58px;
    display: flex;
    border-top: 1px solid var(--explore-line);
    border-right: 0;
  }

  body.is-explore-ui .studio-sidebar-brand,
  body.is-explore-ui .studio-sidebar-nav {
    display: none;
  }

  .studio-mode-rail {
    width: 100%;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 7px 10px;
  }

  .studio-mode-rail button {
    width: 100%;
    height: 42px;
    min-height: 42px;
    padding: 0 10px;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }

  .studio-mode-rail button::before {
    font-size: 8px;
  }

  .studio-mode-rail button::after {
    top: 7px;
    right: 8px;
  }

  body.is-explore-ui .studio-stage {
    padding-bottom: 58px;
  }

  .asset-library-layout {
    grid-template-columns: 1fr;
  }

  .asset-library-view {
    padding: 18px 14px 90px;
  }

  .asset-library-view-head {
    align-items: stretch;
    flex-direction: column;
  }

  .asset-library-view-tools input {
    width: auto;
    flex: 1;
  }

  .asset-library-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .workflow-asset-library-head {
    align-items: stretch;
    flex-direction: column;
  }

  .workflow-asset-library-actions input {
    width: auto;
    flex: 1;
  }

  .workflow-asset-library-list {
    grid-template-columns: 1fr;
  }

  .asset-inspector {
    position: fixed;
    inset: 48px 0 58px;
    z-index: 35;
    overflow: auto;
    border-left: 0;
  }
}

body:not(.show-advanced-ui) .script-panel .section-head,
body:not(.show-advanced-ui) .media-panel .section-head,
body:not(.show-advanced-ui) .video-generate-panel .section-head {
  gap: 12px;
}

body:not(.show-advanced-ui) .script-panel .actions,
body:not(.show-advanced-ui) .media-panel .actions,
body:not(.show-advanced-ui) .video-generate-panel .actions {
  flex-wrap: wrap;
}

body:not(.show-advanced-ui) .asset-style-console {
  padding: 10px;
}

body:not(.show-advanced-ui) .video-settings {
  grid-template-columns: repeat(4, minmax(120px, 1fr));
}

/* Product Design UI refresh v20260630
   Visual-only overrides for the project hub, production console, auth, and admin pages. */
:root {
  --ui-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --display-font: var(--ui-font);
  --bg: #050913;
  --bg-2: #0a2a66;
  --panel: rgba(9, 18, 34, 0.82);
  --panel-solid: #0b1526;
  --ink: #f8fbff;
  --muted: #a6b8d1;
  --line: rgba(126, 184, 255, 0.24);
  --soft-line: rgba(170, 210, 255, 0.12);
  --accent: #4aa8ff;
  --accent-2: #8bd1ff;
  --danger: #ff6375;
  --ok: #56d8ff;
  --shadow: 0 18px 56px rgba(0, 0, 0, 0.36);
  --radius: 14px;
  --control-radius: 10px;
}

html {
  text-size-adjust: 100%;
}

body,
button,
input,
textarea,
select {
  font-family: var(--ui-font);
  letter-spacing: 0;
}

body {
  background:
    radial-gradient(circle at 50% 0%, rgba(29, 101, 220, 0.34), transparent 42%),
    radial-gradient(circle at 90% 12%, rgba(87, 183, 255, 0.13), transparent 32%),
    linear-gradient(180deg, #050913 0%, #07101c 52%, #04070d 100%);
  color: var(--ink);
}

button,
.ghost,
.admin-home-link,
.upload-pill,
.download-link,
.tab,
.chip,
.pill {
  min-height: 36px;
  border-radius: var(--control-radius);
  border: 1px solid rgba(142, 194, 255, 0.22);
  background: rgba(255, 255, 255, 0.045);
  color: var(--ink);
  box-shadow: none;
  transition:
    transform 0.16s ease,
    border-color 0.16s ease,
    background-color 0.16s ease,
    box-shadow 0.16s ease;
}

button:hover,
.ghost:hover,
.admin-home-link:hover,
.upload-pill:hover,
.download-link:hover {
  border-color: rgba(141, 205, 255, 0.48);
  background: rgba(99, 176, 255, 0.12);
  transform: translateY(-1px);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.project-card:focus-visible,
.asset-card:focus-visible {
  outline: 2px solid rgba(122, 199, 255, 0.86);
  outline-offset: 2px;
}

button.primary,
.primary,
.auth-submit {
  border-color: rgba(163, 218, 255, 0.64);
  background: linear-gradient(180deg, #83ceff 0%, #2d98ff 100%);
  color: #04111f;
  font-weight: 800;
  box-shadow:
    0 14px 32px rgba(47, 155, 255, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.62);
}

button.primary:hover,
.primary:hover,
.auth-submit:hover {
  border-color: rgba(213, 239, 255, 0.92);
  background: linear-gradient(180deg, #a1dcff 0%, #3aa4ff 100%);
}

button.small,
.ghost.small {
  min-height: 32px;
  padding: 6px 10px;
  border-radius: 8px;
}

input,
textarea,
select {
  min-height: 38px;
  border-radius: var(--control-radius);
  border: 1px solid rgba(141, 194, 255, 0.22);
  background: rgba(4, 10, 19, 0.72);
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

textarea {
  line-height: 1.55;
}

.project-home,
.studio-shell,
.admin-shell {
  width: min(100%, 1440px);
  margin: 0 auto;
}

.project-home {
  padding: 24px 32px 34px;
}

.project-home-header,
.studio-topbar,
.admin-header {
  border-radius: var(--radius);
  border: 1px solid rgba(140, 194, 255, 0.18);
  background: rgba(8, 16, 31, 0.72);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(18px);
}

.brand strong,
.canvas-entry-card h2,
.project-index-head h2,
.section-head h2,
.admin-panel-head h2,
.auth-brand strong {
  font-family: var(--display-font);
  font-weight: 800;
  letter-spacing: 0;
}

.brand span,
.section-label,
.section-head p,
.project-card p,
.asset-card small,
.admin-stat span,
.admin-table th,
.admin-list-item span {
  color: var(--muted);
}

.mark {
  border-radius: 10px;
  border: 1px solid rgba(147, 202, 255, 0.24);
  background: rgba(255, 255, 255, 0.06);
}

.pixel-toys-wordmark {
  background-color: rgba(9, 14, 35, 0.88);
  background-image: url("/pixel-toys-logo.png?v=202607040215");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.project-home-card,
.project-modal-card,
.studio-panel,
.panel,
.admin-panel,
.admin-stat,
.asset-upload-form,
.asset-style-console,
.script-panel,
.media-panel,
.video-generate-panel,
.relationship-canvas,
.asset-manifest-panel {
  border-radius: var(--radius);
  border: 1px solid rgba(137, 193, 255, 0.18);
  background:
    linear-gradient(180deg, rgba(17, 31, 55, 0.88), rgba(8, 15, 28, 0.88)),
    rgba(9, 18, 34, 0.8);
  box-shadow: var(--shadow);
}

.project-home-main {
  gap: 18px;
}

.canvas-entry-card {
  min-height: 172px;
  align-items: stretch;
  text-align: left;
  background:
    radial-gradient(circle at 78% 25%, rgba(89, 184, 255, 0.2), transparent 32%),
    linear-gradient(135deg, rgba(13, 36, 78, 0.94), rgba(8, 17, 31, 0.92));
}

.canvas-entry-card p {
  max-width: 520px;
}

.projects {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

.project-card,
.asset-card,
.storyboard-card,
.segment-card,
.character-card {
  border-radius: 12px;
  border: 1px solid rgba(137, 193, 255, 0.18);
  background: rgba(8, 15, 28, 0.8);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.24);
}

.project-card {
  min-height: 176px;
  padding: 20px;
}

.project-card strong {
  font-size: 21px;
  line-height: 1.22;
}

.project-card-title,
.asset-card strong,
.admin-table td strong,
.admin-list-item strong {
  word-break: break-word;
}

.section-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.studio-console-grid,
.two,
.video-settings,
.asset-upload-form {
  gap: 12px;
}

.video-settings {
  align-items: end;
}

.asset-card img,
.storyboard-card img,
.project-card-preview,
.media-preview,
.asset-preview {
  border-radius: 8px;
}

.admin-page {
  min-height: 100dvh;
  overflow: auto;
  font-family: var(--ui-font);
  background:
    radial-gradient(circle at 50% 0%, rgba(43, 118, 247, 0.32), transparent 38%),
    linear-gradient(180deg, #050913, #07111e 60%, #050913);
}

.admin-shell {
  padding: 28px 32px 40px;
}

.admin-summary {
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 12px;
}

.admin-grid {
  gap: 14px;
}

.admin-panel {
  padding: 18px;
}

.admin-table-wrap {
  border-radius: 10px;
  border: 1px solid rgba(137, 193, 255, 0.14);
  overflow: auto;
}

.admin-table {
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}

.admin-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 11px 12px;
  background: rgba(12, 26, 47, 0.96);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.admin-table td {
  padding: 12px;
  border-top: 1px solid rgba(137, 193, 255, 0.1);
  vertical-align: middle;
}

.admin-quota-input {
  width: 74px;
  min-height: 34px;
  text-align: center;
}

.admin-row-actions,
.admin-actions {
  gap: 8px;
}

.admin-row-actions button,
.admin-list-item button {
  min-height: 32px;
  border-radius: 8px;
}

.admin-list-item {
  border-radius: 10px;
  border: 1px solid rgba(137, 193, 255, 0.14);
  background: rgba(5, 12, 24, 0.62);
}

.admin-pill {
  border-radius: 999px;
  border: 1px solid rgba(137, 193, 255, 0.18);
  background: rgba(92, 166, 255, 0.12);
}

.auth-page {
  overflow: hidden;
  font-family: var(--ui-font);
}

.auth-copy h1 {
  font-family: var(--display-font);
  letter-spacing: 0;
}

.auth-card {
  border-radius: 14px;
  border: 1px solid rgba(182, 219, 255, 0.16);
  background: rgba(7, 11, 18, 0.72);
  backdrop-filter: blur(18px);
}

.auth-form label span,
.auth-helper,
.auth-mode-hint,
.auth-footer,
.auth-lead {
  color: rgba(223, 233, 246, 0.72);
}

.auth-tabs {
  border-radius: 10px;
  padding: 4px;
}

.auth-tabs button {
  min-height: 34px;
  border-radius: 8px;
}

@media (max-width: 1080px) {
  .project-home,
  .studio-shell,
  .admin-shell {
    padding-left: 20px;
    padding-right: 20px;
  }

  .admin-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body:not(.show-advanced-ui) .video-settings {
    grid-template-columns: repeat(2, minmax(160px, 1fr));
  }
}

@media (max-width: 760px) {
  body {
    overflow: auto;
  }

  .project-home,
  .studio-shell,
  .admin-shell {
    width: 100%;
    padding: 14px;
  }

  .project-home-header,
  .studio-topbar,
  .admin-header,
  .project-home-actions,
  .admin-actions,
  .section-head,
  .admin-panel-head {
    align-items: stretch;
    flex-direction: column;
  }

  .project-home-actions,
  .admin-actions {
    width: 100%;
  }

  .project-home-actions > *,
  .admin-actions > * {
    width: 100%;
    justify-content: center;
  }

  .project-home-main,
  .admin-grid,
  .admin-summary,
  .two,
  .video-settings,
  body:not(.show-advanced-ui) .video-settings {
    grid-template-columns: 1fr;
  }

  .project-home-card,
  .project-modal-card,
  .admin-panel,
  .admin-stat {
    border-radius: 12px;
    padding: 16px;
  }

  .canvas-entry-card {
    min-height: 150px;
  }

  .projects {
    grid-template-columns: 1fr;
  }

  .project-card {
    min-height: 150px;
  }

  .project-card strong {
    font-size: 19px;
  }

  .admin-table {
    min-width: 840px;
  }

  .auth-shell {
    min-height: 100dvh;
    padding: 16px;
  }

  .auth-topbar {
    left: 16px;
    right: 16px;
  }
}

/* =========================================================================
   统一电影向设计令牌（权威层 — 覆盖此前多次叠加的主题，杜绝旧层杂色漏出）。
   只声明令牌值，不改组件结构；新增字体/间距阶梯供后续采用。
   ========================================================================= */
:root {
  /* 字体 */
  --ui-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --display-font: var(--ui-font);
  --brand-font: "Pixelify Sans", var(--ui-font);

  /* 表面 — 深电影蓝，一套到底 */
  --bg: #050913;
  --bg-2: #0a2a66;
  --panel: rgba(9, 18, 34, 0.82);
  --panel-solid: #0b1526;
  --panel-2: #101d33;
  --ink: #f8fbff;
  --text: #f8fbff;
  --muted: #a6b8d1;
  --line: rgba(126, 184, 255, 0.24);
  --soft-line: rgba(170, 210, 255, 0.12);

  /* 单一主强调色 + 一档更亮的辉光伴色 */
  --accent: #4aa8ff;
  --accent-2: #8bd1ff;
  --accent-ink: #04101f;
  --blue: #66b8ff;

  /* 语义色 */
  --danger: #ff6375;
  --ok: #56d8ff;
  --warn: #e8b65a;

  /* 玻璃材质 */
  --glass: rgba(12, 22, 40, 0.62);
  --glass-strong: rgba(12, 22, 40, 0.8);
  --glass-soft: rgba(255, 255, 255, 0.05);
  --glass-line: rgba(170, 205, 255, 0.16);
  --glass-line-soft: rgba(170, 205, 255, 0.09);

  /* 层次 */
  --shadow: 0 20px 64px rgba(0, 8, 24, 0.5);
  --shadow-soft: 0 8px 28px rgba(0, 8, 24, 0.34);
  --radius: 14px;
  --control-radius: 10px;

  /* 字号阶梯 */
  --fs-display: clamp(40px, 5vw, 88px);
  --fs-h1: clamp(24px, 2.6vw, 34px);
  --fs-h2: 19px;
  --fs-body: 14px;
  --fs-caption: 12px;

  /* 间距阶梯（8px 节奏） */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
}

/* 全局微观打磨：抗锯齿，更顺滑的字形渲染（不改布局） */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* =========================================================================
   视频片段卡片：内容已精简（只剩序号/状态/时长/refs/预览/生成/进度），
   故改为紧凑小卡、单列堆叠、每行更多。高优先级(#id)覆盖此前层叠规则。
   ========================================================================= */
#videoProgressList.segment-progress {
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: var(--space-2);
}
#videoProgressList .segment-card {
  grid-template-columns: 1fr;
  padding: var(--space-3);
  gap: var(--space-2);
  border-radius: var(--control-radius);
}
#videoProgressList .segment-card .segment-top,
#videoProgressList .segment-card .segment-meta,
#videoProgressList .segment-card .meter,
#videoProgressList .segment-card .segment-actions {
  grid-column: 1;
  grid-row: auto;
  min-width: 0;
}
#videoProgressList .segment-meta {
  flex-wrap: wrap;
  gap: 3px 8px;
  font-size: 11px;
}
#videoProgressList .segment-actions {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
}
#videoProgressList .segment-actions button {
  flex: 1 1 calc(50% - 4px);
  min-width: 0;
  white-space: normal;
  line-height: 1.2;
}
#videoProgressList .segment-actions .segment-state-button {
  flex: 0 0 34px;
}

/* 片段状态只用色彩和动效表达，避免长文案撑高卡片或干扰队列进度。 */
#videoProgressList .segment-status-indicator {
  display: inline-block;
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border: 1px solid rgba(166, 184, 210, 0.46);
  border-radius: 50%;
  background: rgba(166, 184, 210, 0.34);
}
#videoProgressList .segment-state-queued .segment-status-indicator {
  border-color: rgba(96, 182, 255, 0.72);
  background: #4aa8ff;
  box-shadow: 0 0 0 3px rgba(74, 168, 255, 0.12), 0 0 14px rgba(74, 168, 255, 0.38);
  animation: segmentQueuedPulse 1.8s ease-in-out infinite;
}
#videoProgressList .segment-state-running .segment-status-indicator {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(139, 209, 255, 0.26);
  border-top-color: #8bd1ff;
  background: transparent;
  box-shadow: 0 0 16px rgba(91, 167, 255, 0.36);
  animation: segmentRunningSpin 0.9s linear infinite;
}
#videoProgressList .segment-state-complete .segment-status-indicator {
  border-color: rgba(86, 216, 255, 0.76);
  background: #56d8ff;
  box-shadow: 0 0 12px rgba(86, 216, 255, 0.32);
}
#videoProgressList .segment-state-failed .segment-status-indicator {
  border-color: rgba(255, 99, 117, 0.82);
  background: #ff6375;
  box-shadow: 0 0 12px rgba(255, 99, 117, 0.28);
}
#videoProgressList .segment-state-button {
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(96, 182, 255, 0.34);
  border-radius: 50%;
  background: rgba(74, 168, 255, 0.08);
  opacity: 1;
  cursor: wait;
}
#videoProgressList .segment-state-button::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4aa8ff;
  box-shadow: 0 0 12px rgba(74, 168, 255, 0.72);
}
#videoProgressList .segment-state-running .segment-state-button {
  border-color: rgba(139, 209, 255, 0.42);
}
#videoProgressList .segment-state-running .segment-state-button::before {
  width: 13px;
  height: 13px;
  border: 2px solid rgba(139, 209, 255, 0.25);
  border-top-color: #8bd1ff;
  background: transparent;
  box-shadow: none;
  animation: segmentRunningSpin 0.9s linear infinite;
}
#videoProgressSummary .video-progress-state {
  width: 9px;
  height: 9px;
  justify-self: end;
  border-radius: 50%;
  background: rgba(166, 184, 210, 0.38);
}
#videoProgressSummary .video-progress-state.is-queued,
#videoProgressSummary .video-progress-state.is-running {
  background: #4aa8ff;
  box-shadow: 0 0 0 3px rgba(74, 168, 255, 0.12), 0 0 14px rgba(74, 168, 255, 0.4);
  animation: segmentQueuedPulse 1.8s ease-in-out infinite;
}
#videoProgressSummary .video-progress-state.is-error {
  background: #ff6375;
  box-shadow: 0 0 12px rgba(255, 99, 117, 0.44);
}
@keyframes segmentQueuedPulse {
  0%, 100% { opacity: 0.52; transform: scale(0.88); }
  50% { opacity: 1; transform: scale(1.08); }
}
@keyframes segmentRunningSpin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  #videoProgressList .segment-status-indicator,
  #videoProgressList .segment-state-button::before,
  #videoProgressSummary .video-progress-state {
    animation: none;
  }
}

/* =========================================================================
   运行状态提醒：改回"呼吸灯绿色圆点"。高优先级末尾覆盖此前被改成蓝色的样式；
   用专属绿色呼吸关键帧，不影响其他共用 statusBeacon 的元素。
   ========================================================================= */
.node-beacon {
  background: #34d67f;
  box-shadow:
    0 0 0 4px rgba(52, 214, 127, 0.14),
    0 0 18px rgba(52, 214, 127, 0.55);
  animation: nodeBeaconGreen 1.35s ease-in-out infinite;
}
@keyframes nodeBeaconGreen {
  0%,
  100% {
    transform: scale(1);
    box-shadow:
      0 0 0 4px rgba(52, 214, 127, 0.14),
      0 0 16px rgba(52, 214, 127, 0.4);
  }
  50% {
    transform: scale(1.22);
    box-shadow:
      0 0 0 8px rgba(52, 214, 127, 0.06),
      0 0 28px rgba(52, 214, 127, 0.7);
  }
}
@media (prefers-reduced-motion: reduce) {
  .node-beacon {
    animation: none;
  }
}

/* 成片模块(阶段 D):预览 + 下载 */
.final-cut-panel {
  display: flex;
  flex-direction: column;
  gap: 0;
  height: auto;
  min-height: 0;
}
.final-cut-panel .final-cut-step {
  position: relative;
  min-width: 0;
  padding: 16px 18px 18px;
  border: 1px solid var(--studio-line, var(--line));
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(28, 53, 86, 0.32), rgba(7, 16, 29, 0.48)),
    rgba(8, 17, 31, 0.48);
}
.final-cut-panel .final-cut-step .section-head {
  align-items: flex-start;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.final-cut-panel .final-cut-step-heading {
  display: flex;
  flex: 1 1 260px;
  align-items: flex-start;
  min-width: 0;
  gap: 12px;
}
.final-cut-panel .final-cut-step-heading > div {
  min-width: 0;
}
.final-cut-panel .final-cut-step h2 {
  margin: 0;
  color: var(--studio-ink, var(--ink));
  line-height: 1.2;
}
.final-cut-panel .final-cut-step h2 {
  font-size: 18px;
}
.final-cut-panel .final-cut-step p {
  max-width: 620px;
}
.final-cut-panel .final-cut-step .actions {
  align-items: center;
}
.final-cut-panel .final-cut-preview {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3, 12px);
}
.final-cut-panel .final-cut-preview video,
.final-cut-panel .final-cut-placeholder {
  width: 216px;
  max-width: 40vw;
  aspect-ratio: 9 / 16;
  border-radius: var(--control-radius, 10px);
}
.final-cut-panel .final-cut-preview video {
  background: #000;
  border: 1px solid var(--line);
  display: block;
}
.final-cut-panel .final-cut-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 20px 16px;
  border: 1px dashed rgba(159, 201, 239, 0.34);
  background: rgba(7, 16, 29, 0.38);
  color: var(--studio-muted, var(--muted));
  text-align: center;
}
.final-cut-panel .final-cut-placeholder svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: var(--studio-accent, var(--accent));
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}
.final-cut-panel .final-cut-placeholder span {
  max-width: 13em;
  font-size: 12px;
  line-height: 1.5;
}
.final-cut-panel .final-cut-video {
  position: relative;
  display: inline-block;
}
.final-cut-panel .video-download-button {
  position: absolute;
  right: 10px;
  top: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: #fff;
  background: rgba(8, 14, 26, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition:
    background 0.16s ease,
    transform 0.16s ease;
}
.final-cut-panel .video-download-button:hover {
  background: var(--accent, #2f9bff);
  border-color: var(--accent, #2f9bff);
  transform: translateY(-1px);
}
.final-cut-panel .video-download-button svg {
  display: block;
  width: 16px;
  height: 16px;
}

/* Admin console polish: dense production table, not oversized dashboard chips. */
body.admin-page {
  background:
    radial-gradient(circle at 18% -10%, rgba(68, 158, 255, 0.18), transparent 34%),
    radial-gradient(circle at 92% 8%, rgba(59, 227, 185, 0.1), transparent 30%),
    linear-gradient(180deg, #07111f 0%, #050913 48%, #03060b 100%);
}

body.admin-page .admin-shell {
  width: min(100%, 1600px);
  padding: 22px 28px 36px;
}

body.admin-page .admin-header,
body.admin-page .admin-panel,
body.admin-page .admin-stat {
  border: 1px solid rgba(144, 190, 255, 0.12);
  background:
    linear-gradient(180deg, rgba(13, 24, 42, 0.82), rgba(6, 12, 22, 0.92)),
    rgba(6, 12, 22, 0.9);
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

body.admin-page .admin-header {
  border-radius: 12px;
  padding: 14px 16px;
}

body.admin-page .admin-header .brand {
  gap: 18px;
}

body.admin-page .admin-header .brand .mark {
  width: clamp(92px, 8vw, 128px);
  height: auto;
  aspect-ratio: 960 / 165;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
  overflow: visible;
  transform-origin: center;
  transition:
    filter 0.18s ease,
    opacity 0.18s ease,
    transform 0.18s ease;
}

body.admin-page .admin-header .brand .pixel-toys-wordmark {
  background-color: transparent;
  background-size: contain;
  filter: drop-shadow(0 10px 24px rgba(74, 168, 255, 0.16));
}

body.admin-page .admin-header .brand:hover .pixel-toys-wordmark {
  filter: drop-shadow(0 12px 30px rgba(74, 168, 255, 0.26));
  transform: translateY(-1px);
}

body.admin-page .admin-summary {
  margin: 14px 0;
  grid-template-columns: repeat(6, minmax(128px, 1fr));
  gap: 10px;
}

body.admin-page .admin-stat {
  border-radius: 10px;
  padding: 12px 14px;
}

body.admin-page .admin-stat strong {
  margin-top: 6px;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}

body.admin-page .admin-grid {
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 12px;
}

body.admin-page .admin-panel {
  border-radius: 12px;
  padding: 16px;
}

body.admin-page .admin-panel-wide {
  grid-column: 1 / -1;
}

body.admin-page .admin-panel-head {
  margin-bottom: 12px;
}

body.admin-page .admin-panel-head h2 {
  margin-top: 2px;
  font-size: 22px;
  line-height: 1.2;
}

body.admin-page .section-label {
  color: rgba(175, 195, 224, 0.8);
  letter-spacing: 0.16em;
}

body.admin-page .admin-table-wrap {
  border-radius: 10px;
  border: 1px solid rgba(144, 190, 255, 0.12);
  background: rgba(3, 8, 16, 0.36);
  overflow: auto;
}

body.admin-page .admin-table {
  min-width: 1180px;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  font-size: 13px;
}

body.admin-page .admin-table th,
body.admin-page .admin-table td {
  border: 0;
}

body.admin-page .admin-table th {
  height: 42px;
  padding: 0 14px;
  background: rgba(6, 17, 32, 0.98);
  color: rgba(178, 198, 227, 0.84);
  font-size: 11px;
  font-weight: 760;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

body.admin-page .admin-table td {
  height: 58px;
  padding: 10px 14px;
  border-top: 1px solid rgba(126, 171, 232, 0.1);
  background: rgba(8, 17, 31, 0.44);
  color: rgba(244, 249, 255, 0.94);
  font-variant-numeric: tabular-nums;
}

body.admin-page .admin-table tbody tr:nth-child(even) td {
  background: rgba(6, 14, 27, 0.56);
}

body.admin-page .admin-table tbody tr:hover td {
  background: rgba(21, 42, 70, 0.62);
}

body.admin-page .admin-table th:first-child,
body.admin-page .admin-table td:first-child {
  width: 230px;
}

body.admin-page .admin-table th:nth-child(2),
body.admin-page .admin-table th:nth-child(3),
body.admin-page .admin-table th:nth-child(4),
body.admin-page .admin-table td:nth-child(2),
body.admin-page .admin-table td:nth-child(3),
body.admin-page .admin-table td:nth-child(4) {
  width: 108px;
  text-align: center;
}

body.admin-page .admin-table th:nth-child(5),
body.admin-page .admin-table th:nth-child(6),
body.admin-page .admin-table td:nth-child(5),
body.admin-page .admin-table td:nth-child(6) {
  width: 92px;
  text-align: center;
}

body.admin-page .admin-table th:nth-child(7),
body.admin-page .admin-table th:nth-child(8),
body.admin-page .admin-table td:nth-child(7),
body.admin-page .admin-table td:nth-child(8) {
  width: 132px;
  text-align: center;
}

body.admin-page .admin-table th:last-child,
body.admin-page .admin-table td:last-child {
  width: 330px;
}

body.admin-page .admin-table td strong,
body.admin-page .admin-table td span,
body.admin-page .admin-table td small {
  max-width: 100%;
}

body.admin-page .admin-table td:first-child strong,
body.admin-page .admin-table td:first-child span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.admin-page .admin-table td:first-child strong {
  color: #f8fbff;
  font-size: 14px;
  font-weight: 760;
  line-height: 1.25;
}

body.admin-page .admin-table td:first-child span {
  margin-top: 4px;
  color: rgba(169, 188, 217, 0.78);
  font-size: 12px;
  line-height: 1.35;
}

body.admin-page .admin-pill {
  display: inline-flex !important;
  width: auto;
  min-width: 44px;
  height: 22px;
  padding: 0 8px;
  border: 1px solid rgba(123, 172, 235, 0.2);
  border-radius: 6px;
  background: rgba(18, 33, 55, 0.72);
  color: rgba(194, 211, 235, 0.84) !important;
  box-shadow: none;
  font-size: 11px;
  font-weight: 720;
  line-height: 22px;
  white-space: nowrap;
}

body.admin-page .admin-pill.is-ok,
body.admin-page .admin-pill.is-admin {
  border-color: rgba(74, 168, 255, 0.34);
  background: rgba(49, 128, 204, 0.18);
  color: #dff2ff !important;
}

body.admin-page .admin-pill.is-disabled {
  border-color: rgba(130, 147, 170, 0.16);
  background: rgba(112, 127, 150, 0.1);
  color: rgba(164, 180, 204, 0.6) !important;
}

body.admin-page .admin-quota-input {
  width: 68px;
  min-height: 30px;
  height: 30px;
  border-radius: 7px;
  border-color: rgba(127, 174, 236, 0.18);
  background: rgba(2, 7, 14, 0.72);
  color: #f8fbff;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

body.admin-page .admin-row-actions {
  justify-content: flex-start;
  gap: 7px;
  min-width: 0;
  white-space: nowrap;
}

body.admin-page .admin-row-actions button,
body.admin-page .admin-list-item button,
body.admin-page .admin-actions button,
body.admin-page .admin-home-link {
  min-height: 30px;
  height: 30px;
  border-radius: 7px;
  border-color: rgba(139, 185, 245, 0.18);
  background: rgba(14, 27, 47, 0.68);
  color: rgba(232, 241, 255, 0.86);
  padding: 0 10px;
  box-shadow: none;
  font-size: 12px;
  font-weight: 660;
}

body.admin-page .admin-row-actions button:hover,
body.admin-page .admin-list-item button:hover,
body.admin-page .admin-actions button:hover,
body.admin-page .admin-home-link:hover {
  border-color: rgba(96, 190, 255, 0.52);
  background: rgba(42, 105, 170, 0.24);
  transform: none;
}

body.admin-page .admin-row-actions button:first-child {
  border-color: rgba(255, 116, 128, 0.22);
  color: rgba(255, 202, 208, 0.92);
}

body.admin-page .admin-actions button.primary {
  border-color: rgba(139, 216, 255, 0.52);
  background: linear-gradient(180deg, #8bd1ff 0%, #3da2ff 100%);
  color: #03101e;
}

body.admin-page .admin-list {
  gap: 8px;
}

body.admin-page .admin-list-item {
  border-radius: 9px;
  border-color: rgba(144, 190, 255, 0.12);
  background: rgba(5, 12, 24, 0.54);
  padding: 10px;
}

.reference-kit-panel {
  margin-top: 16px;
  border: 1px solid rgba(133, 180, 219, 0.16);
  border-radius: 10px;
  background: rgba(7, 18, 31, 0.46);
  padding: 14px;
}

.shot-reference-kit {
  display: inline-flex;
  width: fit-content;
  border: 1px solid rgba(103, 205, 255, 0.24);
  border-radius: 999px;
  padding: 3px 7px;
  color: rgba(157, 222, 247, 0.8);
  font-size: 10px;
}

.reference-kit-panel-head,
.reference-kit-card-head,
.reference-kit-bind-row,
.reference-kit-form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.reference-kit-panel-head h3 {
  margin: 2px 0 3px;
  font-size: 15px;
}

.reference-kit-panel-head p {
  margin: 0;
  color: rgba(192, 211, 229, 0.62);
  font-size: 11px;
}

.reference-kit-panel .eyebrow {
  color: rgba(103, 205, 255, 0.72);
  font-size: 9px;
  letter-spacing: 0.14em;
}

.reference-kit-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.reference-kit-card {
  border: 1px solid rgba(133, 180, 219, 0.12);
  border-radius: 8px;
  background: rgba(5, 13, 23, 0.44);
  padding: 10px;
}

.reference-kit-card-head strong {
  margin-right: 7px;
  font-size: 12px;
}

.reference-kit-card-head span,
.reference-kit-bound-shots,
.reference-kit-empty,
.reference-kit-empty-state {
  color: rgba(192, 211, 229, 0.58);
  font-size: 11px;
}

.reference-kit-card-actions {
  display: flex;
  gap: 3px;
}

.reference-kit-card-actions .icon-button {
  width: 25px;
  height: 25px;
  padding: 0;
  border: 1px solid rgba(153, 199, 234, 0.16);
  border-radius: 6px;
  background: transparent;
  color: rgba(211, 229, 245, 0.7);
  cursor: pointer;
}

.reference-kit-card-actions .icon-button:hover {
  border-color: rgba(103, 205, 255, 0.5);
  color: #fff;
}

.reference-kit-card-actions .icon-button.danger:hover {
  border-color: rgba(255, 117, 129, 0.55);
  color: #ff9ca5;
}

.reference-kit-role-summary,
.reference-kit-bound-shots {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 8px 0;
}

.reference-kit-role-summary span,
.reference-kit-bound-shots span {
  border: 1px solid rgba(103, 205, 255, 0.18);
  border-radius: 999px;
  padding: 3px 7px;
  color: rgba(179, 225, 250, 0.78);
  font-size: 10px;
}

.reference-kit-bind-row select {
  min-width: 160px;
  max-width: 70%;
}

.reference-kit-form {
  margin-top: 12px;
  border-top: 1px solid rgba(133, 180, 219, 0.12);
  padding-top: 12px;
}

.reference-kit-name-field {
  display: grid;
  gap: 5px;
  color: rgba(192, 211, 229, 0.7);
  font-size: 11px;
}

.reference-kit-role-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
  margin-top: 10px;
}

.reference-kit-role-grid fieldset {
  min-width: 0;
  border: 1px solid rgba(133, 180, 219, 0.12);
  border-radius: 7px;
  padding: 7px;
}

.reference-kit-role-grid legend {
  padding: 0 4px;
  color: rgba(205, 224, 240, 0.72);
  font-size: 10px;
}

.reference-kit-option {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  margin: 4px 0;
  color: rgba(213, 229, 242, 0.72);
  font-size: 10px;
}

.reference-kit-option span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reference-kit-policy-row {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
  margin: 11px 0;
  color: rgba(192, 211, 229, 0.72);
  font-size: 11px;
}

.reference-kit-form-actions {
  justify-content: flex-end;
}

@media (max-width: 780px) {
  .reference-kit-role-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1080px) {
  body.admin-page .admin-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.admin-page .admin-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  body.admin-page .admin-shell {
    padding: 14px;
  }

  body.admin-page .admin-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.admin-page .admin-table {
    min-width: 1120px;
  }
}

/* Pixel Toys auth direction: a restrained production-console entry, not a clone of a cinematic landing page. */
body.auth-page {
  --auth-ink: #f2f5ec;
  --auth-muted: #8d9b8c;
  --auth-dim: #566259;
  --auth-line: rgba(205, 231, 202, 0.16);
  --auth-lime: #b6ff58;
  --auth-lime-soft: rgba(182, 255, 88, 0.16);
  min-height: 100dvh;
  height: 100dvh;
  overflow: hidden;
  background:
    linear-gradient(115deg, #050706 0%, #0a100c 48%, #050706 100%);
  color: var(--auth-ink);
}

body.auth-page::before {
  opacity: 0.7;
  background-image:
    linear-gradient(rgba(166, 215, 166, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(166, 215, 166, 0.055) 1px, transparent 1px),
    radial-gradient(circle, rgba(207, 237, 205, 0.18) 0.65px, transparent 0.9px);
  background-size: 64px 64px, 64px 64px, 18px 18px;
  mask-image: linear-gradient(90deg, transparent, black 16%, black 84%, transparent);
}

body.auth-page::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.42;
  background:
    linear-gradient(90deg, transparent 0 12%, rgba(182, 255, 88, 0.07) 12.1%, transparent 12.2%),
    linear-gradient(180deg, transparent 0 74%, rgba(182, 255, 88, 0.08) 74.1%, transparent 74.2%),
    repeating-linear-gradient(180deg, transparent 0 5px, rgba(240, 255, 237, 0.018) 6px);
}

.auth-page .auth-shell {
  width: 100%;
  height: 100dvh;
  min-height: 0;
  padding: clamp(18px, 2.2vw, 32px) clamp(20px, 3.4vw, 52px);
  overflow: hidden;
  isolation: isolate;
}

.auth-page .auth-orbit-lines {
  inset: -18vh -10vw;
  opacity: 0.42;
}

.auth-page .auth-orbit-lines span {
  border-top-color: rgba(182, 255, 88, 0.11);
  border-radius: 0;
  transform: rotate(-8deg);
}

.auth-page .auth-orbit-lines span:nth-child(1) {
  top: 20%;
}

.auth-page .auth-orbit-lines span:nth-child(2) {
  top: 43%;
  transform: rotate(-4deg);
}

.auth-page .auth-orbit-lines span:nth-child(3) {
  top: 67%;
  transform: rotate(-11deg);
}

.auth-page .auth-topbar,
.auth-page .auth-footer {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.auth-page .auth-topbar {
  gap: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--auth-line);
}

.auth-page .auth-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--auth-ink);
  font-family: var(--brand-font);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-decoration: none;
}

.auth-logo-index {
  display: inline-grid;
  place-items: center;
  min-width: 58px;
  height: 28px;
  padding: 0 7px;
  border: 1px solid rgba(182, 255, 88, 0.55);
  color: var(--auth-lime);
  font-family: var(--ui-font);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1;
}

.auth-page .auth-top-actions {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  color: var(--auth-dim);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.auth-route {
  color: var(--auth-muted);
}

.auth-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--auth-lime);
}

.auth-status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--auth-lime);
  box-shadow: 0 0 12px rgba(182, 255, 88, 0.8);
}

.auth-page .auth-hero {
  width: min(1500px, 100%);
  margin: 0 auto;
  grid-template-columns: minmax(270px, 0.84fr) minmax(340px, 1.2fr) minmax(320px, 0.76fr);
  gap: clamp(20px, 3.2vw, 64px);
  height: calc(100dvh - 128px);
}

.auth-page .auth-copy {
  position: relative;
  z-index: 3;
  align-self: center;
}

.auth-page .auth-kicker {
  margin: 0 0 22px;
  color: var(--auth-lime);
  font-family: var(--brand-font);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
}

.auth-page .auth-copy h1 {
  max-width: 7ch;
  margin: 0;
  color: var(--auth-ink);
  font-size: clamp(52px, 6.8vw, 112px);
  font-weight: 620;
  line-height: 0.9;
  letter-spacing: -0.04em;
}

.auth-page .auth-copy h1 em {
  color: var(--auth-lime);
  font-style: normal;
  text-shadow: 0 0 32px rgba(182, 255, 88, 0.15);
}

.auth-page .auth-lead {
  width: min(330px, 90%);
  margin: 28px 0 0;
  color: var(--auth-muted);
  font-size: 13px;
  line-height: 1.6;
}

.auth-copy-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 18px;
  margin-top: 28px;
  color: var(--auth-dim);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.auth-copy-stats span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.auth-copy-stats strong {
  color: var(--auth-lime);
  font-size: 10px;
}

.auth-page .auth-infinity-stage {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 460px;
  overflow: visible;
  perspective: 1100px;
  isolation: isolate;
}

.auth-infinity-stage::before {
  content: "";
  position: absolute;
  inset: 11% 4%;
  z-index: -2;
  border: 1px solid rgba(182, 255, 88, 0.13);
  background:
    linear-gradient(rgba(182, 255, 88, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(182, 255, 88, 0.1) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(180deg, transparent, black 14%, black 86%, transparent);
}

.auth-infinity-stage::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -4%;
  left: -4%;
  z-index: -1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(182, 255, 88, 0.34), transparent);
}

.auth-stage-frame {
  position: absolute;
  inset: 14% 9%;
  z-index: 2;
  pointer-events: none;
}

.auth-stage-frame i {
  position: absolute;
  width: 16px;
  height: 16px;
  border-color: rgba(182, 255, 88, 0.7);
  border-style: solid;
}

.auth-stage-frame i:nth-child(1) {
  top: 0;
  left: 0;
  border-width: 1px 0 0 1px;
}

.auth-stage-frame i:nth-child(2) {
  top: 0;
  right: 0;
  border-width: 1px 1px 0 0;
}

.auth-stage-frame i:nth-child(3) {
  right: 0;
  bottom: 0;
  border-width: 0 1px 1px 0;
}

.auth-stage-frame i:nth-child(4) {
  bottom: 0;
  left: 0;
  border-width: 0 0 1px 1px;
}

.auth-stage-meta,
.auth-stage-caption {
  position: absolute;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  width: min(82%, 420px);
  color: var(--auth-dim);
  font-family: var(--brand-font);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.12em;
}

.auth-stage-meta {
  top: 9%;
}

.auth-stage-caption {
  bottom: 8%;
  color: var(--auth-muted);
}

.auth-page .auth-infinity-canvas {
  position: relative;
  z-index: 1;
  width: min(100%, 520px);
  aspect-ratio: 1 / 1;
  filter: sepia(1) saturate(4) hue-rotate(35deg) brightness(1.14);
  opacity: 0.9;
}

.auth-page .auth-infinity-shadow {
  position: absolute;
  bottom: 18%;
  display: block;
  width: min(58%, 280px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(182, 255, 88, 0.32), transparent);
}

.auth-page .auth-card {
  position: relative;
  z-index: 4;
  justify-self: end;
  width: min(390px, 100%);
  border: 1px solid rgba(182, 255, 88, 0.25);
  border-radius: 8px;
  padding: clamp(20px, 2.2vw, 30px);
  background: linear-gradient(145deg, rgba(18, 27, 19, 0.96), rgba(6, 10, 7, 0.9));
  box-shadow:
    0 28px 90px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.025) inset,
    0 0 42px rgba(182, 255, 88, 0.045);
  backdrop-filter: blur(18px);
}

.auth-card-topline {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--auth-line);
  color: var(--auth-lime);
  font-family: var(--brand-font);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.14em;
}

.auth-card-topline span:last-child {
  color: var(--auth-dim);
}

.auth-page .auth-brand {
  margin: 22px 0 20px;
}

.auth-page .auth-brand strong {
  color: var(--auth-ink);
  font-family: var(--brand-font);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.auth-page .auth-brand span {
  color: var(--auth-muted);
  font-size: 11px;
}

.auth-page .auth-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--auth-line);
  border-radius: 6px;
  padding: 3px;
  background: rgba(0, 0, 0, 0.22);
}

.auth-page .auth-tabs button {
  min-height: 36px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--auth-muted);
  font-size: 11px;
  font-weight: 700;
}

.auth-page .auth-tabs button:hover {
  background: rgba(182, 255, 88, 0.07);
  color: var(--auth-ink);
  box-shadow: none;
}

.auth-page .auth-tabs button.is-active {
  background: var(--auth-lime);
  color: #081006;
  box-shadow: none;
}

.auth-page .auth-form {
  gap: 14px;
  margin-top: 20px;
}

.auth-page .auth-form label {
  gap: 7px;
}

.auth-page .auth-form label span {
  color: var(--auth-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.auth-page .auth-form input {
  height: 46px;
  border: 1px solid rgba(205, 231, 202, 0.16);
  border-radius: 5px;
  padding: 0 13px;
  background: rgba(0, 0, 0, 0.22);
  color: var(--auth-ink);
  font-size: 13px;
}

.auth-page .auth-form input::placeholder {
  color: var(--auth-dim);
}

.auth-page .auth-form input:focus {
  border-color: rgba(182, 255, 88, 0.7);
  box-shadow: 0 0 0 3px var(--auth-lime-soft);
}

.auth-page .auth-form button.primary {
  position: relative;
  height: 48px;
  margin-top: 2px;
  border: 1px solid var(--auth-lime);
  border-radius: 5px;
  background: var(--auth-lime);
  color: #071006;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.02em;
  box-shadow: 0 14px 32px rgba(182, 255, 88, 0.12);
}

.auth-page .auth-form button.primary::after {
  content: "↗";
  margin-left: 8px;
  font-size: 15px;
  font-weight: 500;
}

.auth-page .auth-form button.primary:hover {
  border-color: #d2ff9c;
  background: #c8ff7c;
  box-shadow: 0 16px 38px rgba(182, 255, 88, 0.22);
}

.auth-page .auth-form button.primary:disabled {
  background: #6f8e43;
  border-color: #6f8e43;
}

.auth-page .auth-message {
  min-height: 18px;
  margin: 0;
  color: var(--auth-muted);
  font-size: 11px;
  line-height: 1.4;
}

.auth-page .auth-footer {
  position: absolute;
  right: clamp(20px, 3.4vw, 52px);
  bottom: clamp(18px, 2.2vw, 32px);
  left: clamp(20px, 3.4vw, 52px);
  color: var(--auth-dim);
  font-family: var(--brand-font);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.12em;
}

@media (max-width: 980px) {
  .auth-page .auth-hero {
    grid-template-columns: minmax(0, 1fr) minmax(310px, 390px);
    gap: 26px;
  }

  .auth-page .auth-infinity-stage {
    position: absolute;
    top: 7%;
    right: 27%;
    width: 52vw;
    min-height: 0;
    opacity: 0.55;
    pointer-events: none;
  }

  .auth-page .auth-card {
    grid-column: 2;
  }
}

@media (max-width: 720px) {
  body.auth-page {
    min-height: 100dvh;
    height: auto;
    overflow: auto;
  }

  .auth-page .auth-shell {
    height: auto;
    min-height: 100dvh;
    padding: 16px;
    overflow: visible;
  }

  .auth-page .auth-topbar {
    padding-bottom: 13px;
  }

  .auth-page .auth-top-actions {
    gap: 0;
  }

  .auth-page .auth-route {
    display: none;
  }

  .auth-page .auth-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    height: auto;
    min-height: calc(100dvh - 72px);
    padding: 8vh 0 86px;
  }

  .auth-page .auth-copy {
    position: relative;
    z-index: 3;
  }

  .auth-page .auth-copy h1 {
    max-width: 6.5ch;
    font-size: clamp(50px, 14vw, 72px);
  }

  .auth-page .auth-lead {
    width: min(300px, 82%);
    margin-top: 22px;
  }

  .auth-copy-stats {
    margin-top: 22px;
  }

  .auth-page .auth-infinity-stage {
    top: 1%;
    right: -18%;
    width: 96vw;
    opacity: 0.24;
  }

  .auth-stage-meta,
  .auth-stage-caption {
    width: 72%;
  }

  .auth-page .auth-card {
    grid-column: auto;
    width: 100%;
    margin-top: 44px;
  }

  .auth-page .auth-footer {
    position: static;
    margin-top: -64px;
    padding-bottom: 18px;
  }

  .auth-page .auth-footer span:last-child {
    display: none;
  }
}

/* === 资产拖拽重分类样式(补齐:JS 已上线但样式缺失) === */
#assetGallery:has(.asset-reclassify-groups) {
  display: block;
  min-width: 0;
}

.asset-library-main:has(.asset-reclassify-groups) {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior: contain;
}

.asset-reclassify-groups {
  display: grid;
  grid-template-columns: repeat(4, minmax(216px, 1fr));
  min-width: 916px;
  gap: 12px;
  align-items: start;
  padding: 2px 2px 12px;
}

.asset-reclassify-group {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
}

.asset-reclassify-group h3 {
  margin: 0 0 8px;
  color: var(--ink);
  font-size: 13px;
}

.asset-reclassify-dropzone {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: max-content;
  align-content: start;
  gap: 8px;
  min-height: 190px;
  max-height: min(58dvh, 520px);
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding: 8px;
  border: 1px dashed rgba(141, 194, 255, 0.28);
  border-radius: 12px;
}

.asset-reclassify-dropzone > .asset-card {
  min-width: 0;
  width: 100%;
}

.asset-library-main:has(.asset-reclassify-groups),
.asset-reclassify-dropzone {
  scrollbar-width: thin;
  scrollbar-color: rgba(126, 194, 255, 0.38) transparent;
}

.asset-library-main:has(.asset-reclassify-groups)::-webkit-scrollbar,
.asset-reclassify-dropzone::-webkit-scrollbar {
  display: block;
  width: 7px;
  height: 7px;
}

.asset-library-main:has(.asset-reclassify-groups)::-webkit-scrollbar-thumb,
.asset-reclassify-dropzone::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(126, 194, 255, 0.38);
}

.asset-reclassify-dropzone:empty::before {
  content: "拖到这里";
  align-self: center;
  justify-self: center;
  color: var(--muted);
  font-size: 12px;
}

.asset-reclassify-dropzone.is-dragover {
  border-color: rgba(115, 205, 255, 0.86);
  background: rgba(45, 152, 255, 0.1);
}

.asset-card.is-flagged {
  border-color: rgba(246, 203, 70, 0.94);
  box-shadow: 0 0 0 2px rgba(246, 203, 70, 0.2), 0 18px 46px rgba(0, 0, 0, 0.28);
}

.asset-card.is-dragging {
  opacity: 0.48;
}

/* Asset manifest refinement: compact confirmation and coordinated classification groups. */
#confirmAssetManifestBtn {
  align-self: flex-end;
  width: auto;
  min-width: 92px;
  height: 30px;
  min-height: 30px;
  padding: 0 15px;
  border: 1px solid rgba(126, 194, 255, 0.42);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(116, 192, 252, 0.22), rgba(74, 168, 255, 0.08)),
    rgba(11, 28, 49, 0.84);
  color: #dff2ff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 5px 14px rgba(0, 16, 42, 0.18);
}

#confirmAssetManifestBtn:hover {
  border-color: rgba(139, 209, 255, 0.7);
  background:
    linear-gradient(180deg, rgba(139, 209, 255, 0.3), rgba(74, 168, 255, 0.13)),
    rgba(13, 38, 66, 0.9);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 8px 18px rgba(0, 40, 90, 0.24);
  transform: translateY(-1px);
}

#confirmAssetManifestBtn:disabled {
  border-color: rgba(170, 205, 238, 0.16);
  background: rgba(255, 255, 255, 0.045);
  color: rgba(210, 225, 242, 0.46);
  box-shadow: none;
  transform: none;
}

#assetManifestOverview .asset-manifest-grid {
  gap: 10px;
}

#assetManifestOverview .manifest-group {
  padding: 10px;
  border: 1px solid rgba(170, 205, 255, 0.14);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.018)),
    rgba(7, 16, 29, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 8px 22px rgba(0, 8, 24, 0.12);
}

#assetManifestOverview .manifest-group h3 {
  min-height: 28px;
  margin: 0 0 8px;
  padding: 0 0 8px;
  border-bottom: 1px solid rgba(170, 205, 255, 0.1);
  color: #edf6ff;
  font-size: 12px;
  font-weight: 720;
}

#assetManifestOverview .manifest-add-btn {
  width: 28px;
  height: 28px;
  min-height: 28px;
  border-radius: 8px;
  border-color: rgba(170, 205, 255, 0.2);
  background: rgba(255, 255, 255, 0.055);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

#assetManifestOverview .manifest-add-btn:hover {
  border-color: rgba(116, 192, 252, 0.56);
  background: rgba(74, 168, 255, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 0 3px rgba(74, 168, 255, 0.08);
}

#assetManifestOverview .manifest-name-list {
  gap: 5px;
  min-height: 32px;
  border-radius: 8px;
}

#assetManifestOverview .manifest-name-list > .manifest-name,
#assetManifestOverview .manifest-name-list > .manifest-empty {
  min-height: 30px;
  padding: 6px 8px;
  border: 1px solid rgba(170, 205, 255, 0.1);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

#assetManifestOverview .manifest-name-list > .manifest-name {
  transition:
    border-color 140ms ease,
    background 140ms ease,
    box-shadow 140ms ease,
    transform 140ms ease;
}

#assetManifestOverview .manifest-name-list > .manifest-name:hover {
  border-color: rgba(126, 194, 255, 0.24);
  background: rgba(74, 168, 255, 0.075);
}

#assetManifestOverview .manifest-generate-toggle {
  min-height: 24px;
  padding: 0 9px;
  border: 1px solid rgba(170, 205, 255, 0.16);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(223, 238, 255, 0.8);
  font-size: 10px;
  font-weight: 650;
}

#assetManifestOverview .manifest-generate-toggle.is-on {
  border-color: rgba(106, 216, 145, 0.3);
  background: rgba(62, 178, 104, 0.12);
  color: #c8f3d5;
}

#assetManifestOverview .manifest-generate-toggle.is-off {
  border-color: rgba(170, 184, 205, 0.14);
  background: rgba(255, 255, 255, 0.026);
  color: rgba(190, 202, 220, 0.58);
}

#assetManifestOverview .manifest-generate-toggle:hover,
#assetManifestOverview .manifest-generate-toggle:focus-visible {
  border-color: rgba(116, 192, 252, 0.52);
  background: rgba(74, 168, 255, 0.14);
  color: #eff8ff;
}

#assetManifestOverview .manifest-name.is-dragging {
  opacity: 0.48;
  border-color: rgba(115, 205, 255, 0.72);
  box-shadow: 0 0 0 2px rgba(47, 155, 255, 0.14);
}

#assetManifestOverview .manifest-name-list.is-dragover {
  border-color: rgba(115, 205, 255, 0.82);
  background: rgba(45, 152, 255, 0.09);
  box-shadow: inset 0 0 0 1px rgba(115, 205, 255, 0.08);
}

/* Local Production OS pass: keep the production DOM and handlers, change only the shell. */
body.is-studio {
  --studio-bg: #07111f;
  --studio-panel: rgba(18, 35, 61, 0.66);
  --studio-panel-deep: rgba(7, 16, 29, 0.7);
  --studio-line: rgba(168, 204, 249, 0.15);
  --studio-line-strong: rgba(169, 218, 255, 0.38);
  --studio-ink: #f3f8ff;
  --studio-muted: #94a9c5;
  --studio-dim: #60738d;
  --studio-signal: #b7ee78;
  background: var(--studio-bg);
}

body.is-studio .studio-shell {
  grid-template-columns: 78px minmax(0, 1fr);
  min-height: 100dvh;
  background:
    radial-gradient(circle at 20% -8%, rgba(60, 142, 255, 0.3), transparent 30rem),
    radial-gradient(circle at 84% 8%, rgba(64, 193, 255, 0.11), transparent 24rem),
    radial-gradient(circle, rgba(145, 193, 246, 0.19) 1px, transparent 1.35px),
    linear-gradient(180deg, #0a1729 0%, #07111f 52%, #050b15 100%);
  background-size: auto, auto, 12px 12px, auto;
}

body.is-studio .studio-sidebar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  padding: 12px 8px;
  border-right: 1px solid var(--studio-line);
  background: rgba(5, 13, 24, 0.7);
  backdrop-filter: blur(20px) saturate(1.16) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.16) !important;
}

body.is-studio .studio-sidebar-brand {
  display: grid;
  justify-items: center;
  gap: 7px;
  padding: 4px 0 14px;
  color: var(--studio-muted);
  font-size: 8px;
  letter-spacing: 0.12em;
  white-space: nowrap;
}

body.is-studio .studio-sidebar-brand .mark {
  width: 58px;
  height: auto;
  aspect-ratio: 960 / 165;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
}

body.is-studio .studio-sidebar-brand .pixel-toys-wordmark {
  background-size: contain;
}

body.is-studio .studio-mode-rail {
  display: grid;
  gap: 7px;
  padding: 0;
}

body.is-studio .studio-mode-rail button {
  width: 100%;
  min-height: 54px;
  padding: 8px 6px 7px;
  border: 1px solid var(--studio-line);
  border-radius: 13px;
  color: var(--studio-muted);
  background: rgba(13, 27, 48, 0.54);
  font-size: 10px;
  font-weight: 680;
  letter-spacing: 0.01em;
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease, transform 150ms ease;
}

body.is-studio .studio-mode-rail button::before {
  color: var(--studio-dim);
  font-size: 8px;
}

body.is-studio .studio-mode-rail button::after {
  top: 9px;
  right: 8px;
  width: 4px;
  height: 4px;
  background: currentColor;
}

body.is-studio .studio-mode-rail button:hover,
body.is-studio .studio-mode-rail button.is-active {
  color: var(--studio-ink);
  border-color: rgba(143, 210, 255, 0.58);
  background: rgba(45, 102, 171, 0.38);
  box-shadow: inset 3px 0 0 var(--studio-signal), 0 10px 26px rgba(0, 0, 0, 0.18);
  transform: translateX(1px);
}

body.is-studio .studio-mode-rail button.is-active::before,
body.is-studio .studio-mode-rail button.is-active::after {
  color: var(--studio-signal);
  background: var(--studio-signal);
}

body.is-studio .main.studio-stage {
  min-width: 0;
  min-height: 100dvh;
  padding: 14px clamp(14px, 2vw, 26px) 18px;
  overflow: visible;
}

body.is-studio .studio-topbar {
  width: 100%;
  margin: 0 0 12px;
  padding: 11px 15px;
  border: 1px solid var(--studio-line);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(24, 47, 79, 0.68), rgba(8, 18, 32, 0.64));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 18px 54px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(22px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.2) !important;
}

body.is-studio .studio-topbar .kicker {
  margin-bottom: 5px;
  color: var(--studio-signal);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

body.is-studio .studio-topbar h1 {
  max-width: min(42vw, 580px);
  color: var(--studio-ink);
  font-size: clamp(19px, 1.7vw, 27px);
  line-height: 1.08;
}

body.is-studio .topbar-right {
  min-width: 0;
  gap: 8px;
}

body.is-studio .status-pills {
  max-width: 460px;
  gap: 5px;
}

body.is-studio .status-pills .pill {
  border-color: rgba(168, 204, 249, 0.13);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  color: var(--studio-muted);
  font-size: 10px;
}

body.is-studio .studio-workspace-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(238px, 276px);
  gap: 12px;
  align-items: start;
  width: 100%;
}

body.is-studio .workspace-viewport {
  min-width: 0;
  width: 100%;
  padding: 0;
}

body.is-studio .workspace.studio-board {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  width: 100% !important;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

body.is-studio .studio-console,
body.is-studio .studio-flow-strip,
body.is-studio .studio-content-shell,
body.is-studio .studio-context-panel {
  border: 1px solid var(--studio-line);
  background: linear-gradient(180deg, rgba(23, 45, 77, 0.68), rgba(7, 16, 29, 0.62));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.075), 0 22px 62px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(24px) saturate(1.18) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.18) !important;
}

body.is-studio .studio-console,
body.is-studio .studio-content-shell {
  border-radius: 20px;
}

body.is-studio .studio-console {
  padding: 14px;
}

body.is-studio .studio-console-head {
  gap: 12px;
  margin-bottom: 11px;
}

body.is-studio .studio-console-head h2 {
  color: var(--studio-ink);
  font-size: 17px;
}

body.is-studio .studio-console-head p {
  max-width: 620px;
  color: var(--studio-muted);
  font-size: 11px;
}

body.is-studio .studio-console-actions {
  gap: 6px;
}

body.is-studio .studio-console .panel,
body.is-studio .studio-content-shell .panel,
body.is-studio .video-workflow > .panel {
  border-color: rgba(168, 204, 249, 0.12);
  border-radius: 16px;
  background: rgba(6, 15, 27, 0.46);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.is-studio .studio-console .script-panel {
  min-height: 0;
}

body.is-studio .studio-console .script-panel .editor {
  min-height: 250px;
  max-height: 38dvh;
}

body.is-studio .studio-flow-strip {
  padding: 10px;
  border-radius: 18px;
}

body.is-studio .studio-flow-status {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 7px;
}

body.is-studio .studio-flow-step {
  min-height: 52px;
  padding: 8px 10px;
  border: 1px solid rgba(168, 204, 249, 0.13);
  border-radius: 13px;
  background: rgba(5, 15, 28, 0.46);
  box-shadow: none;
}

body.is-studio .studio-flow-step:hover,
body.is-studio .studio-flow-step.active {
  border-color: var(--studio-line-strong);
  background: rgba(50, 103, 164, 0.34);
  box-shadow: inset 0 -2px 0 var(--studio-signal);
}

body.is-studio .studio-flow-step span {
  color: var(--studio-muted);
  font-size: 10px;
}

body.is-studio .studio-flow-step strong {
  margin-top: 3px;
  color: var(--studio-ink);
  font-size: 11px;
}

body.is-studio .studio-content-shell {
  padding: 10px;
  border-radius: 20px;
}

body.is-studio .studio-tabbar {
  min-height: 42px;
  gap: 5px;
  padding: 3px;
  border: 1px solid rgba(168, 204, 249, 0.1);
  border-radius: 13px;
  background: rgba(4, 11, 21, 0.48);
}

body.is-studio .studio-tab-button {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 10px;
  color: var(--studio-muted);
  font-size: 11px;
}

body.is-studio .studio-tab-button:hover,
body.is-studio .studio-tab-button.is-active {
  color: #061007;
  background: var(--studio-signal);
  box-shadow: none;
}

body.is-studio .studio-tab-panels {
  padding-top: 10px;
}

body.is-studio .studio-context-panel {
  position: sticky;
  top: 14px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 300px;
  border-radius: 20px;
  overflow: hidden;
}

body.is-studio .studio-context-head {
  display: grid;
  gap: 6px;
  padding: 18px 18px 16px;
  border-bottom: 1px solid var(--studio-line);
  background: rgba(24, 47, 79, 0.28);
}

body.is-studio .studio-eyebrow {
  color: var(--studio-signal);
  font-size: 9px;
  letter-spacing: 0.16em;
}

body.is-studio .studio-context-head h2 {
  color: var(--studio-ink);
  font-size: 13px;
  line-height: 1.3;
  letter-spacing: 0.05em;
}

body.is-studio .studio-context-body {
  padding: 18px;
}

body.is-studio .studio-context-body p {
  color: var(--studio-muted);
  font-size: 11px;
  line-height: 1.65;
}

body.is-studio .studio-context-list {
  display: grid;
  margin-top: 18px;
  border-top: 1px solid var(--studio-line);
}

body.is-studio .studio-context-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--studio-line);
  color: var(--studio-muted);
  font-size: 10px;
}

body.is-studio .studio-context-row strong {
  max-width: 58%;
  color: var(--studio-ink);
  font-size: 10px;
  font-weight: 650;
  text-align: right;
}

body.is-studio .studio-context-actions {
  padding: 14px 18px 18px;
  border-top: 1px solid var(--studio-line);
  background: rgba(5, 13, 24, 0.24);
}

body.is-studio .studio-context-actions button {
  width: 100%;
}

body.is-studio button.primary,
body.is-studio .primary {
  border-radius: 10px;
}

body.is-studio .panel,
body.is-studio .studio-context-panel,
body.is-studio .studio-topbar,
body.is-studio .studio-console,
body.is-studio .studio-content-shell,
body.is-studio .studio-flow-strip {
  animation: none !important;
}

@media (max-width: 1240px) {
  body.is-studio .studio-workspace-layout {
    grid-template-columns: minmax(0, 1fr) 238px;
  }

  body.is-studio .studio-flow-status {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  body.is-studio .studio-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  body.is-studio .studio-sidebar {
    position: static;
    min-height: 0;
    padding: 8px 12px;
    border-right: 0;
    border-bottom: 1px solid var(--studio-line);
  }

  body.is-studio .studio-sidebar-brand {
    display: none;
  }

  body.is-studio .studio-mode-rail {
    display: flex;
    overflow-x: auto;
    gap: 7px;
  }

  body.is-studio .studio-mode-rail button {
    flex: 0 0 66px;
    min-height: 42px;
  }

  body.is-studio .studio-workspace-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  body.is-studio .studio-context-panel {
    position: static;
    min-height: 0;
  }

  body.is-studio .studio-context-body {
    padding: 14px 18px;
  }

  body.is-studio .studio-context-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    border-top: 0;
  }

  body.is-studio .studio-context-row {
    display: grid;
    gap: 4px;
    border-top: 1px solid var(--studio-line);
    border-bottom: 0;
  }

  body.is-studio .studio-context-row strong {
    max-width: none;
    text-align: left;
  }
}

@media (prefers-reduced-transparency: reduce) {
  body.is-studio .studio-sidebar,
  body.is-studio .studio-topbar,
  body.is-studio .studio-console,
  body.is-studio .studio-flow-strip,
  body.is-studio .studio-content-shell,
  body.is-studio .studio-context-panel {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: #0d1c30;
  }
}


/* Final Production OS workflow surface v20260723.
   Visual shell only: preserve existing ids, handlers, and generation flow. */
body.is-studio {
  --studio-bg: #06101d;
  --studio-panel: rgba(17, 33, 57, 0.68);
  --studio-panel-soft: rgba(8, 18, 32, 0.56);
  --studio-line: rgba(169, 207, 255, 0.16);
  --studio-line-strong: rgba(174, 221, 255, 0.42);
  --studio-ink: #f6fbff;
  --studio-muted: rgba(202, 218, 241, 0.66);
  --studio-dim: rgba(132, 153, 181, 0.58);
  --studio-signal: #b9ef74;
  --studio-blue: #61b7ff;
  --studio-card-radius: 18px;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% -12%, rgba(58, 133, 255, 0.36), transparent 34rem),
    radial-gradient(circle at 92% 2%, rgba(91, 206, 255, 0.12), transparent 26rem),
    linear-gradient(180deg, #091a2f 0%, #06101d 48%, #040911 100%);
}

body.is-studio #app,
body.is-studio .studio-shell {
  min-height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
}

body.is-studio .studio-shell {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  background:
    linear-gradient(90deg, rgba(1, 5, 11, 0.38), transparent 18rem),
    radial-gradient(circle, rgba(165, 207, 255, 0.12) 1px, transparent 1.2px);
  background-size: auto, 14px 14px;
}

body.is-studio .studio-sidebar {
  position: relative;
  z-index: 60;
  min-height: 100dvh;
  padding: 14px 10px;
  border-right: 1px solid var(--studio-line);
  background: rgba(5, 13, 25, 0.64);
  box-shadow: 18px 0 70px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(22px) saturate(1.18) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.18) !important;
}

body.is-studio .studio-sidebar-brand {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 2px 0 18px;
  color: var(--studio-dim);
  font-size: 8px;
  letter-spacing: 0.12em;
  text-align: center;
}

body.is-studio .studio-sidebar-brand .mark {
  width: 62px;
  height: auto;
  aspect-ratio: 960 / 165;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
  overflow: visible;
}

body.is-studio .studio-mode-rail {
  display: grid;
  gap: 8px;
  padding: 0;
}

body.is-studio .studio-mode-rail button {
  position: relative;
  width: 100%;
  min-height: 58px;
  padding: 8px 7px 7px;
  border: 1px solid var(--studio-line);
  border-radius: 14px;
  background: rgba(12, 26, 47, 0.58);
  color: var(--studio-muted);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
  font-size: 11px;
  font-weight: 720;
  line-height: 1.1;
  letter-spacing: 0;
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    background-color 160ms ease,
    color 160ms ease,
    box-shadow 160ms ease;
}

body.is-studio .studio-mode-rail button::before {
  color: var(--studio-dim);
  font-size: 8px;
  font-weight: 760;
}

body.is-studio .studio-mode-rail button:hover,
body.is-studio .studio-mode-rail button.is-active {
  border-color: var(--studio-line-strong);
  background: rgba(55, 113, 178, 0.36);
  color: var(--studio-ink);
  box-shadow:
    inset 3px 0 0 var(--studio-signal),
    0 14px 30px rgba(0, 0, 0, 0.18);
  transform: translateX(2px);
}

body.is-studio .studio-mode-rail button.is-active::before,
body.is-studio .studio-mode-rail button.is-active::after {
  color: var(--studio-signal);
  background: var(--studio-signal);
}

body.is-studio .main.studio-stage {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 12px;
  min-width: 0;
  min-height: 0;
  max-height: 100dvh;
  padding: 14px clamp(14px, 2vw, 28px) 14px;
  overflow: hidden;
}

body.is-studio .studio-topbar {
  position: relative;
  top: auto;
  z-index: 30;
  display: grid;
  grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 12px 16px;
  border: 1px solid var(--studio-line);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(30, 58, 95, 0.72), rgba(8, 18, 32, 0.62)),
    rgba(8, 18, 32, 0.6);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 20px 64px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(26px) saturate(1.22) !important;
  -webkit-backdrop-filter: blur(26px) saturate(1.22) !important;
}

body.is-studio .studio-topbar .kicker {
  margin: 0 0 5px;
  color: var(--studio-signal);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

body.is-studio .studio-topbar h1 {
  max-width: min(46vw, 620px);
  color: var(--studio-ink);
  font-size: clamp(20px, 1.9vw, 30px);
  line-height: 1.08;
}

body.is-studio .topbar-right {
  min-width: 0;
  justify-content: flex-end;
  gap: 8px;
}

body.is-studio .workspace-controls {
  display: none !important;
}

body.is-studio .status-pills {
  max-width: 460px;
  justify-content: flex-end;
  gap: 6px;
}

body.is-studio .status-pills .pill {
  border-color: rgba(169, 207, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  color: var(--studio-muted);
  font-size: 10px;
}

body.is-studio .studio-workspace-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 310px);
  gap: 12px;
  align-items: stretch;
  min-height: 0;
  overflow: hidden;
}

body.is-studio .workspace-viewport {
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  overflow: auto;
}

body.is-studio .workspace.studio-board {
  position: static;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-areas: none !important;
  gap: 12px;
  width: 100% !important;
  height: auto !important;
  min-height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
  transform: none !important;
}

body.is-studio #workspace.workspace.studio-board > .studio-console,
body.is-studio #workspace.workspace.studio-board > .studio-flow-strip,
body.is-studio #workspace.workspace.studio-board > .studio-content-shell {
  grid-column: 1 / -1 !important;
}

body.is-studio .studio-console,
body.is-studio .studio-flow-strip,
body.is-studio .studio-content-shell,
body.is-studio .studio-context-panel {
  border: 1px solid var(--studio-line);
  background:
    linear-gradient(180deg, rgba(29, 55, 90, 0.68), rgba(8, 18, 32, 0.6)),
    rgba(8, 18, 32, 0.58);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.075),
    0 24px 70px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(24px) saturate(1.18) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.18) !important;
}

body.is-studio .studio-console,
body.is-studio .studio-content-shell {
  border-radius: 20px;
  padding: 12px;
}

body.is-studio .studio-console-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

body.is-studio .studio-console-head h2 {
  color: var(--studio-ink);
  font-size: 18px;
}

body.is-studio .studio-console-head p {
  max-width: 660px;
  color: var(--studio-muted);
  font-size: 12px;
}

body.is-studio .studio-console .panel,
body.is-studio .studio-content-shell .panel,
body.is-studio .video-workflow > .panel {
  position: static !important;
  width: auto !important;
  height: auto !important;
  min-height: 0;
  border-color: rgba(169, 207, 255, 0.12);
  border-radius: 16px;
  background: rgba(5, 14, 26, 0.48);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
  overflow: visible;
  transform: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.is-studio .script-panel .editor {
  min-height: 260px;
  max-height: 38dvh;
  resize: vertical;
}

body.is-studio .studio-flow-strip {
  padding: 10px;
  border-radius: 18px;
}

body.is-studio .studio-flow-status {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

body.is-studio .studio-flow-step {
  position: relative;
  min-height: 54px;
  padding: 9px 10px;
  border: 1px solid rgba(169, 207, 255, 0.13);
  border-radius: 14px;
  background: rgba(5, 14, 26, 0.46);
  box-shadow: none;
  overflow: hidden;
}

body.is-studio .studio-flow-step::after {
  content: "";
  position: absolute;
  inset: auto 10px 7px 10px;
  height: 2px;
  border-radius: 999px;
  background: rgba(185, 239, 116, 0);
  transition: background-color 180ms ease, box-shadow 180ms ease;
}

body.is-studio .studio-flow-step:hover,
body.is-studio .studio-flow-step.active {
  border-color: var(--studio-line-strong);
  background: rgba(50, 103, 164, 0.34);
}

body.is-studio .studio-flow-step.active::after,
body.is-studio .studio-flow-step.ok::after {
  background: var(--studio-signal);
  box-shadow: 0 0 14px rgba(185, 239, 116, 0.38);
}

body.is-studio .studio-flow-step span {
  color: var(--studio-muted);
  font-size: 10px;
}

body.is-studio .studio-flow-step strong {
  margin-top: 3px;
  color: var(--studio-ink);
  font-size: 12px;
}

body.is-studio .studio-tabbar {
  display: flex;
  gap: 5px;
  min-height: 42px;
  padding: 3px;
  border: 1px solid rgba(169, 207, 255, 0.1);
  border-radius: 14px;
  background: rgba(3, 10, 20, 0.5);
}

body.is-studio .studio-tab-button {
  position: relative;
  min-height: 34px;
  padding: 0 13px;
  border-radius: 11px;
  color: var(--studio-muted);
  font-size: 11px;
  box-shadow: none;
  overflow: hidden;
}

body.is-studio .studio-tab-button:hover,
body.is-studio .studio-tab-button.is-active {
  color: #071105;
  background: var(--studio-signal);
  box-shadow: 0 10px 24px rgba(185, 239, 116, 0.14);
}

body.is-studio .studio-tab-panels {
  min-height: 0;
  padding-top: 10px;
}

body.is-studio .studio-context-panel {
  position: sticky;
  top: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 0;
  height: 100%;
  border-radius: 20px;
  overflow: hidden;
}

body.is-studio .studio-context-head {
  display: grid;
  gap: 6px;
  padding: 18px 18px 16px;
  border-bottom: 1px solid var(--studio-line);
  background: rgba(28, 53, 86, 0.28);
}

body.is-studio .studio-eyebrow {
  color: var(--studio-signal);
  font-size: 9px;
  letter-spacing: 0.16em;
}

body.is-studio .studio-context-head h2 {
  color: var(--studio-ink);
  font-size: 13px;
  line-height: 1.3;
  letter-spacing: 0.04em;
}

body.is-studio .studio-context-body {
  min-height: 0;
  padding: 18px;
  overflow: auto;
}

body.is-studio .studio-context-body p {
  color: var(--studio-muted);
  font-size: 11px;
  line-height: 1.65;
}

body.is-studio .studio-context-list {
  display: grid;
  margin-top: 18px;
  border-top: 1px solid var(--studio-line);
}

body.is-studio .studio-context-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--studio-line);
  color: var(--studio-muted);
  font-size: 10px;
}

body.is-studio .studio-context-row strong {
  max-width: 58%;
  color: var(--studio-ink);
  font-size: 10px;
  font-weight: 650;
  text-align: right;
}

body.is-studio .studio-context-actions {
  padding: 14px 18px 18px;
  border-top: 1px solid var(--studio-line);
  background: rgba(5, 13, 24, 0.24);
}

body.is-studio .studio-context-actions button {
  width: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  body.is-studio .studio-topbar,
  body.is-studio .studio-console,
  body.is-studio .studio-flow-strip,
  body.is-studio .studio-content-shell,
  body.is-studio .studio-context-panel {
    animation: studioSurfaceIn 260ms ease both !important;
  }

  body.is-studio .studio-console,
  body.is-studio .studio-content-shell {
    animation-delay: 45ms !important;
  }

  body.is-studio .studio-context-panel {
    animation-delay: 80ms !important;
  }

  body.is-studio .studio-mode-rail button,
  body.is-studio .studio-tab-button,
  body.is-studio .studio-flow-step,
  body.is-studio .panel,
  body.is-studio .studio-context-row {
    transition:
      transform 160ms ease,
      border-color 160ms ease,
      background-color 160ms ease,
      box-shadow 160ms ease,
      color 160ms ease;
  }

  body.is-studio .panel:hover,
  body.is-studio .studio-context-row:hover,
  body.is-studio .studio-flow-step:hover {
    transform: translateY(-1px);
  }

  body.is-studio .studio-tab-button.is-active::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.1) 42%, transparent 68%);
    transform: translateX(-120%);
    animation: studioSoftSweep 2.8s ease-in-out infinite !important;
    pointer-events: none;
  }
}

@keyframes studioSurfaceIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.992);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes studioSoftSweep {
  0%, 42% {
    transform: translateX(-120%);
  }
  72%, 100% {
    transform: translateX(120%);
  }
}

@media (max-width: 1240px) {
  body.is-studio .studio-workspace-layout {
    grid-template-columns: minmax(0, 1fr) 248px;
  }

  body.is-studio .studio-flow-status {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  body.is-studio {
    overflow: auto;
  }

  body.is-studio #app,
  body.is-studio .studio-shell {
    max-height: none;
    overflow: visible;
  }

  body.is-studio .studio-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  body.is-studio .studio-sidebar {
    min-height: 0;
    padding: 8px 12px;
    border-right: 0;
    border-bottom: 1px solid var(--studio-line);
  }

  body.is-studio .studio-sidebar-brand {
    display: none;
  }

  body.is-studio .studio-mode-rail {
    display: flex;
    gap: 7px;
    overflow-x: auto;
  }

  body.is-studio .studio-mode-rail button {
    flex: 0 0 68px;
    min-height: 42px;
  }

  body.is-studio .main.studio-stage {
    max-height: none;
    overflow: visible;
    padding: 12px;
  }

  body.is-studio .studio-topbar,
  body.is-studio .studio-workspace-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  body.is-studio .workspace-viewport,
  body.is-studio .studio-context-panel {
    height: auto;
    overflow: visible;
  }

  body.is-studio .studio-context-panel {
    position: static;
  }

  body.is-studio .studio-flow-status {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.is-studio .studio-context-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    border-top: 0;
  }

  body.is-studio .studio-context-row {
    display: grid;
    gap: 4px;
    border-top: 1px solid var(--studio-line);
    border-bottom: 0;
  }

  body.is-studio .studio-context-row strong {
    max-width: none;
    text-align: left;
  }
}


/* Studio workflow correction v20260723-3.
   Turn the old form stack into a focused production desk without touching handlers. */
body.is-studio {
  --studio-bg: #050b13;
  --studio-panel: rgba(12, 24, 42, 0.62);
  --studio-panel-strong: rgba(15, 32, 56, 0.78);
  --studio-line: rgba(147, 191, 248, 0.12);
  --studio-line-strong: rgba(129, 203, 255, 0.36);
  --studio-ink: #f4f8ff;
  --studio-muted: rgba(199, 214, 237, 0.62);
  --studio-dim: rgba(129, 150, 178, 0.46);
  --studio-signal: #baff5f;
  background:
    radial-gradient(circle at 18% -10%, rgba(73, 151, 255, 0.28), transparent 30rem),
    radial-gradient(circle at 90% 0%, rgba(111, 216, 255, 0.1), transparent 24rem),
    linear-gradient(180deg, #061423 0%, #050b13 62%, #03070d 100%);
}

body.is-studio .studio-shell {
  grid-template-columns: 78px minmax(0, 1fr);
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, 0.026) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.026) 1px, transparent 1px);
  background-size: 24px 24px;
}

body.is-studio .studio-sidebar {
  padding: 10px 8px;
  border-right-color: rgba(147, 191, 248, 0.1);
  background: rgba(3, 8, 15, 0.78);
  box-shadow: 12px 0 46px rgba(0, 0, 0, 0.26);
}

body.is-studio .studio-sidebar-brand {
  gap: 6px;
  padding-bottom: 14px;
  font-size: 7px;
  color: rgba(198, 215, 240, 0.42);
}

body.is-studio .studio-sidebar-brand .mark {
  width: 54px;
}

body.is-studio .studio-mode-rail {
  gap: 7px;
}

body.is-studio .studio-mode-rail button {
  min-height: 52px;
  border-radius: 16px;
  background: rgba(9, 20, 35, 0.58);
  color: rgba(209, 224, 247, 0.56);
}

body.is-studio .studio-mode-rail button:hover,
body.is-studio .studio-mode-rail button.is-active {
  border-color: rgba(187, 255, 95, 0.5);
  background:
    linear-gradient(180deg, rgba(186, 255, 95, 0.13), rgba(98, 183, 255, 0.08)),
    rgba(10, 23, 41, 0.76);
  color: var(--studio-ink);
  box-shadow:
    inset 0 0 0 1px rgba(186, 255, 95, 0.12),
    0 14px 34px rgba(0, 0, 0, 0.22);
  transform: translateX(0) scale(1.015);
}

body.is-studio .main.studio-stage {
  grid-template-rows: 72px minmax(0, 1fr) 32px;
  gap: 10px;
  padding: 12px 18px 10px;
}

body.is-studio .studio-topbar {
  height: 72px;
  padding: 0 4px 8px;
  border: 0;
  border-bottom: 1px solid rgba(147, 191, 248, 0.12);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.is-studio .studio-topbar .kicker {
  margin-bottom: 4px;
  color: var(--studio-signal);
  font-size: 9px;
}

body.is-studio .studio-topbar h1 {
  max-width: min(52vw, 760px);
  font-size: clamp(22px, 2.15vw, 34px);
  letter-spacing: 0;
}

body.is-studio .topbar-right {
  gap: 7px;
}

body.is-studio #backToProjects,
body.is-studio .status-pills .pill {
  min-height: 34px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.04);
}

body.is-studio .studio-workspace-layout {
  grid-template-columns: minmax(0, 1fr) minmax(270px, 330px);
  gap: 14px;
  min-height: 0;
}

body.is-studio .workspace-viewport {
  border: 0;
  border-radius: 0;
  background: transparent;
}

body.is-studio .workspace.studio-board {
  grid-template-rows: minmax(0, 1fr) auto auto;
  gap: 10px;
  min-height: 0;
  height: 100% !important;
}

body.is-studio .studio-console {
  display: grid;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.is-studio .studio-console-head {
  display: none !important;
}

body.is-studio .studio-console .script-panel {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  min-height: 0;
  padding: 18px;
  border-radius: 24px;
  border: 1px solid var(--studio-line-strong);
  background:
    linear-gradient(180deg, rgba(18, 37, 64, 0.9), rgba(5, 13, 24, 0.78)),
    rgba(7, 16, 29, 0.84);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 24px 80px rgba(0, 0, 0, 0.28);
}

body.is-studio .script-panel .section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: start;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(147, 191, 248, 0.12);
}

body.is-studio .script-panel .section-head h2 {
  font-size: 16px;
}

body.is-studio .script-panel .section-head .actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: 640px;
  gap: 8px;
}

body.is-studio .script-upload-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

body.is-studio .script-upload-row .upload-pill,
body.is-studio .asset-document-upload .upload-pill {
  position: relative;
}

body.is-studio .script-upload-row .upload-pill::after,
body.is-studio .asset-document-upload .upload-pill::after {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  z-index: 3;
  padding: 7px 10px;
  border: 1px solid var(--studio-line-strong);
  border-radius: 9px;
  background: rgba(8, 17, 31, 0.94);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.26);
  color: var(--studio-ink);
  content: attr(data-upload-tooltip);
  font-size: 11px;
  line-height: 1.2;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 4px);
  transition: opacity 120ms ease, transform 120ms ease;
  white-space: nowrap;
}

body.is-studio .script-upload-row .upload-pill:hover::after,
body.is-studio .script-upload-row .upload-pill:focus-visible::after,
body.is-studio .script-upload-row #workflowScriptUpload:focus-visible + .upload-pill::after,
body.is-studio .asset-document-upload .upload-pill:hover::after,
body.is-studio .asset-document-upload .upload-pill:focus-visible::after,
body.is-studio .asset-document-upload #assetDescriptionUpload:focus-visible + .upload-pill::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

body.is-studio .script-upload-row #workflowScriptUploadName:empty {
  display: none;
}

body.is-studio .script-upload-row #workflowScriptUploadName {
  color: var(--studio-muted);
  font-size: 11px;
}

body.is-studio .asset-document-source {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 14px 28px 0;
  padding: 12px 14px;
  border: 1px solid var(--studio-line);
  border-radius: 13px;
  background: rgba(17, 31, 54, 0.32);
}

body.is-studio .asset-document-source-label {
  display: grid;
  gap: 4px;
  min-width: 0;
}

body.is-studio .asset-document-source-label strong {
  color: var(--studio-ink);
  font-size: 12px;
}

body.is-studio .asset-document-source-label span {
  color: var(--studio-muted);
  font-size: 11px;
}

body.is-studio .asset-document-upload {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 8px;
}

body.is-studio .asset-document-upload #assetDescriptionUploadName:empty {
  display: none;
}

body.is-studio .asset-document-upload #assetDescriptionUploadName {
  max-width: 180px;
  color: var(--studio-muted);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.is-studio .dual-input-hint {
  margin: 14px 0 10px;
  color: rgba(229, 238, 251, 0.74);
  font-size: 13px;
}

body.is-studio .script-panel .editor {
  min-height: 0;
  max-height: none;
  height: 100%;
  border: 1px solid rgba(147, 191, 248, 0.13);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(2, 7, 14, 0.9), rgba(2, 8, 15, 0.74));
  color: rgba(236, 244, 255, 0.9);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    inset 0 0 0 1px rgba(0, 0, 0, 0.18);
  line-height: 1.72;
}

body.is-studio .studio-flow-strip {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.is-studio .studio-flow-status {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

body.is-studio .studio-flow-step {
  min-height: 46px;
  padding: 8px 10px;
  border-radius: 16px;
  background: rgba(9, 20, 35, 0.58);
}

body.is-studio .studio-flow-step strong {
  font-size: 11px;
}

body.is-studio .studio-content-shell:has(.studio-tab-panel.is-active[hidden]) {
  display: none;
}

body.is-studio .studio-content-shell {
  padding: 10px;
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(17, 35, 61, 0.74), rgba(5, 13, 24, 0.64)),
    rgba(7, 16, 29, 0.68);
}

body.is-studio .studio-tabbar {
  min-height: 40px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(2, 7, 14, 0.58);
}

body.is-studio .studio-tab-button {
  border-radius: 999px;
}

body.is-studio .studio-tab-button:hover,
body.is-studio .studio-tab-button.is-active {
  background: var(--studio-signal);
}

body.is-studio .studio-context-panel {
  align-self: start;
  height: auto;
  min-height: 0;
  max-height: calc(100dvh - 138px);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(18, 37, 64, 0.84), rgba(5, 13, 24, 0.72)),
    rgba(7, 16, 29, 0.74);
}

body.is-studio .studio-context-head {
  padding: 18px 18px 14px;
}

body.is-studio .studio-context-body {
  padding: 16px 18px;
}

body.is-studio .studio-context-body p {
  margin: 0;
}

body.is-studio .studio-context-list {
  margin-top: 16px;
}

body.is-studio .studio-context-row {
  padding: 11px 0;
}

body.is-studio .studio-context-actions {
  padding: 14px 18px 18px;
}

body.is-studio .studio-context-actions button {
  min-height: 38px;
  border-radius: 13px;
}

@media (prefers-reduced-motion: no-preference) {
  body.is-studio .studio-console .script-panel,
  body.is-studio .studio-context-panel,
  body.is-studio .studio-flow-step {
    animation: studioSurfaceIn 240ms ease both !important;
  }

  body.is-studio .script-panel .editor:focus {
    box-shadow:
      inset 0 0 0 1px rgba(97, 183, 255, 0.38),
      0 0 0 4px rgba(97, 183, 255, 0.09);
  }
}

@media (max-width: 1240px) {
  body.is-studio .studio-workspace-layout {
    grid-template-columns: minmax(0, 1fr) 270px;
  }

  body.is-studio .script-panel .section-head {
    grid-template-columns: minmax(0, 1fr);
  }

  body.is-studio .script-panel .section-head .actions {
    justify-content: flex-start;
  }
}

@media (max-width: 900px) {
  body.is-studio .main.studio-stage {
    grid-template-rows: auto auto auto;
  }

  body.is-studio .studio-workspace-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  body.is-studio .studio-context-panel {
    max-height: none;
  }

  body.is-studio .studio-flow-status {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Production OS reference match v20260723-4.
   Align the workflow with the approved one-screen production desk reference. */
body.is-studio {
  --studio-bg: #07101d;
  --studio-panel: rgba(15, 28, 49, 0.72);
  --studio-panel-2: rgba(28, 50, 82, 0.52);
  --studio-line: rgba(161, 199, 246, 0.14);
  --studio-line-strong: rgba(166, 207, 255, 0.34);
  --studio-ink: #f4f8ff;
  --studio-muted: #91a1ba;
  --studio-dim: #53647e;
  --studio-signal: #9ff06b;
  --studio-accent: #8fd8ff;
  --studio-danger: #ff7b86;
  --studio-warning: #f7d176;
  min-width: 1180px;
  overflow: hidden;
  background:
    radial-gradient(circle at 22% -8%, rgba(53, 126, 255, 0.36), transparent 34rem),
    radial-gradient(circle at 89% 14%, rgba(76, 198, 255, 0.1), transparent 28rem),
    radial-gradient(circle, rgba(142, 190, 246, 0.2) 1px, transparent 1.4px),
    linear-gradient(180deg, #0a1628 0%, #07101d 52%, #050b15 100%) !important;
  background-size: auto, auto, 12px 12px, auto !important;
  color: var(--studio-ink);
}

body.is-studio #app,
body.is-studio .studio-shell {
  width: 100vw;
  height: 100dvh;
  max-height: none;
  overflow: hidden;
}

body.is-studio .studio-shell {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  padding: 16px 22px 14px !important;
  background: transparent !important;
}

body.is-studio .studio-sidebar {
  display: none !important;
}

body.is-studio .main.studio-stage {
  display: grid !important;
  grid-template-rows: 64px 68px minmax(0, 1fr) 32px !important;
  gap: 12px !important;
  width: 100%;
  height: calc(100dvh - 30px);
  max-height: none !important;
  min-width: 0;
  overflow: hidden !important;
  padding: 0 !important;
  background: transparent !important;
}

body.is-studio .studio-topbar,
body.is-studio .studio-flow-strip,
body.is-studio .workspace-viewport,
body.is-studio .studio-context-panel {
  border: 1px solid var(--studio-line) !important;
  background:
    linear-gradient(180deg, rgba(25, 45, 76, 0.72), rgba(9, 19, 34, 0.64)),
    rgba(9, 19, 34, 0.52) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 22px 70px rgba(0, 0, 0, 0.2) !important;
  backdrop-filter: blur(24px) saturate(1.25) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.25) !important;
}

body.is-studio .studio-topbar {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  height: 64px !important;
  min-height: 64px !important;
  padding: 0 20px !important;
  border-radius: 18px !important;
}

body.is-studio .studio-title-block {
  display: flex;
  align-items: baseline;
  gap: 14px;
  min-width: 0;
}

body.is-studio .studio-topbar .kicker {
  margin: 0 !important;
  color: var(--studio-ink) !important;
  font-size: 17px !important;
  font-weight: 800;
  letter-spacing: 0.16em;
  line-height: 1;
}

body.is-studio .studio-topbar h1 {
  min-width: 0;
  max-width: min(46vw, 760px) !important;
  margin: 0 !important;
  color: var(--studio-muted);
  font-size: 12px !important;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
}

body.is-studio .studio-topbar h1::before {
  content: "/";
  margin-right: 12px;
  color: rgba(145, 161, 186, 0.7);
}

body.is-studio .topbar-right {
  display: flex !important;
  align-items: center;
  gap: 9px !important;
  min-width: max-content;
}

body.is-studio .workspace-controls,
body.is-studio .status-pills {
  display: none !important;
}

body.is-studio .studio-command-button,
body.is-studio #backToProjects {
  min-height: 38px !important;
  padding: 0 11px !important;
  border-radius: 10px !important;
  border: 1px solid var(--studio-line) !important;
  background: rgba(255, 255, 255, 0.045) !important;
  color: #cfdef2 !important;
  font-size: 13px;
  font-weight: 650;
  box-shadow: none !important;
}

body.is-studio .studio-command-button kbd {
  margin-left: 8px;
  border: 0;
  background: transparent;
  color: var(--studio-ink);
  font-size: 11px;
  font-family: inherit;
}

body.is-studio .studio-save-state {
  padding-right: 12px;
  border-right: 1px solid var(--studio-line);
  color: var(--studio-muted);
  font-size: 12px;
  white-space: nowrap;
}

body.is-studio .studio-primary-run,
body.is-studio .studio-context-actions .primary {
  min-height: 42px !important;
  border: 0 !important;
  border-radius: 11px !important;
  padding: 0 15px !important;
  background: linear-gradient(180deg, #a9e9ff, #62bfff) !important;
  color: #092034 !important;
  font-weight: 800 !important;
  box-shadow: 0 12px 28px rgba(61, 170, 255, 0.24) !important;
}

body.is-studio .studio-primary-run:disabled {
  opacity: 0.56;
}

body.is-studio .project-display-name-form {
  position: absolute;
  left: 210px;
  top: 13px;
  z-index: 2;
  width: min(440px, 42vw);
}

body.is-studio .studio-flow-strip {
  display: flex !important;
  align-items: center;
  gap: 18px;
  height: 68px !important;
  min-height: 68px !important;
  padding: 0 14px !important;
  border-radius: 18px !important;
}

body.is-studio .studio-flow-status {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(130px, 1fr)) !important;
  flex: 1 1 auto;
  align-self: stretch;
  gap: 0 !important;
  min-width: 0;
  border-radius: 13px;
  overflow: hidden;
}

body.is-studio .studio-flow-step {
  position: relative;
  display: flex !important;
  align-items: center;
  gap: 9px;
  min-height: 0 !important;
  height: 100%;
  border: 0 !important;
  border-right: 1px solid var(--studio-line) !important;
  border-radius: 0 !important;
  padding: 0 16px !important;
  background: transparent !important;
  color: var(--studio-muted) !important;
  text-align: left;
  box-shadow: none !important;
  overflow: hidden;
}

body.is-studio .studio-flow-step:first-child {
  border-left: 1px solid var(--studio-line) !important;
}

body.is-studio .studio-flow-step::after {
  content: "";
  position: absolute;
  right: 16px;
  bottom: 0;
  left: 16px;
  height: 2px;
  background: rgba(161, 199, 246, 0.16);
}

body.is-studio .studio-flow-step.ok::after,
body.is-studio .studio-flow-step.active::after {
  background: var(--studio-signal);
}

body.is-studio .studio-flow-step.warn::after {
  background: var(--studio-warning);
}

body.is-studio .studio-flow-step.active {
  background: rgba(94, 162, 255, 0.14) !important;
  color: var(--studio-ink) !important;
}

body.is-studio .studio-flow-step:hover {
  transform: none !important;
  background: rgba(94, 162, 255, 0.1) !important;
}

body.is-studio .studio-flow-dot {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--studio-dim);
}

body.is-studio .studio-flow-step.ok .studio-flow-dot,
body.is-studio .studio-flow-step.active .studio-flow-dot {
  background: var(--studio-accent);
  box-shadow: 0 0 12px rgba(143, 216, 255, 0.68);
}

body.is-studio .studio-flow-step.warn .studio-flow-dot {
  background: var(--studio-warning);
}

body.is-studio .studio-flow-step span,
body.is-studio .studio-flow-step strong {
  display: block;
  position: relative;
  z-index: 1;
  line-height: 1.25;
}

body.is-studio .studio-flow-step span {
  color: inherit;
  font-size: 11px;
  font-weight: 780;
  letter-spacing: 0.08em;
}

body.is-studio .studio-flow-step strong {
  margin-top: 2px;
  color: inherit;
  font-size: 10px !important;
  font-weight: 560;
  text-transform: none;
}

body.is-studio .studio-flow-progress {
  flex: 0 0 auto;
  color: var(--studio-muted);
  font-size: 11px;
  white-space: nowrap;
}

body.is-studio .empty {
  display: none !important;
}

body.is-studio .studio-workspace-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 320px !important;
  gap: 12px !important;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

body.is-studio .workspace-viewport {
  min-width: 0;
  height: 100% !important;
  min-height: 0;
  border-radius: 24px !important;
  overflow: hidden !important;
}

body.is-studio .workspace.studio-board {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  background: transparent !important;
}

body.is-studio .studio-console,
body.is-studio .studio-content-shell {
  width: 100%;
  height: 100%;
  min-height: 0;
}

body.is-studio .studio-console {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.is-studio .studio-console .script-panel,
body.is-studio .studio-content-shell {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.is-studio .studio-console .script-panel {
  display: grid !important;
  grid-template-rows: 86px auto minmax(0, 1fr) !important;
  height: 100%;
  padding: 0 !important;
}

body.is-studio .script-panel .section-head,
body.is-studio .studio-tab-panel.is-active > .panel > .section-head,
body.is-studio .video-workflow .section-head {
  display: flex !important;
  align-items: end;
  justify-content: space-between;
  min-height: 86px;
  margin: 0 !important;
  padding: 0 28px 18px !important;
  border-bottom: 1px solid var(--studio-line) !important;
  background: rgba(17, 31, 54, 0.34);
}

body.is-studio .script-panel .section-head h2,
body.is-studio .studio-tab-panel.is-active > .panel > .section-head h2,
body.is-studio .video-workflow .section-head h2 {
  margin: 7px 0 0 !important;
  color: var(--studio-ink);
  font-size: clamp(22px, 2.2vw, 34px) !important;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: 0;
}

body.is-studio .script-panel .section-head p,
body.is-studio .studio-tab-panel.is-active > .panel > .section-head p,
body.is-studio .video-workflow .section-head p {
  color: var(--studio-muted) !important;
  font-size: 11px !important;
}

body.is-studio .section-label {
  color: var(--studio-signal) !important;
  font-size: 10px !important;
  letter-spacing: 0.16em;
}

body.is-studio .script-panel .section-head .actions {
  align-items: center;
  max-width: 680px;
  gap: 8px;
}

body.is-studio .script-panel .dual-input-hint {
  max-width: 720px;
  margin: 0 !important;
  padding: 28px 28px 14px;
  color: #b2b7bf !important;
  font-size: 15px;
  line-height: 1.7;
}

body.is-studio .script-panel .editor {
  width: min(880px, calc(100% - 56px));
  height: calc(100% - 28px) !important;
  min-height: 220px;
  margin: 0 28px 28px !important;
  border: 1px solid var(--studio-line) !important;
  border-radius: 15px !important;
  background:
    linear-gradient(180deg, rgba(10, 18, 32, 0.72), rgba(5, 10, 18, 0.82)),
    rgba(8, 17, 31, 0.56) !important;
  color: #d8e5f6 !important;
  font-size: 14px;
  line-height: 1.75;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

body.is-studio .studio-content-shell {
  display: grid !important;
  grid-template-rows: 0 minmax(0, 1fr);
  padding: 0 !important;
  overflow: hidden;
}

body.is-studio[data-studio-focus="script"] .studio-content-shell {
  display: none !important;
}

body.is-studio .studio-tabbar {
  display: none !important;
}

body.is-studio .studio-content-shell {
  grid-template-rows: minmax(0, 1fr) !important;
}

body.is-studio .studio-tab-panels,
body.is-studio .studio-tab-panel.is-active,
body.is-studio .studio-tab-panel.is-active > .panel,
body.is-studio .video-workflow,
body.is-studio .video-workflow > .panel {
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

body.is-studio .studio-tab-panel.is-active > .panel,
body.is-studio .video-workflow > .panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.is-studio .asset-parse-panel .editor,
body.is-studio .asset-preview-panel .gallery,
body.is-studio .storyboard-gallery,
body.is-studio .shots-table,
body.is-studio .segment-progress,
body.is-studio .video-grid,
body.is-studio .studio-log-content {
  margin: 22px 28px 28px;
  min-height: 0;
  overflow: auto;
}

body.is-studio .asset-preview-panel .asset-style-console,
body.is-studio .asset-preview-panel .reference-kit-panel,
body.is-studio .asset-preview-panel .asset-upload-form,
body.is-studio .asset-preview-panel .workflow-asset-library,
body.is-studio .storyboard-upload-form {
  margin-right: 28px;
  margin-left: 28px;
}

body.is-studio .gallery,
body.is-studio .storyboard-gallery {
  gap: 10px !important;
}

body.is-studio .asset-card,
body.is-studio .storyboard-card,
body.is-studio .segment-card,
body.is-studio .studio-log-card {
  border: 1px solid var(--studio-line) !important;
  border-radius: 15px !important;
  background: rgba(27, 45, 73, 0.5) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

body.is-studio .asset-card:hover,
body.is-studio .storyboard-card:hover,
body.is-studio .segment-card:hover,
body.is-studio .asset-card.is-selected {
  border-color: rgba(143, 216, 255, 0.64) !important;
  background: rgba(42, 88, 145, 0.38) !important;
}

body.is-studio .studio-context-panel {
  display: grid !important;
  grid-template-rows: 86px auto 1fr auto;
  align-self: stretch !important;
  height: 100% !important;
  max-height: none !important;
  min-height: 0;
  border-radius: 24px !important;
  overflow: hidden;
}

body.is-studio .studio-context-head {
  display: flex;
  align-items: end;
  min-height: 86px;
  padding: 0 20px 18px !important;
  border-bottom: 1px solid var(--studio-line);
  background: rgba(17, 31, 54, 0.34);
}

body.is-studio .studio-eyebrow {
  display: none;
}

body.is-studio .studio-context-head h2 {
  color: var(--studio-ink);
  font-size: 14px !important;
  font-weight: 800;
  letter-spacing: 0;
}

body.is-studio .studio-context-body {
  padding: 20px !important;
}

body.is-studio .studio-context-body p {
  color: var(--studio-muted) !important;
  font-size: 12px;
  line-height: 1.6;
}

body.is-studio .studio-context-list {
  display: grid;
  gap: 0;
  margin-top: 18px !important;
  border-top: 1px solid var(--studio-line);
}

body.is-studio .studio-context-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 0 !important;
  border-bottom: 1px solid var(--studio-line) !important;
  color: var(--studio-muted);
  font-size: 11px;
}

body.is-studio .studio-context-row:hover {
  transform: none !important;
}

body.is-studio .studio-context-row strong {
  color: var(--studio-ink) !important;
  font-weight: 650;
  text-align: right;
}

body.is-studio .studio-context-actions {
  padding: 20px !important;
  border-top: 1px solid var(--studio-line);
  background: rgba(8, 17, 31, 0.25);
}

body.is-studio .studio-context-actions .primary {
  width: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  body.is-studio .studio-topbar,
  body.is-studio .studio-flow-strip,
  body.is-studio .workspace-viewport,
  body.is-studio .studio-context-panel {
    animation: studioSurfaceIn 220ms ease both !important;
  }

  body.is-studio .studio-flow-step.active::before {
    display: none !important;
  }
}

@media (max-width: 1250px) {
  body.is-studio {
    min-width: 0;
    overflow: auto;
  }

  body.is-studio #app,
  body.is-studio .studio-shell {
    min-height: 900px;
    height: auto;
    overflow: visible;
  }

  body.is-studio .main.studio-stage {
    height: auto;
    min-height: 900px;
    grid-template-rows: 64px 68px minmax(620px, 1fr) 32px !important;
  }

  body.is-studio .studio-flow-status {
    grid-template-columns: repeat(6, minmax(110px, 1fr)) !important;
    overflow-x: auto;
  }

  body.is-studio .studio-workspace-layout {
    grid-template-columns: minmax(0, 1fr) 280px !important;
  }
}

@media (max-width: 900px) {
  body.is-studio .studio-shell {
    padding: 12px !important;
  }

  body.is-studio .main.studio-stage {
    grid-template-rows: auto auto auto auto !important;
  }

  body.is-studio .studio-topbar {
    height: auto !important;
    min-height: 64px !important;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px !important;
  }

  body.is-studio .studio-title-block {
    width: 100%;
  }

  body.is-studio .topbar-right {
    width: 100%;
    flex-wrap: wrap;
  }

  body.is-studio .studio-workspace-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.is-studio .studio-context-panel {
    min-height: 360px;
  }
}

/* Studio scroll boundary: keep the production chrome fixed while allowing
   long asset and storyboard panels to reveal their complete contents. */
body.is-studio .studio-tab-panels {
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
}

body.is-studio .studio-tab-panel.is-active {
  min-height: 0 !important;
  height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-width: auto;
}

body.is-studio .studio-tab-panel.is-active > .panel {
  height: auto !important;
  min-height: 100% !important;
  overflow: visible !important;
}

body.is-studio .studio-tab-panel.is-active .asset-preview-panel .gallery,
body.is-studio .studio-tab-panel.is-active .storyboard-gallery {
  min-height: 0;
  overflow: visible !important;
}

/* Keep manual asset upload compact: two input rows, with the action row below. */
body.is-studio .asset-preview-panel .asset-upload-form {
  width: min(100%, 920px);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  align-items: end;
}

body.is-studio .asset-preview-panel .asset-upload-fields {
  display: contents;
}

body.is-studio .asset-preview-panel .asset-upload-form .asset-file-row {
  grid-column: 2;
  grid-row: 2;
}

body.is-studio .asset-preview-panel .asset-upload-hint {
  grid-column: 1;
  grid-row: 3;
}

body.is-studio .asset-preview-panel .asset-upload-form #assetUploadButton {
  grid-column: 2;
  grid-row: 3;
  width: auto;
  justify-self: end;
}

@media (max-width: 900px) {
  body.is-studio .asset-preview-panel .asset-upload-form {
    width: 100%;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.is-studio .asset-preview-panel .asset-upload-fields {
    display: grid;
    grid-column: auto;
    grid-template-columns: minmax(0, 1fr);
  }

  body.is-studio .asset-preview-panel .asset-upload-form .asset-file-row,
  body.is-studio .asset-preview-panel .asset-upload-hint,
  body.is-studio .asset-preview-panel .asset-upload-form #assetUploadButton {
    grid-column: auto;
    grid-row: auto;
    width: 100%;
    justify-self: stretch;
  }
}

body.is-studio .asset-parse-panel #confirmAssetManifestBtn {
  width: max-content !important;
  justify-self: center !important;
}

body.is-studio .asset-parse-panel .asset-description-editor-shell {
  width: min(760px, calc(100% - 56px));
  min-height: 178px;
  margin: 18px auto 20px;
  justify-self: center;
  overflow: hidden;
  border: 1px solid rgba(143, 216, 255, 0.2);
  border-radius: 14px;
  background: rgba(8, 17, 31, 0.68);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 12px 28px rgba(0, 0, 0, 0.12);
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    background-color 160ms ease;
}

body.is-studio .asset-parse-panel .asset-description-editor-shell #assetDescriptionText {
  width: 100%;
  height: 178px !important;
  min-height: 178px !important;
  margin: 0 !important;
  padding: 16px 18px;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #d8e5f6 !important;
  box-shadow: none !important;
  caret-color: var(--studio-accent);
  font-family: var(--ui-font);
  font-size: 14px;
  line-height: 1.7;
  resize: vertical;
}

body.is-studio .asset-parse-panel .asset-description-editor-shell:focus-within {
  border-color: rgba(143, 216, 255, 0.66);
  background: rgba(10, 23, 40, 0.82);
  box-shadow:
    inset 0 0 0 1px rgba(143, 216, 255, 0.15),
    0 0 0 4px rgba(85, 169, 255, 0.09);
}

@media (max-width: 900px) {
  body.is-studio .asset-parse-panel .asset-description-editor-shell {
    width: calc(100% - 32px);
    margin: 16px auto;
  }
}

/* Queue bar: the bar itself stays compact while the bottom track carries progress. */
body.is-studio .studio-queue-bar {
  position: relative;
  z-index: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 30px;
  height: 30px;
  margin: 0;
  padding: 0 12px;
  overflow: hidden;
  border: 1px solid rgba(161, 199, 246, 0.14);
  border-radius: 10px;
  background: rgba(9, 19, 34, 0.64);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: border-color 180ms ease, background-color 180ms ease, opacity 180ms ease;
}

body.is-studio .studio-queue-bar.is-idle {
  border-color: rgba(161, 199, 246, 0.04);
  background: transparent;
  box-shadow: none;
  opacity: 0.4;
}

body.is-studio .studio-queue-items {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  gap: 12px;
  overflow: hidden;
  color: var(--studio-muted);
  font-size: 10px;
  white-space: nowrap;
}

body.is-studio .studio-queue-items.is-hidden {
  display: none;
}

body.is-studio .studio-queue-item {
  display: inline-flex;
  flex: 0 1 auto;
  min-width: 0;
  align-items: center;
  gap: 6px;
  max-width: min(32vw, 240px);
  overflow: hidden;
  white-space: nowrap;
}

body.is-studio .studio-queue-item strong,
body.is-studio .studio-queue-item > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.is-studio .studio-queue-item strong {
  color: var(--studio-ink);
  font-weight: 650;
}

body.is-studio .studio-queue-item.is-error strong {
  color: var(--warn, var(--studio-warning));
}

body.is-studio .studio-queue-summary {
  flex: 0 0 auto;
  min-width: 58px;
  color: var(--studio-muted);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  visibility: hidden;
  white-space: nowrap;
}

body.is-studio .studio-queue-progress {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  height: 2px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease, background-color 180ms ease;
}

body.is-studio .studio-queue-bar.is-error .studio-queue-progress {
  background: var(--warn, var(--studio-warning));
}

body.is-studio .studio-queue-progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--studio-signal));
  box-shadow: 0 0 8px rgba(74, 168, 255, 0.44);
  opacity: 1;
  transform: translateX(0);
  transition: width 400ms ease, opacity 300ms ease;
}

body.is-studio .studio-queue-progress-fill.is-error {
  background: var(--warn, var(--studio-warning));
  box-shadow: 0 0 8px rgba(230, 180, 80, 0.3);
}

@media (prefers-reduced-motion: no-preference) {
  body.is-studio .studio-queue-progress-fill.is-indeterminate {
    animation: queueScan 1.6s ease-in-out infinite;
  }
}

@keyframes queueScan {
  from {
    transform: translateX(-30%);
  }
  to {
    transform: translateX(100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.is-studio .studio-queue-progress-fill.is-indeterminate {
    animation: none;
    transform: translateX(0);
  }
}

/* Flow bars encode state: completion, active work, and blocked/failed states. */
body.is-studio .studio-flow-step.ok::after {
  background: var(--studio-signal);
  box-shadow: 0 0 14px rgba(185, 239, 116, 0.38);
}

body.is-studio .studio-flow-step.active:not(.ok):not(.warn)::after {
  background: var(--studio-accent);
  box-shadow: 0 0 14px rgba(143, 216, 255, 0.38);
}

body.is-studio .studio-flow-step.warn::after {
  background: var(--studio-warning);
  box-shadow: 0 0 14px rgba(247, 209, 118, 0.28);
}

body.is-studio .studio-flow-step.ok .studio-flow-dot {
  background: var(--studio-signal);
  box-shadow: 0 0 12px rgba(185, 239, 116, 0.5);
}

body.is-studio .studio-flow-step.active:not(.ok):not(.warn) .studio-flow-dot {
  background: var(--studio-accent);
  box-shadow: 0 0 12px rgba(143, 216, 255, 0.68);
}
/* Asset workspace: one continuous board instead of stacked glass cards. */
body.is-studio .asset-preview-panel .reference-kit-panel,
body.is-studio .asset-preview-panel .asset-upload-form {
  border: 0 !important;
  border-top: 1px solid rgba(143, 216, 255, 0.14) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.is-studio .asset-preview-panel .reference-kit-panel {
  padding: 18px 0 16px !important;
}

body.is-studio .asset-preview-panel .reference-kit-panel-head {
  align-items: center;
}

body.is-studio .asset-preview-panel .reference-kit-panel-head > div:first-child {
  position: relative;
  padding-left: 13px;
}

body.is-studio .asset-preview-panel .reference-kit-panel-head > div:first-child::before {
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 0;
  width: 2px;
  border-radius: 2px;
  background: var(--studio-accent);
  content: "";
}

body.is-studio .asset-preview-panel .reference-kit-panel-head h3 {
  margin: 0;
  font-size: 16px;
  letter-spacing: -0.01em;
}

body.is-studio .asset-preview-panel .reference-kit-panel-head p {
  max-width: 520px;
  margin-top: 5px;
  color: rgba(209, 224, 247, 0.56);
}

body.is-studio .asset-preview-panel .reference-kit-list {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 8px;
  margin-top: 14px;
}

body.is-studio .asset-preview-panel .reference-kit-empty-state {
  padding: 12px 0 0;
  color: rgba(209, 224, 247, 0.42);
}

body.is-studio .asset-preview-panel .reference-kit-card {
  border: 1px solid rgba(143, 216, 255, 0.13) !important;
  border-radius: 8px !important;
  background: rgba(8, 18, 33, 0.34) !important;
  box-shadow: none !important;
}

body.is-studio .asset-preview-panel .asset-upload-form {
  padding: 17px 0 15px !important;
}

body.is-studio .asset-preview-panel .asset-upload-form > .asset-upload-fields label > span,
body.is-studio .asset-preview-panel .asset-upload-form .asset-upload-hint {
  color: rgba(209, 224, 247, 0.56);
}

/* Pending classification is an indexed rail: headings carry hierarchy and
   the dropzones stay visually open so the cards do not nest inside cards. */
body.is-studio #assetGallery:has(.asset-reclassify-groups) {
  overflow: visible !important;
  padding: 6px 0 24px !important;
}

body.is-studio .asset-reclassify-groups {
  --asset-rail-line: rgba(143, 216, 255, 0.16);
  display: grid;
  grid-template-columns: repeat(4, minmax(216px, 1fr));
  min-width: 916px;
  gap: 18px;
  align-items: start;
  padding: 10px 0 16px;
  counter-reset: asset-group;
}

body.is-studio .asset-reclassify-group {
  position: relative;
  display: block;
  min-width: 0;
  border-top: 1px solid var(--asset-rail-line);
  counter-increment: asset-group;
}

body.is-studio .asset-reclassify-group h3 {
  display: flex;
  align-items: center;
  min-height: 42px;
  margin: 0;
  padding: 0 0 0 10px;
  border-bottom: 1px solid rgba(143, 216, 255, 0.1);
  color: rgba(239, 247, 255, 0.9);
  font-size: 12px;
  font-weight: 760;
  letter-spacing: 0.02em;
}

body.is-studio .asset-reclassify-group h3::before {
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  margin-right: 9px;
  border: 1px solid rgba(143, 216, 255, 0.3);
  border-radius: 6px;
  color: var(--studio-accent);
  content: counter(asset-group, decimal-leading-zero);
  font-family: "SF Mono", ui-monospace, Menlo, monospace;
  font-size: 9px;
  letter-spacing: 0;
}

body.is-studio .asset-reclassify-dropzone {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  min-height: 188px;
  max-height: min(58dvh, 520px);
  padding: 10px 0 12px;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

body.is-studio .asset-reclassify-dropzone:empty {
  min-height: 178px;
  border: 1px dashed rgba(143, 216, 255, 0.24) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(135deg, rgba(143, 216, 255, 0.045), transparent 55%),
    rgba(7, 17, 31, 0.2) !important;
}

body.is-studio .asset-reclassify-dropzone:empty::before {
  color: rgba(209, 224, 247, 0.48);
  font-size: 11px;
  letter-spacing: 0.04em;
}

body.is-studio .asset-reclassify-dropzone.is-dragover,
body.is-studio .asset-reclassify-dropzone:empty.is-dragover {
  border-color: rgba(143, 216, 255, 0.82) !important;
  background: rgba(74, 168, 255, 0.1) !important;
}

body.is-studio .asset-reclassify-dropzone > .asset-card {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(143, 216, 255, 0.16) !important;
  border-radius: 8px !important;
  background: rgba(8, 18, 33, 0.54) !important;
  box-shadow: none !important;
  transform: none !important;
}

body.is-studio .asset-reclassify-dropzone > .asset-card:hover,
body.is-studio .asset-reclassify-dropzone > .asset-card:focus-visible {
  border-color: rgba(143, 216, 255, 0.56) !important;
  background: rgba(14, 34, 58, 0.74) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2) !important;
}

body.is-studio .asset-reclassify-dropzone > .asset-card.is-missing {
  border-color: rgba(247, 209, 118, 0.2) !important;
  background: rgba(21, 24, 30, 0.44) !important;
}

body.is-studio .asset-reclassify-dropzone > .asset-card.is-failed {
  border-color: rgba(255, 115, 115, 0.48) !important;
}

body.is-studio .asset-reclassify-dropzone .asset-card-media,
body.is-studio .asset-reclassify-dropzone .asset-missing-preview {
  aspect-ratio: 1.65 / 1;
}

body.is-studio .asset-reclassify-dropzone .asset-missing-preview {
  display: grid;
  place-content: end start;
  gap: 5px;
  padding: 17px 14px 13px;
  background:
    linear-gradient(135deg, rgba(247, 209, 118, 0.09), transparent 58%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    #101923;
  background-size: auto, 28px 28px, 28px 28px, auto;
  text-align: left;
}

body.is-studio .asset-reclassify-dropzone .asset-missing-preview::before {
  margin-bottom: auto;
  color: rgba(247, 209, 118, 0.72);
  content: "MISSING ASSET";
  font-family: "SF Mono", ui-monospace, Menlo, monospace;
  font-size: 8px;
  letter-spacing: 0.14em;
}

body.is-studio .asset-reclassify-dropzone .asset-missing-preview strong {
  color: rgba(239, 247, 255, 0.94);
  font-size: 12px;
}

body.is-studio .asset-reclassify-dropzone .asset-missing-preview span {
  margin: 0;
  color: rgba(209, 224, 247, 0.56);
  font-size: 10px;
}

body.is-studio .asset-reclassify-dropzone > .asset-card .caption {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px 8px;
  min-height: 42px;
  padding: 9px 12px 10px;
  border-top-color: rgba(143, 216, 255, 0.1);
}

body.is-studio .asset-reclassify-dropzone > .asset-card .caption strong {
  flex: 1 1 100%;
  min-width: 0;
  color: rgba(239, 247, 255, 0.88);
  font-size: 11px;
  line-height: 1.25;
}

body.is-studio .asset-reclassify-dropzone > .asset-card .caption > span {
  margin: 0;
  font-size: 10px;
}

body.is-studio .asset-reclassify-dropzone .asset-tools {
  top: 8px;
  right: 8px;
  gap: 4px;
}

body.is-studio .asset-reclassify-dropzone .asset-tool {
  width: 26px;
  height: 26px;
  min-height: 26px;
  border-radius: 6px;
  background: rgba(5, 13, 24, 0.72);
  box-shadow: none;
  backdrop-filter: none;
}

body.is-studio .asset-reclassify-dropzone .asset-tool span {
  font-size: 15px;
}

@media (max-width: 720px) {
  body.is-studio .asset-reclassify-groups {
    grid-template-columns: repeat(4, minmax(176px, 1fr));
    min-width: 730px;
    gap: 12px;
  }
}

/* =========================================================================
   流程状态栏:绿色进度条改为「按真实进度」的动效,取代此前的频闪。
   - ::after 仍作暗色底轨(常驻);.studio-flow-fill 为绿色进度层。
   - determinate:宽度=真实比例(assets 出图数/总数、video 完成/总数),width 平滑过渡。
   - indeterminate:正在干活但份数未知(资产解析中、剪辑合成中)→ 一段绿条平滑左右流动。
   - done:满绿静止;idle:空。
   ========================================================================= */
body.is-studio .studio-flow-step::after {
  background: rgba(161, 199, 246, 0.16) !important; /* 底轨恒定暗色,绿色只由 fill 表达 */
}
body.is-studio .studio-flow-fill {
  content: "";
  position: absolute;
  bottom: 0;
  left: 16px;
  height: 2px;
  width: 0;
  border-radius: 2px;
  background: var(--studio-signal);
  box-shadow: 0 0 8px rgba(185, 239, 116, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: width 420ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 240ms ease;
}
/* 真实比例填充:width 跟随 --flow-ratio,进度推进时平滑增长 */
body.is-studio .studio-flow-step[data-progress-state="determinate"] .studio-flow-fill {
  opacity: 1;
  width: calc((100% - 32px) * var(--flow-ratio, 0));
}
body.is-studio .studio-flow-step[data-progress-state="done"] .studio-flow-fill {
  opacity: 1;
  width: calc(100% - 32px);
}
/* 份数未知但在运行:一段绿条平滑扫过(取代频闪) */
body.is-studio .studio-flow-step[data-progress-state="indeterminate"] .studio-flow-fill {
  opacity: 1;
  width: 34%;
}
@media (prefers-reduced-motion: no-preference) {
  /* !important 以越过 .is-studio 的 thermal-guard 全局 animation:none;仅作用于运行中步骤的 2px 细条,GPU 负担极小。 */
  body.is-studio .studio-flow-step[data-progress-state="indeterminate"] .studio-flow-fill {
    animation: studioFlowSweep 1.6s cubic-bezier(0.45, 0, 0.55, 1) infinite !important;
  }
}
@keyframes studioFlowSweep {
  0%   { transform: translateX(-120%); }
  100% { transform: translateX(320%); }
}
/* 降低动效偏好:不流动,给一条居中的静态提示条 */
@media (prefers-reduced-motion: reduce) {
  body.is-studio .studio-flow-step[data-progress-state="indeterminate"] .studio-flow-fill {
    left: calc(50% - 17%);
    transform: none;
  }
}

/* 制作台按钮：点击、运行、结果三个阶段都留在控件本身，避免只靠远处提示条。 */
body.is-studio button,
body.is-studio [role="button"],
body.is-studio .upload-pill {
  transition: transform 90ms ease, border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

body.is-studio button:not(:disabled):hover,
body.is-studio [role="button"]:not([aria-disabled="true"]):hover,
body.is-studio .upload-pill:hover {
  border-color: rgba(139, 213, 255, 0.78);
  box-shadow: 0 0 0 1px rgba(83, 184, 255, 0.18), 0 0 14px rgba(51, 147, 228, 0.12);
}

body.is-studio button:active,
body.is-studio button.is-pressed,
body.is-studio [role="button"].is-pressed,
body.is-studio .upload-pill.is-pressed {
  transform: translateY(1px) scale(0.985);
}

body.is-studio button.is-working {
  position: relative;
  cursor: wait;
  border-color: rgba(126, 208, 255, 0.92);
  box-shadow: 0 0 0 1px rgba(87, 184, 255, 0.26), 0 0 16px rgba(39, 151, 231, 0.16);
}

body.is-studio button.is-working::after {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-left: 7px;
  border: 1.5px solid rgba(231, 246, 255, 0.38);
  border-top-color: #eaf8ff;
  border-radius: 50%;
  vertical-align: -1px;
  animation: studioButtonSpin 680ms linear infinite;
}

body.is-studio button.is-complete {
  border-color: rgba(162, 235, 122, 0.95);
  box-shadow: 0 0 0 1px rgba(162, 235, 122, 0.32), 0 0 16px rgba(146, 231, 104, 0.18);
}

body.is-studio button.is-error {
  border-color: rgba(255, 132, 132, 0.95);
  box-shadow: 0 0 0 1px rgba(255, 132, 132, 0.28), 0 0 14px rgba(237, 88, 88, 0.15);
}

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

@media (prefers-reduced-motion: reduce) {
  body.is-studio button,
  body.is-studio [role="button"],
  body.is-studio .upload-pill {
    transition: none;
  }

  body.is-studio button.is-working::after {
    animation: none;
    border-top-color: rgba(231, 246, 255, 0.92);
  }
}

/* Stable runtime feedback: task state persists across polling without resetting the motion. */
body.is-studio .studio-flow-step.is-focused:not(.is-running) {
  background: rgba(94, 162, 255, 0.08) !important;
}

body.is-studio .studio-flow-step.is-running {
  background: rgba(69, 145, 255, 0.14) !important;
}

body.is-studio .studio-flow-step.is-running::after {
  background: var(--studio-accent) !important;
  box-shadow: 0 0 14px rgba(143, 216, 255, 0.42);
}

body.is-studio .studio-flow-step.is-running .studio-flow-dot {
  background: var(--studio-accent) !important;
  box-shadow: 0 0 12px rgba(143, 216, 255, 0.72);
}

body.is-studio .studio-flow-progress.is-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--studio-ink);
}

body.is-studio .studio-flow-progress.is-live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--studio-accent);
  box-shadow: 0 0 12px rgba(143, 216, 255, 0.78);
}

body.is-studio button.is-task-running {
  cursor: wait;
  border-color: rgba(126, 208, 255, 0.92);
  background: rgba(58, 135, 226, 0.22);
  box-shadow: 0 0 0 1px rgba(87, 184, 255, 0.26), 0 0 16px rgba(39, 151, 231, 0.16);
}

body.is-studio button.is-task-running::after {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-left: 7px;
  border: 1.5px solid rgba(231, 246, 255, 0.38);
  border-top-color: #eaf8ff;
  border-radius: 50%;
  vertical-align: -1px;
  animation: studioButtonSpin 680ms linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  body.is-studio button.is-task-running::after {
    animation: none;
  }
}

/* Final cut workflow: this panel owns its content height; other studio panels
   keep the shared full-height layout above. */
body.is-studio .studio-tab-panel.is-active > .panel.final-cut-panel {
  display: flex !important;
  flex-direction: column !important;
  height: auto !important;
  min-height: 0 !important;
  gap: 0 !important;
  padding: 22px 28px 28px !important;
  overflow: visible !important;
}

/* ---- Super Pixel（变体 C：近黑 + 暗红蜂窝渐变）---- */
/* 配色严格限定在 .super-pixel-view 作用域内，不影响 studio/canvas 主题 */
.super-pixel-view {
  --sp-ink: #fceff0;
  /* 0.65 而非探针里的 0.48：0.48 实测仅 4.57:1，chips 与工具按钮是可交互控件，
     其文字需达 7:1。0.65 在面板(7.6:1)与页面深底(7.74:1)上均达标。 */
  --sp-dim: rgba(252, 239, 240, 0.65);
  --sp-acc: #d92d45;
  --sp-acc-ink: #fff;
  --sp-panel: rgba(20, 7, 11, 0.8);
  --sp-line: rgba(255, 110, 130, 0.14);
  /* 聊天字体：几何黑体，与站内其它 UI 同源。中文落 PingFang SC（macOS 自带），
     Windows 回落微软雅黑，Linux 回落 Noto Sans CJK。不加载 webfont——本地部署
     无外网字体依赖，且中文字库动辄几 MB，首屏代价太大。 */
  --sp-chat-font: "SF Pro Text", "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "Noto Sans CJK SC", ui-sans-serif, system-ui,
    -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  position: relative;
  overflow: hidden;
  /* 与 .image-explore-view / .asset-library-view 一致：44px 为顶栏高度。
     用 100% 无效——父级 .explore-home 是 auto 高度的 block，百分比无参照。 */
  height: calc(100vh - 44px);
  min-height: calc(100vh - 44px);
  background: linear-gradient(180deg, #120409 0%, #080205 55%, #020101 100%);
}

/* Super Pixel shares the Explore top bar, so its accent needs a scoped state
   on the outer shell rather than inheriting from the view's local variables. */
.explore-home.is-superpixel .explore-topbar nav > button[data-explore-tool="super-pixel"],
.explore-home.is-superpixel .explore-topbar nav > button[data-explore-tool="super-pixel"]:hover,
.explore-home.is-superpixel .explore-topbar nav > button[data-explore-tool="super-pixel"]:focus-visible,
.explore-home.is-superpixel #exploreAdminLink,
.explore-home.is-superpixel #exploreAdminLink:hover,
.explore-home.is-superpixel #exploreAdminLink:focus-visible {
  color: #d92d45 !important;
}

.super-pixel-view.hidden { display: none; }

.super-pixel-view.has-open-select,
.super-pixel-stage.has-open-select {
  overflow: visible;
}

.super-pixel-hex,
.super-pixel-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.super-pixel-hex {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%2720.78%27%20height=%2736.00%27%20viewBox=%270%200%2020.78%2036.00%27%3E%3Cpath%20d=%27M20.78,6.00L20.78,18.00L10.39,24.00L0.00,18.00L0.00,6.00L10.39,0.00Z%20M10.39,24.00L10.39,36.00L0.00,42.00L-10.39,36.00L-10.39,24.00L-0.00,18.00Z%20M31.18,24.00L31.18,36.00L20.78,42.00L10.39,36.00L10.39,24.00L20.78,18.00Z%27%20fill=%27none%27%20stroke=%27rgba%28255,86,106,0.20%29%27%20stroke-width=%270.7%27/%3E%3C/svg%3E");
  background-repeat: repeat;
  -webkit-mask-image: radial-gradient(82% 65% at 50% 36%, #000 42%, transparent 88%);
  mask-image: radial-gradient(82% 65% at 50% 36%, #000 42%, transparent 88%);
}

.super-pixel-glow {
  background: radial-gradient(48% 34% at 50% 46%, rgba(176, 26, 46, 0.16), transparent 66%);
}

.super-pixel-layout {
  position: relative;
  z-index: 1;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: 0 minmax(0, 1fr);
  transition: grid-template-columns 180ms ease;
}

.super-pixel-layout.is-rail-open {
  grid-template-columns: minmax(210px, 252px) minmax(0, 1fr);
}

.super-pixel-asset-rail-toggle {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  width: 30px;
  height: 30px;
  min-height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--sp-line);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--sp-dim);
  cursor: pointer;
  line-height: 1;
  transition: border-color 140ms ease, color 140ms ease;
}

.super-pixel-asset-rail-toggle:hover {
  border-color: rgba(255, 110, 130, 0.3);
  color: var(--sp-ink);
}

.super-pixel-asset-icon,
.super-pixel-asset-icon svg {
  display: block;
  width: 17px;
  height: 17px;
}

.super-pixel-asset-rail {
  min-width: 0;
  padding: 22px 12px;
  border-right: 1px solid var(--sp-line);
  background: rgba(11, 3, 7, 0.58);
  overflow: hidden;
}

.super-pixel-layout.is-rail-open .super-pixel-asset-rail {
  padding-top: 58px;
}

.super-pixel-layout:not(.is-rail-open) .super-pixel-asset-rail > * {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.super-pixel-layout.is-rail-open .super-pixel-asset-rail > * {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

.super-pixel-asset-rail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 2px 12px;
}

.super-pixel-asset-rail-head > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.super-pixel-asset-rail-kicker {
  color: var(--sp-dim);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1;
}

.super-pixel-asset-rail-head strong {
  overflow: hidden;
  color: var(--sp-ink);
  font-size: 13px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.super-pixel-asset-rail-refresh,
.super-pixel-asset-rail-close {
  flex: none;
  width: 26px;
  height: 26px;
  min-height: 26px;
  padding: 0;
  border: 1px solid var(--sp-line);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--sp-dim);
  cursor: pointer;
  line-height: 1;
}

.super-pixel-asset-rail-refresh:hover,
.super-pixel-asset-rail-close:hover {
  border-color: rgba(255, 110, 130, 0.3);
  color: var(--sp-ink);
}

.super-pixel-asset-rail-list {
  display: grid;
  gap: 8px;
  max-height: calc(100vh - 116px);
  overflow-y: auto;
  padding: 1px 2px 8px;
  scrollbar-width: thin;
}

.super-pixel-asset-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 6px;
  border: 1px solid var(--sp-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  cursor: grab;
  user-select: none;
}

.super-pixel-asset-card:hover,
.super-pixel-asset-card.is-dragging {
  border-color: rgba(255, 110, 130, 0.42);
  background: rgba(217, 45, 69, 0.14);
}

.super-pixel-asset-card:active { cursor: grabbing; }

.super-pixel-asset-card > img {
  width: 72px;
  height: 54px;
  display: block;
  border-radius: 5px;
  object-fit: cover;
  background: rgba(0, 0, 0, 0.28);
}

.super-pixel-asset-card > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.super-pixel-asset-card strong,
.super-pixel-asset-card span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.super-pixel-asset-card strong {
  color: var(--sp-ink);
  font-size: 11px;
  line-height: 1.2;
}

.super-pixel-asset-card span {
  color: var(--sp-dim);
  font-size: 9px;
  line-height: 1.2;
}

.super-pixel-asset-rail-empty {
  padding: 28px 8px;
  border: 1px dashed var(--sp-line);
  border-radius: 8px;
  color: var(--sp-dim);
  font-size: 11px;
  text-align: center;
}

.super-pixel-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  gap: 20px;
  padding: clamp(40px, 9vh, 96px) 24px 56px;
}

.super-pixel-logo {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: var(--sp-acc);
  color: var(--sp-acc-ink);
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
}

.super-pixel-title {
  margin: 0;
  color: var(--sp-ink);
  font-size: clamp(17px, 2vw, 20px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-align: center;
}

.super-pixel-messages {
  width: min(680px, 100%);
  max-height: min(42vh, 420px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
}

/* 开聊后：composer 脱离流、固定到视口底部，消息区接管剩余高度。
   .super-pixel-view 有 overflow:hidden，所以这里用 sticky 会被裁；
   改用 stage 撑满高度 + dock 作为 flex 末项贴底，不脱离文档流。 */
.super-pixel-stage.is-chatting {
  height: 100%;
  min-height: 0;
  justify-content: flex-start;
  padding-top: 20px;
  padding-bottom: 0;
  gap: 12px;
}

/* 开聊后收掉首屏引导物，把高度让给对话 */
.super-pixel-stage.is-chatting .super-pixel-logo,
.super-pixel-stage.is-chatting .super-pixel-title {
  display: none;
}

.super-pixel-stage.is-chatting .super-pixel-messages {
  flex: 1 1 auto;
  min-height: 0;
  height: 0;
  max-height: none;
  width: min(760px, 100%);
  padding-bottom: 8px;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}

/* Super Pixel chat refinement: keep the conversation usable while image cards stay compact. */
.super-pixel-messages {
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 110, 130, 0.42) transparent;
}

.super-pixel-messages::-webkit-scrollbar {
  width: 8px;
}

.super-pixel-messages::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(255, 110, 130, 0.42);
}

.super-pixel-stage.is-chatting .super-pixel-messages {
  overscroll-behavior-y: contain;
}

.super-pixel-image-card .super-pixel-tool-card-details {
  display: none;
}

.super-pixel-image-card .super-pixel-tool-card-media {
  max-height: min(36vh, 300px);
}

.super-pixel-dock {
  width: min(680px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

/* 不用 position:sticky —— stage 已撑满视口且 messages 是 flex:1，
   dock 作为末项自然贴底；sticky 还会被 .super-pixel-view 的 overflow:hidden 裁掉。
   #020101 取自 .super-pixel-view 渐变的 100% 端，保证淡出无色差。 */
.super-pixel-stage.is-chatting .super-pixel-dock {
  flex: 0 0 auto;
  width: min(760px, 100%);
  padding: 10px 0 18px;
  background: linear-gradient(to top, #020101 62%, transparent);
}

.super-pixel-message {
  max-width: 86%;
  padding: 11px 14px;
  border: 1px solid var(--sp-line);
  border-radius: 12px;
  color: var(--sp-ink);
  /* 衬线在小字号会显细，比无衬线版本 +1px 拉回可读性 */
  font-family: var(--sp-chat-font);
  font-size: 14px;
  line-height: 1.62;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.super-pixel-message.is-user {
  align-self: flex-end;
  background: rgba(217, 45, 69, 0.22);
}

.super-pixel-message.is-assistant {
  align-self: flex-start;
  background: var(--sp-panel);
}

.super-pixel-tool-card {
  width: min(760px, 100%);
  min-width: 0;
  align-self: flex-start;
  display: grid;
  gap: 12px;
  box-sizing: border-box;
  padding: 14px;
  border: 1px solid rgba(255, 110, 130, 0.26);
  border-radius: 14px;
  background: rgba(31, 10, 16, 0.76);
  color: var(--sp-ink);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
}

.super-pixel-tool-card.is-completed { border-color: rgba(130, 224, 161, 0.32); }
.super-pixel-tool-card.is-failed { border-color: rgba(255, 128, 128, 0.44); }
.super-pixel-tool-card.is-cancelled { opacity: 0.58; }

.super-pixel-tool-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.super-pixel-tool-card-title {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.super-pixel-tool-card-title strong {
  min-width: 0;
  color: var(--sp-ink);
  font-size: 14px;
  line-height: 1.25;
}

.super-pixel-tool-card-kicker {
  color: var(--sp-dim);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
}

.super-pixel-card-status {
  flex: none;
  color: var(--sp-dim);
  font-size: 10px;
  line-height: 1.4;
}

.super-pixel-tool-card.is-completed .super-pixel-card-status { color: #9ae6ae; }
.super-pixel-tool-card.is-failed .super-pixel-card-status { color: #ffaaa9; }
.super-pixel-tool-card.is-cancelled .super-pixel-card-status { color: var(--sp-dim); }

.super-pixel-tool-card-media {
  width: 100%;
  max-width: 100%;
  max-height: 420px;
  aspect-ratio: 16 / 9;
  display: block;
  object-fit: contain;
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.28);
}

.super-pixel-video-card .super-pixel-tool-card-media { aspect-ratio: 16 / 9; }

.super-pixel-tool-card-media.is-loading {
  display: grid;
  place-items: center;
  min-height: 132px;
  color: var(--sp-dim);
  font-size: 11px;
}

.super-pixel-tool-card-details {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.super-pixel-card-meta-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  font-size: 11px;
  line-height: 1.45;
}

.super-pixel-card-meta-label { color: var(--sp-dim); }
.super-pixel-card-meta-value {
  min-width: 0;
  color: var(--sp-ink);
  overflow-wrap: anywhere;
}

.super-pixel-tool-card-prompt {
  margin: 0;
  color: var(--sp-ink);
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.super-pixel-reference-images {
  display: grid;
  gap: 6px;
}

.super-pixel-reference-label {
  color: var(--sp-dim);
  font-size: 10px;
}

.super-pixel-reference-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.super-pixel-reference-strip img {
  width: 58px;
  height: 58px;
  object-fit: cover;
  border: 1px solid var(--sp-line);
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.28);
}

.super-pixel-tool-card-message {
  margin: 0;
  color: var(--sp-dim);
  font-size: 11px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.super-pixel-tool-card-message.is-error { color: #ffaaa9; }

.super-pixel-tool-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.super-pixel-tool-card-actions button {
  min-height: 32px;
  height: 32px;
  padding: 0 13px;
  border: 1px solid var(--sp-line);
  border-radius: 8px;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
}

.super-pixel-tool-card-confirm {
  border-color: rgba(255, 110, 130, 0.5) !important;
  background: var(--sp-acc);
  color: var(--sp-acc-ink);
}

.super-pixel-tool-card-cancel {
  background: rgba(255, 255, 255, 0.04);
  color: var(--sp-dim);
}

.super-pixel-tool-card-actions button:hover { filter: brightness(1.1); }
.super-pixel-tool-card-actions button:focus-visible { outline: 2px solid rgba(255, 161, 173, 0.82); outline-offset: 2px; }

.super-pixel-tool-card-download {
  min-height: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  padding: 0 13px;
  border: 1px solid var(--sp-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--sp-ink);
  font-size: 11px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}

.super-pixel-tool-card-download:hover { filter: brightness(1.1); }
.super-pixel-tool-card-download:focus-visible { outline: 2px solid rgba(255, 161, 173, 0.82); outline-offset: 2px; }

.super-pixel-composer {
  width: min(680px, 100%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px 10px;
  border: 1px solid var(--sp-line);
  border-radius: 20px;
  background: rgba(20, 7, 11, 0.42);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
}

.super-pixel-composer.is-dragover {
  border-color: rgba(255, 122, 122, 0.55);
  background: rgba(38, 12, 18, 0.55);
}

.super-pixel-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.super-pixel-attachment {
  position: relative;
  width: 46px;
  height: 46px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--sp-line);
}

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

.super-pixel-attachment-remove {
  position: absolute;
  top: 1px;
  right: 1px;
  width: 15px;
  height: 15px;
  /* 全站 button{min-height:36px} 会把这个小圆点撑大 */
  min-height: 15px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
}

.super-pixel-message-images {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 6px;
}

.super-pixel-message-images img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}

.super-pixel-input {
  width: 100%;
  min-height: 84px;
  border: 0;
  /* 全站 textarea 规则会加 padding:13px 与 inset 高光，形成「框中框」；
     这里清零，让 composer 成为唯一的磨砂框 */
  padding: 0;
  box-shadow: none;
  background: transparent;
  color: var(--sp-ink);
  /* 与消息气泡同字体：输入时看到的就是发出后的样子 */
  font-family: var(--sp-chat-font);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.62;
  resize: none;
  overflow-y: auto;
  max-height: 12em;
}

.super-pixel-input::placeholder {
  color: rgba(252, 239, 240, 0.48);
  transition: color 120ms ease;
}
.super-pixel-input:focus::placeholder,
.super-pixel-input:focus-visible::placeholder {
  color: transparent;
}
.super-pixel-input:focus,
.super-pixel-input:focus-visible {
  outline: none;
  border-color: transparent;
  box-shadow: none;
}
.super-pixel-input:focus { outline: none; }
.super-pixel-composer:focus-within { border-color: rgba(255, 110, 130, 0.34); }

.super-pixel-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
}

.super-pixel-tool,
.super-pixel-select > select,
.super-pixel-select-trigger {
  border: 1px solid var(--sp-line);
  border-radius: 9px;
  background: rgba(20, 7, 11, 0.8);
  color: var(--sp-ink);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  padding: 0 10px;
  cursor: pointer;
  /* 覆盖全站 button{min-height:36px} 与 select{height:38px}，否则做不小 */
  height: 28px;
  min-height: 28px;
}

.super-pixel-tool { background: rgba(255, 255, 255, 0.03); }

.super-pixel-tool { color: var(--sp-dim); }
.super-pixel-tool #superPixelScriptLabel {
  display: inline-block;
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}
.super-pixel-tool:hover,
.super-pixel-select > select:hover,
.super-pixel-select-trigger:hover,
.super-pixel-select.is-open .super-pixel-select-trigger {
  border-color: rgba(255, 110, 130, 0.3);
}

.super-pixel-select {
  position: relative;
  display: inline-flex;
  min-width: 0;
}

.super-pixel-select > .super-pixel-native-select {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 1px;
  opacity: 0;
  pointer-events: none;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}

.super-pixel-select-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  text-align: left;
  box-shadow: none;
}

.super-pixel-select-trigger::after {
  content: "";
  flex: none;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--sp-dim);
}

.super-pixel-select-trigger-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.super-pixel-select-menu {
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  z-index: 30;
  width: max(100%, 168px);
  max-height: min(360px, calc(100vh - 128px));
  overflow-y: auto;
  padding: 5px;
  border: 1px solid rgba(255, 110, 130, 0.26);
  border-radius: 12px;
  background: rgba(20, 7, 11, 0.96);
  color: var(--sp-ink);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.58), inset 0 1px 0 rgba(255, 210, 216, 0.05);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  scrollbar-width: thin;
}

.super-pixel-select-group {
  padding: 7px 9px 4px;
  color: var(--sp-dim);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.super-pixel-select-option {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 31px;
  padding: 0 28px 0 9px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  color: var(--sp-ink);
  font-size: 11px;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
}

.super-pixel-select-option:hover,
.super-pixel-select-option:focus-visible,
.super-pixel-select-option.is-selected {
  background: rgba(217, 45, 69, 0.28);
  color: #fff;
  outline: none;
}

.super-pixel-select-option.is-selected::after {
  content: "✓";
  position: absolute;
  right: 9px;
  color: #ff8796;
  font-size: 13px;
  font-weight: 700;
}

.super-pixel-select-option:disabled {
  background: transparent;
  color: rgba(252, 239, 240, 0.36);
  cursor: not-allowed;
}

.super-pixel-select > select {
  appearance: none;
  padding-right: 24px;
  background-image: linear-gradient(45deg, transparent 50%, var(--sp-dim) 50%),
  appearance: none;
  padding-right: 24px;
  background-image: linear-gradient(45deg, transparent 50%, var(--sp-dim) 50%),
    linear-gradient(135deg, var(--sp-dim) 50%, transparent 50%);
  background-position: right 12px center, right 8px center;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}
.super-pixel-select > select > option,
.super-pixel-select > select > optgroup > option { background: #14070b; color: var(--sp-ink); }
/* 原生下拉里 optgroup 标签默认继承浅色系统样式，深色底上须显式指定 */
.super-pixel-select > select > optgroup {
  background: #14070b;
  color: var(--sp-dim);
  font-style: normal;
  font-weight: 600;
}

.super-pixel-send {
  margin-left: auto;
  box-sizing: border-box;
  padding: 0;
  width: 28px;
  height: 28px;
  /* 覆盖全站 button{min-height:36px}，否则圆形会被撑成椭圆 */
  min-height: 28px;
  flex: none;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--sp-acc);
  color: var(--sp-acc-ink);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: transform 140ms ease, filter 140ms ease;
}

.super-pixel-send:hover { filter: brightness(1.12); }
.super-pixel-send:active { transform: scale(0.94); }

@media (max-width: 600px) {
  .super-pixel-view {
    height: auto;
    min-height: calc(100vh - 44px);
    overflow: visible;
  }
  .super-pixel-layout { display: block; }
  .super-pixel-layout:not(.is-rail-open) .super-pixel-asset-rail { display: none; }
  .super-pixel-layout:not(.is-rail-open) .super-pixel-stage { padding-top: 52px; }
  .super-pixel-layout.is-rail-open .super-pixel-asset-rail { display: block; }
  .super-pixel-asset-rail {
    margin: 12px 14px 0;
    padding: 10px;
    border: 1px solid var(--sp-line);
    border-radius: 14px;
  }
  .super-pixel-asset-rail-head { margin-bottom: 8px; }
  .super-pixel-asset-rail-list {
    display: flex;
    max-height: none;
    overflow-x: auto;
    padding: 1px 1px 4px;
  }
  .super-pixel-asset-card { flex: 0 0 172px; }
  .super-pixel-stage { height: auto; min-height: calc(100vh - 44px); padding: 32px 14px 40px; gap: 16px; }
  .super-pixel-stage.is-chatting { height: calc(100vh - 44px); min-height: 0; overflow: hidden; }
  .super-pixel-composer { width: 100%; border-radius: 16px; }
  .super-pixel-tool-card { width: 100%; padding: 12px; }
  .super-pixel-tool-card-head { gap: 8px; }
  .super-pixel-tool-card-media { max-height: 300px; }
  /* 窄屏不折行：折行会把发送按钮甩到单独一行，浪费 45px 且视觉孤立。
     实测内容宽 304px < 可用 362px，改用 nowrap 后单行放得下；
     模型选择器允许被压缩并截断，保证发送按钮始终留在行内右端。 */
  .super-pixel-toolbar { gap: 7px; flex-wrap: nowrap; }
  .super-pixel-select { min-width: 0; }
  .super-pixel-select > select {
    min-width: 0;
    max-width: 100%;
    text-overflow: ellipsis;
  }
  .super-pixel-tool { flex: none; }
}

@media (prefers-reduced-motion: reduce) {
  .super-pixel-send,
  .super-pixel-tool,
  .super-pixel-select > select {
    transition: none;
  }
  .super-pixel-send:active { transform: none; }
}

/* Modern production workspace. The legacy editor DOM stays mounted only as a
   hidden compatibility layer for existing generation handlers. */
body.is-studio-modern {
  /* --mv-* 前缀：无前缀的 --bg / --line / --ok 在本文件中已有 4 套不同定义
     （各主题各一份），即便限定在 body.is-studio-modern 内也会被后代继承，
     覆盖它们本该拿到的全局值。 */
  --mv-bg: #0B0B0F;
  --mv-s1: #13131A;
  --mv-s2: #1A1A23;
  --mv-s3: #23232E;
  --mv-line: rgba(255,255,255,.07);
  --mv-line-2: rgba(255,255,255,.12);
  --mv-tx: #EDEDF2;
  --mv-mut: #9A9AA8;
  /* #62626F 对 --mv-bg 仅 3.27:1，低于 WCAG AA 正文 4.5:1；未达态步骤标签
     用的正是这个色，实测读不清。#8A8A99 → 5.78:1（对卡面 5.44:1）。 */
  --mv-qt: #8A8A99;
  --mv-lime: #C8FF2E;
  --mv-vio: #8B7CFF;
  --mv-amb: #FFB86B;
  --mv-ok: #6EE7A0;
  --mv-e1: 0 1px 2px rgba(0,0,0,.5), 0 8px 24px -10px rgba(0,0,0,.6);
  --mv-e2: 0 1px 2px rgba(0,0,0,.5), 0 18px 44px -14px rgba(0,0,0,.7);
  --mv-hi: inset 0 1px 0 rgba(255,255,255,.05);
  --mv-r: 12px;
  --mv-r-s: 7px;
  /* 旧 modern-* 别名指向新色板，避免顶栏用新色、画布用旧色的割裂
     （实测顶栏 #0B0B0F vs 画布 #0f1112）。尚未迁完的规则继续沿用别名。 */
  --modern-bg: var(--mv-bg);
  --modern-rail: #0E0E14;
  --modern-surface: var(--mv-s1);
  --modern-surface-2: var(--mv-s2);
  --modern-line: var(--mv-line);
  --modern-line-strong: var(--mv-line-2);
  --modern-text: var(--mv-tx);
  --modern-muted: var(--mv-mut);
  --modern-quiet: var(--mv-qt);
  --modern-signal: #c8ff2e;
  --modern-accent: #f27a5b;
  /* 全文 12+ 处 font-family: var(--mono) 此前无定义，静默回落 Inter——
     eyebrow 标签与数字读数全都不是等宽，控制台质感立不起来。 */
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  /* scrollbar-width: thin 已设，但全站零处定义 scrollbar-color，回落到
     浏览器默认亮灰，在暗色界面上非常刺眼。 */
  scrollbar-color: rgba(255,255,255,.16) transparent;
  min-width: 1024px;
  background: var(--modern-bg);
  color: var(--modern-text);
}

body.is-studio-modern #app { min-height: 100vh; }
body.is-studio-modern #studioModernShell.hidden { display: none !important; }
.workflow-data-bridge { display: none !important; }
.studio-modern-shell { display: grid; grid-template-columns: 224px minmax(0, 1fr); height: 100vh; min-height: 100vh; overflow: hidden; background: var(--mv-bg); color: var(--mv-tx); }
.modern-series-nav { position: sticky; top: 0; display: flex; flex: none; flex-direction: column; height: 100vh; overflow: hidden; border-right: 1px solid var(--mv-line); background: linear-gradient(180deg, rgba(255,255,255,.022), var(--mv-bg) 240px); }
.modern-brand { display: flex; flex: none; align-items: center; gap: 9px; padding: 16px 14px; border-bottom: 1px solid var(--mv-line); }
/* 宽度须容得下 146px 字标。fb7b2c2 曾锁成 22×22px 配那个方块 logo,
   还原 PNG 后若不改这里,字标会被压扁。 */
.modern-brand button { display: block; flex: none; width: 146px; min-height: 0; padding: 0; border: 0; background: transparent; }
/* 保持 PNG 横向字标 + 继承 .pixel-toys-wordmark 的红色转动螺旋桨。
   fb7b2c2「左栏换皮」曾把这里换成 22px 柠檬渐变方块 + 字母 P,盖掉了 PNG
   与螺旋桨动效(::before 改成透明方块、::after 改成 "P")。用户要求换回,
   且那个柠檬渐变本身违反改动 9 的机制——柠檬只准出现在顶栏主行动、流程轴
   当前步骤、进度轨三处,logo 是第四处。 */
.modern-brand-logo {
  position: relative;
  display: block;
  width: 146px;
  aspect-ratio: 960 / 165;
  background: url("/pixel-toys-logo.png?v=202607040215") center / contain no-repeat;
}
body.is-studio-modern .modern-brand-logo.pixel-toys-wordmark::before {
  backface-visibility: visible;
  will-change: transform;
}
@media (prefers-reduced-motion: no-preference) {
  body.is-studio-modern .modern-brand-logo.pixel-toys-wordmark::before {
    animation: pixelToysCopterSpin 0.58s linear infinite !important;
    animation-play-state: running !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.is-studio-modern .modern-brand-logo.pixel-toys-wordmark::before {
    animation: none !important;
  }
}
.modern-brand-copy { display: flex; min-width: 0; align-items: center; gap: 7px; }
.modern-brand-copy strong { overflow: hidden; color: var(--mv-tx); font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.modern-brand-copy span { padding: 2px 5px; border: 1px solid var(--mv-line-2); border-radius: 4px; color: var(--mv-qt); font-family: var(--mono); font-size: 10px; }
.modern-eyebrow { color: var(--mv-qt); font-family: var(--mono); font-size: 11px; letter-spacing: .08em; }
.modern-series-context { display: grid; flex: none; grid-template-columns: 28px minmax(0,1fr) 10px; gap: 9px; align-items: center; margin: 12px 14px 0; padding: 9px 10px; border: 1px solid var(--mv-line); border-radius: var(--mv-r-s); background: var(--mv-s2); box-shadow: var(--mv-hi); }
.modern-project-thumb { display: block; width: 28px; height: 28px; border-radius: 6px; background: linear-gradient(150deg, #3A2E5C, #1E2A3A 60%, #4A3550); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
.modern-project-copy { min-width: 0; }
.modern-series-context h2 { margin: 4px 0 0; overflow: hidden; color: var(--mv-tx); font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.modern-series-context p { margin: 4px 0 0; overflow: hidden; color: var(--mv-mut); font-size: 9.5px; text-overflow: ellipsis; white-space: nowrap; }
.modern-project-chevron { color: var(--mv-qt); font-size: 14px; font-style: normal; }
.modern-project-switcher { position: relative; flex: none; }
.modern-series-context { cursor: pointer; outline: 0; text-align: left; }
.modern-series-context:focus-visible { border-color: var(--mv-lime); box-shadow: 0 0 0 3px rgba(200,255,46,.12), var(--mv-hi); }
.modern-series-context:hover { border-color: var(--mv-line-2); background: var(--mv-s3); }
.modern-episode-switcher { display: flex; gap: 4px; margin: 8px 14px 0; overflow-x: auto; }
.modern-episode-switcher .modern-episode-row { display: inline-flex; flex: 0 0 auto; min-height: 29px; padding: 0 8px; border: 1px solid var(--mv-line); border-radius: 4px; background: var(--mv-s2); color: var(--mv-mut); }
.modern-episode-switcher .modern-episode-row > div { display: block; }
.modern-episode-switcher .modern-episode-row strong { font-family: var(--mono); font-size: 10px; }
.modern-episode-switcher .modern-episode-row small, .modern-episode-switcher .modern-episode-row > i { display: none; }
.modern-episode-switcher .modern-episode-thumb { display: none; }
.modern-episode-switcher .modern-episode-row.is-active { border-color: var(--mv-lime); color: var(--mv-tx); }
.modern-episode-add { flex: 0 0 29px; min-height: 29px; border: 1px dashed var(--mv-line-2); border-radius: 4px; background: transparent; color: var(--mv-lime); font-size: 17px; line-height: 1; }
.modern-episode-add:hover { border-color: var(--mv-line-2); }
/* 左边栏卡片列表里的＋:占满整行并与 .modern-episode-row 的高度/圆角对齐,
   区别于分集切换器里那个 29px 方形按钮。 */
.modern-episode-add-row { flex: none; width: 100%; min-height: 40px; border-radius: var(--mv-r-s); }
/* hover 只给指针反馈(背景+边框明度),不借用柠檬主色——柠檬是「主行动」的专属信号。 */
.modern-episode-add-row:hover:not(:disabled) { border-color: var(--mv-line-2); background: var(--mv-s3); }
.modern-episode-add-row:disabled { opacity: .5; cursor: progress; }
.modern-project-menu { display: grid; gap: 3px; margin: 6px 14px 0; padding: 4px; border: 1px solid var(--mv-line); border-radius: var(--mv-r-s); background: var(--mv-s1); box-shadow: var(--mv-e1); }
.modern-project-menu button { display: flex; gap: 8px; align-items: center; width: 100%; min-height: 30px; padding: 0 8px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--mv-mut); text-align: left; font-size: 11px; }
.modern-project-menu button:hover, .modern-project-menu button:focus-visible { background: var(--mv-s3); color: var(--mv-tx); outline: 0; }
.modern-project-menu button.is-active, .modern-project-menu button[aria-checked="true"] { border-color: rgba(200,255,46,.22); background: linear-gradient(90deg, rgba(200,255,46,.10), rgba(200,255,46,.02)); box-shadow: inset 2px 0 var(--mv-lime); color: var(--mv-tx); }
.modern-project-menu button > span:first-child { width: 14px; color: var(--mv-lime); font-size: 14px; text-align: center; }
.modern-project-menu button[data-duration-mode] > span:first-child { color: var(--mv-qt); }
.modern-project-menu button.is-active > span:first-child, .modern-project-menu button[aria-checked="true"] > span:first-child { color: var(--mv-lime); }
.modern-project-menu-divider { height: 1px; margin: 3px 4px; background: var(--mv-line); }
.modern-project-menu-label { padding: 4px 8px 1px; color: var(--mv-qt); font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.modern-project-rename-form { display: grid; gap: 6px; margin: 6px 14px 0; padding: 9px; border: 1px solid var(--mv-line); border-radius: var(--mv-r-s); background: var(--mv-s1); box-shadow: var(--mv-e1); }
.modern-project-rename-form label { color: var(--mv-qt); font-family: var(--mono); font-size: 10px; }
.modern-project-rename-form input { width: 100%; min-width: 0; height: 30px; padding: 0 8px; border: 1px solid var(--mv-line-2); border-radius: 5px; background: var(--mv-bg); color: var(--mv-tx); font-size: 11px; }
.modern-project-rename-form input:focus { border-color: var(--mv-lime); outline: 0; box-shadow: 0 0 0 3px rgba(200,255,46,.1); }
.modern-project-rename-form > div { display: flex; justify-content: flex-end; gap: 5px; }
.modern-project-rename-form button { min-height: 27px; padding: 0 8px; border: 1px solid var(--mv-line-2); border-radius: 5px; background: transparent; color: var(--mv-mut); font-size: 10px; }
.modern-project-rename-form button[type="submit"] { border-color: rgba(200,255,46,.4); background: rgba(200,255,46,.12); color: var(--mv-lime); }
.modern-episode-list { display: grid; flex: 1 1 auto; align-content: start; min-height: 0; gap: 3px; padding: 12px 14px; overflow-x: hidden; overflow-y: auto; }
.modern-episode-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) 5px; gap: 9px; align-items: center; width: 100%; min-height: 40px; padding: 6px 8px; border: 1px solid transparent; border-left: 2px solid transparent; border-radius: var(--mv-r-s); background: transparent; color: var(--mv-mut); text-align: left; }
.modern-episode-row:hover { background: rgba(255,255,255,.032); color: var(--mv-tx); }
.modern-episode-row.is-active { border-color: rgba(200,255,46,.22); border-left-color: var(--mv-lime); background: linear-gradient(90deg, rgba(200,255,46,.10), rgba(200,255,46,.02)); color: var(--mv-tx); }
.modern-episode-thumb { display: block; width: 32px; height: 20px; aspect-ratio: 16 / 9; border-radius: 4px; background: linear-gradient(160deg, #2A3242, #171B24); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.modern-episode-row.is-complete .modern-episode-thumb { background: linear-gradient(160deg, #34404F, #1B222C); }
.modern-episode-row > div { min-width: 0; display: grid; gap: 4px; }
.modern-episode-row strong, .modern-episode-row small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modern-episode-row strong { font-size: 11.5px; font-weight: 500; }
.modern-episode-row small { color: var(--mv-qt); font-family: var(--mono); font-size: 11px; }
.modern-episode-row > i { width: 5px; height: 5px; border-radius: 50%; background: var(--mv-s3); }
.modern-episode-row.is-complete > i { background: var(--mv-ok); }
.modern-episode-row.is-active > i { background: var(--mv-lime); box-shadow: 0 0 0 3px rgba(200,255,46,.16); }
.modern-series-footer { display: grid; flex: none; gap: 11px; margin-top: auto; padding: 14px; border-top: 1px solid var(--mv-line); }
.modern-progress-track { height: 3px; overflow: hidden; border-radius: 99px; background: var(--mv-line); }
.modern-progress-track span { display: block; width: 0; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--mv-vio), var(--mv-lime)); box-shadow: 0 0 12px rgba(200,255,46,.4); transition: width 240ms ease; }
.modern-progress-label { display: flex; justify-content: space-between; margin-top: 7px; color: var(--mv-qt); font-size: 12px; }
.modern-progress-label strong { color: var(--mv-tx); font-family: var(--mono); }
.modern-bible-entry { display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; width: 100%; min-height: 48px; padding: 8px 10px; border: 1px solid var(--mv-line); border-radius: var(--mv-r-s); background: var(--mv-s1); box-shadow: var(--mv-hi); color: var(--mv-mut); text-align: left; }
.modern-bible-entry:hover { border-color: var(--mv-line-2); background: var(--mv-s2); color: var(--mv-tx); }
.modern-bible-swatch { position: relative; width: 36px; height: 26px; }
.modern-bible-swatch i { position: absolute; display: block; width: 20px; height: 20px; border: 1px solid rgba(255,255,255,.08); border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(11,11,15,.2); }
.modern-bible-swatch i:nth-child(1) { top: 5px; left: 0; background: #263640; }.modern-bible-swatch i:nth-child(2) { top: 2px; left: 8px; background: #8d403c; }.modern-bible-swatch i:nth-child(3) { top: 0; left: 16px; background: #c9a65c; }
.modern-bible-entry > span:nth-child(2) { display: grid; gap: 3px; }.modern-bible-entry b { color: var(--mv-tx); font-size: 10.5px; }.modern-bible-entry small { color: var(--mv-qt); font-size: 8.5px; }.modern-bible-entry em { color: var(--mv-qt); font-style: normal; }

.modern-main { display: flex; min-width: 0; min-height: 0; flex-direction: column; overflow: hidden; background: var(--mv-bg); color: var(--mv-tx); }
.modern-topbar { display: grid; grid-template-columns: auto minmax(0,1fr) auto auto; gap: 18px; align-items: center; min-height: 56px; height: 60px; padding: 0 22px; border-bottom: 1px solid var(--mv-line); background: rgba(11,11,15,.72); box-shadow: var(--mv-hi); }
.modern-breadcrumb { display: flex; gap: 9px; align-items: baseline; min-width: 0; font-size: 11.5px; }.modern-breadcrumb span, .modern-breadcrumb i { color: var(--mv-qt); font-style: normal; }.modern-breadcrumb i { color: var(--mv-s3); }.modern-breadcrumb h1 { margin: 0; overflow: hidden; color: var(--mv-tx); font-size: 17px; font-weight: 600; letter-spacing: 0; white-space: nowrap; text-overflow: ellipsis; }.modern-breadcrumb h1 span { color: inherit; }.modern-ratio-badge { flex: none; padding: 2.5px 7px; border: 1px solid var(--mv-line-2); border-radius: 5px; color: var(--mv-mut); font-family: var(--mono); font-size: 11px; font-weight: 500; }
.modern-top-description { min-width: 0; overflow: hidden; margin: 0; color: var(--mv-qt); font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }.modern-top-actions { display: flex; align-items: center; gap: 9px; }.modern-quiet-button, .modern-queue-button { min-height: 30px; padding: 0 11px; border: 1px solid var(--mv-line); border-radius: 8px; background: var(--mv-s1); color: var(--mv-mut); font-size: 12px; }.modern-quiet-button:hover, .modern-queue-button:hover { border-color: var(--mv-line-2); color: var(--mv-tx); }.modern-queue-button { display: inline-flex; gap: 7px; align-items: center; }.modern-queue-button i { width: 5px; height: 5px; border-radius: 50%; background: var(--mv-amb); box-shadow: 0 0 8px var(--mv-amb); }
.modern-episode-stats { display: flex; gap: 20px; margin: 0; }.modern-episode-stats div { text-align: right; }.modern-episode-stats dt { color: var(--mv-qt); font-family: var(--mono); font-size: 8.5px; letter-spacing: .1em; }.modern-episode-stats dd { margin: 1px 0 0; color: var(--mv-tx); font-family: var(--mono); font-size: 17px; }
.modern-episode-action { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 9px; align-items: center; min-width: 190px; min-height: 36px; padding: 0 14px; border: 0; border-radius: 8px; background: linear-gradient(145deg, #D6FF52, #A8E01C); box-shadow: 0 4px 16px -5px rgba(200,255,46,.6), var(--mv-hi); color: #0B0B0F; text-align: left; }.modern-episode-action:hover { filter: brightness(1.07); }.modern-episode-action span { display: grid; gap: 2px; }.modern-episode-action b { font-size: 11.5px; font-weight: 600; }.modern-episode-action small { color: rgba(11,11,15,.68); font-size: 11px; }.modern-episode-action i { color: rgba(11,11,15,.65); font-style: normal; }

/* flex: none —— .modern-main 是 flex column，不锁的话 pipeline 被压到 43px，
   而内容需要 55px，副标签下半截被裁。
   且不能用 overflow-x: auto：一轴非 visible 时另一轴的 visible 会被提升为
   auto，横向滚动的意图会连带开启纵向裁剪。窄屏溢出交给 media query。 */
.modern-pipeline { display: flex; flex: none; align-items: stretch; gap: 0; padding: 15px 22px 0; }
@media (max-width: 860px) { .modern-pipeline { overflow-x: auto; overflow-y: hidden; padding-bottom: 7px; scrollbar-width: none; } }
.modern-pipeline button { position: relative; display: flex; flex: 0 1 auto; gap: 10px; align-items: center; min-width: 0; min-height: 40px; padding: 9px 15px 9px 12px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--mv-qt); text-align: left; }
.modern-pipeline button:hover { background: rgba(255,255,255,.032); color: var(--mv-mut); }.modern-pipeline button.is-active { box-shadow: inset 0 0 0 1px var(--mv-line-2); color: var(--mv-tx); }
.modern-pipeline button > div { min-width: 0; }.modern-pipeline-mark { display: grid; flex: 0 0 22px; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--mv-s2); box-shadow: inset 0 0 0 1px var(--mv-line); color: var(--mv-qt); font-family: var(--mono); font-size: 9.5px; }
.modern-pipeline b { display: block; font-size: 11.5px; font-weight: 500; white-space: nowrap; }.modern-pipeline small { display: block; overflow: hidden; color: var(--mv-qt); font-family: var(--mono); font-size: 11px; white-space: nowrap; text-overflow: ellipsis; }.modern-pipeline button.is-complete .modern-pipeline-mark { background: rgba(110,231,160,.14); box-shadow: inset 0 0 0 1px rgba(110,231,160,.3); color: var(--mv-ok); font-size: 0; }.modern-pipeline button.is-complete .modern-pipeline-mark::before { content: "✓"; font-size: 14px; }.modern-pipeline button.is-complete b { color: var(--mv-mut); }
.modern-pipeline button.is-current { border-color: rgba(200,255,46,.2); background: linear-gradient(180deg, rgba(200,255,46,.09), rgba(200,255,46,.02)); color: var(--mv-tx); }.modern-pipeline button.is-current .modern-pipeline-mark { background: linear-gradient(145deg, var(--mv-lime), #9FD119); box-shadow: 0 3px 12px -3px rgba(200,255,46,.6); color: #0B0B0F; font-weight: 700; }.modern-pipeline button.is-current b { color: var(--mv-tx); }.modern-pipeline button.is-current small { color: rgba(200,255,46,.75); }
.modern-pipeline-link { display: flex; flex: 0 0 26px; align-items: center; justify-content: center; width: 26px; color: var(--mv-s3); font-size: 12px; }.modern-pipeline-link.is-complete { color: rgba(110,231,160,.45); }
.modern-pipeline-rail { height: 2px; margin: 13px 22px 0; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.05); }.modern-pipeline-rail span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--mv-vio), var(--mv-lime)); box-shadow: 0 0 14px rgba(200,255,46,.45); transition: width 240ms ease; }
.modern-main[data-modern-view="assets"] .modern-sequence,
.modern-main[data-modern-view="assets"] .modern-workbench { display: none; }
.modern-main[data-modern-view="storyboard"] .modern-source-panel,
.modern-main[data-modern-view="storyboard"] .modern-kit-bar,
.modern-main[data-modern-view="storyboard"] .modern-stage-pane:last-child { display: none; }
.modern-main[data-modern-view="video"] .modern-source-panel,
.modern-main[data-modern-view="video"] .modern-kit-bar,
.modern-main[data-modern-view="video"] .modern-stage-pane:first-child,
.modern-main[data-modern-view="video"] .modern-stage-pane:nth-child(2) { display: none; }
/* 成片面板只在第 04 步出现；其余三个视图隐藏。 */
.modern-main:not([data-modern-view="cut"]) .modern-cut-panel { display: none; }
.modern-main[data-modern-view="cut"] .modern-source-panel,
.modern-main[data-modern-view="cut"] .modern-kit-bar,
.modern-main[data-modern-view="cut"] .modern-sequence,
.modern-main[data-modern-view="cut"] .modern-workbench { display: none; }
/* ===== 第 04 步：组装成片面板 =====
   此前成片只存在于 legacy template（永不渲染）与隐藏 bridge 中，
   新版制作台没有任何可见入口。这里给它一个与 source-panel 同规格的面板。 */
.modern-cut-panel { margin: 18px 26px 18px; border: 1px solid var(--modern-line); border-radius: 5px; background: var(--modern-surface); }
/* align-items: start 让 STEP 标记与 FINAL CUT eyebrow 同一条基线；
   source-head 用的 end 会把它压到面板底部，与标题错开 40+px。 */
.modern-cut-head { display: flex; justify-content: space-between; gap: 16px; align-items: start; padding: 12px 14px; border-bottom: 1px solid var(--modern-line); }
.modern-cut-head strong { display: block; margin-top: 4px; font-size: 14px; }
.modern-cut-head small { display: block; margin-top: 4px; color: var(--modern-quiet); font-size: 12px; line-height: 1.6; }
.modern-cut-status { display: flex; align-items: center; gap: 9px; padding: 11px 14px; border-bottom: 1px solid var(--modern-line); color: var(--modern-muted); font-size: 13px; }
.modern-cut-preview { padding: 14px; }
.modern-cut-preview .final-cut-video { position: relative; max-width: 320px; margin: 0 auto; }
.modern-cut-preview video { width: 100%; border: 1px solid var(--modern-line); border-radius: 4px; background: #000; }
/* align-content: center 是必需的：place-items 只管格内对齐，min-height
   撑出的富余空间仍会摊到行间，实测把图标与文字拉开 77px（应为 9px）。 */
.modern-cut-preview .final-cut-placeholder { display: grid; place-items: center; align-content: center; gap: 9px; min-height: 190px; border: 1px dashed var(--modern-line-strong); border-radius: 4px; color: var(--modern-quiet); font-size: 12px; }
.modern-cut-preview .final-cut-placeholder svg { width: 30px; height: 30px; fill: none; stroke: var(--modern-line-strong); stroke-width: 1.5; }
.modern-cut-foot { display: flex; justify-content: space-between; gap: 14px; align-items: center; padding: 11px 14px; border-top: 1px solid var(--modern-line); background: var(--modern-surface-2); }
.modern-cut-foot small { color: var(--modern-quiet); font-size: 12px; }
/* 用 min-height 而非 height：全站 button{min-height:36px} 会压过 height。
   28px 沿用 .modern-pane-actions / .modern-source-actions 的既有约定。 */
.modern-cut-foot button { min-height: 28px; padding: 0 15px; border: 0; border-radius: 3px; background: var(--modern-signal); color: #0f1112; font-size: 13px; font-weight: 600; cursor: pointer; }
.modern-cut-foot button:disabled { opacity: .5; cursor: not-allowed; }
@media (max-width: 1180px) {
  .modern-cut-panel { margin: 14px 14px 14px; }
}

.modern-core { min-height: 0; flex: 1 1 auto; overflow: auto; scrollbar-width: thin; }
.modern-core > .modern-source-panel,
.modern-core > .modern-kit-bar,
.modern-core > .modern-sequence,
.modern-core > .modern-workbench { flex-shrink: 0; }
.modern-source-panel { display: grid; grid-template-columns: minmax(0, 1fr) 292px; margin: 18px 26px 0; border: 1px solid var(--modern-line); border-radius: 5px; background: var(--modern-surface); }
.modern-source-head { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 16px; align-items: end; padding: 12px 14px; border-bottom: 1px solid var(--modern-line); }
.modern-source-head > div { display: grid; gap: 4px; }
.modern-source-head strong { font-size: 15px; }
.modern-source-head small { color: var(--modern-muted); font-size: 11px; }
.modern-source-order { color: var(--mv-qt); font-family: var(--mono); font-size: 11px; }
/* 对白语言选择:改版时漏搬的旧控件。沿用 .modern-copy-tabs 的分段按钮观感。
   父选择器要用 .modern-source-head > .modern-source-head-aside,否则被上面
   .modern-source-head > div { display: grid } 按特异度盖掉,布局只是碰巧成立。 */
.modern-source-head > .modern-source-head-aside { display: flex; flex: none; gap: 10px; align-items: center; }
.modern-lang-tabs { display: flex; gap: 5px; }
.modern-lang-tabs button { min-height: 26px; padding: 0 9px; border: 1px solid var(--modern-line); border-radius: 3px; background: transparent; color: var(--modern-quiet); font-size: 11px; }
.modern-lang-tabs button:hover:not(:disabled) { border-color: var(--mv-line-2); background: var(--mv-s3); color: var(--mv-tx); }
.modern-lang-tabs button[aria-checked="true"] { border-color: var(--mv-line-2); background: var(--mv-s3); color: var(--mv-tx); box-shadow: var(--mv-hi); }
.modern-lang-tabs button:disabled { opacity: .5; cursor: not-allowed; }
.modern-source-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-width: 0; }
.modern-source-field { min-width: 0; padding: 13px 14px 12px; }
.modern-source-field + .modern-source-field { border-left: 1px solid var(--modern-line); }
.modern-source-field > header { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; align-items: center; margin-bottom: 9px; }
.modern-source-field > header > span { color: var(--mv-qt); font-family: var(--mono); font-size: 12px; }
.modern-source-field > header > div { min-width: 0; display: grid; gap: 3px; }
.modern-source-field > header small { color: var(--modern-quiet); font-family: var(--mono); font-size: 10px; }
.modern-source-field > header h3 { margin: 0; font-size: 14px; }
.modern-source-field > header i { padding: 3px 5px; border: 1px solid var(--modern-line); border-radius: 3px; color: var(--modern-quiet); font-size: 10px; font-style: normal; white-space: nowrap; }
.modern-source-field > header i.is-saved { border-color: rgba(159,207,88,.32); color: #bde768; }
.modern-source-field textarea { display: block; width: 100%; min-height: 105px; resize: vertical; padding: 9px; border: 1px solid var(--modern-line); border-radius: 4px; outline: 0; background: #111314; color: var(--modern-text); font-size: 12px; line-height: 1.55; }
.modern-source-field textarea:focus { border-color: var(--modern-signal); }
.modern-source-actions { display: flex; gap: 6px; align-items: center; min-width: 0; margin-top: 8px; }
/* 「支持 MD / TXT / DOCX」这类提示 span 原本没有收缩规则,字号统一 +2 后顶出容器
   (实测 1100px:modernScriptUploadName 溢出 7px、AssetDescriptionUploadName 由 29px
   恶化到 70px)。给它可收缩 + 省略号,而不是回退字号。 */
.modern-source-actions input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.modern-upload-button, .modern-source-actions button { display: inline-flex; align-items: center; justify-content: center; min-height: 28px; padding: 0 9px; border: 1px solid var(--modern-line-strong); border-radius: 3px; background: transparent; color: var(--modern-muted); font-size: 11px; white-space: nowrap; cursor: pointer; }
.modern-upload-button:hover, .modern-source-actions button:hover { border-color: var(--mv-line-2); background: var(--mv-s3); color: var(--mv-tx); }
/* 二级：步骤内主动作。此前三处 .is-primary 各自用柠檬描边，与顶栏的柠檬
   实心 CTA 同屏竞争——暗底上描边柠檬的注意力权重往往还高于实心，主次是
   反的。改为中性实心，靠「实心 vs 描边」而非色相拉开层级。 */
.modern-source-actions button.is-primary { border-color: var(--mv-line-2); background: var(--mv-s3); color: var(--mv-tx); box-shadow: var(--mv-hi); font-weight: 500; }
/* flex: 1 会被兄弟按钮挤扁——字号统一 +2 后实测 1100px 下「支持 TXT / DOCX」
   可见比例从 58% 掉到 19%,只剩一个省略号。改成不收缩,容器已有 flex-wrap,
   放不下就整体换行独占一行;ellipsis 只作独占一行仍不够时的兜底。 */
.modern-source-actions > span:not(.modern-asset-primary-actions) { min-width: 0; flex: 0 0 auto; max-width: 100%; overflow: hidden; color: var(--modern-quiet); font-family: var(--mono); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.modern-asset-primary-actions { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 8px; margin-left: auto; }
.modern-asset-primary-actions button { min-height: 34px; padding: 0 14px; border-color: var(--mv-line-2); background: var(--mv-s3); color: var(--mv-tx); box-shadow: var(--mv-hi); font-size: 12px; font-weight: 550; }
.modern-asset-primary-actions button:hover:not(:disabled) { border-color: var(--mv-line-2); background: var(--mv-s2); color: var(--mv-tx); }
.modern-asset-primary-actions button:disabled { cursor: not-allowed; opacity: .5; }
.modern-asset-results { min-width: 0; grid-column: 2; grid-row: 2; padding: 13px 14px 14px; border-left: 1px solid var(--modern-line); }
.modern-asset-results-head { display: flex; gap: 10px; align-items: start; justify-content: space-between; padding-bottom: 10px; border-bottom: 1px solid var(--modern-line); }
.modern-asset-results-head > div { min-width: 0; display: grid; gap: 4px; }
.modern-asset-results-head strong { font-size: 14px; }
.modern-asset-results-head small { color: var(--modern-muted); font-size: 11px; line-height: 1.45; }
.modern-asset-results-head button { flex: 0 0 auto; min-height: 27px; padding: 0 8px; border: 1px solid var(--modern-line-strong); border-radius: 3px; background: transparent; color: var(--modern-muted); font-size: 11px; }
.modern-asset-results-head button:not(:disabled) { border-color: var(--mv-line-2); color: var(--mv-tx); }
.modern-asset-results-head button:disabled { opacity: .5; }
.modern-asset-manifest-overview { display: grid; gap: 8px; padding: 10px 0; }
.modern-asset-manifest-empty { color: var(--modern-quiet); font-size: 11px; line-height: 1.5; }
.modern-asset-group { display: grid; gap: 5px; }
.modern-asset-group > header { display: flex; justify-content: space-between; gap: 8px; color: var(--modern-quiet); font-family: var(--mono); font-size: 10px; }
.modern-asset-group > header strong { color: var(--modern-muted); font-family: inherit; font-size: 10px; font-weight: 500; }
.modern-asset-chip-list { display: flex; flex-wrap: wrap; gap: 4px; }
.modern-asset-chip { position: relative; display: inline-flex; max-width: 100%; align-items: center; gap: 6px; padding: 9px 38px 9px 12px; overflow: visible; border: 1px solid var(--modern-line); border-radius: 8px; background: rgba(15, 20, 27, .72); color: var(--modern-text); font-size: 11px; white-space: nowrap; }
.modern-asset-chip-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modern-asset-chip.is-manage-mode { position: relative; padding-right: 36px; border-color: var(--modern-line); background: rgba(200,255,46,.045); box-shadow: inset 0 0 0 1px rgba(200,255,46,.08); }
.modern-asset-chip-remove { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 1px solid rgba(242,122,91,.5); border-radius: 6px; background: rgba(242,122,91,.14); color: #ffb4a8; font-size: 14px; font-weight: 700; line-height: 1; text-decoration: none; cursor: pointer; }
.modern-asset-chip-remove:hover { border-color: rgba(255,164,145,.9); background: rgba(242,122,91,.24); color: #fff0ec; }
.modern-asset-chip-remove:focus-visible { outline: 2px solid var(--mv-lime); outline-offset: 2px; }
.modern-asset-chip-remove:disabled { cursor: wait; opacity: .5; }
.modern-asset-chip.is-skipped { color: var(--modern-quiet); text-decoration: line-through; }
.modern-asset-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding-top: 9px; border-top: 1px solid var(--modern-line); }
.modern-asset-card { min-width: 0; overflow: hidden; border: 1px solid var(--modern-line); border-radius: 3px; background: #111314; }
.modern-asset-card-media { aspect-ratio: 1 / 1; display: grid; place-items: center; overflow: hidden; background: #0c0e0f; }
.modern-asset-card-media img { width: 100%; height: 100%; object-fit: cover; }
.modern-asset-card-media span { padding: 7px; color: var(--modern-quiet); font-size: 10px; text-align: center; }
.modern-asset-card > strong { display: block; padding: 5px 6px 6px; overflow: hidden; color: var(--modern-muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.modern-kit-bar { display: grid; grid-template-columns: minmax(230px,1.2fr) minmax(170px,1fr) minmax(120px,.7fr) auto; gap: 18px; align-items: center; margin: 18px 26px 0; padding: 12px 14px; border: 1px solid var(--modern-line); border-radius: 5px; background: var(--modern-surface); }.modern-kit-bar > div { min-width: 0; display: flex; gap: 10px; align-items: center; }.modern-kit-bar > div > span:not(.modern-kit-mark) { color: var(--modern-quiet); font-size: 11px; }.modern-kit-bar strong, .modern-kit-bar b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }/* 徽章是标签不是动作，不用动作色。 */
.modern-kit-mark { display: grid; place-items: center; width: 33px; height: 28px; border: 1px solid var(--mv-line-2); border-radius: var(--mv-r-s); background: var(--mv-s3); color: var(--mv-mut); font-family: var(--mono); font-size: 11px; }.modern-kit-bar button { min-height: 30px; padding: 0 11px; border: 1px solid var(--modern-line-strong); border-radius: 4px; background: transparent; color: var(--modern-muted); font-size: 12px; }.modern-kit-bar button:hover { border-color: var(--mv-line-2); background: var(--mv-s3); color: var(--mv-tx); }.modern-kit-bar button.is-active { border-color: rgba(200,255,46,.42); background: rgba(200,255,46,.1); color: var(--mv-lime); }
.modern-sequence { margin: 18px 26px 0; }.modern-sequence > header { display: flex; justify-content: space-between; align-items: end; margin-bottom: 10px; }.modern-sequence > header > div { display: grid; gap: 4px; }.modern-sequence > header strong { font-size: 15px; }.modern-sequence > header > span { color: var(--modern-quiet); font-family: var(--mono); font-size: 11px; }.modern-shot-card strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 550; }.modern-shot-card small { display: block; margin-top: 3px; color: var(--modern-quiet); font-size: 10px; }
.modern-workbench { margin: 22px 26px 28px; border: 1px solid var(--modern-line); border-radius: 5px; background: var(--modern-surface); }.modern-shot-commandbar { display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 18px; align-items: center; padding: 13px 15px; border-bottom: 1px solid var(--modern-line); }.modern-selected-shot { display: flex; gap: 11px; align-items: center; min-width: 0; }.modern-selected-shot > span { color: var(--mv-qt); font-family: var(--mono); font-size: 15px; }.modern-selected-shot h2 { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; }.modern-selected-shot p { margin: 4px 0 0; color: var(--modern-quiet); font-size: 11px; }.modern-shot-lineage { display: flex; gap: 7px; align-items: center; color: var(--modern-quiet); font-family: var(--mono); font-size: 10px; }.modern-shot-lineage span.is-done { color: #a8d65c; }.modern-shot-lineage i { width: 16px; height: 1px; background: var(--modern-line-strong); }.modern-shot-action { min-height: 30px; padding: 0 11px; border: 1px solid var(--modern-line-strong); border-radius: 4px; background: transparent; color: var(--modern-muted); font-size: 12px; }.modern-shot-action:hover { border-color: var(--mv-line-2); background: var(--mv-s3); color: var(--mv-tx); }
.modern-video-params { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; margin-top: 6px; color: var(--modern-quiet); font-size: 10px; }
.modern-selected-shot > div { min-width: 0; }
.modern-video-param-controls { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 5px; min-width: 0; }
.modern-video-param { display: inline-flex; align-items: center; gap: 4px; min-width: 0; color: var(--modern-quiet); font-family: var(--mono); font-size: 10px; white-space: nowrap; }
.modern-video-params select { min-width: 68px; max-width: 170px; min-height: 27px; padding: 0 21px 0 7px; border: 1px solid var(--modern-line-strong); border-radius: 3px; outline: 0; background: var(--mv-s2); color: var(--mv-mut); font: inherit; cursor: pointer; }
.modern-video-params select:focus { border-color: var(--mv-line-2); color: var(--mv-tx); }
.modern-video-param-model select { min-width: 145px; }
.modern-video-param-model { max-width: 220px; }
.modern-video-param-model select { width: 100%; overflow: hidden; text-overflow: ellipsis; }
.modern-video-params > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 固定三列时，视图作用域隐藏掉两个面板后剩下那个只占 1/3，实测 1081px
   容器里 721px 是空的——与已修掉的 hero 844px 死区同一类毛病。改成按
   可见项生成列。 */
.modern-stage-grid { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0,1fr); }.modern-stage-pane { min-width: 0; padding: 14px; border-right: 1px solid var(--modern-line); }.modern-stage-pane:last-child { border-right: 0; }.modern-stage-pane > header { display: grid; grid-template-columns: 22px minmax(0,1fr) auto; gap: 8px; align-items: center; padding-bottom: 11px; border-bottom: 1px solid var(--modern-line); }.modern-stage-pane > header > span { color: var(--mv-qt); font-family: var(--mono); font-size: 12px; }.modern-stage-pane > header > div { min-width: 0; }.modern-stage-pane > header small { color: var(--modern-quiet); font-family: var(--mono); font-size: 10px; }.modern-stage-pane > header h3 { margin: 4px 0 0; font-size: 14px; }.modern-stage-pane > header > i { padding: 3px 5px; border: 1px solid var(--modern-line); border-radius: 3px; color: var(--modern-quiet); font-size: 10px; font-style: normal; white-space: nowrap; }.modern-stage-pane > header > i.is-complete { border-color: rgba(159,207,88,.32); color: #bde768; }.modern-stage-pane > header > i.is-running { border-color: rgba(200,255,46,.42); color: var(--modern-signal); }.modern-stage-pane > header > i.is-failed { border-color: rgba(242,122,91,.4); color: var(--modern-accent); }
.modern-copy-tabs { display: flex; gap: 5px; margin: 12px 0 8px; }.modern-copy-tabs button { min-height: 26px; padding: 0 8px; border: 1px solid var(--modern-line); border-radius: 3px; background: transparent; color: var(--modern-quiet); font-size: 11px; }/* 标签是导航不是动作，不用动作色；靠表面明度表示选中。 */
.modern-copy-tabs button.is-active { border-color: var(--mv-line-2); background: var(--mv-s3); color: var(--mv-tx); box-shadow: var(--mv-hi); }.modern-copy-label { display: block; margin-bottom: 5px; color: var(--modern-quiet); font-size: 11px; }.modern-stage-pane textarea { width: 100%; min-height: 168px; resize: vertical; padding: 9px; border: 1px solid var(--modern-line); border-radius: 4px; outline: 0; background: #111314; color: var(--modern-text); font-size: 13px; line-height: 1.55; }.modern-stage-pane textarea:focus { border-color: var(--modern-signal); }.modern-copy-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 7px; }.modern-copy-footer span { color: var(--modern-quiet); font-family: var(--mono); font-size: 10px; }.modern-copy-footer button, .modern-pane-actions button { min-height: 28px; padding: 0 9px; border: 1px solid var(--modern-line-strong); border-radius: 3px; background: transparent; color: var(--modern-muted); font-size: 11px; }.modern-copy-footer button:hover, .modern-pane-actions button:hover { border-color: var(--mv-line-2); background: var(--mv-s3); color: var(--mv-tx); }
.modern-shot-meta { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; margin: 12px 0 0; }.modern-shot-meta div { min-width: 0; padding-top: 8px; border-top: 1px solid var(--modern-line); }.modern-shot-meta dt { color: var(--modern-quiet); font-size: 10px; }.modern-shot-meta dd { margin: 4px 0 0; overflow: hidden; color: var(--modern-muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.modern-reference-strip { display: flex; justify-content: space-between; gap: 8px; margin: 12px 0 9px; padding: 7px 8px; border: 1px solid var(--modern-line); background: #111314; color: var(--modern-muted); font-size: 10px; }.modern-reference-strip b { color: var(--mv-tx); font-weight: 500; }.modern-still-preview, .modern-video-preview { position: relative; display: grid; place-items: center; min-height: 206px; overflow: hidden; border: 1px solid var(--modern-line); background: #0c0e0f; }.modern-still-preview img, .modern-video-preview img, .modern-video-preview video { display: block; width: 100%; height: 206px; object-fit: cover; }.modern-empty-preview { color: var(--modern-quiet); font-size: 12px; }.modern-still-preview > .modern-empty-preview, .modern-video-preview > .modern-empty-preview { position: absolute; }.modern-still-preview img:not([src=""])+.modern-empty-preview, .modern-video-preview img:not([src=""])+.modern-empty-preview { display: none; }
/* 反向那条此前缺失：src="" 的 img 仍占位 329×206，浏览器的裂图标与 alt
   文字压在「暂无故事板」占位层上面，实测两者同时显示。 */
.modern-still-preview img[src=""], .modern-video-preview img[src=""] { display: none; }
.modern-still-preview > span { position: absolute; left: 8px; bottom: 8px; padding: 4px 6px; border: 1px solid var(--mv-line-2); background: rgba(15,17,18,.82); color: var(--mv-mut); font-family: var(--mono); font-size: 10px; }.modern-pane-actions { display: flex; gap: 7px; margin-top: 9px; }.modern-pane-actions button { flex: 1; }.modern-pane-actions button.is-primary { border-color: var(--mv-line-2); background: var(--mv-s3); color: var(--mv-tx); box-shadow: var(--mv-hi); font-weight: 500; }.modern-motion-meta { display: flex; justify-content: space-between; margin-top: 9px; color: var(--modern-muted); font-family: var(--mono); font-size: 10px; }.modern-motion-meta strong { color: var(--modern-text); font-weight: 500; }.modern-video-progress { position: absolute; right: 8px; bottom: 8px; left: 8px; height: 3px; background: rgba(255,255,255,.14); }.modern-video-progress span { display: block; width: 0; height: 100%; background: var(--modern-signal); transition: width 220ms ease; }
.modern-stage-pane.is-disabled { opacity: .68; }.modern-stage-pane .hidden { display: none !important; }
.modern-stage-pane.is-focus-pulse, #modernKitBar.is-focus-pulse {
  animation: modernFocusPulse 900ms ease both !important;
}
@keyframes modernFocusPulse {
  0% { outline: 0 solid rgba(200,255,46,0); outline-offset: 0; }
  35% { outline: 2px solid rgba(200,255,46,.55); outline-offset: 3px; }
  100% { outline: 0 solid rgba(200,255,46,0); outline-offset: 7px; }
}
@media (max-width: 1180px) { .studio-modern-shell { grid-template-columns: 190px minmax(0,1fr); }.modern-topbar { gap: 12px; padding: 0 16px; }.modern-episode-action { min-width: 166px; padding: 0 11px; }.modern-kit-bar { grid-template-columns: minmax(200px,1fr) minmax(140px,1fr) auto; }.modern-kit-bar > div:nth-child(3) { display: none; } }
@media (max-width: 980px) { .modern-source-panel { display: block; margin: 14px 14px 0; }.modern-source-grid { grid-template-columns: 1fr; }.modern-source-field + .modern-source-field { border-top: 1px solid var(--modern-line); border-left: 0; }.modern-asset-results { border-top: 1px solid var(--modern-line); border-left: 0; } }
@media (max-width: 980px) { body.is-studio-modern { min-width: 0; }.studio-modern-shell { display: block; height: auto; min-height: 100vh; overflow: visible; }.modern-main { min-height: 0; overflow: visible; }.modern-series-nav { position: relative; height: auto; max-height: none; border-right: 0; border-bottom: 1px solid var(--mv-line); }.modern-brand { display: flex; align-items: center; justify-content: space-between; }.modern-series-context, .modern-series-footer { display: none; }.modern-episode-list { display: flex; gap: 4px; padding: 8px 10px; overflow-x: auto; overflow-y: hidden; }.modern-episode-row { flex: 0 0 150px; }.modern-stage-grid { grid-template-columns: 1fr; }.modern-stage-pane { border-right: 0; border-bottom: 1px solid var(--mv-line); }.modern-stage-pane:last-child { border-bottom: 0; }.modern-kit-bar { margin: 14px 14px 0; }.modern-sequence { margin: 14px; }.modern-workbench { margin: 18px 14px 24px; }.modern-core { overflow: visible; } }
@media (max-width: 980px) {
  .modern-series-nav-toggle { display: none; }
  body.is-studio-modern .studio-modern-shell.is-nav-collapsed { display: block; }
  body.is-studio-modern .studio-modern-shell.is-nav-collapsed .modern-brand-copy { display: flex; }
  body.is-studio-modern .studio-modern-shell.is-nav-collapsed .modern-brand button { width: 146px; }
  body.is-studio-modern .studio-modern-shell.is-nav-collapsed .modern-brand-logo { width: 146px; background-size: contain; }
  body.is-studio-modern .studio-modern-shell.is-nav-collapsed .modern-project-switcher { display: block; }
  body.is-studio-modern .studio-modern-shell.is-nav-collapsed .modern-episode-list { display: flex; }
}

/* Keep source fields compact beside the parsed-assets rail instead of stretching to its height. */
.modern-source-panel { display: flex; flex-wrap: wrap; align-items: flex-start; }
.modern-source-head { flex: 0 0 100%; }
.modern-source-grid { flex: 1 1 auto; align-self: flex-start; }
.modern-asset-results { flex: 0 0 292px; align-self: flex-start; }
.modern-stage-pane { align-self: start; }

/* Video output remains portrait by design; storyboard stills use the active 16:9 board format. */
.modern-video-preview { width: min(100%, 260px); aspect-ratio: 9 / 16; min-height: 0; height: auto; margin: 12px auto 0; }
.modern-video-preview img,
.modern-video-preview video { width: 100%; height: 100%; object-fit: cover; }
.modern-still-preview { width: min(100%, 420px); aspect-ratio: 16 / 9; min-height: 0; height: auto; margin: 12px auto 0; }
.modern-still-preview img { width: 100%; height: 100%; object-fit: cover; }

/* Bound the asset rail so a long manifest cannot turn the source step into a blank wall. */
.modern-asset-results { max-height: min(520px, calc(100vh - 250px)); overflow-y: auto; scrollbar-width: thin; }
.modern-asset-card-media { aspect-ratio: 4 / 3; }

@media (max-width: 980px) {
  .modern-source-panel { display: block; }
  .modern-source-head, .modern-source-grid, .modern-asset-results { width: 100%; }
  .modern-asset-results { max-height: none; overflow: visible; }
}
@media (prefers-reduced-motion: reduce) { .modern-progress-track span, .modern-video-progress span { transition: none; } }

/* Use the former card-wall treatment for generated assets while keeping the parsed manifest as a readable rail. */
.modern-source-panel { display: grid; grid-template-columns: minmax(0, 1fr) 292px; grid-template-rows: auto auto auto; align-items: start; }
.modern-source-head { grid-column: 1 / -1; grid-row: 1; width: auto; flex: none; }
.modern-source-grid { grid-column: 1; grid-row: 2; width: auto; flex: none; }
.modern-asset-wall { grid-column: 1; grid-row: 3; min-width: 0; padding: 14px; border-top: 1px solid var(--modern-line); }
.modern-asset-wall-head { display: flex; align-items: end; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.modern-asset-wall-head > div { display: grid; gap: 4px; }
.modern-asset-wall-head strong { font-size: 15px; }
.modern-asset-wall-head small, .modern-asset-wall-head > span { color: var(--modern-muted); font-size: 11px; }
.modern-asset-gallery { display: grid; gap: 16px; padding: 0; border-top: 0; }
.modern-asset-wall-group { display: grid; gap: 8px; min-width: 0; }
.modern-asset-wall-group > header { display: flex; align-items: center; gap: 9px; padding-bottom: 7px; border-bottom: 1px solid var(--modern-line); }
.modern-asset-wall-group > header > span { color: var(--mv-qt); font-family: var(--mono); font-size: 12px; }
.modern-asset-wall-group > header > div { display: grid; gap: 2px; min-width: 0; }
.modern-asset-wall-group > header small { color: var(--modern-quiet); font-family: var(--mono); font-size: 10px; }
.modern-asset-wall-group > header strong { color: var(--modern-text); font-size: 14px; }
.modern-asset-wall-group > header > b { margin-left: auto; color: var(--modern-muted); font-family: var(--mono); font-size: 11px; font-weight: 500; }
.modern-asset-wall-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.modern-asset-card { display: grid; grid-template-rows: auto auto; min-width: 0; padding: 0; overflow: hidden; border: 1px solid var(--modern-line); border-radius: 5px; background: #111314; color: var(--modern-text); text-align: left; cursor: zoom-in; }
.modern-asset-card:hover, .modern-asset-card:focus-visible { border-color: var(--mv-line-2); outline: none; }
.modern-asset-card-media { aspect-ratio: 16 / 9; }
.modern-asset-card-copy { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; padding: 8px 9px 9px; }
.modern-asset-card-copy strong { min-width: 0; overflow: hidden; color: var(--modern-text); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.modern-asset-card-copy small { flex: 0 0 auto; color: var(--modern-muted); font-size: 11px; }
.modern-asset-results { grid-column: 2; grid-row: 2 / span 2; width: auto; flex: none; max-height: min(680px, calc(100vh - 250px)); overflow-y: auto; }
.modern-asset-results-head strong { font-size: 17px; }
.modern-asset-results-head small { font-size: 12px; }
.modern-asset-group > header { font-size: 12px; }
.modern-asset-group > header strong { font-size: 12px; }
.modern-asset-chip-list { gap: 6px; }
.modern-asset-chip { padding: 6px 8px; font-size: 13px; }
.modern-asset-generation-controls { display: grid; gap: 8px; margin-bottom: 14px; padding: 10px; border: 1px solid var(--modern-line); border-radius: 4px; background: #111314; }
.modern-asset-generation-row { display: grid; grid-template-columns: minmax(170px, .42fr) minmax(0, 1fr); gap: 8px; align-items: end; }
.modern-asset-generation-row > label, .modern-asset-reference-file { display: grid; gap: 4px; min-width: 0; }
.modern-asset-generation-row label > span, .modern-asset-reference-file > span { color: var(--modern-quiet); font-family: var(--mono); font-size: 10px; }
.modern-asset-generation-row select, .modern-asset-generation-row input:not([type="file"]) { width: 100%; min-height: 28px; padding: 0 8px; border: 1px solid var(--modern-line); border-radius: 3px; background: #0c0e0f; color: var(--modern-text); font-size: 12px; }
.modern-asset-generation-row select:focus, .modern-asset-generation-row input:focus { border-color: var(--modern-signal); outline: 0; }
.modern-asset-reference-row, .modern-asset-bind-row { grid-template-columns: minmax(0, 1fr) auto auto minmax(64px, 100px); align-items: center; }
.modern-asset-bind-row { grid-template-columns: minmax(170px, .42fr) minmax(0, 1fr) auto; }
.modern-asset-reference-file { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 6px; }
.modern-asset-reference-file input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.modern-asset-reference-file label { display: inline-flex; align-items: center; justify-content: center; min-height: 28px; padding: 0 8px; border: 1px solid var(--modern-line-strong); border-radius: 3px; color: var(--modern-muted); font-size: 11px; cursor: pointer; white-space: nowrap; }
.modern-asset-reference-file label:hover { border-color: var(--mv-line-2); background: var(--mv-s3); color: var(--mv-tx); }
.modern-asset-reference-file small { min-width: 0; overflow: hidden; color: var(--modern-quiet); font-family: var(--mono); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.modern-asset-reference-toggle { display: inline-flex !important; grid-template-columns: auto auto !important; align-items: center; gap: 5px !important; white-space: nowrap; }
.modern-asset-reference-toggle input { width: 13px; height: 13px; accent-color: var(--modern-signal); }
.modern-asset-reference-row > button, .modern-asset-bind-row > button { min-height: 28px; padding: 0 9px; border: 1px solid var(--modern-line-strong); border-radius: 3px; background: transparent; color: var(--modern-muted); font-size: 11px; white-space: nowrap; }
.modern-asset-bind-row > button.is-primary { border-color: var(--mv-line-2); background: var(--mv-s3); color: var(--mv-tx); box-shadow: var(--mv-hi); font-weight: 500; }
.modern-asset-reference-row > button:hover, .modern-asset-bind-row > button:hover { border-color: var(--mv-line-2); background: var(--mv-s3); color: var(--mv-tx); }
.modern-asset-style-reference-preview { width: 64px; height: 38px; overflow: hidden; border: 1px solid var(--modern-line); background: #0c0e0f; }
.modern-asset-style-reference-preview:empty { display: none; }
.modern-asset-style-reference-preview img { display: block; width: 100%; height: 100%; object-fit: cover; }
.modern-asset-style-preview { display: flex; flex-wrap: wrap; gap: 5px 8px; align-items: center; color: var(--modern-muted); font-size: 11px; }
.modern-asset-style-preview > span { color: var(--mv-qt); font-family: var(--mono); }
.modern-asset-style-preview > small { color: var(--modern-quiet); font-size: 11px; }
.modern-asset-style-preview > b { color: var(--modern-text); font-size: 11px; font-weight: 500; }

@media (max-width: 980px) {
  .modern-source-panel { display: block; }
  .modern-source-head, .modern-source-grid, .modern-asset-wall, .modern-asset-results { width: 100%; }
  .modern-asset-wall { border-top: 1px solid var(--modern-line); }
  .modern-asset-results { max-height: none; overflow: visible; }
  .modern-asset-wall-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .modern-asset-reference-row, .modern-asset-bind-row { grid-template-columns: 1fr; align-items: stretch; }
  .modern-asset-style-reference-preview { width: 100%; height: 90px; }
}

/* Modern studio redesign: measured content, aligned controls, media-first shots,
   and a full-height final-cut assembly card. */
.modern-topbar,
.modern-pipeline,
.modern-pipeline-rail { flex: none; }
.modern-core {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-content: flex-start;
  width: 100%;
  /* 1140px 的居中阅读栏对纯文字视图合理,但在 1512px 屏上白扔 245px
     (实测:main 1288 → core 1140,左右各 74px 外边距 + 24px 内边距,
     资产图墙每行只排得下 3 张)。上限提到 1560px:常见笔记本宽度下等于
     铺满,超宽屏仍有上限,不至于一行拉出 8-9 张、文字行长过长。 */
  max-width: 1560px;
  margin: 0 auto;
  gap: 16px;
  padding: 20px 24px 34px;
  overflow-x: hidden;
  overflow-y: auto;
}
.modern-core > .modern-source-panel,
.modern-core > .modern-kit-bar,
.modern-core > .modern-sequence,
.modern-core > .modern-workbench,
.modern-core > .modern-cut-panel {
  flex: none;
  width: 100%;
  margin: 0;
}
.modern-source-panel,
.modern-kit-bar,
.modern-sequence,
.modern-workbench,
.modern-cut-panel {
  border: 1px solid var(--mv-line);
  border-radius: var(--mv-r);
  background: var(--mv-s1);
  box-shadow: var(--mv-e1), var(--mv-hi);
}
.modern-source-panel { border-radius: var(--mv-r); box-shadow: var(--mv-e1), var(--mv-hi); }
.modern-source-panel,
.modern-workbench,
.modern-cut-panel { overflow: hidden; }
.modern-sequence { padding: 16px; }
.modern-sequence > header { margin-bottom: 14px; }
.modern-kit-bar { padding: 12px 14px; }

/* 改动 4：标签列固定 96px，所有控件从同一条竖线开始。 */
.modern-asset-generation-controls {
  gap: 10px;
  margin-bottom: 14px;
  padding: 14px;
  border: 1px solid var(--mv-line);
  border-radius: var(--mv-r-s);
  background: var(--mv-s2);
  box-shadow: var(--mv-hi);
}
.modern-asset-generation-row {
  grid-template-columns: 96px minmax(0,1fr);
  gap: 14px;
  align-items: center;
}
.modern-asset-form-row > label {
  display: block;
  min-width: 0;
  color: var(--mv-mut);
  font-size: 11.5px;
  line-height: 1.35;
  text-align: right;
}
.modern-asset-form-control {
  display: flex;
  min-width: 0;
  gap: 8px;
  align-items: center;
}
.modern-asset-form-control > input:not([type="file"]),
.modern-asset-form-control > select.seg {
  min-width: 0;
  width: 100%;
}
.modern-asset-generation-controls input:not([type="file"]),
.modern-asset-generation-controls select.seg {
  min-height: 32px;
  height: 32px;
  padding: 0 11px;
  border: 1px solid var(--mv-line);
  border-radius: var(--mv-r-s);
  background: var(--mv-bg);
  color: var(--mv-tx);
  font-size: 11.5px;
}
.modern-asset-generation-controls select.seg {
  appearance: none;
  border-radius: 999px;
  cursor: pointer;
}
.modern-asset-generation-controls input:focus,
.modern-asset-generation-controls select:focus {
  border-color: var(--mv-line-2);
  outline: 0;
  box-shadow: var(--mv-hi);
}
.modern-asset-reference-row .modern-asset-form-control,
.modern-asset-bind-row .modern-asset-form-control { flex-wrap: wrap; }
.modern-asset-reference-file {
  display: flex;
  min-width: 0;
  flex: 1 1 180px;
  gap: 7px;
  align-items: center;
}
.modern-asset-reference-file label,
.modern-asset-reference-row > .modern-asset-form-control > button,
.modern-asset-bind-row > .modern-asset-form-control > button,
.modern-asset-reference-toggle {
  min-height: 30px;
  border: 1px solid var(--mv-line-2);
  border-radius: var(--mv-r-s);
  background: transparent;
  color: var(--mv-mut);
  font-size: 10.5px;
  white-space: nowrap;
}
.modern-asset-reference-file label {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  cursor: pointer;
}
.modern-asset-reference-file label:hover,
.modern-asset-reference-row > .modern-asset-form-control > button:hover,
.modern-asset-bind-row > .modern-asset-form-control > button:hover,
.modern-asset-reference-toggle:hover {
  border-color: var(--mv-line-2);
  color: var(--mv-tx);
}
.modern-asset-reference-file small {
  min-width: 0;
  overflow: hidden;
  color: var(--mv-qt);
  font-family: var(--mono);
  font-size: 9.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.modern-asset-reference-toggle {
  display: inline-flex !important;
  flex: none;
  align-items: center;
  gap: 6px !important;
  padding: 0 9px;
}
.modern-asset-reference-toggle input { width: 13px; height: 13px; accent-color: var(--mv-line-2); }
.modern-asset-reference-row > .modern-asset-form-control > button,
.modern-asset-bind-row > .modern-asset-form-control > button { padding: 0 10px; cursor: pointer; }
.modern-asset-style-reference-preview {
  flex: 0 0 64px;
  width: 64px;
  height: 34px;
  overflow: hidden;
  border: 1px solid var(--mv-line);
  border-radius: var(--mv-r-s);
  background: var(--mv-bg);
}
.modern-asset-style-preview { color: var(--mv-mut); font-size: 12px; }
.modern-asset-style-preview > span { color: var(--mv-vio); }
.modern-asset-style-preview > small { color: var(--mv-qt); }
.modern-asset-style-preview > b { color: var(--mv-tx); }

/* 改动 5：镜头帧优先，信息叠在媒体上。 */
.modern-shot-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0,1fr);
  gap: 12px;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: hidden;
  padding: 0;
}
.modern-shot-card {
  display: grid;
  grid-template-rows: auto auto;
  min-width: 0;
  gap: 8px;
  padding: 0;
  border: 0;
  border-radius: var(--mv-r-s);
  background: transparent;
  color: var(--mv-mut);
  text-align: left;
}
.modern-shot-frame {
  position: relative;
  display: block;
  aspect-ratio: 9 / 16;
  min-width: 0;
  overflow: hidden;
  container-type: inline-size;
  border-radius: var(--mv-r-s);
  background: var(--mv-s2);
  box-shadow: inset 0 0 0 1px var(--mv-line), var(--mv-e1);
}
.modern-shot-frame::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, transparent 43%, rgba(11,11,15,.78) 100%);
  content: "";
  pointer-events: none;
}
.modern-shot-media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.modern-shot-empty {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: var(--mv-qt);
  font-size: 12px;
}
.modern-shot-number,
.modern-shot-status,
.modern-shot-duration {
  position: absolute;
  z-index: 2;
  color: var(--mv-tx);
  font-family: var(--mono);
}
/* app.js 产出 <em class="modern-shot-status"><i></i>状态文字>，状态点不可省略。 */
.modern-shot-number {
  top: 8px;
  left: 8px;
  padding: 2px 6px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 5px;
  background: rgba(11,11,15,.62);
  backdrop-filter: blur(8px);
  font-size: 8.5px;
}
.modern-shot-status {
  position: absolute;
  z-index: 2;
  bottom: 8px;
  left: 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: inherit;
  font-size: 8.5px;
  font-style: normal;
  color: var(--mv-tx);
  text-shadow: 0 1px 3px rgba(0,0,0,.85);
}
.modern-shot-status i { flex: 0 0 5px; width: 5px; height: 5px; border-radius: 50%; background: var(--mv-qt); }
.seg-f i { flex: 0 0 5px; width: 5px; height: 5px; border-radius: 50%; background: var(--mv-qt); }
.is-complete .modern-shot-status i { background: var(--mv-ok); box-shadow: 0 0 7px var(--mv-ok); }
.is-running .modern-shot-status i { background: var(--mv-amb); box-shadow: 0 0 7px var(--mv-amb); }
.is-failed .modern-shot-status i { background: #F27A5B; box-shadow: 0 0 7px #F27A5B; }
.modern-shot-duration { right: 8px; bottom: 8px; font-size: 8.5px; }
.modern-shot-card.is-complete .modern-shot-status i,
.modern-shot-card.is-complete .seg-f i,
.seg-c.is-complete .seg-f i { background: var(--mv-ok); box-shadow: 0 0 7px var(--mv-ok); }
.modern-shot-card.is-running .modern-shot-status i,
.modern-shot-card.is-queued .modern-shot-status i,
.modern-shot-card.is-running .seg-f i,
.modern-shot-card.is-queued .seg-f i,
.seg-c.is-running .seg-f i,
.seg-c.is-queued .seg-f i { background: var(--mv-amb); box-shadow: 0 0 7px var(--mv-amb); }
.modern-shot-card.is-failed .modern-shot-status i,
.modern-shot-card.is-failed .seg-f i,
.seg-c.is-failed .seg-f i { background: #F27A5B; box-shadow: 0 0 7px #F27A5B; }
.modern-shot-copy { min-width: 0; padding: 0 2px; }
.modern-shot-copy strong { display: block; overflow: hidden; color: var(--mv-mut); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.modern-shot-card.is-active .modern-shot-frame { box-shadow: 0 0 0 2px var(--mv-lime), var(--mv-e2); }
.modern-shot-card.is-active .modern-shot-copy strong { color: var(--mv-tx); }

@container (max-width: 119px) {
  .modern-shot-duration { display: none; }
}

/* 改动 6：成片上排与全宽段轨。 */
.modern-cut-panel { overflow: hidden; }
.modern-cut-head { padding: 14px 16px; border-bottom: 1px solid var(--mv-line); }
.modern-cut-head small { color: var(--mv-qt); }
.modern-cut-status { padding: 11px 16px; border-bottom: 1px solid var(--mv-line); color: var(--mv-mut); }
.cut { display: grid; gap: 0; }
.cut-top {
  display: grid;
  grid-template-columns: 216px minmax(0,1fr) auto;
  gap: 16px;
  align-items: stretch;
  min-height: 0;
  padding: 16px;
}
.cut-prev {
  position: relative;
  min-width: 0;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border: 1px solid var(--mv-line);
  border-radius: var(--mv-r-s);
  background: var(--mv-s2);
  box-shadow: var(--mv-e2), var(--mv-hi);
}
.cut-prev .modern-cut-preview,
.modern-cut-preview.cut-prev { padding: 0; }
.cut-prev > .final-cut-placeholder { height: 100%; min-height: 0; align-content: center; }
.cut-prev .final-cut-video { width: 100%; max-width: none; height: 100%; margin: 0; }
.cut-prev video { display: block; width: 100%; height: 100%; border: 0; border-radius: 0; object-fit: cover; }
.cut-info { display: grid; grid-template-rows: auto 1fr; gap: 12px; min-width: 0; height: 100%; }
.specs { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.spec { min-width: 0; padding: 10px 12px; border: 1px solid var(--mv-line); border-radius: var(--mv-r-s); background: var(--mv-s2); box-shadow: var(--mv-hi); }
.spec dt { color: var(--mv-qt); font-family: var(--mono); font-size: 8.5px; letter-spacing: .1em; }
.spec dd { margin: 4px 0 0; color: var(--mv-tx); font-family: var(--mono); font-size: 15px; }
.spec dd u { color: var(--mv-qt); font-size: 12px; text-decoration: none; }
.note { display: grid; align-content: start; gap: 8px; padding: 12px 14px; border-left: 2px solid rgba(139,124,255,.5); border-radius: 0 var(--mv-r-s) var(--mv-r-s) 0; background: rgba(139,124,255,.06); color: var(--mv-mut); font-size: 10.5px; line-height: 1.65; }
.note b { color: var(--mv-tx); font-family: var(--mono); font-size: 11px; letter-spacing: .1em; }
.note ul { display: grid; gap: 5px; margin: 0; padding-left: 15px; }
.dl { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 10px; align-content: start; align-self: stretch; width: 216px; min-width: 0; padding: 11px 13px; border: 1px solid var(--mv-line); border-radius: var(--mv-r-s); background: var(--mv-s2); box-shadow: var(--mv-hi); }
.dl > u { display: block; width: 30px; height: 40px; border-radius: 4px; background: linear-gradient(160deg, #2A3242, #171B24); }
.dl b { display: block; overflow: hidden; color: var(--mv-tx); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.dl small { display: block; color: var(--mv-qt); font-family: var(--mono); font-size: 9.5px; }
.dl .btn { grid-column: 1 / -1; min-height: 30px; width: 100%; padding: 0 10px; border: 1px solid var(--mv-line-2); border-radius: var(--mv-r-s); background: transparent; color: var(--mv-mut); text-align: center; text-decoration: none; }
.dl .btn.is-disabled { cursor: not-allowed; opacity: .5; pointer-events: none; }
.track { padding: 0 16px 16px; }
.track-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 0 0 9px; }
.track-h > span:last-child { color: var(--mv-qt); font-size: 12px; }
.segs { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 6px; }
.seg-c { min-width: 0; overflow: hidden; border-radius: var(--mv-r-s); }
.seg-f { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--mv-r-s); background: var(--mv-s2); box-shadow: inset 0 0 0 1px var(--mv-line); }
.seg-f .modern-shot-media { position: absolute; inset: 0; }
.seg-f > b { position: absolute; z-index: 2; top: 5px; left: 6px; color: #fff; font-family: var(--mono); font-size: 8.5px; text-shadow: 0 1px 3px rgba(0,0,0,.8); }
.seg-f > i { position: absolute; z-index: 2; right: 6px; bottom: 5px; }
.seg-c p { margin: 5px 1px 0; overflow: hidden; color: var(--mv-qt); font-family: var(--mono); font-size: 8.5px; text-overflow: ellipsis; white-space: nowrap; }
.modern-cut-foot { padding: 11px 16px; border-top: 1px solid var(--mv-line); background: var(--mv-s2); }
.modern-cut-foot small { color: var(--mv-qt); }
/* 二级：成片步骤内的主动作。顶栏 CTA 才是同屏唯一柠檬。 */
.modern-cut-foot button { min-height: 28px; border: 1px solid var(--mv-line-2); border-radius: var(--mv-r-s); background: var(--mv-s3); color: var(--mv-tx); box-shadow: var(--mv-hi); }

@media (max-width: 1180px) {
  .modern-core { padding-right: 16px; padding-left: 16px; }
  .cut-top { grid-template-columns: 216px minmax(0,1fr) 190px; }
  .dl { width: auto; }
}
@media (max-width: 720px) {
  .modern-core { padding: 16px 14px 24px; }
  .modern-asset-generation-row { grid-template-columns: 1fr; gap: 7px; }
  .modern-asset-form-row > label { text-align: left; }
  .cut-top { grid-template-columns: minmax(0,1fr); }
  .cut-prev { width: min(216px, 100%); }
  .cut-info { height: auto; }
  .dl { width: 100%; }
  .segs { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

body.is-studio-modern ::-webkit-scrollbar { width: 9px; height: 9px; }
body.is-studio-modern ::-webkit-scrollbar-track { background: transparent; }
body.is-studio-modern ::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 9px; background: rgba(255,255,255,.16); background-clip: content-box; }
body.is-studio-modern ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.26); background-clip: content-box; }
body.is-studio-modern ::-webkit-scrollbar-corner { background: transparent; }

/* Asset images live in their own media-first step; the document step keeps only its inputs and manifest rail. */
.modern-main:not([data-modern-view="assetimg"]) .modern-asset-image-panel { display: none; }
.modern-main[data-modern-view="assetimg"] .modern-source-panel,
.modern-main[data-modern-view="assetimg"] .modern-kit-bar,
.modern-main[data-modern-view="assetimg"] .modern-sequence,
.modern-main[data-modern-view="assetimg"] .modern-workbench,
.modern-main[data-modern-view="assetimg"] .modern-cut-panel { display: none; }
.modern-core > .modern-asset-image-panel { flex: none; width: 100%; min-width: 0; margin: 0; }
.modern-asset-image-panel { display: grid; gap: 16px; min-width: 0; }
.modern-asset-image-head { display: flex; align-items: end; justify-content: space-between; gap: 18px; min-width: 0; }
.modern-asset-image-head > div { min-width: 0; }
.modern-asset-image-head h2 { margin: 5px 0 0; color: var(--mv-tx); font-size: 24px; line-height: 1.1; }
.modern-asset-image-head p { margin: 7px 0 0; color: var(--mv-mut); font-size: 13px; line-height: 1.5; }
.modern-asset-generation-status { display: inline-flex; align-items: center; gap: 7px; margin-top: 9px; color: var(--mv-mut); font-family: var(--mono); font-size: 11px; line-height: 1.3; }
.modern-series-asset-notice { display: block; margin-top: 7px; color: var(--mv-lime); font-family: var(--mono); font-size: 10px; line-height: 1.4; }
.modern-asset-generation-status::before { width: 7px; height: 7px; border-radius: 50%; background: var(--mv-qt); content: ""; }
.modern-asset-generation-status.is-running::before { background: #e4ad64; box-shadow: 0 0 0 4px rgba(228,173,100,.12); animation: modernAssetStatusPulse 1.4s ease-in-out infinite; }
.modern-asset-generation-status.is-queued::before { background: #b7a1e8; }
.modern-asset-generation-status.is-complete::before { background: #9fcf58; }
.modern-asset-generation-status.is-partial::before,
.modern-asset-generation-status.is-failed::before { background: var(--modern-accent); }
.modern-asset-generation-status.is-failed { color: #f0a49a; }
@keyframes modernAssetStatusPulse { 50% { opacity: .45; transform: scale(.78); } }
.modern-asset-image-actions { display: flex; align-items: end; justify-content: flex-end; gap: 8px; flex: none; }
.modern-asset-range-control { display: flex; align-items: center; gap: 7px; min-height: 32px; color: var(--mv-mut); font-size: 11px; white-space: nowrap; }
.modern-asset-range-control select { min-height: 32px; padding: 0 28px 0 10px; border: 1px solid var(--mv-line); border-radius: var(--mv-r-s); background: var(--mv-s2); color: var(--mv-tx); font: inherit; cursor: pointer; }
.modern-asset-range-control select:focus-visible { outline: 2px solid var(--mv-line-2); outline-offset: 2px; }
.modern-asset-image-action,
.modern-asset-prompt-actions button { min-height: 32px; padding: 0 12px; border: 1px solid var(--mv-line); border-radius: var(--mv-r-s); background: transparent; color: var(--mv-mut); font-size: 10.5px; cursor: pointer; }
.modern-asset-image-action.is-primary,
.modern-asset-prompt-actions button.is-primary { border-color: var(--mv-line-2); background: var(--mv-s3); color: var(--mv-tx); box-shadow: var(--mv-hi); font-weight: 500; }
.modern-asset-image-action:hover,
.modern-asset-prompt-actions button:hover { border-color: var(--mv-line-2); background: var(--mv-s2); color: var(--mv-tx); }
.modern-asset-image-action:disabled,
.modern-asset-prompt-actions button:disabled { cursor: not-allowed; opacity: .5; }
.modern-asset-wall { min-width: 0; padding: 18px; border: 1px solid var(--mv-line); border-radius: var(--mv-r); background: var(--mv-s1); box-shadow: var(--mv-e1), var(--mv-hi); }
.modern-asset-wall .modern-asset-wall-head { margin-bottom: 16px; }
.modern-asset-wall .modern-asset-wall-head strong { font-size: 17px; }
.modern-asset-generation-disclosure { margin-bottom: 18px; border: 1px solid var(--mv-line); border-radius: var(--mv-r-s); background: var(--mv-s2); }
.modern-asset-generation-disclosure summary { padding: 11px 13px; color: var(--mv-mut); font-size: 13px; cursor: pointer; }
.modern-asset-generation-disclosure summary:hover { color: var(--mv-tx); }
.modern-asset-generation-disclosure[open] summary { border-bottom: 1px solid var(--mv-line); color: var(--mv-tx); }
.modern-asset-generation-disclosure .modern-asset-generation-controls { margin: 0; border: 0; border-radius: 0; box-shadow: none; }
/* 分组改单列铺满:16329 行那条 repeat(2, minmax(0,1fr)) 是图墙还挤在资产
   步骤里时的设计,16396 只改了 gap 没改列数,两列布局一路继承到了独立展示页
   ——每组只拿到一半宽度,组内卡片每行仅 2 张(1440px 实测),图的面积被砍半,
   与「重在展现资产图」相反。展示页让每组吃满整宽。 */
.modern-asset-gallery { grid-template-columns: minmax(0, 1fr); gap: 24px; }
.modern-asset-wall-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 14px; }
.modern-asset-card { display: grid; grid-template-rows: auto auto auto; }
.modern-asset-card-preview { display: block; width: 100%; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; cursor: zoom-in; }
.modern-asset-card-preview:focus-visible { outline: 2px solid var(--mv-line-2); outline-offset: -2px; }
.modern-asset-card-media { aspect-ratio: 4 / 3; min-height: 190px; }
.modern-asset-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.modern-asset-card-copy { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-width: 0; padding: 10px 11px 7px; }
.modern-asset-card-copy strong { font-size: 14px; }
.modern-asset-card-copy small { flex: 0 0 auto; font-size: 11px; }
.modern-asset-card-status.is-ready { color: #9fcf58; }
.modern-asset-card-status.is-running { color: #e4ad64; }
.modern-asset-card-status.is-failed { color: var(--modern-accent); }
.modern-asset-card-status.is-waiting { color: var(--mv-qt); }
.modern-asset-card-action { min-height: 30px; margin: 0 11px 11px; border: 1px solid var(--mv-line); border-radius: var(--mv-r-s); background: transparent; color: var(--mv-mut); font-size: 11px; cursor: pointer; }
.modern-asset-card-actions { display: grid; grid-template-columns: 1fr auto; gap: 6px; margin: 0 11px 11px; }
.modern-asset-card-actions .modern-asset-card-action { margin: 0; }
.modern-asset-card-actions [data-modern-asset-replace] { padding: 0 10px; }
.modern-asset-card-action:hover:not(:disabled) { border-color: var(--mv-line-2); background: var(--mv-s2); color: var(--mv-tx); }
.modern-asset-card-action.is-running,
.modern-asset-card-action:disabled { cursor: not-allowed; opacity: .58; }
.modern-asset-card.is-generating { border-color: rgba(228,173,100,.5); }
.modern-asset-card.is-failed { border-color: rgba(242,122,91,.55); }
.modern-asset-prompt-inspector { display: grid; gap: 7px; min-width: 0; padding: 10px 14px; border: 1px solid var(--mv-line); border-radius: var(--mv-r); background: var(--mv-s1); box-shadow: var(--mv-e1), var(--mv-hi); }
.modern-asset-prompt-inspector.hidden { display: none; }
.modern-asset-prompt-inspector > header { display: flex; align-items: start; justify-content: space-between; gap: 14px; }
.modern-asset-prompt-inspector > header > div { display: grid; gap: 4px; min-width: 0; }
.modern-asset-prompt-inspector > header strong { color: var(--mv-tx); font-size: 16px; }
.modern-asset-prompt-inspector > header small { overflow: hidden; color: var(--mv-qt); font-family: var(--mono); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.modern-asset-prompt-inspector > header button { min-height: 28px; padding: 0 9px; border: 1px solid var(--mv-line); border-radius: var(--mv-r-s); background: transparent; color: var(--mv-mut); font-size: 12px; cursor: pointer; }
.modern-asset-prompt-inspector > header button:hover { border-color: var(--mv-line-2); color: var(--mv-tx); }
.modern-asset-prompt-inspector > label { color: var(--mv-mut); font-size: 10.5px; }
.modern-asset-prompt-inspector > textarea { width: 100%; min-height: 112px; resize: vertical; padding: 9px; border: 1px solid var(--mv-line); border-radius: var(--mv-r-s); outline: 0; background: var(--mv-bg); color: var(--mv-tx); font-size: 13px; line-height: 1.5; }
.modern-asset-prompt-inspector > textarea:focus { border-color: var(--mv-line-2); box-shadow: var(--mv-hi); }
.modern-asset-prompt-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }

/* With the image wall removed, the document step can give both source text and parsed assets real room. */
.modern-main[data-modern-view="assets"] .modern-source-panel { grid-template-columns: minmax(0, 1.35fr) minmax(320px, .85fr); grid-template-rows: auto minmax(400px, calc(100vh - 370px)); }
.modern-main[data-modern-view="assets"] .modern-source-grid { min-height: 0; height: 100%; }
.modern-main[data-modern-view="assets"] .modern-source-field { display: flex; min-height: 0; flex-direction: column; }
.modern-main[data-modern-view="assets"] .modern-source-field textarea { flex: 1 1 auto; min-height: 240px; }
.modern-main[data-modern-view="assets"] .modern-asset-results { height: 100%; max-height: none; overflow-y: auto; }
.modern-main[data-modern-view="assets"] .modern-source-actions { flex-wrap: wrap; }

@media (max-width: 980px) {
  .modern-asset-image-head { align-items: stretch; flex-direction: column; }
  .modern-asset-image-actions { align-items: center; justify-content: flex-start; flex-wrap: wrap; }
  .modern-asset-image-action { align-self: flex-start; }
  .modern-asset-wall-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
  .modern-main[data-modern-view="assets"] .modern-source-panel { grid-template-columns: 1fr; grid-template-rows: auto auto auto; }
  .modern-main[data-modern-view="assets"] .modern-source-grid { height: auto; min-height: 0; }
  .modern-main[data-modern-view="assets"] .modern-source-field { min-height: 310px; }
  .modern-main[data-modern-view="assets"] .modern-source-field textarea { min-height: 240px; }
  .modern-main[data-modern-view="assets"] .modern-asset-results { height: auto; }
}
@media (max-width: 720px) {
  .modern-asset-wall { padding: 14px; }
  .modern-asset-card-media { min-height: 180px; }
  .modern-asset-prompt-actions { justify-content: stretch; }
  .modern-asset-prompt-actions button { flex: 1 1 120px; }
}

/* Keep the visible asset controls on one optical baseline. The legacy controls
   and the modern gallery intentionally share the same 42px control height. */
.modern-asset-image-actions {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 10px;
  min-height: 42px;
}

.modern-asset-range-control {
  display: grid;
  grid-template-columns: auto minmax(132px, 1fr);
  align-items: center;
  min-width: 242px;
  min-height: 42px;
  gap: 9px;
  color: var(--mv-mut);
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
}

.modern-asset-range-control > span {
  color: var(--mv-mut);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .04em;
}

.modern-asset-range-control select {
  width: 100%;
  height: 42px;
  min-width: 0;
  padding: 0 30px 0 11px;
  border: 1px solid var(--mv-line-2);
  border-radius: var(--mv-r-s);
  background: var(--mv-s2);
  color: var(--mv-tx);
  font-size: 11px;
  cursor: pointer;
}

.modern-asset-range-control select:hover {
  border-color: var(--mv-line-2);
  background: var(--mv-s3);
}

.modern-asset-range-control select:focus-visible,
.modern-asset-image-action:focus-visible {
  outline: 2px solid var(--mv-line-2);
  outline-offset: 2px;
}

.modern-asset-image-actions .modern-asset-image-action {
  width: auto;
  min-width: 156px;
  min-height: 42px;
  white-space: nowrap;
}

.modern-asset-image-actions .modern-asset-image-action:disabled {
  border-color: var(--mv-line);
  background: var(--mv-s1);
  color: var(--mv-qt);
  box-shadow: none;
}

@media (max-width: 980px) {
  .modern-asset-image-actions {
    align-self: flex-start;
    width: 100%;
    flex-wrap: wrap;
  }

  .modern-asset-range-control {
    flex: 1 1 242px;
  }
}

@media (max-width: 520px) {
  .modern-asset-image-actions .modern-asset-image-action,
  .modern-asset-range-control {
    width: 100%;
    min-width: 0;
  }
}

/* Studio preview contract: the real shell keeps the existing IDs/API surface,
   while the first viewport follows the episode-led production layout. */
body.is-studio-modern .studio-modern-shell {
  --mv-lime: #d92d45;
  --modern-signal: #d92d45;
  --mv-vio: #a9475f;
  --mv-amb: #f27a5b;
  --mv-ok: #9fcf58;
  grid-template-columns: 224px minmax(0, 1fr);
  transition: grid-template-columns 220ms cubic-bezier(.22, 1, .36, 1);
}

body.is-studio-modern .studio-modern-shell.is-nav-collapsed {
  grid-template-columns: 56px minmax(0, 1fr);
}

body.is-studio-modern .modern-series-nav { position: relative; }
.modern-series-nav-toggle {
  position: absolute;
  z-index: 3;
  top: 50%;
  right: 7px;
  display: grid;
  place-items: center;
  min-width: 28px;
  min-height: 40px;
  padding: 0;
  border: 1px solid var(--mv-line-2);
  border-radius: 6px;
  background: var(--mv-s2);
  color: var(--mv-mut);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  transform: translateY(-50%);
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 220ms cubic-bezier(.22, 1, .36, 1);
}
.modern-series-nav-toggle:hover { border-color: var(--mv-line-2); background: var(--mv-s3); color: var(--mv-tx); }
.modern-series-nav-toggle:focus-visible { border-color: var(--mv-lime); outline: 2px solid rgba(217,45,69,.35); outline-offset: 2px; }
body.is-studio-modern .studio-modern-shell.is-nav-collapsed .modern-series-nav-toggle { right: 14px; }
body.is-studio-modern .studio-modern-shell.is-nav-collapsed .modern-series-nav-toggle span { transform: translateX(1px); }
body.is-studio-modern .studio-modern-shell.is-nav-collapsed .modern-brand { justify-content: center; padding-right: 0; padding-left: 0; }
body.is-studio-modern .studio-modern-shell.is-nav-collapsed .modern-brand button { width: 28px; overflow: hidden; }
body.is-studio-modern .studio-modern-shell.is-nav-collapsed .modern-brand-logo { width: 28px; background-size: auto 20px; background-position: left center; }
body.is-studio-modern .studio-modern-shell.is-nav-collapsed .modern-brand-copy,
body.is-studio-modern .studio-modern-shell.is-nav-collapsed .modern-project-switcher,
body.is-studio-modern .studio-modern-shell.is-nav-collapsed .modern-episode-list,
body.is-studio-modern .studio-modern-shell.is-nav-collapsed .modern-series-footer { display: none; }

body.is-studio-modern .modern-topbar {
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 54px;
  height: 54px;
  padding: 0 22px;
}

body.is-studio-modern .modern-top-description { display: none; }
body.is-studio-modern .modern-top-actions { justify-content: flex-end; }
body.is-studio-modern .modern-quiet-button {
  min-height: 30px;
  border-radius: 4px;
  background: transparent;
}
body.is-studio-modern .modern-icon-button { width: 32px; padding: 0; }

.modern-episode-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(340px, auto);
  gap: 20px;
  align-items: center;
  min-height: 82px;
  padding: 12px 26px;
  border-bottom: 1px solid var(--mv-line);
  background: var(--mv-bg);
}
.modern-episode-copy { display: grid; min-width: 0; gap: 0; }
.modern-episode-copy .modern-breadcrumb { gap: 9px; }
.modern-episode-compat-title,
.modern-episode-compat-copy,
.modern-episode-compat-state { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.modern-episode-hero .modern-breadcrumb h1 { font-size: 17px; }
.modern-episode-kicker { display: flex; gap: 10px; align-items: center; color: var(--mv-qt); font-family: var(--mono); font-size: 11px; }
.modern-episode-kicker b { padding: 3px 6px; border: 1px solid rgba(217,45,69,.38); border-radius: 3px; color: #f27a5b; font-weight: 500; }
.modern-episode-kicker b.is-free { border-color: rgba(143,216,255,.34); background: rgba(143,216,255,.08); color: #9bdcff; }
.modern-video-param.is-free > span { color: var(--mv-blue); }
.modern-episode-copy h2 { margin: 7px 0 0; color: var(--mv-tx); font-size: 26px; line-height: 1; letter-spacing: 0; }
.modern-episode-copy p { display: none; }
.modern-episode-hero-stats { display: flex; gap: 16px; margin: 0; }
.modern-episode-hero-stats div { min-width: 56px; }
.modern-episode-hero-stats dt { color: var(--mv-qt); font-family: var(--mono); font-size: 10px; letter-spacing: .1em; }
.modern-episode-hero-stats dd { margin: 3px 0 0; color: var(--mv-tx); font-family: var(--mono); font-size: 16px; }
.modern-episode-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; min-width: 0; }
.modern-episode-actions .modern-top-actions { flex: none; }
.modern-episode-hero .modern-episode-action { min-width: 220px; min-height: 46px; padding: 0 14px; border-radius: 4px; background: var(--modern-signal); box-shadow: 0 7px 22px -12px rgba(217,45,69,.9); color: #fff; }
.modern-episode-hero .modern-episode-action:hover { filter: brightness(1.08); }
.modern-episode-hero .modern-episode-action small { color: rgba(255,255,255,.72); }
.modern-episode-hero .modern-episode-action i { color: rgba(255,255,255,.72); }

/* 视频生成是本集的主入口；配置按钮固定在当前镜头命令栏。 */
.modern-episode-video-actions { display: flex; align-self: center; min-width: 0; }
.modern-video-action { min-height: 36px; padding: 0 11px; border: 1px solid var(--mv-line-2); border-radius: 4px; background: var(--mv-s2); color: var(--mv-mut); font-size: 11px; font-weight: 600; letter-spacing: 0; cursor: pointer; }
.modern-video-action:hover:not(:disabled) { border-color: var(--mv-line-2); background: var(--mv-s3); color: var(--mv-tx); }
.modern-video-action-config { border-color: rgba(217,45,69,.58); background: rgba(217,45,69,.1); color: #f2a0a6; }
.modern-video-action-config:hover:not(:disabled) { background: rgba(217,45,69,.18); color: #fff; }
.modern-video-action-generate { border-color: var(--modern-signal); background: var(--modern-signal); color: #fff; box-shadow: 0 7px 20px -12px rgba(217,45,69,.9); }
.modern-video-action-generate:hover:not(:disabled) { filter: brightness(1.06); color: #fff; }
.modern-episode-video-actions .modern-video-action-generate { width: 100%; min-width: 174px; }
.modern-video-action:disabled { border-color: var(--mv-line); background: var(--mv-s1); color: var(--mv-qt); cursor: not-allowed; opacity: .62; box-shadow: none; }

body.is-studio-modern .modern-pipeline { padding: 15px 26px 0; }
body.is-studio-modern .modern-pipeline button { border-radius: 4px; }
body.is-studio-modern .modern-pipeline button.is-current { border-color: rgba(217,45,69,.38); background: rgba(217,45,69,.1); }
body.is-studio-modern .modern-pipeline button.is-current .modern-pipeline-mark { background: var(--modern-signal); box-shadow: 0 3px 12px -3px rgba(217,45,69,.65); color: #fff; }
body.is-studio-modern .modern-pipeline button.is-current small { color: #f27a5b; }
body.is-studio-modern .modern-pipeline-rail { margin-right: 26px; margin-left: 26px; }

body.is-studio-modern .modern-core { padding-bottom: 26px; }
body.is-studio-modern .modern-workbench { margin: 18px 26px 0; border-radius: 5px; }
body.is-studio-modern .modern-stage-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.05fr) minmax(360px, 1.2fr); grid-auto-flow: initial; }
body.is-studio-modern .modern-stage-pane { padding: 15px; }
body.is-studio-modern .modern-stage-pane textarea { min-height: 182px; }
body.is-studio-modern .modern-shot-commandbar { padding: 14px 15px; }
body.is-studio-modern .modern-sequence { margin: 16px 26px 0; }
body.is-studio-modern .modern-kit-bar { margin: 16px 26px 0; border-radius: 5px; }

@media (max-width: 1240px) {
  .modern-episode-hero { grid-template-columns: minmax(0, 1fr) auto; }
  .modern-episode-actions { grid-column: 1 / -1; justify-self: stretch; justify-content: space-between; }
  body.is-studio-modern .modern-stage-grid { grid-template-columns: minmax(0, 1fr) minmax(360px, .9fr); }
  body.is-studio-modern .modern-stage-pane:first-child { grid-column: 1; }
  body.is-studio-modern .modern-stage-pane:nth-child(2) { grid-column: 1; }
  body.is-studio-modern .modern-stage-pane:last-child { grid-column: 2; grid-row: 1 / span 2; }
}
@media (max-width: 1280px) {
  .modern-episode-hero { grid-template-columns: minmax(0, 1fr) auto; }
  .modern-episode-actions { grid-column: 1 / -1; justify-self: stretch; justify-content: space-between; }
  body.is-studio-modern .modern-stage-grid { grid-template-columns: minmax(0, 1fr) minmax(360px, .9fr); }
  body.is-studio-modern .modern-stage-pane:first-child { grid-column: 1; }
  body.is-studio-modern .modern-stage-pane:nth-child(2) { grid-column: 1; }
  body.is-studio-modern .modern-stage-pane:last-child { grid-column: 2; grid-row: 1 / span 2; }
}
@media (max-width: 760px) {
  .modern-episode-hero { display: block; padding: 20px 16px; }
  .modern-episode-hero-stats { margin-top: 18px; }
  .modern-episode-actions { display: grid; gap: 12px; margin-top: 14px; }
  .modern-episode-actions .modern-top-actions { justify-content: flex-start; }
  .modern-episode-video-actions { width: 100%; min-width: 0; }
}

/* Video takes stay together below the workbench. The frame is intentionally
   portrait so every segment can be compared at the same 9:16 scale. */
.modern-main:not([data-modern-view="video"]) .modern-video-queue { display: none; }
.modern-core > .modern-video-queue { flex: none; width: 100%; margin: 0; }
.modern-video-queue {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--mv-line);
  border-radius: var(--mv-r);
  background: var(--mv-s1);
  box-shadow: var(--mv-e1), var(--mv-hi);
}
.modern-video-queue-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; min-width: 0; }
.modern-video-queue-head > div:first-child { min-width: 0; }
.modern-video-queue-head h2 { margin: 5px 0 0; color: var(--mv-tx); font-size: 17px; line-height: 1.1; }
.modern-video-queue-head p { max-width: 620px; margin: 6px 0 0; overflow: hidden; color: var(--mv-qt); font-size: 11px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.modern-video-queue-overview { display: grid; flex: none; gap: 2px; text-align: right; }
.modern-video-queue-overview strong { color: var(--mv-tx); font-family: var(--mono); font-size: 19px; font-weight: 500; }
.modern-video-queue-overview span { color: var(--mv-qt); font-family: var(--mono); font-size: 10px; }
.modern-video-queue-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 14px; }
.modern-video-queue-meter { flex: 1 1 auto; height: 3px; overflow: hidden; border-radius: 99px; background: var(--mv-line); }
.modern-video-queue-meter span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--mv-vio), var(--modern-signal)); box-shadow: 0 0 10px rgba(217,45,69,.35); transition: width 220ms ease; }
.modern-video-queue-filters { display: flex; flex: none; gap: 4px; align-items: center; }
.modern-video-queue-filters button { min-height: 26px; padding: 0 8px; border: 1px solid transparent; border-radius: 4px; background: transparent; color: var(--mv-qt); font-size: 10.5px; cursor: pointer; }
.modern-video-queue-filters button:hover { border-color: var(--mv-line-2); color: var(--mv-mut); }
.modern-video-queue-filters button.is-active { border-color: var(--mv-line-2); background: var(--mv-s3); color: var(--mv-tx); box-shadow: var(--mv-hi); }
.modern-video-queue-filters button b { margin-left: 3px; color: var(--mv-qt); font-family: var(--mono); font-size: 9px; font-weight: 500; }
.modern-video-queue-filters button.is-active b { color: var(--mv-tx); }
.modern-video-queue-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 12px; margin-top: 14px; }
.modern-video-queue-card { position: relative; min-width: 0; overflow: hidden; border: 1px solid var(--mv-line); border-radius: var(--mv-r-s); background: var(--mv-s2); box-shadow: var(--mv-hi); }
.modern-video-queue-card:hover { border-color: var(--mv-line-2); }
.modern-video-queue-card.is-active { border-color: rgba(217,45,69,.64); box-shadow: 0 0 0 2px rgba(217,45,69,.22), var(--mv-e1); }
.modern-video-queue-select { display: block; width: 100%; min-width: 0; padding: 0; border: 0; background: transparent; color: var(--mv-tx); text-align: left; cursor: pointer; }
.modern-video-queue-select:focus-visible { outline: 2px solid var(--mv-line-2); outline-offset: -2px; }
.modern-video-queue-frame { position: relative; display: block; aspect-ratio: 9 / 16; min-width: 0; overflow: hidden; background: var(--mv-bg); }
.modern-video-queue-frame::after { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(11,11,15,.05) 42%, rgba(11,11,15,.82) 100%); content: ""; pointer-events: none; }
.modern-video-queue-media { display: block; width: 100%; height: 100%; object-fit: cover; }
.modern-video-queue-placeholder { display: grid; place-items: center; align-content: center; gap: 8px; width: 100%; height: 100%; color: var(--mv-qt); font-family: var(--mono); font-size: 9px; }
.modern-video-queue-placeholder i { display: block; width: 21px; height: 21px; border: 1px solid currentColor; border-radius: 50%; opacity: .7; }
.modern-video-queue-placeholder.is-running i { border-right-color: transparent; animation: modernQueueSpin 900ms linear infinite; }
.modern-video-queue-placeholder.is-queued i { border-style: dashed; }
.modern-video-queue-placeholder.is-failed { color: var(--modern-accent); }
@keyframes modernQueueSpin { to { transform: rotate(360deg); } }
.modern-video-queue-number,
.modern-video-queue-status,
.modern-video-queue-duration,
.modern-video-queue-play { position: absolute; z-index: 2; font-family: var(--mono); }
.modern-video-queue-number { top: 8px; left: 8px; padding: 2px 5px; border: 1px solid rgba(255,255,255,.1); border-radius: 4px; background: rgba(11,11,15,.68); color: var(--mv-tx); font-size: 8.5px; }
.modern-video-queue-status { bottom: 9px; left: 8px; display: inline-flex; align-items: center; gap: 5px; color: var(--mv-tx); font-size: 8.5px; font-style: normal; text-shadow: 0 1px 3px rgba(0,0,0,.85); }
.modern-video-queue-status i { width: 5px; height: 5px; border-radius: 50%; background: var(--mv-qt); }
.modern-video-queue-card.is-complete .modern-video-queue-status i { background: var(--mv-ok); box-shadow: 0 0 7px var(--mv-ok); }
.modern-video-queue-card.is-running .modern-video-queue-status i,
.modern-video-queue-card.is-queued .modern-video-queue-status i { background: var(--mv-amb); box-shadow: 0 0 7px var(--mv-amb); }
.modern-video-queue-card.is-failed .modern-video-queue-status i { background: var(--modern-accent); box-shadow: 0 0 7px var(--modern-accent); }
.modern-video-queue-duration { right: 8px; bottom: 9px; color: var(--mv-tx); font-size: 8.5px; text-shadow: 0 1px 3px rgba(0,0,0,.85); }
.modern-video-queue-play { top: 50%; left: 50%; display: grid; place-items: center; width: 30px; height: 30px; transform: translate(-50%, -50%); border: 1px solid rgba(255,255,255,.35); border-radius: 50%; background: rgba(11,11,15,.54); color: #fff; font-size: 10px; opacity: .84; transition: transform 140ms ease, opacity 140ms ease; }
.modern-video-queue-card:hover .modern-video-queue-play { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }
.modern-video-queue-download { position: absolute; top: 8px; right: 8px; z-index: 4; display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; background: rgba(11,11,15,.62); color: var(--mv-tx); box-shadow: 0 4px 12px rgba(0,0,0,.28); transition: border-color 140ms ease, background 140ms ease, transform 140ms ease; }
.modern-video-queue-download:hover { border-color: var(--mv-line-2); background: var(--mv-vio); color: #fff; transform: translateY(-1px); }
.modern-video-queue-download:focus-visible { outline: 2px solid var(--mv-line-2); outline-offset: 2px; }
.modern-video-queue-download svg { display: block; }
.modern-video-queue-progress { position: absolute; right: 8px; bottom: 3px; left: 8px; z-index: 3; height: 2px; overflow: hidden; background: rgba(255,255,255,.18); }
.modern-video-queue-progress i { display: block; width: 0; height: 100%; background: var(--modern-signal); transition: width 220ms ease; }
.modern-video-queue-copy { display: grid; gap: 3px; min-width: 0; padding: 8px 9px 9px; }
.modern-video-queue-copy strong, .modern-video-queue-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modern-video-queue-copy strong { color: var(--mv-tx); font-size: 11.5px; font-weight: 550; }
.modern-video-queue-copy small { color: var(--mv-qt); font-family: var(--mono); font-size: 9px; }
.modern-video-queue-error { margin: 0; padding: 7px 9px 9px; overflow: hidden; border-top: 1px solid rgba(242,122,91,.18); color: #f0a49a; font-size: 9.5px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.modern-video-queue-empty, .modern-video-queue-filter-empty { display: grid; place-items: center; align-content: center; gap: 7px; min-height: 132px; padding: 18px; border: 1px dashed var(--mv-line-2); border-radius: var(--mv-r-s); color: var(--mv-qt); text-align: center; }
.modern-video-queue-empty-mark { color: var(--mv-vio); font-family: var(--mono); font-size: 11px; letter-spacing: .1em; }
.modern-video-queue-empty strong, .modern-video-queue-filter-empty strong { color: var(--mv-mut); font-size: 12px; font-weight: 500; }
.modern-video-queue-empty small, .modern-video-queue-filter-empty span { color: var(--mv-qt); font-size: 10.5px; }
.modern-video-queue.is-empty .modern-video-queue-toolbar { opacity: .66; }
.modern-main[data-modern-view="video"] .modern-stage-grid { display: none; }
.modern-workbench > .modern-video-queue { border: 0; border-top: 1px solid var(--mv-line); border-radius: 0; background: transparent; box-shadow: none; }
.modern-video-queue-inspector { display: grid; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--mv-line); }
.modern-video-queue-inspector.hidden { display: none; }
.modern-video-queue-inspector > header { display: flex; align-items: start; justify-content: space-between; gap: 14px; }
.modern-video-queue-inspector > header > div { display: grid; gap: 4px; min-width: 0; }
.modern-video-queue-inspector > header strong { color: var(--mv-tx); font-size: 15px; }
.modern-video-queue-inspector > header small { color: var(--mv-qt); font-family: var(--mono); font-size: 10px; }
.modern-video-queue-inspector > header button { min-height: 27px; padding: 0 9px; border: 1px solid var(--mv-line); border-radius: var(--mv-r-s); background: transparent; color: var(--mv-mut); font-size: 11px; cursor: pointer; }
.modern-video-queue-inspector > header button:hover { border-color: var(--mv-line-2); color: var(--mv-tx); }
.modern-video-queue-inspector-body { display: grid; grid-template-columns: minmax(120px, 200px) minmax(0, 1fr); gap: 16px; align-items: start; }
.modern-video-queue-inspector-preview { position: relative; display: grid; place-items: center; aspect-ratio: 9 / 16; overflow: hidden; border: 1px solid var(--mv-line); border-radius: var(--mv-r-s); background: var(--mv-bg); }
.modern-video-queue-inspector-preview video, .modern-video-queue-inspector-preview img { display: block; width: 100%; height: 100%; object-fit: cover; }
.modern-video-queue-inspector-preview img[src=""] { display: none; }
.modern-video-queue-inspector-preview > div { color: var(--mv-qt); font-size: 10.5px; }
.modern-video-queue-inspector-form { display: grid; gap: 7px; min-width: 0; }
.modern-video-queue-inspector-form > label { color: var(--mv-mut); font-size: 10.5px; }
.modern-video-queue-inspector-form > textarea { width: 100%; min-height: 176px; resize: vertical; padding: 10px; border: 1px solid var(--mv-line); border-radius: var(--mv-r-s); outline: 0; background: var(--mv-bg); color: var(--mv-tx); font-size: 12px; line-height: 1.55; }
.modern-video-queue-inspector-form > textarea:focus, .modern-video-queue-inspector-form > select:focus { border-color: var(--mv-line-2); box-shadow: var(--mv-hi); outline: 0; }
.modern-video-queue-inspector-form > select { width: min(100%, 260px); min-height: 30px; padding: 0 9px; border: 1px solid var(--mv-line); border-radius: var(--mv-r-s); background: var(--mv-bg); color: var(--mv-mut); font-size: 11px; }
.modern-video-queue-inspector-meta { display: flex; justify-content: space-between; gap: 10px; color: var(--mv-qt); font-family: var(--mono); font-size: 9.5px; }
.modern-video-queue-inspector-meta span:first-child { color: var(--mv-mut); }
.modern-video-queue-inspector-form > p { min-height: 16px; margin: 0; color: var(--mv-qt); font-size: 10px; line-height: 1.4; }
.modern-video-queue-inspector-actions { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; }
.modern-video-queue-inspector-actions button { min-height: 29px; padding: 0 10px; border: 1px solid var(--mv-line); border-radius: var(--mv-r-s); background: transparent; color: var(--mv-mut); font-size: 10.5px; cursor: pointer; }
.modern-video-queue-inspector-actions button:hover:not(:disabled) { border-color: var(--mv-line-2); background: var(--mv-s2); color: var(--mv-tx); }
.modern-video-queue-inspector-actions button.is-primary { border-color: var(--modern-signal); background: var(--modern-signal); color: #fff; box-shadow: 0 7px 20px -12px rgba(217,45,69,.9); }
.modern-video-queue-inspector-actions button:disabled { cursor: not-allowed; opacity: .5; }

@media (max-width: 720px) {
  .modern-video-queue-head { align-items: start; flex-direction: column; }
  .modern-video-queue-overview { text-align: left; }
  .modern-video-queue-toolbar { align-items: stretch; flex-direction: column; }
  .modern-video-queue-filters { overflow-x: auto; }
  .modern-video-queue-grid { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; }
  .modern-video-queue-inspector-body { grid-template-columns: minmax(100px, 150px) minmax(0, 1fr); gap: 10px; }
  .modern-video-queue-inspector-actions { justify-content: center; }
  .modern-video-queue-inspector-actions button { flex: 0 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .video-setting-toggle,
  .video-setting-toggle input,
  .video-setting-toggle::after,
  .modern-dialect-toggle,
  .modern-dialect-toggle input,
  .modern-dialect-toggle::after,
  .video-dialect-controls select,
  body.is-studio-modern .modern-video-params select {
    transition: none;
  }
  .modern-video-queue-placeholder.is-running i,
  .modern-video-queue-meter span,
  .modern-video-queue-progress i,
  .modern-video-queue-play { animation: none; transition: none; }
}

/* Current-shot controls: the title is runtime metadata, not a visual header.
   Keep the bar focused on the decisions needed before video generation. */
body.is-studio-modern .modern-shot-commandbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 14px;
  align-items: stretch;
  min-height: 64px;
  padding: 9px 13px;
  background: var(--mv-bg);
}
body.is-studio-modern .modern-selected-shot {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  column-gap: 8px;
  align-content: center;
  min-width: 72px;
  padding-right: 13px;
  border-right: 1px solid var(--mv-line);
}
body.is-studio-modern .modern-shot-index-label {
  grid-column: 1 / -1;
  color: var(--mv-qt);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
body.is-studio-modern .modern-selected-shot > strong {
  grid-column: 1 / -1;
  color: var(--mv-tx);
  font-family: var(--mono);
  font-size: 21px;
  font-weight: 500;
  line-height: 1;
}
body.is-studio-modern .modern-shot-title-compat,
body.is-studio-modern .modern-shot-summary-compat {
  display: none;
}
body.is-studio-modern .modern-video-params {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  margin: 0;
}
body.is-studio-modern .modern-video-param-caption {
  display: grid;
  flex: 0 0 auto;
  gap: 3px;
  min-width: 76px;
  padding-right: 12px;
  border-right: 1px solid var(--mv-line);
}
body.is-studio-modern .modern-video-param-caption span {
  color: var(--mv-mut);
  font-size: 11px;
  font-weight: 550;
}
body.is-studio-modern .modern-video-param-caption small {
  color: var(--mv-qt);
  font-family: var(--mono);
  font-size: 8.5px;
}
body.is-studio-modern .modern-video-param-controls {
  display: grid;
  grid-template-columns: minmax(148px, 1.1fr) minmax(66px, .4fr) minmax(72px, .45fr) minmax(150px, 1.08fr) minmax(142px, .9fr) minmax(142px, .9fr) minmax(92px, .62fr);
  gap: 8px;
  align-items: stretch;
  min-width: 0;
  width: min(100%, 884px);
}
body.is-studio-modern .modern-video-param {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: var(--mv-qt);
  font-family: var(--mono);
  font-size: 8.5px;
  white-space: normal;
}
body.is-studio-modern .modern-video-param > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.is-studio-modern .modern-video-params select {
  width: 100%;
  min-width: 0;
  max-width: none;
  min-height: 31px;
  padding: 0 24px 0 9px;
  border: 1px solid var(--mv-line-2);
  border-radius: var(--mv-r-s);
  background: var(--mv-s2);
  color: var(--mv-tx);
  font-family: inherit;
  font-size: 10.5px;
  cursor: pointer;
}
body.is-studio-modern .modern-video-params select:hover {
  border-color: rgba(255,255,255,.28);
  background: var(--mv-s3);
}
body.is-studio-modern .modern-video-params select:focus-visible {
  border-color: var(--modern-signal);
  box-shadow: 0 0 0 2px rgba(217,45,69,.16);
}
body.is-studio-modern .modern-video-param-mode { min-width: 148px; }
body.is-studio-modern .modern-video-mode-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-height: 31px;
  padding: 2px;
  border: 1px solid var(--mv-line-2);
  border-radius: var(--mv-r-s);
  background: var(--mv-s2);
}
body.is-studio-modern .modern-video-mode-switch button {
  min-width: 0;
  border: 0;
  border-radius: calc(var(--mv-r-s) - 2px);
  background: transparent;
  color: var(--mv-qt);
  font-family: var(--mono);
  font-size: 9px;
  line-height: 1;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}
body.is-studio-modern .modern-video-mode-switch button:hover:not(.is-active) { color: var(--mv-tx); }
body.is-studio-modern .modern-video-mode-switch button.is-active {
  background: rgba(217,45,69,.18);
  color: #ffd7da;
  box-shadow: inset 0 0 0 1px rgba(217,45,69,.48), 0 3px 8px rgba(0,0,0,.18);
}
body.is-studio-modern .modern-video-mode-switch button:focus-visible {
  position: relative;
  z-index: 1;
  outline: 2px solid var(--modern-signal);
  outline-offset: 1px;
}
body.is-studio-modern .modern-video-mode-hint {
  flex: 1 0 100%;
  min-width: 0;
  color: var(--mv-qt);
  font-size: 9px;
  line-height: 1.35;
}
body.is-studio-modern .modern-dialect-controls {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px;
  align-items: center;
  min-width: 0;
}
body.is-studio-modern .modern-dialect-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: max-content;
  min-height: 31px;
  padding: 0 9px 0 44px;
  border: 1px solid var(--mv-line-2);
  border-radius: 9px;
  background: var(--mv-s2);
  color: var(--mv-mut);
  font-family: var(--mono);
  font-size: 9px;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms ease;
}
body.is-studio-modern .modern-dialect-toggle:hover {
  border-color: rgba(255,255,255,.28);
  background: var(--mv-s3);
  color: var(--mv-tx);
}
body.is-studio-modern .modern-dialect-toggle:active {
  transform: scale(.97);
}
body.is-studio-modern .modern-dialect-toggle input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
body.is-studio-modern .modern-dialect-toggle:has(input:checked) {
  border-color: rgba(217,45,69,.58);
  background: rgba(217,45,69,.12);
  color: #f2a0a6;
}
body.is-studio-modern .modern-style-select {
  position: relative;
  display: block;
  min-width: 0;
}
body.is-studio-modern .modern-style-select::after {
  position: absolute;
  top: 50%;
  right: 11px;
  width: 6px;
  height: 6px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  color: var(--mv-mut);
  content: "";
  pointer-events: none;
  transform: translateY(-65%) rotate(45deg);
}
body.is-studio-modern .modern-video-params .modern-style-select select {
  padding-right: 29px;
  border-radius: 9px;
  appearance: none;
}
body.is-studio-modern .modern-video-params .modern-style-select select:disabled {
  background: var(--mv-bg);
  color: var(--mv-qt);
}
body.is-studio-modern .modern-video-param-dialect select:disabled,
.modern-video-param-sfx select:disabled,
.video-dialect-controls select:disabled {
  cursor: not-allowed;
  opacity: .55;
}
body.is-studio-modern .modern-command-status {
  display: grid;
  align-content: center;
  gap: 5px;
  min-width: 112px;
  padding: 0 12px;
  border-left: 1px solid var(--mv-line);
}
body.is-studio-modern .modern-command-status-label {
  color: var(--mv-qt);
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
body.is-studio-modern .modern-command-status .modern-shot-lineage {
  gap: 6px;
  font-size: 9px;
}
body.is-studio-modern .modern-command-status .modern-shot-lineage i {
  width: 10px;
}
body.is-studio-modern .modern-shot-commandbar > .modern-video-action {
  align-self: center;
  min-width: 142px;
  min-height: 36px;
  padding: 0 13px;
}

@media (max-width: 1320px) {
  body.is-studio-modern .modern-video-param-controls {
    grid-template-columns: minmax(148px, 1fr) repeat(2, minmax(0, .76fr)) minmax(150px, 1.2fr);
    width: 100%;
  }
  body.is-studio-modern .modern-video-param-dialect,
  body.is-studio-modern .modern-video-param-sfx { grid-column: span 2; }
}

@media (max-width: 1000px) {
  body.is-studio-modern .modern-shot-commandbar {
    grid-template-columns: auto minmax(0, 1fr) auto;
    row-gap: 9px;
  }
  body.is-studio-modern .modern-selected-shot { grid-column: 1; grid-row: 1; }
  body.is-studio-modern .modern-command-status { grid-column: 2; grid-row: 1; }
  body.is-studio-modern .modern-shot-commandbar > .modern-video-action { grid-column: 3; grid-row: 1; }
  body.is-studio-modern .modern-video-params {
    grid-column: 1 / -1;
    grid-row: 2;
    padding-top: 9px;
    border-top: 1px solid var(--mv-line);
  }
}
@media (max-width: 660px) {
  body.is-studio-modern .modern-shot-commandbar {
    grid-template-columns: auto minmax(0, 1fr);
  }
  body.is-studio-modern .modern-command-status {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    min-width: 0;
    padding-right: 0;
  }
  body.is-studio-modern .modern-shot-commandbar > .modern-video-action {
    grid-column: 1 / -1;
    grid-row: 4;
    width: 100%;
  }
  body.is-studio-modern .modern-video-params {
    grid-row: 2;
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
  }
  body.is-studio-modern .modern-video-param-caption {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    min-width: 0;
    padding: 0;
    border-right: 0;
  }
  body.is-studio-modern .modern-video-param-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }
  body.is-studio-modern .modern-video-param-mode { grid-column: 1 / -1; }
  body.is-studio-modern .modern-video-param-model { grid-column: 1 / -1; }
  body.is-studio-modern .modern-video-param-dialect { grid-column: 1 / -1; }
  body.is-studio-modern .modern-video-param-sfx { grid-column: 1 / -1; }
}

/* Continuous storyboard production desk. The storyboard is a plan made of
   anonymous blocking marks; it is deliberately isolated from production
   assets and from the video parameter workbench. */
.modern-main:not([data-modern-view="storyboard"]) .modern-storyboard-studio { display: none; }
.modern-workbench[hidden] { display: none !important; }
.modern-main[data-modern-view="storyboard"] .modern-workbench { display: none; }
.modern-storyboard-studio { display: grid; gap: 14px; min-width: 0; }
.modern-storyboard-commandbar { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 9px 18px; align-items: center; padding: 13px 15px; border: 1px solid var(--mv-line); border-radius: var(--mv-r); background: var(--mv-s1); box-shadow: var(--mv-e1), var(--mv-hi); }
.modern-storyboard-context { display: flex; align-items: center; gap: 9px; min-width: 0; color: var(--mv-mut); }
.modern-storyboard-context .modern-eyebrow { margin-right: 5px; }
.modern-storyboard-context strong { overflow: hidden; color: var(--mv-tx); font-size: 13px; font-weight: 550; text-overflow: ellipsis; white-space: nowrap; }
.modern-storyboard-context > span:not(.modern-eyebrow) { color: var(--mv-qt); }
.modern-storyboard-ratio { flex: none; padding: 4px 7px; border: 1px solid var(--mv-line-2); border-radius: 5px; color: var(--mv-mut); font-family: var(--mono); font-size: 10px; font-weight: 500; }
.modern-storyboard-command-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.modern-storyboard-command-actions button,
.modern-storyboard-panel-actions button,
.modern-storyboard-timeline-head button,
.modern-storyboard-queue-status button { min-height: 30px; padding: 0 10px; border: 1px solid var(--mv-line); border-radius: var(--mv-r-s); background: transparent; color: var(--mv-mut); font-size: 10.5px; cursor: pointer; }
.modern-storyboard-command-actions button:hover,
.modern-storyboard-panel-actions button:hover,
.modern-storyboard-timeline-head button:hover,
.modern-storyboard-queue-status button:hover { border-color: var(--mv-line-2); background: var(--mv-s2); color: var(--mv-tx); }
.modern-storyboard-command-actions button.is-primary { border-color: var(--modern-signal); background: var(--modern-signal); color: #fff; box-shadow: 0 6px 15px -9px rgba(217,45,69,.95); }
.modern-storyboard-command-actions button.is-primary:hover { filter: brightness(1.08); }
.modern-storyboard-command-actions button:disabled,
.modern-storyboard-panel-actions button:disabled,
.modern-storyboard-queue-status button:disabled { cursor: not-allowed; opacity: .48; }
.modern-storyboard-action-status { grid-column: 1 / -1; min-height: 14px; margin: 0; color: var(--mv-qt); font-family: var(--mono); font-size: 9.5px; }
.modern-storyboard-action-status.is-running { color: #e4ad64; }
.modern-storyboard-action-status.is-error { color: #f0a49a; }
.modern-storyboard-toolrow { position: sticky; top: 0; z-index: 4; display: grid; grid-template-columns: minmax(180px,1fr) auto auto; gap: 12px; align-items: center; min-width: 0; padding: 8px 10px; border: 1px solid var(--mv-line); border-radius: var(--mv-r); background: color-mix(in srgb, var(--mv-s1) 94%, transparent); box-shadow: var(--mv-hi); }
.modern-storyboard-tool-context { display: flex; gap: 10px; align-items: baseline; min-width: 0; }
.modern-storyboard-tool-context strong { color: var(--mv-tx); font-size: 11px; font-weight: 550; }
.modern-storyboard-tool-context span { overflow: hidden; color: var(--mv-qt); font: 9px var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.modern-storyboard-tools,
.modern-storyboard-zoom-controls { display: inline-flex; align-items: center; gap: 3px; padding: 3px; border: 1px solid var(--mv-line); border-radius: var(--mv-r-s); background: var(--mv-bg); }
.modern-storyboard-tools button,
.modern-storyboard-zoom-controls button { display: grid; place-items: center; min-width: 28px; min-height: 27px; padding: 0 7px; border: 0; border-radius: 4px; background: transparent; color: var(--mv-mut); font-size: 12px; cursor: pointer; }
.modern-storyboard-tools button:hover,
.modern-storyboard-tools button:focus-visible,
.modern-storyboard-zoom-controls button:hover,
.modern-storyboard-zoom-controls button:focus-visible { background: var(--mv-s3); color: var(--mv-tx); outline: 0; }
.modern-storyboard-tools button.is-active { background: var(--mv-s3); color: var(--mv-tx); box-shadow: var(--mv-hi); }
.modern-storyboard-zoom-controls button { font-size: 16px; }
.modern-storyboard-zoom-controls button:first-child { padding: 0 9px; font-size: 9px; }
.modern-storyboard-zoom-controls output { min-width: 39px; color: var(--mv-mut); font: 9px var(--mono); text-align: center; }
.modern-storyboard-workspace { display: grid; grid-template-columns: minmax(190px,.72fr) minmax(560px,2fr) minmax(240px,.9fr); gap: 14px; min-width: 0; height: clamp(420px, calc(100vh - 290px), 656px); align-items: stretch; }
.modern-storyboard-reference-panel,
.modern-storyboard-canvas-panel,
.modern-storyboard-inspector,
.modern-storyboard-timeline { min-width: 0; border: 1px solid var(--mv-line); border-radius: var(--mv-r); background: var(--mv-s1); box-shadow: var(--mv-e1), var(--mv-hi); }
.modern-storyboard-reference-panel,
.modern-storyboard-inspector { display: flex; min-height: 0; height: 100%; flex-direction: column; overflow: hidden; }
.modern-storyboard-panel-head { display: flex; align-items: start; justify-content: space-between; gap: 10px; padding: 14px; border-bottom: 1px solid var(--mv-line); }
.modern-storyboard-panel-head > div { display: grid; min-width: 0; gap: 4px; }
.modern-storyboard-panel-head strong { color: var(--mv-tx); font-size: 13px; font-weight: 550; }
.modern-storyboard-panel-head button { width: 27px; height: 27px; border: 1px solid var(--mv-line); border-radius: 6px; background: transparent; color: var(--mv-mut); cursor: pointer; }
.modern-storyboard-panel-head button:hover { border-color: var(--mv-line-2); color: var(--mv-tx); }
.modern-storyboard-reference-panel .modern-storyboard-panel-head > #modernStoryboardReferenceUpload {
  display: grid;
  flex: none;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 10px;
  background: rgba(255,255,255,.025);
  color: var(--mv-mut);
  font-family: inherit;
  font-size: 24px;
  font-weight: 300;
  line-height: 1;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.modern-storyboard-reference-panel .modern-storyboard-panel-head > #modernStoryboardReferenceUpload:hover {
  border-color: rgba(217,45,69,.62);
  background: rgba(217,45,69,.09);
  color: var(--mv-tx);
  box-shadow: 0 7px 18px -12px rgba(217,45,69,.95);
}
.modern-storyboard-reference-panel .modern-storyboard-panel-head > #modernStoryboardReferenceUpload:focus-visible {
  border-color: var(--modern-signal);
  outline: 2px solid rgba(217,45,69,.5);
  outline-offset: 2px;
}
.modern-storyboard-reference-panel .modern-storyboard-panel-head > #modernStoryboardReferenceUpload:active {
  background: rgba(217,45,69,.14);
  transform: translateY(1px) scale(.97);
}
.modern-storyboard-reference-panel .modern-storyboard-panel-head > #modernStoryboardReferenceUpload:disabled {
  cursor: not-allowed;
  opacity: .45;
  box-shadow: none;
  transform: none;
}
.modern-storyboard-reference-file-input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.modern-storyboard-reference-note { margin: 13px 14px 10px; color: var(--mv-qt); font-size: 10px; line-height: 1.55; }
.modern-storyboard-asset-tabs { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 3px; margin: 0 12px 10px; padding: 3px; border-radius: 7px; background: var(--mv-bg); }
.modern-storyboard-asset-tabs button { min-width: 0; min-height: 28px; padding: 0 3px; border: 0; border-radius: 5px; background: transparent; color: var(--mv-qt); font-size: 9.5px; cursor: pointer; }
.modern-storyboard-asset-tabs button:hover { color: var(--mv-tx); }
.modern-storyboard-asset-tabs button[aria-selected="true"] { background: var(--mv-s3); color: var(--mv-tx); box-shadow: var(--mv-hi); }
.modern-storyboard-reference-dropzone { display: flex; width: calc(100% - 24px); gap: 8px; align-items: center; margin: 0 12px 10px; padding: 9px; border: 1px dashed var(--mv-line-2); border-radius: 7px; background: rgba(255,255,255,.018); color: var(--mv-qt); text-align: left; cursor: pointer; }
.modern-storyboard-reference-dropzone:hover,
.modern-storyboard-reference-dropzone:focus-visible,
.modern-storyboard-reference-dropzone.is-dragging { border-color: var(--modern-signal); background: rgba(217,45,69,.08); color: var(--mv-tx); outline: 0; }
.modern-storyboard-reference-dropzone.is-busy { cursor: progress; opacity: .72; }
.modern-storyboard-reference-dropzone:disabled { cursor: not-allowed; }
.modern-storyboard-reference-dropzone > span { display: grid; place-items: center; width: 25px; height: 25px; border: 1px solid var(--mv-line-2); border-radius: 5px; color: var(--mv-mut); font-size: 14px; }
.modern-storyboard-reference-dropzone > div { display: grid; gap: 2px; min-width: 0; }
.modern-storyboard-reference-dropzone strong { color: var(--mv-mut); font-size: 9.5px; font-weight: 550; }
.modern-storyboard-reference-dropzone small { overflow: hidden; color: var(--mv-qt); font: 8px var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.modern-storyboard-asset-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-content: start; gap: 7px; min-height: 0; padding: 0 12px 12px; overflow: auto; }
.modern-storyboard-asset-item { position: relative; display: grid; grid-template-columns: minmax(0,1fr) auto; grid-template-rows: auto auto; gap: 0; min-width: 0; overflow: hidden; padding: 0; border: 1px solid var(--mv-line); border-radius: 7px; background: var(--mv-s2); color: inherit; text-align: left; cursor: pointer; }
.modern-storyboard-asset-item:hover { border-color: var(--mv-line-2); background: var(--mv-s3); }
.modern-storyboard-asset-item:focus-visible { border-color: var(--modern-signal); outline: 2px solid rgba(217,45,69,.3); outline-offset: 1px; }
.modern-storyboard-asset-item.is-bound,
.modern-storyboard-asset-item[aria-pressed="true"] { border-color: rgba(110,231,160,.52); background: rgba(110,231,160,.07); }
.modern-storyboard-asset-thumb { grid-column: 1 / -1; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 0; background: #2a3038; }
.modern-storyboard-asset-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.modern-storyboard-asset-copy { grid-column: 1 / -1; min-width: 0; padding: 7px 7px 8px; }
.modern-storyboard-asset-copy strong { display: block; overflow: hidden; color: var(--mv-mut); font-size: 11.5px; font-weight: 550; text-overflow: ellipsis; white-space: nowrap; }
.modern-storyboard-asset-copy small { display: block; margin-top: 3px; overflow: hidden; color: var(--mv-qt); font-family: var(--mono); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.modern-storyboard-asset-item > i { position: absolute; top: 7px; right: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--mv-qt); box-shadow: 0 0 0 3px rgba(11,11,15,.48); }
.modern-storyboard-asset-item.is-bound > i { background: var(--mv-ok); box-shadow: 0 0 7px rgba(110,231,160,.55); }
.modern-storyboard-reference-footer { display: flex; justify-content: space-between; gap: 8px; margin-top: auto; padding: 11px 14px; border-top: 1px solid var(--mv-line); color: var(--mv-qt); font-size: 9px; }
.modern-storyboard-reference-footer strong { color: var(--mv-mut); font-family: var(--mono); font-size: 9px; }
.modern-storyboard-canvas-panel { display: grid; gap: 0; overflow: hidden; }
.modern-storyboard-canvas-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--mv-line); }
.modern-storyboard-canvas-head > div { display: grid; min-width: 0; gap: 4px; }
.modern-storyboard-canvas-head h2 { margin: 0; color: var(--mv-tx); font-size: 16px; font-weight: 600; }
.modern-storyboard-canvas-head small { color: var(--mv-qt); font-size: 10px; }
.modern-storyboard-state { flex: none; color: var(--mv-qt); font-family: var(--mono); font-size: 9px; }
.modern-storyboard-state.is-ready { color: var(--mv-ok); }
.modern-storyboard-state.is-running { color: #e4ad64; }
.modern-storyboard-state.is-failed { color: #f0a49a; }
.modern-storyboard-paper-viewport { min-height: 0; height: 100%; max-height: none; overflow: auto; padding: 14px; background: #20252b; scrollbar-gutter: stable both-edges; }
.modern-storyboard-paper { width: 100%; margin: 0 auto; padding: 14px; background: #f3efe7; box-shadow: 0 12px 34px rgba(0,0,0,.18); zoom: var(--storyboard-zoom,1); transition: zoom 180ms ease; }
.modern-storyboard-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.modern-storyboard-panel { position: relative; display: grid; grid-template-rows: 1fr auto; min-width: 0; aspect-ratio: 16 / 10; overflow: hidden; padding: 0; border: 1px solid #c7beb1; border-radius: 2px; background: #faf7f0; color: #3d4146; text-align: left; cursor: pointer; }
.modern-storyboard-panel:hover { border-color: #9a8e7d; }
.modern-storyboard-panel.is-active { box-shadow: 0 0 0 2px #c9564a; }
.modern-storyboard-panel.is-reused { box-shadow: inset 0 0 0 2px #77956e; }
.modern-storyboard-panel.is-failed { box-shadow: inset 0 0 0 2px #c9564a; }
.modern-storyboard-panel-number { position: absolute; z-index: 2; top: 6px; left: 7px; color: #656a70; font: 600 9px/1 var(--mono); }
.modern-storyboard-panel-art { position: relative; display: block; min-height: 0; }
.modern-storyboard-panel-art img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(.85) saturate(.55) contrast(.96); }
.modern-storyboard-panel-art.has-media::before,
.modern-storyboard-panel-art.has-media::after { display: none; }
.modern-storyboard-panel-art::before { position: absolute; top: 38%; left: 50%; width: 19%; aspect-ratio: 1; border: 1.5px solid #73777b; border-radius: 50%; box-shadow: 0 22px 0 9px transparent; content: ""; transform: translate(-50%,-50%); }
.modern-storyboard-panel-art::after { position: absolute; right: 15%; bottom: 23%; left: 15%; height: 1px; background: #9b9a92; box-shadow: 0 -30px 0 #d4cec4; content: ""; transform: rotate(-8deg); transform-origin: center; }
.modern-storyboard-panel:nth-child(3n + 2) .modern-storyboard-panel-art::before { left: 36%; transform: translate(-50%,-50%) scale(.78); }
.modern-storyboard-panel:nth-child(3n) .modern-storyboard-panel-art::before { left: 64%; transform: translate(-50%,-50%) scale(1.2); }
.modern-storyboard-panel:nth-child(4n) .modern-storyboard-panel-art::after { transform: rotate(8deg); }
.modern-storyboard-panel-copy { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 5px; align-items: center; padding: 6px 7px 7px; border-top: 1px solid #ded7cb; background: rgba(255,255,255,.35); }
.modern-storyboard-panel-copy b { color: #3d4146; font: 700 9px/1 var(--mono); }
.modern-storyboard-panel-copy small { overflow: hidden; color: #777a7b; font: 8px/1.2 var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.modern-storyboard-panel-copy em { padding: 2px 3px; border: 1px solid rgba(61,65,70,.18); border-radius: 3px; color: #777a7b; font: 7px/1 var(--mono); font-style: normal; white-space: nowrap; }
.modern-storyboard-panel-copy em.is-complete,
.modern-storyboard-panel-copy em.is-reused { border-color: rgba(72,128,80,.35); background: rgba(119,149,110,.16); color: #4d6d4a; }
.modern-storyboard-panel-copy em.is-running,
.modern-storyboard-panel-copy em.is-queued { border-color: rgba(166,119,43,.35); background: rgba(211,169,88,.16); color: #88651f; }
.modern-storyboard-panel-copy em.is-failed { border-color: rgba(164,66,55,.35); background: rgba(201,86,74,.14); color: #9f4136; }
.modern-storyboard-canvas-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 16px; border-top: 1px solid var(--mv-line); }
.modern-storyboard-canvas-footer > div:first-child { display: grid; min-width: 0; gap: 4px; }
.modern-storyboard-canvas-footer > div:first-child span { color: var(--mv-qt); font-family: var(--mono); font-size: 9px; }
.modern-storyboard-canvas-footer > div:first-child strong { overflow: hidden; color: var(--mv-tx); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.modern-storyboard-canvas-footer > div:first-child small { overflow: hidden; color: var(--mv-mut); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.modern-storyboard-panel-actions { display: flex; flex: none; gap: 6px; }
.modern-storyboard-inspector > .modern-storyboard-panel-head { align-items: center; }
.modern-storyboard-inspector > .modern-storyboard-panel-head .modern-storyboard-state { padding: 4px 6px; border: 1px solid var(--mv-line); border-radius: 5px; }
.modern-storyboard-continuity-link { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: 7px; align-items: center; padding: 13px 12px 10px; }
.modern-storyboard-continuity-link > div { display: grid; gap: 5px; min-width: 0; }
.modern-storyboard-continuity-link > div > span { color: var(--mv-qt); font: 9px var(--mono); }
.modern-storyboard-continuity-link > i { color: var(--mv-lime); font-style: normal; }
.modern-storyboard-anchor-preview { display: grid; place-items: end start; aspect-ratio: 16 / 10; margin: 0; padding: 6px; border: 1px solid var(--mv-line); border-radius: 5px; background: #30343a; color: #d7d0c5; font: 8px var(--mono); }
.modern-storyboard-anchor-preview.has-media { display: block; position: relative; overflow: hidden; padding: 0; }
.modern-storyboard-anchor-preview.has-media img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(.35) saturate(.7); }
.modern-storyboard-anchor-preview.has-media span { position: absolute; right: 5px; bottom: 5px; left: 5px; margin: 0; padding: 3px 4px; background: rgba(11,11,15,.66); color: #fff; }
.modern-storyboard-anchor-preview.has-media::before { display: none; }
.modern-storyboard-anchor-preview::before { width: 18px; height: 18px; border: 1px solid #aeb1ad; border-radius: 50%; content: ""; }
.modern-storyboard-anchor-preview span { margin-top: -1px; }
.modern-storyboard-toggle { display: flex; gap: 8px; align-items: start; margin: 0 12px; padding: 10px; border: 1px solid rgba(110,231,160,.24); border-radius: 6px; background: rgba(110,231,160,.06); cursor: pointer; }
.modern-storyboard-toggle input { flex: none; width: 14px; height: 14px; margin: 1px 0 0; accent-color: var(--mv-ok); }
.modern-storyboard-toggle span { display: grid; gap: 4px; }
.modern-storyboard-toggle b { color: var(--mv-tx); font-size: 10.5px; font-weight: 550; }
.modern-storyboard-toggle small { color: var(--mv-qt); font-size: 9px; line-height: 1.4; }
.modern-storyboard-check-section,
.modern-storyboard-beat-section { padding: 12px; }
.modern-storyboard-check-section h3,
.modern-storyboard-beat-section h3 { margin: 0 0 8px; color: var(--mv-mut); font-size: 10.5px; font-weight: 550; }
.modern-storyboard-check-section ul,
.modern-storyboard-beat-section ol { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.modern-storyboard-check-section li { display: flex; align-items: center; gap: 7px; color: var(--mv-qt); font-size: 9.5px; }
.modern-storyboard-check-section li::before { width: 6px; height: 6px; border: 1px solid var(--mv-qt); border-radius: 50%; content: ""; }
.modern-storyboard-check-section li.is-pass { color: var(--mv-mut); }
.modern-storyboard-check-section li.is-pass::before { border-color: var(--mv-ok); background: var(--mv-ok); }
.modern-storyboard-beat-section { border-top: 1px solid var(--mv-line); }
.modern-storyboard-beat-section li { display: grid; grid-template-columns: 16px minmax(0,1fr) auto; gap: 6px; align-items: center; color: var(--mv-qt); font-size: 9.5px; }
.modern-storyboard-beat-section li::before { color: var(--mv-qt); content: counter(list-item, decimal-leading-zero); font: 8px var(--mono); }
.modern-storyboard-beat-section li.is-done { color: var(--mv-mut); }
.modern-storyboard-beat-section li i { width: 5px; height: 5px; border-radius: 50%; background: var(--mv-qt); }
.modern-storyboard-beat-section li.is-done i { background: var(--mv-ok); }
.modern-storyboard-inspector-actions { display: grid; gap: 7px; margin-top: auto; padding: 12px; border-top: 1px solid var(--mv-line); }
.modern-storyboard-inspector-actions button { min-height: 32px; padding: 0 10px; border: 1px solid var(--mv-line); border-radius: var(--mv-r-s); background: transparent; color: var(--mv-mut); font-size: 10.5px; cursor: pointer; }
.modern-storyboard-inspector-actions button:hover { border-color: var(--mv-line-2); background: var(--mv-s2); color: var(--mv-tx); }
.modern-storyboard-inspector-actions .is-primary { border-color: var(--modern-signal); background: var(--modern-signal); color: #fff; box-shadow: 0 7px 18px -11px rgba(217,45,69,.95); font-weight: 600; }
.modern-storyboard-inspector-actions .is-primary:hover { filter: brightness(1.07); }
.modern-storyboard-inspector-actions button:disabled { cursor: not-allowed; opacity: .48; }
.modern-storyboard-queue-status { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px; border-top: 1px solid var(--mv-line); }
.modern-storyboard-queue-status > span { color: var(--mv-qt); font: 9px var(--mono); }
.modern-storyboard-queue-status > small { color: var(--mv-qt); font: 8px var(--mono); }
.modern-storyboard-safety-note { display: flex; gap: 6px; align-items: center; margin: 0; padding: 0 12px 13px; color: var(--mv-qt); font-size: 9px; }
.modern-storyboard-safety-note span { color: var(--mv-lime); }
.modern-storyboard-timeline { padding: 13px 14px 14px; }
.modern-storyboard-timeline-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.modern-storyboard-timeline-head > div { display: grid; gap: 4px; }
.modern-storyboard-timeline-head strong { color: var(--mv-tx); font-size: 13px; font-weight: 550; }
.modern-storyboard-timeline-track { display: flex; align-items: stretch; gap: 7px; min-width: 0; overflow-x: auto; padding-bottom: 2px; }
.modern-storyboard-page-card { display: grid; flex: 0 0 190px; gap: 7px; min-width: 0; padding: 8px; border: 1px solid var(--mv-line); border-radius: 7px; background: var(--mv-s2); color: var(--mv-mut); text-align: left; cursor: pointer; }
.modern-storyboard-page-card:hover { border-color: var(--mv-line-2); }
.modern-storyboard-page-card.is-current { border-color: var(--modern-signal); background: rgba(217,45,69,.08); }
.modern-storyboard-page-card.is-complete { border-color: rgba(110,231,160,.3); }
.modern-storyboard-page-card > header { display: flex; justify-content: space-between; gap: 7px; color: var(--mv-tx); font-size: 10px; }
.modern-storyboard-page-card > header small { color: var(--mv-qt); font: 8px var(--mono); }
.modern-storyboard-page-thumbs { display: grid; grid-template-columns: repeat(9,minmax(0,1fr)); gap: 2px; }
.modern-storyboard-page-thumbs i { display: block; aspect-ratio: 1; border-radius: 2px; background: #42484e; }
.modern-storyboard-page-thumbs i.is-done { background: #77956e; }
.modern-storyboard-page-thumbs i.is-current { background: #c9564a; }
.modern-storyboard-page-card > footer { color: var(--mv-qt); font: 8.5px var(--mono); }
.modern-storyboard-page-connector { display: flex; flex: 0 0 56px; align-items: center; justify-content: center; color: var(--mv-qt); font: 8px var(--mono); }
.modern-storyboard-page-connector::before { content: "尾格 → 首格"; }

@media (max-width: 1220px) {
  .modern-storyboard-workspace { grid-template-columns: minmax(170px,.68fr) minmax(480px,1.8fr) minmax(225px,.82fr); gap: 10px; }
  .modern-storyboard-paper-viewport { padding: 10px; }
  .modern-storyboard-paper { padding: 10px; }
}
@media (min-width: 721px) and (max-width: 1280px) {
  .modern-storyboard-asset-list { grid-template-columns: 1fr; }
}
@media (max-width: 980px) {
  .modern-storyboard-commandbar { grid-template-columns: 1fr; }
  .modern-storyboard-command-actions { justify-content: flex-start; }
  .modern-storyboard-workspace { grid-template-columns: minmax(0,1fr) minmax(0,1.5fr); }
  .modern-storyboard-reference-panel { grid-row: span 2; }
  .modern-storyboard-inspector { min-height: 0; }
}
@media (max-width: 720px) {
  .modern-storyboard-context { flex-wrap: wrap; }
  .modern-storyboard-command-actions button { flex: 1 1 auto; }
  .modern-storyboard-toolrow { grid-template-columns: 1fr auto; }
  .modern-storyboard-tool-context { grid-column: 1 / -1; }
  .modern-storyboard-tools { justify-self: start; }
  .modern-storyboard-zoom-controls { justify-self: end; }
  .modern-storyboard-workspace { grid-template-columns: 1fr; }
  .modern-storyboard-reference-panel { grid-row: auto; min-height: 0; }
  .modern-storyboard-asset-list { max-height: 190px; }
  .modern-storyboard-canvas-head { align-items: start; flex-direction: column; }
  .modern-storyboard-grid { gap: 5px; }
  .modern-storyboard-paper-viewport { padding: 8px; }
  .modern-storyboard-paper { padding: 8px; }
  .modern-storyboard-canvas-footer { align-items: stretch; flex-direction: column; }
  .modern-storyboard-panel-actions { flex-wrap: wrap; }
  .modern-storyboard-panel-actions button { flex: 1 1 auto; }
  .modern-storyboard-page-card { flex-basis: 170px; }
}

/* Asset generation controls: keep the range label, selector, and action on one optical baseline. */
.asset-preview-panel .section-head {
  align-items: center;
}

.asset-preview-panel .section-head .actions.asset-generation-only {
  align-items: center;
  flex-wrap: nowrap;
  gap: 10px;
}

.asset-preview-panel .asset-range-pill {
  display: grid;
  grid-template-columns: auto minmax(130px, 1fr);
  align-items: center;
  min-width: 246px;
  min-height: 42px;
  gap: 9px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.asset-preview-panel .asset-range-pill > span {
  color: var(--blue);
  font-size: 13px;
  font-weight: 650;
  line-height: 1;
  white-space: nowrap;
}

.asset-preview-panel .asset-range-pill select {
  width: 100%;
  min-width: 0;
  height: 42px;
  padding: 0 30px 0 12px;
  border: 1px solid rgba(139, 179, 242, 0.2);
  border-radius: 12px;
  background: rgba(24, 31, 40, 0.74);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
}

.asset-preview-panel .section-head .actions [data-job="assets"] {
  min-width: 156px;
  min-height: 42px;
}

.asset-preview-panel .section-head .actions [data-job="assets"]:disabled {
  border-color: rgba(139, 179, 242, 0.14);
  background: rgba(24, 31, 40, 0.52);
  color: rgba(232, 238, 246, 0.48);
  box-shadow: inset 0 0 0 1px rgba(139, 179, 242, 0.05);
}

body.is-studio .asset-preview-panel .section-head,
body.is-studio .asset-preview-panel .section-head .actions.asset-generation-only {
  align-items: center !important;
}

@media (max-width: 720px) {
  .asset-preview-panel .section-head .actions.asset-generation-only {
    flex-wrap: wrap;
  }

  .asset-preview-panel .asset-range-pill {
    min-width: min(246px, 100%);
  }
}

/* Parsed asset management: calm inventory labels with one deliberate delete action. */
.modern-asset-manifest-overview {
  gap: 16px;
  padding: 14px 0;
}

.modern-asset-group {
  gap: 8px;
}

.modern-asset-group + .modern-asset-group {
  padding-top: 12px;
  border-top: 1px solid var(--modern-line);
}

.modern-asset-group > header {
  align-items: center;
  padding: 0 2px;
  color: var(--mv-mut);
  font-family: inherit;
  font-size: 12px;
}

.modern-asset-group > header span {
  color: var(--mv-tx);
  font-weight: 600;
}

.modern-asset-group > header strong {
  min-width: 24px;
  padding: 3px 6px;
  border: 1px solid var(--mv-line);
  border-radius: 5px;
  background: var(--mv-s2);
  color: var(--mv-mut);
  text-align: center;
}

.modern-asset-chip-list {
  gap: 8px;
}

.modern-asset-chip {
  min-height: 42px;
  padding: 9px 38px 9px 12px;
  border-color: var(--mv-line);
  border-radius: 8px;
  background: rgba(15, 20, 27, .72);
  font-size: 13px;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.modern-asset-chip:hover {
  border-color: var(--mv-line-2);
  background: var(--mv-s2);
}

.modern-asset-chip.is-manage-mode {
  position: relative;
  padding-right: 36px;
  border-color: var(--mv-line);
  background: rgba(200, 255, 46, .045);
  box-shadow: inset 0 0 0 1px rgba(200, 255, 46, .08);
}

.modern-asset-chip-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid rgba(242, 122, 91, .5);
  border-radius: 6px;
  background: rgba(242, 122, 91, .14);
  color: #ffb4a8;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}

.modern-asset-chip-remove:hover,
.modern-asset-chip-remove:focus-visible {
  border-color: rgba(255, 164, 145, .9);
  background: rgba(242, 122, 91, .25);
  color: #fff0ec;
}

@media (max-width: 560px) {
  .modern-asset-chip {
    width: 100%;
  }
}

/* Parsed assets ready-to-confirm: a quiet pulse that points to the next action. */
.modern-asset-primary-actions button.is-ready-to-parse,
.modern-asset-primary-actions button.is-ready-to-confirm {
  position: relative;
  border-color: rgba(200, 255, 46, .72);
  background: rgba(200, 255, 46, .11);
  color: var(--mv-tx);
  box-shadow: 0 0 0 0 rgba(200, 255, 46, .2), var(--mv-hi);
  animation: modernAssetActionAttention 2.4s ease-in-out infinite;
}

.modern-asset-primary-actions button.is-ready-to-parse::after,
.modern-asset-primary-actions button.is-ready-to-confirm::after {
  position: absolute;
  inset: -4px;
  border: 1px solid rgba(200, 255, 46, .38);
  border-radius: 6px;
  content: "";
  opacity: 0;
  pointer-events: none;
  animation: modernAssetActionAttentionRing 2.4s ease-in-out infinite;
}

.modern-asset-primary-actions button.is-ready-to-parse:hover,
.modern-asset-primary-actions button.is-ready-to-parse:focus-visible,
.modern-asset-primary-actions button.is-ready-to-confirm:hover,
.modern-asset-primary-actions button.is-ready-to-confirm:focus-visible {
  border-color: var(--mv-lime);
  background: rgba(200, 255, 46, .18);
  color: #0b0b0f;
  outline: 0;
}

@keyframes modernAssetActionAttention {
  0%, 100% { box-shadow: 0 0 0 0 rgba(200, 255, 46, .08), var(--mv-hi); }
  50% { box-shadow: 0 0 0 6px rgba(200, 255, 46, .13), var(--mv-hi); }
}

@keyframes modernAssetActionAttentionRing {
  0%, 35%, 100% { opacity: 0; transform: scale(.98); }
  52% { opacity: 1; transform: scale(1); }
  72% { opacity: 0; transform: scale(1.04); }
}

@media (prefers-reduced-motion: reduce) {
  .modern-asset-primary-actions button.is-ready-to-parse,
  .modern-asset-primary-actions button.is-ready-to-parse::after,
  .modern-asset-primary-actions button.is-ready-to-confirm,
  .modern-asset-primary-actions button.is-ready-to-confirm::after {
    animation: none;
  }
}

/* Super Pixel redesign: a calm, Gemini-inspired conversation surface.
   This override deliberately replaces the earlier red, glowing treatment while
   leaving the established chat, attachment, and generation DOM intact. */
.super-pixel-view {
  --sp-ink: #f2f4f8;
  --sp-dim: rgba(218, 222, 232, 0.72);
  --sp-acc: #8ab4f8;
  --sp-acc-ink: #0a1020;
  --sp-panel: #14161b;
  --sp-panel-raised: #1b1e25;
  --sp-line: rgba(226, 231, 242, 0.12);
  --sp-line-strong: rgba(226, 231, 242, 0.22);
  --sp-chat-font: "Google Sans", "Google Sans Text", "SF Pro Display", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #0b0c0f;
  color: var(--sp-ink);
  font-family: var(--sp-chat-font);
}

.super-pixel-view button,
.super-pixel-view input,
.super-pixel-view textarea,
.super-pixel-view select { font-family: var(--sp-chat-font); }

.explore-home.is-superpixel .explore-topbar {
  border-bottom-color: rgba(226, 231, 242, 0.1);
  background: #0b0c0f;
}

.explore-home.is-superpixel .explore-topbar nav > button[data-explore-tool="super-pixel"],
.explore-home.is-superpixel .explore-topbar nav > button[data-explore-tool="super-pixel"]:hover,
.explore-home.is-superpixel .explore-topbar nav > button[data-explore-tool="super-pixel"]:focus-visible,
.explore-home.is-superpixel #exploreAdminLink,
.explore-home.is-superpixel #exploreAdminLink:hover,
.explore-home.is-superpixel #exploreAdminLink:focus-visible {
  color: var(--sp-acc) !important;
}

.super-pixel-hex {
  opacity: 0.34;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%2720.78%27%20height=%2736%27%20viewBox=%270%200%2020.78%2036%27%3E%3Cpath%20d=%27M20.78%2C6L20.78%2C18L10.39%2C24L0%2C18L0%2C6L10.39%2C0Z%20M10.39%2C24L10.39%2C36L0%2C42L-10.39%2C36L-10.39%2C24L0%2C18Z%20M31.18%2C24L31.18%2C36L20.78%2C42L10.39%2C36L10.39%2C24L20.78%2C18Z%27%20fill=%27none%27%20stroke=%27rgba%28185%2C198%2C226%2C0.13%29%27%20stroke-width=%270.65%27/%3E%3C/svg%3E");
}

.super-pixel-glow { display: none; }

.super-pixel-layout {
  grid-template-columns: 0 minmax(0, 1fr);
  transition: grid-template-columns 180ms ease-out;
}

.super-pixel-layout.is-rail-open {
  grid-template-columns: minmax(232px, 272px) minmax(0, 1fr);
}

.super-pixel-asset-rail-toggle {
  top: 14px;
  left: 16px;
  width: 32px;
  height: 32px;
  min-height: 32px;
  border-color: transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--sp-dim);
  transition: background-color 160ms ease, color 160ms ease;
}

.super-pixel-asset-rail-toggle:hover,
.super-pixel-asset-rail-toggle:focus-visible {
  border-color: transparent;
  background: rgba(226, 231, 242, 0.08);
  color: var(--sp-ink);
  outline: none;
}

.super-pixel-asset-rail-toggle:focus-visible,
.super-pixel-tool:focus-visible,
.super-pixel-select-trigger:focus-visible,
.super-pixel-send:focus-visible,
.super-pixel-tool-card-actions button:focus-visible,
.super-pixel-tool-card-download:focus-visible {
  outline: 2px solid var(--sp-acc);
  outline-offset: 2px;
}

.super-pixel-asset-rail {
  padding: 22px 12px;
  border-right-color: var(--sp-line);
  background: #101115;
}

.super-pixel-layout.is-rail-open .super-pixel-asset-rail { padding-top: 60px; }

.super-pixel-asset-rail-kicker {
  color: var(--sp-dim);
  font-size: 9px;
  letter-spacing: 0;
}

.super-pixel-asset-rail-head strong { font-size: 14px; }

.super-pixel-asset-rail-refresh,
.super-pixel-asset-rail-close {
  border-color: transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--sp-dim);
  transition: background-color 160ms ease, color 160ms ease;
}

.super-pixel-asset-rail-refresh:hover,
.super-pixel-asset-rail-close:hover,
.super-pixel-asset-rail-refresh:focus-visible,
.super-pixel-asset-rail-close:focus-visible {
  border-color: transparent;
  background: rgba(226, 231, 242, 0.08);
  color: var(--sp-ink);
  outline: none;
}

.super-pixel-asset-rail-list {
  gap: 6px;
  max-height: calc(100vh - 122px);
}

.super-pixel-asset-card {
  grid-template-columns: 66px minmax(0, 1fr);
  gap: 9px;
  padding: 6px;
  border-color: transparent;
  border-radius: 8px;
  background: transparent;
  transition: background-color 160ms ease, border-color 160ms ease;
}

.super-pixel-asset-card:hover,
.super-pixel-asset-card.is-dragging {
  border-color: var(--sp-line);
  background: rgba(138, 180, 248, 0.1);
}

.super-pixel-asset-card > img {
  width: 66px;
  height: 50px;
  border-radius: 6px;
  background: #1d2027;
}

.super-pixel-asset-card strong { font-size: 11px; }
.super-pixel-asset-card span { color: var(--sp-dim); font-size: 10px; }

.super-pixel-asset-rail-empty {
  border-color: var(--sp-line);
  border-radius: 8px;
  background: rgba(226, 231, 242, 0.025);
}

.super-pixel-stage {
  gap: 18px;
  padding: clamp(68px, 12vh, 126px) 32px 48px;
}

.super-pixel-logo {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #dce7ff;
  color: #152033;
  font-size: 14px;
  font-weight: 760;
}

.super-pixel-title {
  color: var(--sp-ink);
  font-size: 28px;
  font-weight: 650;
  letter-spacing: 0;
}

.super-pixel-messages {
  width: min(820px, 100%);
  max-height: min(44vh, 460px);
  gap: 18px;
  scrollbar-color: rgba(218, 222, 232, 0.26) transparent;
}

.super-pixel-messages::-webkit-scrollbar-thumb { background: rgba(218, 222, 232, 0.26); }

.super-pixel-stage.is-chatting {
  gap: 16px;
  padding-top: 28px;
}

.super-pixel-stage.is-chatting .super-pixel-messages {
  width: min(820px, 100%);
  padding: 8px 2px 10px;
}

.super-pixel-dock {
  width: min(820px, 100%);
  margin-top: auto;
}

.super-pixel-stage.is-chatting .super-pixel-dock {
  width: min(820px, 100%);
  margin-top: 0;
  padding: 14px 0 20px;
  background: #0b0c0f;
}

.super-pixel-message {
  max-width: min(720px, 90%);
  padding: 5px 0;
  border-color: transparent;
  border-radius: 0;
  background: transparent;
  font-size: 15px;
  line-height: 1.68;
}

.super-pixel-message.is-user {
  padding: 10px 14px;
  border: 0;
  border-radius: 14px;
  background: #20232a;
}

.super-pixel-message.is-assistant { background: transparent; }

.super-pixel-message-images img {
  border-radius: 7px;
  outline: 1px solid var(--sp-line);
}

.super-pixel-tool-card {
  width: min(820px, 100%);
  gap: 12px;
  padding: 4px 0 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.super-pixel-tool-card.is-completed .super-pixel-card-status { color: #9bd8ae; }
.super-pixel-tool-card.is-failed .super-pixel-card-status,
.super-pixel-tool-card-message.is-error { color: #ffb4ab; }

.super-pixel-tool-card-title strong { font-size: 14px; font-weight: 620; }
.super-pixel-tool-card-kicker { color: var(--sp-dim); letter-spacing: 0.02em; }
.super-pixel-card-status { color: var(--sp-dim); }

.super-pixel-tool-card-media {
  border-radius: 8px;
  background: #0b0c0f;
}

.super-pixel-tool-card-media.is-loading {
  border: 0;
  background: #101217;
}

.super-pixel-video-media {
  position: relative;
  width: 100%;
  max-width: 100%;
}

.super-pixel-video-media .super-pixel-tool-card-media {
  width: 100%;
  max-width: 100%;
}

.super-pixel-reference-strip img {
  border-color: var(--sp-line);
  border-radius: 6px;
  background: #0b0c0f;
}

.super-pixel-tool-card-actions button,
.super-pixel-tool-card-download {
  border-color: var(--sp-line-strong);
  border-radius: 7px;
  background: transparent;
  color: var(--sp-ink);
  transition: background-color 160ms ease, border-color 160ms ease;
}

.super-pixel-video-media .super-pixel-tool-card-download {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  border-color: rgba(242, 244, 248, 0.24);
  border-radius: 50%;
  background: rgba(11, 12, 15, 0.76);
  color: #f2f4f8;
  font-size: 18px;
  font-weight: 520;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-3px);
  transition: opacity 160ms ease, transform 160ms ease, background-color 160ms ease;
}

.super-pixel-video-media:hover .super-pixel-tool-card-download,
.super-pixel-video-media:focus-within .super-pixel-tool-card-download {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.super-pixel-tool-card-confirm {
  border-color: var(--sp-acc) !important;
  background: var(--sp-acc) !important;
  color: var(--sp-acc-ink) !important;
}

.super-pixel-tool-card-cancel { color: var(--sp-dim) !important; }

.super-pixel-tool-card-actions button:hover,
.super-pixel-tool-card-download:hover {
  filter: none;
  border-color: rgba(226, 231, 242, 0.34);
  background: rgba(226, 231, 242, 0.08);
}

.super-pixel-tool-card-confirm:hover {
  border-color: #c5d9ff !important;
  background: #c5d9ff !important;
}

.super-pixel-composer {
  width: min(820px, 100%);
  gap: 12px;
  padding: 15px 16px 10px;
  border-color: var(--sp-line-strong);
  border-radius: 16px;
  background: #181a20;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: border-color 160ms ease, background-color 160ms ease;
}

.super-pixel-composer:focus-within {
  border-color: rgba(138, 180, 248, 0.78);
  background: #1b1e25;
}

.super-pixel-composer.is-dragover {
  border-color: var(--sp-acc);
  background: rgba(138, 180, 248, 0.1);
}

.super-pixel-attachment {
  border-color: var(--sp-line-strong);
  border-radius: 7px;
}

.super-pixel-input {
  min-height: 82px;
  color: var(--sp-ink);
  font-size: 15px;
  line-height: 1.6;
}

.super-pixel-input::placeholder { color: rgba(218, 222, 232, 0.72); }

.super-pixel-toolbar {
  gap: 4px;
  padding-top: 2px;
}

.super-pixel-tool,
.super-pixel-select > select,
.super-pixel-select-trigger {
  border-color: transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--sp-dim);
  transition: background-color 160ms ease, color 160ms ease;
}

.super-pixel-tool:hover,
.super-pixel-select > select:hover,
.super-pixel-select-trigger:hover,
.super-pixel-select.is-open .super-pixel-select-trigger {
  border-color: transparent;
  background: rgba(226, 231, 242, 0.08);
  color: var(--sp-ink);
}

.super-pixel-select-trigger { gap: 8px; }
.super-pixel-select-trigger::after { border-top-color: var(--sp-dim); }

.super-pixel-select-menu {
  border-color: var(--sp-line-strong);
  border-radius: 9px;
  background: #21242c;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.38);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.super-pixel-select-group { color: var(--sp-dim); letter-spacing: 0; }

.super-pixel-select-option:hover,
.super-pixel-select-option:focus-visible,
.super-pixel-select-option.is-selected {
  background: rgba(138, 180, 248, 0.18);
  color: #eef4ff;
}

.super-pixel-select-option.is-selected::after { color: var(--sp-acc); }
.super-pixel-select > select > option,
.super-pixel-select > select > optgroup > option,
.super-pixel-select > select > optgroup { background: #21242c; color: var(--sp-ink); }

.super-pixel-send {
  width: 30px;
  height: 30px;
  min-height: 30px;
  background: var(--sp-acc);
  color: var(--sp-acc-ink);
  transition: background-color 160ms ease, transform 160ms ease;
}

.super-pixel-send:hover { filter: none; background: #c5d9ff; }

@media (max-width: 600px) {
  .super-pixel-view { height: calc(100vh - 44px); min-height: calc(100vh - 44px); overflow: hidden; }
  .super-pixel-layout { position: relative; height: 100%; display: block; }
  .super-pixel-layout.is-rail-open .super-pixel-asset-rail {
    position: absolute;
    z-index: 4;
    top: 56px;
    right: 12px;
    left: 12px;
    margin: 0;
    padding: 12px;
    border: 1px solid var(--sp-line-strong);
    border-radius: 10px;
    background: #15171c;
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.42);
  }
  .super-pixel-layout.is-rail-open .super-pixel-asset-rail-list { max-height: 238px; }
  .super-pixel-stage { height: 100%; min-height: 0; padding: 78px 16px 18px; }
  .super-pixel-stage.is-chatting { height: 100%; padding: 16px 16px 0; }
  .super-pixel-title { font-size: 24px; }
  .super-pixel-messages,
  .super-pixel-stage.is-chatting .super-pixel-messages,
  .super-pixel-dock,
  .super-pixel-stage.is-chatting .super-pixel-dock,
  .super-pixel-composer { width: 100%; }
  .super-pixel-message { max-width: 94%; font-size: 14px; }
  .super-pixel-tool-card { width: 100%; }
  .super-pixel-tool-card-media { max-height: min(38vh, 280px); }
  .super-pixel-toolbar { flex-wrap: nowrap; gap: 2px; }
  .super-pixel-tool { padding: 0 8px; }
  .super-pixel-tool #superPixelScriptLabel { max-width: 84px; }
  .super-pixel-select-trigger { max-width: 116px; padding: 0 8px; }
}

@media (hover: none) {
  .super-pixel-video-media .super-pixel-tool-card-download {
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .super-pixel-layout,
  .super-pixel-asset-rail-toggle,
  .super-pixel-asset-card,
  .super-pixel-composer,
  .super-pixel-tool,
  .super-pixel-select-trigger,
  .super-pixel-send { transition: none; }
}

/* Keep the conversation and asset rail scrollable without exposing a native thumb. */
.super-pixel-messages,
.super-pixel-asset-rail-list {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.super-pixel-messages {
  scrollbar-gutter: auto;
}

.super-pixel-messages::-webkit-scrollbar,
.super-pixel-asset-rail-list::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* Let Super Pixel use the document scroll boundary instead of clipping long
   generations inside a fixed-height view. The composer remains available at
   the bottom while the page reveals the complete conversation. */
body.is-explore-ui .super-pixel-view {
  height: auto;
  min-height: calc(100vh - 44px);
  overflow-x: clip;
  overflow-y: visible;
}

body.is-explore-ui .super-pixel-layout,
body.is-explore-ui .super-pixel-stage {
  height: auto;
  min-height: calc(100vh - 44px);
}

body.is-explore-ui .super-pixel-stage,
body.is-explore-ui .super-pixel-stage.is-chatting {
  overflow: visible;
}

body.is-explore-ui .super-pixel-stage.is-chatting .super-pixel-messages {
  flex: 0 0 auto;
  height: auto;
  max-height: none;
  overflow: visible;
}

body.is-explore-ui .super-pixel-stage.is-chatting .super-pixel-dock {
  position: sticky;
  bottom: 0;
  z-index: 5;
  margin-top: 0;
}

body.is-explore-ui .super-pixel-asset-rail {
  overflow: visible;
}

body.is-explore-ui .super-pixel-asset-rail-list {
  max-height: none;
  overflow: visible;
}

@media (max-width: 600px) {
  body.is-explore-ui .super-pixel-layout.is-rail-open .super-pixel-asset-rail-list {
    max-height: 238px;
    overflow-y: auto;
  }
}

/* Collapsed modern nav: use the square animated mark so the wordmark cannot
   be clipped into fragments inside the 56px rail. Match the 54px topbar line. */
body.is-studio-modern .studio-modern-shell.is-nav-collapsed .modern-brand {
  height: 54px;
  min-height: 54px;
  box-sizing: border-box;
  justify-content: center;
  gap: 0;
  padding: 10px 0;
}

body.is-studio-modern .studio-modern-shell.is-nav-collapsed .modern-brand button {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  min-height: 32px;
  overflow: visible;
}

body.is-studio-modern .studio-modern-shell.is-nav-collapsed .modern-brand-logo {
  width: 32px;
  height: 32px;
  aspect-ratio: 1;
  background-image: url("/pixel-toys-logo-agent.gif");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 32px 32px;
}

body.is-studio-modern .studio-modern-shell.is-nav-collapsed .modern-brand-logo::before,
body.is-studio-modern .studio-modern-shell.is-nav-collapsed .modern-brand-logo::after {
  display: none;
}

body.is-studio-modern .studio-modern-shell.is-nav-collapsed .modern-series-nav-toggle {
  right: 14px;
}