/* ============================================================================
   newapp.css — стиль нового приложения /newapp, наложенный на SEO-лендинг.
   Подключается ТОЛЬКО в templates/_base_newapp.html (превью /home-newapp).
   Работает поверх themes.css: переопределяет CSS-переменные + добавляет
   декоративный слой (блобы, glass-хедер, Manrope). Боевую тему не трогает.
   Источник палитры: prototypes/redesign-2026-06/home.html
   ========================================================================= */

/* ---------- Светлая пастельная тема ---------- */
:root[data-theme="newapp"] {
  --bg: #F4F2FB;
  --bg-alt: #EDEAF9;
  --surface: #FFFFFF;
  --surface-alt: #FAF9FE;
  --surface-glass: rgba(255, 255, 255, 0.82);
  --text: #1A1726;
  --muted: #79748C;
  --accent: #7C5CFF;
  --accent-active: #5B3DF5;
  --accent-2: #2DE2E6;
  --accent-bg: #EFEAFF;
  --border: #ECE9F4;
  --border-strong: #1A1726;
  --hairline: #ECE9F4;
  --shadow-card: 0 22px 50px -30px rgba(60, 46, 140, 0.28);
  --shadow-elevated: 0 18px 44px -22px rgba(60, 46, 140, 0.32);
  --primary-glow: 0 6px 16px -6px rgba(124, 92, 255, 0.45);
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --font-h1-weight: 800;
  --font-body-weight: 400;
  --use-mono-meta: 0;
  /* пастельные тона секций (фичи) */
  --sec-a-bg: #F1EDFF; --sec-a-ico: #5B3DF5;
  --sec-b-bg: #E9F8F1; --sec-b-ico: #1FA97A;
  --sec-c-bg: #FFF4EA; --sec-c-ico: #D9842B;
  --blob-1: #C9B8FF;
  --blob-2: #9FE9D6;
  --blob-3: #FFCFA8;
  --blob-4: #2DE2E6;
  --blob-5: #B14CFF;
  --blob-opacity: 0.55;
}

/* ---------- Тёмная графитовая тема ---------- */
:root[data-theme="newapp-dark"] {
  --bg: #1B1B1E;
  --bg-alt: #232327;
  --surface: #242428;
  --surface-alt: #2A2A2F;
  --surface-glass: rgba(36, 36, 40, 0.78);
  --text: #F2F2F7;
  --muted: #9C9CAF;
  --accent: #8B6DFF;
  --accent-active: #A78BFF;
  --accent-2: #3CECF0;
  --accent-bg: rgba(124, 92, 255, 0.16);
  --border: rgba(255, 255, 255, 0.10);
  --border-strong: #F2F2F7;
  --hairline: rgba(255, 255, 255, 0.08);
  --shadow-card: 0 22px 50px -30px rgba(0, 0, 0, 0.6);
  --shadow-elevated: 0 18px 44px -22px rgba(0, 0, 0, 0.7);
  --primary-glow: 0 6px 18px -6px rgba(124, 92, 255, 0.5);
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --font-h1-weight: 800;
  --font-body-weight: 400;
  --use-mono-meta: 0;
  --sec-a-bg: rgba(124, 92, 255, 0.16); --sec-a-ico: #B8A4FF;
  --sec-b-bg: rgba(31, 169, 122, 0.16); --sec-b-ico: #6FE3BD;
  --sec-c-bg: rgba(217, 132, 43, 0.16); --sec-c-ico: #F0B574;
  --blob-1: #6C4BD6;
  --blob-2: #1E6E5C;
  --blob-3: #8A5A2A;
  --blob-4: #1F7A8C;
  --blob-5: #5A2D8A;
  --blob-opacity: 0.22;
}

/* ---------- Типографика: только Manrope ---------- */
:root[data-theme="newapp"] body,
:root[data-theme="newapp-dark"] body {
  font-family: 'Manrope', system-ui, -apple-system, sans-serif;
}
:root[data-theme="newapp"] h1, :root[data-theme="newapp"] h2,
:root[data-theme="newapp"] h3, :root[data-theme="newapp"] h4,
:root[data-theme="newapp-dark"] h1, :root[data-theme="newapp-dark"] h2,
:root[data-theme="newapp-dark"] h3, :root[data-theme="newapp-dark"] h4 {
  font-family: 'Manrope', system-ui, -apple-system, sans-serif;
  letter-spacing: -0.02em;
}
/* в newapp нет моно-меток — приводим к Manrope */
:root[data-theme="newapp"] .meta-mono,
:root[data-theme="newapp-dark"] .meta-mono {
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 700;
  opacity: 0.6;
}

