/* ═══════════════════════════════════════════════════════════
   CURSORIA — COMMON.CSS
   Общие стили: переменные, темы, навигация, mega-menu,
   футер, FAQ, PWA-модалка, toast, панели, базовые компоненты.
   Подключается ПЕРВЫМ на каждой странице.
   ═══════════════════════════════════════════════════════════ */

/* ── TOKENS (тёмная тема — по умолчанию) ── */
:root {
  --bg: #0a0a0f;
  --surface: #13131a;
  --surface2: #1a1a24;
  --border: #2a2a3a;
  --border2: #3a3a50;
  --text: #e8e8f0;
  --muted: #6b6b80;

  /* Брендовый зелёный — навигация, лого, футер */
  --accent: #00ff88;
  --accent-dim: rgba(0,255,136,.10);
  --accent-glow: rgba(0,255,136,.28);

  /* Акцент страницы — переопределяется в страничном CSS.
     По умолчанию = зелёный (для главной). */
  --page-accent: #00ff88;
  --page-accent-dim: rgba(0,255,136,.10);
  --page-accent-glow: rgba(0,255,136,.28);
  --page-accent-light: #00ff88;

  /* Утилитарные цвета */
  --gold: #ffaa00;
  --gold-dim: rgba(255,170,0,.10);
  --blue: #38bdf8;
  --blue-dim: rgba(56,189,248,.10);
  --purple: #a78bfa;
  --purple-dim: rgba(167,139,250,.10);
  --err: #ff4466;

  --radius: 16px;
}

/* ── СВЕТЛАЯ ТЕМА ── */
[data-theme="light"] {
  --bg: #f4f0fa;
  --surface: #ffffff;
  --surface2: #ede8f5;
  --border: #d0c8e0;
  --border2: #b8b0cc;
  --text: #0f0f1a;
  --muted: #7766a0;

  --accent: #00cc66;
  --accent-dim: rgba(0,204,102,.10);
  --accent-glow: rgba(0,204,102,.28);

  --gold: #cc7b00;
  --gold-dim: rgba(204,123,0,.10);
  --blue: #0077aa;
  --blue-dim: rgba(0,119,170,.10);
  --purple: #7c22c8;
  --purple-dim: rgba(124,34,200,.10);
  --err: #cc0033;
}

/* ── RESET & BASE ── */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0 }
html { scroll-behavior: smooth }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Syne', sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
  transition: background .3s, color .3s;
}

/* Фоновая сетка */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,255,136,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,255,136,.022) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 0;
}

/* ══════════════════ NAV ══════════════════ */
nav {
  position: sticky;
  top: 0;
  z-index: 300;
  background: #0d0d14;
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--border2);
  height: 60px;
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  box-shadow: 0 1px 24px rgba(0,0,0,.5);
  transition: background .3s, border-color .3s;
}
[data-theme="light"] nav { background: #ffffff }

.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}
.logo-mark {
  width: 34px; height: 34px;
  border-radius: 9px;
  background: var(--accent);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 16px rgba(0,255,136,.4);
  flex-shrink: 0;
}
.logo-mark svg { width: 20px; height: 20px }
.logo-text { display: flex; flex-direction: column; line-height: 1; gap: 2px }
.logo-name { font-size: 1.05rem; font-weight: 800; letter-spacing: -.04em; color: var(--text) }
.logo-name em { font-style: normal; color: var(--accent) }
.logo-domain { font-family: 'Space Mono', monospace; font-size: .54rem; color: var(--muted); letter-spacing: .04em }

.nav-right { display: flex; align-items: center; gap: 8px }

/* Кнопки-иконки (тема, PWA) */
.btn-icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: .95rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .2s;
  flex-shrink: 0;
}
.btn-icon:hover { border-color: var(--page-accent-light, var(--accent)); color: var(--page-accent-light, var(--accent)) }
.btn-pwa { display: none }
.btn-pwa.visible { display: flex }

/* Кнопка «ВСЕ ИНСТРУМЕНТЫ» */
.nav-menu-btn {
  display: flex; align-items: center; gap: 8px;
  font-family: 'Space Mono', monospace;
  font-size: .68rem; letter-spacing: .06em;
  color: var(--muted);
  padding: 7px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  cursor: pointer;
  transition: all .2s;
  white-space: nowrap;
}
.nav-menu-btn:hover { color: var(--text); border-color: var(--border2) }
.hb { display: flex; flex-direction: column; gap: 3.5px }
.hb span { display: block; width: 14px; height: 1.5px; background: currentColor; border-radius: 2px; transition: all .2s }

