:root {
  --bg: #060b16;
  --bg-2: #0a1222;
  --panel: rgba(14, 22, 39, 0.88);
  --panel-2: rgba(22, 31, 52, 0.86);
  --line: rgba(151, 164, 203, 0.18);
  --line-strong: rgba(180, 196, 255, 0.34);
  --text: #f2f6ff;
  --muted: #98a5ba;
  --soft: #c8d0df;
  --cyan: #27d7e6;
  --blue: #5b84ff;
  --purple: #9a6bff;
  --pink: #d966af;
  --green: #3fe8a4;
  --warning: #ffba61;
  --danger: #ff6f8f;
  --light-bg: #eef2f7;
  --light-panel: #ffffff;
  --light-text: #172033;
  --radius: 8px;
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.32);
  --page-gutter: clamp(32px, 3.2vw, 56px);
  color-scheme: dark;
  font-family: Inter, "Microsoft YaHei", "PingFang SC", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* AI video translation v85: Tuyaa production project and task workflow. */
.translation-v85-page,
.translation-v85-page * {
  box-sizing: border-box;
  letter-spacing: 0;
}

.translation-v85-page {
  width: 100%;
  min-height: 100vh;
  overflow-x: hidden;
  color: #edf4ff;
  background: #060c19;
}

.translation-v85-page button,
.translation-v85-page input,
.translation-v85-page textarea,
.translation-v85-page select {
  font: inherit;
}

.translation-v85-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 76px;
  min-height: 76px;
  padding: 0 36px;
  border-bottom: 1px solid rgba(118, 154, 205, 0.16);
  background: #070d1a;
}

.translation-v85-topbar .topbar-left {
  display: flex;
  align-items: center;
  gap: 16px;
  width: auto;
  min-width: 0;
}

.translation-v85-topbar .topbar-back-btn {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 8px;
  color: #cbd5e1;
  background: rgba(15, 23, 42, 0.72);
  cursor: pointer;
}

.translation-v85-topbar .topbar-back-btn svg {
  width: 18px;
  height: 18px;
}

.translation-v85-top-actions,
.translation-v85-top-actions > button,
.translation-v85-pagination,
.translation-v85-pagination > div,
.translation-v85-task-toolbar,
.translation-v85-task-toolbar nav,
.translation-v85-task-toolbar label,
.translation-v85-project-toolbar,
.translation-v85-project-toolbar label,
.translation-v85-source-actions,
.translation-v85-type-options,
.translation-v85-section-title,
.translation-v85-status,
.translation-v85-detail-head,
.translation-v85-create-panel > header,
.translation-v85-create-panel > footer,
.translation-v85-space-modal > header,
.translation-v85-space-modal > footer,
.translation-v85-space-modal > footer > div,
.translation-v85-space-search,
.translation-v85-output-list article,
.translation-v85-pricing-list article,
.translation-v85-charge-list article,
.translation-v85-task-modal-meta,
.translation-v85-charge-summary {
  display: flex;
  align-items: center;
}

.translation-v85-top-actions {
  gap: 12px;
}

.translation-v85-top-actions > button:not(.beta-team-trigger) {
  justify-content: center;
  min-height: 38px;
  padding: 0 18px;
  border: 1px solid rgba(47, 208, 226, 0.26);
  border-radius: 7px;
  color: #cce7f2;
  background: #0b1728;
  cursor: pointer;
}

.translation-v85-top-actions > button:not(.beta-team-trigger):hover,
.translation-v85-top-actions > button:not(.beta-team-trigger):focus-visible {
  border-color: rgba(47, 208, 226, 0.58);
  color: #ffffff;
  box-shadow: 0 0 20px rgba(39, 215, 230, 0.12);
}

.translation-v85-projects {
  width: 100%;
  min-height: calc(100vh - 76px);
  padding: 24px 36px 56px;
}

.translation-v85-project-toolbar {
  justify-content: space-between;
  gap: 24px;
  min-height: 58px;
  margin-bottom: 20px;
}

.translation-v85-project-toolbar > div > span,
.translation-v85-detail-head > div > span,
.translation-v85-create-panel > header span,
.translation-v85-space-modal > header span {
  display: block;
  margin-bottom: 5px;
  color: #45c7d7;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.translation-v85-project-toolbar h1,
.translation-v85-detail-head h1,
.translation-v85-create-panel h2,
.translation-v85-space-modal h2 {
  margin: 0;
  font-size: 23px;
  line-height: 1.24;
}

.translation-v85-project-toolbar label,
.translation-v85-task-toolbar label,
.translation-v85-space-search {
  min-width: 290px;
  min-height: 40px;
  padding-left: 12px;
  border: 1px solid rgba(126, 153, 193, 0.2);
  border-radius: 7px;
  color: #75859d;
  background: #0a1424;
}

.translation-v85-project-toolbar label svg,
.translation-v85-task-toolbar label svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}

.translation-v85-project-toolbar input,
.translation-v85-task-toolbar input,
.translation-v85-space-search input {
  min-width: 0;
  flex: 1;
  height: 38px;
  padding: 0 10px;
  border: 0;
  outline: 0;
  color: #e7f0ff;
  background: transparent;
}

.translation-v85-project-toolbar label button,
.translation-v85-task-toolbar label button,
.translation-v85-space-search button {
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 66px;
  padding: 0 12px;
  border: 0;
  border-left: 1px solid rgba(126, 153, 193, 0.16);
  color: #9fdce4;
  background: transparent;
  cursor: pointer;
}

.translation-v85-project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 24px;
  width: 100%;
}

.translation-v85-create-project,
.translation-v85-project-card,
.translation-v85-empty-card {
  position: relative;
  overflow: hidden;
  min-width: 0;
  min-height: 280px;
  border: 1px solid rgba(56, 189, 248, 0.12);
  border-radius: 26px;
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.88), rgba(2, 6, 23, 0.98));
}

.translation-v85-create-project {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 24px;
  color: #f0f9ff;
  background: radial-gradient(circle at top, rgba(14, 165, 233, 0.08), transparent 26%), linear-gradient(145deg, rgba(15, 23, 42, 0.88), rgba(2, 6, 23, 0.98));
  cursor: pointer;
  transition: transform 0.26s ease, border-color 0.26s ease;
}

.translation-v85-create-emblem {
  display: grid;
  place-items: center;
  width: 100px;
  height: 100px;
  border: 1px solid rgba(186, 230, 253, 0.2);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(14, 165, 233, 0.16), transparent 58%), rgba(255, 255, 255, 0.02);
  box-shadow: inset 0 0 0 10px rgba(255, 255, 255, 0.02);
}

.translation-v85-create-emblem svg {
  width: 90px;
  height: 90px;
}

.translation-v85-create-core {
  animation: translation-v85-pulse 3s ease-in-out infinite alternate;
}

.translation-v85-create-orbit {
  transform-origin: 60px 60px;
  animation: translation-v85-spin 12s linear infinite;
}

.translation-v85-create-plus {
  transform-origin: 60px 60px;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.translation-v85-create-project strong {
  font-size: 20px;
  font-weight: 500;
}

.translation-v85-create-project:hover,
.translation-v85-create-project:focus-visible,
.translation-v85-project-card:hover,
.translation-v85-project-card:focus-within {
  transform: translateY(-6px);
  border-color: rgba(56, 189, 248, 0.4);
}

.translation-v85-create-project:hover .translation-v85-create-plus,
.translation-v85-create-project:focus-visible .translation-v85-create-plus {
  transform: rotate(90deg) scale(1.1);
}

.translation-v85-create-project:hover .translation-v85-create-orbit,
.translation-v85-create-project:focus-visible .translation-v85-create-orbit {
  stroke: rgba(186, 230, 253, 0.7);
  animation-duration: 6s;
}

.translation-v85-project-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  cursor: pointer;
  transition: transform 0.24s ease, border-color 0.24s ease;
}

.translation-v85-project-main {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 280px;
  padding: 0;
  border: 0;
  color: inherit;
  text-align: left;
  background: transparent;
  cursor: pointer;
}

.translation-v85-project-glow {
  position: absolute;
  right: -10%;
  bottom: -14%;
  left: 24%;
  height: 42%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(14, 165, 233, 0.1), transparent 70%);
  filter: blur(18px);
  opacity: 0.78;
  pointer-events: none;
}

.translation-v85-project-scanline {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 34%), repeating-linear-gradient(180deg, transparent, transparent 22px, rgba(255, 255, 255, 0.02) 23px);
  opacity: 0.55;
  pointer-events: none;
}

.translation-v85-project-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 24px 28px 16px;
}

.translation-v85-quote {
  margin-bottom: 8px;
  color: rgba(255, 255, 255, 0.12);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 52px;
  font-weight: 700;
  line-height: 0.8;
}

.translation-v85-project-body h3 {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: #f0f9ff;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.4;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.translation-v85-project-footer {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 69px;
  padding: 20px 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(0, 0, 0, 0.16);
}

.translation-v85-project-owner {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
  padding-right: 12px;
  color: rgba(148, 163, 184, 0.7);
  font-size: 13px;
}

.translation-v85-project-owner svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  opacity: 0.8;
}

.translation-v85-project-owner span {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.translation-v85-project-stats {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 20px;
  max-width: 60%;
  flex: 0 0 auto;
}

.translation-v85-project-stats > span {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

.translation-v85-project-stats b {
  display: inline-block;
  max-width: 72px;
  overflow: hidden;
  color: #f8fafc;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.translation-v85-project-stats small {
  color: rgba(148, 163, 184, 0.5);
  font-size: 12px;
  white-space: nowrap;
}

.translation-v85-project-actions {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 3;
  visibility: hidden;
  opacity: 0;
  transform: translateX(4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.translation-v85-project-card:hover .translation-v85-project-actions,
.translation-v85-project-card:focus-within .translation-v85-project-actions {
  visibility: visible;
  opacity: 1;
  transform: translateX(0);
}

.translation-v85-project-actions button,
.translation-v85-create-panel > header button,
.translation-v85-space-modal > header button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  color: rgba(148, 163, 184, 0.6);
  background: transparent;
  cursor: pointer;
}

.translation-v85-project-actions svg,
.translation-v85-create-panel > header button svg,
.translation-v85-space-modal > header button svg {
  width: 16px;
  height: 16px;
}

.translation-v85-empty-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  cursor: default;
  border-color: rgba(56, 189, 248, 0.12);
  background: radial-gradient(circle at 78% 10%, rgba(56, 189, 248, 0.08), transparent 36%), linear-gradient(145deg, rgba(15, 23, 42, 0.78), rgba(2, 6, 23, 0.96));
}

.translation-v85-empty-card:hover {
  transform: none;
  border-color: rgba(56, 189, 248, 0.16);
}

.translation-v85-empty-body {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: center;
  gap: 10px;
  min-height: 211px;
  flex: 1;
  padding: 28px;
}

.translation-v85-empty-body > span {
  color: rgba(125, 211, 252, 0.66);
  font-size: 10px;
  font-weight: 700;
}

.translation-v85-empty-body h3 {
  margin: 0;
  color: rgba(240, 249, 255, 0.9);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.25;
}

.translation-v85-empty-body p {
  max-width: 320px;
  margin: 0;
  color: rgba(148, 163, 184, 0.72);
  font-size: 14px;
  line-height: 1.7;
}

.translation-v85-empty-body > button,
.translation-v85-missing button {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  margin-top: 18px;
  padding: 0 16px;
  border: 1px solid rgba(255, 111, 143, 0.4);
  border-radius: 6px;
  color: #ffd1dc;
  background: rgba(255, 111, 143, 0.08);
}

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

@keyframes translation-v85-pulse {
  from { transform: scale(0.9); opacity: 0.6; }
  to { transform: scale(1.1); opacity: 1; }
}

.translation-v85-pagination {
  justify-content: space-between;
  gap: 20px;
  margin-top: 22px;
  color: #718198;
  font-size: 12px;
}

.translation-v85-pagination > div {
  gap: 8px;
}

.translation-v85-pagination button,
.translation-v85-space-modal > footer button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 15px;
  border: 1px solid rgba(126, 153, 193, 0.22);
  border-radius: 6px;
  color: #bdcbdd;
  background: #0c1727;
  cursor: pointer;
}

.translation-v85-page button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.translation-v85-detail-page {
  height: 100vh;
  overflow: hidden;
  background: radial-gradient(circle at 18% 0%, rgba(162, 118, 255, 0.09), transparent 34%), radial-gradient(circle at 92% 18%, rgba(56, 189, 248, 0.055), transparent 36%), linear-gradient(180deg, #080d19 0%, #0a0f1d 46%, #080d18 100%);
}

.translation-v85-top-actions > .translation-v85-create-toggle {
  position: relative;
  min-width: 88px;
  height: 36px;
  min-height: 36px;
  gap: 7px;
  padding: 0 12px;
  overflow: hidden;
  border-color: rgba(162, 118, 255, 0.26);
  border-radius: 8px;
  color: #f2f6ff;
  background: linear-gradient(180deg, rgba(35, 43, 72, 0.96), rgba(24, 31, 54, 0.96));
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.16), inset 0 1px rgba(255, 255, 255, 0.08);
}

.translation-v85-create-toggle svg {
  width: 18px;
  height: 18px;
  padding: 3px;
  border-radius: 50%;
  background: rgba(162, 118, 255, 0.18);
  box-shadow: inset 0 0 0 1px rgba(210, 186, 255, 0.22);
}

.translation-v85-top-actions > .translation-v85-create-toggle.is-cancel {
  min-width: 68px;
  border-color: rgba(248, 113, 113, 0.58);
  color: #ffffff;
  background: linear-gradient(180deg, rgba(220, 38, 38, 0.98), rgba(153, 27, 27, 0.98));
  box-shadow: 0 10px 28px rgba(127, 29, 29, 0.26);
}

.translation-v85-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  width: 100%;
  height: calc(100vh - 76px);
  padding: 24px 36px;
  overflow: hidden;
}

.translation-v85-detail.panel-open {
  grid-template-columns: minmax(0, calc((100% - 36px) / 2)) minmax(420px, calc((100% - 36px) / 2));
  gap: 36px;
}

.translation-v85-task-area {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
  min-height: 0;
  padding-bottom: 56px;
  overflow: hidden;
}

.translation-v85-board-head {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex: 0 0 auto;
  padding: 20px 28px;
  border: 1px solid rgba(162, 118, 255, 0.13);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(20, 26, 44, 0.94), rgba(16, 22, 38, 0.86));
  box-shadow: 0 12px 38px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(24px);
}

.translation-v85-board-head::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 15px;
  background: linear-gradient(90deg, rgba(162, 118, 255, 0.08), transparent 34%, rgba(111, 183, 255, 0.06));
  pointer-events: none;
}

.translation-v85-board-head > div,
.translation-v85-board-head nav {
  position: relative;
  z-index: 1;
}

.translation-v85-board-head > div {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.translation-v85-board-head > div > span {
  color: #a7b7ff;
  font-size: 11px;
  font-weight: 800;
}

.translation-v85-board-head h1 {
  margin: 0;
  overflow-wrap: anywhere;
  color: #f4f7fb;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
}

.translation-v85-board-head nav {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px;
  border: 1px solid rgba(162, 118, 255, 0.1);
  border-radius: 12px;
  background: rgba(8, 12, 24, 0.58);
}

.translation-v85-board-head nav button {
  height: 32px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #98a4b8;
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.translation-v85-board-head nav button:hover {
  color: #e9eef8;
  background: rgba(255, 255, 255, 0.055);
}

.translation-v85-board-head nav button.active {
  border-color: rgba(111, 183, 255, 0.34);
  color: #f5fbff;
  background: rgba(67, 123, 193, 0.2);
  box-shadow: 0 2px 10px rgba(67, 123, 193, 0.16);
}

.translation-v85-detail-head {
  justify-content: space-between;
  gap: 22px;
  flex: 0 0 auto;
  min-height: 70px;
  margin-bottom: 14px;
}

.translation-v85-detail-head p {
  margin: 5px 0 0;
  color: #7f8da3;
  font-size: 12px;
}

.translation-v85-detail-head > button,
.translation-v85-create-panel > footer .primary,
.translation-v85-space-modal > footer .primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 39px;
  padding: 0 18px;
  border: 1px solid #26b8c7;
  border-radius: 6px;
  color: #031318;
  background: #42d3df;
  font-weight: 800;
  cursor: pointer;
}

.translation-v85-detail-head > button svg {
  width: 17px;
  height: 17px;
}

.translation-v85-task-toolbar {
  justify-content: space-between;
  gap: 16px;
  flex: 0 0 auto;
  min-width: 0;
  margin-bottom: 16px;
}

.translation-v85-task-toolbar nav {
  gap: 6px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.translation-v85-task-toolbar nav::-webkit-scrollbar {
  display: none;
}

.translation-v85-task-toolbar nav button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 0 0 auto;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 6px;
  color: #7f8da3;
  background: transparent;
  cursor: pointer;
}

.translation-v85-task-toolbar nav button span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 21px;
  height: 19px;
  padding: 0 5px;
  border-radius: 9px;
  color: #8493a8;
  background: #101d2f;
  font-size: 10px;
}

.translation-v85-task-toolbar nav button.active {
  border-color: rgba(55, 201, 216, 0.36);
  color: #e9fbff;
  background: rgba(40, 183, 199, 0.1);
}

.translation-v85-task-toolbar label {
  min-width: 240px;
}

.translation-v85-task-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-content: start;
  gap: 16px;
  min-width: 0;
  min-height: 0;
  padding: 1px 2px 18px;
  overflow: auto;
}

.translation-v85-detail.panel-open .translation-v85-task-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.translation-v85-task-card {
  min-width: 0;
  min-height: 320px;
  overflow: hidden;
  border: 1px solid rgba(111, 141, 181, 0.18);
  border-radius: 8px;
  background: #0a1424;
}

.translation-v85-task-card:hover,
.translation-v85-task-card:focus-within {
  border-color: rgba(48, 198, 212, 0.42);
}

.translation-v85-task-preview {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-bottom: 1px solid rgba(111, 141, 181, 0.13);
  color: #3d7184;
  background: #07101e;
  cursor: pointer;
}

.translation-v85-task-preview img,
.translation-v85-task-preview video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.translation-v85-task-preview > span,
.translation-v85-task-preview > span svg {
  width: 34px;
  height: 34px;
}

.translation-v85-task-preview > i {
  position: absolute;
  right: 8px;
  bottom: 8px;
  min-width: 42px;
  padding: 4px 7px;
  border-radius: 4px;
  color: #eff7ff;
  background: rgba(1, 6, 15, 0.76);
  font-size: 10px;
  font-style: normal;
  text-align: center;
}

.translation-v85-task-content {
  padding: 14px 15px 15px;
}

.translation-v85-task-content > header,
.translation-v85-task-content > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.translation-v85-status {
  justify-content: center;
  gap: 6px;
  color: #9bb0c8;
  font-size: 10px;
  font-weight: 700;
}

.translation-v85-status > i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #8292a8;
}

.translation-v85-status.uploading > i { background: #6ba5ff; }
.translation-v85-status.translating > i { background: #f1b95c; box-shadow: 0 0 10px rgba(241, 185, 92, 0.42); }
.translation-v85-status.completed > i { background: #3fe8a4; }
.translation-v85-status.failed > i { background: #ff6f8f; }

.translation-v85-task-content > header > small {
  color: #5f6f85;
  font-size: 9px;
}

.translation-v85-task-content h3 {
  margin: 12px 0 5px;
  overflow: hidden;
  color: #eef5ff;
  font-size: 14px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.translation-v85-task-content > p {
  margin: 0;
  color: #718299;
  font-size: 11px;
}

.translation-v85-task-types {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-height: 23px;
  margin-top: 11px;
}

.translation-v85-task-types span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  padding: 0 8px;
  border: 1px solid rgba(60, 177, 193, 0.18);
  border-radius: 4px;
  color: #75bac6;
  background: rgba(38, 144, 160, 0.07);
  font-size: 9px;
}

.translation-v85-task-error {
  max-height: 36px;
  margin-top: 9px;
  overflow: hidden;
  color: #ff91aa;
  font-size: 10px;
  line-height: 1.7;
}

.translation-v85-task-content > footer {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(111, 141, 181, 0.12);
}

.translation-v85-task-content > footer > strong {
  color: #b6c6da;
  font-size: 11px;
}

.translation-v85-task-content > footer > div {
  display: flex;
  align-items: center;
  gap: 6px;
}

.translation-v85-task-content > footer button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 30px;
  padding: 0 9px;
  border: 1px solid rgba(116, 147, 188, 0.2);
  border-radius: 5px;
  color: #aebed2;
  background: #0d1b2d;
  font-size: 10px;
  cursor: pointer;
}

.translation-v85-task-content > footer button svg {
  width: 14px;
  height: 14px;
}

.translation-v85-task-state {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  padding: 30px;
  border: 1px dashed rgba(111, 141, 181, 0.22);
  border-radius: 8px;
  color: #718299;
  text-align: center;
}

.translation-v85-task-state strong {
  margin-bottom: 8px;
  color: #d9e5f4;
  font-size: 16px;
}

.translation-v85-task-state button {
  margin-top: 16px;
}

.translation-v85-create-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(91, 137, 185, 0.24);
  border-radius: 8px;
  background: #091322;
}

.translation-v85-create-panel > header {
  justify-content: space-between;
  gap: 20px;
  flex: 0 0 auto;
  min-height: 76px;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(111, 141, 181, 0.14);
}

.translation-v85-create-panel h2,
.translation-v85-space-modal h2 {
  font-size: 18px;
}

.translation-v85-create-scroll {
  flex: 1;
  min-height: 0;
  padding: 18px;
  overflow-y: auto;
}

.translation-v85-config-section,
.translation-v85-source-section {
  padding: 17px;
  border: 1px solid rgba(111, 141, 181, 0.15);
  border-radius: 7px;
  background: #0b1727;
}

.translation-v85-config-section + .translation-v85-config-section,
.translation-v85-source-section {
  margin-top: 14px;
}

.translation-v85-section-title {
  gap: 9px;
  min-height: 28px;
  margin-bottom: 14px;
}

.translation-v85-section-title b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(50, 197, 211, 0.3);
  border-radius: 5px;
  color: #5cd8e2;
  font-size: 10px;
}

.translation-v85-section-title strong {
  color: #dce8f6;
  font-size: 13px;
}

.translation-v85-section-title small {
  margin-left: auto;
  color: #607288;
  font-size: 10px;
}

.translation-v85-config-grid,
.translation-v85-number-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.translation-v85-project-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(2, 6, 23, 0.78);
  backdrop-filter: blur(8px);
}

.translation-v85-center-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(2, 6, 23, 0.8);
  backdrop-filter: blur(9px);
}

.translation-v85-center-modal {
  display: flex;
  flex-direction: column;
  width: min(760px, 100%);
  max-height: min(82vh, 760px);
  overflow: hidden;
  border: 1px solid rgba(111, 183, 255, 0.22);
  border-radius: 16px;
  color: #f0f7ff;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.99), rgba(4, 9, 22, 0.98));
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.48);
}

.translation-v85-center-modal.modal-translationTaskDetail {
  width: min(900px, 100%);
}

.translation-v85-center-modal > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  flex: 0 0 auto;
  padding: 20px 22px;
  border-bottom: 1px solid rgba(111, 141, 181, 0.14);
}

.translation-v85-center-modal > header span {
  display: block;
  margin-bottom: 5px;
  color: #75d8e2;
  font-size: 10px;
  font-weight: 800;
}

.translation-v85-center-modal > header h2 {
  margin: 0;
  color: #f1f7ff;
  font-size: 22px;
  line-height: 1.3;
}

.translation-v85-center-modal > header button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(126, 153, 193, 0.2);
  border-radius: 8px;
  color: #9fb1c7;
  background: rgba(12, 24, 42, 0.86);
  cursor: pointer;
}

.translation-v85-center-modal > header button svg {
  width: 16px;
  height: 16px;
}

.translation-v85-center-modal-body {
  min-height: 0;
  padding: 20px 22px 24px;
  overflow-y: auto;
}

.translation-v85-center-modal-body > p {
  margin: 14px 0 0;
  color: #718299;
  font-size: 11px;
  line-height: 1.65;
}

.translation-v85-project-modal {
  width: min(560px, 100%);
  overflow: hidden;
  border: 1px solid rgba(56, 189, 248, 0.22);
  border-radius: 30px;
  color: #f0f9ff;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(2, 6, 23, 0.96)), radial-gradient(circle at top left, rgba(56, 189, 248, 0.16), transparent 30%);
  box-shadow: 0 30px 90px rgba(2, 6, 23, 0.42);
}

.translation-v85-project-modal > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 24px 24px 18px;
}

.translation-v85-project-modal > header span {
  display: block;
  color: rgba(125, 211, 252, 0.76);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
}

.translation-v85-project-modal > header h2 {
  margin: 6px 0 0;
  color: #f0f9ff;
  font-family: "Noto Serif SC", "Microsoft YaHei", sans-serif;
  font-size: 28px;
  line-height: 1.25;
}

.translation-v85-project-modal > header button {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid rgba(56, 189, 248, 0.18);
  border-radius: 19px;
  color: #bae6fd;
  background: rgba(14, 165, 233, 0.04);
  cursor: pointer;
}

.translation-v85-project-modal .translation-v85-project-form {
  padding: 0 24px 24px;
}

.translation-v85-project-modal .translation-v85-project-form label {
  gap: 8px;
}

.translation-v85-project-modal .translation-v85-project-form label > span {
  color: #cbd5e1;
  font-size: 13px;
}

.translation-v85-project-modal .translation-v85-project-form input,
.translation-v85-project-modal .translation-v85-project-form textarea {
  min-height: 48px;
  padding: 14px 16px;
  border: 1px solid rgba(56, 189, 248, 0.18);
  border-radius: 18px;
  color: #f0f9ff;
  background: rgba(14, 165, 233, 0.04);
}

.translation-v85-project-modal .translation-v85-project-form textarea {
  min-height: 112px;
}

.translation-v85-project-modal > footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 0 24px 24px;
}

.translation-v85-project-modal > footer button {
  min-width: 104px;
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid rgba(56, 189, 248, 0.18);
  border-radius: 19px;
  color: #e0f2fe;
  background: rgba(2, 6, 23, 0.28);
  cursor: pointer;
}

.translation-v85-project-modal > footer .primary {
  border-color: transparent;
  color: #eff6ff;
  background: linear-gradient(135deg, #0284c7, #2563eb);
}

.translation-v85-config-grid label,
.translation-v85-number-grid label,
.translation-v85-project-form label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

.translation-v85-config-grid label > span,
.translation-v85-number-grid label > span,
.translation-v85-project-form label > span {
  color: #7d8da3;
  font-size: 10px;
}

.translation-v85-config-grid select,
.translation-v85-number-grid input,
.translation-v85-project-form input,
.translation-v85-project-form textarea {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  padding: 0 11px;
  border: 1px solid rgba(118, 150, 190, 0.22);
  border-radius: 6px;
  outline: 0;
  color: #dfebf8;
  background: #071321;
}

.translation-v85-project-form {
  display: grid;
  gap: 16px;
}

.translation-v85-project-form textarea {
  min-height: 100px;
  padding-top: 10px;
  resize: vertical;
}

.translation-v85-config-grid select:focus,
.translation-v85-number-grid input:focus,
.translation-v85-project-form input:focus,
.translation-v85-project-form textarea:focus {
  border-color: rgba(49, 203, 216, 0.58);
  box-shadow: 0 0 0 3px rgba(39, 215, 230, 0.07);
}

.translation-v85-type-options {
  gap: 8px;
  margin-top: 12px;
}

.translation-v85-type-options label {
  position: relative;
  flex: 1;
  min-width: 0;
}

.translation-v85-type-options input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.translation-v85-type-options span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 8px;
  border: 1px solid rgba(112, 143, 182, 0.2);
  border-radius: 6px;
  color: #7f8fa4;
  background: #071321;
  font-size: 10px;
  cursor: pointer;
}

.translation-v85-type-options input:checked + span {
  border-color: rgba(48, 200, 213, 0.5);
  color: #cbf9ff;
  background: rgba(40, 177, 191, 0.11);
}

.translation-v85-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 38px;
  border-bottom: 1px solid rgba(111, 141, 181, 0.1);
  color: #9cabc0;
  font-size: 11px;
}

.translation-v85-toggle-row label {
  position: relative;
  width: 38px;
  height: 21px;
}

.translation-v85-toggle-row input {
  position: absolute;
  opacity: 0;
}

.translation-v85-toggle-row i {
  position: absolute;
  inset: 0;
  border-radius: 11px;
  background: #263448;
  cursor: pointer;
}

.translation-v85-toggle-row i::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #9ba9ba;
  content: "";
  transition: transform 0.16s ease;
}

.translation-v85-toggle-row input:checked + i {
  background: #238d9d;
}

.translation-v85-toggle-row input:checked + i::after {
  background: #e9feff;
  transform: translateX(17px);
}

.translation-v85-number-grid {
  margin-top: 12px;
}

.translation-v85-source-actions {
  gap: 8px;
}

.translation-v85-source-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid rgba(70, 185, 199, 0.24);
  border-radius: 6px;
  color: #9cdde5;
  background: #071521;
  font-size: 10px;
  cursor: pointer;
}

.translation-v85-source-actions svg {
  width: 14px;
  height: 14px;
}

.translation-v85-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 150px;
  margin-top: 12px;
  border: 1px dashed rgba(65, 192, 205, 0.3);
  border-radius: 7px;
  color: #9cadc0;
  background: #07121f;
  cursor: pointer;
}

.translation-v85-dropzone.dragging {
  border-color: #45d3df;
  background: rgba(39, 180, 194, 0.08);
}

.translation-v85-dropzone > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(67, 196, 209, 0.32);
  border-radius: 50%;
  color: #53d4df;
}

.translation-v85-dropzone > span svg {
  width: 18px;
  height: 18px;
}

.translation-v85-dropzone strong {
  font-size: 12px;
}

.translation-v85-dropzone small {
  color: #617187;
  font-size: 10px;
}

.translation-v85-source-list {
  display: grid;
  gap: 9px;
  margin-top: 12px;
}

.translation-v85-source-item {
  position: relative;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 11px;
  min-width: 0;
  min-height: 68px;
  padding: 8px;
  border: 1px solid rgba(111, 141, 181, 0.16);
  border-radius: 6px;
  background: #07131f;
}

.translation-v85-source-item.failed {
  border-color: rgba(255, 111, 143, 0.34);
}

.translation-v85-source-item video {
  width: 92px;
  aspect-ratio: 16 / 9;
  border-radius: 4px;
  object-fit: cover;
  background: #030814;
}

.translation-v85-source-item > div {
  position: relative;
  min-width: 0;
  padding-bottom: 5px;
  overflow: hidden;
}

.translation-v85-source-item strong,
.translation-v85-source-item span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.translation-v85-source-item strong {
  color: #d9e6f4;
  font-size: 11px;
}

.translation-v85-source-item span {
  margin-top: 5px;
  color: #68798f;
  font-size: 9px;
}

.translation-v85-source-item > div > i {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  max-width: 100%;
  background: #41cad6;
}

.translation-v85-source-item > button {
  visibility: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid rgba(255, 111, 143, 0.24);
  border-radius: 50%;
  color: #ff8ca5;
  background: rgba(255, 111, 143, 0.07);
  opacity: 0;
  cursor: pointer;
}

.translation-v85-source-item:hover > button,
.translation-v85-source-item:focus-within > button {
  visibility: visible;
  opacity: 1;
}

.translation-v85-source-item > button svg {
  width: 14px;
  height: 14px;
}

.translation-v85-create-panel > footer {
  justify-content: flex-end;
  gap: 10px;
  flex: 0 0 auto;
  min-height: 66px;
  padding: 12px 18px;
  border-top: 1px solid rgba(111, 141, 181, 0.14);
}

.translation-v85-create-panel > footer > button:not(.primary) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 39px;
  padding: 0 18px;
  border: 1px solid rgba(126, 153, 193, 0.22);
  border-radius: 6px;
  color: #adbed2;
  background: #0b1828;
}

.translation-v85-space-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(1, 5, 13, 0.76);
  backdrop-filter: blur(8px);
}

.translation-v85-space-modal {
  display: flex;
  flex-direction: column;
  width: min(1120px, 96vw);
  max-height: 88vh;
  overflow: hidden;
  border: 1px solid rgba(86, 141, 189, 0.34);
  border-radius: 8px;
  background: #081321;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.52);
}

.translation-v85-space-modal > header {
  justify-content: space-between;
  gap: 20px;
  flex: 0 0 auto;
  min-height: 72px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(111, 141, 181, 0.14);
}

.translation-v85-space-search {
  flex: 0 0 auto;
  margin: 16px 18px 0;
}

.translation-v85-space-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  min-height: 260px;
  padding: 16px 18px 20px;
  overflow-y: auto;
}

.translation-v85-space-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(111, 141, 181, 0.18);
  border-radius: 7px;
  background: #0b1727;
  cursor: pointer;
}

.translation-v85-space-card.selected {
  border-color: rgba(57, 207, 220, 0.68);
  box-shadow: 0 0 0 2px rgba(39, 215, 230, 0.08);
}

.translation-v85-space-card > input {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  width: 17px;
  height: 17px;
  accent-color: #34cad7;
}

.translation-v85-space-card > div {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 5px;
  background: #030914;
}

.translation-v85-space-card img,
.translation-v85-space-card video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.translation-v85-space-card > div > span {
  position: absolute;
  right: 6px;
  bottom: 6px;
  padding: 3px 6px;
  border-radius: 4px;
  color: #f3f8ff;
  background: rgba(0, 5, 12, 0.78);
  font-size: 9px;
}

.translation-v85-space-card > strong,
.translation-v85-space-card > small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.translation-v85-space-card > strong {
  margin: 9px 2px 3px;
  color: #dce9f7;
  font-size: 11px;
}

.translation-v85-space-card > small {
  margin: 0 2px 3px;
  color: #68798e;
  font-size: 9px;
}

.translation-v85-space-state {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 250px;
  color: #718299;
  text-align: center;
}

.translation-v85-space-state strong {
  margin-bottom: 7px;
  color: #dce8f6;
}

.translation-v85-space-modal > footer {
  justify-content: space-between;
  gap: 18px;
  flex: 0 0 auto;
  min-height: 65px;
  padding: 12px 18px;
  border-top: 1px solid rgba(111, 141, 181, 0.14);
}

.translation-v85-space-modal > footer > div {
  gap: 8px;
  color: #718299;
  font-size: 11px;
}

.translation-v85-pricing-list,
.translation-v85-charge-list,
.translation-v85-output-list {
  display: grid;
  gap: 9px;
}

.translation-v85-pricing-list article,
.translation-v85-charge-list article,
.translation-v85-output-list article {
  justify-content: space-between;
  gap: 18px;
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid rgba(111, 141, 181, 0.16);
  border-radius: 6px;
  background: #0a1626;
}

.translation-v85-pricing-list article > div,
.translation-v85-charge-list article > div,
.translation-v85-output-list article > div {
  min-width: 0;
  flex: 1;
}

.translation-v85-pricing-list strong,
.translation-v85-pricing-list span,
.translation-v85-charge-list strong,
.translation-v85-charge-list span,
.translation-v85-output-list strong,
.translation-v85-output-list span {
  display: block;
}

.translation-v85-pricing-list strong,
.translation-v85-charge-list strong,
.translation-v85-output-list strong {
  color: #dce8f6;
  font-size: 12px;
}

.translation-v85-pricing-list span,
.translation-v85-charge-list span,
.translation-v85-output-list span {
  margin-top: 4px;
  overflow: hidden;
  color: #6e8096;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.translation-v85-pricing-list b,
.translation-v85-charge-list b {
  flex: 0 0 auto;
  color: #83dbe3;
  font-size: 11px;
}

.translation-v85-charge-summary,
.translation-v85-task-modal-meta {
  gap: 10px;
  margin-bottom: 14px;
}

.translation-v85-charge-summary > span,
.translation-v85-task-modal-meta > span {
  flex: 1;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid rgba(111, 141, 181, 0.15);
  border-radius: 6px;
  background: #0a1626;
}

.translation-v85-charge-summary small,
.translation-v85-charge-summary strong,
.translation-v85-task-modal-meta small,
.translation-v85-task-modal-meta strong {
  display: block;
}

.translation-v85-charge-summary small,
.translation-v85-task-modal-meta small {
  color: #718299;
  font-size: 9px;
}

.translation-v85-charge-summary strong,
.translation-v85-task-modal-meta strong {
  margin-top: 5px;
  overflow-wrap: anywhere;
  color: #dce8f6;
  font-size: 11px;
}

.translation-v85-task-modal > video {
  width: 100%;
  max-height: 360px;
  margin-bottom: 14px;
  border-radius: 6px;
  object-fit: contain;
  background: #030914;
}

.translation-v85-task-modal-error {
  margin-bottom: 14px;
  padding: 11px 12px;
  border: 1px solid rgba(255, 111, 143, 0.28);
  border-radius: 6px;
  color: #ff9bb2;
  background: rgba(255, 111, 143, 0.06);
  font-size: 11px;
}

.translation-v85-output-list button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(54, 198, 211, 0.34);
  border-radius: 6px;
  color: #b8f5fa;
  background: rgba(36, 160, 174, 0.08);
}

.translation-v85-output-list button svg {
  width: 14px;
  height: 14px;
}

.translation-v85-missing {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-height: calc(100vh - 76px);
  padding: 36px;
}

@media (max-width: 1180px) {
  .translation-v85-project-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .translation-v85-task-grid,
  .translation-v85-detail.panel-open .translation-v85-task-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .translation-v85-space-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 960px) {
  .translation-v85-detail,
  .translation-v85-detail.panel-open {
    grid-template-columns: minmax(0, 1fr);
  }

  .translation-v85-detail.panel-open .translation-v85-create-panel {
    position: fixed;
    top: 76px;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 120;
    width: 100%;
    height: auto;
    min-height: 0;
    border-radius: 0;
  }
}

@media (max-width: 760px) {
  .translation-v85-topbar {
    height: 66px;
    min-height: 66px;
    padding-right: 12px;
    padding-left: 12px;
  }

  .translation-v85-topbar .topbar-left {
    gap: 10px;
  }

  .translation-v85-topbar .theater-brand-name,
  .translation-v85-topbar .theater-brand-en {
    display: none;
  }

  .translation-v85-top-actions {
    flex: 0 0 auto;
    gap: 7px;
  }

  .translation-v85-top-actions > button:not(.beta-team-trigger) {
    min-width: 38px;
    padding: 0 9px;
    font-size: 10px;
    white-space: nowrap;
  }

  .translation-v85-top-actions .beta-team-trigger > span:last-child {
    white-space: nowrap;
  }

  .translation-v85-projects,
  .translation-v85-detail {
    padding: 16px;
  }

  .translation-v85-project-toolbar,
  .translation-v85-detail-head,
  .translation-v85-task-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .translation-v85-project-toolbar label,
  .translation-v85-task-toolbar label {
    width: 100%;
    min-width: 0;
  }

  .translation-v85-project-grid,
  .translation-v85-task-grid,
  .translation-v85-detail.panel-open .translation-v85-task-grid,
  .translation-v85-space-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .translation-v85-create-project,
  .translation-v85-project-card,
  .translation-v85-empty-card {
    min-height: 250px;
  }

  .translation-v85-project-main {
    min-height: 248px;
    padding: 0;
  }

  .translation-v85-project-body {
    padding: 22px 20px 14px;
  }

  .translation-v85-project-footer {
    padding: 16px 20px;
  }

  .translation-v85-task-area {
    min-height: 520px;
  }

  .translation-v85-task-grid {
    min-height: 380px;
  }

  .translation-v85-detail.panel-open {
    gap: 20px;
  }

  .translation-v85-detail.panel-open .translation-v85-create-panel {
    top: 66px;
  }

  .translation-v85-board-head {
    align-items: flex-start;
    flex-direction: column;
    padding: 16px;
  }

  .translation-v85-board-head h1 {
    font-size: 24px;
  }

  .translation-v85-board-head nav {
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .translation-v85-board-head nav::-webkit-scrollbar {
    display: none;
  }

  .translation-v85-config-grid,
  .translation-v85-number-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .translation-v85-type-options {
    align-items: stretch;
    flex-direction: column;
  }

  .translation-v85-source-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .translation-v85-source-item {
    grid-template-columns: 76px minmax(0, 1fr) 30px;
  }

  .translation-v85-source-item video {
    width: 76px;
  }

  .translation-v85-space-overlay {
    padding: 8px;
  }

  .translation-v85-space-modal {
    width: 100%;
    max-height: 94vh;
  }

  .translation-v85-space-search {
    min-width: 0;
    margin: 12px 12px 0;
  }

  .translation-v85-space-grid {
    padding: 12px;
  }

  .translation-v85-space-modal > footer {
    align-items: stretch;
    flex-direction: column;
  }

  .translation-v85-space-modal > footer > div,
  .translation-v85-space-modal > footer > button {
    justify-content: center;
    width: 100%;
  }

  .translation-v85-task-modal-meta,
  .translation-v85-charge-summary {
    align-items: stretch;
    flex-direction: column;
  }

  .translation-v85-output-list article,
  .translation-v85-pricing-list article,
  .translation-v85-charge-list article {
    align-items: flex-start;
    flex-direction: column;
  }

  .translation-v85-output-list button {
    width: 100%;
  }
}

/* Software account activation is intentionally independent from the admin console. */
.beita-password-setup-page,
.beita-password-setup-page * {
  box-sizing: border-box;
  letter-spacing: 0;
}

.beita-password-setup-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(360px, 1fr) minmax(440px, 0.78fr);
  background: #090c14;
  color: #f7f8fc;
}

.beita-password-setup-brand {
  position: relative;
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
}

.beita-password-setup-brand::before,
.beita-password-setup-brand::after {
  content: "";
  position: absolute;
  inset: 12% 10%;
  z-index: -1;
  border: 1px solid rgba(157, 107, 255, 0.18);
  transform: rotate(9deg);
}

.beita-password-setup-brand::after {
  inset: 22% 18%;
  border-color: rgba(255, 255, 255, 0.08);
  transform: rotate(-13deg);
}

.beita-password-setup-brand img {
  width: 148px;
  height: 148px;
  object-fit: contain;
  filter: drop-shadow(0 18px 48px rgba(111, 54, 235, 0.34));
}

.beita-password-setup-brand strong {
  margin-top: 26px;
  font-size: 30px;
  font-weight: 800;
}

.beita-password-setup-brand span {
  margin-top: 10px;
  color: #9da7ba;
  font-size: 14px;
}

.beita-password-setup-panel {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  justify-content: center;
  padding: clamp(48px, 7vw, 110px);
  background: #ffffff;
  color: #111827;
}

.beita-password-setup-panel h1 {
  margin: 8px 0 12px;
  font-size: 34px;
  line-height: 1.2;
}

.beita-password-setup-kicker {
  margin: 0;
  color: #7448e8;
  font-size: 12px;
  font-weight: 800;
}

.beita-password-setup-note {
  max-width: 520px;
  margin: 0 0 28px;
  color: #667085;
  font-size: 14px;
  line-height: 1.75;
}

.beita-password-setup-form {
  max-width: 520px;
}

.beita-password-setup-panel .beita-login-field > span {
  color: #344054;
}

.beita-password-setup-panel .beita-login-field > div {
  border-color: #d8dce6;
  background: #f8f9fc;
}

.beita-password-setup-panel .beita-login-field input {
  color: #101828;
}

.beita-password-policy {
  display: block;
  margin-top: 7px;
  color: #667085;
  font-size: 12px;
  line-height: 1.5;
}

.beita-password-setup-panel .beita-login-submit {
  width: min(100%, 520px);
  min-height: 46px;
  margin-top: 10px;
}

.beita-password-setup-success {
  display: grid;
  width: 58px;
  height: 58px;
  margin-bottom: 20px;
  place-items: center;
  border-radius: 50%;
  background: #ede8ff;
  color: #6e3fe7;
}

.beita-password-setup-success svg {
  width: 26px;
  height: 26px;
}

@media (max-width: 860px) {
  .beita-password-setup-page {
    grid-template-columns: 1fr;
  }

  .beita-password-setup-brand {
    min-height: 210px;
    padding: 32px;
  }

  .beita-password-setup-brand img {
    width: 86px;
    height: 86px;
  }

  .beita-password-setup-brand strong {
    margin-top: 12px;
    font-size: 22px;
  }

  .beita-password-setup-panel {
    min-height: calc(100vh - 210px);
    padding: 38px 24px 56px;
  }
}

/* AI Studio: calibrated against the Tuyaa fullscreen desktop component. */
.studio-page.ai-studio-page {
  --studio-left-edge: 16px;
  --studio-left-width: 348px;
  --studio-content-edge: 368px;
  display: block;
  width: 100%;
  height: 100vh;
  min-height: 100vh;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  color: #0f172a;
  background: #eceef1;
}

.ai-studio-page,
.ai-studio-page * {
  box-sizing: border-box;
  letter-spacing: 0;
}

.ai-studio-page button,
.ai-studio-page textarea,
.ai-studio-page input {
  font: inherit;
}

.ai-studio-page .studio-wrap {
  position: relative;
  width: 100%;
  min-height: 100vh;
  padding: 14px 16px 16px;
}

.ai-studio-page .studio-frame {
  display: block;
  min-height: calc(100vh - 30px);
  overflow: visible;
}

.studio-left-panel {
  position: fixed;
  top: 14px;
  left: var(--studio-left-edge);
  z-index: 24;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: var(--studio-left-width);
  height: calc(100vh - 28px);
}

.studio-asset-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 80px;
  padding: 14px 14px 15px;
  border: 1px solid rgba(125, 211, 252, 0.28);
  border-radius: 18px;
  color: #0f172a;
  text-align: left;
  cursor: pointer;
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.78), transparent 42%),
    linear-gradient(135deg, rgba(14, 165, 233, 0.16), rgba(37, 99, 235, 0.08) 55%, rgba(249, 115, 22, 0.1));
  box-shadow: 0 12px 28px rgba(14, 165, 233, 0.12);
}

.studio-asset-brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 50px;
  height: 50px;
  border-radius: 17px;
}

.studio-asset-brand-mark img {
  width: 50px;
  height: 50px;
  object-fit: contain;
  filter: drop-shadow(0 8px 16px rgba(15, 23, 42, 0.22));
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.studio-asset-brand:hover .studio-asset-brand-mark img {
  transform: translateY(-2px) scale(1.06);
}

.studio-asset-brand-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.studio-asset-brand-copy small {
  color: #0f766e;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.studio-asset-brand-copy strong {
  color: #0f172a;
  font-size: 20px;
  line-height: 1.1;
}

.studio-asset-brand-copy b {
  color: #1d4ed8;
  font-size: 15px;
}

.studio-library-panel {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  padding: 16px 12px 14px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.94);
}

.studio-left-head {
  position: sticky;
  top: -16px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: -16px -12px 0;
  padding: 16px 12px 10px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
}

.studio-left-head h2 {
  margin: 0;
  color: #1f2937;
  font-size: 17px;
  font-weight: 700;
}

.studio-left-head button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  background: linear-gradient(135deg, #0ea5e9, #2563eb);
}

.studio-library-stack {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.studio-asset-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.studio-asset-section > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.studio-asset-section h3 {
  margin: 0;
  color: #475569;
  font-size: 13px;
  font-weight: 600;
}

.studio-asset-grid {
  --studio-card-radius: 8px;
  display: grid;
  gap: 10px;
}

.studio-asset-grid.role-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.studio-asset-grid.reference-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.studio-add-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-width: 0;
  height: 36px;
  padding: 0 8px;
  border: 1px dashed rgba(59, 130, 246, 0.5);
  border-radius: var(--studio-card-radius);
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  background: rgba(239, 246, 255, 0.8);
  transition: transform 0.2s ease, background 0.2s ease;
}

.studio-add-item svg {
  width: 16px;
  height: 16px;
}

.studio-add-item.role-add {
  aspect-ratio: 5 / 6;
  height: auto;
  flex-direction: column;
}

.studio-add-item:hover {
  transform: translateY(-1px);
  background: #e0edff;
}

.studio-add-item:disabled {
  opacity: 0.55;
  cursor: wait;
}

.studio-asset-item {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: var(--studio-card-radius);
  cursor: pointer;
  background: rgba(255, 255, 255, 0.78);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.studio-asset-item:hover,
.studio-asset-item:focus-within {
  z-index: 2;
  transform: translateY(-2px) scale(1.02);
  border-color: rgba(59, 130, 246, 0.4);
  box-shadow: 0 10px 18px rgba(15, 23, 42, 0.1);
}

.studio-asset-item.role-item {
  display: grid;
  grid-template-rows: minmax(0, 1fr) 30px;
  aspect-ratio: 5 / 6;
}

.studio-asset-item.reference-item {
  aspect-ratio: 16 / 9;
  border: 0;
  background: transparent;
}

.studio-asset-item > img,
.studio-asset-fallback {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  object-position: center top;
}

.studio-asset-fallback {
  display: grid;
  place-items: center;
  color: #64748b;
  font-size: 18px;
  font-weight: 700;
  background: linear-gradient(150deg, #e2e8f0, #f8fafc);
}

.studio-asset-item > strong {
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 0 8px;
  overflow: hidden;
  color: #334155;
  font-size: 12px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-asset-item.reference-item > strong {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  min-height: 34px;
  padding: 10px 9px 7px;
  color: rgba(248, 250, 252, 0.98);
  background: linear-gradient(180deg, rgba(2, 6, 23, 0.02), rgba(2, 6, 23, 0.62) 90%);
}

.studio-asset-item.selected {
  border-color: rgba(34, 197, 94, 0.42);
  box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.2), 0 8px 18px rgba(34, 197, 94, 0.08);
}

.studio-asset-use {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.84);
  border-radius: 999px;
  color: #fff;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.88);
  background: linear-gradient(180deg, #4fb6ff, #2f7df6 55%, #2459df);
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.34), 0 2px 8px rgba(15, 23, 42, 0.12);
  transition: opacity 0.18s ease, transform 0.22s ease, box-shadow 0.22s ease;
}

.studio-asset-use svg {
  width: 20px;
  height: 20px;
}

.studio-asset-item:hover .studio-asset-use,
.studio-asset-item:focus-within .studio-asset-use {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1.1);
}

.studio-asset-delete,
.studio-record-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  color: #fff;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  background: rgba(15, 23, 42, 0.82);
  transition: opacity 0.18s ease, transform 0.18s ease, background 0.18s ease;
}

.studio-asset-delete {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 7;
}

.studio-asset-delete svg,
.studio-record-delete svg {
  width: 14px;
  height: 14px;
}

.studio-asset-item:hover .studio-asset-delete,
.studio-asset-item:focus-within .studio-asset-delete,
.studio-audio-row:hover .studio-asset-delete,
.studio-audio-row:focus-within .studio-asset-delete,
.studio-history-item:hover .studio-record-delete,
.studio-history-item:focus-within .studio-record-delete {
  opacity: 1;
  pointer-events: auto;
}

.studio-asset-delete:hover,
.studio-record-delete:hover {
  transform: scale(1.08);
  background: #dc2626;
}

.studio-audio-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 10px;
}

.studio-audio-add,
.studio-audio-row {
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: 42px;
  border-radius: 12px;
}

.studio-audio-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 1px dashed rgba(59, 130, 246, 0.5);
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  background: rgba(239, 246, 255, 0.8);
}

.studio-audio-row > button:first-child {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 42px;
  padding: 0 38px 0 10px;
  overflow: hidden;
  border: 1px solid rgba(198, 209, 227, 0.9);
  border-radius: 12px;
  color: #1f2a44;
  cursor: pointer;
  background: rgba(248, 250, 252, 0.96);
}

.studio-audio-row > button:first-child svg {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
}

.studio-audio-row > button:first-child span {
  min-width: 0;
  overflow: hidden;
  font-size: 12px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-audio-row.selected > button:first-child {
  border-color: rgba(74, 113, 255, 0.38);
  color: #2143c7;
  background: rgba(237, 243, 255, 0.98);
}

.studio-audio-row .studio-asset-delete {
  top: 50%;
  right: 8px;
  width: 24px;
  height: 24px;
  transform: translateY(-50%);
}

.studio-audio-row .studio-asset-delete:hover {
  transform: translateY(-50%) scale(1.06);
}

.studio-center-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 100vh;
  margin-left: var(--studio-content-edge);
  padding: 58px 10px 300px;
}

.studio-filter-bar {
  position: fixed;
  top: 18px;
  right: 38px;
  z-index: 28;
  display: flex;
  justify-content: flex-end;
}

.studio-filter-shell {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 48px;
  padding: 0 11px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 19px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.09);
}

.studio-filter-shell > i {
  width: 1px;
  height: 20px;
  background: rgba(148, 163, 184, 0.24);
}

.studio-filter-wrap,
.studio-control-wrap {
  position: relative;
  min-width: 0;
}

.studio-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 34px;
  padding: 0 7px;
  border: 0;
  color: #334155;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  background: transparent;
}

.studio-filter-pill svg {
  width: 13px;
  height: 13px;
  color: #64748b;
}

.studio-dropdown-menu,
.studio-control-menu {
  position: absolute;
  z-index: 260;
  min-width: 178px;
  padding: 8px;
  overflow: auto;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 18px 34px rgba(15, 23, 42, 0.12);
  backdrop-filter: blur(12px);
}

.studio-dropdown-menu {
  top: calc(100% + 10px);
  right: 0;
}

.studio-dropdown-menu button,
.studio-control-menu button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 36px;
  padding: 8px 10px;
  border: 0;
  border-radius: 10px;
  color: #334155;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  background: transparent;
}

.studio-dropdown-menu button:hover,
.studio-control-menu button:hover,
.studio-control-menu button.active {
  color: #1d4ed8;
  background: #eef4ff;
}

.studio-control-menu button svg {
  width: 15px;
  height: 15px;
  opacity: 0;
}

.studio-control-menu button.active svg {
  opacity: 1;
}

.studio-queue-panel {
  position: fixed;
  top: 76px;
  right: 38px;
  z-index: 27;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: start;
  gap: 8px;
  width: min(236px, calc(100vw - 48px));
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 18px;
  color: #1e293b;
  text-align: left;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(12px);
}

.studio-queue-panel.expanded {
  width: min(300px, calc(100vw - 48px));
}

.studio-queue-panel > span:first-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.studio-queue-panel > span strong {
  font-size: 14px;
}

.studio-queue-panel > span small {
  color: #64748b;
  font-size: 11px;
}

.studio-queue-panel > b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  color: #1d4ed8;
  font-size: 12px;
  background: #eef4ff;
}

.studio-queue-panel > em {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: #94a3b8;
  transition: transform 0.2s ease;
}

.studio-queue-panel > em svg {
  width: 15px;
  height: 15px;
}

.studio-queue-panel.expanded > em {
  transform: rotate(180deg);
}

.studio-queue-list {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 280px;
  overflow: auto;
}

.studio-queue-item {
  display: grid;
  grid-template-columns: auto auto;
  gap: 6px;
  padding: 10px 11px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 14px;
  background: rgba(248, 250, 252, 0.92);
}

.studio-queue-item i,
.studio-queue-item b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 11px;
  font-style: normal;
}

.studio-queue-item i.video {
  color: #1d4ed8;
  background: #dbeafe;
}

.studio-queue-item i.image {
  color: #6d28d9;
  background: #ede9fe;
}

.studio-queue-item b {
  color: #64748b;
  background: #f1f5f9;
}

.studio-queue-item small {
  grid-column: 1 / -1;
  display: -webkit-box;
  overflow: hidden;
  color: #475569;
  font-size: 12px;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.studio-history-list {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  min-height: 220px;
  padding-bottom: 84px;
}

.studio-history-group {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: min(980px, 100%);
}

.studio-history-group > h3 {
  width: 100%;
  margin: 0;
  color: #334155;
  font-size: 22px;
}

.studio-history-loading,
.studio-history-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(980px, 100%);
  min-height: 220px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 18px;
  color: #64748b;
  background: rgba(255, 255, 255, 0.68);
}

.studio-history-loading {
  gap: 12px;
  font-size: 15px;
  font-weight: 600;
}

.studio-history-loading > span {
  width: 22px;
  height: 22px;
  border: 2px solid rgba(59, 130, 246, 0.2);
  border-top-color: #3b82f6;
  border-radius: 999px;
  animation: studio-spin 0.84s linear infinite;
}

.studio-history-empty {
  flex-direction: column;
  gap: 8px;
  border-style: dashed;
}

.studio-history-empty > span {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 15px;
  color: #2563eb;
  background: #eff6ff;
}

.studio-history-empty > span svg {
  width: 22px;
  height: 22px;
}

.studio-history-empty strong {
  color: #334155;
  font-size: 15px;
}

.studio-history-empty small {
  color: #94a3b8;
  font-size: 12px;
}

.studio-history-item {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  padding: 12px 14px 13px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.58);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.studio-history-item:hover,
.studio-history-item:focus-within {
  transform: translateY(-1px);
  border-color: rgba(96, 165, 250, 0.46);
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.08);
}

.studio-history-item > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.studio-history-item > header > span {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.studio-history-item > header strong {
  min-width: 0;
  overflow: hidden;
  color: #475569;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-history-item > header time {
  color: #94a3b8;
  font-size: 11px;
  white-space: nowrap;
}

.studio-history-item > header button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  color: #64748b;
  cursor: pointer;
  background: rgba(241, 245, 249, 0.9);
}

.studio-history-item > header button svg {
  width: 14px;
  height: 14px;
}

.studio-history-item > header .studio-record-delete {
  color: #fff;
  background: rgba(15, 23, 42, 0.82);
}

.studio-mode-tag,
.studio-status-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
  white-space: nowrap;
}

.studio-mode-tag.video {
  color: #1d4ed8;
  background: #dbeafe;
}

.studio-mode-tag.image {
  color: #6d28d9;
  background: #ede9fe;
}

.studio-status-tag.queued,
.studio-status-tag.running {
  color: #0369a1;
  background: #e0f2fe;
}

.studio-status-tag.succeeded,
.studio-status-tag.success {
  color: #15803d;
  background: #ecfdf3;
}

.studio-status-tag.failed {
  color: #dc2626;
  background: #fef2f2;
}

.studio-history-item > p {
  margin: 0;
  color: #334155;
  font-size: 14px;
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
}

.studio-task-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.studio-task-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 8px;
  color: #64748b;
  font-size: 11px;
  background: rgba(241, 245, 249, 0.9);
}

.studio-video-result-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 136px;
  gap: 12px;
  align-items: stretch;
  margin-top: 14px;
}

.studio-video-result-wrap .studio-result-video {
  width: 100%;
  max-height: 520px;
  margin: 0;
  background: #05070d;
  object-fit: contain;
}

.studio-result-last-frame {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  border: 1px solid var(--line, rgba(148, 163, 184, 0.22));
  background: rgba(15, 23, 42, 0.06);
  overflow: hidden;
}

.studio-result-last-frame img {
  width: 100%;
  flex: 1;
  min-height: 0;
  object-fit: cover;
}

.studio-result-last-frame figcaption {
  padding: 8px 10px;
  text-align: center;
  font-size: 12px;
  color: var(--muted, #64748b);
}

@media (max-width: 760px) {
  .studio-video-result-wrap { grid-template-columns: minmax(0, 1fr); }
  .studio-result-last-frame { max-height: 220px; }
}

.studio-provider-state {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  gap: 3px 9px;
  padding: 12px;
  border: 1px dashed rgba(148, 163, 184, 0.3);
  border-radius: 12px;
  background: rgba(248, 250, 252, 0.72);
}

.studio-provider-state > span {
  grid-row: 1 / 3;
  align-self: center;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #3b82f6;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.14);
}

.studio-history-item.failed .studio-provider-state > span {
  background: #ef4444;
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.12);
}

.studio-provider-state strong {
  color: #475569;
  font-size: 12px;
}

.studio-provider-state small {
  color: #94a3b8;
  font-size: 11px;
}

.studio-result-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.studio-result-grid img,
.studio-result-video {
  width: 100%;
  max-height: 520px;
  object-fit: contain;
  border-radius: 20px;
}

.studio-composer-dock {
  position: fixed;
  bottom: 12px;
  left: calc(var(--studio-content-edge) + (100vw - var(--studio-content-edge)) / 2);
  z-index: 30;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: min(860px, calc(100vw - 422px));
  pointer-events: none;
  transform: translateX(-50%);
}

.studio-composer-dock > * {
  pointer-events: auto;
}

.studio-composer-wrap {
  position: relative;
  display: flex;
  flex: 1 1 760px;
  flex-direction: column;
  gap: 10px;
  width: auto;
  max-width: 860px;
  min-width: 0;
  max-height: 420px;
  padding: 12px 14px;
  overflow: visible;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.07);
}

.studio-composer-head {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-height: 92px;
}

.studio-prompt-picker {
  position: relative;
  z-index: 12;
  flex: 0 0 auto;
  width: 118px;
}

.studio-prompt-picker > button {
  position: relative;
  display: grid;
  place-items: center;
  width: 86px;
  height: 104px;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 8px;
  color: #9bb2c8;
  cursor: pointer;
  background: #f4f5f7;
  box-shadow: 0 10px 20px rgba(2, 6, 23, 0.14);
}

.studio-prompt-picker > button > svg {
  width: 28px;
  height: 28px;
}

.studio-prompt-picker > button > span {
  position: relative;
  display: block;
  width: 86px;
  height: 104px;
}

.studio-prompt-picker > button img,
.studio-prompt-picker > button i {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 72px;
  height: 104px;
  overflow: hidden;
  border: 2px solid #fff;
  border-radius: 8px;
  object-fit: cover;
  color: #475569;
  font-style: normal;
  font-weight: 700;
  background: #e2e8f0;
  box-shadow: 0 8px 18px rgba(2, 6, 23, 0.18);
}

.studio-prompt-picker > button img:nth-child(2),
.studio-prompt-picker > button i:nth-child(2) {
  left: 10px;
  transform: rotate(4deg);
}

.studio-prompt-picker > button img:nth-child(3),
.studio-prompt-picker > button i:nth-child(3) {
  left: 20px;
  transform: rotate(8deg);
}

.studio-prompt-picker > button > b {
  position: absolute;
  right: -7px;
  bottom: -7px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border: 2px solid #fff;
  border-radius: 999px;
  color: #fff;
  font-size: 11px;
  background: #2563eb;
}

.studio-prompt-input {
  flex: 1;
  width: 100%;
  min-width: 0;
  min-height: 92px;
  max-height: 132px;
  padding: 3px 2px;
  overflow: auto;
  border: 0;
  outline: 0;
  resize: none;
  color: #334155;
  font-size: 15px;
  line-height: 1.5;
  background: transparent;
}

.studio-prompt-input::placeholder {
  color: #94a3b8;
}

.studio-composer-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: nowrap;
}

.studio-control-cluster {
  display: flex;
  align-items: center;
  flex: 1;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.studio-control-trigger,
.studio-toggle-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  height: 34px;
  padding: 0 12px 0 10px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 999px;
  color: #334155;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.88);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.studio-control-trigger:hover,
.studio-toggle-control:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 16px rgba(15, 23, 42, 0.12);
}

.studio-control-trigger.primary {
  color: #0891b2;
  border-color: rgba(14, 165, 233, 0.3);
  background: rgba(240, 249, 255, 0.9);
}

.studio-control-trigger small {
  flex: 0 0 auto;
  color: #64748b;
  font-size: 11px;
}

.studio-control-trigger strong {
  max-width: 132px;
  min-width: 0;
  overflow: hidden;
  color: #1e293b;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-control-trigger > svg {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  color: #64748b;
}

.studio-mode-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
}

.studio-mode-dot.video {
  background: #2563eb;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.14);
}

.studio-mode-dot.image {
  background: #7c3aed;
  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.15);
}

.studio-control-menu {
  bottom: calc(100% + 8px);
  left: 0;
  min-width: 180px;
  max-height: min(360px, 48vh);
  padding: 6px;
  border-radius: 14px;
}

.studio-control-menu.model-menu {
  min-width: 280px;
}

.studio-toggle-control > span {
  position: relative;
  width: 26px;
  height: 14px;
  border-radius: 999px;
  background: #cbd5e1;
  transition: background 0.18s ease;
}

.studio-toggle-control > span::after {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  content: "";
  background: #fff;
  transition: transform 0.18s ease;
}

.studio-toggle-control.active > span {
  background: #2563eb;
}

.studio-toggle-control.active > span::after {
  transform: translateX(12px);
}

.studio-send-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(135deg, #0ea5e9, #2563eb);
  box-shadow: 0 12px 18px rgba(37, 99, 235, 0.32);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.studio-send-btn svg {
  width: 16px;
  height: 16px;
}

.studio-send-btn:hover:not(:disabled) {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 16px 24px rgba(37, 99, 235, 0.38);
}

.studio-send-btn:disabled {
  color: #eef2f7;
  cursor: not-allowed;
  background: linear-gradient(140deg, #dbe2ea, #cdd7e7);
  box-shadow: none;
}

.studio-send-head {
  display: none;
  align-self: flex-end;
}

.studio-send-row {
  align-self: center;
  margin-left: auto;
}

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

@media (max-width: 1280px) {
  .studio-audio-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 1400px) {
  .studio-page.ai-studio-page {
    --studio-left-edge: 14px;
  }

  .studio-filter-bar,
  .studio-queue-panel {
    right: 24px;
  }
}

@media (max-width: 980px) {
  .studio-page.ai-studio-page {
    --studio-content-edge: 0px;
  }

  .ai-studio-page .studio-wrap {
    padding: 10px 12px 16px;
  }

  .studio-left-panel {
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
    width: auto;
    height: auto;
    max-height: none;
  }

  .studio-library-panel {
    max-height: 300px;
  }

  .studio-center-panel {
    min-height: 620px;
    margin-left: 0;
    padding-top: 56px;
    padding-bottom: 250px;
  }

  .studio-filter-bar {
    position: sticky;
    top: 8px;
    right: auto;
    z-index: 20;
  }

  .studio-queue-panel {
    top: 70px;
    right: 12px;
  }

  .studio-composer-dock {
    left: 50%;
    width: min(860px, calc(100vw - 24px));
  }

  .studio-composer-head {
    flex-direction: column;
    align-items: stretch;
  }

  .studio-prompt-input {
    min-height: 82px;
  }

  .studio-composer-options {
    align-items: center;
    flex-wrap: wrap;
  }

  .studio-control-cluster {
    flex: 1 1 100%;
  }

  .studio-send-row {
    width: 50px;
    height: 50px;
    margin-left: 0;
  }
}

/* Tuyaa-aligned storyboard workbench. Fullscreen desktop is the layout baseline. */
.theater-project-detail-page .project-stage.storyboard-stage {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.theater-project-detail-page .storyboard-workspace {
  --theater-line: rgba(148, 163, 184, 0.14);
  --theater-line-strong: rgba(162, 118, 255, 0.34);
  --theater-text: rgb(122, 139, 158);
  --theater-text-strong: #e7edf5;
  --theater-text-soft: rgb(122, 139, 158);
  --theater-control-bg: rgba(255, 255, 255, 0.03);
  --theater-control-hover-bg: rgba(162, 118, 255, 0.12);
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--theater-line);
  border-radius: 18px;
  color: var(--theater-text);
  background: linear-gradient(180deg, rgba(11, 16, 30, 0.96), rgba(7, 11, 21, 0.94)), rgba(8, 12, 22, 0.86);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.03), 0 18px 40px rgba(2, 6, 23, 0.28);
}

.theater-project-detail-page .episode-tabs-panel {
  min-width: 0;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 32px;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  overflow: hidden;
  border-bottom: 1px solid var(--theater-line);
  background: rgba(5, 9, 18, 0.42);
}

.theater-project-detail-page .episode-tabs-nav {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 8px;
  color: var(--theater-text);
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}

.theater-project-detail-page .episode-tabs-nav:hover {
  color: var(--theater-text-strong);
  border-color: rgba(162, 118, 255, 0.34);
  background: rgba(162, 118, 255, 0.1);
}

.theater-project-detail-page .episode-tabs-nav svg {
  width: 15px;
  height: 15px;
}

.theater-project-detail-page .episode-tabs {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 2px;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.theater-project-detail-page .episode-tabs::-webkit-scrollbar {
  display: none;
}

.theater-project-detail-page .episode-tab {
  min-width: 82px;
  height: 34px;
  flex: 0 0 auto;
  padding: 0 14px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 9px;
  color: var(--theater-text);
  background: rgba(255, 255, 255, 0.03);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.theater-project-detail-page .episode-tab:hover {
  color: var(--theater-text-strong);
  border-color: rgba(162, 118, 255, 0.3);
  background: rgba(162, 118, 255, 0.09);
}

.theater-project-detail-page .episode-tab.active {
  color: var(--theater-text-strong);
  border-color: rgba(162, 118, 255, 0.5);
  background: linear-gradient(180deg, rgba(162, 118, 255, 0.2), rgba(162, 118, 255, 0.1));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.06), 0 10px 24px rgba(88, 62, 180, 0.16);
}

.theater-project-detail-page .episode-detail-panel {
  min-width: 0;
  min-height: 0;
  display: flex;
  overflow: hidden;
}

.theater-project-detail-page .script-sidebar {
  position: relative;
  flex: 0 0 380px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-right: 1px solid rgba(148, 163, 184, 0.1);
  background: linear-gradient(180deg, rgba(16, 23, 42, 0.6), rgba(8, 12, 22, 0.8));
  box-shadow: inset -10px 0 20px -10px rgba(0, 0, 0, 0.3);
  transition: flex-basis 0.35s cubic-bezier(0.2, 0, 0, 1);
}

.theater-project-detail-page .script-sidebar::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(180deg, transparent, rgba(162, 118, 255, 0.2), transparent);
}

.theater-project-detail-page .script-sidebar.collapsed {
  flex-basis: 64px;
}

.theater-project-detail-page .script-content-wrapper {
  width: 380px;
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  opacity: 1;
  transition: opacity 0.2s ease-out;
}

.theater-project-detail-page .script-sidebar.collapsed .script-content-wrapper {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease-in;
}

.theater-project-detail-page .script-pane {
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 22px 18px 24px 20px;
}

.theater-project-detail-page .script-pane > header {
  min-width: 0;
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.theater-project-detail-page .script-header-content {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.theater-project-detail-page .script-pane h3,
.theater-project-detail-page .shot-head h3 {
  margin: 0;
  color: var(--theater-text-strong);
}

.theater-project-detail-page .script-pane h3 {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0;
}

.theater-project-detail-page .pane-subtitle {
  overflow: hidden;
  color: var(--theater-text-soft);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.theater-project-detail-page .script-toggle-icon {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--theater-text-soft);
  background: transparent;
  cursor: pointer;
}

.theater-project-detail-page .script-toggle-icon:hover {
  color: #d2baff;
  border-color: rgba(162, 118, 255, 0.2);
  background: rgba(162, 118, 255, 0.1);
}

.theater-project-detail-page .script-toggle-icon svg {
  width: 16px;
  height: 16px;
}

.theater-project-detail-page .script-collapsed-tab {
  position: absolute;
  top: 24px;
  left: 8px;
  width: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px 0;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 24px;
  color: var(--theater-text-soft);
  background: rgba(255, 255, 255, 0.03);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.theater-project-detail-page .script-sidebar.collapsed .script-collapsed-tab {
  opacity: 1;
  pointer-events: auto;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, opacity 0.3s 0.2s ease-out;
}

.theater-project-detail-page .script-collapsed-tab:hover {
  color: var(--theater-text-strong);
  border-color: rgba(162, 118, 255, 0.25);
  background: rgba(162, 118, 255, 0.1);
}

.theater-project-detail-page .script-collapsed-tab svg {
  width: 16px;
  height: 16px;
}

.theater-project-detail-page .script-collapsed-tab span {
  font-size: 13px;
  font-weight: 600;
  writing-mode: vertical-rl;
}

.theater-project-detail-page .script-scroll,
.theater-project-detail-page .shot-list {
  min-height: 0;
  flex: 1;
  overflow: auto;
}

.theater-project-detail-page .script-scroll::-webkit-scrollbar,
.theater-project-detail-page .shot-list::-webkit-scrollbar {
  width: 6px;
}

.theater-project-detail-page .script-scroll::-webkit-scrollbar-track,
.theater-project-detail-page .shot-list::-webkit-scrollbar-track {
  background: transparent;
}

.theater-project-detail-page .script-scroll::-webkit-scrollbar-thumb,
.theater-project-detail-page .shot-list::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.18);
}

.theater-project-detail-page .script-scroll::-webkit-scrollbar-thumb:hover,
.theater-project-detail-page .shot-list::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.28);
}

.theater-project-detail-page .script-scroll {
  padding-right: 10px;
  padding-bottom: 24px;
  color: var(--theater-text);
  font-size: 15px;
  line-height: 1.9;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
}

.theater-project-detail-page .script-line {
  position: relative;
  min-height: 28.5px;
  margin-right: 2px;
  padding: 0 8px 0 12px;
  border-radius: 6px;
  color: var(--theater-text);
  transition: background 0.16s ease, box-shadow 0.16s ease, color 0.16s ease;
}

.theater-project-detail-page .script-line::before {
  content: "";
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 2px;
  width: 2px;
  border-radius: 999px;
  background: transparent;
}

.theater-project-detail-page .script-line.is-source-active {
  border-radius: 0;
  color: rgba(214, 225, 238, 0.96);
  background: linear-gradient(90deg, rgba(30, 41, 59, 0.9), rgba(31, 41, 70, 0.62));
  box-shadow: inset 0 0 0 1px rgba(99, 102, 241, 0.18);
}

.theater-project-detail-page .script-line.is-source-active::before {
  top: 0;
  bottom: 0;
  background: linear-gradient(180deg, #8b9cff, #38bdf8);
  box-shadow: 0 0 10px rgba(99, 102, 241, 0.38);
}

.theater-project-detail-page .script-line.is-source-start {
  border-radius: 7px 7px 0 0;
}

.theater-project-detail-page .script-line.is-source-end {
  border-radius: 0 0 7px 7px;
}

.theater-project-detail-page .script-line.is-source-start.is-source-end {
  border-radius: 7px;
}

.theater-project-detail-page .script-line-text {
  min-height: 28.5px;
  display: block;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.theater-project-detail-page .shot-pane {
  min-width: 0;
  min-height: 0;
  flex: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 16px;
  padding: 20px 22px;
}

.theater-project-detail-page .shot-head {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.theater-project-detail-page .shot-head-title,
.theater-project-detail-page .shot-actions,
.theater-project-detail-page .shot-tool-group {
  min-width: 0;
  display: flex;
  align-items: center;
}

.theater-project-detail-page .shot-head-title {
  gap: 12px;
}

.theater-project-detail-page .title-group {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.theater-project-detail-page .storyboard-stat-tags {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.theater-project-detail-page .storyboard-stat-tag {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 11px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 999px;
  color: rgba(148, 163, 184, 0.9);
  background: rgba(15, 23, 42, 0.52);
  font-size: 12px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0;
  cursor: pointer;
}

.theater-project-detail-page .storyboard-stat-tag strong {
  color: rgba(226, 232, 240, 0.96);
  font: inherit;
  font-weight: 700;
}

.theater-project-detail-page .storyboard-stat-tag:hover,
.theater-project-detail-page .storyboard-stat-tag.active {
  color: var(--theater-text-strong);
  border-color: rgba(162, 118, 255, 0.42);
  background: rgba(162, 118, 255, 0.14);
  box-shadow: 0 8px 18px rgba(2, 6, 23, 0.22);
}

.theater-project-detail-page .storyboard-stat-tag.generating {
  color: #93c5fd;
  border-color: rgba(96, 165, 250, 0.3);
  background: rgba(59, 130, 246, 0.1);
}

.theater-project-detail-page .storyboard-stat-tag.pending-final {
  color: #d8b4fe;
  border-color: rgba(192, 132, 252, 0.3);
  background: rgba(147, 51, 234, 0.1);
}

.theater-project-detail-page .storyboard-stat-tag.finalized {
  color: #5eead4;
  border-color: rgba(45, 212, 191, 0.28);
  background: rgba(20, 184, 166, 0.1);
}

.theater-project-detail-page .shot-actions {
  gap: 10px;
}

.theater-project-detail-page .shot-tool-group {
  gap: 8px;
}

.theater-project-detail-page .shot-tool-group-batch {
  position: relative;
  padding: 4px;
  border: 1px solid rgba(148, 163, 184, 0.08);
  border-radius: 12px;
  background: rgba(148, 163, 184, 0.035);
}

.theater-project-detail-page .shot-tool-group-batch .storyboard-batch-menu-trigger {
  min-width: 112px;
  justify-content: space-between;
  border-color: rgba(148, 163, 184, 0.16);
  background: rgba(15, 23, 42, 0.58);
}

.theater-project-detail-page .storyboard-batch-menu-trigger svg {
  width: 14px;
  height: 14px;
  transition: transform 0.16s ease;
}

.theater-project-detail-page .storyboard-batch-menu-trigger[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.theater-project-detail-page .storyboard-batch-menu-panel {
  position: absolute;
  z-index: 90;
  top: calc(100% + 8px);
  right: 0;
  width: 292px;
  display: grid;
  gap: 4px;
  padding: 8px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 8px;
  background: #111827;
  box-shadow: 0 22px 54px rgba(2, 6, 23, 0.48);
}

.theater-project-detail-page .shot-actions .storyboard-batch-menu-panel > button {
  width: 100%;
  min-height: 54px;
  height: auto;
  justify-content: flex-start;
  gap: 11px;
  padding: 8px 10px;
  border-color: transparent;
  color: rgba(203, 213, 225, 0.9);
  text-align: left;
  background: transparent;
}

.theater-project-detail-page .storyboard-batch-menu-panel > button:hover:not(:disabled) {
  border-color: rgba(162, 118, 255, 0.22);
  background: rgba(162, 118, 255, 0.1);
}

.theater-project-detail-page .storyboard-batch-menu-panel > button > svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  color: #c4b5fd;
}

.theater-project-detail-page .storyboard-batch-menu-panel > button > span {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.theater-project-detail-page .storyboard-batch-menu-panel strong,
.theater-project-detail-page .storyboard-batch-menu-panel small {
  display: block;
  letter-spacing: 0;
}

.theater-project-detail-page .storyboard-batch-menu-panel strong {
  color: #e5e7eb;
  font-size: 13px;
}

.theater-project-detail-page .storyboard-batch-menu-panel small {
  color: rgba(148, 163, 184, 0.72);
  font-size: 11px;
  font-weight: 500;
}

.theater-project-detail-page .shot-actions button {
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 16px;
  border: 1px solid var(--theater-line);
  border-radius: 8px;
  color: var(--theater-text);
  background: var(--theater-control-bg);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}

.theater-project-detail-page .shot-actions button:hover:not(:disabled) {
  color: var(--theater-text-strong);
  border-color: var(--theater-line-strong);
  background: var(--theater-control-hover-bg);
}

.theater-project-detail-page .shot-tool-divider {
  width: 1px;
  height: 26px;
  flex: 0 0 auto;
  border-radius: 999px;
  opacity: 0.58;
  background: linear-gradient(180deg, transparent, var(--theater-line-strong), transparent);
}

.theater-project-detail-page .shot-actions .sleek-split-btn,
.theater-project-detail-page .empty-split-btn {
  height: 34px;
  border-color: rgba(162, 118, 255, 0.42);
  color: var(--theater-text-strong);
  background: linear-gradient(180deg, rgba(162, 118, 255, 0.2), rgba(162, 118, 255, 0.1));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.06), 0 6px 16px rgba(88, 62, 180, 0.12);
  font-size: 13px;
  font-weight: 700;
}

.theater-project-detail-page .shot-actions .sleek-split-btn svg {
  width: 14px;
  height: 14px;
}

.theater-project-detail-page .shot-body,
.theater-project-detail-page .shot-results {
  min-width: 0;
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.theater-project-detail-page .shot-list {
  display: block;
  padding: 28px 6px 20px 0;
}

.theater-project-detail-page .shot-timeline-item,
.storyboard-dialog-overlay .shot-timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  padding: 0 0 32px;
}

.theater-project-detail-page .shot-timeline-item:hover,
.storyboard-dialog-overlay .shot-timeline-item:hover {
  z-index: 20;
}

.theater-project-detail-page .shot-timeline,
.storyboard-dialog-overlay .shot-timeline {
  position: relative;
  display: flex;
  justify-content: center;
  padding-top: 28px;
}

.theater-project-detail-page .shot-timeline::after,
.storyboard-dialog-overlay .shot-timeline::after {
  content: "";
  position: absolute;
  top: 54px;
  bottom: -60px;
  left: 50%;
  width: 2px;
  border-radius: 999px;
  background: rgba(96, 165, 250, 0.2);
  transform: translateX(-50%);
}

.theater-project-detail-page .shot-timeline-item.is-last .shot-timeline::after,
.storyboard-dialog-overlay .shot-timeline-item.is-last .shot-timeline::after {
  display: none;
}

.theater-project-detail-page .shot-index,
.storyboard-dialog-overlay .shot-index {
  position: relative;
  z-index: 2;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(111, 183, 255, 0.28);
  border-radius: 50%;
  color: rgba(203, 213, 225, 0.84);
  background: rgba(30, 41, 59, 0.84);
  font-size: 12px;
  line-height: 1;
}

.theater-project-detail-page .shot-insert-btn {
  position: absolute;
  top: 41px;
  left: 50%;
  z-index: 10;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(162, 118, 255, 0.4);
  border-radius: 50%;
  color: rgba(162, 118, 255, 0.9);
  background: rgba(30, 41, 59, 0.95);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  opacity: 0;
  visibility: hidden;
  cursor: pointer;
  transform: translate(-50%, -50%) scale(0.4);
  transition: all 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.theater-project-detail-page .shot-insert-btn svg {
  width: 12px;
  height: 12px;
}

.theater-project-detail-page .shot-timeline-item:hover .shot-insert-btn.is-up {
  top: 9px;
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

.theater-project-detail-page .shot-timeline-item:hover .shot-insert-btn.is-down {
  top: 73px;
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

.theater-project-detail-page .shot-card,
.storyboard-dialog-overlay .shot-card {
  min-width: 0;
  padding: 24px 28px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 12px;
  background: rgba(17, 24, 39, 0.72);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.025);
  transition: border-color 0.16s ease, background 0.16s ease;
}

.theater-project-detail-page .shot-card:hover,
.theater-project-detail-page .shot-card.active,
.storyboard-dialog-overlay .shot-card:hover {
  border-color: rgba(162, 118, 255, 0.32);
  background: rgba(20, 28, 44, 0.78);
}

.theater-project-detail-page .shot-card-main,
.storyboard-dialog-overlay .shot-card-main {
  min-width: 0;
  display: grid;
  grid-template-columns: clamp(132px, 10vw, 168px) minmax(0, 1fr);
  align-items: start;
  gap: 28px;
}

.theater-project-detail-page .shot-preview-wrap,
.storyboard-dialog-overlay .shot-preview-wrap {
  position: relative;
  width: 100%;
  align-self: start;
}

.theater-project-detail-page .shot-preview-frame,
.storyboard-dialog-overlay .shot-preview-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  color: rgba(148, 163, 184, 0.78);
  background: rgba(8, 13, 24, 0.72);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.04), 0 14px 32px rgba(2, 6, 23, 0.22);
  cursor: pointer;
}

.theater-project-detail-page .shot-preview-frame > svg,
.storyboard-dialog-overlay .shot-preview-frame > svg {
  width: 28px;
  height: 28px;
}

.theater-project-detail-page .shot-preview-frame img,
.storyboard-dialog-overlay .shot-preview-frame img,
.theater-project-detail-page .shot-preview-frame video,
.storyboard-dialog-overlay .shot-preview-frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #090d17;
}

.theater-project-detail-page .shot-preview-frame img,
.theater-project-detail-page .shot-preview-frame video {
  object-fit: cover;
}

.theater-project-detail-page .shot-preview-play,
.storyboard-dialog-overlay .shot-preview-play {
  width: 38px;
  height: 38px;
  position: absolute;
  inset: 50% auto auto 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  color: #fff;
  background: rgba(15, 18, 29, 0.76);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.theater-project-detail-page .shot-preview-play svg,
.storyboard-dialog-overlay .shot-preview-play svg {
  width: 16px;
  height: 16px;
}

.theater-project-detail-page .shot-preview-label,
.storyboard-dialog-overlay .shot-preview-label {
  position: relative;
  z-index: 2;
  padding: 5px 8px;
  border-radius: 999px;
  color: rgba(203, 213, 225, 0.88);
  background: rgba(2, 6, 23, 0.72);
  font-size: 12px;
  line-height: 1;
  font-weight: 600;
}

.theater-project-detail-page .shot-preview-frame.is-processing::after,
.theater-project-detail-page .shot-preview-frame.is-draft::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(2, 6, 23, 0.34);
  pointer-events: none;
}

.theater-project-detail-page .shot-card-content,
.storyboard-dialog-overlay .shot-card-content {
  min-width: 0;
}

.theater-project-detail-page .shot-card-head,
.storyboard-dialog-overlay .shot-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.theater-project-detail-page .shot-card-head h4,
.storyboard-dialog-overlay .shot-card-head h4 {
  min-width: 0;
  margin: 0;
  color: var(--theater-text-strong, #e7edf5);
  font-size: 18px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.theater-project-detail-page .shot-title-input {
  width: min(100%, 520px);
  min-width: 0;
  height: 32px;
  padding: 0 9px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 7px;
  outline: 0;
  color: rgba(203, 213, 225, 0.96);
  background: rgba(8, 13, 24, 0.34);
  font-size: 17px;
  font-weight: 600;
}

.theater-project-detail-page .shot-title-input:focus {
  border-color: rgba(162, 118, 255, 0.56);
  box-shadow: 0 0 0 2px rgba(162, 118, 255, 0.1);
}

.theater-project-detail-page .shot-head-tools,
.storyboard-dialog-overlay .shot-head-tools {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

.theater-project-detail-page .duration-select,
.storyboard-dialog-overlay .duration-select {
  min-width: 92px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 10px;
  border: 1px solid rgba(96, 165, 250, 0.2);
  border-radius: 9px;
  color: var(--theater-text-soft, #93a3b6);
  background: rgba(8, 13, 24, 0.72);
  font-size: 13px;
  font-weight: 600;
}

.theater-project-detail-page .duration-select svg,
.storyboard-dialog-overlay .duration-select svg {
  width: 14px;
  height: 14px;
}

.theater-project-detail-page .shot-card-tools {
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 7px;
  background: rgba(15, 23, 42, 0.82);
  opacity: 0;
  transition: opacity 0.16s ease;
}

.theater-project-detail-page .shot-timeline-item:hover .shot-card-tools,
.theater-project-detail-page .shot-card-tools:focus-within {
  opacity: 1;
}

.theater-project-detail-page .shot-card-tools button {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  color: rgba(148, 163, 184, 0.9);
  background: transparent;
  cursor: pointer;
}

.theater-project-detail-page .shot-card-tools button:hover {
  color: #f8fafc;
  background: rgba(148, 163, 184, 0.12);
}

.theater-project-detail-page .shot-card-tools button:last-child:hover {
  color: #fca5a5;
}

.theater-project-detail-page .shot-card-tools svg {
  width: 14px;
  height: 14px;
}

.theater-project-detail-page .shot-card-tools i {
  width: 1px;
  height: 16px;
  background: rgba(148, 163, 184, 0.14);
}

.theater-project-detail-page .shot-copy,
.storyboard-dialog-overlay .shot-copy {
  min-width: 0;
  margin: -6px -8px 0;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--theater-text, #c9d3e1);
}

.theater-project-detail-page .shot-copy:hover,
.theater-project-detail-page .shot-copy.active {
  border-color: rgba(162, 118, 255, 0.56);
  background: rgba(6, 8, 16, 0.42);
}

.theater-project-detail-page .shot-copy p,
.storyboard-dialog-overlay .shot-copy p {
  margin: 0;
  display: -webkit-box;
  overflow: hidden;
  color: var(--theater-text, #c9d3e1);
  font-size: 14px;
  line-height: 1.8;
  overflow-wrap: anywhere;
  white-space: pre-line;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
}

.theater-project-detail-page .shot-prompt-textarea {
  width: 100%;
  min-height: 7.2em;
  max-height: 50vh;
  margin: 0;
  padding: 0;
  overflow: auto;
  border: 0;
  outline: 0;
  resize: vertical;
  color: var(--theater-text);
  background: transparent;
  font: inherit;
  font-size: 14px;
  line-height: 1.8;
}

.theater-project-detail-page .shot-source-note {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-top: 12px;
  color: rgba(148, 163, 184, 0.62);
  font-size: 12px;
  line-height: 1.5;
}

.theater-project-detail-page .shot-source-note span {
  min-width: 0;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.theater-project-detail-page .shot-source-note b {
  flex: 0 0 auto;
  color: rgba(148, 163, 184, 0.78);
  font-weight: 600;
}

.theater-project-detail-page .shot-edit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.theater-project-detail-page .shot-edit-grid label {
  min-width: 0;
  display: grid;
  gap: 6px;
  color: var(--theater-text-soft);
  font-size: 12px;
}

.theater-project-detail-page .shot-edit-grid input,
.theater-project-detail-page .shot-edit-grid textarea {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  padding: 8px 10px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 8px;
  outline: 0;
  color: var(--theater-text-strong);
  background: rgba(8, 13, 24, 0.72);
  resize: vertical;
}

.theater-project-detail-page .asset-tags,
.storyboard-dialog-overlay .asset-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(148, 163, 184, 0.1);
}

.theater-project-detail-page .asset-tags.empty {
  padding-top: 14px;
}

.theater-project-detail-page .tag,
.storyboard-dialog-overlay .tag {
  max-width: min(100%, 420px);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 7px;
  color: var(--theater-text-soft, #93a3b6);
  background: rgba(148, 163, 184, 0.08);
  font-size: 12px;
  line-height: 1.35;
}

.theater-project-detail-page .tag svg,
.storyboard-dialog-overlay .tag svg {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
}

.theater-project-detail-page .tag-label,
.storyboard-dialog-overlay .tag-label {
  min-width: 0;
  overflow-wrap: anywhere;
}

.theater-project-detail-page .tag.role,
.storyboard-dialog-overlay .tag.role {
  color: #60a5fa;
  border-color: rgba(96, 165, 250, 0.28);
  background: rgba(59, 130, 246, 0.1);
}

.theater-project-detail-page .tag.scene,
.storyboard-dialog-overlay .tag.scene {
  color: #2dd4bf;
  border-color: rgba(45, 212, 191, 0.28);
  background: rgba(20, 184, 166, 0.1);
}

.theater-project-detail-page .tag.prop,
.storyboard-dialog-overlay .tag.prop {
  color: #fcd34d;
  border-color: rgba(251, 191, 36, 0.3);
  background: rgba(251, 191, 36, 0.1);
}

.theater-project-detail-page .asset-add-tag {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  padding: 0;
  border: 1px dashed rgba(148, 163, 184, 0.42);
  border-radius: 8px;
  color: rgba(148, 163, 184, 0.86);
  background: rgba(15, 23, 42, 0.24);
  cursor: pointer;
}

.theater-project-detail-page .asset-add-tag:hover {
  color: #e2e8f0;
  border-color: rgba(203, 213, 225, 0.58);
  background: rgba(30, 41, 59, 0.42);
}

.theater-project-detail-page .asset-add-tag svg {
  width: 15px;
  height: 15px;
}

.theater-project-detail-page .shot-edit-actions {
  max-height: 0;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  overflow: hidden;
  padding-top: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: max-height 0.18s ease, padding-top 0.18s ease, opacity 0.16s ease, transform 0.16s ease;
}

.theater-project-detail-page .shot-edit-actions.visible {
  max-height: 48px;
  padding-top: 14px;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.theater-project-detail-page .shot-edit-actions.is-idle {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(148, 163, 184, 0.1);
}

.theater-project-detail-page .shot-edit-actions button {
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.theater-project-detail-page .shot-edit-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.theater-project-detail-page[data-theater-theme="light"] .storyboard-batch-menu-panel {
  border-color: rgba(51, 65, 85, 0.16);
  background: #fff;
  box-shadow: 0 20px 44px rgba(45, 64, 96, 0.18);
}

.theater-project-detail-page[data-theater-theme="light"] .storyboard-batch-menu-panel strong {
  color: #111827;
}

.theater-project-detail-page[data-theater-theme="light"] .storyboard-batch-menu-panel small {
  color: #64748b;
}

.theater-project-detail-page .shot-edit-cancel {
  border: 1px solid rgba(148, 163, 184, 0.16);
  color: var(--theater-text-soft);
  background: rgba(15, 23, 42, 0.68);
}

.theater-project-detail-page .shot-edit-save {
  border: 1px solid rgba(162, 118, 255, 0.5);
  color: #f5f3ff;
  background: rgba(124, 58, 237, 0.34);
}

.theater-project-detail-page .shot-edit-save svg {
  width: 14px;
  height: 14px;
}

/* Seedance segment cards follow the Tuyaa result-card workflow. */
.theater-project-detail-page .seedance-shot-card {
  overflow: hidden;
  padding: 0;
  border-radius: 8px;
}

.theater-project-detail-page .seedance-shot-head {
  min-width: 0;
  display: grid;
  grid-template-columns: 142px minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}

.theater-project-detail-page .seedance-generate-btn {
  min-width: 0;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 0 12px;
  border: 1px solid rgba(139, 92, 246, 0.32);
  border-radius: 7px;
  color: #e7edf5;
  background: rgba(124, 58, 237, 0.12);
  cursor: pointer;
}

.theater-project-detail-page .seedance-generate-btn:hover:not(:disabled) {
  border-color: rgba(167, 139, 250, 0.64);
  background: rgba(124, 58, 237, 0.2);
  box-shadow: 0 8px 22px rgba(2, 6, 23, 0.24);
}

.theater-project-detail-page .seedance-generate-btn:disabled {
  cursor: default;
  opacity: 0.72;
}

.theater-project-detail-page .seedance-generate-btn > span:first-child {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  flex: 0 0 28px;
  border-radius: 50%;
  color: #c4b5fd;
  background: rgba(139, 92, 246, 0.16);
}

.theater-project-detail-page .seedance-generate-btn > span:first-child svg {
  width: 15px;
  height: 15px;
}

.theater-project-detail-page .seedance-generate-btn > span:last-child {
  min-width: 0;
  display: grid;
  gap: 3px;
  text-align: left;
}

.theater-project-detail-page .seedance-generate-btn strong,
.theater-project-detail-page .seedance-generate-btn small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 0;
}

.theater-project-detail-page .seedance-generate-btn strong {
  font-size: 13px;
  line-height: 1.2;
}

.theater-project-detail-page .seedance-generate-btn small {
  color: rgba(148, 163, 184, 0.78);
  font-size: 11px;
}

.theater-project-detail-page .seedance-generate-btn.is-pending-final,
.theater-project-detail-page .seedance-generate-btn.is-finalized {
  border-color: rgba(45, 212, 191, 0.3);
  background: rgba(20, 184, 166, 0.1);
}

.theater-project-detail-page .seedance-generate-btn.is-pending-final > span:first-child,
.theater-project-detail-page .seedance-generate-btn.is-finalized > span:first-child {
  color: #5eead4;
  background: rgba(20, 184, 166, 0.14);
}

.theater-project-detail-page .seedance-shot-title {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.theater-project-detail-page .seedance-shot-title h4 {
  margin: 0;
  overflow: hidden;
  color: #e7edf5;
  font-size: 17px;
  line-height: 1.35;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 0;
}

.theater-project-detail-page .seedance-shot-title > span {
  overflow: hidden;
  color: rgba(148, 163, 184, 0.7);
  font-size: 11px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.theater-project-detail-page .seedance-shot-tools {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.theater-project-detail-page .seedance-shot-tools button {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 7px;
  color: rgba(148, 163, 184, 0.9);
  background: rgba(8, 13, 24, 0.48);
  cursor: pointer;
}

.theater-project-detail-page .seedance-shot-tools button:hover:not(:disabled) {
  color: #f8fafc;
  border-color: rgba(167, 139, 250, 0.42);
  background: rgba(139, 92, 246, 0.12);
}

.theater-project-detail-page .seedance-shot-tools button:disabled {
  opacity: 0.42;
  cursor: default;
}

.theater-project-detail-page .seedance-shot-tools button svg {
  width: 14px;
  height: 14px;
}

.theater-project-detail-page .seedance-shot-tools .seedance-duration-btn {
  width: 62px;
  color: rgba(196, 181, 253, 0.92);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.theater-project-detail-page .seedance-delete-btn {
  opacity: 0;
  transition: opacity 0.16s ease, color 0.16s ease, background 0.16s ease;
}

.theater-project-detail-page .seedance-shot-item:hover .seedance-delete-btn,
.theater-project-detail-page .seedance-delete-btn:focus-visible {
  opacity: 1;
}

.theater-project-detail-page .seedance-delete-btn:hover:not(:disabled) {
  color: #fca5a5 !important;
  border-color: rgba(248, 113, 113, 0.3) !important;
  background: rgba(127, 29, 29, 0.14) !important;
}

.theater-project-detail-page .seedance-prompt-shell {
  padding: 18px 20px 20px;
  background: rgba(8, 13, 24, 0.24);
}

.theater-project-detail-page .seedance-prompt-shell.is-editing {
  background: rgba(8, 13, 24, 0.46);
}

.theater-project-detail-page .seedance-prompt-view {
  width: 100%;
  min-height: 154px;
  max-height: 320px;
  display: block;
  overflow: auto;
  padding: 0;
  border: 0;
  color: rgba(201, 211, 225, 0.86);
  background: transparent;
  text-align: left;
  cursor: text;
}

.theater-project-detail-page .seedance-prompt-view:disabled {
  cursor: default;
}

.theater-project-detail-page .seedance-prompt-view > span {
  display: block;
  margin-bottom: 9px;
  color: rgba(148, 163, 184, 0.6);
  font-size: 11px;
  line-height: 1;
}

.theater-project-detail-page .seedance-prompt-view p {
  margin: 0;
  color: inherit;
  font-size: 13px;
  line-height: 1.78;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  letter-spacing: 0;
}

.theater-project-detail-page .seedance-prompt-shell .shot-prompt-textarea {
  min-height: 240px;
  padding: 12px;
  border: 1px solid rgba(167, 139, 250, 0.38);
  border-radius: 7px;
  background: rgba(2, 6, 23, 0.36);
}

.theater-project-detail-page .seedance-edit-fields {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 12px;
  padding: 0 20px 18px;
  background: rgba(8, 13, 24, 0.46);
}

.theater-project-detail-page .seedance-edit-fields label {
  min-width: 0;
  display: grid;
  gap: 6px;
  color: rgba(148, 163, 184, 0.78);
  font-size: 11px;
}

.theater-project-detail-page .seedance-edit-fields input {
  width: 100%;
  height: 34px;
  padding: 0 10px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 7px;
  outline: 0;
  color: #e7edf5;
  background: rgba(2, 6, 23, 0.38);
}

.theater-project-detail-page .seedance-edit-fields input:focus {
  border-color: rgba(167, 139, 250, 0.5);
}

.theater-project-detail-page .seedance-asset-section {
  padding: 18px 20px;
  border-top: 1px solid rgba(148, 163, 184, 0.1);
}

.theater-project-detail-page .seedance-asset-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.theater-project-detail-page .seedance-asset-toolbar > button {
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 11px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 7px;
  color: rgba(203, 213, 225, 0.9);
  background: rgba(15, 23, 42, 0.56);
  font-size: 12px;
  cursor: pointer;
}

.theater-project-detail-page .seedance-asset-toolbar > button:hover:not(:disabled) {
  border-color: rgba(167, 139, 250, 0.42);
  background: rgba(139, 92, 246, 0.1);
}

.theater-project-detail-page .seedance-asset-toolbar > button svg {
  width: 13px;
  height: 13px;
}

.theater-project-detail-page .seedance-asset-toolbar > small {
  min-width: 0;
  overflow: hidden;
  color: rgba(100, 116, 139, 0.9);
  font-size: 11px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.theater-project-detail-page .seedance-asset-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 13px;
}

.theater-project-detail-page .seedance-asset-list.is-empty > span {
  color: rgba(100, 116, 139, 0.84);
  font-size: 12px;
  line-height: 1.5;
}

.theater-project-detail-page .storyboard-asset-chip {
  position: relative;
  min-width: 0;
  max-width: min(100%, 300px);
  display: inline-flex;
  align-items: stretch;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 7px;
  background: rgba(15, 23, 42, 0.54);
}

.theater-project-detail-page .storyboard-asset-chip.is-ready {
  border-color: rgba(45, 212, 191, 0.24);
  background: rgba(20, 184, 166, 0.08);
}

.theater-project-detail-page .storyboard-asset-chip.is-generating {
  border-color: rgba(96, 165, 250, 0.26);
  background: rgba(59, 130, 246, 0.08);
}

.theater-project-detail-page .storyboard-asset-chip.is-missing {
  border-style: dashed;
  border-color: rgba(251, 191, 36, 0.26);
}

.theater-project-detail-page .storyboard-asset-chip-main {
  min-width: 0;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  padding: 0 28px 0 9px;
  border: 0;
  color: rgba(203, 213, 225, 0.9);
  background: transparent;
  cursor: pointer;
}

.theater-project-detail-page .storyboard-asset-chip-main > svg {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
}

.theater-project-detail-page .storyboard-asset-chip.role .storyboard-asset-chip-main > svg {
  color: #60a5fa;
}

.theater-project-detail-page .storyboard-asset-chip.scene .storyboard-asset-chip-main > svg {
  color: #2dd4bf;
}

.theater-project-detail-page .storyboard-asset-chip.prop .storyboard-asset-chip-main > svg {
  color: #fcd34d;
}

.theater-project-detail-page .storyboard-asset-chip-main > span {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.theater-project-detail-page .storyboard-asset-chip-main strong {
  min-width: 0;
  overflow: hidden;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.theater-project-detail-page .storyboard-asset-chip-main small {
  flex: 0 0 auto;
  color: rgba(100, 116, 139, 0.9);
  font-size: 10px;
  line-height: 1;
}

.theater-project-detail-page .storyboard-asset-chip.is-ready .storyboard-asset-chip-main small {
  color: #5eead4;
}

.theater-project-detail-page .storyboard-asset-chip.is-generating .storyboard-asset-chip-main small {
  color: #93c5fd;
}

.theater-project-detail-page .storyboard-asset-chip-remove {
  position: absolute;
  top: 50%;
  right: 5px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #fca5a5;
  background: rgba(127, 29, 29, 0.24);
  opacity: 0;
  cursor: pointer;
  transform: translateY(-50%) scale(0.82);
  transition: opacity 0.16s ease, transform 0.16s ease, background 0.16s ease;
}

.theater-project-detail-page .storyboard-asset-chip:hover .storyboard-asset-chip-remove,
.theater-project-detail-page .storyboard-asset-chip-remove:focus-visible {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

.theater-project-detail-page .storyboard-asset-chip-remove:hover {
  background: rgba(127, 29, 29, 0.42);
}

.theater-project-detail-page .storyboard-asset-chip-remove svg {
  width: 11px;
  height: 11px;
}

.theater-project-detail-page .seedance-shot-footer {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 20px;
  border-top: 1px solid rgba(148, 163, 184, 0.1);
  background: rgba(8, 13, 24, 0.28);
}

.theater-project-detail-page .seedance-shot-footer > span {
  color: rgba(100, 116, 139, 0.9);
  font-size: 11px;
}

.theater-project-detail-page .seedance-shot-footer > div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.theater-project-detail-page .seedance-shot-footer button {
  height: 32px;
  min-width: 76px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 12px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 600;
}

.theater-project-detail-page .seedance-shot-footer button:disabled {
  opacity: 0.38;
  cursor: default;
}

.theater-project-detail-page .seedance-shot-footer svg {
  width: 13px;
  height: 13px;
}

.theater-project-detail-page .empty-shot {
  min-height: 0;
  flex: 1;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  color: var(--theater-text-soft);
  text-align: center;
}

.theater-project-detail-page .empty-shot > span svg {
  width: 58px;
  height: 58px;
  opacity: 0.5;
}

.theater-project-detail-page .empty-shot strong {
  color: var(--theater-text-strong);
}

.theater-project-detail-page .empty-shot-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.theater-project-detail-page .empty-shot-actions button,
.theater-project-detail-page .filtered-empty-shot button {
  height: 34px;
  padding: 0 16px;
  border: 1px solid rgba(162, 118, 255, 0.3);
  border-radius: 9px;
  color: var(--theater-text-strong);
  background: rgba(162, 118, 255, 0.1);
  cursor: pointer;
}

.storyboard-dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 7300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  color: #c9d3e1;
  background: rgba(2, 6, 23, 0.62);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.storyboard-dialog-card {
  width: min(440px, 100%);
  overflow: hidden;
  border: 1px solid rgba(162, 118, 255, 0.3);
  border-radius: 26px;
  color: #c9d3e1;
  background: radial-gradient(circle at 18% 0%, rgba(127, 184, 212, 0.1), transparent 34%), linear-gradient(180deg, rgba(18, 27, 43, 0.98), rgba(8, 15, 28, 0.98));
  box-shadow: 0 30px 90px rgba(2, 6, 23, 0.42);
}

.storyboard-export-dialog-card {
  width: min(680px, 100%);
}

.storyboard-dialog-body.storyboard-export-body {
  display: grid;
  gap: 16px;
  padding-top: 22px;
}

.storyboard-export-toolbar,
.storyboard-export-toolbar-left {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.storyboard-export-toolbar {
  justify-content: space-between;
  gap: 12px;
}

.storyboard-export-toolbar-left {
  flex-wrap: wrap;
}

.storyboard-export-select-all,
.storyboard-export-episode {
  border: 1px solid rgba(148, 163, 184, 0.18);
  color: #c9d3e1;
  background: rgba(15, 23, 42, 0.42);
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease, transform 0.12s ease;
}

.storyboard-export-select-all {
  height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
}

.storyboard-export-select-all.active,
.storyboard-export-episode.selected {
  color: #e7edf5;
  border-color: rgba(162, 118, 255, 0.52);
  background: rgba(162, 118, 255, 0.14);
}

.storyboard-export-select-all:hover:not(:disabled),
.storyboard-export-episode:hover {
  border-color: rgba(188, 157, 255, 0.52);
  background: rgba(162, 118, 255, 0.16);
  transform: translateY(-1px);
}

.storyboard-export-count {
  color: rgba(148, 163, 184, 0.82);
  font-size: 13px;
  font-weight: 600;
}

.storyboard-export-loading {
  min-height: 156px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  border: 1px dashed rgba(148, 163, 184, 0.24);
  border-radius: 14px;
  color: #c9d3e1;
  background: rgba(15, 23, 42, 0.28);
}

.storyboard-export-grid {
  max-height: min(360px, 52vh);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 10px;
  overflow: auto;
  padding: 2px 4px 4px 0;
}

.storyboard-export-grid::-webkit-scrollbar {
  width: 6px;
}

.storyboard-export-grid::-webkit-scrollbar-track {
  background: transparent;
}

.storyboard-export-grid::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.18);
}

.storyboard-export-episode {
  position: relative;
  min-width: 0;
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border-radius: 12px;
}

.storyboard-export-episode input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.storyboard-export-episode strong {
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.storyboard-export-check {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid rgba(148, 163, 184, 0.34);
  border-radius: 6px;
  color: #f8fafc;
  background: rgba(15, 23, 42, 0.48);
  font-size: 12px;
  line-height: 1;
}

.storyboard-export-select-all.active .storyboard-export-check,
.storyboard-export-episode.selected .storyboard-export-check {
  border-color: rgba(196, 181, 253, 0.76);
  background: linear-gradient(180deg, #a276ff, #7c3aed);
}

.storyboard-export-note {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 12px;
  color: #c9d3e1;
  background: rgba(148, 163, 184, 0.07);
  font-size: 13px;
  line-height: 1.65;
}

.storyboard-export-blocker {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(2, 6, 23, 0.72);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  pointer-events: auto;
}

.storyboard-export-progress-card {
  width: min(420px, 100%);
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 28px;
  border: 1px solid rgba(162, 118, 255, 0.32);
  border-radius: 22px;
  color: #c9d3e1;
  text-align: center;
  background: radial-gradient(circle at 50% 0%, rgba(162, 118, 255, 0.18), transparent 38%), linear-gradient(180deg, rgba(18, 27, 43, 0.98), rgba(8, 15, 28, 0.98));
  box-shadow: 0 30px 90px rgba(2, 6, 23, 0.46);
}

.storyboard-export-progress-card strong {
  color: #e7edf5;
  font-size: 18px;
  font-weight: 800;
}

.storyboard-export-progress-card p {
  margin: 0;
  color: rgba(148, 163, 184, 0.82);
  font-size: 13px;
  line-height: 1.7;
}

.storyboard-export-progress-card small {
  color: rgba(148, 163, 184, 0.82);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.storyboard-export-progress-track {
  width: 100%;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.16);
}

.storyboard-export-progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7c3aed, #22d3ee);
  transition: width 0.18s ease;
}

.storyboard-export-blocker.theme-light {
  background: rgba(15, 23, 42, 0.34);
}

.storyboard-export-blocker.theme-light .storyboard-export-progress-card {
  color: #475569;
  border-color: rgba(220, 38, 38, 0.2);
  background: radial-gradient(circle at 50% 0%, rgba(248, 113, 113, 0.14), transparent 38%), rgba(255, 255, 255, 0.98);
  box-shadow: 0 30px 80px rgba(45, 64, 96, 0.18);
}

.storyboard-import-dialog-card {
  width: min(1480px, calc(100vw - 32px));
  height: min(920px, calc(100vh - 32px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  border-radius: 22px;
}

.storyboard-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 24px 26px 0;
}

.storyboard-dialog-eyebrow {
  color: #a276ff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.storyboard-dialog-head h2 {
  margin: 8px 0 0;
  color: #e7edf5;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: 0;
}

.storyboard-dialog-close {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 8px;
  color: rgba(203, 213, 225, 0.78);
  background: transparent;
  cursor: pointer;
}

.storyboard-dialog-close:hover {
  color: #f8fafc;
  background: rgba(255, 255, 255, 0.08);
}

.storyboard-dialog-close svg {
  width: 18px;
  height: 18px;
}

.storyboard-dialog-body,
.storyboard-import-body {
  min-height: 0;
  display: flex;
  padding: 20px 26px 0;
}

.storyboard-import-layout {
  min-width: 0;
  min-height: 0;
  flex: 1;
  display: grid;
  grid-template-columns: minmax(380px, 0.42fr) minmax(0, 1fr);
  gap: 16px;
}

.storyboard-import-source-panel,
.storyboard-import-preview-panel {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.13);
  border-radius: 16px;
  background: rgba(15, 23, 42, 0.28);
}

.storyboard-import-preview-panel {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.34), rgba(8, 13, 24, 0.28)), rgba(15, 23, 42, 0.2);
}

.storyboard-import-toolbar,
.storyboard-import-preview-head {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  background: rgba(15, 23, 42, 0.38);
}

.storyboard-import-toolbar strong,
.storyboard-import-preview-head strong {
  color: #e7edf5;
}

.storyboard-import-toolbar span,
.storyboard-import-preview-head > div:first-child span {
  display: block;
  margin-top: 3px;
  color: rgba(148, 163, 184, 0.82);
  font-size: 12px;
  line-height: 1.45;
}

.storyboard-import-toolbar-actions {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
}

.storyboard-import-toolbar-actions button,
.storyboard-import-upload button {
  height: 34px;
  padding: 0 13px;
  border: 1px solid rgba(162, 118, 255, 0.28);
  border-radius: 10px;
  color: #e7edf5;
  background: rgba(162, 118, 255, 0.1);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.storyboard-import-editor {
  min-height: 0;
  flex: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
  padding: 14px;
}

.storyboard-import-upload {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(148, 163, 184, 0.82);
  font-size: 13px;
}

.storyboard-import-upload input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.storyboard-import-upload span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.storyboard-import-textarea {
  width: 100%;
  min-height: 0;
  height: 100%;
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 14px;
  outline: 0;
  resize: none;
  color: #e7edf5;
  background: rgba(2, 6, 23, 0.34);
  font: 13px/1.65 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

.storyboard-import-textarea:focus {
  border-color: rgba(162, 118, 255, 0.5);
  box-shadow: 0 0 0 3px rgba(162, 118, 255, 0.12);
}

.storyboard-import-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.storyboard-import-summary span {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 999px;
  color: #c9d3e1;
  background: rgba(148, 163, 184, 0.08);
  font-size: 12px;
  font-weight: 700;
}

.storyboard-import-shot-list {
  min-height: 0;
  flex: 1;
  overflow: auto;
  padding: 14px 12px 18px 14px;
}

.storyboard-import-shot-list .shot-timeline-item {
  margin-bottom: 14px;
}

.storyboard-import-shot-list .shot-card {
  padding: 18px;
}

.storyboard-import-shot-list .shot-card-main {
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 16px;
}

.storyboard-import-error,
.storyboard-import-warnings {
  margin: 12px 14px 0;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.5;
}

.storyboard-import-error {
  border: 1px solid rgba(248, 113, 113, 0.34);
  color: #fecaca;
  background: rgba(127, 29, 29, 0.16);
}

.storyboard-import-warnings {
  max-height: 132px;
  display: grid;
  gap: 4px;
  overflow: auto;
  border: 1px solid rgba(251, 191, 36, 0.28);
  color: #fde68a;
  background: rgba(120, 53, 15, 0.14);
}

.storyboard-import-warnings strong {
  color: #e7edf5;
}

.storyboard-import-preview-empty {
  min-height: 0;
  flex: 1;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  color: rgba(148, 163, 184, 0.74);
  text-align: center;
}

.storyboard-import-preview-empty strong {
  color: #e7edf5;
}

.storyboard-dialog-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 18px 26px 24px;
}

.storyboard-import-actions {
  justify-content: space-between;
}

.storyboard-dialog-actions > div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.storyboard-import-action-note,
.storyboard-dialog-actions > span {
  color: rgba(148, 163, 184, 0.78);
  font-size: 13px;
}

.storyboard-dialog-cancel,
.storyboard-dialog-confirm {
  min-width: 82px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.storyboard-dialog-cancel {
  border: 1px solid rgba(148, 163, 184, 0.2);
  color: #c9d3e1;
  background: rgba(148, 163, 184, 0.08);
}

.storyboard-dialog-confirm {
  border: 1px solid rgba(162, 118, 255, 0.5);
  color: #fff;
  background: linear-gradient(135deg, #a276ff, #6d5ee8);
  box-shadow: 0 10px 24px rgba(88, 62, 180, 0.24);
}

.storyboard-dialog-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.episode-dialog-card {
  width: min(520px, calc(100vw - 32px));
  border-radius: 12px;
  background: #111827;
}

.episode-dialog-body {
  display: grid;
  gap: 16px;
  padding-top: 24px;
}

.episode-dialog-body p {
  margin: 0;
  color: rgba(203, 213, 225, 0.82);
  font-size: 14px;
  line-height: 1.7;
}

.episode-dialog-body p strong {
  color: #f8fafc;
}

.episode-dialog-summary {
  min-height: 64px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid rgba(162, 118, 255, 0.2);
  border-radius: 8px;
  background: rgba(162, 118, 255, 0.08);
}

.episode-dialog-summary strong {
  color: #c4b5fd;
  font-size: 24px;
  line-height: 1;
}

.episode-dialog-summary span,
.episode-dialog-note {
  color: rgba(148, 163, 184, 0.82);
  font-size: 13px;
}

.episode-dialog-note.danger {
  padding: 12px 14px;
  border: 1px solid rgba(248, 113, 113, 0.24);
  border-radius: 8px;
  color: #fecaca;
  background: rgba(127, 29, 29, 0.14);
}

.episode-insert-field {
  display: grid;
  gap: 8px;
}

.episode-insert-field > span {
  color: #e2e8f0;
  font-size: 13px;
  font-weight: 700;
}

.episode-insert-field select {
  width: 100%;
  height: 42px;
  padding: 0 38px 0 12px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 8px;
  outline: 0;
  color: #e5e7eb;
  background: #0b1220;
  font: inherit;
}

.episode-insert-field select:focus {
  border-color: rgba(162, 118, 255, 0.64);
  box-shadow: 0 0 0 3px rgba(162, 118, 255, 0.12);
}

.episode-dialog-actions {
  justify-content: space-between;
  border-top: 1px solid rgba(148, 163, 184, 0.12);
  margin-top: 22px;
  padding-top: 18px;
}

.episode-dialog-discard,
.episode-dialog-delete {
  min-width: 92px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.episode-dialog-discard {
  border: 1px solid rgba(251, 191, 36, 0.28);
  color: #fde68a;
  background: rgba(120, 53, 15, 0.14);
}

.episode-dialog-delete {
  border: 1px solid rgba(248, 113, 113, 0.34);
  color: #fff;
  background: #b91c1c;
}

.storyboard-preview-dialog {
  width: min(940px, calc(100vw - 40px));
  max-height: min(860px, calc(100vh - 40px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.storyboard-generation-dialog {
  width: min(920px, calc(100vw - 40px));
  max-height: min(820px, calc(100vh - 40px));
  display: flex;
  flex-direction: column;
}

.storyboard-generation-workbench-overlay {
  position: fixed;
  inset: 0;
  z-index: 7350;
  display: grid;
  place-items: center;
  padding: 32px;
  color: #cbd5e1;
  background: rgba(0, 0, 0, 0.75);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.storyboard-generation-workbench {
  position: relative;
  box-sizing: border-box;
  width: min(94vw, 1840px);
  height: min(88vh, 960px);
  min-width: min(1040px, calc(100vw - 32px));
  min-height: min(680px, calc(100vh - 32px));
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background: #111520;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
}

.storyboard-generation-workbench-close {
  position: absolute;
  z-index: 8;
  top: 18px;
  right: 18px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 7px;
  color: rgba(203, 213, 225, 0.74);
  background: transparent;
  cursor: pointer;
}

.storyboard-generation-workbench-close:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.07);
}

.storyboard-generation-workbench-close svg {
  width: 19px;
  height: 19px;
}

.storyboard-generation-workbench-layout {
  height: 100%;
  display: grid;
  grid-template-columns: clamp(500px, 42vw, 760px) minmax(0, 1fr);
  align-items: stretch;
}

.storyboard-generation-workbench-left {
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto auto auto minmax(230px, 1fr) auto auto;
  gap: 10px;
  overflow: hidden;
  padding: 22px 26px;
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  background: #151a26;
}

.storyboard-generation-workbench-left > header {
  min-height: 34px;
  display: flex;
  align-items: center;
}

.storyboard-generation-workbench-left > header h2 {
  margin: 0;
  color: #eef2f7;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: 0;
}

.storyboard-generation-top-row {
  min-height: 38px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 128px 118px;
  gap: 12px;
  align-items: center;
}

.storyboard-generation-top-row > input,
.storyboard-generation-top-row > label {
  min-width: 0;
  min-height: 38px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 9px;
  color: #e2e8f0;
  background: rgba(15, 23, 42, 0.72);
}

.storyboard-generation-top-row > input {
  padding: 8px 12px;
  outline: 0;
  font-size: 13px;
  font-size: 14px;
  font-weight: 600;
}

.storyboard-generation-top-row > label {
  display: flex;
  align-items: center;
  padding-left: 10px;
}

.storyboard-generation-top-row > label > svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  color: rgba(203, 213, 225, 0.82);
}

.storyboard-generation-top-row select,
.storyboard-generation-continuity select,
.storyboard-generation-model-submit select {
  width: 100%;
  height: 100%;
  min-width: 0;
  padding: 0 28px 0 9px;
  border: 0;
  outline: 0;
  color: #e2e8f0;
  background: transparent;
  font-size: 13px;
  appearance: none;
}

.storyboard-generation-select {
  position: relative;
  overflow: hidden;
  transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.storyboard-generation-select:hover {
  border-color: rgba(172, 131, 255, 0.44);
  background: rgba(30, 41, 59, 0.78);
}

.storyboard-generation-select:focus-within {
  border-color: rgba(172, 131, 255, 0.72);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.12), 0 8px 22px rgba(2, 6, 23, 0.22);
}

.storyboard-generation-select > svg:last-child {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  margin-right: 9px;
  color: #9aa5b8;
  pointer-events: none;
}

.storyboard-generation-select.model {
  min-width: 0;
  height: 34px;
  display: flex;
  align-items: center;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 7px;
  background: rgba(15, 23, 42, 0.78);
}

.storyboard-generation-select.model > svg:first-child {
  width: 14px;
  height: 14px;
  margin-left: 10px;
  color: #a78bfa;
}

.storyboard-generation-dropdown {
  position: relative;
  min-width: 0;
}

.storyboard-generation-top-row > .storyboard-generation-dropdown {
  min-height: 38px;
}

.storyboard-generation-dropdown-trigger {
  width: 100%;
  height: 38px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 8px;
  color: #e5e9f2;
  background: rgba(15, 23, 42, 0.8);
  cursor: pointer;
  transition: border-color 0.16s ease, color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.storyboard-generation-dropdown-trigger:hover {
  border-color: rgba(167, 139, 250, 0.55);
  color: #fff;
  background: rgba(30, 41, 59, 0.92);
}

.storyboard-generation-dropdown.is-open .storyboard-generation-dropdown-trigger {
  border-color: rgba(167, 139, 250, 0.82);
  background: rgba(55, 38, 88, 0.76);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.13);
}

.storyboard-generation-dropdown-trigger:disabled {
  opacity: 0.5;
  cursor: default;
}

.storyboard-generation-dropdown-trigger > svg {
  width: 15px;
  height: 15px;
  color: #a78bfa;
}

.storyboard-generation-dropdown-trigger > svg:last-child {
  color: #8f9aae;
  transition: transform 0.16s ease;
}

.storyboard-generation-dropdown.is-open .storyboard-generation-dropdown-trigger > svg:last-child {
  transform: rotate(180deg);
}

.storyboard-generation-dropdown-trigger > span {
  min-width: 0;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0;
}

.storyboard-generation-dropdown-panel {
  position: absolute;
  z-index: 40;
  top: calc(100% + 7px);
  right: 0;
  left: 0;
  min-width: max(100%, 156px);
  max-height: 252px;
  display: grid;
  gap: 3px;
  overflow: auto;
  padding: 6px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 8px;
  background: #111725;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.46), 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
  scrollbar-width: thin;
  scrollbar-color: #596276 transparent;
}

.storyboard-generation-dropdown.placement-up .storyboard-generation-dropdown-panel {
  top: auto;
  bottom: calc(100% + 7px);
  min-width: max(100%, 260px);
}

.storyboard-generation-dropdown-option {
  position: relative;
  width: 100%;
  min-height: 36px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16px;
  align-items: center;
  gap: 8px;
  padding: 7px 10px 7px 14px;
  border: 1px solid transparent;
  border-radius: 6px;
  color: #c7cfdd;
  background: transparent;
  cursor: pointer;
}

.storyboard-generation-dropdown-option:hover {
  color: #fff;
  background: rgba(124, 88, 190, 0.23);
}

.storyboard-generation-dropdown-option.is-active {
  border-color: rgba(167, 139, 250, 0.25);
  color: #f7f3ff;
  background: rgba(124, 58, 237, 0.3);
}

.storyboard-generation-dropdown-option > span {
  min-width: 0;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0;
}

.storyboard-generation-dropdown-option > i {
  width: 7px;
  height: 7px;
  justify-self: center;
  border-radius: 50%;
  background: transparent;
  box-shadow: 0 0 0 3px transparent;
}

.storyboard-generation-dropdown-option.is-active > i {
  background: #c4a7ff;
  box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.16);
}

.storyboard-generation-model-submit > .storyboard-generation-dropdown .storyboard-generation-dropdown-trigger {
  height: 34px;
}

.storyboard-generation-fields .storyboard-generation-dropdown-trigger {
  height: 40px;
}

.storyboard-generation-resource-panel {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 9px 11px 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  background: rgba(15, 18, 26, 0.44);
}

.storyboard-generation-resource-panel > header {
  min-height: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.storyboard-generation-resource-panel > header strong {
  color: #e5e7eb;
  font-size: 12px;
  font-weight: 700;
}

.storyboard-generation-resource-panel > header small {
  overflow: hidden;
  color: rgba(148, 163, 184, 0.72);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.storyboard-generation-reference-strip {
  min-height: 54px;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding: 0;
}

.storyboard-generation-reference-add,
.storyboard-generation-reference-thumb {
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px dashed rgba(148, 163, 184, 0.22);
  border-radius: 8px;
  color: rgba(203, 213, 225, 0.78);
  background: rgba(15, 23, 42, 0.64);
}

.storyboard-generation-reference-add {
  align-content: center;
  gap: 2px;
  cursor: pointer;
}

.storyboard-generation-reference-add input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.storyboard-generation-reference-add svg {
  width: 18px;
  height: 18px;
}

.storyboard-generation-reference-add small {
  font-size: 10px;
}

.storyboard-generation-reference-thumb {
  border-style: solid;
}

.storyboard-generation-reference-thumb.blocked {
  border-color: rgba(248, 113, 113, 0.45);
}

.storyboard-generation-reference-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.storyboard-generation-reference-thumb > span {
  position: absolute;
  right: 3px;
  bottom: 3px;
  left: 3px;
  overflow: hidden;
  padding: 2px 3px;
  border-radius: 4px;
  color: #fff;
  background: rgba(2, 6, 23, 0.76);
  font-size: 9px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.storyboard-generation-reference-thumb > b {
  position: absolute;
  top: 3px;
  left: 3px;
  padding: 1px 4px;
  border-radius: 4px;
  color: #fff;
  background: rgba(37, 99, 235, 0.86);
  font-size: 8px;
  font-weight: 700;
  line-height: 1.4;
}

.storyboard-generation-reference-thumb.type-scene > b {
  background: rgba(5, 150, 105, 0.88);
}

.storyboard-generation-reference-thumb.type-prop > b {
  background: rgba(217, 119, 6, 0.9);
}

.storyboard-generation-reference-thumb > button {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: rgba(15, 23, 42, 0.82);
}

.storyboard-generation-reference-thumb > button svg {
  width: 10px;
  height: 10px;
}

.storyboard-generation-prompt-panel {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 12px;
  background: rgba(8, 13, 24, 0.42);
}

.storyboard-generation-prompt-panel > header {
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 12px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.storyboard-generation-prompt-panel > header > div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.storyboard-generation-prompt-panel header strong,
.storyboard-generation-bottom-row header strong {
  color: #e5e7eb;
  font-size: 13px;
}

.storyboard-generation-prompt-panel header small,
.storyboard-generation-bottom-row header small {
  color: rgba(148, 163, 184, 0.72);
  font-size: 10px;
}

.storyboard-generation-prompt-panel header small.is-error {
  color: #fca5a5;
}

.storyboard-generation-optimize {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.storyboard-generation-optimize input,
.storyboard-generation-continuity .compact-switch input,
.storyboard-generation-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.storyboard-generation-optimize i,
.storyboard-generation-continuity .compact-switch i,
.storyboard-generation-switch i {
  width: 34px;
  height: 20px;
  position: relative;
  border-radius: 10px;
  background: rgba(100, 116, 139, 0.58);
}

.storyboard-generation-optimize i::after,
.storyboard-generation-continuity .compact-switch i::after,
.storyboard-generation-switch i::after {
  content: "";
  width: 14px;
  height: 14px;
  position: absolute;
  top: 3px;
  left: 3px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.16s ease;
}

.storyboard-generation-optimize input:checked + i,
.storyboard-generation-continuity .compact-switch input:checked + i,
.storyboard-generation-switch input:checked + i {
  background: #536ea8;
}

.storyboard-generation-optimize input:checked + i::after,
.storyboard-generation-continuity .compact-switch input:checked + i::after,
.storyboard-generation-switch input:checked + i::after {
  transform: translateX(14px);
}

.storyboard-generation-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.storyboard-generation-previous-tail {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 11px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 9px;
  color: #cbd5e1;
  background: rgba(8, 13, 24, 0.34);
  font-size: 12px;
  cursor: pointer;
}

.storyboard-generation-previous-tail.is-disabled {
  opacity: 0.46;
  cursor: not-allowed;
}

.storyboard-generation-return-tail {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(203, 213, 225, 0.78);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
}

.storyboard-generation-return-tail .storyboard-generation-switch i {
  width: 30px;
  height: 18px;
}

.storyboard-generation-return-tail .storyboard-generation-switch i::after {
  width: 12px;
  height: 12px;
}

.storyboard-generation-return-tail .storyboard-generation-switch input:checked + i::after {
  transform: translateX(12px);
}

.storyboard-generation-prompt-grid {
  flex: 1;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 12px;
  padding: 0 12px 12px;
  overflow: hidden;
}

.storyboard-generation-prompt-grid > label {
  min-width: 0;
  min-height: 0;
  position: relative;
  display: grid;
  grid-template-rows: 38px minmax(0, 1fr);
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 10px;
  background: rgba(8, 13, 24, 0.34);
}

.storyboard-generation-prompt-grid > label + label {
  border-left: 1px solid rgba(148, 163, 184, 0.12);
}

.storyboard-generation-prompt-grid > label > span {
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid rgba(148, 163, 184, 0.1);
  color: #cbd5e1;
  font-size: 12px;
  font-weight: 700;
}

.storyboard-generation-prompt-grid textarea {
  width: 100%;
  min-height: 0;
  padding: 14px;
  overflow: auto;
  border: 0;
  outline: 0;
  resize: none;
  color: rgba(226, 232, 240, 0.9);
  background: transparent;
  font: 12px/1.75 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

.storyboard-generation-prompt-grid > label > small {
  position: absolute;
  right: 10px;
  bottom: 8px;
  color: rgba(148, 163, 184, 0.62);
  font-size: 10px;
}

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

.storyboard-generation-continuity > label:not(.compact-switch) {
  height: 38px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 4px;
  padding-left: 8px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 7px;
  background: rgba(8, 13, 24, 0.42);
}

.storyboard-generation-continuity > label > span {
  color: rgba(148, 163, 184, 0.82);
  font-size: 10px;
  white-space: nowrap;
}

.storyboard-generation-continuity .compact-switch {
  min-width: 0;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 7px;
  background: rgba(8, 13, 24, 0.42);
  cursor: pointer;
}

.storyboard-generation-continuity .compact-switch > span {
  overflow: hidden;
  color: #cbd5e1;
  font-size: 11px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.storyboard-generation-continuity .compact-switch i {
  width: 28px;
  height: 16px;
}

.storyboard-generation-continuity .compact-switch i::after {
  width: 10px;
  height: 10px;
}

.storyboard-generation-continuity .compact-switch input:checked + i::after {
  transform: translateX(12px);
}

.storyboard-generation-continuity .compact-switch.is-disabled {
  opacity: 0.46;
  cursor: not-allowed;
}

.storyboard-generation-bottom-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  flex: 0 0 82px;
  min-height: 82px;
}

.storyboard-generation-bottom-row > section {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 12px;
  background: rgba(8, 13, 24, 0.42);
}

.storyboard-generation-bottom-row header {
  min-height: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.storyboard-generation-voice-empty {
  height: 34px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  border: 1px dashed rgba(148, 163, 184, 0.15);
  border-radius: 7px;
  color: rgba(148, 163, 184, 0.72);
  font-size: 11px;
}

.storyboard-generation-voice-list {
  height: 34px;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
}

.storyboard-generation-voice-list label {
  position: relative;
  flex: 0 0 auto;
  cursor: pointer;
}

.storyboard-generation-voice-list input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.storyboard-generation-voice-list span {
  height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 8px;
  border: 1px solid rgba(148, 163, 184, 0.15);
  border-radius: 7px;
  color: rgba(203, 213, 225, 0.74);
  background: rgba(15, 23, 42, 0.58);
  font-size: 10px;
}

.storyboard-generation-voice-list span svg {
  width: 12px;
  height: 12px;
}

.storyboard-generation-voice-list input:checked + span {
  border-color: rgba(139, 92, 246, 0.72);
  color: #f5f3ff;
  background: rgba(109, 40, 217, 0.25);
  box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.12) inset;
}

.storyboard-generation-model-submit {
  height: 34px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 76px;
  gap: 8px;
}

.storyboard-generation-model-submit select {
  border: 0;
  border-radius: 0;
  background-color: transparent;
}

.storyboard-generation-model-submit button {
  border: 1px solid rgba(162, 118, 255, 0.4);
  border-radius: 7px;
  color: #fff;
  background: rgba(124, 58, 237, 0.58);
  font-weight: 700;
}

.storyboard-generation-model-submit button:disabled {
  opacity: 0.42;
}

.storyboard-generation-model-submit button.is-running,
.storyboard-generation-model-submit button.is-running:disabled {
  border-color: rgba(154, 101, 255, 0.72);
  color: #9d6cff;
  background: rgba(74, 39, 125, 0.16);
  box-shadow: inset 0 0 0 1px rgba(124, 58, 237, 0.1);
  opacity: 1;
}

.storyboard-generation-workbench-right {
  min-width: 0;
  min-height: 0;
  --finalized-tile-width: 360px;
  --finalized-tile-height: 202px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  overflow-y: auto;
  padding: 28px;
  background: #0f121a;
}

.storyboard-generation-result-section > header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.storyboard-generation-material-pager {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.storyboard-generation-material-pager button {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 7px;
  color: #cbd5e1;
  background: rgba(15, 23, 42, 0.72);
}

.storyboard-generation-material-pager button:hover:not(:disabled) {
  border-color: rgba(162, 118, 255, 0.58);
  color: #d8b4fe;
  background: rgba(76, 29, 149, 0.4);
}

.storyboard-generation-material-pager button:disabled {
  opacity: 0.34;
}

.storyboard-generation-material-pager button svg {
  width: 13px;
  height: 13px;
  transform: none;
}

.storyboard-generation-material-pager span {
  min-width: 30px;
  color: #94a3b8;
  font-size: 11px;
  text-align: center;
}

.storyboard-generation-result-section > header svg {
  width: 12px;
  height: 12px;
  transform: none;
}

.storyboard-generation-result-section h3 {
  margin: 0;
  color: #e5e7eb;
  font-size: 14px;
  letter-spacing: 0;
}

.storyboard-generation-final-empty {
  width: calc((100% - 16px) / 2);
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  border: 1px dashed rgba(148, 163, 184, 0.18);
  border-radius: 14px;
  color: rgba(148, 163, 184, 0.62);
  background: rgba(8, 13, 24, 0.36);
}

.storyboard-generation-final-empty svg,
.storyboard-generation-drafts-empty svg {
  width: 30px;
  height: 30px;
}

.storyboard-generation-result-section video,
.storyboard-generation-draft-grid video {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  border-radius: 14px;
  background: #171b29;
}

.storyboard-generation-final-grid,
.storyboard-generation-draft-grid,
.storyboard-generation-tail-frame-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

.storyboard-generation-tail-frame-grid {
  align-content: start;
}

.storyboard-generation-result-tile {
  min-width: 0;
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.13);
  border-radius: 14px;
  color: #e2e8f0;
  background: #171b29;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
}

.storyboard-generation-result-tile.is-processing {
  position: relative;
  background:
    linear-gradient(118deg, rgba(83, 88, 112, 0.46), rgba(38, 43, 62, 0.72)),
    #171b28;
}

.storyboard-generation-processing-badge {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  padding: 5px 10px;
  border-radius: 999px;
  color: #eef2ff;
  background: rgba(15, 23, 42, 0.82);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.storyboard-generation-result-tile[role="button"] {
  cursor: pointer;
}

.storyboard-generation-result-tile[role="button"]:focus-visible {
  outline: 2px solid rgba(162, 118, 255, 0.75);
  outline-offset: 2px;
}

.storyboard-generation-result-media {
  width: 100%;
  height: 100%;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.storyboard-generation-result-media > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  background: #171b29;
}

.storyboard-generation-play-mark {
  width: 52px;
  height: 52px;
  position: absolute;
  inset: 50% auto auto 50%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  color: #fff;
  background: rgba(20, 24, 38, 0.78);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.32);
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.storyboard-generation-play-mark svg {
  width: 19px;
  height: 19px;
}

.storyboard-generation-result-tile:hover .storyboard-generation-play-mark {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.04);
}

.storyboard-generation-result-tile.is-draft .storyboard-generation-play-mark {
  opacity: 1;
}

.storyboard-generation-result-actions,
.storyboard-generation-last-frame-actions {
  position: absolute;
  right: 8px;
  top: 8px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.storyboard-generation-result-tile:hover .storyboard-generation-result-actions,
.storyboard-generation-result-tile:hover .storyboard-generation-last-frame-actions,
.storyboard-generation-result-actions:focus-within,
.storyboard-generation-last-frame-actions:focus-within {
  opacity: 1;
  transform: translateY(0);
}

.storyboard-generation-result-actions.is-visible {
  opacity: 1;
  transform: none;
}

.storyboard-generation-result-actions button,
.storyboard-generation-result-hd,
.storyboard-generation-last-frame-actions button {
  min-width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  color: #f8fafc;
  background: rgba(2, 6, 23, 0.78);
  backdrop-filter: blur(8px);
}

.storyboard-generation-result-actions button,
.storyboard-generation-last-frame-actions button {
  width: 34px;
  min-width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
}

.storyboard-generation-result-tile.is-last-frame .storyboard-generation-result-badge {
  inset: auto 8px 8px auto;
}

.storyboard-generation-result-actions button[aria-label="已转存永久"] {
  cursor: default;
  opacity: 0.62;
}

.storyboard-generation-result-actions button:hover:not(:disabled),
.storyboard-generation-result-hd:hover:not(:disabled),
.storyboard-generation-last-frame-actions button:hover:not(:disabled) {
  border-color: rgba(162, 118, 255, 0.65);
  color: #d8b4fe;
  background: rgba(76, 29, 149, 0.72);
}

.storyboard-generation-result-actions button:disabled,
.storyboard-generation-result-hd:disabled,
.storyboard-generation-last-frame-actions button:disabled {
  opacity: 0.45;
}

.storyboard-generation-result-actions button svg,
.storyboard-generation-last-frame-actions button svg {
  width: 14px;
  height: 14px;
}

.storyboard-generation-hd-icon,
.storyboard-generation-result-hd {
  font-size: 10px;
  font-weight: 800;
}

.storyboard-generation-result-hd {
  position: absolute;
  right: 8px;
  top: 8px;
  z-index: 2;
}

.storyboard-generation-result-expiry,
.storyboard-generation-result-badge {
  position: absolute;
  z-index: 2;
  padding: 4px 7px;
  border-radius: 6px;
  color: #e2e8f0;
  background: rgba(2, 6, 23, 0.76);
  font-size: 10px;
  line-height: 1;
  backdrop-filter: blur(8px);
}

.storyboard-generation-result-expiry {
  right: 8px;
  bottom: 8px;
}

.storyboard-generation-result-badge {
  left: 8px;
  top: 8px;
}

.storyboard-generation-result-badge.is-approved {
  color: #86efac;
  background: rgba(6, 78, 59, 0.78);
}

.storyboard-generation-result-badge.is-pending {
  color: #fde68a;
  background: rgba(120, 53, 15, 0.78);
}

.storyboard-generation-result-badge.is-failed,
.storyboard-generation-result-badge.is-missing {
  color: #fecaca;
  background: rgba(127, 29, 29, 0.78);
}

.storyboard-generation-last-frame-empty,
.storyboard-generation-result-loading {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  color: rgba(148, 163, 184, 0.72);
}

.storyboard-generation-last-frame-empty svg {
  width: 28px;
  height: 28px;
}

.storyboard-generation-result-loading strong {
  color: #cbd5e1;
  font-size: 12px;
}

.storyboard-generation-result-loading span {
  font-size: 10px;
}

.storyboard-generation-last-frame-actions button span {
  font-size: 10px;
  white-space: nowrap;
}

.storyboard-generation-result-section.draft {
  min-height: 0;
}

.storyboard-generation-drafts-empty {
  width: calc((100% - 16px) / 2);
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  border: 1px dashed rgba(148, 163, 184, 0.18);
  border-radius: 14px;
  color: rgba(148, 163, 184, 0.64);
  background: rgba(8, 13, 24, 0.36);
}

.storyboard-generation-drafts-empty p {
  margin: 0;
  font-size: 12px;
}

.storyboard-generation-draft-grid {
  align-content: start;
}

.storyboard-generation-result-section.last-frame {
  padding-bottom: 20px;
}

.storyboard-tail-frame-overlay {
  --tf-overlay: rgba(2, 6, 23, 0.78);
  --tf-panel: #0f172a;
  --tf-panel-soft: #111827;
  --tf-border: rgba(148, 163, 184, 0.18);
  --tf-text: #94a3b8;
  --tf-strong: #f8fafc;
  --tf-accent: #7c3aed;
  position: fixed;
  inset: 0;
  z-index: 100320;
  display: grid;
  place-items: center;
  color: var(--tf-text);
  background: var(--tf-overlay);
  backdrop-filter: blur(8px);
}

.storyboard-tail-frame-overlay.is-light {
  --tf-overlay: rgba(15, 23, 42, 0.28);
  --tf-panel: #fff;
  --tf-panel-soft: #f8fafc;
  --tf-border: rgba(100, 116, 139, 0.24);
  --tf-text: #64748b;
  --tf-strong: #172033;
  --tf-accent: #2563eb;
}

.storyboard-tail-frame-dialog {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) 136px auto;
  overflow: hidden;
  border: 0;
  background: var(--tf-panel);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.46);
}

.storyboard-tail-frame-head {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--tf-border);
}

.storyboard-tail-frame-head > div:first-child {
  min-width: 0;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: baseline;
  gap: 10px;
}

.storyboard-tail-frame-head > div:first-child > span {
  color: #a78bfa;
  font-size: 10px;
  font-weight: 800;
}

.storyboard-tail-frame-head h2 {
  margin: 0;
  color: var(--tf-strong);
  font-size: 16px;
  letter-spacing: 0;
}

.storyboard-tail-frame-head small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.storyboard-tail-frame-head-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.storyboard-tail-frame-head-actions button {
  min-width: 88px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 14px;
  border: 1px solid var(--tf-border);
  border-radius: 9px;
  color: #cbd5e1;
  background: rgba(15, 23, 42, 0.88);
  font-size: 13px;
  font-weight: 800;
}

.storyboard-tail-frame-overlay.is-light .storyboard-tail-frame-head-actions button {
  color: #334155;
  background: #f8fafc;
}

.storyboard-tail-frame-head-actions button.primary {
  border-color: rgba(167, 139, 250, 0.5);
  color: #fff;
  background: var(--tf-accent);
}

.storyboard-tail-frame-head-actions button.hd {
  border-color: rgba(56, 189, 248, 0.28);
  color: #bae6fd;
  background: rgba(12, 74, 110, 0.44);
}

.storyboard-tail-frame-head-actions button.icon {
  min-width: 34px;
  width: 34px;
  padding: 0;
  border-radius: 50%;
}

.storyboard-tail-frame-head-actions button.icon svg {
  width: 16px;
  height: 16px;
}

.storyboard-tail-frame-head-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.52;
}

.storyboard-tail-frame-preview {
  min-width: 0;
  min-height: 0;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 18px 24px;
  background: linear-gradient(90deg, rgba(15, 23, 42, 0.96), rgba(30, 41, 59, 0.86), rgba(15, 23, 42, 0.96));
}

.storyboard-tail-frame-overlay.is-light .storyboard-tail-frame-preview {
  background: linear-gradient(90deg, #f8fafc, #eef2f7, #f8fafc);
}

.storyboard-tail-frame-preview > img {
  max-width: 100%;
  width: auto;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 10px;
  background: #020617;
  box-shadow: 0 18px 46px rgba(2, 6, 23, 0.38);
}

.storyboard-tail-frame-preview > span {
  position: absolute;
  top: 30px;
  right: 36px;
  min-width: 54px;
  padding: 7px 10px;
  border: 1px solid rgba(226, 232, 240, 0.26);
  border-radius: 999px;
  color: #f8fafc;
  background: rgba(2, 6, 23, 0.68);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
  backdrop-filter: blur(12px);
}

.storyboard-tail-frame-state {
  min-width: min(520px, calc(100vw - 48px));
  min-height: 180px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  padding: 24px;
  border: 1px dashed var(--tf-border);
  border-radius: 12px;
  text-align: center;
}

.storyboard-tail-frame-state svg {
  width: 30px;
  height: 30px;
}

.storyboard-tail-frame-state strong {
  color: var(--tf-strong);
}

.storyboard-tail-frame-state.is-error {
  border-color: rgba(248, 113, 113, 0.3);
  color: #fecaca;
  background: rgba(127, 29, 29, 0.18);
}

.storyboard-tail-frame-state button {
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid rgba(248, 113, 113, 0.32);
  border-radius: 8px;
  color: #fff;
  background: rgba(127, 29, 29, 0.48);
}

.storyboard-tail-frame-timeline-wrap {
  min-width: 0;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 38px;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-top: 1px solid var(--tf-border);
  border-bottom: 1px solid var(--tf-border);
  background: var(--tf-panel-soft);
}

.storyboard-tail-frame-timeline {
  min-width: 0;
  height: 108px;
  display: grid;
  grid-template-columns: repeat(24, minmax(0, 1fr));
  overflow: hidden;
  padding: 10px 12px 12px;
  border: 1px solid var(--tf-border);
  border-radius: 12px;
  background: rgba(2, 6, 23, 0.78);
  user-select: none;
}

.storyboard-tail-frame-timeline:focus-visible {
  outline: 0;
  border-color: rgba(216, 180, 254, 0.96);
  box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.24);
}

.storyboard-tail-frame-thumb {
  min-width: 0;
  height: 100%;
  position: relative;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-right: 1px solid rgba(15, 23, 42, 0.9);
  border-radius: 0;
  background: #020617;
  line-height: 0;
  transform: scale(1);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.storyboard-tail-frame-thumb:first-child { border-radius: 8px 0 0 8px; }
.storyboard-tail-frame-thumb:last-child { border-right: 0; border-radius: 0 8px 8px 0; }

.storyboard-tail-frame-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.storyboard-tail-frame-thumb.selected {
  z-index: 3;
  transform: scale(1.1) translateY(-1px);
  box-shadow: 0 0 0 2px rgba(216, 180, 254, 0.96), 0 8px 18px rgba(167, 139, 250, 0.34);
}

.storyboard-tail-frame-thumb.selected::before {
  content: "";
  width: 20px;
  height: 3px;
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 4;
  border-radius: 999px;
  background: #d8b4fe;
  box-shadow: 0 0 12px #d8b4fe;
  transform: translateX(-50%);
}

.storyboard-tail-frame-step {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--tf-border);
  border-radius: 50%;
  color: #cbd5e1;
  background: rgba(15, 23, 42, 0.88);
}

.storyboard-tail-frame-step svg {
  width: 16px;
  height: 16px;
}

.storyboard-tail-frame-step:disabled {
  opacity: 0.35;
}

.storyboard-tail-frame-foot {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 20px;
  color: var(--tf-text);
  font-size: 12px;
}

.storyboard-tail-frame-foot strong {
  color: var(--tf-strong);
}

@media (max-width: 720px) {
  .storyboard-tail-frame-dialog { grid-template-rows: auto minmax(0, 1fr) 118px auto; }
  .storyboard-tail-frame-head { align-items: flex-start; padding: 12px; }
  .storyboard-tail-frame-head > div:first-child { grid-template-columns: 1fr; gap: 2px; }
  .storyboard-tail-frame-head-actions { gap: 6px; }
  .storyboard-tail-frame-head-actions button { min-width: 64px; height: 34px; padding: 0 9px; font-size: 11px; }
  .storyboard-tail-frame-head-actions button.hd { display: none; }
  .storyboard-tail-frame-preview { padding: 12px; }
  .storyboard-tail-frame-timeline-wrap { grid-template-columns: minmax(0, 1fr); padding: 8px 10px; }
  .storyboard-tail-frame-step { display: none; }
  .storyboard-tail-frame-timeline { height: 96px; padding: 8px; overflow-x: auto; grid-template-columns: repeat(24, 36px); }
  .storyboard-tail-frame-foot { padding: 0 12px; }
}

/* v207: session-backed identity controls */
.current-identity-trigger {
  min-width: 0;
  max-width: 230px;
  height: 42px;
  justify-content: flex-start;
  gap: 9px;
  padding: 4px 12px 4px 4px;
  overflow: hidden;
}

.current-identity-trigger .team-avatar {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
}

.team-chip.current-identity-trigger > span.current-identity-copy,
.beta-team-trigger.current-identity-trigger > span.current-identity-copy,
.current-identity-copy {
  min-width: 0;
  width: auto;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1px;
  border-radius: 0;
  color: inherit;
  background: transparent;
  text-align: left;
  line-height: 1.1;
}

.current-identity-copy strong,
.current-identity-copy small {
  max-width: 164px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.current-identity-copy strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
}

.current-identity-copy small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
}

.current-identity-modal {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}

.current-identity-modal > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.current-identity-modal strong {
  color: var(--text);
  font-size: 14px;
}

.current-identity-modal small {
  color: var(--muted);
  font-size: 12px;
}

.storyboard-generation-body {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(300px, 0.92fr);
  gap: 18px;
  overflow: auto;
  padding: 20px 26px 10px;
}

.storyboard-generation-config,
.storyboard-generation-assets {
  min-width: 0;
  align-self: start;
  padding: 16px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 8px;
  background: rgba(2, 6, 23, 0.28);
}

.storyboard-generation-section-head {
  min-height: 42px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.storyboard-generation-section-head > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.storyboard-generation-section-head strong {
  color: #eef2f7;
  font-size: 14px;
}

.storyboard-generation-section-head span {
  color: rgba(148, 163, 184, 0.78);
  font-size: 12px;
  line-height: 1.45;
}

.storyboard-generation-provider,
.storyboard-generation-section-head > b {
  min-height: 26px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 9px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 6px;
  color: #cbd5e1;
  background: rgba(148, 163, 184, 0.07);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  white-space: nowrap;
}

.storyboard-generation-section-head > b.ready {
  border-color: rgba(52, 211, 153, 0.28);
  color: #86efac;
  background: rgba(6, 78, 59, 0.2);
}

.storyboard-generation-section-head > b.blocked {
  border-color: rgba(248, 113, 113, 0.3);
  color: #fca5a5;
  background: rgba(127, 29, 29, 0.16);
}

.storyboard-generation-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.storyboard-generation-fields label {
  min-width: 0;
  display: grid;
  gap: 7px;
}

.storyboard-generation-fields label.wide {
  grid-column: 1 / -1;
}

.storyboard-generation-fields label > span {
  color: rgba(203, 213, 225, 0.84);
  font-size: 12px;
  font-weight: 700;
}

.storyboard-generation-fields select {
  width: 100%;
  height: 40px;
  padding: 0 34px 0 12px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 7px;
  outline: 0;
  color: #e5e7eb;
  background: #111827;
  font-size: 13px;
  text-align: center;
  text-align-last: center;
}

.storyboard-generation-fields select:focus {
  border-color: rgba(162, 118, 255, 0.56);
  box-shadow: 0 0 0 3px rgba(162, 118, 255, 0.1);
}

.storyboard-generation-switches {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.storyboard-generation-switches label {
  min-height: 48px;
  display: block;
  cursor: pointer;
}

.storyboard-generation-switches input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.storyboard-generation-switches label > span {
  height: 100%;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: center;
  column-gap: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 7px;
  background: rgba(15, 23, 42, 0.52);
}

.storyboard-generation-switches i {
  grid-row: 1 / 3;
  align-self: center;
  width: 34px;
  height: 20px;
  position: relative;
  border-radius: 10px;
  background: rgba(100, 116, 139, 0.54);
}

.storyboard-generation-switches i::after {
  content: "";
  width: 14px;
  height: 14px;
  position: absolute;
  top: 3px;
  left: 3px;
  border-radius: 50%;
  background: #e5e7eb;
  transition: transform 0.16s ease;
}

.storyboard-generation-switches input:checked + span {
  border-color: rgba(162, 118, 255, 0.34);
  background: rgba(88, 62, 180, 0.11);
}

.storyboard-generation-switches input:checked + span i {
  background: #7c5ce2;
}

.storyboard-generation-switches input:checked + span i::after {
  transform: translateX(14px);
}

.storyboard-generation-switches b {
  color: #e5e7eb;
  font-size: 12px;
}

.storyboard-generation-switches small {
  overflow: hidden;
  color: rgba(148, 163, 184, 0.74);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.storyboard-generation-asset-list {
  display: grid;
  gap: 8px;
}

.storyboard-generation-asset-list article {
  min-height: 54px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 58px 58px;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 7px;
  background: rgba(15, 23, 42, 0.48);
}

.storyboard-generation-asset-list article.blocked {
  border-color: rgba(248, 113, 113, 0.25);
}

.storyboard-generation-asset-thumb {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 6px;
  color: rgba(148, 163, 184, 0.8);
  background: rgba(2, 6, 23, 0.68);
}

.storyboard-generation-asset-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.storyboard-generation-asset-thumb svg {
  width: 18px;
  height: 18px;
}

.storyboard-generation-asset-list article > div:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.storyboard-generation-asset-list article > div:nth-child(2) strong,
.storyboard-generation-asset-list article > div:nth-child(2) span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.storyboard-generation-asset-list article > div:nth-child(2) strong {
  color: #e5e7eb;
  font-size: 12px;
}

.storyboard-generation-asset-list article > div:nth-child(2) span {
  color: rgba(148, 163, 184, 0.72);
  font-size: 11px;
}

.storyboard-generation-asset-list article > span {
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.storyboard-generation-asset-list article > span.ok {
  color: #86efac;
  background: rgba(6, 78, 59, 0.24);
}

.storyboard-generation-asset-list article > span.bad {
  color: #fca5a5;
  background: rgba(127, 29, 29, 0.18);
}

.storyboard-generation-empty {
  min-height: 112px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 1px dashed rgba(148, 163, 184, 0.2);
  border-radius: 7px;
  color: rgba(148, 163, 184, 0.78);
}

.storyboard-generation-empty svg {
  width: 24px;
  height: 24px;
}

.storyboard-generation-empty div {
  display: grid;
  gap: 3px;
}

.storyboard-generation-empty strong {
  color: #dbe3ee;
  font-size: 13px;
}

.storyboard-generation-empty span {
  font-size: 11px;
}

.storyboard-generation-error {
  grid-column: 1 / -1;
  padding: 10px 12px;
  border: 1px solid rgba(248, 113, 113, 0.3);
  border-radius: 7px;
  color: #fecaca;
  background: rgba(127, 29, 29, 0.16);
  font-size: 12px;
}

.storyboard-generation-actions {
  flex: 0 0 auto;
  justify-content: space-between;
  padding-top: 14px;
}

.storyboard-generation-actions .mini-spinner {
  width: 14px;
  height: 14px;
}

.storyboard-hd-dialog {
  width: min(1080px, calc(100vw - 40px));
  max-height: min(74vh, 720px);
  display: flex;
  flex-direction: column;
  border-radius: 12px;
}

.storyboard-hd-dialog.is-single {
  width: min(440px, calc(100vw - 32px));
  min-height: 260px;
  position: relative;
  padding: 26px;
  border-radius: 12px;
}

.storyboard-hd-close {
  position: absolute;
  top: 14px;
  right: 14px;
}

.storyboard-hd-single-source {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: 0 34px 14px 0;
}

.storyboard-hd-single-source span {
  color: rgba(148, 163, 184, 0.72);
  font-size: 11px;
}

.storyboard-hd-single-source strong {
  overflow: hidden;
  color: #e5e7eb;
  font-size: 13px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.storyboard-hd-select-stack {
  display: grid;
  gap: 12px;
}

.storyboard-hd-select-stack select {
  width: 100%;
  height: 42px;
  padding: 0 36px 0 14px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 8px;
  outline: 0;
  color: #e5e7eb;
  background: #151922;
  font-size: 13px;
  font-weight: 500;
}

.storyboard-hd-select-stack select:hover,
.storyboard-hd-select-stack select:focus {
  border-color: rgba(162, 118, 255, 0.52);
  box-shadow: 0 0 0 3px rgba(162, 118, 255, 0.1);
}

.storyboard-hd-single-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 24px;
}

.storyboard-hd-secondary,
.storyboard-hd-primary {
  width: 82px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.storyboard-hd-secondary {
  border: 1px solid rgba(148, 163, 184, 0.2);
  color: #cbd5e1;
  background: rgba(148, 163, 184, 0.08);
}

.storyboard-hd-primary {
  width: 92px;
  border: 1px solid rgba(162, 118, 255, 0.48);
  color: #fff;
  background: #7657df;
  box-shadow: 0 8px 20px rgba(88, 62, 180, 0.24);
}

.storyboard-hd-secondary:disabled,
.storyboard-hd-primary:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.storyboard-hd-single-error {
  margin-top: 12px;
}

.storyboard-hd-dialog.is-batch {
  height: min(74vh, 720px);
  min-height: 520px;
}

.storyboard-hd-batch-body {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 20px;
  overflow: hidden;
  padding: 18px 24px 12px;
}

.storyboard-hd-batch-sources,
.storyboard-hd-batch-options {
  min-width: 0;
}

.storyboard-hd-batch-sources {
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.storyboard-hd-batch-summary,
.storyboard-hd-batch-options > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.storyboard-hd-batch-summary > div,
.storyboard-hd-batch-options > div:first-child {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.storyboard-hd-batch-summary strong,
.storyboard-hd-batch-options strong {
  color: #edf0f7;
  font-size: 14px;
  font-weight: 700;
}

.storyboard-hd-batch-summary span,
.storyboard-hd-batch-options span {
  color: rgba(148, 163, 184, 0.72);
  font-size: 11px;
}

.storyboard-hd-batch-summary > b {
  flex: 0 0 auto;
  color: #c4b5fd;
  font-size: 12px;
}

.storyboard-hd-batch-options {
  align-self: start;
  display: grid;
  gap: 18px;
  padding: 18px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 10px;
  background: rgba(7, 10, 18, 0.42);
}

.storyboard-hd-groups {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 14px;
  overflow: auto;
  margin-top: 14px;
  padding-right: 6px;
}

.storyboard-hd-group {
  display: grid;
  gap: 7px;
}

.storyboard-hd-group > header {
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px;
}

.storyboard-hd-group > header strong {
  color: #dbe3ee;
  font-size: 12px;
  font-weight: 700;
}

.storyboard-hd-group > header span {
  color: rgba(148, 163, 184, 0.72);
  font-size: 10px;
}

.storyboard-hd-group > div {
  display: grid;
  gap: 6px;
}

.storyboard-hd-row {
  min-height: 58px;
  display: grid;
  grid-template-columns: 24px 68px minmax(0, 1fr) 30px 64px;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 8px;
  background: rgba(15, 18, 28, 0.58);
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease;
}

.storyboard-hd-row:hover,
.storyboard-hd-row:focus-visible,
.storyboard-hd-row.selected {
  border-color: rgba(145, 105, 255, 0.5);
  outline: 0;
  background: rgba(105, 72, 210, 0.12);
}

.storyboard-hd-row.disabled {
  cursor: default;
  opacity: 0.68;
}

.storyboard-hd-row-check {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 5px;
  color: #fff;
  background: rgba(2, 6, 23, 0.42);
}

.storyboard-hd-row.selected .storyboard-hd-row-check {
  border-color: rgba(162, 118, 255, 0.48);
  background: #7657df;
}

.storyboard-hd-row-check svg {
  width: 12px;
  height: 12px;
}

.storyboard-hd-row-thumb {
  width: 68px;
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 6px;
  color: rgba(148, 163, 184, 0.78);
  background: #090c13;
}

.storyboard-hd-row-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.storyboard-hd-row-thumb svg {
  width: 18px;
  height: 18px;
}

.storyboard-hd-row-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.storyboard-hd-row-copy strong,
.storyboard-hd-row-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.storyboard-hd-row-copy strong {
  color: #e5e7eb;
  font-size: 12px;
}

.storyboard-hd-row-copy small {
  color: rgba(148, 163, 184, 0.72);
  font-size: 10px;
}

.storyboard-hd-preview-btn {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 7px;
  color: #cbd5e1;
  background: transparent;
  cursor: pointer;
}

.storyboard-hd-preview-btn:hover {
  color: #fff;
  background: rgba(148, 163, 184, 0.12);
}

.storyboard-hd-preview-btn svg {
  width: 15px;
  height: 15px;
}

.storyboard-hd-row-status {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 8px;
  border-radius: 6px;
  color: #cbd5e1;
  background: rgba(148, 163, 184, 0.1);
  font-size: 10px;
  white-space: nowrap;
}

.storyboard-hd-row.is-success .storyboard-hd-row-status { color: #86efac; background: rgba(22, 163, 74, 0.12); }
.storyboard-hd-row.is-running .storyboard-hd-row-status { color: #c4b5fd; background: rgba(124, 58, 237, 0.14); }
.storyboard-hd-row.is-failed .storyboard-hd-row-status { color: #fca5a5; background: rgba(220, 38, 38, 0.12); }

.storyboard-hd-row-status .mini-spinner {
  width: 11px;
  height: 11px;
}

.storyboard-hd-inline-preview {
  padding: 6px 10px 10px 112px;
}

.storyboard-hd-inline-preview video {
  display: block;
  width: min(100%, 420px);
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  background: #05070c;
  object-fit: contain;
}

.storyboard-hd-loading {
  flex: 1 1 auto;
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: rgba(148, 163, 184, 0.86);
  font-size: 12px;
}

.storyboard-hd-batch-error {
  flex: 0 0 auto;
  margin: 0 24px 10px;
}

.storyboard-hd-batch-actions {
  flex: 0 0 auto;
  justify-content: space-between;
  padding: 14px 24px 18px;
}

.storyboard-preview-body {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1fr);
  gap: 22px;
  overflow: auto;
  padding: 22px 26px 6px;
}

.storyboard-preview-media {
  min-height: 360px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 14px;
  color: rgba(148, 163, 184, 0.8);
  background: rgba(2, 6, 23, 0.4);
}

.storyboard-preview-media-wrap {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 10px;
}

.storyboard-preview-last-frame {
  min-height: 104px;
  display: grid;
  grid-template-columns: 124px minmax(0, 1fr);
  grid-template-areas:
    "thumb copy"
    "thumb actions";
  align-items: center;
  gap: 8px 12px;
  overflow: hidden;
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 8px;
  color: rgba(203, 213, 225, 0.82);
  background: rgba(2, 6, 23, 0.4);
  font-size: 12px;
  text-align: center;
}

.storyboard-preview-last-frame-thumb {
  grid-area: thumb;
  width: 124px;
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 6px;
  color: rgba(148, 163, 184, 0.72);
  background: #020617;
}

.storyboard-preview-last-frame-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.storyboard-preview-last-frame-thumb > span {
  display: grid;
  place-items: center;
  gap: 4px;
}

.storyboard-preview-last-frame-thumb svg {
  width: 20px;
  height: 20px;
}

.storyboard-preview-last-frame-thumb b {
  font-size: 10px;
}

.storyboard-preview-last-frame-copy {
  grid-area: copy;
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 4px;
}

.storyboard-preview-last-frame-copy strong {
  color: #e5e7eb;
  font-size: 12px;
}

.storyboard-preview-last-frame-copy small {
  width: 100%;
  overflow: hidden;
  color: #fca5a5;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.storyboard-preview-last-frame-status {
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  border-radius: 5px;
  color: #cbd5e1;
  background: rgba(148, 163, 184, 0.1);
  font-size: 10px;
  font-weight: 700;
}

.storyboard-preview-last-frame.is-approved .storyboard-preview-last-frame-status {
  color: #86efac;
  background: rgba(6, 78, 59, 0.24);
}

.storyboard-preview-last-frame.is-pending .storyboard-preview-last-frame-status {
  color: #bfdbfe;
  background: rgba(30, 64, 175, 0.22);
}

.storyboard-preview-last-frame.is-failed .storyboard-preview-last-frame-status {
  color: #fca5a5;
  background: rgba(127, 29, 29, 0.2);
}

.storyboard-preview-last-frame-actions {
  grid-area: actions;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
}

.storyboard-preview-last-frame-actions button {
  min-width: 96px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 9px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 6px;
  color: #dbe4f0;
  background: rgba(148, 163, 184, 0.08);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
}

.storyboard-preview-last-frame-actions button:hover:not(:disabled) {
  border-color: rgba(162, 118, 255, 0.46);
  background: rgba(88, 62, 180, 0.16);
}

.storyboard-preview-last-frame-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.52;
}

.storyboard-preview-last-frame-actions svg,
.storyboard-preview-last-frame-actions .mini-spinner {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
}

.storyboard-preview-dialog .storyboard-dialog-actions {
  flex: 0 0 auto;
  flex-wrap: wrap;
}

.storyboard-preview-dialog .storyboard-dialog-actions > div {
  flex-wrap: wrap;
  justify-content: center;
}

.storyboard-preview-media video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #020617;
}

.storyboard-preview-media svg {
  width: 54px;
  height: 54px;
}

.storyboard-preview-copy {
  min-width: 0;
  padding: 10px 0;
}

.storyboard-preview-copy > span {
  color: #a276ff;
  font-size: 13px;
  font-weight: 700;
}

.storyboard-preview-copy p {
  margin: 16px 0 0;
  color: #c9d3e1;
  font-size: 14px;
  line-height: 1.85;
  white-space: pre-wrap;
}

.storyboard-preview-results {
  margin-top: 16px;
}

.storyboard-preview-hd-status {
  min-height: 54px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 8px 10px;
  border: 1px solid rgba(96, 165, 250, 0.22);
  border-radius: 7px;
  background: rgba(30, 64, 175, 0.1);
}

.storyboard-preview-hd-status > span {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  color: #bfdbfe;
  background: rgba(37, 99, 235, 0.16);
}

.storyboard-preview-hd-status > span svg {
  width: 16px;
  height: 16px;
}

.storyboard-preview-hd-status > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.storyboard-preview-hd-status strong,
.storyboard-preview-hd-status small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.storyboard-preview-hd-status strong {
  color: #dbeafe;
  font-size: 12px;
}

.storyboard-preview-hd-status small {
  color: rgba(148, 163, 184, 0.76);
  font-size: 10px;
}

.storyboard-preview-hd-status > b {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 7px;
  border-radius: 5px;
  color: #bfdbfe;
  background: rgba(37, 99, 235, 0.16);
  font-size: 10px;
  white-space: nowrap;
}

.storyboard-preview-hd-status.is-failed {
  border-color: rgba(248, 113, 113, 0.26);
  background: rgba(127, 29, 29, 0.12);
}

.storyboard-preview-results > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.storyboard-preview-results > header strong {
  color: #e5e7eb;
  font-size: 12px;
}

.storyboard-preview-results > header span {
  color: rgba(148, 163, 184, 0.72);
  font-size: 11px;
}

.storyboard-preview-results > div {
  max-height: 148px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  overflow: auto;
}

.storyboard-preview-results button {
  min-width: 0;
  height: 52px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: center;
  column-gap: 8px;
  padding: 6px 9px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 7px;
  color: #cbd5e1;
  background: rgba(15, 23, 42, 0.48);
  text-align: left;
  cursor: pointer;
}

.storyboard-preview-results button:hover,
.storyboard-preview-results button.selected {
  border-color: rgba(162, 118, 255, 0.48);
  background: rgba(88, 62, 180, 0.14);
}

.storyboard-preview-results button.final {
  border-color: rgba(52, 211, 153, 0.26);
}

.storyboard-preview-results button > span {
  grid-row: 1 / 3;
  align-self: center;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 5px;
  color: #c4b5fd;
  background: rgba(162, 118, 255, 0.12);
}

.storyboard-preview-results button > span svg {
  width: 13px;
  height: 13px;
}

.storyboard-preview-results button b,
.storyboard-preview-results button small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.storyboard-preview-results button b {
  font-size: 11px;
}

.storyboard-preview-results button small {
  color: rgba(148, 163, 184, 0.72);
  font-size: 10px;
}

.storyboard-draft-delete {
  color: #fca5a5;
  border-color: rgba(248, 113, 113, 0.24);
  background: rgba(127, 29, 29, 0.12);
}

.storyboard-asset-picker {
  width: min(980px, calc(100vw - 40px));
}

.storyboard-asset-picker-body {
  max-height: min(620px, calc(100vh - 220px));
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  overflow: auto;
  padding: 22px 26px 4px;
}

.storyboard-asset-picker-body > section {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.13);
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.28);
}

.storyboard-asset-picker-body section > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.storyboard-asset-picker-body section > div {
  max-height: 440px;
  display: grid;
  gap: 7px;
  overflow: auto;
  padding: 10px;
}

.storyboard-asset-picker-body section > div > button {
  min-width: 0;
  min-height: 46px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #c9d3e1;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.storyboard-asset-picker-body section > div > button:hover,
.storyboard-asset-picker-body section > div > button.selected {
  border-color: rgba(162, 118, 255, 0.36);
  background: rgba(162, 118, 255, 0.12);
}

.storyboard-asset-picker-body section > div > button span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #a276ff;
  background: rgba(162, 118, 255, 0.1);
}

.storyboard-asset-picker-body section > div > button svg {
  width: 15px;
  height: 15px;
}

.storyboard-asset-picker-body section > div > button strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 1380px) {
  .theater-project-detail-page .shot-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 19px;
  }

  .theater-project-detail-page .shot-head-title .title-group {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .theater-project-detail-page .shot-actions {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 2px;
  }
}

/* v202: four-character BEITA CULTURE wordmark. */
.beita-login-stage-brand > div {
  width: 124px;
}

.beita-login-stage-brand .beita-wordmark-cn {
  width: 124px;
  font-size: 29px;
}

.beita-login-stage-brand .beita-wordmark-en {
  width: 124px;
  font-size: 13px;
}

@media (max-width: 720px) {
  .beita-login-stage-brand > div,
  .beita-login-stage-brand .beita-wordmark-cn,
  .beita-login-stage-brand .beita-wordmark-en {
    width: 104px;
  }
  .beita-login-stage-brand .beita-wordmark-cn {
    font-size: 24px;
  }
  .beita-login-stage-brand .beita-wordmark-en {
    font-size: 11px;
  }
}

/* v201: align the Chinese and English wordmark edges exactly. */
.beita-login-stage-brand .beita-wordmark-cn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 78px;
  color: #ffffff;
  font-size: 38px;
  font-weight: 900;
  line-height: 1;
}

.beita-login-stage-brand .beita-wordmark-cn i {
  display: block;
  flex: 0 0 auto;
  font-style: normal;
  line-height: 1;
}

@media (max-width: 720px) {
  .beita-login-stage-brand .beita-wordmark-cn {
    width: 64px;
    font-size: 31px;
  }
}

/* v200: final measured login wordmark proportions. */
.beita-login-stage-brand {
  align-items: center;
  min-height: 90px;
  gap: 20px;
}

.beita-login-stage-mark,
.beita-login-stage-mark img {
  width: 88px !important;
  height: 88px !important;
}

.beita-login-stage-brand > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 78px;
  min-height: 0;
  gap: 7px;
}

.beita-login-stage-brand strong {
  display: block;
  width: 78px;
  color: #ffffff;
  font-size: 38px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.beita-login-stage-brand .beita-wordmark-en {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 78px;
  color: #b7c1d3;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
}

@media (max-width: 720px) {
  .beita-login-stage-brand {
    min-height: 72px;
    gap: 15px;
  }
  .beita-login-stage-mark,
  .beita-login-stage-mark img {
    width: 70px !important;
    height: 70px !important;
  }
  .beita-login-stage-brand > div,
  .beita-login-stage-brand strong,
  .beita-login-stage-brand .beita-wordmark-en {
    width: 64px;
  }
  .beita-login-stage-brand strong {
    font-size: 31px;
  }
  .beita-login-stage-brand .beita-wordmark-en {
    font-size: 11px;
  }
}

/* v199: exact wordmark alignment instead of browser-dependent text justify. */
.beita-login-stage-brand {
  gap: 19px;
}

.beita-login-stage-mark,
.beita-login-stage-mark img {
  width: 84px !important;
  height: 84px !important;
}

.beita-login-stage-brand > div {
  width: 64px;
  min-height: 84px;
  gap: 0;
}

.beita-login-stage-brand strong {
  width: 64px;
  font-size: 31px;
}

.beita-login-stage-brand .beita-wordmark-en {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 64px;
  color: #b7c1d3;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  text-align: left;
}

.beita-login-stage-brand .beita-wordmark-en i {
  display: block;
  flex: 0 0 auto;
  font-style: normal;
  line-height: 1;
}

@media (max-width: 720px) {
  .beita-login-stage-mark,
  .beita-login-stage-mark img {
    width: 66px !important;
    height: 66px !important;
  }
  .beita-login-stage-brand > div {
    min-height: 66px;
  }
}

/* v198: login form stays light while the BEITA identity panel stays dark. */
.beita-login-page,
body[data-theme="light"] .beita-login-page {
  color: #172033;
  background: #ffffff;
}

.beita-login-page .beita-login-theme {
  display: none;
}

.beita-login-panel,
body[data-theme="light"] .beita-login-panel {
  color: #172033;
  background: transparent;
}

.beita-login-panel .beita-login-heading h1 {
  color: #172033;
}

.beita-login-panel .beita-login-heading p {
  color: #667085;
}

.beita-login-panel .beita-login-heading > span {
  color: #7041c7;
  border-color: rgba(112, 65, 199, 0.22);
  background: rgba(112, 65, 199, 0.055);
}

.beita-login-panel .beita-login-field > span,
body[data-theme="light"] .beita-login-panel .beita-login-field > span {
  color: #465269;
}

.beita-login-panel .beita-login-field > div,
body[data-theme="light"] .beita-login-panel .beita-login-field > div {
  color: #7b879a;
  border-color: rgba(82, 99, 128, 0.24);
  background: #ffffff;
}

.beita-login-panel .beita-login-field > div:hover {
  border-color: rgba(82, 99, 128, 0.42);
}

.beita-login-panel .beita-login-field > div:focus-within,
body[data-theme="light"] .beita-login-panel .beita-login-field > div:focus-within {
  color: #7041c7;
  border-color: #7c4cda;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(124, 76, 218, 0.1);
}

.beita-login-panel .beita-login-field input,
body[data-theme="light"] .beita-login-panel .beita-login-field input {
  color: #1e293b;
  background: transparent;
}

.beita-login-panel .beita-login-field > div > button:hover,
.beita-login-panel .beita-login-field > div > button:focus-visible {
  color: #4b5568;
  background: #f1f3f7;
}

.beita-login-panel .beita-login-options label > span {
  color: #667085;
}

.beita-login-panel .beita-login-options label > span::before {
  border-color: rgba(82, 99, 128, 0.4);
  background: #ffffff;
}

.beita-login-panel .beita-login-captcha,
.beita-login-panel .beita-login-captcha-retry,
body[data-theme="light"] .beita-login-panel .beita-login-captcha,
body[data-theme="light"] .beita-login-panel .beita-login-captcha-retry {
  color: #59667c;
  border-color: rgba(82, 99, 128, 0.22);
  background: #f8fafc;
}

.beita-login-panel .beita-login-captcha-options button,
body[data-theme="light"] .beita-login-panel .beita-login-captcha-options button {
  color: #354159;
  border-color: rgba(82, 99, 128, 0.2);
  background: #ffffff;
}

.beita-login-panel .beita-login-captcha-options button:hover,
.beita-login-panel .beita-login-captcha-options button:focus-visible {
  color: #5f35ae;
  border-color: #8b5cf6;
  background: #f7f4ff;
}

.beita-login-panel > footer {
  color: #98a2b3;
  border-top-color: rgba(82, 99, 128, 0.14);
}

@media (max-width: 720px) {
  .beita-login-page,
  body[data-theme="light"] .beita-login-page {
    background: #ffffff;
  }
}

/* v195: mainstream compact custom checkbox, isolated from text-input sizing. */
.beita-login-form .beita-login-options label {
  position: relative;
  min-height: 17px;
  gap: 0;
}

.beita-login-form .beita-login-options input[type="checkbox"] {
  position: absolute;
  width: 1px !important;
  min-width: 1px;
  height: 1px !important;
  min-height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.beita-login-form .beita-login-options label > span {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 17px;
  padding-left: 21px;
  color: #8e9aad;
  font-size: 11px;
  line-height: 17px;
}

.beita-login-form .beita-login-options label > span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 13px;
  height: 13px;
  border: 1px solid rgba(157, 172, 204, 0.42);
  border-radius: 3px;
  background: #0b101a;
}

.beita-login-form .beita-login-options label > span::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 5px;
  width: 6px;
  height: 3px;
  border-left: 1.5px solid #ffffff;
  border-bottom: 1.5px solid #ffffff;
  opacity: 0;
  transform: rotate(-45deg);
}

.beita-login-form .beita-login-options input[type="checkbox"]:checked + span::before {
  border-color: #8353e7;
  background: #8353e7;
}

.beita-login-form .beita-login-options input[type="checkbox"]:checked + span::after {
  opacity: 1;
}

.beita-login-form .beita-login-options input[type="checkbox"]:focus-visible + span::before {
  outline: 2px solid rgba(139, 92, 246, 0.28);
  outline-offset: 2px;
}

body[data-theme="light"] .beita-login-form .beita-login-options label > span::before {
  border-color: rgba(82, 99, 128, 0.38);
  background: #ffffff;
}

body[data-theme="light"] .beita-login-form .beita-login-options input[type="checkbox"]:checked + span::before {
  border-color: #7c4cda;
  background: #7c4cda;
}

/* v197: larger login brand with aligned Chinese and English wordmarks. */
.beita-login-stage-brand {
  gap: 17px;
}

.beita-login-stage-mark {
  width: 72px !important;
  height: 72px !important;
}

.beita-login-stage-mark img {
  width: 72px !important;
  height: 72px !important;
  object-fit: contain;
}

.beita-login-stage-brand > div {
  width: 60px;
  min-height: 72px;
  gap: 7px;
}

.beita-login-stage-brand strong {
  display: block;
  width: 60px;
  color: #ffffff;
  font-size: 29px;
  line-height: 1;
  white-space: nowrap;
}

.beita-login-stage-brand span {
  display: block;
  width: 60px;
  color: #b2bdcf;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  text-align: justify;
  text-align-last: justify;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .beita-login-stage-mark,
  .beita-login-stage-mark img {
    width: 58px !important;
    height: 58px !important;
  }
  .beita-login-stage-brand > div {
    min-height: 58px;
  }
}

/* v194: integrate the logo mark into the dark brand surface without a box. */
.beita-login-stage {
  isolation: isolate;
  background: #03060f;
}

.beita-login-stage-mark {
  width: 62px !important;
  height: 62px !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.beita-login-stage-mark img {
  width: 62px !important;
  height: 62px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  mix-blend-mode: normal;
}

.beita-login-stage-center {
  grid-template-columns: minmax(190px, 270px) minmax(220px, 1fr);
}

.beita-login-stage-center > img {
  width: min(270px, 100%);
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  mix-blend-mode: normal;
  clip-path: none;
}

.beita-login-stage-brand > div {
  min-height: 62px;
  justify-content: center;
}

.beita-login-stage-brand strong {
  font-size: 25px;
}

.beita-login-stage-brand span {
  font-size: 11px;
}

@media (max-width: 980px) {
  .beita-login-stage-center {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .beita-login-stage-center {
    grid-template-columns: 64px 1fr;
  }
  .beita-login-stage-center > img {
    width: 64px;
  }
}

/* v188: integrated brand art, AI motion and verified login controls */
.beita-login-stage-mark {
  width: 54px;
  height: 54px;
  overflow: visible;
  border: 0;
  background: transparent;
}

.beita-login-stage-mark img {
  width: 58px;
  height: 58px;
  border-radius: 0;
  object-fit: cover;
  mix-blend-mode: screen;
}

.beita-login-stage-brand {
  gap: 15px;
}

.beita-login-stage-brand > div {
  align-content: center;
  min-height: 54px;
  gap: 4px;
}

.beita-login-stage-brand strong {
  font-size: 23px;
  line-height: 1;
}

.beita-login-stage-brand span {
  color: #a1acc0;
  font-size: 11px;
  line-height: 1;
}

.beita-login-stage-center > img {
  border-radius: 0;
  box-shadow: none;
  mix-blend-mode: screen;
  animation: beita-logo-breathe 5.5s ease-in-out infinite;
}

.beita-login-stage-center {
  z-index: 2;
}

.beita-login-circuit {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.circuit-line {
  position: absolute;
  display: block;
  height: 1px;
  overflow: visible;
  background: rgba(141, 91, 238, 0.24);
  transform-origin: left center;
  animation: beita-circuit-line 4.8s ease-in-out infinite;
}

.circuit-line::before,
.circuit-line::after {
  content: "";
  position: absolute;
  top: -4px;
  width: 8px;
  height: 8px;
  border: 1px solid rgba(166, 118, 255, 0.42);
  border-radius: 1px;
  background: #070a12;
}

.circuit-line::before { left: 0; }
.circuit-line::after { right: 0; }

.circuit-line i {
  position: absolute;
  top: -2px;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 1px;
  background: #a56dff;
  box-shadow: 0 0 12px rgba(165, 109, 255, 0.6);
  animation: beita-circuit-node 3.4s linear infinite;
}

.circuit-line-a {
  top: 23%;
  left: 8%;
  width: 42%;
}

.circuit-line-b {
  top: 36%;
  right: 4%;
  width: 31%;
  animation-delay: -1.2s;
}

.circuit-line-c {
  bottom: 24%;
  left: 3%;
  width: 34%;
  animation-delay: -2.1s;
}

.circuit-line-d {
  right: 9%;
  bottom: 14%;
  width: 38%;
  animation-delay: -3s;
}

.circuit-line-b i,
.circuit-line-d i {
  animation-delay: -1.7s;
}

.beita-login-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 22px;
  margin-top: -4px;
}

.beita-login-options label {
  display: inline-flex;
  grid-template-columns: none;
  align-items: center;
  gap: 8px;
  color: #9aa5b8;
  font-size: 12px;
  cursor: pointer;
}

.beita-login-options input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: #8657e5;
}

.beita-login-captcha,
.beita-login-captcha-retry {
  width: 100%;
  min-height: 62px;
  padding: 12px 13px;
  border: 1px solid rgba(157, 172, 204, 0.22);
  border-radius: 7px;
  color: #b8c2d4;
  background: #090d16;
}

.beita-login-captcha > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.beita-login-captcha strong {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
}

.beita-login-captcha strong svg,
.beita-login-captcha > div:first-child > button svg {
  width: 15px;
  height: 15px;
}

.beita-login-captcha > div:first-child > button {
  display: grid;
  place-items: center;
  min-width: 28px;
  height: 26px;
  padding: 0 7px;
  border: 0;
  border-radius: 5px;
  color: #8f9bb0;
  font: inherit;
  font-size: 11px;
  background: transparent;
  cursor: pointer;
}

.beita-login-captcha-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 11px;
}

.beita-login-captcha-options button {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  border: 1px solid rgba(157, 172, 204, 0.2);
  border-radius: 6px;
  color: #dfe5f1;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  background: #101624;
  cursor: pointer;
}

.beita-login-captcha-options button:hover,
.beita-login-captcha-options button:focus-visible {
  border-color: #8b5cf6;
  color: #ffffff;
  background: #171c2c;
  outline: none;
  box-shadow: 0 0 16px rgba(139, 92, 246, 0.16);
}

.beita-login-captcha.is-verified {
  min-height: 50px;
  border-color: rgba(63, 232, 164, 0.34);
  color: #7ee9bd;
  background: rgba(63, 232, 164, 0.055);
}

.beita-login-captcha.is-loading {
  display: flex;
  align-items: center;
  min-height: 54px;
}

.captcha-spinner {
  width: 15px;
  height: 15px;
  border: 2px solid rgba(139, 92, 246, 0.22);
  border-top-color: #9b72f5;
  border-radius: 50%;
  animation: beita-auth-spin 0.8s linear infinite;
}

.beita-login-captcha-retry {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

body[data-theme="light"] .beita-login-captcha,
body[data-theme="light"] .beita-login-captcha-retry {
  color: #59667c;
  border-color: rgba(82, 99, 128, 0.22);
  background: #ffffff;
}

body[data-theme="light"] .beita-login-captcha-options button {
  color: #354159;
  border-color: rgba(82, 99, 128, 0.2);
  background: #f5f7fb;
}

@keyframes beita-logo-breathe {
  0%, 100% { transform: translateY(0); opacity: 0.92; }
  50% { transform: translateY(-7px); opacity: 1; }
}

@keyframes beita-circuit-line {
  0%, 100% { opacity: 0.3; transform: scaleX(0.72); }
  50% { opacity: 0.9; transform: scaleX(1); }
}

@keyframes beita-circuit-node {
  from { left: 0; opacity: 0; }
  12%, 88% { opacity: 1; }
  to { left: calc(100% - 5px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .beita-login-stage-center > img,
  .circuit-line,
  .circuit-line i,
  .captcha-spinner {
    animation: none;
  }
}

/* v189: keep the dark home header brand legible and expose sign-out. */
.home-shell .home-brand {
  color: #f4f7ff;
}

.home-shell .home-brand b {
  color: #c9b8ff;
}

.home-shell .home-logout {
  flex: 0 0 auto;
  margin-left: 0;
  color: #b7c1d4;
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(15, 23, 42, 0.62);
}

.home-shell .home-logout:hover,
.home-shell .home-logout:focus-visible {
  color: #ffffff;
  border-color: rgba(155, 111, 255, 0.58);
  outline: none;
  box-shadow: 0 0 18px rgba(139, 92, 246, 0.16);
}

.logout-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 94px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--soft);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  background: rgba(20, 25, 46, 0.78);
  cursor: pointer;
}

.logout-action svg {
  width: 16px;
  height: 16px;
}

.logout-action:hover,
.logout-action:focus-visible {
  color: #ffffff;
  border-color: rgba(155, 111, 255, 0.58);
  outline: none;
  box-shadow: 0 0 18px rgba(139, 92, 246, 0.16);
}

@media (max-width: 680px) {
  .logout-action {
    width: 38px;
    min-width: 38px;
    padding: 0;
  }
  .logout-action span {
    display: none;
  }
}

/* v192: compact remember-password checkbox. */
.beita-login-form .beita-login-options {
  min-height: 18px;
  margin-top: -7px;
}

.beita-login-form .beita-login-options label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 18px;
  color: #8e9aad;
  font-size: 11px;
  line-height: 18px;
}

.beita-login-form .beita-login-options input[type="checkbox"] {
  appearance: none;
  flex: 0 0 14px;
  width: 14px !important;
  min-width: 14px;
  max-width: 14px;
  height: 14px !important;
  min-height: 14px;
  max-height: 14px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(157, 172, 204, 0.4);
  border-radius: 3px;
  background: #0b101a;
  box-shadow: none;
  cursor: pointer;
}

.beita-login-form .beita-login-options input[type="checkbox"]:checked {
  border-color: #8b5cf6;
  background: #7c4cda;
  box-shadow: inset 0 0 0 3px #7c4cda, inset 0 0 0 4px #ffffff;
}

.beita-login-form .beita-login-options input[type="checkbox"]:focus-visible {
  outline: 2px solid rgba(139, 92, 246, 0.28);
  outline-offset: 2px;
}

body[data-theme="light"] .beita-login-form .beita-login-options input[type="checkbox"] {
  border-color: rgba(82, 99, 128, 0.38);
  background: #ffffff;
}

body[data-theme="light"] .beita-login-form .beita-login-options input[type="checkbox"]:checked {
  border-color: #7c4cda;
  background: #7c4cda;
}

/* v193: refined platform-style authentication form. */
.beita-login-panel {
  width: min(410px, calc(100% - 64px));
}

.beita-login-heading {
  padding-bottom: 28px;
}

.beita-login-heading > span {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border: 1px solid rgba(139, 92, 246, 0.26);
  border-radius: 5px;
  color: #b795ff;
  font-size: 10px;
  background: rgba(139, 92, 246, 0.07);
}

.beita-login-heading h1 {
  margin: 14px 0 8px;
  font-size: 31px;
}

.beita-login-heading p {
  font-size: 13px;
}

.beita-login-form {
  gap: 17px;
}

.beita-login-form .beita-login-field {
  display: grid;
  gap: 8px;
}

.beita-login-form .beita-login-field > span {
  color: #bac3d3;
  font-size: 11px;
  font-weight: 700;
}

.beita-login-field > div {
  display: flex;
  align-items: center;
  width: 100%;
  height: 46px;
  padding: 0 11px;
  border: 1px solid rgba(157, 172, 204, 0.23);
  border-radius: 7px;
  color: #758198;
  background: #090d16;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.beita-login-field > div:hover {
  border-color: rgba(157, 172, 204, 0.38);
}

.beita-login-field > div:focus-within {
  border-color: #8b5cf6;
  color: #a986ef;
  background: #0b0f1a;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.11);
}

.beita-login-field > div > svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}

.beita-login-form .beita-login-field input {
  flex: 1 1 auto;
  width: 0;
  height: 44px;
  min-width: 0;
  padding: 0 10px;
  border: 0;
  border-radius: 0;
  color: #f2f5fc;
  background: transparent;
  box-shadow: none;
}

.beita-login-form .beita-login-field input:hover,
.beita-login-form .beita-login-field input:focus {
  border: 0;
  box-shadow: none;
}

.beita-login-field > div > button {
  display: grid;
  place-items: center;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  color: #7f8a9f;
  background: transparent;
  cursor: pointer;
}

.beita-login-field > div > button:hover,
.beita-login-field > div > button:focus-visible {
  color: #d7deeb;
  background: rgba(148, 163, 184, 0.08);
  outline: none;
}

.beita-login-field > div > button svg {
  width: 16px;
  height: 16px;
}

.beita-login-captcha {
  min-height: 56px;
  padding: 10px 12px;
}

.beita-login-captcha-options {
  gap: 7px;
  margin-top: 9px;
}

.beita-login-captcha-options button {
  height: 31px;
  font-size: 12px;
}

.beita-login-submit {
  height: 46px;
  margin-top: 1px;
  font-size: 13px;
}

.beita-login-panel > footer {
  margin-top: 26px;
  padding-top: 17px;
}

body[data-theme="light"] .beita-login-field > div {
  color: #7b879a;
  border-color: rgba(82, 99, 128, 0.22);
  background: #ffffff;
}

body[data-theme="light"] .beita-login-field > div:focus-within {
  color: #7651c7;
  border-color: #7c4cda;
  background: #ffffff;
}

body[data-theme="light"] .beita-login-form .beita-login-field input {
  color: #1e293b;
  background: transparent;
}

body[data-theme="light"] .beita-login-form .beita-login-field > span {
  color: #465269;
}

@media (max-width: 720px) {
  .beita-login-panel {
    width: min(410px, 100%);
  }
}

@media (max-width: 1100px) {
  .theater-project-detail-page .episode-detail-panel {
    flex-direction: column;
    overflow: auto;
  }

  .theater-project-detail-page .script-sidebar,
  .theater-project-detail-page .script-sidebar.collapsed {
    height: 38vh;
    min-height: 280px;
    flex: 0 0 auto;
    border-right: 0;
    border-bottom: 1px solid var(--theater-line);
  }

  .theater-project-detail-page .script-content-wrapper {
    width: 100%;
  }

  .theater-project-detail-page .script-collapsed-tab {
    position: static;
    width: 100%;
    height: 54px;
    flex-direction: row;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 0;
  }

  .theater-project-detail-page .script-collapsed-tab span {
    writing-mode: horizontal-tb;
  }

  .storyboard-import-dialog-card {
    width: calc(100vw - 24px);
    height: calc(100vh - 24px);
  }

  .storyboard-import-layout {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(300px, 0.48fr) minmax(360px, 1fr);
  }
}

@media (max-width: 760px) {
  .storyboard-dialog-overlay {
    padding: 0;
  }

  .storyboard-import-dialog-card,
  .storyboard-preview-dialog,
  .storyboard-generation-dialog,
  .storyboard-hd-dialog,
  .storyboard-asset-picker {
    width: 100vw;
    height: 100vh;
    border-radius: 0;
  }

  .storyboard-generation-body {
    grid-template-columns: 1fr;
    padding: 16px 14px 8px;
  }

  .storyboard-hd-batch-body {
    grid-template-columns: 1fr;
    overflow: auto;
    padding: 16px 14px 8px;
  }

  .storyboard-hd-batch-options {
    width: 100%;
  }

  .storyboard-hd-dialog.is-single {
    width: calc(100vw - 24px);
    height: auto;
    min-height: 0;
    margin: auto;
    border-radius: 12px;
  }

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

  .storyboard-generation-fields label.wide {
    grid-column: auto;
  }

  .storyboard-generation-actions {
    align-items: stretch;
    flex-direction: column;
    padding: 12px 14px 16px;
  }

  .storyboard-generation-actions > div {
    width: 100%;
  }

  .storyboard-generation-actions button {
    flex: 1;
  }

  .theater-project-detail-page .shot-pane {
    padding: 16px 12px;
  }

  .theater-project-detail-page .shot-actions {
    align-items: flex-start;
    flex-direction: column;
    overflow: visible;
  }

  .theater-project-detail-page .shot-tool-group {
    max-width: 100%;
    overflow-x: auto;
  }

  .theater-project-detail-page .shot-tool-divider {
    display: none;
  }

  .theater-project-detail-page .shot-timeline-item,
  .storyboard-dialog-overlay .shot-timeline-item {
    grid-template-columns: 40px minmax(0, 1fr);
    padding-bottom: 24px;
  }

  .theater-project-detail-page .shot-card,
  .storyboard-dialog-overlay .shot-card {
    padding: 18px;
  }

  .theater-project-detail-page .seedance-shot-card {
    padding: 0;
  }

  .theater-project-detail-page .seedance-shot-head {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 16px;
  }

  .theater-project-detail-page .seedance-generate-btn {
    width: 100%;
  }

  .theater-project-detail-page .seedance-shot-tools {
    width: 100%;
    flex-wrap: wrap;
  }

  .theater-project-detail-page .seedance-delete-btn {
    opacity: 1;
  }

  .theater-project-detail-page .seedance-prompt-shell,
  .theater-project-detail-page .seedance-asset-section {
    padding-right: 16px;
    padding-left: 16px;
  }

  .theater-project-detail-page .seedance-edit-fields {
    grid-template-columns: 1fr;
    padding-right: 16px;
    padding-left: 16px;
  }

  .theater-project-detail-page .seedance-asset-toolbar,
  .theater-project-detail-page .seedance-shot-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .theater-project-detail-page .seedance-asset-toolbar > small {
    width: 100%;
    white-space: normal;
  }

  .theater-project-detail-page .seedance-shot-footer > div {
    width: 100%;
    justify-content: flex-end;
  }

  .theater-project-detail-page .shot-card-main,
  .storyboard-dialog-overlay .shot-card-main {
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 14px;
  }

  .theater-project-detail-page .shot-card-head,
  .storyboard-dialog-overlay .shot-card-head {
    flex-direction: column;
    gap: 12px;
  }

  .theater-project-detail-page .shot-head-tools,
  .storyboard-dialog-overlay .shot-head-tools {
    width: 100%;
    justify-content: space-between;
  }

  .theater-project-detail-page .shot-edit-grid,
  .storyboard-preview-body,
  .storyboard-asset-picker-body {
    grid-template-columns: 1fr;
  }

  .storyboard-dialog-head {
    padding: 18px 18px 0;
  }

  .storyboard-dialog-body,
  .storyboard-import-body,
  .storyboard-preview-body,
  .storyboard-asset-picker-body {
    padding-right: 18px;
    padding-left: 18px;
  }

  .storyboard-dialog-actions,
  .storyboard-import-actions {
    align-items: stretch;
    flex-direction: column;
    padding: 14px 18px 18px;
  }

  .storyboard-dialog-actions > div {
    justify-content: flex-end;
  }

  .storyboard-preview-last-frame {
    grid-template-columns: 112px minmax(0, 1fr);
  }

  .storyboard-preview-last-frame-thumb {
    width: 112px;
  }

  .storyboard-preview-dialog .storyboard-dialog-actions > div {
    justify-content: center;
  }
}

/* Storyboard split workflow and resumable task state */
.storyboard-resplit-note {
  margin-left: auto;
  color: rgba(148, 163, 184, 0.82);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

.workflow-prompt-modal.theme-light .storyboard-resplit-note {
  color: #64748b;
}

.theater-project-detail-page .storyboard-task-alert {
  min-height: 54px;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin: 12px 28px 0;
  padding: 10px 14px;
  border: 1px solid rgba(125, 91, 210, 0.28);
  border-radius: 8px;
  color: rgba(226, 232, 240, 0.94);
  background: rgba(125, 91, 210, 0.08);
}

.theater-project-detail-page .storyboard-task-alert > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.theater-project-detail-page .storyboard-task-alert strong,
.theater-project-detail-page .storyboard-task-alert small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.theater-project-detail-page .storyboard-task-alert strong {
  font-size: 13px;
}

.theater-project-detail-page .storyboard-task-alert small {
  color: rgba(148, 163, 184, 0.84);
  font-size: 12px;
}

.theater-project-detail-page .storyboard-task-alert > b {
  color: #c4b5fd;
  font-size: 13px;
}

.theater-project-detail-page .storyboard-task-alert.is-failed {
  grid-template-columns: minmax(0, 1fr) auto;
  border-color: rgba(248, 113, 113, 0.28);
  background: rgba(127, 29, 29, 0.12);
}

.theater-project-detail-page .storyboard-task-alert.is-failed button {
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 1px solid rgba(248, 113, 113, 0.28);
  border-radius: 7px;
  color: #fecaca;
  background: rgba(127, 29, 29, 0.18);
  cursor: pointer;
}

.theater-project-detail-page .storyboard-split-wait {
  min-width: 0;
  min-height: 460px;
  flex: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: clamp(32px, 5vh, 64px) clamp(24px, 5vw, 72px);
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 16px;
  background: rgba(17, 24, 39, 0.76);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.025);
}

.theater-project-detail-page .storyboard-split-wait-content {
  width: min(100%, 620px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.theater-project-detail-page .storyboard-split-loader {
  position: relative;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  margin-bottom: 24px;
  border: 1px solid rgba(167, 139, 250, 0.22);
  border-radius: 50%;
  background: rgba(124, 58, 237, 0.08);
  animation: storyboard-split-breathe 1.8s ease-in-out infinite;
}

.theater-project-detail-page .storyboard-split-loader::before,
.theater-project-detail-page .storyboard-split-loader::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.theater-project-detail-page .storyboard-split-loader::before {
  inset: 7px;
  border: 2px solid rgba(196, 181, 253, 0.18);
  border-top-color: #a78bfa;
  animation: storyboard-split-spin 0.9s linear infinite;
}

.theater-project-detail-page .storyboard-split-loader::after {
  inset: 17px;
  background: #8b5cf6;
  box-shadow: 0 0 16px rgba(139, 92, 246, 0.7);
}

.theater-project-detail-page .storyboard-split-wait-content > strong {
  color: #e7edf5;
  font-size: 16px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 0;
}

.theater-project-detail-page .storyboard-split-wait-content > p {
  margin: 10px 0 0;
  color: rgba(148, 163, 184, 0.78);
  font-size: 13px;
  line-height: 1.6;
}

.theater-project-detail-page .storyboard-split-progress {
  width: min(100%, 440px);
  height: 5px;
  margin-top: 28px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.12);
}

.theater-project-detail-page .storyboard-split-progress > i {
  width: var(--storyboard-split-progress, 0%);
  height: 100%;
  display: block;
  border-radius: inherit;
  background: #8b5cf6;
  box-shadow: 0 0 12px rgba(139, 92, 246, 0.45);
  transition: width 0.45s ease;
}

.theater-project-detail-page .storyboard-split-phase-row {
  width: min(100%, 440px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 10px;
  color: rgba(148, 163, 184, 0.82);
  font-size: 12px;
  line-height: 1.4;
}

.theater-project-detail-page .storyboard-split-phase-row b {
  flex: 0 0 auto;
  color: #c4b5fd;
  font: inherit;
  font-weight: 700;
}

.theater-project-detail-page .storyboard-split-steps {
  width: min(100%, 440px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.theater-project-detail-page .storyboard-split-steps li {
  position: relative;
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 8px;
  color: rgba(100, 116, 139, 0.86);
  font-size: 11px;
  line-height: 1.3;
}

.theater-project-detail-page .storyboard-split-steps li::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 0;
  width: 100%;
  height: 1px;
  background: rgba(100, 116, 139, 0.22);
}

.theater-project-detail-page .storyboard-split-steps li:first-child::before {
  left: 50%;
  width: 50%;
}

.theater-project-detail-page .storyboard-split-steps li:last-child::before {
  width: 50%;
}

.theater-project-detail-page .storyboard-split-steps li > i {
  position: relative;
  z-index: 1;
  width: 11px;
  height: 11px;
  border: 2px solid #334155;
  border-radius: 50%;
  background: #111827;
}

.theater-project-detail-page .storyboard-split-steps li.is-done,
.theater-project-detail-page .storyboard-split-steps li.is-active {
  color: rgba(203, 213, 225, 0.9);
}

.theater-project-detail-page .storyboard-split-steps li.is-done::before,
.theater-project-detail-page .storyboard-split-steps li.is-active::before {
  background: rgba(139, 92, 246, 0.54);
}

.theater-project-detail-page .storyboard-split-steps li.is-done > i {
  border-color: #2dd4bf;
  background: #2dd4bf;
}

.theater-project-detail-page .storyboard-split-steps li.is-active > i {
  border-color: #a78bfa;
  background: #8b5cf6;
  box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.16);
}

.theater-project-detail-page .storyboard-split-wait-content > small {
  max-width: 520px;
  margin-top: 24px;
  color: rgba(100, 116, 139, 0.88);
  font-size: 11px;
  line-height: 1.6;
}

.theater-project-detail-page .mini-spinner {
  width: 16px;
  height: 16px;
  display: inline-block;
  flex: 0 0 16px;
  border: 2px solid rgba(196, 181, 253, 0.28);
  border-top-color: #c4b5fd;
  border-radius: 50%;
  animation: storyboard-split-spin 0.82s linear infinite;
}

.theater-project-detail-page .shot-actions button:disabled,
.theater-project-detail-page .empty-shot-actions button:disabled {
  opacity: 0.46;
  cursor: not-allowed;
  box-shadow: none;
}

.theater-project-detail-page .shot-timeline-item.is-readonly .shot-card {
  border-color: rgba(148, 163, 184, 0.12);
}

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

@keyframes storyboard-split-breathe {
  0%, 100% { transform: scale(0.96); opacity: 0.84; }
  50% { transform: scale(1.04); opacity: 1; }
}

@media (max-width: 760px) {
  .storyboard-resplit-note {
    display: none;
  }

  .theater-project-detail-page .storyboard-task-alert {
    margin: 10px 12px 0;
  }

  .theater-project-detail-page .storyboard-split-wait {
    min-height: 420px;
    padding: 28px 18px;
  }

  .theater-project-detail-page .storyboard-split-steps {
    gap: 4px;
  }
}

/* Tuyaa home parity pass */
@keyframes beta-home-enter {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes beta-core-pulse {
  from {
    opacity: 0.82;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1.04);
  }
}

@keyframes beta-ripple {
  0% {
    opacity: 0;
    transform: scale(0.22);
  }
  22% {
    opacity: 0.74;
  }
  100% {
    opacity: 0;
    transform: scale(1.55);
  }
}

@keyframes beta-spin-slow {
  from {
    rotate: 0deg;
  }
  to {
    rotate: 360deg;
  }
}

@keyframes beta-float-node {
  from {
    translate: 0 0;
  }
  to {
    translate: 8px -12px;
  }
}

@keyframes beta-card-active {
  0%,
  100% {
    transform: translateY(-2px);
  }
  45% {
    transform: translateY(-5px);
  }
}

@keyframes beta-clapper {
  0%,
  76%,
  100% {
    transform: rotate(0deg);
  }
  84% {
    transform: rotate(-7deg);
  }
}

@keyframes beta-scan-line {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(180px);
  }
}

@keyframes beta-dash {
  to {
    stroke-dashoffset: -64;
  }
}

.home-shell {
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(ellipse at 18% 0%, rgba(14, 165, 233, 0.08), transparent 38%),
    radial-gradient(ellipse at 86% 12%, rgba(245, 158, 11, 0.045), transparent 34%),
    linear-gradient(180deg, #040914 0%, #02050b 100%);
  color: #eef6ff;
}

.home-top {
  height: 75px;
  padding: 0 35px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(6, 10, 22, 0.94);
}

.home-brand {
  gap: 14px;
  font-size: 22px;
  letter-spacing: 0;
}

.home-brand img {
  width: 42px;
  height: 42px;
  border-radius: 12px;
}

.home-brand b {
  color: #bfcaff;
  font-size: 11px;
  letter-spacing: 0.28em;
}

.home-top .team-chip {
  min-height: 40px;
  padding: 4px 10px 4px 4px;
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(15, 23, 42, 0.62);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.home-top .team-chip span {
  width: 32px;
  height: 32px;
}

.home-main {
  width: min(calc(100% - 48px), 1720px);
  margin: 0 auto;
  padding: clamp(66px, 8vw, 153px) 0 80px;
}

.hero-card.studio-card {
  position: relative;
  width: 100%;
  height: 440px;
  min-height: 440px;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 40px;
  padding: clamp(36px, 2.9vw, 56px);
  border: 1px solid rgba(184, 196, 255, 0.16);
  border-radius: 32px;
  color: #ffffff;
  text-align: left;
  background:
    radial-gradient(circle at 73% 45%, rgba(112, 72, 198, 0.34), transparent 34%),
    linear-gradient(90deg, rgba(9, 13, 27, 0.96), rgba(21, 20, 44, 0.94) 45%, rgba(38, 28, 79, 0.88));
  box-shadow:
    0 28px 72px rgba(0, 0, 0, 0.48),
    inset 0 1px 1px rgba(255, 255, 255, 0.04);
  transform: translateZ(0);
  animation: beta-home-enter 0.8s cubic-bezier(0.25, 1, 0.5, 1) both;
}

.hero-card.studio-card::before,
.hero-card.studio-card::after {
  display: none;
}

.hero-aurora,
.hero-outline {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-aurora {
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(4, 9, 20, 0.88) 0%, rgba(4, 9, 20, 0.62) 47%, rgba(58, 38, 112, 0.46) 100%),
    radial-gradient(circle at 68% 42%, rgba(151, 104, 255, 0.22), transparent 35%);
}

.hero-outline {
  z-index: 2;
  border: 1px solid rgba(255, 255, 255, 0.045);
  border-radius: inherit;
  box-shadow: inset 0 0 80px rgba(124, 93, 208, 0.08);
}

.hero-visual {
  position: relative;
  z-index: 3;
  flex: 0 0 50.5%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-diagram {
  width: min(520px, 82%);
  height: auto;
  overflow: visible;
}

.hero-diagram .core-ripple {
  fill: none;
  stroke: rgba(142, 166, 255, 0.32);
  stroke-width: 1.1;
  transform-box: fill-box;
  transform-origin: center;
  animation: beta-ripple 9s linear infinite;
}

.hero-diagram .ripple-2 {
  animation-delay: -3s;
}

.hero-diagram .ripple-3 {
  animation-delay: -6s;
}

.hero-diagram .core-singularity {
  fill: #f5f3ff;
  filter: drop-shadow(0 0 24px rgba(206, 194, 255, 0.7));
  transform-box: fill-box;
  transform-origin: center;
  animation: beta-core-pulse 5.8s ease-in-out infinite alternate;
}

.hero-diagram .core-orbit {
  fill: none;
  stroke: rgba(184, 196, 255, 0.58);
  stroke-width: 1.6;
  transform-box: fill-box;
  transform-origin: center;
  animation: beta-spin-slow 70s linear infinite;
}

.hero-diagram .orbit-2 {
  animation-duration: 55s;
  animation-direction: reverse;
}

.hero-diagram .orbit-3 {
  animation-duration: 90s;
}

.hero-diagram .energy-node {
  fill: #dff6ff;
  filter: drop-shadow(0 0 8px rgba(125, 211, 252, 0.5));
  animation: beta-float-node 7s ease-in-out infinite alternate;
}

.hero-diagram .energy-node.warm {
  fill: #ffe083;
}

.hero-diagram .node-b {
  animation-delay: -1.5s;
}

.hero-diagram .node-c {
  animation-delay: -3.5s;
}

.hero-diagram .node-d {
  animation-delay: -5s;
}

.hero-diagram .node-e {
  animation-delay: -1s;
}

.hero-diagram .node-f {
  animation-delay: -2.2s;
}

.hero-diagram .node-g {
  animation-delay: -4.5s;
}

.hero-copy {
  position: relative;
  z-index: 4;
  flex: 1;
  display: grid;
  gap: 14px;
  transform: translateY(-1px);
}

.hero-copy small {
  display: grid;
  grid-template-columns: max-content max-content;
  gap: 8px 18px;
  color: #d8ddff;
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.32em;
}

.hero-copy small em,
.hero-copy small i {
  color: rgba(214, 220, 255, 0.36);
  font-style: normal;
}

.hero-copy small i {
  grid-column: 1 / -1;
  letter-spacing: 0.28em;
}

.hero-copy strong {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(44px, 3.6vw, 64px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: 0;
}

.hero-copy strong mark {
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(171, 129, 255, 0.36);
  border-radius: 50%;
  color: rgba(215, 205, 255, 0.86);
  background: rgba(120, 74, 191, 0.2);
}

.hero-copy strong mark svg {
  width: 18px;
  height: 18px;
}

.hero-copy > span {
  color: rgba(203, 213, 225, 0.78);
  font-size: 16px;
}

.hero-copy b {
  width: fit-content;
  height: 40px;
  margin-top: 30px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 0 22px 0 26px;
  border: 1px solid rgba(196, 178, 255, 0.24);
  border-radius: 999px;
  color: #ffffff;
  background: rgba(93, 63, 154, 0.34);
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 13px;
  letter-spacing: 0.15em;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease;
}

.hero-card.studio-card:hover {
  transform: translateY(-2px);
  border-color: rgba(200, 210, 255, 0.24);
  box-shadow:
    0 32px 84px rgba(0, 0, 0, 0.52),
    inset 0 1px 1px rgba(255, 255, 255, 0.055);
}

.hero-card.studio-card:hover .hero-copy b {
  transform: translateY(-1px);
  border-color: rgba(214, 200, 255, 0.38);
  background: rgba(107, 74, 176, 0.46);
}

.hero-copy b svg {
  transform: rotate(180deg);
}

.home-tools {
  margin-top: 30px;
  animation: beta-home-enter 0.8s cubic-bezier(0.25, 1, 0.5, 1) 0.2s both;
}

.home-section-title {
  height: 18px;
  margin-bottom: 20px;
  color: rgba(148, 163, 184, 0.62);
  font-size: 14px;
  letter-spacing: 0.18em;
}

.home-section-title i {
  background: rgba(148, 163, 184, 0.12);
}

.tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-auto-rows: 200px;
  gap: 20px;
}

.home-tool.base-card {
  --base-accent: rgba(125, 211, 252, 0.74);
  position: relative;
  height: 200px;
  min-height: 0;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  padding: 20px 24px;
  border: 1px solid rgba(125, 211, 252, 0.12);
  border-radius: 16px;
  color: #eef6ff;
  text-align: left;
  background:
    linear-gradient(135deg, rgba(16, 32, 52, 0.74), rgba(8, 17, 32, 0.86)),
    #080c14;
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
  transform: translateZ(0);
  transition:
    transform 0.22s ease,
    border-color 0.22s ease,
    background 0.22s ease,
    box-shadow 0.22s ease;
  animation: none;
}

.home-tool.base-card::before,
.home-tool.base-card::after {
  display: none;
}

.home-tool.base-card:hover,
.home-tool.base-card:focus-visible {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--base-accent) 42%, rgba(255, 255, 255, 0.12));
  background:
    linear-gradient(135deg, rgba(20, 42, 68, 0.84), rgba(10, 23, 42, 0.92)),
    #111827;
  box-shadow:
    0 18px 38px rgba(0, 0, 0, 0.48),
    0 0 0 1px rgba(125, 211, 252, 0.06);
}

.home-tool.base-card.is-activating {
  animation: beta-card-active 0.24s ease both;
}

.base-backdrop,
.base-frame,
.corner,
.base-visual,
.base-content {
  position: absolute;
  pointer-events: none;
}

.base-backdrop {
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 82% 72%, color-mix(in srgb, var(--base-accent) 14%, transparent), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 52%);
  opacity: 0.9;
}

.base-frame {
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  box-shadow: inset 0 0 48px rgba(4, 9, 20, 0.28);
}

.corner {
  z-index: 5;
  width: 10px;
  height: 10px;
  border-color: rgba(160, 176, 220, 0.28);
  transition:
    border-color 0.2s ease,
    opacity 0.2s ease;
}

.corner.top-left {
  top: 12px;
  left: 12px;
  border-top: 1px solid;
  border-left: 1px solid;
}

.corner.top-right {
  top: 12px;
  right: 12px;
  border-top: 1px solid;
  border-right: 1px solid;
}

.corner.bottom-left {
  left: 12px;
  bottom: 12px;
  border-bottom: 1px solid;
  border-left: 1px solid;
}

.corner.bottom-right {
  right: 12px;
  bottom: 12px;
  border-right: 1px solid;
  border-bottom: 1px solid;
}

.home-tool.base-card:hover .corner {
  border-color: color-mix(in srgb, var(--base-accent) 48%, rgba(255, 255, 255, 0.18));
}

.base-visual {
  right: 2px;
  bottom: 0;
  z-index: 1;
  width: 58%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  opacity: 0.52;
  transition:
    opacity 0.34s ease,
    transform 0.34s ease;
}

.home-tool.base-card:hover .base-visual {
  opacity: 0.72;
  transform: translateX(-3px) scale(1.02);
}

.base-diagram {
  width: 100%;
  max-width: 240px;
  height: auto;
  overflow: visible;
}

.base-content {
  inset: 20px 24px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.base-content small {
  max-width: calc(100% - 16px);
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(185, 196, 230, 0.72);
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.base-content small b {
  color: rgba(190, 208, 255, 0.52);
  font-weight: 800;
}

.base-content small em,
.base-content small i {
  color: rgba(189, 199, 232, 0.58);
  font-style: normal;
}

.base-content small i {
  overflow: hidden;
  text-overflow: ellipsis;
}

.base-content strong {
  display: block;
  margin-top: 24px;
  color: #ffffff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 27px;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: 0;
}

.base-content strong b {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 3px 8px;
  border: 1px solid rgba(255, 195, 92, 0.34);
  border-radius: 999px;
  color: #ffd28b;
  background: rgba(255, 186, 97, 0.12);
  font-family: Inter, "Microsoft YaHei", sans-serif;
  font-size: 10px;
  font-weight: 800;
  vertical-align: middle;
}

.base-content > span {
  margin-top: 12px;
  color: rgba(203, 213, 225, 0.7);
  font-size: 14px;
}

.base-content u {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(220, 226, 255, 0.82);
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-decoration: none;
}

.base-content u svg {
  width: 14px;
  height: 14px;
  transform: rotate(180deg);
  transition: transform 0.2s ease;
}

.home-tool.base-card:hover .base-content u svg {
  transform: rotate(180deg) translateX(-2px);
}

.theater-card {
  --base-accent: rgba(250, 204, 21, 0.76);
  grid-row: auto;
  align-content: initial;
  padding-bottom: 20px;
}

.super_resolution-card {
  --base-accent: rgba(63, 232, 164, 0.76);
}

.video_understanding-card {
  --base-accent: rgba(91, 132, 255, 0.78);
}

.deduction-card {
  --base-accent: rgba(154, 107, 255, 0.78);
}

.subtitle-card {
  --base-accent: rgba(255, 186, 97, 0.78);
}

.clapper-diagram .stage-light {
  fill: rgba(250, 204, 21, 0.06);
}

.clapper-diagram .slate-body,
.video-understanding-diagram .frame-bg,
.ai-video-translation-diagram .video-frame-bg {
  fill: rgba(10, 17, 31, 0.78);
  stroke: rgba(125, 211, 252, 0.22);
}

.clapper-diagram .slate-line {
  fill: none;
  stroke: rgba(148, 163, 184, 0.42);
  stroke-width: 2;
}

.clapper-diagram .slate-line.dim {
  stroke-opacity: 0.35;
}

.clapper-diagram .clapper-arm {
  transform-box: fill-box;
  transform-origin: 44px 80px;
  animation: beta-clapper 5.5s ease-in-out infinite;
}

.clapper-diagram .clapper-fill {
  fill: url("#clapper-stripes-pattern");
  stroke: rgba(250, 204, 21, 0.24);
}

.clapper-diagram .action-burst {
  fill: rgba(250, 204, 21, 0);
  font-family: ui-monospace, Consolas, monospace;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.vsr-diagram .vsr-panel {
  fill: rgba(7, 24, 36, 0.78);
  stroke: rgba(63, 232, 164, 0.2);
}

.vsr-diagram .vsr-grid {
  fill: none;
  stroke: rgba(63, 232, 164, 0.1);
  stroke-width: 1;
}

.vsr-diagram .vsr-wave {
  fill: none;
  stroke-width: 3;
}

.vsr-diagram .vsr-wave.dim {
  stroke: rgba(75, 85, 99, 0.75);
}

.vsr-diagram .vsr-wave.hot {
  stroke: rgba(45, 212, 191, 0.84);
  stroke-dasharray: 18 12;
  animation: beta-dash 6s linear infinite;
  filter: drop-shadow(0 0 8px rgba(45, 212, 191, 0.34));
}

.vsr-diagram .vsr-scan {
  stroke: rgba(63, 232, 164, 0.86);
  stroke-width: 2;
  animation: beta-scan-line 3.8s linear infinite;
}

.vsr-diagram .tiny-label {
  fill: rgba(203, 213, 225, 0.45);
  font-family: ui-monospace, Consolas, monospace;
  font-size: 9px;
  letter-spacing: 0.08em;
}

.vsr-diagram .tiny-label.hot {
  fill: rgba(63, 232, 164, 0.72);
}

.video-understanding-diagram .video-screen,
.video-understanding-diagram .script-page,
.ai-video-translation-diagram .ai-video-node {
  fill: rgba(9, 18, 35, 0.9);
  stroke: rgba(91, 132, 255, 0.28);
}

.video-understanding-diagram .play-icon,
.ai-video-translation-diagram .ai-play-icon {
  fill: rgba(59, 130, 246, 0.72);
}

.video-understanding-diagram .scan-bar {
  stroke: rgba(91, 132, 255, 0.76);
  stroke-width: 2;
  animation: beta-dash 3s linear infinite;
}

.video-understanding-diagram .ray,
.video-understanding-diagram .script-line,
.ai-video-translation-diagram .ai-translate-stream {
  fill: none;
  stroke: rgba(91, 132, 255, 0.52);
  stroke-width: 2;
  stroke-dasharray: 10 8;
  animation: beta-dash 5s linear infinite;
}

.logic-diagram .logic-grid {
  fill: none;
  stroke: rgba(167, 139, 250, 0.34);
  stroke-width: 4;
  stroke-linecap: round;
}

.logic-diagram .logic-link {
  fill: none;
  stroke: rgba(167, 139, 250, 0.62);
  stroke-width: 2;
  stroke-dasharray: 12 10;
  animation: beta-dash 6s linear infinite;
}

.logic-diagram .logic-link.alt {
  animation-delay: -2s;
}

.logic-diagram .logic-node,
.ai-video-translation-diagram .translate-node {
  fill: rgba(167, 139, 250, 0.85);
  filter: drop-shadow(0 0 8px rgba(167, 139, 250, 0.45));
}

.ai-video-translation-diagram .video-frame-bg {
  stroke: rgba(255, 186, 97, 0.22);
}

.ai-video-translation-diagram .ai-focus-corner {
  fill: none;
  stroke: rgba(255, 186, 97, 0.54);
  stroke-width: 2;
}

.ai-video-translation-diagram .ai-translate-stream {
  stroke: rgba(255, 186, 97, 0.62);
}

.ai-video-translation-diagram .ai-translate-stream.alt {
  animation-delay: -1.8s;
}

.ai-video-translation-diagram .translate-node {
  fill: rgba(255, 186, 97, 0.8);
  filter: drop-shadow(0 0 8px rgba(255, 186, 97, 0.42));
}

@media (max-width: 1280px) {
  .home-main {
    padding-top: clamp(66px, 7vw, 96px);
  }

  .hero-card.studio-card {
    gap: 20px;
  }

  .hero-visual {
    flex-basis: 47%;
  }
}

@media (max-width: 900px) {
  .home-top {
    padding: 0 24px;
  }

  .hero-card.studio-card {
    display: grid;
    grid-template-columns: 44% 1fr;
    gap: 14px;
    border-radius: 28px;
    padding: 36px 44px;
  }

  .hero-visual {
    width: 100%;
    min-width: 0;
  }

  .hero-diagram {
    width: 100%;
  }

  .hero-copy strong {
    font-size: 42px;
  }
}

@media (max-width: 720px) {
  .home-main {
    width: min(calc(100% - 28px), 1720px);
    padding-top: 28px;
  }

  .hero-card.studio-card {
    height: auto;
    min-height: 360px;
    grid-template-columns: 1fr;
    padding: 24px;
  }

  .hero-visual {
    display: none;
  }

  .hero-copy strong {
    font-size: 38px;
  }

  .tool-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 180px;
    gap: 14px;
  }

  .home-tool.base-card {
    height: 180px;
  }
}

/* Video understanding v81: project cards, task board, managed upload and exports. */
.video-understanding-project-page,
.understanding-detail-page {
  min-height: 100vh;
  color: #eef4f7;
  background: #090c10;
}

.video-understanding-project-page {
  display: flex;
  flex-direction: column;
}

.understanding-project-container {
  flex: 1;
  width: 100%;
  min-height: 0;
  padding: 34px 46px 42px;
}

.understanding-selection-shell {
  width: min(1320px, 100%);
  min-height: 100%;
  margin: 0 auto;
}

.understanding-project-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(280px, 438px));
  align-content: start;
  gap: 22px;
}

.understanding-project-grid > .create-card,
.understanding-project-grid > .script-card {
  width: 100%;
  min-width: 0;
  height: 280px;
  border-radius: 6px;
}

.understanding-project-card-v2 {
  --card-accent: hsl(var(--understanding-hue) 72% 58%);
  position: relative;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--card-accent) 22%, #2b333a);
  background: linear-gradient(150deg, color-mix(in srgb, var(--card-accent) 16%, #13191f), #0b0f14 72%);
}

.understanding-project-card-v2 .project-card-open-hit {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.understanding-project-card-v2 .card-edit-btn {
  position: absolute;
  z-index: 4;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(168, 184, 194, 0.24);
  border-radius: 5px;
  color: #dce7ec;
  background: rgba(7, 10, 14, 0.72);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 160ms ease, transform 160ms ease, border-color 160ms ease;
}

.understanding-project-card-v2:hover .card-edit-btn,
.understanding-project-card-v2 .card-edit-btn:focus-visible {
  opacity: 1;
  transform: translateY(0);
}

.understanding-project-card-v2 .card-edit-btn:hover {
  border-color: color-mix(in srgb, var(--card-accent) 65%, #ffffff);
  color: #ffffff;
}

.understanding-project-card-v2 .card-edit-btn svg {
  width: 16px;
  height: 16px;
}

.understanding-project-card-v2 .script-card-body,
.understanding-project-card-v2 .script-card-footer {
  position: relative;
  z-index: 1;
}

.understanding-project-card-v2 .task-stats,
.understanding-project-grid .empty-project-card .task-stats {
  display: flex;
  align-items: center;
  gap: 18px;
}

.understanding-project-card-v2 .stat-block,
.understanding-project-grid .empty-project-card .stat-block {
  display: grid;
  justify-items: end;
  gap: 2px;
}

.understanding-project-card-v2 .stat-value,
.understanding-project-grid .empty-project-card .stat-value {
  color: #f2f7f9;
  font-size: 18px;
  font-weight: 760;
}

.understanding-project-card-v2 .stat-copy,
.understanding-project-grid .empty-project-card .stat-copy {
  color: #7e8d96;
  font-size: 11px;
}

.understanding-selection-shell > .pagination-shell {
  display: flex;
  justify-content: center;
  margin-top: 26px;
}

.understanding-selection-shell .pagination-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.understanding-selection-shell .pagination-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  border: 1px solid rgba(106, 176, 192, 0.45);
  border-radius: 5px;
  color: #dff8fb;
  background: rgba(25, 79, 89, 0.34);
}

.understanding-detail-page {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.understanding-container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 0;
  flex: 1;
  min-height: 0;
  gap: 0;
  padding: 24px 28px 28px;
  transition: grid-template-columns 220ms ease;
}

.understanding-detail-page.panel-open .understanding-container {
  grid-template-columns: minmax(0, 1fr) minmax(430px, 46vw);
  gap: 22px;
}

.understanding-task-board {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.understanding-board-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  min-height: 98px;
  gap: 24px;
  padding: 2px 2px 18px;
  border-bottom: 1px solid rgba(145, 164, 174, 0.16);
}

.understanding-board-head > div:first-child {
  min-width: 0;
}

.understanding-board-head span,
.understanding-panel-head span {
  color: #6fc6d2;
  font-size: 11px;
  font-weight: 760;
  text-transform: uppercase;
}

.understanding-board-head h1 {
  overflow: hidden;
  margin: 7px 0 5px;
  color: #f4f8fa;
  font-size: 29px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.understanding-board-head p {
  overflow: hidden;
  max-width: 720px;
  margin: 0;
  color: #86959d;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.understanding-export-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  padding-top: 20px;
}

.understanding-export-actions button,
.understanding-task-toolbar button,
.understanding-pagination button,
.understanding-task-actions button,
.understanding-create-panel footer button,
.understanding-bulk-tools button,
.understanding-merge-list button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  gap: 6px;
  border: 1px solid rgba(143, 160, 170, 0.22);
  border-radius: 5px;
  color: #cbd7dc;
  background: #11171c;
}

.understanding-export-actions button {
  padding: 0 14px;
}

.understanding-export-actions button:hover:not(:disabled),
.understanding-task-actions button:hover:not(:disabled) {
  border-color: rgba(103, 198, 211, 0.7);
  color: #ffffff;
  background: #172229;
}

.understanding-task-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 58px;
  gap: 20px;
  border-bottom: 1px solid rgba(145, 164, 174, 0.12);
}

.understanding-task-toolbar nav {
  display: flex;
  align-items: center;
  gap: 5px;
  overflow-x: auto;
}

.understanding-task-toolbar nav button {
  min-width: 68px;
  padding: 0 12px;
  border-color: transparent;
  color: #819099;
  background: transparent;
}

.understanding-task-toolbar nav button.active {
  border-color: rgba(100, 197, 210, 0.52);
  color: #e5fbfd;
  background: rgba(34, 102, 112, 0.28);
  box-shadow: 0 0 18px rgba(50, 176, 194, 0.12);
}

.understanding-task-toolbar > span {
  flex: 0 0 auto;
  color: #718089;
  font-size: 12px;
}

.understanding-task-list {
  display: grid;
  align-content: start;
  min-height: 0;
  gap: 10px;
  padding: 14px 2px;
  overflow: auto;
}

.understanding-task-row {
  display: grid;
  grid-template-columns: 154px minmax(0, 1fr) auto;
  align-items: center;
  min-height: 124px;
  gap: 16px;
  padding: 12px;
  border: 1px solid rgba(135, 153, 164, 0.15);
  border-radius: 6px;
  background: #0e1318;
  transition: border-color 160ms ease, background 160ms ease;
}

.understanding-task-row:hover {
  border-color: rgba(91, 176, 188, 0.34);
  background: #11181e;
}

.understanding-task-cover {
  position: relative;
  width: 154px;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(146, 163, 173, 0.18);
  border-radius: 5px;
  background: #070a0d;
  aspect-ratio: 16 / 9;
}

.understanding-cover-ratio,
.understanding-cover-ratio img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.understanding-cover-ratio img {
  object-fit: cover;
}

.understanding-cover-ratio > i svg {
  width: 30px;
  height: 30px;
  color: #50616a;
}

.understanding-task-cover > b {
  position: absolute;
  right: 7px;
  bottom: 6px;
  padding: 3px 6px;
  border-radius: 3px;
  color: #f3f7f8;
  background: rgba(0, 0, 0, 0.7);
  font-size: 10px;
}

.understanding-task-cover > em {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: rgba(2, 6, 8, 0.28);
  opacity: 0;
  transition: opacity 160ms ease;
}

.understanding-task-cover:hover > em {
  opacity: 1;
}

.understanding-task-cover > em svg {
  width: 26px;
  height: 26px;
}

.understanding-task-body {
  display: grid;
  min-width: 0;
  gap: 11px;
}

.understanding-task-title,
.understanding-task-specs,
.understanding-task-status {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 8px;
}

.understanding-task-title > span {
  display: inline-flex;
  color: #6fc6d2;
}

.understanding-task-title svg {
  width: 16px;
  height: 16px;
}

.understanding-task-title strong {
  overflow: hidden;
  color: #edf4f6;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.understanding-task-title time {
  margin-left: auto;
  color: #66767f;
  font-size: 11px;
  white-space: nowrap;
}

.understanding-task-specs {
  color: #73828b;
  font-size: 11px;
}

.understanding-task-specs em {
  color: #35424a;
}

.understanding-skill-chip {
  padding: 4px 7px;
  border: 1px solid rgba(95, 183, 196, 0.28);
  border-radius: 4px;
  color: #9edce4;
  background: rgba(34, 91, 101, 0.2);
}

.understanding-status,
.understanding-expired-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 7px;
  border-radius: 4px;
  font-size: 11px;
}

.understanding-status {
  color: #9cced5;
  background: rgba(56, 113, 122, 0.2);
}

.understanding-status > i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.understanding-status.status-succeeded {
  color: #91d5ad;
  background: rgba(38, 115, 72, 0.22);
}

.understanding-status.status-failed,
.understanding-status.status-expired,
.understanding-expired-chip {
  color: #e7a39c;
  background: rgba(135, 55, 50, 0.2);
}

.understanding-task-error {
  overflow: hidden;
  max-width: 360px;
  color: #d6928b;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.understanding-progress {
  display: flex;
  align-items: center;
  width: min(220px, 32%);
  min-width: 100px;
  height: 5px;
  margin-left: auto;
  border-radius: 4px;
  background: #202a30;
}

.understanding-progress > i {
  height: 100%;
  border-radius: inherit;
  background: #62bfcb;
}

.understanding-progress > b {
  margin-left: 8px;
  color: #82939b;
  font-size: 10px;
}

.understanding-task-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}

.understanding-task-actions button {
  min-width: 36px;
  padding: 0 10px;
  white-space: nowrap;
}

.understanding-task-actions button.primary {
  border-color: #4e9da8;
  color: #f1fdff;
  background: #22626c;
}

.understanding-task-actions button.danger {
  width: 36px;
  padding: 0;
  border-radius: 50%;
  color: #d7928b;
  opacity: 0;
  transition: opacity 160ms ease, border-color 160ms ease, background 160ms ease;
}

.understanding-task-row:hover .understanding-task-actions button.danger,
.understanding-task-actions button.danger:focus-visible {
  opacity: 1;
}

.understanding-task-actions svg {
  width: 14px;
  height: 14px;
}

.understanding-board-state {
  display: grid;
  flex: 1;
  min-height: 260px;
  place-content: center;
  gap: 12px;
  color: #75868e;
  text-align: center;
}

.understanding-board-state.error {
  color: #d78f89;
}

.understanding-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 8px 2px 0;
  border-top: 1px solid rgba(145, 164, 174, 0.12);
  color: #6f7d85;
  font-size: 12px;
}

.understanding-pagination > div {
  display: flex;
  gap: 8px;
}

.understanding-pagination button {
  min-width: 70px;
  padding: 0 12px;
}

.understanding-create-panel {
  display: none;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  border-left: 1px solid rgba(137, 156, 166, 0.17);
  background: #0d1217;
}

.understanding-create-panel.active {
  display: flex;
  flex-direction: column;
}

.understanding-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 24px 18px;
  border-bottom: 1px solid rgba(137, 156, 166, 0.14);
}

.understanding-panel-head h2 {
  margin: 6px 0 0;
  color: #eff6f8;
  font-size: 21px;
}

.understanding-panel-head > strong {
  max-width: 220px;
  padding: 6px 9px;
  overflow: hidden;
  border: 1px solid rgba(98, 186, 198, 0.28);
  border-radius: 4px;
  color: #a6dfe6;
  background: rgba(32, 92, 101, 0.2);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.understanding-panel-section {
  min-height: 0;
  flex: 1;
  padding: 20px 24px;
  overflow: auto;
}

.understanding-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.understanding-section-title strong {
  color: #dce7eb;
  font-size: 14px;
}

.understanding-section-title small {
  color: #6f7f87;
  font-size: 10px;
  text-align: right;
}

.understanding-source-grid {
  display: grid;
  align-content: start;
  gap: 9px;
}

.understanding-source-item {
  position: relative;
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) 32px;
  align-items: center;
  gap: 12px;
  min-height: 86px;
  padding: 9px;
  border: 1px solid rgba(135, 153, 164, 0.16);
  border-radius: 5px;
  background: #11171c;
}

.understanding-source-item.invalid {
  border-color: rgba(195, 97, 87, 0.48);
}

.understanding-source-thumb {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 112px;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(139, 156, 166, 0.15);
  border-radius: 4px;
  color: #71828a;
  background: #070a0d;
  aspect-ratio: 16 / 9;
}

.understanding-source-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.understanding-source-thumb > i {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.28);
  opacity: 0;
}

.understanding-source-thumb:hover > i {
  opacity: 1;
}

.understanding-source-main {
  display: grid;
  min-width: 0;
  gap: 8px;
}

.understanding-source-main > div:first-child {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 8px;
}

.understanding-source-main input {
  width: 100%;
  min-width: 0;
  height: 32px;
  padding: 0 9px;
  border: 1px solid rgba(135, 153, 164, 0.18);
  border-radius: 4px;
  color: #e8f0f2;
  background: #0a0e12;
}

.understanding-source-main > div:first-child > span {
  flex: 0 0 auto;
  color: #5f7078;
  font-size: 9px;
}

.understanding-source-main small {
  overflow: hidden;
  color: #74848c;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.understanding-upload-progress {
  height: 4px;
  overflow: hidden;
  border-radius: 3px;
  background: #252e34;
}

.understanding-upload-progress i {
  display: block;
  height: 100%;
  background: #61beca;
}

.understanding-source-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid rgba(164, 112, 106, 0.22);
  border-radius: 50%;
  color: #d69089;
  background: rgba(71, 31, 29, 0.2);
  opacity: 0;
  transition: opacity 160ms ease;
}

.understanding-source-item:hover .understanding-source-remove,
.understanding-source-remove:focus-visible {
  opacity: 1;
}

.understanding-source-remove svg {
  width: 14px;
  height: 14px;
}

.understanding-source-add,
.understanding-upload-zone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 78px;
  gap: 8px;
  border: 1px dashed rgba(99, 178, 190, 0.34);
  border-radius: 5px;
  color: #8ecdd5;
  background: rgba(24, 65, 72, 0.12);
}

.understanding-source-add svg,
.understanding-upload-zone svg {
  width: 20px;
  height: 20px;
}

.understanding-upload-zone {
  min-height: 220px;
  flex-direction: column;
}

.understanding-upload-zone strong {
  color: #d8e7ea;
  font-size: 15px;
}

.understanding-upload-zone small {
  color: #718189;
  font-size: 11px;
}

.understanding-upload-zone.dragging {
  border-color: #67c7d3;
  background: rgba(38, 113, 123, 0.22);
}

.understanding-file-input {
  display: none;
}

.understanding-create-panel footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 15px 24px 18px;
  border-top: 1px solid rgba(137, 156, 166, 0.14);
}

.understanding-create-panel footer button {
  min-width: 92px;
  padding: 0 16px;
}

.understanding-create-panel footer button.primary {
  border-color: #4e9da8;
  color: #f3feff;
  background: #246873;
}

.modal-understandingCreate {
  width: min(560px, calc(100vw - 32px));
}

.understanding-project-form {
  display: grid;
  gap: 17px;
}

.understanding-project-form label {
  display: grid;
  gap: 8px;
}

.understanding-project-form label > span {
  color: #9cabb2;
  font-size: 12px;
}

.understanding-project-form input,
.understanding-project-form select,
.understanding-project-form textarea {
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid rgba(137, 155, 165, 0.24);
  border-radius: 5px;
  color: #edf4f6;
  background: #0d1217;
}

.understanding-project-form textarea {
  resize: vertical;
}

.modal-understandingResult,
.modal-understandingMerge,
.modal-understandingBulk {
  width: min(900px, calc(100vw - 40px));
}

.modal-understandingPreview {
  width: min(960px, calc(100vw - 40px));
}

.understanding-result-modal,
.understanding-merge-modal,
.understanding-bulk-modal {
  display: grid;
  gap: 14px;
}

.understanding-result-modal > div,
.understanding-bulk-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.understanding-result-modal > div > span {
  color: #79c8d2;
  font-size: 11px;
}

.understanding-result-modal > div > button,
.understanding-bulk-tools button {
  min-height: 32px;
  padding: 0 10px;
}

.understanding-result-modal pre,
.understanding-merge-modal > pre {
  max-height: 54vh;
  margin: 0;
  padding: 16px;
  overflow: auto;
  border: 1px solid rgba(135, 153, 164, 0.16);
  border-radius: 5px;
  color: #dce7eb;
  background: #090d11;
  font: 12px/1.75 ui-monospace, SFMono-Regular, Consolas, monospace;
  white-space: pre-wrap;
}

.understanding-preview-modal video {
  display: block;
  width: 100%;
  max-height: 68vh;
  border-radius: 5px;
  background: #000000;
}

.understanding-merge-list,
.understanding-bulk-list {
  display: grid;
  max-height: 250px;
  gap: 7px;
  overflow: auto;
}

.understanding-merge-list article {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 7px 9px;
  border: 1px solid rgba(135, 153, 164, 0.14);
  border-radius: 5px;
  background: #0d1217;
}

.understanding-merge-list article > span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 4px;
  color: #8fd3dc;
  background: rgba(38, 103, 112, 0.24);
}

.understanding-merge-list article > div:nth-child(2),
.understanding-bulk-list label > span {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.understanding-merge-list strong,
.understanding-bulk-list strong {
  overflow: hidden;
  color: #dce7eb;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.understanding-merge-list small,
.understanding-bulk-list small {
  color: #6d7d85;
  font-size: 10px;
}

.understanding-merge-list article > div:last-child {
  display: flex;
  gap: 5px;
}

.understanding-merge-list button {
  width: 30px;
  min-height: 30px;
  padding: 0;
}

.understanding-merge-list button[data-direction="up"] svg,
.understanding-merge-list button[data-direction="down"] svg {
  transform: rotate(90deg);
}

.understanding-bulk-tools {
  justify-content: flex-start;
}

.understanding-bulk-tools > span {
  margin-left: auto;
  color: #84949c;
  font-size: 11px;
}

.understanding-bulk-list label {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  min-height: 52px;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(135, 153, 164, 0.14);
  border-radius: 5px;
  background: #0d1217;
}

.understanding-bulk-list input {
  width: 16px;
  height: 16px;
  accent-color: #5eb9c5;
}

.understanding-modal-state {
  display: grid;
  min-height: 180px;
  place-content: center;
  color: #75858d;
}

@media (max-width: 1100px) {
  .understanding-project-grid {
    grid-template-columns: repeat(2, minmax(260px, 1fr));
  }

  .understanding-container,
  .understanding-detail-page.panel-open .understanding-container {
    grid-template-columns: 1fr;
    overflow: auto;
  }

  .understanding-task-board {
    overflow: visible;
  }

  .understanding-create-panel {
    display: none;
    height: auto;
    border-top: 1px solid rgba(137, 156, 166, 0.17);
    border-left: 0;
  }

  .understanding-create-panel.active {
    display: flex;
  }

  .understanding-task-row {
    grid-template-columns: 140px minmax(0, 1fr);
  }

  .understanding-task-actions {
    grid-column: 2;
    justify-content: flex-start;
  }
}

@media (max-width: 720px) {
  .understanding-project-container,
  .understanding-container {
    padding: 16px 14px 26px;
  }

  .understanding-project-grid {
    grid-template-columns: 1fr;
  }

  .understanding-project-grid > .create-card,
  .understanding-project-grid > .script-card {
    height: 246px;
  }

  .understanding-board-head,
  .understanding-task-toolbar,
  .understanding-pagination {
    align-items: stretch;
    flex-direction: column;
  }

  .understanding-export-actions {
    padding-top: 0;
  }

  .understanding-task-row {
    grid-template-columns: 1fr;
  }

  .understanding-task-cover,
  .understanding-task-body,
  .understanding-task-actions {
    grid-column: 1;
  }

  .understanding-task-cover {
    width: min(100%, 300px);
  }

  .understanding-task-actions button.danger,
  .understanding-source-remove,
  .understanding-project-card-v2 .card-edit-btn {
    opacity: 1;
    transform: none;
  }

  .understanding-source-item {
    grid-template-columns: 92px minmax(0, 1fr) 30px;
  }

  .understanding-source-thumb {
    width: 92px;
  }
}

* {
  box-sizing: border-box;
}

html,
body,
#app {
  min-height: 100%;
  margin: 0;
}

body {
  background: var(--bg);
  color: var(--text);
}

button,
input,
textarea {
  font: inherit;
}

button {
  border: 0;
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

img {
  max-width: 100%;
  display: block;
}

@keyframes beta-card-enter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes beta-orbit {
  from {
    transform: rotate(42deg);
  }
  to {
    transform: rotate(402deg);
  }
}

@keyframes beta-action-launch {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1) rotate(0deg);
  }
  32% {
    opacity: 1;
    transform: translate(0, 0) scale(0.88) rotate(-10deg);
  }
  62% {
    opacity: 1;
    transform: translate(0, 0) scale(1.16) rotate(18deg);
  }
  100% {
    opacity: 0.18;
    transform: translate(18px, -18px) scale(0.82) rotate(42deg);
  }
}

@keyframes beta-action-ring {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.45);
  }
  18% {
    opacity: 0.72;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(2.15);
  }
}

@keyframes beta-card-launch {
  0%,
  100% {
    transform: translateY(-2px);
  }
  45% {
    transform: translateY(-5px);
  }
}

.create-script-card,
.script-card,
.add-card,
.create-project-large,
.theater-project-card,
.theater-create-card,
.understanding-project-card,
.pipeline-cards button,
.asset-status-card,
.asset-status-card button,
.automation-stages article,
.automation-stages button,
.workflow-strip article,
.generated-assets-grid article,
.storyboard-grid article,
.stats-grid article,
.module-metrics article,
.task-table article,
.kanban-lane article,
.approval-panel article,
.delivery-panel article,
.budget-panel article,
.team-board article,
.asset-catalog article,
.chat-list article {
  --card-accent: rgba(130, 150, 255, 0.78);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transform: translateZ(0);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 1px 0 rgba(255, 255, 255, 0.02);
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background-color 0.18s ease,
    filter 0.18s ease;
  animation: beta-card-enter 0.34s ease both;
}

.create-script-card:nth-child(2),
.script-card:nth-child(2),
.theater-project-card:nth-child(2),
.theater-create-card:nth-child(2),
.understanding-project-card:nth-child(2),
.generated-assets-grid article:nth-child(2),
.storyboard-grid article:nth-child(2),
.team-board article:nth-child(2),
.asset-catalog article:nth-child(2) {
  animation-delay: 0.04s;
}

.create-script-card:nth-child(3),
.script-card:nth-child(3),
.theater-project-card:nth-child(3),
.theater-create-card:nth-child(3),
.understanding-project-card:nth-child(3),
.generated-assets-grid article:nth-child(3),
.storyboard-grid article:nth-child(3),
.team-board article:nth-child(3),
.asset-catalog article:nth-child(3) {
  animation-delay: 0.08s;
}

.create-script-card:nth-child(4),
.script-card:nth-child(4),
.generated-assets-grid article:nth-child(4),
.storyboard-grid article:nth-child(4),
.team-board article:nth-child(4),
.asset-catalog article:nth-child(4) {
  animation-delay: 0.12s;
}

.create-script-card > *,
.script-card > *,
.add-card > *,
.create-project-large > *,
.theater-project-card > *,
.theater-create-card > *,
.understanding-project-card > *,
.pipeline-cards button > *,
.asset-status-card > *,
.asset-status-card button > *,
.automation-stages article > *,
.automation-stages button > *,
.workflow-strip article > *,
.generated-assets-grid article > *,
.storyboard-grid article > *,
.stats-grid article > *,
.module-metrics article > *,
.task-table article > *,
.kanban-lane article > *,
.approval-panel article > *,
.delivery-panel article > *,
.budget-panel article > *,
.team-board article > *,
.asset-catalog article > *,
.chat-list article > * {
  position: relative;
  z-index: 1;
}

.create-script-card::after,
.script-card::after,
.add-card::after,
.create-project-large::after,
.theater-project-card::after,
.theater-create-card::after,
.understanding-project-card::after,
.pipeline-cards button::after,
.asset-status-card::after,
.asset-status-card button::after,
.automation-stages article::after,
.automation-stages button::after,
.workflow-strip article::after,
.generated-assets-grid article::after,
.storyboard-grid article::after,
.stats-grid article::after,
.module-metrics article::after,
.kanban-lane article::after,
.approval-panel article::after,
.delivery-panel article::after,
.budget-panel article::after,
.team-board article::after,
.asset-catalog article::after,
.chat-list article::after {
  content: "";
  position: absolute;
  top: 0;
  left: 14px;
  right: 14px;
  z-index: 2;
  height: 2px;
  border-radius: 0 0 999px 999px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--card-accent), transparent);
  opacity: 0.62;
  transition:
    left 0.18s ease,
    right 0.18s ease,
    opacity 0.18s ease;
}

.create-script-card:hover,
.script-card:hover,
.add-card:hover,
.create-project-large:hover,
.theater-project-card:hover,
.theater-create-card:hover,
.understanding-project-card:hover,
.pipeline-cards button:hover,
.asset-status-card:hover,
.asset-status-card button:hover,
.automation-stages article:hover,
.automation-stages button:hover,
.workflow-strip article:hover,
.generated-assets-grid article:hover,
.storyboard-grid article:hover,
.stats-grid article:hover,
.module-metrics article:hover,
.task-table article:hover,
.kanban-lane article:hover,
.approval-panel article:hover,
.delivery-panel article:hover,
.budget-panel article:hover,
.team-board article:hover,
.asset-catalog article:hover,
.chat-list article:hover {
  transform: translateY(-3px);
  border-color: rgba(190, 204, 235, 0.42);
  box-shadow:
    0 18px 38px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

.create-script-card:hover::after,
.script-card:hover::after,
.add-card:hover::after,
.create-project-large:hover::after,
.theater-project-card:hover::after,
.theater-create-card:hover::after,
.understanding-project-card:hover::after,
.pipeline-cards button:hover::after,
.asset-status-card:hover::after,
.asset-status-card button:hover::after,
.automation-stages article:hover::after,
.automation-stages button:hover::after,
.workflow-strip article:hover::after,
.generated-assets-grid article:hover::after,
.storyboard-grid article:hover::after,
.stats-grid article:hover::after,
.module-metrics article:hover::after,
.kanban-lane article:hover::after,
.approval-panel article:hover::after,
.delivery-panel article:hover::after,
.budget-panel article:hover::after,
.team-board article:hover::after,
.asset-catalog article:hover::after,
.chat-list article:hover::after {
  left: 10px;
  right: 10px;
  opacity: 0.94;
}

.home-shell,
.dark-page {
  min-height: 100vh;
  background:
    linear-gradient(90deg, rgba(6, 11, 24, 0.98), rgba(7, 14, 27, 0.94), rgba(10, 18, 33, 0.98)),
    radial-gradient(circle at 82% 30%, rgba(85, 123, 255, 0.18), transparent 34%);
}

.home-top,
.topbar {
  height: 74px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 var(--page-gutter);
  border-bottom: 1px solid rgba(110, 125, 164, 0.14);
  background: rgba(7, 11, 24, 0.78);
  backdrop-filter: blur(12px);
}

.home-brand,
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
  background: transparent;
  font-size: 20px;
  font-weight: 900;
}

.beita-brand-crop {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
}

.home-brand > .beita-brand-crop,
.brand > .beita-brand-crop {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(210, 226, 255, 0.18);
  border-radius: 15px;
  box-shadow: 0 9px 22px rgba(73, 58, 173, 0.24);
}

.beita-brand-crop img,
.home-brand > .beita-brand-crop img,
.brand > .beita-brand-crop img,
.studio-asset-brand-mark.beita-brand-crop img,
.theater-brand-mark.beita-brand-crop img {
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  border-radius: 0;
  filter: none;
  clip-path: none;
  transform: none;
  box-shadow: none;
}

.studio-asset-brand:hover .studio-asset-brand-mark.beita-brand-crop img,
.home-brand:hover > .beita-brand-crop img,
.brand:hover > .beita-brand-crop img {
  transform: scale(1.02);
}

.home-brand img,
.brand img,
.studio-brand img {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(210, 226, 255, 0.18);
  border-radius: 15px;
  background: rgba(7, 12, 26, 0.74);
  box-shadow:
    0 0 0 1px rgba(210, 226, 255, 0.06),
    0 10px 24px rgba(0, 0, 0, 0.28);
  transition:
    transform 0.24s ease,
    box-shadow 0.24s ease,
    filter 0.24s ease;
}

.home-brand:hover img,
.brand:hover img,
.studio-brand:hover img {
  filter: saturate(1.06) brightness(1.03);
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(210, 226, 255, 0.12),
    0 12px 28px rgba(0, 0, 0, 0.32);
}

.home-brand b,
.brand b {
  margin-left: 5px;
  color: #c6cfff;
  font-size: 11px;
  letter-spacing: 0.28em;
}

.topbar-spacer {
  flex: 1;
}

.team-chip,
.ghost-btn,
.primary-small,
.theme-toggle,
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  background: rgba(20, 25, 46, 0.78);
}

.team-chip span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #ffffff;
  background: linear-gradient(135deg, #28d1d1, #4366ff);
  font-weight: 900;
}

.home-top .team-chip {
  margin-left: auto;
}

.icon-btn {
  width: 38px;
  padding: 0;
  border-radius: 8px;
}

.primary-small,
.primary {
  border-color: rgba(143, 113, 255, 0.55);
  color: #ffffff;
  background: linear-gradient(135deg, rgba(94, 91, 255, 0.96), rgba(149, 80, 255, 0.96));
}

.home-main {
  width: auto;
  margin: 0 var(--page-gutter);
  padding: 96px 0 72px;
}

.hero-card {
  position: relative;
  width: 100%;
  min-height: 440px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 52% minmax(0, 1fr);
  align-items: center;
  padding: 40px 74px;
  border: 1px solid rgba(181, 190, 255, 0.24);
  border-radius: 28px;
  color: #ffffff;
  text-align: left;
  background:
    linear-gradient(90deg, rgba(10, 14, 29, 0.95), rgba(24, 18, 47, 0.86)),
    url("./assets/storyboard-contact-sheet.png") center / cover;
  box-shadow: 0 28px 74px rgba(0, 0, 0, 0.38);
  transform: translateZ(0);
  transition:
    transform 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease,
    filter 0.22s ease;
  animation: beta-card-enter 0.36s ease both;
}

.hero-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 18%, rgba(255, 255, 255, 0.1), transparent 24%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 38%);
  opacity: 0.42;
  transition: opacity 0.22s ease;
}

.hero-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(90deg, rgba(7, 12, 25, 0.84), rgba(40, 27, 81, 0.72), rgba(41, 29, 91, 0.62));
}

.hero-card:hover {
  transform: translateY(-3px);
  border-color: rgba(201, 210, 255, 0.36);
  filter: saturate(1.02);
  box-shadow: 0 34px 86px rgba(0, 0, 0, 0.46);
}

.hero-card:hover::before {
  opacity: 0.58;
}

.orbital {
  position: relative;
  z-index: 3;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background:
    linear-gradient(rgba(175, 188, 255, 0.75), rgba(175, 188, 255, 0.75)) center / 260px 2px no-repeat,
    linear-gradient(90deg, rgba(175, 188, 255, 0.75), rgba(175, 188, 255, 0.75)) center / 2px 320px no-repeat;
  opacity: 0.72;
  transform: rotate(42deg);
  animation: beta-orbit 18s linear infinite;
}

.orbital::before,
.orbital::after {
  content: "";
  position: absolute;
  inset: 88px;
  border: 1px solid rgba(191, 202, 255, 0.2);
  border-radius: 50%;
}

.orbital::after {
  inset: 168px;
  background: #e9ebff;
  box-shadow: 0 8px 24px rgba(209, 216, 255, 0.28);
}

.hero-copy {
  position: relative;
  z-index: 3;
  display: grid;
  gap: 13px;
}

.hero-copy small,
.home-tool small,
.episodes-workbench small,
.project-banner small,
.toolbox-layout small {
  color: #c8c9ff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.25em;
}

.hero-copy small em,
.home-tool small em {
  margin-left: 10px;
  color: rgba(215, 221, 255, 0.38);
  font-style: normal;
}

.hero-copy strong {
  font-size: clamp(40px, 5vw, 66px);
  line-height: 1;
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: 0;
}

.hero-copy > span {
  color: #b7c4dc;
  font-size: 15px;
}

.hero-copy b {
  width: fit-content;
  margin-top: 26px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 42px;
  padding: 0 26px;
  border: 1px solid rgba(198, 191, 255, 0.24);
  border-radius: 999px;
  color: #ffffff;
  background: rgba(114, 77, 183, 0.35);
  font-size: 12px;
  letter-spacing: 0.13em;
}

.hero-copy b svg {
  transform: rotate(180deg);
}

.home-tools {
  margin-top: 33px;
}

.home-section-title {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #7d879b;
  margin-bottom: 14px;
}

.home-section-title i {
  flex: 1;
  height: 1px;
  background: rgba(142, 155, 196, 0.14);
}

.tool-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 106px;
  gap: 14px;
}

.home-tool {
  --card-accent: rgba(130, 150, 255, 0.78);
  position: relative;
  overflow: hidden;
  height: 100%;
  min-height: 0;
  display: grid;
  align-content: center;
  gap: 7px;
  padding: 17px 58px 17px 20px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  color: var(--text);
  text-align: left;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 52%),
    #080c14;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
  transform: translateZ(0);
  transition:
    transform 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease,
    background 0.22s ease;
  animation: beta-card-enter 0.34s ease both;
}

.home-tool:nth-child(2) {
  animation-delay: 0.05s;
}

.home-tool:nth-child(3) {
  animation-delay: 0.1s;
}

.home-tool:nth-child(4) {
  animation-delay: 0.15s;
}

.home-tool:nth-child(5) {
  animation-delay: 0.2s;
}

.home-tool::before {
  content: "";
  position: absolute;
  right: -46px;
  bottom: -58px;
  width: 142px;
  height: 142px;
  border-radius: 50%;
  pointer-events: none;
  background: color-mix(in srgb, var(--card-accent) 16%, transparent);
  opacity: 0.34;
  transition:
    opacity 0.22s ease,
    transform 0.22s ease;
}

.home-tool > * {
  position: relative;
  z-index: 1;
}

.home-tool:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.15);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--card-accent) 6%, transparent), transparent 58%),
    #111827;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4);
}

.home-tool:hover::before {
  opacity: 0.56;
  transform: translate(-4px, -4px);
}

.tool-body {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.home-tool strong {
  display: block;
  margin-top: 0;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 650;
}

.home-tool strong b {
  display: inline-flex;
  margin-left: 6px;
  padding: 2px 6px;
  border-radius: 999px;
  color: #ffd18a;
  background: rgba(255, 186, 97, 0.13);
  font-size: 10px;
}

.home-tool small {
  max-width: calc(100% - 48px);
  display: block;
  margin-bottom: 2px;
  font-size: 10px;
  letter-spacing: 0.14em;
}

.tool-body > span {
  color: #97a6bc;
  font-size: 12px;
}

.tool-action {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 2;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.78);
  background: rgba(255, 255, 255, 0.045);
  transition:
    transform 0.22s ease,
    border-color 0.22s ease,
    background 0.22s ease,
    color 0.22s ease;
}

.tool-action::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: -1;
  width: 34px;
  height: 34px;
  border: 1px solid color-mix(in srgb, var(--card-accent) 76%, rgba(255, 255, 255, 0.16));
  border-radius: inherit;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.45);
}

.tool-action svg {
  width: 17px;
  height: 17px;
}

.home-tool:hover .tool-action {
  color: #ffffff;
  border-color: color-mix(in srgb, var(--card-accent) 42%, rgba(255, 255, 255, 0.08));
  background: color-mix(in srgb, var(--card-accent) 18%, rgba(255, 255, 255, 0.055));
}

.home-tool.is-launching .tool-action {
  animation: beta-action-launch 0.72s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  border-color: color-mix(in srgb, var(--card-accent) 70%, rgba(255, 255, 255, 0.16));
  background: color-mix(in srgb, var(--card-accent) 34%, rgba(255, 255, 255, 0.06));
}

.home-tool.is-launching .tool-action::before {
  animation: beta-action-ring 0.72s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.home-tool.is-launching {
  animation: beta-card-launch 0.72s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  border-color: color-mix(in srgb, var(--card-accent) 60%, rgba(255, 255, 255, 0.16));
}

.theater-card {
  grid-row: span 2;
  align-content: end;
  padding-bottom: 20px;
}

.theater-card {
  --card-accent: #27d7e6;
  background:
    linear-gradient(160deg, rgba(24, 31, 53, 0.9), rgba(12, 18, 31, 0.9)),
    url("./assets/storyboard-contact-sheet.png") center / cover;
}

.theater-card strong {
  font-size: 16px;
}

.super-card {
  --card-accent: #3fe8a4;
  background: linear-gradient(160deg, rgba(14, 36, 56, 0.92), rgba(9, 17, 30, 0.96));
}

.understanding-card {
  --card-accent: #5b84ff;
  background: linear-gradient(160deg, rgba(21, 34, 58, 0.92), rgba(9, 17, 30, 0.96));
}

.toolbox-card {
  --card-accent: #d966af;
  background: linear-gradient(160deg, rgba(31, 24, 55, 0.92), rgba(9, 17, 30, 0.96));
}

.translation-card {
  --card-accent: #ffba61;
  background: linear-gradient(160deg, rgba(30, 34, 57, 0.92), rgba(9, 17, 30, 0.96));
}

.ops-card {
  --card-accent: #ffba61;
  background: linear-gradient(160deg, rgba(38, 43, 30, 0.92), rgba(9, 17, 30, 0.96));
}

.team-card {
  --card-accent: #3fe8a4;
  background: linear-gradient(160deg, rgba(22, 46, 50, 0.92), rgba(9, 17, 30, 0.96));
}

.script-library,
.theater-list-layout,
.task-list-page,
.production-center,
.video-projects,
.toolbox-layout {
  width: auto;
  margin: 0 var(--page-gutter);
  padding: 20px 0 56px;
}

.search-band {
  height: 70px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 22px;
  border: 1px solid rgba(170, 180, 220, 0.18);
  border-radius: 24px;
  background: rgba(19, 24, 45, 0.82);
}

.search-band input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  color: var(--text);
  background: transparent;
}

.script-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 322px));
  gap: 24px;
  margin-top: 20px;
}

.create-script-card,
.script-card {
  min-height: 310px;
  border: 1px solid rgba(151, 164, 203, 0.24);
  border-radius: 24px;
  color: #ffffff;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 42%),
    rgba(11, 16, 30, 0.88);
}

.create-script-card {
  --card-accent: #3fe8a4;
  display: grid;
  place-items: center;
  gap: 18px;
  align-content: center;
}

.create-script-card span {
  width: 92px;
  height: 92px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px dashed rgba(180, 193, 255, 0.32);
  color: #d6dcff;
}

.script-card {
  --card-accent: #d966af;
  position: relative;
  overflow: hidden;
  padding: 32px 24px 20px;
  display: grid;
  align-content: end;
}

.script-card::before {
  content: "";
  position: absolute;
  inset: 0 0 38%;
  background: linear-gradient(140deg, rgba(155, 65, 134, 0.75), rgba(55, 96, 150, 0.6));
  transition:
    filter 0.28s ease,
    transform 0.28s ease;
}

.script-card.tone-blue {
  --card-accent: #5b84ff;
}

.script-card.tone-blue::before {
  background: linear-gradient(140deg, rgba(45, 80, 132, 0.78), rgba(20, 43, 78, 0.7));
}

.script-card:hover::before {
  filter: saturate(1.08) brightness(1.04);
  transform: scale(1.01);
}

.script-card > * {
  position: relative;
  z-index: 1;
}

.script-card b {
  color: rgba(255, 255, 255, 0.24);
  font-size: 48px;
}

.script-card h2 {
  margin: 34px 0 10px;
  font-size: 26px;
}

.script-card p,
.script-card small {
  color: #b9c3d4;
}

.script-card small {
  display: flex;
  justify-content: space-between;
}

.script-card em {
  padding: 4px 9px;
  border-radius: 999px;
  color: #87fff1;
  background: rgba(39, 215, 230, 0.12);
  font-style: normal;
}

.script-actions {
  position: absolute;
  z-index: 2;
  top: 16px;
  right: 16px;
  display: flex;
  gap: 8px;
}

.script-actions button {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #dce5ff;
  background: rgba(9, 13, 29, 0.62);
}

.pager,
.theater-pager,
.task-pager {
  width: fit-content;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 30px auto 0;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(9, 14, 27, 0.68);
}

.pager button,
.task-pager button {
  min-height: 34px;
  padding: 0 16px;
  border-radius: 14px;
  color: #aebad0;
  background: rgba(255, 255, 255, 0.04);
}

.script-import-layout {
  height: calc(100vh - 74px);
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 18px;
  padding: 20px 36px 30px;
}

.script-side,
.script-editor,
.asset-workbench,
.episodes-workbench,
.stats-board,
.project-banner,
.empty-panel,
.queue-table {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(11, 17, 32, 0.82);
}

.script-side {
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto auto auto minmax(0, 1fr) auto;
  gap: 14px;
  padding: 18px;
}

.script-side h2,
.script-editor h2,
.stats-board h1 {
  margin: 0;
}

.file-picker,
.rule-list button,
.marker-list button,
.script-side-action button {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: #dbe4fb;
  background: rgba(255, 255, 255, 0.04);
}

.file-picker {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
}

.rule-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--soft);
}

.rule-title button {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  color: #ffffff;
  background: rgba(151, 109, 255, 0.24);
}

.rule-list,
.marker-list {
  display: grid;
  gap: 8px;
}

.rule-list button,
.marker-list button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  padding: 10px;
}

.rule-list button.active {
  border-color: rgba(154, 107, 255, 0.62);
  background: rgba(154, 107, 255, 0.16);
}

.rule-list small,
.marker-list span,
.script-side small {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.marker-list {
  min-height: 0;
  overflow: auto;
  padding-right: 4px;
}

.script-side-action {
  display: grid;
  gap: 10px;
}

.script-side-action span {
  color: var(--muted);
  font-size: 12px;
}

.script-side-action button {
  color: #ffffff;
  background: var(--purple);
}

.script-editor {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.script-editor header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}

.editor-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}

.editor-actions label {
  display: flex;
  align-items: center;
  gap: 6px;
}

.editor-actions input {
  width: 120px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 8px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
}

.editor-actions button,
.editor-actions span,
.editor-actions b {
  min-height: 30px;
  padding: 0 10px;
  border-radius: 8px;
  color: #cbd5e1;
  background: rgba(255, 255, 255, 0.05);
}

.script-editor textarea {
  min-width: 0;
  min-height: 0;
  resize: none;
  border: 0;
  outline: 0;
  padding: 24px;
  color: #d7deef;
  background: transparent;
  line-height: 1.9;
}

.studio-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 380px minmax(0, 1fr);
  gap: 46px;
  padding: 18px;
  color: var(--light-text);
  background: var(--light-bg);
}

.studio-assets {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 14px;
}

.studio-brand,
.asset-library-panel,
.composer-box {
  border-radius: 16px;
  background: var(--light-panel);
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.08);
}

.studio-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
}

.studio-brand small {
  display: block;
  color: #1d4ed8;
  font-size: 10px;
  letter-spacing: 0.25em;
}

.asset-library-panel {
  padding: 18px;
  overflow: auto;
}

.asset-library-panel header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}

.asset-library-panel h2,
.asset-library-panel h3 {
  margin: 0;
}

.asset-library-panel header button {
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  color: #ffffff;
  background: #2f7cf6;
}

.studio-asset-section {
  margin: 0 0 24px;
}

.asset-add {
  width: 150px;
  min-height: 84px;
  margin-top: 10px;
  border: 1px dashed #bed0e3;
  border-radius: 8px;
  color: #1455ba;
  background: #eff7ff;
}

.asset-add.role {
  width: 96px;
  height: 115px;
  border-radius: 8px;
}

.asset-add.audio {
  min-height: 42px;
}

.studio-workspace {
  position: relative;
  min-width: 0;
  min-height: calc(100vh - 36px);
}

.studio-filters {
  position: absolute;
  top: 0;
  right: 22px;
  display: flex;
  gap: 8px;
}

.studio-filters button,
.composer-controls button {
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid #e1e7ef;
  border-radius: 999px;
  color: #475569;
  background: #ffffff;
}

.studio-empty {
  height: 64px;
  margin: 54px 22px 0;
  display: grid;
  place-items: center;
  border: 1px dashed #cdd6e2;
  border-radius: 8px;
  color: #7c8796;
}

.composer-box {
  position: absolute;
  left: 8%;
  right: 5%;
  bottom: 0;
  min-height: 260px;
  padding: 22px 18px 12px;
}

.composer-box textarea {
  width: calc(100% - 112px);
  min-height: 95px;
  margin-left: 112px;
  border: 0;
  outline: 0;
  resize: none;
  color: #64748b;
}

.add-card {
  position: absolute;
  left: 18px;
  top: 22px;
  width: 86px;
  height: 113px;
  border-radius: 8px;
  color: #9bb2c8;
  background: #f6f8fb;
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.12);
}

.composer-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid #e8edf4;
}

.composer-controls .primary-dot {
  color: #1d4ed8;
  background: #edf5ff;
}

.composer-controls .send {
  width: 40px;
  padding: 0;
  color: #ffffff;
  background: #d8e6f5;
}

.composer-controls .switch.active {
  color: #1657b7;
  background: #f8fbff;
}

.theater-list-layout {
  position: relative;
  display: grid;
  grid-template-columns: 166px minmax(0, 1fr);
  gap: 22px;
}

.theater-filter {
  min-height: calc(100vh - 130px);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.theater-filter button {
  min-height: 56px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: #aab5c9;
  background: rgba(12, 18, 33, 0.75);
}

.theater-filter button.active {
  color: #ffffff;
  border-color: rgba(170, 153, 255, 0.56);
  background: linear-gradient(135deg, rgba(67, 87, 130, 0.52), rgba(19, 27, 48, 0.82));
}

.theater-filter .recycle {
  margin-top: auto;
  color: #ff9bb0;
  background: rgba(77, 25, 45, 0.45);
}

.theater-project-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(280px, 382px));
  gap: 24px;
  align-content: start;
  align-items: start;
}

.theater-project-card,
.understanding-project-card {
  --card-accent: #27d7e6;
  height: 280px;
  position: relative;
  overflow: hidden;
  display: grid;
  align-content: space-between;
  padding: 30px;
  border: 1px solid rgba(167, 139, 250, 0.34);
  border-radius: 22px;
  color: #ffffff;
  text-align: left;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 38%),
    linear-gradient(165deg, rgba(87, 62, 117, 0.68), rgba(22, 31, 54, 0.86));
}

.theater-project-card b,
.understanding-project-card b {
  color: rgba(255, 255, 255, 0.16);
  font-size: 52px;
  transition:
    color 0.24s ease,
    transform 0.24s ease;
}

.theater-project-card:hover b,
.understanding-project-card:hover b {
  color: rgba(255, 255, 255, 0.22);
  transform: translateX(2px);
}

.theater-project-card h2,
.understanding-project-card h2 {
  margin: 0;
  font-size: 30px;
}

.theater-project-card footer,
.understanding-project-card footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #cbd5e1;
}

.theater-project-card footer span,
.understanding-project-card footer span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.theater-projects-shell {
  --home-control-bg: rgba(0, 0, 0, 0.28);
  --home-control-border: rgba(255, 255, 255, 0.07);
  --home-control-text: rgba(248, 250, 252, 0.7);
  --home-control-hover-bg: rgba(14, 165, 233, 0.08);
  --home-control-hover-border: rgba(14, 165, 233, 0.26);
  --home-control-hover-text: #ffffff;
  --home-view-all-bg: rgba(12, 24, 38, 0.58);
  --home-view-all-border: rgba(125, 211, 252, 0.14);
  --home-view-all-text: rgba(203, 213, 225, 0.82);
  --home-view-all-icon-bg: rgba(15, 23, 42, 0.68);
  --home-view-all-icon-border: rgba(125, 211, 252, 0.12);
  --home-view-all-hover-bg: rgba(14, 165, 233, 0.12);
  --home-view-all-hover-border: rgba(14, 165, 233, 0.5);
  --home-view-all-hover-text: #ffffff;
  --home-project-shadow:
    0 16px 34px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
  --home-project-hover-shadow:
    0 18px 38px rgba(0, 0, 0, 0.48),
    0 0 0 1px rgba(125, 211, 252, 0.06);
  --home-project-theater-bg: linear-gradient(135deg, rgba(24, 32, 45, 0.93), rgba(10, 17, 29, 0.95));
  --home-project-theater-hover-bg: linear-gradient(135deg, rgba(31, 42, 58, 0.97), rgba(13, 24, 39, 0.98));
  --home-project-border: rgba(125, 211, 252, 0.13);
  --home-project-theater-hover-border: rgba(148, 163, 184, 0.34);
  --home-project-empty-theater-visual: rgba(203, 213, 225, 0.54);
  --home-project-theater-empty-hover: rgba(203, 213, 225, 0.3);
  --home-project-kind-border: rgba(255, 255, 255, 0.08);
  --home-project-kind-theater-text: rgba(228, 228, 231, 0.8);
  --home-project-kind-theater-bg: rgba(255, 255, 255, 0.04);
  --home-project-kind-theater-border: rgba(255, 255, 255, 0.06);
  --home-project-kind-theater-dot: #a1a1aa;
  --home-project-kind-theater-dot-shadow: rgba(161, 161, 170, 0.5);
  --home-project-title: #ffffff;
  --home-project-time: rgba(148, 163, 184, 0.78);
  --home-project-quote: rgba(255, 255, 255, 0.12);
  --home-project-theater-quote-hover: rgba(255, 255, 255, 0.35);
  width: min(1400px, calc(100vw - 112px));
  margin: 0 auto;
  padding: 64px 0 80px;
}

.theater-projects-shell .projects-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 26px;
}

.theater-projects-shell .tab-list {
  display: inline-flex;
  gap: 6px;
  padding: 4px;
  border: 1px solid var(--home-control-border);
  border-radius: 8px;
  background: var(--home-control-bg);
}

.theater-projects-shell .tab-btn {
  height: 36px;
  min-width: 116px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--home-control-text);
  background: transparent;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease;
}

.theater-projects-shell .tab-btn:hover,
.theater-projects-shell .tab-btn.active {
  color: var(--home-control-hover-text);
  border-color: var(--home-control-hover-border);
  background: var(--home-control-hover-bg);
}

.theater-projects-shell .tab-count {
  min-width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  border: 1px solid var(--home-view-all-icon-border);
  border-radius: 999px;
  color: var(--muted);
  background: var(--home-view-all-icon-bg);
  font-size: 11px;
}

.theater-projects-shell .project-page-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
  align-items: stretch;
}

.theater-projects-shell .new-home-create-card {
  min-height: 188px;
  height: 100%;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  overflow: hidden;
  border: 1px dashed var(--home-view-all-border);
  border-radius: 8px;
  color: var(--home-view-all-text);
  background: var(--home-view-all-bg);
  box-shadow: var(--home-project-shadow);
  cursor: pointer;
  transition:
    transform 0.22s ease,
    border-color 0.22s ease,
    background 0.22s ease,
    color 0.22s ease,
    box-shadow 0.22s ease;
}

.theater-projects-shell .new-home-create-card:hover,
.theater-projects-shell .new-home-create-card:focus-visible {
  color: var(--home-view-all-hover-text);
  border-color: var(--home-view-all-hover-border);
  background: var(--home-view-all-hover-bg);
  box-shadow: var(--home-project-hover-shadow);
  outline: none;
  transform: translateY(-2px);
}

.theater-projects-shell .new-home-create-card__icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--home-view-all-icon-border);
  border-radius: 8px;
  color: currentColor;
  background: var(--home-view-all-icon-bg);
}

.theater-projects-shell .new-home-create-card__icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.theater-projects-shell .new-home-create-card strong {
  max-width: calc(100% - 32px);
  overflow: hidden;
  color: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.theater-projects-shell .project-card {
  position: relative;
  height: 188px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  outline: none;
  cursor: pointer;
  box-shadow: var(--home-project-shadow);
  transition:
    transform 0.22s ease,
    border-color 0.22s ease,
    background 0.22s ease,
    box-shadow 0.22s ease;
}

.theater-projects-shell .project-card.project-theater {
  border: 1px solid var(--home-project-border);
  background: var(--home-project-theater-bg);
}

.theater-projects-shell .project-card.project-theater:hover,
.theater-projects-shell .project-card.project-theater:focus-visible {
  border-color: var(--home-project-theater-hover-border);
  background: var(--home-project-theater-hover-bg);
  box-shadow: var(--home-project-hover-shadow);
  transform: translateY(-2px);
}

.theater-projects-shell .empty-cover-visual {
  position: absolute;
  top: 18px;
  right: 22px;
  z-index: 2;
  width: 96px;
  height: 96px;
  color: var(--home-project-empty-theater-visual);
  opacity: 0.86;
  pointer-events: none;
  transition:
    color 0.22s ease,
    transform 0.22s ease;
}

.theater-projects-shell .empty-cover-visual svg {
  width: 100%;
  height: 100%;
  display: block;
}

.theater-projects-shell .project-card:hover .empty-cover-visual,
.theater-projects-shell .project-card:focus-visible .empty-cover-visual {
  color: var(--home-project-theater-empty-hover);
  transform: translateY(-2px);
}

.theater-projects-shell .card-body {
  position: relative;
  z-index: 3;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 18px 20px;
}

.theater-projects-shell .project-kind {
  height: 22px;
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  padding: 0 8px;
  border: 1px solid var(--home-project-kind-theater-border);
  border-radius: 4px;
  color: var(--home-project-kind-theater-text);
  background: var(--home-project-kind-theater-bg);
  font-size: 11px;
  font-weight: 600;
}

.theater-projects-shell .kind-mark {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--home-project-kind-theater-dot);
  box-shadow: 0 0 6px var(--home-project-kind-theater-dot-shadow);
}

.theater-projects-shell .card-main {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin-top: auto;
}

.theater-projects-shell .quote-mark {
  margin-bottom: 10px;
  color: var(--home-project-quote);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 44px;
  font-weight: 700;
  line-height: 0.9;
  transition:
    color 0.22s ease,
    transform 0.22s ease;
  user-select: none;
}

.theater-projects-shell .project-card:hover .quote-mark,
.theater-projects-shell .project-card:focus-visible .quote-mark {
  color: var(--home-project-theater-quote-hover);
  transform: translateY(-2px);
}

.theater-projects-shell .project-title-container {
  width: 100%;
  z-index: 4;
  margin: 0;
  color: var(--home-project-title);
  font-size: 18px;
  font-weight: 650;
  line-height: 1.4;
}

.theater-projects-shell .card-time {
  margin-top: 8px;
  color: var(--home-project-time);
  font-size: 12px;
}

.theater-projects-shell .projects-pagination {
  margin-top: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.theater-projects-shell .pagination-btn,
.theater-projects-shell .pagination-indicator {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--home-control-border);
  border-radius: 6px;
  color: var(--home-control-text);
  background: var(--home-control-bg);
  font-size: 12px;
  font-weight: 650;
}

.theater-projects-shell .pagination-btn {
  padding: 0 14px;
  cursor: pointer;
}

.theater-projects-shell .pagination-btn:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.theater-projects-shell .pagination-indicator {
  min-width: 86px;
  padding: 0 12px;
  color: var(--muted);
}

.theater-list-main {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 18px;
  padding-right: 10px;
}

.theater-list-hero {
  min-height: 176px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  padding: 28px 32px;
  border: 1px solid rgba(151, 164, 203, 0.22);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(20, 31, 57, 0.94), rgba(12, 18, 31, 0.9)),
    rgba(8, 14, 26, 0.8);
}

.theater-list-hero small,
.theater-section-head p {
  color: var(--muted);
}

.theater-list-hero small {
  font-weight: 900;
  letter-spacing: 0;
}

.theater-list-hero h1 {
  margin: 8px 0 10px;
  font-size: 34px;
}

.theater-list-hero p {
  max-width: 780px;
  margin: 0;
  color: #aeb9cc;
  line-height: 1.7;
}

.theater-list-actions,
.theater-section-head,
.theater-section-head > div + button {
  display: flex;
  align-items: center;
  gap: 10px;
}

.theater-list-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.theater-list-actions button,
.theater-section-head button {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: #dce6f8;
  background: rgba(255, 255, 255, 0.055);
}

.theater-list-actions .primary {
  border-color: rgba(63, 232, 164, 0.44);
  color: #071711;
  background: linear-gradient(135deg, var(--green), #9cffdb);
  font-weight: 900;
}

.theater-kpi-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.theater-kpi-strip article {
  min-height: 104px;
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 18px;
  border: 1px solid rgba(151, 164, 203, 0.2);
  border-radius: 12px;
  background: rgba(9, 15, 29, 0.72);
}

.theater-kpi-strip span,
.theater-kpi-strip small {
  color: var(--muted);
}

.theater-kpi-strip strong {
  font-size: 26px;
}

.theater-section-head {
  justify-content: space-between;
  min-height: 54px;
}

.theater-section-head h2,
.theater-section-head p {
  margin: 0;
}

.theater-list-main .theater-project-grid {
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 18px;
}

.theater-project-card {
  min-height: 334px;
  height: auto;
  align-content: initial;
  grid-template-rows: auto auto auto 1fr auto;
  gap: 18px;
  padding: 24px;
  border-radius: 12px;
  cursor: pointer;
  background:
    radial-gradient(circle at 88% 14%, rgba(63, 232, 164, 0.18), transparent 34%),
    linear-gradient(150deg, rgba(34, 47, 82, 0.92), rgba(12, 18, 32, 0.92));
}

.theater-project-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.theater-project-card header span,
.theater-project-card header em {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-style: normal;
}

.theater-project-card header span {
  color: #b9f8e1;
  background: rgba(63, 232, 164, 0.14);
}

.theater-project-card header em {
  color: #ffe0ad;
  background: rgba(255, 186, 97, 0.14);
}

.project-card-title {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.project-card-title > b {
  color: rgba(255, 255, 255, 0.18);
  font-size: 52px;
  line-height: 0.9;
}

.project-card-title h2,
.project-card-title p {
  margin: 0;
}

.project-card-title p {
  max-width: 760px;
  margin-top: 8px;
  color: #aeb9cc;
  line-height: 1.55;
}

.project-card-progress {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.project-card-progress span {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.project-card-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--green), var(--cyan), var(--purple));
}

.project-card-progress strong {
  color: #eaf2ff;
}

.project-card-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.project-card-metrics span {
  min-height: 70px;
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 12px;
  border: 1px solid rgba(151, 164, 203, 0.18);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.045);
}

.project-card-metrics small {
  color: #8f9bb2;
}

.project-card-metrics b {
  color: #f4f8ff;
  font-size: 16px;
}

.theater-project-card footer strong {
  color: var(--green);
}

.theater-create-card {
  min-height: 334px;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 14px;
  padding: 24px;
  border: 1px dashed rgba(151, 164, 203, 0.32);
  border-radius: 12px;
  color: #dce6f8;
  background: rgba(9, 15, 29, 0.55);
  cursor: pointer;
}

.theater-create-card > span {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: var(--green);
  background: rgba(63, 232, 164, 0.12);
}

.theater-create-card h2,
.theater-create-card p {
  margin: 0;
}

.theater-create-card p {
  max-width: 520px;
  color: var(--muted);
  line-height: 1.65;
}

.floating-search {
  position: fixed;
  right: 46px;
  bottom: 78px;
  width: 52px;
  height: 52px;
  border: 1px solid var(--line);
  border-radius: 16px;
  color: #dce6f8;
  background: rgba(9, 15, 28, 0.8);
}

.theater-detail-layout {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 18px;
  padding: 20px 18px 36px;
}

.project-rail {
  min-height: calc(100vh - 130px);
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 20px 6px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(9, 14, 29, 0.78);
}

.project-rail button {
  min-height: 64px;
  display: grid;
  place-items: center;
  gap: 4px;
  border-radius: 10px;
  color: #8d98ad;
  background: transparent;
  font-size: 12px;
}

.project-rail button.active {
  color: #ffffff;
  outline: 1px solid rgba(194, 179, 255, 0.7);
  background: linear-gradient(135deg, rgba(137, 80, 255, 0.5), rgba(54, 71, 129, 0.42));
}

.project-stage {
  min-width: 0;
  min-height: calc(100vh - 130px);
  border: 1px solid rgba(151, 164, 203, 0.18);
  border-radius: 16px;
  background:
    linear-gradient(rgba(67, 78, 117, 0.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(67, 78, 117, 0.11) 1px, transparent 1px),
    linear-gradient(120deg, rgba(10, 20, 38, 0.96), rgba(13, 11, 31, 0.97));
  background-size: 44px 44px, 44px 44px, auto;
  overflow: hidden;
}

.overview-hero {
  min-height: 640px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 390px;
  gap: 56px;
  align-items: center;
  padding: 70px 90px;
}

.badge-dot {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 13px;
  border-radius: 999px;
  color: #e3d8ff;
  background: rgba(128, 78, 255, 0.22);
  font-size: 12px;
  font-weight: 900;
}

.overview-copy h1 {
  margin: 28px 0 18px;
  font-size: clamp(42px, 5vw, 60px);
  line-height: 1.05;
}

.overview-copy p {
  max-width: 720px;
  color: #aab6ca;
  line-height: 1.75;
}

.pipeline-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 42px;
  margin-top: 28px;
}

.pipeline-cards button {
  min-height: 120px;
  display: grid;
  gap: 8px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  color: #dfe7f7;
  text-align: left;
  background: rgba(12, 18, 34, 0.75);
}

.pipeline-cards button.active {
  border-color: rgba(154, 107, 255, 0.74);
  box-shadow:
    0 12px 26px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.pipeline-cards button.done {
  background: rgba(8, 67, 72, 0.45);
}

.pipeline-cards b {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #ffffff;
  background: rgba(154, 107, 255, 0.7);
}

.pipeline-cards span {
  color: #a0abbf;
}

.primary-glow {
  min-height: 48px;
  margin-top: 22px;
  padding: 0 24px;
  border-radius: 10px;
  color: #ffffff;
  background: linear-gradient(135deg, #a96bff, #6d6aff);
  box-shadow: 0 14px 32px rgba(138, 92, 255, 0.35);
}

.asset-status-card {
  padding: 24px;
  border: 1px solid rgba(151, 164, 203, 0.2);
  border-radius: 22px;
  background: rgba(8, 14, 28, 0.76);
}

.asset-status-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.asset-status-card header strong {
  font-size: 24px;
}

.asset-status-card button {
  width: 100%;
  min-height: 86px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
  padding: 0 16px;
  border: 1px solid rgba(255, 93, 135, 0.2);
  border-radius: 14px;
  color: #fff;
  text-align: left;
  background: rgba(89, 32, 59, 0.36);
}

.asset-status-card svg {
  color: #ff9bbd;
}

.asset-status-card small {
  display: block;
  margin-top: 4px;
  color: #9aa8bf;
}

.theater-project-detail-page {
  height: 100vh;
  overflow: hidden;
  background: #020617;
}

.theater-project-detail-page .topbar {
  height: 77px;
  padding: 0 36px;
  border-bottom-color: rgba(118, 145, 176, 0.14);
  background: rgba(4, 8, 20, 0.96);
}

.theater-project-detail-page .topbar .icon-btn {
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
}

.theater-project-detail-page .topbar .brand {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  background: transparent;
}

.theater-project-detail-page .topbar .brand > .beita-brand-crop {
  width: 36px;
  height: 36px;
  border-radius: 12px;
}

.theater-project-detail-page .topbar .brand > span:last-child {
  color: #fff;
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
}

.theater-project-detail-page .topbar .brand b {
  margin-left: 5px;
  color: rgba(205, 188, 255, 0.96);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.16em;
}

.theater-project-detail-page .topbar .theater-theme-toggle {
  height: 34px;
  min-height: 34px;
  padding: 0 12px 0 10px;
  gap: 7px;
  border-color: rgba(148, 163, 184, 0.24);
  color: #d8e1ee;
  background: rgba(15, 23, 42, 0.72);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

.theater-project-detail-page .topbar .theater-theme-toggle:hover {
  color: #fff;
  border-color: rgba(162, 118, 255, 0.44);
  background: rgba(30, 41, 59, 0.9);
}

.theater-project-detail-page .topbar .theme-icon,
.theater-project-detail-page .topbar .theme-icon svg {
  width: 16px;
  height: 16px;
  display: inline-grid;
  place-items: center;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: #d2baff;
}

.theater-project-detail-page .theater-theme-segment {
  height: 36px;
  display: inline-grid;
  grid-template-columns: repeat(2, 76px);
  gap: 3px;
  padding: 3px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.72);
}

.theater-project-detail-page .theater-theme-segment button {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 9px;
  border: 0;
  border-radius: 5px;
  color: #8491a5;
  background: transparent;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.theater-project-detail-page .theater-theme-segment button:hover {
  color: #e5e7eb;
  background: rgba(255, 255, 255, 0.06);
}

.theater-project-detail-page .theater-theme-segment button.active {
  color: #f8fafc;
  background: rgba(124, 58, 237, 0.48);
  box-shadow: 0 3px 10px rgba(46, 16, 101, 0.24);
}

.theater-project-detail-page .theater-theme-segment .theme-icon,
.theater-project-detail-page .theater-theme-segment .theme-icon svg {
  width: 14px;
  height: 14px;
  display: inline-grid;
  place-items: center;
  color: currentColor;
}

.theater-project-detail-page[data-theater-theme="light"] {
  color-scheme: light;
  --theater-line: rgba(51, 65, 85, 0.14);
  --theater-line-strong: rgba(79, 70, 229, 0.28);
  --theater-text: #475569;
  --theater-text-strong: #111827;
  --theater-text-soft: #64748b;
  --theater-control-bg: rgba(241, 245, 249, 0.78);
  --theater-control-hover-bg: rgba(226, 232, 240, 0.9);
  background: #eef3f8;
  color: #475569;
}

.theater-project-detail-page[data-theater-theme="light"] .topbar {
  border-bottom-color: rgba(51, 65, 85, 0.14);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 8px 24px rgba(45, 64, 96, 0.08);
}

.theater-project-detail-page[data-theater-theme="light"] .topbar .icon-btn,
.theater-project-detail-page[data-theater-theme="light"] .topbar .theater-theme-toggle,
.theater-project-detail-page[data-theater-theme="light"] .topbar .team-chip {
  border-color: rgba(51, 65, 85, 0.16);
  color: #475569;
  background: rgba(248, 250, 252, 0.96);
}

.theater-project-detail-page[data-theater-theme="light"] .topbar .brand > span:last-child {
  color: #111827;
}

.theater-project-detail-page[data-theater-theme="light"] .topbar .brand b {
  color: #4f46e5;
}

.theater-project-detail-page[data-theater-theme="light"] .topbar .theme-icon,
.theater-project-detail-page[data-theater-theme="light"] .topbar .theme-icon svg {
  color: #4f46e5;
}

.theater-project-detail-page[data-theater-theme="light"] .theater-theme-segment {
  border-color: rgba(51, 65, 85, 0.16);
  background: #eef2f7;
}

.theater-project-detail-page[data-theater-theme="light"] .theater-theme-segment button {
  color: #64748b;
}

.theater-project-detail-page[data-theater-theme="light"] .theater-theme-segment button:hover {
  color: #1e293b;
  background: rgba(255, 255, 255, 0.88);
}

.theater-project-detail-page[data-theater-theme="light"] .theater-theme-segment button.active {
  color: #4338ca;
  background: #fff;
  box-shadow: 0 2px 8px rgba(71, 85, 105, 0.16);
}

body[data-theme="light"] {
  color-scheme: light;
  --bg: #eef3f8;
  --bg-2: #e7edf5;
  --panel: rgba(255, 255, 255, 0.94);
  --panel-2: rgba(248, 250, 252, 0.96);
  --line: rgba(51, 65, 85, 0.14);
  --line-strong: rgba(79, 70, 229, 0.28);
  --text: #172033;
  --muted: #64748b;
  --soft: #475569;
}

body[data-theme="light"] .storyboard-generation-workbench-overlay,
body[data-theme="light"] .storyboard-dialog-overlay {
  color: #475569;
  background: rgba(100, 116, 139, 0.36);
}

body[data-theme="light"] .storyboard-generation-workbench,
body[data-theme="light"] .storyboard-dialog-card {
  border-color: rgba(51, 65, 85, 0.16);
  color: #475569;
  background: #f8fafc;
  box-shadow: 0 24px 54px rgba(51, 65, 85, 0.24);
}

body[data-theme="light"] .storyboard-generation-workbench-left {
  border-right-color: rgba(51, 65, 85, 0.12);
  background: #fff;
}

body[data-theme="light"] .storyboard-generation-workbench-right {
  background: #f2f5f9;
}

body[data-theme="light"] .storyboard-generation-workbench-close,
body[data-theme="light"] .storyboard-dialog-close {
  color: #64748b;
}

body[data-theme="light"] .storyboard-generation-workbench-close:hover,
body[data-theme="light"] .storyboard-dialog-close:hover {
  color: #111827;
  background: #e2e8f0;
}

body[data-theme="light"] .storyboard-generation-workbench-left > header h2,
body[data-theme="light"] .storyboard-generation-result-section h3,
body[data-theme="light"] .storyboard-generation-resource-panel > header strong,
body[data-theme="light"] .storyboard-generation-prompt-panel header strong,
body[data-theme="light"] .storyboard-generation-bottom-row header strong,
body[data-theme="light"] .storyboard-dialog-head h2 {
  color: #111827;
}

body[data-theme="light"] .storyboard-generation-top-row > input,
body[data-theme="light"] .storyboard-generation-dropdown-trigger,
body[data-theme="light"] .storyboard-generation-select.model,
body[data-theme="light"] .storyboard-generation-continuity .compact-switch,
body[data-theme="light"] .storyboard-generation-previous-tail {
  border-color: rgba(51, 65, 85, 0.16);
  color: #334155;
  background: #f8fafc;
}

body[data-theme="light"] .storyboard-generation-dropdown-trigger:hover,
body[data-theme="light"] .storyboard-generation-dropdown.is-open .storyboard-generation-dropdown-trigger {
  border-color: rgba(79, 70, 229, 0.34);
  color: #111827;
  background: #eef2ff;
}

body[data-theme="light"] .storyboard-generation-dropdown-panel {
  border-color: rgba(51, 65, 85, 0.16);
  background: #fff;
  box-shadow: 0 16px 34px rgba(51, 65, 85, 0.2);
  scrollbar-color: #cbd5e1 transparent;
}

body[data-theme="light"] .storyboard-generation-dropdown-option {
  color: #475569;
}

body[data-theme="light"] .storyboard-generation-dropdown-option:hover,
body[data-theme="light"] .storyboard-generation-dropdown-option.is-active {
  color: #312e81;
  background: #eef2ff;
}

body[data-theme="light"] .storyboard-generation-resource-panel,
body[data-theme="light"] .storyboard-generation-prompt-panel,
body[data-theme="light"] .storyboard-generation-prompt-grid > label,
body[data-theme="light"] .storyboard-generation-bottom-row > section {
  border-color: rgba(51, 65, 85, 0.13);
  background: #f8fafc;
}

body[data-theme="light"] .storyboard-generation-prompt-panel > header,
body[data-theme="light"] .storyboard-generation-prompt-grid > label > span {
  border-color: rgba(51, 65, 85, 0.12);
}

body[data-theme="light"] .storyboard-generation-prompt-grid > label > span,
body[data-theme="light"] .storyboard-generation-continuity .compact-switch > span {
  color: #334155;
}

body[data-theme="light"] .storyboard-generation-prompt-grid textarea {
  color: #1e293b;
}

body[data-theme="light"] .storyboard-generation-reference-add,
body[data-theme="light"] .storyboard-generation-reference-thumb,
body[data-theme="light"] .storyboard-generation-voice-empty,
body[data-theme="light"] .storyboard-generation-voice-list span,
body[data-theme="light"] .storyboard-generation-material-pager button {
  border-color: rgba(51, 65, 85, 0.15);
  color: #475569;
  background: #fff;
}

body[data-theme="light"] .storyboard-generation-final-empty,
body[data-theme="light"] .storyboard-generation-drafts-empty,
body[data-theme="light"] .storyboard-generation-result-tile {
  border-color: rgba(51, 65, 85, 0.16);
  color: #64748b;
  background: #e7ecf4;
}

body[data-theme="light"] .storyboard-generation-model-submit button {
  color: #fff;
  border-color: #6d5ce7;
  background: #6d5ce7;
}

body[data-theme="light"] .storyboard-generation-model-submit button:disabled,
body[data-theme="light"] .storyboard-generation-dropdown-trigger:disabled,
body[data-theme="light"] button:disabled {
  opacity: 0.48;
}

.theater-project-detail-page[data-theater-theme="light"] .detail-container {
  background: #eef3f8;
}

.theater-project-detail-page[data-theater-theme="light"] .project-rail.side-nav {
  border-color: rgba(51, 65, 85, 0.14);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.84), 0 18px 40px rgba(45, 64, 96, 0.1);
}

.theater-project-detail-page[data-theater-theme="light"] .project-rail .side-nav-item {
  color: rgba(71, 85, 105, 0.74);
}

.theater-project-detail-page[data-theater-theme="light"] .project-rail .side-nav-item:hover,
.theater-project-detail-page[data-theater-theme="light"] .project-rail .side-nav-item.active {
  color: #111827;
  border-color: rgba(79, 70, 229, 0.28);
  background: rgba(79, 70, 229, 0.1);
  box-shadow: none;
}

.theater-project-detail-page[data-theater-theme="light"] .project-stage,
.theater-project-detail-page[data-theater-theme="light"] .storyboard-workspace {
  border-color: rgba(51, 65, 85, 0.14);
  color: #475569;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 250, 252, 0.92));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.72), 0 18px 44px rgba(45, 64, 96, 0.12);
}

.theater-project-detail-page[data-theater-theme="light"] .episode-tabs-panel {
  border-bottom-color: rgba(51, 65, 85, 0.14);
  background: rgba(241, 245, 249, 0.72);
}

.theater-project-detail-page[data-theater-theme="light"] .episode-tab,
.theater-project-detail-page[data-theater-theme="light"] .storyboard-stat-tag,
.theater-project-detail-page[data-theater-theme="light"] .storyboard-batch-btn,
.theater-project-detail-page[data-theater-theme="light"] .script-toggle-icon,
.theater-project-detail-page[data-theater-theme="light"] .script-collapsed-tab {
  border-color: rgba(51, 65, 85, 0.14);
  color: #64748b;
  background: rgba(241, 245, 249, 0.78);
  box-shadow: none;
}

.theater-project-detail-page[data-theater-theme="light"] .episode-tab:hover,
.theater-project-detail-page[data-theater-theme="light"] .episode-tab.active,
.theater-project-detail-page[data-theater-theme="light"] .storyboard-stat-tag:hover,
.theater-project-detail-page[data-theater-theme="light"] .storyboard-stat-tag.active,
.theater-project-detail-page[data-theater-theme="light"] .script-toggle-icon:hover,
.theater-project-detail-page[data-theater-theme="light"] .script-collapsed-tab:hover {
  color: #111827;
  border-color: rgba(79, 70, 229, 0.28);
  background: rgba(79, 70, 229, 0.1);
  box-shadow: none;
}

.theater-project-detail-page[data-theater-theme="light"] .script-sidebar {
  border-right-color: rgba(51, 65, 85, 0.12);
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.9), rgba(241, 245, 249, 0.86));
  box-shadow: inset -10px 0 20px -14px rgba(45, 64, 96, 0.14);
}

.theater-project-detail-page[data-theater-theme="light"] .script-pane h3,
.theater-project-detail-page[data-theater-theme="light"] .shot-head h3,
.theater-project-detail-page[data-theater-theme="light"] .shot-card-head h4 {
  color: #111827;
}

.theater-project-detail-page[data-theater-theme="light"] .seedance-shot-card,
.theater-project-detail-page[data-theater-theme="light"] .shot-card {
  border-color: rgba(51, 65, 85, 0.14);
  color: #475569;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 12px 30px rgba(45, 64, 96, 0.08);
}

.theater-project-detail-page[data-theater-theme="light"] .seedance-prompt-view,
.theater-project-detail-page[data-theater-theme="light"] .seedance-prompt-view p,
.theater-project-detail-page[data-theater-theme="light"] .shot-copy p {
  color: #475569;
}

.theater-project-detail-page .detail-container {
  height: calc(100vh - 77px);
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 18px;
  padding: 18px 28px 26px 18px;
}

.theater-project-detail-page .detail-container.is-empty-project {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  padding: 0;
}

.theater-project-detail-page .detail-container.is-fullbleed {
  width: 100%;
}

.theater-project-detail-page .empty-script-guide {
  min-height: 100%;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 22px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 38%, rgba(162, 118, 255, 0.12), transparent 26%),
    linear-gradient(rgba(148, 163, 184, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.045) 1px, transparent 1px);
  background-size: auto, 44px 44px, 44px 44px;
}

.theater-project-detail-page .empty-script-copy {
  margin: 0;
  color: rgba(203, 213, 225, 0.74);
  font-size: 16px;
  line-height: 1.7;
}

.theater-project-detail-page .empty-script-action {
  min-width: 112px;
  height: 40px;
  border: 1px solid rgba(162, 118, 255, 0.45);
  border-radius: 8px;
  padding: 0 20px;
  background: linear-gradient(180deg, rgba(162, 118, 255, 0.28), rgba(124, 58, 237, 0.2));
  color: #f8fafc;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.08), 0 12px 26px rgba(88, 62, 180, 0.24);
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.theater-project-detail-page .empty-script-action:hover {
  transform: translateY(-1px);
  border-color: rgba(190, 166, 255, 0.76);
  background: linear-gradient(180deg, rgba(162, 118, 255, 0.36), rgba(124, 58, 237, 0.28));
}

.theater-project-detail-page .detail-container.is-script-import {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  padding: 0;
}

.theater-script-import-shell .script-import-page {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #050914;
}

.theater-script-import-shell .script-import-panel {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 398px minmax(0, 1fr);
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #111723;
}

.theater-script-import-shell .script-structure-panel {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  border-right: 1px solid rgba(118, 145, 176, 0.16);
  background: #101622;
}

.theater-script-import-shell .script-structure-panel.is-empty-input {
  justify-content: flex-start;
  align-items: stretch;
  padding: 24px;
}

.theater-script-import-shell .theater-next-empty-upload {
  width: 100%;
  max-width: none;
  display: grid;
  gap: 12px;
  text-align: center;
}

.theater-script-import-shell .theater-next-empty-upload-card {
  width: 100%;
  min-height: 192px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 8px;
  padding: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
  overflow: hidden;
  color: rgba(147, 163, 184, 0.92);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)),
    color-mix(in srgb, rgba(7, 11, 22, 0.72) 94%, #a276ff 6%);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.04);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.theater-script-import-shell .theater-next-empty-upload-card:hover {
  border-color: rgba(162, 118, 255, 0.5);
  background:
    linear-gradient(180deg, rgba(162, 118, 255, 0.07), rgba(255, 255, 255, 0.016)),
    color-mix(in srgb, rgba(7, 11, 22, 0.72) 91%, #a276ff 9%);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), 0 12px 28px rgba(2, 6, 23, 0.16);
  transform: translateY(-1px);
}

.theater-script-import-shell .theater-next-empty-upload-main {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  min-height: 112px;
  padding: 22px 18px 16px;
}

.theater-script-import-shell .theater-next-empty-upload-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  color: rgba(203, 213, 225, 0.92);
  background: rgba(15, 23, 42, 0.2);
}

.theater-script-import-shell .theater-next-empty-upload-icon svg {
  width: 30px;
  height: 30px;
}

.theater-script-import-shell .theater-next-empty-upload-copy {
  min-width: 0;
  display: grid;
  gap: 7px;
}

.theater-script-import-shell .theater-next-empty-upload-copy strong {
  color: rgb(226, 232, 240);
  font-size: 16px;
  font-weight: 800;
}

.theater-script-import-shell .theater-next-empty-upload-copy span {
  color: rgba(147, 163, 184, 0.92);
  font-size: 13px;
  line-height: 1.5;
}

.theater-script-import-shell .theater-next-empty-upload-types {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 7px;
  padding: 0 18px 16px;
}

.theater-script-import-shell .theater-next-empty-upload-types b {
  min-width: 44px;
  border: 1px solid rgba(118, 145, 176, 0.17);
  border-radius: 6px;
  padding: 0;
  color: rgba(203, 213, 225, 0.78);
  background: rgba(255, 255, 255, 0.045);
  font-size: 11px;
  font-weight: 700;
  line-height: 24px;
  text-align: center;
}

.theater-script-import-shell .theater-next-empty-upload-action {
  min-height: 42px;
  display: grid;
  place-items: center;
  border-top: 1px solid rgba(148, 163, 184, 0.11);
  color: rgb(190, 166, 255);
  background: rgba(255, 255, 255, 0.02);
  font-size: 13px;
  font-weight: 700;
}

.theater-script-import-shell .script-panel-head,
.theater-script-import-shell .script-editor-head {
  color: rgb(225, 230, 240);
}

.theater-script-import-shell .script-panel-head > span,
.theater-script-import-shell .script-editor-head > div:first-child > span {
  display: block;
  color: rgba(136, 146, 163, 0.84);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
}

.theater-script-import-shell .script-panel-head h2,
.theater-script-import-shell .script-editor-head h3 {
  margin: 7px 0 0;
  color: rgb(225, 230, 240);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
}

.theater-script-import-shell .compact-upload {
  display: grid;
  gap: 8px;
}

.theater-script-import-shell .theater-next-upload-row {
  position: relative;
  width: fit-content;
  display: flex;
  align-items: center;
}

.theater-script-import-shell .theater-next-file-meta {
  color: rgba(136, 146, 163, 0.88);
  font-size: 12px;
  line-height: 1.4;
}

.theater-script-import-shell .theater-next-upload-picker {
  position: relative;
  display: inline-flex;
}

.theater-script-import-shell .theater-next-file-native {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.theater-script-import-shell .theater-next-file-native:disabled {
  cursor: wait;
}

.theater-script-import-shell .theater-next-file-native:focus-visible + .upload-button {
  border-color: rgba(190, 166, 255, 0.7);
  box-shadow: 0 0 0 3px rgba(162, 118, 255, 0.2);
}

.theater-script-import-shell .upload-button {
  width: fit-content;
  min-width: 166px;
  min-height: 50px;
  border: 1px dashed rgba(162, 118, 255, 0.34);
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 0 14px;
  color: rgb(225, 230, 240);
  background: rgba(255, 255, 255, 0.035);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  pointer-events: none;
}

.theater-script-import-shell .upload-button:hover {
  border-color: rgba(190, 166, 255, 0.62);
  background: rgba(162, 118, 255, 0.14);
}

.theater-script-import-shell .upload-button.is-loading {
  cursor: wait;
  border-style: solid;
  border-color: rgba(63, 232, 164, 0.48);
  color: #dffff3;
  background: rgba(63, 232, 164, 0.1);
  box-shadow: 0 0 20px rgba(63, 232, 164, 0.14);
}

.theater-script-import-shell .theater-next-file-delete {
  position: absolute;
  top: -7px;
  right: -7px;
  z-index: 5;
  width: 20px;
  height: 20px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 999px;
  display: grid;
  place-items: center;
  padding: 0;
  color: rgba(203, 213, 225, 0.86);
  background: rgb(24, 30, 42);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.36);
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  opacity: 0;
  transform: scale(0.86);
  transition: opacity 0.14s ease, transform 0.14s ease, background 0.14s ease, border-color 0.14s ease;
  cursor: pointer;
}

.theater-script-import-shell .theater-next-upload-row:hover .theater-next-file-delete,
.theater-script-import-shell .theater-next-file-delete:focus-visible {
  opacity: 1;
  transform: scale(1);
}

.theater-script-import-shell .theater-next-file-delete:hover {
  border-color: rgba(248, 113, 113, 0.48);
  color: #ffffff;
  background: rgb(166, 42, 56);
}

.theater-script-import-shell .theater-next-doc-badge {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 7px;
  color: #ffffff;
  background: linear-gradient(180deg, #5d7cff, #3448d8);
  font-size: 16px;
  font-weight: 900;
}

.theater-script-import-shell .theater-next-section-title {
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgba(170, 180, 196, 0.92);
  font-size: 14px;
  font-weight: 700;
}

.theater-script-import-shell .theater-next-section-title button {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(162, 118, 255, 0.24);
  border-radius: 8px;
  color: rgb(225, 230, 240);
  background: rgba(162, 118, 255, 0.12);
  cursor: pointer;
}

.theater-script-import-shell .theater-next-marker-title {
  margin-bottom: -6px;
}

.theater-script-import-shell .theater-next-empty-rules {
  min-height: 140px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(118, 145, 176, 0.13);
  border-radius: 12px;
  color: rgba(136, 146, 163, 0.86);
  background: rgba(255, 255, 255, 0.025);
  font-size: 14px;
}

.theater-script-import-shell .theater-next-rule-list,
.theater-script-import-shell .theater-next-marker-list {
  display: grid;
  gap: 8px;
}

.theater-script-import-shell .theater-next-marker-list {
  min-height: 0;
  overflow: auto;
  padding-right: 4px;
}

.theater-script-import-shell .theater-next-marker-row {
  position: relative;
}

.theater-script-import-shell .theater-next-rule-row {
  position: relative;
}

.theater-script-import-shell .theater-next-rule-row:has(.theater-next-rule-delete) .theater-next-rule-card {
  padding-right: 42px;
}

.theater-script-import-shell .theater-next-rule-card,
.theater-script-import-shell .theater-next-marker-select {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(118, 145, 176, 0.14);
  border-radius: 10px;
  padding: 10px 12px;
  color: rgb(170, 180, 196);
  background: rgba(255, 255, 255, 0.035);
  text-align: left;
  cursor: pointer;
}

.theater-script-import-shell .theater-next-marker-select {
  padding-right: 42px;
}

.theater-script-import-shell .theater-next-rule-card:hover,
.theater-script-import-shell .theater-next-marker-select:hover,
.theater-script-import-shell .theater-next-rule-card.active,
.theater-script-import-shell .theater-next-marker-row.active .theater-next-marker-select {
  color: rgb(225, 230, 240);
  border-color: rgba(162, 118, 255, 0.34);
  background: rgba(162, 118, 255, 0.12);
}

.theater-script-import-shell .theater-next-rule-card strong,
.theater-script-import-shell .theater-next-marker-select strong {
  display: block;
  overflow: hidden;
  color: inherit;
  font-size: 13px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.theater-script-import-shell .theater-next-rule-card small,
.theater-script-import-shell .theater-next-marker-select span {
  display: block;
  margin-top: 4px;
  color: rgba(136, 146, 163, 0.86);
  font-size: 12px;
}

.theater-script-import-shell .theater-next-marker-delete {
  position: absolute;
  top: 50%;
  right: 8px;
  width: 20px;
  height: 20px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 999px;
  display: grid;
  place-items: center;
  padding: 0;
  color: rgba(203, 213, 225, 0.82);
  background: rgba(18, 24, 36, 0.94);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.32);
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  opacity: 0;
  transform: translateY(-50%) scale(0.86);
  transition: opacity 0.14s ease, transform 0.14s ease, background 0.14s ease, border-color 0.14s ease;
  cursor: pointer;
}

.theater-script-import-shell .theater-next-marker-row:hover .theater-next-marker-delete,
.theater-script-import-shell .theater-next-marker-delete:focus-visible {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

.theater-script-import-shell .theater-next-marker-delete:hover {
  border-color: rgba(248, 113, 113, 0.45);
  color: #ffffff;
  background: rgb(166, 42, 56);
}

.theater-script-import-shell .theater-next-rule-delete {
  position: absolute;
  top: 50%;
  right: 9px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 999px;
  color: rgba(203, 213, 225, 0.82);
  background: rgba(18, 24, 36, 0.94);
  opacity: 0;
  transform: translateY(-50%) scale(0.86);
  transition: opacity 0.14s ease, transform 0.14s ease, background 0.14s ease, border-color 0.14s ease;
  cursor: pointer;
}

.theater-script-import-shell .theater-next-rule-delete svg {
  width: 13px;
  height: 13px;
}

.theater-script-import-shell .theater-next-rule-row:hover .theater-next-rule-delete,
.theater-script-import-shell .theater-next-rule-delete:focus-visible {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

.theater-script-import-shell .theater-next-rule-delete:hover {
  border-color: rgba(248, 113, 113, 0.45);
  color: #ffffff;
  background: rgb(166, 42, 56);
}

.theater-script-import-shell .theater-next-marker-empty {
  border: 1px dashed rgba(148, 163, 184, 0.16);
  border-radius: 10px;
  padding: 14px 12px;
  color: rgba(136, 146, 163, 0.88);
  background: rgba(255, 255, 255, 0.025);
  font-size: 13px;
  line-height: 1.5;
}

.theater-script-import-shell .theater-next-rule-card em {
  min-width: 34px;
  border-radius: 999px;
  padding: 3px 8px;
  color: rgb(190, 166, 255);
  background: rgba(162, 118, 255, 0.12);
  font-size: 12px;
  font-style: normal;
  text-align: center;
}

.theater-script-import-shell .theater-next-script-editor__action {
  margin-top: auto;
}

.theater-script-import-shell .theater-next-script-editor__action.is-empty {
  margin-top: 18px;
  gap: 12px;
}

.theater-script-import-shell .theater-next-script-editor__action span {
  color: rgba(136, 146, 163, 0.88);
  font-size: 12px;
}

.theater-script-import-shell .theater-next-script-editor__action span.warn {
  color: rgb(251, 191, 36);
}

.theater-script-import-shell .primary-action {
  width: 100%;
  min-height: 38px;
  border: 1px solid rgba(162, 118, 255, 0.42);
  border-radius: 9px;
  color: rgb(190, 166, 255);
  background: transparent;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.theater-script-import-shell .primary-action:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.theater-script-import-shell .script-workspace {
  min-width: 0;
  min-height: 0;
  display: grid;
  background: #111723;
}

.theater-script-import-shell .script-editor-card {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.theater-script-import-shell .script-editor-head {
  min-height: 118px;
  display: grid;
  grid-template-columns: 136px minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  padding: 18px 32px;
  border-bottom: 1px solid rgba(118, 145, 176, 0.14);
  background: #131925;
}

.theater-script-import-shell .script-editor-head > div:first-child {
  min-width: 112px;
}

.theater-script-import-shell .theater-next-font-size,
.theater-script-import-shell .theater-next-theme-toggle {
  display: flex;
  align-items: center;
}

.theater-script-import-shell .script-editor-actions {
  min-width: 0;
  width: 100%;
  display: grid;
  gap: 9px;
  justify-items: end;
}

.theater-script-import-shell .script-editor-actions.is-empty {
  align-self: center;
}

.theater-script-import-shell .theater-next-toolbar-row {
  width: 100%;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.theater-script-import-shell .theater-next-search-tools {
  flex-wrap: nowrap;
}

.theater-script-import-shell .theater-next-action-tools {
  flex-wrap: nowrap;
}

.theater-script-import-shell .theater-next-status-tools {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.theater-script-import-shell .theater-next-theme-toggle,
.theater-script-import-shell .theater-next-font-size {
  gap: 0;
  overflow: hidden;
  border: 1px solid rgba(118, 145, 176, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

.theater-script-import-shell .theater-next-theme-toggle button,
.theater-script-import-shell .theater-next-font-size button {
  border: 0;
  border-radius: 0;
  background: transparent;
}

.theater-script-import-shell .theater-next-theme-toggle button.active,
.theater-script-import-shell .theater-next-font-size button.active {
  color: rgb(225, 230, 240);
  background: rgba(255, 255, 255, 0.08);
}

.theater-script-import-shell .script-editor-actions button {
  min-width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid rgba(118, 145, 176, 0.16);
  border-radius: 8px;
  padding: 0 12px;
  color: rgba(170, 180, 196, 0.92);
  background: rgba(255, 255, 255, 0.04);
  font-size: 13px;
  font-weight: 700;
  line-height: 36px;
  letter-spacing: 0;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
}

.theater-script-import-shell .script-editor-actions button > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: inherit;
  font: inherit;
  line-height: 1;
  letter-spacing: 0;
}

.theater-script-import-shell .script-editor-actions button svg {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
}

.theater-script-import-shell .script-editor-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.46;
}

.theater-script-import-shell .script-editor-actions button:hover,
.theater-script-import-shell .script-editor-actions button.active {
  color: rgb(225, 230, 240);
  border-color: rgba(162, 118, 255, 0.3);
  background: rgba(162, 118, 255, 0.13);
}

.theater-script-import-shell .script-editor-actions button:disabled:hover {
  color: rgba(170, 180, 196, 0.92);
  border-color: rgba(118, 145, 176, 0.16);
  background: rgba(255, 255, 255, 0.04);
}

.theater-script-import-shell .theater-next-find-field {
  height: 36px;
  min-width: 190px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(118, 145, 176, 0.16);
  border-radius: 8px;
  padding: 0 10px;
  color: rgba(136, 146, 163, 0.9);
  background: rgba(255, 255, 255, 0.035);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
}

.theater-script-import-shell .theater-next-replace-field {
  min-width: 176px;
}

.theater-script-import-shell .theater-next-find-field input {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: none;
  color: rgb(225, 230, 240);
  background: transparent;
  font: inherit;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
}

.theater-script-import-shell .theater-next-find-field input::placeholder {
  color: rgba(136, 146, 163, 0.66);
}

.theater-script-import-shell .theater-next-find-count,
.theater-script-import-shell .theater-next-rule-status,
.theater-script-import-shell .theater-next-dirty-pill {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(118, 145, 176, 0.14);
  border-radius: 8px;
  padding: 0 10px;
  color: rgba(170, 180, 196, 0.9);
  background: rgba(255, 255, 255, 0.035);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
}

.theater-script-import-shell .theater-next-find-count.empty {
  color: rgb(251, 191, 36);
}

.theater-script-import-shell .theater-next-dirty-pill {
  color: rgb(251, 191, 36);
  border-color: rgba(251, 191, 36, 0.24);
  background: rgba(251, 191, 36, 0.08);
}

.theater-script-import-shell .theater-next-find-nav {
  width: 36px;
  padding: 0;
}

.theater-script-import-shell .theater-next-find-navs {
  display: flex;
  align-items: center;
  gap: 4px;
}

.theater-script-import-shell .theater-next-replace-btn {
  min-width: 54px;
}

.theater-script-import-shell .theater-next-undo-btn,
.theater-script-import-shell .theater-next-parse-action {
  min-width: 82px;
}

.theater-script-import-shell .theater-next-parse-action {
  min-width: 108px;
}

@media (max-width: 1380px) {
  .theater-script-import-shell .script-editor-head {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .theater-script-import-shell .script-editor-actions {
    justify-items: start;
  }

  .theater-script-import-shell .theater-next-toolbar-row {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

.theater-script-import-shell .theater-next-editor-stack {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #111723;
}

.theater-script-import-shell .script-textarea {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  outline: none;
  resize: none;
  padding: 28px 36px;
  color: rgb(170, 180, 196);
  background: transparent;
  font-family: Consolas, "SFMono-Regular", "Microsoft YaHei", monospace;
  font-size: 14px;
  line-height: 1.75;
}

.theater-script-import-shell .theater-next-editor-stack.size-medium .script-textarea {
  font-size: 16px;
  line-height: 1.8;
}

.theater-script-import-shell .theater-next-editor-stack.size-large .script-textarea {
  font-size: 18px;
  line-height: 1.85;
}

.theater-script-import-shell .script-textarea::placeholder {
  color: rgba(136, 146, 163, 0.72);
}

.theater-project-detail-page .theater-detail-layout {
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 18px;
}

.theater-project-detail-page .project-rail.side-nav {
  width: 64px;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 22px 6px;
  border-color: rgba(118, 145, 176, 0.16);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(9, 14, 29, 0.78), rgba(7, 11, 22, 0.84)),
    rgba(9, 14, 29, 0.72);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.035);
}

.theater-project-detail-page .project-rail .side-nav-item {
  position: relative;
  width: 52px;
  min-height: 64px;
  display: grid;
  grid-template-rows: 26px auto;
  align-items: center;
  justify-items: center;
  gap: 7px;
  padding: 7px 3px;
  border: 1px solid transparent;
  border-radius: 10px;
  box-sizing: border-box;
  color: rgba(201, 211, 225, 0.62);
  background: transparent;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0;
  transition: color 0.16s ease, border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.theater-project-detail-page .project-rail .side-nav-item::after {
  content: none;
}

.theater-project-detail-page .project-rail .side-nav-item svg,
.theater-project-detail-page .project-rail .side-nav-item span {
  position: relative;
  z-index: 1;
}

.theater-project-detail-page .project-rail .side-nav-item:hover {
  color: var(--theater-text-strong);
  border-color: transparent;
  background: rgba(162, 118, 255, 0.08);
  box-shadow: none;
}

.theater-project-detail-page .project-rail .side-nav-item:active {
  transform: translateY(1px);
  border-color: rgba(167, 139, 250, 0.42);
  box-shadow:
    0 0 0 1px rgba(162, 118, 255, 0.16),
    0 6px 18px rgba(162, 118, 255, 0.26);
}

.theater-project-detail-page .project-rail .side-nav-item:active::after {
  opacity: 1;
}

.theater-project-detail-page .project-rail .side-nav-item svg {
  display: block;
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
  transition: color 0.16s ease;
}

.theater-project-detail-page .project-rail .side-nav-icon {
  position: relative;
  z-index: 1;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
}

.theater-project-detail-page .project-rail .side-nav-spark {
  fill: var(--theater-accent-spark, #7dd3fc);
  opacity: 0.85;
  transition: opacity 0.2s ease;
}

.theater-project-detail-page .project-rail .side-nav-item:hover .side-nav-spark,
.theater-project-detail-page .project-rail .side-nav-item:focus-visible .side-nav-spark,
.theater-project-detail-page .project-rail .side-nav-item.active .side-nav-spark {
  opacity: 1;
}

.theater-project-detail-page .project-rail .side-nav-item span {
  display: block;
  opacity: 1;
  text-align: center;
}

.theater-project-detail-page .project-rail .side-nav-label {
  color: currentColor;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.1;
}

.theater-project-detail-page .project-rail .side-nav-item.active {
  color: var(--theater-text-strong);
  border-color: rgba(162, 118, 255, 0.36);
  background: linear-gradient(180deg, rgba(162, 118, 255, 0.22), rgba(162, 118, 255, 0.08));
  box-shadow: 0 0 0 1px rgba(162, 118, 255, 0.14), 0 6px 18px rgba(162, 118, 255, 0.22);
}

.theater-project-detail-page .project-rail .side-nav-item.active::after {
  opacity: 0.52;
}

.theater-project-detail-page .project-rail .side-nav-item.active svg {
  filter: none;
}

.theater-project-detail-page .project-rail .side-nav-item:focus-visible {
  outline: 2px solid rgba(165, 180, 252, 0.72);
  outline-offset: 2px;
}

.theater-project-detail-page .project-rail .side-nav-stat {
  margin-top: auto;
}

.theater-project-detail-page .project-stage {
  position: relative;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(162, 118, 255, 0.18);
  border-radius: 18px;
  background:
    linear-gradient(rgba(67, 78, 117, 0.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(67, 78, 117, 0.11) 1px, transparent 1px),
    linear-gradient(120deg, rgba(8, 18, 34, 0.96), rgba(12, 11, 35, 0.98));
  background-size: 44px 44px, 44px 44px, auto;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.035),
    0 20px 58px rgba(0, 0, 0, 0.24);
}

.theater-project-detail-page .project-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 72% 2%, rgba(102, 68, 204, 0.2), transparent 34%),
    radial-gradient(circle at 20% 84%, rgba(25, 107, 153, 0.12), transparent 38%),
    linear-gradient(90deg, rgba(6, 14, 28, 0.52), rgba(18, 14, 47, 0.28));
  pointer-events: none;
}

.theater-project-detail-page .project-stage > * {
  position: relative;
  z-index: 1;
}

.theater-project-detail-page .overview-hero {
  min-height: 100%;
  grid-template-columns: minmax(0, 720px) 390px;
  justify-content: center;
  gap: clamp(68px, 5vw, 78px);
  align-items: center;
  padding: 72px clamp(72px, 6vw, 84px);
}

.theater-project-detail-page .badge-dot {
  min-height: 30px;
  padding: 0 13px;
  border: 1px solid rgba(162, 118, 255, 0.2);
  color: #d9ccff;
  background: rgba(128, 78, 255, 0.2);
  box-shadow: 0 8px 20px rgba(54, 37, 126, 0.2);
}

.theater-project-detail-page .badge-dot::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-right: 8px;
  border-radius: 999px;
  background: #a276ff;
  box-shadow: 0 0 12px rgba(162, 118, 255, 0.72);
}

.theater-project-detail-page .overview-copy h1 {
  max-width: 720px;
  margin: 28px 0 18px;
  color: #e7edf5;
  font-size: clamp(42px, 4.4vw, 58px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: 0;
}

.theater-project-detail-page .overview-copy p {
  max-width: 760px;
  color: #9aa8bf;
  font-size: 16px;
  line-height: 1.75;
}

.theater-project-detail-page .pipeline-cards {
  max-width: 720px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 42px;
  margin-top: 28px;
}

.theater-project-detail-page .pipeline-cards button {
  min-height: 120px;
  padding: 18px;
  border-color: rgba(118, 145, 176, 0.16);
  border-radius: 16px;
  background: rgba(12, 18, 34, 0.72);
}

.theater-project-detail-page .pipeline-cards button.done {
  border-color: rgba(63, 232, 164, 0.22);
  background: rgba(8, 67, 72, 0.45);
}

.theater-project-detail-page .pipeline-cards button.active {
  border-color: rgba(154, 107, 255, 0.55);
  background:
    radial-gradient(circle at 24% 0%, rgba(162, 118, 255, 0.22), transparent 54%),
    rgba(35, 28, 68, 0.66);
  box-shadow: 0 16px 34px rgba(70, 44, 150, 0.24);
}

.theater-project-detail-page .pipeline-cards b {
  width: 30px;
  height: 30px;
  background: rgba(154, 107, 255, 0.72);
}

.theater-project-detail-page .pipeline-cards button.done b {
  background: rgba(36, 163, 132, 0.72);
}

.theater-project-detail-page .pipeline-cards strong {
  color: #e7edf5;
  font-size: 16px;
}

.theater-project-detail-page .pipeline-cards span {
  color: #9aa8bf;
}

.theater-project-detail-page .guide-action {
  min-height: 46px;
  margin-top: 22px;
  padding: 0 25px;
  border: 1px solid rgba(189, 146, 255, 0.44);
  border-radius: 12px;
  background: linear-gradient(135deg, #aa64ff, #735cff);
  box-shadow: 0 16px 34px rgba(138, 92, 255, 0.34);
  font-size: 16px;
  font-weight: 900;
}

.theater-project-detail-page .asset-status-card {
  align-self: center;
  min-height: 376px;
  padding: 24px;
  border-color: rgba(162, 118, 255, 0.18);
  border-radius: 24px;
  background: rgba(8, 14, 28, 0.7);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.035),
    0 20px 50px rgba(0, 0, 0, 0.18);
}

.theater-project-detail-page .asset-status-card header {
  margin-bottom: 18px;
  color: #9aa8bf;
}

.theater-project-detail-page .asset-status-card header strong {
  color: #ffffff;
  font-size: 24px;
}

.theater-project-detail-page .asset-status-card button {
  min-height: 84px;
  margin-top: 12px;
  border-color: rgba(255, 93, 135, 0.2);
  border-radius: 14px;
  background: rgba(89, 32, 59, 0.36);
}

.theater-project-detail-page .asset-status-card button svg {
  width: 22px;
  height: 22px;
  padding: 10px;
  box-sizing: content-box;
  border-radius: 12px;
  color: #ffd5e1;
  background: rgba(255, 116, 151, 0.16);
}

.theater-project-detail-page .asset-status-card button strong {
  color: #e7edf5;
}

.workflow-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  padding: 0 28px 28px;
}

.automation-command {
  margin: 0 28px 22px;
  padding: 20px;
  border: 1px solid rgba(151, 164, 203, 0.2);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(12, 18, 34, 0.92), rgba(11, 31, 37, 0.72)),
    rgba(5, 10, 21, 0.72);
}

.automation-command header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.automation-command small {
  color: var(--green);
  font-weight: 900;
}

.automation-command h2,
.automation-command p {
  margin: 5px 0 0;
}

.automation-command p {
  color: var(--muted);
}

.automation-command header > div:last-child {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.automation-command button {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: #eaf2ff;
  background: rgba(255, 255, 255, 0.055);
}

.automation-command button.primary {
  border-color: rgba(63, 232, 164, 0.45);
  color: #06130f;
  background: linear-gradient(135deg, var(--green), #92ffd6);
  font-weight: 900;
}

.theater-next-step {
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  padding: 0 14px;
  border: 1px solid rgba(63, 232, 164, 0.18);
  border-radius: 10px;
  background: rgba(63, 232, 164, 0.07);
}

.theater-next-step span {
  color: var(--green);
  font-weight: 900;
}

.theater-next-step strong {
  color: #f3fff9;
}

.theater-next-step em {
  min-width: 0;
  color: var(--muted);
  font-style: normal;
}

.automation-meter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
}

.automation-meter span {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.automation-meter i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--green), var(--cyan), var(--warning));
}

.automation-meter b {
  color: #eaf2ff;
}

.theater-command-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.theater-command-grid button {
  min-height: 44px;
  justify-content: center;
  color: #dce6f8;
  background: rgba(255, 255, 255, 0.05);
}

.theater-command-grid button:hover {
  border-color: rgba(63, 232, 164, 0.4);
  color: #ffffff;
  background: rgba(63, 232, 164, 0.1);
}

.automation-stages {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.automation-stages article,
.automation-stages button {
  min-height: 112px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: #dce6f8;
  text-align: left;
  background: rgba(255, 255, 255, 0.035);
}

.automation-stages article.done,
.automation-stages button.done {
  border-color: rgba(63, 232, 164, 0.34);
  background: rgba(22, 88, 70, 0.24);
}

.automation-stages article.active,
.automation-stages button.active {
  border-color: rgba(255, 186, 97, 0.45);
  background: rgba(94, 62, 20, 0.22);
}

.automation-stages b,
.automation-stages strong,
.automation-stages span {
  display: block;
}

.automation-stages b {
  color: var(--green);
}

.automation-stages strong {
  margin-top: 8px;
}

.automation-stages span {
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.workflow-strip article {
  min-height: 126px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(9, 15, 29, 0.68);
}

.workflow-strip b {
  color: var(--purple);
}

.workflow-strip strong,
.workflow-strip span {
  display: block;
  margin-top: 10px;
}

.workflow-strip span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.workflow-strip .done {
  border-color: rgba(63, 232, 164, 0.32);
}

.workflow-strip .active {
  border-color: rgba(154, 107, 255, 0.58);
}

.asset-workbench,
.episodes-workbench,
.stats-board {
  min-height: calc(100vh - 130px);
  margin: 0;
  border: 0;
  border-radius: 0;
  background: rgba(5, 10, 21, 0.56);
}

.asset-toolbar,
.episodes-workbench > header,
.stats-board > header {
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
}

.asset-type-tabs,
.asset-actions,
.episode-top-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.stats-board > header > div {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.asset-type-tabs button,
.asset-actions button,
.episode-top-actions button,
.stats-board header button,
.queue-table button {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: #aeb8cb;
  background: rgba(255, 255, 255, 0.04);
}

.asset-type-tabs button.active,
.episode-top-actions button.active {
  color: #ffffff;
  border-color: rgba(154, 107, 255, 0.56);
  background: rgba(154, 107, 255, 0.18);
}

.theater-project-detail-page .asset-type-tabs button,
.theater-project-detail-page .asset-actions button,
.theater-project-detail-page .episode-top-actions button,
.theater-project-detail-page .episode-reader footer button,
.theater-project-detail-page .queue-actions button {
  transition: color 0.16s ease, border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.theater-project-detail-page .asset-type-tabs button:active,
.theater-project-detail-page .asset-actions button:active,
.theater-project-detail-page .episode-top-actions button:active,
.theater-project-detail-page .episode-reader footer button:active,
.theater-project-detail-page .queue-actions button:active {
  transform: translateY(1px);
  border-color: rgba(167, 139, 250, 0.48);
  box-shadow: 0 0 18px rgba(124, 92, 255, 0.24);
}

.theater-project-detail-page .asset-type-tabs button.active,
.theater-project-detail-page .episode-top-actions button.active {
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.06),
    0 0 16px rgba(124, 92, 255, 0.18);
}

.asset-actions .primary,
.asset-empty .primary,
.episode-reader footer .primary {
  color: #ffffff;
  border-color: rgba(154, 107, 255, 0.65);
  background: rgba(154, 107, 255, 0.35);
}

.theater-project-detail-page .episodes-workbench {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: 114px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid rgba(118, 145, 176, 0.14);
  border-radius: 12px;
  background: rgba(5, 10, 21, 0.42);
}

.theater-project-detail-page .episodes-workbench > header {
  min-height: 114px;
  padding: 18px 20px 12px;
  border-bottom: 0;
  background: transparent;
}

.theater-project-detail-page .episode-top-actions {
  gap: 10px;
  flex-wrap: nowrap;
}

.theater-project-detail-page .episode-top-actions button {
  min-height: 36px;
  border-color: rgba(148, 163, 184, 0.12);
  border-radius: 9px;
  color: rgba(203, 213, 225, 0.82);
  background: rgba(255, 255, 255, 0.035);
  font-weight: 800;
}

.theater-project-detail-page .episode-top-actions button.active {
  border-color: rgba(154, 107, 255, 0.5);
  color: #f8fbff;
  background: rgba(154, 107, 255, 0.2);
}

.theater-project-detail-page .episode-mode-tabs {
  height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 11px;
  background: rgba(5, 9, 18, 0.48);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.035);
}

.theater-project-detail-page .episode-mode-tabs button {
  min-width: 86px;
  min-height: 30px;
  padding: 0 14px;
  border: 0;
  border-radius: 8px;
  color: rgba(148, 163, 184, 0.82);
  background: transparent;
  box-shadow: none;
}

.theater-project-detail-page .episode-mode-tabs button.active {
  color: #f8fbff;
  background:
    radial-gradient(circle at 50% 0%, rgba(190, 164, 255, 0.22), transparent 58%),
    rgba(154, 107, 255, 0.22);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.08),
    0 8px 18px rgba(104, 70, 219, 0.2);
}

.theater-project-detail-page .episode-redo-btn {
  min-width: 106px;
  border-color: rgba(162, 118, 255, 0.22);
  color: #d8ccff;
  background: rgba(162, 118, 255, 0.075);
}

.theater-project-detail-page .episode-redo-btn svg {
  width: 16px;
  height: 16px;
}

.asset-empty {
  min-height: 600px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 14px;
  color: #9ca8bd;
  text-align: center;
}

.asset-empty > span {
  width: 132px;
  height: 132px;
  display: grid;
  place-items: center;
  border-radius: 36px;
  color: #cfd8ea;
  background: linear-gradient(135deg, rgba(91, 132, 255, 0.2), rgba(154, 107, 255, 0.16));
}

.asset-empty h2 {
  margin: 0;
  color: #dce5f6;
}

.asset-empty p {
  margin: 0;
}

.asset-empty div {
  display: flex;
  gap: 10px;
}

.asset-empty button {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: #dce5f6;
  background: rgba(255, 255, 255, 0.05);
}

.empty-episodes-workbench {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.episode-empty-panel {
  min-height: 520px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 14px;
  padding: 32px;
  color: #9ca8bd;
  text-align: center;
}

.episode-empty-panel h2,
.episode-empty-panel p {
  margin: 0;
}

.episode-empty-panel h2 {
  color: #dce5f6;
}

.episode-empty-panel button {
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid rgba(154, 107, 255, 0.65);
  border-radius: 8px;
  color: #ffffff;
  background: rgba(154, 107, 255, 0.35);
}

.theater-project-detail-page .asset-workbench {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: 74px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(10, 14, 23, 0.6);
}

.theater-project-detail-page .asset-results-shell {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.theater-project-detail-page .asset-results-content {
  min-height: 0;
  overflow: hidden;
}

.theater-project-detail-page .asset-results-content > .asset-empty-state {
  min-height: 100%;
}

.asset-extraction-banner {
  min-height: 54px;
  display: grid;
  grid-template-columns: 22px minmax(190px, auto) minmax(160px, 1fr) 44px;
  align-items: center;
  gap: 12px;
  padding: 9px 18px;
  border-bottom: 1px solid rgba(56, 189, 248, 0.18);
  color: #dbeafe;
  background: rgba(8, 47, 73, 0.3);
}

.asset-extraction-banner div:nth-child(2) {
  display: grid;
  gap: 3px;
}

.asset-extraction-banner strong,
.asset-extraction-banner small,
.asset-extraction-banner b {
  line-height: 1.2;
}

.asset-extraction-banner strong {
  font-size: 13px;
}

.asset-extraction-banner small {
  color: rgba(186, 230, 253, 0.68);
  font-size: 11px;
}

.asset-extraction-banner b {
  justify-self: end;
  color: #7dd3fc;
  font-size: 12px;
}

.asset-extraction-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(125, 211, 252, 0.2);
  border-top-color: #38bdf8;
  border-radius: 50%;
  animation: asset-extraction-spin 0.9s linear infinite;
}

.asset-extraction-progress {
  height: 6px;
  overflow: hidden;
  border-radius: 3px;
  background: rgba(148, 163, 184, 0.14);
}

.asset-extraction-progress i {
  height: 100%;
  display: block;
  border-radius: inherit;
  background: linear-gradient(90deg, #38bdf8, #a78bfa);
  transition: width 0.3s ease;
}

.asset-results-shell.is-locked .asset-results-content {
  opacity: 0.72;
}

.asset-results-shell.is-locked .asset-results-content button,
.asset-results-shell.is-locked .asset-results-content input,
.asset-results-shell.is-locked .asset-results-content textarea {
  pointer-events: none;
}

.theater-project-detail-page .asset-tools button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

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

.theater-project-detail-page .asset-toolbar {
  min-height: 74px;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
  background: rgba(5, 9, 18, 0.42);
  flex-wrap: nowrap;
}

.theater-project-detail-page .asset-type-tabs {
  gap: 8px;
  flex: 0 0 auto;
  flex-wrap: nowrap;
}

.theater-project-detail-page .asset-type-tabs button {
  width: auto;
  height: 34px;
  min-height: 34px;
  justify-content: center;
  gap: 8px;
  padding: 0 14px;
  border-color: rgba(148, 163, 184, 0.14);
  border-radius: 9px;
  color: rgb(94, 108, 125);
  background: rgba(255, 255, 255, 0.03);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.theater-project-detail-page .asset-type-tabs button svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}

.theater-project-detail-page .asset-type-tabs button b {
  min-width: 18px;
  height: 18px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: rgba(201, 211, 225, 0.86);
  background: rgba(148, 163, 184, 0.08);
  padding: 0 6px;
  font-size: 11px;
  font-weight: 800;
}

.theater-project-detail-page .asset-type-tabs button.active {
  color: #94a3b8;
  border-color: rgba(162, 118, 255, 0.5);
  background: linear-gradient(rgba(162, 118, 255, 0.2), rgba(162, 118, 255, 0.1));
  box-shadow: 0 10px 22px rgba(70, 44, 150, 0.14);
}

.theater-project-detail-page .asset-type-tabs button.active b {
  color: #ffffff;
  background: rgba(162, 118, 255, 0.34);
}

.theater-project-detail-page .asset-tools,
.theater-project-detail-page .asset-tool-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.theater-project-detail-page .asset-tools {
  justify-content: flex-end;
  flex: 0 0 auto;
  flex-wrap: nowrap;
}

.theater-project-detail-page .asset-tool-group-batch {
  position: relative;
  height: 44px;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
}

.theater-project-detail-page .asset-batch-menu {
  position: relative;
  z-index: 70;
}

.theater-project-detail-page .asset-batch-menu > summary {
  width: 112px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 13px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  cursor: pointer;
  color: #aab8ca;
  background: rgba(255, 255, 255, 0.045);
  font-size: 14px;
  font-weight: 700;
  list-style: none;
  user-select: none;
}

.theater-project-detail-page .asset-batch-menu > summary::-webkit-details-marker {
  display: none;
}

.theater-project-detail-page .asset-batch-menu > summary svg {
  width: 15px;
  height: 15px;
  transition: transform 160ms ease;
}

.theater-project-detail-page .asset-batch-menu[open] > summary {
  color: #f1edff;
  border-color: rgba(162, 118, 255, 0.46);
  background: rgba(162, 118, 255, 0.14);
  box-shadow: 0 10px 24px rgba(11, 7, 25, 0.32);
}

.theater-project-detail-page .asset-batch-menu[open] > summary svg {
  transform: rotate(180deg);
}

.theater-project-detail-page .asset-batch-menu.is-disabled > summary {
  cursor: not-allowed;
  opacity: 0.48;
  pointer-events: none;
}

.theater-project-detail-page .asset-batch-menu-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 190px;
  display: grid;
  gap: 4px;
  padding: 7px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 9px;
  background: #111927;
  box-shadow: 0 20px 46px rgba(0, 0, 0, 0.42);
}

.theater-project-detail-page .asset-tools .asset-batch-menu-panel > button {
  width: 100%;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  border: 0;
  color: #b9c6d7;
  background: transparent;
  text-align: left;
}

.theater-project-detail-page .asset-batch-menu-panel > button:hover:not(:disabled) {
  color: #ffffff;
  background: rgba(162, 118, 255, 0.13);
}

.theater-project-detail-page .asset-batch-menu-panel > button span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.theater-project-detail-page .asset-batch-menu-panel > button svg {
  width: 16px;
  height: 16px;
}

.theater-project-detail-page .asset-batch-menu-panel > button b {
  min-width: 22px;
  height: 20px;
  display: grid;
  place-items: center;
  padding: 0 6px;
  border-radius: 999px;
  color: #e9e2ff;
  background: rgba(162, 118, 255, 0.22);
  font-size: 11px;
}

.theater-project-detail-page .asset-tool-group-main {
  margin-left: 12px;
  flex: 0 0 auto;
  gap: 20px;
}

.theater-project-detail-page .asset-tools button {
  width: 90px;
  min-height: 36px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  color: #7a8b9e;
  background: rgba(255, 255, 255, 0.03);
  font-size: 14px;
  font-weight: 500;
}

.theater-project-detail-page .asset-tools .asset-create {
  color: #94a3b8;
  border-color: rgba(162, 118, 255, 0.32);
  background: rgba(162, 118, 255, 0.1);
}

.theater-project-detail-page .asset-tools .asset-extract {
  color: #94a3b8;
  border-color: rgba(162, 118, 255, 0.42);
  background: linear-gradient(rgba(162, 118, 255, 0.22), rgba(162, 118, 255, 0.12));
  font-weight: 700;
}

.theater-project-detail-page .asset-empty-state {
  min-height: 0;
  height: 100%;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 14px;
  color: #7a8b9e;
  text-align: center;
}

.theater-project-detail-page .asset-empty-visual {
  position: relative;
  width: 178px;
  height: 150px;
}

.theater-project-detail-page .asset-empty-orbit {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 6px;
  height: 94px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 72% 35%, rgba(162, 118, 255, 0.3), transparent 42%),
    linear-gradient(135deg, rgba(82, 112, 194, 0.32), rgba(56, 42, 126, 0.44));
  filter: blur(0.2px);
}

.theater-project-detail-page .asset-empty-card {
  position: absolute;
  left: 50%;
  top: 10px;
  width: 96px;
  height: 124px;
  display: block;
  border: 1px solid rgba(201, 211, 225, 0.22);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(229, 238, 251, 0.95), rgba(162, 178, 205, 0.86)),
    #dbe6f6;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.6),
    0 18px 34px rgba(0, 0, 0, 0.22);
  transform: translateX(-50%);
}

.theater-project-detail-page .asset-empty-card::before {
  content: "";
  position: absolute;
  left: 17px;
  right: 17px;
  top: 14px;
  height: 4px;
  border-radius: 999px;
  background: rgba(101, 116, 139, 0.16);
}

.theater-project-detail-page .asset-empty-card i {
  position: absolute;
  left: 31px;
  top: 34px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 45% 34%, rgba(255, 255, 255, 0.38), transparent 34%),
    linear-gradient(135deg, #a9c4ff, #9a8cff);
}

.theater-project-detail-page .asset-empty-card b {
  position: absolute;
  left: 21px;
  bottom: 24px;
  width: 54px;
  height: 34px;
  border: 7px solid rgba(15, 23, 42, 0.68);
  border-bottom: 0;
  border-radius: 999px 999px 0 0;
}

.theater-project-detail-page .asset-empty-spark {
  position: absolute;
  width: 24px;
  height: 24px;
  background: linear-gradient(135deg, #b8d2ff, #8f63ff);
  clip-path: polygon(50% 0, 65% 34%, 100% 50%, 65% 66%, 50% 100%, 35% 66%, 0 50%, 35% 34%);
}

.theater-project-detail-page .asset-empty-spark.spark-one {
  right: 10px;
  top: 42px;
}

.theater-project-detail-page .asset-empty-spark.spark-two {
  left: 6px;
  bottom: 28px;
  width: 18px;
  height: 18px;
  opacity: 0.72;
}

.theater-project-detail-page .asset-empty-copy {
  max-width: 360px;
}

.theater-project-detail-page .asset-empty-copy h2 {
  margin: 0 0 8px;
  color: #7a8b9e;
  font-size: 18px;
  font-weight: 800;
}

.theater-project-detail-page .asset-empty-copy p {
  margin: 0;
  color: #5e6c7d;
  font-size: 14px;
}

.theater-project-detail-page .asset-empty-actions {
  display: flex;
  gap: 10px;
}

.theater-project-detail-page .asset-empty-actions button {
  width: 118px;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0;
  border-radius: 8px;
  font-weight: 900;
}

.theater-project-detail-page .asset-empty-actions svg {
  width: 16px;
  height: 16px;
}

.theater-project-detail-page .asset-empty-action {
  color: #dcd7ff;
  border: 1px solid rgba(162, 118, 255, 0.4);
  background:
    linear-gradient(180deg, rgba(162, 118, 255, 0.25), rgba(91, 68, 194, 0.22)),
    rgba(162, 118, 255, 0.08);
}

.theater-project-detail-page .asset-empty-import {
  color: #bae6fd;
  border: 1px solid rgba(56, 189, 248, 0.42);
  background:
    linear-gradient(180deg, rgba(56, 189, 248, 0.2), rgba(18, 78, 113, 0.2)),
    rgba(56, 189, 248, 0.08);
}

.generated-assets-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  padding: 22px;
}

.generated-assets-grid article {
  --card-accent: #27d7e6;
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(151, 164, 203, 0.24);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 44%),
    rgba(255, 255, 255, 0.045);
}

.generated-assets-grid article:nth-child(3n + 2) {
  --card-accent: #9a6bff;
}

.generated-assets-grid article:nth-child(3n) {
  --card-accent: #3fe8a4;
}

.generated-assets-grid img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 6px;
  transition:
    transform 0.32s ease,
    filter 0.32s ease;
}

.generated-assets-grid article:hover img {
  filter: saturate(1.04) brightness(1.02);
  transform: scale(1.012);
}

.generated-assets-grid span {
  color: var(--muted);
}

.generated-assets-grid div {
  display: flex;
  gap: 8px;
}

.generated-assets-grid button {
  min-height: 32px;
  padding: 0 10px;
  border-radius: 7px;
  color: #dce5f6;
  background: rgba(255, 255, 255, 0.07);
}

.role-asset-table {
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  overflow: hidden;
  color: #7a8b9e;
  background: transparent;
}

.theater-project-detail-page .asset-workbench {
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

.role-asset-grid {
  display: grid;
  grid-template-columns: minmax(150px, 180px) 118px minmax(138px, 160px) minmax(180px, 0.72fr) minmax(300px, 1.25fr) minmax(118px, 138px) 0;
  column-gap: 18px;
  align-items: stretch;
}

.standard-asset-grid {
  display: grid;
  grid-template-columns: 140px 104px minmax(180px, 0.85fr) minmax(220px, 1fr) minmax(160px, 184px) 0;
  column-gap: 20px;
  align-items: stretch;
}

.role-asset-head {
  position: sticky;
  top: 0;
  z-index: 10;
  margin: 0 0 18px;
  padding: 14px 28px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(11, 16, 30, 0.99), rgba(7, 11, 21, 0.99)), #080d18;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.025), 0 8px 20px rgba(2, 6, 23, 0.2);
}

.role-asset-head span {
  color: rgba(148, 163, 184, 0.58);
  font-size: 13px;
  font-weight: 600;
}

.role-asset-list {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 22px 24px 40px 27px;
  scrollbar-gutter: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.2) transparent;
}

.role-asset-list::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.role-asset-list::-webkit-scrollbar-thumb {
  border: 0;
  border-radius: 99px;
  background: rgba(148, 163, 184, 0.2);
}

.role-asset-card {
  position: relative;
  overflow: hidden;
  margin: 0 0 22px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 12px;
  background: rgba(17, 24, 39, 0.72);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.025);
  transition: border-color 0.2s ease, background 0.2s ease;
}

.role-asset-card:hover {
  border-color: rgba(148, 163, 184, 0.24);
  background: rgba(20, 28, 44, 0.78);
}

.role-asset-card + .role-asset-card {
  margin-top: 0;
}

.role-asset-row {
  position: relative;
  height: 176px;
  min-height: 176px;
  padding: 24px 28px;
  overflow: visible;
  border-bottom: 0;
}

.role-asset-row:has(.asset-copy-editor.active, .asset-episodes-cell.active) {
  height: auto;
  min-height: 176px;
  overflow: visible;
}

.role-asset-row > p {
  margin: 0;
  align-self: start;
  color: #7a8b9e;
  font-size: 14px;
  line-height: 1.85;
}

.role-name-cell {
  display: grid;
  gap: 3px;
  align-content: center;
  justify-items: start;
  padding: 5px 0;
}

.asset-name-editor {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 1.8em;
  display: block;
  padding: 0;
  border: 0;
  color: #aeb8cb;
  background: transparent;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.role-name-cell span,
.role-name-cell em {
  width: fit-content;
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  justify-content: center;
  padding: 0 9px;
  border: 1px solid rgba(77, 141, 231, 0.35);
  border-radius: 7px;
  color: #8db7ff;
  background: rgba(77, 141, 231, 0.08);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
  line-height: 1.25;
  text-align: center;
}

.asset-meta-editor {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 1.35em;
  display: block;
  padding: 0;
  border: 0;
  color: #7a8b9e;
  background: transparent;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.35;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.role-preview-cell {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-top: 0;
}

.role-preview-cell button {
  width: 96px;
  aspect-ratio: 16 / 9;
  height: auto;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 5px;
  padding: 8px;
  border: 1px solid rgba(96, 165, 250, 0.2);
  border-radius: 8px;
  color: #596579;
  background: linear-gradient(145deg, rgba(96, 165, 250, 0.1), rgba(162, 118, 255, 0.08)), rgba(8, 13, 24, 0.72);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.025);
  overflow: hidden;
  position: relative;
}

.role-preview-cell button:hover,
.role-preview-cell button:focus-visible {
  border-color: rgba(148, 163, 184, 0.28);
  color: #8490a5;
  background: rgba(14, 20, 35, 0.92);
  outline: none;
}

.role-preview-cell button.has-preview {
  padding: 0;
  border-color: rgba(96, 165, 250, 0.2);
  background: #0a101d;
}

.role-preview-cell button.has-preview img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.role-preview-cell button.asset-generation-draft small {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 8px;
  color: rgba(226, 232, 240, 0.96);
  background: rgba(5, 9, 18, 0.42);
  backdrop-filter: blur(1px);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.78);
}

.role-preview-cell button.asset-generation-draft {
  border-color: rgba(96, 165, 250, 0.2);
}

.role-preview-cell button.asset-generation-final small {
  display: none;
}

.role-preview-cell button.asset-generation-failed {
  color: #fda4af;
  border-color: rgba(244, 63, 94, 0.36);
  background: rgba(72, 16, 30, 0.38);
}

.role-preview-cell button.asset-generation-processing {
  gap: 8px;
  color: rgba(226, 232, 240, 0.96);
  border-color: rgba(96, 165, 250, 0.2);
  background: linear-gradient(180deg, rgba(8, 13, 24, 0.58), rgba(8, 13, 24, 0.3));
}

.asset-generation-spinner {
  width: 18px;
  height: 18px;
  display: inline-block;
  flex: 0 0 auto;
  border: 2px solid rgba(125, 211, 252, 0.24);
  border-top-color: #7dd3fc;
  border-radius: 50%;
  animation: asset-generation-spin 0.8s linear infinite;
}

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

.role-preview-cell.is-scene button {
  width: 66px;
  aspect-ratio: 9 / 16;
}

.role-preview-cell.is-prop button {
  width: 96px;
  aspect-ratio: 1 / 1;
}

.role-preview-cell svg {
  width: 22px;
  height: 22px;
  opacity: 0.72;
}

.role-preview-cell small {
  color: currentColor;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.48);
}

.asset-preview-dialog {
  width: min(920px, calc(100vw - 48px));
}

.asset-preview-dialog-body {
  min-height: 360px;
  max-height: calc(100vh - 190px);
  display: grid;
  place-items: center;
  padding: 20px;
  overflow: auto;
  background: #070b14;
}

.asset-preview-dialog-body img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 235px);
  border-radius: 6px;
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.38);
  object-fit: contain;
}

.asset-preview-dialog-actions {
  border-top: 1px solid rgba(148, 163, 184, 0.12);
}

.modal-backdrop.asset-generate-overlay {
  inset: 95px 28px 26px 100px;
  padding: 28px;
  background: rgba(3, 6, 14, 0.72);
  backdrop-filter: blur(8px);
}

.asset-gen-workbench-overlay {
  position: fixed;
  inset: 0;
  z-index: 1220;
  display: grid;
  place-items: center;
  padding: 44px;
  background: rgba(3, 5, 12, 0.82);
  backdrop-filter: blur(8px);
}

.asset-gen-workbench {
  position: relative;
  display: grid;
  grid-template-columns: minmax(520px, 1fr) minmax(560px, 1.05fr);
  width: min(1400px, calc(100vw - 88px));
  height: min(850px, calc(100vh - 80px));
  min-height: 640px;
  overflow: hidden;
  border: 1px solid rgba(129, 140, 248, 0.16);
  border-radius: 8px;
  background: #0f1320;
  color: #eef2ff;
  box-shadow: 0 32px 90px rgba(0, 0, 0, 0.52);
}

.asset-gen-workbench-close {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #8d96ab;
  cursor: pointer;
}

.asset-gen-workbench-close:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}

.asset-gen-workbench-close svg {
  width: 18px;
  height: 18px;
}

.asset-gen-workbench-left,
.asset-gen-workbench-right {
  min-width: 0;
  min-height: 0;
}

.asset-gen-workbench-left {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 26px 24px;
  overflow: hidden;
  border-right: 1px solid rgba(129, 140, 248, 0.1);
  background: #171c2b;
}

.asset-gen-workbench-left h2 {
  margin: 0 0 2px;
  font-size: 21px;
  line-height: 1.25;
  letter-spacing: 0;
}

.asset-gen-workbench-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.asset-gen-workbench-field > span,
.asset-gen-prompt-group > label {
  color: #c7cede;
  font-size: 13px;
  font-weight: 700;
}

.asset-gen-workbench-field em {
  color: #fb7185;
  font-style: normal;
}

.asset-gen-workbench-field input,
.asset-gen-workbench-field select,
.asset-gen-prompt-footer select {
  width: 100%;
  min-height: 44px;
  padding: 0 13px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 7px;
  outline: none;
  background: #202637;
  color: #e8ecf6;
  font: inherit;
}

.asset-gen-workbench-field select:focus,
.asset-gen-prompt-footer select:focus {
  border-color: rgba(153, 104, 255, 0.72);
  box-shadow: 0 0 0 2px rgba(137, 92, 246, 0.12);
}

.asset-gen-workbench-field select:disabled {
  opacity: 0.48;
}

.asset-gen-workbench-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.asset-gen-workbench-grid.single {
  grid-template-columns: minmax(0, 1fr);
  max-width: calc(50% - 6px);
}

.asset-gen-smart-select {
  position: relative;
  min-width: 0;
}

.asset-gen-smart-trigger,
.asset-gen-reference-trigger {
  width: 100%;
  height: 44px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 9px;
  padding: 0 12px;
  border: 1px solid rgba(146, 113, 214, 0.34);
  border-radius: 7px;
  color: #e3e5ed;
  background: #171b29;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  text-align: left;
}

.asset-gen-smart-trigger:hover:not(:disabled),
.asset-gen-reference-trigger:hover:not(:disabled),
.asset-gen-smart-select.open > .asset-gen-smart-trigger {
  border-color: rgba(151, 102, 246, 0.72);
  box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.12), 0 0 18px rgba(112, 72, 193, 0.12);
}

.asset-gen-smart-trigger:disabled,
.asset-gen-reference-trigger:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.asset-gen-smart-trigger > span:nth-child(2),
.asset-gen-reference-trigger > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.asset-gen-smart-prefix {
  display: grid;
  place-items: center;
  color: #b271ff;
}

.asset-gen-smart-prefix svg,
.asset-gen-smart-caret svg,
.asset-gen-reference-trigger > svg {
  width: 16px;
  height: 16px;
}

.asset-gen-smart-caret {
  display: grid;
  place-items: center;
  color: #8e95a6;
  transition: transform 160ms ease;
}

.asset-gen-smart-select.open .asset-gen-smart-caret {
  transform: rotate(180deg);
}

.asset-gen-smart-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  width: max(100%, 260px);
  max-height: 320px;
  overflow: hidden;
  border: 1px solid rgba(126, 94, 190, 0.38);
  border-radius: 8px;
  background: #101521;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.46);
}

.asset-gen-smart-panel.compact {
  right: 0;
  left: auto;
  width: max(100%, 220px);
  padding: 6px;
  overflow-y: auto;
}

.asset-gen-smart-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 6px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.1);
  background: #0d121d;
}

.asset-gen-smart-tabs button {
  height: 34px;
  border: 0;
  border-radius: 6px;
  color: #858da0;
  background: transparent;
  font-size: 12px;
  font-weight: 600;
}

.asset-gen-smart-tabs button.active {
  color: #ded4f5;
  background: rgba(118, 76, 197, 0.18);
}

.asset-gen-smart-options {
  max-height: 270px;
  padding: 6px;
  overflow-y: auto;
}

.asset-gen-smart-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-height: 40px;
  border-radius: 6px;
}

.asset-gen-smart-option:hover,
.asset-gen-smart-option.selected {
  background: rgba(128, 87, 207, 0.14);
}

.asset-gen-smart-option-main,
.asset-gen-simple-option,
.asset-gen-smart-create {
  min-width: 0;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 10px;
  border: 0;
  color: #d7dae4;
  background: transparent;
  font-size: 12px;
  font-weight: 500;
  text-align: left;
}

.asset-gen-smart-option-main span,
.asset-gen-simple-option span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.asset-gen-smart-option-main svg,
.asset-gen-simple-option svg,
.asset-gen-smart-create svg {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
}

.asset-gen-smart-option-main svg {
  color: #b98cff;
}

.asset-gen-smart-option-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  padding-right: 5px;
  opacity: 0;
  transition: opacity 140ms ease;
}

.asset-gen-smart-option:hover .asset-gen-smart-option-actions,
.asset-gen-smart-option:focus-within .asset-gen-smart-option-actions {
  opacity: 1;
}

.asset-gen-smart-option-actions button {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 5px;
  color: #939bad;
  background: transparent;
}

.asset-gen-smart-option-actions button:hover {
  color: #d9c4ff;
  background: rgba(137, 92, 246, 0.13);
}

.asset-gen-smart-option-actions button.danger:hover {
  color: #fda4af;
  background: rgba(244, 63, 94, 0.1);
}

.asset-gen-smart-option-actions svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.asset-gen-smart-create {
  width: 100%;
  justify-content: flex-start;
  color: #b991f5;
}

.asset-gen-smart-create:hover,
.asset-gen-simple-option:hover,
.asset-gen-simple-option.selected {
  border-radius: 6px;
  background: rgba(128, 87, 207, 0.14);
}

.asset-gen-smart-empty {
  margin: 4px 8px 8px;
  color: #687185;
  font-size: 11px;
  text-align: center;
}

.asset-gen-simple-option {
  width: 100%;
}

.asset-gen-reference-trigger {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 16px;
}

.asset-gen-reference-trigger img {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  object-fit: cover;
}

.asset-gen-layer-overlay,
.asset-gen-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 1260;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(2, 4, 10, 0.76);
  backdrop-filter: blur(5px);
}

.asset-gen-template-dialog,
.asset-gen-reference-dialog,
.asset-gen-confirm-dialog {
  overflow: hidden;
  border: 1px solid rgba(126, 94, 190, 0.32);
  border-radius: 8px;
  color: #e5e7ef;
  background: #111621;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.58);
}

.asset-gen-template-dialog {
  width: min(560px, calc(100vw - 48px));
}

.asset-gen-template-dialog > header,
.asset-gen-reference-dialog > header {
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.11);
}

.asset-gen-template-dialog > header span {
  display: block;
  margin-bottom: 4px;
  color: #8b74b7;
  font-size: 10px;
  font-weight: 700;
}

.asset-gen-template-dialog h3,
.asset-gen-reference-dialog h3,
.asset-gen-confirm-dialog h3 {
  margin: 0;
  color: #f1f2f6;
  font-size: 17px;
  font-weight: 650;
}

.asset-gen-template-dialog > header > button,
.asset-gen-reference-dialog > header > button {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 6px;
  color: #8f97a8;
  background: transparent;
}

.asset-gen-template-dialog > header > button:hover,
.asset-gen-reference-dialog > header > button:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
}

.asset-gen-template-dialog > header svg,
.asset-gen-reference-dialog > header svg {
  width: 17px;
  height: 17px;
}

.asset-gen-template-body {
  display: grid;
  gap: 16px;
  padding: 20px;
}

.asset-gen-template-body label {
  display: grid;
  gap: 7px;
  color: #b9bfcc;
  font-size: 12px;
  font-weight: 600;
}

.asset-gen-template-body input,
.asset-gen-template-body textarea,
.asset-gen-template-body select {
  width: 100%;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 7px;
  outline: none;
  color: #e1e4ec;
  background: #191f2c;
  font: inherit;
  font-weight: 400;
}

.asset-gen-template-body input,
.asset-gen-template-body select {
  height: 42px;
  padding: 0 12px;
}

.asset-gen-template-body textarea {
  min-height: 170px;
  padding: 12px;
  resize: vertical;
  line-height: 1.65;
}

.asset-gen-template-body input:focus,
.asset-gen-template-body textarea:focus,
.asset-gen-template-body select:focus {
  border-color: rgba(151, 102, 246, 0.66);
}

.asset-gen-template-body input[readonly],
.asset-gen-template-body textarea[readonly] {
  color: #c8cdd8;
}

.asset-gen-template-body label > small {
  justify-self: end;
  margin-top: -27px;
  padding: 0 9px 8px 0;
  color: #747d90;
  font-size: 10px;
}

.asset-gen-template-visibility {
  width: fit-content;
  height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 16px;
  color: #969eaf;
  background: #171d29;
  font-size: 11px;
}

.asset-gen-template-visibility i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #687185;
}

.asset-gen-template-visibility.active i {
  background: #a97af6;
  box-shadow: 0 0 8px rgba(169, 122, 246, 0.5);
}

.asset-gen-template-dialog > footer {
  min-height: 66px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  padding: 13px 20px;
  border-top: 1px solid rgba(148, 163, 184, 0.11);
}

.asset-gen-template-dialog > footer button,
.asset-gen-confirm-dialog footer button {
  min-width: 78px;
  height: 36px;
  border: 1px solid rgba(148, 163, 184, 0.15);
  border-radius: 7px;
  color: #aab1c0;
  background: #181e2a;
  font-size: 12px;
}

.asset-gen-template-dialog > footer button.primary {
  border-color: rgba(154, 105, 245, 0.58);
  color: #d5bdff;
  background: rgba(126, 76, 218, 0.2);
}

.asset-gen-template-error {
  margin: 0;
  color: #fda4af;
  font-size: 11px;
  line-height: 1.5;
}

.asset-gen-reference-dialog {
  width: min(920px, calc(100vw - 48px));
  max-height: min(720px, calc(100vh - 48px));
}

.asset-gen-reference-dialog > header p {
  margin: 4px 0 0;
  color: #747d8f;
  font-size: 11px;
}

.asset-gen-reference-library {
  max-height: 630px;
  padding: 20px;
  overflow-y: auto;
}

.asset-gen-reference-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.asset-gen-reference-card {
  position: relative;
  min-width: 0;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 7px;
  color: #aeb5c4;
  background: #171d29;
}

.asset-gen-reference-card.selected {
  border-color: rgba(159, 104, 255, 0.86);
  box-shadow: 0 0 0 2px rgba(137, 92, 246, 0.13), 0 0 20px rgba(112, 72, 193, 0.13);
}

.asset-gen-reference-card.add,
.asset-gen-reference-card.none {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
}

.asset-gen-reference-card.add:hover,
.asset-gen-reference-card.none:hover {
  color: #d0b8fb;
  border-color: rgba(151, 102, 246, 0.5);
}

.asset-gen-reference-card > svg,
.asset-gen-reference-card.add > svg,
.asset-gen-reference-card.none > svg {
  width: 28px;
  height: 28px;
}

.asset-gen-reference-card strong {
  font-size: 12px;
  font-weight: 600;
}

.asset-gen-reference-card small {
  color: #70798c;
  font-size: 10px;
}

.asset-gen-reference-card-main {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: minmax(0, 1fr) 38px;
  padding: 0;
  border: 0;
  color: #d7dae3;
  background: transparent;
}

.asset-gen-reference-card-main img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
}

.asset-gen-reference-card-main strong {
  align-self: center;
  padding: 0 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}

.asset-gen-reference-delete {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 6px;
  color: #e0e3e9;
  background: rgba(7, 9, 15, 0.72);
  opacity: 0;
}

.asset-gen-reference-card:hover .asset-gen-reference-delete,
.asset-gen-reference-card:focus-within .asset-gen-reference-delete {
  opacity: 1;
}

.asset-gen-reference-delete:hover {
  color: #fda4af;
}

.asset-gen-reference-delete svg {
  width: 15px;
  height: 15px;
}

.asset-gen-reference-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 18px;
  color: #7c8495;
  font-size: 11px;
}

.asset-gen-reference-pagination button {
  height: 30px;
  padding: 0 11px;
  border: 1px solid rgba(148, 163, 184, 0.13);
  border-radius: 6px;
  color: #a7aebe;
  background: #171d29;
}

.asset-gen-confirm-dialog {
  width: min(430px, calc(100vw - 48px));
  padding: 22px;
}

.asset-gen-confirm-dialog p {
  margin: 12px 0 22px;
  color: #929aac;
  font-size: 12px;
  line-height: 1.65;
}

.asset-gen-confirm-dialog footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.asset-gen-confirm-dialog footer button.danger {
  border-color: rgba(244, 63, 94, 0.44);
  color: #fda4af;
  background: rgba(244, 63, 94, 0.1);
}

.asset-gen-reference-style-field {
  max-width: calc(50% - 6px);
}

.asset-gen-capability-note,
.asset-gen-workbench-error {
  margin: -8px 0 0;
  color: #fbbf24;
  font-size: 12px;
}

.asset-gen-workbench-error {
  color: #fca5a5;
}

.asset-gen-prompt-group {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 8px;
  min-height: 250px;
}

.asset-gen-prompt-panel {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 250px;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.13);
  border-radius: 8px;
  background: #0f1420;
}

.asset-gen-prompt-group > label {
  flex: 0 0 auto;
  line-height: 18px;
}

.asset-gen-reference-strip {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
  min-height: 72px;
  padding: 12px 14px 6px;
  overflow-x: auto;
}

.asset-gen-reference-add,
.asset-gen-reference-thumb {
  position: relative;
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 7px;
  background: #202637;
}

.asset-gen-reference-add {
  display: grid;
  place-items: center;
  align-content: center;
  color: #aeb7ca;
  cursor: pointer;
}

.asset-gen-reference-add strong {
  font-size: 25px;
  font-weight: 300;
  line-height: 1;
}

.asset-gen-reference-add small {
  color: #7d879b;
  font-size: 10px;
}

.asset-gen-reference-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.asset-gen-reference-thumb small {
  position: absolute;
  right: 3px;
  bottom: 3px;
  padding: 2px 4px;
  border-radius: 4px;
  background: rgba(2, 6, 23, 0.8);
  color: #fff;
  font-size: 9px;
}

.asset-gen-reference-thumb button {
  position: absolute;
  top: 2px;
  right: 2px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(2, 6, 23, 0.82);
  color: #fff;
}

.asset-gen-reference-thumb button svg {
  width: 11px;
  height: 11px;
}

.asset-gen-prompt-panel textarea {
  flex: 1 1 auto;
  width: 100%;
  min-height: 90px;
  padding: 8px 16px 12px;
  resize: none;
  border: 0;
  outline: 0;
  background: transparent;
  color: #dfe5f1;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.7;
}

.asset-gen-prompt-count {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 0 15px 10px;
  color: #747e91;
  font-size: 11px;
}

.asset-gen-prompt-count button {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #7d879b;
}

.asset-gen-prompt-count button:hover {
  color: #f87171;
}

.asset-gen-prompt-count svg {
  width: 14px;
  height: 14px;
}

.asset-gen-prompt-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-top: 1px solid rgba(148, 163, 184, 0.12);
  background: rgba(26, 32, 47, 0.6);
}

.asset-gen-prompt-footer > div {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: minmax(180px, 1fr) 104px;
  gap: 8px;
}

.asset-gen-prompt-footer .asset-gen-smart-trigger {
  height: 34px;
  padding: 0 9px;
  border-color: rgba(148, 163, 184, 0.13);
  background: #151b28;
  font-size: 11px;
}

.asset-gen-prompt-footer .asset-gen-smart-panel {
  top: auto;
  bottom: calc(100% + 6px);
}

.asset-gen-prompt-footer select {
  min-height: 34px;
  height: 34px;
  padding: 0 9px;
  font-size: 12px;
}

.asset-gen-workbench-generate {
  min-width: 68px;
  height: 34px;
  border: 1px solid rgba(167, 110, 255, 0.58);
  border-radius: 7px;
  background: rgba(121, 77, 221, 0.12);
  color: #c9a8ff;
  font-size: 13px;
  font-weight: 700;
}

.asset-gen-workbench-generate:hover:not(:disabled) {
  background: rgba(121, 77, 221, 0.22);
  box-shadow: 0 0 18px rgba(147, 92, 246, 0.24);
}

.asset-gen-workbench-generate:disabled {
  opacity: 0.45;
}

.asset-gen-workbench-right {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 28px;
  overflow: hidden;
  background: #0d111b;
}

.asset-gen-material-block {
  flex: 0 0 auto;
}

.asset-gen-material-block h3 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 14px;
  color: #d8deeb;
  font-size: 14px;
}

.asset-gen-material-block h3 span {
  color: #7e8799;
  font-size: 12px;
}

.asset-gen-finalized-grid,
.asset-gen-draft-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.asset-gen-finalized-card,
.asset-gen-draft-card {
  position: relative;
  width: 308px;
  overflow: hidden;
  border: 1px solid rgba(129, 140, 248, 0.18);
  border-radius: 8px;
  background: #111726;
}

.asset-gen-finalized-card > .asset-gen-material-card,
.asset-gen-draft-card > .asset-gen-material-card {
  width: 100%;
  border: 0;
  border-radius: 0;
}

.asset-gen-finalized-card > .asset-gen-material-card {
  height: 174px;
}

.asset-gen-draft-card > .asset-gen-material-card {
  height: 238px;
}

.asset-gen-whitelist-badge,
.asset-gen-permanent-badge {
  position: absolute;
  z-index: 2;
  top: 9px;
  padding: 4px 8px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  backdrop-filter: blur(8px);
}

.asset-gen-whitelist-badge {
  left: 9px;
  color: #f3f5f8;
  background: rgba(24, 29, 42, 0.86);
}

.asset-gen-whitelist-badge.approved {
  color: #bff7d0;
  background: rgba(20, 91, 52, 0.88);
}

.asset-gen-whitelist-badge.pending {
  color: #ffebb0;
  background: rgba(112, 78, 16, 0.9);
}

.asset-gen-whitelist-badge.failed {
  color: #ffd1d1;
  background: rgba(118, 32, 42, 0.9);
}

.asset-gen-permanent-badge {
  right: 9px;
  color: #d7f7e0;
  background: rgba(20, 91, 52, 0.86);
}

.asset-gen-finalized-card > footer,
.asset-gen-draft-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid rgba(148, 163, 184, 0.1);
}

.asset-gen-finalized-card > footer button,
.asset-gen-draft-actions button {
  min-width: 0;
  min-height: 32px;
  display: inline-flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.025);
  color: #c3cad8;
  font-size: 12px;
  line-height: 1;
}

.asset-gen-finalized-card > footer button:hover:not(:disabled),
.asset-gen-draft-actions button:hover:not(:disabled) {
  border-color: rgba(167, 139, 250, 0.5);
  color: #e5d8ff;
  background: rgba(119, 76, 214, 0.12);
}

.asset-gen-finalized-card > footer button:disabled {
  opacity: 0.55;
}

.asset-gen-draft-actions button.primary {
  border-color: #6e48d9;
  background: #6e48d9;
  color: #fff;
}

.asset-gen-draft-actions button.danger {
  flex: 0 0 auto;
  color: #ef9a9a;
}

.asset-gen-draft-card > time {
  display: block;
  padding: 0 10px 10px;
  color: #747e91;
  font-size: 11px;
  text-align: right;
}

.asset-gen-finalized-picker,
.asset-gen-material-card {
  width: 308px;
  height: 174px;
  border: 1px solid rgba(129, 140, 248, 0.18);
  border-radius: 8px;
  background: radial-gradient(circle at 50% 35%, rgba(92, 68, 182, 0.11), transparent 55%), #111726;
}

.asset-gen-finalized-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
}

.asset-gen-finalized-picker button {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  border: 0;
  border-right: 1px solid rgba(148, 163, 184, 0.1);
  background: transparent;
  color: #aab3c4;
}

.asset-gen-finalized-picker button:last-child {
  border-right: 0;
}

.asset-gen-finalized-picker button:hover {
  color: #cfb5ff;
  background: rgba(119, 76, 214, 0.08);
}

.asset-gen-finalized-picker strong,
.asset-gen-finalized-picker svg {
  width: 34px;
  height: 34px;
  font-size: 25px;
  font-weight: 300;
}

.asset-gen-material-card {
  position: relative;
  overflow: hidden;
  padding: 0;
}

.asset-gen-material-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.asset-gen-material-card small {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 4px 7px;
  border-radius: 5px;
  background: rgba(2, 6, 23, 0.82);
  color: #d7c6ff;
}

.asset-gen-draft-block {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

.asset-gen-draft-grid {
  overflow: auto;
}

.asset-gen-draft-grid .asset-gen-material-card {
  width: 100%;
  height: 238px;
}

.asset-gen-draft-empty {
  display: grid;
  flex: 1 1 auto;
  place-items: center;
  align-content: center;
  gap: 14px;
  min-height: 220px;
  color: #596276;
  text-align: center;
}

.asset-gen-draft-empty svg {
  width: 46px;
  height: 46px;
  padding: 11px;
  border-radius: 8px;
  background: rgba(98, 108, 132, 0.08);
}

.asset-gen-draft-empty p {
  margin: 0;
  font-size: 13px;
}

@media (max-width: 1050px) {
  .asset-gen-workbench-overlay { padding: 12px; }
  .asset-gen-workbench {
    grid-template-columns: minmax(0, 1fr);
    width: calc(100vw - 24px);
    height: calc(100vh - 24px);
    min-height: 0;
    overflow-y: auto;
  }
  .asset-gen-workbench-left { min-height: 680px; border-right: 0; border-bottom: 1px solid rgba(129, 140, 248, 0.1); }
  .asset-gen-workbench-right { min-height: 520px; overflow: visible; }
  .asset-gen-reference-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .asset-gen-workbench-grid { grid-template-columns: minmax(0, 1fr); }
  .asset-gen-workbench-grid.single { max-width: none; }
  .asset-gen-reference-style-field { max-width: none; }
  .asset-gen-prompt-footer { align-items: stretch; flex-direction: column; }
  .asset-gen-prompt-footer > div { grid-template-columns: minmax(0, 1fr); }
  .asset-gen-finalized-picker,
  .asset-gen-material-card { width: 100%; }
  .asset-gen-reference-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.asset-generate-dialog {
  width: min(760px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  color: #e5edf7;
  background: #0b111c;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.52);
}

.asset-generate-head,
.asset-generate-actions {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 20px;
}

.asset-generate-head {
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.asset-generate-head span {
  display: block;
  margin-bottom: 5px;
  color: #6f839a;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0;
}

.asset-generate-head h2 {
  margin: 0;
  color: #f8fbff;
  font-size: 20px;
  line-height: 1.25;
}

.asset-generate-head > button {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 7px;
  color: #8fa0b4;
  background: rgba(148, 163, 184, 0.05);
}

.asset-generate-head > button svg {
  width: 17px;
  height: 17px;
}

.asset-generate-body {
  min-height: 0;
  display: grid;
  gap: 18px;
  padding: 20px;
  overflow-y: auto;
}

.asset-generate-field {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.asset-generate-field > span,
.asset-generate-field label,
.asset-generate-label-row > label {
  color: #9aabba;
  font-size: 12px;
  font-weight: 800;
}

.asset-generate-field select,
.asset-generate-reference {
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 7px;
  color: #d9e4ef;
  background: #101927;
  font: inherit;
}

.asset-generate-field select:disabled,
.asset-generate-reference:disabled {
  color: #66788b;
  opacity: 1;
}

.asset-generate-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.asset-generate-grid.single-column {
  grid-template-columns: minmax(0, 1fr);
}

.asset-generate-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.asset-generate-label-row > div {
  display: flex;
  gap: 6px;
}

.asset-generate-label-row button {
  min-height: 28px;
  padding: 0 9px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 6px;
  color: #8fa2b6;
  background: rgba(148, 163, 184, 0.05);
  font-size: 11px;
}

.asset-generate-selection {
  max-height: 230px;
  display: grid;
  gap: 6px;
  padding: 7px;
  overflow-y: auto;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 8px;
  background: #080e18;
}

.asset-generate-option {
  min-height: 54px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  background: rgba(148, 163, 184, 0.035);
}

.asset-generate-option:hover,
.asset-generate-option.selected {
  border-color: rgba(56, 189, 248, 0.3);
  background: rgba(56, 189, 248, 0.07);
}

.asset-generate-option.disabled {
  cursor: not-allowed;
  opacity: 0.52;
}

.asset-generate-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.asset-generate-check {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 5px;
  color: #03111a;
  background: rgba(148, 163, 184, 0.05);
}

.asset-generate-option.selected .asset-generate-check {
  border-color: #38bdf8;
  background: #38bdf8;
}

.asset-generate-check svg {
  width: 14px;
  height: 14px;
  stroke-width: 3;
}

.asset-generate-option-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.asset-generate-option-copy strong,
.asset-generate-option-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.asset-generate-option-copy strong {
  color: #dfe8f1;
  font-size: 13px;
}

.asset-generate-option-copy small,
.asset-generate-assets-field > p,
.asset-generate-prompt-note {
  margin: 0;
  color: #67798d;
  font-size: 11px;
  line-height: 1.5;
}

.asset-generate-option em {
  padding: 4px 7px;
  border-radius: 5px;
  color: #8fa2b5;
  background: rgba(148, 163, 184, 0.08);
  font-size: 10px;
  font-style: normal;
}

.asset-generate-loading,
.asset-generate-empty {
  min-height: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: #708398;
  font-size: 12px;
}

.asset-generate-reference {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}

.asset-generate-reference svg {
  width: 17px;
  height: 17px;
}

.asset-generate-reference-picker {
  min-height: 58px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 8px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 7px;
  background: #101927;
}

.asset-generate-reference-preview {
  width: 58px;
  height: 40px;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 6px;
  background: #070c14;
}

.asset-generate-reference-preview img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.asset-generate-reference-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.asset-generate-reference-copy strong,
.asset-generate-reference-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.asset-generate-reference-copy strong {
  color: #dce6f0;
  font-size: 12px;
}

.asset-generate-reference-copy small {
  color: #708399;
  font-size: 10px;
}

.asset-generate-reference-empty {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #718399;
  font-size: 12px;
}

.asset-generate-reference-empty svg {
  width: 18px;
  height: 18px;
}

.asset-generate-reference-buttons {
  display: flex;
  gap: 6px;
}

.asset-generate-reference-buttons button {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid rgba(56, 189, 248, 0.26);
  border-radius: 6px;
  color: #9bdcf5;
  background: rgba(14, 165, 233, 0.08);
  font-size: 11px;
}

.asset-generate-reference-buttons button[aria-label="清除参考图"] {
  width: 32px;
  padding: 0;
  color: #8fa0b2;
  border-color: rgba(148, 163, 184, 0.15);
  background: rgba(148, 163, 184, 0.04);
}

.asset-generate-reference-buttons svg {
  width: 15px;
  height: 15px;
}

.asset-team-overlay {
  position: fixed;
  inset: 0;
  z-index: 7600;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(2, 6, 13, 0.8);
  backdrop-filter: blur(10px);
}

.asset-team-picker,
.asset-team-save {
  width: min(960px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  display: grid;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  color: #dde7f1;
  background: #0b111c;
  box-shadow: 0 28px 84px rgba(0, 0, 0, 0.56);
}

.asset-team-picker {
  grid-template-rows: auto auto minmax(280px, 1fr) auto;
}

.asset-team-save {
  width: min(760px, calc(100vw - 48px));
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.asset-team-head {
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 18px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.asset-team-head span {
  display: block;
  margin-bottom: 4px;
  color: #718399;
  font-size: 10px;
  font-weight: 850;
}

.asset-team-head h3 {
  margin: 0;
  color: #f5f8fc;
  font-size: 19px;
}

.asset-team-head > button {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(148, 163, 184, 0.15);
  border-radius: 7px;
  color: #8fa1b4;
  background: rgba(148, 163, 184, 0.05);
}

.asset-team-head svg {
  width: 17px;
  height: 17px;
}

.asset-team-tabs {
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 18px;
  overflow-x: auto;
  border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}

.asset-team-tabs button {
  min-height: 30px;
  flex: 0 0 auto;
  padding: 0 12px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 6px;
  color: #8193a7;
  background: rgba(148, 163, 184, 0.04);
  font-size: 11px;
  font-weight: 750;
}

.asset-team-tabs button.active {
  color: #dff5ff;
  border-color: rgba(56, 189, 248, 0.38);
  background: rgba(14, 165, 233, 0.12);
}

.asset-team-picker-body {
  min-height: 280px;
  padding: 16px 18px;
  overflow-y: auto;
  background: #080e18;
}

.asset-team-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.asset-team-card {
  min-width: 0;
  display: grid;
  gap: 8px;
  padding: 7px;
  position: relative;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 7px;
  text-align: left;
  background: #0e1724;
}

.asset-team-card:hover,
.asset-team-card.selected {
  border-color: rgba(56, 189, 248, 0.52);
  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.1);
}

.asset-team-card > span {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 5px;
  background: #050910;
}

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

.asset-team-card strong {
  overflow: hidden;
  color: #bdc9d6;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.asset-team-card i {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  position: absolute;
  top: 12px;
  right: 12px;
  border-radius: 50%;
  color: #05202b;
  background: #67d2f5;
}

.asset-team-card i svg {
  width: 14px;
  height: 14px;
  stroke-width: 3;
}

.asset-team-state {
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #718398;
}

.asset-team-state.error {
  color: #fda4af;
}

.asset-team-picker-footer,
.asset-team-save-actions {
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border-top: 1px solid rgba(148, 163, 184, 0.12);
  background: #090f19;
}

.asset-team-search {
  min-width: 280px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding-left: 10px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 7px;
  background: #0e1724;
}

.asset-team-search > svg {
  width: 16px;
  height: 16px;
  color: #65778a;
}

.asset-team-search input {
  min-width: 0;
  height: 38px;
  border: 0;
  outline: 0;
  color: #dbe5ef;
  background: transparent;
}

.asset-team-search button {
  min-height: 38px;
  padding: 0 13px;
  border: 0;
  border-left: 1px solid rgba(148, 163, 184, 0.12);
  color: #8fdcf6;
  background: rgba(14, 165, 233, 0.08);
}

.asset-team-picker-footer > div,
.asset-team-save-actions {
  display: flex;
  gap: 9px;
}

.asset-team-ghost,
.asset-team-primary {
  min-width: 102px;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 15px;
  border-radius: 7px;
  font-weight: 800;
}

.asset-team-ghost {
  border: 1px solid rgba(148, 163, 184, 0.16);
  color: #9aabba;
  background: rgba(148, 163, 184, 0.05);
}

.asset-team-primary {
  border: 1px solid rgba(56, 189, 248, 0.46);
  color: #041018;
  background: #67d2f5;
}

.asset-team-primary:disabled,
.asset-team-ghost:disabled {
  cursor: not-allowed;
  opacity: 0.46;
}

.asset-team-save-body {
  min-height: 0;
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 20px;
  padding: 20px;
  overflow-y: auto;
}

.asset-team-save-preview {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 9px;
}

.asset-team-save-preview > span {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 7px;
  background: #070c14;
}

.asset-team-save-preview img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.asset-team-save-preview b {
  width: max-content;
  padding: 4px 7px;
  border-radius: 5px;
  color: #8fdcf6;
  background: rgba(14, 165, 233, 0.1);
  font-size: 10px;
}

.asset-team-save-preview p,
.asset-team-save-form p {
  margin: 0;
  color: #718398;
  font-size: 11px;
  line-height: 1.6;
}

.asset-team-save-form {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 14px;
}

.asset-team-save-form > label {
  display: grid;
  gap: 7px;
}

.asset-team-save-form > label > span {
  color: #9aabba;
  font-size: 12px;
  font-weight: 800;
}

.asset-team-save-form input,
.asset-team-save-form select {
  width: 100%;
  min-height: 40px;
  padding: 0 11px;
  border: 1px solid rgba(148, 163, 184, 0.15);
  border-radius: 7px;
  color: #dce6f0;
  background: #101927;
}

.asset-team-new-category {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.asset-team-new-category button {
  min-width: 92px;
  border: 1px solid rgba(56, 189, 248, 0.24);
  border-radius: 7px;
  color: #91daf5;
  background: rgba(14, 165, 233, 0.07);
}

.asset-team-new-category button:disabled {
  opacity: 0.45;
}

.asset-team-inline-state {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #7dd3fc;
  font-size: 11px;
}

.asset-team-inline-state.error {
  color: #fda4af;
}

.asset-team-save-actions {
  justify-content: flex-end;
}

.asset-generate-error {
  padding: 10px 12px;
  border: 1px solid rgba(244, 63, 94, 0.24);
  border-radius: 7px;
  color: #fda4af;
  background: rgba(76, 15, 31, 0.3);
  font-size: 12px;
}

.asset-generate-actions {
  border-top: 1px solid rgba(148, 163, 184, 0.12);
  background: #090f19;
}

.asset-generate-actions > span {
  min-height: 18px;
  color: #7dd3fc;
  font-size: 12px;
}

.asset-generate-actions > div {
  display: flex;
  gap: 10px;
}

.asset-generate-cancel,
.asset-generate-submit {
  min-width: 104px;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  border-radius: 7px;
  font-weight: 800;
}

.asset-generate-cancel {
  border: 1px solid rgba(148, 163, 184, 0.17);
  color: #9aabba;
  background: rgba(148, 163, 184, 0.05);
}

.asset-generate-submit {
  border: 1px solid rgba(56, 189, 248, 0.52);
  color: #041018;
  background: #67d2f5;
  box-shadow: 0 8px 24px rgba(14, 165, 233, 0.2);
}

.asset-generate-submit:disabled,
.asset-generate-cancel:disabled,
.asset-generate-head > button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.asset-generate-dialog.compact {
  position: relative;
  width: min(760px, calc(100vw - 48px));
  height: min(613px, calc(100vh - 48px));
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 42px 40px 32px;
  border-color: rgba(255, 255, 255, 0.08);
  border-radius: 26px;
  background: linear-gradient(rgba(25, 30, 42, 0.98), rgba(17, 21, 32, 0.98));
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.46);
  overflow: visible;
}

.asset-generate-dialog.compact .asset-generate-head {
  min-height: 31px;
  padding: 0;
  border-bottom: 0;
}

.asset-generate-dialog.compact .asset-generate-head h2 {
  width: 100%;
  font-size: 26px;
  line-height: 31.2px;
}

.asset-generate-dialog.compact .asset-generate-head > button {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 999px;
  color: rgba(228, 232, 241, 0.82);
  background: transparent;
}

.asset-generate-dialog.compact .asset-generate-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 22px;
  padding: 0;
  overflow: visible;
}

.asset-generate-dialog.compact .asset-generate-model-grid .asset-gen-smart-panel.compact {
  top: auto;
  bottom: calc(100% + 6px);
}

.asset-generate-dialog.compact .asset-generate-field {
  gap: 10px;
}

.asset-generate-dialog.compact .asset-generate-field > span {
  color: rgba(226, 232, 240, 0.92);
  font-size: 14px;
  font-weight: 600;
  line-height: 21px;
}

.asset-generate-dialog.compact .asset-gen-smart-trigger,
.asset-generate-dialog.compact .asset-gen-reference-trigger {
  height: 48px;
  min-height: 48px;
  gap: 12px;
  padding: 12px 14px;
  border-color: rgba(162, 118, 255, 0.22);
  border-radius: 14px;
  background: rgba(14, 18, 30, 0.78);
  color: #e1e6f0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
}

.asset-generate-dialog.compact .asset-generate-reference-trigger img {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  object-fit: cover;
}

.asset-generate-batch-select {
  position: relative;
}

.asset-generate-batch-trigger {
  grid-template-columns: minmax(0, 1fr) 16px !important;
}

.asset-generate-batch-trigger > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}

.asset-generate-batch-menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 7px);
  left: 0;
  width: 100%;
  max-height: 340px;
  overflow: auto;
  padding: 8px;
  border: 1px solid rgba(162, 118, 255, 0.28);
  border-radius: 14px;
  background: rgba(12, 16, 28, 0.98);
  box-shadow: 0 24px 60px rgba(2, 6, 23, 0.52), 0 0 0 1px rgba(162, 118, 255, 0.1);
}

.asset-generate-batch-menu .asset-generate-selection {
  max-height: none;
  display: block;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
}

.asset-generate-batch-menu .asset-generate-option {
  width: 100%;
  min-height: 40px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16px;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  color: rgba(225, 230, 240, 0.88);
  background: transparent;
  font-size: 14px;
  font-weight: 400;
  line-height: 20.3px;
  cursor: pointer;
  transition: color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}

.asset-generate-batch-menu .asset-generate-option.selected {
  border: 0;
  color: #fff;
  background: linear-gradient(135deg, rgba(162, 118, 255, 0.24), rgba(125, 87, 224, 0.16));
}

.asset-generate-batch-menu .asset-generate-option:hover {
  color: #fff;
  background: linear-gradient(135deg, rgba(162, 118, 255, 0.18), rgba(125, 87, 224, 0.11));
  box-shadow: inset 0 0 0 1px rgba(185, 148, 255, 0.34);
}

.asset-generate-batch-menu .asset-generate-option.selected:hover {
  background: linear-gradient(135deg, rgba(178, 139, 255, 0.34), rgba(132, 91, 229, 0.23));
  box-shadow: inset 0 0 0 1px rgba(202, 174, 255, 0.46), 0 3px 12px rgba(88, 52, 168, 0.14);
}

.asset-generate-batch-menu .asset-generate-option:active {
  background: linear-gradient(135deg, rgba(146, 98, 242, 0.4), rgba(104, 66, 192, 0.28));
}

.asset-generate-batch-menu .asset-generate-option:focus-within {
  box-shadow: inset 0 0 0 1px rgba(202, 174, 255, 0.56), 0 0 0 2px rgba(162, 118, 255, 0.12);
}

.asset-generate-batch-menu .asset-generate-option-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.asset-generate-batch-menu .asset-generate-check,
.asset-generate-batch-menu .asset-generate-option.selected .asset-generate-check {
  width: 16px;
  height: 16px;
  border: 0;
  border-radius: 0;
  color: #a276ff;
  background: transparent;
}

.asset-generate-batch-menu .asset-generate-check svg {
  width: 16px;
  height: 16px;
  stroke-width: 2;
}

.asset-generate-batch-select.open > .asset-generate-batch-trigger {
  border-color: #a276ff;
  box-shadow: 0 0 0 3px rgba(162, 118, 255, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.asset-generate-dialog.compact .asset-generate-actions {
  min-height: 46px;
  padding: 0;
  border-top: 0;
  background: transparent;
}

.asset-generate-dialog.compact .asset-generate-actions > div {
  gap: 12px;
}

.asset-generate-dialog.compact .asset-generate-assets-field > p {
  color: rgba(148, 163, 184, 0.82);
  font-size: 12px;
  line-height: 18px;
}

.asset-generate-dialog.compact .asset-generate-cancel,
.asset-generate-dialog.compact .asset-generate-submit {
  min-width: 132px;
  min-height: 46px;
  padding: 1px 6px;
  border: 0;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 600;
  line-height: 15px;
}

.asset-generate-dialog.compact .asset-generate-cancel {
  color: rgba(226, 232, 240, 0.92);
  background: rgba(255, 255, 255, 0.08);
}

.asset-generate-dialog.compact .asset-generate-submit {
  color: #fff;
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  box-shadow: 0 16px 32px rgba(124, 58, 237, 0.24);
}

@media (max-width: 720px) {
  .modal-backdrop.asset-generate-overlay { inset: 0; padding: 10px; }
  .asset-generate-dialog { width: calc(100vw - 20px); max-height: calc(100vh - 20px); }
  .asset-generate-grid { grid-template-columns: minmax(0, 1fr); }
  .asset-generate-label-row { align-items: flex-start; flex-direction: column; }
  .asset-generate-actions { align-items: stretch; flex-direction: column; }
  .asset-generate-actions > div { width: 100%; }
  .asset-generate-cancel,
  .asset-generate-submit { flex: 1 1 0; }
  .asset-generate-reference-picker { grid-template-columns: auto minmax(0, 1fr); }
  .asset-generate-reference-buttons { grid-column: 1 / -1; }
  .asset-team-overlay { padding: 10px; }
  .asset-team-picker,
  .asset-team-save { width: calc(100vw - 20px); max-height: calc(100vh - 20px); }
  .asset-team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .asset-team-picker-footer { align-items: stretch; flex-direction: column; }
  .asset-team-search { min-width: 0; width: 100%; }
  .asset-team-picker-footer > div { width: 100%; }
  .asset-team-picker-footer .asset-team-ghost,
  .asset-team-picker-footer .asset-team-primary { flex: 1 1 0; }
  .asset-team-save-body { grid-template-columns: minmax(0, 1fr); }
}

.role-voice-cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
  justify-content: center;
  padding-top: 0;
}

.role-voice-cell span {
  min-height: 18px;
  color: #566579;
  font-size: 13px;
}

.role-voice-cell span:empty {
  display: none;
}

.role-voice-cell button {
  width: 100%;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 10px;
  border: 1px solid rgba(162, 118, 255, 0.4);
  border-radius: 8px;
  color: #94a3b8;
  background: rgba(162, 118, 255, 0.12);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
  overflow-wrap: anywhere;
}

.asset-copy-editor {
  width: 100%;
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  box-sizing: content-box;
  margin: -6px -8px;
  padding: 6px 8px;
  border: 0;
  border-radius: 8px;
  color: #7a8b9e;
  background: transparent;
  font-size: 14px;
  line-height: 1.8;
  text-align: left;
  overflow: visible;
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}

.asset-copy-editor span {
  display: block;
  min-width: 0;
  min-height: 1.8em;
  max-height: 9em;
  overflow: hidden;
  white-space: normal;
  text-overflow: ellipsis;
  overflow-wrap: anywhere;
}

.asset-episodes-cell {
  min-width: 0;
  display: block;
  align-self: center;
  padding-top: 0;
}

.episode-multi-select__trigger.asset-episode-editor {
  width: 100%;
  max-width: 138px;
  min-width: 0;
  min-height: 38px;
  display: inline-flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 6px 9px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #5e6c7d;
  background: transparent;
  font-size: 13.3333px;
  font-weight: 400;
  line-height: normal;
  text-align: left;
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}

.episode-multi-select__value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.asset-episodes-cell.active .asset-inline-editor {
  width: 100%;
  max-width: 138px;
  height: 38px;
  text-align: center;
}

.asset-copy-editor:hover,
.asset-copy-editor:focus-visible,
.episode-multi-select__trigger:hover,
.episode-multi-select__trigger:focus-visible,
.asset-name-editor:hover,
.asset-name-editor:focus-visible,
.asset-meta-editor:hover,
.asset-meta-editor:focus-visible {
  color: #c5cfdf;
  border-color: rgba(96, 165, 250, 0.24);
  background: rgba(96, 165, 250, 0.055);
  outline: none;
}

.asset-copy-editor:hover,
.asset-copy-editor:focus-visible {
  box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.24);
}

.asset-meta-editor:hover,
.asset-meta-editor:focus-visible {
  border-color: transparent;
  color: #aeb8cb;
  background: transparent;
}

.asset-inline-editor {
  width: 100%;
  min-width: 0;
  height: 34px;
  border: 1px solid rgba(162, 118, 255, 0.72);
  border-radius: 8px;
  padding: 0 9px;
  outline: none;
  color: #dce5f6;
  background: rgba(5, 7, 14, 0.8);
  font: inherit;
  line-height: 1.6;
  box-shadow: 0 0 0 2px rgba(162, 118, 255, 0.08);
}

.asset-inline-textarea {
  height: 9em;
  min-height: 4.2em;
  max-height: 50vh;
  padding: 7px 9px;
  resize: vertical;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.asset-copy-editor.active {
  margin: 0;
  padding: 0;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.asset-inline-edit-actions {
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 18px 28px;
  border-top: 1px solid rgba(148, 163, 184, 0.1);
  background: rgba(8, 13, 24, 0.24);
}

.asset-inline-edit-actions button {
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
}

.asset-inline-cancel {
  border: 1px solid rgba(148, 163, 184, 0.16);
  color: rgba(203, 213, 225, 0.76);
  background: rgba(15, 23, 42, 0.68);
}

.asset-inline-save {
  border: 1px solid rgba(162, 118, 255, 0.52);
  color: #f3efff;
  background: rgba(124, 92, 255, 0.28);
  box-shadow: 0 8px 22px rgba(91, 68, 194, 0.22);
}

.asset-inline-save svg {
  width: 14px;
  height: 14px;
}

.asset-card-tools {
  position: absolute;
  z-index: 4;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.asset-row-delete {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(248, 113, 113, 0.24);
  border-radius: 7px;
  color: rgba(248, 113, 113, 0.7);
  background: rgba(44, 16, 24, 0.76);
  opacity: 0;
  transform: scale(0.86);
  pointer-events: auto;
  transition: opacity 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}

.asset-row-delete svg {
  width: 12px;
  height: 12px;
}

.role-asset-card:has(> .role-asset-row:not(.role-asset-variant):hover) > .asset-card-tools .asset-row-delete,
.role-asset-variant:hover > .asset-card-tools .asset-row-delete,
.asset-row-delete:focus-visible {
  opacity: 1;
  transform: scale(1);
}

.asset-row-delete:hover {
  border-color: rgba(248, 113, 113, 0.56);
  color: #fecaca;
}

.role-asset-variant {
  position: relative;
  min-height: 96px;
  border-top: 1px dashed rgba(148, 163, 184, 0.12);
  box-shadow: inset 3px 0 rgba(96, 165, 250, 0.48);
  background: rgba(8, 13, 24, 0.24);
}

.role-add-form {
  width: 100%;
  min-height: 42px;
  border-top: 1px dashed rgba(148, 163, 184, 0.16);
  color: #7a8b9e;
  background: rgba(8, 13, 24, 0.2);
  font-size: 13px;
  font-weight: 700;
}

.role-add-form:hover {
  color: #d4dcf0;
  background: rgba(162, 118, 255, 0.06);
}

.asset-table-pagination {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  border-top: 1px solid rgba(148, 163, 184, 0.08);
  color: rgba(148, 163, 184, 0.68);
  background: rgba(16, 20, 32, 0.56);
  font-size: 13px;
}

.asset-table-pagination div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.asset-table-pagination button {
  min-width: 66px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 7px;
  color: #526176;
  background: rgba(255, 255, 255, 0.025);
}

.asset-table-pagination button:disabled {
  cursor: default;
  opacity: 0.55;
}

.modal-assetEdit {
  width: min(680px, calc(100vw - 40px));
}

.modal-assetEdit .asset-edit-modal-field {
  display: grid;
  gap: 10px;
}

.modal-assetEdit .asset-edit-modal-field > span {
  color: #aeb8cb;
  font-size: 13px;
  font-weight: 850;
}

.modal-assetEdit textarea {
  min-height: 260px;
  resize: vertical;
  white-space: pre-wrap;
}

.modal-assetDelete {
  width: min(460px, calc(100vw - 40px));
}

.modal-assetDelete .modal-primary-btn {
  border-color: rgba(248, 113, 113, 0.48);
  color: #fff1f2;
  background: rgba(190, 24, 93, 0.34);
}

.episodes-workbench > header h1 {
  margin: 4px 0;
  font-size: 30px;
}

.episodes-workbench > header p {
  margin: 0;
  color: var(--muted);
}

.episode-body {
  height: calc(100vh - 222px);
  display: grid;
  grid-template-columns: 134px minmax(0, 1fr);
  padding: 0 20px 20px;
}

.theater-project-detail-page .episode-body {
  min-height: 0;
  height: auto;
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  margin: 0 20px 20px;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(118, 145, 176, 0.14);
  border-radius: 10px;
  background: rgba(7, 12, 24, 0.42);
}

.theater-project-detail-page .episode-body.is-draft {
  border-color: rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(11, 16, 30, 0.96), rgba(7, 11, 21, 0.94)),
    rgba(10, 14, 23, 0.6);
}

.theater-project-detail-page .episode-body.is-storyboard {
  min-height: calc(100vh - 222px);
}

.episode-rail {
  overflow: auto;
  border-right: 1px solid var(--line);
  padding: 12px 10px 12px 0;
}

.theater-project-detail-page .episode-rail {
  min-height: 0;
  padding: 12px;
  border-right-color: rgba(118, 145, 176, 0.14);
  background: rgba(4, 9, 19, 0.2);
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
}

.episode-rail-list {
  min-height: 0;
  overflow: auto;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 6px;
  scrollbar-width: none;
}

.episode-rail-list::-webkit-scrollbar {
  display: none;
}

.theater-project-detail-page .episode-batch-toolbar {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(118, 145, 176, 0.12);
}

.theater-project-detail-page .episode-batch-toolbar > span {
  grid-column: 1 / -1;
  color: rgba(170, 180, 196, 0.72);
  font-size: 11px;
  line-height: 1.2;
  text-align: center;
}

.theater-project-detail-page .episode-batch-toolbar > span strong {
  color: #e7edf5;
  font-size: 12px;
}

.theater-project-detail-page .episode-rail .episode-batch-toolbar button {
  min-height: 28px;
  padding: 0 6px;
  border: 1px solid rgba(118, 145, 176, 0.14);
  border-radius: 6px;
  color: rgba(201, 211, 225, 0.7);
  background: rgba(255, 255, 255, 0.025);
  font-size: 11px;
  font-weight: 700;
}

.theater-project-detail-page .episode-rail-entry {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 0;
  border-radius: 8px;
}

.theater-project-detail-page .episode-rail-entry.is-selected {
  background: rgba(162, 118, 255, 0.035);
}

.theater-project-detail-page .episode-rail-check {
  width: 26px;
  height: 38px;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.theater-project-detail-page .episode-rail-check input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.theater-project-detail-page .episode-rail-check > span {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(118, 145, 176, 0.24);
  border-radius: 5px;
  color: white;
  background: rgba(255, 255, 255, 0.03);
}

.theater-project-detail-page .episode-rail-check input:checked + span {
  border-color: rgba(162, 118, 255, 0.72);
  background: #7650d8;
  box-shadow: 0 0 0 2px rgba(162, 118, 255, 0.1);
}

.theater-project-detail-page .episode-rail-check svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
}

.theater-project-detail-page .episode-rail-entry > button {
  min-width: 0;
}

.theater-project-detail-page .episode-rail-entry > button[data-episode] {
  padding-right: 30px;
}

.theater-project-detail-page .episode-rail-entry > .episode-rail-delete {
  position: absolute;
  top: 7px;
  right: 5px;
  width: 24px;
  min-width: 24px;
  min-height: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  opacity: 0;
  color: #f59aa5;
  background: rgba(244, 63, 94, 0.1);
  transition: opacity 150ms ease, background 150ms ease;
}

.theater-project-detail-page .episode-rail-entry:hover > .episode-rail-delete,
.theater-project-detail-page .episode-rail-entry > .episode-rail-delete:focus-visible {
  opacity: 1;
}

.theater-project-detail-page .episode-rail-entry > .episode-rail-delete:hover {
  color: #fecdd3;
  background: rgba(244, 63, 94, 0.2);
}

.theater-project-detail-page .episode-rail-entry > .episode-rail-delete svg {
  width: 13px;
  height: 13px;
}

.episode-rail button {
  width: 100%;
  min-height: 38px;
  margin-bottom: 6px;
  border-radius: 8px;
  color: #8e9ab1;
  background: transparent;
}

.theater-project-detail-page .episode-rail button {
  min-height: 38px;
  margin-bottom: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  color: rgba(201, 211, 225, 0.54);
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 10px;
}

.episode-rail button.active {
  color: #ffffff;
  border: 1px solid rgba(154, 107, 255, 0.42);
  background: rgba(154, 107, 255, 0.16);
}

.theater-project-detail-page .episode-rail button:hover {
  color: rgba(232, 238, 248, 0.88);
  background: rgba(255, 255, 255, 0.035);
}

.theater-project-detail-page .episode-rail button.active {
  color: #f8fbff;
  border-color: rgba(154, 107, 255, 0.42);
  background: linear-gradient(180deg, rgba(162, 118, 255, 0.16), rgba(162, 118, 255, 0.07));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.055);
}

.theater-project-detail-page .episode-rail button.dirty {
  border-color: rgba(210, 172, 91, 0.26);
}

.theater-project-detail-page .episode-rail button span {
  min-width: 0;
  overflow: hidden;
  color: currentColor;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.theater-project-detail-page .episode-rail button i {
  color: #a276ff;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}

.theater-project-detail-page .episode-rail .episode-rail-add {
  flex: 0 0 auto;
  border-color: rgba(148, 163, 184, 0.14);
  color: rgba(203, 213, 225, 0.78);
  background: rgba(255, 255, 255, 0.04);
}

.theater-project-detail-page .episode-rail .episode-rail-add svg {
  width: 15px;
  height: 15px;
}

.episode-reader {
  min-width: 0;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  gap: 10px;
  padding: 24px 20px 0;
}

.theater-project-detail-page .episode-reader {
  min-height: 0;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  gap: 10px;
  padding: 24px 20px 20px;
}

.episode-reader h2 {
  margin: 0;
  font-size: 30px;
}

.episode-reader p {
  margin: 0;
  color: var(--muted);
}

.episode-reader pre {
  min-width: 0;
  margin: 0;
  overflow: auto;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: #9faac0;
  background: rgba(9, 14, 27, 0.74);
  white-space: pre-wrap;
  line-height: 1.85;
}

.theater-project-detail-page .episode-reader pre {
  min-height: 0;
  padding: 22px;
  border-color: rgba(118, 145, 176, 0.13);
  border-radius: 12px;
  color: rgba(122, 139, 158, 0.92);
  background: rgba(18, 24, 38, 0.7);
  font-family: "Noto Serif SC", "Songti SC", serif;
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: 0.015em;
}

.episode-draft-editor {
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding: 20px 22px 22px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
}

.episode-draft-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.episode-draft-toolbar h2 {
  margin: 0;
  color: #94a3b8;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.25;
}

.episode-draft-toolbar > div:first-child > small {
  display: block;
  margin-bottom: 5px;
  color: #7759bf;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0;
}

.episode-draft-toolbar p {
  margin: 6px 0 0;
  color: #5e6c7d;
  font-size: 13px;
}

.episode-draft-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.episode-primary-action,
.episode-ghost-action {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.episode-primary-action:disabled,
.episode-ghost-action:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.episode-primary-action {
  border: 1px solid rgba(162, 118, 255, 0.4);
  color: #a276ff;
  background: transparent;
}

.episode-primary-action:hover {
  border-color: #a276ff;
  color: #cdbbff;
  background: rgba(162, 118, 255, 0.1);
}

.episode-ghost-action {
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #cbd5e1;
  background: transparent;
}

.episode-ghost-action:hover {
  border-color: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  background: rgba(255, 255, 255, 0.05);
}

.episode-primary-action:active,
.episode-ghost-action:active {
  transform: translateY(1px);
}

.episode-primary-action svg,
.episode-ghost-action svg {
  width: 15px;
  height: 15px;
}

.episode-draft-field {
  position: relative;
  min-height: 0;
  height: 100%;
  display: block;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(18, 24, 38, 0.7);
}

.episode-draft-field:focus-within {
  border-color: rgba(162, 118, 255, 0.5);
}

.episode-draft-field textarea {
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 0;
  border-radius: 0;
  padding: 18px 20px 44px;
  outline: 0;
  color: #7a8b9e;
  background: transparent;
  resize: none;
  white-space: pre-wrap;
  font-family: "Noto Serif SC", "Songti SC", serif;
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: 0.015em;
  scrollbar-width: thin;
}

.episode-draft-field span {
  position: absolute;
  right: 18px;
  bottom: 14px;
  padding: 4px 8px;
  border-radius: 999px;
  color: #5e6c7d;
  background: rgba(8, 15, 28, 0.68);
  font-size: 12px;
}

.episode-reader footer {
  display: flex;
  gap: 10px;
  padding: 12px 0 0;
}

.episode-reader footer button {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: #dce5f6;
  background: rgba(255, 255, 255, 0.05);
}

.storyboard-empty {
  min-width: 0;
  min-height: 520px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 14px;
  padding: 24px;
  color: var(--muted);
  text-align: center;
}

.storyboard-empty > span {
  width: 118px;
  height: 118px;
  display: grid;
  place-items: center;
  border-radius: 28px;
  color: var(--cyan);
  background: rgba(39, 215, 230, 0.12);
}

.storyboard-empty h2 {
  margin: 0;
  color: #dce5f6;
}

.storyboard-empty button,
.storyboard-board button {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: #dce5f6;
  background: rgba(255, 255, 255, 0.055);
}

.storyboard-board {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  padding: 18px 0 0 18px;
}

.storyboard-board > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 18px 16px 0;
  border-bottom: 1px solid var(--line);
}

.storyboard-board h2,
.storyboard-board p {
  margin: 4px 0 0;
}

.storyboard-board p {
  color: var(--muted);
}

.storyboard-board > header > div:last-child {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.storyboard-grid {
  min-height: 0;
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  grid-auto-rows: 330px;
  align-content: start;
  gap: 14px;
  padding: 18px 18px 22px 0;
}

.storyboard-grid article {
  --card-accent: #ffba61;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(151, 164, 203, 0.24);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 42%),
    rgba(255, 255, 255, 0.045);
}

.storyboard-grid article:nth-child(4n + 2) {
  --card-accent: #27d7e6;
}

.storyboard-grid article:nth-child(4n + 3) {
  --card-accent: #9a6bff;
}

.storyboard-grid article:nth-child(4n) {
  --card-accent: #3fe8a4;
}

.storyboard-grid article.active {
  border-color: rgba(154, 107, 255, 0.58);
  box-shadow: 0 0 0 1px rgba(154, 107, 255, 0.16);
}

.storyboard-grid img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 7px;
  transition:
    transform 0.32s ease,
    filter 0.32s ease;
}

.storyboard-grid article:hover img {
  filter: saturate(1.04) brightness(1.02);
  transform: scale(1.012);
}

.storyboard-grid small {
  color: var(--cyan);
  font-weight: 800;
}

.storyboard-grid strong {
  display: block;
  margin-top: 5px;
  line-height: 1.45;
}

.storyboard-grid p {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.storyboard-grid b {
  padding: 4px 7px;
  border-radius: 999px;
  color: #b9c6da;
  background: rgba(255, 255, 255, 0.06);
  font-size: 12px;
}

.storyboard-grid footer {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.storyboard-grid footer .storyboard-delete {
  width: 30px;
  min-width: 30px;
  padding: 0;
  margin-left: auto;
  border-radius: 50%;
  color: rgba(248, 113, 113, 0.84);
  opacity: 0;
  transform: scale(0.86);
  transition: opacity 0.16s ease, transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.storyboard-grid article:hover .storyboard-delete,
.storyboard-grid .storyboard-delete:focus-visible {
  opacity: 1;
  transform: scale(1);
}

.storyboard-grid .storyboard-delete:hover {
  border-color: rgba(248, 113, 113, 0.48);
  color: #fff;
  background: rgba(190, 24, 93, 0.34);
}

.storyboard-grid .storyboard-delete svg {
  width: 14px;
  height: 14px;
}

.stats-board {
  padding: 0 20px 20px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding-top: 20px;
}

.stats-grid article {
  min-height: 120px;
  display: grid;
  align-content: center;
  gap: 10px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
}

.stats-grid span,
.stats-grid small {
  color: var(--muted);
}

.stats-grid strong {
  font-size: 28px;
}

.queue-table {
  margin-top: 20px;
  padding: 18px;
}

.queue-table h2 {
  margin: 0 0 12px;
}

.queue-table div {
  min-height: 44px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px 140px;
  align-items: center;
  border-top: 1px solid var(--line);
  color: #dce5f6;
}

.queue-row strong,
.queue-row small {
  display: block;
}

.queue-row small {
  height: 6px;
  overflow: hidden;
  margin-top: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.queue-row small i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--cyan), var(--purple));
}

.queue-table b,
.queue-table em {
  color: var(--muted);
  font-style: normal;
}

.queue-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 0 0;
  border-top: 1px solid var(--line);
}

.queue-actions button {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  border-radius: 8px;
  color: #dce5f6;
  background: rgba(255, 255, 255, 0.055);
}

.task-list-page {
  display: grid;
  gap: 18px;
}

.status-tabs {
  display: flex;
  gap: 8px;
  width: fit-content;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(9, 14, 27, 0.78);
}

.status-tabs button {
  min-height: 34px;
  padding: 0 14px;
  border-radius: 9px;
  color: #9da8bb;
  background: transparent;
}

.status-tabs button.active {
  color: #ffffff;
  background: rgba(78, 95, 136, 0.52);
}

.module-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.module-metrics article,
.task-table,
.asset-catalog {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(11, 17, 32, 0.82);
}

.module-metrics article {
  min-height: 112px;
  display: grid;
  align-content: center;
  gap: 7px;
  padding: 18px;
}

.module-metrics span,
.task-table small,
.asset-catalog span,
.asset-catalog small {
  color: var(--muted);
}

.module-metrics strong {
  font-size: 28px;
}

.task-table {
  overflow: hidden;
}

.task-table header,
.task-table article {
  display: grid;
  grid-template-columns: minmax(260px, 1.5fr) 120px 120px 110px minmax(250px, 1fr);
  gap: 14px;
  align-items: center;
  min-height: 58px;
  padding: 0 18px;
}

.task-table header {
  min-height: 46px;
  color: #8f9bb2;
  background: rgba(255, 255, 255, 0.035);
  font-size: 12px;
}

.task-table article + article {
  border-top: 1px solid var(--line);
}

.task-table strong,
.task-table small {
  display: block;
}

.status-pill {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  color: #bcd3ff;
  background: rgba(91, 132, 255, 0.15);
}

.status-pill.success {
  color: #b6ffe0;
  background: rgba(63, 232, 164, 0.14);
}

.status-pill.processing,
.status-pill.running {
  color: #d7c5ff;
  background: rgba(154, 107, 255, 0.16);
}

.status-pill.queued,
.status-pill.draft {
  color: #ffe0aa;
  background: rgba(255, 186, 97, 0.14);
}

.row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.row-actions button {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border-radius: 8px;
  color: #dce5f6;
  background: rgba(255, 255, 255, 0.06);
}

.empty-panel {
  min-height: 218px;
  display: grid;
  place-items: center;
  color: #9aa6bb;
}

.project-banner {
  min-height: 96px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 30px;
}

.project-banner h1 {
  margin: 4px 0 0;
}

.project-banner p {
  color: var(--muted);
}

.project-banner div:last-child {
  display: flex;
  gap: 10px;
}

.project-banner button {
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: #dce5f6;
  background: rgba(255, 255, 255, 0.05);
}

.production-center {
  display: grid;
  gap: 18px;
}

.production-hero {
  border-color: rgba(255, 186, 97, 0.22);
  background:
    linear-gradient(135deg, rgba(42, 34, 23, 0.9), rgba(10, 18, 31, 0.9)),
    url("./assets/storyboard-contact-sheet.png") center / cover;
}

.ops-overview {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  gap: 16px;
}

.ops-progress,
.ops-risk,
.approval-panel,
.delivery-panel,
.budget-panel {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(8, 14, 28, 0.72);
}

.ops-progress,
.ops-risk {
  min-height: 150px;
  padding: 18px;
}

.ops-progress header,
.ops-risk header,
.approval-panel header,
.delivery-panel header,
.budget-panel header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ops-progress header strong {
  font-size: 28px;
}

.ops-progress > div,
.kanban-lane article > span,
.delivery-panel article div,
.budget-panel article div {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.ops-progress i,
.kanban-lane article i,
.delivery-panel article i,
.budget-panel article i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--green), var(--cyan), var(--warning));
}

.ops-progress footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.ops-progress footer b {
  padding: 6px 9px;
  border-radius: 999px;
  color: #bdc9dc;
  background: rgba(255, 255, 255, 0.06);
  font-size: 12px;
}

.ops-risk p {
  margin: 16px 0 0;
  color: var(--muted);
  line-height: 1.7;
}

.ops-risk button,
.approval-panel button,
.delivery-panel button,
.budget-panel button,
.kanban-lane button {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: #e9f0ff;
  background: rgba(255, 255, 255, 0.055);
}

.kanban-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.kanban-lane {
  min-height: 360px;
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(4, 9, 20, 0.64);
}

.kanban-lane > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.kanban-lane > header span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #06130f;
  background: var(--green);
  font-weight: 900;
}

.kanban-lane article {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(151, 164, 203, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
}

.kanban-lane small,
.kanban-lane p,
.approval-panel small,
.delivery-panel small,
.budget-panel small {
  color: var(--muted);
}

.kanban-lane strong {
  line-height: 1.45;
}

.kanban-lane p {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}

.kanban-lane p b {
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  font-size: 12px;
}

.kanban-lane footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.kanban-lane em {
  color: var(--warning);
  font-style: normal;
}

.lane-empty {
  margin: 0;
  padding: 24px 0;
  color: var(--muted);
  text-align: center;
}

.ops-bottom-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(300px, 0.95fr);
  gap: 16px;
}

.approval-panel,
.delivery-panel,
.budget-panel {
  min-height: 280px;
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 16px;
}

.approval-panel h2,
.delivery-panel h2,
.budget-panel h2 {
  margin: 0;
}

.approval-panel article,
.delivery-panel article,
.budget-panel article {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(151, 164, 203, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
}

.approval-panel article.approved {
  border-color: rgba(63, 232, 164, 0.28);
}

.approval-panel article span,
.delivery-panel article span {
  color: var(--cyan);
  font-size: 12px;
  font-weight: 900;
}

.delivery-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}

.delivery-actions > button:first-child {
  min-width: 118px;
  justify-content: center;
}

.delivery-actions button svg {
  width: 15px;
  height: 15px;
}

.delivery-actions .delivery-delete {
  width: 34px;
  min-width: 34px;
  padding: 0;
  justify-content: center;
  opacity: 0;
  color: #fda4af;
  border-radius: 50%;
  transition: opacity 160ms ease, border-color 160ms ease, background 160ms ease;
}

.delivery-panel article:hover .delivery-delete,
.delivery-delete:focus-visible {
  opacity: 1;
}

.delivery-empty {
  margin: 34px 0 0;
  color: var(--muted);
  text-align: center;
}

.budget-panel article {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.budget-panel article div {
  grid-column: 1 / -1;
}

.budget-panel article span {
  display: grid;
  gap: 4px;
}

.video-projects {
  display: grid;
  grid-template-columns: repeat(3, minmax(280px, 438px));
  gap: 24px;
}

.create-project-large {
  min-height: 280px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 20px;
  border: 1px solid var(--line);
  border-radius: 22px;
  color: #ffffff;
  background: rgba(10, 16, 31, 0.72);
}

.create-project-large span {
  width: 94px;
  height: 94px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--cyan);
  background: rgba(39, 215, 230, 0.13);
}

.understanding-project-card {
  --card-accent: #5b84ff;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 38%),
    linear-gradient(165deg, rgba(62, 79, 130, 0.68), rgba(22, 31, 54, 0.86));
}

.asset-catalog {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 18px;
  padding: 14px;
}

.team-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.team-board article {
  min-height: 130px;
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(11, 17, 32, 0.82);
}

.team-board span {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: var(--green);
  background: rgba(63, 232, 164, 0.12);
}

.team-board b,
.team-board small {
  color: var(--muted);
}

.asset-catalog aside {
  display: grid;
  align-content: start;
  gap: 8px;
}

.asset-catalog aside button {
  min-height: 42px;
  border-radius: 8px;
  color: #aeb8cb;
  background: transparent;
  text-align: left;
  padding: 0 12px;
}

.asset-catalog aside button.active {
  color: #ffffff;
  background: rgba(154, 107, 255, 0.2);
}

.asset-catalog > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.asset-catalog article {
  --card-accent: #3fe8a4;
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(151, 164, 203, 0.24);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 42%),
    rgba(255, 255, 255, 0.045);
}

.asset-catalog article:nth-child(3n + 2) {
  --card-accent: #5b84ff;
}

.asset-catalog article:nth-child(3n) {
  --card-accent: #d966af;
}

.asset-catalog img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 7px;
  transition:
    transform 0.32s ease,
    filter 0.32s ease;
}

.asset-catalog article:hover img {
  filter: saturate(1.04) brightness(1.02);
  transform: scale(1.012);
}

.asset-catalog footer {
  display: flex;
  gap: 8px;
}

.asset-catalog footer button {
  min-height: 32px;
  padding: 0 10px;
  border-radius: 8px;
  color: #dce5f6;
  background: rgba(255, 255, 255, 0.06);
}

/* Team asset workspace mirrors the reference page's full-height working layout. */
.team-assets-page {
  min-height: 100vh;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 14% 8%, rgba(162, 118, 255, 0.12), transparent 38%),
    radial-gradient(ellipse at 88% 14%, rgba(210, 186, 255, 0.06), transparent 34%),
    linear-gradient(180deg, #02060e 0%, #040914 100%);
}

.team-assets-page > .topbar {
  flex: 0 0 auto;
  height: auto;
  min-height: 74px;
  padding: 18px 36px;
  border-bottom-color: rgba(162, 118, 255, 0.18);
  background: rgba(4, 9, 20, 0.88);
}

.team-assets-main {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.team-assets-layout {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
}

.team-assets-layout.single-team {
  grid-template-columns: minmax(0, 1fr);
}

.team-asset-side-nav {
  width: 112px;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  padding: 12px 8px;
  border-right: 1px solid rgba(162, 118, 255, 0.18);
  background: rgba(8, 13, 25, 0.92);
}

.team-asset-side-nav button {
  width: 100%;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #8e9aae;
  background: transparent;
}

.team-asset-side-nav button.active,
.team-asset-side-nav button:hover {
  color: #e7edf7;
  border-color: rgba(162, 118, 255, 0.38);
  background: rgba(162, 118, 255, 0.14);
}

.team-asset-side-nav span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}

.team-assets-workspace {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  background: rgba(7, 14, 25, 0.85);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.03), 0 18px 40px rgba(2, 6, 23, 0.28);
}

.team-asset-category-section {
  min-width: 0;
  padding: 14px 18px;
  overflow: hidden;
  border-bottom: 1px solid rgba(162, 118, 255, 0.18);
  background: rgba(11, 17, 31, 0.92);
}

.team-asset-category-tabs {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}

.team-asset-category-tabs::-webkit-scrollbar {
  display: none;
}

.team-asset-category-tab {
  flex: 0 0 auto;
  min-width: 82px;
  height: 34px;
  display: flex;
  align-items: center;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 9px;
  color: #8290a3;
  background: rgba(255, 255, 255, 0.025);
  overflow: hidden;
}

.team-asset-category-tab > button:first-child {
  min-width: 0;
  height: 100%;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  color: inherit;
  background: transparent;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-asset-category-tab.active,
.team-asset-category-tab:hover {
  color: #e6edf7;
  border-color: rgba(162, 118, 255, 0.48);
  background: rgba(162, 118, 255, 0.15);
}

.team-asset-category-edit {
  width: 0;
  height: 24px;
  display: grid;
  place-items: center;
  padding: 0;
  margin: 0;
  opacity: 0;
  color: currentColor;
  background: transparent;
  overflow: hidden;
  transition: width 0.18s ease, opacity 0.18s ease, margin 0.18s ease;
}

.team-asset-category-tab:hover .team-asset-category-edit,
.team-asset-category-edit:focus-visible {
  width: 24px;
  margin-right: 5px;
  opacity: 1;
}

.team-asset-category-edit svg,
.team-asset-category-add svg {
  width: 14px;
  height: 14px;
}

.team-asset-category-add {
  flex: 0 0 auto;
  height: 34px;
  min-width: 106px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 12px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 9px;
  color: #c8d2e0;
  background: rgba(255, 255, 255, 0.025);
}

.team-asset-category-add:hover {
  border-color: rgba(162, 118, 255, 0.48);
  background: rgba(162, 118, 255, 0.12);
}

.team-asset-grid-section {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-auto-rows: max-content;
  align-content: start;
  gap: 22px;
  overflow-y: auto;
  padding: 18px;
}

.team-asset-card {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  min-width: 0;
  display: block;
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(162, 118, 255, 0.19);
  border-radius: 16px;
  background: #0b1422;
  box-shadow: 0 18px 42px rgba(2, 6, 23, 0.22);
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.team-asset-card:hover {
  transform: translateY(-4px);
  border-color: rgba(162, 118, 255, 0.46);
  box-shadow: 0 18px 38px rgba(2, 6, 23, 0.34);
}

.team-asset-preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 0;
  background: #0a1220;
}

.team-asset-preview::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(2, 6, 17, 0.08) 35%, rgba(2, 6, 17, 0.86) 100%);
}

.team-asset-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.24s ease;
}

.team-asset-card:hover .team-asset-preview img {
  transform: scale(1.025);
}

.team-asset-card-meta {
  position: absolute;
  z-index: 2;
  inset: auto 0 0;
  padding: 42px 16px 14px;
  pointer-events: none;
}

.team-asset-card-meta h3 {
  margin: 0;
  overflow: hidden;
  color: #f4f7fb;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-asset-card-tools {
  position: absolute;
  z-index: 4;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(226, 232, 240, 0.16);
  border-radius: 999px;
  opacity: 0;
  background: rgba(8, 15, 28, 0.82);
  backdrop-filter: blur(10px);
  transform: translateX(4px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.team-asset-card:hover .team-asset-card-tools,
.team-asset-card-tools:focus-within {
  opacity: 1;
  transform: translateX(0);
}

.team-asset-card-tools button {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  color: #d8e1ed;
  background: transparent;
}

.team-asset-card-tools button:hover {
  color: #ffffff;
  border-color: rgba(162, 118, 255, 0.46);
  background: rgba(162, 118, 255, 0.2);
}

.team-asset-card-tools button.danger {
  color: #f28585;
}

.team-asset-card-tools button.danger:hover {
  border-color: rgba(248, 113, 113, 0.45);
  background: rgba(248, 113, 113, 0.2);
}

.team-asset-card-tools svg {
  width: 15px;
  height: 15px;
}

.team-asset-add-card {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  color: #dbe4f0;
  background: #0a1322;
}

.team-asset-add-card > span {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(162, 118, 255, 0.42);
  border-radius: 50%;
  color: #c9aeff;
  background: rgba(162, 118, 255, 0.1);
}

.team-asset-add-card > span svg {
  width: 28px;
  height: 28px;
}

.team-asset-add-card strong {
  font-size: 15px;
  font-weight: 600;
}

.team-asset-skeleton {
  background: linear-gradient(90deg, #111b2a, #1b293d, #111b2a);
  background-size: 240% 100%;
  animation: teamAssetLoading 1.4s linear infinite;
}

.team-asset-page-state {
  grid-column: 1 / -1;
  min-height: 220px;
  display: grid;
  place-items: center;
  color: #7f8ca0;
  text-align: center;
}

.team-asset-pagination {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 18px;
  border-top: 1px solid rgba(162, 118, 255, 0.18);
  background: rgba(11, 17, 31, 0.94);
  color: #8290a3;
}

.team-asset-search {
  width: min(360px, 38vw);
  min-width: 260px;
  min-height: 38px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 28px auto;
  align-items: center;
  gap: 8px;
  padding: 0 4px 0 12px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.62);
}

.team-asset-search > span,
.team-asset-search > span svg {
  width: 16px;
  height: 16px;
}

.team-asset-search input {
  min-width: 0;
  height: 36px;
  border: 0;
  outline: 0;
  color: #dce5f1;
  background: transparent;
}

.team-asset-search button,
.team-asset-pagination nav button {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 8px;
  color: #cbd5e1;
  background: rgba(15, 23, 42, 0.72);
}

.team-asset-search button:first-of-type {
  width: 28px;
  min-height: 28px;
  padding: 0;
  border-color: transparent;
  border-radius: 50%;
  background: transparent;
}

.team-asset-search button svg {
  width: 14px;
  height: 14px;
}

.team-asset-pagination nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.team-asset-pagination nav button.active,
.team-asset-pagination nav button:hover:not(:disabled) {
  border-color: rgba(162, 118, 255, 0.44);
  background: rgba(162, 118, 255, 0.16);
}

.team-asset-modal-overlay,
.team-asset-drawer-scrim {
  position: fixed;
  inset: 0;
  z-index: 2200;
  background: rgba(2, 6, 23, 0.64);
  backdrop-filter: blur(8px);
}

.team-asset-modal-overlay {
  display: grid;
  place-items: center;
  padding: 24px;
}

.team-asset-small-modal,
.team-asset-upload-modal {
  width: min(460px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  display: grid;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 14px;
  color: #e7edf5;
  background: #07101d;
  box-shadow: 0 26px 64px rgba(2, 6, 23, 0.48);
}

.team-asset-upload-modal {
  width: min(820px, calc(100vw - 32px));
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.team-asset-small-modal > header,
.team-asset-small-modal > footer,
.team-asset-upload-modal > header,
.team-asset-upload-modal > footer {
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 18px;
  background: #0b1422;
}

.team-asset-small-modal > header,
.team-asset-upload-modal > header {
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}

.team-asset-small-modal > footer,
.team-asset-upload-modal > footer {
  justify-content: flex-end;
  min-height: 60px;
  border-top: 1px solid rgba(148, 163, 184, 0.18);
}

.team-asset-small-modal h3,
.team-asset-upload-modal h3 {
  margin: 0;
  font-size: 17px;
  letter-spacing: 0;
}

.team-asset-upload-modal header small {
  display: block;
  margin-bottom: 3px;
  color: #a991d8;
  font-size: 10px;
}

.team-asset-small-modal header > button,
.team-asset-upload-modal header > button {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 8px;
  color: #9aa8ba;
  background: transparent;
}

.team-asset-small-modal header svg,
.team-asset-upload-modal header svg {
  width: 16px;
  height: 16px;
}

.team-asset-small-modal > label {
  display: grid;
  gap: 7px;
  padding: 14px 18px 0;
  color: #9aa8ba;
  font-size: 13px;
}

.team-asset-small-modal input,
.team-asset-small-modal select,
.team-asset-upload-list input {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 8px;
  outline: 0;
  color: #e7edf5;
  background: #0b1422;
}

.team-asset-small-modal > p {
  margin: 0;
  padding: 24px 18px;
  color: #b9c4d2;
  line-height: 1.7;
}

.team-asset-small-modal footer button,
.team-asset-upload-modal footer button {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 8px;
  color: #dce5f1;
  background: transparent;
}

.team-asset-small-modal footer button.primary,
.team-asset-upload-modal footer button.primary {
  border-color: rgba(162, 118, 255, 0.54);
  background: #7c5bd4;
}

.team-asset-small-modal footer button.danger {
  border-color: rgba(248, 113, 113, 0.42);
  color: #ffffff;
  background: #b94652;
}

.team-asset-upload-body {
  min-height: 0;
  overflow-y: auto;
  padding: 18px;
}

.team-asset-upload-drop {
  width: 100%;
  min-height: 150px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 9px;
  border: 1px dashed rgba(162, 118, 255, 0.42);
  border-radius: 8px;
  color: #d7e0ec;
  background: rgba(162, 118, 255, 0.06);
}

.team-asset-upload-drop.dragging,
.team-asset-upload-drop:hover {
  border-color: #a276ff;
  background: rgba(162, 118, 255, 0.13);
}

.team-asset-upload-drop svg {
  width: 28px;
  height: 28px;
  color: #bea1f8;
}

.team-asset-upload-drop span {
  color: #8290a3;
  font-size: 12px;
}

.team-asset-upload-list {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.team-asset-upload-list article {
  position: relative;
  min-height: 74px;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 32px;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  background: #0b1422;
}

.team-asset-upload-list article > img {
  width: 58px;
  height: 58px;
  object-fit: cover;
  border-radius: 6px;
}

.team-asset-upload-list article > div {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.team-asset-upload-list input {
  min-height: 30px;
  padding: 4px 8px;
}

.team-asset-upload-list small,
.team-asset-upload-list em {
  overflow: hidden;
  color: #8290a3;
  font-size: 11px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-asset-upload-list em {
  color: #f28b8b;
}

.team-asset-upload-list article > div > span {
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.16);
}

.team-asset-upload-list article > div > span i {
  display: block;
  height: 100%;
  background: #8c6de3;
}

.team-asset-upload-remove {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  opacity: 0;
  color: #f28585;
  background: rgba(248, 113, 113, 0.1);
}

.team-asset-upload-list article:hover .team-asset-upload-remove,
.team-asset-upload-remove:focus-visible {
  opacity: 1;
}

.team-asset-upload-remove svg {
  width: 14px;
  height: 14px;
}

.team-asset-drawer-scrim {
  z-index: 2290;
  backdrop-filter: blur(2px);
}

.team-asset-detail-drawer {
  position: fixed;
  z-index: 2300;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(520px, 100vw);
  min-width: 360px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-left: 1px solid rgba(71, 85, 105, 0.36);
  color: #d5deeb;
  background: #090f1a;
  box-shadow: -24px 0 46px rgba(2, 6, 23, 0.36);
}

.team-asset-detail-drawer > header {
  flex: 0 0 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(71, 85, 105, 0.28);
  background: #101725;
}

.team-asset-detail-drawer > header strong {
  min-width: 0;
  overflow: hidden;
  font-size: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-asset-detail-drawer > header button {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(71, 85, 105, 0.34);
  border-radius: 8px;
  color: #a7b5c8;
  background: #0b111d;
}

.team-asset-detail-drawer > header svg {
  width: 16px;
  height: 16px;
}

.team-asset-detail-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 18px;
}

.team-asset-detail-body > img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  display: block;
  border: 1px solid rgba(71, 85, 105, 0.3);
  border-radius: 8px;
  background: #0b111d;
}

.team-asset-detail-body > section {
  margin-top: 18px;
}

.team-asset-detail-heading {
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.team-asset-detail-heading h4 {
  margin: 0;
  font-size: 15px;
}

.team-asset-detail-heading span {
  color: #8290a3;
  font-size: 12px;
}

.team-asset-vendor-record {
  min-height: 58px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
  border: 1px solid rgba(71, 85, 105, 0.3);
  border-radius: 8px;
  background: #0b111d;
}

.team-asset-vendor-dot {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 50%;
  color: #94a3b8;
}

.team-asset-vendor-record.status-active .team-asset-vendor-dot {
  color: #33c978;
  border-color: rgba(51, 201, 120, 0.42);
  background: rgba(51, 201, 120, 0.12);
}

.team-asset-vendor-dot svg {
  width: 14px;
  height: 14px;
}

.team-asset-vendor-dot i {
  width: 13px;
  height: 13px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: teamAssetSpin 0.8s linear infinite;
}

.team-asset-vendor-record > div {
  min-width: 0;
}

.team-asset-vendor-record > div strong,
.team-asset-vendor-record > div span,
.team-asset-vendor-record > div em {
  display: block;
  overflow: hidden;
  font-size: 12px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-asset-vendor-record > div strong {
  color: #dce5f1;
  font-size: 13px;
}

.team-asset-vendor-record > div span {
  color: #8290a3;
}

.team-asset-vendor-record > div em {
  color: #ef8686;
}

.team-asset-vendor-record > button {
  min-width: 58px;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 1px solid rgba(162, 118, 255, 0.36);
  border-radius: 8px;
  color: #ceb7ff;
  background: rgba(162, 118, 255, 0.12);
}

.team-asset-detail-empty {
  min-height: 76px;
  display: grid;
  place-items: center;
  border: 1px dashed rgba(71, 85, 105, 0.34);
  border-radius: 8px;
  color: #8290a3;
}

body[data-theme="light"] .team-assets-page {
  color: #1e293b;
  background: #f4f7fb;
}

body[data-theme="light"] .team-assets-page > .topbar,
body[data-theme="light"] .team-asset-category-section,
body[data-theme="light"] .team-asset-pagination {
  border-color: rgba(148, 163, 184, 0.26);
  background: rgba(255, 255, 255, 0.9);
}

body[data-theme="light"] .team-assets-page .brand,
body[data-theme="light"] .team-assets-page .theme-toggle,
body[data-theme="light"] .team-assets-page .icon-btn {
  color: #1e293b;
}

body[data-theme="light"] .team-assets-page .theme-toggle,
body[data-theme="light"] .team-assets-page .icon-btn {
  border-color: rgba(51, 65, 85, 0.14);
  background: rgba(248, 250, 252, 0.92);
}

body[data-theme="light"] .team-assets-workspace {
  background: #f6f9fd;
  box-shadow: none;
}

body[data-theme="light"] .team-asset-category-tab,
body[data-theme="light"] .team-asset-category-add {
  color: #64748b;
  border-color: rgba(51, 65, 85, 0.14);
  background: rgba(255, 255, 255, 0.82);
}

body[data-theme="light"] .team-asset-category-tab.active,
body[data-theme="light"] .team-asset-category-tab:hover,
body[data-theme="light"] .team-asset-category-add:hover {
  color: #1e293b;
  border-color: rgba(79, 70, 229, 0.34);
  background: rgba(238, 242, 255, 0.88);
}

body[data-theme="light"] .team-asset-card {
  border-color: rgba(148, 163, 184, 0.24);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 14px 34px rgba(45, 64, 96, 0.1);
}

body[data-theme="light"] .team-asset-add-card {
  color: #1e293b;
  background: rgba(255, 255, 255, 0.92);
}

body[data-theme="light"] .team-asset-search {
  border-color: rgba(51, 65, 85, 0.14);
  background: rgba(255, 255, 255, 0.86);
}

body[data-theme="light"] .team-asset-search input,
body[data-theme="light"] .team-asset-search button,
body[data-theme="light"] .team-asset-pagination nav button {
  color: #334155;
}

body[data-theme="light"] .team-asset-search button,
body[data-theme="light"] .team-asset-pagination nav button {
  border-color: rgba(51, 65, 85, 0.14);
  background: rgba(255, 255, 255, 0.86);
}

body[data-theme="light"] .team-asset-small-modal,
body[data-theme="light"] .team-asset-upload-modal {
  color: #0f172a;
  background: #ffffff;
}

body[data-theme="light"] .team-asset-small-modal > header,
body[data-theme="light"] .team-asset-small-modal > footer,
body[data-theme="light"] .team-asset-upload-modal > header,
body[data-theme="light"] .team-asset-upload-modal > footer,
body[data-theme="light"] .team-asset-upload-list article {
  color: #0f172a;
  background: #f8fafc;
}

body[data-theme="light"] .team-asset-small-modal input,
body[data-theme="light"] .team-asset-small-modal select,
body[data-theme="light"] .team-asset-upload-list input {
  color: #0f172a;
  background: #ffffff;
}

@keyframes teamAssetLoading {
  to { background-position: -240% 0; }
}

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

@media (max-width: 720px) {
  .team-assets-layout {
    grid-template-columns: 88px minmax(0, 1fr);
  }

  .team-asset-side-nav {
    width: 88px;
  }

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

  .team-asset-pagination {
    align-items: stretch;
    flex-direction: column;
  }

  .team-asset-search {
    width: 100%;
    min-width: 0;
  }

  .team-asset-pagination nav {
    justify-content: center;
    flex-wrap: wrap;
  }

  .team-asset-detail-drawer {
    width: 100vw;
    min-width: 0;
  }
}

.toolbox-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 18px;
}

.toolbox-layout aside,
.toolbox-layout section {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(11, 17, 32, 0.82);
}

.toolbox-layout aside {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 12px;
}

.toolbox-layout aside button {
  min-height: 44px;
  border-radius: 8px;
  color: #aeb8cb;
  background: transparent;
}

.toolbox-layout aside button.active {
  color: #ffffff;
  background: rgba(154, 107, 255, 0.2);
}

.toolbox-layout section {
  min-height: calc(100vh - 136px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: 20px;
}

.toolbox-layout h1 {
  margin: 6px 0 0;
}

.toolbox-layout header p {
  margin: 8px 0 0;
  color: var(--muted);
}

.chat-list {
  align-content: start;
  display: grid;
  gap: 12px;
  overflow: auto;
  padding: 18px 0;
}

.chat-list article {
  width: min(760px, 92%);
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: #dce5f6;
  background: rgba(255, 255, 255, 0.05);
  line-height: 1.7;
}

.chat-list article.user {
  justify-self: end;
  border-color: rgba(154, 107, 255, 0.38);
  background: rgba(154, 107, 255, 0.16);
}

.chat-list article.assistant {
  justify-self: start;
}

.toolbox-layout footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px;
  gap: 10px;
}

.toolbox-layout textarea {
  min-height: 74px;
  resize: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
}

.toolbox-layout footer button {
  border-radius: 8px;
  color: #ffffff;
  background: var(--purple);
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(2, 6, 23, 0.72);
  backdrop-filter: blur(8px);
}

.modal {
  width: min(560px, 100%);
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: #0d1425;
  box-shadow: var(--shadow);
}

.modal header,
.modal footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}

.modal footer {
  justify-content: flex-end;
  border-top: 1px solid var(--line);
  border-bottom: 0;
}

.modal h2 {
  margin: 0;
}

.modal header button,
.modal footer button {
  min-height: 36px;
  padding: 0 14px;
  border-radius: 8px;
  color: #dce5f6;
  background: rgba(255, 255, 255, 0.06);
}

.modal-body {
  display: grid;
  gap: 14px;
  padding: 18px;
  color: #cbd5e1;
}

.modal-theater-next {
  width: min(760px, 100%);
}

.modal-customRule {
  width: min(440px, 100%);
}

.modal-assetExtract {
  width: min(920px, 100%);
}

.modal-assetImport {
  width: min(960px, 100%);
  max-height: calc(100vh - 48px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.modal-assetImport .modal-body {
  min-height: 0;
  overflow: hidden;
}

.modal-assetImport footer {
  min-height: 70px;
  padding: 14px 18px 16px;
  border-top-color: rgba(148, 163, 184, 0.12);
  background: rgba(6, 10, 21, 0.8);
}

.modal-assetImport footer button {
  min-width: 112px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.asset-import-panel {
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 14px;
  padding: 18px;
}

.asset-import-drop {
  position: relative;
  min-height: 148px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  padding: 18px;
  border: 1px dashed rgba(77, 208, 225, 0.32);
  border-radius: 8px;
  color: #d8e2f0;
  background: rgba(35, 49, 69, 0.34);
  text-align: center;
  transition: border-color 0.16s ease, background 0.16s ease;
}

.asset-import-drop.dragging {
  border-color: rgba(77, 208, 225, 0.78);
  background: rgba(31, 129, 145, 0.16);
}

.asset-import-native {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  opacity: 0;
}

.asset-import-picker {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  border: 1px solid rgba(77, 208, 225, 0.3);
  border-radius: 8px;
  color: #e7fbff;
  background: rgba(26, 116, 132, 0.2);
}

.asset-import-picker svg {
  width: 16px;
  height: 16px;
}

.asset-import-drop p,
.asset-import-drop small {
  margin: 0;
  max-width: 760px;
  color: #8292a8;
  font-size: 12px;
  line-height: 1.5;
}

.asset-import-list-head {
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.asset-import-list-head button {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 6px;
  color: #aeb9c9;
  background: rgba(255, 255, 255, 0.035);
}

.asset-import-list,
.asset-import-empty {
  min-height: 0;
  overflow: auto;
}

.asset-import-list {
  display: grid;
  align-content: start;
  gap: 8px;
  padding-right: 4px;
}

.asset-import-empty {
  min-height: 90px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 8px;
  color: #718096;
  background: rgba(255, 255, 255, 0.02);
}

.asset-import-item {
  position: relative;
  min-height: 116px;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 30px;
  align-items: center;
  gap: 14px;
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
}

.asset-import-item.is-failed {
  border-color: rgba(248, 113, 113, 0.3);
}

.asset-import-preview {
  width: 96px;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 6px;
  background: #070b13;
}

.asset-import-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.asset-import-fields {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.asset-import-fields > strong {
  overflow: hidden;
  color: #dce5f1;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.asset-import-fields > small {
  color: #718096;
}

.asset-import-name-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}

.asset-import-name-row input {
  min-width: 0;
  height: 34px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 6px;
  padding: 0 10px;
  color: #dce5f1;
  background: rgba(10, 16, 28, 0.9);
}

.asset-import-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #8fa0b6;
  font-size: 11px;
}

.asset-import-status b {
  color: #4dd0e1;
}

.asset-import-progress {
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.12);
}

.asset-import-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #4dd0e1;
  transition: width 0.18s ease;
}

.asset-import-fields em {
  color: #fda4af;
  font-size: 11px;
  font-style: normal;
}

.asset-import-remove {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(248, 113, 113, 0.2);
  border-radius: 50%;
  color: rgba(248, 113, 113, 0.82);
  background: rgba(80, 12, 28, 0.16);
  opacity: 0;
  transition: opacity 0.15s ease, background 0.15s ease;
}

.asset-import-item:hover .asset-import-remove,
.asset-import-remove:focus-visible {
  opacity: 1;
}

.asset-import-remove svg {
  width: 14px;
  height: 14px;
}

.modal-theater-next .modal-body {
  padding: 0;
  gap: 0;
}

.modal-theater-next footer {
  background: rgba(255, 255, 255, 0.018);
}

.modal-assetExtract footer {
  min-height: 70px;
  padding: 14px 18px 16px;
  border-top-color: rgba(148, 163, 184, 0.12);
  background: rgba(6, 10, 21, 0.74);
}

.modal-assetExtract footer button {
  min-width: 108px;
  min-height: 38px;
  justify-content: center;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
}

.modal-assetExtract footer .modal-primary-btn {
  min-width: 132px;
  border: 1px solid rgba(162, 118, 255, 0.68);
  color: #ffffff;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.16), transparent 54%),
    linear-gradient(135deg, #8f5cff, #6846db);
  box-shadow: 0 12px 26px rgba(104, 70, 219, 0.24);
}

.workflow-prompt-backdrop {
  padding: 42px;
  background: rgba(3, 7, 18, 0.78);
  backdrop-filter: blur(10px);
}

.workflow-prompt-modal {
  width: min(1120px, calc(100vw - 48px));
  height: min(668px, calc(100vh - 96px));
  display: grid;
  grid-template-rows: 96px minmax(0, 1fr);
  border: 1px solid rgba(119, 132, 158, 0.2);
  border-radius: 17px;
  color: #e9eef8;
  background: #151922;
  box-shadow:
    0 32px 90px rgba(0, 0, 0, 0.54),
    inset 0 1px rgba(255, 255, 255, 0.035);
}

.workflow-prompt-modal .workflow-prompt-header {
  min-height: 96px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 27px 21px;
  border-bottom: 1px solid rgba(119, 132, 158, 0.13);
  background: #171b24;
}

.workflow-prompt-header span {
  display: block;
}

.workflow-prompt-header > div:first-child > span {
  color: #a66eff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.22em;
}

.workflow-prompt-header h2 {
  margin: 6px 0 0;
  color: #f1f4fa;
  font-size: 25px;
  font-weight: 900;
  letter-spacing: 0;
}

.workflow-prompt-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.workflow-segment {
  height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid rgba(102, 116, 143, 0.22);
  border-radius: 9px;
  background: rgba(7, 11, 20, 0.5);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.025);
}

.workflow-prompt-modal .workflow-segment button {
  min-width: 46px;
  min-height: 0;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 7px;
  padding: 0 11px;
  color: rgba(174, 184, 203, 0.82);
  background: transparent;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  box-shadow: none;
  transition: color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.workflow-prompt-modal .workflow-font-size button {
  min-width: 30px;
  padding: 0 8px;
}

.workflow-prompt-modal .workflow-segment button:hover {
  color: #f1f5fb;
  background: rgba(255, 255, 255, 0.065);
}

.workflow-prompt-modal .workflow-segment button.active {
  color: #ffffff;
  background: rgba(125, 91, 210, 0.34);
  box-shadow:
    inset 0 0 0 1px rgba(184, 152, 255, 0.18),
    0 4px 12px rgba(59, 38, 111, 0.2);
}

.workflow-prompt-modal .workflow-prompt-close {
  width: 32px;
  min-height: 0;
  height: 32px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 9px;
  color: rgba(190, 199, 216, 0.9);
  background: transparent;
}

.workflow-prompt-close svg {
  width: 20px;
  height: 20px;
}

.workflow-prompt-modal .workflow-prompt-close:hover {
  color: #ffffff;
  border-color: rgba(119, 132, 158, 0.18);
  background: rgba(255, 255, 255, 0.065);
}

.asset-skill-panel {
  min-height: 0;
  padding: 22px 26px 23px;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 16px;
  overflow: hidden;
  background: #10141d;
}

.asset-skill-sidebar,
.asset-skill-editor {
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(119, 132, 158, 0.18);
  border-radius: 13px;
  background: #0d111b;
}

.asset-skill-sidebar {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
}

.asset-skill-list {
  position: relative;
  padding: 58px 8px 12px;
  overflow: auto;
  scrollbar-width: none;
}

.asset-skill-list::-webkit-scrollbar {
  display: none;
}

.storyboard-prompt-list-state {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 4px 8px;
  padding: 8px 10px;
  border: 1px dashed rgba(119, 132, 158, 0.18);
  border-radius: 9px;
  color: rgba(190, 199, 216, 0.72);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.storyboard-prompt-list-state.is-error {
  color: rgba(248, 113, 113, 0.88);
  border-color: rgba(248, 113, 113, 0.24);
  background: rgba(127, 29, 29, 0.1);
}

.asset-skill-add {
  position: absolute;
  top: 13px;
  right: 10px;
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(150, 97, 255, 0.28);
  border-radius: 7px;
  color: #b38aff;
  background: rgba(130, 80, 230, 0.11);
  font-size: 22px;
  line-height: 1;
  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.asset-skill-add:hover {
  border-color: rgba(185, 139, 255, 0.52);
  color: #eadfff;
  background: rgba(130, 80, 230, 0.2);
  transform: translateY(-1px);
}

.asset-skill-row {
  width: 100%;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 0 42px 0 12px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: #f2f3f8;
  background: transparent;
  text-align: left;
  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}

.asset-skill-row.builtin {
  padding-right: 12px;
}

.asset-skill-row:hover {
  background: rgba(255, 255, 255, 0.045);
}

.asset-skill-row.active {
  border-color: rgba(155, 104, 255, 0.58);
  background:
    linear-gradient(90deg, rgba(125, 71, 236, 0.34), rgba(103, 75, 181, 0.22)),
    #2a2144;
  box-shadow:
    inset 3px 0 rgba(180, 100, 255, 0.9),
    0 0 0 1px rgba(189, 151, 255, 0.12);
}

.asset-skill-row span {
  flex: 0 0 auto;
  height: 23px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  border-radius: 999px;
  color: #dfe8ff;
  background: rgba(63, 92, 141, 0.66);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.asset-skill-row.custom span {
  color: #efe8ff;
  background: rgba(126, 87, 224, 0.58);
}

.asset-skill-row.builtin span {
  color: #e9ddff;
  background: rgba(125, 87, 224, 0.5);
}

.asset-skill-row strong {
  min-height: 23px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  color: #f1f3fa;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.asset-skill-list > .asset-skill-row,
.asset-skill-entry {
  margin-bottom: 6px;
}

.asset-skill-entry {
  position: relative;
}

.asset-skill-delete {
  position: absolute;
  top: 50%;
  right: 8px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  transform: translateY(-50%);
  border: 1px solid rgba(119, 132, 158, 0.16);
  border-radius: 50%;
  padding: 0;
  color: rgba(190, 199, 216, 0.68);
  background: rgba(8, 12, 21, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease, color 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.asset-skill-delete svg {
  width: 13px;
  height: 13px;
}

.asset-skill-entry:hover .asset-skill-delete,
.asset-skill-delete:focus-visible {
  opacity: 1;
  pointer-events: auto;
}

.asset-skill-delete:hover {
  color: #ffffff;
  border-color: rgba(248, 113, 113, 0.42);
  background: rgba(127, 29, 29, 0.34);
}

.asset-skill-model {
  position: relative;
  display: grid;
  gap: 8px;
  padding: 12px 10px 11px;
  border-top: 1px solid rgba(119, 132, 158, 0.13);
}

.asset-skill-model > span {
  color: #d2d8e5;
  font-size: 13px;
  font-weight: 900;
}

.asset-skill-model > button {
  position: relative;
  width: 100%;
  height: 37px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 34px;
  border: 1px solid rgba(119, 132, 158, 0.17);
  border-radius: 8px;
  color: #f4f7ff;
  background: #101522;
  text-align: center;
  font-size: 13px;
  font-weight: 900;
  transition: border-color 0.16s ease, background 0.16s ease;
}

.asset-skill-model.open > button,
.asset-skill-model > button:hover {
  border-color: rgba(162, 118, 255, 0.34);
  background: #141b2b;
}

.asset-skill-model > button::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 14px;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid rgba(196, 205, 222, 0.78);
  border-bottom: 1.5px solid rgba(196, 205, 222, 0.78);
  transform: translateY(-65%) rotate(45deg);
}

.asset-skill-model.open > button::after {
  transform: translateY(-30%) rotate(225deg);
}

.asset-skill-model-menu {
  position: absolute;
  right: 10px;
  bottom: 58px;
  left: 10px;
  z-index: 6;
  overflow: hidden;
  padding: 6px;
  border: 1px solid rgba(119, 132, 158, 0.22);
  border-radius: 10px;
  background: rgba(12, 17, 29, 0.98);
  box-shadow:
    0 18px 34px rgba(0, 0, 0, 0.42),
    inset 0 1px rgba(255, 255, 255, 0.035);
}

.asset-skill-model-menu button {
  position: relative;
  width: 100%;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 10px;
  border-radius: 8px;
  color: #b9c3d6;
  background: transparent;
  font-size: 13px;
  font-weight: 850;
  line-height: 1;
}

.asset-skill-model-menu button span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.asset-skill-model-menu button:hover,
.asset-skill-model-menu button.active {
  color: #ffffff;
  background: rgba(162, 118, 255, 0.14);
}

.asset-skill-model-menu button b {
  position: absolute;
  top: 50%;
  right: 10px;
  display: grid;
  place-items: center;
  transform: translateY(-50%);
  color: #b995ff;
  font-size: 13px;
}

.asset-skill-main {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) 48px;
  gap: 14px;
}

.asset-skill-editor {
  display: grid;
  grid-template-rows: 54px minmax(0, 1fr);
}

.asset-skill-editor header {
  display: flex;
  align-items: center;
  padding: 0 17px;
  border-bottom: 1px solid rgba(119, 132, 158, 0.12);
}

.asset-skill-editor h3 {
  margin: 0;
  color: #f3f5fb;
  font-size: 19px;
  font-weight: 900;
}

.asset-skill-name-input {
  width: min(100%, 420px);
  height: 36px;
  margin-left: -8px;
  border: 1px solid rgba(119, 132, 158, 0.14);
  border-radius: 7px;
  outline: 0;
  padding: 0 8px;
  color: #f3f5fb;
  background: rgba(255, 255, 255, 0.025);
  font-size: 19px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
  transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.asset-skill-name-input:hover,
.asset-skill-name-input:focus {
  border-color: rgba(162, 118, 255, 0.48);
  background: rgba(162, 118, 255, 0.07);
  box-shadow: 0 0 0 3px rgba(162, 118, 255, 0.08);
}

.asset-skill-prompt {
  min-height: 0;
  overflow: auto;
  padding: 18px 19px 20px;
  scrollbar-width: thin;
  scrollbar-color: rgba(91, 102, 126, 0.72) transparent;
}

.asset-skill-prompt::-webkit-scrollbar {
  width: 9px;
}

.asset-skill-prompt::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  background: rgba(91, 102, 126, 0.72);
  background-clip: content-box;
}

.asset-skill-prompt pre,
.asset-skill-prompt textarea {
  margin: 0;
  width: 100%;
  min-height: 100%;
  border: 0;
  outline: 0;
  white-space: pre-wrap;
  color: rgba(201, 208, 221, 0.82);
  background: transparent;
  font: 14px/2.05 "Microsoft YaHei", "PingFang SC", Inter, sans-serif;
  letter-spacing: 0;
}

.asset-skill-prompt textarea {
  display: block;
  height: 100%;
  resize: none;
}

.asset-skill-prompt textarea[readonly] {
  cursor: default;
}

.storyboard-prompt-error {
  margin-bottom: 14px;
  padding: 10px 12px;
  border: 1px solid rgba(248, 113, 113, 0.28);
  border-radius: 8px;
  color: #fecaca;
  background: rgba(127, 29, 29, 0.18);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.6;
}

.workflow-prompt-modal.prompt-size-medium .asset-skill-prompt textarea {
  font-size: 16px;
  line-height: 1.9;
}

.workflow-prompt-modal.prompt-size-large .asset-skill-prompt textarea {
  font-size: 18px;
  line-height: 1.8;
}

.workflow-prompt-modal.theme-light {
  color: #1f2937;
  border-color: rgba(71, 85, 105, 0.2);
  background: #f8fafc;
}

.workflow-prompt-modal.theme-light .workflow-prompt-header {
  border-bottom-color: rgba(71, 85, 105, 0.14);
  background: #ffffff;
}

.workflow-prompt-modal.theme-light .workflow-prompt-header h2,
.workflow-prompt-modal.theme-light .asset-skill-editor h3,
.workflow-prompt-modal.theme-light .asset-skill-row strong,
.workflow-prompt-modal.theme-light .asset-skill-model > button {
  color: #172033;
}

.workflow-prompt-modal.theme-light .workflow-segment {
  border-color: rgba(71, 85, 105, 0.18);
  background: #edf1f7;
}

.workflow-prompt-modal.theme-light .workflow-segment button {
  color: #64748b;
}

.workflow-prompt-modal.theme-light .workflow-segment button.active {
  color: #172033;
  background: #ffffff;
  box-shadow:
    inset 0 0 0 1px rgba(100, 116, 139, 0.14),
    0 2px 8px rgba(15, 23, 42, 0.1);
}

.workflow-prompt-modal.theme-light .workflow-prompt-close {
  color: #64748b;
}

.workflow-prompt-modal.theme-light .asset-skill-panel {
  background: #edf1f7;
}

.workflow-prompt-modal.theme-light .asset-skill-sidebar,
.workflow-prompt-modal.theme-light .asset-skill-editor {
  border-color: rgba(71, 85, 105, 0.18);
  background: #ffffff;
}

.workflow-prompt-modal.theme-light .asset-skill-row:hover {
  background: rgba(99, 102, 241, 0.06);
}

.workflow-prompt-modal.theme-light .asset-skill-row.active {
  background: linear-gradient(90deg, rgba(124, 58, 237, 0.17), rgba(139, 92, 246, 0.1)), #f5f3ff;
}

.workflow-prompt-modal.theme-light .asset-skill-model {
  border-top-color: rgba(71, 85, 105, 0.14);
}

.workflow-prompt-modal.theme-light .asset-skill-model > span {
  color: #475569;
}

.workflow-prompt-modal.theme-light .asset-skill-model > button {
  border-color: rgba(71, 85, 105, 0.18);
  background: #f8fafc;
}

.workflow-prompt-modal.theme-light .asset-skill-model-menu {
  border-color: rgba(71, 85, 105, 0.18);
  background: rgba(255, 255, 255, 0.98);
}

.workflow-prompt-modal.theme-light .asset-skill-model-menu button {
  color: #475569;
}

.workflow-prompt-modal.theme-light .asset-skill-prompt textarea {
  color: #334155;
}

.workflow-prompt-modal.theme-light .storyboard-prompt-list-state {
  color: #64748b;
  border-color: rgba(71, 85, 105, 0.2);
}

.workflow-prompt-modal.theme-light .storyboard-prompt-error {
  color: #991b1b;
  border-color: rgba(220, 38, 38, 0.2);
  background: rgba(254, 226, 226, 0.8);
}

.workflow-prompt-modal.theme-light .asset-skill-name-input {
  color: #172033;
  border-color: rgba(71, 85, 105, 0.16);
  background: rgba(148, 163, 184, 0.08);
}

.workflow-prompt-modal.theme-light .asset-skill-delete {
  color: #64748b;
  border-color: rgba(71, 85, 105, 0.16);
  background: rgba(255, 255, 255, 0.72);
}

.workflow-prompt-modal.theme-light .asset-skill-cancel {
  color: #334155;
  border-color: rgba(71, 85, 105, 0.18);
  background: #ffffff;
}

.workflow-prompt-modal .asset-skill-actions {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 10px;
  min-height: 48px;
  padding: 8px 2px 0 0;
  border: 0;
  background: transparent;
}

.workflow-prompt-modal .asset-skill-actions button {
  min-width: 64px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.asset-skill-cancel {
  border: 1px solid rgba(119, 132, 158, 0.18);
  color: #eef2f8;
  background: rgba(16, 22, 35, 0.92);
}

.asset-skill-cancel:hover {
  border-color: rgba(168, 181, 204, 0.34);
  background: rgba(26, 34, 51, 0.96);
  transform: translateY(-1px);
}

.asset-skill-confirm {
  border: 1px solid rgba(143, 94, 255, 0.54);
  color: #ffffff;
  background: linear-gradient(180deg, #9b70ff, #7d54ed);
  box-shadow:
    0 9px 22px rgba(114, 74, 220, 0.34),
    inset 0 1px rgba(255, 255, 255, 0.22);
}

.asset-skill-confirm:hover {
  border-color: rgba(189, 154, 255, 0.7);
  background: linear-gradient(180deg, #a77dff, #855cf3);
  box-shadow:
    0 12px 26px rgba(114, 74, 220, 0.44),
    0 0 0 1px rgba(189, 154, 255, 0.12),
    inset 0 1px rgba(255, 255, 255, 0.26);
  transform: translateY(-1px);
}

@media (max-width: 860px) {
  .workflow-prompt-backdrop {
    padding: 18px;
  }

  .workflow-prompt-modal {
    width: min(100%, 1040px);
    height: min(760px, calc(100vh - 36px));
  }

  .asset-skill-panel {
    grid-template-columns: 1fr;
    grid-template-rows: 210px minmax(0, 1fr);
  }
}

.modal-batchFinalize footer {
  min-height: 72px;
  padding: 14px 18px 16px;
  border-top-color: rgba(148, 163, 184, 0.14);
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.78), rgba(9, 14, 29, 0.94)),
    rgba(255, 255, 255, 0.018);
}

.modal-batchFinalize footer button {
  min-width: 112px;
  min-height: 40px;
  justify-content: center;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0;
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease, color 0.16s ease;
}

.modal-batchFinalize footer .modal-cancel-btn {
  border: 1px solid rgba(148, 163, 184, 0.18);
  color: rgba(203, 213, 225, 0.78);
  background: rgba(255, 255, 255, 0.035);
}

.modal-batchFinalize footer .modal-cancel-btn:hover {
  border-color: rgba(203, 213, 225, 0.34);
  color: #f8fbff;
  background: rgba(255, 255, 255, 0.07);
}

.modal-batchFinalize footer .modal-primary-btn {
  min-width: 156px;
  border: 1px solid rgba(162, 118, 255, 0.72);
  color: #ffffff;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.18), transparent 52%),
    linear-gradient(135deg, #8f5cff, #6846db);
  box-shadow: 0 14px 30px rgba(104, 70, 219, 0.28);
}

.modal-batchFinalize footer .modal-primary-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(190, 164, 255, 0.9);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.22), transparent 52%),
    linear-gradient(135deg, #9b6cff, #7152ee);
  box-shadow: 0 18px 34px rgba(104, 70, 219, 0.36);
}

.modal-batchFinalize footer .modal-primary-btn:active {
  transform: translateY(0);
}

.modal-batchFinalize footer .modal-primary-btn:disabled {
  transform: none;
  border-color: rgba(148, 163, 184, 0.18);
  color: rgba(203, 213, 225, 0.42);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: none;
}

.modal .theater-next-confirm-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  color: #94a3b8;
}

.modal .theater-next-confirm-tools span {
  margin-left: auto;
  font-size: 13px;
  font-weight: 700;
}

.modal .theater-next-confirm-list {
  max-height: min(430px, 52vh);
  overflow: auto;
  display: grid;
  gap: 8px;
  padding: 12px 14px 16px;
}

.modal .theater-next-confirm-row {
  display: grid;
  grid-template-columns: 22px 74px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  border: 1px solid rgba(148, 163, 184, 0.11);
  border-radius: 10px;
  padding: 10px 12px;
  color: #94a3b8;
  background: rgba(255, 255, 255, 0.035);
}

.modal .theater-next-confirm-row.is-selected {
  border-color: rgba(162, 118, 255, 0.38);
  background: rgba(162, 118, 255, 0.085);
}

.modal .theater-next-confirm-row:not(.is-selected) .theater-next-confirm-check {
  border-color: rgba(148, 163, 184, 0.28);
  background: rgba(255, 255, 255, 0.025);
}

.modal .theater-next-confirm-native-check {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.modal .theater-next-confirm-check {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(162, 118, 255, 0.54);
  border-radius: 5px;
  color: #ffffff;
  background: rgba(162, 118, 255, 0.72);
  font-size: 12px;
  font-weight: 800;
}

.modal .theater-next-confirm-row strong {
  min-width: 0;
  overflow: hidden;
  color: #d8e1ee;
  font-size: 13px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.modal .theater-next-confirm-row small {
  margin-left: 6px;
  border: 1px solid rgba(162, 118, 255, 0.24);
  border-radius: 999px;
  padding: 2px 7px;
  color: #bea6ff;
  background: rgba(162, 118, 255, 0.12);
  font-size: 11px;
}

.modal .theater-next-confirm-row em {
  color: #7a8b9e;
  font-size: 12px;
  font-style: normal;
}

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

.theater-work-overlay {
  position: fixed;
  inset: 0;
  z-index: 330;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(2, 6, 15, 0.82);
  backdrop-filter: blur(10px);
}

.theater-work-panel {
  width: min(520px, calc(100vw - 48px));
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  border: 1px solid rgba(162, 118, 255, 0.34);
  border-radius: 12px;
  padding: 26px;
  color: #e7edf5;
  background: #0d1424;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.46), inset 0 1px rgba(255, 255, 255, 0.04);
}

.theater-work-panel.is-failed,
.theater-work-panel.is-cancelled {
  border-color: rgba(248, 113, 113, 0.34);
}

.theater-work-symbol {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(162, 118, 255, 0.28);
  border-radius: 50%;
  color: #bca7ff;
  background: rgba(162, 118, 255, 0.08);
}

.theater-work-symbol > svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.theater-work-spinner {
  width: 26px;
  height: 26px;
  border: 2px solid rgba(188, 167, 255, 0.24);
  border-top-color: #bca7ff;
  border-radius: 50%;
  animation: theater-work-spin 0.78s linear infinite;
}

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

.theater-work-copy {
  min-width: 0;
}

.theater-work-copy small {
  color: #8e79dd;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0;
}

.theater-work-copy h2 {
  margin: 5px 0 7px;
  font-size: 20px;
  line-height: 1.25;
}

.theater-work-copy p {
  margin: 0;
  color: rgba(170, 180, 196, 0.8);
  font-size: 13px;
  line-height: 1.55;
}

.theater-work-panel > strong {
  min-width: 42px;
  color: #d8d0ff;
  font-size: 14px;
  text-align: right;
}

.theater-work-progress {
  grid-column: 1 / -1;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.12);
}

.theater-work-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #8f67ef;
  transition: width 0.25s ease;
}

.theater-work-panel footer {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.theater-work-panel footer:empty {
  display: none;
}

.theater-work-panel footer button {
  min-width: 96px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  color: rgba(226, 232, 240, 0.82);
  background: rgba(255, 255, 255, 0.035);
  font-size: 13px;
  font-weight: 800;
}

.theater-work-panel footer button.primary {
  border-color: rgba(162, 118, 255, 0.54);
  color: white;
  background: #7650d8;
}

.modal .theater-next-add-body {
  display: grid;
  gap: 18px;
  padding: 22px 20px 16px;
}

.modal .theater-next-custom-field {
  display: grid;
  gap: 8px;
  color: #cbd5e1;
  font-size: 13px;
  font-weight: 700;
}

.modal .theater-next-custom-field input {
  width: 100%;
  min-width: 0;
  min-height: 43px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 8px;
  padding: 0 12px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.045);
  font-size: 14px;
  outline: none;
}

.modal .theater-next-custom-field input:focus {
  border-color: rgba(162, 118, 255, 0.52);
  box-shadow: 0 0 0 3px rgba(162, 118, 255, 0.1);
}

.modal .theater-next-rule-select {
  position: relative;
  z-index: 8;
}

.modal .theater-next-rule-select-trigger {
  width: 100%;
  min-height: 43px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 36px 0 12px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.045);
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.modal .theater-next-rule-select-trigger::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 17px;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid rgba(203, 213, 225, 0.9);
  border-bottom: 1.5px solid rgba(203, 213, 225, 0.9);
  transform: rotate(45deg);
}

.modal .theater-next-rule-select.open .theater-next-rule-select-trigger {
  border-color: rgba(162, 118, 255, 0.52);
  box-shadow: 0 0 0 3px rgba(162, 118, 255, 0.1);
}

.modal .theater-next-rule-select.open .theater-next-rule-select-trigger::after {
  top: 20px;
  transform: rotate(225deg);
}

.modal .theater-next-rule-select-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 8px;
  display: grid;
  gap: 3px;
  padding: 6px;
  background: rgb(17, 22, 34);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.42);
}

.modal .theater-next-rule-select-menu button {
  min-height: 36px;
  border: 0;
  border-radius: 6px;
  padding: 0 10px;
  color: rgba(203, 213, 225, 0.9);
  background: transparent;
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.modal .theater-next-rule-select-menu button:hover,
.modal .theater-next-rule-select-menu button.active {
  color: #ffffff;
  background: rgba(162, 118, 255, 0.18);
}

.modal .theater-next-pattern-builder {
  display: flex;
  align-items: center;
  gap: 8px;
}

.modal .theater-next-pattern-builder input {
  flex: 1 1 0;
}

.modal .theater-next-pattern-builder.is-exact input {
  flex-basis: 100%;
}

.modal .theater-next-custom-field b {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #bea6ff;
  background: rgba(162, 118, 255, 0.12);
}

.modal .theater-next-custom-preview {
  margin: -2px 0 0;
  color: #94a3b8;
  font-size: 13px;
  line-height: 1.7;
}

.modal footer button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.modal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.modal-grid label,
.modal-field {
  display: grid;
  gap: 8px;
  color: #cbd5e1;
}

.modal-grid input,
.modal-field input,
.modal-field textarea {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 10px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.05);
}

.modal-field textarea {
  min-height: 110px;
  resize: vertical;
}

.modal-inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.modal-inline-actions button {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: #dce5f6;
  background: rgba(255, 255, 255, 0.055);
}

.modal-danger {
  width: fit-content;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid rgba(255, 111, 143, 0.38);
  border-radius: 8px;
  color: #ffd6df;
  background: rgba(114, 27, 52, 0.28);
}

.theater-user-modal-backdrop {
  z-index: 60;
  place-items: center;
  padding: 24px;
  background: rgba(4, 8, 18, 0.7);
  backdrop-filter: none;
}

.theater-user-modal {
  width: min(980px, calc(100vw - 82px));
  height: min(679px, calc(100vh - 48px));
  max-height: 679px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(162, 118, 255, 0.2);
  border-radius: 18px;
  color: rgb(170, 180, 196);
  background:
    linear-gradient(rgba(22, 18, 38, 0.5), rgba(12, 16, 28, 0) 40%),
    rgba(12, 16, 28, 0.94);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.42);
}

.theater-user-modal-header {
  min-height: 100px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 28px 16px;
  border-bottom: 1px solid rgba(162, 118, 255, 0.14);
}

.theater-user-modal-header h2 {
  margin: 6px 0 0;
  color: rgb(225, 230, 240);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
}

.theater-user-modal .modal-kicker {
  display: block;
  color: rgba(170, 180, 196, 0.72);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.theater-user-modal .modal-close {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid rgba(162, 118, 255, 0.2);
  border-radius: 8px;
  color: rgb(170, 180, 196);
  background: rgba(16, 20, 32, 0.56);
  cursor: pointer;
}

.theater-user-modal .modal-close:hover {
  color: rgb(225, 230, 240);
  border-color: rgba(162, 118, 255, 0.34);
  background: rgba(28, 33, 50, 0.72);
}

.theater-user-modal .modal-close svg {
  width: 18px;
  height: 18px;
}

.theater-user-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 520px) minmax(280px, 384px);
  gap: 18px;
  padding: 0 28px 20px;
  color: rgb(170, 180, 196);
}

.theater-user-panel,
.theater-project-panel {
  min-width: 0;
}

.theater-user-modal .form-field {
  display: grid;
  gap: 6px;
  margin: 0;
}

.theater-user-modal .form-label {
  color: rgb(170, 180, 196);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
}

.theater-user-modal .search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 76px;
  align-items: center;
  gap: 10px;
}

.theater-user-modal .search-row input {
  width: 100%;
  height: 43px;
  min-width: 0;
  border: 1px solid rgba(162, 118, 255, 0.2);
  border-radius: 10px;
  outline: none;
  padding: 10px 12px;
  color: rgb(225, 230, 240);
  background: rgba(10, 14, 24, 0.72);
  font-size: 14px;
}

.theater-user-modal .search-row input::placeholder {
  color: rgba(170, 180, 196, 0.62);
}

.theater-user-modal .search-row input:focus {
  border-color: rgba(162, 118, 255, 0.44);
  box-shadow: 0 0 0 3px rgba(162, 118, 255, 0.12);
}

.theater-user-modal .ghost-btn,
.theater-user-modal .primary-btn {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  padding: 0 18px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.theater-user-modal .ghost-btn {
  border: 1px solid rgba(162, 118, 255, 0.2);
  color: rgb(170, 180, 196);
  background: rgba(16, 20, 32, 0.28);
}

.theater-user-modal .ghost-btn:hover {
  color: rgb(225, 230, 240);
  border-color: rgba(162, 118, 255, 0.34);
  background: rgba(162, 118, 255, 0.08);
}

.theater-user-modal .search-btn {
  width: 76px;
  padding: 0;
}

.theater-user-modal .primary-btn {
  min-width: 96px;
  border: 1px solid rgba(162, 118, 255, 0.6);
  color: #ffffff;
  background: linear-gradient(135deg, rgb(162, 118, 255), rgb(125, 87, 224));
  box-shadow: 0 10px 24px rgba(125, 87, 224, 0.22);
}

.theater-user-modal .primary-btn:hover {
  filter: brightness(1.06);
}

.theater-user-modal .user-list {
  height: 400px;
  margin-top: 16px;
  display: grid;
  align-content: start;
  gap: 6px;
  overflow: auto;
  padding: 8px;
  border: 1px solid rgba(162, 118, 255, 0.16);
  border-radius: 12px;
  background: rgba(7, 10, 18, 0.3);
}

.theater-user-modal .user-list::-webkit-scrollbar {
  width: 7px;
}

.theater-user-modal .user-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(162, 118, 255, 0.24);
}

.theater-user-modal .user-row {
  width: 100%;
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 8px 10px;
  color: rgb(170, 180, 196);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.theater-user-modal .user-row strong {
  min-width: 0;
  color: inherit;
  font-size: 14px;
  font-weight: 700;
}

.theater-user-modal .user-row span {
  color: rgba(170, 180, 196, 0.78);
  font-size: 13px;
}

.theater-user-modal .user-row:hover {
  color: rgb(225, 230, 240);
  background: rgba(162, 118, 255, 0.07);
}

.theater-user-modal .user-row.selected {
  color: rgb(225, 230, 240);
  border-color: rgba(162, 118, 255, 0.3);
  background: rgba(162, 118, 255, 0.12);
}

.theater-user-modal .user-row.empty {
  justify-content: center;
  color: rgba(170, 180, 196, 0.64);
  cursor: default;
}

.theater-user-modal .readonly-field {
  height: 42px;
  display: flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(162, 118, 255, 0.2);
  border-radius: 10px;
  padding: 0 12px;
  color: rgb(225, 230, 240);
  background: rgba(148, 163, 184, 0.08);
  font-size: 14px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.theater-user-modal-actions {
  min-height: 75px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 28px 20px;
  border-top: 1px solid rgba(162, 118, 255, 0.14);
}

.theater-collaborator-modal {
  height: min(718px, calc(100vh - 48px));
  max-height: 718px;
}

.theater-collaborator-modal .theater-user-modal-body {
  flex: 1 1 auto;
}

.theater-collaborator-modal .list-block {
  margin-top: 16px;
}

.theater-collaborator-modal .user-list {
  height: 440px;
}

.theater-collaborator-modal .selected-block {
  margin-top: 23px;
}

.theater-collaborator-modal .selected-heading {
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 2px 8px;
  color: rgb(170, 180, 196);
}

.theater-collaborator-modal .selected-heading span {
  color: rgb(170, 180, 196);
  font-size: 13px;
  font-weight: 700;
}

.theater-collaborator-modal .selected-heading small {
  color: rgba(170, 180, 196, 0.72);
  font-size: 12px;
  font-weight: 700;
}

.theater-collaborator-modal .user-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  min-height: 54px;
}

.theater-collaborator-modal .user-check {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(162, 118, 255, 0.2);
  border-radius: 6px;
  color: rgb(225, 230, 240);
  background: rgba(10, 14, 24, 0.4);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

.theater-collaborator-modal .user-row.selected .user-check {
  border-color: rgba(162, 118, 255, 0.42);
  background: rgba(162, 118, 255, 0.26);
}

.theater-collaborator-modal .user-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
  color: inherit;
}

.theater-collaborator-modal .user-copy strong {
  overflow: hidden;
  color: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.theater-collaborator-modal .user-copy small {
  overflow: hidden;
  color: rgba(170, 180, 196, 0.78);
  font-size: 12px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.theater-collaborator-modal .selected-list {
  height: 357px;
}

.theater-collaborator-modal .empty-list {
  min-height: 52px;
  display: grid;
  place-items: center;
  color: rgba(170, 180, 196, 0.64);
  font-size: 14px;
}

.theater-collaborator-modal .remove-mark {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  color: rgba(170, 180, 196, 0.7);
  font-size: 15px;
  font-weight: 700;
}

.theater-collaborator-modal .user-row:hover .remove-mark {
  color: rgb(225, 230, 240);
  background: rgba(255, 255, 255, 0.06);
}

.theater-edit-modal {
  width: min(520px, calc(100vw - 48px));
  height: auto;
  min-height: 484px;
  overflow: hidden;
  border: 1px solid rgba(162, 118, 255, 0.2);
  border-radius: 18px;
  color: rgb(170, 180, 196);
  background:
    linear-gradient(rgba(22, 18, 38, 0.5), rgba(12, 16, 28, 0) 40%),
    rgba(12, 16, 28, 0.94);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.42);
}

.theater-create-modal {
  min-height: 458px;
}

.theater-edit-modal-header {
  min-height: 94px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 22px 22px 16px;
}

.theater-edit-modal-header h2 {
  margin: 6px 0 0;
  color: rgb(225, 230, 240);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
}

.theater-edit-modal .modal-kicker {
  display: block;
  color: rgba(170, 180, 196, 0.72);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.theater-edit-modal .modal-close {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid rgba(162, 118, 255, 0.2);
  border-radius: 8px;
  color: rgb(136, 146, 163);
  background: rgba(16, 20, 32, 0.56);
  cursor: pointer;
}

.theater-edit-modal .modal-close:hover {
  color: rgb(225, 230, 240);
  border-color: rgba(162, 118, 255, 0.34);
  background: rgba(28, 33, 50, 0.72);
}

.theater-edit-modal .modal-close svg {
  width: 18px;
  height: 18px;
}

.theater-edit-modal-body {
  display: grid;
  gap: 15px;
  padding: 0 22px 19px;
}

.theater-edit-modal .form-field {
  display: grid;
  gap: 6px;
  margin: 0;
  color: rgb(170, 180, 196);
}

.theater-edit-modal .form-label {
  color: rgb(170, 180, 196);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
}

.theater-edit-modal input,
.theater-edit-modal textarea {
  width: 100%;
  border: 1px solid rgba(162, 118, 255, 0.2);
  border-radius: 10px;
  outline: none;
  padding: 10px 12px;
  color: rgb(225, 230, 240);
  background: rgba(10, 14, 24, 0.72);
  font-size: 14px;
}

.theater-edit-modal input {
  height: 43px;
}

.theater-edit-modal textarea {
  height: 87px;
  resize: none;
}

.theater-edit-modal input:focus,
.theater-edit-modal textarea:focus {
  border-color: rgba(162, 118, 255, 0.34);
  box-shadow: 0 0 0 3px rgba(162, 118, 255, 0.12);
}

.theater-edit-modal input::placeholder,
.theater-edit-modal textarea::placeholder {
  color: rgba(170, 180, 196, 0.62);
}

.theater-edit-modal .option-section {
  gap: 8px;
}

.theater-edit-modal .option-pill-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.theater-edit-modal .option-pill {
  height: 38px;
  border: 1px solid rgba(162, 118, 255, 0.2);
  border-radius: 10px;
  color: rgb(170, 180, 196);
  background: rgba(10, 14, 24, 0.72);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.theater-edit-modal .option-pill.active {
  color: rgb(225, 230, 240);
  border-color: rgba(162, 118, 255, 0.34);
  background: linear-gradient(135deg, rgba(162, 118, 255, 0.24), rgba(125, 87, 224, 0.18));
}

.theater-edit-modal .field-hint {
  color: rgb(136, 146, 163);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
}

.theater-edit-modal-actions {
  min-height: 75px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 22px 20px;
}

.theater-edit-modal .ghost-btn,
.theater-edit-modal .primary-btn {
  min-width: 96px;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  padding: 0 18px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.theater-edit-modal .ghost-btn {
  border: 1px solid rgba(162, 118, 255, 0.2);
  color: rgb(170, 180, 196);
  background: transparent;
}

.theater-edit-modal .primary-btn {
  border: 1px solid rgba(162, 118, 255, 0.6);
  color: #ffffff;
  background: linear-gradient(135deg, rgb(162, 118, 255), rgb(125, 87, 224));
}

@media (max-width: 760px) {
  .theater-user-modal {
    width: calc(100vw - 28px);
    height: calc(100vh - 28px);
  }

  .theater-user-modal-header {
    min-height: 84px;
    padding: 18px;
  }

  .theater-user-modal-body {
    grid-template-columns: 1fr;
    gap: 14px;
    overflow: auto;
    padding: 0 18px 18px;
  }

  .theater-user-modal .user-list {
    height: min(320px, 44vh);
  }

  .theater-user-modal-actions {
    min-height: 68px;
    padding: 14px 18px 16px;
  }
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 120;
  transform: translateX(-50%);
  min-height: 40px;
  display: grid;
  place-items: center;
  max-width: min(680px, calc(100vw - 40px));
  padding: 0 20px;
  border: 1px solid rgba(63, 232, 164, 0.5);
  border-radius: 999px;
  color: #dffff3;
  background: rgba(4, 31, 34, 0.96);
  box-shadow:
    0 0 0 1px rgba(159, 255, 215, 0.08) inset,
    0 0 28px rgba(63, 232, 164, 0.24),
    0 18px 44px rgba(0, 0, 0, 0.34);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  pointer-events: none;
}

@media (max-width: 1100px) {
  .home-main,
  .script-library,
  .theater-list-layout,
  .task-list-page,
  .production-center,
  .video-projects,
  .toolbox-layout {
    width: auto;
    margin: 0 20px;
  }

  .hero-card {
    grid-template-columns: 1fr;
    padding: 36px;
  }

  .orbital {
    display: none;
  }

  .tool-grid,
  .automation-stages,
  .theater-command-grid,
  .theater-kpi-strip,
  .kanban-board,
  .ops-bottom-grid,
  .workflow-strip,
  .stats-grid,
  .generated-assets-grid,
  .storyboard-grid,
  .module-metrics,
  .asset-catalog > div,
  .team-board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .task-table {
    overflow-x: auto;
  }

  .task-table header,
  .task-table article {
    min-width: 920px;
  }

  .script-grid,
  .video-projects,
  .theater-project-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .overview-hero {
    grid-template-columns: 1fr;
    padding: 42px;
  }

  .theater-list-hero {
    align-items: flex-start;
    flex-direction: column;
  }

  .ops-overview {
    grid-template-columns: 1fr;
  }

  .studio-page,
  .script-import-layout,
  .toolbox-layout {
    grid-template-columns: 1fr;
  }

  .studio-page {
    padding: 12px;
  }

  .composer-box {
    position: static;
    margin-top: 240px;
  }
}

@media (max-width: 720px) {
  .home-top,
  .topbar {
    padding: 0 14px;
  }

  .home-main {
    padding-top: 28px;
  }

  .hero-card {
    min-height: 360px;
    border-radius: 18px;
    padding: 24px;
  }

  .hero-copy strong {
    font-size: 42px;
  }

  .tool-grid,
  .automation-stages,
  .theater-command-grid,
  .theater-kpi-strip,
  .kanban-board,
  .ops-bottom-grid,
  .script-grid,
  .video-projects,
  .workflow-strip,
  .stats-grid,
  .generated-assets-grid,
  .storyboard-grid,
  .module-metrics,
  .asset-catalog,
  .asset-catalog > div,
  .team-board,
  .pipeline-cards,
  .modal-grid {
    grid-template-columns: 1fr;
  }

  .automation-command {
    margin: 0 14px 18px;
    padding: 16px;
  }

  .automation-command header {
    align-items: stretch;
    flex-direction: column;
  }

  .automation-command header > div:last-child {
    justify-content: stretch;
  }

  .automation-command button {
    flex: 1;
  }

  .project-banner,
  .production-hero {
    align-items: stretch;
    flex-direction: column;
  }

  .project-banner div:last-child {
    flex-wrap: wrap;
  }

  .project-banner button {
    flex: 1;
  }

  .theater-list-layout,
  .theater-detail-layout {
    grid-template-columns: 1fr;
  }

  .theater-list-main .theater-project-grid,
  .project-card-metrics {
    grid-template-columns: 1fr;
  }

  .theater-list-hero,
  .theater-kpi-strip article,
  .theater-project-card,
  .theater-create-card {
    padding: 18px;
  }

  .theater-filter,
  .project-rail {
    min-height: 0;
    grid-auto-flow: column;
    overflow: auto;
  }

  .project-rail {
    display: flex;
    padding: 8px;
  }

  .project-rail button {
    min-width: 74px;
  }

  .episode-body {
    grid-template-columns: 1fr;
    height: auto;
  }

  .episode-rail {
    display: flex;
    overflow: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .episode-rail button {
    min-width: 86px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* Final homepage override: keep this after legacy responsive rules. */
.home-shell {
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(ellipse at 18% 0%, rgba(14, 165, 233, 0.08), transparent 38%),
    radial-gradient(ellipse at 86% 12%, rgba(245, 158, 11, 0.045), transparent 34%),
    linear-gradient(180deg, #040914 0%, #02050b 100%);
}

.home-top {
  height: 75px;
  padding: 0 35px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(6, 10, 22, 0.94);
}

.home-main {
  width: min(calc(100% - 48px), 1720px);
  margin: 0 auto;
  padding: clamp(66px, 8vw, 153px) 0 80px;
}

.hero-card.studio-card {
  position: relative;
  width: 100%;
  height: 440px;
  min-height: 440px;
  overflow: hidden;
  display: flex;
  grid-template-columns: none;
  align-items: center;
  gap: 40px;
  padding: clamp(36px, 2.9vw, 56px);
  border: 1px solid rgba(184, 196, 255, 0.16);
  border-radius: 32px;
  color: #ffffff;
  text-align: left;
  background:
    radial-gradient(circle at 73% 45%, rgba(112, 72, 198, 0.34), transparent 34%),
    linear-gradient(90deg, rgba(9, 13, 27, 0.96), rgba(21, 20, 44, 0.94) 45%, rgba(38, 28, 79, 0.88));
  box-shadow:
    0 28px 72px rgba(0, 0, 0, 0.48),
    inset 0 1px 1px rgba(255, 255, 255, 0.04);
}

.hero-card.studio-card::before,
.hero-card.studio-card::after {
  display: none;
}

.hero-card.studio-card:hover {
  transform: translateY(-2px);
  border-color: rgba(200, 210, 255, 0.24);
}

.hero-aurora,
.hero-outline {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-aurora {
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(4, 9, 20, 0.88) 0%, rgba(4, 9, 20, 0.62) 47%, rgba(58, 38, 112, 0.46) 100%),
    radial-gradient(circle at 68% 42%, rgba(151, 104, 255, 0.22), transparent 35%);
}

.hero-outline {
  z-index: 2;
  border: 1px solid rgba(255, 255, 255, 0.045);
  border-radius: inherit;
  box-shadow: inset 0 0 80px rgba(124, 93, 208, 0.08);
}

.hero-visual {
  position: relative;
  z-index: 3;
  flex: 0 0 50.5%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-diagram {
  width: min(520px, 82%);
  height: auto;
  overflow: visible;
}

.hero-copy {
  position: relative;
  z-index: 4;
  flex: 1;
  display: grid;
  gap: 14px;
}

.hero-copy small {
  display: grid;
  grid-template-columns: max-content max-content;
  gap: 8px 18px;
  color: #d8ddff;
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.32em;
}

.hero-copy small em,
.hero-copy small i {
  color: rgba(214, 220, 255, 0.36);
  font-style: normal;
}

.hero-copy small i {
  grid-column: 1 / -1;
}

.hero-copy strong {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(44px, 3.6vw, 64px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: 0;
}

.hero-copy strong mark {
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(171, 129, 255, 0.36);
  border-radius: 50%;
  color: rgba(215, 205, 255, 0.86);
  background: rgba(120, 74, 191, 0.2);
}

.hero-copy > span {
  color: rgba(203, 213, 225, 0.78);
  font-size: 16px;
}

.hero-copy b {
  width: fit-content;
  height: 40px;
  margin-top: 30px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 0 22px 0 26px;
  border: 1px solid rgba(196, 178, 255, 0.24);
  border-radius: 999px;
  color: #ffffff;
  background: rgba(93, 63, 154, 0.34);
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 13px;
  letter-spacing: 0.15em;
}

.hero-copy b svg,
.base-content u svg {
  transform: rotate(180deg);
}

.home-tools {
  margin-top: 33px;
}

.home-section-title {
  height: 18px;
  margin-bottom: 10px;
  color: rgba(148, 163, 184, 0.62);
  font-size: 14px;
  letter-spacing: 0.18em;
}

.home-section-title i {
  background: rgba(148, 163, 184, 0.12);
}

.tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-auto-rows: 200px;
  gap: 20px;
}

.home-tool.base-card {
  --base-accent: rgba(125, 211, 252, 0.74);
  position: relative;
  height: 200px;
  min-height: 0;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  padding: 20px 24px;
  border: 1px solid rgba(125, 211, 252, 0.12);
  border-radius: 16px;
  color: #eef6ff;
  text-align: left;
  background:
    linear-gradient(135deg, rgba(16, 32, 52, 0.74), rgba(8, 17, 32, 0.86)),
    #080c14;
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
  transition:
    transform 0.22s ease,
    border-color 0.22s ease,
    background 0.22s ease,
    box-shadow 0.22s ease;
  animation: none;
}

.home-tool.base-card::before,
.home-tool.base-card::after {
  display: none;
}

.home-tool.base-card:hover,
.home-tool.base-card:focus-visible {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--base-accent) 42%, rgba(255, 255, 255, 0.12));
  background:
    linear-gradient(135deg, rgba(20, 42, 68, 0.84), rgba(10, 23, 42, 0.92)),
    #111827;
}

.home-tool.base-card.is-activating {
  animation: beta-card-active 0.24s ease both;
}

.base-backdrop,
.base-frame,
.corner,
.base-visual,
.base-content {
  position: absolute;
  pointer-events: none;
}

.base-backdrop {
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 82% 72%, color-mix(in srgb, var(--base-accent) 14%, transparent), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 52%);
}

.base-frame {
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  box-shadow: inset 0 0 48px rgba(4, 9, 20, 0.28);
}

.corner {
  z-index: 5;
  width: 10px;
  height: 10px;
  border-color: rgba(160, 176, 220, 0.28);
}

.corner.top-left {
  top: 12px;
  left: 12px;
  border-top: 1px solid;
  border-left: 1px solid;
}

.corner.top-right {
  top: 12px;
  right: 12px;
  border-top: 1px solid;
  border-right: 1px solid;
}

.corner.bottom-left {
  left: 12px;
  bottom: 12px;
  border-bottom: 1px solid;
  border-left: 1px solid;
}

.corner.bottom-right {
  right: 12px;
  bottom: 12px;
  border-right: 1px solid;
  border-bottom: 1px solid;
}

.base-visual {
  right: 2px;
  bottom: 0;
  z-index: 1;
  width: 58%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  opacity: 0.52;
  transition:
    opacity 0.34s ease,
    transform 0.34s ease;
}

.home-tool.base-card:hover .base-visual {
  opacity: 0.72;
  transform: translateX(-3px) scale(1.02);
}

.base-diagram {
  width: 100%;
  max-width: 240px;
  height: auto;
  overflow: visible;
}

.base-content {
  inset: 20px 24px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.base-content small {
  max-width: calc(100% - 16px);
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(185, 196, 230, 0.72);
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.base-content small b {
  color: rgba(190, 208, 255, 0.52);
}

.base-content small em,
.base-content small i {
  color: rgba(189, 199, 232, 0.58);
  font-style: normal;
}

.base-content small i {
  overflow: hidden;
  text-overflow: ellipsis;
}

.base-content strong {
  display: block;
  margin-top: 24px;
  color: #ffffff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 27px;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: 0;
}

.base-content strong b {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 3px 8px;
  border: 1px solid rgba(255, 195, 92, 0.34);
  border-radius: 999px;
  color: #ffd28b;
  background: rgba(255, 186, 97, 0.12);
  font-family: Inter, "Microsoft YaHei", sans-serif;
  font-size: 10px;
  font-weight: 800;
  vertical-align: middle;
}

.base-content > span {
  margin-top: 12px;
  color: rgba(203, 213, 225, 0.7);
  font-size: 14px;
}

.base-content u {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(220, 226, 255, 0.82);
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-decoration: none;
}

.theater-card {
  --base-accent: rgba(250, 204, 21, 0.76);
  grid-row: auto;
  align-content: initial;
  padding-bottom: 20px;
}

.super_resolution-card {
  --base-accent: rgba(63, 232, 164, 0.76);
}

.video_understanding-card {
  --base-accent: rgba(91, 132, 255, 0.78);
}

.deduction-card {
  --base-accent: rgba(154, 107, 255, 0.78);
}

.subtitle-card {
  --base-accent: rgba(255, 186, 97, 0.78);
}

@media (max-width: 1280px) {
  .home-main {
    padding-top: clamp(66px, 7vw, 96px);
  }

  .hero-card.studio-card {
    gap: 20px;
  }
}

@media (max-width: 900px) {
  .home-top {
    padding: 0 24px;
  }

  .hero-card.studio-card {
    display: grid;
    grid-template-columns: 44% 1fr;
    gap: 14px;
    border-radius: 28px;
    padding: 36px 44px;
  }

  .hero-visual {
    width: 100%;
  }

  .hero-diagram {
    width: 100%;
  }

  .hero-copy strong {
    font-size: 42px;
  }
}

@media (max-width: 720px) {
  .home-main {
    width: min(calc(100% - 28px), 1720px);
    padding-top: 28px;
  }

  .hero-card.studio-card {
    height: auto;
    min-height: 360px;
    grid-template-columns: 1fr;
    padding: 24px;
  }

  .hero-visual {
    display: none;
  }

  .hero-copy strong {
    font-size: 38px;
  }

  .tool-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 180px;
    gap: 14px;
  }

  .home-tool.base-card {
    height: 180px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-diagram *,
  .base-diagram * {
    animation: none !important;
  }
}

/* Tool-card visuals are static until the card is clicked. */
@keyframes beta-click-pop {
  0% {
    opacity: 0.56;
    transform: translateX(0) scale(1);
  }
  38% {
    opacity: 0.88;
    transform: translateX(-6px) scale(1.045);
  }
  100% {
    opacity: 0.68;
    transform: translateX(-3px) scale(1.018);
  }
}

@keyframes beta-click-clapper {
  0%,
  100% {
    transform: rotate(0deg);
  }
  28% {
    transform: rotate(-10deg);
  }
  56% {
    transform: rotate(4deg);
  }
}

@keyframes beta-click-pulse {
  0% {
    opacity: 0.55;
    transform: scale(1);
  }
  42% {
    opacity: 1;
    transform: scale(1.12);
  }
  100% {
    opacity: 0.72;
    transform: scale(1);
  }
}

@keyframes beta-click-scan {
  from {
    transform: translateX(0);
    opacity: 0.95;
  }
  to {
    transform: translateX(176px);
    opacity: 0.12;
  }
}

.home-tool.base-card .base-diagram *,
.home-tool.base-card .clapper-arm,
.home-tool.base-card .vsr-wave.hot,
.home-tool.base-card .vsr-scan,
.home-tool.base-card .scan-bar,
.home-tool.base-card .ray,
.home-tool.base-card .script-line,
.home-tool.base-card .logic-link,
.home-tool.base-card .ai-translate-stream,
.home-tool.base-card .logic-node,
.home-tool.base-card .translate-node {
  animation: none !important;
}

.home-tool.base-card .vsr-scan {
  transform: translateX(0);
  opacity: 0.42;
}

.home-tool.base-card .vsr-wave.hot,
.home-tool.base-card .scan-bar,
.home-tool.base-card .ray,
.home-tool.base-card .script-line,
.home-tool.base-card .logic-link,
.home-tool.base-card .ai-translate-stream {
  stroke-dashoffset: 0;
}

.home-tool.base-card.is-activating .base-visual {
  animation: beta-click-pop 0.62s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.home-tool.base-card.is-activating .clapper-arm {
  animation: beta-click-clapper 0.58s cubic-bezier(0.2, 0.8, 0.2, 1) both !important;
}

.home-tool.base-card.is-activating .vsr-scan {
  animation: beta-click-scan 0.62s ease-out both !important;
}

.home-tool.base-card.is-activating .vsr-wave.hot,
.home-tool.base-card.is-activating .scan-bar,
.home-tool.base-card.is-activating .ray,
.home-tool.base-card.is-activating .script-line,
.home-tool.base-card.is-activating .logic-link,
.home-tool.base-card.is-activating .ai-translate-stream {
  animation: beta-dash 0.66s linear both !important;
}

.home-tool.base-card.is-activating .logic-node,
.home-tool.base-card.is-activating .translate-node,
.home-tool.base-card.is-activating .play-icon,
.home-tool.base-card.is-activating .ai-play-icon {
  transform-box: fill-box;
  transform-origin: center;
  animation: beta-click-pulse 0.52s ease-out both !important;
}

@media (prefers-reduced-motion: reduce) {
  .home-tool.base-card.is-activating .base-visual,
  .home-tool.base-card.is-activating .base-diagram * {
    animation: none !important;
  }
}

/* Stronger click-only card visual activation. */
@keyframes beta-card-click-lift {
  0% {
    transform: translateY(0);
  }
  34% {
    transform: translateY(-5px);
  }
  100% {
    transform: translateY(-1px);
  }
}

@keyframes beta-visual-click-strong {
  0% {
    opacity: 0.55;
    transform: translateX(0) scale(1);
    filter: none;
  }
  32% {
    opacity: 1;
    transform: translateX(-11px) scale(1.1);
    filter: drop-shadow(0 0 18px color-mix(in srgb, var(--base-accent) 52%, transparent));
  }
  100% {
    opacity: 0.7;
    transform: translateX(-3px) scale(1.02);
    filter: drop-shadow(0 0 8px color-mix(in srgb, var(--base-accent) 28%, transparent));
  }
}

@keyframes beta-action-word {
  0%,
  100% {
    fill: rgba(250, 204, 21, 0);
    opacity: 0;
    transform: translateY(0) scale(0.94);
  }
  42% {
    fill: rgba(250, 204, 21, 0.72);
    opacity: 1;
    transform: translateY(-2px) scale(1);
  }
}

.home-tool.base-card.is-activating {
  animation: beta-card-click-lift 1.02s cubic-bezier(0.2, 0.8, 0.2, 1) both !important;
  border-color: color-mix(in srgb, var(--base-accent) 56%, rgba(255, 255, 255, 0.18));
  box-shadow:
    0 22px 46px rgba(0, 0, 0, 0.54),
    0 0 0 1px color-mix(in srgb, var(--base-accent) 14%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.home-tool.base-card.is-activating .base-visual {
  animation: beta-visual-click-strong 1s cubic-bezier(0.2, 0.8, 0.2, 1) both !important;
}

.home-tool.base-card.is-activating .base-frame {
  box-shadow:
    inset 0 0 54px rgba(4, 9, 20, 0.2),
    inset 0 0 28px color-mix(in srgb, var(--base-accent) 10%, transparent);
}

.home-tool.base-card.is-activating .corner {
  border-color: color-mix(in srgb, var(--base-accent) 74%, rgba(255, 255, 255, 0.24));
}

.home-tool.base-card.is-activating .clapper-arm {
  animation: beta-click-clapper 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both !important;
}

.home-tool.base-card.is-activating .action-burst {
  transform-box: fill-box;
  transform-origin: center;
  animation: beta-action-word 0.92s ease-out both !important;
}

.home-tool.base-card.is-activating .vsr-scan {
  animation: beta-click-scan 0.92s ease-out both !important;
}

.home-tool.base-card.is-activating .vsr-wave.hot,
.home-tool.base-card.is-activating .scan-bar,
.home-tool.base-card.is-activating .ray,
.home-tool.base-card.is-activating .script-line,
.home-tool.base-card.is-activating .logic-link,
.home-tool.base-card.is-activating .ai-translate-stream {
  animation: beta-dash 1s linear both !important;
}

.home-tool.base-card.is-activating .logic-node,
.home-tool.base-card.is-activating .translate-node,
.home-tool.base-card.is-activating .play-icon,
.home-tool.base-card.is-activating .ai-play-icon {
  transform-box: fill-box;
  transform-origin: center;
  animation: beta-click-pulse 0.82s ease-out both !important;
}

/* Restore subtle always-on motion for the function cards. */
.home-tool.base-card .clapper-arm {
  animation: beta-clapper 5.5s ease-in-out infinite !important;
}

.home-tool.base-card .vsr-wave.hot {
  animation: beta-dash 6s linear infinite !important;
}

.home-tool.base-card .vsr-scan {
  opacity: 0.78;
  animation: beta-scan-line 3.8s linear infinite !important;
}

.home-tool.base-card .scan-bar {
  animation: beta-dash 3s linear infinite !important;
}

.home-tool.base-card .ray,
.home-tool.base-card .script-line,
.home-tool.base-card .ai-translate-stream {
  animation: beta-dash 5s linear infinite !important;
}

.home-tool.base-card .logic-link {
  animation: beta-dash 6s linear infinite !important;
}

.home-tool.base-card .logic-link.alt,
.home-tool.base-card .ai-translate-stream.alt {
  animation-delay: -2s !important;
}

.home-tool.base-card .logic-node,
.home-tool.base-card .translate-node,
.home-tool.base-card .play-icon,
.home-tool.base-card .ai-play-icon {
  transform-box: fill-box;
  transform-origin: center;
  animation: beta-click-pulse 3.8s ease-in-out infinite !important;
}

.home-tool.base-card .translate-node.n-2,
.home-tool.base-card .logic-node.n2 {
  animation-delay: -0.8s !important;
}

.home-tool.base-card .translate-node.n-3,
.home-tool.base-card .logic-node.n3 {
  animation-delay: -1.5s !important;
}

.home-tool.base-card .translate-node.n-4 {
  animation-delay: -2.2s !important;
}

@media (prefers-reduced-motion: reduce) {
  .home-tool.base-card.is-activating,
  .home-tool.base-card.is-activating .base-visual,
  .home-tool.base-card.is-activating .base-diagram *,
  .home-tool.base-card .base-diagram * {
    animation: none !important;
  }
}

.beta-theater-project-page {
  --theater-bg: #081120;
  --theater-bg-deep: #060d19;
  --theater-line: rgba(118, 145, 176, 0.16);
  --theater-line-strong: rgba(118, 165, 194, 0.26);
  --theater-text: #c9d3e1;
  --theater-text-strong: #e7edf5;
  --theater-text-soft: #93a3b6;
  --theater-accent: #7fb8d4;
  --theater-accent-soft: rgba(81, 147, 183, 0.14);
  --theater-danger: #e8a0a0;
  position: relative;
  width: 100%;
  min-width: 0;
  height: 100vh;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  isolation: isolate;
  color: var(--theater-text);
  background:
    radial-gradient(circle at top right, rgba(89, 143, 176, 0.08), transparent 40%),
    radial-gradient(circle at bottom left, rgba(81, 147, 183, 0.05), transparent 30%),
    linear-gradient(180deg, var(--theater-bg-deep) 0%, var(--theater-bg) 100%);
}

.beta-theater-project-page::before,
.beta-theater-project-page::after {
  content: "";
  position: fixed;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
}

.beta-theater-project-page::before {
  top: -10vh;
  left: -5vw;
  width: 50vw;
  height: 50vw;
  background: radial-gradient(circle, rgba(81, 147, 183, 0.08), transparent 65%);
  filter: blur(60px);
}

.beta-theater-project-page::after {
  right: -5vw;
  bottom: -10vh;
  width: 40vw;
  height: 40vw;
  background: radial-gradient(circle, rgba(127, 184, 212, 0.06), transparent 70%);
  filter: blur(50px);
}

.beta-theater-project-page svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.beta-theater-topbar {
  position: relative;
  z-index: 3;
  flex: 0 0 76px;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 36px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.15);
  background: rgba(6, 10, 20, 0.86);
  backdrop-filter: blur(16px);
}

.beta-theater-topbar .topbar-left {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.beta-theater-project-page .topbar-back-btn {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(148, 163, 184, 0.26);
  border-radius: 8px;
  color: #e2e8f0;
  background: rgba(15, 23, 42, 0.72);
  cursor: pointer;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

.beta-theater-project-page .topbar-back-btn:hover {
  border-color: rgba(148, 163, 184, 0.5);
  background: rgba(30, 41, 59, 0.9);
  transform: translateY(-1px);
}

.theater-brand {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  color: #f8fafc;
  background: transparent;
  cursor: pointer;
}

.theater-brand-mark {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.8), rgba(99, 102, 241, 0.82));
  box-shadow:
    0 0 22px rgba(80, 149, 238, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.theater-brand-mark img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.theater-brand-name {
  color: #fff;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
}

.theater-brand-en {
  margin-left: 2px;
  color: rgba(205, 188, 255, 0.96);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.22em;
}

.beta-team-trigger {
  height: 40px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 4px;
  border: 1px solid rgba(148, 163, 184, 0.26);
  border-radius: 999px;
  color: #e2e8f0;
  background: rgba(15, 23, 42, 0.72);
  cursor: pointer;
  transition:
    background 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease;
}

.beta-team-trigger:hover {
  border-color: rgba(127, 184, 212, 0.38);
  background: rgba(22, 33, 51, 0.88);
  box-shadow: 0 0 18px rgba(127, 184, 212, 0.14);
}

.team-avatar {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #eefaff;
  background: linear-gradient(135deg, #22d3ee, #3b82f6);
  font-size: 14px;
  font-weight: 900;
}

.theater-project-container {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 22px 20px;
  overflow: visible;
}

.beta-theater-project-page .selection-shell {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  align-items: stretch;
  gap: 22px;
}

.beta-theater-project-page .project-view-sidebar {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 0;
  overflow: visible;
}

.beta-theater-project-page .view-menu-card {
  position: relative;
  display: grid;
  gap: 6px;
  padding: 6px;
  border: 1px solid rgba(118, 145, 176, 0.12);
  border-radius: 20px;
  background:
    radial-gradient(circle at 18% 0%, rgba(127, 184, 212, 0.08), transparent 46%),
    linear-gradient(180deg, rgba(17, 27, 44, 0.46), rgba(6, 13, 25, 0.36));
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.035),
    0 18px 36px rgba(0, 0, 0, 0.1);
}

.beta-theater-project-page .view-menu-card-utility {
  margin-top: auto;
  border-color: rgba(232, 160, 160, 0.1);
  background:
    radial-gradient(circle at 24% 0%, rgba(232, 160, 160, 0.09), transparent 46%),
    linear-gradient(180deg, rgba(34, 18, 31, 0.42), rgba(6, 13, 25, 0.34));
}

.beta-theater-project-page .view-menu-item {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 46px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 4px;
  align-items: center;
  gap: 9px;
  padding: 5px 8px 5px 5px;
  border: 1px solid transparent;
  border-radius: 16px;
  color: var(--theater-text-soft);
  background: linear-gradient(90deg, rgba(127, 184, 212, 0.035), rgba(127, 184, 212, 0)), transparent;
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.beta-theater-project-page .view-menu-item::before {
  content: "";
  position: absolute;
  inset: 9px auto 9px 0;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, #9fe2ff, rgba(127, 184, 212, 0.28));
  opacity: 0;
  transform: scaleY(0.45);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.beta-theater-project-page .view-menu-item:hover {
  z-index: 3;
  color: var(--theater-text-strong);
  border-color: var(--theater-line);
  background: linear-gradient(90deg, rgba(127, 184, 212, 0.11), rgba(127, 184, 212, 0.03)), rgba(255, 255, 255, 0.02);
  box-shadow:
    0 12px 22px rgba(0, 0, 0, 0.2),
    0 0 0 1px rgba(127, 184, 212, 0.05);
  transform: translateY(-2px);
}

.beta-theater-project-page .view-menu-item.active {
  z-index: 2;
  color: var(--theater-text-strong);
  border-color: var(--theater-line-strong);
  background:
    linear-gradient(90deg, rgba(127, 184, 212, 0.18), rgba(81, 147, 183, 0.08) 62%, rgba(81, 147, 183, 0.02)),
    rgba(255, 255, 255, 0.03);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.05),
    0 14px 30px rgba(0, 0, 0, 0.18);
}

.beta-theater-project-page .view-menu-item.active::before,
.beta-theater-project-page .view-menu-item.active .view-menu-indicator {
  opacity: 1;
  transform: scaleY(1);
}

.beta-theater-project-page .view-menu-item.utility {
  color: rgba(232, 160, 160, 0.86);
}

.beta-theater-project-page .view-menu-item.utility:hover,
.beta-theater-project-page .view-menu-item.utility.active {
  color: #f4c4c4;
  border-color: rgba(232, 160, 160, 0.22);
  background: linear-gradient(90deg, rgba(232, 160, 160, 0.12), rgba(232, 160, 160, 0.03)), rgba(255, 255, 255, 0.02);
}

.beta-theater-project-page .view-menu-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(118, 145, 176, 0.14);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.01)), rgba(8, 15, 28, 0.52);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.04);
}

.beta-theater-project-page .view-menu-icon svg {
  width: 18px;
  height: 18px;
}

.beta-theater-project-page .view-menu-item:hover .view-menu-icon {
  border-color: rgba(127, 184, 212, 0.26);
  background: linear-gradient(145deg, rgba(127, 184, 212, 0.14), rgba(255, 255, 255, 0.016)), rgba(8, 15, 28, 0.68);
}

.beta-theater-project-page .view-menu-item.active .view-menu-icon {
  color: #dff6ff;
  border-color: rgba(159, 226, 255, 0.34);
  background:
    radial-gradient(circle at 30% 20%, rgba(159, 226, 255, 0.22), transparent 46%),
    linear-gradient(145deg, rgba(81, 147, 183, 0.2), rgba(8, 15, 28, 0.68));
}

.beta-theater-project-page .view-menu-indicator {
  width: 4px;
  height: 18px;
  justify-self: end;
  border-radius: 999px;
  background: currentColor;
  opacity: 0;
  transform: scaleY(0.45);
}

.beta-theater-project-page .project-view-content {
  position: relative;
  min-width: 0;
  min-height: 0;
  padding: 20px 8px 86px 0;
  overflow: auto;
  scrollbar-width: none;
}

.beta-theater-project-page .project-view-content::-webkit-scrollbar {
  display: none;
}

.beta-theater-project-page .project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
}

.beta-theater-project-page .create-card {
  min-height: 282px;
  height: 282px;
  position: relative;
  display: block;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--theater-line);
  border-radius: 26px;
  color: var(--theater-text-strong);
  background:
    radial-gradient(circle at 50% 0%, rgba(81, 147, 183, 0.1), transparent 26%),
    linear-gradient(145deg, rgba(17, 27, 44, 0.88), rgba(8, 15, 28, 0.98));
  cursor: pointer;
  transition:
    transform 0.24s ease,
    border-color 0.24s ease,
    box-shadow 0.24s ease;
}

.beta-theater-project-page .create-card:hover,
.beta-theater-project-page .create-card:focus-visible {
  border-color: rgba(127, 184, 212, 0.3);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.18);
  transform: translateY(-6px);
}

.beta-theater-project-page .create-card-inner {
  position: relative;
  z-index: 1;
  min-height: 280px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 24px;
  padding: 24px;
}

.beta-theater-project-page .create-emblem {
  width: 100px;
  height: 100px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(127, 184, 212, 0.22);
  border-radius: 999px;
  color: rgba(201, 211, 225, 0.86);
  background:
    radial-gradient(circle, rgba(81, 147, 183, 0.18), transparent 58%),
    rgba(255, 255, 255, 0.02);
}

.beta-theater-project-page .create-emblem svg {
  width: 38px;
  height: 38px;
  stroke-width: 1.8;
}

.beta-theater-project-page .create-copy {
  color: var(--theater-text-strong);
  font-size: 20px;
  font-weight: 500;
}

.beta-theater-project-page .theater-project-card.script-card,
.beta-theater-project-page .theater-empty-card.script-card {
  min-height: 280px;
  height: 280px;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--theater-line);
  border-radius: 26px;
  color: var(--theater-text);
  background: linear-gradient(145deg, var(--project-card-start, rgb(36, 42, 66)), var(--project-card-end, rgb(28, 22, 44)));
  cursor: pointer;
  box-shadow: none;
  transition:
    transform 0.24s ease,
    border-color 0.24s ease,
    box-shadow 0.24s ease;
}

.beta-theater-project-page .theater-project-card::after,
.beta-theater-project-page .theater-empty-card::after {
  content: none;
}

.beta-theater-project-page .theater-project-card::before,
.beta-theater-project-page .theater-empty-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 88% 14%, var(--project-card-accent-soft, rgba(110, 100, 185, 0.2)), transparent 45%);
  opacity: 0.58;
  pointer-events: none;
}

.beta-theater-project-page .theater-project-card:hover {
  border-color: var(--project-card-accent-soft, rgba(110, 100, 185, 0.26));
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.18), 0 0 0 1px var(--project-card-accent-soft, rgba(110, 100, 185, 0.18));
  transform: translateY(-6px);
}

.beta-theater-project-page .script-card-glow {
  position: absolute;
  inset: auto -10% -14% 24%;
  height: 42%;
  border-radius: 999px;
  background: radial-gradient(ellipse, rgba(81, 147, 183, 0.1), transparent 70%);
  filter: blur(18px);
  opacity: 0.78;
  pointer-events: none;
}

.beta-theater-project-page .script-card-scanline {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 34%),
    repeating-linear-gradient(180deg, transparent, transparent 22px, rgba(255, 255, 255, 0.02) 23px);
  opacity: 0.55;
  pointer-events: none;
}

.beta-theater-project-page .theater-project-card .script-card-scanline {
  display: block;
}

.beta-theater-project-page .theater-project-card .script-card-glow {
  background: radial-gradient(ellipse, var(--project-card-accent-soft, rgba(110, 100, 185, 0.2)), transparent 70%);
  opacity: 0.78;
}

.beta-theater-project-page .card-action-stack {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
  transform: translateX(4px);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.beta-theater-project-page .project-card-open-hit {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  cursor: pointer;
}

.beta-theater-project-page .project-card-open-hit:focus-visible {
  outline: 2px solid rgba(111, 183, 255, 0.82);
  outline-offset: -3px;
}

.beta-theater-project-page .script-card:hover .card-action-stack,
.beta-theater-project-page .script-card:focus-within .card-action-stack {
  opacity: 1;
  transform: translateX(0);
}

.beta-theater-project-page .card-action-btn {
  position: relative;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  color: rgba(147, 163, 182, 0.72);
  background: transparent;
  cursor: pointer;
}

.beta-theater-project-page .card-action-btn:hover {
  color: var(--theater-text-strong);
  border-color: var(--theater-line-strong);
  background: var(--theater-accent-soft);
  transform: translateY(-1px);
}

.beta-theater-project-page .card-action-btn.danger:hover {
  color: var(--theater-danger);
  border-color: rgba(232, 160, 160, 0.28);
  background: rgba(232, 160, 160, 0.12);
}

.beta-theater-project-page .card-action-btn::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  min-width: 42px;
  max-width: 92px;
  padding: 5px 8px;
  border: 1px solid rgba(118, 165, 194, 0.24);
  border-radius: 7px;
  color: var(--theater-text-strong);
  background: rgba(8, 15, 28, 0.92);
  box-shadow: 0 10px 24px rgba(2, 6, 23, 0.28);
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -2px);
  transition:
    opacity 0.14s ease,
    transform 0.14s ease;
}

.beta-theater-project-page .card-action-btn:hover::after,
.beta-theater-project-page .card-action-btn:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

.beta-theater-project-page .card-action-btn svg {
  width: 15px;
  height: 15px;
}

.beta-theater-project-page .script-card-body {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 26px 28px 10px;
}

.beta-theater-project-page .quote-mark {
  margin-bottom: 8px;
  color: rgba(201, 211, 225, 0.11);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 52px;
  font-weight: 700;
  line-height: 0.8;
}

.beta-theater-project-page .script-card-body h3 {
  margin: 0;
  display: -webkit-box;
  overflow: hidden;
  color: var(--theater-text-strong);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.4;
  word-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.beta-theater-project-page .script-card-footer {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.035);
  background: transparent;
}

.beta-theater-project-page .theater-project-card .script-card-footer {
  border-top-color: rgba(255, 255, 255, 0.035);
  background: rgba(0, 0, 0, 0.16);
}

.beta-theater-project-page .script-owner {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgb(147, 163, 182);
  font-size: 13px;
}

.beta-theater-project-page .script-owner svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.beta-theater-project-page .owner-name {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.beta-theater-project-page .project-meta {
  flex-shrink: 0;
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 20px;
  max-width: 60%;
}

.beta-theater-project-page .meta-block {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

.beta-theater-project-page .meta-value {
  max-width: 92px;
  display: inline-block;
  overflow: hidden;
  color: var(--theater-text-strong);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.beta-theater-project-page .meta-copy {
  color: rgba(147, 163, 182, 0.72);
  font-size: 12px;
}

.beta-theater-project-page .page-ellipsis {
  min-width: 26px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(147, 163, 182, 0.66);
  font-size: 12px;
  line-height: 1;
  user-select: none;
}

.beta-theater-project-page .pagination-shell {
  position: absolute;
  right: 18px;
  bottom: 12px;
  left: 0;
  z-index: 8;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.beta-theater-project-page .pagination-actions {
  min-height: 46px;
  max-width: min(100%, 520px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 8px 10px;
  border: 1px solid rgba(118, 145, 176, 0.16);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(12, 21, 36, 0.84), rgba(5, 12, 23, 0.82)), rgba(8, 15, 28, 0.78);
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.28),
    inset 0 1px rgba(255, 255, 255, 0.035);
  pointer-events: auto;
  backdrop-filter: blur(12px);
}

.beta-theater-project-page .ghost-btn,
.beta-theater-project-page .page-number-btn {
  min-height: 30px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--theater-text-soft);
  background: transparent;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.beta-theater-project-page .page-nav-btn {
  padding: 0 12px;
  white-space: nowrap;
}

.beta-theater-project-page .page-number-btn {
  min-width: 30px;
  padding: 0 9px;
  color: rgba(201, 211, 225, 0.72);
}

.beta-theater-project-page .ghost-btn:hover:not(:disabled),
.beta-theater-project-page .page-number-btn:hover:not(:disabled) {
  color: var(--theater-text-strong);
  border-color: rgba(127, 184, 212, 0.18);
  background: rgba(255, 255, 255, 0.06);
  transform: translateY(-1px);
}

.beta-theater-project-page .page-number-btn.active {
  color: var(--theater-text-strong);
  border-color: rgba(127, 184, 212, 0.24);
  background: linear-gradient(180deg, rgba(127, 184, 212, 0.2), rgba(81, 147, 183, 0.11)), rgba(127, 184, 212, 0.08);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.05),
    0 4px 12px rgba(0, 0, 0, 0.16);
}

.beta-theater-project-page .ghost-btn:disabled,
.beta-theater-project-page .page-number-btn:disabled {
  cursor: not-allowed;
  opacity: 0.42;
  transform: none;
}

.beta-theater-project-page .page-number-btn.active:disabled {
  opacity: 1;
}

.beta-theater-project-page .floating-project-search {
  position: absolute;
  right: 28px;
  bottom: 72px;
  z-index: 14;
  width: 48px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  overflow: hidden;
  padding-left: 46px;
  border: 1px solid rgba(118, 145, 176, 0.16);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(12, 21, 36, 0.84), rgba(5, 12, 23, 0.82)), rgba(8, 15, 28, 0.78);
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.28),
    inset 0 1px rgba(255, 255, 255, 0.035);
  backdrop-filter: blur(12px);
  transition:
    width 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.22s ease,
    box-shadow 0.22s ease;
}

.beta-theater-project-page .floating-project-search:hover,
.beta-theater-project-page .floating-project-search:focus-within,
.beta-theater-project-page .floating-project-search.active {
  width: min(400px, calc(100% - 56px));
  border-color: rgba(127, 184, 212, 0.24);
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.32),
    inset 0 1px rgba(255, 255, 255, 0.04);
}

.beta-theater-project-page .floating-search-trigger,
.beta-theater-project-page .floating-search-clear,
.beta-theater-project-page .floating-search-submit {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border: 0;
  color: rgba(201, 211, 225, 0.72);
  background: transparent;
  cursor: pointer;
}

.beta-theater-project-page .floating-search-trigger {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

.beta-theater-project-page .floating-search-icon {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  transform: translate(-1px, -1px);
}

.beta-theater-project-page .floating-search-icon svg {
  width: 21px;
  height: 21px;
}

.beta-theater-project-page .floating-project-search:hover .floating-search-icon,
.beta-theater-project-page .floating-project-search:focus-within .floating-search-icon,
.beta-theater-project-page .floating-project-search.active .floating-search-icon {
  color: var(--theater-text-strong);
  transform: translate(-1px, -1px) scale(0.94);
}

.beta-theater-project-page .floating-search-input {
  min-width: 0;
  width: 100%;
  height: 46px;
  border: 0;
  outline: none;
  color: var(--theater-text-strong);
  background: transparent;
  font-size: 14px;
  font-weight: 700;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.16s ease 0.08s;
}

.beta-theater-project-page .floating-project-search:hover .floating-search-input,
.beta-theater-project-page .floating-project-search:focus-within .floating-search-input,
.beta-theater-project-page .floating-project-search.active .floating-search-input {
  opacity: 1;
  visibility: visible;
}

.beta-theater-project-page .floating-search-input::placeholder {
  color: rgba(147, 163, 182, 0.68);
}

.beta-theater-project-page .floating-search-clear {
  width: 40px;
  color: rgba(201, 211, 225, 0.62);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(6px);
}

.beta-theater-project-page .floating-search-clear.visible,
.beta-theater-project-page .floating-project-search:hover .floating-search-clear.visible,
.beta-theater-project-page .floating-project-search:focus-within .floating-search-clear.visible,
.beta-theater-project-page .floating-project-search.active .floating-search-clear.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
}

.beta-theater-project-page .floating-search-clear svg {
  width: 17px;
  height: 17px;
}

.beta-theater-project-page .floating-search-submit {
  width: 54px;
  height: 30px;
  margin-right: 8px;
  border: 1px solid rgba(127, 184, 212, 0.2);
  border-radius: 9px;
  color: rgba(226, 234, 244, 0.9);
  background: rgba(27, 47, 72, 0.72);
  font-size: 13px;
  font-weight: 800;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(8px);
}

.beta-theater-project-page .floating-project-search:hover .floating-search-submit,
.beta-theater-project-page .floating-project-search:focus-within .floating-search-submit,
.beta-theater-project-page .floating-project-search.active .floating-search-submit {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
}

.beta-theater-project-page .floating-search-submit:hover {
  color: #fff;
  border-color: rgba(127, 184, 212, 0.34);
}

.beta-theater-project-page .theater-empty-card {
  cursor: default;
  background:
    radial-gradient(circle at 100% 0%, rgba(127, 184, 212, 0.12), transparent 60%),
    linear-gradient(140deg, rgba(18, 30, 46, 0.92), rgba(10, 20, 34, 0.96));
}

.beta-theater-project-page .theater-list-status {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 12px;
  padding: 6px 12px;
  border: 1px solid rgba(118, 145, 176, 0.16);
  border-radius: 8px;
  color: rgba(201, 211, 225, 0.78);
  background: rgba(8, 15, 28, 0.72);
  font-size: 12px;
}

.beta-theater-project-page .theater-list-status.error {
  color: #f3b7b7;
  border-color: rgba(232, 160, 160, 0.2);
  background: rgba(79, 31, 42, 0.22);
}

.beta-theater-project-page .theater-list-status button {
  min-height: 24px;
  padding: 0 9px;
  border: 1px solid currentColor;
  border-radius: 6px;
  color: inherit;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.beta-theater-project-page .theater-list-state {
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  padding: 36px;
  border: 1px solid rgba(118, 145, 176, 0.14);
  border-radius: 14px;
  color: var(--theater-text-soft);
  background: linear-gradient(145deg, rgba(17, 27, 44, 0.58), rgba(8, 15, 28, 0.72));
  text-align: center;
}

.beta-theater-project-page .theater-list-state strong {
  color: var(--theater-text-strong);
  font-size: 16px;
  font-weight: 600;
}

.beta-theater-project-page .theater-list-state small {
  max-width: 420px;
  color: var(--theater-text-soft);
  font-size: 13px;
  line-height: 1.6;
}

.beta-theater-project-page .theater-list-spinner {
  width: 28px;
  height: 28px;
  border: 2px solid rgba(127, 184, 212, 0.18);
  border-top-color: rgba(159, 226, 255, 0.92);
  border-radius: 50%;
  animation: theater-list-spin 0.8s linear infinite;
}

.beta-theater-project-page .theater-list-state-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(232, 160, 160, 0.28);
  border-radius: 50%;
  color: #f3b7b7;
  background: rgba(232, 160, 160, 0.1);
  font-size: 16px;
  font-weight: 700;
}

.beta-theater-project-page .theater-list-state button {
  min-width: 88px;
  min-height: 34px;
  margin-top: 4px;
  padding: 0 14px;
  border: 1px solid rgba(127, 184, 212, 0.24);
  border-radius: 8px;
  color: var(--theater-text-strong);
  background: rgba(27, 47, 72, 0.72);
  font-size: 13px;
  cursor: pointer;
}

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

.beta-theater-project-page .theater-empty-card .script-card-scanline {
  display: block;
}

.beta-theater-project-page .theater-empty-card .script-card-glow {
  opacity: 0.62;
}

.beta-theater-project-page .empty-project-body {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 0;
  display: grid;
  align-content: center;
  gap: 10px;
  padding: 34px 28px 10px;
}

.beta-theater-project-page .empty-project-body span {
  color: rgba(127, 184, 212, 0.72);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.18em;
}

.beta-theater-project-page .empty-project-body h3 {
  margin: 0;
  color: var(--theater-text-strong);
  font-size: 24px;
  font-weight: 650;
}

.beta-theater-project-page .empty-project-body p {
  margin: 0;
  max-width: 320px;
  color: var(--theater-text-soft);
  line-height: 1.7;
}

.beta-theater-project-page .empty-project-footer {
  justify-content: flex-start;
  gap: 24px;
  padding: 20px 28px;
  border-top-color: rgba(255, 255, 255, 0.035);
  color: rgba(201, 211, 225, 0.78);
  background: transparent;
  font-size: 14px;
}

@media (max-width: 860px) {
  .beta-theater-topbar {
    padding: 14px 18px;
  }

  .theater-project-container {
    padding: 0 14px 18px;
  }

  .beta-theater-project-page .selection-shell {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .beta-theater-project-page .project-view-sidebar {
    height: auto;
    min-height: auto;
    flex-direction: row;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 14px 0 10px;
  }

  .beta-theater-project-page .view-menu-card {
    display: flex;
    flex-shrink: 0;
    gap: 6px;
    padding: 5px;
  }

  .beta-theater-project-page .view-menu-card-utility {
    margin-top: 0;
  }

  .beta-theater-project-page .view-menu-item {
    min-width: 96px;
    width: auto;
    grid-template-columns: 30px minmax(0, auto);
    padding: 6px 10px 6px 6px;
    white-space: nowrap;
  }

  .beta-theater-project-page .view-menu-indicator {
    display: none;
  }

  .beta-theater-project-page .view-menu-icon {
    width: 30px;
    height: 30px;
    border-radius: 11px;
  }

  .beta-theater-project-page .project-view-content {
    padding: 0 8px 86px 0;
  }

  .beta-theater-project-page .project-grid {
    grid-template-columns: 1fr;
  }

  .beta-theater-project-page .pagination-shell {
    right: 8px;
    bottom: 10px;
  }

  .beta-theater-project-page .floating-project-search {
    right: 18px;
    bottom: 64px;
  }
}

@media (max-width: 980px) {
  .ai-studio-page .studio-center-panel {
    padding: 18px 0 24px;
  }

  .ai-studio-page .studio-filter-bar {
    position: relative;
    top: auto;
    right: auto;
    align-self: stretch;
    justify-content: flex-end;
    margin: 0 0 8px;
    overflow-x: auto;
  }

  .ai-studio-page .studio-filter-shell {
    flex: 0 0 auto;
  }

  .ai-studio-page .studio-queue-panel,
  .ai-studio-page .studio-queue-panel.expanded {
    position: relative;
    top: auto;
    right: auto;
    align-self: flex-end;
    width: min(300px, 100%);
    margin: 0 0 8px;
  }

  .ai-studio-page .studio-history-list {
    padding-bottom: 0;
  }

  .ai-studio-page .studio-composer-dock {
    position: relative;
    bottom: auto;
    left: auto;
    width: 100%;
    margin-top: 12px;
    pointer-events: auto;
    transform: none;
  }

  .ai-studio-page .studio-composer-wrap {
    width: 100%;
    max-width: none;
    max-height: none;
  }
}

/* Storyboard v61: restore the Tuyaa result-card proportions after v60. */
.theater-project-detail-page .shot-head {
  align-items: center;
}

.theater-project-detail-page .shot-actions {
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 8px;
}

.theater-project-detail-page .shot-tool-group {
  flex-wrap: nowrap;
}

.theater-project-detail-page .shot-list {
  padding: 0 6px 0 0;
}

.theater-project-detail-page .shot-actions .sleek-split-btn {
  padding-inline: 14px;
}

.theater-project-detail-page .duration-select {
  width: 110px;
  min-width: 110px;
}

.theater-project-detail-page .seedance-shot-card {
  overflow: visible;
  padding: 24px 28px;
  border-radius: 12px;
  color: rgb(122, 139, 158);
  background: rgba(17, 24, 39, 0.72);
}

.theater-project-detail-page .seedance-shot-card .shot-card-main {
  grid-template-columns: clamp(132px, 10vw, 168px) minmax(0, 1fr);
  align-items: start;
  gap: 28px;
}

.theater-project-detail-page .seedance-generate-btn {
  width: 100%;
  min-width: 0;
  height: auto;
  min-height: 0;
  aspect-ratio: 1;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 0;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  color: rgba(148, 163, 184, 0.78);
  background: rgba(8, 13, 24, 0.72);
}

.theater-project-detail-page .seedance-generate-btn:hover:not(:disabled) {
  border-color: rgba(162, 118, 255, 0.42);
  background: rgba(13, 18, 31, 0.9);
  box-shadow: 0 14px 32px rgba(2, 6, 23, 0.22);
}

.theater-project-detail-page .seedance-generate-btn.is-pending-final,
.theater-project-detail-page .seedance-generate-btn.is-finalized {
  border-color: rgba(148, 163, 184, 0.18);
  background: rgba(8, 13, 24, 0.72);
}

.theater-project-detail-page .seedance-generate-btn > svg {
  width: 28px;
  height: 28px;
}

.theater-project-detail-page .seedance-generate-btn > .shot-preview-label {
  min-width: 0;
  width: auto;
  height: auto;
  display: inline-flex;
  padding: 5px 8px;
  text-align: center;
}

.theater-project-detail-page .seedance-duration-btn {
  flex: 0 0 110px;
  min-height: 36px;
  height: 36px;
  justify-content: flex-start;
  gap: 8px;
  padding: 0 15px 0 10px;
  font-size: 15px;
  cursor: pointer;
}

.theater-project-detail-page .storyboard-duration-shell {
  position: relative;
  z-index: 12;
  width: 110px;
  min-width: 110px;
  flex: 0 0 110px;
}

.theater-project-detail-page .storyboard-duration-shell.is-open {
  z-index: 48;
}

.theater-project-detail-page .storyboard-duration-shell .seedance-duration-btn {
  width: 110px;
  border-color: rgba(96, 165, 250, 0.2);
  background: rgba(8, 13, 24, 0.72);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.025);
}

.theater-project-detail-page .storyboard-duration-shell .seedance-duration-btn:hover:not(:disabled),
.theater-project-detail-page .storyboard-duration-shell.is-open .seedance-duration-btn {
  border-color: rgba(162, 118, 255, 0.38);
  background: rgba(13, 18, 31, 0.88);
}

.theater-project-detail-page .storyboard-duration-shell .seedance-duration-btn > svg:first-child {
  width: 16px;
  height: 16px;
  stroke-width: 1.9;
  color: rgba(170, 180, 196, 0.9);
}

.theater-project-detail-page .storyboard-duration-shell .ui-select__value {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}

.theater-project-detail-page .duration-select-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 120;
  width: 110px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid rgba(162, 118, 255, 0.24);
  border-radius: 10px;
  background: rgba(12, 16, 28, 0.98);
  box-shadow: 0 18px 44px rgba(2, 6, 23, 0.44), 0 0 0 1px rgba(162, 118, 255, 0.05);
  scrollbar-width: none;
}

.theater-project-detail-page .duration-select-panel::-webkit-scrollbar {
  display: none;
}

.theater-project-detail-page .duration-select-panel.opens-up {
  top: auto;
  bottom: calc(100% + 6px);
}

.theater-project-detail-page .duration-select-option {
  width: 100%;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7px 8px;
  border: 0;
  border-radius: 7px;
  color: rgba(201, 211, 225, 0.82);
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
  cursor: pointer;
}

.theater-project-detail-page .duration-select-option:hover,
.theater-project-detail-page .duration-select-option:focus-visible {
  outline: 0;
  color: rgba(248, 250, 252, 0.98);
  background: rgba(162, 118, 255, 0.1);
}

.theater-project-detail-page .duration-select-option.is-active {
  color: rgba(221, 214, 254, 0.98);
  background: rgba(162, 118, 255, 0.16);
}

.theater-project-detail-page .storyboard-duration-shell.is-saving .mini-spinner {
  width: 14px;
  height: 14px;
  margin-left: auto;
}

.theater-project-detail-page[data-theater-theme="light"] .storyboard-duration-shell .seedance-duration-btn {
  border-color: rgba(51, 65, 85, 0.14);
  color: #475569;
  background: rgba(248, 250, 252, 0.92);
}

.theater-project-detail-page[data-theater-theme="light"] .storyboard-duration-shell .seedance-duration-btn:hover:not(:disabled),
.theater-project-detail-page[data-theater-theme="light"] .storyboard-duration-shell.is-open .seedance-duration-btn {
  border-color: rgba(37, 99, 235, 0.42);
  color: #1d4ed8;
  background: rgba(239, 246, 255, 0.96);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.theater-project-detail-page[data-theater-theme="light"] .duration-select-panel {
  border-color: rgba(79, 70, 229, 0.22);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 24px 60px rgba(45, 64, 96, 0.16), 0 0 0 1px rgba(79, 70, 229, 0.06);
}

.theater-project-detail-page[data-theater-theme="light"] .duration-select-option {
  color: #334155;
}

.theater-project-detail-page[data-theater-theme="light"] .duration-select-option:hover,
.theater-project-detail-page[data-theater-theme="light"] .duration-select-option:focus-visible,
.theater-project-detail-page[data-theater-theme="light"] .duration-select-option.is-active {
  color: #3730a3;
  background: rgba(79, 70, 229, 0.1);
}

.theater-project-detail-page .seedance-duration-select {
  width: 110px;
  min-width: 110px;
  height: 36px;
  padding: 0 30px 0 12px;
  border: 1px solid rgba(96, 165, 250, 0.2);
  border-radius: 9px;
  outline: 0;
  color: var(--theater-text-soft, #93a3b6);
  background: rgba(8, 13, 24, 0.72);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.theater-project-detail-page .seedance-duration-select:focus-visible {
  border-color: rgba(196, 181, 253, 0.88);
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.16);
}

.theater-project-detail-page .seedance-duration-btn svg:last-child {
  width: 12px;
  height: 12px;
  margin-left: auto;
}

.theater-project-detail-page .shot-card-tools button:disabled,
.theater-project-detail-page .seedance-duration-btn:disabled {
  opacity: 0.42;
  cursor: default;
}

.theater-project-detail-page .seedance-prompt-shell,
.theater-project-detail-page .seedance-prompt-shell.is-editing {
  min-width: 0;
  margin: -6px -8px 0;
  padding: 6px 8px;
  background: transparent;
}

.theater-project-detail-page .seedance-prompt-view {
  width: 100%;
  min-height: 9em;
  max-height: 9em;
  display: block;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: 5px;
  color: rgb(122, 139, 158);
  background: transparent;
  text-align: left;
  cursor: text;
}

.theater-project-detail-page .seedance-prompt-view p {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
}

.theater-project-detail-page .seedance-prompt-shell .shot-prompt-textarea {
  width: 100%;
  height: 450px;
  min-height: 50.4px;
  max-height: 450px;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  border: 0;
  border-radius: 0;
  resize: none;
  background: transparent;
}

.theater-project-detail-page .seedance-edit-fields {
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 12px;
  margin-top: 14px;
  padding: 0;
  background: transparent;
}

.theater-project-detail-page .seedance-asset-section {
  margin-top: 18px;
  padding: 18px 0 0;
  border-top: 1px solid rgba(148, 163, 184, 0.1);
}

.theater-project-detail-page .storyboard-asset-chip {
  height: 31px;
  max-width: min(100%, 260px);
  align-items: center;
}

.theater-project-detail-page .storyboard-asset-chip-main {
  height: 29px;
  gap: 6px;
  padding: 0 9px 0 10px;
}

.theater-project-detail-page .storyboard-asset-chip-main > span {
  gap: 0;
}

.theater-project-detail-page .storyboard-asset-chip-main strong {
  font-size: 12px;
  font-weight: 500;
}

.theater-project-detail-page .storyboard-asset-chip-main small {
  display: none;
}

.theater-project-detail-page .storyboard-asset-chip-remove {
  right: 3px;
  width: 20px;
  height: 20px;
}

.theater-project-detail-page .seedance-assets-empty {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  color: rgba(100, 116, 139, 0.84);
  font-size: 12px;
}

.theater-project-detail-page .seedance-delete-btn {
  opacity: 0;
}

.theater-project-detail-page .seedance-shot-item:hover .seedance-delete-btn,
.theater-project-detail-page .seedance-delete-btn:focus-visible,
.theater-project-detail-page .seedance-shot-item.is-editing .seedance-delete-btn,
.theater-project-detail-page .seedance-shot-item.is-editing .shot-card-tools {
  opacity: 1;
}

.theater-project-detail-page .seedance-prompt-view:focus-visible,
.theater-project-detail-page .seedance-generate-btn:focus-visible,
.theater-project-detail-page .seedance-duration-btn:focus-visible,
.theater-project-detail-page .shot-card-tools button:focus-visible,
.theater-project-detail-page .shot-insert-btn:focus-visible {
  outline: 2px solid rgba(196, 181, 253, 0.88);
  outline-offset: 2px;
}

.theater-project-detail-page .shot-timeline-item:focus-within .shot-insert-btn.is-up {
  top: 9px;
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

.theater-project-detail-page .shot-timeline-item:focus-within .shot-insert-btn.is-down {
  top: 73px;
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

.theater-project-detail-page .storyboard-resplit-inline {
  min-width: 0;
  min-height: 40px;
  flex: 0 0 40px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 6px 8px 54px;
  padding: 0 12px;
  border: 1px solid rgba(162, 118, 255, 0.24);
  border-radius: 8px;
  color: rgba(203, 213, 225, 0.9);
  background: rgba(124, 58, 237, 0.08);
}

.theater-project-detail-page .storyboard-resplit-inline strong,
.theater-project-detail-page .storyboard-resplit-inline b {
  flex: 0 0 auto;
  font-size: 12px;
}

.theater-project-detail-page .storyboard-resplit-inline span:not(.mini-spinner) {
  min-width: 0;
  overflow: hidden;
  color: rgba(148, 163, 184, 0.82);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.theater-project-detail-page .storyboard-resplit-inline b {
  margin-left: auto;
  color: #c4b5fd;
}

.theater-project-detail-page .storyboard-initial-processing .shot-list {
  padding-top: 28px;
}

.theater-project-detail-page .storyboard-processing-shot {
  min-height: 92px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
}

.theater-project-detail-page .storyboard-processing-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #c4b5fd;
  background: rgba(124, 58, 237, 0.12);
}

.theater-project-detail-page .storyboard-processing-icon svg {
  width: 20px;
  height: 20px;
}

.theater-project-detail-page .storyboard-processing-shot > div {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.theater-project-detail-page .storyboard-processing-shot strong {
  color: #e7edf5;
  font-size: 14px;
}

.theater-project-detail-page .storyboard-processing-shot small {
  overflow: hidden;
  color: rgba(148, 163, 184, 0.78);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.theater-project-detail-page .storyboard-processing-shot > b {
  color: #c4b5fd;
  font-size: 12px;
}

.theater-project-detail-page .storyboard-processing-item .shot-index .mini-spinner {
  width: 14px;
  height: 14px;
  flex-basis: 14px;
}

.storyboard-split-skill-panel.is-submitting {
  cursor: progress;
}

.storyboard-split-skill-panel.is-submitting :disabled {
  cursor: progress;
}

@media (max-width: 760px) {
  .theater-project-detail-page .seedance-shot-card {
    padding: 18px;
  }

  .theater-project-detail-page .seedance-shot-card .shot-card-main {
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 14px;
  }

  .theater-project-detail-page .seedance-edit-fields {
    grid-template-columns: 1fr;
  }
}

@media (hover: none), (pointer: coarse) {
  .theater-project-detail-page .shot-insert-btn.is-up {
    top: 9px;
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
  }

  .theater-project-detail-page .shot-insert-btn.is-down {
    top: 73px;
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
  }

  .theater-project-detail-page .shot-card-tools,
  .theater-project-detail-page .seedance-delete-btn {
    opacity: 1;
  }
}

/* Storyboard v63 mobile workbench. */
@media (max-width: 760px) {
  .theater-project-detail-page {
    height: 100dvh;
    min-height: 100dvh;
  }

  .theater-project-detail-page .topbar {
    height: 60px;
    min-height: 60px;
    gap: 10px;
    padding: 0 12px;
  }

  .theater-project-detail-page .topbar .icon-btn {
    width: 38px;
    min-width: 38px;
    height: 38px;
  }

  .theater-project-detail-page .topbar .brand {
    min-width: 0;
    height: 46px;
    gap: 8px;
    padding: 0;
  }

  .theater-project-detail-page .topbar .theme-toggle,
  .theater-project-detail-page .topbar .team-chip {
    height: 38px;
    min-height: 38px;
    padding: 0 10px;
  }

  .theater-project-detail-page .topbar .theme-toggle {
    width: 38px;
    min-width: 38px;
    flex: 0 0 38px;
    justify-content: center;
    padding: 0;
    font-size: 0;
  }

  .theater-project-detail-page .topbar .team-chip {
    flex: 0 1 auto;
    font-size: 12px;
    white-space: nowrap;
  }

  .theater-project-detail-page .detail-container,
  .theater-project-detail-page .theater-detail-layout {
    height: calc(100dvh - 60px);
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 52px minmax(0, 1fr);
    gap: 8px;
    padding: 8px;
  }

  .theater-project-detail-page .project-rail.side-nav {
    width: 100%;
    min-width: 0;
    height: 52px;
    min-height: 0;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px;
    border-radius: 10px;
  }

  .theater-project-detail-page .project-rail .side-nav-item {
    width: 74px;
    min-width: 74px;
    height: 42px;
    flex: 0 0 74px;
    grid-template-columns: 18px minmax(0, auto);
    grid-template-rows: 1fr;
    align-content: center;
    justify-content: center;
    justify-items: center;
    gap: 6px;
  }

  .theater-project-detail-page .project-rail .side-nav-item svg {
    width: 18px;
    height: 18px;
  }

  .theater-project-detail-page .project-rail .side-nav-item span {
    height: 16px;
    line-height: 16px;
    white-space: nowrap;
  }

  .theater-project-detail-page .project-rail .side-nav-stat {
    margin-top: 0;
    margin-left: auto;
  }

  .theater-project-detail-page .project-stage,
  .theater-project-detail-page .storyboard-workspace {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    border-radius: 12px;
  }

  .theater-project-detail-page .episode-tabs-panel {
    grid-template-columns: 30px minmax(0, 1fr) 30px;
    gap: 6px;
    padding: 8px 10px;
  }

  .theater-project-detail-page .episode-tabs-nav {
    width: 30px;
    height: 30px;
  }

  .theater-project-detail-page .episode-tab {
    min-width: 68px;
    height: 32px;
    padding: 0 10px;
  }

  .theater-project-detail-page .episode-detail-panel {
    min-width: 0;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .theater-project-detail-page .script-sidebar,
  .theater-project-detail-page .script-sidebar.collapsed {
    width: 100%;
    height: 28vh;
    min-height: 210px;
    flex: 0 0 28vh;
  }

  .theater-project-detail-page .script-pane {
    width: 100%;
    min-width: 0;
    padding: 14px 12px 16px;
  }

  .theater-project-detail-page .script-pane > header {
    margin-bottom: 12px;
    padding-bottom: 12px;
  }

  .theater-project-detail-page .shot-pane {
    width: 100%;
    min-width: 0;
    padding: 14px 10px;
    gap: 12px;
    overflow: hidden;
  }

  .theater-project-detail-page .shot-head {
    width: 100%;
    min-width: 0;
    gap: 10px;
    overflow: hidden;
  }

  .theater-project-detail-page .shot-actions {
    width: 100%;
    min-width: 0;
    align-items: center;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 4px;
  }

  .theater-project-detail-page .shot-tool-group {
    max-width: none;
    flex: 0 0 auto;
    overflow: visible;
  }

  .theater-project-detail-page .shot-list {
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 2px;
  }

  .theater-project-detail-page .shot-timeline-item,
  .storyboard-dialog-overlay .shot-timeline-item {
    grid-template-columns: 30px minmax(0, 1fr);
    padding-bottom: 22px;
  }

  .theater-project-detail-page .seedance-shot-card {
    width: 100%;
    min-width: 0;
    padding: 16px;
  }

  .theater-project-detail-page .seedance-shot-card .shot-card-main {
    width: 100%;
    min-width: 0;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 12px;
  }

  .theater-project-detail-page .seedance-shot-item.is-editing .shot-card-main {
    grid-template-columns: minmax(0, 1fr);
  }

  .theater-project-detail-page .seedance-shot-item.is-editing .shot-preview-wrap {
    display: none;
  }

  .theater-project-detail-page .seedance-generate-btn {
    width: 72px;
    height: 128px;
  }

  .theater-project-detail-page .seedance-shot-card .shot-card-content,
  .theater-project-detail-page .seedance-shot-card .shot-card-head,
  .theater-project-detail-page .seedance-shot-card .shot-head-tools,
  .theater-project-detail-page .seedance-prompt-shell,
  .theater-project-detail-page .seedance-prompt-view,
  .theater-project-detail-page .seedance-asset-section {
    min-width: 0;
    max-width: 100%;
  }

  .theater-project-detail-page .seedance-shot-card .shot-card-head {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
  }

  .theater-project-detail-page .seedance-shot-card .shot-head-tools {
    width: 100%;
    justify-content: space-between;
  }

  .theater-project-detail-page .duration-select,
  .theater-project-detail-page .seedance-duration-select {
    width: 96px;
    min-width: 96px;
  }

  .theater-project-detail-page .seedance-prompt-view p {
    overflow-wrap: anywhere;
  }

  .theater-project-detail-page .seedance-asset-section {
    margin-top: 14px;
    padding: 14px 0 0;
  }
}

.modal-storyboardDelete {
  width: min(520px, calc(100vw - 32px));
}

.modal-storyboardDelete .modal-body {
  padding: 22px 24px;
}

.modal-storyboardDelete .modal-body p {
  margin: 0;
  color: rgba(203, 213, 225, 0.84);
  line-height: 1.7;
}

.modal-storyboardDelete .modal-primary-btn {
  border-color: rgba(248, 113, 113, 0.44);
  color: #ffe4e6;
  background: rgba(127, 29, 29, 0.62);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.05);
}

.modal-storyboardDelete .modal-primary-btn:hover:not(:disabled) {
  border-color: rgba(248, 113, 113, 0.7);
  background: rgba(153, 27, 27, 0.76);
}

/* Video super resolution: current production project layer and task workspace. */
.beta-super-project-page .super-project-list-panel {
  position: relative;
  min-width: 0;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.beta-super-project-page .super-project-scroll {
  height: 100%;
  min-height: 0;
  overflow: auto;
  padding: 20px 8px 116px 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(127, 184, 212, 0.42) rgba(4, 10, 20, 0.46);
}

.beta-super-project-page .super-project-card {
  background:
    radial-gradient(circle at 80% 8%, rgba(56, 189, 248, 0.09), transparent 36%),
    linear-gradient(145deg, rgba(17, 27, 44, 0.88), rgba(8, 15, 28, 0.98));
}

.beta-super-project-page .create-card .create-emblem > svg {
  width: 42px;
  height: 42px;
  color: #f8fafc;
  filter: drop-shadow(0 0 14px rgba(56, 189, 248, 0.48));
}

.beta-super-project-page .state-panel button {
  min-width: 84px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(127, 184, 212, 0.28);
  border-radius: 8px;
  color: #dbeafe;
  background: rgba(17, 37, 58, 0.78);
}

.bootstrap-sync-guard {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 84px;
  color: #dbeafe;
  background: rgba(5, 10, 20, 0.2);
  backdrop-filter: blur(1.5px);
  cursor: wait;
}

.bootstrap-sync-guard > span {
  width: 16px;
  height: 16px;
  margin: 2px 9px 0 0;
  border: 2px solid rgba(147, 197, 253, 0.24);
  border-top-color: #93c5fd;
  border-radius: 50%;
  animation: studio-spin 0.7s linear infinite;
}

.bootstrap-sync-guard > strong {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

.vsr-page {
  --vsr-bg: #0a0f1d;
  --vsr-surface: rgba(16, 22, 38, 0.82);
  --vsr-surface-strong: rgba(18, 25, 43, 0.94);
  --vsr-card: rgba(13, 20, 36, 0.9);
  --vsr-line: rgba(162, 118, 255, 0.15);
  --vsr-line-strong: rgba(111, 183, 255, 0.38);
  --vsr-text: #f4f7fb;
  --vsr-muted: #98a4b8;
  --vsr-soft: #c5cfdf;
  --vsr-accent: #6fb7ff;
  min-height: 100vh;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--vsr-text);
  background:
    radial-gradient(circle at 18% 0%, rgba(162, 118, 255, 0.09), transparent 34%),
    radial-gradient(circle at 92% 18%, rgba(56, 189, 248, 0.06), transparent 36%),
    linear-gradient(180deg, #080d19 0%, var(--vsr-bg) 46%, #080d18 100%);
}

.vsr-page .topbar {
  flex: 0 0 auto;
}

.vsr-page button,
.vsr-page select,
.vsr-page input {
  letter-spacing: 0;
}

.vsr-page button svg,
.super-project-modal button svg,
.super-pricing-modal button svg,
.super-preview-modal button svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.billing-rule-btn,
.create-task-btn {
  min-width: 88px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 14px;
  border: 1px solid rgba(162, 118, 255, 0.24);
  border-radius: 8px;
  color: var(--vsr-soft);
  background: rgba(15, 20, 35, 0.78);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), 0 8px 22px rgba(0, 0, 0, 0.16);
  font-size: 13px;
  font-weight: 700;
}

.billing-rule-btn:hover:not(:disabled),
.create-task-btn:hover:not(:disabled) {
  border-color: rgba(190, 166, 255, 0.5);
  color: #fff;
  transform: translateY(-1px);
}

.create-task-btn.is-cancel {
  min-width: 68px;
  border-color: rgba(248, 113, 113, 0.56);
  color: #fff;
  background: linear-gradient(180deg, rgba(220, 38, 38, 0.92), rgba(153, 27, 27, 0.92));
}

.vsr-container {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0);
  gap: 36px;
  padding: 24px 36px;
  transition: grid-template-columns 0.52s cubic-bezier(0.22, 1, 0.36, 1);
}

.vsr-page.panel-open .vsr-container {
  grid-template-columns: minmax(0, 1fr) minmax(440px, 48vw);
}

.super-task-board {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: auto;
  padding: 0 2px 42px 0;
  scrollbar-width: none;
}

.super-task-board::-webkit-scrollbar {
  display: none;
}

.super-board-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 2px 2px 4px;
}

.super-board-head > div:first-child {
  min-width: 0;
}

.super-board-head span {
  color: #a7b7ff;
  font-size: 11px;
  font-weight: 800;
}

.super-board-head h1 {
  max-width: 760px;
  margin: 5px 0 0;
  overflow: hidden;
  color: #f8fafc;
  font-size: 27px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.super-board-head > div:last-child {
  min-width: 78px;
  display: grid;
  justify-items: end;
  gap: 2px;
  padding: 9px 12px;
  border: 1px solid rgba(111, 183, 255, 0.2);
  border-radius: 8px;
  background: rgba(58, 121, 198, 0.1);
}

.super-board-head > div:last-child strong {
  font-size: 20px;
}

.super-board-head > div:last-child small {
  color: var(--vsr-muted);
  font-size: 11px;
}

.super-task-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.super-task-toolbar > div,
.super-status-tabs,
.super-task-pagination > div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.super-status-tabs {
  width: max-content;
  gap: 6px;
  padding: 6px;
  border: 1px solid rgba(162, 118, 255, 0.12);
  border-radius: 8px;
  background: rgba(8, 12, 24, 0.58);
}

.super-status-tabs button,
.super-batch-btn,
.super-download-batch,
.super-task-pagination button {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 13px;
  border: 1px solid rgba(162, 118, 255, 0.18);
  border-radius: 7px;
  color: var(--vsr-muted);
  background: rgba(15, 20, 35, 0.66);
  font-size: 12px;
  font-weight: 700;
}

.super-status-tabs button {
  min-height: 32px;
  border-color: transparent;
  background: transparent;
  font-size: 13px;
}

.super-status-tabs button.active {
  color: #fff;
  background: rgba(111, 183, 255, 0.17);
}

.super-download-batch {
  border-color: rgba(16, 185, 129, 0.3);
  color: #a7f3d0;
  background: rgba(16, 185, 129, 0.1);
}

.super-task-list {
  display: grid;
  gap: 12px;
}

.super-task-row {
  display: grid;
  grid-template-columns: 20px 148px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  min-height: 132px;
  padding: 15px;
  border: 1px solid var(--vsr-line);
  border-radius: 8px;
  background: rgba(13, 20, 36, 0.52);
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.super-task-row:hover {
  border-color: var(--vsr-line-strong);
  background: rgba(18, 28, 50, 0.66);
  transform: translateY(-1px);
}

.super-task-check {
  position: relative;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.super-task-check input {
  position: absolute;
  opacity: 0;
}

.super-task-check span {
  width: 18px;
  height: 18px;
  border: 1px solid rgba(148, 163, 184, 0.34);
  border-radius: 5px;
  background: rgba(15, 23, 42, 0.82);
}

.super-task-check input:checked + span {
  border-color: rgba(16, 185, 129, 0.74);
  background: rgba(16, 185, 129, 0.22);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.08);
}

.super-task-check input:checked + span::after {
  content: "";
  display: block;
  width: 5px;
  height: 9px;
  margin: 2px auto 0;
  border: solid #d1fae5;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.super-task-check.disabled {
  cursor: not-allowed;
  opacity: 0.34;
}

.super-task-cover {
  position: relative;
  width: 148px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  color: var(--vsr-muted);
  background: rgba(4, 8, 18, 0.94);
}

.super-task-cover video,
.super-source-preview video,
.super-preview-body video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: #050a18;
}

.super-task-cover > span {
  height: 100%;
  display: grid;
  place-items: center;
  font-size: 12px;
}

.super-task-cover > b {
  position: absolute;
  right: 6px;
  bottom: 6px;
  z-index: 2;
  padding: 2px 6px;
  border-radius: 4px;
  color: #fff;
  background: rgba(2, 6, 16, 0.74);
  font-size: 10px;
}

.super-task-cover > i,
.super-source-preview > i {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(0, 0, 0, 0.42);
  opacity: 0;
  transition: opacity 0.18s ease;
}

.super-task-cover:hover > i,
.super-source-preview:hover > i {
  opacity: 1;
}

.super-task-body {
  min-width: 0;
  display: grid;
  gap: 10px;
}

.super-task-title,
.super-task-specs,
.super-task-status {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
}

.super-task-title > span {
  color: var(--vsr-muted);
}

.super-task-title strong {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  color: var(--vsr-text);
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.super-task-title time {
  flex: 0 0 auto;
  color: var(--vsr-muted);
  font-size: 11px;
}

.super-task-specs {
  flex-wrap: wrap;
  color: var(--vsr-muted);
  font-size: 12px;
}

.super-task-specs > svg {
  width: 12px;
  transform: rotate(180deg);
  opacity: 0.46;
}

.super-task-specs > b {
  color: var(--vsr-accent);
}

.super-task-specs > em {
  color: rgba(255, 255, 255, 0.08);
  font-style: normal;
}

.super-template-chip,
.super-status,
.super-source-expired {
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  border: 1px solid rgba(59, 130, 246, 0.24);
  border-radius: 5px;
  color: #93c5fd;
  background: rgba(37, 99, 235, 0.1);
  font-size: 11px;
  font-weight: 700;
}

.super-template-chip i,
.super-status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}

.super-template-chip.type-comic {
  border-color: rgba(244, 114, 182, 0.25);
  color: #fbcfe8;
  background: rgba(190, 24, 93, 0.08);
}

.super-template-chip.type-restore {
  border-color: rgba(45, 212, 191, 0.25);
  color: #99f6e4;
  background: rgba(15, 118, 110, 0.08);
}

.super-template-chip.type-face {
  border-color: rgba(167, 139, 250, 0.25);
  color: #ddd6fe;
  background: rgba(109, 40, 217, 0.08);
}

.super-status.status-succeeded {
  border-color: rgba(16, 185, 129, 0.26);
  color: #a7f3d0;
  background: rgba(16, 185, 129, 0.06);
}

.super-status.status-failed,
.super-status.status-cancelled {
  border-color: rgba(239, 68, 68, 0.26);
  color: #fca5a5;
  background: rgba(239, 68, 68, 0.06);
}

.super-source-expired {
  border-color: rgba(248, 113, 113, 0.24);
  color: #fecaca;
  background: rgba(127, 29, 29, 0.12);
}

.super-task-error {
  max-width: 360px;
  overflow: hidden;
  color: #f87171;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.super-task-progress {
  width: min(180px, 40%);
  height: 18px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(111, 183, 255, 0.18);
  border-radius: 999px;
  background: rgba(3, 7, 18, 0.7);
}

.super-task-progress i {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #38bdf8, #8b5cf6);
}

.super-task-progress b {
  position: relative;
  z-index: 1;
  height: 100%;
  display: grid;
  place-items: center;
  color: #e0f2fe;
  font-size: 10px;
}

.super-task-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.super-task-actions button,
.super-board-state button {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 11px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 7px;
  color: var(--vsr-soft);
  background: rgba(255, 255, 255, 0.04);
  font-size: 12px;
  font-weight: 700;
}

.super-task-actions button.primary {
  border-color: rgba(16, 185, 129, 0.3);
  color: #34d399;
  background: rgba(16, 185, 129, 0.08);
}

.super-board-state {
  min-height: 240px;
  display: grid;
  place-items: center;
  gap: 12px;
  padding: 24px;
  border: 1px dashed rgba(162, 118, 255, 0.2);
  border-radius: 8px;
  color: var(--vsr-muted);
  background: rgba(13, 20, 36, 0.52);
  text-align: center;
}

.super-board-state.error {
  color: #fca5a5;
}

.super-task-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--vsr-muted);
  font-size: 12px;
}

.super-create-panel {
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: auto;
  padding: 0 22px;
  border: 1px solid rgba(162, 118, 255, 0.18);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(16, 22, 38, 0.96), rgba(10, 16, 30, 0.96));
  opacity: 0;
  pointer-events: none;
  transform: translateX(24px);
  transition: opacity 0.52s cubic-bezier(0.22, 1, 0.36, 1), transform 0.52s cubic-bezier(0.22, 1, 0.36, 1);
}

.super-create-panel.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

.super-create-panel > header {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin: 0 -22px;
  padding: 22px 22px 18px;
  background: linear-gradient(180deg, rgba(16, 22, 38, 0.99), rgba(16, 22, 38, 0.9));
}

.super-create-panel > header span,
.super-section-title small {
  color: var(--vsr-muted);
  font-size: 11px;
}

.super-create-panel > header > div:first-child > span {
  color: #a7b7ff;
  font-weight: 800;
}

.super-create-panel h2 {
  margin: 5px 0 0;
  font-size: 24px;
}

.super-fee {
  min-width: 116px;
  display: grid;
  justify-items: end;
  gap: 3px;
  padding: 9px 12px;
  border: 1px solid rgba(111, 183, 255, 0.2);
  border-radius: 8px;
  background: rgba(58, 121, 198, 0.1);
}

.super-fee strong {
  font-size: 16px;
}

.super-panel-section {
  display: grid;
  gap: 14px;
  padding: 18px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.super-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.super-section-title > div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.super-section-title b {
  color: var(--vsr-accent);
  font-size: 12px;
}

.super-config-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.super-config-grid label {
  min-width: 0;
  display: grid;
  gap: 7px;
  color: var(--vsr-muted);
  font-size: 12px;
}

.super-config-grid select,
.super-config-grid input {
  width: 100%;
  height: 40px;
  min-width: 0;
  padding: 0 11px;
  border: 1px solid rgba(162, 118, 255, 0.16);
  border-radius: 7px;
  outline: none;
  color: #f8fafc;
  background: #080c18;
}

.super-upload-zone {
  min-height: 236px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  padding: 18px;
  border: 1px dashed rgba(111, 183, 255, 0.3);
  border-radius: 8px;
  color: var(--vsr-muted);
  background: rgba(8, 12, 24, 0.36);
  text-align: center;
}

.super-upload-zone:hover,
.super-upload-zone.dragging {
  border-color: rgba(111, 183, 255, 0.6);
  color: #dbeafe;
  background: rgba(56, 100, 170, 0.12);
}

.super-upload-zone > span,
.super-source-add > span {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(111, 183, 255, 0.28);
  border-radius: 50%;
  color: #dbeafe;
  background: rgba(58, 121, 198, 0.14);
}

.super-upload-zone > span svg {
  width: 34px;
  height: 34px;
}

.super-upload-zone strong {
  color: #f8fafc;
  font-size: 16px;
}

.super-file-input {
  display: none;
}

.super-source-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.super-source-item,
.super-source-add {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--vsr-line);
  border-radius: 8px;
  color: var(--vsr-text);
  background: rgba(12, 18, 32, 0.78);
}

.super-source-item.invalid {
  border-color: rgba(248, 113, 113, 0.46);
}

.super-source-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #040812;
}

.super-source-preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  color: var(--vsr-muted);
  background: transparent;
}

.super-source-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 4;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: rgba(0, 0, 0, 0.68);
  opacity: 0;
  transition: opacity 0.18s ease, background 0.18s ease;
}

.super-source-item:hover .super-source-remove,
.super-source-remove:focus-visible {
  opacity: 1;
}

.super-source-remove:hover:not(:disabled) {
  background: rgba(239, 68, 68, 0.88);
}

.super-source-main {
  min-width: 0;
  display: grid;
  gap: 5px;
  padding: 10px;
}

.super-source-main strong,
.super-source-main span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.super-source-main strong {
  font-size: 13px;
}

.super-source-main span {
  color: var(--vsr-muted);
  font-size: 11px;
}

.super-source-main > div {
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.9);
}

.super-source-main > div i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #38bdf8, #8b5cf6);
}

.super-source-add {
  min-height: 150px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  border-style: dashed;
  color: var(--vsr-muted);
}

.super-source-add > span {
  width: 48px;
  height: 48px;
}

.super-source-add strong {
  color: var(--vsr-soft);
  font-size: 13px;
}

.super-create-panel > footer {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin: 0 -22px;
  padding: 18px 22px 22px;
  background: linear-gradient(0deg, rgba(10, 16, 30, 0.99), rgba(10, 16, 30, 0.82));
}

.super-create-panel > footer button {
  min-width: 84px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(162, 118, 255, 0.2);
  border-radius: 7px;
  color: var(--vsr-soft);
  background: rgba(15, 20, 35, 0.74);
  font-size: 13px;
  font-weight: 700;
}

.super-create-panel > footer button.primary {
  border-color: rgba(59, 130, 246, 0.7);
  color: #fff;
  background: linear-gradient(180deg, rgba(59, 130, 246, 0.95), rgba(37, 99, 235, 0.95));
}

.super-modal-backdrop {
  z-index: 8000;
  background: rgba(5, 10, 24, 0.72);
  backdrop-filter: blur(10px);
}

.super-project-modal,
.super-pricing-modal,
.super-preview-modal {
  width: min(620px, calc(100vw - 40px));
  overflow: hidden;
  border: 1px solid rgba(162, 118, 255, 0.22);
  border-radius: 8px;
  color: #f8fafc;
  background: #10172a;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.46);
}

.super-project-modal.compact {
  width: min(520px, calc(100vw - 40px));
}

.super-project-modal .modal-header,
.super-pricing-modal .modal-header,
.super-preview-modal .modal-header {
  padding: 20px 22px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.super-project-modal .modal-body {
  padding: 22px;
}

.super-project-modal .modal-body p {
  margin: 0;
  color: #c5cfdf;
  line-height: 1.7;
}

.super-project-modal .form-field {
  display: grid;
  gap: 8px;
}

.super-project-modal .form-field input {
  width: 100%;
  height: 42px;
  padding: 0 12px;
  border: 1px solid rgba(162, 118, 255, 0.2);
  border-radius: 7px;
  outline: none;
  color: #f8fafc;
  background: #080c18;
}

.super-project-modal .modal-actions,
.super-pricing-modal .modal-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 22px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.super-project-modal .modal-actions button,
.super-pricing-modal .modal-actions button {
  min-width: 84px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
}

.super-project-modal .danger-btn {
  border: 1px solid rgba(248, 113, 113, 0.46);
  color: #ffe4e6;
  background: rgba(153, 27, 27, 0.72);
}

.super-pricing-modal {
  width: min(760px, calc(100vw - 40px));
  max-height: 86vh;
}

.super-pricing-list {
  max-height: 60vh;
  display: grid;
  gap: 10px;
  overflow: auto;
  padding: 18px 22px;
}

.super-pricing-list article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 13px 14px;
  border: 1px solid var(--vsr-line, rgba(162, 118, 255, 0.15));
  border-radius: 7px;
  background: rgba(13, 20, 36, 0.72);
}

.super-pricing-list article > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.super-pricing-list span {
  color: #98a4b8;
  font-size: 12px;
}

.super-pricing-list b {
  flex: 0 0 auto;
  color: #a7f3d0;
  font-size: 13px;
}

.super-preview-modal {
  width: min(960px, calc(100vw - 40px));
}

.super-preview-body {
  min-height: 360px;
  display: grid;
  place-items: center;
  padding: 18px 22px 22px;
}

.super-preview-body video {
  max-height: 68vh;
  border-radius: 7px;
}

@media (max-width: 1100px) {
  .vsr-container,
  .vsr-page.panel-open .vsr-container {
    grid-template-columns: 1fr;
    overflow: auto;
  }

  .super-task-board {
    overflow: visible;
  }

  .super-create-panel {
    display: none;
    height: auto;
  }

  .super-create-panel.active {
    display: block;
  }

  .super-task-row {
    grid-template-columns: 20px 132px minmax(0, 1fr);
  }

  .super-task-actions {
    grid-column: 2 / -1;
    justify-content: flex-start;
  }
}

@media (max-width: 720px) {
  .vsr-container {
    padding: 16px 14px 28px;
    gap: 18px;
  }

  .super-board-head h1 {
    font-size: 22px;
  }

  .super-task-toolbar,
  .super-task-pagination {
    align-items: stretch;
    flex-direction: column;
  }

  .super-status-tabs,
  .super-task-toolbar > div {
    width: 100%;
    overflow-x: auto;
  }

  .super-task-row {
    grid-template-columns: 18px minmax(0, 1fr);
  }

  .super-task-cover,
  .super-task-body,
  .super-task-actions {
    grid-column: 2;
    width: 100%;
  }

  .super-task-cover {
    max-width: 280px;
  }

  .super-config-grid,
  .super-source-grid {
    grid-template-columns: 1fr;
  }

  .super-source-remove {
    opacity: 1;
  }

  .super-pricing-list article {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Keep video-understanding project cards authoritative after legacy global card rules. */
.beta-understanding-project-page .understanding-project-container {
  flex: 1;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 34px 46px 42px;
}

.beta-understanding-project-page .understanding-selection-shell {
  position: relative;
  display: block;
  width: min(1320px, 100%);
  min-height: 100%;
  margin: 0 auto;
}

.beta-understanding-project-page .understanding-project-grid {
  grid-template-columns: repeat(3, minmax(280px, 1fr));
  gap: 22px;
}

.beta-understanding-project-page .create-card,
.beta-understanding-project-page .understanding-project-card-v2.script-card,
.beta-understanding-project-page .empty-project-card.script-card {
  min-height: 280px;
  height: 280px;
  border-radius: 6px;
}

.beta-understanding-project-page .create-card {
  border-color: rgba(112, 145, 160, 0.24);
  background: linear-gradient(145deg, #111a20, #090e12);
}

.beta-understanding-project-page .create-card:hover,
.beta-understanding-project-page .create-card:focus-visible {
  border-color: rgba(104, 199, 212, 0.48);
  box-shadow: 0 15px 36px rgba(0, 0, 0, 0.22);
}

.beta-understanding-project-page .create-emblem {
  border-radius: 50%;
  color: #b9e5ea;
  background: rgba(42, 102, 111, 0.18);
}

.beta-understanding-project-page .understanding-project-card-v2.script-card {
  border-color: rgba(119, 150, 164, 0.24);
  background: #0d1318;
}

.beta-understanding-project-page .understanding-project-card-v2.script-card::before {
  inset: 0;
  background: linear-gradient(145deg, hsl(var(--understanding-hue) 42% 27% / 0.84), #0b1218 84%);
}

.beta-understanding-project-page .understanding-project-card-v2 .card-edit-btn {
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.beta-understanding-project-page .understanding-project-card-v2 .task-stats {
  display: flex;
  align-items: baseline;
  gap: 20px;
}

.beta-understanding-project-page .understanding-project-card-v2 .stat-block {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

.beta-understanding-project-page .understanding-project-card-v2 .stat-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 20px;
  font-weight: 500;
}

.beta-understanding-project-page .understanding-project-card-v2 .stat-copy {
  font-size: 12px;
}

@media (max-width: 1100px) {
  .beta-understanding-project-page .understanding-project-grid {
    grid-template-columns: repeat(2, minmax(260px, 1fr));
  }
}

@media (max-width: 720px) {
  .beta-understanding-project-page .understanding-project-container {
    padding: 16px 14px 26px;
  }

  .beta-understanding-project-page .understanding-project-grid {
    grid-template-columns: 1fr;
  }
}

.modal-understandingDelete {
  width: min(480px, calc(100vw - 32px));
}

.understanding-delete-modal {
  display: grid;
  gap: 10px;
}

.understanding-delete-modal p {
  margin: 0;
  color: #e4ecef;
  line-height: 1.65;
}

.understanding-delete-modal small {
  color: #83939b;
}

.modal-understandingDelete .modal-primary-btn {
  border-color: rgba(205, 98, 89, 0.58);
  background: #8c3934;
}

.understanding-task-toolbar nav button {
  flex: 0 0 auto;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .understanding-task-toolbar nav {
    width: 100%;
    overflow-x: auto;
  }
}
/* AI toolbox v84: Tuyaa production layout and interaction contract. */
.toolbox-page-v84 {
  height: 100vh;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(circle at 8% 18%, rgba(56, 189, 248, 0.08), transparent 28%),
    radial-gradient(circle at 92% 8%, rgba(234, 179, 8, 0.06), transparent 24%),
    linear-gradient(180deg, #0c1320, #07111b 48%, #050910);
  color: #eef4fa;
}

.toolbox-shell-v84 {
  --toolbox-session-width: 292px;
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: var(--toolbox-session-width) minmax(560px, 1fr);
  overflow: hidden;
}

.toolbox-shell-v84.sidebar-collapsed {
  grid-template-columns: 0 minmax(560px, 1fr);
}

.toolbox-v84-sessions,
.toolbox-v84-chat {
  min-height: 0;
  background: rgba(10, 17, 28, 0.76);
  backdrop-filter: blur(18px);
}

.toolbox-v84-sessions {
  width: var(--toolbox-session-width);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
  padding: 14px 12px;
  border-right: 1px solid rgba(148, 163, 184, 0.16);
  box-shadow: 18px 0 46px rgba(2, 6, 23, 0.24);
  transition: opacity 180ms ease, transform 240ms ease;
}

.toolbox-shell-v84.sidebar-collapsed .toolbox-v84-sessions {
  opacity: 0;
  transform: translateX(-100%);
  pointer-events: none;
}

.toolbox-v84-sessions > header,
.toolbox-v84-session-summary,
.toolbox-v84-preview > header,
.toolbox-v84-dialog > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.toolbox-v84-sessions > header small,
.toolbox-v84-preview > header small {
  display: block;
  margin-bottom: 4px;
  color: #67e8f9;
  font-family: var(--font-mono-ui);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0;
}

.toolbox-v84-sessions h2,
.toolbox-v84-preview h3,
.toolbox-v84-dialog h3 {
  margin: 0;
  color: #f8fafc;
  font-size: 14px;
  letter-spacing: 0;
}

.toolbox-v84-sessions button,
.toolbox-v84-chat button,
.toolbox-v84-overlay button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.72);
  color: rgba(226, 232, 240, 0.86);
  cursor: pointer;
  letter-spacing: 0;
}

.toolbox-v84-sessions button:hover:not(:disabled),
.toolbox-v84-chat button:hover:not(:disabled),
.toolbox-v84-overlay button:hover:not(:disabled) {
  border-color: rgba(103, 232, 249, 0.38);
  background: rgba(30, 41, 59, 0.82);
  color: #f8fafc;
}

.toolbox-v84-sessions button:disabled,
.toolbox-v84-chat button:disabled,
.toolbox-v84-overlay button:disabled {
  opacity: 0.44;
  cursor: not-allowed;
}

.toolbox-v84-sessions button svg,
.toolbox-v84-chat button svg,
.toolbox-v84-overlay button svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}

.toolbox-v84-sessions > header > button {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
}

.toolbox-v84-session-summary {
  min-height: 30px;
  color: rgba(148, 163, 184, 0.82);
  font-size: 11px;
}

.toolbox-v84-session-summary button {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
}

.toolbox-v84-session-list {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  padding-right: 2px;
}

.toolbox-v84-session-list::-webkit-scrollbar,
.toolbox-v84-messages::-webkit-scrollbar {
  width: 6px;
}

.toolbox-v84-session-list::-webkit-scrollbar-thumb,
.toolbox-v84-messages::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(100, 116, 139, 0.5);
}

.toolbox-v84-session {
  min-height: 54px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.34);
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.toolbox-v84-session:hover,
.toolbox-v84-session:focus-within {
  border-color: rgba(56, 189, 248, 0.25);
  background: rgba(30, 41, 59, 0.56);
}

.toolbox-v84-session.selected {
  border-color: rgba(56, 189, 248, 0.48);
  background: rgba(14, 165, 233, 0.12);
  box-shadow: inset 2px 0 rgba(103, 232, 249, 0.7);
}

.toolbox-v84-session-main {
  flex: 1;
  min-width: 0;
  min-height: 38px;
  display: grid !important;
  justify-items: start !important;
  gap: 4px;
  padding: 3px 5px;
  border: 0 !important;
  background: transparent !important;
  text-align: left;
}

.toolbox-v84-session-main strong,
.toolbox-v84-session-main small {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.toolbox-v84-session-main strong {
  color: #f8fafc;
  font-size: 13px;
  font-weight: 600;
}

.toolbox-v84-session-main small {
  color: rgba(148, 163, 184, 0.82);
  font-size: 11px;
}

.toolbox-v84-session-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.toolbox-v84-session:hover .toolbox-v84-session-actions,
.toolbox-v84-session:focus-within .toolbox-v84-session-actions {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.toolbox-v84-session-actions button {
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
  border: 0;
  background: transparent;
}

.toolbox-v84-session-actions button.danger:hover,
.toolbox-v84-dialog footer button.danger:hover {
  border-color: rgba(248, 113, 113, 0.38);
  background: rgba(239, 68, 68, 0.14);
  color: #fda4af;
}

.toolbox-v84-rename {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px 28px;
  gap: 5px;
  align-items: center;
}

.toolbox-v84-rename input {
  min-width: 0;
  height: 32px;
  padding: 0 9px;
  border: 1px solid rgba(56, 189, 248, 0.42);
  border-radius: 7px;
  outline: none;
  background: rgba(8, 15, 26, 0.92);
  color: #f8fafc;
}

.toolbox-v84-rename button {
  width: 28px;
  height: 28px;
}

.toolbox-v84-state {
  display: grid;
  gap: 7px;
  padding: 14px;
  border: 1px dashed rgba(148, 163, 184, 0.2);
  border-radius: 8px;
  color: rgba(203, 213, 225, 0.84);
  font-size: 12px;
}

.toolbox-v84-state.error {
  border-color: rgba(248, 113, 113, 0.28);
  color: #fecaca;
}

.toolbox-v84-chat {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.toolbox-v84-open-sessions {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 8;
  width: 34px;
  height: 34px;
  box-shadow: 0 14px 34px rgba(2, 6, 23, 0.28);
}

.toolbox-v84-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.toolbox-v84-message-list {
  width: 100%;
  max-width: 960px;
  min-height: 100%;
  margin: 0 auto;
  padding: 40px 24px;
  display: flex;
  flex-direction: column;
}

.toolbox-v84-load-more {
  align-self: center;
  min-height: 30px;
  margin-bottom: 20px;
  padding: 0 12px;
  border: 0 !important;
  background: transparent !important;
  color: rgba(148, 163, 184, 0.78) !important;
}

.toolbox-v84-empty {
  flex: 1;
  min-height: min(42vh, 360px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  color: rgba(203, 213, 225, 0.84);
}

.toolbox-v84-empty strong {
  color: #f8fafc;
  font-size: 18px;
}

.toolbox-v84-empty p {
  max-width: 420px;
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
}

.toolbox-v84-empty > span {
  width: 28px;
  height: 28px;
  border: 2px solid rgba(56, 189, 248, 0.22);
  border-top-color: #38bdf8;
  border-radius: 50%;
  animation: toolbox-v84-spin 900ms linear infinite;
}

.toolbox-v84-message {
  display: flex;
  margin-bottom: 30px;
}

.toolbox-v84-message.user {
  justify-content: flex-end;
}

.toolbox-v84-message-content {
  width: 100%;
  min-width: 0;
}

.toolbox-v84-message.user .toolbox-v84-message-content {
  width: min(640px, 86%);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.toolbox-v84-bubble {
  max-width: 100%;
  color: #cbd5e1;
  font-size: 15px;
  line-height: 1.76;
  overflow-wrap: anywhere;
}

.toolbox-v84-message.user .toolbox-v84-bubble {
  padding: 12px 18px;
  border: 1px solid rgba(100, 116, 139, 0.28);
  border-radius: 8px 8px 3px;
  background: rgba(23, 32, 48, 0.78);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.04), 0 14px 30px rgba(2, 6, 23, 0.16);
}

.toolbox-v84-message.failed .toolbox-v84-bubble {
  color: #fecaca;
}

.toolbox-v84-reasoning {
  width: 100%;
  margin-bottom: 14px;
  padding-left: 14px;
  border-left: 2px solid rgba(148, 163, 184, 0.2);
  color: rgba(148, 163, 184, 0.82);
}

.toolbox-v84-reasoning summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
}

.toolbox-v84-reasoning summary span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #38bdf8;
}

.toolbox-v84-reasoning[open] summary span {
  box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.1);
}

.toolbox-v84-reasoning > div {
  margin-top: 8px;
  color: rgba(184, 195, 211, 0.78);
  font-size: 13px;
  line-height: 1.65;
}

.toolbox-v84-typing {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 11px;
  border: 1px solid rgba(100, 116, 139, 0.18);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.34);
}

.toolbox-v84-typing i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(148, 163, 184, 0.86);
  animation: toolbox-v84-bounce 1.1s ease-in-out infinite;
}

.toolbox-v84-typing i:nth-child(2) { animation-delay: 150ms; }
.toolbox-v84-typing i:nth-child(3) { animation-delay: 300ms; }

.toolbox-v84-message-actions {
  display: flex;
  gap: 5px;
  margin-top: 9px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.toolbox-v84-message:hover .toolbox-v84-message-actions,
.toolbox-v84-message-actions:focus-within {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.toolbox-v84-message-actions button {
  width: 29px;
  height: 29px;
  border: 0;
  background: transparent;
}

.toolbox-v84-message-files,
.toolbox-v84-attachment-strip {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}

.toolbox-v84-message.user .toolbox-v84-message-files {
  justify-content: flex-end;
}

.toolbox-v84-file-card,
.toolbox-v84-attachment {
  width: 188px;
  height: 64px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px;
  align-items: center;
  gap: 4px;
  padding: 7px;
  border: 1px solid rgba(71, 85, 105, 0.3);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.82);
}

.toolbox-v84-attachment.failed {
  border-color: rgba(248, 113, 113, 0.34);
  background: rgba(69, 26, 26, 0.3);
}

.toolbox-v84-file-main,
.toolbox-v84-attachment > button:first-child {
  min-width: 0;
  height: 48px;
  display: grid !important;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  text-align: left;
}

.toolbox-v84-file-main > span,
.toolbox-v84-attachment > button:first-child > span {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: rgba(30, 41, 59, 0.86);
  color: #93c5fd;
  font-family: var(--font-mono-ui);
  font-size: 10px;
  font-weight: 800;
}

.toolbox-v84-file-main div,
.toolbox-v84-attachment > button:first-child div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.toolbox-v84-file-main strong,
.toolbox-v84-file-main small,
.toolbox-v84-attachment strong,
.toolbox-v84-attachment small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.toolbox-v84-file-main strong,
.toolbox-v84-attachment strong {
  color: #d8e1ec;
  font-size: 12px;
}

.toolbox-v84-file-main small,
.toolbox-v84-attachment small {
  color: rgba(148, 163, 184, 0.78);
  font-size: 10px;
}

.toolbox-v84-file-download,
.toolbox-v84-attachment > button:last-child {
  width: 27px;
  height: 27px;
  flex: 0 0 27px;
  border: 0 !important;
  background: transparent !important;
}

.toolbox-v84-task-stack {
  width: 100%;
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.toolbox-v84-task-stack > article {
  padding: 10px;
  border: 1px solid rgba(71, 85, 105, 0.28);
  border-radius: 8px;
  background: #090f18;
}

.toolbox-v84-task-stack header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 9px;
}

.toolbox-v84-task-stack header > span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #64748b;
}

.toolbox-v84-task-stack .status-running { background: #38bdf8; }
.toolbox-v84-task-stack .status-succeeded { background: #4ade80; }
.toolbox-v84-task-stack .status-failed { background: #f87171; }

.toolbox-v84-task-stack header div {
  display: grid;
  gap: 2px;
}

.toolbox-v84-task-stack header strong { font-size: 13px; }
.toolbox-v84-task-stack header small { color: #94a3b8; font-size: 11px; }

.toolbox-v84-composer {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 24px 24px;
}

.toolbox-v84-composer-inner {
  padding: 12px;
  border: 1px solid rgba(56, 189, 248, 0.26);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.76);
  box-shadow: 0 14px 32px rgba(2, 6, 23, 0.28);
  backdrop-filter: blur(12px);
}

.toolbox-v84-composer-inner:focus-within {
  border-color: rgba(56, 189, 248, 0.46);
  box-shadow: 0 16px 38px rgba(8, 47, 73, 0.2);
}

.toolbox-v84-attachment-strip {
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 4px;
}

.toolbox-v84-attachment {
  flex: 0 0 188px;
}

.toolbox-v84-composer textarea {
  width: 100%;
  min-height: 34px;
  max-height: 200px;
  padding: 4px 8px;
  resize: vertical;
  border: 0;
  outline: none;
  background: transparent;
  color: #d4deea;
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: 0;
}

.toolbox-v84-composer textarea::placeholder {
  color: rgba(148, 163, 184, 0.48);
}

.toolbox-v84-composer-error {
  margin: 5px 8px 0;
  color: #fca5a5;
  font-size: 12px;
}

.toolbox-v84-composer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  padding: 0 4px;
}

.toolbox-v84-composer-actions > div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.toolbox-v84-composer-actions button {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-color: transparent;
  background: transparent;
}

.toolbox-v84-composer-actions select {
  min-width: 110px;
  height: 34px;
  padding: 0 30px 0 10px;
  border: 1px solid rgba(71, 85, 105, 0.55);
  border-radius: 8px;
  outline: none;
  background: #0b1320;
  color: #cbd5e1;
  font-size: 12px;
  text-align: center;
  letter-spacing: 0;
}

.toolbox-v84-thinking.active {
  border-color: rgba(56, 189, 248, 0.2) !important;
  background: rgba(56, 189, 248, 0.1) !important;
  color: #38bdf8 !important;
}

.toolbox-v84-context {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: rgba(148, 163, 184, 0.82);
}

.toolbox-v84-context i {
  --context-angle: 0deg;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: conic-gradient(currentColor var(--context-angle), rgba(148, 163, 184, 0.16) 0deg);
  -webkit-mask: radial-gradient(transparent 6px, #000 6.5px);
  mask: radial-gradient(transparent 6px, #000 6.5px);
}

.toolbox-v84-context.warning { color: #d6a84a; }
.toolbox-v84-context.danger { color: #f87171; }

.toolbox-v84-send {
  width: 38px !important;
  height: 38px !important;
  flex-basis: 38px !important;
  border: 0 !important;
  background: #168fc6 !important;
  color: #fff !important;
}

.toolbox-v84-send:hover:not(:disabled) {
  background: #1ca6e3 !important;
  box-shadow: 0 8px 18px rgba(14, 165, 233, 0.24);
}

.toolbox-v84-send:disabled {
  background: rgba(100, 116, 139, 0.3) !important;
  color: rgba(148, 163, 184, 0.55) !important;
}

.toolbox-v84-send > span {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.34);
  border-top-color: #fff;
  border-radius: 50%;
  animation: toolbox-v84-spin 800ms linear infinite;
}

.toolbox-v84-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(2, 6, 23, 0.76);
  backdrop-filter: blur(8px);
}

.toolbox-v84-dialog,
.toolbox-v84-preview {
  width: min(620px, 100%);
  max-height: calc(100vh - 40px);
  overflow: auto;
  border: 1px solid rgba(56, 189, 248, 0.22);
  border-radius: 8px;
  background: #0d1625;
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.42);
}

.toolbox-v84-dialog > header,
.toolbox-v84-preview > header {
  padding: 15px 17px;
  border-bottom: 1px solid rgba(51, 65, 85, 0.76);
}

.toolbox-v84-dialog > header button,
.toolbox-v84-preview > header button {
  width: 32px;
  height: 32px;
}

.toolbox-v84-dialog p {
  margin: 0;
  padding: 20px;
  color: #cbd5e1;
  font-size: 14px;
  line-height: 1.7;
}

.toolbox-v84-dialog footer {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  padding: 14px 18px;
  border-top: 1px solid rgba(51, 65, 85, 0.76);
}

.toolbox-v84-dialog footer button {
  min-width: 88px;
  height: 36px;
}

.toolbox-v84-preview {
  width: min(900px, 100%);
}

.toolbox-v84-preview pre {
  max-height: calc(100vh - 150px);
  margin: 0;
  overflow: auto;
  padding: 20px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: #cbd5e1;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.65;
}

.toolbox-v84-preview > img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 150px);
  margin: 0 auto;
  object-fit: contain;
}

@keyframes toolbox-v84-spin { to { transform: rotate(360deg); } }
@keyframes toolbox-v84-bounce { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-4px); } }

@media (max-width: 980px) {
  .toolbox-shell-v84,
  .toolbox-shell-v84.sidebar-collapsed {
    display: flex;
    flex-direction: column;
  }

  .toolbox-v84-sessions {
    width: 100%;
    max-height: 36vh;
    flex: 0 0 auto;
    border-right: 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.16);
    transform: none;
  }

  .toolbox-shell-v84.sidebar-collapsed .toolbox-v84-sessions {
    max-height: 0;
    margin-top: -36vh;
    padding-top: 0;
    padding-bottom: 0;
  }

  .toolbox-v84-chat {
    flex: 1;
    min-width: 0;
  }
}

@media (max-width: 640px) {
  .toolbox-v84-message-list {
    padding: 28px 12px;
  }

  .toolbox-v84-composer {
    padding: 0 12px 14px;
  }

  .toolbox-v84-composer-actions {
    flex-wrap: wrap;
  }

  .toolbox-v84-composer-actions > div {
    width: 100%;
    justify-content: space-between;
  }

  .toolbox-v84-composer-actions select {
    min-width: 0;
    flex: 1;
  }

  .toolbox-v84-message.user .toolbox-v84-message-content {
    width: 94%;
  }
}

/* Project usage follows the Tuyaa statistics modal contract. */
.usage-modal-mask {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(5, 10, 24, 0.52);
  backdrop-filter: blur(8px);
}

.usage-modal-card {
  width: min(1080px, calc(100vw - 48px));
  max-height: min(92vh, 920px);
  display: flex;
  flex-direction: column;
  padding: 34px 32px 28px;
  overflow: hidden;
  border: 1px solid rgba(213, 221, 236, 0.76);
  border-radius: 28px;
  color: #17213a;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.98));
  box-shadow: 0 36px 80px rgba(8, 18, 44, 0.24);
}

.usage-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}

.usage-modal-header h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
}

.usage-modal-subtitle {
  margin: 8px 0 0;
  color: #6d7d96;
  font-size: 13px;
  line-height: 1.4;
}

.usage-modal-close {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(205, 214, 231, 0.92);
  border-radius: 16px;
  color: #34415d;
  background: rgba(255, 255, 255, 0.88);
  cursor: pointer;
}

.usage-modal-close svg {
  width: 18px;
  height: 18px;
}

.usage-tab-bar-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.usage-tab-stack {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.usage-tab-bar,
.usage-subtab-bar {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 10px;
  padding: 6px;
  border: 1px solid rgba(219, 227, 239, 0.92);
  border-radius: 18px;
  background: rgba(239, 244, 251, 0.96);
}

.usage-subtab-bar {
  padding: 5px;
  border-radius: 16px;
  background: rgba(246, 249, 253, 0.9);
}

.usage-tab-btn,
.usage-subtab-btn {
  min-width: 132px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 16px;
  border: 0;
  border-radius: 14px;
  color: #63738c;
  background: transparent;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.usage-subtab-btn {
  min-width: 72px;
  min-height: 32px;
  padding: 8px 14px;
  border-radius: 12px;
  font-size: 12px;
}

.usage-tab-btn.active,
.usage-subtab-btn.active {
  color: #ffffff;
  background: #17213a;
}

.usage-wallet-summary {
  display: inline-flex;
  align-items: stretch;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.usage-wallet-chip {
  min-width: 116px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid rgba(219, 227, 239, 0.92);
  border-radius: 16px;
  background: rgba(242, 246, 252, 0.8);
}

.usage-wallet-chip span {
  color: #6d7d96;
  font-size: 11px;
  line-height: 1.2;
}

.usage-wallet-chip strong {
  color: #18233d;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}

.usage-modal-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.usage-modal-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  border: 1px solid rgba(219, 227, 239, 0.92);
  border-radius: 24px;
  background: rgba(242, 246, 252, 0.8);
}

.usage-modal-summary span {
  color: #617189;
  font-size: 13px;
}

.usage-modal-summary strong {
  overflow: hidden;
  color: #18233d;
  font-size: 18px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.usage-modal-content {
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.usage-modal-state {
  min-height: 280px;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #60708a;
  font-size: 16px;
}

.usage-modal-state-error {
  color: #cc415d;
}

.usage-table-scroll {
  min-height: 0;
  flex: 1;
  overflow: auto;
  padding-right: 4px;
}

.usage-table {
  min-width: 900px;
  min-height: 100%;
}

.usage-table-head,
.usage-row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(120px, 0.9fr) minmax(120px, 1fr) minmax(140px, 1fr) 120px;
  align-items: center;
  gap: 18px;
}

.usage-table-head {
  padding: 0 10px 16px;
  color: #6d7d96;
  font-size: 12px;
  font-weight: 600;
}

.usage-row {
  padding: 16px 10px;
  border-top: 1px solid rgba(219, 227, 239, 0.92);
}

.usage-time,
.usage-model,
.usage-scene,
.usage-duration {
  overflow: hidden;
  color: #1b2741;
  font-size: 13px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.usage-head-charge,
.usage-charge {
  text-align: right;
}

.usage-charge {
  color: #18233d;
  font-size: 14px;
  font-weight: 700;
}

.usage-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(219, 227, 239, 0.92);
  flex-wrap: wrap;
}

.usage-pagination-info {
  color: #70809a;
  font-size: 13px;
}

.usage-pagination-actions {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.usage-page-btn {
  min-width: 110px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 18px;
  border: 1px solid rgba(215, 223, 236, 0.94);
  border-radius: 18px;
  color: #40506b;
  background: rgba(255, 255, 255, 0.88);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
}

.usage-page-btn:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.usage-page-btn-primary {
  border-color: transparent;
  color: #ffffff;
  background: #17213a;
}

@media (max-width: 960px) {
  .usage-modal-card {
    width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
    padding: 22px 16px 18px;
    border-radius: 22px;
  }

  .usage-tab-bar-row {
    flex-direction: column;
    align-items: stretch;
  }

  .usage-tab-bar,
  .usage-subtab-bar,
  .usage-wallet-summary {
    width: 100%;
    justify-content: space-between;
  }

  .usage-wallet-chip,
  .usage-tab-btn,
  .usage-subtab-btn {
    min-width: 0;
    flex: 1;
  }

  .usage-modal-summary-grid {
    grid-template-columns: 1fr;
  }

  .usage-table {
    min-width: 820px;
  }
}

@media (max-width: 640px) {
  .usage-modal-mask {
    padding: 12px;
  }

  .usage-modal-header h3 {
    font-size: 18px;
  }

  .usage-table {
    min-width: 780px;
  }

  .usage-pagination {
    justify-content: center;
  }

  .usage-pagination-info {
    width: 100%;
    text-align: center;
  }
}

/* Asset batch finalize mirrors Tuyaa's two-column draft-to-final workflow. */
.asset-batch-finalize-overlay {
  position: fixed;
  inset: 0;
  z-index: 4700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: rgba(3, 6, 14, 0.72);
  backdrop-filter: blur(12px);
}

.asset-batch-finalize-modal {
  position: relative;
  width: min(1040px, calc(100vw - 48px));
  height: 66.67vh;
  max-height: calc(100vh - 48px);
  min-height: 560px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 22px;
  background: #111722;
  color: #e5e7eb;
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.46);
}

.asset-batch-finalize-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(226, 232, 240, 0.86);
  cursor: pointer;
}

.asset-batch-finalize-close:hover:not(:disabled) {
  background: rgba(162, 118, 255, 0.16);
  color: #fff;
}

.asset-batch-finalize-close:disabled,
.asset-batch-finalize-modal button:disabled {
  cursor: not-allowed;
  opacity: 0.52;
}

.asset-batch-finalize-close svg {
  width: 22px;
  height: 22px;
}

.asset-batch-finalize-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 34px 36px 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.asset-batch-finalize-header h2 {
  margin: 0;
  padding-right: 46px;
  color: #f8fafc;
  font-size: 26px;
  line-height: 1.22;
  letter-spacing: 0;
}

.asset-batch-finalize-summary {
  max-width: 360px;
  padding-right: 42px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.asset-batch-finalize-summary span {
  height: 28px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(162, 118, 255, 0.2);
  border-radius: 999px;
  padding: 0 10px;
  background: rgba(162, 118, 255, 0.1);
  color: rgba(226, 232, 240, 0.9);
  font-size: 12px;
  white-space: nowrap;
}

.asset-batch-finalize-summary span.failed {
  border-color: rgba(248, 113, 113, 0.3);
  background: rgba(248, 113, 113, 0.1);
  color: #fecaca;
}

.asset-batch-finalize-board {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
  gap: 18px;
  padding: 20px 24px;
  overflow: hidden;
}

.asset-batch-finalize-column {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.035);
}

.asset-batch-finalize-column.selected {
  background: rgba(96, 165, 250, 0.04);
}

.asset-batch-finalize-column > header {
  flex: 0 0 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.asset-batch-finalize-column > header strong {
  color: #f8fafc;
  font-size: 14px;
}

.asset-batch-finalize-column > header span,
.asset-batch-finalize-global small {
  color: rgba(148, 163, 184, 0.92);
  font-size: 12px;
}

.asset-batch-finalize-list {
  min-height: 0;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
}

.asset-batch-finalize-group {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.asset-batch-finalize-group.multiple {
  padding-left: 10px;
  border-left: 2px solid rgba(162, 118, 255, 0.28);
}

.asset-batch-finalize-group-head {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 2px;
}

.asset-batch-finalize-group-head strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(226, 232, 240, 0.92);
  font-size: 12px;
}

.asset-batch-finalize-group-head span {
  flex: 0 0 auto;
  color: rgba(148, 163, 184, 0.9);
  font-size: 11px;
}

.asset-batch-finalize-card {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.62);
  color: inherit;
  text-align: left;
}

button.asset-batch-finalize-card {
  cursor: pointer;
}

button.asset-batch-finalize-card:hover:not(:disabled),
.asset-batch-finalize-card.draft.selected {
  border-color: rgba(162, 118, 255, 0.54);
  background: rgba(24, 32, 48, 0.88);
}

.asset-batch-finalize-card.selected-card {
  display: flex;
  justify-content: space-between;
}

.asset-batch-finalize-card.is-running {
  border-color: rgba(96, 165, 250, 0.34);
}

.asset-batch-finalize-card.is-success {
  border-color: rgba(34, 197, 94, 0.34);
}

.asset-batch-finalize-card.is-failed {
  border-color: rgba(248, 113, 113, 0.36);
}

.asset-batch-finalize-card-main {
  min-width: 0;
  flex: 1;
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.asset-batch-finalize-thumb {
  position: relative;
  width: 74px;
  aspect-ratio: 16 / 9;
  display: block;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: rgba(2, 6, 23, 0.42);
}

.asset-batch-finalize-card.draft .asset-batch-finalize-thumb {
  width: 96px;
}

.asset-batch-finalize-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.asset-batch-finalize-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.asset-batch-finalize-copy strong,
.asset-batch-finalize-copy small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.asset-batch-finalize-copy strong {
  color: #f8fafc;
  font-size: 14px;
}

.asset-batch-finalize-copy small {
  color: rgba(148, 163, 184, 0.9);
  font-size: 12px;
}

.asset-batch-finalize-copy small.error {
  color: #fca5a5;
}

.asset-batch-finalize-arrow,
.asset-batch-finalize-check {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
}

.asset-batch-finalize-arrow {
  border: 1px solid rgba(162, 118, 255, 0.2);
  background: rgba(162, 118, 255, 0.1);
  color: rgba(216, 204, 255, 0.92);
}

.asset-batch-finalize-check {
  background: #16a34a;
  color: #fff;
}

.asset-batch-finalize-arrow svg,
.asset-batch-finalize-check svg {
  width: 17px;
  height: 17px;
}

.asset-batch-finalize-global {
  margin: 12px 12px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.42);
}

.asset-batch-finalize-global div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.asset-batch-finalize-global strong {
  color: #f8fafc;
  font-size: 13px;
}

.asset-batch-finalize-card-actions {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.asset-batch-finalize-switch {
  min-width: 64px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 8px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.7);
  color: rgba(203, 213, 225, 0.9);
  font-size: 12px;
  cursor: pointer;
}

.asset-batch-finalize-switch.large {
  min-width: 70px;
  height: 32px;
}

.asset-batch-finalize-switch > span {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.82);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.16);
}

.asset-batch-finalize-switch.active {
  border-color: rgba(34, 197, 94, 0.35);
  background: rgba(22, 163, 74, 0.18);
  color: #bbf7d0;
}

.asset-batch-finalize-switch.active > span {
  background: #22c55e;
}

.asset-batch-finalize-spinner {
  width: 22px;
  height: 22px;
  border: 2px solid rgba(96, 165, 250, 0.24);
  border-top-color: rgba(147, 197, 253, 0.96);
  border-radius: 999px;
  animation: asset-batch-finalize-spin 0.75s linear infinite;
}

@keyframes asset-batch-finalize-spin {
  to { transform: rotate(360deg); }
}

.asset-batch-finalize-retry {
  height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(248, 113, 113, 0.28);
  border-radius: 10px;
  background: rgba(248, 113, 113, 0.1);
  color: #fecaca;
  font-size: 12px;
  cursor: pointer;
}

.asset-batch-finalize-empty {
  margin: auto;
  max-width: 280px;
  padding: 24px;
  color: rgba(148, 163, 184, 0.9);
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
}

.asset-batch-finalize-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 24px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.asset-batch-finalize-footer > span {
  color: rgba(148, 163, 184, 0.92);
  font-size: 12px;
}

.asset-batch-finalize-footer > div {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

.asset-batch-finalize-cancel,
.asset-batch-finalize-submit {
  min-width: 116px;
  height: 42px;
  padding: 0 16px;
  border: 0;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.asset-batch-finalize-cancel {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(226, 232, 240, 0.92);
}

.asset-batch-finalize-submit {
  background: #5b45d6;
  color: #fff;
  box-shadow: 0 16px 32px rgba(91, 69, 214, 0.24);
}

.asset-batch-finalize-preview {
  position: fixed;
  inset: 0;
  z-index: 4800;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 44px;
  background: rgba(2, 6, 23, 0.76);
  backdrop-filter: blur(10px);
}

.asset-batch-finalize-preview img {
  display: block;
  max-width: min(1120px, calc(100vw - 96px));
  max-height: calc(100vh - 96px);
  object-fit: contain;
  border-radius: 14px;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.48);
}

.asset-batch-finalize-preview button {
  position: absolute;
  top: 30px;
  right: 30px;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.76);
  color: #fff;
  cursor: pointer;
}

.asset-batch-finalize-overlay.theme-light {
  background: rgba(15, 23, 42, 0.34);
}

.asset-batch-finalize-overlay.theme-light .asset-batch-finalize-modal {
  border-color: rgba(71, 85, 105, 0.18);
  background: #f8fafc;
  color: #1e293b;
}

.asset-batch-finalize-overlay.theme-light .asset-batch-finalize-header,
.asset-batch-finalize-overlay.theme-light .asset-batch-finalize-footer,
.asset-batch-finalize-overlay.theme-light .asset-batch-finalize-column > header {
  border-color: rgba(71, 85, 105, 0.14);
}

.asset-batch-finalize-overlay.theme-light .asset-batch-finalize-header h2,
.asset-batch-finalize-overlay.theme-light .asset-batch-finalize-column > header strong,
.asset-batch-finalize-overlay.theme-light .asset-batch-finalize-copy strong,
.asset-batch-finalize-overlay.theme-light .asset-batch-finalize-global strong {
  color: #0f172a;
}

.asset-batch-finalize-overlay.theme-light .asset-batch-finalize-column,
.asset-batch-finalize-overlay.theme-light .asset-batch-finalize-card,
.asset-batch-finalize-overlay.theme-light .asset-batch-finalize-global {
  border-color: rgba(71, 85, 105, 0.14);
  background: rgba(255, 255, 255, 0.88);
}

@media (max-width: 820px) {
  .asset-batch-finalize-overlay { padding: 12px; }
  .asset-batch-finalize-modal {
    width: calc(100vw - 24px);
    height: calc(100vh - 24px);
    min-height: 0;
  }
  .asset-batch-finalize-board {
    grid-template-columns: 1fr;
    overflow-y: auto;
  }
  .asset-batch-finalize-column { min-height: 360px; }
  .asset-batch-finalize-footer { align-items: stretch; flex-direction: column; }
  .asset-batch-finalize-footer > div { width: 100%; }
  .asset-batch-finalize-cancel,
  .asset-batch-finalize-submit { flex: 1; min-width: 0; }
}

@media (max-width: 1080px) {
  .storyboard-generation-workbench-overlay { padding: 16px; }
  .storyboard-generation-workbench {
    width: calc(100vw - 32px);
    height: calc(100vh - 32px);
  }
  .storyboard-generation-workbench-layout {
    grid-template-columns: 1fr;
    overflow: auto;
  }
  .storyboard-generation-workbench-left,
  .storyboard-generation-workbench-right {
    overflow: visible;
    border-right: 0;
  }
  .storyboard-generation-continuity {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .storyboard-generation-workbench-overlay { padding: 0; }
  .storyboard-generation-workbench {
    width: 100vw;
    height: 100vh;
    border: 0;
    border-radius: 0;
  }
  .storyboard-generation-workbench-left,
  .storyboard-generation-workbench-right { padding: 18px 14px; }
  .storyboard-generation-top-row,
  .storyboard-generation-bottom-row,
  .storyboard-generation-prompt-grid,
  .storyboard-generation-continuity { grid-template-columns: 1fr; }
  .storyboard-generation-prompt-grid > label { min-height: 220px; }
  .storyboard-generation-prompt-grid > label + label {
    border-top: 1px solid rgba(148, 163, 184, 0.12);
    border-left: 0;
  }
  .storyboard-generation-draft-grid,
  .storyboard-generation-tail-frame-grid { grid-template-columns: 1fr; }
  .storyboard-generation-final-grid { grid-template-columns: 1fr; }
  .storyboard-generation-final-empty,
  .storyboard-generation-drafts-empty { width: 100%; }
}
/* Storyboard prompt transformation Skill shown before video generation. */
.storyboard-prompt-skill-overlay {
  position: fixed;
  inset: 0;
  z-index: 7680;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  padding: 34px;
  background: rgba(2, 5, 12, 0.8);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.storyboard-prompt-skill-modal {
  width: min(1040px, calc(100vw - 48px));
  height: min(670px, calc(100vh - 70px));
  min-height: 520px;
  display: grid;
  grid-template-rows: 94px minmax(0, 1fr) auto 76px;
  overflow: hidden;
  border: 1px solid rgba(126, 142, 173, 0.2);
  border-radius: 16px;
  color: #d8deea;
  background: #151923;
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.58), inset 0 1px rgba(255, 255, 255, 0.04);
}

.storyboard-prompt-skill-head {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 26px;
  border-bottom: 1px solid rgba(126, 142, 173, 0.14);
  background: #181d27;
}

.storyboard-prompt-skill-head > div:first-child {
  min-width: 0;
}

.storyboard-prompt-skill-head > div:first-child > span {
  display: block;
  color: #ad79ff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
}

.storyboard-prompt-skill-head h3 {
  margin: 6px 0 0;
  overflow: hidden;
  color: #f4f6fb;
  font-size: 24px;
  font-weight: 850;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.storyboard-prompt-skill-head-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.storyboard-prompt-skill-segment {
  height: 30px;
  display: grid;
  grid-auto-flow: column;
  align-items: stretch;
  overflow: hidden;
  padding: 2px;
  border: 1px solid rgba(126, 142, 173, 0.14);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.04);
}

.storyboard-prompt-skill-segment button {
  min-width: 32px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  border: 0;
  border-radius: 5px;
  color: #7f899d;
  background: transparent;
  font-size: 12px;
  letter-spacing: 0;
  cursor: pointer;
}

.storyboard-prompt-skill-segment button:hover {
  color: #d8deea;
}

.storyboard-prompt-skill-segment button.active {
  color: #f6f3ff;
  background: #303647;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.storyboard-prompt-skill-close {
  width: 32px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 6px;
  color: #95a0b5;
  background: transparent;
  cursor: pointer;
}

.storyboard-prompt-skill-close:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}

.storyboard-prompt-skill-close svg {
  width: 19px;
  height: 19px;
}

.storyboard-prompt-skill-body {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: 272px minmax(0, 1fr);
  gap: 16px;
  padding: 22px 26px 14px;
}

.storyboard-prompt-skill-list,
.storyboard-prompt-skill-editor {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(126, 142, 173, 0.16);
  border-radius: 10px;
  background: #10141d;
}

.storyboard-prompt-skill-list {
  position: relative;
  display: grid;
  grid-template-rows: 50px minmax(0, 1fr);
  padding: 0 10px 10px;
}

.storyboard-prompt-skill-add {
  align-self: center;
  justify-self: end;
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(166, 110, 255, 0.3);
  border-radius: 7px;
  color: #b784ff;
  background: #171c27;
  cursor: pointer;
}

.storyboard-prompt-skill-add:hover {
  border-color: rgba(166, 110, 255, 0.68);
  color: #fff;
  box-shadow: 0 0 14px rgba(143, 92, 255, 0.2);
}

.storyboard-prompt-skill-add svg {
  width: 16px;
  height: 16px;
}

.storyboard-prompt-skill-list > div {
  min-height: 0;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: #343c50 transparent;
}

.storyboard-prompt-skill-row {
  position: relative;
  width: 100%;
  min-height: 43px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 25px;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  padding: 7px 8px;
  border: 1px solid transparent;
  border-radius: 7px;
  color: #cbd2df;
  background: #141924;
  text-align: left;
  cursor: pointer;
}

.storyboard-prompt-skill-row:hover {
  background: #181e2a;
}

.storyboard-prompt-skill-row.is-disabled {
  opacity: 0.58;
  cursor: default;
}

.storyboard-prompt-skill-row.active {
  border-color: rgba(166, 110, 255, 0.8);
  color: #fff;
  background: rgba(119, 72, 199, 0.31);
  box-shadow: inset 0 0 0 1px rgba(181, 135, 255, 0.12);
}

.storyboard-prompt-skill-row > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 22px;
  padding: 0 6px;
  border-radius: 5px;
  color: #95d9c3;
  background: rgba(55, 151, 119, 0.14);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0;
}

.storyboard-prompt-skill-row.active > span {
  color: #cdb2ff;
  background: rgba(133, 82, 221, 0.22);
}

.storyboard-prompt-skill-row > strong {
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  font-weight: 750;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.storyboard-prompt-skill-row > button {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #8590a3;
  opacity: 0;
  cursor: pointer;
  transition: opacity 0.16s ease, color 0.16s ease, background 0.16s ease;
  border: 0;
  padding: 0;
  background: transparent;
}

.storyboard-prompt-skill-row:hover > button,
.storyboard-prompt-skill-row:focus-within > button {
  opacity: 1;
}

.storyboard-prompt-skill-row > button:hover {
  color: #ff9da7;
  background: rgba(239, 68, 68, 0.12);
}

.storyboard-prompt-skill-row > button svg {
  width: 14px;
  height: 14px;
}

.storyboard-prompt-skill-empty {
  display: grid;
  place-items: center;
  min-height: 120px;
  color: #7f899d;
  font-size: 13px;
}

.storyboard-prompt-skill-editor {
  display: grid;
  grid-template-rows: 52px minmax(0, 1fr);
}

.storyboard-prompt-skill-editor h4,
.storyboard-prompt-skill-name {
  box-sizing: border-box;
  width: 100%;
  height: 52px;
  margin: 0;
  padding: 0 20px;
  border: 0;
  border-bottom: 1px solid rgba(126, 142, 173, 0.14);
  color: #f0f3f9;
  background: #141924;
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  line-height: 52px;
  letter-spacing: 0;
  outline: none;
}

.storyboard-prompt-skill-name:focus {
  box-shadow: inset 0 -2px #8f5cff;
}

.storyboard-prompt-skill-editor textarea {
  width: 100%;
  height: 100%;
  min-height: 0;
  resize: none;
  box-sizing: border-box;
  padding: 20px;
  border: 0;
  color: #9ca7ba;
  background: #0f131c;
  font-family: "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  line-height: 1.85;
  letter-spacing: 0;
  outline: none;
  scrollbar-width: thin;
  scrollbar-color: #343c50 transparent;
}

.storyboard-prompt-skill-editor textarea:not([readonly]):focus {
  box-shadow: inset 0 0 0 1px rgba(143, 92, 255, 0.5);
}

.storyboard-prompt-skill-modal.font-small .storyboard-prompt-skill-editor textarea {
  font-size: 12px;
}

.storyboard-prompt-skill-modal.font-large .storyboard-prompt-skill-editor textarea {
  font-size: 16px;
}

.storyboard-prompt-skill-error {
  align-self: center;
  margin: 0 26px;
  padding: 9px 12px;
  border: 1px solid rgba(248, 113, 113, 0.25);
  border-radius: 7px;
  color: #ffb3b9;
  background: rgba(127, 29, 29, 0.16);
  font-size: 12px;
}

.storyboard-prompt-skill-error:empty {
  display: none;
}

.storyboard-prompt-skill-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 26px 18px;
  border-top: 1px solid rgba(126, 142, 173, 0.12);
  background: #151923;
}

.storyboard-prompt-skill-footer button {
  min-width: 72px;
  height: 39px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 17px;
  border: 1px solid rgba(126, 142, 173, 0.2);
  border-radius: 7px;
  color: #d6dce7;
  background: #1b202c;
  font-size: 13px;
  font-weight: 750;
  letter-spacing: 0;
  cursor: pointer;
}

.storyboard-prompt-skill-footer button:hover:not(:disabled) {
  border-color: rgba(166, 110, 255, 0.52);
  color: #fff;
}

.storyboard-prompt-skill-footer button.primary {
  min-width: 92px;
  border-color: #8f5cff;
  color: #fff;
  background: linear-gradient(135deg, #8f5cff, #6d47dc);
  box-shadow: 0 8px 20px rgba(109, 71, 220, 0.24);
}

.storyboard-prompt-skill-footer button:disabled,
.storyboard-prompt-skill-close:disabled,
.storyboard-prompt-skill-add:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

.storyboard-prompt-skill-overlay.theme-light {
  background: rgba(22, 29, 43, 0.55);
}

.storyboard-prompt-skill-overlay.theme-light .storyboard-prompt-skill-modal {
  border-color: #d9deea;
  color: #4b5568;
  background: #f5f7fb;
  box-shadow: 0 30px 80px rgba(36, 45, 67, 0.24);
}

.storyboard-prompt-skill-overlay.theme-light .storyboard-prompt-skill-head,
.storyboard-prompt-skill-overlay.theme-light .storyboard-prompt-skill-footer {
  border-color: #e0e5ef;
  background: #fff;
}

.storyboard-prompt-skill-overlay.theme-light .storyboard-prompt-skill-head h3,
.storyboard-prompt-skill-overlay.theme-light .storyboard-prompt-skill-editor h4,
.storyboard-prompt-skill-overlay.theme-light .storyboard-prompt-skill-name {
  color: #242a38;
}

.storyboard-prompt-skill-overlay.theme-light .storyboard-prompt-skill-list,
.storyboard-prompt-skill-overlay.theme-light .storyboard-prompt-skill-editor {
  border-color: #dfe4ee;
  background: #fff;
}

.storyboard-prompt-skill-overlay.theme-light .storyboard-prompt-skill-row {
  color: #394153;
  background: #f7f8fb;
}

.storyboard-prompt-skill-overlay.theme-light .storyboard-prompt-skill-row:hover {
  background: #f0f2f8;
}

.storyboard-prompt-skill-overlay.theme-light .storyboard-prompt-skill-row.active {
  border-color: #8f5cff;
  color: #342451;
  background: #eee7fb;
}

.storyboard-prompt-skill-overlay.theme-light .storyboard-prompt-skill-editor h4,
.storyboard-prompt-skill-overlay.theme-light .storyboard-prompt-skill-name {
  border-color: #e3e7ef;
  background: #fafbfc;
}

.storyboard-prompt-skill-overlay.theme-light .storyboard-prompt-skill-editor textarea {
  color: #515b6e;
  background: #fff;
}

.storyboard-prompt-skill-overlay.theme-light .storyboard-prompt-skill-segment {
  border-color: #dfe4ee;
  background: #f0f2f6;
}

.storyboard-prompt-skill-overlay.theme-light .storyboard-prompt-skill-segment button {
  color: #7a8497;
}

.storyboard-prompt-skill-overlay.theme-light .storyboard-prompt-skill-segment button.active {
  color: #343b4b;
  background: #fff;
}

.storyboard-prompt-skill-overlay.theme-light .storyboard-prompt-skill-close {
  color: #6d7688;
}

@media (max-width: 800px) {
  .storyboard-prompt-skill-overlay {
    padding: 12px;
  }

  .storyboard-prompt-skill-modal {
    width: calc(100vw - 24px);
    height: calc(100vh - 24px);
    min-height: 0;
    grid-template-rows: auto minmax(0, 1fr) auto auto;
  }

  .storyboard-prompt-skill-head {
    align-items: flex-start;
    padding: 15px;
  }

  .storyboard-prompt-skill-head-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .storyboard-prompt-skill-body {
    grid-template-columns: 1fr;
    grid-template-rows: 180px minmax(0, 1fr);
    padding: 12px;
  }

  .storyboard-prompt-skill-footer {
    padding: 12px 15px;
  }
}
/* BEITA v185 authentication shell */
body[data-auth-status="checking"],
body[data-auth-status="unauthenticated"],
body[data-auth-status="error"] {
  min-width: 0;
  overflow: hidden;
}

.beita-login-page,
.beita-login-page * {
  box-sizing: border-box;
  letter-spacing: 0;
}

.beita-login-page {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 100vh;
  padding: 32px 20px;
  color: #f4f7ff;
  background: #070a12;
}

.beita-login-page::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(130, 148, 188, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(130, 148, 188, 0.045) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), transparent 82%);
}

.beita-login-theme {
  position: fixed;
  top: 22px;
  right: 24px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 7px;
  color: #b8c2d6;
  background: #0f1420;
  cursor: pointer;
}

.beita-login-theme svg {
  width: 17px;
  height: 17px;
}

.beita-login-theme:hover,
.beita-login-theme:focus-visible {
  border-color: rgba(164, 104, 255, 0.7);
  color: #ffffff;
  outline: none;
  box-shadow: 0 0 20px rgba(136, 77, 255, 0.16);
}

.beita-login-panel {
  position: relative;
  z-index: 1;
  width: min(420px, 100%);
  padding: 28px;
  border: 1px solid rgba(148, 163, 184, 0.19);
  border-radius: 8px;
  background: #0d121d;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.42);
}

.beita-login-brand {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 52px;
}

.beita-login-brand img {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 7px;
}

.beita-login-brand > div {
  display: grid;
  gap: 1px;
}

.beita-login-brand strong {
  font-size: 19px;
  line-height: 1.2;
}

.beita-login-brand span {
  color: #aeb8cb;
  font-size: 11px;
  font-weight: 800;
}

.beita-login-heading {
  padding: 30px 0 23px;
}

.beita-login-heading > span {
  color: #a268ff;
  font-size: 11px;
  font-weight: 800;
}

.beita-login-heading h1 {
  margin: 8px 0 7px;
  font-size: 25px;
  line-height: 1.3;
}

.beita-login-heading p {
  margin: 0;
  color: #8f9bb0;
  font-size: 13px;
  line-height: 1.7;
}

.beita-login-form {
  display: grid;
  gap: 16px;
}

.beita-login-form label {
  display: grid;
  gap: 8px;
}

.beita-login-form label > span {
  color: #cbd3e1;
  font-size: 12px;
  font-weight: 700;
}

.beita-login-form input {
  width: 100%;
  height: 44px;
  padding: 0 13px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 7px;
  color: #f5f7ff;
  font: inherit;
  font-size: 14px;
  background: #090e18;
  outline: none;
}

.beita-login-form input:hover {
  border-color: rgba(148, 163, 184, 0.38);
}

.beita-login-form input:focus {
  border-color: #8b5cf6;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.13);
}

.beita-login-error {
  min-height: 34px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 111, 143, 0.28);
  border-radius: 6px;
  color: #ff9db3;
  font-size: 12px;
  line-height: 1.45;
  background: rgba(255, 111, 143, 0.07);
}

.beita-login-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 44px;
  margin-top: 2px;
  border: 1px solid #8b5cf6;
  border-radius: 7px;
  color: #ffffff;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  background: #7544dc;
  cursor: pointer;
}

.beita-login-submit:hover:not(:disabled),
.beita-login-submit:focus-visible:not(:disabled) {
  background: #8353e7;
  box-shadow: 0 0 22px rgba(139, 92, 246, 0.24);
  outline: none;
}

.beita-login-submit:disabled {
  cursor: wait;
  opacity: 0.68;
}

.beita-login-panel footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid rgba(148, 163, 184, 0.13);
  color: #667287;
  font-size: 10px;
  font-weight: 700;
}

.beita-login-checking {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 72px;
  color: #aeb8cb;
  font-size: 13px;
}

.beita-login-checking i {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(139, 92, 246, 0.25);
  border-top-color: #9b72f5;
  border-radius: 50%;
  animation: beita-auth-spin 0.8s linear infinite;
}

.topbar-logout {
  flex: 0 0 auto;
  margin-left: 8px;
}

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

body[data-theme="light"] .beita-login-page {
  color: #172033;
  background: #edf1f6;
}

body[data-theme="light"] .beita-login-page::before {
  background-image:
    linear-gradient(rgba(74, 92, 125, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74, 92, 125, 0.06) 1px, transparent 1px);
}

body[data-theme="light"] .beita-login-panel {
  border-color: rgba(82, 99, 128, 0.2);
  background: #ffffff;
  box-shadow: 0 26px 70px rgba(59, 72, 97, 0.16);
}

body[data-theme="light"] .beita-login-theme,
body[data-theme="light"] .beita-login-form input {
  color: #253047;
  border-color: rgba(82, 99, 128, 0.23);
  background: #f7f9fc;
}

body[data-theme="light"] .beita-login-form label > span {
  color: #3d485d;
}

body[data-theme="light"] .beita-login-heading p,
body[data-theme="light"] .beita-login-brand span {
  color: #647187;
}

@media (max-width: 560px) {
  .beita-login-page { padding: 20px 14px; }
  .beita-login-panel { padding: 24px 20px; }
  .beita-login-theme { top: 14px; right: 14px; }
}

/* v186: mature platform login composition */
.beita-login-page {
  display: grid;
  grid-template-columns: minmax(520px, 1.08fr) minmax(420px, 0.92fr);
  place-items: stretch;
  min-height: 100vh;
  padding: 0;
  background: #0b0f18;
}

.beita-login-page::before {
  display: none;
}

.beita-login-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 100vh;
  padding: 34px 42px;
  overflow: hidden;
  border-right: 1px solid rgba(155, 170, 204, 0.14);
  background: #070a12;
}

.beita-login-stage::after {
  content: "BEITA";
  position: absolute;
  right: -20px;
  bottom: -50px;
  color: rgba(255, 255, 255, 0.025);
  font-size: 190px;
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
}

.beita-login-stage-brand {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
}

.beita-login-stage-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 7px;
  background: #080b13;
}

.beita-login-stage-mark img {
  width: 48px;
  height: 48px;
  object-fit: cover;
}

.beita-login-stage-brand > div {
  display: grid;
  gap: 2px;
}

.beita-login-stage-brand strong {
  color: #ffffff;
  font-size: 17px;
  line-height: 1.1;
}

.beita-login-stage-brand span {
  color: #8f9bb1;
  font-size: 10px;
  font-weight: 800;
}

.beita-login-stage-center {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(180px, 310px) minmax(220px, 1fr);
  align-items: center;
  gap: clamp(20px, 4vw, 58px);
  width: min(760px, 100%);
  margin: auto;
}

.beita-login-stage-center > img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.44);
}

.beita-login-stage-center > div > span {
  color: #9d6cff;
  font-size: 11px;
  font-weight: 900;
}

.beita-login-stage-center h2 {
  margin: 12px 0 12px;
  color: #f8f9ff;
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.2;
}

.beita-login-stage-center p {
  margin: 0;
  color: #909caf;
  font-size: 14px;
  line-height: 1.8;
}

.beita-login-stage > footer {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #505b6e;
  font-size: 9px;
  font-weight: 800;
}

.beita-login-panel {
  align-self: center;
  justify-self: center;
  width: min(430px, calc(100% - 64px));
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.beita-login-heading {
  padding: 0 0 32px;
}

.beita-login-heading > span {
  color: #9c72f0;
}

.beita-login-heading h1 {
  margin-top: 10px;
  font-size: 32px;
}

.beita-login-form {
  gap: 19px;
}

.beita-login-form input {
  height: 48px;
  padding: 0 15px;
  border-color: rgba(157, 172, 204, 0.24);
  background: #090d16;
}

.beita-login-submit {
  height: 48px;
  margin-top: 5px;
  border-color: #8858e8;
  background: #7c4cda;
}

.beita-login-panel > footer {
  margin-top: 32px;
  padding-top: 20px;
}

body[data-theme="light"] .beita-login-page {
  color: #172033;
  background: #f8fafc;
}

body[data-theme="light"] .beita-login-stage {
  border-color: rgba(255, 255, 255, 0.08);
  background: #0a0d15;
}

body[data-theme="light"] .beita-login-panel {
  border: 0;
  background: transparent;
  box-shadow: none;
}

body[data-theme="light"] .beita-login-form input {
  background: #ffffff;
}

@media (max-width: 980px) {
  .beita-login-page {
    grid-template-columns: minmax(280px, 0.8fr) minmax(400px, 1.2fr);
  }
  .beita-login-stage {
    padding: 28px;
  }
  .beita-login-stage-center {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .beita-login-stage-center > img {
    width: min(240px, 100%);
  }
  .beita-login-stage-center h2 {
    font-size: 30px;
  }
}

@media (max-width: 720px) {
  .beita-login-page {
    display: block;
    min-height: 100vh;
    padding: 0 20px 34px;
    background: #0b0f18;
  }
  .beita-login-stage {
    min-height: 174px;
    margin: 0 -20px 34px;
    padding: 22px 24px;
    border-right: 0;
    border-bottom: 1px solid rgba(155, 170, 204, 0.14);
  }
  .beita-login-stage-center {
    grid-template-columns: 70px 1fr;
    gap: 18px;
    margin: 26px 0 0;
  }
  .beita-login-stage-center > img {
    width: 70px;
  }
  .beita-login-stage-center h2 {
    margin: 5px 0 0;
    font-size: 21px;
  }
  .beita-login-stage-center p,
  .beita-login-stage-center > div > span,
  .beita-login-stage > footer {
    display: none;
  }
  .beita-login-panel {
    width: min(430px, 100%);
    margin: 0 auto;
  }
  .beita-login-theme {
    top: 18px;
    right: 18px;
  }
}

/* v203 final login composition. Keep this block last so legacy rules cannot override it. */
.beita-login-page,
body[data-theme="light"] .beita-login-page {
  display: grid;
  grid-template-columns: minmax(520px, 1.08fr) minmax(420px, 0.92fr);
  place-items: stretch;
  min-height: 100vh;
  padding: 0;
  color: #172033;
  background: #ffffff;
}

.beita-login-page::before,
.beita-login-page .beita-login-theme {
  display: none;
}

.beita-login-stage,
body[data-theme="light"] .beita-login-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 100vh;
  padding: 34px 42px;
  overflow: hidden;
  isolation: isolate;
  border-right: 1px solid rgba(155, 170, 204, 0.14);
  background: #03060f;
}

.beita-login-stage-brand {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 92px;
}

.beita-login-stage-mark,
.beita-login-stage-mark img {
  display: block;
  flex: 0 0 90px;
  width: 90px !important;
  height: 90px !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  object-fit: contain;
  mix-blend-mode: normal;
}

.beita-login-stage-brand > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 180px !important;
  min-height: 0;
  gap: 8px;
}

.beita-login-stage-brand .beita-wordmark-cn,
.beita-login-stage-brand .beita-wordmark-en {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  width: 180px !important;
  white-space: nowrap;
}

.beita-login-stage-brand .beita-wordmark-cn {
  color: #ffffff;
  font-size: 34px !important;
  font-weight: 900;
  line-height: 1;
}

.beita-login-stage-brand .beita-wordmark-en {
  color: #b7c1d3;
  font-size: 14px !important;
  font-weight: 900;
  line-height: 1;
  text-align: left;
}

.beita-login-stage-brand .beita-wordmark-cn i,
.beita-login-stage-brand .beita-wordmark-en i {
  display: block;
  flex: 0 0 auto;
  font-style: normal;
  line-height: 1;
}

.beita-login-stage-center {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(190px, 270px) minmax(220px, 1fr);
  align-items: center;
  gap: clamp(20px, 4vw, 58px);
  width: min(760px, 100%);
  margin: auto;
}

.beita-login-stage-center > img {
  display: block;
  width: min(270px, 100%) !important;
  aspect-ratio: 1;
  object-fit: contain;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  clip-path: none;
  mix-blend-mode: normal;
  animation: beita-logo-breathe 5.5s ease-in-out infinite;
}

.beita-login-panel,
body[data-theme="light"] .beita-login-panel {
  align-self: center;
  justify-self: center;
  width: min(410px, calc(100% - 64px));
  padding: 0;
  border: 0;
  border-radius: 0;
  color: #172033;
  background: transparent;
  box-shadow: none;
}

.beita-login-panel .beita-login-heading {
  padding: 0 0 28px;
}

.beita-login-panel .beita-login-heading h1 {
  margin: 14px 0 8px;
  color: #172033;
  font-size: 31px;
}

.beita-login-panel .beita-login-heading p {
  color: #667085;
  font-size: 13px;
}

.beita-login-form {
  display: grid;
  gap: 17px;
}

.beita-login-form .beita-login-field {
  display: grid;
  gap: 8px;
}

.beita-login-form .beita-login-field > span {
  color: #465269;
  font-size: 11px;
  font-weight: 700;
}

.beita-login-form .beita-login-field > div {
  display: flex;
  align-items: center;
  width: 100%;
  height: 46px;
  padding: 0 11px;
  border: 1px solid rgba(82, 99, 128, 0.24);
  border-radius: 7px;
  color: #7b879a;
  background: #ffffff;
}

.beita-login-form .beita-login-field > div:focus-within {
  color: #7041c7;
  border-color: #7c4cda;
  box-shadow: 0 0 0 3px rgba(124, 76, 218, 0.1);
}

.beita-login-form .beita-login-field input {
  flex: 1 1 auto;
  width: 0;
  height: 44px;
  min-width: 0;
  padding: 0 10px;
  border: 0;
  border-radius: 0;
  color: #1e293b;
  background: transparent;
  box-shadow: none;
}

.beita-login-form .beita-login-field input:focus,
.beita-login-form .beita-login-field input:hover {
  border: 0;
  box-shadow: none;
}

.beita-login-form .beita-login-options {
  min-height: 17px;
  margin-top: -7px;
}

.beita-login-form .beita-login-options label {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 17px;
  cursor: pointer;
}

.beita-login-form .beita-login-options input[type="checkbox"] {
  position: absolute;
  width: 1px !important;
  height: 1px !important;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.beita-login-form .beita-login-options label > span {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 17px;
  padding-left: 21px;
  color: #667085;
  font-size: 11px;
  line-height: 17px;
}

.beita-login-form .beita-login-options label > span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 13px;
  height: 13px;
  border: 1px solid rgba(82, 99, 128, 0.4);
  border-radius: 3px;
  background: #ffffff;
}

.beita-login-form .beita-login-options label > span::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 5px;
  width: 6px;
  height: 3px;
  border-left: 1.5px solid #ffffff;
  border-bottom: 1.5px solid #ffffff;
  opacity: 0;
  transform: rotate(-45deg);
}

.beita-login-form .beita-login-options input[type="checkbox"]:checked + span::before {
  border-color: #8353e7;
  background: #8353e7;
}

.beita-login-form .beita-login-options input[type="checkbox"]:checked + span::after {
  opacity: 1;
}

.beita-login-panel .beita-login-captcha,
.beita-login-panel .beita-login-captcha-retry {
  color: #59667c;
  border-color: rgba(82, 99, 128, 0.22);
  background: #f8fafc;
}

.beita-login-panel .beita-login-captcha-options button {
  color: #354159;
  border-color: rgba(82, 99, 128, 0.2);
  background: #ffffff;
}

.beita-login-submit {
  height: 46px;
  margin-top: 1px;
  font-size: 13px;
}

@media (max-width: 980px) {
  .beita-login-page,
  body[data-theme="light"] .beita-login-page {
    grid-template-columns: minmax(300px, 0.8fr) minmax(400px, 1.2fr);
  }
  .beita-login-stage {
    padding: 28px;
  }
  .beita-login-stage-center {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .beita-login-page,
  body[data-theme="light"] .beita-login-page {
    display: block;
    padding: 0 20px 34px;
    background: #ffffff;
  }
  .beita-login-stage {
    min-height: 190px;
    margin: 0 -20px 34px;
    padding: 20px 24px;
    border-right: 0;
  }
  .beita-login-stage-mark,
  .beita-login-stage-mark img {
    flex-basis: 68px;
    width: 68px !important;
    height: 68px !important;
  }
  .beita-login-stage-brand > div,
  .beita-login-stage-brand .beita-wordmark-cn,
  .beita-login-stage-brand .beita-wordmark-en {
    width: 132px !important;
  }
  .beita-login-stage-brand .beita-wordmark-cn {
    font-size: 25px !important;
  }
  .beita-login-stage-brand .beita-wordmark-en {
    font-size: 11px !important;
  }
  .beita-login-stage-center {
    display: none;
  }
  .beita-login-panel {
    width: min(410px, 100%);
    margin: 0 auto;
  }
}