/*
 * 星河引力统一设计系统 v2
 * 两套字体、五级文字层级、固定色板、8px 间距网格与统一组件。
 * 该文件只改变视觉，不改 DOM、事件、路由和业务状态。
 */
:root {
  color-scheme: dark;

  /* Typography: the entire product uses only these two stacks. */
  --xh-font-title: "Songti SC", serif;
  --xh-font-body: "Microsoft YaHei", sans-serif;
  --xh-type-display: 68px;
  --xh-type-page: 40px;
  --xh-type-section: 24px;
  --xh-type-card: 18px;
  --xh-type-body: 14px;
  --xh-type-caption: 12px;
  --xh-leading-tight: 1.2;
  --xh-leading-title: 1.35;
  --xh-leading-body: 1.65;
  --xh-leading-caption: 1.5;

  /* Brand and semantic colors. */
  --xh-color-brand: #e4c478;
  --xh-color-brand-hover: #f0d793;
  --xh-color-accent: #9edcff;
  --xh-color-accent-soft: #17334a;
  --xh-color-text: #edf3f7;
  --xh-color-text-2: #9aabba;
  --xh-color-text-3: #6f8294;
  --xh-color-disabled: #4c6072;
  --xh-color-success: #67d3aa;
  --xh-color-warning: #e5b65e;
  --xh-color-danger: #ef7b86;
  --xh-color-info: #8bd6ff;
  --xh-color-bg: #050b14;
  --xh-color-bg-2: #07121f;
  --xh-color-surface: #0a1928;
  --xh-color-surface-2: #0d2133;
  --xh-color-control: #0b1c2b;
  --xh-color-border: rgba(174, 207, 232, .16);
  --xh-color-border-strong: rgba(183, 219, 244, .30);
  --xh-color-overlay: rgba(1, 5, 11, .82);

  /* 8px spacing grid. */
  --xh-space-1: 4px;
  --xh-space-2: 8px;
  --xh-space-3: 12px;
  --xh-space-4: 16px;
  --xh-space-5: 24px;
  --xh-space-6: 32px;
  --xh-space-7: 48px;
  --xh-space-8: 64px;

  /* Components. */
  --xh-radius-control: 10px;
  --xh-radius-card: 16px;
  --xh-radius-panel: 20px;
  --xh-control-height: 40px;
  --xh-input-height: 44px;
  --xh-card-padding: 24px;
  --xh-shadow-card: 0 16px 42px rgba(0, 0, 0, .22);
  --xh-shadow-panel: 0 28px 72px rgba(0, 0, 0, .38);
  --xh-focus-ring: 0 0 0 3px rgba(158, 220, 255, .14);

  /* Compatibility aliases used by existing applications. */
  --xh-ink: var(--xh-color-bg);
  --xh-navy: var(--xh-color-bg-2);
  --xh-panel: var(--xh-color-surface);
  --xh-control: var(--xh-color-control);
  --xh-line: var(--xh-color-border);
  --xh-line-strong: var(--xh-color-border-strong);
  --xh-ivory: var(--xh-color-text);
  --xh-text: var(--xh-color-text);
  --xh-muted: var(--xh-color-text-2);
  --xh-gold: var(--xh-color-brand);
  --xh-ice: var(--xh-color-accent);
}

:root,
[data-theme="dark"] {
  --bg-base: var(--xh-color-bg);
  --bg-surface: var(--xh-color-surface);
  --bg-subtle: var(--xh-color-bg-2);
  --bg-elevated: var(--xh-color-surface-2);
  --border-default: var(--xh-color-border);
  --border-strong: var(--xh-color-border-strong);
  --border-subtle: rgba(174, 207, 232, .10);
  --text-primary: var(--xh-color-text);
  --text-secondary: var(--xh-color-text-2);
  --text-tertiary: var(--xh-color-text-3);
  --text-disabled: var(--xh-color-disabled);
  --brand-default: var(--xh-color-accent);
  --brand-hover: #c5eaff;
  --brand-active: #78c7f3;
  --brand-subtle: var(--xh-color-accent-soft);
  --brand-border: var(--xh-color-border-strong);
  --brand-on: #06111d;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .30);
  --shadow-md: var(--xh-shadow-card);
  --shadow-lg: var(--xh-shadow-panel);
  --focus-ring: var(--xh-focus-ring);
  --overlay-bg: var(--xh-color-overlay);
}

