/* FoxFlow — компоненты. Séance product-UI: одна стеклянная плита, плоские поверхности,
   полный набор состояний. Без вложенных карт. */

/* ---------- Каркас приложения: плита на весь экран ---------- */
.app-stage { height: 100dvh; width: 100vw; }
.app-panel {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--blur));
  backdrop-filter: blur(var(--blur));
}

.app-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.4rem clamp(1.4rem, 1rem + 1.5vw, 2.6rem);
  border-bottom: 1px solid var(--line);
}

.app-main { flex: 1; min-height: 0; display: flex; }

/* Левый рельс иконок */
.app-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 1.5rem 0.85rem;
  border-right: 1px solid var(--line);
}
.rail-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: none;
  background: transparent;
  color: var(--ink-faint);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.rail-btn svg { width: 1.3rem; height: 1.3rem; stroke: currentColor; stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.rail-btn:hover { color: var(--ink-soft); background: var(--surface); }
.rail-btn[aria-current="true"] { color: var(--accent-warm); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-strong); }
.rail-btn.locked { opacity: 0.4; }
/* Подпись-подсказка при наведении */
.rail-btn::after {
  content: attr(data-label);
  position: absolute;
  left: calc(100% + 0.6rem);
  white-space: nowrap;
  font-size: var(--text-xs);
  color: var(--ink-soft);
  background: var(--glass-bg);
  border: 1px solid var(--line);
  padding: 0.25rem 0.6rem;
  border-radius: var(--r-md);
  opacity: 0;
  transform: translateX(-4px);
  pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.rail-btn:hover::after { opacity: 1; transform: none; }

.app-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: clamp(1.75rem, 1rem + 3vw, 3.5rem);
}

.app-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem clamp(1.4rem, 1rem + 1.5vw, 2.6rem);
  border-top: 1px solid var(--line);
  font-size: var(--text-xs);
}
.foot-links { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.foot-links a,
.foot-links button { color: var(--ink-faint); background: none; border: none; padding: 0; font: inherit; transition: color var(--dur) var(--ease); }
.foot-links a:hover,
.foot-links button:hover { color: var(--ink); }

/* ---------- FAQ (нативный details) ---------- */
.faq { display: flex; flex-direction: column; gap: 0.6rem; }
.faq-item { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); padding: 0 1.1rem; }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 1rem 0;
  font-size: var(--text-base);
  color: var(--ink);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--ink-faint); font-size: var(--text-lg); transition: transform var(--dur) var(--ease); }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { color: var(--ink-soft); font-size: var(--text-sm); padding: 0 0 1rem; margin: 0; }

@media (max-width: 640px) {
  .app-rail { flex-direction: row; padding: 0.6rem; border-right: none; border-top: 1px solid var(--line); justify-content: space-around; }
  .app-main { flex-direction: column-reverse; }
  .rail-btn::after { display: none; }
}

/* ---------- Поверхность-карта (плоская, без вложенности) ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-amb), var(--bezel);
  padding: 1.6rem;
}
.card-int { transition: transform var(--dur-slow) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.card-int:hover { transform: translateY(-3px); background: var(--surface-hover); border-color: var(--line-strong); }

/* ---------- Eyebrow ---------- */
.eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ink-faint);
}

/* ---------- Кнопки ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  padding: 0.7rem 0.8rem 0.7rem 1.3rem;
  font-size: var(--text-sm);
  font-weight: 600;
  min-height: 44px;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.btn-primary { background: var(--accent); color: var(--ink-invert); box-shadow: var(--shadow-amb), var(--bezel); }
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); }

.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line); padding-inline: 1.3rem; }
.btn-ghost:hover:not(:disabled) { background: var(--surface-hover); border-color: var(--line-strong); }

.btn-sm { padding: 0.5rem 1rem; min-height: 36px; gap: 0.4rem; }

/* Вложенный кружок-иконка (button-in-button) */
.btn .ico {
  display: grid;
  place-items: center;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: var(--r-pill);
  transition: transform var(--dur) var(--ease);
}
.btn-primary .ico { background: oklch(0.20 0.006 60 / 0.12); }
.btn-ghost .ico { background: oklch(1 0 0 / 0.1); }
.btn:hover:not(:disabled) .ico { transform: translateX(2px); }

.btn.danger { color: var(--danger); border-color: oklch(from var(--danger) l c h / 0.4); }
.btn.danger:hover:not(:disabled) { background: oklch(from var(--danger) l c h / 0.1); }

