:root {
  --canvas: #03050a;
  --surface: rgba(14, 18, 28, .66);
  --surface-muted: rgba(255, 255, 255, .055);
  --text: #f5f7ff;
  --text-soft: rgba(240, 245, 255, .78);
  --ink: #f5f7ff;
  --muted: rgba(225, 232, 247, .58);
  --border: rgba(255, 255, 255, .12);
  --border-soft: rgba(255, 255, 255, .08);
  --accent: #68e7ff;
  --accent-hover: #8a79ff;
  --accent-soft: rgba(74, 188, 255, .16);
  --success: #7ce5b1;
  --warning: #ffd18b;
  --danger: #ff9a9a;
  --shadow-subtle: 0 24px 80px rgba(0, 0, 0, .28);
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
}
html, body, #root { min-height: 100%; }
html { background: #03050a; }
body {
  margin: 0;
  min-width: 320px;
  background: #03050a;
  color: var(--text);
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 16% 0%, rgba(42, 126, 255, .18), transparent 34%),
    radial-gradient(circle at 90% 12%, rgba(112, 68, 238, .16), transparent 30%),
    linear-gradient(180deg, rgba(1, 3, 8, .18), rgba(1, 3, 8, .72));
}
#vidrush-cinematic-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  opacity: .72;
  filter: saturate(.72) brightness(.42) contrast(1.08);
}
.appShell {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  color: var(--text);
  background: transparent !important;
}
.topbar {
  position: sticky;
  top: 14px;
  z-index: 10;
  width: min(1420px, calc(100% - 28px));
  margin: 0 auto;
  background: rgba(8, 12, 20, .58) !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  border-radius: 999px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .22);
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
}
.topbarInner {
  min-height: 66px;
  max-width: none;
  padding: 0 14px 0 18px;
  gap: 14px;
}
.logo { width: 188px; flex-basis: 188px; height: 42px; }
.logoLockup { width: 188px; height: 42px; }
.logoMarkImage { width: 34px; height: 34px; }
.mainNav { justify-content: center; gap: 5px; }
.navItem {
  padding: 9px 14px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: rgba(240, 245, 255, .68) !important;
  font-size: 12px;
  font-weight: 500;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.navItem:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, .10) !important;
  border-color: rgba(255, 255, 255, .10);
  transform: translateY(-1px);
}
.navItem.active {
  color: #fff !important;
  background: rgba(255, 255, 255, .15) !important;
  border-color: rgba(255, 255, 255, .12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}
.navItem.active:after { display: none; }
.headerCreate, .button.primary {
  color: #fff !important;
  background: linear-gradient(180deg, #2b2b2b, #101010) !important;
  border: 1px solid rgba(255, 255, 255, .14) !important;
  border-radius: 999px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .22);
}
.headerCreate:hover, .button.primary:hover { opacity: .9; background: linear-gradient(180deg, #343434, #141414) !important; }
.accountControls { color: var(--muted); }
.accountUsername, .logoutButton { color: rgba(240, 245, 255, .62) !important; }
.logoutButton:hover { color: #fff !important; }
.settingsIconButton, .iconButton, .settingsIconButton:hover {
  border: 1px solid rgba(255, 255, 255, .12) !important;
  background: rgba(255, 255, 255, .08) !important;
  color: rgba(245, 248, 255, .82) !important;
  box-shadow: none;
}
.settingsIconButton:hover, .iconButton:hover { background: rgba(255, 255, 255, .15) !important; transform: translateY(-1px); }
.mainContent {
  max-width: 1420px;
  padding: 54px 30px 100px;
  color: var(--text);
}
.page { min-height: calc(100vh - 140px); }
.pageHeader { margin-bottom: 30px; }
.pageHeader h1, .hero h1, .composerIntro h1, .surfaceTitle h2, .surfaceTitle h3,
.createFlowIntro h1, .createFlowIntro h2, .voiceoverSectionHeading h2 {
  color: #f8faff !important;
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif !important;
  letter-spacing: -.055em;
}
.pageHeader p, .hero p, .composerIntro p, .createFlowIntro p, .muted, .quietNote, .fieldHint {
  color: var(--muted) !important;
}
.eyebrow, .avatarCardEyebrow { color: var(--accent) !important; }
.surface, .formSurface, .composer, .createStepPanel, .stepPanel, .providerPanel,
.providerManageCard, .providerCredentialCard, .providerIdentityCard, .tableSurface,
.statCard, .videoCard, .avatarCard, .draftCard, .folderCard, .lookCard,
.voiceMethodCard, .voiceResourceCard, .voiceSelectedCard, .voiceMatchedCard,
.securityCard, .schemaSurface, .modalCard, .routeEditor, .routeDetail,
.routeRow, .routingLayout, .jobProgressHero, .jobProgressMain, .jobProgressSide,
.detailMain > .surface, .detailSide > .surface {
  color: var(--text) !important;
  background: rgba(10, 15, 25, .62) !important;
  border: 1px solid rgba(255, 255, 255, .11) !important;
  border-radius: 20px !important;
  box-shadow: var(--shadow-subtle) !important;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.surfaceTitle { margin-bottom: 20px; }
.surfaceTitle h2, .surfaceTitle h3, .surface h2, .surface h3, .surface h4,
.providerIdentityCard h2, .providerManageCard h2, .statCard strong, .videoMeta strong,
.avatarCard strong, .draftCard strong, .folderCard strong { color: #f8faff !important; }
.fieldLabel, .label, .formLabel { color: rgba(240, 245, 255, .82) !important; }
.field input, .field textarea, .field select, .searchBar input, .secretInput,
.textInput, .textArea, .numberInput, .customSelectTrigger, .searchableComboboxInput {
  color: #f8faff !important;
  background: rgba(0, 0, 0, .24) !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}
.field input::placeholder, .field textarea::placeholder, .textInput::placeholder,
.textArea::placeholder, .searchBar input::placeholder { color: rgba(235, 242, 255, .34) !important; }
.field input:focus, .field textarea:focus, .field select:focus, .searchBar input:focus,
.secretInput:focus, .textInput:focus, .textArea:focus, .customSelectTrigger:focus {
  border-color: rgba(104, 231, 255, .45) !important;
  box-shadow: 0 0 0 4px rgba(104, 231, 255, .10) !important;
}
.customSelectMenu, .searchableComboboxMenu, .avatarOverflowMenu {
  color: #f8faff !important;
  background: rgba(5, 8, 14, .94) !important;
  border: 1px solid rgba(255, 255, 255, .14) !important;
  border-radius: 16px !important;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
.customSelectOption:hover, .customSelectOption.selected, .searchableComboboxOption:hover,
.searchableComboboxOption.selected { background: rgba(255, 255, 255, .10) !important; }
.button {
  min-height: 40px;
  border-radius: 999px;
  font-weight: 500;
  transition: opacity .2s ease, transform .2s ease, background .2s ease, border-color .2s ease;
}
.button.secondary, .button.ghost {
  color: rgba(240, 245, 255, .82) !important;
  background: rgba(255, 255, 255, .08) !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
}
.button.secondary:hover, .button.ghost:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, .15) !important;
}
.button.danger { color: #ffb1b1 !important; background: rgba(204, 62, 62, .18) !important; border: 1px solid rgba(255, 132, 132, .22); }
.status { border: 1px solid rgba(255, 255, 255, .10); background: rgba(255, 255, 255, .08); color: rgba(235, 242, 255, .72); }
.status-completed, .status-verified, .status-ready, .status-valid { color: #9bf2c1; background: rgba(73, 190, 129, .16); border-color: rgba(124, 229, 177, .28); }
.status-running, .status-pending, .status-validating, .status-not-tested { color: #ffe0a6; background: rgba(255, 192, 86, .15); border-color: rgba(255, 209, 139, .25); }
.status-failed, .status-canceled, .status-validation-failed, .status-missing, .status-unsupported { color: #ffb1b1; background: rgba(227, 85, 85, .15); border-color: rgba(255, 154, 154, .25); }
.videoCard, .avatarCard, .draftCard, .folderCard { overflow: hidden; }
.videoCard:hover, .avatarCard:hover, .draftCard:hover, .folderCard:hover { transform: translateY(-2px); border-color: rgba(104, 231, 255, .28) !important; }
.videoThumb, .avatarPortrait, .avatarCardPortrait, .resourcePreview {
  background: linear-gradient(145deg, rgba(37, 76, 126, .35), rgba(50, 25, 102, .38)) !important;
}
.videoMeta span, .videoMeta small, .avatarCard small, .folderCard small, .dateText {
  color: var(--muted) !important;
}
.tableRow { border-top-color: rgba(255, 255, 255, .08) !important; }
.tableRow:hover { background: rgba(255, 255, 255, .05) !important; }
.progressTrack { background: rgba(255, 255, 255, .10) !important; }
.progressFill { background: linear-gradient(90deg, #20d9ef, #4d75ff, #8a52ff) !important; }
.divider, .composerFooter, .avatarProfileDivider { border-color: rgba(255, 255, 255, .09) !important; }
.inlineError, .controlError, .fieldError { color: #ffbaba !important; background: rgba(212, 63, 63, .15) !important; border-color: rgba(255, 154, 154, .22) !important; }
.inlineNotice, .workspaceNote, .noteMark { color: #b7f4d0 !important; background: rgba(69, 176, 117, .12) !important; border-color: rgba(124, 229, 177, .20) !important; }
.rangeInput, input[type='range'] { accent-color: var(--accent); }
input[type='range'] { background: rgba(255,255,255,.12); }
.createProgress, .wizardRail, .composerSteps, .createStepPanel, .stepPanelFooter,
.createOutputStep, .voiceoverSection, .outputSection, .outputSummarySection,
.generationPlanReview, .planReviewSection, .routingCapabilityNotice {
  background: rgba(8, 12, 20, .42) !important;
  border-color: rgba(255,255,255,.09) !important;
}
.createStepDot, .stepPanelNumber, .stepInfo, .createStepLine { border-color: rgba(255,255,255,.12) !important; }
.createStepDot.current, .current .createStepDot, .stepDone { background: rgba(255,255,255,.15) !important; color: #fff !important; }
.avatarDetailRoute, .avatarDetailRoute .mainContent { background: transparent !important; color: var(--text) !important; }
.avatarDetailRoute .topbar { background: rgba(8,12,20,.58) !important; border-color: rgba(255,255,255,.12) !important; }
.avatarDetailRoute .surface, .avatarDetailPage .surface, .avatarDetailPage .avatarMainProfileCard,
.avatarDetailPage .avatarTabSurface, .avatarDefaultsLayout > .surface {
  background: rgba(10, 15, 25, .66) !important;
  border-color: rgba(255,255,255,.11) !important;
  color: var(--text) !important;
}
.avatarDetailRoute .avatarHeaderName h1, .avatarDetailRoute .surface h2,
.avatarDetailRoute .surface h3, .avatarDetailRoute .surface h4 { color: #f8faff !important; font-family: 'Geist', sans-serif !important; }
.avatarDetailRoute .field input, .avatarDetailRoute .field textarea, .avatarDetailRoute .field select,
.avatarDetailRoute .textInput { color: #f8faff !important; background: rgba(0,0,0,.25) !important; border-color: rgba(255,255,255,.12) !important; }
.avatarDetailRoute .muted, .avatarDetailRoute .avatarHeaderName p, .avatarDetailRoute .surface p { color: var(--muted) !important; }
.avatarTabs { border-color: rgba(255,255,255,.12) !important; background: rgba(255,255,255,.04) !important; }
.avatarTabs button { color: rgba(240,245,255,.62) !important; }
.avatarTabs button.active { color: #fff !important; background: rgba(255,255,255,.15) !important; box-shadow: none !important; }
.avatarFilterGroup button.active, .avatarLayoutGroup button.active { color: #fff !important; background: rgba(255,255,255,.15) !important; border-color: rgba(255,255,255,.16) !important; }
.modalBackdrop { background: rgba(0,0,0,.72) !important; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.footer { color: rgba(220,228,245,.45) !important; }
.cinematicMenuButton { display: none; }
.cinematicMenuBackdrop, .cinematicDrawer { display: none; }
@media (max-width: 760px) {
  .topbar { top: 8px; width: calc(100% - 16px); }
  .topbarInner { min-height: 60px; padding-inline: 11px; }
  .logo { width: 38px; flex-basis: 38px; padding: 3px 4px; border-radius: 999px; background: rgba(255,255,255,.92); }
  .logoLockup { display: none; }
  .logoMarkImage { display: block; width: 30px; height: 30px; }
  .mainNav { display: none !important; }
  .headerCreate { display: none; }
  .cinematicMenuButton { display: grid; place-items: center; width: 40px; height: 40px; margin-left: auto; padding: 0; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; color: #fff; background: rgba(255,255,255,.10); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); cursor: pointer; }
  .cinematicMenuIcon, .cinematicMenuIcon::before, .cinematicMenuIcon::after { width: 17px; height: 2px; border-radius: 99px; background: currentColor; transition: transform .3s ease, opacity .3s ease; }
  .cinematicMenuIcon { position: relative; }
  .cinematicMenuIcon::before, .cinematicMenuIcon::after { content: ''; position: absolute; left: 0; }
  .cinematicMenuIcon::before { top: -6px; }
  .cinematicMenuIcon::after { top: 6px; }
  .cinematicMenuButton[aria-expanded='true'] .cinematicMenuIcon { background: transparent; }
  .cinematicMenuButton[aria-expanded='true'] .cinematicMenuIcon::before { transform: translateY(6px) rotate(45deg); }
  .cinematicMenuButton[aria-expanded='true'] .cinematicMenuIcon::after { transform: translateY(-6px) rotate(-45deg); }
  .mainContent { padding: 34px 16px 76px; }
  .pageHeader { align-items: flex-start; flex-direction: column; gap: 14px; }
  .pageHeader h1, .hero h1, .composerIntro h1 { font-size: clamp(34px, 11vw, 54px); }
  .surface, .formSurface, .composer, .createStepPanel { border-radius: 18px !important; padding: 18px !important; }
  .fieldRow, .avatarTopCards, .providerDetailHero, .providerDetailGrid, .detailGrid { grid-template-columns: 1fr !important; }
  .buttonGroup, .formFooter, .composerFooter { flex-wrap: wrap; }
  .cinematicDrawer {
    display: flex;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 40;
    width: min(320px, 86vw);
    height: 100dvh;
    padding: 22px;
    flex-direction: column;
    gap: 24px;
    color: #fff;
    background: rgba(3,5,10,.90);
    border-left: 1px solid rgba(255,255,255,.12);
    -webkit-backdrop-filter: blur(28px);
    backdrop-filter: blur(28px);
    transform: translateX(100%);
    transition: transform .5s cubic-bezier(.16,1,.3,1);
  }
  .cinematicDrawer.is-open { transform: translateX(0); }
  .cinematicDrawerBrand { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 600; letter-spacing: -.02em; }
  .cinematicDrawerBrand img { width: 32px; height: 32px; object-fit: contain; border-radius: 10px; background: rgba(255,255,255,.92); }
  .cinematicDrawerNav { display: grid; gap: 8px; }
  .cinematicDrawerNav .navItem { justify-content: flex-start; padding: 13px 14px; color: rgba(240,245,255,.72) !important; opacity: 0; transform: translateX(12px); }
  .cinematicDrawer.is-open .cinematicDrawerNav .navItem { animation: vidrushDrawerLink .4s cubic-bezier(.16,1,.3,1) forwards; }
  .cinematicDrawer.is-open .cinematicDrawerNav .navItem:nth-child(1) { animation-delay: 60ms; }
  .cinematicDrawer.is-open .cinematicDrawerNav .navItem:nth-child(2) { animation-delay: 120ms; }
  .cinematicDrawer.is-open .cinematicDrawerNav .navItem:nth-child(3) { animation-delay: 180ms; }
  .cinematicDrawer.is-open .cinematicDrawerNav .navItem:nth-child(4) { animation-delay: 240ms; }
  .cinematicDrawer.is-open .cinematicDrawerNav .navItem:nth-child(5) { animation-delay: 300ms; }
  .cinematicMenuBackdrop { display: block; position: fixed; inset: 0; z-index: 35; background: rgba(0,0,0,.80); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; pointer-events: none; transition: opacity .3s ease; }
  .cinematicMenuBackdrop.is-open { opacity: 1; pointer-events: auto; }
  body.cinematicMenuOpen { overflow: hidden; }
}
@keyframes vidrushDrawerLink { to { opacity: 1; transform: translateX(0); } }
\n.avatarDetailRoute .logo { background: rgba(255,255,255,.08) !important; }\n