html:not([data-xh-route="canvas"]) body,
html:not([data-xh-route="canvas"]) button,
html:not([data-xh-route="canvas"]) input,
html:not([data-xh-route="canvas"]) textarea,
html:not([data-xh-route="canvas"]) select,
html:not([data-xh-route="canvas"]) table,
html:not([data-xh-route="canvas"]) label,
html:not([data-xh-route="canvas"]) .xh-home-v6 {
  font-family: var(--xh-font-body) !important;
}

/* Enforce the two-font rule without touching icon-font carriers. */
html:not([data-xh-route="canvas"]) :where(
  p, a, span, strong, em, small, label, li, dt, dd, th, td, caption,
  button, input, textarea, select, code, pre
):where(:not([class*="icon"])):where(:not([class^="fa-"])):where(:not([class*="material-symbol"])) {
  font-family: var(--xh-font-body) !important;
}

html[data-xh-route="canvas"] :is(
  [data-top-shell], [data-bottom-shell], [data-canvas-sidebar], [data-asset-panel],
  [data-workflow-panel], [data-history-panel], [data-menu-panel], [data-mini-map-panel],
  [data-selection-toolbar], [data-shortcut-panel], [data-canvas-context-menu],
  [data-prompt-model-menu], [data-video-story-panel]
),
html[data-xh-route="canvas"] :is(
  [data-top-shell], [data-bottom-shell], [data-canvas-sidebar], [data-asset-panel],
  [data-workflow-panel], [data-history-panel], [data-menu-panel], [data-mini-map-panel]
) :is(button, input, textarea, select) {
  font-family: var(--xh-font-body) !important;
}

html:not([data-xh-route="canvas"]) :is(h1, h2, h3, h4, h5, h6),
.xh-home-v6 :is(h1, h2, h3),
.xh-brand strong,
.top-brand,
.brand,
#xh-global-brand strong {
  font-family: var(--xh-font-title) !important;
  color: var(--xh-color-text);
}

html:not([data-xh-route="canvas"]) :is(h1, h2, h3, h4, h5, h6) :is(span, strong, em),
.brand > span,
.top-brand > span,
#xh-global-brand strong {
  font-family: var(--xh-font-title) !important;
}

html:not([data-xh-route="canvas"]) h1 {
  margin-block: 0 var(--xh-space-5);
  font-size: var(--xh-type-page) !important;
  font-weight: 700 !important;
  line-height: var(--xh-leading-tight) !important;
  letter-spacing: .02em !important;
}

html:not([data-xh-route="canvas"]) h2 {
  margin-block: 0 var(--xh-space-4);
  font-size: var(--xh-type-section) !important;
  font-weight: 700 !important;
  line-height: var(--xh-leading-title) !important;
  letter-spacing: .03em !important;
}

html:not([data-xh-route="canvas"]) :is(h3, h4, h5, h6) {
  margin-block: 0 var(--xh-space-3);
  font-size: var(--xh-type-card) !important;
  font-weight: 600 !important;
  line-height: var(--xh-leading-title) !important;
  letter-spacing: .01em !important;
}

html:not([data-xh-route="canvas"]) :is(p, li, td, th, label),
html:not([data-xh-route="canvas"]) :is(button, input, textarea, select) {
  font-size: var(--xh-type-body);
  line-height: var(--xh-leading-body);
}

html:not([data-xh-route="canvas"]) :is(small, .meta, .caption, .helper, .hint, .eyebrow, .step-label) {
  font-size: var(--xh-type-caption) !important;
  line-height: var(--xh-leading-caption) !important;
  color: var(--xh-color-text-2);
}

html:not([data-xh-route="canvas"]) :is(
  input:not([type]),
  input[type="text"], input[type="password"], input[type="email"], input[type="tel"],
  input[type="search"], input[type="url"], input[type="number"], input[type="date"],
  input[type="datetime-local"], input[type="time"], textarea, select,
  .form-input, .form-control, .input, .select, .ui-input, .search-box
) {
  border: 1px solid var(--xh-color-border) !important;
  border-radius: var(--xh-radius-control) !important;
  background: var(--xh-color-control) !important;
  color: var(--xh-color-text) !important;
  box-shadow: none !important;
}

html:not([data-xh-route="canvas"]) :is(
  input:not([type]),
  input[type="text"], input[type="password"], input[type="email"], input[type="tel"],
  input[type="search"], input[type="url"], input[type="number"], input[type="date"],
  input[type="datetime-local"], input[type="time"], select,
  .form-input, .form-control, .input, .select, .ui-input, .search-box
) {
  min-height: var(--xh-input-height);
  padding-inline: var(--xh-space-4);
}

html:not([data-xh-route="canvas"]) textarea { padding: var(--xh-space-3) var(--xh-space-4); }

