/* Shared AI workspace theme. Every rule is scoped to AI pages. */
.ai-shell {
  --ai-ink: #19364a;
  --ai-muted: #526879;
  --ai-line: #d9e4e9;
  --ai-paper: #f5f8fa;
  --ai-blue: #245dd8;
  --ai-teal: #08766f;
  --ai-mint: #eaf5f0;
  --bg: var(--ai-paper);
  --panel: #fff;
  --text: var(--ai-ink);
  --muted: var(--ai-muted);
  --line: var(--ai-line);
  --blue: var(--ai-blue);
  --cyan: var(--ai-teal);
  --green: var(--ai-teal);
  --ink: var(--ai-ink);
  --paper: var(--ai-paper);
  --teal: var(--ai-teal);
  --white: #fff;
  --lime: #d8eee4;
  --tv-accent: var(--ai-teal);
  --tv-border: var(--ai-line);
  --tv-muted: var(--ai-muted);
  margin: 0;
  min-height: 100vh;
  background: var(--ai-paper);
  color: var(--ai-ink);
  color-scheme: light;
  font: 16px/1.6 Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
.ai-shell *, .ai-shell *::before, .ai-shell *::after { box-sizing: border-box; }
.ai-shell [hidden] { display: none !important; }
.ai-shell a { color: inherit; }
.ai-shell button, .ai-shell input, .ai-shell select, .ai-shell textarea { font: inherit; }
.ai-shell button { cursor: pointer; }
.ai-shell button:disabled { cursor: default; opacity: .55; }
.ai-shell :focus-visible { outline: 3px solid var(--ai-blue); outline-offset: 4px; }
.ai-shell .ai-skip-link { position: absolute; z-index: 200; left: 16px; top: -100px; padding: 12px 20px; border-radius: 10px; background: #fff; color: var(--ai-blue); }
.ai-shell .ai-skip-link:focus { top: 12px; }
.ai-shell .ai-site-header { position: relative; top: auto; z-index: 10; display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; min-height: 92px; padding: 18px max(32px, calc((100vw - 1344px)/2)); border-bottom: 1px solid var(--ai-line); background: #fff; box-shadow: none; backdrop-filter: none; }
.ai-shell .ai-site-header .vmt-header-start { display: flex; flex-direction: row; align-items: center; gap: 22px; width: auto; min-width: 0; }
.ai-shell .ai-site-header .vmt-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; white-space: nowrap; }
.ai-shell .ai-site-header .vmt-brand img { display: block; width: 40px; height: 40px; object-fit: contain; }
.ai-shell .ai-site-header .vmt-brand span { display: flex; flex-direction: column; gap: 3px; }
.ai-shell .ai-site-header .vmt-brand b { font-size: 18px; letter-spacing: -.035em; line-height: 1.2; }
.ai-shell .ai-site-header .vmt-brand small { color: var(--ai-muted); font-size: 10px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; }
.ai-shell .vmt-back { display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border: 1px solid var(--ai-line); border-radius: 9px; background: #f8fafc; color: var(--ai-muted); font-size: 12px; font-weight: 650; text-decoration: none; white-space: nowrap; }
.ai-shell .vmt-back:hover { background: #edf4fc; border-color: #b7cde4; color: var(--ai-blue); transform: none; }
.ai-shell .ai-site-header nav { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; font-size: 12px; }
.ai-shell .ai-site-header nav a { color: var(--ai-muted); text-decoration: none; }
.ai-shell .ai-site-header nav a:hover { color: var(--ai-blue); }
.ai-shell .ai-account-link { display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px; border: 1px solid #c6d9e7; border-radius: 10px; background: #f3f7fc; font-size: 12px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.ai-shell .ai-account-link span { color: var(--ai-blue); }
.ai-shell .ai-workspace-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; width: min(1280px, calc(100% - 64px)); margin: 0 auto; padding: 20px 0; border-bottom: 1px solid var(--ai-line); }
.ai-shell .ai-workspace-nav > a { display: inline-flex; align-items: center; gap: 9px; padding: 9px 14px; border: 1px solid transparent; border-radius: 10px; color: var(--ai-muted); font-size: 12px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.ai-shell .ai-workspace-nav > a:hover { background: #eaf1f8; color: var(--ai-blue); }
.ai-shell .ai-workspace-nav > a[aria-current] { border-color: #ccddef; background: #e9f1fb; color: #1e52b8; }
.ai-shell .ai-workspace-nav > a:last-child { margin-left: auto; }
.ai-shell .ai-workspace-nav > a > span { padding: 2px 6px; border-radius: 5px; background: #e1eee8; color: #306455; font-size: 9px; font-weight: 700; }
.ai-shell .ai-directory, .ai-shell .vmt-workspace, .ai-shell .tv-main, .ai-shell.ai-creative > main { width: min(1280px, calc(100% - 64px)); max-width: 1280px; margin: 0 auto; padding: 32px 0 72px; }
.ai-shell .ai-page-hero { position: relative; isolation: isolate; display: block; overflow: hidden; margin: 0 0 32px; padding: 46px 48px; border: 1px solid #d3e3e8; border-radius: 24px; background: radial-gradient(ellipse at 90% 15%, #e1eafe 0, transparent 55%), linear-gradient(120deg, #e6f2ee, #f7f8ef 60%, #edf3fc); color: var(--ai-ink); box-shadow: none; }
.ai-shell .ai-page-hero h1 { position: relative; z-index: 1; max-width: 850px; margin: 16px 0 20px; font-size: clamp(36px, 4.2vw, 60px); font-weight: 650; letter-spacing: -.055em; line-height: 1.08; }
.ai-shell .ai-page-hero h1 em { color: var(--ai-teal); font-family: inherit; font-weight: inherit; font-style: normal; }
.ai-shell .ai-page-hero > p, .ai-shell .ai-page-hero > div > p { max-width: 650px; margin: 0; color: #486373; font-size: 16px; line-height: 1.75; }
.ai-shell .ai-page-hero .ai-eyebrow, .ai-shell .ai-page-hero .tv-eyebrow, .ai-shell .ai-page-hero .cs-eyebrow, .ai-shell .vmt-kicker { color: #296659; font-size: 10px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.ai-shell .ai-page-hero .tv-badges, .ai-shell .ai-page-hero .cs-hero-tags { margin-top: 24px; }
.ai-shell .tv-badges span, .ai-shell .cs-hero-tags span { border: 1px solid #bed6d0; background: #ffffff8c; color: #315e57; font-size: 11px; }
.ai-shell .ai-tool-context { max-width: 900px; margin: -6px 0 30px; padding-left: 16px; border-left: 3px solid #b2d6ce; color: var(--ai-muted); font-size: 13px; line-height: 1.7; }
.ai-shell .ai-tool-context a { color: #1f59c7; text-underline-offset: 3px; }
.ai-shell #accountNotice { margin: 0 0 24px; }
.ai-shell .vmt-panel, .ai-shell .tv-panel, .ai-shell .cs-form-panel, .ai-shell .cs-price-panel, .ai-shell .cs-resources, .ai-shell .cs-owner, .ai-shell .cs-result { border: 1px solid var(--ai-line); border-radius: 20px; background: #fff; color: var(--ai-ink); box-shadow: 0 8px 28px #19364a05; }
.ai-shell .ai-wallet, .ai-shell .tv-wallet, .ai-shell .cs-price-panel { position: sticky; top: 24px; background: linear-gradient(145deg, #edf5f0, #f0f5fb); border-color: #cedfdc; }
.ai-shell .ai-wallet > strong, .ai-shell .tv-wallet > strong { font-size: 34px; letter-spacing: -.045em; }
.ai-shell .vmt-step > b { background: #e9f1fb; color: var(--ai-blue); flex-shrink: 0; }
.ai-shell .vmt-step strong { color: var(--ai-ink); }
.ai-shell .vmt-step small { color: var(--ai-muted); font-size: 12px; font-weight: 400; }
.ai-shell .tv-heading > span, .ai-shell .cs-number { color: var(--ai-teal); border-color: #cee0dc; }
.ai-shell .tv-heading h2, .ai-shell .cs-section-intro h2 { color: var(--ai-ink); }
.ai-shell .vmt-section-eyebrow, .ai-shell .ai-eyebrow, .ai-shell .tv-eyebrow { color: var(--ai-teal); }
.ai-shell input:not([type=checkbox]):not([type=radio]), .ai-shell select, .ai-shell textarea { min-width: 0; max-width: 100%; border: 1px solid #c3d4df; border-radius: 10px; background: #fff; color: var(--ai-ink); padding: 12px 14px; font-size: 14px; font-weight: 400; }
.ai-shell textarea { line-height: 1.65; resize: vertical; }
.ai-shell input::placeholder, .ai-shell textarea::placeholder { color: #607587; opacity: 1; }
.ai-shell option { background: #fff; color: var(--ai-ink); }
.ai-shell input[type=checkbox], .ai-shell input[type=radio] { accent-color: var(--ai-teal); }
.ai-shell input[type=file] { width: 100%; background: #f5f9fb; border: 1px dashed #a6c3d5; font-size: 12px; }
.ai-shell input[type=file]::file-selector-button { margin-right: 12px; padding: 9px 13px; border: 0; border-radius: 7px; background: #e3eefb; color: #2058bc; font: inherit; font-weight: 700; cursor: pointer; }
.ai-shell .ai-field, .ai-shell .ai-options label, .ai-shell .tv-field { font-size: 13px; font-weight: 650; color: var(--ai-ink); }
.ai-shell .tv-field select { max-width: none; }
.ai-shell .ai-help, .ai-shell .ai-field small, .ai-shell .tv-help, .ai-shell .tv-field small, .ai-shell .tv-heading p, .ai-shell .cs-muted, .ai-shell .cs-fine { color: var(--ai-muted); }
.ai-shell .tv-help, .ai-shell .tv-heading p, .ai-shell .tv-field small { font-size: 12px; line-height: 1.75; }
.ai-shell .ai-image-upload, .ai-shell .tv-upload { border-color: #a1c7d0; background: #f1f8f7; }
.ai-shell .ai-image-upload strong, .ai-shell .tv-upload > b { color: var(--ai-teal); }
.ai-shell .ai-image-upload > span, .ai-shell .ai-image-upload #referenceSelection, .ai-shell .tv-upload > span, .ai-shell .tv-gallery figcaption { color: var(--ai-muted); }
.ai-shell .vmt-button, .ai-shell .tv-primary, .ai-shell .cs-button.primary { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; border: 1px solid transparent; border-radius: 10px; background: linear-gradient(120deg, #245dd8, #3570e4); color: #fff; box-shadow: 0 5px 14px #245dd817; padding: 11px 16px; font-size: 13px; font-weight: 700; text-decoration: none; }
.ai-shell .vmt-button:hover:not(:disabled), .ai-shell .tv-primary:hover:not(:disabled), .ai-shell .cs-button.primary:hover:not(:disabled) { background: #1e53c3; }
.ai-shell .vmt-button-secondary, .ai-shell .vmt-secondary, .ai-shell .tv-secondary, .ai-shell .cs-button.secondary { min-height: 44px; border: 1px solid #bed2df; border-radius: 10px; background: #f5f8fc; color: #254f7b; box-shadow: none; padding: 11px 16px; font-size: 13px; font-weight: 650; }
.ai-shell .vmt-button-secondary:hover:not(:disabled), .ai-shell .tv-secondary:hover:not(:disabled), .ai-shell .cs-button.secondary:hover:not(:disabled) { background: #eaf2fc; }
.ai-shell .ai-package, .ai-shell .tv-package { border-color: #c6dadc; background: #ffffffd9; color: var(--ai-ink); font-size: 13px; }
.ai-shell .ai-package small, .ai-shell .tv-package small { color: var(--ai-muted); }
.ai-shell .ai-voice-engines a { border: 1px solid var(--ai-line); background: #fff; color: var(--ai-ink); }
.ai-shell .ai-voice-engines a[aria-current] { border: 2px solid #4b9e94; background: #edf7f3; }
.ai-shell .ai-voice-engines span { color: var(--ai-muted); }
.ai-shell .vmt-notice, .ai-shell .tv-notice, .ai-shell .cs-status { border: 1px solid #c8dde8; background: #eef6fa; color: #294f66; }
.ai-shell .vmt-notice.signin-required { background: #edf4ff; color: var(--ai-ink); border-color: #9fbde7; }
.ai-shell .vmt-ad { background: #fff; }
.ai-shell .vmt-ad-label { color: var(--ai-muted); }
.ai-shell .vmt-status-box, .ai-shell .tv-notice a { color: #1f5c7e; }
.ai-shell .vmt-notice.error, .ai-shell .vmt-status-box.error, .ai-shell .cs-status[data-state=error], .ai-shell .tv-error { background: #fff1ee; color: #963b2d !important; border-color: #e7bbb3; }
.ai-shell .ai-refund, .ai-shell .vmt-status.active { background: #e9f5ee; color: #25664b; }
.ai-shell .tv-rates, .ai-shell .tv-quote, .ai-shell .tv-job, .ai-shell .tv-details, .ai-shell .tv-film-story section { border-color: var(--ai-line); }
.ai-shell .tv-rates b, .ai-shell .tv-details summary, .ai-shell .tv-film-story summary { color: #315d65; }
.ai-shell .tv-rates span, .ai-shell .tv-wallet > p, .ai-shell .tv-wallet > small, .ai-shell .tv-quote small, .ai-shell .tv-quote p, .ai-shell .tv-details, .ai-shell .tv-job p, .ai-shell .tv-film-story { color: var(--ai-muted); }
.ai-shell .tv-progress, .ai-shell .vmt-progress { background: #dfeaf0; }
.ai-shell .tv-progress > span { background: #199086; }
.ai-shell .tv-film-review { background: #edf8f1; border-color: #badbc7; color: #2a674d !important; }
.ai-shell .tv-film-cost-note { color: #7e5c24 !important; }
.ai-shell .tv-preview-action #filmStatus:not(:empty) { border-color: #c7dce5; background: #eef6fa; color: #294f66; }
.ai-shell .tv-preview-action #filmStatus[data-state=error] { border-color: #e7bbb3; background: #fff1ee; color: #963b2d; }
.ai-shell .tv-preview-action #filmStatus[data-state=success] { border-color: #b4d7c5; background: #ecf8f0; color: #25664b; }
.ai-shell #filmCreate[aria-busy=true] { opacity: 1; }
.ai-shell #filmCreate[aria-busy=true]::before { border-color: #ffffff55; border-top-color: #fff; }
.ai-shell #filmCreate[data-state=success] { opacity: 1; background: #d9f1e5; color: #245d44; }
.ai-shell .tv-job video, .ai-shell .tv-film-preview { background: #dce6ea; }
.ai-shell .tv-hero { display: flex; gap: 36px; }
.ai-shell .tv-hero-mark { width: 240px; height: 240px; margin: 0 25px; border-color: #b6d3d2; background: radial-gradient(circle, #cce5dd80, transparent 70%); box-shadow: 0 0 0 22px #d9e9e650, 0 0 0 44px #e0eee930; }
.ai-shell .tv-hero-mark > span { color: #366b64; }
.ai-shell .tv-wave i { background: linear-gradient(#72b3b0, #28867f); }
.ai-shell .cs-hero { display: grid; grid-template-columns: 1.25fr 1fr; padding: 46px 48px; gap: 30px; }
.ai-shell .cs-hero-art { min-height: 260px; background: radial-gradient(ellipse at center, #b5d6cb55, transparent 68%); }
.ai-shell .cs-orbit { border-color: #87b5b180; }
.ai-shell .cs-orbit.two { background: linear-gradient(140deg, #afcebc33, #dce6fc66); }
.ai-shell .cs-play { color: #297c76; text-shadow: 0 8px 40px #56898722; }
.ai-shell .cs-art-label { color: #366b64; }
.ai-shell .cs-tabs { border-color: var(--ai-line); background: #eaf0f4; }
.ai-shell .cs-tabs button[aria-selected=true] { background: #fff; color: var(--ai-teal); }
.ai-shell .cs-workflow[aria-pressed=true] { border-color: #5eaaa0; background: #eef7f2; box-shadow: inset 0 0 0 1px #5eaaa0; }
.ai-shell .cs-workflow:hover { border-color: #96bcb8; }
.ai-shell .cs-status[data-state=success] { border-color: #b4d7c5; background: #ecf8f0; color: #25664b; }
.ai-shell .cs-badge { background: #eaf4ee; color: #266a54; }
.ai-shell .cs-file-preview, .ai-shell .cs-result img, .ai-shell .cs-result video { background: #e9eff3; }
.ai-shell .cs-array-add { background: #f0f7f4; border-color: #99c2b4; }
.ai-shell .cs-live { background: #f5f8fa; color: var(--ai-ink); }
.ai-shell .cs-live-target { background: #dce7eb; }
.ai-shell .ai-site-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; max-width: none; margin: 0; padding: 28px max(32px, calc((100vw - 1280px)/2)); border-top: 1px solid var(--ai-line); background: #fff; color: var(--ai-muted); font-size: 12px; }
.ai-shell .ai-footer-brand { display: flex; flex-direction: column; gap: 4px; color: var(--ai-ink); font-size: 15px; font-weight: 750; text-decoration: none; }
.ai-shell .ai-footer-brand span { color: var(--ai-muted); font-size: 11px; font-weight: 400; }
.ai-shell .ai-site-footer nav { display: flex; flex-wrap: wrap; gap: 20px; }
.ai-shell .ai-site-footer nav a { text-decoration: none; }
@media (max-width: 1150px) {
  .ai-shell .ai-site-header { flex-wrap: wrap; gap: 16px; }
  .ai-shell .ai-site-header nav { order: 3; width: 100%; justify-content: center; padding-top: 12px; border-top: 1px solid var(--ai-line); }
}
@media (max-width: 900px) {
  .ai-shell .ai-workspace-nav > a:last-child { margin-left: 0; }
  .ai-shell .ai-wallet, .ai-shell .tv-wallet { position: static; }
  .ai-shell .ai-wallet { grid-row: auto; }
  .ai-shell .tv-hero-mark { display: none; }
  .ai-shell .cs-hero-art { min-height: 220px; }
}
@media (max-width: 760px) {
  .ai-shell .ai-workspace-nav, .ai-shell .ai-directory, .ai-shell .vmt-workspace, .ai-shell .tv-main, .ai-shell.ai-creative > main { width: calc(100% - 32px); }
  .ai-shell .ai-site-header { padding: 16px; }
  .ai-shell .ai-site-header .vmt-header-start { gap: 12px; }
  .ai-shell .ai-site-header .vmt-brand img { width: 34px; height: 34px; }
  .ai-shell .ai-site-header .vmt-brand b { font-size: 16px; }
  .ai-shell .ai-site-header .vmt-brand small { font-size: 8px; }
  .ai-shell .ai-site-header nav { justify-content: flex-start; gap: 12px 20px; }
  .ai-shell .ai-workspace-nav { gap: 4px; padding: 14px 0; }
  .ai-shell .ai-workspace-nav > a { padding: 7px 10px; font-size: 11px; }
  .ai-shell .ai-page-hero, .ai-shell .cs-hero { display: block; padding: 30px 26px; border-radius: 18px; }
  .ai-shell .ai-page-hero h1 { font-size: clamp(34px, 8vw, 48px); }
  .ai-shell .cs-hero-art { display: none; }
  .ai-shell .cs-price-panel { position: static; }
  .ai-shell .ai-site-footer { padding: 26px 20px; }
}
@media (max-width: 480px) {
  .ai-shell .ai-site-header { gap: 12px 8px; }
  .ai-shell .ai-site-header .vmt-header-start { flex-wrap: nowrap; gap: 10px; }
  .ai-shell .ai-site-header .vmt-back { font-size: 0; padding: 7px 9px; }
  .ai-shell .ai-site-header .vmt-back span { font-size: 16px; }
  .ai-shell .ai-site-header .vmt-brand b { font-size: 14px; }
  .ai-shell .ai-site-header .vmt-brand img { width: 30px; height: 30px; }
  .ai-shell .ai-account-link { margin-left: auto; font-size: 11px; padding: 8px 10px; }
  .ai-shell .ai-site-header nav { font-size: 11px; gap: 10px 16px; }
  .ai-shell .ai-page-hero { padding: 26px 22px; }
  .ai-shell .ai-page-hero > p, .ai-shell .ai-page-hero > div > p { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .ai-shell, .ai-shell * { scroll-behavior: auto !important; transition: none !important; }
}