/* Пилюли навигации */
.nav-pill {
  font-family: 'Space Mono', monospace;
  font-size: .68rem; letter-spacing: .05em;
  padding: 7px 14px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--muted);
  border: 1px solid transparent;
  transition: all .2s;
  white-space: nowrap;
}
.nav-pill:hover { color: var(--text); border-color: var(--border) }
.nav-pill.cta {
  background: var(--accent);
  color: #000;
  font-weight: 700;
  box-shadow: 0 0 20px rgba(0,255,136,.25);
}
.nav-pill.cta:hover { box-shadow: 0 0 32px rgba(0,255,136,.4); transform: translateY(-1px) }
.nav-pill.active {
  border-color: var(--border2);
  color: var(--text);
}

/* ══════════════════ MEGA MENU ══════════════════ */
.mega-menu {
  position: fixed;
  top: 60px;
  left: 0; right: 0;
  z-index: 250;
  background: rgba(12,12,18,.98);
  backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--border);
  padding: 32px 40px 36px;
  display: none;
  height: calc(100vh - 60px);
  overflow-y: auto;
  box-sizing: border-box;
}
[data-theme="light"] .mega-menu { background: rgba(244,240,250,.98) }
.mega-menu.open { display: block; animation: menuDown .18s ease both }
@keyframes menuDown { from { opacity: 0; transform: translateY(-6px) } to { opacity: 1; transform: none } }

.mega-overlay { position: fixed; inset: 0; top: 60px; z-index: 249; display: none }
.mega-overlay.open { display: block }

.mega-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
}
.mega-col-label {
  font-family: 'Space Mono', monospace;
  font-size: .58rem; letter-spacing: .14em;
  color: var(--muted);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}
.mega-col-label + .mega-col-label { margin-top: 20px }

.ml-links { display: flex; flex-direction: column; gap: 2px }
.ml {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 12px;
  border-radius: 9px;
  text-decoration: none;
  color: var(--text);
  transition: all .15s;
  border: 1px solid transparent;
}
.ml:hover { background: var(--surface2); border-color: var(--border); color: var(--accent) }
.ml.ext:hover { color: var(--gold) }
.ml-ico {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--surface2);
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem;
  flex-shrink: 0;
  transition: background .15s;
}
.ml:hover .ml-ico { background: var(--accent-dim) }
.ml.ext:hover .ml-ico { background: var(--gold-dim) }
.ml-n { font-size: .83rem; font-weight: 600; line-height: 1.2 }
.ml-d { font-size: .68rem; color: var(--muted) }

/* Кнопка закрытия меню */
.menu-close {
  position: absolute;
  top: 15px; right: 20px;
  background: none; border: none;
  color: var(--muted);
  font-size: 1.5rem;
  cursor: pointer;
  z-index: 260;
  display: none;
}
.mega-menu.open .menu-close { display: block }
.menu-close:hover { color: var(--text) }

/* ══════════════════ PAGE LAYOUT ══════════════════ */
.page-wrap {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px 32px 80px;
}
.breadcrumb,
.page-breadcrumb {
  display: flex; align-items: center; gap: 8px;
  font-family: 'Space Mono', monospace;
  font-size: .62rem;
  color: var(--muted);
  letter-spacing: .06em;
  margin-bottom: 18px;
}
.breadcrumb a, .page-breadcrumb a { color: var(--muted); text-decoration: none; transition: color .2s }
.breadcrumb a:hover, .page-breadcrumb a:hover { color: var(--text) }
.breadcrumb span, .page-breadcrumb span { color: var(--border2) }
.page-header { margin-bottom: 40px }

.page-title {
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1.08;
  margin-bottom: 10px;
}
.page-title em {
  font-style: normal;
  color: var(--page-accent-light);
  text-shadow: 0 0 32px var(--page-accent-glow);
}
.page-desc {
  font-size: .92rem;
  color: var(--muted);
  line-height: 1.65;
  max-width: 560px;
  margin-bottom: 40px;
}
.main-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 24px;
  align-items: start;
}

/* ══════════════════ PANEL ══════════════════ */
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 20px;
}
.panel:last-child { margin-bottom: 0 }
.panel-head {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}
.panel-head h3 { font-size: .88rem; font-weight: 700; letter-spacing: .01em }
.panel-body { padding: 20px }