html:not([data-xh-route="canvas"]) :is(
  input:not([type]), input[type="text"], input[type="password"], input[type="email"],
  input[type="tel"], input[type="search"], input[type="url"], input[type="number"],
  input[type="date"], input[type="datetime-local"], input[type="time"], textarea, select,
  .form-input, .form-control, .input, .select, .ui-input, .search-box
):focus,
html:not([data-xh-route="canvas"]) .search-box:focus-within {
  border-color: var(--xh-color-accent) !important;
  outline: none !important;
  box-shadow: var(--xh-focus-ring) !important;
}

html:not([data-xh-route="canvas"]) :is(
  input:not([type]), input[type="text"], input[type="password"], input[type="email"],
  input[type="tel"], input[type="search"], input[type="url"], input[type="number"], textarea
)::placeholder {
  color: var(--xh-color-text-3) !important;
  opacity: 1;
}

html:not([data-xh-route="canvas"]) :is(
  button, .btn, .button, .primary-button, .secondary-file-button,
  .export-button, .action-btn, .ui-btn-primary, .ui-btn-ghost
) {
  border-radius: var(--xh-radius-control) !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  transition: color .18s ease, background-color .18s ease, border-color .18s ease, transform .18s ease !important;
}

html:not([data-xh-route="canvas"]) :is(.btn-primary, .button.primary, .btn.primary, .btn.gold, .primary-button, .enter-btn, .action-btn.primary, .ui-btn-primary) {
  min-height: var(--xh-control-height);
  color: #06111d !important;
  background: linear-gradient(135deg, var(--xh-color-brand-hover), #cda651) !important;
  border: 1px solid rgba(245, 220, 158, .56) !important;
  box-shadow: 0 8px 22px rgba(184, 143, 55, .16) !important;
}

html:not([data-xh-route="canvas"]) :is(.btn-primary, .button.primary, .btn.primary, .btn.gold, .primary-button, .enter-btn, .action-btn.primary, .ui-btn-primary):hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
}

html:not([data-xh-route="canvas"]) :is(.btn-outline, .button.secondary, .secondary-file-button, .export-button, .text-button, .action-btn, .ui-btn-ghost) {
  min-height: var(--xh-control-height);
  color: var(--xh-color-text) !important;
  background: var(--xh-color-control) !important;
  border: 1px solid var(--xh-color-border) !important;
  box-shadow: none !important;
}

html:not([data-xh-route="canvas"]) :is(button, a):focus-visible {
  outline: 2px solid var(--xh-color-accent) !important;
  outline-offset: 2px;
}

/* One card treatment shared across the main SPA and all independent apps. */
html:not([data-xh-route="canvas"]) :is(
  .mh-card, .xh-login-card, .xh-account-panel, .xh-dialog-panel, .xh-announcement-dialog, .xh-points-panel,
  .project-card, .profile-card, .detail-card, .billing-card, .redeem-card, .vcoin-card, .vcoin-records-shell,
  .upload-card, .pipeline-card, .model-picker, .result-panel, .standard-grid article, .tech-note,
  .metric-card, .toolbar, .character-card, .detail-panel, .modal, .login-notice, .asset-item, .empty-state,
  .panel, .metric, .order, .analysis div, .script, .ui-floating-panel
) {
  border: 1px solid var(--xh-color-border) !important;
  border-radius: var(--xh-radius-card) !important;
  background: var(--xh-color-surface) !important;
  color: var(--xh-color-text) !important;
  box-shadow: var(--xh-shadow-card) !important;
}

html:not([data-xh-route="canvas"]) :is(.mh-card, .upload-card, .pipeline-card, .model-picker, .metric-card, .detail-panel, .analysis div, .script, .tech-note) {
  padding: var(--xh-card-padding) !important;
}

html:not([data-xh-route="canvas"]) :is(.xh-account-panel, .xh-dialog-panel, .xh-announcement-dialog, .xh-points-panel, .modal, .notice-dialog) {
  border-radius: var(--xh-radius-panel) !important;
  background: var(--xh-color-surface) !important;
  box-shadow: var(--xh-shadow-panel) !important;
}

html:not([data-xh-route="canvas"]) :is(.project-card, .character-card, .asset-item, .order):hover {
  border-color: var(--xh-color-border-strong) !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, .30) !important;
}