/* ---------- Бренд ---------- */
.brand { font-family: var(--font-display); font-size: 1.4rem; letter-spacing: -0.01em; }

/* ---------- Формы ---------- */
.field { display: flex; flex-direction: column; gap: 0.45rem; margin-bottom: 1.1rem; }
.field label { font-size: var(--text-sm); color: var(--ink-soft); }
.input {
  width: 100%;
  padding: 0.8rem 1.05rem;
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  min-height: 44px;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.input:focus { outline: none; border-color: var(--accent-warm); box-shadow: 0 0 0 3px oklch(0.82 0.10 55 / 0.18); }
.input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.input::placeholder { color: var(--ink-faint); }

.form-note { color: var(--ink-faint); font-size: var(--text-sm); }

/* ---------- Заголовок раздела ---------- */
.view-head { margin-bottom: 2.25rem; }
.view-head h2 { font-size: var(--text-3xl); margin-bottom: 0.5rem; }
.view-head p { color: var(--ink-soft); max-width: 60ch; }

/* ---------- Сетки ---------- */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
@media (max-width: 900px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

/* ---------- Текст-утилиты ---------- */
.muted { color: var(--ink-soft); }
.faint { color: var(--ink-faint); }
/* .serif — историческое имя класса (был Fraunces). Теперь весь сайт на Manrope,
   класс задаёт плотный «дисплейный» вес для заголовков, чисел, имён карточек. */
.serif { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; }

/* ---------- Статистика (без hero-метрик: подпись над, число обычным ритмом) ---------- */
.stat-label { font-size: var(--text-sm); color: var(--ink-soft); }
.stat-value { font-family: var(--font-display); font-size: var(--text-2xl); margin-top: 0.2rem; }

/* Прогресс-полоса лимита */
.meter { height: 5px; border-radius: 999px; background: oklch(1 0 0 / 0.1); overflow: hidden; margin-top: 0.9rem; }
.meter > span { display: block; height: 100%; background: var(--ink); border-radius: 999px; transition: width var(--dur-slow) var(--ease); }

/* Бейдж тарифа */
.badge { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.08em; padding: 0.28rem 0.75rem; border-radius: var(--r-pill); border: 1px solid var(--line); color: var(--ink-soft); }
.badge.pro { color: var(--accent-warm); background: oklch(0.82 0.10 55 / 0.18); border-color: oklch(0.82 0.10 55 / 0.30); }

/* Тариф */
.plan-price { font-family: var(--font-display); font-size: var(--text-2xl); margin: 0.5rem 0 1rem; }
.plan-list { display: grid; gap: 0.55rem; margin: 1rem 0 1.5rem; color: var(--ink-soft); font-size: var(--text-sm); list-style: none; }
.plan-list li { display: flex; gap: 0.6rem; }
.plan-list li::before { content: ""; width: 1rem; height: 1rem; flex: none; margin-top: 0.2rem; background: currentColor; opacity: 0.3; -webkit-mask: var(--check) center/contain no-repeat; mask: var(--check) center/contain no-repeat; }

/* Сравнение FREE/PRO под карточками тарифов. */
.cmp { width: 100%; border-collapse: collapse; margin-top: var(--gap); font-size: var(--text-sm); }
.cmp th, .cmp td { padding: 0.8rem 1rem; text-align: center; border-bottom: 1px solid var(--line); }
.cmp thead th { color: var(--ink-faint); font-weight: 500; font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase; }
.cmp tbody th[scope="row"] { text-align: left; color: var(--ink-soft); font-weight: 400; }
.cmp td { color: var(--ink); }
.cmp .cmp-pro { background: oklch(0.82 0.10 55 / 0.06); }
.cmp thead .cmp-pro { color: var(--accent-warm); }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: none; }
.cmp .yes, .cmp .no { position: relative; }
.cmp .yes::before { content: ""; display: inline-block; width: 1.05rem; height: 1.05rem; background: var(--accent-warm); -webkit-mask: var(--check) center/contain no-repeat; mask: var(--check) center/contain no-repeat; }
.cmp td.yes:not(.cmp-pro)::before { background: var(--ink-faint); }
.cmp .no::before { content: "—"; color: var(--ink-faint); }

/* Заголовок и теги карточки каталога (голоса/звуки): имя слева, копия справа. */
.prompt-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-top: 0.9rem; }
.prompt-tags { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.tag { font-size: var(--text-xs); color: var(--ink-faint); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 0.18rem 0.65rem; }
.icon-btn { flex-shrink: 0; display: grid; place-items: center; width: 2rem; height: 2rem; border: 1px solid var(--line); border-radius: var(--r-md); background: transparent; color: var(--ink-faint); transition: color var(--dur) var(--ease), background var(--dur) var(--ease); }
.icon-btn:hover { color: var(--ink); background: var(--surface-hover); }
.icon-btn svg { width: 1rem; height: 1rem; stroke: currentColor; stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* Проект: название + дата, ниже три кольца-метрики */
.project-card { display: flex; flex-direction: column; gap: 1.2rem; }
.project-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.rings { display: flex; justify-content: space-around; gap: 0.8rem; }
.ring-box { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
/* Кольцо на conic-gradient: заполнение задаётся --p (0..100) из Alpine. */
.ring {
  position: relative;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: conic-gradient(var(--accent-warm) calc(var(--p) * 1%), var(--surface-2) 0);
  display: grid; place-items: center;
}
.ring::before {
  content: "";
  position: absolute;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--glass-bg);
}
.ring span { position: relative; font-size: var(--text-xs); font-weight: 600; color: var(--ink); }
.ring-label { font-size: var(--text-xs); color: var(--ink-faint); }

/* Поле-копия (токен) */
.copy-field { display: flex; align-items: center; gap: 0.5rem; }
.copy-field code { flex: 1; padding: 0.65rem 0.95rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); font-size: var(--text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Индикатор связи */
.dot-status { width: 0.55rem; height: 0.55rem; border-radius: 999px; background: var(--ink-faint); flex: none; }
.dot-status.on { background: var(--ok); }

/* ---------- Лендинг: скроллируемый лонгрид ----------
   .home раскладывает hero и секции по вертикали. Первый экран (hero+flow+start)
   занимает высоту плиты, ниже — секции лендинга со скроллом внутри .app-body. */
.home {
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 6vh, 5rem);
}
/* Первый экран лендинга: hero на высоту видимой области плиты. */
.home-hero {
  min-height: calc(100dvh - 12rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(1.25rem, 3vh, 2.75rem);
}
.hero-em { color: var(--accent-warm); }

.home-lead { max-width: 46ch; }
.home-title {
  font-size: clamp(2.5rem, 1.6rem + 3vw, 3.6rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
  margin: 0.75rem 0 1.1rem;
}
.home-sub { font-size: var(--text-lg); max-width: 42ch; line-height: 1.5; }
.home-cta { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-top: 1.5rem; }

/* Пайплайн: три стадии одного прогона, читаются слева направо. Линия между
   ними — поток, не разделитель карточек. */
.flow {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-top: clamp(1.5rem, 4vh, 2.5rem);
  border-top: 1px solid var(--line);
}
.flow-stage { display: flex; flex-direction: column; gap: 0.35rem; position: relative; }
/* Стрелка-связка между стадиями (поток слева направо), без border-стрипов. */
.flow-stage + .flow-stage::before {
  content: "";
  position: absolute;
  top: 0.85rem;
  left: calc(-1 * clamp(1rem, 3vw, 2.5rem) / 2 - 0.3rem);
  width: 0.6rem; height: 0.6rem;
  border-top: 1.5px solid var(--line-strong);
  border-right: 1.5px solid var(--line-strong);
  transform: rotate(45deg);
}
.flow-num { font-size: var(--text-2xl); color: var(--ink-faint); line-height: 1; }
.flow-name { font-size: var(--text-lg); font-weight: 600; letter-spacing: -0.01em; }
.flow-note { font-size: var(--text-sm); max-width: 22ch; line-height: 1.45; }

/* Get going: четыре шага тихой типографичной строкой, не карточками. */
.start { display: flex; align-items: baseline; gap: clamp(1rem, 3vw, 2.5rem); flex-wrap: wrap; }
.start-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  flex-shrink: 0;
}
.start-steps {
  list-style: none;
  counter-reset: step;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.6rem;
}
.start-steps li {
  counter-increment: step;
  font-size: var(--text-sm);
  color: var(--ink-soft);
  position: relative;
  padding-left: 1.5rem;
}
.start-steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  font-family: var(--font-display);
  color: var(--ink-faint);
  font-size: var(--text-base);
}
.start-steps b { color: var(--ink); font-weight: 600; }

@media (max-width: 720px) {
  .home-hero { min-height: auto; padding-top: 2rem; }
  .flow { grid-template-columns: 1fr; gap: 1rem; }
  .flow-stage + .flow-stage::before { display: none; }
}

/* ---------- Секции лендинга ---------- */
.lp-section { display: flex; flex-direction: column; gap: 1.75rem; }
.lp-head { max-width: 52ch; }
.lp-head h2 { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.4rem); margin-bottom: 0.6rem; }
.lp-head p { color: var(--ink-soft); }

/* ---------- Демо пайплайна: три анимированные стадии (frames → voice → cut) ---------- */
.demo { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.demo-stage {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-amb), var(--bezel);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 11rem;
}
.demo-head { display: flex; align-items: center; gap: 0.6rem; }
.demo-num { font-family: var(--font-display); font-weight: 700; color: var(--accent-warm); font-size: var(--text-sm); letter-spacing: 0.02em; }
.demo-head b { font-size: var(--text-base); font-weight: 600; }

/* 01 Frames: плитки кадров проявляются по очереди (зацикленно) */
.demo-frames { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; flex: 1; }
.demo-tile {
  border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--surface-2), oklch(0.30 0.012 60));
  box-shadow: var(--bezel);
  opacity: 0.25;
  animation: tileIn 4.2s var(--ease) infinite;
}
.demo-tile:nth-child(1) { animation-delay: 0s; }
.demo-tile:nth-child(2) { animation-delay: 0.25s; }
.demo-tile:nth-child(3) { animation-delay: 0.5s; }
.demo-tile:nth-child(4) { animation-delay: 0.75s; }
.demo-tile:nth-child(5) { animation-delay: 1s; }
.demo-tile:nth-child(6) { animation-delay: 1.25s; }
@keyframes tileIn {
  0%, 8% { opacity: 0.18; transform: scale(0.96); }
  18%, 70% { opacity: 1; transform: scale(1); }
  85%, 100% { opacity: 0.18; transform: scale(0.96); }
}