/* ---------- Фон body + декоративные пастельные блобы ----------
   Safari-safe: фон и блобы заданы ПРЯМЫМИ значениями для каждой темы, без var().
   Через var() Safari ненадёжно пере-резолвит переменные в body/::before при
   динамической смене темы (фон оставался светлым в тёмной теме). */
:root[data-theme="newapp"] body { position: relative; background-color: #F4F2FB; }
:root[data-theme="newapp-dark"] body { position: relative; background-color: #1B1B1E; }

:root[data-theme="newapp"] body::before,
:root[data-theme="newapp-dark"] body::before {
  content: "";
  position: fixed;
  inset: -10vh -10vw;
  z-index: -1;
  pointer-events: none;
  filter: blur(70px) saturate(108%);
}
:root[data-theme="newapp"] body::before {
  opacity: 0.55;
  background:
    radial-gradient(38vw 38vw at 8% 4%, #C9B8FF, transparent 60%),
    radial-gradient(34vw 34vw at 96% 10%, #9FE9D6, transparent 60%),
    radial-gradient(40vw 40vw at 50% 42%, #FFCFA8, transparent 62%),
    radial-gradient(36vw 36vw at 92% 78%, #2DE2E6, transparent 60%),
    radial-gradient(40vw 40vw at 18% 92%, #B14CFF, transparent 62%);
}
:root[data-theme="newapp-dark"] body::before {
  opacity: 0.22;
  background:
    radial-gradient(38vw 38vw at 8% 4%, #6C4BD6, transparent 60%),
    radial-gradient(34vw 34vw at 96% 10%, #1E6E5C, transparent 60%),
    radial-gradient(40vw 40vw at 50% 42%, #8A5A2A, transparent 62%),
    radial-gradient(36vw 36vw at 92% 78%, #1F7A8C, transparent 60%),
    radial-gradient(40vw 40vw at 18% 92%, #5A2D8A, transparent 62%);
}

/* ---------- Glass-хедер (sticky) ---------- */
:root[data-theme="newapp"] header.container,
:root[data-theme="newapp-dark"] header.container {
  position: sticky;
  top: 0;
  z-index: 200;
  padding-top: 12px !important;
  padding-bottom: 12px;
}
:root[data-theme="newapp"] .nav,
:root[data-theme="newapp-dark"] .nav {
  background: var(--surface-glass);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
:root[data-theme="newapp-dark"] .nav {
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
:root[data-theme="newapp"] .nav-logo,
:root[data-theme="newapp-dark"] .nav-logo { color: var(--text); }

/* ---------- Кнопки (скругление 14px как в /newapp, без pill) ---------- */
:root[data-theme="newapp"] .btn,
:root[data-theme="newapp-dark"] .btn { border-radius: 14px; }
:root[data-theme="newapp"] .btn-primary,
:root[data-theme="newapp-dark"] .btn-primary {
  background: var(--accent);
  box-shadow: var(--primary-glow);
  transition: transform 0.12s ease, filter 0.15s ease;
}
:root[data-theme="newapp"] .btn-primary:hover,
:root[data-theme="newapp-dark"] .btn-primary:hover {
  opacity: 1;
  transform: translateY(-1px);
  filter: brightness(1.04);
}
:root[data-theme="newapp"] .btn-secondary,
:root[data-theme="newapp-dark"] .btn-secondary {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  box-shadow: none;
}

/* ---------- Карточки и секции ---------- */
:root[data-theme="newapp"] .card,
:root[data-theme="newapp-dark"] .card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
/* чередующиеся секции — мягкая полупрозрачная подложка, чтобы блобы просвечивали */
:root[data-theme="newapp"] section[id="examples"],
:root[data-theme="newapp"] section[id="how"],
:root[data-theme="newapp"] section[id="seo-text"],
:root[data-theme="newapp"] section[id="vs"],
:root[data-theme="newapp"] section[id="proof"],
:root[data-theme="newapp"] section[id="artists"],
:root[data-theme="newapp"] section[id="about"] {
  background: rgba(255, 255, 255, 0.5);
}
:root[data-theme="newapp-dark"] section[id="examples"],
:root[data-theme="newapp-dark"] section[id="how"],
:root[data-theme="newapp-dark"] section[id="seo-text"],
:root[data-theme="newapp-dark"] section[id="vs"],
:root[data-theme="newapp-dark"] section[id="proof"],
:root[data-theme="newapp-dark"] section[id="artists"],
:root[data-theme="newapp-dark"] section[id="about"] {
  background: rgba(36, 36, 40, 0.45);
}

/* ---------- Footer ---------- */
:root[data-theme="newapp"] .footer,
:root[data-theme="newapp-dark"] .footer { border-top: 1px solid var(--border); }

/* ---------- Hero-widget (свои токены внутри .hero-widget) ---------- */
:root[data-theme="newapp"] .hero-widget {
  --accent: #7C5CFF; --accent-soft: rgba(124, 92, 255, 0.10);
  --bg: #F4F2FB; --card: #FFFFFF; --field: #F4F2FB;
  --border: #ECE9F4; --border-soft: #ECE9F4;
  --text: #1A1726; --text-2: #79748C; --text-3: #A39EB4;
  font-family: 'Manrope', -apple-system, sans-serif;
  /* перекрываем хардкод background:#F4F4F2 из landing.html — стеклянная карточка */
  background: rgba(255, 255, 255, 0.55) !important;
  border: 1px solid var(--border);
  border-radius: 22px;
}
:root[data-theme="newapp-dark"] .hero-widget {
  --accent: #8B6DFF; --accent-soft: rgba(124, 92, 255, 0.18);
  --bg: #1B1B1E; --card: #242428; --field: #2A2A2F;
  --border: rgba(255,255,255,0.10); --border-soft: rgba(255,255,255,0.08);
  --text: #F2F2F7; --text-2: #9C9CAF; --text-3: #6E6E80;
  font-family: 'Manrope', -apple-system, sans-serif;
  /* перекрываем хардкод background:#F4F4F2 из landing.html — тёмная карточка */
  background: rgba(36, 36, 40, 0.55) !important;
  border: 1px solid var(--border);
  border-radius: 22px;
}
:root[data-theme="newapp"] .hero-widget .card,
:root[data-theme="newapp-dark"] .hero-widget .card {
  border-radius: 14px;
}
/* Тёмная тема: плашки иконок и микрофон были белыми, текст чипов — чёрным.
   Делаем под графит. #lwStep1ModeTabs в селекторе — чтобы перебить id-правила landing.html. */
:root[data-theme="newapp-dark"] .hero-widget #lwStep1ModeTabs .mode-icon {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.10);
  color: #C9C4D6;
}
:root[data-theme="newapp-dark"] .hero-widget #lwStep1ModeTabs .mode-tab.active .mode-icon {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
:root[data-theme="newapp-dark"] .hero-widget .mic {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.10);
  color: #C9C4D6;
}
:root[data-theme="newapp-dark"] .hero-widget .mic:hover {
  border-color: var(--accent);
  color: var(--accent);
}
:root[data-theme="newapp-dark"] .hero-widget .chip,
:root[data-theme="newapp-dark"] .hero-widget .lang-pill {
  color: #E4E1EF;
}
:root[data-theme="newapp-dark"] .hero-widget .chip.active,
:root[data-theme="newapp-dark"] .hero-widget .lang-pill.active {
  color: #fff;
}
:root[data-theme="newapp-dark"] .hero-widget .field-row label {
  color: var(--text-2);
}

/* ---------- Тумблер темы в шапке (только превью) ---------- */
.newapp-theme-toggle {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--accent-bg);
  color: var(--accent);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.12s ease, background 0.15s ease;
}
.newapp-theme-toggle:hover { transform: scale(1.06); }
.newapp-theme-toggle:active { transform: scale(0.96); }
.newapp-theme-toggle svg { width: 20px; height: 20px; }
/* группа справа: [тумблер] [Войти] вплотную */
.newapp-nav-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
@media (max-width: 860px) {
  .newapp-theme-toggle { width: 38px; height: 38px; }
  /* больше воздуха между «Войти» и кнопкой меню (в nav.html gap: 4px) */
  :root[data-theme="newapp"] .nav-mobile-controls,
  :root[data-theme="newapp-dark"] .nav-mobile-controls { gap: 14px; }
}
.newapp-theme-toggle .ico-sun { display: none; }
.newapp-theme-toggle .ico-moon { display: block; }
:root[data-theme="newapp-dark"] .newapp-theme-toggle .ico-sun { display: block; }
:root[data-theme="newapp-dark"] .newapp-theme-toggle .ico-moon { display: none; }

/* небольшой "превью"-бейдж сверху, чтобы не спутать с боевой */
.newapp-preview-badge {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 9999;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font: 600 12px/1 'Manrope', sans-serif;
  letter-spacing: 0.02em;
  box-shadow: var(--primary-glow);
  pointer-events: none;
}