/* Теги в заголовке панели (универсальные) */
.ptag, .panel-tag {
  font-family: 'Space Mono', monospace;
  font-size: .58rem; letter-spacing: .1em;
  padding: 3px 10px;
  border-radius: 100px;
  border: 1px solid var(--border);
  color: var(--muted);
  background: transparent;
}
/* Цветные варианты тегов */
.ptag.p, .panel-tag.purple { border-color: rgba(167,139,250,.3); color: var(--purple); background: var(--purple-dim) }
.ptag.g, .panel-tag.green  { border-color: rgba(0,255,136,.25); color: var(--accent); background: var(--accent-dim) }
.ptag.r, .panel-tag.red    { border-color: rgba(255,34,68,.3); color: #ff4466; background: rgba(255,34,68,.08) }
.ptag.m, .panel-tag.muted  { border-color: var(--border); color: var(--muted); background: transparent }
.ptag.o, .panel-tag.orange { border-color: rgba(255,170,0,.25); color: var(--gold); background: var(--gold-dim) }
.ptag.b, .panel-tag.blue   { border-color: rgba(56,189,248,.25); color: var(--blue); background: var(--blue-dim) }
/* Дефолтный без модификатора — по акценту страницы */
.panel-tag:not([class*=" "]):not(.green):not(.orange):not(.purple):not(.red):not(.muted):not(.blue) {
  border-color: var(--page-accent-dim);
  color: var(--page-accent-light);
  background: var(--page-accent-dim);
}

/* ══════════════════ FAQ ══════════════════ */
.faq-wrap {
  max-width: 800px;
  margin: 40px auto 0;
}
.faq-wrap h2 {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -.03em;
  margin-bottom: 20px;
}
.faq-wrap h2 em { font-style: normal; color: var(--page-accent-light) }
.faq-item {
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 8px;
  overflow: hidden;
}
.faq-q {
  padding: 14px 18px;
  cursor: pointer;
  font-size: .89rem;
  font-weight: 600;
  display: flex; justify-content: space-between; align-items: center;
  transition: background .15s;
}
.faq-q:hover { background: var(--surface) }
.faq-q .fa { font-size: .6rem; color: var(--muted); transition: transform .3s }
.faq-item.open .fa { transform: rotate(180deg) }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease }
.faq-ai { padding: 0 18px 14px; font-size: .84rem; color: var(--muted); line-height: 1.7 }
.faq-item.open .faq-a { max-height: 300px }

/* ══════════════════ FOOTER ══════════════════ */
footer {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--border);
  padding: 32px 40px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 40px;
  margin-top: 40px;
  transition: border-color .3s;
}
.fl-wrap { display: flex; align-items: center; gap: 10px }
.fl-mark {
  width: 30px; height: 30px;
  border-radius: 7px;
  background: var(--accent);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.fl-mark svg { width: 17px; height: 17px }
.fl-name { font-size: .95rem; font-weight: 800; letter-spacing: -.03em }
.fl-name em { font-style: normal; color: var(--accent) }
.fl-domain { font-family: 'Space Mono', monospace; font-size: .52rem; color: var(--muted) }
.fl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 32px }
.fl-link {
  font-family: 'Space Mono', monospace;
  font-size: .6rem;
  color: var(--muted);
  text-decoration: none;
  transition: color .2s;
  display: flex; align-items: center; gap: 6px;
}
.fl-link:hover { color: var(--text) }
.fl-copy {
  font-family: 'Space Mono', monospace;
  font-size: .56rem;
  color: var(--muted);
  text-align: right;
  line-height: 1.6;
}
.fl-copy a { color: var(--muted); text-decoration: none }
.fl-copy a:hover { color: var(--text) !important }

/* ══════════════════ SNAKE EASTER EGG ══════════════════ */
.snake-egg {
  position: absolute;
  bottom: 22px; right: 22px;
  width: 38px; height: 38px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s, transform .2s;
  cursor: pointer;
  animation: snakeEggWiggle 5s ease-in-out infinite;
}
.snake-egg:hover {
  border-color: rgba(0,255,136,.45);
  box-shadow: 0 0 18px rgba(0,255,136,.2);
  transform: translateY(-2px);
  animation: none;
}
.snake-egg-q {
  font-family: 'Syne', sans-serif;
  font-weight: 800; font-size: .9rem;
  color: var(--muted);
  position: absolute;
  transition: opacity .25s ease, transform .25s ease;
}
.snake-egg-snake {
  display: flex; gap: 3px; align-items: center;
  position: absolute;
  opacity: 0; transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease;
}
.snake-egg-snake span {
  display: block; width: 7px; height: 7px;
  border-radius: 2px;
  background: var(--accent);
}
.snake-egg-snake span:first-child { box-shadow: 0 0 6px var(--accent) }
.snake-egg:hover .snake-egg-q { opacity: 0; transform: translateY(-6px) }
.snake-egg:hover .snake-egg-snake { opacity: 1; transform: translateY(0) }

