/* Наука Ai — единая дизайн-система (premium gray + accent) */

:root {
  --yt-font: 'Inter', system-ui, sans-serif;
  --yt-display: 'Outfit', 'Inter', sans-serif;
  --ds-radius-sm: 10px;
  --ds-radius: 14px;
  --ds-radius-lg: 18px;
  --ds-radius-xl: 22px;
}

/* ── Единая палитра marketing.html #hub (светлая, как на скрине) ── */
:root,
[data-theme="light"] {
  color-scheme: light;

  --ds-bg: #f4f6f9;
  --ds-bg-canvas: #f4f6f9;
  --ds-bg-pure: #ffffff;
  --ds-elevated: #ffffff;
  --ds-surface: #ffffff;
  --ds-surface-hover: #f0f4f8;
  --ds-glass: rgba(255, 255, 255, 0.88);
  --ds-glass-2: #ffffff;
  --ds-card-bg: linear-gradient(155deg, #ffffff 0%, #f0f4f8 100%);
  --ds-border: rgba(15, 23, 42, 0.08);
  --ds-border-strong: rgba(15, 23, 42, 0.15);
  --ds-text: #0f172a;
  --ds-text-2: rgba(15, 23, 42, 0.6);
  --ds-text-3: rgba(15, 23, 42, 0.4);

  --ds-accent: #00bfff;
  --ds-accent-hover: #0099ff;
  --ds-accent-muted: rgba(0, 191, 255, 0.12);
  --ds-accent-border: rgba(0, 191, 255, 0.4);
  --ds-accent-glow: rgba(0, 191, 255, 0.12);
  --ds-purple-muted: rgba(167, 139, 250, 0.08);
  --ds-purple-border: rgba(167, 139, 250, 0.28);
  --ds-purple-text: #7c3aed;

  --ds-shadow: 0 8px 30px rgba(15, 23, 42, 0.08);
  --ds-shadow-soft: 0 2px 12px rgba(15, 23, 42, 0.05);
  --ds-shadow-card: 0 8px 30px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --ds-dot: rgba(15, 23, 42, 0.07);
  --ds-dot-hi: rgba(15, 23, 42, 0.18);
  --ds-dot-glow: rgba(0, 119, 179, 0.05);

  --yt-accent: var(--ds-accent);
  --yt-accent-2: #0077cc;
  --yt-accent-soft: var(--ds-accent-muted);
  --yt-accent-glow: var(--ds-accent-glow);
  --yt-purple: #a78bfa;

  --g-blue: var(--ds-accent);
  --g-blue-hover: var(--ds-accent-hover);
  --g-blue-light: var(--ds-accent-muted);
  --accent: var(--ds-accent);
  --accent-hover: var(--ds-accent-hover);
  --bg: var(--ds-bg);
  --surface: var(--ds-glass);
  --surface-2: var(--ds-glass-2);
  --surface-3: var(--ds-surface-hover);
  --border: var(--ds-border-strong);
  --border-light: var(--ds-border);
  --text: var(--ds-text);
  --text-2: var(--ds-text-2);
  --text-3: var(--ds-text-3);
  --shadow-1: var(--ds-shadow-soft);
  --shadow-2: var(--ds-shadow);
  --shadow-3: 0 16px 40px rgba(15, 23, 42, 0.1);

  --shell-bg: var(--ds-bg);
  --shell-glass: var(--ds-glass);
  --shell-glass-2: var(--ds-glass-2);
  --shell-border: var(--ds-border);
  --shell-radius: var(--ds-radius-lg);
  --shell-radius-lg: var(--ds-radius-xl);
}

/* ── Тёмная тема (marketing dark) ── */
[data-theme="dark"] {
  color-scheme: dark;

  --ds-bg: #0a0a10;
  --ds-bg-canvas: #0a0a10;
  --ds-bg-pure: #06060b;
  --ds-elevated: #14141c;
  --ds-surface: #1c1c24;
  --ds-surface-hover: #242430;
  --ds-glass: rgba(18, 18, 26, 0.86);
  --ds-glass-2: rgba(20, 20, 28, 0.94);
  --ds-card-bg: linear-gradient(155deg, rgba(28, 28, 36, 0.96) 0%, rgba(12, 12, 18, 0.98) 100%);
  --ds-border: rgba(255, 255, 255, 0.12);
  --ds-border-strong: rgba(255, 255, 255, 0.24);
  --ds-text: #f2f2f6;
  --ds-text-2: rgba(242, 242, 246, 0.78);
  --ds-text-3: rgba(242, 242, 246, 0.56);

  --ds-accent: #00bfff;
  --ds-accent-hover: #1e90ff;
  --ds-accent-muted: rgba(0, 191, 255, 0.14);
  --ds-accent-border: rgba(0, 191, 255, 0.32);
  --ds-accent-glow: rgba(0, 191, 255, 0.12);

  --ds-shadow: 0 10px 36px rgba(0, 0, 0, 0.45);
  --ds-shadow-soft: 0 4px 18px rgba(0, 0, 0, 0.32);
  --ds-shadow-card: 0 8px 30px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --ds-dot: rgba(255, 255, 255, 0.07);
  --ds-dot-hi: rgba(255, 255, 255, 0.22);
  --ds-dot-glow: rgba(0, 191, 255, 0.05);

  --bg: var(--ds-bg);
  --surface: var(--ds-glass);
  --surface-2: var(--ds-glass-2);
  --surface-3: var(--ds-surface-hover);
  --border: var(--ds-border-strong);
  --border-light: var(--ds-border);
  --text: var(--ds-text);
  --text-2: var(--ds-text-2);
  --text-3: var(--ds-text-3);
  --shadow-1: var(--ds-shadow-soft);
  --shadow-2: var(--ds-shadow);
  --shadow-3: 0 20px 56px rgba(0, 0, 0, 0.5);
  --shell-bg: var(--ds-bg-canvas);
}

[data-theme="dark"] ::placeholder {
  color: rgba(255, 255, 255, 0.45);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: #3d3d4a;
}

body {
  background: var(--ds-bg-canvas);
  color: var(--ds-text);
}

.ai-app,
.ai-app-main {
  background: var(--ds-bg-canvas);
}

.ai-app-main > .page.active {
  animation: none;
}

.studio-global-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: transparent;
}

