.nav-link {
  display: block;
  border-radius: 6px;
  padding: 10px 12px;
  color: rgb(51 65 85);
}

/* AI audio clone workbench */
.app-content:has(.ai-audio-clone-workbench) {
  padding: 20px 16px 32px;
}

.ai-audio-clone-workbench {
  width: 100%;
  max-width: 1560px;
  margin: 0 auto;
  gap: 14px;
  color: var(--admin-text);
}

.ai-audio-clone-workbench .users-header {
  min-height: 58px;
  align-items: center;
  padding: 0 2px;
}

.ai-audio-clone-workbench .users-header h1 {
  color: var(--admin-text);
  font-size: 24px;
}

.ai-audio-clone-workbench .users-header p:last-child {
  color: var(--admin-muted);
}

.audio-clone-service-state {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: 7px;
  border: 1px solid rgb(228 119 119 / 38%);
  border-radius: 7px;
  background: rgb(228 119 119 / 10%);
  padding: 0 11px;
  color: var(--admin-danger);
  font-size: 12px;
  font-weight: 800;
}

.audio-clone-service-state.is-ready {
  border-color: rgb(111 210 154 / 36%);
  background: rgb(111 210 154 / 10%);
  color: var(--admin-success);
}

.audio-clone-service-state svg {
  width: 15px;
  height: 15px;
}

.audio-clone-alert {
  border: 1px solid rgb(228 119 119 / 44%);
  border-radius: 7px;
  background: rgb(228 119 119 / 10%);
  padding: 10px 12px;
  color: #f0a3a3;
  font-size: 13px;
  font-weight: 750;
}

.audio-clone-alert.is-success {
  border-color: rgb(111 210 154 / 38%);
  background: rgb(111 210 154 / 10%);
  color: var(--admin-success);
}

.audio-clone-form {
  display: grid;
  gap: 12px;
}

.audio-clone-compose-grid {
  display: grid;
  grid-template-columns: minmax(250px, 1fr) minmax(300px, 1.18fr) minmax(250px, 0.92fr);
  gap: 12px;
}

.audio-clone-tool-panel {
  display: grid;
  min-width: 0;
  min-height: 320px;
  overflow: hidden;
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  background: #101419;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 3%);
}

.audio-clone-panel-heading {
  display: flex;
  height: 48px;
  align-items: center;
  gap: 9px;
  border-bottom: 1px solid var(--admin-border);
  padding: 0 14px;
  color: var(--admin-text);
}

.audio-clone-panel-heading > svg,
.audio-clone-panel-heading > i,
.audio-clone-panel-heading-split > span > svg,
.audio-clone-panel-heading-split > span > i {
  width: 16px;
  height: 16px;
  color: var(--admin-accent);
}

.audio-clone-panel-heading h2 {
  font-size: 14px;
  font-weight: 850;
}

.audio-clone-panel-heading-split {
  justify-content: space-between;
}

.audio-clone-panel-heading-split > span {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
}

.audio-clone-language {
  height: 30px;
  border: 1px solid var(--admin-border-strong);
  border-radius: 6px;
  background: #0b1016;
  padding: 0 28px 0 9px;
  color: var(--admin-muted);
  font-size: 12px;
  font-weight: 750;
}

.audio-clone-voice-panel {
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.audio-clone-upload {
  display: grid;
  min-height: 210px;
  place-items: center;
  align-content: center;
  gap: 7px;
  margin: 12px;
  border: 1px dashed #344453;
  border-radius: 7px;
  background: #0b0f14;
  padding: 18px;
  cursor: pointer;
  text-align: center;
  transition: border-color 150ms ease, background 150ms ease;
}

.audio-clone-upload:hover,
.audio-clone-upload.is-drag-over {
  border-color: var(--admin-accent);
  background: rgb(99 183 220 / 7%);
}

.audio-clone-upload input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

.audio-clone-upload-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgb(99 183 220 / 28%);
  border-radius: 50%;
  background: rgb(99 183 220 / 9%);
  color: var(--admin-accent);
}

.audio-clone-upload-icon svg {
  width: 20px;
  height: 20px;
}

.audio-clone-upload strong {
  max-width: 100%;
  overflow: hidden;
  color: var(--admin-text);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.audio-clone-upload small {
  color: var(--admin-faint);
  font-size: 11px;
}

.audio-clone-source-player {
  position: relative;
  border-top: 1px solid var(--admin-border);
  padding: 10px 48px 10px 12px;
}

.audio-clone-source-player audio {
  display: block;
  width: 100%;
  height: 34px;
}

.audio-clone-source-player button {
  position: absolute;
  top: 10px;
  right: 11px;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--admin-border-strong);
  border-radius: 6px;
  background: #171d24;
  color: var(--admin-muted);
  cursor: pointer;
}

.audio-clone-source-player button svg {
  width: 15px;
  height: 15px;
}

.audio-clone-text-panel {
  grid-template-rows: auto minmax(150px, 1fr) auto auto;
}

.audio-clone-text-panel textarea {
  width: 100%;
  min-height: 150px;
  resize: none;
  border: 0;
  border-radius: 0;
  background: #0b0f14;
  padding: 16px;
  color: var(--admin-text);
  font-size: 14px;
  line-height: 1.65;
  outline: 0;
}

.audio-clone-text-panel textarea:focus {
  box-shadow: inset 0 0 0 1px var(--admin-accent);
}

.audio-clone-text-footer {
  display: flex;
  min-height: 30px;
  align-items: center;
  justify-content: flex-end;
  border-top: 1px solid var(--admin-border);
  padding: 0 12px;
  color: var(--admin-faint);
  font-size: 11px;
}

.audio-clone-generate {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-top: 1px solid rgb(99 183 220 / 25%);
  background: var(--admin-accent);
  color: #071217;
  cursor: pointer;
  font-size: 14px;
  font-weight: 900;
}

.audio-clone-generate:hover {
  background: var(--admin-accent-strong);
}

.audio-clone-generate:disabled {
  cursor: not-allowed;
  filter: saturate(0.2);
  opacity: 0.46;
}

.audio-clone-generate svg {
  width: 16px;
  height: 16px;
}

.audio-clone-result-panel {
  grid-template-rows: auto minmax(0, 1fr);
}

.audio-clone-result {
  display: grid;
  min-height: 250px;
  place-items: center;
  padding: 18px;
}

.audio-clone-result-empty,
.audio-clone-result-running,
.audio-clone-result-ready {
  display: grid;
  width: 100%;
  place-items: center;
  gap: 9px;
  text-align: center;
}

.audio-clone-result-empty svg {
  width: 34px;
  height: 34px;
  color: #465362;
}

.audio-clone-result-empty span,
.audio-clone-result-running small,
.audio-clone-result-ready small {
  max-width: 100%;
  color: var(--admin-faint);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.audio-clone-result-running strong,
.audio-clone-result-ready strong {
  color: var(--admin-text);
  font-size: 14px;
}

.audio-clone-result-running.is-failed strong,
.audio-clone-result-running.is-failed small {
  color: var(--admin-danger);
}

.audio-clone-spinner {
  width: 30px;
  height: 30px;
  border: 3px solid rgb(99 183 220 / 18%);
  border-top-color: var(--admin-accent);
  border-radius: 50%;
  animation: audio-clone-spin 800ms linear infinite;
}

.audio-clone-result-running.is-failed .audio-clone-spinner {
  border: 0;
  animation: none;
}

.audio-clone-result-icon {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid rgb(111 210 154 / 36%);
  border-radius: 50%;
  background: rgb(111 210 154 / 10%);
  color: var(--admin-success);
}

.audio-clone-result-icon svg {
  width: 20px;
  height: 20px;
}

.audio-clone-result-ready audio {
  width: 100%;
  height: 36px;
  margin: 5px 0;
}

.audio-clone-result-ready .btn-secondary {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: 7px;
  border-radius: 6px;
  padding: 0 12px;
  font-size: 12px;
  text-decoration: none;
}

.audio-clone-result-ready .btn-secondary svg {
  width: 14px;
  height: 14px;
}

.audio-clone-settings {
  overflow: hidden;
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  background: #101419;
}

.audio-clone-settings summary {
  display: flex;
  min-height: 46px;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  color: var(--admin-text);
  cursor: pointer;
  font-size: 13px;
  font-weight: 850;
  list-style: none;
}

.audio-clone-settings summary::-webkit-details-marker {
  display: none;
}

.audio-clone-settings summary span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.audio-clone-settings summary svg {
  width: 15px;
  height: 15px;
  color: var(--admin-accent);
}

.audio-clone-settings summary > svg {
  transition: transform 150ms ease;
}

.audio-clone-settings[open] summary > svg {
  transform: rotate(180deg);
}

.audio-clone-settings-body {
  display: grid;
  gap: 14px;
  border-top: 1px solid var(--admin-border);
  background: #0d1116;
  padding: 14px;
}

.audio-clone-mode-fieldset {
  min-width: 0;
  border: 0;
}

.audio-clone-mode-fieldset legend,
.audio-clone-setting-field > span {
  margin-bottom: 8px;
  color: var(--admin-muted);
  font-size: 12px;
  font-weight: 800;
}

.audio-clone-mode-segments {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.audio-clone-mode-segments label {
  min-width: 0;
}

.audio-clone-mode-segments input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.audio-clone-mode-segments span {
  display: grid;
  min-height: 38px;
  place-items: center;
  border: 1px solid var(--admin-border-strong);
  border-radius: 6px;
  background: #0d1218;
  padding: 7px 10px;
  color: var(--admin-muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.audio-clone-mode-segments input:checked + span {
  border-color: var(--admin-accent);
  background: rgb(99 183 220 / 12%);
  color: var(--admin-accent-strong);
}

.audio-clone-mode-panel {
  border-top: 1px solid var(--admin-border);
  padding-top: 14px;
}

.audio-clone-compact-upload {
  display: flex;
  min-height: 40px;
  align-items: center;
  gap: 9px;
  width: fit-content;
  border: 1px solid var(--admin-border-strong);
  border-radius: 6px;
  background: #0d1218;
  padding: 0 12px;
  color: var(--admin-muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
}

.audio-clone-compact-upload input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.audio-clone-compact-upload svg {
  width: 15px;
  height: 15px;
  color: var(--admin-accent);
}

.audio-clone-vector-grid {
  grid-template-columns: repeat(4, minmax(140px, 1fr));
  gap: 12px 16px;
}

.audio-clone-vector-grid:not([hidden]) {
  display: grid;
}

.audio-clone-vector-grid label,
.audio-clone-setting-field {
  display: grid;
  min-width: 0;
  gap: 7px;
}

.audio-clone-vector-grid label span {
  display: flex;
  justify-content: space-between;
  color: var(--admin-muted);
  font-size: 11px;
  font-weight: 750;
}

.audio-clone-vector-grid > small {
  grid-column: 1 / -1;
  color: var(--admin-faint);
  font-size: 11px;
  text-align: right;
}

.audio-clone-setting-field textarea {
  min-height: 72px;
  resize: vertical;
  border: 1px solid var(--admin-border-strong);
  border-radius: 6px;
  background: #0b1016;
  padding: 10px 11px;
  color: var(--admin-text);
  font-size: 13px;
}

.audio-clone-setting-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  border-top: 1px solid var(--admin-border);
  padding-top: 14px;
}

.audio-clone-setting-field input[type="range"],
.audio-clone-vector-grid input[type="range"] {
  width: 100%;
  accent-color: var(--admin-accent);
}

.audio-clone-history {
  overflow: hidden;
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  background: #101419;
}

.audio-clone-history-head {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--admin-border);
  padding: 0 14px;
}

.audio-clone-history-head > div {
  display: flex;
  align-items: baseline;
  gap: 9px;
}

.audio-clone-history-head h2 {
  color: var(--admin-text);
  font-size: 14px;
  font-weight: 850;
}

.audio-clone-history-head span {
  color: var(--admin-faint);
  font-size: 11px;
}

.audio-clone-history-head button {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid var(--admin-border-strong);
  border-radius: 6px;
  background: #171d24;
  color: var(--admin-muted);
  cursor: pointer;
}

.audio-clone-history-head button:disabled {
  cursor: wait;
  opacity: 0.5;
}

.audio-clone-history-head button svg {
  width: 14px;
  height: 14px;
}

.audio-clone-history-list {
  display: grid;
}

.audio-clone-history-empty {
  display: grid;
  min-height: 82px;
  place-items: center;
  color: var(--admin-faint);
  font-size: 12px;
}

.audio-clone-history-row {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr) auto;
  min-height: 68px;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid var(--admin-border);
  padding: 10px 14px;
}

.audio-clone-history-row:last-child {
  border-bottom: 0;
}

.audio-clone-status {
  display: inline-flex;
  width: fit-content;
  min-height: 26px;
  align-items: center;
  border: 1px solid rgb(221 184 106 / 38%);
  border-radius: 999px;
  background: rgb(221 184 106 / 10%);
  padding: 0 8px;
  color: var(--admin-warning);
  font-size: 11px;
  font-weight: 850;
}

.audio-clone-status.is-succeeded {
  border-color: rgb(111 210 154 / 38%);
  background: rgb(111 210 154 / 10%);
  color: var(--admin-success);
}

.audio-clone-status.is-failed {
  border-color: rgb(228 119 119 / 42%);
  background: rgb(228 119 119 / 10%);
  color: var(--admin-danger);
}

.audio-clone-history-copy {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.audio-clone-history-copy strong {
  overflow: hidden;
  color: var(--admin-text);
  font-size: 13px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.audio-clone-history-copy small {
  overflow: hidden;
  color: var(--admin-faint);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.audio-clone-history-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

.audio-clone-history-actions button,
.audio-clone-history-actions a {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--admin-border-strong);
  border-radius: 6px;
  background: #171d24;
  padding: 0 9px;
  color: var(--admin-muted);
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
  text-decoration: none;
}

.audio-clone-history-actions button:hover,
.audio-clone-history-actions a:hover {
  border-color: var(--admin-accent);
  color: var(--admin-accent-strong);
}

.audio-clone-history-actions svg {
  width: 13px;
  height: 13px;
}

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

@media (max-width: 1080px) {
  .audio-clone-compose-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .audio-clone-result-panel {
    grid-column: 1 / -1;
    min-height: 220px;
  }

  .audio-clone-result {
    min-height: 170px;
  }
}

@media (max-width: 720px) {
  .app-content:has(.ai-audio-clone-workbench) {
    padding: 14px 10px 24px;
  }

  .ai-audio-clone-workbench .users-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .audio-clone-compose-grid,
  .audio-clone-setting-row,
  .audio-clone-mode-segments,
  .audio-clone-vector-grid:not([hidden]) {
    grid-template-columns: 1fr;
  }

  .audio-clone-result-panel {
    grid-column: auto;
  }

  .audio-clone-history-row {
    grid-template-columns: 76px minmax(0, 1fr);
  }

  .audio-clone-history-actions {
    grid-column: 2;
  }
}

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

.material-studio {
  --material-bg: #070707;
  --material-panel: #101113;
  --material-panel-soft: #17191c;
  --material-line: #2a2d33;
  --material-text: #f7f7f8;
  --material-muted: #8d929c;
  --material-accent: #4a9fd8;
  --material-success: #66e6a8;
  --material-warning: #e7b865;
  overflow: hidden;
  margin: -18px;
  border-radius: 8px;
  background:
    radial-gradient(circle at 70% -10%, rgb(74 159 216 / 0.28), transparent 34%),
    linear-gradient(180deg, #070707, #0b0c0e 60%, #070707);
  padding: 22px;
  color: var(--material-text);
}

.material-studio[data-material-theme="light"] {
  --material-bg: #f7f8fa;
  --material-panel: #ffffff;
  --material-panel-soft: #f1f4f8;
  --material-line: #d7dde6;
  --material-text: #101317;
  --material-muted: #5c6673;
  --material-accent: #0f68a8;
  --material-success: #087f5b;
  --material-warning: #9a6500;
  background:
    radial-gradient(circle at 70% -10%, rgb(74 159 216 / 0.18), transparent 32%),
    linear-gradient(180deg, #fbfcfe, #eef2f7);
}

.material-studio .materials-header {
  align-items: start;
}

.material-studio .materials-header h1 {
  color: var(--material-text);
  font-size: 42px;
}

.material-studio .materials-header p {
  color: var(--material-muted);
}

.materials-header-actions {
  display: grid;
  justify-items: end;
  gap: 10px;
}

.material-theme-toggle {
  border-radius: 6px;
  border: 1px solid var(--material-line);
  background: var(--material-panel);
  padding: 10px 12px;
  color: var(--material-text);
  font-size: 12px;
  font-weight: 800;
}

.material-command-center {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.72fr);
  gap: 16px;
  border-radius: 8px;
  border: 1px solid var(--material-line);
  background: linear-gradient(135deg, var(--material-panel), var(--material-panel-soft));
  padding: 20px;
  box-shadow: 0 24px 80px rgb(0 0 0 / 0.28);
}

.material-command-copy {
  display: grid;
  gap: 8px;
}

.material-command-copy h2 {
  color: var(--material-text);
  font-size: 24px;
  font-weight: 800;
}

.material-command-copy p {
  max-width: 68ch;
  color: var(--material-muted);
  font-size: 14px;
  font-weight: 700;
}

.material-command-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.material-command-metrics div {
  min-width: 0;
  border-radius: 8px;
  border: 1px solid var(--material-line);
  background: rgb(0 0 0 / 0.2);
  padding: 12px;
}

.material-studio[data-material-theme="light"] .material-command-metrics div {
  background: rgb(255 255 255 / 0.72);
}

.material-command-metrics strong {
  display: block;
  color: var(--material-text);
  font-size: 24px;
  font-weight: 800;
}

.material-command-metrics span {
  display: block;
  margin-top: 4px;
  color: var(--material-muted);
  font-size: 12px;
  font-weight: 800;
}

.material-studio .materials-health span,
.material-studio .status-pill,
.material-studio .group-strip span {
  border-color: var(--material-line);
  background: var(--material-panel-soft);
  color: var(--material-text);
}

.material-studio .materials-layout {
  grid-template-columns: 238px minmax(0, 1fr);
}

.material-studio .material-tabs,
.material-studio .material-panel-head,
.material-studio .material-form,
.material-studio .material-list,
.material-studio .portrait-group-section,
.material-studio .material-import-workbench,
.material-studio .material-import-primary,
.material-studio .material-import-secondary,
.material-studio .material-group-block,
.material-studio .library-row,
.material-studio .scene-card,
.material-studio .portrait-asset-card,
.material-studio .real-asset-card {
  border-color: var(--material-line);
  background: var(--material-panel);
  color: var(--material-text);
}

.material-studio .material-toolbar {
  border-color: var(--material-line);
  background: var(--material-panel-soft);
}

.material-studio .material-tab {
  color: var(--material-muted);
}

.material-studio .material-tab small {
  color: var(--material-muted);
}

.material-studio .material-tab:hover {
  background: var(--material-panel-soft);
  color: var(--material-text);
}

.material-studio .material-tab.is-active {
  background: var(--material-text);
  color: var(--material-bg);
}

.material-studio .material-tab.is-active small {
  color: var(--material-bg);
}

.material-studio .material-panel-head h2,
.material-studio .material-import-secondary h3,
.material-studio .material-group-head h3,
.material-studio .list-heading h2,
.material-studio .library-row h3,
.material-studio .scene-card h3 {
  color: var(--material-text);
}

.material-studio .material-panel-head h2 {
  font-size: 18px;
  font-weight: 800;
}

.material-studio .list-heading h2 {
  font-size: 16px;
  font-weight: 800;
}

.material-studio .material-panel-head p,
.material-studio .material-import-secondary p,
.material-studio .material-group-head p,
.material-studio .library-row p,
.material-studio .scene-card p,
.material-studio .portrait-asset-card span,
.material-studio .real-asset-card span {
  color: var(--material-muted);
  font-size: 13px;
}

.material-studio .input,
.material-studio select,
.material-studio textarea {
  border-color: var(--material-line);
  background: var(--material-bg);
  color: var(--material-text);
}

.material-studio[data-material-theme="light"] .input,
.material-studio[data-material-theme="light"] select,
.material-studio[data-material-theme="light"] textarea {
  background: white;
}

.material-studio .upload-drop,
.material-studio .bulk-upload-queue,
.material-studio .empty-state {
  border-color: var(--material-line);
  background: var(--material-bg);
  color: var(--material-muted);
}

.material-studio .btn-primary {
  background: var(--material-accent);
  color: white;
}

.material-studio .btn-secondary {
  border-color: var(--material-line);
  background: var(--material-panel-soft);
  color: var(--material-text);
}

.material-studio .status-active {
  border-color: rgb(102 230 168 / 0.52);
  background: rgb(102 230 168 / 0.14);
  color: var(--material-success);
}

.material-studio .status-pending {
  border-color: rgb(231 184 101 / 0.56);
  background: rgb(231 184 101 / 0.14);
  color: var(--material-warning);
}

.material-studio .material-notice {
  border-color: rgb(102 230 168 / 0.42);
  background: rgb(102 230 168 / 0.14);
  color: var(--material-success);
}

@media (max-width: 980px) {
  .material-command-center,
  .material-command-metrics {
    grid-template-columns: 1fr;
  }
}

.material-studio {
  --asset-card: #111316;
  --asset-card-elevated: #171a1f;
  --asset-blue: #4aa7df;
  --asset-cyan: #63c7ff;
  --asset-green: #62efad;
  --asset-yellow: #f3c765;
  min-height: 100vh;
  padding: 24px 32px 30px;
  background:
    radial-gradient(circle at 76% 0%, rgb(74 167 223 / 0.18), transparent 28%),
    linear-gradient(180deg, #08090a, #070707 58%, #050505);
}

.material-studio[data-material-theme="light"] {
  --asset-card: #ffffff;
  --asset-card-elevated: #f5f7fa;
  --asset-blue: #0f7cc2;
  --asset-cyan: #0f7cc2;
  --asset-green: #087f5b;
  --asset-yellow: #a96700;
  background:
    radial-gradient(circle at 76% 0%, rgb(74 167 223 / 0.16), transparent 28%),
    linear-gradient(180deg, #ffffff, #eef2f7);
}

.asset-console-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  min-height: calc(100vh - 68px);
}

.asset-console-rail,
.asset-side-card,
.asset-stat-card,
.material-studio .material-panel-head,
.material-studio .material-import-workbench,
.material-studio .material-list {
  border: 1px solid var(--material-line);
  background: rgb(17 19 22 / 0.92);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.03);
}

.material-studio[data-material-theme="light"] .asset-console-rail,
.material-studio[data-material-theme="light"] .asset-side-card,
.material-studio[data-material-theme="light"] .asset-stat-card,
.material-studio[data-material-theme="light"] .material-panel-head,
.material-studio[data-material-theme="light"] .material-import-workbench,
.material-studio[data-material-theme="light"] .material-list {
  background: rgb(255 255 255 / 0.92);
  box-shadow: 0 12px 36px rgb(15 23 42 / 0.07);
}

.asset-console-rail {
  position: sticky;
  top: 12px;
  display: grid;
  align-content: start;
  gap: 22px;
  height: calc(100vh - 60px);
  overflow: auto;
  border-radius: 8px;
  padding: 24px 18px;
}

.asset-console-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.asset-console-logo {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 8px;
  background: var(--material-text);
  color: var(--material-bg);
  font-size: 18px;
  font-weight: 900;
}

.asset-console-brand strong,
.asset-console-brand small {
  display: block;
}

.asset-console-brand strong {
  color: var(--material-text);
  font-size: 15px;
  font-weight: 900;
}

.asset-console-brand small {
  margin-top: 2px;
  color: var(--material-muted);
  font-size: 11px;
  font-weight: 700;
}

.asset-health-card {
  display: grid;
  gap: 8px;
  margin-top: auto;
  border-radius: 8px;
  border: 1px solid var(--material-line);
  background: var(--asset-card-elevated);
  padding: 16px;
}

.asset-health-card span,
.asset-health-card small {
  color: var(--material-muted);
  font-size: 12px;
  font-weight: 700;
}

.asset-health-card strong {
  color: var(--asset-green);
  font-size: 28px;
  font-weight: 900;
}

.asset-console-main {
  display: grid;
  align-content: start;
  gap: 16px;
  min-width: 0;
  padding: 0;
}

.material-studio .materials-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin-bottom: 8px;
}

.material-studio .materials-header h1 {
  margin-top: 12px;
  font-size: 52px;
  line-height: 1;
}

.material-studio .materials-header .eyebrow {
  color: var(--asset-cyan);
}

.material-studio .materials-header-actions {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 10px;
}

.asset-global-search {
  min-width: 360px;
}

.asset-global-search .input {
  height: 44px;
  border-radius: 6px;
}

.asset-upload-button {
  height: 44px;
  padding-inline: 18px;
}

.material-studio .material-theme-toggle {
  height: 44px;
}

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

.asset-stat-card {
  position: relative;
  display: grid;
  gap: 7px;
  min-height: 112px;
  border-radius: 8px;
  padding: 18px 18px;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
}

.asset-stat-card::after {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--asset-blue);
  content: "";
}

.asset-stat-card:nth-child(2)::after {
  background: var(--asset-blue);
}

.asset-stat-card:nth-child(3)::after {
  background: var(--asset-yellow);
}

.asset-stat-card span,
.asset-stat-card small {
  color: var(--material-muted);
  font-size: 12px;
  font-weight: 700;
}

.asset-stat-card strong {
  color: var(--material-text);
  font-size: 30px;
  line-height: 1;
  font-weight: 900;
}

.asset-stat-card.is-active {
  border-color: rgb(74 167 223 / 0.62);
  background: linear-gradient(180deg, rgb(20 23 27 / 0.96), rgb(14 16 19 / 0.96));
}

.asset-stat-link {
  color: inherit;
}

.material-studio .asset-workspace-grid {
  grid-template-columns: minmax(0, 1fr) minmax(390px, 0.44fr);
  gap: 16px;
}

.material-studio .material-tabs {
  gap: 10px;
  border: 0;
  background: transparent;
  padding: 0;
}

.material-studio .asset-top-tabs {
  position: static;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.material-studio .material-tab,
.material-studio .material-tab-link {
  display: grid;
  gap: 4px;
  border-radius: 6px;
  border: 1px solid transparent;
  padding: 12px 14px;
  text-decoration: none;
}

.material-studio .material-tab.is-active {
  background: var(--material-text);
  color: var(--material-bg);
}

.material-studio .material-tab-link:hover,
.material-studio .material-tab:hover {
  border-color: var(--material-line);
  background: var(--asset-card-elevated);
}

.material-studio .material-section.is-active {
  gap: 14px;
}

.material-studio .material-panel-head,
.material-studio .material-import-workbench,
.material-studio .material-list,
.asset-side-card {
  border-radius: 8px;
}

.material-studio .material-panel-head {
  min-height: 78px;
}

.material-studio .asset-library-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 16px;
}

.asset-panel-segment {
  display: inline-grid;
  grid-auto-flow: column;
  gap: 4px;
  border-radius: 8px;
  border: 1px solid var(--material-line);
  background: #08090b;
  padding: 4px;
}

.asset-panel-segment button {
  border-radius: 6px;
  padding: 7px 12px;
  color: var(--material-muted);
  font-size: 12px;
  font-weight: 900;
}

.asset-panel-segment button:hover,
.asset-panel-segment button.is-active {
  background: var(--material-text);
  color: var(--material-bg);
}

.asset-filter-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  border-radius: 8px;
  border: 1px solid var(--material-line);
  background: rgb(17 19 22 / 0.92);
  padding: 10px 12px;
}

.asset-filter-strip label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  border-radius: 8px;
  border: 1px solid var(--material-line);
  background: var(--asset-card-elevated);
  padding: 0 14px;
  color: var(--material-muted);
  font-size: 13px;
  font-weight: 800;
}

.asset-filter-strip .input {
  width: auto;
  min-width: 82px;
  height: 32px;
  border: 0;
  background: transparent;
  padding: 0 24px 0 0;
  color: var(--material-text);
  font-size: 13px;
  font-weight: 900;
}

.asset-portrait-list {
  padding: 12px;
}

.asset-portrait-list .list-heading {
  margin: 0 0 10px;
  padding-inline: 4px;
}

.asset-person-row {
  display: grid;
  grid-template-columns: 104px minmax(220px, 1fr) auto minmax(220px, 0.42fr) auto;
  align-items: center;
  gap: 18px;
  min-width: 0;
  border-radius: 8px;
  border: 1px solid var(--material-line);
  background: var(--asset-card-elevated);
  padding: 16px;
}

.asset-person-thumb {
  display: grid;
  width: 88px;
  height: 88px;
  place-items: center;
  overflow: hidden;
  border-radius: 8px;
  background: linear-gradient(135deg, #203241, #0c0d0f 54%, #4aa7df);
  color: var(--material-muted);
  font-size: 12px;
  font-weight: 900;
}

.asset-person-thumb img,
.asset-person-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.asset-person-copy {
  display: grid;
  min-width: 0;
  gap: 6px;
}

.asset-person-copy h3 {
  overflow: hidden;
  margin: 0;
  color: var(--material-text);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 17px;
  font-weight: 900;
}

.asset-person-copy p {
  overflow: hidden;
  margin: 0;
  color: var(--material-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 700;
}

.asset-person-hidden-id,
.asset-hidden-forms {
  display: none;
}

.asset-row-meter {
  display: grid;
  grid-template-columns: 1fr 0.68fr 1.3fr 0.46fr;
  gap: 6px;
  min-width: 0;
}

.asset-row-meter span {
  height: 13px;
  border-radius: 2px;
  background: rgb(74 167 223 / 0.78);
}

.asset-row-actions {
  flex-wrap: nowrap;
}

.asset-row-delete-form {
  margin: 0;
}

.asset-row-actions .btn-compact {
  min-height: 44px;
  padding-inline: 18px;
  font-size: 14px;
  font-weight: 900;
}

.material-studio .material-import-workbench {
  padding: 18px;
}

.material-studio .material-import-primary,
.material-studio .material-import-secondary,
.material-studio .material-group-block,
.material-studio .library-row,
.material-studio .scene-card,
.material-studio .portrait-asset-card,
.material-studio .real-asset-card {
  background: var(--asset-card-elevated);
}

.asset-side-panel {
  position: sticky;
  top: 18px;
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
}

.asset-side-card {
  display: grid;
  gap: 12px;
  padding: 16px;
}

.asset-side-heading h2 {
  color: var(--material-text);
  font-size: 20px;
  font-weight: 900;
  line-height: 1.15;
}

.asset-side-heading p {
  margin-top: 8px;
  color: var(--material-muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
}

.asset-side-heading-inline {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.asset-side-heading-inline span {
  color: var(--asset-blue);
  font-size: 12px;
  font-weight: 900;
}

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

.asset-upload-type {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 58px;
  border-radius: 8px;
  border: 1px solid rgb(47 54 65);
  background: var(--asset-card-elevated);
  padding: 14px 16px;
  color: var(--material-text);
  text-align: left;
  text-decoration: none;
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.asset-upload-type svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  color: #a7dcff;
  stroke-width: 2.4;
}

.asset-hidden-summary {
  display: none;
}

.material-studio .material-create-panel:not([open]) {
  display: none;
}

.asset-upload-type:hover,
.asset-upload-type.is-active {
  background: var(--material-text);
  color: var(--material-bg);
}

.asset-upload-type:hover svg,
.asset-upload-type.is-active svg {
  color: var(--material-bg);
}

.asset-drop-trigger {
  display: grid;
  min-height: 100px;
  place-items: center;
  gap: 8px;
  border-radius: 8px;
  border: 1px solid #25b8ff;
  background: rgb(0 0 0 / 0.36);
  color: var(--material-text);
  text-align: center;
  padding: 20px 18px;
  transition: border-color 0.18s ease, background 0.18s ease;
}

.asset-drop-trigger:hover {
  background: rgb(14 165 233 / 0.1);
}

.asset-drop-trigger svg {
  width: 28px;
  height: 28px;
  color: #38bdf8;
  stroke-width: 2.2;
}

.material-studio[data-material-theme="light"] .asset-drop-trigger {
  background: rgb(239 246 255 / 0.72);
}

.asset-drop-trigger strong,
.asset-drop-trigger span {
  display: block;
}

.asset-drop-trigger strong {
  font-size: 16px;
  font-weight: 900;
  line-height: 1.2;
}

.asset-drop-trigger span {
  margin-top: 0;
  color: var(--material-muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
}

.asset-upload-dialog {
  width: min(760px, calc(100vw - 32px));
  max-height: min(860px, calc(100vh - 32px));
  overflow: auto;
  border: 1px solid #2e333b;
  border-radius: 8px;
  background: #101113;
  color: #f7f7f8;
  padding: 0;
  box-shadow: 0 34px 120px rgb(0 0 0 / 0.58);
}

.asset-upload-dialog::backdrop {
  background: rgb(0 0 0 / 0.62);
  backdrop-filter: blur(7px);
}

.asset-upload-dialog-shell {
  display: grid;
  gap: 18px;
  padding: 22px;
}

.asset-upload-dialog-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 18px;
}

.asset-upload-dialog-header h2 {
  margin-top: 4px;
  color: #f7f7f8;
  font-size: 28px;
  font-weight: 900;
}

.asset-upload-dialog-header p:not(.eyebrow) {
  margin-top: 8px;
  color: #9aa1ac;
  font-size: 13px;
  font-weight: 700;
}

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

.asset-upload-dialog-tabs button {
  min-height: 44px;
  border: 1px solid #2e333b;
  border-radius: 6px;
  background: #171a1f;
  color: #f7f7f8;
  font-size: 14px;
  font-weight: 900;
}

.asset-upload-dialog-tabs button.is-active {
  background: #f7f7f8;
  color: #070707;
}

.asset-upload-panel {
  display: none;
}

.asset-upload-panel.is-active {
  display: block;
}

.asset-upload-dialog .stack {
  gap: 14px;
}

.asset-upload-dialog label span {
  color: #9aa1ac;
}

.asset-upload-dialog .input,
.asset-upload-dialog select,
.asset-upload-dialog textarea {
  border-color: #2e333b;
  background: #070707;
  color: #f7f7f8;
}

.asset-upload-choice-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}

.asset-upload-dialog .upload-drop {
  border-color: #2e333b;
  background: #070707;
}

.asset-upload-dialog .bulk-upload-queue {
  max-height: 260px;
  overflow: auto;
  border-color: #2e333b;
  background: #070707;
}

.asset-upload-dialog .bulk-upload-row {
  background: #171a1f;
}

.asset-upload-dialog .bulk-upload-actions {
  justify-content: end;
}

.asset-process-list,
.asset-quick-list {
  display: grid;
  gap: 8px;
}

.asset-process-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  border-radius: 8px;
  padding: 8px 0;
}

.asset-process-thumb {
  width: 34px;
  height: 34px;
  border-radius: 6px;
  border: 1px solid var(--material-line);
  background: var(--asset-card-elevated);
}

.asset-process-row strong,
.asset-process-row small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.asset-process-row strong {
  color: var(--material-text);
  font-size: 12px;
  font-weight: 900;
}

.asset-process-row small {
  margin-top: 3px;
  color: var(--material-muted);
  font-size: 11px;
  font-weight: 700;
}

.asset-quick-list button,
.asset-quick-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-radius: 6px;
  padding: 8px 0;
  color: var(--material-muted);
  text-align: left;
  text-decoration: none;
  font-size: 13px;
  font-weight: 800;
}

.asset-quick-list button:hover,
.asset-quick-list a:hover {
  color: var(--material-text);
}

.asset-quick-list strong {
  color: var(--material-muted);
  font-size: 12px;
  font-weight: 700;
}

.material-studio .status-failed {
  border-color: rgb(248 113 113 / 0.58);
  background: rgb(248 113 113 / 0.14);
  color: #ff7a7a;
}

@media (max-width: 1180px) {
  .asset-console-shell,
  .material-studio .materials-header {
    grid-template-columns: 1fr;
  }

  .material-studio .asset-workspace-grid {
    grid-template-columns: 1fr;
  }

  .asset-console-rail,
  .asset-side-panel {
    position: static;
    height: auto;
  }

  .asset-console-main {
    padding: 0;
  }

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

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

  .asset-person-row {
    grid-template-columns: 88px minmax(0, 1fr);
  }

  .asset-person-row .status-pill,
  .asset-row-meter,
  .asset-row-actions {
    grid-column: 2;
  }
}

@media (max-width: 720px) {
  .material-studio {
    margin: -18px -14px;
  }

  .asset-stat-grid,
  .asset-upload-type-grid {
    grid-template-columns: 1fr;
  }

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

  .material-studio .materials-header-actions {
    display: grid;
    justify-content: stretch;
  }

  .asset-global-search {
    min-width: 0;
  }

  .asset-filter-strip label,
  .asset-person-row {
    width: 100%;
  }

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

  .asset-person-thumb,
  .asset-person-row .status-pill,
  .asset-row-meter,
  .asset-row-actions {
    grid-column: 1;
  }
}

/* Minimal admin refresh */
:root {
  --admin-bg: #f7f7f8;
  --admin-surface: #ffffff;
  --admin-surface-soft: #fafafa;
  --admin-border: #e5e5e5;
  --admin-border-strong: #d9d9d9;
  --admin-text: #202123;
  --admin-muted: #6e6e80;
  --admin-faint: #8e8ea0;
  --admin-accent: #10a37f;
  --admin-accent-strong: #0e8f71;
  --admin-danger: #c2413a;
  --admin-radius: 8px;
  --admin-radius-sm: 6px;
  --admin-shadow: 0 1px 2px rgb(0 0 0 / 4%);
  --admin-shadow-popover: 0 18px 48px rgb(0 0 0 / 16%);
}

html {
  background: var(--admin-bg);
}

.app-body {
  min-height: 100vh;
  margin: 0;
  background: var(--admin-bg);
  color: var(--admin-text);
  font-family:
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  letter-spacing: 0;
}

.app-shell {
  display: grid;
  grid-template-columns: 188px minmax(0, 1fr);
  min-height: 100vh;
}

.app-public-shell {
  display: grid;
  min-height: 100vh;
  place-items: center;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 92%), rgb(247 247 248 / 96%)),
    radial-gradient(circle at 50% 0%, rgb(16 163 127 / 9%), transparent 34%);
}

.app-public-main {
  width: min(100%, 520px);
}

.app-public-shell:has(.login-screen) {
  display: block;
  background: white;
}

.app-public-main:has(.login-screen) {
  width: 100%;
}

.app-sidebar {
  position: sticky;
  top: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100vh;
  border-right: 1px solid var(--admin-border);
  background: var(--admin-surface);
}

.app-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  border-bottom: 1px solid var(--admin-border);
  padding: 14px 12px;
}

.app-brand-mark {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 7px;
  background: var(--admin-text);
  color: white;
  font-size: 15px;
  font-weight: 700;
}

.app-brand strong {
  display: block;
  color: var(--admin-text);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}

.app-brand small {
  display: block;
  margin-top: 2px;
  color: var(--admin-muted);
  font-size: 11px;
  line-height: 1.2;
}

.app-nav {
  display: grid;
  align-content: start;
  gap: 3px;
  padding: 10px 8px;
  overflow: auto;
}

.app-sidebar-account {
  display: grid;
  gap: 10px;
  border-top: 1px solid var(--admin-border);
  padding: 10px 8px;
}

.app-sidebar-account p {
  margin: 0 0 3px;
  color: var(--admin-muted);
  font-size: 11px;
  font-weight: 700;
}

.app-sidebar-account strong {
  display: block;
  overflow: hidden;
  color: var(--admin-text);
  font-size: 13px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-sidebar-credit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 8px;
  margin-top: 8px;
  border-radius: 8px;
  background: rgb(248 250 252);
  padding: 8px;
}

.app-sidebar-credit span,
.app-sidebar-credit small {
  color: var(--admin-muted);
  font-size: 11px;
  font-weight: 700;
}

.app-sidebar-credit b {
  color: var(--admin-text);
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
}

.app-sidebar-credit-value,
.generation-button-credit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.app-sidebar-credit-value span {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

.credit-star {
  width: 14px;
  height: 14px;
  color: var(--admin-accent);
  stroke-width: 2.4;
  flex: 0 0 auto;
}

.app-sidebar-credit small {
  grid-column: 1 / -1;
}

.app-sidebar-recharge-button {
  grid-column: 1 / -1;
  width: 100%;
  margin-top: 6px;
  min-height: 30px;
}

.app-sidebar-account .btn-secondary {
  width: 100%;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  border-radius: var(--admin-radius-sm);
  padding: 7px 8px;
  color: var(--admin-muted);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
}

.nav-link i,
.nav-link svg,
.nav-group summary i,
.nav-group summary svg {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  color: currentColor;
  stroke-width: 1.85;
}

.nav-link span,
.nav-label span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-link:hover {
  background: #f3f3f3;
  color: var(--admin-text);
}

.nav-link.is-active {
  background: #ececf1;
  color: var(--admin-text);
}

.nav-group {
  border-radius: var(--admin-radius-sm);
}

.nav-group summary {
  display: flex;
  min-height: 34px;
  cursor: pointer;
  list-style: none;
  align-items: center;
  justify-content: space-between;
  border-radius: var(--admin-radius-sm);
  padding: 7px 8px;
  color: var(--admin-muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
}

.nav-label {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

.nav-group summary::-webkit-details-marker {
  display: none;
}

.nav-group summary::after {
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  content: "";
  transform: rotate(45deg);
  transition: transform 140ms ease;
}

.nav-group[open] summary::after {
  transform: rotate(225deg);
}

.nav-group summary:hover,
.nav-group.is-active summary {
  background: #f3f3f3;
  color: var(--admin-text);
}

.nav-group-items {
  display: grid;
  gap: 2px;
  padding: 2px 0 3px 10px;
}

.nav-sublink {
  min-height: 30px;
  padding: 6px 8px;
  font-size: 12px;
}

.app-main {
  min-width: 0;
}

.app-header {
  position: sticky;
  z-index: 30;
  top: 0;
  display: flex;
  min-height: 74px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid rgb(39 49 60 / 74%);
  background: rgb(9 11 14 / 78%);
  padding: 0 30px;
  backdrop-filter: blur(16px);
}

.app-header-spacer {
  min-width: 0;
  flex: 1 1 auto;
}

.app-header-actions {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.app-header-actions a,
.app-header-actions button {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--admin-border-strong);
  border-radius: 999px;
  background: #151b22;
  color: #dce6ef;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 12px 26px rgb(0 0 0 / 18%);
}

.app-header-actions a,
.app-header-membership {
  padding: 0 16px;
  width: auto;
}

.app-header-actions button:not(.app-header-membership) {
  width: 42px;
  padding: 0;
}

.app-header-help-button {
  position: relative;
}

.app-header-help-tip {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  z-index: 40;
  width: max-content;
  max-width: 220px;
  border: 1px solid rgb(99 183 220 / 38%);
  border-radius: 8px;
  background: #111820;
  padding: 8px 10px;
  color: #dce6ef;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.16s ease, transform 0.16s ease;
  box-shadow: 0 14px 34px rgb(0 0 0 / 32%);
}

.app-header-help-button:hover .app-header-help-tip,
.app-header-help-button:focus-visible .app-header-help-tip {
  opacity: 1;
  transform: translateY(0);
}

.app-header-actions a:hover,
.app-header-actions button:not(:disabled):hover {
  border-color: rgb(99 183 220 / 55%);
  background: #192633;
  color: var(--admin-accent-strong);
}

.app-header-membership.is-active {
  border-color: rgb(99 183 220 / 65%);
  background: #1b2d3d;
  color: #e9f8ff;
}

.app-header-actions button:disabled {
  cursor: default;
}

.app-header-actions svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}

.app-topbar {
  position: sticky;
  z-index: 20;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--admin-border);
  background: rgb(255 255 255 / 92%);
  padding: 12px 22px;
  backdrop-filter: blur(14px);
}

.app-topbar-title p {
  margin: 0 0 2px;
  color: var(--admin-muted);
  font-size: 11px;
  font-weight: 600;
}

.app-topbar-title strong {
  color: var(--admin-text);
  font-size: 13px;
  font-weight: 700;
}

.app-content {
  width: min(100%, 1440px);
  margin: 0 auto;
  padding: 22px;
}

.app-content:has(.vod-console) {
  width: 100%;
  max-width: none;
  padding: 22px 16px;
}

.app-content:has(.tasks-workbench) {
  width: 100%;
  max-width: none;
  padding: 18px 12px;
}

.app-content:has(.credit-usage-workbench) {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 22px 0 34px;
}

.app-content:has(.users-management-workbench) {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 18px 14px 34px;
}

.app-content:has(.material-studio) {
  width: 100%;
  max-width: none;
  padding: 0;
}

.app-content:has(.material-studio) .material-studio {
  min-height: 100vh;
  margin: 0;
  border-radius: 0;
}

.app-content:has(.hot-template-admin) {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 22px 16px 34px;
}

.app-public-main .app-content {
  padding: 20px;
}

.app-public-main .app-content:has(.login-screen) {
  width: 100%;
  max-width: none;
  padding: 0;
}

.login-screen {
  min-height: 100vh;
  background: #03080d;
  color: #f7fbff;
}

.login-landing {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto minmax(48px, 1fr) auto auto auto minmax(52px, 1fr);
  min-height: 100vh;
  align-content: stretch;
  overflow: hidden;
  padding: 48px 72px 58px;
  background-image:
    linear-gradient(180deg, rgb(2 8 13 / 38%), rgb(2 8 13 / 58%)),
    radial-gradient(circle at 50% 28%, rgb(91 181 219 / 18%), transparent 26%),
    radial-gradient(circle at 72% 52%, rgb(109 79 182 / 14%), transparent 30%),
    url("/static/login-starfield-v2.png?v=2");
  background-position: center;
  background-size: cover;
}

.login-landing::before,
.login-landing::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  pointer-events: none;
}

.login-landing::before {
  background:
    linear-gradient(90deg, rgb(0 0 0 / 34%), transparent 28%, transparent 68%, rgb(0 0 0 / 42%)),
    linear-gradient(180deg, rgb(0 0 0 / 12%), transparent 42%, rgb(0 0 0 / 28%));
}

.login-landing::after {
  background:
    radial-gradient(circle at 50% 30%, rgb(94 187 226 / 16%), transparent 18%),
    radial-gradient(circle at 74% 57%, rgb(98 70 165 / 12%), transparent 22%);
  mix-blend-mode: screen;
}

.login-nav {
  grid-row: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
  width: 100%;
  max-width: 1680px;
  margin: 0 auto;
}

.login-logo {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: #f7fbff;
  text-decoration: none;
}

.login-logo-mark {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 9px;
  background: #f6f8fb;
  color: #0b1219;
  box-shadow: 0 10px 32px rgb(0 0 0 / 24%);
}

.login-logo-mark svg {
  width: 24px;
  height: 24px;
  stroke-width: 2.6;
}

.login-logo strong,
.login-logo small {
  display: block;
  line-height: 1.1;
}

.login-logo strong {
  font-size: 20px;
  font-weight: 950;
}

.login-logo small {
  margin-top: 5px;
  color: rgb(203 213 225 / 82%);
  font-size: 14px;
  font-weight: 800;
}

.login-nav-actions {
  display: inline-flex;
  justify-content: flex-end;
  gap: 20px;
}

.login-primary-link,
.login-outline-link,
.login-idea-bar button {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  padding: 0 24px;
  font-size: 16px;
  font-weight: 950;
  text-decoration: none;
}

.login-primary-link,
.login-idea-bar button {
  border: 1px solid rgb(124 181 244 / 72%);
  background:
    linear-gradient(180deg, rgb(255 255 255 / 16%), transparent 34%),
    linear-gradient(135deg, #7457d8 0%, #5f80e5 46%, #4daed8 100%);
  color: #ffffff;
  box-shadow:
    0 18px 38px rgb(77 174 216 / 24%),
    0 0 0 1px rgb(255 255 255 / 8%) inset;
  text-shadow: 0 1px 0 rgb(0 0 0 / 20%);
  transition:
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    filter 0.16s ease,
    transform 0.16s ease;
}

.login-outline-link {
  border: 1px solid rgb(148 163 184 / 26%);
  background: rgb(15 23 31 / 72%);
  color: #f8fbff;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 4%);
}

.login-primary-link:hover,
.login-primary-link:focus-visible,
.login-idea-bar button:hover,
.login-idea-bar button:focus-visible {
  border-color: rgb(157 215 255 / 86%);
  box-shadow:
    0 20px 44px rgb(77 174 216 / 32%),
    0 0 22px rgb(116 87 216 / 18%),
    0 0 0 1px rgb(255 255 255 / 16%) inset;
  filter: brightness(1.07) saturate(1.05);
}

.login-primary-link:active,
.login-idea-bar button:active {
  transform: translateY(1px);
}

.login-hero-copy {
  grid-row: 3;
  width: min(940px, 100%);
  margin: 0 auto;
  text-align: center;
}

.login-kicker {
  margin: 0 0 20px;
  color: #5fbce5;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0;
}

.login-hero-copy h1 {
  max-width: 880px;
  margin: 0 auto;
  color: #f8fbff;
  font-size: 64px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.06;
}

.login-hero-copy p:last-child {
  max-width: 860px;
  margin: 42px auto 0;
  color: rgb(203 213 225 / 74%);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.55;
}

.login-idea-bar {
  grid-row: 4;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 190px;
  gap: 18px;
  align-items: center;
  width: min(940px, 100%);
  min-height: 84px;
  margin: 84px auto 0;
  border: 1px solid rgb(95 178 216 / 34%);
  border-radius: 18px;
  background: rgb(18 28 36 / 82%);
  padding: 16px 18px 16px 30px;
  box-shadow: 0 18px 48px rgb(0 0 0 / 30%);
  backdrop-filter: blur(14px);
}

.login-flow-preview {
  grid-row: 5;
  position: relative;
  width: min(1120px, 100%);
  margin: 64px auto 0;
  border: 1px solid rgb(95 178 216 / 24%);
  border-radius: 16px;
  background:
    radial-gradient(circle at 42% 48%, rgb(14 165 233 / 18%), transparent 44%),
    linear-gradient(135deg, rgb(7 17 24 / 90%), rgb(11 20 32 / 78%));
  box-shadow:
    0 28px 72px rgb(0 0 0 / 34%),
    0 0 0 1px rgb(255 255 255 / 4%) inset;
  overflow: hidden;
  padding: 22px 28px;
  backdrop-filter: blur(14px);
}

.login-flow-preview::before {
  position: absolute;
  inset: 22px 24px;
  border-radius: 14px;
  background: radial-gradient(circle at 28% 50%, rgb(114 230 255 / 20%), transparent 34%);
  content: "";
  pointer-events: none;
}

.login-flow-track {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns:
    minmax(190px, 1fr) 54px
    minmax(190px, 1fr) 54px
    minmax(190px, 1fr) 54px
    minmax(190px, 1fr);
  gap: 10px;
  align-items: center;
}

.login-flow-step {
  --flow-cycle: 4.8s;
  --flow-accent: #72e6ff;
  --flow-glow: rgb(114 230 255 / 42%);
  --flow-active-fill: rgb(114 230 255 / 20%);
  --flow-delay: 0s;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  min-height: 88px;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 14px;
  background: rgb(14 24 34 / 85%);
  padding: 14px 16px;
  box-shadow: 0 0 0 rgb(0 0 0 / 0%);
  animation: login-flow-step-pulse var(--flow-cycle) linear infinite;
  animation-delay: var(--flow-delay);
}

.login-flow-step.is-script {
  --flow-accent: #a982ff;
  --flow-glow: rgb(169 130 255 / 38%);
  --flow-active-fill: rgb(169 130 255 / 17%);
  --flow-delay: 1.2s;
}

.login-flow-step.is-video {
  --flow-accent: #5af3b8;
  --flow-glow: rgb(90 243 184 / 36%);
  --flow-active-fill: rgb(90 243 184 / 14%);
  --flow-delay: 2.4s;
}

.login-flow-step.is-delivery {
  --flow-accent: #ffd166;
  --flow-glow: rgb(255 209 102 / 34%);
  --flow-active-fill: rgb(255 209 102 / 16%);
  --flow-delay: 3.6s;
}

.login-flow-step svg {
  width: 24px;
  height: 24px;
  color: var(--flow-accent);
  stroke-width: 2.35;
}

.login-flow-step > i,
.login-flow-step > svg {
  display: grid;
}

.login-flow-step div {
  min-width: 0;
}

.login-flow-step strong,
.login-flow-step small {
  display: block;
}

.login-flow-step strong {
  color: #f7fbff;
  font-size: 17px;
  font-weight: 950;
  line-height: 1.25;
}

.login-flow-step small {
  margin-top: 8px;
  color: rgb(203 213 225 / 66%);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.35;
}

.login-flow-step.is-delivery small {
  color: #d7b979;
  font-weight: 950;
}

.login-flow-connector {
  --flow-cycle: 4.8s;
  position: relative;
  display: block;
  height: 2px;
  border-radius: 999px;
  background: rgb(43 90 112 / 54%);
  overflow: visible;
}

.login-flow-connector::after {
  position: absolute;
  top: 50%;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #a6f7ff;
  box-shadow: 0 0 18px rgb(101 232 255 / 86%);
  content: "";
  opacity: 0;
  transform: translate(-50%, -50%);
  animation: login-flow-dot var(--flow-cycle) linear infinite;
}

.login-flow-connector.is-first::after {
  animation-delay: 0s;
}

.login-flow-connector.is-second::after {
  animation-delay: 1.2s;
}

.login-flow-connector.is-third::after {
  animation-delay: 2.4s;
}

@keyframes login-flow-step-pulse {
  0%,
  20% {
    border-color: var(--flow-accent);
    background:
      linear-gradient(105deg, var(--flow-active-fill), rgb(12 22 32 / 94%));
    box-shadow:
      0 0 28px var(--flow-glow),
      0 0 0 1px rgb(255 255 255 / 8%) inset;
  }

  28%,
  100% {
    border-color: rgb(255 255 255 / 12%);
    background: rgb(14 24 34 / 85%);
    box-shadow: 0 0 0 rgb(0 0 0 / 0%);
  }
}

@keyframes login-flow-dot {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%);
  }

  5%,
  20% {
    opacity: 1;
  }

  25% {
    opacity: 0;
    transform: translate(54px, -50%);
  }

  100% {
    opacity: 0;
    transform: translate(54px, -50%);
  }
}

.login-idea-bar svg {
  width: 30px;
  height: 30px;
  color: #a7e8ff;
  stroke-width: 2.4;
}

.login-idea-bar input {
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: #eef7ff;
  font-size: 18px;
  font-weight: 800;
}

.login-idea-bar input::placeholder {
  color: rgb(203 213 225 / 68%);
}

.login-auth-panel {
  position: fixed;
  top: 96px;
  right: 72px;
  z-index: 20;
  width: min(390px, calc(100vw - 32px));
  opacity: 0;
  pointer-events: none;
  transform: translateY(-10px) scale(0.98);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.login-auth-panel:target,
.login-screen.is-auth-open .login-auth-panel {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.login-screen.is-auth-closed .login-auth-panel {
  display: none;
}

.login-card {
  border: 1px solid rgb(148 163 184 / 26%);
  border-radius: 16px;
  background: rgb(10 16 22 / 88%);
  padding: 22px;
  box-shadow: 0 24px 70px rgb(0 0 0 / 38%);
  backdrop-filter: blur(18px);
}

.login-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.login-card-header strong {
  display: block;
  color: #f8fbff;
  font-size: 20px;
  font-weight: 950;
  line-height: 1.2;
}

.login-card-header small {
  display: block;
  margin-top: 6px;
  color: rgb(203 213 225 / 66%);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
}

.login-card-header > a,
.login-card-header > button {
  display: inline-grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid rgb(148 163 184 / 24%);
  border-radius: 8px;
  background: transparent;
  color: rgb(226 232 240 / 72%);
  cursor: pointer;
  font: inherit;
  font-size: 20px;
  line-height: 1;
  text-decoration: none;
}

.login-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 18px;
  border-bottom: 1px solid rgb(148 163 184 / 18%);
}

.login-tabs a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-bottom: 2px solid transparent;
  padding: 0 0 12px;
  color: rgb(203 213 225 / 62%);
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  transition:
    border-color 0.16s ease,
    color 0.16s ease;
}

.login-tabs a:hover,
.login-tabs a.is-active {
  border-color: #63b7dc;
  color: #f8fbff;
}

.login-form {
  display: grid;
  gap: 14px;
}

.login-field {
  display: grid;
  gap: 7px;
  color: rgb(226 232 240 / 88%);
  font-size: 13px;
  font-weight: 800;
}

.login-field input {
  width: 100%;
  height: 44px;
  border: 1px solid rgb(148 163 184 / 22%);
  border-radius: 8px;
  outline: none;
  background: rgb(3 8 13 / 72%);
  padding: 0 12px;
  color: #f8fbff;
  font-size: 14px;
  font-weight: 700;
  transition:
    background 0.16s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease;
}

.login-field input::placeholder {
  color: rgb(148 163 184 / 72%);
  font-weight: 700;
}

.login-field input:focus {
  border-color: #63b7dc;
  background: rgb(5 12 18 / 86%);
  box-shadow: 0 0 0 3px rgb(99 183 220 / 16%);
}

.login-message {
  margin-bottom: 14px;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.5;
}

.login-message.is-error {
  border: 1px solid rgb(248 113 113 / 34%);
  background: rgb(127 29 29 / 26%);
  color: #fecaca;
}

.login-message.is-success {
  border: 1px solid rgb(74 222 128 / 34%);
  background: rgb(20 83 45 / 24%);
  color: #bbf7d0;
}

.login-help {
  margin: -2px 0 0;
  color: #64748b;
  font-size: 12px;
  line-height: 1.6;
}

.login-password-strength {
  display: grid;
  gap: 7px;
  margin-top: -6px;
}

.login-password-strength-bar {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgb(148 163 184 / 22%);
}

.login-password-strength-bar span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: #cbd5e1;
  transition:
    width 0.18s ease,
    background 0.18s ease;
}

.login-password-strength p {
  margin: 0;
  color: rgb(203 213 225 / 66%);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
}

.login-password-strength.is-weak .login-password-strength-bar span {
  width: 34%;
  background: #ef4444;
}

.login-password-strength.is-medium .login-password-strength-bar span {
  width: 67%;
  background: #f59e0b;
}

.login-password-strength.is-strong .login-password-strength-bar span {
  width: 100%;
  background: #63b7dc;
}

.login-password-strength.is-weak p {
  color: #dc2626;
}

.login-password-strength.is-medium p {
  color: #b45309;
}

.login-password-strength.is-strong p {
  color: #a7e8ff;
}

.login-privacy-check {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  color: rgb(203 213 225 / 72%);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.5;
}

.login-privacy-check input {
  width: 15px;
  height: 15px;
  margin: 2px 0 0;
  accent-color: #63b7dc;
  flex: 0 0 auto;
}

.login-privacy-check strong {
  color: #f8fbff;
}

.login-submit {
  display: inline-flex;
  height: 44px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 8px;
  background: #63b7dc;
  color: #07121a;
  cursor: pointer;
  font-size: 14px;
  font-weight: 900;
  box-shadow: 0 12px 26px rgb(63 167 215 / 22%);
  transition:
    background 0.16s ease,
    transform 0.16s ease,
    box-shadow 0.16s ease;
}

.login-submit:hover {
  background: #76c5e7;
  box-shadow: 0 14px 30px rgb(63 167 215 / 30%);
}

.login-submit:active {
  transform: translateY(1px);
}

@media (max-height: 920px) and (min-width: 901px) {
  .login-landing {
    grid-template-rows: auto minmax(28px, 1fr) auto auto auto minmax(30px, 1fr);
    padding-top: 32px;
    padding-bottom: 40px;
  }

  .login-logo-mark {
    width: 38px;
    height: 38px;
  }

  .login-logo strong {
    font-size: 18px;
  }

  .login-logo small {
    font-size: 12px;
  }

  .login-primary-link,
  .login-outline-link,
  .login-idea-bar button {
    min-height: 46px;
    padding: 0 20px;
    font-size: 15px;
  }

  .login-hero-copy {
    margin-top: 0;
  }

  .login-hero-copy h1 {
    max-width: 820px;
    font-size: 56px;
    line-height: 1.05;
  }

  .login-hero-copy p:last-child {
    max-width: 820px;
    margin-top: 34px;
    font-size: 18px;
    line-height: 1.5;
  }

  .login-idea-bar {
    min-height: 74px;
    margin-top: 64px;
  }

  .login-flow-preview {
    margin-top: 46px;
    padding: 18px 20px;
  }

  .login-flow-track {
    grid-template-columns:
      minmax(172px, 1fr) 42px
      minmax(172px, 1fr) 42px
      minmax(172px, 1fr) 42px
      minmax(172px, 1fr);
    gap: 8px;
  }

  .login-flow-step {
    min-height: 78px;
    padding: 12px;
  }
}

@media (max-width: 1100px) {
  .login-landing {
    grid-template-rows: auto minmax(42px, 1fr) auto auto auto minmax(52px, 1fr);
    padding: 30px 22px 42px;
  }

  .login-hero-copy {
    margin-top: 0;
  }

  .login-auth-panel {
    top: 86px;
    right: 20px;
  }

  .login-flow-preview {
    margin-top: 52px;
  }
}

@media (max-width: 980px) {
  .login-flow-track {
    grid-template-columns: 1fr;
    justify-items: stretch;
  }

  .login-flow-connector {
    width: 2px;
    height: 28px;
    justify-self: center;
  }

  .login-flow-connector::after {
    animation-name: login-flow-dot-vertical;
  }

  .login-flow-step.is-delivery {
    grid-template-columns: 42px minmax(0, 1fr);
    justify-items: start;
    text-align: left;
  }
}

@media (max-width: 700px) {
  .login-landing {
    display: block;
  }

  .login-nav {
    grid-template-columns: 1fr;
  }

  .login-nav-actions {
    justify-content: flex-start;
  }

  .login-primary-link,
  .login-outline-link {
    min-height: 48px;
    padding: 0 18px;
    font-size: 15px;
  }

  .login-hero-copy {
    margin-top: 56px;
    text-align: left;
  }

  .login-hero-copy h1 {
    font-size: 44px;
  }

  .login-hero-copy p:last-child {
    font-size: 16px;
  }

  .login-idea-bar {
    grid-template-columns: 1fr;
    min-height: 0;
    margin-top: 42px;
    padding: 18px;
  }

  .login-idea-bar button {
    min-height: 48px;
  }

  .login-flow-preview {
    margin-top: 32px;
    padding: 18px;
  }

  .login-flow-step {
    min-height: 82px;
  }

  .login-flow-step strong {
    font-size: 16px;
  }

  .login-auth-panel {
    position: static;
    width: 100%;
    margin-top: 34px;
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }
}

@keyframes login-flow-dot-vertical {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%);
  }

  5%,
  20% {
    opacity: 1;
  }

  25% {
    opacity: 0;
    transform: translate(-50%, 28px);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, 28px);
  }
}

.btn-primary,
.btn-secondary,
.btn-danger,
.task-batch-download,
.task-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  border-radius: var(--admin-radius-sm);
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease;
}

.btn-primary,
.task-download {
  border: 1px solid var(--admin-text);
  background: var(--admin-text);
  color: white;
  box-shadow: var(--admin-shadow);
}

.btn-primary:hover,
.task-download:hover {
  background: #000;
  color: white;
}

.btn-secondary,
.task-batch-download {
  border: 1px solid var(--admin-border-strong);
  background: var(--admin-surface);
  color: var(--admin-text);
  box-shadow: var(--admin-shadow);
}

.btn-secondary:hover,
.task-batch-download:hover {
  border-color: #c7c7c7;
  background: #f7f7f7;
  color: var(--admin-text);
}

.btn-danger {
  border: 1px solid #f2c5c2;
  background: #fff5f4;
  color: var(--admin-danger);
}

.btn-danger:hover {
  background: #ffe9e7;
  color: #9f2c26;
}

.btn-icon-danger {
  width: 26px;
  height: 26px;
  min-height: 26px;
  border-radius: 999px;
  padding: 0;
  background: var(--admin-danger);
  border-color: var(--admin-danger);
  box-shadow: 0 8px 20px rgb(0 0 0 / 12%);
}

.input,
input[type="search"],
textarea,
select {
  border-radius: var(--admin-radius-sm);
  border: 1px solid var(--admin-border-strong);
  background: var(--admin-surface);
  color: var(--admin-text);
  font-size: 13px;
  line-height: 1.4;
  box-shadow: none;
}

.input {
  padding: 8px 10px;
}

.input:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
  border-color: var(--admin-text);
  box-shadow: 0 0 0 3px rgb(32 33 35 / 10%);
  outline: none;
}

.panel,
.generation-panel,
.task-summary-card,
.task-detail-panel,
.task-materials-panel,
.task-preview-panel,
.material-form,
.material-list,
.material-create-panel,
.material-import-primary,
.material-import-secondary,
.material-group-block,
.library-row,
.portrait-group-card,
.portrait-material-card,
.asset-card,
.scene-card,
.real-asset-card,
.portrait-asset-card,
.task-batch,
.task-card,
.rounded-lg.border.bg-white,
article.rounded-lg.border.bg-white,
section.rounded-lg.border.bg-white {
  border-color: var(--admin-border);
  border-radius: var(--admin-radius);
  background: var(--admin-surface);
  box-shadow: var(--admin-shadow);
}

.generation-panel,
.task-detail-panel,
.task-materials-panel,
.task-preview-panel,
.material-form,
.material-list,
.material-create-panel,
.material-import-primary,
.material-import-secondary {
  padding: 14px;
}

.eyebrow,
.task-kicker,
.metric-label,
.generation-field > span,
.generation-field legend,
.user-create-form span,
.picker-section-title span {
  color: var(--admin-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

h1,
h2,
h3,
.generation-header h1,
.tasks-header h1,
.users-header h1,
.material-panel-head h2,
.picker-header h2 {
  color: var(--admin-text);
  letter-spacing: 0;
}

.generation-header h1,
.tasks-header h1,
.users-header h1 {
  font-size: 24px;
  font-weight: 700;
}

.panel {
  padding: 16px;
}

.metric {
  margin-top: 6px;
  color: var(--admin-text);
  font-size: 26px;
  font-weight: 700;
}

.status-pill,
.task-status,
.user-status {
  border: 1px solid var(--admin-border);
  border-radius: 999px;
  background: var(--admin-surface-soft);
  color: var(--admin-muted);
  font-size: 11px;
  font-weight: 700;
}

.status-active,
.task-status-succeeded,
.task-archive-archived,
.user-status-active {
  border-color: #b7e4d7;
  background: #eefaf6;
  color: #08775d;
}

.status-pending,
.task-status-running,
.task-status-queued,
.task-status-submitted {
  border-color: #eadca8;
  background: #fffaf0;
  color: #8a5a00;
}

.status-failed,
.task-status-failed,
.user-status-disabled {
  border-color: #efc2bf;
  background: #fff5f4;
  color: var(--admin-danger);
}

.empty-state,
.task-empty-state,
.task-preview-empty,
.task-material-empty {
  border-color: var(--admin-border);
  border-radius: var(--admin-radius);
  background: var(--admin-surface-soft);
  color: var(--admin-muted);
}

.material-tabs {
  border-color: var(--admin-border);
  background: var(--admin-surface);
}

.material-tab {
  border-radius: var(--admin-radius-sm);
  color: var(--admin-muted);
}

.material-tab:hover,
.material-tab.is-active {
  background: #ececf1;
  color: var(--admin-text);
}

.segmented-control,
.model-provider-grid,
.ratio-grid {
  border-color: var(--admin-border);
  background: var(--admin-surface-soft);
}

.segment-button,
.model-provider-option,
.ratio-option {
  border-radius: var(--admin-radius-sm);
}

.segment-button.is-active,
.model-provider-option:has(input:checked),
.ratio-option:has(input:checked) {
  background: var(--admin-text);
  color: white;
}

.upload-drop,
.generation-upload,
.bulk-upload-dropzone {
  border-color: var(--admin-border-strong);
  border-radius: var(--admin-radius);
  background: var(--admin-surface-soft);
}

.upload-drop:hover,
.generation-upload:hover {
  border-color: var(--admin-text);
  background: white;
}

.task-batch-summary,
.task-card-main,
.task-detail-heading,
.material-panel-head,
.material-group-head,
.picker-header {
  border-color: var(--admin-border);
}

.task-batch-summary {
  background: var(--admin-surface);
}

.task-card {
  border-left: 0;
}

.task-card-failed {
  border-color: #efc2bf;
}

.material-picker-dialog {
  border: 1px solid var(--admin-border);
  border-radius: 10px;
  box-shadow: var(--admin-shadow-popover);
}

.material-picker-dialog::backdrop {
  background: rgb(0 0 0 / 32%);
}

.picker-shell,
.picker-card {
  background: var(--admin-surface);
}

.picker-card {
  border-color: var(--admin-border);
  border-radius: var(--admin-radius);
}

.picker-card:hover {
  border-color: var(--admin-text);
  box-shadow: 0 8px 24px rgb(0 0 0 / 8%);
}

.generation-form {
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 16px;
}

.generation-main {
  gap: 16px;
}

.generation-side {
  top: 66px;
}

.task-summary-grid,
.material-import-grid,
.asset-choice-grid {
  gap: 10px;
}

.user-table,
.rounded-lg.border.border-slate-200.bg-white {
  border-color: var(--admin-border);
  border-radius: var(--admin-radius);
  background: var(--admin-surface);
  box-shadow: var(--admin-shadow);
}

.user-table-row,
.grid.grid-cols-\[1\.4fr_1fr_1fr_1fr_auto\] {
  border-color: var(--admin-border);
}

.user-table-header,
.grid.grid-cols-\[1\.4fr_1fr_1fr_1fr_auto\].border-b {
  background: var(--admin-surface-soft);
  color: var(--admin-muted);
}

.mx-auto.mt-20.max-w-sm {
  margin-top: 0;
  border-color: var(--admin-border);
  border-radius: 12px;
  box-shadow: 0 24px 60px rgb(0 0 0 / 8%);
}

@media (max-width: 1024px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .app-sidebar {
    position: static;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--admin-border);
  }

  .app-sidebar-account {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .app-sidebar-account .btn-secondary {
    width: auto;
  }

  .app-brand {
    padding: 12px 16px;
  }

  .app-nav {
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    overflow-x: auto;
    padding: 8px 12px 12px;
  }

  .nav-group {
    min-width: 132px;
  }

  .nav-group-items {
    padding-left: 0;
  }

  .app-topbar {
    top: 0;
    padding: 10px 14px;
  }

  .app-content {
    padding: 14px;
  }

  .generation-form,
  .generation-main {
    grid-template-columns: 1fr;
  }

  .generation-side {
    position: static;
  }
}

@media (max-width: 760px) {
  .app-topbar {
    align-items: stretch;
    flex-direction: column;
  }

  .grid.grid-cols-\[1\.4fr_1fr_1fr_1fr_auto\] {
    grid-template-columns: 1fr;
  }
}

.nav-link:hover {
  background: rgb(241 245 249);
  color: rgb(15 23 42);
}

.btn-primary {
  border-radius: 6px;
  background: rgb(37 99 235);
  padding: 9px 14px;
  font-weight: 600;
  color: white;
}

.btn-primary:hover {
  background: rgb(29 78 216);
}

.btn-secondary {
  border-radius: 6px;
  border: 1px solid rgb(203 213 225);
  background: white;
  padding: 8px 12px;
  color: rgb(51 65 85);
}

.btn-secondary:hover {
  background: rgb(248 250 252);
}

.workbench-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.page-top-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-bottom: 16px;
}

.btn-compact {
  display: inline-flex;
  align-items: center;
  min-height: 31px;
  padding: 6px 9px;
  font-size: 13px;
  font-weight: 700;
}

.btn-danger {
  border-radius: 6px;
  border: 1px solid rgb(252 165 165);
  background: rgb(254 242 242);
  padding: 7px 10px;
  color: rgb(185 28 28);
  font-size: 13px;
  font-weight: 700;
}

.btn-danger:hover {
  background: rgb(254 226 226);
  color: rgb(153 27 27);
}

.corner-delete-form {
  position: absolute;
  z-index: 5;
  top: 9px;
  right: 9px;
}

.btn-icon-danger {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgb(254 202 202);
  background: rgb(220 38 38);
  padding: 0;
  color: white;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 8px 18px rgb(15 23 42 / 18%);
}

.btn-icon-danger:hover {
  background: rgb(185 28 28);
  color: white;
}

.input {
  width: 100%;
  border-radius: 6px;
  border: 1px solid rgb(203 213 225);
  padding: 9px 10px;
  outline: none;
}

.input:focus {
  border-color: rgb(37 99 235);
  box-shadow: 0 0 0 3px rgb(37 99 235 / 15%);
}

.panel {
  border: 1px solid rgb(226 232 240);
  border-radius: 8px;
  background: white;
  padding: 18px;
}

.metric-label {
  font-size: 13px;
  color: rgb(100 116 139);
}

.metric {
  margin-top: 8px;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0;
}

.users-workbench {
  display: grid;
  gap: 20px;
}

.users-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
}

.users-header h1 {
  color: rgb(15 23 42);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: 0;
}

.users-header p:last-child {
  margin-top: 6px;
  color: rgb(100 116 139);
  font-size: 14px;
}

.user-error {
  border-radius: 8px;
  border: 1px solid rgb(254 202 202);
  background: rgb(254 242 242);
  padding: 12px 14px;
  color: rgb(185 28 28);
  font-size: 14px;
  font-weight: 700;
}

.user-section-title {
  color: rgb(15 23 42);
  font-size: 17px;
  font-weight: 800;
}

.user-create-form {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(3, minmax(160px, 1fr)) auto;
  align-items: end;
  gap: 12px;
}

.partner-quota-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-top: 12px;
  border: 1px solid rgb(191 219 254);
  border-radius: 8px;
  background: rgb(239 246 255);
  padding: 8px 10px;
  color: rgb(30 64 175);
  font-size: 13px;
  font-weight: 800;
}

.partner-quota-note span {
  color: rgb(29 78 216);
  font-size: 12px;
}

.partner-quota-note.is-full {
  border-color: rgb(254 202 202);
  background: rgb(254 242 242);
  color: rgb(185 28 28);
}

.partner-quota-note.is-full span {
  color: rgb(185 28 28);
}

.user-create-form label,
.user-reset-form {
  display: grid;
  gap: 6px;
}

.user-create-form span {
  color: rgb(71 85 105);
  font-size: 12px;
  font-weight: 800;
}

.user-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.credit-usage-titlebar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
}

.credit-usage-rules-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.credit-usage-rules-button i {
  width: 15px;
  height: 15px;
}

.user-list-head span {
  color: rgb(100 116 139);
  font-size: 13px;
  font-weight: 700;
}

.user-list-toolbar {
  margin-top: 14px;
}

.user-search-form {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 10px;
}

.user-search-form label {
  display: grid;
  gap: 6px;
}

.user-search-form label:first-child {
  flex: 1 1 280px;
}

.user-search-form span {
  color: rgb(71 85 105);
  font-size: 12px;
  font-weight: 800;
}

.user-search-form .input {
  min-height: 36px;
}

.user-page-size-field {
  width: 140px;
}

.user-search-reset {
  text-decoration: none;
}

.user-table {
  margin-top: 14px;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid rgb(226 232 240);
}

.user-table-row {
  display: grid;
  grid-template-columns:
    minmax(150px, 1fr)
    minmax(150px, 0.75fr)
    minmax(160px, 0.8fr)
    minmax(140px, 0.65fr)
    100px
    150px
    minmax(260px, 1.6fr);
  align-items: center;
  gap: 12px;
  border-top: 1px solid rgb(226 232 240);
  padding: 12px 14px;
  font-size: 14px;
}

.user-table-row:first-child {
  border-top: 0;
}

.user-table-row:has(.partner-profile-details[open]) {
  align-items: start;
}

.user-table-row-child {
  background: rgb(241 245 249 / 72%);
}

.user-table-row-child .user-account-cell {
  position: relative;
  padding-left: 20px;
}

.user-table-row-child .user-account-cell::before {
  position: absolute;
  left: 2px;
  color: rgb(148 163 184);
  content: "└";
  font-weight: 900;
}

.user-table-header {
  background: rgb(248 250 252);
  color: rgb(71 85 105);
  font-size: 12px;
  font-weight: 800;
}

.user-table-row small {
  margin-left: 0;
  color: rgb(100 116 139);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.user-role-pill {
  width: fit-content;
  border-radius: 999px;
  background: rgb(239 246 255);
  color: rgb(30 64 175);
  font-size: 13px;
  font-weight: 800;
  padding: 6px 10px;
}

.user-account-cell {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.user-account-cell strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-credit-cell {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.user-credit-cell strong {
  color: rgb(15 23 42);
  font-size: 15px;
}

.user-credit-cell small {
  margin-left: 0;
}

.user-credit-form {
  display: grid;
  grid-template-columns: minmax(86px, 0.8fr) minmax(90px, 1fr) auto;
  gap: 6px;
}

.user-credit-form .input {
  min-width: 0;
  height: 32px;
}

.user-pagination {
  margin-top: 14px;
  border: 1px solid rgb(226 232 240);
  border-radius: 8px;
}

.recharge-table {
  margin-top: 14px;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid rgb(226 232 240);
}

.recharge-table-row {
  display: grid;
  grid-template-columns:
    minmax(170px, 1fr)
    minmax(130px, 0.7fr)
    minmax(120px, 0.6fr)
    100px
    minmax(260px, 1.4fr);
  align-items: center;
  gap: 12px;
  border-top: 1px solid rgb(226 232 240);
  padding: 12px 14px;
  font-size: 14px;
}

.recharge-table-row:first-child {
  border-top: 0;
}

.recharge-table-header {
  background: rgb(248 250 252);
  color: rgb(71 85 105);
  font-size: 12px;
  font-weight: 800;
}

.recharge-settings-form,
.recharge-package-row {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.recharge-settings-form {
  grid-template-columns: repeat(5, minmax(120px, 1fr)) auto;
  align-items: end;
}

.recharge-settings-form label,
.recharge-package-row label {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: rgb(71 85 105);
  font-size: 12px;
  font-weight: 800;
}

.recharge-settings-form .input,
.recharge-package-row .input {
  min-width: 0;
  height: 36px;
}

.recharge-settings-actions {
  display: flex;
  align-items: end;
}

.recharge-package-list {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.recharge-package-row {
  grid-template-columns:
    minmax(130px, 0.9fr)
    minmax(120px, 0.8fr)
    minmax(100px, 0.65fr)
    minmax(100px, 0.65fr)
    minmax(100px, 0.65fr)
    minmax(100px, 0.65fr)
    minmax(120px, 0.8fr)
    minmax(170px, 1.1fr)
    minmax(170px, 1.1fr)
    minmax(80px, 0.45fr)
    minmax(120px, 0.6fr)
    auto;
  align-items: end;
  border: 1px solid rgb(226 232 240);
  border-radius: 8px;
  padding: 12px;
}

.recharge-package-title {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.recharge-package-title strong {
  color: rgb(15 23 42);
  font-size: 14px;
}

.recharge-package-title small {
  color: rgb(100 116 139);
  font-size: 12px;
  font-weight: 700;
}

.recharge-package-flags {
  display: grid;
  gap: 6px;
}

.recharge-package-flags label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgb(71 85 105);
  font-size: 12px;
  font-weight: 800;
}

.recharge-package-row-new {
  grid-template-columns:
    minmax(120px, 0.8fr)
    minmax(120px, 0.8fr)
    minmax(100px, 0.65fr)
    minmax(100px, 0.65fr)
    minmax(100px, 0.65fr)
    minmax(100px, 0.65fr)
    minmax(120px, 0.8fr)
    minmax(170px, 1.1fr)
    minmax(170px, 1.1fr)
    minmax(80px, 0.45fr)
    minmax(120px, 0.6fr)
    auto;
}

.billing-settings-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 14px;
  border: 1px solid rgb(191 219 254);
  border-radius: 8px;
  background: rgb(239 246 255);
  color: rgb(30 64 175);
  padding: 12px 14px;
  font-size: 13px;
}

.billing-settings-note strong {
  white-space: nowrap;
  font-size: 14px;
  font-weight: 900;
}

.billing-charge-list {
  margin-top: 14px;
  overflow: hidden;
  border: 1px solid rgb(226 232 240);
  border-radius: 8px;
}

.billing-charge-row {
  display: grid;
  grid-template-columns:
    minmax(190px, 1fr)
    minmax(110px, 0.5fr)
    minmax(110px, 0.5fr)
    minmax(240px, 1.3fr)
    minmax(80px, 0.35fr)
    minmax(90px, 0.4fr)
    auto;
  align-items: center;
  gap: 10px;
  border-top: 1px solid rgb(226 232 240);
  padding: 12px 14px;
}

.billing-charge-row:first-child {
  border-top: 0;
}

.billing-charge-header {
  background: rgb(248 250 252);
  color: rgb(71 85 105);
  font-size: 12px;
  font-weight: 800;
}

.billing-charge-title {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.billing-charge-title small {
  color: rgb(100 116 139);
  font-size: 12px;
  font-weight: 700;
}

.billing-charge-row .input {
  min-width: 0;
  height: 36px;
}

.billing-charge-enabled {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgb(71 85 105);
  font-size: 12px;
  font-weight: 800;
}

.hot-template-admin-tabs {
  display: inline-flex;
  gap: 8px;
  margin-bottom: 14px;
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  background: rgb(255 255 255 / 3%);
  padding: 4px;
}

.hot-template-admin-tabs a {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  padding: 0 16px;
  color: var(--admin-muted);
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
}

.hot-template-admin-tabs a.is-active,
.hot-template-admin-tabs a:hover {
  background: var(--admin-text);
  color: var(--admin-bg);
}

.hot-template-form,
.hot-template-list {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.hot-template-form {
  display: block;
}

.hot-template-form-new {
  overflow: visible;
  padding-bottom: 0;
}

.hot-template-create-layout {
  display: grid;
  grid-template-columns: minmax(340px, 0.9fr) minmax(460px, 1.25fr) minmax(148px, 0.35fr);
  align-items: stretch;
  gap: 22px;
}

.hot-template-create-column,
.hot-template-create-card {
  display: grid;
  align-content: start;
  gap: 14px;
  min-width: 0;
}

.hot-template-create-card h3 {
  border-bottom: 1px solid rgb(226 232 240 / 18%);
  padding-bottom: 8px;
  color: var(--admin-text);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0;
}

.hot-template-basic-grid,
.hot-template-source-grid {
  display: grid;
  gap: 10px;
}

.hot-template-basic-grid {
  grid-template-columns: minmax(88px, 0.36fr) minmax(180px, 1fr);
}

.hot-template-source-grid {
  grid-template-columns: minmax(0, 1fr) minmax(180px, 0.82fr);
}

.hot-template-create-card-main {
  grid-template-rows: auto 1fr auto;
}

.hot-template-create-card-main textarea.input {
  min-height: 154px;
}

.hot-template-create-actions {
  display: grid;
  align-content: end;
  gap: 12px;
}

.hot-template-create-actions .btn-primary {
  min-height: 52px;
}

.hot-template-form label,
.hot-template-enabled,
.hot-template-flags label {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: rgb(71 85 105);
  font-size: 12px;
  font-weight: 800;
}

.hot-template-form .input,
.hot-template-row .input {
  min-width: 0;
  height: 36px;
}

.hot-template-form textarea.input,
.hot-template-prompt-panel textarea.input {
  height: auto;
  min-height: 86px;
  resize: vertical;
}

.hot-template-flags,
.hot-template-enabled {
  align-self: center;
  justify-self: center;
}

.hot-template-flags label,
.hot-template-enabled {
  display: flex;
  min-height: 36px;
  align-items: center;
}

.hot-template-list {
  overflow: hidden;
  border: 1px solid rgb(226 232 240);
  border-radius: 8px;
}

.hot-template-row {
  display: grid;
  grid-template-columns:
    32px
    minmax(64px, 0.24fr)
    minmax(170px, 0.62fr)
    minmax(130px, 0.52fr)
    minmax(240px, 1.08fr)
    minmax(170px, 0.68fr)
    minmax(88px, 0.34fr)
    minmax(70px, 0.28fr)
    minmax(74px, 0.3fr);
  align-items: center;
  gap: 10px;
  border-top: 1px solid rgb(226 232 240);
  padding: 12px 14px;
}

.hot-template-prompt-toggle {
  display: inline-grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid var(--admin-border);
  border-radius: 7px;
  background: rgb(255 255 255 / 4%);
  color: var(--admin-muted);
  cursor: pointer;
}

.hot-template-prompt-toggle:hover {
  border-color: rgb(99 183 220 / 52%);
  color: var(--admin-accent-strong);
}

.hot-template-prompt-toggle svg {
  width: 16px;
  height: 16px;
  transition: transform 140ms ease;
}

.hot-template-prompt-toggle-input:checked + .hot-template-row .hot-template-prompt-toggle svg {
  transform: rotate(90deg);
}

.hot-template-prompt-panel {
  display: none;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 0.25fr);
  gap: 12px;
  border-top: 1px solid rgb(226 232 240);
  background: rgb(248 250 252 / 72%);
  padding: 14px 18px 16px 64px;
}

.hot-template-prompt-toggle-input:checked + .hot-template-row + .hot-template-prompt-panel {
  display: grid;
}

.hot-template-prompt-panel label {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: rgb(71 85 105);
  font-size: 12px;
  font-weight: 800;
}

.hot-template-reference-panel {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
}

.hot-template-reference-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hot-template-reference-list img {
  width: 54px;
  height: 54px;
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  object-fit: cover;
}

.hot-template-row:first-child {
  border-top: 0;
}

.hot-template-header {
  background: rgb(248 250 252);
  color: rgb(71 85 105);
  font-size: 12px;
  font-weight: 800;
}

.hot-template-edit-form {
  display: contents;
}

.hot-template-title {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.hot-template-title small {
  overflow: hidden;
  color: rgb(100 116 139);
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hot-template-metrics-edit {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.hot-template-cover-preview {
  display: grid;
  width: 128px;
  height: 86px;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 34%, rgb(99 183 220 / 16%), transparent 36%),
    #101419;
  color: var(--admin-muted);
  font-size: 12px;
  font-weight: 800;
  padding: 0;
  text-align: center;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.hot-template-cover-preview.has-cover {
  cursor: pointer;
}

.hot-template-cover-preview.has-cover:hover {
  border-color: rgb(99 183 220 / 70%);
  box-shadow: 0 10px 24px rgb(0 0 0 / 26%);
  color: var(--admin-accent-strong);
  transform: translateY(-1px);
}

.hot-template-cover-cell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.hot-template-cover-cell input[type="file"] {
  height: auto;
  min-height: 34px;
  width: 160px;
  padding: 5px 8px;
}

.hot-template-cover-cell .hot-template-cover-input.is-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  opacity: 0;
  pointer-events: none;
}

.hot-template-cover-preview img,
.hot-template-cover-preview video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.hot-template-actions-head {
  grid-column: span 2;
}

.hot-template-actions {
  display: flex;
  gap: 6px;
}

.hot-template-delete-form {
  display: contents;
}

.hot-prompt-tab-form,
.hot-prompt-tab-list {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.hot-prompt-tab-form {
  grid-template-columns:
    minmax(80px, 0.25fr)
    minmax(160px, 0.5fr)
    minmax(360px, 1fr)
    minmax(88px, 0.24fr)
    auto;
  align-items: end;
}

.hot-prompt-tab-form label,
.hot-prompt-tab-enabled {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: rgb(71 85 105);
  font-size: 12px;
  font-weight: 800;
}

.hot-prompt-tab-form .input,
.hot-prompt-tab-row .input {
  min-width: 0;
}

.hot-prompt-tab-form textarea.input,
.hot-prompt-tab-row textarea.input {
  height: auto;
  min-height: 68px;
  resize: vertical;
}

.hot-prompt-tab-enabled {
  display: flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.hot-prompt-tab-list {
  overflow: hidden;
  border: 1px solid rgb(226 232 240);
  border-radius: 8px;
}

.hot-prompt-tab-row {
  display: grid;
  grid-template-columns:
    minmax(80px, 0.24fr)
    minmax(170px, 0.42fr)
    minmax(420px, 1fr)
    minmax(96px, 0.24fr)
    minmax(70px, 0.18fr)
    minmax(74px, 0.2fr);
  align-items: center;
  gap: 10px;
  border-top: 1px solid rgb(226 232 240);
  padding: 12px 14px;
}

.hot-prompt-tab-row:first-child {
  border-top: 0;
}

.hot-prompt-tab-header {
  background: rgb(248 250 252);
  color: rgb(71 85 105);
  font-size: 12px;
  font-weight: 800;
}

.hot-prompt-tab-edit-form {
  display: contents;
}

.hot-prompt-tab-actions-head {
  grid-column: span 2;
}

.hot-gallery-page {
  min-height: calc(100vh - 122px);
  color: var(--admin-text);
}

.hot-gallery-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
}

.hot-gallery-segment,
.hot-gallery-tool {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  border: 1px solid var(--admin-border);
  border-radius: 12px;
  background: rgb(19 23 28 / 82%);
  box-shadow: 0 14px 34px rgb(0 0 0 / 18%);
}

.hot-gallery-segment {
  overflow: hidden;
  padding: 3px;
}

.hot-gallery-segment a,
.hot-gallery-tool {
  color: var(--admin-muted);
  font-size: 14px;
  font-weight: 900;
  text-decoration: none;
}

.hot-gallery-segment a {
  display: inline-flex;
  min-width: 78px;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
}

.hot-gallery-segment a.is-active {
  background: var(--admin-active-bg);
  color: var(--admin-active-text);
}

.hot-gallery-tool {
  gap: 8px;
  padding: 0 16px;
}

.hot-gallery-tool svg {
  width: 18px;
  height: 18px;
}

.canvas-projects-page {
  min-height: calc(100vh - 122px);
  color: var(--admin-text);
}

.canvas-projects-shell {
  display: grid;
  gap: 26px;
  min-height: calc(100vh - 106px);
  align-content: start;
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  background: var(--admin-surface-soft);
  box-shadow: var(--admin-shadow);
  padding: 28px;
}

.canvas-projects-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: end;
}

.canvas-projects-heading {
  display: grid;
  gap: 12px;
}

.canvas-projects-heading span {
  color: var(--admin-accent-strong);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.canvas-projects-heading h1 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 950;
  line-height: 1.08;
}

.canvas-projects-heading p {
  max-width: 920px;
  margin: 8px 0 0;
  color: var(--admin-muted);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.8;
}

.canvas-project-create-button {
  display: inline-flex;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid var(--admin-border-strong);
  border-radius: 8px;
  background: var(--admin-surface-elevated);
  color: #ffffff;
  cursor: pointer;
  font-size: 15px;
  font-weight: 900;
  padding: 0 24px;
}

.canvas-project-create-button:hover {
  border-color: rgb(99 183 220 / 58%);
  background: #192633;
}

.canvas-project-create-button svg {
  width: 20px;
  height: 20px;
}

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

.canvas-project-card {
  position: relative;
  display: grid;
  min-width: 0;
  gap: 14px;
  color: inherit;
  text-decoration: none;
}

.canvas-project-new-card {
  min-height: 206px;
  justify-items: center;
  align-content: center;
  overflow: hidden;
  border: 1px solid var(--admin-border-strong);
  border-radius: 8px;
  background: var(--admin-surface-elevated);
  cursor: pointer;
  text-align: center;
}

.canvas-project-new-card::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 64px;
  border-top: 1px solid var(--admin-border);
  background: var(--admin-surface);
  content: "";
}

.canvas-project-new-card:hover {
  border-color: rgb(99 183 220 / 62%);
  background: #192633;
}

.canvas-project-new-card strong,
.canvas-project-new-card small,
.canvas-project-new-icon {
  position: relative;
  z-index: 1;
}

.canvas-project-new-card strong {
  color: #ffffff;
  font-size: 18px;
  font-weight: 950;
}

.canvas-project-new-card small {
  align-self: end;
  width: 100%;
  color: var(--admin-muted);
  font-size: 14px;
  font-weight: 850;
  padding-top: 34px;
  text-align: left;
  transform: translateY(20px);
  padding-left: 24px;
}

.canvas-project-new-icon {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border: 2px solid rgb(99 183 220 / 52%);
  border-radius: 50%;
  color: var(--admin-accent-strong);
}

.canvas-project-new-icon svg {
  width: 24px;
  height: 24px;
}

.canvas-project-preview {
  position: relative;
  display: grid;
  min-height: 206px;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--admin-border-strong);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgb(99 183 220 / 10%), transparent 58%),
    var(--admin-surface-elevated);
}

.canvas-project-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.canvas-project-preview > i,
.canvas-project-preview > svg {
  width: 56px;
  height: 56px;
  color: var(--admin-faint);
}

.canvas-project-preview::after {
  position: absolute;
  inset: 46% 0 0;
  background: linear-gradient(180deg, transparent, rgb(0 0 0 / 58%));
  content: "";
}

.canvas-project-more {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 1;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgb(0 0 0 / 54%);
  color: #ffffff;
  cursor: pointer;
}

.canvas-project-more svg {
  width: 19px;
  height: 19px;
}

.canvas-project-menu {
  pointer-events: auto;
  position: fixed;
  z-index: 1200;
  width: 168px;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 16px;
  background: rgb(21 21 28 / 96%);
  box-shadow: 0 18px 50px rgb(0 0 0 / 48%);
  padding: 8px;
  backdrop-filter: blur(16px);
}

.canvas-project-menu button {
  display: flex;
  width: 100%;
  height: 40px;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #fecaca;
  cursor: pointer;
  font-size: 14px;
  font-weight: 800;
  padding: 0 12px;
  text-align: left;
}

.canvas-project-menu button:hover {
  background: rgb(248 113 113 / 12%);
}

.canvas-project-menu button svg {
  width: 16px;
  height: 16px;
}

.canvas-project-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.canvas-project-meta strong {
  min-width: 0;
  overflow: hidden;
  color: #ffffff;
  font-size: 19px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.canvas-project-pill {
  border-radius: 999px;
  background: var(--admin-surface);
  color: var(--admin-muted);
  font-size: 12px;
  font-weight: 900;
  padding: 7px 12px;
}

.canvas-project-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  color: var(--admin-faint);
  font-size: 14px;
  font-weight: 800;
}

.canvas-project-foot span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.canvas-project-foot svg {
  width: 15px;
  height: 15px;
}

.canvas-project-status {
  min-height: 20px;
  margin: 0;
  color: var(--admin-muted);
  font-size: 13px;
  font-weight: 800;
}

.canvas-project-status[data-mode="saved"] {
  color: #79d59b;
}

.canvas-project-status[data-mode="error"] {
  color: #ff9b9b;
}

.canvas-project-dialog {
  width: min(520px, calc(100vw - 32px));
  border: 1px solid var(--admin-border);
  border-radius: 14px;
  background: #0b1016;
  color: var(--admin-text);
  padding: 0;
}

.canvas-project-dialog::backdrop {
  background: rgb(0 0 0 / 68%);
}

.canvas-project-dialog-shell {
  display: grid;
  gap: 18px;
  padding: 22px;
}

.canvas-project-dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.canvas-project-dialog-header h2 {
  margin: 4px 0 0;
  color: #ffffff;
  font-size: 22px;
  font-weight: 950;
}

.canvas-project-dialog-close {
  width: 34px;
  height: 34px;
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  background: #101820;
  color: #ffffff;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
}

.canvas-project-field {
  display: grid;
  gap: 8px;
}

.canvas-project-field span {
  color: var(--admin-muted);
  font-size: 13px;
  font-weight: 900;
}

.canvas-project-field input,
.canvas-project-field textarea {
  width: 100%;
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  background: #101820;
  color: #f4f8fb;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  outline: none;
  padding: 12px;
}

.canvas-project-field input:focus,
.canvas-project-field textarea:focus {
  border-color: rgb(99 183 220 / 62%);
}

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

.free-canvas-page {
  min-height: calc(100vh - 122px);
  color: var(--admin-text);
}

.free-canvas-shell {
  display: grid;
  min-height: calc(100vh - 122px);
  grid-template-rows: auto 1fr;
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  background: #080c11;
  box-shadow: var(--admin-shadow);
}

.free-canvas-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 72px;
  border-bottom: 1px solid var(--admin-border);
  background: #0b1016;
  padding: 12px 16px;
}

.free-canvas-title {
  min-width: 176px;
}

.free-canvas-title span,
.free-canvas-panel-heading span {
  color: var(--admin-accent-strong);
  font-size: 12px;
  font-weight: 900;
}

.free-canvas-title h1 {
  margin: 4px 0 0;
  color: #f4f8fb;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.2;
}

.free-canvas-status {
  min-width: 0;
  color: var(--admin-muted);
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}

.free-canvas-status[data-mode="dirty"] {
  color: #f6c65b;
}

.free-canvas-status[data-mode="saved"] {
  color: #79d59b;
}

.free-canvas-status[data-mode="error"] {
  color: #ff9b9b;
}

.free-canvas-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.canvas-icon-button,
.canvas-save-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.canvas-icon-button {
  width: 38px;
  height: 38px;
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  background: #101820;
  color: #d8e3ec;
}

.canvas-icon-button:hover {
  border-color: rgb(99 183 220 / 62%);
  color: #ffffff;
}

.canvas-icon-button svg,
.canvas-save-button svg {
  width: 16px;
  height: 16px;
}

.canvas-save-button {
  gap: 8px;
  min-height: 38px;
}

.free-canvas-layout {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr) 282px;
  min-height: 0;
}

.free-canvas-palette,
.free-canvas-inspector {
  min-height: 0;
  background: #0b1016;
}

.free-canvas-palette {
  border-right: 1px solid var(--admin-border);
}

.free-canvas-inspector {
  border-left: 1px solid var(--admin-border);
}

.free-canvas-panel-heading {
  display: grid;
  gap: 4px;
  padding: 16px;
}

.free-canvas-panel-heading strong {
  color: #f4f8fb;
  font-size: 15px;
  font-weight: 900;
}

.canvas-node-palette {
  display: grid;
  gap: 8px;
  max-height: calc(100vh - 230px);
  overflow: auto;
  padding: 0 12px 16px;
}

.canvas-palette-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  width: 100%;
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  background: #101820;
  color: inherit;
  cursor: pointer;
  padding: 10px;
  text-align: left;
}

.canvas-palette-item:hover {
  border-color: color-mix(in srgb, var(--node-accent), #ffffff 18%);
  background: #131d26;
}

.canvas-palette-item > i {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--node-accent), transparent 78%);
  color: var(--node-accent);
}

.canvas-palette-item svg {
  width: 17px;
  height: 17px;
}

.canvas-palette-item span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.canvas-palette-item strong {
  color: #f4f8fb;
  font-size: 13px;
  font-weight: 900;
}

.canvas-palette-item small {
  color: var(--admin-muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
}

.free-canvas-stage-shell {
  position: relative;
  overflow: auto;
  min-height: calc(100vh - 196px);
  background:
    linear-gradient(rgb(255 255 255 / 4%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 4%) 1px, transparent 1px),
    #0b1016;
  background-size: 32px 32px;
}

.free-canvas-stage {
  position: relative;
  width: 1800px;
  height: 1100px;
}

.free-canvas-edges,
.free-canvas-nodes {
  position: absolute;
  inset: 0;
}

.free-canvas-edges {
  pointer-events: none;
}

.free-canvas-edges marker path {
  fill: rgb(99 183 220 / 82%);
}

.canvas-edge-path {
  fill: none;
  stroke: rgb(99 183 220 / 74%);
  stroke-linecap: round;
  stroke-width: 2.5;
}

.canvas-flow-node {
  position: absolute;
  display: grid;
  gap: 10px;
  width: 250px;
  min-height: 140px;
  border: 1px solid color-mix(in srgb, var(--node-accent), #1c2934 66%);
  border-radius: 8px;
  background: #101820;
  box-shadow: 0 18px 38px rgb(0 0 0 / 24%);
  cursor: grab;
  padding: 14px;
  user-select: none;
}

.canvas-flow-node.is-selected {
  border-color: var(--node-accent);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--node-accent), transparent 76%),
    0 18px 38px rgb(0 0 0 / 28%);
}

.canvas-flow-node.is-connecting {
  outline: 2px dashed color-mix(in srgb, var(--node-accent), #ffffff 20%);
  outline-offset: 4px;
}

.canvas-flow-node-header {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.canvas-flow-node-header svg {
  width: 18px;
  height: 18px;
  color: var(--node-accent);
}

.canvas-flow-node-header span {
  min-width: 0;
  overflow: hidden;
  color: var(--admin-muted);
  font-size: 12px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.canvas-flow-node-header b {
  border-radius: 999px;
  background: rgb(255 255 255 / 7%);
  color: #d8e3ec;
  font-size: 11px;
  font-weight: 900;
  padding: 4px 8px;
}

.canvas-flow-node h2 {
  margin: 0;
  color: #f4f8fb;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.3;
}

.canvas-flow-node p {
  min-height: 38px;
  margin: 0;
  color: var(--admin-muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.55;
}

.canvas-flow-node-ports {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.canvas-port-button {
  min-height: 30px;
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  background: #0b1016;
  color: #d8e3ec;
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
  padding: 0 12px;
}

.canvas-port-button:hover {
  border-color: var(--node-accent);
  color: #ffffff;
}

.free-canvas-empty {
  position: absolute;
  left: 50%;
  top: 42%;
  display: grid;
  width: 280px;
  gap: 8px;
  place-items: center;
  transform: translate(-50%, -50%);
  color: var(--admin-muted);
  text-align: center;
}

.free-canvas-empty svg {
  width: 34px;
  height: 34px;
  color: var(--admin-accent-strong);
}

.free-canvas-empty strong {
  color: #f4f8fb;
  font-size: 15px;
  font-weight: 900;
}

.free-canvas-empty span {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
}

.free-canvas-inspector-body {
  display: grid;
  gap: 14px;
  padding: 0 16px 16px;
}

.free-canvas-inspector-body p {
  margin: 0;
  color: var(--admin-muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
}

.canvas-inspector-field {
  display: grid;
  gap: 7px;
}

.canvas-inspector-field span {
  color: var(--admin-muted);
  font-size: 12px;
  font-weight: 900;
}

.canvas-inspector-field input,
.canvas-inspector-field textarea,
.canvas-inspector-field select {
  width: 100%;
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  background: #101820;
  color: #f4f8fb;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  outline: none;
  padding: 10px;
}

.canvas-inspector-field textarea {
  resize: vertical;
}

.canvas-inspector-field input:focus,
.canvas-inspector-field textarea:focus,
.canvas-inspector-field select:focus {
  border-color: rgb(99 183 220 / 70%);
}

.canvas-inspector-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.canvas-inspector-actions button {
  justify-content: center;
  min-height: 36px;
}

.canvas-inspector-hint {
  border: 1px solid rgb(99 183 220 / 18%);
  border-radius: 8px;
  background: rgb(99 183 220 / 7%);
  padding: 10px;
}

@media (max-width: 780px) {
  .canvas-projects-shell {
    padding: 24px 18px;
  }

  .canvas-projects-header {
    grid-template-columns: 1fr;
  }

  .canvas-project-create-button {
    justify-self: start;
  }

  .canvas-project-grid {
    gap: 22px;
  }

  .free-canvas-shell {
    min-height: calc(100vh - 102px);
  }

  .free-canvas-topbar {
    align-items: stretch;
    flex-direction: column;
  }

  .free-canvas-status {
    text-align: left;
  }

  .free-canvas-toolbar {
    justify-content: flex-start;
  }

  .free-canvas-layout {
    grid-template-columns: 1fr;
  }

  .free-canvas-palette,
  .free-canvas-inspector {
    border: 0;
    border-bottom: 1px solid var(--admin-border);
  }

  .canvas-node-palette {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: none;
  }

  .free-canvas-stage-shell {
    min-height: 560px;
    order: 2;
  }

  .free-canvas-inspector {
    order: 3;
  }

  .canvas-inspector-actions {
    grid-template-columns: 1fr;
  }

  .canvas-save-button {
    min-width: 96px;
  }
}

@media (max-width: 560px) {
  .canvas-node-palette {
    grid-template-columns: 1fr;
  }

  .canvas-save-button {
    flex: 1;
    justify-content: center;
  }
}

.hot-gallery-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(180px, 1fr));
  gap: 28px 22px;
}

.hot-gallery-card {
  min-width: 0;
}

.hot-gallery-media {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 348px;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--admin-border);
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 30%, rgb(99 183 220 / 10%), transparent 34%),
    linear-gradient(180deg, #151b22, #101419);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 4%);
  color: inherit;
  cursor: pointer;
  font: inherit;
  padding: 0;
  text-decoration: none;
  transition:
    border-color 160ms ease,
    transform 160ms ease,
    box-shadow 160ms ease;
}

.hot-gallery-media:hover {
  border-color: rgb(99 183 220 / 60%);
  box-shadow: 0 18px 44px rgb(0 0 0 / 26%);
  transform: translateY(-2px);
}

.hot-gallery-media img,
.hot-gallery-media video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.hot-gallery-fallback {
  display: grid;
  width: 100%;
  min-height: 348px;
  place-items: center;
  border-radius: inherit;
  color: #fff;
  font-size: 15px;
  font-weight: 900;
}

.hot-gallery-fallback.is-beauty {
  background: linear-gradient(135deg, #69415a, #18222b);
}

.hot-gallery-fallback.is-fashion {
  background: linear-gradient(135deg, #2a203f, #18232b);
}

.hot-gallery-fallback.is-home {
  background: linear-gradient(135deg, #43525d, #18232b);
}

.hot-gallery-fallback.is-drink {
  background: linear-gradient(135deg, #334424, #152229);
}

.hot-gallery-empty {
  grid-column: 1 / -1;
  display: grid;
  min-height: 260px;
  place-items: center;
  border: 1px solid var(--admin-border);
  border-radius: 16px;
  background: var(--admin-surface);
  color: var(--admin-muted);
  text-align: center;
}

.recharge-record-table-row {
  display: grid;
  grid-template-columns:
    minmax(150px, 1fr)
    minmax(90px, 0.45fr)
    minmax(110px, 0.5fr)
    minmax(110px, 0.55fr)
    minmax(180px, 1.2fr)
    minmax(150px, 0.7fr);
  align-items: center;
  gap: 12px;
  border-top: 1px solid rgb(226 232 240);
  padding: 12px 14px;
  font-size: 14px;
}

.credit-usage-table-row {
  display: grid;
  grid-template-columns:
    minmax(150px, 0.9fr)
    minmax(110px, 0.6fr)
    minmax(110px, 0.55fr)
    minmax(90px, 0.45fr)
    minmax(180px, 1.2fr)
    minmax(90px, 0.45fr)
    minmax(110px, 0.5fr)
    minmax(150px, 0.7fr);
  align-items: center;
  gap: 12px;
  border-top: 1px solid rgb(226 232 240);
  padding: 12px 14px;
  font-size: 14px;
}

.credit-usage-filter-form {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px;
  margin-top: 14px;
}

.credit-usage-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.credit-usage-summary-card {
  display: grid;
  gap: 6px;
  border: 1px solid rgb(226 232 240);
  border-radius: 10px;
  background: rgb(248 250 252);
  padding: 14px;
}

.credit-usage-summary-card span,
.credit-usage-summary-card small {
  color: rgb(100 116 139);
  font-size: 12px;
  font-weight: 800;
}

.credit-usage-summary-card strong {
  color: rgb(15 23 42);
  font-size: 24px;
  line-height: 1.1;
}

.credit-usage-filter-form label {
  display: grid;
  min-width: 220px;
  gap: 6px;
  color: rgb(71 85 105);
  font-size: 12px;
  font-weight: 800;
}

.user-credit-usage-cell .text-link {
  display: inline-grid;
  gap: 2px;
  text-decoration: none;
}

.recharge-record-table-row:first-child,
.credit-usage-table-row:first-child {
  border-top: 0;
}

.recharge-unavailable {
  color: rgb(100 116 139);
  font-size: 13px;
  font-weight: 800;
}

.recharge-note {
  min-width: 0;
  overflow: hidden;
  color: rgb(71 85 105);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.credit-positive {
  color: rgb(22 101 52);
}

.credit-negative {
  color: rgb(185 28 28);
}

.partner-profile-details {
  min-width: 0;
}

.partner-profile-summary {
  display: grid;
  grid-template-columns: 14px minmax(0, auto) minmax(0, 1fr);
  min-width: 0;
  align-items: start;
  column-gap: 8px;
  row-gap: 4px;
  color: rgb(15 23 42);
  cursor: pointer;
  list-style: none;
}

.partner-profile-summary::-webkit-details-marker {
  display: none;
}

.partner-profile-summary::before {
  content: "▸";
  color: rgb(100 116 139);
  font-size: 12px;
  line-height: 1.45;
  transition: transform 0.18s ease;
}

.partner-profile-details[open] .partner-profile-summary::before {
  transform: rotate(90deg);
}

.partner-profile-summary strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: rgb(15 23 42);
  grid-column: 2 / -1;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.partner-profile-summary small {
  display: inline-flex;
  grid-column: 2 / -1;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  border-radius: 999px;
  background: rgb(241 245 249);
  padding: 2px 7px;
  color: rgb(71 85 105);
  font-size: 11px;
  line-height: 1.35;
}

.partner-profile-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  border-top: 1px dashed rgb(203 213 225);
  background: rgb(248 250 252);
  margin: 10px 0 0;
  padding: 12px;
}

.partner-profile-form label {
  display: grid;
  gap: 6px;
}

.partner-profile-form label span {
  color: rgb(71 85 105);
  font-size: 12px;
  font-weight: 800;
}

.partner-profile-form .input {
  padding: 7px 9px;
  font-size: 13px;
}

.user-status {
  width: fit-content;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 800;
}

.user-status-active {
  background: rgb(220 252 231);
  color: rgb(22 101 52);
}

.user-status-disabled {
  background: rgb(241 245 249);
  color: rgb(100 116 139);
}

.user-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.user-role-form {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  min-width: 180px;
}

.user-role-form .input {
  width: 100px;
  min-width: 100px;
  padding: 6px 8px;
  font-size: 13px;
}

.user-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.user-model-permission-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(520px, calc(100vw - 24px));
  max-width: none;
  height: 100vh;
  max-height: none;
  margin: 0;
  border: 0;
  border-left: 1px solid var(--admin-border);
  background: var(--admin-surface);
  color: var(--admin-text);
  padding: 0;
  box-shadow: -24px 0 60px rgb(0 0 0 / 36%);
}

.user-model-permission-drawer::backdrop {
  background: rgb(0 0 0 / 42%);
}

.user-model-permission-drawer form {
  display: grid;
  height: 100%;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}

.user-model-permission-drawer header,
.user-model-permission-drawer footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid var(--admin-border);
  padding: 18px;
}

.user-model-permission-drawer footer {
  border-top: 1px solid var(--admin-border);
  border-bottom: 0;
  justify-content: flex-end;
}

.user-model-permission-drawer header span {
  color: var(--admin-muted);
  font-size: 12px;
  font-weight: 800;
}

.user-model-permission-drawer h2,
.user-model-permission-drawer h3,
.user-model-permission-drawer p {
  margin: 0;
}

.user-model-permission-drawer h2 {
  margin-top: 4px;
  color: var(--admin-text);
  font-size: 20px;
  font-weight: 900;
}

.user-model-permission-drawer p {
  margin-top: 6px;
  color: var(--admin-muted);
  font-size: 13px;
  font-weight: 700;
}

.user-model-drawer-close {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  background: transparent;
  color: var(--admin-muted);
}

.user-model-drawer-close:hover {
  border-color: var(--admin-border-strong);
  color: var(--admin-text);
}

.user-model-drawer-close svg {
  width: 16px;
  height: 16px;
}

.user-model-permission-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-bottom: 1px solid var(--admin-border);
  padding: 12px 18px;
}

.user-model-permission-groups {
  display: grid;
  align-content: start;
  gap: 18px;
  overflow: auto;
  padding: 18px;
}

.user-model-permission-groups section {
  display: grid;
  gap: 10px;
}

.user-model-permission-groups h3 {
  color: var(--admin-text);
  font-size: 14px;
  font-weight: 900;
}

.user-model-permission-list {
  display: grid;
  gap: 8px;
}

.user-model-permission-list label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  background: var(--admin-surface-soft);
  padding: 10px;
}

.user-model-permission-list input {
  margin-top: 3px;
  accent-color: var(--admin-accent);
}

.user-model-permission-list strong,
.user-model-permission-list small {
  display: block;
  min-width: 0;
}

.user-model-permission-list strong {
  color: var(--admin-text);
  font-size: 13px;
  font-weight: 900;
}

.user-model-permission-list small {
  margin-top: 3px;
  color: var(--admin-muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

.user-role-form select:disabled,
.user-role-form button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.user-reset-form {
  grid-template-columns: minmax(120px, 1fr) auto;
  align-items: center;
}

.user-reset-form .input {
  padding: 6px 8px;
  font-size: 13px;
}

.role-management-workbench {
  display: grid;
  gap: 18px;
}

.role-management-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
}

.role-management-header h1 {
  color: rgb(15 23 42);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: 0;
}

.role-management-header p:last-child {
  margin-top: 6px;
  color: rgb(71 85 105);
  font-size: 14px;
}

.role-management-note {
  display: grid;
  justify-items: end;
  gap: 3px;
  border-radius: 8px;
  border: 1px solid rgb(191 219 254);
  background: rgb(239 246 255);
  padding: 10px 12px;
  color: rgb(30 64 175);
}

.role-management-note strong {
  font-size: 13px;
  font-weight: 800;
}

.role-management-note span {
  color: rgb(29 78 216);
  font-size: 12px;
  font-weight: 700;
}

.role-menu-form {
  display: grid;
  gap: 14px;
}

.role-menu-toolbar,
.role-menu-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-radius: 8px;
  border: 1px solid rgb(226 232 240);
  background: white;
  padding: 14px 16px;
}

.role-menu-toolbar h2 {
  color: rgb(15 23 42);
  font-size: 17px;
  font-weight: 800;
}

.role-menu-toolbar p,
.role-menu-footer span {
  margin-top: 4px;
  color: rgb(100 116 139);
  font-size: 13px;
  font-weight: 700;
}

.role-menu-matrix {
  overflow-x: auto;
  border-radius: 8px;
  border: 1px solid rgb(226 232 240);
  background: white;
}

.role-menu-row {
  display: grid;
  grid-template-columns: minmax(260px, 1.8fr) repeat(4, minmax(130px, 0.8fr));
  align-items: center;
  min-width: 860px;
  border-top: 1px solid rgb(226 232 240);
}

.role-menu-row:first-child {
  border-top: 0;
}

.role-menu-head {
  background: rgb(248 250 252);
  color: rgb(71 85 105);
}

.role-menu-group-row {
  background: rgb(248 250 252);
}

.role-menu-group-row strong {
  color: rgb(30 64 175);
}

.role-menu-row > * {
  min-width: 0;
  padding: 14px 16px;
}

.role-menu-row > * + * {
  border-left: 1px solid rgb(226 232 240);
}

.role-menu-row strong {
  display: block;
  color: rgb(15 23 42);
  font-size: 14px;
  font-weight: 800;
}

.role-menu-row small,
.role-menu-name span {
  display: block;
  margin-top: 4px;
  color: rgb(100 116 139);
  font-size: 12px;
  font-weight: 700;
}

.role-menu-name small {
  color: rgb(148 163 184);
}

.role-menu-name.is-child {
  padding-left: 30px;
}

.role-menu-name.is-child strong {
  position: relative;
}

.role-menu-name.is-child strong::before {
  position: absolute;
  top: 50%;
  left: -14px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgb(148 163 184);
  content: "";
  transform: translateY(-50%);
}

.role-menu-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  user-select: none;
  color: rgb(51 65 85);
  font-size: 13px;
  font-weight: 800;
}

.role-menu-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.role-menu-switch-track {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 22px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: rgb(203 213 225);
  transition: background 0.16s ease;
}

.role-menu-switch-track::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: white;
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.25);
  content: "";
  transition: transform 0.16s ease;
}

.role-menu-switch input:checked + .role-menu-switch-track {
  background: rgb(37 99 235);
}

.role-menu-switch input:checked + .role-menu-switch-track::after {
  transform: translateX(16px);
}

.role-menu-switch input:checked ~ .role-menu-switch-text {
  color: rgb(29 78 216);
}

.role-menu-fixed-cell {
  color: rgb(100 116 139);
  font-size: 13px;
  font-weight: 800;
}

.role-menu-fixed-cell.is-allowed {
  color: rgb(29 78 216);
}

.vip-privileges-workbench {
  display: grid;
  gap: 18px;
}

.vip-privilege-form {
  display: grid;
  gap: 14px;
}

.vip-privilege-toolbar,
.vip-privilege-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-radius: 8px;
  border: 1px solid rgb(226 232 240);
  background: white;
  padding: 14px 16px;
}

.vip-privilege-toolbar h2 {
  color: rgb(15 23 42);
  font-size: 17px;
  font-weight: 800;
}

.vip-privilege-toolbar p,
.vip-privilege-footer span {
  margin-top: 4px;
  color: rgb(100 116 139);
  font-size: 13px;
  font-weight: 700;
}

.vip-privilege-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 12px;
}

.vip-privilege-card {
  display: grid;
  gap: 14px;
  border: 1px solid rgb(226 232 240);
  border-radius: 8px;
  background: white;
  padding: 16px;
  box-shadow: var(--admin-shadow);
}

.vip-privilege-card > div {
  display: grid;
  gap: 4px;
}

.vip-privilege-card > div span,
.vip-privilege-card label span {
  color: rgb(71 85 105);
  font-size: 12px;
  font-weight: 800;
}

.vip-privilege-card strong {
  color: rgb(15 23 42);
  font-size: 30px;
  font-weight: 900;
}

.vip-privilege-card small {
  color: rgb(100 116 139);
  font-size: 12px;
  font-weight: 700;
}

.vip-privilege-card label {
  display: grid;
  gap: 6px;
}

.membership-workbench {
  display: grid;
  gap: 18px;
}

.membership-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.38fr);
  gap: 14px;
  overflow: hidden;
  border: 1px solid rgb(70 117 142 / 58%);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgb(13 20 28 / 96%), rgb(21 35 46 / 96%)),
    #101820;
  box-shadow: 0 24px 64px rgb(0 0 0 / 26%);
}

.membership-hero-main {
  display: grid;
  align-content: center;
  gap: 10px;
  min-width: 0;
  padding: 28px;
}

.membership-hero-main .eyebrow {
  color: #68c8f5;
}

.membership-hero-main h2 {
  color: #f3f8fb;
  font-size: 32px;
  font-weight: 950;
}

.membership-hero-main p {
  max-width: 760px;
  color: #b8c8d6;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.7;
}

.membership-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}

.membership-quota-panel {
  display: grid;
  align-content: center;
  gap: 8px;
  min-width: 0;
  border-left: 1px solid rgb(104 200 245 / 24%);
  background: rgb(255 255 255 / 6%);
  padding: 26px;
}

.membership-quota-panel span,
.membership-quota-panel small {
  color: #b8c8d6;
  font-size: 13px;
  font-weight: 800;
}

.membership-quota-panel strong {
  color: #ffffff;
  font-size: 46px;
  font-weight: 950;
  line-height: 1;
}

.membership-quota-meter {
  overflow: hidden;
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: rgb(255 255 255 / 12%);
}

.membership-quota-meter span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #67e8f9, #86efac);
}

.membership-section {
  display: grid;
  gap: 14px;
  border: 1px solid rgb(226 232 240);
  border-radius: 8px;
  background: white;
  padding: 18px;
  box-shadow: var(--admin-shadow);
}

.membership-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.membership-section-head h2 {
  color: rgb(15 23 42);
  font-size: 18px;
  font-weight: 900;
}

.membership-section-head p {
  margin-top: 4px;
  color: rgb(100 116 139);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
}

.membership-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.membership-feature-card {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  min-width: 0;
  border: 1px solid rgb(226 232 240);
  border-radius: 8px;
  background: rgb(248 250 252);
  padding: 13px;
}

.membership-feature-card i,
.membership-feature-card svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: rgb(37 99 235);
}

.membership-feature-card div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.membership-feature-card strong {
  color: rgb(15 23 42);
  font-size: 14px;
  font-weight: 900;
}

.membership-feature-card span {
  color: rgb(100 116 139);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
}

.membership-plan-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.membership-plan-card {
  display: grid;
  gap: 12px;
  min-width: 0;
  border: 1px solid rgb(226 232 240);
  border-radius: 8px;
  background: rgb(248 250 252);
  padding: 16px;
}

.membership-plan-card.is-current {
  border-color: rgb(37 99 235 / 48%);
  background: rgb(239 246 255);
}

.membership-plan-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.membership-plan-title span {
  color: rgb(15 23 42);
  font-size: 14px;
  font-weight: 900;
}

.membership-plan-title b {
  border-radius: 999px;
  background: rgb(219 234 254);
  padding: 4px 8px;
  color: rgb(29 78 216);
  font-size: 11px;
  font-weight: 900;
}

.membership-plan-card strong {
  color: rgb(15 23 42);
  font-size: 34px;
  font-weight: 950;
  line-height: 1;
}

.membership-plan-card p {
  color: rgb(71 85 105);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.5;
}

.membership-plan-card ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.membership-plan-card li {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: rgb(71 85 105);
  font-size: 12px;
  font-weight: 800;
}

.membership-plan-card li i,
.membership-plan-card li svg {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  color: rgb(8 119 93);
}

.membership-plan-card .btn-primary,
.membership-plan-card .btn-secondary {
  justify-content: center;
  width: 100%;
  text-decoration: none;
}

@media (max-width: 900px) {
  .membership-hero,
  .membership-plan-grid {
    grid-template-columns: 1fr;
  }

  .membership-quota-panel {
    border-top: 1px solid rgb(104 200 245 / 24%);
    border-left: 0;
  }

  .membership-section-head {
    align-items: stretch;
    flex-direction: column;
  }
}

.materials-workbench {
  display: grid;
  gap: 24px;
}

.materials-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
}

.materials-header h1 {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: 0;
}

.materials-header p {
  margin-top: 6px;
  max-width: 70ch;
  color: rgb(71 85 105);
}

.eyebrow {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgb(37 99 235);
  text-transform: uppercase;
}

.materials-health {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.materials-health span,
.status-pill,
.group-strip span {
  border-radius: 999px;
  border: 1px solid rgb(203 213 225);
  background: white;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
  color: rgb(51 65 85);
}

.material-tabs {
  display: grid;
  gap: 8px;
  border-radius: 8px;
  border: 1px solid rgb(203 213 225);
  background: white;
  padding: 8px;
}

.material-tab {
  display: grid;
  gap: 3px;
  border-radius: 6px;
  padding: 11px 12px;
  text-align: left;
  font-size: 14px;
  font-weight: 700;
  color: rgb(71 85 105);
}

.material-tab small {
  color: rgb(100 116 139);
  font-size: 12px;
  font-weight: 700;
}

.material-tab:hover {
  background: rgb(226 232 240);
  color: rgb(15 23 42);
}

.material-tab.is-active {
  background: rgb(15 23 42);
  color: white;
}

.material-tab.is-active small {
  color: rgb(203 213 225);
}

.materials-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  align-items: start;
  gap: 18px;
}

.material-notice {
  border-radius: 8px;
  border: 1px solid rgb(187 247 208);
  background: rgb(240 253 244);
  padding: 12px 14px;
  color: rgb(22 101 52);
  font-size: 14px;
  font-weight: 700;
}

.task-page-notice {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.task-page-notice a {
  color: rgb(37 99 235);
  text-decoration: none;
}

.task-page-notice a:hover {
  text-decoration: underline;
}

.material-sidebar {
  position: sticky;
  top: 18px;
}

.materials-main {
  display: grid;
  min-width: 0;
}

.material-section {
  display: none;
  min-width: 0;
}

.material-section.is-active {
  display: grid;
  gap: 14px;
}

.material-panel-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
  border-radius: 8px;
  border: 1px solid rgb(203 213 225);
  background: white;
  padding: 16px;
}

.material-panel-head h2 {
  color: rgb(15 23 42);
  font-size: 22px;
  font-weight: 800;
}

.material-create-panel {
  position: relative;
  flex: 0 0 auto;
}

.material-create-panel > summary {
  list-style: none;
  cursor: pointer;
}

.material-create-panel > summary::-webkit-details-marker {
  display: none;
}

.material-create-panel[open] > summary {
  background: rgb(30 64 175);
}

.material-create-panel .material-form {
  position: absolute;
  z-index: 20;
  top: calc(100% + 10px);
  right: 0;
  width: min(460px, calc(100vw - 36px));
  box-shadow: 0 22px 70px rgb(15 23 42 / 18%);
}

.material-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(160px, 220px);
  gap: 10px;
  border-radius: 8px;
  border: 1px solid rgb(226 232 240);
  background: rgb(248 250 252);
  padding: 12px;
}

.material-form,
.material-list,
.portrait-group-section {
  min-width: 0;
  border: 1px solid rgb(203 213 225);
  border-radius: 8px;
  background: white;
  padding: 20px;
}

.material-form {
  max-height: calc(100vh - 120px);
  overflow: auto;
}

.material-import-workbench {
  min-width: 0;
  border: 1px solid rgb(203 213 225);
  border-radius: 8px;
  background: white;
  padding: 20px;
}

.material-import-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.65fr);
  gap: 16px;
  align-items: stretch;
}

.prompt-import-grid {
  grid-template-columns: minmax(260px, 0.75fr) minmax(360px, 1.25fr);
}

.material-import-primary,
.material-import-secondary {
  min-width: 0;
  border-radius: 8px;
  border: 1px solid rgb(226 232 240);
  background: rgb(248 250 252);
  padding: 16px;
}

.material-import-secondary {
  background: white;
}

.material-import-secondary h3 {
  color: rgb(15 23 42);
  font-size: 15px;
  font-weight: 800;
}

.material-import-secondary p {
  color: rgb(100 116 139);
  font-size: 13px;
}

.prompt-single-textarea {
  min-height: 220px;
}

.upload-drop-large {
  padding: 18px;
}

.bulk-upload-queue {
  display: grid;
  gap: 10px;
}

.bulk-upload-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.bulk-upload-row {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-width: 0;
  border-radius: 8px;
  border: 1px solid rgb(226 232 240);
  background: rgb(248 250 252);
  padding: 10px;
}

.bulk-upload-thumb {
  display: grid;
  width: 76px;
  height: 56px;
  place-items: center;
  overflow: hidden;
  border-radius: 8px;
  background: rgb(226 232 240);
  color: rgb(51 65 85);
  font-size: 12px;
  font-weight: 800;
}

.bulk-upload-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bulk-upload-row strong,
.bulk-upload-row small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bulk-upload-row strong {
  color: rgb(15 23 42);
  font-size: 14px;
  font-weight: 800;
}

.bulk-upload-row small {
  margin: 2px 0 8px;
  color: rgb(100 116 139);
  font-size: 12px;
}

.portrait-group-card {
  align-items: stretch;
}

.portrait-group-card > div:first-child {
  min-width: 0;
  flex: 1;
}

.section-heading,
.list-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.section-heading {
  display: block;
}

.section-heading h2,
.list-heading h2 {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0;
}

.section-heading p {
  margin-top: 4px;
  color: rgb(100 116 139);
  font-size: 14px;
}

.list-heading span {
  border-radius: 999px;
  background: rgb(15 23 42);
  padding: 4px 9px;
  color: white;
  font-size: 12px;
  font-weight: 800;
}

.material-group-block {
  display: grid;
  gap: 12px;
  min-width: 0;
  border-radius: 8px;
  border: 1px solid rgb(226 232 240);
  background: rgb(248 250 252);
  padding: 14px;
}

.material-group-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.material-group-head h3 {
  color: rgb(15 23 42);
  font-size: 15px;
  font-weight: 800;
}

.material-group-head p {
  margin-top: 4px;
  color: rgb(100 116 139);
  font-size: 12px;
}

[data-material-item][hidden] {
  display: none !important;
}

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

.stack.divided {
  margin-top: 20px;
  border-top: 1px solid rgb(226 232 240);
  padding-top: 20px;
}

.stack label > span,
.upload-drop > span {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 800;
  color: rgb(51 65 85);
}

.upload-drop {
  display: block;
  border-radius: 8px;
  border: 1px dashed rgb(148 163 184);
  background: rgb(248 250 252);
  padding: 16px;
  cursor: pointer;
}

.upload-drop.is-drag-over {
  border-color: rgb(37 99 235);
  background: rgb(239 246 255);
  box-shadow: inset 0 0 0 1px rgb(37 99 235);
}

.upload-drop input {
  width: 100%;
  font-size: 13px;
}

.upload-drop strong {
  display: block;
  margin-top: 10px;
  font-size: 14px;
  color: rgb(15 23 42);
}

.upload-drop small {
  display: block;
  margin-top: 3px;
  color: rgb(100 116 139);
}

.preview-shell {
  display: grid;
  min-height: 132px;
  place-items: center;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid rgb(226 232 240);
  background: rgb(248 250 252);
  color: rgb(100 116 139);
  font-size: 13px;
}

.preview-shell img,
.preview-shell video {
  max-height: 220px;
  width: 100%;
  object-fit: contain;
  background: rgb(15 23 42);
}

.preview-shell audio {
  width: calc(100% - 24px);
}

.removable-preview-card {
  display: grid;
  position: relative;
  width: 100%;
  gap: 10px;
  padding: 12px;
}

.removable-preview-card img,
.removable-preview-card video {
  max-height: 220px;
  width: 100%;
  object-fit: contain;
}

.removable-preview-card audio {
  width: 100%;
}

.removable-preview-card strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgb(15 23 42);
  font-size: 13px;
  font-weight: 800;
}

.preview-remove-button {
  position: absolute;
  top: 18px;
  right: 18px;
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 999px;
  background: rgb(220 38 38);
  color: white;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 8px 18px rgb(15 23 42 / 22%);
}

.preview-remove-button:hover {
  background: rgb(185 28 28);
}

.list-stack,
.asset-grid,
.scene-library {
  display: grid;
  gap: 12px;
}

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

.portrait-material-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 220px));
  justify-content: start;
  gap: 12px;
}

.scene-library {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  align-items: start;
}

.library-row,
.asset-card,
.scene-card {
  position: relative;
  min-width: 0;
  border-radius: 8px;
  border: 1px solid rgb(226 232 240);
  background: rgb(248 250 252);
}

.library-row {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 46px 14px 14px;
}

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

.library-row h3,
.asset-card h3,
.scene-card h3 {
  font-size: 14px;
  font-weight: 800;
  color: rgb(15 23 42);
}

.library-row p,
.asset-card p,
.scene-card p {
  margin-top: 5px;
  overflow-wrap: anywhere;
  color: rgb(100 116 139);
  font-size: 12px;
  line-height: 1.45;
}

.media-row audio {
  margin-top: 10px;
  width: 100%;
}

.asset-card {
  overflow: hidden;
}

.scene-card {
  display: grid;
  overflow: hidden;
}

.asset-card img,
.asset-card video,
.audio-tile {
  aspect-ratio: 4 / 3;
  width: 100%;
  background: rgb(15 23 42);
  object-fit: cover;
}

.audio-tile {
  display: grid;
  place-items: center;
  color: white;
  font-size: 13px;
  font-weight: 800;
}

.scene-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 150px;
  padding: 10px;
  overflow: hidden;
  border-bottom: 1px solid rgb(226 232 240);
  background:
    linear-gradient(45deg, rgb(241 245 249) 25%, transparent 25%),
    linear-gradient(-45deg, rgb(241 245 249) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgb(241 245 249) 75%),
    linear-gradient(-45deg, transparent 75%, rgb(241 245 249) 75%);
  background-color: rgb(248 250 252);
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-size: 16px 16px;
}

.scene-thumb img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 320px;
  object-fit: contain;
}

.asset-card > div {
  display: grid;
  gap: 8px;
  padding: 12px;
}

.portrait-material-card {
  width: 100%;
  max-width: 220px;
}

.portrait-material-thumb {
  display: grid;
  aspect-ratio: 1 / 1;
  width: 100%;
  place-items: center;
  overflow: hidden;
  border-bottom: 1px solid rgb(226 232 240);
  background:
    linear-gradient(45deg, rgb(241 245 249) 25%, transparent 25%),
    linear-gradient(-45deg, rgb(241 245 249) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgb(241 245 249) 75%),
    linear-gradient(-45deg, transparent 75%, rgb(241 245 249) 75%);
  background-color: rgb(248 250 252);
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-size: 16px 16px;
}

.portrait-material-thumb img,
.portrait-material-thumb video,
.portrait-material-thumb .audio-tile {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.portrait-material-card > div:last-child {
  min-width: 0;
}

.scene-card-body {
  display: grid;
  min-width: 0;
  gap: 8px;
  padding: 12px 46px 12px 12px;
}

.scene-card-body p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.real-asset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.real-asset-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid rgb(226 232 240);
  background: white;
}

.real-asset-card img,
.real-asset-card video,
.real-asset-card .audio-tile {
  aspect-ratio: 4 / 3;
  width: 100%;
  object-fit: contain;
  background: rgb(248 250 252);
}

.real-asset-card > div {
  display: grid;
  gap: 4px;
  padding: 8px;
}

.real-asset-card strong {
  font-size: 12px;
  color: rgb(15 23 42);
}

.real-asset-card span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgb(100 116 139);
  font-size: 11px;
}

.portrait-asset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.portrait-asset-card {
  display: grid;
  position: relative;
  grid-template-columns: 88px minmax(0, 1fr);
  min-width: 0;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid rgb(226 232 240);
  background: white;
}

.portrait-asset-thumb {
  display: grid;
  width: 88px;
  height: 88px;
  place-items: center;
  overflow: hidden;
  background:
    linear-gradient(45deg, rgb(241 245 249) 25%, transparent 25%),
    linear-gradient(-45deg, rgb(241 245 249) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgb(241 245 249) 75%),
    linear-gradient(-45deg, transparent 75%, rgb(241 245 249) 75%);
  background-color: rgb(248 250 252);
  background-position: 0 0, 0 7px, 7px -7px, -7px 0;
  background-size: 14px 14px;
}

.portrait-asset-thumb img,
.portrait-asset-thumb video,
.portrait-asset-thumb .audio-tile {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.portrait-asset-card > div:last-child {
  display: grid;
  min-width: 0;
  align-content: center;
  gap: 4px;
  padding: 9px 42px 9px 10px;
}

.portrait-asset-card strong {
  font-size: 12px;
  color: rgb(15 23 42);
}

.portrait-asset-card span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgb(100 116 139);
  font-size: 11px;
}

.group-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.status-active {
  border-color: rgb(134 239 172);
  background: rgb(240 253 244);
  color: rgb(21 128 61);
}

.status-pending {
  border-color: rgb(253 224 71);
  background: rgb(254 252 232);
  color: rgb(133 77 14);
}

.status-failed {
  border-color: rgb(252 165 165);
  background: rgb(254 242 242);
  color: rgb(185 28 28);
}

.empty-state {
  display: grid;
  min-height: 132px;
  place-items: center;
  border-radius: 8px;
  border: 1px dashed rgb(203 213 225);
  background: rgb(248 250 252);
  color: rgb(100 116 139);
}

.generation-workbench {
  display: grid;
  gap: 14px;
}

.tasks-workbench {
  display: grid;
  gap: 14px;
}

.tasks-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
}

.tasks-header h1 {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: 0;
}

.tasks-header p:not(.eyebrow) {
  margin-top: 6px;
  color: rgb(71 85 105);
}

.task-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.task-summary-card {
  display: grid;
  gap: 8px;
  min-width: 0;
  border-radius: 8px;
  border: 1px solid rgb(203 213 225);
  background: white;
  padding: 16px;
}

.task-summary-card span {
  color: rgb(100 116 139);
  font-size: 12px;
  font-weight: 800;
}

.task-summary-card strong {
  color: rgb(15 23 42);
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
}

.task-board {
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid rgb(203 213 225);
  background: white;
}

.task-board-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid rgb(226 232 240);
  background: rgb(248 250 252);
  padding: 16px 18px;
}

.task-board-heading h2 {
  color: rgb(15 23 42);
  font-size: 18px;
  font-weight: 800;
}

.task-board-heading p {
  margin-top: 4px;
  color: rgb(100 116 139);
  font-size: 13px;
}

.task-board-heading span {
  border-radius: 999px;
  background: rgb(15 23 42);
  padding: 5px 10px;
  color: white;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.task-search-form {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid rgb(226 232 240);
  background: rgb(248 250 252);
  padding: 16px 18px;
}

.task-search-form label {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgb(191 219 254);
  background: rgb(239 246 255);
  color: rgb(29 78 216);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.task-search-form div {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
  border-radius: 8px;
  border: 1px solid rgb(203 213 225);
  background: white;
  padding: 6px;
  box-shadow: 0 1px 2px rgb(15 23 42 / 5%);
}

.task-search-form div:focus-within {
  border-color: rgb(37 99 235);
  box-shadow: 0 0 0 3px rgb(37 99 235 / 12%);
}

.task-search-form input {
  min-width: 220px;
  flex: 1 1 280px;
  border: 0;
  background: transparent;
  padding: 9px 10px;
  color: rgb(15 23 42);
  font-size: 14px;
  outline: 0;
}

.task-search-form input::placeholder {
  color: rgb(148 163 184);
}

.task-search-form input:focus {
  outline: 0;
}

.task-search-form button.btn-secondary {
  border-color: rgb(37 99 235);
  background: rgb(37 99 235);
  color: white;
  font-weight: 800;
  white-space: nowrap;
}

.task-search-form button.btn-secondary:hover {
  border-color: rgb(29 78 216);
  background: rgb(29 78 216);
}

.task-clear-search {
  display: inline-flex;
  align-items: center;
  border-radius: 6px;
  padding: 8px 11px;
  color: rgb(37 99 235);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.task-clear-search:hover {
  background: rgb(239 246 255);
}

.task-list {
  display: grid;
}

.task-batch {
  border-bottom: 1px solid rgb(226 232 240);
  background: white;
}

.task-batch:last-child {
  border-bottom: 0;
}

.task-batch-summary {
  display: grid;
  grid-template-columns: minmax(180px, 1.2fr) minmax(220px, 1fr) minmax(220px, auto);
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  cursor: pointer;
  list-style: none;
}

.task-batch-summary::-webkit-details-marker {
  display: none;
}

.task-batch-title {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
}

.task-batch-chevron {
  display: grid;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 999px;
  background: rgb(241 245 249);
  color: rgb(51 65 85);
  font-size: 22px;
  line-height: 1;
  transition: transform 140ms ease;
}

.task-batch[open] .task-batch-chevron {
  transform: rotate(90deg);
}

.task-batch-title h3 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgb(15 23 42);
  font-size: 17px;
  font-weight: 800;
}

.task-batch-meta {
  display: grid;
  min-width: 0;
  gap: 3px;
  color: rgb(71 85 105);
  font-size: 12px;
  font-weight: 700;
}

.task-batch-meta span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-batch-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.task-batch-body {
  border-top: 1px solid rgb(226 232 240);
}

.task-batch-detail {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) minmax(180px, 0.8fr);
  gap: 12px;
  border-bottom: 1px solid rgb(226 232 240);
  background: rgb(248 250 252);
  padding: 14px 18px;
}

.task-detail-panel {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 8px;
  border-radius: 8px;
  border: 1px solid rgb(226 232 240);
  background: white;
  padding: 12px;
}

.task-detail-prompt {
  grid-column: 1 / -1;
}

.task-detail-products {
  grid-column: span 2;
}

.task-detail-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: rgb(71 85 105);
  font-size: 12px;
  font-weight: 800;
}

.task-detail-title {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
}

.task-detail-heading small {
  border-radius: 999px;
  background: rgb(241 245 249);
  padding: 3px 7px;
  color: rgb(100 116 139);
  font-size: 11px;
  font-weight: 800;
}

.task-copy-prompt {
  flex: 0 0 auto;
  min-height: 28px;
  padding: 4px 9px;
  font-size: 12px;
}

.task-detail-prompt p {
  max-height: 132px;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: rgb(15 23 42);
  font-size: 13px;
  line-height: 1.5;
}

.task-param-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.task-param-list span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 999px;
  background: rgb(241 245 249);
  padding: 5px 8px;
  color: rgb(51 65 85);
  font-size: 12px;
  font-weight: 800;
}

.task-materials-panel {
  display: grid;
  gap: 8px;
}

.task-material-strip,
.task-material-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 84px);
  gap: 8px;
  align-items: start;
}

.task-material-thumb {
  display: grid;
  min-width: 0;
  gap: 5px;
  margin: 0;
}

.task-material-thumb img,
.task-material-thumb video,
.task-material-audio,
.task-material-empty {
  display: grid;
  aspect-ratio: 1 / 1;
  width: 100%;
  place-items: center;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid rgb(226 232 240);
  background: rgb(241 245 249);
  color: rgb(100 116 139);
  object-fit: cover;
  font-size: 12px;
  font-weight: 800;
}

.task-material-audio {
  background: rgb(15 23 42);
  color: white;
}

.task-material-thumb figcaption {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgb(71 85 105);
  font-size: 12px;
  font-weight: 800;
}

.task-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 210px;
  gap: 18px;
  min-width: 0;
  border-bottom: 1px solid rgb(226 232 240);
  padding: 18px;
}

.task-card:last-child {
  border-bottom: 0;
}

.task-card-failed {
  background: rgb(255 251 251);
}

.task-card-main {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 14px;
}

.task-title-row {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
}

.task-kicker {
  color: rgb(100 116 139);
  font-size: 12px;
  font-weight: 800;
}

.task-title-row h3 {
  margin-top: 3px;
  color: rgb(15 23 42);
  font-size: 18px;
  font-weight: 800;
}

.task-status-stack {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.task-status {
  border-radius: 999px;
  border: 1px solid rgb(203 213 225);
  background: white;
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.task-status-running,
.task-status-queued,
.task-status-submitted,
.task-archive-pending {
  border-color: rgb(253 224 71);
  background: rgb(254 252 232);
  color: rgb(133 77 14);
}

.task-status-succeeded,
.task-archive-archived,
.task-publish-published {
  border-color: rgb(134 239 172);
  background: rgb(240 253 244);
  color: rgb(21 128 61);
}

.task-publish-waiting {
  border-color: rgb(147 197 253);
  background: rgb(239 246 255);
  color: rgb(29 78 216);
}

.task-status-failed,
.task-status-expired,
.task-status-cancelled,
.task-archive-failed {
  border-color: rgb(252 165 165);
  background: rgb(254 242 242);
  color: rgb(185 28 28);
}

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

.task-meta-grid div {
  min-width: 0;
  border-radius: 8px;
  background: rgb(248 250 252);
  padding: 10px 12px;
}

.task-meta-grid dt {
  color: rgb(100 116 139);
  font-size: 12px;
  font-weight: 800;
}

.task-meta-grid dd {
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgb(15 23 42);
  font-size: 13px;
  font-weight: 700;
}

.task-error,
.task-progress-note {
  display: grid;
  gap: 7px;
  border-radius: 8px;
  border: 1px solid rgb(226 232 240);
  padding: 12px;
}

.task-error {
  border-color: rgb(254 202 202);
  background: rgb(254 242 242);
  color: rgb(153 27 27);
}

.task-progress-note {
  background: rgb(248 250 252);
  color: rgb(51 65 85);
}

.task-error strong,
.task-progress-note strong {
  font-size: 13px;
  font-weight: 800;
}

.task-error p,
.task-progress-note p {
  color: inherit;
  font-size: 13px;
  line-height: 1.5;
}

.task-error summary {
  cursor: pointer;
  color: rgb(185 28 28);
  font-size: 12px;
  font-weight: 800;
}

.task-error pre {
  max-height: 96px;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  border-radius: 6px;
  background: white;
  padding: 9px;
  color: rgb(127 29 29);
  font-size: 12px;
  line-height: 1.45;
}

.task-preview-panel {
  display: grid;
  align-content: start;
  justify-items: stretch;
  gap: 10px;
  min-width: 0;
}

.task-video-preview,
.task-preview-empty {
  width: 100%;
  height: 150px;
  border-radius: 8px;
  border: 1px solid rgb(226 232 240);
  background: rgb(15 23 42);
}

.task-video-preview {
  object-fit: contain;
}

.task-preview-empty {
  display: grid;
  place-items: center;
  background:
    linear-gradient(45deg, rgb(241 245 249) 25%, transparent 25%),
    linear-gradient(-45deg, rgb(241 245 249) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgb(241 245 249) 75%),
    linear-gradient(-45deg, transparent 75%, rgb(241 245 249) 75%);
  background-color: rgb(248 250 252);
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-size: 16px 16px;
  color: rgb(100 116 139);
  font-size: 13px;
  font-weight: 800;
}

.task-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: rgb(37 99 235);
  padding: 8px 12px;
  color: white;
  font-size: 13px;
  font-weight: 800;
}

.task-download:hover {
  background: rgb(29 78 216);
}

.task-publish-form {
  display: grid;
}

.task-publish,
.task-publish-state {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 800;
}

.task-publish {
  border: 1px solid rgb(22 163 74);
  background: rgb(22 163 74);
  color: white;
  cursor: pointer;
}

.task-publish:hover {
  background: rgb(21 128 61);
}

.task-publish-state {
  border: 1px solid rgb(187 247 208);
  background: rgb(240 253 244);
  color: rgb(21 128 61);
}

.task-batch-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgb(191 219 254);
  background: white;
  padding: 5px 10px;
  color: rgb(29 78 216);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.task-batch-download:hover {
  background: rgb(239 246 255);
}

.task-batch-ad-audit-form {
  display: none;
  margin: 0;
}

.task-batch-ad-audit-button {
  cursor: pointer;
}

.task-batch-console {
  border-color: #dbe4f0;
}

.task-batch-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #dbe4f0;
  background: #fff;
  padding: 10px 14px;
}

.task-batch-toolbar-actions {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.task-batch-search {
  display: inline-flex;
  flex: 1 1 820px;
  max-width: 980px;
  min-height: 38px;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.task-batch-search input {
  flex: 1 1 auto;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: white;
  padding: 9px 12px;
  color: #0f172a;
  font-size: 13px;
  outline: none;
}

.task-batch-search input[type="search"] {
  min-width: 260px;
}

.task-batch-search input[type="date"] {
  min-width: 150px;
  max-width: 170px;
  flex: 0 0 150px;
}

.task-date-separator {
  color: #94a3b8;
  font-size: 13px;
  font-weight: 900;
}

.task-batch-search input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgb(37 99 235 / 14%);
}

.task-batch-table {
  display: grid;
  overflow-x: auto;
}

.task-batch-table-head,
.task-batch-table-row {
  display: grid;
  grid-template-columns:
    minmax(32px, 32px)
    minmax(116px, 0.8fr)
    minmax(92px, 0.6fr)
    minmax(150px, 1fr)
    minmax(190px, 1.25fr)
    minmax(170px, 1.1fr)
    minmax(96px, 0.7fr)
    minmax(132px, 0.8fr)
    minmax(220px, 1.05fr);
  min-width: 1290px;
  align-items: center;
  gap: 12px;
}

.task-batch-table-head {
  border-bottom: 1px solid #dbe4f0;
  background: #f8fafc;
  padding: 11px 14px;
  color: #475569;
  font-size: 12px;
  font-weight: 900;
}

.task-batch-row {
  border-bottom: 1px solid #e2e8f0;
  background: white;
}

.task-batch-row:last-child {
  border-bottom: 0;
}

.task-batch-row .task-batch-summary {
  cursor: pointer;
  list-style: none;
  padding: 11px 14px;
}

.task-batch-row .task-batch-summary::-webkit-details-marker {
  display: none;
}

.task-batch-table-row > span {
  min-width: 0;
  color: #334155;
  font-size: 13px;
  font-weight: 800;
}

.task-batch-id,
.task-batch-progress,
.task-batch-params,
.task-batch-strategy {
  display: grid;
  gap: 4px;
}

.task-batch-select-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.task-batch-select-cell input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #2563eb;
  cursor: pointer;
}

.task-batch-select-cell input:disabled {
  cursor: not-allowed;
  opacity: 0.35;
}

.task-batch-id {
  display: flex;
  align-items: center;
  gap: 8px;
}

.task-batch-row .task-batch-chevron {
  display: inline-flex;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  align-items: center;
  justify-content: center;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #64748b;
  transform: none;
}

.task-batch-row .task-batch-chevron::before {
  content: "";
  width: 5px;
  height: 5px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 140ms ease;
}

.task-batch-row[open] .task-batch-chevron {
  border-color: #2563eb;
  background: #eff6ff;
  color: #2563eb;
  transform: none;
}

.task-batch-row[open] .task-batch-chevron::before {
  transform: rotate(45deg);
}

.task-batch-id-text {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.task-batch-id strong,
.task-batch-progress strong,
.task-batch-params strong,
.task-batch-strategy strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #0f172a;
  font-size: 13px;
  font-weight: 900;
}

.task-batch-id small,
.task-batch-progress small,
.task-batch-params small,
.task-batch-strategy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}

.task-batch-actions {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 8px;
  align-items: center;
  white-space: nowrap;
}

.task-batch-row[open] .task-batch-body {
  border-top: 1px solid #dbe4f0;
}

.task-batch-row .task-batch-detail {
  grid-template-columns: minmax(260px, 1.3fr) minmax(220px, 0.7fr);
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
}

.task-child-table-wrap {
  overflow-x: auto;
  background: white;
  padding: 0 18px 18px;
}

.task-child-table {
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  background: white;
}

.task-child-table th,
.task-child-table td {
  border-bottom: 1px solid #e2e8f0;
  padding: 12px;
  text-align: left;
  vertical-align: top;
}

.task-child-table th {
  background: #f8fafc;
  color: #475569;
  font-size: 12px;
  font-weight: 900;
}

.task-child-table td {
  color: #334155;
  font-size: 13px;
  font-weight: 700;
}

.task-child-table tbody tr:last-child td {
  border-bottom: 0;
}

.task-child-table td p {
  margin-top: 4px;
  color: #64748b;
  font-size: 12px;
}

.task-mini-materials {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.task-mini-materials span,
.task-result-muted,
.task-result-ready {
  display: inline-flex;
  border-radius: 999px;
  background: #f1f5f9;
  padding: 5px 8px;
  color: #475569;
  font-size: 12px;
  font-weight: 800;
}

.task-result-ready {
  background: #dcfce7;
  color: #15803d;
}

.task-error-inline {
  display: grid;
  max-width: 380px;
  gap: 6px;
  border-radius: 8px;
  border: 1px solid #fecaca;
  background: #fef2f2;
  padding: 10px;
  color: #991b1b;
}

.task-error-inline strong {
  font-size: 13px;
  font-weight: 900;
}

.task-error-inline p {
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.5;
}

.task-error-inline small {
  color: #b91c1c;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.task-error-inline summary {
  cursor: pointer;
  color: #dc2626;
  font-size: 12px;
  font-weight: 900;
}

.task-error-inline pre {
  max-width: 360px;
  max-height: 120px;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  border-radius: 6px;
  background: #fef2f2;
  padding: 8px;
  color: #991b1b;
  font-size: 12px;
}

.task-child-actions {
  align-items: flex-start;
}

.task-child-actions > a {
  min-width: 72px;
  justify-content: center;
}

.task-child-actions > button {
  min-width: 42px;
}

.task-child-actions .task-video-preview {
  width: 128px;
  height: 72px;
  flex: 0 0 128px;
}

.task-video-preview-dialog {
  width: min(860px, calc(100vw - 32px));
  max-width: none;
  border: 1px solid var(--admin-border-strong);
  border-radius: 10px;
  padding: 0;
  background: #0d1116;
  color: var(--admin-text);
  box-shadow: 0 28px 80px rgb(0 0 0 / 42%);
}

.task-video-preview-dialog::backdrop {
  background: rgb(0 0 0 / 68%);
}

.task-video-preview-shell {
  display: grid;
  gap: 0;
}

.task-video-preview-header,
.task-video-preview-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--admin-border);
  padding: 14px 16px;
}

.task-video-preview-header > div {
  display: grid;
  gap: 3px;
}

.task-video-preview-header span {
  color: var(--admin-muted);
  font-size: 12px;
  font-weight: 700;
}

.task-video-preview-header strong {
  color: var(--admin-text);
  font-size: 16px;
}

.task-video-preview-header button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--admin-border-strong);
  border-radius: 8px;
  background: #111720;
  color: var(--admin-text);
  cursor: pointer;
}

.task-video-preview-header button:hover {
  border-color: var(--admin-accent);
  color: var(--admin-accent);
}

.task-video-preview-dialog video {
  width: 100%;
  max-height: min(70vh, 720px);
  background: #05070a;
}

.task-video-preview-footer {
  justify-content: flex-end;
  border-top: 1px solid var(--admin-border);
  border-bottom: 0;
}

.task-empty-state {
  display: grid;
  min-height: 180px;
  place-items: center;
  gap: 6px;
  padding: 32px;
  text-align: center;
}

.task-empty-state strong {
  color: rgb(15 23 42);
  font-size: 18px;
  font-weight: 800;
}

.task-empty-state p {
  color: rgb(100 116 139);
  font-size: 14px;
}

.task-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid rgb(226 232 240);
  background: white;
  padding: 16px 18px;
  color: rgb(71 85 105);
  font-size: 13px;
  font-weight: 800;
}

.task-pagination > div:first-child {
  border-radius: 999px;
  background: rgb(248 250 252);
  padding: 8px 12px;
  color: rgb(71 85 105);
  white-space: nowrap;
}

.task-pagination-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.task-pagination-actions a,
.task-pagination-actions span {
  display: inline-flex;
  min-width: 36px;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: 1px solid rgb(203 213 225);
  background: white;
  padding: 8px 11px;
  color: rgb(51 65 85);
  line-height: 1;
  box-shadow: 0 1px 2px rgb(15 23 42 / 4%);
  transition:
    border-color 140ms ease,
    background 140ms ease,
    color 140ms ease,
    transform 140ms ease;
}

.task-pagination-actions a:hover {
  border-color: rgb(37 99 235);
  background: rgb(239 246 255);
  color: rgb(37 99 235);
  transform: translateY(-1px);
}

.task-pagination-actions span[aria-disabled="true"] {
  background: rgb(241 245 249);
  color: rgb(148 163 184);
  box-shadow: none;
}

.task-pagination-actions .task-page-current {
  border-color: rgb(37 99 235);
  background: rgb(37 99 235);
  color: white;
  box-shadow: 0 8px 18px rgb(37 99 235 / 18%);
}

.generation-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
}

.generation-header h1 {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 0;
}

.generation-header .btn-secondary {
  justify-self: start;
}

.generation-header p:not(.eyebrow) {
  margin-top: 6px;
  color: rgb(71 85 105);
}

.generation-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  align-items: start;
  gap: 14px;
}

.generation-main {
  display: grid;
  grid-template-columns: minmax(340px, 0.9fr) minmax(380px, 1.1fr);
  min-width: 0;
  gap: 14px;
}

.generation-side {
  position: sticky;
  top: 14px;
}

.generation-panel {
  min-width: 0;
  border-radius: 8px;
  border: 1px solid rgb(203 213 225);
  background: white;
  padding: 14px;
}

.prompt-panel {
  display: grid;
  grid-row: span 2;
  gap: 10px;
}

.generation-field {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.generation-field > span,
.generation-field legend {
  font-size: 13px;
  font-weight: 800;
  color: rgb(51 65 85);
}

.prompt-input-shell {
  display: grid;
}

.prompt-template-select {
  height: 36px;
  min-height: 36px;
  padding: 4px 36px 4px 10px;
  font-size: 13px;
  line-height: 1.25;
}

.prompt-editor {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 320px;
  min-height: 320px;
  max-height: 480px;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  outline: none;
  border-radius: 8px;
  border: 1px solid rgb(226 232 240);
  background: rgb(248 250 252);
  padding: 10px 12px;
  color: rgb(30 41 59);
  font-size: 14px;
  line-height: 1.55;
  cursor: text;
}

.prompt-editor:focus {
  border-color: rgb(37 99 235);
  box-shadow: 0 0 0 3px rgb(37 99 235 / 15%);
}

.prompt-editor:empty::before {
  content: attr(data-placeholder);
  color: rgb(148 163 184);
}

.prompt-editor-token {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 1px 2px;
  border-radius: 999px;
  border: 1px solid rgb(147 197 253);
  background: rgb(219 234 254);
  padding: 2px 8px;
  color: rgb(30 64 175);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
  vertical-align: baseline;
}

.prompt-editor-token[data-mention-kind="product"] {
  border-color: rgb(125 211 252);
  background: rgb(224 242 254);
  color: rgb(3 105 161);
}

.prompt-editor-token[data-mention-kind="background"] {
  border-color: rgb(167 243 208);
  background: rgb(220 252 231);
  color: rgb(21 128 61);
}

.prompt-editor-token[data-mention-kind="portrait"] {
  border-color: rgb(196 181 253);
  background: rgb(237 233 254);
  color: rgb(109 40 217);
}

.prompt-editor-token-label {
  max-width: 100%;
}

.prompt-editor-token-remove {
  display: inline-grid;
  width: 16px;
  height: 16px;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: rgb(255 255 255 / 78%);
  padding: 0;
  color: inherit;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
}

.prompt-editor-token:hover .prompt-editor-token-remove,
.prompt-editor-token:focus-within .prompt-editor-token-remove {
  opacity: 1;
  pointer-events: auto;
}

.prompt-editor-token-remove:hover {
  background: rgb(255 255 255);
}

.product-mention-menu {
  display: grid;
  gap: 4px;
  width: min(280px, 100%);
  max-height: 230px;
  overflow: auto;
  border: 1px solid rgb(203 213 225);
  border-radius: 10px;
  padding: 8px;
  background: white;
  box-shadow: 0 16px 34px rgb(15 23 42 / 14%);
}

.product-mention-menu.is-floating {
  position: fixed;
  z-index: 90;
}

.product-mention-menu[hidden] {
  display: none;
}

.product-mention-label {
  padding: 4px 6px;
  color: rgb(100 116 139);
  font-size: 12px;
  font-weight: 700;
}

.product-mention-empty {
  padding: 10px 8px;
  color: rgb(100 116 139);
  font-size: 13px;
}

.product-mention-menu button {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 9px;
  align-items: center;
  min-height: 52px;
  border: 0;
  border-radius: 8px;
  padding: 6px;
  background: white;
  color: rgb(15 23 42);
  cursor: pointer;
  text-align: left;
}

.product-mention-menu button:hover {
  background: rgb(241 245 249);
}

.product-mention-menu button img {
  grid-row: 1 / span 2;
  width: 40px;
  height: 40px;
  border-radius: 6px;
  object-fit: cover;
}

.product-mention-placeholder {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 6px;
  background: rgb(226 232 240);
  color: rgb(51 65 85);
  font-size: 14px;
  font-weight: 800;
}

.product-mention-menu button span {
  min-width: 0;
  overflow: hidden;
  color: rgb(15 23 42);
  font-size: 13px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-mention-menu button small {
  min-width: 0;
  overflow: hidden;
  color: rgb(100 116 139);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.generation-v2-workbench .product-mention-menu,
.creation-center .product-mention-menu {
  border-color: rgb(47 59 76);
  background: rgb(13 19 27);
  box-shadow: 0 18px 44px rgb(0 0 0 / 42%);
}

.generation-v2-workbench .product-mention-label,
.generation-v2-workbench .product-mention-empty,
.generation-v2-workbench .product-mention-menu button small,
.creation-center .product-mention-label,
.creation-center .product-mention-empty,
.creation-center .product-mention-menu button small {
  color: rgb(148 163 184);
}

.generation-v2-workbench .product-mention-menu button,
.creation-center .product-mention-menu button {
  background: transparent;
  color: rgb(226 232 240);
}

.generation-v2-workbench .product-mention-menu button:hover,
.creation-center .product-mention-menu button:hover {
  background: rgb(25 34 46);
}

.generation-v2-workbench .product-mention-menu button span,
.creation-center .product-mention-menu button span {
  color: rgb(241 245 249);
}

.generation-v2-workbench .product-mention-placeholder,
.creation-center .product-mention-placeholder {
  background: rgb(30 41 59);
  color: rgb(125 211 252);
}

.prompt-reference-guide {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  border-radius: 8px;
  border: 1px solid rgb(226 232 240);
  background: rgb(248 250 252);
  padding: 8px;
}

.prompt-reference-guide strong,
.prompt-reference-guide span {
  border-radius: 999px;
  padding: 4px 7px;
  font-size: 12px;
  font-weight: 800;
}

.product-panel {
  display: grid;
  gap: 10px;
}

.product-compact-grid {
  display: grid;
  grid-template-columns: minmax(180px, 0.85fr) minmax(140px, 1fr);
  gap: 10px;
  align-items: stretch;
}

.prompt-reference-guide strong {
  background: rgb(15 23 42);
  color: white;
}

.prompt-reference-guide span {
  border: 1px solid rgb(203 213 225);
  background: white;
  color: rgb(51 65 85);
}

.generation-upload {
  margin-bottom: 0;
  padding: 12px;
}

.product-compact-grid.is-dragging .generation-upload,
.product-compact-grid.is-dragging .generation-product-preview {
  border-color: rgb(37 99 235);
  background: rgb(239 246 255);
}

.generation-product-preview {
  min-height: 104px;
}

.generation-product-preview img {
  max-height: 130px;
}

.product-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: 8px;
  width: 100%;
}

.product-preview-item {
  position: relative;
  display: grid;
  gap: 5px;
  margin: 0;
}

.product-preview-zoom {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 8px;
  background: transparent;
  padding: 0;
  cursor: zoom-in;
}

.product-preview-item img {
  aspect-ratio: 1 / 1;
  width: 100%;
  max-height: none;
  border-radius: 8px;
  object-fit: cover;
}

.product-preview-item figcaption {
  color: rgb(51 65 85);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.product-preview-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  border-radius: 999px;
  background: rgb(15 23 42 / 86%);
  padding: 4px 7px;
  color: white;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

.product-preview-remove:hover {
  background: rgb(220 38 38);
}

.asset-choice-grid {
  display: grid;
  gap: 8px;
}

.asset-choice {
  display: grid;
  grid-template-columns: 72px minmax(180px, auto) minmax(150px, 1fr);
  align-items: center;
  gap: 10px;
  border-radius: 8px;
  border: 1px solid rgb(226 232 240);
  background: rgb(248 250 252);
  padding: 10px;
}

.asset-choice h3 {
  font-size: 14px;
  font-weight: 800;
  color: rgb(15 23 42);
}

.asset-choice p {
  margin-top: 4px;
  color: rgb(100 116 139);
  font-size: 13px;
  line-height: 1.45;
}

.segmented-control {
  display: inline-grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
  border-radius: 8px;
  border: 1px solid rgb(203 213 225);
  background: rgb(226 232 240);
  padding: 3px;
}

.segment-button {
  min-width: 48px;
  border-radius: 6px;
  padding: 7px 8px;
  color: rgb(71 85 105);
  font-size: 12px;
  font-weight: 800;
}

.segment-button:hover {
  background: rgb(248 250 252);
  color: rgb(15 23 42);
}

.segment-button.is-active {
  background: rgb(15 23 42);
  color: white;
}

.asset-choice-summary {
  display: grid;
  justify-items: start;
  gap: 2px;
  min-width: 0;
  border-radius: 8px;
  border: 1px solid rgb(203 213 225);
  background: white;
  padding: 8px 10px;
  text-align: left;
}

.asset-choice-summary:hover {
  border-color: rgb(37 99 235);
  box-shadow: 0 0 0 3px rgb(37 99 235 / 12%);
}

.asset-choice-summary span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgb(15 23 42);
  font-size: 13px;
  font-weight: 800;
}

.asset-choice-summary small {
  color: rgb(100 116 139);
  font-size: 12px;
}

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

.model-provider-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.ratio-option {
  cursor: pointer;
}

.model-provider-option,
.ratio-option {
  cursor: pointer;
}

.model-provider-option input,
.ratio-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.model-provider-option span,
.ratio-option span {
  display: grid;
  min-height: 34px;
  place-items: center;
  border-radius: 8px;
  border: 1px solid rgb(203 213 225);
  background: rgb(248 250 252);
  color: rgb(51 65 85);
  font-size: 13px;
  font-weight: 800;
}

.model-provider-option span {
  min-height: 40px;
}

.model-provider-option input:checked + span,
.ratio-option input:checked + span {
  border-color: rgb(15 23 42);
  background: rgb(15 23 42);
  color: white;
}

.model-provider-option input:focus-visible + span,
.ratio-option input:focus-visible + span {
  outline: 3px solid rgb(37 99 235 / 24%);
  outline-offset: 2px;
}

.generation-side .generation-panel {
  display: grid;
  gap: 10px;
}

.generation-submit {
  width: 100%;
  margin-top: 0;
  gap: 8px;
}

.generation-submit:disabled {
  cursor: wait;
  opacity: 0.72;
}

.generation-submit-feedback {
  min-height: 0;
}

.generation-credit-note {
  display: grid;
  gap: 4px;
  border: 1px solid rgb(219 234 254);
  border-radius: 8px;
  background: rgb(239 246 255);
  color: rgb(30 64 175);
  padding: 10px 12px;
  font-size: 13px;
}

.generation-credit-note strong {
  color: rgb(15 23 42);
  font-size: 14px;
}

.generation-feedback {
  display: grid;
  gap: 4px;
  border-radius: 8px;
  border: 1px solid rgb(203 213 225);
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.45;
}

.generation-feedback strong {
  color: rgb(15 23 42);
  font-weight: 800;
}

.generation-feedback span {
  color: rgb(71 85 105);
}

.generation-feedback a {
  color: rgb(37 99 235);
  font-weight: 800;
}

.generation-feedback-success {
  border-color: rgb(134 239 172);
  background: rgb(240 253 244);
}

.generation-feedback-pending {
  border-color: rgb(191 219 254);
  background: rgb(239 246 255);
}

.generation-feedback-error {
  border-color: rgb(254 202 202);
  background: rgb(254 242 242);
}

.generation-v2-workbench {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  min-width: 0;
  gap: 10px;
  overflow: hidden;
}

.app-content:has(.generation-v2-workbench) {
  width: 100%;
  height: calc(100vh - 74px);
  max-width: none;
  box-sizing: border-box;
  margin: 0;
  overflow: hidden;
  padding: 12px 18px;
}

.generation-v2-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.generation-v2-header:empty {
  display: none;
}

.generation-v2-form {
  display: grid;
  flex: 1 1 auto;
  width: 100%;
  height: auto;
  min-height: 0;
  grid-template-columns: minmax(500px, 1fr) minmax(320px, 420px) minmax(260px, 320px);
  align-items: stretch;
  gap: 12px;
}

.video-reverse-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid var(--admin-border);
  border-radius: 10px;
  background:
    radial-gradient(circle at 0% 0%, rgb(99 183 220 / 14%), transparent 34%),
    linear-gradient(180deg, #141a21, #10151a);
  padding: 16px 18px;
}

.video-reverse-header h1 {
  margin: 0;
  color: var(--admin-text);
  font-size: 22px;
  font-weight: 950;
}

.video-reverse-header p {
  margin: 7px 0 0;
  color: var(--admin-muted);
  font-size: 13px;
  line-height: 1.5;
}

.video-reverse-credit {
  display: grid;
  min-width: 150px;
  justify-items: end;
  gap: 4px;
  color: var(--admin-muted);
  font-size: 12px;
  font-weight: 800;
}

.video-reverse-credit strong {
  color: var(--admin-text);
  font-size: 15px;
}

.video-reverse-form {
  display: grid;
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  grid-template-columns: minmax(560px, 1fr) minmax(340px, 420px);
  gap: 12px;
}

.video-reverse-source-panel,
.video-reverse-result-panel {
  align-self: stretch;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.video-reverse-result-panel {
  grid-template-rows: auto minmax(0, 1fr);
}

.video-reverse-result {
  display: block;
  box-sizing: border-box;
  height: 100%;
  min-height: 0;
  align-self: stretch;
  resize: none;
}

.video-reverse-source-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.video-reverse-source-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
  border: 1px solid rgb(74 122 145 / 64%);
  border-radius: 8px;
  background:
    radial-gradient(circle at 12% 0%, rgb(93 178 216 / 14%), transparent 42%),
    #12191f;
  padding: 14px 16px;
}

.video-reverse-source-card strong {
  display: block;
  color: var(--admin-text);
  font-size: 15px;
  font-weight: 950;
}

.video-reverse-source-card p {
  margin: 6px 0 0;
  color: var(--admin-muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.55;
}

.video-reverse-source-card .btn-primary,
.video-reverse-source-card .credit-action-button {
  flex: 0 0 auto;
}

.generation-v2-column {
  display: grid;
  box-sizing: border-box;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  min-width: 0;
  gap: 10px;
}

.generation-v2-authoring {
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.generation-v2-authoring.is-reference-compact {
  align-content: start;
  grid-template-rows: auto auto;
  overflow: auto;
}

.generation-v2-controls {
  position: static;
}

.generation-v2-results {
  grid-template-rows: minmax(0, 1fr);
  position: static;
}

.generation-v2-panel {
  display: grid;
  box-sizing: border-box;
  min-height: 0;
  min-width: 0;
  gap: 10px;
  border: 1px solid rgb(216 225 236);
  border-radius: 8px;
  background: white;
  padding: 14px;
}

.generation-v2-reference-panel {
  grid-template-rows: auto auto minmax(0, 1fr);
}

.generation-v2-reference-panel:has(.generation-v2-qianchuan-compact.is-active),
.generation-v2-reference-panel:has(.generation-v2-qianchuan-compact.is-loading) {
  align-content: start;
  grid-template-rows: auto auto auto;
}

.generation-v2-panel-title {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
}

.generation-v2-panel-title h2 {
  color: rgb(15 23 42);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0;
}

.generation-v2-panel-title p {
  margin-top: 4px;
  color: rgb(100 116 139);
  font-size: 12px;
  line-height: 1.45;
}

.generation-v2-panel-title a {
  color: rgb(37 99 235);
  font-size: 13px;
  font-weight: 800;
}

.generation-v2-step-title {
  display: flex;
  min-width: 0;
  align-items: start;
  gap: 10px;
}

.generation-v2-step-icon {
  display: inline-grid;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 999px;
  background: rgb(15 23 42);
  color: white;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

.generation-v2-badge,
.generation-v2-status {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  min-height: 26px;
  border-radius: 999px;
  background: rgb(239 246 255);
  padding: 0 10px;
  color: rgb(29 78 216);
  font-size: 12px;
  font-weight: 800;
}

.generation-v2-status-on {
  background: rgb(220 252 231);
  color: rgb(22 101 52);
}

.generation-v2-status-off {
  background: rgb(241 245 249);
  color: rgb(100 116 139);
}

.generation-v2-upload-grid {
  display: grid;
  grid-template-columns: minmax(180px, 0.8fr) minmax(230px, 1.2fr);
  gap: 10px;
  min-height: 118px;
}

.generation-v2-dropzone {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  border: 1px dashed rgb(148 163 184);
  border-radius: 8px;
  background: rgb(248 250 252);
  min-height: 118px;
  padding: 12px;
  color: rgb(51 65 85);
  text-align: center;
  cursor: pointer;
}

.generation-v2-dropzone input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.generation-v2-dropzone strong {
  color: rgb(37 99 235);
  font-size: 16px;
  font-weight: 800;
}

.generation-v2-dropzone span {
  font-size: 13px;
  font-weight: 800;
}

.generation-v2-dropzone small {
  color: rgb(100 116 139);
  font-size: 12px;
}

.generation-v2-upload-grid.is-dragging .generation-v2-dropzone,
.generation-v2-upload-grid.is-dragging .generation-v2-product-preview {
  border-color: rgb(37 99 235);
  background: rgb(239 246 255);
}

.generation-v2-product-preview {
  display: grid;
  min-height: 118px;
  max-height: 136px;
  align-content: start;
  place-items: center;
  border: 1px solid rgb(216 225 236);
  border-radius: 8px;
  background: rgb(241 245 249);
  overflow: auto;
  padding: 8px;
}

.generation-v2-product-preview > span {
  color: rgb(148 163 184);
  font-size: 18px;
  font-weight: 800;
}

.generation-v2-product-preview .product-preview-grid {
  grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
  align-items: start;
  gap: 8px;
}

.generation-v2-product-preview .product-preview-item {
  gap: 4px;
}

.generation-v2-product-preview .product-preview-item img {
  aspect-ratio: 1 / 1;
  height: 74px;
}

.generation-v2-product-preview .product-preview-item figcaption {
  font-size: 11px;
}

.generation-v2-product-preview .product-preview-remove {
  top: 4px;
  right: 4px;
  padding: 3px 6px;
  font-size: 11px;
}

.generation-v2-inline-select {
  display: grid;
  min-width: 190px;
  gap: 5px;
}

.generation-v2-inline-select > span {
  color: rgb(51 65 85);
  font-size: 12px;
  font-weight: 800;
}

.generation-v2-add-template {
  min-width: 96px;
}

.generation-v2-template-list {
  display: grid;
  gap: 10px;
  max-height: none;
  min-height: 0;
  overflow: auto;
  padding: 2px 4px 2px 2px;
}

.generation-v2-template-list.is-empty {
  min-height: 126px;
  overflow: visible;
  padding: 0;
}

.generation-v2-template-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.generation-v2-template-filters button {
  min-height: 30px;
  border: 1px solid rgb(203 213 225);
  border-radius: 999px;
  background: white;
  padding: 0 12px;
  color: rgb(51 65 85);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.generation-v2-template-filters button:hover,
.generation-v2-template-filters button.is-active {
  border-color: rgb(37 99 235);
  background: rgb(239 246 255);
  color: rgb(29 78 216);
}

.generation-v2-template-item {
  position: relative;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: stretch;
  gap: 10px;
  width: 100%;
  min-height: 150px;
  border: 1px solid rgb(216 225 236);
  border-radius: 8px;
  background: white;
  padding: 10px;
  color: rgb(51 65 85);
  cursor: pointer;
  text-align: left;
  content-visibility: auto;
  contain-intrinsic-size: 150px;
}

.generation-v2-template-edit {
  position: absolute;
  right: 10px;
  bottom: 10px;
  border: 1px solid rgb(203 213 225);
  border-radius: 999px;
  background: white;
  padding: 4px 9px;
  color: rgb(37 99 235);
  font-size: 12px;
  font-weight: 800;
}

.generation-v2-template-edit:hover {
  background: rgb(239 246 255);
}

.generation-v2-template-item[hidden] {
  display: none;
}

.generation-v2-template-item:hover,
.generation-v2-template-item.is-active {
  border-color: rgb(37 99 235);
  box-shadow: 0 0 0 2px rgb(37 99 235 / 18%);
}

.generation-v2-template-media {
  display: grid;
  align-content: start;
  gap: 5px;
  min-width: 0;
}

.generation-v2-template-media video,
.generation-v2-template-media > span {
  display: grid;
  width: 88px;
  height: 120px;
  place-items: center;
  border-radius: 6px;
  background: rgb(226 232 240);
  object-fit: cover;
  overflow: hidden;
}

.generation-v2-template-media > span {
  color: rgb(100 116 139);
  font-size: 12px;
  font-weight: 800;
}

.generation-v2-template-media small {
  display: block;
  width: 88px;
  min-width: 0;
  overflow: hidden;
  color: rgb(100 116 139);
  font-size: 11px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.generation-v2-template-copy {
  display: block;
  align-self: stretch;
  max-height: 136px;
  overflow: auto;
  min-width: 0;
  padding-right: 8px;
  color: rgb(15 23 42);
  font-size: 14px;
  line-height: 1.75;
  white-space: pre-wrap;
  word-break: break-word;
}

.generation-v2-template-copy::-webkit-scrollbar {
  width: 6px;
}

.generation-v2-template-copy::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgb(148 163 184);
}

.generation-v2-template-copy::-webkit-scrollbar-track {
  background: transparent;
}

.generation-v2-template-empty {
  display: grid;
  min-height: 126px;
  align-content: center;
  gap: 6px;
  border: 1px dashed rgb(203 213 225);
  border-radius: 8px;
  background: rgb(248 250 252);
  padding: 18px;
}

.generation-v2-template-load-more {
  width: 100%;
}

.generation-v2-reference-tabs,
.generation-v2-reference-toolbar,
.generation-v2-qianchuan-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.generation-v2-reference-tabs {
  border-bottom: 1px solid rgb(226 232 240);
  padding-bottom: 10px;
}

.generation-v2-reference-tabs button {
  border: 1px solid rgb(203 213 225);
  border-radius: 999px;
  background: white;
  padding: 7px 14px;
  color: rgb(51 65 85);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.generation-v2-reference-tabs button.is-active {
  border-color: rgb(37 99 235);
  background: rgb(239 246 255);
  color: rgb(37 99 235);
}

.generation-v2-reference-tab-panel {
  display: grid;
  gap: 10px;
  min-height: 0;
}

.generation-v2-reference-tab-panel[data-reference-source-panel="owned"].is-active {
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.generation-v2-reference-panel.is-compact,
.generation-v2-reference-panel.is-filter-empty {
  align-content: start;
  grid-template-rows: auto auto auto;
}

.generation-v2-reference-panel.is-compact .generation-v2-reference-tab-panel.is-active,
.generation-v2-reference-panel.is-filter-empty .generation-v2-reference-tab-panel.is-active {
  overflow: visible;
}

.generation-v2-reference-panel.is-compact
  .generation-v2-reference-tab-panel[data-reference-source-panel="qianchuan"].is-active {
  grid-template-rows: auto;
}

.generation-v2-reference-panel.is-compact
  .generation-v2-reference-tab-panel[data-reference-source-panel="owned"].is-active,
.generation-v2-reference-panel.is-filter-empty
  .generation-v2-reference-tab-panel[data-reference-source-panel="owned"].is-active {
  grid-template-rows: auto auto;
}

.generation-v2-reference-tab-panel[data-reference-source-panel="qianchuan"].is-active {
  overflow: auto;
}

.generation-v2-reference-tab-panel[hidden] {
  display: none;
}

.generation-v2-reference-tab-panel.is-loading > :not([data-qianchuan-reference-loading]) {
  display: none;
}

.qianchuan-understand-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  background: #eff6ff;
  padding: 9px 12px;
  color: #1e3a8a;
  font-size: 13px;
  font-weight: 800;
}

.qianchuan-understand-status[hidden] {
  display: none;
}

.qianchuan-understand-status[data-status="success"] {
  border-color: #bbf7d0;
  background: #f0fdf4;
  color: #166534;
}

.qianchuan-understand-status[data-status="failed"] {
  border-color: #fecaca;
  background: #fef2f2;
  color: #991b1b;
}

.qianchuan-understand-status button {
  min-height: 28px;
  border: 1px solid currentColor;
  border-radius: 6px;
  background: white;
  padding: 0 10px;
  color: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.qianchuan-understand-status button[hidden] {
  display: none;
}

.generation-v2-top-status {
  width: 100%;
}

.generation-v2-reference-toolbar {
  justify-content: space-between;
}

.generation-v2-qianchuan-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
  border: 1px solid rgb(226 232 240);
  border-radius: 8px;
  background: rgb(248 250 252);
  padding: 10px;
  color: rgb(71 85 105);
  font-size: 12px;
  font-weight: 800;
}

.generation-v2-qianchuan-filters {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.generation-v2-qianchuan-audit-tools {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-items: center;
  justify-content: stretch;
  width: 100%;
  min-width: 0;
  white-space: nowrap;
}

.generation-v2-qianchuan-audit-tools form {
  margin: 0;
}

.generation-v2-qianchuan-audit-tools .vod-upload-trigger,
.generation-v2-qianchuan-audit-tools .btn-secondary,
.generation-v2-qianchuan-audit-tools .credit-action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 36px;
  border-radius: 8px;
  padding: 0 10px;
  font-size: 13px;
  font-weight: 900;
}

.generation-v2-qianchuan-audit-tools .credit-action-button,
.video-reverse-source-card .credit-action-button {
  width: auto;
  min-width: 138px;
  min-height: 42px;
  padding: 0 16px;
}

.generation-v2-qianchuan-audit-tools .vod-upload-trigger.is-uploading {
  gap: 8px;
  cursor: wait;
  opacity: 0.88;
  pointer-events: none;
}

.generation-v2-qianchuan-audit-tools .vod-upload-trigger.is-uploading::before {
  width: 14px;
  height: 14px;
  border: 2px solid rgb(255 255 255 / 45%);
  border-top-color: white;
  border-radius: 999px;
  content: "";
  animation: qianchuan-upload-spin 0.8s linear infinite;
}

.generation-v2-upload-status[hidden] {
  display: none;
}

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

.qianchuan-understand-dialog {
  width: min(760px, calc(100vw - 28px));
  max-width: none;
  border: 1px solid rgb(59 130 246 / 24%);
  border-radius: 10px;
  padding: 0;
  background:
    radial-gradient(circle at 14% 0%, rgb(93 178 216 / 10%), transparent 36%),
    #0f141a;
  box-shadow: 0 24px 72px rgb(0 0 0 / 46%);
  color: var(--admin-text);
}

.qianchuan-understand-dialog::backdrop {
  background: rgb(3 7 12 / 58%);
  backdrop-filter: blur(2px);
}

.qianchuan-understand-dialog-shell {
  position: relative;
  display: grid;
  gap: 14px;
  padding: 20px 22px 22px;
}

.qianchuan-understand-dialog-title {
  display: grid;
  gap: 4px;
  padding-right: 42px;
}

.qianchuan-understand-dialog-title strong {
  color: var(--admin-text);
  font-size: 16px;
  font-weight: 950;
}

.qianchuan-understand-dialog-title span {
  color: var(--admin-muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
}

.qianchuan-understand-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 9px;
  align-items: stretch;
}

.qianchuan-understand-options button {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-width: 0;
  min-height: 40px;
  border: 1px solid rgb(82 113 145 / 82%);
  border-radius: 8px;
  background: #121923;
  padding: 0 11px;
  color: #cbd7e7;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
  cursor: pointer;
}

.qianchuan-understand-options button[aria-pressed="true"] {
  border-color: #5fb9e6;
  background: rgb(41 134 184 / 18%);
  color: #e7f7ff;
  box-shadow:
    inset 0 0 0 1px rgb(95 185 230 / 76%),
    0 0 0 3px rgb(95 185 230 / 10%);
}

.qianchuan-understand-options button:hover,
.qianchuan-understand-options button:focus-visible {
  border-color: #5fb9e6;
  background: rgb(95 185 230 / 12%);
  color: #f4fbff;
  outline: none;
}

.qianchuan-understand-options button > svg,
.qianchuan-understand-options button > i {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: #64c3f1;
  stroke-width: 2.4;
}

.qianchuan-understand-options button > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qianchuan-understand-options em {
  border-radius: 999px;
  background: rgb(244 63 94 / 16%);
  padding: 2px 6px;
  color: #ff8aa0;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.qianchuan-understand-custom-tabs {
  display: contents;
}

.qianchuan-understand-custom-panel {
  display: grid;
  gap: 8px;
  border: 1px solid rgb(82 113 145 / 82%);
  border-radius: 8px;
  background: #121923;
  padding: 12px;
}

.qianchuan-understand-custom-panel[hidden] {
  display: none;
}

.qianchuan-understand-custom-panel label {
  display: grid;
  gap: 6px;
}

.qianchuan-understand-custom-panel label span {
  color: var(--admin-muted);
  font-size: 12px;
  font-weight: 800;
}

.qianchuan-understand-custom-panel input {
  height: 36px;
  border: 1px solid rgb(82 113 145 / 82%);
  border-radius: 8px;
  background: #0b1117;
  padding: 0 10px;
  color: var(--admin-text);
  font: inherit;
  font-size: 13px;
}

.qianchuan-understand-custom-panel input:focus {
  border-color: #5fb9e6;
  outline: 3px solid rgb(95 185 230 / 12%);
}

.qianchuan-understand-custom-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.qianchuan-understand-custom-actions span {
  color: var(--admin-muted);
  font-size: 12px;
  font-weight: 700;
}

.qianchuan-understand-prompt-field {
  display: grid;
  position: relative;
  gap: 7px;
}

.qianchuan-understand-prompt-field > span {
  color: var(--admin-muted);
  font-size: 13px;
  font-weight: 800;
}

.qianchuan-understand-prompt-field textarea {
  width: 100%;
  min-height: 330px;
  max-height: min(52vh, 460px);
  resize: vertical;
  border: 1px solid rgb(95 185 230 / 60%);
  border-radius: 8px;
  background: #080d12;
  padding: 12px 14px 28px;
  color: #e8eef5;
  font: inherit;
  font-size: 13px;
  line-height: 1.75;
}

.qianchuan-understand-prompt-field textarea:focus {
  border-color: #5fb9e6;
  outline: 3px solid rgb(95 185 230 / 14%);
}

.qianchuan-understand-prompt-field small {
  position: absolute;
  right: 12px;
  bottom: 8px;
  color: #7890a6;
  font-size: 12px;
}

.qianchuan-understand-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.qianchuan-understand-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border: 1px solid rgb(82 113 145 / 64%);
  border-radius: 8px;
  background: #121923;
  cursor: pointer;
}

.qianchuan-understand-close:hover,
.qianchuan-understand-close:focus-visible {
  border-color: #5fb9e6;
  outline: none;
}

.qianchuan-understand-close::before,
.qianchuan-understand-close::after {
  position: absolute;
  top: 13px;
  left: 8px;
  width: 12px;
  height: 2px;
  border-radius: 999px;
  background: #9fb4c8;
  content: "";
}

.qianchuan-understand-close::before {
  transform: rotate(45deg);
}

.qianchuan-understand-close::after {
  transform: rotate(-45deg);
}

.generation-v2-qianchuan-meta a {
  color: rgb(37 99 235);
  text-decoration: none;
}

.generation-v2-qianchuan-auth-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  background: #eff6ff;
  padding: 18px;
}

.generation-v2-qianchuan-auth-card strong {
  color: #0f172a;
  font-size: 15px;
  font-weight: 900;
}

.generation-v2-qianchuan-auth-card p {
  max-width: 680px;
  margin-top: 6px;
  color: #475569;
  font-size: 13px;
  line-height: 1.6;
}

.generation-v2-qianchuan-auth-card small {
  display: block;
  margin-top: 8px;
  color: #b45309;
  font-size: 12px;
  font-weight: 800;
}

.generation-v2-qianchuan-auth-card .btn-primary {
  flex: 0 0 auto;
  text-decoration: none;
}

.generation-v2-qianchuan-auth-card .btn-primary.is-disabled {
  cursor: not-allowed;
  opacity: 0.72;
}

.generation-v2-qianchuan-auth-state {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid #bbf7d0;
  border-radius: 8px;
  background: #f0fdf4;
  padding: 10px 12px;
  color: #166534;
  font-size: 12px;
  font-weight: 900;
}

.generation-v2-qianchuan-auth-state > div {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.generation-v2-qianchuan-auth-state strong {
  color: #14532d;
  font-size: 12px;
}

.generation-v2-qianchuan-auth-actions {
  flex: 0 0 auto;
}

.generation-v2-qianchuan-auth-actions form {
  margin: 0;
}

.generation-v2-qianchuan-auth-actions a,
.generation-v2-qianchuan-auth-actions button,
.generation-v2-qianchuan-account-panel summary {
  display: inline-flex;
  align-items: center;
  border: 1px solid #86efac;
  border-radius: 8px;
  background: #ffffff;
  color: #166534;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.generation-v2-qianchuan-auth-actions button {
  min-height: 30px;
  padding: 0 10px;
}

.generation-v2-qianchuan-auth-actions a {
  min-height: 30px;
  padding: 0 10px;
  text-decoration: none;
}

.generation-v2-qianchuan-account-panel {
  border: 1px solid #dbeafe;
  border-radius: 8px;
  background: #ffffff;
  overflow: hidden;
}

.generation-v2-qianchuan-account-panel summary {
  display: inline-flex;
  align-items: center;
  margin: 10px 12px;
  min-height: 30px;
  padding: 0 10px;
  list-style: none;
}

.generation-v2-qianchuan-account-panel summary::-webkit-details-marker {
  display: none;
}

.generation-v2-qianchuan-account-list {
  display: grid;
  border-top: 1px solid #e2e8f0;
}

.generation-v2-qianchuan-account-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(90px, 140px) minmax(70px, 120px) 56px;
  gap: 12px;
  align-items: center;
  padding: 12px;
  color: #334155;
  font-size: 12px;
}

.generation-v2-qianchuan-account-row + .generation-v2-qianchuan-account-row {
  border-top: 1px solid #e2e8f0;
}

.generation-v2-qianchuan-account-row div {
  min-width: 0;
}

.generation-v2-qianchuan-account-row strong,
.generation-v2-qianchuan-account-row span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.generation-v2-qianchuan-account-row strong {
  color: #0f172a;
  font-size: 13px;
}

.generation-v2-qianchuan-account-row em {
  justify-self: end;
  border-radius: 999px;
  background: #ecfdf5;
  color: #047857;
  padding: 3px 7px;
  font-style: normal;
  font-weight: 900;
}

.generation-v2-qianchuan-space,
.generation-v2-qianchuan-search,
.generation-v2-qianchuan-status {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  min-width: 0;
}

.generation-v2-qianchuan-space span,
.generation-v2-qianchuan-search span,
.generation-v2-qianchuan-status span {
  color: rgb(71 85 105);
  white-space: nowrap;
}

.generation-v2-qianchuan-space select,
.generation-v2-qianchuan-status select,
.generation-v2-qianchuan-search input {
  height: 36px;
  min-width: 0;
  border: 1px solid rgb(203 213 225);
  border-radius: 8px;
  background: white;
  padding: 0 32px 0 10px;
  color: rgb(15 23 42);
  font-size: 13px;
  font-weight: 800;
}

.generation-v2-qianchuan-search input {
  width: 100%;
  padding-right: 10px;
}

.generation-v2-qianchuan-space select {
  width: 100%;
}

.generation-v2-qianchuan-status select {
  width: 100%;
}

.generation-v2-qianchuan-filters button,
.generation-v2-qianchuan-reset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  border: 1px solid rgb(37 99 235);
  border-radius: 8px;
  background: rgb(37 99 235);
  padding: 0 14px;
  color: white;
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
}

.generation-v2-qianchuan-reset {
  border-color: rgb(203 213 225);
  background: white;
  color: rgb(71 85 105);
}

.generation-v2-qianchuan-space select:focus-visible,
.generation-v2-qianchuan-status select:focus-visible,
.generation-v2-qianchuan-search input:focus-visible,
.generation-v2-qianchuan-filters button:focus-visible,
.generation-v2-qianchuan-reset:focus-visible {
  box-shadow: 0 0 0 3px rgb(37 99 235 / 16%);
  outline: none;
}

@media (min-width: 1800px) {
  .generation-v2-qianchuan-meta {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .generation-v2-qianchuan-filters {
    grid-template-columns: minmax(142px, 0.7fr) minmax(178px, 1fr) minmax(124px, 0.55fr) auto;
  }

  .generation-v2-qianchuan-audit-tools {
    grid-template-columns: repeat(3, max-content);
    width: auto;
    justify-content: flex-end;
  }

  .generation-v2-qianchuan-audit-tools .vod-upload-trigger,
  .generation-v2-qianchuan-audit-tools .btn-secondary {
    width: auto;
    padding-right: 14px;
    padding-left: 14px;
  }
}

.generation-v2-qianchuan-filters button,
.generation-v2-qianchuan-reset {
  width: 100%;
}

@media (max-width: 980px) {
  .generation-v2-qianchuan-filters,
  .generation-v2-qianchuan-audit-tools {
    grid-template-columns: 1fr;
  }
}

.generation-v2-qianchuan-compact .generation-v2-qianchuan-meta {
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 8px;
  padding: 8px;
}

.generation-v2-qianchuan-compact .generation-v2-qianchuan-filters {
  grid-template-columns:
    minmax(108px, 0.78fr)
    minmax(170px, 1.4fr)
    minmax(92px, 0.66fr)
    minmax(68px, auto)
    auto;
  gap: 6px;
}

.generation-v2-qianchuan-compact .generation-v2-qianchuan-space,
.generation-v2-qianchuan-compact .generation-v2-qianchuan-search,
.generation-v2-qianchuan-compact .generation-v2-qianchuan-status {
  display: block;
}

.generation-v2-qianchuan-compact .generation-v2-qianchuan-space span,
.generation-v2-qianchuan-compact .generation-v2-qianchuan-search span,
.generation-v2-qianchuan-compact .generation-v2-qianchuan-status span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.generation-v2-qianchuan-compact .generation-v2-qianchuan-space select,
.generation-v2-qianchuan-compact .generation-v2-qianchuan-status select,
.generation-v2-qianchuan-compact .generation-v2-qianchuan-search input,
.generation-v2-qianchuan-compact .generation-v2-qianchuan-filters button,
.generation-v2-qianchuan-compact .generation-v2-qianchuan-reset {
  height: 32px;
  border-radius: 7px;
  font-size: 12px;
}

.generation-v2-qianchuan-compact .generation-v2-qianchuan-filters button,
.generation-v2-qianchuan-compact .generation-v2-qianchuan-reset {
  width: auto;
  padding: 0 12px;
}

.generation-v2-qianchuan-compact .generation-v2-qianchuan-audit-tools {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  gap: 8px;
  justify-content: stretch;
}

.generation-v2-qianchuan-compact .generation-v2-qianchuan-audit-tools .vod-upload-trigger,
.generation-v2-qianchuan-compact .generation-v2-qianchuan-audit-tools .btn-secondary {
  width: 100%;
  min-width: 0;
  min-height: 32px;
  padding: 0 12px;
  font-size: 12px;
}

.generation-v2-qianchuan-compact .generation-v2-qianchuan-table-wrap {
  min-height: 170px;
  max-height: clamp(220px, calc(100vh - 540px), 420px);
}

.generation-v2-reference-tab-panel.generation-v2-qianchuan-compact.is-active,
.generation-v2-reference-tab-panel.generation-v2-qianchuan-compact.is-loading {
  align-content: start;
  overflow: visible;
}

.generation-v2-reference-tab-panel.generation-v2-qianchuan-compact.is-loading {
  gap: 0;
}

.generation-v2-qianchuan-compact .generation-v2-qianchuan-loading {
  min-height: 112px;
  border-color: rgb(99 183 220 / 42%);
  background:
    linear-gradient(90deg, rgb(14 19 25), rgb(17 28 36), rgb(14 19 25));
  padding: 16px;
  color: #dceaf4;
}

.generation-v2-qianchuan-compact .generation-v2-qianchuan-loading strong {
  color: #f5f8fb;
  font-size: 13px;
}

.generation-v2-qianchuan-compact .generation-v2-qianchuan-loading small {
  color: var(--admin-muted);
}

.generation-v2-qianchuan-compact .generation-v2-qianchuan-spinner {
  border-color: rgb(99 183 220 / 24%);
  border-top-color: var(--admin-accent);
}

.generation-v2-qianchuan-compact .generation-v2-qianchuan-table {
  min-width: 720px;
  font-size: 12px;
}

.generation-v2-qianchuan-compact .generation-v2-qianchuan-table th,
.generation-v2-qianchuan-compact .generation-v2-qianchuan-table td {
  padding: 7px 8px;
}

.generation-v2-qianchuan-compact .generation-v2-qianchuan-media {
  grid-template-columns: 58px minmax(0, 1fr);
  min-width: 220px;
}

.generation-v2-qianchuan-compact .generation-v2-qianchuan-media .vod-thumb {
  width: 52px;
  height: 52px;
}

.generation-v2-qianchuan-compact .generation-v2-qianchuan-media strong,
.generation-v2-qianchuan-compact .generation-v2-qianchuan-media p {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.generation-v2-qianchuan-compact .generation-v2-qianchuan-actions {
  gap: 6px;
}

.generation-v2-qianchuan-compact .generation-v2-qianchuan-footer {
  gap: 8px;
  padding: 8px;
}

.generation-v2-qianchuan-compact .generation-v2-qianchuan-pager,
.generation-v2-qianchuan-compact .generation-v2-qianchuan-page-nav,
.generation-v2-qianchuan-compact .generation-v2-qianchuan-jump {
  gap: 6px;
}

.generation-v2-qianchuan-compact .generation-v2-qianchuan-page-nav .vod-page-button {
  min-width: 28px;
  min-height: 28px;
}

.generation-v2-qianchuan-compact .generation-v2-qianchuan-page-nav strong {
  min-width: 48px;
}

.generation-v2-qianchuan-compact .generation-v2-qianchuan-pager select,
.generation-v2-qianchuan-compact .generation-v2-qianchuan-jump input,
.generation-v2-qianchuan-compact .generation-v2-qianchuan-pager button {
  height: 32px;
  border-radius: 7px;
}

@media (max-width: 640px) {
  .generation-v2-qianchuan-compact .generation-v2-qianchuan-filters {
    grid-template-columns: 1fr;
  }

  .generation-v2-qianchuan-compact .generation-v2-qianchuan-audit-tools {
    grid-template-columns: 1fr;
  }
}

.generation-v2-qianchuan-table-wrap {
  max-height: 460px;
  overflow: auto;
  border: 1px solid rgb(226 232 240);
  border-radius: 8px;
  background: white;
}

.generation-v2-qianchuan-table {
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;
  font-size: 13px;
}

.generation-v2-qianchuan-table th,
.generation-v2-qianchuan-table td {
  border-bottom: 1px solid rgb(229 231 235);
  padding: 10px 12px;
  text-align: left;
  vertical-align: middle;
}

.generation-v2-qianchuan-table th {
  background: rgb(248 250 252);
  color: rgb(71 85 105);
  font-weight: 800;
  white-space: nowrap;
}

.generation-v2-qianchuan-table tbody tr:hover {
  background: rgb(248 251 255);
}

.generation-v2-qianchuan-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  border: 1px solid rgb(226 232 240);
  border-radius: 8px;
  background: rgb(248 250 252);
  padding: 10px 12px;
  color: rgb(71 85 105);
  font-size: 13px;
  font-weight: 800;
}

.generation-v2-qianchuan-pager {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

.generation-v2-qianchuan-pager select,
.generation-v2-qianchuan-pager input,
.generation-v2-qianchuan-pager button {
  height: 34px;
  border: 1px solid rgb(203 213 225);
  border-radius: 7px;
  background: white;
  padding: 0 10px;
  color: rgb(15 23 42);
  font-size: 13px;
  font-weight: 750;
}

.generation-v2-qianchuan-pager input {
  width: 72px;
}

.generation-v2-qianchuan-pager button {
  cursor: pointer;
}

.generation-v2-qianchuan-media {
  grid-template-columns: 98px minmax(0, 1fr);
  min-width: 320px;
}

.generation-v2-qianchuan-actions {
  gap: 10px;
}

.generation-v2-qianchuan-actions button {
  border: 0;
  background: transparent;
  padding: 0;
  color: rgb(37 99 235);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.generation-v2-qianchuan-actions button.is-danger {
  color: #dc2626;
}

.generation-v2-qianchuan-actions button:disabled {
  cursor: wait;
  opacity: 0.65;
}

.generation-v2-qianchuan-empty {
  border: 1px dashed rgb(203 213 225);
  border-radius: 8px;
  background: rgb(248 250 252);
  padding: 12px;
  color: rgb(100 116 139);
  font-size: 13px;
  font-weight: 700;
}

.generation-v2-qianchuan-loading {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
  min-height: 168px;
  border: 1px dashed rgb(147 197 253);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgb(248 250 252), rgb(239 246 255), rgb(248 250 252));
  padding: 22px;
  color: rgb(51 65 85);
}

.generation-v2-qianchuan-loading[hidden] {
  display: none;
}

.generation-v2-qianchuan-loading strong {
  display: block;
  color: rgb(15 23 42);
  font-size: 14px;
  font-weight: 900;
}

.generation-v2-qianchuan-loading small {
  display: block;
  margin-top: 4px;
  color: rgb(100 116 139);
  font-size: 12px;
  font-weight: 700;
}

.generation-v2-qianchuan-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid rgb(191 219 254);
  border-top-color: rgb(37 99 235);
  border-radius: 50%;
  animation: generation-v2-spin 0.8s linear infinite;
}

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

.generation-v2-qianchuan-muted {
  color: rgb(148 163 184);
  font-size: 12px;
  font-weight: 700;
}

.generation-v2-template-empty span {
  color: rgb(15 23 42);
  font-size: 13px;
  font-weight: 800;
}

.generation-v2-template-empty small {
  color: rgb(100 116 139);
  font-size: 12px;
  line-height: 1.4;
}

.generation-v2-reference-guide {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.generation-v2-reference-guide strong,
.generation-v2-reference-guide span {
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 800;
}

.generation-v2-reference-guide strong {
  background: rgb(15 23 42);
  color: white;
}

.generation-v2-reference-guide span {
  border: 1px solid rgb(203 213 225);
  background: white;
  color: rgb(51 65 85);
}

.generation-v2-asset-list {
  display: grid;
  gap: 8px;
}

.generation-v2-asset-row {
  display: grid;
  grid-template-columns: 28px 76px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 38px;
  border-radius: 7px;
  background: rgb(248 250 252);
  padding: 7px 10px;
}

.generation-v2-asset-row > span {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: rgb(226 232 240);
}

.generation-v2-asset-row strong {
  color: rgb(15 23 42);
  font-size: 13px;
  font-weight: 800;
}

.generation-v2-asset-row small {
  min-width: 0;
  overflow: hidden;
  color: rgb(100 116 139);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.generation-v2-model-list {
  display: grid;
  gap: 8px;
}

.generation-v2-model-field {
  border-top: 1px solid rgb(226 232 240);
  padding-top: 12px;
}

.generation-v2-model-option {
  cursor: pointer;
}

.generation-v2-model-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.generation-v2-model-option span {
  display: grid;
  gap: 2px;
  border: 1px solid rgb(203 213 225);
  border-radius: 7px;
  background: white;
  padding: 9px 12px;
}

.generation-v2-model-option strong {
  color: rgb(51 65 85);
  font-size: 13px;
  font-weight: 800;
}

.generation-v2-model-option small {
  color: rgb(100 116 139);
  font-size: 11px;
}

.generation-v2-model-option input:checked + span {
  border-color: rgb(15 23 42);
  background: rgb(15 23 42);
}

.generation-v2-model-option input:checked + span strong {
  color: white;
}

.generation-v2-model-option input:checked + span small {
  color: rgb(203 213 225);
}

.generation-v2-polish-panel {
  height: 100%;
  min-height: 320px;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: 10px;
}

.generation-v2-doubao-tools {
  display: grid;
  align-items: center;
  min-width: 0;
}

.generation-v2-doubao-button {
  width: 100%;
  min-height: 34px;
}

.generation-v2-polish-preview {
  display: grid;
  min-height: 0;
  border: 1px solid rgb(203 213 225);
  border-radius: 8px;
  background: rgb(248 250 252);
  padding: 12px;
}

.generation-v2-polish-field,
.generation-v2-polish-field .input {
  min-height: 0;
}

.generation-v2-polish-field {
  grid-template-rows: auto minmax(0, 1fr);
}

.generation-v2-polish-textarea {
  height: 100%;
  min-height: 0;
  resize: none;
  background: transparent;
  color: rgb(71 85 105);
  font-size: 13px;
  line-height: 1.6;
}

.generation-v2-secondary-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: -2px;
}

.generation-v2-advanced-params {
  display: grid;
  gap: 12px;
}

.generation-v2-advanced-params[hidden] {
  display: none;
}

.generation-v2-ratio-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.generation-v2-param-grid {
  display: grid;
  gap: 10px;
}

.generation-v2-asset-controls {
  display: grid;
  gap: 8px;
}

.generation-v2-asset-controls .asset-choice {
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 10px;
  padding: 9px;
}

.generation-v2-asset-controls .asset-choice h3 {
  font-size: 13px;
}

.generation-v2-asset-controls .segmented-control {
  width: 100%;
}

.generation-v2-output-panel {
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  align-content: stretch;
  gap: 8px;
  height: 100%;
  max-height: none;
  overflow: hidden;
  padding: 10px 14px;
}

.generation-v2-output-panel .generation-v2-panel-title {
  gap: 8px;
}

.generation-v2-output-panel .generation-v2-panel-title h2 {
  font-size: 17px;
}

.generation-v2-output-panel .generation-v2-panel-title p {
  margin-top: 2px;
  line-height: 1.25;
}

.generation-v2-output-panel .generation-field {
  gap: 6px;
}

.generation-v2-output-panel fieldset.generation-field {
  min-inline-size: 0;
  margin: 0;
  border: 0;
  padding: 0;
}

.generation-v2-output-panel .generation-field > span,
.generation-v2-output-panel .generation-field legend {
  font-size: 12px;
  line-height: 1.15;
}

.generation-v2-output-panel .generation-v2-model-field {
  border-top: 1px solid var(--admin-border);
  padding-top: 7px;
}

.generation-v2-audio-setting {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--admin-border);
  border-radius: 7px;
  background: #111720;
  padding: 8px 10px;
}

.generation-v2-audio-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.generation-v2-audio-copy strong {
  color: var(--admin-text);
  font-size: 13px;
  line-height: 1.2;
}

.generation-v2-audio-copy small {
  color: var(--admin-muted);
  font-size: 11px;
  line-height: 1.3;
}

.generation-v2-output-panel .input {
  min-height: 31px;
  padding: 5px 10px;
}

.generation-v2-output-panel .generation-v2-ratio-grid {
  gap: 6px;
}

.generation-v2-output-panel .ratio-option,
.generation-v2-output-panel .ratio-option:has(input:checked) {
  border: 0;
  background: transparent;
  color: inherit;
}

.generation-v2-output-panel .ratio-option span {
  border-color: var(--admin-border-strong);
  background: #111720;
  color: var(--admin-muted);
  min-height: 32px;
}

.generation-v2-output-panel .ratio-option:hover:not(:has(input:checked)) span {
  border-color: rgb(99 183 220 / 62%);
  background: #14202a;
  color: var(--admin-text);
}

.generation-v2-output-panel .ratio-option input:checked + span {
  border-color: var(--admin-accent);
  background: #dfeaf2;
  color: #0f1720;
}

.generation-v2-output-panel .btn-secondary,
.generation-v2-output-panel .generation-submit {
  min-height: 31px;
  padding-top: 5px;
  padding-bottom: 5px;
}

.generation-v2-output-panel .generation-v2-advanced-params,
.generation-v2-output-panel .generation-v2-param-grid {
  gap: 9px;
}

.generation-v2-output-panel .generation-v2-advanced-params {
  min-height: 0;
  overflow: auto;
}

.generation-v2-output-panel .generation-v2-asset-controls {
  gap: 6px;
}

.generation-v2-output-panel .generation-v2-asset-controls .asset-choice {
  gap: 8px;
  padding: 7px 9px;
}

.generation-v2-output-panel .generation-v2-asset-controls .segment-button {
  padding: 5px 7px;
}

.generation-v2-output-panel .generation-credit-note {
  gap: 2px;
  padding: 8px 10px;
  font-size: 12px;
}

.generation-v2-output-panel .generation-credit-note strong {
  font-size: 13px;
}

.generation-v2-output-panel .generation-submit {
  align-self: end;
}

.generation-v2-output-panel .generation-submit-feedback:empty {
  display: none;
}

.generation-v2-preview-panel {
  min-height: 382px;
}

.generation-v2-history-panel {
  align-content: start;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
}

.generation-v2-video-stage {
  display: grid;
  min-height: 268px;
  place-items: center;
  border-radius: 10px;
  background: rgb(15 23 42);
  padding: 16px;
  text-align: center;
}

.generation-v2-video-stage.has-video {
  align-content: stretch;
  padding: 10px;
}

.generation-v2-preview-placeholder {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
}

.generation-v2-phone-preview {
  width: 122px;
  height: 216px;
  border: 1px solid rgb(51 65 85);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgb(30 41 59), rgb(15 23 42)),
    rgb(30 41 59);
}

.generation-v2-preview-video {
  width: 100%;
  max-height: 320px;
  border-radius: 10px;
  background: rgb(15 23 42);
  object-fit: contain;
}

.generation-v2-video-stage strong {
  color: rgb(203 213 225);
  font-size: 12px;
  font-weight: 800;
}

.generation-v2-video-stage small {
  color: rgb(148 163 184);
  font-size: 11px;
}

.generation-v2-preview-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.generation-v2-preview-meta span {
  display: grid;
  min-height: 34px;
  place-items: center;
  border-radius: 7px;
  background: rgb(248 250 252);
  color: rgb(51 65 85);
  font-size: 12px;
  font-weight: 800;
}

.generation-v2-preview-actions {
  display: flex;
  justify-content: stretch;
}

.generation-v2-preview-actions .btn-secondary {
  width: 100%;
}

.generation-v2-history-list {
  display: grid;
  align-content: start;
  gap: 8px;
  max-height: calc((74px * 4) + (8px * 3));
  overflow-y: auto;
  padding-right: 2px;
}

.generation-v2-history-list::-webkit-scrollbar {
  width: 6px;
}

.generation-v2-history-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgb(148 163 184);
}

.generation-v2-history-list::-webkit-scrollbar-track {
  background: transparent;
}

.generation-v2-history-item {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 74px;
  border: 1px solid rgb(226 232 240);
  border-radius: 8px;
  background: rgb(248 250 252);
  padding: 10px;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.generation-v2-history-item:hover,
.generation-v2-history-item.is-active {
  border-color: rgb(37 99 235);
  background: white;
}

.generation-v2-history-item:focus-visible {
  outline: 2px solid rgb(37 99 235);
  outline-offset: 2px;
}

.generation-v2-history-thumb {
  display: block;
  overflow: hidden;
  width: 42px;
  height: 54px;
  border-radius: 6px;
  background: rgb(203 213 225);
}

.generation-v2-history-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.generation-v2-history-item span:last-child {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.generation-v2-history-item strong {
  min-width: 0;
  overflow: hidden;
  color: rgb(15 23 42);
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.generation-v2-history-item small {
  min-width: 0;
  overflow: hidden;
  color: rgb(100 116 139);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.generation-v2-history-item em {
  color: rgb(71 85 105);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.generation-v2-history-empty {
  display: grid;
  gap: 4px;
  border: 1px dashed rgb(203 213 225);
  border-radius: 8px;
  background: rgb(248 250 252);
  padding: 18px;
}

.generation-v2-history-empty strong {
  color: rgb(15 23 42);
  font-size: 13px;
  font-weight: 800;
}

.generation-v2-history-empty span {
  color: rgb(100 116 139);
  font-size: 12px;
  line-height: 1.45;
}

.image-preview-dialog {
  width: min(920px, calc(100vw - 32px));
  max-height: min(860px, calc(100vh - 36px));
  overflow: hidden;
  border: 0;
  border-radius: 8px;
  padding: 0;
  box-shadow: 0 24px 70px rgb(15 23 42 / 28%);
}

.image-preview-dialog::backdrop {
  background: rgb(15 23 42 / 58%);
}

.image-preview-shell {
  display: grid;
  max-height: min(860px, calc(100vh - 36px));
  grid-template-rows: auto minmax(0, 1fr);
  background: white;
}

.image-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid rgb(226 232 240);
  padding: 14px 16px;
}

.image-preview-header h2 {
  color: rgb(15 23 42);
  font-size: 18px;
  font-weight: 800;
}

.image-preview-stage {
  display: grid;
  min-height: 360px;
  max-height: calc(100vh - 142px);
  place-items: center;
  overflow: auto;
  background: rgb(15 23 42);
  padding: 18px;
}

.image-preview-stage img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 180px);
  border-radius: 8px;
  object-fit: contain;
  box-shadow: 0 18px 44px rgb(0 0 0 / 32%);
}

.reference-template-dialog {
  width: min(1380px, calc(100vw - 56px));
  max-height: min(880px, calc(100vh - 56px));
  overflow: hidden;
  border: 0;
  border-radius: 8px;
  padding: 0;
  box-shadow: 0 24px 70px rgb(15 23 42 / 32%);
}

.reference-template-dialog::backdrop {
  background: rgb(15 23 42 / 72%);
}

.reference-template-dialog-shell {
  display: grid;
  max-height: min(880px, calc(100vh - 56px));
  grid-template-rows: auto minmax(0, 1fr);
  background: white;
}

.reference-template-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid rgb(226 232 240);
  padding: 14px 16px;
}

.reference-template-dialog-header h2 {
  color: rgb(15 23 42);
  font-size: 18px;
  font-weight: 800;
}

.reference-template-dialog-body {
  display: grid;
  grid-template-columns: minmax(360px, 1.08fr) minmax(360px, 1fr);
  gap: 18px;
  min-height: 0;
  overflow: hidden;
  background: rgb(241 245 249);
  padding: 18px;
}

.reference-template-dialog-video,
.reference-template-dialog-prompt {
  min-height: min(680px, calc(100vh - 178px));
  overflow: hidden;
  border-radius: 8px;
  background: white;
}

.reference-template-dialog-video {
  display: grid;
  place-items: center;
  background: rgb(15 23 42);
}

.reference-template-dialog-video video {
  display: block;
  width: 100%;
  height: min(680px, calc(100vh - 178px));
  object-fit: contain;
  background: rgb(15 23 42);
}

.reference-template-dialog-video span {
  color: rgb(203 213 225);
  font-size: 16px;
  font-weight: 800;
}

.reference-template-dialog-prompt {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
  padding: 18px;
}

.reference-template-dialog-prompt h3 {
  color: rgb(15 23 42);
  font-size: 18px;
  font-weight: 800;
}

.reference-template-dialog-prompt p {
  overflow: auto;
  color: rgb(15 23 42);
  font-size: 15px;
  line-height: 1.8;
  white-space: pre-wrap;
  word-break: break-word;
}

.manual-reference-template-dialog {
  width: min(760px, calc(100vw - 40px));
  border: 0;
  border-radius: 8px;
  padding: 0;
  box-shadow: 0 24px 70px rgb(15 23 42 / 28%);
}

.manual-reference-template-dialog::backdrop {
  background: rgb(15 23 42 / 56%);
}

.manual-reference-template-shell {
  display: grid;
  gap: 14px;
  background: white;
  padding: 18px;
}

.manual-reference-template-header,
.manual-reference-template-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.manual-reference-template-header {
  position: relative;
  min-height: 34px;
  padding-right: 72px;
}

.manual-reference-template-header > button {
  position: absolute;
  top: 0;
  right: 0;
}

.manual-reference-template-header h2 {
  color: rgb(15 23 42);
  font-size: 18px;
  font-weight: 800;
}

.manual-reference-template-field textarea {
  min-height: 260px;
  resize: vertical;
  line-height: 1.6;
}

.manual-reference-template-label-field {
  max-width: 260px;
}

.manual-reference-template-actions {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  justify-content: flex-end;
}

.doubao-instruction-dialog {
  width: min(640px, calc(100vw - 40px));
}

.doubao-instruction-dialog textarea {
  min-height: 220px;
}

.material-picker-dialog {
  width: min(1040px, calc(100vw - 32px));
  max-height: min(760px, calc(100vh - 40px));
  overflow: hidden;
  border: 0;
  border-radius: 8px;
  padding: 0;
  box-shadow: 0 24px 70px rgb(15 23 42 / 26%);
}

.material-picker-dialog::backdrop {
  background: rgb(15 23 42 / 48%);
}

.picker-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  max-height: min(760px, calc(100vh - 40px));
  background: white;
}

.picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid rgb(226 232 240);
  padding: 18px 20px;
}

.picker-header h2 {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0;
}

.picker-body {
  min-height: 0;
  overflow: auto;
  padding: 18px;
}

.picker-section {
  display: none;
}

.picker-section.is-active {
  display: grid;
  gap: 14px;
}

.picker-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.picker-section-title h3 {
  font-size: 16px;
  font-weight: 800;
}

.picker-section-title span {
  border-radius: 999px;
  background: rgb(241 245 249);
  padding: 5px 9px;
  color: rgb(71 85 105);
  font-size: 12px;
  font-weight: 800;
}

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

.picker-card {
  display: grid;
  min-width: 0;
  gap: 8px;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid rgb(226 232 240);
  background: rgb(248 250 252);
  padding: 0 0 11px;
  text-align: left;
}

.picker-card:hover {
  border-color: rgb(37 99 235);
  background: white;
  box-shadow: 0 10px 28px rgb(15 23 42 / 10%);
}

.picker-thumb {
  display: grid;
  aspect-ratio: 4 / 3;
  width: 100%;
  place-items: center;
  overflow: hidden;
  border-bottom: 1px solid rgb(226 232 240);
  background:
    linear-gradient(45deg, rgb(241 245 249) 25%, transparent 25%),
    linear-gradient(-45deg, rgb(241 245 249) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgb(241 245 249) 75%),
    linear-gradient(-45deg, transparent 75%, rgb(241 245 249) 75%);
  background-color: rgb(248 250 252);
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-size: 16px 16px;
}

.picker-thumb img,
.picker-thumb video,
.picker-thumb .audio-tile {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.picker-card strong,
.picker-card small {
  min-width: 0;
  padding: 0 11px;
}

.picker-card strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgb(15 23 42);
  font-size: 13px;
  font-weight: 800;
}

.picker-card small {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: rgb(100 116 139);
  font-size: 12px;
  line-height: 1.4;
}

.picker-status {
  justify-self: start;
  margin: 0 11px;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.picker-group-grid {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.picker-group-card {
  padding: 14px 0;
}

.picker-group-card strong {
  white-space: normal;
}

@media (max-width: 1024px) {
  .materials-header,
  .material-section,
  .tasks-header,
  .generation-header,
  .generation-form {
    grid-template-columns: 1fr;
  }

  .materials-header,
  .tasks-header,
  .generation-header {
    display: grid;
  }

  .materials-health {
    justify-content: flex-start;
  }

  .materials-layout {
    grid-template-columns: 1fr;
  }

  .material-sidebar {
    position: static;
    grid-template-columns: repeat(5, minmax(140px, 1fr));
    overflow-x: auto;
  }

  .material-create-panel .material-form {
    right: 0;
  }

  .material-import-grid {
    grid-template-columns: 1fr;
  }

  .generation-side {
    position: static;
  }

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

  .generation-main {
    grid-template-columns: 1fr;
  }

  .generation-v2-form {
    grid-template-columns: 1fr;
  }

  .generation-v2-controls,
  .generation-v2-results {
    height: auto;
    position: static;
  }

  .generation-v2-polish-panel {
    height: auto;
  }

  .generation-v2-upload-grid {
    grid-template-columns: 1fr;
  }

  .generation-v2-template-item {
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 10px;
    min-height: 142px;
  }

  .generation-v2-template-media video,
  .generation-v2-template-media > span {
    width: 74px;
    height: 112px;
  }

  .generation-v2-template-media small {
    width: 74px;
  }

  .generation-v2-template-copy {
    max-height: 126px;
  }

  .reference-template-dialog-body {
    grid-template-columns: 1fr;
    overflow: auto;
  }

  .reference-template-dialog-video,
  .reference-template-dialog-prompt {
    min-height: 360px;
  }

  .reference-template-dialog-video video {
    height: 360px;
  }

  .prompt-panel {
    grid-row: auto;
  }

  .task-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .task-batch-summary {
    grid-template-columns: 1fr;
  }

  .task-search-form {
    grid-template-columns: 1fr;
  }

  .task-batch-detail {
    grid-template-columns: 1fr;
  }

  .task-detail-prompt,
  .task-detail-products {
    grid-column: auto;
    grid-row: auto;
  }

  .task-batch-stats {
    justify-content: flex-start;
  }

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

  .task-preview-panel {
    max-width: 360px;
  }

  .user-create-form,
  .billing-charge-row,
  .hot-template-form,
  .hot-template-row,
  .recharge-settings-form,
  .recharge-package-row,
  .user-table-row {
    grid-template-columns: 1fr;
  }

  .hot-template-create-layout,
  .hot-template-basic-grid,
  .hot-template-source-grid {
    grid-template-columns: 1fr;
  }

  .recharge-plan-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .user-actions,
  .user-reset-form {
    align-items: stretch;
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .hot-gallery-page {
    min-height: calc(100vh - 96px);
  }

  .hot-gallery-toolbar {
    flex-wrap: wrap;
    margin-bottom: 24px;
  }

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

  .recharge-dialog {
    width: min(100vw - 18px, 520px);
  }

  .recharge-dialog-shell {
    padding: 18px;
  }

  .recharge-plan-grid {
    grid-template-columns: 1fr;
  }

  .recharge-custom-card {
    grid-column: auto;
  }

  .recharge-custom-control,
  .recharge-custom-footer {
    grid-template-columns: 1fr;
  }

  .recharge-custom-control {
    display: grid;
  }

  .recharge-custom-footer {
    display: grid;
    justify-items: stretch;
  }

  .recharge-custom-footer .recharge-plan-button {
    min-width: 0;
  }

  .wechat-pay-panel {
    padding: 18px;
  }

  .wechat-pay-header {
    align-items: stretch;
    flex-direction: column;
  }

  .wechat-pay-summary,
  .wechat-pay-qr-wrap {
    grid-template-columns: 1fr;
  }

  .wechat-pay-qr-card {
    justify-self: center;
    width: min(252px, 100%);
  }

  .material-tabs {
    grid-template-columns: repeat(5, minmax(130px, 1fr));
  }

  .material-panel-head,
  .material-group-head {
    display: grid;
  }

  .material-create-panel,
  .material-create-panel .material-form {
    position: static;
    width: 100%;
    box-shadow: none;
  }

  .material-toolbar {
    grid-template-columns: 1fr;
  }

  .bulk-upload-row {
    grid-template-columns: 64px minmax(0, 1fr);
  }

  .bulk-upload-row .btn-danger {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .bulk-upload-thumb {
    width: 64px;
    height: 52px;
  }

  .scene-library {
    grid-template-columns: 1fr;
  }

  .portrait-material-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }

  .portrait-material-card {
    max-width: none;
  }

  .library-row {
    display: grid;
  }

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

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

  .product-compact-grid {
    grid-template-columns: 1fr;
  }

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

  .material-picker-dialog {
    width: calc(100vw - 18px);
  }

  .task-summary-grid,
  .task-meta-grid {
    grid-template-columns: 1fr;
  }

  .task-board-heading,
  .task-title-row,
  .task-pagination {
    align-items: stretch;
    flex-direction: column;
  }

  .task-pagination > div:first-child {
    white-space: normal;
  }

  .task-pagination-actions {
    justify-content: flex-start;
  }

  .task-search-form div {
    align-items: stretch;
    flex-direction: column;
  }

  .task-search-form input {
    min-width: 0;
  }

  .task-status-stack {
    justify-content: flex-start;
  }
}

/* Final delete affordance polish. Keep the same forms and submit behavior. */
.corner-delete-form {
  top: 10px;
  right: 10px;
}

.btn-danger.btn-icon-danger {
  display: grid;
  width: 28px;
  height: 28px;
  min-height: 28px;
  place-items: center;
  border: 1px solid var(--admin-border);
  border-radius: 7px;
  background: rgb(255 255 255 / 92%);
  padding: 0;
  color: var(--admin-faint);
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  box-shadow: 0 1px 2px rgb(0 0 0 / 6%);
  backdrop-filter: blur(8px);
}

.btn-danger.btn-icon-danger:hover {
  border-color: #efc2bf;
  background: #fff5f4;
  color: var(--admin-danger);
  box-shadow: 0 3px 10px rgb(194 65 58 / 12%);
}

/* Keep prompt/material row actions horizontal when content is long. */
.library-row {
  align-items: center;
}

.library-row > div:first-child {
  flex: 1 1 auto;
  min-width: 0;
}

.library-row .row-actions {
  flex: 0 0 auto;
  flex-wrap: nowrap;
  min-width: max-content;
  white-space: nowrap;
}

.library-row .status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: max-content;
  white-space: nowrap;
  writing-mode: horizontal-tb;
}

.library-row p {
  max-width: 100%;
}

.prompt-row-trigger {
  display: grid;
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 0;
  text-align: left;
}

.prompt-row-trigger:hover h3 {
  color: var(--admin-accent-strong);
}

.prompt-editor-dialog {
  width: min(760px, calc(100vw - 32px));
}

.prompt-editor-body {
  display: grid;
  gap: 14px;
}

.prompt-editor-textarea {
  min-height: 260px;
  resize: vertical;
}

.prompt-enabled-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--admin-text);
  font-size: 13px;
  font-weight: 700;
}

.prompt-enabled-toggle input {
  width: 16px;
  height: 16px;
  accent-color: var(--admin-accent);
}

.prompt-editor-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  border-top: 1px solid var(--admin-border);
  padding: 14px 18px;
}

.material-create-panel {
  position: relative;
}

.material-create-panel .material-form {
  position: relative;
}

.create-panel-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 4;
  display: grid;
  width: 30px;
  height: 30px;
  min-height: 30px;
  place-items: center;
  border-color: var(--admin-border);
  border-radius: 7px;
  padding: 0;
  color: var(--admin-faint);
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
}

.create-panel-close:hover {
  border-color: var(--admin-border-strong);
  background: var(--admin-surface-soft);
  color: var(--admin-text);
}

.confirm-submit-dialog {
  width: min(430px, calc(100vw - 32px));
  border: 1px solid var(--admin-border);
  border-radius: 12px;
  padding: 0;
  box-shadow: var(--admin-shadow-popover);
}

.confirm-submit-dialog::backdrop {
  background: rgb(0 0 0 / 32%);
}

.confirm-submit-shell {
  display: grid;
  gap: 14px;
  background: var(--admin-surface);
  padding: 20px;
}

.confirm-submit-shell h2 {
  margin-top: 3px;
  color: var(--admin-text);
  font-size: 18px;
  font-weight: 750;
}

.confirm-submit-shell > p {
  color: var(--admin-muted);
  font-size: 13px;
  line-height: 1.6;
}

.confirm-submit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  border-top: 1px solid var(--admin-border);
  padding-top: 14px;
}

.recharge-dialog {
  width: min(1200px, calc(100vw - 32px));
  max-height: calc(100vh - 36px);
  overflow: hidden;
  border: 1px solid rgb(55 65 81);
  border-radius: 8px;
  padding: 0;
  background: #111111;
  color: #f8fafc;
  box-shadow: 0 30px 90px rgb(0 0 0 / 0.52);
}

.recharge-dialog::backdrop {
  background: rgb(0 0 0 / 64%);
}

.recharge-dialog-shell {
  display: grid;
  max-height: calc(100vh - 36px);
  gap: 18px;
  overflow: auto;
  background: linear-gradient(180deg, #111111, #141414);
  padding: 22px 28px 28px;
}

.recharge-dialog-header {
  position: relative;
  display: grid;
  place-items: center;
  gap: 6px;
  text-align: center;
}

.recharge-dialog-header h2 {
  color: #ffffff;
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 900;
  line-height: 1.1;
}

.recharge-dialog-header p {
  color: rgb(226 232 240);
  font-size: 14px;
  font-weight: 700;
}

.recharge-dialog-close {
  position: absolute;
  top: 0;
  right: 0;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgb(64 64 64);
  border-radius: 8px;
  background: rgb(24 24 27);
  color: rgb(226 232 240);
  font-size: 24px;
  line-height: 1;
}

.recharge-dialog-close:hover {
  border-color: #54d8f6;
  color: #54d8f6;
}

.recharge-current {
  display: flex;
  justify-self: center;
  align-items: center;
  justify-content: center;
  max-width: min(100%, 620px);
  gap: 14px;
  border: 1px solid rgb(55 65 81);
  border-radius: 8px;
  background: rgb(24 24 27);
  padding: 9px 14px;
  color: rgb(203 213 225);
  font-size: 13px;
  font-weight: 800;
}

.recharge-current span {
  min-width: 0;
  overflow: hidden;
  color: white;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recharge-current strong {
  color: #54d8f6;
}

.recharge-plan-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.recharge-plan-card {
  display: grid;
  min-height: 236px;
  gap: 10px;
  align-content: start;
  border: 1px solid rgb(54 54 54);
  border-radius: 8px;
  background: linear-gradient(145deg, rgb(30 30 30), rgb(19 19 19));
  padding: 18px;
  color: #f8fafc;
}

.recharge-plan-card-featured {
  border-color: #20d5ff;
  background:
    radial-gradient(circle at 100% 0%, rgb(84 216 246 / 0.18), transparent 40%),
    linear-gradient(145deg, #214650, #12272d 58%, #101214);
}

.recharge-plan-topline {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #f8fafc;
  font-size: 13px;
  font-weight: 800;
}

.recharge-plan-topline span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.recharge-plan-topline b {
  flex: 0 0 auto;
  border: 1px solid #54d8f6;
  border-radius: 4px;
  padding: 2px 6px;
  color: #54d8f6;
  font-size: 12px;
  font-weight: 800;
}

.recharge-plan-points {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #ffffff;
  font-size: clamp(27px, 2.5vw, 32px);
  font-weight: 900;
  line-height: 1.1;
}

.recharge-plan-points .credit-star {
  width: 30px;
  height: 30px;
  color: #ffffff;
  stroke-width: 2.2;
}

.recharge-plan-card-featured .recharge-plan-points,
.recharge-plan-card-featured .recharge-plan-points .credit-star {
  color: #facc15;
}

.recharge-plan-card p {
  color: rgb(148 163 184);
  font-size: 14px;
  font-weight: 700;
}

.recharge-paid-credit {
  color: #ffffff;
}

.recharge-bonus-credit,
.recharge-plan-card-featured .recharge-paid-credit {
  color: #facc15;
}

.recharge-plan-price {
  margin-top: 22px;
  color: white;
  font-size: 22px;
  font-weight: 900;
}

.recharge-plan-price span {
  display: block;
  margin-top: 4px;
  color: rgb(156 163 175);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

.recharge-plan-button {
  display: grid;
  min-height: 38px;
  place-items: center;
  border: 1px solid #54d8f6;
  border-radius: 8px;
  background: transparent;
  color: #54d8f6;
  font-size: 14px;
  font-weight: 900;
}

.recharge-plan-button:hover,
.recharge-plan-button:focus-visible {
  background: rgb(84 216 246 / 0.12);
}

.recharge-plan-button.is-filled {
  border-color: transparent;
  background: #54d8f6;
  color: #082f3a;
}

.recharge-plan-button.is-filled:hover,
.recharge-plan-button.is-filled:focus-visible {
  background: #67e8f9;
}

.recharge-plan-card small {
  justify-self: center;
  color: rgb(107 114 128);
  font-size: 12px;
  font-weight: 700;
}

.recharge-custom-card {
  grid-column: span 2;
  min-height: 236px;
}

.recharge-custom-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 88px;
  gap: 16px;
  align-items: center;
  margin-top: 18px;
}

.recharge-custom-control input[type="range"] {
  width: 100%;
  accent-color: #54d8f6;
}

.recharge-custom-value {
  width: 100%;
  border: 0;
  border-radius: 7px;
  background: rgb(63 63 70);
  padding: 8px 10px;
  color: white;
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}

.recharge-custom-scale,
.recharge-custom-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.recharge-custom-scale {
  color: rgb(148 163 184);
  font-size: 12px;
  font-weight: 700;
}

.recharge-custom-footer {
  margin-top: 16px;
}

.recharge-custom-footer small {
  justify-self: auto;
}

.recharge-custom-footer .recharge-plan-button {
  min-width: 244px;
}

.wechat-pay-workbench {
  display: grid;
  min-height: calc(100vh - 72px);
  place-items: center;
  padding: 28px 0;
}

.wechat-pay-panel {
  display: grid;
  width: min(860px, 100%);
  gap: 20px;
  border: 1px solid var(--admin-border);
  border-radius: 10px;
  background:
    radial-gradient(circle at 84% 0%, rgb(80 197 238 / 0.18), transparent 34%),
    linear-gradient(180deg, #131920, #0f1318);
  padding: 26px;
  box-shadow: var(--admin-shadow-card);
}

.wechat-pay-header,
.wechat-pay-summary,
.wechat-pay-qr-wrap {
  display: flex;
  gap: 16px;
}

.wechat-pay-header {
  align-items: center;
  justify-content: space-between;
}

.wechat-pay-header h1 {
  margin-top: 6px;
  color: var(--admin-text);
  font-size: 28px;
  font-weight: 900;
}

.wechat-pay-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.wechat-pay-summary > div {
  display: grid;
  min-width: 0;
  gap: 4px;
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  background: rgb(255 255 255 / 0.04);
  padding: 14px;
}

.wechat-pay-summary span,
.wechat-pay-instructions span {
  color: #8fa0b4;
  font-size: 12px;
}

.wechat-pay-summary strong {
  color: var(--admin-text);
  font-size: 16px;
}

.wechat-pay-order-no {
  overflow-wrap: anywhere;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 13px;
  line-height: 1.45;
}

.wechat-pay-qr-wrap {
  align-items: center;
  display: grid;
  grid-template-columns: 252px minmax(0, 1fr);
  border: 1px solid rgb(80 197 238 / 0.26);
  border-radius: 10px;
  background: rgb(255 255 255 / 0.035);
  padding: 20px;
}

.wechat-pay-qr-card {
  display: grid;
  width: 252px;
  min-height: 252px;
  place-items: center;
  border-radius: 8px;
  background: #fff;
  padding: 14px;
  box-shadow: 0 20px 52px rgb(0 0 0 / 0.22);
}

.wechat-pay-qr {
  width: 224px;
  height: 224px;
}

.wechat-pay-qr-fallback {
  display: grid;
  justify-items: center;
  gap: 10px;
  color: #0f172a;
  text-align: center;
}

.wechat-pay-qr-fallback[hidden] {
  display: none;
}

.wechat-pay-qr-fallback span {
  color: #475569;
  font-size: 13px;
  line-height: 1.6;
}

.wechat-pay-instructions {
  display: grid;
  min-width: 0;
  gap: 12px;
  align-content: center;
}

.wechat-pay-instructions strong {
  color: var(--admin-text);
  font-size: 22px;
}

.wechat-pay-instructions ol {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 20px;
  color: #c7d2df;
  font-size: 14px;
  line-height: 1.7;
}

.wechat-pay-link-detail {
  min-width: 0;
  color: #8fa0b4;
  font-size: 12px;
}

.wechat-pay-link-detail summary {
  cursor: pointer;
  font-weight: 800;
}

.wechat-pay-link-detail code {
  display: block;
  max-width: 100%;
  margin-top: 8px;
  overflow-wrap: anywhere;
  border-radius: 6px;
  background: rgb(255 255 255 / 0.07);
  padding: 8px;
  color: #dbeafe;
  font-size: 12px;
}

.wechat-pay-status {
  border-radius: 8px;
  border: 1px solid rgb(80 197 238 / 0.24);
  background: rgb(80 197 238 / 0.1);
  padding: 12px 14px;
  color: #7dd3fc;
  font-size: 13px;
  font-weight: 800;
}

/* Database-backed overview page */
.dashboard-workbench {
  display: grid;
  gap: 18px;
}

.dashboard-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.dashboard-header h1 {
  margin: 0;
  color: var(--admin-text);
  font-size: 26px;
  font-weight: 760;
  line-height: 1.2;
}

.dashboard-header p,
.dashboard-panel-heading p {
  margin: 6px 0 0;
  color: var(--admin-muted);
  font-size: 13px;
  line-height: 1.5;
}

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

.dashboard-metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.dashboard-metric-card,
.dashboard-panel {
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius);
  background: var(--admin-surface);
  box-shadow: var(--admin-shadow);
}

.dashboard-metric-card {
  display: grid;
  gap: 7px;
  min-height: 126px;
  padding: 18px;
}

.dashboard-metric-card span,
.dashboard-stat-row span,
.dashboard-list-row span,
.dashboard-task-state span {
  color: var(--admin-muted);
  font-size: 12px;
  font-weight: 650;
}

.dashboard-metric-card strong {
  color: var(--admin-text);
  font-size: 34px;
  font-weight: 760;
  line-height: 1;
}

.dashboard-metric-card p {
  margin: 0;
  color: var(--admin-faint);
  font-size: 12px;
  line-height: 1.45;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.58fr);
  gap: 12px;
}

.dashboard-panel {
  min-width: 0;
  overflow: hidden;
}

.dashboard-panel-wide {
  min-height: 360px;
}

.dashboard-panel-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid var(--admin-border);
  padding: 16px 18px;
}

.dashboard-panel-heading h2 {
  margin: 0;
  color: var(--admin-text);
  font-size: 16px;
  font-weight: 750;
}

.dashboard-panel-heading a {
  flex: 0 0 auto;
  color: var(--admin-accent-strong);
  font-size: 12px;
  font-weight: 750;
  text-decoration: none;
}

.dashboard-panel-heading a:hover {
  text-decoration: underline;
}

.dashboard-stat-list,
.dashboard-list {
  display: grid;
}

.dashboard-stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--admin-border);
  padding: 14px 18px;
}

.dashboard-stat-row:last-child,
.dashboard-list-row:last-child {
  border-bottom: 0;
}

.dashboard-stat-row strong,
.dashboard-list-row strong {
  display: block;
  overflow: hidden;
  color: var(--admin-text);
  font-size: 14px;
  font-weight: 730;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-stat-row span,
.dashboard-list-row span {
  display: block;
  margin-top: 4px;
}

.dashboard-stat-row b {
  color: var(--admin-text);
  font-size: 24px;
  font-weight: 760;
  line-height: 1;
}

.dashboard-task-state-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 18px;
}

.dashboard-task-state {
  display: grid;
  gap: 14px;
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-sm);
  background: var(--admin-surface-soft);
  padding: 14px;
}

.dashboard-task-state strong {
  color: var(--admin-text);
  font-size: 28px;
  font-weight: 760;
  line-height: 1;
}

.dashboard-list-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid var(--admin-border);
  padding: 14px 18px;
  color: inherit;
  text-decoration: none;
}

.dashboard-list-row:hover {
  background: var(--admin-surface-soft);
}

.dashboard-row-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 190px;
}

.dashboard-row-meta time {
  color: var(--admin-faint);
  font-size: 12px;
  white-space: nowrap;
}

.dashboard-empty {
  margin: 18px;
}

@media (width <= 1100px) {
  .dashboard-metric-grid,
  .dashboard-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (width <= 760px) {
  .dashboard-header,
  .dashboard-panel-heading,
  .dashboard-list-row {
    align-items: stretch;
    grid-template-columns: 1fr;
    flex-direction: column;
  }

  .dashboard-actions,
  .dashboard-row-meta {
    justify-content: flex-start;
  }

  .dashboard-metric-grid,
  .dashboard-grid,
  .dashboard-task-state-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-row-meta {
    min-width: 0;
  }
}

.vod-console {
  display: grid;
  gap: 18px;
  color: #111827;
}

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

.vod-page-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 18px;
}

.vod-page-head h1 {
  margin: 0;
  color: #0f172a;
  font-size: 24px;
  font-weight: 750;
  line-height: 1.2;
}

.vod-page-head p:not(.eyebrow) {
  margin: 8px 0 0;
  color: #64748b;
  font-size: 13px;
}

.vod-panel {
  overflow: hidden;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: white;
  box-shadow: 0 1px 2px rgb(15 23 42 / 5%);
}

.vod-tabs {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid #e2e8f0;
  padding: 0 22px;
}

.vod-tab {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  border: 1px solid #e2e8f0;
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  margin-top: 10px;
  padding: 0 18px;
  background: #f8fafc;
  color: #4b5563;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.vod-tab.is-active {
  position: relative;
  background: white;
  color: #2563eb;
}

.vod-tab.is-active::before {
  position: absolute;
  top: -1px;
  right: -1px;
  left: -1px;
  height: 3px;
  border-radius: 6px 6px 0 0;
  background: #2563eb;
  content: "";
}

.vod-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 18px;
  padding: 16px 22px;
}

.vod-toolbar-actions,
.vod-toolbar-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.vod-toolbar-actions {
  flex: 0 1 auto;
  min-width: 0;
}

.vod-toolbar-actions form {
  display: inline-flex;
  align-items: center;
  margin: 0;
}

.vod-toolbar-actions .btn-primary,
.vod-toolbar-actions .btn-secondary {
  box-sizing: border-box;
  min-height: 36px;
  height: 36px;
  padding: 0 14px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
}

.vod-upload-trigger {
  min-width: 82px;
  cursor: pointer;
}

.vod-upload-trigger input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.vod-upload-trigger.is-disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.vod-ai-button span {
  width: 13px;
  height: 13px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 70% 30%, #8b5cf6 0 22%, transparent 24%),
    conic-gradient(from 20deg, #2563eb, #22c55e, #8b5cf6, #2563eb);
}

.vod-more-button::after {
  margin-left: 8px;
  border-top: 5px solid currentColor;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  content: "";
}

.vod-toolbar-filters {
  flex: 1 1 520px;
  justify-content: flex-end;
  min-width: 0;
}

.vod-toolbar-filters label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.vod-toolbar-filters label > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.vod-toolbar-filters input,
.vod-toolbar-filters select,
.vod-toolbar-filters button,
.vod-table-footer select,
.vod-table-footer button {
  min-height: 36px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: white;
  color: #334155;
  font-size: 13px;
}

.vod-toolbar-filters input,
.vod-toolbar-filters select {
  padding: 0 12px;
}

.vod-toolbar-filters button {
  border-color: #2563eb;
  background: #2563eb;
  padding: 0 14px;
  color: white;
  font-weight: 700;
}

.vod-date-filter {
  min-width: 300px;
}

.vod-date-filter-labeled {
  min-width: 330px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #fff;
  padding: 0 8px;
}

.vod-toolbar-filters .vod-date-filter-labeled > span {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  color: #475569;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.vod-date-filter input {
  width: 120px;
}

.vod-date-filter-labeled input {
  width: 118px;
  border: 0;
  padding: 0 4px;
}

.vod-date-filter b {
  color: #94a3b8;
  font-weight: 600;
}

.vod-search-field {
  flex: 1;
  max-width: 420px;
  min-width: 280px;
}

.vod-search-field select {
  width: 90px;
}

.vod-search-field input {
  flex: 1;
  min-width: 0;
}

.vod-meta-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  border-top: 1px solid #f1f5f9;
  padding: 0 22px 14px;
  color: #64748b;
  font-size: 13px;
}

.vod-meta-strip strong {
  color: #0f172a;
}

.vod-meta-strip .is-ok {
  color: #059669;
}

.vod-meta-strip .is-warning {
  color: #b45309;
}

.vod-meta-strip .is-danger {
  color: #dc2626;
}

.vod-alert {
  border: 1px solid #dbeafe;
  border-radius: 8px;
  background: #eff6ff;
  padding: 12px 14px;
  color: #1e40af;
  font-size: 13px;
  transition: opacity 0.24s ease, transform 0.24s ease;
}

.app-flash-region {
  position: sticky;
  z-index: 40;
  top: 0;
  display: grid;
  gap: 8px;
  margin: 0 0 10px;
}

.app-flash-region:empty {
  display: none;
}

.app-flash-region .vod-alert {
  box-shadow: 0 10px 28px rgb(15 23 42 / 8%);
}

.vod-alert.is-dismissing {
  opacity: 0;
  transform: translateY(-4px);
}

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

.delivery-section-head h2 {
  margin: 0 0 4px;
  color: #0f172a;
  font-size: 18px;
  font-weight: 800;
}

.delivery-section-head p {
  margin: 0;
  color: #64748b;
  font-size: 13px;
}

.delivery-section-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.delivery-page-command,
.delivery-record-panel {
  padding: 16px;
}

.delivery-record-panel {
  padding: 0;
}

.delivery-record-panel .vod-toolbar {
  padding: 16px;
}

.delivery-record-panel .vod-table-footer {
  padding-right: 16px;
  padding-left: 16px;
}

.delivery-page-command {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.delivery-page-command h2 {
  margin: 0 0 4px;
  color: #0f172a;
  font-size: 18px;
  font-weight: 850;
}

.delivery-page-command p {
  margin: 0;
  color: #64748b;
  font-size: 13px;
  font-weight: 600;
}

.delivery-draft-dialog {
  width: min(1200px, calc(100vw - 40px));
  max-height: min(860px, calc(100vh - 40px));
  overflow: hidden;
  border: 1px solid #dbe3ef;
  border-radius: 10px;
  background: #fff;
  padding: 0;
  color: #0f172a;
  box-shadow: 0 24px 70px rgb(15 23 42 / 28%);
}

.delivery-draft-dialog::backdrop {
  background: rgb(2 6 23 / 68%);
  backdrop-filter: blur(4px);
}

.delivery-draft-dialog-shell {
  max-height: min(860px, calc(100vh - 40px));
  overflow: auto;
  padding: 18px;
}

.delivery-draft-form {
  display: grid;
  grid-template-columns: minmax(680px, 1fr) minmax(280px, 340px);
  gap: 14px;
  align-items: start;
}

.delivery-draft-main,
.delivery-check-panel {
  display: grid;
  gap: 12px;
}

.delivery-draft-main {
  min-width: 0;
}

.delivery-check-panel {
  position: sticky;
  top: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  padding: 14px;
}

.delivery-field-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.delivery-draft-form label {
  display: grid;
  gap: 6px;
  color: #334155;
  font-size: 13px;
  font-weight: 700;
}

.delivery-draft-form input,
.delivery-draft-form select,
.delivery-draft-form textarea {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #fff;
  padding: 9px 11px;
  color: #0f172a;
  font: inherit;
  font-weight: 600;
}

.delivery-draft-form textarea {
  min-height: 180px;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.55;
}

.delivery-advertiser-field small {
  color: #64748b;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
}

.delivery-advertiser-picker {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.delivery-material-picker-field {
  grid-column: 1 / -1;
}

.delivery-material-picker {
  display: grid;
  gap: 8px;
  border: 1px solid #dbe3ef;
  border-radius: 8px;
  background: #f8fafc;
  padding: 10px;
}

.delivery-material-selected {
  border: 1px solid #bfdbfe;
  border-radius: 6px;
  background: #eff6ff;
  padding: 10px 12px;
  color: #1e3a8a;
  font-size: 13px;
  font-weight: 800;
}

.delivery-material-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.delivery-material-list {
  display: grid;
  gap: 0;
  max-height: 236px;
  overflow: auto;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #fff;
}

.delivery-material-option {
  display: grid;
  grid-template-columns: minmax(180px, 1.35fr) minmax(180px, 1.15fr) minmax(120px, 0.78fr) 58px;
  gap: 10px;
  align-items: center;
  min-height: 42px;
  border: 0;
  border-bottom: 1px solid #eef2f7;
  border-radius: 0;
  background: #fff;
  padding: 8px 10px;
  color: #0f172a;
  text-align: left;
  cursor: pointer;
}

.delivery-material-option:hover,
.delivery-material-option.is-selected {
  background: #eff6ff;
}

.delivery-material-option.is-selected {
  box-shadow: inset 3px 0 0 #2563eb;
}

.delivery-material-option strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}

.delivery-material-option span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #64748b;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
}

.delivery-material-option b {
  justify-self: end;
  border-radius: 999px;
  background: #ecfdf3;
  padding: 3px 7px;
  color: #15803d;
  font-size: 11px;
  line-height: 1;
}

.delivery-material-option.is-empty {
  grid-column: 1 / -1;
  min-height: auto;
  color: #64748b;
  cursor: default;
}

.delivery-material-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}

.delivery-material-footer div {
  display: flex;
  gap: 8px;
}

.delivery-payload-field,
.delivery-sync-status,
.delivery-form-actions {
  grid-column: 1 / -1;
}

.delivery-payload-field {
  border: 1px solid #dbe3ef;
  border-radius: 8px;
  background: #fff;
}

.delivery-payload-field summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  color: #334155;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}

.delivery-payload-field summary::-webkit-details-marker {
  display: none;
}

.delivery-payload-field summary b {
  color: #2563eb;
  font-size: 12px;
}

.delivery-payload-field textarea {
  border-width: 1px 0 0;
  border-radius: 0 0 8px 8px;
}

.delivery-empty-materials {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  grid-column: 1 / -1;
  border: 1px solid #f4d27a;
  border-radius: 8px;
  background: #fff8e8;
  padding: 12px 14px;
  color: #7a4b00;
  line-height: 1.5;
}

.delivery-empty-materials div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.delivery-inline-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.delivery-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.delivery-check-card,
.delivery-check-list,
.delivery-side-note {
  border: 1px solid #dbe3ef;
  border-radius: 8px;
  background: #f8fafc;
  padding: 12px;
}

.delivery-check-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.delivery-check-card h3,
.delivery-check-list h3,
.delivery-side-note h3,
.delivery-record-head h2 {
  margin: 0;
  color: #0f172a;
  font-size: 14px;
  font-weight: 850;
}

.delivery-check-card p,
.delivery-side-note p,
.delivery-record-head p {
  margin: 4px 0 0;
  color: #64748b;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
}

.delivery-check-card.is-auth {
  border-color: #bfdbfe;
  background: #eff6ff;
}

.delivery-check-list {
  display: grid;
  gap: 7px;
}

.delivery-check-list p {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  border-bottom: 1px solid #e2e8f0;
  padding: 7px 0;
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}

.delivery-check-list p:last-child {
  border-bottom: 0;
}

.delivery-check-list b {
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 11px;
  line-height: 1;
}

.delivery-check-list .is-ok {
  background: #ecfdf3;
  color: #15803d;
}

.delivery-check-list .is-warn {
  background: #fffbeb;
  color: #b45309;
}

.delivery-sync-status {
  border: 1px solid #dbeafe;
  border-radius: 6px;
  background: #eff6ff;
  padding: 10px 12px;
  color: #1e40af;
  font-size: 13px;
  font-weight: 700;
}

.delivery-sync-status[data-state="ok"] {
  border-color: #bbf7d0;
  background: #f0fdf4;
  color: #166534;
}

.delivery-sync-status[data-state="error"] {
  border-color: #e2e8f0;
  background: #f8fafc;
  color: #64748b;
}

.delivery-sync-status[data-state="loading"] {
  border-color: #e2e8f0;
  background: #f8fafc;
  color: #475569;
}

.delivery-sync-action {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  border-radius: 6px;
  background: #2563eb;
  padding: 5px 9px;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}

.delivery-sync-action:hover {
  background: #1d4ed8;
  color: #fff;
}

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

.delivery-record-table td {
  vertical-align: top;
}

.delivery-confirm-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #475569;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.delivery-confirm-checkbox input {
  width: 14px;
  height: 14px;
}

.vod-error-text {
  max-width: 260px;
  margin: 6px 0 0;
  color: #dc2626;
  font-size: 12px;
  line-height: 1.45;
}

.vod-alert ul {
  margin: 6px 0 0;
  padding-left: 18px;
}

.vod-alert-warning {
  border-color: #fde68a;
  background: #fffbeb;
  color: #92400e;
}

.vod-alert-danger {
  border-color: #fecdd3;
  background: #fff1f2;
  color: #be123c;
}

.vod-table-wrap {
  overflow-x: auto;
  border-top: 1px solid #e2e8f0;
}

.vod-table {
  width: 100%;
  min-width: 1180px;
  border-collapse: collapse;
  font-size: 14px;
}

.vod-table th {
  height: 52px;
  background: #f8fafc;
  color: #4b5563;
  font-weight: 750;
  text-align: left;
  white-space: nowrap;
}

.vod-table th,
.vod-table td {
  border-bottom: 1px solid #e5e7eb;
  padding: 10px 14px;
  vertical-align: middle;
}

.vod-table tbody tr:hover {
  background: #fafcff;
}

.vod-table tbody tr.vod-status-reason-row:hover {
  background: transparent;
}

.vod-table tbody tr.is-selected {
  background: #f8fbff;
}

.vod-check-cell {
  width: 48px;
  text-align: center;
}

.vod-check-input {
  display: inline-grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border: 1px solid #cbd5e1;
  border-radius: 3px;
  margin: 0;
  appearance: none;
  background: white;
  color: white;
  cursor: pointer;
  vertical-align: middle;
}

.vod-check-input:checked,
.vod-check-input:indeterminate {
  border-color: #2563eb;
  background: #2563eb;
}

.vod-check-input:checked::after {
  width: 5px;
  height: 9px;
  border-right: 2px solid white;
  border-bottom: 2px solid white;
  transform: rotate(45deg);
  content: "";
}

.vod-check-input:indeterminate::after {
  width: 8px;
  height: 2px;
  border-radius: 999px;
  background: white;
  content: "";
}

.vod-check-input:focus-visible {
  box-shadow: 0 0 0 3px rgb(37 99 235 / 18%);
  outline: none;
}

.vod-check-input:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.vod-check,
.vod-row-check {
  display: inline-grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border: 1px solid #cbd5e1;
  border-radius: 3px;
  color: white;
  font-size: 12px;
  font-weight: 800;
}

.vod-check.is-active,
.vod-row-check.is-active {
  border-color: #2563eb;
  background: #2563eb;
}

.vod-media-cell {
  display: grid;
  grid-template-columns: 98px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  min-width: 360px;
}

.vod-thumb {
  position: relative;
  display: grid;
  width: 98px;
  height: 56px;
  place-items: center;
  overflow: hidden;
  border-radius: 3px;
  background:
    linear-gradient(90deg, rgb(15 23 42 / 42%), transparent 24%, transparent 76%, rgb(15 23 42 / 42%)),
    linear-gradient(135deg, #e5e7eb, #94a3b8);
}

.vod-thumb span {
  width: 26px;
  height: 26px;
  border: 2px solid white;
  border-radius: 999px;
  background: rgb(15 23 42 / 34%);
}

.vod-thumb img,
.vod-thumb video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vod-thumb video {
  pointer-events: none;
}

.vod-thumb.has-image {
  background: #e5e7eb;
}

.vod-thumb.has-image span {
  display: none;
}

.vod-thumb span::after {
  display: block;
  width: 0;
  height: 0;
  margin: 6px 0 0 9px;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid white;
  content: "";
}

.vod-thumb small {
  position: absolute;
  right: 4px;
  bottom: 3px;
  color: white;
  font-size: 11px;
  font-weight: 700;
  text-shadow: 0 1px 2px rgb(0 0 0 / 60%);
}

.vod-media-cell strong {
  display: block;
  max-width: 420px;
  overflow: hidden;
  color: #111827;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vod-media-cell p {
  margin: 4px 0 0;
  color: #64748b;
  font-size: 13px;
}

.vod-media-cell .vod-store-uri {
  max-width: 520px;
  overflow: hidden;
  color: #94a3b8;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vod-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #475569;
  font-weight: 700;
  white-space: nowrap;
}

.vod-status i {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #cbd5e1;
}

.vod-status.is-published i {
  background: #22c55e;
}

.vod-status.is-unpublished i {
  background: #cbd5e1;
}

.vod-status.is-submitted i,
.vod-status.is-running i,
.vod-status.is-unknown i {
  background: #f59e0b;
}

.vod-status.is-success i {
  background: #16a34a;
}

.vod-status.is-pass i {
  background: #16a34a;
}

.vod-status.is-not_started i,
.vod-status.is-reviewing i {
  background: #f59e0b;
}

.vod-status.is-received i,
.vod-status.is-processed i {
  background: #16a34a;
}

.vod-status.is-ignored i {
  background: #94a3b8;
}

.vod-status.is-failed i {
  background: #dc2626;
}

.vod-status.is-reject i {
  background: #dc2626;
}

.vod-row-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  min-width: 360px;
}

.vod-row-actions a,
.vod-row-actions button,
.vod-row-actions span {
  display: inline-flex;
  align-items: center;
  border: 0;
  background: transparent;
  padding: 0;
  color: #2563eb;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

.vod-row-actions button {
  cursor: pointer;
}

.vod-row-actions button:disabled {
  cursor: wait;
  opacity: 0.7;
}

.vod-row-actions span {
  color: #93c5fd;
}

.vod-row-actions .is-danger {
  color: #2563eb;
}

.vod-toolbar-actions .btn-secondary[aria-disabled="true"] {
  border-color: #dbe3ef;
  background: #f8fafc;
  color: #94a3b8;
  pointer-events: none;
}

.vod-muted,
.vod-empty {
  color: #94a3b8;
}

.vod-task-id {
  display: inline-block;
  max-width: 180px;
  overflow: hidden;
  vertical-align: bottom;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vod-task-detail {
  position: relative;
}

.vod-task-detail summary {
  color: #2563eb;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
}

.vod-task-detail pre {
  position: absolute;
  z-index: 5;
  right: 0;
  width: min(560px, 72vw);
  max-height: 360px;
  padding: 14px;
  overflow: auto;
  border: 1px solid #dbe3ef;
  border-radius: 6px;
  background: #0f172a;
  color: #e2e8f0;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
}

.vod-error-text {
  margin-top: 4px;
  color: #b91c1c;
  font-size: 12px;
}

.vod-status-reason-row td {
  padding-top: 0;
  background: #fff7f7;
}

.vod-status-reason {
  max-width: 960px;
  border: 1px solid #fecaca;
  border-radius: 8px;
  background: #fff;
  padding: 10px 12px;
  color: #991b1b;
}

.vod-status-reason summary {
  width: max-content;
  cursor: pointer;
  color: #dc2626;
  font-size: 13px;
  font-weight: 800;
}

.vod-status-reason p {
  margin: 8px 0 0;
  color: #b91c1c;
  font-size: 13px;
  line-height: 1.6;
  white-space: normal;
  overflow-wrap: anywhere;
}

.vod-empty {
  padding: 34px 14px;
  text-align: center;
}

.vod-table-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 22px;
  color: #334155;
  font-size: 14px;
}

.vod-table-footer > div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.vod-pager form {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}

.vod-table-footer button,
.vod-table-footer select,
.vod-table-footer input,
.vod-page-button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: white;
  padding: 0 12px;
  color: #334155;
  font-size: 13px;
  text-decoration: none;
}

.vod-table-footer input {
  width: 64px;
}

.vod-table-footer button {
  font-weight: 700;
}

.vod-page-button[aria-disabled="true"] {
  color: #cbd5e1;
  pointer-events: none;
}

.vod-table-footer strong {
  display: inline-grid;
  min-width: 28px;
  min-height: 28px;
  place-items: center;
  border: 1px solid #2563eb;
  border-radius: 5px;
  color: #2563eb;
}

.generation-v2-qianchuan-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #dbe4f0;
  border-radius: 8px;
  background: #f8fafc;
  padding: 12px;
}

.generation-v2-qianchuan-total {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  color: #334155;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.generation-v2-qianchuan-pager,
.generation-v2-qianchuan-page-nav,
.generation-v2-qianchuan-jump {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.generation-v2-qianchuan-pager {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.generation-v2-qianchuan-page-nav {
  border: 1px solid #dbe4f0;
  border-radius: 8px;
  background: white;
  padding: 2px;
}

.generation-v2-qianchuan-page-nav .vod-page-button {
  min-width: 32px;
  min-height: 30px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  padding: 0;
  color: #2563eb;
  font-size: 16px;
  font-weight: 900;
}

.generation-v2-qianchuan-page-nav .vod-page-button:hover {
  background: #eff6ff;
}

.generation-v2-qianchuan-page-nav .vod-page-button[aria-disabled="true"] {
  color: #cbd5e1;
  pointer-events: none;
}

.generation-v2-qianchuan-page-nav strong {
  display: inline-flex;
  min-width: 54px;
  justify-content: center;
  border: 0;
  color: #0f172a;
  font-size: 13px;
  font-weight: 900;
}

.generation-v2-qianchuan-pager select,
.generation-v2-qianchuan-jump input,
.generation-v2-qianchuan-pager button {
  box-sizing: border-box;
  height: 36px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: white;
  color: #0f172a;
  font-size: 13px;
  font-weight: 800;
}

.generation-v2-qianchuan-pager select {
  min-width: 108px;
  padding: 0 10px;
}

.generation-v2-qianchuan-jump {
  gap: 6px;
  color: #64748b;
  font-size: 13px;
  font-weight: 800;
}

.generation-v2-qianchuan-jump input {
  width: 58px;
  padding: 0 8px;
  text-align: center;
}

.generation-v2-qianchuan-pager button {
  padding: 0 14px;
  color: #2563eb;
  cursor: pointer;
}

.generation-v2-qianchuan-pager select:focus-visible,
.generation-v2-qianchuan-jump input:focus-visible,
.generation-v2-qianchuan-pager button:focus-visible,
.generation-v2-qianchuan-page-nav .vod-page-button:focus-visible {
  box-shadow: 0 0 0 3px rgb(37 99 235 / 16%);
  outline: none;
}

.vod-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 430px;
  gap: 18px;
}

.vod-section-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 20px 0;
}

.vod-section-head h2 {
  margin: 0;
  color: #111827;
  font-size: 18px;
  font-weight: 750;
}

.vod-section-head p {
  margin: 6px 0 0;
  color: #64748b;
  font-size: 13px;
}

.vod-preview {
  display: grid;
  min-height: 260px;
  margin: 16px 20px;
  place-items: center;
  overflow: hidden;
  border-radius: 8px;
  background: #0f172a;
  color: #94a3b8;
  font-size: 13px;
}

.vod-preview video {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #0f172a;
}

.vod-play-list {
  display: grid;
  gap: 10px;
  padding: 0 20px 20px;
}

.vod-play-list div,
.vod-result,
.vod-detail-list div {
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #f8fafc;
  padding: 10px 12px;
}

.vod-play-list p {
  margin: 0 0 6px;
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}

.vod-play-list a,
.vod-result a {
  display: block;
  overflow-wrap: anywhere;
  color: #2563eb;
  font-size: 13px;
  text-decoration: none;
}

.vod-play-list span {
  color: #64748b;
  font-size: 13px;
}

.vod-config-pill {
  border-radius: 999px;
  background: #f1f5f9;
  padding: 6px 10px;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 750;
}

.vod-config-pill.is-ok {
  background: #ecfdf5;
  color: #047857;
}

.vod-understanding-form {
  display: grid;
  gap: 12px;
  padding: 16px 20px 20px;
}

.vod-understanding-form label {
  display: grid;
  gap: 6px;
}

.vod-understanding-form label span,
.vod-detail-list dt {
  color: #475569;
  font-size: 12px;
  font-weight: 750;
}

.vod-understanding-form input,
.vod-understanding-form textarea {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 9px 10px;
  color: #111827;
  font-size: 13px;
}

.vod-understanding-form textarea {
  min-height: 92px;
  resize: vertical;
}

.vod-understanding-form > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.vod-result {
  margin: 0 20px 20px;
  background: #f5f3ff;
  border-color: #ddd6fe;
}

.vod-result div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: #6d28d9;
  font-size: 12px;
  font-weight: 750;
}

.vod-result p {
  margin: 10px 0;
  color: #334155;
  font-size: 13px;
  white-space: pre-wrap;
}

.vod-detail-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 16px 20px 20px;
}

.vod-detail-list div:last-child {
  grid-column: 1 / -1;
}

.vod-detail-list dd {
  margin: 5px 0 0;
  overflow-wrap: anywhere;
  color: #111827;
  font-size: 13px;
}

.vod-ad-audit-dialog {
  width: min(100vw, 980px);
  max-width: none;
  height: 100vh;
  max-height: none;
  border: 0;
  margin: 0 0 0 auto;
  padding: 0;
  background: white;
  color: #111827;
}

.vod-ad-audit-dialog::backdrop {
  background: rgb(15 23 42 / 58%);
}

.qianchuan-media-dialog {
  width: min(720px, calc(100vw - 28px));
  max-width: none;
  border: 0;
  border-radius: 10px;
  padding: 0;
  background: white;
  box-shadow: 0 28px 70px rgb(15 23 42 / 28%);
  color: #111827;
}

.qianchuan-media-dialog::backdrop {
  background: rgb(15 23 42 / 52%);
}

.qianchuan-media-dialog-shell {
  display: grid;
  gap: 0;
}

.qianchuan-media-dialog-header {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e5e7eb;
  padding: 16px 18px;
}

.qianchuan-media-dialog-header > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.qianchuan-media-dialog-header strong {
  overflow: hidden;
  color: #0f172a;
  font-size: 16px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qianchuan-media-dialog-header span {
  overflow: hidden;
  color: #64748b;
  font-size: 12px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qianchuan-media-dialog-body {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.qianchuan-media-dialog-body video {
  width: 100%;
  max-height: 420px;
  border-radius: 8px;
  background: #020617;
}

.qianchuan-media-detail-list {
  display: grid;
  gap: 10px;
  margin: 0;
}

.qianchuan-media-detail-list div {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #f8fafc;
  padding: 10px 12px;
}

.qianchuan-media-detail-list dt {
  color: #64748b;
  font-size: 12px;
  font-weight: 850;
}

.qianchuan-media-detail-list dd {
  margin: 0;
  overflow-wrap: anywhere;
  color: #111827;
  font-size: 13px;
  font-weight: 750;
}

.qianchuan-media-dialog-message {
  margin: 0;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  background: #f8fafc;
  padding: 12px;
  color: #64748b;
  font-size: 13px;
  font-weight: 750;
}

.vod-ad-audit-drawer {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 100vh;
  background: white;
}

.vod-ad-audit-tip {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 12px;
  background: #f1f5ff;
  padding: 18px 24px;
  color: #1f2937;
  font-size: 14px;
  line-height: 1.65;
}

.vod-ad-audit-tip span {
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 999px;
  background: #2563eb;
  color: white;
  font-size: 12px;
  font-weight: 800;
}

.vod-ad-audit-tip p {
  margin: 0;
}

.vod-ad-audit-body {
  display: grid;
  align-content: start;
  gap: 22px;
  padding: 22px 36px;
}

.vod-ad-audit-row {
  display: grid;
  grid-template-columns: 130px auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  color: #374151;
  font-size: 14px;
}

.vod-ad-audit-row > span,
.vod-ad-audit-field > span,
.vod-ad-audit-fieldset legend {
  color: #374151;
  font-size: 14px;
  font-weight: 700;
}

.vod-ad-audit-row strong {
  font-size: 14px;
}

.vod-ad-audit-row button {
  width: max-content;
  border: 1px solid #bfdbfe;
  border-radius: 6px;
  background: white;
  padding: 2px 6px;
  color: #2563eb;
  font-size: 13px;
  font-weight: 700;
}

.vod-ad-audit-fieldset {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  border: 0;
  margin: 0;
  padding: 0;
}

.vod-ad-audit-fieldset legend {
  display: contents;
}

.vod-ad-audit-fieldset legend span,
.vod-ad-audit-field b {
  margin-right: 5px;
  color: #ef4444;
}

.vod-ad-audit-channel-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  gap: 14px;
}

.vod-ad-audit-channel-grid label {
  cursor: pointer;
}

.vod-ad-audit-channel-grid input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.vod-ad-audit-channel-grid span {
  display: grid;
  min-height: 42px;
  place-items: center;
  border: 1px solid #d8e0ec;
  border-radius: 6px;
  background: white;
  color: #374151;
  font-size: 14px;
  font-weight: 700;
}

.vod-ad-audit-channel-grid input:checked + span {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgb(37 99 235 / 12%);
  color: #1d4ed8;
}

.vod-ad-audit-field {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 8px;
}

.vod-ad-audit-field input {
  min-height: 42px;
  border: 1px solid #d8e0ec;
  border-radius: 6px;
  padding: 0 12px;
  font-size: 14px;
}

.vod-ad-audit-field small {
  grid-column: 2;
  color: #64748b;
  font-size: 13px;
}

.vod-ad-audit-help {
  position: absolute;
  right: 38px;
  bottom: 88px;
  display: grid;
  width: 50px;
  height: 50px;
  place-items: center;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  background: #eff6ff;
  color: #2563eb;
  font-size: 22px;
  font-weight: 800;
}

.vod-ad-audit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  border-top: 1px solid #e2e8f0;
  padding: 18px 24px;
}

@media (max-width: 1180px) {
  .delivery-draft-form {
    grid-template-columns: 1fr;
  }

  .delivery-check-panel {
    position: static;
  }

  .delivery-page-command {
    align-items: stretch;
    flex-direction: column;
  }

  .vod-toolbar,
  .vod-page-head {
    align-items: stretch;
    flex-direction: column;
  }

  .vod-toolbar-filters {
    justify-content: flex-start;
  }

  .vod-detail-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .asset-upload-dialog-shell {
    padding: 18px;
  }

  .asset-upload-choice-grid,
  .asset-upload-dialog-tabs {
    grid-template-columns: 1fr;
  }

  .delivery-field-grid {
    grid-template-columns: 1fr;
  }

  .delivery-material-option {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .delivery-material-option b {
    justify-self: start;
  }

  .vod-tabs,
  .vod-toolbar,
  .vod-meta-strip,
  .vod-table-footer,
  .vod-section-head {
    padding-right: 14px;
    padding-left: 14px;
  }

  .vod-toolbar-actions,
  .vod-toolbar-filters {
    flex-wrap: wrap;
  }

  .vod-date-filter,
  .vod-search-field {
    min-width: 100%;
    max-width: none;
  }

  .vod-search-field input {
    min-width: 120px;
  }

  .vod-table-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .vod-understanding-form > div,
  .vod-detail-list {
    grid-template-columns: 1fr;
  }

  .vod-ad-audit-dialog {
    width: min(100vw, 720px);
  }

  .vod-ad-audit-body {
    padding: 18px;
  }

  .vod-ad-audit-row,
  .vod-ad-audit-fieldset,
  .vod-ad-audit-field {
    grid-template-columns: 1fr;
  }

  .vod-ad-audit-channel-grid {
    grid-template-columns: 1fr;
  }

  .vod-ad-audit-field small {
    grid-column: 1;
  }
}

/* Global dark console theme */
:root {
  --admin-bg: #090b0e;
  --admin-surface: #13171c;
  --admin-surface-soft: #101419;
  --admin-surface-elevated: #191f26;
  --admin-border: #27313c;
  --admin-border-strong: #34404d;
  --admin-text: #f1f5f8;
  --admin-muted: #96a3b1;
  --admin-faint: #707c8a;
  --admin-accent: #63b7dc;
  --admin-accent-strong: #8bd2ec;
  --admin-accent-soft: #102631;
  --admin-active-bg: #e8f0f6;
  --admin-active-text: #101720;
  --admin-danger: #e47777;
  --admin-warning: #ddb86a;
  --admin-success: #6fd29a;
  --admin-shadow: 0 18px 48px rgb(0 0 0 / 28%);
  --admin-shadow-popover: 0 26px 80px rgb(0 0 0 / 50%);
  color-scheme: dark;
}

html,
.app-body,
.app-shell,
.app-main {
  background: var(--admin-bg);
  color: var(--admin-text);
}

.app-shell {
  background:
    radial-gradient(circle at 82% -12%, rgb(99 183 220 / 12%), transparent 32%),
    linear-gradient(180deg, #10151a 0%, #090b0e 50%, #08090b 100%);
}

.app-content {
  width: min(100%, 1480px);
  padding: 24px 30px 34px;
}

.app-content:has(.canvas-projects-page) {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 14px 12px 18px;
}

.app-sidebar {
  border-right-color: var(--admin-border);
  background: linear-gradient(180deg, #11161b, #0b0d10);
  box-shadow: 18px 0 48px rgb(0 0 0 / 18%);
}

.app-brand,
.app-sidebar-account {
  border-color: var(--admin-border);
}

.app-brand-mark {
  border: 1px solid var(--admin-border-strong);
  background: #1a2027;
  color: var(--admin-text);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 5%);
}

.app-brand strong,
.app-sidebar-account strong,
h1,
h2,
h3,
.generation-header h1,
.tasks-header h1,
.users-header h1,
.material-panel-head h2,
.picker-header h2,
.dashboard-panel-heading h2,
.generation-v2-panel-title h2,
.vod-page-title h1,
.vod-section-head h2,
.delivery-section-head h2,
.qianchuan-media-dialog-header strong {
  color: var(--admin-text);
}

.app-brand small,
.app-sidebar-account p,
.app-sidebar-credit span,
.app-sidebar-credit small,
p,
small,
.eyebrow,
.task-kicker,
.metric-label,
.generation-field > span,
.generation-field legend,
.user-create-form span,
.user-search-form span,
.picker-section-title span,
.dashboard-panel-heading p,
.generation-v2-panel-title p,
.vod-muted,
.delivery-muted,
.qianchuan-media-dialog-header span {
  color: var(--admin-muted);
}

.app-sidebar-credit {
  border: 1px solid var(--admin-border);
  background: #111820;
}

.app-sidebar-credit b {
  color: var(--admin-accent);
}

.nav-link,
.nav-group summary {
  color: var(--admin-muted);
}

.nav-link i,
.nav-link svg,
.nav-group summary i,
.nav-group summary svg {
  opacity: 0.82;
}

.nav-link:hover,
.nav-group summary:hover {
  background: #171d24;
  color: var(--admin-text);
}

.nav-link:hover i,
.nav-link:hover svg,
.nav-group summary:hover i,
.nav-group summary:hover svg,
.nav-link.is-active i,
.nav-link.is-active svg,
.nav-group.is-active summary i,
.nav-group.is-active summary svg {
  opacity: 1;
}

.nav-link.is-active,
.nav-group.is-active summary,
.material-tab.is-active,
.segment-button.is-active,
.model-provider-option:has(input:checked),
.ratio-option:has(input:checked),
.generation-v2-model-option input:checked + span {
  border-color: var(--admin-accent);
  background: var(--admin-active-bg);
  color: var(--admin-active-text);
}

.nav-link.is-active {
  box-shadow: inset 3px 0 0 var(--admin-accent);
}

.app-topbar {
  border-color: var(--admin-border);
  background: rgb(9 11 14 / 82%);
}

.app-public-shell:not(:has(.login-screen)) {
  background:
    radial-gradient(circle at 50% 0%, rgb(99 183 220 / 12%), transparent 34%),
    #090b0e;
}

.panel,
.generation-panel,
.generation-v2-panel,
.generation-v2-reference-tab-panel,
.task-summary-card,
.task-detail-panel,
.task-materials-panel,
.task-preview-panel,
.task-batch,
.task-card,
.material-form,
.material-list,
.material-create-panel,
.material-import-primary,
.material-import-secondary,
.material-group-block,
.library-row,
.portrait-group-card,
.portrait-material-card,
.asset-card,
.scene-card,
.real-asset-card,
.portrait-asset-card,
.user-table,
.recharge-table,
.billing-charge-list,
.hot-template-list,
.hot-template-row,
.hot-prompt-tab-list,
.hot-prompt-tab-row,
.recharge-package-row,
.recharge-record-table-row,
.credit-usage-table-row,
.credit-usage-summary-card,
.dashboard-metric-card,
.dashboard-panel,
.vod-panel,
.vod-table-wrap,
.delivery-workbench-panel,
.delivery-record-panel,
.delivery-check-panel,
.delivery-check-card,
.qianchuan-understand-custom-panel,
.generation-v2-qianchuan-auth-card,
.generation-v2-qianchuan-account-panel,
.generation-v2-polish-panel,
.generation-v2-output-panel,
.generation-v2-preview-panel,
.generation-v2-history-panel,
.wechat-pay-panel,
.rounded-lg.border.bg-white,
article.rounded-lg.border.bg-white,
section.rounded-lg.border.bg-white {
  border-color: var(--admin-border);
  background: linear-gradient(180deg, #13171c, #101419);
  box-shadow: var(--admin-shadow);
  color: var(--admin-text);
}

.task-card-main,
.task-detail-heading,
.task-batch-summary,
.material-panel-head,
.material-group-head,
.picker-header,
.dashboard-panel-heading,
.vod-section-head,
.vod-toolbar,
.vod-tabs,
.vod-meta-strip,
.vod-table-footer,
.delivery-record-table-head,
.delivery-material-picker-head,
.qianchuan-media-dialog-header,
.reference-template-dialog-header,
.manual-reference-template-header,
.confirm-submit-actions,
.vod-ad-audit-actions {
  border-color: var(--admin-border);
}

.task-batch-summary,
.material-toolbar,
.asset-filter-strip,
.segmented-control,
.model-provider-grid,
.ratio-grid,
.user-table-header,
.recharge-table-header,
.hot-template-header,
.hot-prompt-tab-header,
.vod-table th,
.vod-table-footer,
.dashboard-list-item,
.task-child-table th,
.task-batch-table-head,
.generation-v2-reference-toolbar,
.qianchuan-understand-custom-panel,
.qianchuan-media-dialog-message {
  background: var(--admin-surface-soft);
  color: var(--admin-muted);
}

.user-table-row,
.recharge-table-row,
.billing-charge-row,
.hot-template-row,
.hot-prompt-tab-row,
.recharge-package-row,
.task-batch-table-head,
.task-batch-table-row,
.task-child-table th,
.task-child-table td,
.vod-table th,
.vod-table td,
.dashboard-list-item,
.generation-v2-qianchuan-table th,
.generation-v2-qianchuan-table td,
.delivery-record-table td,
.delivery-record-table th {
  border-color: var(--admin-border);
}

.credit-usage-summary-card span,
.credit-usage-summary-card small {
  color: var(--admin-muted);
}

.credit-usage-summary-card strong {
  color: var(--admin-text);
}

@media (max-width: 900px) {
  .credit-usage-summary-grid {
    grid-template-columns: 1fr;
  }
}

.user-table-row-child {
  background: rgb(255 255 255 / 3.5%);
}

.user-table-row-child:hover {
  background: rgb(99 183 220 / 6%);
}

.user-credit-cell strong {
  color: var(--admin-text);
}

.user-account-cell strong,
.partner-profile-summary,
.partner-profile-summary strong {
  color: var(--admin-text);
}

.partner-profile-summary::before {
  color: var(--admin-muted);
}

.partner-profile-summary small {
  border: 1px solid rgb(99 183 220 / 22%);
  background: rgb(99 183 220 / 10%);
  color: var(--admin-muted);
}

.partner-profile-form {
  border: 1px solid var(--admin-border);
  border-top: 1px solid rgb(99 183 220 / 32%);
  border-radius: 8px;
  background: rgb(9 13 18 / 76%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 4%);
}

.partner-profile-form label span {
  color: var(--admin-muted);
}

.partner-profile-form .input {
  border-color: var(--admin-border-strong);
  background: #0d1218;
  color: var(--admin-text);
}

.hot-template-prompt-panel {
  border-color: var(--admin-border);
  background: rgb(255 255 255 / 3%);
}

.hot-template-prompt-panel label {
  color: var(--admin-muted);
}

.recharge-settings-form label,
.recharge-package-row label,
.recharge-package-flags label,
.recharge-package-title small,
.billing-charge-title small,
.billing-charge-enabled,
.hot-template-form label,
.hot-prompt-tab-form label,
.hot-template-flags label,
.hot-template-title small,
.hot-template-enabled,
.hot-prompt-tab-enabled {
  color: var(--admin-muted);
}

.recharge-package-title strong {
  color: var(--admin-text);
}

.billing-settings-note {
  border-color: rgba(95, 204, 239, 0.28);
  background: rgba(95, 204, 239, 0.09);
  color: var(--admin-text);
}

.vod-table tbody tr:hover,
.generation-v2-qianchuan-table tbody tr:hover,
.task-batch-table-row:hover,
.delivery-material-option:hover {
  background: #171d24;
}

.input,
input[type="search"],
input[type="date"],
input[type="number"],
input[type="text"],
input[type="password"],
textarea,
select,
.generation-v2-qianchuan-search input,
.vod-toolbar-filters input,
.vod-table-footer select,
.vod-table-footer input,
.vod-date-filter input,
.vod-search-field input,
.task-search-form input,
.task-batch-search input,
.qianchuan-understand-custom-panel input,
.vod-ad-audit-field input,
.vod-ad-audit-channel-grid span {
  border-color: var(--admin-border-strong);
  background: #0d1116;
  color: var(--admin-text);
}

.input::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--admin-faint);
}

.input:focus,
input[type="search"]:focus,
input[type="date"]:focus,
input[type="number"]:focus,
input[type="text"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  border-color: var(--admin-accent);
  box-shadow: 0 0 0 3px rgb(99 183 220 / 14%);
}

.btn-primary,
.task-download,
.vod-toolbar-actions .btn-primary,
.generation-v2-qianchuan-auth-card .btn-primary,
.recharge-plan-button.is-filled,
.asset-upload-dialog .btn-primary {
  border-color: var(--admin-accent);
  background: var(--admin-accent);
  color: #071217;
  box-shadow: 0 10px 28px rgb(99 183 220 / 16%);
}

.btn-primary:hover,
.task-download:hover,
.vod-toolbar-actions .btn-primary:hover,
.recharge-plan-button.is-filled:hover {
  border-color: var(--admin-accent-strong);
  background: var(--admin-accent-strong);
  color: #071217;
}

.btn-secondary,
.task-batch-download,
.recharge-plan-button,
.vod-table-footer button,
.create-panel-close,
.recharge-dialog-close,
.manual-reference-template-actions .btn-secondary {
  border-color: var(--admin-border-strong);
  background: #111720;
  color: var(--admin-text);
}

.btn-secondary:hover,
.task-batch-download:hover,
.recharge-plan-button:hover,
.vod-table-footer button:hover,
.create-panel-close:hover,
.recharge-dialog-close:hover {
  border-color: var(--admin-accent);
  background: var(--admin-accent-soft);
  color: var(--admin-accent);
}

.btn-danger,
.btn-icon-danger {
  border-color: rgb(228 119 119 / 50%);
  background: rgb(228 119 119 / 12%);
  color: #f0a3a3;
}

.btn-danger:hover,
.btn-icon-danger:hover {
  background: rgb(228 119 119 / 20%);
  color: #ffe4e4;
}

.empty-state,
.task-empty-state,
.task-preview-empty,
.task-material-empty,
.upload-drop,
.generation-upload,
.bulk-upload-dropzone,
.bulk-upload-queue,
.generation-v2-dropzone,
.asset-drop-trigger {
  border-color: var(--admin-border);
  background: #090d11;
  color: var(--admin-muted);
}

.upload-drop:hover,
.generation-upload:hover,
.generation-v2-dropzone:hover,
.asset-drop-trigger:hover {
  border-color: var(--admin-accent);
  background: var(--admin-accent-soft);
}

.status-pill,
.task-status,
.user-status,
.picker-status {
  border-color: var(--admin-border-strong);
  background: #111720;
  color: var(--admin-muted);
}

.status-active,
.task-status-succeeded,
.task-archive-archived,
.user-status-active,
.picker-status.status-active {
  border-color: rgb(111 210 154 / 42%);
  background: rgb(111 210 154 / 12%);
  color: var(--admin-success);
}

.status-pending,
.task-status-running,
.task-status-queued,
.task-status-submitted,
.picker-status.status-pending {
  border-color: rgb(221 184 106 / 48%);
  background: rgb(221 184 106 / 12%);
  color: var(--admin-warning);
}

.status-failed,
.task-status-failed,
.user-status-disabled,
.picker-status.status-failed {
  border-color: rgb(228 119 119 / 48%);
  background: rgb(228 119 119 / 12%);
  color: var(--admin-danger);
}

.material-picker-dialog,
.qianchuan-understand-dialog,
.reference-template-dialog,
.manual-reference-template-dialog,
.image-preview-dialog,
.confirm-submit-dialog,
.recharge-dialog,
.vod-ad-audit-dialog,
.qianchuan-media-dialog,
.asset-upload-dialog,
.prompt-editor-dialog {
  border-color: var(--admin-border);
  background: #101419;
  color: var(--admin-text);
  box-shadow: var(--admin-shadow-popover);
}

.picker-shell,
.picker-card,
.confirm-submit-shell,
.reference-template-dialog-shell,
.manual-reference-template-shell,
.asset-upload-dialog-shell,
.qianchuan-understand-dialog-shell,
.qianchuan-media-dialog-shell,
.recharge-dialog-shell {
  background: #101419;
  color: var(--admin-text);
}

.picker-card,
.reference-template-dialog-video,
.reference-template-dialog-prompt,
.manual-reference-template-field textarea,
.vod-ad-audit-channel-grid span {
  border-color: var(--admin-border);
  background: var(--admin-surface-elevated);
}

.picker-card:hover {
  border-color: var(--admin-accent);
  background: #17212a;
  box-shadow: 0 10px 28px rgb(99 183 220 / 10%);
}

.picker-card strong,
.asset-card h3,
.scene-card h3,
.real-asset-card strong,
.portrait-asset-card strong,
.task-card h3,
.dashboard-list-item strong,
.vod-table strong,
.delivery-check-card h3 {
  color: var(--admin-text);
}

.picker-card small,
.asset-card p,
.scene-card p,
.real-asset-card span,
.portrait-asset-card span,
.task-card p,
.dashboard-list-item small,
.vod-table small,
.delivery-check-card p {
  color: var(--admin-muted);
}

.picker-thumb {
  border-bottom-color: var(--admin-border);
  background:
    linear-gradient(45deg, rgb(255 255 255 / 4%) 25%, transparent 25%),
    linear-gradient(-45deg, rgb(255 255 255 / 4%) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgb(255 255 255 / 4%) 75%),
    linear-gradient(-45deg, transparent 75%, rgb(255 255 255 / 4%) 75%);
  background-color: #0b0d0f;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-size: 16px 16px;
}

.preview-shell,
.generation-product-preview,
.generation-v2-product-preview,
.generation-v2-polish-preview,
.generation-v2-preview-placeholder,
.reference-template-dialog-video,
.manual-reference-template-preview {
  border-color: var(--admin-border);
  background: #0d1116;
  color: var(--admin-muted);
}

.generation-product-preview > span,
.generation-v2-product-preview > span,
.generation-v2-preview-placeholder {
  color: #b2bfcb;
}

.product-preview-item,
.removable-preview-card {
  border-color: var(--admin-border);
  background: var(--admin-surface-elevated);
}

.product-preview-item figcaption,
.removable-preview-card strong {
  color: var(--admin-muted);
}

.material-studio,
.material-studio[data-material-theme="light"] {
  --material-bg: #090b0e;
  --material-panel: #13171c;
  --material-panel-soft: #191f26;
  --material-line: #2b343f;
  --material-text: #f1f5f8;
  --material-muted: #96a3b1;
  --material-accent: #63b7dc;
  --material-success: #6fd29a;
  --material-warning: #ddb86a;
  background:
    radial-gradient(circle at 70% -10%, rgb(99 183 220 / 14%), transparent 34%),
    linear-gradient(180deg, #090b0e, #0b0e12 60%, #090b0e);
}

.recharge-plan-card,
.recharge-custom-card {
  background: linear-gradient(180deg, #171c22, #12161b);
}

.recharge-plan-card-featured {
  border-color: var(--admin-accent);
  background:
    linear-gradient(180deg, rgb(99 183 220 / 12%), rgb(99 183 220 / 4%)),
    #12161b;
}

.recharge-plan-topline b,
.recharge-custom-value {
  color: var(--admin-accent);
}

.vod-alert-success,
.generation-feedback-success {
  border-color: rgb(111 210 154 / 42%);
  background: rgb(111 210 154 / 13%);
  color: #a7e5c0;
}

.vod-alert-danger,
.generation-feedback-error {
  border-color: rgb(228 119 119 / 46%);
  background: rgb(228 119 119 / 13%);
  color: #f6c5c5;
}

.vod-check-input {
  border-color: var(--admin-border-strong);
  background: #0d1116;
}

.vod-check-input:checked,
.vod-check-input:indeterminate,
.role-menu-switch input:checked + .role-menu-switch-track,
.prompt-enabled-toggle input {
  accent-color: var(--admin-accent);
}

.role-menu-switch-track {
  background: #27303a;
}

.generation-v2-reference-tabs {
  border-bottom-color: var(--admin-border);
}

.generation-v2-reference-tabs button,
.generation-v2-template-filters button {
  border-color: var(--admin-border-strong);
  background: #111720;
  color: var(--admin-muted);
}

.generation-v2-reference-tabs button:hover,
.generation-v2-template-filters button:hover {
  border-color: rgb(99 183 220 / 62%);
  background: #14202a;
  color: var(--admin-text);
}

.generation-v2-reference-tabs button.is-active,
.generation-v2-template-filters button.is-active {
  border-color: var(--admin-accent);
  background: #dfeaf2;
  color: #0f1720;
}

.generation-v2-template-item,
.generation-v2-template-empty,
.generation-v2-asset-row,
.generation-v2-history-item,
.generation-v2-history-empty,
.generation-v2-qianchuan-table-wrap,
.generation-v2-qianchuan-meta,
.generation-v2-qianchuan-footer,
.asset-choice,
.generation-credit-note {
  border-color: var(--admin-border);
  background: #121820;
  color: var(--admin-muted);
}

.generation-v2-template-empty {
  background:
    linear-gradient(180deg, rgb(99 183 220 / 8%), rgb(99 183 220 / 3%)),
    #121820;
}

.generation-v2-qianchuan-auth-card {
  border-color: rgb(99 183 220 / 38%);
  background:
    linear-gradient(135deg, rgb(99 183 220 / 14%), rgb(221 184 106 / 7%)),
    #121820;
  color: var(--admin-text);
}

.generation-v2-qianchuan-auth-card strong {
  color: var(--admin-text);
}

.generation-v2-qianchuan-auth-card p {
  color: #b7c3cf;
}

.generation-v2-qianchuan-auth-card small {
  color: #f0c57a;
}

.generation-v2-qianchuan-auth-card .btn-primary.is-disabled {
  border-color: rgb(99 183 220 / 24%);
  background: rgb(255 255 255 / 8%);
  color: var(--admin-muted);
  box-shadow: none;
}

.generation-v2-template-item:hover,
.generation-v2-template-item.is-active,
.generation-v2-history-item:hover,
.generation-v2-history-item.is-active {
  border-color: var(--admin-accent);
  background: #151f28;
  box-shadow: 0 0 0 2px rgb(99 183 220 / 14%);
}

.generation-v2-template-copy,
.generation-v2-template-empty span,
.generation-v2-asset-row strong,
.generation-v2-history-item strong,
.generation-v2-history-empty strong,
.generation-credit-note strong,
.asset-choice h3 {
  color: var(--admin-text);
}

.generation-v2-template-media video,
.generation-v2-template-media > span,
.generation-v2-asset-row > span,
.generation-v2-history-thumb,
.generation-v2-preview-meta span {
  border-color: var(--admin-border);
  background: #202832;
  color: var(--admin-muted);
}

.generation-v2-template-media small,
.generation-v2-template-empty small,
.generation-v2-asset-row small,
.generation-v2-history-item small,
.generation-v2-history-empty span,
.asset-choice p,
.generation-credit-note {
  color: var(--admin-muted);
}

.generation-v2-template-edit {
  border-color: var(--admin-border-strong);
  background: #111720;
  color: var(--admin-accent);
}

.generation-v2-template-edit:hover {
  border-color: var(--admin-accent);
  background: var(--admin-accent-soft);
}

.model-provider-option span,
.ratio-option span,
.segmented-control .segment-button,
.generation-v2-asset-controls .segment-button {
  border-color: var(--admin-border-strong);
  background: #111720;
  color: var(--admin-muted);
}

.model-provider-option input:checked + span,
.ratio-option input:checked + span,
.segmented-control .segment-button.is-active,
.generation-v2-asset-controls .segment-button.is-active {
  border-color: var(--admin-accent);
  background: #dfeaf2;
  color: #0f1720;
}

.generation-v2-asset-controls .segmented-control {
  background: #090d11;
}

.generation-v2-upload-grid.is-dragging .generation-v2-dropzone,
.generation-v2-upload-grid.is-dragging .generation-v2-product-preview,
.product-compact-grid.is-dragging .generation-upload,
.product-compact-grid.is-dragging .generation-product-preview {
  border-color: var(--admin-accent);
  background: var(--admin-accent-soft);
}

.qianchuan-understand-status {
  border-color: rgb(99 183 220 / 42%);
  background: rgb(99 183 220 / 12%);
  color: var(--admin-accent-strong);
}

.qianchuan-understand-status[data-status="success"] {
  border-color: rgb(111 210 154 / 42%);
  background: rgb(111 210 154 / 12%);
  color: var(--admin-success);
}

.qianchuan-understand-status[data-status="failed"] {
  border-color: rgb(228 119 119 / 48%);
  background: rgb(228 119 119 / 12%);
  color: var(--admin-danger);
}

.qianchuan-understand-status button {
  background: #111720;
}

.vod-alert-info,
.generation-feedback-pending {
  border-color: rgb(99 183 220 / 38%);
  background: rgb(99 183 220 / 11%);
  color: var(--admin-accent-strong);
}

.generation-feedback strong {
  color: var(--admin-text);
}

.generation-feedback span {
  color: var(--admin-muted);
}

/* VOD and delivery console dark refinement */
.vod-console,
.vod-page-head h1,
.delivery-page-command h2,
.delivery-section-head h2,
.delivery-check-card h3,
.delivery-check-list h3,
.delivery-side-note h3,
.delivery-record-head h2,
.vod-section-head h2,
.vod-media-cell strong,
.vod-detail-list dd,
.qianchuan-media-detail-list dd {
  color: var(--admin-text);
}

.vod-page-head p:not(.eyebrow),
.delivery-page-command p,
.delivery-section-head p,
.delivery-draft-form label,
.delivery-advertiser-field small,
.delivery-material-footer,
.delivery-check-card p,
.delivery-check-list p,
.delivery-side-note p,
.delivery-record-head p,
.vod-section-head p,
.vod-media-cell p,
.vod-muted,
.vod-empty,
.vod-play-list p,
.vod-play-list span,
.vod-understanding-form label span,
.vod-detail-list dt,
.qianchuan-media-detail-list dt,
.qianchuan-media-dialog-message {
  color: var(--admin-muted);
}

.vod-panel,
.delivery-draft-dialog,
.delivery-draft-dialog-shell,
.delivery-draft-main,
.delivery-check-panel,
.delivery-material-picker,
.delivery-material-list,
.delivery-payload-field,
.delivery-check-card,
.delivery-check-list,
.delivery-side-note,
.vod-play-list div,
.vod-result,
.vod-detail-list div,
.qianchuan-media-detail-list div,
.vod-ad-audit-drawer {
  border-color: var(--admin-border);
  background: linear-gradient(180deg, #13171c, #101419);
  color: var(--admin-text);
}

.vod-tabs,
.vod-toolbar,
.vod-meta-strip,
.vod-table-wrap,
.delivery-page-command,
.vod-table th,
.vod-table td,
.vod-table-footer,
.vod-section-head,
.delivery-check-list p,
.delivery-record-head,
.qianchuan-media-dialog-header,
.vod-ad-audit-actions {
  border-color: var(--admin-border);
}

.vod-tab,
.vod-toolbar-filters input,
.vod-toolbar-filters select,
.vod-table-footer button,
.vod-table-footer select,
.vod-table-footer input,
.vod-page-button,
.vod-date-filter-labeled,
.delivery-draft-form input,
.delivery-draft-form select,
.delivery-draft-form textarea,
.vod-understanding-form input,
.vod-understanding-form textarea,
.vod-ad-audit-field input,
.vod-ad-audit-channel-grid span {
  border-color: var(--admin-border-strong);
  background: #0d1116;
  color: var(--admin-text);
}

.vod-tab.is-active,
.vod-tab:hover {
  border-color: var(--admin-accent);
  background: #14202a;
  color: var(--admin-accent-strong);
}

.vod-tab.is-active::before {
  background: var(--admin-accent);
}

.vod-toolbar-filters button,
.vod-table-footer button {
  border-color: var(--admin-accent);
  background: var(--admin-accent);
  color: #071217;
}

.vod-toolbar-actions .btn-secondary[aria-disabled="true"],
.delivery-draft-form input:disabled,
.delivery-draft-form select:disabled,
.vod-toolbar-filters input:disabled,
.vod-toolbar-filters select:disabled,
.vod-table-footer button:disabled,
.vod-table-footer select:disabled,
.vod-table-footer input:disabled {
  border-color: #26303b;
  background: #171c22;
  color: #667382;
  opacity: 1;
}

.vod-table th,
.vod-table-footer,
.vod-meta-strip,
.vod-toolbar,
.generation-v2-qianchuan-table th,
.generation-v2-qianchuan-page-nav {
  background: #101419;
  color: var(--admin-muted);
}

.generation-v2-qianchuan-table {
  background: #0f1318;
  color: var(--admin-text);
}

.generation-v2-qianchuan-table tbody tr {
  background: #11161c;
}

.generation-v2-qianchuan-table tbody tr:nth-child(even) {
  background: #0f141a;
}

.generation-v2-qianchuan-table tbody tr:has(.vod-check-input:checked) {
  background: #151f28;
}

.generation-v2-qianchuan-table td {
  color: var(--admin-text);
}

.generation-v2-qianchuan-table .vod-media-cell p,
.generation-v2-qianchuan-table .vod-store-uri,
.generation-v2-qianchuan-table .generation-v2-qianchuan-muted {
  color: var(--admin-muted);
}

.generation-v2-qianchuan-filters,
.generation-v2-qianchuan-audit-tools,
.generation-v2-qianchuan-empty {
  border-color: var(--admin-border);
  background: #121820;
  color: var(--admin-muted);
}

.generation-v2-qianchuan-space span,
.generation-v2-qianchuan-search span,
.generation-v2-qianchuan-status span,
.generation-v2-qianchuan-total,
.generation-v2-qianchuan-jump {
  color: var(--admin-muted);
}

.generation-v2-qianchuan-space select,
.generation-v2-qianchuan-status select,
.generation-v2-qianchuan-search input,
.generation-v2-qianchuan-pager select,
.generation-v2-qianchuan-jump input,
.generation-v2-qianchuan-pager button {
  border-color: var(--admin-border-strong);
  background: #0d1116;
  color: var(--admin-text);
}

.generation-v2-qianchuan-space select:disabled,
.generation-v2-qianchuan-status select:disabled,
.generation-v2-qianchuan-search input:disabled,
.generation-v2-qianchuan-pager select:disabled,
.generation-v2-qianchuan-jump input:disabled,
.generation-v2-qianchuan-pager button:disabled {
  border-color: #26303b;
  background: #171c22;
  color: #667382;
  opacity: 1;
}

.generation-v2-qianchuan-reset,
.generation-v2-qianchuan-audit-tools .btn-secondary {
  border-color: var(--admin-border-strong);
  background: #111720;
  color: var(--admin-text);
}

.generation-v2-qianchuan-reset:hover,
.generation-v2-qianchuan-audit-tools .btn-secondary:hover {
  border-color: var(--admin-accent);
  background: var(--admin-accent-soft);
  color: var(--admin-accent);
}

.generation-v2-qianchuan-footer,
.generation-v2-qianchuan-page-nav {
  border-color: var(--admin-border);
  background: #121820;
}

.generation-v2-qianchuan-page-nav .vod-page-button {
  color: var(--admin-accent);
}

.generation-v2-qianchuan-page-nav .vod-page-button:hover {
  background: var(--admin-accent-soft);
}

.generation-v2-qianchuan-page-nav .vod-page-button[aria-disabled="true"] {
  color: #667382;
}

.vod-table tbody tr:hover,
.generation-v2-qianchuan-table tbody tr:hover,
.vod-table tbody tr.is-selected,
.vod-table tbody tr.vod-status-reason-row:hover {
  background: #151f28;
}

.delivery-material-selected,
.delivery-material-option,
.delivery-sync-status,
.vod-config-pill,
.vod-ad-audit-tip {
  border-color: var(--admin-border);
  background: #121820;
  color: var(--admin-muted);
}

.delivery-material-option {
  border-bottom-color: var(--admin-border);
}

.delivery-material-option:hover,
.delivery-material-option.is-selected {
  background: #151f28;
}

.delivery-material-option.is-selected {
  box-shadow: inset 3px 0 0 var(--admin-accent);
}

.delivery-material-option strong,
.delivery-empty-materials strong,
.vod-table strong,
.vod-table-footer strong,
.generation-v2-qianchuan-page-nav strong,
.vod-ad-audit-row strong {
  color: var(--admin-text);
}

.delivery-material-option span {
  color: var(--admin-muted);
}

.delivery-material-option b,
.delivery-check-list .is-ok,
.delivery-sync-status[data-state="ok"],
.vod-config-pill.is-ok,
.vod-meta-strip .is-ok {
  border-color: rgb(111 210 154 / 34%);
  background: rgb(111 210 154 / 12%);
  color: var(--admin-success);
}

.delivery-check-list .is-warn,
.vod-meta-strip .is-warning {
  border-color: rgb(221 184 106 / 34%);
  background: rgb(221 184 106 / 12%);
  color: var(--admin-warning);
}

.delivery-empty-materials,
.vod-alert-warning {
  border-color: rgb(221 184 106 / 42%);
  background: rgb(221 184 106 / 12%);
  color: #f0cf8b;
}

.delivery-check-card.is-auth,
.delivery-sync-status[data-state="loading"] {
  border-color: rgb(99 183 220 / 36%);
  background: rgb(99 183 220 / 10%);
}

.delivery-sync-status[data-state="error"],
.vod-status-reason-row td,
.vod-status-reason,
.vod-alert-danger {
  border-color: rgb(228 119 119 / 42%);
  background: rgb(228 119 119 / 12%);
  color: #f1aaaa;
}

.delivery-sync-action {
  background: var(--admin-accent);
  color: #061018;
}

.delivery-sync-action:hover {
  background: #8bdcf8;
  color: #061018;
}

.vod-alert-success {
  border-color: rgb(111 210 154 / 42%);
  background: rgb(111 210 154 / 12%);
  color: var(--admin-success);
}

.vod-status {
  color: var(--admin-muted);
}

.vod-row-actions a,
.vod-row-actions button,
.vod-task-detail summary,
.vod-play-list a,
.vod-result a,
.delivery-payload-field summary b,
.generation-v2-qianchuan-page-nav .vod-page-button,
.generation-v2-qianchuan-pager button {
  color: var(--admin-accent-strong);
}

.vod-row-actions span,
.vod-page-button[aria-disabled="true"],
.generation-v2-qianchuan-page-nav .vod-page-button[aria-disabled="true"] {
  color: #657384;
}

.vod-row-actions .is-danger,
.vod-error-text,
.vod-status-reason summary,
.vod-status-reason p,
.vod-meta-strip .is-danger {
  color: #f0a3a3;
}

.vod-thumb,
.vod-thumb.has-image {
  background:
    linear-gradient(90deg, rgb(9 11 14 / 62%), transparent 24%, transparent 76%, rgb(9 11 14 / 62%)),
    linear-gradient(135deg, #202832, #354252);
}

.vod-result {
  border-color: rgb(99 183 220 / 28%);
  background: rgb(99 183 220 / 8%);
}

.vod-result div {
  color: var(--admin-accent-strong);
}

.vod-result p {
  color: var(--admin-text);
}

.vod-check,
.vod-row-check,
.vod-check-input {
  border-color: var(--admin-border-strong);
  background: #0d1116;
}

.vod-check.is-active,
.vod-row-check.is-active,
.vod-check-input:checked,
.vod-check-input:indeterminate {
  border-color: var(--admin-accent);
  background: var(--admin-accent);
}

.qianchuan-media-dialog,
.vod-ad-audit-dialog {
  background: #101419;
  color: var(--admin-text);
}

/* Reference template preview dialog */
.reference-template-dialog {
  width: min(1360px, calc(100vw - 72px));
  max-height: min(840px, calc(100vh - 64px));
  border: 1px solid var(--admin-border-strong);
  background: #0d1116;
  color: var(--admin-text);
  box-shadow: 0 28px 90px rgb(0 0 0 / 62%);
}

.reference-template-dialog::backdrop {
  background: rgb(3 7 12 / 76%);
  backdrop-filter: blur(8px);
}

.reference-template-dialog-shell {
  background:
    radial-gradient(circle at 78% 0%, rgb(99 183 220 / 10%), transparent 32%),
    #101419;
}

.reference-template-dialog-header {
  border-bottom-color: var(--admin-border);
  background: #111720;
  padding: 16px 18px;
}

.reference-template-dialog-header .eyebrow {
  color: var(--admin-accent);
}

.reference-template-dialog-header h2 {
  color: var(--admin-text);
  font-size: 18px;
  line-height: 1.3;
}

.reference-template-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.reference-template-dialog-actions .btn-secondary,
.reference-template-dialog-actions .btn-primary {
  min-height: 38px;
  border-radius: 7px;
  padding: 0 16px;
  font-weight: 800;
}

.reference-template-dialog-actions .btn-secondary {
  border-color: var(--admin-border-strong);
  background: #151b22;
  color: var(--admin-text);
}

.reference-template-dialog-actions .btn-primary {
  border-color: rgb(99 183 220 / 70%);
  background: linear-gradient(180deg, #76c7e5, #57afd6);
  color: #061018;
  box-shadow: 0 12px 28px rgb(99 183 220 / 22%);
}

.reference-template-dialog-actions .btn-primary:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

.reference-template-dialog-body {
  grid-template-columns: minmax(360px, 0.95fr) minmax(420px, 1.05fr);
  gap: 16px;
  background: #0b0f14;
  padding: 18px;
}

.reference-template-dialog-video,
.reference-template-dialog-prompt {
  min-height: min(650px, calc(100vh - 190px));
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  background: #121820;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 3%);
}

.reference-template-dialog-video {
  position: relative;
  align-content: stretch;
  place-items: stretch;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 3%), transparent 26%),
    #090c10;
}

.reference-template-dialog-video video {
  width: 100%;
  height: min(650px, calc(100vh - 190px));
  background: #090c10;
  object-fit: contain;
}

.reference-template-dialog-video span {
  place-self: center;
  color: var(--admin-muted);
}

.reference-template-dialog-prompt {
  padding: 18px 20px;
}

.reference-template-dialog-prompt h3 {
  color: var(--admin-accent-strong);
  font-size: 15px;
  letter-spacing: 0;
}

.reference-template-dialog-prompt p {
  margin: 0;
  padding-right: 8px;
  color: #e8eef5;
  font-size: 14px;
  line-height: 1.85;
  scrollbar-color: #465566 transparent;
}

.reference-template-dialog-prompt p::-webkit-scrollbar {
  width: 7px;
}

.reference-template-dialog-prompt p::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: #465566;
}

.vod-ad-audit-tip span {
  background: var(--admin-accent);
  color: #071217;
}

.vod-ad-audit-row,
.vod-ad-audit-row > span,
.vod-ad-audit-field > span,
.vod-ad-audit-fieldset legend,
.vod-ad-audit-tip {
  color: var(--admin-muted);
}

.vod-ad-audit-row button {
  border-color: var(--admin-border-strong);
  background: #111720;
  color: var(--admin-accent-strong);
}

.vod-ad-audit-channel-grid input:checked + span {
  border-color: var(--admin-accent);
  background: var(--admin-accent-soft);
  box-shadow: 0 0 0 2px rgb(99 183 220 / 14%);
  color: var(--admin-accent-strong);
}

.vod-ad-audit-help {
  border-color: rgb(99 183 220 / 38%);
  background: rgb(99 183 220 / 12%);
  color: var(--admin-accent-strong);
}

.app-shell .bg-white,
.app-shell article.bg-white,
.app-shell section.bg-white,
.app-shell div.bg-white {
  border-color: var(--admin-border) !important;
  background-color: #13171c !important;
  color: var(--admin-text);
}

.app-shell .bg-slate-50,
.app-shell .bg-slate-100,
.app-shell .bg-gray-50,
.app-shell .bg-gray-100,
.app-shell .bg-blue-50,
.app-shell .bg-red-50,
.app-shell .bg-green-50,
.app-shell .bg-yellow-50 {
  background-color: #121820 !important;
  color: var(--admin-muted);
}

.app-shell .border-slate-100,
.app-shell .border-slate-200,
.app-shell .border-gray-100,
.app-shell .border-gray-200,
.app-shell .border-blue-200,
.app-shell .border-red-200,
.app-shell .border-green-200,
.app-shell .border-yellow-200 {
  border-color: var(--admin-border) !important;
}

.app-shell .text-slate-900,
.app-shell .text-gray-900,
.app-shell .text-slate-800,
.app-shell .text-gray-800 {
  color: var(--admin-text) !important;
}

.app-shell .text-slate-700,
.app-shell .text-gray-700,
.app-shell .text-slate-600,
.app-shell .text-gray-600,
.app-shell .text-slate-500,
.app-shell .text-gray-500,
.app-shell .text-slate-400,
.app-shell .text-gray-400 {
  color: var(--admin-muted) !important;
}

.app-shell .text-blue-700,
.app-shell .text-blue-800 {
  color: var(--admin-accent-strong) !important;
}

.app-shell .text-red-700,
.app-shell .text-red-800 {
  color: #f1aaaa !important;
}

.app-shell .shadow,
.app-shell .shadow-sm {
  box-shadow: var(--admin-shadow) !important;
}

.app-public-main .app-content:has(.login-screen) {
  background: transparent;
}

/* Creation center */
.app-content:has(.creation-center) {
  padding: 26px 26px 34px;
}

.creation-center {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  min-height: calc(100vh - 52px);
  color: var(--admin-text);
}

.creation-center-main {
  display: grid;
  align-content: start;
  gap: 22px;
  min-width: 0;
}

.creation-prompt-heading p,
.creation-section-heading p,
.creation-template-card p,
.creation-history-card small,
.creation-settings-panel > p {
  color: var(--admin-muted);
}

.creation-quick-card svg,
.creation-settings-panel svg,
.creation-primary-action svg,
.creation-template-card svg,
.creation-generate-button svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}

.creation-prompt-panel {
  position: relative;
  overflow: visible;
  border: 1px solid rgb(99 183 220 / 38%);
  border-radius: 14px;
  background:
    radial-gradient(circle at 0% 0%, rgb(99 183 220 / 22%), transparent 34%),
    radial-gradient(circle at 100% 0%, rgb(104 122 240 / 18%), transparent 36%),
    linear-gradient(180deg, #151b22, #11161c);
  padding: 26px;
  box-shadow: 0 20px 58px rgb(0 0 0 / 30%);
}

.creation-prompt-heading h2,
.creation-section-heading h2,
.creation-settings-heading h2 {
  margin: 0;
  color: #f4f8fb;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.25;
}

.creation-prompt-heading p {
  margin: 10px 0 0;
  font-size: 14px;
}

.creation-prompt-form {
  display: grid;
  gap: 14px;
  margin-top: 20px;
}

.creation-composer {
  position: relative;
  display: grid;
  gap: 10px;
}

.creation-composer.is-polishing::before,
.creation-composer.is-polishing::after {
  position: absolute;
  z-index: 8;
  pointer-events: none;
}

.creation-composer.is-polishing::before {
  inset: 0 0 44px;
  border: 1px solid rgb(99 183 220 / 38%);
  border-radius: 10px;
  background: rgb(8 13 20 / 72%);
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 4%) inset,
    0 16px 42px rgb(0 0 0 / 24%);
  content: "";
  backdrop-filter: blur(2px);
}

.creation-composer.is-polishing::after {
  top: 50%;
  left: 50%;
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  border: 1px solid rgb(99 183 220 / 44%);
  border-radius: 999px;
  background: rgb(14 24 34 / 92%);
  color: #e8f7ff;
  content: "AI 正在生成创意...";
  font-size: 13px;
  font-weight: 900;
  padding: 0 16px;
  transform: translate(-50%, calc(-50% - 22px));
  white-space: nowrap;
}

.creation-prompt-form label {
  position: relative;
  display: block;
}

.creation-prompt-form textarea {
  width: 100%;
  min-height: 146px;
  resize: vertical;
  border: 1px solid #344250;
  border-radius: 10px;
  background: rgb(12 17 23 / 88%);
  padding: 16px 18px 38px;
  color: var(--admin-text);
  font-size: 14px;
  line-height: 1.6;
  outline: none;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 4%);
}

.creation-composer:has(.creation-attachment-list:not([hidden])) textarea {
  padding-top: 52px;
}

.creation-prompt-form textarea:focus {
  border-color: var(--admin-accent);
  box-shadow: 0 0 0 3px rgb(99 183 220 / 14%);
}

.creation-prompt-form label > span {
  position: absolute;
  right: 14px;
  bottom: 10px;
  color: #617184;
  font-size: 12px;
  font-weight: 800;
}

.creation-composer-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 0 2px;
}

.creation-tool-cluster {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.creation-icon-button {
  display: inline-grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 8px;
  background: rgb(255 255 255 / 7%);
  color: #c3cfda;
}

.creation-icon-button:hover,
.creation-icon-button[aria-expanded="true"] {
  border-color: rgb(99 183 220 / 52%);
  background: rgb(99 183 220 / 14%);
  color: var(--admin-accent-strong);
}

.creation-icon-button svg {
  width: 17px;
  height: 17px;
}

.creation-add-picker {
  position: relative;
  display: inline-flex;
}

.creation-add-menu {
  position: absolute;
  left: 0;
  top: 42px;
  z-index: 80;
  display: grid;
  width: 270px;
  gap: 4px;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 18px;
  background: rgb(37 37 37 / 98%);
  box-shadow: 0 22px 60px rgb(0 0 0 / 52%);
  color: #f4f4f5;
  padding: 10px;
  backdrop-filter: blur(16px);
}

.creation-add-menu[hidden] {
  display: none;
}

.creation-add-menu button {
  display: grid;
  min-height: 54px;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #f4f4f5;
  padding: 8px;
  text-align: left;
}

.creation-add-menu button:hover {
  background: rgb(255 255 255 / 10%);
}

.creation-add-menu button > svg {
  display: grid;
  width: 34px;
  height: 34px;
  padding: 9px;
  border-radius: 10px;
  background: rgb(255 255 255 / 8%);
  color: var(--admin-accent-strong);
}

.creation-add-menu strong,
.creation-add-menu small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.creation-add-menu strong {
  font-size: 13px;
  font-weight: 900;
}

.creation-add-menu small {
  color: #8f8f99;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  margin-top: 2px;
}

.creation-mode-trigger {
  display: inline-flex;
  min-width: 118px;
  height: 34px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgb(99 183 220 / 28%);
  border-radius: 8px;
  background: rgb(255 255 255 / 7%);
  padding: 0 10px;
  color: #dbeafe;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.creation-mode-trigger:hover,
.creation-mode-trigger[aria-expanded="true"] {
  border-color: rgb(99 183 220 / 58%);
  background: rgb(99 183 220 / 14%);
  color: var(--admin-accent-strong);
}

.creation-mode-trigger svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}

.creation-prompt-form .creation-toolbar-model-field {
  display: inline-flex;
  position: relative;
  height: 34px;
  width: min(260px, 32vw);
  min-width: 220px;
  max-width: 260px;
  align-items: center;
  border: 1px solid rgb(99 183 220 / 22%);
  border-radius: 8px;
  background: rgb(255 255 255 / 5%);
  padding: 0;
}

.creation-prompt-form .creation-toolbar-model-field select {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.creation-model-trigger {
  display: inline-flex;
  width: 100%;
  height: 100%;
  min-width: 0;
  align-items: center;
  gap: 8px;
  border: 0;
  background: transparent;
  color: #e8f2fb;
  padding: 0 10px;
  font-size: 13px;
  font-weight: 900;
}

.creation-prompt-form .creation-toolbar-model-field:hover,
.creation-prompt-form .creation-toolbar-model-field:has(.creation-model-trigger[aria-expanded="true"]) {
  border-color: rgb(99 183 220 / 58%);
  background: rgb(99 183 220 / 13%);
  box-shadow: 0 0 0 3px rgb(99 183 220 / 10%);
}

.creation-model-trigger:hover,
.creation-model-trigger[aria-expanded="true"] {
  color: var(--admin-accent-strong);
}

.creation-model-trigger span {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.creation-model-trigger svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}

.creation-model-menu {
  position: absolute;
  left: 0;
  top: 42px;
  z-index: 80;
  width: min(430px, calc(100vw - 48px));
  max-height: 360px;
  overflow: auto;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 18px;
  background: rgb(37 37 37 / 98%);
  box-shadow: 0 22px 60px rgb(0 0 0 / 52%);
  color: #f4f4f5;
  padding: 10px;
  backdrop-filter: blur(16px);
}

.creation-model-menu[hidden] {
  display: none;
}

.creation-model-menu button {
  display: grid;
  width: 100%;
  min-height: 58px;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #f4f4f5;
  padding: 8px;
  text-align: left;
}

.creation-model-menu button.is-active,
.creation-model-menu button:hover {
  background: rgb(255 255 255 / 10%);
}

.creation-model-menu button > svg {
  display: grid;
  width: 36px;
  height: 36px;
  padding: 9px;
  border-radius: 10px;
  background: rgb(255 255 255 / 8%);
}

.creation-model-menu strong,
.creation-model-menu small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.creation-model-menu strong {
  color: #f4f4f5;
  font-size: 13px;
  font-weight: 900;
}

.creation-model-menu small {
  color: #8f8f99;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  margin-top: 2px;
}

.creation-model-menu b {
  border-radius: 999px;
  background: rgb(255 255 255 / 8%);
  color: #a1a1aa;
  font-size: 11px;
  padding: 4px 7px;
}

.creation-prompt-form .creation-toolbar-model-field:focus-within {
  border-color: rgb(99 183 220 / 58%);
  box-shadow: 0 0 0 3px rgb(99 183 220 / 12%);
}

.creation-param-picker,
.creation-duration-picker {
  position: relative;
  display: inline-flex;
}

.creation-param-trigger,
.creation-duration-trigger {
  display: inline-flex;
  height: 34px;
  align-items: center;
  gap: 7px;
  border: 1px solid rgb(99 183 220 / 24%);
  border-radius: 8px;
  background: rgb(255 255 255 / 5%);
  color: #e6f2fb;
  padding: 0 9px;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.creation-param-trigger:hover,
.creation-param-trigger[aria-expanded="true"],
.creation-duration-trigger:hover,
.creation-duration-trigger[aria-expanded="true"] {
  border-color: rgb(99 183 220 / 58%);
  background: rgb(99 183 220 / 13%);
  box-shadow: 0 0 0 3px rgb(99 183 220 / 10%);
}

.creation-param-trigger svg,
.creation-duration-trigger svg {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
}

.creation-param-trigger span,
.creation-duration-trigger span {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.creation-duration-trigger {
  min-width: 72px;
  justify-content: center;
  padding: 0 8px;
}

.creation-param-menu,
.creation-duration-menu {
  position: absolute;
  left: 0;
  top: 42px;
  z-index: 80;
  display: grid;
  width: min(360px, calc(100vw - 48px));
  gap: 12px;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 18px;
  background: rgb(37 37 37 / 98%);
  box-shadow: 0 22px 60px rgb(0 0 0 / 52%);
  color: #f4f4f5;
  padding: 12px;
  backdrop-filter: blur(16px);
}

.creation-duration-menu {
  width: 252px;
}

.creation-param-menu[hidden],
.creation-duration-menu[hidden] {
  display: none;
}

.creation-param-menu section,
.creation-duration-menu section {
  display: grid;
  gap: 8px;
}

.creation-param-menu strong,
.creation-duration-menu strong {
  color: #d8e3ec;
  font-size: 12px;
  font-weight: 900;
}

.creation-audio-setting {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  border-top: 1px solid rgb(255 255 255 / 9%);
  padding-top: 12px;
}

.creation-audio-setting > div {
  display: grid;
  gap: 3px;
}

.creation-audio-setting small {
  color: #8f8f99;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
}

.creation-audio-switch {
  position: relative;
  display: inline-grid;
  grid-template-columns: 38px 32px;
  align-items: center;
  gap: 8px;
  color: #a1a1aa;
  cursor: pointer;
  user-select: none;
}

.creation-audio-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.creation-audio-switch-track {
  position: relative;
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: #4b5563;
  transition: background 0.16s ease;
}

.creation-audio-switch-track::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 3px rgb(0 0 0 / 35%);
  content: "";
  transition: transform 0.16s ease;
}

.creation-audio-switch input:checked + .creation-audio-switch-track {
  background: var(--admin-accent);
}

.creation-audio-switch input:checked + .creation-audio-switch-track::after {
  transform: translateX(16px);
}

.creation-audio-switch input:focus-visible + .creation-audio-switch-track {
  outline: 2px solid var(--admin-accent-strong);
  outline-offset: 2px;
}

.creation-audio-switch input:disabled + .creation-audio-switch-track {
  opacity: 0.45;
}

.creation-audio-switch b {
  font-size: 11px;
  font-weight: 900;
  text-align: right;
}

.creation-audio-switch:has(input:checked) b {
  color: var(--admin-accent-strong);
}

.creation-audio-switch:has(input:disabled) {
  cursor: not-allowed;
  opacity: 0.68;
}

.creation-param-options,
.creation-duration-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.creation-duration-options {
  grid-template-columns: repeat(5, 36px);
}

.creation-param-options button,
.creation-duration-options button {
  display: grid;
  place-items: center;
  min-height: 34px;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 10px;
  background: rgb(255 255 255 / 6%);
  color: #eef6ff;
  padding: 0 9px;
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}

.creation-duration-options button {
  width: 36px;
  padding: 0;
}

.creation-param-options button:hover,
.creation-param-options button.is-active,
.creation-duration-options button:hover,
.creation-duration-options button.is-active {
  border-color: rgb(99 183 220 / 60%);
  background: rgb(99 183 220 / 18%);
  color: var(--admin-accent-strong);
}

.creation-skill-picker,
.creation-mode-picker {
  position: relative;
}

.creation-skill-menu,
.creation-mode-menu {
  position: absolute;
  left: 0;
  bottom: 42px;
  z-index: 20;
  display: grid;
  width: min(320px, calc(100vw - 48px));
  max-height: 280px;
  overflow: auto;
  border: 1px solid var(--admin-border-strong);
  border-radius: 10px;
  background: #111820;
  padding: 8px;
  box-shadow: 0 18px 44px rgb(0 0 0 / 36%);
}

.creation-mode-menu {
  width: 178px;
  max-height: none;
  overflow: visible;
}

.creation-skill-menu[hidden],
.creation-mode-menu[hidden] {
  display: none;
}

.creation-skill-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  align-items: center;
  gap: 4px;
  border-radius: 8px;
}

.creation-skill-row:hover {
  background: rgb(99 183 220 / 12%);
}

.creation-skill-menu button,
.creation-mode-menu button {
  display: flex;
  min-height: 40px;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  padding: 0 10px;
  color: #dbe6ef;
  text-align: left;
  font-size: 13px;
  font-weight: 800;
}

.creation-skill-row:hover button,
.creation-skill-menu button:hover,
.creation-mode-menu button:hover,
.creation-mode-menu button.is-active {
  color: var(--admin-accent-strong);
}

.creation-mode-menu button.is-active {
  background: rgb(99 183 220 / 14%);
}

.creation-skill-menu svg,
.creation-mode-menu svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}

.creation-skill-option {
  min-width: 0;
}

.creation-skill-option span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.creation-skill-preview {
  justify-content: center;
  padding: 0;
  opacity: 0.78;
}

.creation-skill-preview:hover {
  opacity: 1;
}

.creation-skill-dialog {
  width: min(680px, calc(100vw - 32px));
  max-height: min(720px, calc(100vh - 40px));
  border: 1px solid var(--admin-border-strong);
  border-radius: 12px;
  background: #111820;
  color: #dbe6ef;
  padding: 0;
  box-shadow: 0 24px 72px rgb(0 0 0 / 45%);
}

.creation-skill-dialog::backdrop {
  background: rgb(0 0 0 / 54%);
}

.creation-skill-dialog-shell {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.creation-skill-dialog header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
}

.creation-skill-dialog header span {
  color: var(--admin-accent-strong);
  font-size: 12px;
  font-weight: 900;
}

.creation-skill-dialog h2 {
  margin: 4px 0 0;
  color: white;
  font-size: 18px;
}

.creation-skill-dialog pre {
  max-height: min(560px, calc(100vh - 180px));
  overflow: auto;
  margin: 0;
  border: 1px solid var(--admin-border-strong);
  border-radius: 8px;
  background: #0b1118;
  padding: 14px;
  color: #e8f0f7;
  white-space: pre-wrap;
  word-break: break-word;
  font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

.billing-rules-dialog {
  width: min(820px, calc(100vw - 32px));
  max-height: min(760px, calc(100vh - 40px));
  overflow: hidden;
  border: 1px solid var(--admin-border-strong);
  border-radius: 12px;
  background: #111820;
  color: #dbe6ef;
  padding: 0;
  box-shadow: 0 24px 72px rgb(0 0 0 / 45%);
}

.billing-rules-dialog::backdrop {
  background: rgb(0 0 0 / 54%);
}

.billing-rules-shell {
  display: grid;
  gap: 14px;
  max-height: min(760px, calc(100vh - 40px));
  overflow: auto;
  padding: 18px;
}

.billing-rules-shell header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
}

.billing-rules-shell h2 {
  margin: 4px 0 0;
  color: white;
  font-size: 20px;
}

.billing-rules-summary {
  margin: 0;
  color: #9caab8;
  font-size: 13px;
  line-height: 1.7;
}

.billing-rules-table {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--admin-border);
  border-radius: 10px;
}

.billing-rules-row {
  display: grid;
  grid-template-columns: minmax(160px, 1.1fr) minmax(130px, 0.7fr) minmax(220px, 1.5fr);
  gap: 14px;
  align-items: center;
  border-top: 1px solid rgb(47 59 72 / 78%);
  background: #0d131a;
  padding: 12px 14px;
}

.billing-rules-row:first-child {
  border-top: 0;
}

.billing-rules-head {
  background: #151d26;
  color: #9fb0bf;
  font-size: 12px;
  font-weight: 900;
}

.billing-rules-row strong,
.billing-rules-row b {
  display: block;
  color: #f4fbff;
  font-size: 14px;
}

.billing-rules-row small,
.billing-rules-row span,
.billing-rules-row p {
  margin: 0;
  color: #94a3b4;
  font-size: 12px;
  line-height: 1.6;
}

.billing-rules-row.is-disabled {
  opacity: 0.56;
}

.creation-selected-skill {
  max-width: min(260px, 42vw);
  overflow: hidden;
  border: 1px solid rgb(99 183 220 / 38%);
  border-radius: 999px;
  background: rgb(99 183 220 / 12%);
  padding: 6px 10px;
  color: var(--admin-accent-strong);
  font-size: 12px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: auto;
}

.creation-attachment-list {
  position: absolute;
  top: 12px;
  left: 14px;
  right: 14px;
  z-index: 2;
  display: flex;
  max-width: calc(100% - 28px);
  gap: 6px;
  overflow: visible;
  padding-bottom: 2px;
  pointer-events: auto;
  white-space: nowrap;
}

.creation-attachment-list[hidden] {
  display: none;
}

.creation-attachment-item {
  position: relative;
  display: inline-flex;
  max-width: 180px;
  min-height: 28px;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  min-width: 0;
  border: 1px solid rgb(255 255 255 / 38%);
  border-radius: 6px;
  background: rgb(255 255 255 / 7%);
  padding: 3px 4px 3px 7px;
}

.creation-attachment-item > svg {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  color: #f2f7fb;
}

.creation-attachment-item span {
  min-width: 0;
  overflow: hidden;
}

.creation-attachment-item strong,
.creation-attachment-item small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.creation-attachment-item strong {
  color: #edf5fb;
  font-size: 12px;
  font-weight: 900;
}

.creation-attachment-item small {
  display: none;
  color: #9ca8b6;
  font-size: 11px;
  font-weight: 800;
}

.creation-attachment-item button {
  display: grid;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  place-items: center;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #aab5c1;
}

.creation-attachment-item button svg {
  width: 13px;
  height: 13px;
}

.creation-attachment-item button:hover {
  background: rgb(255 255 255 / 7%);
  color: #fff;
}

.creation-attachment-preview {
  position: absolute;
  left: 0;
  top: calc(100% + 10px);
  z-index: 40;
  display: none;
  width: min(300px, calc(100vw - 64px));
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 22%);
  border-radius: 10px;
  background: #0b1016;
  box-shadow: 0 18px 42px rgb(0 0 0 / 42%);
  padding: 6px;
  pointer-events: none;
}

.creation-attachment-item:hover .creation-attachment-preview,
.creation-attachment-item:focus-within .creation-attachment-preview {
  display: grid;
  gap: 6px;
}

.creation-attachment-preview img,
.creation-attachment-preview video {
  display: block;
  width: 100%;
  max-height: 188px;
  border-radius: 7px;
  background: #f8fafc;
  object-fit: contain;
}

.creation-attachment-preview small {
  display: block;
  overflow: hidden;
  color: #d7e1ea;
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.creation-prompt-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.creation-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.creation-chip-row button {
  min-height: 34px;
  border: 1px solid var(--admin-border-strong);
  border-radius: 8px;
  background: #1a2028;
  padding: 0 12px;
  color: #cbd6e1;
  font-size: 13px;
  font-weight: 800;
}

.creation-chip-row button.is-active,
.creation-chip-row button:hover {
  border-color: rgb(99 183 220 / 60%);
  background: rgb(99 183 220 / 13%);
  color: var(--admin-accent-strong);
}

.creation-primary-action,
.creation-generate-button,
.credit-action-button {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgb(99 183 220 / 75%);
  border-radius: 8px;
  background: linear-gradient(135deg, #7457d8, #4daed8);
  padding: 0 24px;
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-weight: 900;
  text-decoration: none;
  box-shadow: 0 16px 34px rgb(77 174 216 / 18%);
}

.creation-generate-button[aria-disabled="true"],
.credit-action-button:disabled,
.credit-action-button[aria-disabled="true"],
.credit-action-button.is-disabled {
  cursor: progress;
  opacity: 0.78;
}

.generation-button-credit {
  min-height: 24px;
  border-radius: 999px;
  background: rgb(8 12 16 / 18%);
  padding: 0 8px;
  color: #f4fbff;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.generation-button-credit .credit-star {
  width: 13px;
  height: 13px;
  color: #f8fdff;
}

.creation-footer-generate-button {
  min-width: 188px;
}

.creation-polish-icon-button {
  position: relative;
  overflow: visible;
}

.creation-polish-icon-button .creation-icon-credit {
  position: absolute;
  top: -6px;
  right: -6px;
  display: grid;
  min-width: 16px;
  height: 16px;
  place-items: center;
  border: 1px solid rgb(99 183 220 / 55%);
  border-radius: 999px;
  background: #111827;
  color: #eaf7ff;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  padding: 0 4px;
}

.creation-polish-icon-button::after,
.creation-polish-icon-button::before {
  position: absolute;
  left: 50%;
  z-index: 20;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 6px);
  transition:
    opacity 0.14s ease,
    transform 0.14s ease;
}

.creation-polish-icon-button::after {
  bottom: calc(100% + 10px);
  min-width: max-content;
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 8px;
  background: rgb(11 16 22 / 96%);
  box-shadow: 0 12px 30px rgb(0 0 0 / 32%);
  color: #eff6ff;
  content: attr(data-tooltip);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  padding: 8px 10px;
  white-space: nowrap;
}

.creation-polish-icon-button::before {
  bottom: calc(100% + 4px);
  width: 8px;
  height: 8px;
  background: rgb(11 16 22 / 96%);
  border-right: 1px solid rgb(255 255 255 / 14%);
  border-bottom: 1px solid rgb(255 255 255 / 14%);
  content: "";
  transform: translate(-50%, 6px) rotate(45deg);
}

.creation-polish-icon-button:hover::after,
.creation-polish-icon-button:hover::before,
.creation-polish-icon-button:focus-visible::after,
.creation-polish-icon-button:focus-visible::before {
  opacity: 1;
  transform: translate(-50%, 0);
}

.creation-polish-icon-button:hover::before,
.creation-polish-icon-button:focus-visible::before {
  transform: translate(-50%, 0) rotate(45deg);
}

.creation-primary-action:disabled {
  cursor: progress;
  opacity: 0.72;
}

.creation-polish-feedback {
  border: 1px solid rgb(99 183 220 / 28%);
  border-radius: 8px;
  background: rgb(99 183 220 / 10%);
  padding: 10px 12px;
  color: #dceaf4;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.5;
}

.creation-polish-feedback[hidden] {
  display: none;
}

.creation-polish-feedback.is-error {
  border-color: rgb(248 113 113 / 42%);
  background: rgb(127 29 29 / 26%);
  color: #fecaca;
}

.creation-quick-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}

.creation-quick-card,
.creation-template-card,
.creation-history-card,
.creation-settings-panel {
  border: 1px solid var(--admin-border);
  background: linear-gradient(180deg, #151b22, #11161c);
  box-shadow: var(--admin-shadow);
}

.creation-quick-card {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 78px;
  border-radius: 12px;
  padding: 16px;
  color: inherit;
  text-decoration: none;
  transition:
    border-color 0.16s ease,
    background 0.16s ease,
    box-shadow 0.16s ease,
    transform 0.16s ease;
}

.creation-quick-card > span {
  display: inline-grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  border-radius: 10px;
  background: linear-gradient(135deg, rgb(99 183 220 / 24%), rgb(116 87 216 / 28%));
  color: var(--admin-accent-strong);
  transition:
    background 0.16s ease,
    color 0.16s ease,
    transform 0.16s ease;
}

.creation-quick-card:hover,
.creation-quick-card:focus-visible {
  border-color: rgb(99 183 220 / 58%);
  background:
    radial-gradient(circle at 18% 30%, rgb(99 183 220 / 14%), transparent 36%),
    linear-gradient(180deg, #18212a, #111820);
  box-shadow:
    0 18px 46px rgb(0 0 0 / 34%),
    0 0 0 3px rgb(99 183 220 / 10%);
  transform: translateY(-2px);
}

.creation-quick-card:hover > span,
.creation-quick-card:focus-visible > span {
  background: linear-gradient(135deg, rgb(99 183 220 / 36%), rgb(116 87 216 / 42%));
  color: #f2fbff;
  transform: scale(1.04);
}

.creation-quick-card:focus-visible {
  outline: none;
}

.creation-quick-card strong,
.creation-history-card strong {
  display: block;
  color: var(--admin-text);
  font-size: 15px;
  font-weight: 900;
}

.creation-quick-card small {
  display: block;
  margin-top: 5px;
  color: var(--admin-muted);
  font-size: 12px;
  font-weight: 700;
}

.creation-section {
  display: grid;
  gap: 14px;
}

.creation-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
}

.creation-section-heading h2 {
  font-size: 19px;
}

.creation-section-heading p {
  margin: 6px 0 0;
  font-size: 13px;
}

.creation-section-heading a {
  color: var(--admin-accent-strong);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

.creation-template-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.creation-template-card {
  overflow: hidden;
  border-radius: 12px;
}

.creation-template-media {
  display: block;
  position: relative;
  width: 100%;
  min-height: 236px;
  overflow: hidden;
  border: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 72% 25%, rgb(255 255 255 / 34%), transparent 18%),
    linear-gradient(135deg, #21313d, #10161d);
  color: inherit;
  cursor: pointer;
  font: inherit;
  padding: 0;
}

.creation-template-media::before {
  position: absolute;
  inset: 0;
  content: "";
  opacity: 0.9;
}

.creation-template-media img,
.creation-template-media video {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.creation-template-media.is-beauty::before {
  background:
    radial-gradient(circle at 32% 70%, rgb(255 196 210 / 76%), transparent 24%),
    radial-gradient(circle at 68% 42%, rgb(251 226 232 / 80%), transparent 18%),
    linear-gradient(135deg, #69415a, #18222b);
}

.creation-template-media.is-fashion::before {
  background:
    radial-gradient(circle at 52% 30%, rgb(202 183 246 / 70%), transparent 22%),
    linear-gradient(135deg, #2a203f, #18232b 62%, #10161d);
}

.creation-template-media.is-home::before {
  background:
    radial-gradient(circle at 62% 42%, rgb(221 232 235 / 84%), transparent 20%),
    linear-gradient(135deg, #43525d, #18232b 58%, #10161d);
}

.creation-template-media.is-drink::before {
  background:
    radial-gradient(circle at 58% 38%, rgb(250 220 115 / 72%), transparent 24%),
    radial-gradient(circle at 24% 74%, rgb(162 210 155 / 52%), transparent 22%),
    linear-gradient(135deg, #334424, #152229 62%, #10161d);
}

.creation-template-category,
.creation-template-play {
  position: absolute;
  z-index: 2;
}

.creation-template-category {
  top: 12px;
  left: 12px;
  border-radius: 999px;
  background: rgb(8 12 16 / 54%);
  padding: 6px 10px;
  color: #f4f8fb;
  font-size: 12px;
  font-weight: 900;
}

.creation-template-play {
  left: 50%;
  top: 50%;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 999px;
  background: rgb(8 12 16 / 48%);
  color: #fff;
  transform: translate(-50%, -50%);
  backdrop-filter: blur(8px);
}

.creation-template-dialog {
  width: 100vw;
  max-width: none;
  height: 100vh;
  max-height: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: #09070d;
  color: #dbe6ef;
  padding: 0;
  overflow: hidden;
}

.creation-asset-setting-dialog {
  width: min(480px, calc(100vw - 32px));
  max-width: none;
  border: 1px solid rgb(99 183 220 / 26%);
  border-radius: 16px;
  background: #111820;
  color: var(--admin-text);
  padding: 0;
  box-shadow: 0 28px 80px rgb(0 0 0 / 48%);
}

.creation-asset-setting-dialog::backdrop {
  background: rgb(0 0 0 / 56%);
  backdrop-filter: blur(2px);
}

.creation-asset-setting-shell {
  display: grid;
  gap: 0;
}

.creation-asset-setting-shell header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--admin-border);
  padding: 20px;
}

.creation-asset-setting-shell header span {
  color: var(--admin-muted);
  font-size: 12px;
  font-weight: 900;
}

.creation-asset-setting-shell h2,
.creation-asset-setting-shell p {
  margin: 0;
}

.creation-asset-setting-shell h2 {
  margin-top: 4px;
  color: var(--admin-text);
  font-size: 20px;
  font-weight: 950;
}

.creation-asset-setting-shell p {
  margin-top: 6px;
  color: var(--admin-muted);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.5;
}

.creation-asset-setting-panels {
  padding: 20px;
}

.creation-asset-setting-panel {
  display: none;
}

.creation-asset-setting-panel.is-active {
  display: grid;
  gap: 14px;
}

.creation-asset-setting-panel .segmented-control {
  width: 100%;
  background: #090d11;
}

.creation-asset-setting-panel .segment-button {
  min-height: 40px;
}

.creation-asset-setting-shell footer {
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid var(--admin-border);
  padding: 14px 20px 20px;
}

.creation-asset-setting-shell footer .btn-primary {
  min-width: 104px;
  min-height: 40px;
  border-radius: 8px;
}

.creation-template-dialog::backdrop {
  background: rgb(0 0 0 / 86%);
}

.creation-template-dialog-shell {
  display: grid;
  position: relative;
  grid-template-columns: 96px minmax(360px, 1fr) minmax(360px, 480px);
  width: 100%;
  height: 100%;
  min-height: 0;
}

.creation-template-dialog-shell::before {
  position: absolute;
  inset: -28px;
  z-index: 0;
  content: "";
  background:
    linear-gradient(90deg, rgb(7 5 11 / 86%) 0%, rgb(14 9 17 / 58%) 46%, rgb(12 8 14 / 76%) 100%),
    var(--creation-template-dialog-bg, none) center / cover no-repeat,
    radial-gradient(circle at 42% 48%, rgb(121 82 138 / 42%), transparent 34%),
    #09070d;
  filter: blur(24px) saturate(0.92);
  transform: scale(1.04);
}

.creation-template-dialog-shell::after {
  position: absolute;
  inset: 0;
  z-index: 0;
  content: "";
  background:
    linear-gradient(90deg, rgb(8 6 13 / 76%), rgb(8 6 13 / 14%) 44%, rgb(8 6 13 / 44%)),
    radial-gradient(circle at 50% 50%, transparent 0%, rgb(0 0 0 / 30%) 74%);
}

.creation-template-dialog-rail,
.creation-template-dialog-stage,
.creation-template-dialog-detail {
  position: relative;
  z-index: 1;
}

.creation-template-dialog-rail {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 12px;
  padding: 24px 0;
}

.creation-template-dialog-rail-button {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 999px;
  background: rgb(6 5 10 / 38%);
  color: #fff;
  backdrop-filter: blur(10px);
  cursor: pointer;
}

.creation-template-dialog-rail-button:disabled {
  cursor: default;
  opacity: 0.46;
}

.creation-template-dialog-thumbs {
  display: grid;
  gap: 10px;
  justify-items: center;
}

.creation-template-dialog-reference {
  display: grid;
  grid-template-columns: repeat(3, 54px);
  gap: 8px;
  align-items: start;
  justify-content: start;
  min-height: 54px;
  overflow: hidden;
  color: rgb(255 255 255 / 74%);
  font-size: 12px;
  font-weight: 900;
}

.creation-template-dialog-thumb {
  display: grid;
  place-items: center;
  width: 54px;
  height: 74px;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: 8px;
  background: rgb(255 255 255 / 8%);
  padding: 0;
  color: rgb(255 255 255 / 74%);
  font-size: 12px;
  font-weight: 900;
  opacity: 0.62;
  cursor: pointer;
  transition: opacity 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

.creation-template-dialog-thumb.is-current {
  box-shadow: 0 0 0 2px #704dff;
  opacity: 1;
}

.creation-template-dialog-thumb:not(.is-current):hover {
  opacity: 0.92;
  transform: translateY(-1px);
}

.creation-template-dialog-thumb:disabled {
  cursor: default;
}

.creation-template-dialog-thumb img,
.creation-template-dialog-reference img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.creation-template-dialog-stage {
  display: grid;
  min-width: 0;
  min-height: 0;
  place-items: center;
  padding: 7vh min(6vw, 84px);
}

.creation-template-dialog-media {
  display: grid;
  position: relative;
  width: min(520px, 100%);
  height: min(82vh, 820px);
  min-height: 520px;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 20px;
  background: #0b1118;
  color: rgb(255 255 255 / 72%);
  font-size: 13px;
  font-weight: 900;
  box-shadow: 0 30px 80px rgb(0 0 0 / 36%);
}

.creation-template-dialog-media img,
.creation-template-dialog-media video {
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  background: #05080c;
}

.creation-template-video-progress {
  position: absolute;
  right: 14px;
  bottom: 14px;
  left: 14px;
  z-index: 4;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: 999px;
  background: rgb(7 10 16 / 76%);
  box-shadow: 0 10px 28px rgb(0 0 0 / 34%);
  backdrop-filter: blur(14px);
}

.creation-template-video-progress input {
  width: 100%;
  height: 18px;
  margin: 0;
  accent-color: #67c5e8;
  cursor: pointer;
}

.creation-template-video-progress input:disabled {
  cursor: progress;
  opacity: 0.68;
}

.creation-template-video-progress input[type="range"] {
  appearance: none;
  background: transparent;
}

.creation-template-video-progress input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    #67c5e8 0%,
    #67c5e8 var(--creation-template-video-progress, 0%),
    rgb(255 255 255 / 24%) var(--creation-template-video-progress, 0%),
    rgb(255 255 255 / 24%) 100%
  );
}

.creation-template-video-progress input[type="range"]::-webkit-slider-thumb {
  width: 14px;
  height: 14px;
  margin-top: -5px;
  appearance: none;
  border: 2px solid #eef9ff;
  border-radius: 999px;
  background: #67c5e8;
  box-shadow: 0 2px 10px rgb(0 0 0 / 36%);
}

.creation-template-video-progress input[type="range"]::-moz-range-track {
  height: 4px;
  border-radius: 999px;
  background: rgb(255 255 255 / 24%);
}

.creation-template-video-progress input[type="range"]::-moz-range-progress {
  height: 4px;
  border-radius: 999px;
  background: #67c5e8;
}

.creation-template-video-progress input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 2px solid #eef9ff;
  border-radius: 999px;
  background: #67c5e8;
  box-shadow: 0 2px 10px rgb(0 0 0 / 36%);
}

.creation-template-video-progress span {
  color: rgb(244 249 252 / 92%);
  font-size: 11px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}

.creation-template-dialog-detail {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  gap: 18px;
  min-height: 0;
  overflow: hidden;
  border-left: 1px solid rgb(255 255 255 / 12%);
  padding: 32px 32px 28px;
  background: linear-gradient(180deg, rgb(12 9 16 / 74%), rgb(12 9 16 / 46%));
  backdrop-filter: blur(18px);
}

.creation-template-dialog-detail header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
}

.creation-template-dialog-detail header span {
  color: rgb(255 255 255 / 66%);
  font-size: 12px;
  font-weight: 900;
}

.creation-template-dialog-detail h2 {
  margin: 5px 0 0;
  color: #fff;
  font-size: 20px;
  font-weight: 950;
}

.creation-template-dialog-detail .creation-icon-button {
  flex: 0 0 auto;
  background: rgb(255 255 255 / 10%);
  color: #fff;
}

.creation-template-dialog-detail p {
  margin: 0;
  color: rgb(255 255 255 / 88%);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.7;
}

.creation-template-dialog-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.creation-template-dialog-meta span {
  min-height: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  color: rgb(255 255 255 / 74%);
  font-size: 13px;
  font-weight: 900;
}

.creation-template-dialog-detail section {
  display: grid;
  align-content: start;
  gap: 10px;
}

.creation-template-dialog-reference {
  width: min(100%, 178px);
}

.creation-template-dialog-reference img {
  width: 54px;
  height: 54px;
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: 8px;
  background: rgb(255 255 255 / 8%);
}

.creation-template-dialog-detail h3 {
  margin: 0;
  color: rgb(255 255 255 / 72%);
  font-size: 14px;
  font-weight: 950;
}

.creation-template-dialog-prompt-section {
  min-height: 0;
  overflow: hidden;
}

.creation-template-dialog-detail pre {
  max-height: 100%;
  overflow: auto;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  color: rgb(255 255 255 / 92%);
  white-space: pre-wrap;
  word-break: break-word;
  font: 14px/1.75 inherit;
}

.creation-template-dialog-actions {
  display: flex;
  align-self: end;
  justify-content: flex-end;
  gap: 12px;
  border-top: 1px solid rgb(255 255 255 / 10%);
  padding-top: 14px;
}

.creation-template-dialog-actions .btn-secondary {
  width: 42px;
  min-width: 42px;
  padding: 0;
  font-size: 0;
}

.creation-template-dialog-actions .btn-secondary::before {
  content: "×";
  font-size: 22px;
  line-height: 1;
}

.creation-template-dialog-actions .btn-primary {
  flex: 1;
  gap: 8px;
  min-height: 44px;
  border-radius: 8px;
}

.creation-history-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.creation-history-card {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border-radius: 10px;
  padding: 10px;
  color: inherit;
  text-decoration: none;
}

.creation-history-thumb {
  display: block;
  width: 62px;
  height: 62px;
  border-radius: 8px;
  background: linear-gradient(135deg, #263544, #5c7e93);
}

.creation-history-thumb.is-running {
  background: linear-gradient(135deg, #46365a, #4daed8);
}

.creation-history-card small {
  display: block;
  margin: 5px 0 8px;
  font-size: 12px;
}

.creation-history-status {
  display: inline-flex;
  border-radius: 999px;
  background: rgb(111 210 154 / 12%);
  padding: 4px 8px;
  color: var(--admin-success);
  font-size: 12px;
  font-weight: 900;
}

.creation-history-status.is-running {
  background: rgb(221 184 106 / 12%);
  color: var(--admin-warning);
}

.creation-settings-panel {
  position: sticky;
  top: 24px;
  display: grid;
  align-content: start;
  gap: 22px;
  min-width: 0;
  max-height: calc(100vh - 48px);
  overflow: auto;
  border-radius: 16px;
  padding: 24px;
}

.creation-settings-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.creation-settings-heading > div {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
}

.creation-settings-heading h2 {
  font-size: 18px;
}

.creation-setting-group,
.creation-setting-field {
  display: grid;
  gap: 10px;
}

.creation-setting-group > span,
.creation-setting-field > span {
  color: #aab8c8;
  font-size: 13px;
  font-weight: 900;
}

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

.creation-ratio-grid button,
.creation-setting-field select,
.creation-setting-field input {
  min-height: 42px;
  border: 1px solid var(--admin-border-strong);
  border-radius: 8px;
  background: #1a2028;
  color: #dce6ef;
  font-size: 13px;
  font-weight: 800;
}

.creation-ratio-grid button.is-active,
.creation-ratio-grid button:hover {
  border-color: var(--admin-accent);
  background: rgb(99 183 220 / 14%);
  color: var(--admin-accent-strong);
  box-shadow: 0 0 0 2px rgb(99 183 220 / 10%);
}

.creation-setting-field select,
.creation-setting-field input {
  width: 100%;
  padding: 0 12px;
  color-scheme: dark;
}

.creation-asset-controls {
  display: grid;
  gap: 0;
}

.creation-setting-disclosure {
  border-bottom: 1px solid var(--admin-border);
}

.creation-setting-disclosure:last-child {
  border-bottom: 0;
}

.creation-setting-disclosure summary {
  display: flex;
  min-height: 50px;
  align-items: center;
  justify-content: space-between;
  color: #aebccc;
  cursor: pointer;
  font-size: 14px;
  font-weight: 800;
  list-style: none;
}

.creation-setting-disclosure summary::-webkit-details-marker {
  display: none;
}

.creation-setting-disclosure summary svg {
  width: 16px;
  height: 16px;
  transition: transform 0.16s ease;
}

.creation-setting-disclosure[open] summary {
  color: var(--admin-text);
}

.creation-setting-disclosure[open] summary svg {
  transform: rotate(90deg);
}

.creation-setting-disclosure-body {
  display: grid;
  gap: 8px;
  padding: 0 0 14px;
}

.creation-setting-disclosure-body .segmented-control {
  width: min(100%, 214px);
  justify-self: end;
  background: #090d11;
}

.creation-asset-controls .segment-button {
  min-height: 34px;
}

.creation-setting-links {
  display: grid;
  border-top: 1px solid var(--admin-border);
  border-bottom: 1px solid var(--admin-border);
}

.creation-setting-links a {
  display: flex;
  min-height: 50px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--admin-border);
  color: #aebccc;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
}

.creation-setting-links a:last-child {
  border-bottom: 0;
}

.creation-generate-button {
  width: 100%;
  min-height: 54px;
  border-radius: 9px;
  margin-top: 10px;
}

.creation-settings-panel > p {
  margin: -8px 0 0;
  text-align: center;
  font-size: 13px;
  font-weight: 800;
}

.creation-image-feedback {
  border: 1px solid rgb(99 183 220 / 28%);
  border-radius: 8px;
  background: rgb(99 183 220 / 10%);
  padding: 10px 12px;
  color: #dceaf4;
  font-size: 12px;
  line-height: 1.5;
}

.creation-image-feedback[hidden] {
  display: none;
}

.creation-image-feedback.is-error {
  border-color: rgb(248 113 113 / 42%);
  background: rgb(127 29 29 / 26%);
  color: #fecaca;
}

.creation-image-feedback a {
  color: var(--admin-accent-strong);
  font-weight: 900;
}

@media (max-width: 1320px) {
  .creation-center {
    grid-template-columns: 1fr;
  }

  .creation-settings-panel {
    position: static;
    max-height: none;
  }
}

@media (max-width: 980px) {
  .app-content:has(.creation-center) {
    padding: 18px 14px 28px;
  }

  .creation-prompt-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .creation-quick-grid,
  .creation-template-grid,
  .creation-history-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .creation-template-dialog-shell {
    grid-template-columns: 1fr;
    overflow: auto;
  }

  .creation-template-dialog-rail {
    display: none;
  }

  .creation-template-dialog-stage {
    min-height: 68vh;
    padding: 24px;
  }

  .creation-template-dialog-media {
    width: min(460px, 100%);
    height: min(68vh, 680px);
    min-height: 360px;
  }

  .creation-template-dialog-detail {
    border-top: 1px solid rgb(255 255 255 / 12%);
    border-left: 0;
  }
}

@media (max-width: 640px) {
  .creation-quick-grid,
  .creation-template-grid,
  .creation-history-grid {
    grid-template-columns: 1fr;
  }

  .creation-prompt-panel,
  .creation-settings-panel {
    padding: 18px;
  }

  .creation-template-dialog-stage {
    min-height: 58vh;
    padding: 16px;
  }

  .creation-template-dialog-media {
    height: min(58vh, 560px);
    min-height: 260px;
  }

  .creation-template-dialog-detail {
    padding: 20px 16px 18px;
  }

  .creation-setting-disclosure-body .segmented-control {
    width: 100%;
  }
}

/* Task query page refinement */
.tasks-workbench {
  display: grid;
  gap: 14px;
}

.app-content:has(.tasks-workbench) {
  padding: 20px 12px 28px;
}

.tasks-workbench .task-board.task-batch-console {
  overflow: hidden;
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  background:
    radial-gradient(circle at 82% -16%, rgb(99 183 220 / 9%), transparent 34%),
    #101419;
  box-shadow: var(--admin-shadow);
}

.tasks-workbench .task-batch-toolbar {
  align-items: stretch;
  border-bottom: 1px solid var(--admin-border);
  background: #12171e;
  padding: 12px 14px;
}

.tasks-workbench .task-batch-toolbar-actions,
.tasks-workbench .task-batch-search {
  min-width: 0;
}

.tasks-workbench .task-batch-toolbar-actions .btn-secondary,
.tasks-workbench .task-batch-search .btn-primary,
.tasks-workbench .task-clear-search {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 7px;
  padding: 0 13px;
  white-space: nowrap;
}

.tasks-workbench .task-batch-toolbar-actions .btn-secondary i,
.tasks-workbench .task-batch-toolbar-actions .btn-secondary svg,
.tasks-workbench .task-batch-search .btn-primary i,
.tasks-workbench .task-batch-search .btn-primary svg {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  stroke-width: 2;
}

.tasks-workbench .task-batch-toolbar-actions .btn-secondary {
  border-color: var(--admin-border-strong);
  background: #171d24;
  color: var(--admin-text);
}

.tasks-workbench .task-batch-toolbar-actions .btn-secondary:hover {
  border-color: rgb(99 183 220 / 55%);
  background: #192633;
  color: var(--admin-accent-strong);
}

.tasks-workbench .task-bulk-ad-audit-button:disabled {
  border-color: rgb(39 49 60 / 74%);
  background: #11161c;
  color: #647384;
  cursor: not-allowed;
  opacity: 1;
}

.tasks-workbench .task-batch-search {
  flex: 1 1 760px;
  max-width: 1040px;
  gap: 8px;
}

.tasks-workbench .task-batch-search input {
  min-height: 38px;
  border-color: #31404e;
  background: #0b1016;
  color: var(--admin-text);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 3%);
}

.tasks-workbench .task-batch-search input[type="search"] {
  min-width: min(420px, 42vw);
}

.tasks-workbench .task-batch-search input[type="date"] {
  flex-basis: 150px;
  color-scheme: dark;
}

.tasks-workbench .task-date-separator {
  color: #627386;
}

.tasks-workbench .task-batch-search input:focus {
  border-color: var(--admin-accent);
  box-shadow: 0 0 0 3px rgb(99 183 220 / 14%);
}

.tasks-workbench .task-clear-search {
  border: 1px solid var(--admin-border-strong);
  background: #171d24;
  color: var(--admin-muted);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}

.tasks-workbench .task-list.task-batch-table {
  background: #0b0f14;
}

.tasks-workbench .task-batch-table-head,
.tasks-workbench .task-batch-table-row {
  min-width: 1180px;
  grid-template-columns:
    minmax(30px, 30px)
    minmax(116px, 0.8fr)
    minmax(92px, 0.58fr)
    minmax(148px, 0.95fr)
    minmax(180px, 1.12fr)
    minmax(158px, 1fr)
    minmax(92px, 0.66fr)
    minmax(128px, 0.78fr)
    minmax(190px, 0.92fr);
  gap: 10px;
}

.tasks-workbench .task-batch-table-head {
  border-bottom-color: var(--admin-border);
  background: #10161d;
  padding: 12px 14px;
  color: #8796a7;
}

.tasks-workbench .task-batch-row {
  border-bottom-color: var(--admin-border);
  background: #101419;
}

.tasks-workbench .task-batch-row .task-batch-summary {
  padding: 13px 14px;
}

.tasks-workbench .task-batch-row .task-batch-summary:hover {
  background: #151c23;
}

.tasks-workbench .task-batch-table-row > span {
  color: #d5dde6;
}

.tasks-workbench .task-batch-id strong,
.tasks-workbench .task-batch-progress strong,
.tasks-workbench .task-batch-params strong,
.tasks-workbench .task-batch-strategy strong {
  color: var(--admin-text);
}

.tasks-workbench .task-batch-id small,
.tasks-workbench .task-batch-progress small,
.tasks-workbench .task-batch-params small,
.tasks-workbench .task-batch-strategy small {
  color: var(--admin-muted);
}

.tasks-workbench .task-batch-row .task-batch-chevron {
  border-color: #334250;
  border-radius: 6px;
  background: #151b22;
  color: #9aa8b8;
}

.tasks-workbench .task-batch-row[open] .task-batch-chevron {
  border-color: rgb(99 183 220 / 70%);
  background: rgb(99 183 220 / 13%);
  color: var(--admin-accent-strong);
}

.tasks-workbench .task-batch-select-cell input {
  width: 15px;
  height: 15px;
  accent-color: var(--admin-accent);
}

.tasks-workbench .task-batch-row[open] .task-batch-body,
.tasks-workbench .task-batch-row .task-batch-detail {
  border-color: var(--admin-border);
  background: #0d1218;
}

.tasks-workbench .task-detail-panel {
  border-color: var(--admin-border);
  background: #111720;
  color: var(--admin-text);
}

.tasks-workbench .task-detail-heading {
  color: var(--admin-muted);
}

.tasks-workbench .task-detail-heading small {
  background: #182029;
  color: var(--admin-muted);
}

.tasks-workbench .task-detail-prompt p {
  color: #dce6f0;
}

.tasks-workbench .task-child-table-wrap {
  background: #0d1218;
  padding: 14px;
}

.tasks-workbench .task-child-table {
  border-color: var(--admin-border);
  background: #101419;
}

.tasks-workbench .task-child-table th {
  background: #151b22;
  color: #8897a8;
}

.tasks-workbench .task-child-table td {
  border-bottom-color: var(--admin-border);
  color: #d5dde6;
}

.tasks-workbench .task-mini-materials span,
.tasks-workbench .task-result-muted,
.tasks-workbench .task-result-ready {
  background: #182029;
  color: #aebccc;
}

.tasks-workbench .task-result-ready {
  border: 1px solid rgb(111 210 154 / 28%);
  background: rgb(111 210 154 / 12%);
  color: var(--admin-success);
}

.tasks-workbench .task-error-inline {
  border-color: rgb(255 92 105 / 72%);
  background: rgb(255 92 105 / 10%);
  color: #ffd6d9;
  box-shadow: 0 0 0 1px rgb(255 92 105 / 10%);
}

.tasks-workbench .task-error-inline p {
  color: #ffe4e6;
}

.tasks-workbench .task-error-inline small,
.tasks-workbench .task-error-inline summary {
  color: #ff9aa5;
}

.tasks-workbench .task-error-inline pre {
  border: 1px solid rgb(255 92 105 / 26%);
  background: rgb(7 10 14 / 72%);
  color: #ffd6d9;
}

.tasks-workbench .task-empty-state {
  min-height: 178px;
  border-top: 1px solid var(--admin-border);
  background:
    radial-gradient(circle at center, rgb(99 183 220 / 8%), transparent 46%),
    #0b0f14;
}

.tasks-workbench .task-empty-state strong {
  color: #dce6ef;
  font-size: 15px;
}

.tasks-workbench .task-empty-state p {
  max-width: 520px;
  color: var(--admin-muted);
}

.tasks-workbench .task-pagination {
  border-top: 1px solid var(--admin-border);
  background: #101419;
  padding: 12px 14px;
  color: var(--admin-muted);
}

.tasks-workbench .task-pagination > span {
  border: 1px solid var(--admin-border);
  border-radius: 999px;
  background: #151b22;
  padding: 8px 12px;
  color: #a8b6c6;
}

.tasks-workbench .task-pagination-actions a,
.tasks-workbench .task-pagination-actions span {
  min-width: 34px;
  min-height: 34px;
  border-color: var(--admin-border-strong);
  background: #151b22;
  color: #a8b6c6;
  box-shadow: none;
}

.tasks-workbench .task-pagination-actions a:hover {
  border-color: var(--admin-accent);
  background: var(--admin-accent-soft);
  color: var(--admin-accent-strong);
  transform: translateY(-1px);
}

.tasks-workbench .task-pagination-actions span[aria-disabled="true"] {
  background: #11161c;
  color: #667586;
}

.tasks-workbench .task-pagination-actions .task-page-current {
  border-color: var(--admin-accent);
  background: #1d5fd7;
  color: #fff;
  box-shadow: 0 10px 24px rgb(29 95 215 / 22%);
}

@media (max-width: 980px) {
  .tasks-workbench .task-batch-toolbar,
  .tasks-workbench .task-batch-search {
    align-items: stretch;
  }

  .tasks-workbench .task-batch-search {
    flex-basis: 100%;
    justify-content: flex-start;
  }

  .tasks-workbench .task-batch-search input[type="search"],
  .tasks-workbench .task-batch-search input[type="date"] {
    min-width: 0;
    flex: 1 1 180px;
  }
}

@media (max-width: 760px) {
  .app-header {
    min-height: 62px;
    padding: 0 14px;
  }

  .app-header-membership span {
    display: none;
  }

  .app-header-actions a,
  .app-header-membership {
    width: 42px;
    padding: 0;
  }

  .billing-rules-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .billing-rules-head {
    display: none;
  }

  .app-content {
    padding: 18px 14px 26px;
  }
}

.login-log-workbench {
  display: grid;
  gap: 18px;
}

.login-log-hero,
.login-log-panel {
  border: 1px solid var(--admin-border);
  background: linear-gradient(145deg, rgba(17, 24, 33, 0.96), rgba(9, 13, 18, 0.98));
  border-radius: 8px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
}

.login-log-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px;
}

.login-log-hero h1 {
  margin: 4px 0 8px;
  color: #f8fafc;
  font-size: 30px;
  line-height: 1.15;
}

.login-log-hero p:not(.eyebrow) {
  margin: 0;
  color: #9aa7b7;
  font-weight: 700;
}

.login-log-total {
  min-width: 136px;
  padding: 16px 18px;
  border: 1px solid rgba(82, 191, 234, 0.32);
  border-radius: 8px;
  background: rgba(13, 31, 42, 0.78);
  text-align: right;
}

.login-log-total span {
  display: block;
  color: #8fa0b3;
  font-weight: 800;
}

.login-log-total strong {
  display: block;
  margin-top: 4px;
  color: #f8fafc;
  font-size: 30px;
}

.login-log-panel {
  overflow: hidden;
}

.login-log-toolbar {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 180px auto auto;
  gap: 12px;
  align-items: end;
  padding: 18px;
  border-bottom: 1px solid rgba(143, 162, 184, 0.16);
}

.login-log-toolbar label {
  display: grid;
  gap: 8px;
  color: #8fa0b3;
  font-weight: 900;
}

.login-log-table {
  overflow-x: auto;
}

.login-log-row {
  display: grid;
  grid-template-columns: 170px 140px 90px 150px 130px minmax(260px, 1fr) 180px;
  gap: 14px;
  align-items: center;
  min-width: 1180px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(143, 162, 184, 0.12);
  color: #dbe7f5;
  font-weight: 800;
}

.login-log-row strong {
  color: #f8fafc;
}

.login-log-head {
  background: rgba(7, 11, 16, 0.62);
  color: #8fa0b3;
  font-size: 13px;
  text-transform: uppercase;
}

.login-log-muted {
  min-width: 0;
  overflow: hidden;
  color: #8fa0b3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.login-result-pill {
  width: max-content;
  max-width: 100%;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 13px;
  white-space: nowrap;
}

.login-result-success {
  border: 1px solid rgba(77, 214, 137, 0.48);
  background: rgba(20, 83, 45, 0.28);
  color: #74e5a0;
}

.login-result-failed {
  border: 1px solid rgba(248, 113, 113, 0.46);
  background: rgba(127, 29, 29, 0.28);
  color: #fb8b8b;
}

.login-log-empty {
  margin: 18px;
}

.login-log-pagination {
  border-top: 1px solid rgba(143, 162, 184, 0.12);
}

.model-runtime-workbench {
  display: grid;
  gap: 18px;
}

.app-content:has(.model-runtime-workbench) {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 24px 16px 34px;
}

.model-runtime-summary,
.model-runtime-stats article {
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: rgba(15, 23, 42, 0.68);
  border-radius: 8px;
  padding: 14px 16px;
}

.model-runtime-summary span,
.model-runtime-stats span {
  display: block;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 800;
}

.model-runtime-summary strong,
.model-runtime-stats strong {
  display: block;
  margin-top: 4px;
  color: #f8fafc;
  font-size: 28px;
  line-height: 1;
}

.model-runtime-agent-prompt-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 320px;
  max-width: 420px;
  margin-left: auto;
  border: 1px solid rgba(56, 189, 248, 0.24);
  border-radius: 8px;
  background: rgba(8, 47, 73, 0.18);
  padding: 12px 14px;
}

.model-runtime-switch {
  appearance: none;
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 0;
  width: 100%;
  min-width: 0;
  text-align: left;
  color: #e2e8f0;
  cursor: pointer;
}

.model-runtime-switch:disabled {
  cursor: wait;
  opacity: 0.72;
}

.model-runtime-switch-track {
  position: relative;
  width: 42px;
  height: 24px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: rgba(71, 85, 105, 0.88);
  transition: background 0.16s ease;
}

.model-runtime-switch-track::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #f8fafc;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.28);
  content: "";
  transition: transform 0.16s ease;
}

.model-runtime-switch[aria-checked="true"] .model-runtime-switch-track {
  background: rgba(14, 165, 233, 0.92);
}

.model-runtime-switch[aria-checked="true"] .model-runtime-switch-track::after {
  transform: translateX(18px);
}

.model-runtime-switch:focus-visible .model-runtime-switch-track {
  outline: 2px solid rgba(125, 211, 252, 0.75);
  outline-offset: 3px;
}

.model-runtime-switch strong,
.model-runtime-switch small {
  display: block;
}

.model-runtime-switch strong {
  color: #f8fafc;
  font-size: 13px;
  font-weight: 900;
}

.model-runtime-switch small {
  margin-top: 2px;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.model-runtime-agent-prompt-edit {
  flex: 0 0 auto;
}

.model-runtime-agent-prompt-dialog {
  width: min(860px, calc(100vw - 32px));
  border: 1px solid rgba(56, 189, 248, 0.28);
  border-radius: 8px;
  background: #0b1118;
  color: #e2e8f0;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.48);
}

.model-runtime-agent-prompt-dialog::backdrop {
  background: rgba(2, 6, 23, 0.68);
}

.model-runtime-agent-prompt-editor {
  display: grid;
  gap: 16px;
}

.model-runtime-agent-prompt-editor header,
.model-runtime-agent-prompt-editor footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.model-runtime-agent-prompt-editor h2 {
  margin: 4px 0 0;
  color: #f8fafc;
  font-size: 22px;
  line-height: 1.2;
}

.model-runtime-agent-prompt-editor textarea:not([hidden]) {
  width: 100%;
  min-height: 420px;
  resize: vertical;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 8px;
  background: rgba(2, 6, 23, 0.62);
  color: #dbeafe;
  padding: 14px;
  font: 13px/1.55 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

.model-runtime-stats {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

.model-runtime-tabs {
  display: flex;
  gap: 8px;
  padding: 18px 18px 0;
}

.model-runtime-tabs a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.62);
  color: #94a3b8;
  font-size: 13px;
  font-weight: 900;
  padding: 0 14px;
  text-decoration: none;
}

.model-runtime-tabs a:hover,
.model-runtime-tabs a.is-active {
  border-color: rgba(56, 189, 248, 0.46);
  background: rgba(8, 47, 73, 0.34);
  color: #e0f2fe;
}

.model-runtime-toolbar {
  grid-template-columns: minmax(280px, 1fr) 170px 170px auto auto auto;
}

.model-runtime-toolbar select {
  height: 40px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.78);
  color: #e2e8f0;
  padding: 0 12px;
  font-weight: 800;
}

.model-runtime-sync-button {
  white-space: nowrap;
}

.model-runtime-sync-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 18px 12px;
  border: 1px solid rgba(56, 189, 248, 0.26);
  border-radius: 8px;
  background: rgba(8, 47, 73, 0.22);
  color: #bae6fd;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 800;
}

.model-runtime-sync-result[hidden] {
  display: none;
}

.model-runtime-sync-close {
  flex: 0 0 auto;
  border: 1px solid rgba(186, 230, 253, 0.34);
  border-radius: 7px;
  background: rgba(15, 23, 42, 0.72);
  color: #e0f2fe;
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
  padding: 6px 10px;
}

.model-runtime-sync-close:hover {
  border-color: rgba(125, 211, 252, 0.7);
  color: #ffffff;
}

.model-runtime-table {
  overflow-x: auto;
}

.model-runtime-row {
  display: grid;
  grid-template-columns: 150px 210px 90px 90px 170px 210px 150px 150px minmax(260px, 1fr) 78px;
  gap: 14px;
  align-items: center;
  min-width: 1620px;
  min-height: 64px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(143, 162, 184, 0.12);
  color: #dbe7f5;
  font-weight: 800;
}

.model-runtime-row:not(.model-runtime-head):hover {
  background: rgba(56, 189, 248, 0.06);
}

.model-runtime-head {
  min-height: 44px;
  background: rgba(7, 11, 16, 0.62);
  color: #8fa0b3;
  font-size: 13px;
}

.model-runtime-row strong,
.model-runtime-row small,
.model-runtime-row code {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.model-runtime-row strong {
  color: #f8fafc;
}

.model-runtime-row small,
.model-runtime-row code,
.model-runtime-prompt {
  color: #94a3b8;
}

.model-runtime-row code {
  max-width: 100%;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 7px;
  background: rgba(2, 6, 23, 0.36);
  padding: 6px 8px;
  font-size: 12px;
}

.model-runtime-kind,
.model-runtime-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 68px;
  height: 28px;
  border-radius: 999px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 900;
}

.model-runtime-kind.is-video {
  color: #a5b4fc;
  background: rgba(99, 102, 241, 0.16);
}

.model-runtime-kind.is-image {
  color: #67e8f9;
  background: rgba(6, 182, 212, 0.14);
}

.model-runtime-status.is-submitting {
  color: #fbcfe8;
  background: rgba(236, 72, 153, 0.16);
}

.model-runtime-status.is-submitted {
  color: #fde68a;
  background: rgba(202, 138, 4, 0.18);
}

.model-runtime-status.is-queued {
  color: #93c5fd;
  background: rgba(59, 130, 246, 0.16);
}

.model-runtime-status.is-running,
.model-runtime-status.is-processing {
  color: #86efac;
  background: rgba(34, 197, 94, 0.16);
}

.model-runtime-status.is-archived {
  color: #bae6fd;
  background: rgba(14, 165, 233, 0.16);
}

.model-runtime-prompt {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.model-runtime-terminate-button {
  min-width: 64px;
}

.model-runtime-pagination {
  border-top: 1px solid rgba(143, 162, 184, 0.12);
}

@media (max-width: 900px) {
  .login-log-hero {
    align-items: stretch;
    flex-direction: column;
  }

  .login-log-total {
    text-align: left;
  }

  .model-runtime-agent-prompt-toggle {
    width: 100%;
    max-width: none;
    margin-left: 0;
  }

  .login-log-toolbar {
    grid-template-columns: 1fr;
  }

  .model-runtime-stats,
  .model-runtime-toolbar {
    grid-template-columns: 1fr;
  }
}

/* NodeList-style fullscreen project canvas */
.app-shell:has(.free-canvas-page) {
  display: block;
  background: #030306;
}

.app-shell:has(.free-canvas-page) .app-sidebar,
.app-shell:has(.free-canvas-page) .app-header,
.app-shell:has(.free-canvas-page) .app-flash-region {
  display: none;
}

.app-shell:has(.free-canvas-page) .app-main,
.app-shell:has(.free-canvas-page) .app-content {
  width: 100%;
  max-width: none;
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

.free-canvas-page {
  position: fixed;
  z-index: 1000;
  inset: 0;
  min-height: 100vh;
  overflow: hidden;
  background: #030306;
  color: #f4f4f5;
}

.free-canvas-shell {
  position: relative;
  display: block;
  width: 100vw;
  height: 100vh;
  min-height: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #030306;
  box-shadow: none;
}

.free-canvas-stage-shell {
  position: absolute;
  inset: 0;
  min-height: 0;
  overflow: auto;
  background:
    radial-gradient(circle at 50% 50%, rgb(139 92 246 / 4%), transparent 34%),
    linear-gradient(rgb(32 36 54 / 82%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(32 36 54 / 82%) 1px, transparent 1px),
    #030306;
  background-size: auto, 28px 28px, 28px 28px, auto;
}

.free-canvas-stage {
  position: relative;
  width: 2600px;
  height: 1800px;
  transform-origin: 0 0;
}

.free-canvas-topbar {
  pointer-events: none;
  position: absolute;
  z-index: 20;
  inset: 0 0 auto;
  display: flex;
  min-height: 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border: 0;
  background: transparent;
  padding: 20px;
}

.free-canvas-title-card {
  pointer-events: auto;
  display: flex;
  width: min(460px, calc(100vw - 520px));
  min-width: 390px;
  height: 54px;
  align-items: center;
  gap: 16px;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 16px;
  background: rgb(18 18 23 / 90%);
  box-shadow: 0 24px 70px rgb(0 0 0 / 48%);
  padding: 0 20px;
  backdrop-filter: blur(16px);
}

.free-canvas-logo-mark {
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  place-items: center;
  border: 1px solid rgb(240 171 252 / 25%);
  border-radius: 12px;
  background: rgb(217 70 239 / 15%);
  color: #f0abfc;
  font-size: 14px;
  font-weight: 950;
}

.free-canvas-title-divider {
  width: 1px;
  height: 24px;
  background: rgb(255 255 255 / 10%);
}

.free-canvas-title-card input {
  min-width: 0;
  flex: 1;
  border: 0;
  background: transparent;
  color: #f4f4f5;
  font-size: 14px;
  font-weight: 800;
  outline: none;
}

.free-canvas-save-state {
  flex: 0 0 auto;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 999px;
  color: #71717a;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px;
  font-weight: 900;
  padding: 4px 8px;
  text-transform: uppercase;
}

.free-canvas-save-state[data-mode="dirty"] {
  border-color: rgb(251 191 36 / 26%);
  color: #fbbf24;
}

.free-canvas-save-state[data-mode="saved"] {
  color: #a1a1aa;
}

.free-canvas-save-state[data-mode="error"] {
  border-color: rgb(248 113 113 / 30%);
  color: #fecaca;
}

.free-canvas-top-actions {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.free-canvas-pill,
.free-canvas-action-button,
.free-canvas-publish-button,
.free-canvas-round-button {
  display: inline-flex;
  height: 36px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}

.free-canvas-pill {
  background: rgb(255 255 255 / 6%);
  color: #d4d4d8;
  padding: 0 12px;
}

.free-canvas-pill svg,
.free-canvas-action-button svg,
.free-canvas-publish-button svg,
.free-canvas-round-button svg {
  width: 14px;
  height: 14px;
}

.free-canvas-action-button,
.free-canvas-round-button {
  background: rgb(255 255 255 / 6%);
  color: #f4f4f5;
}

.free-canvas-action-button {
  padding: 0 16px;
}

.free-canvas-publish-button {
  border-color: rgb(139 92 246 / 50%);
  background: #8b5cf6;
  color: #ffffff;
  padding: 0 16px;
}

.free-canvas-round-button {
  width: 36px;
}

.free-canvas-action-button:hover,
.free-canvas-round-button:hover {
  background: rgb(255 255 255 / 10%);
}

.free-canvas-publish-button:hover {
  background: #a78bfa;
}

.free-canvas-asset-panel {
  pointer-events: auto;
  position: absolute;
  z-index: 12;
  top: 88px;
  right: 0;
  display: flex;
  width: 352px;
  height: min(820px, calc(100vh - 112px));
  flex-direction: column;
  border: 1px solid rgb(255 255 255 / 12%);
  border-right: 0;
  border-radius: 20px 0 0 20px;
  background: rgb(17 17 23 / 94%);
  box-shadow: 0 24px 70px rgb(0 0 0 / 50%);
  color: #f4f4f5;
  overflow: hidden;
  padding: 20px;
  transition: transform 220ms ease, opacity 160ms ease;
  backdrop-filter: blur(16px);
}

.free-canvas-asset-panel.is-collapsed {
  transform: translateX(304px);
}

.free-canvas-panel-toggle {
  position: absolute;
  z-index: 2;
  top: 32px;
  left: -16px;
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 50%;
  background: #171720;
  color: #d4d4d8;
  box-shadow: 0 18px 48px rgb(0 0 0 / 42%);
}

.free-canvas-panel-toggle svg {
  width: 16px;
  height: 16px;
}

.free-canvas-panel-rail {
  position: absolute;
  left: 12px;
  top: 50%;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 16px;
  background: rgb(255 255 255 / 6%);
  color: #e4e4e7;
  padding: 14px 10px;
  transform: translateY(-50%);
}

.free-canvas-panel-rail span {
  writing-mode: vertical-rl;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
}

.free-canvas-asset-panel.is-collapsed .free-canvas-panel-content {
  pointer-events: none;
  opacity: 0;
}

.free-canvas-asset-panel.is-collapsed .free-canvas-panel-rail {
  display: flex;
}

.free-canvas-panel-content {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  opacity: 1;
  transition: opacity 160ms ease;
}

.free-canvas-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.free-canvas-panel-head p,
.free-canvas-node-library-head span {
  margin: 0;
  color: #f0abfc;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.free-canvas-panel-head h2 {
  margin: 7px 0 0;
  color: #ffffff;
  font-size: 22px;
  font-weight: 800;
}

.free-canvas-panel-head-actions {
  display: flex;
  gap: 8px;
}

.free-canvas-panel-head-actions button {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 50%;
  background: rgb(255 255 255 / 5%);
  color: #a1a1aa;
}

.free-canvas-panel-head-actions button.is-active {
  background: rgb(56 189 248 / 18%);
  box-shadow: 0 0 0 1px rgb(56 189 248 / 72%);
  color: #ffffff;
}

.free-canvas-panel-search {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 16px;
}

.free-canvas-panel-search[hidden] {
  display: none;
}

.free-canvas-panel-search input {
  min-width: 0;
  flex: 1;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 12px;
  background: rgb(255 255 255 / 6%);
  color: #f4f4f5;
  font-size: 13px;
  font-weight: 700;
  outline: none;
  padding: 10px 12px;
}

.free-canvas-panel-search input::placeholder {
  color: #71717a;
}

.free-canvas-panel-search button {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 50%;
  background: rgb(255 255 255 / 6%);
  color: #d4d4d8;
  font-size: 18px;
  line-height: 1;
}

.free-canvas-panel-head-actions svg,
.free-canvas-asset-grid svg {
  width: 16px;
  height: 16px;
}

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

.free-canvas-asset-grid button {
  display: grid;
  min-height: 82px;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 12px 10px;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 16px;
  background: rgb(255 255 255 / 4.5%);
  color: #d4d4d8;
  cursor: pointer;
  padding: 12px;
  text-align: left;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.free-canvas-asset-grid button.is-active,
.free-canvas-asset-grid button:hover {
  border-color: color-mix(in srgb, var(--asset-accent, #f0abfc) 58%, transparent);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--asset-accent, #f0abfc) 12%, transparent), transparent 62%),
    rgb(255 255 255 / 5.5%);
}

.free-canvas-asset-grid button:hover {
  transform: translateY(-1px);
}

.free-canvas-asset-grid strong {
  justify-self: end;
  color: #ffffff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
}

.free-canvas-asset-grid span {
  grid-column: 1 / -1;
  font-size: 12px;
  font-weight: 800;
}

.free-canvas-asset-grid svg {
  color: var(--asset-accent, #f0abfc);
}

.free-canvas-panel-assets {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.free-canvas-panel-assets-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #f4f4f5;
  font-size: 12px;
  font-weight: 900;
}

.free-canvas-panel-assets-head span {
  color: #a1a1aa;
  font-size: 10px;
  text-transform: uppercase;
}

.free-canvas-panel-asset-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-height: 260px;
  gap: 8px;
  overflow-y: auto;
  padding-right: 2px;
}

.free-canvas-panel-asset-card {
  display: grid;
  min-width: 0;
  gap: 6px;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 12px;
  background: rgb(255 255 255 / 4%);
  padding: 7px;
}

.free-canvas-panel-asset-card > button {
  min-width: 0;
  border: 0;
  background: transparent;
  color: #e4e4e7;
  cursor: pointer;
  padding: 0;
  text-align: left;
}

.free-canvas-panel-asset-card > button:last-child {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: 8px;
  background: rgb(217 70 239 / 18%);
  color: #f5d0fe;
  font-size: 10px;
  font-weight: 900;
  padding: 0 6px;
  white-space: nowrap;
}

.free-canvas-panel-asset-card > button:last-child:hover {
  background: rgb(217 70 239 / 28%);
}

.free-canvas-panel-asset-preview {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 8px;
  background: #09090b;
  margin-bottom: 6px;
}

.free-canvas-panel-asset-preview img,
.free-canvas-panel-asset-preview video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.free-canvas-panel-asset-preview audio {
  width: 100%;
  height: 100%;
}

.free-canvas-panel-asset-card strong,
.free-canvas-panel-asset-card small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.free-canvas-panel-asset-card strong {
  font-size: 10px;
  line-height: 1.25;
}

.free-canvas-panel-asset-card small,
.free-canvas-panel-asset-empty {
  color: #a1a1aa;
  font-size: 9px;
  font-weight: 800;
}

.free-canvas-panel-asset-empty {
  border: 1px solid rgb(255 255 255 / 8%);
  border-radius: 14px;
  background: rgb(255 255 255 / 3%);
  padding: 16px;
  text-align: center;
}

.free-canvas-model-card,
.free-canvas-run-card {
  display: grid;
  gap: 14px;
  margin-top: 20px;
  border: 1px solid rgb(255 255 255 / 11%);
  border-radius: 16px;
  background:
    linear-gradient(145deg, rgb(255 255 255 / 4.5%), rgb(0 0 0 / 18%)),
    rgb(8 8 12 / 72%);
  padding: 16px;
}

.free-canvas-model-card-head,
.free-canvas-run-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.free-canvas-model-card-head strong,
.free-canvas-run-card-head strong {
  color: #ffffff;
  font-size: 14px;
  font-weight: 900;
}

.free-canvas-model-card-head span {
  color: #71717a;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

.free-canvas-model-card.is-unbound .free-canvas-model-card-head span {
  color: #52525b;
}

.free-canvas-model-card button {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 999px;
  background: rgb(88 53 145 / 42%);
  color: #f5f3ff;
  cursor: pointer;
  padding: 9px 12px;
  text-align: left;
}

.free-canvas-model-card button:hover {
  background: rgb(124 58 237 / 46%);
}

.free-canvas-model-card button span {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 900;
}

.free-canvas-model-card button small {
  min-width: 0;
  overflow: hidden;
  color: #a1a1aa;
  font-size: 11px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.free-canvas-run-card-head span {
  border: 1px solid rgb(240 171 252 / 44%);
  border-radius: 999px;
  background: rgb(192 38 211 / 26%);
  color: #f5d0fe;
  font-size: 12px;
  font-weight: 900;
  padding: 4px 12px;
}

.free-canvas-run-card {
  min-height: 0;
  flex: 1;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.free-canvas-run-list {
  display: grid;
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
  gap: 12px;
}

.free-canvas-run-row {
  position: relative;
  display: grid;
  min-height: 36px;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 10px;
  overflow: hidden;
  border: 0;
  background: transparent;
  color: #d4d4d8;
  cursor: pointer;
  padding: 0 0 7px;
  text-align: left;
}

.free-canvas-run-row span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.free-canvas-run-row strong {
  overflow: hidden;
  color: #f4f4f5;
  font-size: 12px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.free-canvas-run-row small,
.free-canvas-run-row b {
  overflow: hidden;
  color: #8b8b96;
  font-size: 11px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.free-canvas-run-row b {
  justify-self: end;
}

.free-canvas-run-row::before,
.free-canvas-run-row i {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 5px;
  border-radius: 999px;
  content: "";
}

.free-canvas-run-row::before {
  background: rgb(255 255 255 / 12%);
}

.free-canvas-run-row i {
  width: var(--queue-progress, 32%);
  background: linear-gradient(90deg, #22d3ee, #a78bfa 66%, #f0abfc);
}

.free-canvas-run-row:hover strong {
  color: #ffffff;
}

.free-canvas-run-empty {
  margin: 0;
  color: #71717a;
  font-size: 12px;
  font-weight: 800;
}

.free-canvas-node-library,
.free-canvas-inspector {
  margin-top: 18px;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 16px;
  background: rgb(0 0 0 / 20%);
}

.free-canvas-node-library {
  min-height: 190px;
}

.free-canvas-node-library-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 14px 8px;
}

.free-canvas-node-library-head small {
  color: #71717a;
  font-size: 11px;
  font-weight: 800;
}

.canvas-node-palette {
  display: grid;
  gap: 4px;
  max-height: 220px;
  overflow: auto;
  padding: 0 10px 12px;
}

.canvas-palette-item {
  display: flex;
  min-height: 34px;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #3f3f46;
  cursor: grab;
  padding: 6px 8px;
}

.canvas-palette-item:hover {
  background: rgb(255 255 255 / 9%);
}

.canvas-palette-item > i {
  display: none;
}

.canvas-palette-item strong {
  color: #e4e4e7;
  font-size: 12px;
  font-weight: 800;
}

.canvas-palette-item small {
  display: none;
}

.free-canvas-inspector {
  min-height: 0;
  flex: 1;
  overflow: auto;
  background: rgb(0 0 0 / 20%);
}

.free-canvas-panel-heading {
  padding: 14px 14px 8px;
}

.free-canvas-panel-heading span {
  color: #a78bfa;
  font-size: 11px;
  font-weight: 900;
}

.free-canvas-panel-heading strong {
  color: #f4f4f5;
  font-size: 14px;
}

.free-canvas-inspector-body {
  gap: 12px;
  padding: 0 14px 14px;
}

.canvas-inspector-field input,
.canvas-inspector-field textarea,
.canvas-inspector-field select {
  border-color: rgb(255 255 255 / 10%);
  background: rgb(255 255 255 / 6%);
}

.canvas-inspector-analysis {
  display: grid;
  gap: 10px;
  border: 1px solid rgb(99 183 220 / 26%);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgb(99 183 220 / 12%), transparent 38%),
    rgb(255 255 255 / 5%);
  padding: 12px;
}

.canvas-inspector-analysis.is-error {
  border-color: rgb(248 113 113 / 30%);
  background:
    linear-gradient(180deg, rgb(248 113 113 / 12%), transparent 38%),
    rgb(255 255 255 / 5%);
}

.canvas-inspector-analysis-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.canvas-inspector-analysis-head span,
.canvas-inspector-analysis-head button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.canvas-inspector-analysis-head span {
  color: #e5faff;
  font-size: 12px;
  font-weight: 900;
}

.canvas-inspector-analysis-head svg {
  width: 14px;
  height: 14px;
}

.canvas-inspector-analysis-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
}

.canvas-inspector-analysis-head button {
  min-height: 28px;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 999px;
  background: rgb(255 255 255 / 7%);
  color: #cbd5e1;
  cursor: pointer;
  font-size: 11px;
  font-weight: 900;
  padding: 0 10px;
}

.canvas-inspector-analysis-head button:hover {
  border-color: rgb(99 183 220 / 52%);
  color: #ffffff;
}

.canvas-inspector-analysis-body {
  display: grid;
  max-height: 380px;
  gap: 10px;
  overflow: auto;
  padding-right: 2px;
}

.canvas-inspector-analysis-body p,
.canvas-inspector-analysis-body li {
  margin: 0;
  color: #d8e3ec;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.7;
}

.canvas-inspector-analysis-body strong {
  color: #f8fafc;
  font-weight: 900;
}

.canvas-inspector-analysis-body ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-left: 18px;
}

.canvas-inspector-analysis-body .is-empty {
  color: var(--admin-muted);
}

.free-canvas-analysis-report {
  position: fixed;
  z-index: 1500;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 26px;
}

.free-canvas-analysis-backdrop {
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 58%);
  backdrop-filter: blur(10px);
}

.free-canvas-analysis-dialog {
  position: relative;
  display: grid;
  width: min(1180px, calc(100vw - 52px));
  max-height: min(640px, calc(100vh - 52px));
  grid-template-columns: 176px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 24px 28px;
  overflow: hidden;
  border: 1px solid rgb(236 72 153 / 54%);
  border-radius: 28px;
  background: #050506;
  box-shadow:
    0 32px 110px rgb(0 0 0 / 70%),
    0 0 64px rgb(236 72 153 / 16%);
  color: #f8fafc;
  padding: 24px 28px 26px;
}

.free-canvas-analysis-close {
  position: absolute;
  z-index: 2;
  top: 14px;
  right: 14px;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 999px;
  background: rgb(255 255 255 / 7%);
  color: #d8e3ec;
}

.free-canvas-analysis-preview {
  display: grid;
  min-width: 0;
  align-self: start;
  gap: 9px;
  border-radius: 9px;
  background: #1e1e21;
  padding: 10px;
}

.free-canvas-analysis-media {
  position: relative;
  display: grid;
  height: 100px;
  place-items: center;
  overflow: hidden;
  border-radius: 8px;
  background: #111114;
}

.free-canvas-analysis-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.free-canvas-analysis-media > span {
  position: absolute;
  left: 10px;
  bottom: 10px;
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 8px;
  background: rgb(0 0 0 / 70%);
  color: #ffffff;
}

.free-canvas-analysis-media.is-empty {
  color: #94a3b8;
}

.free-canvas-analysis-preview strong {
  color: #ffffff;
  font-size: 13px;
  font-weight: 900;
}

.free-canvas-analysis-preview p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: #b8bec8;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.65;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
}

.free-canvas-analysis-grid {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(5, minmax(128px, 1fr));
  gap: 22px;
  overflow: auto;
  padding-right: 18px;
}

.free-canvas-analysis-section {
  display: grid;
  align-content: start;
  gap: 13px;
  min-width: 0;
}

.free-canvas-analysis-section h3 {
  margin: 0;
  color: #ffffff;
  font-size: 13px;
  font-weight: 900;
}

.free-canvas-analysis-section-items {
  display: grid;
  gap: 12px;
}

.free-canvas-analysis-section-items p {
  display: grid;
  grid-template-columns: 15px minmax(0, 1fr);
  gap: 7px;
  margin: 0;
  color: #b8bec8;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.72;
}

.free-canvas-analysis-section-items i,
.free-canvas-analysis-section-items svg {
  width: 13px;
  height: 13px;
  margin-top: 2px;
  color: #ffffff;
}

.free-canvas-analysis-section-items strong {
  color: #ffffff;
  font-weight: 900;
}

.free-canvas-analysis-cta {
  min-height: 42px;
  width: min(252px, 100%);
  grid-column: 1 / -1;
  justify-self: center;
  border: 0;
  border-radius: 999px;
  background: #f51ba4;
  color: #ffffff;
  box-shadow: 0 16px 42px rgb(245 27 164 / 28%);
  cursor: pointer;
  font-size: 14px;
  font-weight: 900;
  padding: 0 28px;
}

@media (max-width: 980px) {
  .free-canvas-analysis-dialog {
    grid-template-columns: 1fr;
    overflow: auto;
  }

  .free-canvas-analysis-preview {
    grid-template-columns: 150px minmax(0, 1fr);
    align-items: start;
  }

  .free-canvas-analysis-preview strong,
  .free-canvas-analysis-preview p {
    grid-column: 2;
  }

  .free-canvas-analysis-media {
    grid-row: 1 / span 2;
  }

  .free-canvas-analysis-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
    padding-right: 0;
  }
}

@media (max-width: 620px) {
  .free-canvas-analysis-report {
    padding: 14px;
  }

  .free-canvas-analysis-dialog {
    width: calc(100vw - 28px);
    max-height: calc(100vh - 28px);
    gap: 18px;
    border-radius: 18px;
    padding: 18px;
  }

  .free-canvas-analysis-preview,
  .free-canvas-analysis-grid {
    grid-template-columns: 1fr;
  }

  .free-canvas-analysis-preview strong,
  .free-canvas-analysis-preview p {
    grid-column: auto;
  }

  .free-canvas-analysis-media {
    grid-row: auto;
  }
}

.free-canvas-customize-modal {
  position: fixed;
  z-index: 1510;
  inset: 0;
  display: flex;
  justify-content: flex-end;
  background: rgb(0 0 0 / 44%);
  padding: 20px;
  backdrop-filter: blur(3px);
}

.free-canvas-customize-backdrop {
  position: absolute;
  inset: 0;
}

.free-canvas-customize-panel {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(520px, calc(100vw - 40px));
  height: 100%;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid rgb(217 70 239 / 72%);
  border-radius: 28px;
  background: rgb(12 12 13 / 98%);
  box-shadow:
    0 24px 86px rgb(0 0 0 / 68%),
    0 0 42px rgb(217 70 239 / 18%);
  color: #f8fafc;
  padding: 20px;
}

.free-canvas-customize-file {
  display: none;
}

.free-canvas-customize-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.free-canvas-customize-head p {
  margin: 0;
  color: #f5d0fe;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.free-canvas-customize-head h3 {
  margin: 8px 0 0;
  color: #ffffff;
  font-size: 22px;
  font-weight: 900;
}

.free-canvas-customize-head span {
  display: block;
  max-width: 360px;
  overflow: hidden;
  color: #71717a;
  font-size: 12px;
  font-weight: 700;
  margin-top: 6px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.free-canvas-customize-head button {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 999px;
  background: rgb(255 255 255 / 7%);
  color: #d8e3ec;
  cursor: pointer;
}

.free-canvas-customize-scroll {
  min-height: 0;
  overflow-y: auto;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 24px;
  background: rgb(255 255 255 / 2.5%);
  padding: 18px;
}

.free-canvas-customize-group {
  display: grid;
  gap: 14px;
  padding-bottom: 24px;
}

.free-canvas-customize-group + .free-canvas-customize-group {
  border-top: 1px solid rgb(255 255 255 / 10%);
  padding-top: 18px;
}

.free-canvas-customize-group h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #f4f4f5;
  font-size: 15px;
  font-weight: 900;
}

.free-canvas-customize-group h4 svg {
  width: 16px;
  height: 16px;
  color: #f5f5f5;
}

.free-canvas-customize-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.free-canvas-replacement-card {
  position: relative;
  display: grid;
  min-height: 164px;
  align-content: space-between;
  gap: 10px;
  border: 1px solid rgb(255 255 255 / 8%);
  border-radius: 7px;
  background: rgb(255 255 255 / 8%);
  padding: 12px;
}

.free-canvas-replacement-card.is-replaced {
  border-color: rgb(34 211 238 / 35%);
  background:
    linear-gradient(180deg, rgb(34 211 238 / 10%), transparent 54%),
    rgb(255 255 255 / 8%);
}

.free-canvas-replacement-thumb {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  overflow: hidden;
  border-radius: 8px;
  background: rgb(255 255 255 / 13%);
  color: #d4d4d8;
}

.free-canvas-replacement-thumb img,
.free-canvas-replacement-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.free-canvas-replacement-card strong {
  display: -webkit-box;
  min-height: 34px;
  overflow: hidden;
  color: #ffffff;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.free-canvas-replacement-card span {
  overflow: hidden;
  color: #a5f3fc;
  font-size: 10px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.free-canvas-replacement-card button,
.free-canvas-customize-submit button {
  min-height: 36px;
  border: 0;
  border-radius: 999px;
  background: rgb(255 255 255 / 16%);
  color: #ffffff;
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
  padding: 0 14px;
}

.free-canvas-replacement-card button:hover,
.free-canvas-customize-submit button:hover {
  background: rgb(255 255 255 / 24%);
}

.free-canvas-customize-instruction {
  border-top: 1px solid rgb(255 255 255 / 10%);
  padding-top: 18px;
}

.free-canvas-customize-instruction label {
  display: grid;
  gap: 8px;
}

.free-canvas-customize-instruction label span {
  color: #f4f4f5;
  font-size: 14px;
  font-weight: 900;
}

.free-canvas-customize-instruction textarea {
  min-height: 112px;
  resize: vertical;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 16px;
  background: rgb(0 0 0 / 22%);
  color: #f4f4f5;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.7;
  outline: none;
  padding: 12px;
}

.free-canvas-customize-instruction textarea:focus {
  border-color: rgb(217 70 239 / 58%);
}

.free-canvas-customize-instruction > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}

.free-canvas-customize-toolbar {
  position: relative;
  flex-wrap: wrap;
}

.free-canvas-customize-control {
  position: relative;
  min-width: 0;
}

.free-canvas-customize-control > button {
  display: inline-flex;
  max-width: 190px;
  min-height: 32px;
  align-items: center;
  gap: 7px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #a1a1aa;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  padding: 0 8px;
}

.free-canvas-customize-control > button:hover {
  background: rgb(255 255 255 / 7%);
  color: #ffffff;
}

.free-canvas-customize-control > button span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.free-canvas-customize-control svg {
  width: 14px;
  height: 14px;
}

.free-canvas-customize-popover {
  position: absolute;
  z-index: 5;
  bottom: 38px;
  left: 0;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 16px;
  background: rgb(18 18 20 / 98%);
  box-shadow: 0 20px 60px rgb(0 0 0 / 58%);
  padding: 10px;
}

.free-canvas-customize-popover.is-model {
  width: 360px;
  max-height: 320px;
  overflow: auto;
}

.free-canvas-customize-popover.is-model button {
  display: grid;
  width: 100%;
  min-height: 54px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #f4f4f5;
  cursor: pointer;
  padding: 8px;
  text-align: left;
}

.free-canvas-customize-popover.is-model button:hover,
.free-canvas-customize-popover.is-model button.is-active {
  background: rgb(255 255 255 / 9%);
}

.free-canvas-customize-popover.is-model strong,
.free-canvas-customize-popover.is-model small {
  display: block;
}

.free-canvas-customize-popover.is-model strong {
  font-size: 12px;
  font-weight: 900;
}

.free-canvas-customize-popover.is-model small {
  color: #8b8b96;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
  margin-top: 3px;
}

.free-canvas-customize-popover.is-model b {
  border-radius: 999px;
  background: rgb(255 255 255 / 9%);
  color: #cbd5e1;
  font-size: 10px;
  font-weight: 900;
  padding: 4px 7px;
}

.free-canvas-customize-popover.is-params {
  width: 310px;
}

.free-canvas-customize-popover.is-params p {
  margin: 7px 0 8px;
  color: #a1a1aa;
  font-size: 11px;
  font-weight: 900;
}

.free-canvas-customize-param-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin-bottom: 10px;
}

.free-canvas-customize-param-grid button {
  min-height: 32px;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 9px;
  background: rgb(255 255 255 / 5%);
  color: #cbd5e1;
  cursor: pointer;
  font-size: 11px;
  font-weight: 850;
}

.free-canvas-customize-param-grid button:hover,
.free-canvas-customize-param-grid button.is-active {
  border-color: rgb(217 70 239 / 58%);
  background: rgb(217 70 239 / 16%);
  color: #ffffff;
}

.free-canvas-customize-toggle-list {
  display: grid;
  gap: 4px;
  margin-top: 4px;
}

.free-canvas-customize-toggle-list button {
  display: flex;
  min-height: 34px;
  align-items: center;
  justify-content: space-between;
  border: 0;
  background: transparent;
  color: #d4d4d8;
  cursor: pointer;
  font-size: 12px;
  font-weight: 850;
}

.free-canvas-customize-toggle-list b {
  display: flex;
  width: 38px;
  height: 22px;
  align-items: center;
  border-radius: 999px;
  background: rgb(255 255 255 / 14%);
  padding: 2px;
}

.free-canvas-customize-toggle-list b i {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #71717a;
  transition: transform 160ms ease, background 160ms ease;
}

.free-canvas-customize-toggle-list b.is-on {
  background: #ffffff;
}

.free-canvas-customize-toggle-list b.is-on i {
  background: #252525;
  transform: translateX(16px);
}

.free-canvas-customize-submit {
  justify-content: flex-end !important;
}

.free-canvas-customize-instruction b {
  color: #a5f3fc;
  font-size: 12px;
  font-weight: 900;
}

.free-canvas-customize-submit button {
  background: #d946ef;
  box-shadow: 0 12px 32px rgb(217 70 239 / 24%);
}

.free-canvas-customize-submit button + button {
  background: rgb(255 255 255 / 12%);
  box-shadow: none;
}

@media (max-width: 620px) {
  .free-canvas-customize-modal {
    padding: 12px;
  }

  .free-canvas-customize-panel {
    width: calc(100vw - 24px);
    border-radius: 20px;
    padding: 16px;
  }

  .free-canvas-customize-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.free-canvas-floating-tools {
  pointer-events: auto;
  position: absolute;
  z-index: 14;
  top: 300px;
  right: 376px;
  display: flex;
  width: 48px;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 999px;
  background: rgb(17 17 24 / 90%);
  box-shadow: 0 24px 70px rgb(0 0 0 / 48%);
  padding: 8px;
  transition: right 220ms ease;
  backdrop-filter: blur(16px);
}

.free-canvas-asset-panel.is-collapsed ~ .free-canvas-floating-tools {
  right: 72px;
}

.free-canvas-floating-tools button {
  position: relative;
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: rgb(255 255 255 / 6%);
  color: #d4d4d8;
}

.free-canvas-floating-tools button:first-child {
  background: #d946ef;
  color: #ffffff;
}

.free-canvas-floating-tools button:hover {
  background: rgb(255 255 255 / 12%);
  color: #ffffff;
}

.free-canvas-floating-tools button.is-active {
  background: rgb(56 189 248 / 18%);
  box-shadow: 0 0 0 1px rgb(56 189 248 / 72%);
  color: #ffffff;
}

.free-canvas-floating-tools button.is-active:hover {
  background: rgb(56 189 248 / 28%);
}

.free-canvas-floating-tools button::after {
  position: absolute;
  top: 50%;
  right: calc(100% + 10px);
  z-index: 2;
  width: max-content;
  max-width: 160px;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 8px;
  background: rgb(17 17 23 / 96%);
  box-shadow: 0 12px 32px rgb(0 0 0 / 42%);
  color: #f4f4f5;
  content: attr(title);
  font-size: 12px;
  font-weight: 800;
  opacity: 0;
  padding: 8px 10px;
  pointer-events: none;
  transform: translate(6px, -50%);
  transition: opacity 120ms ease, transform 120ms ease;
  white-space: nowrap;
}

.free-canvas-floating-tools button:hover::after {
  opacity: 1;
  transform: translate(0, -50%);
}

.free-canvas-floating-tools svg {
  width: 16px;
  height: 16px;
}

.free-canvas-floating-tools span {
  color: #f4f4f5;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px;
  font-weight: 900;
}

.free-canvas-composer {
  pointer-events: auto;
  position: absolute;
  z-index: 18;
  bottom: 24px;
  left: 50%;
  display: none;
  width: min(820px, calc(100vw - 560px));
  min-height: 162px;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 22px;
  background: rgb(40 40 40 / 96%);
  box-shadow: 0 24px 70px rgb(0 0 0 / 52%);
  padding: 16px;
  transform: translateX(-50%);
  backdrop-filter: blur(16px);
}

.free-canvas-composer.is-visible {
  display: block;
}

.free-canvas-composer.is-disabled {
  opacity: 0.72;
}

.free-canvas-composer.is-expanded {
  bottom: 50%;
  width: min(980px, calc(100vw - 560px));
  height: min(640px, calc(100vh - 96px));
  min-height: 420px;
  transform: translate(-50%, 50%);
}

.free-canvas-composer-main {
  display: grid;
  min-height: 128px;
  grid-template-rows: auto minmax(54px, 1fr) auto;
}

.free-canvas-composer.is-expanded .free-canvas-composer-main {
  height: 100%;
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.canvas-composer-expand-button {
  position: absolute;
  z-index: 4;
  top: 12px;
  right: 12px;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #a1a1aa;
}

.canvas-composer-expand-button:hover {
  background: rgb(255 255 255 / 8%);
  color: #ffffff;
}

.canvas-composer-expand-button svg {
  width: 16px;
  height: 16px;
}

.canvas-composer-reference-row {
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding-right: 34px;
}

.canvas-composer-reference-list {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.canvas-composer-reference-list.is-expanded {
  max-height: 116px;
  flex-wrap: wrap;
  overflow: auto;
  padding: 2px 4px 2px 0;
}

.canvas-composer-reference-picker {
  position: relative;
  display: inline-grid;
}

.canvas-composer-reference-wrap {
  position: relative;
  display: inline-grid;
  cursor: grab;
}

.canvas-composer-reference-wrap:active {
  cursor: grabbing;
}

.canvas-composer-reference-wrap.is-dragging {
  opacity: 0.46;
}

.canvas-composer-reference-wrap.is-drop-target .canvas-composer-reference {
  border-color: rgb(34 211 238 / 72%);
  box-shadow: 0 0 0 2px rgb(34 211 238 / 22%);
}

.canvas-composer-reference,
.canvas-composer-add-reference,
.canvas-composer-reference-more {
  position: relative;
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 12px;
  background: rgb(255 255 255 / 6%);
  color: #a1a1aa;
  overflow: hidden;
}

.canvas-composer-reference-more {
  border-style: dashed;
  background: rgb(255 255 255 / 8%);
  color: #f4f4f5;
}

.canvas-composer-reference-more:hover {
  border-color: rgb(34 211 238 / 48%);
  background: rgb(34 211 238 / 12%);
}

.canvas-composer-reference-more strong,
.canvas-composer-reference-more small {
  display: block;
  line-height: 1;
}

.canvas-composer-reference-more strong {
  font-size: 14px;
  font-weight: 950;
}

.canvas-composer-reference-more small {
  color: #a1a1aa;
  font-size: 10px;
  font-weight: 850;
}

.canvas-composer-reference img,
.canvas-composer-reference video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.canvas-composer-reference > i {
  position: absolute;
  color: #ffffff;
  filter: drop-shadow(0 2px 6px rgb(0 0 0 / 60%));
}

.canvas-composer-node-ref {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  background: rgb(255 255 255 / 7%);
}

.canvas-composer-reference b {
  position: absolute;
  top: 2px;
  left: 2px;
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 50%;
  background: rgb(16 16 20 / 88%);
  color: #ffffff;
  font-size: 10px;
}

.canvas-composer-reference em {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgb(0 0 0 / 58%);
  color: #ffffff;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.canvas-composer-reference-remove {
  display: grid;
  position: absolute;
  top: -5px;
  right: -5px;
  z-index: 3;
  width: 16px;
  height: 16px;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 50%;
  background: #19191f;
  color: #d4d4d8;
}

.canvas-composer-reference-remove svg {
  width: 10px;
  height: 10px;
  stroke-width: 3;
}

.canvas-composer-reference-menu {
  position: absolute;
  left: 0;
  bottom: calc(100% + 10px);
  z-index: 30;
  display: grid;
  width: 290px;
  max-height: 360px;
  overflow: auto;
  gap: 6px;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 14px;
  background: rgb(31 31 34 / 98%);
  box-shadow: 0 20px 52px rgb(0 0 0 / 46%);
  padding: 10px;
  backdrop-filter: blur(16px);
}

.canvas-composer-reference-menu-action,
.canvas-composer-reference-asset {
  display: grid;
  width: 100%;
  min-height: 48px;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #f4f4f5;
  padding: 7px;
  text-align: left;
}

.canvas-composer-reference-menu-action:hover,
.canvas-composer-reference-asset:hover {
  background: rgb(255 255 255 / 9%);
}

.canvas-composer-reference-menu-action > i,
.canvas-composer-reference-asset > span,
.canvas-composer-reference-asset > img {
  width: 36px;
  height: 36px;
  border-radius: 9px;
}

.canvas-composer-reference-menu-action > i,
.canvas-composer-reference-asset > span {
  display: grid;
  place-items: center;
  background: rgb(99 183 220 / 14%);
  color: #9ee8ff;
}

.canvas-composer-reference-asset > img {
  object-fit: cover;
}

.canvas-composer-reference-asset b,
.canvas-composer-reference-asset small {
  grid-column: 2;
}

.canvas-composer-reference-menu-action strong,
.canvas-composer-reference-menu-action small,
.canvas-composer-reference-asset b,
.canvas-composer-reference-asset small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.canvas-composer-reference-menu-action strong,
.canvas-composer-reference-asset b {
  color: #f8fafc;
  font-size: 12px;
  font-weight: 900;
}

.canvas-composer-reference-menu-action small,
.canvas-composer-reference-asset small,
.canvas-composer-reference-menu-label,
.canvas-composer-reference-empty {
  color: #a1a1aa;
  font-size: 11px;
  font-weight: 800;
}

.canvas-composer-reference-menu-label {
  padding: 6px 4px 2px;
  text-transform: uppercase;
}

.canvas-composer-reference-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 10px;
  background: rgb(255 255 255 / 5%);
  padding: 4px;
}

.canvas-composer-reference-tabs button {
  min-width: 0;
  min-height: 28px;
  overflow: hidden;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #a1a1aa;
  font-size: 11px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.canvas-composer-reference-tabs button:hover,
.canvas-composer-reference-tabs button.is-active {
  background: rgb(99 183 220 / 18%);
  color: #e6fbff;
}

.canvas-composer-reference-empty {
  border: 1px dashed rgb(255 255 255 / 12%);
  border-radius: 10px;
  padding: 12px;
  text-align: center;
}

.canvas-composer-reference-hint {
  border: 1px solid rgb(34 211 238 / 24%);
  border-radius: 999px;
  background: rgb(34 211 238 / 10%);
  color: #cffafe;
  font-size: 11px;
  font-weight: 800;
  padding: 5px 9px;
}

.canvas-composer-input-row {
  position: relative;
  display: flex;
  min-height: 56px;
  align-items: flex-start;
  gap: 8px;
}

.free-canvas-composer.is-expanded .canvas-composer-input-row {
  min-height: 0;
}

.canvas-composer-setting-chip {
  position: relative;
  display: inline-flex;
  min-height: 28px;
  max-width: 220px;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  border: 1px solid rgb(240 171 252 / 35%);
  border-radius: 8px;
  background: rgb(217 70 239 / 12%);
  color: #ffffff;
  font-size: 12px;
  font-weight: 850;
  padding: 0 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.canvas-composer-setting-chip button {
  display: grid;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #a1a1aa;
}

.free-canvas-composer textarea {
  min-width: 0;
  flex: 1;
  height: 58px;
  resize: none;
  border: 0;
  background: transparent;
  color: #f4f4f5;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.7;
  outline: none;
}

.free-canvas-composer.is-expanded textarea {
  height: 100%;
}

.free-canvas-composer textarea::placeholder {
  color: #71717a;
}

.canvas-composer-mention-menu {
  position: absolute;
  z-index: 75;
  bottom: calc(100% + 8px);
  left: 0;
  display: grid;
  width: min(320px, 100%);
  max-height: 238px;
  overflow: auto;
  border: 1px solid rgb(34 211 238 / 28%);
  border-radius: 16px;
  background: rgb(24 24 27 / 98%);
  box-shadow: 0 22px 60px rgb(0 0 0 / 55%);
  padding: 8px;
  backdrop-filter: blur(16px);
}

.canvas-composer-mention-menu[hidden] {
  display: none;
}

.canvas-composer-mention-label {
  padding: 5px 8px 7px;
  color: #a1a1aa;
  font-size: 12px;
  font-weight: 900;
}

.canvas-composer-mention-menu button {
  display: grid;
  width: 100%;
  min-height: 56px;
  grid-template-columns: 44px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 10px;
  align-items: center;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #f4f4f5;
  padding: 6px;
  text-align: left;
}

.canvas-composer-mention-menu button:hover {
  background: rgb(255 255 255 / 9%);
}

.canvas-composer-mention-menu img,
.canvas-composer-mention-menu button > span {
  grid-row: 1 / span 2;
  width: 44px;
  height: 44px;
  border-radius: 10px;
}

.canvas-composer-mention-menu img {
  object-fit: cover;
}

.canvas-composer-mention-menu button > span {
  display: grid;
  place-items: center;
  background: rgb(34 211 238 / 12%);
  color: #67e8f9;
  font-size: 13px;
  font-weight: 900;
}

.canvas-composer-mention-menu b,
.canvas-composer-mention-menu small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.canvas-composer-mention-menu b {
  color: #ffffff;
  font-size: 13px;
  font-weight: 900;
}

.canvas-composer-mention-menu small {
  color: #a1a1aa;
  font-size: 12px;
  font-weight: 750;
}

.canvas-composer-toolbar {
  display: flex;
  min-width: 0;
  height: 36px;
  align-items: center;
  gap: 10px;
  color: #e4e4e7;
  font-size: 12px;
}

.canvas-composer-control {
  position: relative;
  min-width: 0;
}

.canvas-composer-pill,
.canvas-composer-icon-button {
  display: inline-flex;
  height: 32px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #e4e4e7;
  font-size: 12px;
  font-weight: 800;
  padding: 0 8px;
}

.canvas-composer-pill {
  max-width: 230px;
}

.canvas-composer-pill span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.canvas-composer-pill:hover,
.canvas-composer-pill[aria-expanded="true"],
.canvas-composer-icon-button:hover {
  background: rgb(255 255 255 / 7%);
}

.canvas-composer-pill:disabled,
.canvas-composer-icon-button:disabled,
.free-canvas-composer-send:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.canvas-composer-icon-button {
  position: relative;
  width: 32px;
  padding: 0;
}

.canvas-composer-icon-button b {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #67e8f9;
}

.canvas-composer-divider {
  width: 1px;
  height: 20px;
  background: rgb(255 255 255 / 12%);
}

.canvas-composer-credit {
  display: inline-flex;
  height: 32px;
  align-items: center;
  gap: 4px;
  color: #e4e4e7;
  font-size: 12px;
  font-weight: 850;
}

.canvas-composer-submit-group {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-left: auto;
}

.canvas-composer-submit-group span,
.canvas-composer-submit-group small {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #a1a1aa;
  font-size: 12px;
  font-weight: 850;
}

.free-canvas-composer-send {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: #ffffff !important;
  color: #111111 !important;
  box-shadow: 0 12px 28px rgb(0 0 0 / 32%);
}

.canvas-composer-popover {
  position: absolute;
  z-index: 60;
  bottom: 42px;
  left: 0;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 18px;
  background: rgb(37 37 37 / 98%);
  box-shadow: 0 22px 60px rgb(0 0 0 / 52%);
  color: #f4f4f5;
  padding: 10px;
  backdrop-filter: blur(16px);
}

.canvas-composer-popover.is-model {
  width: 430px;
  max-height: 360px;
  overflow: auto;
}

.canvas-composer-popover.is-model button {
  display: grid;
  width: 100%;
  min-height: 58px;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #f4f4f5;
  padding: 8px;
  text-align: left;
}

.canvas-composer-popover.is-model button.is-active,
.canvas-composer-popover.is-model button:hover {
  background: rgb(255 255 255 / 10%);
}

.canvas-composer-popover.is-model button > i {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 10px;
  background: rgb(255 255 255 / 8%);
}

.canvas-composer-popover.is-model strong,
.canvas-composer-popover.is-model small {
  display: block;
}

.canvas-composer-popover.is-model small {
  color: #71717a;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  margin-top: 2px;
}

.canvas-composer-popover.is-model b {
  border-radius: 999px;
  background: rgb(255 255 255 / 8%);
  color: #a1a1aa;
  font-size: 11px;
  padding: 4px 7px;
}

.canvas-composer-popover.is-lovart-mode {
  width: 180px;
}

.canvas-composer-popover.is-lovart-mode button {
  display: grid;
  width: 100%;
  height: 38px;
  grid-template-columns: 24px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #f4f4f5;
  font-size: 12px;
  font-weight: 850;
  padding: 0 9px;
  text-align: left;
}

.canvas-composer-popover.is-lovart-mode button.is-active,
.canvas-composer-popover.is-lovart-mode button:hover {
  background: rgb(255 255 255 / 10%);
}

.canvas-composer-popover.is-lovart-mode button > i,
.canvas-composer-popover.is-lovart-mode button b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #a78bfa;
}

.canvas-composer-popover.is-params {
  width: 370px;
  padding: 16px;
}

.canvas-composer-popover.is-params p,
.canvas-composer-popover.is-presets p {
  margin: 0 0 9px;
  color: #a1a1aa;
  font-size: 12px;
  font-weight: 900;
}

.canvas-composer-button-grid,
.canvas-composer-ratio-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.canvas-composer-ratio-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.canvas-composer-ratio-grid.is-video {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.canvas-composer-button-grid button,
.canvas-composer-ratio-grid button,
.canvas-composer-segmented button {
  min-width: 0;
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 10px;
  background: rgb(255 255 255 / 4%);
  color: #a1a1aa;
  font-size: 12px;
  font-weight: 800;
}

.canvas-composer-button-grid button {
  height: 34px;
}

.canvas-composer-ratio-grid button {
  display: flex;
  height: 58px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.canvas-composer-button-grid button:hover,
.canvas-composer-ratio-grid button:hover,
.canvas-composer-segmented button:hover,
.canvas-composer-button-grid button.is-active,
.canvas-composer-ratio-grid button.is-active,
.canvas-composer-segmented button.is-active {
  border-color: rgb(255 255 255 / 72%);
  background: rgb(255 255 255 / 12%);
  color: #ffffff;
}

.canvas-ratio-glyph {
  display: block;
  border: 1px solid currentColor;
  border-radius: 3px;
}

.canvas-param-auto {
  font-size: 12px;
}

.canvas-composer-segmented {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-radius: 12px;
  background: rgb(255 255 255 / 5%);
  margin-bottom: 16px;
  padding: 4px;
}

.canvas-composer-segmented button {
  height: 32px;
  border: 0;
  border-radius: 9px;
}

.canvas-composer-toggle-list {
  display: grid;
  gap: 4px;
}

.canvas-composer-toggle-list button {
  display: flex;
  width: 100%;
  height: 38px;
  align-items: center;
  justify-content: space-between;
  border: 0;
  background: transparent;
  color: #d4d4d8;
  font-size: 13px;
  font-weight: 850;
}

.canvas-composer-toggle-list b {
  display: flex;
  width: 38px;
  height: 22px;
  align-items: center;
  border-radius: 999px;
  background: rgb(255 255 255 / 14%);
  padding: 2px;
}

.canvas-composer-toggle-list b i {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #71717a;
  transition: transform 160ms ease, background 160ms ease;
}

.canvas-composer-toggle-list b.is-on {
  background: #ffffff;
}

.canvas-composer-toggle-list b.is-on i {
  background: #252525;
  transform: translateX(16px);
}

.canvas-composer-popover.is-presets {
  left: 50%;
  width: 260px;
  transform: translateX(-50%);
  padding: 14px;
}

.canvas-composer-popover.is-presets button {
  display: flex;
  width: 100%;
  height: 42px;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #f4f4f5;
  font-size: 13px;
  font-weight: 850;
  padding: 0 10px;
  text-align: left;
}

.canvas-composer-popover.is-presets button:hover {
  background: rgb(255 255 255 / 8%);
}

.free-canvas-context-menu {
  pointer-events: auto;
  position: fixed;
  z-index: 1100;
  width: 246px;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 24px;
  background: rgb(21 21 28 / 95%);
  box-shadow: 0 24px 70px rgb(0 0 0 / 55%);
  color: #f4f4f5;
  padding: 12px;
  backdrop-filter: blur(16px);
}

.free-canvas-context-menu p {
  margin: 0;
  padding: 0 8px 8px;
  color: #71717a;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.free-canvas-context-menu button {
  display: flex;
  width: 100%;
  height: 44px;
  align-items: center;
  gap: 12px;
  border: 0;
  border-radius: 16px;
  background: rgb(255 255 255 / 6%);
  color: #f4f4f5;
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 8px;
  padding: 0 12px;
  text-align: left;
}

.free-canvas-context-menu button:hover {
  background: rgb(255 255 255 / 9%);
}

.free-canvas-context-menu.is-reference-menu {
  width: 196px;
  border-radius: 18px;
  padding: 12px;
}

.free-canvas-context-menu.is-reference-menu p {
  padding: 2px 10px 10px;
  color: #b5b5c3;
  font-family: inherit;
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
}

.free-canvas-context-menu.is-reference-menu button {
  height: 40px;
  margin-bottom: 0;
  border-radius: 12px;
  background: transparent;
  font-size: 15px;
  font-weight: 800;
}

.free-canvas-context-menu.is-reference-menu button:hover {
  background: rgb(255 255 255 / 8%);
}

.canvas-flow-node {
  border-color: color-mix(in srgb, var(--node-accent), #3b3b54 66%);
  border-radius: 16px;
  background: #111118;
  box-shadow:
    0 18px 54px rgb(0 0 0 / 42%),
    inset 0 1px 0 rgb(255 255 255 / 6%);
}

.canvas-edge-path {
  stroke: #3b3b54;
}

.free-canvas-stage-shell.is-connections-hidden .canvas-edge-path {
  display: none;
}

.free-canvas-minimap {
  pointer-events: none;
  position: absolute;
  right: 20px;
  bottom: 20px;
  z-index: 9;
  display: none;
  overflow: hidden;
  width: 180px;
  height: 120px;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 10px;
  background: rgb(17 17 24 / 90%);
  box-shadow: 0 18px 50px rgb(0 0 0 / 45%);
}

.free-canvas-minimap.is-visible {
  display: block;
}

.free-canvas-minimap-canvas {
  position: relative;
  width: 100%;
  height: 100%;
}

.free-canvas-minimap-node {
  position: absolute;
  min-width: 4px;
  min-height: 3px;
  border-radius: 2px;
  background: rgb(167 139 250 / 88%);
}

.free-canvas-minimap-node.is-selected {
  background: rgb(240 171 252 / 96%);
  box-shadow: 0 0 0 1px rgb(240 171 252 / 70%);
}

.free-canvas-minimap-viewport {
  position: absolute;
  border: 1px solid rgb(255 255 255 / 72%);
  border-radius: 2px;
  background: rgb(255 255 255 / 8%);
  box-shadow: 0 0 0 1px rgb(0 0 0 / 28%);
}

@media (max-width: 980px) {
  .free-canvas-title-card,
  .free-canvas-composer {
    width: calc(100vw - 32px);
    min-width: 0;
  }

  .canvas-composer-toolbar {
    height: auto;
    flex-wrap: wrap;
  }

  .canvas-composer-popover.is-model,
  .canvas-composer-popover.is-params,
  .canvas-composer-popover.is-lovart-mode {
    width: min(370px, calc(100vw - 48px));
  }

  .free-canvas-topbar {
    align-items: stretch;
    flex-direction: column;
  }

  .free-canvas-top-actions {
    flex-wrap: wrap;
  }

  .free-canvas-asset-panel {
    top: 132px;
    height: calc(100vh - 156px);
  }

  .free-canvas-floating-tools {
    right: 72px;
  }
}

/* NodeList node fidelity and stable pan/zoom behavior */
.free-canvas-stage-shell {
  --canvas-grid-size: 28px;
  --canvas-grid-x: 72px;
  --canvas-grid-y: 84px;
  overflow: hidden;
  cursor: crosshair;
  background:
    radial-gradient(circle at 50% 50%, rgb(139 92 246 / 4%), transparent 34%),
    radial-gradient(circle, rgb(55 65 104 / 70%) 1px, transparent 1.2px),
    #030306;
  background-position:
    0 0,
    var(--canvas-grid-x) var(--canvas-grid-y),
    0 0;
  background-size:
    auto,
    var(--canvas-grid-size) var(--canvas-grid-size),
    auto;
}

.free-canvas-stage-shell.is-space-panning,
.free-canvas-stage-shell.is-panning {
  cursor: grabbing;
}

.canvas-selection-box {
  pointer-events: none;
  position: absolute;
  z-index: 18;
  border: 1px solid rgb(103 232 249 / 86%);
  border-radius: 6px;
  background: rgb(34 211 238 / 12%);
  box-shadow:
    0 0 0 1px rgb(34 211 238 / 18%),
    0 12px 28px rgb(34 211 238 / 12%);
}

.free-canvas-stage-shell.is-file-drag-over {
  cursor: copy;
  background:
    linear-gradient(135deg, rgb(34 211 238 / 14%), transparent 38%),
    radial-gradient(circle at 50% 50%, rgb(139 92 246 / 8%), transparent 34%),
    radial-gradient(circle, rgb(103 232 249 / 78%) 1px, transparent 1.2px),
    #030306;
}

.free-canvas-stage-shell.is-file-drag-over::after {
  content: "释放以上传图片或视频";
  position: absolute;
  left: 50%;
  top: 96px;
  z-index: 8;
  border: 1px solid rgb(103 232 249 / 42%);
  border-radius: 999px;
  background: rgb(4 8 18 / 86%);
  box-shadow: 0 18px 60px rgb(34 211 238 / 22%);
  color: #ecfeff;
  font-size: 13px;
  font-weight: 900;
  padding: 10px 16px;
  pointer-events: none;
  transform: translateX(-50%);
}

.free-canvas-stage {
  width: 2600px;
  height: 1800px;
  transform: translate(72px, 84px) scale(1);
  transform-origin: 0 0;
  will-change: transform;
}

.free-canvas-edges,
.free-canvas-nodes {
  width: 2600px;
  height: 1800px;
  overflow: visible;
}

.free-canvas-edges {
  pointer-events: auto;
}

.free-canvas-nodes {
  pointer-events: none;
}

.free-canvas-edges marker path {
  fill: #7c3aed;
}

.canvas-edge-path {
  fill: none;
  stroke: #3c355b;
  stroke-linecap: round;
  stroke-width: 2;
  cursor: pointer;
  pointer-events: stroke;
  transition: opacity 0.16s ease, stroke 0.16s ease, stroke-width 0.16s ease, filter 0.16s ease;
}

.canvas-edge-hit {
  fill: none;
  stroke: transparent;
  stroke-linecap: round;
  stroke-width: 14;
  cursor: pointer;
  pointer-events: stroke;
}

.canvas-edge-path.is-lineage-edge {
  stroke: #22d3ee;
  stroke-width: 3.2;
  filter: drop-shadow(0 0 10px rgb(34 211 238 / 72%));
}

.canvas-edge-path.is-lineage-muted {
  opacity: 0.22;
}

.canvas-edge-path.is-selected-edge {
  stroke: #facc15;
  stroke-width: 4;
  filter: drop-shadow(0 0 12px rgb(250 204 21 / 78%));
  opacity: 1;
}

.canvas-edge-path-pending {
  stroke: #a855f7;
  stroke-dasharray: 8 8;
  stroke-width: 2.4;
  filter: drop-shadow(0 0 10px rgb(168 85 247 / 55%));
}

.canvas-flow-node {
  display: block;
  width: 232px;
  min-height: 168px;
  border: 1px solid #2b2839;
  border-radius: 15px;
  background: #17161f;
  box-shadow:
    0 24px 72px rgb(0 0 0 / 42%),
    inset 0 1px 0 rgb(255 255 255 / 5%);
  cursor: grab;
  pointer-events: auto;
  padding: 14px 14px 13px;
}

.canvas-flow-node:active {
  cursor: grabbing;
}

.canvas-flow-node.is-selected {
  border-color: color-mix(in srgb, var(--node-accent), #ffffff 18%);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--node-accent), transparent 54%),
    0 0 28px color-mix(in srgb, var(--node-accent), transparent 72%),
    0 24px 72px rgb(0 0 0 / 48%);
}

.canvas-flow-node.is-lineage-node {
  border-color: #22d3ee;
  box-shadow:
    0 0 0 1px rgb(34 211 238 / 42%),
    0 0 24px rgb(34 211 238 / 25%),
    0 24px 72px rgb(0 0 0 / 48%);
}

.canvas-flow-node.is-search-match {
  border-color: #fbbf24;
  box-shadow:
    0 0 0 2px rgb(251 191 36 / 88%),
    0 0 28px rgb(251 191 36 / 24%),
    0 24px 72px rgb(0 0 0 / 48%);
}

.canvas-flow-node.is-search-dimmed {
  opacity: 0.42;
}

.canvas-flow-node.is-connecting {
  outline: 1px solid color-mix(in srgb, var(--node-accent), #ffffff 25%);
  outline-offset: 5px;
}

.canvas-flow-node.is-running {
  border-color: color-mix(in srgb, var(--node-accent), #fbbf24 24%);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--node-accent), transparent 92%), transparent 42%),
    #17161f;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--node-accent), transparent 48%),
    0 0 28px color-mix(in srgb, var(--node-accent), transparent 70%),
    0 0 54px rgb(251 191 36 / 12%),
    0 24px 72px rgb(0 0 0 / 48%);
  animation: canvas-node-running-pulse 1.8s ease-in-out infinite;
}

.canvas-flow-node.is-analysis-expanded {
  width: 880px;
  min-height: 430px;
  border-color: color-mix(in srgb, var(--node-accent), #ffffff 10%);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--node-accent), transparent 90%), transparent 44%),
    #111118;
}

.canvas-flow-node.is-analysis-expanded > p {
  margin-bottom: 10px;
  -webkit-line-clamp: 1;
}

.canvas-flow-node.is-running::after {
  pointer-events: none;
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background:
    linear-gradient(90deg, transparent, rgb(255 255 255 / 18%), transparent)
    -180% 0 / 180% 100% no-repeat;
  content: "";
  mix-blend-mode: screen;
  opacity: 0.46;
  animation: canvas-node-running-sweep 2.2s linear infinite;
}

.canvas-flow-node.is-connecting .canvas-node-port-out {
  color: #c084fc;
}

.canvas-flow-node-header {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
}

.canvas-node-icon {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--node-accent), transparent 56%);
  border-radius: 9px;
  background: color-mix(in srgb, var(--node-accent), transparent 78%);
  color: var(--node-accent);
}

.canvas-node-icon svg {
  width: 15px;
  height: 15px;
  stroke-width: 2.4;
}

.canvas-node-title {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.canvas-node-title strong {
  overflow: hidden;
  color: #f8fafc;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.canvas-node-title small {
  overflow: hidden;
  color: #7b7289;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.2;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.canvas-flow-node-header b {
  border: 1px solid rgb(52 211 153 / 26%);
  border-radius: 999px;
  background: rgb(6 78 59 / 64%);
  color: #bbf7d0;
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  padding: 6px 8px;
}

.canvas-flow-node-header b[data-status="running"],
.canvas-flow-node-header b[data-status="submitting"] {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-color: rgb(251 191 36 / 28%);
  background: rgb(113 63 18 / 58%);
  color: #fde68a;
}

.canvas-flow-node-header b[data-status="running"]::before,
.canvas-flow-node-header b[data-status="submitting"]::before {
  display: block;
  width: 7px;
  height: 7px;
  border: 1px solid rgb(253 230 138 / 38%);
  border-top-color: #fde68a;
  border-radius: 999px;
  content: "";
  animation: canvas-node-running-spin 0.8s linear infinite;
}

.canvas-flow-node-header b[data-status="blocked"] {
  border-color: rgb(248 113 113 / 28%);
  background: rgb(127 29 29 / 54%);
  color: #fecaca;
}

.canvas-flow-node-header b[data-status="failed"] {
  border-color: rgb(248 113 113 / 28%);
  background: rgb(127 29 29 / 54%);
  color: #fecaca;
}

.canvas-flow-node p {
  display: -webkit-box;
  min-height: 0;
  margin: 13px 0 11px;
  overflow: hidden;
  color: #8b8498;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.canvas-node-preview {
  display: block;
  width: 100%;
  height: 92px;
  margin: 8px 0 10px;
  border: 1px solid rgb(255 255 255 / 8%);
  border-radius: 9px;
  object-fit: cover;
}

.canvas-node-preview-action {
  position: relative;
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  cursor: zoom-in;
  margin: 8px 0 10px;
  padding: 0;
}

.canvas-node-preview-action .canvas-node-preview {
  margin: 0;
}

.canvas-node-preview-action > span {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: inline-flex;
  height: 24px;
  align-items: center;
  gap: 5px;
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: 999px;
  background: rgb(0 0 0 / 58%);
  color: #ffffff;
  font-size: 10px;
  font-weight: 900;
  opacity: 0;
  padding: 0 8px;
  transition: opacity 140ms ease;
}

.canvas-node-preview-action:hover > span {
  opacity: 1;
}

.canvas-node-preview-action svg {
  width: 12px;
  height: 12px;
}

.canvas-node-analysis-output {
  display: grid;
  gap: 8px;
  margin: 0 0 10px;
  border-left: 2px solid color-mix(in srgb, var(--node-accent), transparent 18%);
  background: linear-gradient(90deg, color-mix(in srgb, var(--node-accent), transparent 86%), rgb(255 255 255 / 3%));
  padding: 8px 9px;
}

.canvas-node-analysis-output.is-error {
  border-left-color: #f87171;
  background: linear-gradient(90deg, rgb(248 113 113 / 14%), rgb(255 255 255 / 3%));
}

.canvas-node-analysis-head {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.canvas-node-analysis-head span {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
  color: #e5faff;
  font-size: 10px;
  font-weight: 900;
}

.canvas-node-analysis-head svg {
  width: 12px;
  height: 12px;
  color: var(--node-accent);
}

.canvas-node-analysis-output.is-error .canvas-node-analysis-head svg {
  color: #fca5a5;
}

.canvas-node-analysis-head b {
  flex: 0 0 auto;
  color: #a8a1b7;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 8px;
  font-weight: 900;
}

.canvas-node-analysis-output p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: #d8d3e7;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.canvas-node-analysis-open {
  min-height: 28px;
  border: 1px solid color-mix(in srgb, var(--node-accent), transparent 42%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--node-accent), transparent 82%);
  color: #eff6ff;
  cursor: pointer;
  font-size: 10px;
  font-weight: 900;
  padding: 0 10px;
}

.canvas-node-analysis-open:hover {
  border-color: color-mix(in srgb, var(--node-accent), transparent 12%);
  background: color-mix(in srgb, var(--node-accent), transparent 72%);
}

.canvas-node-result-card {
  display: grid;
  width: 100%;
  gap: 8px;
  margin: 0 0 10px;
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 11px;
  background:
    linear-gradient(145deg, rgb(255 255 255 / 7%), transparent 45%),
    rgb(4 4 7 / 64%);
  color: #f4f4f5;
  cursor: pointer;
  padding: 9px;
  text-align: left;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.canvas-node-result-card:hover {
  border-color: color-mix(in srgb, var(--node-accent), transparent 24%);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--node-accent), transparent 90%), transparent 48%),
    rgb(4 4 7 / 76%);
  transform: translateY(-1px);
}

.canvas-node-result-card.is-error {
  border-color: rgb(248 113 113 / 34%);
  background:
    linear-gradient(145deg, rgb(248 113 113 / 13%), transparent 45%),
    rgb(4 4 7 / 70%);
}

.canvas-node-result-head {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.canvas-node-result-head span {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  color: #f8fafc;
  font-size: 11px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.canvas-node-result-head svg {
  width: 13px;
  height: 13px;
  color: var(--node-accent);
}

.canvas-node-result-card.is-error .canvas-node-result-head svg {
  color: #fca5a5;
}

.canvas-node-result-head b {
  overflow: hidden;
  max-width: 98px;
  color: #cbd5e1;
  font-size: 9px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.canvas-node-result-card p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: #e4e4e7;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.canvas-node-result-card > small {
  justify-self: start;
  border: 1px solid color-mix(in srgb, var(--node-accent), transparent 42%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--node-accent), transparent 84%);
  color: #eff6ff;
  font-size: 10px;
  font-weight: 900;
  padding: 5px 10px;
}

.canvas-node-recovery-actions {
  display: flex;
  margin: -2px 0 10px;
}

.canvas-node-retry-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid color-mix(in srgb, var(--node-accent), transparent 34%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--node-accent), transparent 82%);
  color: #eff6ff;
  cursor: pointer;
  font-size: 10px;
  font-weight: 900;
  padding: 6px 10px;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.canvas-node-retry-action:hover {
  border-color: color-mix(in srgb, var(--node-accent), transparent 14%);
  background: color-mix(in srgb, var(--node-accent), transparent 70%);
  transform: translateY(-1px);
}

.canvas-node-retry-action svg {
  width: 12px;
  height: 12px;
}

.canvas-node-result-media {
  display: grid;
  height: 96px;
  overflow: hidden;
  border-radius: 9px;
  background: rgb(255 255 255 / 5%);
}

.canvas-node-result-media .canvas-node-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.canvas-node-image-grid {
  display: grid;
  width: 100%;
  height: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}

.canvas-node-image-grid .canvas-node-preview {
  min-width: 0;
}

.canvas-node-text-output {
  display: grid;
  gap: 8px;
  margin: 0 0 10px;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 12px;
  background:
    linear-gradient(145deg, rgb(255 255 255 / 8%), transparent 42%),
    rgb(0 0 0 / 18%);
  padding: 10px;
}

.canvas-node-text-output.is-error {
  border-color: rgb(248 113 113 / 30%);
  background:
    linear-gradient(145deg, rgb(248 113 113 / 14%), transparent 42%),
    rgb(0 0 0 / 18%);
}

.canvas-node-text-head {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.canvas-node-text-head span {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
  color: #f8fafc;
  font-size: 11px;
  font-weight: 900;
}

.canvas-node-text-head svg {
  width: 13px;
  height: 13px;
  color: var(--node-accent);
}

.canvas-node-text-head b {
  overflow: hidden;
  max-width: 104px;
  color: #cbd5e1;
  font-size: 9px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.canvas-node-text-body {
  display: grid;
  max-height: 130px;
  gap: 7px;
  overflow: auto;
  padding-right: 2px;
}

.canvas-node-text-body p,
.canvas-node-text-body li {
  margin: 0;
  color: #e4e4e7;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.62;
}

.canvas-node-text-body ul {
  margin: 0;
  padding-left: 17px;
}

.canvas-node-text-body strong {
  color: #ffffff;
}

.free-canvas-result-modal {
  position: fixed;
  z-index: 1510;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 26px;
}

.free-canvas-result-backdrop {
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 60%);
  backdrop-filter: blur(10px);
}

.free-canvas-result-dialog {
  position: relative;
  display: grid;
  width: min(760px, calc(100vw - 52px));
  max-height: min(760px, calc(100vh - 52px));
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 18px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--node-accent, #a78bfa), transparent 28%);
  border-radius: 24px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--node-accent, #a78bfa), transparent 90%), transparent 42%),
    #07070a;
  box-shadow:
    0 30px 110px rgb(0 0 0 / 72%),
    0 0 54px color-mix(in srgb, var(--node-accent, #a78bfa), transparent 82%);
  color: #f8fafc;
  padding: 24px;
}

.free-canvas-result-dialog.is-media {
  width: min(920px, calc(100vw - 52px));
}

.free-canvas-result-dialog.is-error {
  border-color: rgb(248 113 113 / 45%);
}

.free-canvas-result-dialog.is-debug {
  width: min(980px, calc(100vw - 52px));
}

.free-canvas-result-close {
  position: absolute;
  z-index: 2;
  top: 14px;
  right: 14px;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 999px;
  background: rgb(255 255 255 / 7%);
  color: #d8e3ec;
}

.free-canvas-result-close svg {
  width: 16px;
  height: 16px;
}

.free-canvas-result-head {
  display: grid;
  gap: 6px;
  padding-right: 48px;
}

.free-canvas-result-head p {
  margin: 0;
  color: color-mix(in srgb, var(--node-accent, #a78bfa), white 18%);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0;
}

.free-canvas-result-head h2 {
  margin: 0;
  color: #ffffff;
  font-size: 24px;
  font-weight: 900;
}

.free-canvas-result-head span,
.free-canvas-result-head small {
  overflow: hidden;
  color: #a1a1aa;
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.free-canvas-result-head span {
  color: #e4e4e7;
}

.free-canvas-result-body {
  min-height: 0;
  overflow: auto;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 16px;
  background: rgb(255 255 255 / 4%);
  padding: 18px;
}

.free-canvas-result-body.is-text {
  display: grid;
  gap: 12px;
}

.free-canvas-result-body.is-text p,
.free-canvas-result-body.is-text li {
  margin: 0;
  color: #e8eef7;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.75;
}

.free-canvas-result-body.is-text ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 20px;
}

.free-canvas-result-body.is-text strong {
  color: #ffffff;
}

.free-canvas-result-body.is-editable {
  padding: 0;
}

.free-canvas-result-body.is-editable textarea {
  display: block;
  width: 100%;
  min-height: min(500px, calc(100vh - 300px));
  resize: vertical;
  border: 0;
  outline: none;
  background: transparent;
  color: #f8fafc;
  font: inherit;
  font-size: 14px;
  font-weight: 750;
  line-height: 1.75;
  padding: 18px;
  white-space: pre-wrap;
}

.free-canvas-result-body.is-editable textarea::selection {
  background: color-mix(in srgb, var(--node-accent, #a78bfa), transparent 54%);
}

.free-canvas-debug-pre {
  min-height: min(520px, calc(100vh - 300px));
  margin: 0;
  overflow: auto;
  color: #e5e7eb;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
  overflow-wrap: normal;
  white-space: pre-wrap;
}

.free-canvas-result-body.is-media {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(220px, 0.65fr);
  gap: 18px;
}

.free-canvas-result-body.is-media img,
.free-canvas-result-body.is-media video {
  width: 100%;
  max-height: 520px;
  border-radius: 12px;
  background: #000;
  object-fit: contain;
}

.free-canvas-result-image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  max-height: 560px;
  gap: 12px;
  overflow: auto;
}

.free-canvas-result-image-item {
  position: relative;
  min-width: 0;
  margin: 0;
}

.free-canvas-result-image-item img {
  display: block;
  aspect-ratio: 1 / 1;
  max-height: 260px;
  object-fit: contain;
}

.free-canvas-result-image-item figcaption {
  position: absolute;
  top: 8px;
  left: 8px;
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 999px;
  background: rgb(0 0 0 / 62%);
  color: #ffffff;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  padding: 5px 7px;
}

.free-canvas-result-image-grid[data-result-image-count="1"] {
  grid-template-columns: 1fr;
}

.free-canvas-result-image-grid[data-result-image-count="1"] .free-canvas-result-image-item img {
  aspect-ratio: auto;
  max-height: 520px;
}

.free-canvas-result-meta {
  display: grid;
  align-content: start;
  gap: 12px;
  margin: 0;
}

.free-canvas-result-meta div {
  display: grid;
  gap: 5px;
  border-bottom: 1px solid rgb(255 255 255 / 8%);
  padding-bottom: 12px;
}

.free-canvas-result-meta dt {
  color: #a1a1aa;
  font-size: 11px;
  font-weight: 900;
}

.free-canvas-result-meta dd {
  margin: 0;
  color: #f4f4f5;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.55;
}

.free-canvas-result-error {
  display: grid;
  gap: 10px;
  color: #fecaca;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.7;
}

.free-canvas-result-error strong {
  color: #fff5f5;
  font-size: 16px;
}

.free-canvas-result-error p {
  margin: 0;
  color: #fecaca;
}

.free-canvas-result-error small {
  display: block;
  overflow-wrap: anywhere;
  border-top: 1px solid rgb(248 113 113 / 18%);
  color: #fca5a5;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  line-height: 1.65;
  padding-top: 10px;
}

.free-canvas-result-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.free-canvas-result-actions button,
.free-canvas-result-actions a {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 999px;
  background: rgb(255 255 255 / 7%);
  color: #f8fafc;
  font-size: 12px;
  font-weight: 900;
  padding: 0 16px;
  text-decoration: none;
}

.free-canvas-result-actions button:hover,
.free-canvas-result-actions a:hover {
  border-color: color-mix(in srgb, var(--node-accent, #a78bfa), transparent 22%);
  background: color-mix(in srgb, var(--node-accent, #a78bfa), transparent 82%);
}

.free-canvas-result-actions svg {
  width: 15px;
  height: 15px;
}

.canvas-node-analysis-board {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 18px 22px;
  margin: 14px 0 12px;
  border: 1px solid rgb(236 72 153 / 34%);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgb(236 72 153 / 9%), transparent 38%),
    rgb(0 0 0 / 18%);
  padding: 16px;
}

.canvas-node-analysis-board-preview {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
  border-radius: 10px;
  background: rgb(255 255 255 / 5%);
  padding: 10px;
}

.canvas-node-analysis-media {
  position: relative;
  display: grid;
  height: 118px;
  place-items: center;
  overflow: hidden;
  border-radius: 8px;
  background: #0b0b10;
}

.canvas-node-analysis-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.canvas-node-analysis-media > span {
  position: absolute;
  left: 8px;
  bottom: 8px;
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 8px;
  background: rgb(0 0 0 / 64%);
  color: #ffffff;
}

.canvas-node-analysis-media svg {
  width: 14px;
  height: 14px;
}

.canvas-node-analysis-media.is-empty {
  color: #94a3b8;
}

.canvas-node-analysis-board-preview strong {
  overflow: hidden;
  color: #ffffff;
  font-size: 14px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.canvas-node-analysis-board-preview p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: #b9c0cc;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.65;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
}

.canvas-node-analysis-board-grid {
  display: grid;
  min-width: 0;
  max-height: 290px;
  grid-template-columns: repeat(5, minmax(116px, 1fr));
  gap: 18px;
  overflow: auto;
  padding-right: 4px;
}

.canvas-node-analysis-section {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
}

.canvas-node-analysis-section h3 {
  margin: 0;
  color: #ffffff;
  font-size: 13px;
  font-weight: 900;
}

.canvas-node-analysis-section-items {
  display: grid;
  gap: 10px;
}

.canvas-node-analysis-section-items p {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 7px;
  margin: 0;
  color: #d9dce7;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.65;
  -webkit-line-clamp: unset;
}

.canvas-node-analysis-section-items svg {
  width: 14px;
  height: 14px;
  margin-top: 3px;
  color: #ffffff;
}

.canvas-node-analysis-section-items strong {
  color: #ffffff;
  font-weight: 900;
}

.canvas-node-analysis-customize {
  grid-column: 1 / -1;
  justify-self: center;
  min-width: 240px;
  min-height: 42px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #ec4899, #d946ef);
  box-shadow: 0 14px 34px rgb(236 72 153 / 28%);
  color: #ffffff;
  cursor: pointer;
  font-size: 14px;
  font-weight: 950;
  padding: 0 22px;
}

.canvas-node-analysis-customize:hover {
  filter: brightness(1.08);
}

.canvas-node-step-list {
  display: grid;
  gap: 7px;
}

.canvas-node-step-list span,
.canvas-node-step-action {
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 8%);
  border-radius: 7px;
  background: rgb(255 255 255 / 4%);
  color: #a8a1b7;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.25;
  padding: 7px 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.canvas-node-step-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  text-align: left;
}

.canvas-node-step-action i {
  width: 13px;
  height: 13px;
  opacity: 0.8;
}

.canvas-node-step-action:hover {
  border-color: color-mix(in srgb, var(--node-accent), transparent 38%);
  background: color-mix(in srgb, var(--node-accent), transparent 78%);
  color: #ffffff;
}

.canvas-node-step-menu {
  display: grid;
  gap: 5px;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 8px;
  background: rgb(15 15 19 / 92%);
  padding: 5px;
}

.canvas-node-step-menu button {
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #d4d4d8;
  cursor: pointer;
  font-size: 10px;
  font-weight: 800;
  padding: 6px 8px;
  text-align: left;
}

.canvas-node-step-menu button:hover {
  background: color-mix(in srgb, var(--node-accent), transparent 78%);
  color: #ffffff;
}

.canvas-node-step-list span.is-active {
  border-color: color-mix(in srgb, var(--node-accent), transparent 48%);
  background: color-mix(in srgb, var(--node-accent), transparent 82%);
  color: #dff7ff;
}

.canvas-flow-node.is-running .canvas-node-step-list span.is-active {
  border-color: rgb(251 191 36 / 48%);
  background:
    linear-gradient(90deg, rgb(251 191 36 / 18%), rgb(251 191 36 / 32%), rgb(251 191 36 / 18%))
    0 0 / 220% 100%;
  color: #fde68a;
  animation: canvas-node-running-step 1.3s ease-in-out infinite;
}

.canvas-node-resource-bars {
  display: grid;
  grid-template-columns: 32px 32px 32px 32px;
  gap: 7px;
  margin-top: 14px;
}

.canvas-node-resource-bars i {
  display: block;
  height: 6px;
  border-radius: 999px;
}

.canvas-node-resource-bars i:nth-child(1) {
  background: #22d3ee;
}

.canvas-node-resource-bars i:nth-child(2) {
  background: #67e8f9;
}

.canvas-node-resource-bars i:nth-child(3) {
  background: #facc15;
}

.canvas-node-resource-bars i:nth-child(4) {
  background: #a78bfa;
}

.canvas-flow-node.is-running .canvas-node-resource-bars i {
  animation: canvas-node-running-bar 1.05s ease-in-out infinite;
  transform-origin: left center;
}

.canvas-flow-node.is-running .canvas-node-resource-bars i:nth-child(2) {
  animation-delay: 0.12s;
}

.canvas-flow-node.is-running .canvas-node-resource-bars i:nth-child(3) {
  animation-delay: 0.24s;
}

.canvas-flow-node.is-running .canvas-node-resource-bars i:nth-child(4) {
  animation-delay: 0.36s;
}

.canvas-node-port {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--node-accent);
  cursor: crosshair;
  padding: 0;
  transform: translateY(-50%);
}

.canvas-node-port::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: currentColor;
  box-shadow:
    0 0 0 3px #030306,
    0 0 16px color-mix(in srgb, currentColor, transparent 28%);
  content: "";
  transform: translate(-50%, -50%);
}

.canvas-node-port::after {
  position: absolute;
  inset: 3px;
  border: 1px solid color-mix(in srgb, currentColor, transparent 70%);
  border-radius: 50%;
  content: "";
  opacity: 0;
  transform: scale(0.72);
  transition:
    opacity 0.16s ease,
    transform 0.16s ease;
}

.canvas-node-port:hover::before,
.canvas-flow-node.is-connecting .canvas-node-port-out::before {
  box-shadow:
    0 0 0 4px #030306,
    0 0 24px color-mix(in srgb, currentColor, transparent 10%);
}

.canvas-node-port:hover::after,
.canvas-flow-node.is-connecting .canvas-node-port-out::after {
  opacity: 1;
  transform: scale(1);
}

.canvas-node-port-in {
  left: -22px;
}

.canvas-node-port-out {
  right: -22px;
}

@keyframes canvas-node-running-pulse {
  0%,
  100% {
    filter: brightness(1);
  }

  50% {
    filter: brightness(1.08);
  }
}

@keyframes canvas-node-running-sweep {
  0% {
    background-position: -180% 0;
  }

  100% {
    background-position: 180% 0;
  }
}

@keyframes canvas-node-running-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes canvas-node-running-step {
  0%,
  100% {
    background-position: 0 0;
  }

  50% {
    background-position: 100% 0;
  }
}

@keyframes canvas-node-running-bar {
  0%,
  100% {
    opacity: 0.62;
    transform: scaleX(0.72);
  }

  45% {
    opacity: 1;
    transform: scaleX(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .canvas-flow-node.is-running,
  .canvas-flow-node.is-running::after,
  .canvas-flow-node-header b[data-status="running"]::before,
  .canvas-flow-node.is-running .canvas-node-step-list span.is-active,
  .canvas-flow-node.is-running .canvas-node-resource-bars i {
    animation: none;
  }
}

.free-canvas-asset-modal {
  position: fixed;
  z-index: 1300;
  inset: 0;
  color: #f4f4f5;
}

.free-canvas-asset-backdrop {
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 72%);
  backdrop-filter: blur(10px);
}

.free-canvas-asset-dialog {
  position: absolute;
  top: 16px;
  right: 22px;
  bottom: 20px;
  display: grid;
  width: min(680px, calc(100vw - 44px));
  grid-template-rows: auto auto auto auto minmax(0, 1fr);
  border: 1px solid rgb(34 211 238 / 34%);
  border-radius: 24px;
  background: rgb(15 15 20 / 96%);
  box-shadow:
    0 32px 90px rgb(0 0 0 / 58%),
    0 0 60px rgb(124 58 237 / 12%);
  padding: 24px;
}

.free-canvas-asset-close {
  position: absolute;
  top: 20px;
  right: 20px;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 50%;
  background: rgb(255 255 255 / 9%);
  color: #d4d4d8;
}

.free-canvas-asset-close:hover {
  background: rgb(255 255 255 / 14%);
  color: #ffffff;
}

.free-canvas-asset-close svg {
  width: 18px;
  height: 18px;
}

.free-canvas-asset-dialog > p {
  margin: 0 0 10px;
  color: #a5f3fc;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 3px;
}

.free-canvas-asset-dialog h2 {
  margin: 0;
  color: #ffffff;
  font-size: 22px;
  font-weight: 950;
  line-height: 1.2;
}

.free-canvas-asset-dialog > small {
  margin-top: 8px;
  color: #71717a;
  font-size: 13px;
  font-weight: 800;
}

.free-canvas-asset-add-row {
  display: flex;
  min-height: 60px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 18px;
  background: rgb(255 255 255 / 4%);
  margin-top: 24px;
  padding: 0 14px 0 18px;
}

.free-canvas-asset-add-row span {
  color: #a1a1aa;
  font-size: 13px;
  font-weight: 800;
}

.free-canvas-asset-add-row button {
  display: inline-flex;
  height: 38px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: #22d3ee;
  color: #031318;
  cursor: pointer;
  font-size: 13px;
  font-weight: 950;
  padding: 0 18px;
  white-space: nowrap;
}

.free-canvas-asset-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  align-content: start;
  gap: 16px;
  min-height: 0;
  overflow: auto;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 18px;
  background: rgb(0 0 0 / 22%);
  margin-top: 16px;
  padding: 14px;
}

.free-canvas-asset-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 16px;
  background: rgb(32 32 40 / 92%);
  padding: 14px;
}

.free-canvas-asset-preview {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: #09090d;
}

.free-canvas-asset-preview-button {
  position: relative;
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  cursor: zoom-in;
  padding: 0;
}

.free-canvas-asset-preview img,
.free-canvas-asset-preview video {
  display: block;
  width: 100%;
  height: 140px;
  object-fit: cover;
}

.free-canvas-asset-preview-button span {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  background: rgb(0 0 0 / 62%);
  color: #ffffff;
  font-size: 11px;
  font-weight: 900;
  opacity: 0;
  padding: 6px 9px;
  transform: translateY(4px);
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.free-canvas-asset-preview-button:hover span,
.free-canvas-asset-preview-button:focus-visible span {
  opacity: 1;
  transform: translateY(0);
}

.free-canvas-asset-preview-button svg {
  width: 13px;
  height: 13px;
}

.free-canvas-asset-preview b {
  position: absolute;
  z-index: 1;
  top: 10px;
  left: 10px;
  border-radius: 999px;
  background: #67e8f9;
  color: #062126;
  font-size: 11px;
  font-weight: 950;
  padding: 5px 9px;
}

.free-canvas-asset-card strong {
  overflow: hidden;
  color: #ffffff;
  font-size: 13px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.free-canvas-asset-card select {
  height: 38px;
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 10px;
  background: #171720;
  color: #f4f4f5;
  font-size: 13px;
  font-weight: 800;
  padding: 0 12px;
}

.free-canvas-asset-card-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.free-canvas-asset-card-actions button {
  height: 34px;
  border: 0;
  border-radius: 9px;
  background: rgb(255 255 255 / 7%);
  color: #d4d4d8;
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
}

.free-canvas-asset-card-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.36;
}

.free-canvas-asset-card-actions .is-danger {
  background: rgb(127 29 29 / 52%);
  color: #fecaca;
}

.free-canvas-asset-empty {
  display: grid;
  min-height: 220px;
  place-items: center;
  color: #71717a;
  font-size: 14px;
  font-weight: 800;
}

.free-canvas-image-preview {
  position: fixed;
  z-index: 1450;
  inset: 0;
  color: #f8fafc;
}

.free-canvas-image-preview-backdrop {
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 82%);
  backdrop-filter: blur(12px);
}

.free-canvas-image-preview-dialog {
  position: absolute;
  inset: 28px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid rgb(34 211 238 / 24%);
  border-radius: 18px;
  background: rgb(9 9 13 / 92%);
  box-shadow: 0 28px 90px rgb(0 0 0 / 58%);
}

.free-canvas-image-preview-dialog header {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid rgb(255 255 255 / 10%);
  padding: 14px 16px;
}

.free-canvas-image-preview-dialog strong {
  overflow: hidden;
  font-size: 15px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.free-canvas-image-preview-dialog button {
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: 50%;
  background: rgb(255 255 255 / 8%);
  color: #e4e4e7;
  cursor: pointer;
}

.free-canvas-image-preview-dialog button:hover {
  background: rgb(255 255 255 / 14%);
  color: #ffffff;
}

.free-canvas-image-preview-stage {
  display: grid;
  min-height: 0;
  place-items: center;
  overflow: auto;
  padding: 18px;
}

.free-canvas-image-preview-stage img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 128px);
  border-radius: 10px;
  object-fit: contain;
  box-shadow: 0 24px 70px rgb(0 0 0 / 48%);
}

.model-runtime-config-workbench {
  display: grid;
  gap: 18px;
  max-width: 1120px;
  margin: 0 auto;
}

.model-runtime-config-hero {
  align-items: center;
}

.model-runtime-config-scope {
  min-width: 210px;
  border: 1px solid rgb(56 189 248 / 24%);
  border-radius: 10px;
  background: rgb(8 47 73 / 22%);
  padding: 14px 16px;
}

.model-runtime-config-scope span,
.model-runtime-config-scope small {
  display: block;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 800;
}

.model-runtime-config-scope strong {
  display: block;
  margin: 4px 0;
  color: #e0f2fe;
  font-size: 20px;
}

.model-runtime-config-panel {
  overflow: hidden;
  border: 1px solid rgb(148 163 184 / 18%);
  border-radius: 12px;
  background: rgb(11 17 24 / 88%);
  box-shadow: 0 20px 50px rgb(0 0 0 / 16%);
}

.model-runtime-config-provider {
  display: flex;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid rgb(148 163 184 / 14%);
  padding: 22px 24px;
}

.model-runtime-config-provider-mark {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgb(74 222 128 / 30%);
  border-radius: 12px;
  background: rgb(20 83 45 / 32%);
  color: #86efac;
  font-size: 20px;
  font-weight: 950;
}

.model-runtime-config-provider h2 {
  margin: 3px 0 4px;
  color: #f8fafc;
  font-size: 21px;
}

.model-runtime-config-provider p:not(.eyebrow) {
  margin: 0;
  color: #94a3b8;
  font-size: 13px;
}

.model-runtime-config-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
  border: 1px solid rgb(74 222 128 / 24%);
  border-radius: 999px;
  background: rgb(20 83 45 / 22%);
  color: #86efac;
  padding: 7px 11px;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.model-runtime-config-live i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 4px rgb(74 222 128 / 10%);
}

.model-runtime-config-form {
  display: grid;
  gap: 20px;
  padding: 24px;
}

.model-runtime-config-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.model-runtime-limit-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  border: 1px solid rgb(148 163 184 / 18%);
  border-radius: 10px;
  background: rgb(15 23 42 / 48%);
  padding: 18px;
  cursor: pointer;
}

.model-runtime-limit-card:focus-within {
  border-color: rgb(56 189 248 / 54%);
  box-shadow: 0 0 0 3px rgb(56 189 248 / 8%);
}

.model-runtime-limit-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 9px;
  font-size: 15px;
  font-style: normal;
  font-weight: 900;
}

.model-runtime-limit-icon.is-video {
  background: rgb(67 56 202 / 24%);
  color: #a5b4fc;
}

.model-runtime-limit-icon.is-image {
  background: rgb(8 145 178 / 22%);
  color: #67e8f9;
}

.model-runtime-limit-copy strong,
.model-runtime-limit-copy small {
  display: block;
}

.model-runtime-limit-copy strong {
  color: #f8fafc;
  font-size: 15px;
}

.model-runtime-limit-copy small {
  margin-top: 4px;
  color: #94a3b8;
  font-size: 12px;
}

.model-runtime-limit-input {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.model-runtime-limit-input input {
  width: 82px;
  height: 46px;
  border: 1px solid rgb(148 163 184 / 28%);
  border-radius: 8px;
  outline: 0;
  background: rgb(2 6 23 / 62%);
  color: #f8fafc;
  padding: 0 10px;
  text-align: center;
  font-size: 20px;
  font-weight: 900;
}

.model-runtime-limit-input em {
  color: #94a3b8;
  font-size: 13px;
  font-style: normal;
  font-weight: 800;
}

.model-runtime-limit-status {
  grid-column: 2 / -1;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.model-runtime-config-guidance {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-top: 1px solid rgb(148 163 184 / 12%);
  padding-top: 20px;
}

.model-runtime-config-guidance strong {
  color: #e2e8f0;
  font-size: 13px;
}

.model-runtime-config-guidance p {
  max-width: 720px;
  margin: 5px 0 0;
  color: #94a3b8;
  font-size: 12px;
  line-height: 1.6;
}

.model-runtime-config-guidance .btn-primary {
  flex: 0 0 auto;
  min-width: 112px;
}

@media (max-width: 900px) {
  .model-runtime-config-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .model-runtime-config-provider,
  .model-runtime-config-guidance {
    align-items: stretch;
    flex-direction: column;
  }

  .model-runtime-config-live {
    align-self: flex-start;
    margin-left: 0;
  }

  .model-runtime-limit-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .model-runtime-limit-input {
    grid-column: 2;
  }

  .model-runtime-config-guidance .btn-primary {
    width: 100%;
  }
}