/* 02 Voice: бегущая звуковая волна */
.demo-wave { display: flex; align-items: center; justify-content: center; gap: 4px; flex: 1; }
.demo-wave i {
  width: 4px;
  height: 18%;
  border-radius: var(--r-pill);
  background: var(--accent-warm);
  opacity: 0.85;
  animation: waveBar 1.4s var(--ease) infinite;
}
.demo-wave i:nth-child(odd) { animation-duration: 1.1s; }
.demo-wave i:nth-child(3n) { animation-duration: 1.7s; }
.demo-wave i:nth-child(1){animation-delay:0s} .demo-wave i:nth-child(2){animation-delay:.08s}
.demo-wave i:nth-child(3){animation-delay:.16s} .demo-wave i:nth-child(4){animation-delay:.24s}
.demo-wave i:nth-child(5){animation-delay:.32s} .demo-wave i:nth-child(6){animation-delay:.4s}
.demo-wave i:nth-child(7){animation-delay:.48s} .demo-wave i:nth-child(8){animation-delay:.56s}
.demo-wave i:nth-child(9){animation-delay:.64s} .demo-wave i:nth-child(10){animation-delay:.72s}
.demo-wave i:nth-child(11){animation-delay:.8s} .demo-wave i:nth-child(12){animation-delay:.88s}
.demo-wave i:nth-child(13){animation-delay:.96s} .demo-wave i:nth-child(14){animation-delay:1.04s}
@keyframes waveBar { 0%, 100% { height: 14%; } 50% { height: 80%; } }