html:not([data-xh-route="canvas"]) :is(.badge, .status, .status-pill, .tag, .demo-badge, .card-project, .project-tag, .episode-tag, .size-tag) {
  border: 1px solid rgba(158, 220, 255, .22) !important;
  border-radius: 999px !important;
  background: var(--xh-color-accent-soft) !important;
  color: #c7eaff !important;
  font-size: var(--xh-type-caption) !important;
  line-height: var(--xh-leading-caption) !important;
}

html:not([data-xh-route="canvas"]) :is(.top-account-bar, .topbar, .head, #root > header, .mh-workbench-shell > header) {
  border-color: var(--xh-color-border) !important;
  background: rgba(5, 11, 20, .92) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .20) !important;
  backdrop-filter: blur(18px) !important;
}

html:not([data-xh-route="canvas"]) :is(.sidebar, .mh-workbench-shell > aside) {
  border-color: var(--xh-color-border) !important;
  background: rgba(5, 11, 20, .94) !important;
}

:is(.top-brand, .brand, #xh-global-brand strong) {
  color: var(--xh-color-brand) !important;
  text-shadow: none !important;
}

:is(.page-header, .page-intro h1, .hero h1, .section-heading h2, .section-caption strong, .card-title-row h2, .detail-head h2) {
  color: var(--xh-color-text) !important;
}

:is(.muted, .secondary, .helper, .meta, .notice, .hero > p, .pipeline-item small, .finding p, .architecture-copy p) {
  color: var(--xh-color-text-2) !important;
}

/* Remove the competing grid decorations; keep one restrained cinematic glow. */
html:not([data-xh-route="canvas"])[data-xh-theme="midnight"] body,
html:not([data-xh-route="canvas"]) body:has(.top-account-bar),
html:not([data-xh-route="canvas"]) body:has(.topbar),
html:not([data-xh-route="canvas"]) body:has(.head) {
  background-color: var(--xh-color-bg) !important;
  background-image: radial-gradient(circle at 70% -12%, rgba(44, 99, 139, .18), transparent 38%) !important;
  background-size: auto !important;
  background-attachment: fixed !important;
}

/* Review Studio: replace inherited light-paper controls with the shared dark system. */
html:not([data-xh-route="canvas"]) body:has(.topbar) :is(.hero, .workspace, .report-section, .architecture) {
  width: min(calc(100% - 48px), 1320px);
  max-width: 1320px;
  margin-inline: auto;
  box-sizing: border-box;
}

html:not([data-xh-route="canvas"]) body:has(.topbar) :is(.back-home-link, .avatar, .model-picker button, .filters button) {
  color: var(--xh-color-text) !important;
  background: var(--xh-color-control) !important;
  border: 1px solid var(--xh-color-border) !important;
  box-shadow: none !important;
}

html:not([data-xh-route="canvas"]) body:has(.topbar) :is(.model-picker button.active, .filters button.active) {
  color: #06111d !important;
  background: linear-gradient(135deg, var(--xh-color-brand-hover), #cda651) !important;
  border-color: rgba(245, 220, 158, .56) !important;
}

html:not([data-xh-route="canvas"]) body:has(.topbar) .model-picker button small {
  color: var(--xh-color-text-2) !important;
}

html:not([data-xh-route="canvas"]) body:has(.topbar) .model-picker button.active small {
  color: #243746 !important;
}

html:not([data-xh-route="canvas"]) body:has(.topbar) :is(.score-row, .flow-step) {
  color: var(--xh-color-text) !important;
  background: var(--xh-color-surface) !important;
  border-color: var(--xh-color-border) !important;
}

html:not([data-xh-route="canvas"]) body:has(.topbar) .score-ring::before {
  background: var(--xh-color-surface) !important;
}

html:not([data-xh-route="canvas"]) body:has(.topbar) :is(.eyebrow span, .flow-step i) {
  color: #06111d !important;
  background: var(--xh-color-brand) !important;
}

/* Homepage typography and restrained card treatment. */
.xh-home-v6 {
  --ink: var(--xh-color-bg);
  --navy: var(--xh-color-bg-2);
  --panel: rgba(10, 25, 40, .88);
  --line: var(--xh-color-border);
  --line-strong: var(--xh-color-border-strong);
  --ivory: var(--xh-color-text);
  --muted: var(--xh-color-text-2);
  --ice: var(--xh-color-accent);
  --ice-strong: #d3efff;
  --gold: var(--xh-color-brand);
  --gold-soft: #f0d999;
}

.xh-home-v6 .xh-hero h1 {
  margin: 0;
  font-size: var(--xh-type-display) !important;
  font-weight: 700 !important;
  line-height: 1.06 !important;
  letter-spacing: .04em !important;
}

.xh-home-v6 .xh-hero-copy p {
  margin-top: var(--xh-space-4);
  font-size: 18px;
  line-height: 1.55;
  color: var(--xh-color-text-2);
}

.xh-home-v6 .xh-section-title {
  gap: var(--xh-space-3);
  margin-bottom: var(--xh-space-3);
}

.xh-home-v6 .xh-section-title h2 {
  margin: 0;
  font-size: var(--xh-type-section) !important;
  line-height: var(--xh-leading-title) !important;
}

.xh-home-v6 :is(.xh-feature, .xh-tool-strip, .xh-project) {
  border-color: var(--xh-color-border);
  border-radius: var(--xh-radius-card);
  box-shadow: none;
}

.xh-home-v6 .xh-feature h3 {
  font-size: var(--xh-type-card) !important;
  line-height: var(--xh-leading-title) !important;
}

.xh-home-v6 .xh-tool-strip strong { font-size: 14px; line-height: 1.4; }
.xh-home-v6 .xh-tool-strip small { font-size: 11px !important; line-height: 1.4 !important; }

/* New role-positioning module. */
.xh-positioning {
  padding: var(--xh-space-7) 52px var(--xh-space-7) 35px;
  background: var(--xh-color-bg-2);
}

.xh-positioning-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 760px);
  align-items: end;
  gap: var(--xh-space-7);
  margin: 0 0 var(--xh-space-5) 9px;
}

