/* Vidrush live visual cleanup: spacing and alignment only. */
:root {
  --vr-space-1: 4px;
  --vr-space-2: 8px;
  --vr-space-3: 12px;
  --vr-space-4: 16px;
  --vr-space-5: 20px;
  --vr-space-6: 24px;
  --vr-space-7: 32px;
}
.surface,
.formSurface,
.composer,
.createStepPanel,
.providerPanel,
.providerManageCard,
.providerCredentialCard,
.providerIdentityCard,
.tableSurface,
.statCard,
.videoCard,
.avatarCard,
.draftCard,
.folderCard,
.lookCard,
.voiceMethodCard,
.voiceResourceCard,
.voiceSelectedCard,
.voiceMatchedCard,
.securityCard,
.schemaSurface,
.modalCard,
.routeEditor,
.routeDetail,
.jobProgressHero,
.jobProgressMain,
.jobProgressSide {
  box-sizing: border-box;
}
.videoGrid,
.avatarGrid,
.draftGrid,
.folderGrid,
.statGrid,
.providerCapabilityList,
.providerOperationList,
.assetList,
.jobAttemptList,
.jobCheckpointList,
.jobEventList,
.jobRecoveryEvents,
.jobSceneList,
.voiceRows,
.voiceLibrary,
.avatarVideoList,
.avatarVideoGrid,
.avatarMemoryList,
.avatarScriptList,
.avatarDraftList,
.ebookList,
.routingLayout,
.settingsGrid,
.detailGrid,
.providerDetailHero,
.providerDetailGrid,
.avatarTopCards,
.avatarEditorGrid,
.routeChain {
  gap: var(--vr-space-4) !important;
}
.voiceRows,
.voiceLibrary,
.assetList,
.jobAttemptList,
.jobCheckpointList,
.jobEventList,
.jobRecoveryEvents,
.jobSceneList,
.avatarVideoList,
.avatarMemoryList,
.avatarScriptList,
.avatarDraftList,
.ebookList,
.routeChain {
  row-gap: var(--vr-space-3) !important;
}
.composerFields,
.creativeFields,
.voiceSettingsGrid,
.settingsGrid,
.routingLayout,
.providerPanel,
.avatarProfileContent,
.avatarTabSurface,
.avatarDefaultsLayout,
.jobProgressGrid,
.jobRuntimeGrid {
  row-gap: var(--vr-space-6) !important;
}
.mainContent > section + section,
.mainContent > .surface + .surface,
.mainContent > .formSurface + .formSurface,
.page > section + section,
.page > .surface + .surface,
.page > .formSurface + .formSurface,
.pageHeader + .surface,
.pageHeader + .formSurface {
  margin-top: var(--vr-space-6) !important;
}
.surface > .sectionHeader + *,
.formSurface > .sectionHeader + *,
.composer > .sectionHeader + *,
.providerPanel > .sectionHeader + *,
.avatarTabSurface > .sectionHeader + * {
  margin-top: var(--vr-space-4) !important;
}
.field {
  margin-bottom: var(--vr-space-5) !important;
}
.fieldLabel {
  margin-bottom: var(--vr-space-2) !important;
  line-height: 1.35;
}
.fieldHint {
  margin-top: var(--vr-space-2) !important;
  line-height: 1.45;
}
.formSurface .field + .field,
.composer .field + .field,
.providerPanel .field + .field,
.voiceSettingsGrid .field + .field {
  margin-top: var(--vr-space-5);
}
.buttonGroup,
.buttonRow,
.formFooter,
.composerFooter,
.pageHeaderAction,
.providerActions,
.settingsActions,
.routingFooterActions,
.outputActions,
.avatarHeaderActions,
.avatarPersonaActions,
.avatarSaveBar {
  gap: var(--vr-space-3) !important;
  align-items: center;
}
.buttonGroup > * + *,
.buttonRow > * + *,
.formFooter > * + *,
.composerFooter > * + *,
.providerActions > * + *,
.settingsActions > * + *,
.routingFooterActions > * + *,
.outputActions > * + *,
.avatarHeaderActions > * + *,
.avatarPersonaActions > * + *,
.avatarSaveBar > * + * {
  margin-left: 0 !important;
}
.navItem,
.button,
.iconButton,
.settingsIconButton,
.customSelectTrigger,
.chip,
.status,
.badge {
  align-items: center;
}
.button,
.navItem,
.settingsIconButton,
.iconButton {
  gap: var(--vr-space-2) !important;
}
.button > svg,
.navItem > svg,
.settingsIconButton > svg,
.iconButton > svg,
.customSelectTrigger > svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}
.button > span,
.navItem > span,
.settingsIconButton > span,
.iconButton > span {
  margin-left: 0 !important;
}
.surface,
.formSurface,
.composer,
.createStepPanel,
.providerPanel,
.providerManageCard,
.providerCredentialCard,
.providerIdentityCard,
.tableSurface,
.statCard,
.videoCard,
.avatarCard,
.draftCard,
.folderCard,
.lookCard,
.voiceMethodCard,
.voiceResourceCard,
.voiceSelectedCard,
.voiceMatchedCard,
.securityCard,
.schemaSurface,
.routeEditor,
.routeDetail,
.jobProgressHero,
.jobProgressMain,
.jobProgressSide {
  padding: var(--vr-space-6);
}
.tableRow,
.providerRow,
.routeRow,
.assetRow,
.jobEventRow,
.jobAttemptRow,
.checkpointRow,
.voiceRow {
  gap: var(--vr-space-3) !important;
  padding-block: var(--vr-space-3) !important;
}
.pageHeader,
.sectionHeader,
.cardHeader {
  gap: var(--vr-space-4);
  align-items: center;
}
.sectionHeader + .sectionBody,
.cardHeader + .cardBody {
  margin-top: var(--vr-space-4);
}
@media (max-width: 760px) {
  .surface,
  .formSurface,
  .composer,
  .createStepPanel,
  .providerPanel,
  .providerManageCard,
  .providerCredentialCard,
  .providerIdentityCard,
  .tableSurface,
  .statCard,
  .videoCard,
  .avatarCard,
  .draftCard,
  .folderCard,
  .lookCard,
  .voiceMethodCard,
  .voiceResourceCard,
  .voiceSelectedCard,
  .voiceMatchedCard,
  .securityCard,
  .schemaSurface,
  .routeEditor,
  .routeDetail,
  .jobProgressHero,
  .jobProgressMain,
  .jobProgressSide {
    padding: 18px !important;
  }
  .videoGrid,
  .avatarGrid,
  .draftGrid,
  .folderGrid,
  .statGrid,
  .providerCapabilityList,
  .providerOperationList,
  .assetList,
  .jobAttemptList,
  .jobCheckpointList,
  .jobEventList,
  .jobRecoveryEvents,
  .jobSceneList,
  .voiceRows,
  .voiceLibrary,
  .avatarVideoList,
  .avatarMemoryList,
  .avatarScriptList,
  .avatarDraftList,
  .ebookList,
  .routingLayout,
  .settingsGrid,
  .detailGrid,
  .providerDetailGrid,
  .avatarTopCards,
  .avatarEditorGrid,
  .routeChain {
    gap: var(--vr-space-3) !important;
  }
  .mainContent > section + section,
  .mainContent > .surface + .surface,
  .mainContent > .formSurface + .formSurface,
  .page > section + section,
  .page > .surface + .surface,
  .page > .formSurface + .formSurface,
  .pageHeader + .surface,
  .pageHeader + .formSurface {
    margin-top: var(--vr-space-5) !important;
  }
  .field {
    margin-bottom: var(--vr-space-4) !important;
  }
  .buttonGroup,
  .buttonRow,
  .formFooter,
  .composerFooter,
  .providerActions,
  .settingsActions,
  .routingFooterActions,
  .outputActions,
  .avatarHeaderActions,
  .avatarPersonaActions,
  .avatarSaveBar {
    gap: var(--vr-space-3) !important;
  }
  .pageHeader,
  .sectionHeader,
  .cardHeader {
    gap: var(--vr-space-3);
  }
  .composerFooter,
  .formFooter {
    align-items: stretch;
  }
}