/**
 * 星河 AI V2 — 全局视觉基座（对齐 xhai.tv 生产首页）
 */

:root {
  --bg-dark: #0d0e15;
  --bg-base: #0d0e15;
  --bg-surface: rgba(18, 19, 28, 0.94);
  --bg-glass: rgba(30, 30, 35, 0.6);
  --bg-glass-strong: rgba(28, 31, 50, 0.82);

  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.86);
  --text-muted: #999999;
  --text-subtle: #5e5685;

  --accent-purple: #7b61ff;
  --accent-violet: #8b5cf6;
  --accent-primary: #7c3aed;
  --accent-blue: #2563eb;
  --accent-gradient: linear-gradient(135deg, #7c3aed, #2563eb);

  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-default: rgba(255, 255, 255, 0.12);
  --border-purple: rgba(139, 92, 246, 0.24);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-blur: blur(16px);

  --green: #34d399;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 9999px;

  --transition-fast: 0.15s ease;
  --transition-base: 0.22s ease;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);

  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "PingFang SC",
    "Microsoft YaHei", sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-lg: 1.0625rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.125rem;

  --sidebar-width: 280px;
  --composer-max-w: 980px;
  --home-area-max-w: 980px;

  --home-bg-image: url("/assets/home-bg.png?v=20260711new1");
  --home-bg-position: 85% -10%;
  --secondary-bg-image: url("/assets/secondary-bg.png?v=20260711");
  --global-bg-image: var(--home-bg-image);
  --card-shadow: 0 4px 16px rgba(0, 0, 0, 0.24);
  --glass-shadow: 0 42px 110px rgba(0, 0, 0, 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.08);

  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
  background-color: var(--bg-dark);
}

body {
  min-height: 100%;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--text-primary);
  background-color: var(--bg-dark);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.global-bg-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: #05070a;
}

.global-bg-layer::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--global-bg-image);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: var(--home-bg-position, center top);
}

.global-bg-layer::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(5, 7, 10, 0.02) 0%,
      rgba(5, 7, 10, 0.1) 42%,
      rgba(5, 7, 10, 0.36) 100%
    ),
    linear-gradient(
      90deg,
      rgba(5, 7, 10, 0.38) 0%,
      rgba(5, 7, 10, 0.02) 28%,
      transparent 52%
    ),
    linear-gradient(
      180deg,
      transparent 0%,
      transparent 55%,
      rgba(5, 7, 10, 0.28) 100%
    );
}

#app-root {
  position: relative;
  z-index: 1;
  isolation: isolate;
}

#app-root::before {
  content: none;
}

#app-root > * {
  position: relative;
  z-index: 1;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
}

a {
  color: inherit;
  text-decoration: none;
}

:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg-base), 0 0 0 4px var(--accent-purple);
}

::selection {
  background: rgba(123, 97, 255, 0.28);
  color: var(--text-primary);
}