.xh-positioning-head > div { display: flex; align-items: center; gap: var(--xh-space-3); }
.xh-positioning-mark { color: var(--xh-color-brand); font-size: 16px; line-height: 1; }
.xh-positioning-head h2 { margin: 0; font-size: var(--xh-type-section) !important; }
.xh-positioning-head p {
  margin: 0;
  color: var(--xh-color-text-2);
  font-size: var(--xh-type-body);
  line-height: var(--xh-leading-body);
  text-align: right;
}

.xh-positioning-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--xh-space-4);
}

.xh-positioning-card {
  min-height: 168px;
  padding: var(--xh-card-padding);
  border: 1px solid var(--xh-color-border);
  border-radius: var(--xh-radius-card);
  background: var(--xh-color-surface);
  box-shadow: none;
}

.xh-positioning-card > span {
  display: block;
  margin-bottom: var(--xh-space-4);
  color: var(--xh-color-brand);
  font-size: var(--xh-type-caption);
  line-height: var(--xh-leading-caption);
  letter-spacing: .14em;
}

.xh-positioning-card h3 {
  margin: 0 0 var(--xh-space-3);
  color: var(--xh-color-text);
  font-size: var(--xh-type-card) !important;
}

.xh-positioning-card p {
  max-width: 46em;
  margin: 0;
  color: var(--xh-color-text-2);
  font-size: var(--xh-type-body);
  line-height: var(--xh-leading-body);
}

/* Status colors remain semantic and consistent. */
html:not([data-xh-route="canvas"]) :is(.success, .pass, [data-status="success"]) { color: var(--xh-color-success) !important; }
html:not([data-xh-route="canvas"]) :is(.warning, .warn, [data-status="warning"]) { color: var(--xh-color-warning) !important; }
html:not([data-xh-route="canvas"]) :is(.danger, .error, .must, [data-status="error"]) { color: var(--xh-color-danger) !important; }
html:not([data-xh-route="canvas"]) :is(:disabled, [aria-disabled="true"], .disabled) { opacity: .52; cursor: not-allowed; }

@media (max-width: 900px) {
  :root {
    --xh-type-display: 52px;
    --xh-type-page: 32px;
    --xh-type-section: 22px;
    --xh-card-padding: 20px;
  }
  .xh-positioning { padding: var(--xh-space-6) 40px; }
  .xh-positioning-head { grid-template-columns: 1fr; gap: var(--xh-space-3); }
  .xh-positioning-head p { text-align: left; }
  .xh-positioning-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  :root {
    --xh-type-display: 46px;
    --xh-type-page: 28px;
    --xh-type-section: 20px;
    --xh-type-card: 17px;
    --xh-card-padding: 16px;
  }
  .xh-positioning { padding: var(--xh-space-6) 16px; }
  .xh-positioning-head { margin-left: 0; }
  .xh-home-v6 .xh-agent-toolbar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }
  .xh-home-v6 .xh-agent-chip {
    width: 100%;
    min-width: 0;
    justify-content: flex-start;
  }
  .xh-home-v6 .xh-agent-select select {
    width: 100%;
    min-width: 0;
    max-width: none;
    text-overflow: ellipsis;
  }
}