/* AIWP shared visual foundation.
   This layer standardizes typography and component states without changing page layout. */
:root {
  --aiwp-font-sans: Inter, "SF Pro Text", "Segoe UI Variable", "MiSans",
    "HarmonyOS Sans SC", "PingFang SC", "Microsoft YaHei UI",
    "Microsoft YaHei", sans-serif;
  --aiwp-font-mono: "Cascadia Mono", "SFMono-Regular", Consolas, monospace;

  --aiwp-type-caption: 11px;
  --aiwp-type-label: 12px;
  --aiwp-type-body: 13px;
  --aiwp-type-body-lg: 14px;
  --aiwp-type-title: 16px;
  --aiwp-type-heading: 20px;
  --aiwp-leading-tight: 1.3;
  --aiwp-leading-body: 1.58;

  --aiwp-bg: #e8eef3;
  --aiwp-bg-strong: #dae4eb;
  --aiwp-surface: #ffffff;
  --aiwp-surface-soft: #f4f7f9;
  --aiwp-surface-muted: #edf2f5;
  --aiwp-line: #cbd6de;
  --aiwp-line-strong: #9fb2c0;
  --aiwp-ink: #17232d;
  --aiwp-ink-soft: #40515e;
  --aiwp-muted: #71818d;
  --aiwp-cyan: #087f99;
  --aiwp-coral: #d95b2b;
  --aiwp-berry: #b94078;
  --aiwp-green: #3e8f6d;
  --aiwp-warning: #a66213;
  --aiwp-danger: #c5484f;
  --aiwp-dark: #0b1117;
  --aiwp-dark-raised: #121b23;
  --aiwp-dark-line: #2a3945;
  --aiwp-dark-text: #f2f6f8;
  --aiwp-dark-muted: #9cadb8;

  --aiwp-radius-control: 6px;
  --aiwp-radius-panel: 8px;
  --aiwp-shadow-panel: 0 10px 28px rgba(31, 52, 67, .09);
  --aiwp-shadow-raised: 0 16px 38px rgba(31, 52, 67, .13);
  --aiwp-focus-ring: 0 0 0 3px rgba(8, 127, 153, .16);
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body.theme-neofuture,
body.admin-neofuture {
  font-family: var(--aiwp-font-sans) !important;
  font-size: var(--aiwp-type-body-lg);
  font-weight: 500;
  line-height: var(--aiwp-leading-body);
  letter-spacing: 0;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body.theme-neofuture *,
body.admin-neofuture *,
body.theme-neofuture *::before,
body.theme-neofuture *::after,
body.admin-neofuture *::before,
body.admin-neofuture *::after {
  letter-spacing: 0;
}

body.theme-neofuture button,
body.theme-neofuture input,
body.theme-neofuture textarea,
body.theme-neofuture select,
body.admin-neofuture button,
body.admin-neofuture input,
body.admin-neofuture textarea,
body.admin-neofuture select {
  font-family: inherit;
}

body.theme-neofuture {
  --work-bg: var(--aiwp-bg);
  --work-bg-2: var(--aiwp-bg-strong);
  --work-panel: #f8fafb;
  --work-surface: var(--aiwp-surface);
  --work-surface-2: var(--aiwp-surface-soft);
  --work-line: var(--aiwp-line);
  --work-line-strong: var(--aiwp-line-strong);
  --work-text: var(--aiwp-ink);
  --work-text-soft: var(--aiwp-ink-soft);
  --work-muted: var(--aiwp-muted);
  --work-cyan: var(--aiwp-cyan);
  --work-orange: var(--aiwp-coral);
  --work-magenta: var(--aiwp-berry);
}

body.admin-neofuture {
  --admin-work-bg: var(--aiwp-bg);
  --admin-work-panel: var(--aiwp-surface);
  --admin-work-panel-2: var(--aiwp-surface-soft);
  --admin-work-line: var(--aiwp-line);
  --admin-work-text: var(--aiwp-ink);
  --admin-work-soft: var(--aiwp-ink-soft);
  --admin-work-muted: var(--aiwp-muted);
  --admin-work-cyan: var(--aiwp-cyan);
}

body.theme-neofuture :is(h1, h2, h3, h4, strong, b),
body.admin-neofuture :is(h1, h2, h3, h4, strong, b) {
  font-family: inherit;
  font-weight: 750;
  letter-spacing: 0;
}

body.theme-neofuture :is(h1, h2, h3, h4),
body.admin-neofuture :is(h1, h2, h3, h4) {
  line-height: var(--aiwp-leading-tight);
}

body.theme-neofuture .app-header h1,
body.admin-neofuture .top h1 {
  font-size: 18px;
  font-weight: 800;
}

body.theme-neofuture :is(
  .video-quick-composer h2,
  .video-library-head h2,
  .studio-empty h2,
  .login-card h2
) {
  font-size: var(--aiwp-type-heading);
  font-weight: 780;
  line-height: 1.35;
}

body.theme-neofuture :is(
  .section-title,
  .studio-title,
  .video-section-title,
  .video-quick-examples-head strong,
  .preview-hero .title,
  .exports-header .title,
  .pro-stage-title strong,
  .pro-inspector-head-line strong,
  .result-summary strong
),
body.admin-neofuture :is(.title, .item-name) {
  font-size: var(--aiwp-type-body-lg);
  font-weight: 720;
  line-height: 1.42;
}

body.theme-neofuture :is(
  .studio-field-label,
  .refine-field-label,
  .pro-field > span,
  .pro-field-label,
  .pro-range-head,
  .video-quick-production-head strong,
  .video-quick-avatar-select > span
),
body.admin-neofuture :is(.health-table th, .metric span) {
  font-size: var(--aiwp-type-label);
  font-weight: 650;
  line-height: 1.45;
}

body.theme-neofuture :is(
  .example-copy p,
  .studio-footnote,
  .pro-node-value,
  .pro-stage-title span,
  .pro-inspector-head-line span,
  .pro-project-fact span,
  .history-instruction,
  .history-feedback-label,
  .video-quick-example span,
  .video-quick-production-note,
  .video-cost-note
),
body.admin-neofuture :is(.sub, .item-meta) {
  color: var(--aiwp-muted);
  font-size: var(--aiwp-type-caption);
  font-weight: 500;
  line-height: 1.58;
}

body.theme-neofuture :is(
  .workspace-switch button,
  .studio-mode-switch button,
  .studio-tool,
  .video-quick-actions button,
  .video-quick-mode button,
  .video-quick-generate,
  .example-apply,
  .pro-toolbar-actions button,
  .pro-save-bar button,
  .feedback-icon-btn
),
body.admin-neofuture :is(.nav-btn, .el-button, .login-submit) {
  font-size: var(--aiwp-type-label);
  font-weight: 650;
  line-height: 1;
}

body.theme-neofuture :is(
  .studio-title,
  .studio-prompt-field textarea,
  .studio-select,
  .pro-input,
  .pro-select,
  .pro-textarea,
  .video-quick-adjust input,
  .video-quick-prompt textarea
),
body.admin-neofuture :is(
  .el-input__inner,
  .el-textarea__inner,
  .el-select__selected-item
) {
  font-size: var(--aiwp-type-body);
  font-weight: 520;
  line-height: 1.55;
}

body.theme-neofuture ::placeholder,
body.admin-neofuture ::placeholder {
  color: #8997a2 !important;
  font-weight: 450 !important;
  opacity: 1;
}

body.theme-neofuture :is(
  .prompt-box,
  .technical-copy,
  .model-route-copy,
  code,
  pre
),
body.admin-neofuture :is(code, pre) {
  font-family: var(--aiwp-font-mono);
  font-size: var(--aiwp-type-caption);
  font-variant-numeric: tabular-nums;
}

body.theme-neofuture :is(
  .user-pill,
  .contact-pill,
  .studio-badge,
  .pro-node-state,
  .workflow-node-state,
  .example-page-count,
  .version-pill
),
body.admin-neofuture :is(.status, .metric strong, .health-table td.num) {
  font-variant-numeric: tabular-nums;
}

body.theme-neofuture :is(
  .section,
  .preview-hero,
  .result-card,
  .history-card,
  .video-quick-stage,
  .video-library-toolbar,
  .pro-node-card,
  .workflow-node-card
),
body.admin-neofuture :is(.card, .metric, .item, .switch-row) {
  border-color: var(--aiwp-line);
  border-radius: var(--aiwp-radius-panel);
}

body.theme-neofuture :is(
  .video-quick-stage,
  .video-library-toolbar,
  .example-carousel
),
body.admin-neofuture .card {
  box-shadow: var(--aiwp-shadow-panel);
}

body.theme-neofuture :is(
  button,
  a,
  input,
  textarea,
  select,
  [role="button"]
):focus-visible,
body.admin-neofuture :is(
  button,
  a,
  input,
  textarea,
  select,
  [role="button"]
):focus-visible {
  outline: 2px solid var(--aiwp-cyan);
  outline-offset: 2px;
}

body.theme-neofuture :is(
  .el-input__wrapper,
  .el-select__wrapper,
  .el-textarea__inner,
  .pro-input,
  .pro-select,
  .pro-textarea,
  .studio-select,
  .studio-prompt-field textarea
),
body.admin-neofuture :is(
  .el-input__wrapper,
  .el-select__wrapper,
  .el-textarea__inner
) {
  border-radius: var(--aiwp-radius-control) !important;
}

body.theme-neofuture :is(
  .el-input__wrapper.is-focus,
  .el-select__wrapper.is-focused,
  .el-textarea__inner:focus,
  .pro-input:focus,
  .pro-select:focus,
  .pro-textarea:focus,
  .studio-select:focus,
  .studio-prompt-field textarea:focus
),
body.admin-neofuture :is(
  .el-input__wrapper.is-focus,
  .el-select__wrapper.is-focused,
  .el-textarea__inner:focus
) {
  border-color: var(--aiwp-cyan) !important;
  box-shadow: var(--aiwp-focus-ring) !important;
  outline: 0;
}

body.theme-neofuture :is(button, .el-button):disabled,
body.admin-neofuture :is(button, .el-button):disabled {
  cursor: not-allowed;
  filter: saturate(.72);
}

body.theme-neofuture .app-header,
body.admin-neofuture .top {
  background-color: var(--aiwp-dark);
  color: var(--aiwp-dark-text);
}

body.theme-neofuture :is(
  .app-body.studio-v5,
  .video-workspace.canvas-v5,
  .professional-workspace
) {
  view-transition-name: aiwp-workspace;
}

body.theme-neofuture :is(.btn-generate, .video-quick-generate),
body.admin-neofuture :is(.el-button--primary, .login-submit) {
  border-color: var(--aiwp-coral) !important;
  background: var(--aiwp-coral) !important;
  color: #fff !important;
  font-weight: 720 !important;
}

body.theme-neofuture :is(.btn-generate, .video-quick-generate):hover:not(:disabled),
body.admin-neofuture :is(.el-button--primary, .login-submit):hover:not(:disabled) {
  border-color: #c94b20 !important;
  background: #c94b20 !important;
}

body.theme-neofuture .pro-node-card > strong,
body.theme-neofuture .workflow-node-card strong {
  font-size: var(--aiwp-type-label);
  font-weight: 700;
}

body.theme-neofuture .pro-node-value,
body.theme-neofuture .workflow-node-card p {
  font-size: 10px;
}

body.admin-neofuture .health-table {
  font-size: var(--aiwp-type-label);
}

body.admin-neofuture .metric strong {
  font-size: 22px;
  font-weight: 760;
}

::view-transition-old(aiwp-workspace) {
  animation: aiwp-view-old 150ms ease-out both;
}

::view-transition-new(aiwp-workspace) {
  animation: aiwp-view-new 240ms cubic-bezier(.2, .72, .2, 1) both;
}

@keyframes aiwp-view-old {
  to {
    opacity: 0;
    transform: translate3d(0, -3px, 0) scale(.996);
  }
}

@keyframes aiwp-view-new {
  from {
    opacity: 0;
    transform: translate3d(0, 5px, 0) scale(.994);
  }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(aiwp-workspace),
  ::view-transition-new(aiwp-workspace) {
    animation: none;
  }
}