/* 03 Cut: клипы собираются на таймлайне, playhead проходит слева направо */
.demo-timeline { position: relative; display: flex; align-items: center; gap: 0.4rem; flex: 1; }
.demo-clip {
  flex: 1;
  height: 2.4rem;
  border-radius: var(--r-md);
  background: var(--surface-2);
  box-shadow: var(--bezel);
  transform-origin: left;
  transform: scaleX(0);
  animation: clipIn 4.2s var(--ease) infinite;
}
.demo-clip:nth-child(1) { animation-delay: 0.2s; }
.demo-clip:nth-child(2) { animation-delay: 0.6s; }
.demo-clip:nth-child(3) { animation-delay: 1s; }
.demo-clip:nth-child(4) { animation-delay: 1.4s; }
@keyframes clipIn {
  0%, 4% { transform: scaleX(0); }
  20%, 78% { transform: scaleX(1); }
  92%, 100% { transform: scaleX(0); }
}
.demo-playhead {
  position: absolute; top: -0.3rem; bottom: -0.3rem; left: 0;
  width: 2px; border-radius: var(--r-pill);
  background: var(--accent-warm);
  box-shadow: 0 0 8px oklch(0.82 0.10 55 / 0.6);
  animation: playhead 4.2s linear infinite;
}
@keyframes playhead { 0%, 12% { left: 0; opacity: 0; } 20% { opacity: 1; } 80% { left: 100%; opacity: 1; } 81%, 100% { opacity: 0; } }