.studio-global-bg .studio-field-canvas,
.studio-shell-bg .studio-field-canvas,
.flow-stitch-bg .studio-field-canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  background: transparent;
}

.ai-app {
  position: relative;
  isolation: isolate;
}

.ai-app-main {
  position: relative;
  z-index: 2;
}

body,
.flow-nav-btn,
.btn-g,
.lang-btn,
.theme-btn {
  font-family: var(--yt-font) !important;
}

.flow-brand-text,
.pg-hero h1,
.pg-section-head h2,
.flow-hero h1,
.home-title,
.pricing-hero-title,
.pricing-section-title,
.model-picker-head h3,
.model-picker-cell-name,
.model-name,
.pg-model-name {
  font-family: var(--yt-display) !important;
}

.model-picker-cell,
.model-card,
.pg-model-card,
.model-picker-search,
.model-meta-line,
.model-picker-cell-meta {
  font-family: var(--yt-font) !important;
}

/* Topbar */
.flow-topbar,
.ai-app-bar {
  background: color-mix(in srgb, var(--ds-glass) 88%, transparent);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--ds-border);
}

.ai-app-bar::before,
body.site-mode-shell .ai-app-bar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ds-border-strong), transparent);
  opacity: 0.9;
  pointer-events: none;
}

.flow-brand-logo {
  border-radius: 10px;
  box-shadow: var(--ds-shadow-soft);
}

.flow-label {
  color: var(--ds-text-2);
  font-weight: 600;
  letter-spacing: 0.1em;
}

.flow-nav-btn.active,
.lang-btn.active,
.theme-btn.active {
  background: var(--ds-accent-muted) !important;
  color: var(--ds-accent) !important;
  border: 1px solid var(--ds-accent-border);
}

.flow-nav-btn:hover {
  background: var(--ds-surface-hover);
}

.flow-chip {
  border-color: var(--ds-border);
  color: var(--ds-text-2);
  background: var(--ds-elevated);
}

/* Кнопки */
.btn-g-primary,
.flow-create-btn,
.home-cta {
  background: var(--ds-accent) !important;
  color: #fff !important;
  font-weight: 600 !important;
  box-shadow: var(--ds-shadow-soft) !important;
  border: none;
}

.btn-g-primary,
.flow-create-btn,
.home-cta,
.flow-composer-send,
.chat-send-btn {
  color: #fff !important;
}

.btn-g-primary:hover,
.flow-create-btn:hover,
.home-cta:hover {
  background: var(--ds-accent-hover) !important;
}

.btn-g-outline {
  color: var(--ds-accent) !important;
  border-color: var(--ds-accent-border) !important;
}

.btn-g-outline:hover {
  background: var(--ds-accent-muted) !important;
}

.home-title-accent {
  background: linear-gradient(135deg, var(--ds-accent), var(--ds-accent-hover)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

.pg-feature-card,
.flow-feature-card,
.pricing-plan,
.history-card {
  border-color: var(--ds-border) !important;
  background: var(--ds-glass-2) !important;
}

.flow-mode-nav.active,
.model-picker-cell.selected,
.flow-asset-thumb.active,
.flow-filter-btn.active,
.flow-chip-btn.active {
  border-color: var(--ds-accent-border) !important;
  background: var(--ds-accent-muted) !important;
}

.model-picker-cell.selected .model-picker-name,
.flow-filter-btn.active {
  color: var(--ds-accent) !important;
}

.flow-composer-send,
.chat-send-btn {
  background: var(--ds-accent) !important;
}

.chat-model-btn.active,
.chat-session-item.active,
.chat-agent-pick.active {
  color: var(--ds-accent) !important;
  background: var(--ds-accent-muted) !important;
  border-color: var(--ds-accent-border) !important;
}

.chat-msg-user .chat-bubble {
  background: var(--ds-accent-muted) !important;
  border-color: var(--ds-accent-border) !important;
}

.pricing-plan--pro {
  border-color: var(--ds-accent-border) !important;
}

.pricing-faq-q:hover,
.dash-card-value,
.home-metric b {
  color: var(--ds-accent) !important;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 6px;
}

::placeholder {
  color: rgba(15, 23, 42, 0.4);
  opacity: 1;
}

/* Theme / lang toggles */
.ai-bar-toggles,
.studio-theme-switch {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  border-radius: 12px;
  background: var(--ds-elevated);
  border: 1px solid var(--ds-border);
}

.theme-btn,
.lang-btn {
  padding: 0.35rem 0.55rem;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--ds-text-2);
  font-size: 0.72rem;
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
}

.theme-btn:hover,
.lang-btn:hover {
  color: var(--ds-text);
  background: var(--ds-surface-hover);
}

.theme-btn.active,
.lang-btn.active {
  color: var(--ds-accent) !important;
  background: var(--ds-accent-muted) !important;
  border: 1px solid var(--ds-accent-border) !important;
  box-shadow: 0 0 0 1px rgba(0, 191, 255, 0.08);
}