@keyframes snakeEggWiggle {
  0%,88%,100% { transform: rotate(0deg) }
  90% { transform: rotate(-8deg) }
  92% { transform: rotate(8deg) }
  94% { transform: rotate(-5deg) }
  96% { transform: rotate(4deg) }
  98% { transform: rotate(0deg) }
}
.snake-egg::before {
  content: '';
  position: absolute; inset: -1px;
  border-radius: 11px;
  border: 1px solid rgba(0,255,136,0);
  animation: snakeEggPulse 5s ease-in-out infinite;
}
@keyframes snakeEggPulse {
  0%,82%,100% { border-color: rgba(0,255,136,0); transform: scale(1) }
  90% { border-color: rgba(0,255,136,.5); transform: scale(1.12) }
  96% { border-color: rgba(0,255,136,0); transform: scale(1) }
}

/* ══════════════════ PWA MODAL ══════════════════ */
.pwa-modal-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 400;
  backdrop-filter: blur(4px);
}
.pwa-modal-backdrop.open { display: flex; align-items: center; justify-content: center }
.pwa-modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px;
  max-width: 400px;
  width: calc(100% - 40px);
  animation: fadeUp .3s ease;
}
.pwa-modal h3 { font-size: 1.1rem; font-weight: 800; margin-bottom: 8px }
.pwa-modal h3 em { font-style: normal; color: var(--page-accent) }
.pwa-modal p { font-size: .82rem; color: var(--muted); line-height: 1.6; margin-bottom: 18px }
.pwa-steps { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px }
.pwa-step { display: flex; gap: 12px; align-items: flex-start }
.pwa-step-n { font-family: 'Space Mono', monospace; font-size: .62rem; color: var(--page-accent); min-width: 26px; padding-top: 1px }
.pwa-step-t { font-size: .82rem; line-height: 1.5 }
.pwa-modal-close {
  width: 100%;
  padding: 11px;
  background: var(--page-accent);
  color: #fff;
  font-family: 'Space Mono', monospace;
  font-size: .72rem; font-weight: 700; letter-spacing: .1em;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all .2s;
}
.pwa-modal-close:hover { opacity: .85 }

/* ══════════════════ TOAST ══════════════════ */
canvas#canvas { display: none }
#toast {
  position: fixed;
  bottom: 28px; left: 50%;
  transform: translateX(-50%) translateY(16px);
  background: var(--page-accent-light);
  color: #000;
  font-family: 'Space Mono', monospace;
  font-size: .72rem; font-weight: 700;
  padding: 9px 22px;
  border-radius: 8px;
  opacity: 0;
  transition: all .25s;
  pointer-events: none;
  z-index: 9999;
  white-space: nowrap;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0) }

/* ══════════════════ ANIMATIONS ══════════════════ */
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px) } to { opacity: 1; transform: none } }

/* Reveal on scroll (используется на главной и внутренних) */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .5s ease, transform .5s ease }
.reveal.visible { opacity: 1; transform: none }
.d1 { transition-delay: .07s } .d2 { transition-delay: .14s }
.d3 { transition-delay: .21s } .d4 { transition-delay: .28s }

/* ══════════════════ IDLE PLACEHOLDER ══════════════════ */
.idle-placeholder {
  font-family: 'Space Mono', monospace;
  font-size: .78rem;
  color: var(--muted);
  text-align: center;
  padding: 24px 20px;
  letter-spacing: .04em;
  line-height: 1.6;
}

/* ══════════════════ RESPONSIVE ══════════════════ */
@media (max-width: 1024px) {
  .mega-inner { grid-template-columns: repeat(2, 1fr) }
}

@media (max-width: 900px) {
  nav { padding: 0 20px }
  .page-wrap { padding: 32px 20px 60px }
  .main-grid { grid-template-columns: 1fr }
  .faq-wrap { margin-left: 0; margin-right: 0 }
  footer { grid-template-columns: 1fr; gap: 24px; padding: 24px 20px }
  .fl-grid { grid-template-columns: repeat(2, 1fr) }
  .fl-copy { text-align: left }
}

@media (max-width: 640px) {
  .mega-menu { padding: 24px 20px 60px }
  .mega-inner { grid-template-columns: 1fr; overflow-x: hidden; word-wrap: break-word }
  .nav-pill:not(.cta) { display: none }
  .nav-pill.cta { display: none }
  .nav-menu-btn { padding: 7px 10px }
  .menu-btn-label { display: none }
}