@media (max-width: 900px) { .demo { grid-template-columns: 1fr; } }

/* Bento-фичи: переиспользуют .card, акцент-иконка персиковая. Hover-lift —
   карточка приподнимается, иконка чуть ярче (тихое премиальное микровзаимодействие). */
.feature-card { transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
.feature-card:hover { transform: translateY(-3px); border-color: var(--line-strong); background: var(--surface-hover); }
.feature-ic {
  width: 2.4rem; height: 2.4rem;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: oklch(0.82 0.10 55 / 0.16);
  box-shadow: inset 0 0 0 1px oklch(0.82 0.10 55 / 0.30);
  margin-bottom: 1rem;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.feature-card:hover .feature-ic { background: oklch(0.82 0.10 55 / 0.26); transform: scale(1.06); }
.feature-ic svg { width: 1.3rem; height: 1.3rem; stroke: var(--accent-warm); stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.feature-card h3 { font-size: var(--text-lg); margin-bottom: 0.5rem; }
.feature-card p { color: var(--ink-soft); font-size: var(--text-sm); }

/* CTA-полоса в конце лендинга */
.lp-cta {
  text-align: center;
  padding: clamp(2.5rem, 5vw, 4rem) 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background:
    radial-gradient(40rem 20rem at 50% 0%, oklch(0.82 0.10 55 / 0.08), transparent 70%),
    var(--surface);
  box-shadow: var(--shadow-amb), var(--bezel);
}
.lp-cta h2 { font-size: clamp(1.8rem, 1.2rem + 2vw, 2.6rem); margin-bottom: 0.8rem; }
.lp-cta p { color: var(--ink-soft); max-width: 48ch; margin: 0 auto 1.6rem; }
.lp-cta .home-cta { justify-content: center; }

@media (max-width: 900px) { .shots { grid-template-columns: 1fr; } }

/* ---------- Под-табы каталога ---------- */
.seg-tabs { display: inline-flex; gap: 0.25rem; padding: 0.25rem; border: 1px solid var(--line); border-radius: var(--r-pill); margin-bottom: 1.75rem; }
.seg-tabs button { background: none; border: none; color: var(--ink-soft); font: inherit; font-size: var(--text-sm); padding: 0.45rem 1.1rem; border-radius: var(--r-pill); transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.seg-tabs button:hover { color: var(--ink); }
.seg-tabs button.active { background: var(--surface-2); color: var(--accent-warm); box-shadow: inset 0 0 0 1px var(--line-strong); }

/* Voice ID и плеер звука */
.voice-id { display: block; margin-top: 0.7rem; padding: 0.5rem 0.8rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); font-size: var(--text-xs); color: var(--accent-warm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Кастомный аудио-плеер: своя кнопка + полоса. Надёжнее нативного <audio>,
   единый вид во всех браузерах. */
.player {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  margin-top: 0.8rem;
  padding: 0.4rem 0.7rem 0.4rem 0.4rem;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--line);
}
.player-btn {
  flex: none;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: 50%;
  background: var(--accent);
  color: var(--ink-invert);
  transition: filter var(--dur) var(--ease);
}
.player-btn:hover { filter: brightness(1.1); }
.player-btn svg { width: 1.05rem; height: 1.05rem; fill: currentColor; }
.player-bar {
  flex: 1;
  height: 5px;
  border-radius: var(--r-pill);
  background: oklch(1 0 0 / 0.14);
  cursor: pointer;
  overflow: hidden;
}
.player-bar span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: var(--r-pill);
  background: var(--accent-warm);
}
.player-time { flex: none; font-size: var(--text-xs); color: var(--ink-faint); font-variant-numeric: tabular-nums; min-width: 2.5rem; text-align: right; }

/* ---------- Бейджи / достижения ---------- */
.badges { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); margin-top: 1.5rem; }
@media (max-width: 640px) { .badges { grid-template-columns: repeat(2, 1fr); } }
.badge-card { text-align: center; padding: 1.2rem 0.8rem; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); opacity: 0.5; transition: opacity var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.badge-card.earned { opacity: 1; border-color: oklch(0.82 0.10 55 / 0.4); box-shadow: inset 0 0 0 1px oklch(0.82 0.10 55 / 0.15); }
.badge-ic { width: 1.8rem; height: 1.8rem; stroke: var(--ink-faint); stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; transition: stroke var(--dur) var(--ease); }
.badge-card.earned .badge-ic { stroke: var(--accent-warm); }
.badge-title { font-size: var(--text-sm); margin-top: 0.5rem; color: var(--ink); }
.badge-meta { font-size: var(--text-xs); color: var(--ink-faint); margin-top: 0.2rem; }
/* Получение достижения: лёгкий «пульс» персиком при earned (гасится reduced-motion). */
.badge-card.earned { animation: badgeEarn var(--dur-slow) var(--ease); }
@keyframes badgeEarn { 0% { transform: scale(0.94); } 60% { transform: scale(1.03); } 100% { transform: scale(1); } }

/* ---------- Dashboard: заголовок секции с действием (экспорт) ---------- */
.dash-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.dash-head h3 { font-family: var(--font-display); font-size: var(--text-xl); }

/* Спарклайн использования: тонкий SVG-график на карточке */
.spark-card { display: flex; flex-direction: column; gap: 0.9rem; }
.spark-foot { display: flex; justify-content: space-between; font-size: var(--text-xs); color: var(--ink-faint); }

/* Столбчатый график кадров по дням: один бар на день, значение по наведению. */
.bars { display: flex; align-items: flex-end; gap: clamp(3px, 1vw, 8px); height: 72px; }
.bar {
  flex: 1; height: 100%; padding: 0; border: none; background: transparent;
  display: flex; align-items: flex-end; position: relative; cursor: pointer;
  border-radius: var(--r-sm, 8px);
}
.bar-fill {
  display: block; width: 100%; min-height: 3px;
  background: var(--accent-warm); border-radius: 4px 4px 2px 2px;
  transition: height var(--dur-slow) var(--ease), background var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.bar.empty .bar-fill { background: var(--line-strong); opacity: 0.55; }
.bar:hover .bar-fill, .bar.on .bar-fill { background: oklch(0.88 0.09 60); }
.bar.empty:hover .bar-fill, .bar.empty.on .bar-fill { background: var(--line-strong); opacity: 0.85; }
.bar:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.bar-tip {
  position: absolute; bottom: 100%; left: 50%; transform: translate(-50%, -8px);
  background: var(--surface-2); border: 1px solid var(--line-strong);
  border-radius: var(--r-md); padding: 0.3rem 0.6rem; white-space: nowrap;
  font-size: var(--text-xs); color: var(--ink-soft); pointer-events: none;
  box-shadow: 0 4px 14px oklch(0 0 0 / 0.35); z-index: 2;
}
.bar-tip b { color: var(--ink); font-weight: 600; }

/* Заголовок секции настроек */
.settings-h { font-family: var(--font-display); font-size: var(--text-xl); margin: 2rem 0 1rem; }
.settings-h:first-of-type { margin-top: 0; }

/* Сетка соцсетей (Connected accounts) */
.social-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.social-card { display: flex; flex-direction: column; min-height: 150px; }
.social-card.is-soon { opacity: 0.55; }
.social-head { display: flex; align-items: center; gap: 0.7rem; }
.social-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.2rem; height: 2.2rem; flex-shrink: 0;
  border: 1px solid var(--line); border-radius: var(--r-md);
  font-size: var(--text-lg); color: var(--ink);
}

/* Пустое состояние (учит интерфейсу, не «ничего нет») */
.empty { text-align: center; padding: 3rem 1rem; color: var(--ink-soft); }
.empty .serif { font-size: var(--text-xl); color: var(--ink); margin-bottom: 0.4rem; }

/* Авторизация по центру */
.auth-box { max-width: 380px; margin-inline: auto; padding-top: 2vh; }

/* Кнопка входа Google: белая плашка, лого + текст по центру (бренд-гайдлайны Google). */
.google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  width: 100%;
  padding: 0.8rem 1rem;
  border: none;
  border-radius: var(--r-pill);
  background: #fff;
  color: #1f1f1f;
  font: inherit;
  font-weight: 500;
  transition: background var(--dur) var(--ease);
}
.google-btn:hover:not(:disabled) { background: #f1f1f1; }
.google-btn:disabled { opacity: 0.55; cursor: default; }
.google-btn svg { flex: none; }

/* ---------- Плавная смена раздела (только opacity+transform) ---------- */
.view { animation: viewIn var(--dur-slow) var(--ease) both; }
@keyframes viewIn { from { opacity: 0; transform: translateY(0.6rem); } to { opacity: 1; transform: none; } }

/* ---------- Reveal-on-scroll: секции лендинга всплывают при появлении ----------
   JS (IntersectionObserver) добавляет .in-view. До этого секция чуть смещена и
   прозрачна. reduced-motion гасит сдвиг (правило в tokens.css обнуляет transition). */
.reveal { opacity: 0; transform: translateY(1rem); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
.reveal.in-view { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

:root { --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
[x-cloak] { display: none !important; }

/* Видеоклиппер (view внутри SPA): нарезка в браузере через ffmpeg.wasm. */
.clipper-note { display: inline-flex; align-items: center; gap: 0.45rem; font-size: var(--text-sm); color: var(--accent-warm); margin-bottom: 1.5rem; }
.clipper-drop { display: block; border: 1px dashed var(--line-strong); border-radius: var(--r-lg); padding: 2rem 1.5rem; text-align: center; cursor: pointer; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
.clipper-drop:hover, .clipper-drop.over { border-color: var(--accent-warm); background: oklch(0.82 0.10 55 / 0.05); }
.clipper-drop input { display: none; }
.clipper-drop .big { font-size: var(--text-lg); color: var(--ink); }
.clipper-drop .small { font-size: var(--text-sm); color: var(--ink-faint); margin-top: 0.3rem; }
.clipper-preview { margin: 1.5rem 0; }
.clipper-preview video { width: 100%; max-height: 320px; border-radius: var(--r-md); background: #000; }
.clipper-preview .meta { font-size: var(--text-sm); color: var(--ink-faint); margin-top: 0.5rem; display: flex; gap: 1rem; flex-wrap: wrap; }
.clipper fieldset { border: none; padding: 0; margin: 0 0 1.5rem; }
.clipper legend { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-faint); margin-bottom: 0.7rem; }
.clipper-seg { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.clipper-seg label { flex: 1; min-width: 8rem; border: 1px solid var(--line); border-radius: var(--r-md); padding: 0.6rem 0.8rem; cursor: pointer; font-size: var(--text-sm); color: var(--ink-soft); transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.clipper-seg label:hover { border-color: var(--line-strong); }
.clipper-seg input { position: absolute; opacity: 0; }
.clipper-seg label:has(input:checked) { border-color: var(--accent-warm); color: var(--ink); background: oklch(0.82 0.10 55 / 0.06); }
.clipper-row { display: flex; align-items: center; gap: 0.7rem; margin-top: 0.9rem; font-size: var(--text-sm); color: var(--ink-soft); flex-wrap: wrap; }
.clipper-row input[type="number"] { width: 6rem; padding: 0.5rem 0.7rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); color: var(--ink); font: inherit; }
.clipper-row input[type="number"]:focus { outline: none; border-color: var(--accent-warm); }
.clipper-check { display: inline-flex; align-items: center; gap: 0.45rem; cursor: pointer; font-size: var(--text-sm); color: var(--ink-soft); }
.clipper-actions { display: flex; gap: 0.7rem; flex-wrap: wrap; align-items: center; margin: 1.5rem 0; }
.clipper-progress { flex: 1; min-width: 10rem; height: 6px; background: var(--surface); border-radius: var(--r-pill); overflow: hidden; }
.clipper-progress i { display: block; height: 100%; width: 0; background: var(--accent-warm); transition: width 0.2s var(--ease); }
.clipper-status { font-size: var(--text-sm); color: var(--ink-faint); }
.clipper-status.err { color: oklch(0.7 0.13 25); }
.clips { display: grid; gap: 0.6rem; margin-top: 1rem; }
.clip { display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 0.7rem 1rem; }
.clip .name { font-size: var(--text-sm); color: var(--ink); }
.clip .dur { font-size: var(--text-xs); color: var(--ink-faint); }

/* Studio (вкладка генерации, перенос из расширения) */
.link-btn { background: none; border: none; padding: 0; color: var(--ink-faint); font-size: var(--text-xs); cursor: pointer; text-decoration: underline; }
.link-btn:hover { color: var(--ink); }
.soon { font-size: var(--text-xs); color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.04em; }
.settings-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 0.9rem 1rem; }

/* --- Studio: те же стили, что в расширении (sidepanel.css) --- */
/* Центрируем рабочую область Studio (как в расширении). */
.studio-wrap { max-width: 760px; margin: 0 auto; }

/* Ряд дорожек с несколькими аккаунтами шире 760px-обёртки studio-wrap. Вырываем его
   из обёртки и центрируем, чтобы 2-3 колонки по 380px стояли цельно, а не сплющивались
   в 760px. Шире 100vw не уходим (min с шириной 3 колонок = 1244px), поэтому нет
   горизонтального скролла на узких экранах; flex-wrap переносит лишнюю колонку.
   Одна дорожка не вырывается — Main story остаётся аккуратной 760px-колонкой. */
.lanes-row {
  display: flex; gap: 1.25rem; align-items: stretch; justify-content: center;
  flex-wrap: wrap;
}
.lanes-row.lanes-multi {
  /* Вырываемся из 760px-обёртки на всю ширину окна, но не больше — отрицательный
     margin тянет края к вьюпорту, max-width ограничивает 100vw. overflow-x:clip
     гасит лишний скролл от ширины скроллбара. Колонки центрированы (justify-center),
     flex-wrap переносит ту, что не влезла, — горизонтального скролла нет. */
  margin-inline: calc(50% - 50vw);
  max-width: 100vw;
  padding-inline: 1.5rem;
  box-sizing: border-box;
  overflow-x: clip;
}

/* Вкладки-сегмент: фон-surface, активная — приподнятая с персиковой иконкой/чертой. */
.studio-tabs {
  display: flex; gap: 4px; margin: 0 auto 1.2rem; max-width: 760px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 4px;
}
.studio-tab {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  background: transparent; color: var(--ink-faint); border: none;
  padding: 8px 4px; border-radius: 9px; font-weight: 600; font-size: var(--text-sm);
  cursor: pointer; font-family: inherit;
  transition: background 160ms var(--ease, ease), color 160ms var(--ease, ease);
}
.studio-tab svg { flex: 0 0 auto; }
.studio-tab:hover { color: var(--ink-soft); }
.studio-tab.active {
  background: var(--surface-2); color: var(--accent-warm);
  box-shadow: inset 0 0 0 1px var(--line-strong), inset 0 -2px 0 oklch(0.82 0.10 55 / 0.5);
}

/* Сегмент Images/Video. */
.mode-seg { display: flex; gap: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 4px; }
.mode-btn {
  flex: 1; background: transparent; color: var(--ink-faint); border: none;
  padding: 8px; border-radius: 9px; font-weight: 600; font-size: var(--text-sm);
  cursor: pointer; font-family: inherit; display: flex; align-items: center; justify-content: center; gap: 6px;
}
.mode-btn:hover:not(.active):not(:disabled) { color: var(--ink); }
.mode-btn.active { background: var(--surface-2); color: var(--accent-warm); box-shadow: inset 0 0 0 1px var(--line-strong); }
.mode-btn:disabled { cursor: not-allowed; color: var(--ink-faint); }

/* Поля Studio: surface-фон, скруглённые, фокус-персик (как в расширении). */
.studio-field {
  width: 100%; background: var(--surface); border: 1px solid var(--line);
  color: var(--ink); border-radius: var(--r-md); padding: 10px 13px;
  font-family: inherit; font-size: var(--text-sm);
  transition: border-color 160ms var(--ease, ease), box-shadow 160ms var(--ease, ease);
}
.studio-field::placeholder { color: var(--ink-faint); }
.studio-field:focus { outline: none; border-color: var(--accent-warm); box-shadow: 0 0 0 3px oklch(0.82 0.10 55 / 0.18); }
.studio-field:disabled { opacity: 0.55; }

/* Prompts + Voiceover рядом (две колонки), как в расширении. */
.io-cols { display: flex; gap: 12px; }
.io-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.label-row { display: flex; align-items: center; justify-content: space-between; }
.field-label { color: var(--ink-soft); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
@media (max-width: 640px) { .io-cols { flex-direction: column; } }

/* Ряды кнопок действий. */
.studio-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.studio-actions .btn { flex: 1; min-width: 120px; justify-content: center; }

/* Статус аккаунта дорожки: «Connect account #N» (не подключён) либо ✓ email + Open. */
.lane-account .btn { width: 100%; justify-content: center; }
.lane-account-on {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface);
}
.lane-account-badge {
  display: flex; align-items: center; gap: 6px; min-width: 0;
  font-size: var(--text-sm); color: var(--ok, #3a8);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ElevenLabs дорожки: свой ключ+голос на аккаунт. */
.lane-eleven { display: flex; flex-direction: column; gap: 6px; }

/* Таблица юзеров в Admin (аналитика) */
.admin-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.admin-table th, .admin-table td { padding: 0.55rem 0.8rem; text-align: left; white-space: nowrap; }
.admin-table th { color: var(--ink-soft); font-weight: 500; }
.admin-table tbody tr { border-top: 1px solid var(--line); }